/* Sidebar submenu styles */
.sidebar-submenu {
  list-style: none;
  margin: 0 0 0 24px;
  padding: 0;
  display: none;
}
.sidebar-nav li:hover > .sidebar-submenu,
.sidebar-nav li:focus-within > .sidebar-submenu {
  display: block;
}
.sidebar-submenu li a {
  background: none;
  color: #b6c6e3;
  font-size: 0.97em;
  padding: 8px 24px;
  border-radius: 6px;
  transition: background 0.15s;
}
.sidebar-submenu li a:hover {
  background: var(--accent);
  color: #021018;
}
/* === Dashboard Layout === */
.dashboard-layout {
  display: flex;
  min-height: 100vh;
  background: #101a2b;
}
.dashboard-sidebar {
  width: 240px;
  background: #151f32;
  color: #e6eef8;
  display: flex;
  flex-direction: column;
  padding: 24px 0 0 0;
  box-shadow: 2px 0 16px 0 rgba(0,0,0,0.18);
}
.sidebar-logo {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 32px 32px 32px;
}
.logo-icon { font-size: 1.6em; }
.sidebar-nav ul { list-style: none; margin: 0; padding: 0; }
.sidebar-nav li { margin-bottom: 8px; }
.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #e6eef8;
  text-decoration: none;
  padding: 10px 32px;
  border-radius: 8px 0 0 8px;
  font-weight: 500;
  transition: background 0.15s;
}
.sidebar-nav a.active, .sidebar-nav a:hover {
  background: var(--accent);
  color: #021018;
}
.nav-icon { font-size: 1.2em; }

.dashboard-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #101a2b;
}
.dashboard-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 32px 0 32px;
  background: #101a2b;
  min-height: 64px;
}
.topbar-left { display: flex; align-items: center; gap: 18px; }
.menu-toggle { background: none; border: none; color: #e6eef8; font-size: 1.6em; cursor: pointer; }
.topbar-right { display: flex; align-items: center; gap: 18px; }
.topbar-item { background: #19243a; color: #e6eef8; border-radius: 8px; padding: 6px 16px; font-weight: 600; }
.user-avatar { display: flex; align-items: center; gap: 8px; }
.avatar-icon { font-size: 1.3em; }

.dashboard-content {
  flex: 1;
  padding: 32px;
  background: #101a2b;
  overflow-x: auto;
}
.dashboard-cards-row {
  display: flex;
  gap: 18px;
  margin-bottom: 32px;
}
.dashboard-card {
  background: #19243a;
  border-radius: 12px;
  padding: 18px 24px;
  min-width: 160px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.12);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.stat-label { color: var(--muted); font-size: 1.25em; margin-bottom: 6px; font-weight: bold;}
.stat-value { color: var(--accent); font-size: 1.25em; font-weight: 700; }

.dashboard-chart-card {
  background: #19243a;
  border-radius: 12px;
  padding: 24px 32px 32px 32px;
  margin-bottom: 28px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.12);
}
.dashboard-chart-card h3 {
  margin: 0 0 18px 0;
  font-size: 1.1rem;
  color: #e6eef8;
}
.chart-placeholder {
  background: #22304a;
  border-radius: 8px;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6fa7d6;
  font-size: 1.1em;
  font-style: italic;
}

.chart-container {
  position: relative;
  width: 100%;
  height: 400px;
}

.status-diode {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  margin-left: 8px;
  vertical-align: middle;
  background: #ccc;
  border: 1px solid #888;
}
.status-diode.green { background: #2ecc40; border-color: #27ae60; }
.status-diode.red { background: #ff4136; border-color: #c0392b; }

.dashboard-footer {
  background: #151f32;
  color: var(--muted);
  padding: 24px 32px;
  border-top: 1px solid #22304a;
}

@media (max-width: 900px) {
  .dashboard-layout { flex-direction: column; }
  .dashboard-sidebar { width: 100%; flex-direction: row; padding: 0; }
  .sidebar-logo { padding: 18px; }
  .sidebar-nav a { padding: 10px 18px; border-radius: 8px; }
  .dashboard-main { padding: 0; }
  .dashboard-content { padding: 18px; }
  .dashboard-cards-row { flex-direction: column; gap: 12px; }
}
@media (max-width: 600px) {
  .dashboard-content { padding: 8px; }
  .dashboard-chart-card { padding: 12px; }
}
/*
Theme Name: IoT Dashboard
Author: The Dukato
Description: A lightweight, responsive IoT dashboard-style WordPress theme
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: iot-dashboard
*/


:root{
  --bg:#0f1724;
  --card:#0b1220;
  --muted:#9aa8bf;
  --accent:#00d1b2;
  --glass: rgba(255,255,255,0.03);
  --radius:12px;
  --gap:18px;
  --max-width:1200px;
  --font-sans: system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:var(--font-sans);background:linear-gradient(180deg,var(--bg) 0%, #071024 100%);color:#e6eef8; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}

.container{max-width:var(--max-width);margin:28px auto;padding:0 20px;}

.site-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
.brand{display:flex;gap:12px;align-items:center;}
.logo{width:48px;height:48px;border-radius:10px;background:linear-gradient(135deg,var(--accent),#0066ff);display:flex;align-items:center;justify-content:center;font-weight:700;color:#021018;}
.site-title{font-size:1.15rem;font-weight:600;letter-spacing:0.4px}
.site-desc{font-size:0.85rem;color:var(--muted)}

.top-controls{display:flex;gap:10px;align-items:center;color:var(--muted)}



/* Cart grid  */
.grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(220px,1fr));gap:var(--gap);align-items:start; padding:var(--gap);}
.card{background:var(--card);border-radius:var(--radius);padding:16px;box-shadow:0 6px 18px rgba(2,8,23,0.6);}
.span-4{grid-column:span 4}
.span-8{grid-column:span 8}
.span-6{grid-column:span 6}
.span-12{grid-column:span 12}
.card h3{margin:0 0 8px 0;font-size:0.98rem}
.small{font-size:0.85rem;color:var(--muted)}

/* Simple stat style */
.stat{display:flex;justify-content:space-between;align-items:center}
.stat .value{font-size:1.6rem;font-weight:700;color:var(--accent)}
.stat .label{font-size:0.85rem;color:var(--muted)}

/* Table */
.table{width:100%;border-collapse:collapse}
.table th{font-size:0.75rem;text-align:left;color:var(--muted);padding:8px 0}
.table td{padding:10px 0;border-top:1px solid rgba(255,255,255,0.03);font-size:0.9rem}

/* responsive */
@media (max-width:900px){
  .grid{grid-template-columns:repeat(6,1fr)}
  .span-8{grid-column:span 6}
  .span-4{grid-column:span 6}
  .span-6{grid-column:span 6}
}
@media (max-width:560px){
  .container{padding:12px}
  .site-title{font-size:1rem}
  .logo{width:42px;height:42px}
}


/**********************Sidebar Layout**********************/
/* Sidebar layout (left panel) */
.layout{display:flex;gap:var(--gap);align-items:flex-start}
.sidebar{flex:0 0 300px;max-width:300px}
.main{flex:1}

/* On narrower screens stack the sidebar above the main content */
@media (max-width:900px){
  .layout{display:block}
  .sidebar{max-width:100%;flex:none;margin-bottom:var(--gap)}
}