/* ============================================================
   RST NET — ISP Management System
   Shared design tokens & base styles
   ============================================================ */
:root{
  --bg: #090C14;
  --bg-sidebar: #0C1019;
  --bg-panel: #12162122;
  --bg-panel: #121623;
  --bg-panel-raised: #171C2B;
  --bg-hover: #1B2033;
  --line: #1E2536;
  --line-bright: #2B3350;

  --text: #E9EBF3;
  --text-muted: #848DA6;
  --text-dim: #4E5670;

  --accent: #6C6FF0;
  --accent-dim: rgba(108,111,240,0.14);
  --accent-bright: #8B8EFF;

  --success: #22C58B;
  --success-dim: rgba(34,197,139,0.14);
  --warn: #F5A524;
  --warn-dim: rgba(245,165,36,0.14);
  --danger: #F5455C;
  --danger-dim: rgba(245,69,92,0.14);
  --info: #38BDF8;

  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --radius: 10px;
  --sidebar-w: 236px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.24);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.28);
  --shadow-modal: 0 24px 64px rgba(0,0,0,0.45);
}

/* Light mode — palet dirancang sendiri (bukan invert dari gelap doang),
   tetap satu keluarga sama accent indigo/violet biar identitasnya konsisten. */
[data-theme="light"]{
  --bg: #F3F4FA;
  --bg-sidebar: #FFFFFF;
  --bg-panel: #FFFFFF;
  --bg-panel-raised: #F8F9FD;
  --bg-hover: #EEF0FA;
  --line: #E2E4F0;
  --line-bright: #CBCEE3;

  --text: #1A1D2E;
  --text-muted: #666D8C;
  --text-dim: #9CA1BC;

  --accent: #5457E0;
  --accent-dim: rgba(84,87,224,0.10);
  --accent-bright: #4245C4;

  --success: #14966B;
  --success-dim: rgba(20,150,107,0.10);
  --warn: #C57A0A;
  --warn-dim: rgba(197,122,10,0.10);
  --danger: #D6304A;
  --danger-dim: rgba(214,48,74,0.10);
  --info: #0891C7;

  --shadow-sm: 0 1px 2px rgba(30,35,70,0.06);
  --shadow-md: 0 8px 24px rgba(30,35,70,0.08);
  --shadow-modal: 0 24px 64px rgba(30,35,70,0.18);
}

/* Transisi halus pas ganti tema — dibatasin property yang relevan aja
   biar gak berat, dan dimatiin kalau user minta reduced motion. */
body, .sidebar, .panel, .modal, .topbar, .btn, .nav-item, input, select, textarea{
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

*{ margin:0; padding:0; box-sizing:border-box; }
html,body{ height:100%; }
body{
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  line-height:1.5;
}
::selection{ background: var(--accent-dim); color: var(--accent-bright); }
a{ color:inherit; text-decoration:none; }
button{ font-family: inherit; cursor:pointer; }
input, select{ font-family: inherit; }

::-webkit-scrollbar{ width:7px; height:7px; }
::-webkit-scrollbar-thumb{ background: var(--line-bright); border-radius:4px; }
::-webkit-scrollbar-track{ background:transparent; }

/* ===== App shell ===== */
.app{
  display:grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height:100vh;
}

/* ---- Sidebar ---- */
.sidebar{
  background: var(--bg-sidebar);
  border-right: 1px solid var(--line);
  display:flex; flex-direction:column;
  height:100vh; position:sticky; top:0;
}
.sidebar-brand{
  display:flex; align-items:center; gap:10px;
  padding: 20px 18px 16px;
  border-bottom: 1px solid var(--line);
}
.sidebar-brand .mark{
  width:34px; height:34px; border-radius:9px; flex-shrink:0;
  background: linear-gradient(135deg, var(--accent), #4144C4);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-weight:700; color:#fff; font-size:15px;
}
.sidebar-brand h1{ font-family: var(--font-display); font-weight:600; font-size:14.5px; line-height:1.2; }
.sidebar-brand .sub{ font-family: var(--font-mono); font-size:9.5px; color: var(--text-dim); text-transform:uppercase; letter-spacing:0.5px; margin-top:2px;}

.nav-scroll{ flex:1; overflow-y:auto; padding: 10px 10px; }
.nav-section-label{
  font-family: var(--font-mono); font-size:9.5px; text-transform:uppercase; letter-spacing:0.8px;
  color: var(--text-dim); padding: 14px 10px 6px;
}
.nav-item{
  display:flex; align-items:center; gap:11px;
  padding: 9px 12px; border-radius:8px; margin-bottom:2px;
  color: var(--text-muted); font-size:13px; font-weight:500;
  transition: background-color .12s ease, color .12s ease; cursor:pointer; position:relative;
}
.nav-item .ic{ width:18px; text-align:center; font-size:14.5px; flex-shrink:0; }
.nav-item:hover{ background: var(--bg-hover); color: var(--text); }
.nav-item.active{ background: var(--accent-dim); color: var(--accent-bright); }
.nav-item.active::before{
  content:''; position:absolute; left:-10px; top:50%; transform:translateY(-50%);
  width:3px; height:18px; background: var(--accent); border-radius:0 3px 3px 0;
  transition: height .15s ease;
}
.nav-item .badge-count{
  margin-left:auto; font-family: var(--font-mono); font-size:10px;
  background: var(--danger-dim); color: var(--danger); padding:1px 6px; border-radius:10px;
}

.sidebar-footer{
  border-top:1px solid var(--line); padding: 12px;
}
.user-chip{
  display:flex; align-items:center; gap:10px; padding:8px; border-radius:9px;
  cursor:pointer; transition: background .12s;
}
.user-chip:hover{ background: var(--bg-hover); }
.user-chip .avatar{
  width:34px; height:34px; border-radius:50%; flex-shrink:0;
  background: linear-gradient(135deg,#4144C4,var(--accent));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:600; font-size:13px; color:#fff;
}
.user-chip .name{ font-size:12.5px; font-weight:600; }
.user-chip .role{ font-size:10.5px; color: var(--text-muted); }
.user-chip .chev{ margin-left:auto; color: var(--text-dim); font-size:11px; }

/* ---- Main area ---- */
.main{ display:flex; flex-direction:column; min-width:0; }
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px 26px; border-bottom:1px solid var(--line);
  background: rgba(18,22,35,0.5);
}
.topbar-left h2{ font-family: var(--font-display); font-size:18px; font-weight:600; }
.topbar-left .crumb{ font-family: var(--font-mono); font-size:10.5px; color: var(--text-dim); margin-top:2px; }
.topbar-right{ display:flex; align-items:center; gap:14px; }
.topbar-date{ font-family: var(--font-mono); font-size:12px; color: var(--text-muted); }
.icon-btn{
  width:34px; height:34px; border-radius:8px; border:1px solid var(--line);
  background: var(--bg-panel-raised); display:flex; align-items:center; justify-content:center;
  color: var(--text-muted); font-size:14px; position:relative; transition: all .12s;
}
.icon-btn:hover{ border-color: var(--line-bright); color: var(--text); }
.icon-btn .dot-alert{
  position:absolute; top:6px; right:6px; width:6px; height:6px; border-radius:50%; background: var(--danger);
}
.logout-btn{
  background:none; border:1px solid var(--line); color: var(--text-muted);
  padding:7px 13px; border-radius:8px; font-size:12px; font-weight:500; transition: all .12s;
}
.logout-btn:hover{ border-color: var(--danger); color: var(--danger); }

.content{ padding: 24px 26px; flex:1; }
.page-section{ display:none; }
.page-section.active{ display:block; animation: fadein .18s ease; }
@keyframes fadein{ from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:translateY(0);} }

/* ---- Generic components ---- */
.panel{
  background: var(--bg-panel); border:1px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px; box-shadow: var(--shadow-sm);
}
.panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.panel-title{ font-family: var(--font-display); font-weight:600; font-size:14.5px; }
.btn{
  display:inline-flex; align-items:center; gap:7px;
  padding: 9px 16px; border-radius:8px; border:none; font-weight:600; font-size:12.5px;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease, color .12s ease;
}
.btn:active{ transform: translateY(1px); }
.btn-primary{ background: var(--accent); color:#fff; }
.btn-primary:hover{ background: var(--accent-bright); box-shadow: 0 4px 14px rgba(108,111,240,0.28); transform: translateY(-1px); }
.btn-ghost{ background: var(--bg-panel-raised); color: var(--text-muted); border:1px solid var(--line); }
.btn-ghost:hover{ color: var(--text); border-color: var(--line-bright); transform: translateY(-1px); }
.btn-danger{ background: var(--danger-dim); color: var(--danger); }
.btn-danger:hover{ background: var(--danger); color:#fff; }
.btn-sm{ padding:5px 11px; font-size:11.5px; }

/* Keyboard focus — kelihatan jelas, tapi cuma pas navigasi keyboard (gak
   ganggu klik mouse biasa) */
:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.btn:focus-visible{ outline-offset: 3px; }

table{ width:100%; border-collapse:collapse; font-size:12.5px; }
@media (max-width: 768px){
  .panel:has(table){ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  table{ min-width:640px; }
}
thead th{
  text-align:left; font-family: var(--font-mono); font-size:10px; text-transform:uppercase;
  letter-spacing:0.6px; color: var(--text-dim); font-weight:500;
  padding: 0 12px 10px; border-bottom:1px solid var(--line);
}
tbody td{ padding: 11px 12px; border-bottom:1px solid var(--line); }
tbody tr:last-child td{ border-bottom:none; }
tbody tr{ transition: background-color .1s ease; }
tbody tr:hover{ background: var(--bg-hover); }

.pill{
  display:inline-flex; align-items:center; gap:5px;
  font-family: var(--font-mono); font-size:10.5px; padding:3px 9px; border-radius:20px;
}
.pill.online{ background: var(--success-dim); color: var(--success); }
.pill.offline{ background: var(--danger-dim); color: var(--danger); }
.pill.pending{ background: var(--warn-dim); color: var(--warn); }
.pill .d{ width:5px; height:5px; border-radius:50%; background:currentColor; }

.avatar-sm{
  width:30px; height:30px; border-radius:50%;
  background: linear-gradient(135deg,#4144C4,var(--accent));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:600; font-size:11.5px; color:#fff; flex-shrink:0;
}
.row-user{ display:flex; align-items:center; gap:10px; }
.row-user .name{ font-weight:600; font-size:12.5px; }
.row-user .sub{ font-family: var(--font-mono); font-size:10.5px; color: var(--text-muted); }

/* placeholder module */
.coming-soon{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding: 90px 20px; text-align:center; gap:10px; color: var(--text-dim);
}
.coming-soon .big{ font-size:36px; }
.coming-soon h3{ font-family: var(--font-display); color: var(--text-muted); font-size:16px; font-weight:600; }
.coming-soon p{ font-family: var(--font-mono); font-size:11.5px; max-width:360px; }

/* modal */
.modal-backdrop{
  display:none; position:fixed; inset:0; background: rgba(4,6,12,0.65);
  z-index:200; align-items:center; justify-content:center; backdrop-filter: blur(2px);
}
.modal-backdrop.show{ display:flex; }
.modal{
  background: var(--bg-panel-raised); border:1px solid var(--line-bright); border-radius:14px;
  padding:24px; width:420px; max-width:92vw; box-shadow: var(--shadow-modal);
  animation: modalIn .18s ease;
}
@keyframes modalIn{ from{ opacity:0; transform: translateY(10px) scale(.98); } to{ opacity:1; transform: translateY(0) scale(1); } }
.modal h3{ font-family: var(--font-display); font-size:15px; margin-bottom:16px; }
.field{ margin-bottom:14px; }
.field label{ display:block; font-family: var(--font-mono); font-size:10.5px; color: var(--text-muted); margin-bottom:5px; text-transform:uppercase; letter-spacing:0.5px; }
.field input, .field select{
  width:100%; background: var(--bg); border:1px solid var(--line); border-radius:8px;
  padding:9px 11px; color: var(--text); font-size:13px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus, .field select:focus{ outline:none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
.modal-actions{ display:flex; gap:10px; margin-top:18px; }
.modal-actions .btn{ flex:1; justify-content:center; }

.kpi-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:14px; margin-bottom:18px; }
.kpi-card{ background: var(--bg-panel); border:1px solid var(--line); border-radius: var(--radius); padding:16px 18px; box-shadow: var(--shadow-sm); transition: transform .15s ease, box-shadow .15s ease; }
.kpi-card:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); }
.kpi-card .kpi-label{ font-family: var(--font-mono); font-size:10.5px; color: var(--text-muted); text-transform:uppercase; letter-spacing:0.5px; }
.kpi-card .kpi-value{ font-family: var(--font-display); font-size:24px; font-weight:700; margin-top:8px; }
.kpi-card .kpi-delta{ font-family: var(--font-mono); font-size:11px; color: var(--success); margin-top:4px; }

.hamburger-btn{ display:none; }
.sidebar-backdrop{ display:none; }

@media (max-width: 980px){
  .app{ grid-template-columns: 1fr; }
  .hamburger-btn{ display:flex; }
  .kpi-grid{ grid-template-columns: repeat(2,1fr); }

  .sidebar{
    position:fixed; top:0; left:0; z-index:300;
    transform: translateX(-100%);
    transition: transform .25s ease;
    box-shadow: var(--shadow-modal);
  }
  .sidebar.open{ transform: translateX(0); }

  .sidebar-backdrop.show{
    display:block; position:fixed; inset:0; z-index:290;
    background: rgba(4,6,12,0.55); backdrop-filter: blur(1px);
    animation: fadein .15s ease;
  }
}

@media (max-width: 640px){
  .content{ padding: 16px 14px; }
  .topbar{ padding: 12px 14px; }
  .kpi-grid{ grid-template-columns: 1fr; }
  .panel{ padding: 14px 14px; }
  .modal{ padding: 18px; width: 94vw; }
}

/* Mapping Jaringan — animasi garis "mengalir" buat jalur fiber ODC-ODP */
.flow-line-animated{
  stroke-dasharray: 8, 6;
  animation: flowDash 0.8s linear infinite;
}
@keyframes flowDash{
  to{ stroke-dashoffset: -28; }
}