@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@600;700&display=swap');
:root{--bg:#080909;--surface:#111212;--surface2:#171818;--line:#292b29;--text:#f6f7f3;--muted:#969a94;--yellow:#f5bd27;--yellow2:#ffd665;--green:#45c77b;--blue:#72a9ff;--red:#ff786d;--radius:18px;--shadow:0 22px 60px rgba(0,0,0,.32)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font:15px "Manrope",sans-serif;overflow-x:hidden}body.lock{overflow:hidden}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button{cursor:pointer}img{display:block;max-width:100%}svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.hidden{display:none!important}
.brand{display:flex;align-items:center;gap:12px;min-width:0}.brand-logo{width:54px;height:42px;object-fit:contain;object-position:left center;flex:0 0 auto}.brand strong{display:block;font:700 1rem "Space Grotesk";white-space:nowrap}.brand span{display:block;color:var(--muted);font-size:.7rem;white-space:nowrap}
.btn{min-height:43px;padding:0 15px;border:1px solid transparent;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:800;font-size:.75rem;transition:.2s}.btn:hover{transform:translateY(-1px)}.btn-primary{background:var(--yellow);color:#111}.btn-primary:hover{background:var(--yellow2)}.btn-soft{background:#191a1a;border-color:#303330;color:#e8e9e5}.btn-danger{background:#291716;border-color:#542925;color:#ff9c94}.btn-icon{width:36px;height:36px;min-height:36px;padding:0}.btn svg{width:17px;height:17px}
.panel{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);overflow:hidden}.panel-head{min-height:64px;padding:14px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:14px}.panel-head h2{margin:0;font:700 1rem "Space Grotesk"}.panel-head p{margin:4px 0 0;color:var(--muted);font-size:.7rem}.panel-body{padding:18px}.field{display:grid;gap:7px}.field label{color:#bec1bb;font-size:.7rem;font-weight:700}.field input,.field select,.field textarea,.search{width:100%;min-height:45px;padding:0 13px;border:1px solid #313431;border-radius:10px;background:#0b0c0c;color:#f4f5f1;outline:0;font-size:.77rem}.field textarea{padding-top:12px;min-height:86px;resize:vertical}.field input:focus,.field select:focus,.field textarea:focus,.search:focus{border-color:var(--yellow);box-shadow:0 0 0 3px rgba(245,189,39,.1)}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.form-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.full{grid-column:1/-1}.actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.badge{display:inline-flex;align-items:center;min-height:27px;padding:0 9px;border:1px solid;border-radius:30px;font-size:.65rem;font-weight:800}.wait{color:#ffd267;background:#2b2413;border-color:#57491d}.progress{color:#92bbff;background:#172335;border-color:#2a4568}.done,.paid{color:#7bdfa4;background:#14271c;border-color:#295f3f}.low{color:#ff9e96;background:#2b1715;border-color:#5b2b27}
.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;min-width:760px}th,td{padding:13px 15px;border-bottom:1px solid #222422;text-align:left;white-space:nowrap}th{color:#7f837c;background:#101111;font-size:.62rem;text-transform:uppercase;letter-spacing:.08em}td{color:#d9dbd6;font-size:.72rem}tbody tr:hover{background:rgba(255,255,255,.018)}.cell-main{font-weight:800;color:#f2f3ef}.cell-sub{display:block;margin-top:3px;color:var(--muted);font-size:.62rem}.empty{padding:30px;text-align:center;color:var(--muted);font-size:.74rem}.toast{position:fixed;right:22px;bottom:22px;z-index:100;max-width:340px;padding:14px 17px;border:1px solid #2a5e3e;border-radius:12px;background:#14241a;color:#adebc6;box-shadow:var(--shadow);font-size:.74rem;font-weight:700;opacity:0;transform:translateY(20px);pointer-events:none;transition:.25s}.toast.show{opacity:1;transform:none}
.payment-box{margin-top:15px;padding:14px;border:1px solid #4f421e;border-radius:12px;background:linear-gradient(135deg,#211d12,#111212)}.payment-title{margin-bottom:11px;color:var(--yellow);font-size:.67rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.payment-row{min-height:43px;padding:8px 9px;border-top:1px solid rgba(255,255,255,.07);display:flex;align-items:center;justify-content:space-between;gap:12px}.payment-row:first-of-type{border-top:0}.payment-row span{display:block;color:var(--muted);font-size:.61rem}.payment-row strong{display:block;margin-top:2px;font-size:.75rem;word-break:break-word}.copy-btn{flex:0 0 auto;min-height:32px;padding:0 10px;border:1px solid #5d4c1e;border-radius:8px;background:#2b2412;color:var(--yellow2);font-size:.64rem;font-weight:800;cursor:pointer}
.app-sidebar{position:fixed;inset:0 auto 0 0;width:252px;z-index:30;padding:18px 14px;background:#0d0e0e;border-right:1px solid var(--line);display:flex;flex-direction:column;transition:.25s}.app-sidebar .brand{padding:3px 6px 22px}.nav-label{margin:13px 11px 8px;color:#686c66;font-size:.65rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase}.app-nav{display:grid;gap:4px}.nav-btn{width:100%;min-height:46px;padding:0 13px;border:0;border-radius:11px;background:transparent;color:#aaada8;display:flex;align-items:center;gap:12px;text-align:left;font-weight:700;font-size:.82rem}.nav-btn svg{width:20px;height:20px}.nav-btn:hover{background:#181919;color:#fff}.nav-btn.active{background:var(--yellow);color:#111}.nav-count{margin-left:auto;min-width:23px;height:23px;padding:0 6px;border-radius:20px;background:rgba(255,255,255,.09);display:grid;place-items:center;font-size:.65rem}.side-bottom{margin-top:auto}.profile-mini{padding:12px;border:1px solid var(--line);border-radius:13px;background:#111212;display:flex;align-items:center;gap:10px}.profile-avatar{width:36px;height:36px;border-radius:10px;background:#282315;color:var(--yellow);display:grid;place-items:center;font-weight:800}.profile-mini strong{display:block;font-size:.76rem}.profile-mini span{color:var(--muted);font-size:.65rem}.app-main{margin-left:252px;min-height:100vh}.app-top{height:76px;padding:0 28px;position:sticky;top:0;z-index:20;background:rgba(8,9,9,.9);border-bottom:1px solid var(--line);backdrop-filter:blur(14px);display:flex;align-items:center;justify-content:space-between;gap:16px}.app-top h1{margin:0;font:700 1.3rem "Space Grotesk"}.app-top p{margin:3px 0 0;color:var(--muted);font-size:.7rem}.app-content{max-width:1480px;margin:auto;padding:26px 28px 50px}.app-view{display:none;animation:fade .3s ease}.app-view.active{display:block}@keyframes fade{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}.workspace-title{margin-bottom:18px;display:flex;align-items:end;justify-content:space-between;gap:18px}.workspace-title h2{margin:0 0 4px;font:700 1.5rem "Space Grotesk"}.workspace-title p{margin:0;color:var(--muted);font-size:.75rem}.mobile-menu,.app-overlay{display:none}
@media(max-width:900px){.form-grid.three{grid-template-columns:repeat(2,1fr)}}@media(max-width:760px){.app-sidebar{transform:translateX(-100%);box-shadow:22px 0 60px #000}.app-sidebar.open{transform:none}.app-overlay.open{display:block;position:fixed;inset:0;z-index:25;background:rgba(0,0,0,.66)}.app-main{margin-left:0}.app-top{height:68px;padding:0 13px}.app-content{padding:18px 13px 42px}.mobile-menu{display:grid}.app-top>.actions .desktop-only{display:none}.form-grid,.form-grid.three{grid-template-columns:1fr}.workspace-title{align-items:flex-start;flex-direction:column}.brand-logo{width:48px;height:38px}.toast{left:13px;right:13px;bottom:13px;max-width:none}}

/* Stable three-zone sidebar: brand, scrollable navigation, account footer. */
.app-sidebar{height:100vh;height:100dvh;box-sizing:border-box;overflow:hidden}
.app-sidebar .brand,.app-sidebar>.nav-label{flex:0 0 auto}
.app-nav{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;align-content:start;padding:2px 5px 10px 0;scrollbar-width:thin;scrollbar-color:#66501b transparent}
.app-nav::-webkit-scrollbar{width:5px}.app-nav::-webkit-scrollbar-track{background:transparent}.app-nav::-webkit-scrollbar-thumb{border-radius:20px;background:#66501b}.app-nav::-webkit-scrollbar-thumb:hover{background:var(--yellow)}
.app-nav .nav-btn{flex:0 0 auto;min-width:0;white-space:nowrap}.app-nav .nav-btn>span:not(.payment-nav-icon):not(.article-nav-icon):not(.elnova-mini-icon){min-width:0;overflow:hidden;text-overflow:ellipsis}
.side-bottom{flex:0 0 auto;margin-top:8px;padding-top:10px;border-top:1px solid var(--line);background:#0d0e0e}.side-bottom .powered{margin:9px 10px;color:#777b74}.side-bottom>.nav-btn{min-height:42px}
@media(max-height:690px){.app-sidebar{padding-top:12px;padding-bottom:10px}.app-sidebar .brand{padding-bottom:10px}.nav-label{margin-top:6px}.nav-btn{min-height:42px}.profile-mini{padding:9px}.profile-avatar{width:32px;height:32px}.side-bottom .powered{margin-top:6px;margin-bottom:6px}}
@media(max-width:760px){.app-sidebar{width:min(286px,88vw);padding-left:13px;padding-right:13px}.app-nav{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}}

/* Keep the mobile account footer compact and separate from scrollable navigation. */
.side-bottom{display:flex;flex-direction:column;gap:4px;min-height:0;padding-bottom:max(2px,env(safe-area-inset-bottom))}
.side-bottom .profile-mini{order:1;flex:0 0 auto}
.side-bottom #changePasswordBtn{order:2}
.side-bottom #logoutBtn{order:3}
.side-bottom .powered{order:4;margin:2px 9px 0;line-height:1.4}
.side-bottom>.nav-btn{flex:0 0 auto;margin:0}
@media(max-height:920px){
  .app-sidebar{padding-top:13px;padding-bottom:9px}
  .app-sidebar .brand{padding-bottom:13px}
  .nav-label{margin-top:7px;margin-bottom:5px}
  .app-nav{gap:2px}
  .app-nav .nav-btn{min-height:42px}
  .side-bottom{margin-top:5px;padding-top:7px}
  .side-bottom .profile-mini{padding:9px}
  .side-bottom>.nav-btn{min-height:39px}
}
@media(max-height:760px){
  .side-bottom .powered{display:none}
  .app-nav .nav-btn{min-height:39px}
  .profile-avatar{width:32px;height:32px}
}
@media(max-width:760px){
  .app-sidebar{width:min(300px,86vw)}
  .side-bottom .profile-mini{border-radius:11px}
}

/* Cashier stays fluid at every viewport without horizontal scrolling. */
#view-cashier{width:100%;max-width:100%;overflow-x:clip}
#view-cashier .work-grid,
#view-cashier .stack,
#view-cashier .panel,
#view-cashier .panel-body,
#view-cashier .form-grid,
#view-cashier .catalog-line,
#view-cashier .field,
#view-cashier .actions,
#view-cashier .payment-row,
#view-cashier .payment-row>div{min-width:0;max-width:100%}
#view-cashier input,
#view-cashier select,
#view-cashier textarea{min-width:0;max-width:100%;box-sizing:border-box}
#view-cashier .payment-row{flex-wrap:wrap}
#view-cashier .payment-row>div{flex:1 1 180px}
#view-cashier .payment-row strong{white-space:normal;overflow-wrap:anywhere}
#view-cashier .cashier-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
#view-cashier .cashier-actions .btn{width:100%;min-width:0}
@media(max-width:850px){
  #view-cashier .work-grid{grid-template-columns:minmax(0,1fr)}
  #view-cashier .catalog-line{grid-template-columns:minmax(0,1fr) minmax(76px,.34fr)}
  #view-cashier .catalog-line>.field:first-child{grid-column:1/-1}
  #view-cashier .catalog-line .price-field,
  #view-cashier .catalog-line .stack-actions{grid-column:auto}
}
@media(max-width:560px){
  #view-cashier .catalog-line,
  #view-cashier .form-grid,
  #view-cashier .cashier-actions{grid-template-columns:minmax(0,1fr)}
  #view-cashier .catalog-line>*{grid-column:1!important}
  #view-cashier .payment-row{align-items:flex-start}
  #view-cashier .payment-row .copy-btn{width:100%}
}