/* Aulenia — app stylesheet (production, vanilla + Tailwind-friendly).
   Imports the design tokens, then defines framework-agnostic component classes
   built ON those tokens. Works with or without Tailwind: the markup uses these
   semantic classes + a few layout utilities below. In a Tailwind build you can
   keep these as-is (they only reference CSS variables) and use tailwind.config.js
   for utilities. */

@import url('../../styles.css');

/* ============ base / reset ============ */
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--font-sans);background:var(--bg-app);color:var(--text-body);-webkit-font-smoothing:antialiased;font-size:var(--text-base);line-height:var(--leading-normal)}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p{margin:0}
button{font-family:inherit}
:focus-visible{outline:none}

/* ============ layout utilities (small, hand-picked) ============ */
.row{display:flex;align-items:center;gap:var(--space-3)}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}
.col{display:flex;flex-direction:column}
.stack{display:flex;flex-direction:column;gap:var(--space-4)}
.wrap{flex-wrap:wrap}
.flex1{flex:1}
.gap-2{gap:var(--space-2)}.gap-3{gap:var(--space-3)}.gap-4{gap:var(--space-4)}
.grid{display:grid}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-4)}
.grid-auto{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--space-4)}
.mt-2{margin-top:var(--space-2)}.mt-4{margin-top:var(--space-4)}.mt-5{margin-top:var(--space-5)}.mt-6{margin-top:var(--space-6)}
.mb-4{margin-bottom:var(--space-4)}.mb-5{margin-bottom:var(--space-5)}.mb-6{margin-bottom:var(--space-6)}
.muted{color:var(--text-muted)}.faint{color:var(--text-faint)}.strong{color:var(--text-strong)}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.text-sm{font-size:var(--text-sm)}.text-xs{font-size:var(--text-xs)}.text-lg{font-size:var(--text-lg)}

/* ============ page scaffold ============ */
.page-h{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-6);flex-wrap:wrap}
.page-t{font-size:var(--text-h1);font-weight:800;letter-spacing:var(--tracking-tight);color:var(--text-strong);line-height:var(--leading-tight)}
.page-s{font-size:var(--text-sm);color:var(--text-muted);margin-top:6px}
.backlink{display:inline-flex;align-items:center;gap:6px;background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:13px;font-weight:500;margin-bottom:8px;padding:0}
.backlink:hover{color:var(--text-strong)}
.overline{font-size:var(--text-2xs);font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-overline);color:var(--text-faint)}

/* ============ button ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-weight:var(--weight-semibold);font-size:var(--text-base);line-height:1;height:var(--control-height);padding:0 var(--space-4);border-radius:var(--radius-md);border:1px solid transparent;cursor:pointer;white-space:nowrap;user-select:none;transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.btn:focus-visible{box-shadow:var(--ring-focus)}
.btn:active{transform:translateY(1px)}
.btn:disabled,.btn[aria-disabled=true]{opacity:.5;cursor:not-allowed;transform:none}
.btn svg{width:1.15em;height:1.15em;flex:0 0 auto}
.btn--sm{height:var(--control-height-sm);font-size:var(--text-sm);padding:0 var(--space-3);border-radius:var(--radius-sm)}
.btn--lg{height:var(--control-height-lg);font-size:var(--text-lg);padding:0 var(--space-6);border-radius:var(--radius-lg)}
.btn--block{width:100%}
.btn--primary{background:var(--brand);color:var(--text-on-brand)}
.btn--primary:hover{background:var(--brand-hover)}
.btn--secondary{background:var(--surface-card);color:var(--text-strong);border-color:var(--border-default);box-shadow:var(--shadow-xs)}
.btn--secondary:hover{background:var(--bg-subtle);border-color:var(--border-strong)}
.btn--ghost{background:transparent;color:var(--text-body)}
.btn--ghost:hover{background:var(--brand-soft-2);color:var(--brand-hover)}
.btn--soft{background:var(--brand-soft);color:var(--on-brand-soft)}
.btn--soft:hover{background:color-mix(in srgb,var(--brand) 20%,var(--brand-soft))}
.btn--danger{background:var(--danger);color:#fff}
.btn--danger:hover{background:var(--red-600)}
.btn--danger-soft{background:var(--danger-soft);color:var(--danger-fg)}

/* ============ icon button ============ */
.icon-btn{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:var(--control-height);height:var(--control-height);border-radius:var(--radius-md);border:1px solid transparent;background:transparent;color:var(--text-body);cursor:pointer;transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
.icon-btn:hover{background:var(--bg-subtle);color:var(--text-strong)}
.icon-btn:focus-visible{box-shadow:var(--ring-focus)}
.icon-btn--sm{width:var(--control-height-sm);height:var(--control-height-sm);border-radius:var(--radius-sm)}
.icon-btn--outline{border-color:var(--border-default);background:var(--surface-card)}

/* ============ inputs ============ */
.field{display:flex;align-items:center;gap:var(--space-2);width:100%;background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-md);height:var(--control-height);padding:0 var(--space-3);color:var(--text-body);transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
.field:focus-within{border-color:var(--brand);box-shadow:var(--ring-focus)}
.field--lg{height:var(--control-height-lg);border-radius:var(--radius-lg)}
.field--invalid{border-color:var(--danger)}
.field>svg{width:18px;height:18px;color:var(--text-faint);flex:0 0 auto}
.input,.field input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-family:inherit;font-size:var(--text-base);color:var(--text-strong);width:100%}
.input::placeholder,.field input::placeholder{color:var(--text-faint)}
select.input{appearance:none;cursor:pointer;padding-right:var(--space-6)}
textarea.input{min-height:88px;padding:var(--space-3);line-height:var(--leading-normal);resize:vertical;height:auto}
.form-field{display:flex;flex-direction:column;gap:var(--space-2)}
.form-label{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--text-strong)}
.form-hint{font-size:var(--text-xs);color:var(--text-muted)}
.form-error{font-size:var(--text-xs);color:var(--danger-fg)}
.req{color:var(--danger)}

/* switch / checkbox */
.switch{position:relative;display:inline-flex;align-items:center;gap:var(--space-2);cursor:pointer}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch__track{width:40px;height:23px;border-radius:99px;background:var(--neutral-300);padding:2px;transition:background var(--dur-base) var(--ease-out);flex:0 0 auto}
.switch__thumb{width:19px;height:19px;border-radius:50%;background:#fff;box-shadow:var(--shadow-sm);transition:transform var(--dur-base) var(--ease-out)}
.switch input:checked+.switch__track{background:var(--brand)}
.switch input:checked+.switch__track .switch__thumb{transform:translateX(17px)}
.check{position:relative;display:inline-flex;align-items:center;gap:var(--space-2);cursor:pointer;font-size:var(--text-base)}
.check input{position:absolute;opacity:0;width:0;height:0}
.check__box{width:20px;height:20px;border:1.5px solid var(--border-strong);border-radius:var(--radius-xs);background:var(--surface-card);display:inline-flex;align-items:center;justify-content:center;color:#fff}
.check__box svg{width:13px;height:13px;opacity:0}
.check input:checked+.check__box{background:var(--brand);border-color:var(--brand)}
.check input:checked+.check__box svg{opacity:1}

/* ============ card ============ */
.card{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden}
.card--flat{box-shadow:none}
.card--pad{padding:var(--space-5)}
.card--interactive{cursor:pointer;transition:box-shadow var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)}
.card--interactive:hover{box-shadow:var(--shadow-md);border-color:var(--border-default);transform:translateY(-2px)}
.card__header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-3);padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--divider)}
.card__title{font-size:var(--text-h4);font-weight:var(--weight-bold);color:var(--text-strong);letter-spacing:var(--tracking-tight)}
.card__sub{font-size:var(--text-sm);color:var(--text-muted);margin-top:2px}
.card__body{padding:var(--space-5)}
.card__footer{padding:var(--space-4) var(--space-5);border-top:1px solid var(--divider);background:var(--bg-subtle)}

/* ============ stat card ============ */
.stat{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-5);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:var(--space-2)}
.stat__top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}
.stat__label{font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--text-muted)}
.stat__icon{width:36px;height:36px;border-radius:var(--radius-md);display:inline-flex;align-items:center;justify-content:center;background:var(--brand-soft);color:var(--on-brand-soft);flex:0 0 auto}
.stat__icon svg{width:19px;height:19px}
.stat__value{font-size:var(--text-h1);font-weight:var(--weight-bold);color:var(--text-strong);letter-spacing:var(--tracking-tight);font-variant-numeric:tabular-nums;line-height:1.05}
.stat__foot{display:flex;align-items:center;gap:6px;font-size:var(--text-xs);color:var(--text-muted)}
.stat__delta{display:inline-flex;align-items:center;gap:3px;font-weight:var(--weight-semibold)}
.stat__delta svg{width:13px;height:13px}
.stat__delta--up{color:var(--success-fg)}
.stat__delta--down{color:var(--danger-fg)}

/* ============ badge ============ */
.badge{display:inline-flex;align-items:center;gap:5px;font-weight:var(--weight-semibold);font-size:var(--text-xs);line-height:1;padding:4px 9px;border-radius:var(--radius-full);white-space:nowrap;background:var(--neutral-200);color:var(--text-body)}
.badge--sm{font-size:var(--text-2xs);padding:3px 7px}
.badge__dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 auto}
.badge--neutral{background:var(--neutral-200);color:var(--text-body)}
.badge--brand{background:var(--brand-soft);color:var(--on-brand-soft)}
.badge--success{background:var(--success-soft);color:var(--success-fg)}
.badge--warning{background:var(--warning-soft);color:var(--warning-fg)}
.badge--danger{background:var(--danger-soft);color:var(--danger-fg)}
.badge--info{background:var(--info-soft);color:var(--info-fg)}
.badge--indigo{background:var(--indigo-100);color:var(--indigo-500)}
.badge--violet{background:var(--violet-100);color:var(--violet-500)}

/* ============ avatar ============ */
.avatar{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;position:relative;border-radius:var(--radius-full);background:var(--brand-soft);color:var(--on-brand-soft);overflow:hidden;font-weight:var(--weight-semibold);line-height:1;width:40px;height:40px;font-size:15px}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar--xs{width:24px;height:24px;font-size:10px}
.avatar--sm{width:32px;height:32px;font-size:13px}
.avatar--lg{width:56px;height:56px;font-size:22px}
.avatar--xl{width:72px;height:72px;font-size:28px}
.avatar__status{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;border:2px solid var(--surface-card)}
.avatar-stack{display:inline-flex}
.avatar-stack .avatar{box-shadow:0 0 0 2px var(--surface-card)}
.avatar-stack .avatar:not(:first-child){margin-left:-8px}

/* ============ table ============ */
.table-wrap{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
.table{width:100%;border-collapse:collapse}
.table thead th{text-align:left;font-size:var(--text-xs);font-weight:var(--weight-bold);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--text-muted);background:var(--bg-subtle);padding:10px 14px;border-bottom:1px solid var(--divider);white-space:nowrap}
.table th.sortable{cursor:pointer;user-select:none}
.table th.sortable:hover{color:var(--text-strong)}
.table tbody td{padding:0 14px;height:var(--row-height-dense);font-size:var(--text-sm);color:var(--text-body);border-bottom:1px solid var(--divider);vertical-align:middle}
.table tbody tr:last-child td{border-bottom:none}
.table tbody tr{transition:background var(--dur-fast) var(--ease-out)}
.table tbody tr.clickable{cursor:pointer}
.table tbody tr:hover{background:var(--brand-soft-2)}
.td-right{text-align:right}.td-center{text-align:center}
.td-num{font-family:var(--font-mono);font-variant-numeric:tabular-nums}

/* ============ sidebar ============ */
.sidebar{display:flex;flex-direction:column;background:var(--surface-inverse);color:var(--text-on-inverse);width:250px;flex:0 0 auto;height:100%}
.sidebar__brand{display:flex;align-items:flex-end;line-height:1;gap:10px;padding:16px 18px;color:var(--sage-50)}
.sidebar__wm{font-size:22px;font-weight:800;letter-spacing:-.02em}
.sidebar__scroll{flex:1;overflow-y:auto;padding:6px 10px 16px}
.sidebar__section{margin-top:14px}
.sidebar__label{font-size:var(--text-2xs);font-weight:700;letter-spacing:var(--tracking-overline);text-transform:uppercase;color:color-mix(in srgb,var(--sage-50) 45%,transparent);padding:6px 10px}
.sidebar__item{display:flex;align-items:center;gap:11px;width:100%;padding:9px 10px;border-radius:var(--radius-md);color:color-mix(in srgb,var(--sage-50) 82%,transparent);background:none;border:none;cursor:pointer;font-size:var(--text-base);font-weight:var(--weight-medium);text-align:left;white-space:nowrap;transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.sidebar__item svg{width:19px;height:19px;flex:0 0 auto}
.sidebar__item:hover{background:color-mix(in srgb,var(--sage-50) 10%,transparent);color:#fff}
.sidebar__item.active{background:color-mix(in srgb,var(--sage-400) 26%,transparent);color:#fff;font-weight:var(--weight-semibold)}
.sidebar__txt{flex:1;overflow:hidden;text-overflow:ellipsis}
.sidebar__badge{font-size:var(--text-2xs);font-weight:700;background:var(--sage-400);color:var(--sage-950);padding:1px 7px;border-radius:99px}
.sidebar__foot{padding:10px;border-top:1px solid color-mix(in srgb,var(--sage-50) 12%,transparent)}

/* ============ app shell + topbar ============ */
.shell{display:flex;height:100vh;overflow:hidden}
.main{flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{display:flex;align-items:center;gap:14px;height:60px;padding:0 20px;background:var(--surface-card);border-bottom:1px solid var(--border-subtle);flex:0 0 auto}
.content{flex:1;overflow-y:auto;padding:26px 30px}
.chip{display:flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid var(--border-default);border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:500;color:var(--text-body);cursor:pointer;background:var(--surface-card);white-space:nowrap}
.chip:hover{border-color:var(--border-strong)}

/* ============ tabs ============ */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--divider);overflow-x:auto}
.tab{position:relative;display:inline-flex;align-items:center;gap:7px;padding:10px 14px;font-size:var(--text-base);font-weight:var(--weight-medium);color:var(--text-muted);background:none;border:none;cursor:pointer;white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
.tab svg{width:16px;height:16px}
.tab:hover{color:var(--text-strong)}
.tab.active{color:var(--brand);border-bottom-color:var(--brand);font-weight:var(--weight-semibold)}
.tab__count{font-size:var(--text-xs);font-weight:600;background:var(--bg-subtle);color:var(--text-muted);padding:1px 7px;border-radius:99px}
.tab.active .tab__count{background:var(--brand-soft);color:var(--on-brand-soft)}
.tabs--pills{border-bottom:none;gap:6px}
.tabs--pills .tab{border:none;border-radius:99px;padding:7px 14px;margin:0}
.tabs--pills .tab.active{background:var(--brand-soft);color:var(--on-brand-soft)}

/* ============ timeline ============ */
.timeline{display:flex;flex-direction:column}
.tl-item{display:flex;gap:var(--space-3);padding-bottom:var(--space-5)}
.tl-item:last-child{padding-bottom:0}
.tl-rail{display:flex;flex-direction:column;align-items:center;flex:0 0 auto}
.tl-dot{width:32px;height:32px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--brand-soft);color:var(--on-brand-soft);border:2px solid var(--surface-card);flex:0 0 auto}
.tl-dot svg{width:16px;height:16px}
.tl-dot--success{background:var(--success-soft);color:var(--success-fg)}
.tl-dot--muted{background:var(--neutral-200);color:var(--text-muted)}
.tl-line{width:2px;flex:1;background:var(--divider);margin-top:2px}
.tl-item:last-child .tl-line{display:none}
.tl-body{padding-top:4px;flex:1;min-width:0}
.tl-title{font-size:var(--text-base);font-weight:var(--weight-semibold);color:var(--text-strong)}
.tl-meta{font-size:var(--text-xs);color:var(--text-muted);margin-top:1px}
.tl-desc{font-size:var(--text-sm);color:var(--text-body);margin-top:5px}

/* ============ kanban ============ */
.kanban{display:flex;gap:var(--space-4);align-items:flex-start;overflow-x:auto;padding-bottom:4px}
.kb-col{flex:0 0 300px;background:var(--bg-subtle);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);display:flex;flex-direction:column;max-height:100%}
.kb-head{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--divider)}
.kb-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.kb-title{font-size:var(--text-sm);font-weight:var(--weight-bold);color:var(--text-strong)}
.kb-count{margin-left:auto;font-size:var(--text-xs);font-weight:600;color:var(--text-muted);background:var(--surface-card);border:1px solid var(--border-subtle);padding:1px 8px;border-radius:99px}
.kb-list{padding:10px;display:flex;flex-direction:column;gap:10px;overflow-y:auto}
.kb-card{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-xs);padding:12px;cursor:pointer;transition:box-shadow var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.kb-card:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}

/* ============ empty state ============ */
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:var(--space-12) var(--space-6);gap:var(--space-3)}
.empty__art{width:72px;height:72px;border-radius:var(--radius-2xl);display:inline-flex;align-items:center;justify-content:center;background:var(--brand-soft-2);color:var(--brand)}
.empty__art svg{width:32px;height:32px}
.empty__title{font-size:var(--text-h4);font-weight:var(--weight-bold);color:var(--text-strong)}
.empty__desc{font-size:var(--text-sm);color:var(--text-muted);max-width:38ch;line-height:var(--leading-normal)}

/* ============ bars (mini chart) ============ */
.bars{display:flex;align-items:flex-end;gap:10px;padding-top:10px}
.bar{flex:1;background:var(--brand-soft);border-radius:6px 6px 0 0;position:relative;display:flex;align-items:flex-end;justify-content:center}
.bar-fill{width:100%;border-radius:6px 6px 0 0;background:var(--brand)}
.bar>span{position:absolute;bottom:-20px;font-size:11px;color:var(--text-muted)}

/* ============ overlay / dialog / drawer ============ */
.overlay{position:fixed;inset:0;z-index:var(--z-modal);background:color-mix(in srgb,var(--neutral-950) 45%,transparent);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;padding:var(--space-6)}
.dialog{background:var(--surface-card);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);width:100%;max-width:480px;display:flex;flex-direction:column;overflow:hidden}
.dialog__head{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-5) var(--space-5) var(--space-3)}
.dialog__body{padding:0 var(--space-5) var(--space-5)}
.dialog__foot{display:flex;justify-content:flex-end;gap:var(--space-2);padding:var(--space-4) var(--space-5);border-top:1px solid var(--divider);background:var(--bg-subtle)}
.drawer-overlay{position:fixed;inset:0;z-index:var(--z-drawer);background:color-mix(in srgb,var(--neutral-950) 42%,transparent);display:flex;justify-content:flex-end}
.drawer{background:var(--surface-card);box-shadow:var(--shadow-xl);height:100%;width:100%;max-width:440px;display:flex;flex-direction:column}
.drawer__head{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--divider)}
.drawer__body{padding:var(--space-5);overflow:auto;flex:1;display:flex;flex-direction:column;gap:var(--space-4)}
.drawer__foot{display:flex;justify-content:flex-end;gap:var(--space-2);padding:var(--space-4) var(--space-5);border-top:1px solid var(--divider);background:var(--bg-subtle)}

/* progress bar */
.prog{height:8px;background:var(--bg-subtle);border-radius:99px;overflow:hidden}
.prog__fill{height:100%;background:var(--brand);border-radius:99px}