:root {
  --primary: #2563eb; --primary-dark: #1d4ed8; --success: #16a34a;
  --warning: #f59e0b; --danger: #dc2626; --info: #0ea5e9;
  --ink: #0f1e3a; --text: #344563; --muted: #64748b;
  --background: #f8fafc; --surface: #fff; --border: #e2e8f0;
  --sidebar: #10243a; --sidebar-deep: #0b1b2c; --radius: 10px;
  --shadow: 0 1px 2px rgb(15 30 58 / 4%), 0 8px 24px rgb(15 30 58 / 3%);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif; color: var(--ink);
}
* { box-sizing: border-box; }
html { background: var(--background); }
body { margin: 0; min-width: 320px; background: var(--background); font-size: 14px; }
button, input, select { font: inherit; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.skip-link { position: fixed; top: -50px; left: 16px; z-index: 100; padding: 10px 14px; background: white; color: var(--primary); border-radius: 6px; }
.skip-link:focus { top: 12px; }
.app-shell { min-height: 100vh; display: flex; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 30; width: 252px; display: flex; flex-direction: column; color: #f8fafc; background: linear-gradient(155deg, var(--sidebar) 0%, var(--sidebar-deep) 100%); box-shadow: 8px 0 30px rgb(15 30 58 / 8%); }
.brand { height: 74px; padding: 16px 22px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid rgb(255 255 255 / 8%); }
.brand-mark { width: 32px; height: 32px; display: grid; place-items: center; border: 3px solid #e2e8f0; transform: rotate(30deg); font-size: 0; }
.brand-mark::after { content: ''; width: 12px; height: 12px; border: 2px solid #e2e8f0; }
.brand strong, .brand small { display: block; }.brand strong { font-size: 17px; }.brand small { margin-top: 4px; color: #b8c5d3; font-size: 9px; }
.nav-groups { min-height: 0; flex: 1; padding: 12px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; -ms-overflow-style: none; }
.nav-groups::-webkit-scrollbar { width: 0; height: 0; }
.nav-label { margin: 18px 10px 7px; color: #9fb0c3; font-size: 10px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; }
.nav-link { min-height: 40px; padding: 9px 12px; display: flex; align-items: center; gap: 12px; color: #f1f5f9; text-decoration: none; border-radius: 7px; font-size: 13px; }
.nav-link:hover { background: rgb(255 255 255 / 7%); }.nav-link.is-active { background: #27486e; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 4%); }
.nav-icon { width: 18px; color: #dbeafe; text-align: center; font-size: 17px; }
.organization { min-height: 72px; padding: 14px 20px; display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 10px; border-top: 1px solid rgb(255 255 255 / 9%); }
.organization strong, .organization small { display: block; }.organization strong { font-size: 12px; }.organization small { margin-top: 3px; color: #b8c5d3; font-size: 10px; }.org-icon { font-size: 22px; }
@media (max-height: 850px) and (min-width: 1101px) {
  .nav-groups { padding: 9px 12px; }
  .nav-link { min-height: 36px; padding-block: 7px; }
  .nav-label { margin: 12px 10px 5px; }
}
.app-body { width: calc(100% - 252px); margin-left: 252px; }
.topbar { height: 74px; position: sticky; top: 0; z-index: 20; padding: 0 28px; display: flex; align-items: center; gap: 18px; background: rgb(255 255 255 / 94%); border-bottom: 1px solid var(--border); backdrop-filter: blur(12px); }
.search { width: min(500px, 50vw); height: 40px; padding: 0 10px; display: flex; align-items: center; gap: 9px; background: var(--background); border: 1px solid var(--border); border-radius: 8px; }
.search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 12px; }.search kbd { padding: 3px 6px; white-space: nowrap; color: var(--muted); background: #eaf0f6; border-radius: 4px; font-size: 10px; }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }.icon-button { width: 38px; height: 38px; border: 0; display: grid; place-items: center; background: transparent; border-radius: 8px; cursor: pointer; font-size: 18px; }.icon-button:hover { background: var(--background); }
.notification-button { position: relative; }.notification-dot { position: absolute; top: 5px; right: 5px; width: 8px; height: 8px; background: var(--danger); border: 2px solid white; border-radius: 50%; }
.profile-wrap { display: flex; align-items: center; gap: 10px; }.avatar { width: 38px; height: 38px; display: grid; place-items: center; color: white; background: #183d6b; border-radius: 50%; font-size: 12px; }.profile-copy strong, .profile-copy small { display: block; }.profile-copy strong { font-size: 12px; }.profile-copy small { margin-top: 3px; color: var(--muted); font-size: 10px; }.logout-button { padding: 6px 8px; color: var(--muted); background: transparent; border: 0; border-radius: 5px; cursor: pointer; font-size: 11px; }.logout-button:hover { color: var(--danger); background: #fef2f2; }
.menu-button, .mobile-brand { display: none; }
.main-content { width: min(1320px, 100%); margin: 0 auto; padding: 28px; }
.page-heading { margin-bottom: 22px; display: flex; align-items: end; justify-content: space-between; gap: 20px; }.eyebrow { margin: 0 0 5px; color: var(--primary); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }.page-heading h1 { margin: 0; font-size: 28px; line-height: 1.2; letter-spacing: -.03em; }.page-heading p:not(.eyebrow) { margin: 6px 0 0; color: var(--text); font-size: 13px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.foundation-intro { margin-bottom: 14px; padding: 22px; display: flex; justify-content: space-between; align-items: center; gap: 24px; }.foundation-intro > div:first-child { max-width: 650px; }.foundation-intro strong { font-size: 16px; }.foundation-intro p { margin: 7px 0 0 23px; color: var(--text); line-height: 1.55; }.status-dot { width: 12px; height: 12px; margin-right: 10px; display: inline-block; background: var(--success); border: 3px solid #dcfce7; border-radius: 50%; }.principles { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }.principles span { padding: 7px 10px; color: #166534; background: #dcfce7; border-radius: 999px; font-size: 11px; font-weight: 500; }
.showcase-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }.showcase-section { min-height: 300px; padding: 20px; }.card-header { min-height: 38px; margin-bottom: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }.card-header h2 { margin: 0; font-size: 17px; letter-spacing: -.02em; }.card-header > span { color: var(--muted); font-size: 11px; }
.button-stack, .badge-stack { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }.button { min-height: 40px; padding: 9px 15px; border: 1px solid transparent; border-radius: 6px; cursor: pointer; font-weight: 500; font-size: 12px; }.button-primary { color: white; background: linear-gradient(180deg, #2872f4, #0f5bea); box-shadow: 0 4px 12px rgb(37 99 235 / 20%); }.button-primary:hover { background: var(--primary-dark); }.button-secondary { background: #edf2f7; border-color: #e2e8f0; }.button-ghost { color: var(--primary); background: transparent; }.button-danger { color: white; background: var(--danger); }
.badge-stack { align-items: flex-start; }.badge { padding: 6px 9px; display: inline-flex; gap: 5px; border-radius: 6px; font-size: 11px; font-weight: 500; }.badge-success { color: #08712c; background: #d9f5e4; }.badge-warning { color: #b45309; background: #fff0ce; }.badge-info { color: #075cca; background: #dbeafe; }.badge-danger { color: #b91c1c; background: #fee2e2; }.badge-muted { color: #475569; background: #e8eef5; }
.field { margin-bottom: 12px; display: block; color: var(--text); font-size: 11px; font-weight: 500; }.field input, .field select { width: 100%; height: 40px; margin-top: 6px; padding: 0 10px; color: var(--text); background: white; border: 1px solid #cfd9e5; border-radius: 6px; outline: 0; }.field input:focus, .field select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgb(37 99 235 / 12%); }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 7px; }table { width: 100%; border-collapse: collapse; font-size: 11px; }th, td { padding: 11px 8px; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; }th { color: var(--text); background: #f3f6f9; font-size: 9px; text-transform: uppercase; }tbody tr:last-child td { border-bottom: 0; }input[type='checkbox'] { accent-color: var(--primary); }
.tokens-card { margin-top: 14px; padding: 20px; }.token-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }.token-grid > div { padding: 12px; display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 3px 9px; background: var(--background); border-radius: 7px; }.token-grid strong { font-size: 11px; }.token-grid code { color: var(--muted); font-size: 9px; }.swatch { grid-row: 1 / 3; width: 28px; height: 28px; display: block; border: 1px solid rgb(15 30 58 / 8%); border-radius: 50%; }.swatch.primary { background: var(--primary); }.swatch.success { background: var(--success); }.swatch.warning { background: var(--warning); }.swatch.danger { background: var(--danger); }.swatch.background { background: var(--background); }.swatch.border { background: var(--border); }
.sidebar-backdrop { position: fixed; inset: 0; z-index: 25; background: rgb(2 12 27 / 45%); backdrop-filter: blur(2px); }
@media (max-width: 1100px) {
  .sidebar { transform: translateX(-100%); transition: transform .2s ease; }.nav-open .sidebar { transform: translateX(0); }.app-body { width: 100%; margin-left: 0; }.menu-button { display: grid; }.mobile-brand { display: block; font-size: 13px; font-weight: 700; }.search { margin-left: 8px; }.showcase-grid { grid-template-columns: repeat(2, 1fr); }.token-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
  body { font-size: 13px; }.topbar { height: 58px; padding: 0 12px; gap: 4px; }.menu-button { width: 34px; }.search { width: auto; margin-left: auto; border: 0; background: transparent; }.search input, .search kbd, .help-button, .profile-copy, .logout-button { display: none; }.search span:first-child { font-size: 20px; }.topbar-actions { margin-left: 0; gap: 0; }.avatar { width: 32px; height: 32px; }.notification-button { width: 34px; }.main-content { padding: 20px 14px 30px; }.page-heading { align-items: flex-start; }.page-heading h1 { font-size: 23px; }.page-heading .button { width: 42px; min-width: 42px; padding: 0; font-size: 0; }.page-heading .button span { font-size: 20px; }.foundation-intro { padding: 17px; display: block; }.foundation-intro p { margin-left: 0; }.principles { margin-top: 16px; justify-content: flex-start; }.showcase-grid { grid-template-columns: 1fr; }.showcase-section { min-height: auto; padding: 17px; }.token-grid { grid-template-columns: repeat(2, 1fr); }.tokens-card { padding: 17px; }.tokens-card .card-header > span { display: none; }
}

/* Screen 04: order detail */
.message-stack { margin-bottom: 14px; }.app-message { padding: 11px 14px; color: #075985; background: #e0f2fe; border: 1px solid #bae6fd; border-radius: 7px; font-size: 12px; }.app-message.success { color: #166534; background: #dcfce7; border-color: #bbf7d0; }
.detail-heading { margin-bottom: 18px; display: flex; align-items: end; justify-content: space-between; gap: 20px; }.detail-title { display: flex; align-items: center; gap: 10px; }.detail-title h1 { margin: 0; font-size: 27px; letter-spacing: -.035em; }.detail-heading p { margin: 6px 0 0; color: var(--muted); font-size: 11px; }.process-top { min-width: 135px; }.detail-summary-grid { margin-bottom: 14px; display: grid; grid-template-columns: 1.05fr 1.05fr 1.15fr .9fr; gap: 14px; }.detail-card { min-width: 0; min-height: 176px; padding: 16px; background: white; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }.detail-card header { margin-bottom: 15px; display: flex; align-items: center; gap: 9px; }.detail-card header i, .order-notes header i, .processing-card header i { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 7px; font-style: normal; }.detail-card header i.blue, .order-notes header i, .processing-card header i { color: #0867e9; background: #e5f0ff; }.detail-card header i.green { color: #079447; background: #e1f7eb; }.detail-card h2 { margin: 0; font-size: 12px; }.identity-row { display: flex; align-items: center; gap: 11px; }.detail-avatar { width: 39px; height: 39px; flex: 0 0 39px; display: grid; place-items: center; color: #0b5fd7; background: #dbeafe; border-radius: 50%; font-size: 11px; }.identity-row strong, .identity-row small { display: block; overflow-wrap: anywhere; }.identity-row strong { font-size: 13px; }.identity-row small { margin-top: 5px; color: #536b8e; font-size: 9px; }.compact-details { margin: 0; display: grid; gap: 10px; }.compact-details > div { display: flex; justify-content: space-between; gap: 10px; }.compact-details dt { color: #536b8e; font-size: 10px; }.compact-details dd { margin: 0; font-weight: 500; text-align: right; font-size: 10px; }.detail-total { margin: 12px 0 22px; display: block; font-size: 27px; letter-spacing: -.04em; }.total-row { padding: 9px; display: flex; align-items: center; justify-content: space-between; background: #f4f8fc; border-radius: 6px; font-size: 10px; font-weight: 600; }
.order-notes { margin-bottom: 14px; }.order-notes > header { min-height: 66px; padding: 12px 16px; }.order-notes header > div, .processing-card header > div { display: flex; align-items: flex-start; gap: 10px; }.order-notes strong, .order-notes small, .processing-card strong, .processing-card small { display: block; }.order-notes strong, .processing-card strong { margin-top: 2px; font-size: 12px; }.order-notes small, .processing-card small { margin-top: 5px; color: #40587b; font-size: 10px; line-height: 1.5; }
.detail-main-grid { margin-bottom: 14px; display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 14px; }.detail-items { min-height: 270px; }.item-table { padding: 0 16px 16px; overflow-x: auto; }.item-table table { min-width: 620px; font-size: 10px; }.item-table td, .item-table th { padding: 10px; }.mobile-item-list { display: none; }.status-history ol { margin: 3px 0 0; padding: 0 17px 18px; list-style: none; }.status-history li { position: relative; min-height: 68px; padding-left: 28px; display: flex; }.status-history li:not(:last-child)::before { content: ''; position: absolute; left: 7px; top: 17px; bottom: -2px; border-left: 2px solid #d6dfeb; }.status-history li > i { position: absolute; left: 0; top: 2px; width: 16px; height: 16px; background: #aebdd1; border: 4px solid white; border-radius: 50%; box-shadow: 0 0 0 1px #aebdd1; }.status-history li.done > i { background: #16a34a; box-shadow: 0 0 0 1px #16a34a; }.status-history strong, .status-history small { display: block; }.status-history strong { color: #263f64; font-size: 11px; }.status-history small { margin-top: 5px; color: #64748b; font-size: 9px; line-height: 1.45; }
.processing-card { margin-bottom: 14px; min-height: 96px; padding: 13px 16px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }.processing-card > header { padding: 0; margin: 0; }.processing-card form { min-width: 210px; }.processing-card form button { width: 100%; }.processed-lock { padding: 9px 14px; color: #08712c; background: #d9f5e4; border-radius: 6px; font-size: 11px; font-weight: 600; }.detail-footer { display: flex; justify-content: flex-end; }.detail-footer .button { color: #16365f; text-decoration: none; }
@media (max-width: 1100px) {
  .detail-summary-grid { grid-template-columns: repeat(3, 1fr); }.total-card { grid-column: span 1; }.detail-card { min-height: 150px; }.detail-main-grid { grid-template-columns: 1fr; }.status-history { display: none; }
}
@media (max-width: 700px) {
  .detail-heading { align-items: flex-start; }.detail-title { flex-wrap: wrap; gap: 7px; }.detail-title h1 { font-size: 20px; }.process-top { min-width: 42px; width: 42px; padding: 0; font-size: 0; }.process-top::first-letter { font-size: 16px; }.detail-summary-grid { grid-template-columns: 1fr; gap: 8px; }.detail-card { min-height: auto; padding: 13px; }.detail-card header { margin-bottom: 10px; }.detail-card:not(:nth-child(3)) .identity-row { padding-left: 3px; }.compact-details { gap: 8px; }.detail-total { margin: 6px 0 12px; font-size: 23px; }.order-notes > header { min-height: 58px; }.detail-items { min-height: auto; }.item-table { display: none; }.mobile-item-list { padding: 0 10px 10px; display: grid; gap: 7px; }.mobile-item-list > div { padding: 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #fbfdff; border: 1px solid var(--border); border-radius: 7px; }.mobile-item-list strong, .mobile-item-list small { display: block; }.mobile-item-list strong { font-size: 10px; }.mobile-item-list small { margin-top: 5px; color: var(--muted); font-size: 9px; }.processing-card { align-items: stretch; flex-direction: column; }.processing-card form { min-width: 0; width: 100%; }.processed-lock { text-align: center; }.detail-footer .button { width: 100%; }
}

/* Screen 03: orders */
.orders-heading { margin-bottom: 18px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }.orders-heading h1 { margin: 0; font-size: 28px; letter-spacing: -.035em; }.orders-heading p { margin: 5px 0 0; color: var(--text); font-size: 13px; }.new-order-button { min-width: 138px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }
.order-filters { margin-bottom: 14px; background: white; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }.order-filters summary { display: none; }.order-filter-grid { padding: 17px; display: grid; grid-template-columns: 1.25fr .9fr .95fr 1fr; gap: 14px 16px; align-items: end; }.filter-field { min-width: 0; display: grid; gap: 6px; color: #213a5e; font-size: 11px; font-weight: 600; }.filter-field input, .filter-field select { width: 100%; min-width: 0; height: 38px; padding: 0 10px; color: #263f64; background: white; border: 1px solid #cfd9e5; border-radius: 6px; outline: 0; font-size: 11px; }.filter-field input:focus, .filter-field select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgb(37 99 235 / 10%); }.filter-field fieldset { border: 0; }.date-filter, .value-filter { margin: 0; padding: 0; border: 0; }.date-filter legend, .value-filter legend { margin-bottom: 6px; padding: 0; }.date-filter > div, .value-filter > div { display: flex; align-items: center; gap: 6px; }.date-filter input { padding: 0 5px; }.value-filter { grid-column: span 1; }.sort-filter { grid-column: span 1; }.filter-actions { display: flex; justify-content: flex-end; align-items: center; gap: 16px; }.filter-actions a { color: #0664ef; text-decoration: none; font-size: 11px; }.filter-actions .button { min-width: 95px; }.filter-errors { grid-column: 1 / -1; }
.order-list-toolbar { min-height: 45px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }.order-list-toolbar strong { font-size: 14px; }.export-button { min-width: 100px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; color: #16365f; text-decoration: none; }.export-button em { font-style: normal; }
.order-list-card { overflow: hidden; }.orders-desktop-table { overflow-x: auto; }.orders-desktop-table table { min-width: 850px; font-size: 10px; }.orders-desktop-table th { padding: 11px 10px; }.orders-desktop-table td { padding: 10px; }.order-reference { color: #0664ef; font-weight: 600; text-decoration: none; }.order-reference:hover { text-decoration: underline; }.row-arrow { color: #16365f; text-decoration: none; font-size: 20px; }.orders-mobile-cards { display: none; }.pagination { min-height: 58px; padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; gap: 14px; color: var(--text); border-top: 1px solid var(--border); font-size: 10px; }.pagination > div { display: flex; align-items: center; gap: 5px; }.pagination a, .pagination > div > span { width: 31px; height: 31px; display: grid; place-items: center; color: #183d6b; text-decoration: none; border: 1px solid var(--border); border-radius: 5px; }.pagination > div > span { color: white; background: var(--primary); border-color: var(--primary); }.pagination i { padding: 0 4px; font-style: normal; }
.order-summary-grid { margin-top: 16px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }.order-summary-grid article { min-height: 110px; padding: 16px; display: flex; align-items: center; gap: 14px; background: white; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }.order-summary-grid i { width: 46px; height: 46px; flex: 0 0 46px; display: grid; place-items: center; border-radius: 9px; font-size: 20px; font-style: normal; }.order-summary-grid i.blue { color: #0867e9; background: #e5f0ff; }.order-summary-grid i.green { color: #079447; background: #e1f7eb; }.order-summary-grid i.orange { color: #ef7d00; background: #fff0d8; }.order-summary-grid span { color: #40587b; font-size: 11px; }.order-summary-grid strong { margin-top: 6px; display: block; color: var(--ink); font-size: 21px; }.back-link { display: inline-block; margin-bottom: 8px; color: var(--primary); text-decoration: none; }.detail-placeholder { max-width: 760px; padding: 24px; }.detail-placeholder h2 { margin: 0 0 18px; }.detail-placeholder dl { margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }.detail-placeholder dl > div { padding-bottom: 12px; border-bottom: 1px solid var(--border); }.detail-placeholder dt { color: var(--muted); font-size: 10px; text-transform: uppercase; }.detail-placeholder dd { margin: 7px 0 0; font-weight: 500; }
@media (min-width: 701px) { .order-filters:not([open]) > .order-filter-grid { display: grid; } }
@media (max-width: 1100px) {
  .order-filter-grid { grid-template-columns: repeat(4, 1fr); gap: 10px; }.search-filter { grid-column: span 1; }.date-filter { grid-column: span 2; }.value-filter { grid-column: span 2; }.sort-filter { grid-column: span 2; }.filter-actions { grid-column: span 2; }.order-summary-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .orders-heading { margin-bottom: 12px; }.orders-heading h1 { font-size: 22px; }.orders-heading p { display: none; }.new-order-button { min-width: auto; min-height: 36px; padding: 7px 11px; }.order-filters summary { min-height: 45px; padding: 0 13px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; font-size: 12px; font-weight: 600; }.order-filter-grid { padding: 0 12px 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }.search-filter, .customer-filter, .date-filter, .value-filter, .sort-filter { grid-column: 1 / -1; }.status-filter, .rep-filter { grid-column: span 1; }.date-filter > div input { width: calc(50% - 10px); }.filter-actions { grid-column: 1 / -1; }.order-list-toolbar { min-height: 42px; }.export-button { width: 38px; min-width: 38px; padding: 0; }.export-button em { display: none; }.export-button span { font-size: 16px; }.orders-desktop-table { display: none; }.orders-mobile-cards { padding: 0 8px 8px; display: block; }.mobile-order-card { position: relative; min-height: 75px; margin-bottom: 7px; padding: 10px 30px 10px 10px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; color: var(--ink); background: #fbfdff; border: 1px solid var(--border); border-radius: 7px; text-decoration: none; }.mobile-order-main, .mobile-order-meta { display: grid; gap: 4px; }.mobile-order-main strong { color: #16365f; font-size: 11px; }.mobile-order-main small { color: #344563; font-size: 9px; }.mobile-order-main small:last-child { color: var(--muted); }.mobile-order-meta { justify-items: end; }.mobile-order-meta i { font-style: normal; }.mobile-order-meta strong { font-size: 11px; }.mobile-order-card > b { position: absolute; right: 10px; font-size: 18px; font-weight: 400; }.pagination { min-height: 50px; }.pagination > span { display: none; }.pagination > div { width: 100%; justify-content: center; }.pagination a, .pagination > div > span { width: 28px; height: 28px; }.order-summary-grid { display: none; }.detail-placeholder { padding: 17px; }.detail-placeholder dl { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }

/* Screen 05: customers */
.customers-heading .button:disabled { cursor: not-allowed; opacity: .58; }
.customer-summary-grid { margin-bottom: 14px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.customer-summary-grid article { min-height: 112px; padding: 16px; display: flex; align-items: flex-start; gap: 13px; background: white; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.customer-summary-grid i { width: 43px; height: 43px; flex: 0 0 43px; display: grid; place-items: center; border-radius: 8px; font-size: 19px; font-style: normal; }
.customer-summary-grid i.blue { color: #0867e9; background: #e5f0ff; }.customer-summary-grid i.green { color: #079447; background: #e1f7eb; }.customer-summary-grid i.red { color: #dc2626; background: #fee8e8; }
.customer-summary-grid span { color: #40587b; font-size: 11px; }.customer-summary-grid strong { margin-top: 7px; display: block; color: var(--ink); font-size: 22px; }
.customers-desktop-table { overflow-x: auto; }.customers-desktop-table table { min-width: 1040px; font-size: 10px; }.customers-desktop-table td, .customers-desktop-table th { padding: 9px 8px; }
.customer-reference { display: block; color: #0664ef; font-weight: 600; text-decoration: none; }.customer-reference:hover { text-decoration: underline; }.customers-desktop-table td:nth-child(2) small { margin-top: 3px; display: block; color: var(--muted); font-size: 8px; }
.assigned-reps { display: block; max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.customer-status { padding: 5px 8px; display: inline-block; border-radius: 5px; font-size: 9px; font-weight: 500; }.customer-status.is-active { color: #08712c; background: #d9f5e4; }.customer-status.is-inactive { color: #b91c1c; background: #fee2e2; }
.customers-mobile-cards { display: none; }
.customer-profile-card { margin-bottom:14px; }.customer-profile-card > header { border-bottom:1px solid var(--border); }.customer-profile-grid { padding:16px; display:grid; grid-template-columns:minmax(0,1.45fr) minmax(260px,.75fr); gap:24px; }.customer-detail-list { margin:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px 22px; }.customer-detail-list > div { min-width:0; padding-bottom:11px; border-bottom:1px solid var(--border); }.customer-detail-list dt { color:var(--muted); font-size:9px; text-transform:uppercase; }.customer-detail-list dd { margin:6px 0 0; overflow-wrap:anywhere; font-size:12px; line-height:1.5; }.customer-detail-list .customer-address { grid-column:1 / -1; }.assigned-rep-panel { padding-left:20px; border-left:1px solid var(--border); }.assigned-rep-panel h3 { margin:0 0 11px; font-size:12px; }.assigned-rep-list { display:grid; gap:8px; }.assigned-rep-card { padding:9px; background:#f8fafc; border:1px solid var(--border); border-radius:7px; }.detail-summary-grid.customer-kpi-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }.customer-kpi-grid .detail-card { min-height:120px; }.customer-order-history { min-height:0; }.customer-orders-table table { min-width:680px; }.customer-order-cards { display:none; }
@media (max-width: 1100px) {
  .customer-summary-grid { gap: 8px; }.customer-summary-grid article { min-height: 90px; padding: 11px; }.customer-summary-grid i { width: 34px; height: 34px; flex-basis: 34px; font-size: 15px; }.customer-summary-grid strong { font-size: 18px; }
  .customers-desktop-table table { min-width: 680px; }.customers-desktop-table th:nth-child(3), .customers-desktop-table td:nth-child(3), .customers-desktop-table th:nth-child(4), .customers-desktop-table td:nth-child(4), .customers-desktop-table th:nth-child(6), .customers-desktop-table td:nth-child(6) { display: none; }
}
@media (max-width: 700px) {
  .customer-summary-grid { display: none; }
  .customers-desktop-table { display: none; }.customers-mobile-cards { padding: 0 8px 8px; display: block; }.mobile-customer-card { position: relative; min-height: 92px; margin-bottom: 7px; padding: 10px 30px 10px 9px; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 9px; color: var(--ink); background: #fbfdff; border: 1px solid var(--border); border-radius: 7px; text-decoration: none; }.mobile-customer-card > i { width: 34px; height: 34px; display: grid; place-items: center; color: #0867e9; background: #e5f0ff; border-radius: 50%; font-style: normal; }.mobile-customer-main, .mobile-customer-meta { display: grid; gap: 3px; }.mobile-customer-main strong { font-size: 10px; }.mobile-customer-main small { color: var(--muted); font-size: 8px; }.mobile-customer-meta { justify-items: end; }.mobile-customer-meta em { font-style: normal; }.mobile-customer-meta small { color: #40587b; font-size: 8px; }.mobile-customer-meta strong { font-size: 11px; }.mobile-customer-card > b { position: absolute; right: 10px; font-size: 18px; font-weight: 400; }
  .customer-profile-grid { grid-template-columns:1fr; }.customer-detail-list { grid-template-columns:1fr; }.customer-detail-list .customer-address { grid-column:auto; }.assigned-rep-panel { padding:0; border:0; }.detail-summary-grid.customer-kpi-grid { grid-template-columns:1fr; }.customer-orders-table { display:none; }.customer-order-cards { padding:0 8px 8px; display:block; }
}

/* Screen 02: database-backed dashboard */
.dashboard-heading { margin-bottom: 18px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }.dashboard-heading h1 { margin: 0; font-size: 28px; letter-spacing: -.035em; }.dashboard-heading p { margin: 5px 0 0; color: var(--text); font-size: 13px; }.range-filter { min-height: 42px; padding: 5px 7px 5px 12px; display: flex; align-items: center; gap: 7px; background: white; border: 1px solid var(--border); border-radius: 8px; }.range-filter input { width: 125px; padding: 6px; color: var(--ink); background: transparent; border: 0; outline: 0; font-size: 11px; }.range-filter button { padding: 7px 10px; color: white; background: var(--primary); border: 0; border-radius: 5px; cursor: pointer; font-size: 11px; }.dashboard-alert { margin-bottom: 14px; }
.metric-grid { margin-bottom: 14px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }.metric-card { min-height: 116px; padding: 17px 18px; display: flex; align-items: flex-start; justify-content: space-between; background: white; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }.metric-card > div > span:first-child { display: block; color: #40587b; font-size: 12px; }.metric-card strong { margin: 7px 0 6px; display: block; font-size: 23px; letter-spacing: -.035em; }.metric-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 9px; font-size: 22px; font-style: normal; }.metric-icon.blue { color: #0867e9; background: #e5f0ff; }.metric-icon.green { color: #079447; background: #e1f7eb; }.metric-icon.orange { color: #ef7d00; background: #fff0d8; }.metric-change { display: block; font-weight: 600; font-size: 12px; }.metric-change small { display: block; margin-top: 3px; color: var(--muted); font-weight: 400; font-size: 10px; }.metric-change.up { color: var(--success); }.metric-change.down { color: var(--danger); }.metric-change.neutral { color: var(--muted); }
.dashboard-card { min-width: 0; background: white; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }.dashboard-card > header { min-height: 48px; padding: 14px 16px 8px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }.dashboard-card > header h2 { margin: 0; font-size: 15px; letter-spacing: -.02em; }.dashboard-card > header > span { padding: 6px 8px; color: #40587b; background: #f8fafc; border: 1px solid var(--border); border-radius: 5px; font-size: 10px; }.trend-grid { min-width: 0; margin-bottom: 14px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 14px; }.trend-grid .dashboard-card { min-height: 270px; }.legend { display: flex; gap: 14px; color: #40587b; font-size: 10px; }.legend span { display: flex; align-items: center; gap: 5px; }.legend i { width: 7px; height: 7px; border-radius: 50%; }.legend .processed { background: #3b82f6; }.legend .pending { background: #f79009; }
.bar-chart, .value-chart { height: 210px; padding: 12px 16px 14px; display: flex; align-items: stretch; gap: 4px; border-top: 1px solid #f0f3f7; background: repeating-linear-gradient(to bottom, transparent 0, transparent 41px, #edf1f5 42px); overflow: hidden; }.bar-column, .value-column { min-width: 5px; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; }.bars { width: min(16px, 75%); height: 155px; display: flex; flex-direction: column; justify-content: flex-end; }.bars i { width: 100%; min-height: 0; display: block; }.bar-processed { background: linear-gradient(#9bc7ff, #3b82f6); }.bar-pending { background: #f79009; }.bar-column small, .value-column small { min-height: 13px; color: #536b8e; white-space: nowrap; font-size: 8px; }.value-column { position: relative; }.value-column i { width: 100%; max-width: 18px; min-height: 2px; background: linear-gradient(to top, rgb(22 163 74 / 13%), #18a957); border-radius: 2px 2px 0 0; }
.insight-grid { margin-bottom: 14px; display: grid; grid-template-columns: 1.05fr .95fr .95fr; gap: 14px; }.insight-grid .dashboard-card { min-height: 220px; }.status-content { padding: 5px 16px 17px; display: grid; grid-template-columns: 125px 1fr; align-items: center; gap: 18px; }.donut { width: 116px; height: 116px; display: grid; place-items: center; background: conic-gradient(#16a34a 0 70%, #f59e0b 70% 82%, #dc2626 82% 90%, #64748b 90%); border-radius: 50%; }.donut::before { content: ''; grid-area: 1 / 1; width: 76px; height: 76px; background: white; border-radius: 50%; }.donut span { z-index: 1; grid-area: 1 / 1; text-align: center; }.donut strong, .donut small { display: block; }.donut strong { font-size: 22px; }.donut small { color: var(--muted); font-size: 10px; }.status-content ul, .ranking-card ol { margin: 0; padding: 0; list-style: none; }.status-content li { padding: 5px 0; display: grid; grid-template-columns: 8px 1fr auto 40px; align-items: center; gap: 8px; color: #334b6e; font-size: 10px; }.status-content li > i { width: 8px; height: 8px; border-radius: 50%; }.status-processed { background: #16a34a; }.status-pending { background: #f59e0b; }.status-failed { background: #dc2626; }.status-cancelled { background: #64748b; }.status-content li small { text-align: right; color: var(--muted); }.ranking-card ol { padding: 1px 16px 12px; }.ranking-card li { min-height: 31px; display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 8px; color: #263f64; font-size: 11px; }.ranking-card li > i { width: 25px; height: 25px; display: grid; place-items: center; color: #183d6b; background: #dce8ff; border-radius: 50%; font-size: 9px; font-style: normal; }.ranking-card li strong { font-size: 10px; }
.recent-card { margin-bottom: 14px; }.orders-table { padding: 0 16px 16px; overflow-x: auto; }.orders-table table { font-size: 10px; }.orders-table th { padding: 9px; }.orders-table td { padding: 10px 9px; }.orders-table td:first-child strong { color: #0867e9; }.order-status { padding: 5px 8px; border-radius: 5px; font-size: 9px; font-weight: 500; }.order-status.status-processed { color: #08712c; background: #d9f5e4; }.order-status.status-pending { color: #b45309; background: #fff0ce; }.order-status.status-failed { color: #b91c1c; background: #fee2e2; }.order-status.status-cancelled { color: #475569; background: #e8eef5; }.empty-state { color: var(--muted); text-align: center; }
.quick-card { width: min(430px, 100%); }.quick-actions { padding: 4px 16px 17px; display: flex; gap: 22px; }.quick-actions a { display: grid; justify-items: center; gap: 6px; color: #263f64; text-decoration: none; font-size: 10px; }.quick-actions i { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 8px; font-size: 23px; font-style: normal; }.quick-actions i.blue { color: #0867e9; background: #e5f0ff; }.quick-actions i.green { color: #079447; background: #e1f7eb; }
@media (max-width: 1100px) {
  .dashboard-heading h1 { font-size: 24px; }.metric-grid { gap: 8px; }.metric-card { padding: 12px; }.metric-card strong { font-size: 18px; }.metric-icon { width: 34px; height: 34px; font-size: 17px; }.trend-grid { grid-template-columns: 1fr; }.value-trend { display: none; }.insight-grid { grid-template-columns: 1fr 1fr; }.insight-grid > :last-child { display: none; }
}
@media (max-width: 700px) {
  .dashboard-heading { align-items: stretch; flex-direction: column; gap: 12px; }.dashboard-heading p { display: none; }.range-filter { width: 100%; justify-content: center; }.range-filter input { width: 118px; }.metric-grid { grid-template-columns: repeat(2, 1fr); }.metric-card { min-height: 94px; }.metric-card > div > span:first-child { font-size: 10px; }.metric-card strong { margin: 5px 0 3px; font-size: 19px; }.metric-change { font-size: 10px; }.metric-change small { display: none; }.metric-icon { width: 30px; height: 30px; }.trend-grid .dashboard-card { min-height: 210px; }.bar-chart { height: 158px; padding-inline: 10px; }.bars { height: 112px; }.legend { font-size: 8px; }.insight-grid { display: block; }.insight-grid > * { display: none; }.recent-card > header { min-height: 42px; }.orders-table { padding: 0 10px 10px; overflow: visible; }.orders-table table, .orders-table tbody { display: block; }.orders-table thead { display: none; }.orders-table tr { margin-bottom: 8px; padding: 10px 10px 8px; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; background: #fbfdff; border: 1px solid var(--border); border-radius: 7px; }.orders-table td { padding: 0; display: block; border: 0; }.orders-table td:nth-child(2), .orders-table td:nth-child(3), .orders-table td:nth-child(5) { display: none; }.orders-table td:nth-child(1) { grid-column: 1; }.orders-table td:nth-child(4) { grid-column: 1; color: var(--muted); font-size: 9px; }.orders-table td:nth-child(6) { grid-column: 2; grid-row: 2; text-align: right; }.orders-table td:nth-child(7) { grid-column: 2; grid-row: 1; }.quick-card { width: 100%; }
}

/* AJAX, toast and modal interaction foundation */
.is-loading { position: relative; pointer-events: none; opacity: .62; }
.is-loading::after { content: ""; position: absolute; inset: 0; background: rgb(255 255 255 / 24%); }
.toast-stack { position: fixed; z-index: 1300; right: 20px; top: 20px; width: min(360px, calc(100vw - 32px)); display: grid; gap: 9px; }
.toast { padding: 12px 12px 12px 14px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; color: #16365f; background: #fff; border: 1px solid #cfd9e5; border-left: 4px solid #2563eb; border-radius: 8px; box-shadow: 0 12px 32px rgb(15 23 42 / 16%); font-size: 12px; opacity: 0; transform: translateY(-8px); transition: opacity .18s ease, transform .18s ease; }
.toast.is-visible { opacity: 1; transform: translateY(0); }.toast-success { border-left-color: #16a34a; }.toast-error { border-left-color: #dc2626; }.toast-info { border-left-color: #0284c7; }
.toast button { padding: 0; color: #64748b; background: transparent; border: 0; cursor: pointer; font-size: 18px; line-height: 1; }
.app-modal[hidden] { display: none; }.app-modal { position: fixed; z-index: 1200; inset: 0; display: grid; place-items: center; padding: 20px; }.modal-backdrop { position: absolute; inset: 0; background: rgb(15 23 42 / 48%); }.modal-content { position: relative; z-index: 1; width: min(680px, 100%); max-height: calc(100vh - 40px); overflow: auto; }.modal-card { background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 24px 60px rgb(15 23 42 / 24%); }.modal-card > header { padding: 18px 20px; display: flex; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--border); }.modal-card h2 { margin: 0; font-size: 18px; }.modal-card header p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }.modal-close { color: #64748b; background: transparent; border: 0; cursor: pointer; font-size: 24px; }.modal-card form { padding: 18px 20px; }.customer-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }.form-field { display: grid; gap: 6px; color: #213a5e; font-size: 11px; font-weight: 600; }.form-field input, .form-field select, .form-field textarea { width: 100%; padding: 9px 10px; color: #263f64; background: #fff; border: 1px solid #cfd9e5; border-radius: 6px; font: inherit; }.form-field textarea, .form-field:has(textarea) { grid-column: 1 / -1; }.field-error { color: #b91c1c; font-weight: 500; }.modal-card footer { margin-top: 18px; display: flex; justify-content: flex-end; gap: 9px; }.standalone-form { width: min(680px, 100%); margin: 0 auto; }.business-filter select { max-width: 190px; height: 30px; border: 0; color: #263f64; background: transparent; font-size: 11px; }
.image-lightbox[hidden]{display:none}.image-lightbox{position:fixed;z-index:1400;inset:0;display:grid;place-items:center;padding:28px}.image-lightbox-backdrop{position:absolute;inset:0;background:rgb(4 12 24 / 88%)}.image-lightbox-panel{position:relative;z-index:1;max-width:90vw;max-height:85vh;margin:0;display:flex;align-items:center;justify-content:center}.image-lightbox-panel>img{display:block;max-width:90vw;max-height:85vh;width:auto;height:auto;object-fit:contain;border-radius:8px;box-shadow:0 24px 70px rgb(0 0 0 / 55%)}.image-lightbox-panel figcaption{position:absolute;left:0;right:0;bottom:-30px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff;text-align:center;font-size:11px}.image-lightbox-close{position:absolute;z-index:2;top:-17px;right:-17px;width:38px;height:38px;display:grid;place-items:center;color:#fff;background:#17243a;border:1px solid rgb(255 255 255 / 35%);border-radius:50%;box-shadow:0 5px 20px rgb(0 0 0 / 35%);cursor:pointer;font-size:25px;line-height:1}.image-lightbox-close:focus-visible{outline:3px solid #7fb3ff;outline-offset:3px}body.image-preview-open{overflow:hidden}
.product-form-modal{width:min(780px,100%)}.product-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.product-form-grid .form-field{min-width:0}.product-name-field,.product-image-field,.product-active-control{grid-column:1/-1}.product-form-grid .order-picker-control{height:39px}.form-help{color:var(--muted);font-size:9px;font-weight:400}.product-form-image-row{display:grid;grid-template-columns:76px minmax(0,1fr);align-items:center;gap:12px}.product-form-image-preview{width:76px;height:64px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#f7f9fc;border:1px solid var(--border);border-radius:8px}.product-form-image-preview img{width:100%;height:100%;display:block;object-fit:contain;background:#fff}.product-form-image-preview img[hidden]{display:none!important}.product-form-image-row>div{min-width:0;display:grid;gap:6px}.product-active-control{padding:11px 12px;display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center;background:#f8fafc;border:1px solid var(--border);border-radius:8px;color:#213a5e;cursor:pointer}.product-active-control>span{position:relative;width:38px;height:22px;grid-row:1/span 2}.product-active-control input{position:absolute;opacity:0}.product-active-control i{position:absolute;inset:0;background:#cbd5e1;border-radius:999px;transition:.15s}.product-active-control i:after{content:"";position:absolute;width:16px;height:16px;left:3px;top:3px;background:#fff;border-radius:50%;box-shadow:0 1px 3px rgb(15 23 42/25%);transition:.15s}.product-active-control input:checked+i{background:var(--success)}.product-active-control input:checked+i:after{transform:translateX(16px)}.product-active-control input:focus-visible+i{outline:3px solid rgb(37 99 235/18%)}.product-active-control strong{font-size:11px}.product-active-control small{grid-column:2;color:var(--muted);font-size:9px}.product-active-control .field-error{grid-column:1/-1;font-style:normal}
.product-upload-control{min-width:0;display:grid!important;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:7px 10px!important}.product-upload-control input[type=file]{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.product-upload-button{width:max-content;min-width:104px;height:34px;margin:0;cursor:pointer}.product-upload-control>[data-product-upload-name]{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#536b8e;font-size:10px}.product-upload-control .form-help{grid-column:1/-1}
.customer-form-modal{width:min(740px,100%)}.professional-customer-form{align-items:start}.professional-customer-form .order-picker-control{height:39px}.customer-address-field,.customer-active-control{grid-column:1/-1}.customer-address-field textarea{min-height:84px;resize:vertical}.async-multi-picker{position:relative;min-width:0}.async-multi-chips{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:6px}.async-multi-chips:empty{display:none}.async-multi-chip{max-width:100%;padding:4px 5px 4px 8px;display:inline-flex;align-items:center;gap:5px;overflow:hidden;color:#17416f;background:#eaf3ff;border:1px solid #cfe2fb;border-radius:999px;font-size:9px;font-weight:500;text-overflow:ellipsis;white-space:nowrap}.async-multi-chip button{width:17px;height:17px;flex:0 0 17px;padding:0;display:grid;place-items:center;color:#527092;background:transparent;border:0;border-radius:50%;cursor:pointer}.async-multi-chip button:hover,.async-multi-chip button:focus-visible{color:#fff;background:#2563eb;outline:0}
.order-form-modal{width:min(940px,100%)}.order-standalone-form{width:min(940px,100%)}.order-entry-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.order-entry-grid .form-field{min-width:0}.order-entry-grid .order-picker-control{height:39px}.order-notes-field{grid-column:1/-1}.order-notes-field textarea{min-height:70px;resize:vertical}.order-entry-items{margin-top:18px;padding-top:16px;border-top:1px solid var(--border)}.order-entry-items-heading{margin-bottom:10px;display:flex;align-items:center;justify-content:space-between;gap:14px}.order-entry-items-heading h3{margin:0;color:var(--ink);font-size:14px}.order-entry-items-heading small{display:block;margin-top:3px;color:var(--muted);font-size:9px}.order-entry-item-list{display:grid;gap:8px}.order-entry-item{padding:10px;display:grid;grid-template-columns:minmax(220px,2.1fr) minmax(80px,.65fr) minmax(100px,.8fr) minmax(100px,.75fr) 24px;align-items:end;gap:9px;background:#f8fafc;border:1px solid var(--border);border-radius:8px}.order-entry-item[hidden]{display:none}.order-entry-product{min-width:0}.order-entry-line-total{min-width:0}.order-entry-line-total>strong{height:39px;padding:0 9px;display:flex;align-items:center;overflow:hidden;color:var(--ink);background:#fff;border:1px solid #cfd9e5;border-radius:6px;font-size:12px;text-overflow:ellipsis;white-space:nowrap}.order-entry-remove{width:24px;height:24px;margin-bottom:7px;padding:0;display:grid;place-items:center;color:#9f3440;background:#fff;border:1px solid #f0c7cc;border-radius:6px;cursor:pointer;font-size:17px;line-height:1}.order-entry-remove:hover,.order-entry-remove:focus-visible{color:#fff;background:#dc2626;border-color:#dc2626;outline:0}.order-entry-total{margin-top:10px;padding:10px 12px;display:flex;align-items:center;justify-content:flex-end;gap:18px;color:#526987;background:#edf5ff;border-radius:7px;font-size:11px}.order-entry-total strong{min-width:120px;color:var(--ink);font-size:18px;text-align:right}
.order-entry-item{--order-item-control-height:38px}.order-entry-item .order-picker-control,.order-entry-item input[type="number"],.order-entry-line-total>strong,.order-entry-remove{height:var(--order-item-control-height)!important;min-height:var(--order-item-control-height);box-sizing:border-box}.order-entry-item input[type="number"]{padding-top:0!important;padding-bottom:0!important}.order-entry-remove{margin-bottom:0}
.sales-rep-list-card{overflow:hidden}.sales-reps-desktop-table table{width:100%;table-layout:fixed}.sales-reps-desktop-table th,.sales-reps-desktop-table td{padding:10px 12px;overflow:hidden;border-bottom:1px solid #edf1f5;color:#263f64;font-size:10px;text-align:left;text-overflow:ellipsis;white-space:nowrap}.sales-reps-desktop-table th{color:#40587b;background:#f5f8fc;font-size:9px;text-transform:uppercase}.sales-reps-desktop-table th:first-child{width:4%}.sales-reps-desktop-table th:last-child{width:42px}.sales-rep-identity{display:flex;align-items:center;gap:9px}.sales-rep-identity i{width:29px;height:29px;flex:0 0 29px;display:grid;place-items:center;color:#174d8c;background:#dceaff;border-radius:50%;font-size:9px;font-style:normal}.sales-rep-identity strong{overflow:hidden;text-overflow:ellipsis}.sales-reps-mobile-cards{display:none}.sales-rep-form-modal{width:min(760px,100%)}.sales-rep-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.sales-rep-form-grid .form-field{min-width:0}.sales-rep-form-grid .order-picker-control,.sales-rep-form-grid .form-field>input{height:39px;box-sizing:border-box}.sales-rep-email,.sales-rep-active-control{grid-column:1/-1}
.sales-rep-guide-panel{margin:0 0 16px;padding:15px 16px;display:grid;gap:13px;background:#f7faff;border:1px solid #d8e4f2;border-radius:9px}.sales-rep-guide-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.sales-rep-guide-heading>span{min-width:0}.sales-rep-guide-panel h3{margin:0;color:#10213d;font-size:14px}.sales-rep-guide-panel p{margin:3px 0 0;color:var(--muted);font-size:11px}.sales-rep-guide-panel p strong{color:#1d385d}.sales-rep-subscribe.button{min-height:36px;padding:7px 11px;display:inline-flex;align-items:center;justify-content:center;gap:7px;color:#175dcc;background:#fff;border-color:#a9c6ee;text-decoration:none;white-space:nowrap;box-shadow:none}.sales-rep-subscribe.button:hover{color:#0f4fae;background:#edf5ff;border-color:#76a8e9}.sales-rep-subscribe svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.sales-rep-guide-entry{padding-top:12px;border-top:1px solid #e1eaf5}.sales-rep-guide-entry>label{display:block;margin-bottom:7px;color:var(--muted);font-size:11px;font-weight:500}.sales-rep-guide-entry>label span{color:#263f64;font-weight:700}.sales-rep-guide-control{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px}.sales-rep-guide-control input{min-width:0;width:100%;height:40px;box-sizing:border-box;padding:0 11px;color:#263f64;background:#fff;border:1px solid #c7d5e6;border-radius:6px;font:inherit}.sales-rep-guide-control input:focus{border-color:#5b9cf4;outline:3px solid rgb(59 130 246 / 14%)}.sales-rep-guide-control .button{height:40px;min-height:40px;min-width:118px;display:inline-flex;align-items:center;justify-content:center;gap:7px}.sales-rep-guide-entry [data-guide-feedback]{min-height:16px;margin:6px 0 0;font-size:10px;font-weight:600}.sales-rep-guide-entry [data-guide-feedback].is-success{color:#087a45}.sales-rep-guide-entry [data-guide-feedback].is-success:before{content:"✓ ";}.sales-rep-guide-entry [data-guide-feedback].is-error{color:#b42318}.sales-rep-guide-entry [data-guide-feedback].is-error:before{content:"! ";}.sales-rep-details{min-width:0;margin:0;padding:0;border:0;transition:opacity .16s ease}.sales-rep-details legend{width:100%;margin:0 0 12px;padding:0 0 9px;color:#1d385d;border-bottom:1px solid #e6edf5;font-size:12px;font-weight:700}.sales-rep-details.is-locked{opacity:.48}.sales-rep-details.is-locked input,.sales-rep-details.is-locked .product-active-control{cursor:not-allowed}.sales-rep-form-modal [data-guide-submit]:disabled{color:#718096;background:#dfe7f0;border-color:#dfe7f0;box-shadow:none;cursor:not-allowed}.sales-rep-form-modal .button:focus-visible,.sales-rep-guide-control input:focus-visible{outline:3px solid rgb(37 99 235 / 22%);outline-offset:2px}
.assignment-list-card{overflow:hidden}.assignments-desktop-table table{width:100%;table-layout:fixed}.assignments-desktop-table th,.assignments-desktop-table td{padding:11px 13px;overflow:hidden;border-bottom:1px solid #edf1f5;color:#263f64;font-size:10px;text-align:left;text-overflow:ellipsis;white-space:nowrap}.assignments-desktop-table th{color:#40587b;background:#f5f8fc;font-size:9px;text-transform:uppercase}.assignments-desktop-table th:first-child{width:5%}.assignments-desktop-table td:nth-child(2) small{display:block;margin-top:3px;color:var(--muted);font-size:8px}.assignment-actions{display:flex;gap:10px}.button-link{padding:0;color:#1262c5;background:transparent;border:0;cursor:pointer;font-size:10px}.button-link.is-danger{color:#c62d3b}.assignments-mobile-cards{display:none}.modal-content:has(.assignment-form-modal){overflow:visible}.assignment-form-modal{width:min(680px,100%);overflow:visible}.assignment-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.assignment-form-grid .form-field{min-width:0}.assignment-form-grid .order-picker-control{height:39px}.assignment-sales-rep-field{grid-column:1/-1}.assignment-form-modal .order-picker-results{width:100%;max-height:104px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-gutter:stable}.assignment-form-modal .order-picker-option,.assignment-form-modal .order-picker-more{min-height:32px;padding:6px 10px}.assignment-remove-modal{width:min(500px,100%)}.assignment-remove-copy{margin:0;color:var(--text);font-size:12px;line-height:1.6}
.modal-content:has(.assignment-bulk-modal){width:min(940px,100%);overflow:visible}.assignment-bulk-modal{width:min(940px,100%)}.assignment-bulk-modal form{padding:18px 20px}.assignment-bulk-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(220px,.8fr);align-items:start;gap:20px}.assignment-bulk-main{min-width:0;display:grid;gap:14px}.assignment-bulk-main .order-picker-control{height:40px}.assignment-bulk-main .form-field em,.assignment-customer-field>label em{color:#dc2626;font-style:normal}.assignment-customer-field{min-width:0;display:grid;gap:6px;color:#213a5e;font-size:11px;font-weight:600}.assignment-multi{position:relative;min-width:0}.assignment-multi-summary{width:100%;height:42px;padding:0 12px;display:flex;align-items:center;justify-content:space-between;color:#294568;background:#fff;border:1px solid #c7d5e6;border-radius:7px;cursor:pointer;font:inherit;text-align:left}.assignment-multi-summary:focus-visible{border-color:#3b82f6;outline:3px solid rgb(59 130 246 / 15%)}.assignment-multi-summary .control-chevron{position:relative;right:auto;top:auto;flex:0 0 32px}.assignment-multi-panel{margin-top:7px;overflow:hidden;background:#fff;border:1px solid #cbd8e8;border-radius:8px;box-shadow:0 10px 28px rgb(15 23 42 / 10%)}.assignment-customer-search{margin:10px;padding:0 10px;display:flex;align-items:center;gap:8px;color:#607895;background:#f8fafc;border:1px solid #dbe4ef;border-radius:6px}.assignment-customer-search:focus-within{border-color:#5596ed;outline:3px solid rgb(59 130 246 / 12%)}.assignment-customer-search input{width:100%;height:36px;padding:0;background:transparent;border:0;outline:0;color:#263f64;font:inherit}.assignment-selection-toolbar{min-height:36px;padding:0 11px;display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:12px;border-top:1px solid #edf1f5;border-bottom:1px solid #edf1f5}.assignment-selection-toolbar button,.assignment-load-more{padding:5px 2px;color:#1262c5;background:transparent;border:0;cursor:pointer;font:inherit;font-weight:600}.assignment-selection-toolbar span{text-align:right;color:var(--muted);font-size:10px;font-weight:500}.assignment-customer-rows{max-height:220px;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}.assignment-customer-row{min-height:48px;padding:7px 11px;display:grid;grid-template-columns:20px minmax(0,1fr);align-items:center;gap:10px;color:var(--text);border-bottom:1px solid #edf1f5;cursor:pointer}.assignment-customer-row:hover{background:#f8fbff}.assignment-customer-row.is-selected{background:#eaf3ff}.assignment-customer-row input{width:17px;height:17px;margin:0;accent-color:#1268d8}.assignment-customer-row span{min-width:0}.assignment-customer-row strong,.assignment-customer-row small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.assignment-customer-row strong{font-size:11px}.assignment-customer-row small{margin-top:3px;color:var(--muted);font-size:9px;font-weight:400}.assignment-picker-state{padding:22px;color:var(--muted);font-size:10px;text-align:center}.assignment-load-more{width:100%;min-height:34px;border-top:1px solid #edf1f5}.assignment-help{padding:15px;color:#27486f;background:#f2f7fd;border:1px solid #dbe8f6;border-radius:8px;font-size:10px;line-height:1.55}.assignment-help strong{font-size:12px}.assignment-help ul{margin:10px 0 0;padding-left:18px}.assignment-help li+li{margin-top:6px}.assignment-bulk-modal footer{padding-top:14px;border-top:1px solid #edf1f5}.assignment-standalone-form{width:min(940px,100%)}
/* Keep the multi-assignment dialog at its expanded footprint; only its customer rows scroll. */
.modal-content:has(.assignment-bulk-modal){width:min(940px,calc(100vw - 40px));height:clamp(520px,78vh,680px);max-height:calc(100dvh - 40px);overflow:hidden}.assignment-bulk-modal{width:100%;height:100%;box-sizing:border-box;display:flex;flex-direction:column;overflow:hidden}.assignment-bulk-modal>header{flex:0 0 auto}.assignment-bulk-modal form{min-height:0;flex:1;display:flex;flex-direction:column;overflow:auto}.assignment-bulk-grid{min-height:0;flex:1}.assignment-bulk-modal footer{flex:0 0 auto;margin-top:auto}.assignment-customer-rows{max-height:min(250px,34vh)}
.business-settings-selector .filter-actions{grid-column:span 9;justify-content:flex-start}.business-settings-card>header{padding:16px 18px;border-bottom:1px solid var(--border)}.business-settings-card>header>div small{display:block;margin-top:4px;color:var(--muted);font-size:9px}.business-settings-grid{padding:18px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.business-settings-grid>div{min-width:0;padding:14px;background:#f8fafc;border:1px solid var(--border);border-radius:8px}.business-settings-grid span{display:block;color:var(--muted);font-size:9px;text-transform:uppercase}.business-settings-grid strong{display:block;margin-top:7px;overflow-wrap:anywhere;color:var(--ink);font-size:13px}.business-settings-grid small{display:block;margin-top:6px;color:var(--muted);font-size:9px;line-height:1.45}.business-settings-grid .business-details{grid-column:1/-1}.business-settings-grid p{margin:7px 0 0;color:var(--text);font-size:11px;line-height:1.6}.business-currency-value{font-size:20px!important}.settings-policy{padding:5px 8px;display:inline-block;border-radius:5px;font-size:9px;font-style:normal}.policy-allow{color:#08712c;background:#d9f5e4}.policy-require_approval{color:#9a5a00;background:#fff0ce}.policy-disable{color:#b91c1c;background:#fee2e2}.business-settings-empty{padding:35px;text-align:center}.business-settings-empty strong{font-size:15px}.business-settings-empty p{margin:7px 0 0;color:var(--muted);font-size:11px}.business-settings-modal{width:min(720px,100%)}.business-settings-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.business-settings-form-grid .form-field{min-width:0}.business-settings-form-grid .form-field>input,.business-settings-form-grid .filter-control{height:39px;box-sizing:border-box}.business-settings-details{grid-column:1/-1}.business-settings-details textarea{min-height:96px;resize:vertical}
.category-filter-grid .category-page-size{grid-column:span 2}.category-filter-grid .filter-actions{grid-column:span 10}.category-list-card{overflow:hidden}.categories-desktop-table table{width:100%;table-layout:fixed}.categories-desktop-table th,.categories-desktop-table td{padding:11px 13px;overflow:hidden;border-bottom:1px solid #edf1f5;color:#263f64;font-size:10px;text-align:left;text-overflow:ellipsis;white-space:nowrap}.categories-desktop-table th{color:#40587b;background:#f5f8fc;font-size:9px;font-weight:600;text-transform:uppercase}.categories-desktop-table th:first-child{width:5%}.categories-desktop-table th:last-child{width:48px}.categories-desktop-table tbody tr:hover{background:#fbfdff}.category-edit-button{position:static;padding:0;background:transparent;border:0;cursor:pointer}.categories-mobile-cards{display:none}.modal-content:has(.category-form-modal){overflow:visible}.category-form-modal{width:min(560px,100%);overflow:visible}.category-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.category-form-grid .form-field{min-width:0}.category-form-grid .order-picker-control,.category-form-grid .form-field>input{height:39px;box-sizing:border-box}.category-name-full,.category-active-control{grid-column:1/-1}.category-active-control{margin-top:2px}.category-form-modal .order-picker-results{width:100%;max-height:104px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-gutter:stable}.category-form-modal .order-picker-option,.category-form-modal .order-picker-more{min-height:32px;padding:6px 10px}.category-form-modal .order-picker-state{padding:12px 10px}
@media (max-width: 700px) { .toast-stack { right: 16px; top: 12px; }.app-modal { padding: 10px; align-items: end; }.modal-content { width: 100%; max-height: calc(100vh - 20px); }.customer-form-grid,.product-form-grid { grid-template-columns: 1fr; }.product-name-field,.product-image-field,.product-active-control{grid-column:1}.product-form-image-row{grid-template-columns:62px minmax(0,1fr)}.product-form-image-preview{width:62px;height:56px}.form-field:has(textarea) { grid-column: auto; }.business-filter select { max-width: 135px; } }
@media(max-width:900px){.order-entry-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.order-entry-item{grid-template-columns:minmax(180px,1.6fr) minmax(70px,.55fr) minmax(90px,.7fr) 24px}.order-entry-line-total{grid-column:3}.order-entry-product{grid-row:span 2}.order-entry-remove{grid-column:4}}
@media(max-width:700px){.order-entry-grid{grid-template-columns:1fr}.order-notes-field{grid-column:1}.order-entry-items-heading{align-items:flex-end}.order-entry-item{grid-template-columns:1fr 1fr 24px}.order-entry-product{grid-column:1/-1;grid-row:auto}.order-entry-line-total{grid-column:2}.order-entry-remove{grid-column:3}.order-entry-total{justify-content:space-between}.order-entry-total strong{min-width:0}.order-entry-items-heading .button{padding-inline:10px}}
@media(max-width:700px){.category-filter-grid .category-page-size,.category-filter-grid .filter-actions{grid-column:1}.category-summary-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.category-summary-grid article{min-width:0}.categories-desktop-table{display:none}.categories-mobile-cards{padding:8px;display:grid;gap:7px}.mobile-category-card{padding:10px;display:grid;grid-template-columns:34px minmax(0,1fr) auto 22px;align-items:center;gap:9px;background:#fbfdff;border:1px solid var(--border);border-radius:7px}.mobile-category-card>i{width:34px;height:34px;display:grid;place-items:center;color:#0867e9;background:#e5f0ff;border-radius:50%;font-style:normal}.mobile-category-card>span{min-width:0;display:grid;gap:3px}.mobile-category-card>span:nth-of-type(2){justify-items:end}.mobile-category-card strong{overflow:hidden;font-size:10px;text-overflow:ellipsis;white-space:nowrap}.mobile-category-card small{color:var(--muted);font-size:8px}.mobile-category-card em{font-style:normal}.mobile-category-card>button{padding:0;color:#315175;background:transparent;border:0;cursor:pointer;font-size:19px}.modal-content:has(.category-form-modal){max-height:calc(100vh - 20px);overflow:auto}.category-form-grid{grid-template-columns:1fr}.category-active-control{grid-column:1}.category-form-modal .order-picker-results{max-height:96px}}
@media(max-width:700px){.sales-reps-desktop-table{display:none}.sales-reps-mobile-cards{padding:8px;display:grid;gap:7px}.mobile-sales-rep-card{padding:10px;display:grid;grid-template-columns:34px minmax(0,1fr) auto 22px;align-items:center;gap:9px;background:#fbfdff;border:1px solid var(--border);border-radius:7px}.mobile-sales-rep-card>i{width:34px;height:34px;display:grid;place-items:center;color:#174d8c;background:#dceaff;border-radius:50%;font-size:9px;font-style:normal}.mobile-sales-rep-card>span{min-width:0;display:grid;gap:3px}.mobile-sales-rep-card>span:nth-of-type(2){justify-items:end}.mobile-sales-rep-card strong,.mobile-sales-rep-card small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mobile-sales-rep-card strong{font-size:10px}.mobile-sales-rep-card small{color:var(--muted);font-size:8px}.mobile-sales-rep-card em{font-style:normal}.mobile-sales-rep-card>button{padding:0;color:#315175;background:transparent;border:0;font-size:19px}.sales-rep-form-grid{grid-template-columns:1fr}.sales-rep-email,.sales-rep-active-control{grid-column:1}}
@media(max-width:700px){.sales-rep-guide-panel{padding:13px}.sales-rep-guide-heading{align-items:stretch;flex-direction:column;gap:10px}.sales-rep-subscribe.button{width:100%;box-sizing:border-box;white-space:normal;text-align:center}.sales-rep-guide-control{grid-template-columns:1fr}.sales-rep-guide-control .button{width:100%}.sales-rep-details legend{margin-bottom:10px}}
@media(max-width:700px){.assignments-desktop-table{display:none}.assignments-mobile-cards{padding:8px;display:grid;gap:7px}.mobile-assignment-card{padding:10px;display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:9px;background:#fbfdff;border:1px solid var(--border);border-radius:7px}.mobile-assignment-card>i{width:34px;height:34px;display:grid;place-items:center;color:#174d8c;background:#dceaff;border-radius:50%;font-style:normal}.mobile-assignment-card>span{min-width:0;display:grid;gap:3px}.mobile-assignment-card strong{overflow:hidden;font-size:10px;text-overflow:ellipsis;white-space:nowrap}.mobile-assignment-card small{color:var(--muted);font-size:8px}.mobile-assignment-card>span:last-child{display:flex;gap:8px}.mobile-assignment-card button{padding:4px;color:#1262c5;background:transparent;border:0;font-size:9px}.modal-content:has(.assignment-form-modal){max-height:calc(100vh - 20px);overflow:auto}.assignment-form-grid{grid-template-columns:1fr}.assignment-sales-rep-field{grid-column:1}.assignment-form-modal .order-picker-results{max-height:96px}}
@media(max-width:800px){.modal-content:has(.assignment-bulk-modal){width:min(760px,calc(100vw - 24px));height:calc(100dvh - 24px);max-height:calc(100dvh - 24px);overflow:hidden}.assignment-bulk-grid{grid-template-columns:1fr}.assignment-help{display:none}.assignment-customer-rows{max-height:min(230px,32dvh)}}@media(max-width:520px){.modal-content:has(.assignment-bulk-modal){width:calc(100vw - 20px);height:calc(100dvh - 20px);max-height:calc(100dvh - 20px)}.assignment-bulk-modal form{padding:14px 12px}.assignment-selection-toolbar{grid-template-columns:auto auto;gap:8px}.assignment-selection-toolbar span{grid-column:1/-1;padding-bottom:7px;text-align:left}.assignment-bulk-modal footer{position:sticky;bottom:0;z-index:2;margin-inline:-12px;padding:12px;background:#fff}.assignment-bulk-modal footer .button{flex:1}.assignment-customer-row{padding-inline:9px}}
.business-settings-filter .order-filter-grid{padding:18px}.business-settings-selector .filter-business{grid-column:span 4}.business-settings-selector .filter-actions{grid-column:span 8;align-self:end}.business-settings-selector [aria-invalid="true"]{color:#991b1b}.business-settings-modal{width:min(780px,100%)}.business-settings-modal .form-section-title{margin-top:2px}.business-settings-modal textarea{max-height:90px}.business-settings-modal .toggle-field{min-height:64px}
@media(max-width:1100px){.business-settings-selector .filter-business{grid-column:span 6}.business-settings-selector .filter-actions{grid-column:span 6}}
@media(max-width:700px){.business-settings-filter .order-filter-grid{padding:12px}.business-settings-selector .filter-business,.business-settings-selector .filter-actions{grid-column:1}.business-settings-card>header{align-items:flex-start}.business-settings-card>header .button{min-width:auto}.business-settings-grid,.business-settings-form-grid{grid-template-columns:1fr}.business-settings-grid .business-details,.business-settings-details{grid-column:1}.business-settings-grid{padding:12px;gap:9px}}

/* Business Settings dialog: viewport-fitting on desktop, natural overlay scroll on small screens. */
.app-modal:has(.business-settings-modal) {
  overflow-y: auto;
}

.modal-content:has(.business-settings-modal) {
  width: min(920px, calc(100vw - 40px));
  max-height: none;
  overflow: visible;
}

.business-settings-modal {
  width: 100%;
  box-sizing: border-box;
}

.business-settings-modal > header {
  padding: 14px 18px;
}

.business-settings-modal form {
  padding: 14px 18px;
}

.business-settings-modal .business-settings-form-grid {
  gap: 10px 14px;
}

.business-settings-modal .business-settings-details textarea {
  min-height: 68px;
  max-height: 76px;
}

.business-settings-modal .form-section-title {
  padding-top: 8px;
}

.business-settings-modal .toggle-field {
  min-height: 48px;
  padding: 6px 0;
}

.business-settings-modal footer {
  margin-top: 12px;
}

@media (max-width: 900px) {
  .modal-content:has(.business-settings-modal) {
    width: min(820px, calc(100vw - 24px));
  }
}

@media (max-width: 700px) {
  .app-modal:has(.business-settings-modal) {
    place-items: start center;
    padding: 10px;
  }

  .modal-content:has(.business-settings-modal) {
    width: 100%;
  }

  .business-settings-modal > header {
    padding: 13px 14px;
  }

  .business-settings-modal form {
    padding: 12px;
  }

  .business-settings-modal .business-settings-form-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .business-settings-modal .business-settings-details {
    grid-column: 1;
  }

  .business-settings-modal footer {
    position: sticky;
    z-index: 2;
    bottom: 0;
    margin: 12px -12px -12px;
    padding: 11px 12px;
    background: #fff;
    border-top: 1px solid var(--border);
  }
}

/* Communications and order-email history reuse the established table, modal and filter foundations. */
.form-section-title{padding:12px 0 0;border-top:1px solid var(--border)}.form-section-title strong,.form-section-title small{display:block}.form-section-title small{margin-top:4px;color:var(--muted);font-weight:400}.order-email-confirm>span{display:block;color:var(--muted);font-size:10px;font-weight:600;text-transform:uppercase}.order-email-confirm ul{margin:10px 0;padding:0;display:grid;gap:7px;list-style:none}.order-email-confirm li{padding:9px 11px;background:#f8fafc;border:1px solid var(--border);border-radius:6px;color:#203b60;font-size:11px}.order-email-confirm>small{color:var(--muted);font-size:9px}.order-email-history{margin-top:14px}.order-email-history>header{padding:14px 16px;border-bottom:1px solid var(--border)}.order-email-history>header small{display:block;margin-top:3px;color:var(--muted);font-size:9px}.email-history-list{padding:6px 16px 14px}.email-history-list article{padding:11px 0;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:12px;border-bottom:1px solid #edf1f5}.email-history-list article:last-child{border-bottom:0}.email-history-list strong,.email-history-list small{display:block}.email-history-list strong{font-size:10px}.email-history-list small{margin-top:4px;color:var(--muted);font-size:9px}.email-history-list article>span:last-child{text-align:right}.email-error{color:#b91c1c!important}.communication-status{padding:4px 7px;display:inline-block;border-radius:5px;font-size:9px;font-style:normal;white-space:nowrap}.communication-status.status-success{color:#08712c;background:#d9f5e4}.communication-status.status-failed{color:#b91c1c;background:#fee2e2}.communication-filters .filter-event{grid-column:span 3}.communication-filters .filter-sent-date{grid-column:span 6}.communications-desktop-table{overflow:hidden}.communications-desktop-table table{width:100%;table-layout:fixed}.communications-desktop-table th,.communications-desktop-table td{padding:11px 10px}.communication-recipients{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.communications-mobile-cards{display:none}.mobile-communication-card{padding:11px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--border)}.mobile-communication-card span{display:grid;gap:4px}.mobile-communication-card span:last-child{justify-items:end}.mobile-communication-card small{color:var(--muted);font-size:9px}
@media(max-width:1100px){.communication-filters .filter-event,.communication-filters .filter-sent-date{grid-column:span 6}.communications-desktop-table{overflow-x:auto}.communications-desktop-table table{min-width:900px}}
@media(max-width:700px){.heading-actions{flex-wrap:wrap}.communication-filters .filter-event,.communication-filters .filter-sent-date{grid-column:1}.communications-desktop-table{display:none}.communications-mobile-cards{display:block}.email-history-list{padding:5px 11px 11px}.email-history-list article{grid-template-columns:auto minmax(0,1fr)}.email-history-list article>span:last-child{grid-column:2;text-align:left}.order-email-history>header{align-items:flex-start}.order-email-history>header .button{min-width:auto}}
.report-filters .filter-report{grid-column:span 3}.report-filters .filter-report-date{grid-column:span 6}.report-status-strip{margin:-7px 0 16px;padding:10px 14px;display:flex;justify-content:flex-end;gap:22px;background:#fff;border:1px solid var(--border);border-radius:7px;color:var(--muted);font-size:10px}.report-status-strip strong{margin-left:5px;color:var(--ink)}.reports-desktop-table table{width:100%}.reports-desktop-table th,.reports-desktop-table td{padding:11px 13px}.reports-desktop-table td small{display:block;margin-top:4px;color:var(--muted)}.reports-mobile-cards{display:none}.mobile-report-card{padding:12px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;border-bottom:1px solid var(--border)}.mobile-report-card span:last-child{text-align:right}.mobile-report-card strong,.mobile-report-card small{display:block}.mobile-report-card small{margin-top:4px;color:var(--muted);font-size:9px}.report-unknown{color:#a45b00!important}.report-list-card .export-button{display:none}
.report-export-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
@media(max-width:1100px){.report-filters .filter-report,.report-filters .filter-report-date{grid-column:span 6}}
@media(max-width:700px){.report-filters .filter-report,.report-filters .filter-report-date{grid-column:1}.report-summary-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.report-status-strip{justify-content:space-between;gap:8px}.reports-desktop-table{display:none}.reports-mobile-cards{display:block}.report-list-card .export-button{display:inline-flex}}
.report-filters .filter-report-lookup{grid-column:span 3}
.reports-desktop-table{overflow-x:auto}.report-list-card .reports-desktop-table table{min-width:820px;table-layout:auto}.report-list-card.report-product_sales .reports-desktop-table table{min-width:1060px}.report-card-link{color:var(--ink);text-decoration:none}
.reports-desktop-table thead th{position:sticky;top:74px;z-index:6;box-shadow:0 1px 0 var(--border)}
@media(min-width:1201px){.report-list-card,.reports-desktop-table{overflow:visible}.report-list-card{border-radius:9px}.reports-desktop-table table{background:#fff}}
@media(max-width:1100px){.report-filters .filter-report-lookup{grid-column:span 6}}
@media(max-width:700px){.report-filters .filter-report-lookup{grid-column:1}}

.heading-actions { display:flex; align-items:center; gap:10px; }

/* Order product thumbnails */
.order-product {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 260px;
}

.product-thumb {
  width: 58px;
  height: 58px;
  min-width: 58px;
  flex: 0 0 58px;
  overflow: hidden;
  border: 1px solid #dfe7f1;
  border-radius: 8px;
  background: #f7f9fc;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: #fff;
}

.product-thumb-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: #8796aa;
  text-align: center;
}

.product-thumb-fallback[hidden] {
  display: none !important;
}

.product-thumb-fallback > span {
  font-size: 18px;
  line-height: 1;
}

.product-thumb-fallback small {
  font-size: 9px;
  line-height: 1.1;
  white-space: nowrap;
}

.order-product-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.order-product-copy strong {
  color: #102a43;
  font-weight: 600;
}

.order-product-copy small,
.product-description {
  display: block;
  color: #718096;
  line-height: 1.35;
  max-width: 360px;
}

.mobile-order-product {
  display: grid !important;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.mobile-order-product-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* Dashboard quick actions can be links or AJAX action buttons */
.quick-actions .quick-action-link {
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  cursor: pointer;
  padding: 0;
  text-align: left;
}

/* =========================================================
   Screen 00 — Professional application shell
   ========================================================= */

.brand-mark-new {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: grid;
  place-items: center;
}

.brand-mark-new img {
  width: 34px;
  height: 34px;
  display: block;
  object-fit: contain;
}

.brand-copy {
  min-width: 0;
}

.brand-copy strong,
.brand-copy small {
  display: block;
}

.brand-copy strong {
  color: #fff;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -.02em;
}

.brand-copy small {
  margin-top: 4px;
  color: #9fb0c3;
  font-size: 9px;
  line-height: 1.2;
}

.nav-link {
  position: relative;
  gap: 11px;
  font-weight: 500;
}

.nav-icon {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  display: grid;
  place-items: center;
  color: #b9c9da;
  font-size: 0;
}

.nav-icon svg,
.org-icon-new svg,
.org-chevron,
.icon-button svg,
.search-icon,
.logout-button svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-icon svg {
  width: 18px;
  height: 18px;
}

.nav-link:hover .nav-icon,
.nav-link.is-active .nav-icon {
  color: #fff;
}

.nav-link.is-active {
  color: #fff;
  background: #294f78;
}

.nav-link.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: #60a5fa;
  border-radius: 0 2px 2px 0;
}

.organization {
  grid-template-columns: 26px minmax(0, 1fr) 18px;
}

.org-icon-new {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  color: #c5d3e2;
}

.org-icon-new svg {
  width: 20px;
  height: 20px;
}

.organization-copy {
  min-width: 0;
}

.organization-copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.org-chevron {
  width: 16px;
  height: 16px;
  color: #91a4b8;
}

.icon-button {
  padding: 0;
  color: #43546c;
  font-size: 0;
  transition: background-color .15s ease, color .15s ease;
}

.icon-button svg {
  width: 19px;
  height: 19px;
}

.icon-button:hover {
  color: #0f1e3a;
  background: #f1f5f9;
}

.icon-button:focus-visible,
.logout-button:focus-visible,
.nav-link:focus-visible {
  outline: 2px solid #60a5fa;
  outline-offset: 2px;
}

.search {
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.search:focus-within {
  background: #fff;
  border-color: #94baf4;
  box-shadow: 0 0 0 3px rgb(37 99 235 / 8%);
}

.search-icon {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  color: #64748b;
}

.topbar-divider {
  width: 1px;
  height: 26px;
  margin: 0 2px;
  background: #e2e8f0;
}

.notification-dot {
  top: 6px;
  right: 6px;
  width: 7px;
  height: 7px;
}

.profile-wrap {
  gap: 9px;
}

.avatar {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  font-weight: 600;
}

.profile-copy {
  min-width: 72px;
}

.logout-button {
  min-height: 34px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.logout-button svg {
  width: 16px;
  height: 16px;
}

@media (max-width: 700px) {
  .topbar-divider {
    display: none;
  }

  .menu-button svg {
    width: 20px;
    height: 20px;
  }

  .search {
    width: 36px;
    height: 36px;
    padding: 0;
    justify-content: center;
  }

  .search-icon {
    width: 19px;
    height: 19px;
  }

  .logout-button span {
    display: none;
  }
}

/* =========================================================
   Screen 00 — functional header controls
   ========================================================= */

.global-search-wrap,
.header-control {
  position: relative;
}

.global-search-wrap {
  width: min(470px, 48vw);
}

.global-search-wrap .search {
  width: 100%;
}

.header-popover {
  position: absolute;
  z-index: 80;
  top: calc(100% + 9px);
  background: #fff;
  border: 1px solid #dce5ef;
  border-radius: 10px;
  box-shadow: 0 18px 45px rgb(15 30 58 / 16%);
}

.header-popover[hidden] {
  display: none !important;
}

.search-results {
  left: 0;
  width: 100%;
  max-height: 430px;
  overflow-y: auto;
  padding: 6px;
}

.search-state {
  padding: 18px 14px;
  color: #64748b;
  text-align: center;
  font-size: 12px;
}

.search-result {
  width: 100%;
  padding: 10px 11px;
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 10px;
  color: #10243a;
  text-decoration: none;
  border-radius: 7px;
}

.search-result:hover,
.search-result.is-active {
  background: #f2f6fb;
}

.search-result-type {
  padding-top: 2px;
  color: #64748b;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.search-result-copy {
  min-width: 0;
}

.search-result-copy strong,
.search-result-copy small {
  display: block;
}

.search-result-copy strong {
  overflow: hidden;
  color: #10243a;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-result-copy small {
  margin-top: 3px;
  overflow: hidden;
  color: #718096;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-result.is-disabled {
  cursor: default;
}

.compact-popover {
  right: 0;
  width: 290px;
}

.popover-heading {
  padding: 14px 15px 12px;
  border-bottom: 1px solid #edf1f6;
}

.popover-heading strong,
.popover-heading small {
  display: block;
}

.popover-heading strong {
  color: #10243a;
  font-size: 13px;
}

.popover-heading small {
  margin-top: 3px;
  color: #7b8ca3;
  font-size: 10px;
}

.popover-body {
  padding: 13px 15px;
}

.popover-body p {
  margin: 0 0 12px;
  color: #5f7188;
  font-size: 11px;
  line-height: 1.5;
}

.popover-body p:last-child {
  margin-bottom: 0;
}

.popover-body strong {
  color: #233b58;
}

.popover-empty {
  padding: 25px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #75869c;
  text-align: center;
}

.popover-empty svg {
  width: 25px;
  height: 25px;
  margin-bottom: 10px;
  fill: none;
  stroke: #8293a8;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.popover-empty strong {
  color: #334a65;
  font-size: 11px;
}

.popover-empty span {
  margin-top: 4px;
  font-size: 10px;
}

.profile-trigger {
  padding: 3px 5px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

.profile-trigger:hover {
  background: #f4f7fa;
}

.profile-trigger:focus-visible {
  outline: 2px solid #60a5fa;
  outline-offset: 2px;
}

.profile-chevron {
  width: 14px;
  height: 14px;
  color: #8292a7;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.profile-popover {
  right: 0;
  width: 280px;
  padding: 8px;
}

.profile-popover-head {
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #edf1f6;
}

.avatar-large {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
}

.profile-popover-head > span:last-child {
  min-width: 0;
}

.profile-popover-head strong,
.profile-popover-head small {
  display: block;
}

.profile-popover-head strong {
  color: #10243a;
  font-size: 12px;
}

.profile-popover-head small {
  margin-top: 3px;
  overflow: hidden;
  color: #74869c;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-meta {
  padding: 8px 10px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-size: 10px;
}

.profile-meta span {
  color: #7a8ba0;
}

.profile-meta strong {
  max-width: 160px;
  overflow: hidden;
  color: #334a65;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-logout {
  width: 100%;
  margin-top: 4px;
  padding: 9px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #b42318;
  background: transparent;
  border: 0;
  border-top: 1px solid #edf1f6;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
}

.profile-logout:hover {
  background: #fff5f5;
}

.profile-logout svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 700px) {
  .global-search-wrap {
    width: auto;
    margin-left: auto;
  }

  .global-search-wrap .search {
    width: 36px;
  }

  .global-search-wrap.mobile-search-open {
    position: static;
  }

  .global-search-wrap:focus-within .search {
    position: absolute;
    z-index: 82;
    left: 52px;
    right: 116px;
    top: 10px;
    width: auto;
    padding: 0 12px;
    background: #fff;
    border: 1px solid #cad6e3;
  }

  .global-search-wrap:focus-within .search input {
    display: block;
  }

  .global-search-wrap.mobile-search-open .search-results {
    position: fixed;
    top: 57px;
    left: 10px;
    right: 10px;
    width: auto;
  }

  .profile-copy,
  .profile-chevron {
    display: none;
  }

  .compact-popover,
  .profile-popover {
    position: fixed;
    top: 58px;
    right: 10px;
    left: auto;
    width: min(290px, calc(100vw - 20px));
  }
}


/* ==========================================================
   Dashboard Business Picker
   ========================================================== */

.business-picker {
  position: relative;
  width: 230px;
  flex: 0 0 230px;
}

.business-combobox {
  width: 100%;
  height: 34px;
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid #d8e1ec;
  border-radius: 6px;
  transition:
    border-color .15s ease,
    box-shadow .15s ease;
}

.business-combobox:hover {
  border-color: #bdcad9;
}

.business-combobox:focus-within {
  border-color: #7daee9;
  box-shadow: 0 0 0 3px rgb(37 99 235 / 7%);
}

.business-picker-search-icon {
  width: 31px;
  height: 32px;
  flex: 0 0 31px;
  display: grid;
  place-items: center;
  color: #70839d;
  pointer-events: none;
}

.business-picker-search-icon svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.business-search-input {
  width: auto;
  min-width: 0;
  flex: 1 1 auto;
  height: 32px;
  padding: 0 5px 0 0;
  color: #203b60;
  background: transparent;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  font: inherit;
  font-size: 11px;
  line-height: 32px;
}

.business-search-input::placeholder {
  color: #91a0b3;
}

.business-picker-toggle {
  width: 32px;
  min-width: 32px;
  height: 32px;
  flex: 0 0 32px;
  padding: 0;
  display: grid;
  place-items: center;
  color: #647a96;
  background: transparent !important;
  border: 0 !important;
  border-left: 1px solid #edf1f5 !important;
  border-radius: 0 !important;
  cursor: pointer;
}

.business-picker-toggle:hover,
.business-picker-toggle:focus-visible {
  color: #155fc1;
  background: #f5f8fc !important;
  outline: 0;
}

.business-picker-toggle svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.business-search-results {
  position: absolute;
  z-index: 1000;
  top: calc(100% + 6px);
  left: 0;
  width: 300px;
  max-width: calc(100vw - 32px);
  max-height: 280px;
  padding: 5px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #d8e1ec;
  border-radius: 7px;
  box-shadow:
    0 14px 32px rgb(15 35 60 / 14%),
    0 2px 6px rgb(15 35 60 / 5%);
}

.business-search-results[hidden] {
  display: none !important;
}

.business-search-option {
  appearance: none;
  width: 100%;
  min-height: 38px;
  margin: 0;
  padding: 7px 9px;
  display: block;
  color: #263f60 !important;
  background: #fff !important;
  border: 0 !important;
  border-radius: 5px !important;
  box-shadow: none !important;
  outline: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.business-search-option + .business-search-option {
  margin-top: 2px;
}

.business-search-option:hover,
.business-search-option:focus-visible {
  color: #123f78 !important;
  background: #edf5ff !important;
}

.business-search-option strong {
  display: block;
  overflow: hidden;
  color: inherit;
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.business-search-option small {
  display: block;
  margin-top: 1px;
  color: #8090a5;
  font-size: 9px;
  line-height: 13px;
}

.business-search-state {
  padding: 11px 10px;
  color: #718198;
  font-size: 10px;
}

/* Keep Dashboard controls aligned as one toolbar */
.range-filter {
  align-items: center;
}

.range-filter > label {
  display: flex;
  align-items: center;
}

.range-filter > span {
  flex: 0 0 auto;
}

@media (max-width: 700px) {
  .business-picker {
    width: 100%;
    flex: 1 1 100%;
  }

  .business-search-results {
    width: 100%;
  }
}

/* Business picker — guaranteed visible dropdown chevron */
.business-picker-toggle {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  flex: 0 0 32px !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.business-picker-toggle svg {
  display: none !important;
}

.business-picker-toggle::after {
  content: "";
  width: 6px;
  height: 6px;
  display: block;
  border-right: 1.5px solid #536b8e;
  border-bottom: 1.5px solid #536b8e;
  transform: rotate(45deg) translateY(-2px);
}


/* ==========================================================
   Dashboard Date Range
   ========================================================== */

.dashboard-date-range {
  height: 34px;
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid #d8e1ec;
  border-radius: 6px;
  overflow: hidden;
  transition:
    border-color .15s ease,
    box-shadow .15s ease;
}

.dashboard-date-range:hover {
  border-color: #bdcad9;
}

.dashboard-date-range:focus-within {
  border-color: #7daee9;
  box-shadow: 0 0 0 3px rgb(37 99 235 / 7%);
}

.dashboard-date-field {
  position: relative;
  width: 132px;
  height: 32px;
  display: flex;
  align-items: center;
}

.dashboard-date-field input[type="date"] {
  width: 100%;
  height: 32px;
  margin: 0;
  padding: 0 8px 0 10px;
  color: #203b60;
  background: transparent;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  font: inherit;
  font-size: 10px;
  cursor: pointer;
}

.dashboard-date-field input[type="date"]::-webkit-calendar-picker-indicator {
  width: 14px;
  height: 14px;
  margin: 0;
  padding: 2px;
  cursor: pointer;
  opacity: .62;
}

.dashboard-date-field input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

.dashboard-date-separator {
  width: 22px;
  flex: 0 0 22px;
  display: grid;
  place-items: center;
  color: #8a9aaf;
  font-size: 11px;
}

.dashboard-apply-button {
  height: 34px !important;
  min-width: 58px;
  padding: 0 13px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff !important;
  background: #1769e8 !important;
  border: 1px solid #1769e8 !important;
  border-radius: 6px !important;
  font: inherit;
  font-size: 10px !important;
  font-weight: 600;
  cursor: pointer;
  transition:
    background .15s ease,
    border-color .15s ease,
    box-shadow .15s ease;
}

.dashboard-apply-button:hover {
  background: #0f5fd8 !important;
  border-color: #0f5fd8 !important;
}

.dashboard-apply-button:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgb(37 99 235 / 18%);
}

@media (max-width: 700px) {
  .dashboard-date-range {
    width: 100%;
  }

  .dashboard-date-field {
    width: auto;
    flex: 1 1 0;
  }

  .dashboard-apply-button {
    width: 100%;
  }
}

/* ==========================================================
   Dashboard visual polish
   ========================================================== */

/* Proper KPI SVG icons */
.metric-icon {
  flex: 0 0 auto;
}

.metric-icon svg {
  width: 18px;
  height: 18px;
  display: block;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/*
 * Empty ranking cards.
 * Existing markup was allowing the empty message to collapse into
 * an extremely narrow text column.
 */
.rank-card .empty-state,
.top-list .empty-state,
.dashboard-card .empty-state {
  width: 100%;
  min-width: 0;
  padding: 22px 14px;
  color: #71839d;
  font-size: 11px;
  line-height: 1.5;
  text-align: center;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
}

/* Never allow words in ranking/empty-state content to break vertically */
.rank-card,
.rank-card *,
.top-list,
.top-list * {
  word-break: normal;
}

.rank-card .empty-state,
.top-list .empty-state {
  display: block;
  flex: 1 1 100%;
}

/* Table empty states must remain table cells so colspan spans the full grid. */
.dashboard-card td.empty-state[colspan] {
  display: table-cell;
  width: auto;
  white-space: normal;
  text-align: center;
}

/*
 * Give ranking-card content the available horizontal space instead
 * of allowing it to shrink to the width of its first word.
 */
.rank-card > div:not(.card-header),
.rank-card > section,
.rank-card > ul,
.top-list {
  width: 100%;
  min-width: 0;
}

/* Empty chart areas should still look intentional */
.trend-card .empty-state,
.chart-card .empty-state {
  min-height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  color: #71839d;
  text-align: center;
}

/* Keep KPI cards visually consistent */
.metric-card {
  min-width: 0;
}

.metric-card > div {
  min-width: 0;
}

.metric-card > div > span {
  display: block;
}

@media (max-width: 700px) {
  .rank-card .empty-state,
  .top-list .empty-state,
  .dashboard-card .empty-state {
    padding: 18px 12px;
  }
}
\n/* ORDERS SCREEN V2 */\n.orders-heading{margin-bottom:18px;align-items:flex-start}.orders-heading h1{font-size:27px;line-height:1.15}.new-order-button{min-height:40px;padding:0 18px;border-radius:6px}.order-filters{margin:0 0 20px;overflow:visible;border:1px solid #dbe4ee;border-radius:9px;box-shadow:0 1px 2px rgb(15 35 60/3%)}.order-filter-grid{padding:18px 18px 20px;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px;align-items:end}.filter-field{gap:7px;color:#17375f;font-size:10px;font-weight:600}.filter-business,.filter-search,.filter-status,.filter-rep,.filter-customer,.filter-order-date,.filter-delivery-date,.filter-value,.filter-sort{grid-column:span 3}.filter-actions{grid-column:span 9;min-height:38px;padding-top:1px;justify-content:flex-start;gap:18px}.filter-control,.order-picker-control,.range-control input{height:38px;border:1px solid #d4deea;border-radius:6px;background:#fff;transition:.15s}.filter-control:focus-within,.order-picker-control:focus-within,.range-control input:focus{border-color:#75a8ec;box-shadow:0 0 0 3px rgb(37 99 235/8%)}.filter-control{position:relative;display:flex;align-items:center;overflow:hidden}.filter-control input,.filter-control select{width:100%!important;height:36px!important;min-width:0;padding:0 34px 0 11px!important;color:#203b60!important;background:transparent!important;border:0!important;border-radius:0!important;outline:0!important;box-shadow:none!important;font-size:11px!important}.filter-control-search input{padding-left:34px!important}.filter-control-select:after,.control-chevron:after{content:"";width:6px;height:6px;border-right:1.5px solid #60748f;border-bottom:1.5px solid #60748f;transform:rotate(45deg) translateY(-2px)}.filter-control-select:after{position:absolute;right:13px;pointer-events:none}.filter-control-select select{appearance:none;-webkit-appearance:none;cursor:pointer}.control-icon{width:34px;height:36px;flex:0 0 34px;display:grid;place-items:center;color:#60748f}.filter-control-search .control-icon{position:absolute;left:0;z-index:1}.control-icon svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.order-async-picker{position:relative;min-width:0}.order-picker-control{display:flex;align-items:center;overflow:hidden}.order-picker-control>input{width:100%;min-width:0;height:36px;padding:0 10px;color:#203b60;background:transparent;border:0;outline:0;font-size:11px}.order-picker-control .control-icon+input{padding-left:0}.control-chevron{width:36px;height:36px;flex:0 0 36px;display:grid;place-items:center;padding:0;background:#fff;border:0;border-left:1px solid #edf1f5;cursor:pointer}.order-picker-results{position:absolute;z-index:1200;top:calc(100% + 5px);left:0;width:max(100%,260px);max-height:290px;padding:5px;overflow:auto;background:#fff;border:1px solid #d7e0eb;border-radius:7px;box-shadow:0 14px 32px rgb(15 35 60/14%),0 2px 6px rgb(15 35 60/5%)}.order-picker-results[hidden]{display:none!important}.order-picker-option,.order-picker-more{width:100%;min-height:36px;padding:8px 10px;display:block;color:#203b60;background:transparent;border:0;border-radius:5px;cursor:pointer;text-align:left;font:inherit;font-size:10px}.order-picker-option:hover,.order-picker-option:focus-visible{background:#edf5ff;outline:0}.order-picker-option.is-all{font-weight:600;border-bottom:1px solid #eef2f6}.order-picker-more{margin-top:4px;color:#1262c5;text-align:center;border-top:1px solid #eef2f6}.order-picker-state{padding:10px;color:#71839d;font-size:10px}.date-filter legend,.value-filter legend{margin-bottom:7px}.range-control{display:grid!important;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:7px!important;align-items:center}.range-control input{width:100%!important;min-width:0;padding:0 9px!important;color:#203b60;outline:0;font-size:10px!important}.range-control>span{color:#7b8ca3;text-align:center}.value-range{grid-template-columns:repeat(2,minmax(0,1fr))}.filter-actions a{padding:9px 4px;font-size:10px}.filter-actions .button{min-width:105px;height:38px;padding-inline:15px}.order-list-toolbar{min-height:0;margin:0;padding:0 0 12px;align-items:center}.order-list-toolbar strong{font-size:13px}.export-button{min-width:92px;height:36px;padding:0 13px;border-radius:6px}.export-button svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.order-list-card{margin:0;border-radius:9px}.orders-desktop-table th,.orders-desktop-table td{padding:11px 12px}.orders-desktop-table tbody tr:hover{background:#fbfdff}@media(max-width:1100px){.filter-business,.filter-search,.filter-status,.filter-rep,.filter-customer,.filter-order-date,.filter-delivery-date,.filter-value,.filter-sort{grid-column:span 6}.filter-actions{grid-column:span 6}}@media(max-width:700px){.order-filter-grid{padding:12px;grid-template-columns:1fr;gap:12px}.filter-business,.filter-search,.filter-status,.filter-rep,.filter-customer,.filter-order-date,.filter-delivery-date,.filter-value,.filter-sort,.filter-actions{grid-column:1}.filter-actions{justify-content:flex-end}.order-picker-results{width:100%}.order-list-toolbar{padding-bottom:10px}}\n

/* ===== Order Detail V2 cleanup ===== */
.detail-heading { align-items:center; margin-bottom:16px; }
.detail-summary-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.detail-summary-grid .detail-card { min-height:142px; padding:15px; }
.detail-summary-grid .detail-card header { margin-bottom:13px; }
.identity-row > div { min-width:0; }
.identity-row strong,.identity-row small { overflow-wrap:anywhere; }
.detail-main-grid { grid-template-columns:minmax(0,1fr) 225px; align-items:stretch; }
.detail-items { min-width:0; }
.order-items-table { width:100%; overflow:hidden; }
.order-items-table table { width:100%; min-width:0 !important; table-layout:fixed; }
.order-items-table th,.order-items-table td { min-width:0; padding-left:8px; padding-right:8px; vertical-align:middle; }
.order-items-table th:nth-child(1),.order-items-table td:nth-child(1){width:32px;}
.order-items-table th:nth-child(2),.order-items-table td:nth-child(2){width:43%;}
.order-items-table th:nth-child(3),.order-items-table td:nth-child(3){width:21%;}
.order-items-table th:nth-child(4),.order-items-table td:nth-child(4){width:12%;white-space:nowrap;}
.order-items-table th:nth-child(5),.order-items-table td:nth-child(5){width:9%;white-space:nowrap;}
.order-items-table th:nth-child(6),.order-items-table td:nth-child(6){width:12%;white-space:nowrap;}
.order-product { min-width:0 !important; display:flex; align-items:center; gap:10px; }
.order-product > :last-child { min-width:0; }
.order-product strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; line-height:1.35; }
.order-items-table td:nth-child(3){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.product-thumb { width:46px !important; height:46px !important; min-width:46px !important; flex:0 0 46px !important; }
.product-thumb-empty { width:100%;height:100%;display:grid;place-items:center;color:#8da0b8;background:#f5f8fb; }
.processing-info-only { margin-top:14px; }
.processing-info-only header { flex:1; }
.detail-footer { display:none !important; }
@media(max-width:1100px){.detail-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.detail-main-grid{grid-template-columns:minmax(0,1fr) 205px;}.order-items-table th:nth-child(2),.order-items-table td:nth-child(2){width:39%;}}
@media(max-width:820px){.detail-heading{align-items:flex-start}.detail-main-grid{grid-template-columns:1fr}.status-history{min-height:auto}.item-table{display:none}.mobile-item-list{display:block}}
@media(max-width:560px){.detail-summary-grid{grid-template-columns:1fr}.detail-heading{display:block}.detail-heading form{margin-top:12px}.detail-heading .process-top{width:100%}}


/* ===== Order Detail final compact items ===== */
.detail-main-grid,
.order-detail-main {
  align-items: start !important;
}

.detail-items,
.status-history {
  min-height: 0 !important;
  height: auto !important;
}

.detail-items {
  padding-bottom: 0 !important;
}

.detail-items .item-table,
.detail-items table {
  margin-bottom: 0 !important;
}

.detail-items tbody tr:last-child td {
  border-bottom: 0 !important;
}

.order-product {
  min-width: 0 !important;
  align-items: center !important;
}

.order-product-copy {
  min-width: 0 !important;
  display: block !important;
}

.order-product-copy > strong {
  display: block !important;
  margin: 0 !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.35;
}

.order-product-copy > small,
.order-product-copy > p {
  display: none !important;
}

.sku-cell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-history {
  padding-bottom: 16px !important;
}

@media (max-width: 820px) {
  .detail-main-grid,
  .order-detail-main {
    align-items: stretch !important;
  }
}

/* ===== Order Detail responsive final ===== */
.order-process-form { margin: 0; }

@media (max-width: 900px) {
  .order-detail-summary, .detail-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .order-detail-main, .detail-main-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
    align-items: start !important;
  }
  .order-detail-main .detail-items,
  .order-detail-main .status-history {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
  }
  .order-detail-main .item-table { display: none !important; }
  .order-detail-main .mobile-item-list,
  .order-detail-main .order-mobile-items { display: block !important; }

  .mobile-order-item {
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 11px 12px !important;
    border-bottom: 1px solid #e8eef5;
  }
  .mobile-order-item:last-child { border-bottom: 0; }
  .mobile-order-item-copy { min-width: 0 !important; }
  .mobile-order-item-copy strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mobile-order-item-copy small {
    display: block;
    margin-top: 4px;
    color: #667b96;
    line-height: 1.4;
    white-space: normal;
  }
  .status-history { padding-bottom: 16px !important; }
}

@media (max-width: 560px) {
  .order-detail-summary, .detail-summary-grid {
    grid-template-columns: 1fr !important;
  }
  .order-detail-heading, .detail-heading { display: block !important; }

  .order-process-form {
    width: 100% !important;
    margin-top: 14px !important;
  }
  .order-process-form .process-top,
  .order-detail-heading .process-top {
    width: 100% !important;
    min-width: 0 !important;
    height: 42px !important;
    padding: 0 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
  .order-detail-heading .button,
  .order-process-form .button { font-size: 12px !important; }

  .mobile-order-item {
    grid-template-columns: 48px minmax(0, 1fr) !important;
    gap: 10px !important;
  }
  .mobile-order-item > strong:last-child {
    grid-column: 2;
    justify-self: start;
    margin-top: 3px;
    font-size: 12px;
  }
  .processing-info-only { margin-top: 14px !important; }
}

/* === ORDER DETAIL TABLET WIDTH FIX ===
   At tablet widths the status timeline is hidden. The items panel must then
   consume the complete content row instead of retaining the desktop column. */
@media (min-width: 701px) and (max-width: 1100px) {
  .detail-main-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: none !important;
  }

  .detail-main-grid > .detail-items {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  .detail-main-grid > .status-history {
    display: none !important;
  }

  .detail-items .item-table {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
  }

  .detail-items .item-table table {
    width: 100% !important;
  }
}

/* === CUSTOMER GRID DEFINITIVE === */
@media (min-width: 701px) {
  .customer-list-card { overflow: hidden; }
  .customers-desktop-table { width:100%; max-width:100%; overflow:hidden; }
  .customers-desktop-table table { width:100%; min-width:0; max-width:100%; table-layout:fixed; }
  .customers-desktop-table th, .customers-desktop-table td { min-width:0; overflow:hidden; text-overflow:ellipsis; }

  .customers-desktop-table th:nth-child(1), .customers-desktop-table td:nth-child(1) { width:3%; }
  .customers-desktop-table th:nth-child(2), .customers-desktop-table td:nth-child(2) { width:14%; }
  .customers-desktop-table th:nth-child(3), .customers-desktop-table td:nth-child(3) { width:17%; }
  .customers-desktop-table th:nth-child(4), .customers-desktop-table td:nth-child(4) { width:13%; }
  .customers-desktop-table th:nth-child(5), .customers-desktop-table td:nth-child(5) { width:11%; }
  .customers-desktop-table th:nth-child(6), .customers-desktop-table td:nth-child(6) { width:16%; }
  .customers-desktop-table th:nth-child(7), .customers-desktop-table td:nth-child(7) { width:8%; }
  .customers-desktop-table th:nth-child(8), .customers-desktop-table td:nth-child(8) { width:8%; }
  .customers-desktop-table th:nth-child(9), .customers-desktop-table td:nth-child(9) { width:8%; }
  .customers-desktop-table th:nth-child(10), .customers-desktop-table td:nth-child(10) {
    width:2%; padding-left:2px; padding-right:7px; text-align:right; overflow:visible;
  }
  .customers-desktop-table .row-arrow { position:static; left:auto; display:inline-block; line-height:1; }
}

@media (min-width: 701px) and (max-width: 1100px) {
  .customers-desktop-table th:nth-child(1), .customers-desktop-table td:nth-child(1) { width:4%; }
  .customers-desktop-table th:nth-child(2), .customers-desktop-table td:nth-child(2) { width:20%; }
  .customers-desktop-table th:nth-child(5), .customers-desktop-table td:nth-child(5) { width:27%; }
  .customers-desktop-table th:nth-child(7), .customers-desktop-table td:nth-child(7) { width:15%; }
  .customers-desktop-table th:nth-child(8), .customers-desktop-table td:nth-child(8) { width:18%; }
  .customers-desktop-table th:nth-child(9), .customers-desktop-table td:nth-child(9) { width:13%; }
  .customers-desktop-table th:nth-child(10), .customers-desktop-table td:nth-child(10) { width:3%; }
}

/* === CUSTOMER GRID BALANCED FINAL === */
@media (min-width: 1101px) {
  /* 100% total: # 3 + Customer 19 + Contact 15 + Email 13 + Area 11
     + Sales Reps 16 + Orders 7 + Value 7 + Status 7 + Arrow 2 */
  .customers-desktop-table th:nth-child(1), .customers-desktop-table td:nth-child(1) { width:3% !important; }
  .customers-desktop-table th:nth-child(2), .customers-desktop-table td:nth-child(2) { width:19% !important; }
  .customers-desktop-table th:nth-child(3), .customers-desktop-table td:nth-child(3) { width:15% !important; }
  .customers-desktop-table th:nth-child(4), .customers-desktop-table td:nth-child(4) { width:13% !important; }
  .customers-desktop-table th:nth-child(5), .customers-desktop-table td:nth-child(5) { width:11% !important; }
  .customers-desktop-table th:nth-child(6), .customers-desktop-table td:nth-child(6) { width:16% !important; }
  .customers-desktop-table th:nth-child(7), .customers-desktop-table td:nth-child(7) { width:7% !important; }
  .customers-desktop-table th:nth-child(8), .customers-desktop-table td:nth-child(8) { width:7% !important; }
  .customers-desktop-table th:nth-child(9), .customers-desktop-table td:nth-child(9) { width:7% !important; }
  .customers-desktop-table th:nth-child(10), .customers-desktop-table td:nth-child(10) {
    width:2% !important;
    padding-left:0 !important;
    padding-right:7px !important;
    text-align:right !important;
  }
}

/* Surface/tablet: hidden columns remain hidden; visible widths total 100%. */
@media (min-width: 701px) and (max-width: 1100px) {
  .customers-desktop-table th:nth-child(1), .customers-desktop-table td:nth-child(1) { width:4% !important; }
  .customers-desktop-table th:nth-child(2), .customers-desktop-table td:nth-child(2) { width:25% !important; }
  .customers-desktop-table th:nth-child(5), .customers-desktop-table td:nth-child(5) { width:25% !important; }
  .customers-desktop-table th:nth-child(7), .customers-desktop-table td:nth-child(7) { width:14% !important; }
  .customers-desktop-table th:nth-child(8), .customers-desktop-table td:nth-child(8) { width:17% !important; }
  .customers-desktop-table th:nth-child(9), .customers-desktop-table td:nth-child(9) { width:12% !important; }
  .customers-desktop-table th:nth-child(10), .customers-desktop-table td:nth-child(10) { width:3% !important; }
}

/* Customer filters reuse the Orders filter controls; only their desktop placement differs. */
@media (min-width: 1101px) {
  .customer-filter-layout > .filter-business { grid-column: 1 / span 3; grid-row: 1; }
  .customer-filter-layout > .filter-search { grid-column: 4 / span 3; grid-row: 1; }
  .customer-filter-layout > .filter-status { grid-column: 7 / span 3; grid-row: 1; }
  .customer-filter-layout > .filter-rep { grid-column: 10 / span 3; grid-row: 1; }
  .customer-filter-layout > .filter-area { grid-column: 1 / span 3; grid-row: 2; }
  .customer-filter-layout > .filter-created-date { grid-column: 4 / span 6; grid-row: 2; }
  .customer-filter-layout > .filter-sort { grid-column: 1 / span 3; grid-row: 3; }
  .customer-filter-layout > .filter-actions { grid-column: 4 / span 9; grid-row: 3; }

  .customer-filter-layout:not(:has(.filter-business)) > .filter-search { grid-column: 1 / span 3; }
  .customer-filter-layout:not(:has(.filter-business)) > .filter-status { grid-column: 4 / span 3; }
  .customer-filter-layout:not(:has(.filter-business)) > .filter-rep { grid-column: 7 / span 3; }
  .customer-filter-layout:not(:has(.filter-business)) > .filter-area {
    grid-column: 10 / span 3;
    grid-row: 1;
  }
  .customer-filter-layout:not(:has(.filter-business)) > .filter-created-date {
    grid-column: 1 / span 6;
    grid-row: 2;
  }
}

@media (max-width: 1100px) {
  .customer-filter-layout > .filter-area,
  .customer-filter-layout > .filter-created-date { grid-column: span 6; }
}

@media (max-width: 700px) {
  .customer-filter-layout > .filter-area,
  .customer-filter-layout > .filter-created-date { grid-column: 1; }
}

/* Products reuse the Orders controls and Customers list patterns. */
.filter-category,.filter-stock{grid-column:span 3}
.products-mobile-cards{display:none}
.product-list-card{overflow:hidden}
.products-desktop-table{width:100%;max-width:100%;overflow:hidden}
.products-desktop-table table{width:100%;table-layout:fixed}
.products-desktop-table th,.products-desktop-table td{min-width:0;padding:10px 8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.products-desktop-table .product-name-cell a,.products-desktop-table .product-name-cell small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.products-desktop-table .product-name-cell small{color:#71839d;margin-top:3px}
.products-desktop-table th:nth-child(1){width:4%}.products-desktop-table th:nth-child(2){width:6%}.products-desktop-table th:nth-child(3){width:25%}.products-desktop-table th:nth-child(4){width:12%}.products-desktop-table th:nth-child(5){width:11%}.products-desktop-table th:nth-child(6){width:11%}.products-desktop-table th:nth-child(7){width:8%}.products-desktop-table th:nth-child(8){width:9%}.products-desktop-table th:nth-child(9){width:10%}.products-desktop-table th:nth-child(10){width:4%}
.products-desktop-table th:last-child,.products-desktop-table td:last-child{padding-left:4px;padding-right:12px;text-align:right;overflow:visible}
.products-desktop-table .row-arrow{position:static;display:inline-block;line-height:1}
.product-image-slot{width:38px;height:38px;display:block}.product-list-thumb{width:38px;height:38px;padding:0;display:grid;place-items:center;overflow:hidden;color:#2472df;background:#edf5ff;border:1px solid #dce9f8;border-radius:7px}
.order-item-image-slot{width:46px;height:46px;min-width:46px;flex:0 0 46px}.order-item-image-slot .product-thumb{padding:0}
.product-list-thumb img{width:100%;height:100%;display:block;object-fit:contain;background:#fff}
.product-list-thumb .product-thumb-fallback{font-size:17px}
.product-image-trigger{cursor:zoom-in}.product-image-trigger:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.stock-value.is-low{color:#c66a00}.stock-value.is-out{color:#d92f2f}
.product-table-footer{min-width:0;display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid var(--border)}
.product-page-size{flex:0 0 auto;display:flex;align-items:center;gap:7px;padding-left:14px;color:#60748f;font-size:10px}.product-page-size select{height:34px;padding:0 28px 0 10px;border:1px solid #d4deea;border-radius:6px;background:#fff;color:#203b60}
.product-pagination{min-width:0;flex:1;border-top:0}.product-pagination>div{flex:0 0 auto}
.product-detail-heading-copy{min-width:0}.product-detail-title{min-width:0;display:flex;align-items:center;gap:10px}.product-detail-title h1{min-width:0;max-width:min(780px,70vw);margin:4px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:27px}.product-detail-card{padding:20px}.product-detail-profile{min-width:0;display:flex;align-items:center;gap:22px;padding-bottom:20px;border-bottom:1px solid var(--border)}.product-detail-image-slot{width:160px;height:160px;flex:0 0 160px}.product-detail-image{width:160px;height:160px;padding:0;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#f7f9fc;border:1px solid #dfe7f1;border-radius:10px}.product-detail-image img{width:100%;height:100%;display:block;object-fit:contain;background:#fff}.product-detail-name{min-width:0}.product-detail-name>span{color:var(--muted);font-size:9px;text-transform:uppercase}.product-detail-name h2{max-width:720px;margin:6px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:20px}.product-detail-name small{color:var(--muted)}.product-detail-fields{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:20px 0 0;border:1px solid var(--border);border-radius:8px;overflow:hidden}.product-detail-fields>div{min-width:0;padding:14px;border-right:1px solid var(--border);border-bottom:1px solid var(--border)}.product-detail-fields dt{margin-bottom:6px;color:var(--muted);font-size:9px;text-transform:uppercase}.product-detail-fields dd{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);font-size:12px;font-weight:600}
@media(max-width:1100px){.filter-category,.filter-stock{grid-column:span 6}.products-desktop-table th:nth-child(5),.products-desktop-table td:nth-child(5),.products-desktop-table th:nth-child(8),.products-desktop-table td:nth-child(8){display:none}.products-desktop-table th:nth-child(1){width:5%}.products-desktop-table th:nth-child(2){width:8%}.products-desktop-table th:nth-child(3){width:31%}.products-desktop-table th:nth-child(4){width:16%}.products-desktop-table th:nth-child(6){width:14%}.products-desktop-table th:nth-child(7){width:10%}.products-desktop-table th:nth-child(9){width:12%}.products-desktop-table th:nth-child(10){width:4%}.product-pagination>span{display:none}.product-detail-fields{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.filter-category,.filter-stock{grid-column:1}.products-desktop-table{display:none}.products-mobile-cards{display:block;padding:7px;background:#f5f8fb}.mobile-product-card{display:grid;grid-template-columns:42px minmax(0,1fr) auto 10px;gap:9px;align-items:center;margin-bottom:7px;padding:10px;color:#19375d;background:#fff;border:1px solid #e1e8f0;border-radius:7px}.mobile-product-main,.mobile-product-meta{min-width:0;display:flex;flex-direction:column;gap:3px}.mobile-product-main a{min-width:0;color:#19375d;text-decoration:none}.mobile-product-main strong,.mobile-product-main small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mobile-product-main small,.mobile-product-meta small{color:#71839d;font-size:9px}.mobile-product-meta{align-items:flex-end}.mobile-product-meta em{font-style:normal}.mobile-product-meta strong{font-size:11px}.mobile-product-arrow{color:#19375d;text-decoration:none;font-size:18px}.product-table-footer{padding:10px 8px;align-items:center;flex-wrap:wrap;gap:9px}.product-page-size{padding-left:0}.product-pagination{min-height:0;padding:0;border:0}.product-pagination>div{width:auto;margin-left:auto;justify-content:flex-end}.product-detail-heading{display:flex!important;align-items:flex-start;flex-direction:column}.product-detail-heading .button{width:100%}.product-detail-title h1{max-width:calc(100vw - 70px);font-size:21px}.product-detail-card{padding:14px}.product-detail-profile{align-items:flex-start;gap:14px}.product-detail-image-slot,.product-detail-image{width:112px;height:112px;flex-basis:112px}.product-detail-name h2{max-width:calc(100vw - 190px);font-size:16px}.product-detail-fields{grid-template-columns:1fr}.product-detail-fields>div{border-right:0}.image-lightbox{padding:18px}.image-lightbox-panel,.image-lightbox-panel>img{max-width:calc(100vw - 36px);max-height:80vh}.image-lightbox-close{top:-14px;right:-10px}}

/* Users / tenant administration: intentionally reuses the existing table, form and KPI system. */
.button-danger { background:#b42318; border-color:#b42318; color:#fff; }
.button-danger:hover { background:#912018; border-color:#912018; }

/* Users / Business Administration refinements */
.modal-content:has(.user-admin-form-modal){overflow:visible}
.user-admin-form-modal{width:min(600px,100%);overflow:visible}
.user-admin-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.user-admin-form-grid .form-field{min-width:0}
.user-admin-business-field,.user-admin-field-username,.user-admin-field-email,.user-admin-active-field{grid-column:1/-1}
.user-admin-form-grid .order-picker-control,.user-admin-form-grid .form-field>input:not([type="checkbox"]){height:39px;box-sizing:border-box}
.user-admin-active-field>span{display:flex;align-items:center;gap:8px;font-weight:600}
.user-admin-active-field input[type="checkbox"]{width:16px;height:16px;margin:0}
.user-admin-form-modal .order-picker-results{width:100%;max-height:160px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-gutter:stable}
.customer-status.is-legacy{color:#475569;background:#eef2f6}
@media(max-width:700px){.user-admin-form-grid{grid-template-columns:1fr}.user-admin-business-field,.user-admin-field-username,.user-admin-field-email,.user-admin-active-field{grid-column:1}}



/* TENANT ADMIN FINAL */
.users-heading-actions{display:flex;align-items:center;gap:10px}.users-heading-actions .button{text-decoration:none;white-space:nowrap}
.tenant-filter-grid{grid-template-columns:repeat(12,minmax(0,1fr))}.tenant-search{grid-column:span 5}.tenant-status{grid-column:span 3}.tenant-age{grid-column:span 2}.tenant-filter-actions{grid-column:span 2;justify-content:flex-end;gap:12px}.tenant-age-control input{width:100%!important;height:36px!important;padding:0 11px!important;border:0!important;outline:0!important;color:#203b60!important;background:transparent!important}.tenant-list-card{overflow:hidden}.tenant-list-toolbar{min-height:48px;padding:0 14px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid #edf1f5}.tenant-list-toolbar strong{color:#17375f;font-size:12px}.tenant-list-toolbar span{color:#71839d;font-size:10px}.tenant-desktop-table{width:100%;overflow-x:auto}.tenant-desktop-table table{width:100%;min-width:900px;table-layout:fixed;border-collapse:collapse}.tenant-desktop-table th,.tenant-desktop-table td{padding:11px 10px;overflow:hidden;border-bottom:1px solid #edf1f5;color:#263f64;font-size:10px;text-align:left;text-overflow:ellipsis;white-space:nowrap}.tenant-desktop-table th{color:#40587b;background:#f5f8fc;font-size:9px;font-weight:600;text-transform:uppercase}.tenant-desktop-table th:nth-child(1){width:17%}.tenant-desktop-table th:nth-child(2){width:22%}.tenant-desktop-table th:nth-child(3){width:12%}.tenant-desktop-table th:nth-child(4){width:7%}.tenant-desktop-table th:nth-child(5){width:9%}.tenant-desktop-table th:nth-child(6){width:7%}.tenant-desktop-table th:nth-child(7){width:10%}.tenant-desktop-table th:nth-child(8){width:120px}.tenant-desktop-table tbody tr:hover{background:#fbfdff}.tenant-action-cell{overflow:visible!important;text-align:right!important}.tenant-delete-button{min-height:31px;padding:6px 10px;color:#b42318;background:#fff;border:1px solid #f0b7b2;border-radius:5px;cursor:pointer;font:inherit;font-size:9px;font-weight:600;white-space:nowrap}.tenant-delete-button:hover,.tenant-delete-button:focus-visible{color:#fff;background:#b42318;border-color:#b42318;outline:0}.tenant-mobile-cards{display:none}
.modal-content:has(.tenant-delete-modal){overflow:visible}.tenant-delete-modal{width:min(660px,100%);overflow:visible}.tenant-delete-warning{margin:0 0 16px;padding:12px 14px;display:grid;gap:4px;color:#7a271a;background:#fff5f4;border:1px solid #fecdca;border-radius:7px}.tenant-delete-warning strong{font-size:13px}.tenant-delete-warning span,.tenant-delete-warning p{font-size:10px}.tenant-delete-warning p{margin:5px 0 0;line-height:1.5}.tenant-impact-grid{margin-bottom:17px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.tenant-impact-grid article{min-height:57px;padding:9px 11px;display:grid;align-content:center;gap:4px;background:#f8fafc;border:1px solid #e3eaf2;border-radius:6px}.tenant-impact-grid span{color:#71839d;font-size:9px}.tenant-impact-grid strong{color:#17375f;font-size:16px}.tenant-confirm-field{margin-bottom:16px}.tenant-confirm-value{display:block;margin:-2px 0 3px;color:#b42318;font-size:11px;overflow-wrap:anywhere}.tenant-delete-modal footer{display:flex;justify-content:flex-end;gap:9px}
@media(max-width:1100px){.tenant-search{grid-column:span 6}.tenant-status{grid-column:span 3}.tenant-age{grid-column:span 3}.tenant-filter-actions{grid-column:1/-1;justify-content:flex-start}}
@media(max-width:700px){.users-heading-actions{gap:7px}.users-heading-actions .button-secondary{display:none}.tenant-filter-grid{grid-template-columns:1fr}.tenant-search,.tenant-status,.tenant-age,.tenant-filter-actions{grid-column:1}.tenant-filter-actions{justify-content:flex-end}.tenant-list-toolbar{align-items:flex-start;flex-direction:column;padding:11px 12px;gap:3px}.tenant-desktop-table{display:none}.tenant-mobile-cards{display:block;padding:8px}.tenant-mobile-card{margin-bottom:7px;padding:11px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;background:#fbfdff;border:1px solid #e3eaf2;border-radius:7px}.tenant-mobile-card>div:first-child{min-width:0;display:grid;gap:3px}.tenant-mobile-card strong,.tenant-mobile-card small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tenant-mobile-card strong{font-size:10px}.tenant-mobile-card small,.tenant-mobile-meta span{color:#71839d;font-size:8px}.tenant-mobile-meta{display:grid;justify-items:end;gap:5px}.tenant-impact-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.modal-content:has(.tenant-delete-modal){max-height:calc(100vh - 20px);overflow:auto}}

/* TENANT BULK SELECTION */
.tenant-check-col{width:38px!important;text-align:center!important}.tenant-check-col input{width:14px;height:14px;margin:0}.tenant-bulk-bar{margin:8px 10px;padding:8px 10px;display:flex;align-items:center;justify-content:space-between;background:#fff8f7;border:1px solid #fecdca;border-radius:6px}.tenant-bulk-bar[hidden]{display:none}.tenant-bulk-bar strong{color:#7a271a;font-size:10px}.tenant-bulk-names{max-height:130px;overflow:auto;margin-bottom:15px;border:1px solid #e3eaf2;border-radius:6px}.tenant-bulk-names>div{padding:7px 10px;display:flex;justify-content:space-between;border-bottom:1px solid #edf1f5;font-size:9px}.tenant-bulk-names span{color:#71839d}

/* Tenant Administration — desktop column rebalance */
@media (min-width: 769px) {
    .tenant-desktop-table table {
        width: 100%;
        table-layout: fixed;
    }

    .tenant-desktop-table th:nth-child(1),
    .tenant-desktop-table td:nth-child(1) {
        width: 32px;
    }

    /* Business */
    .tenant-desktop-table th:nth-child(2),
    .tenant-desktop-table td:nth-child(2) {
        width: 22%;
        min-width: 170px;
    }

    /* Owner/Admin Email */
    .tenant-desktop-table th:nth-child(3),
    .tenant-desktop-table td:nth-child(3) {
        width: 23%;
    }

    /* Registered */
    .tenant-desktop-table th:nth-child(4),
    .tenant-desktop-table td:nth-child(4) {
        width: 10%;
    }

    /* Users */
    .tenant-desktop-table th:nth-child(5),
    .tenant-desktop-table td:nth-child(5) {
        width: 6%;
    }

    /* Sales Reps */
    .tenant-desktop-table th:nth-child(6),
    .tenant-desktop-table td:nth-child(6) {
        width: 8%;
    }

    /* Orders */
    .tenant-desktop-table th:nth-child(7),
    .tenant-desktop-table td:nth-child(7) {
        width: 7%;
    }

    /* Activation */
    .tenant-desktop-table th:nth-child(8),
    .tenant-desktop-table td:nth-child(8) {
        width: 11%;
    }

    /* Action */
    .tenant-desktop-table th:nth-child(9),
    .tenant-desktop-table td:nth-child(9) {
        width: 13%;
    }

    .tenant-desktop-table td:nth-child(2) strong {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .tenant-desktop-table td:nth-child(3) {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}


/* TENANT FILTER LAYOUT FINAL */
@media (min-width: 1101px) {
    .tenant-filter-grid {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        column-gap: 14px;
    }

    .tenant-search {
        grid-column: span 5;
    }

    .tenant-status {
        grid-column: span 3;
    }

    .tenant-age {
        grid-column: span 2;
    }

    .tenant-filter-actions {
        grid-column: span 2;
        display: grid;
        grid-template-columns: auto minmax(82px, 1fr);
        align-items: end;
        gap: 10px;
        min-width: 0;
    }

    .tenant-filter-actions a {
        white-space: nowrap;
        font-size: 9px;
    }

    .tenant-filter-actions .button {
        width: 100%;
        min-width: 82px;
    }
}

/* At narrower desktop/tablet widths, give actions their own row. */
@media (min-width: 701px) and (max-width: 1100px) {
    .tenant-filter-actions {
        grid-column: 1 / -1;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 12px;
    }

    .tenant-filter-actions a {
        white-space: nowrap;
    }

    .tenant-filter-actions .button {
        min-width: 100px;
    }
}

/* Tenant bulk-delete modal — consistent outer spacing */
.tenant-delete-modal > .tenant-delete-warning,
.tenant-delete-modal > .tenant-impact-grid,
.tenant-delete-modal > .tenant-bulk-names,
.tenant-delete-modal > form {
    margin-left: 20px;
    margin-right: 20px;
}

.tenant-delete-modal > .tenant-delete-warning {
    margin-top: 16px;
}

.tenant-delete-modal > form {
    margin-top: 18px;
    margin-bottom: 18px;
}

.tenant-delete-modal > form footer {
    margin-top: 16px;
}

@media (max-width: 700px) {
    .tenant-delete-modal > .tenant-delete-warning,
    .tenant-delete-modal > .tenant-impact-grid,
    .tenant-delete-modal > .tenant-bulk-names,
    .tenant-delete-modal > form {
        margin-left: 14px;
        margin-right: 14px;
    }
}

/* Tenant Administration page size */
.tenant-page-size {
    grid-column: span 1;
    min-width: 74px;
}

.tenant-page-size label {
    display: grid;
    gap: 6px;
}

.tenant-page-size label > span {
    color: #17375f;
    font-size: 9px;
    font-weight: 600;
}

.tenant-page-size select {
    width: 100%;
    height: 36px;
    padding: 0 8px;
    border: 1px solid #d7e0ea;
    border-radius: 6px;
    background: #fff;
    color: #203b60;
    font: inherit;
}

@media (max-width: 700px) {
    .tenant-page-size {
        grid-column: 1;
    }
}

/* Tenant page-size control — final grid placement */
@media (min-width: 1101px) {
    .tenant-search { grid-column: span 4; }
    .tenant-status { grid-column: span 3; }
    .tenant-age { grid-column: span 2; }

    .tenant-page-size {
        grid-column: span 1;
        min-width: 0;
    }

    .tenant-filter-actions {
        grid-column: span 2;
    }
}

.tenant-page-size select {
    width: 100%;
}

@media (min-width: 701px) and (max-width: 1100px) {
    .tenant-page-size {
        grid-column: span 2;
    }
}

@media (max-width: 700px) {
    .tenant-page-size {
        grid-column: 1;
    }
}

/* Tenant table empty state must span the complete table */
.tenant-desktop-table tbody td.empty-state[colspan] {
    width: auto !important;
    min-width: 0 !important;
    padding: 42px 20px !important;
    text-align: center !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    color: #71839d;
}

/* Tenant empty result — full-width message */
.tenant-desktop-table tbody tr:has(td.empty-state) {
    position: relative;
    height: 150px;
}

.tenant-desktop-table tbody td.empty-state[colspan="9"] {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;

    display: flex !important;
    align-items: center;
    justify-content: center;

    padding: 24px !important;
    white-space: nowrap !important;
    text-align: center !important;
    overflow: visible !important;
    text-overflow: clip !important;
    color: #71839d;
}


/* USERS TABLE FINAL LAYOUT */
.users-desktop-table {
    width: 100%;
    overflow-x: auto;
}

.users-desktop-table table {
    width: 100%;
    min-width: 900px;
    table-layout: fixed;
}

/* Root view:
   User | Email | Role | Business | Registered | Status | Action */
.users-desktop-table th:nth-child(1),
.users-desktop-table td:nth-child(1) {
    width: 20%;
}

.users-desktop-table th:nth-child(2),
.users-desktop-table td:nth-child(2) {
    width: 21%;
}

.users-desktop-table th:nth-child(3),
.users-desktop-table td:nth-child(3) {
    width: 15%;
}

.users-desktop-table th:nth-child(4),
.users-desktop-table td:nth-child(4) {
    width: 20%;
}

.users-desktop-table th:nth-child(5),
.users-desktop-table td:nth-child(5) {
    width: 13%;
}

.users-desktop-table th:nth-child(6),
.users-desktop-table td:nth-child(6) {
    width: 8%;
}

.users-desktop-table th:last-child,
.users-desktop-table td:last-child {
    width: 44px;
    text-align: center;
}

.users-desktop-table th,
.users-desktop-table td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.users-desktop-table td:first-child strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.users-desktop-table td:first-child small {
    display: block !important;
    margin-top: 3px;
    overflow: hidden;
    color: var(--muted);
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.users-desktop-table .row-arrow {
    display: inline-block;
    width: 28px;
    text-align: center;
}

/* Users filter now has one extra Page Size control */
.user-page-size {
    min-width: 82px;
}

.user-page-size select {
    min-width: 82px;
}

.user-filter-actions {
    align-self: end;
}

/* Keep paging clean and consistent */
.user-pagination {
    margin: 0;
}

@media (max-width: 1100px) {
    .users-desktop-table table {
        min-width: 820px;
    }
}


/* New-Business onboarding */
.onboarding-card { margin-bottom: 14px; padding: 18px; background: white; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.onboarding-intro { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.onboarding-eyebrow { display: block; margin-bottom: 4px; color: var(--primary); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.onboarding-intro h2 { margin: 0; color: var(--ink); font-size: 17px; letter-spacing: -.02em; }
.onboarding-intro p { max-width: 720px; margin: 6px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.onboarding-progress { min-width: 72px; text-align: right; }
.onboarding-progress strong { display: block; color: var(--ink); font-size: 20px; }
.onboarding-progress span { color: var(--muted); font-size: 10px; }
.onboarding-progress-track { height: 5px; margin: 14px 0; overflow: hidden; background: #edf2f7; border-radius: 99px; }
.onboarding-progress-track i { height: 100%; display: block; background: var(--primary); border-radius: inherit; }
.onboarding-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.onboarding-step { min-height: 42px; padding: 8px 10px; display: flex; align-items: center; gap: 9px; color: var(--ink); background: #fbfdff; border: 1px solid var(--border); border-radius: 7px; text-decoration: none; font-size: 11px; font-weight: 600; }
.onboarding-step:hover { border-color: #b8c9e2; background: #f7faff; }
.onboarding-check { width: 24px; height: 24px; flex: 0 0 24px; display: grid; place-items: center; color: var(--primary); background: #eaf2ff; border-radius: 50%; font-size: 10px; font-weight: 700; }
.onboarding-step.is-done { color: var(--muted); }
.onboarding-step.is-done .onboarding-check { color: var(--success); background: #e7f7ee; }
@media (max-width: 900px) { .onboarding-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .onboarding-card { padding: 14px; } .onboarding-intro { gap: 12px; } .onboarding-intro p { display: none; } .onboarding-steps { grid-template-columns: 1fr; } }


/* Dashboard onboarding + Quick Actions polish */
.quick-card { width: min(430px, 100%); }
.quick-card .quick-actions {
  padding: 4px 16px 17px;
  display: flex;
  align-items: flex-start;
  gap: 18px;
}
.quick-card .quick-action-link {
  width: 92px;
  min-width: 92px;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  appearance: none;
  border: 0;
  background: transparent;
  color: #263f64;
  font: inherit;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.quick-card .quick-action-icon {
  width: 43px;
  height: 43px;
  flex: 0 0 43px;
  display: grid;
  place-items: center;
  border-radius: 8px;
}
.quick-card .quick-action-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.quick-card .quick-action-icon.blue { color: #0867e9; background: #e5f0ff; }
.quick-card .quick-action-icon.green { color: #079447; background: #e1f7eb; }
.quick-card .quick-action-label {
  width: 100%;
  display: block;
  color: #263f64;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  white-space: nowrap;
}
.quick-card .quick-action-link:hover .quick-action-label { color: var(--primary); }
.quick-card .quick-action-link:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 4px;
  border-radius: 8px;
}
@media (max-width: 560px) {
  .quick-card .quick-actions { gap: 12px; }
}


/* Sales Rep password management */
.sales-rep-row-actions,.sales-rep-mobile-actions{display:inline-flex;align-items:center;justify-content:flex-end;gap:6px}.sales-rep-password-button{min-width:32px;height:32px;padding:0 7px;border:1px solid #dce5f0;border-radius:7px;background:#fff;color:#526b8e;font-size:10px;font-weight:700;cursor:pointer}.sales-rep-password-button:hover{border-color:#b9cbe1;color:#0867e9;background:#f7faff}.sales-rep-password-button:focus-visible{outline:2px solid #0867e9;outline-offset:2px}.sales-rep-password-modal{max-width:520px}.sales-rep-password-grid{padding:18px 22px 8px;display:grid;gap:15px}.sales-rep-password-note{margin:4px 22px 8px}

/* ChatGPT: Sales Reps desktop action-column repair */
@media (min-width: 769px) {
  .sales-rep-list-card .sales-reps-desktop-table {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
  }

  .sales-rep-list-card .sales-reps-desktop-table table {
    width: 100%;
    table-layout: fixed;
  }

  .sales-rep-list-card .sales-reps-desktop-table th:nth-child(1),
  .sales-rep-list-card .sales-reps-desktop-table td:nth-child(1) { width: 4%; }

  .sales-rep-list-card .sales-reps-desktop-table th:nth-child(2),
  .sales-rep-list-card .sales-reps-desktop-table td:nth-child(2) { width: 15%; }

  .sales-rep-list-card .sales-reps-desktop-table th:nth-child(3),
  .sales-rep-list-card .sales-reps-desktop-table td:nth-child(3) { width: 14%; }

  .sales-rep-list-card .sales-reps-desktop-table th:nth-child(4),
  .sales-rep-list-card .sales-reps-desktop-table td:nth-child(4) { width: 18%; }

  .sales-rep-list-card .sales-reps-desktop-table th:nth-child(5),
  .sales-rep-list-card .sales-reps-desktop-table td:nth-child(5),
  .sales-rep-list-card .sales-reps-desktop-table th:nth-child(6),
  .sales-rep-list-card .sales-reps-desktop-table td:nth-child(6) { width: 8%; }

  .sales-rep-list-card .sales-reps-desktop-table th:nth-child(7),
  .sales-rep-list-card .sales-reps-desktop-table td:nth-child(7) { width: 10%; }

  .sales-rep-list-card .sales-reps-desktop-table .sales-rep-actions-heading,
  .sales-rep-list-card .sales-reps-desktop-table .sales-rep-actions-cell {
    width: 15%;
    min-width: 150px;
    text-align: right;
  }

  .sales-rep-list-card .sales-reps-desktop-table td:nth-child(3),
  .sales-rep-list-card .sales-reps-desktop-table td:nth-child(4) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sales-rep-list-card .sales-rep-row-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    width: 100%;
    white-space: nowrap;
  }

  .sales-rep-list-card .sales-rep-password-button,
  .sales-rep-list-card .sales-rep-edit-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 5px 9px;
    border: 1px solid #d8e2ef;
    border-radius: 6px;
    background: #fff;
    color: #24415f;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    box-sizing: border-box;
  }
}

/* ChatGPT: Product add/edit modal alignment */
.product-form-grid { align-items: start; }

.product-form-grid .form-field > input,
.product-form-grid .order-picker-control {
  height: 39px;
  min-height: 39px;
  box-sizing: border-box;
}

.product-price-field { grid-column: 1; grid-row: 4; }
.product-stock-field { grid-column: 2; grid-row: 4; }
.product-commission-field { grid-column: 1; grid-row: 5; }

.product-image-field {
  grid-column: 2;
  grid-row: 5 / span 2;
  align-self: start;
}

.product-active-control {
  grid-column: 1;
  grid-row: 6;
  align-self: end;
}

.product-price-field,
.product-stock-field,
.product-commission-field {
  grid-template-rows: auto 39px minmax(12px, auto);
}

@media (max-width: 700px) {
  .product-price-field,
  .product-stock-field,
  .product-commission-field,
  .product-image-field,
  .product-active-control {
    grid-column: 1;
    grid-row: auto;
  }

  .product-price-field,
  .product-stock-field,
  .product-commission-field {
    grid-template-rows: none;
  }
}

/* Order Email policy controls — Business Settings */
.business-settings-modal .toggle-field {
    min-height: 64px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: start;
    column-gap: 10px;
    padding: 10px 0;
}

.business-settings-modal .toggle-field > .toggle-control {
    margin-top: 2px;
}

.business-settings-modal .toggle-field > span:last-child {
    min-width: 0;
    display: block;
}

.business-settings-modal .toggle-field > span:last-child > strong {
    display: block;
    margin: 0;
    color: var(--ink);
    font-size: 11px;
    line-height: 1.35;
}

.business-settings-modal .toggle-field > span:last-child > small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 9px;
    line-height: 1.45;
}

.business-settings-modal .form-section-title {
    padding-top: 12px;
}

@media (max-width:700px) {
    .business-settings-modal .toggle-field {
        min-height: 58px;
        grid-template-columns: 34px minmax(0, 1fr);
    }
}

/* AJAX modal submit working state */
.button[aria-busy="true"] {
    cursor: wait;
    opacity: .82;
    pointer-events: none;
}

/* Orders grouped by Sales Representative */
.order-groups { display:grid; gap:12px; }
.order-rep-group { overflow:hidden; background:#fff; border:1px solid #dbe4ee; border-radius:10px; box-shadow:var(--shadow); }
.order-rep-header { min-height:58px; padding:10px 15px; display:grid; grid-template-columns:38px auto 1fr 18px; align-items:center; gap:12px; cursor:pointer; list-style:none; }
.order-rep-header::-webkit-details-marker { display:none; }
.order-rep-header:focus-visible { outline:2px solid var(--primary); outline-offset:-2px; }
.order-rep-avatar { width:38px; height:38px; display:grid; place-items:center; color:#075cca; background:#dbeafe; border-radius:50%; font-size:12px; font-weight:700; }
.order-rep-group:nth-child(3n+2) .order-rep-avatar { color:#155e75; background:#cffafe; }
.order-rep-group:nth-child(3n) .order-rep-avatar { color:#5b21b6; background:#ede9fe; }
.order-rep-name { min-width:0; overflow:hidden; color:var(--ink); font-size:13px; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
.order-rep-metrics { min-width:0; display:flex; align-items:center; gap:8px; color:#526b8e; font-size:10px; }
.order-rep-metrics i { font-style:normal; }
.order-rep-metrics strong { color:#36567e; font-weight:600; }
.order-rep-chevron { width:8px; height:8px; justify-self:end; border-right:1.5px solid #17375f; border-bottom:1.5px solid #17375f; transform:rotate(225deg); transition:transform .15s ease; }
.order-rep-group:not([open]) .order-rep-chevron { transform:rotate(45deg); }
.order-group-table { margin:0 8px 8px; overflow-x:auto; border:1px solid var(--border); border-radius:8px; }
.order-group-table table { width:100%; min-width:720px; table-layout:fixed; }
.order-group-table th,.order-group-table td { padding:8px 10px; }
.order-group-table th:nth-child(1),.order-group-table td:nth-child(1){width:42px;}
.order-group-table th:nth-child(2),.order-group-table td:nth-child(2){width:14%;}
.order-group-table th:nth-child(3),.order-group-table td:nth-child(3){width:26%;overflow:hidden;text-overflow:ellipsis;}
.order-group-table th:nth-child(4),.order-group-table td:nth-child(4){width:15%;}
.order-group-table th:nth-child(5),.order-group-table td:nth-child(5){width:15%;}
.order-group-table th:nth-child(6),.order-group-table td:nth-child(6){width:11%;}
.order-group-table th:nth-child(7),.order-group-table td:nth-child(7){width:14%;}
.order-group-table th:last-child,.order-group-table td:last-child{width:30px;text-align:center;}
.order-date-stack,.order-date-stack span,.order-date-stack small { display:block; }
.order-date-stack small { margin-top:2px; color:#60748f; font-size:8px; }
.order-group-pagination { margin-top:12px; background:#fff; border:1px solid var(--border); border-radius:9px; }
.order-list-empty { padding:30px 16px; }

@media (max-width:1100px) {
  .order-rep-header { grid-template-columns:36px auto 1fr 16px; }
  .order-rep-avatar { width:36px; height:36px; }
  .order-group-table table { min-width:680px; }
}

@media (max-width:700px) {
  .order-groups { gap:9px; }
  .order-rep-header { min-height:56px; padding:9px 11px; grid-template-columns:34px minmax(0,1fr) 16px; gap:9px; }
  .order-rep-avatar { width:34px; height:34px; font-size:10px; }
  .order-rep-name { align-self:end; font-size:11px; }
  .order-rep-metrics { grid-column:2; align-self:start; gap:6px; font-size:9px; }
  .order-rep-chevron { grid-column:3; grid-row:1 / span 2; }
  .order-rep-group .orders-mobile-cards { padding:0 7px 7px; }
  .order-group-pagination { margin-top:9px; }
}

.button[aria-busy="true"] > span {
    vertical-align: middle;
}

.button-working-spinner {
    width: 13px;
    height: 13px;
    margin-right: 7px;
    display: inline-block;
    box-sizing: border-box;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: button-working-spin .7s linear infinite;
}

@keyframes button-working-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .button-working-spinner {
        animation-duration: 1.5s;
    }
}

/* Sales Rep status switches */
.sales-rep-form-modal .sales-rep-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.sales-rep-form-modal .sales-rep-active-control {
    grid-column: 1 / -1;
    grid-row: auto;
    position: relative;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 2px;
    align-items: center;
    width: 100%;
    min-height: 66px;
    margin: 0;
    padding: 12px 14px;
    box-sizing: border-box;
}

.sales-rep-form-modal .sales-rep-active-control > span {
    grid-column: 1;
    grid-row: 1 / 3;
    position: relative;
    display: block;
    width: 38px;
    height: 22px;
    margin: 0;
}

.sales-rep-form-modal .sales-rep-active-control > strong {
    grid-column: 2;
    grid-row: 1;
    display: block;
    margin: 0;
    line-height: 1.25;
}

.sales-rep-form-modal .sales-rep-active-control > small {
    grid-column: 2;
    grid-row: 2;
    display: block;
    margin: 0;
    line-height: 1.35;
    white-space: normal;
}

/* Explicitly keep BOTH status controls visible */
.sales-rep-form-modal .sales-rep-active-control:nth-of-type(1),
.sales-rep-form-modal .sales-rep-active-control:nth-of-type(2) {
    display: grid;
    visibility: visible;
    opacity: 1;
}

@media (max-width:700px) {
    .sales-rep-form-modal .sales-rep-form-grid {
        grid-template-columns: 1fr;
    }

    .sales-rep-form-modal .sales-rep-active-control {
        grid-column: 1;
    }
}



/* PRODUCT GALLERY FORM LAYOUT */
.product-gallery-field {
  grid-column: 1 / -1;
  grid-row: 7;
  min-width: 0;
  padding-top: 2px;
}

.product-gallery-field > span:first-child {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.product-gallery-optional {
  color: var(--muted);
  font-size: 9px;
  font-weight: 400;
}

.product-gallery-upload {
  min-width: 0;
  min-height: 44px;
  padding: 8px 10px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px 12px;
  box-sizing: border-box;
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.product-gallery-upload input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.product-gallery-upload-button {
  width: max-content;
  min-width: 112px;
  height: 34px;
  margin: 0;
  cursor: pointer;
}

.product-gallery-upload [data-product-gallery-name] {
  min-width: 0;
  overflow: hidden;
  color: #536b8e;
  font-size: 10px;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .product-gallery-field {
    grid-column: 1;
    grid-row: auto;
  }

  .product-gallery-upload {
    grid-template-columns: 1fr;
  }

  .product-gallery-upload-button {
    width: 100%;
    box-sizing: border-box;
  }
}


/* PRODUCT GALLERY MANAGEMENT */
.product-gallery-existing {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 10px;
}

.product-gallery-existing:empty {
  display: none;
}

.product-gallery-existing-item {
  width: 112px;
  padding: 7px;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 9px;
}

.product-gallery-thumb {
  width: 96px;
  height: 82px;
  overflow: hidden;
  background: #f8fafc;
  border-radius: 6px;
}

.product-gallery-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.product-gallery-item-actions {
  display: grid;
  grid-template-columns: 28px 28px 1fr;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
}

.product-gallery-move {
  min-width: 28px !important;
  width: 28px;
  height: 28px;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}

.product-gallery-delete {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 3px;
  color: #b42318;
  font-size: 9px;
  cursor: pointer;
}

.product-gallery-delete input {
  width: 13px;
  height: 13px;
  margin: 0;
}

.product-gallery-existing-item.is-delete {
  opacity: .42;
}

@media (max-width: 700px) {
  .product-gallery-existing-item {
    width: calc(50% - 5px);
  }

  .product-gallery-thumb {
    width: 100%;
    height: 100px;
  }
}


/* PRODUCT GALLERY CONTROLS UI V2 */

.product-gallery-existing {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(122px, 122px));
  gap: 10px;
  align-items: start;
}

.product-gallery-existing-item {
  width: 122px;
  padding: 7px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 9px;
}

.product-gallery-thumb {
  width: 106px;
  height: 88px;
  overflow: hidden;
  background: #f8fafc;
  border-radius: 6px;
}

.product-gallery-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.product-gallery-item-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 7px;
}

.product-gallery-order-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}

.product-gallery-move {
  width: 100% !important;
  min-width: 0 !important;
  height: 30px;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font-size: 14px;
  line-height: 1;
}

.product-gallery-delete {
  width: 100%;
  min-height: 30px;
  padding: 5px 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  box-sizing: border-box;
  color: #b42318;
  background: #fff5f4;
  border: 1px solid #f3c7c2;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}

.product-gallery-delete:hover {
  background: #feeceb;
}

.product-gallery-delete input {
  width: 13px;
  height: 13px;
  margin: 0;
  flex: 0 0 auto;
  accent-color: #b42318;
}

.product-gallery-existing-item.is-delete {
  opacity: .55;
  border-color: #e8aaa4;
}

.product-gallery-existing-item.is-delete
.product-gallery-delete {
  background: #feeceb;
  border-color: #e8aaa4;
}

@media (max-width: 700px) {
  .product-gallery-existing {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .product-gallery-existing-item {
    width: 100%;
  }

  .product-gallery-thumb {
    width: 100%;
    height: 96px;
  }
}

@media (max-width: 390px) {
  .product-gallery-existing {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* PRODUCT MODAL COMPACT DESKTOP/TABLET
   Keep Add/Edit Product usable without unnecessary internal scrolling. */
@media (min-width: 701px) and (min-height: 720px) {

  .product-form-modal .modal-card,
  .product-modal .modal-card {
    max-height: calc(100vh - 24px);
  }

  .product-form-grid {
    gap: 9px 14px;
  }

  .product-form-grid input:not([type="checkbox"]):not([type="file"]),
  .product-form-grid select {
    min-height: 38px;
    height: 38px;
  }

  .product-form-grid .form-help {
    margin-top: 2px;
    line-height: 1.15;
  }

  .product-form-image-row {
    min-height: 60px;
  }

  .product-form-image-preview {
    width: 76px;
    height: 60px;
  }

  .product-active-control {
    min-height: 48px;
    padding-top: 7px;
    padding-bottom: 7px;
  }

  .product-gallery-field {
    padding-top: 0;
  }

  .product-gallery-existing {
    gap: 8px;
    margin-bottom: 7px;
  }

  .product-gallery-existing-item {
    width: 112px;
    padding: 5px;
  }

  .product-gallery-thumb {
    width: 100px;
    height: 68px;
  }

  .product-gallery-item-actions {
    gap: 4px;
    margin-top: 4px;
  }

  .product-gallery-move {
    height: 26px;
  }

  .product-gallery-delete {
    min-height: 26px;
    padding: 3px 5px;
  }

  .product-gallery-upload {
    min-height: 40px;
    padding: 5px 9px;
  }

  .product-gallery-upload-button {
    height: 32px;
  }
}

/* Larger desktop: make the complete product editor comfortably fit. */
@media (min-width: 1000px) and (min-height: 760px) {

  .product-gallery-thumb {
    height: 62px;
  }

  .product-gallery-existing-item {
    width: 108px;
  }

  .product-gallery-existing {
    grid-template-columns: repeat(auto-fill, 108px);
  }
}

/* PRODUCT GALLERY PROFESSIONAL UI V3 */

/* Scroll remains functional where required, but browser scrollbar is hidden. */
.product-form-modal .modal-card,
.product-modal .modal-card,
.product-form-modal .modal-body,
.product-modal .modal-body {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.product-form-modal .modal-card::-webkit-scrollbar,
.product-modal .modal-card::-webkit-scrollbar,
.product-form-modal .modal-body::-webkit-scrollbar,
.product-modal .modal-body::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* Compact professional gallery cards. */
.product-gallery-existing {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
  margin: 0 0 8px;
}

.product-gallery-existing-item {
  width: 116px;
  padding: 5px;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 9px;
}

.product-gallery-image-stage {
  position: relative;
  width: 104px;
  height: 84px;
}

.product-gallery-thumb {
  width: 104px !important;
  height: 84px !important;
  overflow: hidden;
  background: #f8fafc;
  border-radius: 6px;
}

.product-gallery-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

/* Small circular navigation controls on image edges. */
.product-gallery-image-stage .product-gallery-move {
  position: absolute;
  z-index: 2;
  top: 50%;
  width: 24px !important;
  min-width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
  padding: 0 !important;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  color: #163b6d;
  background: rgba(255,255,255,.96);
  border: 1px solid #cbd8e8;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(15, 35, 60, .12);
  font-family: Arial, sans-serif;
  font-size: 19px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
}

.product-gallery-image-stage .product-gallery-move:hover {
  background: #eef5ff;
  border-color: #9eb8d8;
}

.product-gallery-move-left {
  left: 3px;
}

.product-gallery-move-right {
  right: 3px;
}

.product-gallery-item-actions {
  display: block;
  margin-top: 5px;
}

.product-gallery-delete {
  width: 100%;
  min-height: 25px;
  padding: 3px 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  box-sizing: border-box;
  color: #b42318;
  background: #fff7f6;
  border: 1px solid #f1c4bf;
  border-radius: 6px;
  font-size: 9px;
  font-weight: 600;
  cursor: pointer;
}

.product-gallery-delete:hover {
  background: #feeceb;
}

.product-gallery-delete input {
  width: 12px;
  height: 12px;
  margin: 0;
  accent-color: #b42318;
}

.product-gallery-existing-item.is-delete {
  opacity: .5;
  border-color: #e5aaa4;
}

/* Keep phone cards useful without oversized controls. */
@media (max-width: 700px) {
  .product-gallery-existing {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .product-gallery-existing-item {
    width: 100%;
  }

  .product-gallery-image-stage,
  .product-gallery-thumb {
    width: 100% !important;
    height: 86px !important;
  }
}

/* ============================================================
   PRODUCT MODAL — FINAL MODERN SCROLL ARCHITECTURE
   Outer modal never scrolls.
   Product card is the only scrolling surface.
   ============================================================ */

.modal-content:has(.product-form-modal) {
  width: min(780px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow: hidden !important;
  border-radius: 12px;
}

/* Product card owns scrolling instead of .modal-content. */
.product-form-modal {
  width: 100%;
  max-height: calc(100dvh - 32px);
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  border-radius: 12px;

  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: #c5cfdb transparent;
}

/* Chromium / Edge / Chrome */
.product-form-modal::-webkit-scrollbar {
  width: 6px;
}

.product-form-modal::-webkit-scrollbar-track {
  background: transparent;
}

.product-form-modal::-webkit-scrollbar-thumb {
  background: #c5cfdb;
  border-radius: 999px;
}

.product-form-modal::-webkit-scrollbar-thumb:hover {
  background: #9eacbd;
}

/* Header remains clean and visually detached from scrolling content. */
.product-form-modal > header {
  position: sticky;
  z-index: 20;
  top: 0;
  padding: 15px 20px;
  background: rgba(255, 255, 255, .98);
  border-bottom: 1px solid #e5ebf2;
  backdrop-filter: blur(8px);
}

/* Keep close control away from scrollbar edge. */
.product-form-modal > header .modal-close {
  flex: 0 0 auto;
  margin-right: 2px;
}

/* Form spacing */
.product-form-modal > form {
  padding: 14px 20px 16px;
}

/* Footer becomes a polished sticky action bar only when scrolling occurs. */
.product-form-modal footer {
  position: sticky;
  z-index: 20;
  bottom: -16px;
  margin: 14px -20px -16px;
  padding: 12px 20px 16px;
  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,.94),
      #fff 14px
    );
  border-top: 1px solid #edf1f5;
}

/* Do not reserve a permanent scrollbar gutter.
   The thin overlay scrollbar appears only when actually required. */
.modal-content:has(.product-form-modal),
.product-form-modal {
  scrollbar-gutter: auto;
}

/* Phone: near-full-screen sheet, same clean scrolling model. */
@media (max-width: 700px) {
  .modal-content:has(.product-form-modal) {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
    border-radius: 12px;
  }

  .product-form-modal {
    max-height: calc(100dvh - 16px);
    border-radius: 12px;
  }

  .product-form-modal > header {
    padding: 13px 14px;
  }

  .product-form-modal > form {
    padding: 12px 14px 14px;
  }

  .product-form-modal footer {
    bottom: -14px;
    margin: 12px -14px -14px;
    padding: 11px 14px 14px;
  }
}

/* ============================================================
   ORDER MANAGER PRODUCT MODAL ARCHITECTURE V4
   Shell: fixed
   Header: fixed
   Body: only scrolling region
   Footer: fixed
   ============================================================ */

/* The outer AJAX modal container must never scroll for Product. */
.modal-content:has(.product-form-modal) {
  width: min(780px, calc(100vw - 32px));
  max-height: calc(100dvh - 28px);
  overflow: hidden !important;
  border-radius: 12px;
}

/* Product card is a fixed flex shell, NOT a scrolling element. */
.product-form-modal {
  width: 100%;
  max-height: calc(100dvh - 28px);
  display: flex;
  flex-direction: column;
  overflow: hidden !important;
  box-sizing: border-box;
  background: #fff;
  border-radius: 12px;

  /* Undo previous experimental scrollbar rules. */
  scrollbar-width: auto;
}

/* ------------------------------------------------------------
   HEADER
   ------------------------------------------------------------ */
.product-form-modal > header {
  position: relative !important;
  top: auto !important;
  z-index: 2;
  flex: 0 0 auto;
  margin: 0;
  padding: 15px 20px !important;
  box-sizing: border-box;
  background: #fff !important;
  border-bottom: 1px solid #e5ebf2;
  backdrop-filter: none !important;
}

/* ------------------------------------------------------------
   FORM
   Form is also a flex shell.
   ------------------------------------------------------------ */
.product-form-modal > form {
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 0 !important;
  overflow: hidden;
}

/* ------------------------------------------------------------
   BODY — THE ONLY SCROLLING ELEMENT
   ------------------------------------------------------------ */
.product-form-modal .modal-scroll-body {
  min-height: 0;
  flex: 1 1 auto;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 14px 20px 16px;
  box-sizing: border-box;
  overscroll-behavior: contain;

  scrollbar-width: thin;
  scrollbar-color: #aeb9c7 transparent;
}

/* Modern subtle Edge / Chrome scrollbar */
.product-form-modal .modal-scroll-body::-webkit-scrollbar {
  width: 6px;
}

.product-form-modal .modal-scroll-body::-webkit-scrollbar-track {
  background: transparent;
}

.product-form-modal .modal-scroll-body::-webkit-scrollbar-thumb {
  background: #b8c3cf;
  border-radius: 999px;
}

.product-form-modal .modal-scroll-body::-webkit-scrollbar-thumb:hover {
  background: #8f9dab;
}

/* ------------------------------------------------------------
   FOOTER — NEVER SCROLLS
   ------------------------------------------------------------ */
.product-form-modal footer {
  position: relative !important;
  inset: auto !important;
  z-index: 2;
  flex: 0 0 auto;
  margin: 0 !important;
  padding: 12px 20px !important;
  box-sizing: border-box;
  background: #fff !important;
  border-top: 1px solid #e5ebf2;
}

/* Kill scrollbar behavior accidentally inherited from old V3 rules. */
.product-form-modal::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* ------------------------------------------------------------
   MOBILE
   Same architecture; only dimensions/padding change.
   ------------------------------------------------------------ */
@media (max-width: 700px) {
  .modal-content:has(.product-form-modal) {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
    border-radius: 12px;
  }

  .product-form-modal {
    max-height: calc(100dvh - 16px);
  }

  .product-form-modal > header {
    padding: 13px 14px !important;
  }

  .product-form-modal .modal-scroll-body {
    padding: 12px 14px 14px;
  }

  .product-form-modal footer {
    padding: 10px 14px !important;
  }
}


/* ============================================================
   ORDER MANAGER — SHARED PROFESSIONAL AJAX MODAL SHELL
   Product established the visual standard.
   Applies only to real .modal-card dialogs.
   Toasts, alerts, confirms, header popovers and image lightbox
   are intentionally excluded.
   ============================================================ */

/*
 * The AJAX host never scrolls.
 * Each modal card owns its layout.
 */
#app-modal .modal-content:has(.modal-card) {
  max-height: calc(100dvh - 28px);
  overflow: hidden;
  border-radius: 12px;
}

/*
 * Shared modal shell:
 * fixed header + flexible form/body + fixed footer.
 */
#app-modal .modal-card {
  max-height: calc(100dvh - 28px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border-radius: 12px;
}

/* Header never scrolls. */
#app-modal .modal-card > header {
  flex: 0 0 auto;
  margin: 0;
  padding: 14px 20px;
  box-sizing: border-box;
  background: #fff;
  border-bottom: 1px solid #e5ebf2;
}

#app-modal .modal-card > header h2 {
  line-height: 1.25;
}

#app-modal .modal-card > header .modal-close {
  flex: 0 0 auto;
}

/*
 * Forms become transparent flex shells.
 * Padding moves to .modal-scroll-body.
 */
#app-modal .modal-card > form {
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

/* Only the middle content scrolls. */
#app-modal .modal-card .modal-scroll-body {
  min-height: 0;
  flex: 1 1 auto;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 14px 20px 16px;
  box-sizing: border-box;
  overscroll-behavior: contain;

  scrollbar-width: thin;
  scrollbar-color: #aeb9c7 transparent;
}

#app-modal .modal-card .modal-scroll-body::-webkit-scrollbar {
  width: 6px;
}

#app-modal .modal-card .modal-scroll-body::-webkit-scrollbar-track {
  background: transparent;
}

#app-modal .modal-card .modal-scroll-body::-webkit-scrollbar-thumb {
  background: #b8c3cf;
  border-radius: 999px;
}

#app-modal .modal-card .modal-scroll-body::-webkit-scrollbar-thumb:hover {
  background: #8f9dab;
}

/* Footer remains permanently visible. */
#app-modal .modal-card footer {
  position: relative !important;
  inset: auto !important;
  z-index: 3;
  flex: 0 0 auto;
  margin: 0 !important;
  padding: 12px 20px !important;
  box-sizing: border-box;
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  background: #fff !important;
  border-top: 1px solid #e5ebf2;
}

/*
 * Destructive tenant dialogs have content outside their form.
 * Their scrolling body contains that content while the existing
 * form/footer behavior remains intact.
 */
#app-modal .tenant-delete-modal > .modal-scroll-body {
  flex: 1 1 auto;
}

/*
 * Undo older per-dialog overflow rules.
 * Search/result dropdowns retain their own internal scrolling.
 */
#app-modal .modal-content:has(.customer-form-modal),
#app-modal .modal-content:has(.category-form-modal),
#app-modal .modal-content:has(.sales-rep-form-modal),
#app-modal .modal-content:has(.sales-rep-password-modal),
#app-modal .modal-content:has(.user-admin-form-modal),
#app-modal .modal-content:has(.order-form-modal),
#app-modal .modal-content:has(.business-settings-modal),
#app-modal .modal-content:has(.assignment-form-modal),
#app-modal .modal-content:has(.assignment-bulk-modal),
#app-modal .modal-content:has(.order-email-modal),
#app-modal .modal-content:has(.tenant-delete-modal) {
  overflow: hidden !important;
}

/*
 * Business Settings previously allowed the whole overlay/content
 * to scroll. It now follows the same modal architecture.
 */
.app-modal:has(.business-settings-modal) {
  overflow: hidden;
}

.modal-content:has(.business-settings-modal) {
  max-height: calc(100dvh - 28px);
  overflow: hidden !important;
}

.business-settings-modal {
  max-height: calc(100dvh - 28px);
}

/*
 * Bulk assignment previously gave its entire form scrolling.
 * Shared modal-scroll-body is now the sole outer scrolling region.
 */
.assignment-bulk-modal form {
  overflow: hidden !important;
}

.assignment-bulk-modal .modal-scroll-body {
  display: flex;
  flex-direction: column;
}

.assignment-bulk-modal .modal-scroll-body .assignment-bulk-grid {
  flex: 0 0 auto;
}

/* Phone/tablet modal spacing */
@media (max-width: 700px) {
  #app-modal .modal-content:has(.modal-card) {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
  }

  #app-modal .modal-card {
    max-height: calc(100dvh - 16px);
  }

  #app-modal .modal-card > header {
    padding: 13px 14px;
  }

  #app-modal .modal-card .modal-scroll-body {
    padding: 12px 14px 14px;
  }

  #app-modal .modal-card footer {
    padding: 10px 14px !important;
  }

  .business-settings-modal {
    max-height: calc(100dvh - 16px);
  }
}

/* Product gallery reorder controls:
   clean by default, reveal on card hover/focus. */
@media (hover: hover) and (pointer: fine) {
  .product-gallery-image-stage .product-gallery-move {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-50%) scale(.88);
    transition:
      opacity .15s ease,
      transform .15s ease,
      visibility .15s ease;
  }

  .product-gallery-existing-item:hover
    .product-gallery-image-stage .product-gallery-move,
  .product-gallery-existing-item:focus-within
    .product-gallery-image-stage .product-gallery-move {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(-50%) scale(1);
  }
}

/* Touch devices have no reliable hover, so controls stay available. */
@media (hover: none), (pointer: coarse) {
  .product-gallery-image-stage .product-gallery-move {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

/* ============================================================
   ORDER MANAGER — CONTEXTUAL HELP
   Desktop: anchored to ? trigger like Notifications.
   Compact screens: viewport-contained panel below topbar.
   ============================================================ */

.header-control:has(> .help-button) {
  position: relative;
}

/* ---------- Desktop ---------- */

#help-popover {
  left: auto;
  right: 0;

  width: 400px;
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 88px);

  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;

  white-space: normal;
  overflow-wrap: break-word;
}

#help-popover *,
#help-popover *::before,
#help-popover *::after {
  box-sizing: border-box;
  min-width: 0;
}

.help-popover-head {
  padding: 14px 16px 12px;
  border-bottom: 1px solid #e5ebf2;
}

.help-popover-head strong {
  display: block;
  color: #294568;
  font-size: 14px;
  line-height: 1.4;
}

.help-popover-head small {
  display: block;
  margin-top: 2px;
  color: #71839a;
  font-size: 11px;
  line-height: 1.4;
}

.help-role {
  padding: 11px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #f8fafc;
  border-bottom: 1px solid #e5ebf2;
}

.help-role strong {
  color: #294568;
  font-size: 12px;
  line-height: 1.45;
}

.help-role span {
  color: #71839a;
  font-size: 11px;
  line-height: 1.45;
  text-align: right;
}

.help-context {
  margin: 13px 14px 6px;
  padding: 13px 14px;
  background: #f3f8fe;
  border: 1px solid #d8e6f6;
  border-radius: 8px;
}

.help-context small {
  display: block;
  margin-bottom: 4px;
  color: #1262c5;
  font-size: 10px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: .05em;
}

.help-context strong {
  display: block;
  margin-bottom: 5px;
  color: #294568;
  font-size: 13px;
  line-height: 1.4;
}

.help-context p,
.help-context li,
.help-tip p {
  color: #657b97;
  font-size: 12px;
  line-height: 1.5;
}

.help-context p,
.help-tip p {
  margin: 0;
}

.help-context ul {
  margin: 8px 0 0;
  padding-left: 18px;
}

.help-context li + li {
  margin-top: 3px;
}

.help-workflow {
  padding: 11px 15px 5px;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  column-gap: 9px;
  row-gap: 11px;
}

.help-workflow > span {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  color: #1262c5;
  background: #e9f2ff;
  border-radius: 50%;
  font-size: 10px;
  line-height: 1;
  font-weight: 700;
}

.help-workflow p {
  margin: 0;
  color: #71839a;
  font-size: 12px;
  line-height: 1.45;
}

.help-workflow p strong {
  display: block;
  margin-bottom: 1px;
  color: #294568;
  font-size: 12px;
  line-height: 1.4;
}

.help-tip {
  margin: 7px 15px 0;
  padding: 11px 0;
  border-top: 1px solid #e5ebf2;
}

.help-tip:last-child {
  margin-bottom: 9px;
}

.help-tip strong {
  display: block;
  margin-bottom: 4px;
  color: #294568;
  font-size: 12px;
  line-height: 1.4;
}

/* ---------- Tablet / mobile ---------- */

.mobile-search-button {
  display: none;
}

@media (max-width: 700px) {

  /*
   * Use a real button for mobile Search.
   * The desktop label/search field remains present but visually collapses
   * until the input receives focus.
   */
  .global-search-wrap {
    width: 34px;
    height: 34px;
    margin-left: auto;
  }

  .mobile-search-button {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
  }

  .mobile-search-button .search-icon {
    width: 19px;
    height: 19px;
  }

  .global-search-wrap > .search {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
  }

  /*
   * After the button focuses the real input, restore the existing
   * search field across the topbar.
   */
  .global-search-wrap:focus-within {
    position: static;
  }

  .global-search-wrap.mobile-search-open .mobile-search-button {
    visibility: hidden;
  }

  .global-search-wrap.mobile-search-open > .search {
    position: absolute;
    z-index: 1200;

    top: 9px;
    left: 48px;
    right: 116px;

    width: auto;
    height: 40px;

    padding: 0 11px;

    display: flex;
    align-items: center;

    opacity: 1;
    overflow: visible;
    pointer-events: auto;

    background: #fff;
    border: 1px solid #cad6e3;
    border-radius: 8px;
    box-shadow: 0 4px 14px rgb(15 23 42 / 8%);
  }

  .global-search-wrap.mobile-search-open > .search input {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .global-search-wrap.mobile-search-open > .search kbd {
    display: none;
  }

  .global-search-wrap:focus-within .search-results {
    position: fixed;

    z-index: 1201;
    top: 58px;
    left: 8px;
    right: 8px;

    width: auto;
    max-height: calc(100dvh - 68px);
  }

  /*
   * The old base mobile rule hides Help.
   * Restore the existing Help trigger.
   */
  .topbar-actions .help-button {
    display: grid !important;
    width: 34px;
    height: 34px;
    place-items: center;
  }

  /*
   * Help follows the same proven mobile popover model used by
   * Notifications/Profile: fixed below the header and inside viewport.
   */
  #help-popover {
    position: fixed;

    z-index: 1200;

    top: 58px;
    right: 8px;
    left: 8px;

    width: auto;
    max-width: none;

    max-height: calc(100dvh - 66px);

    overflow-x: hidden;
    overflow-y: auto;

    border-radius: 10px;
  }
}

@media (min-width: 701px) and (max-width: 900px) {

  #help-popover {
    position: fixed;

    z-index: 1200;

    top: 66px;
    right: 12px;

    width: min(400px, calc(100vw - 24px));
    max-width: none;
    max-height: calc(100dvh - 78px);

    overflow-x: hidden;
    overflow-y: auto;
  }
}