/* =========================================================
   Cafee POS System — iOS "Liquid Glass" theme
   Loaded after app.css. System By Harees | 0773 207 160
   ========================================================= */
@font-face{font-family:"InterPOS";src:url(../vendor/fonts/inter-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"InterPOS";src:url(../vendor/fonts/inter-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"InterPOS";src:url(../vendor/fonts/inter-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"InterPOS";src:url(../vendor/fonts/inter-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"InterPOS";src:url(../vendor/fonts/inter-latin-800-normal.woff2) format("woff2");font-weight:800;font-display:swap}

:root{
  /* iOS system colours (light) */
  --ios-blue:#007AFF; --ios-green:#34C759; --ios-red:#FF3B30; --ios-orange:#FF9500; --ios-yellow:#FFCC00; --ios-teal:#30B0C7; --ios-indigo:#5856D6; --ios-pink:#FF2D55;
  --ios-label:#1C1C1E; --ios-label2:rgba(60,60,67,.62); --ios-label3:rgba(60,60,67,.32);
  --ios-sep:rgba(60,60,67,.14); --ios-fill:rgba(120,120,128,.14); --ios-fill2:rgba(120,120,128,.08);
  --glass:rgba(255,255,255,.62); --glass-strong:rgba(255,255,255,.80); --glass-soft:rgba(255,255,255,.42);
  --glass-brd:rgba(255,255,255,.75); --glass-hi:inset 0 1px 0 rgba(255,255,255,.85), inset 0 -1px 0 rgba(255,255,255,.25);
  --glass-shadow:0 1px 1px rgba(0,0,0,.04), 0 8px 24px rgba(17,24,39,.08);
  --glass-shadow-lg:0 20px 50px rgba(17,24,39,.18), 0 2px 6px rgba(17,24,39,.06);
  --blur:saturate(180%) blur(22px);
  --r-xl:26px; --r-lg:20px; --r-md:14px; --r-sm:10px;
  --spring:cubic-bezier(.34,1.56,.64,1);

  /* remap the existing theme tokens */
  --edge-primary:var(--ios-blue); --edge-blue:#0062CC; --edge-navy:#0B1B33;
  --edge-grad:linear-gradient(180deg,#3D9BFF 0%,#007AFF 100%);
  --edge-grad-soft:linear-gradient(135deg,rgba(0,122,255,.10),rgba(48,176,199,.10));
  --bg:#EEF1F7; --surface:var(--glass); --surface-2:var(--ios-fill2); --border:var(--ios-sep); --grid:rgba(60,60,67,.10);
  --text:var(--ios-label); --muted:var(--ios-label2);
  --radius:var(--r-lg); --shadow:var(--glass-shadow); --shadow-lg:var(--glass-shadow-lg);
  --bs-body-font-family:"SF Pro Text","SF Pro Display",-apple-system,BlinkMacSystemFont,"InterPOS","Segoe UI Variable","Segoe UI",system-ui,sans-serif;
  --bs-primary:#007AFF; --bs-primary-rgb:0,122,255; --bs-success-rgb:52,199,89; --bs-danger-rgb:255,59,48; --bs-warning-rgb:255,149,0; --bs-info-rgb:48,176,199;
  --bs-link-color:#007AFF; --bs-link-hover-color:#0062CC; --bs-link-color-rgb:0,122,255;
  --bs-body-color:var(--ios-label); --bs-border-color:var(--ios-sep); --bs-border-radius:var(--r-md);
  --bs-body-bg:#EEF1F7;
}
[data-bs-theme="dark"]{
  --ios-blue:#0A84FF; --ios-green:#30D158; --ios-red:#FF453A; --ios-orange:#FF9F0A; --ios-yellow:#FFD60A; --ios-teal:#40C8E0; --ios-indigo:#5E5CE6; --ios-pink:#FF375F;
  --ios-label:#F5F5F7; --ios-label2:rgba(235,235,245,.62); --ios-label3:rgba(235,235,245,.30);
  --ios-sep:rgba(255,255,255,.10); --ios-fill:rgba(120,120,128,.30); --ios-fill2:rgba(120,120,128,.16);
  --glass:rgba(30,30,34,.58); --glass-strong:rgba(36,36,40,.82); --glass-soft:rgba(44,44,48,.40);
  --glass-brd:rgba(255,255,255,.12); --glass-hi:inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(255,255,255,.03);
  --glass-shadow:0 1px 1px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.35);
  --glass-shadow-lg:0 24px 60px rgba(0,0,0,.55);
  --edge-grad:linear-gradient(180deg,#3A9CFF 0%,#0A84FF 100%);
  --edge-grad-soft:linear-gradient(135deg,rgba(10,132,255,.16),rgba(64,200,224,.12));
  --bg:#05070C; --surface:var(--glass); --surface-2:var(--ios-fill2); --border:var(--ios-sep); --grid:rgba(255,255,255,.07);
  --text:var(--ios-label); --muted:var(--ios-label2);
  --bs-primary:#0A84FF; --bs-primary-rgb:10,132,255; --bs-success-rgb:48,209,88; --bs-danger-rgb:255,69,58; --bs-warning-rgb:255,159,10; --bs-info-rgb:64,200,224;
  --bs-link-color:#409CFF; --bs-link-hover-color:#70B4FF; --bs-link-color-rgb:64,156,255;
  --bs-body-color:var(--ios-label); --bs-body-bg:#05070C; --bs-border-color:var(--ios-sep);
  --bs-secondary-bg:rgba(120,120,128,.24); --bs-tertiary-bg:rgba(120,120,128,.14);
}

/* ---------- wallpaper (makes the glass visible) ---------- */
html,body{background:var(--bg)}
body{font-family:var(--bs-body-font-family);letter-spacing:-.006em;color:var(--ios-label);
  background:
    radial-gradient(900px 600px at 8% -5%, rgba(0,122,255,.20), transparent 60%),
    radial-gradient(800px 600px at 105% 10%, rgba(48,176,199,.22), transparent 60%),
    radial-gradient(900px 700px at 60% 110%, rgba(88,86,214,.14), transparent 60%),
    var(--bg) fixed;}
[data-bs-theme="dark"] body{
  background:
    radial-gradient(900px 600px at 8% -5%, rgba(10,132,255,.28), transparent 60%),
    radial-gradient(800px 600px at 105% 15%, rgba(64,200,224,.18), transparent 60%),
    radial-gradient(900px 700px at 55% 115%, rgba(94,92,230,.22), transparent 60%),
    #05070C fixed;}
h1,h2,h3,h4,h5,h6,.page-title,.brand-name{font-family:"SF Pro Display",-apple-system,BlinkMacSystemFont,"InterPOS","Segoe UI Variable",system-ui,sans-serif;letter-spacing:-.02em}
.text-muted,.form-text,.small.text-muted{color:var(--ios-label2)!important}
::selection{background:rgba(0,122,255,.25)}

/* ---------- glass material ---------- */
.card,.card-fluent,.kpi,.ticket,.tbl,.prod,.modal-content,.dropdown-menu,.toast,.list-group,.login-card,.pos-right,.pos-top,.cat-bar,.app-footer,.topbar,.sidebar,.screen-map{
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.card,.card-fluent,.kpi,.ticket,.tbl,.prod,.list-group{
  background:var(--glass)!important;border:1px solid var(--glass-brd)!important;box-shadow:var(--glass-hi),var(--glass-shadow)!important;border-radius:var(--r-lg)!important;color:var(--ios-label)}
.card{overflow:hidden}
.card-header{background:transparent!important;border-bottom:1px solid var(--ios-sep)!important;font-weight:650;font-size:1rem;padding:.95rem 1.1rem;letter-spacing:-.01em}
.card-footer{background:transparent!important;border-top:1px solid var(--ios-sep)!important}
.card-body{padding:1.1rem}

/* ---------- sidebar: floating glass panel ---------- */
@media (min-width:992px){
  .sidebar{inset:10px auto 10px 10px!important;border-radius:var(--r-xl);height:auto}
  .main{margin-left:calc(var(--sidebar-w) + 20px)!important}
}
.sidebar,.sidebar.offcanvas-lg,[data-bs-theme="dark"] .sidebar,[data-bs-theme="dark"] .sidebar.offcanvas-lg{
  background:var(--glass-strong)!important;border:1px solid var(--glass-brd)!important;box-shadow:var(--glass-hi),var(--glass-shadow-lg)!important;color:var(--ios-label)}
.sidebar .brand{border-bottom:1px solid var(--ios-sep);padding:1.1rem 1rem}
.sidebar .brand img{border-radius:11px;box-shadow:0 4px 12px rgba(0,122,255,.3)}
.brand-name{color:var(--ios-label)!important;font-weight:700}
.brand-sub{color:var(--ios-label2)!important;letter-spacing:.02em;text-transform:none;font-size:.75rem}
.sidebar .btn-close-white{filter:none}
[data-bs-theme="dark"] .sidebar .btn-close-white{filter:invert(1)}
.nav-group{color:var(--ios-label2)!important;text-transform:none!important;letter-spacing:0!important;font-size:.78rem!important;font-weight:600;margin:1rem .75rem .3rem!important}
.side-nav a{color:var(--ios-label)!important;border-radius:12px!important;padding:.55rem .75rem!important;font-weight:500;transition:background .2s,transform .2s var(--spring)}
.side-nav a i{color:var(--ios-blue);opacity:1!important;font-size:1.08rem}
.side-nav a:hover{background:var(--ios-fill2)!important}
.side-nav a:active{transform:scale(.97)}
.side-nav a.active{background:var(--ios-blue)!important;color:#fff!important;font-weight:600;box-shadow:0 6px 16px rgba(0,122,255,.35)}
.side-nav a.active i{color:#fff}
.side-nav a.active::before{display:none!important}

/* ---------- top bar ---------- */
.topbar{background:var(--glass)!important;border:1px solid var(--glass-brd)!important;box-shadow:var(--glass-hi),var(--glass-shadow)!important;margin:10px 10px 0;border-radius:var(--r-lg);min-height:56px;top:10px}
.topbar::after{display:none}
.page-title{font-size:1.3rem!important;font-weight:750}
.btn-icon{color:var(--ios-blue)!important}
.theme-toggle{background:var(--ios-fill2)!important;color:var(--ios-blue)!important;border:0}
.theme-toggle:hover{background:var(--ios-fill)!important}
.btn-user{background:var(--ios-fill2)!important;border:0!important;color:var(--ios-label)!important;border-radius:999px!important}
.avatar{background:linear-gradient(180deg,#5AA9FF,#007AFF)!important;box-shadow:0 2px 6px rgba(0,122,255,.35)}
.clock{color:var(--ios-label2)!important;font-weight:500}
.app-footer{background:var(--glass)!important;border:1px solid var(--glass-brd)!important;border-radius:var(--r-lg);margin:0 10px 10px;color:var(--ios-label2)}
.content{padding:1.1rem 10px 1.1rem!important}
@media (min-width:576px){.content{padding:1.25rem 10px!important}}

/* ---------- buttons: capsules with spring press ---------- */
.btn{border-radius:999px!important;font-weight:600;letter-spacing:-.01em;padding:.5rem 1.05rem;border-width:0;transition:transform .25s var(--spring),filter .15s,background .2s,box-shadow .2s;-webkit-tap-highlight-color:transparent}
.btn:active,.btn.pressed{transform:scale(.95)}
.btn-sm{padding:.33rem .8rem;font-size:.84rem}
.btn-lg{padding:.75rem 1.4rem;font-size:1.05rem}
.btn-edge,.btn-primary{background:var(--edge-grad)!important;color:#fff!important;border:0!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 6px 16px rgba(0,122,255,.32)!important}
.btn-edge:hover,.btn-primary:hover{filter:brightness(1.06)}
.btn-success{background:linear-gradient(180deg,#4ADE80,var(--ios-green))!important;border:0!important;color:#fff!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 6px 14px rgba(52,199,89,.3)}
.btn-danger{background:linear-gradient(180deg,#FF6B61,var(--ios-red))!important;border:0!important;color:#fff!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 6px 14px rgba(255,59,48,.28)}
.btn-warning{background:linear-gradient(180deg,#FFB340,var(--ios-orange))!important;border:0!important;color:#fff!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 6px 14px rgba(255,149,0,.28)}
.btn-secondary{background:var(--ios-fill)!important;color:var(--ios-label)!important;border:0!important}
/* tinted (secondary) buttons — iOS "gray / tinted" style */
.btn-light,.btn-light.border,.btn-outline-secondary,.btn-outline-light,[data-bs-theme="dark"] .btn-light,[data-bs-theme="dark"] .btn-light.border{
  background:var(--glass-soft)!important;color:var(--ios-label)!important;border:1px solid var(--glass-brd)!important;box-shadow:var(--glass-hi)!important;-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.btn-light:hover,.btn-outline-secondary:hover,.btn-outline-light:hover{background:var(--glass-strong)!important}
.btn-outline-primary,[data-bs-theme="dark"] .btn-outline-primary{background:rgba(0,122,255,.12)!important;color:var(--ios-blue)!important;border:0!important;box-shadow:none!important}
.btn-outline-primary:hover,.btn-outline-primary.active{background:rgba(0,122,255,.2)!important;color:var(--ios-blue)!important}
.btn-outline-danger{background:rgba(255,59,48,.12)!important;color:var(--ios-red)!important;border:0!important}
.btn-outline-danger:hover{background:rgba(255,59,48,.2)!important;color:var(--ios-red)!important}
.btn-outline-success{background:rgba(52,199,89,.14)!important;color:var(--ios-green)!important;border:0!important}
.btn-outline-warning{background:rgba(255,149,0,.14)!important;color:var(--ios-orange)!important;border:0!important}
.btn-outline-info{background:rgba(48,176,199,.14)!important;color:var(--ios-teal)!important;border:0!important}
.btn:disabled,.btn.disabled{opacity:.45}
.btn-close{border-radius:50%;background-color:var(--ios-fill);background-size:.6em;width:1.6em;height:1.6em;opacity:.8;padding:0}
[data-bs-theme="dark"] .btn-close{filter:invert(1) grayscale(1)}
.text-danger{color:var(--ios-red)!important}.text-success{color:var(--ios-green)!important}.text-warning{color:var(--ios-orange)!important}.text-primary{color:var(--ios-blue)!important}

/* ---------- segmented controls (btn-group with an active state) ---------- */
.btn-group.seg{background:var(--ios-fill);padding:3px;border-radius:12px!important;gap:2px;box-shadow:none;-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.btn-group.seg>.btn,.btn-group.seg>.btn-check+.btn{border-radius:9px!important;background:transparent!important;color:var(--ios-label)!important;border:0!important;box-shadow:none!important;font-weight:600;padding:.42rem .9rem;margin:0!important}
.btn-group.seg>.btn.active,.btn-group.seg>.btn-check:checked+.btn{background:var(--glass-strong)!important;color:var(--ios-label)!important;box-shadow:0 3px 8px rgba(0,0,0,.12),0 0 0 .5px rgba(0,0,0,.04)!important}
[data-bs-theme="dark"] .btn-group.seg>.btn.active,[data-bs-theme="dark"] .btn-group.seg>.btn-check:checked+.btn{background:rgba(99,99,102,.75)!important;color:#fff!important}
.otype .btn.active{background:var(--ios-blue)!important;color:#fff!important;box-shadow:0 4px 12px rgba(0,122,255,.35)!important}
.btn-group:not(.seg)>.btn:not(:last-child){border-top-right-radius:0!important;border-bottom-right-radius:0!important}
.btn-group:not(.seg)>.btn:not(:first-child){border-top-left-radius:0!important;border-bottom-left-radius:0!important}

/* ---------- form controls ---------- */
.form-control,.form-select,.input-group-text,[data-bs-theme="dark"] .form-control,[data-bs-theme="dark"] .form-select,[data-bs-theme="dark"] .input-group-text{
  background-color:var(--ios-fill2)!important;border:1px solid transparent!important;border-radius:12px!important;color:var(--ios-label)!important;min-height:42px;font-weight:500}
.form-control::placeholder{color:var(--ios-label3)!important}
.form-control:focus,.form-select:focus,[data-bs-theme="dark"] .form-control:focus,[data-bs-theme="dark"] .form-select:focus{background-color:var(--glass-strong)!important;border-color:var(--ios-blue)!important;box-shadow:0 0 0 4px rgba(0,122,255,.18)!important}
.form-control-sm,.form-select-sm{min-height:34px;border-radius:10px!important}
.form-control-lg{min-height:52px;border-radius:14px!important}
.input-group>.form-control,.input-group>.form-select{border-radius:12px!important}
.input-group>:not(:first-child){margin-left:4px!important}
.input-group-text{color:var(--ios-label2)!important}
.form-label{font-weight:600;font-size:.86rem;color:var(--ios-label2)}
.form-control-color{padding:.3rem!important}
.form-floating>label{color:var(--ios-label2)!important}
.form-floating>.form-control{min-height:56px}
/* iOS toggle switch */
.form-switch{padding-left:3.6em;min-height:31px;display:flex;align-items:center}
.form-switch .form-check-input{width:51px!important;height:31px!important;margin-left:-3.6em!important;margin-top:0;border-radius:999px!important;border:0!important;background-color:var(--ios-fill)!important;
  background-image:radial-gradient(circle at 15.5px 50%,#fff 13.5px,transparent 14px)!important;background-position:0 0!important;background-size:100% 100%!important;transition:background-color .25s,background-image .25s;box-shadow:inset 0 0 0 1px rgba(0,0,0,.04)!important;cursor:pointer;flex-shrink:0}
.form-switch .form-check-input:checked{background-color:var(--ios-green)!important;background-image:radial-gradient(circle at 35.5px 50%,#fff 13.5px,transparent 14px)!important}
.form-switch .form-check-input:focus{box-shadow:0 0 0 4px rgba(52,199,89,.2)!important}
.form-switch .form-check-label{margin-left:.6rem;padding-top:1px}
.form-check:not(.form-switch) .form-check-input{width:1.3em;height:1.3em;border-radius:50%;border:1.5px solid var(--ios-label3);background-color:transparent}
.form-check:not(.form-switch) .form-check-input[type=checkbox]{border-radius:7px}
.form-check-input:checked{background-color:var(--ios-blue)!important;border-color:var(--ios-blue)!important}
.form-check-input[type=radio]:checked{background-color:var(--ios-blue)!important}
table .form-check-input{width:1.25em;height:1.25em}

/* ---------- tables: inset grouped lists ---------- */
.table{--bs-table-color:var(--ios-label);--bs-table-bg:transparent;--bs-table-hover-bg:var(--ios-fill2);--bs-table-hover-color:var(--ios-label);--bs-table-border-color:var(--ios-sep);margin:0}
.table>:not(caption)>*>*{padding:.7rem .85rem;border-bottom-color:var(--ios-sep)}
.table-sm>:not(caption)>*>*{padding:.48rem .7rem}
.table thead th,[data-bs-theme="dark"] .table thead th{background:transparent!important;color:var(--ios-label2)!important;text-transform:none!important;letter-spacing:0!important;font-size:.8rem!important;font-weight:600!important;border-bottom:1px solid var(--ios-sep)!important}
.table tbody tr:last-child td{border-bottom:0}
.table tfoot td{border-top:1px solid var(--ios-sep);border-bottom:0;background:var(--ios-fill2)}

/* ---------- badges / pills ---------- */
.badge{border-radius:999px!important;font-weight:650;padding:.38em .7em;letter-spacing:0}
.text-bg-primary{background:rgba(0,122,255,.16)!important;color:var(--ios-blue)!important}
.text-bg-success{background:rgba(52,199,89,.18)!important;color:#1E9E46!important}
.text-bg-danger{background:rgba(255,59,48,.16)!important;color:var(--ios-red)!important}
.text-bg-warning{background:rgba(255,149,0,.18)!important;color:#C26E00!important}
.text-bg-info{background:rgba(48,176,199,.18)!important;color:#1A8EA3!important}
.text-bg-secondary{background:var(--ios-fill)!important;color:var(--ios-label2)!important}
.text-bg-light,[data-bs-theme="dark"] .text-bg-light{background:var(--ios-fill)!important;color:var(--ios-label)!important;border:0!important}
[data-bs-theme="dark"] .text-bg-success{color:var(--ios-green)!important}
[data-bs-theme="dark"] .text-bg-warning{color:var(--ios-orange)!important}
[data-bs-theme="dark"] .text-bg-info{color:var(--ios-teal)!important}
.badge.rounded-pill.bg-danger{background:var(--ios-red)!important;color:#fff}

/* ---------- alerts: rounded tinted banners ---------- */
.alert{border:0;border-radius:var(--r-md);font-weight:500;-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.alert-success{background:rgba(52,199,89,.15);color:#1A7F3A}
.alert-danger{background:rgba(255,59,48,.14);color:#C4261D}
.alert-warning{background:rgba(255,149,0,.16);color:#9A5800}
.alert-info,.alert-primary{background:rgba(0,122,255,.12);color:#0057B8}
[data-bs-theme="dark"] .alert-success{color:#7EE2A0}[data-bs-theme="dark"] .alert-danger{color:#FF8A82}[data-bs-theme="dark"] .alert-warning{color:#FFC266}[data-bs-theme="dark"] .alert-info,[data-bs-theme="dark"] .alert-primary{color:#8CC4FF}

/* ---------- KPI tiles ---------- */
.kpi{padding:1.05rem 1.15rem!important}
.kpi .label{text-transform:none!important;letter-spacing:0!important;font-size:.84rem!important;color:var(--ios-label2)!important;font-weight:600}
.kpi .value{font-weight:750;letter-spacing:-.03em;font-size:1.65rem}
.kpi .icon{border-radius:12px!important;background:var(--edge-grad)!important;box-shadow:0 6px 14px rgba(0,122,255,.3)}
.kpi.hero,[data-bs-theme="dark"] .kpi.hero{background:linear-gradient(160deg,#4AA3FF 0%,#007AFF 55%,#5856D6 120%)!important;color:#fff!important;border:0!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 14px 30px rgba(0,122,255,.35)!important}
.kpi.hero .label{color:rgba(255,255,255,.85)!important}
.kpi.hero .icon{background:rgba(255,255,255,.22)!important;box-shadow:none}

/* ---------- modals: iOS sheets ---------- */
.modal-backdrop.show{opacity:1;background:rgba(0,0,0,.28);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.modal-content,[data-bs-theme="dark"] .modal-content{background:var(--glass-strong)!important;border:1px solid var(--glass-brd)!important;border-radius:var(--r-xl)!important;box-shadow:var(--glass-hi),var(--glass-shadow-lg)!important;color:var(--ios-label)}
.modal-header{border-bottom:1px solid var(--ios-sep)!important;padding:1rem 1.25rem}
.modal-title{font-weight:700;letter-spacing:-.02em}
.modal-footer{border-top:1px solid var(--ios-sep)!important;padding:.85rem 1.25rem}
.modal.fade .modal-dialog{transform:translateY(24px) scale(.97);transition:transform .35s var(--spring),opacity .2s}
.modal.show .modal-dialog{transform:none}
@media (max-width:575.98px){
  .modal-fullscreen-sm-down .modal-content{border-radius:var(--r-xl) var(--r-xl) 0 0!important;margin-top:12px}
  .modal-fullscreen-sm-down{padding-top:env(safe-area-inset-top)}
}

/* ---------- dropdowns / toasts ---------- */
.dropdown-menu,[data-bs-theme="dark"] .dropdown-menu{background:var(--glass-strong)!important;border:1px solid var(--glass-brd)!important;border-radius:16px!important;box-shadow:var(--glass-shadow-lg)!important;padding:6px}
.dropdown-item{border-radius:10px;padding:.5rem .75rem;font-weight:500}
.dropdown-item:hover{background:var(--ios-fill2)}
.toast-container.top-0.end-0{left:50%!important;right:auto!important;transform:translateX(-50%);padding-top:14px!important}
.toast{border-radius:18px!important;border:1px solid var(--glass-brd)!important;box-shadow:var(--glass-shadow-lg)!important;font-weight:600;min-width:280px;overflow:hidden;animation:iosDrop .45s var(--spring)}
.toast[class*="text-bg-"]{background:var(--glass-strong)!important;color:var(--ios-label)!important}
.toast[class*="text-bg-"] .toast-body{padding:.8rem 1rem .8rem 2.6rem;position:relative}
.toast[class*="text-bg-"] .toast-body::before{content:"";position:absolute;left:1rem;top:50%;width:18px;height:18px;margin-top:-9px;border-radius:50%;background:var(--ios-blue)}
.toast.text-bg-success .toast-body::before{background:var(--ios-green)}
.toast.text-bg-danger .toast-body::before{background:var(--ios-red)}
.toast.text-bg-warning .toast-body::before{background:var(--ios-orange)}
.toast.text-bg-info .toast-body::before{background:var(--ios-teal)}
.toast .btn-close-white{filter:none}
[data-bs-theme="dark"] .toast .btn-close-white{filter:invert(1)}
.toast-header{background:transparent!important;border-bottom:1px solid var(--ios-sep);color:var(--ios-label)}
@keyframes iosDrop{from{transform:translateY(-30px) scale(.95);opacity:0}to{transform:none;opacity:1}}

/* ---------- list groups ---------- */
.list-group{overflow:hidden}
.list-group-item,[data-bs-theme="dark"] .list-group-item{background:transparent!important;border-color:var(--ios-sep)!important;color:var(--ios-label)!important;padding:.75rem 1rem;font-weight:500}
.list-group-item-action:hover{background:var(--ios-fill2)!important}
.list-group-item.active{background:var(--ios-blue)!important;color:#fff!important;border-color:transparent!important;font-weight:600}

/* ---------- POS ---------- */
.pos{height:calc(100vh - 76px)!important;gap:10px;padding:10px}
.pos-left{gap:10px}
.pos-top,.cat-bar{background:var(--glass)!important;border:1px solid var(--glass-brd)!important;border-radius:var(--r-lg);box-shadow:var(--glass-hi),var(--glass-shadow)}
.cat-bar{padding:.55rem .6rem}
.cat-btn,[data-bs-theme="dark"] .cat-btn{background:var(--ios-fill2)!important;border:0!important;color:var(--ios-label)!important;border-radius:999px;font-weight:600;transition:transform .25s var(--spring),background .2s}
.cat-btn:active{transform:scale(.94)}
.cat-btn.active,[data-bs-theme="dark"] .cat-btn.active{background:var(--ios-blue)!important;color:#fff!important;box-shadow:0 6px 14px rgba(0,122,255,.35)}
.prod-grid{padding:2px 2px 1rem!important;gap:12px!important}
.prod{border-radius:22px!important;padding:.65rem!important;min-height:118px;transition:transform .3s var(--spring),box-shadow .2s!important}
.prod::before{display:none}
.prod::after{content:"";position:absolute;left:.75rem;bottom:.7rem;width:8px;height:8px;border-radius:50%;background:var(--c,#007AFF);opacity:.9}
.prod .p-price{padding-left:14px}
.prod:active{transform:scale(.94)!important}
.prod:hover{box-shadow:var(--glass-hi),var(--glass-shadow-lg)!important}
.prod .p-img{border-radius:15px!important;height:80px}
.prod .p-name{font-weight:650;letter-spacing:-.01em}
.prod .p-price,[data-bs-theme="dark"] .prod .p-price{color:var(--ios-blue)!important;font-weight:700}
.pos-right,[data-bs-theme="dark"] .pos-right{background:var(--glass)!important;border:1px solid var(--glass-brd)!important;border-radius:var(--r-xl);box-shadow:var(--glass-hi),var(--glass-shadow)!important;overflow:hidden}
.order-head{border-bottom:1px solid var(--ios-sep)!important}
.ci{border-radius:14px!important;border-bottom:0!important;margin:2px 0}
.ci.sel,[data-bs-theme="dark"] .ci.sel{background:rgba(0,122,255,.10)!important}
.qty-ctl,[data-bs-theme="dark"] .qty-ctl{border:0!important;background:var(--ios-fill2);border-radius:999px!important;padding:2px}
.qty-ctl button,[data-bs-theme="dark"] .qty-ctl button{background:var(--glass-strong)!important;color:var(--ios-blue)!important;border-radius:50%!important;width:28px!important;height:28px!important;box-shadow:0 1px 3px rgba(0,0,0,.1);transition:transform .2s var(--spring)}
.qty-ctl button:active{transform:scale(.85)}
.totals,[data-bs-theme="dark"] .totals{background:var(--ios-fill2)!important;border-color:var(--ios-sep)!important}
.totals .grand,[data-bs-theme="dark"] .totals .grand{color:var(--ios-label)!important;border-color:var(--ios-sep)!important;font-weight:800;letter-spacing:-.02em}
.pos-actions .btn{border-radius:16px!important;padding:.55rem .2rem!important}
.pay-btn{border-radius:18px!important;padding:.95rem!important;font-size:1.15rem!important}
.chip,[data-bs-theme="dark"] .chip{background:var(--ios-fill2)!important;border:0!important;color:var(--ios-label)!important;border-radius:999px;font-weight:600;transition:transform .25s var(--spring),background .2s}
.chip:active{transform:scale(.93)}
.chip.on,[data-bs-theme="dark"] .chip.on{background:var(--ios-blue)!important;color:#fff!important;box-shadow:0 5px 12px rgba(0,122,255,.32)}
.mod-group h6{text-transform:none!important;letter-spacing:0!important;font-size:.9rem!important;color:var(--ios-label2)!important}
.pay-methods .btn{border-radius:16px!important}
.paid-line,[data-bs-theme="dark"] .paid-line{background:var(--ios-fill2)!important;border:0!important;border-radius:12px}
.mobile-cart-bar{border-radius:20px!important}
@media (max-width:991.98px){
  .pos{padding:6px;height:calc(100vh - 70px)!important}
  .pos-right{inset:70px 6px 6px 6px!important;border-radius:var(--r-xl) var(--r-xl) var(--r-lg) var(--r-lg)!important}
}

/* ---------- tables layout & KDS ---------- */
.tbl{border-width:0!important;border-radius:24px!important;transition:transform .3s var(--spring)}
.tbl:active{transform:scale(.95)}
.tbl.available{box-shadow:inset 0 0 0 2px rgba(52,199,89,.55),var(--glass-shadow)!important}
.tbl.occupied{box-shadow:inset 0 0 0 2px rgba(255,59,48,.55),var(--glass-shadow)!important}
.tbl.reserved{box-shadow:inset 0 0 0 2px rgba(255,149,0,.6),var(--glass-shadow)!important}
.tbl.cleaning{box-shadow:inset 0 0 0 2px rgba(48,176,199,.6),var(--glass-shadow)!important}
.tbl.available,.tbl.occupied,.tbl.reserved,.tbl.cleaning,[data-bs-theme="dark"] .tbl.available,[data-bs-theme="dark"] .tbl.occupied,[data-bs-theme="dark"] .tbl.reserved,[data-bs-theme="dark"] .tbl.cleaning{background:var(--glass)!important}
.tbl .t-name{letter-spacing:-.03em}
.area-title{text-transform:none!important;letter-spacing:0!important;font-size:.9rem!important;color:var(--ios-label2)!important}
body.kds-mode,[data-bs-theme="dark"] body.kds-mode{background:radial-gradient(900px 600px at 10% 0%,rgba(10,132,255,.25),transparent 60%),radial-gradient(900px 700px at 90% 100%,rgba(94,92,230,.22),transparent 60%),#05070C fixed!important}
.ticket{border-radius:24px!important;border-top-width:0!important;overflow:hidden;position:relative;color:var(--ios-label)}
[data-bs-theme="light"] body.kds-mode .ticket,body.kds-mode .ticket{background:rgba(28,28,32,.66)!important;color:#F5F5F7}
body.kds-mode .ticket .text-muted{color:rgba(235,235,245,.6)!important}
.ticket::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--ios-blue)}
.ticket.st-preparing::before,.ticket.st-ready::before{background:var(--ios-orange)}
.ticket.st-completed::before{background:var(--ios-green)}
.ticket.late::before{background:var(--ios-red)}
.ticket .t-head,[data-bs-theme="dark"] .ticket .t-head{background:transparent!important;border-bottom:1px solid rgba(255,255,255,.08)!important;padding-top:.8rem}
.ticket li,[data-bs-theme="dark"] .ticket li{border-color:rgba(255,255,255,.08)!important}
.ticket .k-qty{color:#409CFF!important}
.ticket .k-mods{color:rgba(235,235,245,.7)!important}
.ticket .t-foot .btn{border-radius:14px!important}
.kds-head .btn-outline-light{background:rgba(120,120,128,.24)!important;color:#fff!important;border:0!important}
.kds-head .btn-group.seg{background:rgba(120,120,128,.24)}
.kds-head .btn-group.seg>.btn{color:#fff!important}
.kds-head .btn-group.seg>.btn.active{background:rgba(99,99,102,.85)!important;color:#fff!important}
.kds-head .btn-outline-danger{background:rgba(255,69,58,.18)!important;color:#FF6961!important}

/* ---------- login / customer display ---------- */
.login-page,[data-bs-theme="dark"] .login-page{background:
  radial-gradient(700px 500px at 15% 15%,rgba(0,122,255,.55),transparent 60%),
  radial-gradient(700px 500px at 85% 85%,rgba(88,86,214,.45),transparent 60%),
  radial-gradient(600px 400px at 80% 10%,rgba(48,176,199,.45),transparent 60%),
  linear-gradient(160deg,#0B1B33,#05070C)!important}
.login-card,[data-bs-theme="dark"] .login-card{background:rgba(255,255,255,.14)!important;border:1px solid rgba(255,255,255,.22)!important;border-radius:30px!important;color:#fff!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 30px 80px rgba(0,0,0,.45)!important}
.login-card .text-muted,.login-card h1{color:#fff!important}
.login-card .text-muted{opacity:.75}
.login-card .form-control{background:rgba(255,255,255,.16)!important;color:#fff!important}
.login-card .form-floating>label{color:rgba(255,255,255,.75)!important}
.login-card .form-floating>.form-control:focus~label,.login-card .form-floating>.form-control:not(:placeholder-shown)~label{color:rgba(255,255,255,.7)!important}
.login-card .form-floating>.form-control::placeholder{color:transparent!important}
.login-card .btn.position-absolute{color:#fff;background:transparent!important;box-shadow:none!important;border:0!important}
.login-card .logo{border-radius:18px;box-shadow:0 10px 30px rgba(0,122,255,.45)}
.cd,[data-bs-theme="dark"] .cd{background:transparent!important}
.cd-left{background:linear-gradient(160deg,#4AA3FF 0%,#007AFF 50%,#5856D6 130%)!important;border-radius:0 32px 32px 0}
.cd-right{background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.fs-hint{background:var(--glass-strong)!important;color:var(--ios-label)!important;border:1px solid var(--glass-brd);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}

/* ---------- misc ---------- */
.thumb{border-radius:12px!important}
.thumb-ph{border-radius:12px!important;background:var(--ios-fill2)!important;color:var(--ios-blue)!important}
.toolbar.card{padding:.6rem!important}
kbd{background:var(--ios-fill);color:var(--ios-label);border-radius:6px;box-shadow:inset 0 -1px 0 rgba(0,0,0,.15)}
.screen-box{border-radius:10px!important}
.progress{background:var(--ios-fill);border-radius:999px}
.progress-bar{border-radius:999px}
hr{border-color:var(--ios-sep);opacity:1}
.low{color:var(--ios-red)!important}
.spinner-border{border-width:.2em}
/* smooth tap feedback everywhere */
a,button,.btn,.chip,.prod,.tbl,.cat-btn{-webkit-tap-highlight-color:transparent}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media print{body{background:#fff!important}.card,.kpi{background:#fff!important;box-shadow:none!important;border:0!important;-webkit-backdrop-filter:none;backdrop-filter:none}}

/* ---------- polish ---------- */
.prod:has(.tag) .p-name{padding-right:3.6rem}
.prod .tag{font-size:.62rem!important;top:.55rem!important;right:.55rem!important}
.btn.text-danger,.pos-actions .btn.text-danger,[data-bs-theme="dark"] .btn.text-danger{color:var(--ios-red)!important}
.login-card .form-control:focus,[data-bs-theme="dark"] .login-card .form-control:focus{background:rgba(255,255,255,.22)!important;color:#fff!important}
.text-primary-emphasis{color:var(--ios-blue)!important}
.kds-head{gap:.5rem!important}
.kds-head .form-switch{min-height:31px}
@media (max-width:575.98px){
  .kpi .value{font-size:1.12rem!important;padding-right:2.4rem}
  .kpi .icon{width:32px!important;height:32px!important;font-size:.95rem!important}
  .page-title{font-size:1.1rem!important}
  .topbar{margin:6px 6px 0}
  .app-footer{margin:0 6px 6px}
}
@media (max-width:991.98px){
  .pos-right,[data-bs-theme="dark"] .pos-right{background:var(--glass-strong)!important;-webkit-backdrop-filter:saturate(180%) blur(40px);backdrop-filter:saturate(180%) blur(40px)}
}
@media (max-width:575.98px){ .kpi .value{white-space:nowrap;padding-right:0!important;font-size:1.05rem!important} }
@media (max-width:991.98px){
  .pos-right{background:rgba(242,242,247,.97)!important}
  [data-bs-theme="dark"] .pos-right{background:rgba(18,18,22,.97)!important}
}

/* ===== Company logo ===== */
.logo-preview{width:200px;height:96px;border-radius:16px;background:#fff;display:flex;align-items:center;justify-content:center;padding:10px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.logo-preview img{max-width:100%;max-height:100%;object-fit:contain}
.sidebar .brand img.brand-logo{width:auto;max-width:118px;height:40px;object-fit:contain;background:#fff;border-radius:10px;padding:4px 6px;box-shadow:0 4px 12px rgba(0,0,0,.25)}
.login-card .logo.logo-custom{width:auto;height:auto;max-width:240px;max-height:90px;object-fit:contain;background:#fff;border-radius:16px;padding:8px 14px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.cd-logo{background:#fff;border-radius:26px;padding:18px 28px;display:inline-block;box-shadow:0 14px 40px rgba(0,0,0,.3);margin-bottom:1.25rem}
.cd-logo img{max-width:min(420px,70vw);max-height:150px;object-fit:contain;display:block}

/* ===== Payment complete: Print / e-Bill ===== */
.bill-choice{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.bill-choice .btn{display:flex;flex-direction:column;align-items:center;gap:.35rem;padding:1rem .5rem;border-radius:18px;font-weight:600;border-width:2px}
.bill-choice .btn i{font-size:1.9rem}
.ebill-box{background:var(--ios-fill2,rgba(120,120,128,.12));border-radius:18px;padding:1rem}
.ebill-wait{background:rgba(0,122,255,.1);border-radius:14px;padding:.7rem .85rem;margin-top:.6rem}
/* customer display */
.eb-number{font-size:clamp(2.4rem,6vw,4.2rem);font-weight:800;letter-spacing:.06em;margin-top:.6rem;font-variant-numeric:tabular-nums}
.eb-confirm .eb-btn{min-width:220px;padding:1rem 1.6rem;font-size:1.35rem;border-radius:20px}
.eb-note{display:inline-block;background:rgba(52,199,89,.15);color:var(--bs-success-text-emphasis);border-radius:16px;padding:.6rem 1.1rem;font-size:1.15rem;font-weight:600}
.eb-note.warn{background:rgba(255,159,10,.16);color:var(--bs-warning-text-emphasis)}
.eb-modes{display:grid;gap:.5rem}
.eb-mode{display:flex;gap:.7rem;align-items:flex-start;padding:.75rem .9rem;border-radius:14px;background:var(--ios-fill2,rgba(120,120,128,.12));cursor:pointer;border:2px solid transparent}
.eb-mode:has(input:checked){border-color:var(--bs-primary);background:rgba(0,122,255,.1)}
.eb-mode input{margin-top:.25rem;accent-color:var(--bs-primary)}
.eb-mode small{display:block;color:var(--bs-secondary-color);margin-top:.15rem}
.ebill-setup{border-radius:14px;padding:.9rem 1rem;background:rgba(0,122,255,.07);border:1px solid rgba(0,122,255,.2)}
