@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow+Condensed:wght@400;600;700;800&family=Barlow:wght@300;400;500&display=swap');

/* ─── RESET ─── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font-family:'DM Sans',sans-serif;font-size:14px;background:#0c0e14;color:#e2e5f0;-webkit-tap-highlight-color:transparent}
button{cursor:pointer;font-family:inherit;border:none;background:none}
input,textarea,select{font-family:inherit;appearance:none;-webkit-appearance:none}
a{text-decoration:none;color:inherit}
img{display:block}

/* ─── VARIABLES ─── */
:root{
  --bg:#0c0e14;
  --s1:#13161f;
  --s2:#191d2a;
  --s3:#1f2436;
  --s4:#252b3d;
  --b1:#2a3047;
  --b2:#323b56;
  --accent:#4e8cff;
  --accent-d:#3a72e8;
  --accent-glow:rgba(78,140,255,0.12);
  --green:#2ecc8f;
  --green-bg:rgba(46,204,143,0.1);
  --red:#ff5c6a;
  --red-bg:rgba(255,92,106,0.1);
  --amber:#f5a623;
  --amber-bg:rgba(245,166,35,0.1);
  --purple:#a78bfa;
  --purple-bg:rgba(167,139,250,0.1);
  --t1:#e2e5f0;
  --t2:#8892b0;
  --t3:#4a5575;
  --sidebar-w:216px;
  --topbar-h:54px;
  --radius:12px;
  --radius-sm:8px;
  --radius-xs:5px;
  --shadow:0 8px 32px rgba(0,0,0,0.5);
  --shadow-sm:0 2px 12px rgba(0,0,0,0.3);
}

/* ─── LAYOUT ─── */
#app{display:flex;height:100vh;overflow:hidden}
#sidebar{
  width:var(--sidebar-w);background:var(--s1);border-right:1px solid var(--b1);
  display:flex;flex-direction:column;flex-shrink:0;z-index:20;
  transition:width 0.22s cubic-bezier(0.4,0,0.2,1);overflow:hidden;
  position:fixed;top:0;left:0;height:100vh;
}
#sidebar.collapsed{width:52px}
#sidebar.collapsed .sb-shop-name,
#sidebar.collapsed .sb-shop-tag,
#sidebar.collapsed .nav-group-label,
#sidebar.collapsed .nav-item span,
#sidebar.collapsed .nav-badge,
#sidebar.collapsed .sb-footer{display:none}
#sidebar.collapsed .sb-logo{padding:14px 10px}
#sidebar.collapsed .sb-shop-icon{margin-bottom:0}
#sidebar.collapsed .nav-item{padding:10px;justify-content:center}
#sidebar.collapsed .nav-item svg{width:18px;height:18px;opacity:0.7}
#sidebar.collapsed .nav-item.active svg{opacity:1}
#sidebar-wrap{
  width:var(--sidebar-w);flex-shrink:0;position:relative;
  transition:width 0.22s cubic-bezier(0.4,0,0.2,1);
}
#sidebar-wrap.collapsed{width:52px}
#sidebar-toggle{
  position:fixed;bottom:14px;left:calc(var(--sidebar-w) - 14px);
  width:28px;height:28px;border-radius:50%;background:var(--s2);
  border:1px solid var(--b2);display:flex;align-items:center;justify-content:center;
  cursor:pointer;z-index:30;color:var(--t3);transition:all 0.2s,left 0.22s cubic-bezier(0.4,0,0.2,1);
  box-shadow:var(--shadow-sm)
}
#sidebar-toggle:hover{color:var(--t1);background:var(--s3)}
#sidebar-toggle svg{width:14px;height:14px;transition:transform 0.22s}
#sidebar-wrap.collapsed #sidebar-toggle{left:38px}
#sidebar-wrap.collapsed #sidebar-toggle svg{transform:rotate(180deg)}
#main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
#topbar{height:var(--topbar-h);background:var(--s1);border-bottom:1px solid var(--b1);display:flex;align-items:center;padding:0 20px;gap:10px;flex-shrink:0}
#content{flex:1;overflow-y:auto;padding:24px 24px 40px}

/* Global hide — must appear BEFORE media query (platform rule) */
#bottom-nav{display:none}
#mob-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.55);z-index:299;backdrop-filter:blur(2px)}
#more-sheet{display:none}

/* ─── SIDEBAR ─── */
.sb-logo{padding:18px 16px 14px}
.sb-shop-icon{width:34px;height:34px;border-radius:10px;background:var(--accent-glow);border:1px solid rgba(78,140,255,0.25);display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.sb-shop-icon svg{width:17px;height:17px;color:var(--accent)}
.sb-shop-name{font-family:'Syne',sans-serif;font-weight:700;font-size:15px;color:var(--t1);line-height:1.2}
.sb-shop-tag{font-size:11px;color:var(--t3);margin-top:2px}
.sb-nav{flex:1;padding:8px 10px;overflow-y:auto}
.nav-group-label{font-size:10px;font-weight:600;color:var(--t3);letter-spacing:0.08em;text-transform:uppercase;padding:10px 8px 5px;margin-top:4px}
.nav-item{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:var(--radius-sm);color:var(--t2);font-size:13px;font-weight:500;cursor:pointer;transition:all 0.12s;margin-bottom:1px;width:100%;text-align:left;position:relative}
.nav-item svg{width:15px;height:15px;flex-shrink:0}
.nav-item:hover{background:var(--s3);color:var(--t1)}
.nav-item.active{background:var(--accent-glow);color:var(--accent)}
.nav-item.active svg{color:var(--accent)}
.nav-badge{position:absolute;right:10px;background:var(--red);color:#fff;font-size:10px;font-weight:700;min-width:18px;height:18px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 5px}
.nav-badge.amber{background:var(--amber)}
.sb-footer{padding:12px 16px;border-top:1px solid var(--b1);font-size:10px;color:var(--t3)}

/* ─── TOPBAR ─── */
#menu-toggle{display:none;color:var(--t2);padding:6px}
#menu-toggle svg{width:20px;height:20px}
.topbar-title{font-family:'Syne',sans-serif;font-weight:700;font-size:17px;flex:1;color:var(--t1)}
.topbar-actions{display:flex;align-items:center;gap:8px}

/* ─── BUTTONS ─── */
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 15px;border-radius:var(--radius-sm);font-size:13px;font-weight:500;transition:all 0.12s;cursor:pointer;white-space:nowrap;border:none}
.btn svg{width:14px;height:14px;flex-shrink:0}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-d);transform:translateY(-1px)}
.btn-ghost{background:var(--s3);color:var(--t2);border:1px solid var(--b1)}
.btn-ghost:hover{background:var(--s4);color:var(--t1)}
.btn-success{background:var(--green-bg);color:var(--green);border:1px solid rgba(46,204,143,0.2)}
.btn-success:hover{background:rgba(46,204,143,0.18)}
.btn-danger{background:var(--red-bg);color:var(--red);border:1px solid rgba(255,92,106,0.2)}
.btn-danger:hover{background:rgba(255,92,106,0.18)}
.btn-wa{background:#25d366;color:#fff}
.btn-wa:hover{background:#1db954;transform:translateY(-1px)}
.btn-amber{background:var(--amber-bg);color:var(--amber);border:1px solid rgba(245,166,35,0.2)}
.btn-sm{padding:5px 10px;font-size:12px}
.btn-xs{padding:3px 8px;font-size:11px}
.btn-icon{padding:7px;border-radius:var(--radius-sm)}

/* ─── CARDS ─── */
.card{background:var(--s2);border:1px solid var(--b1);border-radius:var(--radius);padding:20px}
.card-0{padding:0}
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.card-title{font-family:'Syne',sans-serif;font-weight:600;font-size:14px;color:var(--t1)}

/* ─── KPI GRID ─── */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:22px}
.kpi{cursor:pointer;transition:transform 0.12s,box-shadow 0.12s,border-color 0.12s}
.kpi:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,0.35)}
.kpi.active{border-color:var(--accent)!important;box-shadow:0 0 0 2px var(--accent-glow)}
.kpi-drill{background:var(--s2);border:1px solid var(--b1);border-radius:var(--radius);margin-bottom:20px;overflow:hidden;animation:drillIn 0.18s ease;}
@keyframes drillIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.kpi-drill-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--b1);}
.kpi-drill-title{font-family:'Syne',sans-serif;font-weight:600;font-size:14px;color:var(--t1)}
.kpi-drill-body{padding:0}
.kpi{background:var(--s2);border:1px solid var(--b1);border-radius:var(--radius);padding:18px 20px;position:relative;overflow:hidden}
.kpi::before{content:'';position:absolute;top:0;right:0;width:80px;height:80px;border-radius:50%;opacity:0.06;transform:translate(20px,-20px)}
.kpi.accent::before{background:var(--accent)}
.kpi.green::before{background:var(--green)}
.kpi.red::before{background:var(--red)}
.kpi.amber::before{background:var(--amber)}
.kpi.purple::before{background:var(--purple)}
.kpi-icon{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.kpi-icon svg{width:15px;height:15px}
.kpi.accent .kpi-icon{background:var(--accent-glow);color:var(--accent)}
.kpi.green .kpi-icon{background:var(--green-bg);color:var(--green)}
.kpi.red .kpi-icon{background:var(--red-bg);color:var(--red)}
.kpi.amber .kpi-icon{background:var(--amber-bg);color:var(--amber)}
.kpi.purple .kpi-icon{background:var(--purple-bg);color:var(--purple)}
.kpi-label{font-size:11px;font-weight:600;color:var(--t3);letter-spacing:0.05em;text-transform:uppercase;margin-bottom:6px}
.kpi-value{font-family:'Syne',sans-serif;font-weight:700;font-size:24px;color:var(--t1);line-height:1;margin-bottom:4px}
.kpi.accent .kpi-value{color:var(--accent)}
.kpi.green .kpi-value{color:var(--green)}
.kpi.red .kpi-value{color:var(--red)}
.kpi.amber .kpi-value{color:var(--amber)}
.kpi.purple .kpi-value{color:var(--purple)}
.kpi-sub{font-size:11px;color:var(--t3)}

/* ─── TABLE ─── */
.tbl-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}
thead th{font-size:10px;font-weight:700;color:var(--t3);letter-spacing:0.07em;text-transform:uppercase;padding:10px 14px;border-bottom:1px solid var(--b1);text-align:left;background:var(--s2);white-space:nowrap}
tbody td{padding:11px 14px;border-bottom:1px solid var(--b1);color:var(--t2);font-size:13px;vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr{cursor:pointer;transition:background 0.1s}
tbody tr:hover td{background:var(--s3);color:var(--t1)}
tbody tr.no-hover{cursor:default}
tbody tr.no-hover:hover td{background:transparent;color:var(--t2)}

/* ─── BADGES ─── */
.badge{display:inline-flex;align-items:center;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:600;letter-spacing:0.01em;white-space:nowrap}
.badge-green{background:var(--green-bg);color:var(--green)}
.badge-red{background:var(--red-bg);color:var(--red)}
.badge-amber{background:var(--amber-bg);color:var(--amber)}
.badge-blue{background:var(--accent-glow);color:var(--accent)}
.badge-gray{background:var(--s4);color:var(--t2)}
.badge-purple{background:var(--purple-bg);color:var(--purple)}

/* ─── FORMS ─── */
.form-grid{display:grid;gap:14px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.field{display:flex;flex-direction:column;gap:5px}
.field label{font-size:12px;font-weight:500;color:var(--t2)}
.req{color:var(--red)}
input,textarea,select{background:var(--s3);border:1px solid var(--b1);border-radius:var(--radius-xs);padding:9px 11px;color:var(--t1);font-size:13px;outline:none;transition:border-color 0.15s;width:100%}
input:focus,textarea:focus,select:focus{border-color:var(--accent)}
select option{background:var(--s3);color:var(--t1)}
textarea{resize:vertical;min-height:68px;line-height:1.5}
input[type="number"]{-moz-appearance:textfield}
input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none}
.input-prefix{position:relative}
.input-prefix span{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--t3);font-size:13px;pointer-events:none;font-family:'DM Mono',monospace}
.input-prefix input{padding-left:22px}

/* ─── MODAL ─── */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,0.65);z-index:200;display:flex;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(6px)}
.modal{background:var(--s2);border:1px solid var(--b1);border-radius:16px;width:100%;max-width:520px;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow);display:flex;flex-direction:column}
.modal-lg{max-width:680px}
.modal-xl{max-width:800px}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--b1);flex-shrink:0}
.modal-head h3{font-family:'Syne',sans-serif;font-weight:600;font-size:15px;color:var(--t1)}
.modal-body{padding:20px 22px;flex:1;overflow-y:auto}
.modal-foot{padding:14px 22px;border-top:1px solid var(--b1);display:flex;justify-content:flex-end;gap:9px;flex-shrink:0}
.x-btn{color:var(--t3);padding:4px;border-radius:5px;display:flex}
.x-btn:hover{color:var(--t1);background:var(--s4)}

/* ─── CONFLICT WARNING ─── */
.conflict-warning{background:var(--amber-bg);border:1px solid rgba(245,166,35,0.3);border-radius:var(--radius-xs);padding:10px 14px;font-size:12px;color:var(--amber);margin-bottom:12px}
.conflict-warning.hidden{display:none}

/* ─── SEARCH ─── */
.search-box{position:relative}
.search-box svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--t3);width:14px;height:14px;pointer-events:none}
.search-box input{padding-left:32px}

/* ─── DIVIDER ─── */
hr{border:none;border-top:1px solid var(--b1);margin:16px 0}
.section-label{font-size:10px;font-weight:700;color:var(--t3);letter-spacing:0.08em;text-transform:uppercase;margin-bottom:10px}

/* ─── EMPTY STATE ─── */
.empty{text-align:center;padding:48px 20px}
.empty-icon{font-size:36px;margin-bottom:12px;opacity:0.35}
.empty h4{font-family:'Syne',sans-serif;font-weight:600;font-size:15px;color:var(--t2);margin-bottom:5px}
.empty p{font-size:13px;color:var(--t3)}

/* ─── QUICK TAGS ─── */
.quick-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:4px}
.qtag{background:var(--s3);border:1px solid var(--b1);border-radius:var(--radius-xs);padding:5px 11px;font-size:12px;color:var(--t2);cursor:pointer;transition:all 0.1s;white-space:nowrap}
.qtag:hover{background:var(--s4);color:var(--t1);border-color:var(--accent)}

/* ─── LINE ITEM EDITOR ─── */
.li-table{width:100%;border-collapse:collapse;font-size:12px}
.li-table th{color:var(--t3);font-size:10px;font-weight:700;letter-spacing:0.07em;text-transform:uppercase;padding:5px 6px;border-bottom:1px solid var(--b1);text-align:left}
.li-table td{padding:5px 4px;border-bottom:1px solid var(--b1)}
.li-table tr:last-child td{border-bottom:none}
.li-table input{padding:5px 7px;font-size:12px}
.li-total-row{text-align:right;font-family:'Syne',sans-serif;font-weight:700;font-size:16px;color:var(--accent);margin-top:8px}
.li-margin{font-size:12px;color:var(--t3);text-align:right;margin-top:2px}

/* ─── PRINT VIEW — A3 Detailing World Brand ─── */
#print-overlay{
  display:none;position:fixed;inset:0;background:#f2f2f0;z-index:500;
  overflow-y:auto;padding:32px 20px;
}
.print-invoice{
  max-width:740px;margin:0 auto;
  font-family:'Barlow',sans-serif;color:#111;
  background:#fff;
  box-shadow:0 8px 48px rgba(0,0,0,0.18);
}
.print-header{background:#080808;padding:32px 36px 28px;display:flex;justify-content:space-between;align-items:flex-start;position:relative;overflow:hidden;}
.print-header::after{content:'';position:absolute;top:0;right:0;width:200px;height:100%;background:linear-gradient(to left,rgba(212,43,43,0.12),transparent);pointer-events:none;}
.print-header::before{content:'A3';position:absolute;right:-20px;bottom:-28px;font-family:'Bebas Neue',sans-serif;font-size:160px;color:rgba(255,255,255,0.03);letter-spacing:-4px;pointer-events:none;line-height:1;}
.print-logo-wrap{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.print-logo-a{background:#181818;width:42px;height:30px;display:flex;align-items:center;justify-content:center;font-family:'Bebas Neue',sans-serif;font-size:20px;color:#fff;border-radius:3px 0 0 3px;}
.print-logo-3{background:#D42B2B;width:42px;height:30px;display:flex;align-items:center;justify-content:center;font-family:'Bebas Neue',sans-serif;font-size:20px;color:#fff;border-radius:0 3px 3px 0;}
.print-brand-name{font-family:'Bebas Neue',sans-serif;font-size:22px;color:#fff;letter-spacing:3px;line-height:1;}
.print-brand-sub{font-family:'Barlow Condensed',sans-serif;font-size:9px;letter-spacing:4px;color:rgba(255,255,255,0.4);text-transform:uppercase;margin-top:3px;}
.print-contact-block{text-align:right;position:relative;z-index:1}
.print-contact-phone{font-family:'Bebas Neue',sans-serif;font-size:22px;color:#D42B2B;letter-spacing:1px;line-height:1;margin-bottom:6px;}
.print-contact-line{font-family:'Barlow Condensed',sans-serif;font-size:11px;color:rgba(255,255,255,0.5);letter-spacing:0.5px;line-height:1.7;}
.print-red-stripe{height:4px;background:linear-gradient(to right,#D42B2B,#ff4444,#A01E1E);}
.print-doc-section{padding:24px 36px 20px;display:flex;justify-content:space-between;align-items:flex-end;border-bottom:1px solid #ececec;}
.print-doc-type-big{font-family:'Bebas Neue',sans-serif;font-size:52px;line-height:1;letter-spacing:5px;color:#111;}
.print-doc-type-big span{color:#D42B2B}
.print-doc-meta{text-align:right}
.print-doc-number{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:18px;letter-spacing:2px;color:#111;}
.print-doc-date-label{font-family:'Barlow Condensed',sans-serif;font-size:9px;letter-spacing:3px;text-transform:uppercase;color:#999;margin-top:4px;}
.print-doc-date-val{font-family:'Barlow Condensed',sans-serif;font-size:14px;font-weight:600;color:#555;}
.print-info-grid{display:grid;grid-template-columns:1fr 1fr;padding:24px 36px;gap:24px;background:#fafafa;border-bottom:1px solid #ececec;}
.print-info-label{font-family:'Barlow Condensed',sans-serif;font-size:9px;font-weight:700;letter-spacing:4px;text-transform:uppercase;color:#D42B2B;margin-bottom:6px;}
.print-info-name{font-family:'Bebas Neue',sans-serif;font-size:24px;letter-spacing:1px;color:#111;line-height:1;margin-bottom:4px;}
.print-info-sub{font-family:'Barlow',sans-serif;font-size:12px;color:#777;line-height:1.6;font-weight:300;}
.print-vehicle-block{display:flex;flex-direction:column;justify-content:center;}
.print-vehicle-car{font-family:'Bebas Neue',sans-serif;font-size:22px;letter-spacing:1px;color:#111;line-height:1;margin-bottom:4px;}
.print-vehicle-details{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px;}
.print-vehicle-chip{background:#111;color:#fff;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:10px;letter-spacing:2px;padding:3px 9px;border-radius:2px;text-transform:uppercase;}
.print-vehicle-chip.red{background:#D42B2B}
.print-items-wrap{padding:0 36px}
.print-items-wrap table{width:100%;border-collapse:collapse;margin-top:0}
.print-items-wrap thead tr{background:#111;}
.print-items-wrap th{font-family:'Barlow Condensed',sans-serif;font-size:9px;font-weight:700;letter-spacing:4px;text-transform:uppercase;color:rgba(255,255,255,0.55);padding:11px 14px;text-align:left;}
.print-items-wrap th:nth-child(2),.print-items-wrap th:nth-child(3){text-align:center}
.print-items-wrap th:last-child{text-align:right}
.print-items-wrap tbody tr{border-bottom:1px solid #f0f0f0}
.print-items-wrap tbody tr:last-child{border-bottom:none}
.print-items-wrap td{padding:13px 14px;font-size:13px;color:#333;font-family:'Barlow',sans-serif;font-weight:400;}
.print-items-wrap td:first-child{font-weight:500;color:#111}
.print-items-wrap td:nth-child(2){text-align:center;color:#888;font-size:12px}
.print-items-wrap td:nth-child(3){text-align:center;color:#888;font-size:12px}
.print-items-wrap td:last-child{text-align:right;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:15px;color:#111;}
.print-total-section{margin:0 36px;border-top:2px solid #111;padding:16px 0 0;display:flex;justify-content:flex-end;align-items:baseline;gap:20px;}
.print-total-label{font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:700;letter-spacing:4px;text-transform:uppercase;color:#999;}
.print-total-amount{font-family:'Bebas Neue',sans-serif;font-size:38px;letter-spacing:1px;color:#D42B2B;line-height:1;}
.print-note-block{margin:20px 36px 0;padding:14px 18px;border-left:3px solid #D42B2B;background:#fff8f8;font-family:'Barlow',sans-serif;font-size:12px;color:#555;line-height:1.6;font-weight:300;}
.print-note-block strong{font-family:'Barlow Condensed',sans-serif;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#D42B2B;font-size:10px;display:block;margin-bottom:4px;}
.print-next-service{margin:20px 36px 0;background:#080808;padding:12px 18px;display:flex;align-items:center;justify-content:space-between;}
.print-next-service-label{font-family:'Barlow Condensed',sans-serif;font-size:9px;letter-spacing:4px;text-transform:uppercase;color:#D42B2B;}
.print-next-service-date{font-family:'Bebas Neue',sans-serif;font-size:18px;color:#fff;letter-spacing:2px;}
.print-footer-section{margin:28px 36px 0;padding:16px 0;border-top:1px solid #e8e8e8;display:flex;justify-content:space-between;align-items:center;}
.print-footer-thanks{font-family:'Bebas Neue',sans-serif;font-size:16px;letter-spacing:3px;color:#D42B2B;}
.print-footer-right{text-align:right;font-family:'Barlow Condensed',sans-serif;font-size:10px;color:#aaa;letter-spacing:1px;line-height:1.6;}
.print-footer-tagline-bar{background:#080808;padding:10px 36px;display:flex;align-items:center;justify-content:center;gap:12px;}
.print-footer-tagline-bar span{font-family:'Barlow Condensed',sans-serif;font-size:9px;letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,0.3);}
.print-footer-tagline-bar .dot{width:3px;height:3px;background:#D42B2B;border-radius:50%;flex-shrink:0;}
.print-estimate-watermark{text-align:center;padding:8px;font-family:'Bebas Neue',sans-serif;font-size:10px;letter-spacing:6px;color:#e8e8e8;text-transform:uppercase;background:#fafafa;border-bottom:1px solid #ececec;}
.print-actions{display:flex;gap:10px;justify-content:flex-end;margin-bottom:20px;flex-wrap:wrap;align-items:center;}
.print-actions button{padding:9px 18px;border-radius:3px;font-size:12px;cursor:pointer;border:none;font-family:'Barlow Condensed',sans-serif;font-weight:700;letter-spacing:2px;text-transform:uppercase;display:inline-flex;align-items:center;gap:6px;}
.print-btn-print{background:#D42B2B;color:#fff}
.print-btn-wa{background:#25d366;color:#fff}
.print-btn-copy{background:#080808;color:#fff}
.print-btn-close{background:#e8e8e8;color:#333}
.print-wa-tip{font-size:12px;color:#888;background:#fffbea;border:1px solid #f5d76e;border-radius:3px;padding:10px 14px;margin-bottom:14px;line-height:1.5;}
.print-wa-tip strong{color:#b8860b}
@media print{
  #print-overlay .print-actions{display:none!important}
  #print-overlay .print-wa-tip{display:none!important}
  #print-overlay{position:absolute;background:#fff;padding:0}
  #app{display:none}
  .print-invoice{box-shadow:none}
}

/* ─── CHART BARS ─── */
.chart-wrap{display:flex;align-items:flex-end;gap:4px;height:140px;padding:8px 0 0}
.cbar-group{flex:1;display:flex;gap:2px;align-items:flex-end}
.cbar{border-radius:3px 3px 0 0;min-height:2px;transition:height 0.5s cubic-bezier(0.4,0,0.2,1)}
.cbar.earned{background:var(--green)}
.cbar.spent{background:var(--red)}
.cbar.profit{background:var(--accent)}
.chart-labels{display:flex;gap:4px;margin-top:6px}
.chart-label{flex:1;text-align:center;font-size:10px;color:var(--t3);font-family:'DM Mono',monospace}
.chart-legend{display:flex;gap:14px;margin-bottom:12px;flex-wrap:wrap}
.cleg{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--t2)}
.cleg-dot{width:9px;height:9px;border-radius:2px;flex-shrink:0}

/* ─── SERVICE ALERT ─── */
.service-alert{background:var(--red-bg);border:1px solid rgba(255,92,106,0.25);border-radius:var(--radius);padding:14px 18px;margin-bottom:18px;display:flex;align-items:center;gap:12px}
.service-alert svg{width:18px;height:18px;color:var(--red);flex-shrink:0}
.service-alert-title{font-size:13px;font-weight:600;color:var(--red)}
.service-alert-sub{font-size:12px;color:var(--t3);margin-top:2px}

/* ─── DETAIL LAYOUT ─── */
.detail-grid{display:grid;grid-template-columns:300px 1fr;gap:20px;align-items:start}
.detail-section{margin-bottom:20px}
.dl{display:grid;gap:10px}
.dl-row{display:flex;justify-content:space-between;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--b1)}
.dl-row:last-child{border-bottom:none}
.dl-label{font-size:12px;color:var(--t3);font-weight:500}
.dl-value{font-size:13px;color:var(--t1);text-align:right;font-weight:500}

/* ─── TOAST ─── */
#toast-root{position:fixed;bottom:20px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{background:var(--s3);border:1px solid var(--b2);border-radius:var(--radius-sm);padding:11px 16px;font-size:13px;color:var(--t1);box-shadow:var(--shadow);animation:toastIn 0.2s ease;max-width:280px}
.toast.ok{border-left:3px solid var(--green)}
.toast.err{border-left:3px solid var(--red)}
.toast.info{border-left:3px solid var(--accent)}
@keyframes toastIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ─── PROGRESS BAR ─── */
.prog-bar{height:5px;background:var(--s4);border-radius:3px;overflow:hidden;margin-top:4px}
.prog-fill{height:100%;border-radius:3px;transition:width 0.4s}

/* ─── MOBILE ─── */
@media(max-width:680px){
  /* Sidebar */
  #sidebar-wrap{display:none}
  #menu-toggle{display:flex}
  #sidebar-toggle{display:none}
  #sidebar{
    z-index:300;
    transform:translateX(-100%);
    width:260px!important;
    box-shadow:4px 0 24px rgba(0,0,0,0.5);
    transition:transform 0.25s ease;
  }
  #sidebar.mob-open{transform:translateX(0)}
  #sidebar.collapsed{width:260px!important}
  #sidebar.collapsed .sb-shop-name,
  #sidebar.collapsed .sb-shop-tag,
  #sidebar.collapsed .nav-group-label,
  #sidebar.collapsed .nav-item span,
  #sidebar.collapsed .nav-badge,
  #sidebar.collapsed .sb-footer{display:unset!important}
  #sidebar.collapsed .nav-item{padding:9px 10px!important;justify-content:flex-start!important}
  #mob-backdrop.visible{display:block}

  /* Bottom nav */
  #bottom-nav{display:flex;position:fixed;bottom:0;left:0;right:0;background:var(--s1);border-top:1px solid var(--b1);z-index:100;padding:4px 0 env(safe-area-inset-bottom)}
  .bn-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 4px;color:var(--t3);font-size:10px;font-weight:500;cursor:pointer;transition:color 0.15s;border:none;background:none;min-height:48px;justify-content:center}
  .bn-item svg{width:22px;height:22px}
  .bn-item.active{color:var(--accent)}

  /* More sheet */
  #more-sheet{display:none;position:fixed;bottom:0;left:0;right:0;background:var(--s2);border:1px solid var(--b1);border-bottom:none;border-radius:16px 16px 0 0;z-index:200;padding:16px 0 calc(16px + env(safe-area-inset-bottom));box-shadow:0 -8px 32px rgba(0,0,0,0.5)}
  #more-sheet.open{display:block}
  .more-sheet-item{display:flex;align-items:center;gap:14px;padding:14px 22px;color:var(--t2);font-size:15px;font-weight:500;cursor:pointer;border:none;background:none;width:100%;text-align:left;min-height:48px}
  .more-sheet-item svg{width:20px;height:20px;color:var(--t3)}
  .more-sheet-item:active{background:var(--s3)}
  .more-sheet-item.active{color:var(--accent)}
  .more-sheet-item.active svg{color:var(--accent)}
  .more-sheet-handle{width:36px;height:4px;background:var(--b2);border-radius:2px;margin:0 auto 14px}

  /* Content */
  #content{padding:14px 14px 82px}

  /* Layout */
  .detail-grid{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .form-row-3{grid-template-columns:1fr 1fr}
  .kpi-grid{grid-template-columns:1fr 1fr}

  /* Modals as bottom sheets */
  .modal{max-width:100%;max-height:92vh;border-radius:16px 16px 0 0;margin-top:auto}
  .overlay{align-items:flex-end;padding:0}

  /* Topbar buttons — icon only */
  .topbar-actions .btn span{display:none}
  .topbar-actions .btn{padding:8px}

  /* Tap targets */
  tbody td{padding:13px 12px}
  input,select,textarea{padding:11px 12px;font-size:16px}
  .btn-sm{padding:8px 12px}
  .qtag{padding:8px 14px;font-size:13px}
  thead th{padding:10px 12px}
}

/* ─── UTILITIES ─── */
.mono{font-family:'DM Mono',monospace}
.fw6{font-weight:600}
.fw7{font-weight:700}
.c-green{color:var(--green)}
.c-red{color:var(--red)}
.c-amber{color:var(--amber)}
.c-accent{color:var(--accent)}
.c-muted{color:var(--t3)}
.c-t2{color:var(--t2)}
.mt4{margin-top:4px}
.mt8{margin-top:8px}
.mt12{margin-top:12px}
.mt16{margin-top:16px}
.mt20{margin-top:20px}
.mb8{margin-bottom:8px}
.mb12{margin-bottom:12px}
.mb16{margin-bottom:16px}
.mb20{margin-bottom:20px}
.flex{display:flex}
.flex-1{flex:1}
.gap6{gap:6px}
.gap8{gap:8px}
.gap10{gap:10px}
.gap12{gap:12px}
.items-center{align-items:center}
.justify-between{justify-content:space-between}
.text-right{text-align:right}
.wrap{flex-wrap:wrap}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--b2);border-radius:4px}