/* ARO Print Management — brand tokens for spec mockups (spec 1.5).
   Source: ARO brand guidelines (aro-branding). The Filament theme uses the same values. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Newsreader:ital,wght@0,400;0,500;1,400&family=JetBrains+Mono:wght@400&display=swap');

:root {
  --aro-navy: #001871;
  --aro-navy-2: #2040A0;
  --aro-cyan: #00A3E0;
  --aro-teal: #00C19F;
  --aro-gray-dark: #53565A;
  --aro-gray-light: #A7A8AA;
  --aro-cyan-tint: #D9EEF9;
  --aro-tennis: #DCE21B;

  --surface: #FFFFFF;
  --surface-alt: #F5F5F5;
  --border: #E3E4E6;
  --text: #53565A;
  --text-strong: #001871;
  --text-muted: #8A8C8F;

  --ok-bg: #D9F5EE;  --ok-fg: #085041;
  --info-bg: #D9EEF9; --info-fg: #001871;
  --warn-bg: #FAEEDA; --warn-fg: #633806;
  --bad-bg: #FCEBEB;  --bad-fg: #791F1F;
  --neutral-bg: #EEF0F3; --neutral-fg: #53565A;

  --radius: 8px;
  --radius-card: 12px;
  --font-sans: 'Inter', 'Aptos', 'Segoe UI', system-ui, sans-serif;
  --font-serif: 'Newsreader', Georgia, serif;
  --font-mono: 'JetBrains Mono', Consolas, ui-monospace, monospace;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-sans); font-size: 14px; line-height: 1.5; color: var(--text); background: var(--surface-alt); }
h1, .h1 { font-family: var(--font-serif); font-weight: 400; font-size: 28px; color: var(--text-strong); margin: 0; }
h2, .h2 { font-family: var(--font-serif); font-weight: 400; font-size: 20px; color: var(--text-strong); margin: 0 0 8px; }
h3, .h3 { font-size: 14px; font-weight: 600; color: var(--text-strong); margin: 0 0 6px; }
a { color: var(--aro-navy); }
.mono { font-family: var(--font-mono); font-size: 12px; }
.muted { color: var(--text-muted); }
.small { font-size: 12px; }

/* App shell */
.shell { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 100vh; }
.sidebar { background: var(--aro-navy); color: #fff; padding: 18px 14px; display: flex; flex-direction: column; gap: 2px; }
.brand { margin-bottom: 22px; }
.brand img { height: 30px; width: auto; display: block; }         /* logo: height set, width auto (3.187:1) */
.brand .wordmark { font-family: var(--font-serif); font-size: 28px; letter-spacing: 1px; line-height: 1; }
.brand .product { font-size: 12px; color: var(--aro-cyan); margin-top: 4px; }
.nav-group { font-size: 11px; text-transform: none; color: rgba(255,255,255,.55); margin: 14px 8px 4px; }
.nav a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius); color: rgba(255,255,255,.88); text-decoration: none; }
.nav a.active { background: rgba(255,255,255,.14); color: #fff; }
.nav a .count { margin-left: auto; background: var(--aro-teal); color: var(--aro-navy); border-radius: 6px; padding: 0 6px; font-size: 11px; font-weight: 600; }
.sidebar .me { margin-top: auto; border-top: 1px solid rgba(255,255,255,.15); padding-top: 12px; font-size: 12px; color: rgba(255,255,255,.75); }
.main { padding: 22px 28px; min-width: 0; }
.topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; gap: 12px; }
.crumbs { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }

/* Components */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 16px 18px; }
.btn { font: inherit; font-size: 13px; padding: 7px 14px; border-radius: var(--radius); border: 1px solid var(--aro-navy); background: #fff; color: var(--aro-navy); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.btn.primary { background: var(--aro-navy); color: #fff; }
.btn.accent { background: var(--aro-teal); border-color: var(--aro-teal); color: var(--aro-navy); }
.btn.ghost { border-color: transparent; }
.btn.danger { border-color: #A32D2D; color: #A32D2D; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.input, select.input { font: inherit; font-size: 13px; padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; color: var(--text-strong); width: 100%; }
.input:focus { outline: 2px solid var(--aro-cyan); outline-offset: 0; }
label.lbl { display: block; font-size: 12px; color: var(--text); margin-bottom: 4px; }
.help { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.err { font-size: 12px; color: #A32D2D; margin-top: 4px; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 12px; white-space: nowrap; }
.b-ok { background: var(--ok-bg); color: var(--ok-fg); }
.b-info { background: var(--info-bg); color: var(--info-fg); }
.b-warn { background: var(--warn-bg); color: var(--warn-fg); }
.b-bad { background: var(--bad-bg); color: var(--bad-fg); }
.b-neutral { background: var(--neutral-bg); color: var(--neutral-fg); }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th { text-align: left; font-weight: 500; font-size: 12px; color: var(--text-muted); padding: 8px 10px; border-bottom: 1px solid var(--border); }
.tbl td { padding: 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.tbl tr:hover td { background: #FAFBFC; }
.stat { background: var(--aro-cyan-tint); border-radius: var(--radius); padding: 10px 12px; }
.stat .k { font-size: 12px; }
.stat .v { font-size: 22px; font-weight: 600; color: var(--aro-navy); }
.toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.toolbar .input { max-width: 280px; }
.banner { border-radius: var(--radius); padding: 10px 12px; font-size: 13px; display: flex; gap: 10px; align-items: flex-start; }
.empty { text-align: center; padding: 36px 16px; }
.empty .h2 { margin-bottom: 4px; }
.modal-backdrop { background: rgba(0,24,113,.35); padding: 40px; display: flex; justify-content: center; }
.modal { background: #fff; border-radius: var(--radius-card); width: 460px; padding: 20px 22px; }
.note { font-size: 12px; color: var(--text-muted); border-top: 1px dashed var(--border); margin-top: 22px; padding-top: 10px; }

/* Dark mode (spec 1.5 §4a). Toggle with <html data-theme="dark">; the app follows the OS setting by default. */
[data-theme="dark"] {
  --surface: #0E1430;
  --surface-alt: #070B1F;
  --border: #26305A;
  --text: #C9CDD6;
  --text-strong: #FFFFFF;
  --text-muted: #8C93A8;
  --aro-cyan-tint: #12224F;
  --ok-bg: #0B3B33;  --ok-fg: #9FE1CB;
  --info-bg: #12224F; --info-fg: #B5D4F4;
  --warn-bg: #3D2A08; --warn-fg: #FAC775;
  --bad-bg: #4A1414;  --bad-fg: #F7C1C1;
  --neutral-bg: #232A44; --neutral-fg: #C9CDD6;
}
[data-theme="dark"] .sidebar { background: #000C3D; border-right: 1px solid var(--border); }
[data-theme="dark"] a { color: #7CCBF0; }
[data-theme="dark"] .btn { background: transparent; color: #FFFFFF; border-color: #7CCBF0; }
[data-theme="dark"] .btn.primary { background: var(--aro-cyan); border-color: var(--aro-cyan); color: #001871; }
[data-theme="dark"] .btn.accent { background: var(--aro-teal); border-color: var(--aro-teal); color: #001871; }
[data-theme="dark"] .btn.ghost { border-color: transparent; }
[data-theme="dark"] .btn.danger { border-color: #F09595; color: #F7C1C1; }
[data-theme="dark"] .input, [data-theme="dark"] select.input { background: #0A1028; color: #FFFFFF; border-color: var(--border); }
[data-theme="dark"] .tbl tr:hover td { background: #141B3D; }
[data-theme="dark"] .stat .v { color: #FFFFFF; }
[data-theme="dark"] .modal { background: var(--surface); }