/* Billing layer styling — reuses CRM tokens (--navy, --gold, --line, etc). */

/* ===== DESIGN TOKENS ===== */
:root {
  /* Spacing scale (8px base) */
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 20px;
  --space-7: 24px;
  --space-8: 32px;
  /* Typography scale */
  --text-xs: 10px;
  --text-sm: 12px;
  --text-base: 13px;
  --text-md: 14px;
  --text-lg: 15px;
  --text-xl: 16px;
  --text-2xl: 17px;
  --text-3xl: 19px;
  /* Transitions */
  --trans-fast: 150ms ease;
  --trans-base: 250ms ease;
}

/* ===== ACCESSIBILITY IMPROVEMENTS ===== */
/* Visible focus indicators for all interactive elements */
button:focus-visible, input:focus-visible, select:focus-visible, [role="button"]:focus-visible {
  outline: 2px solid var(--blue, #0066cc);
  outline-offset: 2px;
}

/* Better focus state for form inputs */
input:focus, select:focus, textarea:focus {
  border-color: var(--blue, #0066cc) !important;
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}

/* Invalid state styling for forms */
input:invalid:not(:placeholder-shown), input[aria-invalid="true"] {
  border-color: var(--red, #d32f2f) !important;
}

input[aria-invalid="true"] + .field-error {
  display: block;
  color: var(--red, #d32f2f);
  font-size: var(--text-xs);
  margin-top: var(--space-2);
}

/* Enhanced link contrast */
.bl-link {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ===== MOBILE RESPONSIVENESS ===== */
@media (max-width: 768px) {
  /* POS layout: sticky summary at bottom on mobile */
  .bl-pos-grid {
    grid-template-columns: 1fr;
  }
  
  .bl-pos-side {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    border-top: 1px solid var(--line);
    background: white;
    border-radius: 12px 12px 0 0;
    padding: var(--space-4);
    max-height: 40vh;
    overflow-y: auto;
    z-index: 40;
    top: auto;
  }
  
  /* Add padding to main content so it doesn't hide under fixed summary */
  main { padding-bottom: 320px; }
  
  /* Forms responsive */
  .bl-form-grid, .bl-item-grid, .bl-og-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  /* Table horizontal scroll on mobile */
  .bl-table {
    font-size: var(--text-sm);
  }
  
  .bl-table th, .bl-table td {
    padding: var(--space-3) var(--space-2);
  }
}

.bl-hidden{display:none!important}

/* sidebar group labels + user/logout */
.nav-group{margin:13px 10px 4px;color:#7f8d9b;font-size:calc(9px * var(--read-scale,1));font-weight:700;letter-spacing:1.2px;text-transform:uppercase}
.nav-group:first-child{margin-top:2px}
.sidebar-foot{flex-direction:column;align-items:stretch;gap:8px}
.sb-user{display:flex;flex-direction:column}
.sb-user b{font-size:calc(11px * var(--read-scale,1));font-weight:600;color:#eef1f4}
.sb-user small{margin-top:2px;color:#8996a2;font-size:calc(10px * var(--read-scale,1))}
.sb-logout{padding:9px 11px;border:1px solid rgba(255,255,255,.18);border-radius:6px;background:rgba(255,255,255,.04);color:#e4b9b6;font-size:calc(12px * var(--read-scale,1));font-weight:600}
.sb-logout:hover{background:rgba(164,65,69,.25);border-color:#a44145;color:#fff}

/* cards + headings reused by billing pages */
.bl-card{padding:17px;margin-bottom:13px}
.bl-card-title{margin:0 0 12px;font-size:calc(15px * var(--read-scale,1));font-weight:600}
.bl-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.bl-card-head .bl-card-title{margin:0}
.bl-head-actions{display:flex;align-items:center;gap:9px}
.bl-invtag{padding:7px 12px;border:1px solid var(--line);border-radius:999px;background:#f8f8f7;color:#59626b;font-size:calc(12px * var(--read-scale,1));font-weight:600}

/* forms */
.bl-form-grid,.bl-item-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-3)}
.bl-form-grid label,.bl-item-grid label{display:flex;flex-direction:column;font-size:var(--text-sm);font-weight:600;color:#4f5962;gap:var(--space-2)}
.bl-form-grid input,.bl-item-grid input,.bl-item-grid select,.bl-form-grid select{min-height:42px;padding:var(--space-3) var(--space-4);border:1px solid #cfd4d8;border-radius:6px;background:#fff;font-size:var(--text-md);font-weight:500;transition:all var(--trans-fast)}
.bl-col-2{grid-column:span 2}
.bl-item-grid .bl-add{align-self:end;min-height:42px}

/* POS layout */
.bl-pos-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:14px;align-items:start}
.bl-pos-side{position:sticky;top:89px;display:grid;gap:13px}
.bl-items-scroll{margin-top:12px;border:1px solid var(--line);border-radius:6px}
.bl-table{width:100%;border-collapse:collapse;white-space:nowrap}
.bl-table th{position:sticky;top:0;z-index:10;padding:var(--space-3) var(--space-4);background:#f8f8f7;border-bottom:2px solid var(--line);color:#707880;font-size:var(--text-xs);text-transform:uppercase;font-weight:600;text-align:left}
.bl-table td{padding:var(--space-4) var(--space-3);border-bottom:1px solid #eceeed;font-size:var(--text-base);font-variant-numeric:tabular-nums}
.bl-table tbody tr:hover{background-color:rgba(0,0,0,0.02)}  /* ✓ Row hover state */
.bl-r{text-align:right}
.bl-empty{padding:var(--space-7) var(--space-3);color:var(--muted);text-align:center;font-size:var(--text-sm)}
.bl-x{border:0;background:#f3eef0;color:#a44145;border-radius:5px;padding:var(--space-2) var(--space-3);font-weight:700;cursor:pointer;transition:all var(--trans-fast)}
.bl-x:hover{background:#e8d6d8;color:#822}
.bl-x:focus-visible{outline:2px solid var(--red)}
.bl-link{border:0;background:transparent;color:var(--blue);font-weight:600;font-size:var(--text-sm);padding:var(--space-2) 0;cursor:pointer;text-decoration:underline;transition:color var(--trans-fast)}
.bl-link:hover{color:var(--navy)}
.bl-btn-sm{padding:var(--space-2) var(--space-3);border:1px solid #cfd4d8;border-radius:5px;background:#fff;color:#37414b;font-size:var(--text-sm);font-weight:600;cursor:pointer;transition:all var(--trans-fast)}
.bl-btn-sm:hover{background:#f6f7f7;border-color:#bbb}
.bl-btn-sm:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.bl-danger{color:var(--red);font-weight:700}

/* old gold */
.bl-og-item{padding:13px;border:1px solid var(--line);border-radius:6px;margin-bottom:10px;background:#fafafa}
.bl-og-head{display:flex;justify-content:space-between;margin-bottom:9px}
.bl-og-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.bl-og-grid label,.bl-og-note{display:flex;flex-direction:column;font-size:calc(10px * var(--read-scale,1));font-weight:600;color:#4f5962;gap:4px}
.bl-og-note{margin-top:9px}
.bl-og-grid input,.bl-og-note input{min-height:38px;padding:7px 9px;border:1px solid #cfd4d8;border-radius:5px;font-size:calc(13px * var(--read-scale,1))}
.bl-og-summary{display:flex;gap:18px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line);font-size:calc(12px * var(--read-scale,1));color:var(--muted)}
.bl-og-summary b{color:var(--ink)}

/* summary card */
.bl-summary-card .bl-sum-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid #eceeed;font-size:calc(13px * var(--read-scale,1))}
.bl-sum-row span{color:var(--muted)}
.bl-sum-row b{font-weight:600;font-variant-numeric:tabular-nums}
.bl-sum-total{border-bottom:0;padding-top:11px;font-size:calc(16px * var(--read-scale,1))}
.bl-sum-total b{font-size:calc(19px * var(--read-scale,1))}
.bl-sum-due{border-top:2px solid var(--navy);border-bottom:0;margin-top:4px;padding-top:10px}
.bl-sum-due b{color:var(--red);font-size:calc(17px * var(--read-scale,1))}
.bl-inline{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;font-size:calc(13px * var(--read-scale,1));font-weight:600;color:#4f5962}
.bl-inline input{width:120px;min-height:38px;padding:var(--space-2) var(--space-3);border:1px solid #cfd4d8;border-radius:6px;text-align:right;font-size:var(--text-md)}
.bl-check{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4);margin:var(--space-2) 0;border:1px solid #dfd3bd;border-radius:7px;background:#faf6ee;font-size:var(--text-md);font-weight:600;color:#6b5a32}
.bl-check input{width:18px;height:18px;cursor:pointer}
.bl-pay-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);margin:var(--space-4) 0}
.bl-pay-grid label{display:flex;flex-direction:column;gap:var(--space-2);font-size:var(--text-sm);font-weight:600;color:#4f5962}
.bl-pay-grid input,.bl-pay-grid select{min-height:42px;padding:var(--space-3) var(--space-3);border:1px solid #cfd4d8;border-radius:6px;font-size:var(--text-md)}
.bl-actions{display:grid;gap:var(--space-2);margin-top:var(--space-4)}
.bl-actions .bl-full{grid-column:1/-1}
.bl-actions .button{width:100%}

/* ===== PRINT STYLES ===== */
@media print {
  /* Hide all UI elements */
  .topbar, .sidebar, .menu-button, .top-actions, .subscription-banner, .nav-item, .nav-group, .bl-actions, .button {
    display: none !important;
  }
  
  /* Set up A4 page */
  body {
    margin: 0;
    padding: 0;
    background: white;
  }
  
  main {
    padding: 20mm;
    max-width: 210mm;
    margin: 0 auto;
  }
  
  /* Invoice header */
  .bl-invoice-header {
    margin-bottom: 12mm;
    border-bottom: 2px solid #000;
    padding-bottom: 8mm;
  }
  
  .bl-invoice-shop {
    font-size: 16pt;
    font-weight: bold;
    margin-bottom: 4mm;
  }
  
  .bl-invoice-meta {
    font-size: 9pt;
    color: #666;
    line-height: 1.4;
  }
  
  /* Invoice details */
  .bl-invoice-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 12mm;
    gap: 10mm;
  }
  
  .bl-invoice-details-section {
    font-size: 10pt;
  }
  
  .bl-invoice-details-section b {
    display: block;
    font-weight: bold;
    margin-bottom: 2mm;
    border-bottom: 1px solid #ccc;
    padding-bottom: 2mm;
  }
  
  /* Tables for print */
  .bl-table {
    width: 100%;
    margin: 8mm 0;
    border-collapse: collapse;
  }
  
  .bl-table th {
    background: #f0f0f0;
    border-bottom: 1px solid #000;
    padding: 3mm;
    font-size: 9pt;
    font-weight: bold;
    position: static;
  }
  
  .bl-table td {
    border-bottom: 1px solid #eee;
    padding: 3mm;
    font-size: 10pt;
  }
  
  .bl-table tbody tr:hover {
    background: white;
  }
  
  /* Invoice footer */
  .bl-invoice-footer {
    margin-top: 12mm;
    border-top: 2px solid #000;
    padding-top: 8mm;
    font-size: 9pt;
    line-height: 1.6;
    color: #666;
  }
  
  /* Terms & conditions */
  .bl-invoice-terms {
    margin-top: 8mm;
    font-size: 8pt;
    color: #999;
  }
  
  /* QR code area */
  .bl-qr-area {
    position: absolute;
    right: 20mm;
    bottom: 20mm;
  }
  
  /* Page breaks */
  .bl-page-break {
    page-break-after: always;
  }
}

/* home pending + day-end */
.bl-home-strip{grid-template-columns:repeat(4,1fr)}
.bl-home-pending-card{margin-top:0}
.bl-line-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid #eceeed}
.bl-line-row:last-child{border:0}
.bl-line-row small{display:block;color:var(--muted);font-size:calc(11px * var(--read-scale,1))}
.bl-metric-row{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin-bottom:13px}
.bl-metric{padding:14px;border:1px solid var(--line);border-radius:6px;background:#fafafa}
.bl-metric span{display:block;color:var(--muted);font-size:calc(11px * var(--read-scale,1))}
.bl-metric strong{display:block;margin-top:5px;font-size:calc(21px * var(--read-scale,1));font-weight:600}
.bl-paymode{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.bl-paymode>div{padding:14px;border:1px solid var(--line);border-radius:6px;text-align:center}
.bl-paymode span{display:block;color:var(--muted);font-size:calc(11px * var(--read-scale,1))}
.bl-paymode b{display:block;margin-top:5px;font-size:calc(18px * var(--read-scale,1))}

/* status tags */
.bl-tag{display:inline-flex;padding:3px 8px;border-radius:4px;background:#f0f2f3;color:#59636c;font-size:calc(10px * var(--read-scale,1));font-weight:600}
.bl-tag-Ready{background:var(--green-soft);color:var(--green)}
.bl-tag-UnderRepair{background:var(--gold-soft);color:#795b28}
.bl-tag-Delivered{background:#eef2f5;color:#55606a}
.bl-tag-Booked{background:var(--blue-soft);color:var(--blue)}

@media(max-width:1080px){
  .bl-form-grid,.bl-item-grid,.bl-og-grid{grid-template-columns:repeat(2,1fr)}
  .bl-pos-grid{grid-template-columns:1fr}
  .bl-pos-side{position:static}
  .bl-home-strip,.bl-metric-row{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .bl-form-grid,.bl-item-grid,.bl-og-grid{grid-template-columns:1fr}
  .bl-col-2{grid-column:auto}
  .bl-paymode{grid-template-columns:1fr}
}

/* ---------- print areas ---------- */
.bl-print-area,.bl-dayslip-area{display:none}
@media print{
  @page{ size:A4; margin:12mm; }
  /* CRM hides .page; billing overrides for its own print roots */
  body.bl-printing .bl-print-area{display:block!important}
  body.bl-printing-slip .bl-dayslip-area{display:block!important;max-width:80mm;margin:0 auto;font-family:monospace}
  body.bl-printing .sidebar,body.bl-printing .topbar,body.bl-printing .main,body.bl-printing .bottom-bar,
  body.bl-printing-slip .sidebar,body.bl-printing-slip .topbar,body.bl-printing-slip .main,body.bl-printing-slip .bottom-bar{display:none!important}
}
.bl-inv{max-width:760px;margin:0 auto;padding:0;color:#1a1a1a;font-size:12px;font-family:"IBM Plex Sans",Arial,sans-serif}
.bl-inv-head{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:14px;border-bottom:3px solid #172231}
.bl-inv-brand{display:flex;gap:14px;align-items:flex-start}
.bl-inv-logo{max-width:70px;max-height:70px;object-fit:contain;display:none}
.bl-inv-head h1{margin:0;font-size:23px;font-weight:700;letter-spacing:.3px;color:#172231}
.bl-inv-head p{margin:2px 0;font-size:11px;color:#444}
.bl-inv-meta{text-align:right;min-width:210px}
.bl-inv-meta h2{margin:0 0 8px;font-size:17px;letter-spacing:2px;color:#172231;font-weight:700}
.bl-inv-meta table{margin-left:auto;border-collapse:collapse;font-size:11px}
.bl-inv-meta td{padding:2px 0 2px 12px;text-align:right}
.bl-inv-meta td:first-child{color:#777;text-align:left;padding-left:0}
.bl-inv-meta td:last-child{font-weight:600}
.bl-inv-billto{display:flex;justify-content:space-between;gap:20px;margin:16px 0}
.bl-inv-lbl{font-size:9px;letter-spacing:1.2px;color:#8a8a8a;font-weight:700}
.bl-inv-billto p{margin:3px 0;font-size:11px}
.bl-inv-cname{font-size:14px!important;font-weight:700;color:#172231}
.bl-inv-ogref{text-align:right}
.bl-inv-table{width:100%;border-collapse:collapse;margin:6px 0}
.bl-inv-table th{background:#172231;color:#fff;padding:8px;font-size:10px;letter-spacing:.5px;text-align:left;font-weight:600}
.bl-inv-table th.bl-r,.bl-inv-table td.bl-r{text-align:right}
.bl-inv-table td{padding:8px;font-size:11px;border-bottom:1px solid #e6e6e6}
.bl-inv-table tbody tr:nth-child(even){background:#fafafa}
.bl-inv-foot{display:flex;justify-content:space-between;gap:24px;margin-top:14px;align-items:flex-start}
.bl-inv-words{flex:1;padding-top:6px}
.bl-inv-words p{margin:4px 0 0;font-size:12px;font-weight:600;color:#333;font-style:italic}
.bl-inv-tot{width:280px}
.bl-inv-tot>div{display:flex;justify-content:space-between;padding:5px 0;font-size:12px;border-bottom:1px solid #eee}
.bl-inv-tot .bl-p-net{border-top:2px solid #172231;border-bottom:2px solid #172231;font-weight:700;font-size:15px;color:#172231;padding:8px 0}
.bl-inv-tot .bl-p-due{font-weight:700;color:#c0314a;font-size:13px;border-bottom:0}
.bl-inv-box{margin:12px 0;padding:11px;border:1px solid #ddd;border-radius:6px;font-size:11px;background:#fafafa}
.bl-inv-box small{color:#888;font-weight:700;letter-spacing:.5px}
.bl-inv-terms{margin-top:20px;padding-top:10px;border-top:1px solid #e6e6e6;font-size:10px;color:#666}
.bl-inv-sign{margin-top:30px;text-align:right;font-size:11px;color:#333}

/* ---------- sidebar search + sticky groups ---------- */
.nav-search{position:relative;padding:8px 10px 4px}
.nav-search input{width:100%;min-height:36px;padding:7px 28px 7px 11px;border:1px solid rgba(255,255,255,.16);border-radius:7px;background:rgba(255,255,255,.05);color:#eef1f4;font-size:calc(12px * var(--read-scale,1))}
.nav-search input::placeholder{color:#8a97a3}
.nav-search span{position:absolute;right:20px;top:14px;color:#8a97a3;font-size:14px;pointer-events:none}
.nav{scroll-behavior:smooth}
.nav-group{position:sticky;top:0;z-index:2;background:var(--navy,#172231);padding-top:9px;padding-bottom:5px}

/* ---------- CRM hub tiles ---------- */
.hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:13px}
.hub-tile{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:17px;border:1px solid var(--line);border-radius:10px;background:#fff;text-align:left;cursor:pointer;transition:.15s}
.hub-tile:hover{border-color:var(--navy,#172231);box-shadow:0 4px 14px rgba(23,34,49,.09);transform:translateY(-1px)}
.hub-tile .hub-ic{font-size:22px;margin-bottom:6px}
.hub-tile b{font-size:calc(14px * var(--read-scale,1));font-weight:600}
.hub-tile small{color:var(--muted);font-size:calc(11px * var(--read-scale,1))}

/* ---------- mobile bottom bar ---------- */
.bottom-bar{display:none}
@media(max-width:760px){
  .bottom-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;background:#fff;border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));box-shadow:0 -2px 12px rgba(0,0,0,.06)}
  .bb-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;border:0;background:transparent;color:#7b8794;font-size:10px;font-weight:600;padding:4px 0}
  .bb-item span{font-size:19px;line-height:1}
  .bb-item.active{color:var(--navy,#172231)}
  .main{padding-bottom:72px!important}
  /* nudge the narrow drawer to be a bit wider for the search + groups */
  .sidebar{width:270px}
}

/* ---------- Client Account detail modal ---------- */
.bl-acc-modal{position:fixed;inset:0;z-index:60;background:rgba(20,28,38,.5);display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;padding:0}
.bl-acc-modal[hidden]{display:none}
.bl-acc-sheet{width:100%;max-width:560px;min-height:100%;background:#fff;padding:22px 20px calc(30px + env(safe-area-inset-bottom,0px))}
.bl-acc-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px}
.bl-acc-head h2{margin:0;font-size:calc(26px * var(--read-scale,1));font-weight:700}
.bl-acc-head p{margin:3px 0 0;color:var(--muted);font-size:calc(13px * var(--read-scale,1))}
.bl-acc-close{border:0;background:transparent;color:#9aa4ad;font-size:22px;cursor:pointer;padding:4px 8px}
.bl-acc-balance{background:#fdeef0;border-radius:12px;padding:20px;text-align:center;margin-bottom:20px}
.bl-acc-balance span{display:block;color:#c0314a;font-size:calc(12px * var(--read-scale,1));font-weight:700;letter-spacing:1px}
.bl-acc-balance strong{display:block;margin-top:8px;color:#c0314a;font-size:calc(38px * var(--read-scale,1));font-weight:800}
.bl-acc-label{color:#6b5a32;font-size:calc(12px * var(--read-scale,1));font-weight:700;letter-spacing:.8px;margin:0 0 9px}
.bl-acc-select{width:100%;min-height:52px;padding:12px 14px;border:1px solid #d9b94e;border-radius:9px;font-size:calc(16px * var(--read-scale,1));margin-bottom:11px;background:#fff}
.bl-acc-payrow{display:grid;grid-template-columns:1fr 120px;gap:11px;margin-bottom:11px}
.bl-acc-payrow input,.bl-acc-payrow select{min-height:56px;padding:12px 14px;border:1px solid #d7dce0;border-radius:9px;font-size:calc(17px * var(--read-scale,1))}
.bl-acc-apply{width:100%;min-height:56px;border:0;border-radius:10px;background:#141c26;color:#fff;font-size:calc(16px * var(--read-scale,1));font-weight:700;letter-spacing:1px;cursor:pointer}
.bl-acc-apply:hover{background:#000}
.bl-acc-contact{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0 22px}
.bl-acc-wa,.bl-acc-call{min-height:52px;border-radius:9px;border:1px solid var(--line);font-size:calc(13px * var(--read-scale,1));font-weight:700;letter-spacing:.5px;cursor:pointer}
.bl-acc-wa{background:#e5f5ea;color:#1f9d55;border-color:#cdecd7}
.bl-acc-call{background:#f7f8f9;color:#3a4650}
.bl-acc-ledger{border-top:1px solid var(--line);padding-top:18px}
.bl-acc-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-bottom:16px}
.bl-acc-stats>div{border:1px solid var(--line);border-radius:9px;padding:14px;text-align:center}
.bl-acc-stats span{display:block;color:var(--muted);font-size:calc(10px * var(--read-scale,1));letter-spacing:.5px}
.bl-acc-stats b{display:block;margin-top:6px;font-size:calc(22px * var(--read-scale,1));font-weight:700}
.bl-inv-card{border:1px solid var(--line);border-radius:10px;margin-bottom:11px;overflow:hidden}
.bl-inv-card-due{border-color:#d9b94e}
.bl-inv-card-head{display:flex;justify-content:space-between;align-items:center;padding:14px;cursor:pointer}
.bl-inv-card-head:hover{background:#fafafa}
.bl-inv-title{margin:0;font-size:calc(15px * var(--read-scale,1));font-weight:700;display:flex;align-items:center;gap:8px}
.bl-inv-dettag{font-size:calc(9px * var(--read-scale,1));background:#eceef0;color:#5a646d;padding:2px 7px;border-radius:4px;letter-spacing:.5px}
.bl-inv-sub{margin:4px 0 0;color:var(--muted);font-size:calc(11px * var(--read-scale,1))}
.bl-badge{padding:4px 10px;border-radius:5px;font-size:calc(10px * var(--read-scale,1));font-weight:700;letter-spacing:.8px;white-space:nowrap}
.bl-badge-ok{background:#e5f5ea;color:#1f9d55}
.bl-badge-due{background:#fde8ec;color:#d0314f}
.bl-inv-card-body{background:#f7f8f9;border-top:1px solid var(--line);padding:14px}
.bl-inv-ref{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.bl-inv-ref span{color:#8a949d;font-size:calc(10px * var(--read-scale,1));font-weight:700;letter-spacing:.8px}
.bl-inv-ref b{color:#8a949d;font-size:calc(11px * var(--read-scale,1));font-family:monospace;font-weight:500}
.bl-rcpt-box{background:#fff;border:1px solid var(--line);border-radius:8px;padding:12px}
.bl-rcpt-h{margin:0 0 6px;font-size:calc(11px * var(--read-scale,1));font-weight:700;color:#3a4650}
.bl-rcpt{display:flex;justify-content:space-between;font-size:calc(12px * var(--read-scale,1));padding-top:7px;margin-top:7px;border-top:1px solid #eef0f1;color:#5a646d}
.bl-rcpt:first-of-type{border-top:0;margin-top:0}
.bl-rcpt-amt{color:#1f9d55;font-weight:700}
.bl-rcpt-none{color:#9aa4ad;border:0}
@media(max-width:760px){
  .bl-acc-payrow{grid-template-columns:1fr}
  .bl-acc-sheet{max-width:none}
}

/* ---------- photo fields + previews + line thumbs ---------- */
.bl-photo-field{display:flex;flex-direction:column;font-size:calc(11px * var(--read-scale,1));font-weight:600;color:#4f5962;gap:5px}
.bl-photo-field input[type=file]{min-height:42px;padding:8px;border:1px dashed #cfd4d8;border-radius:6px;background:#fafafa;font-size:calc(11px * var(--read-scale,1))}
.bl-photo-prev{display:flex;align-items:center}
.bl-photo-prev img{max-width:64px;max-height:64px;border:1px solid var(--line);border-radius:7px;object-fit:cover;display:none}
.bl-photo-prev img[src]:not([src=""]){display:block}
.bl-line-thumb{width:24px;height:24px;border-radius:4px;object-fit:cover;vertical-align:middle;margin-left:6px;border:1px solid var(--line)}
.bl-og-item .bl-photo-prev img{display:block}

/* ---------- Home: pending collections compact cards ---------- */
.bl-pend-cards{display:flex;flex-wrap:wrap;gap:11px}
.bl-pend-card{display:flex;flex-direction:column;gap:5px;min-width:170px;padding:13px 15px;border:1px solid var(--line);border-left:3px solid var(--red,#c0314a);border-radius:9px;background:#fff}
.bl-pend-name{font-size:calc(13px * var(--read-scale,1));font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}
.bl-pend-due{font-size:calc(17px * var(--read-scale,1));font-weight:700;color:var(--red,#c0314a);font-variant-numeric:tabular-nums}
.bl-pend-open{align-self:flex-start;margin-top:2px}
@media(max-width:760px){.bl-pend-card{flex:1;min-width:140px}}

/* ---------- Day-End Closing ---------- */
.bl-de-status{padding:6px 14px;border-radius:999px;font-size:calc(11px * var(--read-scale,1));font-weight:700;letter-spacing:.5px}
.bl-de-open{background:var(--blue-soft,#e7effa);color:var(--blue,#2b63c4)}
.bl-de-closed{background:var(--green-soft,#e5f5ea);color:var(--green,#1f9d55)}
.bl-de-metrics{display:grid;grid-template-columns:repeat(6,1fr);gap:11px;margin-bottom:14px}
.bl-de-metrics .bl-metric-cash{border-color:#d9b94e;background:#fbf7ec}
.bl-de-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.bl-de-line{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid #eceeed;font-size:calc(13px * var(--read-scale,1))}
.bl-de-line span{color:var(--muted)}
.bl-de-line b{font-weight:600;font-variant-numeric:tabular-nums}
.bl-de-line input{width:140px;min-height:40px;padding:8px 11px;border:1px solid #cfd4d8;border-radius:6px;text-align:right;font-size:calc(14px * var(--read-scale,1))}
.bl-de-exp{border-top:2px solid var(--navy,#172231);border-bottom:0;margin-top:4px;padding-top:11px}
.bl-de-exp b{font-size:calc(16px * var(--read-scale,1))}
.bl-de-var b{font-size:calc(15px * var(--read-scale,1))}
.bl-de-var .bl-de-ok,#bl-de-variance.bl-de-ok{color:var(--green,#1f9d55)}
.bl-de-var .bl-de-off,#bl-de-variance.bl-de-off{color:var(--red,#c0314a);font-weight:700}
#bl-de-variance{font-weight:700;font-variant-numeric:tabular-nums}
.bl-de-exprow{display:grid;grid-template-columns:1fr 110px auto;gap:9px;margin-bottom:11px}
.bl-de-exprow input{min-height:42px;padding:9px 11px;border:1px solid #cfd4d8;border-radius:6px;font-size:calc(14px * var(--read-scale,1))}
.bl-de-exprow-item{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid #eceeed;font-size:calc(13px * var(--read-scale,1))}
.bl-de-exprow-item span{flex:1}
.bl-de-exprow-item b{font-variant-numeric:tabular-nums}
.bl-de-actions{display:flex;gap:10px;margin-bottom:14px}
@media(max-width:760px){.bl-de-metrics{grid-template-columns:repeat(2,1fr)}.bl-de-grid{grid-template-columns:1fr}.bl-de-exprow{grid-template-columns:1fr 90px auto}}

/* day-end slip (thermal style) */
.bl-slip{max-width:300px;margin:0 auto;font-family:"Courier New",monospace;color:#111;padding:8px}
.bl-slip h2{margin:0;text-align:center;font-size:16px}
.bl-slip-sub{text-align:center;margin:3px 0;font-size:11px;letter-spacing:2px}
.bl-slip-date{text-align:center;margin:0 0 6px;font-size:11px}
.bl-slip-sep{border-top:1px dashed #333;margin:7px 0}
.bl-slip-row{display:flex;justify-content:space-between;font-size:12px;padding:2px 0}
.bl-slip-exp{font-size:10px;color:#444;padding-left:8px}
.bl-slip-var b{font-weight:700}
.bl-slip-foot{text-align:center;font-size:9px;color:#555;margin-top:6px}

/* ---------- print note ---------- */
.bl-print-note{font-size:calc(10px * var(--read-scale,1));color:var(--muted);margin:2px 0 0;line-height:1.4}

/* ---------- billing report print ---------- */
.bl-report-area{display:none}
@media print{
  body.bl-printing-report .bl-report-area{display:block!important}
  body.bl-printing-report .sidebar,body.bl-printing-report .topbar,body.bl-printing-report .main,body.bl-printing-report .bottom-bar{display:none!important}
}
.bl-rep-doc{max-width:900px;margin:0 auto;color:#1a1a1a;font-family:"IBM Plex Sans",Arial,sans-serif}
.bl-rep-head{display:flex;justify-content:space-between;border-bottom:3px solid #172231;padding-bottom:10px}
.bl-rep-head h1{margin:0;font-size:20px;color:#172231}
.bl-rep-head p{margin:2px 0;font-size:11px;color:#555}
.bl-rep-meta{text-align:right}
.bl-rep-meta h2{margin:0;font-size:15px;color:#172231;letter-spacing:.5px}
.bl-rep-meta p{font-size:10px;color:#777}
.bl-rep-table{width:100%;border-collapse:collapse;margin-top:12px}
.bl-rep-table th{background:#172231;color:#fff;padding:7px;font-size:10px;text-align:left}
.bl-rep-table td{padding:6px 7px;font-size:11px;border-bottom:1px solid #e6e6e6}
.bl-rep-table .bl-r{text-align:right}
.bl-rep-table tbody tr:nth-child(even){background:#fafafa}
.bl-rep-tot td{border-top:2px solid #172231;font-weight:700;background:#f2f4f6}
.bl-rep-count{margin-top:8px;font-size:10px;color:#777}

/* ======================================================
   MOBILE / TABLET RESPONSIVE PASS
   ====================================================== */
/* tablet: tighten dense grids */
@media(max-width:1024px){
  .bl-pos-grid{grid-template-columns:1fr}
  .bl-pos-side{position:static}
  .bl-form-grid,.bl-item-grid,.bl-og-grid{grid-template-columns:repeat(3,1fr)}
  .bl-de-metrics{grid-template-columns:repeat(3,1fr)}
}
/* touch: bigger tap targets on coarse pointers */
@media(pointer:coarse){
  .button,.bl-btn-sm,.nav-item,.bb-item,.hub-tile,.bl-x{min-height:44px}
  .bl-btn-sm{min-height:40px;padding:9px 13px}
  input,select,textarea{font-size:16px!important} /* prevents iOS zoom */
  .nav-item{padding:12px 14px}
}
/* phone */
@media(max-width:760px){
  .page-heading{flex-direction:column;align-items:flex-start;gap:10px}
  .top-search{width:100%}
  .bl-form-grid,.bl-item-grid,.bl-og-grid{grid-template-columns:1fr!important}
  .bl-col-2{grid-column:auto}
  .metric-strip,.bl-home-strip,.bl-de-metrics,.bl-metric-row{grid-template-columns:repeat(2,1fr)!important}
  .report-grid{grid-template-columns:1fr!important}
  .bl-acc-stats{grid-template-columns:1fr 1fr 1fr}
  /* key tables -> stacked cards: Sales Register & Client Accounts */
  #bl-sales-body tr,#bl-acc-body tr{display:block;border:1px solid var(--line);border-radius:9px;margin-bottom:10px;padding:10px;background:#fff}
  #bl-sales-body td,#bl-acc-body td{display:flex;justify-content:space-between;gap:12px;border:0;padding:5px 2px;text-align:right}
  #bl-sales-body td::before,#bl-acc-body td::before{content:attr(data-label);color:var(--muted);font-weight:600;text-align:left}
  #salesPage thead,#accountsPage thead{display:none}
  #bl-sales-body td.bl-r,#bl-acc-body td.bl-r{text-align:right}
}

/* ---------- sidebar: menu scrolls so every item (Reports, Settings, Logout) is reachable ---------- */
.sidebar{height:100vh;height:100dvh}
.sidebar .brand,.sidebar .nav-search,.sidebar-foot{flex-shrink:0}
.sidebar .nav{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;align-content:start;margin-right:-6px;padding-right:6px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent}
.sidebar .nav::-webkit-scrollbar{width:6px}
.sidebar .nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:6px}
.sidebar-foot{margin-top:8px}

/* ---------- phone/tablet: grids may shrink; wide tables scroll inside their own box ---------- */
.bl-pos-grid>*,.bl-de-grid>*,.work-grid>*{min-width:0}
@media(max-width:1024px){
  .bl-pos-grid{grid-template-columns:minmax(0,1fr)!important}
}
@media(max-width:760px){
  .bl-de-grid,.work-grid{grid-template-columns:minmax(0,1fr)!important}
  .work-grid .span-2{grid-column:auto!important}
  .table-scroll,.bl-items-scroll{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
}
@media(max-width:760px){
  .bl-de-exprow{grid-template-columns:minmax(0,1fr) 84px auto!important}
  .bl-de-exprow input{min-width:0;width:100%}
  .bl-de-line input{width:120px;max-width:45vw}
  .bl-de-actions{flex-wrap:wrap}
}

/* ---------- tablet & small-laptop widths ---------- */
.main .table-scroll{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.bl-de-exprow{grid-template-columns:minmax(0,1fr) 96px auto}
.bl-de-exprow input{min-width:0;width:100%}
.title-block{min-width:0}
@media(max-width:1180px){
  .topbar{flex-wrap:wrap;row-gap:8px}
  .top-actions{flex-wrap:wrap;min-width:0;max-width:100%}
  .top-search{width:auto!important;flex:1 1 170px;min-width:0}
}
.bl-form-grid>*,.bl-item-grid>*,.bl-og-grid>*{min-width:0}
.bl-form-grid input,.bl-form-grid select,.bl-item-grid input,.bl-item-grid select,.bl-og-grid input,.bl-photo-field input[type=file]{min-width:0;width:100%;max-width:100%}
@media(max-width:1024px) and (min-width:761px){
  .bl-form-grid,.bl-item-grid,.bl-og-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
.bl-invtag{white-space:nowrap}

/* ---------- follow-up cards: action buttons drop below details on tablets/laptops ---------- */
@media(max-width:1280px){
  .followup-card{grid-template-columns:5px minmax(0,1fr)!important;row-gap:10px}
  .followup-card .followup-priority{grid-row:1 / span 2}
  .followup-card .followup-actions{grid-column:2;flex-wrap:wrap}
  .followup-main{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto!important;min-width:0}
}
@media(max-width:900px){
  .followup-main{grid-template-columns:minmax(0,1fr)!important;gap:6px}
}

/* ---------- billing cloud sync status (sidebar) ---------- */
.sb-sync{display:block;margin-top:5px;font-size:calc(10px * var(--read-scale,1));line-height:1.35;color:#9fb0bf}
.sb-sync[data-state="synced"]{color:#8fd3a8}
.sb-sync[data-state="offline"],.sb-sync[data-state="readonly"]{color:#e8c77d}
.sb-sync[data-state="error"],.sb-sync[data-state="blocked"]{color:#f0a3a3}
.bl-pend-bills{color:var(--muted);font-size:calc(11px * var(--read-scale,1));margin-top:-3px}

/* ===== Corrections #3/#4: sales filters + premium account modals ===== */
.bl-filter-bar{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin:4px 0 12px}
.bl-filter{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted,#6b7280)}
.bl-filter span{font-weight:600;letter-spacing:.3px}
.bl-filter input{padding:8px 10px;border:1px solid var(--line,#e2e5e9);border-radius:8px;font-size:13px;background:#fff}
.bl-filter-grow{flex:1;min-width:180px}
.bl-filter-grow input{width:100%}
.bl-filter-clear{align-self:flex-end}

.bl-modal-overlay{position:fixed;inset:0;background:rgba(17,24,33,.55);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:120;padding:16px}
.bl-modal-sheet{background:#fff;width:min(560px,100%);max-height:90vh;overflow:auto;border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.28);padding:20px 22px}
.bl-modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.bl-modal-head h2{margin:0;font-size:18px;color:#172231}
.bl-modal-x{border:0;background:#f1f2f4;width:32px;height:32px;border-radius:8px;cursor:pointer;font-size:15px;color:#555}
.bl-modal-x:hover{background:#e6e8eb}
.bl-modal-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bl-m-field{display:flex;flex-direction:column;gap:5px;font-size:12px;color:#5a646d}
.bl-m-field.bl-m-full{grid-column:1/-1}
.bl-m-field span{font-weight:600}
.bl-m-req{color:#c0314a}
.bl-m-field input{padding:10px 12px;border:1px solid var(--line,#dfe3e7);border-radius:9px;font-size:14px}
.bl-m-field input:focus{border-color:#0066cc;box-shadow:0 0 0 3px rgba(0,102,204,.12);outline:none}
.bl-m-field input[readonly]{background:#f6f7f8;color:#444;font-weight:700}
.bl-m-static{grid-column:1/-1;font-size:12.5px;color:#6b7280;background:#f6f7f8;padding:9px 12px;border-radius:8px}
.bl-modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
@media(max-width:560px){.bl-modal-grid{grid-template-columns:1fr}}

/* ===== Production: native save animation ===== */
.bl-saved-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:200;background:rgba(17,24,33,.28);backdrop-filter:blur(2px);opacity:0;transition:opacity .18s ease;pointer-events:none}
.bl-saved-overlay.show{opacity:1}
.bl-saved-card{background:#fff;border-radius:20px;padding:26px 34px;display:flex;flex-direction:column;align-items:center;gap:12px;box-shadow:0 20px 50px rgba(0,0,0,.25);transform:scale(.88);transition:transform .22s cubic-bezier(.17,.67,.3,1.33)}
.bl-saved-overlay.show .bl-saved-card{transform:scale(1)}
.bl-saved-card p{margin:0;font-size:15px;font-weight:600;color:#172231}
.bl-saved-check{width:66px;height:66px}
.bl-saved-check circle{fill:none;stroke:#1f9d55;stroke-width:3;stroke-dasharray:151;stroke-dashoffset:151;animation:bl-check-c .4s ease forwards}
.bl-saved-check path{fill:none;stroke:#1f9d55;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:48;stroke-dashoffset:48;animation:bl-check-p .34s .32s ease forwards}
@keyframes bl-check-c{to{stroke-dashoffset:0}}
@keyframes bl-check-p{to{stroke-dashoffset:0}}

/* offline status pill */
.sync-status.offline i{background:#e0a106!important}
.sync-status.offline{color:#9a6a00}
/* bigger touch targets + no text-select for tablet app feel */
.bl-viewbill{margin:6px 0;width:100%;font-size:13px}

/* ===== #15 split payments ===== */
.bl-pay-block{margin:6px 0 2px}
.bl-pay-head{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:600;color:#5a646d;margin-bottom:6px}
.bl-pay-line{display:grid;grid-template-columns:1fr 130px 28px;gap:8px;align-items:center;margin-bottom:6px}
.bl-pay-line input,.bl-pay-line select{padding:9px 10px;border:1px solid var(--line,#dfe3e7);border-radius:8px;font-size:14px}
.bl-pay-line .bl-x{border:0;background:#f1f2f4;border-radius:8px;height:34px;cursor:pointer;color:#c0314a;font-size:15px}
.bl-pay-x-sp{display:inline-block}
.bl-pay-subrow{display:flex;justify-content:space-between;font-size:13px;color:#444;padding:4px 2px;border-top:1px dashed #e4e6e9;margin-top:4px}
.bl-pay-subrow b{font-weight:700}

/* ===== #17 ledger bill detail ===== */
.bl-billdetail{margin:8px 0;padding:10px;border:1px solid #e9eaec;border-radius:10px;background:#fcfcfd}
.bl-billdetail-t{width:100%;border-collapse:collapse;font-size:12px;margin-top:4px}
.bl-billdetail-t th{text-align:left;color:#6b7280;font-weight:600;font-size:10.5px;border-bottom:1px solid #e4e6e9;padding:5px 6px}
.bl-billdetail-t td{padding:5px 6px;border-bottom:1px solid #f0f1f3}
.bl-billdetail-t .bl-r{text-align:right}
.bl-billdetail-tot{margin-top:8px}
.bl-billdetail-tot>div{display:flex;justify-content:space-between;font-size:12.5px;padding:3px 2px}
.bl-billdetail-tot .bl-bd-grand{border-top:1px solid #d7d9dc;margin-top:3px;padding-top:6px;font-weight:700;font-size:13.5px}
.bl-billdetail-tot .bl-bd-due b{color:#c0314a}

/* ===== #20 Places ===== */
.bl-place-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin-top:8px}
.bl-place-card{border:1px solid var(--line,#e4e6e9);border-radius:12px;padding:14px;background:#fff;cursor:pointer;transition:box-shadow .15s,transform .05s}
.bl-place-card:hover{box-shadow:0 6px 18px rgba(0,0,0,.08)}
.bl-place-card:active{transform:scale(.995)}
.bl-place-top{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.bl-place-code{width:62px;font-weight:700;letter-spacing:1px;text-align:center;text-transform:uppercase;padding:6px 4px;border:1px solid var(--line,#dfe3e7);border-radius:8px;background:#f6f7f8;color:#172231}
.bl-place-name{font-size:15px;color:#172231}
.bl-place-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.bl-place-stats>div{display:flex;flex-direction:column;gap:2px}
.bl-place-stats span{font-size:10.5px;color:#8a929b;letter-spacing:.3px}
.bl-place-stats b{font-size:14px;color:#172231}
.bl-place-stats b.bl-danger{color:#c0314a}