/* ===================================================================
   CCHPS · assets/css/theme.css — "Aurora" design layer (v3)

   Loaded after app.css. It changes no layout and renames no class, so
   every page keeps working; it re-tunes the tokens and adds the
   motion, depth and colour. Remove the <link> to roll back.
   =================================================================== */

:root {
  --font: 'Plus Jakarta Sans', 'Hind Siliguri', ui-sans-serif, system-ui,
          -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  --bg:        #f5f6fd;
  --surface-2: #f8f9fe;
  --surface-3: #f0f2fb;
  --line:      #e4e7f3;
  --line-2:    #cfd4e8;

  --brand:      #5b4cf5;
  --brand-2:    #7a6cff;
  --brand-soft: #efedff;
  --brand-ink:  #3b2fc4;

  --violet: #8b5cf6; --violet-soft: #f4efff;
  --pink:   #e0459b; --pink-soft:   #fdeef6;
  --coral:  #f2694a; --coral-soft:  #fff0eb;
  --teal:   #0fa596; --teal-soft:   #e8faf7;
  --sky:    #0b8fd6; --sky-soft:    #eaf6fe;

  --r: 12px; --r-lg: 18px; --r-xl: 24px;

  --sh-1: 0 1px 2px rgba(30,27,75,.05), 0 0 0 1px rgba(30,27,75,.02);
  --sh-2: 0 6px 16px -6px rgba(30,27,75,.12), 0 2px 4px rgba(30,27,75,.04);
  --sh-3: 0 18px 40px -14px rgba(30,27,75,.22), 0 4px 10px rgba(30,27,75,.05);
  --ring: 0 0 0 4px rgba(91,76,245,.20);
  --glow: 0 14px 36px -12px rgba(91,76,245,.55);

  --grad: linear-gradient(120deg, #5b4cf5 0%, #a445e8 45%, #f2694a 100%);
  --grad-cool: linear-gradient(120deg, #0b8fd6 0%, #5b4cf5 55%, #a445e8 100%);
  --grad-soft: linear-gradient(120deg, rgba(91,76,245,.12), rgba(164,69,232,.10) 50%, rgba(242,105,74,.09));
  --mesh:
    radial-gradient(800px 420px at 4% -8%,  rgba(91,76,245,.16), transparent 60%),
    radial-gradient(700px 380px at 96% 0%,  rgba(242,105,74,.11), transparent 58%),
    radial-gradient(640px 360px at 60% 110%, rgba(15,165,150,.10), transparent 62%);
  --spring: cubic-bezier(.34,1.56,.64,1);
}

[data-theme="dark"] {
  --bg:        #0a0d1c;
  --surface:   #121630;
  --surface-2: #181d3d;
  --surface-3: #1e2449;
  --line:      #262c57;
  --line-2:    #353d72;
  --brand:     #8b80ff;
  --brand-soft:#221d5c;
  --brand-ink: #d2ccff;
  --coral: #ff8a6b; --coral-soft: #3a1a12;
  --pink:  #f47cbd;
  --ring: 0 0 0 4px rgba(139,128,255,.30);
  --glow: 0 14px 40px -12px rgba(139,128,255,.55);
  --grad: linear-gradient(120deg, #7064ff 0%, #b45cf0 45%, #ff7d5e 100%);
  --grad-soft: linear-gradient(120deg, rgba(112,100,255,.22), rgba(180,92,240,.16) 50%, rgba(255,125,94,.12));
  --mesh:
    radial-gradient(820px 440px at 4% -10%, rgba(112,100,255,.24), transparent 60%),
    radial-gradient(720px 400px at 96% 0%,  rgba(255,125,94,.12), transparent 58%),
    radial-gradient(660px 380px at 60% 112%, rgba(15,165,150,.14), transparent 62%);
}

body { font-family: var(--font); letter-spacing: -.005em; }
h1, h2, .h-lg, .h-xl { letter-spacing: -.025em; }
::selection { background: color-mix(in srgb, var(--brand) 26%, transparent); }

/* ---------------------------------------------------------- scroll progress */
.fx-progress {
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 300;
  background: var(--grad); transform-origin: 0 50%; transform: scaleX(0);
  pointer-events: none;
}

/* ---------------------------------------------------------- scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 10px;
  border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: var(--ink-4); }

/* ---------------------------------------------------------- the shell */
.app::before { background: var(--mesh); }
.app::after {          /* slow-drifting aurora, very faint */
  content: ''; position: fixed; inset: -20%; z-index: -1; pointer-events: none;
  background: conic-gradient(from 0deg at 70% 30%,
    rgba(91,76,245,.06), rgba(242,105,74,.05), rgba(15,165,150,.05), rgba(91,76,245,.06));
  filter: blur(60px); animation: aurora 38s linear infinite;
}
@keyframes aurora { to { transform: rotate(360deg); } }

.sidebar { border-right-color: color-mix(in srgb, var(--line) 70%, transparent); }
.brand-mark {
  background: var(--grad); background-size: 200% 200%;
  animation: gradshift 8s ease-in-out infinite;
  border-radius: 12px;
}
@keyframes gradshift { 50% { background-position: 100% 50%; } }

.nav-link { transition: background .18s, color .18s, transform .18s var(--ease); }
.nav-link:hover { transform: translateX(3px); }
.nav-link.is-on { color: var(--brand-ink); }
.nav-link.is-on svg { color: var(--brand); }
.nav-link.is-on::before { background: var(--grad); width: 4px; }
.nav-badge { background: var(--grad); box-shadow: 0 4px 10px -3px rgba(242,105,74,.6); }

/* colour each nav group's icons so the sidebar reads at a glance */
.nav-group:nth-child(1) .nav-link svg { color: #5b4cf5; }
.nav-group:nth-child(2) .nav-link svg { color: #0fa596; }
.nav-group:nth-child(3) .nav-link svg { color: #e0459b; }
.nav-group:nth-child(4) .nav-link svg { color: #f2694a; }
.nav-group:nth-child(5) .nav-link svg { color: #0b8fd6; }

.topbar { border-bottom-color: color-mix(in srgb, var(--line) 60%, transparent); }

/* page entrance */
.page { animation: pagein .45s var(--ease) both; }
@keyframes pagein { from { opacity: 0; transform: translateY(10px); } }

/* ---------------------------------------------------------- cards */
.card {
  border-color: color-mix(in srgb, var(--line) 85%, transparent);
  box-shadow: var(--sh-1);
  position: relative;
}
.card:hover { border-color: var(--line-2); }
.card-hover:hover, .room-card:hover, .task-card:hover, .board-card:hover {
  transform: translateY(-4px); box-shadow: var(--sh-3);
}
/* cursor spotlight — set by fx.js through --mx/--my */
.fx-spot { isolation: isolate; }
.fx-spot::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%),
    color-mix(in srgb, var(--brand) 10%, transparent), transparent 60%);
}
.fx-spot:hover::after { opacity: 1; }

.panel-hero, .tile-hero {
  background: var(--grad); background-size: 180% 180%;
  animation: gradshift 12s ease-in-out infinite;
}

/* tiles get a coloured accent per position when none is set */
.tiles > .tile:nth-child(5n+1) { --accent: #5b4cf5; }
.tiles > .tile:nth-child(5n+2) { --accent: #0fa596; }
.tiles > .tile:nth-child(5n+3) { --accent: #f2694a; }
.tiles > .tile:nth-child(5n+4) { --accent: #e0459b; }
.tiles > .tile:nth-child(5n+5) { --accent: #0b8fd6; }
.tile-icon { opacity: .28; transition: transform .35s var(--spring), opacity .2s; }
.tile:hover .tile-icon { transform: scale(1.18) rotate(-6deg); opacity: .5; }

/* ---------------------------------------------------------- buttons */
.btn { font-weight: 650; position: relative; overflow: hidden; text-decoration: none; }
.btn-primary { background: var(--grad); background-size: 160% 160%;
  transition: background-position .5s var(--ease), transform .14s, box-shadow .2s; }
.btn-primary:hover { background-position: 100% 50%; }
.btn-soft { background: var(--grad-soft); color: var(--brand-ink); }
.btn-ghost:hover { border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); color: var(--brand-ink); }
.fx-ripple {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: rgba(255,255,255,.45); transform: scale(0);
  animation: ripple .6s var(--ease) forwards;
}
.btn-ghost .fx-ripple, .btn-plain .fx-ripple, .btn-icon .fx-ripple,
.btn-soft .fx-ripple { background: color-mix(in srgb, var(--brand) 22%, transparent); }
@keyframes ripple { to { transform: scale(2.6); opacity: 0; } }

/* ---------------------------------------------------------- forms */
.input, .select, .textarea {
  border-radius: 12px; background: var(--surface);
  border-color: var(--line);
}
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--brand); box-shadow: var(--ring);
  background: color-mix(in srgb, var(--brand-soft) 25%, var(--surface));
}
.select optgroup { font-weight: 700; color: var(--ink-3); }
.label { letter-spacing: -.005em; }
.seg button[aria-pressed="true"], .seg button.is-on {
  background: var(--surface); color: var(--brand-ink);
  box-shadow: 0 2px 8px -2px rgba(91,76,245,.35);
}

/* ---------------------------------------------------------- chips & avatars */
.chip { border-radius: 999px; font-weight: 600; }
.avatar { box-shadow: 0 0 0 2px var(--surface), 0 4px 10px -4px rgba(30,27,75,.4); }

/* ---------------------------------------------------------- modal & toast */
.modal-scrim { background: rgba(10,12,30,.45); backdrop-filter: blur(8px) saturate(1.2); }
.modal {
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  transform: translateY(22px) scale(.96);
  transition: transform .38s var(--spring);
}
.modal-head { position: relative; }
.modal-head::after {
  content: ''; position: absolute; left: 22px; right: 22px; bottom: 0; height: 2px;
  background: var(--grad); opacity: .5; border-radius: 2px;
}
.modal-body { padding-top: 16px; }
.toast {
  border-radius: 14px; border-left-width: 4px;
  backdrop-filter: blur(12px);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  animation: toastin .42s var(--spring);
}

/* ---------------------------------------------------------- tables */
.tbl tbody tr { transition: background .15s; }
.tbl tbody tr:hover { background: color-mix(in srgb, var(--brand-soft) 45%, transparent); }

/* ---------------------------------------------------------- reveal on scroll */
.fx-reveal { opacity: 0; transform: translateY(16px);
  transition: opacity .6s var(--ease), transform .6s var(--ease); }
.fx-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .fx-reveal { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------- fixes
   The kanban (.board on the Tasks page) and the dashboard room board
   share a class name, so the room board inherited the kanban's grid
   and its header was squeezed into a column of its own. */
section.board { display: block; gap: 0; }
section.board .board-card:hover { transform: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 30%, transparent); }
a.btn, a.btn:hover { text-decoration: none; }