:root{
  --brand:#e53935; --brand-dark:#b71c1c; --brand-light:#fde3e2;
}
body[data-theme="red"]{ --brand:#e53935; --brand-dark:#b71c1c; --brand-light:#fde3e2; }
body[data-theme="blue"]{ --brand:#1e6fd9; --brand-dark:#0d47a1; --brand-light:#e2ecfd; }
body[data-theme="green"]{ --brand:#2e9c4f; --brand-dark:#1b5e20; --brand-light:#e2f7e6; }

html, body{ max-width:100%; overflow-x:hidden; }
html{ height:100%; }
body{ background:#f4f5f8; font-family:'Segoe UI',Arial,sans-serif; margin:0; min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; }

.topbar{ background:#fff; height:60px; border-bottom:1px solid #e5e7eb; position:sticky; top:0; z-index:1030; flex-shrink:0; overflow:hidden; }
#sidebarToggle{ flex-shrink:0; }
.topbar-logo{ max-height:44px; width:auto; }
.topbar-title{ color:var(--brand-dark); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:38vw; }
.avatar-sm{ width:34px; height:34px; border-radius:50%; object-fit:cover; border:2px solid var(--brand-light); flex-shrink:0; }
#installBtn{ flex-shrink:0; white-space:nowrap; }

.app-shell{ display:flex; flex:1; }
.sidebar{ width:230px; background:#fff; border-right:1px solid #e5e7eb; flex-shrink:0; }
.sidebar .nav-link{ color:#374151; border-radius:8px; padding:.6rem .8rem; margin-bottom:2px; font-weight:500; }
.sidebar .nav-link i{ margin-right:8px; width:18px; display:inline-block; text-align:center; }
.sidebar .nav-link:hover{ background:var(--brand-light); color:var(--brand-dark); }
.sidebar .nav-link.active{ background:var(--brand); color:#fff; }
.content{ flex:1; min-width:0; display:flex; flex-direction:column; }
.app-footer{ margin-top:auto; border-top:1px solid #e5e7eb; line-height:1.6; }

.btn-primary, .bg-brand{ background:var(--brand)!important; border-color:var(--brand)!important; }
.btn-primary:hover{ background:var(--brand-dark)!important; border-color:var(--brand-dark)!important; }
.text-brand{ color:var(--brand)!important; }
.card-stat{ border:none; border-radius:14px; color:#fff; background:linear-gradient(135deg, var(--brand), var(--brand-dark)); }
a{ color:var(--brand-dark); }
.table thead{ background:var(--brand-light); }
.theme-swatch{ display:inline-block; width:38px;height:38px;border-radius:50%;cursor:pointer;border:3px solid #fff;box-shadow:0 0 0 2px #ddd; transition:.15s; }
.theme-swatch:hover{ transform:scale(1.08); }
.theme-swatch.selected{ box-shadow:0 0 0 3px var(--brand); }

/* Compact single-row filter bars (Reports, Invoices list) */
.filter-bar > div{ flex:0 0 auto; }
.filter-bar input, .filter-bar select{ width:auto; }
.filter-bar input[type="date"], .filter-bar input[type="month"]{ min-width:150px; }
.filter-bar input[type="number"]{ min-width:100px; }
.filter-bar select{ min-width:140px; }
.app-footer a{ color:inherit; }
.totals-row > span:last-child{ white-space:nowrap; }

/* Drag-to-reorder item rows (New Invoice / Edit Invoice) */
.drag-handle{ cursor:grab; width:28px; }
.drag-handle:active{ cursor:grabbing; }
.move-btn{ line-height:1; color:#6c757d; }
.move-btn:hover{ color:var(--brand); }
#itemsBody tr.dragging{ opacity:0.4; background:#f1f3f5; }
#itemsTable tbody tr{ transition:background-color .1s; }
@media (max-width: 576px){
  .filter-bar{ flex-direction:column; align-items:stretch!important; }
  .filter-bar > div{ width:100%; }
  .filter-bar input, .filter-bar select{ width:100%; }
}

@media (max-width: 991px){
  .sidebar{ position:fixed; left:-240px; top:60px; bottom:0; z-index:1040; transition:.25s; }
  .sidebar.show{ left:0; }
}

/* ---------------- Invoice / A4 print view ---------------- */
.invoice-sheet{ width:210mm; min-height:297mm; background:#fff; margin:0 auto; padding:12mm; box-shadow:0 0 12px rgba(0,0,0,.15); }
.invoice-sheet table{ width:100%; border-collapse:collapse; }
.invoice-sheet table td, .invoice-sheet table th{ border:1px solid #333; padding:5px 8px; font-size:13px; }
.invoice-sheet .no-border td{ border:none; }
/* Colors sampled directly from the real Print Idea invoice — these stay
   fixed regardless of the app's color theme, since this is the shop's
   actual printed stationery design. */
.inv-head-band{ background:#f7caab; color:#1a1a1a; }
.inv-head-band .band-title{ font-weight:700; font-size:14px; line-height:1.5; text-align:right; }
.inv-total-value{ background:#fbe4d6; }
.inv-ribbon{
  background:#e5322d;
  color:#fff;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 48% 100%);
  padding:10px 16px 10px 20px;
  height:100%;
  box-sizing:border-box;
  display:flex;
  align-items:center;
}
.inv-ribbon .band-title{ font-weight:700; font-size:14px; line-height:1.6; text-align:right; }
.inv-logo{ max-height:70px; }
.inv-title{ text-decoration:underline; font-weight:700; letter-spacing:1px; font-family:Georgia,'Times New Roman',serif; }
.inv-icon-whatsapp{ color:#25D366; }
.inv-icon-email{ color:#e05d54; }

@media print{
  body{ background:#fff; display:block; min-height:0; }
  .topbar, .sidebar, .no-print{ display:none!important; }
  .app-shell{ display:block; }
  .content{ display:block; padding:0!important; }
  .invoice-sheet{ box-shadow:none; margin:0; width:auto; min-height:0; }
  @page{ size:A4; margin:8mm; }
}