/* Ardana Sentinel — design system aligned with ardana-workflow services/web
   (tokens and component classes mirror the sibling design language). */
:root {
  color-scheme: light;
  --radius: 0.625rem;
  --sidebar-width: 17.5rem;
  --nav-height: 2.75rem;
  --nav-radius: 0.625rem;
  --nav-icon-size: 1.125rem;
  --nav-gap: 0.75rem;
  --brand-navy: 209 62% 16%;
  --brand-teal: 181 47% 33%;
  --primary: oklch(0.511 0.096 186.391);
  --primary-foreground: oklch(0.984 0.014 180.72);
  --background: oklch(0.983 0.003 228.8);
  --foreground: oklch(0.148 0.004 228.8);
  --card: oklch(1 0 0);
  --muted: oklch(0.963 0.002 197.1);
  --muted-foreground: oklch(0.56 0.021 213.5);
  --border: oklch(0.925 0.005 214.3);
  --ring: oklch(0.723 0.014 214.4);
  --destructive: oklch(0.577 0.245 27.325);
  --warning: 20 71% 44%;
  --success: 150 48% 35%;
  --info: 211 61% 43%;
  --success-foreground: 152 81% 22%;
  --warning-foreground: 26 92% 28%;
  --success-muted: 150 60% 92%;
  --warning-muted: 32 100% 90%;
  --surface-2: 210 34% 97%;
  --overlay-scrim: rgb(16 42 67 / 0.28);
  --shadow-soft: -8px 0 24px rgb(16 42 67 / 0.24);
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-heading: "Manrope", Inter, ui-sans-serif, system-ui, sans-serif;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
}

* { box-sizing: border-box; border-color: var(--border); }
html { overflow-x: clip; background: var(--background); font-family: var(--font-sans); }
body { min-height: 100vh; margin: 0; overflow-x: hidden; font-family: var(--font-sans); font-size: 14px; background: var(--background); color: var(--foreground); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--font-heading); font-weight: 600; letter-spacing: -0.02em; overflow-wrap: anywhere; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.5; }
:where(button, input, select, textarea):focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
code { font-size: 0.78rem; color: var(--muted-foreground); overflow-wrap: anywhere; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- App shell ---------- */
.app-shell { display: flex; min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 20; display: flex; width: var(--sidebar-width); flex-direction: column; border-right: 1px solid var(--border); background: var(--card); overflow: hidden; }
.sidebar-primary { min-height: 0; flex: 1; overflow-y: auto; padding: 16px 12px 14px; }
.brand { display: flex; align-items: center; gap: 0.75rem; padding: 0 0 16px; }
.brandmark { display: grid; width: 40px; height: 40px; place-items: center; border-radius: var(--radius); background: var(--primary); color: var(--primary-foreground); font-family: var(--font-heading); font-size: 0.9rem; font-weight: 800; letter-spacing: 0.06em; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ring) 35%, transparent); }
.brand b { display: block; font-family: var(--font-heading); font-size: 1rem; font-weight: 600; }
.brand small { display: block; color: var(--muted-foreground); font-size: 0.8125rem; font-weight: 400; }
.nav-block { border-top: 1px solid var(--border); padding-top: 14px; }
.nav-label { margin: 0 0 12px; padding-left: 1.75rem; color: var(--muted-foreground); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.nav-list { display: grid; gap: 3px; }
.nav-item { display: flex; width: 100%; align-items: center; justify-content: flex-start; gap: var(--nav-gap); border: 1px solid transparent; border-radius: var(--nav-radius); background: transparent; height: var(--nav-height); min-height: var(--nav-height); padding: 0 1.75rem; color: var(--foreground); text-align: left; font-size: 0.9375rem; font-weight: 500; text-decoration: none; transition: background-color 0.18s ease, border-color 0.18s ease; }
.nav-item svg { width: var(--nav-icon-size); height: var(--nav-icon-size); stroke-width: 1.75; flex: none; }
.nav-item:hover { border-color: var(--border); background: var(--muted); text-decoration: none; }
.nav-item.active { background: color-mix(in srgb, var(--primary) 7%, var(--background)); font-weight: 600; }
.nav-item.active svg { color: var(--primary); }
.sidebar-meta { margin-top: auto; border-top: 1px solid var(--border); padding: 12px; }
.sidebar-account { display: flex; align-items: center; gap: 10px; padding: 0 7px; }
.sidebar-account b { display: block; font-size: 0.82rem; }
.sidebar-account small { display: block; color: var(--muted-foreground); font-size: 0.72rem; }
.sidebar-signout { width: 100%; display: flex; align-items: center; gap: 8px; justify-content: flex-start; min-height: 36px; margin-top: 6px; padding: 0 7px; border: 1px solid transparent; border-radius: var(--nav-radius); background: transparent; color: var(--muted-foreground); font-size: 0.8rem; text-decoration: none; }
.sidebar-signout:hover { background: var(--muted); color: var(--foreground); text-decoration: none; }
.app-main { min-width: 0; flex: 1; margin-left: var(--sidebar-width); background: var(--card); }
.topbar { display: flex; min-height: 4.5rem; align-items: center; justify-content: space-between; padding: 0 var(--space-8); gap: var(--space-4); border-bottom: 1px solid var(--border); }
.page-heading h1 { margin: 0.15rem 0 0; font-size: 1.125rem; font-weight: 600; }
.eyebrow { margin: 0; color: var(--muted-foreground); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.identity { display: flex; min-width: 0; align-items: center; gap: 0.7rem; }
.identity .avatar { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 999px; background: color-mix(in srgb, var(--primary) 12%, var(--card)); color: var(--primary); font-family: var(--font-heading); font-weight: 800; }
.identity b { display: block; font-size: 0.94rem; font-weight: 600; }
.identity small { display: block; color: var(--muted-foreground); font-size: 0.76rem; }
.workspace-canvas { min-height: calc(100vh - 4.5rem); background: hsl(var(--surface-2)); }
.page-content { padding: var(--space-6) var(--space-8) 2.5rem; }

/* ---------- Page primitives ---------- */
.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-6); }
.page-header h2 { margin: 0.25rem 0 0.35rem; font-size: 1.8rem; line-height: 1.2; }
.page-header p { margin: 0; color: var(--muted-foreground); font-size: 0.9375rem; line-height: 1.5; }
.page-actions { display: flex; align-items: center; gap: 0.5rem; }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); margin-bottom: var(--space-4); }
.metric-card { min-height: 135px; padding: var(--space-4); border: 1px solid var(--border); border-top: 3px solid var(--border); border-radius: var(--radius); background: var(--card); box-shadow: 0 1px 1px rgb(16 42 67 / .02); }
.metric-success { border-top-color: hsl(var(--success)); }
.metric-info { border-top-color: hsl(var(--info)); }
.metric-warning { border-top-color: hsl(var(--warning)); }
.metric-danger { border-top-color: var(--destructive); }
.metric-card p { margin: 0 0 var(--space-2); color: var(--muted-foreground); font-size: 0.8125rem; }
.metric-card strong { display: block; margin-bottom: 7px; font-family: var(--font-heading); font-size: 28px; letter-spacing: -.05em; }
.metric-card span { color: var(--muted-foreground); font-size: 0.75rem; }

.card { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); box-shadow: 0 1px 1px rgb(16 42 67 / .02); }
.card:not(:has(.card-header)) { padding: var(--space-5); }
.card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding: var(--space-5) var(--space-5) var(--space-3); }
.card-header h2 { margin: 0 0 5px; font-size: 16px; }
.card-header p { margin: 0; color: var(--muted-foreground); font-size: 0.8125rem; line-height: 1.5; }
.card-body { padding: 0 var(--space-5) var(--space-5); }

.badge { display: inline-flex; align-items: center; min-height: 22px; border-radius: 999px; padding: 3px 8px; background: var(--muted); color: var(--muted-foreground); font-size: 0.75rem; font-weight: 600; white-space: nowrap; text-transform: none; }
.badge-success { background: hsl(var(--success-muted)); color: hsl(var(--success-foreground)); }
.badge-warning { background: hsl(var(--warning-muted)); color: hsl(var(--warning-foreground)); }
.badge-danger { background: color-mix(in srgb, var(--destructive) 10%, transparent); color: var(--destructive); }
.badge-info { background: color-mix(in srgb, hsl(var(--info)) 10%, transparent); color: hsl(var(--info)); }

.button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); background: var(--card); padding: var(--space-2) var(--space-3); font-size: 0.875rem; font-weight: 500; white-space: nowrap; text-decoration: none; transition: all .15s; }
.button:hover { text-decoration: none; }
.button-primary { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }
.button-primary:hover { opacity: .9; }
.button-outline:hover { background: var(--muted); }
.full-width { width: 100%; }

.form-row { display: grid; gap: var(--space-1); margin-bottom: var(--space-4); }
.form-row label { color: var(--muted-foreground); font-size: 0.75rem; font-weight: 600; }
input[type="text"], select { width: 100%; min-height: 2.25rem; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); background: var(--card); padding: 0 var(--space-3); color: var(--foreground); font-size: 0.875rem; }
input[type="text"]::placeholder { color: color-mix(in srgb, var(--muted-foreground) 70%, transparent); }
.hint { margin: var(--space-2) 0 0; color: var(--muted-foreground); font-size: 0.75rem; }
.msg { margin: var(--space-3) 0 0; border-radius: calc(var(--radius) - 2px); padding: var(--space-2) var(--space-3); font-size: 0.8125rem; display: none; }
.msg.error { display: block; background: color-mix(in srgb, var(--destructive) 8%, transparent); color: var(--destructive); }
.msg.success { display: block; background: hsl(var(--success-muted)); color: hsl(var(--success-foreground)); }

.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.table-wrap th { padding: var(--space-3) var(--space-4); text-align: left; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted-foreground); border-bottom: 1px solid var(--border); }
.table-wrap td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); }
.table-wrap tr:last-child td { border-bottom: 0; }
.table-wrap tr:hover td { background: var(--muted); }
.table-toolbar { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-3) 0; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.78rem; }

.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-8) var(--space-6); text-align: center; }
.empty-state h3 { margin: 0; font-size: 1.125rem; }
.empty-state p { margin: 0; color: var(--muted-foreground); font-size: 0.875rem; max-width: 24rem; line-height: 1.5; }
.empty-state svg { width: 28px; height: 28px; stroke-width: 1.5; color: var(--muted-foreground); }

.back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--primary); font-size: 0.75rem; font-weight: 600; text-decoration: none; }
.back-link:hover { text-decoration: underline; }

.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--space-4); }
.detail-list { margin: 0; }
.detail-list dt { color: var(--muted-foreground); font-size: 0.6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.detail-list dd { margin: 3px 0 0; font-size: 0.875rem; overflow-wrap: anywhere; }
.detail-card { min-height: 84px; }

.timeline { margin: 0; padding: 0 var(--space-5) var(--space-5) var(--space-6); list-style: none; }
.timeline li { position: relative; display: grid; grid-template-columns: 170px 1fr; gap: var(--space-3); min-height: 42px; border-left: 1px solid var(--border); padding: 0 0 var(--space-4) var(--space-4); color: var(--muted-foreground); font-size: 0.75rem; }
.timeline li::before { position: absolute; top: 2px; left: -4px; width: 7px; height: 7px; border-radius: 50%; background: var(--primary); content: ""; }
.timeline li:last-child { border-left-color: transparent; }
.timeline time { color: var(--muted-foreground); }

details.raw-output { border-top: 1px solid var(--border); }
details.raw-output summary { padding: var(--space-4) var(--space-5); color: var(--muted-foreground); font-size: 0.8125rem; font-weight: 600; cursor: pointer; }
details.raw-output summary:hover { color: var(--foreground); }
details.raw-output pre { max-height: 22rem; overflow: auto; margin: 0; border-top: 1px solid var(--border); padding: var(--space-4) var(--space-5); background: hsl(var(--surface-2)); white-space: pre-wrap; word-break: break-word; font-size: 0.72rem; color: var(--muted-foreground); }

.spinner { display: inline-block; width: 0.85rem; height: 0.85rem; border: 2px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: spin .8s linear infinite; vertical-align: -2px; }

/* ---------- Auth landing ---------- */
.auth-screen { display: grid; min-height: 100vh; place-items: center; padding: 24px; background: var(--background); }
.auth-screen section { width: min(100%, 440px); padding: 32px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); box-shadow: 0 1px 1px rgb(16 42 67 / .04); }
.auth-screen .brand { padding-bottom: 12px; }
.auth-screen h1 { margin: 0 0 8px; }
.auth-screen p { margin: 0; color: var(--muted-foreground); font-size: 0.875rem; line-height: 1.5; }

@keyframes spin { to { transform: rotate(1turn); } }
@media (max-width: 1000px) {
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .app-shell { display: block; }
  .sidebar { display: none; }
  .app-main { margin-left: 0; }
  .topbar { min-height: 3.5rem; padding: 0 var(--space-4); }
  .identity { display: none; }
  .page-content { padding: var(--space-5) var(--space-4); }
  .page-header { display: block; }
  .page-actions { margin-top: 16px; }
  .timeline li { grid-template-columns: 1fr; gap: var(--space-1); }
}
@media (max-width: 480px) {
  .metric-grid { grid-template-columns: 1fr; }
  .page-content { padding: var(--space-4) var(--space-3); }
}