:root {
  --green-950: #062d23;
  --green-900: #0a3d2d;
  --green-800: #0f5a43;
  --green-700: #167254;
  --green-100: #e4f4ed;
  --neon-lime: #baff3c;
  --neon-cyan: #25f2bc;
  --neon-glow: rgba(37, 242, 188, .28);
  --amber-600: #1f7a59;
  --amber-500: #2e966d;
  --amber-100: #e8f7f0;
  --sand-50: #f7faf8;
  --sand-100: #eef5f1;
  --sand-200: #deebe4;
  --ink-900: #10251d;
  --ink-700: #385148;
  --ink-500: #6d8279;
  --red-700: #a93e35;
  --red-100: #fbe8e5;
  --blue-700: #26705c;
  --blue-100: #e6f3ee;
  --white: #fff;
  --line: #dfe9e3;
  --shadow: 0 12px 32px rgba(6, 45, 35, .09);
  --radius-xl: 22px;
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 9px;
  --sidebar: 238px;
}

* { box-sizing: border-box; scrollbar-width: none; }
*::-webkit-scrollbar { width: 0; height: 0; display: none; }

html { min-height: 100%; font-size: 16px; }

body {
  margin: 0;
  min-width: 320px;
  color: var(--ink-900);
  background: var(--sand-50);
  font-family: Tahoma, "Segoe UI", Arial, sans-serif;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

body.system-locked { overflow: hidden; }
body.system-locked .app-shell { pointer-events: none; user-select: none; filter: saturate(.45) brightness(.62); }
.login-screen { position: fixed; inset: 0; z-index: 250; display: grid; place-items: center; padding: 22px; overflow: hidden; color: #fff; background:
  linear-gradient(rgba(186,255,60,.025) 1px, transparent 1px),
  linear-gradient(90deg, rgba(186,255,60,.025) 1px, transparent 1px),
  radial-gradient(circle at 20% 18%, rgba(37,242,188,.2), transparent 30%),
  radial-gradient(circle at 82% 82%, rgba(186,255,60,.14), transparent 28%),
  #03100d; background-size: 34px 34px, 34px 34px, auto, auto, auto; }
.login-screen::before { content: ""; position: absolute; inset: 0; background: linear-gradient(130deg, transparent 35%, rgba(37,242,188,.04), transparent 65%); pointer-events: none; }
.login-glow { position: absolute; width: 280px; height: 280px; border: 1px solid rgba(37,242,188,.15); border-radius: 50%; filter: blur(.2px); }
.login-glow::after { content: ""; position: absolute; inset: 38px; border: 1px solid rgba(186,255,60,.12); border-radius: inherit; }
.login-glow.one { top: -125px; right: -85px; }
.login-glow.two { bottom: -150px; left: -75px; }
.login-card { width: min(430px, 100%); position: relative; padding: 24px; background: rgba(7,27,22,.9); border: 1px solid rgba(37,242,188,.24); border-radius: 24px; box-shadow: 0 28px 90px rgba(0,0,0,.45), 0 0 42px rgba(37,242,188,.08); backdrop-filter: blur(18px); }
.login-card::before { content: ""; position: absolute; inset: 0 auto auto 24px; width: 105px; height: 2px; background: linear-gradient(90deg, transparent, var(--neon-lime)); box-shadow: 0 0 14px rgba(186,255,60,.45); }
.login-brand { display: flex; align-items: center; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.08); }
.login-logo { width: 48px; height: 57px; display: grid; place-items: center; padding: 3px; background: #fff; border: 1px solid var(--neon-lime); border-radius: 13px; box-shadow: 0 0 18px rgba(186,255,60,.13); }
.login-logo img { width: 100%; height: 100%; object-fit: contain; }
.login-brand strong, .login-brand small { display: block; }
.login-brand strong { font-size: 1.08rem; }
.login-brand small { margin-top: 2px; color: rgba(255,255,255,.52); font-size: .68rem; }
.login-heading { display: flex; align-items: center; gap: 12px; margin: 21px 0 17px; }
.login-heading h1, .login-heading p { margin: 0; }
.login-heading h1 { margin-top: 2px; font-size: 1.25rem; }
.login-heading p { color: var(--neon-cyan); font-size: .65rem; }
.login-lock { width: 43px; height: 43px; display: grid; place-items: center; color: #06150f; background: linear-gradient(135deg, var(--neon-cyan), var(--neon-lime)); border-radius: 13px; box-shadow: 0 0 18px rgba(37,242,188,.18); }
.login-lock svg { width: 20px; }
#login-form { display: grid; gap: 12px; }
#login-form label { display: grid; gap: 6px; color: rgba(255,255,255,.75); font-size: .68rem; font-weight: 700; }
.login-input { position: relative; }
.login-input > svg { position: absolute; right: 12px; top: 50%; width: 17px; color: var(--neon-cyan); transform: translateY(-50%); }
.login-input input { width: 100%; height: 47px; padding: 0 40px 0 12px; color: #fff; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.12); border-radius: 11px; }
.login-input input:focus { border-color: var(--neon-cyan); box-shadow: 0 0 0 3px rgba(37,242,188,.09); }
.login-input input::placeholder { color: rgba(255,255,255,.25); }
.login-error { min-height: 17px; margin: -2px 0 0; color: #ff9d91; font-size: .64rem; }
.login-submit { min-height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 0 17px; color: #06150f; background: linear-gradient(135deg, var(--neon-lime), #67f39b); border: 0; border-radius: 11px; font-weight: 800; box-shadow: 0 7px 24px rgba(37,242,188,.13); }
.login-submit:hover { filter: brightness(1.06); box-shadow: 0 9px 30px rgba(37,242,188,.21); }
.login-submit svg { width: 18px; transform: rotate(180deg); }
.login-foot { display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: 7px; margin-top: 18px; padding-top: 14px; color: rgba(255,255,255,.48); border-top: 1px solid rgba(255,255,255,.07); font-size: .6rem; }
.login-foot small { color: rgba(255,255,255,.3); }
.login-online { width: 8px; height: 8px; background: var(--neon-lime); border-radius: 50%; box-shadow: 0 0 11px rgba(186,255,60,.65); }

button, input, select, textarea { font: inherit; }
button { cursor: pointer; touch-action: manipulation; }
button, input, select, textarea { outline: none; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { box-shadow: 0 0 0 3px rgba(227, 154, 52, .25); }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
[hidden] { display: none !important; }
.muted { color: var(--ink-500); }

.app-shell { min-height: 100vh; }

.sidebar {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 30;
  width: var(--sidebar);
  padding: 22px 16px 18px;
  display: flex;
  flex-direction: column;
  color: #fff;
  background:
    radial-gradient(circle at 75% 7%, rgba(37, 242, 188, .13), transparent 24%),
    linear-gradient(180deg, #071b16 0%, #03100d 100%);
  border-left: 1px solid rgba(255, 255, 255, .08);
}
.sidebar::after { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, transparent, var(--neon-cyan), var(--neon-lime)); box-shadow: 0 0 18px var(--neon-glow); }
.sidebar > * { position: relative; z-index: 1; }

.brand { display: flex; align-items: center; gap: 11px; padding: 0 8px 24px; }
.brand-mark { width: 48px; height: 58px; flex: 0 0 48px; display: grid; place-items: center; padding: 3px; color: var(--green-950); background: #fff; border: 1px solid var(--neon-lime); border-radius: 13px; overflow: hidden; box-shadow: 0 0 16px rgba(186,255,60,.16); }
.brand-mark svg { width: 26px; height: 26px; fill: currentColor; stroke: none; transform: rotate(-4deg); }
.brand-logo img { width: 100%; height: 100%; display: block; object-fit: contain; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 1.16rem; letter-spacing: .02em; }
.brand small { margin-top: 2px; color: rgba(255, 255, 255, .58); font-size: .74rem; }

.main-nav { display: grid; gap: 7px; }
.nav-item { width: 100%; min-height: 48px; display: flex; align-items: center; gap: 12px; padding: 0 14px; color: rgba(255, 255, 255, .63); background: transparent; border: 1px solid transparent; border-radius: 12px; text-align: right; font-weight: 650; transition: .18s ease; }
.nav-item svg { width: 20px; height: 20px; }
.nav-item:hover { color: var(--neon-cyan); background: rgba(37, 242, 188, .07); }
.nav-item.active { color: #06150f; background: linear-gradient(135deg, var(--neon-lime), #83f587); border-color: rgba(186, 255, 60, .92); box-shadow: 0 0 18px rgba(186,255,60,.13), inset -3px 0 rgba(255,255,255,.55); }

.sidebar-foot { margin-top: auto; display: grid; gap: 12px; }
.register-chip { min-height: 57px; display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: rgba(37, 242, 188, .065); border: 1px solid rgba(37, 242, 188, .18); border-radius: 13px; }
.register-chip small, .register-chip strong { display: block; }
.register-chip small { color: rgba(255, 255, 255, .52); font-size: .7rem; }
.register-chip strong { margin-top: 1px; font-size: .83rem; }
.live-dot { width: 9px; height: 9px; flex: 0 0 9px; background: var(--neon-lime); border-radius: 50%; box-shadow: 0 0 0 4px rgba(186,255,60,.1), 0 0 13px rgba(186,255,60,.55); }
.user-card { display: grid; grid-template-columns: 38px 1fr 31px; align-items: center; gap: 9px; padding: 10px 7px 2px; }
.avatar { width: 38px; height: 38px; display: grid; place-items: center; color: #06150f; background: linear-gradient(135deg, var(--neon-cyan), var(--neon-lime)); border-radius: 12px; font-weight: 800; }
.user-card strong, .user-card small { display: block; }
.user-card strong { font-size: .82rem; }
.user-card small { margin-top: 2px; color: rgba(255, 255, 255, .48); font-size: .68rem; }
.sidebar-lock { width: 31px; height: 31px; display: grid; place-items: center; padding: 0; color: var(--neon-cyan); background: rgba(37,242,188,.07); border: 1px solid rgba(37,242,188,.18); border-radius: 9px; }
.sidebar-lock:hover { color: #06150f; background: var(--neon-lime); border-color: var(--neon-lime); }
.sidebar-lock svg { width: 15px; }
.developer-credit { padding: 9px 10px 0; border-top: 1px solid rgba(37,242,188,.13); text-align: center; }
.developer-credit small, .developer-credit strong, .developer-credit span { display: block; }
.developer-credit small { color: rgba(255,255,255,.38); font-size: .55rem; }
.developer-credit strong { margin-top: 2px; color: var(--neon-lime); font-size: .7rem; }
.developer-credit span { margin-top: 1px; color: rgba(255,255,255,.52); font-size: .51rem; line-height: 1.35; }

.workspace { margin-right: var(--sidebar); min-height: 100vh; overflow-x: hidden; }
.topbar { height: 80px; position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 26px; background: rgba(250, 249, 246, .94); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.topbar-title { display: flex; align-items: center; gap: 10px; }
.topbar-title small, .topbar-title h1 { display: block; margin: 0; }
.topbar-title small { color: var(--amber-600); font-size: .7rem; font-weight: 750; }
.topbar-title h1 { margin-top: 2px; font-size: 1.28rem; line-height: 1.25; }
.topbar-actions { display: flex; align-items: center; gap: 18px; }
.datetime { text-align: left; direction: ltr; }
.datetime strong, .datetime small { display: block; }
.datetime strong { font-size: .96rem; }
.datetime small { margin-top: 1px; color: var(--ink-500); font-size: .68rem; direction: rtl; }
.shift-pill { min-height: 41px; display: flex; align-items: center; gap: 8px; padding: 0 13px; border: 1px solid #d6ddd9; border-radius: 999px; color: var(--ink-700); background: #fff; font-size: .78rem; font-weight: 700; }
.shift-pill svg { width: 17px; }
.shift-pill .status-dot { width: 7px; height: 7px; background: var(--red-700); border-radius: 50%; }
.shift-pill.is-open { color: var(--green-800); border-color: #bbd6cb; background: var(--green-100); }
.shift-pill.is-open .status-dot { background: #27986c; }
.icon-btn { width: 39px; height: 39px; padding: 0; display: grid; place-items: center; color: var(--ink-700); background: transparent; border: 1px solid var(--line); border-radius: 11px; }
.icon-btn:hover { background: var(--sand-100); }
.mobile-menu { display: none; }

.view { display: none; width: 100%; max-width: 1500px; margin: 0 auto; padding: 22px 26px 30px; animation: fade-in .22s ease; }
.view.active { display: block; }
@keyframes fade-in { from { opacity: 0; transform: translateY(3px); } }

.login-developer { margin-top: 10px; padding-top: 9px; color: rgba(255,255,255,.45); border-top: 1px solid rgba(37,242,188,.12); text-align: center; font-size: .61rem; }

.about-hero { min-height: 150px; position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 25px 28px; overflow: hidden; color: #fff; background: radial-gradient(circle at 12% 15%, rgba(186,255,60,.14), transparent 32%), linear-gradient(135deg, #071e18, #0b3329); border: 1px solid rgba(37,242,188,.22); border-radius: 20px; box-shadow: 0 16px 40px rgba(8,29,23,.12); }
.about-hero::after { content: "CORE"; position: absolute; left: 28px; bottom: -25px; color: rgba(255,255,255,.035); font-size: 5.8rem; font-weight: 900; letter-spacing: .08em; pointer-events: none; }
.about-identity { position: relative; z-index: 1; display: flex; align-items: center; gap: 18px; }
.about-company-mark { width: 74px; height: 74px; flex: 0 0 74px; display: grid; place-items: center; color: #06150f; background: linear-gradient(135deg, var(--neon-lime), var(--neon-cyan)); border-radius: 21px; box-shadow: 0 0 28px rgba(186,255,60,.18); }
.about-company-mark svg { width: 34px; height: 34px; }
.about-identity .eyebrow { color: var(--neon-cyan); }
.about-identity h2 { margin: 4px 0 6px; font-size: 1.48rem; }
.about-identity p { max-width: 670px; margin: 0; color: rgba(255,255,255,.62); font-size: .78rem; }
.about-status { position: relative; z-index: 1; min-height: 38px; display: flex; align-items: center; gap: 8px; padding: 0 13px; white-space: nowrap; color: var(--neon-lime); background: rgba(186,255,60,.08); border: 1px solid rgba(186,255,60,.25); border-radius: 999px; font-size: .7rem; font-weight: 750; }
.about-status i { width: 7px; height: 7px; background: var(--neon-lime); border-radius: 50%; box-shadow: 0 0 12px rgba(186,255,60,.8); }
.about-hero-actions { position: relative; z-index: 1; display: grid; justify-items: end; gap: 8px; }
.about-install { min-height: 38px; display: flex; align-items: center; gap: 7px; padding: 0 13px; color: #06150f; background: linear-gradient(135deg, var(--neon-lime), var(--neon-cyan)); border: 0; border-radius: 10px; font-size: .68rem; font-weight: 800; box-shadow: 0 8px 22px rgba(37,242,188,.14); }
.about-install svg { width: 16px; height: 16px; }
.about-content { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.about-content .panel { min-width: 0; margin: 0; overflow: hidden; }
.about-content > .panel + .panel { margin-top: 0; }
.company-data { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0; padding: 5px 18px 16px; }
.company-data > div { min-height: 68px; padding: 13px 2px 10px; border-bottom: 1px solid var(--line); }
.company-data > div:nth-last-child(-n+2) { border-bottom: 0; }
.company-data dt { color: var(--ink-500); font-size: .65rem; }
.company-data dd { margin: 5px 0 0; color: var(--ink-900); font-size: .76rem; font-weight: 750; }
.company-services { grid-column: 1 / -1; }
.services-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; padding: 13px 16px; }
.services-list article { display: flex; align-items: center; gap: 11px; padding: 12px; background: var(--sand-50); border: 1px solid var(--line); border-radius: 12px; }
.services-list article > span { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; color: var(--green-800); background: var(--green-100); border-radius: 10px; }
.services-list svg { width: 19px; height: 19px; }
.services-list strong, .services-list p { display: block; }
.services-list strong { font-size: .74rem; }
.services-list p { margin: 3px 0 0; color: var(--ink-500); font-size: .61rem; line-height: 1.5; }
.about-note { min-height: 45px; display: flex; align-items: center; gap: 9px; margin: 0 16px 15px; padding: 0 13px; color: var(--green-800); background: linear-gradient(90deg, var(--green-100), #f7fff0); border: 1px solid #cfe6da; border-radius: 11px; font-size: .68rem; }
.about-note svg { width: 17px; height: 17px; color: #27986c; }

.pos-statusbar { min-height: 45px; display: flex; align-items: center; gap: 17px; margin-bottom: 14px; padding: 0 16px; color: var(--ink-700); background: #fff; border: 1px solid var(--line); border-radius: 13px; font-size: .76rem; }
.pos-statusbar > div { display: flex; gap: 7px; }
.pos-statusbar .divider { width: 1px; height: 21px; background: var(--line); }
.statusbar-actions { margin-right: auto; display: flex !important; align-items: center; gap: 4px !important; }
.text-action { display: flex; align-items: center; gap: 7px; padding: 7px 9px; color: var(--green-800); background: transparent; border: 0; font-size: .75rem; font-weight: 750; }
.text-action svg { width: 17px; }
.open-tables-trigger { color: var(--amber-600); }
.open-count { min-width: 21px; height: 21px; display: grid; place-items: center; color: #fff; background: var(--amber-600); border-radius: 999px; font-size: .6rem; }
.open-count.is-empty { color: var(--ink-500); background: #e6eae8; }

.cashier-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.catalog-panel, .order-panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: 0 5px 18px rgba(17, 48, 41, .035); }
.catalog-panel { min-width: 0; overflow: hidden; }
.order-context { padding: 16px 17px 14px; border-bottom: 1px solid var(--line); }
.context-row { display: flex; align-items: end; gap: 14px; }
.field-group { display: grid; gap: 7px; }
.field-group.grow { flex: 1; }
.field-group label, .full-field > span, .form-grid label > span { color: var(--ink-700); font-size: .72rem; font-weight: 750; }
.segmented { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; padding: 4px; background: var(--sand-100); border: 1px solid var(--sand-200); border-radius: 11px; }
.segmented button { min-height: 36px; padding: 0 15px; color: var(--ink-500); background: transparent; border: 0; border-radius: 8px; font-size: .77rem; font-weight: 700; }
.segmented button.active { color: #fff; background: var(--green-800); box-shadow: 0 3px 9px rgba(23, 63, 53, .17); }
.table-field { width: 190px; }
.input-with-icon, .search-box, .compact-search { position: relative; }
.input-with-icon svg, .search-box svg, .compact-search svg { position: absolute; right: 12px; top: 50%; width: 18px; transform: translateY(-50%); color: var(--ink-500); pointer-events: none; }
.input-with-icon select { width: 100%; height: 45px; padding: 0 38px 0 10px; appearance: none; color: var(--ink-700); background: #fff; border: 1px solid #dfe4e1; border-radius: 10px; }

.catalog-tools { padding: 15px 17px 11px; }
.search-box input { width: 100%; height: 44px; padding: 0 40px 0 13px; border: 1px solid var(--line); border-radius: 11px; background: var(--sand-50); }
.search-box input::placeholder, input::placeholder, textarea::placeholder { color: #a3aba7; }
.category-tabs { display: flex; gap: 7px; margin-top: 12px; overflow-x: auto; scrollbar-width: none; }
.category-tabs::-webkit-scrollbar { display: none; }
.category-tabs button { flex: 0 0 auto; min-height: 34px; padding: 0 15px; color: var(--ink-500); background: #fff; border: 1px solid var(--line); border-radius: 999px; font-size: .73rem; font-weight: 700; }
.category-tabs button.active { color: var(--green-800); background: var(--green-100); border-color: #c8ded6; }

.products-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; padding: 5px 17px 18px; }
.product-card { position: relative; min-height: 128px; display: flex; flex-direction: column; align-items: stretch; padding: 13px; overflow: hidden; text-align: right; color: var(--ink-900); background: #fff; border: 1px solid var(--line); border-radius: 14px; transition: .18s ease; }
.product-card::before { content: ""; position: absolute; top: 0; right: 0; width: 4px; height: 100%; background: var(--green-700); opacity: .9; }
.product-card:hover { transform: translateY(-2px); border-color: #cfd8d3; box-shadow: 0 8px 18px rgba(17, 48, 41, .07); }
.product-card:active { transform: translateY(0); }
.product-visual { width: 40px; height: 40px; display: grid; place-items: center; margin-bottom: 12px; color: var(--green-800); background: var(--green-100); border-radius: 11px; font-size: 1.28rem; }
.product-card strong { font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.product-card small { margin-top: 3px; color: var(--ink-500); font-size: .67rem; }
.product-card .price { margin-top: auto; color: var(--green-800); font-size: .83rem; font-weight: 800; }
.empty-state { grid-column: 1 / -1; min-height: 210px; display: grid; place-items: center; text-align: center; color: var(--ink-500); border: 1px dashed #d6ddd9; border-radius: 14px; }
.empty-state strong { display: block; color: var(--ink-700); }
.empty-state span { display: block; margin-top: 4px; font-size: .76rem; }

.order-panel { position: sticky; top: 95px; min-height: calc(100vh - 132px); display: flex; flex-direction: column; overflow: hidden; }
.order-head { min-height: 68px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; border-bottom: 1px solid var(--line); }
.order-head > div { display: flex; align-items: center; gap: 9px; }
.order-icon { width: 37px; height: 37px; display: grid; place-items: center; color: var(--green-800); background: var(--green-100); border-radius: 10px; }
.order-icon svg { width: 19px; }
.order-head small, .order-head strong { display: block; }
.order-head small { color: var(--ink-500); font-size: .66rem; }
.order-head strong { margin-top: 1px; font-size: .82rem; }
.link-danger { padding: 5px; color: var(--red-700); background: transparent; border: 0; font-size: .68rem; font-weight: 700; }
.link-danger:disabled { opacity: .35; cursor: not-allowed; }
.cart-list { min-height: 225px; flex: 1; max-height: calc(100vh - 485px); overflow: auto; padding: 7px 13px; }
.cart-empty { min-height: 210px; display: grid; place-content: center; justify-items: center; text-align: center; color: var(--ink-500); }
.cart-empty .empty-receipt { width: 58px; height: 58px; display: grid; place-items: center; margin-bottom: 10px; color: #98a39e; background: var(--sand-100); border-radius: 18px; }
.cart-empty svg { width: 27px; height: 27px; }
.cart-empty strong { color: var(--ink-700); font-size: .82rem; }
.cart-empty small { width: 210px; margin-top: 4px; font-size: .67rem; line-height: 1.6; }
.cart-item { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 11px 2px; border-bottom: 1px solid #edf0ee; }
.cart-item-main { min-width: 0; }
.cart-item-main > strong { display: block; font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cart-item-main > small { display: block; margin-top: 2px; color: var(--ink-500); font-size: .63rem; }
.cart-item-side { min-width: 75px; display: grid; justify-items: end; gap: 8px; }
.cart-item-side > strong { color: var(--green-800); font-size: .75rem; }
.qty-control { display: flex; align-items: center; gap: 6px; }
.qty-control button { width: 23px; height: 23px; padding: 0; display: grid; place-items: center; color: var(--green-800); background: var(--green-100); border: 0; border-radius: 7px; }
.qty-control button.remove { color: var(--red-700); background: var(--red-100); }
.qty-control svg { width: 13px; height: 13px; }
.qty-control span { min-width: 15px; text-align: center; font-size: .72rem; font-weight: 800; }
.order-note { position: relative; margin: 0 14px 10px; }
.order-note input { width: 100%; height: 38px; padding: 0 34px 0 10px; color: var(--ink-700); background: var(--sand-50); border: 1px solid var(--line); border-radius: 9px; font-size: .7rem; }
.order-note svg { position: absolute; right: 10px; top: 50%; width: 15px; color: var(--ink-500); transform: translateY(-50%); }
.totals { display: grid; gap: 8px; padding: 13px 16px; background: var(--sand-50); border-top: 1px solid var(--line); }
.totals > div { display: flex; justify-content: space-between; color: var(--ink-500); font-size: .72rem; }
.totals > div strong { color: var(--ink-700); }
.totals .grand-total { align-items: center; margin-top: 3px; padding-top: 10px; color: var(--ink-900); border-top: 1px dashed #ccd3cf; font-size: .87rem; font-weight: 800; }
.totals .grand-total strong { color: var(--green-800); font-size: 1.14rem; }
.primary, .secondary, .danger-button { min-height: 43px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 17px; border-radius: 10px; font-weight: 750; border: 1px solid transparent; }
.primary { color: #fff; background: var(--green-800); }
.primary:hover { background: var(--green-900); }
.secondary { color: var(--ink-700); background: #fff; border-color: #dce2df; }
.secondary:hover { background: var(--sand-50); }
.danger-button { color: #fff; background: var(--red-700); }
.danger-button:hover { background: #8e3028; }
.primary.small, .secondary.small { min-height: 38px; padding: 0 14px; font-size: .75rem; }
.primary:disabled, .secondary:disabled, .tab-bar button:disabled { opacity: .45; cursor: not-allowed; }
.primary svg, .secondary svg { width: 17px; }
.order-buttons { display: grid; gap: 8px; padding: 12px 14px 14px; }
.suspend-button { min-height: 43px; color: var(--amber-600); border-color: #edcf9f; background: #fffaf1; }
.suspend-button svg { width: 17px; }
.pay-button { min-height: 52px; margin: 0; justify-content: space-between; padding: 0 17px; }
.pay-button:disabled { color: #98a39e; background: #e6eae8; cursor: not-allowed; }
.pay-button strong { padding-right: 14px; border-right: 1px solid rgba(255, 255, 255, .2); }

.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: 2px 0 20px; }
.section-heading .eyebrow { color: var(--amber-600); font-size: .68rem; font-weight: 800; }
.section-heading h2 { margin: 3px 0 4px; font-size: 1.45rem; }
.section-heading p { margin: 0; color: var(--ink-500); font-size: .77rem; }
.tab-bar { display: flex; gap: 6px; margin-bottom: 15px; padding: 4px; width: max-content; max-width: 100%; overflow-x: auto; background: #ecefeD; border-radius: 11px; }
.tab-bar button { min-height: 36px; padding: 0 16px; color: var(--ink-500); background: transparent; border: 0; border-radius: 8px; font-size: .73rem; font-weight: 750; white-space: nowrap; }
.tab-bar button.active { color: var(--green-800); background: #fff; box-shadow: 0 2px 8px rgba(17, 48, 41, .08); }
.nav-item:disabled { opacity: .4; cursor: not-allowed; }
.tab-bar.compact { margin: 0; }
.tab-bar.compact button { min-height: 33px; }
.settings-pane, .report-pane { display: none; }
.settings-pane.active, .report-pane.active { display: block; animation: fade-in .2s ease; }
.panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: 0 5px 18px rgba(17, 48, 41, .035); }
.panel + .panel { margin-top: 15px; }
.panel-head { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 13px 18px; border-bottom: 1px solid var(--line); }
.panel-head h3, .panel-head p { margin: 0; }
.panel-head h3 { font-size: .96rem; }
.panel-head p { margin-top: 3px; color: var(--ink-500); font-size: .69rem; }
.panel-actions, .heading-actions { display: flex; align-items: center; gap: 9px; }
.compact-search input { width: 205px; height: 38px; padding: 0 36px 0 10px; background: var(--sand-50); border: 1px solid var(--line); border-radius: 9px; font-size: .72rem; }
.compact-search svg { right: 10px; width: 16px; }
.user-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 15px; }
.user-stats article { min-height: 82px; display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 5px 18px rgba(17, 48, 41, .035); }
.user-stats small, .user-stats strong { display: block; }
.user-stats small { color: var(--ink-500); font-size: .66rem; }
.user-stats strong { margin-top: 3px; color: var(--ink-900); font-size: 1.05rem; }
.user-stat-icon { width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center; color: var(--blue-700); background: var(--blue-100); border-radius: 11px; }
.user-stat-icon.active { color: var(--green-800); background: var(--green-100); }
.user-stat-icon.manager { color: var(--amber-600); background: var(--amber-100); }
.user-stat-icon svg { width: 19px; }
.user-management-actions select { min-height: 38px; padding: 0 11px; color: var(--ink-700); background: var(--sand-50); border: 1px solid var(--line); border-radius: 9px; font-size: .71rem; }
.permission-head-actions { display: flex; align-items: center; gap: 12px; }
.table-wrap { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 750px; }
th, td { padding: 13px 18px; text-align: right; border-bottom: 1px solid #edf0ee; white-space: nowrap; }
th { color: var(--ink-500); background: #fbfcfb; font-size: .66rem; font-weight: 750; }
td { color: var(--ink-700); font-size: .74rem; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: #fcfdfc; }
.item-cell, .person-cell { display: flex; align-items: center; gap: 10px; }
.item-thumb, .person-avatar { width: 36px; height: 36px; display: grid; place-items: center; color: var(--amber-600); background: var(--amber-100); border-radius: 10px; font-size: 1rem; }
.person-avatar { color: var(--green-800); background: var(--green-100); font-size: .72rem; font-weight: 800; }
.item-cell strong, .item-cell small, .person-cell strong, .person-cell small { display: block; }
.item-cell strong, .person-cell strong { color: var(--ink-900); font-size: .75rem; }
.item-cell small, .person-cell small { margin-top: 2px; color: var(--ink-500); font-size: .62rem; }
.status { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border: 0; border-radius: 999px; font-size: .64rem; font-weight: 750; }
.status[data-toggle-user] { cursor: pointer; }
.status[data-toggle-user]:focus-visible { outline: 2px solid var(--amber-500); outline-offset: 2px; }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status.active, .status.done { color: #26785d; background: #e8f5ef; }
.status.inactive { color: #727d78; background: #edf0ee; }
.status.cancelled { color: var(--red-700); background: var(--red-100); }
.role-chip { padding: 5px 9px; color: var(--blue-700); background: var(--blue-100); border-radius: 999px; font-size: .64rem; font-weight: 750; }
.role-chip.supervisor { color: var(--amber-600); background: var(--amber-100); }
.role-chip.manager { color: var(--green-800); background: var(--green-100); }
.row-actions { display: flex; justify-content: flex-end; gap: 4px; }
.row-action { width: 32px; height: 32px; display: grid; place-items: center; padding: 0; color: var(--ink-500); background: transparent; border: 0; border-radius: 8px; }
.row-action:hover { color: var(--green-800); background: var(--green-100); }
.row-action.delete:hover { color: var(--red-700); background: var(--red-100); }
.row-action:disabled { opacity: .35; cursor: not-allowed; }
.row-action svg { width: 16px; }
.save-state { display: inline-flex; align-items: center; gap: 5px; color: var(--green-700); font-size: .68rem; font-weight: 700; }
.save-state svg { width: 15px; }
.permissions-table { min-width: 600px; }
.permissions-table td:not(:first-child), .permissions-table th:not(:first-child) { text-align: center; }
.permission-name strong, .permission-name small { display: block; }
.permission-name small { margin-top: 3px; color: var(--ink-500); font-size: .61rem; font-weight: 400; }
.switch { position: relative; width: 37px; height: 21px; display: inline-block; }
.switch input { position: absolute; opacity: 0; }
.switch i { position: absolute; inset: 0; background: #d9dfdc; border-radius: 999px; transition: .2s; }
.switch i::before { content: ""; position: absolute; top: 3px; right: 3px; width: 15px; height: 15px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.18); transition: .2s; }
.switch input:checked + i { background: var(--green-700); }
.switch input:checked + i::before { transform: translateX(-16px); }
.switch input:disabled + i { opacity: .45; cursor: not-allowed; }
.product-card:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.registers-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.register-card { min-height: 185px; padding: 19px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: 0 5px 18px rgba(17, 48, 41, .035); }
.register-card-head { display: flex; align-items: center; justify-content: space-between; }
.register-card-head > div { display: flex; align-items: center; gap: 10px; }
.register-card-icon { width: 42px; height: 42px; display: grid; place-items: center; color: var(--green-800); background: var(--green-100); border-radius: 12px; }
.register-card h3, .register-card p { margin: 0; }
.register-card h3 { font-size: .9rem; }
.register-card p { margin-top: 3px; color: var(--ink-500); font-size: .67rem; }
.register-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 21px; padding-top: 16px; border-top: 1px solid var(--line); }
.register-stats span, .register-stats strong { display: block; }
.register-stats span { color: var(--ink-500); font-size: .62rem; }
.register-stats strong { margin-top: 4px; font-size: .78rem; }
.branch-panel { margin-top: 15px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form-grid.single { grid-template-columns: 1fr; }
.form-grid label, .full-field { display: grid; gap: 7px; }
.form-grid input:not([type="checkbox"]), .form-grid select, .full-field input, .full-field select, .full-field textarea { width: 100%; min-height: 43px; padding: 0 12px; color: var(--ink-700); background: #fff; border: 1px solid #dce2df; border-radius: 9px; }
.full-field textarea { padding: 10px 12px; resize: vertical; }
.form-grid label > small { margin-top: -2px; color: var(--ink-500); font-size: .64rem; }
.branch-form { padding: 18px; }
.span-2 { grid-column: span 2; }
.suffix-input { position: relative; display: flex; }
.suffix-input input { padding-left: 54px !important; direction: ltr; text-align: right; }
.suffix-input > span { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--ink-500); font-size: .7rem; pointer-events: none; }
.toggle-label { min-height: 58px; position: relative; display: flex !important; align-items: center; justify-content: space-between; gap: 15px; padding: 9px 12px; background: var(--sand-50); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.toggle-label > span strong, .toggle-label > span small { display: block; }
.toggle-label > span small { margin-top: 3px; color: var(--ink-500); font-weight: 400; }
.toggle-label input { position: absolute; opacity: 0; }
.toggle-label i { position: relative; width: 40px; height: 23px; flex: 0 0 40px; background: #d4dad7; border-radius: 999px; transition: .2s; }
.toggle-label i::before { content: ""; position: absolute; top: 3px; right: 3px; width: 17px; height: 17px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.18); transition: .2s; }
.toggle-label input:checked + i { background: var(--green-700); }
.toggle-label input:checked + i::before { transform: translateX(-17px); }

.system-settings-grid { display: grid; grid-template-columns: minmax(320px, .82fr) minmax(0, 1.35fr); gap: 15px; align-items: start; }
.system-settings-grid .panel + .panel { margin-top: 0; }
.settings-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; }
.settings-icon svg { width: 19px; }
.settings-icon.amber { color: var(--amber-600); background: var(--amber-100); }
.settings-icon.green { color: var(--green-800); background: var(--green-100); }
.backup-options { display: grid; gap: 10px; padding: 15px; }
.backup-card { display: grid; grid-template-columns: 42px 1fr; gap: 11px; align-items: center; padding: 13px; background: var(--sand-50); border: 1px solid var(--line); border-radius: 12px; }
.backup-card-icon { width: 42px; height: 42px; grid-row: span 2; display: grid; place-items: center; color: var(--green-800); background: var(--green-100); border-radius: 11px; }
.backup-card-icon.restore { color: var(--amber-600); background: var(--amber-100); }
.backup-card-icon.update { color: #355b00; background: #eaffc4; box-shadow: inset 0 0 0 1px rgba(186,255,60,.45); }
.backup-card-icon svg { width: 20px; }
.backup-card strong, .backup-card p { margin: 0; }
.backup-card strong { display: block; font-size: .77rem; }
.backup-card p { margin-top: 3px; color: var(--ink-500); font-size: .62rem; line-height: 1.6; }
.backup-card > button, .backup-card > .file-button { grid-column: 2; width: max-content; }
.file-button { cursor: pointer; }
.file-button svg { width: 16px; }
.backup-status { display: flex; align-items: center; gap: 9px; margin: 0 15px 15px; padding: 10px 11px; color: var(--green-800); background: var(--green-100); border-radius: 10px; }
.backup-status > svg { width: 18px; }
.backup-status strong, .backup-status small { display: block; }
.backup-status strong { font-size: .68rem; }
.backup-status small { margin-top: 2px; color: var(--ink-500); font-size: .59rem; }
.backup-status.warning { color: var(--red-700); background: var(--red-100); }
.update-card.is-ready { border-color: rgba(37,242,188,.45); background: #f2fff9; }
.update-card.is-ready .backup-card-icon { color: #06150f; background: var(--neon-lime); }

.printer-list { display: grid; gap: 11px; padding: 15px; }
.printer-card { padding: 13px; border: 1px solid var(--line); border-radius: 12px; }
.printer-card-head { display: grid; grid-template-columns: 39px 1fr auto; align-items: center; gap: 9px; }
.printer-card-head strong, .printer-card-head small { display: block; }
.printer-card-head strong { font-size: .75rem; }
.printer-card-head small { margin-top: 3px; color: var(--ink-500); font-size: .6rem; }
.printer-icon { width: 39px; height: 39px; display: grid; place-items: center; color: var(--green-800); background: var(--green-100); border-radius: 10px; }
.printer-icon.kitchen { color: var(--amber-600); background: var(--amber-100); }
.printer-icon svg { width: 19px; }
.printer-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 13px; }
.printer-fields label { display: grid; gap: 6px; }
.printer-fields label > span { color: var(--ink-700); font-size: .64rem; font-weight: 700; }
.printer-fields input, .printer-fields select { width: 100%; height: 39px; padding: 0 10px; color: var(--ink-700); background: #fff; border: 1px solid #dce2df; border-radius: 8px; font-size: .68rem; }
.printer-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--line); }
.compact-toggle { min-height: 40px; flex: 1; padding-block: 5px; border: 0; background: transparent; }
.compact-toggle > span strong { font-size: .67rem; }
.printer-save-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 15px; background: var(--sand-50); border-top: 1px solid var(--line); }
.printer-save-row p { margin: 0; color: var(--ink-500); font-size: .61rem; line-height: 1.55; }

.report-heading { align-items: center; }
.date-filter { display: flex; padding: 3px; background: #e9ecea; border-radius: 9px; }
.date-filter button { min-height: 32px; padding: 0 12px; color: var(--ink-500); background: transparent; border: 0; border-radius: 7px; font-size: .67rem; font-weight: 700; }
.date-filter button.active { color: var(--green-800); background: #fff; box-shadow: 0 2px 7px rgba(17, 48, 41, .08); }
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; margin-bottom: 14px; }
.kpi-card { min-height: 125px; padding: 16px; background: #fff; border: 1px solid var(--line); border-radius: 15px; box-shadow: 0 5px 18px rgba(17, 48, 41, .035); }
.kpi-top { display: flex; align-items: center; justify-content: space-between; color: var(--ink-500); font-size: .68rem; }
.kpi-icon { width: 35px; height: 35px; display: grid; place-items: center; color: var(--green-800); background: var(--green-100); border-radius: 10px; }
.kpi-icon.amber { color: var(--amber-600); background: var(--amber-100); }
.kpi-icon.blue { color: var(--blue-700); background: var(--blue-100); }
.kpi-icon.red { color: var(--red-700); background: var(--red-100); }
.kpi-icon svg { width: 17px; }
.kpi-card > strong { display: block; margin-top: 11px; font-size: 1.17rem; }
.kpi-card > small { display: block; margin-top: 3px; color: var(--ink-500); font-size: .63rem; }
.trend-inline { color: #2d8466; font-weight: 750; }
.report-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, .8fr); gap: 14px; margin-bottom: 14px; }
.trend-up { padding: 5px 8px; color: #2d8466; background: #e9f5ef; border-radius: 999px; font-size: .64rem; font-weight: 750; }
.bar-chart { height: 208px; display: flex; align-items: flex-end; gap: 11px; padding: 25px 21px 18px; }
.bar-column { flex: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 7px; }
.bar { width: min(32px, 70%); min-height: 4px; position: relative; background: var(--green-700); border-radius: 7px 7px 3px 3px; transition: .3s ease; }
.bar:hover { background: var(--amber-500); }
.bar:hover::before { content: attr(data-value); position: absolute; bottom: calc(100% + 5px); left: 50%; padding: 4px 6px; color: #fff; background: var(--green-950); border-radius: 5px; transform: translateX(-50%); font-size: .56rem; white-space: nowrap; }
.bar-column small { color: var(--ink-500); font-size: .58rem; direction: ltr; }
.donut-wrap { min-height: 208px; display: flex; align-items: center; justify-content: center; gap: 24px; padding: 17px; }
.donut { width: 118px; height: 118px; flex: 0 0 118px; position: relative; display: grid; place-content: center; text-align: center; background: conic-gradient(var(--green-700) 0 65%, var(--amber-500) 65% 95%, #d5dcd8 95% 100%); border-radius: 50%; }
.donut::before { content: ""; position: absolute; inset: 17px; background: #fff; border-radius: 50%; }
.donut span, .donut small { position: relative; z-index: 1; }
.donut span { font-size: 1.2rem; font-weight: 800; }
.donut small { margin-top: 1px; color: var(--ink-500); font-size: .6rem; }
.donut-legend { display: grid; gap: 11px; }
.legend-item { display: grid; grid-template-columns: 8px auto; gap: 2px 7px; align-items: center; }
.legend-dot { width: 8px; height: 8px; grid-row: span 2; background: var(--legend-color); border-radius: 3px; }
.legend-item span { color: var(--ink-500); font-size: .62rem; }
.legend-item strong { font-size: .7rem; }
.report-table-head { min-height: 65px; }
.count-badge { min-width: 19px; height: 19px; display: inline-grid; place-items: center; margin-right: 4px; color: var(--red-700); background: var(--red-100); border-radius: 999px; font-size: .58rem; }
.sensitive-banner { display: flex; align-items: center; gap: 10px; margin: 13px 16px 3px; padding: 10px 12px; color: var(--red-700); background: #fff7f5; border: 1px solid #f2d8d3; border-radius: 10px; }
.sensitive-banner svg { width: 19px; }
.sensitive-banner strong, .sensitive-banner span { display: block; }
.sensitive-banner strong { font-size: .7rem; }
.sensitive-banner span { margin-top: 2px; color: #8b6863; font-size: .62rem; }
.cancel-sale { min-height: 29px; padding: 0 9px; color: var(--red-700); background: transparent; border: 1px solid #eccdc8; border-radius: 7px; font-size: .62rem; font-weight: 700; }
.movement-toolbar { min-height: 43px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 11px; color: var(--ink-500); background: var(--sand-50); border-bottom: 1px solid var(--line); font-size: .62rem; }
.movement-toolbar label { display: flex; align-items: center; gap: 8px; }
.movement-toolbar label > span { color: var(--ink-700); font-weight: 700; }
.movement-toolbar select { height: 31px; min-width: 230px; padding: 0 9px; color: var(--ink-700); background: #fff; border: 1px solid var(--line); border-radius: 8px; font-size: .62rem; }
#movement-summary { color: var(--green-800); font-weight: 700; }

.modal-backdrop { position: fixed; inset: 0; z-index: 80; background: rgba(8, 25, 21, .55); backdrop-filter: blur(3px); animation: fade-in .15s ease; }
.modal { position: fixed; top: 50%; left: 50%; z-index: 90; width: min(530px, calc(100% - 28px)); max-height: calc(100vh - 32px); overflow-y: auto; color: var(--ink-900); background: #fff; border: 1px solid rgba(255,255,255,.6); border-radius: 19px; box-shadow: 0 24px 70px rgba(8, 25, 21, .27); transform: translate(-50%, -50%); animation: modal-in .2s ease; }
@keyframes modal-in { from { opacity: 0; transform: translate(-50%, -48%) scale(.98); } }
.modal-head { min-height: 77px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 17px; border-bottom: 1px solid var(--line); }
.modal-head > div { display: flex; align-items: center; gap: 11px; }
.modal-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; }
.modal-icon.green { color: var(--green-800); background: var(--green-100); }
.modal-icon.amber { color: var(--amber-600); background: var(--amber-100); }
.modal-icon.red { color: var(--red-700); background: var(--red-100); }
.modal-icon svg { width: 20px; }
.modal-head small, .modal-head h3 { display: block; margin: 0; }
.modal-head small { color: var(--ink-500); font-size: .63rem; }
.modal-head h3 { margin-top: 2px; font-size: .98rem; }
.modal-head .icon-btn { border: 0; }
.modal-body { padding: 17px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 9px; padding: 13px 17px; background: var(--sand-50); border-top: 1px solid var(--line); }
.info-strip { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 15px; padding: 10px 12px; background: var(--green-100); border-radius: 9px; color: var(--green-800); font-size: .7rem; }
.info-strip span { color: var(--ink-500); }
.close-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 15px; }
.close-summary > div { padding: 11px; text-align: center; background: var(--sand-50); border: 1px solid var(--line); border-radius: 10px; }
.close-summary span, .close-summary strong { display: block; }
.close-summary span { color: var(--ink-500); font-size: .61rem; }
.close-summary strong { margin-top: 5px; font-size: .76rem; }
.full-field + .full-field { margin-top: 13px; }
.warning-box { margin-bottom: 14px; padding: 10px 12px; color: #8a5e27; background: #fff8eb; border: 1px solid #f1debb; border-radius: 9px; font-size: .69rem; line-height: 1.65; }
.payment-total { margin-bottom: 15px; padding: 15px; display: flex; align-items: center; justify-content: space-between; color: var(--green-800); background: var(--green-100); border-radius: 12px; }
.payment-total span { font-size: .75rem; font-weight: 700; }
.payment-total strong { font-size: 1.25rem; }
.payment-methods { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.payment-methods button { min-height: 98px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--ink-500); background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.payment-methods button.active { color: var(--green-800); background: var(--green-100); border-color: #a9cfc0; box-shadow: 0 0 0 2px rgba(45, 106, 92, .08); }
.payment-methods button > svg { width: 24px; height: 24px; margin-bottom: 4px; }
.payment-methods strong { color: var(--ink-900); font-size: .76rem; }
.payment-methods small { font-size: .58rem; }
.mixed-icon { height: 28px; display: flex; }
.mixed-icon svg { width: 22px; }
.mixed-icon svg + svg { margin-right: -5px; }
.cash-entry { margin-top: 14px; padding: 12px; background: var(--sand-50); border: 1px solid var(--line); border-radius: 11px; }
.cash-entry label { display: grid; gap: 6px; color: var(--ink-700); font-size: .68rem; font-weight: 700; }
.cash-entry input { width: 100%; height: 42px; padding: 0 11px; border: 1px solid #dbe1de; border-radius: 8px; }
.change-row { display: flex; justify-content: space-between; margin-top: 10px; padding-top: 9px; border-top: 1px dashed #cad2ce; color: var(--ink-500); font-size: .69rem; }
.change-row strong { color: var(--green-800); }

.drawer-summary-hero { padding: 17px; text-align: center; color: #fff; background: var(--green-900); border-radius: 14px; }
.drawer-summary-hero span, .drawer-summary-hero strong, .drawer-summary-hero small { display: block; }
.drawer-summary-hero span { color: rgba(255,255,255,.67); font-size: .68rem; }
.drawer-summary-hero strong { margin-top: 4px; font-size: 1.65rem; }
.drawer-summary-hero small { margin-top: 3px; color: rgba(255,255,255,.55); font-size: .61rem; }
.drawer-breakdown { display: grid; gap: 0; margin-top: 12px; border: 1px solid var(--line); border-radius: 11px; overflow: hidden; }
.drawer-breakdown > div { display: flex; align-items: center; justify-content: space-between; padding: 11px 12px; border-bottom: 1px solid var(--line); font-size: .7rem; }
.drawer-breakdown > div:last-child { border-bottom: 0; }
.drawer-breakdown span { color: var(--ink-500); }
.drawer-no-shift { min-height: 160px; display: grid; place-content: center; justify-items: center; text-align: center; color: var(--ink-500); }
.drawer-no-shift svg { width: 36px; height: 36px; margin-bottom: 10px; }
.drawer-no-shift strong { color: var(--ink-700); }
.drawer-no-shift small { margin-top: 4px; }

.shift-report-modal { width: min(610px, calc(100% - 28px)); }
.shift-report-success { display: flex; align-items: center; gap: 11px; margin-bottom: 13px; padding: 12px; color: var(--green-800); background: var(--green-100); border-radius: 11px; }
.shift-report-success svg { width: 22px; }
.shift-report-success strong, .shift-report-success span { display: block; }
.shift-report-success strong { font-size: .76rem; }
.shift-report-success span { margin-top: 2px; color: var(--ink-500); font-size: .64rem; }
.shift-report-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.shift-report-summary > div { min-height: 76px; display: grid; align-content: center; padding: 10px; text-align: center; background: var(--sand-50); border: 1px solid var(--line); border-radius: 10px; }
.shift-report-summary span, .shift-report-summary strong { display: block; }
.shift-report-summary span { color: var(--ink-500); font-size: .61rem; }
.shift-report-summary strong { margin-top: 5px; font-size: .78rem; }
.shift-report-summary .difference-ok strong { color: var(--green-700); }
.shift-report-summary .difference-alert strong { color: var(--red-700); }
.shift-report-meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 18px; margin-top: 12px; padding: 5px 12px; border: 1px solid var(--line); border-radius: 10px; }
.shift-report-meta div { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid #edf0ee; font-size: .66rem; }
.shift-report-meta div:nth-last-child(-n+2) { border-bottom: 0; }
.shift-report-meta span { color: var(--ink-500); }
.report-actions { display: grid; grid-template-columns: auto 1fr 1fr; }
.report-actions svg { width: 17px; }
.is-loading { opacity: .65; pointer-events: none; }

#print-root { display: none; }
.print-report-sheet { direction: rtl; color: #17211e; font-family: Tahoma, Arial, sans-serif; }
.print-report-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; color: #fff; background: #173f35; border-radius: 10px; }
.print-report-header h1, .print-report-header p { margin: 0; }
.print-report-header h1 { font-size: 20px; }
.print-report-header p { margin-top: 4px; color: rgba(255,255,255,.7); font-size: 10px; }
.print-report-logo { width: 54px; height: 66px; display: grid; place-items: center; padding: 2px; background: #fff; border-radius: 7px; }
.print-report-logo img { width: 100%; height: 100%; object-fit: contain; }
.print-report-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 12px 0; }
.print-report-meta div { padding: 10px; background: #f4f1ea; border-radius: 8px; }
.print-report-meta span, .print-report-meta strong { display: block; }
.print-report-meta span { color: #74817c; font-size: 9px; }
.print-report-meta strong { margin-top: 4px; font-size: 12px; }
.print-report-sheet table { min-width: 0; font-size: 10px; }
.print-report-sheet th, .print-report-sheet td { padding: 8px; border: 1px solid #e2e7e4; font-size: 9px; }
.print-report-sheet th { background: #e7f1ed; color: #173f35; }
.print-report-footer { margin-top: 14px; padding-top: 8px; color: #74817c; border-top: 1px solid #dfe4e1; text-align: center; font-size: 9px; }

.blocking-notice { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 13px; padding: 11px 12px; color: var(--red-700); background: #fff5f3; border: 1px solid #efcfca; border-radius: 11px; }
.blocking-notice svg { width: 19px; flex: 0 0 19px; margin-top: 1px; }
.blocking-notice strong, .blocking-notice span { display: block; }
.blocking-notice strong { font-size: .72rem; }
.blocking-notice span { margin-top: 3px; color: #8f6762; font-size: .64rem; line-height: 1.55; }
.open-tables-list { display: grid; gap: 10px; }
.open-table-card { padding: 13px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.open-table-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.open-table-identity { display: flex; align-items: center; gap: 10px; }
.table-number-badge { width: 42px; height: 42px; display: grid; place-items: center; color: var(--amber-600); background: var(--amber-100); border-radius: 11px; font-size: .88rem; font-weight: 850; }
.open-table-identity strong, .open-table-identity small { display: block; }
.open-table-identity strong { font-size: .78rem; }
.open-table-identity small { margin-top: 3px; color: var(--ink-500); font-size: .61rem; }
.open-table-total { text-align: left; }
.open-table-total strong, .open-table-total small { display: block; }
.open-table-total strong { color: var(--green-800); font-size: .86rem; }
.open-table-total small { margin-top: 3px; color: var(--red-700); font-size: .59rem; font-weight: 700; }
.open-table-items { margin-top: 10px; padding: 8px 10px; color: var(--ink-500); background: var(--sand-50); border-radius: 8px; font-size: .65rem; line-height: 1.6; }
.open-table-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 10px; }
.open-table-actions button { min-height: 36px; font-size: .68rem; }
.open-table-empty { min-height: 210px; display: grid; place-content: center; justify-items: center; text-align: center; color: var(--ink-500); }
.open-table-empty svg { width: 38px; height: 38px; margin-bottom: 10px; color: #a4ada9; }
.open-table-empty strong { color: var(--ink-700); font-size: .8rem; }
.open-table-empty span { margin-top: 4px; font-size: .64rem; }

.toast-stack { position: fixed; left: 19px; bottom: 19px; z-index: 120; width: min(360px, calc(100% - 38px)); display: grid; gap: 9px; }
.toast { min-height: 57px; display: flex; align-items: center; gap: 10px; padding: 10px 12px; color: #fff; background: var(--green-950); border-radius: 12px; box-shadow: 0 14px 35px rgba(8,25,21,.2); animation: toast-in .25s ease; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
.toast-icon { width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; color: var(--green-950); background: #8ad6b2; border-radius: 9px; }
.toast.error .toast-icon { color: var(--red-700); background: #ffd4ce; }
.toast-icon svg { width: 16px; }
.toast strong, .toast small { display: block; }
.toast strong { font-size: .72rem; }
.toast small { margin-top: 2px; color: rgba(255,255,255,.65); font-size: .61rem; }

/* Desktop-fit layout: every primary screen remains inside the viewport. */
@media (min-width: 921px) {
  html, body { height: 100%; overflow: hidden; }
  .app-shell { height: 100vh; min-height: 0; overflow: hidden; }
  .sidebar { height: 100vh; padding: 14px 14px 13px; }
  .brand { padding: 0 6px 15px; }
  .brand-mark { width: 43px; height: 51px; flex-basis: 43px; border-color: var(--neon-lime); }
  .brand strong { font-size: 1.05rem; }
  .brand small { font-size: .68rem; }
  .nav-item { min-height: 43px; border-radius: 10px; }
  .register-chip { min-height: 50px; padding-block: 7px; }
  .user-card { padding-top: 5px; }

  .workspace { height: 100vh; min-height: 0; overflow: hidden; }
  .topbar { position: static; height: 64px; padding: 0 18px; }
  .topbar-title h1 { font-size: 1.12rem; }
  .topbar-title small { font-size: .64rem; }
  .shift-pill { min-height: 37px; }
  .view { height: calc(100vh - 64px); max-width: none; padding: 11px 18px 13px; overflow: hidden; }

  #view-pos.active { display: flex; flex-direction: column; }
  .pos-statusbar { min-height: 38px; flex: 0 0 38px; margin-bottom: 9px; padding-inline: 12px; border-radius: 10px; font-size: .69rem; }
  .cashier-layout { min-height: 0; flex: 1; grid-template-columns: minmax(0, 1fr) 330px; gap: 10px; align-items: stretch; }
  .catalog-panel { height: 100%; display: flex; flex-direction: column; }
  .order-context { flex: 0 0 auto; padding: 9px 12px 8px; }
  .field-group { gap: 4px; }
  .field-group label, .full-field > span, .form-grid label > span { font-size: .67rem; }
  .segmented { padding: 3px; }
  .segmented button { min-height: 32px; font-size: .7rem; }
  .input-with-icon select { height: 38px; }
  .table-field { width: 165px; }
  .catalog-tools { flex: 0 0 auto; padding: 9px 12px 7px; }
  .search-box input { height: 37px; border-radius: 9px; }
  .category-tabs { gap: 5px; margin-top: 7px; }
  .category-tabs button { min-height: 28px; padding-inline: 12px; font-size: .66rem; }
  .products-grid { min-height: 0; flex: 1; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 8px; padding: 4px 12px 11px; overflow: hidden; }
  .product-card { min-height: 0; padding: 9px 10px; border-radius: 11px; }
  .product-visual { width: 32px; height: 32px; margin-bottom: 6px; border-radius: 9px; font-size: 1.05rem; }
  .product-card strong { font-size: .76rem; }
  .product-card small { margin-top: 1px; font-size: .59rem; }
  .product-card .price { font-size: .73rem; }
  .order-panel { position: static; top: auto; height: 100%; min-height: 0; }
  .order-head { min-height: 50px; padding-inline: 12px; }
  .order-icon { width: 32px; height: 32px; }
  .cart-list { min-height: 0; max-height: none; padding: 5px 11px; }
  .cart-empty { min-height: 130px; }
  .cart-empty .empty-receipt { width: 47px; height: 47px; margin-bottom: 7px; border-radius: 14px; }
  .cart-item { padding-block: 7px; }
  .order-note { margin: 0 11px 6px; }
  .order-note input { height: 33px; }
  .totals { gap: 4px; padding: 8px 12px; }
  .totals .grand-total { margin-top: 1px; padding-top: 6px; }
  .totals .grand-total strong { font-size: 1rem; }
  .order-buttons { gap: 6px; padding: 8px 11px 10px; }
  .suspend-button { min-height: 36px; }
  .pay-button { min-height: 43px; }

  #view-settings.active { display: flex; flex-direction: column; }
  .section-heading { min-height: 48px; flex: 0 0 auto; margin: 0 0 7px; }
  .section-heading h2 { margin: 1px 0 2px; font-size: 1.13rem; }
  .section-heading p { font-size: .67rem; }
  .settings-tabs { flex: 0 0 auto; margin-bottom: 8px; }
  .tab-bar { padding: 3px; }
  .tab-bar button { min-height: 31px; padding-inline: 13px; font-size: .66rem; }
  .settings-pane.active { min-height: 0; flex: 1; overflow: hidden; }
  .panel { border-radius: 13px; }
  .panel-head { min-height: 54px; padding: 8px 12px; }
  .panel-head h3 { font-size: .84rem; }
  .panel-head p { font-size: .61rem; }
  .primary.small, .secondary.small { min-height: 33px; padding-inline: 11px; font-size: .67rem; }
  .compact-search input { height: 33px; font-size: .65rem; }

  #settings-items.active { display: block; }
  #settings-items .table-panel { height: 100%; display: flex; flex-direction: column; overflow: hidden; }
  #settings-items .table-wrap { min-height: 0; flex: 1; overflow: hidden; }
  #settings-items table { min-width: 0; table-layout: fixed; }
  #view-settings th, #view-settings td { padding: 7px 10px; font-size: .66rem; }
  #view-settings th { font-size: .6rem; }
  #view-settings .item-thumb, #view-settings .person-avatar { width: 30px; height: 30px; border-radius: 8px; }
  #view-settings .item-cell strong, #view-settings .person-cell strong { font-size: .68rem; }
  #view-settings .item-cell small, #view-settings .person-cell small { font-size: .56rem; }

  #settings-users.active { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); grid-template-rows: 58px minmax(0, 1fr); gap: 9px; }
  #settings-users .user-stats { grid-column: 1 / -1; margin: 0; gap: 9px; }
  #settings-users .user-stats article { min-height: 58px; padding: 7px 12px; border-radius: 11px; }
  #settings-users .user-stat-icon { width: 34px; height: 34px; flex-basis: 34px; }
  #settings-users .user-stats strong { font-size: .88rem; }
  #settings-users > .panel { min-width: 0; height: 100%; margin: 0; display: flex; flex-direction: column; overflow: hidden; }
  #settings-users > .panel .table-wrap { min-height: 0; flex: 1; overflow: hidden; }
  #settings-users table { min-width: 0; table-layout: fixed; }
  #settings-users .users-panel-head { min-height: 78px; align-items: stretch; flex-direction: column; gap: 5px; }
  #settings-users .user-management-actions { display: grid; grid-template-columns: minmax(125px, 1fr) 92px auto; gap: 5px; }
  #settings-users .user-management-actions .compact-search input { width: 100%; }
  #settings-users .user-management-actions select { min-height: 33px; padding-inline: 8px; font-size: .62rem; }
  #settings-users .permission-panel .panel-head { min-height: 78px; align-items: stretch; flex-direction: column; gap: 5px; }
  #settings-users .permission-head-actions { justify-content: space-between; }
  #settings-users .permission-name small { white-space: normal; line-height: 1.35; }
  #settings-users .permissions-table th:first-child { width: 46%; }
  #settings-users .permissions-table td:first-child { white-space: normal; }
  #settings-users .switch { width: 34px; height: 19px; }
  #settings-users .switch i::before { width: 13px; height: 13px; }
  #settings-users .switch input:checked + i::before { transform: translateX(-15px); }
  #settings-users .row-action { width: 27px; height: 27px; }

  #settings-registers.active { display: block; }
  #settings-registers .registers-grid { gap: 9px; }
  #settings-registers .register-card { min-height: 116px; padding: 12px; border-radius: 13px; }
  #settings-registers .register-card-icon { width: 36px; height: 36px; }
  #settings-registers .register-stats { margin-top: 10px; padding-top: 8px; }
  #settings-registers .branch-panel { margin-top: 9px; overflow: hidden; }
  #settings-registers .branch-form { padding: 10px 12px; gap: 7px 10px; }
  #settings-registers .form-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #settings-registers .form-grid input:not([type="checkbox"]), #settings-registers .form-grid select { min-height: 34px; }

  #settings-system.active { display: block; }
  #settings-system .system-settings-grid { height: 100%; gap: 9px; }
  #settings-system .panel { height: 100%; overflow: hidden; }
  #settings-system .backup-options { gap: 7px; padding: 9px; }
  #settings-system .backup-card { grid-template-columns: 35px 1fr; gap: 7px; padding: 9px; border-radius: 10px; }
  #settings-system .backup-card-icon { width: 35px; height: 35px; }
  #settings-system .backup-status { margin: 0 9px 9px; padding: 8px 9px; }
  #settings-system .printer-list { gap: 7px; padding: 9px; }
  #settings-system .printer-card { padding: 8px 9px; border-radius: 10px; }
  #settings-system .printer-card-head { grid-template-columns: 33px 1fr auto; }
  #settings-system .printer-icon { width: 33px; height: 33px; }
  #settings-system .printer-fields { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 7px; }
  #settings-system .printer-fields label { gap: 3px; }
  #settings-system .printer-fields input, #settings-system .printer-fields select { height: 32px; padding-inline: 7px; font-size: .61rem; }
  #settings-system .printer-actions { margin-top: 6px; padding-top: 6px; }
  #settings-system .compact-toggle { min-height: 32px; }
  #settings-system .printer-save-row { padding: 7px 9px; }

  #view-reports.active { display: grid; grid-template-rows: 45px 74px 136px minmax(0, 1fr); gap: 8px; }
  #view-reports .report-heading { min-height: 45px; margin: 0; }
  #view-reports .heading-actions { gap: 5px; }
  #view-reports .date-filter button { min-height: 28px; padding-inline: 9px; }
  #view-reports .kpi-grid { gap: 8px; margin: 0; }
  #view-reports .kpi-card { min-height: 0; padding: 9px 11px; border-radius: 11px; }
  #view-reports .kpi-icon { width: 29px; height: 29px; }
  #view-reports .kpi-card > strong { margin-top: 3px; font-size: .92rem; }
  #view-reports .kpi-card > small { margin-top: 1px; font-size: .56rem; }
  #view-reports .report-grid { min-height: 0; height: 136px; gap: 8px; margin: 0; }
  #view-reports .report-grid .panel { height: 136px; overflow: hidden; }
  #view-reports .report-grid .panel-head { min-height: 39px; }
  #view-reports .bar-chart { height: 96px; padding: 8px 16px 6px; }
  #view-reports .donut-wrap { min-height: 96px; padding: 5px 12px; gap: 15px; }
  #view-reports .donut { width: 76px; height: 76px; flex-basis: 76px; }
  #view-reports .donut::before { inset: 13px; }
  #view-reports .report-table-panel { min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
  #view-reports .report-table-head { min-height: 43px; flex: 0 0 43px; }
  #view-reports .report-table-head .tab-bar { gap: 3px; }
  #view-reports .report-table-head .tab-bar button { padding-inline: 9px; font-size: .59rem; }
  #view-reports .report-pane.active { min-height: 0; flex: 1; overflow: hidden; }
  #view-reports .report-pane .table-wrap { height: 100%; overflow: hidden; }
  #view-reports table { min-width: 0; table-layout: fixed; }
  #view-reports th, #view-reports td { padding: 4px 8px; font-size: .59rem; line-height: 1.2; }
  #view-reports th { font-size: .55rem; }
  #view-reports .status { padding: 3px 6px; font-size: .56rem; }
  #view-reports .cancel-sale { min-height: 24px; padding-inline: 7px; font-size: .56rem; }
  #view-reports .sensitive-banner { margin: 7px 10px 2px; padding: 7px 9px; }
  #view-reports .movement-toolbar { min-height: 38px; padding-block: 3px; }
  #view-reports .movement-toolbar select { height: 29px; }

  #view-about.active { display: flex; flex-direction: column; }
  #view-about .about-hero { min-height: 124px; flex: 0 0 124px; padding: 18px 22px; border-radius: 16px; }
  #view-about .about-company-mark { width: 61px; height: 61px; flex-basis: 61px; border-radius: 17px; }
  #view-about .about-identity h2 { font-size: 1.16rem; }
  #view-about .about-identity p { font-size: .67rem; }
  #view-about .about-content { min-height: 0; flex: 1; grid-template-rows: minmax(0, 1fr) 149px; gap: 9px; margin-top: 9px; }
  #view-about .panel { height: 100%; }
  #view-about .panel-head { min-height: 47px; }
  #view-about .company-data { padding: 0 12px 7px; }
  #view-about .company-data > div { min-height: 48px; padding: 8px 2px 6px; }
  #view-about .company-data dt { font-size: .57rem; }
  #view-about .company-data dd { margin-top: 3px; font-size: .66rem; }
  #view-about .company-services { display: grid; grid-template-rows: 43px 1fr 36px; }
  #view-about .services-list { gap: 7px; padding: 7px 10px; }
  #view-about .services-list article { padding: 7px 9px; border-radius: 9px; }
  #view-about .services-list article > span { width: 31px; height: 31px; flex-basis: 31px; }
  #view-about .services-list strong { font-size: .66rem; }
  #view-about .services-list p { font-size: .55rem; line-height: 1.35; }
  #view-about .about-note { min-height: 31px; margin: 0 10px 7px; font-size: .61rem; }
}

@media (max-width: 1180px) {
  :root { --sidebar: 210px; }
  .cashier-layout { grid-template-columns: minmax(0, 1fr) 330px; }
  .products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .system-settings-grid { grid-template-columns: 1fr; }
}

@media (max-width: 920px) {
  :root { --sidebar: 78px; }
  .sidebar { padding-inline: 10px; }
  .brand { justify-content: center; padding-inline: 0; }
  .brand > span:last-child, .nav-item span, .sidebar-foot { display: none; }
  .nav-item { justify-content: center; padding: 0; }
  .cashier-layout { grid-template-columns: 1fr; }
  .order-panel { position: static; min-height: auto; }
  .cart-list { max-height: 330px; }
  .report-grid { grid-template-columns: 1fr; }
  .registers-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  :root { --sidebar: 0px; }
  body { min-height: 100dvh; overscroll-behavior-y: none; }
  .login-screen { min-height: 100dvh; padding: max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom)); overflow-y: auto; }
  .app-shell { min-height: 100dvh; }
  .sidebar { inset: auto 0 0; width: 100%; height: calc(66px + env(safe-area-inset-bottom)); padding: 7px 12px calc(7px + env(safe-area-inset-bottom)); border: 0; box-shadow: 0 -6px 24px rgba(8,25,21,.16); }
  .brand, .sidebar-foot { display: none; }
  .main-nav { grid-template-columns: repeat(4, 1fr); gap: 5px; }
  .nav-item { min-height: 50px; display: flex; flex-direction: column; gap: 2px; padding: 3px 4px; font-size: .59rem; border-radius: 10px; }
  .nav-item span { display: block; }
  .nav-item svg { width: 19px; }
  .nav-item.active { box-shadow: inset 0 -2px var(--amber-500); }
  .workspace { margin-right: 0; padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
  .topbar { height: calc(68px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 14px 0; }
  .topbar-title small { display: none; }
  .topbar-title h1 { font-size: 1.05rem; }
  .mobile-menu { display: none; }
  .datetime { display: none; }
  .shift-pill { min-height: 37px; padding: 0 10px; font-size: .68rem; }
  .view { padding: 13px 12px 20px; }
  .about-hero { min-height: 0; align-items: flex-start; flex-direction: column; padding: 20px; }
  .about-identity { align-items: flex-start; flex-direction: column; }
  .about-identity h2 { font-size: 1.18rem; }
  .about-hero-actions { width: 100%; justify-items: stretch; }
  .about-status, .about-install { justify-content: center; }
  .about-content { grid-template-columns: 1fr; }
  .company-services { grid-column: auto; }
  .services-list { grid-template-columns: 1fr; }
  .pos-statusbar { overflow-x: auto; white-space: nowrap; }
  .pos-statusbar .divider, .pos-statusbar > div:first-child { display: none; }
  .statusbar-actions { margin-right: 0; }
  #drawer-button { display: none; }
  .context-row { align-items: stretch; flex-direction: column; }
  .table-field { width: 100%; }
  .products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-inline: 12px; }
  .catalog-tools, .order-context { padding-inline: 12px; }
  .product-card { min-height: 120px; padding: 11px; }
  .section-heading, .report-heading { align-items: stretch; flex-direction: column; margin-bottom: 15px; }
  .heading-actions { align-items: stretch; flex-direction: column; }
  .date-filter { display: grid; grid-template-columns: repeat(3, 1fr); }
  .kpi-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .kpi-card { min-height: 115px; }
  .panel-head { align-items: stretch; flex-direction: column; }
  .panel-actions, .report-table-head { align-items: stretch; flex-direction: column; }
  .user-stats { grid-template-columns: 1fr; gap: 8px; }
  .user-stats article { min-height: 68px; }
  .user-management-actions select, .user-management-actions button { width: 100%; }
  .permission-head-actions { align-items: stretch; flex-direction: column; }
  .compact-search input { width: 100%; }
  .form-grid { grid-template-columns: 1fr; }
  .span-2 { grid-column: span 1; }
  .payment-methods { grid-template-columns: 1fr; }
  .payment-methods button { min-height: 70px; display: grid; grid-template-columns: 35px 1fr; grid-template-rows: auto auto; justify-items: start; text-align: right; padding: 10px 14px; }
  .payment-methods button > svg { grid-row: span 2; margin: 0; align-self: center; }
  .modal-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .modal-actions > * { width: 100%; }
  .close-summary { grid-template-columns: 1fr; }
  .shift-report-summary { grid-template-columns: 1fr 1fr; }
  .shift-report-meta { grid-template-columns: 1fr; }
  .shift-report-meta div:nth-last-child(-n+2) { border-bottom: 1px solid #edf0ee; }
  .shift-report-meta div:last-child { border-bottom: 0; }
  .report-actions { grid-template-columns: 1fr; }
  .printer-fields { grid-template-columns: 1fr; }
  .printer-actions, .printer-save-row { align-items: stretch; flex-direction: column; }
}

@media (max-width: 430px) {
  .kpi-grid { grid-template-columns: 1fr; }
  .products-grid { gap: 8px; }
  .product-card strong { font-size: .76rem; }
  .segmented button { padding: 0 8px; }
  .donut-wrap { flex-direction: column; }
  .login-card { padding: 19px; border-radius: 20px; }
  .login-heading { margin-block: 17px 14px; }
  .movement-toolbar { align-items: stretch; flex-direction: column; }
  .movement-toolbar label { align-items: stretch; flex-direction: column; }
  .movement-toolbar select { min-width: 0; width: 100%; }
}

@media (max-width: 720px) and (orientation: landscape) {
  .login-screen { place-items: start center; }
  .login-card { width: min(620px, 100%); }
  .login-brand { padding-bottom: 10px; }
  .login-heading { margin-block: 10px; }
  #login-form { grid-template-columns: 1fr 1fr; align-items: end; }
  #login-form .login-error, #login-form .login-submit { grid-column: 1 / -1; }
  .login-foot { margin-top: 10px; padding-top: 9px; }
}

@page { size: A4 portrait; margin: 10mm; }

@media print {
  body.printing-report { background: #fff; }
  body.printing-report .app-shell,
  body.printing-report .modal,
  body.printing-report .modal-backdrop,
  body.printing-report .toast-stack { display: none !important; }
  body.printing-report #print-root { display: block !important; }
  .sidebar, .topbar, button, .heading-actions, .settings-tabs, .report-table-head .compact-search { display: none !important; }
  .workspace { margin: 0; }
  .view { display: none !important; padding: 0; }
  #view-reports.active { display: block !important; }
  .panel, .kpi-card { box-shadow: none; break-inside: avoid; }
}