/* Zyaro Light Enterprise — CSS port of the zyaro-dashboard design system.
 *
 * Values are lifted from zyaro-dashboard/src/index.css (HSL tokens resolved to hex) and its
 * Tailwind component classes, so this app renders the same as the dashboard without pulling in
 * React/Tailwind. Class names mirror the dashboard's .ds-* utilities where they exist.
 *
 * Light theme only. No dark surfaces except the deliberate brand-dark marketing band. */

:root {
  --background: #ffffff;
  --foreground: #020817;
  --card: #ffffff;
  --card-foreground: #020817;

  --primary: #141414;          /* default Button background */
  --primary-foreground: #ffffff;

  --secondary: #f1f5f9;
  --secondary-foreground: #0f172a;
  --muted: #f1f5f9;
  --muted-foreground: #64748b;
  --accent: #f1f5f9;
  --accent-foreground: #0f172a;

  --border: #dadadb;
  --input: #dadadb;
  --ring: #020817;

  --destructive: #ef4444;
  --destructive-foreground: #ffffff;

  --success: #059669;
  --success-surface: #d1fae5;
  --warning: #d97706;
  --warning-surface: #fef3c7;
  --error: #dc2626;
  --error-surface: #fee2e2;

  /* app chrome — the only sanctioned literal surfaces in the dashboard */
  --sidebar: #f9f8f6;
  --sidebar-active: #efede5;
  --navbar: #fefeff;
  --table-head: #f8f7f6;

  --brand-dark: #0a0e1a;
  --brand-electric: #2563eb;

  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 9999px;
  --radius-dialog: 32px;

  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);

  --sidebar-w: 224px;   /* w-56 */
  --navbar-h: 56px;     /* h-14 */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* The dashboard strips outlines globally, so every interactive element below re-adds an explicit
   focus ring. Anything new must do the same or it has no visible focus state at all. */
*:focus-visible { outline: none; }

.ds-ring:focus-visible,
.ds-btn:focus-visible,
.ds-input:focus-visible,
.ds-textarea:focus-visible,
.ds-nav-item:focus-visible,
.ds-checkbox:focus-visible,
.ds-link:focus-visible,
.ds-tab:focus-visible,
.ds-row-link:focus-visible {
  box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring);
}

/* ---------------------------------------------------------------- app shell */

.ds-sidebar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--sidebar-w);
  z-index: 50;
  display: flex;
  flex-direction: column;
  background: var(--sidebar);
  border-right: 1px solid rgb(0 0 0 / 0.05);
  color: #0f172a;
}

.ds-sidebar-brand {
  min-height: var(--navbar-h);
  display: flex;
  align-items: center;
  padding: 16px;
}
.ds-sidebar-brand img { height: 32px; width: auto; object-fit: contain; }

.ds-sidebar-nav { flex: 1; overflow-y: auto; padding: 12px 0; }
.ds-sidebar-foot { padding: 12px; border-top: 1px solid rgb(0 0 0 / 0.05); }

.ds-nav-section { margin-bottom: 16px; }
.ds-nav-section-label {
  padding: 0 16px;
  margin-bottom: 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #94a3b8;
}
.ds-nav-items { padding: 0 12px; display: flex; flex-direction: column; gap: 2px; }

.ds-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 32px;
  padding: 0 12px;
  border: none;
  border-radius: var(--radius-full);
  background: transparent;
  color: #64748b;
  font: inherit;
  font-size: 13px;
  font-weight: 400;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.ds-nav-item:hover { background: rgb(0 0 0 / 0.05); color: #0f172a; }
.ds-nav-item.active {
  background: var(--sidebar-active);
  color: #0f172a;
  font-weight: 500;
}
.ds-nav-item svg { width: 15px; height: 15px; flex-shrink: 0; }

.ds-navbar {
  position: fixed;
  top: 0;
  right: 0;
  left: var(--sidebar-w);
  height: var(--navbar-h);
  z-index: 40;
  background: var(--navbar);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px;
}
.ds-navbar-title {
  font-size: 16px;
  font-weight: 700;
  color: #333333;
  min-width: 0;
}
.ds-navbar-actions { display: flex; align-items: center; gap: 8px; }

.ds-main { margin-left: var(--sidebar-w); padding-top: var(--navbar-h); }
.ds-main-content {
  min-height: calc(100vh - var(--navbar-h));
  display: flex;
  flex-direction: column;
  padding: 16px;
  background: var(--background);
}
@media (min-width: 768px) { .ds-main-content { padding: 24px 16px; } }

.ds-page-shell { width: 100%; flex: 1; display: flex; flex-direction: column; }
.ds-page-stack > * + * { margin-top: 16px; }

.ds-content-sm { max-width: 768px; }
.ds-content-md { max-width: 1024px; }
.ds-content-lg { max-width: 1280px; }

/* Below md the sidebar unpins into a top strip; nothing about the desktop layout changes. */
@media (max-width: 767px) {
  .ds-sidebar {
    position: static;
    width: 100%;
    flex-direction: column;
    border-right: none;
    border-bottom: 1px solid rgb(0 0 0 / 0.05);
  }
  .ds-sidebar-nav { padding: 8px 0; }
  .ds-nav-items { flex-direction: row; flex-wrap: wrap; }
  .ds-navbar { position: static; left: 0; }
  .ds-main { margin-left: 0; padding-top: 0; }
}

/* ---------------------------------------------------------------- typography */

.ds-section-header { font-size: 20px; font-weight: 600; line-height: 1.3; margin: 0; }
.ds-subsection { font-size: 16px; font-weight: 600; line-height: 1.4; margin: 0; }
.ds-body { font-size: 14px; }
.ds-muted { color: var(--muted-foreground); }
.ds-small { font-size: 12px; }
.ds-label { font-size: 14px; font-weight: 600; color: #334155; }
.ds-caps-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted-foreground);
  margin: 0;
}
.ds-mono { font-family: ui-monospace, monospace; }

.ds-link { color: var(--foreground); font-weight: 600; text-decoration: none; border-radius: var(--radius-md); }
.ds-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------------- buttons */

.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 36px;
  padding: 0 16px;
  border: none;
  border-radius: var(--radius-full);
  background: var(--primary);
  color: var(--primary-foreground);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.ds-btn:hover:not(:disabled) { background: #232323; }
.ds-btn:disabled { opacity: 0.5; pointer-events: none; }

.ds-btn-outline {
  border: 1px solid var(--input);
  background: var(--background);
  color: var(--foreground);
  box-shadow: var(--shadow-sm);
}
.ds-btn-outline:hover:not(:disabled) { background: var(--accent); color: var(--accent-foreground); }

.ds-btn-ghost { background: transparent; color: var(--foreground); }
.ds-btn-ghost:hover:not(:disabled) { background: var(--accent); color: var(--accent-foreground); }

.ds-btn-destructive { background: var(--destructive); color: var(--destructive-foreground); box-shadow: var(--shadow-sm); }
.ds-btn-destructive:hover:not(:disabled) { background: #e03131; }

.ds-btn-sm { height: 32px; padding: 0 12px; font-size: 12px; }
.ds-btn-lg { height: 40px; padding: 0 32px; }
.ds-btn-block { width: 100%; }

/* ---------------------------------------------------------------- forms */

.ds-input,
.ds-textarea {
  width: 100%;
  border: 1px solid var(--input);
  border-radius: var(--radius-xl);
  background: var(--card);
  color: var(--foreground);
  font: inherit;
  font-size: 14px;
}
.ds-input { height: 44px; padding: 0 14px; }
.ds-textarea { min-height: 80px; padding: 10px 14px; line-height: 1.5; resize: vertical; }
.ds-input::placeholder,
.ds-textarea::placeholder { color: var(--muted-foreground); }
.ds-input:disabled,
.ds-textarea:disabled { opacity: 0.5; cursor: not-allowed; }
.ds-input[aria-invalid="true"],
.ds-textarea[aria-invalid="true"] { border-color: #ef4444; }

.ds-checkbox {
  width: 16px;
  height: 16px;
  margin: 0;
  border-radius: var(--radius-md);
  accent-color: var(--primary);
  cursor: pointer;
}
.ds-checkbox:disabled { opacity: 0.5; cursor: not-allowed; }

.ds-field { display: flex; flex-direction: column; gap: 6px; }
.ds-row { display: flex; gap: 8px; align-items: center; }

/* ---------------------------------------------------------------- surfaces */

.ds-panel,
.ds-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--card);
  box-shadow: var(--shadow-sm);
}
.ds-card { padding: 16px; }
.ds-card-title { font-size: 14px; font-weight: 600; margin: 0 0 8px; }

.ds-inline-stat {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--card);
  padding: 12px 20px;
  font-size: 12px;
  color: var(--muted-foreground);
}

.ds-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 32px 16px;
  text-align: center;
  color: var(--muted-foreground);
  font-size: 13px;
}
.ds-empty strong { color: var(--foreground); font-size: 14px; }
.ds-empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 4px;
  border-radius: var(--radius-full);
  background: var(--muted);
  color: var(--muted-foreground);
}
.ds-empty-icon svg { width: 18px; height: 18px; }

/* ---------------------------------------------------------------- stats */

.ds-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.ds-stat {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--card);
  box-shadow: var(--shadow-sm);
  padding: 14px 16px;
}
.ds-stat-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted-foreground);
}
.ds-stat-value {
  margin-top: 4px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.ds-stat-hint { margin-top: 2px; font-size: 12px; color: var(--muted-foreground); }

/* Monogram avatar — same 32px round chip the dashboard uses for people/orgs. */
.ds-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--sidebar-active);
  border: 1px solid rgb(0 0 0 / 0.05);
  color: #475569;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.ds-num { font-variant-numeric: tabular-nums; }
.ds-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.ds-align-right { text-align: right; }
.ds-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px; }

/* Editor/preview split — one column until there is room for two. */
.ds-split { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 1100px) { .ds-split { grid-template-columns: 1fr 1fr; } }

/* ---------------------------------------------------------------- table */

.ds-table-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--card);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.ds-table-wrap { overflow-x: auto; }
.ds-table { width: 100%; text-align: left; border-collapse: collapse; }
.ds-table-head { background: var(--table-head); border-bottom: 1px solid var(--border); }
.ds-table-head-cell {
  padding: 12px 16px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted-foreground);
  white-space: nowrap;
}
.ds-table-row { border-bottom: 1px solid var(--border); transition: background-color 0.15s; }
.ds-table-row:last-child { border-bottom: none; }
.ds-table-row:hover { background: var(--accent); }
.ds-table-cell { padding: 12px 16px; font-size: 14px; vertical-align: top; }

/* ---------------------------------------------------------------- badges & status */

.ds-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: var(--radius-full);
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 600;
  background: var(--muted);
  color: var(--secondary-foreground);
}
.ds-badge-success { background: var(--success-surface); color: var(--success); }
.ds-badge-warning { background: var(--warning-surface); color: var(--warning); }
.ds-badge-error { background: var(--error-surface); color: var(--error); }

.ds-status { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted-foreground); }
.ds-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.ds-status-good { color: var(--success); }
.ds-status-bad { color: var(--error); }
.ds-status-warn { color: var(--warning); }

/* ---------------------------------------------------------------- loading */

.ds-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .ds-spinner { animation: ds-spin 0.7s linear infinite; }
}
@keyframes ds-spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- dialog */

.ds-dialog {
  border: none;
  border-radius: var(--radius-dialog);
  background: var(--card);
  color: var(--foreground);
  box-shadow: var(--shadow-2xl);
  padding: 0;
  max-width: 512px;
  width: calc(100% - 32px);
}
.ds-dialog::backdrop { background: rgb(2 8 23 / 0.5); }
.ds-dialog-header { padding: 32px 32px 8px; }
.ds-dialog-title { font-size: 20px; font-weight: 600; margin: 0; }
.ds-dialog-body { padding: 8px 32px 0; font-size: 14px; color: var(--muted-foreground); }
.ds-dialog-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 24px 32px 32px; }

/* ---------------------------------------------------------------- tabs */

.ds-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.ds-tab {
  height: 32px;
  padding: 0 14px;
  border: 1px solid var(--input);
  border-radius: var(--radius-full);
  background: var(--background);
  color: var(--muted-foreground);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
/* Buttons are buttons whether they're <button> or <a> — an anchor's default underline would
   otherwise show through the pill. */
.ds-btn { text-decoration: none; }

.ds-tab:hover { background: var(--accent); color: var(--accent-foreground); }
.ds-tab.active { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }

/* Count parked at the trailing edge of a tab. No own colour — it borrows the tab's, so it stays
   legible on both the dark active pill and the quiet rail row. */
.ds-tab-count { margin-left: auto; padding-left: 8px; font-size: 12px; font-weight: 600; opacity: 0.55; font-variant-numeric: tabular-nums; }

/* Side rail variant: the tablist becomes an inset track in a left column and the tabs are rows
   inside it — the selected row is the one lifted white surface, so the group reads as one control
   instead of three stacked primary buttons. Below 900px it folds back into the horizontal pill
   row so the rail doesn't eat the viewport. */
.ds-tabview { display: grid; gap: 16px; grid-template-columns: 1fr; align-items: start; }
.ds-tabview > .ds-tabs > .ds-tab { display: inline-flex; align-items: center; }
@media (min-width: 900px) {
  .ds-tabview { grid-template-columns: 204px minmax(0, 1fr); gap: 20px; }
  .ds-tabview > .ds-tabs {
    position: sticky;
    top: calc(var(--navbar-h) + 16px);
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 4px;
    padding: 4px;
    border-radius: var(--radius-lg);
    background: var(--accent);
  }
  .ds-tabview > .ds-tabs > .ds-tab {
    display: flex;
    height: 34px;
    padding: 0 10px;
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--muted-foreground);
    font-size: 13px;
    font-weight: 500;
    text-align: left;
  }
  .ds-tabview > .ds-tabs > .ds-tab:hover { background: rgb(0 0 0 / 0.04); color: var(--foreground); }
  .ds-tabview > .ds-tabs > .ds-tab.active {
    background: var(--card);
    box-shadow: var(--shadow-sm);
    color: var(--foreground);
    font-weight: 600;
  }
  /* On the grey track the count reads as a chip; on the lifted white active row it flips to the
     track colour so it stays visible. */
  .ds-tabview > .ds-tabs > .ds-tab > .ds-tab-count {
    padding: 1px 7px;
    border-radius: var(--radius-full);
    background: var(--card);
    opacity: 1;
    font-weight: 500;
  }
  .ds-tabview > .ds-tabs > .ds-tab.active > .ds-tab-count { background: var(--accent); }
}

/* Quiet variant: reference numbers that belong on the page but should not compete with the
   primary task (e.g. spend totals parked under a list). */
.ds-stat-quiet .ds-stat { background: transparent; border: none; box-shadow: none; padding: 8px 0; }
.ds-stat-quiet .ds-stat-value { font-size: 16px; font-weight: 600; color: var(--muted-foreground); }

/* A jumped-to or deep-linked heading must clear the fixed navbar. */
.ds-md :is(h1, h2, h3, h4) { scroll-margin-top: calc(var(--navbar-h) + 16px); }

/* Progress stepper. The pipeline streams steps as it goes, so the list grows: the newest step
   spins, everything above it is settled. Icons are a fixed 16px column so the labels stay
   aligned as a step swaps its spinner for a result mark. */
.ds-steps { display: flex; flex-direction: column; gap: 2px; }
.ds-step { display: flex; align-items: flex-start; gap: 10px; padding: 5px 0; font-size: 13px; line-height: 1.5; color: var(--muted-foreground); }
.ds-step-icon { display: flex; align-items: center; justify-content: center; width: 16px; height: 20px; flex-shrink: 0; }
.ds-step-icon svg { width: 14px; height: 14px; }
.ds-step-running { color: var(--foreground); font-weight: 600; }
.ds-step-running .ds-step-icon { color: var(--muted-foreground); }
.ds-step-done .ds-step-icon { color: var(--success); }
.ds-step-bad { color: var(--error); }
.ds-step-bad .ds-step-icon { color: var(--error); }

/* Rendered markdown (model research output, prompt previews). Model output is arbitrary, so
   every element it can emit needs a rule — an unstyled h1 or table reads as a broken page. */
.ds-md { font-size: 14px; line-height: 1.65; color: var(--foreground); overflow-wrap: anywhere; }
.ds-md > :first-child { margin-top: 0; }
.ds-md > :last-child { margin-bottom: 0; }
.ds-md h1, .ds-md h2, .ds-md h3, .ds-md h4 { margin: 20px 0 8px; font-weight: 600; line-height: 1.35; }
.ds-md h1 { font-size: 16px; }
.ds-md h2 { font-size: 14px; }
.ds-md h3, .ds-md h4 { font-size: 13px; color: var(--muted-foreground); text-transform: uppercase; letter-spacing: 0.05em; }
.ds-md p { margin: 0 0 10px; }
.ds-md ul, .ds-md ol { margin: 0 0 10px; padding-left: 20px; }
.ds-md li { margin: 3px 0; }
.ds-md li > ul, .ds-md li > ol { margin: 3px 0; }
.ds-md strong { font-weight: 600; }
.ds-md a { color: var(--foreground); font-weight: 600; }
.ds-md hr { margin: 16px 0; border: none; border-top: 1px solid var(--border); }
.ds-md code { background: var(--muted); padding: 1px 4px; border-radius: var(--radius-md); font-family: ui-monospace, monospace; font-size: 12px; }
.ds-md pre { background: var(--muted); padding: 10px 12px; border-radius: var(--radius-lg); overflow-x: auto; }
.ds-md pre code { background: none; padding: 0; }
.ds-md blockquote { margin: 0 0 10px; padding-left: 12px; border-left: 2px solid var(--border); color: var(--muted-foreground); }
.ds-md table { border-collapse: collapse; width: 100%; margin: 8px 0; }
.ds-md th, .ds-md td { border: 1px solid var(--border); padding: 6px 8px; font-size: 12px; text-align: left; }
.ds-md th { background: var(--table-head); white-space: nowrap; }