/* Shared FN8POS application design system. Contrast-safe light and dark palettes. */
:root[data-theme="light"] {
  --bg:#f3f5f0; --bg1:#ffffff; --bg2:#ffffff; --bg3:#edf1eb; --bg4:#e4ebe1; --bg5:#d9e4d7;
  --bd:#dfe6dc; --bd1:#cad8c9; --bd2:#a8bfa9;
  --em:#245b3d; --em2:#1d4730; --em3:#9ebd9e; --em9:#e6f0e4;
  --emA:rgba(36,91,61,.08); --emB:rgba(36,91,61,.17);
  --gd:#895c16; --am:#946008; --rd:#b33036; --bl:#245fa5; --vt:#6945a1;
  --t:#18281e; --t1:#2c4031; --t2:#445b4b; --t3:#526b58; --t4:#5b705f;
}
:root[data-theme="dark"] {
  --bg:#101a14; --bg1:#17241b; --bg2:#1c2b20; --bg3:#24372a; --bg4:#2c4333; --bg5:#36513e;
  --bd:#344a39; --bd1:#415a45; --bd2:#56735a;
  --em:#b9e3a4; --em2:#cbedb8; --em3:#739e78; --em9:#263e2c;
  --emA:rgba(185,227,164,.1); --emB:rgba(185,227,164,.2);
  --gd:#f4cb83; --am:#f3bf72; --rd:#ff999e; --bl:#a4caff; --vt:#d4bdff;
  --t:#f3f6ee; --t1:#e0ebdc; --t2:#c4d8c3; --t3:#adc8ad; --t4:#a2baa4;
}
:root { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
body { background:var(--bg); color:var(--t1); }
.error-screen { min-height:100dvh; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:clamp(24px,8vw,100px); background:var(--bg); color:var(--t); }
.error-mark { display:grid; place-items:center; width:46px; height:46px; margin-bottom:40px; border-radius:10px; background:var(--em); color:var(--bg1); font-weight:800; }
.error-screen p { margin:0 0 16px; color:var(--em); font-size:11px; font-weight:800; letter-spacing:1.5px; }
.error-screen h1 { max-width:680px; margin:0; font-size:clamp(34px,6vw,70px); line-height:1.08; letter-spacing:-.05em; }
.error-screen span { margin-top:20px; color:var(--t2); font-size:14px; }.error-screen button { margin-top:32px; padding:12px 20px; border:0; border-radius:8px; background:var(--em); color:var(--bg1); font-weight:800; cursor:pointer; }
:root[data-theme="dark"] .error-mark,:root[data-theme="dark"] .error-screen button { color:#102017; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline:2px solid var(--em); outline-offset:2px; }
.btn { border-radius:8px; font-weight:700; }
.btn-primary { background:var(--em); color:var(--bg1); }
:root[data-theme="dark"] .btn-primary { color:#102017; }
.btn-primary:hover { background:var(--em2); box-shadow:0 8px 20px rgba(18,58,33,.13); }
.btn-outline { border-color:var(--bd1); color:var(--t1); }
.btn-outline:hover { background:var(--emA); border-color:var(--em); color:var(--em); }
.btn-ghost { background:var(--bg3); color:var(--t1); }
.input-box { min-height:42px; background:var(--bg1); border-color:var(--bd1); }
.input-box input,.input-box select,.input-box textarea { color:var(--t); }
.input-box input::placeholder,.auth-field input::placeholder { color:var(--t4); opacity:1; }
.card,.pos-ci,.pos-product,.modal-box { background:var(--bg1); border-color:var(--bd); box-shadow:0 4px 18px rgba(20,42,27,.035); }
:root[data-theme="dark"] .card,:root[data-theme="dark"] .pos-ci,:root[data-theme="dark"] .pos-product,:root[data-theme="dark"] .modal-box { box-shadow:none; }
.card { border-radius:12px; }
.card:hover { border-color:var(--bd1); }
.badge-green { background:var(--em9); color:var(--em); border-color:var(--emB); }
:root[data-theme="light"] .badge-red { color:#a52831; }
.data-table { color:var(--t1); }
.data-table thead { background:var(--bg3); }
.data-table th { color:var(--t2); border-color:var(--bd); }
.data-table td { border-color:var(--bd); }
.data-table tbody tr:hover { background:var(--emA); }
.table-wrap { border-color:var(--bd); }

/* Application shell */
.app-shell { background:var(--bg); }
.sidebar { width:242px; background:var(--bg1); border-color:var(--bd); }
.sidebar-logo { height:70px; padding:16px 20px; border-color:var(--bd); }
.sidebar-logo-mark,.logo-mark { background:var(--em); color:var(--bg1); border-radius:9px; }
:root[data-theme="dark"] .sidebar-logo-mark,:root[data-theme="dark"] .logo-mark { color:#102017; }
.sidebar-logo-name { color:var(--t); font-size:17px; letter-spacing:-.5px; }
.sidebar-logo-sub { color:var(--t3); font-size:10px; }
.sidebar-nav { padding:18px 10px; }
.sidebar-item { height:44px; border-radius:8px; padding:0 13px; color:var(--t2); font-size:13px; font-weight:600; }
.sidebar-item .sb-icon { width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center; }
.sidebar-item .sb-icon svg { width:18px; height:18px; }
.sidebar-item.active { background:var(--em9); color:var(--em); }
.sidebar-item:hover { background:var(--bg3); color:var(--t); }
.sidebar-bottom { padding:14px; border-color:var(--bd); }
.sidebar-plan { background:var(--em9); border-color:var(--emB); border-radius:9px; }
.topbar { height:68px; padding:0 28px; background:var(--bg1); border-color:var(--bd); }
.topbar-clock { color:var(--t2); }
.topbar-avatar { background:var(--em9); color:var(--em); border-radius:10px; }
.topbar-bell { color:var(--t2); display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; }
.topbar-bell svg { width:19px; height:19px; }
.page-content { background:var(--bg); }
.page-pad { padding:30px; }
.page-content > * { animation:page-enter .35s cubic-bezier(.22,1,.36,1) both; }
@keyframes page-enter { from { opacity:0; transform:translateY(9px); } to { opacity:1; transform:translateY(0); } }
.page-title { font-size:23px; font-weight:800; letter-spacing:-.7px; }
.page-sub { color:var(--t2); font-size:13px; }
.stats-row { gap:12px; }
.stats-row .card { min-width:180px; }
.stat-card .stat-label { color:var(--t2); }
.stat-card .stat-value { color:var(--t); }
.settings-tabs { display:flex; gap:7px; margin-bottom:22px; overflow-x:auto; padding:3px 1px 8px; scrollbar-width:thin; }
.settings-tabs .btn { flex:0 0 auto; min-height:38px; padding:0 14px; border-radius:7px; }
.pos-topbar,.pos-categories,.pos-cart,.pos-cart-header { background:var(--bg1); border-color:var(--bd); }
.pos-product { border-width:1px; border-radius:11px; }
.pos-product:hover { background:var(--bg1); border-color:var(--em3); box-shadow:0 12px 28px rgba(24,53,31,.1); }
.pos-product.in-cart { background:var(--em9); border-color:var(--em3); }
.pos-product .p-name { color:var(--t); }
.pos-product .p-desc,.pos-product .p-cat { color:var(--t2); }
.pos-product .p-price { color:var(--em); }
.pos-type-btn.active { background:var(--em); color:var(--bg1); box-shadow:none; }
:root[data-theme="dark"] .pos-type-btn.active { color:#102017; }
.pos-type-btn:not(.active) { color:var(--t2); }
.pos-cat-btn:not(.active) { color:var(--t2); }
.pos-cat-btn.active { border-color:var(--em3); }
.pos-cart { border-color:var(--bd); }
.pos-cart-empty { color:var(--t2); }
.pos-totals { background:var(--bg1); }
.pos-pay-btn { background:var(--bg1); color:var(--t1); border-color:var(--bd1); }
.pos-pay-btn:hover { background:var(--em9); }
.notif-drop,.modal-box { border-color:var(--bd); }
.notif-empty { padding:28px 16px; color:var(--t2); font-size:12px; text-align:center; }
.notif-drop:has(.notif-empty) .notif-head button { display:none; }
.pos-empty-state { grid-column:1/-1; display:flex; min-height:320px; flex-direction:column; align-items:center; justify-content:center; padding:36px 22px; text-align:center; color:var(--t2); }
.pos-empty-icon { display:grid; place-items:center; width:58px; height:58px; margin-bottom:18px; border:1px solid var(--bd1); border-radius:16px; background:var(--bg3); color:var(--em); }
.pos-empty-title { color:var(--t); font-size:17px; font-weight:800; }
.pos-empty-state p { max-width:300px; margin:8px 0 17px; color:var(--t2); font-size:12px; line-height:1.6; }
.module-empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:230px; padding:26px; border:1px dashed var(--bd1); border-radius:12px; background:var(--bg1); text-align:center; }
.module-empty-state strong { color:var(--t); font-size:15px; }.module-empty-state p { max-width:300px; margin:7px 0 15px; color:var(--t2); font-size:12px; line-height:1.6; }

/* Language and theme controls */
.ui-controls { display:inline-flex; align-items:center; gap:5px; }
.ui-control { min-width:35px; height:35px; display:inline-flex; align-items:center; justify-content:center; gap:4px; padding:0 8px; border:1px solid var(--bd1); border-radius:7px; background:var(--bg1); color:var(--t1); font:700 11px var(--ff); letter-spacing:.2px; cursor:pointer; transition:background .2s,border-color .2s,transform .2s; }
.ui-control:hover { background:var(--em9); border-color:var(--em3); transform:translateY(-1px); }
.ui-control svg { width:16px; height:16px; }
.ui-icon { width:1em; height:1em; display:inline-flex; align-items:center; justify-content:center; vertical-align:-.13em; flex:0 0 auto; }
.ui-icon svg { width:100%; height:100%; }
.site-header .ui-control { background:rgba(255,255,255,.06); border-color:rgba(235,247,224,.3); color:#f5f9ed; }
.site-header.scrolled .ui-control { background:#fff; border-color:#cad8c9; color:#263d2d; }
.mobile-nav .ui-control { background:#fff; border-color:#cad8c9; color:#263d2d; }
.topbar .ui-control { background:var(--bg1); }
.auth-page .ui-control { background:var(--bg1); }

/* Authentication */
.auth-page { --land-ink:#18281e; --land-green:#245b3d; min-height:100%; color:var(--t); background:var(--bg); }
.auth-shell { min-height:100dvh; display:grid; grid-template-columns:minmax(360px,44%) 1fr; }
.auth-art { position:relative; display:flex; flex-direction:column; min-height:100dvh; padding:32px clamp(28px,5vw,72px); overflow:hidden; background:#173729; color:#f6f8ef; }
.auth-art::before { content:'F8'; position:absolute; right:-12%; bottom:4%; color:rgba(234,245,221,.045); font-size:min(37vw,540px); font-weight:800; line-height:1; letter-spacing:-.1em; pointer-events:none; }
.auth-art .brand-mark { color:#173729; background:#d6e6c2; }.auth-art .brand-word,.auth-art .brand-word span { color:#f3f6ec; }
.auth-art-content { position:relative; z-index:1; margin:auto 0; }
.auth-art-eyebrow { margin-bottom:22px; color:#b9d1ac; font-size:10px; font-weight:800; letter-spacing:1.6px; }
.auth-art h2 { color:#f6f8ef; font-size:clamp(44px,4.8vw,66px); line-height:1.05; letter-spacing:-3px; }
.auth-art h2 em { color:#d3e7b9; font-family:'Instrument Serif',Georgia,serif; font-size:1.2em; font-weight:400; }
.auth-art p { max-width:380px; margin:20px 0 36px; color:#c2d4be; font-size:14px; line-height:1.85; }
.auth-flow { max-width:410px; border-top:1px solid rgba(220,240,210,.2); }
.auth-flow > div { min-height:49px; display:flex; align-items:center; gap:15px; border-bottom:1px solid rgba(220,240,210,.2); color:#dce9d5; }
.auth-flow span { color:#adc8a9; font:11px var(--fm); }.auth-flow b { flex:1; font-size:12px; font-weight:600; }.auth-flow svg { color:#b5d2ad; }
.auth-art-footer { position:relative; z-index:1; color:#9db99f; font-size:9px; font-weight:800; letter-spacing:1.3px; }
.auth-form-side { display:flex; align-items:center; justify-content:center; position:relative; padding:64px 30px; overflow-y:auto; }
.auth-form-wrap { width:min(430px,100%); margin:auto; }
.auth-back { display:inline-flex; align-items:center; gap:10px; margin-bottom:46px; color:var(--t3); font-size:11px; font-weight:700; }
.auth-back svg { transform:rotate(180deg); }.auth-back:hover { color:var(--em); }
.auth-form-kicker { margin-bottom:13px; color:var(--em); font-size:10px; font-weight:800; letter-spacing:1.5px; }
.auth-form-wrap h1 { color:var(--t); font-size:clamp(30px,3.4vw,42px); letter-spacing:-1.8px; }
.auth-form-intro { margin:10px 0 28px; color:var(--t2); font-size:13px; line-height:1.7; }
.auth-form { display:grid; gap:15px; }
.auth-field { display:grid; gap:6px; }.auth-field label { color:var(--t1); font-size:12px; font-weight:700; }
.auth-field input,.auth-field select { width:100%; height:47px; padding:0 14px; border:1px solid var(--bd1); border-radius:8px; outline:0; background:var(--bg1); color:var(--t); font:13px var(--ff); transition:border-color .2s,box-shadow .2s; }
.auth-field input:focus,.auth-field select:focus { border-color:var(--em); box-shadow:0 0 0 3px var(--emA); }
.auth-submit { height:48px; display:flex; align-items:center; justify-content:center; gap:10px; margin-top:6px; border-radius:8px; background:var(--em); color:var(--bg1); font:700 13px var(--ff); transition:background .2s,transform .2s; }
.auth-submit:hover { background:var(--em2); transform:translateY(-1px); }
:root[data-theme="dark"] .auth-submit { color:#112219; }
.auth-submit:disabled { opacity:.6; cursor:wait; }
.auth-switch { margin-top:5px; color:var(--t2); text-align:center; font-size:12px; }.auth-switch a { color:var(--em); font-weight:800; }
.auth-error { padding:11px 13px; margin-bottom:13px; border:1px solid rgba(179,48,54,.28); border-radius:8px; background:rgba(179,48,54,.08); color:var(--rd); font-size:12px; }
.auth-mobile-brand { display:none; }
.auth-form-side > .ui-controls { position:absolute; top:28px; right:30px; }

/* Dark public pages */
:root[data-theme="dark"] .landing { --land-bg:#111d16; --land-paper:#1a2a20; --land-ink:#f1f5ec; --land-muted:#c1d1bd; --land-faint:#a9bda7; --land-line:#38503c; --land-green:#b9e3a4; --land-green-deep:#d0edbe; background:#111d16; color:#f1f5ec; }
:root[data-theme="dark"] .site-header.scrolled { background:rgba(23,36,27,.96); border-color:#3c5541; }
:root[data-theme="dark"] .site-header.scrolled .brand-word,:root[data-theme="dark"] .site-header.scrolled .brand-word span { color:#f2f6eb; }
:root[data-theme="dark"] .site-header.scrolled .brand-mark { color:#173729; background:#d6e6c2; }
:root[data-theme="dark"] .site-header.scrolled .desktop-nav a,:root[data-theme="dark"] .site-header.scrolled .login-link { color:#cfddca; }
:root[data-theme="dark"] .site-header.scrolled .button-dark { color:#173729; background:#d6e6c2; }
:root[data-theme="dark"] .site-header.scrolled .ui-control { color:#e9f3e3; background:#263b2b; border-color:#56715a; }
:root[data-theme="dark"] .site-header.scrolled .mobile-menu-toggle { color:#f3f6eb; border-color:#56715a; }
:root[data-theme="dark"] .mobile-nav { background:#18291e; }
:root[data-theme="dark"] .mobile-nav .brand-word,:root[data-theme="dark"] .mobile-nav .brand-word span { color:#f3f6eb; }
:root[data-theme="dark"] .mobile-nav nav a { color:#f1f5eb; border-color:#3c5541; }
:root[data-theme="dark"] .mobile-nav .ui-control,:root[data-theme="dark"] .mobile-nav-close { color:#f1f5eb; border-color:#56715a; background:#263b2b; }
:root[data-theme="dark"] .feature-section { background:#19291f; }
:root[data-theme="dark"] .feature-card { background:#1f3025; border-color:#3a5140; }
:root[data-theme="dark"] .feature-card:hover { background:#263c2c; }
:root[data-theme="dark"] .feature-card h3,:root[data-theme="dark"] .section-heading h2,:root[data-theme="dark"] .workflow-copy h2 { color:#f1f5eb; }
:root[data-theme="dark"] .feature-card p,:root[data-theme="dark"] .section-heading-row > p,:root[data-theme="dark"] .workflow-copy p { color:#b7cbb5; }
:root[data-theme="dark"] .section-heading h2 em,:root[data-theme="dark"] .workflow-copy h2 em { color:#b9e3a4; }
:root[data-theme="dark"] .feature-icon { background:#2a4331; border-color:#4c6a50; color:#c6e6b8; }
:root[data-theme="dark"] .feature-index { color:#b2c5ad; }
:root[data-theme="dark"] .workflow-section { background:#14231a; }
:root[data-theme="dark"] .workflow-board { background:#1d2f22; border-color:#3e5642; box-shadow:none; }
:root[data-theme="dark"] .workflow-topline,:root[data-theme="dark"] .workflow-footer { border-color:#3e5642; color:#aec3ac; }
:root[data-theme="dark"] .flow-text b { color:#e4eee0; }.landing .flow-text small { color:var(--land-muted); }
:root[data-theme="dark"] .flow-icon { background:#2d4532; border-color:#547259; color:#c0e3b2; }
:root[data-theme="dark"] .flow-status { background:#413b28; color:#efd8a6; }.landing .flow-status.done { background:#2c4830; color:#c1e8ad; }
:root[data-theme="dark"] .pricing-section { background:#19291f; }
:root[data-theme="dark"] .pricing-card { background:#213327; border-color:#425b47; box-shadow:none; }
:root[data-theme="dark"] .pricing-featured { border-color:#b3d5a8; }
:root[data-theme="dark"] .plan-name,:root[data-theme="dark"] .plan-price { color:#f0f5e9; }
:root[data-theme="dark"] .plan-note,:root[data-theme="dark"] .plan-price small,:root[data-theme="dark"] .plan-price > span,:root[data-theme="dark"] .plan-includes,:root[data-theme="dark"] .pricing-card li,:root[data-theme="dark"] .pricing-footnote { color:#bfd0ba; }
:root[data-theme="dark"] .plan-includes { border-color:#425b47; }
:root[data-theme="dark"] .pricing-card li svg { color:#b9e3a4; }
:root[data-theme="dark"] .pricing-card .button-light { background:#263c2d; border-color:#628168; color:#e5efdc; }
:root[data-theme="dark"] .pricing-card .button-dark { background:#b9e3a4; color:#173729; }
:root[data-theme="dark"] .closing-section { background:#284a32; }.landing .closing-pattern { opacity:.25; }
:root[data-theme="dark"] .closing-kicker { color:#c6e2b6; }:root[data-theme="dark"] .closing-content h2 { color:#f4f8ee; }:root[data-theme="dark"] .closing-content p,:root[data-theme="dark"] .closing-note { color:#cee0c7; }
:root[data-theme="dark"] .closing-section .button-cream { color:#173729; background:#d8e8c6; }
:root[data-theme="dark"] .site-footer { background:#111f17; }
:root[data-theme="dark"] .auth-page { --land-ink:#f1f5eb; --land-green:#b9e3a4; }

/* Responsive components */
@media (max-width:1024px) { .sidebar { width:242px; } .topbar { padding:0 17px; } .page-pad { padding:22px; } }
@media (max-width:760px) { .auth-shell { grid-template-columns:1fr; }.auth-art { display:none; }.auth-mobile-brand { display:inline-flex; position:absolute; top:24px; left:22px; }.auth-form-side { min-height:100dvh; padding:105px 22px 35px; }.auth-form-side > .ui-controls { top:24px; right:22px; }.auth-back { margin-bottom:33px; }.page-pad { padding:16px; }.topbar { height:60px; padding:0 12px; }.topbar-clock,#tb-date { display:none; }.topbar-right { gap:5px; } }
@media (max-width:480px) { .ui-control { min-width:32px; height:32px; padding:0 6px; }.page-title { font-size:20px; }.stats-row .card { min-width:0; }.auth-form-wrap h1 { font-size:32px; }.auth-form-intro { font-size:12px; } }
@media (prefers-reduced-motion:reduce) { .app-shell *, .auth-page *, .ui-control { animation-duration:.01ms!important; transition-duration:.01ms!important; } }

/* Owner administration */
.admin-body { min-height:100vh; height:auto; overflow:auto; background:var(--bg); color:var(--t1); font-family:var(--ff); }
.admin-body .logo-mark { display:grid; place-items:center; flex:0 0 auto; font-weight:800; }
.admin-body #L { background:var(--bg); }
.admin-body #L > div { padding:30px; border:1px solid var(--bd); border-radius:14px; background:var(--bg1); box-shadow:0 18px 45px rgba(20,42,27,.08); }
.admin-body .aw { padding:34px 24px 64px; }
.admin-body .tb { gap:7px; padding-bottom:4px; }
.admin-body .tb > div { padding:10px 15px; border-color:var(--bd1); background:var(--bg1); color:var(--t2); }
.admin-body .tb > .on { background:var(--em9); color:var(--em); border-color:var(--em3); }
.admin-body .sg { gap:13px; }.admin-body .sc { border-color:var(--bd); background:var(--bg1); border-radius:11px; }
.admin-body .sl { color:var(--t2); }.admin-body .sv { color:var(--t); }
.admin-body #admin-login-controls { position:fixed; top:22px; right:22px; z-index:10; }
.admin-body #admin-ui-controls .ui-controls { margin:0 8px; }
.admin-body .table-scroll { max-width:100%; overflow-x:auto; }
.admin-body #ct > div[style*="grid-template-columns:1fr 1fr"] { gap:14px; }
@media (max-width:700px) { .admin-body .aw { padding:24px 14px 45px; }.admin-body #L > div { padding:23px; }.admin-body #admin-login-controls { top:14px; right:14px; }.admin-body .sg { grid-template-columns:repeat(2,minmax(0,1fr)); }.admin-body .tb { flex-wrap:nowrap; }.admin-body .tb > div { flex:0 0 auto; } }
@media (max-width:600px) { .admin-body #ct > div[style*="grid-template-columns:1fr 1fr"] { grid-template-columns:1fr!important; } }
@media (max-width:420px) { .admin-body .sg { grid-template-columns:1fr 1fr; }.admin-body .sc { padding:12px; }.admin-body .sv { font-size:17px; } }