/* =====================================================================
   Sifa shop POS · design layer
   Loaded after the vendor "Front" theme. Tokens first, shell second,
   then overrides of the theme's components so every Blade view inherits
   the new look without being rewritten.
   ===================================================================== */
:root{
  --sf-brand:#2457D6; --sf-brand-ink:#17398F; --sf-brand-soft:#E3EAFB; --sf-brand-hover:#1E49B8;
  --sf-accent:#D97A1C; --sf-accent-soft:#FBE9D6;
  --sf-bg:#F3F5F9; --sf-surface:#FFFFFF; --sf-surface-2:#F7F8FB; --sf-line:#E4E7EE; --sf-line-strong:#CBD1DC;
  --sf-ink:#161A22; --sf-ink-2:#4A5262; --sf-ink-3:#7A8294; --sf-ink-inv:#FFFFFF;
  --sf-good:#1E8E3E; --sf-good-soft:#E3F3E7; --sf-warn:#B7791F; --sf-warn-soft:#FBF0D9; --sf-bad:#C5221F; --sf-bad-soft:#FBE4E3; --sf-info:#2B6CB0; --sf-info-soft:#E1ECF9;
  --sf-s1:#2457D6; --sf-s2:#D97A1C; --sf-s3:#13866B;
  --sf-r:12px; --sf-r-sm:8px; --sf-shadow:0 1px 2px rgba(16,24,40,.06),0 8px 24px -12px rgba(16,24,40,.18);
  --sf-side:248px; --sf-side-mini:72px; --sf-top:60px;
}
html[data-theme="dark"]{
  --sf-brand:#5B86F5; --sf-brand-ink:#A9C0FF; --sf-brand-soft:#17264A; --sf-brand-hover:#7399FF;
  --sf-accent:#E8973C; --sf-accent-soft:#3A2A14;
  --sf-bg:#0F1218; --sf-surface:#171B23; --sf-surface-2:#1E232D; --sf-line:#2A303C; --sf-line-strong:#3B4352;
  --sf-ink:#ECEFF4; --sf-ink-2:#B4BBC8; --sf-ink-3:#828A99; --sf-ink-inv:#0F1218;
  --sf-good:#5CC27A; --sf-good-soft:#15301D; --sf-warn:#E3B351; --sf-warn-soft:#3A2E12; --sf-bad:#F0706C; --sf-bad-soft:#3F1A19; --sf-info:#7FB2EF; --sf-info-soft:#17283D;
  --sf-s1:#5B86F5; --sf-s2:#CF7A28; --sf-s3:#2FA883;
  --sf-shadow:0 1px 2px rgba(0,0,0,.5),0 8px 24px -12px rgba(0,0,0,.7);
}

/* ---------- base ---------- */
html{font-size:14px}
body{font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif!important;background:var(--sf-bg)!important;color:var(--sf-ink)!important;-webkit-font-smoothing:antialiased;line-height:1.5}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6,.card-header-title,.page-header-title,.modal-title{color:var(--sf-ink)!important;font-weight:700;letter-spacing:-.01em}
a{color:var(--sf-brand)}
a:hover{color:var(--sf-brand-hover)}
.sf-num{font-variant-numeric:tabular-nums}

/* ---------- shell ---------- */
.sf-shell{display:grid;grid-template-columns:var(--sf-side) 1fr;min-height:100vh}
body.sf-mini .sf-shell{grid-template-columns:var(--sf-side-mini) 1fr}
body.sf-fullscreen .sf-shell{grid-template-columns:1fr}
/* Sell screen: sidebar is a slide-out drawer (menu button), so the till keeps the full width */
body.sf-fullscreen .sf-side{position:fixed;left:0;top:0;bottom:0;width:var(--sf-side);transform:translateX(-100%);transition:transform .2s;box-shadow:var(--sf-shadow);z-index:1046}
body.sf-fullscreen.sf-drawer .sf-side{transform:none}
body.sf-fullscreen.sf-mini .sf-side .sf-logo span,body.sf-fullscreen.sf-mini .sf-side .sf-grp,body.sf-fullscreen.sf-mini .sf-side .sf-label,body.sf-fullscreen.sf-mini .sf-side .sf-caret,body.sf-fullscreen.sf-mini .sf-side .sf-kbd,body.sf-fullscreen.sf-mini .sf-side .sf-badge,body.sf-fullscreen.sf-mini .sf-side .sf-user div{display:revert!important}
body.sf-fullscreen.sf-mini .sf-side .sf-sub{display:none!important}
body.sf-fullscreen.sf-mini .sf-side .sf-item.open .sf-sub{display:block!important}
body.sf-fullscreen.sf-mini .sf-nav .sf-item>a,body.sf-fullscreen.sf-mini .sf-nav .sf-item>button{justify-content:flex-start;padding:0 10px}
body.sf-fullscreen.sf-mini .sf-logo{justify-content:flex-start;padding:0 16px}
.sf-back{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px 0 8px;border-radius:var(--sf-r-sm);color:var(--sf-ink-2);font-weight:600;font-size:13px;text-decoration:none;border:1px solid var(--sf-line)}
.sf-back:hover{background:var(--sf-surface-2);color:var(--sf-ink);text-decoration:none}
.sf-back i{font-size:14px;line-height:1}
@media (max-width:720px){.sf-back span{display:none}.sf-back{padding:0 10px}}
.sf-side{position:sticky;top:0;height:100vh;background:var(--sf-surface);border-right:1px solid var(--sf-line);display:flex;flex-direction:column;z-index:1030;overflow:hidden}
.sf-logo{display:flex;align-items:center;gap:10px;height:var(--sf-top);padding:0 16px;border-bottom:1px solid var(--sf-line);font-weight:800;font-size:15px;color:var(--sf-ink);white-space:nowrap;text-decoration:none}
.sf-logo:hover{color:var(--sf-ink);text-decoration:none}
.sf-logo .sf-mark{width:32px;height:32px;border-radius:9px;background:var(--sf-brand);color:#fff;display:grid;place-items:center;font-weight:800;flex:none;overflow:hidden}
.sf-logo .sf-mark img{width:100%;height:100%;object-fit:cover}
.sf-nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:10px;scrollbar-width:thin}
.sf-nav .sf-grp{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--sf-ink-3);padding:14px 10px 6px;font-weight:600;white-space:nowrap}
.sf-nav .sf-item>a,.sf-nav .sf-item>button{display:flex;align-items:center;gap:12px;width:100%;height:40px;padding:0 10px;border:0;background:none;border-radius:var(--sf-r-sm);color:var(--sf-ink-2);font-weight:500;white-space:nowrap;text-decoration:none;text-align:left;cursor:pointer}
.sf-nav .sf-item>a:hover,.sf-nav .sf-item>button:hover{background:var(--sf-surface-2);color:var(--sf-ink)}
.sf-nav .sf-item.active>a,.sf-nav .sf-item.active>button{background:var(--sf-brand-soft);color:var(--sf-brand-ink);font-weight:600}
.sf-nav .sf-item i{font-size:17px;line-height:1;width:20px;text-align:center;flex:none}
.sf-nav .sf-item .sf-label{flex:1;overflow:hidden;text-overflow:ellipsis}
.sf-nav .sf-item .sf-caret{font-size:12px;transition:transform .15s;color:var(--sf-ink-3)}
.sf-nav .sf-item.open .sf-caret{transform:rotate(180deg)}
.sf-nav .sf-sub{display:none;list-style:none;margin:2px 0 4px;padding:0 0 0 42px}
.sf-nav .sf-item.open .sf-sub{display:block}
.sf-nav .sf-sub a{display:block;padding:7px 10px;border-radius:6px;color:var(--sf-ink-2);font-size:13px;text-decoration:none;white-space:nowrap}
.sf-nav .sf-sub a:hover{background:var(--sf-surface-2);color:var(--sf-ink)}
.sf-nav .sf-sub li.active a{color:var(--sf-brand-ink);font-weight:600;background:var(--sf-brand-soft)}
.sf-nav .sf-kbd{margin-left:auto}
.sf-nav .sf-badge{margin-left:auto;background:var(--sf-warn-soft);color:var(--sf-warn);font-size:11px;font-weight:700;padding:2px 7px;border-radius:999px}
.sf-side-foot{border-top:1px solid var(--sf-line);padding:10px}
.sf-user{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:var(--sf-r-sm);color:var(--sf-ink);text-decoration:none}
.sf-user:hover{background:var(--sf-surface-2);text-decoration:none;color:var(--sf-ink)}
.sf-avatar{width:32px;height:32px;border-radius:50%;background:var(--sf-accent-soft);color:var(--sf-accent);display:grid;place-items:center;font-weight:700;font-size:12px;flex:none;overflow:hidden}
.sf-avatar img{width:100%;height:100%;object-fit:cover}
.sf-user small{display:block;color:var(--sf-ink-3);font-size:12px}
body.sf-mini .sf-logo span,body.sf-mini .sf-grp,body.sf-mini .sf-label,body.sf-mini .sf-caret,body.sf-mini .sf-kbd,body.sf-mini .sf-badge,body.sf-mini .sf-sub,body.sf-mini .sf-user div{display:none!important}
body.sf-mini .sf-nav .sf-item>a,body.sf-mini .sf-nav .sf-item>button{justify-content:center;padding:0}
body.sf-mini .sf-logo{justify-content:center;padding:0}
.sf-shell>.sf-body{min-width:0;display:flex;flex-direction:column;min-height:100vh}
.sf-top{position:sticky;top:0;z-index:1020;height:var(--sf-top);display:flex;align-items:center;gap:10px;padding:0 20px;background:var(--sf-surface);border-bottom:1px solid var(--sf-line)}
.sf-top .sf-title{font-size:16px;font-weight:700;margin:0;color:var(--sf-ink)}
.sf-top .sf-sub{font-size:12px;color:var(--sf-ink-3);margin-left:4px}
.sf-top .sf-sp{flex:1}
.sf-ibtn{width:40px;height:40px;border-radius:var(--sf-r-sm);display:inline-grid;place-items:center;color:var(--sf-ink-2);border:0;background:none;font-size:18px;line-height:1;cursor:pointer}
.sf-ibtn:hover{background:var(--sf-surface-2);color:var(--sf-ink)}
.sf-ibtn i{line-height:1}
.sf-pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;line-height:1.5}
.sf-pill.good{background:var(--sf-good-soft);color:var(--sf-good)} .sf-pill.warn{background:var(--sf-warn-soft);color:var(--sf-warn)} .sf-pill.bad{background:var(--sf-bad-soft);color:var(--sf-bad)} .sf-pill.info{background:var(--sf-info-soft);color:var(--sf-info)} .sf-pill.n{background:var(--sf-surface-2);color:var(--sf-ink-2)} .sf-pill.brand{background:var(--sf-brand-soft);color:var(--sf-brand-ink)}
.sf-pill i.dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.sf-kbd{font-size:11px;border:1px solid var(--sf-line-strong);border-bottom-width:2px;border-radius:5px;padding:0 5px;color:var(--sf-ink-3);background:var(--sf-surface);font-weight:600;line-height:1.6}
.sf-menu{position:relative}
.sf-menu .sf-dd{position:absolute;right:0;top:calc(100% + 6px);min-width:230px;background:var(--sf-surface);border:1px solid var(--sf-line);border-radius:var(--sf-r);box-shadow:var(--sf-shadow);padding:6px;display:none;z-index:1050}
.sf-menu.open .sf-dd{display:block}
.sf-dd a,.sf-dd button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:6px;color:var(--sf-ink);text-decoration:none;border:0;background:none;text-align:left;font:inherit;cursor:pointer}
.sf-dd a:hover,.sf-dd button:hover{background:var(--sf-surface-2);color:var(--sf-ink);text-decoration:none}
.sf-dd .sf-dd-hd{padding:8px 10px 10px;border-bottom:1px solid var(--sf-line);margin-bottom:6px}
.sf-dd .sf-dd-hd b{display:block} .sf-dd .sf-dd-hd span{font-size:12px;color:var(--sf-ink-3)}
.sf-overlay{position:fixed;inset:0;background:rgba(10,12,18,.45);z-index:1025;display:none}
body.sf-drawer .sf-overlay{display:block}
main.main{flex:1;padding:0!important}
main.main>.content{padding:22px 24px 40px!important;max-width:none!important}
@media (max-width: 991px){
  .sf-shell,body.sf-mini .sf-shell{grid-template-columns:1fr}
  .sf-side{position:fixed;left:0;top:0;bottom:0;width:var(--sf-side);transform:translateX(-100%);transition:transform .2s;box-shadow:var(--sf-shadow)}
  body.sf-drawer .sf-side{transform:none}
  body.sf-mini .sf-logo span,body.sf-mini .sf-grp,body.sf-mini .sf-label,body.sf-mini .sf-caret,body.sf-mini .sf-sub,body.sf-mini .sf-user div{display:revert!important}
  body.sf-mini .sf-nav .sf-item>a,body.sf-mini .sf-nav .sf-item>button{justify-content:flex-start;padding:0 10px}
  body.sf-mini .sf-logo{justify-content:flex-start;padding:0 16px}
  main.main>.content{padding:16px!important}
  .sf-top{padding:0 12px}
}

/* ---------- theme overrides: colour ---------- */
.text-primary,.text-primary:hover{color:var(--sf-brand)!important}
.bg-primary,.badge-primary{background-color:var(--sf-brand)!important}
.border-primary{border-color:var(--sf-brand)!important}
.btn-primary,.btn-primary:not(:disabled):not(.disabled):active{background-color:var(--sf-brand)!important;border-color:var(--sf-brand)!important;color:#fff!important}
.btn-primary:hover,.btn-primary:focus{background-color:var(--sf-brand-hover)!important;border-color:var(--sf-brand-hover)!important;box-shadow:none!important}
.btn-soft-primary,.badge-soft-primary{background-color:var(--sf-brand-soft)!important;color:var(--sf-brand-ink)!important;border-color:transparent}
.btn-soft-primary:hover{background-color:var(--sf-brand)!important;color:#fff!important}
.btn-outline-primary{border-color:var(--sf-brand)!important;color:var(--sf-brand)!important}
.btn-outline-primary:hover{background:var(--sf-brand)!important;color:#fff!important}
.btn-soft-secondary,.badge-soft-secondary{background-color:var(--sf-surface-2)!important;color:var(--sf-ink-2)!important}
.btn-soft-danger,.badge-soft-danger{background-color:var(--sf-bad-soft)!important;color:var(--sf-bad)!important}
.btn-soft-success,.badge-soft-success{background-color:var(--sf-good-soft)!important;color:var(--sf-good)!important}
.btn-soft-warning,.badge-soft-warning{background-color:var(--sf-warn-soft)!important;color:var(--sf-warn)!important}
.btn-soft-info,.badge-soft-info{background-color:var(--sf-info-soft)!important;color:var(--sf-info)!important}
.btn-soft-dark{background-color:var(--sf-surface-2)!important;color:var(--sf-ink)!important}
.btn-danger{background:var(--sf-bad)!important;border-color:var(--sf-bad)!important}
.btn-success{background:var(--sf-good)!important;border-color:var(--sf-good)!important}
.btn-white,.btn-light{background:var(--sf-surface)!important;border:1px solid var(--sf-line-strong)!important;color:var(--sf-ink)!important}
.text-dark{color:var(--sf-ink)!important} .text-muted,.text-secondary,.supplier-color{color:var(--sf-ink-3)!important} .text-body{color:var(--sf-ink-2)!important}
.custom-control-input:checked~.custom-control-label::before,.custom-checkbox .custom-control-input:checked~.custom-control-label::before{background-color:var(--sf-brand)!important;border-color:var(--sf-brand)!important}
.toggle-switch-input:checked+.toggle-switch-label{background-color:var(--sf-brand)!important;border-color:var(--sf-brand)!important}
.page-item.active .page-link{background:var(--sf-brand)!important;border-color:var(--sf-brand)!important;color:#fff!important}
.page-link{color:var(--sf-ink-2);border-color:var(--sf-line)!important;background:var(--sf-surface)!important;border-radius:6px!important;margin:0 2px}
.nav-tabs .nav-link.active,.nav-pills .nav-link.active{color:var(--sf-brand-ink)!important;background:var(--sf-brand-soft)!important;border-color:transparent!important}
.nav-tabs .nav-link{color:var(--sf-ink-2)}
.progress-bar{background-color:var(--sf-brand)!important}
.color-EC255A{color:var(--sf-accent)!important}

/* ---------- theme overrides: components ---------- */
.btn{border-radius:var(--sf-r-sm)!important;font-weight:600;box-shadow:none!important}
.btn:not(.btn-sm):not(.btn-xs):not(.btn-lg):not(.btn-icon){min-height:40px}
.btn-icon{border-radius:var(--sf-r-sm)!important}
.rounded-circle.btn,.btn.rounded-circle{border-radius:50%!important}
.card{border:1px solid var(--sf-line)!important;border-radius:var(--sf-r)!important;box-shadow:none!important;background:var(--sf-surface)!important}
.card-header{background:var(--sf-surface)!important;border-bottom:1px solid var(--sf-line)!important;border-radius:var(--sf-r) var(--sf-r) 0 0!important;padding:14px 18px}
.card-footer{background:var(--sf-surface-2)!important;border-top:1px solid var(--sf-line)!important}
.card-body{padding:18px}
.bg-white{background:var(--sf-surface)!important}
.page-header-title,.card-header-title{font-size:20px!important;font-weight:800!important}
.page-header-title .badge{font-size:12px;vertical-align:middle}
.table{color:var(--sf-ink)!important;margin-bottom:0}
.table thead th,.thead-light th{font-size:11.5px!important;text-transform:uppercase;letter-spacing:.05em;color:var(--sf-ink-3)!important;font-weight:600!important;background:var(--sf-surface-2)!important;border-top:0!important;border-bottom:1px solid var(--sf-line)!important;padding:11px 14px;white-space:nowrap}
.table td{padding:12px 14px;border-top:1px solid var(--sf-line)!important;vertical-align:middle}
.table-hover tbody tr:hover,.table tbody tr:hover{background:var(--sf-surface-2)!important;color:var(--sf-ink)}
.table .btn-sm,.table .btn-xs{min-height:32px}
.form-control,.custom-select,.input-group-text,.bootstrap-select .dropdown-toggle,.select2-container--default .select2-selection--single,.select2-container--default .select2-selection--multiple{background:var(--sf-surface)!important;border:1px solid var(--sf-line-strong)!important;border-radius:var(--sf-r-sm)!important;color:var(--sf-ink)!important;min-height:40px;box-shadow:none!important}
.form-control:focus,.custom-select:focus,.bootstrap-select .dropdown-toggle:focus{border-color:var(--sf-brand)!important;box-shadow:0 0 0 3px var(--sf-brand-soft)!important}
.form-control::placeholder{color:var(--sf-ink-3)}
.input-group-merge .form-control{border-left:0!important}
.input-group-merge .input-group-prepend .input-group-text{border-right:0!important;border-radius:var(--sf-r-sm) 0 0 var(--sf-r-sm)!important}
.input-label,label.form-label,.title-color{color:var(--sf-ink-2)!important;font-weight:600;font-size:12.5px}
.badge{border-radius:999px;font-weight:600;padding:.35em .7em}
.modal-content{border-radius:16px!important;border:1px solid var(--sf-line)!important;background:var(--sf-surface)!important;color:var(--sf-ink)!important;box-shadow:var(--sf-shadow)}
.modal-header{border-bottom:1px solid var(--sf-line)!important}
.modal-footer{border-top:1px solid var(--sf-line)!important}
.dropdown-menu{border:1px solid var(--sf-line)!important;border-radius:var(--sf-r)!important;box-shadow:var(--sf-shadow)!important;background:var(--sf-surface)!important;color:var(--sf-ink)}
.dropdown-item{color:var(--sf-ink)!important;border-radius:6px}
.dropdown-item:hover,.dropdown-item:focus{background:var(--sf-surface-2)!important;color:var(--sf-ink)!important}
.dropdown-divider{border-color:var(--sf-line)!important}
.offcanvas-filter,.offcanvas,.hs-unfold-content{background:var(--sf-surface)!important;color:var(--sf-ink)}
.alert{border-radius:var(--sf-r-sm)}
hr{border-color:var(--sf-line)!important}
.border,.border-top,.border-bottom,.border-left,.border-right{border-color:var(--sf-line)!important}
.bg-light,.bg-f2f2f2,.bg-f8f9fa,.bg-F8F9FC{background:var(--sf-surface-2)!important}
.toast,#toast-container>div{border-radius:var(--sf-r-sm)!important;box-shadow:var(--sf-shadow)!important;opacity:1!important}
.swal2-popup{border-radius:16px!important;background:var(--sf-surface)!important;color:var(--sf-ink)!important}
.swal2-styled.swal2-confirm{background:var(--sf-brand)!important;border-radius:var(--sf-r-sm)!important}
#loading{position:fixed;inset:0;background:rgba(255,255,255,.6);z-index:2000;display:grid;place-items:center}
#loading.d-none{display:none!important}
.direction-toggle{display:none!important}
.dashboard-software_version{display:none!important}
.footer{display:none}
::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-thumb{background:var(--sf-line-strong);border-radius:6px;border:2px solid var(--sf-bg)} ::-webkit-scrollbar-track{background:transparent}

/* ---------- dark mode fixes for vendor markup ---------- */
html[data-theme="dark"] .text-dark,html[data-theme="dark"] .text-body,html[data-theme="dark"] .card-text,html[data-theme="dark"] p,html[data-theme="dark"] label,html[data-theme="dark"] td,html[data-theme="dark"] .form-check-label{color:var(--sf-ink)}
html[data-theme="dark"] .bg-white,html[data-theme="dark"] .bg-light{background:var(--sf-surface)!important}
html[data-theme="dark"] .custom-select{background-image:none!important}
html[data-theme="dark"] img.svg,html[data-theme="dark"] svg.svg{filter:invert(.85)}
html[data-theme="dark"] #loading{background:rgba(15,18,24,.7)}
html[data-theme="dark"] .close,html[data-theme="dark"] .close:hover{color:var(--sf-ink)!important;text-shadow:none}
html[data-theme="dark"] .table thead th{background:var(--sf-surface-2)!important}
html[data-theme="dark"] .select2-dropdown,html[data-theme="dark"] .daterangepicker{background:var(--sf-surface)!important;border-color:var(--sf-line)!important;color:var(--sf-ink)}
html[data-theme="dark"] .form-control:disabled,html[data-theme="dark"] .form-control[readonly]{background:var(--sf-surface-2)!important}

/* =====================================================================
   Page patterns shared by rebuilt screens (list pages, forms, drawers)
   ===================================================================== */
.sf-page-hd{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.sf-page-hd h2{font-size:22px;font-weight:800;margin:0;letter-spacing:-.01em}
.sf-page-hd .sf-count{background:var(--sf-brand-soft);color:var(--sf-brand-ink);font-size:12px;font-weight:700;padding:2px 9px;border-radius:999px}
.sf-page-hd .sf-sub{color:var(--sf-ink-3);font-size:13px;width:100%}
.sf-page-hd .sf-actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.sf-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--sf-line)}
.sf-toolbar form{display:contents}
.sf-search{display:flex;align-items:center;gap:8px;height:40px;padding:0 12px;border:1px solid var(--sf-line-strong);border-radius:var(--sf-r-sm);background:var(--sf-surface);min-width:260px;flex:1;max-width:420px}
.sf-search:focus-within{border-color:var(--sf-brand);box-shadow:0 0 0 3px var(--sf-brand-soft)}
.sf-search i{color:var(--sf-ink-3);font-size:15px;line-height:1}
.sf-search input{border:0!important;outline:0;background:none!important;flex:1;min-height:0!important;padding:0!important;box-shadow:none!important}
.sf-chip{height:36px;padding:0 12px;border-radius:999px;border:1px solid var(--sf-line-strong);display:inline-flex;align-items:center;gap:6px;font-weight:500;background:var(--sf-surface);color:var(--sf-ink-2);text-decoration:none;white-space:nowrap;cursor:pointer;font-size:13px}
.sf-chip:hover{background:var(--sf-surface-2);color:var(--sf-ink);text-decoration:none}
.sf-chip.on{background:var(--sf-ink);color:var(--sf-ink-inv);border-color:var(--sf-ink)}
.sf-chip .sf-pill{padding:0 7px}
.sf-toolbar .sf-right{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.sf-table-card{overflow:hidden}
.sf-table-card .table-responsive{margin:0}
.sf-table-card .table td{font-size:13.5px}
.sf-table-card .table td .sf-title{font-weight:600;color:var(--sf-ink)}
.sf-table-card .table td .sf-meta{font-size:12px;color:var(--sf-ink-3)}
.sf-pagin{display:flex;align-items:center;gap:10px;padding:12px 16px;border-top:1px solid var(--sf-line);color:var(--sf-ink-3);font-size:13px;flex-wrap:wrap}
.sf-pagin .sf-sp{flex:1}
.sf-pagin .pagination{margin:0}
.sf-thumb{width:36px;height:36px;border-radius:8px;object-fit:cover;background:var(--sf-surface-2);border:1px solid var(--sf-line);flex:none}
.sf-thumb.lg{width:56px;height:56px;border-radius:10px}
.sf-initial{width:36px;height:36px;border-radius:8px;display:grid;place-items:center;font-weight:700;background:var(--sf-brand-soft);color:var(--sf-brand-ink);flex:none;font-size:14px}
.sf-row{display:flex;align-items:center;gap:10px;min-width:0}
.sf-row .text-truncate{min-width:0}
.sf-icon-btn{width:34px;height:34px;border-radius:8px;display:inline-grid;place-items:center;border:1px solid var(--sf-line-strong);background:var(--sf-surface);color:var(--sf-ink-2);font-size:14px;line-height:1;text-decoration:none}
.sf-icon-btn:hover{background:var(--sf-surface-2);color:var(--sf-ink);text-decoration:none}
.sf-icon-btn.danger:hover{background:var(--sf-bad-soft);color:var(--sf-bad);border-color:transparent}
.sf-icon-btn.brand:hover{background:var(--sf-brand-soft);color:var(--sf-brand-ink);border-color:transparent}
.sf-row-actions{display:flex;gap:6px;justify-content:flex-end}
.sf-empty{padding:44px 20px;text-align:center;color:var(--sf-ink-3)}
.sf-empty i{font-size:34px;display:block;margin-bottom:10px;color:var(--sf-line-strong)}
.sf-empty b{display:block;color:var(--sf-ink-2);margin-bottom:4px}
.sf-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}
.sf-form-grid .full{grid-column:1/-1}
.sf-form-grid .form-group{margin:0}
.sf-section{margin-bottom:14px}
.sf-section .sf-hd{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--sf-line)}
.sf-section .sf-hd h3{font-size:14px;font-weight:700;margin:0}
.sf-section .sf-hd p{margin:0;font-size:12.5px;color:var(--sf-ink-3)}
.sf-section .sf-hd .sf-sp{flex:1}
.sf-section .sf-body{padding:18px}
.sf-form-foot{display:flex;gap:10px;justify-content:flex-end;padding:14px 18px;border-top:1px solid var(--sf-line);background:var(--sf-surface-2);border-radius:0 0 var(--sf-r) var(--sf-r)}
.sf-split{display:grid;grid-template-columns:2fr 1fr;gap:14px;align-items:start}
.sf-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}
.sf-stat{padding:14px 16px}
.sf-stat .l{font-size:12px;color:var(--sf-ink-3);font-weight:600}
.sf-stat .v{font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--sf-ink)}
.sf-stat .d{font-size:12px;color:var(--sf-ink-2)}
.sf-kv{display:grid;grid-template-columns:140px 1fr;gap:8px 12px;font-size:13.5px}
.sf-kv dt{color:var(--sf-ink-3);font-weight:500;margin:0}
.sf-kv dd{margin:0;color:var(--sf-ink)}
.sf-side-drawer{position:fixed;top:0;right:0;bottom:0;width:min(440px,100%);background:var(--sf-surface);box-shadow:var(--sf-shadow);transform:translateX(100%);transition:transform .2s;z-index:1045;display:flex;flex-direction:column}
.sf-side-drawer.open{transform:none}
.sf-side-drawer .sf-hd{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--sf-line);font-weight:800;font-size:16px}
.sf-side-drawer .sf-hd .sf-sp{flex:1}
.sf-side-drawer .sf-body{flex:1;overflow:auto;padding:18px 20px}
.sf-side-drawer .sf-foot{padding:14px 20px;border-top:1px solid var(--sf-line);display:flex;gap:10px;justify-content:flex-end}
.sf-upload{border:2px dashed var(--sf-line-strong);border-radius:var(--sf-r);padding:22px;text-align:center;color:var(--sf-ink-3);background:var(--sf-surface-2);cursor:pointer}
.sf-upload:hover{border-color:var(--sf-brand)}
.sf-upload img{max-width:140px;max-height:140px;border-radius:10px;display:block;margin:0 auto 8px}
.sf-switch{display:inline-flex;align-items:center;gap:10px;font-weight:500;cursor:pointer;user-select:none}
.sf-tabs{display:flex;gap:4px;border-bottom:1px solid var(--sf-line);padding:0 16px}
.sf-tabs a{padding:12px 14px;color:var(--sf-ink-2);font-weight:600;border-bottom:2px solid transparent;margin-bottom:-1px;text-decoration:none;font-size:13.5px}
.sf-tabs a:hover{color:var(--sf-ink);text-decoration:none}
.sf-tabs a.on{color:var(--sf-brand-ink);border-color:var(--sf-brand)}
.sf-num{font-variant-numeric:tabular-nums}
@media (max-width:1100px){.sf-stats{grid-template-columns:repeat(2,1fr)}.sf-split{grid-template-columns:1fr}}
@media (max-width:720px){.sf-form-grid,.sf-stats{grid-template-columns:1fr}.sf-search{max-width:none}.sf-kv{grid-template-columns:1fr}}

/* Settings left menu (shared by Shop profile, Receipt, Printer, M-PESA, reCAPTCHA, My profile) */
.sf-settings-menu a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--sf-r-sm);color:var(--sf-ink-2);font-weight:500;text-decoration:none}
.sf-settings-menu a:hover{background:var(--sf-surface-2);color:var(--sf-ink);text-decoration:none}
.sf-settings-menu a.on{background:var(--sf-brand-soft);color:var(--sf-brand-ink);font-weight:600}
.sf-settings-menu i{font-size:16px;line-height:1;width:18px;text-align:center}
/* Printer status chip in the Sell screen header: green ready, amber not connected, grey = print dialog (status unknowable) */
.sf-printer-chip{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 12px;border-radius:999px;border:1px solid var(--sf-line-strong);background:var(--sf-surface);color:var(--sf-ink-2);font-weight:600;font-size:12.5px;cursor:pointer;white-space:nowrap}
.sf-printer-chip i{font-size:15px;line-height:1}
.sf-printer-chip:hover{background:var(--sf-surface-2)}
.sf-printer-dot{width:8px;height:8px;border-radius:50%;background:var(--sf-ink-3);flex:none}
.sf-printer-chip[data-state="ok"]{border-color:transparent;background:var(--sf-good-soft);color:var(--sf-good)}
.sf-printer-chip[data-state="ok"] .sf-printer-dot{background:var(--sf-good)}
.sf-printer-chip[data-state="standby"]{border-color:transparent;background:var(--sf-info-soft);color:var(--sf-info)}
.sf-printer-chip[data-state="standby"] .sf-printer-dot{background:var(--sf-info)}
.sf-printer-chip[data-state="off"]{border-color:transparent;background:var(--sf-warn-soft);color:var(--sf-warn)}
.sf-printer-chip[data-state="off"] .sf-printer-dot{background:var(--sf-warn);animation:sfPulse 1.4s ease-in-out infinite}
@keyframes sfPulse{50%{opacity:.35}}
@media (max-width:720px){.sf-printer-label{display:none}}

/* Stacking: drawers, overlays and dialogs must sit above the sticky top bar (1020) and sidebar (1030) on every page */
.overlay{z-index:1040!important}
.offcanvas-filter{z-index:1045!important;top:0!important;height:100vh!important}
.modal-backdrop{z-index:1050!important}
.modal{z-index:1055!important}
.swal2-container{z-index:1070!important}
#toast-container{z-index:1080!important}

/* Touch screens (tablets/phones): keyboard shortcut chips and the shortcuts button mean nothing without a keyboard */
@media (hover:none) and (pointer:coarse){.sf-kbd,#short-cut{display:none!important}}