/* ========= THEME ========= */
:root{
  --bg:#f6f7fb;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#6b7280;
  --primary:#2563eb;
  --primary-600:#1d4ed8;
  --border:#e5e7eb;
  --shadow:0 10px 30px rgba(2,6,23,.06);
  --radius:14px;

  --sidebar:#111827;         /* dark slate */
  --sidebar-hr:#1f2937;
  --sidebar-text:#9ca3af;
}

/* ========= RESETS ========= */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font:14px/1.55 Inter,system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial;
  color:var(--text); background:var(--bg); display:flex; min-height:100vh;
}

/* ========= LAYOUT: WP-like sidebar ========= */
.sidebar{
  width:248px; background:var(--sidebar); color:#fff; position:fixed; inset:0 auto 0 0;
  display:flex; flex-direction:column; z-index:10;
}
.sidebar .brand{display:flex; gap:12px; align-items:center; padding:16px; border-bottom:1px solid var(--sidebar-hr)}
.sidebar .brand img{width:40px;height:40px;object-fit:contain;border-radius:8px}
.sidebar .brand .title{display:flex}
.sidebar .brand .app{font-weight:700}
.sidebar .brand .sub{font-size:12px;color:#9aa0a6}

.sidebar .user{padding:12px 16px; font-size:12px; color:#d1d5db; border-bottom:1px solid var(--sidebar-hr)}
.sidebar .menu{flex:1; overflow:auto; padding:8px 0}
.sidebar .menu a{
  display:flex; align-items:center; gap:10px; padding:11px 16px;
  color:var(--sidebar-text); text-decoration:none; transition:.15s ease;
}
.sidebar .menu a:hover{background:var(--sidebar-hr); color:#fff}
.sidebar .menu a.active{background:#0b1220; color:#fff}
.sidebar .menu .icon{width:18px; display:inline-flex; justify-content:center}
.sidebar .footer{padding:12px 16px; font-size:12px; color:#9aa0a6; border-top:1px solid var(--sidebar-hr)}

.main{margin-left:248px; flex:1; padding:28px}

/* Responsive toggle */
.toggle{
  display:none; position:fixed; top:12px; left:12px; z-index:20;
  background:var(--primary); color:#fff; border:none; border-radius:8px; padding:8px 10px;
  box-shadow:var(--shadow);
}
@media (max-width:980px){
  .sidebar{transform:translateX(-100%); transition:transform .25s ease}
  .sidebar.open{transform:translateX(0)}
  .main{margin-left:0; padding-top:56px}
  .toggle{display:block}
}

/* ========= CONTAINER & CARDS ========= */
.container{max-width:1100px; margin:0 auto}
.container.narrow{max-width:920px}
.card{
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); padding:18px; box-shadow:var(--shadow);
  margin-bottom:18px;
}
.card h1,.card h2{margin:0 0 12px}
.card h2{font-size:20px}

/* ========= FORMS ========= */
label{display:block; margin:0 0 6px; font-weight:600}
.input,select,textarea{
  width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:10px; background:#fff;
  outline:none; transition:border-color .15s, box-shadow .15s;
}
.input:focus,select:focus,textarea:focus{
  border-color:var(--primary); box-shadow:0 0 0 3px rgba(37,99,235,.15);
}
.grid{display:grid; gap:12px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-5{grid-template-columns:repeat(5,1fr)}
@media (max-width:980px){
  .grid-5,.grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3,.grid-2{grid-template-columns:1fr}
}

/* Button */
.btn{
  appearance:none; border:none; padding:10px 14px; border-radius:10px; cursor:pointer;
  background:var(--primary); color:#fff; font-weight:600; box-shadow:var(--shadow);
}
.btn:hover{background:var(--primary-600)}
.btn.secondary{background:#374151}
.btn.secondary:hover{background:#111827}
.btn.danger{background:#ef4444}
.btn.link{background:transparent; color:var(--primary); box-shadow:none; padding:0}

/* Small UI */
.small{font-size:12px; color:var(--muted)}
.badge{display:inline-block; padding:2px 8px; border-radius:999px; background:#0ea5e9; color:#fff; font-size:12px}
.badge.gray{background:#9ca3af} .badge.warn{background:#f59e0b} .badge.success{background:#10b981} .badge.danger{background:#ef4444}

/* ========= TABLES ========= */
table{width:100%; border-collapse:separate; border-spacing:0; background:#fff; border:1px solid var(--border); border-radius:12px; overflow:hidden}
thead th{background:#f3f4f6; padding:12px; text-align:left; font-weight:700; border-bottom:1px solid var(--border)}
tbody td{padding:12px; border-bottom:1px solid var(--border)}
tbody tr:hover{background:#fafafa}

/* ========= TOOLBARS ========= */
.toolbar{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:0 0 12px}
.toolbar .grow{flex:1}
.toolbar .sep{color:#cbd5e1}

/* Alerts */
.alert{padding:10px 12px; background:#f8fafc; border:1px solid var(--border); border-radius:10px}
.alert.success{background:#ecfdf5; border-color:#bbf7d0}
.alert.danger{background:#fef2f2; border-color:#fecaca}

/* Section title */
.section-title{font-weight:700; margin:0 0 6px}

/* File template link */
.template-links a{color:var(--primary); text-decoration:none}
.template-links a:hover{text-decoration:underline}