/* Aria shared style base. Loaded by every new page. v2: grouped sidebar,
   skeletons, focus rings, custom modal, refined empty states, motion. */

:root{
  --air-blue:#004aad;--air-blue-deep:#003580;--air-blue-soft:#e8efff;
  --air-cyan:#29b6f6;--air-cyan-soft:#e1f5fe;
  --aria-coral:#ff8a5b;--aria-coral-soft:#ffe6d9;
  --success:#10b981;--success-soft:#d1fae5;
  --warning:#f59e0b;--warning-soft:#fef3c7;
  --danger:#ef4444;--danger-soft:#fee2e2;
  --bg:#f6f7fb;--surface:#ffffff;--surface-alt:#fafbfd;--surface-sunken:#f1f4f9;
  --nav-bg:#0a1837;--nav-bg-elev:#142450;--nav-text:#b8c2db;
  --nav-text-strong:#fff;--nav-text-subtle:#6b7896;
  --nav-active-bg:rgba(41,182,246,0.14);--nav-active-text:#29b6f6;
  --nav-border:rgba(255,255,255,0.07);
  --text:#0a1837;--text-muted:#5a6b89;--text-subtle:#8b9ab1;
  --border:#e5e9f2;--border-strong:#d0d7e4;
  --r-sm:8px;--r:12px;--r-md:14px;--r-pill:100px;
  --t-fast:0.12s cubic-bezier(0.4,0,0.2,1);
  --t-med:0.22s cubic-bezier(0.4,0,0.2,1);
  --focus:0 0 0 3px rgba(41,182,246,0.35);
  --shadow-xs:0 1px 2px rgba(10,24,55,0.04);
  --shadow-sm:0 2px 6px rgba(10,24,55,0.06);
  --shadow:0 4px 16px rgba(10,24,55,0.08);

  /* ============ TYPOGRAPHY SCALE (audited) ============
     A single Perfect-Fourth-ish ladder. Use these tokens, not raw px values.
     Body is 14.5px to match dense-data SaaS norms while staying readable. */
  --fz-micro:10.5px;    /* badges, status pills */
  --fz-eyebrow:11px;    /* uppercase eyebrows above titles */
  --fz-meta:12px;       /* metadata, captions, hints */
  --fz-label:12.5px;    /* form labels */
  --fz-body:14px;       /* default body and inputs */
  --fz-body-lg:14.5px;  /* slightly larger reading body */
  --fz-h4:15px;         /* card titles */
  --fz-h3:17px;         /* section titles */
  --fz-h2:20px;         /* page subsection titles */
  --fz-h1:24px;         /* page titles */
  --fz-display:28px;    /* hero / role titles */

  /* Line heights - tight for headings, body for UI, prose for long-form */
  --lh-tight:1.2;
  --lh-snug:1.35;
  --lh-body:1.5;
  --lh-prose:1.7;

  /* Letter-spacing - negative for big headings, positive for uppercase eyebrows */
  --ls-display:-0.6px;
  --ls-h1:-0.4px;
  --ls-h2:-0.3px;
  --ls-eyebrow:0.6px;
  --ls-uppercase:0.5px;

  /* ============ SPACING SCALE (4px grid) ============
     Every padding/margin in the app should land on one of these. */
  --s-1:4px;
  --s-2:8px;
  --s-3:12px;
  --s-4:16px;
  --s-5:20px;
  --s-6:24px;
  --s-7:32px;
  --s-8:40px;
  --s-9:56px;
  --s-10:72px;
}

/* ============ TYPE UTILITIES ============
   Drop-in classes any page can use without redefining sizes inline. */
.h1{font-size:var(--fz-h1);font-weight:700;letter-spacing:var(--ls-h1);line-height:var(--lh-tight);color:var(--text)}
.h2{font-size:var(--fz-h2);font-weight:700;letter-spacing:var(--ls-h2);line-height:var(--lh-snug);color:var(--text)}
.h3{font-size:var(--fz-h3);font-weight:700;line-height:var(--lh-snug);color:var(--text)}
.h4{font-size:var(--fz-h4);font-weight:700;line-height:var(--lh-snug);color:var(--text)}
.eyebrow{font-size:var(--fz-eyebrow);font-weight:700;text-transform:uppercase;letter-spacing:var(--ls-eyebrow);color:var(--text-subtle)}
.meta{font-size:var(--fz-meta);color:var(--text-muted);line-height:var(--lh-body)}
.muted{color:var(--text-muted)}
.subtle{color:var(--text-subtle)}
.prose{font-size:var(--fz-body-lg);line-height:var(--lh-prose);max-width:64ch}

/* Vertical rhythm helpers, mirrors the spacing scale */
.stack-1>*+*{margin-top:var(--s-1)}
.stack-2>*+*{margin-top:var(--s-2)}
.stack-3>*+*{margin-top:var(--s-3)}
.stack-4>*+*{margin-top:var(--s-4)}
.stack-5>*+*{margin-top:var(--s-5)}
.stack-6>*+*{margin-top:var(--s-6)}

*{box-sizing:border-box;margin:0;padding:0}
html,body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif;
  color:var(--text);background:var(--bg);
  font-size:var(--fz-body);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
button,a{font-family:inherit;cursor:pointer;color:inherit;text-decoration:none}
button{border:none;background:none}

/* Global focus ring (a11y) */
*:focus-visible{outline:none;box-shadow:var(--focus);border-radius:var(--r-sm)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:none;box-shadow:var(--focus);
}

/* Skip-to-content link for keyboard users */
.skip-link{
  position:absolute;top:-100px;left:0;background:var(--air-blue);color:#fff;
  padding:10px 16px;z-index:1000;font-weight:600;text-decoration:none;
  border-radius:0 0 var(--r-sm) 0;
}
.skip-link:focus{top:0}

/* Layout */
.app{display:grid;grid-template-columns:248px 1fr;min-height:100vh}

/* ============ SIDEBAR ============ */
.sidebar{
  background:var(--nav-bg);color:var(--nav-text);
  padding:18px 12px 14px;display:flex;flex-direction:column;gap:2px;
  position:sticky;top:0;height:100vh;
  border-right:1px solid var(--nav-border);
  overflow-y:auto;
}
.sidebar::-webkit-scrollbar{width:6px}
.sidebar::-webkit-scrollbar-track{background:transparent}
.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.08);border-radius:3px}

.logo{display:flex;align-items:center;gap:12px;padding:4px 8px 14px;text-decoration:none}
.logo-mark{width:40px;height:40px;border-radius:10px;flex-shrink:0;display:block}
.logo-text{font-size:22px;font-weight:800;letter-spacing:-0.5px;color:var(--nav-text-strong)}
.logo-text .i{color:var(--air-cyan)}

.user-card{
  display:flex;align-items:center;gap:10px;padding:10px 12px;
  border:1px solid var(--nav-border);background:var(--nav-bg-elev);
  border-radius:var(--r-sm);margin:0 0 14px;
}
.user-avatar{
  width:32px;height:32px;border-radius:50%;
  background:linear-gradient(135deg,var(--air-cyan),var(--air-blue));
  color:white;display:grid;place-items:center;font-weight:700;font-size:12px;
  flex-shrink:0;
}
.user-info{min-width:0;overflow:hidden}
.user-name{font-size:13px;font-weight:600;color:var(--nav-text-strong);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
.user-role{font-size:11px;color:var(--nav-text-subtle)}

.nav-group{margin-bottom:4px}
.nav-label{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.9px;
  color:var(--nav-text-subtle);padding:12px 10px 6px;cursor:pointer;
  background:transparent;border:0;font-family:inherit;
}
.nav-label .chev{
  width:14px;height:14px;transition:transform var(--t-fast);opacity:0.7;
}
.nav-group.collapsed .chev{transform:rotate(-90deg)}
.nav-group.collapsed .nav-group-items{display:none}

.nav-item{
  display:flex;align-items:center;gap:11px;padding:8px 10px;
  border-radius:var(--r-sm);color:var(--nav-text);font-weight:500;font-size:13.5px;
  transition:background var(--t-fast),color var(--t-fast);
}
.nav-item:hover{background:rgba(255,255,255,0.04);color:var(--nav-text-strong)}
.nav-item.active{background:var(--nav-active-bg);color:var(--nav-active-text);font-weight:600}
.nav-item .icon{width:17px;height:17px;flex-shrink:0;opacity:0.9}
.nav-item.active .icon{opacity:1}
.nav-item-label{flex:1;min-width:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
.nav-item .badge{
  background:var(--aria-coral);color:white;font-size:10px;font-weight:700;
  padding:2px 7px;border-radius:var(--r-pill);min-width:18px;text-align:center;
}

.sidebar-footer{
  margin-top:auto;padding-top:14px;border-top:1px solid var(--nav-border);
}
.footer-link{
  display:flex;align-items:center;gap:8px;padding:8px 10px;
  color:var(--nav-text-subtle);font-size:13px;width:100%;text-align:left;
  border-radius:var(--r-sm);transition:color var(--t-fast),background var(--t-fast);
}
.footer-link:hover{color:var(--nav-text-strong);background:rgba(255,255,255,0.04)}
.footer-link svg{width:16px;height:16px}

/* ============ MAIN AREA ============ */
.main{padding:var(--s-6) var(--s-7) var(--s-9);max-width:1500px}
.page-title{
  font-size:var(--fz-h1);font-weight:700;letter-spacing:var(--ls-h1);
  line-height:var(--lh-tight);margin-bottom:var(--s-1);color:var(--text);
}
.page-meta{
  color:var(--text-muted);margin-bottom:var(--s-6);
  font-size:var(--fz-body);line-height:var(--lh-body);max-width:64ch;
}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 14px;border-radius:var(--r-sm);
  font-size:13.5px;font-weight:600;line-height:1;
  border:1px solid var(--border);background:var(--surface);color:var(--text);
  transition:all var(--t-fast);min-height:36px;
}
.btn:hover:not(:disabled){border-color:var(--border-strong);background:var(--surface-alt);box-shadow:var(--shadow-xs)}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn.primary{background:var(--air-blue);color:white;border-color:var(--air-blue)}
.btn.primary:hover:not(:disabled){background:var(--air-blue-deep);border-color:var(--air-blue-deep)}
.btn.danger{border-color:var(--danger);color:var(--danger)}
.btn.danger:hover:not(:disabled){background:var(--danger-soft)}
.btn.ghost{border-color:transparent;background:transparent}
.btn.ghost:hover:not(:disabled){background:var(--surface-sunken)}
.btn:disabled{opacity:0.5;cursor:not-allowed}
.btn.loading{position:relative;color:transparent}
.btn.loading::after{
  content:"";position:absolute;inset:0;display:grid;place-items:center;
  width:14px;height:14px;margin:auto;border:2px solid currentColor;border-top-color:transparent;
  border-radius:50%;animation:spin 0.8s linear infinite;color:white;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============ CARDS ============ */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:var(--s-5);margin-bottom:var(--s-4)}
.card-head{display:flex;align-items:start;justify-content:space-between;gap:var(--s-3);margin-bottom:var(--s-4)}
.card-title{font-size:var(--fz-h4);font-weight:700;color:var(--text);line-height:var(--lh-snug)}
.card-sub{font-size:var(--fz-meta);color:var(--text-muted);margin-top:2px;line-height:var(--lh-body)}

/* ============ FORMS ============ */
.form-field{margin-bottom:var(--s-4)}
.form-field label{
  display:block;font-size:var(--fz-label);font-weight:600;color:var(--text-muted);
  margin-bottom:6px;text-transform:uppercase;letter-spacing:var(--ls-eyebrow);
}
.form-field input,.form-field select,.form-field textarea{
  width:100%;padding:10px 12px;border:1px solid var(--border);
  border-radius:var(--r-sm);font-size:var(--fz-body);font-family:inherit;line-height:var(--lh-body);
  outline:none;transition:border-color var(--t-fast),box-shadow var(--t-fast);
  background:var(--surface);color:var(--text);
}
.form-field input:hover,.form-field select:hover,.form-field textarea:hover{border-color:var(--border-strong)}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{
  border-color:var(--air-blue);box-shadow:var(--focus);
}
.form-field .hint{font-size:12px;color:var(--text-subtle);margin-top:4px}
.form-field .error{font-size:12px;color:var(--danger);margin-top:4px}
.form-field input[aria-invalid="true"],.form-field select[aria-invalid="true"]{border-color:var(--danger)}

/* ============ PILLS / BADGES ============ */
.conn-pill{
  display:inline-flex;align-items:center;gap:6px;padding:6px 11px;
  border-radius:var(--r-pill);font-size:11.5px;font-weight:600;
  background:var(--warning-soft);color:var(--warning);
  border:1px solid rgba(245,158,11,0.25);
}
.conn-pill.live{background:var(--success-soft);color:var(--success);border-color:rgba(16,185,129,0.25)}
.conn-pill.live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--success);box-shadow:0 0 0 3px rgba(16,185,129,0.25);animation:pulse-dot 2s infinite}
@keyframes pulse-dot{0%,100%{box-shadow:0 0 0 3px rgba(16,185,129,0.25)}50%{box-shadow:0 0 0 5px rgba(16,185,129,0.35)}}

.status-pill{
  padding:3px 9px;border-radius:var(--r-pill);
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.4px;
}
.status-pill.ok,.status-pill.advance,.status-pill.success{background:var(--success-soft);color:var(--success)}
.status-pill.warn,.status-pill.pending{background:var(--warning-soft);color:var(--warning)}
.status-pill.err,.status-pill.failed,.status-pill.reject{background:var(--danger-soft);color:var(--danger)}
.status-pill.info{background:var(--air-blue-soft);color:var(--air-blue)}
.status-pill.neutral{background:var(--surface-sunken);color:var(--text-muted)}

/* ============ TABS ============ */
.tabs{display:flex;gap:var(--s-1);border-bottom:1px solid var(--border);margin-bottom:var(--s-6);flex-wrap:wrap}
.tab{
  padding:10px var(--s-4);font-size:var(--fz-body);font-weight:600;color:var(--text-muted);
  border-bottom:2px solid transparent;cursor:pointer;
  transition:color var(--t-fast),border-color var(--t-fast);
  border-radius:6px 6px 0 0;
}
.tab:hover{color:var(--text)}
.tab.active{color:var(--air-blue);border-bottom-color:var(--air-blue)}
.panel{display:none}
.panel.active{display:block;animation:fade-in 0.18s ease-out}
@keyframes fade-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

/* ============ EMPTY STATE ============ */
.empty{
  padding:var(--s-8) var(--s-6);text-align:center;color:var(--text-subtle);
  background:var(--surface-alt);border:1px dashed var(--border);border-radius:var(--r);
}
.empty .empty-icon{
  width:48px;height:48px;margin:0 auto var(--s-3);display:grid;place-items:center;
  background:var(--air-blue-soft);color:var(--air-blue);border-radius:50%;
  font-size:22px;
}
.empty .empty-title{font-size:var(--fz-h4);font-weight:600;color:var(--text);margin-bottom:var(--s-1);line-height:var(--lh-snug)}
.empty .empty-desc{font-size:13px;color:var(--text-muted);margin:0 auto var(--s-4);max-width:48ch;line-height:var(--lh-body)}

/* ============ SKELETON LOADERS ============ */
.skel{
  background:linear-gradient(90deg,var(--surface-sunken) 0%,#f8fafc 50%,var(--surface-sunken) 100%);
  background-size:200% 100%;animation:shimmer 1.2s ease-in-out infinite;
  border-radius:var(--r-sm);
}
.skel-text{height:14px;margin-bottom:8px;width:100%}
.skel-text.short{width:50%}
.skel-text.medium{width:75%}
.skel-row{height:64px;margin-bottom:8px}
.skel-card{height:140px;margin-bottom:12px}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ============ GRID HELPERS ============ */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}

/* ============ CUSTOM MODAL ============ */
dialog.aria-modal{
  border:none;border-radius:var(--r);padding:0;background:transparent;
  max-width:520px;width:90%;box-shadow:0 20px 60px rgba(10,24,55,0.25);
}
dialog.aria-modal::backdrop{background:rgba(10,24,55,0.45);backdrop-filter:blur(2px)}
dialog.aria-modal .modal-body{background:var(--surface);border-radius:var(--r);padding:26px}
dialog.aria-modal h3{font-size:18px;font-weight:700;margin-bottom:8px}
dialog.aria-modal p{color:var(--text-muted);font-size:14px;line-height:1.55;margin-bottom:18px}
dialog.aria-modal .modal-actions{display:flex;gap:10px;justify-content:flex-end}

/* ============ TOPBAR ============ */
.topbar{display:flex;align-items:start;justify-content:space-between;gap:var(--s-4);margin-bottom:var(--s-6);flex-wrap:wrap}
.topbar-left{flex:1;min-width:0}
.topbar-right{display:flex;align-items:center;gap:var(--s-3);flex-shrink:0}

/* ============ MOBILE ============ */
@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .sidebar{display:none}
  .main{padding:16px}
  .grid-2,.grid-3{grid-template-columns:1fr}
}

/* Honour reduced motion preferences */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important}
}