/* ==========================================================================
   DVM Techno - TP-Link Pharos CPE Management Dashboard
   style.css
   ========================================================================== */

:root{
  --brand-blue:#2563eb;
  --brand-blue-dark:#1d4ed8;
  --brand-cyan:#06b6d4;
  --brand-indigo:#4f46e5;

  --bg-app:#f1f4f9;
  --bg-surface:#ffffff;
  --bg-surface-2:#f8fafc;
  --text-primary:#1e293b;
  --text-secondary:#64748b;
  --border-color:#e2e8f0;

  --sidebar-bg:#0f172a;
  --sidebar-bg-2:#111c34;
  --sidebar-text:#94a3b8;
  --sidebar-text-active:#ffffff;
  --sidebar-border:rgba(255,255,255,.06);

  --success:#16a34a;
  --warning:#eab308;
  --danger:#dc2626;
  --info:#0ea5e9;

  --radius:14px;
  --radius-sm:8px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.06);
  --shadow-md:0 6px 16px rgba(15,23,42,.08);
  --shadow-lg:0 16px 40px rgba(15,23,42,.14);
  --transition:.25s cubic-bezier(.4,0,.2,1);
}

[data-theme="dark"]{
  --bg-app:#0b1220;
  --bg-surface:#131c2e;
  --bg-surface-2:#0f1729;
  --text-primary:#e2e8f0;
  --text-secondary:#94a3b8;
  --border-color:#1e293b;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  background:var(--bg-app);
  color:var(--text-primary);
  font-family:"Segoe UI",Roboto,Inter,Arial,sans-serif;
  transition:background var(--transition),color var(--transition);
  overflow-x:hidden;
}

a{text-decoration:none;}
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:#94a3b8;border-radius:8px;}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#334155;}

/* ===================== TOP NAVBAR ===================== */
.topnav{
  position:sticky;top:0;z-index:1040;
  height:62px;
  display:flex;align-items:center;
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  border-bottom:1px solid var(--border-color);
  padding:0 1rem;
  box-shadow:var(--shadow-sm);
}
[data-theme="dark"] .topnav{background:rgba(19,28,46,.85);}

.topnav .brand{
  display:flex;align-items:center;gap:.6rem;
  font-weight:700;font-size:1.05rem;color:var(--text-primary);
  white-space:nowrap;
}
.topnav .brand .logo-icon{
  width:36px;height:36px;border-radius:10px;
  background:linear-gradient(135deg,var(--brand-blue),var(--brand-cyan));
  display:flex;align-items:center;justify-content:center;color:#fff;
  box-shadow:var(--shadow-md);
}
.topnav .brand small{display:block;font-size:.65rem;font-weight:500;color:var(--text-secondary);}

.topnav .nav-link{
  color:var(--text-secondary)!important;
  font-weight:500;font-size:.88rem;
  padding:.5rem .85rem!important;
  border-radius:var(--radius-sm);
  transition:var(--transition);
}
.topnav .nav-link i{margin-right:.4rem;}
.topnav .nav-link:hover,.topnav .nav-link.active{
  color:var(--brand-blue)!important;
  background:rgba(37,99,235,.08);
}

.sidebar-toggle-btn{
  border:none;background:transparent;font-size:1.1rem;color:var(--text-secondary);
  width:38px;height:38px;border-radius:var(--radius-sm);
  display:flex;align-items:center;justify-content:center;margin-right:.5rem;
}
.sidebar-toggle-btn:hover{background:rgba(37,99,235,.08);color:var(--brand-blue);}

.theme-toggle-btn{
  border:none;background:transparent;font-size:1.05rem;color:var(--text-secondary);
  width:38px;height:38px;border-radius:50%;
}
.theme-toggle-btn:hover{background:rgba(37,99,235,.08);color:var(--brand-blue);}

.navbar-search{
  position:relative;max-width:280px;
}
.navbar-search input{
  background:var(--bg-surface-2);border:1px solid var(--border-color);
  border-radius:20px;padding:.4rem .9rem .4rem 2.1rem;font-size:.85rem;color:var(--text-primary);
}
.navbar-search i{position:absolute;left:.8rem;top:50%;transform:translateY(-50%);color:var(--text-secondary);font-size:.8rem;}

.user-profile-btn{
  display:flex;align-items:center;gap:.5rem;border:none;background:transparent;
  padding:.3rem .6rem;border-radius:20px;
}
.user-profile-btn:hover{background:rgba(37,99,235,.08);}
.user-avatar{
  width:32px;height:32px;border-radius:50%;
  background:linear-gradient(135deg,var(--brand-indigo),var(--brand-blue));
  color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem;
}
.notif-dot{
  position:absolute;top:4px;right:4px;width:8px;height:8px;border-radius:50%;
  background:var(--danger);border:2px solid var(--bg-surface);
}

/* ===================== SIDEBAR ===================== */
.app-shell{display:flex;min-height:calc(100vh - 62px);}

.sidebar{
  width:250px;flex-shrink:0;
  background:linear-gradient(180deg,var(--sidebar-bg),var(--sidebar-bg-2));
  color:var(--sidebar-text);
  transition:width var(--transition),margin var(--transition);
  position:sticky;top:62px;height:calc(100vh - 62px);
  overflow-y:auto;z-index:1020;
}
.sidebar.collapsed{width:74px;}
.sidebar.collapsed .nav-label,
.sidebar.collapsed .sidebar-section-title,
.sidebar.collapsed .sidebar-footer-text{display:none;}
.sidebar.collapsed .sidebar-link{justify-content:center;}

.sidebar-section-title{
  font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  color:#475569;padding:1rem 1.2rem .4rem;font-weight:700;
}
.sidebar-nav{list-style:none;padding:.4rem;margin:0;}
.sidebar-link{
  display:flex;align-items:center;gap:.8rem;
  padding:.62rem .85rem;border-radius:var(--radius-sm);
  color:var(--sidebar-text);font-size:.87rem;font-weight:500;
  margin-bottom:.15rem;cursor:pointer;transition:var(--transition);
  white-space:nowrap;
}
.sidebar-link i{width:18px;text-align:center;font-size:.95rem;}
.sidebar-link:hover{background:var(--sidebar-border);color:#fff;}
.sidebar-link.active{
  background:linear-gradient(135deg,var(--brand-blue),var(--brand-indigo));
  color:#fff;box-shadow:0 4px 14px rgba(37,99,235,.35);
}
.sidebar-link .badge-mini{margin-left:auto;font-size:.65rem;}

.sidebar-footer-text{padding:1rem;font-size:.72rem;color:#475569;border-top:1px solid var(--sidebar-border);margin-top:.5rem;}

.main-content{flex:1;min-width:0;padding:1.4rem 1.6rem 3rem;}

@media (max-width:991px){
  .sidebar{position:fixed;left:-260px;top:62px;height:calc(100vh - 62px);box-shadow:var(--shadow-lg);}
  .sidebar.mobile-open{left:0;}
  .sidebar.collapsed{width:250px;}
  .main-content{padding:1rem;}
}

/* ===================== BREADCRUMB ===================== */
.breadcrumb-bar{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.6rem;
  margin-bottom:1.2rem;
}
.breadcrumb-bar .breadcrumb{margin:0;background:transparent;font-size:.82rem;}
.page-title{font-size:1.4rem;font-weight:700;margin:0;}
.page-subtitle{color:var(--text-secondary);font-size:.85rem;}

/* ===================== CARDS ===================== */
.card{
  background:var(--bg-surface);
  border:1px solid var(--border-color);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  transition:transform var(--transition),box-shadow var(--transition);
}
.card:hover{box-shadow:var(--shadow-md);}
.glass{
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(16px) saturate(180%);
  -webkit-backdrop-filter:blur(16px) saturate(180%);
  border:1px solid rgba(255,255,255,.4);
}
[data-theme="dark"] .glass{background:rgba(19,28,46,.55);border-color:rgba(255,255,255,.08);}

.stat-card{
  position:relative;overflow:hidden;border:none;color:#fff;border-radius:var(--radius);
  padding:1.3rem 1.4rem;box-shadow:var(--shadow-md);
}
.stat-card:hover{transform:translateY(-4px);}
.stat-card::after{
  content:"";position:absolute;right:-30px;top:-30px;width:140px;height:140px;border-radius:50%;
  background:rgba(255,255,255,.12);
}
.stat-card .stat-icon{
  width:46px;height:46px;border-radius:12px;background:rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;font-size:1.2rem;margin-bottom:.7rem;
}
.stat-card .stat-value{font-size:1.9rem;font-weight:800;line-height:1;}
.stat-card .stat-label{font-size:.78rem;opacity:.9;font-weight:500;margin-top:.2rem;}
.stat-card .stat-trend{font-size:.74rem;opacity:.85;margin-top:.5rem;display:flex;align-items:center;gap:.3rem;}

.grad-blue{background:linear-gradient(135deg,#2563eb,#1e3a8a);}
.grad-green{background:linear-gradient(135deg,#16a34a,#065f46);}
.grad-red{background:linear-gradient(135deg,#ef4444,#7f1d1d);}
.grad-purple{background:linear-gradient(135deg,#8b5cf6,#4c1d95);}
.grad-orange{background:linear-gradient(135deg,#f59e0b,#9a3412);}
.grad-teal{background:linear-gradient(135deg,#14b8a6,#115e59);}
.grad-cyan{background:linear-gradient(135deg,#06b6d4,#0e3a52);}
.grad-indigo{background:linear-gradient(135deg,#6366f1,#312e81);}

/* ===================== BADGES / STATUS ===================== */
.status-dot{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:.4rem;flex-shrink:0;}
.status-dot.online{background:var(--success);box-shadow:0 0 0 0 rgba(22,163,74,.6);animation:pulse-green 2s infinite;}
.status-dot.offline{background:var(--danger);}
.status-dot.warning{background:var(--warning);}
@keyframes pulse-green{
  0%{box-shadow:0 0 0 0 rgba(22,163,74,.55);}
  70%{box-shadow:0 0 0 7px rgba(22,163,74,0);}
  100%{box-shadow:0 0 0 0 rgba(22,163,74,0);}
}
.badge-soft-success{background:rgba(22,163,74,.12);color:var(--success);}
.badge-soft-danger{background:rgba(220,38,38,.12);color:var(--danger);}
.badge-soft-warning{background:rgba(234,179,8,.15);color:#92660a;}
[data-theme="dark"] .badge-soft-warning{color:#fbbf24;}
.badge-soft-info{background:rgba(14,165,233,.12);color:var(--info);}
.badge-soft{padding:.3rem .6rem;border-radius:20px;font-size:.72rem;font-weight:600;}

.signal-bars{display:inline-flex;align-items:flex-end;gap:2px;height:14px;}
.signal-bars span{width:3px;background:#cbd5e1;border-radius:1px;}
.signal-bars span:nth-child(1){height:30%;}
.signal-bars span:nth-child(2){height:55%;}
.signal-bars span:nth-child(3){height:75%;}
.signal-bars span:nth-child(4){height:100%;}
.signal-bars.s1 span:nth-child(1){background:var(--success);}
.signal-bars.s2 span:nth-child(1),.signal-bars.s2 span:nth-child(2){background:var(--success);}
.signal-bars.s3 span:nth-child(1),.signal-bars.s3 span:nth-child(2),.signal-bars.s3 span:nth-child(3){background:var(--success);}
.signal-bars.s4 span{background:var(--success);}

/* ===================== TABLE ===================== */
.table-card{border-radius:var(--radius);overflow:hidden;}
.table-modern{margin:0;}
.table-modern thead th{
  background:var(--bg-surface-2);color:var(--text-secondary);font-size:.72rem;
  text-transform:uppercase;letter-spacing:.05em;font-weight:700;border-bottom:1px solid var(--border-color);
  white-space:nowrap;cursor:pointer;user-select:none;
}
.table-modern thead th:hover{color:var(--brand-blue);}
.table-modern thead th i{font-size:.65rem;margin-left:.25rem;opacity:.6;}
.table-modern td{font-size:.85rem;vertical-align:middle;border-color:var(--border-color);color:var(--text-primary);}
.table-modern tbody tr{transition:background var(--transition);}
.table-modern tbody tr:hover{background:rgba(37,99,235,.05);}

.device-name-cell{display:flex;align-items:center;gap:.6rem;}
.device-icon-chip{
  width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,#2563eb,#0ea5e9);
  display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;
}

.action-btn{
  width:32px;height:32px;border-radius:8px;border:1px solid var(--border-color);
  background:var(--bg-surface);color:var(--text-secondary);display:inline-flex;
  align-items:center;justify-content:center;margin:0 1px;transition:var(--transition);font-size:.78rem;
}
.action-btn:hover{transform:translateY(-2px);}
.action-btn.view:hover{background:var(--info);color:#fff;border-color:var(--info);}
.action-btn.reboot:hover{background:var(--warning);color:#fff;border-color:var(--warning);}
.action-btn.upgrade:hover{background:var(--brand-indigo);color:#fff;border-color:var(--brand-indigo);}
.action-btn.edit:hover{background:var(--brand-blue);color:#fff;border-color:var(--brand-blue);}
.action-btn.delete:hover{background:var(--danger);color:#fff;border-color:var(--danger);}

/* ===================== FORMS / FILTERS ===================== */
.filter-bar{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;}
.search-box{position:relative;}
.search-box i{position:absolute;left:.9rem;top:50%;transform:translateY(-50%);color:var(--text-secondary);font-size:.8rem;}
.search-box input{padding-left:2.2rem;border-radius:20px;}

.btn-gradient-primary{
  background:linear-gradient(135deg,var(--brand-blue),var(--brand-indigo));border:none;color:#fff;
  box-shadow:0 4px 12px rgba(37,99,235,.3);
}
.btn-gradient-primary:hover{color:#fff;transform:translateY(-1px);box-shadow:0 6px 16px rgba(37,99,235,.4);}

/* ===================== PROGRESS / SCAN ===================== */
.scan-progress{height:10px;border-radius:20px;background:var(--bg-surface-2);overflow:hidden;}
.scan-progress .progress-bar{background:linear-gradient(90deg,var(--brand-blue),var(--brand-cyan));}

.ip-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:5px;}
.ip-cell{
  aspect-ratio:1;border-radius:6px;background:var(--bg-surface-2);border:1px solid var(--border-color);
  display:flex;align-items:center;justify-content:center;font-size:.6rem;color:var(--text-secondary);
  transition:var(--transition);
}
.ip-cell.scanning{background:rgba(37,99,235,.18);color:var(--brand-blue);animation:scanblink 1s infinite;}
.ip-cell.found{background:rgba(22,163,74,.18);color:var(--success);border-color:var(--success);font-weight:700;}
.ip-cell.empty{opacity:.35;}
@keyframes scanblink{0%,100%{opacity:1;}50%{opacity:.4;}}

/* ===================== GAUGE ===================== */
.gauge-wrap{position:relative;display:flex;flex-direction:column;align-items:center;}
.gauge-value{position:absolute;top:58%;left:50%;transform:translate(-50%,-50%);text-align:center;}
.gauge-value .num{font-size:1.7rem;font-weight:800;}
.gauge-value .lbl{font-size:.72rem;color:var(--text-secondary);}

/* ===================== ALERTS ===================== */
.alert-item{
  display:flex;gap:.8rem;align-items:flex-start;padding:.9rem;border-radius:var(--radius-sm);
  border:1px solid var(--border-color);margin-bottom:.6rem;transition:var(--transition);
}
.alert-item:hover{box-shadow:var(--shadow-sm);}
.alert-item.alert-success{border-left:4px solid var(--success);background:rgba(22,163,74,.05);}
.alert-item.alert-warning{border-left:4px solid var(--warning);background:rgba(234,179,8,.06);}
.alert-item.alert-danger{border-left:4px solid var(--danger);background:rgba(220,38,38,.05);}
.alert-icon{
  width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.alert-success .alert-icon{background:rgba(22,163,74,.15);color:var(--success);}
.alert-warning .alert-icon{background:rgba(234,179,8,.18);color:#92660a;}
.alert-danger .alert-icon{background:rgba(220,38,38,.15);color:var(--danger);}

/* ===================== UTILS ===================== */
.fade-in{animation:fadeIn .4s ease both;}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}

.loading-overlay{
  position:fixed;inset:0;background:rgba(15,23,42,.55);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;z-index:2000;
}
.spinner-ring{width:54px;height:54px;border:5px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

.toast-container-custom{position:fixed;top:75px;right:18px;z-index:2050;display:flex;flex-direction:column;gap:.5rem;}

.skeleton{background:linear-gradient(90deg,var(--bg-surface-2) 25%,var(--border-color) 37%,var(--bg-surface-2) 63%);background-size:400% 100%;animation:skeleton 1.4s ease infinite;border-radius:6px;}
@keyframes skeleton{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

.section-card{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius);padding:1.2rem;box-shadow:var(--shadow-sm);}

.kpi-mini{display:flex;align-items:center;gap:.7rem;}
.kpi-mini .ico{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1rem;color:#fff;}

@media print{
  .topnav,.sidebar,.no-print{display:none!important;}
  .main-content{padding:0;}
}

.coverage-map{
  height:340px;border-radius:var(--radius);background:
    radial-gradient(circle at 30% 30%,rgba(37,99,235,.25),transparent 60%),
    radial-gradient(circle at 70% 60%,rgba(6,182,212,.2),transparent 55%),
    var(--bg-surface-2);
  border:1px solid var(--border-color);position:relative;overflow:hidden;
}
.map-node{
  position:absolute;width:14px;height:14px;border-radius:50%;background:var(--brand-blue);
  box-shadow:0 0 0 6px rgba(37,99,235,.18);transform:translate(-50%,-50%);
}
.map-node.offline{background:var(--danger);box-shadow:0 0 0 6px rgba(220,38,38,.18);}
.map-node::after{content:attr(data-label);position:absolute;top:18px;left:50%;transform:translateX(-50%);font-size:.65rem;white-space:nowrap;color:var(--text-secondary);}