/* ============================================================================
   taikun-ui.css  ·  Taikun POLISH / COMPONENT layer (over Tabler)
   ----------------------------------------------------------------------------
   The premium "polish" over Tabler's own component classes + a collapsible
   icon-rail sidebar. Brand TOKENS live in taikun-tabler.css (the SINGLE token
   source) — load that BEFORE this file. No :root here on purpose, so nothing
   fights over canvas/border/radius. Pair with taikun-ui.js for the sidebar
   toggle + Bootstrap data-attr wiring.
   ============================================================================ */

/* ── §1 · brand tokens REMOVED 2026-06-17 ───────────────────────────────────
   The :root that used to live here is gone — tokens are declared once in
   taikun-tabler.css (loaded first). Deleting this duplicate :root is what fixed
   the load-order bug (whichever sheet loaded last silently won). Polish only
   below; it consumes the --tblr-* / --tk-* tokens from taikun-tabler.css. */

/* ── §2 · POLISH — premium feel over Tabler component classes ───────────────*/
body{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; letter-spacing:-.005em; }

/* white canvas, light vertical navbar with a hairline seam */
.page-wrapper{ background:var(--tblr-body-bg); }
.navbar-vertical{ background:var(--tblr-bg-surface); border-right:1px solid var(--tblr-border-color); box-shadow:none; }
.navbar-vertical .nav-link{ border-radius:.55rem; }

/* cards — white, hairline border + soft layered shadow, generous radius, hover lift */
.card{
  background:var(--tblr-bg-surface); border:1px solid var(--tblr-border-color);
  border-radius:.9rem;
  box-shadow:0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.08);
  transition:box-shadow .16s ease, transform .16s ease;
}
.card-sm{ border-radius:.8rem; }
/* only clickable task cards/rows lift */
a[data-bs-toggle="modal"] .card,
tr[data-bs-toggle="modal"]{ transition:box-shadow .16s ease, transform .16s ease; }
a[data-bs-toggle="modal"]:hover .card{
  box-shadow:0 4px 12px rgba(16,24,40,.10), 0 12px 28px rgba(16,24,40,.10);
  transform:translateY(-1px);
}
/* card header — crisp, slightly heavier so the top of each card reads defined (not washed out) */
.card-header{ border-bottom:1px solid var(--tblr-border-color); padding-top:.9rem; padding-bottom:.9rem; }
.card-title{ color:var(--tblr-body-color); font-weight:600; letter-spacing:-.01em; }
.card-footer{ border-top:1px solid var(--tblr-border-color); background:transparent; }

/* OFFICIAL grouped-list section header — the calm grey band ("Kickoff · 22 tasks").
   Use:  <div class="card-body bg-light py-2 border-top border-bottom">
            <div class="row align-items-center">
              <div class="col"><span class="subheader text-body">Group name</span></div>
              <div class="col-auto text-secondary small">N items</div>
            </div></div>  */
.card > .card-body.bg-light{ background:var(--tblr-bg-surface-secondary, #f6f7f9); }
.card-body.bg-light .subheader{ color:var(--tblr-body-color); font-weight:600; }

/* refined sticky page-header — white, hairline base, faint shadow on scroll */
.page-header{
  position:sticky; top:0; z-index:20;
  background:color-mix(in srgb, var(--tblr-bg-surface) 92%, transparent); backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--tblr-border-color);
  box-shadow:0 1px 0 rgba(16,24,40,.02), 0 6px 18px -14px rgba(16,24,40,.35);
  margin-bottom:0; padding-top:1rem; padding-bottom:1rem;
}
.page-title{ letter-spacing:-.02em; }

/* nav-tabs — calm, animated thick brand underline on active */
.nav-tabs{ border-bottom:1px solid var(--tblr-border-color); gap:.1rem; }
.nav-tabs .nav-link{
  color:var(--tblr-secondary); font-weight:500; border:0; padding:.6rem .85rem;
  position:relative; transition:color .12s ease;
}
.nav-tabs .nav-link::after{
  content:""; position:absolute; left:.6rem; right:.6rem; bottom:-1px; height:2.5px;
  border-radius:3px; background:var(--tblr-primary);
  transform:scaleX(0); transform-origin:center; transition:transform .2s ease;
}
.nav-tabs .nav-link:hover{ color:var(--tblr-body-color); }
.nav-tabs .nav-link.active{ color:var(--tblr-primary); font-weight:600; background:transparent; border:0; }
.nav-tabs .nav-link.active::after{ transform:scaleX(1); }

/* buttons — pill-ish, brand shadow on primary */
.btn{ border-radius:.6rem; font-weight:600; }
.btn-primary{ box-shadow:0 1px 2px rgba(var(--tblr-primary-rgb),.35); }
.btn-primary:hover{ box-shadow:0 2px 8px rgba(var(--tblr-primary-rgb),.30); }
.btn-sm{ border-radius:.5rem; }

/* avatars — crisp thin ring; stacked avatars never collide */
.avatar{ box-shadow:0 0 0 1.5px #fff, 0 0 0 2.5px var(--tblr-border-color); font-weight:600; }
.avatar-list-stacked{ --tblr-list-avatar-offset:.55rem; }
.avatar-list-stacked .avatar{ box-shadow:0 0 0 2px #fff; margin-inline-start:calc(-1 * var(--tblr-list-avatar-offset)); }
.avatar-list-stacked .avatar:first-child{ margin-inline-start:0; }

/* datagrid + list rows — quiet separation */
.datagrid{ --tblr-datagrid-padding:1rem; }
.datagrid-title{ font-size:.7rem; letter-spacing:.04em; text-transform:uppercase; color:var(--tblr-secondary); }
.list-group-item{ border-color:var(--tblr-border-color); }

/* modal — bigger radius, calm header, soft deep shadow */
.modal-content{
  border:0; border-radius:1rem; overflow:hidden;
  box-shadow:0 24px 60px -12px rgba(16,24,40,.30), 0 8px 24px -8px rgba(16,24,40,.18);
}
.modal-header{ border-bottom:1px solid var(--tblr-border-color); padding:1.1rem 1.25rem; }
.modal-title{ letter-spacing:-.01em; }

.subheader{ letter-spacing:.05em; }
.table tbody tr{ transition:background .1s ease; }

/* tidy scrollbars */
::-webkit-scrollbar{ height:11px; width:11px; }
::-webkit-scrollbar-thumb{ background:#dfe2e7; border-radius:20px; border:3px solid #fff; }
::-webkit-scrollbar-thumb:hover{ background:#cdd2da; }
::-webkit-scrollbar-track{ background:transparent; }

/* ── §3 · COLLAPSIBLE SIDEBAR — icon rail on desktop ────────────────────────
   Toggle by adding/removing `tk-sidebar-collapsed` on <body> (taikun-ui.js does
   this on click of any [data-tk-sidebar-toggle], and persists it). For a
   collapsed-by-default page, put class="tk-sidebar-collapsed" on <body>. */
.navbar-vertical{ transition:width .18s ease; }
.page-wrapper{ transition:margin-inline-start .18s ease; }

@media (min-width: 992px){
  body.tk-sidebar-collapsed .navbar-vertical{ width:4.25rem !important; }
  /* Tabler's responsive .page-wrapper margin lives in its (cross-origin) sheet and
     out-specifies us, so force both the logical + physical property. */
  body.tk-sidebar-collapsed .page-wrapper{ margin-inline-start:4.25rem !important; margin-left:4.25rem !important; }

  /* hide everything but the icons */
  body.tk-sidebar-collapsed .navbar-vertical .nav-link-title,
  body.tk-sidebar-collapsed .navbar-vertical .subheader,
  body.tk-sidebar-collapsed .navbar-vertical .badge,
  body.tk-sidebar-collapsed .navbar-vertical .nav-link-icon.ms-auto,
  body.tk-sidebar-collapsed .navbar-vertical .navbar-brand a > span:not(.avatar){ display:none !important; }

  /* center the icons + brand mark in the rail */
  body.tk-sidebar-collapsed .navbar-vertical .nav-link{ justify-content:center; padding-left:.5rem; padding-right:.5rem; }
  body.tk-sidebar-collapsed .navbar-vertical .navbar-brand a{ justify-content:center !important; }
  body.tk-sidebar-collapsed .navbar-vertical .navbar-brand .avatar{ margin-right:0 !important; }
  body.tk-sidebar-collapsed .navbar-vertical .nav-link-icon{ margin-right:0 !important; }
}

/* the toggle control itself */
[data-tk-sidebar-toggle]{ cursor:pointer; }

/* ── §4 · a11y + interaction fixes (PR-2.1 / 2.3) ───────────────────────────*/
/* reduced-motion: neutralize all custom motion when the OS asks (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce){
  *, .card, a[data-bs-toggle="modal"]:hover .card,
  .typing-indicator span, .recording, .recording i, .animate-spin, .ask-taikun-status{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .card.is-clickable:hover, tr.is-clickable:hover{ transform:none !important; }
}
/* clickable rows/cards get REAL hover feedback — the old `a[data-bs-toggle=modal] .card`
   selector matched zero live pages; the real shape is modal-triggering rows. */
.card.is-clickable, tr.is-clickable{ cursor:pointer; transition:background .12s ease, box-shadow .16s ease; }
.card.is-clickable:hover{ box-shadow:0 4px 12px rgba(16,24,40,.10), 0 12px 28px rgba(16,24,40,.10); }
tr[data-bs-toggle="modal"]:hover > *, tr.is-clickable:hover > *{ background-color:var(--tblr-bg-surface-secondary, #f6f7f9); }
/* table-hover rows actually respond (the orphan transition now has a target) */
.table-hover > tbody > tr:hover > *{ background-color:var(--tblr-bg-surface-secondary, #f6f7f9); }
/* avatar separator ring — perceptible (was ~1.05:1, invisible) */
.avatar{ box-shadow:0 0 0 1.5px #fff, 0 0 0 2.5px rgba(15,23,42,.14); }
/* keyboard focus — explicit ring not reliant on the same-hue brand shadow (WCAG 2.4.7) */
.btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible,
.nav-link:focus-visible, a:focus-visible{ outline:2px solid var(--tblr-body-color); outline-offset:2px; }
.btn:active{ transform:translateY(.5px); }

/* ── §5 · dark mode — the polish layer follows the theme (PR-3.0) ────────────
   Surfaces above use var(--tblr-bg-surface), which Tabler flips per theme, so
   light mode is unchanged. These overrides fix the few edges that don't
   auto-flip (borders/rings go light-on-dark). Driven by the Settings toggle. */
[data-bs-theme="dark"] .card{ border-color:rgba(255,255,255,.10); }
[data-bs-theme="dark"] .card-header,
[data-bs-theme="dark"] .card-footer,
[data-bs-theme="dark"] .nav-tabs,
[data-bs-theme="dark"] .list-group-item{ border-color:rgba(255,255,255,.10); }
[data-bs-theme="dark"] .avatar{ box-shadow:0 0 0 1.5px var(--tblr-bg-surface), 0 0 0 2.5px rgba(255,255,255,.18); }
[data-bs-theme="dark"] ::-webkit-scrollbar-thumb{ background:#3a3f4b; border-color:var(--tblr-bg-surface); }
[data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover{ background:#4a505e; }

/* ── §6 · control-room density mode (PR-5.3) ────────────────────────────────
   Opt-in via `body.tk-density-control` (Settings panel toggle, or a per-deploy
   default). Flatter, tighter, low-motion for 24/7 monitoring; tabular numerals.
   Off by default → zero change to the standard look. */
body.tk-density-control .card{ border-radius:.35rem; box-shadow:none; }
body.tk-density-control .card-body{ padding:.75rem .85rem; }
body.tk-density-control .card-header{ padding-top:.6rem; padding-bottom:.6rem; }
body.tk-density-control .btn, body.tk-density-control .btn-sm{ border-radius:.3rem; }
body.tk-density-control .page-header{ backdrop-filter:none; padding-top:.55rem; padding-bottom:.55rem; }
body.tk-density-control .table > :not(caption) > * > *{ padding-top:.35rem; padding-bottom:.35rem; }
body.tk-density-control .h1, body.tk-density-control .datagrid-content{ font-variant-numeric:tabular-nums; }
body.tk-density-control .card.is-clickable:hover, body.tk-density-control tr.is-clickable:hover{ transform:none; }
body.tk-density-control .modal-content{ border-radius:.4rem; }

/* ── §7 · self-hosted Inter (PR-4.2) ────────────────────────────────────────
   The token stack declares 'Inter Var' but the font was never served (silent
   fallback to system fonts). Vendor it so the brand type is real + offline-safe
   for control rooms. Variable weight 100-900, swap to avoid blocking render. */
@font-face{
  font-family:'Inter Var';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('/vendor/inter/InterVariable.woff2') format('woff2');
}

/* ── §8 · tabular numerals (PR-4.2 signature) — KPI numbers & IDs line up ────
   A small ownable detail: metrics, datagrid values, and monospace IDs use
   fixed-width digits so columns of numbers align and don't jitter as they update. */
.card .h1, .card .h2, .card .display-6, .datagrid-content, .font-monospace, code{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

/* ── §9 · focus chrome — wordmark + Settings stay; product menu hides ────────
   Pages opt in with data-tk-nav="focus" (emissions workspace). Deployments
   can also set TAIKUN_NAV_MODE=focus so navbar.js applies the same mode. */
body[data-tk-nav="focus"] #navbar-container{
  position:sticky; top:0; z-index:1030;
  background:var(--tblr-bg-surface);
}
body[data-tk-nav="focus"] #navbar-menu,
body[data-tk-nav="focus"] #navbar-container .navbar-toggler{
  display:none !important;
}
body[data-tk-nav="focus"] .page-header{
  position:relative; top:auto;
}