:root {
  --navy: #071f33;
  --navy-2: #052f4d;
  --accent: #3b6cf6;
  --accent-light: #eaf0ff;

  --green: #0f9d58;
  --green-bg: #e6f7ed;
  --red: #e34850;
  --red-bg: #fdecec;
  --amber: #b7791f;
  --amber-bg: #fff6e0;

  --gray: #667085;
  --border: #e4e7ec;
  --bg: #f6f7fb;
  --card: #ffffff;
  --text: #1d2433;

  --input-bg: #ffffff;
  --table-header: #fafbfc;
  --hover-bg: #fafbff;

  --radius: 12px;
}

/* DARK MODE */
[data-theme="dark"] {
  --navy: #071f33;
  --navy-2: #0d304b;

  --accent: #5b82ff;
  --accent-light: #18294a;

  --gray: #f1f1f1;
  --border: #2d3a48;

  --bg: #101820;
  --card: #18232e;
  --text: #edf2f7;

  --input-bg: #111b24;
  --table-header: #202c38;
  --hover-bg: #202c38;

  --green-bg: #123526;
  --red-bg: #3a2023;
  --amber-bg: #3a301d;
}

*{box-sizing:border-box;}
body {
  margin: 0;
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  transition: background-color 0.2s ease, color 0.2s ease;
}
a{text-decoration:none;color:inherit;}

input,
select,
textarea {
  background: var(--input-bg);
  color: var(--text);
  border-color: var(--border);
}

input::placeholder,
textarea::placeholder {
  color: var(--gray);
}

input:focus,
select:focus,
textarea:focus {
  background: var(--input-bg);
  color: var(--text);
}

/* ---------- LOGIN PAGE ---------- */
.login-wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,var(--navy) 0%, #323A73 100%);
}
.login-card{
  background:var(--card);
  width:360px;
  padding:36px 32px;
  border-radius:var(--radius);
  box-shadow:0 20px 50px rgba(0,0,0,.25);
}
.login-card h1{
  font-size:20px;
  margin:0 0 4px;
}
.login-card p.sub{
  color:var(--gray);
  margin:0 0 24px;
  font-size:13px;
}
.login-card label{
  display:block;
  font-size:13px;
  font-weight:600;
  margin-bottom:6px;
  margin-top:16px;
}
.login-card input{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:8px;
  font-size:14px;
}
.login-card button{
  width:100%;
  margin-top:22px;
  padding:11px;
  background:var(--accent);
  color:#fff;
  border:none;
  border-radius:8px;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
}
.login-card button:hover{background:#2f57d0;}
.error-box{
  background:var(--red-bg);
  color:var(--red);
  padding:10px 12px;
  border-radius:8px;
  font-size:13px;
  margin-top:16px;
}

/* ---------- APP LAYOUT ---------- */
.app{
  display:flex;
  min-height:100vh;
}
.sidebar{
  width:230px;
  background:var(--navy);
  color:#cbd3e6;
  flex-shrink:0;
  padding:22px 14px;
  position:fixed;
  top:0;left:0;bottom:0;
  overflow-y:auto;
}
.sidebar .brand{
  color:#fff;
  font-size:17px;
  font-weight:700;
  padding:0 10px 22px;
  display:flex;
  align-items:center;
  gap:8px;
}
.sidebar .brand .dot{
  width:10px;height:10px;border-radius:50%;
  background:var(--accent);
  display:inline-block;
}
.sidebar nav a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:8px;
  font-size:14px;
  margin-bottom:4px;
  color:#f1f1f1;
}
.sidebar nav a:hover{background:var(--navy-2);color:#fff;}
.sidebar nav a.active{background:var(--navy-2);color:#fff;}
.sidebar .icon{font-size:16px;width:18px;text-align:center;}
.sidebar-footer{
  margin-top:24px;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.08);
}
.sidebar-footer a{
  display:block;
  padding:10px 12px;
  font-size:13px;
  color:#9aa4bd;
  border-radius:8px;
}
.sidebar-footer a:hover{background:var(--navy-2);color:#fff;}

.main{
  margin-left:230px;
  flex:1;
  padding:26px 32px 60px;
  width:calc(100% - 230px);
}
.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:24px;
}
.topbar h1{
  font-size:22px;
  margin:0;
}
.topbar .subtitle{
  color:var(--gray);
  font-size:13px;
  margin-top:2px;
}
.user-chip{
  background:var(--card);
  border:1px solid var(--border);
  padding:8px 14px;
  border-radius:30px;
  font-size:13px;
  display:flex;
  align-items:center;
  gap:8px;
}
.user-chip .avatar{
  width:26px;height:26px;border-radius:50%;
  background:var(--accent);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;
}

/* ---------- STAT CARDS ---------- */
.stats-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:16px;
  margin-bottom:26px;
}
.stat-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px 20px;
}
.stat-card .label{
  font-size:13px;
  color:var(--gray);
  margin-bottom:8px;
}
.stat-card .value{
  font-size:26px;
  font-weight:700;
}
.stat-card .value.green{color:var(--green);}
.stat-card .value.red{color:var(--red);}
.stat-card .value.amber{color:var(--amber);}

/* ---------- CARD / PANEL ---------- */
.panel{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:20px 22px;
  margin-bottom:24px;
}
.panel-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:16px;
  flex-wrap:wrap;
  gap:10px;
}
.panel-header h2{
  font-size:16px;
  margin:0;
}

/* ---------- FILTER BAR ---------- */
.filter-bar{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:18px;
}
.filter-bar input, .filter-bar select{
  padding:9px 12px;
  border:1px solid var(--border);
  border-radius:8px;
  font-size:13px;
  background:var(--input-bg);
  color:var(--text);
} 
.filter-bar button, .btn{
  padding:9px 16px;
  border-radius:8px;
  font-size:13px;
  font-weight:600;
  border:1px solid var(--border);
  /* background:#fff; */
  cursor:pointer;
}
.btn-primary{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
}
.btn-primary:hover{background:#2f57d0;}
.btn-danger{
  background:var(--red-bg);
  color:var(--red);
  border-color:var(--red-bg);
}
.btn-danger:hover{background:#fbdada;}
.btn-sm{padding:6px 10px;font-size:12px;}

/* ---------- TABLE ---------- */
.table-wrap{overflow-x:auto;}
table{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}
thead th {
  text-align: left;
  padding: 10px 12px;
  background: var(--table-header);
  color: var(--gray);
  font-weight: 600;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

tbody td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

tbody tr:hover {
  background: var(--hover-bg);
}
.empty-row td{
  text-align:center;
  color:var(--gray);
  padding:30px;
}

/* ---------- BADGES ---------- */
.badge{
  display:inline-block;
  padding:3px 10px;
  border-radius:20px;
  font-size:11.5px;
  font-weight:600;
}
.badge-green{background:var(--green-bg);color:var(--green);}
.badge-red{background:var(--red-bg);color:var(--red);}
.badge-amber{background:var(--amber-bg);color:var(--amber);}
.badge-gray{background:#eef0f4;color:var(--gray);}

.map-link{color:var(--accent);font-weight:600;}

/* ---------- PAGINATION ---------- */
.pagination{
  display:flex;
  gap:6px;
  margin-top:18px;
  flex-wrap:wrap;
}
.pagination a, .pagination span{
  padding:7px 12px;
  border:1px solid var(--border);
  border-radius:6px;
  font-size:13px;
  color:var(--text);
}
.pagination a:hover{background:var(--accent-light);}
.pagination .active{background:var(--accent);color:#fff;border-color:var(--accent);}

/* ---------- FORM (wifi devices) ---------- */
.form-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:14px;
  margin-bottom:14px;
}
.form-grid label{
  font-size:12.5px;
  font-weight:600;
  display:block;
  margin-bottom:6px;
  color:var(--gray);
}
.form-grid input, .form-grid select{
  width:100%;
  padding:9px 12px;
  border:1px solid var(--border);
  border-radius:8px;
  font-size:13px;
}

.flash{
  padding:12px 14px;
  border-radius:8px;
  font-size:13px;
  margin-bottom:16px;
}
.flash-success{background:var(--green-bg);color:var(--green);}
.flash-error{background:var(--red-bg);color:var(--red);}

@media (max-width:900px){
  .sidebar{width:70px;padding:18px 8px;}
  .sidebar .brand span.text, .sidebar nav a span.text, .sidebar-footer a span.text{display:none;}
  .main{margin-left:70px;width:calc(100% - 70px);}
}

/* =====================================================
   DATATABLES BUTTONS
   ===================================================== */

.dt-buttons {
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.dt-buttons .btn {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.dt-container .dt-layout-row {
    width: 100%;
}

.dt-container .dt-layout-cell {
    display: flex;
    align-items: center;
}

.dt-container .dt-layout-cell.dt-layout-start {
    justify-content: flex-start;
}

.dt-container .dt-layout-cell.dt-layout-end {
    justify-content: flex-end;
}

.sidebar-logo {
    width: 45px;
    height: 45px;
    object-fit: contain;
    display: block;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.theme-toggle {
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--card);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 15px;
  transition: all 0.2s ease;
}

.theme-toggle:hover {
  background: var(--hover-bg);
  transform: scale(1.05);
}