:root{
  --brand:#30a3c2;
  --brand-dark:#248aa5;
  --bg:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --card:#ffffff;
  --card-border:#e5e7eb;
  --table-border:#e5e7eb;
  --ok:#065f46; --ok-bg:#d1fae5;
  --warn:#92400e; --warn-bg:#fef3c7;
  --err:#7f1d1d; --err-bg:#fee2e2;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
}

/* Header */
.header{position:sticky;top:0;z-index:10;background:#fff;border-bottom:1px solid var(--card-border)}
.header .wrap{
  max-width:1200px;
  margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 20px;
}
.brand{display:flex;gap:10px;align-items:center;font-weight:800;color:#111827}
.brand .dot{width:12px;height:12px;border-radius:50%;background:var(--brand)}
.nav a{margin-left:16px;color:var(--muted);text-decoration:none}
.nav a:hover{color:var(--text)}

/* Layout: sidebar flush left, content constrained */
.container{
  max-width:none;          /* full-width grid container */
  margin:24px 0;           /* remove center gap */
  padding:0 20px 0 0;      /* no left padding, keep a little right padding */
  display:grid;
  grid-template-columns:240px minmax(0,1fr);
  gap:20px;
}
@media (max-width:980px){
  .container{grid-template-columns:1fr;padding:0 16px}
  .sidebar{order:2}
}

/* Sidebar */
.sidebar{position:sticky;top:64px;height:calc(100vh - 64px);padding-left:0}
.menu{list-style:none;padding:0;margin:0}
.menu li a{
  display:block;
  padding:10px 12px;
  border-radius:10px;
  color:var(--text);
  text-decoration:none
}
.menu li a:hover{background:#f3f4f6}
.menu .active{background:var(--brand);color:#fff}

/* Main content column gets a readable max width */
.content{
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
  max-width:1200px;       /* readable column width */
  margin-left:20px;       /* align with header padding */
}
@media (max-width:980px){
  .content{max-width:none;margin-left:0}
}

/* Cards / Grid */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:980px){.grid-2{grid-template-columns:1fr}}

.card{
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:14px;
  padding:16px 16px 18px;
  box-shadow:0 8px 24px rgba(0,0,0,.04)
}
.card h2{margin:0 0 8px 0;font-size:20px}
.sub{color:var(--muted);margin:0 0 8px 0;font-size:14px}

/* Forms */
.label{display:block;margin:10px 0 6px;color:#374151;font-weight:600}
input[type=file],input[type=number],input[type=text],textarea,select{
  width:100%;padding:12px;border-radius:10px;border:1px solid var(--card-border);background:#fff;color:var(--text)
}
textarea{resize:vertical}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.row.two>div{flex:1 1 220px}
button{
  padding:12px 16px;border:0;border-radius:12px;background:var(--brand);color:#fff;font-weight:700;cursor:pointer
}
button:hover{background:var(--brand-dark)}

/* Progress */
.progress{
  width:100%;height:12px;background:#f3f4f6;border:1px solid var(--card-border);
  border-radius:999px;overflow:hidden
}
#bar{height:100%;background:var(--brand);transition:width .25s ease}

/* Stats */
.statrow{display:flex;gap:18px;margin:6px 0 10px 0}
.stat{display:flex;flex-direction:column;min-width:120px}
.stat .n{font-size:22px;font-weight:800}
.muted{color:var(--muted)}

/* Tables */
table{width:100%;border-collapse:collapse;margin-top:8px}
th,td{padding:8px;border-bottom:1px solid var(--table-border);font-size:14px;text-align:left}

/* Badges */
.badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;border:1px solid transparent}
.badge.ok{background:var(--ok-bg);color:var(--ok);border-color:#a7f3d0}
.badge.warn{background:var(--warn-bg);color:var(--warn);border-color:#fde68a}
.badge.err{background:var(--err-bg);color:var(--err);border-color:#fecaca}

/* Messages / footer */
.note{color:var(--muted);margin-top:6px}
.alert{padding:10px;border:1px solid #fca5a5;background:#fee2e2;color:#7f1d1d;border-radius:10px}
.footer{padding:20px;text-align:center;color:var(--muted)}

/* Sidebar left gutter so the active pill doesn't touch the edge */
.sidebar { padding-left: 12px; }

.menu li a {
  margin-left: 6px;   /* small outside gap on the left */
  margin-right: 6px;  /* keeps symmetry */
}

/* On mobile, let it breathe evenly */
@media (max-width:980px){
  .sidebar { padding-left: 0; }
  .menu li a { margin-left: 0; margin-right: 0; }
}



/* Sidebar background (subtle tint/gradient) */
.sidebar{
  padding-left: 12px;                 /* from earlier tweak */
  background: linear-gradient(180deg, #f4fbfe 0%, #ffffff 60%);
  border-right: 1px solid #e9eef2;    /* soft divider */
}

/* Logo block inside the sidebar */
.side-brand{
  display:flex;
  align-items:center;
  justify-content:center;    /* center within sidebar width */
  gap:10px;
  padding:16px 10px 12px;
  margin:4px 6px 10px;       /* matches menu pill margin */
  border-radius:12px;
}

.side-brand img{
  height:28px;               /* adjust as you like (24–36 works) */
  width:auto;
}

.side-brand .name{
  font-weight:800;
  color:#0f172a;
  letter-spacing:.2px;
}

/* On mobile, keep it compact and flush */
@media (max-width:980px){
  .sidebar{ padding-left: 0; background:#fff; border-right:0; }
  .side-brand{ justify-content:flex-start; margin:10px 0 6px; padding-left:0; }
}