:root {
  color-scheme: light;
  --blue: #2175c7;
  --blue-dark: #1a5f9a;
  --blue-soft: #e3f2fd;
  --navy: #17243a;
  --text: #26354a;
  --muted: #66758a;
  --surface: #ffffff;
  --canvas: #f3f6fa;
  --border: #dce5ef;
  --success: #17845a;
  --warning: #d68910;
  --danger: #c93939;
  --shadow: 0 14px 38px rgba(31, 55, 82, 0.09);
  --radius-lg: 20px;
  --radius-md: 14px;
  --sidebar: 264px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; background: var(--canvas); color: var(--text); }
body { min-width: 320px; font-size: 16px; line-height: 1.5; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
.icon { width: 21px; height: 21px; flex: 0 0 auto; }

.app-layout { min-height: 100vh; display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; background: var(--navy); color: #dce8f5; padding: 22px 16px 16px; z-index: 20; }
.brand { display: flex; align-items: center; gap: 12px; padding: 0 8px 20px; color: white; text-decoration: none; }
.brand img { width: 42px; height: 42px; object-fit: contain; border-radius: 12px; background: white; }
.brand-name { display: block; font-size: 1.08rem; font-weight: 760; letter-spacing: -0.02em; }
.brand-product { display: block; color: #9db4cd; font-size: 0.8rem; }
.nav-label { padding: 10px 12px 7px; color: #8098b2; font-size: 0.72rem; font-weight: 750; letter-spacing: 0.1em; text-transform: uppercase; }
.nav { overflow: auto; scrollbar-width: thin; }
.nav a { min-height: 46px; display: flex; align-items: center; gap: 12px; margin: 3px 0; padding: 10px 12px; border-radius: 12px; color: #c8d7e8; text-decoration: none; font-weight: 620; font-size: 0.93rem; }
.nav a:hover { background: rgba(255,255,255,.07); color: white; }
.nav a.active { background: var(--blue); color: white; box-shadow: 0 9px 20px rgba(18, 91, 161, .28); }
.sidebar-footer { margin-top: auto; padding-top: 14px; }
.local-status { display: flex; gap: 10px; align-items: center; padding: 12px; border-radius: 13px; background: rgba(255,255,255,.06); color: #b9cbdd; font-size: 0.82rem; }
.local-status .icon { color: #7dc8ff; }

.workspace { min-width: 0; }
.topbar { height: 76px; position: sticky; top: 0; z-index: 15; display: flex; align-items: center; gap: 16px; padding: 0 30px; background: rgba(255,255,255,.92); border-bottom: 1px solid var(--border); backdrop-filter: blur(14px); }
.menu-button { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 12px; background: white; color: var(--navy); }
.workspace-title { min-width: 0; }
.workspace-title strong { display: block; color: var(--navy); font-size: 1rem; }
.workspace-title span { display: block; max-width: 340px; overflow: hidden; color: var(--muted); font-size: 0.78rem; text-overflow: ellipsis; white-space: nowrap; }
.topbar-spacer { flex: 1; }
.status-chip { min-height: 38px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 999px; background: white; color: var(--muted); font-size: 0.83rem; font-weight: 670; }
.status-chip.online { color: var(--success); border-color: #c6e7d8; background: #f1fbf6; }
.status-chip.offline { color: #975d09; border-color: #f1d4a8; background: #fff8ed; }
.install-button { min-height: 42px; display: none; align-items: center; gap: 8px; border: 0; border-radius: 12px; padding: 9px 14px; background: var(--blue); color: white; font-weight: 720; }
.install-button.visible { display: inline-flex; }
.user-button { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 50%; background: var(--blue-soft); color: var(--blue-dark); }

.main { padding: 30px; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.page-heading h1 { margin: 0; color: var(--navy); font-size: clamp(1.65rem, 2vw, 2.1rem); letter-spacing: -0.04em; }
.page-heading p { margin: 7px 0 0; color: var(--muted); }
.secondary-button { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 12px; padding: 9px 14px; background: white; color: var(--navy); font-weight: 700; }
.secondary-button:hover { border-color: #b8cae0; background: #fafdff; }

.readiness-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.readiness-card { min-height: 132px; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: 0 6px 18px rgba(31,55,82,.04); }
.readiness-icon { width: 42px; height: 42px; display: grid; place-items: center; margin-bottom: 15px; border-radius: 13px; background: var(--blue-soft); color: var(--blue-dark); }
.readiness-card strong { display: block; color: var(--navy); font-size: 0.98rem; }
.readiness-card span { display: block; margin-top: 4px; color: var(--muted); font-size: 0.82rem; }
.ready-mark { color: var(--success); }

.content-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(290px, .85fr); gap: 20px; }
.panel { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); overflow: hidden; }
.panel-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 19px 22px; border-bottom: 1px solid var(--border); }
.panel-header h2 { margin: 0; color: var(--navy); font-size: 1.02rem; }
.panel-header span { color: var(--muted); font-size: .8rem; }
.empty-state { min-height: 300px; display: grid; place-items: center; padding: 40px 24px; text-align: center; }
.empty-state-graphic { width: 70px; height: 70px; display: grid; place-items: center; margin: 0 auto 18px; border-radius: 22px; background: var(--blue-soft); color: var(--blue-dark); }
.empty-state-graphic .icon { width: 32px; height: 32px; }
.empty-state h3 { margin: 0; color: var(--navy); font-size: 1.12rem; }
.empty-state p { max-width: 480px; margin: 8px auto 0; color: var(--muted); }
.foundation-list { margin: 0; padding: 8px 20px 16px; list-style: none; }
.foundation-list li { display: flex; align-items: center; gap: 12px; padding: 14px 2px; border-bottom: 1px solid #edf1f6; }
.foundation-list li:last-child { border-bottom: 0; }
.foundation-list .icon { color: var(--blue); }
.foundation-list strong { display: block; color: var(--navy); font-size: .9rem; }
.foundation-list span { display: block; color: var(--muted); font-size: .78rem; }
.list-status { margin-left: auto; color: var(--success); font-size: .78rem; font-weight: 750; }

.module-state { min-height: calc(100vh - 136px); display: grid; place-items: center; }
.module-state .panel { width: min(720px, 100%); }
.module-state .empty-state { min-height: 420px; }
.context-strip { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 20px; justify-content: center; }
.context-pill { padding: 7px 10px; border-radius: 999px; background: #f0f4f8; color: var(--muted); font-size: .78rem; }
.inline-loading { margin: 80px auto; box-shadow: none; }
.pending-sync { color: var(--blue-dark); background: var(--blue-soft); border-color: #c8e1f5; }

.metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-bottom: 22px; }
.metric-card { min-height: 132px; display: flex; flex-direction: column; justify-content: space-between; padding: 22px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: white; box-shadow: var(--shadow); }
.metric-card span { color: var(--muted); font-size: .88rem; font-weight: 680; }
.metric-card strong { color: var(--navy); font-size: clamp(1.7rem, 3vw, 2.35rem); letter-spacing: -.04em; }
.dashboard-state { min-height: 250px; display: grid; place-items: center; padding: 34px; text-align: center; }
.dashboard-state h2 { margin: 0; color: var(--navy); }
.dashboard-state p { max-width: 580px; margin: 8px auto 16px; color: var(--muted); }

.pos-shell { min-height: calc(100vh - 76px); display: grid; grid-template-columns: 190px minmax(420px, 1fr) 370px; margin: -30px; background: var(--canvas); }
.pos-categories, .pos-cart { background: white; }
.pos-categories { display: flex; flex-direction: column; gap: 8px; padding: 24px 16px; border-right: 1px solid var(--border); }
.pos-categories h2, .pos-cart h2 { margin: 2px 0 18px; color: var(--navy); font-size: 1.22rem; }
.eyebrow { color: var(--blue); font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.category-button { min-height: 44px; border: 0; border-radius: 11px; padding: 10px 12px; background: transparent; color: var(--text); text-align: left; font-weight: 680; }
.category-button:hover, .category-button.active { background: var(--blue-soft); color: var(--blue-dark); }
.pos-connection { display: flex; align-items: center; gap: 8px; margin-top: auto; padding: 10px; color: var(--muted); font-size: .8rem; }
.pos-connection .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--success); }
.pos-products { min-width: 0; padding: 24px; overflow: auto; }
.pos-search-row { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(180px, .55fr); gap: 12px; }
.pos-search, .barcode-input, .payment-panel label { display: grid; gap: 6px; color: var(--muted); font-size: .76rem; font-weight: 700; }
.pos-search input, .barcode-input input, .payment-panel input, .item-notes { width: 100%; min-height: 46px; border: 1px solid var(--border); border-radius: 12px; padding: 10px 13px; background: white; color: var(--navy); outline: 0; }
.pos-search input:focus, .barcode-input input:focus, .payment-panel input:focus, .item-notes:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(33,117,199,.12); }
.pos-section-heading { display: flex; justify-content: space-between; margin: 24px 0 14px; }
.pos-section-heading h1 { margin: 0; color: var(--navy); font-size: 1.35rem; }
.pos-section-heading p { margin: 3px 0 0; color: var(--muted); font-size: .82rem; }
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 13px; }
.product-card { min-height: 154px; display: flex; flex-direction: column; align-items: flex-start; border: 1px solid var(--border); border-radius: 16px; padding: 16px; background: white; color: var(--text); text-align: left; box-shadow: 0 5px 14px rgba(31,55,82,.04); }
.product-card:hover { border-color: #a9c9e8; transform: translateY(-1px); }
.product-card strong { margin: 12px 0 auto; color: var(--navy); font-size: 1rem; }
.product-card > span:not(.product-category) { color: var(--blue-dark); font-weight: 780; }
.product-card small { margin-top: 4px; color: var(--muted); }
.product-category { padding: 5px 8px; border-radius: 999px; background: var(--blue-soft); color: var(--blue-dark); font-size: .68rem; font-weight: 760; }
.pos-empty { min-height: 360px; display: grid; place-content: center; text-align: center; }
.pos-empty h3 { margin: 0; color: var(--navy); }
.pos-empty p { margin: 7px 0; color: var(--muted); }
.pos-cart { min-width: 0; display: flex; flex-direction: column; border-left: 1px solid var(--border); }
.cart-heading { display: flex; align-items: flex-start; justify-content: space-between; padding: 22px 20px 10px; }
.cart-heading button, .cart-line-title button { border: 0; background: transparent; color: var(--danger); font-size: .78rem; font-weight: 720; }
.cart-heading button:disabled { color: #a7b1bf; cursor: default; }
.pos-message { margin: 0 20px 10px; padding: 10px 12px; border-radius: 10px; font-size: .8rem; }
.pos-message.error { background: #fff0f0; color: #9e2f2f; }
.pos-message.success { background: #eefaf4; color: #17704f; }
.cart-lines { flex: 1; min-height: 150px; overflow: auto; padding: 0 20px; }
.cart-empty { display: grid; place-content: center; min-height: 210px; text-align: center; }
.cart-empty h3 { margin: 0; color: var(--navy); }
.cart-empty p { margin: 5px 0; color: var(--muted); }
.cart-line { padding: 14px 0; border-bottom: 1px solid #edf1f6; }
.cart-line-title { display: flex; justify-content: space-between; gap: 12px; }
.cart-line-title strong { color: var(--navy); }
.cart-line-controls { display: grid; grid-template-columns: 34px 32px 34px 1fr; align-items: center; gap: 5px; margin-top: 10px; }
.cart-line-controls button { width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 9px; background: white; color: var(--navy); font-size: 1.1rem; }
.cart-line-controls span { text-align: center; font-weight: 740; }
.cart-line-controls strong { justify-self: end; color: var(--navy); }
.item-notes { min-height: 38px; margin-top: 9px; font-size: .78rem; }
.payment-panel { padding: 18px 20px 22px; border-top: 1px solid var(--border); background: #fbfdff; }
.total-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 13px; color: var(--muted); }
.total-row strong { color: var(--navy); font-size: 1.2rem; }
.total-row.change { margin-top: 13px; }
.cart-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 14px 0 10px; }
.cart-actions button { justify-content: center; }
.cash-button { width: 100%; min-height: 50px; border: 0; border-radius: 13px; background: var(--blue); color: white; font-weight: 780; }
.cash-button:disabled, .cart-actions button:disabled { opacity: .45; cursor: default; }

.error-banner { display: none; align-items: flex-start; gap: 12px; margin-bottom: 18px; padding: 14px 16px; border: 1px solid #f1bbbb; border-radius: 14px; background: #fff4f4; color: #8d2c2c; }
.error-banner.visible { display: flex; }
.startup-screen { min-height: 100vh; display: grid; place-items: center; padding: 28px; background: var(--canvas); }
.startup-card { width: min(420px, 100%); padding: 34px; border: 1px solid var(--border); border-radius: 24px; background: white; box-shadow: var(--shadow); text-align: center; }
.startup-card img { width: 74px; height: 74px; object-fit: contain; }
.startup-card h1 { margin: 16px 0 6px; color: var(--navy); font-size: 1.45rem; }
.startup-card p { margin: 0; color: var(--muted); }
.access-page { min-height: 100vh; display: grid; place-items: center; padding: 28px; background: var(--canvas); }
.access-card { width: min(480px, 100%); padding: 34px; border: 1px solid var(--border); border-radius: 24px; background: white; box-shadow: var(--shadow); }
.access-card.wide { width: min(680px, 100%); }
.access-card > img { width: 64px; height: 64px; object-fit: contain; margin-bottom: 18px; }
.access-card h1 { margin: 6px 0; color: var(--navy); letter-spacing: -.03em; }
.access-card > p { margin: 0 0 22px; color: var(--muted); }
.access-form { display: grid; gap: 15px; margin-top: 20px; }
.access-form.two-column { grid-template-columns: 1fr 1fr; }
.access-form label { display: grid; gap: 6px; color: var(--muted); font-size: .8rem; font-weight: 700; }
.access-form input, .access-form select { width: 100%; min-height: 46px; border: 1px solid var(--border); border-radius: 12px; padding: 10px 13px; background: white; color: var(--navy); }
.access-form .full { grid-column: 1 / -1; }
.access-message { margin: 14px 0; padding: 12px 14px; border: 1px solid #c8e1f5; border-radius: 12px; background: var(--blue-soft); color: var(--blue-dark); }
.hidden { display: none !important; }
.product-management-grid { display: grid; grid-template-columns: minmax(320px, .8fr) minmax(420px, 1.2fr); gap: 20px; }
.product-form-panel { align-self: start; }
.product-form-panel form { padding: 0 22px 22px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.local-product-list article { display: flex; justify-content: space-between; gap: 16px; padding: 17px 22px; border-bottom: 1px solid var(--border); }
.local-product-list article:last-child { border-bottom: 0; }
.local-product-list strong, .local-product-list span { display: block; }
.local-product-list strong { color: var(--navy); }
.local-product-list span { margin-top: 3px; color: var(--muted); font-size: .78rem; }
.local-product-list article > div:last-child { text-align: right; }
.loading-line { height: 5px; margin-top: 24px; border-radius: 99px; background: #edf2f7; overflow: hidden; }
.loading-line::after { content: ""; display: block; width: 45%; height: 100%; border-radius: inherit; background: var(--blue); animation: loading 1.1s ease-in-out infinite alternate; }
@keyframes loading { to { transform: translateX(125%); } }

.sidebar-backdrop { display: none; }
body.pos-mode .sidebar { display: none; }
body.pos-mode .app-layout { grid-template-columns: 1fr; }
body.pos-mode .menu-button { display: inline-flex; }

@media (max-width: 1180px) {
  :root { --sidebar: 224px; }
  .readiness-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .content-grid { grid-template-columns: 1fr; }
  .pos-shell { grid-template-columns: 150px minmax(360px, 1fr) 330px; }
}

@media (max-width: 900px) {
  .app-layout { grid-template-columns: 1fr; }
  .sidebar { position: fixed; left: 0; width: min(292px, 86vw); transform: translateX(-105%); transition: transform .2s ease; box-shadow: 20px 0 50px rgba(12,25,40,.22); }
  .sidebar.open { transform: translateX(0); }
  .sidebar-backdrop { position: fixed; inset: 0; z-index: 18; background: rgba(10,24,40,.38); }
  .sidebar-backdrop.visible { display: block; }
  .menu-button { display: inline-flex; }
  .topbar { padding: 0 18px; }
  .main { padding: 22px 18px; }
  .metric-grid { grid-template-columns: 1fr 1fr; }
  .pos-shell { min-height: calc(100vh - 76px); grid-template-columns: 132px minmax(330px, 1fr) 310px; margin: -22px -18px; overflow: auto; }
  .product-management-grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .topbar { height: 68px; gap: 10px; }
  .workspace-title span, .status-chip span, .install-button span { display: none; }
  .status-chip { width: 42px; justify-content: center; padding: 8px; }
  .readiness-grid { grid-template-columns: 1fr; }
  .metric-grid { grid-template-columns: 1fr; }
  .page-heading { align-items: flex-start; flex-direction: column; }
  .main { padding: 18px 14px; }
  .panel-header { padding: 16px 18px; }
  .pos-shell { display: block; margin: -18px -14px; }
  .pos-categories { position: static; flex-direction: row; overflow: auto; border-right: 0; border-bottom: 1px solid var(--border); padding: 12px; }
  .pos-categories > div:first-child, .pos-connection { display: none; }
  .category-button { white-space: nowrap; }
  .pos-products { padding: 16px 14px; }
  .pos-search-row { grid-template-columns: 1fr; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pos-cart { border-left: 0; border-top: 1px solid var(--border); }
  .access-form.two-column, .form-row { grid-template-columns: 1fr; }
  .access-form .full { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}


/* Step 5 standard business management */
.branch-selector { display: grid; gap: 3px; min-width: 170px; color: var(--muted); font-size: .68rem; font-weight: 750; }
.branch-selector span { line-height: 1; }
.branch-selector select { width: 100%; min-height: 38px; border: 1px solid var(--border); border-radius: 11px; padding: 7px 32px 7px 10px; background: white; color: var(--navy); font-weight: 700; }

.product-toolbar, .inventory-toolbar { display: grid; gap: 12px; margin-bottom: 18px; }
.product-toolbar { grid-template-columns: minmax(240px, 1.4fr) minmax(170px, .7fr) minmax(145px, .55fr) auto; align-items: end; }
.inventory-toolbar { grid-template-columns: minmax(260px, 520px); }
.product-toolbar label, .inventory-toolbar label { display: grid; gap: 6px; color: var(--muted); font-size: .76rem; font-weight: 720; }
.product-toolbar input, .product-toolbar select, .inventory-toolbar input { width: 100%; min-height: 44px; border: 1px solid var(--border); border-radius: 12px; padding: 9px 12px; background: white; color: var(--navy); }
.form-actions { display: grid; gap: 10px; }
.danger-button { justify-content: center; color: var(--danger); border-color: #edc5c5; }
.current-stock-box { display: grid; gap: 3px; padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: #f8fbfe; }
.current-stock-box span, .current-stock-box small { color: var(--muted); font-size: .76rem; }
.current-stock-box strong { color: var(--navy); font-size: 1.35rem; }
.product-list-manage article.inactive { opacity: .66; }
.product-row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
.product-row-actions .secondary-button { min-height: 38px; padding: 7px 11px; }

.inventory-list { display: grid; }
.inventory-row { display: grid; grid-template-columns: minmax(220px, 1.2fr) minmax(120px, .45fr) minmax(300px, 1fr); gap: 18px; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--border); }
.inventory-row:last-child { border-bottom: 0; }
.inventory-product strong, .inventory-product span, .inventory-product small, .inventory-quantity strong, .inventory-quantity small { display: block; }
.inventory-product strong { color: var(--navy); }
.inventory-product span, .inventory-product small, .inventory-quantity small { margin-top: 3px; color: var(--muted); font-size: .76rem; }
.inventory-quantity strong { color: var(--navy); font-size: 1.35rem; }
.stock-state { display: inline-flex; margin-top: 4px; padding: 4px 8px; border-radius: 999px; font-size: .68rem; font-weight: 780; }
.stock-state.ok { background: #eefaf4; color: var(--success); }
.stock-state.low { background: #fff8ed; color: #975d09; }
.stock-state.out { background: #fff0f0; color: var(--danger); }
.inventory-adjust { display: grid; grid-template-columns: minmax(85px, .45fr) minmax(140px, 1fr); gap: 8px; }
.inventory-adjust > div { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.inventory-adjust input { width: 100%; min-height: 40px; border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; color: var(--navy); }
.inventory-adjust button { min-height: 38px; justify-content: center; }

.product-card.out-of-stock { opacity: .58; cursor: not-allowed; background: #f7f9fb; }
.product-card.out-of-stock:hover { transform: none; border-color: var(--border); }
.pos-connection { align-items: flex-start; }
.pos-connection > span:last-child { display: grid; }
.pos-connection small { color: var(--muted); font-size: .68rem; }
.pos-connection.offline .dot { background: var(--warning); }
.recent-sales { margin-top: 26px; }
.recent-sales .pos-section-heading { margin-bottom: 10px; }
.recent-sales-list { overflow: hidden; border: 1px solid var(--border); border-radius: 14px; background: white; }
.recent-sales-list article { display: flex; justify-content: space-between; gap: 18px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.recent-sales-list article:last-child { border-bottom: 0; }
.recent-sales-list strong, .recent-sales-list span { display: block; }
.recent-sales-list strong { color: var(--navy); font-size: .82rem; }
.recent-sales-list span { margin-top: 2px; color: var(--muted); font-size: .7rem; }
.recent-sales-list article > div:last-child { text-align: right; }
.recent-sales-empty { padding: 16px; border: 1px dashed var(--border); border-radius: 12px; color: var(--muted); font-size: .82rem; }

@media (min-width: 1500px) {
  .pos-shell { grid-template-columns: 210px minmax(620px, 1fr) 390px; }
  .product-grid { grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); }
}

@media (max-width: 1180px) {
  .topbar { gap: 10px; padding-inline: 18px; }
  .branch-selector { min-width: 145px; }
  .topbar .status-chip span { display: none; }
  .topbar .status-chip { width: 42px; justify-content: center; padding: 8px; }
  .pos-shell { grid-template-columns: 120px minmax(320px, 1fr) 300px; }
  .pos-categories { padding-inline: 10px; }
  .pos-products { padding-inline: 16px; }
  .product-toolbar { grid-template-columns: 1fr 1fr 1fr; }
  .product-toolbar > button { grid-column: 1 / -1; justify-self: start; }
  .inventory-row { grid-template-columns: minmax(190px, 1fr) 110px minmax(250px, 1fr); }
}

@media (max-width: 820px) and (min-width: 621px) {
  .pos-shell { grid-template-columns: minmax(360px, 1fr) 310px; }
  .pos-categories { grid-column: 1 / -1; flex-direction: row; align-items: center; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--border); padding: 10px 14px; }
  .pos-categories > div:first-child { display: none; }
  .pos-connection { margin: 0 0 0 auto; white-space: nowrap; }
  .category-button { white-space: nowrap; }
  .inventory-row { grid-template-columns: minmax(180px, 1fr) 100px; }
  .inventory-adjust { grid-column: 1 / -1; }
  .product-toolbar { grid-template-columns: 1fr 1fr; }
  .product-toolbar > button { grid-column: auto; }
}

@media (max-width: 620px) {
  .branch-selector { min-width: 118px; max-width: 138px; }
  .branch-selector span { display: none; }
  .product-toolbar { grid-template-columns: 1fr; }
  .product-toolbar > button { grid-column: auto; width: 100%; justify-content: center; }
  .product-row-actions { align-items: flex-end; flex-direction: column; }
  .local-product-list article { align-items: flex-start; }
  .inventory-row { grid-template-columns: 1fr; gap: 12px; padding: 16px 18px; }
  .inventory-adjust { grid-template-columns: 1fr 1fr; }
  .inventory-adjust > div { grid-column: 1 / -1; }
}


/* Step 6 sales, refunds, debtors and expenses */
.step6-metrics { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

.sales-layout, .debtors-layout, .expenses-layout { display: grid; grid-template-columns: minmax(420px, .95fr) minmax(420px, 1.05fr); gap: 20px; align-items: start; }
.sales-filters, .expense-toolbar { display: grid; gap: 10px; padding: 18px 20px; border-bottom: 1px solid var(--border); }
.sales-filters { grid-template-columns: minmax(180px, 1fr) 150px 130px 180px; }
.expense-toolbar { grid-template-columns: minmax(180px, .8fr) minmax(150px, .6fr) auto; align-items: end; margin-bottom: 18px; }
.sales-filters label, .expense-toolbar label { display: grid; gap: 5px; color: var(--muted); font-size: .74rem; font-weight: 700; }
.sales-filters input, .sales-filters select, .expense-toolbar input, .expense-toolbar select,
.compact-form input, .compact-form select, .compact-form textarea { width: 100%; min-height: 42px; border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; background: white; color: var(--navy); }
.compact-form textarea { min-height: 86px; resize: vertical; }

.sales-list, .debtor-list, .expense-list { display: grid; }
.sales-row, .debtor-row, .expense-row { width: 100%; display: grid; align-items: center; gap: 14px; border: 0; border-bottom: 1px solid var(--border); padding: 15px 18px; background: white; color: var(--text); text-align: left; }
.sales-row { grid-template-columns: minmax(180px, 1.2fr) minmax(120px, .65fr) minmax(120px, .65fr); }
.debtor-row, .expense-row { grid-template-columns: minmax(180px, 1fr) auto; }
.sales-row:hover, .debtor-row:hover, .expense-row:hover, .sales-row.active, .debtor-row.active, .expense-row.active { background: #f5f9fd; }
.sales-row strong, .sales-row span, .debtor-row strong, .debtor-row span, .expense-row strong, .expense-row span { display: block; }
.sales-row strong, .debtor-row strong, .expense-row strong { color: var(--navy); }
.sales-row span, .debtor-row span, .expense-row span { margin-top: 2px; color: var(--muted); font-size: .75rem; }
.sale-status, .refund-status { display: inline-flex !important; width: fit-content; padding: 4px 7px; border-radius: 999px; font-size: .67rem !important; font-weight: 760; }
.sale-status { background: var(--blue-soft); color: var(--blue-dark) !important; }
.refund-status.none { background: #f1f4f7; color: var(--muted) !important; }
.refund-status.partial { background: #fff8ed; color: #975d09 !important; }
.refund-status.full { background: #eefaf4; color: var(--success) !important; }

.sales-detail-panel { min-height: 520px; }
.sale-detail .panel-header { align-items: center; }
.sale-detail .panel-header > div h2 { margin: 0; }
.sale-detail .panel-header > div span { display: block; margin-top: 3px; }
.sale-detail-body, .debtor-detail { padding: 20px; }
.detail-grid { display: grid; grid-template-columns: 120px 1fr; gap: 7px 14px; padding-bottom: 16px; color: var(--muted); font-size: .82rem; }
.detail-grid strong { color: var(--navy); }
.sale-items { border-block: 1px solid var(--border); }
.sale-items article, .debt-list-section article, .refund-history article { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid #edf1f6; }
.sale-items article:last-child, .debt-list-section article:last-child, .refund-history article:last-child { border-bottom: 0; }
.sale-items strong, .sale-items span, .debt-list-section strong, .debt-list-section span, .refund-history strong, .refund-history span { display: block; }
.sale-items strong, .debt-list-section strong, .refund-history strong { color: var(--navy); font-size: .84rem; }
.sale-items span, .debt-list-section span, .refund-history span { margin-top: 2px; color: var(--muted); font-size: .74rem; }
.sale-totals { display: grid; gap: 8px; padding: 16px 0; }
.sale-totals > div { display: flex; justify-content: space-between; gap: 14px; color: var(--muted); }
.sale-totals strong { color: var(--navy); }
.sale-totals .wide { display: grid; }
.refund-history, .refund-form, .debt-list-section { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.refund-history h3, .refund-form h3, .debt-list-section h3, .compact-form h3 { margin: 0 0 12px; color: var(--navy); font-size: .95rem; }
.refund-history p, .debt-list-section p { color: var(--muted); font-size: .8rem; }
.refund-form form { display: grid; gap: 10px; }
.refund-item, .refund-form form > label { display: grid; gap: 5px; color: var(--muted); font-size: .76rem; font-weight: 680; }
.refund-form input { width: 100%; min-height: 40px; border: 1px solid var(--border); border-radius: 9px; padding: 8px 10px; color: var(--navy); }
.refund-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 4px; }
.refund-actions .secondary-button, .refund-actions .cash-button { justify-content: center; }

.compact-form { display: grid; gap: 11px; padding: 18px 20px; border-bottom: 1px solid var(--border); }
.compact-form label { display: grid; gap: 5px; color: var(--muted); font-size: .75rem; font-weight: 690; }
.empty-state.compact { min-height: 180px; }
.debtor-contact { display: grid; gap: 4px; color: var(--muted); font-size: .78rem; }
.debt-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; }
.debt-form-grid .compact-form { border: 1px solid var(--border); border-radius: 12px; padding: 14px; }
.expense-editor .compact-form { border-bottom: 0; }

@media (max-width: 1180px) {
  .sales-layout, .debtors-layout, .expenses-layout { grid-template-columns: 1fr; }
  .sales-filters { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .sales-filters, .expense-toolbar, .debt-form-grid { grid-template-columns: 1fr; }
  .sales-row { grid-template-columns: 1fr; gap: 8px; }
  .refund-actions { grid-template-columns: 1fr; }
  .detail-grid { grid-template-columns: 90px 1fr; }
}


/* Step 7 suppliers, purchases, Shopping Sheets, invoices */
.management-toolbar { display: grid; grid-template-columns: minmax(240px,1fr) 170px auto; gap: 12px; align-items: end; margin-bottom: 18px; }
.management-toolbar label { display: grid; gap: 6px; color: var(--muted); font-size: .76rem; font-weight: 720; }
.management-toolbar input, .management-toolbar select { width: 100%; min-height: 44px; border: 1px solid var(--border); border-radius: 12px; padding: 9px 12px; background: white; color: var(--navy); }
.two-panel-management, .purchases-layout, .invoices-layout { display: grid; grid-template-columns: minmax(360px,.8fr) minmax(500px,1.2fr); gap: 20px; align-items: start; }
.management-list { display: grid; }
.management-row { width: 100%; display: grid; grid-template-columns: minmax(180px,1fr) auto; align-items: center; gap: 16px; border: 0; border-bottom: 1px solid var(--border); padding: 15px 18px; background: white; text-align: left; color: var(--text); }
.management-row:hover, .management-row.active { background: #f5f9fd; }
.management-row strong, .management-row span { display: block; }
.management-row strong { color: var(--navy); }
.management-row span { margin-top: 2px; color: var(--muted); font-size: .75rem; }
.management-row > div:last-child { text-align: right; }
.management-new-button { margin: 14px 18px; }
.management-detail { padding: 20px; }
.management-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; }
.padded-actions { padding: 0 20px 20px; }
.item-builder { display: grid; gap: 10px; margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--border); }
.item-builder h3, .receive-panel h3, .history-section h3, .conversion-box h3 { margin: 0; color: var(--navy); font-size: .95rem; }
.item-add-row { display: grid; grid-template-columns: minmax(180px,1.2fr) 100px 120px auto; gap: 8px; align-items: end; }
.shopping-add-row { grid-template-columns: minmax(180px,1.2fr) 110px minmax(160px,.8fr) auto; }
.invoice-add-row { grid-template-columns: minmax(180px,1.2fr) 90px 120px 110px auto; }
.item-add-row select, .item-add-row input, .conversion-box select { width: 100%; min-height: 40px; border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; background: white; color: var(--navy); }
.purchase-item-list { display: grid; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.purchase-item-list article { display: flex; justify-content: space-between; gap: 16px; padding: 12px 14px; border-bottom: 1px solid var(--border); background: white; }
.purchase-item-list article:last-child { border-bottom: 0; }
.purchase-item-list strong, .purchase-item-list span { display: block; }
.purchase-item-list strong { color: var(--navy); font-size: .84rem; }
.purchase-item-list span { margin-top: 2px; color: var(--muted); font-size: .74rem; }
.purchase-item-list button { margin-top: 4px; border: 0; background: transparent; color: var(--danger); font-size: .74rem; font-weight: 720; }
.purchase-total { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; color: var(--muted); }
.purchase-total strong { color: var(--navy); font-size: 1.1rem; }
.muted-copy { color: var(--muted); font-size: .8rem; }
.receive-panel, .history-section, .conversion-box { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.receive-panel form { display: grid; gap: 9px; margin-top: 10px; }
.receive-panel label { display: grid; grid-template-columns: minmax(180px,1fr) 120px; align-items: center; gap: 12px; color: var(--muted); font-size: .76rem; }
.receive-panel input { width: 100%; min-height: 38px; border: 1px solid var(--border); border-radius: 9px; padding: 8px 10px; }
.history-section article { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid #edf1f6; }
.history-section article:last-child { border-bottom: 0; }
.history-section strong, .history-section span { display: block; }
.history-section strong { color: var(--navy); font-size: .82rem; }
.history-section span, .history-section p { color: var(--muted); font-size: .74rem; }
.conversion-box { padding: 18px 20px 20px; }
.conversion-box p { color: var(--muted); font-size: .8rem; }
.conversion-box { display: grid; gap: 10px; }
.payment-card { margin-top: 18px; border: 1px solid var(--border); border-radius: 12px; }

@media (max-width: 1180px) {
  .two-panel-management, .purchases-layout, .invoices-layout { grid-template-columns: 1fr; }
  .item-add-row, .shopping-add-row, .invoice-add-row { grid-template-columns: 1fr 1fr; }
  .item-add-row button { grid-column: 1 / -1; justify-content: center; }
}

@media (max-width: 700px) {
  .management-toolbar { grid-template-columns: 1fr; }
  .management-toolbar .secondary-button { width: 100%; justify-content: center; }
  .item-add-row, .shopping-add-row, .invoice-add-row { grid-template-columns: 1fr; }
  .item-add-row button { grid-column: auto; }
  .receive-panel label { grid-template-columns: 1fr; }
  .management-row { grid-template-columns: 1fr; }
  .management-row > div:last-child { text-align: left; }
}


/* Step 8.1 accounting and reporting */
.accounting-heading { align-items: flex-end; }
.report-status-cluster { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.report-status { display: inline-flex; align-items: center; min-height: 32px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 999px; background: white; color: var(--muted); font-size: .72rem; font-weight: 760; }
.report-status.online { background: #eefaf4; color: var(--success); border-color: #caead8; }
.report-status.offline { background: #fff8ed; color: #975d09; border-color: #f1dfbf; }

.report-filter-bar { display: grid; grid-template-columns: minmax(190px, .8fr) 170px 170px auto; gap: 10px; align-items: end; margin-bottom: 18px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 14px; background: white; }
.report-filter-bar label { display: grid; gap: 5px; color: var(--muted); font-size: .74rem; font-weight: 720; }
.report-filter-bar input, .report-filter-bar select { width: 100%; min-height: 42px; border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; background: white; color: var(--navy); }
.report-filter-bar .secondary-button { min-height: 42px; justify-content: center; }
.filter-hidden { visibility: hidden; pointer-events: none; }

.integrity-warning, .integrity-warning-list, .integrity-ok, .policy-note { margin-bottom: 18px; border-radius: 14px; padding: 14px 16px; }
.integrity-warning, .integrity-warning-list { border: 1px solid #f0d4b2; background: #fff9ef; color: #82510a; }
.integrity-warning-list strong { color: #6e4306; }
.integrity-warning-list p { margin: 4px 0 0; font-size: .8rem; }
.integrity-ok { border: 1px solid #cbe7d7; background: #f1faf5; color: #21734b; font-size: .82rem; }
.policy-note { border: 1px solid var(--border); background: #f7f9fc; color: var(--muted); }
.policy-note strong { display: block; color: var(--navy); }
.policy-note p { margin: 5px 0 0; font-size: .82rem; }

.accounting-summary-grid, .report-metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: 12px; margin-bottom: 18px; }
.accounting-summary-card, .report-metric-card { min-height: 104px; display: grid; align-content: center; gap: 7px; padding: 16px; border: 1px solid var(--border); border-radius: 15px; background: white; box-shadow: 0 5px 16px rgba(24, 46, 80, .045); }
.accounting-summary-card span, .report-metric-card span { color: var(--muted); font-size: .74rem; font-weight: 720; }
.accounting-summary-card strong, .report-metric-card strong { color: var(--navy); font-size: 1.24rem; line-height: 1.15; }

.accounting-main-grid { display: grid; grid-template-columns: minmax(420px, .95fr) minmax(420px, 1.05fr); gap: 18px; margin-bottom: 18px; align-items: start; }
.journal-list { display: grid; }
.journal-row { width: 100%; display: grid; grid-template-columns: minmax(180px, 1.15fr) minmax(130px, .75fr) minmax(150px, .8fr); gap: 12px; align-items: center; border: 0; border-bottom: 1px solid var(--border); padding: 14px 16px; background: white; text-align: left; color: var(--text); }
.journal-row:hover, .journal-row.active { background: #f5f9fd; }
.journal-row strong, .journal-row span { display: block; }
.journal-row strong { color: var(--navy); font-size: .8rem; }
.journal-row span { margin-top: 2px; color: var(--muted); font-size: .7rem; overflow-wrap: anywhere; }
.journal-detail-panel { min-height: 420px; }
.append-only-note { margin: 16px 0 0; color: var(--muted); font-size: .78rem; }
.accounting-section { margin-bottom: 18px; }
.trial-integrity, .reconcile-state { display: inline-flex; width: fit-content; align-items: center; padding: 5px 8px; border-radius: 999px; font-size: .68rem; font-weight: 780; }
.trial-integrity.balanced, .reconcile-state.ok { background: #eefaf4; color: var(--success); }
.trial-integrity.imbalanced, .reconcile-state.warning { background: #fff2ee; color: #9b3a26; }

.table-scroll { overflow-x: auto; }
.report-table { width: 100%; min-width: 620px; border-collapse: collapse; }
.report-table th, .report-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; font-size: .76rem; }
.report-table th { color: var(--muted); font-weight: 760; background: #f8fafc; }
.report-table td { color: var(--text); }
.report-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.report-table tfoot th { color: var(--navy); background: #f5f8fb; }

.report-section { margin-bottom: 26px; }
.report-section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 12px; }
.report-section-heading h2 { margin: 0; color: var(--navy); font-size: 1.14rem; }
.report-section-heading p { margin: 4px 0 0; color: var(--muted); font-size: .8rem; }
.report-breakdown-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.report-breakdown-card .panel-header h3 { margin: 0; color: var(--navy); font-size: .92rem; }
.report-breakdown-card { overflow: hidden; }

@media (max-width: 1180px) {
  .accounting-main-grid, .report-breakdown-grid { grid-template-columns: 1fr; }
  .journal-row { grid-template-columns: 1fr 1fr; }
  .journal-row > div:last-child { grid-column: 1 / -1; }
}

@media (max-width: 780px) {
  .report-filter-bar { grid-template-columns: 1fr 1fr; }
  .report-filter-bar .secondary-button { grid-column: 1 / -1; }
  .accounting-heading { align-items: flex-start; }
  .report-status-cluster { justify-content: flex-start; }
}

@media (max-width: 560px) {
  .report-filter-bar { grid-template-columns: 1fr; }
  .report-filter-bar .secondary-button { grid-column: auto; width: 100%; }
  .filter-hidden { display: none; }
  .journal-row { grid-template-columns: 1fr; }
  .journal-row > div:last-child { grid-column: auto; }
  .accounting-summary-grid, .report-metric-grid { grid-template-columns: 1fr 1fr; }
}


/* Step 8.2 deeper operational reporting */
.step82-filter { grid-template-columns: minmax(160px,.7fr) minmax(170px,.7fr) 160px 160px auto; }
.report-export-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.report-export-actions .secondary-button { min-height: 36px; padding: 7px 11px; justify-content: center; }
.inventory-movement-heading { margin-top: 22px; }
.report-section .policy-note { margin-top: 16px; }
.report-section > .table-scroll + .policy-note { margin-top: 16px; }
.report-section .integrity-warning-list { margin-top: 12px; }
.report-section .report-table td:first-child,
.report-section .report-table th:first-child { white-space: nowrap; }

@media (max-width: 1180px) {
  .step82-filter { grid-template-columns: 1fr 1fr 1fr; }
  .step82-filter .secondary-button { grid-column: auto; }
}

@media (max-width: 780px) {
  .step82-filter { grid-template-columns: 1fr 1fr; }
  .step82-filter .secondary-button { grid-column: 1 / -1; }
  .report-section-heading { align-items: flex-start; flex-direction: column; }
  .report-export-actions { justify-content: flex-start; }
}

@media (max-width: 560px) {
  .step82-filter { grid-template-columns: 1fr; }
  .step82-filter .secondary-button { grid-column: auto; }
  .report-export-actions { width: 100%; }
  .report-export-actions .secondary-button { flex: 1; }
}


/* Step 9.1 staff management and Staff Mode */
.staff-layout { display:grid; grid-template-columns:minmax(360px,.82fr) minmax(520px,1.18fr); gap:20px; align-items:start; }
.staff-toolbar { grid-template-columns:minmax(240px,1fr) 170px auto; }
.owner-identity-note { margin:14px 18px; padding:12px 14px; border:1px solid var(--border); border-radius:12px; background:#f7f9fc; }
.owner-identity-note strong, .owner-identity-note span { display:block; }
.owner-identity-note strong { color:var(--navy); font-size:.82rem; }
.owner-identity-note span { margin-top:3px; color:var(--muted); font-size:.73rem; }
.staff-fieldset { margin:0; padding:12px; border:1px solid var(--border); border-radius:12px; }
.staff-fieldset legend { padding:0 5px; color:var(--navy); font-size:.78rem; font-weight:760; }
.permission-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.permission-grid label { display:flex; align-items:center; gap:7px; min-height:34px; padding:6px 8px; border:1px solid #edf1f5; border-radius:9px; background:#fbfcfe; color:var(--text); font-size:.73rem; }
.permission-grid input { width:auto; min-height:auto; }
.staff-security { padding:18px 20px; border-top:1px solid var(--border); display:grid; gap:12px; }
.staff-security h3 { margin:0; color:var(--navy); font-size:.95rem; }
.staff-security p { margin:4px 0 0; color:var(--muted); font-size:.76rem; }
.staff-security form { display:grid; grid-template-columns:minmax(160px,.6fr) auto; gap:9px; }
.staff-security input { min-height:42px; border:1px solid var(--border); border-radius:10px; padding:8px 10px; letter-spacing:.2em; }
.staff-audit { padding:0 20px 20px; }
.staff-mode-button,.staff-logout-button { display:inline-flex; align-items:center; gap:7px; min-height:38px; padding:7px 10px; border:1px solid var(--border); border-radius:10px; background:white; color:var(--navy); font-weight:720; }
.staff-mode-button svg,.staff-logout-button svg { width:17px; height:17px; }
.staff-mode-overlay { position:fixed; inset:0; z-index:1200; display:grid; place-items:center; padding:20px; background:rgba(10,27,50,.48); backdrop-filter:blur(3px); }
.staff-mode-dialog { width:min(520px,100%); max-height:min(760px,92vh); overflow:auto; border:1px solid var(--border); border-radius:18px; background:white; box-shadow:0 24px 70px rgba(10,27,50,.22); }
.staff-mode-dialog .panel-header { border-bottom:1px solid var(--border); }
.dialog-close { width:36px; height:36px; border:1px solid var(--border); border-radius:10px; background:white; color:var(--navy); font-size:1.25rem; }
.staff-mode-body { display:grid; gap:14px; padding:20px; }
.staff-mode-body form { display:grid; gap:12px; }
.staff-mode-body label { display:grid; gap:5px; color:var(--muted); font-size:.75rem; font-weight:700; }
.staff-mode-body input,.staff-mode-body select { width:100%; min-height:44px; border:1px solid var(--border); border-radius:10px; padding:9px 11px; background:white; color:var(--navy); }
.danger-button { color:var(--danger); border-color:#f1caca; }

@media(max-width:1180px){ .staff-layout{grid-template-columns:1fr;} }
@media(max-width:720px){
  .staff-toolbar{grid-template-columns:1fr;}
  .permission-grid{grid-template-columns:1fr;}
  .staff-security form{grid-template-columns:1fr;}
  .staff-mode-button span,.staff-logout-button span{display:none;}
}


/* Step 9.2 branches and transfers */
.branch-page-grid { display:grid; grid-template-columns:minmax(420px,.9fr) minmax(520px,1.1fr); gap:18px; align-items:start; }
.branch-list { display:grid; }
.branch-row { width:100%; display:grid; grid-template-columns:minmax(180px,1fr) minmax(240px,1.2fr) auto; gap:14px; align-items:center; padding:14px 16px; border:0; border-bottom:1px solid var(--border); background:white; text-align:left; }
.branch-row:hover,.branch-row.active { background:#f5f9fd; }
.branch-row strong,.branch-row span { display:block; }
.branch-row strong { color:var(--navy); font-size:.82rem; }
.branch-row span { color:var(--muted); font-size:.7rem; }
.branch-counts { display:flex; flex-wrap:wrap; gap:6px 12px; }
.branch-counts span { white-space:nowrap; }
.branch-integrity-note { margin:16px 20px 20px; padding:13px 14px; border:1px solid var(--border); border-radius:12px; background:#f7f9fc; }
.branch-integrity-note strong { display:block; color:var(--navy); font-size:.8rem; }
.branch-integrity-note p { margin:4px 0 0; color:var(--muted); font-size:.74rem; }
.transfer-workspace { margin-top:24px; }
.transfer-add-row { display:grid; grid-template-columns:minmax(240px,1fr) 140px auto; gap:10px; align-items:end; }
.transfer-draft-items { display:grid; gap:8px; }
.transfer-draft-items article { display:flex; justify-content:space-between; gap:14px; align-items:center; padding:10px 12px; border:1px solid var(--border); border-radius:10px; background:#fbfcfe; }
.transfer-draft-items strong,.transfer-draft-items span { display:block; }
.transfer-draft-items strong { color:var(--navy); font-size:.78rem; }
.transfer-draft-items span { margin-top:2px; color:var(--muted); font-size:.7rem; }
.transfer-draft-items button { border:0; background:transparent; color:var(--danger); font-size:.72rem; font-weight:740; }
.transfer-detail-panel { margin-top:18px; }
.transfer-actions { padding:16px 20px; border-top:1px solid var(--border); flex-wrap:wrap; }
.transfer-detail-panel .history-section { border-top:1px solid var(--border); padding:16px 20px 20px; }
.transfer-detail-panel .history-section h3 { margin:0 0 10px; color:var(--navy); font-size:.9rem; }
.transfer-detail-panel .history-section article { display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--border); }
.transfer-detail-panel .history-section strong,.transfer-detail-panel .history-section span { display:block; font-size:.72rem; }
.transfer-detail-panel .history-section strong { color:var(--navy); }
.transfer-detail-panel .history-section span { color:var(--muted); }
.compact-form textarea { width:100%; border:1px solid var(--border); border-radius:10px; padding:9px 10px; resize:vertical; color:var(--navy); background:white; }

@media(max-width:1180px){
  .branch-page-grid{grid-template-columns:1fr;}
}
@media(max-width:760px){
  .branch-row{grid-template-columns:1fr;}
  .transfer-add-row{grid-template-columns:1fr;}
}


.restaurant-shell{display:grid;gap:16px;min-height:calc(100vh - 120px)}
.restaurant-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.restaurant-head h1{margin:0}.restaurant-head p{margin:4px 0 0;color:var(--muted)}
.restaurant-tabs,.order-type-buttons,.order-actions,.qty-strip{display:flex;gap:8px;align-items:center}
.restaurant-tabs button,.order-type-buttons button,.order-actions button,.restaurant-categories button,.table-card button,.order-card-head button{border:1px solid var(--border);background:#fff;border-radius:12px;padding:10px 14px;cursor:pointer}
.restaurant-tabs button.active,.order-type-buttons button.active,.restaurant-categories button.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.restaurant-pos-grid{display:grid;grid-template-columns:180px minmax(0,1fr) 390px;gap:14px;min-height:680px}
.restaurant-categories,.restaurant-menu-panel,.restaurant-order-panel,.tables-workspace{background:#fff;border:1px solid var(--border);border-radius:18px}
.restaurant-categories{padding:12px;display:flex;flex-direction:column;gap:8px;align-self:start;position:sticky;top:12px}
.restaurant-menu-panel{padding:14px}.restaurant-order-panel{padding:14px;align-self:start;position:sticky;top:12px}
.restaurant-search{display:flex;align-items:center;gap:10px;margin-bottom:12px}.restaurant-search input,.restaurant-field select,.restaurant-field textarea,.tables-workspace input{width:100%;border:1px solid var(--border);border-radius:12px;padding:11px 12px;background:#fff}
.restaurant-menu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:12px}
.menu-card{border:1px solid var(--border);background:#fff;border-radius:16px;overflow:hidden;text-align:left;padding:0;cursor:pointer;min-height:170px}
.menu-card:active{transform:scale(.985)}.menu-card img,.menu-card-fallback{width:100%;height:105px;object-fit:cover}.menu-card-fallback{display:grid;place-items:center;background:var(--surface-alt);font-size:32px;font-weight:700;color:var(--primary)}
.menu-card-body{display:grid;gap:3px;padding:10px}.menu-card-body small{color:var(--muted)}
.order-card{display:grid;gap:12px}.order-card-head{display:flex;justify-content:space-between;align-items:center}.order-card-head div{display:grid}.order-card-head small{color:var(--muted)}
.order-lines{display:grid;gap:8px;max-height:390px;overflow:auto}.order-line{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:8px;align-items:center;border:1px solid var(--border);border-radius:12px;padding:9px}.order-line>div:first-child{display:grid}.order-line small{color:var(--muted)}
.qty-strip button{width:30px;height:30px;border:1px solid var(--border);background:#fff;border-radius:8px}.remove-line{border:0;background:transparent;color:#b42318;cursor:pointer}
.restaurant-field{display:grid;gap:6px}.restaurant-field span{font-size:12px;color:var(--muted);font-weight:600}.restaurant-field textarea{min-height:68px;resize:vertical}
.order-total{display:flex;justify-content:space-between;font-size:18px;padding-top:10px;border-top:1px solid var(--border)}.order-actions{justify-content:flex-end;flex-wrap:wrap}.order-actions .primary,.tables-workspace .primary{background:var(--primary);color:#fff;border-color:var(--primary)}
.restaurant-empty,.restaurant-empty-order{padding:24px;text-align:center;color:var(--muted)}.restaurant-info{font-size:12px;color:var(--muted);background:var(--surface-alt);padding:10px;border-radius:10px}
.open-orders-grid,.tables-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}.open-order-card,.table-card{border:1px solid var(--border);background:#fff;border-radius:16px;padding:14px;text-align:left}.open-order-card{cursor:pointer;display:grid;gap:6px}.open-order-card>div,.table-card>div{display:flex;justify-content:space-between;gap:10px}.open-order-card p,.open-order-card small{margin:0}.status-pill{font-size:11px;padding:4px 8px;border-radius:999px;background:var(--surface-alt)}.status-pill.occupied{background:#fff2e8;color:#b54708}
.tables-workspace{padding:14px}.tables-workspace form{display:flex;gap:8px;margin-bottom:14px}.table-card{display:grid;gap:8px}
@media(max-width:1100px){.restaurant-pos-grid{grid-template-columns:130px minmax(0,1fr) 340px}.restaurant-menu-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}}
@media(max-width:820px){.restaurant-head{align-items:flex-start;flex-direction:column}.restaurant-pos-grid{grid-template-columns:1fr}.restaurant-categories{position:static;flex-direction:row;overflow:auto}.restaurant-order-panel{position:static}.restaurant-menu-panel{order:2}.restaurant-order-panel{order:1}.restaurant-categories{order:0}}

.salon-fullscreen{min-width:0}
.salon-grid{display:grid;grid-template-columns:minmax(220px,28%) minmax(320px,1fr) minmax(240px,30%);gap:14px;align-items:start}
.salon-services,.salon-cart,.salon-context{min-width:0;background:#fff;border:1px solid var(--border);border-radius:18px;padding:14px}
.salon-service-list,.salon-appointments{display:grid;gap:8px;max-height:calc(100vh - 280px);overflow:auto}
.salon-service-list button,.salon-appointments article{min-width:0;border:1px solid var(--border);border-radius:12px;background:#fff;padding:10px}
.salon-service-list button{display:grid;gap:3px;text-align:left}
.salon-appointments article{display:grid;gap:6px}
.salon-cart input,.salon-cart textarea,.salon-context select,.salon-services input{width:100%;max-width:100%}
.hotel-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px}
.hotel-kpis .panel{min-width:0}
@media(max-width:1180px){
  .salon-grid{grid-template-columns:minmax(180px,26%) minmax(300px,1fr) minmax(210px,28%)}
}
@media(max-width:900px){
  .salon-grid{grid-template-columns:1fr 1fr}
  .salon-context{grid-column:1/-1}
  .salon-service-list,.salon-appointments{max-height:360px}
}
@media(max-width:680px){
  .salon-grid{grid-template-columns:1fr}
  .salon-context{grid-column:auto}
  .restaurant-tabs{max-width:100%;overflow:auto}
  .topbar{gap:8px}
}


/* Phase 1 Step 13.1 responsive business shell */
:root {
  --primary: var(--blue);
  --surface-alt: #f7f9fc;
  --canvas: #f5f7fb;
  --navy: #13213a;
  --text: #27364d;
  --muted: #6c7a90;
  --border: #e1e7ef;
  --shadow: 0 4px 16px rgba(25, 48, 80, .055);
  --radius-lg: 16px;
  --sidebar: 260px;
}

:focus-visible {
  outline: 3px solid rgba(33, 117, 199, .28);
  outline-offset: 2px;
}
html, body { overflow-x: hidden; }
body { background: var(--canvas); }
.app-layout { grid-template-columns: var(--sidebar) minmax(0, 1fr); }
.workspace { width: 100%; min-width: 0; }

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 0;
  padding: 14px 12px 12px;
  border-right: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  box-shadow: none;
}
.sidebar-head { display: flex; align-items: center; gap: 8px; }
.sidebar .brand {
  flex: 1;
  min-width: 0;
  gap: 10px;
  margin: 0;
  padding: 8px 8px 16px;
  color: var(--navy);
}
.sidebar .brand img {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: transparent;
}
.sidebar .brand-name { color: var(--navy); font-size: 1.05rem; font-weight: 800; }
.sidebar .brand-product { margin-top: 1px; color: var(--muted); font-size: .74rem; font-weight: 600; }
.sidebar-close {
  display: none;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  color: var(--navy);
}
.sidebar-close .icon { width: 18px; height: 18px; }
.sidebar .nav-label {
  padding: 8px 10px 5px;
  color: #8a98aa;
  font-size: .64rem;
  letter-spacing: .08em;
}
.sidebar .nav {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 2px 2px 8px;
}
.sidebar .nav a,
.sidebar-settings {
  position: relative;
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0;
  padding: 8px 10px;
  border-radius: 9px;
  color: #65738a;
  text-decoration: none;
  font-size: .86rem;
  font-weight: 650;
}
.sidebar .nav a:hover,
.sidebar-settings:hover { background: #f5f8fc; color: var(--navy); }
.sidebar .nav a.active,
.sidebar-settings.active {
  background: #eef5ff;
  color: #145da8;
  box-shadow: none;
}
.sidebar .nav a.active::before,
.sidebar-settings.active::before {
  content: "";
  position: absolute;
  left: -2px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 4px;
  background: var(--blue);
}
.sidebar .nav .icon,
.sidebar-settings .icon { width: 18px; height: 18px; }
.sidebar-footer {
  margin-top: 0;
  padding: 10px 2px 0;
  border-top: 1px solid #edf1f5;
  background: #fff;
}
.local-status {
  gap: 9px;
  margin-bottom: 6px;
  padding: 8px 10px;
  border-radius: 9px;
  background: #f8fafc;
  color: var(--muted);
  font-size: .7rem;
}
.local-status .icon { width: 17px; height: 17px; color: var(--blue); }
.local-status span { display: grid; line-height: 1.2; }
.local-status strong { margin-top: 2px; color: var(--text); font-size: .69rem; font-weight: 700; }

.topbar {
  height: 68px;
  gap: 10px;
  padding: 0 22px;
  background: #fff;
  border-bottom: 1px solid var(--border);
  backdrop-filter: none;
}
.workspace-title strong { color: var(--navy); font-size: 1.16rem; font-weight: 800; letter-spacing: -.02em; }
.workspace-title span { max-width: 280px; margin-top: 2px; font-size: .7rem; }
.branch-selector {
  min-width: 150px;
  max-width: 220px;
  gap: 2px;
  font-size: .62rem;
}
.branch-selector select {
  min-height: 34px;
  border-radius: 9px;
  padding: 6px 28px 6px 9px;
  font-size: .78rem;
}
.status-chip {
  min-height: 34px;
  gap: 6px;
  padding: 6px 9px;
  border-radius: 9px;
  font-size: .73rem;
}
.status-chip .icon { width: 16px; height: 16px; }
.pending-sync { background: #f4f8fd; border-color: #d8e6f4; color: #326593; }
.install-button,
.staff-mode-button,
.staff-logout-button,
.user-button {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 7px 10px;
  background: #fff;
  color: var(--navy);
  font-size: .74rem;
  font-weight: 720;
}
.install-button.visible { display: inline-flex; background: var(--blue); border-color: var(--blue); color: #fff; }
.user-button { width: auto; height: auto; background: #f7f9fc; }
.install-button .icon,
.staff-mode-button .icon,
.staff-logout-button .icon,
.user-button .icon { width: 17px; height: 17px; }

.main { padding: 22px 24px 28px; }
.panel { border-radius: 14px; box-shadow: var(--shadow); }
.panel-header { padding: 15px 18px; }
.secondary-button.compact { min-height: 34px; padding: 6px 10px; border-radius: 9px; font-size: .74rem; text-decoration: none; }

.dashboard-loading {
  width: min(320px, 100%);
  margin: 90px auto;
  padding: 20px;
  color: var(--muted);
  text-align: center;
}
.dashboard-loading .loading-line { margin: 0 0 12px; }
.dashboard-view { width: 100%; max-width: 1480px; margin: 0 auto; }
.attention-card {
  display: grid;
  grid-template-columns: minmax(220px, .72fr) minmax(320px, 1.28fr);
  gap: 20px;
  margin-bottom: 24px;
  padding: 16px 18px;
  border: 1px solid #f0c997;
  border-radius: 14px;
  background: #fff9f0;
}
.attention-heading { display: flex; align-items: flex-start; gap: 11px; }
.attention-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid #e9a756;
  border-radius: 9px;
  color: #cc7417;
  font-weight: 850;
}
.attention-heading strong { display: block; color: #7a3f16; font-size: .92rem; }
.attention-heading span { display: block; margin-top: 2px; color: #a05f2a; font-size: .73rem; }
.attention-items { display: grid; gap: 8px; }
.attention-items > div {
  display: grid;
  grid-template-columns: 8px minmax(90px, auto) minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  color: #745f50;
  font-size: .76rem;
}
.attention-items strong { color: #4d3b2f; }
.attention-dot { width: 7px; height: 7px; border-radius: 50%; background: #f28a26; }

.dashboard-intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}
.dashboard-intro h1 { margin: 0; color: var(--navy); font-size: clamp(1.65rem, 2.4vw, 2.15rem); letter-spacing: -.04em; }
.dashboard-intro p { margin: 5px 0 0; color: var(--muted); font-size: .88rem; }
.dashboard-period {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  color: #58677d;
  font-size: .78rem;
  font-weight: 700;
}
.dashboard-period .icon { width: 17px; height: 17px; }
.dashboard-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 20px;
}
.dashboard-actions a {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: #fff;
  color: #235d96;
  text-decoration: none;
  font-size: .78rem;
  font-weight: 720;
}
.dashboard-actions a.primary { border-color: var(--blue); background: var(--blue); color: #fff; box-shadow: 0 5px 12px rgba(33, 117, 199, .16); }
.dashboard-actions .icon { width: 17px; height: 17px; }
.dashboard-empty-note {
  display: flex;
  align-items: center;
  gap: 8px 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding: 10px 13px;
  border: 1px solid #dfe7f0;
  border-radius: 10px;
  background: #fafcfe;
  font-size: .75rem;
}
.dashboard-empty-note strong { color: var(--navy); }
.dashboard-empty-note span { color: var(--muted); }

.dashboard-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.dashboard-metric {
  min-height: 108px;
  justify-content: flex-start;
  gap: 13px;
  padding: 15px 16px;
  border-radius: 13px;
  box-shadow: 0 3px 12px rgba(25, 48, 80, .045);
}
.dashboard-metric span { font-size: .73rem; font-weight: 690; }
.dashboard-metric strong { font-size: clamp(1.25rem, 2vw, 1.65rem); line-height: 1.15; }
.dashboard-metric::before {
  content: "";
  width: 34px;
  height: 5px;
  border-radius: 99px;
  background: #2f80d0;
}
.dashboard-metric.green::before { background: #57b87b; }
.dashboard-metric.orange::before { background: #e49a44; }
.dashboard-metric.navy::before { background: #586779; }
.dashboard-metric.gray::before { background: #98a3b1; }

.recent-activity-panel { overflow: hidden; }
.dashboard-sales-list { display: grid; }
.dashboard-sale-row {
  display: grid;
  grid-template-columns: minmax(230px, 1.4fr) minmax(150px, .8fr) minmax(130px, .55fr);
  gap: 16px;
  align-items: center;
  padding: 12px 18px;
  border-top: 1px solid #edf1f5;
}
.dashboard-sale-row:first-child { border-top: 0; }
.sale-main strong,
.sale-main span,
.sale-total strong,
.sale-total span { display: block; }
.sale-main strong { color: #195c9f; font-size: .78rem; }
.sale-main span { margin-top: 2px; color: var(--text); font-size: .79rem; }
.dashboard-sale-row time { color: var(--muted); font-size: .7rem; }
.sale-total { text-align: right; }
.sale-total strong { color: #238457; font-size: .84rem; }
.sale-total span { margin-top: 2px; color: var(--muted); font-size: .67rem; text-transform: uppercase; }
.recent-activity-empty {
  display: grid;
  gap: 3px;
  padding: 26px 18px;
  color: var(--muted);
  text-align: center;
  font-size: .76rem;
}
.recent-activity-empty strong { color: var(--navy); }
.dashboard-state-card {
  min-height: 220px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
}
.dashboard-state-card.error { border-color: #efc6c6; background: #fffafa; }
.dashboard-state-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--blue-soft);
  color: var(--blue-dark);
}
.dashboard-state-card h2 { margin: 0; color: var(--navy); font-size: 1rem; }
.dashboard-state-card p { margin: 4px 0 0; color: var(--muted); font-size: .78rem; }

.staff-mode-overlay { padding: 16px; }
.staff-mode-dialog { width: min(470px, 100%); max-height: min(680px, calc(100dvh - 32px)); border-radius: 14px; }
.staff-mode-header { padding: 15px 17px; }
.staff-mode-header h2 { font-size: 1rem; }
.staff-mode-body { gap: 12px; padding: 16px 17px 18px; }
.staff-mode-context {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}
.staff-mode-context > div {
  padding: 10px 11px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #f8fafc;
}
.staff-mode-context span,
.staff-mode-context strong { display: block; }
.staff-mode-context span { color: var(--muted); font-size: .66rem; }
.staff-mode-context strong { margin-top: 2px; color: var(--navy); font-size: .77rem; }
.staff-mode-empty { min-height: 150px; padding: 24px 16px; }
.dialog-close { width: 34px; height: 34px; border-radius: 9px; }

.pos-shell {
  min-height: calc(100vh - 68px);
  grid-template-columns: 150px minmax(0, 1fr) 340px;
  margin: -22px -24px -28px;
}
.pos-categories { padding: 18px 12px; }
.pos-products { padding: 18px; }
.pos-cart { min-width: 0; }
.product-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.product-card { min-height: 142px; border-radius: 13px; padding: 13px; }
.restaurant-shell { min-width: 0; min-height: calc(100vh - 112px); }
.restaurant-pos-grid { grid-template-columns: 150px minmax(0, 1fr) 340px; gap: 12px; min-height: 620px; }
.restaurant-categories,
.restaurant-menu-panel,
.restaurant-order-panel,
.tables-workspace { border-radius: 14px; }
.restaurant-categories { top: 8px; }
.restaurant-order-panel { top: 8px; }
.restaurant-menu-grid { grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: 10px; }
.salon-grid { grid-template-columns: minmax(170px, 24%) minmax(280px, 1fr) minmax(210px, 27%); gap: 12px; }
.salon-services,
.salon-cart,
.salon-context { border-radius: 14px; padding: 12px; }
.hotel-kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.hotel-kpis .panel { padding: 16px; }

@media (max-width: 1180px) {
  :root { --sidebar: 196px; }
  .sidebar .nav a, .sidebar-settings { font-size: .8rem; padding-left: 8px; padding-right: 8px; }
  .topbar { padding: 0 16px; }
  .workspace-title span { max-width: 180px; }
  .main { padding: 18px; }
  .dashboard-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pos-shell { grid-template-columns: 118px minmax(280px, 1fr) 285px; margin: -18px; }
  .pos-categories { padding: 14px 8px; }
  .pos-products { padding: 14px; }
  .restaurant-pos-grid { grid-template-columns: 112px minmax(260px, 1fr) 280px; gap: 9px; }
  .restaurant-categories { padding: 8px; }
  .restaurant-menu-panel,
  .restaurant-order-panel { padding: 10px; }
  .salon-grid { grid-template-columns: minmax(155px, 24%) minmax(260px, 1fr) minmax(185px, 27%); gap: 9px; }
}

@media (max-width: 900px) {
  .app-layout { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(320px, 86vw);
    height: 100dvh;
    padding: 12px 10px;
    transform: translateX(-104%);
    transition: transform .18s ease;
    box-shadow: 20px 0 48px rgba(19, 33, 58, .18);
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar-close { display: grid; }
  .sidebar-backdrop { position: fixed; inset: 0; z-index: 18; background: rgba(15, 29, 50, .34); }
  .sidebar-backdrop.visible { display: block; }
  body.drawer-open { overflow: hidden; }
  .menu-button { display: inline-flex; width: 40px; height: 40px; border-radius: 9px; }
  .topbar { height: 64px; padding: 0 12px; }
  .main { padding: 16px; }
  .dashboard-view { max-width: none; }
  .dashboard-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pos-shell {
    min-height: calc(100vh - 64px);
    grid-template-columns: 108px minmax(270px, 1fr) 275px;
    margin: -16px;
    overflow: auto;
  }
  .restaurant-pos-grid { grid-template-columns: 105px minmax(250px, 1fr) 270px; overflow-x: auto; }
  .salon-grid { grid-template-columns: minmax(190px, .8fr) minmax(260px, 1.2fr); }
  .salon-context { grid-column: 1 / -1; }
  .salon-service-list,
  .salon-appointments { max-height: 340px; }
}

@media (max-width: 720px) {
  .topbar { gap: 7px; }
  .workspace-title span,
  .status-chip span,
  .staff-mode-button span,
  .staff-logout-button span,
  .user-button span { display: none; }
  .status-chip,
  .staff-mode-button,
  .staff-logout-button,
  .user-button { width: 38px; min-width: 38px; padding: 6px; }
  .status-chip.online { display: none; }
  .install-button { display: none !important; }
  .branch-selector { min-width: 110px; max-width: 126px; }
  .branch-selector > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .branch-selector select { min-height: 36px; font-size: .72rem; }
  .attention-card { grid-template-columns: 1fr; gap: 12px; }
  .dashboard-intro { align-items: flex-start; }
  .dashboard-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .dashboard-actions a { justify-content: center; }
  .dashboard-sale-row { grid-template-columns: 1fr auto; gap: 5px 12px; padding: 12px 14px; }
  .dashboard-sale-row time { grid-column: 1 / 2; }
  .sale-total { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .dashboard-state-card { grid-template-columns: auto 1fr; }
  .dashboard-state-card .secondary-button { grid-column: 1 / -1; justify-content: center; }
  .pos-shell { display: block; margin: -16px; overflow: visible; }
  .pos-categories { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--border); padding: 9px; }
  .pos-categories > div:first-child,
  .pos-connection { display: none; }
  .category-button { white-space: nowrap; }
  .pos-products { padding: 13px; }
  .pos-cart { border-left: 0; border-top: 1px solid var(--border); }
  .restaurant-pos-grid { grid-template-columns: 1fr; overflow: visible; }
  .restaurant-categories { position: static; flex-direction: row; overflow-x: auto; }
  .restaurant-order-panel { position: static; order: 1; }
  .restaurant-menu-panel { order: 2; }
  .salon-grid { grid-template-columns: 1fr; }
  .salon-context { grid-column: auto; }
}

@media (max-width: 520px) {
  .workspace-title strong { font-size: .94rem; max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .branch-selector { min-width: 98px; max-width: 106px; }
  .pending-sync { width: 38px; min-width: 38px; }
  .dashboard-intro { flex-direction: column; gap: 10px; }
  .dashboard-period { align-self: flex-start; }
  .dashboard-metrics { grid-template-columns: 1fr 1fr; gap: 9px; }
  .dashboard-metric { min-height: 96px; padding: 12px; gap: 9px; }
  .dashboard-metric strong { font-size: 1.15rem; overflow-wrap: anywhere; }
  .dashboard-actions { grid-template-columns: 1fr; }
  .attention-items > div { grid-template-columns: 8px minmax(76px, auto) minmax(0, 1fr); align-items: start; }
  .staff-mode-context { grid-template-columns: 1fr; }
  .staff-mode-overlay { padding: 10px; }
  .staff-mode-dialog { max-height: calc(100dvh - 20px); }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-card { min-height: 130px; padding: 11px; }
}

@media (max-width: 380px) {
  .topbar { padding: 0 9px; }
  .workspace-title strong { max-width: 74px; }
  .branch-selector { min-width: 88px; max-width: 92px; }
  .dashboard-metrics { grid-template-columns: 1fr; }
  .product-grid { grid-template-columns: 1fr; }
}


/* Phase 1 Step 13.4 shared FahamPesa design system */
:root {
  --fp-primary: #2175c7;
  --fp-primary-strong: #195fa4;
  --fp-primary-soft: #eaf3fc;
  --fp-navy: #17243a;
  --fp-background: #f4f7fb;
  --fp-surface: #ffffff;
  --fp-border: #dfe7f0;
  --fp-text-secondary: #6c7a90;
  --fp-success: #27a85f;
  --fp-success-soft: #edf9f2;
  --fp-warning: #e47c14;
  --fp-warning-soft: #fff5e9;
  --fp-danger: #c93b3b;
  --fp-danger-soft: #fff0f0;
  --fp-neutral: #737d8d;
  --fp-neutral-soft: #f0f3f7;
  --fp-shadow: 0 4px 14px rgba(23, 36, 58, .055);
  --fp-card-radius: 14px;
  --fp-control-radius: 10px;

  --blue: var(--fp-primary);
  --blue-dark: var(--fp-primary-strong);
  --blue-soft: var(--fp-primary-soft);
  --navy: var(--fp-navy);
  --text: #29384d;
  --muted: var(--fp-text-secondary);
  --surface: var(--fp-surface);
  --canvas: var(--fp-background);
  --border: var(--fp-border);
  --success: var(--fp-success);
  --warning: var(--fp-warning);
  --danger: var(--fp-danger);
  --shadow: var(--fp-shadow);
  --radius-lg: var(--fp-card-radius);
  --radius-md: var(--fp-control-radius);
}

body { background: var(--fp-background); color: var(--text); }

.sidebar {
  background: var(--fp-surface);
  color: var(--text);
  border-right-color: var(--fp-border);
}
.sidebar .brand,
.sidebar .brand-name { color: var(--fp-navy); }
.sidebar .brand-product,
.sidebar .nav-label { color: var(--fp-text-secondary); }
.sidebar .nav a,
.sidebar-settings { color: var(--fp-neutral); }
.sidebar .nav a:hover,
.sidebar-settings:hover {
  background: var(--fp-background);
  color: var(--fp-navy);
}
.sidebar .nav a.active,
.sidebar-settings.active {
  background: var(--fp-primary-soft);
  color: var(--fp-primary-strong);
}
.sidebar .nav a.active::before,
.sidebar-settings.active::before { background: var(--fp-primary); }
.sidebar-footer {
  border-top-color: var(--fp-border);
  background: var(--fp-surface);
}
.local-status {
  background: var(--fp-background);
  color: var(--fp-text-secondary);
}
.local-status .icon { color: var(--fp-primary); }
.local-status strong { color: var(--fp-navy); }
.sidebar-close {
  background: var(--fp-surface);
  border-color: var(--fp-border);
  color: var(--fp-navy);
}

.topbar {
  background: var(--fp-surface);
  border-bottom-color: var(--fp-border);
}
.workspace-title strong { color: var(--fp-navy); }
.workspace-title span { color: var(--fp-text-secondary); }
.branch-selector { color: var(--fp-text-secondary); }
.branch-selector select,
.staff-mode-button,
.staff-logout-button,
.user-button {
  background: var(--fp-surface);
  border-color: var(--fp-border);
  color: var(--fp-navy);
  border-radius: var(--fp-control-radius);
}
.branch-selector select:focus-visible {
  border-color: var(--fp-primary);
  box-shadow: 0 0 0 3px rgba(33, 117, 199, .12);
}
.status-chip {
  border-color: var(--fp-border);
  background: var(--fp-surface);
  color: var(--fp-neutral);
  border-radius: var(--fp-control-radius);
}
.status-chip.online {
  border-color: #cfead9;
  background: var(--fp-success-soft);
  color: var(--fp-success);
}
.status-chip.offline {
  border-color: #f2d2ad;
  background: var(--fp-warning-soft);
  color: #a65e0f;
}
.pending-sync {
  border-color: #d6e5f5;
  background: var(--fp-primary-soft);
  color: var(--fp-primary-strong);
}
.install-button.visible {
  background: var(--fp-primary);
  border-color: var(--fp-primary);
  color: #fff;
}
.staff-mode-button .icon,
.staff-logout-button .icon,
.user-button .icon { color: var(--fp-primary); }
.user-button { background: var(--fp-primary-soft); color: var(--fp-primary-strong); }

.dashboard-view { color: var(--text); }
.dashboard-intro h1 { color: var(--fp-navy); }
.dashboard-intro p { color: var(--fp-text-secondary); }
.dashboard-period {
  background: var(--fp-surface);
  border-color: var(--fp-border);
  color: var(--fp-neutral);
  border-radius: var(--fp-control-radius);
}
.dashboard-period .icon { color: var(--fp-primary); }

.dashboard-actions a {
  border-color: var(--fp-border);
  background: var(--fp-surface);
  color: var(--fp-primary-strong);
  border-radius: var(--fp-control-radius);
  box-shadow: none;
}
.dashboard-actions a:hover {
  border-color: #bfd4e9;
  background: var(--fp-primary-soft);
}
.dashboard-actions a.primary,
.dashboard-actions a.primary:hover {
  border-color: var(--fp-primary);
  background: var(--fp-primary);
  color: #fff;
  box-shadow: 0 5px 12px rgba(33, 117, 199, .16);
}
.dashboard-actions a:not(.primary) .icon { color: var(--fp-primary); }

.attention-card {
  border-color: #f0c997;
  border-radius: var(--fp-card-radius);
  background: var(--fp-warning-soft);
  box-shadow: none;
}
.attention-icon {
  border-color: #f0b56f;
  background: #fffaf4;
  color: var(--fp-warning);
}
.attention-heading strong { color: #7b451a; }
.attention-heading span,
.attention-items > div { color: #85694f; }
.attention-items strong { color: #5d4632; }
.attention-dot { background: var(--fp-warning); }

.dashboard-empty-note {
  border-color: var(--fp-border);
  background: var(--fp-surface);
  border-radius: var(--fp-control-radius);
}
.dashboard-empty-note strong { color: var(--fp-navy); }
.dashboard-empty-note span { color: var(--fp-text-secondary); }

.dashboard-metrics { align-items: stretch; }
.dashboard-metric {
  min-width: 0;
  min-height: 122px;
  justify-content: flex-start;
  gap: 8px;
  padding: 15px 16px;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-card-radius);
  background: var(--fp-surface);
  box-shadow: var(--fp-shadow);
}
.dashboard-metric::before { display: none; }
.metric-icon-block {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  margin-bottom: 4px;
  border-radius: 10px;
  background: var(--fp-neutral);
  color: #fff;
}
.metric-icon-block .icon { width: 21px; height: 21px; }
.dashboard-metric.blue .metric-icon-block { background: var(--fp-primary); }
.dashboard-metric.green .metric-icon-block { background: var(--fp-success); }
.dashboard-metric.orange .metric-icon-block { background: var(--fp-warning); }
.dashboard-metric.navy .metric-icon-block { background: var(--fp-neutral); }
.dashboard-metric.gray .metric-icon-block { background: #8993a1; }
.dashboard-metric.red .metric-icon-block { background: var(--fp-danger); }
.dashboard-metric strong {
  color: var(--fp-navy);
  font-size: clamp(1.2rem, 1.8vw, 1.55rem);
  line-height: 1.15;
  letter-spacing: -.025em;
  overflow-wrap: anywhere;
}
.dashboard-metric span {
  margin-top: auto;
  color: var(--fp-text-secondary);
  font-size: .73rem;
  font-weight: 650;
  line-height: 1.25;
}

.dashboard-view .panel {
  border-color: var(--fp-border);
  border-radius: var(--fp-card-radius);
  background: var(--fp-surface);
  box-shadow: var(--fp-shadow);
}
.dashboard-view .panel-header { border-bottom-color: var(--fp-border); }
.dashboard-view .panel-header h2 { color: var(--fp-navy); }
.dashboard-view .panel-header span { color: var(--fp-text-secondary); }
.dashboard-view .secondary-button.compact {
  border-color: var(--fp-border);
  background: var(--fp-surface);
  color: var(--fp-primary-strong);
}
.dashboard-view .secondary-button.compact:hover {
  border-color: #bfd4e9;
  background: var(--fp-primary-soft);
}

.dashboard-sale-row { border-top-color: #edf1f6; }
.sale-main strong { color: var(--fp-primary-strong); }
.sale-main span { color: var(--text); }
.dashboard-sale-row time,
.sale-total span { color: var(--fp-text-secondary); }
.sale-total strong { color: var(--fp-success); }
.recent-activity-empty { color: var(--fp-text-secondary); }
.recent-activity-empty strong { color: var(--fp-navy); }

.dashboard-state-card {
  border-color: var(--fp-border);
  border-radius: var(--fp-card-radius);
  background: var(--fp-surface);
  box-shadow: var(--fp-shadow);
}
.dashboard-state-card.error {
  border-color: #efc3c3;
  background: var(--fp-danger-soft);
}
.dashboard-state-icon {
  background: var(--fp-primary-soft);
  color: var(--fp-primary-strong);
}
.dashboard-state-card.error .dashboard-state-icon {
  background: var(--fp-danger-soft);
  color: var(--fp-danger);
}
.dashboard-state-card h2 { color: var(--fp-navy); }
.dashboard-state-card p { color: var(--fp-text-secondary); }

@media (max-width: 900px) {
  .sidebar {
    background: var(--fp-surface);
    box-shadow: 20px 0 48px rgba(23, 36, 58, .16);
  }
  .sidebar-backdrop { background: rgba(23, 36, 58, .34); }
  .dashboard-metric { min-height: 116px; }
}

@media (max-width: 520px) {
  .dashboard-metric {
    min-height: 108px;
    padding: 12px;
    gap: 6px;
  }
  .metric-icon-block {
    width: 36px;
    height: 36px;
    border-radius: 9px;
  }
  .metric-icon-block .icon { width: 18px; height: 18px; }
  .dashboard-metric strong { font-size: 1.12rem; }
  .dashboard-metric span { font-size: .7rem; }
}


/* Phase 1 Step 13.5 shared POS design system */
:root {
  --fp-pos-header: #173968;
  --fp-pos-header-strong: #102b52;
  --fp-pos-header-text: #ffffff;
  --fp-pos-active: var(--fp-primary);
  --fp-pos-active-soft: var(--fp-primary-soft);
  --fp-pos-bg: var(--fp-background);
  --fp-pos-surface: var(--fp-surface);
  --fp-pos-border: var(--fp-border);
  --fp-pos-muted: var(--fp-text-secondary);
  --fp-pos-radius: 12px;
  --fp-pos-header-height: 64px;
}

body.pos-mode {
  background: var(--fp-pos-bg);
  overflow: hidden;
}
body.pos-mode #app { min-height: 100dvh; }

.pos-app-layout {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: var(--fp-pos-header-height) minmax(0, 1fr);
  background: var(--fp-pos-bg);
}
.pos-workspace-header {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  background: linear-gradient(90deg, var(--fp-pos-header-strong), var(--fp-pos-header));
  color: var(--fp-pos-header-text);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.pos-back-button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--fp-control-radius);
  background: rgba(255,255,255,.08);
  color: #fff;
  text-decoration: none;
  font-size: .78rem;
  font-weight: 760;
}
.pos-back-button:hover { background: rgba(255,255,255,.14); }
.pos-back-button > span:first-child { font-size: 1.05rem; line-height: 1; }
.pos-workspace-title { min-width: 0; }
.pos-workspace-title strong {
  display: block;
  color: #fff;
  font-size: 1rem;
  line-height: 1.15;
}
.pos-workspace-title span {
  display: block;
  max-width: 280px;
  margin-top: 2px;
  overflow: hidden;
  color: #cddaf0;
  font-size: .68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pos-workspace-spacer { flex: 1; }
.pos-workspace-header .branch-selector {
  min-width: 132px;
  max-width: 190px;
  color: #d9e6f7;
}
.pos-workspace-header .branch-selector select {
  min-height: 36px;
  border-color: rgba(255,255,255,.2);
  background: rgba(255,255,255,.1);
  color: #fff;
}
.pos-workspace-header .branch-selector select option { color: var(--fp-navy); background: #fff; }
.pos-workspace-header .status-chip,
.pos-workspace-header .staff-mode-button,
.pos-workspace-header .staff-logout-button,
.pos-staff-chip {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 9px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--fp-control-radius);
  background: rgba(255,255,255,.08);
  color: #fff;
  font-size: .72rem;
  font-weight: 720;
}
.pos-workspace-header .status-chip.online {
  border-color: rgba(75,204,132,.45);
  background: rgba(39,168,95,.16);
  color: #dff8e9;
}
.pos-workspace-header .status-chip.offline {
  border-color: rgba(255,184,92,.5);
  background: rgba(228,124,20,.18);
  color: #fff1dc;
}
.pos-workspace-header .pending-sync {
  border-color: rgba(130,184,238,.42);
  background: rgba(33,117,199,.22);
  color: #e8f4ff;
}
.pos-workspace-header .icon,
.pos-staff-chip .icon { width: 16px; height: 16px; }
.pos-workspace-main {
  min-height: 0;
  overflow: hidden;
  background: var(--fp-pos-bg);
}
.pos-workspace-main > [id$="-root"] {
  min-height: 100%;
}

.pos-shell.retail-pos-layout {
  height: calc(100dvh - var(--fp-pos-header-height));
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 68fr) minmax(330px, 32fr);
  margin: 0;
  overflow: hidden;
  background: var(--fp-pos-bg);
}
.retail-products-workspace {
  min-width: 0;
  min-height: 0;
  padding: 14px 16px 18px;
  overflow-y: auto;
  background: var(--fp-pos-bg);
}
.retail-products-heading { margin: 0 0 10px; align-items: center; }
.retail-products-heading h1 { font-size: 1.18rem; }
.retail-products-heading .pos-connection {
  margin: 0;
  padding: 6px 9px;
  border: 1px solid var(--fp-pos-border);
  border-radius: var(--fp-control-radius);
  background: var(--fp-pos-surface);
}
.retail-products-heading .pos-connection small { display: inline; margin-left: 5px; }
.pos-search-row {
  grid-template-columns: minmax(260px, 1fr) minmax(200px, .42fr);
  gap: 9px;
}
.pos-search input,
.barcode-input input {
  min-height: 40px;
  border-radius: var(--fp-control-radius);
  border-color: var(--fp-pos-border);
  box-shadow: none;
}
.retail-category-chips,
.restaurant-categories,
.mode-category-chips {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 10px 0;
  padding: 1px 0 3px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.retail-category-chips .category-button,
.restaurant-categories button,
.mode-category-chips button {
  min-height: 34px;
  flex: 0 0 auto;
  border: 1px solid var(--fp-pos-border);
  border-radius: 9px;
  padding: 6px 11px;
  background: var(--fp-pos-surface);
  color: var(--fp-neutral);
  font-size: .72rem;
  font-weight: 700;
  white-space: nowrap;
}
.retail-category-chips .category-button.active,
.restaurant-categories button.active,
.mode-category-chips button.active {
  border-color: var(--fp-pos-active);
  background: var(--fp-pos-active);
  color: #fff;
}
.quick-qty-row {
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 12px;
}
.quick-qty-row > span {
  margin-right: 3px;
  color: var(--fp-pos-muted);
  font-size: .7rem;
  font-weight: 750;
}
.quick-qty-row button {
  width: 34px;
  height: 34px;
  border: 1px solid var(--fp-pos-border);
  border-radius: 8px;
  background: var(--fp-pos-surface);
  color: var(--fp-navy);
  font-size: .75rem;
  font-weight: 750;
}
.quick-qty-row button.active {
  border-color: var(--fp-pos-active);
  background: var(--fp-pos-active);
  color: #fff;
}
.product-grid {
  grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
  gap: 9px;
}
.product-card {
  min-height: 118px;
  padding: 12px;
  border-color: var(--fp-pos-border);
  border-radius: var(--fp-pos-radius);
  background: var(--fp-pos-surface);
  box-shadow: 0 2px 8px rgba(23,36,58,.04);
  transform: none;
}
.product-card:hover {
  border-color: #b7cfe8;
  box-shadow: 0 3px 10px rgba(23,36,58,.07);
}
.product-card:active:not(:disabled) {
  transform: scale(.985);
  border-color: var(--fp-pos-active);
  background: var(--fp-pos-active-soft);
}
.product-card strong {
  margin: 8px 0 6px;
  font-size: .88rem;
  line-height: 1.2;
}
.product-card > span:not(.product-category) { font-size: .82rem; }
.product-card small { font-size: .66rem; }
.product-category {
  padding: 4px 7px;
  background: var(--fp-pos-active-soft);
  color: var(--fp-primary-strong);
  font-size: .61rem;
}
.product-card.out-of-stock { opacity: .55; }

.retail-sale-panel,
.pos-cart {
  min-width: 0;
  min-height: 0;
  height: calc(100dvh - var(--fp-pos-header-height));
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--fp-pos-border);
  background: var(--fp-pos-surface);
  overflow: hidden;
}
.cart-heading {
  padding: 14px 15px 8px;
  border-bottom: 0;
}
.cart-heading h2 { margin-bottom: 0; font-size: 1.05rem; }
.cart-utility-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 0 15px 10px;
}
.cart-utility-row .secondary-button {
  min-height: 34px;
  justify-content: center;
  padding: 6px 8px;
  border-radius: 9px;
  color: var(--fp-primary-strong);
  font-size: .68rem;
  text-decoration: none;
}
.cart-lines {
  flex: 1 1 auto;
  min-height: 100px;
  padding: 0 15px;
  overflow-y: auto;
}
.cart-empty { min-height: 150px; }
.cart-line { padding: 10px 0; }
.cart-line-title strong { font-size: .78rem; }
.cart-line-controls { margin-top: 7px; }
.cart-line-controls button { width: 30px; height: 30px; }
.item-notes { min-height: 34px; margin-top: 7px; }
.payment-panel {
  flex: 0 0 auto;
  padding: 12px 15px 14px;
  border-top: 1px solid var(--fp-pos-border);
  background: #fbfdff;
}
.payment-panel label { gap: 4px; font-size: .68rem; }
.payment-panel input { min-height: 38px; padding: 8px 10px; border-radius: 9px; }
.total-row { margin: 8px 0; font-size: .76rem; }
.total-row strong { font-size: 1rem; }
.cash-button,
.primary,
.mode-payment-button {
  min-height: 42px;
  border: 0;
  border-radius: 10px;
  background: var(--fp-pos-active);
  color: #fff;
  font-weight: 780;
}
.cash-button:hover,
.primary:hover,
.mode-payment-button:hover { background: var(--fp-primary-strong); }
.recent-sales { margin-top: 18px; }
.recent-sales .pos-section-heading { margin: 0 0 8px; }
.recent-sales-list article { border-radius: 9px; }

.restaurant-shell {
  height: calc(100dvh - var(--fp-pos-header-height));
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  padding: 0;
  overflow: hidden;
  background: var(--fp-pos-bg);
}
.restaurant-workflow-tabs,
.mode-pos-tabs {
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  overflow-x: auto;
  border-bottom: 1px solid var(--fp-pos-border);
  background: var(--fp-pos-surface);
}
.restaurant-workflow-tabs button,
.restaurant-workflow-tabs a,
.mode-pos-tabs button,
.mode-pos-tabs a {
  min-height: 33px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--fp-pos-border);
  border-radius: 9px;
  padding: 6px 10px;
  background: var(--fp-pos-surface);
  color: var(--fp-primary-strong);
  text-decoration: none;
  font-size: .7rem;
  font-weight: 730;
}
.restaurant-workflow-tabs button.active,
.restaurant-workflow-tabs a.active,
.mode-pos-tabs button.active,
.mode-pos-tabs a.active {
  border-color: var(--fp-pos-active);
  background: var(--fp-pos-active);
  color: #fff;
}
.restaurant-pos-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 68fr) minmax(330px, 32fr);
  gap: 0;
  overflow: hidden;
}
.restaurant-menu-panel {
  min-width: 0;
  min-height: 0;
  padding: 12px 14px 16px;
  border: 0;
  border-radius: 0;
  overflow-y: auto;
  background: var(--fp-pos-bg);
}
.restaurant-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  margin-bottom: 8px;
}
.restaurant-search input {
  min-height: 40px;
  border: 1px solid var(--fp-pos-border);
  border-radius: var(--fp-control-radius);
  padding: 8px 11px;
  background: #fff;
}
.restaurant-search span { color: var(--fp-pos-muted); font-size: .7rem; }
.restaurant-categories { margin: 0 0 10px; }
.restaurant-menu-grid {
  grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
  gap: 9px;
}
.menu-card {
  min-height: 112px;
  border: 1px solid var(--fp-pos-border);
  border-radius: var(--fp-pos-radius);
  background: var(--fp-pos-surface);
  box-shadow: 0 2px 8px rgba(23,36,58,.04);
  overflow: hidden;
}
.menu-card:hover { border-color: #b7cfe8; }
.menu-card:active { transform: scale(.985); background: var(--fp-pos-active-soft); }
.menu-card.text-only .menu-card-body { min-height: 110px; }
.menu-card img { height: 86px; object-fit: cover; }
.menu-card-body { padding: 10px; }
.menu-card-body strong { font-size: .85rem; }
.menu-card-body small { font-size: .64rem; }
.menu-card-body b { margin-top: auto; color: var(--fp-primary-strong); font-size: .8rem; }
.restaurant-order-panel {
  position: static;
  top: auto;
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 12px;
  border: 0;
  border-left: 1px solid var(--fp-pos-border);
  border-radius: 0;
  overflow-y: auto;
  background: var(--fp-pos-surface);
}
.restaurant-empty-order { min-height: 100%; }
.order-card { min-height: 100%; }
.order-card-head { padding-bottom: 9px; border-bottom-color: var(--fp-pos-border); }
.order-type-buttons { gap: 6px; }
.order-type-buttons button {
  min-height: 35px;
  border-radius: 9px;
  border-color: var(--fp-pos-border);
}
.order-type-buttons button.active,
.order-type-buttons button:hover {
  border-color: var(--fp-pos-active);
  background: var(--fp-pos-active);
  color: #fff;
}
.restaurant-field input,
.restaurant-field select,
.restaurant-field textarea {
  border-radius: 9px;
  border-color: var(--fp-pos-border);
}
.order-line { border-color: var(--fp-pos-border); }
.qty-quick {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 3px;
}
.qty-quick button {
  min-width: 0;
  min-height: 27px;
  border-radius: 6px;
  border-color: var(--fp-pos-border);
  font-size: .64rem;
}
.order-actions {
  position: sticky;
  bottom: 0;
  padding-top: 9px;
  background: var(--fp-pos-surface);
}
.order-actions .primary { min-height: 40px; }
.open-orders-grid,
.tables-workspace {
  min-height: 0;
  overflow-y: auto;
  padding: 14px;
}
.open-order-card,
.table-card {
  border-radius: var(--fp-pos-radius);
  border-color: var(--fp-pos-border);
  box-shadow: 0 2px 8px rgba(23,36,58,.04);
}

.mode-pos-screen {
  height: calc(100dvh - var(--fp-pos-header-height));
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  background: var(--fp-pos-bg);
}
.mode-pos-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 66fr) minmax(330px, 34fr);
  gap: 0;
  overflow: hidden;
}
.mode-catalog-panel {
  min-width: 0;
  min-height: 0;
  padding: 12px 14px 18px;
  overflow-y: auto;
}
.mode-sale-panel {
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 12px 14px;
  overflow-y: auto;
  border-left: 1px solid var(--fp-pos-border);
  background: var(--fp-pos-surface);
}
.mode-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.mode-panel-heading h2,
.mode-panel-heading h3 {
  margin: 0;
  color: var(--fp-navy);
  font-size: 1rem;
}
.mode-panel-heading p {
  margin: 2px 0 0;
  color: var(--fp-pos-muted);
  font-size: .68rem;
}
.mode-count {
  min-width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--fp-pos-active-soft);
  color: var(--fp-primary-strong);
  font-size: .7rem;
  font-weight: 800;
}
.mode-search,
.mode-field {
  display: grid;
  gap: 4px;
  color: var(--fp-pos-muted);
  font-size: .67rem;
  font-weight: 700;
}
.mode-search { margin-top: 10px; }
.mode-search input,
.mode-field input,
.mode-field select,
.mode-field textarea {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--fp-pos-border);
  border-radius: 9px;
  padding: 8px 10px;
  background: #fff;
  color: var(--fp-navy);
}
.mode-field textarea { min-height: 62px; resize: vertical; }
.mode-service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  gap: 9px;
}
.mode-service-card {
  min-height: 125px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border: 1px solid var(--fp-pos-border);
  border-radius: var(--fp-pos-radius);
  padding: 11px;
  background: var(--fp-pos-surface);
  color: var(--text);
  text-align: left;
  box-shadow: 0 2px 8px rgba(23,36,58,.04);
}
.mode-service-card:hover { border-color: #b7cfe8; }
.mode-service-card:active {
  transform: scale(.985);
  border-color: var(--fp-pos-active);
  background: var(--fp-pos-active-soft);
}
.mode-service-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--fp-pos-active-soft);
  color: var(--fp-primary-strong);
}
.mode-service-card strong { margin-top: 8px; color: var(--fp-navy); font-size: .82rem; line-height: 1.2; }
.mode-service-card small { margin-top: 3px; color: var(--fp-pos-muted); font-size: .63rem; }
.mode-service-card b { margin-top: auto; color: var(--fp-primary-strong); font-size: .78rem; }
.mode-secondary-panel {
  margin-top: 18px;
  padding: 12px;
  border: 1px solid var(--fp-pos-border);
  border-radius: var(--fp-pos-radius);
  background: var(--fp-pos-surface);
}
.mode-request-list { display: grid; gap: 7px; margin-top: 9px; }
.mode-request-list article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid #edf1f6;
}
.mode-request-list article:first-child { border-top: 0; }
.mode-request-list strong,
.mode-request-list small { display: block; }
.mode-request-list strong { color: var(--fp-navy); font-size: .76rem; }
.mode-request-list small { margin-top: 2px; color: var(--fp-pos-muted); font-size: .63rem; }
.mode-row-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.mode-row-actions button,
.danger-link {
  min-height: 30px;
  border: 1px solid var(--fp-pos-border);
  border-radius: 8px;
  padding: 5px 8px;
  background: #fff;
  color: var(--fp-primary-strong);
  font-size: .64rem;
  font-weight: 700;
}
.danger-link { color: var(--fp-danger); }
.mode-sale-lines {
  flex: 1 1 auto;
  min-height: 90px;
  overflow-y: auto;
  border-top: 1px solid var(--fp-pos-border);
  border-bottom: 1px solid var(--fp-pos-border);
}
.mode-sale-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid #edf1f6;
}
.mode-sale-line:last-child { border-bottom: 0; }
.mode-sale-line strong,
.mode-sale-line small { display: block; }
.mode-sale-line strong { color: var(--fp-navy); font-size: .76rem; }
.mode-sale-line small,
.mode-sale-line > span { color: var(--fp-pos-muted); font-size: .64rem; }
.mode-sale-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 9px;
  border-top: 1px solid var(--fp-pos-border);
  color: var(--fp-pos-muted);
  font-size: .75rem;
}
.mode-sale-summary strong { color: var(--fp-navy); font-size: 1.05rem; }
.mode-sale-actions { display: grid; grid-template-columns: .8fr 1.2fr; gap: 7px; }
.mode-sale-actions .secondary-button { min-height: 42px; justify-content: center; border-radius: 10px; }
.mode-payment-button { width: 100%; }

.mode-empty {
  grid-column: 1 / -1;
  padding: 28px 16px;
  color: var(--fp-pos-muted);
  text-align: center;
  font-size: .72rem;
}
.mode-empty.compact { padding: 16px 10px; }

@media (max-width: 1180px) {
  .pos-workspace-header { padding: 0 10px; gap: 7px; }
  .pos-workspace-title span { max-width: 180px; }
  .pos-workspace-header .branch-selector { min-width: 112px; max-width: 145px; }
  .pos-workspace-header .status-chip,
  .pos-workspace-header .staff-mode-button,
  .pos-workspace-header .staff-logout-button,
  .pos-staff-chip { padding: 6px 7px; font-size: .66rem; }
  .pos-shell.retail-pos-layout,
  .restaurant-pos-grid { grid-template-columns: minmax(0, 64fr) minmax(310px, 36fr); }
  .mode-pos-grid { grid-template-columns: minmax(0, 62fr) minmax(320px, 38fr); }
  .product-grid,
  .restaurant-menu-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .mode-service-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

@media (max-width: 900px) {
  body.pos-mode { overflow: auto; }
  .pos-app-layout { min-height: 100dvh; grid-template-rows: auto minmax(0, 1fr); }
  .pos-workspace-header {
    min-height: var(--fp-pos-header-height);
    flex-wrap: wrap;
    padding: 7px 10px;
  }
  .pos-workspace-spacer { display: none; }
  .pos-workspace-title { margin-right: auto; }
  .pos-workspace-header .branch-selector { order: 6; width: 100%; max-width: none; }
  .pos-workspace-header .branch-selector > span { display: none; }
  .pos-shell.retail-pos-layout,
  .restaurant-pos-grid,
  .mode-pos-grid {
    height: auto;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) 330px;
    overflow: visible;
  }
  .restaurant-shell,
  .mode-pos-screen { height: auto; min-height: 0; overflow: visible; }
  .retail-sale-panel,
  .pos-cart,
  .restaurant-order-panel,
  .mode-sale-panel {
    height: calc(100dvh - 112px);
    position: sticky;
    top: 0;
  }
}

@media (max-width: 720px) {
  .pos-workspace-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) repeat(3, auto);
    gap: 6px;
  }
  .pos-back-button span:last-child,
  .pos-workspace-header .status-chip span,
  .pos-workspace-header .staff-mode-button span,
  .pos-staff-chip span,
  .pos-owner-button span { display: none; }
  .pos-back-button,
  .pos-workspace-header .status-chip,
  .pos-workspace-header .staff-mode-button,
  .pos-workspace-header .staff-logout-button,
  .pos-staff-chip {
    min-width: 36px;
    width: 36px;
    justify-content: center;
    padding: 6px;
  }
  .pos-workspace-title strong { font-size: .88rem; }
  .pos-workspace-title span { max-width: 145px; font-size: .61rem; }
  .pos-workspace-header .branch-selector {
    grid-column: 1 / -1;
    order: 7;
    width: 100%;
  }
  .pos-shell.retail-pos-layout,
  .restaurant-pos-grid,
  .mode-pos-grid {
    display: block;
  }
  .retail-products-workspace,
  .restaurant-menu-panel,
  .mode-catalog-panel { padding: 11px 10px 14px; }
  .retail-sale-panel,
  .pos-cart,
  .restaurant-order-panel,
  .mode-sale-panel {
    position: static;
    height: auto;
    min-height: 420px;
    border-left: 0;
    border-top: 1px solid var(--fp-pos-border);
  }
  .pos-search-row { grid-template-columns: 1fr; }
  .quick-qty-row { overflow-x: auto; }
  .product-grid,
  .restaurant-menu-grid,
  .mode-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .restaurant-workflow-tabs,
  .mode-pos-tabs { position: sticky; top: 0; z-index: 5; }
  .qty-quick { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mode-request-list article,
  .mode-sale-line { align-items: flex-start; }
}

@media (max-width: 430px) {
  .pos-workspace-header {
    grid-template-columns: auto minmax(0, 1fr) repeat(2, auto);
  }
  .pos-workspace-header .pending-sync { display: none; }
  .product-grid,
  .restaurant-menu-grid,
  .mode-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .product-card,
  .menu-card,
  .mode-service-card { min-height: 108px; padding: 9px; }
  .cart-utility-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mode-sale-actions { grid-template-columns: 1fr; }
}

@media (max-width: 360px) {
  .product-grid,
  .restaurant-menu-grid,
  .mode-service-grid { grid-template-columns: 1fr; }
}


/* Phase 1 Step 13.6 Add Product workspace */
.products-heading { align-items: center; }
.products-heading-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}
.products-new-button,
.add-product-primary {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--fp-primary);
  border-radius: var(--fp-control-radius);
  padding: 8px 13px;
  background: var(--fp-primary);
  color: #fff;
  font-weight: 760;
  font-size: .78rem;
  box-shadow: 0 4px 10px rgba(33, 117, 199, .14);
}
.products-new-button:hover,
.add-product-primary:hover { background: var(--fp-primary-strong); border-color: var(--fp-primary-strong); }
.products-new-button:disabled,
.add-product-primary:disabled { opacity: .48; cursor: default; box-shadow: none; }
.product-toolbar {
  grid-template-columns: minmax(240px, 1.4fr) minmax(170px, .7fr) minmax(145px, .55fr);
}
.products-list-only { display: block; }

.add-product-workspace {
  width: 100%;
  display: grid;
  place-items: start center;
  padding: 2px 0 24px;
}
.add-product-card {
  width: min(1040px, 100%);
  overflow: hidden;
  border: 1px solid var(--fp-border);
  border-radius: 18px;
  background: var(--fp-surface);
  box-shadow: 0 8px 26px rgba(23, 36, 58, .07);
}
.add-product-header {
  min-height: 78px;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  padding: 15px 20px;
  border-bottom: 1px solid var(--fp-border);
  background: var(--fp-surface);
}
.add-product-back {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--fp-navy);
  font-size: 1.15rem;
}
.add-product-back:hover { background: var(--fp-background); }
.add-product-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--fp-primary-soft);
  color: var(--fp-primary);
}
.add-product-icon .icon { width: 20px; height: 20px; }
.add-product-header h1 {
  margin: 0;
  color: var(--fp-navy);
  font-size: 1.2rem;
  line-height: 1.2;
  letter-spacing: -.02em;
}
.add-product-header p {
  margin: 3px 0 0;
  color: var(--fp-text-secondary);
  font-size: .76rem;
}

.add-product-stepper {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--fp-border);
  background: #fbfdff;
}
.add-product-step {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--fp-text-secondary);
}
.add-product-step > span {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--fp-neutral-soft);
  color: var(--fp-neutral);
  font-size: .7rem;
  font-weight: 820;
}
.add-product-step strong {
  min-width: 0;
  overflow: hidden;
  font-size: .76rem;
  font-weight: 720;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.add-product-step.active { color: var(--fp-primary-strong); }
.add-product-step.active > span {
  background: var(--fp-primary);
  color: #fff;
}
.add-product-step.completed { color: var(--fp-navy); }
.add-product-step.completed > span {
  background: var(--fp-primary-soft);
  color: var(--fp-primary);
}

.add-product-form {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}
.add-product-step-content {
  min-height: 470px;
  padding: 18px 20px 22px;
  background: var(--fp-background);
}
.add-product-section {
  padding: 18px;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-card-radius);
  background: var(--fp-surface);
}
.add-product-section-heading { margin-bottom: 16px; }
.add-product-section-heading h2 {
  margin: 0;
  color: var(--fp-navy);
  font-size: 1.02rem;
}
.add-product-section-heading p {
  margin: 4px 0 0;
  color: var(--fp-text-secondary);
  font-size: .72rem;
}

.product-image-field {
  display: grid;
  gap: 8px;
  margin-bottom: 18px;
}
.product-image-label {
  color: var(--fp-navy);
  font-size: .76rem;
  font-weight: 720;
}
.product-image-label small { color: var(--fp-text-secondary); font-weight: 620; }
.product-image-dropzone {
  min-height: 148px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  padding: 20px;
  border: 1px dashed #c8d4e2;
  border-radius: 13px;
  background: #fbfdff;
  color: var(--fp-text-secondary);
  text-align: center;
}
.product-image-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--fp-primary-soft);
  color: var(--fp-primary);
}
.product-image-icon .icon { width: 20px; height: 20px; }
.product-image-dropzone strong { color: var(--fp-navy); font-size: .84rem; }
.product-image-dropzone span { font-size: .68rem; }
.product-image-field.is-disabled .product-image-dropzone { cursor: default; }

.premium-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.premium-form-grid.one-column { grid-template-columns: 1fr; }
.premium-field {
  min-width: 0;
  display: grid;
  gap: 6px;
}
.premium-label {
  color: var(--fp-navy);
  font-size: .74rem;
  font-weight: 730;
}
.premium-label em {
  color: var(--fp-danger);
  font-style: normal;
}
.premium-input-shell,
.branch-readonly-field {
  min-height: 46px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 0 12px;
  border: 1px solid var(--fp-border);
  border-radius: 11px;
  background: var(--fp-surface);
}
.premium-field-icon {
  width: 17px;
  height: 17px;
  color: var(--fp-primary);
}
.premium-input-shell input,
.premium-input-shell select {
  width: 100%;
  min-width: 0;
  height: 44px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--fp-navy);
  font-size: .8rem;
}
.premium-input-shell input::placeholder { color: #99a5b4; }
.premium-field:focus-within .premium-input-shell {
  border-color: var(--fp-primary);
  box-shadow: 0 0 0 3px rgba(33, 117, 199, .11);
}
.branch-readonly-field {
  background: #f8fbfe;
  color: var(--fp-navy);
}
.branch-readonly-field strong {
  min-width: 0;
  overflow: hidden;
  font-size: .79rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.premium-help {
  color: var(--fp-text-secondary);
  font-size: .64rem;
  line-height: 1.35;
}
.premium-error {
  color: var(--fp-danger);
  font-size: .66rem;
  line-height: 1.3;
}
.premium-field.has-error .premium-input-shell {
  border-color: #d88989;
  box-shadow: 0 0 0 2px rgba(201, 59, 59, .06);
}
.premium-field.has-error .premium-field-icon { color: var(--fp-danger); }

.add-product-review {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}
.add-product-review > div {
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--fp-border);
  border-radius: 10px;
  background: #f9fbfd;
}
.add-product-review span,
.add-product-review strong { display: block; }
.add-product-review span {
  color: var(--fp-text-secondary);
  font-size: .62rem;
}
.add-product-review strong {
  margin-top: 3px;
  overflow: hidden;
  color: var(--fp-navy);
  font-size: .75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.add-product-actions {
  position: sticky;
  bottom: 0;
  z-index: 4;
  min-height: 68px;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 12px 18px max(12px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--fp-border);
  background: rgba(255, 255, 255, .98);
}
.add-product-actions .secondary-button,
.add-product-primary {
  min-height: 40px;
  border-radius: 10px;
}
.add-product-actions .secondary-button:disabled {
  opacity: .42;
  cursor: default;
}
.add-product-actions-spacer { min-width: 0; }

@media (max-width: 900px) {
  .add-product-card { width: min(900px, 100%); }
  .add-product-step-content { min-height: 430px; }
}

@media (max-width: 720px) {
  .products-heading {
    align-items: flex-start;
    flex-direction: column;
  }
  .products-heading-actions { width: 100%; }
  .products-heading-actions > button { flex: 1; }
  .product-toolbar { grid-template-columns: 1fr; }
  .add-product-workspace { padding-bottom: 8px; }
  .add-product-card { border-radius: 14px; }
  .add-product-header { padding: 13px 14px; }
  .add-product-stepper { padding: 10px 14px; }
  .add-product-step-content { min-height: 0; padding: 12px; }
  .add-product-section { padding: 14px; }
  .premium-form-grid { grid-template-columns: 1fr; }
  .add-product-review { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .add-product-header {
    grid-template-columns: auto auto minmax(0, 1fr);
    gap: 8px;
  }
  .add-product-back { width: 32px; height: 32px; }
  .add-product-icon { width: 34px; height: 34px; }
  .add-product-header h1 { font-size: 1rem; }
  .add-product-header p { font-size: .66rem; }
  .add-product-stepper { gap: 4px; padding: 9px 10px; }
  .add-product-step { gap: 5px; }
  .add-product-step > span { width: 24px; height: 24px; font-size: .64rem; }
  .add-product-step strong { font-size: .65rem; }
  .product-image-dropzone { min-height: 126px; padding: 16px; }
  .premium-input-shell,
  .branch-readonly-field { min-height: 44px; padding-inline: 10px; }
  .premium-input-shell input,
  .premium-input-shell select { height: 42px; font-size: .76rem; }
  .add-product-review { grid-template-columns: 1fr 1fr; gap: 7px; }
  .add-product-actions {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    padding-inline: 10px;
    gap: 6px;
  }
  .add-product-actions .secondary-button,
  .add-product-primary {
    min-height: 38px;
    padding: 7px 9px;
    font-size: .7rem;
  }
}

@media (max-width: 390px) {
  .add-product-step strong { font-size: .61rem; }
  .add-product-actions {
    grid-template-columns: auto 1fr auto auto;
  }
  .add-product-actions .secondary-button,
  .add-product-primary {
    padding-inline: 7px;
    font-size: .66rem;
  }
}


/* Phase 1 Step 13.7 premium Inventory workspace */
.inventory-workspace {
  width: min(1480px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 16px;
}

.inventory-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}
.inventory-eyebrow {
  display: inline-block;
  margin-bottom: 4px;
  color: var(--fp-primary);
  font-size: .67rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.inventory-hero h1 {
  margin: 0;
  color: var(--fp-navy);
  font-size: clamp(1.55rem, 2.2vw, 2rem);
  line-height: 1.15;
  letter-spacing: -.035em;
}
.inventory-hero p {
  margin: 5px 0 0;
  color: var(--fp-text-secondary);
  font-size: .82rem;
}
.inventory-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.inventory-primary-action,
.inventory-secondary-action {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: var(--fp-control-radius);
  padding: 8px 12px;
  font-size: .75rem;
  font-weight: 740;
  text-decoration: none;
}
.inventory-primary-action {
  border: 1px solid var(--fp-primary);
  background: var(--fp-primary);
  color: #fff;
}
.inventory-primary-action:hover { background: var(--fp-primary-strong); border-color: var(--fp-primary-strong); }
.inventory-secondary-action {
  border: 1px solid var(--fp-border);
  background: var(--fp-surface);
  color: var(--fp-primary-strong);
}
.inventory-secondary-action:hover { border-color: #bed2e6; background: var(--fp-primary-soft); }
.inventory-secondary-action.compact { min-height: 34px; padding: 6px 9px; font-size: .68rem; }
.inventory-primary-action .icon,
.inventory-secondary-action .icon { width: 16px; height: 16px; }

.inventory-message {
  padding: 10px 12px;
  border: 1px solid #c8e1f5;
  border-radius: var(--fp-control-radius);
  background: var(--fp-primary-soft);
  color: var(--fp-primary-strong);
  font-size: .74rem;
}

.inventory-overview {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.inventory-metric-card {
  min-width: 0;
  min-height: 126px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 14px;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-card-radius);
  background: var(--fp-surface);
  box-shadow: var(--fp-shadow);
}
.inventory-metric-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  margin-bottom: 9px;
  border-radius: 10px;
  background: var(--fp-neutral);
  color: #fff;
}
.inventory-metric-icon .icon { width: 19px; height: 19px; }
.inventory-metric-card.blue .inventory-metric-icon { background: var(--fp-primary); }
.inventory-metric-card.green .inventory-metric-icon { background: var(--fp-success); }
.inventory-metric-card.orange .inventory-metric-icon { background: var(--fp-warning); }
.inventory-metric-card.red .inventory-metric-icon { background: var(--fp-danger); }
.inventory-metric-card.gray .inventory-metric-icon { background: var(--fp-neutral); }
.inventory-metric-card > strong {
  color: var(--fp-navy);
  font-size: 1.45rem;
  line-height: 1;
}
.inventory-metric-card > span {
  margin-top: 5px;
  color: var(--fp-navy);
  font-size: .73rem;
  font-weight: 720;
}
.inventory-metric-card > small {
  margin-top: auto;
  padding-top: 6px;
  color: var(--fp-text-secondary);
  font-size: .61rem;
  line-height: 1.3;
}

.inventory-control-card,
.inventory-main-card,
.inventory-recent-section {
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-card-radius);
  background: var(--fp-surface);
  box-shadow: var(--fp-shadow);
}
.inventory-control-card { padding: 14px; }
.inventory-filter-head,
.inventory-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.inventory-filter-head h2,
.inventory-section-heading h2 {
  margin: 0;
  color: var(--fp-navy);
  font-size: .95rem;
}
.inventory-filter-head p,
.inventory-section-heading p {
  margin: 3px 0 0;
  color: var(--fp-text-secondary);
  font-size: .67rem;
}

.inventory-filters {
  display: grid;
  grid-template-columns: minmax(260px, 1.2fr) minmax(180px, .55fr);
  gap: 10px;
  margin-top: 12px;
}
.inventory-search-field,
.inventory-category-field {
  display: grid;
  gap: 5px;
  color: var(--fp-text-secondary);
  font-size: .66rem;
  font-weight: 700;
}
.inventory-search-field > div {
  min-height: 40px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid var(--fp-border);
  border-radius: 9px;
  background: var(--fp-surface);
}
.inventory-field-icon { width: 16px; height: 16px; color: var(--fp-primary); }
.inventory-search-field input,
.inventory-category-field select {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  border: 1px solid var(--fp-border);
  border-radius: 9px;
  padding: 8px 10px;
  background: var(--fp-surface);
  color: var(--fp-navy);
  font-size: .75rem;
  outline: 0;
}
.inventory-search-field input {
  min-height: 38px;
  border: 0;
  padding: 0;
}
.inventory-search-field > div:focus-within,
.inventory-category-field select:focus {
  border-color: var(--fp-primary);
  box-shadow: 0 0 0 3px rgba(33, 117, 199, .11);
}

.inventory-stock-chips {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.inventory-stock-chips button {
  min-height: 34px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--fp-border);
  border-radius: 9px;
  padding: 6px 10px;
  background: var(--fp-surface);
  color: var(--fp-neutral);
  font-size: .68rem;
  font-weight: 720;
}
.inventory-stock-chips button span {
  min-width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: var(--fp-neutral-soft);
  color: var(--fp-neutral);
  font-size: .6rem;
}
.inventory-stock-chips button.active {
  border-color: var(--fp-primary);
  background: var(--fp-primary);
  color: #fff;
}
.inventory-stock-chips button.active span {
  background: rgba(255,255,255,.18);
  color: #fff;
}

.inventory-recent-section { padding: 14px; }
.inventory-recent-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin-top: 11px;
}
.inventory-recent-card {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 10px;
  padding: 10px;
  border: 1px solid var(--fp-border);
  border-radius: 11px;
  background: #fbfdff;
}
.inventory-recent-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--fp-primary-soft);
  color: var(--fp-primary);
}
.inventory-recent-icon.ok { background: var(--fp-success-soft); color: var(--fp-success); }
.inventory-recent-icon.low { background: var(--fp-warning-soft); color: var(--fp-warning); }
.inventory-recent-icon.out { background: var(--fp-danger-soft); color: var(--fp-danger); }
.inventory-recent-icon .icon { width: 17px; height: 17px; }
.inventory-recent-card > div:nth-child(2) { min-width: 0; }
.inventory-recent-card strong,
.inventory-recent-card span,
.inventory-recent-card small { display: block; }
.inventory-recent-card strong {
  overflow: hidden;
  color: var(--fp-navy);
  font-size: .75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inventory-recent-card span,
.inventory-recent-card small {
  margin-top: 2px;
  color: var(--fp-text-secondary);
  font-size: .6rem;
}
.inventory-recent-stock {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 7px;
  padding-top: 7px;
  border-top: 1px solid #edf1f6;
}
.inventory-recent-stock > strong {
  color: var(--fp-navy);
  font-size: 1rem;
}
.inventory-recent-stock button {
  justify-self: end;
  border: 0;
  background: transparent;
  color: var(--fp-primary-strong);
  font-size: .62rem;
  font-weight: 720;
}

.inventory-main-card { overflow: hidden; }
.inventory-list-heading { padding: 14px 16px; border-bottom: 1px solid var(--fp-border); }
.inventory-branch-pill {
  max-width: 220px;
  overflow: hidden;
  padding: 5px 8px;
  border-radius: 8px;
  background: var(--fp-primary-soft);
  color: var(--fp-primary-strong);
  font-size: .63rem;
  font-weight: 720;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.premium-inventory-list { display: grid; }
.premium-inventory-row {
  display: grid;
  grid-template-columns: minmax(240px, 1.15fr) minmax(135px, .42fr) minmax(360px, 1fr);
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid #edf1f6;
  background: var(--fp-surface);
  transition: background .16s ease, box-shadow .16s ease;
}
.premium-inventory-row:last-child { border-bottom: 0; }
.premium-inventory-row.inventory-row-focus {
  background: var(--fp-primary-soft);
  box-shadow: inset 3px 0 0 var(--fp-primary);
}

.premium-inventory-product {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}
.inventory-product-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--fp-primary-soft);
  color: var(--fp-primary);
}
.inventory-product-icon .icon { width: 18px; height: 18px; }
.premium-inventory-product > div:last-child { min-width: 0; }
.premium-inventory-product strong,
.premium-inventory-product span,
.premium-inventory-product small { display: block; }
.premium-inventory-product strong {
  overflow: hidden;
  color: var(--fp-navy);
  font-size: .78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.premium-inventory-product span {
  margin-top: 2px;
  color: var(--fp-text-secondary);
  font-size: .65rem;
}
.premium-inventory-product small {
  margin-top: 2px;
  color: #8693a4;
  font-size: .59rem;
  line-height: 1.35;
}

.premium-inventory-quantity > span:first-child {
  display: block;
  color: var(--fp-text-secondary);
  font-size: .61rem;
}
.premium-inventory-quantity > strong {
  display: block;
  margin-top: 2px;
  color: var(--fp-navy);
  font-size: 1.4rem;
  line-height: 1;
}
.inventory-state-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 7px;
  flex-wrap: wrap;
}
.stock-state {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin: 0;
  padding: 4px 7px;
  border-radius: 7px;
  font-size: .59rem;
  font-weight: 760;
}
.stock-state.ok { background: var(--fp-success-soft); color: var(--fp-success); }
.stock-state.low { background: var(--fp-warning-soft); color: #a7600e; }
.stock-state.out { background: var(--fp-danger-soft); color: var(--fp-danger); }
.inventory-sync-state {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 7px;
  border-radius: 7px;
  font-size: .58rem;
  font-weight: 720;
  text-transform: capitalize;
}
.inventory-sync-state.pending {
  background: var(--fp-primary-soft);
  color: var(--fp-primary-strong);
}
.inventory-sync-state.synced {
  background: var(--fp-neutral-soft);
  color: var(--fp-neutral);
}

.premium-inventory-adjust {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(90px, .42fr) minmax(150px, 1fr);
  gap: 7px;
}
.premium-inventory-adjust label {
  min-width: 0;
  display: grid;
  gap: 4px;
  color: var(--fp-text-secondary);
  font-size: .61rem;
  font-weight: 700;
}
.premium-inventory-adjust input {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  border: 1px solid var(--fp-border);
  border-radius: 8px;
  padding: 7px 9px;
  background: #fff;
  color: var(--fp-navy);
  font-size: .7rem;
  outline: 0;
}
.premium-inventory-adjust input:focus {
  border-color: var(--fp-primary);
  box-shadow: 0 0 0 3px rgba(33, 117, 199, .1);
}
.inventory-adjust-buttons {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.inventory-increase-button,
.inventory-decrease-button {
  min-height: 34px;
  border-radius: 8px;
  padding: 6px 9px;
  font-size: .66rem;
  font-weight: 740;
}
.inventory-increase-button {
  border: 1px solid var(--fp-primary);
  background: var(--fp-primary);
  color: #fff;
}
.inventory-increase-button:hover { background: var(--fp-primary-strong); }
.inventory-decrease-button {
  border: 1px solid #efd0d0;
  background: #fff;
  color: var(--fp-danger);
}
.inventory-increase-button:disabled,
.inventory-decrease-button:disabled { opacity: .45; cursor: default; }

.inventory-empty-state {
  display: grid;
  place-items: center;
  justify-items: center;
  min-height: 240px;
  padding: 28px 16px;
  text-align: center;
}
.inventory-empty-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  margin-bottom: 8px;
  border-radius: 12px;
  background: var(--fp-primary-soft);
  color: var(--fp-primary);
}
.inventory-empty-state h3 { margin: 0; color: var(--fp-navy); font-size: .9rem; }
.inventory-empty-state p { margin: 4px 0 0; color: var(--fp-text-secondary); font-size: .68rem; }

@media (max-width: 1180px) {
  .inventory-overview { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .inventory-recent-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .premium-inventory-row {
    grid-template-columns: minmax(220px, 1fr) 130px;
    gap: 12px;
  }
  .premium-inventory-adjust { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .inventory-workspace { gap: 13px; }
  .inventory-hero { align-items: flex-start; }
  .inventory-header-actions { flex-wrap: wrap; justify-content: flex-end; }
}

@media (max-width: 720px) {
  .inventory-hero { flex-direction: column; }
  .inventory-header-actions { width: 100%; }
  .inventory-header-actions > * { flex: 1; }
  .inventory-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inventory-filters { grid-template-columns: 1fr; }
  .inventory-recent-grid { grid-template-columns: 1fr; }
  .premium-inventory-row {
    grid-template-columns: minmax(0, 1fr) 110px;
    padding: 12px;
  }
  .inventory-filter-head { align-items: flex-start; }
}

@media (max-width: 520px) {
  .inventory-overview { gap: 8px; }
  .inventory-metric-card { min-height: 112px; padding: 11px; }
  .inventory-metric-icon { width: 34px; height: 34px; border-radius: 9px; }
  .inventory-metric-card > strong { font-size: 1.2rem; }
  .inventory-metric-card > span { font-size: .68rem; }
  .inventory-metric-card > small { font-size: .58rem; }
  .inventory-control-card,
  .inventory-recent-section { padding: 11px; }
  .inventory-filter-head {
    flex-direction: column;
  }
  .inventory-secondary-action.compact { width: 100%; }
  .premium-inventory-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .premium-inventory-quantity { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 7px; }
  .premium-inventory-quantity > span:first-child { grid-column: 1 / -1; }
  .premium-inventory-quantity > strong { font-size: 1.2rem; }
  .inventory-state-row { margin-top: 0; }
  .premium-inventory-adjust { grid-column: auto; grid-template-columns: 1fr; }
  .inventory-adjust-buttons { grid-column: auto; }
  .inventory-list-heading { align-items: flex-start; }
  .inventory-branch-pill { max-width: 140px; }
}

@media (max-width: 390px) {
  .inventory-overview { grid-template-columns: 1fr; }
  .inventory-header-actions { display: grid; grid-template-columns: 1fr; }
  .inventory-recent-stock { grid-template-columns: auto 1fr; }
  .inventory-recent-stock button { grid-column: 1 / -1; justify-self: start; }
}


.inventory-quick-actions {
  padding: 14px;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-card-radius);
  background: var(--fp-surface);
  box-shadow: var(--fp-shadow);
}
.inventory-quick-action-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin-top: 11px;
}
.inventory-quick-action {
  min-width: 0;
  min-height: 76px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px solid var(--fp-border);
  border-radius: 11px;
  padding: 11px 12px;
  background: var(--fp-surface);
  color: var(--fp-primary-strong);
  text-decoration: none;
  text-align: left;
}
.inventory-quick-action:hover {
  border-color: #bdd3e8;
  background: var(--fp-primary-soft);
}
.inventory-quick-action.primary {
  border-color: var(--fp-primary);
  background: var(--fp-primary);
  color: #fff;
}
.inventory-quick-action.primary:hover {
  border-color: var(--fp-primary-strong);
  background: var(--fp-primary-strong);
}
.inventory-quick-action .icon {
  width: 20px;
  height: 20px;
}
.inventory-quick-action span {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.inventory-quick-action strong,
.inventory-quick-action small {
  display: block;
}
.inventory-quick-action strong {
  font-size: .74rem;
  font-weight: 760;
}
.inventory-quick-action small {
  color: var(--fp-text-secondary);
  font-size: .61rem;
  font-weight: 600;
}
.inventory-quick-action.primary small {
  color: rgba(255,255,255,.76);
}

@media (max-width: 720px) {
  .inventory-quick-action-grid { grid-template-columns: 1fr; }
}


/* Phase 1 Step 13.8 premium Sales History workspace */
.sales-history-workspace {
  width: min(1480px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 14px;
}
.sales-history-header {
  display: flex;
  align-items: center;
  gap: 11px;
}
.sales-history-title-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--fp-primary-soft);
  color: var(--fp-primary);
}
.sales-history-title-icon .icon { width: 20px; height: 20px; }
.sales-history-header h1 {
  margin: 0;
  color: var(--fp-navy);
  font-size: clamp(1.45rem, 2vw, 1.9rem);
  letter-spacing: -.035em;
}
.sales-history-header p {
  margin: 3px 0 0;
  color: var(--fp-text-secondary);
  font-size: .76rem;
}

.sales-history-message {
  padding: 10px 12px;
  border: 1px solid #c8e1f5;
  border-radius: var(--fp-control-radius);
  background: var(--fp-primary-soft);
  color: var(--fp-primary-strong);
  font-size: .73rem;
}

.sales-filter-card {
  padding: 13px;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-card-radius);
  background: var(--fp-surface);
  box-shadow: var(--fp-shadow);
}
.sales-search-field {
  min-height: 42px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 0 11px;
  border: 1px solid var(--fp-border);
  border-radius: 10px;
  background: var(--fp-surface);
}
.sales-field-icon {
  width: 17px;
  height: 17px;
  color: var(--fp-primary);
}
.sales-search-field input {
  min-width: 0;
  height: 40px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--fp-navy);
  font-size: .78rem;
}
.sales-search-field:focus-within {
  border-color: var(--fp-primary);
  box-shadow: 0 0 0 3px rgba(33,117,199,.1);
}
.sales-filter-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(130px, 1fr)) auto;
  gap: 8px;
  align-items: end;
  margin-top: 10px;
}
.sales-filter-row label {
  display: grid;
  gap: 4px;
  color: var(--fp-text-secondary);
  font-size: .62rem;
  font-weight: 700;
}
.sales-filter-row select,
.sales-filter-row input {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--fp-border);
  border-radius: 9px;
  padding: 7px 9px;
  background: #fff;
  color: var(--fp-navy);
  font-size: .71rem;
}
.sales-clear-filters {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--fp-border);
  border-radius: 9px;
  padding: 7px 10px;
  background: #fff;
  color: var(--fp-neutral);
  font-size: .69rem;
  font-weight: 700;
}
.sales-clear-filters:disabled { opacity: .42; cursor: default; }
.sales-clear-filters .icon { width: 15px; height: 15px; }

.sales-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.sales-summary-card {
  min-height: 96px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  padding: 13px;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-card-radius);
  background: var(--fp-surface);
  box-shadow: var(--fp-shadow);
}
.sales-summary-icon {
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--fp-neutral);
  color: #fff;
}
.sales-summary-icon .icon { width: 19px; height: 19px; }
.sales-summary-card.blue .sales-summary-icon { background: var(--fp-primary); }
.sales-summary-card.green .sales-summary-icon { background: var(--fp-success); }
.sales-summary-card.orange .sales-summary-icon { background: var(--fp-warning); }
.sales-summary-card.gray .sales-summary-icon { background: var(--fp-neutral); }
.sales-summary-card span {
  display: block;
  color: var(--fp-text-secondary);
  font-size: .64rem;
}
.sales-summary-card strong {
  display: block;
  margin-top: 3px;
  color: var(--fp-navy);
  font-size: 1.16rem;
  line-height: 1.1;
}

.sales-list-section {
  overflow: visible;
}
.sales-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 2px 0 8px;
}
.sales-section-heading h2 {
  margin: 0;
  color: var(--fp-navy);
  font-size: .96rem;
}
.sales-section-heading p,
.sales-section-heading > span {
  margin: 2px 0 0;
  color: var(--fp-text-secondary);
  font-size: .65rem;
}

.sales-transaction-list {
  display: grid;
  gap: 8px;
}
.sales-transaction-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  border: 1px solid var(--fp-border);
  border-radius: 12px;
  background: var(--fp-surface);
  box-shadow: 0 2px 8px rgba(23,36,58,.035);
}
.sales-transaction-card:hover {
  border-color: #bfd2e5;
  box-shadow: 0 4px 12px rgba(23,36,58,.055);
}
.sales-transaction-main {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(220px, 1.25fr) minmax(150px, .65fr) minmax(150px, .55fr);
  gap: 12px;
  align-items: center;
  border: 0;
  border-radius: 12px 0 0 12px;
  padding: 12px 10px 12px 13px;
  background: transparent;
  color: inherit;
  text-align: left;
}
.sales-receipt-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--fp-primary-soft);
  color: var(--fp-primary);
}
.sales-receipt-icon .icon { width: 17px; height: 17px; }
.sales-transaction-primary,
.sales-transaction-time,
.sales-transaction-amount { min-width: 0; }
.sales-transaction-primary strong {
  display: block;
  overflow: hidden;
  color: var(--fp-primary-strong);
  font-size: .78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sales-transaction-primary span,
.sales-transaction-primary small,
.sales-transaction-time strong,
.sales-transaction-time span,
.sales-transaction-time small,
.sales-transaction-amount span {
  display: block;
}
.sales-transaction-primary span {
  margin-top: 2px;
  overflow: hidden;
  color: var(--fp-navy);
  font-size: .72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sales-transaction-primary small,
.sales-transaction-time span,
.sales-transaction-amount span {
  margin-top: 2px;
  color: var(--fp-text-secondary);
  font-size: .61rem;
}
.sales-transaction-time strong {
  color: var(--fp-navy);
  font-size: .68rem;
  font-weight: 700;
}
.sales-payment-pill {
  width: fit-content;
  margin-top: 5px !important;
  padding: 3px 6px;
  border-radius: 6px;
  background: var(--fp-primary-soft);
  color: var(--fp-primary-strong) !important;
  font-weight: 720;
}
.sales-transaction-amount { text-align: right; }
.sales-transaction-amount > strong {
  display: block;
  color: var(--fp-success);
  font-size: .88rem;
}
.sales-transaction-amount .refund-status { margin-top: 5px; margin-left: auto; }

.sales-row-menu-wrap {
  position: relative;
  display: grid;
  place-items: center;
  padding-right: 8px;
}
.sales-row-menu-button {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--fp-neutral);
  font-size: 1.25rem;
  line-height: 1;
}
.sales-row-menu-button:hover { background: var(--fp-background); color: var(--fp-navy); }
.sales-action-menu {
  position: absolute;
  z-index: 20;
  top: 42px;
  right: 8px;
  min-width: 178px;
  padding: 5px;
  border: 1px solid var(--fp-border);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(23,36,58,.14);
}
.sales-action-menu button {
  width: 100%;
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 7px;
  padding: 6px 8px;
  background: transparent;
  color: var(--fp-navy);
  text-align: left;
  font-size: .67rem;
  font-weight: 680;
}
.sales-action-menu button:hover { background: var(--fp-background); }
.sales-action-menu button.warning { color: #a45f0d; }
.sales-action-menu .icon { width: 15px; height: 15px; }

.sales-empty-state {
  min-height: 260px;
  display: grid;
  place-items: center;
  justify-items: center;
  padding: 30px 16px;
  color: var(--fp-text-secondary);
  text-align: center;
}
.sales-empty-state > div {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--fp-primary-soft);
  color: var(--fp-primary);
}
.sales-empty-state h3 { margin: 8px 0 0; color: var(--fp-navy); font-size: .9rem; }
.sales-empty-state p { margin: 4px 0 0; font-size: .68rem; }

.sale-detail-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}
.sale-detail-back {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--fp-border);
  border-radius: 9px;
  padding: 7px 10px;
  background: #fff;
  color: var(--fp-primary-strong);
  font-size: .69rem;
  font-weight: 720;
}
.sale-detail-header h1 {
  margin: 0;
  color: var(--fp-navy);
  font-size: 1.1rem;
}
.sale-detail-header p {
  margin: 2px 0 0;
  color: var(--fp-text-secondary);
  font-size: .66rem;
}
.sale-detail-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.sale-detail-actions button {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--fp-border);
  border-radius: 9px;
  padding: 6px 9px;
  background: #fff;
  color: var(--fp-primary-strong);
  font-size: .66rem;
  font-weight: 710;
}
.sale-detail-actions button.active,
.sale-detail-actions button:hover { background: var(--fp-primary-soft); border-color: #bed4e8; }
.sale-detail-actions .icon { width: 15px; height: 15px; }

.sale-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(290px, .55fr);
  gap: 12px;
  align-items: start;
}
.sale-side-column { display: grid; gap: 12px; }
.sale-detail-card,
.receipt-workspace-card,
.refund-workspace-card {
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-card-radius);
  background: var(--fp-surface);
  box-shadow: var(--fp-shadow);
}
.sale-detail-card { padding: 14px; }
.sale-card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.sale-card-heading h2 {
  margin: 0;
  color: var(--fp-navy);
  font-size: .92rem;
}
.sale-card-heading p {
  margin: 3px 0 0;
  color: var(--fp-text-secondary);
  font-size: .63rem;
}

.sale-metadata-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 12px;
  margin-top: 12px;
  padding: 11px;
  border: 1px solid var(--fp-border);
  border-radius: 10px;
  background: #fbfdff;
}
.sale-detail-pair {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.sale-detail-pair span {
  color: var(--fp-text-secondary);
  font-size: .59rem;
}
.sale-detail-pair strong {
  overflow-wrap: anywhere;
  color: var(--fp-navy);
  font-size: .69rem;
  font-weight: 700;
}

.sale-items-table {
  margin-top: 12px;
  overflow: hidden;
  border: 1px solid var(--fp-border);
  border-radius: 10px;
}
.sale-items-head,
.sale-item-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 65px 100px 100px;
  gap: 8px;
  align-items: center;
}
.sale-items-head {
  padding: 8px 10px;
  background: var(--fp-background);
  color: var(--fp-text-secondary);
  font-size: .59rem;
  font-weight: 720;
}
.sale-item-row {
  padding: 9px 10px;
  border-top: 1px solid #edf1f6;
  font-size: .66rem;
}
.sale-item-row > div { min-width: 0; }
.sale-item-row strong,
.sale-item-row small { display: block; }
.sale-item-row strong { color: var(--fp-navy); }
.sale-item-row small { margin-top: 2px; color: var(--fp-text-secondary); font-size: .58rem; }
.sale-item-row > span,
.sale-item-row > strong:last-child { text-align: right; }
.sale-items-empty { padding: 18px 10px; color: var(--fp-text-secondary); font-size: .66rem; text-align: center; }

.sale-totals-card {
  display: grid;
  gap: 6px;
  margin-top: 12px;
  padding: 11px;
  border: 1px solid var(--fp-border);
  border-radius: 10px;
  background: #fbfdff;
}
.sale-totals-card > div:not(.sale-notes) {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--fp-text-secondary);
  font-size: .68rem;
}
.sale-totals-card strong { color: var(--fp-navy); }
.sale-totals-card .total {
  padding-top: 7px;
  border-top: 1px dashed #cfd8e4;
  color: var(--fp-navy);
  font-weight: 760;
}
.sale-totals-card .total strong { font-size: .85rem; }
.sale-notes {
  display: grid;
  gap: 3px;
  padding-top: 7px;
  border-top: 1px solid #edf1f6;
}
.sale-notes span { color: var(--fp-text-secondary); font-size: .6rem; }
.sale-notes strong { font-size: .67rem; }

.refund-history-list {
  display: grid;
  gap: 7px;
  margin-top: 10px;
}
.refund-history-list article {
  padding: 8px 0;
  border-top: 1px solid #edf1f6;
}
.refund-history-list article:first-child { border-top: 0; }
.refund-history-list article > div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.refund-history-list strong { color: var(--fp-warning); font-size: .72rem; }
.refund-history-list span,
.refund-history-list small { color: var(--fp-text-secondary); font-size: .58rem; }
.sale-side-empty { padding: 16px 0 4px; color: var(--fp-text-secondary); font-size: .65rem; text-align: center; }

.sale-integrity-list {
  display: grid;
  gap: 7px;
  margin-top: 10px;
}
.sale-immutability-note {
  margin: 10px 0 0;
  padding-top: 9px;
  border-top: 1px solid #edf1f6;
  color: var(--fp-text-secondary);
  font-size: .59rem;
  line-height: 1.45;
}

.receipt-workspace-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 0;
  overflow: hidden;
}
.receipt-paper {
  width: min(620px, calc(100% - 28px));
  margin: 14px auto;
  padding: 18px;
  border: 1px solid #111;
  background: #fff;
  color: #000;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .72rem;
  line-height: 1.4;
}
.receipt-business { text-align: center; }
.receipt-business h2 { margin: 0; color: #000; font-size: 1rem; }
.receipt-business strong,
.receipt-business span { display: block; color: #000; }
.receipt-business span { font-size: .65rem; }
.receipt-rule { margin: 9px 0; border-top: 1px dashed #000; }
.receipt-meta,
.receipt-totals { display: grid; gap: 4px; }
.receipt-meta > div,
.receipt-totals > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.receipt-meta span,
.receipt-meta strong,
.receipt-totals span,
.receipt-totals strong { color: #000; }
.receipt-item-head,
.receipt-item-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px 82px 82px;
  gap: 6px;
}
.receipt-item-head {
  padding-bottom: 4px;
  font-weight: 700;
}
.receipt-item-row {
  padding: 4px 0;
  border-top: 1px dotted #aaa;
}
.receipt-item-row > span { text-align: right; }
.receipt-item-row strong,
.receipt-item-row small { display: block; color: #000; }
.receipt-item-row small { font-size: .62rem; }
.receipt-totals .total {
  padding-top: 5px;
  border-top: 1px dashed #000;
  font-size: .82rem;
  font-weight: 800;
}
.receipt-notes { color: #000; }
.receipt-thanks {
  margin-top: 12px;
  color: #000;
  text-align: center;
  font-weight: 700;
}
.receipt-powered {
  margin-top: 10px;
  color: #000;
  text-align: center;
  font-weight: 700;
}
.receipt-actions-card {
  padding: 14px;
  border-left: 1px solid var(--fp-border);
  background: #f8fafc;
}
.receipt-actions-card h3 { margin: 0; color: var(--fp-navy); font-size: .86rem; }
.receipt-actions-card p { margin: 3px 0 12px; color: var(--fp-text-secondary); font-size: .62rem; }
.receipt-actions-card > div:last-child { display: grid; gap: 7px; }
.receipt-actions-card button {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--fp-border);
  border-radius: 9px;
  background: #fff;
  color: var(--fp-primary-strong);
  font-size: .68rem;
  font-weight: 720;
}
.receipt-actions-card .icon { width: 15px; height: 15px; }

.refund-workspace-card { padding: 14px; }
.refund-workspace-card form { margin-top: 10px; }
.refund-item-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 7px;
}
.refund-item-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 80px;
  gap: 8px;
  align-items: center;
  padding: 8px 9px;
  border: 1px solid var(--fp-border);
  border-radius: 9px;
  background: #fbfdff;
}
.refund-item-card strong,
.refund-item-card small { display: block; }
.refund-item-card strong { color: var(--fp-navy); font-size: .68rem; }
.refund-item-card small { margin-top: 2px; color: var(--fp-text-secondary); font-size: .58rem; }
.refund-item-card input,
.refund-reason-field input {
  width: 100%;
  min-height: 36px;
  border: 1px solid var(--fp-border);
  border-radius: 8px;
  padding: 7px 8px;
  background: #fff;
  color: var(--fp-navy);
  font-size: .67rem;
}
.refund-reason-field {
  display: grid;
  gap: 4px;
  margin-top: 9px;
  color: var(--fp-text-secondary);
  font-size: .62rem;
  font-weight: 700;
}
.refund-workspace-actions {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  margin-top: 10px;
}
.refund-full-button,
.refund-selected-button {
  min-height: 38px;
  border-radius: 9px;
  padding: 7px 10px;
  font-size: .67rem;
  font-weight: 740;
}
.refund-full-button {
  border: 1px solid #efbd64;
  background: var(--fp-warning-soft);
  color: #9f5a0c;
}
.refund-selected-button {
  border: 1px solid var(--fp-warning);
  background: var(--fp-warning);
  color: #fff;
}

.sales-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(23,36,58,.38);
}
.sales-confirm-dialog {
  width: min(440px, 100%);
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 20px;
  border: 1px solid var(--fp-border);
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(23,36,58,.2);
  text-align: center;
}
.sales-confirm-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
}
.sales-confirm-icon.warning { background: var(--fp-warning-soft); color: var(--fp-warning); }
.sales-confirm-dialog h2 { margin: 0; color: var(--fp-navy); font-size: 1rem; }
.sales-confirm-dialog p { margin: 3px 0 0; color: var(--fp-text-secondary); font-size: .67rem; }
.sales-confirm-amount {
  width: 100%;
  display: grid;
  gap: 2px;
  padding: 10px;
  border-radius: 10px;
  background: var(--fp-warning-soft);
}
.sales-confirm-amount span { color: #9f6a2d; font-size: .61rem; }
.sales-confirm-amount strong { color: #8b520d; font-size: 1.1rem; }
.sales-confirm-copy { line-height: 1.45; }
.sales-confirm-actions {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.sales-confirm-primary {
  min-height: 40px;
  border: 1px solid var(--fp-warning);
  border-radius: 9px;
  background: var(--fp-warning);
  color: #fff;
  font-size: .7rem;
  font-weight: 760;
}

@media (max-width: 1180px) {
  .sales-filter-row { grid-template-columns: repeat(3, minmax(130px, 1fr)); }
  .sale-detail-grid { grid-template-columns: 1fr; }
  .sale-side-column { grid-template-columns: 1fr 1fr; }
  .receipt-workspace-card { grid-template-columns: minmax(0, 1fr) 240px; }
}

@media (max-width: 900px) {
  .sales-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sales-transaction-main {
    grid-template-columns: auto minmax(180px, 1fr) minmax(130px, .55fr) minmax(120px, .45fr);
  }
  .receipt-workspace-card { grid-template-columns: 1fr; }
  .receipt-actions-card { border-left: 0; border-top: 1px solid var(--fp-border); }
  .receipt-actions-card > div:last-child { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .sales-filter-row { grid-template-columns: 1fr 1fr; }
  .sales-clear-filters { width: 100%; }
  .sales-transaction-main {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 9px;
  }
  .sales-transaction-time {
    grid-column: 2;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
  }
  .sales-transaction-amount {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: center;
  }
  .sale-detail-header {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .sale-detail-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
  .sale-side-column { grid-template-columns: 1fr; }
  .sale-items-head,
  .sale-item-row { grid-template-columns: minmax(130px, 1fr) 42px 80px 80px; }
}

@media (max-width: 520px) {
  .sales-history-workspace { gap: 11px; }
  .sales-filter-card { padding: 10px; }
  .sales-filter-row { grid-template-columns: 1fr; }
  .sales-summary-grid { gap: 7px; }
  .sales-summary-card { min-height: 84px; padding: 10px; }
  .sales-summary-icon { width: 34px; height: 34px; }
  .sales-summary-card strong { font-size: .98rem; }
  .sales-transaction-card { grid-template-columns: minmax(0, 1fr) auto; }
  .sales-transaction-main {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 10px 6px 10px 10px;
  }
  .sales-transaction-time {
    grid-column: 2;
    margin-top: 4px;
  }
  .sales-transaction-amount {
    grid-column: 2;
    grid-row: auto;
    margin-top: 5px;
    text-align: left;
  }
  .sales-transaction-amount .refund-status { margin-left: 0; }
  .sales-row-menu-wrap { align-items: start; padding-top: 6px; }
  .sales-action-menu { position: fixed; left: 12px; right: 12px; top: auto; bottom: 12px; min-width: 0; }
  .sale-detail-back span { display: none; }
  .sale-detail-actions { justify-content: stretch; }
  .sale-detail-actions button { flex: 1; justify-content: center; }
  .sale-metadata-grid { grid-template-columns: 1fr; }
  .sale-items-table { overflow-x: auto; }
  .sale-items-head,
  .sale-item-row { min-width: 460px; }
  .receipt-paper { width: calc(100% - 16px); margin: 8px; padding: 12px; font-size: .66rem; }
  .receipt-item-head,
  .receipt-item-row { grid-template-columns: minmax(0, 1fr) 38px 70px 70px; }
  .refund-workspace-actions { display: grid; grid-template-columns: 1fr; }
  .sales-confirm-actions { grid-template-columns: 1fr; }
}

@media (max-width: 430px) {
  .sales-summary-grid { grid-template-columns: 1fr 1fr; }
  .sales-history-header h1 { font-size: 1.25rem; }
}

@media (max-width: 390px) {
  .sales-summary-grid { grid-template-columns: 1fr; }
}


/* Phase 1 Step 13.9 premium Debt Ledger workspace */
.debt-ledger-workspace,
.debt-detail-workspace {
  width: min(1380px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 14px;
}
.debt-ledger-header,
.debt-detail-header {
  display: flex;
  align-items: center;
  gap: 11px;
}
.debt-ledger-title-icon,
.new-debt-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--fp-primary-soft);
  color: var(--fp-primary);
}
.debt-ledger-title-icon .icon,
.new-debt-icon .icon { width: 20px; height: 20px; }
.debt-ledger-header > div:nth-child(2),
.debt-detail-header > div:nth-child(2) { min-width: 0; }
.debt-ledger-header h1,
.debt-detail-header h1,
.new-debt-header h1 {
  margin: 0;
  color: var(--fp-navy);
  letter-spacing: -.03em;
}
.debt-ledger-header h1 { font-size: clamp(1.45rem, 2vw, 1.9rem); }
.debt-detail-header h1,
.new-debt-header h1 { font-size: 1.15rem; }
.debt-ledger-header p,
.debt-detail-header p,
.new-debt-header p {
  margin: 3px 0 0;
  color: var(--fp-text-secondary);
  font-size: .72rem;
}
.debt-new-button,
.debt-save-button,
.debt-payment-button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--fp-primary);
  border-radius: var(--fp-control-radius);
  padding: 8px 13px;
  background: var(--fp-primary);
  color: #fff;
  font-size: .74rem;
  font-weight: 760;
}
.debt-ledger-header .debt-new-button { margin-left: auto; }
.debt-new-button:hover,
.debt-save-button:hover,
.debt-payment-button:hover { background: var(--fp-primary-strong); border-color: var(--fp-primary-strong); }
.debt-new-button:disabled,
.debt-save-button:disabled,
.debt-payment-button:disabled { opacity: .45; cursor: default; }

.debt-ledger-message {
  padding: 10px 12px;
  border: 1px solid #c8e1f5;
  border-radius: var(--fp-control-radius);
  background: var(--fp-primary-soft);
  color: var(--fp-primary-strong);
  font-size: .72rem;
}
.debt-ledger-message.inside-card {
  margin: 12px 16px 0;
}

.debt-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.debt-summary-grid.single-supported { grid-template-columns: minmax(260px, 460px); }
.debt-summary-card {
  min-height: 104px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-card-radius);
  background: var(--fp-surface);
  box-shadow: var(--fp-shadow);
}
.debt-summary-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
}
.debt-summary-card.receivable .debt-summary-icon {
  background: var(--fp-success-soft);
  color: var(--fp-success);
}
.debt-summary-card.payable .debt-summary-icon {
  background: var(--fp-warning-soft);
  color: var(--fp-warning);
}
.debt-summary-icon .icon { width: 20px; height: 20px; }
.debt-summary-card span,
.debt-summary-card strong,
.debt-summary-card small { display: block; }
.debt-summary-card span { color: var(--fp-text-secondary); font-size: .65rem; }
.debt-summary-card strong { margin-top: 3px; font-size: 1.2rem; }
.debt-summary-card.receivable strong { color: var(--fp-success); }
.debt-summary-card.payable strong { color: var(--fp-warning); }
.debt-summary-card small { margin-top: 3px; color: var(--fp-text-secondary); font-size: .59rem; }

.debt-search-card {
  padding: 10px;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-card-radius);
  background: var(--fp-surface);
  box-shadow: var(--fp-shadow);
}
.debt-search-field {
  min-height: 42px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 0 11px;
  border: 1px solid var(--fp-border);
  border-radius: 10px;
  background: #fff;
}
.debt-search-icon {
  width: 17px;
  height: 17px;
  color: var(--fp-primary);
}
.debt-search-field input {
  min-width: 0;
  height: 40px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--fp-navy);
  font-size: .77rem;
}
.debt-search-field:focus-within {
  border-color: var(--fp-primary);
  box-shadow: 0 0 0 3px rgba(33,117,199,.1);
}

.debt-ledger-list-card {
  overflow: hidden;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-card-radius);
  background: var(--fp-surface);
  box-shadow: var(--fp-shadow);
}
.debt-ledger-section-heading,
.debt-card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.debt-ledger-section-heading {
  padding: 13px 15px;
  border-bottom: 1px solid var(--fp-border);
}
.debt-ledger-section-heading h2,
.debt-card-heading h2 {
  margin: 0;
  color: var(--fp-navy);
  font-size: .92rem;
}
.debt-ledger-section-heading p,
.debt-card-heading p {
  margin: 3px 0 0;
  color: var(--fp-text-secondary);
  font-size: .62rem;
}
.debt-ledger-section-heading > span {
  color: var(--fp-text-secondary);
  font-size: .64rem;
}

.debt-ledger-list { display: grid; }
.debt-ledger-row {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(200px, 1.2fr) minmax(120px, .55fr) minmax(140px, .62fr) minmax(170px, .72fr) auto;
  gap: 12px;
  align-items: center;
  border: 0;
  border-bottom: 1px solid #edf1f6;
  padding: 12px 14px;
  background: #fff;
  color: inherit;
  text-align: left;
}
.debt-ledger-row:last-child { border-bottom: 0; }
.debt-ledger-row:hover { background: #f8fbfe; }
.debt-row-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--fp-primary-soft);
  color: var(--fp-primary);
}
.debt-row-icon .icon { width: 17px; height: 17px; }
.debt-row-primary,
.debt-row-amounts,
.debt-row-outstanding,
.debt-row-meta { min-width: 0; }
.debt-row-primary strong,
.debt-row-primary span,
.debt-row-primary small,
.debt-row-amounts span,
.debt-row-amounts strong,
.debt-row-amounts small,
.debt-row-outstanding span,
.debt-row-outstanding strong,
.debt-row-meta span,
.debt-row-meta small { display: block; }
.debt-row-primary strong {
  overflow: hidden;
  color: var(--fp-navy);
  font-size: .76rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.debt-row-primary span,
.debt-row-primary small,
.debt-row-amounts span,
.debt-row-amounts small,
.debt-row-outstanding span,
.debt-row-meta span,
.debt-row-meta small {
  margin-top: 2px;
  color: var(--fp-text-secondary);
  font-size: .59rem;
}
.debt-row-amounts strong { margin-top: 2px; color: var(--fp-navy); font-size: .75rem; }
.debt-row-outstanding strong { margin-top: 2px; color: var(--fp-success); font-size: .82rem; }
.debt-row-open {
  color: var(--fp-primary-strong);
  font-size: .64rem;
  font-weight: 720;
}

.debt-status-chip {
  width: fit-content;
  display: inline-flex !important;
  align-items: center;
  min-height: 23px;
  margin-top: 5px !important;
  padding: 3px 7px;
  border-radius: 7px;
  font-size: .58rem !important;
  font-weight: 760;
}
.debt-status-chip.unpaid { background: var(--fp-warning-soft); color: #9d5e11 !important; }
.debt-status-chip.partial { background: var(--fp-primary-soft); color: var(--fp-primary-strong) !important; }
.debt-status-chip.paid { background: var(--fp-success-soft); color: var(--fp-success) !important; }

.debt-ledger-empty {
  min-height: 320px;
  display: grid;
  place-items: center;
  justify-items: center;
  align-content: center;
  gap: 6px;
  padding: 30px 16px;
  text-align: center;
}
.debt-empty-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: var(--fp-primary-soft);
  color: var(--fp-primary);
}
.debt-ledger-empty h3 { margin: 4px 0 0; color: var(--fp-navy); font-size: .92rem; }
.debt-ledger-empty p { margin: 0; color: var(--fp-text-secondary); font-size: .67rem; }

.new-debt-workspace {
  width: 100%;
  display: grid;
  place-items: start center;
  padding: 2px 0 24px;
}
.new-debt-card {
  width: min(980px, 100%);
  overflow: hidden;
  border: 1px solid var(--fp-border);
  border-radius: 18px;
  background: var(--fp-surface);
  box-shadow: 0 8px 26px rgba(23,36,58,.07);
}
.new-debt-header {
  min-height: 76px;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--fp-border);
}
.new-debt-back {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--fp-navy);
  font-size: 1.1rem;
}
.new-debt-back:hover { background: var(--fp-background); }

.new-debt-form {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: var(--fp-background);
}
.new-debt-section {
  padding: 15px;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-card-radius);
  background: #fff;
}
.new-debt-section-heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.new-debt-section-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--fp-primary-soft);
  color: var(--fp-primary);
}
.new-debt-section-icon .icon { width: 18px; height: 18px; }
.new-debt-section-heading h2 { margin: 0; color: var(--fp-navy); font-size: .9rem; }
.new-debt-section-heading p { margin: 2px 0 0; color: var(--fp-text-secondary); font-size: .62rem; }

.debt-direction-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.debt-direction-grid.single-supported { grid-template-columns: minmax(260px, 1fr); }
.debt-direction-card,
.debt-kind-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 70px;
  padding: 10px 12px;
  border: 1px solid var(--fp-border);
  border-radius: 11px;
  background: #fff;
}
.debt-direction-card.active,
.debt-kind-card.active {
  border-color: var(--fp-primary);
  background: var(--fp-primary);
  color: #fff;
}
.debt-direction-circle,
.debt-kind-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.16);
  color: inherit;
}
.debt-kind-icon .icon { width: 18px; height: 18px; }
.debt-direction-card strong,
.debt-direction-card span,
.debt-kind-card strong,
.debt-kind-card span { display: block; }
.debt-direction-card strong,
.debt-kind-card strong { font-size: .76rem; }
.debt-direction-card span,
.debt-kind-card span { margin-top: 2px; color: rgba(255,255,255,.78); font-size: .59rem; }

.new-debt-fields {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}
.new-debt-fields.two-column { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.debt-premium-field {
  min-width: 0;
  display: grid;
  gap: 5px;
  color: var(--fp-navy);
  font-size: .67rem;
  font-weight: 700;
}
.debt-premium-field > span em { color: var(--fp-danger); font-style: normal; }
.debt-input-shell,
.debt-textarea-shell {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  border: 1px solid var(--fp-border);
  border-radius: 10px;
  padding: 0 10px;
  background: #fff;
}
.debt-textarea-shell { align-items: start; padding-top: 9px; }
.debt-field-icon { width: 16px; height: 16px; color: var(--fp-primary); }
.debt-input-shell input,
.debt-premium-field select,
.debt-textarea-shell textarea {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  border: 1px solid var(--fp-border);
  border-radius: 9px;
  padding: 7px 9px;
  background: #fff;
  color: var(--fp-navy);
  font-size: .72rem;
  outline: 0;
}
.debt-input-shell input {
  min-height: 42px;
  border: 0;
  padding: 0;
}
.debt-textarea-shell textarea {
  min-height: 80px;
  border: 0;
  padding: 0;
  resize: vertical;
}
.debt-input-shell:focus-within,
.debt-textarea-shell:focus-within,
.debt-premium-field select:focus {
  border-color: var(--fp-primary);
  box-shadow: 0 0 0 3px rgba(33,117,199,.1);
}
.full-width { margin-top: 10px; }

.new-debt-actions {
  position: sticky;
  bottom: 0;
  z-index: 4;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 14px max(12px, env(safe-area-inset-bottom));
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-card-radius);
  background: rgba(255,255,255,.98);
}

.debt-detail-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
}
.debt-detail-back {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--fp-border);
  border-radius: 9px;
  padding: 7px 10px;
  background: #fff;
  color: var(--fp-primary-strong);
  font-size: .68rem;
  font-weight: 720;
}
.debt-detail-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}
.debt-detail-summary article {
  padding: 12px;
  border: 1px solid var(--fp-border);
  border-radius: 11px;
  background: #fff;
}
.debt-detail-summary span,
.debt-detail-summary strong { display: block; }
.debt-detail-summary span { color: var(--fp-text-secondary); font-size: .62rem; }
.debt-detail-summary strong { margin-top: 3px; color: var(--fp-navy); font-size: 1rem; }
.debt-detail-summary article.outstanding strong { color: var(--fp-success); }

.debt-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr);
  gap: 12px;
  align-items: start;
}
.debt-side-column { display: grid; gap: 12px; }
.debt-detail-card {
  padding: 14px;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-card-radius);
  background: #fff;
  box-shadow: var(--fp-shadow);
}
.debt-account-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 11px;
  padding: 11px;
  border: 1px solid var(--fp-border);
  border-radius: 10px;
  background: #fbfdff;
}
.debt-account-grid > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.debt-account-grid span { color: var(--fp-text-secondary); font-size: .59rem; }
.debt-account-grid strong { overflow-wrap: anywhere; color: var(--fp-navy); font-size: .68rem; }

.debt-records-section,
.debt-additional-balance {
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--fp-border);
}
.debt-record-list { display: grid; margin-top: 8px; }
.debt-record-list article {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(110px, .4fr) minmax(120px, .45fr);
  gap: 9px;
  align-items: center;
  padding: 9px 0;
  border-top: 1px solid #edf1f6;
}
.debt-record-list article:first-child { border-top: 0; }
.debt-record-list strong,
.debt-record-list span,
.debt-record-list small { display: block; }
.debt-record-list strong { color: var(--fp-navy); font-size: .7rem; }
.debt-record-list span,
.debt-record-list small { margin-top: 2px; color: var(--fp-text-secondary); font-size: .58rem; }

.debt-inline-form,
.debt-payment-form {
  display: grid;
  gap: 9px;
  margin-top: 10px;
}
.debt-inline-form {
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  align-items: end;
}
.debt-inline-form .inventory-secondary-action { min-height: 40px; }
.debt-payment-form .debt-payment-button { width: 100%; }

.debt-payment-history {
  display: grid;
  gap: 0;
  margin-top: 9px;
}
.debt-payment-history article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  padding: 9px 0;
  border-top: 1px solid #edf1f6;
}
.debt-payment-history article:first-child { border-top: 0; }
.debt-payment-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--fp-success-soft);
  color: var(--fp-success);
}
.debt-payment-icon .icon { width: 15px; height: 15px; }
.debt-payment-history strong,
.debt-payment-history span,
.debt-payment-history small { display: block; }
.debt-payment-history strong { color: var(--fp-success); font-size: .72rem; }
.debt-payment-history span,
.debt-payment-history small { margin-top: 2px; color: var(--fp-text-secondary); font-size: .58rem; }
.debt-sync-chip {
  padding: 4px 6px;
  border-radius: 7px;
  background: var(--fp-primary-soft);
  color: var(--fp-primary-strong) !important;
  font-size: .56rem !important;
  font-weight: 720;
}
.debt-inline-empty {
  margin-top: 9px;
  padding: 18px 10px;
  color: var(--fp-text-secondary);
  font-size: .65rem;
  text-align: center;
}

@media (max-width: 1180px) {
  .debt-ledger-row {
    grid-template-columns: auto minmax(190px, 1fr) 120px 130px auto;
  }
  .debt-row-meta { display: none; }
  .debt-detail-grid { grid-template-columns: 1fr; }
  .debt-side-column { grid-template-columns: 1fr 1fr; }
  .debt-inline-form { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .debt-detail-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .new-debt-card { width: min(900px, 100%); }
}

@media (max-width: 720px) {
  .debt-ledger-header {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .debt-ledger-header .debt-new-button {
    width: 100%;
    margin-left: 0;
  }
  .debt-summary-grid.single-supported { grid-template-columns: 1fr; }
  .debt-ledger-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 9px;
  }
  .debt-row-amounts { display: none; }
  .debt-row-outstanding { grid-column: 2; }
  .debt-row-open { grid-column: 3; grid-row: 1 / span 2; }
  .new-debt-fields.two-column { grid-template-columns: 1fr; }
  .debt-side-column { grid-template-columns: 1fr; }
  .debt-account-grid { grid-template-columns: 1fr; }
  .debt-inline-form { grid-template-columns: 1fr; }
  .debt-record-list article { grid-template-columns: 1fr 110px; }
  .debt-record-list article > div:last-child { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
  .new-debt-card { border-radius: 14px; }
  .new-debt-header { padding: 12px; }
  .new-debt-form { padding: 10px; }
  .new-debt-section { padding: 12px; }
  .debt-detail-header {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .debt-detail-header > .debt-status-chip { grid-column: 2; }
  .debt-detail-back span { display: none; }
  .debt-detail-summary { grid-template-columns: 1fr 1fr; gap: 7px; }
  .debt-detail-card { padding: 11px; }
}

@media (max-width: 430px) {
  .debt-ledger-workspace,
  .debt-detail-workspace { gap: 11px; }
  .debt-summary-card { min-height: 94px; padding: 11px; }
  .debt-ledger-row { padding: 10px; }
  .debt-payment-history article { grid-template-columns: auto minmax(0, 1fr); }
  .debt-sync-chip { grid-column: 2; justify-self: start; }
}

@media (max-width: 390px) {
  .debt-detail-summary { grid-template-columns: 1fr; }
  .new-debt-actions { display: grid; grid-template-columns: 1fr 1fr; }
}


/* Phase 1 Step 13.10 premium Expenses workspace */
.expenses-workspace,
.expense-detail-workspace {
  width: min(1380px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 14px;
}

.expenses-header,
.expense-detail-header {
  display: flex;
  align-items: center;
  gap: 11px;
}
.expenses-title-icon,
.expense-form-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--fp-warning-soft);
  color: var(--fp-warning);
}
.expenses-title-icon .icon,
.expense-form-icon .icon { width: 20px; height: 20px; }
.expenses-header > div:nth-child(2),
.expense-detail-header > div:nth-child(2) { min-width: 0; }
.expenses-header h1,
.expense-detail-header h1,
.expense-form-header h1 {
  margin: 0;
  color: var(--fp-navy);
  letter-spacing: -.03em;
}
.expenses-header h1 { font-size: clamp(1.45rem, 2vw, 1.9rem); }
.expense-detail-header h1,
.expense-form-header h1 { font-size: 1.15rem; }
.expenses-header p,
.expense-detail-header p,
.expense-form-header p {
  margin: 3px 0 0;
  color: var(--fp-text-secondary);
  font-size: .72rem;
}

.expenses-add-button,
.expense-save-button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--fp-primary);
  border-radius: var(--fp-control-radius);
  padding: 8px 13px;
  background: var(--fp-primary);
  color: #fff;
  font-size: .74rem;
  font-weight: 760;
}
.expenses-header .expenses-add-button { margin-left: auto; }
.expenses-add-button:hover,
.expense-save-button:hover {
  background: var(--fp-primary-strong);
  border-color: var(--fp-primary-strong);
}
.expenses-add-button:disabled,
.expense-save-button:disabled { opacity: .45; cursor: default; }

.expenses-message {
  padding: 10px 12px;
  border: 1px solid #c8e1f5;
  border-radius: var(--fp-control-radius);
  background: var(--fp-primary-soft);
  color: var(--fp-primary-strong);
  font-size: .72rem;
}
.expenses-message.inside-card { margin: 12px 16px 0; }

.expenses-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.expense-summary-card {
  min-height: 104px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-card-radius);
  background: var(--fp-surface);
  box-shadow: var(--fp-shadow);
}
.expense-summary-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--fp-neutral);
  color: #fff;
}
.expense-summary-icon .icon { width: 19px; height: 19px; }
.expense-summary-card.orange .expense-summary-icon { background: var(--fp-warning); }
.expense-summary-card.blue .expense-summary-icon { background: var(--fp-primary); }
.expense-summary-card.gray .expense-summary-icon { background: var(--fp-neutral); }
.expense-summary-card span,
.expense-summary-card strong,
.expense-summary-card small { display: block; }
.expense-summary-card span {
  color: var(--fp-text-secondary);
  font-size: .64rem;
}
.expense-summary-card strong {
  margin-top: 3px;
  color: var(--fp-navy);
  font-size: 1.15rem;
  line-height: 1.1;
}
.expense-summary-card.orange strong { color: var(--fp-warning); }
.expense-summary-card small {
  margin-top: 3px;
  color: var(--fp-text-secondary);
  font-size: .58rem;
}

.expenses-filter-card {
  padding: 12px;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-card-radius);
  background: var(--fp-surface);
  box-shadow: var(--fp-shadow);
}
.expenses-search-field {
  min-height: 42px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 0 11px;
  border: 1px solid var(--fp-border);
  border-radius: 10px;
  background: #fff;
}
.expenses-field-icon {
  width: 17px;
  height: 17px;
  color: var(--fp-primary);
}
.expenses-search-field input {
  min-width: 0;
  height: 40px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--fp-navy);
  font-size: .77rem;
}
.expenses-search-field:focus-within {
  border-color: var(--fp-primary);
  box-shadow: 0 0 0 3px rgba(33,117,199,.1);
}
.expenses-filter-row {
  display: grid;
  grid-template-columns: minmax(150px,.7fr) minmax(150px,.8fr) minmax(150px,.8fr) auto;
  gap: 8px;
  align-items: end;
  margin-top: 10px;
}
.expenses-filter-row label {
  display: grid;
  gap: 4px;
  color: var(--fp-text-secondary);
  font-size: .62rem;
  font-weight: 700;
}
.expenses-filter-row select,
.expenses-filter-row input {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--fp-border);
  border-radius: 9px;
  padding: 7px 9px;
  background: #fff;
  color: var(--fp-navy);
  font-size: .7rem;
}
.expenses-clear-filters {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--fp-border);
  border-radius: 9px;
  padding: 7px 10px;
  background: #fff;
  color: var(--fp-neutral);
  font-size: .68rem;
  font-weight: 700;
}
.expenses-clear-filters:disabled { opacity: .42; cursor: default; }
.expenses-clear-filters .icon { width: 15px; height: 15px; }

.expenses-list-card {
  overflow: hidden;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-card-radius);
  background: var(--fp-surface);
  box-shadow: var(--fp-shadow);
}
.expenses-section-heading,
.expense-detail-card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.expenses-section-heading {
  padding: 13px 15px;
  border-bottom: 1px solid var(--fp-border);
}
.expenses-section-heading h2,
.expense-detail-card-heading h2 {
  margin: 0;
  color: var(--fp-navy);
  font-size: .92rem;
}
.expenses-section-heading p,
.expense-detail-card-heading p {
  margin: 3px 0 0;
  color: var(--fp-text-secondary);
  font-size: .62rem;
}
.expenses-section-heading > span {
  color: var(--fp-text-secondary);
  font-size: .64rem;
}

.expenses-list { display: grid; }
.expense-premium-row {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(220px,1.2fr) minmax(120px,.55fr) minmax(130px,.6fr) minmax(130px,.5fr) auto;
  gap: 12px;
  align-items: center;
  border: 0;
  border-bottom: 1px solid #edf1f6;
  padding: 12px 14px;
  background: #fff;
  color: inherit;
  text-align: left;
}
.expense-premium-row:last-child { border-bottom: 0; }
.expense-premium-row:hover { background: #fffaf5; }
.expense-row-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--fp-warning-soft);
  color: var(--fp-warning);
}
.expense-row-icon .icon { width: 17px; height: 17px; }
.expense-row-primary,
.expense-row-date,
.expense-row-payment,
.expense-row-amount { min-width: 0; }
.expense-row-primary strong,
.expense-row-primary span,
.expense-row-primary small,
.expense-row-date span,
.expense-row-date strong,
.expense-row-date small,
.expense-row-payment span,
.expense-row-payment strong,
.expense-row-payment small,
.expense-row-amount strong { display: block; }
.expense-row-primary strong {
  overflow: hidden;
  color: var(--fp-navy);
  font-size: .76rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.expense-row-primary span,
.expense-row-primary small,
.expense-row-date span,
.expense-row-date small,
.expense-row-payment span,
.expense-row-payment small {
  margin-top: 2px;
  color: var(--fp-text-secondary);
  font-size: .59rem;
}
.expense-row-date strong,
.expense-row-payment strong {
  margin-top: 2px;
  color: var(--fp-navy);
  font-size: .69rem;
}
.expense-row-amount { text-align: right; }
.expense-row-amount > strong {
  color: var(--fp-warning);
  font-size: .85rem;
}
.expense-sync-chip {
  width: fit-content;
  display: inline-flex;
  min-height: 23px;
  margin-top: 5px;
  margin-left: auto;
  padding: 3px 7px;
  border-radius: 7px;
  background: var(--fp-primary-soft);
  color: var(--fp-primary-strong);
  font-size: .57rem;
  font-weight: 720;
}
.expense-sync-chip.synced { background: var(--fp-neutral-soft); color: var(--fp-neutral); }
.expense-row-open {
  color: var(--fp-primary-strong);
  font-size: .64rem;
  font-weight: 720;
}

.expenses-empty-state {
  min-height: 320px;
  display: grid;
  place-items: center;
  justify-items: center;
  align-content: center;
  gap: 6px;
  padding: 30px 16px;
  text-align: center;
}
.expenses-empty-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: var(--fp-warning-soft);
  color: var(--fp-warning);
}
.expenses-empty-state h3 { margin: 4px 0 0; color: var(--fp-navy); font-size: .92rem; }
.expenses-empty-state p { margin: 0; color: var(--fp-text-secondary); font-size: .67rem; }

.expense-form-workspace {
  width: 100%;
  display: grid;
  place-items: start center;
  padding: 2px 0 24px;
}
.expense-form-card {
  width: min(980px, 100%);
  overflow: hidden;
  border: 1px solid var(--fp-border);
  border-radius: 18px;
  background: var(--fp-surface);
  box-shadow: 0 8px 26px rgba(23,36,58,.07);
}
.expense-form-header {
  min-height: 76px;
  display: grid;
  grid-template-columns: auto auto minmax(0,1fr);
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--fp-border);
}
.expense-form-back {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--fp-navy);
  font-size: 1.1rem;
}
.expense-form-back:hover { background: var(--fp-background); }

.expense-premium-form {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: var(--fp-background);
}
.expense-form-section {
  padding: 15px;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-card-radius);
  background: #fff;
}
.expense-form-section-heading {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.expense-form-section-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--fp-warning-soft);
  color: var(--fp-warning);
}
.expense-form-section-icon .icon { width: 18px; height: 18px; }
.expense-form-section-heading h2 { margin: 0; color: var(--fp-navy); font-size: .9rem; }
.expense-form-section-heading p { margin: 2px 0 0; color: var(--fp-text-secondary); font-size: .62rem; }

.expense-form-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 10px;
}
.expense-premium-field {
  min-width: 0;
  display: grid;
  gap: 5px;
  color: var(--fp-navy);
  font-size: .67rem;
  font-weight: 700;
}
.expense-premium-field > span em { color: var(--fp-danger); font-style: normal; }
.expense-input-shell,
.expense-select-shell,
.expense-textarea-shell {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  align-items: center;
  gap: 8px;
  border: 1px solid var(--fp-border);
  border-radius: 10px;
  padding: 0 10px;
  background: #fff;
}
.expense-textarea-shell { align-items: start; padding-top: 9px; }
.expense-field-icon { width: 16px; height: 16px; color: var(--fp-primary); }
.expense-input-shell input,
.expense-select-shell select,
.expense-textarea-shell textarea {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  border: 0;
  outline: 0;
  padding: 0;
  background: transparent;
  color: var(--fp-navy);
  font-size: .72rem;
}
.expense-textarea-shell textarea {
  min-height: 82px;
  resize: vertical;
  padding-top: 1px;
}
.expense-input-shell:focus-within,
.expense-select-shell:focus-within,
.expense-textarea-shell:focus-within {
  border-color: var(--fp-primary);
  box-shadow: 0 0 0 3px rgba(33,117,199,.1);
}
.expense-premium-field.full-width { margin-top: 10px; }

.expense-edit-integrity {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid #cfe2f4;
  border-radius: 11px;
  background: var(--fp-primary-soft);
}
.expense-edit-integrity > div {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}
.expense-edit-integrity .icon { width: 18px; height: 18px; color: var(--fp-primary); }
.expense-edit-integrity strong,
.expense-edit-integrity small { display: block; }
.expense-edit-integrity strong { color: var(--fp-primary-strong); font-size: .68rem; }
.expense-edit-integrity small { margin-top: 2px; color: var(--fp-text-secondary); font-size: .58rem; }
.expense-edit-integrity code {
  max-width: 240px;
  overflow: hidden;
  color: var(--fp-primary-strong);
  font-size: .58rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.expense-form-actions {
  position: sticky;
  bottom: 0;
  z-index: 4;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 14px max(12px, env(safe-area-inset-bottom));
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-card-radius);
  background: rgba(255,255,255,.98);
}

.expense-detail-header {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
}
.expense-detail-back,
.expenses-edit-button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--fp-border);
  border-radius: 9px;
  padding: 7px 10px;
  background: #fff;
  color: var(--fp-primary-strong);
  font-size: .68rem;
  font-weight: 720;
}
.expenses-edit-button .icon { width: 15px; height: 15px; }
.expense-detail-summary {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 9px;
}
.expense-detail-summary article {
  padding: 12px;
  border: 1px solid var(--fp-border);
  border-radius: 11px;
  background: #fff;
}
.expense-detail-summary span,
.expense-detail-summary strong { display: block; }
.expense-detail-summary span { color: var(--fp-text-secondary); font-size: .62rem; }
.expense-detail-summary strong { margin-top: 3px; color: var(--fp-navy); font-size: .95rem; }
.expense-detail-summary article.amount strong { color: var(--fp-warning); }

.expense-detail-card {
  padding: 14px;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-card-radius);
  background: #fff;
  box-shadow: var(--fp-shadow);
}
.expense-detail-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 8px 14px;
  margin-top: 11px;
  padding: 11px;
  border: 1px solid var(--fp-border);
  border-radius: 10px;
  background: #fbfdff;
}
.expense-detail-grid > div { min-width: 0; display: grid; gap: 2px; }
.expense-detail-grid span { color: var(--fp-text-secondary); font-size: .59rem; }
.expense-detail-grid strong { overflow-wrap: anywhere; color: var(--fp-navy); font-size: .68rem; }

.expense-accounting-note {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  align-items: center;
  gap: 9px;
  margin-top: 12px;
  padding: 10px;
  border: 1px solid #cfe2f4;
  border-radius: 10px;
  background: var(--fp-primary-soft);
}
.expense-accounting-note .icon { width: 18px; height: 18px; color: var(--fp-primary); }
.expense-accounting-note strong,
.expense-accounting-note span { display: block; }
.expense-accounting-note strong { color: var(--fp-primary-strong); font-size: .67rem; }
.expense-accounting-note span { margin-top: 2px; color: var(--fp-text-secondary); font-size: .58rem; }

@media (max-width: 1180px) {
  .expense-premium-row {
    grid-template-columns: auto minmax(200px,1fr) 115px 125px auto;
  }
  .expense-row-payment { display: none; }
}
@media (max-width: 900px) {
  .expenses-summary-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .expense-detail-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .expense-form-card { width: min(900px,100%); }
}
@media (max-width: 720px) {
  .expenses-header {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .expenses-header .expenses-add-button {
    width: 100%;
    margin-left: 0;
  }
  .expenses-filter-row { grid-template-columns: 1fr 1fr; }
  .expenses-clear-filters { width: 100%; }
  .expense-premium-row {
    grid-template-columns: auto minmax(0,1fr) auto;
    gap: 9px;
  }
  .expense-row-date {
    grid-column: 2;
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
  }
  .expense-row-amount {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: center;
  }
  .expense-row-open { display: none; }
  .expense-form-grid { grid-template-columns: 1fr; }
  .expense-detail-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .expenses-summary-grid { gap: 7px; }
  .expense-summary-card { min-height: 90px; padding: 10px; }
  .expense-summary-icon { width: 34px; height: 34px; }
  .expense-summary-card strong { font-size: .98rem; }
  .expenses-filter-row { grid-template-columns: 1fr; }
  .expense-form-card { border-radius: 14px; }
  .expense-form-header { padding: 12px; }
  .expense-premium-form { padding: 10px; }
  .expense-form-section { padding: 12px; }
  .expense-edit-integrity { align-items: flex-start; flex-direction: column; }
  .expense-edit-integrity code { max-width: 100%; }
  .expense-detail-header {
    grid-template-columns: auto minmax(0,1fr);
  }
  .expense-detail-header .expenses-edit-button {
    grid-column: 1 / -1;
    justify-content: center;
  }
  .expense-detail-back span { display: none; }
}
@media (max-width: 430px) {
  .expenses-workspace,
  .expense-detail-workspace { gap: 11px; }
  .expenses-summary-grid { grid-template-columns: 1fr 1fr; }
  .expense-premium-row { padding: 10px; }
}
@media (max-width: 390px) {
  .expenses-summary-grid,
  .expense-detail-summary { grid-template-columns: 1fr; }
  .expense-form-actions { display: grid; grid-template-columns: 1fr 1fr; }
}

/* Phase 1 Step 13.11 premium Suppliers, Purchases, Shopping Sheets, and Invoices */
.procurement-workspace,
.procurement-detail-workspace,
.invoice-workspace,
.invoice-detail-workspace {
  width: min(1380px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 14px;
}

.procurement-header,
.invoice-header {
  display: flex;
  align-items: center;
  gap: 11px;
}
.procurement-title-icon,
.invoice-title-icon,
.procurement-form-icon,
.invoice-form-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 10px;
  background: var(--fp-primary-soft);
  color: var(--fp-primary);
}
.procurement-title-icon .icon,
.invoice-title-icon .icon,
.procurement-form-icon .icon,
.invoice-form-icon .icon { width: 20px; height: 20px; }
.procurement-heading-copy,
.invoice-heading-copy { min-width: 0; }
.procurement-header h1,
.invoice-header h1,
.procurement-form-header h1,
.invoice-form-header h1,
.procurement-detail-header h1,
.invoice-detail-header h1 {
  margin: 0;
  color: var(--fp-navy);
  letter-spacing: -.03em;
}
.procurement-header h1,
.invoice-header h1 { font-size: clamp(1.45rem, 2vw, 1.9rem); }
.procurement-form-header h1,
.invoice-form-header h1,
.procurement-detail-header h1,
.invoice-detail-header h1 { font-size: 1.15rem; }
.procurement-header p,
.invoice-header p,
.procurement-form-header p,
.invoice-form-header p,
.procurement-detail-header p,
.invoice-detail-header p {
  margin: 3px 0 0;
  color: var(--fp-text-secondary);
  font-size: .72rem;
}

.procurement-primary-button,
.invoice-primary-button,
.procurement-secondary-button,
.invoice-secondary-button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: var(--fp-control-radius);
  padding: 8px 13px;
  font-size: .72rem;
  font-weight: 760;
}
.procurement-primary-button,
.invoice-primary-button {
  border: 1px solid var(--fp-primary);
  background: var(--fp-primary);
  color: #fff;
}
.procurement-primary-button:hover,
.invoice-primary-button:hover { background: var(--fp-primary-strong); border-color: var(--fp-primary-strong); }
.procurement-secondary-button,
.invoice-secondary-button {
  border: 1px solid var(--fp-border);
  background: #fff;
  color: var(--fp-navy);
}
.procurement-secondary-button:hover,
.invoice-secondary-button:hover { border-color: #b8cae0; background: #fbfdff; }
.procurement-secondary-button.danger { color: var(--fp-danger); border-color: #efcaca; }
.procurement-primary-button:disabled,
.invoice-primary-button:disabled,
.procurement-secondary-button:disabled,
.invoice-secondary-button:disabled { opacity: .45; cursor: default; }
.procurement-primary-button .icon,
.invoice-primary-button .icon,
.procurement-secondary-button .icon,
.invoice-secondary-button .icon { width: 15px; height: 15px; }
.procurement-header > .procurement-primary-button,
.invoice-header > .invoice-primary-button { margin-left: auto; }
.full-button { width: 100%; }

.procurement-message,
.invoice-message {
  padding: 10px 12px;
  border: 1px solid #c8e1f5;
  border-radius: var(--fp-control-radius);
  background: var(--fp-primary-soft);
  color: var(--fp-primary-strong);
  font-size: .72rem;
}
.procurement-message.inside-card,
.invoice-message.inside-card { margin: 12px 16px 0; }

.procurement-summary-grid,
.invoice-summary-grid {
  display: grid;
  gap: 10px;
}
.procurement-summary-grid.three-up { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.procurement-summary-grid.four-up { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.invoice-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.procurement-summary-card,
.invoice-summary-card {
  min-height: 102px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-card-radius);
  background: #fff;
  box-shadow: var(--fp-shadow);
}
.procurement-summary-icon,
.invoice-summary-icon {
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--fp-primary-soft);
  color: var(--fp-primary);
}
.procurement-summary-icon .icon,
.invoice-summary-icon .icon { width: 18px; height: 18px; }
.procurement-summary-card.success .procurement-summary-icon,
.invoice-summary-card.success .invoice-summary-icon { background: var(--fp-success-soft); color: var(--fp-success); }
.procurement-summary-card.warning .procurement-summary-icon,
.invoice-summary-card.warning .invoice-summary-icon { background: var(--fp-warning-soft); color: var(--fp-warning); }
.procurement-summary-card.neutral .procurement-summary-icon { background: var(--fp-neutral-soft); color: var(--fp-neutral); }
.procurement-summary-card span,
.procurement-summary-card strong,
.procurement-summary-card small,
.invoice-summary-card span,
.invoice-summary-card strong,
.invoice-summary-card small { display: block; }
.procurement-summary-card span,
.invoice-summary-card span { color: var(--fp-text-secondary); font-size: .63rem; }
.procurement-summary-card strong,
.invoice-summary-card strong { margin-top: 3px; color: var(--fp-navy); font-size: 1.03rem; line-height: 1.15; }
.procurement-summary-card small,
.invoice-summary-card small { margin-top: 3px; color: var(--fp-text-secondary); font-size: .57rem; }
.procurement-summary-card.success strong,
.invoice-summary-card.success strong { color: var(--fp-success); }
.procurement-summary-card.warning strong,
.invoice-summary-card.warning strong { color: var(--fp-warning); }

.procurement-filter-card,
.invoice-search-card {
  padding: 11px;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-card-radius);
  background: #fff;
  box-shadow: var(--fp-shadow);
}
.supplier-filter-card {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(160px, 240px);
  gap: 9px;
  align-items: end;
}
.procurement-search-field,
.invoice-search-field {
  min-height: 42px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 0 11px;
  border: 1px solid var(--fp-border);
  border-radius: 10px;
  background: #fff;
}
.procurement-search-field input,
.invoice-search-field input {
  min-width: 0;
  height: 40px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--fp-navy);
  font-size: .75rem;
}
.procurement-search-field:focus-within,
.invoice-search-field:focus-within,
.procurement-input-shell:focus-within,
.procurement-select-shell:focus-within,
.procurement-textarea-shell:focus-within,
.invoice-input-shell:focus-within,
.invoice-select-shell:focus-within,
.invoice-textarea-shell:focus-within {
  border-color: var(--fp-primary);
  box-shadow: 0 0 0 3px rgba(33,117,199,.1);
}
.procurement-filter-field {
  display: grid;
  gap: 4px;
  color: var(--fp-text-secondary);
  font-size: .62rem;
  font-weight: 700;
}
.procurement-filter-field select {
  min-height: 42px;
  border: 1px solid var(--fp-border);
  border-radius: 10px;
  padding: 7px 10px;
  background: #fff;
  color: var(--fp-navy);
  font-size: .72rem;
}
.procurement-field-icon,
.invoice-field-icon { width: 16px; height: 16px; color: var(--fp-primary); }

.procurement-list-card,
.invoice-list-card {
  overflow: hidden;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-card-radius);
  background: #fff;
  box-shadow: var(--fp-shadow);
}
.procurement-list-heading,
.invoice-list-heading,
.procurement-detail-card-heading,
.invoice-detail-card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.procurement-list-heading,
.invoice-list-heading {
  padding: 13px 15px;
  border-bottom: 1px solid var(--fp-border);
}
.procurement-list-heading h2,
.invoice-list-heading h2,
.procurement-detail-card-heading h2,
.invoice-detail-card-heading h2 { margin: 0; color: var(--fp-navy); font-size: .9rem; }
.procurement-list-heading p,
.invoice-list-heading p,
.procurement-detail-card-heading p,
.invoice-detail-card-heading p { margin: 3px 0 0; color: var(--fp-text-secondary); font-size: .61rem; }
.procurement-list-heading > span,
.invoice-list-heading > span,
.procurement-detail-card-heading > span,
.invoice-detail-card-heading > span { color: var(--fp-text-secondary); font-size: .62rem; }

.procurement-table,
.invoice-table { width: 100%; overflow-x: auto; }
.procurement-table-head,
.procurement-table-row,
.invoice-table-head,
.invoice-table-row {
  min-width: 820px;
  display: grid;
  gap: 12px;
  align-items: center;
}
.procurement-table-head,
.invoice-table-head {
  padding: 9px 14px;
  background: #f8fbfe;
  border-bottom: 1px solid var(--fp-border);
  color: var(--fp-text-secondary);
  font-size: .59rem;
  font-weight: 720;
}
.procurement-table-row,
.invoice-table-row {
  width: 100%;
  border: 0;
  border-bottom: 1px solid #edf1f6;
  padding: 11px 14px;
  background: #fff;
  color: var(--fp-navy);
  text-align: left;
  font-size: .66rem;
}
.procurement-table-row:last-child,
.invoice-table-row:last-child { border-bottom: 0; }
.procurement-table-row:hover,
.invoice-table-row:hover { background: #f8fbfe; }
.supplier-columns { grid-template-columns: minmax(190px,1.2fr) minmax(105px,.65fr) minmax(145px,.85fr) minmax(130px,.75fr) 90px 58px; }
.purchase-columns { grid-template-columns: minmax(190px,1.15fr) minmax(150px,.9fr) 120px 120px 100px 58px; }
.shopping-columns { grid-template-columns: minmax(210px,1.2fr) 70px 100px 100px minmax(150px,.75fr) 58px; }
.invoice-columns { grid-template-columns: minmax(190px,1fr) minmax(150px,.85fr) 110px 120px 120px 58px; }
.procurement-primary-cell strong,
.procurement-primary-cell small,
.invoice-primary-cell strong,
.invoice-primary-cell small { display: block; }
.procurement-primary-cell strong,
.invoice-primary-cell strong { overflow: hidden; color: var(--fp-navy); font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.procurement-primary-cell small,
.invoice-primary-cell small { margin-top: 2px; overflow: hidden; color: var(--fp-text-secondary); font-size: .56rem; text-overflow: ellipsis; white-space: nowrap; }
.procurement-money-cell,
.invoice-money-cell { color: var(--fp-primary-strong); font-weight: 760; }
.invoice-balance-cell { color: var(--fp-warning); font-weight: 760; }
.procurement-row-action,
.invoice-row-action { color: var(--fp-primary-strong); font-size: .61rem; font-weight: 740; }

.supplier-identity,
.invoice-primary-cell {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
}
.supplier-avatar,
.invoice-row-icon {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--fp-primary);
  color: #fff;
  font-size: .68rem;
  font-weight: 800;
}
.invoice-row-icon { border-radius: 8px; background: var(--fp-primary-soft); color: var(--fp-primary); }
.invoice-row-icon .icon { width: 15px; height: 15px; }
.supplier-identity strong,
.supplier-identity small { display: block; }
.supplier-identity strong { overflow: hidden; font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.supplier-identity small { margin-top: 2px; overflow: hidden; color: var(--fp-text-secondary); font-size: .55rem; text-overflow: ellipsis; white-space: nowrap; }

.procurement-status-chip,
.invoice-status-chip {
  width: fit-content;
  min-height: 23px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 7px;
  border-radius: 7px;
  background: var(--fp-neutral-soft);
  color: var(--fp-neutral);
  font-size: .56rem;
  font-weight: 760;
  white-space: nowrap;
}
.procurement-status-chip.success,
.invoice-status-chip.success { background: var(--fp-success-soft); color: var(--fp-success); }
.procurement-status-chip.warning,
.invoice-status-chip.warning { background: var(--fp-warning-soft); color: var(--fp-warning); }
.procurement-status-chip.blue,
.invoice-status-chip.blue { background: var(--fp-primary-soft); color: var(--fp-primary-strong); }
.procurement-status-chip.danger,
.invoice-status-chip.danger { background: var(--fp-danger-soft); color: var(--fp-danger); }

.procurement-empty-state,
.invoice-empty-state {
  min-height: 320px;
  display: grid;
  place-items: center;
  justify-items: center;
  align-content: center;
  gap: 6px;
  padding: 30px 16px;
  text-align: center;
}
.procurement-empty-icon,
.invoice-empty-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: var(--fp-primary-soft);
  color: var(--fp-primary);
}
.procurement-empty-icon .icon,
.invoice-empty-icon .icon { width: 22px; height: 22px; }
.procurement-empty-state h3,
.invoice-empty-state h3 { margin: 4px 0 0; color: var(--fp-navy); font-size: .9rem; }
.procurement-empty-state p,
.invoice-empty-state p { margin: 0 0 5px; color: var(--fp-text-secondary); font-size: .65rem; }

.procurement-form-workspace,
.invoice-form-workspace {
  width: 100%;
  display: grid;
  place-items: start center;
  padding: 2px 0 24px;
}
.procurement-form-card,
.invoice-form-card {
  width: min(980px, 100%);
  overflow: hidden;
  border: 1px solid var(--fp-border);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 26px rgba(23,36,58,.07);
}
.procurement-form-card.wide,
.invoice-form-card { width: min(1120px, 100%); }
.procurement-form-header,
.invoice-form-header {
  min-height: 76px;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--fp-border);
}
.procurement-back-button,
.invoice-back-button {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--fp-navy);
  font-size: 1.1rem;
}
.procurement-back-button:hover,
.invoice-back-button:hover { background: var(--fp-background); }
.procurement-form,
.invoice-form {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: var(--fp-background);
}
.procurement-form-section,
.invoice-form-section {
  padding: 15px;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-card-radius);
  background: #fff;
}
.procurement-section-heading,
.invoice-section-heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.procurement-section-icon,
.invoice-section-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--fp-primary-soft);
  color: var(--fp-primary);
}
.procurement-section-icon .icon,
.invoice-section-icon .icon { width: 18px; height: 18px; }
.procurement-section-heading h2,
.invoice-section-heading h2 { margin: 0; color: var(--fp-navy); font-size: .88rem; }
.procurement-section-heading p,
.invoice-section-heading p { margin: 2px 0 0; color: var(--fp-text-secondary); font-size: .6rem; }
.procurement-form-grid,
.invoice-form-grid { display: grid; gap: 10px; }
.procurement-form-grid.two-column,
.invoice-form-grid.two-column { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.procurement-field,
.invoice-field {
  min-width: 0;
  display: grid;
  gap: 5px;
  color: var(--fp-navy);
  font-size: .65rem;
  font-weight: 700;
}
.procurement-field > span em { color: var(--fp-danger); font-style: normal; }
.procurement-field.full-width,
.invoice-field.full-width { margin-top: 10px; }
.procurement-input-shell,
.procurement-select-shell,
.procurement-textarea-shell,
.invoice-input-shell,
.invoice-select-shell,
.invoice-textarea-shell {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  border: 1px solid var(--fp-border);
  border-radius: 10px;
  padding: 0 10px;
  background: #fff;
}
.procurement-textarea-shell,
.invoice-textarea-shell { align-items: start; padding-top: 9px; }
.procurement-input-shell input,
.procurement-select-shell select,
.procurement-textarea-shell textarea,
.invoice-input-shell input,
.invoice-select-shell select,
.invoice-textarea-shell textarea {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  border: 0;
  outline: 0;
  padding: 0;
  background: transparent;
  color: var(--fp-navy);
  font-size: .71rem;
}
.procurement-textarea-shell textarea,
.invoice-textarea-shell textarea { min-height: 78px; resize: vertical; padding-top: 1px; }

.procurement-readonly-card {
  min-height: 68px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 10px 11px;
  border: 1px solid var(--fp-border);
  border-radius: 10px;
  background: #fbfdff;
}
.procurement-readonly-card > div {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  grid-row: 1 / span 2;
  border-radius: 8px;
  background: var(--fp-primary-soft);
  color: var(--fp-primary);
}
.procurement-readonly-card .icon { width: 15px; height: 15px; }
.procurement-readonly-card span,
.procurement-readonly-card strong { display: block; }
.procurement-readonly-card span { color: var(--fp-text-secondary); font-size: .58rem; }
.procurement-readonly-card strong { color: var(--fp-navy); font-size: .68rem; }

.procurement-item-builder,
.invoice-item-builder {
  display: grid;
  grid-template-columns: minmax(230px, 1.4fr) minmax(100px, .45fr) minmax(130px, .6fr) auto;
  gap: 8px;
  align-items: end;
}
.invoice-item-builder { grid-template-columns: minmax(220px, 1.35fr) 100px 130px 110px auto; }
.shopping-item-builder { grid-template-columns: minmax(220px, 1.15fr) 110px minmax(180px, .85fr) auto; }
.item-add-button { min-height: 42px; white-space: nowrap; }
.procurement-item-list,
.invoice-item-list { display: grid; margin-top: 12px; border-top: 1px solid #edf1f6; }
.procurement-item-list article,
.invoice-item-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 1px;
  border-bottom: 1px solid #edf1f6;
}
.procurement-item-list article > div:last-child,
.invoice-item-list article > div:last-child { text-align: right; }
.procurement-item-list strong,
.procurement-item-list span,
.invoice-item-list strong,
.invoice-item-list span { display: block; }
.procurement-item-list strong,
.invoice-item-list strong { color: var(--fp-navy); font-size: .68rem; }
.procurement-item-list span,
.invoice-item-list span { margin-top: 2px; color: var(--fp-text-secondary); font-size: .57rem; }
.procurement-item-list button,
.invoice-item-list button {
  margin-top: 3px;
  border: 0;
  background: transparent;
  color: var(--fp-danger);
  font-size: .57rem;
  font-weight: 720;
}
.procurement-total-row,
.invoice-total-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  margin-top: 12px;
  padding: 11px 12px;
  border-radius: 10px;
  background: var(--fp-primary-soft);
}
.procurement-total-row span,
.invoice-total-row span { color: var(--fp-text-secondary); font-size: .63rem; }
.procurement-total-row strong,
.invoice-total-row strong { color: var(--fp-primary-strong); font-size: .9rem; }
.procurement-inline-empty,
.invoice-inline-empty { padding: 18px 10px; color: var(--fp-text-secondary); font-size: .63rem; text-align: center; }
.procurement-inline-empty.roomy { min-height: 110px; display: grid; place-items: center; }

.procurement-form-actions,
.invoice-form-actions {
  position: sticky;
  bottom: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px max(12px, env(safe-area-inset-bottom));
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-card-radius);
  background: rgba(255,255,255,.98);
}
.procurement-action-spacer,
.invoice-action-spacer { flex: 1; }
.shopping-conversion-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 9px;
  align-items: end;
}

.procurement-detail-header,
.invoice-detail-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}
.procurement-back-link,
.invoice-back-link {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--fp-border);
  border-radius: 9px;
  padding: 7px 10px;
  background: #fff;
  color: var(--fp-primary-strong);
  font-size: .66rem;
  font-weight: 720;
}
.invoice-detail-actions { display: flex; align-items: center; gap: 8px; }
.procurement-detail-summary,
.invoice-detail-summary { display: grid; gap: 9px; }
.procurement-detail-summary.three-up { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.invoice-detail-summary.four-up { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.procurement-detail-summary article,
.invoice-detail-summary article {
  padding: 12px;
  border: 1px solid var(--fp-border);
  border-radius: 11px;
  background: #fff;
}
.procurement-detail-summary span,
.procurement-detail-summary strong,
.invoice-detail-summary span,
.invoice-detail-summary strong { display: block; }
.procurement-detail-summary span,
.invoice-detail-summary span { color: var(--fp-text-secondary); font-size: .6rem; }
.procurement-detail-summary strong,
.invoice-detail-summary strong { margin-top: 3px; color: var(--fp-navy); font-size: .92rem; overflow-wrap: anywhere; }
.invoice-detail-summary article.success strong { color: var(--fp-success); }
.invoice-detail-summary article.warning strong { color: var(--fp-warning); }
.procurement-detail-grid,
.invoice-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
  gap: 12px;
  align-items: start;
}
.procurement-side-column,
.invoice-side-column { display: grid; gap: 12px; }
.procurement-detail-card,
.invoice-detail-card {
  padding: 14px;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-card-radius);
  background: #fff;
  box-shadow: var(--fp-shadow);
}
.procurement-detail-pairs,
.invoice-detail-pairs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
  margin-top: 11px;
  padding: 11px;
  border: 1px solid var(--fp-border);
  border-radius: 10px;
  background: #fbfdff;
}
.procurement-detail-pairs > div,
.invoice-detail-pairs > div { min-width: 0; display: grid; gap: 2px; }
.procurement-detail-pairs span,
.invoice-detail-pairs span { color: var(--fp-text-secondary); font-size: .57rem; }
.procurement-detail-pairs strong,
.invoice-detail-pairs strong { overflow-wrap: anywhere; color: var(--fp-navy); font-size: .66rem; }
.procurement-note-box,
.invoice-note-box {
  display: grid;
  gap: 3px;
  margin-top: 11px;
  padding: 10px 11px;
  border: 1px solid #dce7f1;
  border-radius: 10px;
  background: #fbfdff;
}
.procurement-note-box.blue { background: var(--fp-primary-soft); border-color: #c8e1f5; }
.procurement-note-box strong,
.invoice-note-box strong { color: var(--fp-navy); font-size: .63rem; }
.procurement-note-box span,
.invoice-note-box span { color: var(--fp-text-secondary); font-size: .59rem; overflow-wrap: anywhere; }

.procurement-receive-form,
.invoice-payment-form { display: grid; gap: 9px; margin-top: 11px; }
.procurement-receive-form label {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px;
  gap: 8px;
  align-items: center;
}
.procurement-receive-form label > span { color: var(--fp-navy); font-size: .64rem; font-weight: 700; }
.procurement-receive-form label small { display: block; margin-top: 2px; color: var(--fp-text-secondary); font-size: .55rem; font-weight: 500; }
.procurement-receive-form input {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--fp-border);
  border-radius: 9px;
  padding: 6px 8px;
  color: var(--fp-navy);
}
.procurement-history-list { display: grid; }
.procurement-history-list article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  border-bottom: 1px solid #edf1f6;
}
.procurement-history-list article:last-child { border-bottom: 0; }
.procurement-history-list strong,
.procurement-history-list span { display: block; }
.procurement-history-list strong { color: var(--fp-navy); font-size: .68rem; }
.procurement-history-list span { margin-top: 2px; color: var(--fp-text-secondary); font-size: .57rem; }

.invoice-totals-card {
  display: grid;
  gap: 7px;
  margin-top: 12px;
  padding: 11px;
  border: 1px solid var(--fp-border);
  border-radius: 10px;
  background: #fbfdff;
}
.invoice-totals-card > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.invoice-totals-card span { color: var(--fp-text-secondary); font-size: .61rem; }
.invoice-totals-card strong { color: var(--fp-navy); font-size: .67rem; }
.invoice-totals-card .grand { padding-top: 7px; border-top: 1px solid var(--fp-border); }
.invoice-totals-card .grand strong { color: var(--fp-primary-strong); font-size: .82rem; }
.invoice-payment-history { display: grid; margin-top: 9px; }
.invoice-payment-history article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  padding: 9px 0;
  border-top: 1px solid #edf1f6;
}
.invoice-payment-history article:first-child { border-top: 0; }
.invoice-payment-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--fp-success-soft);
  color: var(--fp-success);
}
.invoice-payment-icon .icon { width: 15px; height: 15px; }
.invoice-payment-history strong,
.invoice-payment-history span,
.invoice-payment-history small { display: block; }
.invoice-payment-history strong { color: var(--fp-success); font-size: .69rem; }
.invoice-payment-history span,
.invoice-payment-history small { margin-top: 2px; color: var(--fp-text-secondary); font-size: .56rem; }

@media (max-width: 1180px) {
  .procurement-summary-grid.four-up { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .procurement-detail-grid,
  .invoice-detail-grid { grid-template-columns: 1fr; }
  .procurement-side-column,
  .invoice-side-column { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .invoice-item-builder { grid-template-columns: minmax(220px, 1.3fr) 100px 120px 100px; }
  .invoice-item-builder .item-add-button { grid-column: 1 / -1; justify-self: end; }
}

@media (max-width: 900px) {
  .procurement-summary-grid.three-up,
  .invoice-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .invoice-summary-grid .invoice-summary-card:first-child { grid-column: 1 / -1; }
  .procurement-form-card,
  .procurement-form-card.wide,
  .invoice-form-card { width: min(900px, 100%); }
  .procurement-item-builder,
  .shopping-item-builder { grid-template-columns: 1fr 1fr; }
  .procurement-item-builder .item-product,
  .shopping-item-builder .item-product { grid-column: 1 / -1; }
  .procurement-item-builder .item-add-button,
  .shopping-item-builder .item-add-button { justify-self: end; }
}

@media (max-width: 720px) {
  .procurement-header,
  .invoice-header { align-items: flex-start; flex-wrap: wrap; }
  .procurement-header > .procurement-primary-button,
  .invoice-header > .invoice-primary-button { width: 100%; margin-left: 0; }
  .supplier-filter-card { grid-template-columns: 1fr; }
  .procurement-summary-grid.three-up,
  .procurement-summary-grid.four-up,
  .invoice-summary-grid { grid-template-columns: 1fr 1fr; }
  .invoice-summary-grid .invoice-summary-card:first-child { grid-column: auto; }
  .procurement-form-grid.two-column,
  .invoice-form-grid.two-column { grid-template-columns: 1fr; }
  .invoice-item-builder { grid-template-columns: 1fr 1fr; }
  .invoice-item-builder .item-product { grid-column: 1 / -1; }
  .invoice-item-builder .item-add-button { grid-column: auto; justify-self: stretch; }
  .procurement-side-column,
  .invoice-side-column { grid-template-columns: 1fr; }
  .procurement-detail-summary.three-up,
  .invoice-detail-summary.four-up { grid-template-columns: 1fr 1fr; }
  .shopping-conversion-row { grid-template-columns: 1fr; }
  .shopping-conversion-row .procurement-secondary-button { width: 100%; }
  .invoice-detail-header { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .invoice-detail-actions { grid-column: 1 / -1; justify-content: flex-end; }
}

@media (max-width: 520px) {
  .procurement-summary-grid.three-up,
  .procurement-summary-grid.four-up,
  .invoice-summary-grid { gap: 7px; }
  .procurement-summary-card,
  .invoice-summary-card { min-height: 88px; padding: 10px; gap: 9px; }
  .procurement-summary-icon,
  .invoice-summary-icon { width: 34px; height: 34px; }
  .procurement-summary-card strong,
  .invoice-summary-card strong { font-size: .88rem; }
  .procurement-form-card,
  .invoice-form-card { border-radius: 14px; }
  .procurement-form-header,
  .invoice-form-header { padding: 12px; }
  .procurement-form,
  .invoice-form { padding: 10px; }
  .procurement-form-section,
  .invoice-form-section { padding: 12px; }
  .procurement-item-builder,
  .shopping-item-builder,
  .invoice-item-builder { grid-template-columns: 1fr; }
  .procurement-item-builder .item-product,
  .shopping-item-builder .item-product,
  .invoice-item-builder .item-product { grid-column: auto; }
  .procurement-item-builder .item-add-button,
  .shopping-item-builder .item-add-button,
  .invoice-item-builder .item-add-button { width: 100%; justify-self: stretch; }
  .procurement-form-actions,
  .invoice-form-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .procurement-form-actions .procurement-action-spacer,
  .invoice-form-actions .invoice-action-spacer { display: none; }
  .procurement-form-actions > :first-child:nth-last-child(4),
  .invoice-form-actions > :first-child:nth-last-child(4) { grid-column: 1 / -1; }
  .procurement-detail-header { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .procurement-detail-header > .procurement-status-chip { grid-column: 2; }
  .procurement-back-link span,
  .invoice-back-link span { display: none; }
  .procurement-detail-pairs,
  .invoice-detail-pairs { grid-template-columns: 1fr; }
}

@media (max-width: 390px) {
  .procurement-summary-grid.three-up,
  .procurement-summary-grid.four-up,
  .invoice-summary-grid,
  .procurement-detail-summary.three-up,
  .invoice-detail-summary.four-up { grid-template-columns: 1fr; }
  .procurement-form-actions,
  .invoice-form-actions { grid-template-columns: 1fr; }
}

/* Phase 1 Step 13.12 premium Accounting and Business Costs */
.accounting-premium-workspace {
  width: min(1380px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 14px;
}

.accounting-premium-header {
  display: flex;
  align-items: center;
  gap: 11px;
}
.accounting-title-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 11px;
  background: var(--fp-primary-soft);
  color: var(--fp-primary);
}
.accounting-title-icon .icon { width: 21px; height: 21px; }
.accounting-title-copy { min-width: 0; }
.accounting-title-copy h1 {
  margin: 0;
  color: var(--fp-navy);
  font-size: clamp(1.45rem, 2vw, 1.9rem);
  letter-spacing: -.03em;
}
.accounting-title-copy p {
  margin: 3px 0 0;
  color: var(--fp-text-secondary);
  font-size: .72rem;
}
.accounting-status-cluster {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.accounting-status {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border: 1px solid var(--fp-border);
  border-radius: 999px;
  background: #fff;
  color: var(--fp-neutral);
  font-size: .62rem;
  font-weight: 720;
}
.accounting-status .icon { width: 14px; height: 14px; }
.accounting-status.online { color: var(--fp-success); background: var(--fp-success-soft); border-color: #cbe9d7; }
.accounting-status.offline { color: var(--fp-warning); background: var(--fp-warning-soft); border-color: #f3d7bb; }
.accounting-status.pending { color: var(--fp-primary-strong); background: var(--fp-primary-soft); border-color: #cfe2f4; }

.accounting-filter-card {
  display: grid;
  grid-template-columns: minmax(190px, .8fr) minmax(150px, .6fr) minmax(150px, .6fr) auto;
  gap: 9px;
  align-items: end;
  padding: 11px 12px;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-card-radius);
  background: #fff;
  box-shadow: var(--fp-shadow);
}
.accounting-filter-card label {
  min-width: 0;
  display: grid;
  gap: 4px;
  color: var(--fp-text-secondary);
  font-size: .61rem;
  font-weight: 700;
}
.accounting-filter-card select,
.accounting-filter-card input {
  width: 100%;
  min-height: 39px;
  border: 1px solid var(--fp-border);
  border-radius: 9px;
  padding: 7px 9px;
  background: #fff;
  color: var(--fp-navy);
  font-size: .7rem;
  outline: 0;
}
.accounting-filter-card select:focus,
.accounting-filter-card input:focus {
  border-color: var(--fp-primary);
  box-shadow: 0 0 0 3px rgba(33,117,199,.1);
}
.accounting-secondary-action {
  min-height: 39px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--fp-border);
  border-radius: 9px;
  padding: 7px 12px;
  background: #fff;
  color: var(--fp-primary-strong);
  font-size: .68rem;
  font-weight: 740;
}
.accounting-secondary-action .icon { width: 15px; height: 15px; }

.accounting-premium-message {
  padding: 10px 12px;
  border: 1px solid #c8e1f5;
  border-radius: var(--fp-control-radius);
  background: var(--fp-primary-soft);
  color: var(--fp-primary-strong);
  font-size: .72rem;
}

.accounting-profit-card {
  min-height: 148px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 22px 24px;
  border-radius: 18px;
  background: var(--fp-primary);
  color: #fff;
  box-shadow: 0 12px 28px rgba(33,117,199,.18);
}
.accounting-profit-copy span,
.accounting-profit-copy strong,
.accounting-profit-copy small { display: block; }
.accounting-profit-copy span {
  color: rgba(255,255,255,.8);
  font-size: .72rem;
  font-weight: 720;
}
.accounting-profit-copy strong {
  margin-top: 7px;
  color: #fff;
  font-size: clamp(1.9rem, 3.5vw, 3rem);
  line-height: 1;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
.accounting-profit-copy small {
  max-width: 680px;
  margin-top: 9px;
  color: rgba(255,255,255,.78);
  font-size: .64rem;
  line-height: 1.45;
}
.accounting-profit-card.unavailable .accounting-profit-copy strong { font-size: clamp(1.45rem, 2.4vw, 2.15rem); }
.accounting-profit-icon {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  background: rgba(255,255,255,.14);
}
.accounting-profit-icon .icon { width: 31px; height: 31px; }

.accounting-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.accounting-metric-card {
  min-height: 112px;
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-card-radius);
  background: #fff;
  box-shadow: var(--fp-shadow);
}
.accounting-metric-icon {
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--fp-primary-soft);
  color: var(--fp-primary);
}
.accounting-metric-card.orange .accounting-metric-icon { background: var(--fp-warning-soft); color: var(--fp-warning); }
.accounting-metric-card.neutral .accounting-metric-icon { background: var(--fp-neutral-soft); color: var(--fp-neutral); }
.accounting-metric-icon .icon { width: 18px; height: 18px; }
.accounting-metric-card span,
.accounting-metric-card strong,
.accounting-metric-card small { display: block; }
.accounting-metric-card span { color: var(--fp-text-secondary); font-size: .62rem; font-weight: 680; }
.accounting-metric-card strong {
  margin-top: 3px;
  color: var(--fp-navy);
  font-size: 1.08rem;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.accounting-metric-card small { margin-top: 3px; color: var(--fp-text-secondary); font-size: .56rem; }

.accounting-integrity-card {
  padding: 11px 12px;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-card-radius);
  background: #fff;
}
.accounting-integrity-card > div {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: 9px;
  align-items: start;
}
.accounting-integrity-card .icon { width: 18px; height: 18px; margin-top: 1px; }
.accounting-integrity-card strong,
.accounting-integrity-card small { display: block; }
.accounting-integrity-card strong { color: var(--fp-navy); font-size: .68rem; }
.accounting-integrity-card small { margin-top: 2px; color: var(--fp-text-secondary); font-size: .58rem; line-height: 1.4; }
.accounting-integrity-card.ok { background: var(--fp-success-soft); border-color: #cbe9d7; }
.accounting-integrity-card.ok .icon { color: var(--fp-success); }
.accounting-integrity-card.warning { background: var(--fp-warning-soft); border-color: #f2d7bb; }
.accounting-integrity-card.warning .icon { color: var(--fp-warning); }

.accounting-business-cost-card,
.accounting-panel-card {
  overflow: hidden;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-card-radius);
  background: #fff;
  box-shadow: var(--fp-shadow);
}
.business-cost-section-header,
.accounting-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 15px;
  border-bottom: 1px solid var(--fp-border);
}
.business-cost-section-header h2,
.accounting-section-heading h2 {
  margin: 0;
  color: var(--fp-navy);
  font-size: .92rem;
}
.business-cost-section-header p,
.accounting-section-heading p {
  margin: 3px 0 0;
  color: var(--fp-text-secondary);
  font-size: .62rem;
}
.accounting-section-heading > span {
  color: var(--fp-text-secondary);
  font-size: .62rem;
}
.accounting-primary-action {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 0 0 auto;
  border: 1px solid var(--fp-primary);
  border-radius: 9px;
  padding: 7px 11px;
  background: var(--fp-primary);
  color: #fff;
  font-size: .67rem;
  font-weight: 760;
  text-decoration: none;
}
.accounting-primary-action:hover { background: var(--fp-primary-strong); border-color: var(--fp-primary-strong); }

.business-cost-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border-bottom: 1px solid var(--fp-border);
  background: #fbfdff;
}
.business-cost-toolbar > span { color: var(--fp-text-secondary); font-size: .62rem; }
.business-cost-search {
  min-height: 40px;
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  align-items: center;
  gap: 8px;
  border: 1px solid var(--fp-border);
  border-radius: 9px;
  padding: 0 10px;
  background: #fff;
}
.business-cost-search-icon { width: 16px; height: 16px; color: var(--fp-primary); }
.business-cost-search input {
  width: 100%;
  min-width: 0;
  height: 38px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--fp-navy);
  font-size: .72rem;
}
.business-cost-search:focus-within { border-color: var(--fp-primary); box-shadow: 0 0 0 3px rgba(33,117,199,.1); }

.business-cost-table,
.business-cost-history-table { display: grid; }
.business-cost-table-head,
.business-cost-table-row,
.business-cost-history-head,
.business-cost-history-row {
  display: grid;
  grid-template-columns: 105px minmax(210px,1.25fr) minmax(110px,.6fr) minmax(120px,.65fr) 120px 58px;
  gap: 10px;
  align-items: center;
}
.business-cost-table-head,
.business-cost-history-head {
  min-height: 36px;
  padding: 8px 13px;
  background: #f7f9fc;
  color: var(--fp-text-secondary);
  font-size: .58rem;
  font-weight: 760;
}
.business-cost-table-row {
  min-height: 58px;
  padding: 9px 13px;
  border-bottom: 1px solid #edf1f6;
  color: var(--fp-text-secondary);
  font-size: .64rem;
}
.business-cost-table-row:last-child { border-bottom: 0; }
.business-cost-description { min-width: 0; }
.business-cost-description strong,
.business-cost-description small { display: block; }
.business-cost-description strong {
  overflow: hidden;
  color: var(--fp-navy);
  font-size: .69rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.business-cost-description small { margin-top: 2px; color: var(--fp-text-secondary); font-size: .56rem; }
.business-cost-date { color: var(--fp-navy); font-weight: 690; }
.business-cost-amount { color: var(--fp-navy); font-weight: 780; text-align: right; font-variant-numeric: tabular-nums; }
.business-cost-open {
  display: inline-flex;
  justify-content: center;
  color: var(--fp-primary-strong);
  font-size: .61rem;
  font-weight: 760;
  text-decoration: none;
}
.business-cost-empty-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  margin: 0 auto 4px;
  border-radius: 13px;
  background: var(--fp-primary-soft);
  color: var(--fp-primary);
}

.accounting-ledger-grid {
  display: grid;
  grid-template-columns: minmax(0,1.1fr) minmax(360px,.9fr);
  gap: 12px;
  align-items: start;
}
.accounting-inline-empty {
  min-height: 170px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 4px;
  padding: 24px;
  text-align: center;
}
.accounting-inline-empty.tall { min-height: 360px; }
.accounting-inline-empty.compact { min-height: 130px; }
.accounting-inline-empty h3 { margin: 0; color: var(--fp-navy); font-size: .83rem; }
.accounting-inline-empty p { margin: 0; color: var(--fp-text-secondary); font-size: .62rem; }
.accounting-inline-empty .accounting-primary-action { margin-top: 5px; }
.accounting-panel-card .management-detail { padding: 14px; }
.accounting-policy-note { margin: 0; }

.business-cost-workspace .business-cost-title-icon,
.business-cost-form-icon {
  background: var(--fp-primary-soft);
  color: var(--fp-primary);
}
.business-cost-add-button,
.business-cost-save-button {
  background: var(--fp-primary);
  border-color: var(--fp-primary);
}
.business-cost-list-card { overflow: hidden; }
.business-cost-history-head,
.business-cost-history-row {
  grid-template-columns: 105px minmax(220px,1.3fr) minmax(110px,.6fr) minmax(125px,.65fr) 120px 58px;
}
.business-cost-history-row {
  width: 100%;
  min-height: 61px;
  padding: 9px 13px;
  border: 0;
  border-bottom: 1px solid #edf1f6;
  background: #fff;
  color: var(--fp-text-secondary);
  text-align: left;
  font-size: .64rem;
}
.business-cost-history-row:last-child { border-bottom: 0; }
.business-cost-history-row:hover { background: #f8fbff; }
.business-cost-history-date { color: var(--fp-navy); font-weight: 690; }
.business-cost-history-description { min-width: 0; }
.business-cost-history-description strong,
.business-cost-history-description small { display: block; }
.business-cost-history-description strong {
  overflow: hidden;
  color: var(--fp-navy);
  font-size: .7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.business-cost-history-description small { margin-top: 2px; color: var(--fp-text-secondary); font-size: .56rem; }
.business-cost-history-amount { text-align: right; }
.business-cost-history-amount strong { display: block; color: var(--fp-navy); font-size: .75rem; font-variant-numeric: tabular-nums; }
.business-cost-history-amount .expense-sync-chip { margin-left: auto; }

.business-cost-form-card { width: min(1080px, 100%); }
.business-cost-premium-form { gap: 11px; }
.business-cost-section { padding: 15px; }
.business-cost-section .expense-form-section-icon {
  background: var(--fp-primary-soft);
  color: var(--fp-primary);
}
.business-cost-amount-field {
  min-height: 70px;
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  align-items: center;
  gap: 12px;
  padding: 0 15px;
  border: 1px solid var(--fp-border);
  border-radius: 12px;
  background: #fff;
}
.business-cost-amount-field:focus-within {
  border-color: var(--fp-primary);
  box-shadow: 0 0 0 3px rgba(33,117,199,.1);
}
.business-cost-currency {
  color: var(--fp-primary-strong);
  font-size: .78rem;
  font-weight: 800;
}
.business-cost-amount-field input {
  width: 100%;
  min-width: 0;
  height: 66px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--fp-navy);
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -.025em;
}

.business-cost-choice-grid {
  display: grid;
  gap: 8px;
}
.business-cost-choice-grid.category-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
.business-cost-choice-grid.payment-grid { grid-template-columns: repeat(5, minmax(0,1fr)); }
.business-cost-choice {
  position: relative;
  min-width: 0;
  min-height: 72px;
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  align-items: center;
  gap: 9px;
  padding: 10px;
  border: 1px solid var(--fp-border);
  border-radius: 11px;
  background: #fff;
  color: var(--fp-navy);
  cursor: pointer;
}
.business-cost-choice:hover { border-color: #b8d2eb; background: #fbfdff; }
.business-cost-choice:has(input:checked) {
  border-color: var(--fp-primary);
  background: var(--fp-primary-soft);
  box-shadow: inset 0 0 0 1px var(--fp-primary);
}
.business-cost-choice input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}
.business-cost-choice:has(input:focus-visible) {
  outline: 3px solid rgba(33,117,199,.18);
  outline-offset: 2px;
}
.business-cost-choice-icon {
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--fp-background);
  color: var(--fp-primary);
}
.business-cost-choice:has(input:checked) .business-cost-choice-icon {
  background: var(--fp-primary);
  color: #fff;
}
.business-cost-choice-icon .icon { width: 17px; height: 17px; }
.business-cost-choice > span:last-child {
  overflow: hidden;
  font-size: .67rem;
  font-weight: 720;
  text-overflow: ellipsis;
}
.business-cost-reference-row { margin-top: 10px; }
.expense-form-grid.one-column { grid-template-columns: 1fr; }
.business-cost-form-actions {
  padding-bottom: max(12px, env(safe-area-inset-bottom));
}

@media (max-width: 1180px) {
  .accounting-metric-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .accounting-ledger-grid { grid-template-columns: 1fr; }
  .business-cost-choice-grid.payment-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

@media (max-width: 900px) {
  .accounting-filter-card { grid-template-columns: 1fr 1fr; }
  .accounting-secondary-action { width: 100%; }
  .business-cost-table-head,
  .business-cost-table-row,
  .business-cost-history-head,
  .business-cost-history-row {
    grid-template-columns: 100px minmax(190px,1fr) 110px 120px 58px;
  }
  .business-cost-table-head > span:nth-child(4),
  .business-cost-table-row > span:nth-child(4),
  .business-cost-history-head > span:nth-child(4),
  .business-cost-history-row > span:nth-child(4) { display: none; }
  .business-cost-choice-grid.category-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

@media (max-width: 720px) {
  .accounting-premium-header { align-items: flex-start; flex-wrap: wrap; }
  .accounting-status-cluster { width: 100%; margin-left: 0; justify-content: flex-start; }
  .accounting-profit-card { min-height: 132px; padding: 18px; }
  .accounting-profit-icon { width: 52px; height: 52px; }
  .accounting-filter-card { grid-template-columns: 1fr 1fr; }
  .business-cost-section-header { flex-wrap: wrap; }
  .business-cost-section-header .accounting-primary-action { width: 100%; }
  .business-cost-toolbar { grid-template-columns: 1fr; }
  .business-cost-toolbar > span { display: none; }

  .business-cost-table-head,
  .business-cost-history-head { display: none; }
  .business-cost-table-row,
  .business-cost-history-row {
    grid-template-columns: minmax(0,1fr) auto;
    gap: 4px 10px;
    padding: 11px 12px;
  }
  .business-cost-table-row > span,
  .business-cost-history-row > span { display: block !important; }
  .business-cost-date,
  .business-cost-history-date { grid-column: 1; grid-row: 2; color: var(--fp-text-secondary); font-size: .57rem; }
  .business-cost-description,
  .business-cost-history-description { grid-column: 1; grid-row: 1; }
  .business-cost-table-row > span:nth-child(3),
  .business-cost-history-row > span:nth-child(3) { grid-column: 1; grid-row: 3; font-size: .58rem; }
  .business-cost-table-row > span:nth-child(4),
  .business-cost-history-row > span:nth-child(4) { grid-column: 1; grid-row: 4; font-size: .58rem; }
  .business-cost-amount,
  .business-cost-history-amount { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .business-cost-table-row > span:last-child,
  .business-cost-history-row > span:last-child { grid-column: 2; grid-row: 3 / span 2; justify-self: end; align-self: center; }

  .business-cost-choice-grid.category-grid,
  .business-cost-choice-grid.payment-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 620px) {
  .accounting-metric-grid { grid-template-columns: 1fr; }
  .accounting-filter-card { grid-template-columns: 1fr; }
  .accounting-filter-card .filter-hidden { display: none; }
  .accounting-profit-card { grid-template-columns: 1fr; }
  .accounting-profit-icon { display: none; }
  .accounting-section-heading { align-items: flex-start; flex-direction: column; }
  .business-cost-form-card { border-radius: 14px; }
  .business-cost-form-header { padding: 12px; }
  .business-cost-premium-form { padding: 10px; }
  .business-cost-section { padding: 12px; }
  .business-cost-amount-field input { font-size: 1.35rem; }
}

@media (max-width: 430px) {
  .accounting-premium-workspace { gap: 11px; }
  .accounting-profit-card { border-radius: 14px; }
  .accounting-profit-copy strong { font-size: 1.75rem; }
  .accounting-profit-card.unavailable .accounting-profit-copy strong { font-size: 1.35rem; }
  .accounting-metric-card { min-height: 98px; padding: 11px; }
  .business-cost-choice { min-height: 64px; padding: 8px; }
  .business-cost-choice-icon { width: 31px; height: 31px; }
}

@media (max-width: 390px) {
  .business-cost-choice-grid.category-grid,
  .business-cost-choice-grid.payment-grid { grid-template-columns: 1fr 1fr; }
  .business-cost-form-actions { display: grid; grid-template-columns: 1fr 1fr; }
}

/* Phase 1 Step 13.12 premium Staff Access */
.staff-access-workspace,
.staff-detail-workspace {
  width: min(1380px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 14px;
}

.staff-access-header,
.staff-detail-header {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.staff-access-title-icon,
.staff-modal-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 11px;
  background: var(--fp-primary-soft);
  color: var(--fp-primary);
}

.staff-access-title-icon .icon,
.staff-modal-icon .icon {
  width: 21px;
  height: 21px;
}

.staff-access-heading-copy,
.staff-detail-title {
  min-width: 0;
}

.staff-access-header h1,
.staff-detail-header h1,
.staff-modal-header h1 {
  margin: 0;
  color: var(--fp-navy);
  letter-spacing: -.03em;
}

.staff-access-header h1 {
  font-size: clamp(1.45rem, 2vw, 1.9rem);
}

.staff-access-header p,
.staff-detail-header p,
.staff-modal-header p {
  margin: 3px 0 0;
  color: var(--fp-text-secondary);
  font-size: .72rem;
}

.staff-primary-button,
.staff-secondary-button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: var(--fp-control-radius);
  padding: 8px 13px;
  font-size: .74rem;
  font-weight: 760;
}

.staff-primary-button {
  border: 1px solid var(--fp-primary);
  background: var(--fp-primary);
  color: #fff;
}

.staff-primary-button:hover {
  background: var(--fp-primary-strong);
  border-color: var(--fp-primary-strong);
}

.staff-primary-button:disabled,
.staff-secondary-button:disabled {
  opacity: .45;
  cursor: default;
}

.staff-secondary-button {
  border: 1px solid var(--fp-border);
  background: var(--fp-surface);
  color: var(--fp-navy);
}

.staff-secondary-button:hover {
  border-color: #b7cbe0;
  background: #fafdff;
}

.staff-secondary-button.danger {
  border-color: #efc7c7;
  color: var(--fp-danger);
  background: var(--fp-danger-soft);
}

.staff-access-header .staff-primary-button {
  margin-left: auto;
}

.staff-message {
  padding: 10px 12px;
  border: 1px solid #c8e1f5;
  border-radius: var(--fp-control-radius);
  background: var(--fp-primary-soft);
  color: var(--fp-primary-strong);
  font-size: .72rem;
}

.staff-security-strip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 11px 13px;
  border: 1px solid #c8e1f5;
  border-radius: var(--fp-card-radius);
  background: #f7fbff;
}

.staff-security-strip-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--fp-primary-soft);
  color: var(--fp-primary);
}

.staff-security-strip-icon .icon {
  width: 17px;
  height: 17px;
}

.staff-security-strip strong,
.staff-security-strip span {
  display: block;
}

.staff-security-strip strong {
  color: var(--fp-navy);
  font-size: .72rem;
}

.staff-security-strip span {
  margin-top: 2px;
  color: var(--fp-text-secondary);
  font-size: .64rem;
  line-height: 1.45;
}

.staff-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.staff-summary-card {
  min-height: 104px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-card-radius);
  background: var(--fp-surface);
  box-shadow: var(--fp-shadow);
}

.staff-summary-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--fp-primary);
  color: #fff;
}

.staff-summary-icon .icon {
  width: 19px;
  height: 19px;
}

.staff-summary-card span,
.staff-summary-card strong,
.staff-summary-card small {
  display: block;
}

.staff-summary-card span {
  color: var(--fp-text-secondary);
  font-size: .64rem;
}

.staff-summary-card strong {
  margin-top: 3px;
  color: var(--fp-navy);
  font-size: 1.35rem;
  line-height: 1.05;
}

.staff-summary-card small {
  margin-top: 4px;
  color: var(--fp-text-secondary);
  font-size: .58rem;
}

.staff-filter-card {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(170px, 240px);
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-card-radius);
  background: var(--fp-surface);
  box-shadow: var(--fp-shadow);
}

.staff-search-field {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 42px;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-control-radius);
  padding: 0 11px;
  background: #fff;
}

.staff-search-field input {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--fp-navy);
  font-size: .72rem;
}

.staff-search-field:focus-within {
  border-color: var(--fp-primary);
  box-shadow: 0 0 0 3px rgba(33, 117, 199, .1);
}

.staff-field-icon {
  width: 16px;
  height: 16px;
  color: var(--fp-primary);
}

.staff-role-filter {
  display: grid;
  gap: 4px;
  color: var(--fp-text-secondary);
  font-size: .6rem;
  font-weight: 700;
}

.staff-role-filter select {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-control-radius);
  padding: 8px 10px;
  background: #fff;
  color: var(--fp-navy);
  outline: 0;
  font-size: .72rem;
}

.staff-list-card,
.staff-detail-card {
  overflow: hidden;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-card-radius);
  background: var(--fp-surface);
  box-shadow: var(--fp-shadow);
}

.staff-list-heading,
.staff-detail-card-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--fp-border);
}

.staff-list-heading h2,
.staff-detail-card-heading h2 {
  margin: 0;
  color: var(--fp-navy);
  font-size: .86rem;
}

.staff-list-heading p,
.staff-detail-card-heading p {
  margin: 2px 0 0;
  color: var(--fp-text-secondary);
  font-size: .61rem;
}

.staff-list-heading > span {
  color: var(--fp-text-secondary);
  font-size: .62rem;
  white-space: nowrap;
}

.staff-profile-list {
  display: grid;
}

.staff-profile-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  border-bottom: 1px solid #edf1f6;
  background: #fff;
}

.staff-profile-row:last-child {
  border-bottom: 0;
}

.staff-row-main {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(160px, 1.15fr) minmax(130px, .8fr) minmax(170px, .9fr) auto;
  gap: 12px;
  align-items: center;
  border: 0;
  padding: 13px 10px 13px 15px;
  background: transparent;
  color: var(--fp-navy);
  text-align: left;
}

.staff-row-main:hover {
  background: #f8fbfe;
}

.staff-avatar {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--fp-primary-soft);
  color: var(--fp-primary-strong);
  font-size: .72rem;
  font-weight: 800;
}

.staff-avatar.large {
  width: 46px;
  height: 46px;
  font-size: .82rem;
}

.staff-row-identity,
.staff-row-branches,
.staff-row-access {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.staff-row-identity strong,
.staff-row-branches strong,
.staff-row-access strong {
  overflow: hidden;
  color: var(--fp-navy);
  font-size: .72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.staff-row-identity small,
.staff-row-branches small,
.staff-row-access small,
.staff-row-access em {
  overflow: hidden;
  color: var(--fp-text-secondary);
  font-size: .59rem;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.staff-row-access em {
  color: var(--fp-primary-strong);
}

.staff-status-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 25px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: .6rem;
  font-weight: 760;
  white-space: nowrap;
}

.staff-status-chip.active {
  background: var(--fp-success-soft);
  color: var(--fp-success);
}

.staff-status-chip.disabled {
  background: var(--fp-danger-soft);
  color: var(--fp-danger);
}

.staff-status-chip.warning {
  background: var(--fp-warning-soft);
  color: var(--fp-warning);
}

.staff-row-menu-wrap {
  position: relative;
  display: grid;
  place-items: center;
  padding-right: 10px;
}

.staff-menu-button {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--fp-text-secondary);
  font-size: 1.2rem;
  line-height: 1;
}

.staff-menu-button:hover {
  background: var(--fp-background);
  color: var(--fp-navy);
}

.staff-row-menu {
  position: absolute;
  z-index: 52;
  top: 44px;
  right: 8px;
  width: 170px;
  overflow: hidden;
  border: 1px solid var(--fp-border);
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 16px 34px rgba(23, 36, 58, .15);
}

.staff-row-menu button {
  width: 100%;
  min-height: 37px;
  border: 0;
  padding: 8px 11px;
  background: #fff;
  color: var(--fp-navy);
  text-align: left;
  font-size: .68rem;
  font-weight: 650;
}

.staff-row-menu button:hover {
  background: var(--fp-background);
}

.staff-row-menu button.danger {
  color: var(--fp-danger);
}

.staff-menu-backdrop {
  position: fixed;
  z-index: 51;
  inset: 0;
  border: 0;
  background: transparent;
  cursor: default;
}

.staff-empty-state {
  min-height: 330px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 9px;
  padding: 28px 18px;
  text-align: center;
}

.staff-empty-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: var(--fp-primary-soft);
  color: var(--fp-primary);
}

.staff-empty-icon .icon {
  width: 25px;
  height: 25px;
}

.staff-empty-state h3 {
  margin: 3px 0 0;
  color: var(--fp-navy);
  font-size: .92rem;
}

.staff-empty-state p {
  max-width: 440px;
  margin: 0;
  color: var(--fp-text-secondary);
  font-size: .67rem;
}

.staff-empty-state .staff-primary-button {
  margin-top: 6px;
}

.staff-empty-cues {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 13px;
}

.staff-empty-cues span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 8px;
  border: 1px solid var(--fp-border);
  border-radius: 999px;
  color: var(--fp-text-secondary);
  font-size: .57rem;
}

.staff-empty-cues .icon {
  width: 13px;
  height: 13px;
  color: var(--fp-primary);
}

.staff-empty-cues strong {
  color: var(--fp-navy);
}

.staff-modal-shell,
.staff-pin-modal {
  position: fixed;
  z-index: 70;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
}

.staff-modal-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(15, 29, 45, .44);
  backdrop-filter: blur(2px);
}

.staff-modal-card {
  position: relative;
  z-index: 1;
  width: min(980px, 100%);
  max-height: min(900px, calc(100vh - 48px));
  overflow: auto;
  border: 1px solid var(--fp-border);
  border-radius: 18px;
  background: var(--fp-background);
  box-shadow: 0 26px 70px rgba(15, 29, 45, .2);
}

.staff-modal-header {
  position: sticky;
  z-index: 4;
  top: 0;
  min-height: 74px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--fp-border);
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(12px);
}

.staff-modal-header h1 {
  font-size: 1rem;
}

.staff-modal-close {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--fp-navy);
  font-size: 1.2rem;
}

.staff-modal-close:hover {
  background: var(--fp-background);
}

.staff-access-form {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.staff-form-section {
  padding: 14px;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-card-radius);
  background: #fff;
}

.staff-form-section-heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  margin-bottom: 12px;
}

.staff-form-section-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--fp-primary-soft);
  color: var(--fp-primary);
}

.staff-form-section-icon .icon {
  width: 17px;
  height: 17px;
}

.staff-form-section-heading h2 {
  margin: 0;
  color: var(--fp-navy);
  font-size: .82rem;
}

.staff-form-section-heading p {
  margin: 2px 0 0;
  color: var(--fp-text-secondary);
  font-size: .59rem;
}

.staff-form-grid {
  display: grid;
  gap: 10px;
}

.staff-form-grid.two-column {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.staff-form-grid.two-column > :first-child:last-child {
  grid-column: 1 / -1;
}

.staff-premium-field {
  min-width: 0;
  display: grid;
  gap: 5px;
  color: var(--fp-navy);
  font-size: .65rem;
  font-weight: 700;
}

.staff-premium-field > span em {
  color: var(--fp-danger);
  font-style: normal;
}

.staff-input-shell {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-control-radius);
  padding: 0 10px;
  background: #fff;
}

.staff-input-shell input {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  border: 0;
  outline: 0;
  padding: 0;
  background: transparent;
  color: var(--fp-navy);
  font-size: .72rem;
}

.staff-input-shell:focus-within {
  border-color: var(--fp-primary);
  box-shadow: 0 0 0 3px rgba(33, 117, 199, .1);
}

.staff-branch-grid,
.staff-role-selector,
.staff-permission-grid {
  display: grid;
  gap: 8px;
}

.staff-branch-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.staff-role-selector {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.staff-permission-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.staff-choice-card,
.staff-role-option {
  min-width: 0;
  min-height: 62px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  border: 1px solid var(--fp-border);
  border-radius: 11px;
  padding: 10px;
  background: #fff;
  color: var(--fp-navy);
  text-align: left;
}

.staff-choice-card {
  position: relative;
  cursor: pointer;
}

.staff-choice-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.staff-choice-card:hover,
.staff-role-option:hover {
  border-color: #b9d3eb;
  background: #fbfdff;
}

.staff-choice-card.selected,
.staff-role-option.selected {
  border-color: var(--fp-primary);
  background: var(--fp-primary-soft);
  box-shadow: inset 0 0 0 1px rgba(33, 117, 199, .08);
}

.staff-choice-icon {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--fp-background);
  color: var(--fp-primary);
}

.staff-choice-card.selected .staff-choice-icon,
.staff-role-option.selected .staff-choice-icon {
  background: #fff;
}

.staff-choice-icon .icon {
  width: 15px;
  height: 15px;
}

.staff-choice-card strong,
.staff-choice-card small,
.staff-role-option strong,
.staff-role-option small {
  display: block;
}

.staff-choice-card strong,
.staff-role-option strong {
  color: var(--fp-navy);
  font-size: .67rem;
}

.staff-choice-card small,
.staff-role-option small {
  margin-top: 2px;
  color: var(--fp-text-secondary);
  font-size: .55rem;
}

.staff-permission-item {
  position: relative;
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--fp-border);
  border-radius: 9px;
  padding: 8px 9px;
  background: #fff;
  color: var(--fp-text-secondary);
  font-size: .61rem;
  font-weight: 680;
  cursor: pointer;
}

.staff-permission-item input {
  width: 15px;
  height: 15px;
  accent-color: var(--fp-primary);
}

.staff-permission-item.selected {
  border-color: #bfd8ef;
  background: var(--fp-primary-soft);
  color: var(--fp-primary-strong);
}

.staff-pin-help,
.staff-inline-error,
.staff-muted-copy {
  margin: 8px 0 0;
  font-size: .6rem;
  line-height: 1.45;
}

.staff-pin-help,
.staff-muted-copy {
  color: var(--fp-text-secondary);
}

.staff-inline-error {
  min-height: .9em;
  color: var(--fp-danger);
}

.staff-edit-integrity {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid #c8e1f5;
  border-radius: 11px;
  background: var(--fp-primary-soft);
}

.staff-edit-integrity > .icon {
  width: 18px;
  height: 18px;
  color: var(--fp-primary);
}

.staff-edit-integrity strong,
.staff-edit-integrity small {
  display: block;
}

.staff-edit-integrity strong {
  color: var(--fp-primary-strong);
  font-size: .66rem;
}

.staff-edit-integrity small {
  margin-top: 2px;
  color: var(--fp-text-secondary);
  font-size: .57rem;
}

.staff-form-actions {
  position: sticky;
  bottom: 0;
  z-index: 3;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 0 max(2px, env(safe-area-inset-bottom));
  background: var(--fp-background);
}

.staff-form-actions .staff-primary-button,
.staff-form-actions .staff-secondary-button {
  min-width: 112px;
}

.staff-detail-header {
  min-height: 54px;
}

.staff-back-button {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  border-radius: 9px;
  padding: 7px 9px;
  background: transparent;
  color: var(--fp-primary-strong);
  font-size: .68rem;
  font-weight: 720;
}

.staff-back-button:hover {
  background: var(--fp-primary-soft);
}

.staff-detail-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.staff-detail-title h1 {
  font-size: 1.05rem;
}

.staff-detail-header > .staff-status-chip {
  margin-left: auto;
}

.staff-detail-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.staff-detail-summary article {
  min-height: 82px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 12px;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-card-radius);
  background: #fff;
  box-shadow: var(--fp-shadow);
}

.staff-detail-summary-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--fp-primary-soft);
  color: var(--fp-primary);
}

.staff-detail-summary-icon .icon {
  width: 16px;
  height: 16px;
}

.staff-detail-summary small,
.staff-detail-summary strong {
  display: block;
}

.staff-detail-summary small {
  color: var(--fp-text-secondary);
  font-size: .58rem;
}

.staff-detail-summary strong {
  margin-top: 3px;
  color: var(--fp-navy);
  font-size: .75rem;
}

.staff-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
  gap: 12px;
}

.staff-detail-pairs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--fp-border);
}

.staff-detail-pairs > div {
  min-width: 0;
  padding: 11px 13px;
  background: #fff;
}

.staff-detail-pairs span,
.staff-detail-pairs strong {
  display: block;
}

.staff-detail-pairs span {
  color: var(--fp-text-secondary);
  font-size: .58rem;
}

.staff-detail-pairs strong {
  margin-top: 3px;
  overflow-wrap: anywhere;
  color: var(--fp-navy);
  font-size: .68rem;
}

.staff-assigned-list,
.staff-permission-readonly,
.staff-security-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 13px;
}

.staff-assigned-list span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 9px;
  border: 1px solid var(--fp-border);
  border-radius: 9px;
  color: var(--fp-navy);
  font-size: .63rem;
}

.staff-assigned-list .icon {
  width: 14px;
  height: 14px;
  color: var(--fp-primary);
}

.staff-permission-readonly span {
  padding: 6px 8px;
  border-radius: 8px;
  background: var(--fp-primary-soft);
  color: var(--fp-primary-strong);
  font-size: .59rem;
  font-weight: 690;
}

.staff-detail-card > .staff-muted-copy {
  padding: 0 14px 14px;
}

.staff-audit-list {
  display: grid;
}

.staff-audit-list article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  padding: 10px 13px;
  border-top: 1px solid #edf1f6;
}

.staff-audit-list article:first-child {
  border-top: 0;
}

.staff-audit-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--fp-background);
  color: var(--fp-primary);
}

.staff-audit-icon .icon {
  width: 14px;
  height: 14px;
}

.staff-audit-list strong,
.staff-audit-list small,
.staff-audit-list time {
  display: block;
}

.staff-audit-list strong {
  color: var(--fp-navy);
  font-size: .65rem;
}

.staff-audit-list small,
.staff-audit-list time {
  color: var(--fp-text-secondary);
  font-size: .56rem;
}

.staff-pin-modal {
  z-index: 82;
}

.staff-pin-card {
  position: relative;
  z-index: 1;
  width: min(520px, 100%);
  overflow: hidden;
  border: 1px solid var(--fp-border);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(15, 29, 45, .22);
}

.staff-pin-card > header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 13px 14px;
  border-bottom: 1px solid var(--fp-border);
}

.staff-pin-card h2 {
  margin: 0;
  color: var(--fp-navy);
  font-size: .9rem;
}

.staff-pin-card header p {
  margin: 2px 0 0;
  color: var(--fp-text-secondary);
  font-size: .58rem;
}

.staff-pin-card form {
  display: grid;
  gap: 10px;
  padding: 14px;
}

@media (max-width: 1180px) {
  .staff-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .staff-row-main {
    grid-template-columns: auto minmax(150px, 1fr) minmax(125px, .8fr) auto;
  }

  .staff-row-access {
    grid-column: 2 / 4;
  }

  .staff-role-selector,
  .staff-permission-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .staff-access-workspace,
  .staff-detail-workspace {
    gap: 12px;
  }

  .staff-modal-shell {
    padding: 16px;
  }

  .staff-modal-card {
    max-height: calc(100vh - 32px);
  }

  .staff-detail-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .staff-detail-grid {
    grid-template-columns: 1fr;
  }

  .staff-role-selector,
  .staff-permission-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .staff-access-header {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .staff-access-header .staff-primary-button {
    margin-left: 0;
  }

  .staff-filter-card {
    grid-template-columns: 1fr;
  }

  .staff-profile-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .staff-row-main {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 9px;
    padding: 11px 8px 11px 11px;
  }

  .staff-row-branches,
  .staff-row-access {
    grid-column: 2 / 4;
  }

  .staff-status-chip {
    grid-column: 3;
    grid-row: 1;
  }

  .staff-form-grid.two-column {
    grid-template-columns: 1fr;
  }

  .staff-role-selector,
  .staff-permission-grid,
  .staff-branch-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .staff-detail-header {
    flex-wrap: wrap;
  }

  .staff-detail-header > .staff-status-chip {
    margin-left: 0;
  }

  .staff-detail-header .staff-secondary-button {
    margin-left: auto;
  }

  .staff-detail-pairs {
    grid-template-columns: 1fr;
  }

  .staff-audit-list article {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .staff-audit-list time {
    grid-column: 2;
  }
}

@media (max-width: 520px) {
  .staff-access-title-icon {
    width: 38px;
    height: 38px;
  }

  .staff-access-header h1 {
    font-size: 1.35rem;
  }

  .staff-access-header .staff-primary-button {
    width: 100%;
  }

  .staff-summary-grid {
    grid-template-columns: 1fr 1fr;
  }

  .staff-summary-card {
    min-height: 92px;
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .staff-summary-icon {
    width: 33px;
    height: 33px;
  }

  .staff-summary-card strong {
    font-size: 1.12rem;
  }

  .staff-list-heading {
    align-items: flex-start;
  }

  .staff-row-main {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .staff-row-branches,
  .staff-row-access {
    grid-column: 2;
  }

  .staff-status-chip {
    grid-column: 2;
    grid-row: auto;
    justify-self: start;
  }

  .staff-row-menu-wrap {
    padding-right: 6px;
  }

  .staff-modal-shell,
  .staff-pin-modal {
    align-items: stretch;
    padding: 0;
  }

  .staff-modal-card,
  .staff-pin-card {
    width: 100%;
    max-height: 100dvh;
    min-height: 100dvh;
    border: 0;
    border-radius: 0;
  }

  .staff-modal-card {
    display: flex;
    flex-direction: column;
  }

  .staff-access-form {
    flex: 1;
    padding: 11px;
    overflow: auto;
  }

  .staff-role-selector,
  .staff-permission-grid,
  .staff-branch-grid {
    grid-template-columns: 1fr;
  }

  .staff-form-actions {
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }

  .staff-form-actions .staff-primary-button,
  .staff-form-actions .staff-secondary-button {
    flex: 1;
    min-width: 0;
  }

  .staff-detail-summary {
    grid-template-columns: 1fr 1fr;
  }

  .staff-detail-header .staff-secondary-button {
    width: 100%;
    margin-left: 0;
  }

  .staff-security-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .staff-security-actions .staff-secondary-button {
    width: 100%;
  }

  .staff-pin-card form {
    flex: 1;
    align-content: start;
  }
}

@media (max-width: 430px) {
  .staff-security-strip {
    align-items: start;
  }

  .staff-summary-grid {
    gap: 8px;
  }

  .staff-summary-card {
    padding: 11px;
  }

  .staff-empty-cues {
    display: grid;
    grid-template-columns: 1fr;
  }

  .staff-empty-cues span {
    justify-content: center;
  }

  .staff-detail-summary {
    grid-template-columns: 1fr;
  }

  .staff-detail-title {
    width: calc(100% - 52px);
  }
}

@media (max-width: 390px) {
  .staff-access-workspace,
  .staff-detail-workspace {
    gap: 10px;
  }

  .staff-filter-card,
  .staff-form-section,
  .staff-access-form {
    padding: 10px;
  }

  .staff-row-main {
    padding-left: 9px;
  }

  .staff-avatar {
    width: 34px;
    height: 34px;
  }

  .staff-form-actions {
    gap: 6px;
  }
}

/* Premium Reports & Analytics Android reference */
.reports-analytics-workspace {
  width: min(1380px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 14px;
}

.reports-analytics-header {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.reports-analytics-heading {
  min-width: 0;
}

.reports-analytics-heading h1 {
  margin: 0;
  color: var(--fp-navy);
  font-size: clamp(1.5rem, 2vw, 1.95rem);
  letter-spacing: -.035em;
}

.reports-analytics-heading p {
  margin: 4px 0 0;
  color: var(--fp-text-secondary);
  font-size: .72rem;
}

.reports-header-actions {
  position: relative;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.reports-export-wrap {
  position: relative;
  z-index: 61;
}

.reports-export-button,
.reports-apply-button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--fp-primary);
  border-radius: var(--fp-control-radius);
  padding: 8px 13px;
  background: var(--fp-primary);
  color: #fff;
  font-size: .72rem;
  font-weight: 760;
}

.reports-export-button:hover,
.reports-apply-button:hover {
  border-color: var(--fp-primary-strong);
  background: var(--fp-primary-strong);
}

.reports-export-button .icon {
  width: 16px;
  height: 16px;
}

.reports-scope-select {
  min-height: 42px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-control-radius);
  padding: 0 9px;
  background: #fff;
  color: var(--fp-primary);
}

.reports-scope-select .icon {
  width: 15px;
  height: 15px;
}

.reports-scope-select select {
  min-width: 165px;
  min-height: 40px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--fp-navy);
  font-size: .7rem;
  font-weight: 680;
}

.reports-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.reports-period-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-card-radius);
  background: #fff;
  box-shadow: var(--fp-shadow);
}

.reports-period-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  padding: 4px;
  border: 1px solid #d8e3ee;
  border-radius: 11px;
  background: var(--fp-background);
}

.reports-period-tabs button {
  min-height: 37px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--fp-navy);
  font-size: .68rem;
  font-weight: 720;
}

.reports-period-tabs button:hover {
  background: #eef5fb;
}

.reports-period-tabs button.active {
  background: var(--fp-primary);
  color: #fff;
}

.reports-more-period {
  display: grid;
  gap: 3px;
  color: var(--fp-text-secondary);
  font-size: .56rem;
  font-weight: 700;
}

.reports-more-period select {
  min-width: 150px;
  min-height: 39px;
  border: 1px solid var(--fp-border);
  border-radius: 10px;
  padding: 7px 9px;
  background: #fff;
  color: var(--fp-navy);
  font-size: .68rem;
  outline: 0;
}

.reports-custom-range {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(160px, 1fr) auto;
  gap: 8px;
  align-items: end;
  padding-top: 2px;
}

.reports-custom-range label {
  display: grid;
  gap: 4px;
  color: var(--fp-text-secondary);
  font-size: .58rem;
  font-weight: 700;
}

.reports-custom-range input {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--fp-border);
  border-radius: 9px;
  padding: 7px 9px;
  background: #fff;
  color: var(--fp-navy);
  font-size: .68rem;
  outline: 0;
}

.reports-export-menu {
  position: absolute;
  z-index: 63;
  top: 49px;
  right: 0;
  width: min(360px, calc(100vw - 36px));
  overflow: hidden;
  border: 1px solid var(--fp-border);
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 20px 44px rgba(15, 29, 45, .18);
}

.reports-export-menu-heading {
  padding: 11px 12px;
  border-bottom: 1px solid var(--fp-border);
}

.reports-export-menu-heading strong,
.reports-export-menu-heading span {
  display: block;
}

.reports-export-menu-heading strong {
  color: var(--fp-navy);
  font-size: .72rem;
}

.reports-export-menu-heading span,
.reports-export-menu > p {
  margin-top: 2px;
  color: var(--fp-text-secondary);
  font-size: .58rem;
}

.reports-export-menu > p {
  padding: 10px 12px;
}

.reports-export-menu-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 6px;
  align-items: center;
  padding: 8px 10px;
  border-top: 1px solid #edf1f6;
}

.reports-export-menu-row:first-of-type {
  border-top: 0;
}

.reports-export-menu-row > span {
  min-width: 0;
  overflow: hidden;
  color: var(--fp-navy);
  font-size: .64rem;
  font-weight: 670;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reports-export-menu-row button {
  min-height: 30px;
  border: 1px solid var(--fp-border);
  border-radius: 8px;
  padding: 5px 8px;
  background: #fff;
  color: var(--fp-primary-strong);
  font-size: .58rem;
  font-weight: 720;
}

.reports-export-menu-row button:hover {
  border-color: #b7cfe6;
  background: var(--fp-primary-soft);
}

.reports-export-backdrop {
  position: fixed;
  z-index: 60;
  inset: 0;
  border: 0;
  background: transparent;
  cursor: default;
}

.reports-overview {
  display: grid;
  gap: 12px;
}

.reports-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.reports-kpi-card {
  min-height: 132px;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 14px;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-card-radius);
  background: #fff;
  box-shadow: var(--fp-shadow);
}

.reports-kpi-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  margin-bottom: 2px;
  border-radius: 9px;
  background: var(--fp-primary-soft);
  color: var(--fp-primary);
}

.reports-kpi-card.success .reports-kpi-icon {
  background: var(--fp-success-soft);
  color: var(--fp-success);
}

.reports-kpi-card.danger .reports-kpi-icon {
  background: var(--fp-danger-soft);
  color: var(--fp-danger);
}

.reports-kpi-card.warning .reports-kpi-icon {
  background: var(--fp-warning-soft);
  color: var(--fp-warning);
}

.reports-kpi-icon .icon {
  width: 16px;
  height: 16px;
}

.reports-kpi-card > span {
  color: var(--fp-text-secondary);
  font-size: .64rem;
}

.reports-kpi-card > strong {
  color: var(--fp-navy);
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  line-height: 1.08;
  font-variant-numeric: tabular-nums;
}

.reports-kpi-card > small {
  color: var(--fp-text-secondary);
  font-size: .57rem;
  line-height: 1.35;
}

.reports-analytics-card {
  overflow: hidden;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-card-radius);
  background: #fff;
  box-shadow: var(--fp-shadow);
}

.reports-trend-card {
  min-height: 210px;
}

.reports-card-heading {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 13px;
  border-bottom: 1px solid #edf1f6;
}

.reports-card-title {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.reports-card-title > .icon {
  width: 17px;
  height: 17px;
  color: var(--fp-primary);
}

.reports-card-title h2,
.reports-card-title div h2 {
  margin: 0;
  color: var(--fp-navy);
  font-size: .78rem;
}

.reports-card-title div p {
  margin: 2px 0 0;
  color: var(--fp-text-secondary);
  font-size: .56rem;
}

.reports-card-meta {
  color: var(--fp-text-secondary);
  font-size: .58rem;
  white-space: nowrap;
}

.reports-trend-list,
.reports-compact-list {
  display: grid;
}

.reports-trend-row {
  display: grid;
  grid-template-columns: minmax(90px, .45fr) minmax(130px, .7fr) minmax(170px, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 44px;
  padding: 8px 13px;
  border-bottom: 1px solid #edf1f6;
}

.reports-trend-row:last-child {
  border-bottom: 0;
}

.reports-trend-row > span {
  color: var(--fp-navy);
  font-size: .63rem;
}

.reports-trend-row > strong {
  color: var(--fp-navy);
  font-size: .68rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.reports-trend-row > small {
  color: var(--fp-text-secondary);
  font-size: .57rem;
  text-align: right;
}

.reports-insight-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

.reports-compact-list > div {
  min-height: 49px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 13px;
  border-bottom: 1px solid #edf1f6;
}

.reports-compact-list > div:last-child {
  border-bottom: 0;
}

.reports-compact-list span {
  min-width: 0;
}

.reports-compact-list strong,
.reports-compact-list small {
  display: block;
}

.reports-compact-list strong {
  overflow: hidden;
  color: var(--fp-navy);
  font-size: .65rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reports-compact-list small {
  margin-top: 2px;
  color: var(--fp-text-secondary);
  font-size: .56rem;
}

.reports-compact-list em {
  flex: 0 0 auto;
  color: var(--fp-navy);
  font-size: .63rem;
  font-style: normal;
  font-weight: 690;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.reports-value-stack {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.reports-value-stack > span {
  min-width: 0;
  padding: 14px 13px;
  border-right: 1px solid #edf1f6;
}

.reports-value-stack > span:last-child {
  border-right: 0;
}

.reports-value-stack strong,
.reports-value-stack small {
  display: block;
}

.reports-value-stack strong {
  color: var(--fp-navy);
  font-size: .78rem;
}

.reports-value-stack small {
  margin-top: 3px;
  color: var(--fp-text-secondary);
  font-size: .55rem;
  line-height: 1.35;
}

.reports-policy-value strong {
  color: var(--fp-primary-strong);
}

.reports-card-empty {
  min-height: 92px;
  display: grid;
  place-items: center;
  padding: 16px;
  color: var(--fp-text-secondary);
  font-size: .62rem;
  text-align: center;
}

.reports-detail-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
  padding-top: 6px;
}

.reports-detail-heading h2 {
  margin: 0;
  color: var(--fp-navy);
  font-size: 1rem;
}

.reports-detail-heading p {
  margin: 3px 0 0;
  color: var(--fp-text-secondary);
  font-size: .63rem;
}

.reports-detail-stack {
  display: grid;
  gap: 12px;
}

.reports-detail-stack > .report-section {
  margin-bottom: 0;
  padding: 14px;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-card-radius);
  background: #fff;
  box-shadow: var(--fp-shadow);
}

.reports-detail-stack .report-section-heading {
  margin-bottom: 11px;
}

.reports-detail-stack .report-section-heading h2 {
  font-size: .9rem;
}

.reports-detail-stack .report-section-heading p {
  font-size: .64rem;
}

.reports-detail-stack .report-metric-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.reports-detail-stack .report-metric-card {
  min-height: 84px;
  gap: 4px;
  padding: 11px;
  border-radius: 11px;
  box-shadow: none;
}

.reports-detail-stack .report-metric-card span {
  font-size: .58rem;
}

.reports-detail-stack .report-metric-card strong {
  font-size: .86rem;
}

.reports-detail-stack .report-breakdown-grid {
  gap: 10px;
}

.reports-detail-stack .report-breakdown-card {
  border-radius: 11px;
  box-shadow: none;
}

.reports-detail-stack .panel-header {
  padding: 11px 12px;
}

.reports-detail-stack .report-table th,
.reports-detail-stack .report-table td {
  padding: 8px 9px;
  font-size: .64rem;
}

@media (max-width: 1180px) {
  .reports-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .reports-detail-stack .report-metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .reports-value-stack {
    grid-template-columns: 1fr 1fr;
  }

  .reports-value-stack > span {
    border-bottom: 1px solid #edf1f6;
  }

  .reports-value-stack > span:nth-child(2) {
    border-right: 0;
  }

  .reports-value-stack > span:last-child {
    grid-column: 1 / -1;
    border-bottom: 0;
  }
}

@media (max-width: 900px) {
  .reports-analytics-header {
    align-items: flex-start;
  }

  .reports-header-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .reports-insight-grid {
    grid-template-columns: 1fr;
  }

  .reports-detail-stack .report-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* Clean white owner access, login, signup and business setup */
.reference-access-page,
.reference-access-page.setup-mode {
  min-height: 100dvh;
  display: block;
  overflow-x: hidden;
  overflow-y: auto;
  background: #fff;
}

.reference-access-page .reference-access-left {
  width: 100%;
  min-height: 100dvh;
  overflow: visible;
  border: 0;
  background: #fff;
}

.reference-access-page .reference-access-scroll,
.reference-access-page.setup-mode .reference-access-scroll {
  width: 100%;
  height: auto;
  min-height: 100dvh;
  overflow: visible;
  padding: 30px clamp(22px, 5vw, 72px) 68px;
}

.reference-access-page .reference-brand-row {
  width: min(1180px, 100%);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: 0 auto clamp(72px, 11vh, 118px);
}

.reference-access-page.setup-mode .reference-brand-row {
  margin-bottom: 42px;
}

.reference-access-page .reference-brand {
  transform: none;
}

.reference-access-page .reference-brand img {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: transparent;
}

.reference-access-page .reference-brand strong {
  font-size: 1.25rem;
}

.reference-access-page .reference-brand small {
  font-size: .72rem;
}

.reference-account-action {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  color: #718096;
  font-size: .72rem;
}

.reference-account-action button {
  border: 0;
  padding: 6px 3px;
  background: transparent;
  color: #126fd4;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.reference-access-page .reference-login-copy,
.reference-access-page .reference-auth-tabs,
.reference-access-page .reference-auth-form,
.reference-access-page .reference-recaptcha,
.reference-access-page .reference-divider,
.reference-access-page .reference-email-shortcut,
.reference-access-page .reference-new-account,
.reference-access-page .reference-trust-grid,
.reference-access-page .reference-legal,
.reference-access-page .reference-access-message,
.reference-access-page .reference-blocked,
.reference-access-page .reference-success-icon,
.reference-access-page .reference-inline-actions,
.reference-access-page .reference-support-footer {
  width: min(460px, 100%);
  margin-left: auto;
  margin-right: auto;
}

.reference-access-page .reference-login-copy {
  margin-bottom: 26px;
  text-align: left;
}

.reference-access-page .reference-login-copy.centered {
  text-align: center;
}

.reference-access-page .reference-login-copy h1,
.reference-access-page .reference-login-copy.compact h1 {
  color: #15213d;
  font-size: clamp(1.9rem, 3vw, 2.35rem);
  line-height: 1.12;
  letter-spacing: -.035em;
}

.reference-access-page .reference-login-copy p {
  width: 100%;
  max-width: none;
  margin: 8px 0 0;
  color: #7a879d;
  font-size: .78rem;
}

.reference-access-page .reference-auth-tabs {
  margin-top: 0;
  margin-bottom: 20px;
}

.reference-access-page .reference-phone-control,
.reference-access-page .reference-email-input,
.reference-access-page .reference-code-input {
  min-height: 52px;
}

.reference-access-page .reference-primary-button {
  min-height: 50px;
  margin-top: 8px;
  border-radius: 9px;
  box-shadow: none;
}

.reference-access-page .reference-trust-grid {
  margin-top: 28px;
}

.reference-access-page .reference-trust-grid > div {
  border: 1px solid #edf1f6;
  background: #fbfdff;
}

.reference-access-page .reference-legal {
  margin-top: 24px;
}

.reference-access-page .reference-skyline,
.reference-access-page .reference-world-copy,
.reference-access-page .reference-access-showcase {
  display: none;
}

.reference-access-page.setup-mode .reference-setup-heading,
.reference-access-page.setup-mode .reference-setup-progress,
.reference-access-page.setup-mode .reference-setup-form,
.reference-access-page.setup-mode .reference-support-footer {
  width: min(720px, 100%);
  margin-left: auto;
  margin-right: auto;
}

.reference-access-page.setup-mode .reference-setup-heading h1 {
  font-size: clamp(1.9rem, 3vw, 2.35rem);
}

.reference-access-page.setup-mode .reference-setup-form {
  padding: 24px;
  border: 1px solid #e4eaf2;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(15, 48, 90, .07);
}

@media (max-width: 620px) {
  .reference-access-page .reference-access-scroll,
  .reference-access-page.setup-mode .reference-access-scroll {
    padding: 22px 18px 48px;
  }

  .reference-access-page .reference-brand-row {
    align-items: flex-start;
    margin-bottom: 52px;
  }

  .reference-access-page.setup-mode .reference-brand-row {
    margin-bottom: 34px;
  }

  .reference-access-page .reference-brand img {
    width: 46px;
    height: 46px;
  }

  .reference-account-action {
    max-width: 132px;
    flex-wrap: wrap;
    justify-content: flex-end;
    text-align: right;
    font-size: .66rem;
  }

  .reference-access-page .reference-login-copy {
    margin-bottom: 22px;
  }

  .reference-access-page .reference-login-copy h1,
  .reference-access-page .reference-login-copy.compact h1 {
    font-size: 1.85rem;
  }

  .reference-access-page .reference-trust-grid,
  .reference-access-page.setup-mode .reference-form-grid,
  .reference-access-page.setup-mode .reference-setup-progress {
    grid-template-columns: 1fr;
  }

  .reference-access-page.setup-mode .reference-setup-form {
    padding: 17px;
  }

  .reference-access-page.setup-mode .reference-field.full {
    grid-column: auto;
  }
}

@media (max-width: 720px) {
  .reports-analytics-header {
    flex-wrap: wrap;
  }

  .reports-header-actions {
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
  }

  .reports-scope-select {
    flex: 1;
  }

  .reports-scope-select select {
    min-width: 0;
    width: 100%;
  }

  .reports-period-card {
    grid-template-columns: 1fr;
  }

  .reports-more-period {
    width: 100%;
  }

  .reports-more-period select {
    width: 100%;
  }

  .reports-custom-range {
    grid-column: auto;
    grid-template-columns: 1fr 1fr;
  }

  .reports-custom-range .reports-apply-button {
    grid-column: 1 / -1;
  }

  .reports-trend-row {
    grid-template-columns: minmax(76px, .45fr) minmax(100px, .65fr);
  }

  .reports-trend-row > small {
    grid-column: 1 / -1;
    text-align: left;
  }
}

@media (max-width: 520px) {
  .reports-header-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .reports-export-button,
  .reports-scope-select {
    width: 100%;
  }

  .reports-export-menu {
    left: 0;
    right: auto;
  }

  .reports-kpi-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .reports-kpi-card {
    min-height: 114px;
    padding: 11px;
  }

  .reports-period-tabs button {
    min-height: 39px;
    padding: 7px 4px;
    font-size: .62rem;
  }

  .reports-custom-range {
    grid-template-columns: 1fr;
  }

  .reports-custom-range .reports-apply-button {
    grid-column: auto;
    width: 100%;
  }

  .reports-value-stack {
    grid-template-columns: 1fr;
  }

  .reports-value-stack > span,
  .reports-value-stack > span:nth-child(2) {
    border-right: 0;
    border-bottom: 1px solid #edf1f6;
  }

  .reports-value-stack > span:last-child {
    grid-column: auto;
    border-bottom: 0;
  }

  .reports-detail-stack .report-metric-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 430px) {
  .reports-header-actions {
    grid-template-columns: 1fr;
  }

  .reports-kpi-grid {
    grid-template-columns: 1fr 1fr;
  }

  .reports-kpi-card > strong {
    font-size: 1.05rem;
  }

  .reports-period-tabs {
    gap: 3px;
    padding: 3px;
  }

  .reports-card-heading {
    align-items: flex-start;
  }

  .reports-card-meta {
    white-space: normal;
    text-align: right;
  }

  .reports-compact-list > div {
    align-items: flex-start;
  }
}

@media (max-width: 390px) {
  .reports-analytics-workspace {
    gap: 10px;
  }

  .reports-period-card,
  .reports-detail-stack > .report-section {
    padding: 10px;
  }

  .reports-kpi-grid {
    grid-template-columns: 1fr;
  }

  .reports-detail-stack .report-metric-grid {
    grid-template-columns: 1fr;
  }

  .reports-trend-row {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .reports-trend-row > strong,
  .reports-trend-row > small {
    text-align: left;
  }

  .reports-trend-row > small {
    grid-column: auto;
  }
}

/* Premium Branch Management Android reference */
.branch-management-workspace {
  width: min(1380px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 14px;
}

.branch-management-header {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-card-radius);
  background: #fff;
  box-shadow: var(--fp-shadow);
}

.branch-management-heading {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
}

.branch-title-icon,
.branch-hero-icon,
.branch-editor-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 11px;
  background: var(--fp-primary);
  color: #fff;
}

.branch-title-icon .icon,
.branch-hero-icon .icon,
.branch-editor-icon .icon {
  width: 20px;
  height: 20px;
}

.branch-management-heading h1,
.branch-hero-title h2,
.branch-editor-header h2 {
  margin: 0;
  color: var(--fp-navy);
  letter-spacing: -.03em;
}

.branch-management-heading h1 {
  font-size: clamp(1.45rem, 2vw, 1.9rem);
}

.branch-management-heading p,
.branch-hero-title p,
.branch-editor-header p {
  margin: 3px 0 0;
  color: var(--fp-text-secondary);
  font-size: .7rem;
}

.branch-header-context {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.branch-current-chip {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 260px;
  padding: 7px 10px;
  border: 1px solid var(--fp-border);
  border-radius: 10px;
  background: #fff;
  color: var(--fp-navy);
}

.branch-current-chip .icon {
  width: 15px;
  height: 15px;
  color: var(--fp-primary);
}

.branch-current-chip strong {
  overflow: hidden;
  font-size: .68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.branch-message {
  padding: 10px 12px;
  border: 1px solid #c8e1f5;
  border-radius: var(--fp-control-radius);
  background: var(--fp-primary-soft);
  color: var(--fp-primary-strong);
  font-size: .68rem;
}

.branch-overview-hero {
  padding: 14px;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-card-radius);
  background: #fff;
  box-shadow: var(--fp-shadow);
}

.branch-hero-top {
  display: flex;
  align-items: center;
  gap: 14px;
}

.branch-hero-title {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
}

.branch-hero-title h2 {
  font-size: 1.12rem;
}

.branch-hero-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.branch-primary-button,
.branch-secondary-button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: var(--fp-control-radius);
  padding: 8px 13px;
  font-size: .7rem;
  font-weight: 760;
}

.branch-primary-button {
  border: 1px solid var(--fp-primary);
  background: var(--fp-primary);
  color: #fff;
}

.branch-primary-button:hover {
  border-color: var(--fp-primary-strong);
  background: var(--fp-primary-strong);
}

.branch-primary-button:disabled,
.branch-secondary-button:disabled {
  opacity: .45;
  cursor: default;
}

.branch-primary-button.compact {
  min-height: 36px;
  padding: 6px 11px;
}

.branch-secondary-button {
  border: 1px solid var(--fp-border);
  background: #fff;
  color: var(--fp-navy);
}

.branch-secondary-button:hover {
  border-color: #b7cbe0;
  background: #fafdff;
}

.branch-secondary-button.danger {
  border-color: #efc7c7;
  background: var(--fp-danger-soft);
  color: var(--fp-danger);
}

.branch-secondary-button .icon {
  width: 15px;
  height: 15px;
  color: var(--fp-primary);
}

.branch-hero-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin-top: 13px;
}

.branch-mini-metric {
  min-height: 88px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  padding: 11px;
  border: 1px solid var(--fp-border);
  border-radius: 11px;
  background: #fbfdff;
}

.branch-mini-icon,
.branch-dashboard-icon,
.branch-card-icon,
.branch-directory-icon,
.branch-form-icon {
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--fp-primary-soft);
  color: var(--fp-primary);
}

.branch-mini-icon {
  width: 31px;
  height: 31px;
}

.branch-mini-icon .icon,
.branch-dashboard-icon .icon,
.branch-card-icon .icon,
.branch-directory-icon .icon,
.branch-form-icon .icon {
  width: 15px;
  height: 15px;
}

.branch-mini-metric strong,
.branch-mini-metric span,
.branch-mini-metric small {
  display: block;
}

.branch-mini-metric strong {
  color: var(--fp-navy);
  font-size: .88rem;
}

.branch-mini-metric span {
  margin-top: 1px;
  color: var(--fp-navy);
  font-size: .59rem;
  font-weight: 700;
}

.branch-mini-metric small {
  margin-top: 2px;
  color: var(--fp-text-secondary);
  font-size: .53rem;
}

.branch-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  padding: 5px;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-card-radius);
  background: #fff;
  box-shadow: var(--fp-shadow);
}

.branch-tabs button,
.branch-tabs a {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  border-radius: 9px;
  padding: 7px 10px;
  background: transparent;
  color: var(--fp-text-secondary);
  font-size: .66rem;
  font-weight: 720;
  text-decoration: none;
}

.branch-tabs button:hover,
.branch-tabs a:hover {
  background: #f5f9fd;
  color: var(--fp-primary-strong);
}

.branch-tabs button.active {
  background: var(--fp-primary-soft);
  color: var(--fp-primary-strong);
  box-shadow: inset 0 0 0 1px #c4dcf1;
}

.branch-tabs .icon {
  width: 15px;
  height: 15px;
}

.branch-dashboard-workspace {
  display: grid;
  gap: 12px;
}

.branch-dashboard-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.branch-dashboard-metric {
  min-height: 112px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-card-radius);
  background: #fff;
  box-shadow: var(--fp-shadow);
}

.branch-dashboard-metric span,
.branch-dashboard-metric strong,
.branch-dashboard-metric small {
  display: block;
}

.branch-dashboard-metric > div > span {
  color: var(--fp-text-secondary);
  font-size: .62rem;
}

.branch-dashboard-metric > div > strong {
  margin-top: 4px;
  color: var(--fp-navy);
  font-size: 1.25rem;
  line-height: 1.08;
}

.branch-dashboard-metric > div > small {
  margin-top: 5px;
  color: var(--fp-text-secondary);
  font-size: .55rem;
}

.branch-dashboard-icon {
  width: 38px;
  height: 38px;
}

.branch-dashboard-metric.success .branch-dashboard-icon {
  background: var(--fp-success-soft);
  color: var(--fp-success);
}

.branch-dashboard-metric.warning .branch-dashboard-icon {
  background: var(--fp-warning-soft);
  color: var(--fp-warning);
}

.branch-dashboard-metric.violet .branch-dashboard-icon {
  background: #f1ecff;
  color: #6741d9;
}

.branch-network-card,
.branch-directory-card,
.branch-panel-card {
  overflow: hidden;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-card-radius);
  background: #fff;
  box-shadow: var(--fp-shadow);
}

.branch-card-heading {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid #edf1f6;
}

.branch-card-heading h2,
.branch-card-heading h3 {
  margin: 0;
  color: var(--fp-navy);
  font-size: .82rem;
}

.branch-card-heading p {
  margin: 2px 0 0;
  color: var(--fp-text-secondary);
  font-size: .57rem;
}

.branch-card-icon {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
}

.branch-ranking-list,
.branch-directory-list,
.branch-transfer-list {
  display: grid;
}

.branch-ranking-row {
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr) minmax(140px, .45fr) auto;
  gap: 11px;
  align-items: center;
  min-height: 66px;
  padding: 10px 13px;
  border-bottom: 1px solid #edf1f6;
}

.branch-ranking-row:last-child {
  border-bottom: 0;
}

.branch-rank {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--fp-primary-soft);
  color: var(--fp-primary-strong);
  font-size: .6rem;
  font-weight: 800;
}

.branch-ranking-row:nth-child(1) .branch-rank {
  background: #fff4c7;
  color: #997400;
}

.branch-ranking-row:nth-child(2) .branch-rank {
  background: #edf2f7;
  color: #607086;
}

.branch-ranking-row:nth-child(3) .branch-rank {
  background: #fff0de;
  color: #a55b09;
}

.branch-ranking-main,
.branch-ranking-meta {
  min-width: 0;
}

.branch-ranking-main strong,
.branch-ranking-main small,
.branch-ranking-meta strong,
.branch-ranking-meta small {
  display: block;
}

.branch-ranking-main strong,
.branch-ranking-meta strong {
  overflow: hidden;
  color: var(--fp-navy);
  font-size: .68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.branch-ranking-main small,
.branch-ranking-meta small {
  margin-top: 2px;
  color: var(--fp-text-secondary);
  font-size: .55rem;
}

.branch-ranking-meta {
  text-align: right;
}

.branch-status-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 25px;
  width: fit-content;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: .57rem;
  font-weight: 760;
  white-space: nowrap;
}

.branch-status-chip.active {
  background: var(--fp-success-soft);
  color: var(--fp-success);
}

.branch-status-chip.inactive {
  background: var(--fp-danger-soft);
  color: var(--fp-danger);
}

.branch-directory-row {
  display: grid;
  grid-template-columns: auto minmax(220px, 1.4fr) repeat(3, minmax(80px, .35fr)) auto auto;
  gap: 11px;
  align-items: center;
  min-height: 76px;
  padding: 11px 13px;
  border-bottom: 1px solid #edf1f6;
}

.branch-directory-row:last-child {
  border-bottom: 0;
}

.branch-directory-icon {
  width: 34px;
  height: 34px;
}

.branch-directory-main {
  min-width: 0;
}

.branch-directory-main strong,
.branch-directory-main small,
.branch-directory-main em {
  display: block;
}

.branch-directory-main strong {
  overflow: hidden;
  color: var(--fp-navy);
  font-size: .7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.branch-directory-main small,
.branch-directory-main em {
  overflow: hidden;
  margin-top: 2px;
  color: var(--fp-text-secondary);
  font-size: .54rem;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.branch-directory-count {
  text-align: center;
}

.branch-directory-count strong,
.branch-directory-count small {
  display: block;
}

.branch-directory-count strong {
  color: var(--fp-navy);
  font-size: .7rem;
}

.branch-directory-count small {
  margin-top: 2px;
  color: var(--fp-text-secondary);
  font-size: .52rem;
}

.branch-row-action {
  min-height: 32px;
  border: 1px solid var(--fp-border);
  border-radius: 8px;
  padding: 5px 9px;
  background: #fff;
  color: var(--fp-primary-strong);
  font-size: .58rem;
  font-weight: 720;
}

.branch-row-action:hover {
  border-color: #b8d0e7;
  background: var(--fp-primary-soft);
}

.branch-manager-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  margin: 12px;
  padding: 10px 11px;
  border: 1px solid #c8e1f5;
  border-radius: 10px;
  background: var(--fp-primary-soft);
}

.branch-manager-note > .icon {
  width: 17px;
  height: 17px;
  color: var(--fp-primary);
}

.branch-manager-note strong,
.branch-manager-note span {
  display: block;
}

.branch-manager-note strong {
  color: var(--fp-primary-strong);
  font-size: .64rem;
}

.branch-manager-note span {
  margin-top: 2px;
  color: var(--fp-text-secondary);
  font-size: .55rem;
}

.branch-empty-state {
  min-height: 210px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  padding: 22px;
  text-align: center;
}

.branch-empty-state.compact {
  min-height: 120px;
}

.branch-empty-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: var(--fp-primary-soft);
  color: var(--fp-primary);
}

.branch-empty-icon .icon {
  width: 22px;
  height: 22px;
}

.branch-empty-state h3 {
  margin: 0;
  color: var(--fp-navy);
  font-size: .82rem;
}

.branch-empty-state p {
  max-width: 440px;
  margin: 0;
  color: var(--fp-text-secondary);
  font-size: .61rem;
}

.branch-transfer-workspace {
  display: grid;
  gap: 12px;
}

.branch-transfer-grid {
  display: grid;
  grid-template-columns: minmax(360px, .95fr) minmax(420px, 1.05fr);
  gap: 12px;
  align-items: start;
}

.branch-panel-card .compact-form {
  padding: 13px;
}

.branch-panel-card .compact-form label {
  color: var(--fp-navy);
  font-size: .62rem;
  font-weight: 700;
}

.branch-panel-card .compact-form input,
.branch-panel-card .compact-form select,
.branch-panel-card .compact-form textarea {
  border-color: var(--fp-border);
  border-radius: 9px;
  color: var(--fp-navy);
}

.branch-panel-card .compact-form input:focus,
.branch-panel-card .compact-form select:focus,
.branch-panel-card .compact-form textarea:focus {
  border-color: var(--fp-primary);
  box-shadow: 0 0 0 3px rgba(33, 117, 199, .1);
  outline: 0;
}

.branch-panel-card .cash-button {
  min-height: 42px;
  border-radius: 10px;
  background: var(--fp-primary);
}

.branch-transfer-list .management-row {
  grid-template-columns: minmax(180px, 1fr) minmax(115px, .4fr);
  padding: 12px 13px;
  font-size: .64rem;
}

.branch-transfer-list .management-row strong {
  color: var(--fp-navy);
  font-size: .66rem;
}

.branch-transfer-list .management-row span {
  color: var(--fp-text-secondary);
  font-size: .54rem;
}

.branch-transfer-workspace .transfer-detail-panel {
  border-radius: var(--fp-card-radius);
  box-shadow: var(--fp-shadow);
}

.branch-editor-modal {
  position: fixed;
  z-index: 80;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
}

.branch-modal-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(15, 29, 45, .44);
  backdrop-filter: blur(2px);
}

.branch-editor-card {
  position: relative;
  z-index: 1;
  width: min(920px, 100%);
  max-height: min(860px, calc(100vh - 48px));
  overflow: auto;
  border: 1px solid var(--fp-border);
  border-radius: 18px;
  background: var(--fp-background);
  box-shadow: 0 26px 70px rgba(15, 29, 45, .2);
}

.branch-editor-header {
  position: sticky;
  z-index: 3;
  top: 0;
  min-height: 72px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 13px 15px;
  border-bottom: 1px solid var(--fp-border);
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(12px);
}

.branch-editor-header h2 {
  font-size: 1rem;
}

.branch-modal-close {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--fp-navy);
  font-size: 1.2rem;
}

.branch-modal-close:hover {
  background: var(--fp-background);
}

.branch-editor-form {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.branch-form-section {
  padding: 14px;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-card-radius);
  background: #fff;
}

.branch-form-section-heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  margin-bottom: 12px;
}

.branch-form-icon {
  width: 34px;
  height: 34px;
}

.branch-form-section-heading h3 {
  margin: 0;
  color: var(--fp-navy);
  font-size: .8rem;
}

.branch-form-section-heading p {
  margin: 2px 0 0;
  color: var(--fp-text-secondary);
  font-size: .57rem;
}

.branch-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.branch-premium-field {
  min-width: 0;
  display: grid;
  gap: 5px;
  color: var(--fp-navy);
  font-size: .63rem;
  font-weight: 700;
}

.branch-premium-field > span em {
  color: var(--fp-danger);
  font-style: normal;
}

.branch-input-shell {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-control-radius);
  padding: 0 10px;
  background: #fff;
}

.branch-field-icon {
  width: 15px;
  height: 15px;
  color: var(--fp-primary);
}

.branch-input-shell input {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  border: 0;
  outline: 0;
  padding: 0;
  background: transparent;
  color: var(--fp-navy);
  font-size: .7rem;
}

.branch-input-shell:focus-within {
  border-color: var(--fp-primary);
  box-shadow: 0 0 0 3px rgba(33, 117, 199, .1);
}

.branch-active-choice {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  margin-top: 11px;
  padding: 10px;
  border: 1px solid #c8e1f5;
  border-radius: 10px;
  background: var(--fp-primary-soft);
  cursor: pointer;
}

.branch-active-choice input {
  position: absolute;
  opacity: 0;
}

.branch-active-checkmark {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #fff;
  color: var(--fp-primary);
}

.branch-active-checkmark .icon {
  width: 14px;
  height: 14px;
}

.branch-active-choice strong,
.branch-active-choice small {
  display: block;
}

.branch-active-choice strong {
  color: var(--fp-navy);
  font-size: .64rem;
}

.branch-active-choice small {
  margin-top: 2px;
  color: var(--fp-text-secondary);
  font-size: .55rem;
}

.branch-identity-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  padding: 11px 12px;
  border: 1px solid #c8e1f5;
  border-radius: 11px;
  background: var(--fp-primary-soft);
}

.branch-identity-note > .icon {
  width: 17px;
  height: 17px;
  color: var(--fp-primary);
}

.branch-identity-note strong,
.branch-identity-note span,
.branch-identity-note small {
  display: block;
}

.branch-identity-note strong {
  color: var(--fp-primary-strong);
  font-size: .65rem;
}

.branch-identity-note span,
.branch-identity-note small {
  margin-top: 2px;
  color: var(--fp-text-secondary);
  font-size: .55rem;
}

.branch-inline-warning {
  padding: 9px 11px;
  border: 1px solid #f0d4b2;
  border-radius: 10px;
  background: #fff9ef;
  color: #82510a;
  font-size: .61rem;
}

.branch-inline-message {
  padding: 9px 11px;
  border: 1px solid #c8e1f5;
  border-radius: 10px;
  background: var(--fp-primary-soft);
  color: var(--fp-primary-strong);
  font-size: .61rem;
}

.branch-active-choice input:not(:checked) + .branch-active-checkmark {
  border: 1px solid var(--fp-border);
  background: #fff;
  color: transparent;
}

.branch-editor-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 8px;
  align-items: center;
  padding: 11px 0 max(2px, env(safe-area-inset-bottom));
  background: var(--fp-background);
}

@media (max-width: 1180px) {
  .branch-dashboard-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .branch-directory-row {
    grid-template-columns: auto minmax(180px, 1fr) repeat(2, minmax(72px, .3fr)) auto auto;
  }

  .branch-directory-row .branch-directory-count:nth-of-type(4) {
    display: none;
  }

  .branch-transfer-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .branch-management-header,
  .branch-hero-top {
    align-items: flex-start;
  }

  .branch-header-context,
  .branch-hero-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .branch-directory-row {
    grid-template-columns: auto minmax(180px, 1fr) minmax(70px, .25fr) auto auto;
  }

  .branch-directory-row .branch-directory-count:nth-of-type(3) {
    display: none;
  }

  .branch-editor-modal {
    padding: 16px;
  }

  .branch-editor-card {
    max-height: calc(100vh - 32px);
  }
}

@media (max-width: 720px) {
  .branch-management-header,
  .branch-hero-top {
    flex-wrap: wrap;
  }

  .branch-header-context,
  .branch-hero-actions {
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
  }

  .branch-current-chip {
    flex: 1;
    max-width: none;
  }

  .branch-hero-summary {
    grid-template-columns: 1fr 1fr;
  }

  .branch-hero-summary .branch-mini-metric:last-child {
    grid-column: 1 / -1;
  }

  .branch-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .branch-ranking-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .branch-ranking-meta {
    grid-column: 2 / 4;
    text-align: left;
  }

  .branch-directory-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .branch-directory-count {
    grid-column: 2;
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    text-align: left;
  }

  .branch-directory-row .branch-directory-count:nth-of-type(3),
  .branch-directory-row .branch-directory-count:nth-of-type(4) {
    display: inline-flex;
  }

  .branch-status-chip {
    grid-column: 3;
    grid-row: 1;
  }

  .branch-row-action {
    grid-column: 3;
  }

  .branch-form-grid {
    grid-template-columns: 1fr;
  }

  .branch-editor-actions {
    grid-template-columns: 1fr 1fr;
  }

  .branch-editor-actions > span {
    display: none;
  }

  .branch-editor-actions .danger {
    grid-column: 1 / -1;
  }
}

@media (max-width: 520px) {
  .branch-management-header {
    padding: 12px;
  }

  .branch-title-icon,
  .branch-hero-icon {
    width: 38px;
    height: 38px;
  }

  .branch-management-heading h1 {
    font-size: 1.28rem;
  }

  .branch-hero-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .branch-hero-actions .branch-primary-button,
  .branch-hero-actions .branch-secondary-button {
    width: 100%;
  }

  .branch-dashboard-summary {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .branch-dashboard-metric {
    min-height: 104px;
    grid-template-columns: 1fr;
  }

  .branch-ranking-row {
    padding: 9px 10px;
  }

  .branch-editor-modal {
    align-items: stretch;
    padding: 0;
  }

  .branch-editor-card {
    width: 100%;
    max-height: 100dvh;
    min-height: 100dvh;
    border: 0;
    border-radius: 0;
  }

  .branch-editor-form {
    padding: 11px;
  }

  .branch-editor-actions {
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }
}

@media (max-width: 430px) {
  .branch-header-context {
    display: grid;
    grid-template-columns: 1fr auto;
  }

  .branch-hero-summary {
    grid-template-columns: 1fr;
  }

  .branch-hero-summary .branch-mini-metric:last-child {
    grid-column: auto;
  }

  .branch-dashboard-summary {
    grid-template-columns: 1fr;
  }

  .branch-tabs {
    grid-template-columns: 1fr 1fr;
  }

  .branch-ranking-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .branch-ranking-meta,
  .branch-status-chip {
    grid-column: 2;
    text-align: left;
  }

  .branch-directory-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .branch-status-chip,
  .branch-row-action {
    grid-column: 2;
    grid-row: auto;
    justify-self: start;
  }
}

@media (max-width: 390px) {
  .branch-management-workspace {
    gap: 10px;
  }

  .branch-overview-hero,
  .branch-panel-card .compact-form,
  .branch-editor-form,
  .branch-form-section {
    padding: 10px;
  }

  .branch-hero-actions {
    grid-template-columns: 1fr;
  }

  .branch-tabs button,
  .branch-tabs a {
    min-height: 38px;
    font-size: .61rem;
  }

  .branch-editor-actions {
    grid-template-columns: 1fr;
  }

  .branch-editor-actions .danger {
    grid-column: auto;
  }
}

/* Phase 1 Step 13.13 premium Settings */
.settings-workspace {
  width: min(1380px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 14px;
}

.settings-header {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.settings-heading {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
}

.settings-heading-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 11px;
  background: var(--fp-primary);
  color: #fff;
}

.settings-heading-icon .icon {
  width: 20px;
  height: 20px;
}

.settings-heading h1 {
  margin: 0;
  color: var(--fp-navy);
  font-size: clamp(1.45rem, 2vw, 1.9rem);
  letter-spacing: -.035em;
}

.settings-heading p {
  margin: 3px 0 0;
  color: var(--fp-text-secondary);
  font-size: .7rem;
}

.settings-header-status {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.settings-context-chip {
  min-height: 38px;
  max-width: 260px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border: 1px solid var(--fp-border);
  border-radius: 10px;
  background: #fff;
  color: var(--fp-navy);
}

.settings-context-chip .icon {
  width: 15px;
  height: 15px;
  color: var(--fp-primary);
}

.settings-context-chip strong {
  overflow: hidden;
  font-size: .68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-message {
  padding: 10px 12px;
  border: 1px solid #c8e1f5;
  border-radius: var(--fp-control-radius);
  background: var(--fp-primary-soft);
  color: var(--fp-primary-strong);
  font-size: .68rem;
}

.settings-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.settings-summary-card {
  min-height: 108px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-card-radius);
  background: #fff;
  box-shadow: var(--fp-shadow);
}

.settings-summary-icon {
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--fp-primary-soft);
  color: var(--fp-primary);
}

.settings-summary-icon .icon {
  width: 18px;
  height: 18px;
}

.settings-summary-card span,
.settings-summary-card strong,
.settings-summary-card small {
  display: block;
}

.settings-summary-card > div > span {
  color: var(--fp-text-secondary);
  font-size: .59rem;
}

.settings-summary-card strong {
  margin-top: 3px;
  overflow: hidden;
  color: var(--fp-navy);
  font-size: .83rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-summary-card small {
  margin-top: 3px;
  color: var(--fp-text-secondary);
  font-size: .55rem;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

.settings-card {
  overflow: hidden;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-card-radius);
  background: #fff;
  box-shadow: var(--fp-shadow);
}

.settings-wide-card {
  grid-column: 1 / -1;
}

.settings-card-heading {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid #edf1f6;
}

.settings-card-title {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}

.settings-card-title > .icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: var(--fp-primary);
}

.settings-card-title h2 {
  margin: 0;
  color: var(--fp-navy);
  font-size: .82rem;
}

.settings-card-title p {
  margin: 2px 0 0;
  color: var(--fp-text-secondary);
  font-size: .56rem;
}

.settings-readonly-chip,
.settings-status-chip {
  min-height: 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: 0 0 auto;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: .56rem;
  font-weight: 760;
  white-space: nowrap;
}

.settings-readonly-chip {
  background: var(--fp-primary-soft);
  color: var(--fp-primary-strong);
}

.settings-readonly-chip .icon {
  width: 12px;
  height: 12px;
}

.settings-status-chip.active {
  background: var(--fp-success-soft);
  color: var(--fp-success);
}

.settings-status-chip.inactive {
  background: var(--fp-danger-soft);
  color: var(--fp-danger);
}

.settings-status-chip.warning {
  background: var(--fp-warning-soft);
  color: var(--fp-warning);
}

.settings-detail-list {
  display: grid;
}

.settings-detail-row {
  min-height: 48px;
  display: grid;
  grid-template-columns: minmax(120px, .42fr) minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 9px 14px;
  border-bottom: 1px solid #edf1f6;
}

.settings-detail-row:last-child {
  border-bottom: 0;
}

.settings-detail-row span {
  color: var(--fp-text-secondary);
  font-size: .59rem;
}

.settings-detail-row strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--fp-navy);
  font-size: .65rem;
  text-align: right;
}

.settings-detail-row strong.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .57rem;
  font-weight: 650;
}

.settings-info-note,
.settings-sync-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  margin: 12px 14px;
  padding: 10px 11px;
  border: 1px solid #c8e1f5;
  border-radius: 10px;
  background: var(--fp-primary-soft);
}

.settings-info-note > .icon,
.settings-sync-note > .icon {
  width: 16px;
  height: 16px;
  margin-top: 1px;
  color: var(--fp-primary);
}

.settings-info-note strong,
.settings-info-note span,
.settings-sync-note span {
  display: block;
}

.settings-info-note strong {
  color: var(--fp-primary-strong);
  font-size: .62rem;
}

.settings-info-note span,
.settings-sync-note span {
  margin-top: 2px;
  color: var(--fp-text-secondary);
  font-size: .54rem;
  line-height: 1.45;
}

.settings-card-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 11px 14px;
  border-top: 1px solid #edf1f6;
}

.settings-action-wrap {
  flex-wrap: wrap;
}

.settings-primary-link,
.settings-secondary-link,
.settings-primary-button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 9px;
  padding: 7px 10px;
  font-size: .62rem;
  font-weight: 740;
  text-decoration: none;
}

.settings-primary-link,
.settings-primary-button {
  border: 1px solid var(--fp-primary);
  background: var(--fp-primary);
  color: #fff;
}

.settings-primary-link:hover,
.settings-primary-button:hover {
  border-color: var(--fp-primary-strong);
  background: var(--fp-primary-strong);
}

.settings-secondary-link {
  border: 1px solid var(--fp-border);
  background: #fff;
  color: var(--fp-primary-strong);
}

.settings-secondary-link:hover {
  border-color: #b8d0e7;
  background: var(--fp-primary-soft);
}

.settings-primary-link .icon,
.settings-secondary-link .icon,
.settings-primary-button .icon {
  width: 14px;
  height: 14px;
}

.settings-primary-button:disabled {
  opacity: .45;
  cursor: default;
}

.settings-sync-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: #edf1f6;
}

.settings-sync-metric {
  min-height: 88px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  padding: 11px 13px;
  background: #fff;
}

.settings-sync-icon,
.settings-shortcut-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 9px;
  background: var(--fp-primary-soft);
  color: var(--fp-primary);
}

.settings-sync-icon .icon,
.settings-shortcut-icon .icon {
  width: 15px;
  height: 15px;
}

.settings-sync-metric span,
.settings-sync-metric strong,
.settings-sync-metric small {
  display: block;
}

.settings-sync-metric > div > span {
  color: var(--fp-text-secondary);
  font-size: .55rem;
}

.settings-sync-metric strong {
  margin-top: 2px;
  color: var(--fp-navy);
  font-size: .74rem;
}

.settings-sync-metric small {
  margin-top: 2px;
  color: var(--fp-text-secondary);
  font-size: .52rem;
}

.settings-shortcut-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  padding: 13px;
}

.settings-shortcut {
  min-width: 0;
  min-height: 66px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  border: 1px solid var(--fp-border);
  border-radius: 10px;
  padding: 10px;
  background: #fff;
  color: var(--fp-navy);
  text-decoration: none;
}

.settings-shortcut:hover {
  border-color: #b8d0e7;
  background: #fbfdff;
}

.settings-shortcut strong,
.settings-shortcut small {
  display: block;
}

.settings-shortcut strong {
  color: var(--fp-navy);
  font-size: .64rem;
}

.settings-shortcut small {
  margin-top: 2px;
  color: var(--fp-text-secondary);
  font-size: .53rem;
}

.settings-shortcut em {
  color: var(--fp-primary-strong);
  font-size: .55rem;
  font-style: normal;
  font-weight: 720;
}

@media (max-width: 1180px) {
  .settings-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .settings-shortcut-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .settings-header {
    align-items: flex-start;
  }

  .settings-header-status {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .settings-grid {
    grid-template-columns: 1fr;
  }

  .settings-wide-card {
    grid-column: auto;
  }
}

@media (max-width: 720px) {
  .settings-header {
    flex-wrap: wrap;
  }

  .settings-header-status {
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
  }

  .settings-context-chip {
    flex: 1;
    max-width: none;
  }
}

@media (max-width: 520px) {
  .settings-heading-icon {
    width: 38px;
    height: 38px;
  }

  .settings-heading h1 {
    font-size: 1.3rem;
  }

  .settings-summary-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .settings-summary-card {
    min-height: 96px;
    grid-template-columns: 1fr;
    gap: 7px;
    padding: 11px;
  }

  .settings-summary-icon {
    width: 32px;
    height: 32px;
  }

  .settings-detail-row {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .settings-detail-row strong {
    text-align: left;
  }

  .settings-sync-grid {
    grid-template-columns: 1fr;
  }

  .settings-shortcut-grid {
    grid-template-columns: 1fr;
  }

  .settings-card-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .settings-card-actions > * {
    width: 100%;
  }
}

@media (max-width: 430px) {
  .settings-header-status {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .settings-summary-grid {
    grid-template-columns: 1fr;
  }

  .settings-card-heading {
    align-items: flex-start;
  }
}

@media (max-width: 390px) {
  .settings-workspace {
    gap: 10px;
  }

  .settings-card-heading,
  .settings-shortcut-grid {
    padding: 10px;
  }

  .settings-info-note,
  .settings-sync-note {
    margin: 10px;
  }
}

/* Phase 2 Step 1.3 premium Subscription */
.subscription-workspace {
  width: min(1380px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 14px;
}

.subscription-header {
  display: flex;
  align-items: center;
  gap: 16px;
}

.subscription-header > div:first-child {
  min-width: 0;
}

.subscription-eyebrow {
  display: block;
  margin-bottom: 4px;
  color: var(--fp-primary);
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.subscription-header h1 {
  margin: 0;
  color: var(--fp-navy);
  font-size: clamp(1.5rem, 2vw, 1.95rem);
  letter-spacing: -.035em;
}

.subscription-header p {
  margin: 4px 0 0;
  color: var(--fp-text-secondary);
  font-size: .7rem;
}

.subscription-header-status {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.subscription-access-chip {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border: 1px solid var(--fp-border);
  border-radius: 10px;
  background: #fff;
  color: var(--fp-navy);
}

.subscription-access-chip .icon {
  width: 15px;
  height: 15px;
  color: var(--fp-primary);
}

.subscription-access-chip strong {
  font-size: .66rem;
}

.subscription-status-badge {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: .58rem;
  font-weight: 800;
}

.subscription-status-badge.active,
.subscription-status-icon.active {
  background: var(--fp-success-soft);
  color: var(--fp-success);
}

.subscription-status-badge.expired,
.subscription-status-icon.expired {
  background: var(--fp-warning-soft);
  color: var(--fp-warning);
}

.subscription-status-badge.inactive,
.subscription-status-icon.inactive {
  background: var(--fp-primary-soft);
  color: var(--fp-primary-strong);
}

.subscription-status-badge.neutral,
.subscription-status-icon.neutral {
  background: #eef2f6;
  color: var(--fp-text-secondary);
}

.subscription-message {
  padding: 10px 12px;
  border: 1px solid #c8e1f5;
  border-radius: 10px;
  background: var(--fp-primary-soft);
  color: var(--fp-primary-strong);
  font-size: .64rem;
}

.subscription-layout {
  display: grid;
  grid-template-columns: minmax(360px, .88fr) minmax(520px, 1.12fr);
  gap: 14px;
  align-items: start;
}

.subscription-mode-panel,
.subscription-status-card,
.subscription-pricing-card {
  overflow: hidden;
  border: 1px solid var(--fp-border);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--fp-shadow);
}

.subscription-mode-panel {
  position: sticky;
  top: 88px;
}

.subscription-mode-hero {
  padding: 24px;
  border-bottom: 1px solid #e9eff5;
  background: var(--fp-primary-soft);
}

.subscription-mode-mark {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  border-radius: 14px;
  background: var(--fp-primary);
  color: #fff;
}

.subscription-mode-mark .icon {
  width: 25px;
  height: 25px;
}

.subscription-mode-hero > span {
  display: block;
  color: var(--fp-primary-strong);
  font-size: .59rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.subscription-mode-hero h2 {
  max-width: 420px;
  margin: 7px 0 6px;
  color: var(--fp-navy);
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  line-height: 1.12;
  letter-spacing: -.03em;
}

.subscription-mode-hero p {
  max-width: 470px;
  margin: 0;
  color: var(--fp-text-secondary);
  font-size: .68rem;
  line-height: 1.55;
}

.subscription-mode-icons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: #edf1f6;
}

.subscription-mode-icons article {
  min-height: 104px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 14px;
  background: #fff;
  color: var(--fp-navy);
  text-align: center;
}

.subscription-mode-icons article > span {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--fp-primary-soft);
  color: var(--fp-primary);
}

.subscription-mode-icons .icon {
  width: 17px;
  height: 17px;
}

.subscription-mode-icons strong {
  font-size: .63rem;
}

.subscription-business-context {
  display: grid;
  grid-template-columns: 1fr;
}

.subscription-business-context > div {
  display: grid;
  grid-template-columns: minmax(100px, .38fr) minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 47px;
  padding: 9px 14px;
  border-top: 1px solid #edf1f6;
}

.subscription-business-context span {
  color: var(--fp-text-secondary);
  font-size: .57rem;
}

.subscription-business-context strong {
  overflow: hidden;
  color: var(--fp-navy);
  font-size: .63rem;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.subscription-plan-panel {
  display: grid;
  gap: 14px;
}

.subscription-status-card {
  padding: 16px;
}

.subscription-status-heading {
  display: flex;
  align-items: center;
  gap: 12px;
}

.subscription-status-heading > div {
  min-width: 0;
}

.subscription-status-heading span {
  color: var(--fp-text-secondary);
  font-size: .58rem;
}

.subscription-status-heading h2 {
  margin: 3px 0 0;
  color: var(--fp-navy);
  font-size: 1.15rem;
}

.subscription-status-icon {
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  margin-left: auto;
  border-radius: 11px;
}

.subscription-status-icon .icon {
  width: 18px;
  height: 18px;
}

.subscription-status-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.subscription-status-grid > div {
  min-height: 72px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 10px 11px;
  border: 1px solid var(--fp-border);
  border-radius: 11px;
  background: #fbfdff;
}

.subscription-status-grid span {
  color: var(--fp-text-secondary);
  font-size: .55rem;
}

.subscription-status-grid strong {
  color: var(--fp-navy);
  font-size: .67rem;
}

.subscription-pricing-card {
  padding: 16px;
}

.subscription-section-heading {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.subscription-section-heading > div {
  min-width: 0;
}

.subscription-section-heading > div > span {
  color: var(--fp-primary);
  font-size: .58rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.subscription-section-heading h2 {
  margin: 4px 0 2px;
  color: var(--fp-navy);
  font-size: .98rem;
}

.subscription-section-heading p {
  margin: 0;
  color: var(--fp-text-secondary);
  font-size: .58rem;
}

.subscription-readonly-chip {
  min-height: 27px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  margin-left: auto;
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--fp-primary-soft);
  color: var(--fp-primary-strong);
  font-size: .55rem;
  font-weight: 760;
}

.subscription-readonly-chip .icon {
  width: 12px;
  height: 12px;
}

.subscription-plan-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 14px;
}

.subscription-plan-card {
  min-height: 110px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 6px 9px;
  align-items: start;
  border: 1px solid var(--fp-border);
  border-radius: 13px;
  padding: 13px;
  background: #fff;
  color: var(--fp-navy);
  text-align: left;
}

.subscription-plan-card:hover:not(:disabled) {
  border-color: #a9cbe8;
  background: #fbfdff;
}

.subscription-plan-card.selected {
  border-color: var(--fp-primary);
  box-shadow: 0 0 0 3px rgba(33, 117, 199, .09);
}

.subscription-plan-card:disabled {
  cursor: default;
}

.subscription-plan-radio {
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  border: 1px solid var(--fp-border);
  border-radius: 50%;
  background: #fff;
  color: var(--fp-primary);
}

.subscription-plan-card.selected .subscription-plan-radio {
  border-color: var(--fp-primary);
  background: var(--fp-primary-soft);
}

.subscription-plan-radio .icon {
  width: 12px;
  height: 12px;
}

.subscription-plan-copy strong,
.subscription-plan-copy small,
.subscription-plan-price strong,
.subscription-plan-price small {
  display: block;
}

.subscription-plan-copy strong {
  font-size: .7rem;
}

.subscription-plan-copy small {
  margin-top: 3px;
  color: var(--fp-text-secondary);
  font-size: .52rem;
  line-height: 1.35;
}

.subscription-plan-price {
  grid-column: 1 / -1;
  padding-top: 8px;
  border-top: 1px solid #edf1f6;
}

.subscription-plan-price strong {
  color: var(--fp-primary-strong);
  font-size: 1rem;
}

.subscription-plan-price small {
  margin-top: 1px;
  color: var(--fp-text-secondary);
  font-size: .51rem;
}

.subscription-payment-box {
  margin-top: 13px;
  padding: 13px;
  border: 1px solid var(--fp-border);
  border-radius: 13px;
  background: #fbfdff;
}

.subscription-payment-heading {
  display: flex;
  align-items: center;
  gap: 9px;
}

.subscription-payment-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 9px;
  background: var(--fp-primary-soft);
  color: var(--fp-primary);
}

.subscription-payment-icon .icon {
  width: 16px;
  height: 16px;
}

.subscription-payment-heading h3 {
  margin: 0;
  color: var(--fp-navy);
  font-size: .74rem;
}

.subscription-payment-heading p {
  margin: 2px 0 0;
  color: var(--fp-text-secondary);
  font-size: .54rem;
}

.subscription-phone-field {
  display: grid;
  gap: 5px;
  margin-top: 12px;
}

.subscription-phone-field > span {
  color: var(--fp-navy);
  font-size: .6rem;
  font-weight: 720;
}

.subscription-phone-field > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 42px;
  border: 1px solid var(--fp-border);
  border-radius: 10px;
  padding: 0 10px;
  background: #fff;
}

.subscription-phone-field > div:focus-within {
  border-color: var(--fp-primary);
  box-shadow: 0 0 0 3px rgba(33, 117, 199, .1);
}

.subscription-phone-field .icon {
  width: 15px;
  height: 15px;
  color: var(--fp-primary);
}

.subscription-phone-field input {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--fp-navy);
  font-size: .67rem;
}

.subscription-phone-field input:disabled {
  color: var(--fp-text-secondary);
  cursor: default;
}

.subscription-phone-field small {
  color: var(--fp-text-secondary);
  font-size: .5rem;
}

.subscription-pay-button {
  width: 100%;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 11px;
  border: 1px solid #9ebddd;
  border-radius: 10px;
  background: #dce9f5;
  color: #5d7794;
  font-size: .65rem;
  font-weight: 780;
  cursor: default;
}

.subscription-pay-button .icon {
  width: 15px;
  height: 15px;
}

.subscription-pay-button:not(:disabled) {
  border-color: var(--fp-primary);
  background: var(--fp-primary);
  color: #fff;
  cursor: pointer;
}

.subscription-pay-button:not(:disabled):hover {
  background: var(--fp-primary-strong);
}

.subscription-pay-button:disabled {
  cursor: not-allowed;
}

.subscription-phone-field.invalid > div {
  border-color: var(--fp-danger);
  box-shadow: 0 0 0 3px var(--fp-danger-soft);
}

.subscription-phone-field.invalid small {
  color: var(--fp-danger);
}

.subscription-payment-state {
  display: grid;
  gap: 3px;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid var(--fp-border);
  border-radius: 9px;
  background: #fff;
  font-size: .54rem;
  line-height: 1.45;
}

.subscription-payment-state strong {
  color: var(--fp-navy);
  font-size: .6rem;
}

.subscription-payment-state span {
  color: var(--fp-text-secondary);
}

.subscription-payment-state.pending,
.subscription-payment-state.disabled,
.subscription-payment-state.timeout,
.subscription-payment-state.network_error {
  border-color: #c8e1f5;
  background: var(--fp-primary-soft);
}

.subscription-payment-state.success {
  border-color: var(--fp-success);
  background: var(--fp-success-soft);
}

.subscription-payment-state.failed,
.subscription-payment-state.cancelled {
  border-color: var(--fp-danger);
  background: var(--fp-danger-soft);
}

.subscription-payment-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 7px;
  align-items: start;
  margin-top: 10px;
  padding: 9px 10px;
  border: 1px solid #c8e1f5;
  border-radius: 9px;
  background: var(--fp-primary-soft);
  color: var(--fp-text-secondary);
  font-size: .52rem;
  line-height: 1.45;
}

.subscription-payment-note .icon {
  width: 14px;
  height: 14px;
  margin-top: 1px;
  color: var(--fp-primary);
}

@media (max-width: 1180px) {
  .subscription-layout {
    grid-template-columns: minmax(320px, .8fr) minmax(460px, 1.2fr);
  }

  .subscription-mode-panel {
    position: static;
  }
}

@media (max-width: 900px) {
  .subscription-layout {
    grid-template-columns: 1fr;
  }

  .subscription-mode-icons {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .subscription-business-context {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .subscription-business-context > div {
    grid-template-columns: 1fr;
    align-content: center;
  }

  .subscription-business-context strong {
    text-align: left;
  }
}

@media (max-width: 720px) {
  .subscription-header {
    flex-wrap: wrap;
  }

  .subscription-header-status {
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
  }

  .subscription-mode-icons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .subscription-business-context {
    grid-template-columns: 1fr;
  }

  .subscription-plan-options {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .subscription-mode-hero,
  .subscription-status-card,
  .subscription-pricing-card {
    padding: 13px;
  }

  .subscription-header-status {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .subscription-access-chip {
    min-width: 0;
  }

  .subscription-status-grid {
    grid-template-columns: 1fr;
  }

  .subscription-section-heading {
    flex-wrap: wrap;
  }

  .subscription-readonly-chip {
    margin-left: 0;
  }
}

@media (max-width: 430px) {
  .subscription-mode-icons {
    grid-template-columns: 1fr 1fr;
  }

  .subscription-mode-icons article {
    min-height: 88px;
    padding: 10px;
  }

  .subscription-business-context > div {
    min-height: 44px;
  }
}

@media (max-width: 390px) {
  .subscription-workspace {
    gap: 10px;
  }

  .subscription-header-status {
    grid-template-columns: 1fr;
  }

  .subscription-status-badge {
    justify-self: start;
  }

  .subscription-mode-icons {
    grid-template-columns: 1fr;
  }
}



/* Premium business-mode subscription paywall */
body.subscription-gate-mode {
  min-height: 100dvh;
  background: #f3f7fb;
}

body.subscription-gate-mode #app {
  min-height: 100dvh;
}

.subscription-gate-shell {
  min-height: 100dvh;
  padding: 22px;
  background: #f3f7fb;
}

.subscription-gate-main {
  width: 100%;
  min-height: calc(100dvh - 44px);
}

.subscription-workspace.subscription-premium {
  width: min(1500px, 100%);
  gap: 16px;
}

.subscription-premium-brandbar {
  min-height: 62px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--fp-border);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--fp-shadow);
}

.app-layout .subscription-premium-brandbar {
  display: none;
}

.subscription-brand-lockup {
  display: flex;
  align-items: center;
  gap: 10px;
}

.subscription-brand-lockup img {
  width: 42px;
  height: 42px;
  border-radius: 11px;
}

.subscription-brand-lockup > span {
  display: grid;
  gap: 1px;
}

.subscription-brand-lockup strong {
  color: var(--fp-navy);
  font-size: 1rem;
}

.subscription-brand-lockup small {
  color: var(--fp-text-secondary);
  font-size: .64rem;
}

.subscription-brand-spacer {
  flex: 1;
}

.subscription-trust-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid #cfe3f6;
  border-radius: 11px;
  background: #f6fbff;
  color: var(--fp-primary-strong);
}

.subscription-trust-chip .icon {
  width: 18px;
  height: 18px;
}

.subscription-trust-chip > span {
  display: grid;
  gap: 1px;
}

.subscription-trust-chip strong {
  font-size: .65rem;
}

.subscription-trust-chip small {
  color: var(--fp-text-secondary);
  font-size: .52rem;
}

.subscription-premium-hero {
  min-height: 330px;
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(360px, .82fr);
  gap: 24px;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid #cfe1f3;
  border-radius: 24px;
  padding: 32px;
  background: #eaf4ff;
  box-shadow: 0 20px 45px rgba(13, 45, 82, .08);
}

.subscription-premium.mode-restaurant .subscription-premium-hero,
.subscription-premium.mode-cafe .subscription-premium-hero,
.subscription-premium.mode-bar .subscription-premium-hero {
  background: #fff7ed;
  border-color: #f0dfc8;
}

.subscription-premium.mode-hotel .subscription-premium-hero {
  background: #edf5fb;
}

.subscription-premium.mode-salon .subscription-premium-hero {
  background: #fff5fb;
  border-color: #f0dce9;
}

.subscription-premium.mode-services .subscription-premium-hero {
  background: #f2f6ff;
}

.subscription-hero-copy {
  display: grid;
  align-content: center;
  min-width: 0;
}

.subscription-hero-copy .subscription-eyebrow {
  margin-bottom: 10px;
  font-size: .7rem !important;
  letter-spacing: .12em;
}

.subscription-hero-copy h1 {
  max-width: 720px;
  margin: 0;
  color: #09224b;
  font-size: clamp(2.25rem, 4.6vw, 4.35rem);
  line-height: .98;
  letter-spacing: -.055em;
}

.subscription-hero-copy > p {
  max-width: 700px;
  margin: 16px 0 0;
  color: #405778;
  font-size: clamp(.82rem, 1.25vw, 1.04rem);
  line-height: 1.55;
}

.subscription-mode-feature-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 24px;
}

.subscription-mode-feature-grid article {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid rgba(135, 176, 216, .45);
  border-radius: 12px;
  background: rgba(255,255,255,.82);
  color: var(--fp-navy);
}

.subscription-mode-feature-grid article > span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #e7f2ff;
  color: var(--fp-primary);
}

.subscription-mode-feature-grid .icon {
  width: 16px;
  height: 16px;
}

.subscription-mode-feature-grid strong {
  font-size: .66rem;
  white-space: nowrap;
}

.subscription-hero-preview {
  display: grid;
  align-items: center;
}

.subscription-preview-window {
  min-height: 260px;
  display: grid;
  align-content: center;
  padding: 24px;
  border: 1px solid rgba(155, 190, 224, .58);
  border-radius: 22px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 22px 52px rgba(17, 59, 104, .12);
}

.subscription-preview-mark {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  border-radius: 16px;
  background: var(--fp-primary);
  color: #fff;
}

.subscription-preview-mark .icon {
  width: 27px;
  height: 27px;
}

.subscription-preview-window > span {
  color: var(--fp-text-secondary);
  font-size: .58rem;
  font-weight: 760;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.subscription-preview-window h2 {
  margin: 5px 0 3px;
  color: var(--fp-navy);
  font-size: 1.35rem;
  letter-spacing: -.03em;
}

.subscription-preview-window > p {
  margin: 0;
  color: var(--fp-text-secondary);
  font-size: .66rem;
}

.subscription-preview-features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 18px;
}

.subscription-preview-features > div {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 8px 9px;
  border-radius: 10px;
  background: #f4f8fc;
  color: var(--fp-navy);
}

.subscription-preview-features .icon {
  width: 14px;
  height: 14px;
  color: var(--fp-primary);
}

.subscription-preview-features span {
  overflow: hidden;
  font-size: .58rem;
  font-weight: 720;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.subscription-preview-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #e5edf5;
}

.subscription-preview-footer > span {
  color: var(--fp-text-secondary);
  font-size: .58rem;
}

.subscription-preview-footer .subscription-status-badge {
  margin-left: auto;
}

.subscription-premium-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(390px, .72fr);
  gap: 16px;
  align-items: start;
}

.subscription-premium-pricing,
.subscription-business-card,
.subscription-premium-payment {
  border: 1px solid var(--fp-border);
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--fp-shadow);
}

.subscription-premium-pricing {
  padding: 22px;
}

.subscription-country-chip {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  margin-left: auto;
  padding: 7px 12px;
  border-radius: 999px;
  background: #e9f3ff;
  color: var(--fp-primary-strong);
  font-size: .61rem;
  font-weight: 780;
}

.subscription-premium .subscription-plan-options {
  gap: 14px;
  margin-top: 18px;
}

.subscription-premium .subscription-plan-card {
  position: relative;
  min-height: 286px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto;
  gap: 8px 10px;
  padding: 20px;
  border-radius: 17px;
}

.subscription-premium .subscription-plan-card.selected {
  border-width: 2px;
  box-shadow: 0 0 0 4px rgba(33, 117, 199, .08);
}

.subscription-premium .subscription-plan-radio {
  width: 29px;
  height: 29px;
}

.subscription-premium .subscription-plan-card.selected .subscription-plan-radio {
  background: var(--fp-primary);
  color: #fff;
}

.subscription-premium .subscription-plan-copy strong {
  font-size: .86rem;
}

.subscription-premium .subscription-plan-copy small {
  font-size: .57rem;
}

.subscription-plan-saving {
  align-self: start;
  justify-self: end;
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--fp-success-soft);
  color: var(--fp-success);
  font-size: .56rem;
  font-weight: 800;
}

.subscription-premium .subscription-plan-price {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding-top: 14px;
}

.subscription-premium .subscription-plan-price strong {
  font-size: 1.6rem;
}

.subscription-premium .subscription-plan-price small {
  font-size: .61rem;
}

.subscription-plan-benefits {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
  padding-top: 3px;
}

.subscription-plan-benefits > span {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #304662;
}

.subscription-plan-benefits .icon {
  width: 15px;
  height: 15px;
  color: var(--fp-primary);
}

.subscription-plan-benefits em {
  font-size: .61rem;
  font-style: normal;
}

.subscription-value-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin-top: 16px;
}

.subscription-value-row article {
  min-height: 78px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 11px;
  border: 1px solid #e2eaf2;
  border-radius: 12px;
  background: #fbfdff;
}

.subscription-value-row article > .icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  color: var(--fp-primary);
}

.subscription-value-row article > span {
  display: grid;
  gap: 3px;
}

.subscription-value-row strong {
  color: var(--fp-navy);
  font-size: .59rem;
}

.subscription-value-row small {
  color: var(--fp-text-secondary);
  font-size: .51rem;
  line-height: 1.35;
}

.subscription-premium-side {
  display: grid;
  gap: 14px;
}

.subscription-business-card {
  padding: 17px;
}

.subscription-card-title {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 13px;
  border-bottom: 1px solid #edf1f6;
}

.subscription-business-icon {
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--fp-primary-soft);
  color: var(--fp-primary);
}

.subscription-business-icon .icon {
  width: 19px;
  height: 19px;
}

.subscription-card-title > div {
  display: grid;
  gap: 2px;
}

.subscription-card-title strong {
  color: var(--fp-navy);
  font-size: .77rem;
}

.subscription-card-title small {
  color: var(--fp-text-secondary);
  font-size: .5rem;
}

.subscription-business-rows {
  display: grid;
}

.subscription-business-rows > div {
  min-height: 40px;
  display: grid;
  grid-template-columns: minmax(120px, .78fr) minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border-bottom: 1px solid #edf1f6;
}

.subscription-business-rows > div:last-child {
  border-bottom: 0;
}

.subscription-business-rows span {
  color: var(--fp-text-secondary);
  font-size: .55rem;
}

.subscription-business-rows strong {
  overflow: hidden;
  color: var(--fp-navy);
  font-size: .62rem;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.subscription-business-rows strong.active {
  color: var(--fp-success);
}

.subscription-business-rows strong.expired {
  color: var(--fp-warning);
}

.subscription-business-rows strong.inactive {
  color: var(--fp-danger);
}

.subscription-premium-payment {
  margin-top: 0;
  padding: 17px;
  background: #fff;
}

.subscription-premium .subscription-payment-heading h3 {
  font-size: .86rem;
}

.subscription-premium .subscription-payment-heading p {
  font-size: .57rem;
  line-height: 1.45;
}

.subscription-premium .subscription-phone-field {
  margin-top: 16px;
}

.subscription-premium .subscription-phone-field > span {
  font-size: .61rem;
}

.subscription-premium .subscription-phone-field > div {
  min-height: 48px;
  border-radius: 11px;
}

.subscription-premium .subscription-phone-field input {
  min-height: 46px;
  font-size: .7rem;
}

.subscription-premium .subscription-phone-field small {
  font-size: .52rem;
}

.subscription-premium .subscription-pay-button {
  min-height: 49px;
  margin-top: 14px;
  border-radius: 11px;
}

.subscription-card-trust {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px solid #dbe7f3;
  border-radius: 11px;
  background: #f8fbff;
  color: var(--fp-text-secondary);
  font-size: .55rem;
}

.subscription-card-trust .icon {
  width: 16px;
  height: 16px;
  color: var(--fp-success);
}

.subscription-card-trust span {
  color: var(--fp-navy);
  font-weight: 750;
}

.subscription-card-trust strong {
  margin-left: auto;
  color: #54657a;
  font-size: .49rem;
  letter-spacing: .02em;
}

.subscription-stripe-checkout {
  min-height: 390px;
  margin-top: 14px;
  overflow: hidden;
  border: 1px solid #dbe7f3;
  border-radius: 13px;
  background: #fff;
}

.subscription-secondary-button,
.subscription-manage-button {
  width: 100%;
  min-height: 42px;
  margin-top: 10px;
  border: 1px solid #cbd9e8;
  border-radius: 10px;
  background: #fff;
  color: var(--fp-primary-strong);
  font: inherit;
  font-size: .62rem;
  font-weight: 760;
  cursor: pointer;
}

.subscription-manage-button:hover,
.subscription-secondary-button:hover {
  border-color: var(--fp-primary);
  background: var(--fp-primary-soft);
}

@media (max-width: 1120px) {
  .subscription-premium-hero,
  .subscription-premium-grid {
    grid-template-columns: 1fr;
  }

  .subscription-hero-preview {
    max-width: 680px;
  }

  .subscription-premium-side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .subscription-value-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .subscription-gate-shell {
    padding: 10px;
  }

  .subscription-premium-brandbar {
    flex-wrap: wrap;
  }

  .subscription-trust-chip {
    order: 3;
    width: 100%;
  }

  .subscription-premium-hero {
    min-height: 0;
    padding: 22px 18px;
  }

  .subscription-hero-copy h1 {
    font-size: clamp(2rem, 10vw, 3.2rem);
  }

  .subscription-mode-feature-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .subscription-mode-feature-grid article {
    min-width: 0;
  }

  .subscription-premium .subscription-plan-options,
  .subscription-premium-side {
    grid-template-columns: 1fr;
  }

  .subscription-premium .subscription-plan-card {
    min-height: 0;
  }
}

@media (max-width: 520px) {
  .subscription-premium-brandbar {
    padding: 9px;
  }

  .subscription-brand-lockup img {
    width: 36px;
    height: 36px;
  }

  .subscription-access-chip {
    margin-left: auto;
  }

  .subscription-premium-hero {
    border-radius: 17px;
    padding: 18px 14px;
  }

  .subscription-mode-feature-grid {
    gap: 6px;
  }

  .subscription-mode-feature-grid article {
    padding: 7px;
  }

  .subscription-preview-window,
  .subscription-premium-pricing,
  .subscription-business-card,
  .subscription-premium-payment {
    border-radius: 15px;
  }

  .subscription-preview-features,
  .subscription-value-row {
    grid-template-columns: 1fr;
  }

  .subscription-premium-pricing {
    padding: 14px;
  }

  .subscription-country-chip {
    margin-left: 0;
  }

  .subscription-business-rows > div {
    grid-template-columns: 1fr;
    gap: 3px;
    padding: 8px 0;
  }

  .subscription-business-rows strong {
    text-align: left;
  }
}


/* Phase 2 Step 4 Android-parity Settings */
.settings-v2 {
  width: min(1200px, 100%);
}

.settings-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.settings-section-nav {
  position: sticky;
  top: 86px;
  display: grid;
  gap: 5px;
  padding: 9px;
  border: 1px solid var(--fp-border);
  border-radius: 15px;
  background: #fff;
  box-shadow: var(--fp-shadow);
}

.settings-section-nav button {
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 0;
  border-radius: 9px;
  padding: 9px 10px;
  background: transparent;
  color: var(--fp-text-secondary);
  font-size: .62rem;
  font-weight: 720;
  text-align: left;
}

.settings-section-nav button:hover,
.settings-section-nav button:focus-visible {
  background: var(--fp-primary-soft);
  color: var(--fp-primary-strong);
  outline: 0;
}

.settings-section-nav .icon {
  width: 15px;
  height: 15px;
  color: var(--fp-primary);
}

.settings-sections {
  min-width: 0;
  display: grid;
  gap: 14px;
}

.settings-section-card {
  scroll-margin-top: 88px;
}

.settings-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
}

.settings-form-wide {
  grid-column: 1 / -1;
}

.settings-field {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.settings-field > span {
  color: var(--fp-navy);
  font-size: .58rem;
  font-weight: 760;
}

.settings-field input {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  border: 1px solid var(--fp-border);
  border-radius: 9px;
  padding: 8px 10px;
  background: #fff;
  color: var(--fp-navy);
  font: inherit;
  font-size: .65rem;
  outline: 0;
}

.settings-field input:focus {
  border-color: var(--fp-primary);
  box-shadow: 0 0 0 3px rgba(33, 117, 199, .1);
}

.settings-field input:disabled {
  background: #f5f8fb;
  color: var(--fp-text-secondary);
}

.settings-readonly-field {
  min-height: 68px;
  align-content: center;
  border: 1px solid var(--fp-border);
  border-radius: 9px;
  padding: 9px 10px;
  background: #f8fafc;
}

.settings-readonly-field strong {
  color: var(--fp-navy);
  font-size: .68rem;
}

.settings-readonly-field small {
  color: var(--fp-text-secondary);
  font-size: .51rem;
  line-height: 1.4;
}

.settings-payment-warning {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 14px 0;
  padding: 10px 11px;
  border: 1px solid #c8e1f5;
  border-radius: 10px;
  background: var(--fp-primary-soft);
  color: var(--fp-primary-strong);
  font-size: .56rem;
}

.settings-payment-warning .icon {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

.settings-segmented {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: 4px;
  margin: 12px 14px 0;
  padding: 4px;
  border: 1px solid var(--fp-border);
  border-radius: 11px;
  background: #f5f8fb;
}

.settings-segmented button {
  min-height: 36px;
  border: 0;
  border-radius: 8px;
  padding: 7px 12px;
  background: transparent;
  color: var(--fp-text-secondary);
  font-size: .61rem;
  font-weight: 760;
}

.settings-segmented button.active {
  background: #fff;
  color: var(--fp-primary-strong);
  box-shadow: var(--fp-shadow);
}

.payment-fields {
  padding-top: 12px;
}

.payment-fields > div:not(.settings-form-wide) {
  min-width: 0;
}

.hidden {
  display: none !important;
}

.settings-receipt-preview {
  width: min(430px, calc(100% - 28px));
  margin: 14px;
  border: 1px solid var(--fp-border);
  border-radius: 11px;
  padding: 16px;
  background: #fff;
  color: #111;
  box-shadow: var(--fp-shadow);
}

.settings-receipt-preview > div:first-child,
.settings-receipt-payment {
  display: grid;
  gap: 3px;
  text-align: center;
}

.settings-receipt-preview span,
.settings-receipt-preview small {
  font-size: .55rem;
}

.settings-receipt-payment {
  margin-top: 12px;
  padding: 10px 0;
  border-top: 1px dashed #777;
  border-bottom: 1px dashed #777;
}

.settings-receipt-footer {
  margin-top: 12px;
  font-size: .58rem;
  font-weight: 760;
  text-align: center;
}

.settings-secondary-button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--fp-border);
  border-radius: 9px;
  padding: 7px 10px;
  background: #fff;
  color: var(--fp-primary-strong);
  font-size: .62rem;
  font-weight: 740;
}

.settings-secondary-button.danger {
  color: var(--fp-danger);
}

.settings-secondary-button .icon {
  width: 14px;
  height: 14px;
}

@media (max-width: 1024px) {
  .settings-layout {
    grid-template-columns: 1fr;
  }

  .settings-section-nav {
    position: static;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .settings-section-nav {
    display: flex;
    overflow-x: auto;
    padding-bottom: 8px;
  }

  .settings-section-nav button {
    flex: 0 0 auto;
    width: auto;
    white-space: nowrap;
  }

  .settings-form-grid {
    grid-template-columns: 1fr;
  }

  .settings-form-wide {
    grid-column: auto;
  }
}

@media (max-width: 430px) {
  .settings-v2 .settings-header-status {
    grid-template-columns: 1fr auto;
  }

  .settings-form-grid,
  .settings-card-heading {
    padding-left: 11px;
    padding-right: 11px;
  }

  .settings-segmented {
    display: grid;
    width: calc(100% - 22px);
    margin-left: 11px;
    margin-right: 11px;
  }

  .settings-receipt-preview {
    width: calc(100% - 22px);
    margin: 11px;
  }
}

@media (max-width: 390px) {
  .settings-section-nav {
    margin-left: -2px;
    margin-right: -2px;
  }

  .settings-section-nav button {
    min-height: 39px;
    padding: 8px;
  }
}


/* Products — classic FahamPesa web presentation.
   Scoped to the Products workspace only; no shared shell or business logic changes. */
.products-legacy-page {
  width: 100%;
  color: var(--fp-navy, var(--navy));
}

.products-legacy-heading {
  align-items: flex-start;
  margin-bottom: 18px;
}
.products-legacy-heading h1 {
  font-size: 1.22rem;
  letter-spacing: -.025em;
}
.products-legacy-heading p {
  margin-top: 4px;
  font-size: .78rem;
}
.products-legacy-branch {
  margin-top: 3px;
  padding: 7px 10px;
  border: 1px solid var(--fp-border, var(--border));
  border-radius: 9px;
  background: #fff;
  color: var(--fp-text-secondary, var(--muted));
  font-size: .7rem;
  font-weight: 700;
}

.products-legacy-section {
  margin-bottom: 22px;
}
.products-legacy-section-title {
  margin: 0 0 12px;
  color: var(--fp-navy, var(--navy));
  font-size: .98rem;
  font-weight: 780;
  letter-spacing: -.015em;
}

.products-overview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.products-overview-card {
  min-height: 148px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px 22px;
  border: 1px solid #dfe7f0;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(18, 45, 78, .025);
}
.products-overview-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.products-overview-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: #1683ed;
}
.products-overview-icon .icon {
  width: 22px;
  height: 22px;
}
.products-overview-label {
  margin-left: auto;
  color: #4d6178;
  font-size: .76rem;
  font-weight: 680;
}
.products-overview-card > strong {
  display: block;
  margin-top: 18px;
  color: #071a33;
  font-size: 1.7rem;
  line-height: 1;
  letter-spacing: -.035em;
}
.products-overview-card > small {
  margin-top: 8px;
  color: #28ae49;
  font-size: .72rem;
  font-weight: 650;
}
.products-overview-value .products-overview-icon { color: #2eae52; }
.products-overview-low .products-overview-icon { color: #f29d16; }
.products-overview-out .products-overview-icon { color: #f04438; }
.products-alert-icon {
  border: 1.6px solid currentColor;
  border-radius: 8px 8px 10px 10px;
  font-size: .72rem;
  font-weight: 900;
}

.products-quick-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.products-quick-action {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 8px 14px;
  border: 1px solid #dce5ef;
  border-radius: 11px;
  background: #fff;
  color: #075fb7;
  font-size: .76rem;
  font-weight: 720;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.products-quick-action:hover {
  border-color: #b9d4ee;
  background: #fafdff;
  box-shadow: 0 3px 9px rgba(20, 95, 166, .06);
}
.products-quick-action .icon {
  width: 17px;
  height: 17px;
}
.products-quick-action > span:first-child {
  font-size: 1.05rem;
  line-height: 1;
}

.products-catalog-section {
  margin-bottom: 0;
}
.products-catalog-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 12px;
}
.products-catalog-heading .products-legacy-section-title {
  margin: 0;
}
.products-catalog-search {
  width: min(330px, 100%);
  min-height: 40px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid #dce5ef;
  border-radius: 11px;
  background: #fff;
  color: #6d7d91;
}
.products-catalog-search .icon {
  width: 17px;
  height: 17px;
}
.products-catalog-search input {
  width: 100%;
  min-width: 0;
  height: 38px;
  border: 0;
  outline: 0;
  background: transparent;
  color: #102641;
  font: inherit;
  font-size: .76rem;
}
.products-catalog-search input::placeholder {
  color: #8997a9;
}

.products-filter-row {
  display: grid;
  grid-template-columns: minmax(170px, 220px) minmax(140px, 180px) 1fr;
  gap: 10px;
  align-items: end;
  margin-bottom: 10px;
}
.products-filter-row label {
  display: grid;
  gap: 5px;
  color: #66788d;
  font-size: .68rem;
  font-weight: 700;
}
.products-filter-row select {
  width: 100%;
  min-height: 38px;
  border: 1px solid #dce5ef;
  border-radius: 10px;
  padding: 7px 30px 7px 10px;
  background: #fff;
  color: #102641;
  font-size: .74rem;
}
.products-shown-count {
  justify-self: end;
  align-self: center;
  color: #7a899b;
  font-size: .72rem;
}

.products-legacy-list-card {
  overflow: hidden;
  border: 1px solid #dfe7f0;
  border-radius: 13px;
  background: #fff;
}
.products-legacy-list article {
  min-height: 72px;
  align-items: center;
  padding: 15px 18px;
}
.products-legacy-list article:hover {
  background: #fbfdff;
}
.products-product-main {
  min-width: 0;
}
.products-product-main strong {
  color: #071a33;
  font-size: .82rem;
  font-weight: 780;
}
.products-product-main span {
  color: #718197;
  font-size: .7rem;
}
.products-legacy-list .product-row-actions strong {
  color: #071a33;
  font-size: .8rem;
}
.products-legacy-list .product-row-actions span {
  color: #718197;
  font-size: .67rem;
}
.products-legacy-list .secondary-button {
  min-height: 34px;
  border-radius: 9px;
  padding: 6px 11px;
  font-size: .72rem;
}

.products-legacy-management {
  grid-template-columns: minmax(300px, .72fr) minmax(430px, 1.28fr);
  gap: 14px;
}
.products-legacy-management .product-form-panel {
  border-color: #dfe7f0;
  border-radius: 13px;
  box-shadow: none;
}

@media (max-width: 1000px) {
  .products-quick-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .products-legacy-management {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .products-legacy-heading {
    flex-direction: column;
  }
  .products-legacy-branch {
    margin-top: -4px;
  }
  .products-overview-grid {
    grid-template-columns: 1fr;
  }
  .products-overview-card {
    min-height: 126px;
  }
  .products-catalog-heading {
    align-items: stretch;
    flex-direction: column;
  }
  .products-catalog-search {
    width: 100%;
  }
  .products-filter-row {
    grid-template-columns: 1fr 1fr;
  }
  .products-shown-count {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

@media (max-width: 480px) {
  .products-quick-actions,
  .products-filter-row {
    grid-template-columns: 1fr;
  }
  .products-shown-count {
    grid-column: auto;
  }
  .products-overview-card {
    padding: 17px 18px;
  }
  .products-overview-card > strong {
    font-size: 1.48rem;
  }
}


/* Products — classic list actions, details and label printing */
.products-legacy-row {
  grid-template-columns: 46px minmax(0, 1fr) auto;
  cursor: pointer;
}
.products-product-avatar {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid #dce5ef;
  border-radius: 10px;
  background: #fbfdff;
  color: #7992ad;
}
.products-product-avatar .icon {
  width: 22px;
  height: 22px;
}
.products-product-main small {
  display: block;
  margin-top: 5px;
  color: #8290a2;
  font-size: .66rem;
}
.products-inline-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 6px;
}
.products-text-action {
  padding: 0;
  border: 0;
  background: transparent;
  color: #075fb7;
  font: inherit;
  font-size: .68rem;
  font-weight: 690;
  cursor: pointer;
}
.products-text-action:hover {
  text-decoration: underline;
}
.products-legacy-row:focus-visible {
  outline: 2px solid #2585e6;
  outline-offset: -2px;
}

.products-detail-page {
  width: 100%;
}
.products-detail-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
}
.products-back-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 0;
  background: transparent;
  color: #354c67;
  font-size: .76rem;
  font-weight: 680;
  cursor: pointer;
}
.products-back-link:hover {
  color: #075fb7;
}
.products-detail-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.products-detail-primary {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 15px;
  border: 1px solid #126bd4;
  border-radius: 9px;
  background: #126bd4;
  color: #fff;
  font-size: .75rem;
  font-weight: 760;
  cursor: pointer;
}
.products-detail-primary:hover {
  background: #075fb7;
  border-color: #075fb7;
}
.products-detail-grid {
  display: grid;
  grid-template-columns: minmax(300px, .9fr) minmax(480px, 1.25fr);
  gap: 26px;
  align-items: start;
}
.products-detail-visual {
  min-height: 560px;
  overflow: hidden;
  border: 1px solid #dfe7f0;
  border-radius: 14px;
  background: #fff;
}
.products-detail-placeholder {
  min-height: 560px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  background:
    linear-gradient(135deg, rgba(34, 113, 190, .035), rgba(19, 60, 103, .02)),
    #f9fbfe;
  color: #8aa0b7;
}
.products-detail-placeholder .icon {
  width: 80px;
  height: 80px;
  stroke-width: 1.2;
}
.products-detail-placeholder span {
  font-size: .8rem;
  font-weight: 700;
}
.products-detail-content {
  display: grid;
  gap: 18px;
}
.products-detail-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}
.products-detail-title-row h1 {
  margin: 0;
  color: #071a33;
  font-size: 1.68rem;
  letter-spacing: -.035em;
}
.products-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 14px;
  margin-top: 8px;
  color: #66788d;
  font-size: .72rem;
}
.products-stock-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: .69rem;
  font-weight: 760;
  white-space: nowrap;
}
.products-stock-badge.in {
  background: #eaf9ef;
  color: #169b42;
}
.products-stock-badge.out {
  background: #fff0f0;
  color: #d92d20;
}
.products-detail-card {
  padding: 21px;
  border: 1px solid #e4ebf2;
  border-radius: 14px;
  background: #fff;
}
.products-detail-card-blue {
  background: #eef5ff;
  border-color: #e3eefc;
}
.products-detail-card h2 {
  margin: 0 0 20px;
  color: #071a33;
  font-size: .93rem;
}
.products-detail-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
}
.products-detail-stats span,
.products-detail-info-list span,
.products-detail-foot span {
  display: block;
  color: #61748a;
  font-size: .7rem;
}
.products-detail-stats strong {
  display: block;
  margin-top: 7px;
  color: #071a33;
  font-size: 1.45rem;
  letter-spacing: -.03em;
}
.products-detail-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 17px;
  padding-top: 14px;
  border-top: 1px solid rgba(61, 101, 145, .16);
}
.products-detail-foot strong {
  color: #0b9a3e;
  font-size: .72rem;
}
.products-detail-info-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 22px;
}
.products-detail-info-list strong {
  display: block;
  margin-top: 5px;
  color: #102641;
  font-size: .8rem;
}

.products-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(12, 20, 30, .48);
}
.products-label-modal {
  width: min(405px, 100%);
  overflow: hidden;
  border: 1px solid #e0e7ef;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(11, 25, 43, .28);
}
.products-label-modal header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px 10px;
}
.products-label-modal header h2 {
  margin: 0;
  color: #152b45;
  font-size: .98rem;
}
.products-label-modal header p {
  margin: 4px 0 0;
  color: #718197;
  font-size: .7rem;
}
.products-label-modal header button {
  width: 30px;
  height: 30px;
  border: 0;
  background: transparent;
  color: #8290a2;
  font-size: 1.45rem;
  cursor: pointer;
}
.products-label-preview {
  margin: 0 20px 16px;
  padding: 18px 14px;
  border: 1px solid #dfe7f0;
  border-radius: 10px;
  text-align: center;
}
.products-label-preview strong,
.products-label-preview span {
  display: block;
}
.products-label-preview strong {
  margin-top: 3px;
  color: #111;
  font-size: .7rem;
  letter-spacing: .04em;
}
.products-label-preview span {
  margin-top: 6px;
  color: #607086;
  font-size: .66rem;
}
.products-barcode-svg {
  width: min(270px, 100%);
  height: 78px;
  color: #050505;
}
.products-label-print {
  margin: 0 auto 20px;
  display: flex;
}

@media (max-width: 1000px) {
  .products-detail-grid {
    grid-template-columns: 1fr;
  }
  .products-detail-visual,
  .products-detail-placeholder {
    min-height: 280px;
  }
}

@media (max-width: 720px) {
  .products-legacy-row {
    grid-template-columns: 42px minmax(0, 1fr);
  }
  .products-legacy-row .product-row-actions {
    grid-column: 1 / -1;
    width: 100%;
    align-items: stretch;
    flex-direction: row;
    justify-content: space-between;
  }
  .products-inline-actions {
    flex-wrap: wrap;
  }
  .products-detail-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }
  .products-detail-actions {
    width: 100%;
    justify-content: flex-start;
  }
  .products-detail-title-row {
    flex-direction: column;
  }
  .products-detail-stats,
  .products-detail-info-list {
    grid-template-columns: 1fr;
  }
}


/* Inventory — stock levels, movement history and branch transfer workflow */
.inventory-tabs-workspace {
  gap: 14px;
}
.inventory-tabs-hero {
  align-items: center;
}
.inventory-header-actions .secondary-button .icon {
  width: 15px;
  height: 15px;
}
.inventory-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--fp-border);
  border-radius: 12px;
  background: #fff;
}
.inventory-tabs button {
  min-height: 34px;
  border: 0;
  border-radius: 9px;
  padding: 7px 10px;
  background: transparent;
  color: var(--fp-text-secondary);
  font-size: .72rem;
  font-weight: 720;
  cursor: pointer;
}
.inventory-tabs button:hover {
  background: #f7faff;
  color: var(--fp-primary-strong);
}
.inventory-tabs button.active {
  background: var(--fp-primary-soft);
  color: var(--fp-primary-strong);
}
.inventory-tab-badge {
  min-width: 19px;
  height: 19px;
  display: inline-grid;
  place-items: center;
  margin-left: 5px;
  border-radius: 999px;
  background: var(--fp-warning-soft);
  color: #9a5a00;
  font-size: .58rem;
  font-weight: 800;
}
.inventory-dashboard-overview {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.inventory-stock-toolbar {
  margin-bottom: 0;
}
.inventory-movements-card {
  overflow: hidden;
}
.inventory-movement-list {
  display: grid;
}
.inventory-movement-list.compact {
  margin-top: 11px;
  overflow: hidden;
  border: 1px solid var(--fp-border);
  border-radius: 11px;
}
.inventory-movement-row {
  min-height: 68px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #edf1f6;
  background: #fff;
}
.inventory-movement-row:last-child {
  border-bottom: 0;
}
.inventory-movement-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #eaf3ff;
  color: var(--fp-primary);
}
.inventory-movement-icon.positive {
  background: var(--fp-success-soft);
  color: var(--fp-success);
}
.inventory-movement-icon.negative {
  background: #fff0f0;
  color: var(--fp-danger);
}
.inventory-movement-icon .icon {
  width: 15px;
  height: 15px;
}
.inventory-movement-main,
.inventory-movement-value {
  min-width: 0;
}
.inventory-movement-main strong,
.inventory-movement-main span,
.inventory-movement-value strong,
.inventory-movement-value span {
  display: block;
}
.inventory-movement-main strong {
  color: var(--fp-navy);
  font-size: .77rem;
}
.inventory-movement-main span,
.inventory-movement-value span {
  margin-top: 3px;
  color: var(--fp-text-secondary);
  font-size: .63rem;
}
.inventory-movement-value {
  text-align: right;
}
.inventory-movement-value strong {
  color: var(--fp-navy);
  font-size: .77rem;
}

.inventory-transfer-card {
  padding: 16px;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-card-radius);
  background: #fff;
  box-shadow: var(--fp-shadow);
}
.inventory-transfer-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}
.inventory-transfer-heading h2 {
  margin: 0;
  color: var(--fp-navy);
  font-size: .98rem;
}
.inventory-transfer-heading p {
  margin: 4px 0 0;
  color: var(--fp-text-secondary);
  font-size: .68rem;
}
.inventory-transfer-heading .products-detail-primary .icon {
  width: 16px;
  height: 16px;
}
.inventory-incoming-alert {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
  padding: 11px 12px;
  border: 1px solid #f0d49b;
  border-radius: 10px;
  background: #fff9ec;
  color: #8a5a00;
}
.inventory-incoming-alert .icon {
  width: 19px;
  height: 19px;
}
.inventory-incoming-alert strong,
.inventory-incoming-alert span {
  display: block;
}
.inventory-incoming-alert strong {
  font-size: .74rem;
}
.inventory-incoming-alert span {
  margin-top: 2px;
  font-size: .63rem;
}
.inventory-transfer-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.inventory-transfer-columns > section {
  min-width: 0;
}
.inventory-transfer-subhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.inventory-transfer-subhead h3 {
  margin: 0;
  color: var(--fp-navy);
  font-size: .82rem;
}
.inventory-transfer-subhead span {
  min-width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: var(--fp-neutral-soft);
  color: var(--fp-neutral);
  font-size: .62rem;
  font-weight: 800;
}
.inventory-transfer-list {
  display: grid;
  gap: 9px;
}
.inventory-transfer-row {
  padding: 13px;
  border: 1px solid var(--fp-border);
  border-radius: 11px;
  background: #fff;
}
.inventory-transfer-row-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.inventory-transfer-row-head > div {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.inventory-transfer-row-head strong {
  color: var(--fp-navy);
  font-size: .76rem;
}
.inventory-transfer-row-head small {
  color: var(--fp-text-secondary);
  font-size: .59rem;
}
.inventory-transfer-row > p {
  margin: 6px 0 0;
  color: var(--fp-text-secondary);
  font-size: .64rem;
}
.inventory-transfer-status {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--fp-neutral-soft);
  color: var(--fp-neutral);
  font-size: .56rem;
  font-weight: 800;
  text-transform: uppercase;
}
.inventory-transfer-status.pending_approval {
  background: #fff4dc;
  color: #9a5a00;
}
.inventory-transfer-status.approved {
  background: #e9f3ff;
  color: var(--fp-primary-strong);
}
.inventory-transfer-status.completed {
  background: var(--fp-success-soft);
  color: var(--fp-success);
}
.inventory-transfer-status.rejected,
.inventory-transfer-status.cancelled {
  background: var(--fp-danger-soft);
  color: var(--fp-danger);
}
.inventory-transfer-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.inventory-transfer-summary > span {
  padding: 8px 9px;
  border-radius: 8px;
  background: #f8fafc;
}
.inventory-transfer-summary small,
.inventory-transfer-summary strong {
  display: block;
}
.inventory-transfer-summary small {
  color: var(--fp-text-secondary);
  font-size: .55rem;
  text-transform: uppercase;
}
.inventory-transfer-summary strong {
  margin-top: 3px;
  color: var(--fp-navy);
  font-size: .72rem;
}
.inventory-transfer-items {
  display: grid;
  gap: 5px;
  margin-top: 9px;
}
.inventory-transfer-items > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 9px;
  border: 1px solid #edf1f6;
  border-radius: 8px;
}
.inventory-transfer-items strong {
  color: var(--fp-navy);
  font-size: .66rem;
}
.inventory-transfer-items span {
  color: var(--fp-text-secondary);
  font-size: .6rem;
}
.inventory-transfer-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.inventory-transfer-actions .products-detail-primary,
.inventory-transfer-actions .secondary-button {
  min-height: 34px;
  padding: 6px 10px;
  font-size: .66rem;
}
.inventory-transfer-empty {
  min-height: 92px;
  display: grid;
  place-items: center;
  padding: 18px;
  border: 1px dashed var(--fp-border);
  border-radius: 10px;
  color: var(--fp-text-secondary);
  font-size: .68rem;
  text-align: center;
}

.inventory-transfer-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(14, 25, 39, .5);
}
.inventory-transfer-modal {
  width: min(620px, 100%);
  max-height: min(780px, calc(100vh - 40px));
  overflow: auto;
  border: 1px solid var(--fp-border);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 30px 80px rgba(11, 25, 43, .28);
}
.inventory-transfer-modal > header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--fp-border);
  background: #fff;
}
.inventory-transfer-modal > header h2 {
  margin: 0;
  color: var(--fp-navy);
  font-size: 1rem;
}
.inventory-transfer-modal > header p {
  margin: 4px 0 0;
  color: var(--fp-text-secondary);
  font-size: .66rem;
}
.inventory-transfer-modal > header button {
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  color: var(--fp-neutral);
  font-size: 1.35rem;
  cursor: pointer;
}
.inventory-transfer-form {
  display: grid;
  gap: 12px;
  padding: 15px 18px;
}
.inventory-transfer-form > label,
.inventory-transfer-add-row label {
  display: grid;
  gap: 5px;
  color: var(--fp-navy);
  font-size: .68rem;
  font-weight: 720;
}
.inventory-transfer-form select,
.inventory-transfer-form input,
.inventory-transfer-form textarea {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--fp-border);
  border-radius: 9px;
  padding: 8px 10px;
  background: #fff;
  color: var(--fp-navy);
  font: inherit;
  font-size: .72rem;
}
.inventory-transfer-form textarea {
  min-height: 76px;
  resize: vertical;
}
.inventory-transfer-add-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px auto;
  gap: 8px;
  align-items: end;
  padding: 10px;
  border: 1px solid var(--fp-border);
  border-radius: 10px;
  background: #fbfdff;
}
.inventory-transfer-draft {
  display: grid;
  gap: 6px;
}
.inventory-transfer-draft > p {
  margin: 0;
  padding: 10px;
  border: 1px dashed var(--fp-border);
  border-radius: 9px;
  color: var(--fp-text-secondary);
  font-size: .66rem;
}
.inventory-transfer-draft article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--fp-border);
  border-radius: 9px;
  background: #fff;
}
.inventory-transfer-draft strong,
.inventory-transfer-draft span {
  display: block;
}
.inventory-transfer-draft strong {
  color: var(--fp-navy);
  font-size: .69rem;
}
.inventory-transfer-draft span {
  margin-top: 2px;
  color: var(--fp-text-secondary);
  font-size: .59rem;
}
.inventory-transfer-draft article button {
  border: 0;
  background: transparent;
  color: var(--fp-danger);
  font-size: .62rem;
  font-weight: 700;
  cursor: pointer;
}
.inventory-transfer-modal > footer {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  padding: 12px 18px;
  border-top: 1px solid var(--fp-border);
  background: #fff;
}

@media (max-width: 1050px) {
  .inventory-transfer-columns {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 760px) {
  .inventory-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .inventory-tabs-hero {
    align-items: flex-start;
    flex-direction: column;
  }
  .inventory-dashboard-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .inventory-transfer-heading {
    align-items: stretch;
    flex-direction: column;
  }
  .inventory-transfer-heading .products-detail-primary {
    width: 100%;
  }
  .inventory-transfer-add-row {
    grid-template-columns: 1fr 110px;
  }
  .inventory-transfer-add-row > button {
    grid-column: 1 / -1;
  }
}
@media (max-width: 480px) {
  .inventory-dashboard-overview,
  .inventory-tabs {
    grid-template-columns: 1fr;
  }
  .inventory-movement-row {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .inventory-movement-value {
    grid-column: 1 / -1;
    padding-left: 42px;
    text-align: left;
  }
  .inventory-transfer-summary {
    grid-template-columns: 1fr;
  }
  .inventory-transfer-add-row {
    grid-template-columns: 1fr;
  }
}


/* Windows desktop typography refinement
   Typography-only pass: no layout, data, navigation, business logic, or interaction changes. */
@media (min-width: 901px) {
  :root {
    --fp-text-secondary: #58697f;
    --muted: var(--fp-text-secondary);
    --text: #21344b;
  }

  html {
    font-size: 17px;
  }

  body,
  button,
  input,
  select,
  textarea {
    font-family: "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    text-rendering: optimizeLegibility;
    font-optical-sizing: auto;
    font-kerning: normal;
  }

  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.003em;
  }

  .workspace h1,
  .workspace h2,
  .workspace h3,
  .workspace h4,
  .brand-name,
  .workspace-title strong {
    font-family: "Segoe UI Variable Display", "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI", Inter, ui-sans-serif, system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: -0.022em;
  }

  .workspace button,
  .workspace input,
  .workspace select,
  .workspace textarea,
  .sidebar a,
  .sidebar button {
    font-weight: 500;
  }

  .workspace small {
    font-weight: 500;
  }

  .sidebar .nav-label,
  .branch-selector,
  .product-category,
  .menu-card-body small,
  .qty-quick button,
  .mode-service-card small,
  .mode-request-list small,
  .mode-row-actions button, .danger-link,
  .mode-sale-line small, .mode-sale-line > span,
  .pos-workspace-title span,
  .premium-help,
  .add-product-review span,
  .add-product-step > span,
  .add-product-step strong,
  .inventory-metric-card > small,
  .inventory-stock-chips button span,
  .inventory-recent-card span, .inventory-recent-card small,
  .inventory-recent-stock button,
  .inventory-branch-pill,
  .premium-inventory-product span,
  .premium-inventory-product small,
  .premium-inventory-quantity > span:first-child,
  .stock-state,
  .inventory-sync-state,
  .premium-inventory-adjust label,
  .inventory-quick-action small,
  .sales-filter-row label,
  .sales-summary-card span,
  .sales-section-heading p, .sales-section-heading > span,
  .sales-transaction-primary small, .sales-transaction-time span, .sales-transaction-amount span,
  .sale-card-heading p,
  .sale-detail-pair span,
  .sale-items-head,
  .sale-item-row small,
  .sale-notes span,
  .refund-history-list span, .refund-history-list small,
  .sale-side-empty,
  .sale-immutability-note,
  .receipt-business span,
  .receipt-item-row small,
  .receipt-actions-card p,
  .refund-item-card small,
  .refund-reason-field,
  .sales-confirm-amount span,
  .debt-summary-card span,
  .debt-summary-card small,
  .debt-ledger-section-heading p, .debt-card-heading p,
  .debt-ledger-section-heading > span,
  .debt-row-primary span, .debt-row-primary small, .debt-row-amounts span, .debt-row-amounts small, .debt-row-outstanding span, .debt-row-meta span, .debt-row-meta small,
  .debt-row-open,
  .debt-status-chip,
  .new-debt-section-heading p,
  .debt-direction-card span, .debt-kind-card span,
  .debt-detail-summary span,
  .debt-account-grid span,
  .debt-record-list span, .debt-record-list small,
  .debt-payment-history span, .debt-payment-history small,
  .debt-sync-chip,
  .debt-inline-empty,
  .expense-summary-card span,
  .expense-summary-card small,
  .expenses-filter-row label,
  .expenses-section-heading p, .expense-detail-card-heading p,
  .expenses-section-heading > span,
  .expense-row-primary span, .expense-row-primary small, .expense-row-date span, .expense-row-date small, .expense-row-payment span, .expense-row-payment small,
  .expense-sync-chip,
  .expense-row-open,
  .expense-form-section-heading p,
  .expense-edit-integrity small,
  .expense-edit-integrity code,
  .expense-detail-summary span,
  .expense-detail-grid span,
  .expense-accounting-note span,
  .procurement-summary-card span, .invoice-summary-card span,
  .procurement-summary-card small, .invoice-summary-card small,
  .procurement-filter-field,
  .procurement-list-heading p, .invoice-list-heading p, .procurement-detail-card-heading p, .invoice-detail-card-heading p,
  .procurement-list-heading > span, .invoice-list-heading > span, .procurement-detail-card-heading > span, .invoice-detail-card-heading > span,
  .procurement-table-head, .invoice-table-head,
  .procurement-primary-cell small, .invoice-primary-cell small,
  .procurement-row-action, .invoice-row-action,
  .supplier-identity small,
  .procurement-status-chip, .invoice-status-chip,
  .procurement-empty-state p, .invoice-empty-state p,
  .procurement-section-heading p, .invoice-section-heading p,
  .procurement-field, .invoice-field,
  .procurement-readonly-card span,
  .procurement-item-list span, .invoice-item-list span,
  .procurement-item-list button, .invoice-item-list button,
  .procurement-total-row span, .invoice-total-row span,
  .procurement-inline-empty, .invoice-inline-empty,
  .procurement-detail-summary span, .invoice-detail-summary span,
  .procurement-detail-pairs span, .invoice-detail-pairs span,
  .procurement-note-box strong, .invoice-note-box strong,
  .procurement-note-box span, .invoice-note-box span,
  .procurement-receive-form label > span,
  .procurement-receive-form label small,
  .procurement-history-list span,
  .invoice-totals-card span,
  .invoice-payment-history span, .invoice-payment-history small,
  .accounting-status,
  .accounting-filter-card label,
  .accounting-profit-copy small,
  .accounting-metric-card span,
  .accounting-metric-card small,
  .accounting-integrity-card small,
  .business-cost-section-header p, .accounting-section-heading p,
  .accounting-section-heading > span,
  .business-cost-toolbar > span,
  .business-cost-table-head, .business-cost-history-head,
  .business-cost-table-row,
  .business-cost-description small,
  .business-cost-open,
  .accounting-inline-empty p,
  .business-cost-history-row,
  .business-cost-history-description small,
  .business-cost-date, .business-cost-history-date,
  .business-cost-table-row > span:nth-child(3), .business-cost-history-row > span:nth-child(3),
  .business-cost-table-row > span:nth-child(4), .business-cost-history-row > span:nth-child(4),
  .staff-security-strip span,
  .staff-summary-card span,
  .staff-summary-card small,
  .staff-role-filter,
  .staff-list-heading p, .staff-detail-card-heading p,
  .staff-list-heading > span,
  .staff-row-identity small, .staff-row-branches small, .staff-row-access small, .staff-row-access em,
  .staff-status-chip,
  .staff-empty-cues span,
  .staff-form-section-heading p,
  .staff-premium-field,
  .staff-choice-card small, .staff-role-option small,
  .staff-permission-item,
  .staff-pin-help, .staff-inline-error, .staff-muted-copy,
  .staff-edit-integrity small,
  .staff-detail-summary small,
  .staff-detail-pairs span,
  .staff-assigned-list span,
  .staff-permission-readonly span,
  .staff-audit-list strong,
  .staff-audit-list small, .staff-audit-list time,
  .staff-pin-card header p,
  .reports-more-period,
  .reports-custom-range label,
  .reports-export-menu-heading span, .reports-export-menu > p,
  .reports-export-menu-row > span,
  .reports-export-menu-row button,
  .reports-kpi-card > span,
  .reports-kpi-card > small,
  .reports-card-title div p,
  .reports-card-meta,
  .reports-trend-row > span,
  .reports-trend-row > small,
  .reports-compact-list strong,
  .reports-compact-list small,
  .reports-compact-list em,
  .reports-value-stack small,
  .reports-card-empty,
  .reports-detail-heading p,
  .reports-detail-stack .report-section-heading p,
  .reports-detail-stack .report-metric-card span,
  .reports-detail-stack .report-table th, .reports-detail-stack .report-table td,
  .reports-period-tabs button,
  .branch-mini-metric span,
  .branch-mini-metric small,
  .branch-dashboard-metric > div > span,
  .branch-dashboard-metric > div > small,
  .branch-card-heading p,
  .branch-rank,
  .branch-ranking-main small, .branch-ranking-meta small,
  .branch-status-chip,
  .branch-directory-main small, .branch-directory-main em,
  .branch-directory-count small,
  .branch-row-action,
  .branch-manager-note strong,
  .branch-manager-note span,
  .branch-empty-state p,
  .branch-panel-card .compact-form label,
  .branch-transfer-list .management-row,
  .branch-transfer-list .management-row span,
  .branch-form-section-heading p,
  .branch-premium-field,
  .branch-active-choice strong,
  .branch-active-choice small,
  .branch-identity-note strong,
  .branch-identity-note span, .branch-identity-note small,
  .branch-inline-warning,
  .branch-inline-message,
  .branch-tabs button, .branch-tabs a,
  .settings-summary-card > div > span,
  .settings-summary-card small,
  .settings-card-title p,
  .settings-readonly-chip, .settings-status-chip,
  .settings-detail-row span,
  .settings-detail-row strong,
  .settings-detail-row strong.mono,
  .settings-info-note strong,
  .settings-info-note span, .settings-sync-note span,
  .settings-primary-link, .settings-secondary-link, .settings-primary-button,
  .settings-sync-metric > div > span,
  .settings-sync-metric small,
  .settings-shortcut strong,
  .settings-shortcut small,
  .settings-shortcut em,
  .subscription-eyebrow,
  .subscription-status-badge,
  .subscription-message,
  .subscription-mode-hero > span,
  .subscription-mode-icons strong,
  .subscription-business-context span,
  .subscription-business-context strong,
  .subscription-status-heading span,
  .subscription-status-grid span,
  .subscription-section-heading > div > span,
  .subscription-section-heading p,
  .subscription-readonly-chip,
  .subscription-plan-copy small,
  .subscription-plan-price small,
  .subscription-payment-heading p,
  .subscription-phone-field > span,
  .subscription-phone-field small,
  .subscription-pay-button,
  .subscription-payment-note,
  .settings-section-nav button,
  .settings-field > span,
  .settings-field input,
  .settings-readonly-field small,
  .settings-payment-warning,
  .settings-segmented button,
  .settings-receipt-preview span, .settings-receipt-preview small,
  .settings-receipt-footer,
  .settings-secondary-button,
  .inventory-tab-badge,
  .inventory-movement-main span, .inventory-movement-value span,
  .inventory-incoming-alert span,
  .inventory-transfer-subhead span,
  .inventory-transfer-row-head small,
  .inventory-transfer-row > p,
  .inventory-transfer-status,
  .inventory-transfer-summary small,
  .inventory-transfer-items span,
  .inventory-transfer-draft span,
  .inventory-transfer-draft article button {
    font-size: .70rem !important;
  }
}


/* Dashboard — classic Latest Products panel from previous FahamPesa web */
.dashboard-bottom-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: start;
}
.dashboard-bottom-grid.with-products {
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, .85fr);
}
.dashboard-latest-products-panel {
  overflow: hidden;
}
.dashboard-latest-products-list {
  display: grid;
}
.dashboard-latest-product-row {
  min-width: 0;
  min-height: 78px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  border-top: 1px solid #edf1f5;
  color: inherit;
  text-decoration: none;
  background: #fff;
}
.dashboard-latest-product-row:first-child {
  border-top: 0;
}
.dashboard-latest-product-row:hover {
  background: #fbfdff;
}
.dashboard-product-thumb {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid #dfe7f0;
  border-radius: 10px;
  background: #f8fbfe;
  color: #8194aa;
  font-size: .88rem;
  font-weight: 800;
}
.dashboard-product-main,
.dashboard-product-stock {
  min-width: 0;
}
.dashboard-product-main strong,
.dashboard-product-main small,
.dashboard-product-stock strong,
.dashboard-product-stock small {
  display: block;
}
.dashboard-product-main strong {
  overflow: hidden;
  color: var(--navy);
  font-size: .78rem;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dashboard-product-main small {
  margin-top: 4px;
  overflow: hidden;
  color: var(--muted);
  font-size: .66rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dashboard-product-stock {
  text-align: right;
}
.dashboard-product-stock strong {
  color: #159447;
  font-size: .69rem;
  font-weight: 760;
  white-space: nowrap;
}
.dashboard-product-stock small {
  margin-top: 4px;
  color: var(--muted);
  font-size: .61rem;
  white-space: nowrap;
}

@media (max-width: 1080px) {
  .dashboard-bottom-grid.with-products {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 520px) {
  .dashboard-latest-product-row {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 10px;
    padding: 10px 12px;
  }
  .dashboard-product-thumb {
    width: 42px;
    height: 42px;
  }
  .dashboard-product-stock {
    grid-column: 2;
    text-align: left;
  }
  .dashboard-product-stock strong,
  .dashboard-product-stock small {
    display: inline;
  }
  .dashboard-product-stock small {
    margin-left: 8px;
  }
}

/* Windows premium Restaurant Cafe Bar POS */
@media (min-width: 721px) {
  .restaurant-windows-premium {
    background: #f3f6fa;
  }

  .restaurant-windows-premium .restaurant-workflow-tabs {
    min-height: 54px;
    gap: 7px;
    padding: 8px 14px;
    border-bottom: 1px solid #dce5ef;
    background: #ffffff;
  }

  .restaurant-windows-premium .restaurant-workflow-tabs button,
  .restaurant-windows-premium .restaurant-workflow-tabs a {
    min-height: 36px;
    gap: 7px;
    border: 1px solid #d5e0eb;
    border-radius: 10px;
    padding: 7px 12px;
    background: #ffffff;
    color: #244565;
    font-size: .72rem;
    font-weight: 700;
  }

  .restaurant-windows-premium .restaurant-workflow-tabs button:hover,
  .restaurant-windows-premium .restaurant-workflow-tabs a:hover {
    border-color: #abc9e6;
    background: #f6faff;
  }

  .restaurant-windows-premium .restaurant-workflow-tabs button.active {
    border-color: var(--fp-primary);
    background: var(--fp-primary);
    color: #ffffff;
    box-shadow: 0 5px 14px rgba(33, 117, 199, .18);
  }

  .restaurant-windows-premium .restaurant-workflow-tabs .icon {
    width: 15px;
    height: 15px;
  }

  .restaurant-windows-premium .restaurant-workflow-tabs em {
    min-width: 19px;
    height: 19px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: #edf4fb;
    color: #2c5f8d;
    font-size: .59rem;
    font-style: normal;
    font-weight: 800;
  }

  .restaurant-windows-premium .restaurant-workflow-tabs button.active em {
    background: rgba(255,255,255,.18);
    color: #ffffff;
  }

  .restaurant-windows-premium .restaurant-pos-grid {
    height: 100%;
    min-height: 0;
    grid-template-columns: minmax(0, 69fr) minmax(340px, 31fr);
    gap: 12px;
    padding: 12px;
    background: #f3f6fa;
  }

  .restaurant-windows-premium .restaurant-menu-panel,
  .restaurant-windows-premium .restaurant-order-panel {
    height: 100%;
    min-height: 0;
    border: 1px solid #dce5ef;
    border-radius: 15px;
    background: #ffffff;
    box-shadow: 0 6px 18px rgba(28, 48, 72, .055);
  }

  .restaurant-windows-premium .restaurant-menu-panel {
    padding: 14px;
  }

  .restaurant-windows-premium .restaurant-order-panel {
    padding: 14px;
    border-left: 1px solid #dce5ef;
  }
}

.restaurant-menu-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.restaurant-menu-heading {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.restaurant-section-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 10px;
  background: var(--fp-primary-soft);
  color: var(--fp-primary);
}

.restaurant-section-icon .icon {
  width: 19px;
  height: 19px;
}

.restaurant-menu-heading h2 {
  margin: 0;
  color: var(--fp-navy);
  font-size: 1rem;
}

.restaurant-menu-heading p {
  margin: 2px 0 0;
  color: var(--fp-text-secondary);
  font-size: .65rem;
}

.restaurant-add-product {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-left: auto;
  border: 1px solid var(--fp-primary);
  border-radius: 10px;
  padding: 7px 11px;
  background: var(--fp-primary);
  color: #fff;
  text-decoration: none;
  font-size: .68rem;
  font-weight: 750;
  box-shadow: 0 4px 12px rgba(33, 117, 199, .14);
}

.restaurant-add-product:hover {
  border-color: var(--fp-primary-strong);
  background: var(--fp-primary-strong);
}

.restaurant-add-product .icon {
  width: 14px;
  height: 14px;
}

.restaurant-windows-premium .restaurant-search {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  margin-bottom: 10px;
}

.restaurant-search-box {
  min-height: 42px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  border: 1px solid #d7e1ec;
  border-radius: 11px;
  padding: 0 11px;
  background: #ffffff;
}

.restaurant-search-box:focus-within {
  border-color: var(--fp-primary);
  box-shadow: 0 0 0 3px rgba(33,117,199,.09);
}

.restaurant-search-box .icon {
  width: 16px;
  height: 16px;
  color: #71849a;
}

.restaurant-windows-premium .restaurant-search-box input {
  min-height: 40px;
  border: 0;
  outline: 0;
  padding: 0;
  background: transparent;
  color: var(--fp-navy);
  font-size: .77rem;
}

.restaurant-item-count {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  border-radius: 999px;
  padding: 5px 10px;
  background: #edf4fb;
  color: #4a6784 !important;
  font-size: .62rem !important;
  font-weight: 700;
  white-space: nowrap;
}

.restaurant-windows-premium .restaurant-categories {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 12px;
  padding: 0;
  overflow-x: auto;
}

.restaurant-windows-premium .restaurant-categories button {
  min-height: 31px;
  flex: 0 0 auto;
  border: 1px solid #d7e1ec;
  border-radius: 999px;
  padding: 5px 12px;
  background: #fff;
  color: #4c627b;
  font-size: .65rem;
  font-weight: 680;
}

.restaurant-windows-premium .restaurant-categories button:hover,
.restaurant-windows-premium .restaurant-categories button.active {
  border-color: var(--fp-primary);
  background: var(--fp-primary-soft);
  color: var(--fp-primary-strong);
}

.restaurant-windows-premium .restaurant-menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  align-content: start;
}

.restaurant-windows-premium .menu-card {
  min-height: 128px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  border: 1px solid #dce5ef;
  border-radius: 13px;
  background: #fff;
  color: var(--fp-navy);
  text-align: left;
  box-shadow: 0 3px 10px rgba(28, 48, 72, .045);
}

.restaurant-windows-premium .menu-card:hover {
  border-color: #9ec4e7;
  box-shadow: 0 7px 16px rgba(33,117,199,.09);
  transform: translateY(-1px);
}

.restaurant-windows-premium .menu-card.text-only .menu-card-body {
  min-height: 126px;
  justify-content: center;
  text-align: center;
}

.restaurant-windows-premium .menu-card img {
  width: 100%;
  height: 90px;
  object-fit: cover;
  border-bottom: 1px solid #e8eef5;
}

.restaurant-windows-premium .menu-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 11px;
}

.restaurant-windows-premium .menu-card-body strong {
  color: var(--fp-navy);
  font-size: .82rem;
  line-height: 1.25;
}

.restaurant-windows-premium .menu-card-body small {
  margin-top: 3px;
  color: #71849a;
  font-size: .61rem;
}

.restaurant-windows-premium .menu-card-body b {
  margin-top: auto;
  padding-top: 8px;
  color: var(--fp-primary-strong);
  font-size: .78rem;
}

.restaurant-premium-empty {
  grid-column: 1 / -1;
  min-height: 300px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  border: 1px dashed #cbd9e7;
  border-radius: 14px;
  padding: 24px;
  background: #fbfdff;
  text-align: center;
}

.restaurant-empty-icon,
.restaurant-order-empty-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: var(--fp-primary-soft);
  color: var(--fp-primary);
}

.restaurant-empty-icon .icon,
.restaurant-order-empty-icon .icon {
  width: 21px;
  height: 21px;
}

.restaurant-premium-empty h3,
.restaurant-empty-order h3 {
  margin: 0;
  color: var(--fp-navy);
  font-size: .9rem;
}

.restaurant-premium-empty p,
.restaurant-empty-order p {
  max-width: 360px;
  margin: 0;
  color: var(--fp-text-secondary);
  font-size: .66rem;
  line-height: 1.5;
}

.restaurant-premium-empty a {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  border-radius: 9px;
  padding: 7px 11px;
  background: var(--fp-primary);
  color: #fff;
  text-decoration: none;
  font-size: .66rem;
  font-weight: 730;
}

.restaurant-premium-empty a .icon {
  width: 14px;
  height: 14px;
}

.restaurant-windows-premium .restaurant-empty-order {
  min-height: 100%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 28px 20px;
  text-align: center;
}

.restaurant-order-kicker {
  display: block;
  color: var(--fp-primary-strong);
  font-size: .59rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.restaurant-start-order-buttons {
  width: min(270px, 100%);
  grid-template-columns: 1fr 1fr;
  margin-top: 9px;
}

.restaurant-windows-premium .order-type-buttons button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 39px;
  font-weight: 700;
}

.restaurant-windows-premium .order-type-buttons .icon {
  width: 14px;
  height: 14px;
}

.restaurant-current-order-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.restaurant-windows-premium .order-card-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding-bottom: 11px;
  border-bottom: 1px solid #e8eef5;
}

.restaurant-windows-premium .order-card-head > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.restaurant-windows-premium .order-card-head strong {
  color: var(--fp-navy);
  font-size: .92rem;
}

.restaurant-windows-premium .order-card-head small {
  color: var(--fp-text-secondary);
  font-size: .58rem;
}

.restaurant-windows-premium .order-card-head > button {
  min-height: 31px;
  margin-left: auto;
  border: 1px solid #d7e1ec;
  border-radius: 8px;
  padding: 5px 9px;
  background: #fff;
  color: #5f7287;
  font-size: .61rem;
}

.restaurant-windows-premium .restaurant-order-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid #e1e8f0;
  border-radius: 9px;
  background: #f8fbfe;
  font-size: .62rem;
}

.restaurant-windows-premium .restaurant-order-meta span {
  color: var(--fp-text-secondary);
}

.restaurant-windows-premium .restaurant-order-meta strong {
  color: var(--fp-navy);
}

.restaurant-windows-premium .order-lines {
  flex: 1 1 auto;
  min-height: 120px;
  overflow-y: auto;
  margin: 9px 0;
  padding: 0 2px;
}

.restaurant-windows-premium .order-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 7px 9px;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid #e9eff5;
}

.restaurant-order-line-copy {
  min-width: 0;
}

.restaurant-order-line-copy strong,
.restaurant-order-line-copy small {
  display: block;
}

.restaurant-order-line-copy strong {
  overflow: hidden;
  color: var(--fp-navy);
  font-size: .72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.restaurant-order-line-copy small {
  margin-top: 2px;
  color: var(--fp-text-secondary);
  font-size: .57rem;
}

.restaurant-windows-premium .qty-strip {
  display: grid;
  grid-template-columns: 30px 28px 30px;
  align-items: center;
  gap: 3px;
}

.restaurant-windows-premium .qty-strip button {
  width: 30px;
  height: 30px;
  border: 1px solid #d7e1ec;
  border-radius: 8px;
  background: #fff;
  color: var(--fp-navy);
  font-size: .95rem;
}

.restaurant-windows-premium .qty-strip b {
  text-align: center;
  color: var(--fp-navy);
  font-size: .68rem;
}

.restaurant-line-total {
  color: var(--fp-primary-strong);
  font-size: .68rem;
  font-weight: 800;
  white-space: nowrap;
}

.restaurant-windows-premium .qty-quick {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 4px;
}

.restaurant-windows-premium .qty-quick button {
  min-height: 28px;
  border: 1px solid #dce5ef;
  border-radius: 7px;
  background: #f8fbfe;
  color: #49627d;
  font-size: .6rem;
  font-weight: 700;
}

.restaurant-windows-premium .qty-quick button:hover {
  border-color: var(--fp-primary);
  background: var(--fp-primary-soft);
  color: var(--fp-primary-strong);
}

.restaurant-windows-premium .qty-quick .qty-quick-minus {
  border-color: #c8daf0;
  background: #edf5fd;
  color: var(--fp-primary-strong);
  font-size: .8rem;
}

.restaurant-line-action,
.restaurant-windows-premium .remove-line {
  min-height: 28px;
  border: 1px solid #d7e1ec;
  border-radius: 7px;
  padding: 4px 8px;
  background: #fff;
  font-size: .58rem;
  font-weight: 700;
}

.restaurant-line-action {
  grid-column: 2;
  color: #48637f;
}

.restaurant-windows-premium .remove-line {
  grid-column: 3;
  color: var(--fp-danger);
}

.restaurant-order-empty-lines {
  min-height: 120px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  color: #7a8ca0;
  font-size: .63rem;
  text-align: center;
}

.restaurant-order-empty-lines .icon {
  width: 22px;
  height: 22px;
  color: #8da0b4;
}

.restaurant-order-notes {
  margin-top: auto;
}

.restaurant-windows-premium .restaurant-field {
  display: grid;
  gap: 5px;
  color: #5d7188;
  font-size: .61rem;
  font-weight: 700;
}

.restaurant-windows-premium .restaurant-field select,
.restaurant-windows-premium .restaurant-field textarea {
  width: 100%;
  border: 1px solid #d7e1ec;
  border-radius: 9px;
  background: #fff;
  color: var(--fp-navy);
}

.restaurant-windows-premium .restaurant-field select {
  min-height: 37px;
  padding: 6px 9px;
}

.restaurant-windows-premium .restaurant-field textarea {
  min-height: 55px;
  padding: 8px 9px;
  resize: vertical;
}

.restaurant-windows-premium .order-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  margin-top: 8px;
  padding: 9px 0;
  border-top: 1px solid #e4ebf3;
  color: #60758d;
  font-size: .68rem;
}

.restaurant-windows-premium .order-total strong {
  color: var(--fp-navy);
  font-size: 1.08rem;
}

.restaurant-windows-premium .order-actions {
  display: grid;
  grid-template-columns: .62fr .62fr 1.5fr;
  gap: 6px;
  position: sticky;
  bottom: 0;
  margin-top: 0;
  padding: 9px 0 0;
  background: #fff;
}

.restaurant-windows-premium .order-actions button {
  min-height: 39px;
  border: 1px solid #d6e0ea;
  border-radius: 9px;
  background: #fff;
  color: #526b84;
  font-size: .62rem;
  font-weight: 720;
}

.restaurant-windows-premium .order-actions .primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-color: var(--fp-primary);
  background: var(--fp-primary);
  color: #fff;
}

.restaurant-windows-premium .order-actions .primary .icon {
  width: 14px;
  height: 14px;
}

.restaurant-windows-premium .order-actions button:disabled {
  opacity: .42;
}

.restaurant-open-orders,
.restaurant-tables-workspace {
  padding: 14px;
  background: #f3f6fa;
}

.restaurant-open-orders .open-order-card,
.restaurant-tables-workspace .table-card {
  background: #fff;
}

.restaurant-table-form {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 8px;
  align-items: end;
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid #dce5ef;
  border-radius: 12px;
  background: #fff;
}

.restaurant-table-form label {
  display: grid;
  gap: 5px;
  color: #5d7188;
  font-size: .61rem;
  font-weight: 700;
}

.restaurant-table-form input {
  min-height: 38px;
  border: 1px solid #d7e1ec;
  border-radius: 9px;
  padding: 7px 10px;
}

.restaurant-table-form .primary {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 9px;
}


.restaurant-pos-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, .42fr);
  gap: 9px;
  margin-bottom: 10px;
}

.restaurant-barcode-box {
  min-height: 42px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  border: 1px solid #d7e1ec;
  border-radius: 11px;
  padding: 0 11px;
  background: #ffffff;
}

.restaurant-barcode-box:focus-within {
  border-color: var(--fp-primary);
  box-shadow: 0 0 0 3px rgba(33,117,199,.09);
}

.restaurant-barcode-box span {
  color: #647990;
  font-size: .62rem;
  font-weight: 750;
}

.restaurant-barcode-box input {
  min-height: 40px;
  min-width: 0;
  border: 0;
  outline: 0;
  padding: 0;
  background: transparent;
  color: var(--fp-navy);
  font-size: .75rem;
}

.restaurant-subcategories {
  margin-top: -4px !important;
}

.restaurant-quick-qty {
  margin: 0 0 12px;
}

.restaurant-windows-premium .menu-card.out-of-stock {
  opacity: .55;
  cursor: not-allowed;
  box-shadow: none;
}

.restaurant-stock-label {
  margin-top: 4px;
  color: #708397;
  font-size: .58rem;
  font-style: normal;
  font-weight: 650;
}

.restaurant-recent-sales {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #e5ecf3;
}

.restaurant-recent-sales-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
}

.restaurant-recent-sales-head h3 {
  margin: 0;
  color: var(--fp-navy);
  font-size: .78rem;
}

.restaurant-recent-sales-head p {
  margin: 2px 0 0;
  color: var(--fp-text-secondary);
  font-size: .59rem;
}

.restaurant-recent-sales-head a {
  color: var(--fp-primary-strong);
  font-size: .61rem;
  font-weight: 750;
  text-decoration: none;
}

.restaurant-recent-sales .recent-sales-list {
  max-height: 190px;
  overflow-y: auto;
}

.restaurant-recent-sales .recent-sales-empty {
  padding: 12px;
  border: 1px dashed #d4e0ec;
  border-radius: 10px;
  background: #fbfdff;
  color: var(--fp-text-secondary);
  font-size: .62rem;
  text-align: center;
}

.restaurant-cart-utility-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 9px 0;
}

.restaurant-cart-utility-row button,
.restaurant-cart-utility-row a {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid #d7e1ec;
  border-radius: 8px;
  padding: 6px 8px;
  background: #fff;
  color: #526b84;
  font-size: .6rem;
  font-weight: 720;
  text-decoration: none;
}

.restaurant-cart-utility-row button:hover,
.restaurant-cart-utility-row a:hover {
  border-color: #abc9e6;
  background: #f6faff;
}

.restaurant-cart-utility-row .icon {
  width: 13px;
  height: 13px;
}

@media (max-width: 1180px) and (min-width: 721px) {
  .restaurant-windows-premium .restaurant-pos-grid {
    grid-template-columns: minmax(0, 64fr) minmax(330px, 36fr);
    gap: 9px;
    padding: 9px;
  }

  .restaurant-windows-premium .restaurant-menu-grid {
    grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
  }

  .restaurant-menu-heading p {
    display: none;
  }
}

@media (max-width: 900px) and (min-width: 721px) {
  .restaurant-windows-premium .restaurant-pos-grid {
    height: auto;
    grid-template-columns: minmax(0, 1fr) 330px;
    overflow: visible;
  }

  .restaurant-windows-premium .restaurant-menu-panel,
  .restaurant-windows-premium .restaurant-order-panel {
    height: calc(100dvh - 132px);
  }
}

@media (max-width: 720px) {
  .restaurant-pos-search-row {
    grid-template-columns: 1fr;
  }

  .restaurant-menu-toolbar {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .restaurant-add-product {
    margin-left: 0;
  }

  .restaurant-windows-premium .restaurant-menu-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .restaurant-windows-premium .restaurant-empty-order {
    min-height: 330px;
  }

  .restaurant-windows-premium .qty-quick {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .restaurant-table-form {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 430px) {
  .restaurant-windows-premium .restaurant-menu-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .restaurant-menu-heading h2 {
    font-size: .9rem;
  }

  .restaurant-windows-premium .order-line {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .restaurant-line-total {
    grid-column: 1 / -1;
  }

  .restaurant-line-action {
    grid-column: 1;
  }

  .restaurant-windows-premium .remove-line {
    grid-column: 2;
  }
}


/* Settings Devices */
.device-settings-card {
  overflow: hidden;
}

.device-settings-message {
  margin: 0 14px 12px;
  padding: 10px 12px;
  border: 1px solid #c8e1f5;
  border-radius: 10px;
  background: var(--fp-primary-soft);
  color: var(--fp-primary-strong);
  font-size: .62rem;
  font-weight: 680;
}

.device-capability-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  padding: 0 14px 12px;
}

.device-capability-strip article {
  min-height: 70px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px;
  border: 1px solid var(--fp-border);
  border-radius: 12px;
  background: #fbfdff;
}

.device-capability-strip article > .icon {
  width: 20px;
  height: 20px;
  color: var(--fp-primary);
}

.device-capability-strip article > span {
  display: grid;
  gap: 2px;
}

.device-capability-strip strong {
  color: var(--fp-navy);
  font-size: .63rem;
}

.device-capability-strip small {
  color: var(--fp-text-secondary);
  font-size: .52rem;
}

.device-capability-strip article.ready {
  border-color: #cae3d8;
  background: #f6fcf9;
}

.device-capability-strip article.limited {
  border-color: #eadfca;
  background: #fffaf2;
}

.device-compatibility-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  margin: 0 14px 12px;
  padding: 10px 11px;
  border: 1px solid #d6e4f2;
  border-radius: 11px;
  background: #f7fbff;
}

.device-compatibility-note > .icon {
  width: 16px;
  height: 16px;
  color: var(--fp-primary);
}

.device-compatibility-note > div {
  display: grid;
  gap: 2px;
}

.device-compatibility-note strong {
  color: var(--fp-navy);
  font-size: .61rem;
}

.device-compatibility-note span {
  color: var(--fp-text-secondary);
  font-size: .53rem;
  line-height: 1.45;
}

.device-preset-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  padding: 0 14px 14px;
}

.device-preset-grid button {
  min-height: 112px;
  display: grid;
  justify-items: start;
  align-content: start;
  gap: 6px;
  border: 1px solid var(--fp-border);
  border-radius: 13px;
  padding: 12px;
  background: #fff;
  color: var(--fp-navy);
  text-align: left;
}

.device-preset-grid button:hover {
  border-color: #9fc6e9;
  background: #fafdff;
}

.device-preset-grid button > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--fp-primary-soft);
  color: var(--fp-primary);
}

.device-preset-grid button .icon {
  width: 17px;
  height: 17px;
}

.device-preset-grid button strong {
  font-size: .64rem;
}

.device-preset-grid button small {
  color: var(--fp-text-secondary);
  font-size: .51rem;
  line-height: 1.4;
}

.device-add-form {
  display: grid;
  grid-template-columns: minmax(180px, 1.3fr) repeat(5, minmax(130px, 1fr)) auto;
  gap: 8px;
  align-items: end;
  margin: 0 14px 14px;
  padding: 13px;
  border: 1px solid #d8e5f2;
  border-radius: 13px;
  background: #f6faff;
}

.device-add-heading {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
}

.device-add-heading > div {
  display: grid;
  gap: 2px;
}

.device-add-heading strong {
  color: var(--fp-navy);
  font-size: .69rem;
}

.device-add-heading span {
  color: var(--fp-text-secondary);
  font-size: .52rem;
}

.device-add-form label {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.device-add-form label > span {
  color: var(--fp-navy);
  font-size: .53rem;
  font-weight: 720;
}

.device-add-form input,
.device-add-form select {
  width: 100%;
  min-width: 0;
  min-height: 39px;
  border: 1px solid var(--fp-border);
  border-radius: 8px;
  padding: 7px 9px;
  background: #fff;
  color: var(--fp-navy);
  font: inherit;
  font-size: .59rem;
  outline: 0;
}

.device-add-form input:focus,
.device-add-form select:focus {
  border-color: var(--fp-primary);
  box-shadow: 0 0 0 3px rgba(33,117,199,.09);
}

.device-add-button {
  min-width: 118px;
  min-height: 39px;
}

.device-scanner-test {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, .7fr);
  gap: 12px;
  align-items: center;
  margin: 0 14px 14px;
  padding: 12px;
  border: 1px solid #bcdaf3;
  border-radius: 12px;
  background: var(--fp-primary-soft);
}

.device-scanner-test > div {
  display: flex;
  align-items: center;
  gap: 9px;
}

.device-scanner-test > div > .icon {
  width: 20px;
  height: 20px;
  color: var(--fp-primary);
}

.device-scanner-test > div > span {
  display: grid;
  gap: 2px;
}

.device-scanner-test strong {
  color: var(--fp-navy);
  font-size: .63rem;
}

.device-scanner-test small {
  color: var(--fp-text-secondary);
  font-size: .52rem;
}

.device-scanner-test input {
  min-height: 41px;
  border: 1px solid #a8cae8;
  border-radius: 9px;
  padding: 8px 10px;
  background: #fff;
  font: inherit;
  font-size: .62rem;
  outline: 0;
}

.configured-device-heading {
  display: flex;
  align-items: center;
  padding: 0 14px 9px;
}

.configured-device-heading > div {
  display: grid;
  gap: 1px;
}

.configured-device-heading strong {
  color: var(--fp-navy);
  font-size: .68rem;
}

.configured-device-heading span {
  color: var(--fp-text-secondary);
  font-size: .51rem;
}

.configured-device-list {
  display: grid;
  gap: 8px;
  padding: 0 14px 14px;
}

.configured-device-card {
  min-height: 80px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  padding: 11px;
  border: 1px solid var(--fp-border);
  border-radius: 12px;
  background: #fff;
}

.configured-device-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--fp-primary-soft);
  color: var(--fp-primary);
}

.configured-device-icon .icon {
  width: 19px;
  height: 19px;
}

.configured-device-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.configured-device-copy > div {
  display: flex;
  align-items: center;
  gap: 6px;
}

.configured-device-copy strong {
  overflow: hidden;
  color: var(--fp-navy);
  font-size: .66rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.configured-device-copy > span,
.configured-device-copy > small {
  color: var(--fp-text-secondary);
  font-size: .52rem;
}

.device-default-chip {
  flex: 0 0 auto;
  padding: 3px 6px;
  border-radius: 999px;
  background: var(--fp-primary-soft);
  color: var(--fp-primary-strong);
  font-size: .49rem;
  font-weight: 780;
}

.configured-device-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 82px;
  color: var(--fp-text-secondary);
  font-size: .53rem;
  font-weight: 700;
}

.configured-device-status > span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #93a4b6;
}

.configured-device-status.verified {
  color: var(--fp-success);
}

.configured-device-status.verified > span {
  background: var(--fp-success);
}

.configured-device-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
}

.configured-device-actions button {
  min-height: 31px;
  border: 1px solid #d4e0eb;
  border-radius: 8px;
  padding: 5px 8px;
  background: #fff;
  color: var(--fp-primary-strong);
  font-size: .53rem;
  font-weight: 720;
}

.configured-device-actions button:hover {
  border-color: var(--fp-primary);
  background: var(--fp-primary-soft);
}

.configured-device-actions button.danger {
  color: var(--fp-danger);
}

.device-empty-state {
  min-height: 120px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  margin: 0 14px 14px;
  border: 1px dashed #cbd9e7;
  border-radius: 12px;
  background: #fbfdff;
  text-align: center;
}

.device-empty-state > .icon {
  width: 24px;
  height: 24px;
  color: #8ca0b5;
}

.device-empty-state strong {
  color: var(--fp-navy);
  font-size: .66rem;
}

.device-empty-state span {
  max-width: 430px;
  color: var(--fp-text-secondary);
  font-size: .52rem;
}

@media (max-width: 1200px) {
  .device-preset-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .device-add-form {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .device-add-heading {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .device-capability-strip,
  .device-preset-grid,
  .device-add-form,
  .device-scanner-test {
    grid-template-columns: 1fr;
  }

  .configured-device-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .configured-device-status,
  .configured-device-actions {
    grid-column: 1 / -1;
  }

  .configured-device-actions {
    justify-content: flex-start;
  }
}


.subscription-signout-button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--fp-border);
  border-radius: 10px;
  padding: 7px 11px;
  background: #fff;
  color: var(--fp-navy);
  font-size: .61rem;
  font-weight: 760;
  cursor: pointer;
}

.subscription-signout-button:hover,
.subscription-signout-button:focus-visible {
  border-color: #a9cbe8;
  background: var(--fp-primary-soft);
  color: var(--fp-primary-strong);
  outline: 0;
}

.subscription-signout-button .icon {
  width: 15px;
  height: 15px;
  color: var(--fp-primary);
}

@media (max-width: 520px) {
  .subscription-signout-button {
    margin-left: auto;
  }
}


/* Settings v3 top tabs */
.settings-v2 .settings-layout {
  display: block;
}

.settings-v2 .settings-section-nav {
  position: sticky;
  top: 64px;
  z-index: 15;
  display: flex;
  gap: 7px;
  width: 100%;
  overflow-x: auto;
  margin-bottom: 14px;
  padding: 7px;
  border: 1px solid var(--fp-border);
  border-radius: 14px;
  background: rgba(255,255,255,.97);
  box-shadow: 0 8px 24px rgba(24,55,88,.08);
  scrollbar-width: thin;
}

.settings-v2 .settings-section-nav button {
  width: auto;
  min-width: max-content;
  min-height: 42px;
  flex: 0 0 auto;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 8px 12px;
  color: #526a84;
  font-size: .68rem !important;
  font-weight: 760;
  white-space: nowrap;
}

.settings-v2 .settings-section-nav button.active {
  border-color: #c7def3;
  background: var(--fp-primary-soft);
  color: var(--fp-primary-strong);
}

.settings-v2 .settings-section-nav button.active .icon {
  color: var(--fp-primary);
}

.settings-v2 .settings-sections {
  display: block;
}

.settings-panel-hidden {
  display: none !important;
}

.settings-v2 .settings-section-card {
  width: 100%;
  scroll-margin-top: 128px;
}

/* Devices stronger type and real connection controls */
.device-settings-card .settings-card-title h2 {
  font-size: 1.02rem !important;
}

.device-settings-card .settings-card-title p {
  font-size: .69rem !important;
  line-height: 1.45;
}

.device-capability-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.device-capability-strip strong,
.device-preset-grid button strong,
.device-add-heading strong,
.configured-device-heading strong,
.configured-device-copy strong,
.device-scanner-test strong {
  font-size: .72rem !important;
}

.device-capability-strip small,
.device-preset-grid button small,
.device-add-heading span,
.configured-device-heading span,
.configured-device-copy > span,
.configured-device-copy > small,
.device-scanner-test small,
.device-compatibility-note span {
  font-size: .61rem !important;
  line-height: 1.45;
}

.device-compatibility-note strong,
.device-add-form label > span,
.configured-device-status,
.configured-device-actions button {
  font-size: .64rem !important;
}

.device-add-form input,
.device-add-form select {
  min-height: 42px;
  font-size: .66rem !important;
}

.device-discover-button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid #9fc6e9;
  border-radius: 9px;
  padding: 8px 11px;
  background: #fff;
  color: var(--fp-primary-strong);
  font-size: .64rem;
  font-weight: 760;
  cursor: pointer;
}

.device-discover-button:hover:not(:disabled) {
  background: var(--fp-primary-soft);
  border-color: var(--fp-primary);
}

.device-discover-button:disabled {
  opacity: .62;
  cursor: wait;
}

.device-discover-button .icon {
  width: 15px;
  height: 15px;
}

.device-discovery-result {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 11px;
  border: 1px solid #bfe0cf;
  border-radius: 10px;
  background: #f4fcf8;
  color: var(--fp-success);
}

.device-discovery-result > .icon {
  width: 17px;
  height: 17px;
}

.device-discovery-result > div {
  display: grid;
  gap: 2px;
}

.device-discovery-result strong {
  font-size: .66rem;
}

.device-discovery-result span {
  color: #47675a;
  font-size: .6rem;
}

@media (max-width: 1200px) {
  .device-capability-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .settings-v2 .settings-section-nav {
    top: 56px;
    border-radius: 11px;
  }

  .device-capability-strip {
    grid-template-columns: 1fr;
  }
}


/* Settings v4 compact grouped navigation */
.settings-v2 {
  width: min(1180px, 100%);
}

.settings-tabs-shell {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.settings-v2 .settings-primary-tabs {
  position: static;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
  width: 100%;
  overflow: visible;
  margin: 0;
  padding: 7px;
  border: 1px solid var(--fp-border);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--fp-shadow);
}

.settings-v2 .settings-primary-tabs button {
  min-width: 0;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 8px 9px;
  background: transparent;
  color: #526a84;
  font-size: .68rem !important;
  font-weight: 760;
  white-space: nowrap;
}

.settings-v2 .settings-primary-tabs button.active {
  border-color: #bfd9f1;
  background: var(--fp-primary-soft);
  color: var(--fp-primary-strong);
}

.settings-v2 .settings-primary-tabs .icon {
  width: 15px;
  height: 15px;
  color: var(--fp-primary);
}

.settings-subsection-nav {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  padding: 5px 7px;
  border: 1px solid #e2e9f1;
  border-radius: 11px;
  background: #f8fbfe;
}

.settings-subsection-nav button {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 8px;
  padding: 6px 10px;
  background: transparent;
  color: #60758c;
  font-size: .62rem;
  font-weight: 720;
}

.settings-subsection-nav button.active {
  background: #fff;
  color: var(--fp-primary-strong);
  box-shadow: 0 2px 8px rgba(31,68,105,.08);
}

.settings-subsection-nav .icon {
  width: 13px;
  height: 13px;
  color: var(--fp-primary);
}

.settings-v2 .settings-section-card {
  border-radius: 16px;
}

.settings-v2 .settings-card-heading {
  padding-top: 14px;
  padding-bottom: 12px;
}

@media (max-width: 900px) {
  .settings-v2 .settings-primary-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .settings-v2 .settings-primary-tabs {
    display: flex;
    overflow-x: auto;
  }

  .settings-v2 .settings-primary-tabs button {
    min-width: max-content;
  }
}

/* Retail POS premium checkout tools */
.pos-adjustments {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 7px;
  align-items: end;
  margin-top: 10px;
}

.pos-adjustments label,
.split-payment-grid label {
  min-width: 0;
  display: grid;
  gap: 4px;
  color: #60758c;
  font-size: .61rem;
  font-weight: 700;
}

.pos-adjustments input,
.split-payment-grid input,
.split-payment-grid select {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  border: 1px solid #d7e1ec;
  border-radius: 8px;
  padding: 7px 8px;
  background: #fff;
  color: var(--fp-navy);
  font: inherit;
  font-size: .64rem;
  outline: 0;
}

.pos-adjustments input:focus,
.split-payment-grid input:focus,
.split-payment-grid select:focus {
  border-color: var(--fp-primary);
  box-shadow: 0 0 0 3px rgba(33,117,199,.09);
}

.split-toggle {
  min-height: 36px;
  border: 1px solid #c9d8e7;
  border-radius: 8px;
  padding: 7px 10px;
  background: #fff;
  color: #526b84;
  font-size: .61rem;
  font-weight: 740;
  white-space: nowrap;
}

.split-toggle.active {
  border-color: var(--fp-primary);
  background: var(--fp-primary-soft);
  color: var(--fp-primary-strong);
}

.pos-total-stack {
  margin: 12px 0 8px;
  padding: 10px 0;
  border-top: 1px solid #e6edf4;
  border-bottom: 1px solid #e6edf4;
}

.total-row.adjustment {
  color: #60758c;
}

.total-row.adjustment strong {
  font-size: .78rem;
}

.total-row.grand-total {
  margin-top: 10px;
}

.total-row.grand-total span {
  color: var(--fp-navy);
  font-weight: 800;
}

.total-row.grand-total strong {
  color: var(--fp-primary-strong);
  font-size: 1.12rem;
}

.split-payment-grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(110px, .7fr) minmax(0, .8fr);
  gap: 7px;
  margin-top: 10px;
}

.split-balance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 38px;
  margin-top: 8px;
  border: 1px solid #ecd9bd;
  border-radius: 9px;
  padding: 8px 10px;
  background: #fff9ef;
  color: #896327;
  font-size: .62rem;
  font-weight: 720;
}

.split-balance.ready {
  border-color: #bee0cd;
  background: #f3fbf7;
  color: var(--fp-success);
}

.sale-complete-panel {
  flex: 1;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 34px 24px;
  text-align: center;
  background: #fbfdff;
}

.sale-complete-icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--fp-success-soft);
  color: var(--fp-success);
  font-size: 1.65rem;
  font-weight: 900;
}

.sale-complete-panel h3 {
  margin: 0;
  color: var(--fp-navy);
  font-size: 1rem;
}

.sale-complete-panel > strong {
  color: var(--fp-primary-strong);
  font-size: 1.55rem;
}

.sale-complete-panel p {
  max-width: 290px;
  margin: 0;
  color: var(--fp-text-secondary);
  font-size: .65rem;
  line-height: 1.45;
}

.sale-complete-actions {
  width: min(320px, 100%);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}

.sale-complete-actions button {
  min-height: 44px;
  border: 1px solid #cfdbe7;
  border-radius: 10px;
  background: #fff;
  color: var(--fp-primary-strong);
  font-size: .65rem;
  font-weight: 780;
}

.sale-complete-actions button.primary {
  border-color: var(--fp-primary);
  background: var(--fp-primary);
  color: #fff;
}

@media (max-width: 720px) {
  .pos-adjustments,
  .split-payment-grid {
    grid-template-columns: 1fr;
  }

  .split-toggle {
    width: 100%;
  }
}


/* Suppliers premium directory */
.supplier-premium-workspace {
  gap: 14px;
}

.supplier-premium-header {
  min-height: 58px;
  align-items: center;
  padding: 0 2px;
}

.supplier-premium-header .supplier-header-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
}

.supplier-premium-header .procurement-heading-copy h1 {
  margin: 0;
  font-size: 1.32rem;
  letter-spacing: -.025em;
}

.supplier-premium-header .procurement-heading-copy p {
  margin-top: 3px;
  font-size: .64rem;
  color: var(--fp-text-secondary);
}

.supplier-add-button {
  min-height: 40px;
  padding-inline: 14px;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(33,117,199,.13);
}

.supplier-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.supplier-metric-card {
  min-height: 88px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 14px;
  border: 1px solid rgba(215,226,238,.76);
  border-radius: 14px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 7px 22px rgba(28,61,96,.055);
}

.supplier-metric-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 10px;
  background: var(--fp-primary-soft);
  color: var(--fp-primary);
}

.supplier-metric-card.success .supplier-metric-icon {
  background: var(--fp-success-soft);
  color: var(--fp-success);
}

.supplier-metric-icon .icon {
  width: 17px;
  height: 17px;
}

.supplier-metric-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.supplier-metric-copy small {
  overflow: hidden;
  color: var(--fp-text-secondary);
  font-size: .54rem;
  font-weight: 680;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.supplier-metric-copy strong {
  color: var(--fp-navy);
  font-size: 1.03rem;
  line-height: 1.1;
}

.supplier-metric-copy em {
  overflow: hidden;
  color: #718297;
  font-size: .5rem;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.supplier-toolbar {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) auto minmax(150px, .24fr);
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(215,226,238,.72);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 7px 22px rgba(28,61,96,.045);
}

.supplier-search-field {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid #d8e2ec;
  border-radius: 10px;
  padding: 0 11px;
  background: #fbfdff;
}

.supplier-search-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--fp-primary);
}

.supplier-search-field input {
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--fp-navy);
  font: inherit;
  font-size: .64rem;
  outline: 0;
}

.supplier-search-field:focus-within {
  border-color: #9dc7ec;
  box-shadow: 0 0 0 3px rgba(33,117,199,.08);
}

.supplier-filter-chips {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 10px;
  background: #f0f5fa;
}

.supplier-filter-chips button {
  min-height: 32px;
  border: 0;
  border-radius: 8px;
  padding: 6px 11px;
  background: transparent;
  color: #62758b;
  font-size: .58rem;
  font-weight: 760;
}

.supplier-filter-chips button.active {
  background: #fff;
  color: var(--fp-primary-strong);
  box-shadow: 0 2px 8px rgba(32,67,104,.09);
}

.supplier-sort-field {
  display: grid;
  gap: 4px;
}

.supplier-sort-field > span {
  color: #6c7e91;
  font-size: .5rem;
  font-weight: 720;
}

.supplier-sort-field select {
  min-height: 36px;
  border: 1px solid #d8e2ec;
  border-radius: 9px;
  padding: 6px 9px;
  background: #fff;
  color: var(--fp-navy);
  font: inherit;
  font-size: .58rem;
  font-weight: 680;
  outline: 0;
}

.supplier-directory-card {
  overflow: hidden;
  border: 1px solid rgba(215,226,238,.72);
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 9px 28px rgba(28,61,96,.05);
}

.supplier-directory-heading {
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
}

.supplier-directory-heading > div {
  display: grid;
  gap: 2px;
}

.supplier-directory-heading h2 {
  margin: 0;
  color: var(--fp-navy);
  font-size: .82rem;
  letter-spacing: -.01em;
}

.supplier-directory-heading p,
.supplier-directory-heading > span {
  margin: 0;
  color: var(--fp-text-secondary);
  font-size: .53rem;
}

.supplier-directory-columns {
  grid-template-columns: minmax(210px, 1.22fr) minmax(130px, .74fr) minmax(115px, .66fr) minmax(155px, .9fr) 82px minmax(92px,.55fr);
}

.supplier-directory-head,
.supplier-directory-row {
  display: grid;
  gap: 10px;
  align-items: center;
}

.supplier-directory-head {
  min-height: 38px;
  padding: 0 16px;
  border-top: 1px solid #eef3f7;
  border-bottom: 1px solid #e5edf4;
  background: #f8fbfd;
}

.supplier-directory-head span {
  color: #6b7d91;
  font-size: .5rem;
  font-weight: 760;
  letter-spacing: .025em;
  text-transform: uppercase;
}

.supplier-directory-row {
  width: 100%;
  min-height: 68px;
  border: 0;
  border-bottom: 1px solid #edf2f6;
  padding: 9px 16px;
  background: #fff;
  color: var(--fp-navy);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .16s ease, box-shadow .16s ease;
}

.supplier-directory-row:last-child {
  border-bottom: 0;
}

.supplier-directory-row:hover,
.supplier-directory-row:focus-visible {
  position: relative;
  z-index: 1;
  background: #f5faff;
  box-shadow: inset 3px 0 0 var(--fp-primary);
  outline: 0;
}

.supplier-identity {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}

.supplier-avatar {
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 10px;
  background: var(--fp-primary);
  color: #fff;
  font-size: .64rem;
  font-weight: 800;
}

.supplier-identity > span:last-child,
.supplier-contact-cell {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.supplier-identity strong,
.supplier-contact-cell strong {
  overflow: hidden;
  color: var(--fp-navy);
  font-size: .64rem;
  font-weight: 780;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.supplier-identity small,
.supplier-contact-cell small {
  overflow: hidden;
  color: var(--fp-text-secondary);
  font-size: .51rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.supplier-data-cell {
  overflow: hidden;
  color: #405773;
  font-size: .58rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.supplier-view-action {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  color: var(--fp-primary-strong);
  font-size: .55rem;
  font-weight: 770;
  white-space: nowrap;
}

.supplier-directory-mobile {
  display: none;
}

.supplier-empty-state {
  border-top: 1px solid #edf2f6;
}

.supplier-premium-form-workspace {
  padding-top: 6px;
}

.supplier-premium-form-card {
  width: min(980px, 100%);
  border: 1px solid rgba(215,226,238,.72);
  border-radius: 18px;
  box-shadow: 0 14px 40px rgba(28,61,96,.07);
}

.supplier-form-header {
  min-height: 78px;
  padding-block: 14px;
}

.supplier-premium-form {
  background: #f7fafc;
}

.supplier-form-section {
  margin: 0 14px 12px;
  border: 0;
  border-radius: 14px;
  padding: 15px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(31,66,101,.045);
}

.supplier-form-section .procurement-section-heading {
  margin-bottom: 13px;
}

.supplier-form-stacked {
  display: grid;
  gap: 10px;
}

.supplier-status-section {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(220px,.38fr);
  gap: 18px;
  align-items: center;
}

.supplier-status-section .procurement-section-heading {
  margin-bottom: 0;
}

.supplier-status-control {
  display: grid;
  gap: 5px;
}

.supplier-status-control > span {
  color: var(--fp-navy);
  font-size: .56rem;
  font-weight: 740;
}

.supplier-status-control select {
  min-height: 42px;
  border: 1px solid #d7e2ed;
  border-radius: 9px;
  padding: 7px 9px;
  background: #fff;
  color: var(--fp-navy);
  font: inherit;
  font-size: .62rem;
  font-weight: 680;
  outline: 0;
}

.supplier-form-actions {
  border-top: 0;
  padding: 4px 14px 16px;
  background: #f7fafc;
}

.supplier-save-button {
  min-width: 132px;
}

@media (max-width: 1050px) {
  .supplier-metrics-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .supplier-toolbar {
    grid-template-columns: minmax(260px,1fr) auto;
  }

  .supplier-sort-field {
    grid-column: 1 / -1;
    grid-template-columns: auto minmax(160px,220px);
    align-items: center;
    justify-content: end;
  }

  .supplier-directory-columns {
    grid-template-columns: minmax(200px,1.2fr) minmax(125px,.75fr) minmax(110px,.68fr) 82px minmax(86px,.55fr);
  }

  .supplier-directory-head span:nth-child(4),
  .supplier-directory-row > span:nth-child(4) {
    display: none;
  }
}

@media (max-width: 760px) {
  .supplier-premium-header {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .supplier-add-button {
    width: 100%;
    margin-top: 4px;
  }

  .supplier-metrics-grid {
    grid-template-columns: 1fr 1fr;
    gap: 7px;
  }

  .supplier-metric-card {
    min-height: 80px;
    padding: 10px;
  }

  .supplier-toolbar {
    grid-template-columns: 1fr;
  }

  .supplier-filter-chips {
    width: 100%;
  }

  .supplier-filter-chips button {
    flex: 1;
  }

  .supplier-sort-field {
    grid-column: auto;
    grid-template-columns: auto 1fr;
    justify-content: stretch;
  }

  .supplier-directory-desktop {
    display: none;
  }

  .supplier-directory-mobile {
    display: grid;
    gap: 9px;
    padding: 10px;
    border-top: 1px solid #edf2f6;
    background: #f7fafc;
  }

  .supplier-mobile-card {
    width: 100%;
    display: grid;
    gap: 12px;
    border: 1px solid #dfe8f1;
    border-radius: 13px;
    padding: 12px;
    background: #fff;
    color: var(--fp-navy);
    font: inherit;
    text-align: left;
    box-shadow: 0 4px 14px rgba(31,66,101,.045);
  }

  .supplier-mobile-card:active {
    background: #f6faff;
  }

  .supplier-mobile-head {
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    gap: 9px;
    align-items: center;
  }

  .supplier-mobile-head > span:nth-child(2) {
    min-width: 0;
    display: grid;
    gap: 2px;
  }

  .supplier-mobile-head strong {
    overflow: hidden;
    font-size: .68rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .supplier-mobile-head small {
    overflow: hidden;
    color: var(--fp-text-secondary);
    font-size: .52rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .supplier-mobile-details {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px;
  }

  .supplier-mobile-details > span {
    display: grid;
    gap: 2px;
  }

  .supplier-mobile-details small {
    color: var(--fp-text-secondary);
    font-size: .5rem;
  }

  .supplier-mobile-details strong {
    overflow: hidden;
    color: #425a73;
    font-size: .58rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .supplier-mobile-view {
    display: flex;
    justify-content: flex-end;
    color: var(--fp-primary-strong);
    font-size: .57rem;
    font-weight: 770;
  }

  .supplier-status-section {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

@media (max-width: 480px) {
  .supplier-metrics-grid {
    grid-template-columns: 1fr;
  }

  .supplier-mobile-details {
    grid-template-columns: 1fr;
  }
}


.supplier-status-actions {
  display: grid;
  grid-template-columns: minmax(180px,1fr) auto;
  gap: 8px;
  align-items: end;
}

.supplier-status-toggle {
  min-height: 42px;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .supplier-status-actions {
    grid-template-columns: 1fr;
  }
}


/* POS access and always-visible checkout actions */
.pos-signout-button,
.topbar-signout-button {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 9px;
  padding: 6px 10px;
  background: transparent;
  color: inherit;
  font-size: .62rem;
  font-weight: 760;
  white-space: nowrap;
}

.topbar-signout-button {
  border-color: var(--fp-border);
  background: #fff;
  color: var(--fp-danger);
}

.pos-signout-button:hover,
.pos-signout-button:focus-visible {
  background: rgba(255,255,255,.12);
  outline: 0;
}

.topbar-signout-button:hover,
.topbar-signout-button:focus-visible {
  border-color: #e5c2c2;
  background: #fff7f7;
  outline: 0;
}

.pos-signout-button .icon,
.topbar-signout-button .icon {
  width: 14px;
  height: 14px;
}

.retail-sale-panel {
  overflow: hidden !important;
}

.retail-sale-panel .cart-heading,
.retail-sale-panel .cart-utility-row {
  flex: 0 0 auto;
}

.retail-sale-panel .cart-lines {
  flex: 1 1 0;
  min-height: 48px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.retail-sale-panel .cart-empty {
  min-height: 82px;
}

.retail-sale-panel .payment-panel {
  position: relative;
  z-index: 4;
  flex: 0 0 auto;
  max-height: none;
  overflow: visible;
  padding: 9px 14px 10px;
  box-shadow: 0 -8px 20px rgba(19,47,80,.045);
}

.retail-sale-panel .payment-panel label {
  gap: 3px;
  font-size: .61rem;
}

.retail-sale-panel .payment-panel input,
.retail-sale-panel .split-payment-grid select {
  min-height: 32px;
  padding: 6px 8px;
}

.retail-sale-panel .pos-adjustments {
  margin-top: 7px;
  gap: 6px;
}

.retail-sale-panel .pos-adjustments input,
.retail-sale-panel .split-payment-grid input,
.retail-sale-panel .split-payment-grid select,
.retail-sale-panel .split-toggle {
  min-height: 32px;
}

.retail-sale-panel .pos-total-stack {
  margin: 7px 0 5px;
  padding: 5px 0;
}

.retail-sale-panel .total-row {
  margin: 4px 0;
}

.retail-sale-panel .total-row.grand-total {
  margin-top: 6px;
}

.retail-sale-panel .split-payment-grid {
  gap: 6px;
  margin-top: 6px;
}

.retail-sale-panel .split-balance {
  min-height: 32px;
  margin-top: 5px;
  padding: 6px 8px;
}

.retail-sale-panel .cash-button {
  min-height: 40px;
  margin-top: 6px;
}

.retail-sale-panel .sale-complete-panel {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  padding: 24px 18px;
}

.retail-sale-panel .sale-complete-actions {
  position: sticky;
  bottom: 0;
  margin-top: 10px;
}

@media (max-width: 1180px) {
  .pos-workspace-header .pos-signout-button span,
  .topbar-signout-button span {
    display: none;
  }

  .pos-signout-button,
  .topbar-signout-button {
    min-width: 36px;
    width: 36px;
    padding: 6px;
  }
}

@media (max-width: 720px) {
  .pos-signout-button {
    min-width: 36px;
    width: 36px;
    padding: 6px;
  }

  .retail-sale-panel .payment-panel {
    position: sticky;
    bottom: 0;
  }
}


@media (max-width: 720px) {
  .pos-workspace-header {
    grid-template-columns: auto minmax(0, 1fr) repeat(5, auto);
  }
}

/* Premium owner access split screen */
.access-split-page {
  --access-blue: #0874df;
  --access-blue-deep: #073f91;
  --access-navy: #082451;
  --access-muted: #5f7390;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(390px, 35%) minmax(0, 65%);
  place-items: stretch;
  padding: 0;
  overflow: hidden;
  background: #fff;
}

.access-split-page.access-setup-page { grid-template-columns: minmax(560px, 44%) minmax(0, 56%); }
.access-left-panel { position: relative; min-width: 0; min-height: 100dvh; overflow: hidden; background: linear-gradient(180deg, #fff 0%, #fbfdff 70%, #eef7ff 100%); }
.access-scroll-region { position: relative; z-index: 2; width: min(500px, calc(100% - 72px)); min-height: 100%; margin: 0 auto; padding: 38px 0 168px; }
.access-setup-page .access-scroll-region { width: min(690px, calc(100% - 72px)); padding-bottom: 110px; }
.access-brand-row { display: flex; align-items: center; gap: 12px; margin: 0 0 34px; }
.access-brand-lockup { display: flex; align-items: center; gap: 12px; }
.access-brand-lockup img { width: 54px; height: 54px; border-radius: 13px; object-fit: contain; background: #061b3e; box-shadow: 0 10px 28px rgba(8,36,81,.16); }
.access-brand-lockup > span { display: grid; gap: 0; }
.access-brand-lockup strong { color: var(--access-navy); font-size: 1.35rem; line-height: 1.05; letter-spacing: -.035em; }
.access-brand-lockup small { color: #234872; font-size: .82rem; font-weight: 620; }
.access-secure-chip { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; border: 1px solid #dbe8f5; border-radius: 999px; padding: 6px 9px; background: #f6fbff; color: #3270aa; font-size: .58rem; font-weight: 760; }
.access-secure-chip svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.access-intro { display: grid; gap: 10px; margin-bottom: 22px; }
.access-intro .eyebrow { color: var(--access-blue); font-size: .64rem; font-weight: 820; letter-spacing: .13em; text-transform: uppercase; }
.access-intro h1 { max-width: 470px; margin: 0; color: var(--access-navy); font-size: clamp(2rem, 3.2vw, 3rem); line-height: 1.02; letter-spacing: -.052em; }
.access-intro p { max-width: 470px; margin: 0; color: var(--access-muted); font-size: .84rem; line-height: 1.58; }
.access-intro.centered { justify-items: center; text-align: center; }
.access-intro p strong { color: var(--access-navy); }
.access-auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0 0 15px; padding: 5px; border-radius: 13px; background: #edf5fc; }
.access-auth-tabs button { min-height: 43px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: #416184; font: inherit; font-size: .72rem; font-weight: 780; }
.access-auth-tabs button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.access-auth-tabs button.active { border-color: #a9d1f8; background: #fff; color: #0065c8; box-shadow: 0 5px 14px rgba(38,86,133,.08); }
.access-form { display: grid; gap: 13px; }
.access-form.two-column { grid-template-columns: 1fr 1fr; }
.access-form .full { grid-column: 1 / -1; }
.access-form label { display: grid; gap: 7px; color: #274566; font-size: .67rem; font-weight: 760; }
.access-required { color: #d24a4a; }
.access-auth-form { margin-top: 0; }
.access-auth-form input,
.business-setup-form input,
.business-setup-form select { width: 100%; min-height: 47px; border: 1px solid #cadbec; border-radius: 10px; padding: 10px 13px; background: #fff; color: var(--access-navy); font: inherit; font-size: .76rem; outline: 0; transition: border-color .16s ease, box-shadow .16s ease; }
.access-auth-form input:focus,
.business-setup-form input:focus,
.business-setup-form select:focus { border-color: #56a9f6; box-shadow: 0 0 0 3px rgba(31,137,235,.11); }
.access-input-shell { min-height: 48px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px; border: 1px solid #cadbec; border-radius: 10px; padding: 0 13px; background: #fff; }
.access-input-shell:focus-within { border-color: #56a9f6; box-shadow: 0 0 0 3px rgba(31,137,235,.11); }
.access-input-shell > svg { width: 18px; height: 18px; fill: none; stroke: #0874df; stroke-width: 1.8; }
.access-input-shell input { min-height: 45px; border: 0; padding-inline: 2px; box-shadow: none; }
.access-input-shell input:focus { box-shadow: none; }
.access-primary-button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 0; border-radius: 10px; padding: 10px 16px; background: linear-gradient(135deg, #0874df 0%, #0b8bed 100%); color: #fff; font: inherit; font-size: .74rem; font-weight: 820; box-shadow: 0 10px 24px rgba(0,111,221,.19); }
.access-primary-button:hover { background: linear-gradient(135deg, #0667c8 0%, #087bd7 100%); }
.access-arrow { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.access-method-note { color: #7588a0; font-size: .59rem; line-height: 1.45; text-align: center; }
.access-recaptcha { margin-top: 10px; overflow: hidden; border-radius: 10px; }
.access-auth-divider { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; margin: 19px 0 10px; color: #7588a0; font-size: .62rem; }
.access-auth-divider::before, .access-auth-divider::after { content: ""; height: 1px; background: #dbe6f1; }
.access-account-switch { width: 100%; min-height: 43px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid #b9d6f1; border-radius: 10px; background: #fff; color: #0069ce; font: inherit; font-size: .7rem; font-weight: 800; }
.access-account-switch:hover { background: #f5faff; }
.access-account-switch svg { width: 15px; }
.access-support-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 18px; }
.access-help-card { min-width: 0; display: grid; grid-template-columns: auto minmax(0,1fr); gap: 9px; align-items: center; border: 0; border-radius: 12px; padding: 10px; background: #f5f9fd; }
.access-help-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: #e4f2ff; color: #0874df; }
.access-help-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.access-help-card > div { min-width: 0; display: grid; gap: 2px; }
.access-help-card strong { color: var(--access-navy); font-size: .62rem; }
.access-help-card a, .access-help-card small { overflow: hidden; color: #4f6986; font-size: .54rem; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.access-help-card a { color: #0572dc; font-weight: 770; }
.access-footer { display: grid; justify-items: center; gap: 10px; margin-top: 20px; padding-top: 15px; border-top: 1px solid #e5edf5; color: #68809a; font-size: .54rem; text-align: center; }
.access-footer p { margin: 0; }
.access-footer a { color: #0968c3; font-weight: 690; text-decoration: none; }
.access-footer nav { display: flex; align-items: center; gap: 9px; }
.access-footer nav span { color: #b2c0cf; }
.access-footer > strong { margin-top: 4px; color: #174a83; font-size: .57rem; }
.access-message { margin: 0 0 15px; border: 1px solid #bfdcf5; border-radius: 10px; padding: 11px 13px; background: #eff8ff; color: #165f9d; font-size: .65rem; line-height: 1.45; }
.access-skyline { position: absolute; z-index: 1; right: 0; bottom: 0; left: 0; height: 142px; opacity: .45; background: linear-gradient(180deg, transparent 0 47%, rgba(177,218,251,.23) 48%), linear-gradient(165deg, transparent 0 60%, #cfe9fc 61% 69%, transparent 70%), linear-gradient(195deg, transparent 0 62%, #dceffc 63% 72%, transparent 73%); }
.access-skyline::before { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 82px; background: repeating-linear-gradient(90deg, #bcdff7 0 13px, transparent 13px 19px, #c9e6fa 19px 35px, transparent 35px 43px); clip-path: polygon(0 75%,4% 57%,7% 70%,10% 35%,13% 68%,17% 50%,20% 72%,25% 42%,29% 66%,32% 20%,35% 68%,39% 46%,43% 74%,47% 55%,52% 69%,56% 32%,60% 67%,65% 48%,69% 70%,74% 38%,78% 66%,82% 53%,86% 72%,91% 43%,95% 66%,100% 50%,100% 100%,0 100%); }

.access-hero-panel { position: relative; min-width: 0; min-height: 100dvh; display: flex; flex-direction: column; overflow: hidden; background: radial-gradient(circle at 82% 12%, rgba(65,184,255,.52), transparent 29%), radial-gradient(circle at 8% 92%, rgba(6,40,103,.45), transparent 30%), linear-gradient(135deg, #0a3d88 0%, #0c61bb 48%, #0a7bd5 100%); color: #fff; }
.access-hero-panel::before { content: ""; position: absolute; inset: 0; opacity: .13; background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px); background-size: 38px 38px; mask-image: linear-gradient(to bottom, #000, transparent 78%); }
.access-hero-glow { position: absolute; border-radius: 50%; filter: blur(20px); pointer-events: none; }
.access-hero-glow-one { width: 360px; height: 360px; top: -130px; right: -80px; background: rgba(111,213,255,.25); }
.access-hero-glow-two { width: 320px; height: 320px; bottom: 80px; left: -160px; background: rgba(0,20,83,.28); }
.access-hero-content { position: relative; z-index: 2; flex: 1; padding: clamp(36px, 5vw, 64px) clamp(34px, 5vw, 72px) 8px; }
.access-hero-eyebrow { display: block; color: #c5e6ff; font-size: .61rem; font-weight: 720; letter-spacing: .25em; text-transform: uppercase; }
.access-hero-eyebrow b { margin-inline: 5px; color: #65c6ff; }
.access-hero-content > h2 { max-width: 560px; margin: 15px 0 12px; color: #fff; font-size: clamp(2rem, 3.2vw, 3.15rem); line-height: 1.03; letter-spacing: -.045em; }
.access-hero-content > p { max-width: 560px; margin: 0; color: #e3f3ff; font-size: .78rem; line-height: 1.6; }
.access-feature-list { width: min(315px, 37%); display: grid; gap: 13px; margin-top: 28px; }
.access-feature-list > div { display: grid; grid-template-columns: 31px 1fr; gap: 10px; align-items: center; }
.access-feature-list > div > span { color: #8dd2ff; }
.access-feature-list svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }
.access-feature-list p { display: grid; gap: 2px; margin: 0; }
.access-feature-list strong { color: #fff; font-size: .68rem; }
.access-feature-list small { color: #cce9ff; font-size: .54rem; }
.access-device-stage { position: absolute; right: 3.5%; bottom: 3%; width: 58%; height: 64%; }
.access-device { position: absolute; overflow: hidden; border: 7px solid #082146; background: #f6faff; box-shadow: 0 20px 50px rgba(2,21,57,.34); }
.access-device-desktop { inset: 0 0 29% 6%; border-radius: 17px; }
.device-bar { height: 12%; display: flex; align-items: center; gap: 7px; padding: 0 10px; border-bottom: 1px solid #dce8f3; background: #fff; }
.device-bar.dark { background: #0a4b9a; }
.device-logo { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 4px; background: #08224b; color: #ff9b18; font-size: .55rem; font-weight: 900; }
.device-bar i { width: 50%; height: 7px; border-radius: 8px; background: #edf3f8; }
.device-bar b { width: 7px; height: 7px; margin-left: auto; border-radius: 50%; background: #d7e7f5; }
.device-bar b + b { margin-left: 0; }
.device-body { height: 88%; display: grid; grid-template-columns: 20% 1fr; }
.device-body aside { display: grid; align-content: start; gap: 8px; padding: 11px 8px; border-right: 1px solid #dce8f3; background: #fbfdff; }
.device-body aside span { height: 7px; border-radius: 6px; background: #dceafa; }
.device-dashboard { padding: 12px; color: #0a2855; }
.device-dashboard small, .device-dashboard strong { display: block; }
.device-dashboard small { font-size: .4rem; }
.device-dashboard strong { margin-top: 3px; font-size: .65rem; }
.device-metrics { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; margin-top: 9px; }
.device-metrics i { height: 39px; border: 1px solid #dceaf5; border-radius: 6px; background: linear-gradient(135deg, #e4f3ff, #fff); }
.device-metrics i:first-child { background: linear-gradient(135deg, #0c7ce7, #25a6ff); }
.device-chart { height: 45%; margin-top: 8px; border: 1px solid #dfebf5; border-radius: 7px; padding: 8px; background: #fff; }
.device-chart span { display: block; height: 100%; background: linear-gradient(170deg, transparent 0 36%, rgba(30,136,229,.15) 37% 65%, transparent 66%), repeating-linear-gradient(0deg, #edf3f8 0 1px, transparent 1px 15px); }
.access-device-tablet { right: 22%; bottom: 0; left: 0; height: 47%; border-radius: 19px; }
.device-pos { height: 84%; display: grid; grid-template-columns: 65% 35%; }
.device-products { display: grid; grid-template-columns: repeat(4,1fr); gap: 5px; padding: 8px; }
.device-products i, .device-phone-grid i { border: 1px solid #dce8f2; border-radius: 5px; background: linear-gradient(150deg, #e8f5ff, #fff 55%, #f4f7fa); }
.device-cart { display: grid; align-content: start; gap: 7px; padding: 9px; border-left: 1px solid #dae7f2; color: #0a2855; }
.device-cart strong { font-size: .48rem; }
.device-cart span { height: 6px; border-radius: 5px; background: #e3edf5; }
.device-cart b { height: 18px; margin-top: 8px; border-radius: 4px; background: #0874df; }
.access-device-phone { right: 0; bottom: 0; width: 21%; height: 43%; border-width: 6px; border-radius: 24px; padding: 13px 6px 7px; }
.device-notch { position: absolute; top: 4px; left: 33%; width: 34%; height: 7px; border-radius: 8px; background: #061938; }
.device-phone-head { margin-bottom: 7px; padding: 4px; border-radius: 4px; background: #086dce; color: #fff; font-size: .4rem; font-weight: 750; text-align: center; }
.device-phone-grid { height: 72%; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.device-phone-cart { margin-top: 5px; border-radius: 5px; padding: 5px 3px; background: #0874df; color: #fff; font-size: .36rem; font-weight: 750; text-align: center; }
.access-mode-strip { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(9, minmax(70px,1fr)); gap: 5px; padding: 8px 14px; background: rgba(255,255,255,.96); color: #0a2855; }
.access-mode-strip > div { min-width: 0; display: grid; justify-items: center; gap: 2px; border-right: 1px solid #e3edf6; padding: 6px 2px; text-align: center; }
.access-mode-strip > div:last-child { border-right: 0; }
.access-mode-strip span { color: #0874df; }
.access-mode-strip svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.access-mode-strip strong { font-size: .48rem; }
.access-mode-strip small { overflow: hidden; max-width: 100%; color: #61758c; font-size: .38rem; text-overflow: ellipsis; white-space: nowrap; }
.access-hero-footer { position: relative; z-index: 3; min-height: 38px; display: flex; align-items: center; justify-content: center; gap: 10px; background: #fff; color: #5d7188; font-size: .5rem; }
.access-hero-footer strong { color: #0064c5; font-size: .58rem; }
.access-hero-footer span { width: 28px; height: 1px; background: #a9bfd2; }
.access-hero-footer p { margin: 0; }

.access-progress { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 24px; }
.access-progress > span { min-width: 0; display: grid; grid-template-columns: auto minmax(0,1fr); gap: 6px; align-items: center; border-radius: 9px; padding: 7px; background: #f1f5f9; color: #8190a0; }
.access-progress > span > strong { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; background: #dfe7ef; font-size: .53rem; }
.access-progress > span > strong svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.access-progress em { overflow: hidden; font-size: .48rem; font-style: normal; font-weight: 730; text-overflow: ellipsis; white-space: nowrap; }
.access-progress .active, .access-progress .done { background: #eaf5ff; color: #0968c3; }
.access-progress .active > strong, .access-progress .done > strong { background: #0874df; color: #fff; }
.access-setup-intro h1 { font-size: clamp(1.7rem, 2.6vw, 2.35rem); }
.business-setup-form { margin-top: 4px; gap: 12px; }
.access-form-section { display: flex; align-items: center; gap: 10px; margin-top: 7px; border-radius: 10px; padding: 10px 11px; background: #f3f7fb; }
.access-form-section-number { width: 28px; height: 28px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 8px; background: #dff0ff; color: #076ecf; font-size: .52rem; font-weight: 850; }
.access-form-section > div { display: grid; gap: 2px; }
.access-form-section strong { color: var(--access-navy); font-size: .65rem; }
.access-form-section small { color: #72859b; font-size: .53rem; }
.access-mode-helper { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 11px; align-items: start; border: 1px solid #cbe2f7; border-radius: 11px; padding: 12px; background: #f3f9ff; }
.access-mode-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: #0874df; color: #fff; font-size: .7rem; font-weight: 850; }
.access-mode-helper > div { display: grid; gap: 3px; }
.access-mode-helper strong { color: var(--access-navy); font-size: .65rem; }
.access-mode-helper p { margin: 0; color: #58708b; font-size: .55rem; line-height: 1.45; }
.access-mode-helper ul { display: flex; flex-wrap: wrap; gap: 5px; margin: 4px 0 0; padding: 0; list-style: none; }
.access-mode-helper li { border-radius: 999px; padding: 3px 7px; background: #deeffe; color: #0968c3; font-size: .46rem; font-weight: 730; }
.access-setup-footer { display: flex; align-items: center; gap: 14px; margin-top: 5px; border-top: 1px solid #e2ebf3; padding-top: 14px; }
.access-setup-footer > span { display: grid; gap: 2px; color: #73869b; font-size: .54rem; }
.access-setup-footer > span strong { color: #2b4e72; }
.access-setup-footer .access-primary-button { min-width: 205px; margin-left: auto; }
.access-centered-state { display: flex; flex-direction: column; justify-content: center; }
.access-state-icon, .access-success-icon { width: 60px; height: 60px; display: grid; place-items: center; align-self: center; margin: 12px 0 18px; border-radius: 50%; background: #edf7ff; color: #0874df; font-size: 1.25rem; font-weight: 850; }
.access-state-icon svg, .access-success-icon svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.access-support-button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #bad8f2; border-radius: 10px; padding: 9px 13px; background: #f3f9ff; color: #0870d5; font-size: .69rem; font-weight: 780; text-decoration: none; }
.access-inline-actions { display: flex; justify-content: center; gap: 10px; margin-top: 11px; }
.access-inline-actions.stacked { display: grid; }
.access-inline-actions button:not(.access-primary-button) { min-height: 36px; border: 0; background: transparent; color: #0870d5; font: inherit; font-size: .63rem; font-weight: 740; }
.access-code-form input { text-align: center; font-size: 1.1rem; font-weight: 780; letter-spacing: .25em; }

@media (max-width: 1200px) {
  .access-split-page { grid-template-columns: minmax(370px, 42%) minmax(0,58%); }
  .access-split-page.access-setup-page { grid-template-columns: minmax(520px, 52%) minmax(0,48%); }
  .access-scroll-region { width: min(500px, calc(100% - 48px)); }
  .access-hero-content { padding-inline: 34px; }
  .access-hero-content > h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); }
  .access-feature-list { width: 44%; }
  .access-device-stage { width: 52%; height: 57%; }
  .access-mode-strip { grid-template-columns: repeat(5,1fr); }
  .access-mode-strip > div:nth-child(n+6) { display: none; }
}

@media (max-width: 900px) {
  .access-split-page, .access-split-page.access-setup-page { grid-template-columns: minmax(420px, 54%) minmax(0,46%); overflow: visible; }
  .access-hero-content { padding: 38px 24px 12px; }
  .access-hero-content > h2 { font-size: 1.75rem; }
  .access-feature-list { width: 100%; grid-template-columns: 1fr; }
  .access-feature-list > div:nth-child(n+5) { display: none; }
  .access-device-stage { position: relative; right: auto; bottom: auto; width: 100%; height: 300px; margin-top: 24px; }
  .access-mode-strip { grid-template-columns: repeat(3,1fr); }
  .access-mode-strip > div:nth-child(n+4) { display: none; }
  .access-hero-footer { padding-inline: 10px; text-align: center; }
}

@media (max-width: 720px) {
  .access-split-page, .access-split-page.access-setup-page { display: flex; flex-direction: column; min-height: 100dvh; }
  .access-left-panel { min-height: auto; }
  .access-scroll-region, .access-setup-page .access-scroll-region { width: min(100% - 28px, 540px); padding: 22px 0 116px; }
  .access-brand-row { margin-bottom: 25px; }
  .access-brand-lockup img { width: 46px; height: 46px; }
  .access-brand-lockup strong { font-size: 1.12rem; }
  .access-intro h1 { font-size: 2rem; }
  .access-support-grid { grid-template-columns: 1fr; }
  .access-trust-card { display: none; }
  .access-skyline { height: 100px; }
  .access-hero-panel { min-height: 720px; }
  .access-hero-content { padding: 42px 20px 8px; }
  .access-hero-content > h2 { font-size: 2rem; }
  .access-feature-list { width: 100%; grid-template-columns: 1fr 1fr; gap: 12px; }
  .access-feature-list > div:nth-child(n+5) { display: grid; }
  .access-device-stage { height: 330px; }
  .access-mode-strip { grid-template-columns: repeat(3,1fr); }
  .access-mode-strip > div:nth-child(n+4) { display: grid; }
  .access-mode-strip > div:nth-child(n+7) { display: none; }
  .access-form.two-column { grid-template-columns: 1fr; }
  .access-form .full { grid-column: auto; }
  .access-progress { grid-template-columns: 1fr 1fr; }
  .access-setup-footer { align-items: stretch; flex-direction: column; }
  .access-setup-footer .access-primary-button { width: 100%; margin-left: 0; }
}

@media (max-width: 430px) {
  .access-scroll-region, .access-setup-page .access-scroll-region { width: calc(100% - 24px); }
  .access-secure-chip { display: none; }
  .access-intro h1 { font-size: 1.82rem; }
  .access-feature-list { grid-template-columns: 1fr; }
  .access-device-stage { height: 270px; }
  .access-device-desktop { left: 0; }
  .access-device-tablet { right: 15%; }
  .access-device-phone { width: 25%; }
  .access-mode-strip { grid-template-columns: 1fr 1fr; }
  .access-mode-strip > div:nth-child(n+5) { display: none; }
  .access-progress { grid-template-columns: 1fr; }
}


/* Exact approved split-screen owner access reference */
.reference-access-page {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(360px, 27.35vw) minmax(0, 1fr);
  overflow: hidden;
  background: #fff;
}

.reference-access-left {
  position: relative;
  min-width: 0;
  min-height: 100dvh;
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 74%, #edf7ff 100%);
  border-right: 1px solid #dce8f4;
}

.reference-access-scroll {
  position: relative;
  z-index: 2;
  height: 100dvh;
  overflow-y: auto;
  padding: 32px 38px 76px;
  scrollbar-width: thin;
}

.reference-access-showcase {
  min-width: 0;
  min-height: 100dvh;
  overflow: hidden;
  background: #0f4f91;
}

.reference-access-showcase img {
  width: 100%;
  height: 100dvh;
  display: block;
  object-fit: cover;
  object-position: center center;
}

.reference-brand-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 30px;
}

.reference-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.reference-brand img {
  width: 58px;
  height: 58px;
  object-fit: contain;
  border-radius: 11px;
  background: #07192d;
}

.reference-brand > span {
  display: grid;
  gap: 1px;
}

.reference-brand strong {
  color: #071a3d;
  font-size: 1.45rem;
  line-height: 1;
  letter-spacing: -.035em;
}

.reference-brand small {
  color: #385172;
  font-size: .82rem;
  font-weight: 620;
}

.reference-language {
  margin-left: auto;
  padding: 5px 8px;
  border-radius: 8px;
  background: #f7f9fc;
  color: #536a87;
  font-size: .62rem;
  font-weight: 700;
}

.reference-login-copy {
  margin: 0 0 22px;
  text-align: center;
}

.reference-login-copy.compact {
  margin-top: 12px;
}

.reference-login-copy.centered {
  text-align: center;
}

.reference-login-copy h1 {
  margin: 0;
  color: #081b43;
  font-size: clamp(2rem, 2.8vw, 3rem);
  line-height: 1.03;
  letter-spacing: -.045em;
}

.reference-login-copy.compact h1 {
  font-size: clamp(1.7rem, 2.4vw, 2.45rem);
}

.reference-login-copy p {
  margin: 13px auto 0;
  max-width: 360px;
  color: #506789;
  font-size: .82rem;
  line-height: 1.5;
}

.reference-auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 8px 0 13px;
  border: 1px solid #d7e5f5;
  border-radius: 10px;
  overflow: hidden;
  background: #eef5fb;
}

.reference-auth-tabs button {
  min-height: 45px;
  border: 0;
  background: transparent;
  color: #0c59a5;
  font-size: .76rem;
  font-weight: 760;
}

.reference-auth-tabs button span {
  margin-right: 7px;
  font-size: .86rem;
}

.reference-auth-tabs button.active {
  background: #fff;
  box-shadow: inset 0 0 0 1px #4aa0ef;
}

.reference-auth-form {
  display: grid;
  gap: 8px;
}

.reference-auth-form > label {
  color: #405575;
  font-size: .7rem;
  font-weight: 690;
}

.reference-phone-control {
  min-height: 47px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid #bcd7ef;
  border-radius: 9px;
  background: #fff;
}

.reference-phone-control:focus-within,
.reference-email-input:focus,
.reference-code-input:focus,
.reference-field input:focus,
.reference-field select:focus {
  border-color: #2789df;
  box-shadow: 0 0 0 3px rgba(39,137,223,.10);
  outline: 0;
}

.reference-phone-control select {
  width: 98px;
  border: 0;
  border-right: 1px solid #d9e5f0;
  padding: 0 8px;
  background: #fff;
  color: #1d4d80;
  font-size: .68rem;
  font-weight: 720;
  outline: 0;
}

.reference-phone-control input {
  min-width: 0;
  border: 0;
  padding: 0 12px;
  color: #203d62;
  font-size: .76rem;
  outline: 0;
}

.reference-email-input,
.reference-code-input {
  width: 100%;
  min-height: 47px;
  border: 1px solid #bcd7ef;
  border-radius: 9px;
  padding: 9px 12px;
  background: #fff;
  color: #203d62;
  font-size: .76rem;
}

.reference-code-input {
  text-align: center;
  font-size: 1.05rem;
  letter-spacing: .2em;
}

.reference-primary-button {
  width: 100%;
  min-height: 46px;
  border: 0;
  border-radius: 9px;
  margin-top: 3px;
  padding: 10px 12px;
  background: linear-gradient(90deg, #126fd4 0%, #137ee5 100%);
  color: #fff;
  font-size: .8rem;
  font-weight: 800;
  box-shadow: 0 8px 18px rgba(18,111,212,.18);
}

.reference-primary-button:hover {
  background: #0c68c7;
}

.reference-auth-form > small,
.reference-submit-note {
  display: block;
  margin-top: 1px;
  color: #5d7290;
  font-size: .62rem;
  text-align: center;
}

.reference-recaptcha {
  display: grid;
  place-items: center;
  margin: 8px 0 0;
  overflow: hidden;
}

.reference-recaptcha.compact {
  margin-top: 10px;
}

.reference-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 11px;
  align-items: center;
  margin: 14px 0 11px;
  color: #637a98;
  font-size: .64rem;
}

.reference-divider::before,
.reference-divider::after {
  content: "";
  height: 1px;
  background: #dce6f0;
}

.reference-email-shortcut {
  width: 100%;
  min-height: 44px;
  border: 1px solid #52a1e9;
  border-radius: 9px;
  background: #fff;
  color: #0769c4;
  font-size: .74rem;
  font-weight: 760;
}

.reference-email-shortcut span {
  margin-right: 7px;
}

.reference-new-account {
  display: grid;
  justify-items: center;
  gap: 2px;
  margin: 16px 0 14px;
}

.reference-new-account > span {
  color: #5e718c;
  font-size: .66rem;
}

.reference-new-account button {
  border: 0;
  background: transparent;
  color: #075fc0;
  font-size: .74rem;
  font-weight: 820;
}

.reference-trust-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: 14px;
}

.reference-trust-grid > div {
  min-height: 62px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px;
  border-radius: 10px;
  background: rgba(247,251,255,.92);
}

.reference-trust-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #e6f3ff;
  color: #0c72d6;
  font-size: .72rem;
  font-weight: 900;
}

.reference-trust-grid > div > span:last-child {
  display: grid;
  gap: 1px;
}

.reference-trust-grid strong {
  color: #233e62;
  font-size: .58rem;
}

.reference-trust-grid a {
  color: #0869c7;
  font-size: .58rem;
  font-weight: 760;
  text-decoration: none;
}

.reference-trust-grid small {
  color: #6f8198;
  font-size: .52rem;
  line-height: 1.35;
}

.reference-legal {
  margin-top: 14px;
  color: #667a95;
  text-align: center;
  font-size: .52rem;
  line-height: 1.45;
}

.reference-legal p {
  margin: 0 0 9px;
}

.reference-legal a {
  color: #0d67bd;
  text-decoration: none;
}

.reference-legal > div {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.reference-skyline {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  left: 0;
  height: 94px;
  opacity: .48;
  background:
    linear-gradient(180deg, transparent 0%, rgba(126,187,231,.12) 35%, rgba(126,187,231,.26) 100%),
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(78,155,211,.18) 18px 20px, transparent 20px 28px);
  clip-path: polygon(0 76%, 3% 70%, 5% 75%, 8% 62%, 11% 69%, 14% 55%, 16% 68%, 19% 59%, 22% 65%, 25% 48%, 27% 61%, 30% 58%, 33% 67%, 36% 53%, 40% 65%, 43% 49%, 46% 63%, 50% 58%, 53% 68%, 57% 51%, 60% 64%, 64% 58%, 67% 69%, 71% 56%, 74% 66%, 78% 51%, 81% 64%, 85% 57%, 89% 68%, 92% 55%, 96% 63%, 100% 58%, 100% 100%, 0 100%);
}

.reference-world-copy {
  position: absolute;
  z-index: 3;
  left: 38px;
  bottom: 17px;
  color: #0f4c8d;
  font-size: .55rem;
  font-weight: 690;
}

.reference-world-copy span {
  margin-left: 5px;
}

.reference-access-message {
  margin: 0 0 11px;
  padding: 9px 11px;
  border: 1px solid #bad8f2;
  border-radius: 9px;
  background: #eef7ff;
  color: #145f9d;
  font-size: .62rem;
  line-height: 1.4;
}

.reference-inline-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}

.reference-inline-actions.stacked {
  display: grid;
}

.reference-inline-actions button:not(.reference-primary-button) {
  min-height: 34px;
  border: 0;
  background: transparent;
  color: #0c68c7;
  font-size: .62rem;
  font-weight: 760;
}

.reference-success-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  margin: 8px auto 12px;
  border-radius: 50%;
  background: #e7f7ef;
  color: #118257;
  font-size: 1.25rem;
  font-weight: 900;
}

.reference-support-footer {
  display: grid;
  justify-items: center;
  gap: 2px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #e5edf4;
  color: #71849c;
  font-size: .56rem;
}

.reference-support-footer a {
  color: #0c68c7;
  font-weight: 760;
  text-decoration: none;
}

.reference-support-footer small {
  color: #71849c;
}

.reference-blocked {
  margin-top: 22px;
  padding: 14px;
  border: 1px solid #d8e5f1;
  border-radius: 12px;
  background: #f8fbfe;
  text-align: center;
}

.reference-blocked strong {
  display: block;
  color: #173d67;
  font-size: .75rem;
}

.reference-blocked p {
  margin: 6px 0 10px;
  color: #637791;
  font-size: .63rem;
  line-height: 1.4;
}

.reference-blocked a {
  color: #0b68c6;
  font-size: .64rem;
  font-weight: 760;
  text-decoration: none;
}

/* Setup mode */
.reference-access-page.setup-mode {
  grid-template-columns: minmax(470px, 38vw) minmax(0, 1fr);
}

.reference-access-page.setup-mode .reference-access-scroll {
  padding-bottom: 90px;
}

.reference-setup-heading {
  margin: 0 0 15px;
}

.reference-kicker {
  color: #0b69c8;
  font-size: .58rem;
  font-weight: 820;
  letter-spacing: .12em;
}

.reference-setup-heading h1 {
  margin: 5px 0 4px;
  color: #081b43;
  font-size: 1.8rem;
  letter-spacing: -.04em;
}

.reference-setup-heading p {
  margin: 0;
  max-width: 530px;
  color: #5f7390;
  font-size: .68rem;
  line-height: 1.45;
}

.reference-setup-progress {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: 12px 0 14px;
}

.reference-setup-progress span {
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-radius: 8px;
  padding: 6px 8px;
  background: #f1f5f9;
  color: #77899f;
  font-size: .55rem;
  font-weight: 700;
}

.reference-setup-progress b {
  width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #dfe7ef;
  font-size: .52rem;
}

.reference-setup-progress .done,
.reference-setup-progress .active {
  background: #edf6ff;
  color: #0f63b2;
}

.reference-setup-progress .done b,
.reference-setup-progress .active b {
  background: #1376d6;
  color: #fff;
}

.reference-setup-form {
  display: grid;
  gap: 9px;
}

.reference-form-section {
  display: grid;
  gap: 1px;
  margin-top: 4px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #f3f7fb;
}

.reference-form-section strong {
  color: #1d3b60;
  font-size: .62rem;
}

.reference-form-section small {
  color: #75879c;
  font-size: .52rem;
}

.reference-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.reference-field {
  display: grid;
  gap: 4px;
  color: #415874;
  font-size: .6rem;
  font-weight: 700;
}

.reference-field.full {
  grid-column: 1 / -1;
}

.reference-field input,
.reference-field select {
  width: 100%;
  min-height: 39px;
  border: 1px solid #d2deea;
  border-radius: 8px;
  padding: 7px 9px;
  background: #fff;
  color: #1e3a5f;
  font: inherit;
  font-size: .64rem;
}

.reference-field small {
  color: #8190a2;
  font-size: .49rem;
  font-weight: 540;
}

.reference-mode-preview {
  display: grid;
  gap: 2px;
  margin: 2px 0;
  padding: 9px 10px;
  border: 1px solid #d7e7f5;
  border-radius: 9px;
  background: #f6fbff;
}

.reference-mode-preview strong {
  color: #0d5ea8;
  font-size: .61rem;
}

.reference-mode-preview small {
  color: #667b94;
  font-size: .51rem;
  line-height: 1.4;
}

@media (max-width: 1120px) {
  .reference-access-page {
    grid-template-columns: minmax(350px, 36vw) minmax(0, 1fr);
  }

  .reference-access-page.setup-mode {
    grid-template-columns: minmax(440px, 46vw) minmax(0, 1fr);
  }

  .reference-access-scroll {
    padding-inline: 28px;
  }

  .reference-world-copy {
    left: 28px;
  }
}

@media (max-width: 820px) {
  .reference-access-page,
  .reference-access-page.setup-mode {
    min-height: 100dvh;
    display: block;
    overflow: auto;
  }

  .reference-access-left {
    min-height: 100dvh;
  }

  .reference-access-scroll {
    height: auto;
    min-height: calc(100dvh - 62px);
    overflow: visible;
    padding: 24px 22px 90px;
  }

  .reference-access-showcase {
    min-height: 540px;
  }

  .reference-access-showcase img {
    width: 100%;
    height: auto;
    min-height: 540px;
    object-fit: cover;
    object-position: center top;
  }

  .reference-world-copy {
    left: 22px;
  }
}

@media (max-width: 720px) {
  .customer-correction-form { grid-template-columns:1fr; }
  .customer-privacy-actions > button, .customer-privacy-actions details { width:100%; }
}

/* Customer import, offline-first workspace */
.debt-ledger-header-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.debt-import-button { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid #c8d9ec; border-radius: 12px; padding: 9px 15px; background: #fff; color: #174f86; font-weight: 760; }
.debt-import-button:hover { border-color: #8fb5dc; background: #f5faff; }
.debt-import-button .icon { width: 18px; height: 18px; }
.customer-import-workspace { max-width: 1380px; margin: 0 auto; color: #1b2a3d; }
.customer-import-header { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 16px; align-items: center; margin-bottom: 20px; }
.customer-import-header h1 { margin: 2px 0 3px; color: #001b3d; font-size: clamp(1.55rem,2vw,2rem); letter-spacing: -.035em; }
.customer-import-header p { margin: 0; color: #66788e; font-size: .88rem; }
.customer-import-eyebrow { color: #2175c7; font-size: .64rem; font-weight: 850; letter-spacing: .14em; }
.customer-import-back { width: 43px; height: 43px; border: 1px solid #d9e4ef; border-radius: 13px; background: #fff; color: #183c63; font-size: 1.25rem; }
.customer-import-template { min-height: 43px; border: 1px solid #bed4eb; border-radius: 12px; padding: 9px 15px; background: #fff; color: #155b9f; font-weight: 760; }
.customer-import-steps { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin-bottom: 20px; padding: 16px 20px; border: 1px solid #dce7f2; border-radius: 17px; background: #fff; box-shadow: 0 8px 24px rgba(22,54,88,.05); }
.customer-import-steps > div { position: relative; display: flex; align-items: center; gap: 9px; color: #8a98aa; font-size: .75rem; }
.customer-import-steps > div:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: 14px; width: calc(100% - 105px); height: 2px; background: #e5edf5; }
.customer-import-steps span { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid #cedae6; border-radius: 50%; background: #fff; font-size: .69rem; font-weight: 800; }
.customer-import-steps .active { color: #154f87; }
.customer-import-steps .active span { border-color: #2175c7; background: #2175c7; color: #fff; box-shadow: 0 5px 13px rgba(33,117,199,.24); }
.customer-import-steps .done { color: #18865b; }
.customer-import-steps .done span { border-color: #bce4d2; background: #eaf8f2; color: #17845a; }
.customer-import-message { margin-bottom: 16px; border: 1px solid #bed8f1; border-radius: 12px; padding: 11px 14px; background: #f1f7fd; color: #245981; font-size: .8rem; font-weight: 680; }
.customer-import-grid { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(290px,.7fr); gap: 18px; }
.customer-import-card { border: 1px solid #dce7f2; border-radius: 18px; background: #fff; box-shadow: 0 10px 30px rgba(23,55,87,.055); }
.customer-import-upload-card,.customer-import-rules,.customer-import-preview-card,.customer-import-balance-approval { padding: 22px; }
.customer-import-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 17px; }
.customer-import-card-heading h2 { margin: 0; color: #07264a; font-size: 1rem; letter-spacing: -.02em; }
.customer-import-card-heading p { margin: 3px 0 0; color: #718196; font-size: .75rem; }
.customer-import-card-icon,.customer-import-file-badge { display: grid; place-items: center; flex: 0 0 auto; border-radius: 11px; background: #eaf4fe; color: #1462aa; font-size: .59rem; font-weight: 850; letter-spacing: .04em; }
.customer-import-card-icon { width: 44px; height: 44px; }
.customer-import-file-badge { width: 38px; height: 38px; }
.customer-import-dropzone { min-height: 225px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1.5px dashed #a9c6e2; border-radius: 16px; background: #f8fbfe; text-align: center; transition: border-color .18s,background .18s; cursor: pointer; }
.customer-import-dropzone:hover,.customer-import-dropzone.dragging { border-color: #2175c7; background: #eef7ff; }
.customer-import-upload-mark { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: 10px; border-radius: 15px; background: #dfefff; color: #1768b2; font-size: 1.4rem; font-weight: 700; }
.customer-import-dropzone strong { color: #092a4d; font-size: .94rem; }
.customer-import-dropzone p { margin: 3px 0 12px; color: #77889b; font-size: .74rem; }
.customer-import-choose { border-radius: 10px; padding: 8px 14px; background: #2175c7; color: #fff; font-size: .72rem; font-weight: 760; }
.customer-import-safety-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 16px; }
.customer-import-safety-grid > div { border: 1px solid #e4ebf3; border-radius: 12px; padding: 11px 12px; background: #fcfdff; }
.customer-import-safety-grid strong,.customer-import-safety-grid span { display: block; }
.customer-import-safety-grid strong { color: #213b58; font-size: .72rem; }
.customer-import-safety-grid span { margin-top: 3px; color: #77879a; font-size: .65rem; line-height: 1.45; }
.customer-import-rules h2 { margin: 0 0 14px; color: #082847; font-size: .96rem; }
.customer-import-rules ol { margin: 0; padding: 0 0 0 23px; color: #53677e; }
.customer-import-rules li { padding: 6px 0; font-size: .75rem; }
.customer-import-owner-note { margin-top: 17px; border: 1px solid #f2d5a8; border-radius: 12px; padding: 12px; background: #fff9ef; }
.customer-import-owner-note strong,.customer-import-owner-note span { display: block; }
.customer-import-owner-note strong { color: #8a570f; font-size: .73rem; }
.customer-import-owner-note span { margin-top: 3px; color: #886c44; font-size: .65rem; line-height: 1.45; }
.customer-import-history { margin-top: 18px; padding: 20px; }
.customer-import-count { min-width: 30px; border-radius: 999px; padding: 4px 9px; background: #edf4fb; color: #3a617f; font-size: .66rem; font-weight: 780; text-align: center; }
.customer-import-history-list { display: grid; }
.customer-import-history-row { display: grid; grid-template-columns: auto minmax(180px,1fr) 110px 145px auto auto; gap: 14px; align-items: center; padding: 13px 2px; border-top: 1px solid #edf1f5; }
.customer-import-history-row > div:nth-child(2) strong,.customer-import-history-row > div:nth-child(2) span,.customer-import-history-row > div:nth-child(3) span,.customer-import-history-row > div:nth-child(3) strong,.customer-import-history-row > div:nth-child(4) span,.customer-import-history-row > div:nth-child(4) strong { display: block; }
.customer-import-history-row strong { color: #183653; font-size: .74rem; }
.customer-import-history-row span { color: #77879a; font-size: .63rem; }
.customer-import-history-row button { border: 1px solid #efc6c6; border-radius: 9px; padding: 6px 9px; background: #fff6f6; color: #a73f3f; font-size: .64rem; font-weight: 760; }
.customer-import-status { width: fit-content; border-radius: 999px; padding: 5px 8px; font-weight: 760; white-space: nowrap; }
.customer-import-status.local_only { background: #fff5e6; color: #9a6518; }
.customer-import-status.synced { background: #eaf8f2; color: #167b55; }
.customer-import-status.rolled_back { background: #f0f2f5; color: #637084; }
.customer-import-empty { padding: 28px; border: 1px dashed #d9e3ee; border-radius: 13px; color: #7b8a9b; font-size: .77rem; text-align: center; }
.customer-import-file-summary { display: flex; align-items: center; gap: 12px; margin: -22px -22px 20px; padding: 14px 22px; border-bottom: 1px solid #e4ebf2; background: #f8fbfe; border-radius: 18px 18px 0 0; }
.customer-import-file-summary > div { min-width: 0; flex: 1; }
.customer-import-file-summary strong,.customer-import-file-summary span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.customer-import-file-summary strong { color: #123453; font-size: .75rem; }
.customer-import-file-summary span { color: #738398; font-size: .65rem; }
.customer-import-file-summary button { border: 0; background: transparent; color: #1766ad; font-size: .68rem; font-weight: 760; }
.customer-import-mapping-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; }
.customer-import-mapping-grid label > span { display: block; margin-bottom: 5px; color: #445b72; font-size: .68rem; font-weight: 690; }
.customer-import-mapping-grid em { margin-left: 4px; color: #bf4545; font-size: .57rem; font-style: normal; text-transform: uppercase; }
.customer-import-mapping-grid select,.customer-import-duplicate select { width: 100%; min-height: 42px; border: 1px solid #cedbe8; border-radius: 10px; padding: 8px 10px; background: #fff; color: #173653; font-size: .72rem; outline: none; }
.customer-import-mapping-grid select:focus,.customer-import-duplicate select:focus { border-color: #2175c7; box-shadow: 0 0 0 3px rgba(33,117,199,.12); }
.customer-import-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.customer-import-primary { min-height: 44px; border: 0; border-radius: 11px; padding: 10px 17px; background: #0c63b5; color: #fff; font-weight: 780; box-shadow: 0 7px 16px rgba(12,99,181,.2); }
.customer-import-primary:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.customer-import-metrics { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 11px; margin-bottom: 15px; }
.customer-import-metric { min-width: 0; border: 1px solid #dce6f0; border-radius: 14px; padding: 13px 14px; background: #fff; }
.customer-import-metric span,.customer-import-metric strong { display: block; }
.customer-import-metric span { color: #738397; font-size: .62rem; font-weight: 680; }
.customer-import-metric strong { margin-top: 3px; overflow: hidden; color: #123657; font-size: .98rem; text-overflow: ellipsis; }
.customer-import-metric.success { border-color: #c9e8db; background: #f4fbf8; }
.customer-import-metric.success strong { color: #177c57; }
.customer-import-metric.danger { border-color: #efcdcd; background: #fff7f7; }
.customer-import-metric.danger strong { color: #b43f3f; }
.customer-import-metric.warning { border-color: #f1d8ae; background: #fffaf1; }
.customer-import-metric.warning strong { color: #9b661b; }
.customer-import-metric.blue { border-color: #c9def1; background: #f4f9fe; }
.customer-import-metric.blue strong { color: #1765aa; }
.customer-import-blocker { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; border: 1px solid #efcf9e; border-radius: 12px; padding: 12px 14px; background: #fff9ef; color: #875710; }
.customer-import-blocker strong { font-size: .74rem; }
.customer-import-blocker span { flex: 1; font-size: .66rem; }
.customer-import-blocker.danger { border-color: #efc6c6; background: #fff7f7; color: #9d3636; }
.customer-import-blocker button { border: 1px solid currentColor; border-radius: 8px; padding: 6px 9px; background: #fff; color: inherit; font-size: .63rem; font-weight: 740; }
.customer-import-preview-card { padding-bottom: 12px; }
.customer-import-table-wrap { overflow: auto; border: 1px solid #e1e8f0; border-radius: 13px; }
.customer-import-table { width: 100%; border-collapse: collapse; min-width: 860px; }
.customer-import-table th { padding: 10px 12px; background: #f4f7fa; color: #607389; font-size: .61rem; letter-spacing: .04em; text-align: left; text-transform: uppercase; }
.customer-import-table td { padding: 11px 12px; border-top: 1px solid #e8edf3; vertical-align: top; }
.customer-import-table td strong,.customer-import-table td span { display: block; }
.customer-import-table td strong { color: #183956; font-size: .7rem; }
.customer-import-table td span { margin-top: 2px; color: #7a899b; font-size: .61rem; }
.customer-import-table tr.invalid { background: #fffafa; }
.customer-import-table tr.duplicate { background: #fffdf8; }
.customer-import-row-error { max-width: 250px; color: #b23f3f !important; font-weight: 690; }
.customer-import-ready { width: fit-content; border-radius: 999px; padding: 4px 8px; background: #eaf8f2; color: #187b57 !important; font-weight: 760; }
.customer-import-duplicate { min-width: 190px; }
.customer-import-duplicate > strong { color: #8b5b16 !important; }
.customer-import-duplicate select { min-height: 34px; margin-top: 7px; padding: 5px 8px; font-size: .63rem; }
.customer-import-balance-approval { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 15px; }
.customer-import-balance-approval > div:first-child { min-width: 0; }
.customer-import-balance-approval strong,.customer-import-balance-approval span { display: block; }
.customer-import-balance-approval strong { color: #143858; font-size: .78rem; }
.customer-import-balance-approval span { max-width: 790px; margin-top: 4px; color: #6e7f91; font-size: .67rem; line-height: 1.5; }
.customer-import-balance-approval > label { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; border: 1px solid #c8dcef; border-radius: 11px; padding: 10px 12px; background: #f6faff; color: #174f82; font-size: .67rem; font-weight: 720; }
.customer-import-complete { max-width: 760px; margin: 40px auto; padding: 34px; text-align: center; }
.customer-import-complete-mark { width: 58px; height: 58px; display: grid; place-items: center; margin: 0 auto 14px; border-radius: 18px; background: #e6f7ef; color: #17845a; font-size: 1.45rem; font-weight: 850; }
.customer-import-complete h2 { margin: 0; color: #082c4e; font-size: 1.35rem; }
.customer-import-complete > p { max-width: 560px; margin: 7px auto 22px; color: #718196; font-size: .76rem; }
.customer-import-complete-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; text-align: left; }
.customer-import-complete-actions { display: flex; justify-content: center; gap: 10px; margin-top: 24px; }
.customer-import-preview-tools { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.customer-import-preview-tools button { border:1px solid #b9cbe0; background:#f7fbff; color:#145a96; border-radius:10px; padding:9px 13px; font-weight:750; cursor:pointer; }
.customer-import-row-errors { margin:0; padding-left:18px; display:grid; gap:4px; color:#a82c38; font-size:12px; line-height:1.35; }
.customer-import-privacy { margin-top:16px; display:grid; gap:6px; border-color:#b8d5ec; background:#f5fbff; }
.customer-import-privacy label { display:flex; align-items:flex-start; gap:10px; font-weight:800; color:#10395f; }
.customer-import-privacy input { margin-top:3px; width:17px; height:17px; accent-color:#176eb2; }
.customer-import-privacy p { margin:0 0 0 27px; color:#526b81; font-size:13px; }
.customer-privacy-actions { display:flex; align-items:flex-start; gap:10px; flex-wrap:wrap; margin-top:22px; padding-top:18px; border-top:1px solid #e1e9f2; }
.customer-privacy-actions details { min-width:min(100%, 540px); flex:1; border:1px solid #d7e2ed; border-radius:12px; padding:10px 12px; background:#fbfdff; }
.customer-privacy-actions summary { cursor:pointer; font-weight:800; color:#184f7d; }
.customer-correction-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:14px; }
.customer-correction-form label { display:grid; gap:6px; font-size:12px; font-weight:750; color:#4d6479; }
.customer-correction-form input { width:100%; border:1px solid #cbd9e6; border-radius:10px; padding:10px 11px; font:inherit; color:#102f4d; background:white; }
.customer-correction-form button { align-self:end; min-height:42px; }
.secondary-button.danger { color:#a52031; border-color:#e1b8be; background:#fff8f8; }

@media (max-width: 980px) {
  .customer-import-grid { grid-template-columns: 1fr; }
  .customer-import-mapping-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .customer-import-metrics { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .customer-import-history-row { grid-template-columns: auto minmax(170px,1fr) auto auto; }
  .customer-import-history-row > div:nth-child(3),.customer-import-history-row > div:nth-child(4) { display: none; }
}
@media (max-width: 680px) {
  .debt-ledger-header { align-items: flex-start; }
  .debt-ledger-header-actions { width: 100%; margin-left: 0; }
  .debt-ledger-header-actions > button { flex: 1; justify-content: center; }
  .customer-import-header { grid-template-columns: auto minmax(0,1fr); }
  .customer-import-template { grid-column: 1 / -1; }
  .customer-import-steps { padding: 12px; }
  .customer-import-steps strong,.customer-import-steps > div:not(:last-child)::after { display: none; }
  .customer-import-steps > div { justify-content: center; }
  .customer-import-safety-grid,.customer-import-mapping-grid,.customer-import-complete-grid { grid-template-columns: 1fr; }
  .customer-import-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .customer-import-balance-approval { align-items: stretch; flex-direction: column; }
  .customer-import-actions,.customer-import-complete-actions { align-items: stretch; flex-direction: column-reverse; }
  .customer-import-actions button,.customer-import-complete-actions button { justify-content: center; width: 100%; }
  .customer-import-history-row { grid-template-columns: auto minmax(0,1fr) auto; }
  .customer-import-history-row .customer-import-status { display: none; }
}

@media (max-width: 520px) {
  .reference-access-scroll {
    padding: 20px 16px 86px;
  }

  .reference-brand-row {
    margin-bottom: 24px;
  }

  .reference-brand img {
    width: 50px;
    height: 50px;
  }

  .reference-brand strong {
    font-size: 1.2rem;
  }

  .reference-login-copy h1 {
    font-size: 2rem;
  }

  .reference-trust-grid,
  .reference-form-grid,
  .reference-setup-progress {
    grid-template-columns: 1fr;
  }

  .reference-field.full {
    grid-column: auto;
  }

  .reference-access-showcase {
    min-height: 430px;
  }

  .reference-access-showcase img {
    min-height: 430px;
  }

  .reference-world-copy {
    left: 16px;
    bottom: 14px;
  }
}


/* Live showcase fallback matching the approved reference */
.reference-access-page .access-hero-panel {
  min-height: 100dvh;
}

.reference-access-page .access-hero-content {
  padding-top: clamp(30px, 4vw, 54px);
}

.reference-live-showcase .access-hero-content > h2 {
  max-width: 430px;
}

.reference-live-showcase .access-hero-content > p {
  max-width: 500px;
}

.reference-trusted-businesses {
  position: absolute;
  z-index: 4;
  left: clamp(30px, 4vw, 64px);
  bottom: 72px;
  width: min(240px, 27%);
  display: grid;
  gap: 6px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 13px 15px;
  background: rgba(8,65,137,.48);
  box-shadow: 0 14px 36px rgba(5,30,72,.14);
  backdrop-filter: blur(8px);
}

.reference-trusted-businesses strong {
  margin-bottom: 3px;
  color: #fff;
  font-size: .65rem;
}

.reference-trusted-businesses span {
  color: #d9efff;
  font-size: .49rem;
  line-height: 1.35;
}

.reference-live-showcase .access-hero-footer {
  justify-content: center;
}

.reference-live-showcase .access-hero-footer small {
  position: absolute;
  right: 18px;
  color: #72859a;
  font-size: .42rem;
}

@media (max-width: 1180px) {
  .reference-trusted-businesses {
    display: none;
  }
}

@media (max-width: 820px) {
  .reference-access-page .access-hero-panel {
    min-height: 720px;
  }

  .reference-live-showcase .access-hero-footer small {
    display: none;
  }
}


/* Hospitality POS reference layout: Restaurant, Cafe, Bar */
.hospitality-pos-app {
  --fp-pos-header-height: 68px;
  grid-template-rows: var(--fp-pos-header-height) minmax(0, 1fr);
}

.hospitality-pos-header {
  gap: 8px;
  padding: 0 12px;
  background: #182b66;
  border-bottom: 0;
  box-shadow: 0 2px 8px rgba(14, 31, 74, .16);
}

.hospitality-brand-block {
  min-width: 118px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #fff;
  text-decoration: none;
}

.hospitality-back-arrow {
  font-size: 1.4rem;
  line-height: 1;
}

.hospitality-brand-block > span:last-child {
  display: grid;
  gap: 1px;
}

.hospitality-brand-block strong {
  color: #fff;
  font-size: .86rem;
  line-height: 1.05;
}

.hospitality-brand-block small {
  color: #e0e8ff;
  font-size: .64rem;
  font-weight: 700;
}

.hospitality-business-label {
  min-width: 124px;
  max-width: 190px;
  padding-left: 10px;
  border-left: 1px solid rgba(255,255,255,.2);
}

.hospitality-business-label strong,
.hospitality-business-label span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hospitality-business-label strong {
  color: #fff;
  font-size: .69rem;
  font-weight: 760;
}

.hospitality-business-label span {
  margin-top: 3px;
  color: #bdcae8;
  font-size: .56rem;
}

.hospitality-header-search {
  width: clamp(145px, 17vw, 230px);
  min-height: 38px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  margin-left: auto;
  border-radius: 8px;
  padding: 0 10px;
  background: #fff;
  color: #64748b;
}

.hospitality-header-search .icon {
  width: 15px;
  height: 15px;
}

.hospitality-header-search input {
  min-width: 0;
  height: 36px;
  border: 0;
  outline: 0;
  background: transparent;
  color: #172b4d;
  font-size: .66rem;
}

.hospitality-header-nav {
  display: flex;
  align-items: stretch;
  gap: 2px;
  align-self: stretch;
}

.hospitality-header-nav button,
.hospitality-header-nav a {
  min-width: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  position: relative;
  border: 0;
  border-radius: 0;
  padding: 0 7px;
  background: transparent;
  color: #f4f7ff;
  text-decoration: none;
  cursor: pointer;
  font-size: .58rem;
  font-weight: 720;
  white-space: nowrap;
}

.hospitality-header-nav button:hover,
.hospitality-header-nav a:hover {
  background: rgba(255,255,255,.08);
}

.hospitality-header-nav .icon {
  width: 13px;
  height: 13px;
}

.hospitality-header-nav em {
  min-width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: .5rem;
  font-style: normal;
  font-weight: 800;
}

.hospitality-header-user {
  min-width: 86px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 8px;
  border-left: 1px solid rgba(255,255,255,.16);
  color: #fff;
}

.hospitality-header-user .icon {
  width: 15px;
  height: 15px;
}

.hospitality-header-user span {
  min-width: 0;
}

.hospitality-header-user strong,
.hospitality-header-user small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hospitality-header-user strong {
  max-width: 95px;
  font-size: .6rem;
}

.hospitality-header-user small {
  margin-top: 2px;
  color: #c5d2ef;
  font-size: .5rem;
}

.hospitality-switch-staff {
  min-height: 35px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  border-radius: 7px;
  padding: 6px 8px;
  background: rgba(255,255,255,.08);
  color: #fff;
  font-size: .55rem;
  font-weight: 720;
}

.hospitality-switch-staff .icon {
  width: 13px;
  height: 13px;
}

.hospitality-reference-pos {
  height: calc(100dvh - var(--fp-pos-header-height));
  min-height: 0;
  overflow: hidden;
  background: #f8fafc;
}

.hospitality-reference-grid {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 72fr) minmax(320px, 28fr);
  background: #f8fafc;
}

.hospitality-catalog-column {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 12px 14px 0;
  overflow: hidden;
  background: #fff;
}

.hospitality-sale-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 46px;
  border-bottom: 1px solid #edf1f5;
}

.hospitality-quick-qty {
  display: flex;
  align-items: center;
  gap: 7px;
}

.hospitality-quick-qty button {
  width: 39px;
  height: 39px;
  border: 1px solid #dce3eb;
  border-radius: 7px;
  background: #fff;
  color: #26364d;
  font-size: .68rem;
  font-weight: 700;
}

.hospitality-quick-qty button.active {
  border-color: #1769e0;
  background: #1769e0;
  color: #fff;
}

.hospitality-service-type {
  display: flex;
  gap: 5px;
}

.hospitality-service-type button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid #dce3eb;
  border-radius: 8px;
  padding: 7px 13px;
  background: #fff;
  color: #34465d;
  font-size: .64rem;
  font-weight: 740;
}

.hospitality-service-type button.active {
  border-color: #1769e0;
  background: #1769e0;
  color: #fff;
}

.hospitality-service-type .icon {
  width: 14px;
  height: 14px;
}

.hospitality-category-bar {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0 6px;
  overflow-x: auto;
  border-bottom: 1px solid #f0f3f6;
}

.hospitality-category-bar button {
  min-height: 31px;
  flex: 0 0 auto;
  border: 1px solid #dce3eb;
  border-radius: 7px;
  padding: 5px 10px;
  background: #fff;
  color: #40536a;
  font-size: .6rem;
  font-weight: 720;
}

.hospitality-category-bar button.active {
  border-color: #1769e0;
  background: #1769e0;
  color: #fff;
}

.hospitality-subcategory-bar {
  min-height: 36px;
  padding-top: 4px;
}

.hospitality-inline-message {
  margin: 7px 0 0;
  border-radius: 7px;
  padding: 7px 9px;
  background: #eff6ff;
  color: #1d4f91;
  font-size: .59rem;
  font-weight: 650;
}

.hospitality-inline-message.error {
  background: #fff1f2;
  color: #b4233c;
}

.hospitality-inline-message.success {
  background: #ecfdf3;
  color: #087443;
}

.hospitality-product-stage {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 14px 0;
}

.hospitality-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 10px;
  align-content: start;
}

.hospitality-product-card {
  min-height: 126px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  border: 1px solid #dfe5ec;
  border-radius: 9px;
  padding: 12px;
  background: #fff;
  color: #172b4d;
  text-align: left;
  box-shadow: 0 1px 3px rgba(31, 45, 61, .04);
  cursor: pointer;
}

.hospitality-product-card:hover {
  border-color: #1769e0;
  box-shadow: 0 4px 12px rgba(23, 105, 224, .08);
}

.hospitality-product-card small {
  color: #3c68b2;
  font-size: .55rem;
  font-weight: 720;
}

.hospitality-product-card strong {
  margin-top: 8px;
  font-size: .72rem;
  line-height: 1.3;
}

.hospitality-product-card b {
  margin-top: auto;
  color: #172b4d;
  font-size: .69rem;
}

.hospitality-product-card > span {
  color: #6b7d91;
  font-size: .53rem;
}

.hospitality-product-card.out-of-stock {
  opacity: .48;
  cursor: not-allowed;
}

.hospitality-empty-products {
  grid-column: 1 / -1;
  min-height: 210px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  color: #7a8ba0;
  text-align: center;
}

.hospitality-empty-products .icon {
  width: 26px;
  height: 26px;
}

.hospitality-empty-products strong {
  color: #31435a;
  font-size: .72rem;
}

.hospitality-empty-products span {
  font-size: .58rem;
}

.hospitality-table-dock {
  flex: 0 0 auto;
  min-height: 144px;
  margin: 0 -14px;
  border-top: 1px solid #e4e9ef;
  padding: 10px 14px 12px;
  background: #fff;
}

.hospitality-table-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.hospitality-table-heading h3 {
  margin: 0;
  color: #27384f;
  font-size: .73rem;
}

.hospitality-table-heading span {
  display: block;
  margin-top: 2px;
  color: #7d8da0;
  font-size: .52rem;
}

.hospitality-table-heading > div:last-child {
  display: flex;
  gap: 6px;
}

.hospitality-table-heading button {
  min-height: 30px;
  border: 1px solid #dbe2ea;
  border-radius: 7px;
  padding: 5px 9px;
  background: #fff;
  color: #45586f;
  font-size: .56rem;
  font-weight: 720;
}

.hospitality-table-heading button.primary {
  border-color: #1769e0;
  background: #1769e0;
  color: #fff;
}

.hospitality-table-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
}

.hospitality-table-card {
  min-width: 92px;
  min-height: 64px;
  display: grid;
  place-items: center;
  gap: 2px;
  border: 1px solid #dce3eb;
  border-radius: 8px;
  padding: 7px;
  background: #fff;
  color: #30445b;
}

.hospitality-table-card strong {
  font-size: .63rem;
}

.hospitality-table-card span {
  color: #76879a;
  font-size: .49rem;
}

.hospitality-table-card.selected {
  border-color: #1769e0;
  background: #1769e0;
  color: #fff;
}

.hospitality-table-card.selected span {
  color: #e6efff;
}

.hospitality-table-card.occupied {
  opacity: .55;
}

.hospitality-no-tables {
  display: grid;
  place-items: center;
  min-height: 62px;
  color: #7a8ba0;
  font-size: .56rem;
}

.hospitality-current-order-panel {
  min-width: 0;
  min-height: 0;
  border-left: 1px solid #e2e7ed;
  background: #fff;
  overflow: hidden;
}

.hospitality-current-order {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 14px 14px 10px;
}

.hospitality-order-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.hospitality-order-title > div > span {
  display: block;
  color: #25374e;
  font-size: .77rem;
  font-weight: 800;
}

.hospitality-order-title > div > strong {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  color: #172b4d;
  font-size: .66rem;
}

.hospitality-order-title .icon {
  width: 14px;
  height: 14px;
}

.hospitality-order-title > button {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid #f0c5c9;
  border-radius: 7px;
  padding: 5px 8px;
  background: #fff;
  color: #c13a45;
  font-size: .54rem;
  font-weight: 720;
}

.hospitality-order-title > button:disabled {
  opacity: .35;
}

.hospitality-order-context {
  margin-top: 8px;
  border-bottom: 1px solid #edf1f5;
  padding-bottom: 9px;
}

.hospitality-order-context-main {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hospitality-order-context-main > .icon {
  width: 16px;
  height: 16px;
  color: #31445d;
}

.hospitality-order-context-main strong,
.hospitality-order-context-main span {
  display: block;
}

.hospitality-order-context-main strong {
  color: #25374e;
  font-size: .65rem;
}

.hospitality-order-context-main span {
  margin-top: 2px;
  color: #78899c;
  font-size: .53rem;
}

.hospitality-order-context-main .needs-table {
  color: #d64351;
}

.hospitality-waiter-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  border: 1px solid #e2e8ef;
  border-radius: 7px;
  padding: 7px 8px;
}

.hospitality-waiter-row span {
  color: #74869a;
  font-size: .52rem;
}

.hospitality-waiter-row strong {
  overflow: hidden;
  color: #2a3d54;
  font-size: .58rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hospitality-waiter-row small {
  color: #8b9bad;
  font-size: .5rem;
}

.hospitality-order-lines {
  min-height: 100px;
  flex: 1 1 auto;
  overflow-y: auto;
  margin: 8px 0;
}

.hospitality-order-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 7px;
  padding: 9px 0;
  border-bottom: 1px solid #edf1f5;
}

.hospitality-order-line > div:first-child {
  min-width: 0;
}

.hospitality-order-line strong,
.hospitality-order-line small {
  display: block;
}

.hospitality-order-line strong {
  overflow: hidden;
  color: #273a51;
  font-size: .61rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hospitality-order-line small {
  margin-top: 2px;
  color: #8493a5;
  font-size: .49rem;
}

.hospitality-order-line > span {
  color: #273a51;
  font-size: .57rem;
  font-weight: 750;
  white-space: nowrap;
}

.hospitality-line-qty {
  display: grid;
  grid-template-columns: 24px 22px 24px;
  align-items: center;
  gap: 2px;
}

.hospitality-line-qty button {
  width: 24px;
  height: 24px;
  border: 1px solid #dce3eb;
  border-radius: 6px;
  background: #fff;
  color: #34465d;
}

.hospitality-line-qty b {
  text-align: center;
  font-size: .56rem;
}

.hospitality-order-empty {
  min-height: 120px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  color: #91a0b0;
  text-align: center;
}

.hospitality-order-empty .icon {
  width: 23px;
  height: 23px;
}

.hospitality-order-empty strong {
  color: #566a80;
  font-size: .6rem;
}

.hospitality-order-empty span {
  font-size: .5rem;
}

.hospitality-order-summary {
  border-top: 1px solid #edf1f5;
  padding-top: 7px;
}

.hospitality-order-summary > div {
  min-height: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #738397;
  font-size: .53rem;
}

.hospitality-order-summary strong {
  color: #33485e;
  font-size: .56rem;
}

.hospitality-order-summary .total {
  min-height: 38px;
  color: #21344b;
  font-size: .7rem;
  font-weight: 800;
}

.hospitality-order-summary .total strong {
  color: #172b4d;
  font-size: .72rem;
}

.hospitality-primary-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  margin-top: 7px;
}

.hospitality-primary-actions button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  border-radius: 6px;
  color: #fff;
  font-size: .64rem;
  font-weight: 780;
}

.hospitality-primary-actions .send-kitchen {
  background: #20c56b;
}

.hospitality-primary-actions .take-payment {
  background: #1769e0;
}

.hospitality-primary-actions button:disabled {
  opacity: .34;
}

.hospitality-primary-actions .icon {
  width: 14px;
  height: 14px;
}

.hospitality-order-footer {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 5px;
  margin-top: 6px;
}

.hospitality-order-footer button {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid #dce3eb;
  border-radius: 6px;
  background: #fff;
  color: #465b72;
  font-size: .54rem;
  font-weight: 720;
}

.hospitality-order-footer button.danger {
  color: #c93f49;
  border-color: #efc7cb;
}

.hospitality-order-footer button:disabled {
  opacity: .35;
}

.hospitality-order-footer .icon {
  width: 12px;
  height: 12px;
}

.hospitality-order-status {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 7px;
  border-top: 1px solid #f0f3f6;
  padding-top: 7px;
  color: #8190a1;
  font-size: .49rem;
}

.hospitality-order-status strong {
  color: #3e5570;
}

.hospitality-order-status small {
  margin-left: auto;
}

.hospitality-secondary-view {
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  padding: 16px;
  background: #f8fafc;
}

.hospitality-secondary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.hospitality-secondary-head h2 {
  margin: 0;
  color: #22354d;
  font-size: 1rem;
}

.hospitality-secondary-head p {
  margin: 3px 0 0;
  color: #7a8ba0;
  font-size: .62rem;
}

.hospitality-secondary-head button {
  min-height: 36px;
  border: 1px solid #1769e0;
  border-radius: 7px;
  padding: 6px 11px;
  background: #1769e0;
  color: #fff;
  font-size: .61rem;
  font-weight: 740;
}

.hospitality-empty-secondary {
  min-height: 180px;
  display: grid;
  place-items: center;
  color: #7c8da1;
  font-size: .65rem;
}

.hospitality-manage-tables {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

@media (max-width: 1260px) {
  .hospitality-header-search {
    width: 145px;
  }

  .hospitality-business-label {
    max-width: 135px;
  }

  .hospitality-header-nav button,
  .hospitality-header-nav a {
    min-width: 56px;
    padding: 0 5px;
  }

  .hospitality-header-nav span {
    font-size: .53rem;
  }

  .hospitality-switch-staff span {
    display: none;
  }
}

@media (max-width: 1040px) {
  .hospitality-business-label {
    display: none;
  }

  .hospitality-header-user small,
  .hospitality-header-nav .icon {
    display: none;
  }

  .hospitality-reference-grid {
    grid-template-columns: minmax(0, 66fr) minmax(300px, 34fr);
  }

  .hospitality-product-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }
}

@media (max-width: 820px) {
  body.pos-mode {
    overflow: auto;
  }

  .hospitality-pos-app {
    grid-template-rows: auto auto;
  }

  .hospitality-pos-header {
    min-height: 68px;
    flex-wrap: wrap;
    padding: 8px 10px;
  }

  .hospitality-header-search {
    order: 4;
    width: 100%;
  }

  .hospitality-header-nav {
    order: 5;
    width: 100%;
    min-height: 46px;
    overflow-x: auto;
  }

  .hospitality-header-user,
  .hospitality-switch-staff {
    margin-left: auto;
  }

  .hospitality-reference-pos {
    height: auto;
    overflow: visible;
  }

  .hospitality-reference-grid {
    display: block;
  }

  .hospitality-catalog-column {
    min-height: 720px;
    overflow: visible;
  }

  .hospitality-current-order-panel {
    min-height: 520px;
    border-top: 1px solid #e2e7ed;
    border-left: 0;
  }
}

@media (max-width: 520px) {
  .hospitality-sale-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .hospitality-quick-qty {
    width: 100%;
    overflow-x: auto;
  }

  .hospitality-quick-qty button {
    flex: 0 0 38px;
  }

  .hospitality-service-type {
    width: 100%;
  }

  .hospitality-service-type button {
    flex: 1;
  }

  .hospitality-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hospitality-table-dock {
    min-height: 132px;
  }
}


/* Android restaurant workflow parity */
.android-open-orders,
.kitchen-reference-screen,
.order-status-reference-screen {
  min-height: calc(100vh - 122px);
  padding: 18px 20px 28px;
  background: #f7f9fc;
  color: #172b4d;
}
.android-open-orders-head,
.kitchen-reference-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}
.android-open-orders-title,
.kitchen-reference-title {
  display: flex;
  align-items: center;
  gap: 12px;
}
.android-open-orders-title > .icon,
.kitchen-reference-title > .icon {
  width: 34px;
  height: 34px;
  padding: 7px;
  border-radius: 10px;
  background: #eaf3ff;
  color: #1769e0;
}
.android-open-orders-title h2,
.kitchen-reference-title h1,
.order-status-heading h1 {
  margin: 0;
  color: #172b4d;
  font-size: 1.28rem;
  font-weight: 850;
}
.android-open-orders-title p,
.kitchen-reference-title p,
.order-status-heading p {
  margin: 3px 0 0;
  color: #76879a;
  font-size: .7rem;
}
.android-open-order-filters,
.kitchen-reference-filters {
  display: flex;
  gap: 8px;
  margin-top: 13px;
  flex-wrap: wrap;
}
.android-open-order-filters button,
.kitchen-reference-filters button,
.android-open-back {
  min-height: 36px;
  border: 1px solid #dce4ed;
  border-radius: 999px;
  background: #fff;
  padding: 0 13px;
  color: #62758a;
  font-size: .68rem;
  font-weight: 760;
}
.android-open-order-filters button span,
.kitchen-reference-filters button span {
  margin-left: 4px;
}
.android-open-order-filters button.active,
.kitchen-reference-filters button.active {
  border-color: #1769e0;
  background: #1769e0;
  color: #fff;
}
.android-open-back {
  border-radius: 9px;
  color: #1769e0;
}
.android-open-order-grid,
.kitchen-reference-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
  align-items: start;
}
.android-open-order-card,
.kitchen-reference-card,
.order-status-card {
  overflow: hidden;
  border: 1px solid #dfe6ee;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 5px 16px rgba(21, 45, 78, .05);
}
.android-open-order-card {
  border-top: 3px solid #f4a21a;
  padding: 15px;
}
.android-open-order-card.held {
  border-top-color: #8b95a5;
}
.android-open-card-top,
.kitchen-ticket-top,
.order-status-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.android-open-card-top > div,
.kitchen-ticket-top > div,
.order-status-card-top > div {
  display: grid;
  gap: 3px;
}
.android-open-card-top strong,
.kitchen-ticket-top strong,
.order-status-card-top strong {
  font-size: .88rem;
  letter-spacing: .01em;
}
.android-open-card-top small,
.kitchen-ticket-top small,
.order-status-card-top small {
  color: #8492a3;
  font-size: .6rem;
}
.android-order-status,
.kitchen-status,
.customer-order-state {
  border-radius: 999px;
  padding: 5px 9px;
  font-size: .56rem;
  font-weight: 820;
  text-transform: uppercase;
  letter-spacing: .035em;
}
.android-order-status {
  background: #fff4e5;
  color: #b66b00;
}
.android-order-status.preparing {
  background: #eaf3ff;
  color: #1769e0;
}
.android-order-status.ready {
  background: #e9f8ef;
  color: #18864b;
}
.android-open-card-meta,
.kitchen-ticket-meta,
.order-status-card-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
  color: #52667c;
  font-size: .65rem;
}
.android-open-card-meta span,
.kitchen-ticket-meta span,
.order-status-card-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.android-open-card-meta .icon,
.kitchen-ticket-meta .icon,
.order-status-card-meta .icon {
  width: 13px;
  height: 13px;
  color: #1769e0;
}
.android-open-card-items,
.kitchen-ticket-items {
  display: grid;
  gap: 8px;
  margin-top: 13px;
  padding: 11px 0;
  border-top: 1px solid #eef2f6;
  border-bottom: 1px solid #eef2f6;
}
.android-open-card-items > div {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 4px 10px;
  color: #34495e;
  font-size: .68rem;
}
.android-open-card-items > div small {
  grid-column: 1 / -1;
  color: #8795a5;
}
.android-open-card-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0 4px;
  color: #52667c;
  font-size: .68rem;
}
.android-open-card-total strong {
  color: #172b4d;
  font-size: .8rem;
}
.android-open-card-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  margin-top: 9px;
}
.android-open-card-actions button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid #dce4ed;
  border-radius: 9px;
  background: #fff;
  color: #53677d;
  font-size: .61rem;
  font-weight: 780;
}
.android-open-card-actions button .icon {
  width: 12px;
  height: 12px;
}
.android-open-card-actions button.primary {
  border-color: #1769e0;
  background: #1769e0;
  color: #fff;
}
.android-open-card-actions button.danger {
  border-color: #f0c8c8;
  background: #fff5f5;
  color: #d43a3a;
}
.android-open-empty,
.kitchen-reference-empty,
.order-status-empty {
  grid-column: 1 / -1;
  min-height: 220px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  color: #8391a1;
  text-align: center;
}
.android-open-empty .icon,
.kitchen-reference-empty .icon,
.order-status-empty .icon {
  width: 34px;
  height: 34px;
}
.kitchen-reference-card {
  border: 1px solid #dfe6ee;
  border-top: 3px solid #f4a21a;
  padding: 15px;
}
.kitchen-reference-card.preparing {
  border-top-color: #1769e0;
}
.kitchen-reference-card.ready {
  border-top-color: #28a85a;
}
.kitchen-status.sent {
  background: #fff1d9;
  color: #b46b00;
}
.kitchen-status.preparing {
  background: #e9f2ff;
  color: #1769e0;
}
.kitchen-status.ready {
  background: #e8f8ee;
  color: #18864b;
}
.kitchen-ticket-items > div {
  color: #2e4359;
  font-size: .72rem;
}
.kitchen-ticket-item-row {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.kitchen-ticket-item-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.kitchen-item-qty {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.kitchen-item-qty button {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid #d9e2ec;
  border-radius: 50%;
  background: #fff;
  color: #1769e0;
  font-size: .9rem;
  font-weight: 850;
  line-height: 1;
}
.kitchen-item-qty button:hover {
  border-color: #1769e0;
  background: #f2f7ff;
}
.kitchen-ticket-items small {
  color: #8291a2;
  font-size: .6rem;
}
.kitchen-chef-note {
  margin-top: 10px;
  padding: 10px;
  border-radius: 10px;
  background: #f4f8fc;
}
.kitchen-chef-note > span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #1769e0;
  font-size: .62rem;
}
.kitchen-chef-note .icon {
  width: 13px;
  height: 13px;
}
.kitchen-chef-note p {
  margin: 5px 0 0;
  color: #7c8b9d;
  font-size: .62rem;
}
.kitchen-ticket-actions {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 9px;
  margin-top: 12px;
}
.kitchen-ticket-actions button,
.kitchen-main-action {
  min-height: 42px;
  border-radius: 9px;
  font-size: .68rem;
  font-weight: 820;
}
.kitchen-print {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid #dce4ed;
  background: #fff;
  color: #4b6076;
}
.kitchen-print .icon {
  width: 14px;
}
.kitchen-main-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  color: #fff;
}
.kitchen-main-action.sent {
  background: #f5a000;
}
.kitchen-main-action.preparing {
  background: #1769e0;
}
.kitchen-main-action.ready-state {
  background: #28a85a;
}
.kitchen-main-action .icon {
  width: 15px;
}
.restaurant-ops-message {
  margin: 0 20px 12px;
  padding: 10px 12px;
  border: 1px solid #f1c9c9;
  border-radius: 9px;
  background: #fff5f5;
  color: #b22d2d;
  font-size: .68rem;
  font-weight: 700;
}
.order-status-reference-screen {
  position: relative;
  min-height: calc(100vh - 106px);
  padding: 26px clamp(22px, 4vw, 58px) 70px;
  background: #fbfcfe;
}
.order-status-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.order-status-brandmark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: #1769e0;
  color: #fff;
}
.order-status-brandmark .icon {
  width: 22px;
}
.order-status-brand > div:last-child {
  display: grid;
}
.order-status-brand strong {
  color: #172b4d;
  font-size: .9rem;
}
.order-status-brand span {
  color: #8391a1;
  font-size: .55rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.order-status-heading {
  margin-top: 6px;
  text-align: center;
}
.order-status-heading h1 {
  font-size: 1.45rem;
}
.order-status-progress {
  max-width: 860px;
  margin: 30px auto 34px;
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto 1fr auto;
  align-items: center;
}
.order-status-step {
  min-width: 120px;
  display: grid;
  justify-items: center;
  gap: 8px;
  text-align: center;
}
.order-status-step-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #1769e0;
}
.order-status-step:nth-of-type(5) .order-status-step-icon {
  background: #f29b12;
}
.order-status-step:nth-of-type(7) .order-status-step-icon {
  background: #28a85a;
}
.order-status-step-icon .icon {
  width: 18px;
}
.order-status-step div {
  display: grid;
  gap: 2px;
}
.order-status-step strong {
  color: #273b53;
  font-size: .68rem;
}
.order-status-step small {
  color: #8492a3;
  font-size: .52rem;
  white-space: nowrap;
}
.order-status-connector {
  height: 2px;
  background: #1769e0;
}
.order-status-cards {
  width: min(880px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
}
.order-status-card {
  padding: 15px;
}
.customer-order-state {
  background: #eaf3ff;
  color: #1769e0;
}
.customer-order-state.stage-4 {
  background: #e8f8ee;
  color: #18864b;
}
.order-status-mini-progress {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  margin-top: 15px;
}
.order-status-mini-progress > div {
  display: grid;
  justify-items: center;
  gap: 4px;
  color: #a3adba;
  font-size: .52rem;
}
.order-status-mini-progress > div span {
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid #d9e1ea;
  background: #fff;
  font-weight: 800;
}
.order-status-mini-progress > div.complete {
  color: #1769e0;
}
.order-status-mini-progress > div.complete span {
  border-color: #1769e0;
  background: #1769e0;
  color: #fff;
}
.order-status-mini-progress > div.current:last-child {
  color: #28a85a;
}
.order-status-mini-progress > div.current:last-child span {
  border-color: #28a85a;
  background: #28a85a;
}
.order-status-items {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
  padding-top: 11px;
  border-top: 1px solid #eef2f6;
  color: #66788c;
  font-size: .62rem;
}
.order-status-items span {
  padding: 5px 8px;
  border-radius: 999px;
  background: #f4f7fa;
}
.order-status-footer {
  position: absolute;
  left: clamp(22px, 4vw, 58px);
  right: clamp(22px, 4vw, 58px);
  bottom: 18px;
  display: flex;
  justify-content: space-between;
  color: #718195;
  font-size: .6rem;
}
.order-status-footer b {
  color: #172b4d;
}
@media (max-width: 720px) {
  .android-open-orders,
  .kitchen-reference-screen,
  .order-status-reference-screen {
    padding: 14px;
  }
  .android-open-orders-head,
  .kitchen-reference-head {
    display: grid;
  }
  .android-open-order-grid,
  .kitchen-reference-grid,
  .order-status-cards {
    grid-template-columns: 1fr;
  }
  .android-open-card-actions {
    grid-template-columns: 1fr 1fr;
  }
  .order-status-progress {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .order-status-connector {
    width: 2px;
    height: 18px;
    justify-self: center;
  }
  .order-status-step {
    min-width: 0;
  }
  .order-status-footer {
    position: static;
    margin-top: 30px;
  }
}


/* Busy restaurant operations and payments */
.restaurant-ops-titlebar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.restaurant-ops-titlecopy {
  display: flex;
  align-items: center;
  gap: 12px;
}
.restaurant-ops-titlecopy > .icon {
  width: 34px;
  height: 34px;
  padding: 7px;
  border-radius: 10px;
  background: #eaf3ff;
  color: #1769e0;
}
.restaurant-ops-titlecopy h1 {
  margin: 0;
  color: #172b4d;
  font-size: 1.28rem;
  font-weight: 850;
}
.restaurant-ops-titlecopy p {
  margin: 3px 0 0;
  color: #76879a;
  font-size: .7rem;
}
.restaurant-ops-back {
  min-height: 38px;
  border: 1px solid #dce4ed;
  border-radius: 10px;
  background: #fff;
  padding: 0 14px;
  color: #1769e0;
  font-size: .68rem;
  font-weight: 800;
}
.restaurant-payments-screen {
  min-height: calc(100vh - 122px);
  padding: 18px 20px 30px;
  background: #f7f9fc;
  color: #172b4d;
}
.restaurant-payment-summarybar {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  color: #697b8e;
  font-size: .68rem;
}
.restaurant-payment-summarybar strong {
  color: #172b4d;
  font-size: .85rem;
}
.restaurant-payment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 14px;
  align-items: start;
}
.restaurant-payment-order {
  overflow: hidden;
  border: 1px solid #dfe6ee;
  border-top: 3px solid #1769e0;
  border-radius: 16px;
  background: #fff;
  padding: 15px;
  box-shadow: 0 5px 16px rgba(21, 45, 78, .05);
}
.restaurant-payment-order-top,
.restaurant-payment-order-meta,
.restaurant-payment-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.restaurant-payment-order-top > div {
  display: grid;
  gap: 3px;
}
.restaurant-payment-order-top > div > strong {
  font-size: .88rem;
}
.restaurant-payment-order-top small {
  color: #8492a3;
  font-size: .6rem;
}
.restaurant-payment-order-meta {
  margin-top: 12px;
  color: #52667c;
  font-size: .65rem;
}
.restaurant-payment-order-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.restaurant-payment-order-meta .icon {
  width: 13px;
  height: 13px;
  color: #1769e0;
}
.restaurant-payment-items {
  display: grid;
  gap: 8px;
  margin-top: 13px;
  padding: 11px 0;
  border-top: 1px solid #eef2f6;
  border-bottom: 1px solid #eef2f6;
}
.restaurant-payment-items > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #34495e;
  font-size: .68rem;
}
.restaurant-payment-total {
  padding: 11px 0;
  color: #66788c;
  font-size: .68rem;
}
.restaurant-payment-total strong {
  color: #172b4d;
  font-size: .9rem;
}
.restaurant-payment-button {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  border-radius: 10px;
  background: #1769e0;
  color: #fff;
  font-size: .7rem;
  font-weight: 820;
}
.restaurant-payment-button .icon {
  width: 15px;
}
.restaurant-payment-empty {
  grid-column: 1 / -1;
  min-height: 240px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  color: #8391a1;
  text-align: center;
}
.restaurant-payment-empty .icon {
  width: 36px;
  height: 36px;
  color: #28a85a;
}
@media (max-width: 720px) {
  .restaurant-ops-titlebar,
  .restaurant-payment-summarybar {
    display: grid;
  }
  .restaurant-payments-screen {
    padding: 14px;
  }
  .restaurant-payment-grid {
    grid-template-columns: 1fr;
  }
}