/* RANUM V2 OFFLINE | additive presentation layer: no changes to OpenNDS or API */
:root { --v2-navy:#08233b; --v2-blue:#0977b6; --v2-cyan:#16c8dc; --v2-teal:#12c5b0; }
html { scroll-behavior:auto; }
#app:not([hidden]) { grid-template-rows:64px minmax(0,auto); }
#app>.topbar { height:64px; }
#app>.main { padding:18px clamp(15px,2.5vw,32px) 42px; }
.v2-view[hidden] { display:none!important; }
.v2-page-heading { display:flex;align-items:center;justify-content:space-between;gap:16px;min-width:0;margin:0 0 13px; }
.v2-page-heading h2 { margin:2px 0 1px;font-size:clamp(19px,1.8vw,25px);font-weight:850;letter-spacing:-.035em;color:#0a3453; }
.v2-page-heading p { margin:0;font-size:11px;color:#668095; }
.v2-kicker { font-size:9px;font-weight:850;letter-spacing:.15em;color:#1b83a5; }
#v2ActivityChip { max-width:35%;border:1px solid #d3e7ef;border-radius:100px;padding:7px 10px;background:#eef8fb;color:#175475;font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.v2-view > .panel:first-child { margin-top:0; }
.v2-view > #nodeSection .section-head { margin:5px 0 12px; }
.v2-view > #voucherSection { margin:0; }
.v2-view > #trialSection { margin:0 0 14px; }
.v2-view > #trialHistory { margin:0 0 15px; }
.v2-view > #ranumAutohealInfo { margin:0; }
.v2-view .hero { padding:15px 19px;border-radius:16px;gap:15px; }
.v2-view .hero h2 { font-size:clamp(19px,2vw,25px);line-height:1.25;margin:2px 0 4px; }
.v2-view .hero .hero-lead { font-size:12px; }
.v2-view .hero p:not(.hero-lead) { font-size:10px;line-height:1.5;margin-top:6px;max-width:740px; }
.v2-view .hero-actions .btn { font-size:11px;padding:10px 13px;white-space:nowrap; }
.v2-view #stats.stats-grid { grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:12px 0; }
.v2-view #stats .stat { border-radius:13px;padding:12px 14px; }
.v2-view #stats .stat b { font-size:clamp(21px,2.4vw,29px);margin-top:3px; }
.v2-view #stats .stat i { display:none; }
/* Four primary KPIs in the overview; remaining stats still exist in state / other modules. */
.v2-view #stats .stat:nth-child(n+5) { display:none; }
.v2-quick.panel { margin:0; padding:13px 16px; border-radius:15px; }
.v2-quick-head { display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:9px; }
.v2-quick-head h3 { font-size:15px;margin:2px 0;letter-spacing:-.02em; }
.v2-inline-link { color:#0475a8;text-decoration:none;font-size:11px;font-weight:750;white-space:nowrap; }
.v2-inline-link:hover { text-decoration:underline; }
.v2-quick-list { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px; }
.v2-node-row { min-width:0;background:#f0f7fb;border:1px solid #deedf5;border-radius:10px;padding:11px;display:flex;justify-content:space-between;align-items:center;gap:9px; }
.v2-node-title { min-width:0;font-size:11px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.v2-state-online,.v2-state-offline { font-weight:800;font-size:10px;white-space:nowrap; }
.v2-state-online { color:#087f70; }.v2-state-offline { color:#b04c5d; }
.v2-command-panel { margin-top:14px; }
.v2-command-panel .panel-foot { margin:0;border-top:0;padding:0; }
.v2-diagnostics-panel { margin:0!important; }
.v2-diagnostics-note { font-size:11px;line-height:1.5;margin:0 0 14px; }
.v2-diag-list { display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px; }
.v2-diag-card { border:1px solid #d7e9f2;border-radius:14px;padding:14px;background:#f7fbfd;min-width:0; }
.v2-diag-head { display:flex;align-items:center;justify-content:space-between;gap:7px; }
.v2-diag-head strong { font-size:13px; }.v2-diag-code { font-size:14px;font-weight:800;margin:10px 0 3px;overflow-wrap:anywhere;color:#0c668c; }
.v2-diag-card p { line-height:1.5;font-size:11px;margin:4px 0;color:#516d80;overflow-wrap:anywhere; }
.v2-diag-card small { font-size:10px;color:#6d8291; }
#voucherSection .panel-head { align-items:flex-start;gap:12px; }
#voucherSection .toolbar { justify-content:flex-end; }
#voucherSection .v2-save { box-shadow:0 4px 12px #097bc421; }
#voucherSection .tablewrap { max-height:min(64vh,650px); }
#ranumV2MobileNav { display:none; }
/* Desktop: keep brand/navigation short enough not to force sidebar scrolling. */
.ranum-sidebar { padding-top:15px; }.ranum-side-brand { padding-bottom:12px; }.ranum-side-label { margin-top:13px; }
.ranum-side-nav a { min-height:41px;padding:10px 12px; }.ranum-side-note { padding:12px;margin:11px 4px; }.ranum-side-note p { margin-top:4px; }
body.ranum-dark .v2-page-heading h2 { color:#e9f8ff; }
body.ranum-dark .v2-page-heading p { color:#99b8cc; }
body.ranum-dark #v2ActivityChip { background:#143b56;border-color:#28607d;color:#cbebfa; }
body.ranum-dark .v2-quick.panel,body.ranum-dark .v2-diag-card { background:#102a40;border-color:#28516b; }
body.ranum-dark .v2-node-row { background:#17354c;border-color:#31516a; }
body.ranum-dark .v2-diag-card p,body.ranum-dark .v2-diag-card small { color:#aac6d7; }
body.ranum-dark .v2-diag-code { color:#50dce8; }
body.ranum-dark .v2-inline-link { color:#68dce9; }
@media(max-width:1100px) {
 .v2-view .hero { align-items:flex-start; }
 .v2-quick-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:920px) {
 #app:not([hidden]) { grid-template-rows:58px auto; }
 #app>.topbar { height:58px; }
 #app>.main { padding:13px 14px calc(88px + env(safe-area-inset-bottom)); }
 #ranumV2MobileNav { display:grid;position:fixed;z-index:38;bottom:0;left:0;right:0;grid-template-columns:repeat(5,minmax(0,1fr));background:rgba(6,31,52,.97);border-top:1px solid #215671;padding:7px 6px calc(7px + env(safe-area-inset-bottom));box-shadow:0 -10px 22px #03192a22; }
 #ranumV2MobileNav a,#ranumV2MobileNav button { min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;border:0;background:none;color:#b8d4e6;border-radius:11px;text-decoration:none;padding:5px 0; }
 #ranumV2MobileNav a.active { color:#44f0e1;background:#154663; }
 #ranumV2MobileNav span { font-size:21px;line-height:1.1; }
 #ranumV2MobileNav small { font-size:10px;font-weight:700; }
 .v2-page-heading { margin-bottom:10px; }
 .v2-view .hero { padding:13px; }
 .v2-view .hero p:not(.hero-lead) { display:none; }
 .v2-view .hero h2 { font-size:18px; }
 #voucherSection .panel-head { display:block; }
 #voucherSection .toolbar { margin-top:9px;justify-content:flex-start; }
}
@media(max-width:640px) {
 .v2-page-heading h2 { font-size:19px; }
 .v2-page-heading p { font-size:10px;line-height:1.3; }
 .v2-kicker { font-size:8px; }
 #v2ActivityChip { display:none; }
 #app>.topbar { padding:0 12px!important; }
 #app>.main { padding:9px 10px calc(79px + env(safe-area-inset-bottom)); }
 .v2-view #activityBar { font-size:10px;padding:7px 10px;gap:7px;margin:0 0 8px; }
 .v2-view #activityBar small { display:none; }
 .v2-view .hero { padding:12px 13px;display:flex;align-items:center; }
 .v2-view .hero .eyebrow { display:none; }
 .v2-view .hero h2 { font-size:16px; }
 .v2-view .hero .hero-lead { font-size:10px; }
 .v2-view .hero-actions { margin:0;flex:0 0 auto; }
 .v2-view .hero-actions .btn { font-size:0;padding:10px 11px; }
 .v2-view .hero-actions #openGenerator::before { content:'＋ Voucher';font-size:11px; }
 .v2-view #stats.stats-grid { grid-template-columns:repeat(2,minmax(0,1fr));margin:9px 0;gap:8px; }
 .v2-view #stats .stat { padding:10px 11px; }
 .v2-view #stats .stat span { font-size:10px; }
 .v2-view #stats .stat b { font-size:22px; }
 .v2-quick.panel { padding:11px; }
 .v2-quick-head h3 { font-size:14px; }
 .v2-quick-list { grid-template-columns:1fr;gap:6px; }
 .v2-node-row { padding:8px 10px; }
 .v2-diag-list { grid-template-columns:1fr; }
 #voucherSection { padding:12px; }
 #voucherSection .toolbar .btn { padding:8px 9px;font-size:10px; }
 #voucherSection .filterbar { margin-top:8px;padding:8px; }
 #voucherSection .segmented { flex-wrap:nowrap;overflow:auto; }
 #voucherSection .segmented button { font-size:10px;padding:6px 8px; }
 #voucherSection .search { margin-top:7px; }
 .v2-view #trialSection { padding:12px; }
 .v2-view #trialSection .trial-icon { display:none; }
 #ranumV2MobileNav a,#ranumV2MobileNav button { min-height:43px; }
}
@media(max-width:370px) {
 .v2-view .hero .hero-lead { display:none; }
 #ranumV2MobileNav small { font-size:9px; }
 .topbar .brand-row h1 { font-size:14px; }
}
@media(prefers-reduced-motion:reduce){.ranum-sidebar,.btn,.icon-btn { transition:none!important; }}

/* V2.1: peringatan permanen untuk voucher belum disimpan. */
#v2UnsavedNotice[hidden]{display:none!important}
#v2UnsavedNotice{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 15px;padding:10px 14px;margin:-3px 0 12px;background:#fff4d8;border:1px solid #e9c672;border-radius:12px;color:#704b12;font-size:12px}
#v2UnsavedNotice a{color:#62400a;font-size:11px;font-weight:800;text-decoration:underline;text-underline-offset:3px}
#ranumV2MobileNav a.v2-unsaved-link{position:relative}
#ranumV2MobileNav a.v2-unsaved-link::after{content:'';position:absolute;right:calc(50% - 20px);top:2px;background:#ffbd39;border:2px solid #08233b;width:9px;height:9px;border-radius:50%}
#ranumNav .v2-unsaved-link::after{content:'•';color:#ffc45f;font-size:19px;line-height:0;margin-left:auto}
#v2PageTitle:focus{outline:none}
body.ranum-dark #v2UnsavedNotice{background:#45371e;border-color:#a78635;color:#ffe6a7}
body.ranum-dark #v2UnsavedNotice a{color:#fff0cb}
@media(max-width:640px){#v2UnsavedNotice{padding:9px 10px;margin:0 0 10px;font-size:10px;align-items:center}#v2UnsavedNotice a{font-size:10px}}
/* Layar 320 px: aksi header tidak boleh memperlebar kolom grid. */
@media(max-width:350px){
 #app:not([hidden]){grid-template-columns:minmax(0,1fr);width:100%;min-width:0}
 #app>.topbar,#app>.main{min-width:0;width:100%;max-width:100%}
 #app>.topbar{gap:5px;padding:0 7px!important}
 #app>.topbar .brand-row{gap:5px;min-width:0;flex:1 1 auto}
 #app>.topbar .top-actions{gap:4px;flex:0 0 auto}
 #app>.topbar .brand-mark.small{width:27px;height:27px;font-size:16px}
 #app>.topbar .ranum-menu-button,#app>.topbar .icon-btn{width:33px;height:33px;flex-basis:33px;border-radius:9px}
 #app>.topbar .brand-row h1{font-size:13px}
 #app>.topbar #logout{width:33px;height:33px;padding:0;font-size:0;line-height:1}
 #app>.topbar #logout::before{content:'⇥';font-size:20px}
}
/* Toast aksi pada HP tidak boleh menutupi bottom navigation. */
@media(max-width:920px){.toast{bottom:calc(78px + env(safe-area-inset-bottom));max-width:calc(100vw - 24px)}}

/* V2.2 — branding disepakati, hanya tampilan sidebar dan topbar. */
.ranum-side-brand {flex-direction:column;align-items:flex-start;gap:8px;padding:8px 12px 14px;}
.ranum-side-brand-copy {max-width:100%;min-width:0;}
.ranum-side-brand strong {font-size:24px;font-weight:850;letter-spacing:.015em;line-height:1.08;}
.ranum-side-brand small {display:block;margin-top:6px;max-width:195px;font-size:10px;letter-spacing:0;line-height:1.45;font-weight:550;color:#b9d8e9;overflow-wrap:break-word;}
.ranum-top-title-group {min-width:0;}
#app>.topbar .brand-row h1 {margin:0;line-height:1.22;letter-spacing:-.02em;}
.ranum-title-mobile-icon {display:none;}
@media(max-width:920px){
  #app>.topbar .brand-row h1 {font-size:16px;}
  .ranum-side-brand {padding-top:10px;}
}
@media(max-width:640px){
  #app>.topbar .brand-mark.small {display:none!important;}
  #app>.topbar .ranum-title-mobile-icon {display:inline;}
  #app>.topbar .brand-row {min-width:0;flex:1 1 auto;}
  #app>.topbar .brand-row h1 {font-size:clamp(11px,3.6vw,14px);white-space:nowrap;}
  #app>.topbar .top-actions {flex:0 0 auto;}
}
@media(max-width:350px){
  #app>.topbar .brand-row h1 {font-size:11px;}
  #app>.topbar .brand-row {gap:0;}
}
@media(min-width:351px) and (max-width:380px){
  #app>.topbar {gap:5px;padding:0 7px!important;}
  #app>.topbar .brand-row {gap:0;min-width:0;flex:1 1 auto;}
  #app>.topbar .top-actions {gap:4px;flex:0 0 auto;}
  #app>.topbar .ranum-menu-button,#app>.topbar .icon-btn {width:33px;height:33px;flex-basis:33px;}
  #app>.topbar .brand-row h1 {font-size:12px;}
  #app>.topbar #logout{width:33px;height:33px;padding:0;font-size:0;line-height:1;}
  #app>.topbar #logout::before{content:'⇥';font-size:20px;}
}