/* Garuda Akses Nusantara — override NMS Lokal 2.
   Sumber: template Documents/NMS GARUDA AKSES. Edit palet di bawah.
   Palet Garuda merah dan netral, dengan hijau untuk kondisi normal. */
@import url('/garuda/tokens/fonts.css');
@import url('/garuda/tokens/colors.css?v=20260928-garuda-red-1');
@import url('/garuda/tokens/typography.css');
@import url('/garuda/tokens/effects.css');

:root, body, body.shell-ready {
  --bg:var(--neutral-50); --panel:var(--white); --panel-2:var(--neutral-100);
  --text:var(--neutral-950); --muted:var(--neutral-600); --line:var(--neutral-200);
  --accent:var(--red-600); --nav-active:var(--red-600); --nav:var(--red-50);
  --brand-border:var(--red-200); --up:var(--green-600); --down:var(--red-500);
  --warn:var(--neutral-600); --teal:var(--green-600); --teal-dark:var(--green-700);
  --orange:var(--red-600); --orange-dark:var(--red-700); --ink:var(--neutral-950); --paper:var(--white);
  font-family:var(--font-sans); font-synthesis:none;
}
body.theme-dark, body.shell-ready.theme-dark, body.theme-dark .login-screen {
  --bg:var(--neutral-950); --panel:var(--neutral-900); --panel-2:var(--neutral-800);
  --text:var(--neutral-50); --muted:var(--neutral-300); --line:var(--neutral-700);
  --accent:var(--red-300); --nav-active:var(--red-600); --nav:var(--red-950);
  --brand-border:var(--red-800); --up:#4ade80; --down:#f65b5b; --warn:#bf0000;
}
body, button, input, select, textarea, .settings-fields select, .settings-fields textarea { font-family:var(--font-sans); }
body :is(.login-intro h1,.login-identity h2,.settings-heading h2,.px-heading h1,.tg-page h1,.ns-page h1,.rr-heading h1),
body .section-heading h2, body .hero h1, body .closing h2 { font-family:var(--font-display); font-weight:600; letter-spacing:-.015em; }
code, pre, .traffic-value, .summary .value, .resource-facts dd { font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
::selection { background:var(--red-100); color:var(--red-900); }
body.shell-ready:not(.locked) > main, body.shell-ready.theme-dark:not(.locked) > main { background:var(--bg); }
body.shell-ready .shell-menu-items button.active { color:var(--accent); background:var(--nav); box-shadow:none; border-left:0; }
body.shell-ready #cards :is(.card,.admin-form,.settings-fields,.vpn,.ipam,.sdwan-panel,.shzt,.workspaces-panel,.services-sites-panel) { border-radius:16px; border-color:var(--line); box-shadow:0 2px 10px #0b0b0d06; }
body.shell-ready #cards :is(input:not([type=checkbox]):not([type=radio]),select,textarea):focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--focus-ring); }
body .login-submit, body #adminAccessForm button[type=submit], body .settings-actions button, body .control-bar .primary-action { background:var(--red-600); border-color:var(--red-600); color:#fff; border-radius:8px; }
body .login-submit:hover, body .settings-actions button:hover { background:var(--red-700); border-color:var(--red-700); }
body .nav-tabs button.active, body :is(.vpn-tabs,.ipam-tabs) button.active { color:var(--accent); border-color:var(--accent); background:var(--nav); }

/* Login: black brand panel and original Garuda artwork. */
body.locked .login-screen { background:var(--bg); }
body .login-topbar { background:var(--panel); border-top:3px solid var(--red-600); }
body .login-wordmark img { display:block; width:210px; max-width:100%; height:auto; object-fit:contain; filter:none; }
body .login-wordmark .gan-logo-dark { display:none; }
body.theme-dark .login-wordmark .gan-logo-light { display:none; }
body.theme-dark .login-wordmark .gan-logo-dark { display:block; filter:none; }
body .login-content { border-radius:24px; border:1px solid var(--line); box-shadow:0 16px 48px #0b0b0d0b; }
body .login-intro { position:relative; isolation:isolate; background:var(--neutral-950); color:#fff; }
body .login-intro::before { content:""; position:absolute; inset:0; z-index:-1; background:url('/garuda/assets/brand/garuda-pattern-white.png') center/380px; opacity:.055; pointer-events:none; }
body .login-intro::after { content:""; width:64px; height:4px; border-radius:4px; background:var(--red-600); position:absolute; top:40px; left:55px; }
body .login-kicker { color:var(--red-300); font-family:var(--font-display); font-weight:600; font-size:10px; letter-spacing:.16em; }
body.shell-ready .login-intro h1, body .login-intro h1 { font-size:30px; line-height:1.3; color:#fff; }
body .login-lede, body .login-capabilities, body .login-status small { color:var(--neutral-300); }
body .login-capabilities li > span { background:var(--red-500); }
body .login-status { background:#ffffff08; border-color:#ffffff1f; }
body .login-status b { color:#fff; }
body .login-access-panel { background:var(--panel); }
body .login-identity img { filter:none; width:44px; height:44px; object-fit:contain; background:var(--red-50); border-radius:12px; padding:9px; box-sizing:border-box; }
body .login-identity h2 { font-size:21px; line-height:1.4; }
body .login-field input { background:var(--panel); color:var(--text); border-color:var(--line); border-radius:8px; }
body .login-field input:focus { border-color:var(--red-600); box-shadow:0 0 0 3px var(--focus-ring); }
body .login-submit { min-height:46px; font-weight:700; }
body .login-footer { color:var(--muted); }

/* Sidebar follows the customer-app kit: dark surface and solid red active item. */
@media(min-width:901px) {
  body.shell-ready:not(.locked) > .shell-sidebar {
    --panel:var(--neutral-950); --panel-2:var(--neutral-900); --text:var(--neutral-100);
    --muted:var(--neutral-400); --line:var(--neutral-800); --accent:var(--red-300);
    background:var(--neutral-950); color:var(--text); border-right-color:var(--neutral-800);
  }
  body.shell-ready .shell-brand { flex-direction:column; align-items:flex-start; gap:10px; padding:12px 10px 24px; }
  body.shell-ready .shell-brand img { width:196px; max-width:100%; height:auto; }
  body.shell-ready .shell-brand strong { color:var(--neutral-400); font-size:10px; font-family:var(--font-mono); font-weight:400; letter-spacing:.06em; text-transform:uppercase; }
  body.shell-ready .shell-sidebar .shell-menu-group { border-color:var(--neutral-800); }
  body.shell-ready .shell-sidebar .shell-menu-group > summary { color:var(--neutral-400); }
  body.shell-ready .shell-sidebar .shell-menu-items button { color:var(--neutral-300); }
  body.shell-ready .shell-sidebar .shell-menu-items button:hover { background:var(--neutral-900); color:#fff; }
  body.shell-ready .shell-sidebar .shell-menu-items button.active { background:var(--red-600); color:#fff; box-shadow:none; }
  body.shell-ready .shell-sidebar .shell-menu-items button.active .mobile-icon { color:#fff; }
  body.shell-ready .shell-sidebar > footer { background:var(--neutral-900); border-radius:8px; padding:12px; border:0; }
}
@media(max-width:900px) {
  body .login-intro::after { top:18px; left:28px; width:40px; height:3px; }
  body .login-wordmark img { width:180px; }
  body.shell-ready .login-intro h1, body .login-intro h1 { font-size:25px; }
  body .login-content { border-radius:16px; }
  body .app-brand img { object-fit:contain; }
}
@media(max-width:420px) {
  body .login-wordmark img { width:150px; }
  body .login-topbar { gap:8px; padding-inline:16px; }
  body .login-controls { gap:5px; }
  body .login-controls select { max-width:105px; }
  body .login-access-panel { padding:24px; }
  body .login-intro { padding:30px 24px; }
  body .login-intro h1 { font-size:23px; }
}

/* Homepage uses the same brand palette. */
body .site-header { border-top-color:var(--red-600); }
body .brand img { width:210px; height:auto; }
body .hero, body .closing { background:var(--red-600); }
body .hero::before { background:linear-gradient(135deg,var(--red-600),var(--red-800)); }
body .hero::after { background:url('/garuda/assets/brand/garuda-pattern-white.png') center/420px; opacity:.07; mask-image:none; }
body .hero-orbits span { border-color:var(--red-200); }
body .announcement { border-color:#ffffff55; }
body .hero-footnote, body .closing .eyebrow { color:var(--red-100); }
body .button:not(.button-white):not(.button-outline) { background:var(--red-600); border-radius:8px; }
body .button:not(.button-white):not(.button-outline):hover { background:var(--red-700); }
body .button-white { border-radius:8px; }
body .button-white:hover { background:var(--red-50); }
body .globe-callout { border-color:var(--red-300); }
body .operations-section { background:var(--neutral-950); }
body .operations-section .eyebrow, body .step-number { color:var(--red-300); }
@media(max-width:700px) { body .site-header .brand img { width:145px; } body .site-header { gap:8px; } }
@media(max-width:370px) { body .site-header .brand img { width:120px; } }

body .site-header .button { color:#fff; }
body.shell-ready .chart.rt-chart { --rx-color:var(--red-600); --tx-color:var(--sky-600); }
body.shell-ready.theme-dark .chart.rt-chart { --rx-color:var(--red-300); --tx-color:#38bdf8; }

/* Warnings use neutral contrast; orange accents are removed across modules. */
body.gan-app .center-badge:is([data-state=warning],[data-state=investigating],[data-state=stale]) { background:#edf1f5; color:#405264; }
body.gan-app.theme-dark .center-badge:is([data-state=warning],[data-state=investigating],[data-state=stale]) { background:#34404c; color:#e2e8f0; }