:root{
  --brand-primary:#1668E8;
  --brand-accent:#18CFC3;
  --navy:#0B1F38;
  --navy-2:#102A4A;
  --bg:#F5F7FB;
  --surface:#FFFFFF;
  --surface-soft:#F8FAFD;
  --surface-muted:#EEF3F8;
  --text:#152033;
  --text-soft:#607089;
  --text-faint:#8C99AC;
  --border:#E3E8F0;
  --border-strong:#D6DEE9;
  --success:#12A76A;
  --success-bg:#EAF8F2;
  --warning:#D98B00;
  --warning-bg:#FFF6E3;
  --danger:#D94A4A;
  --danger-bg:#FFF0F0;
  --violet:#7459E8;
  --shadow-xs:0 1px 2px rgba(18,32,51,.03);
  --shadow-sm:0 8px 24px rgba(18,32,51,.06);
  --shadow-md:0 18px 46px rgba(18,32,51,.10);
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;
  --sidebar-w:248px;
  --content-max:1440px;
}

html[data-theme="dark"]{
  --bg:#0A1422;
  --surface:#0F2036;
  --surface-soft:#12263F;
  --surface-muted:#182F4A;
  --text:#EDF4FC;
  --text-soft:#A8B7C9;
  --text-faint:#7F93AA;
  --border:#213B58;
  --border-strong:#2C4967;
  --success-bg:rgba(18,167,106,.14);
  --warning-bg:rgba(217,139,0,.14);
  --danger-bg:rgba(217,74,74,.14);
  --shadow-sm:0 10px 28px rgba(0,0,0,.18);
  --shadow-md:0 20px 50px rgba(0,0,0,.28);
}

*{box-sizing:border-box;min-width:0}
html{font-size:16px;scroll-behavior:smooth;background:var(--bg);color-scheme:light}
html[data-theme="dark"]{color-scheme:dark}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;line-height:1.45;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button{color:inherit}
img,svg,video,canvas{max-width:100%}
.ui-icon{width:18px;height:18px;display:inline-block;flex:0 0 auto;vertical-align:-3px}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.grow{flex:1 1 auto;min-width:0}
.block{display:block;margin-top:3px;color:var(--text-soft);font-size:.78rem}
.muted{color:var(--text-soft)}

/* App shell */
.app-shell{min-height:100vh;display:flex}
.sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar-w);height:100vh;background:linear-gradient(180deg,var(--navy),#08182C 100%);color:#DDEAF7;display:flex;flex-direction:column;z-index:300;box-shadow:12px 0 30px rgba(6,20,38,.07)}
.sidebar-brand{height:82px;padding:18px 16px;display:flex;align-items:center;border-bottom:1px solid rgba(255,255,255,.07)}
.brand-lockup{display:flex;align-items:center;gap:10px;flex:1;overflow:hidden}
.brand-lockup img{width:40px;height:40px;object-fit:contain;border-radius:10px;background:white;padding:3px;box-shadow:0 6px 16px rgba(0,0,0,.16)}
.brand-lockup div{display:flex;flex-direction:column;min-width:0}
.brand-lockup strong{font-size:.94rem;letter-spacing:.01em;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-lockup small{font-size:.65rem;color:#8299B2;margin-top:1px}
.sidebar-close{display:none;border:0;background:transparent;color:#A9BED2;padding:7px;border-radius:8px;cursor:pointer}
.sidebar-scroll{flex:1;overflow:auto;padding:15px 12px 18px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.12) transparent}
.nav-group{display:flex;flex-direction:column;gap:4px;margin-bottom:22px}
.nav-label{padding:0 10px 7px;font-size:.62rem;text-transform:uppercase;letter-spacing:.12em;font-weight:700;color:#607A96}
.nav-item{min-height:42px;padding:10px 11px;border-radius:9px;display:flex;align-items:center;gap:10px;color:#9FB2C7;font-size:.82rem;font-weight:600;transition:.16s ease}
.nav-item .ui-icon{width:17px;height:17px}
.nav-item:hover{color:#fff;background:rgba(255,255,255,.055)}
.nav-item.active{color:white;background:linear-gradient(90deg,#1672F3,#1F86FF);box-shadow:0 7px 18px rgba(22,104,232,.28)}
.sidebar-footer{padding:12px;border-top:1px solid rgba(255,255,255,.07)}
.profile-card{display:flex;align-items:center;gap:9px;padding:9px;border-radius:10px;color:#D8E5F2;transition:.15s}
.profile-card:hover,.profile-card.active{background:rgba(255,255,255,.055)}
.avatar,.mobile-avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;font-weight:700;background:linear-gradient(135deg,#EDF4FF,#D9E8FF);color:#135DC9;border:1px solid rgba(255,255,255,.6)}
.avatar{width:34px;height:34px;font-size:.75rem;flex:0 0 34px}
.avatar.small{width:30px;height:30px;flex-basis:30px;font-size:.7rem}
.profile-meta{flex:1;display:flex;flex-direction:column;overflow:hidden}
.profile-meta strong{font-size:.76rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.profile-meta small{font-size:.65rem;color:#7F96AE;text-transform:capitalize}
.profile-card>.ui-icon{width:14px;height:14px;color:#6F879F}
.sidebar-footer form{margin:4px 0 0}
.sidebar-logout{width:100%;border:0;background:transparent;color:#8EA5BC;min-height:38px;padding:9px;border-radius:9px;display:flex;align-items:center;gap:10px;cursor:pointer;font-size:.76rem;font-weight:600;text-align:left}
.sidebar-logout:hover{background:rgba(255,255,255,.05);color:#fff}
.app-main{margin-left:var(--sidebar-w);width:calc(100% - var(--sidebar-w));min-height:100vh}
.mobile-topbar{display:none}
.content-wrap{width:min(var(--content-max),100%);margin:0 auto;padding:30px clamp(20px,2.7vw,42px) 50px}
.page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:24px}
.page-header h1{margin:0;color:var(--text);font-size:clamp(1.45rem,2vw,1.78rem);line-height:1.15;letter-spacing:-.025em;font-weight:750}
.page-header p{margin:6px 0 0;color:var(--text-soft);font-size:.8rem}
.page-context{font-size:.72rem;color:var(--text-soft);padding-top:4px;white-space:nowrap}
.menu-overlay{display:none}

/* Common cards & typography */
.panel,.kpi-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-xs)}
.panel{padding:20px;margin-bottom:18px}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px}
.panel-head>div{min-width:0}
.panel h2,.panel-head h2{font-size:.94rem;line-height:1.25;margin:0;color:var(--text);font-weight:720;letter-spacing:-.01em}
.panel-head p{margin:4px 0 0;color:var(--text-soft);font-size:.72rem}
.panel-total{font-size:1.05rem;font-weight:750;color:var(--brand-primary)}
.page-actions-row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px}
.section-intro{display:flex;flex-direction:column;gap:2px}
.section-intro strong{font-size:.84rem}
.section-intro span{font-size:.72rem;color:var(--text-soft)}
.text-link{display:inline-flex;align-items:center;gap:4px;color:var(--brand-primary);font-size:.72rem;font-weight:650;white-space:nowrap}
.text-link .ui-icon{width:13px;height:13px}
.text-button{border:0;background:transparent;color:var(--brand-primary);font-size:.72rem;font-weight:650;cursor:pointer;padding:4px}

/* KPI */
.kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}
.kpi-card{padding:17px 18px;min-height:120px;display:flex;flex-direction:column;justify-content:space-between}
.kpi-head{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--text-soft);font-size:.72rem;font-weight:600}
.kpi-card>strong{display:block;font-size:clamp(1.15rem,1.9vw,1.42rem);letter-spacing:-.025em;margin:8px 0 2px;overflow-wrap:anywhere}
.kpi-card>small{color:var(--text-faint);font-size:.66rem}
.kpi-icon{width:32px;height:32px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center}
.kpi-icon .ui-icon{width:16px;height:16px}
.kpi-icon.primary{background:#EAF2FF;color:#1769E8}.kpi-icon.cyan{background:#E6FBF9;color:#0FA69B}.kpi-icon.warning{background:var(--warning-bg);color:var(--warning)}.kpi-icon.violet{background:#F1EEFF;color:var(--violet)}
html[data-theme="dark"] .kpi-icon.primary{background:rgba(22,104,232,.17)} html[data-theme="dark"] .kpi-icon.cyan{background:rgba(24,207,195,.14)} html[data-theme="dark"] .kpi-icon.violet{background:rgba(116,89,232,.16)}

/* Buttons */
.btn,.icon-btn,.menu-toggle{appearance:none;border:1px solid var(--border-strong);background:var(--surface);color:var(--text);cursor:pointer;transition:.16s ease}
.btn{min-height:40px;padding:9px 14px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;gap:7px;font-size:.76rem;font-weight:650;line-height:1.2;white-space:normal;text-align:center}
.btn:hover{border-color:#B8C5D7;background:var(--surface-soft)}
.btn-primary{background:linear-gradient(180deg,#1975F5,var(--brand-primary));border-color:var(--brand-primary);color:white;box-shadow:0 7px 16px rgba(22,104,232,.16)}
.btn-primary:hover{background:#125FD6;border-color:#125FD6}
.btn-secondary{background:var(--surface);color:var(--text);border-color:var(--border-strong)}
.btn-ghost{background:transparent;border-color:transparent;color:var(--text-soft)}
.btn-danger{background:var(--danger-bg);border-color:#F0CACA;color:var(--danger)}
.danger-text{color:var(--danger)!important}
.btn-small{min-height:34px;padding:6px 10px;font-size:.7rem}
.btn-block{width:100%}
.icon-btn{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;padding:0}
.icon-btn:hover{background:var(--surface-soft);border-color:#C8D3E1}
.icon-btn.danger{color:var(--danger)}

/* Forms */
label{display:flex;flex-direction:column;gap:6px;color:var(--text-soft);font-size:.7rem;font-weight:600}
label small{font-weight:400;color:var(--text-faint)}
input,select,textarea{display:block;width:100%;max-width:100%;min-height:42px;padding:9px 11px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text);outline:none;font-size:.78rem;box-shadow:inset 0 0 0 1px transparent;transition:.15s}
textarea{resize:vertical;min-height:86px}
input::placeholder,textarea::placeholder{color:#A9B3C2}
input:focus,select:focus,textarea:focus{border-color:#78A9EF;box-shadow:0 0 0 3px rgba(22,104,232,.10)}
input[type="color"]{padding:4px;height:42px;cursor:pointer}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;align-items:end}
.form-grid.two-columns,.two-columns{grid-template-columns:repeat(2,minmax(0,1fr))}
.form-grid.three-columns,.three-columns{grid-template-columns:repeat(3,minmax(0,1fr))}
.span-full{grid-column:1/-1}
.stack-form{display:flex;flex-direction:column;gap:14px}
.form-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px}
.two-field{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.password-wrap{position:relative}
.password-wrap input{padding-right:44px}
.password-toggle{position:absolute;right:4px;top:3px;border:0;background:transparent}
.search-box{height:40px;display:flex;align-items:center;gap:8px;border:1px solid var(--border);background:var(--surface);border-radius:9px;padding:0 11px;color:var(--text-faint)}
.search-box:focus-within{border-color:#7DAAF0;box-shadow:0 0 0 3px rgba(22,104,232,.08)}
.search-box input{height:38px;min-height:38px;padding:0;border:0;box-shadow:none;background:transparent;font-size:.75rem}
.search-box input:focus{box-shadow:none;border:0}
.search-box .ui-icon{width:15px;height:15px}

/* Alerts */
.alert{display:flex;align-items:center;gap:8px;padding:11px 13px;border:1px solid var(--border);border-radius:9px;margin-bottom:16px;font-size:.76rem}
.alert.success{background:var(--success-bg);border-color:rgba(18,167,106,.25);color:var(--success)}
.alert.danger{background:var(--danger-bg);border-color:rgba(217,74,74,.26);color:var(--danger)}
.badge{display:inline-flex;align-items:center;justify-content:center;min-height:22px;padding:3px 8px;border-radius:999px;font-size:.62rem;font-weight:700;white-space:nowrap}
.badge.success{background:var(--success-bg);color:var(--success)}
.badge.warning{background:var(--warning-bg);color:var(--warning)}
.badge.danger{background:var(--danger-bg);color:var(--danger)}
.type-pill,.role-pill{display:inline-flex;align-items:center;min-height:24px;padding:3px 8px;background:var(--surface-muted);border-radius:999px;color:var(--text-soft);font-size:.64rem;font-weight:650}

/* Dashboard */
.dashboard-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:18px;align-items:start}
.alert-summary{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.alert-summary>div{padding:12px;border-radius:9px;background:var(--surface-soft);display:flex;align-items:center;gap:7px}
.alert-summary strong{font-size:.98rem}.alert-summary small{font-size:.66rem;color:var(--text-soft)}
.status-dot{width:8px;height:8px;border-radius:50%;display:inline-block}.status-dot.danger{background:var(--danger)}.status-dot.warning{background:var(--warning)}
.clean-list,.operation-list{display:flex;flex-direction:column}
.clean-list-row,.operation-row{display:flex;align-items:center;gap:10px;padding:11px 0;border-top:1px solid var(--border)}
.clean-list-row:first-child,.operation-row:first-child{border-top:0}
.clean-list-row strong,.operation-row strong{font-size:.75rem;display:block}
.clean-list-row small,.operation-row small{font-size:.64rem;color:var(--text-soft);display:block;margin-top:2px}
.product-mark,.operation-icon{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex:0 0 34px;background:#EDF4FF;color:var(--brand-primary)}
.product-mark .ui-icon,.operation-icon .ui-icon{width:16px;height:16px}
.operation-icon{background:#F2F5F9;color:#5C6F86}
.operation-amount{text-align:right;display:flex;align-items:flex-end;flex-direction:column;gap:3px}

/* Empty state */
.empty-state{padding:35px 18px;text-align:center;display:flex;align-items:center;justify-content:center;flex-direction:column;color:var(--text-soft)}
.empty-state.compact{padding:22px 10px}
.empty-icon{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--surface-muted);color:var(--brand-primary);margin-bottom:10px}
.empty-state strong{font-size:.8rem;color:var(--text)}
.empty-state p{font-size:.69rem;margin:4px 0 0;max-width:420px}

/* Table & menus */
.table-wrap{width:100%;overflow:auto;border:1px solid var(--border);border-radius:10px;background:var(--surface)}
.data-table,table{width:100%;border-collapse:collapse;font-size:.74rem}
th,td{padding:12px 13px;text-align:left;border-bottom:1px solid var(--border);vertical-align:middle}
th{background:var(--surface-soft);color:#6E7E92;font-size:.61rem;text-transform:uppercase;letter-spacing:.055em;font-weight:750;white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:rgba(22,104,232,.018)}
td strong{font-size:.74rem}
.cell-actions{text-align:right;width:60px}
.product-cell,.user-cell{display:flex;align-items:center;gap:9px;min-width:150px}
.product-cell small{display:block;color:var(--text-faint);font-size:.62rem;margin-top:2px}
.row-menu{position:relative;display:inline-block;text-align:left}
.row-menu summary{list-style:none}.row-menu summary::-webkit-details-marker{display:none}
.row-menu-popover{position:absolute;z-index:80;right:0;top:42px;width:330px;max-width:min(330px,calc(100vw - 32px));padding:13px;background:var(--surface);border:1px solid var(--border);border-radius:11px;box-shadow:var(--shadow-md)}
.compact-menu .row-menu-popover{width:210px}
.row-menu-popover>strong{display:block;font-size:.72rem;margin-bottom:9px}
.mini-form{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.mini-form input,.mini-form select{min-height:34px;padding:6px 8px;font-size:.7rem}
.mini-form .btn{grid-column:1/-1}
.action-popover,.user-popover{padding:7px}
.menu-action{width:100%;border:0;background:transparent;color:var(--text);display:flex;align-items:center;gap:9px;padding:9px;border-radius:7px;font-size:.72rem;cursor:pointer;text-align:left}
.menu-action:hover{background:var(--surface-soft)}
.menu-action.danger{color:var(--danger)}
.menu-divider{height:1px;background:var(--border);margin:6px 0}
.reset-password-form{padding:7px;display:flex;flex-direction:column;gap:8px}

/* Stock */
.stock-toolbar{align-items:stretch}
.stock-toolbar>.search-box{width:min(420px,100%)}
.toolbar-actions{display:flex;gap:8px;align-items:center}
.status-tabs{display:flex;align-items:center;gap:6px;overflow:auto;padding:2px 0 14px;scrollbar-width:none}
.status-tabs span{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:8px;color:var(--text-soft);font-size:.69rem;white-space:nowrap;border:1px solid transparent}
.status-tabs span.active{background:#EAF2FF;color:var(--brand-primary);border-color:#D7E6FF}
.status-tabs b{font-size:.62rem;padding:1px 5px;border-radius:999px;background:var(--surface-muted)}
.create-panel{border-color:#CFE0FA;box-shadow:var(--shadow-sm)}
.product-form{grid-template-columns:repeat(3,minmax(0,1fr))}
.row-menu-popover form+form{margin-top:8px}

/* Cashier */
.cashier-summary-strip{display:flex;gap:18px;margin:-5px 0 18px}
.cashier-summary-strip>div{display:flex;align-items:baseline;gap:8px;font-size:.68rem;color:var(--text-soft)}
.cashier-summary-strip strong{font-size:.8rem;color:var(--text)}
.checkout-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(330px,.72fr);gap:18px;align-items:start}
.product-catalog-panel,.checkout-panel{margin-bottom:0}
.catalog-tools{margin-bottom:12px}.catalog-tools .search-box{width:100%}
.product-catalog{display:flex;flex-direction:column;gap:7px;max-height:650px;overflow:auto;padding-right:3px}
.product-pick{width:100%;border:1px solid var(--border);background:var(--surface);min-height:68px;border-radius:9px;padding:8px 10px;display:grid;grid-template-columns:46px minmax(0,1fr) auto 30px;gap:10px;align-items:center;text-align:left;cursor:pointer;transition:.14s}
.product-pick:hover{border-color:#BFD4F4;background:#FBFDFF;box-shadow:0 4px 15px rgba(22,104,232,.05)}
.product-thumb{width:44px;height:44px;border-radius:8px;background:#EEF4FC;color:#4878AA;display:flex;align-items:center;justify-content:center}
.product-thumb .ui-icon{width:22px;height:22px}
.product-pick-meta strong,.product-pick-info strong{display:block;font-size:.72rem}.product-pick-meta small,.product-pick-info small{display:block;font-size:.6rem;color:var(--text-faint);margin-top:2px}
.product-pick-info{text-align:right}.product-add{width:28px;height:28px;border-radius:7px;background:#EAF2FF;color:var(--brand-primary);display:flex;align-items:center;justify-content:center}.product-add .ui-icon{width:14px;height:14px}
.checkout-panel{position:sticky;top:18px}
.cart-lines{display:flex;flex-direction:column;gap:8px;max-height:350px;overflow:auto;margin-bottom:10px;padding-right:2px}
.cart-item{border:1px solid var(--border);background:var(--surface-soft);border-radius:9px;padding:10px;display:block}
.cart-item .product-label select{font-weight:650;background:var(--surface);margin-bottom:8px}
.cart-item-grid{display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:7px}
.cart-item-grid input{min-height:35px;padding:6px 7px;font-size:.7rem}
.cart-item-footer{display:flex;align-items:center;justify-content:space-between;margin-top:8px;padding-top:8px;border-top:1px solid var(--border)}
.cart-item-footer small{display:block;font-size:.59rem;color:var(--text-faint)}
.cart-item-footer strong{font-size:.76rem}
.cart-item-footer .icon-btn{width:30px;height:30px}
.mobile-add-line{display:none}
.checkout-customer{padding:14px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:9px}
.checkout-totals{padding:14px 0;display:flex;flex-direction:column;gap:8px}
.checkout-totals>div{display:flex;align-items:center;justify-content:space-between;font-size:.72rem;color:var(--text-soft)}
.checkout-totals>div strong{color:var(--text);font-size:.75rem}
.checkout-totals .discount-line{display:grid;grid-template-columns:1fr 88px;align-items:center;gap:10px;flex-direction:row}
.checkout-totals .discount-line input{min-height:36px}
.checkout-totals .grand-total{border-top:1px solid var(--border);padding-top:10px;margin-top:2px;color:var(--text);font-size:.86rem;font-weight:700}
.checkout-totals .grand-total strong{font-size:1.1rem;color:var(--brand-primary)}
.payment-box{background:var(--surface-soft);border:1px solid var(--border);border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:9px}
.change-row{display:flex;align-items:center;justify-content:space-between;font-size:.72rem}.change-row strong{font-size:.88rem;color:var(--brand-primary)}
.checkout-submit{margin-top:12px;min-height:46px}

/* Invoice builder */
.invoice-builder{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start}
.invoice-main{min-width:0}
.invoice-sidebar{min-width:0}.sticky-summary{position:sticky;top:18px}
.invoice-lines-head{display:grid;grid-template-columns:2fr .65fr .9fr .7fr .9fr 36px;gap:8px;padding:0 8px 7px;color:var(--text-faint);font-size:.59rem;text-transform:uppercase;letter-spacing:.04em;font-weight:700}
.invoice-lines{display:flex;flex-direction:column;gap:7px}
.invoice-line{display:grid;grid-template-columns:2fr .65fr .9fr .7fr .9fr 36px;gap:8px;align-items:end;border:1px solid var(--border);border-radius:9px;padding:8px;background:var(--surface-soft)}
.invoice-line label{gap:0}.invoice-line input,.invoice-line select{min-height:38px;padding:7px 8px;font-size:.71rem}
.invoice-line .line-total{min-height:38px;display:flex;align-items:center;padding:0 6px;font-size:.74rem}
.mobile-field-label{display:none}
.invoice-total-box{margin-top:4px}.invoice-sidebar label+label{margin-top:10px}

/* Filters */
.filters-panel{padding:14px 16px}
.filter-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.inline-tabs{padding:0;flex:1}.inline-tabs span{padding:6px 9px}
.filter-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.professional-filters{padding-top:12px}.professional-filters .search-box{min-width:250px}.professional-filters select{width:auto;min-width:160px}

/* Reports */
.report-toolbar{display:flex;justify-content:flex-end;margin-bottom:14px}
.period-switch{display:inline-flex;align-items:center;border:1px solid var(--border);border-radius:9px;background:var(--surface);padding:3px}
.period-switch a{padding:6px 10px;border-radius:6px;color:var(--text-soft);font-size:.67rem;font-weight:650}
.period-switch a.active{background:#EAF2FF;color:var(--brand-primary)}
.reports-grid{display:grid;grid-template-columns:1.3fr .8fr;gap:18px}
.vertical-chart{height:270px;display:grid;grid-template-columns:repeat(var(--columns),minmax(24px,1fr));gap:min(14px,1.2vw);align-items:end;padding:25px 4px 0;overflow:auto}
.vertical-bar{height:100%;min-width:34px;display:grid;grid-template-rows:18px 1fr 20px;gap:4px;text-align:center;align-items:end}
.bar-value{font-size:.52rem;color:var(--text-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-track{height:100%;min-height:150px;background:linear-gradient(to top,var(--surface-muted) 1px,transparent 1px);background-size:100% 25%;display:flex;align-items:flex-end;justify-content:center;border-bottom:1px solid var(--border)}
.bar-track i{display:block;width:min(28px,70%);background:linear-gradient(180deg,#4B9BFF,var(--brand-primary));border-radius:5px 5px 2px 2px;min-height:4px}
.vertical-bar small{font-size:.56rem;color:var(--text-faint)}
.ranking-list{display:flex;flex-direction:column;gap:13px}
.ranking-row{display:flex;align-items:flex-start;gap:9px}
.rank-number{width:24px;height:24px;border-radius:7px;display:flex;align-items:center;justify-content:center;background:var(--surface-muted);font-size:.62rem;color:var(--text-soft);font-weight:700;flex:0 0 24px}
.rank-meta{display:flex;align-items:center;justify-content:space-between;gap:8px}.rank-meta strong{font-size:.7rem}.rank-meta span{font-size:.63rem;color:var(--text-soft)}
.progress{height:5px;background:var(--surface-muted);border-radius:999px;overflow:hidden;margin:5px 0 3px}.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--brand-primary),var(--brand-accent));border-radius:inherit}
.ranking-row small{font-size:.58rem;color:var(--text-faint)}
.payment-inline{display:flex;align-items:center;gap:5px}.payment-inline input{width:95px}.payment-inline select{width:115px}.payment-inline input,.payment-inline select{min-height:34px;padding:6px 7px;font-size:.68rem}

/* Settings */
.settings-layout{display:grid;grid-template-columns:190px minmax(0,1fr);gap:18px;align-items:start}
.settings-nav{position:sticky;top:18px;background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:7px;display:flex;flex-direction:column;gap:3px}
.settings-nav a{display:flex;align-items:center;gap:9px;padding:9px;border-radius:7px;color:var(--text-soft);font-size:.7rem;font-weight:650}.settings-nav a:hover{background:var(--surface-soft);color:var(--text)}.settings-nav a.active{background:#EAF2FF;color:var(--brand-primary)}.settings-nav .ui-icon{width:15px;height:15px}
.settings-section{scroll-margin-top:20px}
.appearance-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:22px;align-items:start}
.branding-preview{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid var(--border);border-radius:10px;background:var(--surface-soft)}
.branding-preview img{width:62px;height:62px;object-fit:contain;border-radius:11px;background:#fff;padding:5px;border:1px solid #EDF1F5;flex:0 0 62px}
.branding-preview strong{display:block;font-size:.8rem}.branding-preview small{display:block;color:var(--text-soft);font-size:.62rem;margin-top:3px}
.premium-preview{min-height:145px;flex-direction:column;justify-content:center;text-align:center}.premium-preview img{width:76px;height:76px;flex-basis:76px}
.appearance-fields{display:flex;flex-direction:column;gap:13px}
.color-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.settings-savebar{position:sticky;bottom:12px;z-index:20;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border:1px solid var(--border);box-shadow:var(--shadow-sm);border-radius:11px;padding:10px 12px;display:flex;align-items:center;justify-content:space-between;gap:14px;margin:4px 0 18px}
html[data-theme="dark"] .settings-savebar{background:rgba(15,32,54,.94)}
.settings-savebar>div{display:flex;flex-direction:column}.settings-savebar strong{font-size:.72rem}.settings-savebar span{font-size:.62rem;color:var(--text-soft)}
.backup-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.info-box,.restore-box{border:1px solid var(--border);border-radius:10px;padding:14px;background:var(--surface-soft)}
.info-box{display:flex;flex-direction:column;gap:5px}.info-box strong{font-size:.72rem}.info-box code{font-size:.65rem;color:var(--brand-primary);overflow-wrap:anywhere}.info-box small{font-size:.61rem;color:var(--text-soft)}
.restore-box{display:flex;align-items:end;gap:8px}.restore-box label{flex:1}.delete-logo-form{margin-top:12px}

/* Users/profile */
.profile-layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:18px;align-items:start}
.profile-overview{display:flex;align-items:center;gap:15px}.profile-overview h2{font-size:1rem;margin:0 0 6px}
.profile-avatar-large{width:62px;height:62px;border-radius:18px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#EAF2FF,#D8E8FF);color:var(--brand-primary);font-size:1.35rem;font-weight:800;flex:0 0 62px}
.narrow-form{max-width:520px}

/* Auth */
.auth-body{min-height:100vh;background:#F2F6FB;padding:28px;display:flex;align-items:center;justify-content:center}
.auth-shell{width:min(980px,100%);min-height:590px;display:grid;grid-template-columns:42% 58%;background:var(--surface);border:1px solid #E1E8F0;border-radius:18px;overflow:hidden;box-shadow:0 28px 80px rgba(18,48,80,.13)}
.auth-visual{position:relative;overflow:hidden;background:linear-gradient(155deg,#EFF8FC 0%,#D9EBF5 48%,#C7E0EC 100%);padding:40px;display:flex;align-items:flex-end}
.auth-visual::before{content:"";position:absolute;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.9),rgba(255,255,255,0));top:-130px;left:-100px}
.auth-watermark{position:absolute;left:-25px;bottom:40px;color:#315F81;opacity:.16;transform:rotate(-8deg)}
.auth-fish{width:330px;height:220px;stroke-width:.65}
.auth-visual-copy{position:relative;z-index:2;max-width:270px;background:rgba(255,255,255,.72);backdrop-filter:blur(7px);border:1px solid rgba(255,255,255,.8);padding:17px;border-radius:12px;margin-bottom:5px}
.auth-visual-copy .eyebrow{font-size:.6rem;text-transform:uppercase;letter-spacing:.14em;color:#2D6C97;font-weight:800}
.auth-visual-copy h2{font-size:1.25rem;line-height:1.2;margin:6px 0 8px;color:#153A56}.auth-visual-copy p{font-size:.68rem;color:#547087;margin:0}
.auth-bubbles i{position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.9);background:rgba(255,255,255,.35)}.auth-bubbles i:nth-child(1){width:24px;height:24px;top:70px;left:60px}.auth-bubbles i:nth-child(2){width:12px;height:12px;top:115px;left:95px}.auth-bubbles i:nth-child(3){width:18px;height:18px;top:150px;left:35px}.auth-bubbles i:nth-child(4){width:9px;height:9px;top:55px;left:140px}.auth-bubbles i:nth-child(5){width:31px;height:31px;top:190px;left:75px}
.auth-panel{display:flex;align-items:center;justify-content:center;padding:44px 54px}
.auth-card{width:min(370px,100%)}
.auth-brand{text-align:center;margin-bottom:24px}.auth-logo{width:76px;height:76px;object-fit:contain;border-radius:14px;background:#fff;padding:5px;border:1px solid #EEF1F5;box-shadow:0 8px 22px rgba(18,32,51,.07)}
.auth-brand h1{margin:9px 0 3px;font-size:1.15rem;color:var(--text)}.auth-brand p{margin:0;color:var(--text-soft);font-size:.66rem}
.login-heading{text-align:center;margin-bottom:20px}.login-heading h2{margin:0;font-size:1.15rem;letter-spacing:-.02em}.login-heading p{margin:5px 0 0;font-size:.68rem;color:var(--text-soft)}
.login-form{gap:13px}.login-submit{min-height:44px;margin-top:3px}
.install-step-head{text-align:center;margin-bottom:20px}.install-step-head h2{margin:8px 0 5px;font-size:1.15rem}.install-step-head p{margin:0;color:var(--text-soft);font-size:.67rem}.step-badge{display:inline-flex;padding:4px 8px;border-radius:999px;background:#EAF2FF;color:var(--brand-primary);font-size:.58rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em}
.clean-setup{border:1px solid var(--border);border-radius:10px;padding:14px;background:var(--surface-soft);display:flex;flex-direction:column;gap:11px}.clean-setup h3{font-size:.76rem;margin:0}.clean-setup p,.clean-setup small{font-size:.65rem;color:var(--text-soft);margin:0}.install-code{margin:0;padding:10px;background:#0C1D30;color:#CDE3F7;border-radius:8px;font:600 .64rem/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;overflow:auto}.install-form{max-height:66vh;overflow:auto;padding-right:4px}.install-branding{flex-direction:row;justify-content:flex-start;text-align:left;min-height:auto}

/* Legacy card compatibility / errors */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:20px;margin-bottom:18px;box-shadow:var(--shadow-xs)}
.card h2{font-size:.94rem;margin:0 0 16px}.narrow{max-width:620px}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.debug-box{white-space:pre-wrap;background:#0C1D30;padding:12px;border-radius:8px;color:#F5B8B8;overflow:auto}

/* Print */
.print-body{background:white;color:#111;padding:12px;font-family:Arial,sans-serif}.ticket{width:74mm;margin:0 auto;font-family:"Courier New",monospace;font-size:11px}.ticket-logo{display:block;max-width:32mm;max-height:18mm;object-fit:contain;margin:0 auto 5px}.ticket h1{font-size:15px;margin:0 0 4px}.ticket hr{border:0;border-top:1px dashed #111;margin:7px 0}.ticket-center{text-align:center}.ticket-row{display:flex;justify-content:space-between;gap:10px;margin:3px 0}.ticket-item{margin:6px 0}.ticket-item small{display:block}.ticket-row.total{font-size:13px;margin-top:7px}.ticket-due{margin-top:8px;padding:6px;border:1px solid #111;font-weight:bold}.ticket-cancelled{margin-top:8px;border:2px solid #B91C1C;color:#B91C1C;text-align:center;padding:6px;font-weight:bold}.print-actions{display:flex;justify-content:center;gap:8px;margin:20px}
@media print{.no-print{display:none!important}.print-body{padding:0}@page{size:80mm auto;margin:3mm}.ticket{width:74mm}}

/* Responsive */
@media(max-width:1180px){
  :root{--sidebar-w:224px}
  .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dashboard-grid,.reports-grid{grid-template-columns:1fr}
  .checkout-layout{grid-template-columns:minmax(0,1.25fr) 330px}
  .invoice-builder{grid-template-columns:minmax(0,1fr) 280px}
  .product-form{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:960px){
  .sidebar{transform:translateX(-102%);width:min(300px,86vw);transition:transform .2s ease;box-shadow:20px 0 50px rgba(6,20,38,.25)}
  .sidebar.open{transform:translateX(0)}
  .sidebar-close{display:inline-flex}
  .app-main{margin-left:0;width:100%}
  .mobile-topbar{height:62px;position:sticky;top:0;z-index:200;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);display:grid;grid-template-columns:42px 1fr 38px;align-items:center;gap:8px;padding:0 14px}
  html[data-theme="dark"] .mobile-topbar{background:rgba(15,32,54,.94)}
  .menu-toggle{width:38px;height:38px;border:0;background:transparent;display:flex;align-items:center;justify-content:center;border-radius:8px}
  .mobile-brand{display:flex;align-items:center;justify-content:center;gap:7px;overflow:hidden}.mobile-brand img{width:31px;height:31px;object-fit:contain;border-radius:8px;background:#fff;padding:2px}.mobile-brand strong{font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mobile-avatar{width:34px;height:34px;font-size:.7rem;justify-self:end}
  .menu-overlay{position:fixed;inset:0;background:rgba(5,16,29,.5);backdrop-filter:blur(2px);z-index:250}.menu-overlay.open{display:block}body.menu-open{overflow:hidden}
  .content-wrap{padding:22px 18px 42px}
  .page-header{margin-bottom:20px}.page-context{display:none}
  .checkout-layout,.invoice-builder{grid-template-columns:1fr}
  .checkout-panel,.sticky-summary{position:static}
  .invoice-sidebar{order:2}
  .settings-layout{grid-template-columns:1fr}.settings-nav{position:static;display:flex;flex-direction:row;overflow:auto;white-space:nowrap}.settings-nav a{flex:0 0 auto}.settings-nav a span{display:inline}
  .profile-layout{grid-template-columns:1fr}.profile-overview{max-width:none}
  .appearance-layout{grid-template-columns:1fr}.premium-preview{min-height:auto;flex-direction:row;justify-content:flex-start;text-align:left}
  .auth-shell{grid-template-columns:36% 64%;min-height:560px}.auth-panel{padding:38px}.auth-visual{padding:28px}.auth-visual-copy{padding:14px}.auth-visual-copy h2{font-size:1.05rem}
}

@media(max-width:760px){
  .content-wrap{padding:18px 13px 36px}
  .page-header h1{font-size:1.35rem}.page-header p{font-size:.72rem}
  .page-actions-row{align-items:stretch;flex-direction:column}.page-actions-row>.btn{width:100%}
  .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.kpi-card{min-height:108px;padding:14px}.kpi-card>strong{font-size:1.05rem}.kpi-head{font-size:.65rem}
  .panel{padding:14px;margin-bottom:13px}.panel-head{align-items:flex-start;margin-bottom:14px}.panel-head>.btn{flex:0 0 auto}
  .form-grid,.form-grid.two-columns,.form-grid.three-columns,.two-columns,.three-columns,.product-form{grid-template-columns:1fr}.span-full{grid-column:auto}
  .two-field{grid-template-columns:1fr}
  .stock-toolbar>.search-box{width:100%}.toolbar-actions{width:100%}.toolbar-actions>.btn{flex:1}
  .filter-header{align-items:stretch;flex-direction:column}.professional-filters{display:grid;grid-template-columns:1fr}.professional-filters .search-box,.professional-filters select,.professional-filters .btn{width:100%;min-width:0}
  .cashier-summary-strip{display:grid;grid-template-columns:1fr 1fr;gap:8px}.cashier-summary-strip>div{border:1px solid var(--border);background:var(--surface);border-radius:8px;padding:9px;display:flex;flex-direction:column;gap:2px}.cashier-summary-strip strong{font-size:.85rem}
  .product-pick{grid-template-columns:42px minmax(0,1fr) 28px}.product-pick-info{grid-column:2;text-align:left;display:flex;gap:7px;align-items:baseline}.product-add{grid-column:3;grid-row:1/3}.product-thumb{width:40px;height:40px;grid-row:1/3}
  .invoice-lines-head{display:none}.invoice-line{grid-template-columns:1fr 1fr;padding:10px}.invoice-line .product-label{grid-column:1/-1}.invoice-line .line-total{grid-column:1}.invoice-line>.icon-btn{grid-column:2;justify-self:end}.mobile-field-label{display:block;color:var(--text-faint);font-size:.58rem;margin-bottom:4px;text-transform:uppercase;letter-spacing:.04em}.invoice-line label{gap:4px}
  .settings-savebar{bottom:6px;align-items:stretch;flex-direction:column}.settings-savebar .btn{width:100%}
  .backup-grid{grid-template-columns:1fr}.restore-box{align-items:stretch;flex-direction:column}
  .reports-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.vertical-chart{height:240px}
  .payment-inline{display:grid;grid-template-columns:1fr 1fr}.payment-inline input,.payment-inline select{width:100%}.payment-inline .btn{grid-column:1/-1;width:100%}
  .table-wrap{border:0;overflow:visible;background:transparent}.table-wrap table{display:block}.table-wrap thead{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.table-wrap tbody{display:grid;gap:9px}.table-wrap tbody tr{display:grid;border:1px solid var(--border);border-radius:10px;background:var(--surface);padding:5px 11px;box-shadow:var(--shadow-xs)}.table-wrap tbody td{display:grid;grid-template-columns:minmax(100px,35%) minmax(0,1fr);gap:10px;padding:8px 0;border-bottom:1px solid var(--border);align-items:start;overflow-wrap:anywhere}.table-wrap tbody td:last-child{border-bottom:0}.table-wrap tbody td::before{content:attr(data-label);font-size:.58rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-faint);font-weight:700}.table-wrap tbody td.cell-actions{display:flex;justify-content:flex-end;width:100%;text-align:right}.table-wrap tbody td.cell-actions::before{content:""}.row-menu-popover{position:fixed;left:14px;right:14px;top:auto;bottom:14px;width:auto;max-width:none;max-height:70vh;overflow:auto}.compact-menu .row-menu-popover{width:auto}.mini-form{grid-template-columns:1fr}
  .auth-body{padding:0;background:var(--surface)}.auth-shell{display:block;width:100%;min-height:100vh;border:0;border-radius:0;box-shadow:none}.auth-visual{display:none}.auth-panel{min-height:100vh;padding:30px 20px}.auth-card{width:min(390px,100%)}.install-form{max-height:none;overflow:visible}
}

@media(max-width:480px){
  .kpi-grid,.reports-kpis{grid-template-columns:1fr}.kpi-card{min-height:96px}
  .panel-head{flex-direction:column}.panel-head>.btn,.panel-head>a.btn{width:100%}.panel-total{align-self:flex-start}
  .toolbar-actions{display:grid;grid-template-columns:1fr 1fr}
  .alert-summary{grid-template-columns:1fr}
  .clean-list-row,.operation-row{align-items:flex-start}.operation-amount{max-width:90px}
  .cart-item-grid{grid-template-columns:1fr 1fr}.cart-item-grid label:last-child{grid-column:1/-1}
  .checkout-totals .discount-line{grid-template-columns:1fr 82px}
  .invoice-line{grid-template-columns:1fr}.invoice-line .product-label,.invoice-line .line-total,.invoice-line>.icon-btn{grid-column:1}.invoice-line>.icon-btn{justify-self:end}
  .status-tabs span{padding:6px 9px}
  .settings-nav a span{display:none}.settings-nav a{padding:9px 11px}.settings-nav .ui-icon{width:17px;height:17px}
  .color-grid{grid-template-columns:1fr}
  .table-wrap tbody td{grid-template-columns:1fr;gap:3px}.table-wrap tbody td.cell-actions{display:flex}.product-cell{min-width:0}
  .profile-overview{flex-direction:column;text-align:center}.profile-overview .role-pill{margin:auto}
}


/* V7 — Maquette Kovaar finalisée */
.desktop-topbar{height:66px;position:sticky;top:0;z-index:180;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 clamp(20px,2.7vw,42px);background:color-mix(in srgb,var(--surface) 94%,transparent);border-bottom:1px solid var(--border);backdrop-filter:blur(14px)}
.global-search{position:relative;width:min(440px,44vw);height:38px;display:flex;align-items:center;gap:8px;padding:0 11px;border:1px solid var(--border);border-radius:9px;background:var(--surface-soft);color:var(--text-faint)}
.global-search>.ui-icon{width:15px;height:15px}.global-search>input{height:36px;min-height:36px;border:0;box-shadow:none;background:transparent;padding:0;font-size:.72rem}.global-search>input:focus{border:0;box-shadow:none}.global-search:focus-within{border-color:#8AB5F2;box-shadow:0 0 0 3px rgba(22,104,232,.08);background:var(--surface)}
.global-search-results{position:absolute;top:44px;left:0;width:100%;padding:7px;border:1px solid var(--border);border-radius:10px;background:var(--surface);box-shadow:var(--shadow-md);z-index:500}.global-search-results a{display:flex;align-items:center;gap:9px;padding:9px;border-radius:7px;font-size:.72rem;color:var(--text-soft)}.global-search-results a:hover{background:var(--surface-soft);color:var(--text)}.global-search-results a .ui-icon{width:15px;height:15px;color:var(--brand-primary)}
.desktop-utilities{display:flex;align-items:center;gap:14px}.utility-date{display:flex;align-items:center;gap:6px;color:var(--text-soft);font-size:.68rem}.utility-date .ui-icon{width:14px;height:14px}.utility-profile{display:flex;align-items:center;gap:8px;padding:5px 7px 5px 5px;border:1px solid transparent;border-radius:9px;font-size:.7rem;font-weight:650}.utility-profile:hover{background:var(--surface-soft);border-color:var(--border)}.utility-profile>.ui-icon{width:13px;height:13px;color:var(--text-faint)}
.content-wrap{padding-top:26px}.page-header{margin-bottom:20px}.page-header h1{font-size:1.48rem}.page-header p{font-size:.72rem}
.analytics-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,.65fr);gap:18px;align-items:stretch;margin-bottom:18px}.analytics-grid>.panel{margin-bottom:0}.chart-panel{min-height:320px}.line-chart-wrap{width:100%;overflow:hidden}.line-chart{display:block;width:100%;height:222px;overflow:visible}.chart-gridline{fill:none;stroke:var(--border);stroke-width:1;stroke-dasharray:3 5}.chart-area{fill:url(#kovaarArea)}.report-area{fill:url(#reportArea)}.chart-line{fill:none;stroke:var(--brand-primary);stroke-width:3;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}.chart-point{fill:var(--surface);stroke:var(--brand-primary);stroke-width:2;vector-effect:non-scaling-stroke}.chart-labels{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;padding:0 10px;color:var(--text-faint);font-size:.57rem;text-align:center}.reports-main-grid .chart-labels{grid-template-columns:repeat(auto-fit,minmax(36px,1fr))}
.donut-layout{height:245px;display:grid;grid-template-columns:minmax(150px,1fr) minmax(120px,.8fr);align-items:center;gap:20px}.donut-chart{width:min(172px,100%);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;margin:auto;position:relative}.donut-chart::after{content:"";position:absolute;width:64%;height:64%;border-radius:50%;background:var(--surface);box-shadow:inset 0 0 0 1px var(--border)}.donut-chart>div{position:relative;z-index:1;text-align:center;display:flex;flex-direction:column;max-width:84px}.donut-chart small{font-size:.58rem;color:var(--text-faint)}.donut-chart strong{font-size:.72rem;margin-top:3px;overflow-wrap:anywhere}.donut-legend{display:flex;flex-direction:column;gap:11px}.donut-legend>div{display:grid;grid-template-columns:8px minmax(0,1fr) auto;align-items:center;gap:7px;font-size:.64rem;color:var(--text-soft)}.donut-legend i{width:8px;height:8px;border-radius:50%}.donut-legend strong{font-size:.63rem;color:var(--text)}
.dashboard-three-grid{display:grid;grid-template-columns:1.05fr 1fr .85fr;gap:18px;align-items:start}.dashboard-three-grid>.panel{margin-bottom:0}.receivable-list{display:flex;flex-direction:column}.receivable-row{display:flex;align-items:center;gap:10px;padding:12px 0;border-top:1px solid var(--border)}.receivable-row:first-child{border-top:0}.receivable-row strong{font-size:.72rem}.receivable-row small{display:block;color:var(--text-faint);font-size:.61rem;margin-top:2px}
.reports-bottom-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(260px,.55fr);gap:18px}.reports-bottom-grid>.panel{margin-bottom:0}.receivable-metrics{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:14px}.receivable-metrics>div{padding:15px;border:1px solid var(--border);border-radius:9px;background:var(--surface-soft);display:flex;flex-direction:column;gap:3px}.receivable-metrics strong{font-size:1.18rem}.receivable-metrics span{font-size:.62rem;color:var(--text-soft)}
.catalog-tools{display:flex;flex-direction:column;gap:10px}.catalog-tabs{display:flex;align-items:center;gap:5px;overflow:auto;scrollbar-width:none;padding-bottom:1px}.catalog-tabs button,.status-tabs button{appearance:none;border:1px solid transparent;background:transparent;color:var(--text-soft);font:650 .66rem/1 inherit;padding:7px 10px;border-radius:8px;white-space:nowrap;cursor:pointer}.catalog-tabs button:hover,.status-tabs button:hover{background:var(--surface-soft);color:var(--text)}.catalog-tabs button.active,.status-tabs button.active{background:#EAF2FF;color:var(--brand-primary);border-color:#D7E6FF}.status-tabs button{display:inline-flex;align-items:center;gap:7px}.status-tabs button b{font-size:.6rem;padding:1px 5px;border-radius:999px;background:var(--surface-muted)}
.auth-shell{max-width:1050px}.auth-visual{background:linear-gradient(160deg,#EAF5FF 0%,#F5FBFF 48%,#E9FAF7 100%);overflow:hidden}.auth-watermark{position:absolute;inset:0;display:grid;place-items:center;opacity:.16;color:var(--brand-primary);transform:scale(1.7)}.auth-visual::after{content:"";position:absolute;left:-20%;bottom:-20%;width:430px;height:430px;border-radius:50%;background:radial-gradient(circle,rgba(24,207,195,.28),rgba(22,104,232,.06) 50%,transparent 72%)}.auth-visual-copy{position:relative;z-index:2}.auth-panel{background:var(--surface)}
@media(max-width:1180px){.analytics-grid{grid-template-columns:1.3fr .7fr}.dashboard-three-grid{grid-template-columns:1fr 1fr}.dashboard-three-grid>.panel:last-child{grid-column:1/-1}.reports-bottom-grid{grid-template-columns:1fr 300px}}
@media(max-width:960px){.desktop-topbar{display:none}.analytics-grid,.reports-bottom-grid{grid-template-columns:1fr}.dashboard-three-grid{grid-template-columns:1fr}.dashboard-three-grid>.panel:last-child{grid-column:auto}.donut-layout{height:auto;min-height:220px}.content-wrap{padding-top:22px}}
@media(max-width:760px){.chart-panel{min-height:0}.line-chart{height:190px}.donut-layout{grid-template-columns:1fr 1fr}.donut-chart{width:140px}.catalog-tabs button,.status-tabs button{min-height:34px}.receivable-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.donut-layout{grid-template-columns:1fr}.donut-legend{width:min(260px,100%);margin:auto}.chart-labels{font-size:.52rem}.receivable-kpis{grid-template-columns:1fr}}


/* V8 — Accès distant mobile / responsive renforcé */
:root{--mobile-nav-h:68px}
.mobile-bottom-nav,.mobile-cart-shortcut{display:none}
@media(max-width:960px){
  .mobile-topbar{height:calc(62px + env(safe-area-inset-top));padding-top:env(safe-area-inset-top);padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}
  .sidebar{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
  .content-wrap{padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right))}
  .row-menu-popover{bottom:max(14px,env(safe-area-inset-bottom))}
}
@media(max-width:760px){
  html{scroll-padding-top:76px;scroll-padding-bottom:calc(var(--mobile-nav-h) + 18px)}
  body{padding-bottom:calc(var(--mobile-nav-h) + env(safe-area-inset-bottom));overscroll-behavior-y:auto}
  button,a,input,select,textarea{touch-action:manipulation}
  input,select,textarea{font-size:16px}
  .btn{min-height:44px;font-size:.78rem}.icon-btn{width:44px;height:44px}.text-button{min-height:42px;padding:8px 10px}
  .content-wrap{padding:16px max(12px,env(safe-area-inset-right)) 32px max(12px,env(safe-area-inset-left))}
  .page-header{gap:10px;margin-bottom:16px}.page-header h1{font-size:1.25rem}.page-header p{font-size:.7rem;line-height:1.45}
  .panel{border-radius:12px;padding:13px}.kpi-card{border-radius:12px}
  .status-tabs,.catalog-tabs,.settings-nav{scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;padding-bottom:6px}.status-tabs>* ,.catalog-tabs>*,.settings-nav>*{scroll-snap-align:start}
  .product-catalog{max-height:none;overflow:visible;padding-right:0}
  .product-pick{min-height:76px;padding:10px;grid-template-columns:44px minmax(0,1fr) 36px}.product-add{width:34px;height:34px}.product-pick-info{font-size:.7rem}
  .checkout-layout{display:block}.product-catalog-panel{margin-bottom:12px}.checkout-panel{scroll-margin-top:76px;margin-bottom:12px}
  .mobile-cart-shortcut{position:sticky;bottom:calc(var(--mobile-nav-h) + env(safe-area-inset-bottom) + 8px);z-index:120;width:100%;min-height:52px;border:1px solid rgba(22,104,232,.22);border-radius:12px;background:color-mix(in srgb,var(--surface) 94%,transparent);box-shadow:0 12px 30px rgba(18,32,51,.14);backdrop-filter:blur(14px);color:var(--text);padding:8px 12px;margin:0 0 12px;align-items:center;justify-content:space-between;gap:12px;cursor:pointer}
  .mobile-cart-shortcut.has-items{display:flex}.mobile-cart-shortcut>span{display:flex;align-items:center;gap:7px;font-size:.73rem;font-weight:700}.mobile-cart-shortcut .ui-icon{color:var(--brand-primary)}.mobile-cart-shortcut b{display:grid;place-items:center;min-width:22px;height:22px;padding:0 5px;border-radius:999px;background:#EAF2FF;color:var(--brand-primary);font-size:.65rem}.mobile-cart-shortcut>strong{font-size:.82rem;color:var(--brand-primary)}
  .cart-lines{max-height:none;overflow:visible;padding-right:0}.cart-item{padding:11px}.cart-item-grid{gap:9px}.cart-item-grid input{min-height:44px;font-size:16px}
  .checkout-customer input,.checkout-customer select,.payment-box input,.payment-box select,.checkout-totals input{min-height:46px}
  .checkout-submit{min-height:50px;font-size:.82rem}
  .invoice-line input,.invoice-line select{min-height:46px;font-size:16px}.invoice-sidebar .btn{min-height:48px}
  .table-wrap tbody tr{padding:7px 12px}.table-wrap tbody td{padding:10px 0}.table-wrap tbody td::before{font-size:.62rem}
  .mobile-bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:230;min-height:calc(var(--mobile-nav-h) + env(safe-area-inset-bottom));padding:6px max(6px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(6px,env(safe-area-inset-left));display:flex;align-items:stretch;justify-content:space-around;gap:2px;background:color-mix(in srgb,var(--surface) 96%,transparent);border-top:1px solid var(--border);box-shadow:0 -10px 28px rgba(18,32,51,.08);backdrop-filter:blur(16px)}
  .mobile-nav-item{appearance:none;border:0;background:transparent;color:var(--text-faint);min-width:0;flex:1;min-height:56px;padding:6px 3px;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font:650 .58rem/1.15 inherit;cursor:pointer}.mobile-nav-item .ui-icon{width:20px;height:20px}.mobile-nav-item.active{color:var(--brand-primary);background:#EEF5FF}.mobile-nav-item:active{transform:scale(.98)}
  body.menu-open .mobile-bottom-nav{visibility:hidden}
  .settings-savebar{bottom:calc(var(--mobile-nav-h) + env(safe-area-inset-bottom) + 6px)}
}
@media(max-width:520px){
  .mobile-topbar{grid-template-columns:40px minmax(0,1fr) 38px;padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right))}
  .mobile-brand strong{max-width:145px}.mobile-brand img{width:30px;height:30px}
  .kpi-grid,.reports-kpis{grid-template-columns:1fr 1fr}.kpi-card{min-height:102px;padding:13px}.kpi-card>strong{font-size:1rem}
  .cashier-summary-strip{grid-template-columns:1fr 1fr}.cashier-summary-strip>div{min-height:64px}
  .toolbar-actions{grid-template-columns:1fr}.toolbar-actions>.btn{width:100%}
  .form-actions{display:grid;grid-template-columns:1fr}.form-actions>.btn,.form-actions>a.btn{width:100%}
  .donut-layout{grid-template-columns:1fr}.donut-legend{width:100%}
  .settings-nav{margin-left:-2px;margin-right:-2px}
}
@media(max-width:380px){
  :root{--mobile-nav-h:64px}
  .mobile-nav-item{font-size:.54rem}.mobile-nav-item .ui-icon{width:18px;height:18px}
  .kpi-grid,.reports-kpis{grid-template-columns:1fr}
  .cashier-summary-strip{grid-template-columns:1fr}
  .mobile-brand strong{max-width:110px}
  .table-wrap tbody td{grid-template-columns:1fr;gap:4px}
}
@media(hover:none) and (pointer:coarse){
  .nav-item,.btn,.menu-action,.settings-nav a,.status-tabs button,.catalog-tabs button{min-height:44px}
  .product-pick:hover,.nav-item:hover,.btn:hover{box-shadow:none}
}

/* V9 — Audit final des boutons / anti-débordement */
.btn,
.icon-btn,
.menu-toggle,
.menu-action,
.sidebar-close,
.sidebar-logout,
.mobile-nav-item,
.mobile-cart-shortcut,
.product-pick,
.text-button{
  box-sizing:border-box;
  min-width:0;
  max-width:100%;
}
.btn{
  overflow-wrap:anywhere;
  word-break:normal;
}
.btn .ui-icon,
.menu-action .ui-icon,
.sidebar-logout .ui-icon,
.mobile-nav-item .ui-icon{
  flex:0 0 auto;
}
.panel-head,
.toolbar-actions,
.form-actions,
.page-actions-row,
.settings-savebar,
.restore-box{
  min-width:0;
}
.panel-head>.btn,
.panel-head>a.btn,
.toolbar-actions>.btn,
.form-actions>.btn,
.form-actions>a.btn,
.settings-savebar>.btn,
.restore-box>.btn{
  min-width:0;
  max-width:100%;
}
.catalog-tabs button,
.status-tabs button{
  font-family:inherit;
  font-size:.66rem;
  font-weight:650;
  line-height:1;
}
.mobile-nav-item{
  font-family:inherit;
  font-size:.58rem;
  font-weight:650;
  line-height:1.15;
}
.mobile-nav-item span{
  display:block;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.password-toggle{
  top:50%;
  transform:translateY(-50%);
}

@media(max-width:960px){
  .menu-toggle,
  .sidebar-close{
    width:42px;
    height:42px;
    padding:0;
    align-items:center;
    justify-content:center;
  }
  .sidebar-logout{min-height:44px}
  .mobile-avatar{width:40px;height:40px}
}

@media(max-width:760px){
  .mobile-topbar{grid-template-columns:44px minmax(0,1fr) 44px}
  .menu-toggle,
  .sidebar-close,
  .mobile-avatar{
    width:44px;
    height:44px;
  }
  .text-button{min-height:44px}
  .auth-panel input,
  .auth-panel select{min-height:48px}
  .password-toggle{width:44px;height:44px}
  .btn-small{min-height:44px}
  .row-menu summary.icon-btn{width:44px;height:44px}
}

@media(max-width:520px){
  .panel-head>.btn,
  .panel-head>a.btn,
  .page-actions-row>.btn,
  .page-actions-row>a.btn,
  .toolbar-actions>.btn,
  .form-actions>.btn,
  .form-actions>a.btn{
    width:100%;
  }
}

/* V10 — comptes e-mail et messagerie */
.auth-text-link{display:block;text-align:center;color:var(--brand-primary);font-weight:700;font-size:.88rem;margin-top:2px}
.auth-text-link:hover{text-decoration:underline}.email-cell,.profile-email{display:flex;align-items:center;gap:7px;min-width:0;color:var(--muted)}.email-cell .ui-icon,.profile-email .ui-icon{width:16px;height:16px;flex:0 0 auto}.email-cell{overflow-wrap:anywhere}.profile-email{margin:7px 0 10px}.email-stats .stat strong{font-size:1.12rem;line-height:1.35;overflow-wrap:anywhere}.btn[disabled]{opacity:.5;cursor:not-allowed;pointer-events:none}.alert.warning{background:#fff7ed;border-color:#fed7aa;color:#9a3412}
@media(max-width:900px){.email-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:520px){.email-stats{grid-template-columns:1fr}.user-popover{max-width:min(320px,calc(100vw - 24px))}}

/* V11 — administration système e-mail */
.check-line{display:flex!important;align-items:center;gap:10px;min-height:44px;padding:10px 0}.check-line input[type="checkbox"]{width:18px;height:18px;min-width:18px;margin:0}.check-line span{font-weight:600;color:var(--text)}

/* V11.1 — Profil utilisateur complet et anti-débordement des contacts */
.profile-overview{align-items:flex-start;min-width:0}
.profile-overview-content{flex:1;min-width:0;max-width:100%}
.profile-overview-content h2{overflow-wrap:anywhere}
.profile-username{margin:0 0 10px;color:var(--text-faint);font-size:.66rem;overflow-wrap:anywhere}
.profile-contact-line,.email-cell,.phone-cell{display:grid;grid-template-columns:16px minmax(0,1fr);align-items:start;gap:7px;min-width:0;max-width:100%;color:var(--text-soft)}
.profile-contact-line{margin:7px 0;font-size:.69rem;line-height:1.45}
.profile-contact-line .ui-icon,.email-cell .ui-icon,.phone-cell .ui-icon{width:16px;height:16px;min-width:16px;margin-top:1px}
.profile-contact-line span,.email-cell span,.phone-cell span{min-width:0;max-width:100%;overflow-wrap:anywhere;word-break:break-word;white-space:normal}
.profile-email{display:grid;margin:7px 0}
.profile-main-stack{display:flex;flex-direction:column;gap:18px;min-width:0}
.profile-main-stack>.panel{margin-bottom:0}
.profile-information .stack-form{max-width:760px}
.user-identity-cell{min-width:0;max-width:100%}
.user-identity-text{display:flex;flex-direction:column;min-width:0;max-width:100%}
.user-identity-text strong,.user-identity-text small{min-width:0;max-width:100%;overflow-wrap:anywhere}
.user-identity-text small{color:var(--text-faint);font-size:.62rem;margin-top:2px}
.user-contact-cell{display:flex;flex-direction:column;gap:6px;min-width:0;max-width:330px}
.email-cell,.phone-cell{font-size:.66rem;line-height:1.35}
.users-table td{min-width:0}
.user-profile-popover{width:min(430px,calc(100vw - 32px));max-width:min(430px,calc(100vw - 32px))}
.popover-title{display:flex;flex-direction:column;gap:2px;padding:3px 2px 8px;min-width:0}
.popover-title strong,.popover-title small{overflow-wrap:anywhere}.popover-title small{color:var(--text-faint)}
.compact-identity-form{gap:9px}.compact-identity-form label{font-size:.62rem}.compact-identity-form input{min-width:0;width:100%}

@media(max-width:960px){
  .profile-overview{max-width:none}
  .user-contact-cell{max-width:none}
}
@media(max-width:680px){
  .profile-overview{flex-direction:row;text-align:left}
  .profile-overview .role-pill{margin:0}
  .profile-main-stack{gap:14px}
}
@media(max-width:440px){
  .profile-overview{flex-direction:column;text-align:center;align-items:center}
  .profile-overview-content{width:100%}
  .profile-contact-line{width:100%;text-align:left}
  .profile-overview .role-pill{margin:auto}
  .compact-identity-form .two-columns{grid-template-columns:1fr}
}
.utility-profile>span:not(.avatar){display:block;max-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:1180px){.utility-profile>span:not(.avatar){max-width:120px}}