:root{--bg:#0f172a;--bg2:#172033;--panel:#fff;--text:#0f172a;--muted:#64748b;--line:#dbe3ee;--primary:#2563eb;--primary2:#1d4ed8;--ok:#16a34a;--warn:#f59e0b;--bad:#dc2626;--soft:#f3f6fb;--shadow:0 10px 25px rgba(15,23,42,.08)}
body.theme-dark{--bg:#020617;--bg2:#0f172a;--panel:#111827;--text:#e5e7eb;--muted:#94a3b8;--line:#243244;--primary:#3b82f6;--primary2:#2563eb;--ok:#22c55e;--warn:#f59e0b;--bad:#ef4444;--soft:#0b1220;--shadow:0 10px 30px rgba(0,0,0,.35)}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Arial,Helvetica,sans-serif;background:var(--soft);color:var(--text)}
a{text-decoration:none;color:inherit}
body.nav-open{overflow:hidden}
.mobile-top{display:none}
.layout{display:flex;min-height:100vh}
.sidebar{width:280px;background:linear-gradient(180deg,var(--bg),var(--bg2));color:#fff;padding:18px;position:sticky;top:0;height:100vh;overflow:auto;flex-shrink:0;transition:width .22s ease,padding .22s ease}
.brand,.mobile-brand{display:flex;align-items:center;gap:12px}
.brand-copy{min-width:0}
.brand{padding:8px 4px 18px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:14px}
.brand small,.mobile-top small{display:block;color:#cbd5e1;margin-top:4px}
.brand-mark{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:rgba(255,255,255,.10);font-size:22px;font-weight:800;color:#fff;flex-shrink:0}
.brand-mark.small{width:38px;height:38px;font-size:18px}
.brand-logo-img{width:46px;height:46px;border-radius:14px;object-fit:cover;background:#fff;flex-shrink:0}
.sidebar nav a{display:block;color:#e2e8f0;padding:12px 14px;border-radius:12px;margin-bottom:8px;transition:.2s;background:transparent}
.sidebar nav a:hover,.sidebar nav a.active{background:rgba(37,99,235,.30);color:#fff}
.main{flex:1;padding:20px;min-width:0}
.topbar{background:var(--panel);border-radius:18px;padding:18px 20px;box-shadow:var(--shadow);display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.topbar-left{display:flex;align-items:center;gap:12px;min-width:0}
.topbar h1{margin:0 0 5px;font-size:28px}
.topbar p{margin:0;color:var(--muted)}
.topbar-right{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.license-badge,.pill,.badge{display:inline-flex;align-items:center;justify-content:center;padding:8px 12px;border-radius:999px;font-weight:700;font-size:12px}
.license-badge.ok,.badge.ok{background:#dcfce7;color:#166534}
.license-badge.bad,.badge.bad{background:#fee2e2;color:#991b1b}
.pill{background:#e2e8f0;color:#334155}
.badge.warn{background:#fef3c7;color:#92400e}
.badge.soft{background:#e0e7ff;color:#3730a3}
.theme-dark .pill{background:#1e293b;color:#cbd5e1}
.theme-dark .license-badge.ok,.theme-dark .badge.ok{background:#14532d;color:#dcfce7}
.theme-dark .license-badge.bad,.theme-dark .badge.bad{background:#7f1d1d;color:#fee2e2}
.theme-dark .badge.warn{background:#78350f;color:#fde68a}
.theme-dark .badge.soft{background:#312e81;color:#c7d2fe}
.grid{display:grid;gap:16px}
.cards{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.split-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.split-main{grid-template-columns:minmax(300px,1.1fr) minmax(0,1.6fr)}
.split-aside{grid-template-columns:minmax(0,1.6fr) minmax(320px,1fr)}
.card{background:var(--panel);border-radius:18px;padding:18px;box-shadow:var(--shadow);min-width:0}
.card h2,.card h3{margin-top:0}
.card hr{border:0;border-top:1px solid var(--line);margin:15px 0}
.stat{font-size:30px;font-weight:700;margin:8px 0}
.muted{color:var(--muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;background:var(--primary);color:#fff;border:0;border-radius:12px;padding:11px 14px;cursor:pointer;font-weight:700;min-height:44px}
.btn:hover{background:var(--primary2)}
.btn.secondary{background:#475569}
.btn.success{background:var(--ok)}
.btn.danger{background:var(--bad)}
.btn.warn{background:var(--warn);color:#111827}
.btn.sm{padding:8px 10px;font-size:12px;min-height:34px}
.btn.block{width:100%}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--text)}
.form-actions,.table-actions,.inline-actions{display:flex;gap:10px;flex-wrap:wrap}
.alert{padding:13px 15px;border-radius:14px;margin-bottom:14px}
.alert.success{background:#dcfce7;color:#166534}
.alert.error{background:#fee2e2;color:#991b1b}
.theme-dark .alert.success{background:#14532d;color:#dcfce7}
.theme-dark .alert.error{background:#7f1d1d;color:#fee2e2}
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
label{display:block;font-size:13px;margin-bottom:6px;font-weight:700}
input,select,textarea{width:100%;padding:11px 12px;border:1px solid #cbd5e1;border-radius:12px;background:#fff;color:#0f172a;min-height:46px}
.theme-dark input,.theme-dark select,.theme-dark textarea{background:#0b1220;border-color:#334155;color:#e5e7eb}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,.12)}
textarea{min-height:88px;resize:vertical}
.table-wrap{overflow:auto;background:var(--panel);border-radius:18px;box-shadow:var(--shadow);min-width:0}
table{width:100%;border-collapse:collapse;min-width:760px}
th,td{padding:12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{background:rgba(148,163,184,.08)}
.empty{padding:24px;color:var(--muted);text-align:center}
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:20px;background:linear-gradient(135deg,#0f172a,#1d4ed8)}
.login-card{width:min(96%,450px);background:var(--panel);padding:26px;border-radius:24px;box-shadow:0 20px 40px rgba(15,23,42,.25)}
.login-logo{display:block;width:92px;height:92px;border-radius:22px;object-fit:cover;margin:0 auto 14px;background:#fff}
.footer-note{padding:12px 4px;color:var(--muted)}
.list-plain{margin:0;padding-left:18px}
.summary{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.summary .total{font-size:28px;font-weight:700}
.table-mini{min-width:0}
.table-mini th,.table-mini td{padding:10px}
.overlay{display:none}
.sidebar-toggle-btn{width:42px;height:42px;border:1px solid var(--line);border-radius:12px;background:rgba(148,163,184,.08);color:var(--text);box-shadow:none;cursor:pointer;display:inline-grid;place-items:center;transition:background .2s ease,border-color .2s ease,transform .2s ease}
.sidebar-toggle-btn:hover{background:rgba(37,99,235,.10);border-color:color-mix(in srgb, var(--primary) 35%, var(--line));transform:translateY(-1px)}
.sidebar-toggle-btn .sidebar-toggle-icon{position:relative;display:block;width:16px;height:12px}
.sidebar-toggle-btn .sidebar-toggle-icon::before,.sidebar-toggle-btn .sidebar-toggle-icon::after{content:'';position:absolute;left:0;right:0;height:2px;border-radius:999px;background:currentColor;transition:transform .2s ease,opacity .2s ease,top .2s ease,bottom .2s ease}
.sidebar-toggle-btn .sidebar-toggle-icon::before{top:2px;box-shadow:0 4px 0 currentColor}
.sidebar-toggle-btn .sidebar-toggle-icon::after{bottom:2px;opacity:0}
.sidebar-toggle-btn.is-collapsed .sidebar-toggle-icon::before{top:5px;box-shadow:none;transform:rotate(0)}
.sidebar-toggle-btn.is-collapsed .sidebar-toggle-icon::after{bottom:5px;opacity:1}
body.sidebar-collapsed .sidebar{width:0;padding:0;border:0;overflow:hidden}
body.sidebar-collapsed .brand,body.sidebar-collapsed .sidebar nav{display:none}
.menu-btn,.theme-toggle{width:42px;height:42px;border:0;border-radius:12px;background:var(--panel);color:var(--text);font-size:18px;box-shadow:var(--shadow);cursor:pointer}
.theme-toggle{padding:0 10px;width:auto;min-width:42px}
.p-0{padding:0}.mb-0{margin-bottom:0}.mb-1{margin-bottom:8px}.mb-2{margin-bottom:12px}.mb-3{margin-bottom:18px}.mt-2{margin-top:12px}.mt-3{margin-top:18px}.mt-4{margin-top:22px}.text-right{text-align:right}.w-100{width:100%}
.pos-layout{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(320px,.95fr);gap:16px;align-items:start}
.sales-layout-compact{align-items:start}
.product-search{display:flex;gap:10px;flex-wrap:wrap}
.product-search input{flex:1}
.section-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,190px));justify-content:flex-start;gap:14px;max-height:620px;overflow:auto;padding-right:4px}
.product-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:0;overflow:hidden;display:flex;flex-direction:column;gap:0;min-width:0}
.product-thumb{height:160px;border-radius:0;background:linear-gradient(180deg,#ffffff,#f8fafc);display:grid;place-items:center;font-size:26px;font-weight:800;color:var(--primary);overflow:hidden;padding:14px;border-bottom:1px solid var(--line)}
.theme-dark .product-thumb{background:linear-gradient(180deg,#0f172a,#111827)}
.product-thumb img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;object-position:center center;display:block}
.product-card-body{display:flex;flex-direction:column;gap:8px;min-width:0;padding:14px 14px 10px}
.product-name{font-weight:700;line-height:1.25;min-height:40px}
.product-price{font-size:22px;font-weight:800}
.product-meta{font-size:12px;color:var(--muted)}
.product-card-footer{display:flex;flex-direction:column;align-items:stretch;gap:10px;justify-content:space-between;margin-top:auto;padding:0 14px 14px}
.product-add-btn{width:100%}
.product-card[hidden]{display:none!important}
.quick-barcode{display:grid;grid-template-columns:minmax(0,1fr) 100px 180px;gap:10px}
.qty-control{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:rgba(148,163,184,.08);min-height:44px}
.qty-btn{width:40px;height:44px;border:0;background:transparent;color:var(--text);font-size:20px;font-weight:700;cursor:pointer}
.qty-btn:hover{background:rgba(37,99,235,.08)}
.qty-input{width:58px;min-height:44px;border:0!important;border-left:1px solid var(--line)!important;border-right:1px solid var(--line)!important;border-radius:0!important;padding:0 8px!important;text-align:center;background:transparent!important;box-shadow:none!important}
.stack{display:flex;flex-direction:column;gap:12px}
.pos-layout.right-panel-collapsed{grid-template-columns:minmax(0,1fr)}
.pos-layout.right-panel-collapsed .pos-side-panels{display:none}
.pos-side-panels{position:sticky;top:16px}
.panel-box{overflow:hidden}
.panel-box-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:18px 18px 0}
.panel-box-header-inline{padding-bottom:12px}
.panel-box-header strong{display:block;font-size:18px}
.panel-summary-meta{font-size:12px;color:var(--muted);margin-top:4px}
.panel-box-body{padding:18px}
.panel-box-body.p-0{padding:0}
.pos-cart-wrap{background:transparent;box-shadow:none;border-radius:18px}
.cart-list{display:flex;flex-direction:column;gap:12px}
.cart-item-card{border:1px solid var(--line);border-radius:16px;padding:12px;background:rgba(148,163,184,.05);display:flex;flex-direction:column;gap:12px}
.cart-item-main{display:flex;gap:12px;align-items:flex-start}
.cart-item-thumb{width:64px;height:64px;border-radius:14px;border:1px solid var(--line);object-fit:contain;object-position:center;background:#fff;flex-shrink:0;padding:4px}
.cart-item-meta{display:flex;flex-direction:column;gap:4px;min-width:0}
.cart-item-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.cart-item-actions form{margin:0}
.cart-empty{border:1px dashed var(--line);border-radius:16px;background:rgba(148,163,184,.04)}
.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}
.cart-qty-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cart-qty-form input{width:84px;min-width:84px}
.summary-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.summary-box{border:1px solid var(--line);border-radius:14px;padding:12px;background:rgba(148,163,184,.05)}
.summary-box strong{display:block;font-size:20px;margin-top:4px}
.change-box strong{color:var(--ok)}
.preview-line{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.preview-thumb{width:70px;height:70px;border-radius:14px;border:1px solid var(--line);object-fit:cover;background:#fff}
.logo-preview{width:100px;height:100px;border-radius:18px;border:1px solid var(--line);object-fit:cover;background:#fff}
.ticket-page{max-width:420px;margin:20px auto;padding:16px}
.ticket-card{background:#fff;color:#111827;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.08);padding:18px}
.ticket-logo{display:block;margin:0 auto 10px;width:90px;height:90px;object-fit:cover;border-radius:18px}
.ticket-header{text-align:center;margin-bottom:14px}
.ticket-table{width:100%;min-width:0;font-size:13px}
.ticket-table th,.ticket-table td{padding:8px;border-bottom:1px dashed #d1d5db}
.ticket-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:16px}
.permission-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.permission-item{border:1px solid var(--line);border-radius:14px;padding:12px;background:rgba(148,163,184,.06)}
.user-cell,.product-list-cell{display:flex;gap:12px;align-items:flex-start}
.user-meta,.product-list-meta{min-width:0}
.badge-dot{display:inline-flex;align-items:center;gap:6px}
@media (max-width: 1100px){.split-2,.split-main,.split-aside,.pos-layout{grid-template-columns:1fr}.product-grid{max-height:none;grid-template-columns:repeat(auto-fill,minmax(170px,170px))}.pos-side-panels{position:static}}
@media (max-width: 980px){
  .sidebar-toggle-btn{display:none}
  .mobile-top{display:flex;align-items:center;gap:12px;background:linear-gradient(180deg,var(--bg),var(--bg2));color:#fff;padding:12px 14px;position:sticky;top:0;z-index:25}
  .mobile-brand-text{min-width:0;flex:1}
  .mobile-brand{min-width:0;flex:1}
  .layout{display:block}
  .sidebar{position:fixed;left:-290px;top:0;bottom:0;height:100vh;z-index:30;transition:.25s}
  .sidebar .brand{display:none}
  .overlay{display:block;position:fixed;inset:0;background:rgba(0,0,0,.4);opacity:0;visibility:hidden;z-index:20;transition:.25s}
  body.nav-open .sidebar{left:0}
  body.nav-open .overlay{opacity:1;visibility:visible}
  .main{padding:12px}
  .topbar{padding:15px;align-items:flex-start}
  .topbar-left{width:100%}
  .topbar h1{font-size:22px}
  table{min-width:620px}
  .quick-barcode{grid-template-columns:minmax(0,1fr) 90px}
  .quick-barcode .btn{grid-column:1/-1}
}
@media (max-width: 640px){
  .row{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));justify-content:stretch}
  .product-thumb{height:132px}
  .product-card{padding:10px}
  .topbar-right{width:100%}
  .ticket-page{padding:10px}
  .summary-grid{grid-template-columns:1fr}
  .panel-summary{padding:12px 14px}
}
@media print{
  body{background:#fff!important}
  .ticket-actions{display:none!important}
}


.table-wrap table td .table-actions,.table-wrap table td .inline-actions,.table-wrap table td .form-actions{align-items:flex-start}
.table-wrap table td .user-cell,.table-wrap table td .product-list-cell{width:100%}
.table-wrap table td .badge,.table-wrap table td .pill{white-space:nowrap}
@media (max-width: 768px){
  .topbar{padding:14px}
  .topbar-left{width:100%;gap:10px}
  .topbar-right{gap:8px}
  .topbar-right > *{flex:1 1 auto}
  .sidebar{width:min(86vw,300px);left:calc(-1 * min(86vw,300px))}
  .table-wrap{overflow:visible;background:transparent;box-shadow:none;border-radius:0}
  .table-wrap table{display:block;width:100%;min-width:0;background:transparent}
  .table-wrap thead{display:none}
  .table-wrap tbody{display:block}
  .table-wrap tr{display:block;background:var(--panel);border-radius:18px;box-shadow:var(--shadow);margin-bottom:12px;overflow:hidden}
  .table-wrap td{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;width:100%;min-height:46px;padding:11px 12px;border-bottom:1px solid var(--line);text-align:right}
  .table-wrap td::before{content:attr(data-label);font-weight:700;color:var(--muted);text-align:left;flex:0 0 42%}
  .table-wrap td > *{max-width:58%}
  .table-wrap td > form{margin-left:auto}
  .table-wrap td:last-child{border-bottom:0}
  .table-wrap td .table-actions,.table-wrap td .inline-actions{justify-content:flex-end;width:100%}
  .table-wrap td .user-cell,.table-wrap td .product-list-cell{justify-content:flex-end}
}
@media (max-width: 520px){
  .main{padding:10px}
  .mobile-top{padding:10px 12px}
  .brand-logo-img{width:40px;height:40px;border-radius:12px}
  .brand-mark.small{width:34px;height:34px;font-size:16px}
  .topbar h1{font-size:20px}
  .topbar p{font-size:13px}
  .btn{width:100%}
  .form-actions .btn,.table-actions .btn,.inline-actions .btn{width:100%}
  .product-grid{grid-template-columns:1fr}
  .product-card-footer{flex-direction:column;align-items:stretch}
  .product-add-btn{width:100%}
  .cart-item-actions{flex-direction:column;align-items:stretch}
  .cart-item-actions form{width:100%}
  .qty-control{width:100%}
  .qty-input{flex:1;width:auto}
  .quick-barcode{grid-template-columns:1fr}
  .table-wrap td{flex-direction:column;align-items:stretch;text-align:left}
  .table-wrap td::before{flex:0 0 auto}
  .table-wrap td > *{max-width:100%}
  .table-wrap td .table-actions,.table-wrap td .inline-actions{justify-content:flex-start}
}