:root{--primary:#2563eb;--primary-dark:#1d4ed8;--accent:#14b8a6;--surface:#ffffff;--body-bg:#f5f7fb;--text:#172033;--muted:#6b7280;--border:#e4e7ec;--shadow:0 4px 18px rgba(31,35,41,.06);--radius:14px;--sidebar:var(--surface);--sidebar-text:#454851;--success:#079669;--warning:#d97706;--danger:#dc3f4f;--border-strong:#d6dae2;--info:#2563eb;--shadow-sm:0 2px 8px rgba(15,23,42,.04);--shadow-md:0 10px 30px rgba(15,23,42,.07);--shadow-lg:0 24px 60px rgba(15,23,42,.14);--surface-strong:var(--surface);--surface-soft:var(--body-bg);--line:var(--border);--line-soft:var(--border);--text-strong:var(--text);--text-muted:var(--muted);--surface-2:var(--surface);--text-soft:var(--muted);--on-primary:#ffffff;--primary-soft:color-mix(in srgb,var(--primary) 9%,var(--surface));--primary-soft-2:color-mix(in srgb,var(--primary) 5%,var(--surface));--surface-tint:color-mix(in srgb,var(--primary) 3%,var(--surface));--surface-hover:color-mix(in srgb,var(--primary) 5%,var(--surface));--primary-border:color-mix(in srgb,var(--primary) 28%,var(--border));--primary-border-strong:color-mix(in srgb,var(--primary) 42%,var(--border));--primary-ring:color-mix(in srgb,var(--primary) 10%,transparent);--primary-shadow:color-mix(in srgb,var(--primary) 16%,transparent)} *{box-sizing:border-box} .app-shell{min-height:100vh} .sidebar-close{display:none;border:0;background:transparent;color:var(--muted);font-size:20px} .nav-item:hover{background:var(--surface-hover);color:var(--primary)} .nav-item:hover .nav-icon,.nav-item.active .nav-icon{color:var(--primary)} .nav-toggle .chev{margin-left:auto;color:var(--muted);font-size:9px;transition:.18s} .nav-group.open>.nav-toggle{color:var(--text)} .nav-group.open>.nav-toggle .chev{transform:rotate(180deg)} .nav-group.open .nav-sub{display:grid} .nav-sub a.active i{color:var(--primary)} .sidebar-footer a{margin-left:auto;color:var(--muted)} .status-dot{width:7px;height:7px;border-radius:50%;background:var(--success)} .sidebar-collapsed .sidebar{width:72px} .sidebar-collapsed .app-main{margin-left:72px} .sidebar-collapsed .brand span:last-child,.sidebar-collapsed .nav-item>span:not(.nav-icon),.sidebar-collapsed .nav-toggle .chev,.sidebar-collapsed .nav-sub,.sidebar-collapsed .sidebar-footer span:not(.status-dot){display:none} .sidebar-collapsed .nav-item{justify-content:center;padding:0} .sidebar-collapsed .brand{justify-content:center} .sidebar-collapsed .brand-row{padding:0} .sidebar-collapsed .sidebar-footer{justify-content:center} .header-left,.header-tools{display:flex;align-items:center;gap:10px} .sidebar-collapse,.mobile-menu{width:34px;height:34px;border:0;background:transparent;color:var(--muted);display:grid;place-items:center;border-radius:8px;cursor:pointer} .sidebar-collapse:hover,.mobile-menu:hover{background:var(--surface-hover);color:var(--primary)} .mobile-menu{display:none} .page-heading .eyebrow{display:none} .header-search kbd{margin-left:auto;border:1px solid var(--border);background:var(--on-primary);border-radius:5px;padding:2px 5px;font-size:8px;color:var(--muted)} .icon-btn:hover{border-color:var(--primary-soft);color:var(--primary)} .profile{display:flex;align-items:center;gap:8px;padding-left:5px} .profile a{margin-left:2px;color:var(--muted);text-decoration:none;font-size:9px} .flash.error,.notice.error{background:color-mix(in srgb,var(--danger) 6%,var(--surface));color:var(--danger);border-color:color-mix(in srgb,var(--danger) 25%,var(--border))} .grid-two{display:grid;grid-template-columns:1.35fr 1fr;gap:14px} th:first-child{border-radius:8px 0 0 8px} th:last-child{border-radius:0 8px 8px 0} .filters>button{height:38px} input::placeholder,textarea::placeholder{color:var(--muted)} textarea{min-height:92px;resize:vertical} .primary-btn,.checkout{border:1px solid var(--primary);background:var(--primary);color:var(--on-primary)} .primary-btn:hover,.checkout:hover{background:var(--primary-dark)} .form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px} .form-grid label{display:grid;gap:6px;font-size:10px;font-weight:700} .form-grid .full{grid-column:1/-1} .form-actions{display:flex;justify-content:flex-end;gap:8px}.form-actions.full{grid-column:1/-1;justify-content:center} .compact-field{display:grid;gap:5px;margin:7px 0;font-size:10px;font-weight:700;color:var(--muted)} .search-row{display:flex;gap:8px;margin-bottom:11px} .cart-item small{display:block;color:var(--muted);font-size:9px} .qty{display:flex;align-items:center;gap:5px} .modal.show{display:flex} .settings-panel{margin-bottom:14px} .color-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px} .color-field{display:grid;gap:6px;font-size:10px;font-weight:700} .color-field>div{display:flex;gap:8px} .color-field input[type=color]{width:45px;height:38px;padding:3px} .hex{font-family:monospace} .theme-preview{color:var(--on-primary);border-radius:12px;padding:16px;margin-top:14px} .template-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .template-option input{position:absolute;opacity:0} .template-option>div{border:1px solid var(--border);border-radius:12px;padding:10px;cursor:pointer;background:var(--on-primary)} .template-option input:checked+div{border-color:var(--primary-border);box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 10%,transparent)} .template-preview{height:170px;background:var(--surface-soft);border-radius:8px;padding:10px;display:flex;flex-direction:column;gap:6px} .template-preview .pv-head{height:25px;background:linear-gradient(90deg,var(--primary) 30%,var(--border-strong) 30%);border-radius:4px} .template-preview .pv-line{height:5px;background:var(--border-strong);border-radius:3px} .template-preview .pv-line.short{width:55%} .template-preview .pv-table{height:58px;background:repeating-linear-gradient(var(--border) 0 8px,var(--on-primary) 8px 16px);border-radius:4px} .template-preview .pv-total{margin-left:auto;width:45%;height:25px;background:var(--border);border-radius:4px} .template-option strong{display:block;margin-top:8px;font-size:11px} .template-option small{display:block;color:var(--muted);font-size:9px;margin-top:2px} .bill-to div{display:grid;gap:3px} .invoice-totals{width:250px} .invoice-totals div{display:flex;justify-content:space-between;padding:5px 0} .template-classic .invoice-head{border-bottom:1px solid var(--text)} .template-minimal{box-shadow:none} .template-minimal .invoice-head{border-bottom:0} .template-retail .invoice-logo{border-radius:50%} .template-professional .invoice-head{background:var(--surface-soft);padding:16px;border:0} .template-thermal80{width:80mm;max-width:80mm;padding:8mm;box-shadow:none;font-size:9px} .template-thermal80 .invoice-head{display:block;text-align:center;border-bottom:1px dashed var(--text);padding-bottom:7px} .template-thermal80 .invoice-logo{margin:auto;width:33px;height:33px} .template-thermal80 .invoice-meta{text-align:center;margin-top:6px} .template-thermal80 .bill-to{padding:7px 0;border-bottom:1px dashed var(--muted)} .template-thermal80 .invoice-table{table-layout:fixed;width:100%;font-size:8px} .template-thermal80 .invoice-table th,.template-thermal80 .invoice-table td{padding:4px 2px;white-space:normal;overflow-wrap:anywhere} .template-thermal80 .invoice-table th:nth-child(1){width:42%} .template-thermal80 .invoice-table th:nth-child(2){width:12%} .template-thermal80 .invoice-table th:nth-child(3){width:18%} .template-thermal80 .invoice-table th:nth-child(4){width:10%} .template-thermal80 .invoice-table th:nth-child(5){width:18%} .template-thermal80 .invoice-bottom{display:block;margin-top:9px} .template-thermal80 .terms{max-width:100%;margin-bottom:7px} .template-thermal80 .invoice-totals{width:100%} .barcode-controls .full{grid-column:1/-1} .purchase-success{border-color:var(--primary-border)} .purchase-table th,.purchase-table td{vertical-align:middle} .product-avatar i{font-size:11px} .purchase-summary-row.total{font-size:15px;font-weight:800;padding-top:11px} .purchase-fields{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .purchase-fields label{display:grid;gap:5px;font-size:10px;font-weight:700} .smart-select-button:focus,.smart-select.open .smart-select-button{border-color:var(--primary-border);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 8%,transparent)} .smart-select-button .placeholder{color:var(--muted)} .toast{position:fixed;right:20px;bottom:20px;background:var(--text);color:var(--on-primary);padding:11px 14px;border-radius:9px;box-shadow:var(--shadow-lg);z-index:200;font-size:11px} .dashboard-hero:before{content:"";position:absolute;width:360px;height:360px;right:-110px;top:-180px;border-radius:50%;background:color-mix(in srgb,var(--on-primary) 9%,transparent)} .dashboard-hero:after{content:"";position:absolute;width:220px;height:220px;right:170px;bottom:-170px;border-radius:50%;background:color-mix(in srgb,var(--on-primary) 6%,transparent)} .dashboard-hero>div{position:relative;z-index:1} .dashboard-hero .eyebrow{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:color-mix(in srgb,var(--on-primary) 11%,transparent);border:1px solid color-mix(in srgb,var(--on-primary) 14%,transparent);color:var(--primary-soft);font-size:9px;font-weight:800;letter-spacing:1.2px} .hero-actions{display:flex;gap:9px;position:relative;z-index:2} .hero-actions a{min-width:112px} .hero-actions .secondary-btn{background:color-mix(in srgb,var(--on-primary) 10%,transparent);border-color:color-mix(in srgb,var(--on-primary) 20%,transparent);color:var(--on-primary);backdrop-filter:blur(8px)} .hero-actions .secondary-btn:hover{background:color-mix(in srgb,var(--on-primary) 17%,transparent);border-color:color-mix(in srgb,var(--on-primary) 35%,transparent);color:var(--on-primary)} .dashboard-hero .primary-btn{background:var(--on-primary);border-color:var(--on-primary);color:var(--primary-dark)} .dashboard-hero .primary-btn:hover{background:var(--surface-hover);border-color:var(--surface-hover);color:var(--primary-dark)} .stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--primary-border)} .stat-card .stat-icon{position:absolute;right:15px;top:15px;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary);font-size:15px} .stat-card .stat-trend{display:inline-flex;align-items:center;gap:5px;margin-top:8px;font-size:9px;font-weight:700;color:var(--success)} .stat-card .stat-trend i{font-size:8px} .stat-card .metric-danger{color:var(--danger)} .stat-card .metric-warning{color:var(--warning)} .dashboard-section-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(310px,.75fr);gap:14px} .dashboard-chart-card{min-height:355px} .dashboard-chart{display:grid;gap:11px;margin-top:17px} .dashboard-chart-row{display:grid;grid-template-columns:52px minmax(0,1fr) 86px;align-items:center;gap:10px;font-size:10px;color:var(--muted)} .dashboard-chart-row strong{text-align:right;color:var(--text);font-size:10px;font-weight:750} .track{height:10px;background:var(--primary-soft-2);border-radius:999px;overflow:hidden} .track i{display:block;height:100%;min-width:4px;border-radius:999px;background:linear-gradient(90deg,var(--primary),var(--accent));box-shadow:0 3px 8px color-mix(in srgb,var(--primary) 16%,transparent)} .dashboard-chart-empty{height:240px;display:grid;place-items:center;text-align:center;color:var(--muted)} .dashboard-chart-empty .empty-illustration{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary);font-size:19px;margin:0 auto 10px} .dashboard-chart-empty b{display:block;color:var(--text);font-size:12px} .dashboard-chart-empty span{display:block;font-size:10px;margin-top:3px} .quick-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px} .quick-grid a:hover{border-color:var(--primary-border);transform:translateY(-2px);box-shadow:0 12px 24px color-mix(in srgb,var(--primary) 8%,transparent)} .quick-icon{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary);font-size:14px;margin-bottom:4px} .quick-arrow{position:absolute;right:12px;top:13px;color:var(--muted);font-size:10px} .mini-stats{margin-top:0} .dashboard-recent{margin-top:1px} .dashboard-recent .panel-head{margin-bottom:10px} .dashboard-recent .table-wrap{border:1px solid var(--border);border-radius:11px} .dashboard-recent table{min-width:0} .dashboard-recent th{font-size:8px} .dashboard-recent td{font-size:10px} .dashboard-recent tbody tr:last-child td{border-bottom:0} .page-content>.panel,.page-content>.cards{animation:pageIn .28s ease both} .page-content>.cards{animation-delay:.03s} .grid-two,.dashboard-section-grid{animation:pageIn .32s ease both;animation-delay:.05s} @keyframes pageIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}} .sales-bars{height:255px;display:grid;grid-template-columns:repeat(14,minmax(0,1fr));align-items:end;gap:8px;padding:20px 4px 0;border-bottom:1px solid var(--primary-soft-2)} .sales-bar-item{height:100%;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:7px;position:relative} .sales-bar-value{font-size:8px;color:var(--muted);white-space:nowrap;opacity:0;transform:translateY(3px);transition:.15s} .sales-bar-item:hover .sales-bar-value{opacity:1;transform:none} .sales-bar-track{width:100%;max-width:30px;height:195px;display:flex;align-items:flex-end;justify-content:center;background:linear-gradient(to top,var(--surface-soft),transparent);border-radius:10px 10px 0 0;overflow:hidden} .sales-bar-track i{width:100%;min-height:5px;border-radius:8px 8px 2px 2px;background:linear-gradient(180deg,var(--accent),var(--primary));box-shadow:0 8px 15px color-mix(in srgb,var(--primary) 15%,transparent);transition:height .25s ease,filter .18s} .sales-bar-item:hover .sales-bar-track i{filter:brightness(1.08)} .sales-bar-item>span{font-size:8px;color:var(--muted);white-space:nowrap} .sales-bar-item:nth-child(even) .sales-bar-track i{background:linear-gradient(180deg,var(--accent),var(--primary))} .smart-select-button:hover{border-color:var(--primary-border);background:var(--surface-hover)} @media(max-width:1200px){.dashboard-section-grid{grid-template-columns:1fr}} @media(max-width:700px){.dashboard-hero{display:block;padding:22px}.hero-actions{margin-top:16px}.hero-actions a{flex:1}.dashboard-chart-row{grid-template-columns:42px 1fr 70px}.quick-grid{grid-template-columns:1fr 1fr}} @media(max-width:560px){.quick-grid{grid-template-columns:1fr}.dashboard-hero h2{font-size:21px}.stat-card .stat-icon{width:36px;height:36px}} @media print{.app-header,.sidebar,.nav-overlay,.invoice-actions,.no-print{display:none!important}.app-main{margin:0}.page-content{padding:0}.invoice-page{padding:0;background:var(--on-primary)}.invoice-sheet{box-shadow:none;margin:0}.template-thermal80{width:80mm!important;max-width:80mm!important;padding:5mm!important}@page{margin:0}} @media(max-width:1200px){.cards{grid-template-columns:repeat(2,1fr)}.grid-two,.pos-layout,.purchase-bottom{grid-template-columns:1fr}.header-search{width:250px}.barcode-workspace{grid-template-columns:270px 1fr}} @media(max-width:900px){.sidebar{transform:translateX(-100%);width:226px}.nav-open .sidebar{transform:translateX(0)}.nav-overlay{display:none;position:fixed;inset:0;background:color-mix(in srgb,var(--text) 40%,transparent);z-index:60}.nav-open .nav-overlay{display:block}.sidebar-close{display:block}.app-main,.sidebar-collapsed .app-main{margin-left:0}.sidebar-collapse{display:none}.mobile-menu{display:grid}.app-header{padding:0 13px}.header-search{display:none}.profile div,.profile a{display:none}.page-content{padding:16px 12px 28px}.product-grid{grid-template-columns:repeat(2,1fr)}.template-grid{grid-template-columns:repeat(2,1fr)}.barcode-workspace{grid-template-columns:1fr}.barcode-options{position:static}.purchase-form-top,.purchase-fields{grid-template-columns:1fr 1fr}} @media(max-width:560px){.cards{grid-template-columns:1fr}.quick-create span{display:none}.quick-create{width:36px;padding:0;justify-content:center}.quick-grid,.form-grid,.purchase-form-top,.purchase-fields{grid-template-columns:1fr}.form-grid .full{grid-column:auto}.product-grid,.template-grid{grid-template-columns:1fr}.panel{padding:12px}.purchase-table{min-width:760px}.header-tools{gap:6px}} table{width:100%;border-collapse:separate;border-spacing:0;min-width:700px;} th,td{padding:13px 12px;border-bottom:1px solid var(--border);white-space:nowrap;} .product-card small,.product-card span{color:var(--muted);font-size:11px;} .product-avatar{width:36px;height:36px;border-radius:10px;background:var(--surface-hover);color:var(--primary);display:grid;place-items:center;font-size:11px;flex:0 0 auto;} .purchase-table input{min-width:70px;height:34px;padding:7px;font-size:12px;} .line-remove{width:34px;height:34px;border:1px solid color-mix(in srgb,var(--danger) 28%,var(--border));border-radius:7px;background:var(--on-primary);color:var(--danger);cursor:pointer;} .dashboard-hero h2{font-size:28px;line-height:1.2;margin:13px 0 7px;letter-spacing:-.6px;} .quick-grid a{position:relative;min-height:116px;border:1px solid var(--border);border-radius:13px;padding:16px;text-decoration:none;display:flex;flex-direction:column;gap:4px;background:linear-gradient(180deg,var(--on-primary),var(--surface-hover));transition:.18s;} .quick-grid b{font-size:12px;color:var(--text);} .quick-grid small,.sub{font-size:10px;color:var(--muted);} .barcode-controls{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;} @media(max-width:1200px){.sidebar{width:240px}.app-main{margin-left:240px}.header-search{width:280px}} @media(max-width:900px){.sidebar{width:258px}.app-main{margin-left:0}.app-header{height:64px}.page-content{padding:18px 14px 34px}} @media print{.invoice-sheet{min-height:auto}} .add-inline-btn:hover{background:var(--primary-soft)} .modal-close:hover{color:var(--primary);border-color:var(--primary-border);background:var(--surface-hover)} .icon-action.danger:hover{background:color-mix(in srgb,var(--danger) 6%,var(--surface));border-color:color-mix(in srgb,var(--danger) 45%,var(--border));color:var(--danger)} html{scroll-behavior:smooth;font-size:15px;} body{margin:0;background:var(--body-bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased;} button,a,input,select,textarea{touch-action:manipulation} button{font-family:inherit} .sidebar{position:fixed;z-index:70;inset:0 auto 0 0;width:272px;background:var(--surface);border-right:1px solid var(--border);color:var(--sidebar-text);padding:14px 12px;overflow:auto;transition:width .2s,transform .2s;box-shadow:var(--shadow-sm);} .app-main{margin-left:272px;min-height:100vh;transition:margin-left .2s;} .brand-row{height:62px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;margin-bottom:14px;} .brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--text);min-width:0;} .brand-mark{width:40px;height:40px;border-radius:13px;background:linear-gradient(135deg,var(--accent),var(--primary));color:var(--on-primary);display:grid;place-items:center;box-shadow:0 5px 13px color-mix(in srgb,var(--primary) 20%,transparent);font-size:17px;} .brand strong{display:block;font-size:16px;font-weight:800;white-space:nowrap;} .brand small{display:block;color:var(--muted);font-size:10px;margin-top:1px;white-space:nowrap;} .main-nav{display:grid;gap:5px;} .nav-item{width:100%;height:46px;display:flex;align-items:center;gap:13px;padding:0 13px;border:0;background:transparent;color:var(--text);border-radius:12px;text-decoration:none;font:inherit;text-align:left;cursor:pointer;transition:.16s;font-size:14px;font-weight:550;} .nav-icon{width:22px;text-align:center;color:var(--muted);font-size:15px;} .nav-item.active{background:var(--primary-soft);color:var(--primary-dark);font-weight:750;position:relative;} .nav-item.active:before{content:"";position:absolute;left:-12px;top:7px;bottom:7px;width:4px;border-radius:3px;background:var(--primary);} .nav-sub{display:none;padding:5px 0 8px 42px;gap:2px;} .nav-sub a{display:flex;align-items:center;gap:9px;color:var(--muted);text-decoration:none;padding:8px 10px;border-radius:8px;font-size:13px;min-height:38px;line-height:1.3;} .nav-sub a i{width:14px;text-align:center;font-size:11px;color:var(--muted);} .nav-sub a:hover,.nav-sub a.active{background:var(--surface-hover);color:var(--primary-dark);} .nav-divider{height:1px;background:var(--border);margin:12px 8px;} .sidebar-footer{margin:14px 5px 3px;border-top:1px solid var(--border);padding:13px 8px 5px;color:var(--muted);font-size:11px;display:flex;align-items:center;gap:7px;margin-top:16px;} .app-header{height:70px;background:var(--on-primary);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 28px;position:sticky;top:0;z-index:50;} .page-heading h1{margin:0;font-size:20px;font-weight:750;letter-spacing:-.2px;color:var(--text);} .header-search{width:380px;height:42px;border:1px solid var(--border);border-radius:11px;background:var(--surface-soft);color:var(--muted);display:flex;align-items:center;gap:8px;padding:0 10px;text-decoration:none;font-size:12px;} .quick-create{height:42px;border-radius:11px;background:var(--primary);color:var(--on-primary);padding:0 15px;display:flex;align-items:center;gap:7px;text-decoration:none;font-weight:700;font-size:12px;box-shadow:0 6px 14px var(--primary-shadow);} .quick-create:hover{background:var(--primary-dark)} .icon-btn{width:40px;height:40px;border:1px solid var(--border);border-radius:11px;display:grid;place-items:center;text-decoration:none;background:var(--on-primary);color:var(--muted);} .profile .avatar{width:34px;height:34px;border-radius:50%;background:var(--surface-hover);color:var(--primary);display:grid;place-items:center;font-weight:800;font-size:11px;} .profile b{display:block;font-size:11px;} .profile small{display:block;color:var(--muted);font-size:9px;} .page-content{padding:28px 26px 50px;max-width:1920px;margin:auto;} .flash,.notice{padding:12px 15px;border-radius:12px;margin:0 0 14px;border:1px solid color-mix(in srgb,var(--success) 28%,var(--border));background:color-mix(in srgb,var(--success) 7%,var(--surface));color:var(--success);font-size:13px;box-shadow:var(--shadow-sm);} .panel-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px;} .panel-head h2{font-size:18px;margin:0;font-weight:700;color:var(--text);} .panel-head h3{font-size:15px;margin:0;} .panel-head p{font-size:12px;color:var(--muted);margin:3px 0 0;} .section-kicker{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--primary);font-weight:800;} .stat-card span,.stat-card small{color:var(--muted);font-size:11px;} .stat-card strong{display:block;font-size:27px;letter-spacing:-.4px;margin:7px 0 3px;color:var(--text);} .primary-btn,.secondary-btn,.checkout{height:42px;border-radius:11px;padding:0 16px;font-weight:700;text-decoration:none;display:inline-flex;justify-content:center;align-items:center;gap:8px;cursor:pointer;font-size:13px;min-height:42px;white-space:nowrap;} .primary-btn{box-shadow:0 6px 14px color-mix(in srgb,var(--primary) 14%,transparent)} .secondary-btn{background:var(--on-primary);border:1px solid var(--border);color:var(--text);border-color:var(--border);} .secondary-btn:hover{border-color:var(--primary-border);color:var(--primary);background:var(--surface-tint);} .text-btn{border:0;background:transparent;color:var(--primary);font-weight:700;text-decoration:none;font-size:13px;} .row-actions form{margin:0;display:flex;} .icon-action:hover{border-color:var(--primary-border);background:var(--surface-hover);color:var(--primary);transform:translateY(-1px);box-shadow:var(--shadow-sm);} .icon-action.edit{color:var(--primary);} .icon-action.danger{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 28%,var(--border));background:color-mix(in srgb,var(--danger) 3%,var(--surface));} .inline-icon-btn{width:30px;height:30px;border:1px solid var(--border-strong);background:var(--surface-hover);color:var(--primary);border-radius:8px;display:grid;place-items:center;cursor:pointer} .inline-icon-btn:hover{background:var(--primary-soft);border-color:var(--primary-border)} .field-action .inline-icon-btn{margin-left:4px} input,select,textarea{font:inherit;color:var(--text);background:var(--on-primary);border:1px solid var(--border);border-radius:11px;padding:10px 12px;outline:none;width:100%;min-height:44px;font-size:13px;} input:hover,select:hover,textarea:hover{border-color:var(--border-strong)} input:focus,select:focus,textarea:focus{border-color:var(--primary-border-strong);box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 8%,transparent);} label{color:var(--text)} .compact-field,.form-grid label,.purchase-fields label{font-size:12px;font-weight:650;color:var(--text);} .filters label span{font-size:10px;font-weight:700;color:var(--muted);} .filters label{display:grid;gap:5px;min-width:160px;} .smart-select-native{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;} .smart-select-button .selected-label.placeholder{color:var(--muted)} .smart-select.open .smart-select-button{border-color:var(--primary-border-strong);box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 8%,transparent);} .smart-select.open .smart-select-menu{display:block;} .smart-search{width:100%;height:33px;min-height:38px;margin-bottom:6px;border:1px solid var(--border);padding:0 9px;font-size:12px;border-radius:9px;} .smart-option:hover{background:var(--surface-hover);color:var(--primary);} .smart-option.selected{background:var(--primary-soft);color:var(--primary-dark);font-weight:700;} .smart-option.selected:before{content:"";width:3px;height:22px;border-radius:4px;background:var(--primary);margin-left:-7px;} .smart-option .check{margin-left:auto;opacity:0;color:var(--primary);} .smart-option.selected .check{opacity:1;color:var(--primary);} th{text-align:left;font-size:10px!important;text-transform:uppercase;letter-spacing:.55px;color:var(--muted);background:var(--surface-soft);padding:13px 14px;} td{font-size:13px;padding:14px;border-bottom:1px solid var(--border);color:var(--text);} tbody tr:hover{background:var(--surface-hover);} td .sub{display:block;margin-top:3px;color:var(--muted);font-size:11px} .pill{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:5px 9px;font-size:11px;font-weight:700;background:var(--surface-soft);color:var(--text);} .pill.success{background:color-mix(in srgb,var(--success) 7%,var(--surface));color:var(--success);} .pill.warning{background:color-mix(in srgb,var(--warning) 7%,var(--surface));color:var(--warning);} .pill.danger{background:color-mix(in srgb,var(--danger) 6%,var(--surface));color:var(--danger);} .empty{text-align:center;color:var(--muted);padding:52px 20px!important;} .empty i{font-size:26px;margin-bottom:8px;color:var(--border-strong)} .empty div{font-weight:700;color:var(--muted)} .empty small{font-size:11px} .reports-hero h2{font-size:26px;margin:7px 0 3px} .reports-hero p{margin:0;color:var(--muted);font-size:13px} .report-tile>strong{color:var(--muted);font-size:18px} .report-summary h3{margin:0 0 7px} .report-summary p{margin:0;color:var(--muted)} .report-total strong{font-size:18px;color:var(--text)} .pos-products .panel-head{padding-bottom:2px} .search-row input{min-height:48px;border-radius:13px;background:var(--surface-soft)} .product-card:after{content:"+";position:absolute;right:12px;bottom:11px;width:28px;height:28px;border-radius:9px;background:var(--primary-soft);color:var(--primary);display:grid;place-items:center;font-weight:800} .product-card small{font-size:10px;color:var(--muted)} .product-card span{font-size:12px;color:var(--text);margin-top:auto} .product-card:hover{border-color:var(--primary-border-strong);box-shadow:0 12px 25px color-mix(in srgb,var(--primary) 10%,transparent);transform:translateY(-2px);background:var(--surface-hover);} .cart-item strong{font-size:13px} .qty button{width:30px;height:30px;border:1px solid var(--border);border-radius:8px;background:var(--on-primary);} .totals{border-top:1px solid var(--border);padding-top:14px;margin-top:auto;} .totals div{display:flex;justify-content:space-between;padding:7px 0;font-size:12px;} .totals .grand{font-size:20px;padding-top:13px;border-top:1px solid var(--border);margin-top:7px;} .purchase-table td{vertical-align:middle} .purchase-product{display:flex;align-items:center;gap:9px;min-width:240px;font-weight:700;} .purchase-summary{border:1px solid var(--border);border-radius:13px;padding:15px;background:var(--surface-soft);} .purchase-summary-row{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--border);} .purchase-summary-row:last-child{border:0;border-bottom:0;font-weight:800;font-size:17px;} .purchase-complete{display:flex;grid-template-columns:repeat(2,1fr);gap:10px;flex-wrap:wrap;} .action-tile{border:1px solid var(--border);border-radius:12px;padding:13px 15px;text-decoration:none;background:var(--on-primary);display:flex;flex-direction:column;gap:4px;color:var(--text);} .action-tile:hover{border-color:var(--primary-border);background:var(--surface-hover);} .action-tile b{display:block;font-size:12px;color:var(--text);} .action-tile small{display:block;color:var(--muted);font-size:10px;margin-top:3px;} .barcode-workspace{display:grid;grid-template-columns:370px minmax(0,1fr);gap:20px;} .barcode-options{position:sticky;top:90px;height:max-content;} .barcode-settings-card{padding:18px} .barcode-preview{background:var(--on-primary);border:1px solid var(--border);border-radius:16px;padding:20px;box-shadow:var(--shadow-sm);} .invoice-page{padding:24px;background:var(--border);min-height:100vh;} .invoice-sheet{width:794px;margin:0 auto;background:var(--on-primary);padding:44px;box-shadow:var(--shadow-lg);min-height:1123px;max-width:100%;border-radius:3px;} .invoice-preview-mode{padding:14px;background:var(--border)} .invoice-preview-mode .invoice-sheet{width:794px;min-height:1123px;margin:0 auto;box-shadow:var(--shadow-md)} .invoice-head{display:flex;justify-content:space-between;gap:30px;border-bottom:2px solid var(--text);padding-bottom:22px;} .invoice-logo{width:44px;height:44px;background:var(--primary);color:var(--on-primary);border-radius:12px;display:grid;place-items:center;font-weight:800;} .invoice-head h1{margin:7px 0 2px;font-size:22px;} .invoice-head p{color:var(--muted);margin:0;font-size:10px;line-height:1.5;} .invoice-meta{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:4px;} .invoice-meta span{font-size:10px;color:var(--primary);letter-spacing:1px;font-weight:800;} .invoice-meta strong{font-size:18px;margin:4px 0;} .invoice-meta small{color:var(--muted);} .bill-to{display:flex;justify-content:space-between;padding:20px 0;gap:20px;border-bottom:1px solid var(--border);} .bill-to small{color:var(--muted);text-transform:uppercase;font-size:9px;display:block;letter-spacing:.6px;} .bill-to strong,.bill-to span{display:block;font-size:11px} .invoice-table{min-width:0;width:100%;margin-top:20px;} .invoice-table th,.invoice-table td{white-space:normal;overflow-wrap:anywhere;font-size:10px;padding:9px;} .invoice-bottom{display:grid;justify-content:space-between;gap:30px;margin-top:28px;grid-template-columns:1fr 270px;} .invoice-totals>div{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--border);font-size:11px} .invoice-totals .grand{border-top:2px solid var(--primary);margin-top:4px;padding-top:13px;font-size:16px;border-bottom:0;} .terms{max-width:50%;color:var(--muted);font-size:10px;} .terms strong{color:var(--text)} .terms p{margin-top:5px} .invoice-actions{display:flex;justify-content:center;gap:9px;margin-bottom:14px;position:sticky;top:0;z-index:20;padding:10px;background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(10px);} /* Invoice designer */ .invoice-design-layout{grid-template-columns:350px minmax(0,1fr);gap:20px} .invoice-preview-empty{height:900px;max-width:794px;margin:0 auto} .template-choice-card{min-height:78px;padding:11px} .template-choice-card b{font-size:13px} .template-choice-card small{font-size:10px} .modal-box{background:var(--on-primary);width:min(760px,100%);max-height:calc(100vh - 40px);overflow:auto;border-radius:18px;padding:24px;box-shadow:var(--shadow-lg);} .quick-create-modal{width:min(720px,100%);border-radius:18px;padding:22px;} .master-modal{width:min(620px,100%)} .modal-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:20px;} .modal-head h2{margin:4px 0;font-size:20px;} .modal-head p{margin:0;color:var(--muted);font-size:12px} .master-create-row{display:grid;grid-template-columns:1fr auto;gap:9px;margin-bottom:14px} .master-list{display:grid;gap:7px;max-height:360px;overflow:auto} .master-row:hover{background:var(--on-primary);border-color:var(--border-strong)} .master-row>b{font-size:13px} .modal-close{width:36px;height:36px;border:1px solid var(--border-strong);border-radius:9px;background:var(--on-primary);color:var(--muted);cursor:pointer;flex:0 0 36px;} /* Expense page */ .expense-summary{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px} .expense-summary>div{padding:15px;border:1px solid var(--border);border-radius:12px;background:var(--surface-soft)} .expense-summary span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted)} .expense-summary strong{display:block;margin-top:3px;font-size:20px} .empty-state-card{text-align:center;padding:70px 20px} .empty-illustration{width:72px;height:72px;border-radius:20px;background:var(--primary-soft);color:var(--primary);display:grid;place-items:center;font-size:28px;margin:0 auto 16px} .empty-state-card h2{margin:0 0 6px} .empty-state-card p{max-width:560px;margin:0 auto 20px;color:var(--muted)} /* Responsive */ @media(max-width:1280px){.sidebar{width:250px}.app-main{margin-left:250px}.header-search{width:300px}.product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.report-catalog{grid-template-columns:repeat(2,minmax(0,1fr))}.barcode-workspace{grid-template-columns:320px minmax(0,1fr)}} @media(max-width:1000px){.sidebar{transform:translateX(-100%);width:272px}.nav-open .sidebar{transform:translateX(0)}.app-main,.sidebar-collapsed .app-main{margin-left:0}.app-header{height:64px;padding:0 16px}.sidebar-collapse{display:none}.mobile-menu{display:grid}.header-search{display:none}.page-content{padding:20px 14px 36px}.pos-layout,.purchase-bottom,.grid-two{grid-template-columns:1fr}.cart-panel{position:static;min-height:auto}.report-catalog{grid-template-columns:1fr 1fr}.invoice-design-layout{grid-template-columns:1fr}.invoice-live-stage{min-height:auto}.invoice-preview-frame{height:820px}.invoice-preview-empty{height:820px}} @media(max-width:680px){html{font-size:14px}.page-content{padding:15px 10px 28px}.panel{padding:14px;border-radius:13px}.panel-head{align-items:flex-start;flex-direction:column}.panel-head>.primary-btn,.panel-head>.secondary-btn,.panel-head>.page-actions{align-self:stretch}.panel-head>.primary-btn,.panel-head>.secondary-btn{width:100%}.cards{grid-template-columns:1fr 1fr;gap:10px}.stat-card{padding:15px}.stat-card strong{font-size:21px}.report-catalog{grid-template-columns:1fr}.reports-hero{padding:18px}.reports-hero h2{font-size:21px}.filters{align-items:stretch}.filters label{min-width:100%;width:100%}.filters>button,.filters>a{width:100%}.product-grid{grid-template-columns:1fr 1fr;gap:9px}.product-card{min-height:118px;padding:12px}.purchase-form-top{grid-template-columns:1fr}.expense-summary{grid-template-columns:1fr}.invoice-page{padding:8px}.invoice-sheet,.invoice-preview-mode .invoice-sheet{width:100%;min-height:auto;padding:22px;box-shadow:none}.invoice-head{gap:12px}.invoice-head h1{font-size:18px}.invoice-bottom{grid-template-columns:1fr}.invoice-totals{width:100%}.invoice-preview-frame{height:720px}.invoice-preview-empty{height:720px}.master-create-row{grid-template-columns:1fr}.modal{padding:10px}.modal-box{padding:18px;border-radius:15px;max-height:calc(100vh - 20px)}.form-grid{grid-template-columns:1fr}.form-grid .full{grid-column:auto}.form-actions{flex-wrap:wrap}.form-actions>*{flex:1}.row-actions{gap:5px}.icon-action{width:34px;height:34px;flex-basis:34px}.table-wrap{margin:0 -2px}.table-wrap table{min-width:680px}} @media(max-width:430px){.cards{grid-template-columns:1fr}.product-grid{grid-template-columns:1fr}.quick-create{width:40px;padding:0;justify-content:center}.quick-create span{display:none}.header-tools{gap:5px}.profile{padding-left:0}.page-heading h1{font-size:18px}.barcode-workspace{grid-template-columns:1fr}} @media print{.invoice-page{padding:0;background:var(--on-primary)}.invoice-sheet,.invoice-preview-mode .invoice-sheet{width:210mm;min-height:297mm;margin:0;padding:12mm;box-shadow:none;border-radius:0}.invoice-actions{display:none!important}} .profile-trigger:hover{background:var(--surface-hover)} .profile-copy{text-align:left} .profile-chevron{color:var(--muted);font-size:9px;margin-left:2px} .profile-menu.show{display:block} .profile-menu-head b{display:block;font-size:12px} .profile-menu-head small{display:block;color:var(--muted);font-size:10px;margin-top:2px} .header-tools{position:relative} .method-field{display:grid;gap:5px;font-size:10px;font-weight:700;color:var(--muted);margin:7px 0} .method-control select{min-width:0} .method-add{border-color:var(--primary-border);color:var(--primary);background:var(--surface-hover)} .method-edit{border-color:var(--border-strong);color:var(--text);background:var(--on-primary)} .method-add:hover,.method-edit:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)} .add-inline-btn{border:0;background:var(--primary-soft);color:var(--primary-dark);border-radius:7px;padding:5px 8px;font-size:10px;font-weight:750;cursor:pointer;white-space:nowrap;} .field-with-action{position:relative;} .field-action{float:right;margin-top:-3px;position:absolute;right:0;top:-2px;z-index:3;display:inline-flex;align-items:center;} .purchase-form-top .smart-select{position:relative;z-index:1} .purchase-form-top .smart-select.open{z-index:1000} .filters .secondary-btn,.filters .primary-btn{white-space:nowrap} .report-metrics .stat-card{min-height:105px} .report-summary{padding:24px;border:1px dashed var(--border-strong);border-radius:12px;background:var(--surface-soft);margin-top:14px;} .summary-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:15px 0} .summary-row>div{padding:15px;border:1px solid var(--border);border-radius:12px;background:var(--surface-soft)} .summary-row span{display:block;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.5px} .summary-row b{display:block;font-size:17px;margin-top:5px;color:var(--text)} .filter-bar{display:grid;grid-template-columns:minmax(220px,1.4fr) repeat(2,minmax(150px,.7fr)) auto;gap:10px;align-items:end;padding:12px;background:var(--surface-soft);border:1px solid var(--border);border-radius:12px;margin-bottom:15px} .filter-bar select,.filter-bar input{min-height:40px} .row-actions{display:flex;align-items:center;gap:7px;justify-content:flex-start;flex-wrap:nowrap;} .icon-action{width:36px;height:36px;border:1px solid var(--border-strong);border-radius:10px;background:var(--on-primary);color:var(--muted);display:grid;place-items:center;text-decoration:none;cursor:pointer;flex:0 0 36px;transition:.15s;} .page-actions{display:flex;gap:8px;flex-wrap:wrap} .button-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap} /* Dashboard hierarchy */ .dashboard-welcome{padding:24px 26px} .dashboard-welcome .welcome-copy{max-width:720px} .dashboard-welcome .welcome-copy p{margin-top:8px} .dashboard-stat-note .success-text{color:var(--success);font-weight:700} .dashboard-stat-note .danger-text{color:var(--danger);font-weight:700} .product-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;} .product-card{display:flex;flex-direction:column;text-align:left;gap:4px;padding:14px;border:1px solid var(--border);border-radius:13px;background:linear-gradient(180deg,var(--on-primary),var(--surface-soft));cursor:pointer;color:var(--text);transition:.15s;position:relative;min-height:128px;box-shadow:var(--shadow-sm);justify-content:space-between;} .product-card strong{font-size:13px;line-height:1.3;padding-right:24px;} .cart-item{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--border);} .checkout{width:100%;margin-top:14px;height:46px;border-radius:12px;font-size:12px;box-shadow:0 8px 18px color-mix(in srgb,var(--primary) 18%,transparent);} /* Print labels */ .barcode-print-settings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border)} .barcode-print-settings .full{grid-column:1/-1} .barcode-page .barcode-options{overflow:visible} .barcode-page .barcode-settings-card{overflow:visible} .barcode-page .print-only-labels{display:none} /* Invoice / thermal */ .thermal-invoice{width:58mm;max-width:100%;margin:0 auto;background:var(--on-primary)} .thermal-invoice.thermal-80{width:80mm} .thermal-invoice .invoice-table{min-width:0} .thermal-invoice .invoice-table th,.thermal-invoice .invoice-table td{padding:5px 3px;font-size:9px} .thermal-invoice .invoice-head{padding-bottom:10px} .thermal-invoice .invoice-bottom{display:block} .thermal-invoice .terms{margin-top:12px} @media(max-width:1100px){.summary-row{grid-template-columns:repeat(2,1fr)}.filter-bar{grid-template-columns:1fr 1fr}.filter-bar button{grid-column:1/-1}.pos-layout{grid-template-columns:1fr}.cart-panel{position:static;top:auto}.product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:760px){.profile-copy{display:none}.profile-menu{right:-4px}.header-tools{gap:5px}.quick-create{padding:0 10px}.summary-row{grid-template-columns:1fr}.filter-bar{grid-template-columns:1fr}.report-catalog{grid-template-columns:1fr}.report-tile{min-height:68px}.method-control{grid-template-columns:minmax(0,1fr) 36px 36px}.method-control .inline-icon-btn{width:36px;min-width:36px}.barcode-print-settings{grid-template-columns:1fr}.barcode-print-settings .full{grid-column:auto}.pos-layout{gap:12px}.product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.panel-head{gap:10px}.page-actions{width:100%}.page-actions>*{flex:1}.table-wrap{border-radius:10px}.table-wrap table{min-width:720px}} @media(max-width:480px){.product-grid{grid-template-columns:1fr}.method-control{grid-template-columns:minmax(0,1fr) 34px 34px}.method-control .inline-icon-btn{width:34px;min-width:34px}.cards{grid-template-columns:1fr}.report-actions>*{width:100%}.summary-row>div{padding:13px}.profile-menu{width:205px}} @media print{body{background:var(--on-primary)}.app-header,.sidebar,.nav-overlay,.flash,.notice,.page-actions,.zoom-pills,.no-print{display:none!important}.app-main{margin-left:0!important}.page-content{padding:0!important;max-width:none}.panel{border:0!important;box-shadow:none!important}.barcode-page{margin:0!important;padding:0!important}.reports-hero,.report-catalog,.filters,.report-actions{display:none!important}.report-pdf-page{padding:0!important}} @media print{.thermal-invoice-page{padding:0!important;background:var(--on-primary)!important}.thermal-invoice-page .invoice-sheet{width:58mm!important;min-height:auto!important;padding:4mm!important;margin:0!important;box-shadow:none!important;border-radius:0!important}.thermal-invoice-page .template-thermal80{width:80mm!important}.thermal-invoice-page .invoice-actions{display:none!important}.thermal-invoice-page .invoice-head{display:block;text-align:center}.thermal-invoice-page .invoice-meta{align-items:center;text-align:center;margin-top:6px}.thermal-invoice-page .bill-to{display:block;padding:8px 0}.thermal-invoice-page .bill-to>div+div{margin-top:6px}.thermal-invoice-page .invoice-bottom{display:block;margin-top:12px}.thermal-invoice-page .terms{margin-bottom:10px}.thermal-invoice-page .invoice-table{margin-top:10px}} .dashboard-stat-note{display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:var(--muted);font-size:11px;line-height:1.5;margin-top:7px;} .dashboard-stat-note + .stat-trend{margin-top:9px} .dashboard-trend i{font-size:9px!important;} .dashboard-chart-card .sales-bars{margin-top:6px} .dashboard-chart-card .panel-head{margin-bottom:6px} .profile-wrap{position:relative;z-index:500;} .profile-trigger{border:0;background:transparent;cursor:pointer;color:inherit;padding:3px 2px;border-radius:10px;min-height:40px;display:flex;align-items:center;gap:8px;} .profile-trigger .profile-chevron{transition:transform .18s} .profile-trigger[aria-expanded="true"] .profile-chevron{transform:rotate(180deg)} .profile-menu a i{width:18px;text-align:center} .smart-select{position:relative;width:100%;z-index:20;} .smart-select.open{z-index:5000} .smart-select-menu{display:none;position:absolute;z-index:6000!important;left:0;right:0;top:calc(100% + 7px);background:var(--on-primary);border:1px solid var(--border-strong);border-radius:13px;box-shadow:var(--shadow-lg);padding:7px;max-height:320px;overflow:auto;border-color:var(--primary-border);} .smart-select-button{width:100%;min-height:44px;border:1px solid var(--border);background:var(--on-primary);border-radius:11px;padding:0 12px 0 13px;display:flex;align-items:center;justify-content:space-between;gap:8px;font:inherit;color:var(--text);cursor:pointer;text-align:left;border-color:var(--primary-border);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--on-primary) 80%,transparent);transition:.15s;font-size:13px;position:relative;z-index:1;} .purchase-form-top{display:grid;grid-template-columns:1fr 1.35fr 1.35fr;gap:16px;position:relative;z-index:50!important;overflow:visible;} .purchase-form-top>label{position:relative;z-index:1} .purchase-form-top>label:focus-within,.purchase-form-top>label:has(.smart-select.open){z-index:5000} .purchase-form-top + .panel{position:relative;z-index:1} /* Filter bars and reset buttons */ .filters .filter-submit,.filters .filter-reset{min-height:40px} .filter-reset{font-weight:700!important;display:inline-flex!important;align-items:center;gap:7px} .filter-reset:hover{background:var(--surface-hover)!important;border-color:var(--primary-border)!important} .filters{display:flex;align-items:end;gap:10px;flex-wrap:wrap;padding:15px;background:var(--surface-soft);border:1px solid var(--border);border-radius:13px;margin-bottom:13px;overflow:visible;} .filters .smart-select{min-width:0} .table-wrap table{min-width:760px;} .table-wrap tbody tr:last-child td{border-bottom:0} .table-wrap .row-actions{gap:7px;justify-content:flex-start} .report-total{display:flex;justify-content:space-between;align-items:center;padding:13px 15px;margin-bottom:13px;border:1px solid var(--border);border-radius:11px;background:var(--surface-soft);color:var(--muted);margin-top:2px;} .report-catalog{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important;margin:0 0 18px;} .report-tile b,.report-tile small{display:block!important} .report-actions .secondary-btn{white-space:nowrap} .report-metrics{margin-top:2px;margin-bottom:15px;} .method-control .smart-select{min-width:0} .method-add,.method-edit{display:inline-grid;place-items:center;border-radius:10px} .master-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 11px;border:1px solid var(--border);border-radius:11px;background:var(--surface-soft);min-height:48px;} .master-row>div{display:flex;gap:7px;} .quick-create-modal,.master-modal{max-width:720px} .modal{display:none;position:fixed;inset:0;background:color-mix(in srgb,var(--text) 48%,transparent);z-index:10000!important;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(3px);} .purchase-form-top .smart-select-menu{z-index:1200;top:calc(100% + 6px);} .purchase-lines{min-height:190px;position:relative;z-index:1;} .purchase-bottom{display:grid;grid-template-columns:1.35fr .9fr;gap:18px;margin-top:14px;position:relative;z-index:1;} .pos-products,.cart-panel{overflow:visible;position:relative;} .pos-products{min-width:0;z-index:2;} .cart-panel{min-height:calc(100vh - 130px);display:flex;flex-direction:column;position:sticky;top:82px;padding:18px;box-shadow:var(--shadow-md);z-index:3;} .pos-layout .cart-panel .smart-select-menu{z-index:8000!important} /* Customer selection */ #customer + .smart-select-button,.smart-select:has(#customer) .smart-select-button{font-weight:600} .smart-option{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;font-size:13px;cursor:pointer;color:var(--text);min-height:42px;justify-content:space-between;line-height:1.35;} /* Customer ledger / session / analytics / P&L */ .ledger-summary,.session-overview,.analytics-kpis,.profit-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:15px 0} .ledger-summary>div,.session-overview>div,.analytics-kpis>div,.profit-kpis>div{padding:16px;border:1px solid var(--border);border-radius:13px;background:linear-gradient(180deg,var(--on-primary),var(--surface-soft))} .session-overview strong,.analytics-kpis strong,.profit-kpis strong{display:block;font-size:21px;margin-top:5px} .session-overview span,.analytics-kpis span,.profit-kpis span{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-weight:700} /* Invoice designer */ .invoice-design-page{overflow:visible!important} .invoice-template-picker{position:sticky;top:82px} .invoice-live-stage{min-height:920px;padding:18px;background:var(--border);border:1px solid var(--border-strong);border-radius:16px;overflow:auto;} .invoice-preview-frame{width:794px;height:900px;border:1px solid var(--border-strong);border-radius:6px;background:var(--on-primary);max-width:100%;margin:0 auto;box-shadow:var(--shadow-md);min-height:700px;} /* Responsive final pass */ @media(max-width:1100px){.report-catalog{grid-template-columns:repeat(2,minmax(0,1fr))!important} .ledger-summary,.session-overview,.analytics-kpis,.profit-kpis{grid-template-columns:repeat(2,minmax(0,1fr))} .purchase-form-top{grid-template-columns:1fr 1fr 1fr}} @media(max-width:760px){.report-catalog{grid-template-columns:1fr!important} .ledger-summary,.session-overview,.analytics-kpis,.profit-kpis{grid-template-columns:1fr 1fr} .method-control{grid-template-columns:minmax(0,1fr) 38px 38px} .page-actions{gap:7px} .page-actions>*{min-width:0} .invoice-template-picker{position:static} } @media(max-width:480px){.dashboard-collected{font-size:11px!important} .dashboard-trend{font-size:10px!important} .ledger-summary,.session-overview,.analytics-kpis,.profit-kpis{grid-template-columns:1fr} .method-control{grid-template-columns:minmax(0,1fr) 36px 36px;gap:5px} .method-control .inline-icon-btn{width:36px;min-width:36px} .profile-menu{right:-10px;width:210px}} .analytics-page .page-actions{align-items:center} .analytics-period select{min-width:130px} .analytics-kpis small{display:block;color:var(--muted);font-size:10px;margin-top:5px} .analytics-chart{margin-top:4px;padding:17px;border:1px solid var(--border);border-radius:14px;background:var(--surface-soft)} .chart-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:13px} .chart-heading b{display:block;font-size:13px} .chart-heading small{display:block;color:var(--muted);font-size:10px;margin-top:3px} .analytics-chart .bar-row{display:grid;grid-template-columns:58px minmax(0,1fr) 105px;gap:10px;align-items:center;margin:8px 0} .analytics-chart .bar-row>span{font-size:10px;color:var(--muted)} .analytics-chart .bar-row>b{text-align:right;font-size:10px} .analytics-chart .bar-track{height:10px;background:var(--primary-soft-2);border-radius:999px;overflow:hidden} .analytics-chart .bar-track i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--primary))} .analytics-grid{align-items:start} .analytics-grid .panel{min-width:0} .session-hero{background:linear-gradient(135deg,var(--on-primary) 0%,var(--surface-hover) 100%)} .session-overview small{display:block;color:var(--muted);font-size:10px;margin-top:5px} @media(max-width:700px){.analytics-chart .bar-row{grid-template-columns:48px minmax(0,1fr) 85px}.analytics-chart .bar-row>b{font-size:9px}} .thermal-invoice-page .thermal-hide{display:none!important} .thermal-invoice-page .invoice-table{table-layout:fixed;width:100%;min-width:0!important} .thermal-invoice-page .invoice-table th:first-child,.thermal-invoice-page .invoice-table td:first-child{width:46%} .thermal-invoice-page .invoice-table th,.thermal-invoice-page .invoice-table td{white-space:normal;word-break:break-word} .thermal-invoice-page .invoice-sheet{overflow:hidden} .panel,.stat-card{border-radius:16px;border:1px solid var(--border);box-shadow:var(--shadow);background:var(--surface);border-color:var(--border);} .panel{padding:18px;margin-bottom:16px;overflow:visible;} .stat-card{padding:20px;position:relative;overflow:hidden;transition:transform .18s,box-shadow .18s,border-color .18s;} .cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:17px;} .cards .stat-card{min-height:112px; display:flex; flex-direction:column; justify-content:center;} .cards .stat-card span,.cards .stat-card small{color:var(--text-muted)} .cards .stat-card strong{color:var(--text-strong)} .dashboard-collected{display:block!important;font-size:12px!important;margin-top:7px!important;line-height:1.45!important;font-weight:600;letter-spacing:-.1px;} .dashboard-trend{font-size:11px!important;margin-top:7px!important;gap:7px!important;} .dashboard-hero{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;overflow:hidden;min-height:150px;padding:20px;background:linear-gradient(135deg,var(--primary-dark) 0%,var(--primary) 55%,var(--accent) 100%);color:var(--on-primary);border:0;border-radius:20px;box-shadow:0 14px 35px var(--primary-shadow);} .dashboard-hero h2,.dashboard-hero p{color:var(--on-primary)} .dashboard-hero p{margin:0;color:var(--primary-soft);font-size:13px;opacity:.9;} .pos-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(360px,.78fr);gap:14px;align-items:start;} .pos-layout .cart-panel{position:relative;top:auto;align-self:start;min-width:0} .table-wrap{width:100%;overflow:auto;border-radius:13px;border:1px solid var(--border);background:var(--surface);border-color:var(--border);box-shadow:none;} .table-wrap th{position:sticky;top:0;z-index:2;padding:12px 13px;background:var(--body-bg);color:var(--text-muted);font-size:9px;} .table-wrap td{padding:12px 13px;color:var(--text-strong);} .table-wrap tbody tr:hover{background:var(--body-bg)} .profile-menu{display:none;position:absolute;right:0;top:calc(100% + 9px);width:220px;background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);padding:8px;z-index:300;min-width:220px;overflow:hidden;border-color:var(--border);} .profile-menu-head{display:flex;gap:10px;align-items:center;padding:10px;border-bottom:1px solid var(--primary-soft-2);margin-bottom:6px;border-color:var(--border);} .profile-menu a{display:flex;align-items:center;gap:10px;padding:10px 11px;border-radius:9px;color:var(--text);text-decoration:none;font-size:11px;font-weight:600;min-height:40px;} .profile-menu a:hover{background:var(--body-bg);color:var(--primary);} .profile-menu a.danger:hover{background:var(--body-bg);color:var(--danger);} .method-control{display:grid;grid-template-columns:minmax(0,1fr) 38px 38px;gap:7px;align-items:center;width:100%;} .method-control .inline-icon-btn{width:38px;height:38px;min-width:38px;} /* Responsive: preserve card surfaces; never flatten them on mobile. */ @media(max-width:1100px){.pos-layout{grid-template-columns:1fr} .pos-layout .cart-panel{top:auto}} @media(max-width:760px){.panel{padding:14px} .stat-card{padding:15px} .cards{gap:10px} .cards .stat-card{min-height:96px}} .reports-hero{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 22px;background:var(--surface);border-color:var(--border);box-shadow:var(--shadow);} .reports-hero h2,.report-section-head h3{color:var(--text-strong)} .reports-hero p,.report-section-head p{color:var(--text-soft)} .report-tile{min-width:0!important;display:grid!important;grid-template-columns:40px 1fr 18px;align-items:center;gap:11px;padding:13px 14px;border:1px solid var(--border);border-radius:13px;background:var(--surface);color:var(--text-strong);text-decoration:none;box-shadow:none;transition:.16s;min-height:74px;border-color:var(--border);} .report-tile:hover{transform:translateY(-1px);border-color:var(--primary);box-shadow:var(--shadow);background:var(--primary-soft-2);} .report-tile.active{border-color:var(--primary);background:var(--primary-soft);box-shadow:var(--shadow);} .report-icon{width:40px;height:40px;border-radius:11px;background:var(--primary-soft);color:var(--primary);display:grid;place-items:center;font-weight:800;font-size:16px;} .report-tile b{display:block;font-size:12px;color:var(--text-strong);} .report-tile small{display:block;margin-top:2px;font-size:10px;color:var(--text-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.4!important;} .report-section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;padding:4px 0 13px} .report-section-head h3{margin:3px 0 2px;font-size:16px} .report-section-head p{margin:0;font-size:11px} .report-total-inline{font-size:18px;color:var(--primary);white-space:nowrap} .report-table-wrap{border:1px solid var(--border);border-radius:12px;overflow:auto;background:var(--surface)} .report-table-wrap th{background:var(--body-bg);color:var(--text-soft)} .report-table-wrap td{color:var(--text-strong)} .report-table-wrap tfoot th,.report-table-wrap tfoot td{background:var(--primary-soft-2);border-top:1px solid var(--border);font-weight:800;color:var(--text-strong)} .report-emphasis td{background:var(--primary-soft-2)} .report-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;} .session-overview>div{background:var(--surface);border-color:var(--border);box-shadow:none} .session-overview strong{color:var(--text-strong)} .session-overview span,.session-overview small{color:var(--text-soft)} .metric-success{color:var(--success)!important;} .danger-btn{height:40px;border:1px solid var(--danger);background:var(--danger);color:var(--on-primary);border-radius:9px;padding:0 15px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:7px;cursor:pointer} .danger-btn:hover{filter:brightness(.94)} @media(max-width:760px){.report-section-head{align-items:flex-start;flex-direction:column}.report-total-inline{font-size:16px}} /* Purchase supplier / branch menus must sit above the following panel. */ .purchase-entry-page > .panel:first-of-type, .page-content > .panel:has(.purchase-form-top){position:relative; z-index:100; overflow:visible!important;} .purchase-entry-page > .panel:nth-of-type(2), .page-content > .panel:has(.purchase-lines){position:relative; z-index:1;} .page-content > .panel:has(.purchase-form-top) .smart-select{position:relative;z-index:101} .page-content > .panel:has(.purchase-form-top) .smart-select.open{z-index:10000} .page-content > .panel:has(.purchase-form-top) .smart-select-menu{z-index:10001!important} .auth-page{min-height:100dvh;display:grid;place-items:stretch;background:var(--body-bg);grid-template-columns:minmax(0,1.06fr) minmax(420px,.94fr);padding:0;} .auth-page::before{content:""; grid-column:1; grid-row:1; min-height:100vh; background:linear-gradient(135deg,var(--primary),var(--accent));} .auth-card{width:min(430px,calc(100% - 64px));background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:34px;box-shadow:var(--shadow);grid-column:2;grid-row:1;align-self:center;justify-self:center;box-sizing:border-box;z-index:2;} .auth-brand{margin-bottom:24px;display:flex;justify-content:center;margin:0 0 22px;} .auth-brand .brand-mark{background:linear-gradient(135deg,var(--accent),var(--primary));color:var(--on-primary)} .auth-card h1{font-size:24px;margin:0 0 7px;text-align:center;line-height:1.2;color:var(--text);} .auth-muted{color:var(--muted);font-size:12px;margin:0 auto 22px;text-align:center;line-height:1.55;max-width:310px;} .auth-form{display:grid;gap:14px;} .auth-form label{display:grid;gap:7px;font-size:11px;font-weight:700;color:var(--text);} .auth-form input{min-height:42px;border-radius:10px} .auth-form .primary-btn{width:100%;height:44px;border-radius:10px;font-size:12px} .auth-hint{margin-top:16px;padding:12px 13px;background:var(--primary-soft);border:1px solid var(--border);border-radius:10px;color:var(--muted);font-size:10px;line-height:1.5;} .auth-page .notice{margin-bottom:14px} .auth-page .auth-card:after{content:""; position:fixed;left:0;top:0;bottom:0;width:calc(50% + 2px); pointer-events:none;opacity:.06; background-image:radial-gradient(currentColor .65px,transparent .65px); background-size:22px 22px;} .auth-page .auth-card>*{position:relative;z-index:2} @media(max-width:860px){.auth-page{grid-template-columns:1fr;display:grid;place-items:center;padding:24px 14px;background:var(--body-bg);} .auth-page::before{display:none} .auth-card{grid-column:1;grid-row:1;width:min(440px,100%);padding:28px 22px;border-radius:16px} .auth-page .auth-card:after{display:none}} @media(max-width:480px){.auth-page{padding:14px} .auth-card{padding:24px 17px;border-radius:14px} .auth-card h1{font-size:22px} .auth-muted{font-size:11px;margin-bottom:18px}} .auth-showcase{grid-column:1;grid-row:1;position:relative;z-index:1;display:flex;align-items:center;justify-content:center;color:var(--on-primary);padding:40px} .auth-showcase-inner{width:min(520px,78%);margin-top:-30px} .auth-badge{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border:1px solid color-mix(in srgb,var(--on-primary) 30%,transparent);background:color-mix(in srgb,var(--on-primary) 10%,transparent);border-radius:999px;font-size:10px;font-weight:700} .auth-badge i{font-size:7px;color:var(--success)} .auth-showcase h2{font-size:42px;line-height:1.08;margin:25px 0 12px;letter-spacing:-1.2px} .auth-showcase p{max-width:390px;font-size:16px;line-height:1.6;margin:0 0 27px;opacity:.88} .auth-showcase ul{list-style:none;padding:0;margin:0;display:grid;gap:14px} .auth-showcase li{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:600} .auth-showcase li i{width:25px;height:25px;border-radius:8px;display:grid;place-items:center;background:color-mix(in srgb,var(--on-primary) 14%,transparent);font-size:10px} .auth-demo{width:100%;display:flex;align-items:center;gap:11px;text-align:left;padding:10px 12px;margin:0 0 18px;background:var(--surface);border:1px dashed var(--primary);border-radius:12px;color:var(--text);cursor:pointer} .auth-demo>i{margin-left:auto;color:var(--primary)} .auth-demo-icon{width:36px;height:36px;display:grid;place-items:center;border-radius:9px;background:var(--primary-soft);color:var(--primary);font-size:13px;flex:0 0 auto} .auth-demo b{display:block;color:var(--primary);font-size:9px;letter-spacing:.6px;margin-bottom:3px} .auth-demo strong{display:block;font-size:11px} .auth-password{position:relative} .auth-password input{padding-right:42px} .auth-password button{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:var(--muted);cursor:pointer;width:30px;height:30px} .auth-options{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:10px} .auth-options a{color:var(--primary);font-weight:700;text-decoration:none} .auth-options .remember{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:500} .auth-options input{width:15px;min-height:15px;padding:0} .auth-form>.primary-btn{display:flex;justify-content:center} .auth-or{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;margin:20px 0;color:var(--muted);font-size:9px} .auth-or span{height:1px;background:var(--border)} .auth-store-btn{height:44px;border:1px solid var(--border);border-radius:10px;display:flex;align-items:center;justify-content:center;gap:8px;color:var(--text);text-decoration:none;font-size:12px;font-weight:700} .auth-store-btn:hover{border-color:var(--primary);color:var(--primary);background:var(--surface-hover)} .auth-footer{text-align:center;color:var(--muted);font-size:9px;line-height:1.45;margin:22px 0 0} .auth-card .brand strong{font-size:15px} .auth-card .brand small{font-size:9px} @media(max-width:860px){.auth-showcase{display:none}} /* ========================================================= FINAL RESPONSIVE LAYER Keep every existing component, but make layouts fluid on phones/tablets and prevent horizontal overflow. ========================================================= */ html,body{max-width:100%;overflow-x:hidden} img,svg,video,canvas{max-width:100%;height:auto} .app-shell,.app-main,.page-content{min-width:0} .page-content>*{min-width:0} .table-wrap,.report-table-wrap,.invoice-table-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch} .table-wrap table,.report-table-wrap table{width:100%;} @media(max-width:1100px){ .app-header{padding:0 16px} .page-content{padding:20px 16px 34px} .dashboard-section-grid{grid-template-columns:1fr} .dashboard-chart-card{min-height:0} .cards{grid-template-columns:repeat(2,minmax(0,1fr))} .summary-row,.ledger-summary,.session-overview,.analytics-kpis,.profit-kpis{grid-template-columns:repeat(2,minmax(0,1fr))} .dashboard-hero{min-height:0;padding:26px} .dashboard-hero h2{font-size:26px} } @media(max-width:900px){ .sidebar{width:min(286px,88vw);transform:translateX(-105%)} .nav-open .sidebar{transform:translateX(0)} .app-main,.sidebar-collapsed .app-main{margin-left:0} .mobile-menu{display:grid} .sidebar-collapse{display:none} .header-search{display:none} .app-header{height:64px;padding:0 14px} .header-tools{min-width:0;gap:7px} .header-left{min-width:0} .page-heading h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .page-content{padding:18px 14px 32px} .dashboard-hero{display:block} .hero-actions{margin-top:16px;flex-wrap:wrap} .hero-actions>*{flex:1 1 150px} .dashboard-section-grid,.grid-two,.pos-layout,.purchase-bottom,.invoice-design-layout{grid-template-columns:1fr} .cart-panel{position:static!important;top:auto!important} .purchase-form-top{grid-template-columns:repeat(2,minmax(0,1fr))} .barcode-workspace{grid-template-columns:1fr} .barcode-options{position:static} .template-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .report-catalog{grid-template-columns:repeat(2,minmax(0,1fr))!important} } @media(max-width:680px){ html{font-size:14px} .app-header{height:60px;padding:0 10px} .header-tools{gap:5px} .header-tools .icon-btn,.header-tools .quick-create{flex:0 0 auto} .header-tools .profile-copy{display:none} .profile{padding-left:0} .page-content{padding:14px 10px 28px} .page-heading{gap:10px;flex-wrap:wrap} .page-heading h1{font-size:19px} .page-actions{width:100%;display:flex;flex-wrap:wrap;gap:7px} .page-actions>*{flex:1 1 140px} .dashboard-hero{padding:20px;border-radius:15px} .dashboard-hero h2{font-size:22px;line-height:1.2} .dashboard-hero p{font-size:12px} .dashboard-hero .hero-actions{width:100%} .dashboard-hero .hero-actions>*{width:100%;min-width:0} .cards{grid-template-columns:1fr 1fr;gap:10px} .stat-card{min-width:0;padding:14px} .stat-card strong{font-size:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .stat-card span,.stat-card small{font-size:10px} .dashboard-collected{font-size:10px!important} .dashboard-trend{font-size:10px!important} .stat-card .stat-icon{width:34px;height:34px;right:11px;top:11px} .dashboard-section-grid{gap:12px} .dashboard-chart-card{overflow:hidden} .sales-bars{gap:4px;overflow:hidden} .dashboard-chart-row{grid-template-columns:40px minmax(0,1fr) 65px;gap:7px} .quick-grid{grid-template-columns:1fr 1fr} .quick-grid a{min-height:105px;padding:13px} .panel{padding:14px;border-radius:13px} .panel-head{align-items:flex-start;flex-direction:column;gap:9px} .panel-head>.primary-btn,.panel-head>.secondary-btn,.panel-head>.page-actions{width:100%;align-self:stretch} .form-grid,.purchase-form-top,.purchase-fields,.filter-bar,.barcode-print-settings,.expense-summary{grid-template-columns:1fr} .purchase-form-top{gap:10px} .template-grid,.report-catalog{grid-template-columns:1fr!important} .product-grid{grid-template-columns:1fr 1fr} .method-control{grid-template-columns:minmax(0,1fr) 36px 36px} .summary-row,.ledger-summary,.session-overview,.analytics-kpis,.profit-kpis{grid-template-columns:1fr 1fr} .report-section-head{align-items:flex-start;flex-direction:column} .report-actions{width:100%} .report-actions>*{flex:1 1 140px} .form-actions{flex-wrap:wrap} .form-actions>*{flex:1 1 140px} .table-wrap table,.report-table-wrap table{min-width:680px} .purchase-table{min-width:760px} .invoice-sheet,.invoice-preview-mode .invoice-sheet{width:100%;min-width:0;padding:18px} .invoice-head{flex-wrap:wrap} .invoice-bottom{grid-template-columns:1fr} .invoice-totals{width:100%} .modal{padding:8px} .modal-box{width:min(100%,520px);max-height:calc(100dvh - 16px);padding:16px} .smart-select-menu{max-width:calc(100vw - 20px)} } @media(max-width:480px){ .cards,.summary-row,.ledger-summary,.session-overview,.analytics-kpis,.profit-kpis{grid-template-columns:1fr} .product-grid{grid-template-columns:1fr} .quick-grid{grid-template-columns:1fr} .page-actions>*{flex-basis:100%} .header-tools .quick-create{width:38px;padding:0;justify-content:center} .header-tools .quick-create span{display:none} .header-tools .icon-btn{width:36px;height:36px} .profile .avatar{width:32px;height:32px} .dashboard-hero{padding:18px} .dashboard-hero h2{font-size:20px} .dashboard-hero .eyebrow{font-size:8px} .dashboard-chart-row{grid-template-columns:34px minmax(0,1fr) 58px;font-size:9px} .quick-grid a{min-height:94px} .panel-head h2{font-size:16px} .auth-card{width:100%;padding:22px 16px} } /* Password visibility control: only one icon is visible at a time. */ .auth-password .password-toggle{display:grid;place-items:center;padding:0} .auth-password .password-toggle [hidden]{display:none!important} .auth-password .password-toggle i{line-height:1;font-size:14px} /* ProBill final responsive / POS + Purchase consistency pass */ .pos-layout{align-items:start;gap:16px} .pos-products,.cart-panel,.purchase-entry-page>.panel,.purchase-bottom>.panel{border-radius:16px;border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow)} .pos-products .panel-head,.cart-panel .panel-head{margin-bottom:14px} .pos-products .panel-head p,.cart-panel .panel-head p{margin:3px 0 0;color:var(--muted);font-size:11px} .pos-products .search-row{margin-bottom:12px} .pos-products .product-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px} .pos-products .product-card{min-height:118px;padding:14px;background:var(--surface);border-color:var(--border);box-shadow:var(--shadow-sm)} .pos-products .product-card:hover{border-color:var(--primary-border);background:var(--surface-hover);box-shadow:var(--shadow)} .cart-panel{min-height:0;position:sticky;top:84px;padding:18px} .cart-panel form{display:flex;flex-direction:column;gap:10px} .cart-panel .totals{margin-top:2px} .cart-panel .checkout{margin-top:4px} .purchase-form-top{gap:14px;align-items:end} .purchase-form-top label,.purchase-fields label{min-width:0} .purchase-lines{overflow:visible} .purchase-lines .table-wrap{overflow-x:auto} .purchase-entry-page .purchase-form-top .smart-select-menu{z-index:10050!important} .purchase-entry-page .panel:first-of-type{z-index:20} .purchase-entry-page .panel:nth-of-type(2){z-index:5} .form-actions.save-return-actions{margin-top:22px} .report-filters{grid-template-columns:repeat(6,minmax(130px,1fr));align-items:end} .report-filters label{min-width:0} .report-filters .primary-btn,.report-filters .secondary-btn{height:42px} .report-table-wrap{border-radius:14px;overflow:auto;background:var(--surface)} .report-table-wrap table{min-width:720px} .report-table-wrap tfoot th,.report-table-wrap tfoot td{background:var(--primary-soft-2)} @media(max-width:1200px){ .report-filters{grid-template-columns:repeat(3,minmax(0,1fr))} .pos-products .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:900px){ .app-header{padding:0 14px} .header-tools{min-width:0;gap:6px} .profile-copy,.profile-chevron{display:none!important} .profile{padding:0!important} .page-heading h1{font-size:18px} .page-content{padding:16px 12px 32px;min-width:0} .panel{max-width:100%;overflow:visible} .cards{grid-template-columns:repeat(2,minmax(0,1fr))} .dashboard-hero{min-height:0} .dashboard-section-grid,.grid-two,.pos-layout,.purchase-bottom,.invoice-design-layout{grid-template-columns:1fr!important} .cart-panel{position:relative!important;top:auto!important;min-height:0} .purchase-form-top,.purchase-fields{grid-template-columns:repeat(2,minmax(0,1fr))} .report-filters{grid-template-columns:repeat(2,minmax(0,1fr))} .report-filters .primary-btn,.report-filters .secondary-btn{width:100%} .table-wrap,.report-table-wrap,.invoice-table-wrap{max-width:100%;overflow-x:auto} .table-wrap table,.report-table-wrap table{min-width:700px} .purchase-table{min-width:760px} } @media(max-width:600px){ html{font-size:14px} .app-header{height:62px} .header-tools .icon-btn{display:none} .quick-create{width:40px;padding:0;justify-content:center} .quick-create span{display:none} .page-heading .eyebrow{display:none} .page-heading h1{font-size:17px} .page-content{padding:12px 10px 28px} .panel{padding:14px;border-radius:14px} .cards{grid-template-columns:1fr;gap:10px} .cards .stat-card{min-height:100px} .dashboard-hero{padding:18px} .dashboard-hero h2{font-size:22px} .pos-products .product-grid{grid-template-columns:1fr} .pos-products .product-card{min-height:104px} .purchase-form-top,.purchase-fields,.report-filters{grid-template-columns:1fr} .purchase-form-top .field-with-action .field-action{position:static;margin-bottom:5px} .method-control{grid-template-columns:minmax(0,1fr) 40px 40px} .report-actions{width:100%} .report-actions>*{flex:1 1 140px} .report-catalog{grid-template-columns:1fr!important} .form-actions{gap:8px} .form-actions>*{flex:1 1 100%} .save-return-actions{margin-top:22px!important} .modal{padding:10px} .modal-box{width:min(100%,720px);max-height:calc(100vh - 20px);overflow:auto} } @media(max-width:420px){ .profile-wrap{margin-left:auto} .page-heading h1{font-size:16px} .pos-products .panel-head,.cart-panel .panel-head{align-items:flex-start;gap:8px} .pos-products .panel-head>.secondary-btn{padding:0 10px} .report-actions>*{flex:1 1 100%} } .sales-return-fields{margin-top:15px} .purchase-suggestions{position:absolute;left:0;right:0;top:43px;background:var(--surface);border:1px solid var(--border);border-radius:9px;box-shadow:var(--shadow-md);z-index:10050;display:none;max-height:300px;overflow:auto} .purchase-suggestion{width:100%;display:flex;align-items:center;gap:9px;border:0;background:var(--surface);padding:9px 10px;text-align:left;cursor:pointer;color:var(--text)} .purchase-suggestion:hover{background:var(--surface-hover)} /* -------------------------------------------------------------------------- POS SALE WORKSPACE — final responsive design layer Uses the existing root design tokens only. No page-specific color values. -------------------------------------------------------------------------- */ .pos-sale-page{display:grid;gap:16px;min-width:0} .pos-sale-page .panel{margin-bottom:0} .pos-sale-header{position:relative;z-index:20;overflow:visible!important} .pos-sale-header .panel-head{margin-bottom:18px} .pos-sale-fields{display:grid;grid-template-columns:minmax(180px,.9fr) minmax(280px,1.15fr) minmax(240px,1fr);gap:12px;align-items:start} .pos-sale-fields.document-number-fields{grid-template-columns:minmax(170px,.75fr) minmax(180px,.8fr) minmax(280px,1.15fr) minmax(240px,1fr)} .quotation-fields.document-number-fields{grid-template-columns:minmax(170px,.75fr) minmax(220px,1.25fr) minmax(180px,.8fr) minmax(180px,.8fr)} .pos-sale-fields .smart-select{width:100%;position:relative;z-index:30} .pos-sale-fields .smart-select.open{z-index:10050} .pos-sale-fields .smart-select-menu{z-index:10051!important} .pos-items-panel{position:relative;z-index:10;overflow:visible!important} .pos-product-search{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;margin-bottom:12px} .pos-search-box{position:relative;min-width:0} .pos-search-box>i{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:12px;pointer-events:none;z-index:2} .pos-search-box input{width:100%;padding-left:36px;padding-right:38px} .pos-search-clear{position:absolute;right:7px;top:50%;transform:translateY(-50%);width:30px;height:30px;border:0;background:transparent;color:var(--muted);border-radius:8px;cursor:pointer} .pos-search-clear:hover{background:var(--surface-hover);color:var(--primary)} .pos-product-suggestions{display:none;position:absolute;left:0;right:0;top:calc(100% + 7px);background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-lg);padding:6px;z-index:10060;max-height:360px;overflow:auto} .pos-product-suggestion{width:100%;display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:9px;padding:9px;border:0;background:transparent;color:var(--text);text-align:left;border-radius:9px;cursor:pointer} .pos-product-suggestion:hover{background:var(--surface-hover)} .pos-product-suggestion b{display:block;font-size:11px;line-height:1.3} .pos-product-suggestion small{display:block;margin-top:2px;color:var(--muted);font-size:9px} .pos-product-suggestion strong{font-size:10px;color:var(--primary);white-space:nowrap} .pos-lines{border-radius:12px;background:var(--surface);box-shadow:none;overflow:auto} .pos-sale-table{min-width:880px;width:100%;border-collapse:separate;border-spacing:0} .pos-sale-table th{padding:11px 10px;background:var(--body-bg);color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.35px;white-space:nowrap;border-bottom:1px solid var(--border)} .pos-sale-table td{padding:11px 10px;border-bottom:1px solid var(--border);vertical-align:middle;font-size:11px;color:var(--text)} .pos-sale-table tbody tr:last-child td{border-bottom:0} .pos-sale-table tbody tr:hover{background:var(--surface-hover)} .pos-product-cell{display:flex;align-items:center;gap:9px;min-width:190px} .pos-product-cell>b,.pos-product-cell b{display:block;font-size:11px} .pos-product-cell small{display:block;color:var(--muted);font-size:9px;margin-top:2px} .pos-product-cell .cart-select{margin-top:6px;max-width:190px;height:30px} .pos-qty{display:grid;grid-template-columns:28px 70px 28px;gap:5px;align-items:center} .pos-qty button{height:30px;width:28px;border:1px solid var(--border);background:var(--surface-hover);color:var(--primary);border-radius:7px;cursor:pointer;font-weight:700} .pos-qty input{min-width:0;text-align:center;height:30px;padding:0 7px} .pos-discount{display:grid;grid-template-columns:minmax(70px,1fr) 48px;gap:5px;min-width:130px} .pos-discount input,.pos-discount select{height:30px;padding:0 7px} .pos-sale-table .line-remove{width:32px;height:32px;border:1px solid color-mix(in srgb,var(--danger) 30%,var(--border));background:var(--surface);color:var(--danger);border-radius:8px;cursor:pointer} .pos-sale-table .line-remove:hover{background:var(--surface-hover)} .pos-sale-table .empty{height:170px;text-align:center;color:var(--muted)} .pos-sale-table .empty i{display:block;font-size:25px;margin-bottom:8px;color:var(--border-strong)} .pos-sale-table .empty div{font-weight:700;color:var(--text);margin-bottom:3px} .pos-sale-table .empty small{font-size:10px} .pos-sale-form{display:block} .pos-sale-bottom{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(330px,.85fr);gap:16px;align-items:start} .pos-sale-options{position:relative;z-index:3} .pos-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px 12px} .pos-form-grid>label{position:relative;display:grid;gap:7px;font-size:11px;font-weight:700;color:var(--text)} .pos-form-grid .full{grid-column:1/-1} .pos-credit-note{margin-top:13px;padding-top:12px;border-top:1px solid var(--border);font-size:10px;color:var(--muted)} .pos-sale-summary{position:sticky;top:84px;padding:18px} .pos-summary-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid var(--border);font-size:11px} .pos-summary-row span{color:var(--text)} .pos-summary-row b{color:var(--text);font-weight:700;white-space:nowrap} .pos-summary-total{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 0 12px;border-top:2px solid var(--border-strong);font-size:14px;font-weight:800} .pos-summary-total strong{font-size:19px;color:var(--text-strong);white-space:nowrap} .pos-sale-summary .checkout{margin-top:12px} .pos-cancel{width:100%;margin-top:8px} .pos-sale-page .method-control{grid-template-columns:minmax(0,1fr) 38px 38px;gap:7px} .pos-sale-page .method-control .smart-select{min-width:0} .pos-sale-page .method-control .inline-icon-btn{width:38px;height:38px} .pos-sale-page .method-control .smart-select-button{height:42px} .pos-sale-page .smart-select-menu{max-height:320px} @media(max-width:1100px){ .pos-sale-fields{grid-template-columns:1fr 1fr} .pos-sale-fields.document-number-fields{grid-template-columns:1fr 1fr} .pos-sale-fields>label:first-child{grid-column:1/-1} .pos-sale-bottom{grid-template-columns:1fr} .pos-sale-summary{position:relative;top:auto} } @media(max-width:760px){ .pos-sale-page{gap:12px} .pos-sale-header .panel-head{align-items:flex-start} .pos-sale-fields{grid-template-columns:1fr} .pos-sale-fields.document-number-fields{grid-template-columns:1fr} .pos-sale-fields>label:first-child{grid-column:auto} .pos-product-search{grid-template-columns:1fr} .pos-product-search>.secondary-btn{width:100%} .pos-sale-options{padding:14px} .pos-form-grid{grid-template-columns:1fr} .pos-form-grid .full{grid-column:auto} .pos-sale-summary{padding:14px} .pos-summary-total strong{font-size:18px} .pos-qty{grid-template-columns:27px 58px 27px} } @media(max-width:480px){ .pos-sale-header,.pos-items-panel,.pos-sale-options,.pos-sale-summary{border-radius:12px} .pos-sale-page .panel-head>.secondary-btn{width:100%} .pos-product-suggestions{max-height:300px} } /* Consistent responsive report/invoice printing and browser preview. */ @media print{ body:has(.reports-hero){background:var(--surface)!important} body:has(.reports-hero) .app-header,body:has(.reports-hero) .sidebar,body:has(.reports-hero) .nav-overlay,body:has(.reports-hero) .flash,body:has(.reports-hero) .notice,body:has(.reports-hero) .reports-hero,body:has(.reports-hero) .report-catalog,body:has(.reports-hero) .report-filters,body:has(.reports-hero) .report-actions{display:none!important} body:has(.reports-hero) .app-main{margin:0!important} body:has(.reports-hero) .page-content{padding:0!important;max-width:none!important} body:has(.reports-hero) .panel{border:0!important;box-shadow:none!important;padding:0!important} } /* Final invoice print orientation. Standard invoices are A4 portrait; landscape can be requested with ?orientation=landscape without changing the invoice UI. */ @media print{ @page{size:A4 portrait;margin:0} body.invoice-orientation-landscape:not(.thermal-invoice-page) .invoice-sheet, body.invoice-orientation-landscape:not(.thermal-invoice-page) .invoice-preview-mode .invoice-sheet{width:297mm!important;min-height:210mm!important} @page{size:A4 portrait} } @media print{ body.invoice-orientation-landscape:not(.thermal-invoice-page){page:invoice-landscape} body.invoice-orientation-landscape:not(.thermal-invoice-page) .invoice-sheet{max-width:none} } @page invoice-landscape{size:A4 landscape;margin:0} @media print{ .thermal-invoice-page{page:auto} .thermal-invoice-page .invoice-sheet{max-width:80mm!important} } /* Final consistency + functional fixes */ [hidden]{display:none!important} .readonly-field input[readonly]{background:var(--surface-soft);color:var(--muted);cursor:not-allowed} .pos-discount{display:grid;grid-template-columns:minmax(70px,1fr) auto;gap:6px;align-items:center;min-width:150px} .discount-type-toggle{display:inline-grid;grid-template-columns:1fr 1fr;height:30px;border:1px solid var(--border);border-radius:8px;overflow:hidden;background:var(--surface)} .discount-type-toggle button{min-width:32px;border:0;border-right:1px solid var(--border);background:var(--surface);color:var(--muted);font:inherit;font-size:11px;font-weight:700;cursor:pointer} .discount-type-toggle button:last-child{border-right:0} .discount-type-toggle button:hover{background:var(--surface-hover);color:var(--primary)} .discount-type-toggle button.active{background:var(--primary-soft);color:var(--primary);box-shadow:inset 0 -2px 0 var(--primary)} .stock-number{font-variant-numeric:tabular-nums;color:var(--text);white-space:nowrap} .pos-sale-table .stock-number{font-weight:600} .expense-page .field-with-action,.quick-create-modal .field-with-action{position:relative} .expense-page .field-with-action .field-action,.quick-create-modal .field-with-action .field-action{position:absolute;right:0;top:-2px;z-index:3} .expense-page .field-with-action select,.quick-create-modal .field-with-action select{padding-right:48px} .smart-select-menu{overflow-x:hidden} .report-table-wrap{overflow-x:auto;overflow-y:visible} .report-table-wrap table{min-width:720px} @media print{ body:has(.reports-hero){color:var(--text)!important;background:var(--surface)!important;-webkit-print-color-adjust:exact;print-color-adjust:exact} body:has(.reports-hero) .report-metrics, body:has(.reports-hero) .report-section-head, body:has(.reports-hero) .report-table-wrap, body:has(.reports-hero) .report-table-wrap table, body:has(.reports-hero) .report-table-wrap tbody, body:has(.reports-hero) .report-table-wrap tr, body:has(.reports-hero) .report-table-wrap th, body:has(.reports-hero) .report-table-wrap td{display:revert!important;visibility:visible!important} body:has(.reports-hero) .report-table-wrap{overflow:visible!important;width:100%!important} body:has(.reports-hero) .report-table-wrap table{width:100%!important;min-width:0!important;color:var(--text)!important} body:has(.reports-hero) .report-table-wrap th,body:has(.reports-hero) .report-table-wrap td{color:var(--text)!important;background:transparent!important} body:has(.reports-hero) .report-section-head{break-after:avoid} } /* 58mm thermal invoices: true paper width, compact readable columns and no horizontal overflow. */ .template-thermal58{width:58mm;max-width:58mm;padding:4mm;box-shadow:none;font-size:8px} .template-thermal58 .invoice-head{display:block;text-align:center;border-bottom:1px dashed var(--text);padding-bottom:6px} .template-thermal58 .invoice-logo{margin:0 auto 4px;width:28px;height:28px;border-radius:8px} .template-thermal58 .invoice-head h1{font-size:13px;margin:3px 0} .template-thermal58 .invoice-head p{font-size:7px;line-height:1.35} .template-thermal58 .invoice-meta{align-items:center;text-align:center;margin-top:5px;gap:2px} .template-thermal58 .invoice-meta span{font-size:7px} .template-thermal58 .invoice-meta strong{font-size:10px;margin:2px 0} .template-thermal58 .invoice-meta small{font-size:7px} .template-thermal58 .bill-to{display:block;padding:6px 0;border-bottom:1px dashed var(--muted)} .template-thermal58 .bill-to>div+div{margin-top:5px} .template-thermal58 .bill-to small{font-size:7px} .template-thermal58 .bill-to strong,.template-thermal58 .bill-to span{font-size:7px;overflow-wrap:anywhere} .template-thermal58 .invoice-table{width:100%;min-width:0;table-layout:fixed;font-size:7px;margin-top:7px} .template-thermal58 .invoice-table th,.template-thermal58 .invoice-table td{padding:3px 1px;white-space:normal;overflow-wrap:anywhere} .template-thermal58 .invoice-table th:nth-child(1){width:44%} .template-thermal58 .invoice-table th:nth-child(2){width:14%} .template-thermal58 .invoice-table th:nth-child(3){width:18%} .template-thermal58 .invoice-table th:nth-child(4){width:24%} .template-thermal58 .invoice-bottom{display:block;margin-top:8px} .template-thermal58 .terms{max-width:100%;margin-bottom:7px;font-size:7px} .template-thermal58 .invoice-totals{width:100%;font-size:7px} .template-thermal58 .invoice-totals div{padding:3px 0} .template-thermal58 .invoice-totals .grand{font-size:10px} .template-thermal58 .invoice-totals .grand strong{font-size:11px} .thermal-invoice-page.template-thermal58 .invoice-sheet{width:58mm;max-width:58mm} @media print{ .thermal-invoice-page .template-thermal58.invoice-sheet{width:58mm!important;max-width:58mm!important;padding:3mm!important;margin:0!important} .thermal-invoice-page .template-thermal58 .invoice-table{min-width:0!important;width:100%!important} } @media(max-width:680px){ .pos-sale-table{min-width:760px} .pos-sale-page .panel{overflow:visible} .pos-product-search{grid-template-columns:1fr} .pos-product-search>.secondary-btn{width:100%} .pos-sale-bottom{grid-template-columns:1fr} .pos-sale-summary{position:static} .report-table-wrap table{min-width:680px} } /* V14 — 58mm thermal invoice precision layout */ .template-thermal58 .invoice-table{table-layout:fixed!important;width:100%!important;min-width:0!important} .template-thermal58 .invoice-table th,.template-thermal58 .invoice-table td{vertical-align:top;line-height:1.25;word-break:normal;overflow-wrap:anywhere} .template-thermal58 .invoice-table th:not(:first-child),.template-thermal58 .invoice-table td:not(:first-child){white-space:nowrap;overflow-wrap:normal} .template-thermal58 .invoice-table th:nth-child(1){width:50%} .template-thermal58 .invoice-table th:nth-child(2){width:14%} .template-thermal58 .invoice-table th:nth-child(3){width:18%} .template-thermal58 .invoice-table th:nth-child(4){width:18%} .template-thermal58 .invoice-table:has(.invoice-sku-col) th:nth-child(1){width:36%} .template-thermal58 .invoice-table:has(.invoice-sku-col) th:nth-child(2){width:18%} .template-thermal58 .invoice-table:has(.invoice-sku-col) th:nth-child(3){width:12%} .template-thermal58 .invoice-table:has(.invoice-sku-col) th:nth-child(4){width:17%} .template-thermal58 .invoice-table:has(.invoice-sku-col) th:nth-child(5){width:17%} .template-thermal58 .invoice-sku-col{font-size:6.5px!important} .template-thermal58 .invoice-table td:first-child{font-weight:600} .template-thermal58 .invoice-bottom{display:block!important} .template-thermal58 .invoice-totals{width:100%!important} .template-thermal58 .invoice-totals div{display:flex;justify-content:space-between;align-items:baseline;gap:8px} @media print{ .thermal-invoice-page .template-thermal58.invoice-sheet{width:58mm!important;max-width:58mm!important;padding:3mm!important} .thermal-invoice-page .template-thermal58 .invoice-table{table-layout:fixed!important;width:100%!important;min-width:0!important} .thermal-invoice-page .template-thermal58 .invoice-table th,.thermal-invoice-page .template-thermal58 .invoice-table td{color:#111!important} } /* -------------------------------------------------------------------------- V15 UI polish — shared modal controls and expense category selector -------------------------------------------------------------------------- */ .modal-close{display:grid;place-items:center;transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s ease} .modal-close:hover{background:var(--surface-hover);border-color:var(--primary-border);color:var(--primary);transform:translateY(-1px)} .modal-box .form-actions{justify-content:center;align-items:center;padding-top:6px} .modal-box .form-actions .primary-btn,.modal-box .form-actions .secondary-btn{min-width:130px} .field-control{display:grid;grid-template-columns:minmax(0,1fr) 38px;gap:7px;align-items:stretch} .field-control select{min-width:0} .field-control .inline-icon-btn{width:38px;height:38px;display:grid;place-items:center;align-self:stretch} .expense-page .field-with-action,.quick-create-modal .field-with-action{position:static} .expense-page .field-with-action .field-action,.quick-create-modal .field-with-action .field-action{position:static} /* Keep payment-method dropdowns above adjacent cards/fields instead of being clipped. */ .method-control{position:relative!important;z-index:50!important;overflow:visible!important;} .method-control:has(.smart-select.open){z-index:100000!important;} .method-control:has(.smart-select.open) .smart-select{z-index:100001!important;} .method-control:has(.smart-select.open) .smart-select-menu{z-index:100002!important;max-height:min(320px,calc(100dvh - 120px));} .cart-panel:has(.method-control .smart-select.open){z-index:100000!important;overflow:visible!important;} .modal:has(.method-control .smart-select.open){z-index:20000!important;} .modal-box:has(.method-control .smart-select.open){z-index:20001!important;overflow:visible!important;} /* Payment-method smart selects stay visually attached to their field. Only controls inside a scrollable modal use viewport positioning. */ .method-control .smart-select.open:not(.smart-select-fixed) .smart-select-menu{position:absolute!important;left:0!important;right:0!important;top:calc(100% + 7px)!important;width:auto!important;z-index:1000000!important;max-height:min(260px,calc(100dvh - 120px));overflow:auto;} .method-control .smart-select.open.smart-select-fixed .smart-select-menu{position:fixed!important;right:auto!important;z-index:1000000!important;max-height:min(320px,calc(100dvh - 24px));overflow:auto;} .method-control:has(.smart-select.open){z-index:1000001!important;} .modal:has(.method-control .smart-select.open),.modal-box:has(.method-control .smart-select.open){overflow:visible!important;} /* ProBill Barcode Print Studio */ .barcode-template-source{display:none!important} .barcode-page{overflow:visible!important} .barcode-page-head{align-items:flex-start} .barcode-page-head h2{margin:3px 0 4px} .barcode-left-column{min-width:0} .barcode-workspace{display:grid;grid-template-columns:minmax(620px,1.65fr) minmax(420px,.9fr);gap:20px;align-items:start} .barcode-card,.barcode-preview-card{border:1px solid var(--border);border-radius:14px;background:var(--surface);box-shadow:var(--shadow-sm);padding:18px} .barcode-settings-card{position:sticky;top:88px} .barcode-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 12px} .barcode-controls .full{grid-column:1/-1} .full-width{width:100%;margin-top:9px;justify-content:center} .label-design-field>span{display:block;margin-bottom:6px}.barcode-template-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.barcode-template-card{min-width:0;border:1px solid var(--border);border-radius:10px;background:var(--surface);padding:8px 6px;cursor:pointer;text-align:center;color:var(--text);transition:.15s ease}.barcode-template-card:hover{border-color:var(--primary-border);background:var(--surface-hover)}.barcode-template-card.active{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary-ring);background:var(--primary-soft)}.barcode-template-card strong,.barcode-template-card small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.barcode-template-card strong{font-size:9px;margin-top:5px}.barcode-template-card small{font-size:8px;color:var(--muted);margin-top:2px}.barcode-template-mini{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;height:48px;border:1px solid var(--border);border-radius:7px;background:#fff;color:#111}.barcode-template-mini i{font-size:18px;line-height:1}.barcode-template-mini b{font-size:6px}.barcode-template-mini em{font-style:normal;font-size:6px;font-weight:800}.barcode-mini-2 i{font-size:13px}.barcode-mini-2 em{align-self:flex-end;margin-right:5px}.barcode-mini-3{justify-content:flex-end;padding-bottom:5px}.barcode-mini-3 i{font-size:22px}.barcode-mini-4{justify-content:space-between;padding:5px}.barcode-mini-4 b{align-self:flex-start}.barcode-mini-5 i{font-size:20px}.barcode-mini-5 b{font-size:7px;font-weight:800}.barcode-mini-6 i{font-size:16px}.barcode-mini-6 em{display:none}.barcode-mini-7{gap:0}.barcode-mini-7 i{font-size:14px}.barcode-mini-8{border-radius:11px}.barcode-mini-8 i{font-size:17px}.barcode-print-settings{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:7px;padding-top:10px;border-top:1px solid var(--border)}.barcode-settings-group{grid-column:1/-1;min-width:0}.barcode-settings-group-title{display:block;font-size:12px;font-weight:800;color:var(--text);line-height:1.25;margin-bottom:8px}.barcode-margin-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.barcode-margin-grid .compact-field{min-width:0;font-size:12px}.barcode-layout-status{display:flex;align-items:flex-start;gap:7px;min-height:18px;margin-top:9px;font-size:9px;line-height:1.45}.barcode-layout-status.is-valid{color:var(--success,#16803c)}.barcode-layout-status.is-invalid{color:var(--danger,#dc2626)}.barcode-layout-status i{margin-top:2px} .barcode-print-settings .compact-field{margin:0} .barcode-products-card{margin-top:16px} .barcode-products-head{gap:12px;align-items:flex-start} .barcode-products-head .panel-head{margin:0} .barcode-selection-actions{display:flex;gap:8px;align-items:center;flex:0 0 auto} .barcode-selection-actions .secondary-btn{white-space:nowrap} .barcode-product-search{width:100%;height:40px;margin:10px 0;border:1px solid var(--border-strong);border-radius:10px;padding:0 12px;background:var(--surface);color:var(--text);outline:0} .barcode-product-search:focus{border-color:var(--primary-border-strong);box-shadow:0 0 0 3px var(--primary-ring)} .barcode-product-list{display:grid;gap:7px;max-height:430px;overflow:auto;padding:2px 2px 3px 0} .barcode-product-choice{position:relative;display:grid;grid-template-columns:24px 32px minmax(0,1fr) 72px;align-items:center;gap:9px;min-height:66px;padding:8px 9px;border:1px solid var(--border);border-radius:11px;background:var(--surface);cursor:pointer;transition:.15s ease} .barcode-product-choice:hover{border-color:var(--primary-border);background:var(--surface-hover)} .barcode-product-choice.selected{border-color:var(--primary-border-strong);background:var(--primary-soft);box-shadow:0 0 0 2px var(--primary-ring)} .barcode-product-check{position:absolute;opacity:0;pointer-events:none} .barcode-choice-box{width:21px;height:21px;border:1px solid var(--border-strong);border-radius:6px;display:grid;place-items:center;color:transparent;background:var(--surface)} .barcode-product-choice.selected .barcode-choice-box{background:var(--primary);border-color:var(--primary);color:var(--on-primary)} .barcode-choice-box i{font-size:10px} .barcode-product-choice .product-avatar{width:32px;height:32px;min-width:32px;border-radius:9px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary)} .barcode-product-copy{min-width:0} .barcode-product-copy b,.barcode-product-copy small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .barcode-product-copy b{font-size:11px}.barcode-product-copy small{font-size:9px;color:var(--muted);margin-top:3px} .label-qty-wrap{display:grid;gap:3px;justify-items:center;cursor:default} .label-qty-wrap small{font-size:8px;font-weight:800;color:var(--muted);letter-spacing:.5px} .label-qty{width:72px;height:34px;border:1px solid var(--border-strong);border-radius:8px;background:var(--surface);color:var(--text);text-align:center;font-weight:800;outline:0} .label-qty:focus{border-color:var(--primary-border-strong);box-shadow:0 0 0 3px var(--primary-ring)} .barcode-preview-card{min-width:0} .preview-badge{font-size:9px;font-weight:800;color:var(--primary);background:var(--primary-soft);border:1px solid var(--primary-border);border-radius:999px;padding:6px 9px;white-space:nowrap} .barcode-preview-canvas{min-height:420px;border:1px solid var(--border);border-radius:12px;background:var(--surface-soft);display:flex;align-items:center;justify-content:center;overflow:hidden;padding:22px} .barcode-test-preview{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:370px} .barcode-test-sheet{display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid #d9dde5;box-shadow:0 12px 30px rgba(15,23,42,.10);box-sizing:border-box;overflow:hidden;transform-origin:center center} .barcode-label{box-sizing:border-box;background:#fff;color:#111827;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5mm;overflow:hidden;text-align:center;border:0} .barcode-label .bc-name{font-size:10px;font-weight:800;line-height:1.15;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .barcode-label .barcode-bars{width:86%;height:28%;display:flex;align-items:center;justify-content:center} .barcode-label .barcode-svg{display:block;width:100%;height:100%;max-width:100%} .barcode-label .bc-code{font-size:8px;line-height:1.1;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#111827} .barcode-label .bc-price{font-size:9px;font-weight:800;align-self:flex-end;line-height:1} .barcode-label.barcode-style-1{justify-content:center}.barcode-label.barcode-style-2{gap:2.2mm}.barcode-label.barcode-style-2 .barcode-bars{height:34%}.barcode-label.barcode-style-3{gap:1mm}.barcode-label.barcode-style-3 .bc-name{font-size:9px}.barcode-label.barcode-style-3 .barcode-bars{height:42%}.barcode-label.barcode-style-4{justify-content:space-between}.barcode-label.barcode-style-4 .barcode-bars{height:35%;width:90%}.barcode-label.barcode-style-5{gap:2.2mm}.barcode-label.barcode-style-5 .bc-name{font-size:9px;line-height:1.15;max-width:94%;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.barcode-label.barcode-style-5 .barcode-bars{height:36%;width:88%}.barcode-label.barcode-style-6{gap:1mm}.barcode-label.barcode-style-6 .bc-name{font-size:8px}.barcode-label.barcode-style-6 .bc-code{font-size:7px}.barcode-label.barcode-style-7{gap:.8mm}.barcode-label.barcode-style-7 .barcode-bars{height:46%}.barcode-label.barcode-style-8{gap:1.5mm}.barcode-label.barcode-style-8 .barcode-bars{height:30%} .barcode-empty{display:grid;place-items:center;text-align:center;color:var(--muted);font-size:11px;gap:8px}.barcode-empty i{font-size:32px;color:var(--primary)} .barcode-preview-footer{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;padding-top:10px;color:var(--muted);font-size:9px} @media(max-width:1200px){.barcode-workspace{grid-template-columns:minmax(420px,1.15fr) minmax(360px,1fr)}} @media(max-width:900px){.barcode-workspace{grid-template-columns:1fr}.barcode-settings-card{position:static}.barcode-preview-canvas{min-height:430px}.barcode-test-preview{min-height:380px}} @media(max-width:600px){.barcode-margin-grid,.barcode-gap-grid,.barcode-padding-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.barcode-settings-group{grid-column:auto}.barcode-template-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.barcode-card,.barcode-preview-card{padding:13px}.barcode-controls{grid-template-columns:1fr}.barcode-controls .full{grid-column:auto}.barcode-print-settings{grid-template-columns:1fr}.barcode-products-head{display:flex;flex-direction:column}.barcode-selection-actions{width:100%;justify-content:space-between}.barcode-product-choice{grid-template-columns:22px 30px minmax(0,1fr) 62px;gap:6px}.barcode-product-choice .product-avatar{width:30px;height:30px;min-width:30px}.label-qty{width:62px}.barcode-preview-canvas{padding:12px;min-height:430px}.barcode-test-preview{min-height:390px}.barcode-preview-footer{font-size:8px}} @media print{ @page{margin:0} html,body{margin:0!important;padding:0!important;background:#fff!important} body.barcode-print-window{font-family:Arial,sans-serif} .barcode-print-window .barcode-print-sheet{ position:relative!important; display:block!important; box-sizing:border-box!important; width:var(--sheet-width)!important; height:var(--sheet-height)!important; margin:0!important; padding:0!important; background:#fff!important; break-after:page!important; page-break-after:always!important; overflow:hidden!important; print-color-adjust:exact!important; -webkit-print-color-adjust:exact!important; } .barcode-print-window .barcode-print-sheet:last-child{break-after:auto!important;page-break-after:auto!important} .barcode-print-window .barcode-print-label{ position:absolute!important; box-sizing:border-box!important; width:var(--label-width)!important; height:var(--label-height)!important; min-height:var(--label-height)!important; margin:0!important; background:#fff!important; color:#000!important; break-inside:avoid!important; page-break-inside:avoid!important; overflow:hidden!important; print-color-adjust:exact!important; -webkit-print-color-adjust:exact!important; } .barcode-print-window .barcode-print-label .barcode-svg rect{fill:#000!important} } /* Quotation workspace */ .quotation-page{display:grid;gap:16px;min-width:0}.quotation-header,.quotation-items,.quotation-options,.quotation-summary,.quotation-manage-page{border-radius:16px}.quotation-fields{display:grid;grid-template-columns:minmax(220px,1.4fr) repeat(2,minmax(180px,.8fr));gap:12px}.quotation-fields label{display:grid;gap:6px}.quotation-items .panel-head{margin-bottom:12px}.quotation-lines{border-radius:12px}.quotation-cell-input{width:100%;min-width:76px;height:32px;padding:0 8px}.quotation-cell-input.qty{max-width:90px}.quotation-bottom{display:grid;grid-template-columns:minmax(0,1fr) minmax(330px,.45fr);gap:16px;align-items:start}.quotation-options textarea{min-height:150px}.quotation-summary{position:sticky;top:78px}.quotation-summary label{display:grid;gap:6px;margin:12px 0}.quotation-discount{display:grid;grid-template-columns:1fr 58px;gap:6px}.quotation-actions{display:grid;gap:8px;margin-top:14px}.quotation-actions>*{width:100%;justify-content:center}.quotation-filter-bar{display:grid;grid-template-columns:minmax(220px,1.5fr) repeat(3,minmax(130px,.7fr)) auto;gap:10px;padding:14px;margin-bottom:14px;background:var(--body-bg);border:1px solid var(--border);border-radius:14px;align-items:end}.quotation-filter-bar label{display:grid;gap:5px}.quotation-filter-bar button{height:40px}.quotation-view{display:grid;gap:14px}.quotation-view-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}.quotation-view-actions form{margin:0}.quotation-sheet{background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-lg);border-radius:18px;padding:38px;max-width:980px;margin:0 auto;width:100%;color:var(--text)}.quotation-sheet-head{display:flex;justify-content:space-between;gap:30px;padding-bottom:24px;border-bottom:1px solid var(--border)}.quotation-logo{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--primary);color:var(--on-primary);font-weight:800;font-size:20px;margin-bottom:10px}.quotation-sheet h1{margin:0;font-size:23px}.quotation-sheet-head p{margin:7px 0 0;color:var(--muted);font-size:11px;line-height:1.6}.quotation-meta{text-align:right;display:grid;align-content:start;gap:4px}.quotation-meta span{font-size:9px;font-weight:800;letter-spacing:1.5px;color:var(--primary)}.quotation-meta strong{font-size:20px}.quotation-meta small{color:var(--muted)}.quotation-bill-to{display:flex;justify-content:space-between;gap:20px;padding:22px 0}.quotation-bill-to>div{display:grid;gap:4px}.quotation-bill-to small{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px}.quotation-bill-to strong{font-size:13px}.quotation-bill-to span{font-size:10px;color:var(--muted)}.quotation-table{width:100%;border-collapse:collapse}.quotation-table th{background:var(--body-bg);font-size:9px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);padding:10px;border-bottom:1px solid var(--border);text-align:left}.quotation-table td{padding:11px 10px;border-bottom:1px solid var(--border);font-size:10px}.quotation-sheet-bottom{display:grid;grid-template-columns:1fr 290px;gap:30px;margin-top:22px}.quotation-note strong{font-size:11px}.quotation-note p{font-size:10px;color:var(--muted);line-height:1.7}.quotation-totals{display:grid;gap:8px}.quotation-totals>div{display:flex;justify-content:space-between;gap:20px;font-size:11px}.quotation-totals .grand{border-top:2px solid var(--text);padding-top:10px;margin-top:4px}.quotation-totals .grand strong{font-size:18px}.numbering-settings{align-items:start}.numbering-settings select{font-weight:600} @media(max-width:900px){.quotation-fields,.quotation-bottom,.quotation-sheet-bottom{grid-template-columns:1fr}.quotation-fields.document-number-fields{grid-template-columns:1fr}.quotation-summary{position:static}.quotation-filter-bar{grid-template-columns:1fr 1fr}.quotation-filter-bar label:first-child{grid-column:1/-1}.quotation-filter-bar button{grid-column:1/-1;width:100%}.quotation-sheet{padding:24px}.quotation-table{min-width:760px}.quotation-table-wrap{overflow:auto}} @media(max-width:680px){.quotation-fields,.quotation-filter-bar{grid-template-columns:1fr}.quotation-filter-bar label:first-child{grid-column:auto}.quotation-filter-bar button{grid-column:auto}.quotation-sheet-head,.quotation-bill-to{display:grid}.quotation-meta{text-align:left}.quotation-sheet{padding:18px;border-radius:12px}.quotation-view-actions>*{flex:1}.quotation-view-actions form{flex:1}.quotation-view-actions button,.quotation-view-actions a{width:100%;justify-content:center}.quotation-table{min-width:700px}.quotation-bottom{gap:12px}} @media print{body:has(.quotation-sheet){background:#fff!important}.quotation-view-actions{display:none!important}.quotation-sheet{box-shadow:none;border:0;border-radius:0;max-width:none;padding:0}.quotation-view{display:block}.quotation-table th{background:#f3f4f6!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}.quotation-sheet-head{break-inside:avoid}.quotation-sheet-bottom{break-inside:avoid}} /* Barcode Studio print-preview window */ .barcode-print-window{ margin:0; min-height:100vh; background:#eef2f7; color:#172033; font-family:Arial,sans-serif; } .barcode-print-toolbar{ position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 20px; background:#fff; border-bottom:1px solid #dfe4ec; box-shadow:0 3px 14px rgba(15,23,42,.08); } .barcode-print-toolbar-copy{display:flex;align-items:center;gap:11px;min-width:0} .barcode-print-toolbar-icon{ width:38px;height:38px;display:grid;place-items:center; border-radius:10px;background:#eef4ff;color:#2563eb;font-size:16px;flex:0 0 auto; } .barcode-print-toolbar-title{font-size:14px;font-weight:800;line-height:1.2} .barcode-print-toolbar-meta{margin-top:3px;font-size:10px;color:#6b7280;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .barcode-print-toolbar-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto} .barcode-preview-skip-labels{display:grid;grid-template-columns:auto 58px;grid-template-rows:auto auto;align-items:center;gap:2px 7px;margin:0 2px 0 0;font-size:9px;font-weight:750;color:#6b7280;white-space:nowrap} .barcode-preview-skip-labels span{grid-column:1/-1;font-size:9px;font-weight:800;color:#172033;line-height:1} .barcode-preview-skip-labels input{width:58px;height:38px;box-sizing:border-box;border:1px solid #d7deea;border-radius:9px;background:#fff;color:#172033;text-align:center;font:700 12px/38px Arial,sans-serif;padding:0 6px;outline:0} .barcode-preview-skip-labels input:focus{border-color:#2563eb;box-shadow:0 0 0 2px rgba(37,99,235,.14)} .barcode-preview-skip-labels small{grid-column:1/-1;font-size:8px;color:#6b7280;line-height:1.15;white-space:normal;max-width:128px} .barcode-print-toolbar button{ min-height:38px;padding:0 15px;border-radius:9px;border:1px solid #d7deea; background:#fff;color:#172033;font:700 12px Arial,sans-serif;cursor:pointer; display:inline-flex;align-items:center;justify-content:center;gap:7px; } .barcode-print-toolbar .barcode-print-action{ border-color:#2563eb;background:#2563eb;color:#fff;box-shadow:0 5px 12px rgba(37,99,235,.18); } .barcode-print-toolbar button:hover{filter:brightness(.98)} .barcode-print-document{ display:flex;flex-direction:column;align-items:center;gap:18px; padding:24px;min-height:calc(100vh - 67px);box-sizing:border-box; } .barcode-print-window .barcode-print-sheet{ position:relative; box-sizing:border-box; width:var(--sheet-width); height:var(--sheet-height); min-width:var(--sheet-width); min-height:var(--sheet-height); margin:0; padding:0; background:#fff; overflow:hidden; box-shadow:0 8px 28px rgba(15,23,42,.14); border:1px solid #d8dee8; break-after:page; page-break-after:always; } .barcode-print-window .barcode-print-sheet:last-child{break-after:auto;page-break-after:auto} .barcode-print-window .barcode-print-label{ position:absolute; box-sizing:border-box; width:var(--label-width); height:var(--label-height); min-height:var(--label-height); margin:0; background:#fff; color:#000; overflow:hidden; } .barcode-print-window .barcode-print-label .barcode-svg rect{fill:#000!important} @media(max-width:760px){ .barcode-page-head .page-actions{width:100%;justify-content:flex-end} } @media(max-width:480px){ .barcode-page-head .page-actions{align-items:stretch} .barcode-page-head .page-actions .primary-btn{flex:1 1 100%} } @media(max-width:700px){ .barcode-print-toolbar{align-items:flex-start;flex-direction:column} .barcode-print-toolbar-actions{width:100%} .barcode-print-toolbar-actions>*{flex:1 1 140px;min-width:0} .barcode-print-document{padding:14px;align-items:flex-start;overflow:auto} } @media print{ .barcode-print-toolbar{display:none!important} .barcode-print-window{background:#fff!important;min-height:0!important} .barcode-print-document{display:block!important;padding:0!important;min-height:0!important} .barcode-print-window .barcode-print-sheet{ box-shadow:none!important; border:0!important; margin:0!important; width:var(--sheet-width)!important; height:var(--sheet-height)!important; min-width:var(--sheet-width)!important; min-height:var(--sheet-height)!important; overflow:hidden!important; print-color-adjust:exact!important; -webkit-print-color-adjust:exact!important; } .barcode-print-window .barcode-print-sheet:last-child{break-after:auto!important;page-break-after:auto!important} .barcode-print-window .barcode-print-label{ width:var(--label-width)!important; height:var(--label-height)!important; min-height:var(--label-height)!important; print-color-adjust:exact!important; -webkit-print-color-adjust:exact!important; } } @page barcode-a4-40{size:A4 portrait;margin:0} @page barcode-a4-30{size:A4 portrait;margin:0} @page barcode-a4-24{size:A4 portrait;margin:0} @page barcode-a4-20{size:A4 portrait;margin:0} @page barcode-a4-18{size:A4 portrait;margin:0} @page barcode-a4-14{size:A4 portrait;margin:0} @page barcode-a4-12{size:A4 portrait;margin:0} @page barcode-a4-10{size:A4 portrait;margin:0} @page barcode-novajet-01p{size:A4 portrait;margin:0} @page barcode-novajet-01p-288{size:A4 portrait;margin:0} @page barcode-novajet-02l{size:A4 portrait;margin:0} @page barcode-novajet-04p{size:A4 portrait;margin:0} @page barcode-novajet-06l{size:A4 portrait;margin:0} @page barcode-novajet-08l{size:A4 portrait;margin:0} @page barcode-novajet-08la{size:A4 portrait;margin:0} @page barcode-novajet-12l{size:A4 portrait;margin:0} @page barcode-novajet-15l{size:A4 portrait;margin:0} @page barcode-novajet-16l{size:A4 portrait;margin:0} @page barcode-novajet-18l{size:A4 portrait;margin:0} @page barcode-novajet-21l{size:A4 portrait;margin:0} @page barcode-novajet-22e{size:A4 portrait;margin:0} @page barcode-novajet-24l{size:A4 portrait;margin:0} @page barcode-novajet-30e{size:A4 portrait;margin:0} @page barcode-novajet-30p{size:A4 portrait;margin:0} @page barcode-novajet-32p{size:A4 portrait;margin:0} @page barcode-novajet-40l{size:A4 portrait;margin:0} @page barcode-novajet-40p{size:A4 portrait;margin:0} @page barcode-novajet-48l{size:A4 portrait;margin:0} @page barcode-novajet-56l{size:A4 portrait;margin:0} @page barcode-novajet-65l{size:A4 portrait;margin:0} @page barcode-novajet-84l{size:A4 portrait;margin:0} @page barcode-novajet-110l{size:A4 portrait;margin:0} @page barcode-50x25{size:50mm 25mm;margin:0} @page barcode-50x30{size:50mm 30mm;margin:0} @page barcode-58x40{size:58mm 40mm;margin:0} @page barcode-60x40{size:60mm 40mm;margin:0} @page barcode-70x40{size:70mm 40mm;margin:0} @page barcode-80x50{size:80mm 50mm;margin:0} @page barcode-100x50{size:100mm 50mm;margin:0} @page barcode-100x75{size:100mm 75mm;margin:0} @page barcode-105x148{size:105mm 148mm;margin:0} @page barcode-210x99{size:210mm 99mm;margin:0} @page barcode-210x148{size:A5 landscape;margin:0} @page barcode-70x30{size:70mm 30mm;margin:0} @page barcode-80x40{size:80mm 40mm;margin:0} @page barcode-90x50{size:90mm 50mm;margin:0} @page barcode-custom{size:auto;margin:0} .barcode-print-window.barcode-page-a4-40{page:barcode-a4-40} .barcode-print-window.barcode-page-a4-30{page:barcode-a4-30} .barcode-print-window.barcode-page-a4-24{page:barcode-a4-24} .barcode-print-window.barcode-page-a4-20{page:barcode-a4-20} .barcode-print-window.barcode-page-a4-18{page:barcode-a4-18} .barcode-print-window.barcode-page-a4-14{page:barcode-a4-14} .barcode-print-window.barcode-page-a4-12{page:barcode-a4-12} .barcode-print-window.barcode-page-a4-10{page:barcode-a4-10} .barcode-print-window.barcode-page-novajet-01p{page:barcode-novajet-01p} .barcode-print-window.barcode-page-novajet-01p-288{page:barcode-novajet-01p-288} .barcode-print-window.barcode-page-novajet-02l{page:barcode-novajet-02l} .barcode-print-window.barcode-page-novajet-04p{page:barcode-novajet-04p} .barcode-print-window.barcode-page-novajet-06l{page:barcode-novajet-06l} .barcode-print-window.barcode-page-novajet-08l{page:barcode-novajet-08l} .barcode-print-window.barcode-page-novajet-08la{page:barcode-novajet-08la} .barcode-print-window.barcode-page-novajet-12l{page:barcode-novajet-12l} .barcode-print-window.barcode-page-novajet-15l{page:barcode-novajet-15l} .barcode-print-window.barcode-page-novajet-16l{page:barcode-novajet-16l} .barcode-print-window.barcode-page-novajet-18l{page:barcode-novajet-18l} .barcode-print-window.barcode-page-novajet-21l{page:barcode-novajet-21l} .barcode-print-window.barcode-page-novajet-22e{page:barcode-novajet-22e} .barcode-print-window.barcode-page-novajet-24l{page:barcode-novajet-24l} .barcode-print-window.barcode-page-novajet-30e{page:barcode-novajet-30e} .barcode-print-window.barcode-page-novajet-30p{page:barcode-novajet-30p} .barcode-print-window.barcode-page-novajet-32p{page:barcode-novajet-32p} .barcode-print-window.barcode-page-novajet-40l{page:barcode-novajet-40l} .barcode-print-window.barcode-page-novajet-40p{page:barcode-novajet-40p} .barcode-print-window.barcode-page-novajet-48l{page:barcode-novajet-48l} .barcode-print-window.barcode-page-novajet-56l{page:barcode-novajet-56l} .barcode-print-window.barcode-page-novajet-65l{page:barcode-novajet-65l} .barcode-print-window.barcode-page-novajet-84l{page:barcode-novajet-84l} .barcode-print-window.barcode-page-novajet-110l{page:barcode-novajet-110l} .barcode-print-window.barcode-page-50x25{page:barcode-50x25} .barcode-print-window.barcode-page-50x30{page:barcode-50x30} .barcode-print-window.barcode-page-58x40{page:barcode-58x40} .barcode-print-window.barcode-page-60x40{page:barcode-60x40} .barcode-print-window.barcode-page-70x40{page:barcode-70x40} .barcode-print-window.barcode-page-80x50{page:barcode-80x50} .barcode-print-window.barcode-page-100x50{page:barcode-100x50} .barcode-print-window.barcode-page-100x75{page:barcode-100x75} .barcode-print-window.barcode-page-105x148{page:barcode-105x148} .barcode-print-window.barcode-page-210x99{page:barcode-210x99} .barcode-print-window.barcode-page-210x148{page:barcode-210x148} .barcode-print-window.barcode-page-70x30{page:barcode-70x30} .barcode-print-window.barcode-page-80x40{page:barcode-80x40} .barcode-print-window.barcode-page-90x50{page:barcode-90x50} .barcode-print-window.barcode-page-custom{page:barcode-custom} /* Barcode Studio custom label controls */ .barcode-custom-size{margin-top:9px;padding:10px;border:1px dashed var(--primary-border);border-radius:10px;background:var(--primary-soft)} .barcode-custom-size[hidden]{display:none!important} .barcode-custom-size-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px} .barcode-custom-size .compact-field{margin:0} .barcode-custom-size>small{display:block;margin-top:7px;font-size:9px;line-height:1.45;color:var(--muted)} .barcode-mini-custom{font-size:8px} .barcode-mini-custom i{font-size:18px} .barcode-custom-card .barcode-template-mini{background:var(--surface-soft)} @media(max-width:600px){.barcode-custom-size-grid{grid-template-columns:1fr}} /* Barcode Studio refinement: directional label gaps and polished template previews */ .barcode-gap-group{grid-column:1/-1!important;min-width:0} .barcode-gap-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px} .barcode-gap-grid .compact-field{min-width:0;font-size:12px} .barcode-padding-group{grid-column:1/-1!important;min-width:0} .barcode-padding-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px} .barcode-padding-grid .compact-field{min-width:0;font-size:12px} /* Keep every template thumbnail visually consistent with the real label renderer. */ .barcode-template-mini{height:48px;position:relative;overflow:hidden;padding:6px 8px;gap:2px} .barcode-template-mini i{display:block;width:58%;height:18px;margin:0 auto;border:0;border-radius:0;background:repeating-linear-gradient(90deg,#111 0,#111 1.2px,transparent 1.2px,transparent 3px);font-size:0;line-height:0;flex:0 0 auto} .barcode-template-mini b{font-size:6px;line-height:1.05;font-weight:800;text-align:center;max-width:90%;white-space:nowrap} .barcode-template-mini em{font-size:6px;line-height:1;font-style:normal;font-weight:800;max-width:90%;white-space:nowrap} .barcode-mini-1 i{width:58%;height:18px} .barcode-mini-2{align-items:center} .barcode-mini-2 i{width:42%;height:14px} .barcode-mini-2 em{align-self:center;margin-right:0} .barcode-mini-3{justify-content:center;padding:6px 8px;gap:1px} .barcode-mini-3 i{width:72%;height:22px} .barcode-mini-3 b{display:none} .barcode-mini-3 em{display:none} .barcode-mini-4{justify-content:center;align-items:center;padding:6px 8px;gap:2px} .barcode-mini-4 i{width:52%;height:18px} .barcode-mini-4 b{align-self:center} .barcode-mini-4 em{align-self:flex-end;margin-right:0} .barcode-mini-5{gap:2px} .barcode-mini-5 i{width:60%;height:20px} .barcode-mini-5 b{font-size:6.5px;font-weight:800;max-width:96%} .barcode-mini-6{gap:2px} .barcode-mini-6 i{width:42%;height:14px} .barcode-mini-6 em{display:none} .barcode-mini-7{gap:1px} .barcode-mini-7 i{width:70%;height:21px} .barcode-mini-7 b{font-size:5.5px} .barcode-mini-7 em{display:none} .barcode-mini-8{border-radius:8px;gap:2px} .barcode-mini-8 i{width:50%;height:16px} /* Professional label rendering: stable centering, especially on compact templates. */ .barcode-label{min-width:0;min-height:0} .barcode-label .bc-name{align-self:stretch;width:100%;text-align:center;min-width:0} .barcode-label .bc-code{align-self:center;text-align:center} .barcode-label .bc-price{max-width:100%;text-align:right} .barcode-label .barcode-bars{flex:0 0 auto;min-height:0} .barcode-label .barcode-svg rect{fill:#000000!important} .barcode-label.barcode-style-4{align-items:center;justify-content:space-between} .barcode-label.barcode-style-4 .bc-name, .barcode-label.barcode-style-4 .bc-barcode-number, .barcode-label.barcode-style-4 .bc-sku, .barcode-label.barcode-style-4 .bc-hsn{align-self:center;text-align:center} .barcode-label.barcode-style-4 .bc-price{align-self:flex-end} .barcode-label.barcode-style-5{gap:1.4mm;justify-content:center} .barcode-label.barcode-style-5 .bc-name{font-size:10px;line-height:1.1;max-width:100%;white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;text-overflow:ellipsis;text-align:center} .barcode-label.barcode-style-5 .barcode-bars{width:88%;height:36%} .barcode-label.barcode-style-5 .bc-barcode-number{font-size:8px;text-align:center} @media(max-width:600px){ .barcode-gap-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } /* Barcode Studio — compact typography controls */ .barcode-visual-settings{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:2px; padding:9px 0 1px; border-top:1px solid var(--border); } .barcode-visual-settings .compact-field{ min-width:0; margin:0; gap:4px; font-size:10px; font-weight:700; color:var(--muted); } .barcode-visual-settings .compact-field input, .barcode-visual-settings .compact-field select{ width:100%; min-width:0; height:34px; padding:7px 10px; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--text); font-size:12px; font-weight:650; line-height:1.2; box-sizing:border-box; transition:border-color .15s ease,box-shadow .15s ease,background .15s ease; } .barcode-visual-settings .compact-field input:focus, .barcode-visual-settings .compact-field select:focus{ outline:0; border-color:var(--primary-border); box-shadow:0 0 0 2px var(--primary-ring); } @media(max-width:600px){ .barcode-visual-settings{grid-template-columns:1fr} } /* ------------------------------------------------------------------------- Barcode Studio — final compact typography + stable label rendering Keep this section in app.css so the PHP view contains no presentation CSS. ------------------------------------------------------------------------- */ .barcode-visual-settings{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; align-items:end; padding:8px 0 2px; } .barcode-visual-settings .compact-field{ min-width:0; gap:4px; margin:0; font-size:10px; line-height:1.15; font-weight:700; color:var(--muted); } .barcode-visual-settings .compact-field input, .barcode-visual-settings .compact-field select{ width:100%; height:32px; min-height:32px; padding:5px 9px; border:1px solid var(--border-strong); border-radius:7px; background:var(--surface); color:var(--text); font-size:11px; font-weight:700; line-height:1; box-sizing:border-box; } .barcode-visual-settings .compact-field input:hover, .barcode-visual-settings .compact-field select:hover{ border-color:var(--primary-border); } .barcode-visual-settings .compact-field input:focus, .barcode-visual-settings .compact-field select:focus{ outline:0; border-color:var(--primary); box-shadow:0 0 0 2px var(--primary-ring); } /* The selected typography values are CSS variables set by the shared JS renderer. This prevents template-specific rules from breaking the label. */ .barcode-label{ --bc-font-size:12px; --bc-number-size:13px; --bc-font-weight:700; --bc-gap:1mm; --bc-barcode-height:8mm; gap:var(--bc-gap); padding:0; justify-content:center; align-items:center; text-align:center; } .barcode-label .bc-name, .barcode-label .bc-code, .barcode-label .bc-price, .barcode-label .bc-sku, .barcode-label .bc-hsn{ box-sizing:border-box; min-width:0; max-width:100%; margin:0; flex:0 0 auto; overflow:hidden; text-overflow:ellipsis; } .barcode-label .bc-name{ width:100%; font-size:var(--bc-font-size)!important; font-weight:var(--bc-font-weight)!important; line-height:1.08; text-align:center; white-space:nowrap; } .barcode-label .barcode-bars{ width:88%; height:var(--bc-barcode-height)!important; min-height:0!important; max-height:18mm; flex:0 0 auto; display:flex; align-items:center; justify-content:center; } .barcode-label .barcode-svg{ display:block; width:100%; height:100%; max-width:100%; } .barcode-label .bc-barcode-number, .barcode-label .bc-code{ width:auto; font-size:var(--bc-number-size)!important; font-weight:var(--bc-font-weight)!important; line-height:1; text-align:center; white-space:nowrap; color:#000; } .barcode-label .bc-sku, .barcode-label .bc-hsn{ font-size:calc(var(--bc-number-size) * .72)!important; font-weight:var(--bc-font-weight)!important; line-height:1; text-align:center; white-space:nowrap; } .barcode-label .bc-price{ font-size:var(--bc-font-size)!important; font-weight:var(--bc-font-weight)!important; line-height:1; text-align:right; align-self:flex-end; white-space:nowrap; color:#000; } .barcode-label .barcode-svg rect{fill:#000!important} /* Template personalities. They change composition, not the user's selected typography, so all eight designs remain readable at every supported size. */ .barcode-label.barcode-style-1{justify-content:center} .barcode-label.barcode-style-1 .barcode-bars{width:86%} .barcode-label.barcode-style-2{justify-content:center} .barcode-label.barcode-style-2 .barcode-bars{width:72%;} .barcode-label.barcode-style-2 .bc-price{align-self:flex-end} .barcode-label.barcode-style-3{justify-content:center} .barcode-label.barcode-style-3 .barcode-bars{width:92%} .barcode-label.barcode-style-3 .bc-name{order:-1} .barcode-label.barcode-style-4{justify-content:center;align-items:center} .barcode-label.barcode-style-4 .bc-name, .barcode-label.barcode-style-4 .bc-barcode-number, .barcode-label.barcode-style-4 .bc-sku, .barcode-label.barcode-style-4 .bc-hsn{align-self:center;text-align:center} .barcode-label.barcode-style-4 .barcode-bars{width:88%} .barcode-label.barcode-style-4 .bc-price{align-self:flex-end} .barcode-label.barcode-style-5{justify-content:center} .barcode-label.barcode-style-5 .bc-name{ white-space:normal; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; text-align:center; } .barcode-label.barcode-style-5 .barcode-bars{width:86%} .barcode-label.barcode-style-6{justify-content:center} .barcode-label.barcode-style-6 .barcode-bars{width:68%} .barcode-label.barcode-style-6 .bc-name{font-size:var(--bc-font-size)!important} .barcode-label.barcode-style-7{justify-content:center} .barcode-label.barcode-style-7 .barcode-bars{width:94%} .barcode-label.barcode-style-8{justify-content:center} .barcode-label.barcode-style-8 .barcode-bars{width:78%} .barcode-label.barcode-style-8 .bc-name{font-weight:var(--bc-font-weight)!important} /* * Product titles are always a single physical line. * Long names are truncated with an ellipsis before the barcode area. * Keep this rule after all template-specific .bc-name rules so no template * can re-enable wrapping and cause the title to collide with the barcode. */ .barcode-label[class*="barcode-style-"] .bc-name, .barcode-print-window .barcode-print-label[class*="barcode-style-"] .bc-name{ display:block !important; width:100% !important; max-width:100% !important; min-width:0 !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; overflow-wrap:normal !important; word-break:normal !important; flex:0 1 auto !important; box-sizing:border-box !important; text-align:center !important; } /* Thumbnail cards use the same visual language but remain deliberately small. */ .barcode-template-card{padding:7px 6px} .barcode-template-mini{ height:44px; padding:5px 7px; gap:2px; overflow:hidden; box-sizing:border-box; } .barcode-template-mini i{ display:block; width:58%; height:15px; margin:0 auto; flex:0 0 auto; font-size:0; line-height:0; background:repeating-linear-gradient(90deg,#111 0,#111 1.2px,transparent 1.2px,transparent 3px); } .barcode-template-mini b, .barcode-template-mini em{ display:block; max-width:92%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:center; } .barcode-template-mini b{font-size:6px;line-height:1;font-weight:800} .barcode-template-mini em{font-size:6px;line-height:1;font-style:normal;font-weight:800} .barcode-mini-1 i{width:56%;height:15px} .barcode-mini-2 i{width:43%;height:13px} .barcode-mini-2 em{align-self:flex-end;margin-right:4px} .barcode-mini-3 i{width:72%;height:19px} .barcode-mini-3 b,.barcode-mini-3 em{display:none} .barcode-mini-4 i{width:54%;height:15px} .barcode-mini-4 b{align-self:center} .barcode-mini-4 em{align-self:flex-end;margin-right:2px} .barcode-mini-5 i{width:59%;height:17px} .barcode-mini-6 i{width:40%;height:12px} .barcode-mini-6 em{display:none} .barcode-mini-7 i{width:70%;height:18px} .barcode-mini-7 em{display:none} .barcode-mini-8 i{width:50%;height:14px} @media(max-width:900px){ .barcode-visual-settings{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:600px){ .barcode-visual-settings{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px} .barcode-visual-settings .compact-field input, .barcode-visual-settings .compact-field select{height:31px;min-height:31px} } /* Barcode Studio — final typography controls and saved-default action. */ .barcode-settings-head{display:flex;align-items:center;justify-content:space-between;gap:12px} /* Keep typography controls aligned to the same 4-column field grid as Page margins. Font size, Barcode number size and Font weight each occupy one column. */ .barcode-visual-settings{ grid-template-columns:repeat(4,minmax(0,1fr))!important; } .barcode-save-default-btn{height:34px;min-height:34px;padding:0 12px;border-radius:8px;font-size:11px;font-weight:750;white-space:nowrap} .barcode-save-default-btn.is-saved{border-color:#16a34a!important;color:#15803d!important;background:#f0fdf4!important} .barcode-save-default-btn:disabled{opacity:.72;cursor:wait} .barcode-visual-settings{ display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:8px!important; align-items:end!important; margin-top:4px!important; padding:9px 0 2px!important; border-top:1px solid var(--border)!important; } .barcode-visual-settings .compact-field{ display:grid!important; grid-template-rows:auto 32px!important; gap:4px!important; min-width:0!important; margin:0!important; font-size:10px!important; line-height:1.1!important; font-weight:700!important; color:var(--muted)!important; } .barcode-visual-settings .compact-field input, .barcode-visual-settings .compact-field select{ width:100%!important; min-width:0!important; height:32px!important; min-height:32px!important; padding:0 9px!important; border:1px solid var(--border-strong)!important; border-radius:7px!important; background:var(--surface)!important; color:var(--text)!important; font-size:11px!important; font-weight:700!important; line-height:32px!important; box-sizing:border-box!important; } .barcode-visual-settings .compact-field select{padding-right:26px!important} .barcode-visual-settings .compact-field input:hover, .barcode-visual-settings .compact-field select:hover{border-color:var(--primary-border)!important} .barcode-visual-settings .compact-field input:focus, .barcode-visual-settings .compact-field select:focus{ outline:0!important; border-color:var(--primary)!important; box-shadow:0 0 0 2px var(--primary-ring)!important; } /* The barcode SVG must never be horizontally stretched. Keeping the module aspect ratio intact is important for reliable scanning on screen and paper. */ .barcode-label .barcode-bars{overflow:hidden!important} .barcode-label .barcode-svg{ display:block!important; width:100%!important; height:100%!important; max-width:100%!important; max-height:100%!important; overflow:visible!important; shape-rendering:crispEdges!important; } .barcode-label .barcode-svg rect{fill:#000000!important} .barcode-print-window .barcode-print-label .barcode-svg rect{fill:#000000!important} @media(max-width:700px){ .barcode-settings-head{align-items:flex-start;flex-direction:column} .barcode-save-default-btn{width:100%} .barcode-visual-settings{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important} .barcode-visual-settings .compact-field input, .barcode-visual-settings .compact-field select{height:31px!important;min-height:31px!important;font-size:10px!important} } /* ========================================================================== Barcode Studio — final production hardening All barcode/label presentation rules live in app.css. ========================================================================== */ /* Typography controls: every field uses the exact same box model and height. */ .barcode-visual-settings{ display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:8px !important; align-items:end !important; width:100% !important; box-sizing:border-box !important; } .barcode-visual-settings .compact-field{ display:grid !important; grid-template-rows:auto 34px !important; grid-template-columns:minmax(0,1fr) !important; min-width:0 !important; width:100% !important; margin:0 !important; gap:4px !important; box-sizing:border-box !important; font-size:10px !important; line-height:1.1 !important; font-weight:700 !important; } .barcode-visual-settings .compact-field input, .barcode-visual-settings .compact-field select{ display:block !important; width:100% !important; min-width:0 !important; max-width:100% !important; height:34px !important; min-height:34px !important; margin:0 !important; padding:0 9px !important; box-sizing:border-box !important; border:1px solid var(--border-strong) !important; border-radius:8px !important; background:var(--surface) !important; color:var(--text) !important; font:700 12px/34px Arial,sans-serif !important; } .barcode-visual-settings .compact-field select{ padding-right:28px !important; line-height:normal !important; } .barcode-visual-settings .compact-field input[type="number"]{ appearance:textfield !important; -moz-appearance:textfield !important; } .barcode-visual-settings .compact-field input[type="number"]::-webkit-inner-spin-button, .barcode-visual-settings .compact-field input[type="number"]::-webkit-outer-spin-button{ margin:0 !important; } .barcode-visual-settings .compact-field input:hover, .barcode-visual-settings .compact-field select:hover{ border-color:var(--primary-border) !important; } .barcode-visual-settings .compact-field input:focus, .barcode-visual-settings .compact-field select:focus{ outline:0 !important; border-color:var(--primary) !important; box-shadow:0 0 0 2px var(--primary-ring) !important; } /* One renderer for live preview, print-preview and physical print. */ .barcode-label, .barcode-print-window .barcode-print-label{ box-sizing:border-box !important; background:#fff !important; color:#000 !important; overflow:hidden !important; text-align:center !important; } .barcode-label .bc-name, .barcode-print-window .barcode-print-label .bc-name, .barcode-label .bc-code, .barcode-print-window .barcode-print-label .bc-code, .barcode-label .bc-price, .barcode-print-window .barcode-print-label .bc-price{ box-sizing:border-box !important; min-width:0 !important; max-width:100% !important; margin:0 !important; } .barcode-label .bc-name, .barcode-print-window .barcode-print-label .bc-name{ font-size:var(--bc-font-size,12px) !important; font-weight:var(--bc-font-weight,700) !important; line-height:1.08 !important; } .barcode-label .bc-barcode-number, .barcode-print-window .barcode-print-label .bc-barcode-number{ font-size:var(--bc-number-size,13px) !important; font-weight:var(--bc-font-weight,700) !important; line-height:1 !important; color:#000 !important; } .barcode-label .bc-price, .barcode-print-window .barcode-print-label .bc-price{ font-size:var(--bc-font-size,12px) !important; font-weight:var(--bc-font-weight,700) !important; line-height:1 !important; color:#000 !important; } .barcode-label .bc-sku, .barcode-label .bc-hsn, .barcode-print-window .barcode-print-label .bc-sku, .barcode-print-window .barcode-print-label .bc-hsn{ font-size:calc(var(--bc-number-size,13px) * .72) !important; font-weight:var(--bc-font-weight,700) !important; line-height:1 !important; color:#000 !important; } /* * Scanner-safe barcode rendering. * The SVG has a real intrinsic width/height and preserveAspectRatio="meet". * Never force a non-proportional transform on the bars. */ .barcode-label .barcode-bars, .barcode-print-window .barcode-print-label .barcode-bars{ display:flex !important; align-items:center !important; justify-content:center !important; flex:0 0 auto !important; overflow:hidden !important; min-width:0 !important; } .barcode-label .barcode-svg, .barcode-print-window .barcode-print-label .barcode-svg{ display:block !important; width:100% !important; height:100% !important; max-width:100% !important; max-height:100% !important; margin:0 auto !important; overflow:visible !important; shape-rendering:crispEdges !important; vector-effect:non-scaling-stroke; } .barcode-label .barcode-svg rect, .barcode-print-window .barcode-print-label .barcode-svg rect{ fill:#000 !important; stroke:none !important; } /* Exact physical sheet geometry. */ .barcode-print-window{ margin:0 !important; padding:0 !important; background:#eef2f7; } .barcode-print-window .barcode-print-document{ box-sizing:border-box !important; } .barcode-print-window .barcode-print-sheet{ box-sizing:border-box !important; position:relative !important; margin:0 !important; padding:0 !important; overflow:hidden !important; background:#fff !important; break-after:page !important; page-break-after:always !important; } .barcode-print-window .barcode-print-sheet:last-child{ break-after:auto !important; page-break-after:auto !important; } .barcode-print-window .barcode-print-label{ position:absolute !important; box-sizing:border-box !important; margin:0 !important; min-width:0 !important; min-height:var(--label-height) !important; overflow:hidden !important; break-inside:avoid !important; page-break-inside:avoid !important; print-color-adjust:exact !important; -webkit-print-color-adjust:exact !important; } /* Chrome/Edge named page mapping for every built-in sheet format. */ @page barcode-a4-40{size:A4 portrait;margin:0} @page barcode-a4-30{size:A4 portrait;margin:0} @page barcode-a4-24{size:A4 portrait;margin:0} @page barcode-a4-20{size:A4 portrait;margin:0} @page barcode-a4-18{size:A4 portrait;margin:0} @page barcode-a4-14{size:A4 portrait;margin:0} @page barcode-a4-12{size:A4 portrait;margin:0} @page barcode-a4-10{size:A4 portrait;margin:0} @page barcode-novajet-01p{size:A4 portrait;margin:0} @page barcode-novajet-01p-288{size:A4 portrait;margin:0} @page barcode-novajet-02l{size:A4 portrait;margin:0} @page barcode-novajet-04p{size:A4 portrait;margin:0} @page barcode-novajet-06l{size:A4 portrait;margin:0} @page barcode-novajet-08l{size:A4 portrait;margin:0} @page barcode-novajet-08la{size:A4 portrait;margin:0} @page barcode-novajet-12l{size:A4 portrait;margin:0} @page barcode-novajet-15l{size:A4 portrait;margin:0} @page barcode-novajet-16l{size:A4 portrait;margin:0} @page barcode-novajet-18l{size:A4 portrait;margin:0} @page barcode-novajet-21l{size:A4 portrait;margin:0} @page barcode-novajet-22e{size:A4 portrait;margin:0} @page barcode-novajet-24l{size:A4 portrait;margin:0} @page barcode-novajet-30e{size:A4 portrait;margin:0} @page barcode-novajet-30p{size:A4 portrait;margin:0} @page barcode-novajet-32p{size:A4 portrait;margin:0} @page barcode-novajet-40l{size:A4 portrait;margin:0} @page barcode-novajet-40p{size:A4 portrait;margin:0} @page barcode-novajet-48l{size:A4 portrait;margin:0} @page barcode-novajet-56l{size:A4 portrait;margin:0} @page barcode-novajet-65l{size:A4 portrait;margin:0} @page barcode-novajet-84l{size:A4 portrait;margin:0} @page barcode-novajet-110l{size:A4 portrait;margin:0} @page barcode-50x25{size:50mm 25mm;margin:0} @page barcode-50x30{size:50mm 30mm;margin:0} @page barcode-58x40{size:58mm 40mm;margin:0} @page barcode-60x40{size:60mm 40mm;margin:0} @page barcode-70x40{size:70mm 40mm;margin:0} @page barcode-80x50{size:80mm 50mm;margin:0} @page barcode-100x50{size:100mm 50mm;margin:0} @page barcode-100x75{size:100mm 75mm;margin:0} @page barcode-105x148{size:105mm 148mm;margin:0} @page barcode-210x99{size:210mm 99mm;margin:0} @page barcode-210x148{size:A5 landscape;margin:0} @page barcode-70x30{size:70mm 30mm;margin:0} @page barcode-80x40{size:80mm 40mm;margin:0} @page barcode-90x50{size:90mm 50mm;margin:0} @page barcode-custom{size:auto;margin:0} @media print{ html,body{ margin:0 !important; padding:0 !important; background:#fff !important; } .barcode-print-toolbar, .no-print{ display:none !important; } .barcode-print-document{ display:block !important; width:auto !important; min-height:0 !important; margin:0 !important; padding:0 !important; } .barcode-print-window .barcode-print-sheet{ box-shadow:none !important; border:0 !important; margin:0 !important; width:var(--sheet-width) !important; height:var(--sheet-height) !important; min-width:var(--sheet-width) !important; min-height:var(--sheet-height) !important; overflow:hidden !important; print-color-adjust:exact !important; -webkit-print-color-adjust:exact !important; } .barcode-print-window .barcode-print-label{ width:var(--label-width) !important; height:var(--label-height) !important; min-width:var(--label-width) !important; min-height:var(--label-height) !important; } } /* Barcode Studio — final control sizing and label-start offset */ .barcode-visual-settings .compact-field, .barcode-visual-settings .compact-field input, .barcode-visual-settings .compact-field select{ box-sizing:border-box!important; } .barcode-visual-settings .compact-field{ width:100%!important; min-width:0!important; } .barcode-visual-settings .compact-field input, .barcode-visual-settings .compact-field select{ width:100%!important; height:34px!important; min-height:34px!important; max-height:34px!important; margin:0!important; padding:0 9px!important; border-radius:8px!important; border:1px solid var(--border-strong)!important; font-size:12px!important; line-height:34px!important; } .barcode-visual-settings .compact-field select{line-height:normal!important;padding-right:28px!important} .barcode-skip-labels{display:grid;grid-template-columns:auto 64px;align-items:center;gap:4px 7px;margin:0 0 0 4px;font-size:9px;font-weight:750;color:var(--muted);white-space:nowrap} .barcode-skip-labels span{grid-column:1/-1;font-size:9px;font-weight:800;color:var(--text);line-height:1} .barcode-skip-labels input{width:64px!important;height:34px!important;min-height:34px!important;box-sizing:border-box!important;border:1px solid var(--border-strong)!important;border-radius:8px!important;background:var(--surface)!important;color:var(--text)!important;text-align:center!important;font:700 12px/34px Arial,sans-serif!important;padding:0 7px!important;outline:0!important} .barcode-skip-labels input:focus{border-color:var(--primary)!important;box-shadow:0 0 0 2px var(--primary-ring)!important} .barcode-skip-labels small{font-size:8px;color:var(--muted);white-space:normal;line-height:1.2;max-width:120px} @media(max-width:900px){.barcode-selection-actions{flex-wrap:wrap}.barcode-skip-labels{margin-left:0}} /* Barcode Studio — typography controls must match Page margin controls */ .barcode-page .barcode-visual-settings{ display:grid; /* Keep the typography controls on the same four-column grid used by Page margins / Label gap / Label padding. */ grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; align-items:end; margin-top:2px; padding:8px 0 2px; } .barcode-page .barcode-visual-settings .compact-field{ min-width:0; margin:0; gap:5px; font-size:12px; line-height:1.25; font-weight:700; color:var(--muted); } .barcode-page .barcode-visual-settings .compact-field input, .barcode-page .barcode-visual-settings .compact-field select{ width:100%; min-width:0; height:34px; min-height:34px; box-sizing:border-box; padding:7px 10px; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--text); font-size:12px; font-weight:650; line-height:1.2; } .barcode-page .barcode-visual-settings .compact-field input:hover, .barcode-page .barcode-visual-settings .compact-field select:hover{ border-color:var(--primary-border); } .barcode-page .barcode-visual-settings .compact-field input:focus, .barcode-page .barcode-visual-settings .compact-field select:focus{ outline:0; border-color:var(--primary-border); box-shadow:0 0 0 2px var(--primary-ring); } @media(max-width:760px){ .barcode-page .barcode-visual-settings{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media(max-width:600px){ .barcode-page .barcode-visual-settings{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media(max-width:420px){ .barcode-page .barcode-visual-settings{ grid-template-columns:1fr; } } /* Invoice editor + returns refinement. Scoped to these workspaces so the Barcode Studio UI remains untouched. */ .invoice-edit-workspace .panel-head h2{margin-bottom:4px} .invoice-edit-workspace .page-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end} .invoice-edit-workspace .invoice-edit-danger-panel{display:flex;align-items:center;justify-content:space-between;gap:18px;border-color:color-mix(in srgb,var(--danger) 24%,var(--border));background:color-mix(in srgb,var(--danger) 5%,var(--surface))} .invoice-edit-workspace .invoice-edit-danger-panel h3{margin:2px 0 4px;font-size:15px} .invoice-edit-workspace .invoice-edit-danger-panel p{margin:0;color:var(--muted);font-size:11px} .invoice-edit-workspace .invoice-edit-danger-panel form{margin:0;flex:0 0 auto} .invoice-edit-workspace .readonly-field input{background:var(--body-bg);font-weight:800;color:var(--text)} .return-workspace{display:grid;gap:16px;min-width:0} .return-hero,.return-selector,.return-document-card,.return-items-card,.return-details-card,.return-summary-card,.return-empty-state{border-radius:16px} .return-hero .panel-head{margin-bottom:0} .return-section-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px} .return-section-heading h3{margin:0 0 4px;font-size:15px} .return-section-heading p{margin:0;color:var(--muted);font-size:11px;line-height:1.55} .return-select-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:end;padding:15px;border:1px solid var(--border);border-radius:13px;background:var(--body-bg)} .return-select-form label{display:grid;gap:6px;min-width:0} .return-select-form label span{font-size:11px;font-weight:700;color:var(--text)} .return-select-form select{min-height:44px} .return-select-form .primary-btn{min-height:44px;white-space:nowrap} .return-notice{margin:0} .return-form{display:grid;gap:16px} .return-document-card{display:flex;align-items:center;justify-content:space-between;gap:20px} .return-document-main{display:flex;align-items:center;gap:12px;min-width:0} .return-doc-icon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--primary-soft-2);color:var(--primary);font-size:17px;flex:0 0 auto} .return-document-main h3{margin:2px 0 3px;font-size:16px} .return-document-main p{margin:0;color:var(--muted);font-size:11px} .return-document-total{display:grid;gap:3px;text-align:right;flex:0 0 auto} .return-document-total span{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.55px;font-weight:700} .return-document-total strong{font-size:19px} .return-items-card{overflow:visible} .return-table-wrap{border-radius:12px} .return-table{width:100%;min-width:760px;border-collapse:separate;border-spacing:0} .return-table th{font-size:10px;text-transform:uppercase;letter-spacing:.45px;color:var(--muted);background:var(--body-bg);padding:12px 11px;border-bottom:1px solid var(--border);white-space:nowrap} .return-table td{padding:12px 11px;border-bottom:1px solid var(--border);font-size:12px;vertical-align:middle} .return-table tbody tr:last-child td{border-bottom:0} .return-product{display:flex;align-items:center;gap:9px;min-width:210px} .return-product .product-avatar{width:34px;height:34px;flex:0 0 auto} .return-product b{font-size:12px} .return-muted{color:var(--muted);font-weight:700} .return-number-input{width:130px!important;min-height:42px!important;font-weight:700;text-align:center} .return-line-total{font-weight:800;white-space:nowrap} .return-bottom-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.45fr);gap:16px;align-items:start} .return-details-card .form-grid{margin-top:2px} .return-summary-card{position:sticky;top:82px;display:grid;gap:10px} .return-summary-card .section-kicker{margin-bottom:3px} .return-summary-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--border)} .return-summary-row span{font-size:11px;color:var(--muted);font-weight:600} .return-summary-row strong{font-size:13px} .return-summary-card .checkout{width:100%;justify-content:center;margin-top:5px} .return-summary-card>.secondary-btn{width:100%;justify-content:center} .return-empty-state{text-align:center;padding:46px 20px} .return-empty-icon{width:54px;height:54px;margin:0 auto 12px;border-radius:15px;display:grid;place-items:center;background:var(--body-bg);border:1px solid var(--border);color:var(--muted);font-size:20px} .return-empty-state h3{margin:0 0 5px;font-size:16px} .return-empty-state p{margin:0;color:var(--muted);font-size:11px} @media(max-width:900px){ .invoice-edit-workspace .page-actions{width:100%;justify-content:stretch} .invoice-edit-workspace .page-actions>*{flex:1 1 180px} .invoice-edit-workspace .invoice-edit-danger-panel{align-items:flex-start;flex-direction:column} .invoice-edit-workspace .invoice-edit-danger-panel form,.invoice-edit-workspace .invoice-edit-danger-panel .danger-btn{width:100%} .return-bottom-grid{grid-template-columns:1fr} .return-summary-card{position:relative;top:auto} } @media(max-width:680px){ .return-select-form{grid-template-columns:1fr} .return-select-form .primary-btn{width:100%;justify-content:center} .return-document-card{align-items:flex-start;flex-direction:column} .return-document-total{text-align:left;width:100%;padding-top:10px;border-top:1px solid var(--border)} .return-section-heading h3{font-size:14px} .return-table{min-width:700px} .return-number-input{width:115px!important} .return-document-main h3{font-size:15px} } /* -------------------------------------------------------------------------- PRODUCTS & ITEMS MASTER — reference-inspired workspace Uses only existing root design tokens. -------------------------------------------------------------------------- */ .items-list-page .panel-head p,.item-edit-page .panel-head p{max-width:760px} .items-table .item-table-product{display:flex;align-items:center;gap:10px;min-width:250px} .item-thumb{width:40px;height:40px;display:grid;place-items:center;flex:0 0 40px;border:1px solid var(--border);border-radius:11px;background:var(--surface-soft);color:var(--primary);overflow:hidden} .item-thumb img{width:100%;height:100%;object-fit:cover} .item-table-product b{display:block;font-size:12px} .item-table-product small{display:block;margin-top:3px;color:var(--muted);font-size:10px} .item-type-pill,.muted-badge{display:inline-flex;align-items:center;justify-content:center;min-height:26px;padding:0 9px;border-radius:999px;font-size:10px;font-weight:800} .item-type-pill{background:var(--primary-soft);color:var(--primary-dark);border:1px solid var(--primary-border)} .item-type-pill.service{background:var(--surface-hover);color:var(--text);border-color:var(--border-strong)} .muted-badge{background:var(--surface-soft);color:var(--muted);border:1px solid var(--border)} .item-master-modal{width:min(1120px,calc(100vw - 30px));max-width:1120px;padding:0;overflow:hidden} .item-master-form{display:grid;gap:16px;padding:18px} .item-master-top{display:grid;grid-template-columns:105px minmax(0,1fr);gap:18px;padding:16px;border:1px solid var(--primary-border);border-radius:16px;background:var(--surface-soft);align-items:start} .item-photo-field{display:grid;gap:8px;align-content:start;margin:0} .item-photo-box{height:96px;border:2px dashed var(--border-strong);border-radius:17px;background:var(--surface);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;color:var(--muted);cursor:pointer;position:relative;overflow:hidden} .item-photo-box input{position:absolute;inset:0;opacity:0;cursor:pointer;z-index:2} .item-photo-box i{font-size:22px;color:var(--border-strong)} .item-photo-box b{font-size:9px;letter-spacing:.3px} .item-photo-box img{display:none;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1} .item-photo-box img.show{display:block} .item-master-fields{display:grid;grid-template-columns:1.45fr .72fr .62fr;gap:12px 14px;min-width:0} .item-master-fields label:nth-child(4){grid-column:1/2} .item-master-fields label:nth-child(5){grid-column:2/3} .item-master-fields label:nth-child(6){grid-column:3/4} .required-dot::first-letter{color:var(--primary)} .item-master-fields .compact-field,.item-master-form .compact-field{display:grid;gap:6px;color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.2px} .item-master-fields input,.item-master-fields select,.item-master-form input,.item-master-form select{min-height:40px} .barcode-input-wrap{display:grid;grid-template-columns:minmax(0,1fr) 42px;gap:0} .barcode-input-wrap input{border-radius:10px 0 0 10px} .barcode-scan-btn{border:1px solid var(--border-strong);border-left:0;background:var(--surface);color:var(--muted);border-radius:0 10px 10px 0;cursor:pointer} .barcode-scan-btn:hover{color:var(--primary);background:var(--surface-hover)} .item-type-switch{display:inline-flex;align-items:center;width:max-content;padding:3px;border:1px solid var(--border-strong);border-radius:11px;background:var(--surface-soft);box-shadow:var(--shadow-sm)} .item-type-switch button{min-width:72px;height:30px;border:0;background:transparent;border-radius:8px;color:var(--muted);font-size:10px;font-weight:800;cursor:pointer} .item-type-switch button.active{background:var(--accent);color:var(--surface);box-shadow:var(--shadow-sm)} .item-tabs{display:inline-flex;align-items:center;width:max-content;padding:3px;background:var(--border);border-radius:9px;gap:2px} .item-tabs button{min-width:78px;height:32px;border:0;border-radius:7px;background:transparent;color:var(--text);font-weight:800;font-size:10px;cursor:pointer} .item-tabs button.active{background:var(--surface);color:var(--accent);box-shadow:var(--shadow-sm)} .item-tab-panel{display:none} .item-tab-panel.active{display:block} .item-pricing-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px} .item-price-card{border:1px solid var(--border-strong);border-radius:12px;background:var(--surface);padding:12px;min-width:0} .item-price-card.sale{border-top:2px solid var(--accent)} .item-price-card.purchase{border-top:2px solid var(--primary)} .item-price-card.mrp{border-top:2px solid var(--warning)} .item-price-card.wholesale{border-top:2px solid var(--success)} .item-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:25px;color:var(--text);font-size:9px;font-weight:850;letter-spacing:.2px} .item-card-head>span::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--primary);margin-right:6px;vertical-align:1px} .item-price-card.sale .item-card-head>span::before{background:var(--accent)} .item-price-card.purchase .item-card-head>span::before{background:var(--primary)} .item-price-card.mrp .item-card-head>span::before{background:var(--warning)} .item-price-card.wholesale .item-card-head>span::before{background:var(--success)} .price-input-row{display:grid;grid-template-columns:32px minmax(0,1fr) 52px;align-items:center;margin-top:7px} .price-input-row>span,.currency-input>span{height:38px;display:grid;place-items:center;background:var(--surface-soft);border:1px solid var(--border-strong);color:var(--muted);font-size:11px;font-weight:800} .price-input-row>span{border-radius:8px 0 0 8px;border-right:0} .price-input-row input{height:38px;border-radius:0;border-right:0} .price-input-row select{height:38px;border-radius:0 8px 8px 0;padding:0 6px;font-size:10px} .discount-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:7px} .discount-pair label{font-size:9px;font-weight:800;color:var(--muted);display:grid;gap:4px} .discount-pair input{min-height:30px;height:30px;font-size:10px} .item-help{margin:8px 0 0;padding:8px;border:1px solid var(--primary-border);border-radius:8px;background:var(--primary-soft);color:var(--primary-dark);font-size:9px;line-height:1.45} .item-help.success{border-color:color-mix(in srgb,var(--success) 25%,var(--border));background:color-mix(in srgb,var(--success) 6%,var(--surface));color:var(--success)} .item-compact-fields{display:grid;grid-template-columns:repeat(2,minmax(0,220px));gap:12px;margin-top:12px} .item-compact-fields label{display:grid;gap:5px;color:var(--muted);font-size:10px;font-weight:800} .item-stock-card{border:1px solid var(--border-strong);border-radius:14px;background:var(--surface-soft);padding:16px} .item-section-title{display:flex;align-items:center;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--border-strong)} .item-section-title>span{width:30px;height:30px;display:grid;place-items:center;border-radius:8px;background:var(--primary-soft);color:var(--primary)} .item-section-title b{display:block;font-size:12px}.item-section-title small{display:block;color:var(--muted);font-size:9px;margin-top:2px} .item-stock-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding-top:14px} .item-opening-box{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:16px;border:1px solid var(--border-strong);border-radius:10px;background:var(--surface)} .item-stock-controls{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-content:start} .item-stock-controls>label{display:grid;gap:5px;color:var(--muted);font-size:10px;font-weight:800} .item-feature-toggle{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)} .item-feature-toggle b{display:block;color:var(--text);font-size:10px}.item-feature-toggle small{display:block;color:var(--muted);font-size:9px;margin-top:2px} .switch{display:inline-flex;align-items:center;position:relative;cursor:pointer;flex:0 0 auto}.switch input{position:absolute;opacity:0;width:1px;height:1px}.switch i{width:38px;height:21px;border-radius:999px;background:var(--border-strong);position:relative;display:block;transition:.15s}.switch i:after{content:'';position:absolute;left:3px;top:3px;width:15px;height:15px;border-radius:50%;background:var(--surface);box-shadow:var(--shadow-sm);transition:.15s}.switch input:checked+i{background:var(--accent)}.switch input:checked+i:after{transform:translateX(17px)} .item-advanced-grid{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.item-advanced-grid>label{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px;border:1px solid var(--border);border-radius:9px;background:var(--surface);font-size:9px;font-weight:750;color:var(--muted)} .currency-input{display:grid;grid-template-columns:32px 1fr}.currency-input>span{border-radius:8px 0 0 8px;border-right:0}.currency-input input{border-radius:0 8px 8px 0} .mini-toggle{display:inline-flex;align-items:center;gap:5px;color:var(--muted);font-size:7px;font-weight:800;cursor:pointer}.mini-toggle input{position:absolute;opacity:0}.mini-toggle i{width:27px;height:14px;background:var(--border-strong);border-radius:999px;position:relative}.mini-toggle i:after{content:'';position:absolute;left:2px;top:2px;width:10px;height:10px;border-radius:50%;background:var(--surface);transition:.15s}.mini-toggle input:checked+i{background:var(--accent)}.mini-toggle input:checked+i:after{transform:translateX(13px)} .item-master-actions{justify-content:center!important;padding-top:2px}.item-master-actions>*{min-width:150px} .service-disabled{opacity:.55}.service-disabled input,.service-disabled select{pointer-events:none} .item-edit-page{max-width:1180px;margin:0 auto} @media(max-width:1050px){.item-master-fields{grid-template-columns:1fr 1fr}.item-master-fields label:nth-child(4),.item-master-fields label:nth-child(5),.item-master-fields label:nth-child(6){grid-column:auto}.item-pricing-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.item-stock-grid{grid-template-columns:1fr}.item-opening-box{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:700px){.item-master-modal{width:calc(100vw - 18px)}.item-master-top{grid-template-columns:1fr}.item-photo-box{height:82px}.item-master-fields{grid-template-columns:1fr}.item-pricing-grid{grid-template-columns:1fr}.item-compact-fields{grid-template-columns:1fr}.item-opening-box,.item-stock-controls{grid-template-columns:1fr}.item-advanced-grid{grid-template-columns:1fr}.item-master-actions{flex-direction:column}.item-master-actions>*{width:100%}.items-table{min-width:980px}} /* -------------------------------------------------------------------------- PRODUCT / ITEM MASTER — final visual polish Kept isolated from barcode page styles and uses existing root tokens only. -------------------------------------------------------------------------- */ .item-master-top{ grid-template-columns:140px minmax(0,1fr); gap:18px; padding:18px; border-radius:18px; background:var(--surface-soft); box-shadow:var(--shadow-sm); } .item-photo-field{width:140px;} .item-photo-box{height:108px;border-radius:18px;background:var(--surface);border-color:var(--border-strong);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--primary) 5%,transparent);} .item-photo-box:hover{border-color:var(--primary-border);background:var(--surface-hover);} .item-photo-box i{color:var(--primary);font-size:24px;opacity:.45;} .item-photo-box b{font-size:9px;color:var(--muted);} .item-master-fields{grid-template-columns:minmax(0,1.45fr) minmax(180px,.72fr) minmax(150px,.62fr);gap:14px 16px;align-items:end;} .item-master-fields label{min-width:0;position:relative;} .item-master-fields label:nth-child(4){grid-column:1/2;} .item-master-fields label:nth-child(5){grid-column:2/3;} .item-master-fields label:nth-child(6){grid-column:3/4;} .item-master-fields input,.item-master-fields select,.item-master-form input,.item-master-form select{height:42px;min-height:42px;border-radius:11px;box-sizing:border-box;} .item-master-fields .compact-field{font-size:9px;letter-spacing:.35px;color:var(--text);} .item-master-fields .field-with-action{padding-top:0;} .item-master-fields .field-action{top:-5px;} .item-master-fields .field-action .add-inline-btn{width:30px;height:27px;padding:0;display:grid;place-items:center;border-radius:8px;} .item-master-fields .field-action + select{padding-right:38px;} .barcode-input-wrap{grid-template-columns:minmax(0,1fr) 44px;} .barcode-input-wrap input{border-radius:11px 0 0 11px!important;} .barcode-scan-btn{height:42px;border-radius:0 11px 11px 0;display:grid;place-items:center;font-size:14px;} .field-help{display:block;margin-top:5px;font-size:9px;font-weight:600;color:var(--muted);line-height:1.35;} .item-type-switch{width:100%;justify-content:center;padding:3px;margin-top:2px;border-radius:11px;} .item-type-switch button{flex:1;min-width:0;} .item-tabs{margin-top:2px;} .item-price-card{padding:14px;border-radius:14px;box-shadow:var(--shadow-sm);} .item-card-head{font-size:10px;} .price-input-row>span,.price-input-row input,.price-input-row select{height:40px;} .discount-pair input{height:32px;min-height:32px;} .item-compact-fields{margin-top:14px;grid-template-columns:repeat(2,minmax(0,240px));} .item-stock-card{box-shadow:var(--shadow-sm);} .item-master-actions{display:flex;justify-content:center!important;align-items:center;gap:10px;} .item-master-actions>*{min-width:145px;} .item-master-manager{width:min(720px,calc(100vw - 28px));padding:22px;} .item-master-manager .modal-head{margin-bottom:16px;} .item-master-manager .modal-head h2{font-size:19px;} .item-master-manager .modal-head p{font-size:11px;} .item-master-manager .master-create-row{grid-template-columns:minmax(0,1fr) auto;align-items:center;} .item-master-manager .unit-master-create{grid-template-columns:minmax(0,1fr) minmax(120px,.5fr) auto;} .item-master-manager .master-create-row input{min-width:0;} .item-master-manager .master-list{max-height:390px;padding-right:2px;} .item-master-manager .master-row{min-height:56px;padding:9px 10px 9px 13px;background:var(--surface-soft);} .item-master-manager .master-row>span{min-width:0;} .item-master-manager .master-row b{display:block;font-size:12px;color:var(--text);} .item-master-manager .master-row small{display:block;margin-top:2px;font-size:9px;color:var(--muted);} .item-master-manager .master-row .icon-action{width:32px;height:32px;} .barcode-scanner-modal{width:min(560px,calc(100vw - 28px));} .barcode-scanner-view{position:relative;aspect-ratio:16/10;overflow:hidden;border:1px solid var(--border-strong);border-radius:14px;background:var(--text);} .barcode-scanner-view video{display:block;width:100%;height:100%;object-fit:cover;} .barcode-scanner-frame{position:absolute;left:14%;right:14%;top:30%;bottom:30%;border:2px solid var(--primary);border-radius:12px;box-shadow:0 0 0 999px color-mix(in srgb,var(--text) 35%,transparent);pointer-events:none;} .barcode-scanner-status{margin-top:10px;padding:9px 11px;border:1px solid var(--border);border-radius:9px;background:var(--surface-soft);font-size:10px;color:var(--muted);text-align:center;} .product-avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block;} .pos-product-suggestion .product-avatar,.purchase-suggestion .product-avatar,.pos-product-cell .product-avatar{overflow:hidden;} .pos-product-suggestion .product-avatar{width:40px;height:40px;min-width:40px;} .purchase-suggestion .product-avatar{width:36px;height:36px;min-width:36px;} .pos-product-cell .product-avatar{width:38px;height:38px;min-width:38px;} @media(max-width:900px){ .item-master-top{grid-template-columns:120px minmax(0,1fr);gap:14px;padding:14px;} .item-photo-field{width:120px;} .item-photo-box{height:100px;} .item-master-fields{grid-template-columns:1fr 1fr;gap:12px;} .item-master-fields label:nth-child(4),.item-master-fields label:nth-child(5),.item-master-fields label:nth-child(6){grid-column:auto;} } @media(max-width:680px){ .item-master-modal{width:calc(100vw - 14px);max-height:calc(100dvh - 14px);} .item-master-form{padding:12px;gap:12px;} .item-master-top{grid-template-columns:1fr;gap:12px;} .item-photo-field{width:100%;grid-template-columns:112px 1fr;align-items:center;gap:12px;} .item-photo-box{height:90px;} .item-type-switch{margin-top:0;} .item-master-fields{grid-template-columns:1fr;gap:11px;} .item-master-manager{padding:16px;} .item-master-manager .master-create-row,.item-master-manager .unit-master-create{grid-template-columns:1fr;} .item-master-manager .master-create-row button{width:100%;} .barcode-scanner-modal{padding:16px;} } /* ========================================================================== FINAL PRODUCT / ITEM FORM UI POLISH Keeps Add and Edit Product/Item forms visually consistent. All styling intentionally lives in app.css. ========================================================================== */ /* Give the Add Product modal a proper breathing area around its header. The form itself already owns the content spacing. */ .item-master-modal .modal-head{ padding:20px 22px 6px; margin:0; box-sizing:border-box; } .item-master-modal .modal-head>div{ min-width:0; } .item-master-modal .modal-head .section-kicker{ display:block; margin-bottom:5px; } .item-master-modal .modal-head h2{ margin:0; line-height:1.2; } .item-master-modal .modal-head p{ margin:5px 0 0; } .item-master-modal .modal-close{ margin:0; flex:0 0 auto; } /* Keep the three secondary fields on one clean row on desktop: Barcode | Description | Category. */ .item-master-fields{ grid-template-columns:minmax(0,1.45fr) minmax(180px,.72fr) minmax(150px,.62fr); gap:14px 16px; align-items:end; } .item-master-fields label:nth-child(4){ grid-column:1/2; } .item-master-fields label:nth-child(5){ grid-column:2/3; } .item-master-fields label:nth-child(6){ grid-column:3/4; } /* Prevent the barcode helper text from changing the alignment of the second-row controls. */ .item-master-fields .field-help{ max-width:100%; white-space:normal; } /* Price cards: Sale/Purchase have an Excl/Incl selector; MRP and Wholesale have only currency + amount. The previous three-column rule left an unused third grid column on MRP/Wholesale, making their inputs look faded or unnecessarily short. */ .item-price-card .price-input-row{ width:100%; min-width:0; box-sizing:border-box; } .item-price-card.sale .price-input-row, .item-price-card.purchase .price-input-row{ grid-template-columns:32px minmax(0,1fr) 58px; } .item-price-card.mrp .price-input-row, .item-price-card.wholesale .price-input-row{ grid-template-columns:32px minmax(0,1fr); } .item-price-card .price-input-row>span, .item-price-card .price-input-row input, .item-price-card .price-input-row select{ min-width:0; box-sizing:border-box; } .item-price-card .price-input-row input{ width:100%; } .item-price-card .price-input-row select{ width:100%; max-width:100%; padding-left:7px; padding-right:28px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* Native Excl/Incl dropdown should open from a properly sized control and never be visually clipped by the price card. */ .item-price-card.sale, .item-price-card.purchase{ overflow:visible; } .item-price-card.sale .price-input-row select, .item-price-card.purchase .price-input-row select{ position:relative; z-index:3; } /* Currency controls in Stock tab stay as one centered, continuous row. */ .item-opening-box .currency-input{ display:grid; grid-template-columns:36px minmax(0,1fr); align-items:stretch; width:100%; min-width:0; } .item-opening-box .currency-input>span{ height:42px; min-height:42px; box-sizing:border-box; display:grid; place-items:center; } .item-opening-box .currency-input input{ height:42px; min-height:42px; min-width:0; width:100%; box-sizing:border-box; } /* Consistent spacing inside the stock card. */ .item-stock-card{ box-sizing:border-box; } .item-opening-box, .item-stock-controls{ min-width:0; } .item-opening-box>label{ min-width:0; } .item-opening-box input, .item-opening-box select, .item-stock-controls input, .item-stock-controls select{ min-width:0; box-sizing:border-box; } /* Edit page gets the same visual breathing room as the Add modal content. */ .item-edit-page{ box-sizing:border-box; } .item-edit-page .item-master-form{ padding:18px; } /* Keep action buttons comfortably separated from the form edges. */ .item-master-actions{ margin-top:2px; padding:4px 0 2px; } /* Tablet */ @media(max-width:1050px){ .item-master-modal .modal-head{ padding:18px 18px 5px; } .item-master-fields{ grid-template-columns:minmax(0,1.4fr) minmax(160px,.75fr); } .item-master-fields label:nth-child(4), .item-master-fields label:nth-child(5), .item-master-fields label:nth-child(6){ grid-column:auto; } .item-price-card.sale .price-input-row, .item-price-card.purchase .price-input-row{ grid-template-columns:32px minmax(0,1fr) 60px; } } /* Mobile */ @media(max-width:680px){ .item-master-modal .modal-head{ padding:16px 16px 4px; } .item-master-form{ padding:12px 14px 16px; } .item-master-fields{ grid-template-columns:1fr; gap:11px; } .item-master-fields label:nth-child(4), .item-master-fields label:nth-child(5), .item-master-fields label:nth-child(6){ grid-column:auto; } .item-price-card.sale .price-input-row, .item-price-card.purchase .price-input-row{ grid-template-columns:32px minmax(0,1fr) 62px; } .item-price-card.mrp .price-input-row, .item-price-card.wholesale .price-input-row{ grid-template-columns:32px minmax(0,1fr); } .item-edit-page .item-master-form{ padding:12px 0 16px; } .item-master-modal .modal-close{ margin-top:0; } } /* ============================================================================ PRODUCT / ITEM MASTER — RESPONSIVE FINAL UI FIX Scoped only to Add/Edit Product & Item screens. Barcode page is untouched. All styling remains in app.css. ============================================================================ */ .item-master-modal { width: min(1120px, calc(100vw - 32px)); max-width: 1120px; max-height: calc(100dvh - 32px); margin: 0; padding: 0; overflow: hidden auto; border: 1px solid var(--border); border-radius: 20px; box-sizing: border-box; } .item-master-modal .modal-head { padding: 22px 24px 8px; margin: 0; gap: 18px; align-items: flex-start; box-sizing: border-box; } .item-master-modal .modal-head h2 { margin: 2px 0 3px; font-size: 21px; line-height: 1.2; } .item-master-modal .modal-head p { margin: 0; font-size: 11px; line-height: 1.45; } .item-master-modal .modal-close { margin: 0; width: 38px; height: 38px; flex: 0 0 38px; border-radius: 10px; } .item-master-form { width: 100%; display: grid; gap: 16px; padding: 16px 24px 22px; box-sizing: border-box; } .item-master-top { display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: 18px; align-items: start; padding: 18px; border: 1px solid var(--primary-border); border-radius: 17px; background: var(--surface-soft); box-sizing: border-box; min-width: 0; } .item-photo-field { width: 136px; min-width: 0; display: grid; gap: 10px; align-content: start; } .item-photo-box { width: 100%; height: 104px; min-height: 104px; box-sizing: border-box; border-radius: 16px; } .item-type-switch { width: 100%; min-height: 34px; box-sizing: border-box; margin: 0; } .item-type-switch button { flex: 1 1 0; min-width: 0; height: 30px; } .item-master-fields { min-width: 0; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(150px, .72fr) minmax(135px, .62fr); gap: 13px 15px; align-items: end; } .item-master-fields label { min-width: 0; max-width: 100%; } .item-master-fields label:nth-child(4), .item-master-fields label:nth-child(5), .item-master-fields label:nth-child(6) { grid-column: auto; } .item-master-fields .compact-field { min-width: 0; color: var(--text); font-size: 9px; font-weight: 800; letter-spacing: .3px; line-height: 1.25; } .item-master-fields input, .item-master-fields select, .item-master-form input, .item-master-form select { width: 100%; max-width: 100%; min-width: 0; min-height: 42px; height: 42px; box-sizing: border-box; border-radius: 11px; } .item-master-fields .field-action { top: -5px; right: 0; } .item-master-fields .field-action .add-inline-btn { width: 30px; height: 28px; padding: 0; display: grid; place-items: center; border-radius: 8px; } .item-master-fields .field-action + select { padding-right: 40px; } .barcode-input-wrap { width: 100%; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 0; } .barcode-input-wrap input { width: 100%; min-width: 0; border-radius: 11px 0 0 11px !important; } .barcode-scan-btn { width: 44px; min-width: 44px; height: 42px; display: grid; place-items: center; box-sizing: border-box; border-radius: 0 11px 11px 0; } .item-master-fields .field-help { display: block; max-width: 100%; margin-top: 5px; font-size: 8.5px; line-height: 1.35; color: var(--muted); } /* Pricing cards never allow an input to overflow or fade at the right edge. */ .item-pricing-grid { width: 100%; min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; } .item-price-card { width: 100%; min-width: 0; box-sizing: border-box; padding: 14px; overflow: visible; border-radius: 14px; } .item-card-head { min-width: 0; gap: 7px; } .item-card-head > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .item-price-card .price-input-row { width: 100%; min-width: 0; display: grid; align-items: stretch; box-sizing: border-box; margin-top: 8px; } .item-price-card.sale .price-input-row, .item-price-card.purchase .price-input-row { grid-template-columns: 32px minmax(0, 1fr) 66px; } .item-price-card.mrp .price-input-row, .item-price-card.wholesale .price-input-row { grid-template-columns: 32px minmax(0, 1fr); } .item-price-card .price-input-row > span, .item-price-card .price-input-row input, .item-price-card .price-input-row select { width: 100%; min-width: 0; max-width: 100%; height: 40px; min-height: 40px; box-sizing: border-box; opacity: 1; } .item-price-card .price-input-row > span { border-radius: 8px 0 0 8px; border-right: 0; } .item-price-card .price-input-row input { border-radius: 0; border-right: 0; background: var(--surface); color: var(--text); padding-left: 10px; padding-right: 8px; } .item-price-card .price-input-row select { appearance: auto; border-radius: 0 8px 8px 0; padding: 0 22px 0 7px; font-size: 10px; font-weight: 700; background-color: var(--surface); color: var(--text); cursor: pointer; } .item-price-card .discount-pair { min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .item-price-card .discount-pair label, .item-compact-fields label, .item-opening-box > label, .item-stock-controls > label { min-width: 0; } .item-price-card .discount-pair input { width: 100%; min-width: 0; box-sizing: border-box; height: 32px; min-height: 32px; } .item-help { min-width: 0; box-sizing: border-box; } /* Stock tab: currency symbol and amount are one clean centered control. */ .item-opening-box .currency-input { width: 100%; min-width: 0; display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: stretch; } .item-opening-box .currency-input > span { width: 36px; height: 42px; min-height: 42px; box-sizing: border-box; display: grid; place-items: center; border-radius: 8px 0 0 8px; border-right: 0; } .item-opening-box .currency-input input { width: 100%; min-width: 0; height: 42px; min-height: 42px; box-sizing: border-box; border-radius: 0 8px 8px 0; padding-left: 10px; } .item-opening-box, .item-stock-controls, .item-stock-card, .item-stock-grid { min-width: 0; box-sizing: border-box; } .item-stock-card { padding: 16px; border-radius: 14px; } .item-stock-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; } .item-opening-box { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 14px; } .item-opening-box input, .item-opening-box select, .item-stock-controls input, .item-stock-controls select { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; } /* Edit page uses the same visual container rhythm as Add. */ .item-edit-page { width: 100%; max-width: 1180px; margin: 0 auto; box-sizing: border-box; } .item-edit-page .panel-head { padding: 2px 2px 14px; margin-bottom: 0; } .item-edit-page .item-master-form { padding: 4px 18px 18px; } .item-master-actions { display: flex; justify-content: center !important; align-items: center; gap: 10px; padding: 4px 0 2px; margin-top: 0; } .item-master-actions > * { min-width: 145px; } /* Tablet */ @media (max-width: 1050px) { .item-master-top { grid-template-columns: 120px minmax(0, 1fr); gap: 15px; padding: 15px; } .item-photo-field { width: 120px; } .item-master-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .item-master-fields label:nth-child(4), .item-master-fields label:nth-child(5), .item-master-fields label:nth-child(6) { grid-column: auto; } .item-pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .item-stock-grid { grid-template-columns: 1fr; } } /* Mobile / small tablets */ @media (max-width: 680px) { .item-master-modal { width: calc(100vw - 20px); max-width: calc(100vw - 20px); max-height: calc(100dvh - 20px); border-radius: 17px; } .item-master-modal .modal-head { padding: 16px 16px 8px; gap: 12px; } .item-master-modal .modal-head h2 { font-size: 19px; } .item-master-form { padding: 10px 14px 16px; gap: 12px; } .item-master-top { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 12px; border-radius: 14px; } .item-photo-field { width: 96px; } .item-photo-box { height: 82px; min-height: 82px; border-radius: 13px; } .item-photo-box i { font-size: 20px; } .item-type-switch { min-height: 31px; } .item-type-switch button { height: 27px; font-size: 9px; } .item-master-fields { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .item-master-fields label:nth-child(1) { grid-column: 1 / -1; } .item-master-fields label:nth-child(2), .item-master-fields label:nth-child(3), .item-master-fields label:nth-child(5), .item-master-fields label:nth-child(6) { grid-column: auto; } .item-master-fields label:nth-child(4) { grid-column: 1 / -1; } .item-master-fields input, .item-master-fields select, .item-master-form input, .item-master-form select { height: 40px; min-height: 40px; font-size: 12px; } .barcode-scan-btn { height: 40px; } .item-pricing-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .item-price-card { padding: 11px; border-radius: 12px; } .item-price-card.sale .price-input-row, .item-price-card.purchase .price-input-row { grid-template-columns: 30px minmax(0, 1fr) 58px; } .item-price-card .price-input-row > span, .item-price-card .price-input-row input, .item-price-card .price-input-row select { height: 38px; min-height: 38px; } .item-price-card .price-input-row select { padding-left: 5px; padding-right: 17px; font-size: 9px; } .item-card-head { font-size: 9px; } .item-help { font-size: 8px; padding: 7px; } .item-stock-card { padding: 12px; } .item-opening-box { grid-template-columns: 1fr 1fr; padding: 12px; gap: 10px; } .item-stock-controls { grid-template-columns: 1fr 1fr; } .item-advanced-grid { grid-template-columns: 1fr; } .item-master-actions { gap: 8px; } .item-master-actions > * { min-width: 0; flex: 1 1 0; } .item-edit-page .item-master-form { padding: 4px 0 14px; } } /* Very small phones: keep controls readable rather than forcing a cramped row. */ @media (max-width: 430px) { .item-master-modal { width: calc(100vw - 12px); max-width: calc(100vw - 12px); max-height: calc(100dvh - 12px); border-radius: 15px; } .item-master-modal .modal-head { padding: 13px 13px 7px; } .item-master-form { padding: 8px 10px 12px; } .item-master-top { grid-template-columns: 86px minmax(0, 1fr); gap: 10px; padding: 10px; } .item-photo-field { width: 86px; } .item-photo-box { height: 74px; min-height: 74px; } .item-master-fields { grid-template-columns: 1fr; gap: 9px; } .item-master-fields label:nth-child(1), .item-master-fields label:nth-child(2), .item-master-fields label:nth-child(3), .item-master-fields label:nth-child(4), .item-master-fields label:nth-child(5), .item-master-fields label:nth-child(6) { grid-column: 1 / -1; } .item-pricing-grid { grid-template-columns: 1fr; } .item-price-card.sale .price-input-row, .item-price-card.purchase .price-input-row { grid-template-columns: 32px minmax(0, 1fr) 64px; } .item-opening-box, .item-stock-controls { grid-template-columns: 1fr; } .item-master-actions { flex-direction: column; } .item-master-actions > * { width: 100%; flex: 1 1 auto; } } /* ========================================================================== PRODUCT / ITEM MASTER — FINAL ALIGNMENT PATCH UI-only correction. No PHP/JS/barcode functionality changes. ========================================================================== */ /* Keep Barcode / Description / Category controls aligned on the same horizontal baseline. The barcode helper text must never push its input downward relative to the other controls. */ .item-master-fields{ align-items:start !important; } .item-master-fields > .compact-field{ align-self:start; min-width:0; } .item-master-fields .field-help{ display:block; margin:5px 0 0; min-height:0; line-height:1.3; } /* Price controls are one clean, equal-height group. */ .item-price-card .price-input-row{ height:40px; min-height:40px; grid-auto-flow:column; overflow:visible; } .item-price-card.sale .price-input-row, .item-price-card.purchase .price-input-row{ grid-template-columns:32px minmax(0,1fr) 58px !important; } .item-price-card .price-input-row > span, .item-price-card .price-input-row > input, .item-price-card .price-input-row > select{ height:40px !important; min-height:40px !important; max-height:40px; margin:0; box-sizing:border-box; } /* Keep Excl / Incl selector visually the same height as the amount input and give it enough room without making it oversized. */ .item-price-card.sale .price-input-row select, .item-price-card.purchase .price-input-row select{ width:58px; min-width:58px; max-width:58px; padding:0 18px 0 7px; } /* MRP and wholesale contain only ₹ + amount. Clip the joined control at the card boundary so the input can never visually bleed outside. */ .item-price-card.mrp .price-input-row, .item-price-card.wholesale .price-input-row{ grid-template-columns:32px minmax(0,1fr) !important; overflow:hidden; border-radius:8px; } .item-price-card.mrp .price-input-row > input, .item-price-card.wholesale .price-input-row > input{ width:100% !important; min-width:0 !important; max-width:none !important; border-radius:0; } /* Make the complete price row respect the card's available width. */ .item-price-card, .item-price-card .price-input-row, .item-price-card .discount-pair{ min-width:0; max-width:100%; box-sizing:border-box; } /* Avoid long labels/toggle controls forcing a price card wider than its grid track. */ .item-card-head{ min-width:0; max-width:100%; } .item-card-head > span, .item-card-head .mini-toggle{ min-width:0; } .item-card-head .mini-toggle span{ white-space:nowrap; } /* Stock currency control: ₹ and amount remain one continuous centered row. */ .item-opening-box .currency-input{ grid-template-columns:36px minmax(0,1fr) !important; width:100%; min-width:0; max-width:100%; overflow:hidden; border-radius:8px; } .item-opening-box .currency-input > span, .item-opening-box .currency-input > input{ width:100%; min-width:0; max-width:none; box-sizing:border-box; } /* Add modal header/content breathing room. */ .item-master-modal{ box-sizing:border-box; } .item-master-modal .modal-head{ padding:20px 24px 8px !important; } .item-master-modal .modal-close{ margin:0 !important; } .item-master-form{ padding:14px 24px 20px !important; } /* Desktop/tablet: keep the three secondary controls on one row. */ @media (min-width:681px){ .item-master-fields{ grid-template-columns:minmax(0,1.45fr) minmax(0,.72fr) minmax(0,.62fr); } .item-master-fields label:nth-child(4), .item-master-fields label:nth-child(5), .item-master-fields label:nth-child(6){ grid-column:auto !important; } } /* Tablet: keep controls readable while preserving the same alignment. */ @media (max-width:1050px){ .item-master-modal .modal-head{ padding:18px 20px 7px !important; } .item-master-form{ padding:13px 20px 18px !important; } .item-master-fields{ grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start !important; } .item-price-card.sale .price-input-row, .item-price-card.purchase .price-input-row{ grid-template-columns:32px minmax(0,1fr) 58px !important; } } /* Phones: use a true single-column form rather than squeezing the secondary controls. */ @media (max-width:680px){ .item-master-modal{ width:calc(100vw - 16px); max-width:calc(100vw - 16px); max-height:calc(100dvh - 16px); margin:8px; box-sizing:border-box; } .item-master-modal .modal-head{ padding:15px 15px 7px !important; } .item-master-form{ padding:10px 13px 15px !important; } .item-master-top{ grid-template-columns:1fr !important; gap:12px; padding:12px; } .item-photo-field{ width:100%; grid-template-columns:96px minmax(0,1fr); align-items:center; } .item-photo-box{ width:96px; height:84px; min-height:84px; } .item-master-fields{ grid-template-columns:1fr !important; gap:10px; align-items:start !important; } .item-master-fields label:nth-child(1), .item-master-fields label:nth-child(2), .item-master-fields label:nth-child(3), .item-master-fields label:nth-child(4), .item-master-fields label:nth-child(5), .item-master-fields label:nth-child(6){ grid-column:1/-1 !important; } .item-price-card.sale .price-input-row, .item-price-card.purchase .price-input-row{ grid-template-columns:32px minmax(0,1fr) 58px !important; } .item-price-card.sale .price-input-row select, .item-price-card.purchase .price-input-row select{ width:58px; min-width:58px; max-width:58px; } .item-pricing-grid{ grid-template-columns:1fr 1fr; } } /* Small phones: stack pricing cards so nothing becomes cramped. */ @media (max-width:430px){ .item-master-modal{ width:calc(100vw - 10px); max-width:calc(100vw - 10px); max-height:calc(100dvh - 10px); margin:5px; } .item-master-modal .modal-head{ padding:13px 13px 6px !important; } .item-master-form{ padding:9px 10px 13px !important; } .item-master-top{ padding:10px; } .item-photo-field{ grid-template-columns:88px minmax(0,1fr); } .item-photo-box{ width:88px; height:76px; min-height:76px; } .item-pricing-grid{ grid-template-columns:1fr; } .item-price-card.sale .price-input-row, .item-price-card.purchase .price-input-row{ grid-template-columns:32px minmax(0,1fr) 58px !important; } } /* ============================================================================ V19 — PRODUCT / ITEM PRICING + MODAL FINAL POLISH Scoped to Add/Edit Product & Item screens. No barcode-page styles changed. ============================================================================ */ /* Keep the pricing grid stable: every card owns its full width and never allows a child control to force the grid track wider than the card. */ .item-pricing-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; width: 100%; min-width: 0; align-items: stretch; } .item-price-card { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; padding: 14px; overflow: hidden; } .item-price-card .item-card-head { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; } .item-price-card .price-input-row { display: grid; width: 100%; min-width: 0; max-width: 100%; height: 40px; min-height: 40px; margin-top: 8px; align-items: stretch; box-sizing: border-box; overflow: hidden; border: 1px solid var(--border-strong); border-radius: 9px; background: var(--surface); } /* Sale and purchase: ₹ + amount + Excl/Incl are one equal-height control. */ .item-price-card.sale .price-input-row, .item-price-card.purchase .price-input-row { grid-template-columns: 32px minmax(0, 1fr) 58px !important; } .item-price-card .price-input-row > span, .item-price-card .price-input-row > input, .item-price-card .price-input-row > select { width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: 38px !important; min-height: 38px !important; max-height: 38px !important; margin: 0 !important; box-sizing: border-box !important; border-radius: 0 !important; border-top: 0 !important; border-bottom: 0 !important; } .item-price-card .price-input-row > span { display: grid; place-items: center; background: var(--surface-soft); color: var(--muted); border-left: 0 !important; border-right: 1px solid var(--border) !important; font-size: 11px; font-weight: 800; } .item-price-card .price-input-row > input { background: var(--surface) !important; color: var(--text) !important; border-left: 0 !important; border-right: 1px solid var(--border) !important; padding: 0 10px !important; outline: none; } .item-price-card .price-input-row > select { appearance: auto; background: var(--surface) !important; color: var(--text) !important; border-left: 0 !important; border-right: 0 !important; padding: 0 7px !important; font-size: 10px !important; font-weight: 700 !important; line-height: 38px !important; cursor: pointer; outline: none; } /* MRP and wholesale: ₹ + amount use the complete card width, including a visible right edge. This removes the faded/unfinished look at the end. */ .item-price-card.mrp .price-input-row, .item-price-card.wholesale .price-input-row { grid-template-columns: 32px minmax(0, 1fr) !important; } .item-price-card.mrp .price-input-row > input, .item-price-card.wholesale .price-input-row > input { border-right: 0 !important; border-left: 0 !important; padding-right: 10px !important; } /* Keep discount fields completely inside their cards. */ .item-price-card .discount-pair { width: 100%; min-width: 0; max-width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; box-sizing: border-box; } .item-price-card .discount-pair label { min-width: 0; max-width: 100%; overflow: hidden; } .item-price-card .discount-pair input { width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: 32px !important; min-height: 32px !important; box-sizing: border-box !important; } /* Help boxes must not create horizontal overflow inside narrow cards. */ .item-price-card .item-help { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; overflow-wrap: anywhere; } /* Make the two compact pricing fields line up cleanly below the cards. */ .item-compact-fields { width: 100%; min-width: 0; grid-template-columns: repeat(2, minmax(0, 240px)); gap: 12px; box-sizing: border-box; } .item-compact-fields label { min-width: 0; } .item-compact-fields input { width: 100%; min-width: 0; box-sizing: border-box; } /* Add/Edit modal: consistent breathing room around the title and close control, especially on small screens. */ .item-master-modal { width: min(1120px, calc(100vw - 32px)); max-width: 1120px; max-height: calc(100dvh - 32px); box-sizing: border-box; overflow-x: hidden; overflow-y: auto; border-radius: 20px; } .item-master-modal .modal-head { padding: 22px 24px 8px !important; margin: 0 !important; box-sizing: border-box; } .item-master-modal .modal-head > div { min-width: 0; } .item-master-modal .modal-close { flex: 0 0 38px; width: 38px; height: 38px; margin: 0 !important; } .item-master-form { width: 100%; min-width: 0; box-sizing: border-box; padding: 16px 24px 22px !important; } /* Desktop/tablet: barcode, description and category occupy the same second row. The barcode helper stays beneath its own control without changing the horizontal position of the other two fields. */ @media (min-width: 681px) { .item-master-fields { grid-template-columns: minmax(0, 1.45fr) minmax(180px, .72fr) minmax(150px, .62fr) !important; gap: 12px 16px; align-items: start !important; } .item-master-fields label:nth-child(4), .item-master-fields label:nth-child(5), .item-master-fields label:nth-child(6) { grid-column: auto !important; } .item-master-fields .field-help { display: block; min-height: 0; margin: 5px 0 0; line-height: 1.3; } } /* The edit page uses the exact same pricing sizing as the Add modal. */ .item-edit-page .item-pricing-grid, .item-edit-page .item-price-card, .item-edit-page .price-input-row, .item-edit-page .discount-pair { min-width: 0; max-width: 100%; box-sizing: border-box; } /* Toast/error messages must always sit above an open product modal. */ .toast, body:has(.item-master-modal.show) .toast { position: fixed !important; z-index: 2000000 !important; pointer-events: none; } /* If a server-side notice is rendered while the modal is present, keep it visually above the backdrop as well. */ body:has(.item-master-modal.show) .flash, body:has(.item-master-modal.show) .notice { position: relative; z-index: 2000001; } /* Tablet: two pricing cards per row while retaining the same control sizes. */ @media (max-width: 1050px) { .item-pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .item-price-card.sale .price-input-row, .item-price-card.purchase .price-input-row { grid-template-columns: 32px minmax(0, 1fr) 58px !important; } } /* Phone: stack everything so no pricing control is squeezed or clipped. */ @media (max-width: 680px) { .item-master-modal { width: calc(100vw - 16px); max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); margin: 0; border-radius: 16px; } .item-master-modal .modal-head { padding: 16px 16px 8px !important; } .item-master-modal .modal-head h2 { font-size: 19px; } .item-master-form { padding: 10px 14px 16px !important; gap: 12px; } .item-master-top { grid-template-columns: 1fr !important; gap: 12px; padding: 12px; } .item-photo-field { width: 100%; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: center; } .item-photo-box { width: 96px; height: 82px; min-height: 82px; } .item-master-fields { grid-template-columns: 1fr !important; gap: 10px; } .item-master-fields label:nth-child(1), .item-master-fields label:nth-child(2), .item-master-fields label:nth-child(3), .item-master-fields label:nth-child(4), .item-master-fields label:nth-child(5), .item-master-fields label:nth-child(6) { grid-column: 1 / -1 !important; } .item-pricing-grid { grid-template-columns: 1fr !important; gap: 10px; } .item-price-card { padding: 13px; } .item-price-card.sale .price-input-row, .item-price-card.purchase .price-input-row { grid-template-columns: 32px minmax(0, 1fr) 58px !important; } .item-compact-fields { grid-template-columns: 1fr !important; gap: 10px; } .item-master-actions { width: 100%; flex-direction: column; gap: 9px; } .item-master-actions > * { width: 100%; min-width: 0; } } @media (max-width: 380px) { .item-master-modal { width: calc(100vw - 10px); max-width: calc(100vw - 10px); max-height: calc(100dvh - 10px); } .item-master-modal .modal-head { padding: 13px 13px 7px !important; } .item-master-form { padding: 8px 10px 13px !important; } .item-master-top { padding: 10px; } .item-photo-field { grid-template-columns: 86px minmax(0, 1fr); } .item-photo-box { width: 86px; height: 74px; min-height: 74px; } } /* ============================================================================ FINAL PRODUCT PRICING CONTROL FIX Add/Edit Product — Sale & Purchase price controls ============================================================================ */ .item-price-card.sale, .item-price-card.purchase { min-width: 0; overflow: visible !important; } .item-price-card.sale .price-input-row, .item-price-card.purchase .price-input-row { display: grid !important; grid-template-columns: 32px minmax(0, 1fr) 54px !important; width: 100% !important; height: 40px !important; min-height: 40px !important; max-height: 40px !important; margin: 8px 0 0 !important; padding: 0 !important; overflow: visible !important; border: 1px solid var(--border-strong) !important; border-radius: 9px !important; background: var(--surface) !important; box-sizing: border-box !important; align-items: stretch !important; } .item-price-card.sale .price-input-row > span, .item-price-card.purchase .price-input-row > span { width: 32px !important; height: 38px !important; min-height: 38px !important; max-height: 38px !important; padding: 0 !important; margin: 0 !important; display: grid !important; place-items: center !important; border: 0 !important; border-right: 1px solid var(--border) !important; border-radius: 8px 0 0 8px !important; background: var(--surface-soft) !important; color: var(--muted) !important; font-size: 11px !important; font-weight: 800 !important; line-height: 1 !important; box-sizing: border-box !important; } .item-price-card.sale .price-input-row > input, .item-price-card.purchase .price-input-row > input { width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: 38px !important; min-height: 38px !important; max-height: 38px !important; margin: 0 !important; padding: 0 9px !important; border: 0 !important; border-right: 1px solid var(--border) !important; border-radius: 0 !important; background: var(--surface) !important; color: var(--text) !important; outline: none !important; box-shadow: none !important; font-size: 12px !important; line-height: 38px !important; box-sizing: border-box !important; } .item-price-card.sale .price-input-row > select, .item-price-card.purchase .price-input-row > select { display: block !important; position: relative !important; z-index: 20 !important; pointer-events: auto !important; width: 54px !important; min-width: 54px !important; max-width: 54px !important; height: 38px !important; min-height: 38px !important; max-height: 38px !important; margin: 0 !important; padding: 0 17px 0 5px !important; border: 0 !important; border-radius: 0 8px 8px 0 !important; background-color: var(--surface) !important; color: var(--text) !important; appearance: none !important; -webkit-appearance: none !important; font-family: inherit !important; font-size: 10px !important; font-weight: 700 !important; line-height: 38px !important; text-align: center !important; text-align-last: center !important; cursor: pointer !important; outline: none !important; box-shadow: none !important; box-sizing: border-box !important; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%) !important; background-position: calc(100% - 9px) 16px, calc(100% - 5px) 16px !important; background-size: 4px 4px, 4px 4px !important; background-repeat: no-repeat !important; } .item-price-card.sale .price-input-row > select:hover, .item-price-card.purchase .price-input-row > select:hover { background-color: var(--surface-soft) !important; } .item-price-card.sale .price-input-row > select:focus, .item-price-card.purchase .price-input-row > select:focus { background-color: var(--surface) !important; box-shadow: inset 0 0 0 1px var(--primary-border) !important; } .item-price-card.sale .price-input-row:focus-within, .item-price-card.purchase .price-input-row:focus-within { border-color: var(--primary-border-strong) !important; box-shadow: 0 0 0 3px var(--primary-ring) !important; } /* Keep both controls visually identical on the edit screen as well. */ .item-edit-page .item-price-card.sale .price-input-row, .item-edit-page .item-price-card.purchase .price-input-row { grid-template-columns: 32px minmax(0, 1fr) 54px !important; } /* Never let the selector become squeezed on small desktop/tablet widths. */ @media (max-width: 1050px) { .item-price-card.sale .price-input-row, .item-price-card.purchase .price-input-row { grid-template-columns: 32px minmax(0, 1fr) 54px !important; } } @media (max-width: 680px) { .item-price-card.sale .price-input-row, .item-price-card.purchase .price-input-row { grid-template-columns: 32px minmax(0, 1fr) 54px !important; } } @media (max-width: 360px) { .item-price-card.sale .price-input-row, .item-price-card.purchase .price-input-row { grid-template-columns: 30px minmax(0, 1fr) 52px !important; } .item-price-card.sale .price-input-row > span, .item-price-card.purchase .price-input-row > span { width: 30px !important; } .item-price-card.sale .price-input-row > select, .item-price-card.purchase .price-input-row > select { width: 52px !important; min-width: 52px !important; max-width: 52px !important; padding-left: 3px !important; padding-right: 15px !important; } } /* ============================================================================ V20 — PRICE TAX MODE SELECTOR Dedicated Excl / Incl control for Add + Edit Product / Item. Keeps the native select as the form value source while presenting a clean, theme-matched dropdown. No barcode-page styles are affected. ============================================================================ */ .price-tax-control{ position:relative; display:block; width:100%; min-width:0; height:38px; z-index:30; box-sizing:border-box; } .price-tax-control .price-tax-native{ position:absolute !important; width:1px !important; height:1px !important; min-width:1px !important; max-width:1px !important; min-height:1px !important; max-height:1px !important; margin:-1px !important; padding:0 !important; border:0 !important; overflow:hidden !important; clip:rect(0 0 0 0) !important; clip-path:inset(50%) !important; white-space:nowrap !important; opacity:0 !important; pointer-events:none !important; } .price-tax-button{ appearance:none; -webkit-appearance:none; width:100%; height:38px; min-height:38px; margin:0; padding:0 19px 0 7px; border:0; border-radius:0 8px 8px 0; background:var(--surface); color:var(--text); font-family:inherit; font-size:10px; font-weight:700; line-height:38px; text-align:center; white-space:nowrap; cursor:pointer; position:relative; box-sizing:border-box; transition:background-color .16s ease, color .16s ease; } .price-tax-button::after{ content:''; position:absolute; right:7px; top:50%; width:6px; height:6px; border-right:1.5px solid var(--muted); border-bottom:1.5px solid var(--muted); transform:translateY(-65%) rotate(45deg); transition:transform .16s ease, border-color .16s ease; } .price-tax-control.is-open .price-tax-button{ background:var(--surface-soft); color:var(--primary-dark); } .price-tax-control.is-open .price-tax-button::after{ transform:translateY(-30%) rotate(225deg); border-color:var(--primary); } .price-tax-button:focus-visible{ outline:none; box-shadow:inset 0 0 0 1px var(--primary-border-strong); } .price-tax-menu{ position:absolute; top:calc(100% + 5px); right:0; width:100%; min-width:64px; padding:4px; margin:0; border:1px solid var(--border-strong); border-radius:9px; background:var(--surface); box-shadow:0 12px 28px rgba(15,23,42,.14); opacity:0; visibility:hidden; transform:translateY(-4px); pointer-events:none; transition:opacity .14s ease, transform .14s ease, visibility .14s ease; box-sizing:border-box; z-index:100000; } .price-tax-control.is-open .price-tax-menu{ opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto; } .price-tax-option{ display:flex; align-items:center; justify-content:center; width:100%; min-height:31px; padding:0 6px; border:0; border-radius:6px; background:transparent; color:var(--text); font-family:inherit; font-size:10px; font-weight:700; line-height:1; cursor:pointer; box-sizing:border-box; transition:background-color .14s ease, color .14s ease; } .price-tax-option:hover, .price-tax-option:focus-visible{ outline:none; background:var(--primary-soft); color:var(--primary-dark); } .price-tax-option.is-selected{ background:var(--primary-soft); color:var(--primary); } .item-price-card.sale .price-tax-control, .item-price-card.purchase .price-tax-control{ width:54px; min-width:54px; max-width:54px; } .item-price-card.sale .price-input-row > .price-tax-control, .item-price-card.purchase .price-input-row > .price-tax-control{ grid-column:3; grid-row:1; align-self:stretch; } .item-price-card.sale .price-input-row, .item-price-card.purchase .price-input-row{ overflow:visible !important; } @media (max-width:680px){ .item-price-card.sale .price-tax-control, .item-price-card.purchase .price-tax-control{ width:54px; min-width:54px; max-width:54px; } .price-tax-menu{ min-width:62px; } } @media (max-width:360px){ .item-price-card.sale .price-tax-control, .item-price-card.purchase .price-tax-control{ width:52px; min-width:52px; max-width:52px; } } /* ============================================================================ V21 — EXCL / INCL SINGLE-CONTROL FIX The native select remains in the form for submission, but is completely removed from the visual layout. Only the dedicated custom control is shown. This prevents the native select + custom selector from appearing twice. ============================================================================ */ .price-tax-control{ position:relative !important; display:block !important; width:54px !important; min-width:54px !important; max-width:54px !important; height:38px !important; min-height:38px !important; box-sizing:border-box !important; overflow:visible !important; z-index:100 !important; } .price-tax-control .price-tax-native{ display:none !important; position:absolute !important; width:0 !important; height:0 !important; min-width:0 !important; max-width:0 !important; min-height:0 !important; max-height:0 !important; margin:0 !important; padding:0 !important; border:0 !important; opacity:0 !important; visibility:hidden !important; pointer-events:none !important; overflow:hidden !important; } .price-tax-control .price-tax-button{ display:block !important; width:54px !important; min-width:54px !important; max-width:54px !important; height:38px !important; min-height:38px !important; max-height:38px !important; margin:0 !important; box-sizing:border-box !important; border:1px solid var(--primary-border) !important; border-radius:8px !important; background:var(--surface) !important; color:var(--text) !important; padding:0 17px 0 5px !important; font:700 10px/38px inherit !important; text-align:center !important; white-space:nowrap !important; overflow:hidden !important; cursor:pointer !important; } .price-tax-control .price-tax-button:hover{ background:var(--surface-soft) !important; border-color:var(--primary-border-strong) !important; } .price-tax-control .price-tax-button::after{ right:7px !important; width:6px !important; height:6px !important; } .price-tax-control .price-tax-menu{ display:block !important; position:absolute !important; top:calc(100% + 5px) !important; right:0 !important; left:auto !important; width:76px !important; min-width:76px !important; max-width:76px !important; height:auto !important; min-height:0 !important; max-height:none !important; padding:4px !important; margin:0 !important; box-sizing:border-box !important; border:1px solid var(--border-strong) !important; border-radius:9px !important; background:var(--surface) !important; box-shadow:0 12px 28px rgba(15,23,42,.14) !important; opacity:0 !important; visibility:hidden !important; pointer-events:none !important; transform:translateY(-4px) !important; overflow:visible !important; z-index:999999 !important; } .price-tax-control.is-open .price-tax-menu{ opacity:1 !important; visibility:visible !important; pointer-events:auto !important; transform:translateY(0) !important; } .price-tax-control .price-tax-option{ display:flex !important; align-items:center !important; justify-content:center !important; width:100% !important; min-width:0 !important; min-height:31px !important; height:31px !important; max-height:31px !important; margin:0 !important; padding:0 6px !important; box-sizing:border-box !important; border:0 !important; border-radius:6px !important; background:transparent !important; color:var(--text) !important; font:700 10px/31px inherit !important; white-space:nowrap !important; cursor:pointer !important; } .price-tax-control .price-tax-option:hover, .price-tax-control .price-tax-option:focus-visible, .price-tax-control .price-tax-option.is-selected{ background:var(--primary-soft) !important; color:var(--primary) !important; outline:none !important; } /* Keep the selector as the third column without changing the other price controls. */ .item-price-card.sale .price-input-row > .price-tax-control, .item-price-card.purchase .price-input-row > .price-tax-control{ grid-column:3 !important; grid-row:1 !important; align-self:stretch !important; } @media (max-width:360px){ .price-tax-control, .item-price-card.sale .price-tax-control, .item-price-card.purchase .price-tax-control{ width:52px !important; min-width:52px !important; max-width:52px !important; } .price-tax-control .price-tax-button{ width:52px !important; min-width:52px !important; max-width:52px !important; } } /* -------------------------------------------------------------------------- Product master final field layout SKU / Model No. is part of the product identity row. Barcode, description and category remain aligned in the second row. -------------------------------------------------------------------------- */ @media (min-width: 1051px) { .item-master-fields { grid-template-columns: minmax(220px, 1.45fr) minmax(150px, .82fr) minmax(150px, .72fr) minmax(150px, .72fr) !important; gap: 12px 14px !important; align-items: start !important; } .item-master-fields label:nth-child(1) { grid-column: 1; } .item-master-fields label:nth-child(2) { grid-column: 2; } .item-master-fields label:nth-child(3) { grid-column: 3; } .item-master-fields label:nth-child(4) { grid-column: 4; } .item-master-fields label:nth-child(5) { grid-column: 1 / 2; } .item-master-fields label:nth-child(6) { grid-column: 2 / 4; } .item-master-fields label:nth-child(7) { grid-column: 4; } } @media (min-width: 681px) and (max-width: 1050px) { .item-master-fields { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px 14px !important; } .item-master-fields label:nth-child(n) { grid-column: auto !important; } } @media (max-width: 680px) { .item-master-fields label:nth-child(7) { grid-column: 1 / -1 !important; } } /* -------------------------------------------------------------------------- Price tax selector — native select is data-only; custom control is the only visible Excl / Incl UI. This also protects it from global smart-select styling and prevents a second selector from being rendered. -------------------------------------------------------------------------- */ select.price-tax-select, select.price-tax-native { display: none !important; visibility: hidden !important; position: absolute !important; width: 0 !important; height: 0 !important; min-width: 0 !important; max-width: 0 !important; min-height: 0 !important; max-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; opacity: 0 !important; pointer-events: none !important; overflow: hidden !important; } .price-tax-control { flex: 0 0 54px !important; width: 54px !important; min-width: 54px !important; max-width: 54px !important; height: 38px !important; min-height: 38px !important; max-height: 38px !important; position: relative !important; overflow: visible !important; box-sizing: border-box !important; z-index: 40 !important; } .price-tax-control .price-tax-button { width: 54px !important; min-width: 54px !important; max-width: 54px !important; height: 38px !important; min-height: 38px !important; max-height: 38px !important; padding: 0 16px 0 5px !important; margin: 0 !important; border: 1px solid var(--primary-border) !important; border-radius: 8px !important; background: var(--surface) !important; color: var(--text) !important; font-family: inherit !important; font-size: 10px !important; font-weight: 700 !important; line-height: 38px !important; text-align: center !important; white-space: nowrap !important; box-sizing: border-box !important; } .price-tax-control .price-tax-button::after { right: 6px !important; width: 5px !important; height: 5px !important; } .price-tax-control .price-tax-menu { width: 72px !important; min-width: 72px !important; max-width: 72px !important; right: 0 !important; left: auto !important; z-index: 1000000 !important; } .item-price-card.sale .price-input-row > .price-tax-control, .item-price-card.purchase .price-input-row > .price-tax-control { grid-column: 3 !important; grid-row: 1 !important; } /* ============================================================================ FINAL PRODUCT / ITEM FIELD ROW FIX Add/Edit Product only — do not affect Barcode page. Keep Item Name / SKU / Unit / HSN row exactly as-is. Make Barcode / Description / Category use the full second row with no gap. ============================================================================ */ @media (min-width: 1051px) { .item-master-modal .item-master-fields, .item-edit-page .item-master-fields { grid-template-columns: minmax(220px, 1.45fr) minmax(150px, .82fr) minmax(150px, .72fr) minmax(150px, .72fr) !important; gap: 12px 14px !important; align-items: start !important; } /* First row: Item Name | SKU / Model No. | Unit | HSN Code */ .item-master-modal .item-master-fields > label:nth-child(1), .item-edit-page .item-master-fields > label:nth-child(1) { grid-column: 1 !important; } .item-master-modal .item-master-fields > label:nth-child(2), .item-edit-page .item-master-fields > label:nth-child(2) { grid-column: 2 !important; } .item-master-modal .item-master-fields > label:nth-child(3), .item-edit-page .item-master-fields > label:nth-child(3) { grid-column: 3 !important; } .item-master-modal .item-master-fields > label:nth-child(4), .item-edit-page .item-master-fields > label:nth-child(4) { grid-column: 4 !important; } /* Second row: Barcode | Description (wide) | Category */ .item-master-modal .item-master-fields > label:nth-child(5), .item-edit-page .item-master-fields > label:nth-child(5) { grid-column: 1 / 2 !important; } .item-master-modal .item-master-fields > label:nth-child(6), .item-edit-page .item-master-fields > label:nth-child(6) { grid-column: 2 / 4 !important; width: auto !important; min-width: 0 !important; } .item-master-modal .item-master-fields > label:nth-child(7), .item-edit-page .item-master-fields > label:nth-child(7) { grid-column: 4 !important; } } /* ============================================================================ V22 — CREATE / EDIT DOCUMENT RESPONSIVE POLISH Scoped to billing, quotations, sales returns, credit/debit notes and invoice editing. Barcode Studio / barcode printing selectors are intentionally not referenced here. ============================================================================ */ .pos-sale-page, .quotation-page, .return-workspace, .invoice-edit-workspace, .notes-page{ min-width:0; max-width:100%; } .pos-sale-page .table-wrap, .quotation-page .table-wrap, .return-workspace .table-wrap, .invoice-edit-workspace .table-wrap, .notes-page .table-wrap{ width:100%; max-width:100%; overflow-x:auto; overflow-y:visible; -webkit-overflow-scrolling:touch; scrollbar-width:thin; } .pos-sale-page .pos-sale-table, .quotation-page .pos-sale-table, .invoice-edit-workspace .pos-sale-table{ min-width:760px; } .pos-sale-page .pos-sale-form, .quotation-page .quotation-form, .invoice-edit-workspace .pos-sale-form, .return-workspace .return-form{ min-width:0; max-width:100%; } .pos-sale-page input, .pos-sale-page select, .pos-sale-page textarea, .quotation-page input, .quotation-page select, .quotation-page textarea, .invoice-edit-workspace input, .invoice-edit-workspace select, .invoice-edit-workspace textarea, .return-workspace input, .return-workspace select, .return-workspace textarea, .notes-page input, .notes-page select, .notes-page textarea{ max-width:100%; box-sizing:border-box; } .quotation-page .quotation-actions, .pos-sale-page .form-actions, .invoice-edit-workspace .form-actions, .return-workspace .form-actions{ min-width:0; } .notes-page .form-grid{ min-width:0; } @media (max-width: 900px){ .pos-sale-page .panel-head, .quotation-page .panel-head, .invoice-edit-workspace .panel-head, .return-workspace .panel-head, .notes-page .panel-head{ gap:12px; } .pos-sale-page .pos-sale-options, .pos-sale-page .pos-sale-summary, .quotation-page .quotation-options, .quotation-page .quotation-summary, .invoice-edit-workspace .pos-sale-options, .invoice-edit-workspace .pos-sale-summary{ min-width:0; } .quotation-page .quotation-fields, .quotation-page .quotation-bottom, .quotation-page .quotation-sheet-bottom{ grid-template-columns:1fr; } .quotation-page .quotation-summary, .invoice-edit-workspace .pos-sale-summary{ position:static; } .notes-page{ grid-template-columns:1fr; } .notes-page .table-wrap{ margin-top:0; } .return-workspace .return-bottom-grid{ grid-template-columns:1fr; } .return-workspace .return-summary-card{ position:static; } } @media (max-width: 760px){ .pos-sale-page, .quotation-page, .return-workspace, .invoice-edit-workspace, .notes-page{ gap:12px; } .pos-sale-page .panel, .quotation-page .panel, .return-workspace .panel, .invoice-edit-workspace .panel, .notes-page .panel{ border-radius:12px; } .pos-sale-page .panel-head, .quotation-page .panel-head, .return-workspace .panel-head, .invoice-edit-workspace .panel-head, .notes-page .panel-head{ align-items:flex-start; } .pos-sale-page .panel-head > .primary-btn, .pos-sale-page .panel-head > .secondary-btn, .quotation-page .page-actions, .quotation-page .page-actions > *, .return-workspace .panel-head > .primary-btn, .return-workspace .panel-head > .secondary-btn{ width:100%; } .quotation-page .page-actions{ display:grid; grid-template-columns:1fr; gap:8px; } .quotation-page .quotation-actions > *, .pos-sale-page .pos-sale-summary .checkout, .pos-sale-page .pos-sale-summary .pos-cancel, .invoice-edit-workspace .pos-sale-summary .checkout, .invoice-edit-workspace .pos-sale-summary .pos-cancel, .return-workspace .return-summary-card .checkout, .return-workspace .return-summary-card > .secondary-btn{ width:100%; min-height:42px; justify-content:center; } .pos-sale-page .pos-product-search, .quotation-page .pos-product-search, .invoice-edit-workspace .pos-product-search{ grid-template-columns:1fr; } .pos-sale-page .pos-product-search > .secondary-btn, .quotation-page .pos-product-search > .secondary-btn, .invoice-edit-workspace .pos-product-search > .secondary-btn{ width:100%; } .return-workspace .return-section-heading{ flex-direction:column; gap:8px; } .return-workspace .return-document-main{ width:100%; } .return-workspace .return-document-total{ width:100%; text-align:left; } .notes-page .form-grid{ grid-template-columns:1fr; } .notes-page .form-grid .full{ grid-column:auto; } .notes-page .form-actions{ justify-content:stretch; flex-direction:column; } .notes-page .form-actions > *{ width:100%; justify-content:center; } } @media (max-width: 480px){ .pos-sale-page .panel-head h2, .quotation-page .panel-head h2, .return-workspace .panel-head h2, .invoice-edit-workspace .panel-head h2, .notes-page .panel-head h2{ font-size:17px; } .pos-sale-page .pos-sale-table, .quotation-page .pos-sale-table, .invoice-edit-workspace .pos-sale-table{ min-width:700px; } .return-workspace .return-table{ min-width:680px; } .return-workspace .return-number-input{ width:105px !important; } .quotation-page .quotation-cell-input{ min-width:72px; } .quotation-page .quotation-sheet{ padding:18px; border-radius:12px; } .quotation-page .quotation-sheet-head, .quotation-page .quotation-bill-to{ flex-direction:column; align-items:flex-start; } .quotation-page .quotation-meta{ text-align:left; } } @media (max-width: 360px){ .pos-sale-page .pos-sale-table, .quotation-page .pos-sale-table, .invoice-edit-workspace .pos-sale-table{ min-width:660px; } .return-workspace .return-table{ min-width:650px; } } /* ============================================================================ V23 — FINAL MOBILE / TABLET DOCUMENT WORKSPACE POLISH Scope: Create Bill, Create/Edit Quotation, Sales Return, Credit & Debit Notes. Intentionally does not target Barcode Studio / barcode printing selectors. ============================================================================ */ .pos-sale-page, .quotation-page, .return-workspace, .notes-page{ width:100%; min-width:0; max-width:100%; overflow:visible; } .pos-sale-page .panel, .quotation-page .panel, .return-workspace .panel, .notes-page .panel{ min-width:0; max-width:100%; } .pos-sale-page .smart-select, .quotation-page .smart-select, .return-workspace .smart-select, .notes-page .smart-select{ min-width:0; max-width:100%; } .pos-sale-page .smart-select-button, .quotation-page .smart-select-button, .return-workspace .smart-select-button, .notes-page .smart-select-button{ max-width:100%; overflow:hidden; } .pos-sale-page .smart-select-button .selected-label, .quotation-page .smart-select-button .selected-label, .return-workspace .smart-select-button .selected-label, .notes-page .smart-select-button .selected-label{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .pos-sale-page .pos-product-search, .quotation-page .pos-product-search{ min-width:0; } .pos-sale-page .pos-search-box, .quotation-page .pos-search-box{ min-width:0; width:100%; } .pos-sale-page .pos-product-suggestions, .quotation-page .pos-product-suggestions{ max-width:100%; overflow:hidden; } .pos-sale-page .pos-product-suggestion, .quotation-page .pos-product-suggestion{ min-width:0; } .pos-sale-page .pos-product-suggestion > span:nth-child(2), .quotation-page .pos-product-suggestion > span:nth-child(2){ min-width:0; overflow:hidden; } .pos-sale-page .pos-product-suggestion > span:nth-child(2) b, .pos-sale-page .pos-product-suggestion > span:nth-child(2) small, .quotation-page .pos-product-suggestion > span:nth-child(2) b, .quotation-page .pos-product-suggestion > span:nth-child(2) small{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .pos-sale-page .pos-lines, .quotation-page .quotation-lines, .return-workspace .return-table-wrap, .notes-page .table-wrap{ width:100%; max-width:100%; overflow-x:auto; overflow-y:visible; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; scrollbar-width:thin; } .pos-sale-page .pos-sale-table, .quotation-page .pos-sale-table{ width:100%; min-width:760px; } .return-workspace .return-table{ width:100%; min-width:680px; } .notes-page .table-wrap table{ width:100%; min-width:620px; } /* Tablet: use the available width instead of allowing desktop columns to squeeze. */ @media (max-width: 1100px){ .pos-sale-page .pos-sale-fields.document-number-fields{ grid-template-columns:repeat(2,minmax(0,1fr)); } .quotation-page .quotation-fields.document-number-fields{ grid-template-columns:repeat(2,minmax(0,1fr)); } .pos-sale-page .pos-sale-bottom, .quotation-page .quotation-bottom{ grid-template-columns:1fr; } .pos-sale-page .pos-sale-summary, .quotation-page .quotation-summary{ position:static; width:100%; } .pos-sale-page .pos-sale-summary{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:22px; } .pos-sale-page .pos-sale-summary .pos-summary-total, .pos-sale-page .pos-sale-summary #creditHint, .pos-sale-page .pos-sale-summary .checkout, .pos-sale-page .pos-sale-summary .pos-cancel{ grid-column:1/-1; } .return-workspace .return-bottom-grid{ grid-template-columns:1fr; } .return-workspace .return-summary-card{ position:static; } .notes-page{ grid-template-columns:1fr; } } /* Smaller tablets / large phones. */ @media (max-width: 760px){ .pos-sale-page .pos-sale-header, .quotation-page .quotation-header, .return-workspace .return-hero, .return-workspace .return-selector, .notes-page .panel{ padding:14px; } .pos-sale-page .pos-sale-fields.document-number-fields, .quotation-page .quotation-fields.document-number-fields{ grid-template-columns:1fr; gap:10px; } .pos-sale-page .pos-sale-fields > label, .quotation-page .quotation-fields > label{ min-width:0; width:100%; } .pos-sale-page .pos-sale-fields .field-action, .quotation-page .quotation-fields .field-action{ position:static; } .pos-sale-page .pos-product-search, .quotation-page .pos-product-search{ grid-template-columns:1fr; gap:8px; } .pos-sale-page .pos-product-search > .secondary-btn, .quotation-page .pos-product-search > .secondary-btn{ width:100%; min-height:42px; justify-content:center; } .pos-sale-page .pos-sale-options .pos-form-grid{ grid-template-columns:1fr; gap:11px; } .pos-sale-page .pos-sale-summary{ display:flex; flex-direction:column; gap:0; } .pos-sale-page .pos-sale-summary .pos-summary-row{ width:100%; } .pos-sale-page .pos-sale-summary .checkout, .pos-sale-page .pos-sale-summary .pos-cancel, .quotation-page .quotation-actions > *, .return-workspace .return-summary-card .checkout, .return-workspace .return-summary-card > .secondary-btn, .notes-page .primary-btn{ width:100%; min-height:44px; justify-content:center; } .quotation-page .quotation-bottom{ gap:12px; } .quotation-page .quotation-options textarea{ min-height:120px; } .quotation-page .quotation-discount{ grid-template-columns:minmax(0,1fr) 58px; } .return-workspace .return-select-form{ grid-template-columns:1fr; } .return-workspace .return-select-form .primary-btn{ width:100%; justify-content:center; } .return-workspace .return-document-card{ align-items:flex-start; flex-direction:column; gap:12px; } .return-workspace .return-document-main, .return-workspace .return-document-total{ width:100%; min-width:0; } .return-workspace .return-document-total{ padding-top:10px; border-top:1px solid var(--border); text-align:left; } .return-workspace .return-details-card .form-grid{ grid-template-columns:1fr; } .return-workspace .return-details-card .form-grid .full{ grid-column:auto; } .notes-page .form-grid{ grid-template-columns:1fr; gap:11px; } .notes-page .form-grid .full{ grid-column:auto; } .notes-page .panel-head{ align-items:flex-start; } .notes-page .table-wrap{ margin-left:-2px; width:calc(100% + 4px); } .pos-sale-page input, .pos-sale-page select, .pos-sale-page textarea, .quotation-page input, .quotation-page select, .quotation-page textarea, .return-workspace input, .return-workspace select, .return-workspace textarea, .notes-page input, .notes-page select, .notes-page textarea{ font-size:16px; /* prevents iOS Safari auto-zoom while retaining desktop typography */ } .pos-sale-page .pos-sale-table th, .pos-sale-page .pos-sale-table td, .quotation-page .pos-sale-table th, .quotation-page .pos-sale-table td, .return-workspace .return-table th, .return-workspace .return-table td, .notes-page table th, .notes-page table td{ white-space:nowrap; } } /* Phones: comfortable tap targets and no accidental page-level horizontal scroll. */ @media (max-width: 480px){ .pos-sale-page .panel, .quotation-page .panel, .return-workspace .panel, .notes-page .panel{ border-radius:12px; } .pos-sale-page .panel-head, .quotation-page .panel-head, .return-workspace .panel-head, .notes-page .panel-head{ gap:10px; } .pos-sale-page .panel-head h2, .quotation-page .panel-head h2, .return-workspace .panel-head h2, .notes-page .panel-head h2{ font-size:17px; line-height:1.25; } .pos-sale-page .pos-search-box > input, .quotation-page .pos-search-box > input{ min-height:44px; padding-left:40px; padding-right:40px; } .pos-sale-page .pos-sale-table, .quotation-page .pos-sale-table{ min-width:700px; } .return-workspace .return-table{ min-width:650px; } .notes-page .table-wrap table{ min-width:590px; } .quotation-page .quotation-cell-input{ min-width:74px; } .quotation-page .quotation-actions{ gap:8px; } .return-workspace .return-section-heading h3{ font-size:14px; } .return-workspace .return-number-input{ width:105px !important; } } @media (max-width: 360px){ .pos-sale-page .pos-sale-table, .quotation-page .pos-sale-table{ min-width:660px; } .return-workspace .return-table{ min-width:630px; } .notes-page .table-wrap table{ min-width:560px; } } /* ========================================================= Final responsive shell fixes - Keep the mobile sidebar above every page panel. - A collapsed desktop sidebar must never become a 72px rail on phone/tablet widths. - Refine global CRUD feedback messages. ========================================================= */ @media (max-width: 900px){ .sidebar, .sidebar-collapsed .sidebar{ width:min(286px,88vw)!important; z-index:10000!important; transform:translateX(-105%); box-shadow:0 18px 55px rgba(15,23,42,.22); } .nav-open .sidebar, .sidebar-collapsed.nav-open .sidebar{ transform:translateX(0)!important; } .sidebar-collapsed .app-main, .app-main{ margin-left:0!important; } .sidebar-collapsed .brand span:last-child, .sidebar-collapsed .nav-item>span:not(.nav-icon), .sidebar-collapsed .nav-toggle .chev, .sidebar-collapsed .nav-sub, .sidebar-collapsed .sidebar-footer span:not(.status-dot){ display:initial; } .sidebar-collapsed .nav-sub{display:none;} .sidebar-collapsed .nav-group.open .nav-sub{display:grid;} .sidebar-collapsed .nav-item{justify-content:flex-start;padding:0 13px;} .sidebar-collapsed .brand{justify-content:flex-start;} .sidebar-collapsed .brand-row{padding:0 12px;} .sidebar-collapsed .sidebar-footer{justify-content:flex-start;} .nav-overlay{z-index:9999!important;} .app-header{z-index:100!important;} /* The purchase header panel must stay below the mobile drawer. */ .purchase-entry-page > .panel:first-of-type, .page-content > .panel:has(.purchase-form-top){z-index:10!important;} .page-content > .panel:has(.purchase-form-top) .smart-select.open{z-index:500!important;} .page-content > .panel:has(.purchase-form-top) .smart-select-menu{z-index:600!important;} } /* Desktop collapsed sidebar: clean icon rail with consistent alignment. */ @media (min-width:901px){ .sidebar-collapsed .sidebar{ width:76px; padding-left:10px; padding-right:10px; z-index:70; } .sidebar-collapsed .app-main{margin-left:76px;} .sidebar-collapsed .brand-row{height:62px;padding:0;justify-content:center;} .sidebar-collapsed .brand{width:44px;justify-content:center;} .sidebar-collapsed .brand-mark{width:40px;height:40px;flex:0 0 40px;} .sidebar-collapsed .nav-item{height:44px;padding:0;justify-content:center;gap:0;} .sidebar-collapsed .nav-item.active:before{left:-10px;} .sidebar-collapsed .nav-icon{width:auto;font-size:16px;} .sidebar-collapsed .sidebar-footer{margin-left:0;margin-right:0;padding-left:0;padding-right:0;justify-content:center;} } /* Professional add / edit / delete feedback. */ .flash-stack{ position:fixed; top:84px; right:24px; z-index:11000; width:min(430px,calc(100vw - 32px)); display:grid; gap:10px; pointer-events:none; } .flash{ --flash-color:var(--success); position:relative; width:100%; min-height:58px; margin:0!important; padding:13px 42px 13px 58px!important; display:flex; align-items:center; border-radius:15px!important; background:var(--surface)!important; color:var(--text)!important; border:1px solid color-mix(in srgb,var(--flash-color) 18%,var(--border))!important; box-shadow:0 18px 48px rgba(15,23,42,.14),0 4px 14px rgba(15,23,42,.06)!important; font-size:12px!important; font-weight:600; line-height:1.45; overflow:hidden; pointer-events:auto; animation:flashIn .24s cubic-bezier(.2,.8,.2,1) both; } .flash::after{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--flash-color); } .flash.success{--flash-color:var(--success);} .flash.error{--flash-color:var(--danger);} .flash.warning{--flash-color:var(--warning);} .flash.info{--flash-color:var(--info);} .flash-icon{ position:absolute; left:16px; top:50%; transform:translateY(-50%); width:30px; height:30px; border-radius:50%; display:grid; place-items:center; color:var(--flash-color); background:color-mix(in srgb,var(--flash-color) 10%,var(--surface)); font-size:13px; } .flash-message{display:block;min-width:0;padding-right:2px;} .flash-close{ position:absolute; right:10px; top:50%; transform:translateY(-50%); width:28px; height:28px; border:0; border-radius:8px; display:grid; place-items:center; background:transparent; color:var(--muted); cursor:pointer; transition:background .16s ease,color .16s ease,transform .16s ease; } .flash-close:hover{background:var(--surface-hover);color:var(--text);} .flash-close:active{transform:translateY(-50%) scale(.94);} .flash-progress{ position:absolute; left:0; bottom:0; height:2px; width:100%; background:var(--flash-color); transform-origin:left center; animation:flashProgress 4.5s linear forwards; opacity:.75; } .flash.is-hiding{animation:flashOut .22s ease forwards;} .flash.is-hiding .flash-progress{animation:none;transform:scaleX(0);} @keyframes flashIn{ from{opacity:0;transform:translate3d(22px,-8px,0) scale(.97)} to{opacity:1;transform:translate3d(0,0,0) scale(1)} } @keyframes flashOut{ from{opacity:1;transform:translate3d(0,0,0) scale(1)} to{opacity:0;transform:translate3d(18px,-5px,0) scale(.97)} } @keyframes flashProgress{from{transform:scaleX(1)}to{transform:scaleX(0)}} @media (prefers-reduced-motion:reduce){ .flash,.flash-progress{animation:none!important} } @media (max-width:680px){ .flash-stack{ top:72px; right:10px; width:calc(100vw - 20px); } .flash{ min-height:54px; padding-left:54px!important; padding-right:40px!important; border-radius:13px!important; } .flash-icon{left:13px;width:28px;height:28px;font-size:12px;} } /* -------------------------------------------------------------------------- Inventory Control v2 — batches, serials, branches and stock adjustment -------------------------------------------------------------------------- */ .inventory-hero{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:22px 24px;margin-bottom:14px;background:linear-gradient(135deg,var(--surface),var(--surface-tint));border-color:var(--primary-border);} .inventory-hero h2{margin:4px 0 5px;font-size:22px;letter-spacing:-.4px}.inventory-hero p{margin:0;color:var(--muted);font-size:11px;max-width:760px}.inventory-hero-actions{display:flex;gap:8px;flex-wrap:wrap}.inventory-hero-badge{display:inline-flex;align-items:center;gap:7px;padding:9px 12px;border-radius:999px;background:var(--primary-soft);color:var(--primary);font-size:10px;font-weight:800;white-space:nowrap}.inventory-hero-badge i{font-size:11px} .inventory-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px}.inventory-metric{min-width:0;display:flex;align-items:center;gap:11px;padding:14px 15px;background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-sm)}.inventory-metric>div{min-width:0}.inventory-metric small{display:block;color:var(--muted);font-size:9px;font-weight:700;margin-bottom:2px}.inventory-metric strong{display:block;font-size:20px;line-height:1.15;letter-spacing:-.4px}.metric-icon{width:38px;height:38px;flex:0 0 38px;border-radius:11px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary);font-size:14px}.metric-icon.success{background:color-mix(in srgb,var(--success) 9%,var(--surface));color:var(--success)}.metric-icon.warning{background:color-mix(in srgb,var(--warning) 10%,var(--surface));color:var(--warning)}.metric-icon.danger{background:color-mix(in srgb,var(--danger) 9%,var(--surface));color:var(--danger)}.metric-icon.info{background:color-mix(in srgb,var(--info) 9%,var(--surface));color:var(--info)} .inventory-feature-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px}.inventory-feature-card{position:relative;min-width:0;display:flex;align-items:center;gap:10px;padding:14px;text-decoration:none;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:14px;transition:.18s ease}.inventory-feature-card:hover{transform:translateY(-2px);border-color:var(--primary-border);box-shadow:var(--shadow-md)}.inventory-feature-card>div{min-width:0;padding-right:16px}.inventory-feature-card b{display:block;font-size:11px}.inventory-feature-card small{display:block;color:var(--muted);font-size:9px;line-height:1.4;margin-top:2px}.inventory-feature-card>i:last-child{position:absolute;right:12px;color:var(--muted);font-size:9px}.inventory-feature-card .metric-icon{flex-basis:36px;width:36px;height:36px} .inventory-control-panel{padding:14px;margin-bottom:14px}.inventory-filter-grid{display:grid;grid-template-columns:minmax(190px,1.3fr) repeat(4,minmax(140px,.8fr));gap:10px;align-items:end}.inventory-filter-grid label{display:grid;gap:5px;min-width:0;font-size:9px;font-weight:800;color:var(--muted)}.inventory-filter-grid input,.inventory-filter-grid select{min-width:0}.inventory-filter-actions{display:flex;gap:7px;align-items:center}.inventory-filter-actions>*{min-height:38px}.inventory-table-panel{padding:16px}.inventory-table-panel .panel-head{margin-bottom:12px}.inventory-data-table{min-width:920px}.inventory-data-table th{font-size:8px;text-transform:uppercase;letter-spacing:.65px;color:var(--muted);background:var(--surface-soft)}.inventory-data-table td{font-size:10px;vertical-align:middle}.inventory-product-cell{display:flex;align-items:center;gap:9px;min-width:180px}.inventory-product-cell>span:last-child{min-width:0}.inventory-product-cell b{display:block;font-size:10px;overflow:hidden;text-overflow:ellipsis;max-width:270px}.inventory-product-cell small{display:block;color:var(--muted);font-size:8px;margin-top:2px}.inventory-avatar{width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;border-radius:9px;background:var(--surface-hover);color:var(--primary);border:1px solid var(--border)}.inventory-stock-number{font-size:11px}.inventory-stock-number.warning{color:var(--warning)}.inventory-stock-number.danger{color:var(--danger)}.tracking-tags{display:flex;gap:4px;flex-wrap:wrap}.tracking-tags span{padding:3px 6px;border-radius:999px;background:var(--primary-soft);color:var(--primary);font-size:7px;font-weight:800}.tracking-tags .muted-tag{background:var(--surface-soft);color:var(--muted)}.muted-tag{color:var(--muted);font-size:9px}.serial-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9px;letter-spacing:.2px}.table-actions{display:flex;align-items:center;gap:5px}.table-actions form{margin:0}.locked-action{display:inline-flex;align-items:center;gap:4px;color:var(--muted);font-size:8px;font-weight:700}.inventory-empty{min-height:150px;display:grid;place-items:center;align-content:center;gap:5px;text-align:center;color:var(--muted)}.inventory-empty i{font-size:23px;color:var(--primary-border-strong);margin-bottom:3px}.inventory-empty b{color:var(--text);font-size:11px}.inventory-empty span{font-size:9px}.inventory-flash{display:flex;align-items:flex-start;gap:10px;padding:11px 13px;border-radius:12px;margin-bottom:14px;border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow-sm)}.inventory-flash>i{font-size:15px;margin-top:1px}.inventory-flash div{min-width:0}.inventory-flash b,.inventory-flash span{display:block}.inventory-flash b{font-size:10px}.inventory-flash span{font-size:10px;color:var(--muted);margin-top:2px}.inventory-flash.success{border-color:color-mix(in srgb,var(--success) 25%,var(--border));background:color-mix(in srgb,var(--success) 5%,var(--surface));color:var(--success)}.inventory-flash.error{border-color:color-mix(in srgb,var(--danger) 25%,var(--border));background:color-mix(in srgb,var(--danger) 5%,var(--surface));color:var(--danger)} .inventory-modal{width:min(720px,100%)}.inventory-modal-form{gap:12px}.inventory-modal-note{display:flex;align-items:flex-start;gap:8px;padding:10px 11px;border:1px solid var(--primary-border);background:var(--primary-soft);border-radius:10px;color:var(--primary);font-size:9px;line-height:1.5}.inventory-modal-note i{margin-top:2px}.inventory-modal-note span{color:var(--muted)}.inventory-modal-note b{color:var(--text)}.inventory-control-note{display:flex;align-items:flex-start;gap:7px;margin-top:9px;padding:8px 9px;border-radius:9px;border:1px solid var(--primary-border);background:var(--primary-soft);font-size:8px;line-height:1.45;color:var(--muted)}.inventory-control-note i{color:var(--primary);margin-top:1px}.inventory-control-note b{color:var(--text)} .stock-adjustment-layout{align-items:start}.adjust-product-picker{display:flex;align-items:flex-end;gap:8px;margin:14px 0 10px}.adjust-product-picker>div{flex:1;min-width:0}.adjust-product-picker label{display:block;font-size:9px;font-weight:800;color:var(--muted);margin-bottom:5px}.adjust-search{position:relative}.adjust-search>i{position:absolute;left:12px;top:13px;color:var(--muted);font-size:11px}.adjust-search input{width:100%;padding-left:32px}.adjust-search>#adjustSuggestions{position:absolute;z-index:120;left:0;right:0;top:44px;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow-lg);overflow:hidden}.adjust-search>#adjustSuggestions button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 11px;border:0;border-bottom:1px solid var(--border);background:var(--surface);text-align:left;cursor:pointer}.adjust-search>#adjustSuggestions button:hover{background:var(--surface-hover)}.adjust-search>#adjustSuggestions b,.adjust-search>#adjustSuggestions small{display:block}.adjust-search>#adjustSuggestions b{font-size:9px}.adjust-search>#adjustSuggestions small{font-size:8px;color:var(--muted);margin-top:2px}.adjust-search>#adjustSuggestions i{color:var(--primary);font-size:9px}.adjustment-table-wrap{border:1px solid var(--border);border-radius:12px}.adjustment-table{min-width:720px}.adjustment-table th{background:var(--surface-soft)}.adjust-qty-input{width:110px;height:34px}.adjust-diff{display:inline-flex;min-width:68px;justify-content:center;padding:5px 7px;border-radius:999px;font-size:8px;font-weight:800}.adjust-diff.positive{background:color-mix(in srgb,var(--success) 9%,var(--surface));color:var(--success)}.adjust-diff.negative{background:color-mix(in srgb,var(--danger) 8%,var(--surface));color:var(--danger)}.adjust-diff.zero{background:var(--surface-soft);color:var(--muted)}.adjustment-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:13px}.adjustment-footer span{display:block;font-size:10px;font-weight:800}.adjustment-footer small{display:block;color:var(--muted);font-size:8px;margin-top:2px} .purchase-tracking-box{display:none;margin-top:6px;padding:8px;border:1px solid var(--primary-border);background:var(--primary-soft);border-radius:9px;min-width:240px;white-space:normal}.purchase-tracking-box.show{display:block}.tracking-trigger{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--primary-border);background:var(--primary-soft);color:var(--primary);border-radius:7px;padding:6px 8px;font-size:8px;font-weight:800;cursor:pointer}.tracking-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.tracking-grid label{display:grid;gap:4px;font-size:8px;font-weight:800;color:var(--muted);white-space:normal}.tracking-grid input,.tracking-grid textarea{width:100%;font-size:9px}.tracking-grid .tracking-full{grid-column:1/-1}.purchase-table td{position:relative}.purchase-table td:nth-child(7){min-width:270px;white-space:normal}.purchase-table th:nth-child(7){min-width:270px} /* Layering: the application chrome always stays above page cards on small screens. */ .sidebar{z-index:1100}.nav-overlay{z-index:1090!important}.app-header{z-index:100}.page-content>.panel:has(.purchase-form-top),.page-content>.panel:has(.purchase-lines){z-index:1}.page-content>.panel:has(.purchase-form-top) .smart-select.open{z-index:120}.page-content>.panel:has(.purchase-lines) .smart-select.open{z-index:120} @media(max-width:1200px){.inventory-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.inventory-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.inventory-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.inventory-filter-actions{grid-column:1/-1}.inventory-feature-card{min-height:68px}.stock-adjustment-layout{grid-template-columns:1fr}.purchase-tracking-box{min-width:210px}} @media(max-width:900px){.sidebar{width:270px}.nav-open .sidebar{box-shadow:var(--shadow-lg)}.app-main,.sidebar-collapsed .app-main{margin-left:0}.sidebar-collapsed .sidebar{width:270px}.sidebar-collapsed .sidebar .brand span:last-child,.sidebar-collapsed .sidebar .nav-item>span:not(.nav-icon),.sidebar-collapsed .sidebar .nav-toggle .chev,.sidebar-collapsed .sidebar .nav-sub,.sidebar-collapsed .sidebar .sidebar-footer span:not(.status-dot){display:initial}.sidebar-collapsed .sidebar .nav-item{justify-content:flex-start;padding:0 12px}.sidebar-collapsed .sidebar .brand{justify-content:flex-start}.sidebar-collapsed .sidebar .brand-row{padding:0 4px}.sidebar-collapsed .sidebar .sidebar-footer{justify-content:flex-start}.inventory-hero{align-items:flex-start}.inventory-filter-grid{grid-template-columns:1fr 1fr}.inventory-table-panel{padding:12px}.inventory-modal{max-height:calc(100dvh - 28px)}} @media(max-width:680px){.inventory-hero{display:block;padding:17px}.inventory-hero h2{font-size:19px}.inventory-hero-actions{margin-top:12px}.inventory-hero-actions>*{flex:1;justify-content:center}.inventory-metrics{grid-template-columns:1fr 1fr;gap:8px}.inventory-metric{padding:11px}.inventory-metric strong{font-size:17px}.inventory-feature-grid{grid-template-columns:1fr}.inventory-filter-grid{grid-template-columns:1fr}.inventory-filter-actions{grid-column:auto}.inventory-filter-actions>*{flex:1;justify-content:center}.inventory-modal-form{grid-template-columns:1fr}.inventory-modal-form .full{grid-column:auto}.inventory-modal-note{grid-column:1/-1}.adjust-product-picker{display:grid;grid-template-columns:1fr}.adjustment-footer{align-items:stretch;flex-direction:column}.adjustment-footer .primary-btn{width:100%;justify-content:center}.tracking-grid{grid-template-columns:1fr}.tracking-grid .tracking-full{grid-column:auto}.purchase-tracking-box{min-width:190px}.purchase-table{min-width:1020px}} @media(max-width:420px){.inventory-metrics{grid-template-columns:1fr}.inventory-hero-actions{display:grid}.inventory-hero-actions>*{width:100%}.inventory-filter-actions{display:grid}.inventory-filter-actions>*{width:100%}.inventory-feature-card{padding:11px}.inventory-modal{padding:16px;border-radius:14px}.inventory-modal .form-actions{display:grid;grid-template-columns:1fr}.inventory-modal .form-actions>*{width:100%;justify-content:center}.inventory-metric .metric-icon{width:34px;height:34px;flex-basis:34px}} .inventory-flash.is-hiding{animation:flashOut .22s ease forwards;} /* V19 — inventory controls, readable tables and safe dropdown layering. */ .inventory-control-panel, .inventory-filter-panel, .purchase-entry-page .panel:first-of-type, .page-content > .panel:has(.purchase-form-top){ position:relative; z-index:20; overflow:visible!important; } .inventory-table-panel, .inventory-filter-panel + .inventory-table-panel, .purchase-entry-page .panel:nth-of-type(2){ position:relative; z-index:5; } .inventory-filter-grid, .inventory-filter-grid > label, .inventory-filter-grid .smart-select{ position:relative; } .inventory-control-panel .smart-select.open, .inventory-filter-panel .smart-select.open{ z-index:100000; } .inventory-control-panel .smart-select-menu, .inventory-filter-panel .smart-select-menu{ z-index:100001!important; } .inventory-data-table{min-width:920px} .inventory-data-table th{font-size:11px!important;letter-spacing:.65px;padding:13px 14px} .inventory-data-table td{font-size:12.5px;padding:14px} .inventory-data-table .inventory-product-cell b{font-size:12.5px;max-width:300px} .inventory-data-table .inventory-product-cell small{font-size:10px} .inventory-data-table .inventory-stock-number{font-size:13px} .inventory-data-table .pill{font-size:11px} .inventory-data-table .icon-action{width:36px;height:36px} .inventory-transfer-workspace{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:18px;align-items:start} .transfer-create-panel,.transfer-history-panel{min-width:0} .transfer-create-panel .panel-head h2,.transfer-history-panel .panel-head h2{font-size:20px} .transfer-items{display:grid;gap:10px;padding:14px;border:1px solid var(--border);border-radius:14px;background:var(--surface-soft)} .transfer-line{display:grid;grid-template-columns:minmax(0,1fr) 170px auto;gap:10px;align-items:end;padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--surface)} .transfer-line label{min-width:0} .transfer-line .secondary-btn{height:44px;white-space:nowrap} .inventory-modal-form .inventory-modal-note{font-size:12px;line-height:1.55} .serial-picker-label{display:grid;gap:5px;margin-top:6px!important} .serial-picker-label small{font-weight:700;color:var(--primary)} .serial-picker{min-height:100px!important;padding:6px!important} .serial-picker option{padding:7px 8px} .serial-picker:focus{box-shadow:0 0 0 4px var(--primary-ring)} .qty-display{font-variant-numeric:tabular-nums} @media(max-width:1100px){ .inventory-transfer-workspace{grid-template-columns:1fr} .transfer-line{grid-template-columns:minmax(0,1fr) 160px auto} } @media(max-width:700px){ .inventory-data-table{min-width:820px} .inventory-data-table th{font-size:10px!important} .inventory-data-table td{font-size:12px;padding:12px} .inventory-data-table .inventory-product-cell b{font-size:12px} .transfer-line{grid-template-columns:1fr} .transfer-line .secondary-btn{width:100%} .inventory-control-panel,.inventory-table-panel{overflow:visible!important} } @media(max-width:480px){ .inventory-data-table{min-width:760px} .inventory-filter-grid{gap:9px} .serial-picker{min-height:120px!important} } /* ========================================================= V20 — professional document tracking controls Batch / expiry / serial UI is conditional per product. ========================================================= */ .pos-tax{display:flex;align-items:center;min-width:92px;height:40px;border:1px solid var(--border);border-radius:10px;background:var(--surface);overflow:hidden;transition:.15s;} .pos-tax:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-ring);} .pos-tax input{width:100%;min-width:0;height:38px;border:0!important;box-shadow:none!important;background:transparent!important;padding:0 8px!important;font-size:11px;font-weight:700;color:var(--text);} .pos-tax span{height:100%;min-width:31px;display:grid;place-items:center;border-left:1px solid var(--border);background:var(--surface-soft);font-size:10px;font-weight:800;color:var(--primary);} .billing-tracking-card{margin-top:8px;padding:10px;border:1px solid var(--primary-border);border-radius:11px;background:var(--primary-soft);min-width:260px;max-width:420px;box-shadow:var(--shadow-sm);} .billing-tracking-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;font-size:9px;font-weight:800;color:var(--text);} .billing-tracking-head>span:first-child{display:flex;align-items:center;gap:6px;color:var(--primary);} .billing-tracking-head>span:first-child i{font-size:10px;} .tracking-badge{padding:4px 7px;border-radius:999px;background:var(--surface);border:1px solid var(--border);color:var(--muted);font-size:7px;white-space:nowrap;} .billing-tracking-grid{display:grid;grid-template-columns:1fr;gap:8px;} .billing-tracking-grid label{display:grid;gap:5px;font-size:8px;font-weight:800;color:var(--muted);} .billing-tracking-grid label>span{display:flex;align-items:center;justify-content:space-between;gap:7px;} .billing-tracking-grid label em{font-style:normal;color:var(--primary);font-size:7px;} .tracking-select{width:100%;height:36px!important;min-height:36px!important;font-size:9px!important;} .tracking-help{font-size:7px;color:var(--muted);line-height:1.35;} .tracking-standard{display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border-radius:999px;background:var(--surface-soft);border:1px solid var(--border);color:var(--muted);font-size:8px;font-weight:800;white-space:nowrap;} .tracking-standard i{color:var(--success);font-size:8px;} .purchase-tracking-card{width:min(430px,100%);padding:10px;border:1px solid var(--primary-border);border-radius:11px;background:var(--primary-soft);box-shadow:var(--shadow-sm);} .purchase-tracking-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;} .purchase-tracking-head>div{display:flex;align-items:center;gap:6px;color:var(--primary);font-size:9px;} .purchase-tracking-head>span{padding:4px 7px;border-radius:999px;background:var(--surface);border:1px solid var(--border);font-size:7px;color:var(--muted);font-weight:800;} .purchase-tracking-head .tracking-trigger{margin-left:auto;padding:6px 8px;} .purchase-tracking-body{margin-top:9px;padding-top:9px;border-top:1px solid var(--border);} .purchase-tracking-card .tracking-grid{grid-template-columns:1fr 1fr;gap:8px;} .purchase-tracking-card .tracking-grid label{font-size:8px;} .purchase-tracking-card .tracking-grid input,.purchase-tracking-card .tracking-grid textarea{min-height:36px;font-size:9px;} .purchase-tracking-card .tracking-grid .tracking-full{grid-column:1/-1;} .purchase-tracking-card .tracking-help{display:block;margin-top:4px;} .return-tracking-card{min-width:210px;padding:8px;border:1px solid var(--primary-border);border-radius:10px;background:var(--primary-soft);} .return-tracking-badges{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:7px;} .return-tracking-badges span{display:inline-flex;align-items:center;gap:4px;padding:4px 6px;border-radius:999px;background:var(--surface);border:1px solid var(--border);font-size:7px;font-weight:800;color:var(--muted);} .return-tracking-badges i{color:var(--primary);} .return-tracking-card select{width:100%;margin-top:5px;min-height:34px;font-size:8px;} .return-tracking-card .return-track-serials{min-height:76px;padding:5px;} .return-tracking-hint{display:block;color:var(--primary);font-size:7px;margin-top:3px;font-weight:700;} .return-table th:nth-child(4),.return-table td:nth-child(4){min-width:220px;} .pos-sale-table th:nth-child(6),.pos-sale-table td:nth-child(6){min-width:105px;} .pos-sale-table td{vertical-align:top;} .purchase-table td:nth-child(7){vertical-align:top;} @media(max-width:760px){ .billing-tracking-card{min-width:220px;max-width:100%;} .purchase-tracking-card{width:100%;} .purchase-tracking-card .tracking-grid{grid-template-columns:1fr;} .purchase-tracking-card .tracking-grid .tracking-full{grid-column:auto;} .return-tracking-card{min-width:200px;} .pos-tax{min-width:82px;} } @media(max-width:480px){ .billing-tracking-card{min-width:190px;padding:8px;} .purchase-tracking-head .tracking-trigger{margin-left:0;} .return-tracking-card{min-width:185px;} } /* ========================================================= ProBill — Product Tracking UX / Responsive refinement ========================================================= */ /* Larger, easier-to-scan tracking controls */ .billing-tracking-card, .purchase-tracking-card, .return-tracking-card { font-size: 12px; } .billing-tracking-card { width: min(480px,100%); padding: 14px; border-radius: 14px; } .billing-tracking-head, .purchase-tracking-head { min-height: 34px; } .billing-tracking-head, .billing-tracking-head > span:first-child { font-size: 12px; } .tracking-badge, .purchase-tracking-head > span { font-size: 10px; padding: 5px 9px; } .billing-tracking-grid { gap: 11px; } .billing-tracking-grid label, .purchase-tracking-card .tracking-grid label { font-size: 11px; } .billing-tracking-grid label em, .tracking-help, .purchase-tracking-card .tracking-help { font-size: 10px; } .tracking-select { min-height: 42px !important; height: 42px !important; font-size: 12px !important; padding-left: 11px !important; } .tracking-standard { padding: 7px 10px; font-size: 10px; } .purchase-tracking-card { width: min(500px,100%); padding: 14px; border-radius: 14px; } .purchase-tracking-head > div { font-size: 12px; } .purchase-tracking-body { margin-top: 11px; padding-top: 11px; } .purchase-tracking-card .tracking-grid { gap: 11px; } .purchase-tracking-card .tracking-grid input, .purchase-tracking-card .tracking-grid textarea { min-height: 42px; font-size: 12px; } .return-tracking-card { min-width: 250px; padding: 11px; border-radius: 12px; } .return-tracking-badges { gap: 6px; } .return-tracking-badges span { padding: 5px 8px; font-size: 10px; } .return-tracking-card select { min-height: 40px; font-size: 11px; } .return-tracking-card .return-track-serials { min-height: 100px; } /* Product master: remove the loose/uneven opening-stock space */ .item-stock-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: start; } .item-opening-box { grid-template-columns: repeat(2,minmax(0,1fr)); align-content: start; align-items: start; min-height: 0; padding: 14px; } .item-opening-box > label { min-width: 0; } .item-opening-box input, .item-stock-controls input, .item-stock-controls select { min-height: 40px; } .item-stock-controls { min-height: 0; } .item-stock-controls > label { font-size: 11px; } .item-feature-toggle b { font-size: 11px; } .item-feature-toggle small { font-size: 10px; } .item-advanced-grid > label { font-size: 10px; min-height: 42px; } /* Document line tables: larger typography, stable vertical alignment */ .pos-sale-table th, .purchase-table th { font-size: 10px; font-weight: 800; vertical-align: middle; } .pos-sale-table td, .purchase-table td { font-size: 12px; line-height: 1.25; vertical-align: middle; white-space: nowrap; } .pos-product-cell { align-items: center; } .pos-product-cell>b, .pos-product-cell b { font-size: 12px; line-height: 1.25; } .pos-product-cell small { font-size: 10px; line-height: 1.25; } .pos-qty, .pos-discount { align-items: center; } .pos-qty input, .pos-discount input, .pos-discount select, .quotation-cell-input { font-size: 12px; line-height: 1; } .purchase-table input, .purchase-table select { font-size: 12px; } .purchase-table .product-name, .purchase-table .product-cell, .purchase-table .product-cell * { line-height: 1.25; } .quotation-lines .pos-sale-table td { vertical-align: middle; font-size: 12px; } .quotation-lines .pos-product-cell b { font-size: 12px; } /* Settings: professional tracking master switch */ .tracking-setting-card { display: grid; grid-template-columns: 48px minmax(0,1fr) auto; gap: 14px; align-items: center; padding: 16px; border: 1px solid var(--primary-border); border-radius: 14px; background: var(--primary-soft); } .tracking-setting-icon { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: var(--surface); color: var(--primary); border: 1px solid var(--primary-border); font-size: 18px; } .tracking-setting-copy { display: grid; gap: 4px; } .tracking-setting-copy b { font-size: 13px; color: var(--text); } .tracking-setting-copy span { font-size: 11px; color: var(--text); line-height: 1.5; } .tracking-setting-copy small { font-size: 10px; color: var(--muted); line-height: 1.45; } .setting-switch .switch i, .tracking-setting-card .switch i { width: 46px; height: 25px; } .tracking-setting-card .switch i:after { width: 19px; height: 19px; } .tracking-setting-card .switch input:checked+i:after { transform: translateX(21px); } /* When master tracking is disabled, no tracking UI/navigation is displayed. */ .tracking-disabled .tracking-feature, .tracking-disabled .tracking-setting-dependent { display: none !important; } /* Dropdowns must always paint above registers/tables */ .smart-select, .pos-product-search, .pos-product-suggestions, .product-suggestions, .purchase-product-search, .purchase-product-suggestions { position: relative; z-index: 50; } .smart-select.open, .pos-product-search:focus-within, .purchase-product-search:focus-within { z-index: 500; } .smart-select-menu, .pos-product-suggestions, .product-suggestions, .purchase-product-suggestions { z-index: 1000 !important; } /* Responsive tracking and master panels */ @media (max-width: 900px) { .item-stock-grid { grid-template-columns: 1fr; } .tracking-setting-card { grid-template-columns: 44px minmax(0,1fr) auto; } } @media (max-width: 640px) { .item-opening-box { grid-template-columns: 1fr; } .tracking-setting-card { grid-template-columns: 44px minmax(0,1fr); } .tracking-setting-card > .setting-switch { grid-column: 2; justify-self: start; margin-top: 4px; } .billing-tracking-card, .purchase-tracking-card { width: 100%; max-width: none; } .billing-tracking-head, .purchase-tracking-head { align-items: flex-start; } .tracking-badge, .purchase-tracking-head > span { white-space: normal; } .return-tracking-card { min-width: 0; width: 100%; } .pos-sale-table td, .purchase-table td { font-size: 12px; } } .tracking-disabled .tracking-column{display:none!important;} /* ========================================================= ProBill — safe product suggestion positioning + stronger document UX ========================================================= */ /* Product suggestion lists must stay anchored to the search field. Keep them out of normal document flow and above the item table. */ .pos-search-box > .pos-product-suggestions, .pos-search-box > .product-suggestions, .pos-search-box > .purchase-product-suggestions { position: absolute !important; top: calc(100% + 7px) !important; left: 0 !important; right: 0 !important; width: auto !important; height: auto !important; min-height: 0 !important; margin: 0 !important; z-index: 10060 !important; } .pos-search-box:has(> .pos-product-suggestions[style*="display: block"]), .pos-search-box:has(> .product-suggestions[style*="display: block"]), .pos-search-box:has(> .purchase-product-suggestions[style*="display: block"]) { z-index: 10061 !important; } /* Product / quotation / purchase lines: larger type and true vertical centering. */ .pos-sale-table th, .quotation-table th, .purchase-table th { font-size: 10px !important; line-height: 1.2 !important; padding: 12px 11px !important; text-align: center; vertical-align: middle !important; } .pos-sale-table td, .quotation-table td, .purchase-table td { font-size: 12px !important; line-height: 1.35 !important; padding: 12px 11px !important; vertical-align: middle !important; } .pos-sale-table td:not(:first-child), .quotation-table td:not(:first-child), .purchase-table td:not(:first-child) { text-align: center; } .pos-product-cell, .purchase-product, .quotation-product { min-height: 48px; align-items: center !important; } .pos-product-cell b, .purchase-product b, .quotation-product b { font-size: 12px !important; line-height: 1.35 !important; } .pos-product-cell small, .purchase-product small, .quotation-product small { font-size: 10px !important; line-height: 1.25 !important; margin-top: 3px !important; } .pos-sale-table input, .pos-sale-table select, .quotation-table input, .quotation-table select, .purchase-table input, .purchase-table select { min-height: 40px; font-size: 12px; } .pos-qty, .pos-discount, .pos-tax { align-items: center !important; justify-content: center !important; } /* Real disabled state for service products: unmistakable and non-editable. */ #itemStockPanel.service-disabled { opacity: 0.62; } #itemStockPanel.service-disabled input, #itemStockPanel.service-disabled select, #itemStockPanel.service-disabled textarea { cursor: not-allowed !important; background: var(--surface-soft) !important; color: var(--muted) !important; } #itemStockPanel.service-disabled .switch i { opacity: 0.55; cursor: not-allowed; } /* Larger, clearer tracking workspace. */ .billing-tracking-card, .purchase-tracking-card, .return-tracking-card { font-size: 13px !important; border-radius: 15px !important; box-shadow: var(--shadow-sm); } .billing-tracking-card { padding: 15px !important; width: min(520px, 100%) !important; } .billing-tracking-head, .purchase-tracking-head { gap: 10px !important; min-height: 38px !important; } .billing-tracking-head > span:first-child, .purchase-tracking-head > div { font-size: 13px !important; font-weight: 900 !important; } .tracking-badge, .purchase-tracking-head > span { font-size: 10px !important; font-weight: 800 !important; padding: 6px 10px !important; } .billing-tracking-grid, .purchase-tracking-card .tracking-grid { gap: 12px !important; } .billing-tracking-grid label, .purchase-tracking-card .tracking-grid label { font-size: 12px !important; line-height: 1.3 !important; } .billing-tracking-grid label em, .tracking-help, .purchase-tracking-card .tracking-help { font-size: 10px !important; line-height: 1.4 !important; } .tracking-select, .purchase-tracking-card .tracking-grid input, .purchase-tracking-card .tracking-grid textarea { min-height: 44px !important; font-size: 12px !important; border-radius: 10px !important; } .purchase-tracking-card { width: min(540px,100%) !important; padding: 15px !important; } .purchase-tracking-head .tracking-trigger { min-height: 36px; padding: 7px 11px !important; font-size: 11px !important; } .return-tracking-card { min-width: 270px !important; padding: 12px !important; } .return-tracking-badges span { font-size: 10px !important; padding: 6px 9px !important; } .return-tracking-card select { min-height: 42px !important; font-size: 11px !important; } .return-tracking-card .return-track-serials { min-height: 110px !important; font-size: 11px !important; } /* Product stock details: compact, balanced layout with no empty vertical pocket. */ .item-stock-card { padding: 16px !important; } .item-stock-grid { grid-template-columns: minmax(0, 1.45fr) minmax(260px, 1fr) !important; gap: 14px !important; } .item-opening-box { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 10px !important; padding: 12px !important; align-items: end !important; } .item-opening-box > label, .item-stock-controls > label { min-width: 0; } .item-opening-box input, .item-stock-controls input, .item-stock-controls select { min-height: 42px !important; } @media (max-width: 1100px) { .item-stock-grid { grid-template-columns: 1fr !important; } .item-opening-box { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } } @media (max-width: 700px) { .item-opening-box { grid-template-columns: 1fr !important; } .pos-sale-table th, .quotation-table th, .purchase-table th { font-size: 10px !important; } .pos-sale-table td, .quotation-table td, .purchase-table td { font-size: 12px !important; } .billing-tracking-card, .purchase-tracking-card, .return-tracking-card { width: 100% !important; min-width: 0 !important; } } /* Tracking status marker used inside returns. */ .return-tracking-badges .tracking-required-label { background: var(--primary-soft) !important; border-color: var(--primary-border) !important; color: var(--primary) !important; font-weight: 900 !important; } .return-tracking-badges .tracking-required-label i { color: var(--success) !important; } /* Keep tracking content compact enough for wide invoice tables while remaining touch-friendly. */ .billing-tracking-card .tracking-help, .purchase-tracking-card .tracking-help { display:block; } @media (max-width:700px) { .billing-tracking-head, .purchase-tracking-head { align-items:flex-start !important; flex-direction:column !important; } .tracking-badge, .purchase-tracking-head > span { align-self:flex-start; } .purchase-tracking-head .tracking-trigger { margin-left:0 !important; width:100%; justify-content:center; } } /* Purchase edit reference — clear document identity without taking over the form. */ .purchase-edit-reference{display:inline-flex;align-items:center;gap:8px;margin-top:10px;padding:7px 10px;border:1px solid var(--primary-border);border-radius:10px;background:var(--primary-soft);color:var(--muted);font-size:10px;font-weight:700;line-height:1;} .purchase-edit-reference i{color:var(--primary);font-size:11px}.purchase-edit-reference strong{color:var(--text);font-size:11px;letter-spacing:.2px} @media(max-width:680px){.purchase-edit-reference{width:100%;justify-content:flex-start;padding:9px 10px}} /* Searchable customer / supplier / invoice / purchase selectors */ .smart-search-wrap{position:sticky;top:-7px;z-index:3;display:flex;align-items:center;gap:9px;margin:-1px -1px 7px;padding:7px;background:var(--on-primary);border-bottom:1px solid var(--border);border-radius:11px 11px 7px 7px} .smart-search-wrap>i{width:18px;text-align:center;color:var(--text-muted);font-size:12px;flex:0 0 18px} .smart-search-wrap .smart-search{margin:0;min-height:40px;height:40px;padding:0 34px 0 11px;font-size:13px;font-weight:500;background:var(--surface);border-color:var(--border-strong);color:var(--text)} .smart-search-wrap .smart-search:focus{outline:0;border-color:var(--primary-border-strong);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 8%,transparent)} .smart-search-wrap .smart-search::placeholder{color:var(--text-muted);opacity:1} .smart-option[hidden]{display:none!important} .smart-option.disabled{opacity:.45;cursor:not-allowed} .smart-select-empty{display:none;align-items:center;justify-content:center;gap:8px;min-height:58px;padding:12px;color:var(--text-muted);font-size:12px;font-weight:600;text-align:center} .smart-select-empty.show{display:flex} .smart-select-empty i{color:var(--primary);font-size:14px} @media(max-width:760px){.smart-search-wrap{padding:6px}.smart-search-wrap .smart-search{min-height:44px;height:44px;font-size:14px}.smart-select-empty{min-height:62px;font-size:13px}} /* POS master setting: defensive UI guard for POS-only controls. */ .pos-disabled .pos-feature{display:none!important;} /* ========================================================= Dedicated Point of Sale terminal Separate from invoice billing; scoped to .pos-terminal. ========================================================= */ body.pos-terminal-active .page-content{padding:14px;} .pos-terminal{display:flex;flex-direction:column;gap:12px;min-width:0;} .pos-terminal-topbar{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--border);border-radius:16px;background:var(--surface);box-shadow:var(--shadow-sm);} .pos-terminal-brand{display:flex;align-items:center;gap:11px;min-width:0;margin-right:auto;} .pos-terminal-mark{width:44px;height:44px;display:grid;place-items:center;flex:0 0 44px;border-radius:13px;background:var(--primary);color:var(--surface);font-size:18px;box-shadow:0 8px 20px var(--primary-shadow);} .pos-terminal-brand div{display:grid;gap:2px;min-width:0;} .pos-terminal-brand span:not(.pos-terminal-mark){font-size:9px;letter-spacing:.14em;font-weight:800;color:var(--primary);} .pos-terminal-brand strong{font-size:16px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text);} .pos-terminal-session{display:flex;align-items:center;gap:9px;padding:7px 10px;border:1px solid var(--border);border-radius:12px;background:var(--surface-soft);min-width:150px;} .pos-session-dot{width:9px;height:9px;border-radius:50%;background:var(--muted);box-shadow:0 0 0 4px color-mix(in srgb,var(--muted) 10%,transparent);} .pos-terminal-session.is-open .pos-session-dot{background:var(--success);box-shadow:0 0 0 4px color-mix(in srgb,var(--success) 10%,transparent);} .pos-terminal-session div{display:grid;gap:1px;min-width:0;} .pos-terminal-session small{font-size:9px;font-weight:800;letter-spacing:.08em;color:var(--muted);} .pos-terminal-session b{font-size:12px;color:var(--text);} .pos-terminal-session a{margin-left:auto;font-size:10px;font-weight:800;color:var(--primary);text-decoration:none;} .pos-terminal-actions{display:flex;gap:7px;align-items:center;} .pos-terminal-btn{height:40px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 11px;border:1px solid var(--border);border-radius:11px;background:var(--surface);color:var(--text);font:inherit;font-size:11px;font-weight:750;text-decoration:none;cursor:pointer;transition:.15s ease;} .pos-terminal-btn:hover{border-color:var(--primary-border-strong);background:var(--primary-soft-2);color:var(--primary);} .pos-session-alert,.pos-session-strip{border:1px solid var(--border);border-radius:14px;background:var(--surface);} .pos-session-alert{display:flex;align-items:center;gap:11px;padding:11px 13px;color:var(--text);} .pos-session-alert>i{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:var(--primary-soft);color:var(--primary);} .pos-session-alert span{font-size:11px;line-height:1.5;flex:1;} .pos-session-alert a{font-size:11px;font-weight:800;color:var(--primary);white-space:nowrap;text-decoration:none;} .pos-session-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:hidden;} .pos-session-strip>span{display:grid;gap:2px;padding:10px 14px;border-right:1px solid var(--border);} .pos-session-strip>span:last-child{border-right:0;} .pos-session-strip small{font-size:9px;text-transform:uppercase;letter-spacing:.07em;font-weight:800;color:var(--muted);} .pos-session-strip b{font-size:13px;color:var(--text);} .pos-terminal-grid{display:grid;grid-template-columns:minmax(0,1.42fr) minmax(390px,.78fr);gap:14px;align-items:start;min-width:0;} .pos-catalog-pane,.pos-cart-pane{border:1px solid var(--border);border-radius:17px;background:var(--surface);box-shadow:var(--shadow-sm);min-width:0;} .pos-catalog-pane{padding:13px;} .pos-catalog-toolbar{display:flex;gap:10px;align-items:center;margin-bottom:10px;} .pos-catalog-search{height:46px;display:flex;align-items:center;gap:9px;flex:1;min-width:0;padding:0 12px;border:1px solid var(--border);border-radius:12px;background:var(--surface);transition:.15s ease;} .pos-catalog-search:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-ring);} .pos-catalog-search>i{color:var(--muted);font-size:13px;} .pos-catalog-search input{width:100%;min-width:0;height:42px;border:0!important;box-shadow:none!important;background:transparent!important;padding:0!important;font-size:12px;font-weight:600;color:var(--text);} .pos-catalog-search button{width:30px;height:30px;border:0;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer;} .pos-catalog-search button:hover{background:var(--surface-soft);color:var(--text);} .pos-catalog-meta{display:flex;align-items:center;gap:8px;white-space:nowrap;} .pos-catalog-meta span{font-size:10px;font-weight:800;color:var(--muted);} .pos-catalog-meta button{height:38px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text);font-size:10px;font-weight:800;padding:0 10px;cursor:pointer;} .pos-catalog-meta button:hover{border-color:var(--primary-border);color:var(--primary);} .pos-category-strip{display:flex;gap:7px;overflow-x:auto;padding:1px 1px 9px;scrollbar-width:thin;} .pos-category-strip button{height:34px;display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;padding:0 11px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--muted);font-size:10px;font-weight:800;cursor:pointer;transition:.15s ease;} .pos-category-strip button:hover,.pos-category-strip button.active{border-color:var(--primary);background:var(--primary-soft);color:var(--primary);} .pos-product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:10px;align-content:start;} .pos-product-card{display:flex;flex-direction:column;gap:8px;min-height:190px;padding:10px;border:1px solid var(--border);border-radius:14px;background:var(--surface);color:var(--text);text-align:left;cursor:pointer;transition:.15s ease;overflow:hidden;} .pos-product-card:hover{transform:translateY(-1px);border-color:var(--primary-border-strong);box-shadow:0 8px 20px color-mix(in srgb,var(--text) 7%,transparent);} .pos-product-card.is-out{opacity:.58;cursor:not-allowed;} .pos-product-card.is-out:hover{transform:none;border-color:var(--border);box-shadow:none;} .pos-product-image{position:relative;width:100%;height:90px;display:grid;place-items:center;border-radius:10px;background:var(--surface-soft);overflow:hidden;color:var(--primary);font-size:24px;} .pos-product-image img{width:100%;height:100%;object-fit:cover;} .pos-product-image em{position:absolute;right:6px;top:6px;width:24px;height:24px;display:grid;place-items:center;border-radius:8px;background:var(--surface);color:var(--primary);box-shadow:var(--shadow-sm);font-size:10px;font-style:normal;} .pos-product-info{display:grid;gap:3px;min-width:0;} .pos-product-info b{font-size:11px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .pos-product-info small{font-size:9px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .pos-product-card-foot{display:flex;align-items:end;justify-content:space-between;gap:7px;margin-top:auto;} .pos-product-card-foot strong{font-size:12px;color:var(--primary);} .pos-product-card-foot small{font-size:8.5px;font-weight:700;color:var(--success);text-align:right;} .pos-product-card-foot .stock-out{color:var(--danger);} .pos-catalog-empty{grid-column:1/-1;min-height:320px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;color:var(--muted);text-align:center;} .pos-catalog-empty i{font-size:30px;color:var(--border-strong);} .pos-catalog-empty b{font-size:13px;color:var(--text);} .pos-catalog-empty span{font-size:10px;} .pos-cart-pane{position:sticky;top:78px;overflow:hidden;} .pos-cart-head{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 13px;border-bottom:1px solid var(--border);} .pos-cart-head>div{display:grid;gap:1px;} .pos-cart-head span{font-size:8.5px;font-weight:800;letter-spacing:.09em;color:var(--primary);} .pos-cart-head h2{display:flex;align-items:center;gap:7px;margin:0;font-size:15px;color:var(--text);} .pos-cart-head h2 em{min-width:22px;height:22px;display:grid;place-items:center;border-radius:999px;background:var(--primary-soft);color:var(--primary);font-size:9px;font-style:normal;} .pos-icon-button{width:35px;height:35px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--danger);cursor:pointer;} .pos-party-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:11px 13px;border-bottom:1px solid var(--border);background:var(--surface-tint);} .pos-field{display:grid;gap:5px;min-width:0;font-size:10px;font-weight:750;color:var(--text);} .pos-field>span{font-size:9px;font-weight:800;color:var(--muted);} .pos-field input,.pos-field select{width:100%;min-width:0;height:39px;padding:0 9px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text);font-size:10.5px;font-weight:650;} .pos-field input:focus,.pos-field select:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-ring);} .pos-field-with-button{display:grid;grid-template-columns:minmax(0,1fr) 38px;gap:6px;min-width:0;} .pos-field-with-button>button{height:39px;border:1px solid var(--primary-border);border-radius:10px;background:var(--primary-soft);color:var(--primary);cursor:pointer;} .pos-inline-control{display:grid;grid-template-columns:minmax(0,1fr) 56px;min-width:0;} .pos-inline-control input{border-radius:10px 0 0 10px!important;} .pos-inline-control select{border-left:0!important;border-radius:0 10px 10px 0!important;text-align:center;} .pos-cart-lines{max-height:410px;overflow-y:auto;padding:9px;scrollbar-width:thin;background:var(--surface-soft);} .pos-cart-empty{min-height:230px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:20px;text-align:center;color:var(--muted);} .pos-cart-empty>span{width:48px;height:48px;display:grid;place-items:center;border-radius:15px;background:var(--surface);border:1px solid var(--border);color:var(--primary);font-size:18px;} .pos-cart-empty b{font-size:12px;color:var(--text);} .pos-cart-empty small{max-width:230px;font-size:9.5px;line-height:1.5;} .pos-cart-line{margin-bottom:8px;border:1px solid var(--border);border-radius:13px;background:var(--surface);overflow:hidden;} .pos-cart-line:last-child{margin-bottom:0;} .pos-cart-line-main{display:grid;grid-template-columns:38px minmax(0,1fr) 30px;gap:8px;align-items:center;padding:9px 9px 6px;} .pos-cart-thumb{width:38px;height:38px;display:grid;place-items:center;border-radius:9px;background:var(--surface-soft);color:var(--primary);overflow:hidden;font-size:13px;} .pos-cart-thumb img{width:100%;height:100%;object-fit:cover;} .pos-cart-product{display:grid;gap:2px;min-width:0;} .pos-cart-product b{font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .pos-cart-product small{font-size:8.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .pos-line-remove{width:28px;height:28px;border:0;border-radius:8px;background:color-mix(in srgb,var(--danger) 7%,var(--surface));color:var(--danger);cursor:pointer;} .pos-cart-line-controls{display:grid;grid-template-columns:112px minmax(80px,1fr) auto;gap:7px;align-items:end;padding:0 9px 9px;} .pos-cart-line-controls>label{display:grid;gap:3px;font-size:8.5px;color:var(--muted);} .pos-cart-line-controls>label input{width:100%;height:34px;border:1px solid var(--border);border-radius:9px;padding:0 7px;background:var(--surface);font-size:10px;font-weight:700;} .pos-cart-line-controls>strong{min-width:74px;text-align:right;font-size:11px;color:var(--text);padding-bottom:8px;} .pos-terminal-qty{height:34px;display:grid;grid-template-columns:30px minmax(42px,1fr) 30px;border:1px solid var(--border);border-radius:9px;overflow:hidden;background:var(--surface);} .pos-terminal-qty button{border:0;background:var(--surface-soft);color:var(--primary);font-weight:900;cursor:pointer;} .pos-terminal-qty input{width:100%;min-width:0;border:0!important;border-left:1px solid var(--border)!important;border-right:1px solid var(--border)!important;border-radius:0!important;box-shadow:none!important;text-align:center;padding:0 3px!important;font-size:10px!important;font-weight:800;} .pos-line-options{border-top:1px solid var(--border);background:var(--surface-tint);} .pos-line-options summary{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;cursor:pointer;list-style:none;font-size:9px;font-weight:800;color:var(--text);} .pos-line-options summary::-webkit-details-marker{display:none;} .pos-line-options summary span{display:flex;align-items:center;gap:5px;} .pos-line-options summary small{font-size:8px;font-weight:650;color:var(--muted);} .pos-line-option-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 10px 10px;} .pos-line-option-grid label,.pos-line-tracking label{display:grid;gap:4px;font-size:9px;font-weight:750;color:var(--text);} .pos-line-option-grid label>span,.pos-line-tracking label>span{font-size:8.5px;color:var(--muted);} .pos-line-option-grid input,.pos-line-option-grid select,.pos-line-tracking select{width:100%;height:36px;border:1px solid var(--border);border-radius:9px;background:var(--surface);padding:0 8px;font-size:9.5px;font-weight:650;color:var(--text);} .pos-line-tracking{display:grid;gap:8px;padding:9px 10px 10px;border-top:1px solid var(--primary-border);background:var(--primary-soft-2);} .pos-line-tracking-title{display:flex;align-items:center;justify-content:space-between;gap:8px;} .pos-line-tracking-title span{display:flex;align-items:center;gap:6px;font-size:9.5px;font-weight:850;color:var(--primary);} .pos-line-tracking-title small{font-size:8px;font-weight:750;color:var(--muted);} .pos-line-tracking label>span{display:flex;justify-content:space-between;gap:8px;} .pos-line-tracking label em{font-style:normal;color:var(--primary);font-size:8px;} .pos-line-tracking label>small{font-size:8px;color:var(--muted);} .pos-line-tracking select[multiple]{height:auto;min-height:62px;padding:5px;} .pos-checkout-panel{padding:12px 13px 13px;background:var(--surface);border-top:1px solid var(--border);} .pos-summary-rows{display:grid;gap:7px;padding-bottom:10px;border-bottom:1px solid var(--border);} .pos-summary-rows>div,.pos-balance-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:9.5px;color:var(--muted);} .pos-summary-rows b,.pos-balance-row b{font-size:10.5px;color:var(--text);} .pos-checkout-fields{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px 0;} .pos-grand-total{display:flex;align-items:end;justify-content:space-between;gap:12px;padding:11px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);} .pos-grand-total span{font-size:11px;font-weight:800;color:var(--text);} .pos-grand-total strong{font-size:23px;line-height:1;color:var(--primary);letter-spacing:-.03em;} .pos-payment-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:end;padding:10px 0 8px;} .pos-quick-pay{display:flex;gap:5px;} .pos-quick-pay button{height:39px;padding:0 8px;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--primary);font-size:9px;font-weight:850;cursor:pointer;} .pos-quick-pay button:hover{border-color:var(--primary-border);background:var(--primary-soft);} .pos-balance-row{padding:2px 0 8px;} .pos-credit-message{padding:7px 8px;margin-bottom:9px;border-radius:9px;background:var(--surface-soft);font-size:8.5px;color:var(--muted);} .pos-complete-sale{width:100%;min-height:50px;display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:7px;padding:0 14px;border:0;border-radius:12px;background:var(--primary);color:var(--surface);cursor:pointer;box-shadow:0 10px 24px var(--primary-shadow);font:inherit;} .pos-complete-sale span{font-size:11px;font-weight:850;text-align:left;} .pos-complete-sale strong{font-size:12px;} .pos-complete-sale:hover{background:var(--primary-dark);} .pill.pos-channel{background:var(--primary-soft);color:var(--primary);} /* POS focus/full-screen mode hides application chrome but keeps POS dialogs usable. */ body.pos-focus{overflow:hidden;} body.pos-focus .sidebar,body.pos-focus .app-header,body.pos-focus .nav-overlay{display:none!important;} body.pos-focus .app-main{margin-left:0!important;} body.pos-focus .page-content{padding:0!important;} body.pos-focus .pos-terminal{height:100dvh;min-height:100dvh;padding:10px;background:var(--body-bg);overflow:hidden;} body.pos-focus .pos-terminal-topbar{flex:0 0 auto;} body.pos-focus .pos-session-alert,body.pos-focus .pos-session-strip{flex:0 0 auto;} body.pos-focus #posSaleForm{flex:1;min-height:0;display:flex;} body.pos-focus .pos-terminal-grid{flex:1;min-height:0;width:100%;} body.pos-focus .pos-catalog-pane,body.pos-focus .pos-cart-pane{height:100%;min-height:0;} body.pos-focus .pos-catalog-pane{display:flex;flex-direction:column;overflow:hidden;} body.pos-focus .pos-product-grid{flex:1;min-height:0;overflow-y:auto;padding-right:2px;} body.pos-focus .pos-cart-pane{position:static;display:flex;flex-direction:column;overflow:hidden;} body.pos-focus .pos-cart-lines{flex:1;max-height:none;min-height:0;} body.pos-focus .pos-checkout-panel{flex:0 0 auto;} @media(max-width:1180px){ .pos-terminal-grid{grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr);} .pos-product-grid{grid-template-columns:repeat(auto-fill,minmax(145px,1fr));} .pos-terminal-btn span{display:none;} .pos-terminal-btn{width:40px;padding:0;} } @media(max-width:980px){ body.pos-terminal-active .page-content{padding:10px;} .pos-terminal-grid{grid-template-columns:1fr;} .pos-cart-pane{position:static;} .pos-product-grid{grid-template-columns:repeat(4,minmax(0,1fr));} body.pos-focus{overflow:auto;} body.pos-focus .pos-terminal{height:auto;min-height:100dvh;overflow:visible;} body.pos-focus #posSaleForm{display:block;} body.pos-focus .pos-terminal-grid{display:grid;} body.pos-focus .pos-catalog-pane,body.pos-focus .pos-cart-pane{height:auto;overflow:visible;} body.pos-focus .pos-product-grid{overflow:visible;} body.pos-focus .pos-cart-lines{max-height:none;overflow:visible;} } @media(max-width:720px){ .pos-terminal-topbar{align-items:flex-start;flex-wrap:wrap;padding:10px;} .pos-terminal-brand{width:calc(100% - 128px);} .pos-terminal-session{order:3;width:100%;min-width:0;} .pos-terminal-actions{margin-left:auto;} .pos-session-strip{grid-template-columns:1fr 1fr;} .pos-session-strip>span:nth-child(2){border-right:0;} .pos-session-strip>span:nth-child(-n+2){border-bottom:1px solid var(--border);} .pos-session-alert{align-items:flex-start;} .pos-catalog-toolbar{align-items:stretch;flex-direction:column;} .pos-catalog-meta{justify-content:space-between;} .pos-product-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;} .pos-product-card{min-height:168px;padding:8px;} .pos-product-image{height:74px;} .pos-party-grid,.pos-checkout-fields{grid-template-columns:1fr;} .pos-cart-lines{max-height:none;} } @media(max-width:520px){ body.pos-terminal-active .page-content{padding:7px;} .pos-terminal{gap:8px;} .pos-terminal-topbar,.pos-catalog-pane,.pos-cart-pane,.pos-session-alert,.pos-session-strip{border-radius:13px;} .pos-terminal-brand{width:calc(100% - 96px);} .pos-terminal-mark{width:38px;height:38px;flex-basis:38px;border-radius:11px;} .pos-terminal-brand strong{font-size:14px;} .pos-terminal-actions{gap:5px;} .pos-terminal-btn{width:36px;height:36px;} .pos-product-grid{grid-template-columns:repeat(2,minmax(0,1fr));} .pos-product-card{min-height:174px;} .pos-product-image{height:82px;} .pos-cart-line-controls{grid-template-columns:106px minmax(72px,1fr);} .pos-cart-line-controls>strong{grid-column:1/-1;text-align:right;padding:0 2px 2px;} .pos-line-option-grid{grid-template-columns:1fr;} .pos-payment-row{grid-template-columns:1fr;} .pos-quick-pay{display:grid;grid-template-columns:repeat(3,1fr);} .pos-quick-pay button{width:100%;} .pos-grand-total strong{font-size:21px;} } .pos-field .smart-select{width:100%;min-width:0;} .pos-field .smart-select-button{height:39px;min-height:39px;border-radius:10px;font-size:10.5px;font-weight:650;padding:0 9px;} .pos-field .smart-select-menu{z-index:140;} .pos-field-with-button>.smart-select{min-width:0;} /* V20 — POS polish: tighter alignment, consistent controls and title-case friendly presentation */ .pos-cart-head span, .pos-line-options summary span, .pos-line-tracking-title span, .pos-field>span, .pos-summary-rows span, .pos-balance-row span, .pos-grand-total span{ letter-spacing:.02em; } .pos-catalog-search input::placeholder{color:var(--muted);opacity:1;} .pos-product-grid{grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:12px;} .pos-product-card{min-height:198px;padding:12px;border-radius:15px;} .pos-product-image{height:96px;border-radius:12px;} .pos-product-info b{font-size:12px;line-height:1.35;} .pos-product-card-foot strong{font-size:13px;} .pos-product-card-foot small{font-size:9px;} .pos-cart-head{height:auto;min-height:60px;padding:12px 14px;} .pos-cart-head span{font-size:10px;text-transform:none;} .pos-cart-head h2{font-size:18px;line-height:1.2;} .pos-cart-head h2 em{min-width:24px;height:24px;font-size:10px;} .pos-party-grid{gap:10px;padding:12px 14px;} .pos-field{gap:6px;font-size:11px;} .pos-field>span{font-size:10px;} .pos-field input,.pos-field select{height:42px;font-size:11.5px;font-weight:700;} .pos-field .smart-select-button{height:42px;min-height:42px;font-size:11.5px;font-weight:700;padding:0 11px;} .pos-field-with-button{grid-template-columns:minmax(0,1fr) 40px;gap:7px;align-items:center;} .pos-field-with-button>button{height:42px;border-radius:11px;} .pos-cart-lines{padding:10px;background:var(--surface-soft);} .pos-cart-line{margin-bottom:10px;border-radius:14px;box-shadow:0 6px 16px rgba(15,23,42,.04);} .pos-cart-line-main{grid-template-columns:40px minmax(0,1fr) 32px;gap:10px;padding:11px 11px 8px;} .pos-cart-thumb{width:40px;height:40px;border-radius:10px;} .pos-cart-product b{font-size:11.5px;line-height:1.35;} .pos-cart-product small{font-size:9px;line-height:1.35;} .pos-line-remove{width:30px;height:30px;display:grid;place-items:center;} .pos-cart-line-controls{grid-template-columns:128px minmax(120px,1fr) minmax(88px,auto);gap:10px;align-items:center;padding:0 11px 11px;} .pos-cart-line-controls>label{display:flex;flex-direction:column;justify-content:center;gap:5px;min-width:0;font-size:9px;font-weight:700;color:var(--muted);} .pos-cart-line-controls>label span{display:block;line-height:1.2;} .pos-cart-line-controls>label input{height:40px;border-radius:10px;padding:0 11px;font-size:12px;font-weight:700;line-height:40px;} .pos-cart-line-controls>strong{display:flex;align-items:center;justify-content:flex-end;min-width:88px;align-self:center;height:40px;padding:0;font-size:13px;font-weight:800;color:var(--text-strong);white-space:nowrap;} .pos-terminal-qty{height:40px;grid-template-columns:34px minmax(56px,1fr) 34px;align-items:stretch;border-radius:10px;} .pos-terminal-qty button{display:grid;place-items:center;font-size:15px;line-height:1;} .pos-terminal-qty input{height:100%;display:block;line-height:40px;padding:0 6px!important;font-size:12px!important;font-weight:800;appearance:textfield;-moz-appearance:textfield;} .pos-terminal-qty input::-webkit-outer-spin-button,.pos-terminal-qty input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none;} .pos-line-options summary{padding:10px 11px;font-size:10px;} .pos-line-options summary small{font-size:8.5px;} .pos-line-option-grid{gap:10px;padding:0 11px 11px;} .pos-line-option-grid label,.pos-line-tracking label{gap:5px;font-size:9.5px;} .pos-line-option-grid label>span,.pos-line-tracking label>span{font-size:9px;line-height:1.3;} .pos-line-option-grid input,.pos-line-option-grid select,.pos-line-tracking select{height:38px;border-radius:10px;padding:0 10px;font-size:10.5px;font-weight:700;} .pos-line-tracking{gap:10px;padding:11px;border-top:1px solid var(--primary-border);} .pos-line-tracking-title span{font-size:10px;} .pos-line-tracking-title small{font-size:8.5px;} .pos-line-tracking label>small{font-size:8.5px;line-height:1.45;} .pos-checkout-panel{padding:14px;border-top:1px solid var(--border);} .pos-summary-rows{gap:8px;padding-bottom:12px;} .pos-summary-rows>div,.pos-balance-row{font-size:10px;} .pos-summary-rows b,.pos-balance-row b{font-size:11.5px;font-weight:800;} .pos-checkout-fields{gap:10px;padding:12px 0;align-items:end;} .pos-grand-total{padding:13px 0;align-items:center;} .pos-grand-total strong{font-size:26px;} .pos-payment-row{grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end;padding:12px 0 10px;} .pos-quick-pay{display:flex;align-items:center;gap:6px;} .pos-quick-pay button{height:42px;min-width:44px;padding:0 10px;border-radius:10px;font-size:10px;} .pos-credit-message{padding:9px 10px;margin-bottom:10px;font-size:9px;line-height:1.45;} .pos-complete-sale{min-height:54px;padding:0 15px;border-radius:13px;grid-template-columns:24px 1fr auto;} .pos-complete-sale span{font-size:12px;} .pos-complete-sale strong{font-size:14px;} @media(max-width:1180px){ .pos-product-grid{grid-template-columns:repeat(auto-fill,minmax(155px,1fr));} .pos-cart-line-controls{grid-template-columns:120px minmax(110px,1fr) minmax(84px,auto);} } @media(max-width:980px){ .pos-cart-pane{position:static;} .pos-product-grid{grid-template-columns:repeat(4,minmax(0,1fr));} } @media(max-width:720px){ .pos-product-grid{grid-template-columns:repeat(3,minmax(0,1fr));} .pos-cart-line-controls{grid-template-columns:118px minmax(0,1fr);} .pos-cart-line-controls>strong{grid-column:1/-1;justify-content:flex-end;height:auto;min-height:22px;} .pos-payment-row{grid-template-columns:1fr;} } @media(max-width:520px){ .pos-product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;} .pos-product-card{min-height:180px;padding:9px;} .pos-product-image{height:84px;} .pos-cart-head{padding:10px 12px;} .pos-party-grid,.pos-checkout-panel{padding:12px;} .pos-cart-line-main{padding:10px 10px 7px;} .pos-cart-line-controls{grid-template-columns:1fr;gap:8px;padding:0 10px 10px;} .pos-terminal-qty{width:100%;max-width:140px;} .pos-cart-line-controls>strong{grid-column:auto;justify-content:flex-start;} .pos-quick-pay{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));} } /* V21 — POS line-item alignment fix: quantity, price and total stay visually aligned */ .pos-cart-line-controls{grid-template-columns:minmax(130px,142px) minmax(150px,1fr) minmax(88px,112px);gap:10px;align-items:stretch;} .pos-cart-qty-field,.pos-cart-price-field,.pos-cart-total-field{display:flex;flex-direction:column;justify-content:flex-start;gap:5px;min-width:0;} .pos-cart-qty-field>span,.pos-cart-price-field>span,.pos-cart-total-field>span{display:block;font-size:9px;font-weight:700;line-height:1.2;color:var(--muted);} .pos-cart-qty-field .pos-terminal-qty,.pos-cart-price-field input{margin:0;} .pos-cart-total-field{justify-content:flex-start;align-items:flex-end;} .pos-cart-total-field strong{height:40px;display:flex;align-items:center;justify-content:flex-end;width:100%;padding:0 2px;font-size:13px;font-weight:800;color:var(--text-strong);white-space:nowrap;} .pos-cart-line-controls>strong{display:none;} @media(max-width:1180px){ .pos-cart-line-controls{grid-template-columns:minmax(124px,136px) minmax(130px,1fr) minmax(84px,104px);} } @media(max-width:720px){ .pos-cart-line-controls{grid-template-columns:minmax(118px,130px) minmax(0,1fr);} .pos-cart-total-field{grid-column:1/-1;align-items:flex-end;} .pos-cart-total-field strong{height:auto;min-height:22px;padding-top:2px;} } @media(max-width:520px){ .pos-cart-line-controls{grid-template-columns:1fr;gap:8px;} .pos-cart-qty-field,.pos-cart-price-field,.pos-cart-total-field{align-items:stretch;} .pos-cart-total-field{align-items:flex-start;} .pos-cart-total-field strong{justify-content:flex-start;height:auto;min-height:22px;padding:0;} } /* V22 — Product Add/Edit: professional Inventory Stock Details workspace */ .item-stock-card{ padding:18px 18px 16px !important; border:1px solid var(--border-strong) !important; border-radius:18px !important; background:var(--surface-soft) !important; box-shadow:var(--shadow-sm) !important; } .item-section-title{ align-items:flex-start !important; gap:12px !important; padding-bottom:14px !important; } .item-section-title>span{ width:34px !important; height:34px !important; border-radius:10px !important; } .item-section-title b{ font-size:18px !important; line-height:1.2 !important; color:var(--text-strong) !important; text-transform:none !important; } .item-section-title small{ margin-top:4px !important; font-size:11px !important; line-height:1.5 !important; } .item-stock-grid{ grid-template-columns:minmax(0,1.2fr) minmax(320px,0.95fr) !important; gap:16px !important; padding-top:16px !important; align-items:stretch !important; } .item-stock-pane{ display:flex; flex-direction:column; gap:14px; min-width:0; padding:15px; border:1px solid var(--border) !important; border-radius:16px; background:var(--surface); box-shadow:0 8px 20px rgba(15,23,42,.04); } .item-stock-pane-head{ display:flex; flex-direction:column; gap:4px; padding-bottom:12px; border-bottom:1px solid var(--border); } .item-stock-pane-head b{ font-size:14px; line-height:1.3; color:var(--text-strong); } .item-stock-pane-head small{ font-size:10px; line-height:1.55; color:var(--muted); } .item-opening-box, .item-stock-controls{ padding:0 !important; border:0 !important; background:transparent !important; box-shadow:none !important; gap:12px !important; } .item-opening-box{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; align-items:end !important; } .item-stock-controls{ display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; align-content:start !important; } .item-opening-box>label, .item-stock-controls>label, .item-advanced-grid>label{ display:flex !important; flex-direction:column !important; gap:6px !important; min-width:0; } .item-opening-box>label, .item-stock-controls>label{ font-size:11px !important; font-weight:800 !important; color:var(--text-strong) !important; } .item-opening-box input, .item-opening-box select, .item-stock-controls input, .item-stock-controls select{ min-height:44px !important; height:44px !important; border-radius:12px !important; padding:0 13px !important; font-size:13px !important; font-weight:700 !important; background:var(--surface) !important; } .item-opening-box input[readonly]{ background:var(--surface-soft) !important; color:var(--text) !important; } .item-opening-box .currency-input{ min-height:44px !important; border-radius:12px !important; overflow:hidden; } .item-opening-box .currency-input>span, .item-opening-box .currency-input>input{ min-height:44px !important; height:44px !important; } .item-opening-box .currency-input>span{ width:40px !important; font-size:13px !important; font-weight:800 !important; } .item-feature-toggle{ grid-column:1/-1 !important; align-items:center !important; gap:14px !important; margin-top:2px; padding:14px 0 12px !important; border-top:1px solid var(--border) !important; border-bottom:1px solid var(--border) !important; } .item-feature-toggle>div{ min-width:0; } .item-feature-toggle b{ font-size:13px !important; line-height:1.3; color:var(--text-strong) !important; } .item-feature-toggle small{ margin-top:4px !important; font-size:10px !important; line-height:1.55 !important; color:var(--muted) !important; } .item-advanced-grid{ grid-column:1/-1 !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:10px !important; } .item-advanced-grid>label{ flex-direction:row !important; align-items:center !important; justify-content:space-between !important; min-height:54px; padding:12px 13px !important; border:1px solid var(--border) !important; border-radius:12px !important; background:var(--surface-soft) !important; font-size:11px !important; font-weight:800 !important; color:var(--text-strong) !important; } .inventory-control-note{ grid-column:1/-1; gap:9px !important; margin-top:2px !important; padding:11px 12px !important; border-radius:12px !important; font-size:10px !important; line-height:1.55 !important; } .inventory-control-note i{font-size:12px;margin-top:2px !important;} .inventory-control-note b{display:inline-block;margin-right:2px;} @media (max-width: 1180px){ .item-stock-grid{grid-template-columns:1fr !important;} } @media (max-width: 780px){ .item-stock-card{padding:15px !important;} .item-section-title b{font-size:16px !important;} .item-opening-box, .item-stock-controls, .item-advanced-grid{grid-template-columns:1fr !important;} .item-stock-pane{padding:14px;} } /* V23 — Dashboard polish and branch controls */ .dashboard-hero{padding:24px 26px!important;} .dashboard-hero h2{font-size:28px!important;line-height:1.15!important;letter-spacing:-.025em!important;} .dashboard-hero p{font-size:13px!important;line-height:1.55!important;} .dashboard-hero .eyebrow{font-size:10px!important;letter-spacing:.1em!important;} .hero-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap;} .dashboard-pos-btn{min-height:42px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 16px;border:1px solid var(--surface);border-radius:11px;background:var(--surface);color:var(--primary);font-size:12px;font-weight:800;text-decoration:none;box-shadow:var(--shadow-sm);} .dashboard-pos-btn:hover{background:var(--surface-hover);border-color:var(--primary-border);} .cards .stat-card{padding:20px!important;} .cards .stat-card>span:first-child{font-size:12px!important;font-weight:650!important;} .cards .stat-card>strong{font-size:27px!important;line-height:1.15!important;letter-spacing:-.02em!important;} .cards .stat-card>small{font-size:11px!important;line-height:1.45!important;} .stat-trend{font-size:10px!important;} .dashboard-chart-card .panel-head h2,.dashboard-section-grid>.panel .panel-head h2{font-size:18px!important;} .dashboard-chart-card .panel-head p,.dashboard-section-grid>.panel .panel-head p{font-size:11.5px!important;} .quick-grid a{min-height:105px!important;padding:16px!important;} .quick-grid b{font-size:12px!important;line-height:1.35!important;} .quick-grid small{font-size:10px!important;line-height:1.4!important;} .quick-grid .quick-icon{width:38px!important;height:38px!important;font-size:15px!important;} .quick-pos-action{border-color:var(--primary-border)!important;background:var(--primary-soft-2)!important;} .mini-stats .stat-card>strong{font-size:25px!important;} .page-content>.panel .panel-head h2{font-size:18px;} .page-content>.panel .panel-head p{font-size:11.5px;line-height:1.5;} .page-content>.panel table th{font-size:10px;} .page-content>.panel table td{font-size:12px;} .branch-default-btn{min-height:32px!important;height:32px!important;padding:0 9px!important;font-size:9px!important;white-space:nowrap;} @media(max-width:900px){.dashboard-hero{padding:20px!important}.dashboard-hero h2{font-size:24px!important}.hero-actions{width:100%}.hero-actions>*{flex:1;min-width:135px}.cards .stat-card>strong{font-size:24px!important}} @media(max-width:560px){.dashboard-hero h2{font-size:21px!important}.dashboard-hero p{font-size:12px!important}.hero-actions{display:grid;grid-template-columns:1fr}.cards .stat-card{padding:16px!important}.cards .stat-card>strong{font-size:22px!important}.quick-grid{grid-template-columns:1fr!important}.quick-grid a{min-height:86px!important}.page-content>.panel table td{font-size:11.5px}} /* V24 — Global professional sidebar: consistent, usable on every page. */ .sidebar{ scrollbar-width:thin; scrollbar-color:var(--border-strong) transparent; } .sidebar::-webkit-scrollbar{width:6px;} .sidebar::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:999px;} .sidebar::-webkit-scrollbar-track{background:transparent;} .nav-item:hover{background:var(--surface-hover);color:var(--text-strong);} .nav-item:hover .nav-icon{color:var(--primary);} .nav-group.open>.nav-toggle{background:var(--surface-hover);color:var(--text-strong);} .nav-group.open>.nav-toggle .nav-icon{color:var(--primary);} .nav-sub a{font-weight:600;} .nav-sub a:hover,.nav-sub a.active{font-weight:700;} @media (min-width:1001px){ .sidebar{ width:272px !important; padding:14px 12px !important; overflow-x:hidden !important; overflow-y:auto !important; } .app-main{margin-left:272px !important;} .brand-row{padding:0 10px !important;} .main-nav{gap:5px !important;} .sidebar-collapsed .sidebar{ width:78px !important; padding:12px 10px !important; overflow-x:hidden !important; overflow-y:auto !important; } .sidebar-collapsed .app-main{margin-left:78px !important;} .sidebar-collapsed .brand-row{ height:62px !important; padding:0 !important; margin-bottom:12px !important; justify-content:center !important; } .sidebar-collapsed .brand{ width:52px !important; justify-content:center !important; gap:0 !important; } .sidebar-collapsed .brand-mark{ width:44px !important; height:44px !important; flex:0 0 44px !important; border-radius:13px !important; } .sidebar-collapsed .brand>span:last-child, .sidebar-collapsed .nav-item>span:not(.nav-icon), .sidebar-collapsed .nav-toggle .chev, .sidebar-collapsed .sidebar-footer>span:not(.status-dot){display:none !important;} .sidebar-collapsed .main-nav{gap:7px !important;} .sidebar-collapsed .nav-group{width:100%;} .sidebar-collapsed .nav-item{ width:52px !important; height:48px !important; margin:0 auto !important; padding:0 !important; justify-content:center !important; gap:0 !important; border-radius:13px !important; } .sidebar-collapsed .nav-icon{ width:22px !important; min-width:22px !important; font-size:16px !important; text-align:center !important; } .sidebar-collapsed .nav-item.active, .sidebar-collapsed .nav-group.open>.nav-toggle{ background:var(--primary-soft) !important; color:var(--primary-dark) !important; } .sidebar-collapsed .nav-item.active .nav-icon, .sidebar-collapsed .nav-group.open>.nav-toggle .nav-icon{color:var(--primary) !important;} .sidebar-collapsed .nav-item.active:before{ left:-10px !important; top:10px !important; bottom:10px !important; width:3px !important; } /* Submenus are intentionally hidden in icon-rail mode. Clicking a group expands the sidebar first (handled in app.js), so navigation stays usable. */ .sidebar-collapsed .nav-sub, .sidebar-collapsed .nav-group.open .nav-sub{display:none !important;} .sidebar-collapsed .sidebar-footer{ width:52px !important; margin:14px auto 3px !important; padding:13px 0 5px !important; justify-content:center !important; gap:0 !important; } .sidebar-collapsed .sidebar-footer .status-dot{display:none !important;} .sidebar-collapsed .sidebar-footer a{ margin:0 !important; width:36px; height:36px; display:grid; place-items:center; border-radius:10px; } .sidebar-collapsed .sidebar-footer a:hover{background:var(--surface-hover);color:var(--primary);} } @media (max-width:1000px){ .sidebar, .sidebar-collapsed .sidebar{ width:min(290px,88vw) !important; padding:12px !important; transform:translateX(-105%) !important; overflow-y:auto !important; overflow-x:hidden !important; z-index:10000 !important; box-shadow:0 24px 70px rgba(15,23,42,.20) !important; } .nav-open .sidebar, .sidebar-collapsed.nav-open .sidebar{transform:translateX(0) !important;} .app-main,.sidebar-collapsed .app-main{margin-left:0 !important;} .sidebar-collapsed .brand-row{padding:0 8px !important;justify-content:space-between !important;} .sidebar-collapsed .brand{justify-content:flex-start !important;width:auto !important;} .sidebar-collapsed .brand>span:last-child, .sidebar-collapsed .nav-item>span:not(.nav-icon), .sidebar-collapsed .nav-toggle .chev, .sidebar-collapsed .sidebar-footer>span:not(.status-dot){display:block !important;} .sidebar-collapsed .nav-item{ width:100% !important; height:46px !important; margin:0 !important; padding:0 13px !important; justify-content:flex-start !important; gap:13px !important; } .sidebar-collapsed .nav-icon{width:22px !important;min-width:22px !important;} .sidebar-collapsed .nav-sub{display:none !important;} .sidebar-collapsed .nav-group.open .nav-sub{display:grid !important;} .sidebar-collapsed .sidebar-footer{width:auto !important;margin:14px 5px 3px !important;padding:13px 8px 5px !important;justify-content:flex-start !important;gap:7px !important;} .sidebar-collapsed .sidebar-footer .status-dot{display:block !important;} .sidebar-collapsed .sidebar-footer a{margin-left:auto !important;} .nav-overlay{z-index:9999 !important;} .app-header{z-index:100 !important;} } /* ========================================================= V24 — Branch-disabled layouts + POS session/reconciliation Keeps global-stock mode visually clean and POS operations readable. ========================================================= */ /* When Branch Management is off, do not leave an empty fourth column. */ .pos-sale-fields.document-number-fields.without-branch{ grid-template-columns:minmax(180px,.78fr) minmax(190px,.82fr) minmax(300px,1.4fr) !important; } .purchase-form-top.without-branch{ grid-template-columns:minmax(210px,.85fr) minmax(320px,1.5fr) !important; } .pos-party-grid.single-field{ grid-template-columns:minmax(0,1fr) !important; } .pos-party-grid.single-field .pos-customer-field{ width:100%; max-width:none; } /* POS session workspace */ .professional-session-hero, .reconciliation-hero{ border-color:var(--primary-border); background:var(--surface); overflow:visible; } .professional-session-hero .panel-head, .reconciliation-hero .panel-head{ align-items:flex-start; gap:18px; } .professional-session-hero h2, .reconciliation-hero h2{ font-size:22px; line-height:1.2; letter-spacing:-.02em; } .professional-session-hero p, .reconciliation-hero p{ max-width:820px; font-size:12px; line-height:1.6; } .session-hero-actions{ display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; } .professional-session-metrics, .reconciliation-metrics{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; } .reconciliation-metrics{ grid-template-columns:repeat(3,minmax(0,1fr)); } .professional-session-metrics .stat-card, .reconciliation-metrics .stat-card{ min-height:118px; padding:16px; } .professional-session-metrics .stat-card span, .reconciliation-metrics .stat-card span{ font-size:11px; font-weight:750; } .professional-session-metrics .stat-card strong, .reconciliation-metrics .stat-card strong{ margin-top:7px; font-size:22px; line-height:1.2; } .professional-session-metrics .stat-card small, .reconciliation-metrics .stat-card small{ margin-top:7px; font-size:10px; line-height:1.45; } .session-control-grid, .reconciliation-layout{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr); gap:14px; align-items:start; } .session-control-grid .panel, .reconciliation-layout .panel{ margin:0; } .session-payment-list{ display:grid; gap:8px; } .session-payment-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:44px; padding:9px 11px; border:1px solid var(--border); border-radius:11px; background:var(--surface-soft); } .session-payment-row span{ color:var(--muted); font-size:11px; font-weight:700; } .session-payment-row b{ color:var(--text-strong); font-size:12px; } .session-close-card, .reconciliation-close-card{ border-color:var(--primary-border); } .session-close-card .form-grid, .reconciliation-close-card .form-grid{ gap:12px; } .session-close-card textarea, .reconciliation-close-card textarea{ min-height:96px; } .session-history-table{ min-width:1080px; } .session-history-table th{ font-size:10px; white-space:nowrap; } .session-history-table td{ font-size:11px; vertical-align:middle; } .session-notes-cell{ min-width:210px; max-width:300px; white-space:normal !important; line-height:1.5; color:var(--muted); } .reconciliation-date-filter{ margin-top:14px; align-items:end; } .reconciliation-date-filter label{ min-width:220px; } .reconciliation-snapshot-note{ margin-top:12px; padding:12px 14px; display:flex; gap:10px; align-items:flex-start; border:1px solid var(--primary-border); border-radius:12px; background:var(--primary-soft); } .reconciliation-snapshot-note>i{ margin-top:2px; color:var(--primary); } .reconciliation-snapshot-note b{display:block;font-size:12px;color:var(--text-strong);} .reconciliation-snapshot-note span{display:block;margin-top:3px;font-size:10px;line-height:1.45;color:var(--muted);} .reconciliation-drift{margin-bottom:12px;} .reconciliation-drift>div{display:grid;gap:3px;} .reconciliation-drift span{font-size:11px;line-height:1.5;} .reconciliation-correction-reason{ padding:12px; border:1px solid var(--warning-border, var(--border)); border-radius:12px; background:var(--warning-soft, var(--surface-soft)); } .reconciliation-correction-reason .required{ margin-left:5px; color:var(--danger); font-size:10px; font-weight:800; } .reconciliation-correction-reason small{display:block;margin-top:5px;line-height:1.45;} .reconciliation-audit-history{margin-top:14px;} .reconciliation-history-list{display:grid;gap:10px;} .reconciliation-history-item{ display:grid; grid-template-columns:38px minmax(0,1fr); gap:10px; align-items:start; padding:11px 12px; border:1px solid var(--border); border-radius:12px; background:var(--surface-soft); } .reconciliation-history-icon{ width:34px; height:34px; display:grid; place-items:center; border-radius:10px; background:var(--primary-soft); color:var(--primary); } .reconciliation-history-item b{font-size:11px;color:var(--text-strong);} .reconciliation-history-item p{margin:4px 0 0;font-size:10px;line-height:1.55;color:var(--muted);word-break:break-word;} @media(max-width:1200px){ .professional-session-metrics{grid-template-columns:repeat(2,minmax(0,1fr));} .reconciliation-metrics{grid-template-columns:repeat(3,minmax(0,1fr));} .session-control-grid, .reconciliation-layout{grid-template-columns:1fr;} } @media(max-width:900px){ .pos-sale-fields.document-number-fields.without-branch, .purchase-form-top.without-branch{ grid-template-columns:1fr 1fr !important; } .pos-sale-fields.document-number-fields.without-branch > label:last-of-type, .purchase-form-top.without-branch > label:last-of-type{ grid-column:1/-1; } .reconciliation-metrics{grid-template-columns:repeat(2,minmax(0,1fr));} } @media(max-width:680px){ .pos-sale-fields.document-number-fields.without-branch, .purchase-form-top.without-branch{ grid-template-columns:1fr !important; } .pos-sale-fields.document-number-fields.without-branch > label:last-of-type, .purchase-form-top.without-branch > label:last-of-type{ grid-column:auto; } .professional-session-hero .panel-head, .reconciliation-hero .panel-head{ gap:12px; } .session-hero-actions, .professional-session-hero .page-actions, .reconciliation-hero .page-actions{ width:100%; display:grid; grid-template-columns:1fr; } .session-hero-actions > *, .professional-session-hero .page-actions > *, .reconciliation-hero .page-actions > *{ width:100%; justify-content:center; } .professional-session-metrics, .reconciliation-metrics{ grid-template-columns:1fr; } .professional-session-metrics .stat-card, .reconciliation-metrics .stat-card{ min-height:auto; } .reconciliation-date-filter label{ min-width:100%; } .session-close-card .form-actions, .reconciliation-close-card .form-actions{ display:grid; grid-template-columns:1fr; } .session-close-card .form-actions > *, .reconciliation-close-card .form-actions > *{ width:100%; justify-content:center; } } /* POS session metric tiles and payment rows (V24 continuation). */ .professional-session-metrics>div{ min-width:0; min-height:118px; padding:16px; display:flex; flex-direction:column; justify-content:center; border:1px solid var(--border); border-radius:14px; background:var(--surface); box-shadow:var(--shadow-sm); } .professional-session-metrics>div>span{ font-size:11px; font-weight:750; color:var(--muted); } .professional-session-metrics>div>strong{ margin-top:7px; font-size:22px; line-height:1.2; color:var(--text-strong); } .professional-session-metrics>div>small{ margin-top:7px; font-size:10px; line-height:1.45; color:var(--muted); } .session-payment-list>div:not(.muted-box){ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:48px; padding:10px 12px; border:1px solid var(--border); border-radius:11px; background:var(--surface-soft); } .session-payment-list>div:not(.muted-box)>span{ display:flex; flex-direction:column; gap:2px; min-width:0; font-size:11px; font-weight:800; color:var(--text-strong); } .session-payment-list>div:not(.muted-box)>span small{ font-size:9px; font-weight:600; color:var(--muted); } .session-payment-list>div:not(.muted-box)>strong{ font-size:12px; color:var(--text-strong); white-space:nowrap; } @media(max-width:680px){ .professional-session-metrics>div{min-height:auto;padding:14px;} } /* ========================================================= V25 — Readability + responsive refinement Improves business forms/tables without changing page logic. ========================================================= */ .page-content .panel-head h2, .page-content .panel-head h3{line-height:1.25;letter-spacing:-.01em;} .page-content .panel-head h2{font-size:20px;} .page-content .panel-head h3{font-size:16px;} .page-content .panel-head p, .page-content .reports-hero p, .page-content .section-description{font-size:12px;line-height:1.55;} .page-content .section-kicker{font-size:10px;letter-spacing:.09em;} .page-content .form-grid>label, .page-content .filters label, .page-content .method-field>label, .page-content .field-with-action{font-size:12px;font-weight:750;} .page-content .filters label>span, .page-content .form-grid>label>span{font-size:11px;} .page-content .table-wrap table th{font-size:10.5px;line-height:1.35;letter-spacing:.035em;} .page-content .table-wrap table td{font-size:12px;line-height:1.45;vertical-align:middle;} .page-content .table-wrap table td b{font-size:12px;line-height:1.4;} .page-content .table-wrap .sub, .page-content .table-wrap td small{font-size:10px;line-height:1.4;} .page-content .pill{font-size:10px;line-height:1.2;} .page-content .smart-select-button{font-size:12px;} .page-content .smart-option{font-size:12px;min-height:38px;} .page-content input, .page-content select, .page-content textarea{font-size:12px;} .payment-action{color:var(--success);border-color:color-mix(in srgb,var(--success) 28%,var(--border));} .payment-action:hover{background:color-mix(in srgb,var(--success) 8%,var(--surface));color:var(--success);} /* Stock Transfer: searchable product picker and cleaner dynamic rows. */ .inventory-transfer-workspace .transfer-items{display:grid;gap:10px;} .inventory-transfer-workspace .transfer-line{ display:grid; grid-template-columns:minmax(260px,1.6fr) minmax(130px,.65fr) auto; gap:10px; align-items:end; padding:12px; border:1px solid var(--border); border-radius:12px; background:var(--surface-soft); } .inventory-transfer-workspace .transfer-line>label{display:grid;gap:6px;min-width:0;font-size:11px;font-weight:750;} .inventory-transfer-workspace .transfer-line .smart-select{min-width:0;} .inventory-transfer-workspace .transfer-line>.secondary-btn{min-height:42px;} /* Expenses: keep edit controls aligned and readable. */ .expense-page .table-wrap td{min-height:48px;} .expense-page .expense-summary>div span{font-size:11px;} .expense-page .expense-summary>div strong{font-size:16px;} /* POS/reconciliation tables may be wide; contain scrolling inside the card. */ .session-history-table{min-width:1080px;} .reconciliation-layout .table-wrap{max-width:100%;overflow:auto;} @media(max-width:900px){ .page-content .panel-head h2{font-size:19px;} .page-content .table-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;} .inventory-transfer-workspace{grid-template-columns:1fr!important;} .inventory-transfer-workspace .transfer-line{grid-template-columns:minmax(0,1fr) minmax(120px,.55fr) auto;} } @media(max-width:680px){ .page-content .panel-head h2{font-size:18px;} .page-content .panel-head h3{font-size:15px;} .page-content .panel-head p{font-size:12px;} .page-content input, .page-content select, .page-content textarea, .page-content .smart-select-button{font-size:16px;} .page-content .table-wrap table th{font-size:10px;} .page-content .table-wrap table td{font-size:12px;} .inventory-transfer-workspace .transfer-line{grid-template-columns:1fr;padding:11px;} .inventory-transfer-workspace .transfer-line>.secondary-btn{width:100%;justify-content:center;} .expense-page .panel-head>.primary-btn{width:100%;justify-content:center;} } .transfer-stock-hint{display:block;margin-top:5px;font-size:10px;font-weight:700;color:var(--muted)} /* V23 — Branch context, user access control and ERP role permissions */ .header-branch-context{height:42px;display:flex;align-items:center;gap:8px;min-width:150px;max-width:220px;padding:0 10px;border:1px solid var(--border);border-radius:11px;background:var(--surface);color:var(--text);text-decoration:none;transition:.16s ease} .header-branch-context:hover{border-color:var(--primary-border-strong);background:var(--surface-hover)} .header-branch-context>i:first-child{width:28px;height:28px;display:grid;place-items:center;border-radius:8px;background:var(--primary-soft);color:var(--primary);flex:0 0 28px} .header-branch-context>span{min-width:0;display:grid;gap:0}.header-branch-context small{font-size:8px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:800}.header-branch-context b{font-size:10px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.header-branch-context>i:last-child{margin-left:auto;font-size:9px;color:var(--muted)} .dashboard-branch-context{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(320px,.7fr);align-items:center;gap:14px;padding:14px 16px;margin-top:-2px;margin-bottom:14px;border-color:var(--primary-border);background:var(--surface)} .branch-context-icon{width:44px;height:44px;display:grid;place-items:center;border-radius:13px;background:var(--primary-soft);color:var(--primary);font-size:17px} .branch-context-copy{min-width:0;display:grid;gap:2px}.branch-context-copy>span{font-size:9px;font-weight:850;letter-spacing:.09em;color:var(--primary)}.branch-context-copy>b{font-size:14px;color:var(--text-strong)}.branch-context-copy>small{font-size:10px;line-height:1.45;color:var(--muted)} .dashboard-branch-switch{display:flex;align-items:end;justify-content:flex-end;gap:9px;min-width:0}.dashboard-branch-switch label{display:grid;gap:5px;min-width:230px}.dashboard-branch-switch label>span{font-size:9px;font-weight:800;color:var(--muted)}.dashboard-branch-switch select{height:40px;font-size:11px;font-weight:700} .branch-context-status{height:40px;display:flex;align-items:center;gap:6px;padding:0 10px;border-radius:10px;background:var(--surface-soft);color:var(--muted);font-size:9px;font-weight:700;white-space:nowrap}.branch-context-status i{color:var(--success)} .access-hero{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:22px 24px;border-color:var(--primary-border)}.access-hero h2{margin:4px 0 5px;font-size:22px;letter-spacing:-.35px}.access-hero p{margin:0;color:var(--muted);font-size:11px;line-height:1.5}.access-hero-actions{display:flex;gap:8px;flex-wrap:wrap} .access-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:14px 0}.access-metrics article{display:flex;align-items:center;gap:11px;padding:14px;border:1px solid var(--border);border-radius:14px;background:var(--surface);box-shadow:var(--shadow-sm)}.access-metrics .metric-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:var(--primary-soft);color:var(--primary);flex:0 0 38px}.access-metrics article div{display:grid;gap:2px}.access-metrics small{font-size:9px;color:var(--muted);font-weight:700}.access-metrics strong{font-size:18px;color:var(--text-strong)} .users-list-panel,.role-access-panel{margin-bottom:14px}.users-table{min-width:980px}.users-table th,.users-table td{vertical-align:middle}.user-cell{display:flex;align-items:center;gap:10px;min-width:220px}.user-avatar{width:38px;height:38px;border-radius:11px;background:var(--primary-soft);color:var(--primary);display:grid;place-items:center;font-size:13px;font-weight:850;flex:0 0 38px}.user-cell b{display:block;font-size:11px}.user-cell small{display:block;margin-top:2px;color:var(--muted);font-size:9px}.role-badge{display:inline-flex;align-items:center;padding:6px 9px;border-radius:999px;background:var(--surface-soft);border:1px solid var(--border);font-size:9px;font-weight:800;color:var(--text)} .branch-chip-list{display:flex;gap:5px;flex-wrap:wrap;max-width:360px}.access-chip{display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border:1px solid var(--border);border-radius:999px;background:var(--surface-soft);color:var(--text);font-size:8.5px;font-weight:750;white-space:nowrap}.access-chip.default{border-color:var(--primary-border);background:var(--primary-soft);color:var(--primary)}.access-chip.all{border-color:color-mix(in srgb,var(--success) 28%,var(--border));background:color-mix(in srgb,var(--success) 7%,var(--surface));color:var(--success)}.access-chip.warning{color:var(--warning)}.access-chip.muted{color:var(--muted)} .users-actions{display:flex;align-items:center;justify-content:flex-end;gap:6px}.users-actions form{margin:0}.icon-btn.danger-icon:hover{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 35%,var(--border));background:color-mix(in srgb,var(--danger) 6%,var(--surface))} .role-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.role-card{display:grid;gap:14px;padding:15px;border:1px solid var(--border);border-radius:14px;background:var(--surface);box-shadow:var(--shadow-sm)}.role-card.role-admin{border-color:var(--primary-border);background:var(--primary-soft-2)}.role-card-top{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start}.role-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:var(--primary-soft);color:var(--primary)}.role-card h3{margin:1px 0 4px;font-size:13px;color:var(--text-strong)}.role-card p{margin:0;font-size:9px;line-height:1.5;color:var(--muted)}.role-card-stats{display:flex;gap:8px}.role-card-stats span{flex:1;padding:8px 9px;border-radius:10px;background:var(--surface-soft);font-size:8.5px;color:var(--muted)}.role-card-stats b{display:block;margin-bottom:2px;font-size:13px;color:var(--text)}.role-card-actions{display:flex;align-items:center;min-height:38px}.role-card-actions .secondary-btn{width:100%;justify-content:center}.locked-role{display:flex;align-items:center;gap:7px;color:var(--primary);font-size:9px;font-weight:800} .access-user-modal{width:min(940px,100%);max-height:calc(100dvh - 34px);overflow:auto}.access-user-form{display:grid;gap:12px}.access-section{display:grid;gap:12px;padding:14px;border:1px solid var(--border);border-radius:14px;background:var(--surface-soft);transition:.15s}.access-section.access-disabled{opacity:.45;pointer-events:none}.access-section-head{display:flex;align-items:center;gap:10px}.access-section-head>span{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:var(--primary-soft);color:var(--primary);flex:0 0 34px}.access-section-head>div:nth-child(2){min-width:0;flex:1}.access-section-head b{display:block;font-size:12px;color:var(--text-strong)}.access-section-head small{display:block;margin-top:2px;font-size:9px;line-height:1.5;color:var(--muted)}.access-mini-actions{display:flex;gap:5px;margin-left:auto}.access-mini-actions button,.permission-toolbar button{border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--primary);padding:6px 8px;font-size:8px;font-weight:800;cursor:pointer} .user-branch-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.branch-check{display:grid!important;grid-template-columns:auto auto minmax(0,1fr);align-items:center;gap:9px!important;padding:11px;border:1px solid var(--border);border-radius:11px;background:var(--surface);cursor:pointer;transition:.15s}.branch-check:hover{border-color:var(--primary-border);background:var(--surface-hover)}.branch-check input{width:16px;height:16px}.branch-check-icon{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:var(--primary-soft);color:var(--primary)}.branch-check b,.branch-check small{display:block}.branch-check b{font-size:10px;color:var(--text)}.branch-check small{font-size:8px;color:var(--muted);margin-top:2px;line-height:1.4}.branch-default-select{display:grid;gap:5px;max-width:420px;font-size:10px;font-weight:800;color:var(--text)}.branch-default-select small{font-size:8px;font-weight:500;line-height:1.4;color:var(--muted)} .override-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;max-height:300px;overflow:auto;padding-right:2px}.override-row{display:grid!important;grid-template-columns:minmax(0,1fr) 116px;align-items:center;gap:9px!important;padding:9px;border:1px solid var(--border);border-radius:10px;background:var(--surface)}.override-row b,.override-row small{display:block}.override-row b{font-size:9.5px;color:var(--text)}.override-row small{margin-top:2px;font-size:7.5px;color:var(--muted)}.override-row select{height:34px;padding:0 7px;font-size:9px} .access-role-create{width:min(560px,100%)}.role-permission-modal{width:min(1040px,100%);max-height:calc(100dvh - 30px);overflow:auto}.role-description-field{display:grid;gap:6px;margin-bottom:12px;font-size:10px;font-weight:800}.permission-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;margin-bottom:10px;border:1px solid var(--border);border-radius:12px;background:var(--surface-soft)}.permission-toolbar b{display:block;font-size:11px}.permission-toolbar small{display:block;margin-top:2px;font-size:8.5px;color:var(--muted)}.permission-toolbar>div:last-child{display:flex;gap:5px}.permission-groups{display:grid;gap:10px}.permission-group{border:1px solid var(--border);border-radius:13px;overflow:hidden}.permission-group-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;background:var(--surface-soft)}.permission-group-head b{font-size:11px}.permission-group-head span{font-size:8px;color:var(--muted);font-weight:700}.permission-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0}.permission-check{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:9px!important;padding:10px 12px;border-top:1px solid var(--border);background:var(--surface);cursor:pointer}.permission-check:nth-child(odd){border-right:1px solid var(--border)}.permission-check input{width:16px;height:16px}.permission-check b,.permission-check small{display:block}.permission-check b{font-size:9.5px;color:var(--text)}.permission-check small{margin-top:2px;font-size:7.5px;color:var(--muted)}.permission-check>i{color:var(--muted);font-size:9px}.permission-locked{opacity:.58;cursor:not-allowed}.role-permission-footer{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}.delete-role-form{margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}.text-danger-btn{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;color:var(--danger);font-size:9px;font-weight:800;cursor:pointer;padding:5px} @media(max-width:1180px){.header-branch-context{display:none}.dashboard-branch-context{grid-template-columns:auto minmax(0,1fr)}.dashboard-branch-switch{grid-column:1/-1;justify-content:flex-start}.role-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.user-branch-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:760px){.dashboard-branch-context{grid-template-columns:auto minmax(0,1fr);padding:13px}.dashboard-branch-switch{display:grid;grid-template-columns:1fr;width:100%}.dashboard-branch-switch label{min-width:0;width:100%}.branch-context-status{width:100%;justify-content:center}.access-hero{align-items:flex-start;flex-direction:column;padding:17px}.access-hero-actions{width:100%}.access-hero-actions>*{flex:1;justify-content:center}.access-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.role-card-grid,.user-branch-grid,.override-grid,.permission-grid{grid-template-columns:1fr}.permission-check:nth-child(odd){border-right:0}.access-mini-actions{margin-left:0}.access-section-head{align-items:flex-start;flex-wrap:wrap}.access-user-modal,.role-permission-modal{max-height:calc(100dvh - 18px)}.role-permission-footer{display:grid;grid-template-columns:1fr}.role-permission-footer>*{width:100%;justify-content:center}} @media(max-width:440px){.access-metrics{grid-template-columns:1fr}.access-hero-actions{display:grid}.dashboard-branch-context{grid-template-columns:1fr}.branch-context-icon{width:40px;height:40px}.access-section{padding:11px}.override-row{grid-template-columns:1fr}.override-row select{width:100%}} /* V24 — Dashboard branch selector, role-access UX and payment quick actions */ .dashboard-branch-context{ position:relative!important; z-index:220!important; overflow:visible!important; } .dashboard-branch-context:has(.smart-select.open){z-index:8000!important;} .dashboard-branch-switch, .dashboard-branch-switch label{ position:relative; z-index:2; overflow:visible; } .dashboard-branch-switch .smart-select{z-index:230!important;} .dashboard-branch-switch .smart-select.open{z-index:8100!important;} .dashboard-branch-switch .smart-select-menu{z-index:8200!important;max-height:300px!important;} .dashboard-branch-context + .cards, .dashboard-branch-context ~ .dashboard-section-grid, .dashboard-branch-context ~ .mini-stats{ position:relative; z-index:1; } .quick-grid .quick-payment-in .quick-icon{background:color-mix(in srgb,var(--success) 10%,var(--surface));color:var(--success);} .quick-grid .quick-payment-out .quick-icon{background:color-mix(in srgb,var(--warning) 12%,var(--surface));color:var(--warning);} .role-permission-modal{ width:min(1120px,100%)!important; max-height:calc(100dvh - 24px)!important; padding:22px!important; } .role-permission-modal-head h2{font-size:21px!important;line-height:1.25!important;} .role-permission-modal-head p{font-size:11px!important;line-height:1.55!important;} .role-description-field{font-size:11px!important;gap:7px!important;} .role-description-field input{min-height:44px!important;font-size:12px!important;} .permission-toolbar{ align-items:center!important; padding:13px 14px!important; border-radius:14px!important; } .permission-toolbar b{font-size:13px!important;} .permission-toolbar small{font-size:9.5px!important;line-height:1.5!important;} .permission-toolbar-actions{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap;} .permission-toolbar-actions button, .permission-group-actions button{ display:inline-flex; align-items:center; justify-content:center; gap:5px; min-height:34px; padding:0 10px!important; border:1px solid var(--border)!important; border-radius:9px!important; background:var(--surface)!important; color:var(--primary)!important; font-size:9.5px!important; font-weight:800!important; cursor:pointer; } .permission-toolbar-actions button:hover, .permission-group-actions button:hover{border-color:var(--primary-border)!important;background:var(--primary-soft)!important;} .permission-selection-count{ display:inline-flex; align-items:center; min-height:32px; padding:0 10px; border-radius:999px; background:var(--primary-soft); color:var(--primary); font-size:9px; font-weight:850; white-space:nowrap; } .permission-groups{gap:12px!important;} .permission-group{border-radius:15px!important;background:var(--surface);box-shadow:0 5px 14px rgba(15,23,42,.035);} .permission-group-head{ padding:12px 14px!important; background:var(--surface-soft)!important; } .permission-group-head>div:first-child{display:grid;gap:2px;} .permission-group-head b{font-size:12px!important;color:var(--text-strong)!important;} .permission-group-head small{font-size:9px!important;color:var(--muted)!important;} .permission-group-actions{display:flex;align-items:center;gap:6px;} .permission-group-actions button{min-height:30px;padding:0 8px!important;font-size:8.5px!important;} .permission-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;} .permission-check{ grid-template-columns:44px minmax(0,1fr) auto!important; gap:11px!important; min-height:72px; padding:12px 14px!important; transition:.15s ease; } .permission-check:hover{background:var(--surface-hover)!important;} .permission-check:has(.permission-toggle input:checked){background:var(--primary-soft-2)!important;} .permission-toggle{position:relative;width:40px;height:23px;display:block;flex:0 0 40px;} .permission-toggle input{position:absolute!important;inset:0!important;width:40px!important;height:23px!important;opacity:0!important;cursor:pointer;z-index:2;} .permission-toggle i{position:absolute;inset:0;border-radius:999px;background:var(--border-strong);transition:.18s ease;pointer-events:none;} .permission-toggle i:after{content:"";position:absolute;left:3px;top:3px;width:17px;height:17px;border-radius:50%;background:var(--surface);box-shadow:0 2px 5px rgba(15,23,42,.18);transition:.18s ease;} .permission-toggle input:checked+i{background:var(--primary);} .permission-toggle input:checked+i:after{transform:translateX(17px);} .permission-toggle input:disabled+i{opacity:.55;} .permission-copy{min-width:0;} .permission-copy b{display:block;font-size:11px!important;line-height:1.35!important;color:var(--text-strong)!important;} .permission-copy small{display:block;margin-top:3px;font-size:8.5px!important;line-height:1.4!important;color:var(--muted)!important;word-break:break-word;} .permission-lock{width:28px;height:28px;display:grid;place-items:center;border-radius:8px;background:var(--surface-soft);color:var(--muted);font-size:10px;} .permission-locked{opacity:.62;cursor:not-allowed!important;} .role-permission-footer{position:sticky;bottom:-22px;z-index:5;margin:16px -22px -22px!important;padding:13px 22px!important;background:var(--surface);border-top:1px solid var(--border);box-shadow:0 -8px 18px rgba(15,23,42,.04);} @media(max-width:900px){ .permission-toolbar{align-items:flex-start!important;flex-direction:column!important;} .permission-toolbar-actions{width:100%;justify-content:flex-start;} .permission-grid{grid-template-columns:1fr!important;} .permission-check:nth-child(odd){border-right:0!important;} } @media(max-width:620px){ .dashboard-branch-context{z-index:300!important;} .dashboard-branch-switch .smart-select-menu{max-height:240px!important;} .role-permission-modal{padding:15px!important;} .role-permission-modal-head h2{font-size:18px!important;} .permission-toolbar-actions{display:grid;grid-template-columns:1fr 1fr;width:100%;} .permission-selection-count{grid-column:1/-1;justify-content:center;} .permission-group-head{align-items:flex-start!important;flex-direction:column!important;} .permission-group-actions{width:100%;} .permission-group-actions button{flex:1;} .permission-check{grid-template-columns:42px minmax(0,1fr) auto!important;min-height:68px;padding:11px!important;} .permission-copy b{font-size:11.5px!important;} .permission-copy small{font-size:9px!important;} .role-permission-footer{bottom:-15px;margin:14px -15px -15px!important;padding:12px 15px!important;} } /* V26 — Dashboard Quick Actions: semantic icon colors with a consistent premium treatment */ .quick-grid .quick-action{ --qa-color:var(--primary); position:relative; background:var(--surface)!important; border-color:var(--border)!important; transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease; } .quick-grid .quick-action .quick-icon{ width:40px!important; height:40px!important; margin-bottom:6px!important; border:1px solid color-mix(in srgb,var(--qa-color) 18%,var(--border)); border-radius:11px!important; background:color-mix(in srgb,var(--qa-color) 10%,var(--surface))!important; color:var(--qa-color)!important; box-shadow:0 5px 14px color-mix(in srgb,var(--qa-color) 8%,transparent); } .quick-grid .quick-action .quick-icon i{color:inherit!important;} .quick-grid .quick-action .quick-arrow{ color:color-mix(in srgb,var(--qa-color) 58%,var(--muted))!important; } .quick-grid .quick-action:hover{ border-color:color-mix(in srgb,var(--qa-color) 34%,var(--border))!important; background:color-mix(in srgb,var(--qa-color) 2.5%,var(--surface))!important; box-shadow:0 12px 26px color-mix(in srgb,var(--qa-color) 8%,transparent)!important; transform:translateY(-2px); } .quick-grid .quick-action:hover .quick-icon{ background:color-mix(in srgb,var(--qa-color) 14%,var(--surface))!important; border-color:color-mix(in srgb,var(--qa-color) 28%,var(--border)); } .quick-grid .quick-pos-action{--qa-color:var(--accent);} .quick-grid .quick-bill-action{--qa-color:var(--primary);} .quick-grid .quick-purchase-action{--qa-color:color-mix(in srgb,var(--warning) 78%,var(--primary));} .quick-grid .quick-products-action{--qa-color:color-mix(in srgb,var(--accent) 72%,var(--primary));} .quick-grid .quick-payment-in{--qa-color:var(--success);} .quick-grid .quick-payment-out{--qa-color:var(--warning);} .quick-grid .quick-expense-action{--qa-color:var(--danger);} .quick-grid .quick-reports-action{--qa-color:color-mix(in srgb,var(--primary) 64%,var(--danger));} @media(max-width:560px){ .quick-grid .quick-action .quick-icon{width:38px!important;height:38px!important;} } /* ========================================================= V27 — Unified ProBill Icon Language Connects Dashboard Quick Actions, sidebar, cards, reports, settings, roles and common page icon surfaces. ========================================================= */ /* Shared semantic tones use only existing theme tokens. */ .nav-dashboard{--nav-color:var(--primary);} .nav-group.nav-sales{--nav-color:var(--primary);} .nav-group.nav-pos{--nav-color:var(--accent);} .nav-group.nav-payments{--nav-color:var(--success);} .nav-group.nav-purchases{--nav-color:var(--warning);} .nav-group.nav-inventory{--nav-color:color-mix(in srgb,var(--accent) 72%,var(--primary));} .nav-group.nav-people{--nav-color:color-mix(in srgb,var(--primary) 62%,var(--danger));} .nav-group.nav-reports{--nav-color:color-mix(in srgb,var(--primary) 68%,var(--danger));} .nav-group.nav-operations{--nav-color:var(--danger);} .nav-group.nav-settings{--nav-color:color-mix(in srgb,var(--primary) 48%,var(--muted));} /* Sidebar: same soft semantic icon chips used by Quick Actions. */ .main-nav .nav-item{ min-height:48px; height:auto; padding-top:6px; padding-bottom:6px; } .main-nav .nav-icon{ width:34px; height:34px; flex:0 0 34px; display:grid; place-items:center; border-radius:10px; border:1px solid color-mix(in srgb,var(--nav-color,var(--primary)) 16%,var(--border)); background:color-mix(in srgb,var(--nav-color,var(--primary)) 8%,var(--surface)); color:var(--nav-color,var(--primary)); font-size:13px; box-shadow:0 4px 12px color-mix(in srgb,var(--nav-color,var(--primary)) 6%,transparent); transition:background .16s ease,border-color .16s ease,transform .16s ease,box-shadow .16s ease; } .main-nav .nav-item:hover .nav-icon, .main-nav .nav-item.active .nav-icon, .main-nav .nav-group.open>.nav-item .nav-icon{ color:var(--nav-color,var(--primary)); background:color-mix(in srgb,var(--nav-color,var(--primary)) 13%,var(--surface)); border-color:color-mix(in srgb,var(--nav-color,var(--primary)) 28%,var(--border)); box-shadow:0 6px 14px color-mix(in srgb,var(--nav-color,var(--primary)) 9%,transparent); } .main-nav .nav-item:hover .nav-icon{transform:translateY(-1px);} .main-nav .nav-item.active{ background:color-mix(in srgb,var(--nav-color,var(--primary)) 7%,var(--surface)); color:color-mix(in srgb,var(--nav-color,var(--primary)) 82%,var(--text)); } .main-nav .nav-item.active:before{background:var(--nav-color,var(--primary));} .main-nav .nav-group.open>.nav-item{ background:color-mix(in srgb,var(--nav-color,var(--primary)) 5%,var(--surface)); } .main-nav .nav-sub{ padding-left:50px; padding-top:5px; } .main-nav .nav-sub a{ min-height:42px; gap:9px; padding:6px 9px; border-radius:10px; font-size:12.5px; } .main-nav .nav-sub a>i{ width:27px; height:27px; flex:0 0 27px; display:grid; place-items:center; border-radius:8px; border:1px solid color-mix(in srgb,var(--nav-color,var(--primary)) 13%,var(--border)); background:color-mix(in srgb,var(--nav-color,var(--primary)) 6%,var(--surface)); color:color-mix(in srgb,var(--nav-color,var(--primary)) 78%,var(--muted)); font-size:10px; } .main-nav .nav-sub a:hover>i, .main-nav .nav-sub a.active>i{ background:color-mix(in srgb,var(--nav-color,var(--primary)) 12%,var(--surface)); border-color:color-mix(in srgb,var(--nav-color,var(--primary)) 24%,var(--border)); color:var(--nav-color,var(--primary)); } .main-nav .nav-sub a.active{ background:color-mix(in srgb,var(--nav-color,var(--primary)) 6%,var(--surface)); color:color-mix(in srgb,var(--nav-color,var(--primary)) 78%,var(--text)); font-weight:750; } .sidebar-collapsed .main-nav .nav-icon{width:36px;height:36px;flex-basis:36px;} .sidebar-collapsed .main-nav .nav-item{padding:6px 0;} /* Header utility icons use the same language without competing with content. */ .header-tool-icon{ --tool-color:var(--primary); border-color:color-mix(in srgb,var(--tool-color) 16%,var(--border))!important; background:color-mix(in srgb,var(--tool-color) 6%,var(--surface))!important; color:var(--tool-color)!important; box-shadow:0 4px 12px color-mix(in srgb,var(--tool-color) 5%,transparent); } .header-reports-icon{--tool-color:color-mix(in srgb,var(--primary) 68%,var(--danger));} .header-settings-icon{--tool-color:color-mix(in srgb,var(--primary) 46%,var(--muted));} .header-tool-icon:hover{ background:color-mix(in srgb,var(--tool-color) 11%,var(--surface))!important; border-color:color-mix(in srgb,var(--tool-color) 28%,var(--border))!important; } /* Dashboard metric cards now visually belong to Quick Actions. */ .stat-card{--stat-color:var(--primary);} .stat-card.stat-sales{--stat-color:var(--accent);} .stat-card.stat-receivables{--stat-color:var(--success);} .stat-card.stat-payables{--stat-color:var(--warning);} .stat-card.stat-stock{--stat-color:color-mix(in srgb,var(--accent) 72%,var(--primary));} .stat-card.stat-invoices{--stat-color:var(--primary);} .stat-card.stat-customers{--stat-color:color-mix(in srgb,var(--primary) 62%,var(--danger));} .stat-card.stat-low-stock{--stat-color:var(--warning);} .stat-card.stat-expenses{--stat-color:var(--danger);} .stat-card .stat-icon{ width:42px!important; height:42px!important; border-radius:12px!important; border:1px solid color-mix(in srgb,var(--stat-color) 18%,var(--border)); background:color-mix(in srgb,var(--stat-color) 9%,var(--surface))!important; color:var(--stat-color)!important; box-shadow:0 5px 14px color-mix(in srgb,var(--stat-color) 7%,transparent); font-size:14px!important; } .stat-card:hover .stat-icon{ background:color-mix(in srgb,var(--stat-color) 13%,var(--surface))!important; border-color:color-mix(in srgb,var(--stat-color) 28%,var(--border)); } .mini-stats .stat-card{min-height:106px;} /* Shared metric icon component across Inventory, Branches, Tracking and Users. */ .metric-icon{ --metric-color:var(--primary); width:40px!important; height:40px!important; flex:0 0 40px!important; border-radius:11px!important; border:1px solid color-mix(in srgb,var(--metric-color) 18%,var(--border))!important; background:color-mix(in srgb,var(--metric-color) 9%,var(--surface))!important; color:var(--metric-color)!important; box-shadow:0 5px 14px color-mix(in srgb,var(--metric-color) 7%,transparent); } .metric-icon.success{--metric-color:var(--success);} .metric-icon.warning{--metric-color:var(--warning);} .metric-icon.danger{--metric-color:var(--danger);} .metric-icon.info{--metric-color:color-mix(in srgb,var(--accent) 68%,var(--primary));} .inventory-feature-card:hover .metric-icon{transform:translateY(-1px);} /* Settings feature icons. */ .tracking-setting-icon{ --setting-icon-color:var(--primary); border-color:color-mix(in srgb,var(--setting-icon-color) 20%,var(--border))!important; background:color-mix(in srgb,var(--setting-icon-color) 8%,var(--surface))!important; color:var(--setting-icon-color)!important; box-shadow:0 5px 14px color-mix(in srgb,var(--setting-icon-color) 6%,transparent); } .setting-icon-tracking{--setting-icon-color:color-mix(in srgb,var(--primary) 62%,var(--danger));} .setting-icon-pos{--setting-icon-color:var(--accent);} .setting-icon-branch{--setting-icon-color:color-mix(in srgb,var(--accent) 72%,var(--primary));} /* Reports use real Font Awesome icons and the same semantic chips. */ .report-icon{ --report-color:var(--primary); border:1px solid color-mix(in srgb,var(--report-color) 18%,var(--border)); background:color-mix(in srgb,var(--report-color) 9%,var(--surface))!important; color:var(--report-color)!important; box-shadow:0 5px 14px color-mix(in srgb,var(--report-color) 6%,transparent); } .report-tone-primary{--report-color:var(--primary);} .report-tone-success{--report-color:var(--success);} .report-tone-warning{--report-color:var(--warning);} .report-tone-danger{--report-color:var(--danger);} .report-tone-accent{--report-color:var(--accent);} .report-tone-info{--report-color:color-mix(in srgb,var(--accent) 68%,var(--primary));} .report-tone-cyan{--report-color:color-mix(in srgb,var(--accent) 78%,var(--primary));} .report-tone-violet{--report-color:color-mix(in srgb,var(--primary) 62%,var(--danger));} .report-tile:hover .report-icon,.report-tile.active .report-icon{ background:color-mix(in srgb,var(--report-color) 14%,var(--surface))!important; border-color:color-mix(in srgb,var(--report-color) 30%,var(--border)); } /* Users, role cards and branch-access icons. */ .role-icon{ --role-icon-color:color-mix(in srgb,var(--primary) 62%,var(--danger)); border:1px solid color-mix(in srgb,var(--role-icon-color) 18%,var(--border)); background:color-mix(in srgb,var(--role-icon-color) 9%,var(--surface))!important; color:var(--role-icon-color)!important; box-shadow:0 5px 14px color-mix(in srgb,var(--role-icon-color) 6%,transparent); } .role-icon-admin{--role-icon-color:var(--warning);} .role-icon-standard{--role-icon-color:color-mix(in srgb,var(--primary) 62%,var(--danger));} .user-avatar, .access-section-head>span, .branch-check-icon{ border:1px solid color-mix(in srgb,var(--primary) 16%,var(--border)); background:color-mix(in srgb,var(--primary) 8%,var(--surface))!important; color:var(--primary)!important; box-shadow:0 4px 12px color-mix(in srgb,var(--primary) 5%,transparent); } .branch-context-icon{ border:1px solid color-mix(in srgb,var(--accent) 20%,var(--border)); background:color-mix(in srgb,var(--accent) 9%,var(--surface))!important; color:var(--accent)!important; box-shadow:0 5px 14px color-mix(in srgb,var(--accent) 7%,transparent); } /* Common page-level icon boxes: same radius, tint and depth. */ .item-section-title>span, .inventory-avatar, .return-doc-icon, .return-empty-icon, .barcode-print-toolbar-icon{ border:1px solid color-mix(in srgb,var(--primary) 16%,var(--border))!important; background:color-mix(in srgb,var(--primary) 7%,var(--surface))!important; color:var(--primary)!important; box-shadow:0 4px 12px color-mix(in srgb,var(--primary) 5%,transparent); } /* Compact action icons align with the same system while preserving meaning. */ .inline-icon-btn, .icon-action.edit{ border-color:color-mix(in srgb,var(--primary) 18%,var(--border))!important; background:color-mix(in srgb,var(--primary) 6%,var(--surface))!important; color:var(--primary)!important; } .icon-action.danger{ border-color:color-mix(in srgb,var(--danger) 20%,var(--border))!important; background:color-mix(in srgb,var(--danger) 6%,var(--surface))!important; color:var(--danger)!important; } .inline-icon-btn:hover,.icon-action.edit:hover{ background:color-mix(in srgb,var(--primary) 11%,var(--surface))!important; border-color:color-mix(in srgb,var(--primary) 30%,var(--border))!important; } .icon-action.danger:hover{ background:color-mix(in srgb,var(--danger) 11%,var(--surface))!important; border-color:color-mix(in srgb,var(--danger) 32%,var(--border))!important; } /* Responsive: preserve the visual language without crowding smaller devices. */ @media(max-width:900px){ .main-nav .nav-icon{width:32px;height:32px;flex-basis:32px;border-radius:9px;} .main-nav .nav-sub{padding-left:45px;} .main-nav .nav-sub a>i{width:25px;height:25px;flex-basis:25px;} } @media(max-width:560px){ .stat-card .stat-icon{width:38px!important;height:38px!important;} .metric-icon{width:38px!important;height:38px!important;flex-basis:38px!important;} } /* ========================================================= V29 — Dashboard performance / quick-actions composition Keep the two cards visually balanced without creating a large dead area below Sales Overview. ========================================================= */ @media (min-width:1201px){ .dashboard-section-grid{ grid-template-columns:minmax(0,1.55fr) minmax(390px,.82fr)!important; align-items:stretch!important; } .dashboard-section-grid>.panel{ height:100%; min-height:0; } .dashboard-chart-card{ display:flex; flex-direction:column; min-height:430px!important; height:auto!important; align-self:stretch!important; } .dashboard-chart-card .panel-head{ flex:0 0 auto; } .dashboard-chart-card .sales-bars{ flex:1 1 auto; height:auto!important; min-height:315px; padding-top:16px; } .dashboard-chart-card .sales-bar-track{ height:255px!important; } .dashboard-quick-card{ display:flex; flex-direction:column; min-height:430px; } .dashboard-quick-card .panel-head{ flex:0 0 auto; margin-bottom:12px; } .dashboard-quick-card .quick-grid{ flex:1 1 auto; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(4,minmax(0,1fr)); gap:9px; } .dashboard-quick-card .quick-action{ min-height:72px!important; height:100%; display:grid!important; grid-template-columns:42px minmax(0,1fr) 18px; grid-template-rows:auto auto; column-gap:10px; row-gap:2px; align-content:center; align-items:center; padding:11px 12px!important; } .dashboard-quick-card .quick-action .quick-icon{ grid-column:1; grid-row:1 / span 2; width:40px!important; height:40px!important; margin:0!important; } .dashboard-quick-card .quick-action b{ grid-column:2; grid-row:1; align-self:end; font-size:11.5px!important; line-height:1.25!important; min-width:0; } .dashboard-quick-card .quick-action small{ grid-column:2; grid-row:2; align-self:start; font-size:9px!important; line-height:1.3!important; min-width:0; } .dashboard-quick-card .quick-action .quick-arrow{ position:static!important; grid-column:3; grid-row:1 / span 2; align-self:center; justify-self:end; font-size:9px; } } /* Large laptops: preserve the compact horizontal quick actions while allowing both dashboard cards to stack cleanly when space tightens. */ @media (min-width:761px) and (max-width:1200px){ .dashboard-section-grid{ grid-template-columns:1fr!important; align-items:stretch!important; } .dashboard-chart-card{ min-height:390px!important; } .dashboard-chart-card .sales-bars{ height:285px!important; } .dashboard-quick-card .quick-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; } .dashboard-quick-card .quick-action{ min-height:88px!important; padding:12px!important; } } @media (max-width:760px){ .dashboard-section-grid{ align-items:stretch!important; } .dashboard-chart-card{ min-height:0!important; } .dashboard-chart-card .sales-bars{ height:250px!important; } .dashboard-quick-card .quick-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:560px){ .dashboard-chart-card .sales-bars{ height:225px!important; } .dashboard-quick-card .quick-grid{ grid-template-columns:1fr!important; } } /* ========================================================= V30 — Dashboard row rhythm correction Keep Sales Overview and Quick Actions exactly aligned on desktop, then preserve a clean gap before the KPI row. ========================================================= */ @media (min-width:1201px){ .dashboard-section-grid{ grid-template-rows:420px!important; align-items:stretch!important; margin-bottom:16px!important; } .dashboard-section-grid>.dashboard-chart-card, .dashboard-section-grid>.dashboard-quick-card{ height:420px!important; min-height:420px!important; max-height:420px!important; align-self:stretch!important; box-sizing:border-box; overflow:hidden; } .dashboard-chart-card{ display:flex!important; flex-direction:column!important; } .dashboard-chart-card .panel-head{ flex:0 0 auto!important; margin-bottom:2px!important; } .dashboard-chart-card .sales-bars{ flex:1 1 auto!important; height:auto!important; min-height:0!important; margin-top:4px!important; padding-top:14px!important; } .dashboard-chart-card .sales-bar-track{ height:238px!important; } .dashboard-quick-card{ display:flex!important; flex-direction:column!important; } .dashboard-quick-card .panel-head{ flex:0 0 auto!important; margin-bottom:10px!important; } .dashboard-quick-card .quick-grid{ flex:1 1 auto!important; min-height:0!important; grid-template-rows:repeat(4,minmax(0,1fr))!important; } .dashboard-quick-card .quick-action{ min-height:0!important; height:100%!important; } .dashboard-section-grid + .mini-stats{ margin-top:0!important; } } @media (min-width:761px) and (max-width:1200px){ .dashboard-section-grid{ margin-bottom:14px!important; } .dashboard-section-grid + .mini-stats{ margin-top:0!important; } } @media (max-width:760px){ .dashboard-section-grid{ margin-bottom:12px!important; } .dashboard-section-grid + .mini-stats{ margin-top:0!important; } } /* ========================================================= V31 — ERP branch context + read-only demo mode polish ========================================================= */ /* Header is intentionally focused: branch context lives on Dashboard and Create Bill is already available from the Dashboard / Sales workspace. */ .header-branch-context, .header-tools .quick-create{display:none!important;} .dashboard-branch-context{ display:flex!important; align-items:center!important; justify-content:space-between!important; gap:18px!important; min-height:88px; padding:15px 18px!important; margin-bottom:14px!important; border-color:var(--primary-border)!important; border-radius:16px!important; overflow:visible!important; } .branch-context-main{ display:flex; align-items:center; gap:13px; min-width:0; flex:1 1 auto; } .branch-context-icon{ width:46px!important; height:46px!important; flex:0 0 46px; border-radius:13px!important; border:1px solid color-mix(in srgb,var(--accent) 24%,var(--border)); background:color-mix(in srgb,var(--accent) 8%,var(--surface))!important; color:var(--accent)!important; font-size:18px!important; } .branch-context-copy{gap:3px!important;} .branch-context-copy>span{font-size:9px!important;letter-spacing:.1em!important;} .branch-context-copy>b{font-size:15px!important;line-height:1.25!important;} .branch-context-copy>small{font-size:10.5px!important;line-height:1.45!important;} .dashboard-branch-switch{ display:grid!important; grid-template-columns:minmax(290px,1fr) minmax(190px,auto)!important; align-items:end!important; justify-content:end!important; gap:10px!important; min-width:min(520px,48vw); } .branch-switch-field{ display:grid!important; gap:6px!important; min-width:0!important; } .branch-switch-field>span{ display:flex; align-items:center; gap:6px; font-size:9.5px!important; font-weight:800!important; color:var(--text)!important; } .branch-switch-field>span i{color:var(--primary);font-size:10px;} .dashboard-branch-switch select, .dashboard-branch-switch .smart-select-button{ min-height:44px!important; height:44px!important; border-radius:11px!important; padding-left:12px!important; padding-right:12px!important; font-size:11.5px!important; font-weight:700!important; } .branch-context-status{ min-height:44px!important; height:44px!important; display:flex!important; align-items:center!important; justify-content:flex-start!important; gap:8px!important; padding:0 11px!important; border:1px solid var(--border)!important; border-radius:11px!important; background:var(--surface-soft)!important; white-space:nowrap; } .branch-status-icon{ width:28px; height:28px; flex:0 0 28px; display:grid; place-items:center; border-radius:8px; background:color-mix(in srgb,var(--success) 10%,var(--surface)); color:var(--success); font-size:10px; } .branch-status-copy{display:grid;gap:1px;min-width:0;} .branch-status-copy b{font-size:10px;line-height:1.25;color:var(--text-strong);} .branch-status-copy small{font-size:8.5px;line-height:1.25;color:var(--muted);font-weight:700;} /* User / branch assignment: selected locations read like ERP access cards. */ .branch-access-callout{ display:flex; align-items:flex-start; gap:10px; padding:10px 11px; border:1px solid var(--primary-border); border-radius:11px; background:var(--primary-soft-2); } .branch-access-callout>span{ width:30px; height:30px; flex:0 0 30px; display:grid; place-items:center; border-radius:9px; background:var(--primary-soft); color:var(--primary); } .branch-access-callout b{display:block;font-size:10.5px;color:var(--text-strong);} .branch-access-callout small{display:block;margin-top:2px;font-size:9px;line-height:1.5;color:var(--muted);} .branch-check:has(input:checked){ border-color:var(--primary-border-strong)!important; background:var(--primary-soft-2)!important; box-shadow:0 0 0 2px var(--primary-ring); } .branch-check:has(input:checked) .branch-check-icon{ background:var(--primary)!important; color:var(--surface)!important; } .branch-check input{accent-color:var(--primary);} .branch-default-select>span{font-size:10.5px;font-weight:800;color:var(--text-strong);} .branch-default-select select{min-height:42px;font-size:11px;font-weight:700;} .access-mini-actions button{display:inline-flex;align-items:center;gap:5px;} /* Read-only demo mode — persistent, professional notification on every page. */ .demo-mode-banner{ position:relative; z-index:95; display:flex; align-items:center; gap:11px; margin:12px 18px 0; padding:10px 12px; border:1px solid color-mix(in srgb,var(--warning) 30%,var(--border)); border-radius:13px; background:color-mix(in srgb,var(--warning) 6%,var(--surface)); color:var(--text); box-shadow:var(--shadow-sm); } .demo-mode-icon{ width:34px; height:34px; flex:0 0 34px; display:grid; place-items:center; border-radius:10px; background:color-mix(in srgb,var(--warning) 13%,var(--surface)); color:var(--warning); } .demo-mode-banner>div{display:grid;gap:2px;min-width:0;flex:1;} .demo-mode-banner b{font-size:11px;color:var(--text-strong);} .demo-mode-banner div span{font-size:9.5px;line-height:1.45;color:var(--muted);} .demo-mode-badge{ display:inline-flex; align-items:center; gap:5px; min-height:30px; padding:0 9px; border-radius:9px; background:var(--surface); border:1px solid color-mix(in srgb,var(--warning) 22%,var(--border)); color:var(--warning); font-size:8.5px; font-weight:800; white-space:nowrap; } .auth-demo-readonly{ display:flex; align-items:flex-start; gap:10px; margin:12px 0; padding:11px 12px; border:1px solid color-mix(in srgb,var(--warning) 28%,var(--border)); border-radius:12px; background:color-mix(in srgb,var(--warning) 6%,var(--surface)); } .auth-demo-readonly>i{margin-top:2px;color:var(--warning);} .auth-demo-readonly span{display:grid;gap:2px;} .auth-demo-readonly b{font-size:10px;color:var(--text-strong);} .auth-demo-readonly small{font-size:9px;line-height:1.45;color:var(--muted);} @media(max-width:1100px){ .dashboard-branch-context{align-items:flex-start!important;} .dashboard-branch-switch{min-width:420px;grid-template-columns:minmax(240px,1fr) minmax(170px,auto)!important;} } @media(max-width:860px){ .dashboard-branch-context{display:grid!important;grid-template-columns:1fr!important;gap:12px!important;} .dashboard-branch-switch{width:100%;min-width:0;grid-template-columns:minmax(0,1fr) minmax(170px,auto)!important;} .demo-mode-banner{margin:10px 12px 0;} } @media(max-width:620px){ .dashboard-branch-context{padding:13px!important;} .branch-context-main{align-items:flex-start;} .dashboard-branch-switch{grid-template-columns:1fr!important;} .branch-context-status{width:100%;} .demo-mode-banner{align-items:flex-start;} .demo-mode-badge{display:none;} .branch-access-callout{padding:9px;} } /* V23 — Users & Roles: visible branch assignment workflow */ .user-access-flow{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-bottom:2px; } .user-access-flow>span{ min-height:38px; display:flex; align-items:center; justify-content:center; gap:7px; padding:0 10px; border:1px solid var(--border); border-radius:10px; background:var(--surface); color:var(--muted); font-size:9px; font-weight:800; } .user-access-flow>span:nth-child(2){ border-color:var(--primary-border); background:var(--primary-soft); color:var(--primary); } .branch-access-section{ border-color:var(--primary-border)!important; background:color-mix(in srgb,var(--primary) 3%,var(--surface))!important; } .branch-access-section>.access-section-head>span{ background:color-mix(in srgb,var(--primary) 10%,var(--surface)); border:1px solid var(--primary-border); } .branch-access-state{ display:flex; align-items:flex-start; gap:10px; padding:12px; border:1px solid var(--border); border-radius:11px; background:var(--surface); } .branch-access-state>i{margin-top:2px;color:var(--warning);font-size:13px;} .branch-access-state>div{display:grid;gap:3px;min-width:0;} .branch-access-state b{font-size:11px;color:var(--text-strong);} .branch-access-state small{font-size:9px;line-height:1.5;color:var(--muted);} .access-user-modal .branch-access-section .branch-default-select{ max-width:520px; } @media(max-width:760px){ .user-access-flow{grid-template-columns:1fr;} .user-access-flow>span{justify-content:flex-start;} } /* V24 — Users & Roles: simplified branch access, admin-only default branch */ .access-user-form{gap:14px;} .branch-access-section{padding:16px!important;gap:14px!important;} .branch-access-section .access-section-head{padding-bottom:2px;} .branch-access-section .access-section-head b{font-size:13px!important;} .branch-access-section .access-section-head small{font-size:10px!important;line-height:1.55!important;} .branch-access-mode{display:grid;gap:13px;} .user-branch-grid{gap:10px!important;} .branch-check{min-height:74px;padding:13px!important;border-radius:13px!important;} .branch-check input{width:17px!important;height:17px!important;} .branch-check-icon{width:34px!important;height:34px!important;border-radius:10px!important;} .branch-check b{font-size:11px!important;line-height:1.3;} .branch-check small{font-size:9px!important;line-height:1.45!important;} .branch-access-footnote{display:flex;align-items:flex-start;gap:8px;padding:10px 11px;border:1px solid var(--border);border-radius:10px;background:var(--surface-soft);color:var(--muted);font-size:9px;line-height:1.5;} .branch-access-footnote i{margin-top:2px;color:var(--primary);} .admin-branch-access{display:flex;align-items:center;gap:12px;padding:13px 14px;border:1px solid var(--primary-border);border-radius:13px;background:var(--primary-soft-2);} .admin-branch-icon{width:38px;height:38px;flex:0 0 38px;display:grid;place-items:center;border-radius:11px;background:var(--primary-soft);color:var(--primary);border:1px solid var(--primary-border);} .admin-branch-copy{display:grid;gap:3px;min-width:0;} .admin-branch-copy b{font-size:12px;color:var(--text-strong);} .admin-branch-copy small{font-size:9.5px;line-height:1.5;color:var(--muted);} .admin-default-branch{max-width:560px!important;gap:6px!important;} .admin-default-branch>span{font-size:11px!important;} .admin-default-branch .smart-select-button,.admin-default-branch select{min-height:44px!important;font-size:11.5px!important;font-weight:700!important;} .admin-default-branch small{font-size:9px!important;line-height:1.5!important;} .access-mini-actions button{min-height:32px;padding:0 10px!important;font-size:8.5px!important;} @media(max-width:760px){ .branch-access-section{padding:13px!important;} .branch-check{min-height:68px;} .admin-branch-access{align-items:flex-start;} .admin-default-branch{max-width:none!important;width:100%;} } /* V23 — Professional Stock Transfer, Stock Adjustment, Purchase Search and Regional Settings */ .purchase-product-search-row{align-items:center;gap:10px} .purchase-product-search{position:relative;flex:1;min-width:0} .purchase-product-search>i{position:absolute;left:14px;top:50%;transform:translateY(-50%);z-index:2;color:var(--muted);font-size:13px;pointer-events:none} .purchase-product-search #productSearch{width:100%;height:46px;padding:0 42px 0 40px!important;background:var(--surface)!important;border:1px solid var(--border-strong)!important;border-radius:12px!important;color:var(--text)!important;font-size:13px!important;font-weight:600!important;box-shadow:0 1px 2px rgba(15,23,42,.02)} .purchase-product-search #productSearch:focus{border-color:var(--primary)!important;box-shadow:0 0 0 3px var(--primary-ring)!important;outline:0} .purchase-product-search #productSearch::placeholder{color:var(--muted);opacity:1} .purchase-product-search .purchase-suggestions{top:calc(100% + 7px)!important;border-radius:12px!important;padding:6px!important;max-height:360px!important;z-index:10100!important} .purchase-product-search .purchase-suggestion{border-radius:9px!important;padding:10px 11px!important;font-size:11px!important} .purchase-product-search .purchase-suggestion b{font-size:11px!important}.purchase-product-search .purchase-suggestion small{font-size:9px!important}.purchase-product-search .purchase-suggestion strong{margin-left:auto;font-size:11px!important;white-space:nowrap} /* Stock transfer */ .transfer-hero{margin-bottom:16px} .professional-transfer-layout{grid-template-columns:minmax(0,1.18fr) minmax(420px,.82fr)!important;gap:18px!important;align-items:start!important} .transfer-create-panel,.transfer-history-panel{border-radius:16px!important} .transfer-panel-head{align-items:flex-start!important;margin-bottom:2px} .transfer-panel-head h2{font-size:21px!important;line-height:1.25!important} .transfer-panel-head p{font-size:11px!important;line-height:1.55!important} .transfer-form{display:grid;gap:14px} .transfer-route-card{display:grid;grid-template-columns:minmax(0,1fr) 42px minmax(0,1fr);gap:10px;align-items:end;padding:14px;border:1px solid var(--primary-border);border-radius:14px;background:var(--primary-soft-2)} .transfer-route-point{display:grid;grid-template-columns:38px minmax(0,1fr);gap:10px;align-items:center;min-width:0} .transfer-route-point label{display:grid;gap:6px;min-width:0;font-size:11px;font-weight:800;color:var(--text-strong)} .transfer-route-point label>span{font-size:10px;color:var(--muted);font-weight:800;letter-spacing:.01em} .transfer-route-icon{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--primary-border);border-radius:11px;background:var(--surface);color:var(--primary);font-size:14px} .transfer-route-point.destination .transfer-route-icon{color:var(--success);border-color:color-mix(in srgb,var(--success) 24%,var(--border));background:color-mix(in srgb,var(--success) 7%,var(--surface))} .transfer-route-arrow{width:38px;height:38px;display:grid;place-items:center;margin-bottom:2px;border-radius:999px;background:var(--surface);border:1px solid var(--border);color:var(--muted);font-size:12px} .transfer-route-card .smart-select-button,.transfer-route-card select{min-height:44px!important;background:var(--surface)!important;font-size:11.5px!important;font-weight:750!important} .transfer-meta-grid{display:grid;grid-template-columns:minmax(180px,.55fr) minmax(0,1.45fr);gap:12px} .transfer-meta-grid label{display:grid;gap:6px;font-size:11px;font-weight:800;color:var(--text-strong)} .transfer-meta-grid input{height:44px!important;border-radius:11px!important;font-size:12px!important} .transfer-lines-card{border:1px solid var(--border);border-radius:15px;background:var(--surface-soft);padding:13px} .transfer-lines-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:1px 2px 12px} .transfer-lines-head b{display:block;font-size:13px;color:var(--text-strong)} .transfer-lines-head small{display:block;margin-top:3px;font-size:9.5px;line-height:1.45;color:var(--muted)} .transfer-lines-head .compact{min-height:36px;padding:0 11px;font-size:10px} .inventory-transfer-workspace .transfer-items{padding:0!important;border:0!important;background:transparent!important;gap:9px!important} .inventory-transfer-workspace .transfer-line{position:relative;display:grid!important;grid-template-columns:30px minmax(220px,1fr) 128px 128px 38px!important;gap:10px!important;align-items:end!important;padding:11px!important;border:1px solid var(--border)!important;border-radius:12px!important;background:var(--surface)!important;box-shadow:0 3px 12px rgba(15,23,42,.025)} .transfer-line-number{align-self:center;width:26px;height:26px;display:grid;place-items:center;border-radius:8px;background:var(--primary-soft);color:var(--primary);font-size:10px;font-weight:800} .inventory-transfer-workspace .transfer-line>label{display:grid!important;gap:6px!important;font-size:10px!important;font-weight:800!important;color:var(--text-strong)!important} .transfer-product-field .smart-select-button,.transfer-quantity-field input{height:42px!important;min-height:42px!important;border-radius:10px!important;background:var(--surface)!important;font-size:11px!important} .transfer-available-card{display:flex;flex-direction:column;justify-content:center;min-height:64px;padding:7px 10px;border:1px solid var(--border);border-radius:10px;background:var(--surface-soft)} .transfer-available-card>span{font-size:8px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}.transfer-available-card strong{font-size:17px;line-height:1.2;color:var(--text-strong);margin-top:2px}.transfer-available-card small{font-size:8px;color:var(--muted);margin-top:2px} .transfer-line.no-stock .transfer-available-card{border-color:color-mix(in srgb,var(--danger) 24%,var(--border));background:color-mix(in srgb,var(--danger) 5%,var(--surface))}.transfer-line.no-stock .transfer-available-card strong,.transfer-line.no-stock .transfer-available-card small{color:var(--danger)} .transfer-remove{width:38px!important;height:42px!important;align-self:end!important} .transfer-form-footer{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-top:1px} .transfer-form-note{display:flex;align-items:flex-start;gap:8px;max-width:66%;font-size:9.5px;line-height:1.5;color:var(--muted)}.transfer-form-note i{color:var(--primary);margin-top:2px}.transfer-submit{min-height:44px;padding:0 16px!important;white-space:nowrap} .transfer-history-count{display:inline-flex;padding:6px 9px;border:1px solid var(--border);border-radius:999px;background:var(--surface-soft);font-size:9px;font-weight:800;color:var(--muted)} .transfer-history-table-wrap{border:1px solid var(--border);border-radius:12px;overflow:auto}.transfer-history-table{min-width:620px}.transfer-history-table th{font-size:9.5px!important}.transfer-history-table td{font-size:10.5px!important;padding-top:12px!important;padding-bottom:12px!important}.transfer-history-table td strong{font-size:11px}.transfer-history-route{display:flex;align-items:center;gap:7px;white-space:nowrap}.transfer-history-route span{font-weight:700}.transfer-history-route i{color:var(--muted);font-size:8px} /* Stock adjustment */ .stock-adjustment-hero{margin-bottom:14px} .stock-adjustment-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:14px} .adjustment-summary-card{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--border);border-radius:13px;background:var(--surface);box-shadow:var(--shadow-sm)} .adjustment-summary-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;border:1px solid var(--primary-border);background:var(--primary-soft);color:var(--primary);font-size:13px}.adjustment-summary-icon.products{color:var(--info);border-color:color-mix(in srgb,var(--info) 24%,var(--border));background:color-mix(in srgb,var(--info) 7%,var(--surface))}.adjustment-summary-icon.difference{color:var(--warning);border-color:color-mix(in srgb,var(--warning) 24%,var(--border));background:color-mix(in srgb,var(--warning) 7%,var(--surface))} .adjustment-summary-card small{display:block;font-size:8.5px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}.adjustment-summary-card strong{display:block;margin-top:2px;font-size:14px;color:var(--text-strong)}#adjustmentNetDifference.positive{color:var(--success)}#adjustmentNetDifference.negative{color:var(--danger)} .professional-adjustment-layout{grid-template-columns:minmax(0,1.12fr) minmax(420px,.88fr)!important;gap:18px!important;align-items:start!important} .adjustment-create-panel,.adjustment-history-panel{border-radius:16px!important}.adjustment-create-panel .panel-head h2,.adjustment-history-panel .panel-head h2{font-size:20px!important}.adjustment-create-panel .panel-head p,.adjustment-history-panel .panel-head p{font-size:10.5px!important;line-height:1.5!important} .adjustment-control-card{display:grid;grid-template-columns:minmax(220px,.72fr) minmax(0,1.28fr);gap:12px;padding:13px;border:1px solid var(--border);border-radius:13px;background:var(--surface-soft)} .adjustment-control-card label{display:grid;gap:6px;font-size:10.5px;font-weight:800;color:var(--text-strong)}.adjustment-control-card input,.adjustment-control-card .smart-select-button,.adjustment-control-card select{min-height:43px!important;background:var(--surface)!important;border-radius:10px!important;font-size:11.5px!important} .professional-adjust-picker{margin:13px 0 10px!important;padding:0!important}.professional-adjust-picker label{font-size:10px!important;color:var(--text-strong)!important}.professional-adjust-picker .adjust-search input{height:44px!important;background:var(--surface)!important;border:1px solid var(--border-strong)!important;border-radius:10px!important;font-size:11.5px!important;padding-left:36px!important}.professional-adjust-picker .adjust-search>i{top:15px!important;font-size:12px!important}.professional-adjust-picker>.secondary-btn{height:44px!important} .adjust-search>#adjustSuggestions{display:none;top:49px!important;max-height:320px;overflow:auto;z-index:10110!important;padding:5px;border-radius:11px!important}.adjust-search>#adjustSuggestions.show{display:block}.adjust-search>#adjustSuggestions button{justify-content:flex-start!important;gap:9px!important;padding:9px!important;border:0!important;border-radius:8px!important}.adjust-search>#adjustSuggestions button:hover{background:var(--surface-hover)!important}.adjust-search>#adjustSuggestions .inventory-avatar{width:34px;height:34px;min-width:34px}.adjust-search>#adjustSuggestions .adjust-suggestion-copy{flex:1;min-width:0}.adjust-search>#adjustSuggestions b{font-size:10.5px!important}.adjust-search>#adjustSuggestions small{font-size:8.5px!important}.adjust-search>#adjustSuggestions button>i{margin-left:auto;font-size:10px!important} .adjustment-table-intro{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:10px 0 8px}.adjustment-table-intro b{display:block;font-size:12px;color:var(--text-strong)}.adjustment-table-intro span{display:block;margin-top:2px;font-size:9px;color:var(--muted)}.adjustment-live-badge{display:inline-flex!important;align-items:center;gap:6px;padding:6px 9px;border-radius:999px;background:var(--primary-soft);color:var(--primary)!important;font-size:8.5px!important;font-weight:800!important;white-space:nowrap} .adjustment-table-wrap{border-radius:12px!important;overflow:auto}.adjustment-table{min-width:680px!important}.adjustment-table th{font-size:9.5px!important;padding:10px 12px!important}.adjustment-table td{font-size:11px!important;padding:10px 12px!important;vertical-align:middle!important}.adjustment-table .inventory-product-cell b{font-size:11px!important}.adjustment-table .inventory-product-cell small{font-size:8.5px!important}.adjustment-table .inventory-avatar{width:36px;height:36px;min-width:36px}.adjustment-table .inventory-avatar img{width:100%;height:100%;object-fit:cover;border-radius:8px}.system-qty-chip{display:inline-flex;min-width:66px;justify-content:center;padding:7px 9px;border-radius:9px;background:var(--surface-soft);border:1px solid var(--border);font-size:11px;font-weight:800}.adjust-qty-input{width:118px!important;height:38px!important;border-radius:9px!important;font-size:11.5px!important;font-weight:800!important;text-align:center}.adjust-diff{min-width:74px!important;padding:7px 9px!important;font-size:10px!important} .adjustment-footer{margin-top:12px!important;padding-top:12px;border-top:1px solid var(--border)}.adjustment-footer span{font-size:11px!important}.adjustment-footer small{font-size:8.5px!important;line-height:1.45}.adjustment-footer .primary-btn{min-height:42px} .adjustment-history-table{min-width:590px}.adjustment-history-table th{font-size:9.5px!important}.adjustment-history-table td{font-size:10.5px!important;padding:12px!important;vertical-align:middle}.adjustment-history-ref strong{display:block;font-size:11px}.adjustment-history-ref small{display:block;margin-top:3px;font-size:8.5px;color:var(--muted);max-width:220px;white-space:normal;line-height:1.4}.branch-inline{display:inline-flex;align-items:center;gap:6px;font-weight:700;white-space:nowrap}.branch-inline i{color:var(--primary);font-size:9px} /* Currency & Tax regional settings */ .locale-tax-panel{scroll-margin-top:82px}.settings-region-badge{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid var(--primary-border);border-radius:999px;background:var(--primary-soft);color:var(--primary);font-size:9px;font-weight:800;white-space:nowrap}.localization-form{display:grid;gap:14px}.regional-settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.regional-setting-card{min-width:0;padding:15px;border:1px solid var(--border);border-radius:14px;background:var(--surface-soft)}.regional-card-head{display:flex;align-items:center;gap:10px;padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid var(--border)}.regional-card-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;border:1px solid var(--primary-border);background:var(--primary-soft);color:var(--primary);font-size:14px}.regional-card-icon.tax{color:var(--warning);border-color:color-mix(in srgb,var(--warning) 24%,var(--border));background:color-mix(in srgb,var(--warning) 7%,var(--surface))}.regional-card-head b{display:block;font-size:13px;color:var(--text-strong)}.regional-card-head small{display:block;margin-top:3px;font-size:9px;line-height:1.45;color:var(--muted)}.regional-form-grid{gap:10px!important}.regional-form-grid>label{font-size:10.5px!important}.regional-form-grid input,.regional-form-grid select,.regional-form-grid .smart-select-button{min-height:42px!important;background:var(--surface)!important;font-size:11px!important}.currency-preview{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border:1px dashed var(--primary-border);border-radius:10px;background:var(--surface)}.currency-preview span{font-size:9px;color:var(--muted);font-weight:800}.currency-preview strong{font-size:15px;color:var(--text-strong)}.regional-switch-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 11px;border:1px solid var(--border);border-radius:10px;background:var(--surface)}.regional-switch-row b{display:block;font-size:10.5px;color:var(--text-strong)}.regional-switch-row small{display:block;margin-top:3px;font-size:8.5px;line-height:1.45;color:var(--muted)}.regional-settings-note{display:flex;align-items:flex-start;gap:8px;padding:10px 11px;border:1px solid var(--primary-border);border-radius:10px;background:var(--primary-soft-2);font-size:9px;line-height:1.5;color:var(--muted)}.regional-settings-note i{color:var(--primary);margin-top:2px}.regional-settings-note b{color:var(--text-strong)} @media(max-width:1250px){ .professional-transfer-layout,.professional-adjustment-layout{grid-template-columns:1fr!important} .transfer-history-panel,.adjustment-history-panel{order:2} .regional-settings-grid{grid-template-columns:1fr} } @media(max-width:900px){ .inventory-transfer-workspace .transfer-line{grid-template-columns:30px minmax(0,1fr) 120px 120px 38px!important} .stock-adjustment-summary{grid-template-columns:1fr 1fr 1fr} } @media(max-width:720px){ .purchase-product-search-row{display:grid!important;grid-template-columns:1fr}.purchase-product-search-row>.secondary-btn{width:100%;justify-content:center} .transfer-route-card{grid-template-columns:1fr}.transfer-route-arrow{margin:0 auto;transform:rotate(90deg)} .transfer-meta-grid,.adjustment-control-card{grid-template-columns:1fr} .inventory-transfer-workspace .transfer-line{grid-template-columns:30px minmax(0,1fr) 38px!important;align-items:end!important}.transfer-product-field{grid-column:2/3}.transfer-available-card{grid-column:2/3}.transfer-quantity-field{grid-column:2/3}.transfer-remove{grid-column:3/4;grid-row:1/2}.transfer-line-number{grid-column:1/2;grid-row:1/2} .transfer-form-footer{align-items:stretch;flex-direction:column}.transfer-form-note{max-width:none}.transfer-submit{width:100%;justify-content:center} .stock-adjustment-summary{grid-template-columns:1fr}.professional-adjust-picker{grid-template-columns:1fr!important}.professional-adjust-picker>.secondary-btn{width:100%;justify-content:center} .adjustment-table-intro{align-items:flex-start;flex-direction:column} .settings-region-badge{display:none} } .transfer-history-list{display:grid;gap:9px}.transfer-history-item{padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--surface);box-shadow:0 3px 12px rgba(15,23,42,.025)}.transfer-history-item-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.transfer-history-item-head small{display:block;font-size:8px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:800}.transfer-history-item-head strong{display:block;margin-top:2px;font-size:11.5px;color:var(--text-strong)}.transfer-history-route{margin-top:10px;display:grid;grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr);align-items:center;gap:5px}.transfer-history-route>span{display:flex;align-items:center;gap:6px;min-width:0;padding:7px 8px;border-radius:9px;background:var(--surface-soft);font-size:9.5px;font-weight:750;white-space:normal}.transfer-history-route>span i{color:var(--primary);font-size:8px}.transfer-history-route>i{justify-self:center;color:var(--muted);font-size:8px}.transfer-history-date{display:flex;align-items:center;gap:6px;margin-top:9px;font-size:9px;color:var(--muted);font-weight:650}.transfer-history-date i{color:var(--muted)} /* V25 — Purchase suggestion layering, clearer regional tax controls and business logo */ .purchase-products-panel{position:relative!important;z-index:40!important;overflow:visible!important;isolation:auto!important} .purchase-products-panel.suggestions-open{z-index:10020!important} .purchase-products-panel .purchase-product-search{z-index:10021!important} .purchase-products-panel .purchase-suggestions{z-index:10022!important;box-shadow:var(--shadow-lg)!important;background:var(--surface)!important} .purchase-products-panel + .purchase-bottom,.purchase-bottom{position:relative;z-index:1} .tax-master-control{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px;border:1px solid var(--primary-border);border-radius:12px;background:var(--surface);margin-bottom:12px} .tax-master-copy{display:flex;align-items:center;gap:10px;min-width:0}.tax-master-icon{width:38px;height:38px;flex:0 0 38px;display:grid;place-items:center;border-radius:10px;background:var(--primary-soft);border:1px solid var(--primary-border);color:var(--primary)} .tax-master-copy b{display:block;font-size:11.5px;color:var(--text-strong)}.tax-master-copy small{display:block;margin-top:3px;font-size:9px;line-height:1.5;color:var(--muted)} .tax-master-action{display:flex;align-items:center;gap:10px;flex:0 0 auto}.tax-status-badge{display:inline-flex;align-items:center;justify-content:center;min-width:58px;padding:6px 9px;border-radius:999px;background:color-mix(in srgb,var(--success) 9%,var(--surface));border:1px solid color-mix(in srgb,var(--success) 24%,var(--border));color:var(--success);font-size:8.5px;font-weight:800}.tax-status-badge.disabled{background:var(--surface-soft);border-color:var(--border);color:var(--muted)} .tax-config-fields{transition:opacity .16s ease;display:grid;gap:11px}.tax-config-fields.tax-config-disabled{opacity:.48;pointer-events:none;filter:saturate(.65)} .tax-logic-guide{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.tax-logic-guide>div{display:flex;gap:8px;align-items:flex-start;padding:9px;border:1px solid var(--border);border-radius:10px;background:var(--surface)}.tax-logic-guide>div>span{width:22px;height:22px;flex:0 0 22px;display:grid;place-items:center;border-radius:7px;background:var(--primary-soft);color:var(--primary);font-size:9px;font-weight:900}.tax-logic-guide p{margin:0;display:grid;gap:2px}.tax-logic-guide b{font-size:9.5px;color:var(--text-strong)}.tax-logic-guide small{font-size:8px;line-height:1.4;color:var(--muted)} .tax-live-preview{margin-top:12px;padding:11px 12px;border:1px dashed var(--primary-border);border-radius:11px;background:var(--surface)}.tax-preview-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:8px;margin-bottom:8px;border-bottom:1px solid var(--border)}.tax-preview-heading>span{font-size:8.5px;font-weight:850;letter-spacing:.04em;color:var(--primary)}.tax-preview-heading small{font-size:8px;color:var(--muted)}.tax-preview-heading b{color:var(--text-strong)} .tax-preview-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.tax-preview-grid>div,.tax-preview-single,.tax-preview-disabled{padding:9px 10px;border:1px solid var(--border);border-radius:9px;background:var(--surface-soft)}.tax-preview-grid small,.tax-preview-single small,.tax-preview-disabled small{display:block;font-size:8px;color:var(--muted);line-height:1.4}.tax-preview-grid b{display:block;margin-top:3px;font-size:9.5px;color:var(--text-strong)}.tax-preview-grid strong{display:block;margin-top:5px;font-size:11px;color:var(--primary)}.tax-preview-single{display:flex;align-items:center;justify-content:space-between;gap:12px}.tax-preview-single b{display:block;margin-top:3px;font-size:10px;color:var(--text-strong)}.tax-preview-single strong{font-size:14px;color:var(--primary)}.tax-preview-disabled{display:flex;align-items:center;gap:10px}.tax-preview-disabled>i{font-size:16px;color:var(--muted)}.tax-preview-disabled b{display:block;font-size:10px;color:var(--text-strong)} .currency-preview>div{display:grid;gap:2px}.currency-preview small{font-size:8px;color:var(--muted);font-weight:600} .business-logo-setting{display:grid;grid-template-columns:88px minmax(0,1fr) auto;align-items:center;gap:14px;padding:14px;margin-bottom:14px;border:1px solid var(--border);border-radius:13px;background:var(--surface-soft)} .business-logo-preview{width:88px;height:72px;display:grid;place-items:center;overflow:hidden;border:1px solid var(--border-strong);border-radius:11px;background:var(--surface)}.business-logo-preview img{width:100%;height:100%;object-fit:contain;padding:7px}.business-logo-preview>span{width:42px;height:42px;display:grid;place-items:center;border-radius:10px;background:var(--primary);color:var(--on-primary);font-size:18px;font-weight:850} .business-logo-copy{display:grid;gap:3px;min-width:0}.business-logo-copy b{font-size:12px;color:var(--text-strong)}.business-logo-copy span{font-size:10px;color:var(--text)}.business-logo-copy small{font-size:8.5px;line-height:1.45;color:var(--muted)} .business-logo-actions{display:grid;gap:8px;justify-items:end}.logo-upload-btn{cursor:pointer;white-space:nowrap}.logo-upload-btn input{display:none}.logo-remove-option{display:flex!important;align-items:center;justify-content:flex-end;gap:9px!important;font-size:8.5px!important;color:var(--muted)!important;cursor:pointer}.logo-remove-option .switch{flex:0 0 auto} .invoice-logo.has-business-logo,.quotation-logo.has-business-logo{overflow:hidden;background:var(--surface)!important;border:1px solid var(--border)!important;padding:3px}.invoice-logo.has-business-logo img,.quotation-logo.has-business-logo img{width:100%;height:100%;object-fit:contain;border-radius:inherit} @media(max-width:900px){.tax-logic-guide{grid-template-columns:1fr}.business-logo-setting{grid-template-columns:74px 1fr}.business-logo-preview{width:74px;height:64px}.business-logo-actions{grid-column:1/-1;display:flex;justify-items:initial;align-items:center;justify-content:flex-start;flex-wrap:wrap}} @media(max-width:640px){.tax-master-control{align-items:flex-start;flex-direction:column}.tax-master-action{width:100%;justify-content:space-between}.tax-preview-grid{grid-template-columns:1fr}.tax-preview-heading{align-items:flex-start;flex-direction:column}.business-logo-setting{grid-template-columns:1fr}.business-logo-preview{width:100%;height:110px}.business-logo-actions{display:grid;width:100%}.business-logo-actions .secondary-btn{width:100%;justify-content:center}} .tax-split-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;transition:opacity .16s ease}.tax-split-fields.is-hidden{display:none}.tax-split-fields label{min-width:0} @media(max-width:720px){.tax-split-fields{grid-template-columns:1fr}} /* -------------------------------------------------------------------------- Bank Master + Invoice Design Studio V2 -------------------------------------------------------------------------- */ .bank-master-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:14px}.bank-master-summary>div{border:1px solid var(--border);border-radius:11px;padding:12px;background:var(--surface-soft)}.bank-master-summary span{display:block;font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.45px;font-weight:700}.bank-master-summary strong{display:block;font-size:13px;margin-top:4px;overflow-wrap:anywhere}.bank-master-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.bank-account-card{border:1px solid var(--border);border-radius:13px;padding:13px;background:var(--surface);box-shadow:var(--shadow-sm)}.bank-account-card.is-inactive{opacity:.62}.bank-account-top{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:9px;align-items:center}.bank-account-icon{width:38px;height:38px;border-radius:10px;background:var(--primary-soft);color:var(--primary);display:grid;place-items:center}.bank-account-top b,.bank-account-top span{display:block}.bank-account-top>div>b{font-size:11px}.bank-account-top>div>span{font-size:9px;color:var(--muted);margin-top:2px}.bank-account-number{font-size:14px;font-weight:800;letter-spacing:.55px;margin:12px 0 9px;overflow-wrap:anywhere}.bank-account-meta{display:flex;gap:7px;flex-wrap:wrap;color:var(--muted);font-size:8.5px}.bank-account-meta span{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--border);background:var(--surface-soft);border-radius:999px;padding:4px 7px}.bank-account-actions{display:flex;align-items:center;justify-content:flex-end;gap:7px;margin-top:12px;padding-top:10px;border-top:1px solid var(--border)}.bank-account-actions form{margin:0}.bank-master-empty{grid-column:1/-1;min-height:150px;display:grid;place-items:center;text-align:center;gap:5px;border:1px dashed var(--border-strong);border-radius:13px;color:var(--muted)}.bank-master-empty>i{font-size:25px;color:var(--primary)}.bank-master-empty b{color:var(--text);font-size:12px}.bank-master-empty span{font-size:9px}.bank-master-modal{width:min(760px,100%)}.bank-qr-field{display:grid;grid-template-columns:100px 1fr;gap:12px;border:1px solid var(--border);border-radius:11px;padding:11px;background:var(--surface-soft)}.bank-qr-preview{width:100px;height:100px;background:var(--surface);border:1px solid var(--border);border-radius:9px;display:grid;place-items:center;color:var(--muted);font-size:28px;overflow:hidden}.bank-qr-preview img{width:100%;height:100%;object-fit:contain}.bank-qr-field>div:nth-child(2)>b,.bank-qr-field>div:nth-child(2)>span{display:block}.bank-qr-field>div:nth-child(2)>b{font-size:11px}.bank-qr-field>div:nth-child(2)>span{font-size:9px;color:var(--muted);margin:3px 0 8px}.bank-qr-upload{width:max-content}.bank-qr-upload input{display:none}.bank-remove-qr{display:flex!important;align-items:center;gap:6px!important;margin-top:7px;font-size:9px!important}.bank-default-check{display:flex!important;align-items:center;gap:9px!important;border:1px solid var(--primary-border);background:var(--primary-soft-2);border-radius:10px;padding:10px}.bank-default-check input{width:17px;height:17px;flex:0 0 17px}.bank-default-check span b,.bank-default-check span small{display:block}.bank-default-check span b{font-size:10px}.bank-default-check span small{font-size:8px;color:var(--muted);margin-top:2px} /* Rich invoice anatomy shared by all non-thermal templates */ .invoice-copybar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--border);font-size:9px}.invoice-copybar>b{text-align:center;font-size:15px;letter-spacing:.5px}.invoice-copybar>span:last-child{text-align:right;font-weight:700}.invoice-business-block{display:flex;align-items:flex-start;gap:12px;min-width:0}.invoice-business-copy{min-width:0}.invoice-business-copy h1{overflow-wrap:anywhere}.invoice-logo.has-business-logo{background:var(--surface);border:1px solid var(--border);padding:3px}.invoice-party-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(230px,.8fr);border-bottom:1px solid var(--border)}.invoice-party-grid .bill-to{border:0;padding:14px 0}.invoice-document-details{border-left:1px solid var(--border);display:grid;grid-template-columns:1fr 1fr;align-content:start}.invoice-document-details>div{padding:8px 10px;border-bottom:1px solid var(--border);min-width:0}.invoice-document-details>div:nth-last-child(-n+2){border-bottom:0}.invoice-document-details span{display:block;font-size:8px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}.invoice-document-details b{display:block;font-size:10px;margin-top:2px;overflow-wrap:anywhere}.invoice-serial-col{width:34px;text-align:center!important}.invoice-table thead{display:table-header-group}.invoice-table th{text-transform:uppercase;letter-spacing:.25px}.invoice-table td,.invoice-table th{vertical-align:top}.invoice-table td:nth-last-child(-n+4),.invoice-table th:nth-last-child(-n+4){text-align:right}.invoice-tax-summary{margin-top:12px;border:1px solid var(--border)}.tax-summary-title{padding:6px 8px;border-bottom:1px solid var(--border);font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.4px}.invoice-tax-summary table{width:100%;border-collapse:collapse}.invoice-tax-summary th,.invoice-tax-summary td{font-size:8px;padding:6px 7px;border-right:1px solid var(--border);text-align:right}.invoice-tax-summary th:last-child,.invoice-tax-summary td:last-child{border-right:0}.invoice-tax-summary th{background:var(--surface-soft)}.invoice-summary-grid{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:20px;margin-top:16px}.invoice-supporting-content{display:grid;align-content:start;gap:10px}.invoice-right-summary{display:flex;flex-direction:column;gap:12px}.invoice-amount-words,.invoice-terms,.invoice-bank-box,.invoice-signature{border:1px solid var(--border);padding:9px 10px}.invoice-amount-words small,.invoice-terms small,.invoice-bank-details small,.invoice-signature small{display:block;font-size:8px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;font-weight:700}.invoice-amount-words strong{display:block;font-size:10px;margin-top:3px;line-height:1.4}.invoice-terms p{font-size:8.5px;line-height:1.4;margin:4px 0 0}.invoice-bank-box{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px}.invoice-bank-details strong,.invoice-bank-details span{display:block}.invoice-bank-details strong{font-size:10px;margin:3px 0}.invoice-bank-details span{font-size:8.5px;line-height:1.45}.invoice-payment-qr{width:88px;text-align:center}.invoice-payment-qr img{width:78px;height:78px;object-fit:contain;display:block;margin:0 auto 3px}.invoice-payment-qr b{font-size:7.5px}.invoice-signature{text-align:center;min-height:96px;display:flex;flex-direction:column}.invoice-signature div{flex:1}.invoice-signature strong{font-size:9px;border-top:1px solid var(--border);padding-top:5px}.invoice-footer-note{text-align:center;padding-top:10px;margin-top:12px;border-top:1px solid var(--border);font-size:8.5px;color:var(--muted)} /* Modern: strong current-generation accent table */ .template-modern{border-top:7px solid var(--primary);border-radius:5px}.template-modern .invoice-copybar{border-bottom:0;padding-top:3px}.template-modern .invoice-head{border-bottom:0;padding:12px 0 16px}.template-modern .invoice-meta{background:var(--primary-soft);padding:10px 12px;border-radius:10px}.template-modern .invoice-party-grid{border:1px solid var(--border);border-radius:10px;overflow:hidden}.template-modern .bill-to{padding-left:12px}.template-modern .invoice-table thead th{background:var(--primary);color:var(--on-primary)}.template-modern .invoice-table th:first-child,.template-modern .invoice-table th:last-child{border-radius:0}.template-modern .invoice-totals .grand{background:var(--primary);color:var(--on-primary);padding:10px;border-top:0} /* Classic Ledger: sample-inspired black bordered business invoice */ .template-classic{padding:34px}.template-classic .invoice-copybar,.template-classic .invoice-head,.template-classic .invoice-party-grid,.template-classic .invoice-table,.template-classic .invoice-table th,.template-classic .invoice-table td,.template-classic .invoice-tax-summary,.template-classic .invoice-tax-summary th,.template-classic .invoice-tax-summary td,.template-classic .invoice-amount-words,.template-classic .invoice-terms,.template-classic .invoice-bank-box,.template-classic .invoice-signature{border-color:var(--text)}.template-classic .invoice-copybar{border:1px solid var(--text);border-bottom:0;padding:7px}.template-classic .invoice-head{border:1px solid var(--text);padding:12px;border-bottom:0}.template-classic .invoice-party-grid{border:1px solid var(--text)}.template-classic .bill-to{padding-left:9px}.template-classic .invoice-table{border-collapse:collapse;margin-top:0;border:1px solid var(--text)}.template-classic .invoice-table th,.template-classic .invoice-table td{border:1px solid var(--text);padding:7px}.template-classic .invoice-table th{background:var(--surface);color:var(--text)}.template-classic .invoice-summary-grid{gap:0;margin-top:0}.template-classic .invoice-supporting-content>*,.template-classic .invoice-right-summary>*{border-radius:0}.template-classic .invoice-totals{border:1px solid var(--text);width:100%;padding:6px}.template-classic .invoice-totals>div{border-color:var(--text)} /* Minimal: airy, subtle and typography-led */ .template-minimal{padding:54px;box-shadow:none}.template-minimal .invoice-copybar{border:0;padding:0 0 22px}.template-minimal .invoice-copybar>b{font-size:12px;font-weight:600;letter-spacing:2px}.template-minimal .invoice-head{border-bottom:1px solid var(--border);padding-bottom:18px}.template-minimal .invoice-logo{border-radius:0}.template-minimal .invoice-party-grid{border:0;border-bottom:1px solid var(--border)}.template-minimal .invoice-document-details{border-left:0}.template-minimal .invoice-document-details>div{border-bottom:0;padding:6px 8px}.template-minimal .invoice-table th{background:var(--surface);border-bottom:1px solid var(--text);color:var(--text)}.template-minimal .invoice-table td{border-bottom:1px solid var(--border)}.template-minimal .invoice-summary-grid{margin-top:24px}.template-minimal .invoice-amount-words,.template-minimal .invoice-terms,.template-minimal .invoice-bank-box,.template-minimal .invoice-signature{border:0;padding-left:0;padding-right:0} /* Retail Pro: colorful, readable, counter friendly */ .template-retail{border:1px solid var(--accent);padding:36px}.template-retail .invoice-copybar{background:var(--primary-soft-2);padding:8px 10px;border-bottom-color:var(--accent)}.template-retail .invoice-head{border-bottom:2px solid var(--accent);padding:15px 4px}.template-retail .invoice-logo{background:var(--accent);border-radius:50%}.template-retail .invoice-table th{background:var(--accent);color:var(--on-primary)}.template-retail .invoice-table th:first-child,.template-retail .invoice-table th:last-child{border-radius:0}.template-retail .invoice-totals .grand{border-top-color:var(--accent)} /* Professional: corporate blocks with emphasized document meta */ .template-professional{padding:38px}.template-professional .invoice-copybar{border:0}.template-professional .invoice-head{background:var(--surface-soft);padding:14px;border-left:4px solid var(--primary)}.template-professional .invoice-party-grid{margin-top:12px;border:1px solid var(--border)}.template-professional .bill-to{padding-left:12px}.template-professional .invoice-document-details{background:var(--surface-soft)}.template-professional .invoice-table th{background:var(--text);color:var(--on-primary)}.template-professional .invoice-table th:first-child,.template-professional .invoice-table th:last-child{border-radius:0} /* Elegant: restrained editorial look */ .template-elegant{padding:50px}.template-elegant .invoice-copybar>b,.template-elegant .invoice-head h1,.template-elegant .invoice-meta strong,.template-elegant .invoice-totals .grand strong{font-family:Georgia,'Times New Roman',serif}.template-elegant .invoice-copybar{border-bottom:1px solid var(--text)}.template-elegant .invoice-logo{border-radius:0;background:var(--text)}.template-elegant .invoice-head{border-bottom:0;padding:22px 0}.template-elegant .invoice-party-grid{border-top:1px solid var(--text);border-bottom:1px solid var(--text)}.template-elegant .invoice-table th{background:var(--surface);color:var(--text);border-bottom:2px solid var(--text)}.template-elegant .invoice-table td{border-bottom:1px solid var(--border)}.template-elegant .invoice-totals .grand{border-top-color:var(--text)} /* Compact: maximizes rows per A4 */ .template-compact{padding:26px;min-height:1123px}.template-compact .invoice-copybar{padding:4px 0}.template-compact .invoice-copybar>b{font-size:12px}.template-compact .invoice-head{padding-bottom:10px}.template-compact .invoice-head h1{font-size:18px}.template-compact .invoice-logo{width:36px;height:36px}.template-compact .invoice-party-grid .bill-to{padding:8px}.template-compact .invoice-document-details>div{padding:5px 7px}.template-compact .invoice-table{margin-top:8px}.template-compact .invoice-table th,.template-compact .invoice-table td{padding:5px 6px;font-size:8.5px}.template-compact .invoice-tax-summary{margin-top:7px}.template-compact .invoice-summary-grid{margin-top:8px;gap:10px}.template-compact .invoice-amount-words,.template-compact .invoice-terms,.template-compact .invoice-bank-box,.template-compact .invoice-signature{padding:6px 7px}.template-compact .invoice-signature{min-height:70px} /* Corporate: branded masthead */ .template-corporate{padding-top:0;border-top:14px solid var(--primary)}.template-corporate .invoice-copybar{background:var(--text);color:var(--on-primary);margin:0 -44px;padding:8px 44px;border:0}.template-corporate .invoice-head{padding-top:22px;border-bottom:3px solid var(--primary)}.template-corporate .invoice-logo{background:var(--text)}.template-corporate .invoice-table th{background:var(--primary-soft);color:var(--primary-dark);border-bottom:2px solid var(--primary)}.template-corporate .invoice-totals .grand{background:var(--primary-soft);padding:10px;border-top-color:var(--primary)} /* GST Tax Invoice: black grid inspired by the supplied Indian invoice samples */ .template-gst{padding:28px}.template-gst .invoice-copybar{border:2px solid var(--text);padding:6px}.template-gst .invoice-copybar>b{font-size:17px}.template-gst .invoice-head{border:2px solid var(--text);border-top:0;padding:9px}.template-gst .invoice-logo{border-radius:0;background:var(--surface);color:var(--text);border:1px solid var(--text)}.template-gst .invoice-head h1{font-size:20px}.template-gst .invoice-party-grid{border:2px solid var(--text);border-top:0}.template-gst .bill-to{padding:8px}.template-gst .invoice-document-details{border-left:2px solid var(--text)}.template-gst .invoice-document-details>div{border-color:var(--text);padding:5px 7px}.template-gst .invoice-table{border:2px solid var(--text);border-collapse:collapse;margin-top:0;min-height:340px}.template-gst .invoice-table th,.template-gst .invoice-table td{border:1px solid var(--text);padding:6px}.template-gst .invoice-table th{background:var(--surface);color:var(--text);font-weight:800}.template-gst .invoice-table tbody tr:last-child td{height:40px}.template-gst .invoice-tax-summary{border:2px solid var(--text);margin-top:0}.template-gst .invoice-tax-summary th,.template-gst .invoice-tax-summary td,.template-gst .tax-summary-title{border-color:var(--text)}.template-gst .invoice-tax-summary th{background:var(--surface)}.template-gst .invoice-summary-grid{margin-top:0;gap:0}.template-gst .invoice-supporting-content>*,.template-gst .invoice-signature,.template-gst .invoice-totals{border-color:var(--text);border-radius:0}.template-gst .invoice-totals{border:2px solid var(--text);width:100%;padding:6px}.template-gst .invoice-totals>div{border-color:var(--text)}.template-gst .invoice-footer-note{border-color:var(--text);color:var(--text)} /* A5 half-page landscape layout (ISO A5 rotated: 210 × 148 mm) */ .template-a5{width:794px;min-height:559px;padding:24px}.template-a5 .invoice-copybar{padding:4px 0}.template-a5 .invoice-copybar>b{font-size:12px}.template-a5 .invoice-copybar>strong,.template-a5 .invoice-copybar>span{font-size:7px}.template-a5 .invoice-head{padding-bottom:10px;gap:12px}.template-a5 .invoice-logo{width:34px;height:34px}.template-a5 .invoice-head h1{font-size:17px;margin:3px 0}.template-a5 .invoice-head p{font-size:7.5px}.template-a5 .invoice-meta strong{font-size:13px}.template-a5 .invoice-party-grid{grid-template-columns:1.15fr .85fr}.template-a5 .invoice-party-grid .bill-to{padding:8px 0}.template-a5 .bill-to strong,.template-a5 .bill-to span{font-size:8px}.template-a5 .invoice-document-details>div{padding:4px 5px}.template-a5 .invoice-document-details span{font-size:6.5px}.template-a5 .invoice-document-details b{font-size:7.5px}.template-a5 .invoice-table{margin-top:8px}.template-a5 .invoice-table th,.template-a5 .invoice-table td{font-size:7.2px;padding:4px}.template-a5 .invoice-tax-summary{margin-top:6px}.template-a5 .invoice-tax-summary th,.template-a5 .invoice-tax-summary td{font-size:6.5px;padding:4px}.template-a5 .invoice-summary-grid{grid-template-columns:1fr 190px;gap:8px;margin-top:7px}.template-a5 .invoice-amount-words,.template-a5 .invoice-terms,.template-a5 .invoice-bank-box,.template-a5 .invoice-signature{padding:5px 6px}.template-a5 .invoice-payment-qr{width:58px}.template-a5 .invoice-payment-qr img{width:50px;height:50px}.template-a5 .invoice-bank-details span,.template-a5 .invoice-terms p{font-size:6.8px}.template-a5 .invoice-totals>div{font-size:7.5px;padding:4px 0}.template-a5 .invoice-totals .grand{font-size:11px;padding-top:7px}.template-a5 .invoice-signature{min-height:58px}.template-a5 .invoice-footer-note{font-size:7px;margin-top:6px;padding-top:6px} @media(max-width:800px){.bank-master-grid{grid-template-columns:1fr 1fr}.bank-master-summary{grid-template-columns:1fr}.invoice-party-grid{grid-template-columns:1fr}.invoice-document-details{border-left:0;border-top:1px solid var(--border)}.invoice-summary-grid{grid-template-columns:1fr}.invoice-right-summary{width:100%}.invoice-totals{width:100%}} @media(max-width:520px){.bank-master-grid{grid-template-columns:1fr}.bank-qr-field{grid-template-columns:80px 1fr}.bank-qr-preview{width:80px;height:80px}} @media print{ .invoice-sheet{overflow:visible!important} .invoice-table tr{break-inside:avoid;page-break-inside:avoid} .invoice-summary-grid,.invoice-bank-box,.invoice-tax-summary,.invoice-signature{break-inside:avoid;page-break-inside:avoid} body.a5-invoice-page{page:a5-invoice-landscape} body.a5-invoice-page .invoice-sheet{width:210mm!important;min-height:148mm!important;padding:7mm!important;margin:0!important;box-shadow:none!important} body.a5-invoice-page .template-a5{width:210mm!important;min-height:148mm!important} } @page a5-invoice-landscape{size:A5 landscape;margin:0} /* Bank Master linkage inside payment workspaces */ .bank-payment-field{display:grid;gap:5px}.bank-payment-field small{font-size:9px;color:var(--muted);font-weight:500;line-height:1.35}.pos-field.bank-payment-field small{margin-top:1px}.bank-payment-field select{background:var(--surface)} .invoice-preview-mode .template-a5{width:794px;min-height:559px} /* GST Blue Ledger: reference-inspired blue accounting grid */ .template-gstblue{padding:26px;border-top:5px solid var(--primary)}.template-gstblue .invoice-copybar{border:1px solid var(--primary);border-bottom:0;background:var(--primary-soft-2);padding:6px 8px}.template-gstblue .invoice-copybar>b{color:var(--primary-dark);font-size:16px}.template-gstblue .invoice-head{border:1px solid var(--primary);padding:9px}.template-gstblue .invoice-logo{border-radius:0;background:var(--surface);border:1px solid var(--primary);color:var(--primary)}.template-gstblue .invoice-party-grid{border:1px solid var(--primary);border-top:0}.template-gstblue .invoice-document-details{border-left:1px solid var(--primary);background:var(--primary-soft-2)}.template-gstblue .invoice-document-details>div{border-color:var(--primary-border);padding:5px 7px}.template-gstblue .invoice-table{border:1px solid var(--primary);border-collapse:collapse;margin-top:0}.template-gstblue .invoice-table th,.template-gstblue .invoice-table td{border:1px solid var(--primary);padding:5px 6px}.template-gstblue .invoice-table th{background:var(--primary-soft);color:var(--primary-dark)}.template-gstblue .invoice-table tbody{min-height:300px}.template-gstblue .invoice-tax-summary{border:1px solid var(--primary);margin-top:0}.template-gstblue .invoice-tax-summary th,.template-gstblue .invoice-tax-summary td,.template-gstblue .tax-summary-title{border-color:var(--primary)}.template-gstblue .invoice-tax-summary th{background:var(--primary-soft-2)}.template-gstblue .invoice-summary-grid{gap:0;margin-top:0}.template-gstblue .invoice-supporting-content>*,.template-gstblue .invoice-right-summary>*,.template-gstblue .invoice-totals{border-color:var(--primary);border-radius:0}.template-gstblue .invoice-totals{width:100%;padding:6px;border:1px solid var(--primary)}.template-gstblue .invoice-totals>div{border-color:var(--primary-border)}.template-gstblue .invoice-footer-note{border-color:var(--primary);color:var(--text)} /* Tally Tax Invoice: traditional accounting format with strong black rules */ .template-tally{padding:30px;box-shadow:none}.template-tally .invoice-copybar{border:0;border-bottom:1px solid var(--text);padding:4px 0 7px}.template-tally .invoice-copybar>b{font-size:15px}.template-tally .invoice-head{border:1px solid var(--text);border-top:0;padding:10px}.template-tally .invoice-head h1{font-family:Georgia,'Times New Roman',serif}.template-tally .invoice-logo{border-radius:0;background:var(--surface);color:var(--text);border:1px solid var(--text)}.template-tally .invoice-party-grid{border:1px solid var(--text);border-top:0}.template-tally .bill-to{padding:8px 10px}.template-tally .invoice-document-details{border-left:1px solid var(--text);grid-template-columns:1fr 1fr}.template-tally .invoice-document-details>div{border-color:var(--text);padding:5px 6px}.template-tally .invoice-table{border:1px solid var(--text);border-collapse:collapse;margin-top:0}.template-tally .invoice-table th,.template-tally .invoice-table td{border-left:1px solid var(--text);border-right:1px solid var(--text);padding:5px 6px}.template-tally .invoice-table th{background:var(--surface);color:var(--text);border-bottom:1px solid var(--text)}.template-tally .invoice-table tbody tr:last-child td{border-bottom:1px solid var(--text)}.template-tally .invoice-tax-summary{border:1px solid var(--text);margin-top:0}.template-tally .invoice-tax-summary th,.template-tally .invoice-tax-summary td,.template-tally .tax-summary-title{border-color:var(--text)}.template-tally .invoice-tax-summary th{background:var(--surface)}.template-tally .invoice-summary-grid{margin-top:0;gap:0}.template-tally .invoice-amount-words,.template-tally .invoice-bank-box,.template-tally .invoice-terms,.template-tally .invoice-signature,.template-tally .invoice-totals{border:1px solid var(--text);border-radius:0}.template-tally .invoice-totals{width:100%;padding:6px}.template-tally .invoice-totals>div{border-color:var(--text)}.template-tally .invoice-footer-note{color:var(--text);border-color:var(--text)} .invoice-declaration{border:1px solid var(--border);padding:9px 10px}.invoice-declaration small{display:block;font-size:8px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;font-weight:700}.invoice-declaration p{font-size:8.5px;line-height:1.4;margin:4px 0 0}.template-classic .invoice-declaration,.template-gst .invoice-declaration,.template-tally .invoice-declaration{border-color:var(--text);border-radius:0}.template-minimal .invoice-declaration{border:0;padding-left:0;padding-right:0}.template-compact .invoice-declaration{padding:6px 7px}.template-gstblue .invoice-declaration{border-color:var(--primary);border-radius:0}.template-a5 .invoice-declaration{padding:5px 6px}.template-a5 .invoice-declaration p{font-size:6.8px} /* Invoice table overflow protection for configurable content columns */ .invoice-table{width:100%;max-width:100%;table-layout:auto} .invoice-table th,.invoice-table td{min-width:0;white-space:normal;overflow-wrap:anywhere;word-break:normal} .invoice-table .invoice-desc-col{min-width:120px;text-align:left} .invoice-table .invoice-item-description{min-width:0} .invoice-table .invoice-item-description span{min-width:0;overflow-wrap:anywhere;word-break:normal} .invoice-table .invoice-serial-col{width:34px;min-width:28px} .invoice-table .invoice-sku-col{max-width:100px} .invoice-table .invoice-hsn-col{min-width:54px} .invoice-table .invoice-qty-col{min-width:58px} .invoice-table .invoice-rate-col,.invoice-table .invoice-discount-col,.invoice-table .invoice-taxable-col,.invoice-table .invoice-total-col{min-width:66px} .invoice-table .invoice-tax-rate-col{min-width:50px} .template-a5 .invoice-table{table-layout:fixed} .template-a5 .invoice-table .invoice-desc-col{width:auto;min-width:0} .template-a5 .invoice-table .invoice-serial-col{width:22px;min-width:22px} .template-a5 .invoice-table .invoice-sku-col{width:50px;max-width:50px} .template-a5 .invoice-table .invoice-hsn-col{width:39px;min-width:39px} .template-a5 .invoice-table .invoice-qty-col{width:42px;min-width:42px} .template-a5 .invoice-table .invoice-rate-col{width:48px;min-width:48px} .template-a5 .invoice-table .invoice-discount-col{width:48px;min-width:48px} .template-a5 .invoice-table .invoice-taxable-col{width:52px;min-width:52px} .template-a5 .invoice-table .invoice-tax-rate-col{width:38px;min-width:38px} .template-a5 .invoice-table .invoice-total-col{width:54px;min-width:54px} /* -------------------------------------------------------------------------- V27 — Invoice preview fit, distinct invoice families, A5/thermal precision, Bank Master modal polish, sale payment clarity and quotation readability. -------------------------------------------------------------------------- */ .invoice-compact-preview{padding:0!important;background:transparent!important;min-height:0!important;overflow:hidden!important} .invoice-compact-preview .invoice-sheet{margin:0!important;box-shadow:none!important;border-radius:0!important;max-width:none!important} .invoice-compact-preview.template-page-a5 .invoice-sheet{width:794px!important;min-height:559px!important;padding:22px!important} .invoice-compact-preview.template-page-thermal80 .invoice-sheet{width:302px!important;min-height:0!important;padding:18px!important} .invoice-compact-preview.template-page-thermal58 .invoice-sheet{width:219px!important;min-height:0!important;padding:12px!important} /* Minimal — deliberately quiet, editorial and border-light. */ .template-minimal{padding:48px 52px!important;border:0!important;box-shadow:none!important} .template-minimal .invoice-copybar{grid-template-columns:1fr auto 1fr;padding:0 0 18px!important;border-bottom:1px solid var(--border)!important} .template-minimal .invoice-copybar>b{font-size:11px!important;letter-spacing:2.2px;text-transform:uppercase} .template-minimal .invoice-head{align-items:flex-end;padding:20px 0 24px!important;border:0!important} .template-minimal .invoice-logo{width:38px;height:38px;border-radius:50%!important;background:var(--text)!important} .template-minimal .invoice-head h1{font-size:26px;letter-spacing:-.5px;margin:5px 0 2px} .template-minimal .invoice-meta span{color:var(--muted);letter-spacing:1.6px}.template-minimal .invoice-meta strong{font-size:20px} .template-minimal .invoice-party-grid{border:0!important;border-top:1px solid var(--border)!important;border-bottom:1px solid var(--border)!important;padding:10px 0} .template-minimal .invoice-document-details{border:0!important;gap:4px}.template-minimal .invoice-document-details>div{padding:5px 8px!important;border:0!important} .template-minimal .invoice-table{margin-top:22px}.template-minimal .invoice-table th{padding:9px 7px;background:transparent!important;color:var(--muted)!important;border-bottom:1px solid var(--text)!important;font-size:8.5px;letter-spacing:.55px}.template-minimal .invoice-table td{padding:10px 7px;border-bottom:1px solid var(--border)!important} .template-minimal .invoice-tax-summary{border-left:0;border-right:0}.template-minimal .invoice-summary-grid{margin-top:28px!important;gap:34px!important}.template-minimal .invoice-totals .grand{border-top:1px solid var(--text)!important}.template-minimal .invoice-signature{border-top:1px solid var(--border)!important} /* Elegant — serif document with framed information and fine double rules. */ .template-elegant{padding:44px 48px!important;border:1px solid var(--border-strong);box-shadow:0 16px 42px rgba(15,23,42,.08)!important} .template-elegant .invoice-copybar{padding:8px 0 12px!important;border-top:3px double var(--text);border-bottom:1px solid var(--text)!important}.template-elegant .invoice-copybar>b{font-size:16px!important;letter-spacing:.8px} .template-elegant .invoice-head{padding:22px 0!important;align-items:center}.template-elegant .invoice-logo{width:46px;height:46px;background:transparent!important;color:var(--text)!important;border:1px solid var(--text)}.template-elegant .invoice-head h1{font-size:25px!important}.template-elegant .invoice-meta strong{font-size:19px} .template-elegant .invoice-party-grid{border:1px solid var(--text)!important}.template-elegant .bill-to{padding:12px!important}.template-elegant .invoice-document-details{border-left:1px solid var(--text)!important}.template-elegant .invoice-document-details>div{border-color:var(--border-strong)!important} .template-elegant .invoice-table{margin-top:14px;border-collapse:collapse;border-top:2px solid var(--text);border-bottom:2px solid var(--text)}.template-elegant .invoice-table th{font-family:Georgia,'Times New Roman',serif;background:transparent!important;color:var(--text)!important;border-bottom:1px solid var(--text)!important}.template-elegant .invoice-table td{border-bottom:1px solid var(--border)!important}.template-elegant .invoice-summary-grid{gap:26px}.template-elegant .invoice-amount-words,.template-elegant .invoice-terms,.template-elegant .invoice-bank-box,.template-elegant .invoice-signature{border-color:var(--border-strong)}.template-elegant .invoice-footer-note{border-top:3px double var(--text)} /* Corporate — strong masthead and clearly segmented business document. */ .template-corporate{padding:0 40px 40px!important;border-top:10px solid var(--primary)!important;overflow:hidden} .template-corporate .invoice-copybar{margin:0 -40px!important;padding:10px 40px!important;background:var(--text)!important;color:var(--on-primary)!important;border:0!important}.template-corporate .invoice-copybar>b{font-size:16px;letter-spacing:.9px} .template-corporate .invoice-head{margin:0 -40px;padding:20px 40px!important;background:var(--surface-soft);border-bottom:3px solid var(--primary)!important}.template-corporate .invoice-logo{width:50px;height:50px;border-radius:10px;background:var(--primary)!important}.template-corporate .invoice-head h1{font-size:24px}.template-corporate .invoice-meta span{color:var(--primary)} .template-corporate .invoice-party-grid{margin-top:16px;border:1px solid var(--border);border-left:4px solid var(--primary)}.template-corporate .bill-to{padding:12px}.template-corporate .invoice-document-details{background:var(--surface-soft)} .template-corporate .invoice-table{margin-top:16px;border:1px solid var(--border);border-collapse:collapse}.template-corporate .invoice-table th{background:var(--text)!important;color:var(--on-primary)!important;border-bottom:0!important}.template-corporate .invoice-table td{border-bottom:1px solid var(--border)} .template-corporate .invoice-tax-summary{border-color:var(--border-strong)}.template-corporate .tax-summary-title{background:var(--surface-soft)}.template-corporate .invoice-totals{padding:8px 10px;background:var(--surface-soft);border:1px solid var(--border)}.template-corporate .invoice-totals .grand{margin:6px -10px -8px;padding:12px 10px!important;background:var(--primary)!important;color:var(--on-primary)!important;border:0!important}.template-corporate .invoice-signature{border-top:3px solid var(--primary)} /* A5 — true half-A4 landscape layout, compact but readable without collisions. */ .template-a5{box-sizing:border-box!important;width:794px!important;min-height:559px!important;padding:20px 22px!important;border:1px solid var(--border-strong);box-shadow:0 10px 30px rgba(15,23,42,.09)!important;overflow:visible} .template-a5 .invoice-copybar{padding:5px 0 7px!important;border-bottom:1px solid var(--text)!important}.template-a5 .invoice-copybar>b{font-size:11px!important;letter-spacing:.6px}.template-a5 .invoice-copybar>strong,.template-a5 .invoice-copybar>span{font-size:6.7px!important} .template-a5 .invoice-head{padding:10px 0!important;gap:9px!important;border-bottom:2px solid var(--primary)!important}.template-a5 .invoice-business-block{gap:8px}.template-a5 .invoice-logo{width:32px!important;height:32px!important;border-radius:8px}.template-a5 .invoice-head h1{font-size:16px!important;margin:2px 0!important}.template-a5 .invoice-head p{font-size:7px!important;line-height:1.35}.template-a5 .invoice-meta{gap:1px}.template-a5 .invoice-meta span{font-size:6.5px}.template-a5 .invoice-meta strong{font-size:12.5px!important;margin:2px 0}.template-a5 .invoice-meta small{font-size:6.8px} .template-a5 .invoice-party-grid{grid-template-columns:1.08fr .92fr!important;border:1px solid var(--border);border-top:0}.template-a5 .invoice-party-grid .bill-to{padding:7px 8px!important}.template-a5 .bill-to small{font-size:6.4px}.template-a5 .bill-to strong{font-size:8.5px!important}.template-a5 .bill-to span{font-size:7px!important;line-height:1.35}.template-a5 .invoice-document-details{border-left:1px solid var(--border)!important;grid-template-columns:1fr 1fr}.template-a5 .invoice-document-details>div{padding:4px 5px!important}.template-a5 .invoice-document-details span{font-size:5.8px!important}.template-a5 .invoice-document-details b{font-size:6.9px!important;margin-top:1px} .template-a5 .invoice-table{table-layout:fixed!important;width:100%!important;margin-top:8px!important;border-collapse:collapse;border:1px solid var(--border-strong)}.template-a5 .invoice-table th,.template-a5 .invoice-table td{font-size:6.6px!important;line-height:1.24;padding:4px 3px!important;border-bottom:1px solid var(--border)!important;overflow-wrap:anywhere!important}.template-a5 .invoice-table th{background:var(--surface-soft);font-size:5.9px!important;letter-spacing:.12px}.template-a5 .invoice-table .invoice-desc-col{width:auto!important;min-width:0!important}.template-a5 .invoice-table .invoice-serial-col{width:19px!important;min-width:19px!important}.template-a5 .invoice-table .invoice-sku-col{width:45px!important;min-width:0!important}.template-a5 .invoice-table .invoice-hsn-col{width:34px!important;min-width:0!important}.template-a5 .invoice-table .invoice-qty-col{width:38px!important;min-width:0!important}.template-a5 .invoice-table .invoice-rate-col{width:43px!important;min-width:0!important}.template-a5 .invoice-table .invoice-discount-col{width:43px!important;min-width:0!important}.template-a5 .invoice-table .invoice-taxable-col{width:47px!important;min-width:0!important}.template-a5 .invoice-table .invoice-tax-rate-col{width:31px!important;min-width:0!important}.template-a5 .invoice-table .invoice-total-col{width:49px!important;min-width:0!important}.template-a5 .invoice-item-description{gap:3px}.template-a5 .invoice-product-image{width:20px;height:20px} .template-a5 .invoice-tax-summary{margin-top:6px!important}.template-a5 .tax-summary-title{font-size:6.3px;padding:4px 5px}.template-a5 .invoice-tax-summary th,.template-a5 .invoice-tax-summary td{font-size:5.9px!important;padding:3px 4px!important} .template-a5 .invoice-summary-grid{grid-template-columns:minmax(0,1fr) 178px!important;gap:8px!important;margin-top:7px!important}.template-a5 .invoice-supporting-content{gap:5px}.template-a5 .invoice-amount-words,.template-a5 .invoice-terms,.template-a5 .invoice-declaration,.template-a5 .invoice-bank-box,.template-a5 .invoice-signature{padding:5px 6px!important}.template-a5 .invoice-amount-words small,.template-a5 .invoice-terms small,.template-a5 .invoice-bank-details small,.template-a5 .invoice-signature small,.template-a5 .invoice-declaration small{font-size:5.8px}.template-a5 .invoice-amount-words strong{font-size:6.8px}.template-a5 .invoice-bank-box{grid-template-columns:minmax(0,1fr) 48px!important;gap:5px}.template-a5 .invoice-payment-qr{width:44px!important}.template-a5 .invoice-payment-qr img{width:42px!important;height:42px!important}.template-a5 .invoice-payment-qr b{font-size:5.5px}.template-a5 .invoice-bank-details strong{font-size:7px}.template-a5 .invoice-bank-details span,.template-a5 .invoice-terms p,.template-a5 .invoice-declaration p{font-size:6px!important;line-height:1.3}.template-a5 .invoice-totals>div{font-size:6.9px!important;padding:3px 0!important}.template-a5 .invoice-totals .grand{font-size:9.5px!important;padding-top:6px!important}.template-a5 .invoice-totals .grand strong{font-size:11px}.template-a5 .invoice-signature{min-height:52px!important}.template-a5 .invoice-signature strong{font-size:6.2px}.template-a5 .invoice-footer-note{font-size:6px!important;margin-top:5px!important;padding-top:5px!important} /* Keep A4 compact previews in desktop invoice geometry even though the iframe is 794px wide. */ .invoice-compact-preview:not(.a5-invoice-page):not(.thermal-invoice-page) .invoice-party-grid{grid-template-columns:minmax(0,1.4fr) minmax(230px,.8fr)!important} .invoice-compact-preview:not(.a5-invoice-page):not(.thermal-invoice-page) .invoice-document-details{border-left:1px solid var(--border)!important;border-top:0!important} .invoice-compact-preview:not(.a5-invoice-page):not(.thermal-invoice-page) .invoice-summary-grid{grid-template-columns:minmax(0,1fr) 270px!important} /* Thermal — intentionally monochrome, narrow and printer-safe. */ .thermal-invoice-page{background:#ececec!important}.thermal-invoice-page .invoice-sheet{min-height:auto!important;background:#fff!important;color:#000!important;box-shadow:none!important;border-radius:0!important;font-family:Arial,Helvetica,sans-serif!important;overflow:hidden!important}.thermal-invoice-page .invoice-sheet *{color:#000!important;border-color:#000!important}.thermal-invoice-page .invoice-logo{background:#000!important;color:#fff!important;border:1px solid #000!important}.thermal-invoice-page .invoice-logo *{color:#fff!important}.thermal-invoice-page .invoice-copybar{display:block;text-align:center;border-bottom:1px dashed #000!important;padding:3px 0!important}.thermal-invoice-page .invoice-copybar>b{font-size:10px!important}.thermal-invoice-page .invoice-head{display:block!important;text-align:center!important;padding:7px 0!important;border-bottom:1px dashed #000!important}.thermal-invoice-page .invoice-business-block{display:block!important}.thermal-invoice-page .invoice-logo{margin:0 auto 5px!important}.thermal-invoice-page .invoice-head h1{font-size:13px!important;margin:3px 0!important}.thermal-invoice-page .invoice-head p{font-size:7px!important;line-height:1.3}.thermal-invoice-page .invoice-meta{align-items:center!important;text-align:center!important;margin-top:6px!important;gap:1px!important}.thermal-invoice-page .invoice-meta span{font-size:6.5px!important}.thermal-invoice-page .invoice-meta strong{font-size:10px!important;margin:1px 0!important}.thermal-invoice-page .invoice-meta small{font-size:6.5px!important}.thermal-invoice-page .invoice-party-grid{display:block!important;border:0!important;border-bottom:1px dashed #000!important}.thermal-invoice-page .bill-to{display:block!important;padding:6px 0!important;border:0!important}.thermal-invoice-page .bill-to small{font-size:6px!important}.thermal-invoice-page .bill-to strong,.thermal-invoice-page .bill-to span{font-size:7px!important;line-height:1.3}.thermal-invoice-page .invoice-document-details{border:0!important;border-top:1px dashed #000!important;display:grid!important;grid-template-columns:1fr 1fr!important}.thermal-invoice-page .invoice-document-details>div{padding:3px 2px!important;border:0!important}.thermal-invoice-page .invoice-document-details span{font-size:5.5px!important}.thermal-invoice-page .invoice-document-details b{font-size:6.5px!important}.thermal-invoice-page .invoice-table{table-layout:fixed!important;width:100%!important;min-width:0!important;margin-top:7px!important;border-collapse:collapse!important}.thermal-invoice-page .invoice-table th,.thermal-invoice-page .invoice-table td{font-size:6.5px!important;line-height:1.2!important;padding:3px 1px!important;white-space:normal!important;overflow-wrap:anywhere!important;background:#fff!important;border-bottom:1px dashed #777!important}.thermal-invoice-page .invoice-table th{font-size:5.8px!important;text-transform:uppercase!important}.thermal-invoice-page .invoice-table .invoice-desc-col{width:46%!important;min-width:0!important;text-align:left!important}.thermal-invoice-page .invoice-table .invoice-qty-col{width:16%!important;min-width:0!important;text-align:center!important}.thermal-invoice-page .invoice-table .invoice-rate-col{width:18%!important;min-width:0!important;text-align:right!important}.thermal-invoice-page .invoice-table .invoice-total-col{width:20%!important;min-width:0!important;text-align:right!important}.thermal-invoice-page .invoice-summary-grid{display:block!important;margin-top:7px!important}.thermal-invoice-page .invoice-supporting-content{display:none!important}.thermal-invoice-page .invoice-right-summary{display:block!important}.thermal-invoice-page .invoice-totals{width:100%!important}.thermal-invoice-page .invoice-totals>div{font-size:7px!important;padding:3px 0!important;border-bottom:1px dotted #999!important}.thermal-invoice-page .invoice-totals .grand{font-size:10px!important;border-top:1px solid #000!important;margin-top:3px!important;padding-top:5px!important}.thermal-invoice-page .invoice-totals .grand strong{font-size:11px!important}.thermal-invoice-page .invoice-footer-note{font-size:6px!important;margin-top:7px!important;padding-top:5px!important;border-top:1px dashed #000!important}.thermal-invoice-page .invoice-business-logo-image{filter:grayscale(1) contrast(1.15)!important}.thermal-invoice-page.template-page-thermal80 .invoice-sheet{width:80mm!important;max-width:80mm!important;padding:5mm!important}.thermal-invoice-page.template-page-thermal58 .invoice-sheet{width:58mm!important;max-width:58mm!important;padding:3mm!important} @media print{ body.a5-invoice-page .template-a5.invoice-sheet{box-sizing:border-box!important;width:148mm!important;min-height:210mm!important;padding:6mm!important;overflow:visible!important;border:0!important;box-shadow:none!important} .thermal-invoice-page{background:#fff!important}.thermal-invoice-page .invoice-sheet *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important} } /* Bank Master modal — clearer hierarchy and switch controls. */ .bank-master-modal{width:min(780px,100%)!important;padding:24px!important}.bank-master-modal .modal-head{padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid var(--border)}.bank-master-modal .form-grid{gap:12px 14px}.bank-master-modal .form-grid>label{font-size:11px!important;gap:6px!important}.bank-master-modal input,.bank-master-modal select,.bank-master-modal .smart-select-button{min-height:42px;font-size:11px}.bank-qr-field{padding:13px!important;grid-template-columns:92px minmax(0,1fr)!important;align-items:center}.bank-qr-preview{width:92px!important;height:92px!important}.bank-toggle-line{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:14px!important;border:1px solid var(--border)!important;border-radius:11px!important;background:var(--surface-soft)!important;padding:11px 12px!important}.bank-toggle-line>span:first-child{min-width:0}.bank-toggle-line b{display:block;font-size:10.5px}.bank-toggle-line small{display:block;margin-top:3px;font-size:8.5px;color:var(--muted);line-height:1.4}.bank-default-check{border-color:var(--primary-border)!important;background:var(--primary-soft-2)!important}.bank-remove-qr{margin-top:8px!important;max-width:330px}.bank-master-modal .form-actions{border-top:1px solid var(--border);padding-top:15px!important;margin-top:2px} /* Create Sale — payment-at-creation is optional and self-explanatory. */ .pos-sale-page .pos-form-grid{gap:12px!important}.pos-sale-page .pos-form-grid>label{font-size:11.5px!important;gap:6px!important}.sale-payment-box{border:1px solid var(--border);border-radius:13px;background:var(--surface-soft);padding:13px;margin-top:1px}.sale-payment-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding-bottom:11px;margin-bottom:11px;border-bottom:1px solid var(--border)}.sale-payment-head>div>b{display:block;font-size:12.5px;color:var(--text-strong);margin:2px 0 3px}.sale-payment-head>div>small{display:block;font-size:9px;line-height:1.5;color:var(--muted);max-width:720px}.sale-payment-status{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;border-radius:999px;padding:6px 9px;font-size:9px;font-weight:800;border:1px solid var(--border);background:var(--surface)}.sale-payment-status.pending{color:var(--muted)}.sale-payment-status.partial{color:var(--warning);border-color:color-mix(in srgb,var(--warning) 30%,var(--border));background:color-mix(in srgb,var(--warning) 7%,var(--surface))}.sale-payment-status.paid{color:var(--success);border-color:color-mix(in srgb,var(--success) 30%,var(--border));background:color-mix(in srgb,var(--success) 7%,var(--surface))}.sale-payment-grid{display:grid;grid-template-columns:minmax(210px,1.05fr) minmax(210px,1fr) minmax(165px,.72fr) minmax(180px,.78fr);gap:11px;align-items:start}.sale-payment-grid>label{display:grid;gap:6px;font-size:11px;font-weight:750;color:var(--text);margin:0!important}.sale-payment-grid>label>small{font-size:8.5px;line-height:1.4;color:var(--muted);font-weight:500}.sale-payment-grid .method-control{margin:0!important}.sale-payment-grid .smart-select-button,.sale-payment-grid input,.sale-payment-grid select{min-height:42px;font-size:11px}.pos-sale-options .pos-credit-note{font-size:10px}.pos-sale-summary .pos-summary-row{font-size:11.5px}.pos-sale-summary .pos-summary-total{font-size:14px}.pos-sale-summary #creditHintSummary{font-size:10px} @media(max-width:900px){.sale-payment-grid{grid-template-columns:1fr 1fr}.sale-payment-grid>label:last-child{grid-column:auto}.sale-payment-head{flex-direction:column}.sale-payment-status{align-self:flex-start}} @media(max-width:620px){.sale-payment-grid{grid-template-columns:1fr}.sale-payment-grid>label:last-child{grid-column:auto}.sale-payment-box{padding:11px}} /* Quotation creation — stronger readable typography without making the workspace bulky. */ .quotation-page .quotation-header .panel-head h2,.quotation-page .quotation-items .panel-head h3,.quotation-page .quotation-options .panel-head h3{font-size:18px}.quotation-page .quotation-header .panel-head p,.quotation-page .quotation-items .panel-head p,.quotation-page .quotation-options .panel-head p{font-size:10.5px;line-height:1.5}.quotation-page .quotation-fields label,.quotation-page .quotation-options>label,.quotation-page .quotation-summary label{font-size:11.5px;font-weight:750}.quotation-page .quotation-fields input,.quotation-page .quotation-fields select,.quotation-page .quotation-fields .smart-select-button{font-size:11.5px;min-height:42px}.quotation-page .pos-search-box input{font-size:11.5px}.quotation-page .pos-sale-table th{font-size:9.5px;padding:11px 10px}.quotation-page .pos-sale-table td{font-size:11px;padding:11px 10px}.quotation-page .pos-product-cell b{font-size:11.5px}.quotation-page .pos-product-cell small{font-size:9px}.quotation-page .quotation-summary .pos-summary-row{font-size:11.5px}.quotation-page .quotation-summary .pos-summary-total span{font-size:13px}.quotation-page .quotation-summary .pos-summary-total strong{font-size:19px}.quotation-page .quotation-actions>*{min-height:42px;font-size:11px} .bank-remove-qr[hidden]{display:none!important} /* ========================================================================== 16 Sep 2026 — Bank QR polish, paper-safe invoice preview and A5 print layout ========================================================================== */ /* Bank Master dialog: clearer sections and a reliable UPI QR workspace. */ .bank-master-modal{width:min(820px,100%)!important;padding:0!important;overflow:hidden!important} .bank-master-modal .bank-modal-head{margin:0!important;padding:22px 24px 17px!important;border-bottom:1px solid var(--border);background:var(--surface)} .bank-master-modal .bank-modal-head h2{font-size:20px!important;margin:4px 0 5px!important}.bank-master-modal .bank-modal-head p{font-size:10.5px!important;line-height:1.5;max-width:620px} .bank-master-form{display:grid!important;grid-template-columns:1fr!important;gap:12px!important;padding:16px 24px 22px!important;overflow:auto;max-height:calc(100vh - 145px)} .bank-form-section{border:1px solid var(--border);border-radius:13px;background:var(--surface-soft);padding:13px} .bank-form-section-head{display:flex;align-items:center;gap:10px;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--border)} .bank-section-icon{width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;border-radius:9px;background:var(--primary-soft);border:1px solid var(--primary-border);color:var(--primary)} .bank-form-section-head b{display:block;font-size:11.5px;color:var(--text-strong)}.bank-form-section-head small{display:block;font-size:8.8px;color:var(--muted);line-height:1.45;margin-top:2px} .bank-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px 13px}.bank-form-grid>label,.bank-upi-id-field{display:grid;gap:6px;font-size:10.8px;font-weight:750;color:var(--text)} .bank-form-grid input,.bank-form-grid select,.bank-upi-id-field input{min-height:42px!important;font-size:11px!important;background:var(--surface)!important} .bank-upi-id-field{margin-bottom:11px} .bank-qr-card{display:grid;grid-template-columns:118px minmax(0,1fr);gap:14px;align-items:stretch;border:1px solid var(--border);border-radius:12px;background:var(--surface);padding:12px} .bank-qr-preview{width:118px!important;height:118px!important;border-radius:11px!important;border:1px solid var(--border-strong)!important;background:var(--surface-soft)!important;box-shadow:inset 0 0 0 4px var(--surface);overflow:hidden!important} .bank-qr-preview img{width:100%!important;height:100%!important;object-fit:contain!important;padding:7px;background:#fff} .bank-qr-empty{height:100%;display:grid;place-content:center;justify-items:center;gap:7px;color:var(--muted)}.bank-qr-empty i{font-size:31px;color:var(--border-strong)}.bank-qr-empty small{font-size:8px;font-weight:700} .bank-qr-content{min-width:0;display:flex;flex-direction:column;justify-content:center;gap:10px}.bank-qr-copy b{display:block;font-size:11.5px;color:var(--text-strong)}.bank-qr-copy span{display:block;margin-top:3px;font-size:8.8px;line-height:1.45;color:var(--muted)} .bank-qr-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.bank-qr-upload{cursor:pointer;white-space:nowrap}.bank-qr-upload input{display:none}.bank-qr-file-name{min-width:0;max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:8.8px;color:var(--muted)} .bank-master-modal .bank-toggle-line{min-height:54px!important}.bank-master-modal .bank-remove-qr{margin:0!important;max-width:none!important;background:var(--surface-soft)!important}.bank-master-modal .bank-default-check{margin:0!important;background:var(--primary-soft-2)!important} .bank-modal-actions{position:sticky;bottom:-22px;z-index:3;margin:0 -24px -22px!important;padding:14px 24px 0!important;background:var(--surface);border-top:1px solid var(--border);justify-content:flex-end!important}.bank-modal-actions>*{min-width:132px} @media(max-width:700px){.bank-master-modal{height:min(94vh,820px)}.bank-master-form{padding:14px 16px 18px!important;max-height:calc(94vh - 116px)}.bank-master-modal .bank-modal-head{padding:18px 16px 14px!important}.bank-form-grid{grid-template-columns:1fr}.bank-qr-card{grid-template-columns:96px minmax(0,1fr)}.bank-qr-preview{width:96px!important;height:96px!important}.bank-modal-actions{margin:0 -16px -18px!important;padding:13px 16px 0!important}} @media(max-width:470px){.bank-qr-card{grid-template-columns:1fr}.bank-qr-preview{width:132px!important;height:132px!important;margin:0 auto}.bank-qr-content{text-align:center}.bank-qr-actions{justify-content:center}.bank-qr-file-name{width:100%;max-width:none}.bank-modal-actions{display:grid!important;grid-template-columns:1fr 1fr}.bank-modal-actions>*{min-width:0;width:100%}} /* Compact designer preview: paper viewport is reset per template by JS. These rules keep A4/A5 documents from inheriting the previous thermal viewport. */ .invoice-compact-preview:not(.thermal-invoice-page){padding:0!important;background:#fff!important} .invoice-compact-preview:not(.thermal-invoice-page) .invoice-sheet{margin:0!important;max-width:none!important;box-shadow:none!important;border-radius:0!important} .invoice-compact-preview:not(.thermal-invoice-page):not(.a5-invoice-page) .invoice-sheet{box-sizing:border-box!important;width:794px!important;min-width:794px!important;min-height:1123px!important} .invoice-compact-preview.a5-invoice-page .template-a5.invoice-sheet{box-sizing:border-box!important;width:794px!important;min-width:794px!important;max-width:794px!important;height:559px!important;min-height:559px!important;max-height:559px!important} /* A5 Invoice — true ISO A5 landscape (210 × 148 mm), exactly half the area of A4, based on the compact bordered business-invoice structure from the supplied reference. */ .a5-invoice-page:not(.thermal-invoice-page) .template-a5.invoice-sheet{box-sizing:border-box!important;width:794px!important;min-width:794px!important;max-width:794px!important;min-height:559px!important;padding:18px!important;background:#fff!important;border:0!important;border-radius:2px!important;overflow:visible!important} .template-a5 .invoice-copybar{display:grid!important;grid-template-columns:1fr auto 1fr!important;align-items:center!important;min-height:31px;padding:5px 7px!important;border:1px solid var(--text)!important;background:#fff!important} .template-a5 .invoice-copybar>strong,.template-a5 .invoice-copybar>span{font-size:7px!important;font-weight:800!important;color:var(--text)!important}.template-a5 .invoice-copybar>b{font-size:12.5px!important;line-height:1.1;letter-spacing:.35px!important;color:var(--text)!important}.template-a5 .invoice-copybar>span:last-child{text-align:right!important} .template-a5 .invoice-head{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;margin:0!important;padding:9px 8px!important;border:1px solid var(--text)!important;border-top:0!important;background:#fff!important} .template-a5 .invoice-business-block{align-items:center!important;gap:8px!important}.template-a5 .invoice-logo{width:38px!important;height:38px!important;flex:0 0 38px;border-radius:5px!important}.template-a5 .invoice-head h1{font-size:17px!important;line-height:1.1!important;margin:1px 0 3px!important}.template-a5 .invoice-head p{font-size:7.4px!important;line-height:1.35!important;color:var(--text)!important}.template-a5 .invoice-meta{gap:1px!important}.template-a5 .invoice-meta span{font-size:6.8px!important;letter-spacing:.55px!important}.template-a5 .invoice-meta strong{font-size:13px!important;line-height:1.1!important;margin:2px 0!important}.template-a5 .invoice-meta small{font-size:7px!important;color:var(--text)!important} .template-a5 .invoice-party-grid{display:grid!important;grid-template-columns:1.12fr .88fr!important;margin:0!important;border:1px solid var(--text)!important;border-top:0!important;background:#fff!important}.template-a5 .invoice-party-grid .bill-to{display:block!important;padding:8px!important;border:0!important}.template-a5 .bill-to small{font-size:6.6px!important;color:var(--muted)!important}.template-a5 .bill-to strong{font-size:8.6px!important;margin-top:4px!important}.template-a5 .bill-to span{font-size:7px!important;line-height:1.38!important;margin-top:2px!important}.template-a5 .invoice-document-details{display:grid!important;grid-template-columns:1fr 1fr!important;border-left:1px solid var(--text)!important;border-top:0!important}.template-a5 .invoice-document-details>div{min-width:0;padding:4px 5px!important;border-bottom:1px solid var(--border-strong)!important}.template-a5 .invoice-document-details>div:nth-last-child(-n+2){border-bottom:0!important}.template-a5 .invoice-document-details span{font-size:5.8px!important;letter-spacing:.2px!important}.template-a5 .invoice-document-details b{font-size:7px!important;line-height:1.25!important;margin-top:1px!important} .template-a5 .invoice-table{table-layout:fixed!important;width:100%!important;margin:0!important;border:1px solid var(--text)!important;border-top:0!important;border-collapse:collapse!important}.template-a5 .invoice-table th,.template-a5 .invoice-table td{font-size:6.7px!important;line-height:1.28!important;padding:4px 3px!important;border:1px solid var(--border-strong)!important;vertical-align:top!important;overflow-wrap:anywhere!important;word-break:normal!important}.template-a5 .invoice-table th{font-size:6px!important;font-weight:850!important;background:var(--surface-soft)!important;color:var(--text)!important;text-align:center!important}.template-a5 .invoice-table .invoice-serial-col{width:22px!important;min-width:22px!important}.template-a5 .invoice-table .invoice-desc-col{width:auto!important;min-width:0!important;text-align:left!important}.template-a5 .invoice-table .invoice-sku-col{width:52px!important}.template-a5 .invoice-table .invoice-hsn-col{width:40px!important}.template-a5 .invoice-table .invoice-qty-col{width:43px!important}.template-a5 .invoice-table .invoice-rate-col{width:48px!important}.template-a5 .invoice-table .invoice-discount-col{width:45px!important}.template-a5 .invoice-table .invoice-taxable-col{width:53px!important}.template-a5 .invoice-table .invoice-tax-rate-col{width:35px!important}.template-a5 .invoice-table .invoice-total-col{width:55px!important}.template-a5 .invoice-item-description{gap:3px!important}.template-a5 .invoice-product-image{width:22px!important;height:22px!important;flex:0 0 22px} .template-a5 .invoice-tax-summary{margin:0!important;border:1px solid var(--text)!important;border-top:0!important}.template-a5 .tax-summary-title{padding:4px 6px!important;font-size:6.4px!important;border-color:var(--text)!important;background:#fff!important}.template-a5 .invoice-tax-summary th,.template-a5 .invoice-tax-summary td{font-size:6.1px!important;padding:4px!important;border-color:var(--border-strong)!important}.template-a5 .invoice-tax-summary th{background:var(--surface-soft)!important} .template-a5 .invoice-summary-grid{display:grid!important;grid-template-columns:minmax(0,1fr) 178px!important;gap:0!important;margin:0!important;border:1px solid var(--text)!important;border-top:0!important}.template-a5 .invoice-supporting-content{display:grid!important;align-content:start!important;gap:0!important;border-right:1px solid var(--text)!important}.template-a5 .invoice-supporting-content>*{border:0!important;border-bottom:1px solid var(--border-strong)!important;border-radius:0!important;margin:0!important}.template-a5 .invoice-supporting-content>*:last-child{border-bottom:0!important}.template-a5 .invoice-amount-words,.template-a5 .invoice-terms,.template-a5 .invoice-declaration,.template-a5 .invoice-bank-box{padding:6px 7px!important}.template-a5 .invoice-amount-words small,.template-a5 .invoice-terms small,.template-a5 .invoice-declaration small,.template-a5 .invoice-bank-details small{font-size:6px!important;color:var(--text)!important}.template-a5 .invoice-amount-words strong{font-size:7.2px!important;line-height:1.35!important}.template-a5 .invoice-bank-box{grid-template-columns:minmax(0,1fr) 58px!important;gap:6px!important}.template-a5 .invoice-bank-details strong{font-size:7.4px!important;margin:2px 0!important}.template-a5 .invoice-bank-details span,.template-a5 .invoice-terms p,.template-a5 .invoice-declaration p{font-size:6.5px!important;line-height:1.35!important}.template-a5 .invoice-payment-qr{width:54px!important}.template-a5 .invoice-payment-qr img{width:52px!important;height:52px!important}.template-a5 .invoice-payment-qr b{font-size:5.8px!important} .template-a5 .invoice-right-summary{display:flex!important;flex-direction:column!important;gap:0!important}.template-a5 .invoice-totals{width:100%!important;padding:5px 7px!important}.template-a5 .invoice-totals>div{font-size:7.2px!important;padding:4px 0!important}.template-a5 .invoice-totals .grand{font-size:10px!important;margin-top:2px!important;padding-top:7px!important}.template-a5 .invoice-totals .grand strong{font-size:11.5px!important}.template-a5 .invoice-signature{flex:1;min-height:65px!important;margin:0 7px 7px!important;padding:6px!important;border:1px solid var(--border-strong)!important}.template-a5 .invoice-signature small{font-size:5.8px!important}.template-a5 .invoice-signature strong{font-size:6.5px!important}.template-a5 .invoice-footer-note{margin:6px 0 0!important;padding:5px 0 0!important;font-size:6.5px!important;border-top:1px solid var(--border)!important} @media print{body.a5-invoice-page{page:a5-invoice-landscape!important;padding:0!important;background:#fff!important}body.a5-invoice-page .template-a5.invoice-sheet{box-sizing:border-box!important;width:210mm!important;min-width:210mm!important;max-width:210mm!important;min-height:148mm!important;padding:5mm!important;margin:0!important;box-shadow:none!important;border-radius:0!important}} @page a5-invoice-landscape{size:210mm 148mm;margin:0} /* Print preview toolbar — screen-only controls for template switching/printing. */ .invoice-print-toolbar{position:sticky;top:10px;z-index:50;width:min(1080px,calc(100% - 24px));margin:0 auto 16px;display:grid;grid-template-columns:minmax(220px,1fr) minmax(220px,320px) auto;align-items:center;gap:12px;padding:11px 12px;border:1px solid var(--border);border-radius:14px;background:color-mix(in srgb,var(--surface) 95%,transparent);box-shadow:0 12px 34px rgba(15,23,42,.14);backdrop-filter:blur(12px)} .invoice-print-toolbar-brand{display:flex;align-items:center;gap:10px;min-width:0}.invoice-print-toolbar-icon{width:38px;height:38px;flex:0 0 38px;display:grid;place-items:center;border-radius:10px;background:var(--primary);color:var(--on-primary)}.invoice-print-toolbar-brand b{display:block;font-size:12px;color:var(--text-strong)}.invoice-print-toolbar-brand small{display:block;margin-top:2px;font-size:9px;color:var(--muted)} .invoice-template-picker{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px;font-size:9px;font-weight:800;color:var(--muted)}.invoice-template-picker select{min-height:38px!important;padding:0 34px 0 10px!important;font-size:10.5px!important;background:var(--surface)!important}.invoice-print-toolbar-actions{display:flex;gap:7px;justify-content:flex-end}.invoice-print-toolbar-actions .primary-btn,.invoice-print-toolbar-actions .secondary-btn{min-height:38px;white-space:nowrap} @media(max-width:820px){.invoice-print-toolbar{grid-template-columns:1fr auto}.invoice-template-picker{grid-column:1/-1;grid-row:2}.invoice-print-toolbar-actions{grid-column:2;grid-row:1}} @media(max-width:560px){.invoice-page:not(.invoice-preview-mode){padding:8px!important}.invoice-print-toolbar{position:relative;top:0;width:100%;grid-template-columns:1fr;margin-bottom:10px;border-radius:12px}.invoice-template-picker,.invoice-print-toolbar-actions{grid-column:1;grid-row:auto}.invoice-print-toolbar-actions{display:grid;grid-template-columns:1fr 1fr}.invoice-print-toolbar-actions>*{width:100%}.invoice-template-picker{grid-template-columns:1fr}.invoice-print-toolbar-brand small{white-space:normal}} /* ========================================================================== 16 Sep 2026 — Secure document preview + finance/filter UI refinement ========================================================================== */ /* Bank Master card icon + modal usability. */ .bank-account-icon{display:grid!important;place-items:center!important;text-align:center!important} .bank-account-icon i{display:grid!important;place-items:center!important;width:100%!important;height:100%!important;line-height:1!important;font-size:15px!important;margin:0!important} .bank-master-modal{display:flex;flex-direction:column;max-height:calc(100dvh - 30px)!important} .bank-master-modal .bank-modal-head{flex:0 0 auto} .bank-master-form{min-height:0!important;max-height:none!important;flex:1 1 auto!important;overflow-y:auto!important;overscroll-behavior:contain;padding-bottom:0!important;scrollbar-gutter:stable} .bank-qr-card{align-items:center!important} .bank-qr-preview{display:grid!important;place-items:center!important;text-align:center!important} .bank-qr-empty{width:100%!important;height:100%!important;display:grid!important;place-items:center!important;align-content:center!important;text-align:center!important;gap:7px!important} .bank-qr-empty i{display:grid!important;place-items:center!important;line-height:1!important;margin:0!important} .bank-qr-content{justify-content:center!important} .bank-qr-upload{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;min-height:40px!important;line-height:1!important} .bank-qr-upload i{display:inline-grid!important;place-items:center!important;width:16px!important;height:16px!important;line-height:1!important;margin:0!important} .bank-modal-actions{position:sticky!important;bottom:0!important;z-index:8!important;margin:0 -24px!important;padding:14px 24px 16px!important;background:var(--surface)!important;border-top:1px solid var(--border)!important;box-shadow:0 -12px 24px rgba(15,23,42,.07)!important;justify-content:flex-end!important} .bank-modal-actions .primary-btn,.bank-modal-actions .secondary-btn{min-height:42px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important} @media(max-width:700px){ .bank-master-modal{height:calc(100dvh - 20px)!important;max-height:calc(100dvh - 20px)!important} .bank-master-form{padding-bottom:0!important} .bank-modal-actions{margin:0 -16px!important;padding:13px 16px 15px!important} } @media(max-width:470px){ .bank-qr-card{grid-template-columns:1fr!important;text-align:center} .bank-qr-preview{margin:0 auto!important} .bank-qr-actions{justify-content:center!important} .bank-modal-actions{grid-template-columns:1fr 1fr!important} } /* Professional secure invoice/quotation preview toolbar. */ .invoice-print-toolbar{border-color:color-mix(in srgb,var(--primary) 16%,var(--border))!important;box-shadow:0 14px 38px rgba(15,23,42,.13)!important;padding:12px 13px!important} .invoice-print-toolbar-icon{width:42px!important;height:42px!important;flex-basis:42px!important;border-radius:12px!important;box-shadow:0 7px 16px color-mix(in srgb,var(--primary) 20%,transparent)} .invoice-print-toolbar-icon i{display:grid!important;place-items:center!important;width:100%!important;height:100%!important;font-size:16px!important;line-height:1!important} .invoice-preview-kicker{display:flex;align-items:center;gap:5px;margin-bottom:2px;font-size:8px;font-weight:850;letter-spacing:.08em;text-transform:uppercase;color:var(--primary)} .invoice-preview-kicker i{font-size:8px} .invoice-print-toolbar-brand b{font-size:13px!important;line-height:1.2!important} .invoice-print-toolbar-brand small{font-size:9.5px!important;line-height:1.35!important} .invoice-template-picker{font-size:10px!important}.invoice-template-picker select{font-size:11.5px!important;min-height:40px!important;font-weight:700!important} .invoice-print-toolbar-actions .primary-btn,.invoice-print-toolbar-actions .secondary-btn{min-height:40px!important;font-size:11px!important;padding-inline:14px!important} .document-print-toolbar{grid-template-columns:minmax(240px,1fr) auto!important} .quotation-print-preview-page{min-height:100vh;background:var(--body-bg);padding:14px 0 30px;color:var(--text)} .quotation-secure-preview{width:min(1040px,calc(100% - 24px));margin:0 auto} .quotation-secure-preview .quotation-sheet{box-shadow:0 18px 50px rgba(15,23,42,.12);border-radius:8px} @media(max-width:700px){ .document-print-toolbar{grid-template-columns:1fr!important} .document-print-toolbar .invoice-print-toolbar-actions{grid-column:1!important;grid-row:auto!important;display:grid!important;grid-template-columns:1fr 1fr!important} .document-print-toolbar .invoice-print-toolbar-actions>*{width:100%!important} .quotation-secure-preview{width:calc(100% - 12px)} .quotation-secure-preview .quotation-sheet{padding:22px!important;border-radius:5px} } @media print{ .quotation-print-preview-page{padding:0!important;background:#fff!important} .quotation-secure-preview{width:100%!important;margin:0!important} .quotation-secure-preview .quotation-sheet{max-width:none!important;width:100%!important;border:0!important;border-radius:0!important;box-shadow:none!important;margin:0!important} } /* Filter readability across management/report pages (barcode layout untouched). */ .page-content .filters label>span, .page-content .quotation-filter-bar label, .page-content .inventory-filter-grid>label, .page-content .reconciliation-date-filter label>span{font-size:12px!important;font-weight:800!important;line-height:1.3!important;color:var(--text-strong)!important} .page-content .filters input,.page-content .filters select,.page-content .filters .smart-select-button, .page-content .filter-bar input,.page-content .filter-bar select,.page-content .filter-bar .smart-select-button, .page-content .quotation-filter-bar input,.page-content .quotation-filter-bar select,.page-content .quotation-filter-bar .smart-select-button, .page-content .inventory-filter-grid input,.page-content .inventory-filter-grid select,.page-content .inventory-filter-grid .smart-select-button{ min-height:44px!important;font-size:13px!important;font-weight:650!important;background:var(--surface)!important } .page-content .filters .primary-btn,.page-content .filters .secondary-btn, .page-content .filter-bar .primary-btn,.page-content .filter-bar .secondary-btn, .page-content .quotation-filter-bar button,.page-content .quotation-filter-bar .secondary-btn, .page-content .inventory-filter-actions .primary-btn,.page-content .inventory-filter-actions .secondary-btn{min-height:44px!important;font-size:12px!important;font-weight:800!important} .page-content .filters{gap:12px!important;padding:16px!important} .page-content .filters label{gap:7px!important} .page-content .quotation-filter-bar{gap:12px!important;padding:15px!important} .page-content .quotation-filter-bar label{gap:7px!important} .page-content .inventory-filter-grid{gap:12px!important} .page-content .report-filters label>span{font-size:12px!important} @media(max-width:760px){ .page-content .filters{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));align-items:end!important} .page-content .filters label{min-width:0!important;width:100%!important} .page-content .filters .filter-submit,.page-content .filters .filter-reset{width:100%!important} .page-content .quotation-filter-bar{grid-template-columns:repeat(2,minmax(0,1fr))!important} .page-content .quotation-filter-bar button{width:100%!important} } @media(max-width:520px){ .page-content .filters,.page-content .quotation-filter-bar,.page-content .inventory-filter-grid{grid-template-columns:1fr!important} .page-content .filters>*{width:100%!important} .page-content .filters input,.page-content .filters select,.page-content .filters .smart-select-button, .page-content .filter-bar input,.page-content .filter-bar select,.page-content .quotation-filter-bar input,.page-content .quotation-filter-bar select, .page-content .inventory-filter-grid input,.page-content .inventory-filter-grid select,.page-content .inventory-filter-grid .smart-select-button{font-size:16px!important} } /* Stock Transfer route — align branch icons with the actual selectors and center values. */ .transfer-route-card{align-items:end!important} .transfer-route-point{grid-template-columns:44px minmax(0,1fr)!important;gap:10px!important;align-items:end!important} .transfer-route-icon{width:44px!important;height:44px!important;align-self:end!important;margin:0!important;display:grid!important;place-items:center!important;font-size:15px!important} .transfer-route-icon i{display:grid!important;place-items:center!important;width:100%!important;height:100%!important;line-height:1!important;margin:0!important} .transfer-route-point label{gap:7px!important} .transfer-route-point label>span{text-align:center!important;font-size:10.5px!important} .transfer-route-card .smart-select-button{justify-content:center!important;text-align:center!important;padding-left:34px!important;padding-right:34px!important;position:relative!important} .transfer-route-card .smart-select-button .selected-label{flex:1!important;text-align:center!important;min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important} .transfer-route-card .smart-select-button>.fa-chevron-down{position:absolute!important;right:12px!important} .transfer-route-card select{text-align:center!important;text-align-last:center!important} .transfer-route-arrow{width:44px!important;height:44px!important;margin:0!important;align-self:end!important} @media(max-width:900px){ .transfer-route-card{grid-template-columns:1fr!important;align-items:stretch!important} .transfer-route-point{grid-template-columns:44px minmax(0,1fr)!important} .transfer-route-arrow{margin:0 auto!important;transform:rotate(90deg)!important} } /* ========================================================================== 16 Sep 2026 — Final invoice/filter/transfer polish ========================================================================== */ /* Filter controls: labels were already enlarged; keep selected values and the dropdown options equally readable across every management/report filter. */ .page-content .filters .smart-select-button .selected-label, .page-content .filter-bar .smart-select-button .selected-label, .page-content .quotation-filter-bar .smart-select-button .selected-label, .page-content .inventory-filter-grid .smart-select-button .selected-label{ font-size:13.5px!important; font-weight:700!important; line-height:1.35!important; } .page-content .filters .smart-option, .page-content .filter-bar .smart-option, .page-content .quotation-filter-bar .smart-option, .page-content .inventory-filter-grid .smart-option{ min-height:42px!important; font-size:13.5px!important; line-height:1.4!important; } .page-content .filters .smart-search, .page-content .filter-bar .smart-search, .page-content .quotation-filter-bar .smart-search, .page-content .inventory-filter-grid .smart-search{ min-height:40px!important; font-size:13px!important; } @media(max-width:520px){ .page-content .filters .smart-select-button .selected-label, .page-content .filter-bar .smart-select-button .selected-label, .page-content .quotation-filter-bar .smart-select-button .selected-label, .page-content .inventory-filter-grid .smart-select-button .selected-label, .page-content .filters .smart-option, .page-content .filter-bar .smart-option, .page-content .quotation-filter-bar .smart-option, .page-content .inventory-filter-grid .smart-option, .page-content .filters .smart-search, .page-content .filter-bar .smart-search, .page-content .quotation-filter-bar .smart-search, .page-content .inventory-filter-grid .smart-search{font-size:16px!important} } /* Stock transfer line number: vertically align the sequence badge with the Product selector itself (not with the Product label above it). */ .inventory-transfer-workspace .transfer-line-number{ align-self:end!important; margin-bottom:8px!important; } @media(max-width:720px){ .inventory-transfer-workspace .transfer-line-number{ align-self:end!important; margin-bottom:8px!important; } } /* A5: carry the same strong accounting frame through the item table so its left/right edges visually continue the header, party and summary borders. */ .a5-invoice-page:not(.thermal-invoice-page) .template-a5 .invoice-table{ border:1.2px solid #111827!important; border-collapse:collapse!important; margin-top:0!important; } .a5-invoice-page:not(.thermal-invoice-page) .template-a5 .invoice-table thead th{ border-top:1.2px solid #111827!important; border-bottom:1px solid #111827!important; } .a5-invoice-page:not(.thermal-invoice-page) .template-a5 .invoice-table th:first-child, .a5-invoice-page:not(.thermal-invoice-page) .template-a5 .invoice-table td:first-child{ border-left:1.2px solid #111827!important; } .a5-invoice-page:not(.thermal-invoice-page) .template-a5 .invoice-table th:last-child, .a5-invoice-page:not(.thermal-invoice-page) .template-a5 .invoice-table td:last-child{ border-right:1.2px solid #111827!important; } .a5-invoice-page:not(.thermal-invoice-page) .template-a5 .invoice-table tbody tr:last-child td{ border-bottom:1.2px solid #111827!important; } /* Totals should consume their complete summary column. The original 250px base width left an artificial right-side gap in templates with wider summary columns. Thermal receipts intentionally keep their existing rules untouched. */ .invoice-sheet:not(.template-thermal80):not(.template-thermal58) .invoice-right-summary{ width:100%!important; min-width:0!important; } .invoice-sheet:not(.template-thermal80):not(.template-thermal58) .invoice-totals{ width:100%!important; max-width:none!important; box-sizing:border-box!important; } /* Responsive final print-preview stage. It preserves the document's true desktop/print geometry and lets JS scale the sheet as one unit on narrow screens, preventing table/header reflow and overlap. */ .invoice-print-stage{ width:100%; max-width:100%; min-height:1px; margin:0 auto; overflow:hidden; } .invoice-print-stage>.invoice-sheet{box-sizing:border-box} @media(max-width:820px){ .invoice-page:not(.invoice-preview-mode){padding:8px 6px 24px!important} .invoice-print-stage{border-radius:10px} .invoice-print-toolbar{gap:10px!important} .invoice-print-toolbar-brand{min-width:0} .invoice-template-picker select{width:100%!important} } @media(max-width:560px){ .invoice-print-toolbar-brand b{font-size:14px!important} .invoice-print-toolbar-brand small{font-size:10.5px!important} .invoice-print-toolbar-actions .primary-btn, .invoice-print-toolbar-actions .secondary-btn{min-height:44px!important;font-size:12px!important} .invoice-template-picker{font-size:10.5px!important} .invoice-template-picker select{font-size:16px!important;min-height:44px!important} } @media print{ .invoice-print-stage{display:block!important;width:auto!important;height:auto!important;overflow:visible!important;margin:0!important} .invoice-print-stage>.invoice-sheet{position:static!important;left:auto!important;transform:none!important;transform-origin:initial!important} } /* Keep the real paper canvas intact before responsive screen scaling. This overrides the older generic mobile rule that changed A4 sheets to width:100%. */ @media screen{ .invoice-print-stage>.invoice-sheet:not(.template-a5):not(.template-thermal80):not(.template-thermal58){ width:794px!important; min-width:794px!important; max-width:794px!important; min-height:1123px!important; } .invoice-print-stage>.template-a5.invoice-sheet{ width:794px!important; min-width:794px!important; max-width:794px!important; min-height:559px!important; } } /* Match native select/input values to the enlarged filter labels as well. */ .page-content .filters input,.page-content .filters select, .page-content .filter-bar input,.page-content .filter-bar select, .page-content .quotation-filter-bar input,.page-content .quotation-filter-bar select, .page-content .inventory-filter-grid input,.page-content .inventory-filter-grid select{ font-size:14px!important; font-weight:650!important; line-height:1.35!important; } .page-content .filters select option,.page-content .filter-bar select option, .page-content .quotation-filter-bar select option,.page-content .inventory-filter-grid select option{ font-size:14px; } /* ========================================================= V30 — POS retail terminal redesign Mirrors the approved POS reference while preserving all existing ProBill cart, tracking, tax and payment behavior. ========================================================= */ body.pos-terminal-active .page-heading .eyebrow{display:none!important} body.pos-terminal-active .page-heading h1{margin:0;font-size:20px;line-height:1.15;font-weight:800;color:var(--text-strong)} body.pos-terminal-active .page-heading h1::after{content:'Fast billing for a smoother business';display:block;margin-top:4px;color:var(--muted);font-size:11px;line-height:1.2;font-weight:500;letter-spacing:0} body.pos-terminal-active .page-content{max-width:none;padding:12px 14px 0!important;height:calc(100dvh - 70px);overflow:hidden} body.pos-terminal-active .pos-terminal{height:100%;min-height:0;gap:10px;overflow:hidden} body.pos-terminal-active .pos-session-alert, body.pos-terminal-active .pos-session-strip{display:none!important} .pos-terminal-topbar{flex:0 0 auto;min-height:70px;padding:10px 13px;border-radius:16px;box-shadow:0 5px 18px rgba(15,23,42,.05)} .pos-terminal-brand{gap:11px} .pos-terminal-mark{width:46px;height:46px;flex-basis:46px;border-radius:13px;font-size:18px} .pos-terminal-brand span:not(.pos-terminal-mark){font-size:10px;letter-spacing:.12em} .pos-terminal-brand strong{font-size:17px} .pos-terminal-session{min-width:160px;height:46px;padding:7px 10px;border-radius:11px;background:var(--surface-soft)} .pos-terminal-session small{font-size:9px} .pos-terminal-session b{font-size:12px} .pos-terminal-session a{font-size:10px} .pos-terminal-actions{gap:7px} .pos-terminal-btn{height:44px;padding:0 13px;border-radius:11px;font-size:11px;font-weight:750} .pos-terminal-btn i{font-size:12px} #posSaleForm{flex:1;min-height:0;display:flex;flex-direction:column;gap:10px;overflow:hidden} .pos-terminal-grid{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1.88fr) minmax(430px,.96fr);gap:12px;align-items:stretch} .pos-catalog-pane,.pos-cart-pane{height:100%;min-height:0;border-radius:17px;box-shadow:0 4px 16px rgba(15,23,42,.045)} .pos-catalog-pane{display:flex;flex-direction:column;padding:12px;overflow:hidden} .pos-catalog-toolbar{flex:0 0 auto;margin-bottom:9px;gap:10px} .pos-catalog-search{height:46px;border-radius:12px;padding:0 12px} .pos-catalog-search input{font-size:12.5px;font-weight:600} .pos-catalog-meta span{font-size:10.5px} .pos-catalog-meta button{height:40px;padding:0 12px;font-size:10.5px;border-radius:10px} .pos-category-strip{flex:0 0 auto;gap:7px;padding:1px 1px 10px} .pos-category-strip button{height:36px;padding:0 12px;font-size:10.5px;border-radius:999px} .pos-product-grid{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px;padding:0 3px 6px 0;scrollbar-width:thin} .pos-product-card{min-height:196px;padding:10px;border-radius:14px;gap:8px} .pos-product-image{height:98px;border-radius:11px} .pos-product-info b{font-size:12px;line-height:1.3;white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;min-height:31px} .pos-product-info small{font-size:9.5px} .pos-product-card-foot{align-items:center} .pos-product-card-foot strong{font-size:14px;font-weight:800} .pos-product-card-foot small{font-size:9px;padding:5px 8px;border-radius:999px;background:color-mix(in srgb,var(--success) 9%,var(--surface));color:var(--success)} .pos-product-card-foot .stock-out{background:color-mix(in srgb,var(--danger) 8%,var(--surface));color:var(--danger)} .pos-cart-pane{position:static;display:flex;flex-direction:column;overflow:hidden;background:var(--surface)} .pos-cart-head{flex:0 0 auto;min-height:64px;height:auto;padding:10px 14px;border-bottom:1px solid var(--border)} .pos-cart-head span{font-size:10px;letter-spacing:.02em;text-transform:none} .pos-cart-head h2{font-size:19px;gap:8px} .pos-cart-head h2 em{min-width:25px;height:25px;font-size:10px} .pos-icon-button{width:37px;height:37px;border-radius:10px} .pos-party-grid{flex:0 0 auto;gap:10px;padding:11px 14px;background:var(--surface);border-bottom:1px solid var(--border)} .pos-field{gap:6px;font-size:11px} .pos-field>span{font-size:10px;color:var(--text);font-weight:750} .pos-field input,.pos-field select,.pos-field .smart-select-button{height:42px;min-height:42px;font-size:11.5px;font-weight:650;border-radius:10px} .pos-field-with-button{grid-template-columns:minmax(0,1fr) 41px;gap:7px} .pos-field-with-button>button{height:42px;border-radius:10px} .pos-cart-lines{flex:1;min-height:0;max-height:none;overflow-y:auto;overscroll-behavior:contain;padding:0 14px;background:var(--surface);scrollbar-width:thin} .pos-cart-empty{height:100%;min-height:180px} .pos-cart-empty>span{width:48px;height:48px} .pos-cart-empty b{font-size:12.5px} .pos-cart-empty small{font-size:9.5px} .pos-cart-line{margin:0;border:0;border-bottom:1px solid var(--border);border-radius:0;background:var(--surface);box-shadow:none!important;overflow:visible} .pos-cart-line:last-child{border-bottom:0} .pos-cart-line-main{grid-template-columns:50px minmax(0,1fr) 88px;gap:11px;align-items:center;padding:11px 0} .pos-cart-thumb{width:50px;height:50px;border-radius:11px;background:var(--surface-soft)} .pos-cart-product{gap:3px} .pos-cart-product b{font-size:11.5px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pos-cart-product small{font-size:9px;line-height:1.35} .pos-cart-quick-controls{display:flex;align-items:center;gap:7px;margin-top:5px} .pos-terminal-qty{width:112px;height:32px;grid-template-columns:32px 48px 32px;border-radius:8px} .pos-terminal-qty button{font-size:14px} .pos-terminal-qty input{font-size:10.5px!important;line-height:32px} .pos-cart-line-end{align-self:stretch;display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;gap:7px} .pos-cart-line-end .pos-line-remove{width:31px;height:31px;border-radius:9px;font-size:11px} .pos-cart-line-end>strong{font-size:12.5px;font-weight:800;color:var(--text-strong);white-space:nowrap;padding-bottom:3px} .pos-line-options{position:relative;border:0;background:transparent} .pos-line-options>summary{height:32px;display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:0 8px;border:1px solid var(--border);border-radius:8px;background:var(--surface-soft);font-size:9px;font-weight:750;list-style:none;color:var(--muted)} .pos-line-options>summary:hover{border-color:var(--primary-border);color:var(--primary);background:var(--primary-soft-2)} .pos-line-options>summary small{display:none} .pos-line-options[open]>summary{border-color:var(--primary-border);color:var(--primary);background:var(--primary-soft)} .pos-line-option-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:8px;padding:10px;border:1px solid var(--border);border-radius:10px;background:var(--surface-soft)} .pos-line-option-grid label{font-size:9px} .pos-line-option-grid label>span{font-size:8.5px} .pos-line-option-grid input,.pos-line-option-grid select{height:36px;font-size:10px} .pos-line-tracking{margin-top:8px;border:1px solid var(--primary-border);border-radius:10px} .pos-cart-note{flex:0 0 auto;margin:0 14px 10px;border-radius:10px;background:var(--primary-soft-2);overflow:hidden} .pos-cart-note>button{width:100%;min-height:38px;display:grid;grid-template-columns:22px 1fr 20px;align-items:center;gap:6px;padding:0 10px;border:0;background:transparent;color:var(--primary);font:inherit;font-size:10px;font-weight:750;text-align:left;cursor:pointer} .pos-cart-note>button>i:first-child{width:22px;height:22px;display:grid;place-items:center;border-radius:7px;background:var(--surface);border:1px solid var(--primary-border)} .pos-cart-note>button>i:last-child{transition:transform .18s ease} .pos-cart-note>button.is-open>i:last-child{transform:rotate(180deg)} .pos-note-editor{padding:0 10px 10px} .pos-note-editor textarea{width:100%;min-height:58px;max-height:90px;resize:vertical;padding:9px 10px;border:1px solid var(--primary-border);border-radius:9px;background:var(--surface);color:var(--text);font:inherit;font-size:10.5px;line-height:1.45;outline:0} .pos-note-editor textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-ring)} .pos-note-editor small{display:block;margin-top:5px;font-size:8.5px;color:var(--muted)} /* Bottom checkout dock stays in the POS content column, never over the sidebar. */ .pos-checkout-dock{position:relative;z-index:20;flex:0 0 auto;display:grid;grid-template-columns:minmax(250px,.86fr) minmax(560px,1.9fr) minmax(285px,.88fr);gap:14px;align-items:stretch;margin:0 -14px;padding:12px 14px 14px;border-top:1px solid var(--border);background:var(--surface);box-shadow:0 -8px 24px rgba(15,23,42,.06)} .pos-dock-summary,.pos-dock-payment,.pos-dock-actions{min-width:0} .pos-dock-summary{display:grid;grid-template-columns:minmax(0,1fr);gap:9px;padding-right:14px;border-right:1px solid var(--border)} .pos-dock-title{display:grid;gap:2px} .pos-dock-title b{font-size:14px;line-height:1.2;color:var(--text-strong)} .pos-dock-title small{font-size:9.5px;line-height:1.35;color:var(--muted)} .pos-checkout-dock .pos-summary-rows{gap:8px;padding:0;border:0} .pos-checkout-dock .pos-summary-rows>div{font-size:10.5px;color:var(--muted)} .pos-checkout-dock .pos-summary-rows b{font-size:11.5px;color:var(--text-strong)} .pos-dock-payment{display:grid;gap:10px;padding-right:14px;border-right:1px solid var(--border)} .pos-dock-payment-top{display:grid;grid-template-columns:minmax(155px,.75fr) minmax(190px,.9fr) minmax(220px,1.12fr);gap:10px;align-items:start} .pos-dock-payment-bottom{display:grid;grid-template-columns:minmax(180px,.9fr) auto minmax(160px,.72fr);gap:10px;align-items:end} .pos-checkout-dock .pos-inline-control{grid-template-columns:minmax(0,1fr) 54px} .pos-checkout-dock .bank-payment-field small{font-size:8.5px} .pos-quick-pay{display:flex;gap:6px;align-items:end;padding-bottom:1px} .pos-quick-pay button{height:42px;min-width:52px;padding:0 10px;border-radius:10px;background:var(--primary-soft-2);border-color:transparent;font-size:10px} .pos-dock-balance{display:grid;align-content:end;gap:2px;min-height:42px;padding-left:12px;border-left:1px solid var(--border)} .pos-dock-balance>span{font-size:9px;color:var(--muted)} .pos-dock-balance>b{font-size:14px;color:var(--text-strong)} .pos-dock-balance>small{display:block;max-width:190px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:8px;color:var(--muted)} .pos-dock-actions{display:grid;grid-template-rows:auto auto 50px;gap:8px;align-content:stretch} .pos-checkout-dock .pos-grand-total{display:grid;gap:2px;padding:0;border:0;align-items:start} .pos-checkout-dock .pos-grand-total span{font-size:11px;color:var(--text-strong)} .pos-checkout-dock .pos-grand-total strong{font-size:29px;line-height:1;color:var(--primary);letter-spacing:-.035em} .pos-dock-secondary-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px} .pos-hold-sale,.pos-reset-sale{height:38px;display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text);font:inherit;font-size:10px;font-weight:750;cursor:pointer} .pos-hold-sale:hover,.pos-reset-sale:hover{border-color:var(--primary-border);background:var(--primary-soft-2);color:var(--primary)} .pos-hold-sale.has-held-sale{border-color:var(--primary-border);background:var(--primary-soft);color:var(--primary)} .pos-checkout-dock .pos-complete-sale{min-height:50px;height:50px;border-radius:10px;padding:0 13px;grid-template-columns:22px 1fr auto} .pos-checkout-dock .pos-complete-sale span{font-size:11px} .pos-checkout-dock .pos-complete-sale strong{font-size:12px} /* Full-screen POS uses the same layout, with the footer retained at the bottom. */ body.pos-focus .pos-terminal{padding:10px!important} body.pos-focus #posSaleForm{display:flex!important;flex-direction:column!important;gap:10px!important;min-height:0!important} body.pos-focus .pos-terminal-grid{flex:1!important;min-height:0!important} body.pos-focus .pos-catalog-pane,body.pos-focus .pos-cart-pane{height:100%!important;min-height:0!important;overflow:hidden!important} body.pos-focus .pos-product-grid,body.pos-focus .pos-cart-lines{overflow-y:auto!important;min-height:0!important} body.pos-focus .pos-checkout-dock{flex:0 0 auto!important;margin:0 -10px -10px!important;padding-left:10px!important;padding-right:10px!important} @media(max-width:1460px){ .pos-terminal-grid{grid-template-columns:minmax(0,1.62fr) minmax(400px,.9fr)} .pos-product-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:9px} .pos-product-card{min-height:182px;padding:9px} .pos-product-image{height:86px} .pos-checkout-dock{grid-template-columns:minmax(220px,.75fr) minmax(500px,1.85fr) minmax(250px,.82fr);gap:12px} .pos-dock-payment-top{grid-template-columns:minmax(135px,.72fr) minmax(170px,.9fr) minmax(190px,1.08fr);gap:8px} .pos-dock-payment-bottom{grid-template-columns:minmax(150px,.9fr) auto minmax(145px,.72fr);gap:8px} } @media(max-width:1260px){ .pos-terminal-grid{grid-template-columns:minmax(0,1.45fr) minmax(380px,.92fr)} .pos-product-grid{grid-template-columns:repeat(3,minmax(0,1fr))} .pos-terminal-btn span{display:none}.pos-terminal-btn{width:42px;padding:0} .pos-checkout-dock{grid-template-columns:minmax(210px,.75fr) minmax(430px,1.65fr) minmax(225px,.8fr)} .pos-dock-title small{display:none} .pos-dock-payment-top{grid-template-columns:1fr 1fr} .pos-dock-payment-top .bank-payment-field{grid-column:1/-1} .pos-dock-payment-bottom{grid-template-columns:minmax(135px,1fr) auto minmax(130px,.8fr)} .pos-checkout-dock .pos-grand-total strong{font-size:25px} } @media(max-width:1050px){ body.pos-terminal-active{overflow:auto} body.pos-terminal-active .page-content{height:auto;min-height:calc(100dvh - 70px);overflow:visible;padding:12px 12px 28px!important} body.pos-terminal-active .pos-terminal{height:auto;overflow:visible} #posSaleForm{display:block;overflow:visible} .pos-terminal-grid{grid-template-columns:1fr;display:grid;min-height:0} .pos-catalog-pane,.pos-cart-pane{height:auto;min-height:0;overflow:visible} .pos-product-grid{grid-template-columns:repeat(4,minmax(0,1fr));max-height:none;overflow:visible} .pos-cart-lines{max-height:520px;overflow-y:auto} .pos-checkout-dock{position:sticky;bottom:0;grid-template-columns:1fr 1.65fr;margin:12px -12px -28px;padding:12px;box-shadow:0 -8px 26px rgba(15,23,42,.08)} .pos-dock-actions{grid-column:1/-1;grid-template-columns:minmax(170px,.55fr) minmax(240px,.75fr) minmax(280px,1fr);grid-template-rows:auto;align-items:end} .pos-dock-secondary-actions{order:2}.pos-checkout-dock .pos-complete-sale{order:3}.pos-checkout-dock .pos-grand-total{order:1} body.pos-focus{overflow:auto!important} body.pos-focus .pos-terminal{height:auto!important;min-height:100dvh!important;overflow:visible!important} body.pos-focus #posSaleForm{display:block!important;overflow:visible!important} body.pos-focus .pos-catalog-pane,body.pos-focus .pos-cart-pane{height:auto!important;overflow:visible!important} body.pos-focus .pos-product-grid{overflow:visible!important} body.pos-focus .pos-cart-lines{max-height:520px!important} } @media(max-width:800px){ .pos-terminal-topbar{flex-wrap:wrap} .pos-terminal-brand{width:calc(100% - 175px)} .pos-terminal-session{margin-left:auto} .pos-terminal-actions{width:100%;justify-content:flex-end} .pos-terminal-btn{width:auto;padding:0 11px}.pos-terminal-btn span{display:inline} .pos-product-grid{grid-template-columns:repeat(3,minmax(0,1fr))} .pos-checkout-dock{position:static;grid-template-columns:1fr;margin:12px 0 0;padding:13px;border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-sm)} .pos-dock-summary,.pos-dock-payment{padding:0 0 12px;border-right:0;border-bottom:1px solid var(--border)} .pos-dock-payment-top{grid-template-columns:1fr 1fr} .pos-dock-payment-bottom{grid-template-columns:1fr auto} .pos-dock-balance{grid-column:1/-1;border-left:0;padding-left:0;border-top:1px solid var(--border);padding-top:9px} .pos-dock-actions{grid-column:auto;grid-template-columns:1fr 1fr;gap:9px} .pos-checkout-dock .pos-grand-total{grid-column:1/-1} .pos-dock-secondary-actions{order:2}.pos-checkout-dock .pos-complete-sale{order:3}.pos-checkout-dock .pos-complete-sale{grid-column:1/-1} } @media(max-width:600px){ body.pos-terminal-active .page-heading h1{font-size:18px} body.pos-terminal-active .page-heading h1::after{font-size:10px} .pos-terminal-topbar{padding:10px} .pos-terminal-brand{width:100%;margin:0} .pos-terminal-session{margin:0;min-width:0;flex:1} .pos-terminal-actions{display:grid;grid-template-columns:repeat(4,1fr);width:100%} .pos-terminal-btn{width:100%;padding:0 6px;font-size:10px}.pos-terminal-btn span{display:none} .pos-catalog-toolbar{align-items:stretch;flex-direction:column} .pos-catalog-meta{justify-content:space-between} .pos-product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .pos-product-card{min-height:180px}.pos-product-image{height:82px} .pos-party-grid{grid-template-columns:1fr} .pos-cart-line-main{grid-template-columns:46px minmax(0,1fr) 76px;gap:8px} .pos-cart-thumb{width:46px;height:46px} .pos-cart-product b{font-size:11px} .pos-dock-payment-top,.pos-dock-payment-bottom{grid-template-columns:1fr} .pos-dock-payment-top .bank-payment-field{grid-column:auto} .pos-quick-pay{display:grid;grid-template-columns:repeat(3,1fr)} .pos-quick-pay button{width:100%} .pos-dock-balance{grid-column:auto} .pos-dock-actions{grid-template-columns:1fr} .pos-checkout-dock .pos-grand-total,.pos-checkout-dock .pos-complete-sale{grid-column:auto} .pos-dock-secondary-actions{grid-template-columns:1fr 1fr} } /* POS compact item-options trigger: keep the cart row visually aligned with the approved reference. */ .pos-cart-quick-controls{flex-wrap:wrap} .pos-line-options>summary{width:32px;padding:0} .pos-line-options>summary span{display:none} .pos-line-options[open]{flex:1 1 100%;min-width:0} .pos-line-options[open]>summary{width:auto;padding:0 8px} .pos-line-options[open]>summary span{display:inline} .pos-line-options[open] .pos-line-option-grid{width:100%} /* ========================================================= V31 — POS readability + cashier workflow polish Refines the V30 terminal against the approved reference: larger readable type, denser professional spacing, a fully visible desktop checkout dock and responsive touch targets. ========================================================= */ body.pos-terminal-active .page-content{ padding:10px 12px 0!important; height:calc(100dvh - 64px); } body.pos-terminal-active .pos-terminal{gap:9px} .pos-terminal-topbar{ min-height:64px; padding:9px 12px; border:1px solid var(--border); border-radius:15px; } .pos-terminal-mark{width:44px;height:44px;flex-basis:44px;border-radius:12px;font-size:17px} .pos-terminal-brand span:not(.pos-terminal-mark){font-size:10.5px;font-weight:800;letter-spacing:.115em} .pos-terminal-brand strong{font-size:17.5px;line-height:1.18} .pos-terminal-session{height:44px;min-width:158px;padding:6px 10px} .pos-terminal-session small{font-size:9.5px;line-height:1.15} .pos-terminal-session b{font-size:12.5px;line-height:1.15} .pos-terminal-session a{font-size:10.5px;font-weight:800} .pos-terminal-btn{height:42px;min-width:82px;padding:0 12px;font-size:11.5px;gap:7px} .pos-terminal-btn i{font-size:12.5px} #posSaleForm{gap:9px} .pos-terminal-grid{ grid-template-columns:minmax(0,1.74fr) minmax(455px,.92fr); gap:11px; } .pos-catalog-pane,.pos-cart-pane{border:1px solid var(--border);border-radius:16px} .pos-catalog-pane{padding:11px} .pos-catalog-toolbar{margin-bottom:8px;gap:9px} .pos-catalog-search{height:44px;padding:0 12px;border-radius:11px} .pos-catalog-search>i{font-size:13px} .pos-catalog-search input{font-size:13.5px!important;font-weight:600;letter-spacing:0} .pos-catalog-search button{width:34px;height:34px;font-size:12px} .pos-catalog-meta{gap:8px} .pos-catalog-meta span{font-size:11px;font-weight:700;color:var(--muted)} .pos-catalog-meta button{height:40px;padding:0 12px;font-size:11px;font-weight:750} .pos-category-strip{gap:7px;padding:1px 1px 9px;scrollbar-width:none} .pos-category-strip::-webkit-scrollbar{display:none} .pos-category-strip button{height:35px;padding:0 12px;font-size:11.25px;font-weight:700;white-space:nowrap} .pos-category-strip button i{font-size:10.5px} .pos-product-grid{gap:10px;padding:0 3px 6px 0;align-content:start} .pos-product-card{ min-height:190px; padding:9px; border-radius:13px; gap:7px; text-align:left; } .pos-product-card:hover:not(.is-out){transform:translateY(-1px);box-shadow:0 8px 20px rgba(15,23,42,.08)} .pos-product-image{height:96px;border-radius:10px} .pos-product-image>i{font-size:22px} .pos-product-info{gap:3px} .pos-product-info b{font-size:12.75px;line-height:1.28;min-height:32px;font-weight:760} .pos-product-info small{font-size:10.25px;line-height:1.3;font-weight:550} .pos-product-card-foot strong{font-size:15px;line-height:1.1;font-weight:820} .pos-product-card-foot small{font-size:9.75px;line-height:1;padding:5px 8px;font-weight:750} .pos-cart-head{min-height:59px;padding:9px 13px} .pos-cart-head span{font-size:10.5px;font-weight:800} .pos-cart-head h2{font-size:20.5px;line-height:1.1;font-weight:820} .pos-cart-head h2 em{min-width:26px;height:26px;padding:0 7px;font-size:11px} .pos-icon-button{width:36px;height:36px} .pos-party-grid{gap:9px;padding:10px 13px} .pos-field{gap:5px} .pos-field>span{font-size:10.75px;font-weight:800;letter-spacing:.005em} .pos-field input,.pos-field select,.pos-field .smart-select-button{ height:40px; min-height:40px; padding-top:0; padding-bottom:0; font-size:12.5px!important; font-weight:650!important; border-radius:9px; } .pos-field .smart-select-label{font-size:12.5px!important;font-weight:650!important} .pos-field-with-button{grid-template-columns:minmax(0,1fr) 40px;gap:6px} .pos-field-with-button>button{height:40px;font-size:12px} .pos-cart-lines{padding:0 13px} .pos-cart-line-main{grid-template-columns:52px minmax(0,1fr) 92px;gap:10px;padding:10px 0} .pos-cart-thumb{width:52px;height:52px;border-radius:10px} .pos-cart-thumb i{font-size:16px} .pos-cart-product{gap:2px} .pos-cart-product b{font-size:12.5px;line-height:1.3;font-weight:780} .pos-cart-product small{font-size:9.75px;line-height:1.35;font-weight:550;color:var(--muted)} .pos-cart-quick-controls{gap:6px;margin-top:5px} .pos-terminal-qty{width:108px;height:31px;grid-template-columns:31px 46px 31px} .pos-terminal-qty button{font-size:14px;font-weight:800} .pos-terminal-qty input{font-size:11px!important;font-weight:750!important;line-height:31px} .pos-line-options>summary{height:31px;font-size:10.5px} .pos-cart-line-end .pos-line-remove{width:30px;height:30px;font-size:11px} .pos-cart-line-end>strong{font-size:13px;font-weight:820} .pos-cart-note{padding:9px 13px 10px} .pos-cart-note>button{min-height:38px;font-size:10.75px;font-weight:750} .pos-note-editor textarea{font-size:12px;line-height:1.45} /* Keep the checkout dock completely visible on normal desktop POS screens. */ .pos-checkout-dock{ min-height:150px; grid-template-columns:minmax(275px,.82fr) minmax(0,1.82fr) minmax(300px,.9fr); gap:13px; margin:0 -12px; padding:11px 12px 12px; border-top:1px solid var(--border); box-shadow:0 -7px 22px rgba(15,23,42,.055); } .pos-dock-summary{gap:8px;padding-right:13px} .pos-dock-title{gap:3px} .pos-dock-title b{font-size:15px;font-weight:820} .pos-dock-title small{font-size:10.25px;line-height:1.35} .pos-checkout-dock .pos-summary-rows{gap:7px} .pos-checkout-dock .pos-summary-rows>div{font-size:11.75px;line-height:1.25} .pos-checkout-dock .pos-summary-rows b{font-size:12.75px;font-weight:800} .pos-dock-payment{gap:9px;padding-right:13px} .pos-dock-payment-top{grid-template-columns:minmax(150px,.7fr) minmax(190px,.88fr) minmax(220px,1.12fr);gap:9px} .pos-dock-payment-bottom{grid-template-columns:minmax(180px,.9fr) auto minmax(160px,.72fr);gap:9px} .pos-checkout-dock .pos-field>span{font-size:10.75px} .pos-checkout-dock .pos-field input, .pos-checkout-dock .pos-field select, .pos-checkout-dock .pos-field .smart-select-button{height:40px;min-height:40px;font-size:12.25px!important} .pos-checkout-dock .bank-payment-field small{font-size:9px;line-height:1.25} .pos-checkout-dock .pos-inline-control{grid-template-columns:minmax(0,1fr) 52px} .pos-quick-pay{gap:6px} .pos-quick-pay button{height:40px;min-width:54px;padding:0 10px;font-size:10.75px;font-weight:800} .pos-dock-balance{gap:2px;min-height:40px;padding-left:11px} .pos-dock-balance>span{font-size:9.75px;font-weight:650} .pos-dock-balance>b{font-size:15.5px;font-weight:820} .pos-dock-balance>small{max-width:210px;font-size:8.75px;line-height:1.25} .pos-dock-actions{grid-template-rows:auto auto 48px;gap:7px} .pos-checkout-dock .pos-grand-total span{font-size:11px;font-weight:780} .pos-checkout-dock .pos-grand-total strong{font-size:29px;font-weight:850;letter-spacing:-.035em} .pos-hold-sale,.pos-reset-sale{height:37px;font-size:10.75px;font-weight:780;border-radius:9px} .pos-checkout-dock .pos-complete-sale{min-height:48px;height:48px;border-radius:9px;padding:0 13px;box-shadow:0 7px 15px color-mix(in srgb,var(--primary) 23%,transparent)} .pos-checkout-dock .pos-complete-sale span{font-size:11.75px;font-weight:820} .pos-checkout-dock .pos-complete-sale strong{font-size:12.25px;font-weight:850} .pos-checkout-dock .pos-complete-sale:disabled{opacity:.72;cursor:wait;box-shadow:none} /* More usable intermediate desktop widths without shrinking cashier text. */ @media(max-width:1500px) and (min-width:1051px){ .pos-terminal-grid{grid-template-columns:minmax(0,1.6fr) minmax(415px,.92fr)} .pos-product-card{min-height:180px;padding:8px} .pos-product-image{height:86px} .pos-product-info b{font-size:12px;min-height:30px} .pos-checkout-dock{grid-template-columns:minmax(230px,.75fr) minmax(0,1.72fr) minmax(255px,.82fr);gap:10px} .pos-dock-payment-top{grid-template-columns:minmax(130px,.68fr) minmax(165px,.86fr) minmax(185px,1.05fr);gap:7px} .pos-dock-payment-bottom{grid-template-columns:minmax(145px,.86fr) auto minmax(130px,.7fr);gap:7px} .pos-dock-title small,.pos-dock-balance>small{display:none} } @media(max-width:1280px) and (min-width:1051px){ .pos-product-grid{grid-template-columns:repeat(3,minmax(0,1fr))} .pos-terminal-grid{grid-template-columns:minmax(0,1.42fr) minmax(395px,.95fr)} .pos-terminal-btn{min-width:42px;width:42px;padding:0}.pos-terminal-btn span{display:none} .pos-checkout-dock{grid-template-columns:minmax(200px,.68fr) minmax(0,1.58fr) minmax(230px,.78fr)} .pos-dock-payment-top{grid-template-columns:1fr 1fr} .pos-dock-payment-top .bank-payment-field{grid-column:1/-1} .pos-dock-payment-bottom{grid-template-columns:minmax(130px,1fr) auto minmax(125px,.78fr)} .pos-checkout-dock .pos-grand-total strong{font-size:25px} } /* Tablet: stack workspace, keep touch targets and text readable. */ @media(max-width:1050px){ body.pos-terminal-active .page-content{height:auto;min-height:calc(100dvh - 64px);padding:10px 10px 24px!important} .pos-terminal-grid{grid-template-columns:1fr} .pos-product-grid{grid-template-columns:repeat(4,minmax(0,1fr))} .pos-checkout-dock{min-height:0;margin:10px -10px -24px;padding:12px 10px;grid-template-columns:minmax(220px,.78fr) minmax(0,1.65fr)} .pos-dock-actions{grid-column:1/-1;grid-template-columns:minmax(170px,.55fr) minmax(235px,.72fr) minmax(280px,1fr);grid-template-rows:auto;align-items:end} } @media(max-width:800px){ .pos-product-grid{grid-template-columns:repeat(3,minmax(0,1fr))} .pos-terminal-brand strong{font-size:16.5px} .pos-terminal-actions{gap:6px} .pos-terminal-btn{font-size:11px} .pos-product-info b{font-size:12.5px} .pos-checkout-dock{position:static;margin:10px 0 0;padding:13px;grid-template-columns:1fr;border:1px solid var(--border);border-radius:15px} .pos-dock-summary,.pos-dock-payment{padding:0 0 12px;border-right:0;border-bottom:1px solid var(--border)} .pos-dock-actions{grid-column:auto;grid-template-columns:1fr 1fr} } @media(max-width:600px){ .pos-terminal-topbar{gap:8px} .pos-terminal-actions{grid-template-columns:repeat(4,1fr)} .pos-terminal-btn{min-width:0;height:42px;font-size:11px} .pos-catalog-search input{font-size:16px!important} /* prevents mobile browser zoom */ .pos-category-strip button{font-size:11.5px} .pos-product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .pos-product-card{min-height:178px} .pos-product-image{height:82px} .pos-product-info b{font-size:12px} .pos-product-info small{font-size:10px} .pos-product-card-foot strong{font-size:14px} .pos-field input,.pos-field select,.pos-field .smart-select-button,.pos-field .smart-select-label{font-size:16px!important} .pos-cart-product b{font-size:12px} .pos-cart-product small{font-size:10px} .pos-checkout-dock .pos-field input,.pos-checkout-dock .pos-field select,.pos-checkout-dock .pos-field .smart-select-button{font-size:16px!important} .pos-dock-title b{font-size:16px} .pos-checkout-dock .pos-summary-rows>div{font-size:12.5px} .pos-checkout-dock .pos-summary-rows b{font-size:13.5px} .pos-checkout-dock .pos-grand-total strong{font-size:30px} .pos-dock-payment-top,.pos-dock-payment-bottom{grid-template-columns:1fr} .pos-quick-pay{grid-template-columns:repeat(3,1fr)} .pos-quick-pay button{font-size:12px} .pos-dock-actions{grid-template-columns:1fr} .pos-dock-secondary-actions{grid-template-columns:1fr 1fr} .pos-checkout-dock .pos-complete-sale{height:50px;min-height:50px} .pos-checkout-dock .pos-complete-sale span{font-size:12.5px} } /* ========================================================= V32 — POS cart + checkout finishing pass Full-width item editor, truly centered quantity controls, padded checkout card, and responsive cashier ergonomics. ========================================================= */ body.pos-terminal-active #posSaleForm{padding-bottom:10px} /* Cart items: clear information row + centered quantity/action rail. */ .pos-cart-lines{padding:8px 12px 10px;background:var(--surface)} .pos-cart-line{ margin:0; border:0; border-bottom:1px solid var(--border); border-radius:0; background:var(--surface); box-shadow:none!important; overflow:visible; } .pos-cart-line:last-child{border-bottom:0} .pos-cart-line-main{ display:grid; grid-template-columns:52px minmax(0,1fr) minmax(88px,auto); gap:11px; align-items:center; padding:12px 2px 7px; } .pos-cart-thumb{width:52px;height:52px;border-radius:12px;background:var(--surface-soft)} .pos-cart-product{align-self:center;gap:3px;min-width:0} .pos-cart-product b{font-size:13px;line-height:1.28;font-weight:800;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .pos-cart-product small{font-size:10.25px;line-height:1.35;font-weight:560;white-space:normal;color:var(--muted)} .pos-cart-line-end{align-self:stretch;display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;gap:7px} .pos-cart-line-end .pos-line-remove{width:31px;height:31px;border-radius:9px} .pos-cart-line-end>strong{font-size:13.5px;line-height:1.15;font-weight:850;white-space:nowrap;padding-bottom:3px;color:var(--text-strong)} /* A three-column rail keeps quantity mathematically centered in the full cart row. */ .pos-cart-item-actions{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; min-height:45px; padding:0 2px 10px; } .pos-cart-item-actions .pos-terminal-qty{ grid-column:2; width:120px; height:34px; grid-template-columns:34px 52px 34px; justify-self:center; border-radius:9px; border-color:var(--primary-border); } .pos-cart-item-actions .pos-terminal-qty button{font-size:15px;background:var(--primary-soft-2)} .pos-cart-item-actions .pos-terminal-qty input{font-size:11.75px!important;line-height:34px;font-weight:850!important;background:var(--surface)!important} .pos-item-options-toggle{ grid-column:3; justify-self:end; min-width:92px; height:34px; display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:0 10px; border:1px solid var(--primary-border); border-radius:9px; background:var(--primary-soft-2); color:var(--primary); font:inherit; font-size:10.75px; font-weight:800; cursor:pointer; } .pos-item-options-toggle i:last-child{font-size:8px;transition:transform .18s ease} .pos-item-options-toggle.is-open i:last-child{transform:rotate(180deg)} .pos-item-options-toggle:hover{border-color:var(--primary-border-strong);background:var(--primary-soft)} /* Options now occupy the complete cart width instead of squeezing the product column. */ .pos-line-options-panel{ margin:0 2px 11px; padding:11px; border:1px solid var(--border); border-radius:12px; background:var(--surface-soft); } .pos-line-options-panel[hidden]{display:none!important} .pos-line-options-panel .pos-line-option-grid{padding:0;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px} .pos-line-options-panel .pos-line-option-grid label>span{font-size:9.75px;font-weight:750;color:var(--muted)} .pos-line-options-panel .pos-line-option-grid input, .pos-line-options-panel .pos-line-option-grid select{height:39px;font-size:11.5px;font-weight:700;background:var(--surface)} .pos-line-options-panel .pos-line-tracking{margin:10px -11px -11px;padding:11px;border-radius:0 0 11px 11px} /* Checkout is a real card with breathing room on every side. */ .pos-checkout-dock{ flex:0 0 auto; min-height:154px; margin:0 0 2px!important; padding:14px 16px!important; border:1px solid var(--border)!important; border-radius:16px!important; background:var(--surface)!important; box-shadow:0 7px 22px rgba(15,23,42,.065)!important; overflow:hidden; } .pos-dock-summary{padding:2px 17px 2px 2px!important} .pos-dock-payment{padding:2px 17px!important} .pos-dock-actions{padding:2px 2px 2px 17px!important;min-width:0} .pos-checkout-dock .pos-grand-total{padding:0 2px 5px} .pos-checkout-dock .pos-grand-total strong{font-size:30px} .pos-dock-secondary-actions{gap:8px} .pos-checkout-dock .pos-complete-sale{border-radius:10px} /* Full-screen keeps the same padded dock rather than reverting to edge-to-edge. */ body.pos-focus .pos-checkout-dock{margin:0 0 2px!important;padding:14px 16px!important} @media(max-width:1500px) and (min-width:1051px){ .pos-cart-product b{font-size:12.5px} .pos-cart-product small{font-size:9.75px} .pos-cart-item-actions{gap:8px} .pos-cart-item-actions .pos-terminal-qty{width:114px;grid-template-columns:32px 50px 32px} .pos-item-options-toggle{min-width:86px;padding:0 8px} .pos-checkout-dock{padding:12px 13px!important} .pos-dock-summary{padding-right:13px!important} .pos-dock-payment{padding-left:13px!important;padding-right:13px!important} .pos-dock-actions{padding-left:13px!important} } @media(max-width:1050px){ .pos-checkout-dock{margin:10px 0 0!important;padding:14px!important;border-radius:16px!important} .pos-dock-summary,.pos-dock-payment{padding:0 0 13px!important;border-right:0!important;border-bottom:1px solid var(--border)} .pos-dock-actions{padding:0!important} body.pos-focus .pos-checkout-dock{margin:10px 0 0!important;padding:14px!important} } @media(max-width:600px){ .pos-cart-line-main{grid-template-columns:46px minmax(0,1fr) minmax(72px,auto);gap:8px;padding-top:10px} .pos-cart-thumb{width:46px;height:46px} .pos-cart-product b{font-size:12.5px} .pos-cart-product small{font-size:10px} .pos-cart-line-end>strong{font-size:12.5px} .pos-cart-item-actions{grid-template-columns:1fr auto 1fr;gap:7px;padding-bottom:9px} .pos-cart-item-actions .pos-terminal-qty{width:112px;grid-template-columns:31px 50px 31px} .pos-item-options-toggle{min-width:38px;width:38px;padding:0} .pos-item-options-toggle span{display:none} .pos-line-options-panel .pos-line-option-grid{grid-template-columns:1fr} .pos-checkout-dock{padding:13px!important} .pos-checkout-dock .pos-grand-total strong{font-size:29px} } /* V32.1 — keep the checkout card visibly inset from the POS workspace edges. */ @media(min-width:1051px){ .pos-checkout-dock{width:calc(100% - 12px);margin:0 6px 6px!important;align-self:center} body.pos-focus .pos-checkout-dock{width:calc(100% - 12px);margin:0 6px 6px!important} } /* ========================================================= V33 — POS cart polish, clean categories, safe card hover, and in-fullscreen secure invoice preview. Checkout/footer intentionally unchanged. ========================================================= */ /* Category navigation: names only for a calmer retail POS toolbar. */ .pos-category-strip button{gap:0!important} .pos-category-strip button i{display:none!important} /* Product cards should never slide underneath neighbouring grid items. */ .pos-product-grid{padding:4px 6px 8px 4px!important} .pos-product-card{position:relative;z-index:1;isolation:isolate;outline:0} .pos-product-card:hover:not(.is-out){ transform:none!important; z-index:8; border-color:var(--primary-border-strong)!important; box-shadow:0 8px 22px rgba(15,23,42,.10),0 0 0 1px color-mix(in srgb,var(--primary) 12%,transparent)!important; } .pos-product-card:focus{outline:none} .pos-product-card:focus-visible{z-index:9;outline:2px solid var(--primary);outline-offset:2px} /* Reference-matched cart row: thumbnail + details/qty + amount/remove. */ .pos-cart-lines{padding:0 13px 10px!important} .pos-cart-line{overflow:visible!important} .pos-cart-line-main{ display:grid!important; grid-template-columns:58px minmax(0,1fr) minmax(88px,auto)!important; gap:11px!important; align-items:center!important; padding:11px 0!important; } .pos-cart-thumb{width:58px!important;height:58px!important;border-radius:11px!important;align-self:center} .pos-cart-product{display:flex;flex-direction:column;min-width:0;align-self:center!important;gap:2px!important} .pos-cart-product b{font-size:13px!important;line-height:1.25!important;font-weight:800!important} .pos-cart-product small{font-size:10px!important;line-height:1.3!important} .pos-cart-line-end{align-self:stretch!important;display:flex!important;flex-direction:column!important;align-items:flex-end!important;justify-content:space-between!important;gap:8px!important} .pos-cart-line-end .pos-line-remove{width:31px!important;height:31px!important;border-radius:9px!important} .pos-cart-line-end>strong{font-size:13.5px!important;line-height:1.15!important;font-weight:850!important;padding-bottom:3px!important} /* Quantity is centered inside the product/details column, matching the reference. */ .pos-cart-product-controls{ width:100%; min-height:34px; margin-top:6px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:7px; } .pos-cart-product-controls .pos-terminal-qty{ grid-column:2; justify-self:center; width:108px!important; height:31px!important; grid-template-columns:31px 46px 31px!important; border-radius:8px!important; } .pos-cart-product-controls .pos-terminal-qty button{font-size:14px!important;background:var(--primary-soft-2)!important} .pos-cart-product-controls .pos-terminal-qty input{font-size:11.25px!important;line-height:31px!important;font-weight:800!important;background:var(--surface)!important} .pos-cart-product-controls .pos-item-options-toggle{ position:static!important; grid-column:3!important; justify-self:end!important; min-width:31px!important; width:31px!important; height:31px!important; padding:0!important; border-radius:8px!important; display:grid!important; place-items:center!important; font-size:10.5px!important; } .pos-cart-product-controls .pos-item-options-toggle i{font-size:10px!important} .pos-cart-product-controls .pos-item-options-toggle i:last-child{display:none!important} /* Item editor remains full width below the compact row. */ .pos-line-options-panel{margin:0 0 10px!important;padding:11px!important;border-radius:11px!important} /* Secure preview stays inside the POS document when POS is in focus/full-screen mode. */ .pos-secure-preview-overlay{ position:fixed; inset:0; z-index:2147483000; background:#eef2f7; } .pos-secure-preview-overlay[hidden]{display:none!important} .pos-secure-preview-overlay iframe{display:block;width:100%;height:100%;border:0;background:#eef2f7} body.pos-preview-open{overflow:hidden!important} @media(max-width:1500px) and (min-width:1051px){ .pos-cart-line-main{grid-template-columns:52px minmax(0,1fr) minmax(82px,auto)!important;gap:9px!important} .pos-cart-thumb{width:52px!important;height:52px!important} .pos-cart-product b{font-size:12.5px!important} .pos-cart-product small{font-size:9.75px!important} .pos-cart-product-controls .pos-terminal-qty{width:102px!important;grid-template-columns:29px 44px 29px!important} .pos-cart-product-controls .pos-item-options-toggle{width:30px!important;min-width:30px!important;height:30px!important} } @media(max-width:600px){ .pos-cart-line-main{grid-template-columns:48px minmax(0,1fr) minmax(72px,auto)!important;gap:8px!important;padding:10px 0!important} .pos-cart-thumb{width:48px!important;height:48px!important} .pos-cart-product b{font-size:12.5px!important} .pos-cart-product small{font-size:10px!important} .pos-cart-line-end>strong{font-size:12.5px!important} .pos-cart-product-controls{margin-top:5px;gap:5px} .pos-cart-product-controls .pos-terminal-qty{width:100px!important;grid-template-columns:29px 42px 29px!important} .pos-cart-product-controls .pos-item-options-toggle{width:29px!important;min-width:29px!important;height:29px!important} .pos-line-options-panel .pos-line-option-grid{grid-template-columns:1fr!important} } /* ========================================================= V34 — POS cart alignment refinement Matches the approved reference more closely: qty + options grouped at left, price at right, and tracking visible within the expanded options area. ========================================================= */ .pos-cart-line{padding:0!important} .pos-cart-line-main.pos-cart-line-ref{ display:grid!important; grid-template-columns:56px minmax(0,1fr) 96px!important; gap:12px!important; align-items:center!important; padding:14px 0!important; } .pos-cart-line-ref .pos-cart-thumb{ width:56px!important; height:56px!important; border-radius:12px!important; align-self:start; } .pos-cart-line-ref .pos-cart-product{ display:flex!important; flex-direction:column!important; align-items:flex-start!important; gap:7px!important; min-width:0!important; } .pos-cart-line-ref .pos-cart-product-top, .pos-cart-line-ref .pos-cart-title-wrap{ width:100%; min-width:0; } .pos-cart-line-ref .pos-cart-product b{ display:block!important; font-size:12.75px!important; font-weight:780!important; line-height:1.28!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; } .pos-cart-line-ref .pos-cart-product small{ display:block!important; margin-top:2px!important; font-size:10px!important; line-height:1.35!important; color:var(--muted)!important; } .pos-cart-line-ref .pos-cart-quick-controls{ display:flex!important; align-items:center!important; justify-content:flex-start!important; gap:8px!important; margin-top:0!important; flex-wrap:wrap!important; } .pos-cart-line-ref .pos-terminal-qty{ width:138px!important; height:34px!important; display:grid!important; grid-template-columns:36px 66px 36px!important; border-radius:9px!important; } .pos-cart-line-ref .pos-terminal-qty button, .pos-cart-line-ref .pos-terminal-qty input{ height:34px!important; } .pos-cart-line-ref .pos-terminal-qty input{ text-align:center!important; font-size:11px!important; font-weight:760!important; padding:0 4px!important; } .pos-item-options-toggle{ height:34px!important; min-width:88px!important; padding:0 10px!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; gap:6px!important; border:1px solid var(--primary-border)!important; border-radius:9px!important; background:var(--surface-soft)!important; color:var(--primary)!important; font-size:10.5px!important; font-weight:760!important; line-height:1!important; white-space:nowrap!important; } .pos-item-options-toggle i:first-child{font-size:11px!important} .pos-item-options-toggle i:last-child{font-size:9px!important;display:inline-block!important} .pos-item-options-toggle:hover, .pos-item-options-toggle.is-open{ background:var(--primary-soft)!important; border-color:var(--primary-border-strong)!important; } .pos-cart-line-ref .pos-cart-line-end{ align-self:stretch!important; display:flex!important; flex-direction:column!important; align-items:flex-end!important; justify-content:space-between!important; gap:10px!important; min-width:90px!important; } .pos-cart-line-ref .pos-cart-line-end .pos-line-remove{ width:31px!important; height:31px!important; border-radius:10px!important; } .pos-cart-line-ref .pos-cart-line-end strong{ font-size:13px!important; font-weight:820!important; color:var(--text-strong)!important; white-space:nowrap!important; } .pos-line-options-panel{ margin:0 0 12px 68px!important; padding:11px!important; border:1px solid var(--primary-border)!important; border-radius:12px!important; background:var(--surface-soft)!important; } .pos-line-option-grid{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:10px!important; margin-top:0!important; padding:0!important; border:0!important; background:transparent!important; } .pos-line-option-grid label{display:grid!important;gap:5px!important;font-size:10px!important} .pos-line-option-grid label>span{font-size:9px!important;font-weight:760!important;color:var(--muted)!important} .pos-line-option-grid input,.pos-line-option-grid select{height:38px!important;font-size:10.5px!important;border-radius:9px!important} .pos-line-tracking{ margin-top:10px!important; padding:10px!important; border:1px solid var(--primary-border)!important; border-radius:11px!important; background:var(--surface)!important; } .pos-line-tracking-title{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;margin-bottom:8px!important} .pos-line-tracking-title span{font-size:10px!important;font-weight:800!important;color:var(--text-strong)!important} .pos-line-tracking-title small{font-size:8.75px!important;color:var(--muted)!important} .pos-line-tracking label{display:grid!important;gap:5px!important;margin-bottom:8px!important} .pos-line-tracking label:last-child{margin-bottom:0!important} .pos-line-tracking label>span{font-size:9px!important;font-weight:760!important;color:var(--muted)!important} .pos-line-tracking label>span em{font-style:normal!important;color:var(--primary)!important;font-weight:800!important} .pos-line-tracking small{font-size:8.5px!important;color:var(--muted)!important} .pos-line-tracking select,.pos-line-tracking input{min-height:38px!important;border-radius:9px!important;font-size:10.25px!important} .pos-line-tracking select[multiple]{min-height:92px!important;padding:8px!important} @media (max-width:900px){ .pos-cart-line-main.pos-cart-line-ref{grid-template-columns:52px minmax(0,1fr) 84px!important;gap:10px!important} .pos-cart-line-ref .pos-cart-thumb{width:52px!important;height:52px!important} .pos-cart-line-ref .pos-terminal-qty{width:126px!important;grid-template-columns:34px 58px 34px!important} .pos-item-options-toggle{min-width:84px!important;padding:0 9px!important} .pos-line-options-panel{margin-left:62px!important} } @media (max-width:600px){ .pos-cart-line-main.pos-cart-line-ref{grid-template-columns:48px minmax(0,1fr) 76px!important;gap:8px!important;padding:12px 0!important} .pos-cart-line-ref .pos-cart-thumb{width:48px!important;height:48px!important} .pos-cart-line-ref .pos-cart-product b{font-size:12px!important} .pos-cart-line-ref .pos-cart-product small{font-size:9.75px!important} .pos-cart-line-ref .pos-terminal-qty{width:114px!important;grid-template-columns:30px 54px 30px!important} .pos-item-options-toggle{min-width:78px!important;height:32px!important;font-size:10px!important;padding:0 8px!important} .pos-line-options-panel{margin:0 0 10px 56px!important;padding:10px!important} .pos-line-option-grid{grid-template-columns:1fr!important} } /* ========================================================= V35 — POS cart reference-match redesign Keeps checkout footer untouched. Rebuilds only cart rows and expandable item editor to match the supplied reference. ========================================================= */ .pos-cart-lines{padding:0 14px 10px!important} .pos-cart-line-v35{ margin:0!important; border:0!important; border-bottom:1px solid var(--border)!important; border-radius:0!important; background:var(--surface)!important; box-shadow:none!important; overflow:visible!important; } .pos-cart-line-v35:last-child{border-bottom:0!important} .pos-cart-line-main.pos-cart-line-ref-v35{ display:grid!important; grid-template-columns:58px minmax(0,1fr) 94px!important; gap:12px!important; align-items:center!important; padding:12px 0!important; } .pos-cart-line-v35 .pos-cart-thumb{ width:58px!important; height:58px!important; border-radius:11px!important; align-self:center!important; background:var(--surface-soft)!important; overflow:hidden!important; } .pos-cart-line-v35 .pos-cart-thumb img{width:100%!important;height:100%!important;object-fit:cover!important} .pos-cart-product-v35{ min-width:0!important; display:flex!important; flex-direction:column!important; align-items:flex-start!important; gap:2px!important; } .pos-cart-product-v35>b{ max-width:100%!important; font-size:12.5px!important; line-height:1.25!important; font-weight:800!important; color:var(--text-strong)!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; } .pos-cart-product-v35>small{ max-width:100%!important; margin-top:1px!important; font-size:9.75px!important; line-height:1.3!important; font-weight:550!important; color:var(--muted)!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; } .pos-cart-row-actions{ display:flex!important; align-items:center!important; justify-content:flex-start!important; gap:10px!important; margin-top:6px!important; min-width:0!important; } .pos-terminal-qty-v35{ width:108px!important; height:32px!important; display:grid!important; grid-template-columns:31px 46px 31px!important; align-items:stretch!important; overflow:hidden!important; border:1px solid var(--border)!important; border-radius:8px!important; background:var(--surface)!important; } .pos-terminal-qty-v35 button, .pos-terminal-qty-v35 input{ width:100%!important; min-width:0!important; height:30px!important; min-height:30px!important; margin:0!important; border:0!important; border-radius:0!important; box-shadow:none!important; } .pos-terminal-qty-v35 button{ display:grid!important; place-items:center!important; padding:0!important; background:var(--primary-soft-2)!important; color:var(--primary)!important; font-size:14px!important; font-weight:800!important; line-height:1!important; cursor:pointer!important; } .pos-terminal-qty-v35 button:first-child{border-right:1px solid var(--border)!important} .pos-terminal-qty-v35 button:last-child{border-left:1px solid var(--border)!important} .pos-terminal-qty-v35 input{ appearance:textfield!important; -moz-appearance:textfield!important; padding:0!important; text-align:center!important; vertical-align:middle!important; line-height:30px!important; font-size:11.5px!important; font-weight:800!important; font-family:inherit!important; color:var(--text-strong)!important; background:var(--surface)!important; } .pos-terminal-qty-v35 input::-webkit-outer-spin-button, .pos-terminal-qty-v35 input::-webkit-inner-spin-button{-webkit-appearance:none!important;margin:0!important} .pos-cart-unit-price{ display:inline-flex!important; align-items:center!important; min-height:32px!important; font-size:11px!important; line-height:1!important; font-weight:800!important; color:var(--text-strong)!important; white-space:nowrap!important; } .pos-cart-line-end-v35{ align-self:stretch!important; display:grid!important; grid-template-columns:minmax(0,1fr) 34px!important; align-items:center!important; gap:8px!important; min-width:0!important; } .pos-cart-line-end-v35>strong{ justify-self:end!important; align-self:center!important; padding:0!important; font-size:13px!important; line-height:1.15!important; font-weight:850!important; color:var(--text-strong)!important; white-space:nowrap!important; } .pos-cart-expand{ justify-self:end!important; width:32px!important; height:32px!important; display:grid!important; place-items:center!important; padding:0!important; border:1px solid var(--border)!important; border-radius:9px!important; background:var(--surface-soft)!important; color:var(--primary)!important; font-size:10px!important; cursor:pointer!important; transition:border-color .16s ease,background .16s ease,box-shadow .16s ease!important; } .pos-cart-expand:hover,.pos-cart-expand.is-open{ border-color:var(--primary-border)!important; background:var(--primary-soft)!important; box-shadow:0 0 0 3px var(--primary-ring)!important; } .pos-line-options-panel-v35{ margin:0 0 12px 70px!important; padding:12px!important; border:1px solid var(--border)!important; border-radius:12px!important; background:var(--surface-soft)!important; box-shadow:none!important; } .pos-line-option-grid-v35{ display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:9px!important; margin:0!important; padding:0!important; border:0!important; background:transparent!important; } .pos-line-option-grid-v35 label{display:grid!important;gap:5px!important;min-width:0!important} .pos-line-option-grid-v35 label>span{ font-size:8.75px!important; line-height:1.2!important; font-weight:800!important; color:var(--muted)!important; } .pos-line-option-grid-v35 input, .pos-line-option-grid-v35 select{ height:38px!important; min-height:38px!important; font-size:10.5px!important; font-weight:700!important; border-radius:9px!important; } .pos-money-input{ display:grid!important; grid-template-columns:30px minmax(0,1fr)!important; height:38px!important; border:1px solid var(--border)!important; border-radius:9px!important; overflow:hidden!important; background:var(--surface)!important; } .pos-money-input>span{display:grid!important;place-items:center!important;background:var(--surface-soft)!important;border-right:1px solid var(--border)!important;font-size:10px!important;font-weight:800!important;color:var(--text-strong)!important} .pos-money-input input{border:0!important;border-radius:0!important;box-shadow:none!important;height:36px!important} .pos-line-options-panel-v35 .pos-line-tracking{ margin:10px 0 0!important; padding:10px!important; border:1px solid var(--primary-border)!important; border-radius:10px!important; background:var(--surface)!important; } .pos-line-options-panel-v35 .pos-line-tracking-title{margin-bottom:8px!important} .pos-line-options-panel-v35 .pos-line-tracking-title span{font-size:9.5px!important;font-weight:800!important} .pos-line-options-panel-v35 .pos-line-tracking-title small{font-size:8.5px!important} .pos-line-options-panel-v35 .pos-line-tracking label{display:grid!important;gap:5px!important;margin-top:7px!important} .pos-line-options-panel-v35 .pos-line-tracking label>span{font-size:8.75px!important;font-weight:800!important;color:var(--muted)!important} .pos-line-options-panel-v35 .pos-line-tracking select{width:100%!important;min-height:38px!important;font-size:10px!important;border-radius:9px!important} .pos-line-options-panel-v35 .pos-line-tracking select[multiple]{min-height:88px!important;padding:7px!important} .pos-line-options-panel-v35 .pos-line-tracking small{font-size:8.25px!important;color:var(--muted)!important} .pos-line-editor-summary{ display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:8px!important; margin-top:10px!important; padding:9px 10px!important; border:1px solid var(--border)!important; border-radius:10px!important; background:var(--surface)!important; } .pos-line-editor-summary>div{display:grid!important;gap:3px!important;min-width:0!important} .pos-line-editor-summary span{font-size:8px!important;font-weight:750!important;color:var(--muted)!important} .pos-line-editor-summary b{font-size:10.75px!important;font-weight:850!important;color:var(--primary)!important;white-space:nowrap!important} .pos-line-editor-actions{ display:grid!important; grid-template-columns:1fr 1fr!important; gap:8px!important; margin-top:10px!important; } .pos-line-editor-actions button{ height:38px!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; gap:7px!important; border-radius:9px!important; font:inherit!important; font-size:10px!important; font-weight:800!important; cursor:pointer!important; } .pos-line-editor-remove{border:1px solid color-mix(in srgb,var(--danger) 28%,var(--border))!important;background:color-mix(in srgb,var(--danger) 6%,var(--surface))!important;color:var(--danger)!important} .pos-line-editor-done{border:1px solid var(--primary)!important;background:var(--primary)!important;color:#fff!important} @media(max-width:1500px) and (min-width:1051px){ .pos-cart-line-main.pos-cart-line-ref-v35{grid-template-columns:52px minmax(0,1fr) 88px!important;gap:10px!important} .pos-cart-line-v35 .pos-cart-thumb{width:52px!important;height:52px!important} .pos-terminal-qty-v35{width:102px!important;grid-template-columns:29px 44px 29px!important} .pos-cart-line-end-v35{grid-template-columns:minmax(0,1fr) 32px!important;gap:6px!important} .pos-line-options-panel-v35{margin-left:62px!important} } @media(max-width:700px){ .pos-cart-line-main.pos-cart-line-ref-v35{grid-template-columns:48px minmax(0,1fr) 78px!important;gap:8px!important;padding:11px 0!important} .pos-cart-line-v35 .pos-cart-thumb{width:48px!important;height:48px!important} .pos-cart-product-v35>b{font-size:11.75px!important} .pos-cart-product-v35>small{font-size:9.25px!important} .pos-cart-row-actions{gap:7px!important;margin-top:5px!important} .pos-terminal-qty-v35{width:98px!important;grid-template-columns:28px 42px 28px!important} .pos-cart-unit-price{font-size:10px!important} .pos-cart-line-end-v35{grid-template-columns:minmax(0,1fr) 30px!important;gap:5px!important} .pos-cart-line-end-v35>strong{font-size:11.5px!important} .pos-cart-expand{width:30px!important;height:30px!important} .pos-line-options-panel-v35{margin:0 0 10px 56px!important;padding:10px!important} .pos-line-option-grid-v35{grid-template-columns:1fr!important} .pos-line-editor-summary{grid-template-columns:1fr 1fr!important} .pos-line-editor-summary>div:last-child{grid-column:1/-1!important} } @media(max-width:440px){ .pos-cart-line-main.pos-cart-line-ref-v35{grid-template-columns:44px minmax(0,1fr) 70px!important} .pos-cart-line-v35 .pos-cart-thumb{width:44px!important;height:44px!important} .pos-terminal-qty-v35{width:94px!important;grid-template-columns:27px 40px 27px!important} .pos-cart-unit-price{display:none!important} .pos-line-options-panel-v35{margin-left:52px!important} .pos-line-editor-actions{grid-template-columns:1fr!important} } /* ========================================================= V36 — POS/Invoice tracking editor reference match Compact retail item editor with serial search, batch row, totals strip and clear update/cancel actions. ========================================================= */ .pos-line-options-panel-v35{ position:relative!important; margin:0 0 12px!important; padding:13px!important; border:1px solid var(--border)!important; border-radius:13px!important; background:var(--surface)!important; box-shadow:0 7px 20px rgba(15,23,42,.045)!important; } .pos-line-option-grid-v35{ grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:10px!important; } .pos-line-option-grid-v35 label>span{ font-size:9.5px!important; color:var(--text)!important; font-weight:780!important; } .pos-line-option-grid-v35 input, .pos-line-option-grid-v35 select, .pos-money-input{ height:41px!important; min-height:41px!important; border-radius:9px!important; font-size:11px!important; font-weight:680!important; } .pos-money-input input{height:39px!important} /* Reference-style tracking fields: no oversized Tracking Required box. */ .pos-track-editor-v36{ display:grid; gap:12px; margin-top:12px; } .pos-track-field-v36{ display:grid; gap:6px; min-width:0; } .pos-track-field-v36>label{ display:flex; align-items:center; justify-content:flex-start; gap:4px; font-size:10.5px; line-height:1.2; font-weight:800; color:var(--text-strong); } .pos-track-field-v36>label span{ font-size:9px; font-weight:650; color:var(--muted); } .pos-track-search{ display:grid; grid-template-columns:34px minmax(0,1fr) 44px; align-items:center; min-height:42px; border:1px solid var(--border); border-radius:10px; background:var(--surface); overflow:hidden; transition:border-color .16s ease,box-shadow .16s ease; } .pos-track-search:focus-within{ border-color:var(--primary-border-strong); box-shadow:0 0 0 3px var(--primary-ring); } .pos-track-search>i{ display:grid; place-items:center; color:var(--muted); font-size:12px; } .pos-track-search input{ width:100%; height:40px!important; min-height:40px!important; padding:0 6px!important; border:0!important; box-shadow:none!important; outline:0!important; background:transparent!important; color:var(--text-strong)!important; font-size:11px!important; font-weight:600!important; } .pos-track-search button{ width:44px; height:40px; display:grid; place-items:center; border:0; border-left:1px solid var(--border); background:var(--primary-soft-2); color:var(--primary); font-size:13px; cursor:pointer; } .pos-track-serial-chips{ display:flex; flex-wrap:wrap; gap:6px; } .pos-track-serial-chips button{ min-height:28px; display:inline-flex; align-items:center; gap:6px; padding:0 8px; border:1px solid var(--primary-border); border-radius:8px; background:var(--primary-soft-2); color:var(--primary); font:inherit; font-size:9px; font-weight:750; cursor:pointer; } .pos-track-empty{ display:block; font-size:8.75px; color:var(--muted); } .pos-track-batch-row{ display:grid; grid-template-columns:minmax(0,1fr) 145px; gap:8px; align-items:stretch; } .pos-track-batch-row>select{ width:100%!important; height:42px!important; min-height:42px!important; border-radius:10px!important; font-size:10.75px!important; font-weight:650!important; } .pos-track-batch-meta{ display:grid; grid-template-columns:auto auto; align-items:center; justify-content:space-between; gap:7px; min-height:42px; padding:0 10px; border-radius:10px; background:var(--surface-soft); color:var(--muted); font-size:8.75px; white-space:nowrap; } .pos-track-batch-meta b{color:var(--text-strong);font-size:9.5px} .pos-track-batch-meta a{color:var(--primary);font-size:9px;font-weight:800;text-decoration:none} .pos-track-warning{ display:flex; align-items:center; gap:6px; font-size:8.75px; color:var(--warning-text,#a16207); } .pos-line-editor-summary{ gap:0!important; padding:0!important; overflow:hidden!important; border:1px solid var(--primary-border)!important; border-radius:11px!important; background:var(--primary-soft-2)!important; } .pos-line-editor-summary>div{ min-height:58px!important; align-content:center!important; gap:4px!important; padding:10px 12px!important; border-right:1px solid var(--primary-border)!important; } .pos-line-editor-summary>div:last-child{border-right:0!important;text-align:right!important} .pos-line-editor-summary span{font-size:8.75px!important;font-weight:720!important;color:var(--muted)!important} .pos-line-editor-summary b{font-size:12px!important;font-weight:850!important;color:var(--primary)!important} .pos-line-editor-summary>div:last-child b{font-size:13px!important} .pos-line-editor-actions{gap:9px!important} .pos-line-editor-actions button{height:42px!important;font-size:10.75px!important;border-radius:10px!important} .pos-line-editor-cancel{border:1px solid var(--primary-border)!important;background:var(--surface)!important;color:var(--primary)!important} .pos-line-editor-done{box-shadow:0 5px 13px color-mix(in srgb,var(--primary) 19%,transparent)!important} /* Invoice/Create Sale tracking now mirrors the POS tracking field language. */ .billing-tracking-v36{ width:min(500px,100%); max-width:500px!important; min-width:280px!important; display:grid!important; gap:10px!important; margin-top:8px!important; padding:10px!important; border:1px solid var(--border)!important; border-radius:11px!important; background:var(--surface)!important; box-shadow:0 4px 13px rgba(15,23,42,.04)!important; } .billing-track-field-v36{display:grid;gap:6px;min-width:0} .billing-track-field-v36>label{display:flex;align-items:center;gap:4px;font-size:9.5px;font-weight:800;color:var(--text-strong)} .billing-track-field-v36>label span{font-size:8.25px;font-weight:650;color:var(--muted)} .billing-track-search{ display:grid; grid-template-columns:30px minmax(0,1fr) 38px; align-items:center; min-height:38px; border:1px solid var(--border); border-radius:9px; overflow:hidden; background:var(--surface); } .billing-track-search:focus-within{border-color:var(--primary-border-strong);box-shadow:0 0 0 3px var(--primary-ring)} .billing-track-search>i{display:grid;place-items:center;color:var(--muted);font-size:10px} .billing-track-search input{height:36px!important;min-height:36px!important;padding:0 5px!important;border:0!important;box-shadow:none!important;background:transparent!important;font-size:9.75px!important;font-weight:600!important} .billing-track-search button{height:36px;width:38px;border:0;border-left:1px solid var(--border);background:var(--primary-soft-2);color:var(--primary);cursor:pointer} .billing-track-serial-chips{display:flex;flex-wrap:wrap;gap:5px} .billing-track-serial-chips button{min-height:25px;display:inline-flex;align-items:center;gap:5px;padding:0 7px;border:1px solid var(--primary-border);border-radius:7px;background:var(--primary-soft-2);color:var(--primary);font:inherit;font-size:8px;font-weight:750;cursor:pointer} .billing-track-empty{font-size:7.75px;color:var(--muted)} .billing-track-batch-row{display:grid;grid-template-columns:minmax(0,1fr) 120px;gap:7px;align-items:stretch} .billing-track-batch-row .tracking-select{height:38px!important;min-height:38px!important;font-size:9px!important;border-radius:9px!important} .billing-track-batch-meta{display:grid;grid-template-columns:1fr;align-content:center;gap:2px;padding:5px 8px;border-radius:9px;background:var(--surface-soft);font-size:7.75px;color:var(--muted)} .billing-track-batch-meta b{font-size:8.5px;color:var(--text-strong)} .billing-track-batch-meta a{font-size:8px;font-weight:800;color:var(--primary);text-decoration:none} .billing-track-warning{display:flex;align-items:center;gap:5px;font-size:7.75px;color:var(--warning-text,#a16207)} @media(max-width:700px){ .pos-line-option-grid-v35{grid-template-columns:1fr!important} .pos-track-batch-row{grid-template-columns:1fr!important} .pos-track-batch-meta{grid-template-columns:1fr auto!important} .pos-line-editor-summary{grid-template-columns:1fr 1fr!important} .pos-line-editor-summary>div:nth-child(2){border-right:0!important} .pos-line-editor-summary>div:last-child{grid-column:1/-1!important;border-top:1px solid var(--primary-border)!important;text-align:left!important} .billing-tracking-v36{min-width:0!important;width:100%!important} .billing-track-batch-row{grid-template-columns:1fr!important} .billing-track-batch-meta{grid-template-columns:1fr auto!important} } /* ========================================================= V37 — Unified product tracking UI + purchase table parity ========================================================= */ /* Keep tracking controls above line-table clipping and custom dropdown layers. */ .pos-items-panel,.pos-lines,.pos-sale-table,.pos-sale-table tbody,.pos-sale-table tr,.pos-sale-table td, .purchase-products-panel,.purchase-lines,.purchase-table,.purchase-table tbody,.purchase-table tr,.purchase-table td{ overflow:visible!important; } .billing-tracking-card,.unified-tracking-card,.return-tracking-card{position:relative;z-index:12} .billing-track-field-v36 select[data-native="1"],.return-track-batch[data-native="1"]{position:relative;z-index:30} /* Shared tracking card visual language across sale, purchase and returns. */ .billing-tracking-card,.unified-tracking-card,.unified-return-tracking{ margin-top:8px!important; border:1px solid var(--primary-border)!important; border-radius:12px!important; background:var(--surface)!important; box-shadow:0 4px 14px rgba(15,23,42,.04)!important; } .billing-track-field-v36,.unified-tracking-body{padding:10px!important} .billing-track-field-v36+ .billing-track-field-v36{border-top:1px solid var(--border)!important} .billing-track-field-v36 label,.return-tracking-card label{ display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important; margin:0 0 7px!important;font-size:10.5px!important;font-weight:800!important;color:var(--text-strong)!important; } .billing-track-field-v36 label span,.return-tracking-card label span{font-size:9px!important;font-weight:700!important;color:var(--primary)!important} .billing-track-search,.pos-track-search{ min-height:40px!important;border:1px solid var(--border)!important;border-radius:10px!important;background:var(--surface)!important; display:grid!important;grid-template-columns:34px minmax(0,1fr) 40px!important;align-items:center!important;overflow:hidden!important; } .billing-track-search>i,.pos-track-search>i{display:grid!important;place-items:center!important;color:var(--muted)!important} .billing-track-search input,.pos-track-search input{height:40px!important;border:0!important;outline:0!important;background:transparent!important;font-size:11px!important;padding:0 4px!important;box-shadow:none!important} .billing-track-search button,.pos-track-search button{height:40px!important;border:0!important;border-left:1px solid var(--border)!important;background:var(--primary-soft-2)!important;color:var(--primary)!important;display:grid!important;place-items:center!important} .billing-track-serial-chips,.pos-track-serial-chips,.tracking-serial-chips{display:flex!important;flex-wrap:wrap!important;gap:6px!important;margin-top:7px!important} .billing-track-serial-chips button,.pos-track-serial-chips button,.tracking-serial-chips button{ min-height:28px!important;padding:0 8px!important;border:1px solid var(--primary-border)!important;border-radius:8px!important;background:var(--primary-soft-2)!important;color:var(--primary)!important;font-size:9.5px!important;font-weight:750!important;display:inline-flex!important;align-items:center!important;gap:6px!important; } .billing-track-empty,.pos-track-empty,.tracking-empty{display:block!important;margin-top:6px!important;font-size:9px!important;color:var(--muted)!important} .billing-track-batch-row,.pos-track-batch-row{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:8px!important;align-items:stretch!important} .billing-track-batch-row select,.pos-track-batch-row select,.return-track-batch{ min-height:40px!important;height:40px!important;width:100%!important;border:1px solid var(--border)!important;border-radius:10px!important;background:var(--surface)!important;color:var(--text)!important;font-size:10.5px!important;font-weight:650!important;padding:0 34px 0 10px!important; } .billing-track-batch-meta,.pos-track-batch-meta{min-width:112px!important;padding:5px 9px!important;border-radius:10px!important;background:var(--surface-soft)!important;display:grid!important;align-content:center!important;gap:2px!important} .billing-track-batch-meta span,.pos-track-batch-meta span{font-size:8.5px!important;color:var(--muted)!important}.billing-track-batch-meta b,.pos-track-batch-meta b{color:var(--text-strong)!important} .billing-track-batch-meta a,.pos-track-batch-meta a{font-size:8.5px!important;font-weight:800!important;color:var(--primary)!important;text-decoration:none!important} .billing-track-warning,.pos-track-warning{display:block!important;margin-top:6px!important;font-size:8.8px!important;color:var(--danger)!important} /* Purchase now follows Create Sale line-table hierarchy. */ .purchase-table{width:100%!important;border-collapse:separate!important;border-spacing:0!important;table-layout:auto!important} .purchase-table thead th{height:42px!important;padding:10px 12px!important;background:var(--surface-soft)!important;color:var(--muted)!important;font-size:10.5px!important;font-weight:800!important;letter-spacing:.025em!important;text-transform:uppercase!important;white-space:nowrap!important;border-bottom:1px solid var(--border)!important} .purchase-table tbody td{padding:12px!important;vertical-align:middle!important;font-size:11px!important;border-bottom:1px solid var(--border)!important;background:var(--surface)!important} .purchase-table tbody tr:last-child td{border-bottom:0!important} .purchase-table .pos-product-cell{min-width:300px!important;align-items:flex-start!important}.purchase-table .product-avatar{width:42px!important;height:42px!important;flex:0 0 42px!important;border-radius:10px!important} .purchase-table .pos-product-cell>span:last-child{min-width:0!important;flex:1!important}.purchase-table .pos-product-cell b{font-size:11.75px!important;line-height:1.3!important}.purchase-table .pos-product-cell small{font-size:9.5px!important;line-height:1.35!important;color:var(--muted)!important} .purchase-line-input{width:110px!important;min-height:38px!important;border:1px solid var(--border)!important;border-radius:9px!important;padding:0 10px!important;font-size:10.5px!important} .purchase-table .pos-qty input{line-height:normal!important;display:flex!important;align-items:center!important;text-align:center!important} .purchase-table .pos-discount input,.purchase-table .pos-tax input{font-size:10.5px!important} .unified-tracking-toggle{width:100%!important;min-height:34px!important;padding:0 9px!important;border:0!important;border-radius:9px!important;background:var(--primary-soft-2)!important;color:var(--primary)!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;font:inherit!important;cursor:pointer!important} .unified-tracking-toggle>span{display:flex!important;align-items:center!important;gap:6px!important;font-size:9.5px!important;font-weight:800!important}.unified-tracking-toggle small{font-size:8.5px!important;color:var(--muted)!important;font-weight:650!important}.unified-tracking-body{border-top:1px solid var(--border)!important} .purchase-batch-grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important}.purchase-batch-grid input{min-height:40px!important;border:1px solid var(--border)!important;border-radius:10px!important;padding:0 10px!important;font-size:10.5px!important} /* Return tracking uses the same card hierarchy. */ .unified-return-tracking{padding:10px!important;min-width:260px!important}.return-tracking-badges{display:flex!important;flex-wrap:wrap!important;gap:5px!important;margin-bottom:8px!important}.return-tracking-badges span{display:inline-flex!important;align-items:center!important;gap:5px!important;padding:4px 7px!important;border-radius:999px!important;background:var(--primary-soft-2)!important;color:var(--primary)!important;font-size:8.5px!important;font-weight:750!important}.return-track-batch{margin-bottom:8px!important}.return-track-serials{width:100%!important;min-height:90px!important;border:1px solid var(--border)!important;border-radius:10px!important;padding:7px!important;background:var(--surface)!important;font-size:10px!important;line-height:1.45!important}.return-track-serials option{padding:5px 7px!important;border-radius:6px!important}.return-track-serials option:checked{background:var(--primary-soft)!important;color:var(--primary)!important} @media(max-width:900px){ .billing-track-batch-row,.pos-track-batch-row{grid-template-columns:1fr!important}.billing-track-batch-meta,.pos-track-batch-meta{grid-template-columns:1fr auto!important;align-items:center!important;min-width:0!important} .purchase-batch-grid{grid-template-columns:1fr!important} .purchase-table{min-width:980px!important} } .return-track-native-hidden{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important} .return-serial-picker{display:grid!important;gap:7px!important;margin-top:8px!important}.return-serial-picker>label{display:flex!important;justify-content:space-between!important;align-items:center!important;margin:0!important;font-size:10px!important;font-weight:800!important}.return-required-count{font-size:8.75px!important;color:var(--primary)!important;font-weight:800!important}.return-serial-search{min-height:40px!important;display:grid!important;grid-template-columns:32px minmax(0,1fr) 34px!important;align-items:center!important;border:1px solid var(--border)!important;border-radius:10px!important;background:var(--surface)!important;overflow:hidden!important}.return-serial-search i{display:grid!important;place-items:center!important;color:var(--muted)!important}.return-serial-search i:last-child{color:var(--primary)!important;border-left:1px solid var(--border)!important;height:100%!important}.return-serial-search input{height:40px!important;border:0!important;outline:0!important;background:transparent!important;padding:0 4px!important;font-size:10.5px!important;box-shadow:none!important}.return-serial-options{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:5px!important;max-height:116px!important;overflow:auto!important;padding:2px!important}.return-serial-options button{min-height:30px!important;padding:0 8px!important;border:1px solid var(--border)!important;border-radius:8px!important;background:var(--surface)!important;color:var(--text)!important;font:inherit!important;font-size:9.5px!important;font-weight:650!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:6px!important;text-align:left!important;cursor:pointer!important}.return-serial-options button.selected{border-color:var(--primary-border)!important;background:var(--primary-soft)!important;color:var(--primary)!important}.return-serial-chips{display:flex!important;flex-wrap:wrap!important;gap:5px!important}.return-serial-chips button{min-height:27px!important;padding:0 7px!important;border:1px solid var(--primary-border)!important;border-radius:8px!important;background:var(--primary-soft-2)!important;color:var(--primary)!important;font:inherit!important;font-size:9px!important;font-weight:750!important;display:inline-flex!important;align-items:center!important;gap:5px!important}.return-serial-chips small{font-size:8.8px!important;color:var(--muted)!important} @media(max-width:700px){.return-serial-options{grid-template-columns:1fr!important}} /* ========================================================= V38 — Smart dropdown direction / POS payment validation / Purchase header stacking safety. ========================================================= */ /* Enhanced selects are viewport popovers while open, so sticky checkout bars, purchase cards and table wrappers can never clip the option list. */ .smart-select.open.smart-select-fixed .smart-select-menu{ position:fixed!important; right:auto!important; bottom:auto!important; overflow-x:hidden!important; overflow-y:auto!important; overscroll-behavior:contain; } .smart-select.drop-up .smart-select-button > i.fa-chevron-down{transform:rotate(180deg)} .smart-select-button > i.fa-chevron-down{transition:transform .16s ease} /* Purchase supplier / branch dropdowns must always sit above the product card. */ .purchase-entry-hero{ position:relative!important; z-index:300!important; overflow:visible!important; } .purchase-entry-hero .purchase-form-top, .purchase-entry-hero .compact-field, .purchase-entry-hero .field-with-action{ overflow:visible!important; } .purchase-products-panel{ position:relative!important; z-index:1!important; } /* POS footer selectors can open upward without being clipped by the checkout dock. */ body.pos-terminal-active .pos-checkout-dock, body.pos-terminal-active .pos-dock-payment, body.pos-terminal-active .pos-dock-payment-top, body.pos-terminal-active .pos-field, body.pos-terminal-active .pos-field-with-button{ overflow:visible!important; } .bank-payment-field > span em{ font-style:normal; color:var(--danger); font-weight:850; margin-left:2px; } .bank-payment-field.is-required > small{ color:var(--primary); font-weight:700; } .smart-select.field-error .smart-select-button{ border-color:var(--danger)!important; box-shadow:0 0 0 3px color-mix(in srgb,var(--danger) 12%,transparent)!important; } /* ========================================================= V39 — Create Purchase smart-select anchoring correction. Supplier / Branch menus stay directly attached to the field, while POS and other docked controls retain viewport popovers. ========================================================= */ .purchase-entry-hero .purchase-form-top{position:relative!important;z-index:500!important;overflow:visible!important} .purchase-entry-hero .purchase-form-top>label{position:relative!important;overflow:visible!important} .purchase-entry-hero .purchase-form-top>label:has(.smart-select.open){z-index:2147482000!important} .purchase-entry-hero .purchase-form-top .smart-select{position:relative!important;overflow:visible!important} .purchase-entry-hero .purchase-form-top .smart-select.open.smart-select-anchored{z-index:2147482100!important} .purchase-entry-hero .purchase-form-top .smart-select.open.smart-select-anchored .smart-select-menu{ position:absolute!important; left:0!important; right:0!important; width:100%!important; margin:0!important; transform:none!important; box-sizing:border-box!important; z-index:2147482500!important; background:var(--surface)!important; box-shadow:0 18px 45px rgba(15,23,42,.16)!important; } .purchase-entry-hero .purchase-form-top .smart-select.open.smart-select-anchored:not(.drop-up) .smart-select-menu{ top:calc(100% + 7px)!important; bottom:auto!important; } .purchase-entry-hero .purchase-form-top .smart-select.open.smart-select-anchored.drop-up .smart-select-menu{ top:auto!important; bottom:calc(100% + 7px)!important; } .purchase-entry-hero + .purchase-products-panel{position:relative!important;z-index:1!important} /* ========================================================= V40 — Global smart-select anchoring restoration. Standard selects stay directly attached to their trigger. Only the POS checkout dock uses viewport/fixed positioning. ========================================================= */ .smart-select.open.smart-select-anchored{ position:relative!important; z-index:2147482000!important; overflow:visible!important; } .smart-select.open.smart-select-anchored .smart-select-menu{ position:absolute!important; left:0!important; right:0!important; width:100%!important; margin:0!important; transform:none!important; box-sizing:border-box!important; z-index:2147482500!important; background:var(--surface)!important; box-shadow:0 18px 45px rgba(15,23,42,.16)!important; overflow-x:hidden!important; overflow-y:auto!important; overscroll-behavior:contain!important; } .smart-select.open.smart-select-anchored:not(.drop-up) .smart-select-menu{ top:calc(100% + 7px)!important; bottom:auto!important; } .smart-select.open.smart-select-anchored.drop-up .smart-select-menu{ top:auto!important; bottom:calc(100% + 7px)!important; } /* Lift the active field's local section above following cards/tables without detaching the menu from its control. */ .page-content .panel:has(.smart-select.open.smart-select-anchored), .page-content .filters:has(.smart-select.open.smart-select-anchored), .page-content .filter-bar:has(.smart-select.open.smart-select-anchored), .page-content .quotation-filter-bar:has(.smart-select.open.smart-select-anchored), .page-content .inventory-filter-grid:has(.smart-select.open.smart-select-anchored), .dashboard-branch-context:has(.smart-select.open.smart-select-anchored), .dashboard-branch-switch:has(.smart-select.open.smart-select-anchored), .method-control:has(.smart-select.open.smart-select-anchored){ position:relative!important; z-index:2147481000!important; overflow:visible!important; } /* Keep the already-correct Purchase header behavior identical to the global anchored system. */ .purchase-entry-hero .purchase-form-top .smart-select.open.smart-select-anchored .smart-select-menu{ left:0!important; right:0!important; width:100%!important; } /* ========================================================= V41 — Unified application select typography and hierarchy. Standard form/filter selects now share one visual language. Barcode designer controls are intentionally excluded. ========================================================= */ body:not(:has(.barcode-page)) .page-content .smart-select-button{ min-height:44px!important; height:auto!important; padding:0 13px!important; border-radius:11px!important; font-size:13px!important; font-weight:700!important; line-height:1.3!important; color:var(--text-strong)!important; background:var(--surface)!important; } body:not(:has(.barcode-page)) .page-content .smart-select-button .selected-label{ flex:1 1 auto!important; min-width:0!important; overflow:hidden!important; text-overflow:ellipsis!important; white-space:nowrap!important; font-size:13px!important; font-weight:700!important; line-height:1.3!important; color:var(--text-strong)!important; } body:not(:has(.barcode-page)) .page-content .smart-select-button .selected-label.placeholder{ color:var(--muted)!important; font-weight:650!important; } body:not(:has(.barcode-page)) .page-content .smart-select-button>i.fa-chevron-down{ flex:0 0 auto!important; font-size:10px!important; color:var(--muted)!important; } body:not(:has(.barcode-page)) .page-content .smart-select-menu{ padding:7px!important; border-radius:12px!important; } body:not(:has(.barcode-page)) .page-content .smart-option{ min-height:42px!important; padding:9px 10px!important; border-radius:9px!important; font-size:13px!important; font-weight:650!important; line-height:1.35!important; color:var(--text-strong)!important; } body:not(:has(.barcode-page)) .page-content .smart-option>span{ min-width:0!important; overflow:hidden!important; text-overflow:ellipsis!important; white-space:nowrap!important; } body:not(:has(.barcode-page)) .page-content .smart-option.selected{ font-weight:750!important; color:var(--primary-dark)!important; } body:not(:has(.barcode-page)) .page-content .smart-search{ min-height:40px!important; height:40px!important; font-size:12.5px!important; font-weight:600!important; line-height:1.3!important; } /* Keep full-size native selects consistent when a screen intentionally opts out of the enhanced selector. Compact inline percentage/currency controls keep their purpose-built dimensions through their more specific component rules. */ body:not(:has(.barcode-page)) .page-content select:not(.smart-select-native):not([multiple]){ font-size:13px; font-weight:700; line-height:1.3; } /* Create Sale top controls are the visual baseline for standard document forms. */ body:not(:has(.barcode-page)) .page-content .pos-sale-fields .smart-select-button, body:not(:has(.barcode-page)) .page-content .purchase-form-top .smart-select-button, body:not(:has(.barcode-page)) .page-content .quotation-fields .smart-select-button, body:not(:has(.barcode-page)) .page-content .filters .smart-select-button, body:not(:has(.barcode-page)) .page-content .filter-bar .smart-select-button, body:not(:has(.barcode-page)) .page-content .quotation-filter-bar .smart-select-button, body:not(:has(.barcode-page)) .page-content .dashboard-branch-switch .smart-select-button, body:not(:has(.barcode-page)) .page-content .dashboard-branch-context .smart-select-button{ font-size:13px!important; font-weight:700!important; } @media(max-width:600px){ body:not(:has(.barcode-page)) .page-content .smart-select-button, body:not(:has(.barcode-page)) .page-content .smart-select-button .selected-label, body:not(:has(.barcode-page)) .page-content .smart-option{ font-size:14px!important; } body:not(:has(.barcode-page)) .page-content .smart-search, body:not(:has(.barcode-page)) .page-content select:not(.smart-select-native):not([multiple]){ font-size:16px!important; } } /* ========================================================= V42 — Final smart-select typography normalization One visual standard for closed values and opened options. Barcode designer remains intentionally excluded. ========================================================= */ body:not(:has(.barcode-page)) .smart-select-button, body:not(:has(.barcode-page)) .smart-select-button .selected-label, body:not(:has(.barcode-page)) .smart-select-menu .smart-option, body:not(:has(.barcode-page)) .smart-select-menu .smart-option > span, body:not(:has(.barcode-page)) .smart-select-menu .smart-search, body:not(:has(.barcode-page)) select:not(.smart-select-native):not([multiple]){ font-family:inherit!important; font-size:13px!important; line-height:1.35!important; } body:not(:has(.barcode-page)) .smart-select-button, body:not(:has(.barcode-page)) .smart-select-button .selected-label, body:not(:has(.barcode-page)) select:not(.smart-select-native):not([multiple]){ font-weight:650!important; color:var(--text-strong)!important; } body:not(:has(.barcode-page)) .smart-select-button{ min-height:44px!important; padding-inline:13px!important; } body:not(:has(.barcode-page)) .smart-select-button .selected-label{ display:block!important; flex:1 1 auto!important; min-width:0!important; overflow:hidden!important; text-overflow:ellipsis!important; white-space:nowrap!important; } body:not(:has(.barcode-page)) .smart-select-button .selected-label.placeholder{ font-weight:600!important; color:var(--muted)!important; } body:not(:has(.barcode-page)) .smart-select-menu{ padding:7px!important; border-radius:12px!important; } body:not(:has(.barcode-page)) .smart-select-menu .smart-option{ min-height:42px!important; padding:10px 11px!important; gap:10px!important; font-weight:650!important; color:var(--text-strong)!important; } body:not(:has(.barcode-page)) .smart-select-menu .smart-option > span{ font-weight:650!important; color:inherit!important; } body:not(:has(.barcode-page)) .smart-select-menu .smart-option.selected, body:not(:has(.barcode-page)) .smart-select-menu .smart-option.selected > span{ font-weight:700!important; color:var(--primary-dark)!important; } body:not(:has(.barcode-page)) .smart-select-menu .smart-option .check{ font-size:11px!important; } body:not(:has(.barcode-page)) .smart-select-menu .smart-search{ min-height:40px!important; height:40px!important; font-weight:600!important; color:var(--text-strong)!important; } body:not(:has(.barcode-page)) .smart-select-menu .smart-search::placeholder{ font-size:13px!important; font-weight:550!important; color:var(--muted)!important; opacity:1!important; } body:not(:has(.barcode-page)) .smart-select-empty, body:not(:has(.barcode-page)) .smart-select-empty span{ font-size:12px!important; font-weight:600!important; } /* Neutralize old component-specific weight overrides so Customer, Branch, Supplier, Payment, Status and filter values all render identically. */ body:not(:has(.barcode-page)) .page-content .smart-select-button, body:not(:has(.barcode-page)) .page-content .smart-select-button .selected-label, body:not(:has(.barcode-page)) .filters .smart-select-button, body:not(:has(.barcode-page)) .filter-bar .smart-select-button, body:not(:has(.barcode-page)) .quotation-filter-bar .smart-select-button, body:not(:has(.barcode-page)) .inventory-filter-grid .smart-select-button, body:not(:has(.barcode-page)) .purchase-form-top .smart-select-button, body:not(:has(.barcode-page)) .pos-sale-fields .smart-select-button, body:not(:has(.barcode-page)) .quotation-fields .smart-select-button, body:not(:has(.barcode-page)) .dashboard-branch-switch .smart-select-button, body:not(:has(.barcode-page)) .dashboard-branch-context .smart-select-button, body:not(:has(.barcode-page)) .method-control .smart-select-button, body:not(:has(.barcode-page)) .pos-field .smart-select-button{ font-size:13px!important; font-weight:650!important; } body:not(:has(.barcode-page)) .filters .smart-option, body:not(:has(.barcode-page)) .filter-bar .smart-option, body:not(:has(.barcode-page)) .quotation-filter-bar .smart-option, body:not(:has(.barcode-page)) .inventory-filter-grid .smart-option, body:not(:has(.barcode-page)) .purchase-form-top .smart-option, body:not(:has(.barcode-page)) .pos-sale-fields .smart-option, body:not(:has(.barcode-page)) .quotation-fields .smart-option, body:not(:has(.barcode-page)) .dashboard-branch-switch .smart-option, body:not(:has(.barcode-page)) .dashboard-branch-context .smart-option, body:not(:has(.barcode-page)) .method-control .smart-option, body:not(:has(.barcode-page)) .pos-field .smart-option{ min-height:42px!important; font-size:13px!important; font-weight:650!important; line-height:1.35!important; } @media(max-width:600px){ body:not(:has(.barcode-page)) .smart-select-button, body:not(:has(.barcode-page)) .smart-select-button .selected-label, body:not(:has(.barcode-page)) .smart-select-menu .smart-option, body:not(:has(.barcode-page)) .smart-select-menu .smart-option > span{ font-size:14px!important; } body:not(:has(.barcode-page)) .smart-select-menu .smart-search, body:not(:has(.barcode-page)) select:not(.smart-select-native):not([multiple]){ font-size:16px!important; } } /* ========================================================= V43 — Global management-table readability normalization One professional typography system for standard application tables. Intentionally excludes invoice print templates and barcode designer. ========================================================= */ body:not(:has(.barcode-page)) .page-content :is(.table-wrap,.report-table-wrap) table:not(.invoice-table){ font-size:13px!important; line-height:1.45!important; } body:not(:has(.barcode-page)) .page-content :is(.table-wrap,.report-table-wrap) table:not(.invoice-table) th{ padding:13px 14px!important; font-size:11.25px!important; line-height:1.35!important; font-weight:800!important; letter-spacing:.035em!important; color:var(--text-muted)!important; vertical-align:middle!important; } body:not(:has(.barcode-page)) .page-content :is(.table-wrap,.report-table-wrap) table:not(.invoice-table) td{ padding:14px!important; font-size:13px!important; line-height:1.48!important; font-weight:500!important; color:var(--text-strong)!important; vertical-align:middle!important; } body:not(:has(.barcode-page)) .page-content :is(.table-wrap,.report-table-wrap) table:not(.invoice-table) td :is(b,strong){ font-size:13px!important; line-height:1.4!important; font-weight:750!important; } body:not(:has(.barcode-page)) .page-content :is(.table-wrap,.report-table-wrap) table:not(.invoice-table) td :is(small,.sub){ font-size:11px!important; line-height:1.4!important; font-weight:500!important; } body:not(:has(.barcode-page)) .page-content :is(.table-wrap,.report-table-wrap) .pill{ min-height:25px!important; padding:5px 9px!important; font-size:11.25px!important; line-height:1.2!important; font-weight:750!important; } body:not(:has(.barcode-page)) .page-content :is(.table-wrap,.report-table-wrap) .pill i{ font-size:10.5px!important; } body:not(:has(.barcode-page)) .page-content :is(.table-wrap,.report-table-wrap) .row-actions{ gap:7px!important; align-items:center!important; } body:not(:has(.barcode-page)) .page-content :is(.table-wrap,.report-table-wrap) .icon-action{ width:36px!important; height:36px!important; min-width:36px!important; flex-basis:36px!important; font-size:12px!important; border-radius:10px!important; } /* Product / inventory cells use the same readable hierarchy as normal rows. */ body:not(:has(.barcode-page)) .page-content .inventory-data-table .inventory-product-cell b, body:not(:has(.barcode-page)) .page-content .return-table .return-product b{ font-size:13px!important; line-height:1.35!important; } body:not(:has(.barcode-page)) .page-content .inventory-data-table .inventory-product-cell small, body:not(:has(.barcode-page)) .page-content .return-table .return-product small{ font-size:11px!important; line-height:1.4!important; } /* Document-entry and return tables follow the same application-table type scale. */ body:not(:has(.barcode-page)) .page-content :is(.pos-sale-table,.purchase-table,.return-table):not(.invoice-table) th{ font-size:11.25px!important; line-height:1.35!important; font-weight:800!important; padding:13px 12px!important; } body:not(:has(.barcode-page)) .page-content :is(.pos-sale-table,.purchase-table,.return-table):not(.invoice-table) td{ font-size:13px!important; line-height:1.45!important; padding:13px 12px!important; vertical-align:middle!important; } body:not(:has(.barcode-page)) .page-content :is(.pos-sale-table,.purchase-table,.return-table):not(.invoice-table) td :is(b,strong){ font-size:13px!important; } body:not(:has(.barcode-page)) .page-content :is(.pos-sale-table,.purchase-table,.return-table):not(.invoice-table) td small{ font-size:11px!important; } /* Keep wide tables usable on tablets/phones instead of shrinking the text. */ @media(max-width:900px){ body:not(:has(.barcode-page)) .page-content :is(.table-wrap,.report-table-wrap){ overflow-x:auto!important; -webkit-overflow-scrolling:touch!important; } body:not(:has(.barcode-page)) .page-content :is(.table-wrap,.report-table-wrap) table:not(.invoice-table) th{ font-size:11px!important; padding:12px 13px!important; } body:not(:has(.barcode-page)) .page-content :is(.table-wrap,.report-table-wrap) table:not(.invoice-table) td{ font-size:13px!important; padding:13px!important; } } @media(max-width:600px){ body:not(:has(.barcode-page)) .page-content :is(.table-wrap,.report-table-wrap) table:not(.invoice-table) th{ font-size:11px!important; } body:not(:has(.barcode-page)) .page-content :is(.table-wrap,.report-table-wrap) table:not(.invoice-table) td, body:not(:has(.barcode-page)) .page-content :is(.pos-sale-table,.purchase-table,.return-table):not(.invoice-table) td{ font-size:13px!important; } body:not(:has(.barcode-page)) .page-content :is(.table-wrap,.report-table-wrap) .pill{ font-size:11.25px!important; } } /* ========================================================= V44 — Application readability + responsive consistency pass Improves normal application screens without touching POS, barcode designer, thermal invoices, or A5 invoice styling. ========================================================= */ body:not(.pos-terminal-active):not(:has(.barcode-page)) .page-content .section-kicker{ font-size:10.5px!important; line-height:1.25!important; font-weight:800!important; letter-spacing:.075em!important; } body:not(.pos-terminal-active):not(:has(.barcode-page)) .page-content .panel-head h2{ font-size:20px!important; line-height:1.22!important; font-weight:800!important; letter-spacing:-.015em!important; } body:not(.pos-terminal-active):not(:has(.barcode-page)) .page-content .panel-head p{ font-size:12.5px!important; line-height:1.55!important; color:var(--text-muted)!important; } body:not(.pos-terminal-active):not(:has(.barcode-page)) .page-content :is( .form-grid,.purchase-form-top,.pos-sale-fields,.quotation-fields,.filters,.filter-bar, .quotation-filter-bar,.inventory-filter-grid,.regional-form-grid,.tracking-grid, .return-form-grid,.transfer-meta-grid,.adjustment-control-card ) label{ font-size:12px!important; line-height:1.35!important; font-weight:750!important; } body:not(.pos-terminal-active):not(:has(.barcode-page)) .page-content :is( .field-help,.item-help,.tracking-help,.return-tracking-hint,.return-muted, .transfer-unit-hint,.inventory-control-note,.inventory-modal-note ){ font-size:11px!important; line-height:1.5!important; } body:not(.pos-terminal-active):not(:has(.barcode-page)) .page-content :is(input,textarea):not([type="checkbox"]):not([type="radio"]){ font-size:13px; line-height:1.4; } body:not(.pos-terminal-active):not(:has(.barcode-page)) .page-content :is(.primary-btn,.secondary-btn):not(.compact){ font-size:12.5px; font-weight:750; } body:not(.pos-terminal-active):not(:has(.barcode-page)) .page-content :is(.panel,form,label,.smart-select){ min-width:0; } /* Dashboard: stronger type hierarchy for cashier/office viewing distance. */ .dashboard-hero h2{font-size:30px!important;line-height:1.14!important} .dashboard-hero p{font-size:14px!important;line-height:1.55!important} .dashboard-hero .eyebrow{font-size:10.5px!important} .branch-context-copy span{font-size:10.5px!important;line-height:1.25!important} .branch-context-copy b{font-size:15.5px!important;line-height:1.3!important} .branch-context-copy small{font-size:11.5px!important;line-height:1.45!important} .branch-status-copy b{font-size:12px!important;line-height:1.3!important} .branch-status-copy small{font-size:10.5px!important;line-height:1.35!important} .cards .stat-card>span:first-child{font-size:13px!important;font-weight:700!important} .cards .stat-card>strong{font-size:29px!important;line-height:1.12!important} .cards .stat-card>small{font-size:11.75px!important;line-height:1.45!important} .cards .stat-card .stat-trend{font-size:10.75px!important;line-height:1.35!important} .dashboard-section-grid .panel-head h2{font-size:20px!important} .dashboard-section-grid .panel-head p{font-size:12.25px!important} .dashboard-quick-card .quick-action b,.quick-grid .quick-action b{font-size:13px!important;line-height:1.3!important;font-weight:780!important} .dashboard-quick-card .quick-action small,.quick-grid .quick-action small{font-size:11px!important;line-height:1.4!important} .dashboard-quick-card .quick-action .quick-arrow,.quick-grid .quick-action .quick-arrow{font-size:10.5px!important} .sales-bar-item>span{font-size:9.5px!important;line-height:1.25!important} .sales-bar-value{font-size:10.5px!important} .mini-stats .stat-card>strong{font-size:27px!important} /* Stock Adjustment: prevent Branch/Reason collisions and improve readability. */ .adjustment-control-card{ grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)!important; gap:14px!important; align-items:end!important; } .adjustment-control-card>label{min-width:0!important;width:100%!important} .adjustment-control-card .smart-select, .adjustment-control-card .smart-select-button, .adjustment-control-card input{ width:100%!important; max-width:100%!important; min-width:0!important; box-sizing:border-box!important; } .adjustment-control-card .smart-select-button .selected-label{ min-width:0!important; overflow:hidden!important; text-overflow:ellipsis!important; white-space:nowrap!important; } .adjustment-summary-card small{font-size:10px!important;line-height:1.3!important} .adjustment-summary-card strong{font-size:15px!important;line-height:1.3!important} .adjustment-create-panel .panel-head p,.adjustment-history-panel .panel-head p{font-size:12px!important} .professional-adjust-picker label{font-size:11.5px!important} .professional-adjust-picker .adjust-search input{font-size:13px!important} .adjustment-table-intro b{font-size:13px!important} .adjustment-table-intro span{font-size:10.5px!important;line-height:1.45!important} .adjustment-live-badge{font-size:10px!important} .adjustment-footer span{font-size:12px!important} .adjustment-footer small{font-size:10.5px!important;line-height:1.45!important} .adjustment-history-ref strong{font-size:12.5px!important} .adjustment-history-ref small{font-size:10.5px!important;line-height:1.4!important} /* Common empty/help states should remain readable throughout inventory screens. */ body:not(:has(.barcode-page)) .page-content .inventory-empty b{font-size:13px!important;line-height:1.35!important} body:not(:has(.barcode-page)) .page-content .inventory-empty span{font-size:11px!important;line-height:1.45!important} body:not(:has(.barcode-page)) .page-content .inventory-flash b{font-size:12.5px!important} body:not(:has(.barcode-page)) .page-content .inventory-flash span{font-size:11.5px!important;line-height:1.45!important} /* Standard invoice templates: center company logo vertically with business copy. A5 and both thermal templates are intentionally untouched. */ .invoice-sheet:not(.template-a5):not(.template-thermal80):not(.template-thermal58) .invoice-business-block{ align-items:center!important; } .invoice-sheet:not(.template-a5):not(.template-thermal80):not(.template-thermal58) .invoice-logo{ align-self:center!important; display:flex!important; align-items:center!important; justify-content:center!important; flex:0 0 auto!important; } .invoice-sheet:not(.template-a5):not(.template-thermal80):not(.template-thermal58) .invoice-logo.has-business-logo{ padding:3px!important; } .invoice-sheet:not(.template-a5):not(.template-thermal80):not(.template-thermal58) .invoice-business-logo-image{ display:block!important; width:100%!important; height:100%!important; margin:auto!important; object-fit:contain!important; object-position:center center!important; } /* Shared responsive safeguards for ordinary application pages. */ @media(max-width:1024px){ body:not(.pos-terminal-active):not(:has(.barcode-page)) .page-content .panel-head{gap:10px!important} .dashboard-hero{gap:18px!important} .dashboard-hero h2{font-size:27px!important} .cards .stat-card>strong{font-size:26px!important} .adjustment-control-card{grid-template-columns:1fr!important} .adjustment-control-card .adjustment-reason{grid-column:auto!important} .professional-adjustment-layout{grid-template-columns:1fr!important} .adjustment-history-panel{order:2!important} } @media(max-width:760px){ body:not(.pos-terminal-active):not(:has(.barcode-page)) .page-content{padding-left:12px!important;padding-right:12px!important} body:not(.pos-terminal-active):not(:has(.barcode-page)) .page-content .panel{padding:14px!important} body:not(.pos-terminal-active):not(:has(.barcode-page)) .page-content .panel-head h2{font-size:19px!important} body:not(.pos-terminal-active):not(:has(.barcode-page)) .page-content .panel-head p{font-size:12px!important} .dashboard-hero{padding:19px!important;border-radius:16px!important} .dashboard-hero h2{font-size:23px!important} .dashboard-hero p{font-size:12.5px!important} .dashboard-branch-context{grid-template-columns:1fr!important;gap:12px!important} .branch-context-main{align-items:center!important} .dashboard-branch-switch{width:100%!important;grid-template-columns:1fr!important} .stock-adjustment-summary{grid-template-columns:1fr!important} .adjustment-control-card{padding:12px!important} .professional-adjust-picker{display:grid!important;grid-template-columns:1fr!important} .professional-adjust-picker>.secondary-btn{width:100%!important;justify-content:center!important} .adjustment-table-intro{align-items:flex-start!important;flex-direction:column!important} .adjustment-footer{align-items:stretch!important;flex-direction:column!important} .adjustment-footer .primary-btn{width:100%!important;justify-content:center!important} .adjustment-create-panel .table-wrap,.adjustment-history-panel .table-wrap{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important} } @media(max-width:560px){ .cards,.mini-stats{grid-template-columns:1fr!important} .cards .stat-card{padding:17px!important;min-height:112px!important} .cards .stat-card>span:first-child{font-size:12.5px!important} .cards .stat-card>strong{font-size:24px!important} .cards .stat-card>small{font-size:11.5px!important} .dashboard-quick-card .quick-grid,.quick-grid{grid-template-columns:1fr!important} .dashboard-quick-card .quick-action,.quick-grid .quick-action{min-height:82px!important;padding:13px!important} .dashboard-quick-card .quick-action b,.quick-grid .quick-action b{font-size:13.5px!important} .dashboard-quick-card .quick-action small,.quick-grid .quick-action small{font-size:11.25px!important} .adjustment-summary-card{padding:13px!important} } /* ========================================================= V40 — Inventory / Branch Management readability system Removes the remaining legacy 8–11px inventory typography and keeps Inventory Control + Branch Management consistent with the rest of the application on every device size. ========================================================= */ body:not(.pos-terminal-active):not(:has(.barcode-page)) .page-content .inventory-hero{ gap:20px!important; padding:22px 24px!important; border-radius:16px!important; } body:not(.pos-terminal-active):not(:has(.barcode-page)) .page-content .inventory-hero .section-kicker{ font-size:10.5px!important; line-height:1.25!important; font-weight:820!important; letter-spacing:.08em!important; } body:not(.pos-terminal-active):not(:has(.barcode-page)) .page-content .inventory-hero h2{ margin:5px 0 6px!important; font-size:24px!important; line-height:1.2!important; font-weight:820!important; letter-spacing:-.02em!important; } body:not(.pos-terminal-active):not(:has(.barcode-page)) .page-content .inventory-hero p{ max-width:820px!important; font-size:13px!important; line-height:1.55!important; color:var(--muted)!important; } body:not(.pos-terminal-active):not(:has(.barcode-page)) .page-content .inventory-hero :is(.primary-btn,.secondary-btn){ min-height:42px!important; padding-inline:14px!important; font-size:12.5px!important; } body:not(.pos-terminal-active):not(:has(.barcode-page)) .page-content .inventory-metrics{ display:grid!important; grid-template-columns:repeat(auto-fit,minmax(220px,1fr))!important; gap:14px!important; margin-bottom:16px!important; } body:not(.pos-terminal-active):not(:has(.barcode-page)) .page-content .inventory-metric{ min-height:86px!important; gap:13px!important; padding:16px 17px!important; border-radius:15px!important; align-items:center!important; } body:not(.pos-terminal-active):not(:has(.barcode-page)) .page-content .inventory-metric .metric-icon{ width:44px!important; height:44px!important; flex:0 0 44px!important; border-radius:12px!important; font-size:16px!important; } body:not(.pos-terminal-active):not(:has(.barcode-page)) .page-content .inventory-metric>div{ display:grid!important; gap:3px!important; min-width:0!important; } body:not(.pos-terminal-active):not(:has(.barcode-page)) .page-content .inventory-metric small{ margin:0!important; font-size:12.25px!important; line-height:1.35!important; font-weight:720!important; color:var(--muted)!important; white-space:normal!important; } body:not(.pos-terminal-active):not(:has(.barcode-page)) .page-content .inventory-metric strong{ font-size:27px!important; line-height:1.08!important; font-weight:820!important; letter-spacing:-.025em!important; color:var(--text-strong)!important; } body:not(.pos-terminal-active):not(:has(.barcode-page)) .page-content .inventory-feature-grid{ grid-template-columns:repeat(auto-fit,minmax(235px,1fr))!important; gap:14px!important; margin-bottom:16px!important; } body:not(.pos-terminal-active):not(:has(.barcode-page)) .page-content .inventory-feature-card{ min-height:82px!important; gap:12px!important; padding:15px!important; border-radius:14px!important; } body:not(.pos-terminal-active):not(:has(.barcode-page)) .page-content .inventory-feature-card .metric-icon{ width:42px!important; height:42px!important; flex:0 0 42px!important; border-radius:11px!important; font-size:15px!important; } body:not(.pos-terminal-active):not(:has(.barcode-page)) .page-content .inventory-feature-card>div{ padding-right:22px!important; } body:not(.pos-terminal-active):not(:has(.barcode-page)) .page-content .inventory-feature-card b{ font-size:13.25px!important; line-height:1.3!important; font-weight:780!important; color:var(--text-strong)!important; } body:not(.pos-terminal-active):not(:has(.barcode-page)) .page-content .inventory-feature-card small{ margin-top:3px!important; font-size:11.25px!important; line-height:1.45!important; color:var(--muted)!important; } body:not(.pos-terminal-active):not(:has(.barcode-page)) .page-content .inventory-feature-card>i:last-child{ right:14px!important; font-size:11px!important; } body:not(.pos-terminal-active):not(:has(.barcode-page)) .page-content .inventory-control-panel{ padding:16px!important; margin-bottom:16px!important; border-radius:15px!important; } body:not(.pos-terminal-active):not(:has(.barcode-page)) .page-content .inventory-filter-grid label{ gap:6px!important; font-size:12px!important; line-height:1.35!important; font-weight:750!important; color:var(--text)!important; } body:not(.pos-terminal-active):not(:has(.barcode-page)) .page-content .inventory-filter-actions>*{ min-height:42px!important; font-size:12.25px!important; } body:not(.pos-terminal-active):not(:has(.barcode-page)) .page-content .inventory-table-panel{ padding:17px!important; border-radius:15px!important; } body:not(.pos-terminal-active):not(:has(.barcode-page)) .page-content .inventory-table-panel .panel-head{ margin-bottom:14px!important; } body:not(.pos-terminal-active):not(:has(.barcode-page)) .page-content .inventory-table-panel .panel-head h2{ font-size:20px!important; } body:not(.pos-terminal-active):not(:has(.barcode-page)) .page-content .inventory-table-panel .panel-head p{ font-size:12px!important; line-height:1.5!important; } body:not(.pos-terminal-active):not(:has(.barcode-page)) .page-content .inventory-product-cell b{ font-size:13px!important; line-height:1.35!important; } body:not(.pos-terminal-active):not(:has(.barcode-page)) .page-content .inventory-product-cell small{ font-size:10.75px!important; line-height:1.4!important; } body:not(.pos-terminal-active):not(:has(.barcode-page)) .page-content .inventory-avatar{ width:38px!important; height:38px!important; flex-basis:38px!important; border-radius:10px!important; font-size:13px!important; } body:not(.pos-terminal-active):not(:has(.barcode-page)) .page-content .tracking-tags span, body:not(.pos-terminal-active):not(:has(.barcode-page)) .page-content .muted-tag{ font-size:10.5px!important; line-height:1.2!important; padding:5px 8px!important; } /* Branch Management inherits the Inventory Control visual language. */ body:not(.pos-terminal-active):not(:has(.barcode-page)) .page-content .branch-default-btn{ min-height:36px!important; height:36px!important; padding:0 11px!important; border-radius:9px!important; font-size:11.5px!important; line-height:1!important; font-weight:750!important; } body:not(.pos-terminal-active):not(:has(.barcode-page)) .page-content .inventory-modal .modal-head h2{ font-size:20px!important; line-height:1.25!important; } body:not(.pos-terminal-active):not(:has(.barcode-page)) .page-content .inventory-modal .modal-head p{ font-size:12px!important; line-height:1.5!important; } body:not(.pos-terminal-active):not(:has(.barcode-page)) .page-content .inventory-modal-form label{ font-size:12px!important; font-weight:750!important; } body:not(.pos-terminal-active):not(:has(.barcode-page)) .page-content .inventory-modal-note{ font-size:11.5px!important; line-height:1.5!important; padding:11px 12px!important; } @media(max-width:1200px){ body:not(.pos-terminal-active):not(:has(.barcode-page)) .page-content .inventory-metrics{ grid-template-columns:repeat(2,minmax(0,1fr))!important; } body:not(.pos-terminal-active):not(:has(.barcode-page)) .page-content .inventory-feature-grid{ grid-template-columns:repeat(2,minmax(0,1fr))!important; } } @media(max-width:760px){ body:not(.pos-terminal-active):not(:has(.barcode-page)) .page-content .inventory-hero{ display:grid!important; grid-template-columns:1fr!important; gap:14px!important; padding:18px!important; } body:not(.pos-terminal-active):not(:has(.barcode-page)) .page-content .inventory-hero h2{ font-size:22px!important; } body:not(.pos-terminal-active):not(:has(.barcode-page)) .page-content .inventory-hero p{ font-size:12.5px!important; } body:not(.pos-terminal-active):not(:has(.barcode-page)) .page-content .inventory-hero-actions, body:not(.pos-terminal-active):not(:has(.barcode-page)) .page-content .inventory-hero>.primary-btn{ width:100%!important; } body:not(.pos-terminal-active):not(:has(.barcode-page)) .page-content .inventory-hero>.primary-btn{ justify-content:center!important; } body:not(.pos-terminal-active):not(:has(.barcode-page)) .page-content .inventory-metric{ min-height:80px!important; padding:14px!important; } body:not(.pos-terminal-active):not(:has(.barcode-page)) .page-content .inventory-metric small{ font-size:11.75px!important; } body:not(.pos-terminal-active):not(:has(.barcode-page)) .page-content .inventory-metric strong{ font-size:24px!important; } body:not(.pos-terminal-active):not(:has(.barcode-page)) .page-content .inventory-feature-card{ min-height:78px!important; } body:not(.pos-terminal-active):not(:has(.barcode-page)) .page-content .inventory-table-panel{ padding:14px!important; } } @media(max-width:520px){ body:not(.pos-terminal-active):not(:has(.barcode-page)) .page-content .inventory-metrics, body:not(.pos-terminal-active):not(:has(.barcode-page)) .page-content .inventory-feature-grid{ grid-template-columns:1fr!important; } body:not(.pos-terminal-active):not(:has(.barcode-page)) .page-content .inventory-metric{ min-height:76px!important; } body:not(.pos-terminal-active):not(:has(.barcode-page)) .page-content .inventory-metric .metric-icon{ width:40px!important; height:40px!important; flex-basis:40px!important; } body:not(.pos-terminal-active):not(:has(.barcode-page)) .page-content .inventory-metric strong{ font-size:23px!important; } body:not(.pos-terminal-active):not(:has(.barcode-page)) .page-content .inventory-feature-card b{ font-size:13px!important; } body:not(.pos-terminal-active):not(:has(.barcode-page)) .page-content .inventory-feature-card small{ font-size:11px!important; } body:not(.pos-terminal-active):not(:has(.barcode-page)) .page-content .inventory-filter-actions{ display:grid!important; grid-template-columns:1fr!important; } body:not(.pos-terminal-active):not(:has(.barcode-page)) .page-content .inventory-filter-actions>*{ width:100%!important; justify-content:center!important; } } /* ========================================================= V45 — Application-wide UI consistency & responsive polish Select width, reports, analytics, users/roles and backup UI. POS terminal and barcode designer remain intentionally isolated. ========================================================= */ body:not(.pos-terminal-active):not(:has(.barcode-page)) .page-content .panel-head h2, body:not(.pos-terminal-active):not(:has(.barcode-page)) .page-content .access-section-head h2, body:not(.pos-terminal-active):not(:has(.barcode-page)) .page-content .report-section-head h3{ font-size:19px!important; line-height:1.25!important; font-weight:780!important; letter-spacing:-.015em!important; } body:not(.pos-terminal-active):not(:has(.barcode-page)) .page-content .panel-head p, body:not(.pos-terminal-active):not(:has(.barcode-page)) .page-content .access-section-head p, body:not(.pos-terminal-active):not(:has(.barcode-page)) .page-content .report-section-head p{ font-size:12.5px!important; line-height:1.5!important; } body:not(.pos-terminal-active):not(:has(.barcode-page)) .page-content .section-kicker{ font-size:10.5px!important; line-height:1.25!important; letter-spacing:.08em!important; } /* Selects should never look clipped simply because a filter column is narrow. */ body:not(:has(.barcode-page)) .smart-select-menu .smart-option>span{ min-width:0!important; white-space:normal!important; overflow:visible!important; text-overflow:clip!important; overflow-wrap:anywhere!important; } body:not(:has(.barcode-page)) .smart-select-menu .smart-option{ align-items:center!important; } body:not(.pos-terminal-active):not(:has(.barcode-page)) .page-content .filters>label{ flex:1 1 190px!important; min-width:180px!important; max-width:320px; } body:not(.pos-terminal-active):not(:has(.barcode-page)) .page-content .filters>label:has(input[type="date"]){ flex:0 1 185px!important; min-width:170px!important; } body:not(.pos-terminal-active):not(:has(.barcode-page)) .page-content .filters>label:has(input[type="search"]), body:not(.pos-terminal-active):not(:has(.barcode-page)) .page-content .filters>label:has(input[name="q"]){ flex:1 1 260px!important; max-width:430px; } body:not(.pos-terminal-active):not(:has(.barcode-page)) .page-content .report-filters{ display:grid!important; grid-template-columns:repeat(auto-fit,minmax(185px,1fr))!important; align-items:end!important; } body:not(.pos-terminal-active):not(:has(.barcode-page)) .page-content .filter-bar, body:not(.pos-terminal-active):not(:has(.barcode-page)) .page-content .quotation-filter-bar{ min-width:0!important; } /* Purchase list gets the same complete filter workspace as sales/payments. */ .purchase-list-filters .purchase-search-filter{min-width:min(330px,100%)!important} .purchase-list-filters .primary-btn,.purchase-list-filters .secondary-btn{min-height:44px!important} /* Report catalog: remove legacy tiny/ellipsis copy and keep it readable. */ body:not(:has(.barcode-page)) .page-content .report-catalog{ gap:13px!important; } body:not(:has(.barcode-page)) .page-content .report-tile{ min-height:82px!important; grid-template-columns:44px minmax(0,1fr) 18px!important; gap:12px!important; padding:14px 15px!important; border-radius:14px!important; } body:not(:has(.barcode-page)) .page-content .report-tile .report-icon{ width:42px!important; height:42px!important; border-radius:11px!important; font-size:15px!important; } body:not(:has(.barcode-page)) .page-content .report-tile b{ font-size:13.25px!important; line-height:1.3!important; font-weight:780!important; } body:not(:has(.barcode-page)) .page-content .report-tile small{ margin-top:4px!important; font-size:11.25px!important; line-height:1.4!important; white-space:normal!important; overflow:visible!important; text-overflow:clip!important; } body:not(:has(.barcode-page)) .page-content .report-metrics .stat-card span, body:not(:has(.barcode-page)) .page-content .report-metrics .stat-card small{ font-size:11.5px!important; line-height:1.4!important; } /* Users & Roles — one readable badge/chip/card system. */ .page-content .access-hero h2{font-size:22px!important;line-height:1.22!important} .page-content .access-hero p{font-size:12.5px!important;line-height:1.5!important} .page-content .access-metrics article{min-height:78px!important;padding:14px!important;gap:12px!important} .page-content .access-metrics article small{font-size:11.5px!important;line-height:1.35!important;font-weight:700!important} .page-content .access-metrics article strong{font-size:22px!important;line-height:1.1!important} .page-content .user-cell b{font-size:13px!important;line-height:1.3!important} .page-content .user-cell small{font-size:10.75px!important;line-height:1.4!important} .page-content .role-badge, .page-content .access-chip{ min-height:28px!important; padding:6px 9px!important; font-size:10.75px!important; line-height:1.25!important; font-weight:750!important; } .page-content .role-card{padding:16px!important;gap:14px!important} .page-content .role-card h3{font-size:14.5px!important;line-height:1.3!important} .page-content .role-card p{font-size:11.25px!important;line-height:1.5!important} .page-content .role-card-stats span{font-size:10.5px!important;line-height:1.35!important;padding:10px!important} .page-content .role-card-stats b{font-size:15px!important} .page-content .locked-role{font-size:10.75px!important} .page-content .permission-copy b{font-size:12px!important;line-height:1.35!important} .page-content .permission-copy small{font-size:10px!important;line-height:1.4!important} /* Backup & Restore workspace. */ .backup-hero{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:20px!important;padding:22px!important} .backup-hero h2{margin:4px 0 5px!important;font-size:24px!important}.backup-hero p{margin:0!important;max-width:780px;font-size:12.5px!important;line-height:1.55!important;color:var(--muted)}.backup-download-form{margin:0;display:flex}.backup-download-form.backup-main-action{width:100%}.backup-download-form.backup-main-action .primary-btn{width:100%;justify-content:center} .backup-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:14px 0} .backup-metrics article{display:flex;align-items:center;gap:12px;min-height:80px;padding:14px 16px;border:1px solid var(--border);border-radius:14px;background:var(--surface);box-shadow:var(--shadow-sm)} .backup-metrics .metric-icon{width:42px;height:42px;flex:0 0 42px;display:grid;place-items:center;border-radius:11px;background:var(--primary-soft);color:var(--primary)} .backup-metrics small{display:block;font-size:11px;font-weight:700;color:var(--muted)}.backup-metrics strong{display:block;margin-top:3px;font-size:20px;line-height:1.15;color:var(--text-strong)} .backup-workspace{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:14px}.backup-action-card{display:flex;flex-direction:column;gap:14px;min-height:360px}.backup-card-icon{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;font-size:18px;background:var(--primary-soft);color:var(--primary)}.backup-card-warning .backup-card-icon{background:color-mix(in srgb,var(--warning) 10%,var(--surface));color:var(--warning)}.backup-card-copy h2{margin:5px 0 5px;font-size:20px}.backup-card-copy p{margin:0;color:var(--muted);font-size:12px;line-height:1.55}.backup-checklist{display:grid;gap:8px;padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--surface-soft)}.backup-checklist span{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:650}.backup-checklist i{color:var(--success)}.backup-main-action{margin-top:auto;width:100%;justify-content:center}.backup-restore-form{display:grid;gap:11px;flex:1}.backup-file-field{display:grid;gap:7px;padding:13px;border:1px dashed var(--primary-border);border-radius:12px;background:var(--primary-soft-2)}.backup-file-field>span{font-size:12px;font-weight:750}.backup-file-field input{background:var(--surface)}.backup-file-field small{font-size:10.5px;line-height:1.4;color:var(--muted)}.backup-confirm{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px;padding:12px 13px;border:1px solid color-mix(in srgb,var(--warning) 28%,var(--border));border-radius:11px;background:color-mix(in srgb,var(--warning) 5%,var(--surface));font-size:11px;line-height:1.45;cursor:pointer}.backup-confirm-copy{min-width:0}.backup-confirm-copy b,.backup-confirm-copy small{display:block}.backup-confirm-copy b{font-size:11.5px;color:var(--text)}.backup-confirm-copy small{margin-top:3px;color:var(--muted);font-size:10.5px;line-height:1.45}.backup-confirm .switch{margin-left:auto}.backup-guide{padding:20px!important}.backup-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.backup-steps article{display:flex;gap:10px;padding:13px;border:1px solid var(--border);border-radius:12px;background:var(--surface-soft)}.backup-steps article>span{width:30px;height:30px;flex:0 0 30px;border-radius:9px;background:var(--primary-soft);color:var(--primary);display:grid;place-items:center;font-weight:850}.backup-steps b{font-size:12px}.backup-steps p{margin:3px 0 0;font-size:10.75px;line-height:1.45;color:var(--muted)}.backup-security-note{display:flex;gap:11px;margin-top:14px;padding:13px;border:1px solid var(--primary-border);border-radius:12px;background:var(--primary-soft-2)}.backup-security-note>i{margin-top:2px;color:var(--primary)}.backup-security-note b{font-size:12px}.backup-security-note p{margin:3px 0 0;font-size:10.75px;line-height:1.5;color:var(--muted)} /* Analytics v2 */ .analytics-hero-v2{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:20px!important;padding:22px!important}.analytics-hero-copy h2{margin:5px 0 5px;font-size:25px!important}.analytics-hero-copy p{margin:0;max-width:760px;font-size:12.5px!important;line-height:1.55;color:var(--muted)}.analytics-range{display:inline-flex;align-items:center;gap:7px;margin-top:10px;padding:7px 10px;border-radius:9px;background:var(--surface-soft);font-size:11px;font-weight:700;color:var(--text)}.analytics-hero-actions{display:flex;align-items:end;gap:9px;flex-wrap:wrap}.analytics-period-v2 label{display:grid;gap:5px;min-width:170px}.analytics-period-v2 label>span{font-size:10.5px;font-weight:750;color:var(--muted)} .analytics-metric-grid-v2{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin:14px 0}.analytics-metric-v2{display:flex;align-items:center;gap:11px;min-width:0;min-height:98px;padding:15px;border:1px solid var(--border);border-radius:14px;background:var(--surface);box-shadow:var(--shadow-sm)}.analytics-metric-v2 .metric-icon{width:42px;height:42px;flex:0 0 42px;border-radius:11px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary)}.analytics-metric-v2 .tone-success{background:color-mix(in srgb,var(--success) 9%,var(--surface));color:var(--success)}.analytics-metric-v2 .tone-danger{background:color-mix(in srgb,var(--danger) 8%,var(--surface));color:var(--danger)}.analytics-metric-v2 .tone-info{background:color-mix(in srgb,var(--accent) 10%,var(--surface));color:var(--accent)}.analytics-metric-v2 .tone-violet{background:color-mix(in srgb,#7c3aed 9%,var(--surface));color:#7c3aed}.analytics-metric-v2 .tone-warning{background:color-mix(in srgb,var(--warning) 10%,var(--surface));color:var(--warning)}.analytics-metric-v2 div{min-width:0}.analytics-metric-v2 small{display:block;font-size:10.75px;font-weight:750;color:var(--muted)}.analytics-metric-v2 strong{display:block;margin:4px 0 2px;font-size:20px;line-height:1.12;letter-spacing:-.02em;color:var(--text-strong)}.analytics-metric-v2 p{margin:0;font-size:9.75px;line-height:1.35;color:var(--muted)}.analytics-metric-v2.is-negative strong{color:var(--danger)} .analytics-layout-v2{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(300px,.7fr);gap:14px;align-items:stretch}.analytics-bottom-grid-v2{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(340px,.8fr);gap:14px;margin-top:14px;align-items:start}.analytics-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:15px}.analytics-section-head h2{margin:3px 0 3px;font-size:18px}.analytics-section-head p{margin:0;color:var(--muted);font-size:11.5px;line-height:1.45}.analytics-head-stat{text-align:right}.analytics-head-stat span{display:block;font-size:10px;color:var(--muted)}.analytics-head-stat strong{display:block;margin-top:3px;font-size:16px;color:var(--text-strong)} .analytics-trend-bars{height:300px;display:grid;grid-template-columns:repeat(var(--analytics-bars),minmax(28px,1fr));gap:8px;align-items:end;padding:12px 4px 0;border-top:1px solid var(--border)}.analytics-trend-bar{height:100%;display:grid;grid-template-rows:22px minmax(0,1fr) 30px;gap:5px;min-width:0;text-align:center}.analytics-bar-value{font-size:8.5px;font-weight:700;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.analytics-bar-track{height:100%;min-height:130px;display:flex;align-items:flex-end;justify-content:center;border-radius:9px;background:linear-gradient(180deg,transparent,var(--surface-soft));overflow:hidden}.analytics-bar-track i{display:block;width:min(28px,70%);min-height:4px;border-radius:8px 8px 3px 3px;background:linear-gradient(180deg,var(--accent),var(--primary));box-shadow:0 5px 12px color-mix(in srgb,var(--primary) 18%,transparent)}.analytics-trend-bar>span{font-size:8.75px;line-height:1.2;color:var(--muted);overflow:hidden}.analytics-empty{min-height:220px;display:grid;place-items:center;text-align:center;align-content:center;gap:5px;color:var(--muted)}.analytics-empty i{font-size:24px;color:var(--primary)}.analytics-empty b{font-size:12px;color:var(--text)}.analytics-empty span{font-size:10.5px} .analytics-health-list{display:grid;gap:2px}.analytics-health-list>div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--border)}.analytics-health-list>div:last-child{border-bottom:0}.analytics-health-list span{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted)}.analytics-health-list span i{width:20px;color:var(--primary)}.analytics-health-list b{font-size:12px;color:var(--text-strong)}.analytics-progress{margin-top:15px;padding:12px;border:1px solid var(--border);border-radius:11px;background:var(--surface-soft)}.analytics-progress>div:first-child{display:flex;justify-content:space-between;gap:10px;font-size:10.5px}.analytics-progress-track,.mini-progress{height:7px;margin-top:8px;border-radius:999px;background:var(--primary-soft);overflow:hidden}.analytics-progress-track i,.mini-progress i{display:block;height:100%;border-radius:inherit;background:var(--primary)} .analytics-payment-list{display:grid;gap:10px}.analytics-payment-list>div{padding:10px 0;border-bottom:1px solid var(--border)}.analytics-payment-list>div>div:first-child{display:flex;justify-content:space-between;gap:10px}.analytics-payment-list span,.analytics-payment-list b{font-size:11.5px}.analytics-payment-list small{display:block;margin-top:3px;font-size:9.75px;color:var(--muted)}.analytics-expiry-head{margin-top:18px;padding-top:15px;border-top:1px solid var(--border)}.analytics-expiry-list{display:grid;gap:2px}.analytics-expiry-list>div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--border)}.analytics-expiry-list b{display:block;font-size:11.5px}.analytics-expiry-list small{display:block;margin-top:2px;font-size:9.5px;color:var(--muted)}.analytics-expiry-list strong{font-size:10.5px;white-space:nowrap}.analytics-list-empty{padding:12px 0!important;border:0!important;color:var(--muted);font-size:10.5px!important} /* Responsive safety net for normal application pages. */ @media(max-width:1320px){.analytics-metric-grid-v2{grid-template-columns:repeat(3,minmax(0,1fr))}.backup-steps{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:980px){ body:not(.pos-terminal-active):not(:has(.barcode-page)) .page-content .filters>label{max-width:none!important} .analytics-hero-v2,.backup-hero{align-items:flex-start!important;flex-direction:column!important}.analytics-hero-actions{width:100%}.analytics-hero-actions>*{flex:1}.analytics-layout-v2,.analytics-bottom-grid-v2,.backup-workspace{grid-template-columns:1fr}.backup-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.role-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important} } @media(max-width:700px){ body:not(.pos-terminal-active):not(:has(.barcode-page)) .page-content .filters{display:grid!important;grid-template-columns:1fr 1fr!important} body:not(.pos-terminal-active):not(:has(.barcode-page)) .page-content .filters>label{min-width:0!important;width:100%!important;max-width:none!important} .analytics-metric-grid-v2{grid-template-columns:repeat(2,minmax(0,1fr))}.analytics-trend-panel{overflow:hidden}.analytics-trend-bars{overflow-x:auto;grid-template-columns:repeat(var(--analytics-bars),minmax(48px,1fr));padding-bottom:4px}.backup-steps{grid-template-columns:1fr}.role-card-grid{grid-template-columns:1fr!important} } @media(max-width:520px){ body:not(.pos-terminal-active):not(:has(.barcode-page)) .page-content .filters{grid-template-columns:1fr!important} .analytics-metric-grid-v2,.backup-metrics{grid-template-columns:1fr}.analytics-hero-v2,.backup-hero{padding:17px!important}.analytics-hero-actions{display:grid;grid-template-columns:1fr;width:100%}.analytics-hero-actions>*{width:100%}.analytics-period-v2 label{min-width:0}.analytics-section-head{flex-direction:column}.analytics-head-stat{text-align:left}.backup-main-action{min-height:46px}.backup-confirm{font-size:12px} } /* ========================================================= V44 — Final settings, reports and purchase suggestion polish ========================================================= */ .brand-mark.has-brand-logo{background:var(--surface)!important;border:1px solid var(--border)!important;padding:4px!important;overflow:hidden!important} .brand-mark.has-brand-logo img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;margin:auto} .business-favicon-setting{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:16px;align-items:center;margin-top:14px;padding:15px;border:1px solid var(--border);border-radius:14px;background:var(--surface-soft)} .business-favicon-preview{width:58px;height:58px;border:1px solid var(--border);border-radius:13px;background:var(--surface);display:grid;place-items:center;overflow:hidden;font-size:21px;font-weight:800;color:var(--primary)} .business-favicon-preview img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain} .document-number-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.number-format-card{display:grid;grid-template-columns:minmax(150px,.65fr) minmax(220px,1fr);align-items:center;gap:14px;padding:13px 14px;border:1px solid var(--border);border-radius:12px;background:var(--surface-soft)}.number-format-card>span{display:grid;gap:3px}.number-format-card b{font-size:13px;color:var(--text-strong)}.number-format-card small{font-size:11px;color:var(--muted);line-height:1.35}.number-format-card input{min-width:0;height:43px;font-size:13px;font-weight:700}.numbering-help{margin-top:12px;font-size:12px!important;line-height:1.6!important}.numbering-help code{padding:2px 5px;border-radius:5px;background:var(--surface);border:1px solid var(--border);font-size:11px} /* Product suggestion overlay: deliberately viewport-positioned so the list can never be hidden behind purchase totals/cards. */ .purchase-product-search .purchase-suggestions{z-index:2147483000!important;background:var(--surface)!important;border:1px solid var(--primary-border)!important;box-shadow:0 20px 55px rgba(15,23,42,.18)!important;overflow:auto!important;margin:0!important} .purchase-product-search .purchase-suggestion{min-height:56px!important;padding:9px 11px!important;display:flex!important;align-items:center!important;gap:10px!important} .purchase-product-search .purchase-suggestion b{font-size:12.5px!important;line-height:1.3!important}.purchase-product-search .purchase-suggestion small{font-size:10.5px!important;line-height:1.35!important}.purchase-product-search .purchase-suggestion strong{font-size:12.5px!important} .reports-hero-v2{align-items:center!important}.report-catalog-v2{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:11px!important}.report-catalog-v2 .report-tile{min-height:88px;padding:13px!important}.report-catalog-v2 .report-tile b{font-size:13px!important}.report-catalog-v2 .report-tile small{font-size:11px!important;line-height:1.4!important}.report-workspace-v2{overflow:visible!important}.report-filter-head{margin-bottom:12px}.report-filter-head h3{font-size:18px}.report-filter-head p{font-size:12px}.report-filters-v2{display:grid!important;grid-template-columns:repeat(5,minmax(145px,1fr));gap:10px!important;align-items:end!important}.report-filters-v2 label{min-width:0!important}.report-filters-v2 label>span{font-size:11.5px!important;font-weight:750!important}.report-filters-v2 input,.report-filters-v2 select,.report-filters-v2 .smart-select-button{min-height:44px!important;font-size:13px!important}.report-filter-actions{display:flex;align-items:end}.report-filter-actions .primary-btn{width:100%;min-height:44px}.report-metrics-v2{margin:16px 0!important}.report-metrics-v2 .stat-card span{font-size:11.5px!important}.report-metrics-v2 .stat-card strong{font-size:21px!important}.report-metrics-v2 .stat-card small{font-size:11px!important}.report-table-wrap table th{font-size:11.5px!important}.report-table-wrap table td{font-size:13px!important;line-height:1.45!important}.report-section-head h3{font-size:18px!important}.report-section-head p{font-size:11.5px!important}.report-total-inline{font-size:16px!important} @media(max-width:1320px){.report-catalog-v2{grid-template-columns:repeat(3,minmax(0,1fr))!important}.report-filters-v2{grid-template-columns:repeat(4,minmax(140px,1fr))}} @media(max-width:1000px){.document-number-grid{grid-template-columns:1fr}.report-catalog-v2{grid-template-columns:repeat(2,minmax(0,1fr))!important}.report-filters-v2{grid-template-columns:repeat(2,minmax(0,1fr))!important}} @media(max-width:720px){.business-favicon-setting{grid-template-columns:60px 1fr}.business-favicon-setting .business-logo-actions{grid-column:1/-1;justify-content:flex-start}.document-number-grid{grid-template-columns:1fr}.number-format-card{grid-template-columns:1fr;gap:8px}.report-catalog-v2{grid-template-columns:1fr!important}.report-filters-v2{grid-template-columns:1fr!important}.report-filter-actions .primary-btn{width:100%}.reports-hero-v2{align-items:stretch!important}.reports-hero-v2 .report-actions{width:100%}.reports-hero-v2 .report-actions>*{width:100%;justify-content:center}.report-filter-head{align-items:stretch!important;gap:10px!important}.report-filter-head>.secondary-btn{width:100%;justify-content:center}} /* ========================================================= V47 — Quotation/Purchase/Analytics/Business Settings polish Final focused UI pass for 19 Sep 2026. ========================================================= */ /* Purchase product suggestions: always anchored directly beneath search. */ .purchase-products-panel{ position:relative!important; z-index:30!important; overflow:visible!important; isolation:auto!important; } .purchase-products-panel.suggestions-open{z-index:300!important} .purchase-product-search-row{ position:relative!important; z-index:310!important; overflow:visible!important; } .purchase-product-search{ position:relative!important; z-index:320!important; overflow:visible!important; } .purchase-product-search .purchase-suggestions{ position:absolute!important; top:calc(100% + 8px)!important; left:0!important; right:0!important; bottom:auto!important; width:auto!important; min-width:100%!important; z-index:330!important; margin:0!important; padding:7px!important; overflow-y:auto!important; overflow-x:hidden!important; border:1px solid var(--primary-border)!important; border-radius:13px!important; background:var(--surface)!important; box-shadow:0 18px 44px rgba(15,23,42,.16)!important; } .purchase-products-panel .purchase-lines, .purchase-products-panel .table-wrap{position:relative!important;z-index:1!important} .purchase-products-panel + .purchase-bottom, .purchase-bottom{position:relative!important;z-index:1!important} .purchase-product-search .purchase-suggestion{ min-height:58px!important; display:grid!important; grid-template-columns:40px minmax(0,1fr) auto!important; align-items:center!important; gap:11px!important; padding:9px 10px!important; border-radius:10px!important; } .purchase-product-search .purchase-suggestion:hover{background:var(--surface-hover)!important} .purchase-product-search .purchase-suggestion b{font-size:13px!important;font-weight:750!important;line-height:1.3!important} .purchase-product-search .purchase-suggestion small{font-size:11px!important;line-height:1.4!important;color:var(--muted)!important} .purchase-product-search .purchase-suggestion strong{font-size:12.5px!important;font-weight:800!important;color:var(--text-strong)!important} /* Analytics workspace: eye-friendly desktop scale with deliberate responsive collapse. */ .analytics-hero-v2{padding:24px!important;gap:22px!important} .analytics-hero-copy .section-kicker, .analytics-section-head .section-kicker{font-size:10.5px!important;letter-spacing:.065em!important} .analytics-hero-copy h2{font-size:27px!important;line-height:1.15!important;margin:6px 0!important} .analytics-hero-copy p{font-size:13.5px!important;line-height:1.6!important} .analytics-range{font-size:12px!important;min-height:34px!important;padding:8px 11px!important} .analytics-period-v2 label>span{font-size:11.5px!important;font-weight:750!important} .analytics-period-v2 .smart-select-button, .analytics-period-v2 select{font-size:13px!important;min-height:44px!important} .analytics-hero-actions .secondary-btn{min-height:44px!important;font-size:12.5px!important} .analytics-metric-grid-v2{gap:14px!important;margin:16px 0!important} .analytics-metric-v2{min-height:112px!important;padding:16px!important;gap:12px!important;border-radius:15px!important} .analytics-metric-v2 .metric-icon{width:46px!important;height:46px!important;flex-basis:46px!important;font-size:15px!important} .analytics-metric-v2 small{font-size:12px!important;line-height:1.3!important;font-weight:750!important} .analytics-metric-v2 strong{font-size:22px!important;line-height:1.12!important;margin:5px 0 3px!important} .analytics-metric-v2 p{font-size:11px!important;line-height:1.45!important} .analytics-layout-v2,.analytics-bottom-grid-v2{gap:16px!important} .analytics-section-head{margin-bottom:17px!important;gap:16px!important} .analytics-section-head h2{font-size:20px!important;line-height:1.2!important;margin:4px 0!important} .analytics-section-head p{font-size:12.5px!important;line-height:1.55!important} .analytics-head-stat span{font-size:11px!important} .analytics-head-stat strong{font-size:17px!important} .analytics-trend-bars{height:330px!important;gap:9px!important;padding-top:14px!important} .analytics-trend-bar{grid-template-rows:28px minmax(0,1fr) 34px!important;gap:6px!important} .analytics-bar-value{font-size:10px!important;line-height:1.2!important;font-weight:750!important} .analytics-trend-bar>span{font-size:10px!important;line-height:1.3!important} .analytics-health-list>div{padding:13px 0!important} .analytics-health-list span{font-size:12.5px!important;line-height:1.4!important} .analytics-health-list b{font-size:13px!important} .analytics-progress{padding:13px!important} .analytics-progress>div:first-child{font-size:11.5px!important} .analytics-payment-list>div{padding:11px 0!important} .analytics-payment-list span,.analytics-payment-list b{font-size:12.5px!important} .analytics-payment-list small{font-size:10.75px!important;line-height:1.4!important} .analytics-expiry-list>div{padding:11px 0!important} .analytics-expiry-list b{font-size:12.5px!important} .analytics-expiry-list small{font-size:10.75px!important;line-height:1.4!important} .analytics-expiry-list strong{font-size:11.5px!important} .analytics-list-empty{font-size:11.5px!important;line-height:1.5!important} .analytics-empty b{font-size:13px!important}.analytics-empty span{font-size:11.5px!important} /* Business settings: logo + favicon are one coherent media row. */ .settings-panel{border-radius:17px!important} .settings-panel>.panel-head{margin-bottom:16px!important} .settings-panel>.panel-head h2{font-size:21px!important;line-height:1.2!important} .settings-panel>.panel-head p{font-size:12.5px!important;line-height:1.55!important;margin-top:4px!important} #business-details{padding:18px!important} .business-media-grid{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:14px!important; margin:0 0 20px!important; } .business-media-grid .business-media-card{ min-width:0!important; margin:0!important; padding:15px!important; display:grid!important; grid-template-columns:76px minmax(0,1fr)!important; grid-template-rows:auto auto!important; align-items:center!important; gap:12px 14px!important; border:1px solid var(--border)!important; border-radius:14px!important; background:var(--surface-soft)!important; } .business-media-grid .business-logo-preview, .business-media-grid .business-favicon-preview{ grid-column:1!important; grid-row:1!important; width:76px!important; height:70px!important; margin:0!important; display:grid!important; place-items:center!important; border:1px solid var(--border)!important; border-radius:13px!important; background:var(--surface)!important; overflow:hidden!important; color:var(--primary)!important; font-size:22px!important; font-weight:800!important; } .business-media-grid .business-favicon-preview{width:70px!important;height:70px!important} .business-media-grid .business-logo-preview img, .business-media-grid .business-favicon-preview img{display:block!important;max-width:100%!important;max-height:100%!important;width:auto!important;height:auto!important;object-fit:contain!important} .business-media-grid .business-logo-copy{grid-column:2!important;grid-row:1!important;min-width:0!important} .business-media-grid .business-logo-copy b{display:block!important;font-size:14px!important;line-height:1.3!important;color:var(--text-strong)!important} .business-media-grid .business-logo-copy span{display:block!important;margin-top:4px!important;font-size:12px!important;line-height:1.5!important;color:var(--text)!important} .business-media-grid .business-logo-copy small{display:block!important;margin-top:4px!important;font-size:10.75px!important;line-height:1.45!important;color:var(--muted)!important} .business-media-grid .business-logo-actions{ grid-column:1/-1!important; grid-row:2!important; display:flex!important; align-items:center!important; justify-content:flex-start!important; flex-wrap:wrap!important; gap:9px 12px!important; padding-top:12px!important; margin-top:1px!important; border-top:1px solid var(--border)!important; } .business-media-grid .business-logo-actions .secondary-btn{min-height:40px!important;font-size:12px!important} .business-media-grid .logo-remove-option{font-size:11.5px!important;line-height:1.4!important;color:var(--muted)!important} #business-details>.form-grid{gap:14px!important;padding-top:2px!important} #business-details>.form-grid>label{font-size:12.5px!important;font-weight:750!important;line-height:1.35!important;color:var(--text-strong)!important} #business-details>.form-grid input, #business-details>.form-grid textarea{margin-top:6px!important;min-height:45px!important;font-size:13.5px!important;font-weight:600!important;padding:10px 12px!important;border-radius:11px!important} #business-details>.form-grid textarea{min-height:82px!important;line-height:1.55!important;resize:vertical!important} .settings-panel .color-field>span{font-size:12px!important;font-weight:750!important} .settings-panel .color-field .hex{font-size:12.5px!important} .settings-panel .theme-preview strong{font-size:13px!important}.settings-panel .theme-preview span{font-size:11.5px!important;line-height:1.45!important} .settings-panel .number-format-card b{font-size:12.5px!important}.settings-panel .number-format-card small{font-size:10.75px!important;line-height:1.45!important}.settings-panel .number-format-card input{font-size:12.5px!important;min-height:42px!important} .settings-panel .numbering-help{font-size:11.5px!important;line-height:1.6!important} .save-row{padding:4px 0 12px!important}.save-row .primary-btn{min-height:44px!important;font-size:12.5px!important;padding-inline:18px!important} @media(max-width:1500px){ .analytics-metric-grid-v2{grid-template-columns:repeat(3,minmax(0,1fr))!important} } @media(max-width:1100px){ .analytics-layout-v2,.analytics-bottom-grid-v2{grid-template-columns:1fr!important} .analytics-trend-bars{overflow-x:auto!important;grid-template-columns:repeat(var(--analytics-bars),minmax(72px,1fr))!important} .business-media-grid{grid-template-columns:1fr!important} } @media(max-width:820px){ .analytics-hero-v2{align-items:stretch!important;flex-direction:column!important;padding:18px!important} .analytics-hero-actions{display:grid!important;grid-template-columns:1fr 1fr!important;width:100%!important} .analytics-hero-actions>*{width:100%!important}.analytics-hero-actions .secondary-btn{justify-content:center!important} .analytics-metric-grid-v2{grid-template-columns:repeat(2,minmax(0,1fr))!important} .analytics-section-head{flex-direction:column!important}.analytics-head-stat{text-align:left!important} #business-details{padding:15px!important} #business-details>.form-grid{grid-template-columns:1fr!important} #business-details>.form-grid>.full{grid-column:auto!important} } @media(max-width:600px){ .purchase-product-search .purchase-suggestions{max-height:min(55vh,320px)!important} .purchase-product-search .purchase-suggestion{grid-template-columns:36px minmax(0,1fr)!important;min-height:58px!important} .purchase-product-search .purchase-suggestion strong{grid-column:2!important;margin-top:2px!important} .analytics-hero-copy h2{font-size:23px!important} .analytics-hero-copy p{font-size:12.5px!important} .analytics-hero-actions{grid-template-columns:1fr!important} .analytics-metric-grid-v2{grid-template-columns:1fr!important} .analytics-metric-v2{min-height:104px!important} .analytics-trend-bars{grid-template-columns:repeat(var(--analytics-bars),minmax(78px,1fr))!important} .business-media-grid .business-media-card{grid-template-columns:64px minmax(0,1fr)!important;padding:13px!important;gap:10px 12px!important} .business-media-grid .business-logo-preview,.business-media-grid .business-favicon-preview{width:64px!important;height:64px!important} .business-media-grid .business-logo-copy b{font-size:13.5px!important}.business-media-grid .business-logo-copy span{font-size:11.5px!important}.business-media-grid .business-logo-copy small{font-size:10.5px!important} .business-media-grid .business-logo-actions{display:grid!important;grid-template-columns:1fr!important} .business-media-grid .business-logo-actions .secondary-btn{width:100%!important;justify-content:center!important} .settings-panel>.panel-head h2{font-size:19px!important}.settings-panel>.panel-head p{font-size:12px!important} } /* Settings-wide readability: keep Business & Theme management consistent. */ .settings-panel .form-grid>label{font-size:12.25px!important;font-weight:750!important;line-height:1.35!important} .settings-panel .form-grid>label :is(input,textarea,select), .settings-panel .form-grid>label .smart-select-button{font-size:13px!important;font-weight:600!important;min-height:44px!important} .settings-panel .tracking-setting-card{padding:14px!important;gap:13px!important;border-radius:13px!important} .settings-panel .tracking-setting-copy b{font-size:13.5px!important;line-height:1.3!important} .settings-panel .tracking-setting-copy span{font-size:11.75px!important;line-height:1.5!important} .settings-panel .tracking-setting-copy small{font-size:10.5px!important;line-height:1.5!important;margin-top:3px!important} .settings-panel .tracking-setting-icon{width:42px!important;height:42px!important;font-size:14px!important} .settings-region-badge{font-size:11px!important;padding:8px 11px!important} .regional-setting-card{padding:16px!important;border-radius:14px!important} .regional-card-head{gap:11px!important;padding-bottom:13px!important;margin-bottom:13px!important} .regional-card-icon{width:42px!important;height:42px!important;font-size:15px!important} .regional-card-head b{font-size:14px!important} .regional-card-head small{font-size:11px!important;line-height:1.5!important} .regional-form-grid>label{font-size:12px!important;font-weight:750!important} .regional-form-grid input,.regional-form-grid select,.regional-form-grid .smart-select-button{min-height:44px!important;font-size:13px!important;font-weight:600!important} .currency-preview{padding:12px 13px!important}.currency-preview span{font-size:10.5px!important}.currency-preview small{font-size:10.5px!important;line-height:1.4!important}.currency-preview strong{font-size:17px!important} .tax-master-copy b{font-size:13px!important}.tax-master-copy small{font-size:10.75px!important;line-height:1.5!important}.tax-status-badge{font-size:10.5px!important} .tax-logic-guide>div p b{font-size:11.75px!important}.tax-logic-guide>div p small{font-size:10.25px!important;line-height:1.45!important} .regional-switch-row b{font-size:12px!important}.regional-switch-row small{font-size:10.5px!important;line-height:1.5!important} .regional-settings-note{font-size:11px!important;line-height:1.55!important;padding:12px 13px!important} .tax-preview-heading span{font-size:10.75px!important}.tax-preview-heading small{font-size:10.5px!important;line-height:1.4!important} .bank-master-panel .bank-master-summary>div{padding:14px!important} .bank-master-panel .bank-master-summary span{font-size:10.75px!important;font-weight:750!important} .bank-master-panel .bank-master-summary strong{font-size:13.5px!important;line-height:1.35!important} .bank-account-card{padding:14px!important} .bank-account-top b{font-size:13px!important}.bank-account-top span:not(.pill){font-size:11px!important}.bank-account-number{font-size:13.5px!important}.bank-account-meta span{font-size:10.75px!important} @media(max-width:760px){ .settings-panel{padding:14px!important} .regional-settings-grid{grid-template-columns:1fr!important} .bank-master-panel .bank-master-summary{grid-template-columns:1fr!important} .bank-master-grid{grid-template-columns:1fr!important} .settings-panel .form-actions{display:grid!important;grid-template-columns:1fr!important} .settings-panel .form-actions .primary-btn,.settings-panel .form-actions .secondary-btn{width:100%!important;justify-content:center!important} } /* ============================================================================ V42 — Unified document summary cards + quotation status management One summary language for Purchase, Sale/Invoice, Quotation and Returns. ============================================================================ */ .document-summary-card{ padding:18px!important; border:1px solid var(--border)!important; border-radius:16px!important; background:var(--surface)!important; box-shadow:var(--shadow-sm)!important; min-width:0!important; } .document-summary-card .document-summary-row{ display:flex!important; align-items:center!important; justify-content:space-between!important; gap:18px!important; min-height:43px!important; padding:11px 0!important; margin:0!important; border:0!important; border-bottom:1px solid var(--border)!important; font-size:13px!important; line-height:1.35!important; } .document-summary-card .document-summary-row>span{ color:var(--text)!important; font-size:13px!important; font-weight:560!important; line-height:1.35!important; } .document-summary-card .document-summary-row>b, .document-summary-card .document-summary-row>strong{ color:var(--text-strong)!important; font-size:13.5px!important; font-weight:780!important; line-height:1.3!important; white-space:nowrap!important; } .document-summary-card .document-summary-total{ display:flex!important; align-items:center!important; justify-content:space-between!important; gap:18px!important; min-height:52px!important; margin-top:0!important; padding:14px 0 12px!important; border-top:2px solid var(--border-strong)!important; border-bottom:0!important; font-size:15px!important; font-weight:800!important; line-height:1.3!important; } .document-summary-card .document-summary-total>span{ color:var(--text-strong)!important; font-size:15px!important; font-weight:800!important; } .document-summary-card .document-summary-total>b, .document-summary-card .document-summary-total>strong{ color:var(--text-strong)!important; font-size:18px!important; font-weight:850!important; white-space:nowrap!important; } .document-summary-card>.section-kicker{ display:block!important; margin:0 0 6px!important; font-size:10.5px!important; line-height:1.3!important; font-weight:850!important; letter-spacing:.65px!important; } .document-summary-card>label{ display:grid!important; gap:7px!important; margin:13px 0 3px!important; color:var(--text)!important; font-size:12.5px!important; font-weight:750!important; } .document-summary-card>label input, .document-summary-card>label select, .document-summary-card>label .smart-select-button, .document-summary-card .quotation-discount input, .document-summary-card .quotation-discount select{ min-height:42px!important; font-size:13px!important; font-weight:650!important; } .document-summary-card .quotation-discount{ gap:7px!important; } .document-summary-card .muted-box, .document-summary-card #creditHintSummary{ margin-top:10px!important; padding:10px 11px!important; font-size:11.5px!important; line-height:1.45!important; } .document-summary-card .checkout, .document-summary-card>.secondary-btn, .document-summary-card .pos-cancel, .document-summary-card .quotation-actions>*{ min-height:44px!important; font-size:12.5px!important; font-weight:780!important; border-radius:10px!important; } .document-summary-card .checkout{ margin-top:13px!important; } .document-summary-card>.secondary-btn, .document-summary-card .pos-cancel{ margin-top:8px!important; } .document-summary-card .quotation-actions{ gap:8px!important; margin-top:14px!important; } /* Return summary's value row is the financial total; suppress the older muted row styling. */ .return-summary-card.document-summary-card .document-summary-total{ margin-top:0!important; } /* Manage Quotations: inline status control is intentionally native and compact so status can be changed without introducing another floating smart-select. */ .quotation-status-form{margin:0;display:inline-flex;align-items:center;min-width:132px} .quotation-status-select{ width:100%; min-width:132px; height:36px; padding:0 34px 0 11px; border:1px solid var(--border); border-radius:9px; background:var(--surface); color:var(--text-strong); font-size:12px; font-weight:750; line-height:1; cursor:pointer; } .quotation-status-select:hover,.quotation-status-select:focus{border-color:var(--primary-border-strong);outline:0;box-shadow:0 0 0 3px var(--primary-soft)} .quotation-status-select.status-accepted{color:var(--success)} .quotation-status-select.status-rejected,.quotation-status-select.status-cancelled{color:var(--danger)} .quotation-status-select.status-sent{color:var(--primary)} .quotation-status-action{margin:0} .quotation-status-action label{display:flex;align-items:center;gap:7px;margin:0;padding:0 9px;border:1px solid var(--border);border-radius:10px;background:var(--surface);height:40px} .quotation-status-action label>span{font-size:10.5px;font-weight:750;color:var(--muted)} .quotation-status-action select{height:30px;min-width:112px;padding:0 28px 0 8px;border:0;background:transparent;font-size:12px;font-weight:750;color:var(--text-strong);box-shadow:none!important;outline:0} @media(max-width:1100px){ .document-summary-card{padding:17px!important} } @media(max-width:760px){ .document-summary-card{padding:15px!important;border-radius:13px!important} .document-summary-card .document-summary-row{min-height:42px!important;padding:10px 0!important;font-size:12.75px!important} .document-summary-card .document-summary-row>span{font-size:12.75px!important} .document-summary-card .document-summary-row>b, .document-summary-card .document-summary-row>strong{font-size:13.25px!important} .document-summary-card .document-summary-total{min-height:50px!important;padding:13px 0 11px!important} .document-summary-card .document-summary-total>span{font-size:14.5px!important} .document-summary-card .document-summary-total>b, .document-summary-card .document-summary-total>strong{font-size:17px!important} .quotation-status-form{min-width:120px} .quotation-status-select{min-width:120px;font-size:11.5px} .quotation-status-action label{width:100%;height:auto;min-height:42px;justify-content:space-between} .quotation-status-action select{flex:1;min-width:0} } @media(max-width:480px){ .document-summary-card{padding:14px!important} .document-summary-card .document-summary-row{gap:12px!important} .document-summary-card .document-summary-total{gap:12px!important} .quotation-status-form{width:100%;min-width:0} .quotation-status-select{width:100%;min-width:0} .quotation-view-actions .quotation-status-action{width:100%} } /* Summary cards always stack their rows; this prevents older tablet-specific grid rules from making Create Sale look different from Purchase/Returns. */ .document-summary-card{display:block!important} /* ========================================================= V40 — Document workflows: invoice/purchase types, returns, delivery challans and responsive professional editors ========================================================= */ .invoice-document-options,.purchase-document-options{ display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:14px;padding:14px;border:1px solid var(--border);border-radius:14px;background:var(--surface-soft) } .invoice-document-options .compact-field,.purchase-document-options .compact-field{min-width:0;margin:0} .document-field-label{display:flex;align-items:center;gap:4px;min-width:0;white-space:nowrap;line-height:1.25} .document-field-label small{display:inline!important;margin:0!important;font-size:11px;color:var(--muted);font-weight:600;white-space:nowrap} .invoice-document-options .compact-field>small,.purchase-document-options .compact-field>small{font-size:11px;color:var(--muted);font-weight:600;margin-left:4px} .invoice-reference-toggle{align-self:end;min-height:44px} .invoice-reference-panel{margin-top:12px;padding:14px;border:1px solid var(--primary-border);border-radius:14px;background:var(--primary-soft)} .invoice-reference-panel[hidden]{display:none!important} .invoice-reference-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px} .invoice-reference-grid label,.delivery-reference-grid label,.delivery-doc-grid label{display:grid;gap:7px;font-size:13px;font-weight:750;color:var(--text)} .invoice-reference-grid input,.delivery-reference-grid input,.delivery-doc-grid input,.delivery-doc-grid select{width:100%;min-width:0;height:44px;border:1px solid var(--border);border-radius:11px;padding:0 12px;background:#fff;color:var(--text);font:inherit;font-size:13px;font-weight:650} .custom-field-builder,.custom-fields-editor{margin-top:14px;padding-top:13px;border-top:1px solid var(--primary-border)} .custom-field-head,.custom-fields-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.custom-field-head b,.custom-fields-head b{display:block;font-size:13px}.custom-field-head small,.custom-fields-head small{display:block;margin-top:2px;color:var(--muted);font-size:11px;line-height:1.35} .invoice-custom-field-row,.custom-field-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) 38px;gap:9px;align-items:center;margin-top:9px}.invoice-custom-field-row input,.custom-field-row input{height:42px;border:1px solid var(--border);border-radius:10px;padding:0 11px;font:inherit;font-size:13px;background:#fff;color:var(--text)} .purchase-tax-mode-note{grid-column:1/-1;display:flex;align-items:flex-start;gap:8px;padding:10px 11px;border:1px solid var(--border);border-radius:10px;background:#fff;color:var(--muted);font-size:12px;line-height:1.4}.purchase-tax-mode-note.is-taxable{border-color:var(--primary-border);background:var(--primary-soft);color:var(--text)} .tax-inactive{opacity:.58}.tax-inactive input{background:var(--surface-soft)!important;cursor:not-allowed} .purchase-line-input,.table-input{width:100%;min-width:84px;height:38px;border:1px solid var(--border);border-radius:9px;padding:0 10px;font:inherit;font-size:13px;font-weight:650;color:var(--text);background:#fff} .return-manage-page .panel-head,.delivery-manage-page .panel-head{margin-bottom:14px}.return-manage-page .panel-head h2,.delivery-manage-page .panel-head h2{font-size:21px}.return-manage-page .panel-head p,.delivery-manage-page .panel-head p{font-size:13px;line-height:1.45}.return-filter-bar{grid-template-columns:minmax(220px,1.4fr) repeat(3,minmax(145px,.8fr)) auto auto;align-items:end}.return-filter-bar label{min-width:0}.return-filter-bar input,.return-filter-bar select{width:100%} .return-manage-page .table-wrap table td,.return-manage-page .table-wrap table th,.delivery-manage-page .table-wrap table td,.delivery-manage-page .table-wrap table th{font-size:13px} .return-manage-page .row-actions form,.delivery-manage-page .row-actions form{margin:0;display:inline-flex} .delivery-challan-workspace{display:grid;gap:16px}.delivery-doc-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.delivery-reference-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:14px}.delivery-notes-actions{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:end}.delivery-notes-actions>label{display:grid;gap:7px;font-size:13px;font-weight:750}.delivery-notes-actions textarea{min-height:100px;border:1px solid var(--border);border-radius:11px;padding:11px;font:inherit;font-size:13px;resize:vertical}.delivery-notes-actions .form-actions{margin:0;align-self:end}.delivery-challan-workspace .pos-search-box{position:relative;z-index:20}.delivery-challan-workspace .pos-product-suggestions{z-index:300} @media(max-width:1200px){ .invoice-document-options,.purchase-document-options{grid-template-columns:repeat(2,minmax(0,1fr))}.invoice-reference-grid,.delivery-reference-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.delivery-doc-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.return-filter-bar{grid-template-columns:repeat(3,minmax(0,1fr))}.return-filter-bar>button,.return-filter-bar>a{min-height:44px} } @media(max-width:820px){ .invoice-document-options,.purchase-document-options,.invoice-reference-grid,.delivery-reference-grid,.delivery-doc-grid{grid-template-columns:1fr 1fr}.invoice-reference-toggle{width:100%}.return-filter-bar{grid-template-columns:1fr 1fr}.delivery-notes-actions{grid-template-columns:1fr}.delivery-notes-actions .form-actions{width:100%;display:grid;grid-template-columns:1fr 1fr}.delivery-notes-actions .form-actions>*{width:100%}.return-manage-page .panel-head,.delivery-manage-page .panel-head{align-items:flex-start;gap:12px}.return-manage-page .panel-head>.primary-btn,.delivery-manage-page .panel-head>.primary-btn{width:100%} } @media(max-width:560px){ .invoice-document-options,.purchase-document-options,.invoice-reference-grid,.delivery-reference-grid,.delivery-doc-grid,.return-filter-bar{grid-template-columns:1fr}.invoice-reference-panel,.invoice-document-options,.purchase-document-options{padding:11px}.invoice-custom-field-row,.custom-field-row{grid-template-columns:1fr 38px}.invoice-custom-field-row input:nth-child(2),.custom-field-row input:nth-child(2){grid-column:1/2}.invoice-custom-field-row button,.custom-field-row button{grid-column:2;grid-row:1/3;height:100%;min-height:42px}.custom-field-head,.custom-fields-head{align-items:flex-start;flex-direction:column}.custom-field-head .secondary-btn,.custom-fields-head .secondary-btn{width:100%}.return-manage-page .table-wrap,.delivery-manage-page .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}.return-manage-page table,.delivery-manage-page table{min-width:820px}.delivery-notes-actions .form-actions{grid-template-columns:1fr} } .purchase-cost-cell{display:grid;gap:4px}.purchase-cost-cell small{font-size:10.5px;font-weight:700;color:var(--muted);white-space:nowrap} .return-edit-page{display:grid;gap:16px}.return-edit-lock-note{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border:1px solid var(--primary-border);border-radius:12px;background:var(--primary-soft)}.return-edit-lock-note>i{margin-top:2px;color:var(--primary)}.return-edit-lock-note b{display:block;font-size:13px}.return-edit-lock-note span{display:block;margin-top:3px;color:var(--muted);font-size:12px;line-height:1.45}.return-edit-form{padding-top:4px}.return-edit-page .muted{font-weight:600;color:var(--muted);font-size:.78em} @media(max-width:640px){.return-edit-page .panel-head{align-items:flex-start}.return-edit-page .panel-head .row-actions{width:100%;display:grid;grid-template-columns:1fr 1fr}.return-edit-page .panel-head .row-actions>*{width:100%}} /* ========================================================= V41 — Responsive media, unified pagination and delivery challan workspace refinements ========================================================= */ /* Business logo / favicon: the uploaded artwork owns the full preview area. No artificial white inset is added at any responsive size. */ .brand-mark.has-brand-logo{ padding:0!important; border:0!important; background:transparent!important; box-shadow:none!important; overflow:hidden!important; } .brand-mark.has-brand-logo img{ display:block!important; width:100%!important; height:100%!important; max-width:none!important; max-height:none!important; margin:0!important; padding:0!important; object-fit:contain!important; object-position:center!important; } .business-media-grid .business-logo-preview, .business-media-grid .business-favicon-preview, .business-logo-preview, .business-favicon-preview{ padding:0!important; background:transparent!important; overflow:hidden!important; } .business-media-grid .business-logo-preview img, .business-media-grid .business-favicon-preview img, .business-logo-preview img, .business-favicon-preview img{ display:block!important; width:100%!important; height:100%!important; max-width:none!important; max-height:none!important; margin:0!important; padding:0!important; object-fit:contain!important; object-position:center!important; } /* Reusable server-side table pagination. */ .table-pagination{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:14px; padding-top:14px; border-top:1px solid var(--border); } .pagination-summary{ min-width:0; color:var(--muted); font-size:12px; font-weight:600; line-height:1.35; } .pagination-summary b{color:var(--text-strong);font-weight:800} .pagination-controls{display:flex;align-items:center;justify-content:flex-end;gap:6px;min-width:0;flex-wrap:wrap} .pagination-pages{display:flex;align-items:center;gap:4px;flex-wrap:wrap} .pagination-page,.pagination-arrow{ width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; flex:0 0 36px; border:1px solid var(--border); border-radius:9px; background:var(--surface); color:var(--text); font-size:12px; font-weight:800; text-decoration:none; transition:border-color .16s ease,box-shadow .16s ease,background .16s ease,color .16s ease; } .pagination-page:hover,.pagination-arrow:hover{border-color:var(--primary-border-strong);background:var(--primary-soft);color:var(--primary);box-shadow:var(--shadow-sm)} .pagination-page.active{border-color:var(--primary);background:var(--primary);color:var(--on-primary);box-shadow:0 5px 14px var(--primary-shadow)} .pagination-arrow.disabled{pointer-events:none;opacity:.42;box-shadow:none} .pagination-ellipsis{width:24px;height:36px;display:inline-flex;align-items:center;justify-content:center;color:var(--muted);font-weight:800} .pagination-size{display:flex;align-items:center;margin:0 0 0 6px} .pagination-size label{display:flex;align-items:center;gap:7px;margin:0;color:var(--muted);font-size:11.5px;font-weight:750;white-space:nowrap} .pagination-size select{ width:auto!important; min-width:68px!important; height:36px!important; min-height:36px!important; padding:0 28px 0 10px!important; border:1px solid var(--border)!important; border-radius:9px!important; background-color:var(--surface)!important; color:var(--text-strong)!important; font-size:12px!important; font-weight:750!important; } /* Delivery Challan: one connected document card and the same product-search language used by Create Sale / Invoice. */ .delivery-document-fields{ padding:14px; border:1px solid var(--border); border-radius:14px; background:var(--surface-soft); } .delivery-doc-grid.has-branch{grid-template-columns:minmax(220px,1.35fr) repeat(4,minmax(145px,1fr))} .delivery-doc-grid.no-branch{grid-template-columns:minmax(260px,1.45fr) repeat(3,minmax(160px,1fr))} .delivery-document-fields .delivery-reference-grid{padding-top:14px;border-top:1px solid var(--border)} .delivery-document-fields .custom-fields-editor{border-top:1px solid var(--border)} .delivery-items-panel .pos-product-search{margin-bottom:12px} .delivery-items-panel .pos-search-box{min-width:0} .delivery-items-panel .pos-search-clear{display:none} .delivery-items-panel .pos-search-clear.show{display:inline-flex} .delivery-lines-table .pos-product-cell{min-width:220px} .delivery-lines-table .product-avatar{flex:0 0 auto} .delivery-lines-table .delivery-qty-input{min-width:86px;max-width:110px;text-align:center} .delivery-unit-chip{display:inline-flex;align-items:center;min-height:30px;padding:0 9px;border:1px solid var(--border);border-radius:8px;background:var(--surface-soft);color:var(--text);font-size:12px;font-weight:750;white-space:nowrap} .delivery-empty{min-height:150px} .delivery-items-panel .pos-suggestion-empty{display:flex;align-items:center;gap:9px;padding:13px 14px;color:var(--muted);font-size:12px;font-weight:650} @media(max-width:1200px){ .delivery-doc-grid.has-branch{grid-template-columns:repeat(3,minmax(0,1fr))} .delivery-doc-grid.no-branch{grid-template-columns:repeat(2,minmax(0,1fr))} .delivery-doc-grid.no-branch .delivery-customer-field{grid-column:1/-1} } @media(max-width:820px){ .table-pagination{align-items:flex-start;flex-direction:column} .pagination-controls{width:100%;justify-content:flex-start} .delivery-doc-grid.has-branch,.delivery-doc-grid.no-branch{grid-template-columns:1fr 1fr} .delivery-doc-grid.no-branch .delivery-customer-field{grid-column:1/-1} .delivery-document-fields{padding:12px} .delivery-items-panel .pos-product-search{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px} } @media(max-width:640px){ .table-pagination{margin-top:12px;padding-top:12px;gap:10px} .pagination-controls{display:grid;grid-template-columns:36px minmax(0,1fr) 36px;width:100%;gap:6px} .pagination-pages{justify-content:center;min-width:0} .pagination-size{grid-column:1/-1;margin:3px 0 0;justify-content:flex-start} .pagination-page{width:34px;height:34px;flex-basis:34px} .pagination-ellipsis{width:18px;height:34px} .delivery-doc-grid.has-branch,.delivery-doc-grid.no-branch{grid-template-columns:1fr} .delivery-doc-grid.no-branch .delivery-customer-field{grid-column:auto} .delivery-document-fields{padding:10px;border-radius:12px} .delivery-items-panel .pos-product-search{grid-template-columns:1fr} .delivery-items-panel .pos-product-search>.secondary-btn{width:100%} .delivery-lines-table{min-width:760px} } /* ProBill 2026-09-21 traceability & transfer UX */ .trace-source-card{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:12px;padding:12px;border:1px solid var(--primary-border);background:var(--primary-soft);border-radius:12px}.trace-source-card .full{grid-column:1/-1}.trace-source-hint{grid-column:1/-1;display:flex;align-items:center;gap:8px;color:var(--muted);font-size:11px}.trace-source-hint i{color:var(--primary)}.transfer-history-rich{display:grid;gap:10px}.transfer-history-rich .transfer-history-date{display:inline-flex;margin:5px 0 0}.transfer-history-route>span{display:grid!important;grid-template-columns:auto 1fr;column-gap:7px;align-items:center}.transfer-history-route>span i{grid-row:1/3}.transfer-history-route>span small{font-size:8px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}.transfer-history-route>span b{font-size:10px;color:var(--text-strong);overflow:hidden;text-overflow:ellipsis}.transfer-history-stats{display:flex;flex-wrap:wrap;gap:7px}.transfer-history-stats span{display:flex;align-items:center;gap:5px;padding:6px 8px;border:1px solid var(--border);border-radius:8px;background:var(--surface-soft);font-size:9px;color:var(--muted)}.transfer-history-stats i{color:var(--primary)}.transfer-history-stats b{color:var(--text-strong)}.transfer-history-products{display:flex;flex-wrap:wrap;gap:5px}.transfer-history-products span{padding:5px 7px;border-radius:999px;background:var(--primary-soft);border:1px solid var(--primary-border);color:var(--text);font-size:8.5px;font-weight:700}.transfer-history-products .more{background:var(--surface-soft);border-color:var(--border);color:var(--muted)}.transfer-history-note{display:flex;align-items:flex-start;gap:7px;padding-top:8px;border-top:1px dashed var(--border);font-size:9px;color:var(--muted)}.transfer-history-note i{margin-top:1px;color:var(--primary)}@media(max-width:680px){.trace-source-card{grid-template-columns:1fr}.transfer-history-route{grid-template-columns:1fr 20px 1fr}.transfer-history-stats{display:grid;grid-template-columns:1fr 1fr}.transfer-history-stats span{justify-content:center}} /* ========================================================= Expansion platform foundation — modules / migrations ========================================================= */ .platform-hero{overflow:hidden} .platform-version-chip{display:inline-flex;align-items:center;gap:8px;padding:10px 13px;border:1px solid var(--line);border-radius:12px;background:var(--soft);font-size:12px;font-weight:800;white-space:nowrap} .platform-version-chip i{color:var(--primary)} .platform-metrics{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:18px} .platform-metrics-four{grid-template-columns:repeat(4,minmax(0,1fr))} .platform-metric{min-width:0;padding:16px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg,#fff 0%,var(--soft) 100%)} .platform-metric span{display:block;color:var(--muted);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.055em} .platform-metric strong{display:block;margin-top:5px;color:var(--ink);font-size:21px;line-height:1.15;overflow-wrap:anywhere} .platform-metric small{display:block;margin-top:5px;color:var(--muted);font-size:11px} .feature-module-section .panel-head{margin-bottom:14px} .feature-module-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px} .feature-module-card{display:flex;min-height:225px;flex-direction:column;padding:17px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 5px 18px rgba(15,23,42,.035)} .feature-module-card.is-enabled{border-color:color-mix(in srgb,var(--primary) 28%,var(--line));box-shadow:0 8px 25px color-mix(in srgb,var(--primary) 8%,transparent)} .feature-module-card.is-locked{background:linear-gradient(180deg,#fff 0%,#fbfcfe 100%)} .feature-module-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px} .feature-number{display:grid;place-items:center;min-width:36px;height:30px;padding:0 8px;border-radius:9px;background:var(--soft);color:var(--primary);font-size:11px;font-weight:900} .feature-badges{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:6px} .feature-module-card h3{margin:14px 0 7px;font-size:15px;line-height:1.3} .feature-module-card p{margin:0;color:var(--muted);font-size:12px;line-height:1.55} .feature-module-key{margin-top:12px}.feature-module-key code,.migration-status-row code{display:inline-block;max-width:100%;padding:5px 7px;border-radius:7px;background:var(--soft);font-size:10px;overflow-wrap:anywhere} .feature-module-action{display:flex;align-items:flex-end;min-height:38px;margin-top:auto;padding-top:14px} .feature-lock-note{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-size:11px;font-weight:700} .feature-lock-note i{color:var(--primary)} .migration-status-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:16px} .migration-status-row>div{display:flex;align-items:center;gap:9px;min-width:0;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--soft)} .migration-status-row i{color:var(--primary)}.migration-status-row span{font-size:11px;font-weight:800;white-space:nowrap}.migration-status-row code{margin-left:auto} .update-safety-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px} .update-safety-grid>div{display:grid;grid-template-columns:34px 1fr;gap:5px 10px;padding:15px;border:1px solid var(--line);border-radius:14px;background:var(--soft)} .update-safety-grid i{grid-row:1/3;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#fff;color:var(--primary);border:1px solid var(--line)} .update-safety-grid b{font-size:12px}.update-safety-grid span{color:var(--muted);font-size:11px;line-height:1.5} @media(max-width:1180px){.feature-module-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.platform-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}.platform-metrics-four{grid-template-columns:repeat(2,minmax(0,1fr))}.update-safety-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:720px){.feature-module-grid,.platform-metrics,.platform-metrics-four,.migration-status-row,.update-safety-grid{grid-template-columns:1fr}.feature-module-card{min-height:0}.platform-version-chip{margin-top:10px}.migration-status-row>div{align-items:flex-start;flex-wrap:wrap}.migration-status-row code{width:100%;margin-left:0}.feature-module-top{align-items:center}} /* 22 Sep 2026 — Phase 2 Sales Order read/list surface */ .sales-order-list-panel .filters{display:grid;grid-template-columns:minmax(220px,1.35fr) repeat(5,minmax(145px,1fr));align-items:end} .sales-order-list-panel .filters .filter-submit,.sales-order-list-panel .filters .filter-reset{min-height:44px} .sales-order-result-strip{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:14px 0;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:var(--surface-soft)} .sales-order-result-strip>span{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-size:11px;font-weight:750}.sales-order-result-strip>span i{color:var(--primary)} .sales-order-result-strip strong{font-size:16px;color:var(--text-strong)}.sales-order-result-strip small{margin-left:auto;color:var(--muted);font-size:10.5px;font-weight:650} .sales-order-table{min-width:1040px}.sales-order-number{display:flex;align-items:center;gap:9px;min-width:170px}.sales-order-number>span:last-child{display:grid;gap:2px}.sales-order-number small{font-size:9.5px;color:var(--muted);font-weight:600}.sales-order-doc-icon{width:32px;height:32px;flex:0 0 32px;display:grid;place-items:center;border-radius:9px;background:var(--primary-soft);color:var(--primary)} .sales-order-expected{display:block}.sales-order-expected.overdue{color:var(--danger);font-weight:750}.sales-order-overdue-label{display:block;margin-top:2px;font-size:9px;font-weight:800;color:var(--danger);text-transform:uppercase;letter-spacing:.04em} @media(max-width:1180px){.sales-order-list-panel .filters{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:760px){.sales-order-list-panel .filters{grid-template-columns:repeat(2,minmax(0,1fr))}.sales-order-result-strip small{width:100%;margin-left:0}} @media(max-width:520px){.sales-order-list-panel .filters{grid-template-columns:1fr}.sales-order-metrics{grid-template-columns:1fr!important}} /* ProBill 2026.09.22.3 — Sales Order Create/Edit */ .sales-order-form-page .sales-order-fields{display:grid;grid-template-columns:minmax(165px,.72fr) minmax(260px,1.35fr) minmax(155px,.72fr) minmax(175px,.78fr) minmax(210px,.95fr);gap:12px;align-items:end} .sales-order-form-page .sales-order-fields.without-branch{grid-template-columns:minmax(165px,.72fr) minmax(280px,1.4fr) minmax(170px,.8fr) minmax(190px,.85fr)} .sales-order-form-page .sales-order-fields>label{display:grid;gap:6px;min-width:0} .sales-order-form-page .sales-order-document-options{grid-template-columns:repeat(3,minmax(170px,1fr)) minmax(155px,.72fr) auto;align-items:end} .sales-order-status-chip{min-height:42px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 10px;border:1px solid var(--border);border-radius:10px;background:var(--surface-soft)} .sales-order-status-chip>span{font-size:9.5px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.04em} .sales-order-entry-table{min-width:900px} .sales-order-entry-table .quotation-cell-input{min-width:82px} .sales-order-entry-table .sales-order-tax-column .quotation-cell-input{max-width:88px} .sales-order-options{display:grid;gap:14px}.sales-order-options>label{display:grid;gap:6px} .sales-order-save-note{display:flex;align-items:flex-start;gap:8px;margin-top:12px;padding:10px 11px;border:1px solid var(--border);border-radius:10px;background:var(--surface-soft);color:var(--muted);font-size:10px;line-height:1.5} .sales-order-save-note i{margin-top:2px;color:var(--primary)} .sales-order-actions .sales-order-save-draft{border-color:var(--primary);color:var(--primary)} .sales-order-list-panel .panel-head{align-items:center}.sales-order-list-panel .panel-head .page-actions{margin-left:auto} .icon-action.disabled{opacity:.45;cursor:not-allowed;pointer-events:none} @media(max-width:1180px){.sales-order-form-page .sales-order-fields,.sales-order-form-page .sales-order-fields.without-branch{grid-template-columns:repeat(2,minmax(0,1fr))}.sales-order-form-page .sales-order-document-options{grid-template-columns:repeat(2,minmax(0,1fr))}.sales-order-form-page .sales-order-document-options .invoice-reference-toggle{grid-column:1/-1}} @media(max-width:700px){.sales-order-form-page .sales-order-fields,.sales-order-form-page .sales-order-fields.without-branch,.sales-order-form-page .sales-order-document-options{grid-template-columns:1fr}.sales-order-form-page .sales-order-document-options .invoice-reference-toggle{grid-column:auto}.sales-order-form-page .sales-order-status-chip{min-height:44px}.sales-order-list-panel .panel-head{align-items:flex-start}.sales-order-list-panel .panel-head .page-actions{width:100%;margin-left:0}.sales-order-list-panel .panel-head .page-actions>*{width:100%;justify-content:center}} /* Phase 6 — Purchase Order UI */ .purchase-order-list-panel .filters{display:grid;grid-template-columns:minmax(220px,1.35fr) repeat(5,minmax(145px,1fr));align-items:end} .purchase-order-list-panel .filters .filter-submit,.purchase-order-list-panel .filters .filter-reset{min-height:44px} .purchase-order-result-strip{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:14px 0;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:var(--surface-soft)} .purchase-order-result-strip>span{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-size:11px;font-weight:750}.purchase-order-result-strip>span i{color:var(--primary)} .purchase-order-result-strip strong{font-size:16px;color:var(--text-strong)}.purchase-order-result-strip small{margin-left:auto;color:var(--muted);font-size:10.5px;font-weight:650} .purchase-order-table{min-width:1040px}.purchase-order-number{display:flex;align-items:center;gap:9px;min-width:175px}.purchase-order-number>span:last-child{display:grid;gap:2px}.purchase-order-number small{font-size:9.5px;color:var(--muted);font-weight:600}.purchase-order-doc-icon{width:32px;height:32px;flex:0 0 32px;display:grid;place-items:center;border-radius:9px;background:var(--primary-soft);color:var(--primary)} .purchase-order-expected{display:block}.purchase-order-expected.overdue{color:var(--danger);font-weight:750}.purchase-order-overdue-label{display:block;margin-top:2px;font-size:9px;font-weight:800;color:var(--danger);text-transform:uppercase;letter-spacing:.04em} .purchase-order-form-page .purchase-order-fields{display:grid;grid-template-columns:minmax(175px,.78fr) minmax(260px,1.35fr) minmax(155px,.72fr) minmax(175px,.78fr) minmax(210px,.95fr);gap:12px;align-items:end} .purchase-order-form-page .purchase-order-fields.without-branch{grid-template-columns:minmax(175px,.78fr) minmax(280px,1.4fr) minmax(170px,.8fr) minmax(190px,.85fr)} .purchase-order-form-page .purchase-order-fields>label{display:grid;gap:6px;min-width:0} .purchase-order-form-page .purchase-order-document-options{grid-template-columns:repeat(3,minmax(170px,1fr)) minmax(155px,.72fr) auto;align-items:end} .purchase-order-status-chip{min-height:42px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 10px;border:1px solid var(--border);border-radius:10px;background:var(--surface-soft)} .purchase-order-status-chip>span{font-size:9.5px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.04em} .purchase-order-tax-note{display:flex;align-items:flex-start;gap:8px;margin-top:12px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface-soft);color:var(--muted);font-size:10px;line-height:1.45}.purchase-order-tax-note i{margin-top:2px;color:var(--muted)}.purchase-order-tax-note.is-taxable{border-color:var(--primary-border);background:var(--primary-soft-2)}.purchase-order-tax-note.is-taxable i{color:var(--primary)} .purchase-order-entry-table{min-width:900px}.purchase-order-entry-table .quotation-cell-input{min-width:82px}.purchase-order-entry-table .purchase-order-tax-column .quotation-cell-input{max-width:88px} .purchase-order-options{display:grid;gap:14px}.purchase-order-options>label{display:grid;gap:6px}.purchase-order-summary>label{display:grid;gap:6px} .purchase-order-save-note{display:flex;align-items:flex-start;gap:8px;margin-top:12px;padding:10px 11px;border:1px solid var(--border);border-radius:10px;background:var(--surface-soft);color:var(--muted);font-size:10px;line-height:1.5}.purchase-order-save-note i{margin-top:2px;color:var(--primary)} .purchase-order-actions .purchase-order-save-draft{border-color:var(--primary);color:var(--primary)} .purchase-order-list-panel .panel-head{align-items:center}.purchase-order-list-panel .panel-head .page-actions{margin-left:auto} @media(max-width:1180px){.purchase-order-list-panel .filters{grid-template-columns:repeat(3,minmax(0,1fr))}.purchase-order-form-page .purchase-order-fields,.purchase-order-form-page .purchase-order-fields.without-branch{grid-template-columns:repeat(2,minmax(0,1fr))}.purchase-order-form-page .purchase-order-document-options{grid-template-columns:repeat(2,minmax(0,1fr))}.purchase-order-form-page .purchase-order-document-options .invoice-reference-toggle{grid-column:1/-1}} @media(max-width:760px){.purchase-order-list-panel .filters{grid-template-columns:repeat(2,minmax(0,1fr))}.purchase-order-result-strip small{width:100%;margin-left:0}} @media(max-width:700px){.purchase-order-form-page .purchase-order-fields,.purchase-order-form-page .purchase-order-fields.without-branch,.purchase-order-form-page .purchase-order-document-options{grid-template-columns:1fr}.purchase-order-form-page .purchase-order-document-options .invoice-reference-toggle{grid-column:auto}.purchase-order-status-chip{min-height:44px}.purchase-order-list-panel .panel-head{align-items:flex-start}.purchase-order-list-panel .panel-head .page-actions{width:100%;margin-left:0}.purchase-order-list-panel .panel-head .page-actions>*{width:100%;justify-content:center}} @media(max-width:520px){.purchase-order-list-panel .filters{grid-template-columns:1fr}.purchase-order-metrics{grid-template-columns:1fr!important}} /* Phase 9 — Transporter Management */ .transporter-stats{margin-bottom:16px}.transporter-panel .panel-head{align-items:flex-start}.transporter-name{display:flex;align-items:center;gap:10px}.transporter-icon{width:38px;height:38px;border-radius:11px;background:var(--primary-soft);color:var(--primary);display:grid;place-items:center;flex:0 0 auto}.transporter-name span:last-child,.transporter-table td>span{display:flex;flex-direction:column;gap:2px}.cell-sub,.transporter-name small{display:block;color:var(--muted);font-size:12px;margin-top:3px}.fleet-chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center}.fleet-chip{display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border:1px solid var(--primary-border);border-radius:999px;background:var(--primary-soft-2);font-size:11px;font-weight:750;color:var(--text)}.fleet-chip.inactive{opacity:.55}.fleet-more{font-size:11px;color:var(--muted);font-weight:700}.fleet-detail-row td{padding-top:0!important;border-top:0!important}.fleet-detail{margin:0 8px 8px;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:var(--surface-soft)}.fleet-detail>b{display:flex;align-items:center;gap:7px;font-size:12px;margin-bottom:8px;color:var(--text)}.fleet-detail-list{display:grid;gap:7px}.fleet-detail-list article{display:grid;grid-template-columns:minmax(160px,1.2fr) minmax(150px,1fr) auto auto auto;gap:12px;align-items:center;padding:9px 10px;background:var(--surface);border:1px solid var(--border);border-radius:10px}.fleet-detail-list article>span{display:flex;flex-direction:column;gap:2px}.fleet-detail-list small{color:var(--muted);font-size:11px}.fleet-detail-list form{margin:0}.transporter-modal-box{width:min(760px,94vw)} .transport-document-panel{margin-top:14px;border:1px solid var(--border);border-radius:14px;background:var(--surface-soft);padding:14px}.transport-document-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.transport-document-head>div{display:flex;align-items:flex-start;gap:10px}.transport-document-head .transport-icon{width:36px;height:36px;border-radius:10px;background:var(--primary-soft);color:var(--primary);display:grid;place-items:center}.transport-document-head b{display:block;font-size:13px}.transport-document-head small{display:block;color:var(--muted);font-size:11px;margin-top:2px;line-height:1.4}.transport-fields{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.transport-fields label{min-width:0}.transport-fields .span-2{grid-column:span 2}.transport-fields .full{grid-column:1/-1}.transport-fields input,.transport-fields select,.transport-fields textarea{width:100%}.transport-helper{font-size:11px;color:var(--muted);margin-top:8px;display:flex;gap:6px;align-items:center} .transport-print-block{margin-top:12px;padding:10px 12px;border:1px solid #d9dde6;border-radius:8px}.transport-print-title{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}.transport-print-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px 12px;font-size:11px}.transport-print-grid span{display:flex;flex-direction:column;gap:1px}.transport-print-grid small{color:#667085;font-size:9px;text-transform:uppercase}.transport-print-grid b{font-weight:650} @media(max-width:980px){.transport-fields{grid-template-columns:repeat(2,minmax(0,1fr))}.fleet-detail-list article{grid-template-columns:1fr 1fr auto}.fleet-detail-list article form,.fleet-detail-list article button{justify-self:end}.transport-print-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:640px){.transport-fields{grid-template-columns:1fr}.transport-fields .span-2,.transport-fields .full{grid-column:auto}.transport-document-head{align-items:flex-start}.fleet-detail-list article{grid-template-columns:1fr auto}.fleet-detail-list article>span:nth-child(2){grid-column:1/-1}.transporter-panel .page-actions{width:100%;display:grid;grid-template-columns:1fr 1fr}.transporter-panel .page-actions button{width:100%}.transport-print-grid{grid-template-columns:1fr}} /* Phase 12 — Quantity-Based Pricing */ .quantity-pricing-page .notice{line-height:1.55}.quantity-pricing-form{grid-template-columns:repeat(5,minmax(0,1fr));align-items:end}.quantity-pricing-form label{min-width:0}.quantity-pricing-form label small{display:block;margin-top:2px;color:var(--muted);font-size:10px;font-weight:600}.quantity-pricing-table{min-width:820px}.quantity-pricing-table td strong{color:var(--text-strong)}.quantity-price-applied{display:inline-flex;align-items:center;gap:5px;margin-top:4px;padding:3px 7px;border:1px solid var(--primary-border);border-radius:999px;background:var(--primary-soft);color:var(--primary);font-size:9px;font-weight:800}.quantity-price-applied i{font-size:8px}@media(max-width:980px){.quantity-pricing-form{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:640px){.quantity-pricing-form{grid-template-columns:1fr}.quantity-pricing-page .panel-head .row-actions{width:100%;display:grid;grid-template-columns:1fr 1fr}.quantity-pricing-page .panel-head .row-actions a{justify-content:center}} /* ========================================================= V37 — Professional connected UI baseline (Phase 14) - Eye-friendly typography across the app - Shared management-workspace language for pricing tools - Responsive switch controls and bundle builder ========================================================= */ body{font-size:15px;line-height:1.58} .page-content{font-size:15px} .panel-head h2,.pro-hero-card h2{letter-spacing:-.025em} .panel-head p,.pro-hero-card p,.pro-section-head p{font-size:.94rem;line-height:1.55} label{font-size:.91rem} input,select,textarea,button{font-size:.94rem} table{font-size:.92rem} table th{font-size:.78rem;letter-spacing:.025em} table td{line-height:1.48} .primary-btn,.secondary-btn,.checkout{min-height:42px;font-weight:700} .ui-switch{display:inline-flex;align-items:center;position:relative;cursor:pointer;flex:0 0 auto;vertical-align:middle} .ui-switch input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px} .ui-switch i{display:block;width:46px;height:26px;border-radius:999px;background:var(--border-strong);border:1px solid color-mix(in srgb,var(--border-strong) 80%,transparent);box-shadow:inset 0 1px 2px rgba(15,23,42,.08);transition:.18s ease;position:relative} .ui-switch i:after{content:'';position:absolute;width:20px;height:20px;left:2px;top:2px;border-radius:50%;background:var(--surface);box-shadow:0 2px 5px rgba(15,23,42,.22);transition:.18s ease} .ui-switch input:checked+i{background:var(--primary);border-color:var(--primary)} .ui-switch input:checked+i:after{transform:translateX(20px)} .ui-switch input:focus-visible+i{outline:3px solid var(--primary-ring);outline-offset:2px} .ui-switch input:disabled+i{opacity:.5;cursor:not-allowed} .pricing-workspace{display:grid;gap:18px;max-width:1600px;margin:0 auto} .pro-hero-card{padding:22px 24px;display:flex;align-items:center;justify-content:space-between;gap:24px;background:linear-gradient(135deg,var(--surface) 0%,color-mix(in srgb,var(--primary) 3%,var(--surface)) 100%);overflow:hidden;position:relative} .pro-hero-card:after{content:'';position:absolute;right:-80px;top:-110px;width:260px;height:260px;border-radius:50%;background:color-mix(in srgb,var(--primary) 6%,transparent);pointer-events:none} .pro-hero-copy{position:relative;z-index:1;min-width:0}.pro-hero-copy h2{font-size:1.55rem;margin:3px 0 4px}.pro-hero-copy p{margin:0;color:var(--muted);max-width:820px} .pro-chip-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.pro-chip-row span{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid var(--border);border-radius:999px;background:var(--surface);font-size:.82rem;font-weight:700;color:var(--text)}.pro-chip-row i{color:var(--primary)} .pro-hero-actions{display:flex;flex-wrap:wrap;gap:9px;position:relative;z-index:1} .pro-metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px} .pro-metric{border:1px solid var(--border);background:var(--surface);border-radius:16px;padding:16px;display:flex;align-items:center;gap:13px;box-shadow:var(--shadow-sm);min-width:0} .pro-metric-icon,.pro-section-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--primary-soft);color:var(--primary);flex:0 0 auto}.pro-metric>div{min-width:0}.pro-metric small,.pro-metric span:not(.pro-metric-icon){display:block;color:var(--muted);font-size:.78rem}.pro-metric strong{display:block;font-size:1.25rem;line-height:1.25;margin:2px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pro-section-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px}.pro-section-head>div{display:flex;align-items:flex-start;gap:11px}.pro-section-head h3{margin:0;font-size:1.06rem}.pro-section-head p{margin:2px 0 0;color:var(--muted)} .pro-form-card,.pro-list-card,.pro-info-card{padding:20px} .pro-field-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.pro-field-grid label{display:grid;gap:7px;align-content:start}.pro-field-grid label>span{font-weight:700;color:var(--text)}.pro-field-grid label>span b{color:#dc2626}.pro-field-grid label small{color:var(--muted);font-size:.77rem;line-height:1.4} .pro-readonly-field{min-height:44px;border:1px solid var(--border);border-radius:10px;background:var(--surface-soft);display:flex;align-items:center;gap:9px;padding:0 12px}.pro-readonly-field i{color:var(--primary)}.pro-readonly-field strong{font-size:.94rem} .pro-sticky-actions{border-top:1px solid var(--border);padding-top:16px;margin-top:18px;display:flex;justify-content:flex-end;gap:9px;flex-wrap:wrap}.danger-outline{color:#b91c1c!important;border-color:color-mix(in srgb,#dc2626 35%,var(--border))!important}.danger-outline:hover{background:color-mix(in srgb,#dc2626 7%,var(--surface))!important} .pro-empty-state{text-align:center;padding:34px 18px;color:var(--muted)}.pro-empty-state>span{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;margin:0 auto 10px;background:var(--surface-soft);color:var(--primary);font-size:1.2rem}.pro-empty-state h4{margin:0;color:var(--text)}.pro-empty-state p{margin:4px 0 0;font-size:.84rem} .bundle-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(320px,.65fr);gap:18px;align-items:start} .bundle-builder-form{display:grid;gap:18px}.bundle-master-grid{padding:15px;border:1px solid var(--border);border-radius:14px;background:var(--surface-soft)} .bundle-components-head{display:flex;align-items:center;justify-content:space-between;gap:14px}.bundle-components-head h4{margin:0;font-size:1rem}.bundle-components-head p{margin:3px 0 0;color:var(--muted);font-size:.84rem} .bundle-component-list{display:grid;gap:10px}.bundle-component-row{display:grid;grid-template-columns:52px minmax(250px,1.7fr) minmax(110px,.55fr) minmax(140px,.65fr) 90px 125px 40px;gap:11px;align-items:end;border:1px solid var(--border);border-radius:14px;padding:13px;background:var(--surface);transition:border-color .15s,box-shadow .15s}.bundle-component-row:hover{border-color:var(--primary-border);box-shadow:0 8px 22px rgba(15,23,42,.055)} .bundle-component-row label{display:grid;gap:6px;min-width:0}.bundle-component-row label>span,.bundle-row-switch>span,.bundle-row-base>span{font-size:.75rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.035em}.bundle-component-row input,.bundle-component-row select{min-width:0}.bundle-row-grip{align-self:stretch;display:flex;align-items:center;gap:8px;color:var(--muted);border-right:1px solid var(--border);padding-right:10px}.bundle-row-number{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--surface-soft);font-weight:800;font-size:.8rem;color:var(--text)} .bundle-row-stock{display:block;color:var(--muted);font-size:.74rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bundle-row-switch,.bundle-row-base{display:grid;gap:8px;align-content:end;min-height:66px}.bundle-row-base b{min-height:42px;display:flex;align-items:center;padding:0 8px;border-radius:9px;background:var(--surface-soft);font-size:.8rem}.bundle-component-row>.icon-action{margin-bottom:2px} .bundle-empty{display:grid;place-items:center;text-align:center;gap:4px;padding:30px 18px;border:1px dashed var(--border-strong);border-radius:14px;color:var(--muted)}.bundle-empty[hidden]{display:none}.bundle-empty>span{width:46px;height:46px;display:grid;place-items:center;border-radius:14px;background:var(--primary-soft);color:var(--primary);font-size:1.1rem}.bundle-empty b{color:var(--text)}.bundle-empty small{font-size:.8rem} .bundle-summary-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--surface-soft)}.bundle-summary-strip>div{padding:14px 15px;border-right:1px solid var(--border)}.bundle-summary-strip>div:last-child{border-right:0}.bundle-summary-strip span{display:block;color:var(--muted);font-size:.75rem}.bundle-summary-strip strong{display:block;margin-top:3px;font-size:1rem} .bundle-catalog-list{display:grid;gap:8px}.bundle-catalog-item{display:grid;grid-template-columns:42px minmax(0,1fr) auto 16px;align-items:center;gap:10px;padding:11px;border:1px solid var(--border);border-radius:12px;color:var(--text);text-decoration:none;background:var(--surface);transition:.15s}.bundle-catalog-item:hover,.bundle-catalog-item.active{border-color:var(--primary-border);background:var(--primary-soft-2)}.bundle-catalog-icon{width:40px;height:40px;border-radius:11px;background:var(--surface-soft);display:grid;place-items:center;color:var(--primary)}.bundle-catalog-copy{min-width:0}.bundle-catalog-copy b,.bundle-catalog-copy small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bundle-catalog-copy small,.bundle-catalog-stock small{color:var(--muted);font-size:.72rem}.bundle-catalog-stock{text-align:right}.bundle-catalog-stock b{display:block}.bundle-catalog-item>i{color:var(--muted);font-size:.72rem} .bundle-flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;align-items:center;gap:12px}.bundle-flow>div{border:1px solid var(--border);border-radius:12px;padding:13px;background:var(--surface-soft);min-height:112px}.bundle-flow>div>span{display:grid;place-items:center;width:27px;height:27px;border-radius:8px;background:var(--primary);color:white;font-weight:800;font-size:.78rem;margin-bottom:8px}.bundle-flow b,.bundle-flow small{display:block}.bundle-flow small{color:var(--muted);font-size:.77rem;margin-top:4px}.bundle-flow>i{color:var(--border-strong)} .bundle-pill{display:inline-flex;align-items:center;gap:5px;padding:3px 7px;border-radius:999px;background:var(--primary-soft);color:var(--primary);font-weight:800;font-size:.7rem;margin-left:5px;vertical-align:middle} .bundle-components-mini{display:block;color:var(--muted);font-size:.73rem;margin-top:3px;white-space:normal} /* Recent pricing screens inherit the same management polish. */ .quantity-pricing-page,.product-units-page,.promotions-page{max-width:1500px;margin:0 auto;padding:20px}.quantity-pricing-page>.panel-head,.product-units-page>.panel-head,.promotions-page>.panel-head{padding-bottom:16px;border-bottom:1px solid var(--border)} .quantity-pricing-form,.product-units-page .form-grid,.promotions-page .form-grid{padding:16px;border:1px solid var(--border);border-radius:14px;background:var(--surface-soft)} .quantity-pricing-table th,.product-units-page table th,.promotions-page table th{background:var(--surface-soft)} .status-switch-row{display:flex!important;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:9px 11px;border:1px solid var(--border);border-radius:10px;background:var(--surface)}.status-switch-row>span{display:grid;gap:1px}.status-switch-row>span b{font-size:.88rem}.status-switch-row>span small{color:var(--muted);font-size:.72rem} @media(max-width:1240px){.pro-metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.bundle-layout{grid-template-columns:1fr}.pro-list-card{order:2}.bundle-component-row{grid-template-columns:44px minmax(220px,1.5fr) 105px 135px 82px 120px 40px}} @media(max-width:980px){.pro-hero-card{align-items:flex-start;flex-direction:column}.pro-hero-actions{width:100%}.pro-field-grid{grid-template-columns:1fr 1fr}.bundle-component-row{grid-template-columns:38px 1fr 1fr}.bundle-row-grip{grid-row:1/3}.bundle-product-field{grid-column:2/4}.bundle-row-switch,.bundle-row-base{min-height:auto}.bundle-component-row>.icon-action{align-self:center}.bundle-summary-strip{grid-template-columns:1fr}.bundle-summary-strip>div{border-right:0;border-bottom:1px solid var(--border)}.bundle-summary-strip>div:last-child{border-bottom:0}.bundle-flow{grid-template-columns:1fr}.bundle-flow>i{transform:rotate(90deg);justify-self:center}} @media(max-width:680px){body,.page-content{font-size:14.5px}.page-content{padding-left:11px!important;padding-right:11px!important}.pro-hero-card,.pro-form-card,.pro-list-card,.pro-info-card{padding:15px}.pro-metric-grid{grid-template-columns:1fr 1fr;gap:9px}.pro-metric{padding:12px;gap:9px}.pro-metric-icon{width:36px;height:36px;border-radius:10px}.pro-metric strong{font-size:1.04rem}.pro-field-grid{grid-template-columns:1fr}.bundle-components-head{align-items:flex-start;flex-direction:column}.bundle-components-head .secondary-btn{width:100%}.bundle-component-row{grid-template-columns:1fr 1fr;padding:12px}.bundle-row-grip{grid-column:1/-1;grid-row:auto;border-right:0;border-bottom:1px solid var(--border);padding:0 0 8px}.bundle-product-field{grid-column:1/-1}.bundle-row-switch,.bundle-row-base{min-height:auto}.bundle-component-row>.icon-action{justify-self:end}.pro-sticky-actions>*{flex:1 1 auto}.bundle-catalog-item{grid-template-columns:38px minmax(0,1fr) auto}.bundle-catalog-item>i{display:none}} @media(max-width:460px){.pro-metric-grid{grid-template-columns:1fr}.bundle-component-row{grid-template-columns:1fr}.bundle-product-field,.bundle-row-grip{grid-column:auto}.bundle-component-row>.icon-action{justify-self:stretch;width:100%}.bundle-row-switch{display:flex;align-items:center;justify-content:space-between}.bundle-row-base{display:grid}.pro-hero-actions a{flex:1 1 auto}.pro-chip-row span{font-size:.75rem}} .bundle-inline-badge{display:inline-flex;align-items:center;gap:5px;margin-left:8px;padding:3px 8px;border:1px solid var(--border);border-radius:999px;background:var(--surface-soft,#f8fafc);color:var(--text);font-size:11px;font-weight:800;line-height:1.25;vertical-align:middle}.bundle-inline-badge i{font-size:10px}.ui-switch input:disabled+i{opacity:.48;cursor:not-allowed}.ui-switch:has(input:disabled){cursor:not-allowed;opacity:.78} /* Phase 16 — POS salesperson/agent assignment */ .pos-party-grid.has-salesperson .pos-customer-field{grid-column:1/-1} .pos-party-grid.single-field.has-salesperson .pos-field{grid-column:1/-1} @media (max-width:720px){.pos-party-grid.has-salesperson .pos-field{grid-column:1/-1}} /* Phase 19 — Cheque / PDC Management */ .pdc-page{max-width:1540px;margin:0 auto;display:grid;gap:18px}.pdc-hero{display:flex;align-items:center;justify-content:space-between;gap:22px;padding:24px;border:1px solid var(--border);border-radius:18px;background:var(--surface);box-shadow:0 10px 28px rgba(15,23,42,.045)}.pdc-hero h2{margin:4px 0 7px;font-size:clamp(1.3rem,2vw,1.75rem);letter-spacing:-.025em}.pdc-hero p{max-width:850px;margin:0;color:var(--muted);font-size:.92rem;line-height:1.65}.pdc-stats{margin:0}.pdc-stats .stat-card small{font-size:.79rem;line-height:1.45}.pdc-head-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.pdc-status{display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:5px 10px;border-radius:999px;font-size:.74rem;font-weight:800;border:1px solid var(--border);background:var(--surface-soft);white-space:nowrap}.pdc-status.pending{color:#92400e;background:#fffbeb;border-color:#fde68a}.pdc-status.deposited{color:#1d4ed8;background:#eff6ff;border-color:#bfdbfe}.pdc-status.cleared{color:#047857;background:#ecfdf5;border-color:#a7f3d0}.pdc-status.bounced{color:#b91c1c;background:#fef2f2;border-color:#fecaca}.pdc-status.cancelled{color:#475569;background:#f8fafc;border-color:#cbd5e1}.pdc-detail-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(560px,1.5fr);gap:18px;align-items:start}.pdc-facts{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--surface-soft)}.pdc-facts>div{padding:13px 14px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);min-width:0}.pdc-facts>div:nth-child(2n){border-right:0}.pdc-facts>div:nth-last-child(-n+2){border-bottom:0}.pdc-facts span,.pdc-facts b{display:block}.pdc-facts span{font-size:.72rem;color:var(--muted);font-weight:750;text-transform:uppercase;letter-spacing:.035em;margin-bottom:4px}.pdc-facts b{font-size:.9rem;overflow-wrap:anywhere}.pdc-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.pdc-action-card{display:grid;gap:10px;padding:14px;border:1px solid var(--border);border-radius:14px;background:var(--surface);align-content:start}.pdc-action-card.clear-card{border-color:var(--primary-border);background:var(--primary-soft-2)}.pdc-action-icon{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--surface-soft);color:var(--primary)}.pdc-action-card h4{margin:0;font-size:.96rem}.pdc-action-card p{margin:0;color:var(--muted);font-size:.79rem;line-height:1.5;min-height:36px}.pdc-action-card label{display:grid;gap:6px;font-size:.78rem;font-weight:700}.pdc-history{margin-top:18px}.pdc-history h4{margin:0 0 10px;font-size:.98rem}.pdc-history table{min-width:760px}.pdc-table{min-width:1120px}.pdc-table td{vertical-align:middle}.pdc-table td:nth-child(2){display:table-cell}.pdc-table td:nth-child(2)>span{vertical-align:middle}.pdc-table td:nth-child(2)>span:last-child{display:inline-flex;flex-direction:column;margin-left:8px}.pdc-table td b,.pdc-table td small{display:block}.pdc-table td small{margin-top:3px;color:var(--muted);font-size:.75rem;line-height:1.35}.pdc-direction{width:33px;height:33px;border-radius:10px;display:inline-grid;place-items:center}.pdc-direction.received{background:#ecfdf5;color:#047857}.pdc-direction.issued{background:#fff7ed;color:#c2410c}.pdc-overdue-row{background:color-mix(in srgb,#fef2f2 55%,var(--surface))}.pdc-overdue{color:#b91c1c;font-weight:800}.pdc-modal{width:min(920px,95vw)}.pdc-type-tabs{display:grid;grid-template-columns:1fr 1fr;gap:10px}.pdc-type-tabs label{cursor:pointer}.pdc-type-tabs input{position:absolute;opacity:0;pointer-events:none}.pdc-type-tabs span{display:flex;align-items:center;gap:10px;min-height:58px;padding:10px 13px;border:1px solid var(--border);border-radius:12px;background:var(--surface);transition:border-color .15s,background .15s,box-shadow .15s}.pdc-type-tabs span>i{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--surface-soft);color:var(--primary)}.pdc-type-tabs span b,.pdc-type-tabs span small{display:block}.pdc-type-tabs span small{margin-left:auto;color:var(--muted);font-size:.75rem}.pdc-type-tabs input:checked+span{border-color:var(--primary-border-strong);background:var(--primary-soft-2);box-shadow:0 0 0 3px var(--primary-ring)}.pdc-safety{display:flex;align-items:flex-start;gap:11px;padding:13px 14px;border:1px solid var(--primary-border);border-radius:12px;background:var(--primary-soft-2)}.pdc-safety>i{margin-top:2px;color:var(--primary)}.pdc-safety b,.pdc-safety span{display:block}.pdc-safety b{font-size:.86rem}.pdc-safety span{margin-top:2px;color:var(--muted);font-size:.78rem;line-height:1.5}.optional{font-weight:600;color:var(--muted);font-size:.7rem} @media(max-width:1100px){.pdc-detail-grid{grid-template-columns:1fr}.pdc-actions{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:760px){.pdc-hero{align-items:flex-start;flex-direction:column;padding:18px}.pdc-hero .primary-btn{width:100%;justify-content:center}.pdc-facts{grid-template-columns:1fr}.pdc-facts>div{border-right:0!important;border-bottom:1px solid var(--border)!important}.pdc-facts>div:last-child{border-bottom:0!important}.pdc-actions{grid-template-columns:1fr}.pdc-action-card p{min-height:0}.pdc-type-tabs{grid-template-columns:1fr}.pdc-type-tabs span small{margin-left:0}.pdc-type-tabs span{display:grid;grid-template-columns:36px 1fr}.pdc-type-tabs span small{grid-column:2}.pdc-head-actions{width:100%}.pdc-head-actions .secondary-btn{flex:1}.pdc-page .panel-head{align-items:flex-start}.pdc-page .panel-head>.secondary-btn{width:100%;justify-content:center}} /* Connected readability baseline — Phase 19 onward */ .panel-head p{font-size:13px;line-height:1.55}.filters label span{font-size:11.5px;letter-spacing:.01em}.stat-card span,.stat-card small{font-size:12px;line-height:1.45}th{font-size:11px!important}td{font-size:13.5px}.sub,td .sub{font-size:12px}.form-grid label,.purchase-fields label,.compact-field{font-size:12.5px}.smart-option{font-size:13px;line-height:1.4}.nav-sub a{font-size:13.5px} @media(max-width:680px){body{font-size:14.5px}td{font-size:13.5px}.panel-head p{font-size:12.5px}.filters label span{font-size:11.5px}} /* Phase 20 — Petty Cash */ .petty-cash-page{max-width:1580px;margin:0 auto;display:grid;gap:18px}.petty-cash-hero{display:flex;align-items:center;justify-content:space-between;gap:22px;padding:24px;border:1px solid var(--border);border-radius:18px;background:var(--surface);box-shadow:0 10px 28px rgba(15,23,42,.045)}.petty-cash-hero h2{margin:4px 0 7px;font-size:clamp(1.35rem,2vw,1.8rem);letter-spacing:-.025em}.petty-cash-hero p{max-width:900px;margin:0;color:var(--muted);font-size:.93rem;line-height:1.65}.petty-cash-hero-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.petty-cash-stats{margin:0}.petty-cash-stats .stat-card small{font-size:.79rem;line-height:1.45}.petty-cash-layout{display:grid;grid-template-columns:minmax(255px,330px) minmax(0,1fr);gap:18px;align-items:start}.petty-cash-account-panel{position:sticky;top:84px}.petty-cash-account-list{display:grid;gap:9px}.petty-cash-account-card{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:11px;align-items:center;padding:12px;border:1px solid var(--border);border-radius:14px;background:var(--surface);text-decoration:none;color:var(--text);transition:.15s ease}.petty-cash-account-card:hover{border-color:var(--primary-border);background:var(--surface-hover)}.petty-cash-account-card.active{border-color:var(--primary-border-strong);background:var(--primary-soft-2);box-shadow:0 0 0 3px var(--primary-ring)}.pc-account-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:var(--primary-soft);color:var(--primary);font-size:1rem}.pc-account-icon.large{width:46px;height:46px;border-radius:14px}.pc-account-copy{min-width:0;display:grid;gap:2px}.pc-account-copy b{font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pc-account-copy small{font-size:.72rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pc-account-copy strong{margin-top:3px;font-size:.9rem}.pc-account-state{font-size:.67rem;font-weight:800;padding:4px 7px;border:1px solid var(--border);border-radius:999px;background:var(--surface-soft);color:var(--muted)}.pc-account-state.success{color:#047857;background:#ecfdf5;border-color:#a7f3d0}.pc-account-state.warning{color:#b45309;background:#fffbeb;border-color:#fde68a}.pc-account-state.muted{color:#64748b}.petty-cash-main{display:grid;gap:18px;min-width:0}.petty-cash-empty{text-align:center;padding:44px 24px}.petty-cash-empty>i{width:58px;height:58px;display:grid;place-items:center;margin:0 auto 14px;border-radius:18px;background:var(--primary-soft);color:var(--primary);font-size:1.35rem}.petty-cash-empty h3{margin:0 0 7px}.petty-cash-empty p{max-width:650px;margin:0 auto 18px;color:var(--muted);line-height:1.6}.petty-cash-account-head{display:grid;gap:18px}.pc-head-copy{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.pc-title-row{display:flex;align-items:flex-start;gap:12px;min-width:0}.pc-title-row h2{margin:3px 0 4px;font-size:1.28rem}.pc-title-row p{margin:0;color:var(--muted);font-size:.82rem;line-height:1.45}.pc-balance-block{min-width:210px;padding:13px 15px;border:1px solid var(--border);border-radius:14px;background:var(--surface-soft);text-align:right}.pc-balance-block span,.pc-balance-block strong,.pc-balance-block small{display:block}.pc-balance-block span{font-size:.71rem;text-transform:uppercase;letter-spacing:.035em;font-weight:800;color:var(--muted)}.pc-balance-block strong{margin:3px 0;font-size:1.35rem}.pc-balance-block small{font-size:.71rem;color:var(--muted)}.pc-balance-block.warning{border-color:#fde68a;background:#fffbeb}.pc-balance-block.warning strong{color:#b45309}.pc-action-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}.pc-action-grid>form{display:contents}.pc-action.disabled{cursor:not-allowed;opacity:.68}.pc-action.disabled:hover{border-color:var(--border);background:var(--surface)}.pc-action{display:flex;align-items:center;gap:9px;min-height:64px;padding:10px 11px;border:1px solid var(--border);border-radius:13px;background:var(--surface);color:var(--text);cursor:pointer;text-align:left;transition:.15s ease}.pc-action:hover{border-color:var(--primary-border);background:var(--surface-hover)}.pc-action>i{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:var(--surface-soft);color:var(--primary);flex:0 0 auto}.pc-action span{display:grid;gap:2px;min-width:0}.pc-action b{font-size:.8rem}.pc-action small{font-size:.68rem;color:var(--muted);line-height:1.25}.pc-action.positive>i{background:#ecfdf5;color:#047857}.pc-action.spend>i{background:#fff7ed;color:#c2410c}.pc-action.reconcile>i{background:#eff6ff;color:#1d4ed8}.petty-cash-table{min-width:1080px}.petty-cash-table td,.petty-cash-recon-table td{vertical-align:middle}.petty-cash-table td b,.petty-cash-table td small,.petty-cash-recon-table td b,.petty-cash-recon-table td small{display:block}.petty-cash-table td small,.petty-cash-recon-table td small{margin-top:3px;color:var(--muted);font-size:.74rem;line-height:1.35}.pc-txn-type{display:inline-flex;align-items:center;min-height:28px;padding:5px 9px;border-radius:999px;border:1px solid var(--border);background:var(--surface-soft);font-size:.72rem;font-weight:800;white-space:nowrap}.pc-txn-type.fund_in,.pc-txn-type.opening,.pc-txn-type.adjustment_in{color:#047857;background:#ecfdf5;border-color:#a7f3d0}.pc-txn-type.fund_out,.pc-txn-type.adjustment_out{color:#b45309;background:#fffbeb;border-color:#fde68a}.pc-txn-type.expense{color:#b91c1c;background:#fef2f2;border-color:#fecaca}.pc-txn-type.expense_reversal{color:#1d4ed8;background:#eff6ff;border-color:#bfdbfe}.money-in{font-weight:800;color:#047857}.money-out{font-weight:800;color:#b91c1c}.petty-cash-recon-table{min-width:850px}.pc-variance{display:inline-flex;padding:5px 8px;border-radius:999px;font-size:.75rem;font-weight:800;border:1px solid var(--border);background:var(--surface-soft)}.pc-variance.ok{color:#047857;background:#ecfdf5;border-color:#a7f3d0}.pc-variance.short{color:#b91c1c;background:#fef2f2;border-color:#fecaca}.pc-variance.excess{color:#1d4ed8;background:#eff6ff;border-color:#bfdbfe}.pc-modal{width:min(880px,95vw)}.pc-modal.small{width:min(610px,95vw)}.pc-source-tabs{display:grid;grid-template-columns:1fr 1fr;gap:10px}.pc-source-tabs label{cursor:pointer}.pc-source-tabs input{position:absolute;opacity:0;pointer-events:none}.pc-source-tabs span{display:grid;grid-template-columns:36px 1fr;gap:2px 10px;align-items:center;min-height:62px;padding:10px 13px;border:1px solid var(--border);border-radius:12px;background:var(--surface);transition:.15s ease}.pc-source-tabs span>i{grid-row:1/3;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--surface-soft);color:var(--primary)}.pc-source-tabs span b{font-size:.86rem}.pc-source-tabs span small{font-size:.74rem;color:var(--muted)}.pc-source-tabs input:checked+span{border-color:var(--primary-border-strong);background:var(--primary-soft-2);box-shadow:0 0 0 3px var(--primary-ring)}.pc-accounting-note{display:flex!important;align-items:flex-start;gap:10px;padding:12px 13px;border:1px solid var(--primary-border);border-radius:12px;background:var(--primary-soft-2)}.pc-accounting-note>i{margin-top:2px;color:var(--primary)}.pc-accounting-note b,.pc-accounting-note small{display:block}.pc-accounting-note b{font-size:.83rem}.pc-accounting-note small{margin-top:2px;color:var(--muted);font-size:.76rem;line-height:1.45}.petty-cash-reversal-modal{width:min(690px,95vw)}.petty-cash-reversal-modal .notice{margin:0 0 16px}.petty-cash-reversal-modal textarea{min-height:108px;resize:vertical}.petty-cash-reversal-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 18px}.petty-cash-reversal-summary>div{padding:12px 14px;border:1px solid var(--border);border-radius:13px;background:var(--surface-soft);display:grid;gap:4px;min-width:0}.petty-cash-reversal-summary span{font-size:.72rem;color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.04em}.petty-cash-reversal-summary strong{font-size:.9rem;overflow-wrap:anywhere} @media(max-width:1320px){.pc-action-grid{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:1050px){.petty-cash-layout{grid-template-columns:1fr}.petty-cash-account-panel{position:static}.petty-cash-account-list{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:760px){.petty-cash-hero{align-items:flex-start;flex-direction:column;padding:18px}.petty-cash-hero-actions{width:100%}.petty-cash-hero-actions>*{flex:1;justify-content:center}.petty-cash-account-list{grid-template-columns:1fr}.pc-head-copy{flex-direction:column}.pc-balance-block{width:100%;text-align:left}.pc-action-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.pc-source-tabs{grid-template-columns:1fr}.petty-cash-reversal-summary{grid-template-columns:1fr}.petty-cash-reversal-modal .form-grid{grid-template-columns:1fr}.petty-cash-reversal-modal .form-grid>label{grid-column:1/-1}.petty-cash-page .panel-head{align-items:flex-start;flex-direction:column}.petty-cash-page .panel-head>.secondary-btn{width:100%;justify-content:center}} @media(max-width:500px){.pc-action-grid{grid-template-columns:1fr}.pc-action{min-height:58px}.petty-cash-hero-actions{display:grid;grid-template-columns:1fr}.petty-cash-hero-actions>*{width:100%}} /* Phase 21 — Financial Year Management */ .fy-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:22px;border:1px solid var(--border);background:var(--surface)} .fy-hero-copy{max-width:820px}.fy-hero-copy h2{margin:4px 0 8px;font-size:27px;line-height:1.2}.fy-hero-copy p{margin:0;color:var(--text-muted);font-size:14.5px;line-height:1.65} .fy-metrics,.fy-close-metrics{grid-template-columns:repeat(4,minmax(0,1fr));margin:16px 0}.fy-metrics .stat-card,.fy-close-metrics .stat-card{min-height:118px}.fy-metrics .stat-card strong,.fy-close-metrics .stat-card strong{font-size:23px} .fy-layout{display:grid;grid-template-columns:minmax(270px,.72fr) minmax(0,2.28fr);gap:18px;align-items:start}.fy-year-list{position:sticky;top:84px;padding:16px}.fy-year-stack{display:grid;gap:8px}.fy-year-item{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:11px;align-items:center;padding:12px;border:1px solid var(--border);border-radius:14px;text-decoration:none;background:var(--surface);color:var(--text);transition:border-color .15s ease,background .15s ease,transform .15s ease}.fy-year-item:hover{border-color:var(--primary-border);background:var(--surface-hover);transform:translateY(-1px)}.fy-year-item.active{border-color:var(--primary-border-strong);background:var(--primary-soft-2)}.fy-year-icon{width:40px;height:40px;border-radius:12px;border:1px solid var(--border);background:var(--surface-soft);display:grid;place-items:center;color:var(--primary)}.fy-year-copy{display:grid;gap:3px}.fy-year-copy b{font-size:14px}.fy-year-copy small{font-size:12.5px;color:var(--text-muted);line-height:1.35}.fy-main{min-width:0;display:grid;gap:18px} .fy-period-card{border:1px solid var(--border)}.fy-status-wrap{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}.fy-status{display:inline-flex;align-items:center;gap:8px;padding:8px 11px;border-radius:999px;border:1px solid var(--border);font-size:12.5px;font-weight:800}.fy-status.open{color:var(--success);background:color-mix(in srgb,var(--success) 7%,var(--surface))}.fy-status.closed{color:var(--warning);background:color-mix(in srgb,var(--warning) 7%,var(--surface))} .fy-control-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.fy-control-note{display:flex;gap:11px;align-items:flex-start;border:1px solid var(--border);border-radius:14px;padding:14px;background:var(--surface-soft)}.fy-control-note>i{width:34px;height:34px;border:1px solid var(--border);border-radius:10px;display:grid;place-items:center;color:var(--primary);background:var(--surface)}.fy-control-note span{display:grid;gap:4px}.fy-control-note b{font-size:13.5px}.fy-control-note small{font-size:12.5px;line-height:1.5;color:var(--text-muted)}.fy-actions-row{display:flex;align-items:center;gap:10px;justify-content:flex-end;margin-top:16px;flex-wrap:wrap}.fy-info{display:inline-flex;align-items:center;gap:8px;color:var(--text-muted);font-size:13px}.danger-outline{color:var(--danger)!important;border-color:color-mix(in srgb,var(--danger) 34%,var(--border))!important}.danger-outline:hover{background:color-mix(in srgb,var(--danger) 6%,var(--surface))!important} .fy-position-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.fy-position-grid>div{border:1px solid var(--border);border-radius:14px;padding:14px;background:var(--surface-soft);display:grid;gap:5px}.fy-position-grid span{font-size:12.5px;color:var(--text-muted);font-weight:700}.fy-position-grid b{font-size:17px}.fy-closure-no{display:inline-flex;padding:7px 10px;border:1px solid var(--border);border-radius:999px;background:var(--surface-soft);font-size:12px;font-weight:800;color:var(--text-muted)}.fy-audit-note,.fy-warning{display:flex;align-items:flex-start;gap:11px;border:1px solid var(--border);border-radius:14px;padding:13px 14px;background:var(--surface-soft);margin-top:14px}.fy-audit-note i,.fy-warning i{color:var(--primary);margin-top:2px}.fy-audit-note span,.fy-warning span{display:grid;gap:3px}.fy-audit-note b,.fy-warning b{font-size:13px}.fy-audit-note small,.fy-warning small{font-size:12.5px;line-height:1.5;color:var(--text-muted)}.fy-warning{margin:0}.fy-warning i{color:var(--warning)}.fy-empty{display:grid;place-items:center;gap:6px;min-height:145px;text-align:center}.fy-empty i{font-size:24px;color:var(--text-muted)}.fy-empty b{font-size:14px}.fy-empty span{font-size:12.5px;color:var(--text-muted);max-width:560px}.fy-modal{max-width:720px} @media(max-width:1180px){.fy-layout{grid-template-columns:1fr}.fy-year-list{position:static}.fy-year-stack{grid-template-columns:repeat(2,minmax(0,1fr))}.fy-position-grid{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:900px){.fy-metrics,.fy-close-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.fy-control-grid{grid-template-columns:1fr}.fy-position-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:640px){.fy-hero{display:grid}.fy-hero .page-actions,.fy-hero .page-actions form,.fy-hero .page-actions button{width:100%}.fy-metrics,.fy-close-metrics,.fy-year-stack,.fy-position-grid{grid-template-columns:1fr}.fy-year-item{grid-template-columns:40px minmax(0,1fr)}.fy-year-item>.pill{grid-column:2;justify-self:start}.fy-status-wrap{justify-content:flex-start}.fy-actions-row>*{width:100%;justify-content:center}.fy-hero-copy h2{font-size:23px}} /* Phase 23 — GST Compliance Reports */ .gc-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:22px;border:1px solid var(--border);background:var(--surface)} .gc-hero-copy{max-width:900px}.gc-hero-copy h2{margin:4px 0 8px;font-size:27px;line-height:1.2}.gc-hero-copy p{margin:0;color:var(--text-muted);font-size:14.5px;line-height:1.65} .gc-hero-actions{display:flex;align-items:center;justify-content:flex-end;gap:9px;flex-wrap:wrap}.gc-chip-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.gc-chip-row>span{display:inline-flex;align-items:center;gap:7px;min-height:30px;padding:6px 10px;border:1px solid var(--border);border-radius:999px;background:var(--surface-soft);font-size:12.5px;font-weight:750;color:var(--text-muted)}.gc-chip-row>span.ok{color:#047857;background:#ecfdf5;border-color:#a7f3d0}.gc-chip-row>span.danger{color:#b91c1c;background:#fef2f2;border-color:#fecaca} .gc-filter-panel{display:grid;gap:14px}.gc-filters{display:grid;grid-template-columns:repeat(3,minmax(180px,1fr)) auto auto;gap:10px;align-items:end}.gc-filters label{min-width:0}.gc-regulatory-note{display:flex;gap:11px;align-items:flex-start;border:1px solid var(--border);border-radius:14px;padding:13px 14px;background:var(--surface-soft)}.gc-regulatory-note>i{margin-top:2px;color:var(--primary)}.gc-regulatory-note span{display:grid;gap:3px}.gc-regulatory-note b{font-size:13.5px}.gc-regulatory-note small{font-size:12.8px;color:var(--text-muted);line-height:1.55} .gc-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:16px 0}.gc-metrics .stat-card{min-height:116px}.gc-metrics .stat-card strong{font-size:23px}.gc-metrics .stat-card small{line-height:1.4} .gc-tabs{display:flex;align-items:center;gap:8px;overflow:auto;padding:4px 2px 12px;scrollbar-width:thin}.gc-tabs a{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;min-height:38px;padding:8px 12px;border:1px solid var(--border);border-radius:11px;background:var(--surface);color:var(--text-muted);font-size:12.8px;font-weight:800;text-decoration:none;transition:.15s ease}.gc-tabs a:hover{border-color:var(--primary-border);background:var(--surface-hover);color:var(--text)}.gc-tabs a.active{border-color:var(--primary-border-strong);background:var(--primary-soft-2);color:var(--primary)}.gc-tabs a b{display:grid;place-items:center;min-width:21px;height:21px;padding:0 5px;border-radius:999px;background:#fef2f2;color:#b91c1c;font-size:10.5px} .gc-summary-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:16px}.gc-card{min-width:0}.gc-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:14px}.gc-card-head h3{margin:3px 0 0;font-size:18px}.gc-card-head>i{width:42px;height:42px;border:1px solid var(--border);border-radius:12px;display:grid;place-items:center;background:var(--surface-soft);color:var(--primary);font-size:17px;flex:0 0 auto}.gc-summary-list{display:grid;gap:8px}.gc-summary-list>div{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:11px 12px;border:1px solid var(--border);border-radius:12px;background:var(--surface-soft)}.gc-summary-list span{font-size:13px;color:var(--text-muted);font-weight:700}.gc-summary-list b{font-size:12px;color:var(--text-muted);font-weight:800}.gc-summary-list strong{font-size:14px}.gc-summary-list.compact>div{grid-template-columns:minmax(0,1fr) auto auto}.gc-tax-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.gc-tax-grid>div{display:grid;gap:4px;padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--surface-soft)}.gc-tax-grid span{font-size:12.5px;color:var(--text-muted);font-weight:700}.gc-tax-grid strong{font-size:16px}.gc-result{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;padding:13px 14px;border:1px solid var(--primary-border);border-radius:12px;background:var(--primary-soft-2)}.gc-result span{font-size:13px;font-weight:800;color:var(--text-muted)}.gc-result b{font-size:18px}.gc-footnote{margin:12px 0 0;color:var(--text-muted);font-size:12.7px;line-height:1.55}.gc-readiness{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;align-items:center;padding:13px;border:1px solid #a7f3d0;border-radius:13px;background:#ecfdf5}.gc-readiness.has-errors{border-color:#fecaca;background:#fef2f2}.gc-readiness strong{grid-row:1/3;font-size:29px;line-height:1;color:#047857}.gc-readiness.has-errors strong{color:#b91c1c}.gc-readiness span{font-size:13px;font-weight:800}.gc-readiness small{font-size:12px;color:var(--text-muted)}.gc-mini-issues{display:grid;gap:7px;margin-top:10px}.gc-mini-issues>div{display:flex;gap:9px;align-items:flex-start;padding:9px 10px;border:1px solid var(--border);border-radius:11px;background:var(--surface-soft)}.gc-mini-issues>div>i{margin-top:2px;color:#b45309}.gc-mini-issues span{display:grid;gap:2px}.gc-mini-issues b{font-size:12.8px}.gc-mini-issues small{font-size:11.8px;color:var(--text-muted);line-height:1.4}.gc-mini-issues .gc-clean>i{color:#047857}.gc-full-btn{width:100%;justify-content:center;margin-top:10px}.gc-document-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.gc-document-strip>div{display:grid;gap:5px;padding:13px;border:1px solid var(--border);border-radius:12px;background:var(--surface-soft)}.gc-document-strip span{font-size:12.5px;color:var(--text-muted);font-weight:700}.gc-document-strip strong{font-size:20px}.gc-document-strip small{font-size:11.8px;color:var(--text-muted)} .gc-inline-total{font-size:17px;white-space:nowrap}.gc-table{min-width:980px}.gc-table th,.gc-table td{font-size:13px;vertical-align:middle}.gc-table td code{font-size:12px;background:var(--surface-soft);border:1px solid var(--border);padding:4px 6px;border-radius:7px}.gc-cell-sub{display:block;margin-top:4px;font-size:11px;color:var(--text-muted)}.gc-issue-counters{display:flex;gap:8px;flex-wrap:wrap}.gc-issue-counters span{display:inline-flex;padding:6px 9px;border-radius:999px;font-size:12px;font-weight:800;border:1px solid var(--border)}.gc-issue-counters .danger{color:#b91c1c;background:#fef2f2;border-color:#fecaca}.gc-issue-counters .warning{color:#b45309;background:#fffbeb;border-color:#fde68a}.gc-severity{display:inline-flex;align-items:center;gap:6px;padding:5px 8px;border:1px solid var(--border);border-radius:999px;font-size:11.5px;font-weight:800}.gc-severity.error{color:#b91c1c;background:#fef2f2;border-color:#fecaca}.gc-severity.warning{color:#b45309;background:#fffbeb;border-color:#fde68a}.gc-clean-state{display:grid;place-items:center;gap:6px;min-height:150px;text-align:center}.gc-clean-state i{font-size:26px;color:#047857}.gc-clean-state b{font-size:14px}.gc-clean-state span{font-size:12.5px;color:var(--text-muted)} @media(max-width:1180px){.gc-filters{grid-template-columns:repeat(3,minmax(0,1fr))}.gc-filters>.primary-btn,.gc-filters>.secondary-btn{width:100%;justify-content:center}.gc-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.gc-document-strip{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:820px){.gc-hero{display:grid}.gc-hero-actions{justify-content:flex-start}.gc-summary-grid{grid-template-columns:1fr}.gc-filters{grid-template-columns:1fr 1fr}.gc-filters label:first-of-type{grid-column:1/-1}.gc-document-strip{grid-template-columns:1fr 1fr}} @media(max-width:560px){.gc-hero-copy h2{font-size:23px}.gc-hero-actions{display:grid;grid-template-columns:1fr}.gc-hero-actions>*{width:100%;justify-content:center}.gc-chip-row{display:grid}.gc-chip-row>span{border-radius:10px}.gc-filters,.gc-metrics,.gc-document-strip{grid-template-columns:1fr}.gc-filters label:first-of-type{grid-column:auto}.gc-tax-grid{grid-template-columns:1fr}.gc-summary-list>div,.gc-summary-list.compact>div{grid-template-columns:1fr auto}.gc-summary-list strong{grid-column:1/-1}.gc-inline-total{white-space:normal}.gc-card-head{align-items:center}} @media print{.sidebar,.app-header,.gc-filter-panel,.gc-tabs,.gc-hero-actions,.pagination,.demo-mode-banner{display:none!important}.app-main,.page-content{margin:0!important;padding:0!important}.gc-hero,.panel,.stat-card{box-shadow:none!important;break-inside:avoid}.gc-summary-grid{grid-template-columns:1fr 1fr}.gc-table{min-width:0;font-size:10px}.gc-table th,.gc-table td{font-size:10px;padding:6px}} /* Phase 24 — E-Invoice + E-Way Bill foundation */ .edoc-hero{display:flex;justify-content:space-between;align-items:flex-start;gap:24px}.edoc-hero h2{font-size:clamp(1.55rem,2.2vw,2.15rem);margin:5px 0 8px}.edoc-hero p,.edoc-config p,.edoc-detail p{font-size:.96rem;line-height:1.6;color:var(--muted);max-width:850px}.edoc-chip-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}.edoc-chip-row span{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid var(--border);border-radius:999px;background:var(--surface);font-size:.82rem;font-weight:650}.edoc-chip-row .ok{color:#087a55}.edoc-chip-row .warning{color:#9a6200}.edoc-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:16px 0}.edoc-config-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.edoc-switch-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.edoc-switch-grid>label{display:flex;align-items:center;justify-content:space-between;gap:14px;border:1px solid var(--border);border-radius:14px;padding:13px 14px;background:var(--surface)}.edoc-switch-grid small{display:block;color:var(--muted);margin-top:2px}.edoc-filter{display:grid;grid-template-columns:minmax(230px,1fr) minmax(180px,240px) auto auto;align-items:end;gap:10px;margin-bottom:14px}.edoc-table td small{display:block;color:var(--muted);font-size:.79rem;margin-top:4px}.edoc-table tr.selected td{background:rgba(37,99,235,.045)}.edoc-status{display:inline-flex;align-items:center;min-height:25px;padding:3px 9px;border-radius:999px;font-size:.76rem;font-weight:750;border:1px solid var(--border);background:var(--surface-2);white-space:nowrap}.edoc-status.generated{background:#ecfdf5;border-color:#a7f3d0;color:#047857}.edoc-status.ready{background:#eff6ff;border-color:#bfdbfe;color:#1d4ed8}.edoc-status.cancelled,.edoc-status.failed{background:#fff1f2;border-color:#fecdd3;color:#be123c}.edoc-detail{margin-top:16px}.edoc-readiness{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:14px 0}.edoc-readiness>div{display:flex;gap:12px;border:1px solid var(--border);border-radius:14px;padding:13px 14px}.edoc-readiness .ok{background:#f0fdf4;border-color:#bbf7d0;color:#166534}.edoc-readiness .danger{background:#fff1f2;border-color:#fecdd3;color:#9f1239}.edoc-readiness .warning{background:#fffbeb;border-color:#fde68a;color:#854d0e}.edoc-readiness i{margin-top:3px}.edoc-readiness small{display:block;margin-top:4px;color:inherit;opacity:.85}.edoc-work-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.edoc-work-card{border:1px solid var(--border);border-radius:18px;padding:16px;background:var(--surface)}.edoc-work-head{display:grid;grid-template-columns:auto 1fr auto;gap:11px;align-items:start}.edoc-work-head h4{margin:0 0 4px;font-size:1.03rem}.edoc-work-head p{font-size:.84rem;margin:0}.edoc-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--surface-2);border:1px solid var(--border);font-size:1.05rem}.edoc-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px}.edoc-inline{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.edoc-inline input{width:130px}.edoc-keyvals{display:grid;gap:8px;margin-top:13px}.edoc-keyvals>div{border:1px solid var(--border);border-radius:11px;padding:10px}.edoc-keyvals span,.edoc-keyvals small{display:block;color:var(--muted);font-size:.76rem}.edoc-keyvals b{display:block;font-size:.84rem;overflow-wrap:anywhere;margin-top:3px}.edoc-response-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}.edoc-response-form .full{grid-column:1/-1}.edoc-response-form textarea{min-height:82px}.edoc-cancel-row{display:flex;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}.edoc-cancel-row input{flex:1}.danger-text{color:#b91c1c!important}.edoc-timeline{margin-top:18px;border-top:1px solid var(--border);padding-top:16px}.edoc-timeline h4{margin:0 0 12px}.edoc-timeline>div{display:grid;grid-template-columns:12px 120px minmax(160px,.65fr) 1fr;gap:8px;align-items:start;padding:8px 0}.edoc-dot{width:8px;height:8px;border-radius:50%;background:var(--primary);margin-top:5px}.edoc-timeline time,.edoc-timeline small{font-size:.78rem;color:var(--muted)}.edoc-note{display:flex;gap:15px;align-items:flex-start}.edoc-note-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;border:1px solid var(--border);background:var(--surface-2)}.edoc-note h3{margin:0 0 6px}.edoc-note p{margin:0;color:var(--muted);line-height:1.6}.edoc-config input,.edoc-config select,.edoc-config textarea,.edoc-filter input,.edoc-filter select,.edoc-response-form input,.edoc-response-form textarea,.edoc-inline input,.edoc-cancel-row input{font-size:.94rem} @media(max-width:1000px){.edoc-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.edoc-config-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.edoc-work-grid{grid-template-columns:1fr}} @media(max-width:700px){.edoc-hero{flex-direction:column}.edoc-hero .page-actions{width:100%;display:grid;grid-template-columns:1fr 1fr}.edoc-stats,.edoc-config-grid,.edoc-switch-grid,.edoc-readiness{grid-template-columns:1fr}.edoc-filter{grid-template-columns:1fr 1fr}.edoc-filter label:first-child{grid-column:1/-1}.edoc-filter button,.edoc-filter a{width:100%}.edoc-response-form{grid-template-columns:1fr}.edoc-response-form .full{grid-column:auto}.edoc-cancel-row{flex-direction:column}.edoc-timeline>div{grid-template-columns:12px 1fr}.edoc-timeline time{grid-column:2}.edoc-timeline b,.edoc-timeline small{grid-column:2}.edoc-work-head{grid-template-columns:auto 1fr}.edoc-work-head>.edoc-status{grid-column:2;justify-self:start}.edoc-inline{align-items:stretch}.edoc-inline input{width:100%}} /* ========================================================================== Phase 27 — Advanced Global Search + Command Palette Premium flat UI: no gradients, connected visual language, responsive. ========================================================================== */ .header-search{font-family:inherit;cursor:pointer;text-align:left;transition:border-color .16s ease,background .16s ease,box-shadow .16s ease;} .header-search:hover{border-color:var(--primary-border);background:var(--surface);box-shadow:0 6px 18px rgba(15,23,42,.06);} .header-search:focus-visible{outline:0;border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-ring);} .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;} body.palette-open{overflow:hidden;} .pb-palette-layer{position:fixed;inset:0;z-index:2147483000;display:none;align-items:flex-start;justify-content:center;padding:8vh 18px 24px;} .pb-palette-layer.show{display:flex;} .pb-palette-scrim{position:absolute;inset:0;background:color-mix(in srgb,var(--text) 42%,transparent);backdrop-filter:blur(5px);} .pb-palette{position:relative;width:min(780px,calc(100vw - 28px));max-height:min(720px,84vh);display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:22px;box-shadow:0 30px 80px rgba(15,23,42,.28);overflow:hidden;animation:pbPaletteIn .16s ease-out;} @keyframes pbPaletteIn{from{opacity:0;transform:translateY(-10px) scale(.986)}to{opacity:1;transform:none}} .pb-palette-head{display:flex;align-items:center;gap:12px;padding:15px 16px;border-bottom:1px solid var(--border);background:var(--surface);} .pb-palette-brand{width:40px;height:40px;flex:0 0 40px;display:grid;place-items:center;border-radius:12px;background:var(--primary-soft);color:var(--primary);border:1px solid var(--primary-border);font-size:15px;} .pb-palette-search{min-width:0;flex:1;display:flex;align-items:center;gap:10px;} .pb-palette-search input{width:100%;border:0!important;box-shadow:none!important;background:transparent!important;padding:8px 0!important;font-size:17px!important;font-weight:650;color:var(--text);outline:0;} .pb-palette-search input::placeholder{color:var(--muted);font-weight:500;} .pb-palette-shortcut kbd,.pb-palette-foot kbd{border:1px solid var(--border);border-bottom-color:var(--border-strong);background:var(--surface-soft);border-radius:6px;padding:3px 6px;color:var(--muted);font-size:9px;font-family:inherit;font-weight:750;box-shadow:0 1px 0 var(--border);} .pb-palette-close{width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--muted);cursor:pointer;} .pb-palette-close:hover{background:var(--surface-hover);color:var(--text);border-color:var(--border-strong);} .pb-palette-modebar{display:flex;align-items:center;gap:6px;padding:9px 14px;border-bottom:1px solid var(--border);background:var(--surface-soft);overflow-x:auto;scrollbar-width:none;} .pb-palette-modebar::-webkit-scrollbar{display:none;} .pb-palette-modebar button,.pb-palette-modebar a{white-space:nowrap;border:1px solid transparent;border-radius:9px;background:transparent;color:var(--muted);height:32px;padding:0 10px;display:inline-flex;align-items:center;gap:7px;text-decoration:none;font:700 10px/1 Inter,sans-serif;cursor:pointer;} .pb-palette-modebar button:hover,.pb-palette-modebar a:hover{background:var(--surface);color:var(--text);border-color:var(--border);} .pb-palette-modebar button.active{background:var(--surface);color:var(--primary);border-color:var(--primary-border);box-shadow:0 2px 8px rgba(15,23,42,.05);} .pb-palette-modebar a{margin-left:auto;color:var(--primary);} .pb-palette-body{overflow:auto;overscroll-behavior:contain;padding:10px;min-height:250px;max-height:540px;background:var(--surface);} .pb-palette-section+.pb-palette-section{margin-top:10px;padding-top:10px;border-top:1px solid var(--border);} .pb-palette-section-title{height:28px;display:flex;align-items:center;justify-content:space-between;padding:0 9px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-size:9px;font-weight:800;} .pb-palette-section-title small{font-size:9px;color:var(--muted);background:var(--surface-soft);border:1px solid var(--border);border-radius:999px;padding:2px 6px;} .pb-palette-row{display:grid;grid-template-columns:42px minmax(0,1fr) minmax(110px,auto) 26px;gap:10px;align-items:center;padding:9px 10px;border:1px solid transparent;border-radius:12px;text-decoration:none;color:var(--text);min-height:58px;} .pb-palette-row:hover,.pb-palette-row.selected{background:var(--primary-soft-2);border-color:var(--primary-border);} .pb-palette-row-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;background:var(--surface-soft);border:1px solid var(--border);color:var(--primary);} .pb-palette-row-copy{min-width:0;display:block;} .pb-palette-row-copy b{display:block;font-size:12px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .pb-palette-row-copy small{display:block;margin-top:4px;color:var(--muted);font-size:9px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .pb-palette-row-meta{text-align:right;min-width:0;} .pb-palette-row-meta em{display:inline-flex;padding:3px 7px;border-radius:999px;background:var(--surface-soft);border:1px solid var(--border);font-style:normal;font-size:8px;font-weight:800;color:var(--text);} .pb-palette-row-meta small{display:block;margin-top:4px;color:var(--muted);font-size:8.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px;} .pb-palette-enter{color:var(--muted);font-size:10px;text-align:center;opacity:.55;} .pb-palette-row.selected .pb-palette-enter{color:var(--primary);opacity:1;} .pb-palette-welcome{min-height:225px;display:grid;place-items:center;align-content:center;gap:12px;text-align:center;padding:28px;color:var(--muted);} .pb-palette-welcome-icon{width:54px;height:54px;display:grid;place-items:center;border:1px solid var(--primary-border);background:var(--primary-soft);border-radius:16px;color:var(--primary);font-size:19px;} .pb-palette-welcome b{display:block;color:var(--text);font-size:13px;} .pb-palette-welcome small{display:block;max-width:430px;margin-top:5px;font-size:9.5px;line-height:1.55;} .pb-palette-welcome.is-error .pb-palette-welcome-icon{color:var(--danger);background:var(--danger-soft);border-color:color-mix(in srgb,var(--danger) 25%,var(--border));} .pb-palette-loading{min-height:225px;display:flex;align-items:center;justify-content:center;gap:7px;color:var(--muted);font-size:10px;} .pb-palette-loading span{width:6px;height:6px;border-radius:50%;background:var(--primary);animation:pbDot .8s infinite alternate;}.pb-palette-loading span:nth-child(2){animation-delay:.15s}.pb-palette-loading span:nth-child(3){animation-delay:.3s}.pb-palette-loading b{margin-left:6px;font-weight:650;} @keyframes pbDot{to{opacity:.25;transform:translateY(-3px)}} .pb-palette-foot{display:flex;align-items:center;gap:14px;padding:10px 15px;border-top:1px solid var(--border);background:var(--surface-soft);color:var(--muted);font-size:8.5px;} .pb-palette-foot>span{display:flex;align-items:center;gap:4px;white-space:nowrap;}.pb-palette-secure{margin-left:auto;color:var(--success)!important;font-weight:700;} .tone-blue{color:#2563eb!important;background:color-mix(in srgb,#2563eb 8%,var(--surface))!important;border-color:color-mix(in srgb,#2563eb 18%,var(--border))!important}.tone-teal,.tone-emerald,.tone-green{color:#059669!important;background:color-mix(in srgb,#059669 8%,var(--surface))!important;border-color:color-mix(in srgb,#059669 18%,var(--border))!important}.tone-amber,.tone-orange{color:#d97706!important;background:color-mix(in srgb,#d97706 8%,var(--surface))!important;border-color:color-mix(in srgb,#d97706 18%,var(--border))!important}.tone-violet,.tone-indigo{color:#7c3aed!important;background:color-mix(in srgb,#7c3aed 8%,var(--surface))!important;border-color:color-mix(in srgb,#7c3aed 18%,var(--border))!important}.tone-rose{color:#e11d48!important;background:color-mix(in srgb,#e11d48 8%,var(--surface))!important;border-color:color-mix(in srgb,#e11d48 18%,var(--border))!important}.tone-cyan{color:#0891b2!important;background:color-mix(in srgb,#0891b2 8%,var(--surface))!important;border-color:color-mix(in srgb,#0891b2 18%,var(--border))!important} .gs-page{display:grid;gap:14px;max-width:1500px;margin:0 auto;} .gs-hero{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 24px;border:1px solid var(--border);border-radius:18px;background:var(--surface);box-shadow:0 6px 24px rgba(15,23,42,.05);position:relative;overflow:hidden;} .gs-hero:before{content:'';position:absolute;left:0;top:18px;bottom:18px;width:4px;border-radius:0 6px 6px 0;background:var(--primary);} .gs-hero-copy{padding-left:5px;}.gs-kicker{display:inline-flex;align-items:center;gap:7px;color:var(--primary);font-size:9px;font-weight:850;letter-spacing:.1em;}.gs-hero h2{font-size:24px;margin:7px 0 5px;letter-spacing:-.025em}.gs-hero p{max-width:720px;margin:0;color:var(--muted);font-size:11px;line-height:1.55;} .gs-command-btn{height:46px;min-width:190px;border:1px solid var(--primary-border);background:var(--primary-soft-2);border-radius:12px;padding:0 12px;display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--text);cursor:pointer;}.gs-command-btn>span{display:flex;align-items:center;gap:8px}.gs-command-btn i{color:var(--primary)}.gs-command-btn b{font-size:10px}.gs-command-btn kbd{border:1px solid var(--border);background:var(--surface);border-radius:6px;padding:3px 6px;color:var(--muted);font-size:8px;} .gs-search-card{border:1px solid var(--border);background:var(--surface);border-radius:18px;padding:14px;box-shadow:0 4px 18px rgba(15,23,42,.04);} .gs-search-field{display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:9px;height:54px;border:1px solid var(--border-strong);border-radius:13px;padding:0 7px 0 15px;background:var(--surface);box-shadow:0 0 0 3px transparent;transition:.16s;}.gs-search-field:focus-within{border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-ring)}.gs-search-field>i{color:var(--primary);font-size:14px}.gs-search-field input{border:0!important;background:transparent!important;box-shadow:none!important;outline:0!important;padding:0!important;font-size:13px!important;font-weight:600;min-width:0}.gs-search-field button{height:40px;border:0;border-radius:10px;background:var(--primary);color:#fff;padding:0 18px;font:800 10px/1 Inter,sans-serif;cursor:pointer}.gs-search-field button:hover{background:var(--primary-dark)} .gs-type-strip{display:flex;gap:7px;margin-top:11px;overflow-x:auto;padding:1px 1px 3px;scrollbar-width:thin}.gs-type-chip{height:34px;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;padding:0 10px;border:1px solid var(--border);border-radius:9px;text-decoration:none;color:var(--muted);background:var(--surface-soft);font-size:9px;font-weight:750}.gs-type-chip:hover{border-color:var(--primary-border);color:var(--text);background:var(--surface)}.gs-type-chip.active{border-color:var(--primary-border-strong);background:var(--primary-soft);color:var(--primary)} .gs-result-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:2px 4px}.gs-result-summary>div{display:flex;align-items:baseline;gap:7px}.gs-result-summary b{font-size:11px}.gs-result-summary span{font-size:9.5px;color:var(--muted)}.gs-secure-note{display:flex!important;align-items:center;gap:6px;color:var(--success)!important;font-weight:700}.gs-result-layout{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}.gs-result-group{background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:0 4px 16px rgba(15,23,42,.04);overflow:hidden}.gs-group-head{height:62px;padding:0 14px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);background:var(--surface-soft)}.gs-group-head>div{display:flex;align-items:center;gap:10px}.gs-group-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;background:var(--surface);border:1px solid var(--border);color:var(--primary)}.gs-group-head h3{font-size:11px;margin:0}.gs-group-head small{display:block;color:var(--muted);font-size:8px;margin-top:3px}.gs-group-head>a{display:inline-flex;align-items:center;gap:5px;color:var(--primary);font-size:8.5px;font-weight:800;text-decoration:none}.gs-result-list{padding:6px}.gs-result-row{display:grid;grid-template-columns:40px minmax(0,1fr) minmax(100px,auto) 24px;align-items:center;gap:9px;padding:8px;border:1px solid transparent;border-radius:10px;text-decoration:none;color:var(--text);min-height:58px}.gs-result-row:hover{background:var(--primary-soft-2);border-color:var(--primary-border)}.gs-result-icon{width:36px;height:36px;display:grid;place-items:center;border-radius:9px;border:1px solid var(--border);background:var(--surface-soft);color:var(--primary)}.gs-result-copy{min-width:0}.gs-result-copy b{display:block;font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gs-result-copy small{display:block;margin-top:3px;font-size:8.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gs-result-meta{text-align:right;min-width:0}.gs-result-meta em{display:inline-block;font-style:normal;font-size:7.5px;font-weight:800;border:1px solid var(--border);background:var(--surface);border-radius:999px;padding:2px 6px;color:var(--muted)}.gs-result-meta small{display:block;max-width:150px;margin-top:3px;color:var(--muted);font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gs-result-arrow{color:var(--muted);font-size:9px;text-align:right}.gs-result-row:hover .gs-result-arrow{color:var(--primary)} .gs-empty-state{min-height:330px;background:var(--surface);border:1px solid var(--border);border-radius:18px;display:grid;place-items:center;align-content:center;text-align:center;padding:34px;color:var(--muted);box-shadow:0 4px 18px rgba(15,23,42,.04)}.gs-empty-icon{width:64px;height:64px;display:grid;place-items:center;border-radius:18px;border:1px solid var(--primary-border);background:var(--primary-soft);color:var(--primary);font-size:23px}.gs-empty-state h3{margin:14px 0 5px;color:var(--text);font-size:15px}.gs-empty-state p{margin:0;max-width:600px;font-size:10px;line-height:1.6}.gs-tip-row{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:16px}.gs-tip-row span{height:30px;display:flex;align-items:center;gap:6px;padding:0 9px;border:1px solid var(--border);border-radius:8px;background:var(--surface-soft);font-size:8.5px}.gs-tip-row kbd{border:1px solid var(--border-strong);background:var(--surface);border-radius:5px;padding:2px 5px;font-size:8px} @media(max-width:980px){.gs-result-layout{grid-template-columns:1fr}.gs-hero{align-items:flex-start}.gs-command-btn{min-width:168px}.pb-palette{max-height:88vh}.pb-palette-foot{gap:8px}.pb-palette-secure{display:none!important}} @media(max-width:680px){.pb-palette-layer{padding:12px 8px;align-items:flex-start}.pb-palette{width:100%;max-height:calc(100dvh - 24px);border-radius:16px}.pb-palette-head{padding:11px}.pb-palette-brand{width:36px;height:36px;flex-basis:36px}.pb-palette-search input{font-size:14px!important}.pb-palette-modebar{padding:7px 9px}.pb-palette-modebar a{margin-left:0}.pb-palette-body{padding:7px;max-height:calc(100dvh - 190px)}.pb-palette-row{grid-template-columns:38px minmax(0,1fr) 22px;padding:8px 7px}.pb-palette-row-icon{width:34px;height:34px}.pb-palette-row-meta{display:none}.pb-palette-foot{padding:8px 10px}.pb-palette-foot span:nth-child(3){display:none}.gs-page{gap:10px}.gs-hero{display:block;padding:17px 16px}.gs-hero h2{font-size:20px}.gs-command-btn{margin-top:14px;width:100%;min-width:0}.gs-search-card{padding:10px}.gs-search-field{grid-template-columns:20px 1fr;height:50px;padding-right:10px}.gs-search-field button{display:none}.gs-result-summary{display:block;padding:3px}.gs-secure-note{margin-top:5px}.gs-result-row{grid-template-columns:36px minmax(0,1fr) 22px}.gs-result-meta{display:none}.gs-empty-state{min-height:280px;padding:24px 18px}.gs-tip-row{gap:6px}.gs-group-head{padding:0 10px}} /* Phase 28 — Mobile Camera Scanner + PWA */ .header-mobile-icon,.header-pwa-install{position:relative}.header-pwa-install.pwa-ready:after{content:'';position:absolute;right:5px;top:5px;width:7px;height:7px;border-radius:50%;background:var(--success);border:2px solid var(--surface)} .pb-scan-inline{width:36px;height:34px;display:grid;place-items:center;flex:0 0 auto;border:1px solid var(--primary-border);border-radius:9px;background:var(--primary-soft);color:var(--primary);cursor:pointer}.pb-scan-inline:hover{border-color:var(--primary);background:var(--surface)}.purchase-product-search .pb-scan-inline{position:absolute;right:8px;top:50%;transform:translateY(-50%);z-index:3}.purchase-product-search:has(.pb-scan-inline) input{padding-right:50px}.pos-search-box .pb-scan-inline{margin-right:3px}.pos-catalog-search .pb-scan-inline{border:0;background:var(--primary-soft);height:32px;width:34px}.pos-catalog-search .pb-scan-inline:hover{background:var(--surface);color:var(--primary)} body.scanner-open{overflow:hidden}.pb-scanner-layer{position:fixed;inset:0;z-index:2147483000;display:none;align-items:center;justify-content:center;padding:18px}.pb-scanner-layer.open{display:flex}.pb-scanner-scrim{position:absolute;inset:0;background:rgba(15,23,42,.72);backdrop-filter:blur(7px)}.pb-scanner{position:relative;width:min(540px,100%);max-height:calc(100dvh - 28px);overflow:auto;border:1px solid var(--border);border-radius:20px;background:var(--surface);box-shadow:0 28px 90px rgba(15,23,42,.3)}.pb-scanner-head{height:68px;display:grid;grid-template-columns:42px 1fr 36px;align-items:center;gap:10px;padding:0 14px;border-bottom:1px solid var(--border)}.pb-scanner-brand{width:40px;height:40px;display:grid;place-items:center;border-radius:11px;border:1px solid var(--primary-border);background:var(--primary-soft);color:var(--primary);font-size:16px}.pb-scanner-head span{display:block;font-size:8px;font-weight:850;letter-spacing:.12em;color:var(--primary)}.pb-scanner-head h2{font-size:15px;margin:3px 0 0}.pb-scanner-close{width:34px;height:34px;border:1px solid var(--border);border-radius:9px;background:var(--surface-soft);color:var(--muted);cursor:pointer}.pb-scanner-stage{position:relative;aspect-ratio:4/3;background:#07111f;overflow:hidden}.pb-scanner-stage video{width:100%;height:100%;object-fit:cover;display:block}.pb-scanner-frame{position:absolute;inset:18% 12%;pointer-events:none}.pb-scanner-frame>span{position:absolute;width:28px;height:28px;border-color:#fff;border-style:solid;filter:drop-shadow(0 2px 4px rgba(0,0,0,.35))}.pb-scanner-frame>span:nth-child(1){left:0;top:0;border-width:3px 0 0 3px;border-radius:8px 0 0}.pb-scanner-frame>span:nth-child(2){right:0;top:0;border-width:3px 3px 0 0;border-radius:0 8px 0 0}.pb-scanner-frame>span:nth-child(3){right:0;bottom:0;border-width:0 3px 3px 0;border-radius:0 0 8px}.pb-scanner-frame>span:nth-child(4){left:0;bottom:0;border-width:0 0 3px 3px;border-radius:0 0 0 8px}.pb-scan-line{position:absolute;left:6%;right:6%;top:50%;height:2px;background:#5eead4;box-shadow:0 0 10px rgba(94,234,212,.8);animation:pbScanLine 2s ease-in-out infinite}@keyframes pbScanLine{0%,100%{transform:translateY(-80px);opacity:.45}50%{transform:translateY(80px);opacity:1}}.pb-scanner-camera-state{position:absolute;inset:0;display:grid;place-items:center;align-content:center;text-align:center;padding:26px;background:#07111f;color:#fff}.pb-scanner-camera-state i{font-size:28px;color:#93c5fd;margin-bottom:10px}.pb-scanner-camera-state b{font-size:13px}.pb-scanner-camera-state small{max-width:360px;color:#94a3b8;margin-top:6px;font-size:10px;line-height:1.5}.pb-torch-btn{position:absolute;right:12px;bottom:12px;height:34px;border:1px solid rgba(255,255,255,.25);border-radius:10px;background:rgba(15,23,42,.72);color:#fff;padding:0 11px;display:flex;align-items:center;gap:7px;font-size:9px;font-weight:800;cursor:pointer}.pb-torch-btn.on{background:#fff;color:#0f172a}.pb-scanner-body{padding:14px}.pb-scanner-status{height:34px;display:flex;align-items:center;gap:8px;padding:0 10px;border:1px solid var(--border);border-radius:9px;background:var(--surface-soft);font-size:9px;font-weight:700;color:var(--muted)}.pb-live-dot{width:7px;height:7px;border-radius:50%;background:var(--primary);box-shadow:0 0 0 4px var(--primary-ring)}.pb-scanner-status.ok{color:var(--success);border-color:color-mix(in srgb,var(--success) 28%,var(--border));background:color-mix(in srgb,var(--success) 5%,var(--surface))}.pb-scanner-manual{margin-top:12px}.pb-scanner-manual>label{display:block;font-size:9px;font-weight:800;margin-bottom:6px}.pb-scanner-manual>div{height:44px;display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:7px;border:1px solid var(--border-strong);border-radius:11px;padding:0 6px 0 12px}.pb-scanner-manual i{color:var(--muted)}.pb-scanner-manual input{border:0!important;box-shadow:none!important;background:transparent!important;padding:0!important;min-width:0;font-size:11px!important}.pb-scanner-manual button{height:32px;border:0;border-radius:8px;background:var(--primary);color:#fff;font-size:9px;font-weight:800;padding:0 13px;cursor:pointer}.pb-scanner-privacy{display:flex;align-items:flex-start;gap:7px;margin:10px 2px 0;color:var(--muted);font-size:8.5px;line-height:1.5}.pb-scanner-privacy i{color:var(--success);margin-top:2px} .mw-page{display:grid;gap:14px;max-width:1500px;margin:0 auto}.mw-hero{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:23px 24px;border:1px solid var(--border);border-radius:19px;background:var(--surface);box-shadow:0 7px 26px rgba(15,23,42,.05)}.mw-hero:before{content:'';position:absolute;left:0;top:18px;bottom:18px;width:4px;border-radius:0 6px 6px 0;background:var(--primary)}.mw-hero-copy{padding-left:6px}.mw-kicker{display:inline-flex;align-items:center;gap:7px;color:var(--primary);font-size:9px;font-weight:850;letter-spacing:.1em}.mw-hero h2{font-size:25px;margin:7px 0 6px;letter-spacing:-.025em}.mw-hero p{max-width:800px;margin:0;color:var(--muted);font-size:10.5px;line-height:1.6}.mw-hero-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}.mw-hero-chips span{display:inline-flex;align-items:center;gap:6px;height:29px;padding:0 9px;border:1px solid var(--border);border-radius:8px;background:var(--surface-soft);font-size:8.5px;font-weight:700;color:var(--muted)}.mw-hero-chips i{color:var(--primary)}.mw-device-card{min-width:230px;display:flex;align-items:center;gap:12px;padding:13px;border:1px solid var(--primary-border);border-radius:14px;background:var(--primary-soft-2)}.mw-device-icon{width:48px;height:48px;display:grid;place-items:center;border:1px solid var(--primary-border);border-radius:13px;background:var(--surface);color:var(--primary);font-size:20px}.mw-device-card small,.mw-device-card em{display:block;font-size:8px;color:var(--muted);font-style:normal}.mw-device-card b{display:block;margin:3px 0;font-size:11px}.mw-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);gap:14px;align-items:start}.mw-card{margin:0!important;border-radius:18px!important}.mw-card-head{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:10px;align-items:start}.mw-card-icon{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--primary-border);border-radius:11px;background:var(--primary-soft);color:var(--primary);font-size:15px}.mw-card-head h3{font-size:14px;margin:3px 0 3px}.mw-card-head p{font-size:9px;line-height:1.55;color:var(--muted);margin:0;max-width:670px}.mw-ready{display:inline-flex;align-items:center;gap:5px;border:1px solid color-mix(in srgb,var(--success) 25%,var(--border));border-radius:999px;padding:5px 8px;color:var(--success);background:color-mix(in srgb,var(--success) 5%,var(--surface));font-size:8px;font-weight:800;white-space:nowrap}.mw-scan-actions{display:flex;align-items:stretch;gap:10px;margin-top:17px}.mw-scan-primary{min-height:46px}.mw-mode-switch{display:flex;align-items:center;gap:9px;border:1px solid var(--border);border-radius:11px;background:var(--surface-soft);padding:7px 10px;cursor:pointer;text-align:left}.mw-mode-switch b{display:block;font-size:9px}.mw-mode-switch small{display:block;margin-top:2px;color:var(--muted);font-size:7.5px}.mw-switch-track{position:relative;width:35px;height:20px;border-radius:999px;background:var(--border-strong);flex:0 0 auto;transition:.16s}.mw-switch-track i{position:absolute;left:3px;top:3px;width:14px;height:14px;border-radius:50%;background:var(--surface);box-shadow:0 2px 5px rgba(15,23,42,.15);transition:.16s}.mw-mode-switch.on .mw-switch-track{background:var(--primary)}.mw-mode-switch.on .mw-switch-track i{transform:translateX(15px)}.mw-manual{margin-top:13px}.mw-manual>label{display:block;font-size:9px;font-weight:800;margin-bottom:6px}.mw-manual>div{height:47px;display:grid;grid-template-columns:23px 1fr auto;align-items:center;gap:7px;border:1px solid var(--border-strong);border-radius:11px;padding:0 6px 0 13px}.mw-manual>div>i{color:var(--primary)}.mw-manual input{border:0!important;box-shadow:none!important;background:transparent!important;padding:0!important;font-size:11px!important}.mw-manual button{height:34px;border:0;border-radius:8px;background:var(--text);color:var(--surface);font-size:8.5px;font-weight:800;padding:0 13px;cursor:pointer}.mw-camera-note{display:flex;align-items:flex-start;gap:8px;padding:10px 11px;margin-top:11px;border:1px solid #bfdbfe;border-radius:10px;background:#eff6ff;color:#1e40af;font-size:8.5px;line-height:1.5}.mw-camera-note i{margin-top:2px}.mw-result{margin-top:13px;border:1px solid var(--border);border-radius:13px;background:var(--surface-soft);min-height:130px;padding:8px}.mw-result-empty{min-height:112px;display:grid;place-items:center;align-content:center;text-align:center;color:var(--muted)}.mw-result-empty>span{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;background:var(--surface);border:1px solid var(--border);color:var(--primary);font-size:15px}.mw-result-empty b{margin-top:7px;font-size:10px;color:var(--text)}.mw-result-empty small{margin-top:3px;font-size:8px;max-width:390px}.mw-result-empty code{margin-top:7px;border:1px solid var(--border);border-radius:6px;background:var(--surface);padding:3px 6px;font-size:8px}.mw-result-loading,.mw-result-error{min-height:112px;display:flex;align-items:center;justify-content:center;gap:9px;color:var(--muted);font-size:9px}.mw-result-error{justify-content:flex-start;padding:16px}.mw-result-error>i{color:var(--danger);font-size:18px}.mw-result-error b,.mw-result-error small{display:block}.mw-result-error small{color:var(--muted);margin-top:3px}.mw-product-list{display:grid;gap:6px}.mw-product{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:9px;padding:8px;border:1px solid var(--border);border-radius:10px;background:var(--surface)}.mw-product-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:9px;border:1px solid var(--border);background:var(--surface-soft);color:var(--primary);overflow:hidden}.mw-product-icon img{width:100%;height:100%;object-fit:cover}.mw-product-copy b{font-size:10px}.mw-product-copy>small{display:block;color:var(--muted);font-size:8px;margin-top:2px}.mw-product-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}.mw-product-tags em{font-style:normal;border:1px solid var(--border);border-radius:999px;background:var(--surface-soft);padding:2px 6px;font-size:7px;font-weight:700;color:var(--muted)}.mw-product-actions{display:flex;gap:5px}.mw-product-actions a{width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--border);border-radius:8px;background:var(--surface-soft);color:var(--muted);text-decoration:none}.mw-product-actions a:hover{border-color:var(--primary-border);color:var(--primary)}.mw-pwa-status{display:flex;align-items:center;gap:9px;margin-top:17px;padding:11px;border:1px solid var(--border);border-radius:11px;background:var(--surface-soft)}.mw-status-dot{width:10px;height:10px;border-radius:50%;background:var(--muted);box-shadow:0 0 0 4px color-mix(in srgb,var(--muted) 12%,transparent)}.mw-pwa-status.available .mw-status-dot,.mw-pwa-status.installed .mw-status-dot{background:var(--success);box-shadow:0 0 0 4px color-mix(in srgb,var(--success) 12%,transparent)}.mw-pwa-status b,.mw-pwa-status small{display:block}.mw-pwa-status b{font-size:9.5px}.mw-pwa-status small{margin-top:2px;font-size:7.5px;color:var(--muted)}.mw-install-btn{width:100%;justify-content:center;margin-top:10px;min-height:43px}.mw-safety-list{display:grid;gap:7px;margin-top:13px}.mw-safety-list>div{display:grid;grid-template-columns:30px 1fr;gap:8px;padding:8px;border:1px solid var(--border);border-radius:10px}.mw-safety-list>div>span{width:28px;height:28px;display:grid;place-items:center;border-radius:8px;background:var(--primary-soft);color:var(--primary)}.mw-safety-list b,.mw-safety-list small{display:block}.mw-safety-list b{font-size:8.5px}.mw-safety-list small{margin-top:2px;font-size:7.5px;line-height:1.45;color:var(--muted)}.mw-ios-help{display:flex;gap:8px;margin-top:12px;padding:9px;border:1px solid var(--border);border-radius:10px;background:var(--surface-soft);font-size:7.5px;line-height:1.5;color:var(--muted)}.mw-ios-help i{font-size:15px;color:var(--text)}.mw-workflows{margin:0!important;border-radius:18px!important}.mw-workflow-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.mw-workflow-grid>a{display:grid;grid-template-columns:38px minmax(0,1fr) 18px;align-items:center;gap:9px;padding:10px;border:1px solid var(--border);border-radius:11px;background:var(--surface-soft);color:var(--text);text-decoration:none}.mw-workflow-grid>a>span{width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--primary-border);border-radius:9px;background:var(--surface);color:var(--primary)}.mw-workflow-grid b,.mw-workflow-grid small{display:block}.mw-workflow-grid b{font-size:9px}.mw-workflow-grid small{margin-top:2px;font-size:7.5px;color:var(--muted);line-height:1.4}.mw-workflow-grid>a>i{color:var(--muted);font-size:8px}.mw-workflow-grid>a:hover{border-color:var(--primary-border);background:var(--surface)}.mw-workflow-grid>a:hover>i{color:var(--primary)} @media(max-width:1050px){.mw-grid{grid-template-columns:1fr}.mw-workflow-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:720px){.pb-scanner-layer{padding:8px;align-items:flex-end}.pb-scanner{max-height:calc(100dvh - 8px);border-radius:18px 18px 12px 12px}.pb-scanner-head{height:62px}.pb-scanner-stage{aspect-ratio:1/1}.mw-page{gap:10px}.mw-hero{display:block;padding:18px 16px}.mw-hero h2{font-size:21px}.mw-device-card{margin-top:15px;min-width:0}.mw-card{padding:14px!important}.mw-card-head{grid-template-columns:38px minmax(0,1fr)}.mw-ready{grid-column:2;justify-self:start}.mw-scan-actions{display:grid}.mw-mode-switch{width:100%}.mw-workflow-grid{grid-template-columns:1fr}.header-pwa-install{display:none!important}}@media(max-width:480px){.mw-hero-chips{display:grid}.mw-hero-chips span{justify-content:flex-start}.mw-product{grid-template-columns:38px minmax(0,1fr)}.mw-product-actions{grid-column:2}.pb-scanner-frame{inset:16% 9%}} /* Phase 29 — Guided Setup / Business Presets */ .onboarding-reminder{margin:14px 22px 0;display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--primary-border);border-radius:16px;background:var(--surface);box-shadow:0 10px 28px rgba(15,23,42,.06)} .onboarding-reminder-icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary);font-size:1.05rem;flex:0 0 auto}.onboarding-reminder>div{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}.onboarding-reminder b{font-size:.94rem;color:var(--text)}.onboarding-reminder span{font-size:.82rem;color:var(--muted)} .onboarding-hero{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,.55fr);gap:28px;align-items:center;padding:26px}.onboarding-hero-copy h2{font-size:clamp(1.55rem,2.3vw,2.15rem);margin:6px 0 10px}.onboarding-hero-copy p{max-width:820px;color:var(--muted);line-height:1.65;margin:0}.onboarding-safety{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}.onboarding-safety span{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid var(--border);border-radius:999px;background:var(--surface-soft);font-size:.78rem;font-weight:700;color:var(--text-soft)}.onboarding-safety i{color:var(--primary)} .onboarding-progress-card{border:1px solid var(--border);border-radius:18px;padding:17px;background:var(--surface-soft)}.onboarding-progress-card>div:first-child{display:flex;justify-content:space-between;gap:16px;align-items:end}.onboarding-progress-card span{font-size:.8rem;color:var(--muted);font-weight:700}.onboarding-progress-card strong{font-size:1.75rem;line-height:1;color:var(--primary)}.onboarding-progress-track{height:9px;border-radius:999px;background:color-mix(in srgb,var(--border) 75%,var(--surface));overflow:hidden;margin:12px 0 9px}.onboarding-progress-track i{display:block;height:100%;border-radius:inherit;background:var(--primary)}.onboarding-progress-card small{font-size:.76rem;color:var(--muted);line-height:1.45} .onboarding-stepper{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px;margin-bottom:18px}.onboarding-step{display:flex;align-items:center;gap:10px;min-width:0;padding:11px 12px;border:1px solid var(--border);border-radius:15px;background:var(--surface);text-decoration:none;color:var(--text);box-shadow:0 6px 18px rgba(15,23,42,.035);transition:.18s ease}.onboarding-step:hover{border-color:var(--primary-border);transform:translateY(-1px)}.onboarding-step>span{width:34px;height:34px;border-radius:11px;background:var(--surface-soft);display:grid;place-items:center;color:var(--muted);flex:0 0 auto}.onboarding-step div{display:flex;flex-direction:column;min-width:0}.onboarding-step small{font-size:.67rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:800}.onboarding-step b{font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.onboarding-step.active{border-color:var(--primary-border-strong);box-shadow:0 10px 24px var(--primary-shadow)}.onboarding-step.active>span{background:var(--primary);color:#fff}.onboarding-step.done:not(.active)>span{background:color-mix(in srgb,#16a34a 11%,var(--surface));color:#15803d}.onboarding-step.done{border-color:color-mix(in srgb,#16a34a 24%,var(--border))} .onboarding-panel{padding:24px}.onboarding-step-chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border);background:var(--surface-soft);padding:8px 11px;border-radius:999px;font-weight:800;font-size:.76rem;color:var(--text-soft)}.onboarding-step-chip.complete{border-color:color-mix(in srgb,#16a34a 30%,var(--border));background:color-mix(in srgb,#16a34a 8%,var(--surface));color:#15803d} .preset-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}.preset-card{display:flex;flex-direction:column;gap:14px;min-height:310px;border:1px solid var(--border);border-radius:18px;padding:17px;background:var(--surface);transition:.18s ease;position:relative}.preset-card:hover{border-color:var(--primary-border);box-shadow:0 12px 30px rgba(15,23,42,.07);transform:translateY(-2px)}.preset-card.selected{border-color:var(--primary-border-strong);box-shadow:0 12px 30px var(--primary-shadow)}.preset-icon{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary);font-size:1.1rem}.preset-copy{display:flex;flex-direction:column;gap:10px;flex:1}.preset-title{display:flex;align-items:center;justify-content:space-between;gap:8px}.preset-title h3{margin:0;font-size:1rem}.preset-copy p{margin:0;color:var(--muted);font-size:.81rem;line-height:1.5}.preset-highlights{display:flex;flex-direction:column;gap:7px}.preset-highlights span{display:flex;align-items:center;gap:7px;font-size:.76rem;color:var(--text-soft)}.preset-highlights i{color:#16a34a}.preset-card form{margin-top:auto}.preset-card form button{width:100%;justify-content:center}.onboarding-history{margin-top:18px;padding:13px 15px;border:1px solid var(--border);border-radius:14px;background:var(--surface-soft)}.onboarding-history>b{display:block;font-size:.78rem;margin-bottom:8px}.onboarding-history>div{display:flex;gap:8px;flex-wrap:wrap}.onboarding-history span{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border-radius:9px;background:var(--surface);border:1px solid var(--border);font-size:.72rem;color:var(--muted)} .onboarding-form{display:flex;flex-direction:column;gap:20px}.onboarding-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.onboarding-form-grid .full{grid-column:1/-1}.onboarding-form-grid label,.onboarding-category-field,.onboarding-stock-toolbar label,.onboarding-stock-picker label{display:flex;flex-direction:column;gap:7px;font-size:.78rem;font-weight:800;color:var(--text-soft)}.onboarding-form-grid input,.onboarding-form-grid select,.onboarding-form-grid textarea,.onboarding-category-field textarea,.onboarding-stock-toolbar select,.onboarding-stock-search input{width:100%;min-height:44px;border:1px solid var(--border);border-radius:11px;background:var(--surface);color:var(--text);padding:10px 12px;font:inherit;font-size:.86rem}.onboarding-form-grid textarea,.onboarding-category-field textarea{resize:vertical}.onboarding-form-grid input:focus,.onboarding-form-grid select:focus,.onboarding-form-grid textarea:focus,.onboarding-category-field textarea:focus,.onboarding-stock-search input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-ring)}.onboarding-form-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:4px}.onboarding-form-actions>div{display:flex;align-items:center;gap:9px}.onboarding-form-actions.split>div{margin-left:auto}.inline-form{display:inline-flex;margin:0} .onboarding-switch-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.onboarding-switch-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:15px;border:1px solid var(--border);border-radius:16px;background:var(--surface-soft)}.switch-card-icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--surface);border:1px solid var(--border);color:var(--primary)}.onboarding-switch-card>div{display:flex;flex-direction:column;gap:3px}.onboarding-switch-card b{font-size:.88rem}.onboarding-switch-card small{color:var(--muted);font-size:.75rem;line-height:1.4}.onboarding-ops-grid{padding-top:2px}.onboarding-ops-grid .is-disabled{opacity:.5;pointer-events:none} .onboarding-choice-card{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:17px;border:1px solid var(--border);border-radius:16px;background:var(--surface-soft)}.onboarding-choice-card>div:first-child{display:flex;flex-direction:column;gap:4px}.onboarding-choice-card b{font-size:.9rem}.onboarding-choice-card small{font-size:.76rem;color:var(--muted)}.onboarding-segmented{display:flex;gap:5px;padding:5px;border:1px solid var(--border);border-radius:13px;background:var(--surface)}.onboarding-segmented button{border:0;background:transparent;color:var(--muted);padding:9px 12px;border-radius:9px;font-weight:800;font-size:.76rem;cursor:pointer}.onboarding-segmented button.active{background:var(--primary);color:#fff}.onboarding-category-field span{display:flex;justify-content:space-between;gap:12px}.onboarding-category-field small{font-weight:600;color:var(--muted)} .readiness-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px}.readiness-grid article{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:13px;border:1px solid var(--border);border-radius:14px;background:var(--surface)}.readiness-grid article>span{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary)}.readiness-grid article div{display:flex;flex-direction:column;gap:1px;min-width:0}.readiness-grid small{font-size:.68rem;color:var(--muted)}.readiness-grid strong{font-size:.92rem}.readiness-grid a{font-size:.72rem;font-weight:800;color:var(--primary);text-decoration:none} .onboarding-stock-toolbar{display:grid;grid-template-columns:minmax(220px,1fr) minmax(190px,.55fr);gap:12px;padding:14px;border:1px solid var(--border);border-radius:15px;background:var(--surface-soft)}.onboarding-stock-toolbar>div{display:flex;flex-direction:column;justify-content:center;gap:5px;padding:0 8px}.onboarding-stock-toolbar>div span{font-size:.7rem;color:var(--muted);font-weight:800}.onboarding-stock-toolbar>div b{font-size:.85rem}.onboarding-stock-toolbar>div i{color:var(--primary);margin-right:5px}.onboarding-stock-picker{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end}.onboarding-stock-search{position:relative}.onboarding-stock-search>i{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--muted);z-index:2}.onboarding-stock-search input{padding-left:37px}.onboarding-stock-search>div{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:40;background:var(--surface);border:1px solid var(--border);border-radius:13px;box-shadow:0 18px 45px rgba(15,23,42,.14);overflow:hidden;display:none;max-height:310px;overflow-y:auto}.onboarding-stock-search>div.show{display:block}.onboarding-stock-search button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;border:0;border-bottom:1px solid var(--border);background:var(--surface);padding:10px 12px;text-align:left;cursor:pointer}.onboarding-stock-search button:hover{background:var(--surface-hover)}.onboarding-stock-search button:last-child{border-bottom:0}.onboarding-stock-search button span{display:flex;flex-direction:column;gap:2px}.onboarding-stock-search button b{font-size:.8rem}.onboarding-stock-search button small{font-size:.7rem;color:var(--muted)}.onboarding-stock-search button i{color:var(--primary)} .onboarding-stock-table-wrap{border:1px solid var(--border);border-radius:15px;overflow:visible}.onboarding-stock-table{width:100%;border-collapse:separate;border-spacing:0}.onboarding-stock-table th{padding:11px 12px;background:var(--surface-soft);border-bottom:1px solid var(--border);text-align:left;font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}.onboarding-stock-table td{padding:11px 12px;border-bottom:1px solid var(--border);vertical-align:middle}.onboarding-stock-table tbody tr:last-child td{border-bottom:0}.onboarding-stock-table input{min-width:105px;max-width:140px;height:38px;border:1px solid var(--border);border-radius:9px;padding:7px 9px;background:var(--surface);color:var(--text)}.onboarding-product-cell{display:flex;align-items:center;gap:10px;min-width:220px}.onboarding-product-cell>span{width:40px;height:40px;border-radius:11px;border:1px solid var(--border);background:var(--surface-soft);display:grid;place-items:center;overflow:hidden;color:var(--muted)}.onboarding-product-cell img{width:100%;height:100%;object-fit:cover}.onboarding-product-cell div{display:flex;flex-direction:column;gap:2px}.onboarding-product-cell b{font-size:.82rem}.onboarding-product-cell small{font-size:.69rem;color:var(--muted)}.stock-baseline{display:inline-flex;padding:6px 9px;border-radius:8px;background:var(--surface-soft);border:1px solid var(--border);font-size:.78rem;font-weight:800}.stock-diff{font-size:.78rem;font-weight:900}.stock-diff.positive{color:#15803d}.stock-diff.negative{color:#b91c1c}.stock-diff.zero{color:var(--muted)}.onboarding-stock-summary{display:flex;gap:10px;justify-content:flex-end}.onboarding-stock-summary>div{min-width:150px;padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:var(--surface-soft);display:flex;flex-direction:column;gap:2px}.onboarding-stock-summary small{font-size:.66rem;color:var(--muted);font-weight:800;text-transform:uppercase}.onboarding-stock-summary b{font-size:.9rem} .launch-readiness-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px}.launch-readiness-grid article{display:flex;gap:11px;align-items:flex-start;padding:15px;border:1px solid var(--border);border-radius:15px;background:var(--surface-soft)}.launch-readiness-grid article>span{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--surface);border:1px solid var(--border);color:var(--primary);flex:0 0 auto}.launch-readiness-grid article>div{display:flex;flex-direction:column;gap:2px;min-width:0}.launch-readiness-grid small{font-size:.68rem;color:var(--muted);text-transform:uppercase;font-weight:800}.launch-readiness-grid b{font-size:.86rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.launch-readiness-grid em{font-style:normal;font-size:.72rem;color:var(--muted)}.launch-checklist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:18px}.launch-checklist a{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:14px 15px;border:1px solid var(--border);border-radius:14px;background:var(--surface);color:var(--text);text-decoration:none}.launch-checklist a:hover{border-color:var(--primary-border);background:var(--surface-hover)}.launch-checklist>a>i:first-child{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary)}.launch-checklist>a>span{display:flex;flex-direction:column;gap:2px}.launch-checklist b{font-size:.82rem}.launch-checklist small{font-size:.72rem;color:var(--muted)}.launch-checklist>a>i:last-child{color:var(--muted);font-size:.7rem} @media(max-width:1180px){.preset-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.onboarding-stepper{grid-template-columns:repeat(3,minmax(0,1fr))}.readiness-grid,.launch-readiness-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:820px){.onboarding-reminder{margin:10px 12px 0;align-items:flex-start;flex-wrap:wrap}.onboarding-reminder>a{margin-left:56px}.onboarding-hero{grid-template-columns:1fr;padding:20px}.onboarding-stepper{display:flex;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}.onboarding-step{min-width:150px}.preset-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.onboarding-switch-grid,.launch-checklist{grid-template-columns:1fr}.onboarding-form-grid{grid-template-columns:1fr}.onboarding-form-grid .full{grid-column:auto}.onboarding-stock-toolbar{grid-template-columns:1fr}.onboarding-choice-card{align-items:stretch;flex-direction:column}.onboarding-segmented{align-self:stretch}.onboarding-segmented button{flex:1}.onboarding-stock-table-wrap{overflow-x:auto}.onboarding-stock-table{min-width:820px}} @media(max-width:580px){.onboarding-panel{padding:16px}.preset-grid,.readiness-grid,.launch-readiness-grid{grid-template-columns:1fr}.preset-card{min-height:0}.onboarding-form-actions{align-items:stretch;flex-direction:column-reverse}.onboarding-form-actions>a,.onboarding-form-actions>button,.onboarding-form-actions>div{width:100%}.onboarding-form-actions>div{display:grid;grid-template-columns:1fr}.onboarding-form-actions .primary-btn,.onboarding-form-actions .secondary-btn,.onboarding-form-actions form{width:100%;justify-content:center}.onboarding-stock-picker{grid-template-columns:1fr}.onboarding-stock-picker>button{width:100%;justify-content:center}.onboarding-stock-summary{display:grid;grid-template-columns:1fr 1fr}.onboarding-stock-summary>div{min-width:0}.onboarding-reminder>a{margin-left:0;width:100%;justify-content:center}.onboarding-safety{display:grid;grid-template-columns:1fr 1fr}.onboarding-safety span:last-child{grid-column:1/-1}} /* Post-roadmap stabilization RC2 — connected Customer/Supplier edit workspace */ .master-edit-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;background:var(--surface);border:1px solid var(--border)} .master-edit-heading{display:flex;align-items:flex-start;gap:14px;min-width:0}.master-edit-icon{width:48px;height:48px;flex:0 0 48px;display:grid;place-items:center;border:1px solid var(--primary-border);border-radius:14px;background:var(--primary-soft);color:var(--primary);font-size:18px}.master-edit-heading h2{margin:3px 0 6px;font-size:25px;line-height:1.2}.master-edit-heading p{margin:0;max-width:760px;color:var(--text-muted);font-size:13.5px;line-height:1.55}.master-edit-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap} .master-edit-layout{display:grid;grid-template-columns:minmax(250px,.72fr) minmax(0,1.7fr);gap:16px;align-items:start}.master-edit-summary{display:grid;gap:16px;position:sticky;top:82px}.master-edit-avatar{width:58px;height:58px;display:grid;place-items:center;border:1px solid var(--primary-border);border-radius:17px;background:var(--primary-soft);color:var(--primary);font-size:21px}.master-edit-avatar.supplier{color:#0f766e;background:#f0fdfa;border-color:#99f6e4}.master-edit-summary h3{margin:3px 0 4px;font-size:19px}.master-edit-summary p{margin:0;color:var(--text-muted);font-size:13px}.master-edit-facts{display:grid;gap:8px}.master-edit-facts>div{display:grid;gap:4px;padding:11px 12px;border:1px solid var(--border);border-radius:12px;background:var(--surface-soft)}.master-edit-facts span{font-size:11px;color:var(--text-muted);font-weight:750;text-transform:uppercase;letter-spacing:.035em}.master-edit-facts strong{font-size:13px;line-height:1.4;overflow-wrap:anywhere}.master-edit-note{display:flex;align-items:flex-start;gap:10px;padding:12px;border:1px solid var(--border);border-radius:13px;background:var(--surface-soft)}.master-edit-note>i{margin-top:2px;color:var(--primary)}.master-edit-note>span{display:grid;gap:3px}.master-edit-note b{font-size:12.5px}.master-edit-note small{font-size:11.8px;line-height:1.5;color:var(--text-muted)}.master-edit-form-card{min-width:0}.master-edit-form{margin-top:2px}.master-edit-form textarea{min-height:112px;resize:vertical}.master-edit-submit{padding-top:4px} @media(max-width:980px){.master-edit-layout{grid-template-columns:1fr}.master-edit-summary{position:static;grid-template-columns:auto minmax(0,1fr);align-items:start}.master-edit-facts,.master-edit-note{grid-column:1/-1}.master-edit-facts{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:680px){.master-edit-hero{display:grid}.master-edit-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}.master-edit-actions .secondary-btn{width:100%;justify-content:center}.master-edit-heading h2{font-size:22px}.master-edit-summary{grid-template-columns:auto minmax(0,1fr)}.master-edit-facts{grid-template-columns:1fr}.master-edit-submit{display:grid;grid-template-columns:1fr}.master-edit-submit .primary-btn,.master-edit-submit .secondary-btn{width:100%;justify-content:center}} /* RC3 login hardening: replace the old non-functional checkbox/link row with a concise session-security indicator that matches the connected auth UI. */ .auth-session-note{padding:9px 11px;border:1px solid var(--border);border-radius:10px;background:var(--surface-soft);color:var(--muted);font-size:10px;font-weight:650} .auth-session-note span{display:inline-flex;align-items:center;gap:6px}.auth-session-note span:first-child{color:var(--text);font-weight:750}.auth-session-note i{color:var(--primary)} @media(max-width:520px){.auth-session-note{align-items:flex-start;flex-direction:column;gap:5px}} /* RC41 — return-only days are shown as negative Net Sales, not tiny positive bars. */ .dashboard-chart-card .sales-bar-item.is-negative .sales-bar-track i{background:var(--danger);box-shadow:0 8px 15px color-mix(in srgb,var(--danger) 14%,transparent)} .dashboard-chart-card .sales-bar-item.is-negative .sales-bar-value{color:var(--danger);font-weight:800} /* RC83 auditable Credit/Debit Note cancellation */ .return-cancel-modal{width:min(620px,100%)} .return-cancel-modal .notice{margin:0 0 18px} .return-cancel-modal .notice>div{display:grid;gap:4px} .return-cancel-modal .notice span{line-height:1.5} .return-cancel-modal textarea{min-height:112px;resize:vertical} /* RC84 auditable Payment reversal workflow */ .payment-reversal-modal{width:min(680px,100%)} .payment-reversal-modal .notice{margin:0 0 18px} .payment-reversal-modal .notice>div{display:grid;gap:4px} .payment-reversal-modal .notice span{line-height:1.5} .payment-reversal-modal textarea{min-height:112px;resize:vertical} .payment-reversal-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 18px} .payment-reversal-summary>div{padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface-soft,#f7f9fc);display:grid;gap:4px} .payment-reversal-summary span{font-size:.78rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.04em} .payment-reversal-summary strong{font-size:.96rem;overflow-wrap:anywhere} @media(max-width:620px){.payment-reversal-summary{grid-template-columns:1fr}.payment-reversal-modal .form-grid{grid-template-columns:1fr}.payment-reversal-modal .form-grid>label{grid-column:1/-1}} /* RC87 — audited invoice cancellation */ .invoice-cancel-modal{width:min(760px,95vw)} .invoice-cancel-modal .notice{margin:0 0 18px} .invoice-cancel-modal .notice>div{display:grid;gap:4px} .invoice-cancel-modal .notice span{line-height:1.5} .invoice-cancel-modal textarea{min-height:112px;resize:vertical} .invoice-cancel-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 18px} .invoice-cancel-summary>div{display:grid;gap:4px;min-width:0;padding:12px 13px;border:1px solid var(--border);border-radius:13px;background:var(--surface-soft)} .invoice-cancel-summary span{font-size:.7rem;color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.04em} .invoice-cancel-summary strong{font-size:.88rem;overflow-wrap:anywhere} @media(max-width:760px){.invoice-cancel-summary{grid-template-columns:1fr 1fr}.invoice-cancel-modal .form-grid{grid-template-columns:1fr}.invoice-cancel-modal .form-grid>label{grid-column:1/-1}} @media(max-width:480px){.invoice-cancel-summary{grid-template-columns:1fr}} /* RC88 — posted Credit/Debit Note hard-delete retired; audited Edit/Cancel workflow only. */ /* RC91 — audited Delivery Challan cancellation */ .delivery-challan-cancel-modal{width:min(760px,95vw)} .delivery-challan-cancel-modal .notice{margin:0 0 18px} .delivery-challan-cancel-modal .notice>div{display:grid;gap:4px} .delivery-challan-cancel-modal .notice span{line-height:1.5} .delivery-challan-cancel-modal textarea{min-height:112px;resize:vertical} .delivery-challan-cancel-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 18px} .delivery-challan-cancel-summary>div{border:1px solid var(--border);border-radius:12px;background:var(--card);padding:12px;min-width:0} .delivery-challan-cancel-summary span{display:block;color:var(--muted);font-size:.78rem;margin-bottom:4px} .delivery-challan-cancel-summary strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} @media(max-width:760px){.delivery-challan-cancel-summary{grid-template-columns:1fr 1fr}.delivery-challan-cancel-modal .form-grid{grid-template-columns:1fr}.delivery-challan-cancel-modal .form-grid>label{grid-column:1/-1}} @media(max-width:480px){.delivery-challan-cancel-summary{grid-template-columns:1fr}} /* RC92 — Invoice Edit keeps Payment history immutable */ .invoice-payment-history-card{display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:12px;align-items:center;padding:13px 14px;border:1px solid var(--primary-border);border-radius:14px;background:var(--primary-soft-2)} .invoice-payment-history-icon{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--primary-border);border-radius:12px;background:var(--surface);color:var(--primary);font-size:16px} .invoice-payment-history-copy{display:grid;gap:3px;min-width:0}.invoice-payment-history-copy strong{font-size:15px}.invoice-payment-history-copy small{color:var(--muted);font-size:11px;line-height:1.5;max-width:760px} .invoice-payment-history-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap} @media(max-width:860px){.invoice-payment-history-card{grid-template-columns:46px minmax(0,1fr)}.invoice-payment-history-actions{grid-column:1/-1;justify-content:flex-start;padding-left:58px}} @media(max-width:560px){.invoice-payment-history-card{grid-template-columns:1fr}.invoice-payment-history-icon{width:40px;height:40px}.invoice-payment-history-actions{grid-column:auto;padding-left:0;display:grid;grid-template-columns:1fr}.invoice-payment-history-actions .secondary-btn{width:100%;justify-content:center}} /* RC93 — explicit receipt date for payment captured during Invoice creation */ .sale-payment-grid #initialPaymentDate{font-variant-numeric:tabular-nums}.sale-payment-grid #initialPaymentDate+small{max-width:250px} /* RC139 rebuilt — professional stacked financial totals Keeps the net amount visually primary and prevents Gross / Credit Notes metadata from collapsing into the same line in Sales and Dashboard tables. */ .financial-total-cell{min-width:145px;vertical-align:middle!important} .financial-total-stack{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0} .financial-total-main{display:block;font-size:12.5px;line-height:1.2;color:var(--text-strong);font-weight:850;white-space:nowrap} .financial-total-breakdown{display:grid;gap:3px;min-width:0} .financial-total-breakdown>span{display:grid;grid-template-columns:auto auto;justify-content:start;align-items:baseline;column-gap:5px;min-width:0;line-height:1.25} .financial-total-breakdown small{display:block;margin:0!important;color:var(--text-muted);font-size:9.25px;font-weight:650;white-space:nowrap} .financial-total-breakdown b{display:block;color:var(--text-muted);font-size:9.5px;font-weight:800;white-space:nowrap} .financial-total-breakdown .credit-note-line b{color:var(--danger)} .financial-total-breakdown .debit-note-line b,.financial-total-breakdown .tds-line b{color:var(--danger)} @media(max-width:760px){ .financial-total-cell{min-width:138px} .financial-total-main{font-size:12px} .financial-total-breakdown small,.financial-total-breakdown b{font-size:9px} } /* ========================================================= RC145 — fixed ProBill app identity + centralized core module controls ========================================================= */ .probill-app-brand .probill-app-mark{ padding:0!important; border:0!important; background:transparent!important; box-shadow:none!important; overflow:hidden!important; border-radius:13px!important; } .probill-app-brand .probill-app-mark img{ display:block!important; width:100%!important; height:100%!important; max-width:none!important; max-height:none!important; object-fit:cover!important; margin:0!important; padding:0!important; } .core-module-panel .panel-head{margin-bottom:16px;align-items:flex-start} .core-module-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px} .core-module-card{ display:flex;flex-direction:column;min-height:230px;padding:17px;border:1px solid var(--line); border-radius:16px;background:var(--surface);box-shadow:0 6px 20px rgba(15,23,42,.04);transition:.18s ease; } .core-module-card.is-enabled{border-color:color-mix(in srgb,var(--primary) 28%,var(--line));box-shadow:0 9px 26px color-mix(in srgb,var(--primary) 7%,transparent)} .core-module-card.is-disabled{background:linear-gradient(180deg,var(--surface) 0%,var(--surface-soft) 100%)} .core-module-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px} .core-module-icon{width:46px;height:46px;display:grid;place-items:center;border-radius:13px;background:var(--primary-soft);border:1px solid var(--primary-border);color:var(--primary);font-size:17px;flex:0 0 auto} .core-module-state{display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:wrap} .core-module-copy{display:grid;gap:6px;margin-top:14px} .core-module-copy h3{margin:0;font-size:15px;line-height:1.3;color:var(--text-strong)} .core-module-copy p{margin:0;font-size:12px;line-height:1.55;color:var(--text)} .core-module-copy small{font-size:10.75px;line-height:1.55;color:var(--muted)} .core-module-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:16px;border-top:1px solid var(--line)} .core-module-link{min-width:0;font-size:11px;font-weight:750} .core-module-link a,.core-module-link span{display:inline-flex;align-items:center;gap:7px;color:var(--muted);text-decoration:none} .core-module-link a{color:var(--primary)} .core-module-toggle-form{margin:0;flex:0 0 auto} .core-module-switch{ display:inline-grid;grid-template-columns:24px auto;align-items:center;gap:7px;min-width:72px;height:34px; padding:4px 9px 4px 5px;border:1px solid var(--border);border-radius:999px;background:var(--surface-soft); color:var(--muted);cursor:pointer;font:inherit;font-size:10.5px;font-weight:850;transition:.18s ease; } .core-module-switch>span{position:relative;width:24px;height:24px;border-radius:50%;background:var(--surface);border:1px solid var(--border);box-shadow:0 2px 6px rgba(15,23,42,.08)} .core-module-switch.is-on{background:var(--primary);border-color:var(--primary);color:var(--on-primary)} .core-module-switch.is-on>span{border-color:transparent;background:var(--on-primary)} .core-module-switch:hover{transform:translateY(-1px)} .core-module-note{display:flex;align-items:flex-start;gap:10px;margin-top:14px;padding:12px 14px;border:1px solid var(--primary-border);border-radius:12px;background:var(--primary-soft-2);font-size:11px;line-height:1.55;color:var(--muted)} .core-module-note>i{margin-top:2px;color:var(--primary)} .core-module-note b{color:var(--text-strong)} @media(max-width:900px){.core-module-grid{grid-template-columns:1fr}} @media(max-width:560px){.core-module-card{min-height:0;padding:14px}.core-module-footer{align-items:flex-start}.core-module-panel .panel-head>.secondary-btn{width:100%;justify-content:center}}