/* ==========================================================================
   brand-theme.css — Thomas McKee Client Portal  ·  v3 "Counsel"
   Load AFTER portal.css. Direction: professional-services / law-firm grade.
   Restraint over effect — editorial serif display, disciplined color,
   authoritative hierarchy. Colors aligned to thomasmckee.com (navy + cyan).
   ========================================================================== */

/* ---------------------------------------------------------------- 1. COLOR */
:root, :root[data-theme="dark"] {
  /* Surface navy — matches the site hero/section background. */
  --brand:      #0e4564;
  --brand-700:  #0e4564;
  --brand-800:  #0a3550;
  --brand-900:  #07273a;

  /* Accessible cyan for links / focus / inputs. */
  --accent:     #0a8fc4;
  --accent-300: #2eb6e6;
  --accent-200: #74cdec;
  --accent-soft-fg: #086089;

  /* Calm the vivid spectrum into a professional family: navy · slate · teal ·
     a single warm gold (echoes the site's award badges). Per-tile variety is
     preserved for wayfinding, but the candy hues are gone. These tokens feed
     the KPI tiles, nav glow, progress bars, and hero glow automatically. */
  --c-blue:    #0e4564;
  --c-cyan:    #2f9fcb;
  --c-violet:  #3a5d7d;
  --c-fuchsia: #5d7e98;
  --c-emerald: #2f7d68;
  --c-teal:    #389a93;
  --c-amber:   #b8862f;
  --c-rose:    #9a5b52;
}

/* ------------------------------------------------------------- 2. TYPE
   Requires the matching <link> in app.blade.php + guest.blade.php:
   https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Spectral:wght@400;500;600;700&display=swap */
:root {
  --font:         "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Spectral", Georgia, "Times New Roman", serif;   /* serif = gravitas */
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* Serif headings — looser tracking than a grotesque wants. */
h1, h2, h3,
.dash-hero h2, .welcome h2, .auth__hero h2, .card__head h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.dash-hero h2, .welcome h2, .auth__hero h2 { letter-spacing: -0.015em; line-height: 1.05; }

/* Eyebrows and stat labels: corporate uppercase sans, not mono ("dev" feel). */
.eyebrow, .ledger .cell .k {
  font-family: var(--font);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.eyebrow { color: var(--muted); }

/* KPI numbers: solid deep navy serif with tabular figures — reads like a
   professional report. Removes the playful gradient-clip from portal.css. */
.ledger .cell .v {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums lining-nums;
  background: none;
  -webkit-background-clip: border-box;
          background-clip: border-box;
  color: var(--ink);
}

/* ------------------------------------------------------------- 3. CTA CYAN */
.btn-primary {
  background: linear-gradient(120deg, #2bd3ff, #08c7fe);
  color: #06283a;
  box-shadow: 0 8px 24px -10px #08c7fe, inset 0 1px 0 rgba(255,255,255,.30);
}
.btn-primary:hover  { filter: brightness(1.04); color: #06283a; }
.btn-primary:active { background: #0e4564; color: #fff; }

/* --------------------------------------------- 4. CALM THE SIDEBAR TILES
   Nav icon colors arrive as an inline --tile hue per item. We can't change
   the inline value from CSS, but we can pull the *consuming* styles toward
   the brand — keeping a trace of each hue for wayfinding, losing the rainbow. */
.icotile {
  background: color-mix(in srgb, var(--tile) 9%, color-mix(in srgb, var(--brand) 7%, transparent));
  color:      color-mix(in srgb, var(--tile) 40%, var(--ink-soft));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tile) 16%, var(--line));
}
.nav a.active .icotile {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  color:      var(--accent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent);
}

/* --------------------------------------------------- 5. LOGIN BALANCE + ART
   Equal halves, and generous inset so the left content sits as a composed
   column instead of hugging the far edge. */
.auth { grid-template-columns: 1fr 1fr; }
.auth__brand {
  padding: clamp(2.8rem, 5vw, 4.5rem) clamp(2.8rem, 6vw, 6rem);
  justify-content: center;
  gap: 2.2rem;
}
.auth__brand .auth__legal { margin-top: auto; }   /* keep copyright pinned low */
.auth__hero { max-width: 32ch; }
.auth__illu {
  display: block; width: 100%; max-width: 340px; height: auto; max-height: 38vh;
  object-fit: contain; margin-top: .5rem;
  filter: drop-shadow(0 26px 44px rgba(0,0,0,.36));
}

/* ----------------------------------------------------- 6. QUIET POLISH */
::selection { background: color-mix(in srgb, var(--accent) 26%, transparent); }

/* Hero: static, composed — no motion in a professional tool. The slate/cyan
   glow is already calmer now that --c-violet is a slate tone. */
.dash-hero::after { animation: none; opacity: .5; }
.dash-hero {
  border-color: color-mix(in srgb, var(--accent) 16%, var(--line));
}

/* KPI tiles: a restrained hover, no leap. */
.ledger .cell { transition: border-color .2s ease, box-shadow .2s ease; }
.ledger .cell:hover {
  border-color: color-mix(in srgb, var(--c1) 30%, var(--line));
  box-shadow: var(--shadow);
}
.ledger .cell:hover::before { filter: drop-shadow(0 0 5px color-mix(in srgb, var(--c2) 60%, transparent)); }

/* Cards: hairline discipline, serif heads already set above. */
.card:hover { border-color: color-mix(in srgb, var(--accent) 18%, var(--line)); }

/* Precision: tabular figures wherever numbers live. */
.ledger .cell .v, .dash-hero, .pct, .rprog .pct,
.duelist__amt, .navbadge, #liveclock { font-variant-numeric: tabular-nums; }

/* Accessible keyboard focus, themed. */
:where(a, button, [role="button"], [tabindex]):focus-visible {
  outline: none; box-shadow: var(--ring); border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .ledger .cell { transition: none; }
}

/* ------------------------------------------------- 7. HERO HEADER IMAGE
   Client welcome banner composed like the public site: copy left, brand
   illustration anchored bottom-right, no buttons. Reuses the login art.
   Add to dashboard.blade.php inside .welcome (see notes), as the last child:
     <img class="hero-illu"
          src="{{ asset('assets/brand/login-illustration.png') }}?v={{ config('portal.asset_version') }}"
          alt="" aria-hidden="true"> */
.welcome {
  position: relative;
  overflow: hidden;
  align-items: stretch;
  min-height: clamp(200px, 22vw, 280px);   /* fixed band → full-width banner */
  padding: 2rem 2.2rem;
}
/* Copy stays left and vertically centered, above the art. */
.welcome > div:first-child {
  flex: 1 1 auto;
  align-self: center;
  max-width: 58%;
  position: relative;
  z-index: 2;
}
/* Role pill to the top-right corner so it doesn't sit in the composition. */
.welcome .welcome__role {
  position: absolute;
  top: 1.2rem;
  right: 1.4rem;
  z-index: 3;
}
/* Illustration pinned bottom-right, sized to the BAND height (not its own
   intrinsic size) so it can never stretch the panel. */
.welcome .hero-illu {
  position: absolute;
  right: 1.5rem;
  bottom: 0;
  height: 100%;
  width: auto;
  max-width: 48%;
  object-fit: contain;
  object-position: bottom right;
  margin: 0;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}
@media (max-width: 760px) {
  .welcome .hero-illu { display: none; }     /* keep the mobile banner clean */
  .welcome { min-height: 0; }
  .welcome > div:first-child { max-width: 100%; }
  .welcome .welcome__role { position: static; }
}

/* ------------------------------------------------- 8. KANBAN — TRELLO-GRADE
   Card richness: colored labels, assignee avatar, WIP-limit cap indicator.
   Pairs with the migration (board_columns.wip_limit, board_cards.assignee/labels)
   and the markup in admin/boards/show.blade.php + boards/show.blade.php. */

/* Colored label chips along the top of a card. */
.kcard__labels { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .45rem; }
.klabel {
  font-size: .66rem; font-weight: 600; letter-spacing: .02em;
  padding: .12rem .5rem; border-radius: 999px; white-space: nowrap;
  color: color-mix(in srgb, var(--lc) 82%, #000);
  background: color-mix(in srgb, var(--lc) 20%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lc) 45%, transparent);
}

/* Card footer: due-date pill on the left, assignee avatar on the right. */
.kcard__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; margin-top: .5rem; min-height: 22px;
}
.kcard__foot:empty { display: none; }
.kcard__foot .kcard__due { margin-top: 0; }
.kavatar {
  margin-left: auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 999px;
  font-size: .64rem; font-weight: 700; letter-spacing: .02em;
  color: #fff; background: var(--brand-600, var(--brand));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
  flex: none;
}

/* WIP-limit cap indicator on the list header. */
.badge-over {
  background: var(--danger-bg);
  color: var(--danger);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 35%, transparent);
}
.kanban__col.is-over { border-top-color: var(--danger); }
.kanban__col.is-over .kanban__colhead { color: var(--danger); }

/* Slightly richer card surface + hover lift, the Trello feel. */
.kanban__cards .kcard { transition: box-shadow .15s ease, transform .15s ease; }
.kanban__cards .kcard:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) {
  .kanban__cards .kcard { transition: none; }
}

/* Label picker inside the add/edit card forms. */
.klabelpick { display: flex; flex-wrap: wrap; gap: .25rem .55rem; margin: .15rem 0; }
.klabelopt {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .74rem; color: var(--ink-soft); cursor: pointer;
}
.klabelopt input { accent-color: var(--lc, var(--accent)); }