/* WNNET MANAGER v3.3.3 - Desktop Visual & Operator Polish
   Visual/readability layer only. No RouterOS/billing mutation logic. */
:root{
  --wn333-titlebar:34px;
  --wn333-ink:#13243a;
  --wn333-muted:#5f7289;
  --wn333-red:#d92345;
  --wn333-red-dark:#8d1029;
  --wn333-title:#15090d;
}

/* Desktop Standalone title strip. Activated only when the Electron renderer adds
   html.wn333-desktop. Browser/mobile behavior remains unchanged. */
html.wn333-desktop body{padding-top:var(--wn333-titlebar)!important}
html.wn333-desktop #wn333DesktopBar{
  position:fixed;z-index:100000;left:0;right:0;top:0;height:var(--wn333-titlebar);
  display:flex;align-items:center;gap:8px;padding:0 155px 0 10px;
  background:linear-gradient(90deg,#13080c 0%,#241017 45%,#13080c 100%);
  border-bottom:2px solid var(--wn333-red);color:#fff;
  box-shadow:0 1px 8px rgba(0,0,0,.22);-webkit-app-region:drag;user-select:none
}
html.wn333-desktop #wn333DesktopBar img{width:21px;height:21px;object-fit:contain;filter:drop-shadow(0 0 5px rgba(230,36,70,.25))}
html.wn333-desktop #wn333DesktopBar strong{font:650 11px/1 "Segoe UI",sans-serif;letter-spacing:.02em;color:#fff;white-space:nowrap}
html.wn333-desktop #wn333DesktopBar .wn333-ver{font:600 9px/1 "Segoe UI",sans-serif;color:#ff7890;white-space:nowrap}
html.wn333-desktop #wn333DesktopBar .wn333-slogan{margin-left:6px;padding-left:10px;border-left:1px solid rgba(255,255,255,.16);font:500 9px/1 "Segoe UI",sans-serif;color:#cdd5df;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.wn333-desktop #wn321Topbar{top:var(--wn333-titlebar)!important}
html.wn333-desktop #sidenav.sidenav{top:calc(var(--wn321-topbar) + var(--wn333-titlebar))!important}
html.wn333-desktop #loading{top:calc(72px + var(--wn333-titlebar))!important}

/* Readability: preserve compact operator density but stop tiny 8-9px text from
   becoming tiring on common 1366x768 operator screens. */
body{color:var(--wn333-ink)!important}
.wn321-brand-copy strong{color:#14263e!important;font-weight:750!important}
.wn321-brand-copy small,.wnex-panel-title p,.wnex-kpi-sub,.wnex-detail-kv,.wnex-health-mini{color:var(--wn333-muted)!important}
.wnex-table th{color:#334960!important;font-weight:700!important;letter-spacing:.01em}
.wnex-table td{color:#1f344b!important}
.wnex-table td a{font-weight:600}
.wnex-detail-name{font-weight:750!important;color:#172b43!important}
.wnex-detail-kv b,.wnex-billing-row b{color:#172b43!important}
.wnex-activity-list td{color:#30465d!important}
#wn321Status{color:#40566e!important}

/* Buttons need enough contrast without growing the dashboard. */
.wnex-mini-btn,.wnex-detail-actions a,.main-container .btn{
  font-weight:650!important;text-rendering:optimizeLegibility
}
.wnex-detail-actions a{border-width:1px!important}

/* Medium/short desktop tuning based on the actual operator screenshot. */
@media(min-width:1000px) and (max-height:820px){
  :root{--wn321-sidebar:210px}
  .wn321-brand-copy strong{font-size:13.5px!important;overflow:visible!important;text-overflow:clip!important}
  .wn321-brand-copy small{font-size:9.2px!important}
  #sidenav a.menu,#sidenav .dropdown-btn{font-size:11.4px!important}
  #sidenav .dropdown-container>a{font-size:10.8px!important}
  .wnex-table th,.wnex-table td{height:29px!important;padding:4px 6px!important;font-size:10px!important;line-height:1.22!important}
  .wnex-panel-title h3,.wnex-detail-head h3{font-size:12px!important}
  .wnex-panel-title p{font-size:9.2px!important}
  .wnex-toolbar-search input,.wnex-mini-btn{font-size:10px!important}
  .wnex-detail-name{font-size:12px!important}
  .wnex-detail-kv{font-size:9.6px!important;line-height:1.25!important}
  .wnex-detail-actions a{font-size:9.5px!important}
  .wnex-tabs a{font-size:9.8px!important}
  .wnex-activity-list td{font-size:9.4px!important}
  .wnex-billing-row,.wnex-billing-row b{font-size:9.4px!important}
  .wn321-status-cell{font-size:9.4px!important}
}

/* Keep the PPPoE alarm from covering Billing Ringkas. The JS switches to this
   compact bell after a few seconds; sound/polling continue in the background. */
.wn-pa-dock.wn-pa-compact{max-width:51px!important;width:51px!important;padding:6px!important;gap:0!important;border-left-width:1px!important;border-radius:9px!important;overflow:visible!important}
.wn-pa-dock.wn-pa-compact .wn-pa-copy,.wn-pa-dock.wn-pa-compact .wn-pa-toggle{display:none!important}
.wn-pa-dock.wn-pa-compact .wn-pa-bell{margin:0 auto!important}

@media(max-width:860px){
  html.wn333-desktop #wn333DesktopBar .wn333-slogan{display:none}
}
@media print{html.wn333-desktop body{padding-top:0!important}#wn333DesktopBar{display:none!important}}