/* ============================================================
   Quipu design system — tokens, Bootstrap bridge, shell, motion.
   One file, no build step. Loaded after Bootstrap in base.html.
   ============================================================ */

/* ---------------------------------------------- 1. Fonts */
@font-face {
  font-family: 'InterVar';
  src: url('https://cdn.jsdelivr.net/fontsource/fonts/inter:vf@latest/latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------- 2. Tokens */
:root {
  --brand: #0693e3;
  --hdr: 56px;

  /* surfaces & text */
  --q-bg: #f6f8fb;
  --q-surface: #fff;
  --q-surface-2: #f2f6fb;
  --q-border: #eef1f5;
  --q-text: #344054;
  --q-text-muted: #98a2b3;

  /* geometry */
  --q-radius: .75rem;
  --q-radius-sm: .5rem;

  /* elevation */
  --q-shadow-1: 0 1px 3px rgba(16, 24, 40, .08);
  --q-shadow-2: 0 4px 12px -2px rgba(16, 24, 40, .10);
  --q-shadow-3: 0 12px 32px -4px rgba(16, 24, 40, .16);

  /* motion */
  --q-dur-1: 120ms;
  --q-dur-2: 200ms;
  --q-dur-3: 320ms;
  --q-ease: cubic-bezier(.16, 1, .3, 1);

  /* AI accent (Aimatric 01) */
  --q-ai: #7c3aed;
  --q-ai-soft: color-mix(in srgb, var(--q-ai) 12%, transparent);
  --q-ai-grad: linear-gradient(135deg, var(--q-ai), var(--brand));

  --q-font: 'InterVar', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
body[data-theme="indigo"]  { --brand: #4f46e5; }
body[data-theme="emerald"] { --brand: #059669; }
body[data-theme="rose"]    { --brand: #e11d48; }
body[data-theme="slate"]   { --brand: #475569; }
body[data-theme="amber"]   { --brand: #d97706; }
body[data-theme="cyan"]    { --brand: #0891b2; }
body[data-theme="violet"]  { --brand: #7c3aed; }

/* Derived brand tokens live on body — custom properties resolve var() where
   they are DECLARED, so putting these on :root would lock them to the default
   blue and ignore the body[data-theme] overrides above. */
body {
  --brand-600: color-mix(in srgb, var(--brand) 85%, #000);
  --brand-100: color-mix(in srgb, var(--brand) 14%, transparent);
  --brand-50:  color-mix(in srgb, var(--brand) 7%,  var(--q-surface));
  --q-ai-grad: linear-gradient(135deg, var(--q-ai), var(--brand));
}

[data-bs-theme="dark"] {
  --q-bg: #11151c;
  --q-surface: #1b212b;
  --q-surface-2: #232a33;
  --q-border: #232a33;
  --q-text: #c7cdd6;
  --q-text-muted: #7d8590;
  --q-shadow-1: 0 1px 3px rgba(0, 0, 0, .4);
  --q-shadow-2: 0 4px 12px -2px rgba(0, 0, 0, .5);
  --q-shadow-3: 0 12px 32px -4px rgba(0, 0, 0, .6);
  --q-ai: #a78bfa;
  --q-ai-soft: color-mix(in srgb, var(--q-ai) 20%, transparent);
}

/* reduced motion: zero every duration, kill every animation */
@media (prefers-reduced-motion: reduce) {
  :root { --q-dur-1: 0ms; --q-dur-2: 0ms; --q-dur-3: 0ms; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ---------------------------------------------- 3. Bootstrap bridge */
body { background: var(--q-bg); font-family: var(--q-font); color: var(--q-text); }
[data-bs-theme="dark"] body { background: var(--q-bg); }

.text-brand { color: var(--brand) !important; }
.bg-brand { background: var(--brand) !important; }
.btn-brand { background: var(--brand); border-color: var(--brand); color: #fff;
  transition: filter var(--q-dur-1), transform var(--q-dur-1); }
.btn-brand:hover { filter: brightness(.92); color: #fff; }
.btn { transition: filter var(--q-dur-1), background var(--q-dur-1), transform var(--q-dur-1); }
.btn:active { transform: scale(.97); }

.card { border: none; box-shadow: var(--q-shadow-1); border-radius: var(--q-radius);
  background: var(--q-surface); transition: box-shadow var(--q-dur-2) var(--q-ease); }
[data-bs-theme="dark"] .card { background: var(--q-surface); box-shadow: var(--q-shadow-1); }
.auth-wrap { max-width: 440px; margin: 4rem auto; }

/* ledger-grade numerals: money columns align like a printed ledger */
.table .text-end, tfoot, .stat-value, .num {
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.table > :not(caption) > * > * { border-color: var(--q-border); }
.table tbody tr { transition: background var(--q-dur-1); }
[data-bs-theme="dark"] .table-light {
  --bs-table-bg: var(--q-surface-2); --bs-table-color: #e6e9ee;
  --bs-table-border-color: var(--q-border);
}
[data-bs-theme="dark"] .table { --bs-table-bg: transparent; --bs-table-color: var(--q-text); }
[data-bs-theme="dark"] .bg-light { background: var(--q-surface) !important; }
[data-bs-theme="dark"] .badge.bg-light { background: var(--q-surface-2) !important; color: var(--q-text) !important; }

.form-control, .form-select { transition: border-color var(--q-dur-1), box-shadow var(--q-dur-1); }
.form-control:focus, .form-select:focus {
  border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-100);
}
.nav-pills .nav-link { transition: background var(--q-dur-1), color var(--q-dur-1); border-radius: var(--q-radius-sm); }
.nav-pills .nav-link:not(.active):hover { background: var(--q-surface-2); }
.nav-pills .nav-link.active { background: var(--brand); }
.dropdown-menu { border: 1px solid var(--q-border); box-shadow: var(--q-shadow-2);
  border-radius: var(--q-radius-sm); animation: q-pop var(--q-dur-1) var(--q-ease); }

/* ---------------------------------------------- 4. App header */
.q-header { position: sticky; top: 0; z-index: 1030; height: var(--hdr);
  background: var(--brand); color: #fff; display: flex; align-items: center; padding: 0 .9rem;
  box-shadow: 0 1px 4px rgba(16, 24, 40, .15); }
.q-header a { color: #fff; }
.q-brand { font-weight: 700; letter-spacing: .3px; text-decoration: none; white-space: nowrap; }
.q-ask { max-width: 26rem; flex: 1 1 auto; }
.q-ask .form-control { border: none; transition: box-shadow var(--q-dur-1); }
.q-ask .form-control:focus { box-shadow: 0 0 0 3px var(--q-ai-soft); }
.q-chip { background: rgba(255, 255, 255, .15); border-radius: 2rem; padding: .15rem .7rem; font-size: .8rem; }
.q-kbd { font-size: .68rem; background: rgba(255,255,255,.22); border-radius: .3rem;
  padding: .05rem .35rem; font-family: var(--q-font); }

/* ---------------------------------------------- 5. Shell + sidebar */
.q-shell { display: flex; align-items: flex-start; }
.q-main { flex: 1 1 auto; min-width: 0; padding: 1.25rem; }
.q-main > :first-child { animation: q-fade-rise var(--q-dur-3) var(--q-ease) both; }
.q-sidebar { background: var(--q-surface); }
[data-bs-theme="dark"] .q-sidebar { background: #161b22; border-right-color: var(--q-border); }
.q-nav { display: flex; flex-direction: column; padding: .5rem; }
.q-nav-group { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--q-text-muted); padding: .8rem .75rem .25rem; }
.q-nav-link { display: flex; align-items: center; gap: .6rem; padding: .45rem .75rem;
  border-radius: var(--q-radius-sm); color: var(--q-text); text-decoration: none; font-size: .9rem;
  position: relative; transition: background var(--q-dur-1), color var(--q-dur-1); }
[data-bs-theme="dark"] .q-nav-link { color: #c7cdd6; }
.q-nav-link:hover { background: var(--q-surface-2); color: var(--brand); }
[data-bs-theme="dark"] .q-nav-link:hover { background: var(--q-surface-2); }
.q-nav-link.active { background: var(--brand); color: #fff; }
.q-nav-link i { width: 1.1rem; text-align: center; }
@media (min-width: 768px) {
  .q-sidebar { flex: 0 0 240px; width: 240px; position: sticky; top: var(--hdr);
    height: calc(100vh - var(--hdr)); overflow-y: auto; border-right: 1px solid var(--q-border); }
}

/* ---------------------------------------------- 6. Help panel (slide-over) */
.q-help-fab { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1045;
  width: 3rem; height: 3rem; border-radius: 50%; border: none; color: #fff;
  background: var(--brand); box-shadow: 0 4px 14px rgba(16, 24, 40, .25); font-size: 1.25rem;
  transition: transform var(--q-dur-1), filter var(--q-dur-1); }
.q-help-fab:hover { filter: brightness(.92); transform: translateY(-2px); }
.q-help-overlay { position: fixed; inset: 0; background: rgba(16, 24, 40, .35); z-index: 1050;
  opacity: 0; pointer-events: none; transition: opacity var(--q-dur-2); }
.q-help-overlay.open { opacity: 1; pointer-events: auto; }
.q-help-panel { position: fixed; top: 0; right: 0; height: 100%; width: 400px; max-width: 92vw;
  background: var(--q-surface); z-index: 1051; box-shadow: var(--q-shadow-3);
  transform: translateX(100%); transition: transform var(--q-dur-3) var(--q-ease);
  display: flex; flex-direction: column; }
.q-help-panel.open { transform: translateX(0); }
.q-help-panel-header { display: flex; align-items: center; gap: .6rem; padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--q-border); }
.q-help-panel-icon { width: 2.2rem; height: 2.2rem; border-radius: .55rem; flex: none;
  display: grid; place-items: center; background: var(--brand); color: #fff; }
.q-help-panel-title { margin: 0; font-size: 1.05rem; font-weight: 700; }
.q-help-close { margin-left: auto; border: none; background: transparent; font-size: 1.25rem; color: var(--q-text-muted); }
.q-help-panel-body { padding: 1rem 1.25rem; overflow-y: auto; }
.q-help-section { margin-bottom: 1.1rem; }
.q-help-section h6 { text-transform: uppercase; letter-spacing: .04em; font-size: .72rem;
  color: var(--q-text-muted); margin-bottom: .4rem; }
.q-help-steps { padding-left: 1.1rem; margin: 0; } .q-help-steps li { margin-bottom: .35rem; }
.q-help-tips { list-style: none; padding: 0; margin: 0; }
.q-help-tips li { position: relative; padding-left: 1.4rem; margin-bottom: .4rem; }
.q-help-tips li::before { content: "\F4A6"; font-family: "bootstrap-icons"; position: absolute;
  left: 0; color: var(--brand); }

/* ---------------------------------------------- 7. AI panel (Aimatric 01) */
.q-ai-panel { position: fixed; top: 0; right: 0; height: 100%; width: 460px; max-width: 96vw;
  background: var(--q-surface); z-index: 1053; box-shadow: var(--q-shadow-3);
  transform: translateX(100%); transition: transform var(--q-dur-3) var(--q-ease);
  display: flex; flex-direction: column; }
.q-ai-panel.open { transform: translateX(0); }
.q-ai-overlay { position: fixed; inset: 0; background: rgba(16, 24, 40, .35); z-index: 1052;
  opacity: 0; pointer-events: none; transition: opacity var(--q-dur-2); }
.q-ai-overlay.open { opacity: 1; pointer-events: auto; }
.q-ai-head { display: flex; align-items: center; gap: .6rem; padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--q-border); }
.q-ai-logo { width: 2.2rem; height: 2.2rem; border-radius: .55rem; flex: none;
  display: grid; place-items: center; background: var(--q-ai-grad); color: #fff; }
.q-ai-body { padding: 1rem 1.25rem; overflow-y: auto; flex: 1 1 auto; }
.q-ai-foot { border-top: 1px solid var(--q-border); padding: .9rem 1.25rem; }
.q-ai-foot textarea { resize: none; }
.q-ai-foot .form-control:focus { border-color: var(--q-ai); box-shadow: 0 0 0 3px var(--q-ai-soft); }

.q-ai-fab { position: fixed; right: 1.25rem; bottom: 5rem; z-index: 1045;
  width: 3rem; height: 3rem; border-radius: 50%; border: none; color: #fff;
  background: var(--q-ai-grad); box-shadow: 0 4px 14px rgba(16, 24, 40, .3); font-size: 1.2rem;
  transition: transform var(--q-dur-1); }
.q-ai-fab:hover { transform: translateY(-2px); }

.q-ai-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .75rem;
  border-radius: 2rem; border: 1px solid var(--q-ai-soft); background: transparent;
  color: var(--q-ai); font-size: .8rem; cursor: pointer; text-decoration: none;
  transition: background var(--q-dur-1), transform var(--q-dur-1), box-shadow var(--q-dur-1);
  animation: q-pop var(--q-dur-2) var(--q-ease) both; }
.q-ai-chip:hover { background: var(--q-ai-soft); color: var(--q-ai); transform: translateY(-1px); }
.q-ai-chips .q-ai-chip:nth-child(2) { animation-delay: 40ms; }
.q-ai-chips .q-ai-chip:nth-child(3) { animation-delay: 80ms; }
.q-ai-chips .q-ai-chip:nth-child(4) { animation-delay: 120ms; }
.q-ai-chips .q-ai-chip:nth-child(5) { animation-delay: 160ms; }
.q-ai-chips .q-ai-chip:nth-child(6) { animation-delay: 200ms; }

.q-answer { animation: q-fade-rise var(--q-dur-2) var(--q-ease) both; }
.q-answer-bubble { background: var(--q-surface-2); border-radius: var(--q-radius);
  border-left: 3px solid var(--q-ai); padding: .8rem 1rem; }
.q-src-badge { display: inline-flex; align-items: center; gap: .3rem; font-size: .68rem;
  padding: .12rem .55rem; border-radius: 2rem; background: var(--q-ai-soft); color: var(--q-ai);
  animation: q-pop var(--q-dur-2) var(--q-ease) 80ms both; }

/* thinking dots */
.q-thinking { display: none; align-items: center; gap: .5rem; color: var(--q-text-muted); font-size: .85rem; }
.htmx-request .q-thinking, .q-thinking.htmx-request { display: inline-flex; }
.q-thinking .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--q-ai);
  animation: q-dot 900ms ease-in-out infinite; }
.q-thinking .dot:nth-child(2) { animation-delay: 150ms; }
.q-thinking .dot:nth-child(3) { animation-delay: 300ms; }
@keyframes q-dot { 0%, 60%, 100% { transform: scale(.7); opacity: .4; } 30% { transform: scale(1.15); opacity: 1; } }

/* mic recording pulse */
.q-mic.recording { color: #fff !important; background: var(--q-ai) !important;
  animation: q-pulse 1s ease-in-out infinite; }
@keyframes q-pulse { 0%,100% { box-shadow: 0 0 0 0 var(--q-ai-soft); } 50% { box-shadow: 0 0 0 8px transparent; } }

/* ---------------------------------------------- 8. Components */
/* stat cards (dashboard KPIs) */
.stat-card { display: block; text-decoration: none; color: inherit; height: 100%; }
.stat-card .card { height: 100%; }
a.stat-card:hover .card { box-shadow: var(--q-shadow-2); transform: translateY(-2px); }
a.stat-card .card { transition: box-shadow var(--q-dur-2) var(--q-ease), transform var(--q-dur-2) var(--q-ease); }
.stat-label { color: var(--q-text-muted); font-size: .8rem; }
.stat-value { font-size: 1.25rem; font-weight: 700; }

/* empty states */
.empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--q-text-muted); }
.empty-state i { font-size: 2rem; display: block; margin-bottom: .5rem; color: var(--q-text-muted); opacity: .6; }

/* skeleton shimmer */
.skel { position: relative; overflow: hidden; background: var(--q-surface-2);
  border-radius: var(--q-radius-sm); min-height: 1rem; }
.skel::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--q-surface) 60%, transparent), transparent);
  animation: q-shimmer 1.4s linear infinite; }
@keyframes q-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* toasts */
.q-toast-stack { position: fixed; top: calc(var(--hdr) + .75rem); right: 1rem; z-index: 1080;
  display: flex; flex-direction: column; gap: .5rem; max-width: 24rem; }
.q-toast { display: flex; align-items: flex-start; gap: .6rem; padding: .7rem .9rem;
  border-radius: var(--q-radius-sm); background: var(--q-surface); box-shadow: var(--q-shadow-2);
  border-left: 3px solid var(--brand); font-size: .9rem;
  animation: q-toast-in var(--q-dur-2) var(--q-ease) both; }
.q-toast.hide { animation: q-toast-out var(--q-dur-2) var(--q-ease) both; }
.q-toast.success { border-left-color: #059669; } .q-toast.success i { color: #059669; }
.q-toast.error, .q-toast.danger { border-left-color: #e11d48; } .q-toast.error i, .q-toast.danger i { color: #e11d48; }
.q-toast.warning { border-left-color: #d97706; } .q-toast.warning i { color: #d97706; }
.q-toast.info { border-left-color: var(--brand); } .q-toast.info i { color: var(--brand); }
.q-toast .btn-close { margin-left: auto; font-size: .6rem; }
@keyframes q-toast-in { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
@keyframes q-toast-out { from { opacity: 1; } to { opacity: 0; transform: translateX(12px); } }

/* command palette */
.q-cmdk-overlay { position: fixed; inset: 0; background: rgba(16, 24, 40, .45); z-index: 1090;
  display: none; }
.q-cmdk-overlay.open { display: block; animation: q-fade var(--q-dur-1) both; }
.q-cmdk { position: fixed; top: 14vh; left: 50%; transform: translateX(-50%);
  width: 560px; max-width: 94vw; z-index: 1091; display: none;
  background: var(--q-surface); border-radius: var(--q-radius); box-shadow: var(--q-shadow-3);
  overflow: hidden; }
.q-cmdk.open { display: block; animation: q-cmdk-in var(--q-dur-2) var(--q-ease) both; }
@keyframes q-cmdk-in { from { opacity: 0; transform: translateX(-50%) translateY(-6px) scale(.98); }
  to { opacity: 1; transform: translateX(-50%); } }
.q-cmdk input { border: none; outline: none; width: 100%; padding: .9rem 1.1rem; font-size: 1rem;
  background: transparent; color: var(--q-text); border-bottom: 1px solid var(--q-border); }
.q-cmdk-list { max-height: 46vh; overflow-y: auto; padding: .4rem; }
.q-cmdk-item { display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem;
  border-radius: var(--q-radius-sm); cursor: pointer; color: var(--q-text); font-size: .9rem; }
.q-cmdk-item i { width: 1.1rem; text-align: center; color: var(--q-text-muted); }
.q-cmdk-item.sel { background: var(--brand); color: #fff; }
.q-cmdk-item.sel i { color: #fff; }
.q-cmdk-item.ai { color: var(--q-ai); }
.q-cmdk-item .grp { margin-left: auto; font-size: .68rem; color: var(--q-text-muted); }
.q-cmdk-item.sel .grp { color: rgba(255,255,255,.7); }
.q-cmdk-hint { padding: .45rem .9rem; border-top: 1px solid var(--q-border);
  font-size: .72rem; color: var(--q-text-muted); display: flex; gap: 1rem; }
.q-cmdk-hint kbd { background: var(--q-surface-2); border-radius: .25rem; padding: .05rem .3rem;
  font-size: .68rem; font-family: var(--q-font); }

/* insight strip */
.q-insight-card { border-left: 3px solid var(--q-text-muted); transition: opacity var(--q-dur-2), transform var(--q-dur-2); }
.q-insight-card.danger { border-left-color: #e11d48; }
.q-insight-card.warning { border-left-color: #d97706; }
.q-insight-card.success { border-left-color: #059669; }
.q-insight-card.htmx-swapping { opacity: 0; transform: translateY(4px); }

/* line-item row flash (new rows in document forms) */
tr.q-row-new { animation: q-row-flash 900ms var(--q-ease); }
@keyframes q-row-flash { from { background: var(--brand-100); } to { background: transparent; } }

/* HTMX lifecycle transitions */
.htmx-swapping { opacity: 0; transition: opacity var(--q-dur-1); }
.htmx-settling { animation: q-fade-rise var(--q-dur-2) var(--q-ease); }
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline-flex; }

/* shared keyframes */
@keyframes q-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes q-fade-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes q-pop { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }