/* ==========================================================================
   Management console. Fixed left sidebar, light working canvas. Reuses the
   brand tokens from theme.css (loaded first).
   ========================================================================== */
:root { --side: 264px; --topbar-h: 62px; }

body.console { background: #F4F6F4; }

/* Sidebar */
.side {
  position: fixed; top: 0; left: 0; bottom: 0; width: var(--side);
  background: var(--brand-darker); color: rgba(255,255,255,.8);
  display: flex; flex-direction: column; z-index: 70; overflow-y: auto;
}
.side::-webkit-scrollbar { width: 8px; }
.side::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 8px; }
.side .brand {
  display:flex; align-items:center; gap:.6rem; padding: 1.1rem 1.2rem;
  border-bottom:1px solid rgba(255,255,255,.1); color:#fff;
  font-family: var(--font-display); font-weight:700;
}
.side .brand .mark { width:36px;height:36px;border-radius:8px;background:linear-gradient(135deg,var(--brand),var(--brand-dark)); display:grid;place-items:center;font-size:1rem; }
.side .brand img.mark-img { width:32px; height:32px; border-radius:8px; display:block; box-shadow:none; flex:0 0 auto; }
.side .brand small { display:block; font-family:var(--font-body); font-weight:500; font-size:.66rem; color:rgba(255,255,255,.6); }
.side nav { padding: .8rem .7rem 2rem; flex:1; }
.side .grouphdr { font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color: rgba(255,255,255,.4); padding: 1rem .7rem .4rem; }
.side a.item {
  display:flex; align-items:center; gap:.7rem; padding:.6rem .75rem; border-radius:8px;
  color: rgba(255,255,255,.82); font-size:.93rem; margin-bottom:2px;
}
.side a.item i { font-size:1.08rem; width:20px; text-align:center; }
.side a.item:hover { background: rgba(255,255,255,.08); color:#fff; }
.side a.item.active { background: var(--brand); color:#fff; font-weight:600; }
.side a.item .count {
  margin-left:auto; background: var(--signal); color:#04120b; font-size:.72rem; font-weight:700;
  min-width: 20px; height:20px; border-radius: 20px; display:grid; place-items:center; padding:0 6px;
}

/* Main area */
.main { margin-left: var(--side); min-height: 100vh; display:flex; flex-direction:column; }
.ctopbar {
  height: var(--topbar-h); background:#fff; border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:1rem; padding: 0 1.4rem; position:sticky; top:0; z-index:50;
}
.ctopbar .title { font-family:var(--font-display); font-weight:600; font-size:1.1rem; }
.ctopbar .spacer { flex:1; }
.ctopbar .who { display:flex; align-items:center; gap:.6rem; font-size:.9rem; color: var(--ink-soft); }
.ctopbar .who .av { width:34px;height:34px;border-radius:50%;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-weight:700; }
.cmenu-toggle { display:none; background:none;border:0;font-size:1.5rem;cursor:pointer;color:var(--ink); }
.content { padding: 1.6rem 1.4rem 3rem; flex:1; }
.content-narrow { max-width: 920px; }

/* KPI cards */
.kpis { display:grid; grid-template-columns: repeat(4,1fr); gap:1rem; margin-bottom:1.6rem; }
.kpi { background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding:1.1rem 1.2rem; }
.kpi .l { font-size:.82rem; color: var(--ink-soft); display:flex; align-items:center; gap:.4rem; }
.kpi .l i { color: var(--brand); }
.kpi .n { font-family:var(--font-display); font-size:1.7rem; font-weight:700; margin-top:.3rem; }

/* Panels + tables */
.panel { background:#fff; border:1px solid var(--line); border-radius: var(--radius); margin-bottom:1.4rem; }
.panel .phead { display:flex; align-items:center; gap:1rem; padding:1rem 1.2rem; border-bottom:1px solid var(--line); }
.panel .phead h3 { margin:0; font-size:1.05rem; }
.panel .phead .spacer { flex:1; }
.panel .pbody { padding:1.2rem; }
.panel .pbody.flush { padding:0; }

.table { width:100%; border-collapse: collapse; font-size:.92rem; }
.table th, .table td { text-align:left; padding:.72rem 1rem; border-bottom:1px solid var(--line); vertical-align:middle; }
.table th { font-size:.76rem; text-transform:uppercase; letter-spacing:.04em; color: var(--ink-soft); background:#FAFBFA; }
.table tr:last-child td { border-bottom:0; }
.table tbody tr:hover { background:#FAFBFA; }
.table .thumb-sm { width:42px;height:42px;border-radius:7px;object-fit:cover;background:var(--brand-soft); }

.badge { display:inline-block; font-size:.74rem; font-weight:600; padding:.22rem .6rem; border-radius:30px; }
.badge-ok { background:#E8F5EC; color:#1a5c37; }
.badge-pending { background:#FCF3E2; color:#8a5b00; }
.badge-fail { background:#FBEAE8; color:#8f2018; }
.badge-muted { background:#EEF0EE; color:#555; }
.badge-info { background:#E9F0FB; color:#274b86; }

.actions-inline { display:flex; gap:.4rem; flex-wrap:wrap; }
.iconbtn { width:32px;height:32px;border-radius:7px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;color:var(--ink-soft);cursor:pointer;}
.iconbtn:hover { border-color: var(--brand); color: var(--brand); }
.iconbtn.danger:hover { border-color: var(--danger); color: var(--danger); }

.toolbar { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; margin-bottom:1.1rem; }
.toolbar .search { flex:1; min-width:200px; max-width:340px; }
.toolbar .spacer { flex:1; }

/* pagination */
.pager { display:flex; gap:.35rem; justify-content:center; padding:1rem; }
.pager a, .pager span { padding:.4rem .75rem; border:1px solid var(--line); border-radius:7px; font-size:.88rem; color:var(--ink); background:#fff; }
.pager .cur { background: var(--brand); color:#fff; border-color: var(--brand); }

/* empty state */
.empty { text-align:center; padding: 3rem 1rem; color: var(--ink-soft); }
.empty i { font-size: 2.4rem; color: var(--line); display:block; margin-bottom:.6rem; }

/* login */
.login-wrap { min-height:100vh; display:grid; place-items:center; padding:2rem; background: var(--brand-darker);
  background-image: linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size: 42px 42px; }
.login-card { background:#fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width:100%; max-width:420px; padding:2.2rem; }
.login-card .brand-logo { justify-content:center; margin-bottom:.4rem; }

/* invoice print view */
.inv-doc { background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding: 2.2rem; max-width: 840px; margin:0 auto; }
.inv-head { display:flex; justify-content:space-between; gap:2rem; flex-wrap:wrap; margin-bottom:2rem; }
.inv-total-row { display:flex; justify-content:flex-end; }
.inv-total-row table { width: 320px; }
.inv-total-row td { padding:.4rem .6rem; }
.inv-total-row .grand { font-family:var(--font-display); font-weight:700; font-size:1.2rem; color:var(--brand); }

@media print {
  .side, .ctopbar, .no-print { display:none !important; }
  .main { margin-left:0; }
  .content { padding:0; }
  .inv-doc { border:0; }
}

/* Full-width, responsive form layout for console add/edit pages.
   Two columns on desktop, one on mobile; wide fields span both. */
.form-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 0 1.4rem; }
.form-grid .field.full { grid-column: 1 / -1; }
@media (max-width: 760px) { .form-grid { grid-template-columns: 1fr; } }

@media (max-width: 900px) {
  .kpis { grid-template-columns: repeat(2,1fr); }
  .side { transform: translateX(-100%); transition: transform .2s ease; }
  .side.open { transform: translateX(0); }
  .main { margin-left:0; }
  .cmenu-toggle { display:block; }
  .two-col { grid-template-columns:1fr; }
}