:root{
    --bg:#f4f7fb;
    --bg2:#eef4ff;
    --panel:#ffffff;
    --panel-soft:#f9fbff;
    --primary:#5b5ce2;
    --primary-2:#7c3aed;
    --primary-soft:#eef2ff;
    --secondary:#06b6d4;
    --secondary-soft:#ecfeff;
    --accent:#f59e0b;
    --accent-soft:#fffbeb;
    --success:#10b981;
    --danger:#ef4444;
    --warning:#f59e0b;
    --text:#162033;
    --muted:#64748b;
    --line:#e5eaf3;
    --dark:#0f172a;
    --shadow:0 20px 45px rgba(30,41,59,.08);
    --shadow-soft:0 10px 22px rgba(30,41,59,.06);
    --radius:20px;
    --sidebar-w:290px;
    --sidebar-w-collapsed:96px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Calibri,Arial,sans-serif;background:linear-gradient(180deg,var(--bg2),var(--bg));color:var(--text);font-size:15px}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font-family:inherit}
.app-shell{display:flex;min-height:100vh}

.sidebar{width:var(--sidebar-w);background:linear-gradient(180deg,#ffffff,#f9fbff);border-right:1px solid var(--line);position:fixed;top:0;left:0;bottom:0;padding:14px;z-index:20;display:flex;flex-direction:column;box-shadow:var(--shadow-soft);transition:width .25s ease,padding .25s ease}
.sidebar-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.brand{display:flex;align-items:center;gap:12px;padding:12px;border-radius:18px;background:linear-gradient(135deg,#f8faff,#ffffff);border:1px solid #edf1f8;flex:1;min-width:0}
.brand-copy{min-width:0}
.brand-mark{width:46px;height:46px;border-radius:16px;background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;display:grid;place-items:center;font-weight:800;font-size:22px;box-shadow:0 12px 24px rgba(91,92,226,.28)}
.brand-title{font-weight:800;font-size:22px;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-sub{font-size:12px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-toggle,.topbar-menu{border:0;cursor:pointer;background:linear-gradient(135deg,var(--primary-soft),#fff);color:var(--primary);border-radius:14px;font-size:18px;font-weight:800;display:grid;place-items:center;box-shadow:var(--shadow-soft)}
.sidebar-toggle{width:42px;height:42px;flex:0 0 42px}
.topbar-menu{display:none;width:42px;height:42px}
.menu-scroll{flex:1;overflow:auto;padding-top:8px}
.nav-section{font-size:11px;font-weight:800;color:#94a3b8;text-transform:uppercase;letter-spacing:.08em;margin:14px 12px 8px}
.nav-link{position:relative;display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;color:#334155;margin:6px 0;font-weight:800;transition:all .18s ease}
.nav-link:hover{background:linear-gradient(135deg,#f8fbff,#eef4ff);color:var(--primary);transform:translateX(2px)}
.nav-link.active{background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;box-shadow:0 14px 30px rgba(91,92,226,.22)}
.nav-link.active::before{content:"";position:absolute;left:-8px;top:14px;bottom:14px;width:4px;border-radius:999px;background:var(--accent)}
.nav-icon{width:24px;height:24px;display:grid;place-items:center;text-align:center;font-size:17px;border-radius:10px;background:#f7f9fd;color:inherit;flex:0 0 24px}
.nav-link.active .nav-icon{background:rgba(255,255,255,.18);color:#fff}
.nav-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-footer{padding-top:12px;border-top:1px solid var(--line)}
.mini-stat{display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,#f8fbff,#ffffff);border:1px solid var(--line);border-radius:18px;padding:12px}
.mini-dot{width:12px;height:12px;border-radius:999px;background:linear-gradient(135deg,var(--success),#34d399);box-shadow:0 0 0 4px #d1fae5;flex:0 0 12px}
.mini-label{font-size:11px;color:var(--muted);font-weight:700}
.mini-value{font-size:14px;font-weight:800}

.content{margin-left:var(--sidebar-w);min-height:100vh;width:calc(100% - var(--sidebar-w));transition:margin-left .25s ease,width .25s ease}
.topbar{height:74px;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 24px;position:sticky;top:0;z-index:5}
.topbar-left{display:flex;align-items:center;gap:14px}
.page-title{font-size:26px;font-weight:800;margin:0}.page-subtitle{font-size:13px;color:var(--muted);margin-top:2px}
.user-chip{display:flex;align-items:center;gap:10px;background:linear-gradient(135deg,#ffffff,#f8fafc);border:1px solid var(--line);padding:9px 14px;border-radius:999px;font-weight:800;box-shadow:var(--shadow-soft)}
.main{padding:24px}
.grid{display:grid;gap:18px}.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{background:linear-gradient(180deg,#ffffff,#fcfdff);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}.card-title{font-size:16px;font-weight:800;margin:0 0 10px}.metric{font-size:30px;font-weight:900;margin:8px 0 0}.metric-label{font-size:13px;color:var(--muted);font-weight:700}
.badge{display:inline-flex;align-items:center;border-radius:999px;padding:5px 10px;font-size:12px;font-weight:800;background:#f3f4f6;color:#374151}.badge.green{background:#dcfce7;color:#166534}.badge.red{background:#fee2e2;color:#991b1b}.badge.purple{background:var(--primary-soft);color:var(--primary)}
.btn{border:0;border-radius:14px;padding:10px 14px;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;gap:8px;justify-content:center;font-size:14px;transition:all .15s ease;box-shadow:var(--shadow-soft)}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff}
.btn-secondary{background:linear-gradient(135deg,var(--secondary),#2563eb);color:#fff}
.btn-light{background:linear-gradient(135deg,#ffffff,#f8fafc);color:#111827;border:1px solid var(--line)}
.btn-success{background:linear-gradient(135deg,var(--success),#34d399);color:#fff}.btn-danger{background:linear-gradient(135deg,var(--danger),#f97316);color:#fff}.btn-warning{background:linear-gradient(135deg,var(--warning),#fb7185);color:#fff}.btn-outline{border:1px solid var(--line);background:#fff;color:#111827}.btn-block{width:100%}.btn-lg{padding:14px 18px;font-size:18px;border-radius:16px}
.table{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden}.table th{background:linear-gradient(135deg,#4f46e5,#7c3aed 52%,#0891b2);color:#fff;text-align:left;padding:13px;font-size:13px;letter-spacing:.01em}.table td{padding:12px;border-bottom:1px solid var(--line)}.table tr:last-child td{border-bottom:0}.table tr:hover td{background:#fafcff}.actions{display:flex;gap:8px;flex-wrap:wrap}
.form-control,.form-select{width:100%;border:1px solid var(--line);border-radius:14px;padding:11px 12px;background:#fff;font-size:15px;box-shadow:inset 0 1px 2px rgba(15,23,42,.03)}.form-control:focus,.form-select:focus{outline:2px solid #c7d2fe;border-color:var(--primary)}label{font-weight:800;font-size:13px;margin-bottom:6px;display:block}.form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.form-check{display:flex;align-items:center;gap:10px;margin-top:8px}.helptext{font-size:12px;color:var(--muted)}
.messages{margin-bottom:14px}.message{padding:12px 14px;border-radius:14px;font-weight:700;margin-bottom:8px;border:1px solid transparent}.message.success{background:#ecfdf5;color:#166534;border-color:#a7f3d0}.message.error{background:#fef2f2;color:#991b1b;border-color:#fecaca}
.modal-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.45);display:none;align-items:center;justify-content:center;z-index:100}.modal-card{width:min(520px,92vw);background:#fff;border-radius:22px;padding:22px;box-shadow:0 25px 70px rgba(0,0,0,.2)}.modal-backdrop.show{display:flex}
.pos-shell{display:grid;grid-template-columns:1.2fr .8fr;gap:18px;height:calc(100vh - 122px)}.pos-left,.pos-right{background:linear-gradient(180deg,#ffffff,#fcfdff);border-radius:22px;border:1px solid var(--line);box-shadow:var(--shadow);padding:18px;min-height:0}.barcode-box{display:flex;gap:10px;margin-bottom:14px}.barcode-box input{font-size:24px;font-weight:800;height:58px}.cart-list{height:calc(100% - 90px);overflow:auto;border:1px solid var(--line);border-radius:16px;background:#fff}.cart-row{display:grid;grid-template-columns:1fr 90px 120px 110px;gap:8px;align-items:center;padding:13px;border-bottom:1px solid var(--line)}.cart-name{font-weight:900;font-size:17px}.cart-meta{font-size:12px;color:var(--muted)}.qty-box{display:flex;align-items:center;gap:5px}.qty-btn{width:30px;height:30px;border-radius:9px;border:0;background:#f3f4f6;font-weight:900;cursor:pointer}.total-panel{background:linear-gradient(135deg,var(--dark),#1e293b);color:#fff;border-radius:20px;padding:18px;margin-bottom:16px;box-shadow:0 18px 36px rgba(15,23,42,.18)}.total-label{opacity:.75;font-weight:800}.total-amount{font-size:44px;font-weight:900}.mode-pill{display:none;margin-bottom:12px;background:var(--accent-soft);color:#9a3412;border:1px solid #fed7aa;padding:12px 14px;border-radius:14px;font-weight:900}.mode-pill.show{display:block}.payment-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.touch-keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}.touch-keypad button{height:50px;border-radius:14px;border:0;background:linear-gradient(135deg,#f8fafc,#eef2ff);font-size:20px;font-weight:900;cursor:pointer;box-shadow:var(--shadow-soft)}
.receipt{width:320px;background:#fff;color:#000;margin:20px auto;padding:16px;font-family:Calibri,Arial,sans-serif}.receipt h2{text-align:center;margin:0 0 6px}.receipt table{width:100%;border-collapse:collapse}.receipt td{padding:4px 0;border-bottom:1px dashed #ddd;font-size:13px}.print-only{display:none}

/* Collapsed sidebar */
.app-shell.sidebar-collapsed .sidebar{width:var(--sidebar-w-collapsed);padding:14px 10px}
.app-shell.sidebar-collapsed .content{margin-left:var(--sidebar-w-collapsed);width:calc(100% - var(--sidebar-w-collapsed))}
.app-shell.sidebar-collapsed .brand{justify-content:center;padding:10px}
.app-shell.sidebar-collapsed .brand-copy,
.app-shell.sidebar-collapsed .nav-text,
.app-shell.sidebar-collapsed .nav-section,
.app-shell.sidebar-collapsed .mini-stat > div{display:none}
.app-shell.sidebar-collapsed .sidebar-top{flex-direction:column;align-items:center}
.app-shell.sidebar-collapsed .sidebar-toggle{width:46px}
.app-shell.sidebar-collapsed .nav-link{justify-content:center;padding:12px}
.app-shell.sidebar-collapsed .nav-icon{margin:0}
.app-shell.sidebar-collapsed .sidebar-footer{display:flex;justify-content:center}
.app-shell.sidebar-collapsed .mini-stat{padding:12px 10px}

body.login-page{min-height:100vh;overflow:hidden;background:#eef4ff}
.login-shell{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at 12% 12%,#e0f2fe 0,#f4f7fb 34%,#eef2ff 70%,#ecfeff 100%);padding:22px;position:relative;isolation:isolate;overflow:hidden}
.login-glow{position:absolute;border-radius:999px;filter:blur(4px);opacity:.75;z-index:-1}.login-glow-one{width:360px;height:360px;left:-110px;top:-120px;background:radial-gradient(circle,var(--primary-soft),transparent 68%)}.login-glow-two{width:430px;height:430px;right:-130px;bottom:-150px;background:radial-gradient(circle,#cffafe,transparent 66%)}
.login-wrap{display:grid;grid-template-columns:1.08fr .92fr;gap:22px;width:min(1080px,96vw);align-items:stretch}
.login-hero{position:relative;overflow:hidden;background:linear-gradient(135deg,#111827 0,var(--primary) 48%,var(--primary-2) 78%,#06b6d4 100%);border-radius:32px;color:#fff;padding:38px;box-shadow:0 30px 70px rgba(79,70,229,.26);display:flex;flex-direction:column;justify-content:space-between;min-height:560px}.login-hero::before{content:"";position:absolute;right:-95px;top:-95px;width:260px;height:260px;border-radius:999px;background:rgba(255,255,255,.14)}.login-hero::after{content:"";position:absolute;left:34px;bottom:96px;width:180px;height:180px;border-radius:52px;border:1px solid rgba(255,255,255,.15);transform:rotate(18deg)}
.login-hero .hero-badge{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);padding:9px 13px;border-radius:999px;font-weight:900;font-size:12px;letter-spacing:.02em}.login-hero .hero-badge span{color:#86efac}
.login-hero h1{position:relative;z-index:1;font-size:40px;line-height:1.1;margin:24px 0 14px;letter-spacing:-.03em}.login-hero p{position:relative;z-index:1;font-size:15px;line-height:1.65;opacity:.94;margin:0 0 16px;max-width:620px}.hero-points{position:relative;z-index:1;display:grid;gap:12px;margin-top:22px}.hero-point{display:flex;align-items:center;gap:12px;font-weight:800;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:11px 12px;backdrop-filter:blur(8px)}.hero-icon{width:38px;height:38px;border-radius:14px;background:rgba(255,255,255,.16);display:grid;place-items:center;flex:0 0 38px}.login-hero-footer{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:14px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.16);border-radius:22px;padding:14px 16px;backdrop-filter:blur(10px)}.login-hero-footer strong{display:block;font-size:15px}.login-hero-footer span{display:block;font-size:12px;opacity:.85;margin-top:3px}.login-mini-icons{display:flex;gap:7px}.login-mini-icons span{width:34px;height:34px;border-radius:12px;background:rgba(255,255,255,.16);display:grid;place-items:center;font-weight:900}
.login-panel{display:flex;align-items:center}.login-card-shell{width:100%;background:linear-gradient(180deg,#ffffff,#fbfdff);border:1px solid rgba(226,232,240,.95);border-radius:32px;box-shadow:0 30px 70px rgba(15,23,42,.11);padding:34px}.login-brand{padding:0;background:transparent;border:0;margin-bottom:24px}.login-heading h2{margin:0;font-size:30px;line-height:1;font-weight:900;letter-spacing:-.02em}.login-heading p{margin:8px 0 24px;color:var(--muted);font-weight:700}.login-form{display:grid;gap:16px}.login-field label{font-size:13px;margin-bottom:8px;color:#334155}.login-input-wrap{position:relative}.login-input-icon{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:24px;height:24px;display:grid;place-items:center;font-size:15px;z-index:2;opacity:.75}
.login-card-shell input[type="text"],.login-card-shell input[type="password"],.login-card-shell input[name="username"],.login-card-shell input[name="password"]{width:100%;height:54px;border:1px solid #dbe4f0;border-radius:18px;background:linear-gradient(180deg,#ffffff,#f8fbff);font-size:17px;font-weight:800;color:var(--text);padding:12px 14px 12px 50px;box-shadow:inset 0 1px 2px rgba(15,23,42,.04),0 10px 22px rgba(15,23,42,.04);outline:none;transition:border-color .15s ease,box-shadow .15s ease,background .15s ease}.login-card-shell input[type="text"]:focus,.login-card-shell input[type="password"]:focus,.login-card-shell input[name="username"]:focus,.login-card-shell input[name="password"]:focus{border-color:var(--primary);background:#fff;box-shadow:0 0 0 4px rgba(91,92,226,.14),0 14px 28px rgba(15,23,42,.08)}.login-card-shell input::placeholder{color:#9ca3af;font-weight:700}.login-submit{height:56px;margin-top:4px;border-radius:18px;font-size:18px;box-shadow:0 18px 32px rgba(91,92,226,.24)}.login-security-note{display:flex;align-items:center;gap:9px;margin-top:18px;padding:13px 14px;border-radius:18px;background:linear-gradient(135deg,#ecfdf5,#f8fafc);border:1px solid #bbf7d0;color:#166534;font-weight:800;font-size:13px}.login-security-note span{width:24px;height:24px;border-radius:999px;background:#dcfce7;display:grid;place-items:center;flex:0 0 24px}

@media(max-width:1200px){.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:1000px){
    .sidebar{width:var(--sidebar-w-collapsed);padding:14px 10px}
    .content{margin-left:var(--sidebar-w-collapsed);width:calc(100% - var(--sidebar-w-collapsed))}
    .brand-copy,.nav-text,.nav-section,.mini-stat > div{display:none}
    .sidebar-top{flex-direction:column;align-items:center}
    .nav-link{justify-content:center;padding:12px}
    .topbar-menu{display:grid}
    .grid-4,.grid-3,.grid-2{grid-template-columns:1fr}
    .pos-shell{grid-template-columns:1fr;height:auto}
    .cart-row{grid-template-columns:1fr 80px 100px}.cart-row .actions{grid-column:1/-1}
    .login-wrap{grid-template-columns:1fr;width:min(520px,94vw)}.login-hero{display:none}.login-card-shell{padding:28px}.login-panel{align-items:stretch}
}
@media(max-width:640px){
    .topbar{height:auto;align-items:flex-start;gap:14px;padding:14px 16px;flex-direction:column}
    .main{padding:16px}
    .actions{width:100%}
    .actions .btn{flex:1}
    .form-row,.payment-grid{grid-template-columns:1fr}
    .page-title{font-size:22px}
    body.login-page{overflow:auto}.login-shell{padding:16px}.login-card-shell{border-radius:24px;padding:22px}.login-heading h2{font-size:26px}.login-card-shell input[type="text"],.login-card-shell input[type="password"],.login-card-shell input[name="username"],.login-card-shell input[name="password"]{height:50px;font-size:16px}
}
@media print{.sidebar,.topbar,.no-print{display:none!important}.content{margin:0;width:100%}.main{padding:0}.receipt{margin:0 auto}.print-only{display:block}}

/* POS no-page-scroll and kiosk/full-screen mode */
body.pos-page{overflow:hidden;height:100vh}
body.pos-page .content{height:100vh;min-height:0;overflow:hidden}
body.pos-page .main{height:calc(100vh - 74px);overflow:hidden;padding:14px;background:radial-gradient(circle at top left,#eef2ff 0,#f8fafc 38%,#ecfeff 100%)}
body.pos-page #toastBox{position:fixed;top:86px;right:22px;z-index:250;width:min(420px,calc(100vw - 40px));margin:0}
body.pos-page .pos-shell{height:100%;min-height:0;grid-template-columns:minmax(0,1.25fr) minmax(360px,.75fr);gap:14px}
body.pos-page .pos-left,body.pos-page .pos-right{min-height:0;overflow:hidden;padding:14px;border-radius:22px}
body.pos-page .pos-left{display:flex;flex-direction:column;background:linear-gradient(180deg,#ffffff 0,#f8fbff 100%)}
body.pos-page .pos-right{display:flex;flex-direction:column;background:linear-gradient(180deg,#ffffff 0,#fff7ed 100%)}
.pos-command-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:stretch;margin-bottom:10px;flex:0 0 auto}
body.pos-page .barcode-box{margin-bottom:0;min-width:0}
body.pos-page .barcode-box input{height:54px;font-size:22px;border-radius:18px;border:2px solid #dbe4ff;background:linear-gradient(180deg,#ffffff,#f8fbff)}
body.pos-page .pos-fullscreen-btn{white-space:nowrap;background:linear-gradient(135deg,#0891b2,#2563eb);min-width:156px}
body.pos-page .badge{flex:0 0 auto;margin-bottom:10px!important}
body.pos-page .cart-list{flex:1 1 auto;height:auto;min-height:0;overflow:auto;border-radius:20px;background:linear-gradient(180deg,#fff,#fbfdff);box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
body.pos-page .cart-row{grid-template-columns:minmax(0,1fr) 96px 104px 114px;padding:10px 12px;min-height:58px}
body.pos-page .cart-name{font-size:16px;line-height:1.15}.cart-meta{line-height:1.15}
body.pos-page .qty-btn{width:32px;height:32px;background:linear-gradient(135deg,#eef2ff,#fff);color:#4338ca}
body.pos-page .total-panel{flex:0 0 auto;margin-bottom:10px;padding:15px 16px;border-radius:22px;background:linear-gradient(135deg,#111827,#4c1d95 58%,#2563eb)}
body.pos-page .total-amount{font-size:38px;line-height:1.05}
body.pos-page .form-row{gap:10px;flex:0 0 auto}
body.pos-page .form-control{height:42px}
body.pos-page .metric{font-size:26px;margin-top:2px}
body.pos-page .payment-grid{gap:8px;flex:0 0 auto}.payment-grid .btn{min-height:42px}
body.pos-page .touch-keypad{gap:7px;margin-top:10px;flex:0 0 auto}
body.pos-page .touch-keypad button{height:42px;border-radius:14px;background:linear-gradient(135deg,#ecfeff,#eef2ff);color:#1e293b}
.pos-action-grid{margin-top:10px;gap:8px;flex:0 0 auto}.pos-action-grid .btn{min-height:46px;padding:10px 12px;font-size:16px}
.pos-shift-card{margin-top:10px!important;box-shadow:none!important;background:linear-gradient(135deg,#f8fafc,#eef2ff)!important;padding:12px!important;border-radius:18px!important;flex:0 0 auto}

body.pos-kiosk .sidebar,body.pos-kiosk .topbar{display:none!important}
body.pos-kiosk .content{margin-left:0!important;width:100%!important;height:100vh!important}
body.pos-kiosk .main{height:100vh!important;padding:12px!important}
body.pos-kiosk #toastBox{top:18px}
body.pos-kiosk .pos-shell{grid-template-columns:minmax(0,1.3fr) minmax(360px,.7fr)}

@media(max-height:760px){
    body.pos-page .topbar{height:64px}
    body.pos-page .main{height:calc(100vh - 64px);padding:10px}
    body.pos-page .pos-shell{gap:10px}
    body.pos-page .pos-left,body.pos-page .pos-right{padding:10px;border-radius:18px}
    body.pos-page .barcode-box input{height:48px;font-size:20px}
    body.pos-page .total-panel{padding:12px;margin-bottom:8px}.total-label{font-size:12px}
    body.pos-page .total-amount{font-size:32px}
    body.pos-page .form-control{height:38px;padding:8px 10px}
    body.pos-page label{font-size:12px;margin-bottom:4px}
    body.pos-page .metric{font-size:22px}
    body.pos-page .touch-keypad button{height:36px;font-size:17px}
    .pos-action-grid .btn{min-height:40px;font-size:15px;padding:8px 10px}
    .pos-shift-card{padding:9px!important;font-size:13px}
}
@media(max-width:1000px){body.pos-page{overflow:auto}body.pos-page .main{height:auto;overflow:visible}body.pos-page .pos-shell{height:auto;grid-template-columns:1fr}body.pos-page .cart-list{min-height:360px}body.pos-page .pos-command-row{grid-template-columns:1fr}body.pos-page .pos-fullscreen-btn{width:100%}}
body.pos-page .print-toggle{display:flex;align-items:center;gap:10px;margin-top:8px;padding:9px 12px;border-radius:14px;background:linear-gradient(135deg,#f0fdf4,#ecfeff);border:1px solid #bbf7d0;font-size:13px;font-weight:900;color:#166534;flex:0 0 auto}
body.pos-page .print-toggle input{width:18px;height:18px;accent-color:#10b981}
@media(max-height:760px){body.pos-page .print-toggle{padding:7px 10px;margin-top:6px;font-size:12px}}

/* v5 POS usability polish */
body.pos-page .money-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;flex:0 0 auto}
body.pos-page .money-field{padding:10px;border-radius:18px;background:linear-gradient(135deg,#fff7ed,#ffffff);border:2px solid #fed7aa;cursor:text;transition:all .16s ease;box-shadow:0 8px 18px rgba(15,23,42,.06)}
body.pos-page .money-field.active{border-color:#7c3aed;background:linear-gradient(135deg,#eef2ff,#ffffff);box-shadow:0 16px 30px rgba(124,58,237,.18)}
body.pos-page .money-field label{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;color:#475569;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.03em}
body.pos-page .money-input{height:48px!important;font-size:24px!important;font-weight:900!important;text-align:right;border-radius:14px!important;background:#fff!important}
body.pos-page .touch-keypad{gap:10px;margin-top:12px;grid-template-columns:repeat(3,minmax(0,1fr))}
body.pos-page .touch-keypad button{height:62px!important;border-radius:18px!important;font-size:28px!important;font-weight:950!important;background:linear-gradient(135deg,#ffffff,#e0f2fe 45%,#eef2ff)!important;border:1px solid rgba(59,130,246,.16)!important;box-shadow:0 12px 22px rgba(15,23,42,.10)!important}
body.pos-page .touch-keypad button:active{transform:translateY(1px);box-shadow:0 6px 14px rgba(15,23,42,.10)!important}
body.pos-page .pos-shift-strip{display:flex;align-items:center;justify-content:space-between;margin-top:10px;padding:10px 12px;border-radius:16px;background:linear-gradient(135deg,#f8fafc,#eef2ff);border:1px solid #dbeafe;font-weight:900;color:#334155;flex:0 0 auto}
body.pos-page .pos-shift-strip span{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:#64748b}
@media(max-height:820px){body.pos-page .touch-keypad button{height:52px!important;font-size:24px!important}body.pos-page .money-input{height:42px!important;font-size:21px!important}body.pos-page .money-field{padding:8px}}
@media(max-height:730px){body.pos-page .touch-keypad{gap:7px;margin-top:8px}body.pos-page .touch-keypad button{height:44px!important;font-size:21px!important}body.pos-page .pos-shift-strip{display:none}.pos-action-grid .btn{min-height:38px!important}}


/* v6 - cashier-only POS and adaptive counter-screen layout */
body.pos-page .pos-shift-strip,
body.pos-page .pos-shift-card{display:none!important}

body.pos-page{
    --pos-gap:clamp(8px,1.1vw,16px);
    --pos-pad:clamp(8px,1.1vw,16px);
    --right-panel-w:clamp(330px,34vw,470px);
    --barcode-h:clamp(46px,6.2vh,62px);
    --total-font:clamp(28px,4.6vh,46px);
    --keypad-h:clamp(42px,7.2vh,72px);
    --money-font:clamp(19px,3.1vh,28px);
}
body.pos-page .main{padding:var(--pos-pad)}
body.pos-page .pos-shell{
    height:100%;
    min-height:0;
    display:grid;
    grid-template-columns:minmax(460px,1fr) var(--right-panel-w);
    gap:var(--pos-gap);
}
body.pos-page .pos-left,
body.pos-page .pos-right{padding:var(--pos-pad)}
body.pos-page .pos-command-row{gap:var(--pos-gap);margin-bottom:var(--pos-gap)}
body.pos-page .barcode-box input{height:var(--barcode-h);font-size:clamp(18px,2.5vh,24px)}
body.pos-page .pos-fullscreen-btn{min-width:clamp(132px,13vw,180px)}
body.pos-page .total-panel{padding:clamp(10px,1.5vw,18px);margin-bottom:var(--pos-gap)}
body.pos-page .total-amount{font-size:var(--total-font)}
body.pos-page .money-row{gap:var(--pos-gap)}
body.pos-page .money-field{padding:clamp(7px,1vw,12px)}
body.pos-page .money-input{height:clamp(38px,5.5vh,54px)!important;font-size:var(--money-font)!important}
body.pos-page .payment-grid{gap:clamp(6px,.8vw,10px)}
body.pos-page .payment-grid .btn{min-height:clamp(36px,5vh,48px);padding:clamp(7px,.9vw,12px)}
body.pos-page .touch-keypad{gap:clamp(6px,.8vw,12px);margin-top:clamp(7px,1vh,13px)}
body.pos-page .touch-keypad button{height:var(--keypad-h)!important;font-size:clamp(20px,3.6vh,32px)!important;border-radius:clamp(12px,1.5vw,20px)!important}
body.pos-page .pos-action-grid{grid-template-columns:1fr 1.4fr;margin-top:clamp(8px,1vh,14px)}
body.pos-page .pos-action-grid .btn{min-height:clamp(42px,6.1vh,58px);font-size:clamp(15px,2vh,18px)}
body.pos-page .cart-row{
    grid-template-columns:minmax(0,1fr) clamp(78px,8vw,106px) clamp(82px,8vw,112px) clamp(96px,9vw,132px);
    padding:clamp(8px,1vh,12px) clamp(9px,1vw,14px);
}
body.pos-page .cart-name{font-size:clamp(14px,1.9vh,18px)}
body.pos-page .cart-meta{font-size:clamp(10px,1.35vh,12px)}

@media (max-width:1180px){
    body.pos-page{--right-panel-w:clamp(310px,38vw,410px)}
    body.pos-page .pos-shell{grid-template-columns:minmax(390px,1fr) var(--right-panel-w)}
    body.pos-page .payment-grid{grid-template-columns:1fr 1fr}
}

@media (max-width:900px){
    body.pos-page{overflow:auto;height:auto;min-height:100vh}
    body.pos-page .content{height:auto;overflow:visible}
    body.pos-page .main{height:auto;min-height:calc(100vh - 64px);overflow:visible}
    body.pos-page .pos-shell{height:auto;grid-template-columns:1fr}
    body.pos-page .pos-left,body.pos-page .pos-right{overflow:visible}
    body.pos-page .cart-list{min-height:320px;max-height:52vh;overflow:auto}
    body.pos-page .pos-command-row{grid-template-columns:1fr}
    body.pos-page .pos-fullscreen-btn{width:100%}
}

@media (max-width:520px){
    body.pos-page .money-row{grid-template-columns:1fr}
    body.pos-page .pos-action-grid{grid-template-columns:1fr}
    body.pos-page .cart-row{grid-template-columns:1fr;gap:8px}
    body.pos-page .cart-row .actions{grid-column:auto;justify-content:space-between}
}

@media (max-height:650px) and (min-width:901px){
    body.pos-page{--pos-pad:8px;--pos-gap:8px;--barcode-h:44px;--keypad-h:38px;--total-font:28px;--money-font:18px}
    body.pos-page .print-toggle{padding:6px 9px;margin-top:5px;font-size:12px}
    body.pos-page .metric{font-size:20px}
    body.pos-page .money-field label{font-size:11px;margin-bottom:4px}
    body.pos-page .cart-row{min-height:48px}
}


/* v7 - real responsive POS screen fit
   Goal: no controls should fall below the visible counter screen on 720p/768p monitors. */
body.pos-page{
    --pos-header-h:56px;
    --pos-pad:clamp(6px,.75vw,12px);
    --pos-gap:clamp(6px,.7vw,12px);
    --right-panel-w:clamp(300px,31vw,420px);
    --barcode-h:clamp(42px,5.4vh,56px);
    --total-font:clamp(24px,3.7vh,40px);
    --keypad-h:clamp(34px,5.55vh,56px);
    --money-font:clamp(18px,2.7vh,25px);
    --cart-row-h:clamp(46px,6.6vh,62px);
}
body.pos-page .topbar{
    height:var(--pos-header-h)!important;
    min-height:var(--pos-header-h)!important;
    padding:0 clamp(10px,1.2vw,18px)!important;
}
body.pos-page .page-title{font-size:clamp(18px,2.2vw,23px);line-height:1.05}
body.pos-page .page-subtitle{font-size:clamp(10px,1vw,12px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52vw}
body.pos-page .topbar .actions{gap:8px;flex-wrap:nowrap}
body.pos-page .topbar .actions .btn{padding:8px 12px;min-height:38px}
body.pos-page .user-chip{padding:7px 11px;min-height:38px}
body.pos-page .main{
    height:calc(100vh - var(--pos-header-h))!important;
    min-height:0!important;
    padding:var(--pos-pad)!important;
    overflow:hidden!important;
}
body.pos-page .pos-shell{
    height:100%!important;
    min-height:0!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(292px,var(--right-panel-w))!important;
    gap:var(--pos-gap)!important;
    overflow:hidden!important;
}
body.pos-page .pos-left,
body.pos-page .pos-right{
    min-height:0!important;
    height:100%!important;
    padding:var(--pos-pad)!important;
    overflow:hidden!important;
    border-radius:clamp(16px,1.5vw,22px)!important;
}
body.pos-page .pos-left{
    display:grid!important;
    grid-template-rows:auto auto auto minmax(0,1fr)!important;
    gap:var(--pos-gap)!important;
}
body.pos-page .pos-right{
    display:grid!important;
    grid-template-rows:auto auto auto auto auto minmax(112px,1fr) auto!important;
    gap:var(--pos-gap)!important;
    align-content:stretch!important;
}
body.pos-page .mode-pill,
body.pos-page .pos-open-badge{margin:0!important;min-height:0}
body.pos-page .pos-command-row{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:var(--pos-gap)!important;
    margin:0!important;
    min-height:0!important;
}
body.pos-page .barcode-box{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:var(--pos-gap)!important;min-width:0!important;margin:0!important}
body.pos-page .barcode-box input{height:var(--barcode-h)!important;font-size:clamp(17px,2.35vh,23px)!important;min-width:0!important}
body.pos-page .barcode-box .btn,
body.pos-page .pos-fullscreen-btn{height:var(--barcode-h)!important;min-height:0!important;padding:0 clamp(10px,1vw,16px)!important;font-size:clamp(14px,1.8vh,18px)!important;border-radius:clamp(13px,1.3vw,18px)!important;white-space:nowrap!important}
body.pos-page .pos-fullscreen-btn{min-width:0!important}
body.pos-page .cart-list{
    height:auto!important;
    min-height:0!important;
    overflow:auto!important;
}
body.pos-page .cart-row{
    min-height:var(--cart-row-h)!important;
    grid-template-columns:minmax(0,1fr) clamp(76px,7vw,100px) clamp(76px,7vw,105px) clamp(88px,8vw,120px)!important;
    padding:clamp(6px,.85vh,10px) clamp(8px,.9vw,12px)!important;
    gap:clamp(5px,.6vw,8px)!important;
}
body.pos-page .cart-name{font-size:clamp(13px,1.75vh,17px)!important;line-height:1.05!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.pos-page .cart-meta{font-size:clamp(9px,1.25vh,12px)!important;line-height:1.05!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.pos-page .qty-btn{width:clamp(26px,3.8vh,32px)!important;height:clamp(26px,3.8vh,32px)!important;min-width:clamp(26px,3.8vh,32px)!important}
body.pos-page .total-panel{
    margin:0!important;
    padding:clamp(9px,1.25vh,15px) clamp(11px,1.1vw,16px)!important;
    min-height:0!important;
}
body.pos-page .total-label{font-size:clamp(11px,1.35vh,13px)!important;line-height:1.1!important}
body.pos-page .total-amount{font-size:var(--total-font)!important;line-height:1!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
body.pos-page .money-row{display:grid!important;grid-template-columns:1fr 1fr!important;gap:var(--pos-gap)!important;margin:0!important;min-height:0!important}
body.pos-page .money-field{padding:clamp(6px,.85vh,9px)!important;border-radius:clamp(14px,1.3vw,18px)!important;min-width:0!important}
body.pos-page .money-field label{font-size:clamp(10px,1.25vh,12px)!important;margin-bottom:clamp(3px,.5vh,6px)!important;line-height:1!important;white-space:nowrap}
body.pos-page .money-input{height:clamp(34px,4.8vh,46px)!important;font-size:var(--money-font)!important;padding:6px 9px!important;min-width:0!important}
body.pos-page .change-box{margin:0!important;padding:clamp(6px,.75vh,9px) clamp(8px,.9vw,12px)!important;border-radius:clamp(13px,1.2vw,16px)!important;background:linear-gradient(135deg,#f8fafc,#ffffff);border:1px solid var(--line);min-height:0!important}
body.pos-page .change-box .metric-label{font-size:clamp(10px,1.2vh,12px)!important;line-height:1!important}
body.pos-page .change-box .metric{font-size:clamp(18px,2.75vh,26px)!important;line-height:1.05!important;margin:2px 0 0!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.pos-page .payment-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:clamp(5px,.6vw,8px)!important;margin:0!important;min-height:0!important}
body.pos-page .payment-grid .btn{min-height:clamp(32px,4.5vh,42px)!important;padding:5px clamp(5px,.6vw,9px)!important;font-size:clamp(11px,1.55vh,14px)!important;border-radius:clamp(11px,1vw,14px)!important;white-space:nowrap!important;box-shadow:none!important}
body.pos-page .payment-grid input{width:clamp(12px,1.6vh,15px);height:clamp(12px,1.6vh,15px);margin:0}
body.pos-page .print-toggle{margin:0!important;padding:clamp(5px,.8vh,8px) clamp(8px,.9vw,11px)!important;font-size:clamp(10px,1.35vh,13px)!important;line-height:1.1!important;border-radius:clamp(12px,1vw,15px)!important;min-height:0!important}
body.pos-page .print-toggle input{width:clamp(14px,2vh,18px)!important;height:clamp(14px,2vh,18px)!important;flex:0 0 auto}
body.pos-page .touch-keypad{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    grid-auto-rows:var(--keypad-h)!important;
    gap:clamp(5px,.7vh,9px)!important;
    margin:0!important;
    align-self:stretch!important;
    min-height:0!important;
}
body.pos-page .touch-keypad button{
    height:auto!important;
    min-height:0!important;
    font-size:clamp(18px,3vh,28px)!important;
    border-radius:clamp(12px,1.3vw,18px)!important;
    padding:0!important;
}
body.pos-page .pos-action-grid{
    display:grid!important;
    grid-template-columns:minmax(92px,.75fr) minmax(150px,1.25fr)!important;
    gap:var(--pos-gap)!important;
    margin:0!important;
    min-height:0!important;
}
body.pos-page .pos-action-grid .btn{min-height:clamp(38px,5.2vh,52px)!important;font-size:clamp(14px,1.9vh,18px)!important;padding:6px 10px!important;border-radius:clamp(13px,1.25vw,17px)!important}
body.pos-page .btn:hover{transform:none}

/* POS should gain width automatically on common shop screens. */
@media (max-width:1280px) and (min-width:901px){
    body.pos-page .sidebar{width:var(--sidebar-w-collapsed)!important;padding:14px 10px!important}
    body.pos-page .content{margin-left:var(--sidebar-w-collapsed)!important;width:calc(100% - var(--sidebar-w-collapsed))!important}
    body.pos-page .brand-copy,
    body.pos-page .nav-text,
    body.pos-page .nav-section,
    body.pos-page .mini-stat > div{display:none!important}
    body.pos-page .nav-link{justify-content:center!important;padding:12px!important}
    body.pos-page .sidebar-top{flex-direction:column!important;align-items:center!important}
    body.pos-page .topbar-menu{display:grid!important}
}

@media (max-width:1100px) and (min-width:901px){
    body.pos-page{--right-panel-w:300px;--keypad-h:clamp(32px,5.2vh,48px);--total-font:clamp(22px,3.3vh,34px)}
    body.pos-page .pos-shell{grid-template-columns:minmax(0,1fr) 300px!important}
    body.pos-page .payment-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
    body.pos-page .payment-grid .btn{min-height:clamp(29px,4vh,36px)!important;font-size:clamp(10px,1.4vh,12px)!important}
}

@media (max-height:760px) and (min-width:901px){
    body.pos-page{--pos-header-h:50px;--pos-pad:7px;--pos-gap:6px;--barcode-h:42px;--keypad-h:36px;--total-font:26px;--money-font:18px;--cart-row-h:44px}
    body.pos-page .page-subtitle{display:none!important}
    body.pos-page .topbar .actions .btn[href$="/pos/"]{display:none!important}
    body.pos-page .total-panel{padding:8px 10px!important}
    body.pos-page .money-field{padding:6px!important}
    body.pos-page .money-input{height:34px!important}
    body.pos-page .change-box{padding:5px 8px!important}
    body.pos-page .print-toggle{padding:5px 8px!important}
    body.pos-page .pos-action-grid .btn{min-height:36px!important}
}

@media (max-height:680px) and (min-width:901px){
    body.pos-page{--pos-header-h:46px;--pos-pad:6px;--pos-gap:5px;--barcode-h:38px;--keypad-h:32px;--total-font:23px;--money-font:16px;--cart-row-h:40px}
    body.pos-page .topbar .user-chip{display:none!important}
    body.pos-page .payment-grid .btn{min-height:28px!important;padding:3px 5px!important}
    body.pos-page .print-toggle{font-size:10px!important}
    body.pos-page .pos-action-grid .btn{min-height:32px!important;font-size:13px!important}
}

/* On narrow screens, keep the page usable rather than hiding controls below the fold. */
@media (max-width:900px){
    body.pos-page{overflow:auto!important;height:auto!important;min-height:100vh!important}
    body.pos-page .content{height:auto!important;overflow:visible!important}
    body.pos-page .main{height:auto!important;min-height:calc(100vh - var(--pos-header-h))!important;overflow:visible!important}
    body.pos-page .pos-shell{height:auto!important;grid-template-columns:1fr!important;overflow:visible!important}
    body.pos-page .pos-left,
    body.pos-page .pos-right{height:auto!important;overflow:visible!important}
    body.pos-page .cart-list{min-height:240px!important;max-height:46vh!important;overflow:auto!important}
    body.pos-page .pos-command-row{grid-template-columns:1fr!important}
    body.pos-page .barcode-box{grid-template-columns:1fr auto!important}
    body.pos-page .payment-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
    body.pos-page .touch-keypad{grid-auto-rows:54px!important}
    body.pos-page .pos-action-grid{grid-template-columns:1fr!important}
}

@media (max-width:520px){
    body.pos-page .money-row{grid-template-columns:1fr!important}
    body.pos-page .barcode-box{grid-template-columns:1fr!important}
    body.pos-page .barcode-box .btn{width:100%!important}
    body.pos-page .payment-grid{grid-template-columns:1fr!important}
    body.pos-page .cart-row{grid-template-columns:1fr!important}
}

/* Fullscreen/kiosk: remove header/sidebar and use the full monitor. */
body.pos-kiosk{--pos-header-h:0px!important;--right-panel-w:clamp(310px,30vw,440px)}
body.pos-kiosk .content{margin-left:0!important;width:100%!important;height:100vh!important}
body.pos-kiosk .main{height:100vh!important;padding:var(--pos-pad)!important}
body.pos-kiosk .pos-shell{grid-template-columns:minmax(0,1fr) minmax(300px,var(--right-panel-w))!important}
body.pos-kiosk .page-subtitle{display:none!important}

/* POS v8: fullscreen button moved from POS command area to top bar; UI style unchanged. */
body.pos-page .topbar .pos-fullscreen-btn{height:42px!important;min-height:0!important;padding:0 14px!important;font-size:14px!important;border-radius:14px!important;white-space:nowrap!important}
@media (max-height:680px) and (min-width:901px){
    body.pos-page .topbar .pos-fullscreen-btn{height:36px!important;padding:0 10px!important;font-size:12px!important}
}

/* POS v9: sale return action appears only on the left side in fullscreen/kiosk mode. */
body.pos-page .pos-kiosk-left-rail{display:none}
body.pos-kiosk .pos-kiosk-left-rail{
    display:flex!important;
    position:fixed;
    left:12px;
    top:50%;
    transform:translateY(-50%);
    z-index:90;
}
body.pos-kiosk .pos-kiosk-return-btn{
    width:76px;
    min-height:104px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    text-align:center;
    text-decoration:none;
    border-radius:22px;
    color:#fff;
    font-size:13px;
    font-weight:950;
    letter-spacing:.01em;
    line-height:1.12;
    background:linear-gradient(135deg,#ef4444,#f97316 55%,#7c3aed);
    box-shadow:0 18px 42px rgba(239,68,68,.28),0 8px 18px rgba(15,23,42,.14);
    border:1px solid rgba(255,255,255,.28);
}
body.pos-kiosk .pos-kiosk-return-btn:hover{filter:brightness(1.04);transform:translateY(-1px)}
body.pos-kiosk .pos-kiosk-return-icon{font-size:26px;line-height:1}
body.pos-kiosk .pos-shell{padding-left:96px!important}
@media (max-height:680px) and (min-width:901px){
    body.pos-kiosk .pos-kiosk-left-rail{left:8px}
    body.pos-kiosk .pos-kiosk-return-btn{width:64px;min-height:86px;border-radius:18px;font-size:11px;gap:5px}
    body.pos-kiosk .pos-kiosk-return-icon{font-size:22px}
    body.pos-kiosk .pos-shell{padding-left:80px!important}
}
@media (max-width:900px){
    body.pos-kiosk .pos-kiosk-left-rail{position:static;transform:none;margin:0 0 8px 0;display:flex!important}
    body.pos-kiosk .pos-kiosk-return-btn{width:100%;min-height:52px;flex-direction:row;border-radius:16px;font-size:14px}
    body.pos-kiosk .pos-shell{padding-left:0!important}
}


/* POS v10: Sale Return moved into scan command area; approved UI style preserved. */
body.pos-page .barcode-box{grid-template-columns:minmax(0,1fr) auto auto!important}
body.pos-page .pos-sale-return-inline{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    height:var(--barcode-h)!important;
    min-height:0!important;
    padding:0 clamp(10px,1vw,16px)!important;
    font-size:clamp(13px,1.75vh,17px)!important;
    font-weight:950!important;
    border-radius:clamp(13px,1.3vw,18px)!important;
    white-space:nowrap!important;
    text-decoration:none!important;
    color:#fff!important;
    background:linear-gradient(135deg,#ef4444,#f97316 58%,#7c3aed)!important;
    box-shadow:0 14px 28px rgba(239,68,68,.20)!important;
    border:1px solid rgba(255,255,255,.32)!important;
}
body.pos-page .pos-sale-return-inline:hover{filter:brightness(1.04);transform:translateY(-1px)}
body.pos-page .pos-shortcut-hint{
    flex:0 0 auto;
    margin:8px 0 10px 0;
    padding:7px 10px;
    border-radius:14px;
    background:linear-gradient(135deg,#f8fafc,#eef2ff);
    border:1px solid #dbeafe;
    color:#475569;
    font-size:clamp(10px,1.25vh,12px);
    font-weight:900;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
body.pos-page .pos-kiosk-left-rail{display:none!important}
body.pos-kiosk .pos-shell{padding-left:0!important}
@media (max-height:700px) and (min-width:901px){
    body.pos-page .pos-shortcut-hint{display:none}
}
@media (max-width:900px){
    body.pos-page .barcode-box{grid-template-columns:minmax(0,1fr) auto!important}
    body.pos-page .pos-sale-return-inline{grid-column:1 / -1;width:100%!important}
}

/* POS v11: keep Sale Return exactly on the right side of the Scan button; approved UI style unchanged. */
body.pos-page .barcode-box{
    display:grid!important;
    grid-template-columns:minmax(180px,1fr) auto auto!important;
    align-items:stretch!important;
    gap:var(--pos-gap)!important;
}
body.pos-page .pos-sale-return-inline{
    grid-column:auto!important;
    width:auto!important;
    min-width:clamp(106px,10vw,142px)!important;
}
body.pos-page .barcode-box .btn,
body.pos-page .barcode-box .pos-sale-return-inline{height:var(--barcode-h)!important}
@media (max-width:900px){
    body.pos-page .barcode-box{grid-template-columns:minmax(120px,1fr) auto auto!important}
    body.pos-page .pos-sale-return-inline{grid-column:auto!important;width:auto!important;min-width:108px!important}
}
@media (max-width:520px){
    body.pos-page .barcode-box{grid-template-columns:minmax(0,1fr) auto auto!important}
    body.pos-page .barcode-box .btn{width:auto!important}
    body.pos-page .pos-sale-return-inline{width:auto!important;min-width:96px!important;font-size:12px!important;padding:0 9px!important}
}


/* POS v12: Sale Return moved to top bar left of Full Screen; scan button removed; barcode field full width. */
body.pos-page .topbar .topbar-sale-return{
    height:42px!important;
    min-height:0!important;
    padding:0 14px!important;
    font-size:14px!important;
    border-radius:14px!important;
    white-space:nowrap!important;
}
body.pos-page .barcode-box{
    display:block!important;
    grid-template-columns:1fr!important;
}
body.pos-page .barcode-box input{
    width:100%!important;
}
@media(max-height:760px){
    body.pos-page .topbar .topbar-sale-return{
        height:36px!important;
        padding:0 10px!important;
        font-size:12px!important;
    }
}


/* v15 - admin product statistics and premium grid header */
.product-stats-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-bottom:16px}
.product-stat-card{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text);background:linear-gradient(145deg,#ffffff,#f8fbff);border:1px solid var(--line);border-radius:22px;padding:16px;box-shadow:var(--shadow-soft);transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.product-stat-card:hover,.product-stat-card.active{transform:translateY(-2px);border-color:#c7d2fe;box-shadow:0 18px 38px rgba(79,70,229,.13)}
.product-stat-card b{display:block;font-size:26px;line-height:1;font-weight:900;letter-spacing:-.02em}.product-stat-card small{display:block;margin-top:6px;color:var(--muted);font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.04em}
.product-stat-icon{width:46px;height:46px;border-radius:16px;display:grid;place-items:center;color:#fff;font-size:20px;box-shadow:0 12px 26px rgba(15,23,42,.12);flex:0 0 46px}.product-stat-icon.purple{background:linear-gradient(135deg,#4f46e5,#7c3aed)}.product-stat-icon.orange{background:linear-gradient(135deg,#f97316,#f59e0b)}.product-stat-icon.red{background:linear-gradient(135deg,#ef4444,#f43f5e)}.product-stat-icon.cyan{background:linear-gradient(135deg,#0891b2,#06b6d4)}.product-stat-icon.green{background:linear-gradient(135deg,#16a34a,#22c55e)}
.product-toolbar-card{margin-bottom:16px}.product-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px}.product-filter-form{display:flex;align-items:center;gap:9px;min-width:min(640px,100%)}.product-filter-form .form-control{min-width:280px}.product-filter-pills{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.filter-pill{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:8px 13px;border-radius:999px;text-decoration:none;font-size:13px;font-weight:900;color:#475569;background:linear-gradient(135deg,#f8fafc,#ffffff);border:1px solid var(--line)}.filter-pill:hover,.filter-pill.active{color:#fff;border-color:transparent;background:linear-gradient(135deg,#4f46e5,#7c3aed)}
.product-table-card{padding:0;overflow:hidden}.table-responsive{width:100%;overflow:auto}.product-table{border:0;border-radius:0}.product-table th{background:linear-gradient(135deg,#4f46e5,#7c3aed 52%,#0891b2)!important;color:#fff!important;white-space:nowrap}.product-table td{vertical-align:middle}.barcode-chip{display:inline-flex;align-items:center;min-height:30px;border-radius:999px;padding:5px 10px;background:#f1f5f9;border:1px solid #e2e8f0;font-weight:900;color:#334155;font-size:12px}.stock-alert{display:inline-flex;margin-left:6px;border-radius:999px;padding:3px 7px;background:#fff7ed;color:#c2410c;border:1px solid #fed7aa;font-size:10px;font-weight:900;text-transform:uppercase}.badge.red{background:#fee2e2;color:#991b1b}.product-actions{white-space:nowrap;flex-wrap:nowrap}
@media(max-width:1280px){.product-stats-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.product-toolbar{align-items:flex-start;flex-direction:column}.product-filter-form{width:100%}.product-filter-form .form-control{min-width:0;flex:1}}
@media(max-width:760px){.product-stats-grid{grid-template-columns:1fr}.product-filter-form{display:grid;grid-template-columns:1fr 1fr}.product-filter-form .form-control{grid-column:1/-1}.product-filter-form .btn-primary{grid-column:1/-1}.product-stat-card{padding:14px}}
.product-grid-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line);background:linear-gradient(135deg,#f8fafc,#ffffff);color:#64748b;font-size:13px;font-weight:800}
.product-page-size{display:flex;align-items:center;gap:8px}.product-page-select{height:34px;border:1px solid #dbe3ef;border-radius:10px;padding:0 10px;background:#fff;color:#334155;font-weight:900;outline:none}.product-page-select:focus{border-color:#7c3aed;box-shadow:0 0 0 4px rgba(124,58,237,.12)}
.product-pagination{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap;padding:14px 16px;border-top:1px solid var(--line);background:linear-gradient(135deg,#ffffff,#f8fafc)}
.page-btn{min-width:38px;height:36px;display:inline-flex;align-items:center;justify-content:center;padding:0 12px;border-radius:12px;border:1px solid #dbe3ef;background:#fff;color:#475569;text-decoration:none;font-size:13px;font-weight:900;box-shadow:0 6px 14px rgba(15,23,42,.05);transition:transform .12s ease,background .12s ease,border-color .12s ease}
.page-btn:hover{transform:translateY(-1px);border-color:#c4b5fd;background:#f8f7ff}.page-btn.active{color:#fff;border-color:transparent;background:linear-gradient(135deg,#4f46e5,#7c3aed)}.page-btn.disabled{opacity:.45;pointer-events:none;background:#f8fafc;box-shadow:none}
.product-table-card.grid-loading{position:relative}.product-table-card.grid-loading:after{content:'Loading products...';position:absolute;inset:0;display:grid;place-items:center;background:rgba(255,255,255,.74);backdrop-filter:blur(2px);font-weight:900;color:#4f46e5;z-index:5}
@media(max-width:760px){.product-grid-meta{align-items:flex-start;flex-direction:column}.product-pagination{justify-content:center}.page-btn{min-width:34px;height:34px;padding:0 10px}}


.supplier-table-card.grid-loading:after{content:'Loading suppliers...'}
.supplier-table td{min-width:130px}.supplier-table td:first-child{min-width:230px}.supplier-actions{min-width:150px}
@media(max-width:980px){.supplier-table td:first-child{min-width:210px}.supplier-table td{min-width:150px}}

/* v18 - professional purchase stock register and entry screen, keeping approved UI style */
.purchase-table-card.grid-loading{position:relative}.purchase-table-card.grid-loading:after{content:'Loading purchases...';position:absolute;inset:0;display:grid;place-items:center;background:rgba(255,255,255,.74);backdrop-filter:blur(2px);font-weight:900;color:#4f46e5;z-index:5}
.purchase-table td{min-width:120px}.purchase-table td:first-child{min-width:180px}.purchase-actions{min-width:150px}.purchase-toolbar-card .product-filter-form{min-width:min(760px,100%)}
.purchase-entry-card{max-width:1240px}.purchase-form-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}.purchase-info-grid{display:grid;grid-template-columns:1.35fr 1fr .8fr .8fr .8fr;gap:14px;margin-bottom:18px}.purchase-info-grid label,.purchase-entry-table label{display:block;margin-bottom:6px;color:#334155;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.04em}.purchase-lines-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:10px 0 12px;padding:14px 16px;border-radius:18px;background:linear-gradient(135deg,#f8fafc,#fff);border:1px solid var(--line)}.purchase-lines-wrap{border:1px solid var(--line);border-radius:18px;overflow:auto}.purchase-entry-table{margin:0}.purchase-entry-table th{background:linear-gradient(135deg,#4f46e5,#7c3aed 52%,#0891b2)!important;color:#fff!important}.purchase-entry-table td{vertical-align:middle}.purchase-entry-table .form-control,.purchase-entry-table .form-select{min-width:120px}.purchase-entry-table .product-select{min-width:280px}.line-total{white-space:nowrap}.purchase-total-panel,.purchase-detail-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:18px}.purchase-total-box{padding:16px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(145deg,#ffffff,#f8fbff);box-shadow:0 10px 22px rgba(15,23,42,.05)}.purchase-total-box span{display:block;color:var(--muted);font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.04em}.purchase-total-box b{display:block;margin-top:6px;font-size:22px;font-weight:900;color:var(--text)}.purchase-total-box small{display:block;margin-top:6px;color:var(--muted);font-weight:800}.purchase-total-box.main{background:linear-gradient(135deg,#4f46e5,#7c3aed);color:#fff;border-color:transparent}.purchase-total-box.main span,.purchase-total-box.main b,.purchase-total-box.main small{color:#fff}.purchase-detail-card{max-width:1200px}
@media(max-width:1280px){.purchase-info-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.purchase-total-panel,.purchase-detail-summary{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.purchase-info-grid{grid-template-columns:1fr}.purchase-form-head,.purchase-lines-toolbar{align-items:flex-start;flex-direction:column}.purchase-total-panel,.purchase-detail-summary{grid-template-columns:1fr}.purchase-toolbar-card .product-filter-form{display:grid;grid-template-columns:1fr 1fr}.purchase-toolbar-card .product-filter-form .form-control{grid-column:1/-1}.purchase-toolbar-card .product-filter-form .btn-primary{grid-column:1/-1}.purchase-table td:first-child{min-width:170px}.purchase-table td{min-width:135px}}

/* v20 - professional stock ledger register, keeping approved UI style */
.stock-table-card.grid-loading{position:relative}.stock-table-card.grid-loading:after{content:'Loading stock ledger...';position:absolute;inset:0;display:grid;place-items:center;background:rgba(255,255,255,.74);backdrop-filter:blur(2px);font-weight:900;color:#4f46e5;z-index:5}
.stock-toolbar-card .product-filter-form{min-width:min(920px,100%)}.stock-filter-form .date-filter{max-width:160px}.stock-ledger-table td{min-width:132px}.stock-ledger-table td:first-child{min-width:170px}.stock-ledger-table td:nth-child(2){min-width:240px}.stock-ledger-table td:nth-child(8){min-width:160px}.stock-ledger-table td:nth-child(9){min-width:260px}.badge.cyan{background:#cffafe;color:#155e75}.badge.orange{background:#ffedd5;color:#9a3412}.badge.blue{background:#dbeafe;color:#1e40af}.qty-flow{display:flex;gap:8px;align-items:center;white-space:nowrap}.qty-flow .in,.qty-flow .out{display:inline-flex;align-items:center;border-radius:999px;padding:4px 8px;font-size:12px;font-weight:900}.qty-flow .in{background:#dcfce7;color:#166534}.qty-flow .out{background:#fee2e2;color:#991b1b}.stock-balance-box{display:inline-block;min-width:130px;border:1px solid #e2e8f0;border-radius:14px;padding:9px 10px;background:linear-gradient(145deg,#ffffff,#f8fbff);font-weight:800}.stock-balance-box small{display:block;margin-top:4px;color:#4f46e5;font-weight:900}.accounting-chip{display:inline-flex;align-items:center;border:1px solid #ddd6fe;border-radius:999px;background:#f5f3ff;color:#4c1d95;padding:6px 10px;font-size:12px;font-weight:900;white-space:normal}.stock-net-line{margin-top:8px;color:var(--muted);font-size:12px;font-weight:800}.stock-remarks{margin-top:8px;color:var(--muted);font-size:12px;font-weight:800}.empty-row{text-align:center;color:var(--muted);font-weight:900;padding:28px!important}
@media(max-width:1280px){.stock-toolbar-card .product-filter-form{display:grid;grid-template-columns:1fr 1fr 1fr auto auto auto;width:100%}.stock-toolbar-card .product-filter-form #stockLedgerSearchInput{grid-column:1/-1}.stock-filter-form .date-filter{max-width:none}}
@media(max-width:760px){.stock-toolbar-card .product-filter-form{grid-template-columns:1fr 1fr}.stock-toolbar-card .product-filter-form #stockLedgerSearchInput{grid-column:1/-1}.stock-toolbar-card .product-filter-form .btn-primary{grid-column:1/-1}.stock-ledger-table td:first-child{min-width:160px}.stock-ledger-table td:nth-child(2){min-width:210px}.stock-ledger-table td{min-width:135px}}

/* Accounting v21 additions: preserve approved theme, only extend components */
.accounting-actions,
.accounting-filter-form,
.account-filter-form { gap: 10px; flex-wrap: wrap; }
.accounting-mini-grid,
.mini-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    gap: 12px;
    margin: 14px 0 18px;
}
.mini-grid > div {
    border: 1px solid var(--line);
    border-radius: 16px;
    background: linear-gradient(135deg, #ffffff, #f8fbff);
    padding: 14px 16px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .05);
}
.mini-grid small { display: block; color: var(--muted); font-weight: 700; margin-bottom: 4px; }
.mini-grid b { color: var(--text); font-size: 15px; }
.detail-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 10px;
}
.detail-header h3 { margin: 0; font-size: 22px; }
.detail-header p { margin: 5px 0 0; color: var(--muted); }
.voucher-balance-note {
    margin-top: 14px;
    border-radius: 14px;
    padding: 12px 14px;
    font-weight: 800;
    background: #eef2ff;
    color: #3730a3;
}
.voucher-balance-note.ok { background: #ecfdf5; color: #047857; }
.voucher-balance-note.bad { background: #fef2f2; color: #b91c1c; }
.text-danger { color: #dc2626 !important; font-weight: 800; }
.journal-form-card label { font-weight: 800; color: var(--text); margin-bottom: 6px; }
.journal-form-card hr { border: 0; border-top: 1px solid var(--line); margin: 18px 0; }
.journal-form-card tfoot th,
.trial-table tfoot th { background: #f8fafc; font-weight: 900; }
.account-ledger-stats .product-stat-card,
.trial-stats-grid .product-stat-card,
.accounting-stats-grid .product-stat-card,
.account-stats-grid .product-stat-card { min-height: 86px; }
@media (max-width: 900px) {
    .mini-grid { grid-template-columns: repeat(2, minmax(140px, 1fr)); }
    .detail-header { flex-direction: column; }
}
@media (max-width: 520px) {
    .mini-grid { grid-template-columns: 1fr; }
}
@media print {
    .sidebar, .topbar, .actions, .product-filter-form, .product-filter-pills, .btn { display: none !important; }
    .main-content { margin: 0 !important; padding: 0 !important; }
    .card { box-shadow: none !important; border: 1px solid #ddd !important; }
}

/* v22 - Professional reports center. Approved UI palette preserved. */
.report-stats-grid .product-stat-card { min-height: 86px; }
.report-hero-card,
.report-group-card,
.report-filter-card,
.report-table-card { margin-bottom: 18px; }
.report-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
.report-tile {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border-radius: 18px;
    background: linear-gradient(135deg, #ffffff, #f8fbff);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-soft);
    transition: all .16s ease;
    min-height: 92px;
}
.report-tile:hover {
    transform: translateY(-2px);
    border-color: #c7d2fe;
    box-shadow: 0 16px 34px rgba(79,70,229,.12);
}
.report-tile-icon {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--primary), var(--primary-2));
    color: #fff;
    font-size: 22px;
    box-shadow: 0 12px 24px rgba(91,92,226,.22);
    flex: 0 0 46px;
}
.report-tile-copy { min-width: 0; flex: 1; }
.report-tile-copy b { display: block; font-size: 16px; color: var(--text); margin-bottom: 4px; }
.report-tile-copy small { display: block; color: var(--muted); line-height: 1.25; }
.report-tile-arrow { font-size: 26px; font-weight: 900; color: var(--primary); }
.report-filter-form {
    display: grid;
    grid-template-columns: 170px 170px minmax(240px, 1fr) auto;
    gap: 12px;
    align-items: end;
}
.report-filter-form label { display: block; font-weight: 800; color: var(--muted); margin-bottom: 6px; }
.report-filter-actions { display: flex; gap: 10px; align-items: center; }
.report-table-wrap { max-height: 68vh; overflow: auto; }
.report-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}
.report-print-header { text-align: center; margin-bottom: 16px; }
.report-print-header h2 { margin: 0; font-size: 24px; }
.report-print-header p { margin: 4px 0 0; color: #334155; font-weight: 700; }
@media (max-width: 1180px) {
    .report-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .report-filter-form { grid-template-columns: 1fr 1fr; }
    .report-search-field { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
    .report-card-grid { grid-template-columns: 1fr; }
    .report-filter-form { grid-template-columns: 1fr; }
    .report-filter-actions { flex-wrap: wrap; }
}
@media print {
    .report-filter-card, .report-stats-grid.no-print, .detail-header.no-print { display: none !important; }
    .report-table-card { border: 0 !important; padding: 0 !important; }
    .report-table-wrap { max-height: none !important; overflow: visible !important; }
    .report-table thead th { position: static !important; background: #e5e7eb !important; color: #111827 !important; }
    .report-table td, .report-table th { font-size: 11px !important; padding: 6px !important; }
}
.cash-movement-table-card.grid-loading{position:relative}.cash-movement-table-card.grid-loading:after{content:'Loading cash vouchers...';position:absolute;inset:0;display:grid;place-items:center;background:rgba(255,255,255,.74);backdrop-filter:blur(2px);font-weight:900;color:#4f46e5;z-index:5}.cash-movement-table td{min-width:130px}.cash-movement-table td:nth-child(5){min-width:240px}.cash-voucher-form .form-row{grid-template-columns:repeat(2,minmax(0,1fr))}@media(max-width:760px){.cash-voucher-form .form-row{grid-template-columns:1fr}.cash-movement-table td{min-width:145px}}

/* v24 employee, settings and print identity extensions - keeps existing UI style */
.brand-logo{width:42px;height:42px;border-radius:14px;object-fit:cover;box-shadow:0 10px 25px rgba(79,70,229,.22);background:#fff;border:1px solid rgba(255,255,255,.65)}
.app-shell.sidebar-collapsed .brand-logo{width:38px;height:38px;border-radius:13px}
.form-section-title{grid-column:1/-1;margin:16px 0 8px;padding:9px 12px;border-radius:14px;background:linear-gradient(135deg,rgba(79,70,229,.12),rgba(14,165,233,.1));color:#312e81;font-weight:800;font-size:13px;letter-spacing:.3px;text-transform:uppercase}
.wide-field{grid-column:1/-1}
.employee-cell{display:flex;align-items:center;gap:12px;min-width:260px}
.employee-avatar{width:46px;height:46px;border-radius:16px;object-fit:cover;box-shadow:0 10px 18px rgba(15,23,42,.12);border:2px solid #fff;background:#eef2ff;display:inline-flex;align-items:center;justify-content:center;font-weight:900;color:#4f46e5;flex:0 0 auto}
.employee-avatar.empty{background:linear-gradient(135deg,#eef2ff,#dbeafe)}
.employee-profile-photo{width:82px;height:82px;border-radius:22px;object-fit:cover;box-shadow:0 16px 30px rgba(15,23,42,.16);border:3px solid #fff;background:#fff}
.settings-logo-preview{width:78px;height:78px;border-radius:22px;object-fit:contain;background:#fff;border:1px solid #e5e7eb;box-shadow:0 16px 30px rgba(15,23,42,.12);padding:6px}
.settings-receipt-preview{margin-top:20px;padding:18px;border-radius:22px;background:linear-gradient(180deg,#fff,#f8fafc);border:1px solid #e5e7eb;text-align:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.7)}
.settings-receipt-preview img{width:58px;height:58px;object-fit:contain;display:block;margin:0 auto 8px}.settings-receipt-preview b,.settings-receipt-preview small{display:block}.settings-receipt-preview h4{margin:0 0 10px;color:#4338ca}
.print-header-logo{max-width:70px;max-height:70px;object-fit:contain;margin:0 auto 5px;display:block}
@media(max-width:900px){.employee-cell{min-width:220px}.employee-profile-photo,.settings-logo-preview{width:64px;height:64px}.wide-field{grid-column:1/-1}}
@media print{.print-header-logo{max-width:48px;max-height:48px}.employee-avatar,.employee-profile-photo,.settings-logo-preview{box-shadow:none}}

/* SaaS shop selector / multi-shop management */
.stats-grid.small-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:16px}
.stat-card{background:linear-gradient(145deg,#ffffff,#f8fbff);border:1px solid var(--line);border-radius:22px;padding:16px;box-shadow:var(--shadow-soft)}
.stat-title{font-size:12px;color:var(--muted);font-weight:900;text-transform:uppercase;letter-spacing:.04em}.stat-value{font-size:28px;font-weight:900;margin-top:6px;line-height:1.05}.stat-subtitle{font-size:12px;color:var(--muted);font-weight:700;margin-top:6px}.page-card{margin-bottom:18px}.table-wrap{overflow:auto}.data-table{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden}.data-table th{background:linear-gradient(135deg,#4f46e5,#7c3aed 52%,#0891b2);color:#fff;text-align:left;padding:13px;font-size:13px;letter-spacing:.01em}.data-table td{padding:12px;border-bottom:1px solid var(--line);vertical-align:top}.data-table tr:last-child td{border-bottom:0}.data-table tr:hover td{background:#fafcff}.row-highlight td{background:#eef2ff!important}.feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.feature{background:linear-gradient(145deg,#ffffff,#f8fbff);border:1px solid var(--line);border-radius:20px;padding:18px;box-shadow:var(--shadow-soft)}.feature h3{margin:0 0 8px}.form-grid.two-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.form-field.span-2{grid-column:1/-1}.text-danger{color:#b91c1c;font-weight:800;font-size:12px;margin-top:6px}.badge-info{background:#dbeafe;color:#1d4ed8}.muted{color:var(--muted)}
@media(max-width:1100px){.stats-grid.small-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.feature-grid{grid-template-columns:1fr}.form-grid.two-col{grid-template-columns:1fr}}
@media(max-width:640px){.stats-grid.small-stats{grid-template-columns:1fr}}