/* ── Palace Design System ───────────────────────────────────────────────────
   Complements Tailwind CDN. Handles sidebar transitions, accordion, and
   design tokens that Tailwind utilities can't express cleanly.
──────────────────────────────────────────────────────────────────────────── */

/* ── Design tokens ──────────────────────────────────────────────────────── */
:root {
  --sidebar-width: 240px;
  --sidebar-collapsed-width: 64px;
  --sidebar-bg: #0f172a;
  --sidebar-border: #1e293b;
  --sidebar-text: #94a3b8;
  --sidebar-text-active: #f8fafc;
  --sidebar-hover-bg: rgba(99,102,241,.12);
  --sidebar-active-bg: rgba(99,102,241,.20);
  --sidebar-active-bar: #6366f1;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --shadow-xs: 0 1px 2px rgba(0,0,0,.05);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,.10);
  --shadow-lg: 0 10px 30px rgba(0,0,0,.12);
  --transition: 150ms cubic-bezier(.4,0,.2,1);
  --transition-slow: 260ms cubic-bezier(.4,0,.2,1);
}

/* ── Sidebar shell ──────────────────────────────────────────────────────── */
#sidebar {
  width: var(--sidebar-width);
  transition: width var(--transition-slow);
  flex-shrink: 0;
  overflow-x: hidden;
  will-change: width;
}
body.sidebar-collapsed #sidebar { width: var(--sidebar-collapsed-width); }
body.sidebar-collapsed .nav-label,
body.sidebar-collapsed .nav-group-label,
body.sidebar-collapsed .nav-search-wrap,
body.sidebar-collapsed .sidebar-brand-text,
body.sidebar-collapsed .nav-group-chevron,
body.sidebar-collapsed .sidebar-user-info,
body.sidebar-collapsed .nav-group-items { display: none !important; }
body.sidebar-collapsed .nav-group-header { justify-content: center; padding: 10px 0; }
body.sidebar-collapsed .nav-link { justify-content: center; padding: 10px 0; margin: 1px 0; border-radius: 0; }
body.sidebar-collapsed .nav-link svg,
body.sidebar-collapsed .nav-group-header svg:first-child { margin: 0; }

/* ── Nav group accordion ────────────────────────────────────────────────── */
.nav-group-items {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--transition-slow);
}
.nav-group.open .nav-group-items { max-height: 700px; }
.nav-group-chevron { transition: transform var(--transition); flex-shrink: 0; }
.nav-group.open .nav-group-chevron { transform: rotate(180deg); }

/* ── Nav link ───────────────────────────────────────────────────────────── */
.nav-link {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 12px;
  margin: 1px 6px;
  border-radius: var(--radius-md);
  color: var(--sidebar-text);
  font-size: .8125rem;
  font-weight: 500;
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
}
.nav-link:hover { background: var(--sidebar-hover-bg); color: var(--sidebar-text-active); }
.nav-link.active { background: var(--sidebar-active-bg); color: var(--sidebar-text-active); position: relative; }
.nav-link.active::before {
  content: '';
  position: absolute;
  left: -6px; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 60%;
  background: var(--sidebar-active-bar);
  border-radius: 0 3px 3px 0;
}
.nav-link svg { flex-shrink: 0; opacity: .7; }
.nav-link.active svg, .nav-link:hover svg { opacity: 1; }

/* ── Nav group header ───────────────────────────────────────────────────── */
.nav-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 5px;
  cursor: pointer;
  user-select: none;
  color: #64748b;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  width: 100%;
  border: none;
  background: none;
  transition: color var(--transition);
}
.nav-group-header:hover { color: #94a3b8; }

/* ── Sidebar search ─────────────────────────────────────────────────────── */
.sidebar-search {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--radius-md);
  color: #e2e8f0;
  font-size: .8125rem;
  padding: 7px 10px 7px 32px;
  width: 100%;
  outline: none;
  transition: border-color var(--transition), background var(--transition);
}
.sidebar-search:focus { border-color: #6366f1; background: rgba(255,255,255,.09); }
.sidebar-search::placeholder { color: #475569; }
.nav-link[data-hidden="true"] { display: none !important; }

/* ── Sidebar toggle button ──────────────────────────────────────────────── */
.sidebar-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.09);
  color: #64748b;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
  flex-shrink: 0;
}
.sidebar-toggle-btn:hover { background: rgba(255,255,255,.12); color: #e2e8f0; }

/* ── Sidebar user area ───────────────────────────────────────────────────── */
.sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-top: 1px solid var(--sidebar-border);
  text-decoration: none;
  transition: background var(--transition);
}
.sidebar-user:hover { background: rgba(255,255,255,.05); }
.sidebar-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg,#6366f1 0%,#8b5cf6 100%);
  color: #fff;
  font-size: .6875rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ── Cards ──────────────────────────────────────────────────────────────── */
.card { background:#fff; border-radius:var(--radius-xl); border:1px solid #f1f5f9; box-shadow:var(--shadow-sm); }
.card-header { padding:16px 20px; border-bottom:1px solid #f1f5f9; display:flex; align-items:center; justify-content:space-between; }
.card-body { padding:20px; }

/* ── Stat cards ─────────────────────────────────────────────────────────── */
.stat-card {
  background: #fff;
  border-radius: var(--radius-xl);
  border: 1px solid #f1f5f9;
  box-shadow: var(--shadow-sm);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-decoration: none;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.stat-card:hover { border-color: #c7d2fe; box-shadow: var(--shadow-md); transform: translateY(-1px); }
.stat-label { font-size:.6875rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:#94a3b8; }
.stat-value { font-size:1.875rem; font-weight:700; line-height:1; color:#0f172a; }
.stat-sub { font-size:.75rem; color:#94a3b8; margin-top:2px; }

/* ── Page header ─────────────────────────────────────────────────────────── */
.page-header { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:24px; }
.page-title { font-size:1.375rem; font-weight:700; color:#0f172a; line-height:1.2; }
.page-subtitle { font-size:.8125rem; color:#64748b; margin-top:3px; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 16px; border-radius:var(--radius-md);
  font-size:.8125rem; font-weight:600; cursor:pointer;
  transition:background var(--transition), box-shadow var(--transition), transform var(--transition);
  border:none; white-space:nowrap; text-decoration:none; line-height:1;
}
.btn:hover { transform:translateY(-1px); }
.btn:active { transform:translateY(0); }
.btn-primary { background:#6366f1; color:#fff; box-shadow:0 2px 8px rgba(99,102,241,.35); }
.btn-primary:hover { background:#4f46e5; box-shadow:0 4px 12px rgba(99,102,241,.45); }
.btn-secondary { background:#fff; color:#374151; border:1px solid #e5e7eb; box-shadow:var(--shadow-xs); }
.btn-secondary:hover { background:#f9fafb; border-color:#d1d5db; }
.btn-danger { background:#fff; color:#dc2626; border:1px solid #fecaca; }
.btn-danger:hover { background:#fef2f2; border-color:#f87171; }
.btn-sm { padding:5px 10px; font-size:.75rem; border-radius:var(--radius-sm); gap:4px; }

/* ── Inputs ──────────────────────────────────────────────────────────────── */
.input-field {
  width:100%; border:1.5px solid #e5e7eb; border-radius:var(--radius-md);
  padding:8px 12px; font-size:.875rem; color:#111827; background:#fff;
  transition:border-color var(--transition), box-shadow var(--transition);
  outline:none; line-height:1.4;
}
.input-field:focus { border-color:#6366f1; box-shadow:0 0 0 3px rgba(99,102,241,.12); }
.input-field::placeholder { color:#9ca3af; }

/* ── Tabs ────────────────────────────────────────────────────────────────── */
.tab-btn {
  padding:8px 4px; font-size:.875rem; font-weight:500; color:#6b7280;
  border-bottom:2px solid transparent; cursor:pointer;
  background:none; border-top:none; border-left:none; border-right:none;
  transition:color var(--transition), border-color var(--transition); white-space:nowrap;
}
.tab-btn:hover { color:#374151; }
.tab-btn.active { color:#6366f1; border-bottom-color:#6366f1; }

/* ── Badges ──────────────────────────────────────────────────────────────── */
.badge {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 8px; border-radius:99px;
  font-size:.6875rem; font-weight:600; white-space:nowrap; text-transform:capitalize;
}
.badge-green  { background:#dcfce7; color:#15803d; }
.badge-red    { background:#fee2e2; color:#dc2626; }
.badge-yellow { background:#fef9c3; color:#a16207; }
.badge-blue   { background:#dbeafe; color:#1d4ed8; }
.badge-purple { background:#f3e8ff; color:#7c3aed; }
.badge-gray   { background:#f1f5f9; color:#64748b; }
.badge-orange { background:#ffedd5; color:#c2410c; }

/* ── Data table ──────────────────────────────────────────────────────────── */
.data-table { width:100%; border-collapse:collapse; font-size:.875rem; }
.data-table thead tr { border-bottom:1px solid #f1f5f9; }
.data-table th { text-align:left; padding:10px 16px; font-size:.6875rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:#94a3b8; background:#fafafa; }
.data-table td { padding:12px 16px; border-bottom:1px solid #f8fafc; color:#374151; }
.data-table tbody tr:hover td { background:#fafafa; }
.data-table tbody tr:last-child td { border-bottom:none; }

/* ── Score bars ──────────────────────────────────────────────────────────── */
.score-bar { height:6px; background:#f1f5f9; border-radius:3px; overflow:hidden; }
.score-bar-fill { height:100%; background:linear-gradient(90deg,#6366f1,#8b5cf6); border-radius:3px; transition:width .6s ease; }

/* ── Drop zone ───────────────────────────────────────────────────────────── */
.drop-zone { border:2px dashed #e2e8f0; border-radius:var(--radius-lg); transition:border-color var(--transition), background var(--transition); cursor:pointer; }
.drop-zone.drag-over, .drop-zone:hover { border-color:#6366f1; background:rgba(99,102,241,.04); }

/* ── HTMX / memory card / modal ──────────────────────────────────────────── */
.htmx-indicator { opacity:0; transition:opacity 200ms; }
.htmx-request .htmx-indicator { opacity:1; }
.memory-card { transition:background var(--transition); }
.memory-card:hover { background:#fafafa; }
.modal-panel { max-height:90vh; overflow-y:auto; }

/* ── Kanban ──────────────────────────────────────────────────────────────── */
.kanban-column { min-width:280px; max-width:320px; flex-shrink:0; }
.kanban-card { background:#fff; border:1px solid #f1f5f9; border-radius:var(--radius-lg); box-shadow:var(--shadow-xs); padding:14px 16px; cursor:pointer; transition:box-shadow var(--transition), border-color var(--transition), transform var(--transition); }
.kanban-card:hover { box-shadow:var(--shadow-md); border-color:#e0e7ff; transform:translateY(-1px); }

/* ── Scrollbar ───────────────────────────────────────────────────────────── */
#sidebar::-webkit-scrollbar { width:4px; }
#sidebar::-webkit-scrollbar-track { background:transparent; }
#sidebar::-webkit-scrollbar-thumb { background:rgba(255,255,255,.1); border-radius:2px; }
body.sidebar-open { overflow:hidden; }

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width:767px) {
  #sidebar {
    position:fixed; inset-y:0; left:0; z-index:50;
    width:var(--sidebar-width) !important;
    transform:translateX(-100%);
    transition:transform var(--transition-slow) !important;
  }
  #sidebar.mobile-open { transform:translateX(0) !important; }
  body.sidebar-collapsed #sidebar { width:var(--sidebar-width) !important; }
}