/* =====================================================================
   Tasker — "Spectrum" theme layer
   Loaded LAST on every page so its :root + component rules override the
   base stylesheets. Re-skins the app with a ClickUp-style identity:
   violet→pink gradient, vivid status spectrum, sleek type, soft motion.
   Pure presentation — no markup or JS changes.
   ===================================================================== */

/* ---------- 1. Tokens (light) ---------- */
:root {
  --bg:            #F6F7FB;
  --surface:       #FFFFFF;
  --surface-2:     #F1F2F8;
  --surface-hover: #ECEDF6;
  --border:        #E8E9F2;
  --border-strong: #D8DAE8;

  --text:        #15172B;
  --text-muted:  #6A6E8A;
  --text-subtle: #9A9DB8;

  --accent:       #7B5CFF;
  --accent-hover: #6A49F2;
  --accent-soft:  #EFEBFF;
  --accent-text:  #FFFFFF;

  --grad:      linear-gradient(135deg, #7B5CFF 0%, #B14BF4 48%, #FD5EB1 100%);
  --grad-soft: linear-gradient(135deg, #EFEBFF 0%, #FBE9F5 100%);

  /* spectrum */
  --pink:  #FD5EB1;
  --blue:  #3E8BFF;
  --cyan:  #23C4F0;
  --amber: #FF9F38;
  --green: #21C17A;
  --red:   #FF5A6A;

  --danger:      #FF5A6A;
  --danger-soft: #FFECEF;
  --warning:     #FF9F38;
  --warn:        #FF9F38;
  --success:     #21C17A;
  --good:        #21C17A;
  --good-soft:   #E2F7EE;

  /* priority */
  --p-urgent: #FF5A6A;
  --p-high:   #FF9F38;
  --p-medium: #3E8BFF;
  --p-low:    #9A9DB8;
  --p-none:   #D8DAE8;

  --radius-sm: 10px;
  --radius:    14px;
  --radius-lg: 20px;

  --shadow-sm:    0 1px 2px rgba(20,23,43,.05);
  --shadow-md:    0 4px 16px rgba(123,92,255,.08), 0 2px 6px rgba(20,23,43,.05);
  --shadow-lg:    0 14px 34px rgba(123,92,255,.14), 0 6px 14px rgba(20,23,43,.06);
  --shadow-card:  0 1px 3px rgba(20,23,43,.04), 0 6px 18px -6px rgba(123,92,255,.10);
  --shadow-modal: 0 30px 60px -16px rgba(28,18,64,.34);

  --ease: cubic-bezier(.22,.61,.36,1);
}

[data-theme="dark"] {
  --bg:            #0E0E16;
  --surface:       #16161F;
  --surface-2:     #1E1E2A;
  --surface-hover: #232333;
  --border:        #272736;
  --border-strong: #3A3A4D;
  --text:          #F3F3FA;
  --text-muted:    #A7A9C0;
  --text-subtle:   #71748F;
  --accent:        #9B82FF;
  --accent-hover:  #B3A0FF;
  --accent-soft:   #211C3D;
  --danger-soft:   #2A1620;
  --good-soft:     #10241C;
  --shadow-card:   0 1px 3px rgba(0,0,0,.4), 0 8px 22px -8px rgba(0,0,0,.5);
}

/* ---------- 2. Global polish ---------- */
html, body {
  font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.01em;
}
::selection { background: rgba(123,92,255,.22); }

/* tabular numbers everywhere they read as data */
.stat-value, .num, td.num, .elapsed-cell,
.mprice .amt, .lead-stat-row, .timer-display, .time-big {
  font-family: 'Inter', 'Plus Jakarta Sans', sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* custom scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 99px; border: 3px solid var(--bg); }
*::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* keyboard focus */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 8px;
}

/* ---------- 3. Brand + avatars (gradient identity) ---------- */
.brand-mark,
.auth-brand-mark {
  background: var(--grad) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px -4px rgba(123,92,255,.5);
}
.user-avatar, .avatar-sm, .who-avatar, .notify-avatar {
  background: var(--grad) !important;
  color: #fff !important;
  font-weight: 700;
}
.notify-avatar.team { background: linear-gradient(135deg,#3E8BFF,#23C4F0) !important; }

/* ---------- 4. Buttons ---------- */
.btn-primary {
  background: var(--grad);
  background-size: 140% 140%;
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-weight: 700;
  box-shadow: 0 6px 16px -6px rgba(123,92,255,.55);
  transition: transform .15s var(--ease), box-shadow .2s var(--ease), background-position .4s var(--ease);
}
.btn-primary:hover {
  background-position: 100% 0;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -6px rgba(123,92,255,.6);
}
.btn-primary:active { transform: translateY(0) scale(.985); }

.btn-secondary, .btn-ghost {
  border-radius: var(--radius-sm);
  transition: background .15s var(--ease), border-color .15s var(--ease), transform .12s var(--ease), color .15s var(--ease);
}
.btn-secondary:hover, .btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-ghost:active, .btn-secondary:active { transform: scale(.97); }

.btn-danger-solid { background: var(--red); color: #fff; border: none; border-radius: var(--radius-sm); }
.btn-danger-solid:hover { filter: brightness(1.05); }
.btn-danger-ghost { color: var(--red); border-radius: var(--radius-sm); }
.btn-danger-ghost:hover { background: var(--danger-soft); }

/* ---------- 5. Sidebar navigation ---------- */
.admin-nav-item, .nav-item {
  border-radius: var(--radius-sm);
  transition: background .16s var(--ease), color .16s var(--ease), transform .12s var(--ease);
}
.admin-nav-item:hover, .nav-item:hover { background: var(--surface-2); transform: translateX(2px); }

.admin-body .admin-nav-item.active,
.admin-nav-item.active,
.nav-item.active {
  background: var(--grad) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px -8px rgba(123,92,255,.6);
}
.admin-nav-item.active svg, .nav-item.active svg,
.admin-nav-item.active span, .nav-item.active span { color: #fff !important; }
/* badge sitting inside an active item stays readable */
.admin-nav-item.active .badge, .nav-item.active .badge {
  background: rgba(255,255,255,.25); color: #fff;
}

/* ---------- 6. Cards + entrance motion ---------- */
.card, .stat-card, .team-card {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  transition: transform .2s var(--ease), box-shadow .25s var(--ease), border-color .2s var(--ease);
}
.card:hover, .team-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--border-strong);
}
.stat-card {
  position: relative;
  overflow: hidden;
}
.stat-card::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--grad);
  opacity: .9;
}
.stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

@keyframes spectrum-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.stat-card, .card, .team-card, .data-table tbody tr {
  animation: spectrum-rise .5s var(--ease) both;
}
.stat-card:nth-child(2){ animation-delay:.05s } .stat-card:nth-child(3){ animation-delay:.1s } .stat-card:nth-child(4){ animation-delay:.15s }
.data-table tbody tr:nth-child(2){animation-delay:.03s} .data-table tbody tr:nth-child(3){animation-delay:.06s}
.data-table tbody tr:nth-child(4){animation-delay:.09s} .data-table tbody tr:nth-child(5){animation-delay:.12s}
.data-table tbody tr:nth-child(n+6){animation-delay:.15s}

/* ---------- 7. Stat numbers as gradient ---------- */
.stat-value {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--accent);
  font-weight: 800;
}
.stat-value .running-dot { -webkit-text-fill-color: initial; }

/* ---------- 8. Tables ---------- */
.data-table thead th {
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 11px;
  color: var(--text-subtle);
}
.data-table tbody tr { transition: background .14s var(--ease); }
.data-table tbody tr:hover { background: var(--accent-soft); }

/* ---------- 9. Status + priority pills (tinted bg, saturated text) ---------- */
.status-pill, .status-pill-large, .priority-pill, .badge, .status-menu-item, .sg-save {
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .01em;
}
.status-todo        { background:#EEF0F6 !important; color:#6A6E8A !important; }
.status-in-progress { background:#E7F0FF !important; color:#2F6FE0 !important; }
.status-hold        { background:#FFF3E2 !important; color:#C9781E !important; }
.status-approval    { background:#F4EAFE !important; color:#9A3FE0 !important; }
.status-stuck       { background:#FFECEF !important; color:#E23B4C !important; }
.status-done        { background:#E2F7EE !important; color:#128A57 !important; }

.priority-urgent { background:#FFECEF !important; color:#E23B4C !important; }
.priority-high   { background:#FFF3E2 !important; color:#C9781E !important; }
.priority-medium { background:#E7F0FF !important; color:#2F6FE0 !important; }

/* count badge = solid accent, white text */
.badge {
  background: var(--accent);
  color: #fff;
  padding: 1px 7px;
  font-size: 11px;
  min-width: 18px;
  text-align: center;
}
.unread-badge { background: var(--pink); }

.status-dot, .running-dot {
  box-shadow: 0 0 0 3px rgba(33,193,122,.18);
}
.running-dot { background: var(--green) !important; }

/* ---------- 10. Inputs ---------- */
.filter-input, input[type=text], input[type=email], input[type=password],
input[type=number], input[type=date], select, textarea {
  border-radius: var(--radius-sm);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.filter-input:focus, input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  outline: none;
}

/* ---------- 11. Modals ---------- */
.modal-backdrop { backdrop-filter: blur(3px); background: rgba(21,23,43,.42); }
.modal {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-modal);
  animation: spectrum-pop .26s var(--ease) both;
}
@keyframes spectrum-pop { from { opacity:0; transform: translateY(12px) scale(.98); } to { opacity:1; transform:none; } }

/* ---------- 12. Top-user bars + charts (animated fill) ---------- */
.top-user-fill, .bar-chart .bar, .bar-fill {
  background: var(--grad) !important;
  transition: width .8s var(--ease), height .8s var(--ease);
}
/* name sits on top of the coloured fill -> force light text + legibility shadow */
.top-user-name {
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(20,23,43,.45);
  font-weight: 700;
}
.top-user-bar { border-radius: 999px; }
.top-user-fill { border-radius: 999px; }

/* ---------- 13. Notification toasts ---------- */
.notify-toast {
  border-radius: var(--radius);
  border-left: 4px solid var(--accent);
  box-shadow: var(--shadow-lg);
}

/* ---------- 14. Auth pages ---------- */
.auth-card { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.auth-body { background:
  radial-gradient(1100px 540px at 12% -10%, #EFEBFF 0%, transparent 55%),
  radial-gradient(900px 520px at 110% 110%, #FBE9F5 0%, transparent 55%),
  var(--bg);
}

/* ---------- 15. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}