:root {
  --bg: #0a0f1c;
  --surface: #10182b;
  --surface2: #182338;
  --surface3: #1f2c47;
  --border: #26324a;
  --text: #e9edf7;
  --text2: #8996b3;
  --text3: #566082;
  --red: #ff5d7a; --red-light: #2a1420; --red-border: #6b2338;
  --orange: #ffab4a; --orange-light: #2a1e0e; --orange-border: #6b4a1a;
  --yellow: #ffd166; --yellow-light: #2a2410; --yellow-border: #6b5a1a;
  --green: #3ddc97; --green-light: #0e2a22; --green-border: #1a6b4a;
  --blue: #5b9dff; --blue-light: #0e1e3a; --blue-border: #1a4a8a;
  --purple: #b18aff;
  --accent: #22d9c8;         /* cyan/teal signal - identitas utama "fiber network ops" */
  --accent-light: #0a2b28;
  --accent-border: #14615a;
  --shadow: 0 1px 3px rgba(0,0,0,0.45);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.45);
  --radius: 12px;
  --sidebar-w: 264px;
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;
  --font-mono: 'SF Mono', 'Cascadia Code', 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
}
[data-theme="light"] {
  --bg: #eef1f7; --surface: #ffffff; --surface2: #f5f7fb; --surface3: #eaeef6; --border: #dde3ee;
  --text: #121826; --text2: #4d5975; --text3: #7b869e;
  --red-light: #fff0f3; --orange-light: #fff6ea; --yellow-light: #fffbe8;
  --green-light: #ecfdf6; --blue-light: #edf3ff; --accent-light: #e6fbf8;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font-sans); background: var(--bg); color: var(--text); min-height: 100vh; transition: background .2s, color .2s; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }

/* ===== LOGIN PAGE ===== */
.login-body { display:flex; align-items:center; justify-content:center; min-height:100vh; background: linear-gradient(135deg,#0d1117,#1e3a5f); }
.login-card { background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); padding: 40px 36px; width: 360px; text-align:center; box-shadow: var(--shadow-md); }
.login-logo { font-size: 40px; margin-bottom: 8px; }
.login-card h1 { font-size: 20px; margin-bottom:4px; }
.login-sub { color: var(--text2); font-size: 13px; margin-bottom: 24px; }
.login-card form { text-align:left; display:flex; flex-direction:column; gap: 6px; }
.login-card label { font-size: 12px; color: var(--text2); margin-top: 10px; }
.login-card input { background: var(--surface2); border:1px solid var(--border); color: var(--text); padding: 10px 12px; border-radius: 8px; font-size: 14px; }
.login-footer { margin-top: 20px; font-size: 11px; color: var(--text3); }
.btn-block { width: 100%; margin-top: 18px; }

/* ===== APP SHELL ===== */
.app-shell { display: flex; min-height: 100vh; }
.sidebar { width: var(--sidebar-w); background: var(--surface); border-right: 1px solid var(--border); display:flex; flex-direction:column; position: fixed; top:0; bottom:0; left:0; z-index: 40; transition: transform .2s; }
.sidebar-brand { display:flex; align-items:center; gap:10px; padding: 20px 18px; border-bottom: 1px solid var(--border); position: relative; overflow: hidden; }
.sidebar-brand::after {
  content: ''; position: absolute; left:0; right:0; bottom:-1px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  background-size: 200% 100%;
  animation: fiber-pulse 3.5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .sidebar-brand::after { animation: none; } }
@keyframes fiber-pulse {
  0%   { background-position: 200% 0; opacity: .3; }
  50%  { background-position: 0% 0;   opacity: 1; }
  100% { background-position: -200% 0; opacity: .3; }
}
.brand-icon { font-size: 26px; }
.brand-title { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.brand-sub { font-size: 11px; color: var(--accent); font-family: var(--font-mono); letter-spacing: .03em; text-transform: uppercase; }
.sidebar-nav { flex:1; overflow-y:auto; padding: 14px 10px; display:flex; flex-direction:column; gap:2px; }
.sidebar-nav a { padding: 10px 12px; border-radius: 8px; font-size: 13.5px; color: var(--text2); display:flex; align-items:center; gap:8px; }
.sidebar-nav a:hover { background: var(--surface2); color: var(--text); }
.sidebar-nav a.active { background: var(--accent-light); color: var(--accent); font-weight:600; }
.nav-group-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text3); margin: 14px 10px 4px; }
.sidebar-footer { border-top: 1px solid var(--border); padding: 14px 16px; }
.user-chip { display:flex; align-items:center; gap:10px; margin-bottom: 10px; }
.user-avatar { width:34px; height:34px; border-radius:50%; background: var(--blue); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; }
.user-name { font-size: 13px; font-weight:600; }
.user-role { font-size: 11px; color: var(--text2); text-transform:capitalize; }
.btn-logout { display:block; text-align:center; background: var(--surface2); border:1px solid var(--border); padding: 7px; border-radius: 8px; font-size: 12.5px; color: var(--text2); }
.btn-logout:hover { color: var(--red); border-color: var(--red-border); }

.main-area { margin-left: var(--sidebar-w); flex:1; display:flex; flex-direction:column; min-width:0; }
.topbar { display:flex; align-items:center; gap:14px; padding: 16px 26px; border-bottom: 1px solid var(--border); background: var(--surface); position: sticky; top:0; z-index: 30; }
.topbar h1 { font-size: 17px; flex:1; }
.hamburger { display:none; background:none; border:none; color: var(--text); font-size: 20px; cursor:pointer; }
.topbar-right { display:flex; align-items:center; gap:10px; }
.theme-btn { background: var(--surface2); border:1px solid var(--border); color: var(--text); padding: 7px 12px; border-radius: 20px; cursor:pointer; font-size:13px; }
.date-badge { background: var(--surface2); border:1px solid var(--border); padding: 6px 12px; border-radius: 20px; font-size: 12px; color: var(--text2); }
.content { padding: 24px; }

/* ===== GRID & CARDS ===== */
.grid { display:grid; gap: 16px; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1100px){ .grid-4{grid-template-columns:repeat(2,1fr)} .grid-3{grid-template-columns:repeat(2,1fr)} }
@media (max-width: 640px){ .grid-4,.grid-3,.grid-2{grid-template-columns:1fr} }

.card { background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); }
.card-title { font-size: 12.5px; color: var(--text2); text-transform: uppercase; letter-spacing:.04em; margin-bottom: 8px; }
.card-value { font-size: 26px; font-weight: 700; }
.card-sub { font-size: 12px; color: var(--text2); margin-top: 4px; }
.metric-red .card-value { color: var(--red); }
.metric-orange .card-value { color: var(--orange); }
.metric-green .card-value { color: var(--green); }
.metric-blue .card-value { color: var(--blue); }
.kpi-card { transition: transform .15s, box-shadow .15s, border-color .15s; }
.kpi-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--blue); }

/* ===== KPI CARD (dashboard) - restyle: icon badge + mono number + left accent stripe ===== */
.kpi-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 1100px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .kpi-grid { grid-template-columns: 1fr; } }
.kpi {
  background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--kpi-accent, var(--accent));
  border-radius: var(--radius); padding: 16px 18px; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  display: flex; flex-direction: column; gap: 10px;
}
.kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--kpi-accent, var(--accent)); }
.kpi-top { display:flex; align-items:center; justify-content:space-between; }
.kpi-icon {
  width: 34px; height: 34px; border-radius: 9px; display:flex; align-items:center; justify-content:center;
  font-size: 16px; background: color-mix(in srgb, var(--kpi-accent, var(--accent)) 16%, transparent);
  color: var(--kpi-accent, var(--accent));
}
.kpi-label { font-size: 11.5px; color: var(--text2); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.kpi-value { font-family: var(--font-mono); font-size: 30px; font-weight: 700; line-height: 1; letter-spacing: -.01em; color: var(--kpi-accent, var(--accent)); }
.kpi-sub { font-size: 11.5px; color: var(--text3); }
.kpi-arrow { font-size: 11px; color: var(--text3); opacity: 0; transition: opacity .15s; }
.kpi:hover .kpi-arrow { opacity: 1; }

.section-title { font-size: 15px; font-weight: 700; margin: 26px 0 12px; display:flex; align-items:center; justify-content:space-between; }

/* ===== ALERTS ===== */
.alert { padding: 12px 16px; border-radius: 8px; font-size: 13px; margin-bottom: 16px; border: 1px solid; }
.alert-danger { background: var(--red-light); border-color: var(--red-border); color: var(--red); }
.alert-warning { background: var(--orange-light); border-color: var(--orange-border); color: var(--orange); }
.alert-success { background: var(--green-light); border-color: var(--green-border); color: var(--green); }
.alert-info { background: var(--blue-light); border-color: var(--blue-border); color: var(--blue); }
.alert-banner { display:flex; align-items:center; gap:10px; }
.pulse-dot { width:8px; height:8px; border-radius:50%; background: currentColor; animation: pulse 1.4s infinite; flex-shrink:0; }
@keyframes pulse { 0%{opacity:1} 50%{opacity:.3} 100%{opacity:1} }

/* ===== TABLE ===== */
.table-wrap { background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); overflow: auto; box-shadow: var(--shadow); }
table.data-table { width:100%; border-collapse: collapse; font-size: 13px; min-width: 800px; }
table.data-table th { background: var(--surface2); color: var(--text2); text-align:left; padding: 10px 12px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; position: sticky; top:0; border-bottom: 1px solid var(--border); white-space:nowrap; }
table.data-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); white-space:nowrap; }
table.data-table tbody tr:hover { background: var(--surface2); }
.text-right { text-align:right; }
.text-center { text-align:center; }
table.data-table td.text-right { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
table.data-table td strong { font-family: var(--font-mono); font-weight: 600; }

.badge { display:inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight:600; }
.badge-green { background: var(--green-light); color: var(--green); border:1px solid var(--green-border); }
.badge-red { background: var(--red-light); color: var(--red); border:1px solid var(--red-border); }
.badge-orange { background: var(--orange-light); color: var(--orange); border:1px solid var(--orange-border); }
.badge-blue { background: var(--blue-light); color: var(--blue); border:1px solid var(--blue-border); }
.badge-gray { background: var(--surface2); color: var(--text2); border:1px solid var(--border); }

.progress-bar-track { background: var(--surface2); border-radius: 20px; height: 8px; width: 100px; overflow:hidden; display:inline-block; vertical-align:middle; }
.progress-bar-fill { height:100%; background: var(--blue); }

/* ===== TOOLBAR / FILTERS ===== */
.toolbar { display:flex; gap:10px; flex-wrap: wrap; align-items:center; margin-bottom: 16px; }
.toolbar input, .toolbar select { background: var(--surface); border:1px solid var(--border); color: var(--text); padding: 8px 12px; border-radius: 8px; font-size: 13px; }
.toolbar .spacer { flex:1; }

.btn { display:inline-flex; align-items:center; gap:6px; padding: 9px 16px; border-radius: 8px; font-size: 13.5px; font-weight:600; cursor:pointer; border:1px solid transparent; }
.btn-primary { background: var(--blue); color: #04101c; }
.btn-primary:hover { opacity:.9; }
.btn-secondary { background: var(--surface2); color: var(--text); border-color: var(--border); }
.btn-danger { background: var(--red); color: #fff; }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn-icon { padding: 6px 9px; }

/* ===== MODAL ===== */
.modal-overlay { position: fixed; inset:0; background: rgba(0,0,0,.6); display:none; align-items:center; justify-content:center; z-index: 100; padding: 20px; }
.modal-overlay.open { display:flex; }
.modal-box { background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); width: 100%; max-width: 640px; max-height: 90vh; overflow-y:auto; box-shadow: var(--shadow-md); }
.modal-header { display:flex; justify-content:space-between; align-items:center; padding: 18px 22px; border-bottom: 1px solid var(--border); }
.modal-header h2 { font-size: 16px; }
.modal-close { background:none; border:none; color: var(--text2); font-size: 20px; cursor:pointer; }
.modal-body { padding: 20px 22px; display:flex; flex-direction:column; gap:14px; }
.modal-footer { padding: 16px 22px; border-top: 1px solid var(--border); display:flex; justify-content:flex-end; gap:10px; }

.form-group { display:flex; flex-direction:column; gap:5px; }
.form-row { display:grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width:560px){ .form-row{grid-template-columns:1fr} }
.form-group label { font-size: 12px; color: var(--text2); }
.form-group input, .form-group select, .form-group textarea {
  background: var(--surface2); border:1px solid var(--border); color: var(--text);
  padding: 9px 11px; border-radius: 8px; font-size: 13.5px; font-family: inherit;
}
.form-group textarea { resize: vertical; min-height: 60px; }
.form-hint { font-size: 11px; color: var(--text3); }

.chart-card { background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); }
.chart-card canvas { max-height: 300px; }

.empty-state { text-align:center; padding: 40px 20px; color: var(--text3); }

.pagination { display:flex; gap:6px; justify-content:center; margin-top: 14px; }
.pagination button { background: var(--surface2); border:1px solid var(--border); color: var(--text); padding: 6px 12px; border-radius: 6px; cursor:pointer; font-size:12.5px; }
.pagination button.active { background: var(--blue); color:#04101c; border-color: var(--blue); }
.pagination button:disabled { opacity:.4; cursor:not-allowed; }

/* Mobile sidebar */
@media (max-width: 900px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }
  .main-area { margin-left: 0; }
  .hamburger { display:block; }
}