:root{
  --bg:#f6f8fb;
  --card:#ffffff;
  --muted:#6b7280;
  --accent:#0ea5e9;
  --accent-2:#0b79b7;
  --radius:12px;
  --danger:#ef4444;
  --success:#10b981;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

*{box-sizing:border-box}

body{
  margin:0;
  background:var(--bg);
  color:#0f172a;
}

.wrap{
  display:flex;
  min-height:100vh;
}

/* ---------- GENERAL ---------- */
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:700;
}
.brand img{
  width:42px;
  height:42px;
  border-radius:8px;
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.avatar{
  width:44px;
  height:44px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  display:flex;
  align-items:center;
  justify-content:center;
  color:white;
  font-weight:700;
}

/* ---------- BANNER ---------- */
.banner{
  margin-top:18px;
  background:linear-gradient(90deg,#e6f7ff, #ffffff);
  padding:18px;
  border-radius:var(--radius);
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  border:1px solid #dbeef8;
}

.banner h2{
  margin:0;
  font-size:18px;
}

.banner p{
  margin:0;
  color:var(--muted);
  font-size:13px;
}

.banner .cta{
  background:var(--accent);
  color:white;
  padding:10px 14px;
  border-radius:10px;
  border:none;
  cursor:pointer;
}

/* topbar icon buttons */
.topbar-icon-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
}

.topbar-icon-btn .material-symbols-outlined {
  font-size: 22px;
  color: #334155;
}



/* ---------- GRID ---------- */
.grid{
  display:grid;
  grid-template-columns:1fr 360px;
  gap:20px;
  margin-top:18px;
}

.left-col{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.right-col{
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* ---------- CARDS ---------- */
.card{
  background:var(--card);
  padding:18px;
  border-radius:12px;
  box-shadow:0 1px 0 rgba(15,23,42,0.04);
  border:1px solid rgba(15,23,42,0.03);
}

/* ---------- KPIs ---------- */
.kpis{
  display:flex;
  gap:12px;
}

.kpi{
  flex:1;
  padding:12px;
  border-radius:10px;
  background:linear-gradient(180deg, rgba(14,165,233,0.04), rgba(11,121,183,0.01));
  display:flex;
  flex-direction:column;
}

.kpi .value{
  font-size:20px;
  font-weight:700;
}

.kpi .label{
  font-size:12px;
  color:var(--muted);
}

/* ---------- MODULES ---------- */
.modules{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:12px;
}

.module{
  background:linear-gradient(180deg, rgba(255,255,255,0.8), rgba(246,248,250,0.8));
  padding:14px;
  border-radius:12px;
  border:1px solid rgba(11,121,183,0.06);
  display:flex;
  flex-direction:column;
  gap:8px;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease;
}

.module:hover{
  transform:translateY(-6px);
  box-shadow:0 12px 30px rgba(11,121,183,0.06);
}

.module .m-title{
  font-weight:600;
  font-size:14px;
}

.module .m-desc{
  font-size:12px;
  color:var(--muted);
}

/* ---------- NOTIFICATIONS ---------- */
.notifications .item{
  display:flex;
  gap:10px;
  padding:10px;
  border-radius:8px;
  border:1px solid #eef6fb;
}

.notifications .item.critical{
  border-left:4px solid var(--danger);
  background:linear-gradient(90deg, rgba(239,68,68,0.04), transparent);
}

/* ---------- FOOTER ---------- */
.mini-foot{
  font-size:12px;
  color:var(--muted);
  text-align:center;
  margin-top:18px;
}

/* ---------- SIDEBAR ---------- */
.sidebar{
  width:300px;
  transition:width .25s ease;
  background-color: rgb(3 23 53);
  border-right:1px solid #e1e4e8;
  padding:18px 10px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.sidebar.collapsed{
  width:70px;
}

.toggle-btn{
  cursor:pointer;
  padding:10px;
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--muted);
  font-size:14px;
  border-radius:8px;
}

.menu{
  margin-top:10px;
  flex:1;
  overflow:auto;
}

.menuItem{
  display:flex;
  align-items:center;
  padding:8px 8px;
  border-radius:8px;
  cursor:pointer;
  transition:background .2s;
  color:#f0f0f0;
  gap:12px;
}

.menuItem:hover{ background:#556070; }

.menuItem.active{
  background:#7c97bf;
  color:#ffffff;
}

.sidebar.collapsed .menuItem-text{ display:none !important; }

.sidebar.collapsed .menuItem{
  justify-content:center;
  gap:0;
}

/* ---------- SUBMENU ---------- */
.nested{
  display:none;
  padding-left:45px;
  margin-top:5px;
}

.nested.open{ display:block; }

.subMenu1{
  padding:6px 0 6px 16px;
  cursor:pointer;
  border-radius:6px;
  color:#c1c1c1;
}

.subMenu1:hover{ background:#556070; }

.carrot{
  margin-left:auto;
  transition:transform .25s;
}

.carrot-up{ transform:rotate(180deg); }

/* ─────────────────────────────────────────
   HIDE CARROTS WHEN SIDEBAR IS COLLAPSED
───────────────────────────────────────── */
.sidebar.collapsed .carrot {
  display: none !important;
}

/* ---------- ICON ---------- */
.material-symbols-outlined{
  font-size:42px;
  font-variation-settings:'FILL' 0,'wght' 300,'GRAD' 0,'opsz' 48;
  color: rgba(10,155,216,1);
}

/* ─────────────────────────────────────────
   SIDEBAR ICON SIZE (match old FontAwesome)
───────────────────────────────────────── */
.sidebar .material-symbols-outlined {
  font-size: 24px;
  color: rgb(106 211 255);
  font-variation-settings:
    'FILL' 0,
    'wght' 300,
    'GRAD' 0,
    'opsz' 20;
  line-height: 1;
}

/* Carrot icon slightly smaller */
.sidebar .carrot .material-symbols-outlined {
  font-size: 16px;
}

.user-menu-item .material-symbols-outlined {
  font-size: 24px;
}

/* ─────────────────────────────────────────
   TOPBAR USER COLLAPSIBLE (DEFAULT COLLAPSED)
───────────────────────────────────────── */
.user-collapsible {
  display: none;
}

.user-collapsible.open {
  display: flex;
}


/* ---------- AI SAFETY CARD ---------- */
.ai-safety-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.ai-logo {
  width: 47px;
  height: 44px;
  border-radius: 10px;
}

.ai-safety-card h3 {
  margin: 0;
  font-size: 16px;
}

.ai-desc {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--muted);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:980px){
  .grid{grid-template-columns:1fr}
  .sidebar{display:none}
}