/* ORANMS — Green Theme matching nms.oranet.in */
/* 2026-08-17, Chirag: Day/Night toggle. Default (no data-theme attr, or
   data-theme="light") = Day. [data-theme="dark"] = Night. The toggle button
   in the topbar (layout.php) sets document.documentElement.dataset.theme
   and saves the choice, applied before paint to avoid a flash. */
:root {
  color-scheme: light; /* matches the theme actually in effect -- stops the browser's OWN auto-dark from re-inverting us on top of our own toggle */
  --bg:         #f4f7f4;
  --bg2:        #ffffff;
  --bg3:        #e8f5e9;
  --border:     #c8e6c9;
  --text:       #1b2a1b;
  --text2:      #2d3748;
  --muted:      #6b7280;
  --primary:    #1b5e20;
  --primary-h:  #145217;
  --primary-lt: #e8f5e9;
  --header-bg:  #1a3a24;
  --header-txt: #ffffff;
  --green:      #2e7d32;
  --green-lt:   #4caf50;
  --red:        #c62828;
  --yellow:     #e65100;
  --purple:     #6a1b9a;
  --cyan:       #00838f;
  --blue:       #1565c0;
  --sidebar-w:  210px;
  --topbar-h:   54px;
  --radius:     8px;
  --shadow:     0 1px 4px rgba(0,0,0,.1);
  --shadow-md:  0 4px 16px rgba(0,0,0,.12);

  /* Structural surfaces that used to be hardcoded #fff / #f1f8f1 / etc. --
     pulled into variables so Night mode can repaint them too. */
  --card-bg:       #ffffff;
  --panel-head-bg: #f1f8f1;
  --input-bg:      #ffffff;
  --input-border:  #d1d5db;
  --canvas-bg:     #edf7ed;
  --scroll-track:  #e8f5e9;
  --scroll-thumb:  #a5d6a7;
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg:         #101713;
  --bg2:        #1a231d;
  --bg3:        #1f2e23;
  --border:     #2d4033;
  --text:       #eaf5ec;
  --text2:      #d3ddd6;
  --muted:      #93a396;
  --primary:    #4caf50;
  --primary-h:  #66bb6a;
  --primary-lt: #1f3a26;
  --header-bg:  #0c1610;
  --header-txt: #ffffff;
  --green:      #4caf50;
  --green-lt:   #81c784;
  --red:        #ef5350;
  --yellow:     #ffa726;
  --purple:     #ba68c8;
  --cyan:       #4dd0e1;
  --blue:       #64b5f6;
  --shadow:     0 1px 4px rgba(0,0,0,.4);
  --shadow-md:  0 4px 16px rgba(0,0,0,.5);

  --card-bg:       #1a231d;
  --panel-head-bg: #202b23;
  --input-bg:      #16201a;
  --input-border:  #3a4d40;
  --canvas-bg:     #16201a;
  --scroll-track:  #1a231d;
  --scroll-thumb:  #3a4d40;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 14px; }
body {
  background: var(--bg);
  color: var(--text2);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  min-height: 100vh;
}

/* ─── LAYOUT ──────────────────────────────────────────────────── */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  background: var(--header-bg);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0;
  height: 100vh;
  z-index: 100;
  transition: transform .25s;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  font-weight: 700;
  font-size: 15px;
  color: #fff;
}
.brand-icon { font-size: 22px; }

.sidebar-nav { flex: 1; padding: 8px 0; overflow-y: auto; }
.sidebar-footer { border-top: 1px solid rgba(255,255,255,.1); padding: 8px 0; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  color: rgba(255,255,255,.75);
  text-decoration: none;
  transition: background .15s, color .15s;
  font-size: 13.5px;
  margin: 1px 6px;
  border-radius: 6px;
}
.nav-item:hover { background: rgba(255,255,255,.12); color: #fff; }
.nav-item.active {
  background: rgba(255,255,255,.18);
  color: #fff;
  font-weight: 600;
  border-left: 3px solid #4caf50;
}
.nav-icon { font-size: 16px; width: 20px; text-align: center; }
.nav-logout:hover { color: #ff8a80; background: rgba(255,0,0,.12); }

.main-area {
  margin-left: var(--sidebar-w);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ─── TOPBAR ──────────────────────────────────────────────────── */
.topbar {
  height: var(--topbar-h);
  background: var(--header-bg);
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 50;
}
.topbar-title { font-weight: 700; font-size: 15px; color: #fff; white-space:nowrap; margin-right:12px; }
.topbar-right { display: flex; align-items: center; gap: 10px; }
.sidebar-toggle { display: none; background: none; border: none; color: #fff; font-size: 20px; cursor: pointer; }

/* ── Live Stats Bar ─────────────────────────────────────────────── */
.live-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,.85);
  overflow: hidden;
}
.lb-item { white-space: nowrap; }
.lb-sep  { color: rgba(255,255,255,.3); }
.lb-pppoe span { color: #4ade80; }
.lb-bw span   { color: #7dd3fc; }
.lb-alive span { color: #fbbf24; }
@media (max-width: 700px) { .live-bar { display: none; } }

.alert-badge {
  background: #c62828;
  color: white;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  text-decoration: none;
  animation: pulse 2s infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.65} }

/* 2026-08-18, Chirag: Day/Night toggle button (topbar) */
.theme-toggle {
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
}
.theme-toggle:hover { background: rgba(255,255,255,.28); }

.user-chip {
  background: rgba(255,255,255,.15);
  color: #fff;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid rgba(255,255,255,.2);
}

.page-content { padding: 20px; flex: 1; }

/* ─── FLASH ───────────────────────────────────────────────────── */
.flash {
  margin: 10px 20px;
  padding: 10px 16px;
  border-radius: var(--radius);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}
.flash-success { background: #e8f5e9; border: 1px solid #a5d6a7; color: #1b5e20; }
.flash-error   { background: #ffebee; border: 1px solid #ef9a9a; color: #b71c1c; }
.flash-info    { background: #e3f2fd; border: 1px solid #90caf9; color: #0d47a1; }
.flash button  { background: none; border: none; color: inherit; cursor: pointer; font-size: 16px; }
[data-theme="dark"] .flash-success { background: #16321a; border-color: #2e5d34; color: #a5d6a7; }
[data-theme="dark"] .flash-error   { background: #3a1a1a; border-color: #6b2c2c; color: #ef9a9a; }
[data-theme="dark"] .flash-info    { background: #14263a; border-color: #29486b; color: #90caf9; }

/* ─── STATS GRID ──────────────────────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
  margin-bottom: 1.5rem;
}
.stat-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  box-shadow: var(--shadow);
  transition: box-shadow .15s;
}
.stat-card:hover { box-shadow: var(--shadow-md); }
.stat-val   { font-size: 2.2rem; font-weight: 700; line-height: 1; color: var(--green); }
.stat-label { font-size: .75rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.stat-icon  { font-size: 1.3rem; }
.stat-blue   { border-top: 3px solid var(--blue); }
.stat-blue .stat-val { color: var(--blue); }
.stat-green  { border-top: 3px solid var(--green); }
.stat-green .stat-val { color: var(--green); }
.stat-red    { border-top: 3px solid var(--red); }
.stat-red .stat-val { color: var(--red); }
.stat-yellow { border-top: 3px solid var(--yellow); }
.stat-yellow .stat-val { color: var(--yellow); }
.stat-purple { border-top: 3px solid var(--purple); }
.stat-purple .stat-val { color: var(--purple); }
.stat-cyan   { border-top: 3px solid var(--cyan); }
.stat-cyan .stat-val { color: var(--cyan); }

/* ─── PANEL ───────────────────────────────────────────────────── */
.panel {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 20px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.panel-head {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--panel-head-bg);
}
.panel-head h2 { font-size: 14px; font-weight: 600; color: var(--primary); }
.panel-body { padding: 16px; }
.panel-title {
  padding: .7rem 1rem;
  font-weight: 600;
  font-size: .92rem;
  border-bottom: 1px solid var(--border);
  background: var(--panel-head-bg);
  color: var(--primary);
}

/* ─── TABLE ───────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th {
  padding: 10px 12px;
  text-align: left;
  font-weight: 600;
  color: var(--primary);
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
  background: var(--panel-head-bg);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .04em;
}
.data-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--bg3);
  vertical-align: middle;
  color: var(--text2);
}
.data-table tr:hover td { background: #f1f8f1; }
.data-table tr:last-child td { border-bottom: none; }
.monospace { font-family: 'Cascadia Code', 'Fira Code', monospace; font-size: 12px; color: var(--cyan); }

/* ─── BADGES ──────────────────────────────────────────────────── */
.badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
.badge-green  { background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; }
.badge-red    { background: #ffebee; color: #c62828; border: 1px solid #ef9a9a; }
.badge-yellow { background: #fff3e0; color: #e65100; border: 1px solid #ffcc02; }
.badge-blue   { background: #e3f2fd; color: #1565c0; border: 1px solid #90caf9; }
.badge-gray   { background: #f5f5f5; color: #616161; border: 1px solid #e0e0e0; }
[data-theme="dark"] .badge-green  { background: #16321a; color: #81c784; border-color: #2e5d34; }
[data-theme="dark"] .badge-red    { background: #3a1a1a; color: #ef9a9a; border-color: #6b2c2c; }
[data-theme="dark"] .badge-yellow { background: #3a2a10; color: #ffcc80; border-color: #6b4c1e; }
[data-theme="dark"] .badge-blue   { background: #14263a; color: #90caf9; border-color: #29486b; }
[data-theme="dark"] .badge-gray   { background: #2a2f2c; color: #cfd8d2; border-color: #454c48; }

/* ─── FORMS ───────────────────────────────────────────────────── */
.form-row { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 14px; }
.form-group { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 180px; }
.form-group label { font-size: 12px; color: var(--text2); font-weight: 600; }
.form-group input,
.form-group select,
.form-group textarea {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 6px;
  color: var(--text2);
  padding: 8px 10px;
  font-size: 13px;
  outline: none;
  transition: border .15s, box-shadow .15s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(46,125,50,.1);
}
.form-group textarea { min-height: 100px; resize: vertical; font-family: monospace; }

/* ─── BUTTONS ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 6px;
  border: none;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, box-shadow .15s;
}
.btn:hover { box-shadow: var(--shadow-md); }
.btn-primary, .btn-blue { background: var(--header-bg); color: #fff; }
.btn-primary:hover, .btn-blue:hover { background: #0f2718; }
.btn-success { background: #2e7d32; color: #fff; }
.btn-success:hover { background: #1b5e20; }
.btn-danger  { background: var(--red); color: #fff; }
.btn-warning { background: #f57c00; color: #fff; }
.btn-ghost   { background: var(--bg3); color: var(--primary); }
.btn-outline {
  background: transparent;
  color: var(--primary);
  border: 1px solid var(--border);
}
.btn-outline:hover { background: var(--bg3); border-color: var(--green); }
.btn-sm { padding: 4px 10px; font-size: 12px; }
.btn-loading { opacity: .6; pointer-events: none; }

/* ─── TOOLBAR ─────────────────────────────────────────────────── */
.toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; gap: 10px; }
.toolbar-left, .toolbar-right { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.page-title { font-size: 18px; font-weight: 700; color: var(--primary); }
.page-sub   { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* ─── TERMINAL ────────────────────────────────────────────────── */
.terminal {
  background: #0a1628;
  border: 1px solid #1b3a2c;
  border-radius: var(--radius);
  padding: 12px;
  font-family: 'Cascadia Code', 'Fira Code', monospace;
  font-size: 12px;
  color: #4caf50;
  overflow-x: auto;
  white-space: pre-wrap;
  max-height: 400px;
  overflow-y: auto;
}

/* ─── STATUS ──────────────────────────────────────────────────── */
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.dot-green  { background: #4caf50; box-shadow: 0 0 6px #4caf50; }
.dot-red    { background: var(--red); }
.dot-yellow { background: #ffa000; }
.dot-gray   { background: #9e9e9e; }

/* ─── DEVICE CARDS ────────────────────────────────────────────── */
.device-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.device-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  text-decoration: none;
  color: var(--text2);
  transition: border-color .15s, transform .15s, box-shadow .15s;
  display: block;
  box-shadow: var(--shadow);
}
.device-card:hover { border-color: var(--green); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.device-card.down, .device-card-down { border-left: 3px solid var(--red); }
.device-card.up,   .device-card-up   { border-left: 3px solid #4caf50; }
.device-card-unknown { border-left: 3px solid #9e9e9e; }
.device-card-head  { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.device-card-name  { font-weight: 600; font-size: 14px; color: var(--text); }
.device-card-ip    { font-size: 12px; color: var(--cyan); font-family: monospace; }
.device-card-meta  { font-size: 11px; color: var(--muted); margin-top: 6px; }

/* ─── TOPOLOGY ────────────────────────────────────────────────── */
#topology-canvas {
  background: var(--canvas-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  width: 100%;
  height: 550px;
  cursor: grab;
}
#topology-canvas:active { cursor: grabbing; }

/* ─── IMPORT STEPS ────────────────────────────────────────────── */
.step-list { display: flex; gap: 0; margin-bottom: 20px; }
.step { flex: 1; text-align: center; padding: 10px; font-size: 12px; border-bottom: 2px solid var(--border); color: var(--muted); }
.step.active { border-color: var(--green); color: var(--green); font-weight: 600; }
.step.done   { border-color: #4caf50; color: #2e7d32; }

/* ─── IP POOL BAR ─────────────────────────────────────────────── */
.pool-bar { height: 10px; background: #e8f5e9; border-radius: 5px; overflow: hidden; margin-top: 6px; }
.pool-bar-fill { height: 100%; background: var(--green); border-radius: 5px; transition: width .5s; }
.pool-bar-fill.warn { background: #ffa000; }
.pool-bar-fill.full { background: var(--red); }

/* ─── TABS ────────────────────────────────────────────────────── */
.tab-bar { display: flex; border-bottom: 2px solid var(--border); margin-bottom: 1rem; overflow-x: auto; }
.tab-link { padding: .55rem 1.1rem; font-size: .86rem; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -2px; white-space: nowrap; transition: color .15s, border-color .15s; }
.tab-link:hover { color: var(--primary); }
.tab-link.active { color: var(--primary); border-bottom-color: var(--green); font-weight: 600; }
.tab-content { display: none; }
.tab-content.active { display: block; }

/* ─── SEARCH BOX ──────────────────────────────────────────────── */
.search-box {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 6px;
  color: var(--text2);
  padding: .5rem .8rem;
  font-size: .88rem;
  outline: none;
  transition: border .15s;
}
.search-box:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(46,125,50,.1); }

/* ─── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }
  .main-area { margin-left: 0; }
  .sidebar-toggle { display: block; }
  .stat-card { min-width: 140px; }
  .form-row { flex-direction: column; }
}

/* ─── SCROLLBAR ───────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--scroll-track); }
::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--green); }

/* ─── UTILITY ─────────────────────────────────────────────────── */
.muted { color: var(--muted); }
.text-green  { color: #2e7d32; }
.text-red    { color: var(--red); }
.text-blue   { color: var(--blue); }
.text-yellow { color: var(--yellow); }
.mt-10 { margin-top: 10px; }
.mt-20 { margin-top: 20px; }
.mb-10 { margin-bottom: 10px; }
.mb-20 { margin-bottom: 20px; }
.flex  { display: flex; }
.gap-8 { gap: 8px; }
.items-center { align-items: center; }
hr.divider { border: none; border-top: 1px solid var(--border); margin: 16px 0; }

.info-box { background: #e8f5e9; border: 1px solid #a5d6a7; border-radius: var(--radius); padding: 12px 16px; font-size: 13px; color: #1b5e20; }
.warn-box  { background: #fff8e1; border: 1px solid #ffe082; border-radius: var(--radius); padding: 12px 16px; font-size: 13px; color: #e65100; }
[data-theme="dark"] .info-box { background: #16321a; border-color: #2e5d34; color: #a5d6a7; }
[data-theme="dark"] .warn-box  { background: #3a2a10; border-color: #6b4c1e; color: #ffcc80; }
[data-theme="dark"] .pool-bar { background: #16201a; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--primary-h); }