/* ===== Base ===== */
:root{
  --primary:#1ea7e1;
  --primary-dark:#0f86b4;
  --primary-200:#34bdf5;
  --bg:#f3fbff;
  --card:#ffffff;
  --text:#0b3948;
  --muted:#5e8391;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background: var(--bg);
}

/* ===== Sidebar ===== */
.sidebar{
  width:260px;
  background: linear-gradient(180deg, #26b4f2, #1398d0);
  color:#fff;
  padding:18px;
  position:fixed;
  inset:0 auto 0 0;
  overflow:auto;
  box-shadow: 3px 0 10px rgba(0,0,0,.08);
}
.card{
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.25);
  border-radius:14px;
  padding:12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
}
.logo{
  text-align:center;
  margin-bottom:16px;
}
.logo img{
  width:72px; height:72px; object-fit:cover; border-radius:50%;
  display:block; margin: 2px auto 8px;
}
.logo h2{
  font-size:14px; letter-spacing:.5px; margin:0; font-weight:700;
}

/* ===== Menu Buttons ===== */
.nav-item,.nav-sub,.accordion-toggle{
  display:block;
  width:100%;
  padding:10px 12px;
  margin:6px 0;
  background: var(--primary-200);
  border:1px solid rgba(255,255,255,.25);
  border-radius:10px;
  color:#fff;
  text-align:left;
  cursor:pointer;
  font-weight:600;
  transition: transform .05s ease, background .2s ease;
}
.nav-sub{ background: rgba(255,255,255,.16); border-left:3px solid rgba(255,255,255,.5); }
.nav-item:hover,.nav-sub:hover,.accordion-toggle:hover{ transform: translateY(-1px); }
.nav-item.active,.nav-sub.active{ background: var(--primary-dark); }

/* Accordion arrow */
.accordion-toggle{ position:relative; padding-right:28px; }
.accordion-toggle::after{
  content:'▸';
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  opacity:.9;
}
.accordion.open .accordion-toggle::after{ transform:translateY(-50%) rotate(90deg); }
.accordion .accordion-panel{ display:none; padding-left:8px; }
.accordion.open .accordion-panel{ display:block; }

/* ===== Content ===== */
.content{
  margin-left: 280px;
  padding: 22px 22px 60px;
}
.view{ display:none; }
.view.active{ display:block; }

.view > h3{
  margin: 6px 4px 10px;
  font-size:20px;
}

.view .card{
  background: var(--card);
  border: 1px solid #e6eef3;
  box-shadow: 0 3px 10px rgba(16,58,77,.06);
  margin: 8px 4px 14px;
  border-radius:14px;
}

/* ===== Forms ===== */
form.card{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap:10px;
  align-items:end;
}
input,select,button{
  padding:10px 12px;
  border:1px solid #d7e6ee;
  border-radius:8px;
  font-size:14px;
}
select, input[type="date"]{ background:#f7fbfe; }
button{
  background: var(--primary);
  color:#fff;
  border:none;
  cursor:pointer;
  font-weight:700;
}
button:hover{ background: var(--primary-dark); }
button.ghost{
  background: transparent;
  color: var(--primary-dark);
  border:1px solid var(--primary-dark);
}

/* ===== Tables ===== */
table{
  width:100%;
  border-collapse: collapse;
}
th,td{
  padding:10px 12px;
  border-bottom:1px solid #e6eef3;
  font-size:14px;
}
th{ background:#f5fbff; text-align:left; font-weight:700; }
tr:hover td{ backgrou