/* =========================================================================
   NOVA AI — dashboard.css
   Application shell: sidebar, top bar, data cards, charts, tables,
   projects, AI tool runner, settings. Loads after style.css.
   ========================================================================= */

/* ============================== APP SHELL =============================== */
.app{
  --side-w:252px;
  --side-w-min:72px;
  --top-h:60px;
  min-block-size:100dvh;
  display:grid;
  grid-template-columns:var(--side-w) minmax(0,1fr);
  background:var(--bg-2);
}
.app.is-collapsed{--side-w:var(--side-w-min)}

.app-side{
  position:sticky;inset-block-start:0;block-size:100dvh;
  display:flex;flex-direction:column;
  background:var(--bg);border-inline-start:1px solid var(--line);
  z-index:20;
}
.app-side__head{
  display:flex;align-items:center;gap:.6rem;
  min-block-size:var(--top-h);padding-inline:1rem;
  border-block-end:1px solid var(--line);flex:none;
}
.app-side__ws{
  display:flex;align-items:center;gap:.6rem;inline-size:100%;
  padding:.4rem;border-radius:var(--r-sm);min-inline-size:0;
  transition:background-color var(--d1) var(--ease);
}
.app-side__ws:hover{background:var(--bg-3)}
.app-side__ws .brand__mark{inline-size:28px;block-size:28px;border-radius:8px}
.app-side__ws b{font-size:var(--fs-sm);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-side__ws small{display:block;font-size:var(--fs-2xs);color:var(--fg-3);font-weight:400}
.app-side__nav{flex:1;overflow-y:auto;padding:.85rem .7rem;display:grid;gap:.15rem;align-content:start}
.app-side__group{
  font-size:var(--fs-2xs);color:var(--fg-3);font-weight:600;
  padding:.9rem .6rem .35rem;letter-spacing:.02em;
}
.app-side__nav a{
  display:flex;align-items:center;gap:.7rem;
  min-block-size:42px;padding-inline:.6rem;border-radius:var(--r-sm);
  font-size:var(--fs-sm);color:var(--fg-2);
  transition:background-color var(--d1) var(--ease),color var(--d1) var(--ease);
}
.app-side__nav a:hover{background:var(--bg-3);color:var(--fg)}
.app-side__nav a[aria-current="page"]{background:var(--accent-soft);color:var(--accent);font-weight:600}
.app-side__nav svg{inline-size:1.1rem;block-size:1.1rem;flex:none}
.app-side__nav .label{white-space:nowrap;overflow:hidden}
.app-side__nav .pill{
  margin-inline-start:auto;font-size:var(--fs-2xs);padding:.1rem .4rem;
  border-radius:var(--r-xs);background:var(--bg-3);color:var(--fg-3);
}
.app-side__foot{flex:none;padding:.85rem .7rem;border-block-start:1px solid var(--line);display:grid;gap:.6rem}
.usage-mini{padding:.75rem;border-radius:var(--r-sm);background:var(--bg-2);border:1px solid var(--line-2);display:grid;gap:.5rem}
.usage-mini__top{display:flex;justify-content:space-between;font-size:var(--fs-2xs);color:var(--fg-2)}

.app.is-collapsed .app-side__nav .label,
.app.is-collapsed .app-side__nav .pill,
.app.is-collapsed .app-side__ws span,
.app.is-collapsed .app-side__group,
.app.is-collapsed .usage-mini{display:none}
.app.is-collapsed .app-side__nav a{justify-content:center;padding-inline:0}
.app.is-collapsed .app-side__ws{justify-content:center}

.app-body{min-inline-size:0;display:flex;flex-direction:column}
.app-top{
  position:sticky;inset-block-start:0;z-index:15;
  min-block-size:var(--top-h);display:flex;align-items:center;gap:.6rem;
  padding-inline:clamp(1rem,2.5vw,1.75rem);
  background:color-mix(in srgb,var(--bg) 90%,transparent);
  backdrop-filter:saturate(140%) blur(8px);-webkit-backdrop-filter:saturate(140%) blur(8px);
  border-block-end:1px solid var(--line);
}
@supports not (background:color-mix(in srgb,red 50%,blue)){ .app-top{background:var(--bg)} }
.app-top__title{font-size:var(--fs-h4);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-top__spacer{flex:1}
.side-toggle{display:inline-grid}
.app-search{
  display:flex;align-items:center;gap:.5rem;min-block-size:38px;
  padding-inline:.75rem;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--bg-2);color:var(--fg-3);font-size:var(--fs-xs);min-inline-size:220px;
  transition:border-color var(--d1) var(--ease),color var(--d1) var(--ease);
}
.app-search:hover{border-color:var(--fg-3);color:var(--fg-2)}
.app-search svg{inline-size:1rem;block-size:1rem}
.app-search .kbd{margin-inline-start:auto}
.kbd{
  font-family:var(--font-lat);font-size:.68rem;padding:.1rem .35rem;
  border:1px solid var(--line);border-radius:4px;background:var(--surface);color:var(--fg-3);
}
.app-main{flex:1;padding:clamp(1.25rem,2.5vw,2rem) clamp(1rem,2.5vw,1.75rem) 3rem;display:grid;gap:clamp(1rem,2vw,1.5rem);align-content:start}
.app-main>*{min-inline-size:0}

.page-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.page-intro h1{font-size:var(--fs-h2)}
.page-intro p{font-size:var(--fs-sm);color:var(--fg-2);margin-block-start:.35rem}
.page-actions{display:flex;gap:.5rem;flex-wrap:wrap}

.demo-note{
  display:flex;gap:.6rem;align-items:flex-start;
  padding:.7rem .9rem;border-radius:var(--r-sm);
  background:var(--info-soft);color:var(--fg-2);font-size:var(--fs-xs);line-height:1.75;
}
.demo-note svg{inline-size:1rem;block-size:1rem;color:var(--info);flex:none;margin-block-start:.25rem}

/* ============================== DROPDOWN ================================ */
.dropdown{position:relative}
.dropdown__menu{
  position:absolute;inset-block-start:calc(100% + 6px);inset-inline-end:0;
  min-inline-size:216px;padding:.35rem;z-index:30;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh-3);display:grid;gap:.1rem;
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity var(--d1) var(--ease),transform var(--d1) var(--ease),visibility 0s linear var(--d1);
}
.dropdown__menu.is-open{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.dropdown__menu a,.dropdown__menu button{
  display:flex;align-items:center;gap:.6rem;inline-size:100%;
  min-block-size:38px;padding-inline:.6rem;border-radius:var(--r-sm);
  font-size:var(--fs-sm);color:var(--fg-2);text-align:start;
}
.dropdown__menu a:hover,.dropdown__menu button:hover{background:var(--bg-3);color:var(--fg)}
.dropdown__menu svg{inline-size:1rem;block-size:1rem;flex:none}
.dropdown__sep{block-size:1px;background:var(--line);margin:.25rem 0}
.dropdown__head{padding:.6rem;display:grid;gap:.15rem;border-block-end:1px solid var(--line);margin-block-end:.25rem}
.dropdown__head b{font-size:var(--fs-sm)}
.dropdown__head span{font-size:var(--fs-2xs);color:var(--fg-3)}
.avatar{
  inline-size:32px;block-size:32px;border-radius:50%;flex:none;
  display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);
  font-weight:700;font-size:var(--fs-xs);font-family:var(--font-lat);
}
.avatar--lg{inline-size:56px;block-size:56px;font-size:1.1rem}

.notif-item{display:grid;gap:.2rem;padding:.6rem;border-radius:var(--r-sm)}
.notif-item:hover{background:var(--bg-3)}
.notif-item b{font-size:var(--fs-xs);font-weight:600}
.notif-item span{font-size:var(--fs-2xs);color:var(--fg-3)}

/* ============================== DATA CARDS ============================== */
.stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.75rem,1.5vw,1.15rem)}
.stat{display:grid;gap:.5rem;padding:1.1rem 1.15rem}
.stat__label{display:flex;align-items:center;gap:.45rem;font-size:var(--fs-xs);color:var(--fg-3)}
.stat__label svg{inline-size:.95rem;block-size:.95rem}
.stat__value{font-size:1.6rem;font-weight:700;line-height:1.2;font-variant-numeric:tabular-nums}
.stat__foot{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.delta{display:inline-flex;align-items:center;gap:.25rem;font-size:var(--fs-xs);font-weight:600}
.delta svg{inline-size:.85rem;block-size:.85rem}
.delta--up{color:var(--success)}
.delta--down{color:var(--danger)}
.delta--flat{color:var(--fg-3)}
.spark{inline-size:80px;block-size:28px;flex:none}

.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.panel__head{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap;
  padding:1rem 1.15rem;border-block-end:1px solid var(--line);
}
.panel__head h2,.panel__head h3{font-size:var(--fs-h4);font-weight:600}
.panel__head p{font-size:var(--fs-xs);color:var(--fg-3);margin-block-start:.2rem}
.panel__body{padding:1.15rem}
.panel__body--flush{padding:0}
.panel__foot{padding:.85rem 1.15rem;border-block-start:1px solid var(--line);background:var(--bg-2)}

.dash-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(.75rem,1.5vw,1.15rem);align-items:start}
.dash-grid--even{grid-template-columns:repeat(2,minmax(0,1fr))}

/* ================================ CHARTS ================================ */
.chart{position:relative;inline-size:100%}
.chart svg{inline-size:100%;block-size:auto;display:block;overflow:visible}
.chart__grid line{stroke:var(--line);stroke-width:1}
.chart__axis text{fill:var(--fg-3);font-size:10px;font-family:var(--font)}
.chart__line{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chart__area{opacity:.12}
.chart__dot{stroke:var(--surface);stroke-width:2}
.chart__bar{transition:opacity var(--d1) var(--ease)}
.chart__bar:hover,.chart__bar.is-hot{opacity:.78}
.chart__hit{fill:transparent;cursor:crosshair}
.chart__cursor{stroke:var(--line-strong);stroke-width:1;stroke-dasharray:3 3}
.chart-tip{
  position:absolute;pointer-events:none;z-index:5;
  background:var(--ink-900);color:#fff;padding:.45rem .6rem;border-radius:var(--r-xs);
  font-size:var(--fs-2xs);white-space:nowrap;box-shadow:var(--sh-2);
  transform:translate(50%,-120%);opacity:0;transition:opacity var(--d1) var(--ease);
}
[data-theme="dark"] .chart-tip{background:var(--bg-3);border:1px solid var(--line)}
.chart-tip.is-on{opacity:1}
.chart-tip b{display:block;font-weight:600}
.legend{display:flex;flex-wrap:wrap;gap:.65rem 1.15rem;margin-block-start:.85rem}
.legend span{display:inline-flex;align-items:center;gap:.4rem;font-size:var(--fs-xs);color:var(--fg-2)}
.legend i{inline-size:10px;block-size:10px;border-radius:3px;display:block;flex:none}
.chart-table{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.chart-table table{inline-size:auto}

.bar-row{display:grid;gap:.6rem}
.bar-item{display:grid;grid-template-columns:minmax(96px,auto) minmax(0,1fr) auto;gap:.75rem;align-items:center;font-size:var(--fs-xs)}
.bar-item__track{block-size:8px;border-radius:var(--r-pill);background:var(--bg-3);overflow:hidden}
.bar-item__fill{block-size:100%;border-radius:var(--r-pill);transition:inline-size var(--d3) var(--ease)}
.bar-item__val{color:var(--fg-2);font-variant-numeric:tabular-nums;min-inline-size:52px;text-align:end}

.progress{display:grid;gap:.45rem}
.progress__top{display:flex;justify-content:space-between;gap:1rem;font-size:var(--fs-xs)}
.progress__top b{font-weight:600}
.progress__track{block-size:10px;border-radius:var(--r-pill);background:var(--bg-3);overflow:hidden}
.progress__fill{block-size:100%;background:var(--accent);border-radius:var(--r-pill);transition:inline-size var(--d3) var(--ease)}
.progress__fill--warn{background:var(--warn)}
.progress__fill--danger{background:var(--danger)}
.progress__foot{font-size:var(--fs-2xs);color:var(--fg-3)}

.donut{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}
.donut svg{inline-size:150px;block-size:150px;flex:none}
.donut__center{font-size:var(--fs-sm);font-weight:700;fill:var(--fg)}
.donut__sub{font-size:9px;fill:var(--fg-3)}
.donut__seg{transition:opacity var(--d1) var(--ease);cursor:pointer}
.donut__seg:hover{opacity:.75}

.heat{display:grid;grid-template-columns:auto repeat(7,minmax(0,1fr));gap:3px;font-size:var(--fs-2xs)}
.heat__cell{aspect-ratio:1;border-radius:3px;background:var(--bg-3);min-block-size:16px}
.heat__label{color:var(--fg-3);display:flex;align-items:center;padding-inline-end:.4rem;white-space:nowrap}

/* ================================ TABLES ================================ */
.table-wrap{overflow-x:auto;contain:paint}
.table{font-size:var(--fs-sm);min-inline-size:540px}
.table th,.table td{padding:.8rem 1rem;text-align:start;border-block-end:1px solid var(--line-2)}
.table thead th{
  font-size:var(--fs-xs);font-weight:600;color:var(--fg-3);
  background:var(--bg-2);border-block-end:1px solid var(--line);white-space:nowrap;
}
.table tbody tr{transition:background-color var(--d1) var(--ease)}
.table tbody tr:hover{background:var(--bg-2)}
.table td.num,.table th.num{text-align:end;font-variant-numeric:tabular-nums}
.table__main{display:flex;align-items:center;gap:.7rem}
.table__main b{font-weight:600;font-size:var(--fs-sm)}
.table__main small{display:block;color:var(--fg-3);font-size:var(--fs-2xs)}

/* ============================== PROJECTS ================================ */
.toolbar{display:flex;flex-wrap:wrap;gap:.6rem .9rem;align-items:center;justify-content:space-between}
.toolbar__group{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;flex:1 1 auto;min-inline-size:0}
.toolbar .input,.toolbar .select{min-block-size:38px;font-size:var(--fs-xs);inline-size:auto}
.toolbar .input{min-inline-size:180px}

.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.75rem,1.5vw,1.15rem)}
.project{display:grid;gap:.85rem;align-content:start;position:relative}
.project__top{display:flex;align-items:flex-start;gap:.75rem}
.project__icon{
  inline-size:38px;block-size:38px;border-radius:var(--r-sm);flex:none;
  display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);
}
.project__icon svg{inline-size:1.1rem;block-size:1.1rem}
.project h3{font-size:var(--fs-sm);font-weight:600}
.project__meta{font-size:var(--fs-2xs);color:var(--fg-3);margin-block-start:.15rem}
.project__desc{font-size:var(--fs-xs);color:var(--fg-2);min-block-size:2.6em}
.project__foot{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding-block-start:.35rem;border-block-start:1px solid var(--line-2)}
.project__menu{margin-inline-start:auto}

/* ============================== AI TOOLS ================================ */
.tool-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.75rem,1.5vw,1.15rem)}
.tool{display:grid;gap:.75rem;align-content:start;text-align:start;inline-size:100%}
.tool__head{display:flex;align-items:center;gap:.7rem}
.tool__icon{
  inline-size:40px;block-size:40px;border-radius:var(--r-sm);flex:none;
  display:grid;place-items:center;
}
.tool__icon svg{inline-size:1.15rem;block-size:1.15rem}
.tool h3{font-size:var(--fs-sm);font-weight:600}
.tool p{font-size:var(--fs-xs);color:var(--fg-2)}
.tool__foot{display:flex;align-items:center;justify-content:space-between;gap:.5rem;font-size:var(--fs-2xs);color:var(--fg-3)}

.runner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(1rem,2vw,1.5rem);align-items:start}
.runner__form{display:grid;gap:1rem}
.runner__opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
.runner__out{
  min-block-size:280px;display:flex;flex-direction:column;
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);
}
.runner__out-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.65rem .85rem;border-block-end:1px solid var(--line)}
.runner__out-head span{font-size:var(--fs-2xs);color:var(--fg-3)}
.runner__out-body{flex:1;padding:1rem;overflow-y:auto;max-block-size:420px}
.runner__out-body h4{font-size:var(--fs-sm);margin-block:.85rem .4rem}
.runner__out-body h4:first-child{margin-block-start:0}
.runner__out-body p,.runner__out-body li{font-size:var(--fs-sm);color:var(--fg-2);line-height:1.9}
.runner__out-body ul,.runner__out-body ol{display:grid;gap:.4rem;padding-inline-start:1.1rem;margin-block:.35rem}
.runner__out-body ul li{list-style:disc}
.runner__out-body ol li{list-style:decimal}
.runner__actions{display:flex;gap:.5rem;flex-wrap:wrap}

.skeleton{display:grid;gap:.6rem}
.skeleton i{
  display:block;block-size:11px;border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--bg-3) 25%,var(--line-2) 37%,var(--bg-3) 63%);
  background-size:400% 100%;animation:shimmer 1.3s ease-in-out infinite;
}
.skeleton i:nth-child(2){inline-size:92%}
.skeleton i:nth-child(3){inline-size:78%}
.skeleton i:nth-child(4){inline-size:88%}
.skeleton i:nth-child(5){inline-size:64%}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:0 0}}

/* ============================== SETTINGS ================================ */
.settings{display:grid;grid-template-columns:200px minmax(0,1fr);gap:clamp(1rem,2.5vw,2rem);align-items:start}
.settings__nav{display:grid;gap:.15rem;position:sticky;inset-block-start:calc(var(--top-h) + 1rem)}
.settings__nav button{
  display:flex;align-items:center;gap:.6rem;min-block-size:40px;padding-inline:.7rem;
  border-radius:var(--r-sm);font-size:var(--fs-sm);color:var(--fg-2);text-align:start;
  transition:background-color var(--d1) var(--ease),color var(--d1) var(--ease);
}
.settings__nav button:hover{background:var(--bg-3);color:var(--fg)}
.settings__nav button[aria-selected="true"]{background:var(--accent-soft);color:var(--accent);font-weight:600}
.settings__nav svg{inline-size:1.05rem;block-size:1.05rem;flex:none}
.setting-row{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem;align-items:center;
  padding-block:1rem;border-block-end:1px solid var(--line-2);
}
.setting-row:last-child{border-block-end:0}
.setting-row h3{font-size:var(--fs-sm);font-weight:600}
.setting-row p{font-size:var(--fs-xs);color:var(--fg-2);margin-block-start:.2rem}
.theme-picker{display:flex;gap:.5rem}
.theme-opt{position:relative;cursor:pointer}
.theme-opt input{position:absolute;opacity:0;pointer-events:none}
.theme-opt span{
  display:grid;place-items:center;min-inline-size:74px;min-block-size:38px;
  border:1px solid var(--line);border-radius:var(--r-sm);font-size:var(--fs-xs);
  transition:border-color var(--d1) var(--ease),background-color var(--d1) var(--ease),color var(--d1) var(--ease);
}
.theme-opt:has(input:checked) span{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);font-weight:600}
.theme-opt:has(input:focus-visible) span{outline:2px solid var(--accent);outline-offset:2px}

/* ============================= RESPONSIVE =============================== */
@media (max-width:1180px){
  .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dash-grid{grid-template-columns:minmax(0,1fr)}
  .project-grid,.tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .runner{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:1024px){
  .app{grid-template-columns:minmax(0,1fr)}
  .app-side{
    position:fixed;inset-block:0;inset-inline-start:0;inline-size:min(280px,86vw);
    transform:translateX(100%);visibility:hidden;
    transition:transform var(--d3) var(--ease),visibility 0s linear var(--d3);
    box-shadow:var(--sh-4);
  }
  .app-side.is-open{transform:translateX(0);visibility:visible;transition-delay:0s}
  .app.is-collapsed{--side-w:0}
  .app.is-collapsed .app-side__nav .label,
  .app.is-collapsed .app-side__nav .pill,
  .app.is-collapsed .app-side__ws span,
  .app.is-collapsed .app-side__group,
  .app.is-collapsed .usage-mini{display:revert}
  .app.is-collapsed .app-side__nav a{justify-content:flex-start;padding-inline:.6rem}
  .app-search{display:none}
  .settings{grid-template-columns:minmax(0,1fr)}
  .settings__nav{position:static;grid-auto-flow:column;grid-auto-columns:max-content;overflow-x:auto;contain:paint;scrollbar-width:none;padding-block-end:.25rem}
  .settings__nav::-webkit-scrollbar{display:none}
}
@media (max-width:760px){
  .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .project-grid,.tool-grid{grid-template-columns:minmax(0,1fr)}
  .dash-grid--even{grid-template-columns:minmax(0,1fr)}
  .runner__opts{grid-template-columns:minmax(0,1fr)}
  .setting-row{grid-template-columns:minmax(0,1fr);gap:.75rem}
  .setting-row>*:last-child{justify-self:start}
  .toolbar{align-items:stretch}
  .toolbar__group{inline-size:100%}
  .toolbar .input{flex:1;min-inline-size:0}
  .donut{justify-content:center}
  /* data tables become stacked records */
  .table--stack{min-inline-size:0}
  .table--stack thead{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%)}
  .table--stack tr{
    display:grid;gap:.35rem;padding:.9rem 0;border-block-end:1px solid var(--line);
  }
  .table--stack td{
    display:grid;grid-template-columns:minmax(90px,auto) minmax(0,1fr);gap:1rem;
    padding:.15rem 0;border:0;align-items:center;
  }
  .table--stack td::before{content:attr(data-th);font-size:var(--fs-2xs);color:var(--fg-3)}
  .table--stack td.num{text-align:start}
}
@media (max-width:420px){
  .stat-grid{grid-template-columns:minmax(0,1fr)}
}