/* ============================================================================
   taikun-ui.css  ·  Taikun's Tabler-based design system (v0.1)
   ----------------------------------------------------------------------------
   ONE stylesheet that turns stock Tabler into the Taikun look. Load it AFTER
   @tabler/core's CSS and you get: brand tokens, the premium "polish" layer, and
   a collapsible icon-rail sidebar. Everything enhances Tabler's OWN classes —
   no bespoke per-page selectors — so any Tabler page can adopt it as a drop-in.

     <link rel="stylesheet" href=".../@tabler/core/dist/css/tabler.min.css">
     <link rel="stylesheet" href="taikun-ui.css">

   Pair with taikun-ui.js for the sidebar toggle + Bootstrap data-attr wiring.
   Layers below are independent: keep §1 only for the strict token theme, add
   §2 for premium polish, add §3 for the collapsible sidebar.
   ============================================================================ */

/* ── §1 · BRAND TOKENS — overrides Tabler variables only ────────────────────
   This block alone is the portable "taikun-tabler.css" theme (red + white). */
:root{
  --tblr-primary:#c0392b; --tblr-primary-rgb:192,57,43;
  --tblr-body-bg:#ffffff; --tblr-body-color:#101114;
  --tblr-secondary:#6b7280;
  --tblr-border-color:#eceef1; --tblr-border-color-translucent:#eceef1;
  --tblr-border-radius:.65rem; --tblr-border-radius-lg:.85rem;
  --tblr-font-sans-serif:'Inter','Inter Var',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* ── §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:#fff; border-right:1px solid var(--tblr-border-color); box-shadow:none; }
.navbar-vertical .nav-link{ border-radius:.55rem; }

/* cards — white, border-0, soft layered shadow, generous radius, hover lift */
.card{
  background:#fff; border:0;
  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{ border-bottom:1px solid var(--tblr-border-color); }
.card-footer{ border-top:1px solid var(--tblr-border-color); background:transparent; }

/* refined sticky page-header — white, hairline base, faint shadow on scroll */
.page-header{
  position:sticky; top:0; z-index:20;
  background:rgba(255,255,255,.92); 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:1.25rem;
}
.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 · RICH CHAT + MARKDOWN — Ask Taikun bubbles & rendered answers ──────
   Agent replies are rendered to HTML (App.md) and wrapped in .markdown; chat
   turns use .tk-msg / .tk-bubble. Works the same in the plan-wide Ask tab and
   inside the task modal's Activity tab. */
.tk-msg{ display:flex; gap:.5rem; align-items:flex-start; margin-bottom:.75rem; }
.tk-msg-user{ flex-direction:row-reverse; }
.tk-msg .avatar{ flex:0 0 auto; width:1.75rem; height:1.75rem; font-size:.95rem; margin-top:.05rem; }
.tk-bubble{
  max-width:88%; padding:.5rem .8rem; border-radius:var(--tblr-border-radius-lg,.85rem);
  background:#fff; border:1px solid var(--tblr-border-color,#eceef1);
  box-shadow:0 1px 2px rgba(16,17,20,.04); overflow-wrap:anywhere;
}
.tk-msg-bot  .tk-bubble{ border-top-left-radius:.25rem; }
.tk-bubble-user{
  background:var(--tblr-primary,#c0392b); border-color:var(--tblr-primary,#c0392b);
  color:#fff; border-top-right-radius:.25rem;
}
.tk-bubble-error{
  background:rgba(var(--tblr-red-rgb,214,57,57),.08);
  border-color:rgba(var(--tblr-red-rgb,214,57,57),.35); color:var(--tblr-red,#d63939);
}
.tk-sources{ margin-top:.4rem; padding-top:.35rem; border-top:1px dashed var(--tblr-border-color,#eceef1);
  font-size:.75rem; color:var(--tblr-secondary,#6b7280); }

/* compact, readable prose inside bubbles + digest/inbox cards */
.markdown{ font-size:.875rem; line-height:1.55; }
.markdown > :first-child{ margin-top:0; }
.markdown > :last-child{ margin-bottom:0; }
.markdown p{ margin:0 0 .55rem; }
.markdown :where(h1,h2,h3,h4,h5,h6){ margin:.75em 0 .35em; line-height:1.25; font-weight:600; }
.markdown h1{ font-size:1.2rem; } .markdown h2{ font-size:1.08rem; }
.markdown h3{ font-size:1rem; }   .markdown h4,.markdown h5,.markdown h6{ font-size:.9rem; }
.markdown ul,.markdown ol{ margin:.3rem 0 .6rem; padding-left:1.35rem; }
.markdown li{ margin:.15rem 0; }
.markdown li > ul,.markdown li > ol{ margin:.15rem 0; }
.markdown li::marker{ color:var(--tblr-secondary,#6b7280); }
.markdown a{ color:var(--tblr-primary,#c0392b); text-decoration:underline; text-underline-offset:2px; }
.markdown code{
  font-family:var(--tblr-font-monospace,ui-monospace,SFMono-Regular,Menlo,monospace);
  font-size:.84em; padding:.1em .38em; border-radius:.3rem;
  background:rgba(192,57,43,.08); color:#a5281c;
}
.markdown pre.tk-code{
  margin:.5rem 0; padding:.7rem .85rem; border-radius:.5rem; overflow:auto; line-height:1.45;
  background:var(--tblr-bg-surface-secondary,#f6f7f9); border:1px solid var(--tblr-border-color,#eceef1);
  color:var(--tblr-body-color,#101114);
}
.markdown pre.tk-code code{ background:none; color:#a5281c; padding:0; font-size:.82em; }
.tk-bubble-user .markdown pre.tk-code{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.25); }
.tk-bubble-user .markdown pre.tk-code code{ color:#fff; }
.markdown blockquote{
  margin:.5rem 0; padding:.15rem .8rem; color:var(--tblr-secondary,#6b7280);
  border-left:3px solid var(--tblr-primary,#c0392b);
}
.markdown hr{ margin:.7rem 0; border:0; border-top:1px solid var(--tblr-border-color,#eceef1); }
.markdown table.tk-md-table{ margin:.5rem 0; width:100%; font-size:.84em; }
.markdown table.tk-md-table th{ background:var(--tblr-bg-surface-secondary,#f6f7f9); font-weight:600; }

/* on the red user bubble, recolor links + inline code for contrast */
.tk-bubble-user .markdown a{ color:#fff; }
.tk-bubble-user .markdown code{ background:rgba(255,255,255,.18); color:#fff; }
.tk-bubble-user .markdown li::marker{ color:rgba(255,255,255,.7); }