/* ══════════════════════════════════════════════════════════════════
   TASKFLOW PREMIUM — Modern Professional Interface Layer
   Stacks on top of style.css + frost theme. Purely additive.
   ══════════════════════════════════════════════════════════════════ */

/* ── 0. FONT ──────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

/* ── 1. DESIGN TOKENS ─────────────────────────────────────────────── */
:root {
  /* Fonts */
  --font-body:    'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-display: 'Space Grotesk', system-ui, sans-serif;

  /* Elevation */
  --elev-0: 0 1px 2px rgba(40,70,160,.05);
  --elev-1: 0 1px 4px rgba(40,70,160,.07), 0 3px 10px rgba(40,70,160,.06);
  --elev-2: 0 2px 8px rgba(40,70,160,.09), 0 10px 30px rgba(40,70,160,.08);
  --elev-3: 0 4px 18px rgba(40,70,160,.12), 0 18px 50px rgba(40,70,160,.12);
  --elev-modal: 0 8px 40px rgba(10,30,100,.20), 0 24px 80px rgba(10,30,100,.16);

  /* Radius */
  --r-xs:   4px;
  --r-sm:   7px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-pill: 9999px;

  /* Easing */
  --ease-snappy: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);

  /* Duration */
  --t1: 100ms;
  --t2: 180ms;
  --t3: 300ms;
}

/* Dark mode elevation */
body.dark {
  --elev-0: 0 1px 2px rgba(0,0,0,.25);
  --elev-1: 0 1px 4px rgba(0,0,0,.30), 0 3px 10px rgba(0,0,0,.22);
  --elev-2: 0 2px 8px rgba(0,0,0,.35), 0 10px 30px rgba(0,0,0,.28);
  --elev-3: 0 4px 18px rgba(0,0,0,.45), 0 18px 50px rgba(0,0,0,.35);
  --elev-modal: 0 8px 40px rgba(0,0,0,.60), 0 24px 80px rgba(0,0,0,.50);
}

/* ── 2. BASE BODY ─────────────────────────────────────────────────── */
body {
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.008em;
}

/* ── 3. GLOBAL SCROLLBAR ──────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(100,130,200,.25);
  border-radius: var(--r-pill);
  transition: background var(--t2);
}
::-webkit-scrollbar-thumb:hover { background: rgba(100,130,200,.45); }
body.dark ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); }
body.dark ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.22); }

/* ── 4. SIDEBAR ────────────────────────────────────────────────────── */

/* Glass upgrade — Frost light */
body:not(.dark) #sidebar {
  backdrop-filter: blur(26px) saturate(1.9) !important;
  -webkit-backdrop-filter: blur(26px) saturate(1.9) !important;
  background: rgba(206,222,255,.64) !important;
  border-right: 1px solid rgba(130,160,240,.20) !important;
  box-shadow: 1px 0 0 rgba(255,255,255,.35) inset !important;
}

/* Logo area */
.sidebar-logo {
  padding: 1.1rem 1rem .9rem !important;
}
.sb-logo-text {
  font-family: var(--font-display) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.035em !important;
}

/* Section headings */
.sidebar-section-title {
  font-size: .60rem !important;
  font-weight: 700 !important;
  letter-spacing: .11em !important;
  padding: .9rem .85rem .3rem !important;
  opacity: .55 !important;
}

/* Nav container */
.sidebar-nav {
  padding: 0 .45rem !important;
  gap: 1px !important;
}

/* Nav items */
.nav-item {
  border-radius: 8px !important;
  padding: .46rem .75rem !important;
  font-size: .81rem !important;
  font-weight: 500 !important;
  gap: 8px !important;
  transition:
    background var(--t1) var(--ease-snappy),
    color var(--t1) var(--ease-snappy),
    box-shadow var(--t1) var(--ease-snappy) !important;
}
.nav-item svg {
  width: 15px !important;
  height: 15px !important;
  opacity: .75;
  flex-shrink: 0;
  transition: opacity var(--t1) var(--ease-snappy);
}
.nav-item:hover svg, .nav-item.active svg { opacity: 1; }

/* Active state — left indicator pill */
body:not(.dark) .nav-item.active {
  background: rgba(99,102,241,.10) !important;
  color: var(--primary) !important;
  font-weight: 600 !important;
  box-shadow: inset 3px 0 0 var(--primary) !important;
}
body:not(.dark) .nav-item:hover:not(.active) {
  background: rgba(0,0,0,.04) !important;
  color: var(--text) !important;
}

body.dark .nav-item.active {
  background: rgba(99,102,241,.16) !important;
  color: var(--primary) !important;
  font-weight: 600 !important;
  box-shadow: inset 3px 0 0 var(--primary) !important;
}
body.dark .nav-item:hover:not(.active) {
  background: rgba(255,255,255,.06) !important;
}

/* User info */
.user-name {
  font-size: .825rem !important;
  font-weight: 600 !important;
}
.user-role {
  font-size: .70rem !important;
}

/* ── 5. TOPBAR ─────────────────────────────────────────────────────── */
.topbar {
  height: 56px !important;
  padding: 0 1.25rem 0 1.5rem !important;
}

.topbar h1 {
  font-family: var(--font-display) !important;
  font-size: 1.02rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
}

body:not(.dark) .topbar {
  backdrop-filter: blur(18px) saturate(1.7) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.7) !important;
  background: rgba(218,232,255,.90) !important;
  box-shadow: 0 1px 0 rgba(130,160,240,.22),
              0 2px 14px rgba(40,80,180,.06) !important;
}

/* ── 6. BUTTONS ────────────────────────────────────────────────────── */
.btn {
  border-radius: 7px !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: .812rem !important;
  letter-spacing: -0.01em !important;
  transition:
    background var(--t1) var(--ease-snappy),
    box-shadow var(--t1) var(--ease-snappy),
    transform var(--t1) var(--ease-snappy) !important;
}

.btn-primary {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
  box-shadow: 0 1px 3px rgba(99,102,241,.30), 0 3px 10px rgba(99,102,241,.18) !important;
}
.btn-primary:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 7px rgba(99,102,241,.40), 0 6px 18px rgba(99,102,241,.22) !important;
}
.btn-primary:active {
  transform: translateY(0) !important;
  box-shadow: 0 1px 2px rgba(99,102,241,.20) !important;
}

.btn-ghost {
  border-radius: 7px !important;
  font-weight: 500 !important;
  transition:
    background var(--t1) var(--ease-snappy),
    border-color var(--t1) var(--ease-snappy) !important;
}

/* ── 7. FORMS ──────────────────────────────────────────────────────── */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea {
  border-radius: var(--r-sm) !important;
  font-family: var(--font-body) !important;
  font-size: .875rem !important;
  transition:
    border-color var(--t1) var(--ease-snappy),
    box-shadow var(--t1) var(--ease-snappy) !important;
}
input:focus, select:focus, textarea:focus {
  box-shadow: 0 0 0 3px rgba(99,102,241,.14) !important;
  outline: none !important;
}

/* Form labels */
.form-group label {
  font-size: .75rem !important;
  font-weight: 600 !important;
  letter-spacing: .02em !important;
}

/* ── 8. CARDS & SURFACES ──────────────────────────────────────────── */
.card, .tcard {
  border-radius: 12px !important;
  transition:
    box-shadow var(--t2) var(--ease-snappy),
    transform var(--t2) var(--ease-snappy) !important;
}

.list-table-wrap {
  border-radius: 12px !important;
  overflow: hidden;
}

/* Frost cards */
body:not(.dark) .card,
body:not(.dark) .tcard,
body:not(.dark) .list-table-wrap {
  background: rgba(228,240,255,.88) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(120,150,230,.16) !important;
  box-shadow: var(--elev-1) !important;
}

/* ── 9. STAT CARDS ─────────────────────────────────────────────────── */
.stat-card {
  border-radius: 12px !important;
}
.stat-value {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  letter-spacing: -0.045em !important;
  line-height: 1 !important;
}
.stat-label {
  font-size: .67rem !important;
  font-weight: 700 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  opacity: .6 !important;
}

/* ── 10. MODALS ────────────────────────────────────────────────────── */
.modal-box, .modal-content {
  border-radius: 16px !important;
  box-shadow: var(--elev-modal) !important;
}
body:not(.dark) .modal-box,
body:not(.dark) .modal-content {
  backdrop-filter: blur(20px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.5) !important;
  background: rgba(238,246,255,.96) !important;
  border: 1px solid rgba(130,165,240,.18) !important;
}

/* ── 11. CHIPS & BADGES ────────────────────────────────────────────── */
.chip {
  border-radius: var(--r-pill) !important;
  font-weight: 600 !important;
  font-size: .67rem !important;
  letter-spacing: .015em !important;
}
.nav-alert-badge {
  font-size: .58rem !important;
  font-weight: 700 !important;
}

/* ── 12. TABLE / LIST VIEW ─────────────────────────────────────────── */
table th {
  font-size: .70rem !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}
.list-row {
  transition: background var(--t1) var(--ease-snappy) !important;
}

/* ── 13. KANBAN ────────────────────────────────────────────────────── */
.kb-col {
  border-radius: 12px !important;
}
.kb-card {
  border-radius: 8px !important;
  transition:
    transform var(--t2) var(--ease-snappy),
    box-shadow var(--t2) var(--ease-snappy),
    border-color var(--t2) var(--ease-snappy) !important;
}
.kb-card:hover {
  transform: translateY(-2px) !important;
}
.kb-col-lbl {
  font-size: .67rem !important;
  font-weight: 700 !important;
  letter-spacing: .07em !important;
}
.kb-card-title {
  font-size: .825rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

/* ── 14. FILTER BAR (KANBAN) ───────────────────────────────────────── */
.kb-filter-bar {
  border-radius: 10px !important;
}
.kb-chip {
  font-weight: 600 !important;
  font-size: .73rem !important;
  letter-spacing: -0.01em !important;
}

/* ── 15. VIEW TRANSITIONS ──────────────────────────────────────────── */
@keyframes tf-view-in {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: translateY(0); }
}

#view-container > * {
  animation: tf-view-in var(--t3) var(--ease-snappy) both;
}

@media (prefers-reduced-motion: reduce) {
  #view-container > * { animation: none; }
  *, *::before, *::after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
  }
}

/* ── 16. MICRO DETAILS ─────────────────────────────────────────────── */

/* Progress bars */
.progress-fill, .bar-fill {
  border-radius: var(--r-pill) !important;
}

/* Gantt */
.gantt-bar {
  border-radius: 4px !important;
}

/* Mini avatar */
.mini-avatar {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
}

/* Priority dots — uniform size */
.pri-dot, .kb-dot {
  width: 7px !important;
  height: 7px !important;
}

/* Toggle / switch */
.dark-toggle-btn {
  border-radius: var(--r-sm) !important;
  transition: background var(--t1) var(--ease-snappy) !important;
}

/* Gantt filter selects */
.gantt-filter-bar select {
  border-radius: var(--r-sm) !important;
  font-family: var(--font-body) !important;
  font-size: .80rem !important;
}