/* KLARO application system — shared by operator, manager, buyer, billing and support views. */
:root {
  --app-ink: var(--nav);
  --app-ink-2: var(--nav-2);
  --app-paper: var(--page);
  --app-surface: #ffffff;
  --app-line: var(--line);
  --app-line-dark: rgba(255,255,255,.14);
  --app-teal: var(--brand-teal);
  --app-teal-deep: var(--brand-teal-hover);
  --app-mint: var(--mint);
  --app-copy: var(--ink);
  --app-muted: var(--muted);
  --app-danger: var(--red-ink);
  --app-warning: var(--amber-ink);
  --app-success: var(--brand-green);
  --app-radius: 10px;
  --app-ease: cubic-bezier(.2,.7,.2,1);
  --primary: var(--app-teal);
  --primary-hover: var(--app-teal-deep);
  --accent-soft: var(--selected);
  --bg-body: var(--app-paper);
  --bg-surface: var(--app-surface);
  --text-main: var(--app-copy);
  --text-secondary: var(--app-muted);
  --text-light: var(--muted);
  --radius-md: var(--app-radius);
  --radius-lg: 14px;
}

html { background: var(--app-paper); }
body { min-width: 320px; color: var(--app-copy); background: var(--app-paper); font-family: var(--font-sans); line-height: 1.5; }
body.app-menu-open { overflow: hidden; }
.main-content { min-height: calc(100vh - 76px); padding: 108px 0 64px; background: var(--app-paper); }
.container { width: min(92vw, 1920px); max-width: none; padding: 0; }

/* Shared with the home header: transparent over the opening ink band, solid after scroll. */
.navbar { position: fixed; inset: 0 0 auto; z-index: 1000; height: 76px; padding: 0 32px; color: #fff; background: transparent; border: 0; border-bottom: 1px solid transparent; box-shadow: none; transition: background .3s var(--app-ease), border-color .3s var(--app-ease); }
.navbar.navbar--scrolled { padding: 0 32px; background: var(--app-ink); border-bottom-color: rgba(255,255,255,.12); box-shadow: none; }
.navbar-container { width: min(92vw, 1920px); max-width: none; height: 100%; display: flex; justify-content: space-between; gap: 20px; }
.navbar.navbar--scrolled .navbar-container { height: auto !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; }
.logo img { height: 32px; filter: none; }
.logo span { color: #fff; }
.nav-utility-cluster { display: flex; align-items: center; gap: 10px; min-width: 0; }
.nav-menu { gap: 8px; }
.nav-link { height: 40px; padding: 8px 18px; border-radius: 8px; color: var(--selected); font-size: 14px; font-weight: 500; }
.nav-link i { color: inherit; font-size: .9em; }
.nav-link:hover { color: var(--app-mint); background: rgba(255,255,255,.07); }
.nav-link.active { color: var(--app-mint); background: transparent; box-shadow: none; }
.mobile-menu-btn { width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.2); border-radius: 8px; color: #fff; }
.mobile-menu-btn:hover { color: var(--app-mint); background: color-mix(in srgb, var(--mint) 14%, transparent); }
.job-bell-btn { width: 40px !important; height: 40px !important; border: 1px solid rgba(255,255,255,.2) !important; border-radius: 8px !important; background: transparent !important; color: #fff !important; box-shadow: none !important; }
.job-bell-btn:hover, .job-notification-shell.is-open .job-bell-btn { color: var(--app-mint) !important; background: color-mix(in srgb, var(--mint) 14%, transparent) !important; border-color: color-mix(in srgb, var(--mint) 52%, transparent) !important; transform: none !important; }
.job-bell-dot { border-color: var(--app-ink) !important; }
.job-notification-panel { width: min(390px, calc(100vw - 32px)); border: 1px solid var(--app-line-dark); border-radius: 0; background: var(--app-ink-2); box-shadow: 0 24px 60px rgba(0,0,0,.36); backdrop-filter: none; -webkit-backdrop-filter: none; }
.job-notification-header { padding: 16px 18px; border-bottom: 1px solid var(--app-line-dark); background: var(--app-ink); }
.job-notification-header h4 { color: #fff; font-family: var(--font-sans); font-size: 14px; font-weight: 650; letter-spacing: -.02em; }
.job-notification-header p { color: #acc5be; font-size: 12px; line-height: 1.45; }
.job-notification-status { padding: 5px 8px; border: 1px solid rgba(255,143,143,.38); border-radius: 4px; background: color-mix(in srgb, var(--red) 15%, transparent); color: var(--red-line); font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.job-notification-status.is-muted { border-color: color-mix(in srgb, var(--mint) 32%, transparent); background: color-mix(in srgb, var(--mint) 10%, transparent); color: var(--app-mint); }
.job-notification-body { padding: 12px; gap: 16px; background: var(--app-ink-2); }
.job-notification-section-label { margin: 0 0 8px; color: #9cb6ae; font-size: 10px; font-weight: 700; letter-spacing: .1em; }
.job-notification-list { gap: 8px; }
.job-notification-item { padding: 12px; border: 1px solid var(--app-line-dark); border-radius: 0; background: var(--ink); gap: 8px; }
.job-notification-item.is-unseen { border-color: color-mix(in srgb, var(--mint) 45%, transparent); background: var(--ink); }
.job-notification-item.is-completed { border-left-color: var(--app-success); }.job-notification-item.is-failed { border-left-color: #ff8f8f; }.job-notification-item.is-active { border-left-color: var(--app-mint); background: var(--ink); }
.job-notification-item-title { color: var(--selected); font-size: 13px; font-weight: 650; }.job-notification-item-meta { color: #acc5be; font-size: 11px; }
.job-notification-actions { gap: 7px; }.job-notification-link, .job-notification-remove { min-height: 32px; padding: 6px 10px; border-radius: 6px; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.job-notification-link { border-color: var(--app-teal); background: var(--app-teal); }.job-notification-link:hover { border-color: var(--app-mint); background: var(--app-mint); color: var(--app-ink); }
.job-notification-remove { border-color: rgba(255,143,143,.48); background: transparent; color: var(--red-line); }.job-notification-remove:hover { border-color: #ff8f8f; background: color-mix(in srgb, var(--red) 18%, transparent); color: #fff; }
.job-notification-empty { padding: 34px 22px; border: 1px dashed rgba(172,197,190,.36); border-radius: 0; background: var(--ink); color: #acc5be; }.job-notification-empty i { width: 44px; height: 44px; margin-bottom: 12px; border-radius: 0; background: color-mix(in srgb, var(--mint) 12%, transparent); color: var(--app-mint); font-size: 1rem; }.job-notification-empty h5 { color: #fff; font-size: 14px; font-weight: 650; }.job-notification-empty p { font-size: 12px; line-height: 1.5; }
/* Observer context uses the same paper/ink system as the rest of the app;
   the legacy yellow strip made the top of every observer page feel detached. */
.observer-banner {
  margin: 88px auto 0;
  max-width: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--app-copy);
}
.observer-banner-inner {
  width: min(92vw, 1920px);
  margin: 0 auto;
  min-height: 64px;
  padding: 12px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(135deg, #ffffff 0%, var(--page) 100%);
  box-shadow: 0 3px 12px color-mix(in srgb, var(--nav) 6%, transparent);
  color: var(--app-copy);
}
.observer-banner-copy { gap: 12px; }
.observer-banner-copy i {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--selected);
  color: var(--app-teal);
  font-size: 14px;
}
.observer-banner-copy p {
  color: var(--app-copy);
  font-size: 14px;
  line-height: 1.45;
}
.observer-banner .observer-exit-link {
  min-height: 38px;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 8px !important;
  color: var(--app-copy);
  background: #ffffff;
  font-size: 12px !important;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.observer-banner .observer-exit-link:hover {
  border-color: var(--app-teal) !important;
  background: var(--selected);
  color: var(--app-ink);
}
.observer-banner + .main-content { padding-top: 20px; }

@media (max-width: 768px) {
  .observer-banner { margin-top: 80px; }
  .observer-banner-inner {
    align-items: stretch;
    gap: 12px;
    padding: 14px;
  }
  .observer-banner-copy { align-items: flex-start; }
  .observer-banner-copy i { margin-top: 1px; }
  .observer-banner .observer-exit-link { width: 100%; }
  .observer-banner + .main-content { padding-top: 16px; }
}

/* Type and common page furniture. */
h1, h2, h3, h4, h5, h6, .page-title, .card-title { color: var(--app-ink); font-family: var(--font-sans); letter-spacing: -.035em; }
h1, .page-title { font-weight: 650; }
.page-header, .page-header-bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 0 0 24px; margin-bottom: 28px; border-bottom: 1px solid var(--app-line); }
.page-header h1, .page-header-bar h1, .page-header-bar .page-title { margin: 0; font-size: clamp(1.75rem, 3vw, 2.45rem); line-height: 1; }
.page-header-subtitle, .page-subtitle { max-width: 68ch; margin: 9px 0 0; color: var(--app-muted); font-size: .94rem; }
.breadcrumb, .breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; color: var(--app-muted); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.breadcrumb a, .breadcrumbs a { color: var(--app-teal); text-decoration: none; }
.chapter, .section-kicker { color: var(--app-teal); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

/* Controls: consistent dimensions, semantic state colours, modest corners. */
button, input, select, textarea { font: inherit; }
.btn, .mk-btn { min-height: 42px; padding: 10px 16px; border: 1px solid transparent; border-radius: var(--app-radius); font-size: 12px; font-weight: 700; letter-spacing: .065em; text-transform: uppercase; box-shadow: none; }
.btn-primary, .mk-btn { background: var(--brand-green); color: #fff; }
.btn-primary:hover, .mk-btn:hover { color: #fff; background: var(--brand-green-hover); box-shadow: 0 10px 24px color-mix(in srgb, var(--brand-green) 18%, transparent); transform: translateY(-1px); }
.btn-secondary { background: #fff; border-color: var(--brand-teal); color: var(--brand-teal); }
.btn-secondary:hover { color: var(--brand-teal-hover); background: var(--selected); border-color: var(--brand-teal-hover); }
.btn-danger { background: var(--app-danger); color: #fff; }
.btn-danger:hover { background: var(--red-ink); color: #fff; }
.btn-sm { min-height: 34px; padding: 7px 11px; font-size: 11px; }
.btn-icon, .table-action-btn { min-width: 36px; padding: 8px; }
.invoice-client-add-action {
  display: flex !important;
  justify-content: flex-start !important;
  max-width: 100%;
  margin-top: 12px !important;
  text-align: left;
  white-space: normal;
  width: fit-content;
}
.payment-history-empty-action {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 12px 16px !important;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-weight: 400 !important;
  text-transform: none !important;
}
.payment-history-empty-action:hover {
  background: var(--section);
  color: var(--app-ink);
}
.payment-history-empty-action strong {
  color: var(--app-teal);
}
.payment-history-empty-action i {
  margin-right: 6px;
}
.form-label, label { color: var(--app-copy); font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.form-control, .form-input, .form-select, .modern-input, .editable-input, .filter-select, .filter-input, .table-search-input, select, input:not([type="checkbox"]):not([type="radio"]), textarea { min-height: 42px; color: var(--app-copy); background: #fff; border: 1px solid var(--line); border-radius: 6px; box-shadow: none; }
textarea { min-height: 96px; }
.form-control:focus, .form-input:focus, .form-select:focus, .modern-input:focus, .editable-input:focus, .filter-select:focus, .filter-input:focus, .table-search-input:focus, select:focus, input:focus, textarea:focus { outline: 3px solid color-mix(in srgb, var(--mint) 38%, transparent); outline-offset: 1px; border-color: var(--app-teal); box-shadow: none; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--app-teal); min-width: 16px; min-height: 16px; }
.form-group { margin-bottom: 18px; }
.form-note, .form-text, .help-text, .text-muted { color: var(--app-muted) !important; }
.filter-bar, .filter-row, .toolbar, .admin-toolbar, .table-summary-bar { display: flex; align-items: end; flex-wrap: wrap; gap: 12px; padding: 16px; margin-bottom: 16px; border: 1px solid var(--app-line); background: var(--section); }
.filter-label { display: block; margin-bottom: 5px; color: var(--app-muted); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

/* Cards, metrics, tables, and data states share the public-site border language. */
.card, .klaro-card, .modern-card, .main-card, .content-card, .chart-card, .form-panel, .context-card { border: 1px solid var(--app-line); border-radius: 0; background: var(--app-surface); box-shadow: none; }
.card:hover, .klaro-card:hover, .modern-card:hover { box-shadow: none; }
.card-header { min-height: 60px; padding: 16px 20px; background: var(--page); border-bottom: 1px solid var(--app-line); }
.card-body { padding: 20px; }
.card-title { font-size: 16px; font-weight: 650; }
.metric-card, .stat-card, .ar-metric-card, .stat-tile { border: 1px solid var(--app-line); border-radius: 0; background: #fff; box-shadow: none; }
.metric-card:hover, .stat-card:hover, .ar-metric-card:hover, .stat-tile:hover { border-color: var(--app-teal); box-shadow: inset 3px 0 0 var(--app-mint); transform: none; }
.metric-label, .stat-label, .ar-metric-card .label, .stat-tile-label { color: var(--app-muted); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.metric-value, .stat-number, .ar-metric-card .value, .stat-tile-value { color: var(--app-ink); font-weight: 650; letter-spacing: -.035em; }
.table-container, .table-responsive, .table-wrapper { border: 1px solid var(--app-line); border-radius: 0; background: #fff; box-shadow: none; overflow-x: auto; }
table, .klaro-table, .modern-table, .data-table { width: 100%; border-collapse: collapse; color: var(--app-copy); }
th, .klaro-table th, .modern-table th, .data-table th { padding: 12px 14px; color: var(--app-muted); background: var(--section); border-bottom: 1px solid var(--app-line); font-size: 10px; font-weight: 700; letter-spacing: .09em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.klaro-table th.select-col, th.select-col { background: var(--section) !important; }
td, .klaro-table td, .modern-table td, .data-table td { padding: 13px 14px; border-bottom: 1px solid var(--section); vertical-align: middle; }
tbody tr:hover { background: var(--page); }
tbody tr:last-child td { border-bottom: 0; }
.table-search-wrapper { border: 1px solid var(--line); border-radius: 0; background: #fff; }
.table-search-wrapper:focus-within { outline: 3px solid color-mix(in srgb, var(--mint) 38%, transparent); border-color: var(--app-teal); }
.table-search-input { border: 0 !important; outline: 0 !important; }
.badge, .status-badge, .row-badge, .badge-status { border-radius: 4px; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.pagination, .table-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 12px 16px; }
.pagination a, .pagination button, .pagination-btn { min-width: 34px; min-height: 34px; display: inline-grid; place-items: center; padding: 6px 9px; border: 1px solid var(--app-line); border-radius: 0; background: #fff; color: var(--app-copy); text-decoration: none; }
.pagination a:hover, .pagination button:hover, .pagination-btn:hover, .pagination-btn.active { border-color: var(--app-teal); background: var(--app-teal); color: #fff; }
.empty-state, .no-data-state, .chart-empty, .job-notification-empty { padding: 42px 24px; border: 1px dashed #afc0b8; border-radius: 0; background: var(--page); color: var(--app-muted); text-align: center; }
.empty-state i, .no-data-state i, .chart-empty i { color: var(--app-teal); }
.chart-wrapper { min-height: 300px; padding: 8px; border: 1px solid var(--app-line); border-radius: 0; background: #fff; }
.chart-header, .chart-header-copy { border-bottom: 1px solid var(--app-line); }
.chart-subtitle, .chart-note { color: var(--app-muted); }

/* Overlays and feedback. */
.modal-backdrop { z-index: 2000; display: grid; place-items: center; padding: 20px; background: color-mix(in srgb, var(--nav) 72%, transparent); backdrop-filter: blur(3px); }
.modal { width: min(100%, 720px); max-height: min(88vh, 860px); border: 1px solid color-mix(in srgb, var(--mint) 38%, transparent); border-radius: 0; background: #fff; color: var(--app-copy); box-shadow: 0 24px 80px rgba(0,0,0,.28); }
.modal-header, .modal-footer { padding: 16px 20px; border-color: var(--app-line); background: var(--page); }
.modal-header h5 { color: var(--app-ink); font-weight: 650; }
.modal-body { max-height: calc(88vh - 132px); padding: 20px; overflow: auto; }
.modal-close { width: 38px; height: 38px; border: 1px solid var(--app-line); border-radius: 0; color: var(--app-copy); background: transparent; }
.modal-close:hover { color: #fff; background: var(--app-ink); }

/* Export choices share the same flat, border-led language as the current
   application UI, regardless of which data page opens the modal. */
body .download-modal-panel {
  width: min(100%, 760px) !important;
  max-width: 760px !important;
  border: 1px solid var(--app-line) !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
}
body .download-modal-panel .download-modal-header {
  padding: 18px 20px !important;
  border-bottom: 1px solid var(--app-line) !important;
  background: var(--page) !important;
}
body .download-modal-panel .download-modal-title-wrap {
  gap: 12px !important;
}
body .download-modal-panel .download-modal-icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 0 !important;
  background: var(--app-teal) !important;
  box-shadow: none !important;
}
body .download-modal-panel .download-modal-kicker {
  margin-bottom: 3px !important;
  color: var(--app-teal) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
}
body .download-modal-panel .download-modal-title {
  color: var(--app-ink) !important;
  font-family: var(--font-sans) !important;
  font-size: 1rem !important;
  font-weight: 650 !important;
  letter-spacing: -.025em !important;
}
body .download-modal-panel .download-modal-subtitle {
  margin-top: 5px !important;
  color: var(--app-muted) !important;
  font-size: .84rem !important;
  line-height: 1.5 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}
body .download-modal-panel .download-modal-body {
  padding: 20px !important;
}
body .download-modal-panel .download-option-grid {
  gap: 12px !important;
}
body .download-modal-panel .download-option-card {
  min-height: 154px !important;
  padding: 16px !important;
  border: 1px solid var(--app-line) !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
  gap: 10px !important;
  transition: background .18s var(--app-ease), border-color .18s var(--app-ease) !important;
}
body .download-modal-panel .download-option-card:hover,
body .download-modal-panel .download-option-card:focus-visible {
  transform: none !important;
  border-color: var(--app-teal) !important;
  background: var(--page) !important;
  box-shadow: inset 3px 0 0 var(--app-mint) !important;
}
body .download-modal-panel .download-option-icon {
  width: 36px !important;
  height: 36px !important;
  border-radius: 0 !important;
  font-size: .9rem !important;
}
body .download-modal-panel .download-option-label {
  color: var(--app-ink) !important;
  font-family: var(--font-sans) !important;
  font-size: .88rem !important;
  font-weight: 650 !important;
}
body .download-modal-panel .download-option-copy {
  color: var(--app-muted) !important;
  font-size: .82rem !important;
  line-height: 1.5 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}
body .download-modal-panel .download-modal-note {
  margin-top: 12px !important;
  padding: 12px 14px !important;
  border: 1px solid var(--app-line) !important;
  border-radius: 0 !important;
  background: var(--section) !important;
  color: var(--app-muted) !important;
  font-size: .78rem !important;
  line-height: 1.5 !important;
}
body .download-modal-panel .modal-footer {
  padding: 14px 20px !important;
  border-top: 1px solid var(--app-line) !important;
  background: var(--page) !important;
}
@media (max-width: 600px) {
  body .download-modal-panel .download-modal-header,
  body .download-modal-panel .download-modal-body,
  body .download-modal-panel .modal-footer {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  body .download-modal-panel .download-option-card {
    min-height: 0 !important;
  }
}
.toast-container { top: 88px; right: 24px; z-index: 2300; width: min(390px, calc(100vw - 32px)); }
.toast { border: 1px solid var(--app-line-dark); border-left: 4px solid var(--app-mint); border-radius: 0; background: var(--app-ink-2); color: var(--selected); box-shadow: 0 12px 30px color-mix(in srgb, var(--nav) 24%, transparent); }
.toast-success { border-left-color: var(--app-success); }.toast-error { border-left-color: var(--app-danger); }
.toast-close { color: #acc5be; }.toast-close:hover { color: #fff; }
.loading-overlay { background: color-mix(in srgb, var(--nav) 72%, transparent); backdrop-filter: blur(2px); }
.spinner { border-color: rgba(255,255,255,.2); border-top-color: var(--app-mint); }
.app-live-region { position: fixed; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Page-family aliases retain the current templates while applying one visual system. */
.connect-search-card, .supplier-card, .verification-card, .connect-hub-card, .checkout-card, .sub-card, .team-card, .account-card, .scan-card, .upload-card, .error-card { border: 1px solid var(--app-line) !important; border-radius: 0 !important; background: #fff; box-shadow: none !important; }
.supplier-stat-grid, .summary-grid, .dashboard-grid, .metrics-grid { border-radius: 0; background: var(--section); }.supplier-stat, .summary-item { border-radius: 0; }
.manage-table-switcher { padding: 6px !important; border: 1px solid var(--app-line) !important; border-radius: 0 !important; background: var(--section) !important; box-shadow: none !important; }
.manage-table-tab, .tab-btn, .account-tab, .view-tab { min-height: 46px; padding: 9px 10px !important; border-radius: 0 !important; font-size: 13px !important; box-shadow: none !important; }.manage-table-tab.active, .account-tab.active, .view-tab.active { background: var(--app-teal) !important; color: #fff !important; }
.manage-table-tab-label { font-weight: 650 !important; }.manage-table-tab:hover { background: #fff !important; color: var(--app-teal) !important; }
.manage-table-tab.active:hover { background: var(--app-teal-deep) !important; color: #fff !important; }
.table-search-wrapper { padding: 8px 12px !important; border-bottom: 1px solid var(--app-line) !important; background: var(--page) !important; }
.table-search-wrapper i { left: 24px !important; font-size: 13px !important; }.table-search-input { min-height: 38px !important; padding: 7px 12px 7px 32px !important; border: 1px solid var(--line) !important; border-radius: 0 !important; font-size: 13px !important; font-weight: 400 !important; box-shadow: none !important; }
.instruction-modal .modal-footer .btn { min-height: 40px; padding: 9px 14px; font-size: 12px !important; letter-spacing: .065em; }
.view-switcher { border: 1px solid var(--app-line) !important; border-radius: 0 !important; box-shadow: none !important; }
.view-switcher .switch-btn { border-radius: 0 !important; }.view-switcher .switch-btn.active { border: 1px solid var(--app-line) !important; box-shadow: none !important; }

/* Keep the first working surface close to its page-heading divider. */
.page-header, .page-header-bar { margin-bottom: 16px; }
.full-height-container > .row:first-child .page-header-bar { margin-bottom: 16px !important; padding-bottom: 16px; }
.full-height-container > .row:first-child .col-12.mb-4 { margin-bottom: 16px !important; }

/* Page-level Scan surfaces are structural containers, not floating rounded cards. */
.scanner-card, .outlet-usage-panel { border: 1px solid var(--app-line) !important; border-radius: 0 !important; box-shadow: none !important; }

/* Keep the scan workflow focused on its controls and content rather than
   nested card chrome. The scanner shell still provides the page boundary. */
.scan-page-shell .image-bank-panel,
.scan-page-shell .preview-media-panel,
.scan-page-shell .preview-form-panel {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.scan-page-shell .outlet-usage-panel,
.scan-page-shell .outlet-usage-card {
  border-radius: 0 !important;
}

/* Scan controls keep the workflow quiet and explicit: the step label is ink,
   while saved settings is a single full-width action rather than another card. */
.scan-page-shell #stepIndicator { color: var(--app-ink) !important; }
.scan-page-shell .saved-settings-banner {
  margin: 0 0 18px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.scan-page-shell .saved-settings-btn {
  width: 100% !important;
  margin: 0 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* Edit pages group each source image into one quiet, outlined surface. The
   table and its controls share the same inner width as the image header. */
.edit-data-page .source-group-stack { gap: 20px; }
.edit-data-page .source-group-card {
  border: 1px solid var(--app-line) !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
}
.edit-data-page .source-group-header {
  padding: 16px 28px !important;
  border-bottom: 1px solid var(--app-line) !important;
  background: var(--page) !important;
}
.edit-data-page .source-group-body {
  padding: 16px 28px 24px !important;
}
.edit-data-page .source-group-icon,
.edit-data-page .client-group-card,
.edit-data-page .table-container {
  border-radius: 0 !important;
}
.edit-data-page .source-group-icon {
  border: 1px solid var(--app-line) !important;
}
.edit-data-page .source-group-view {
  width: 52px;
  height: 52px;
  border: 1px solid var(--app-line);
  border-radius: 14px;
  background: var(--page);
  color: var(--text-secondary);
  display: inline-flex;
  flex: 0 0 52px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  text-decoration: none;
}
.edit-data-page .source-group-view:hover {
  color: var(--primary);
  border-color: var(--primary);
  background: var(--accent-soft);
}
.edit-data-page .source-group-view span {
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1;
}
.edit-data-page .client-group-card {
  border: 1px solid var(--app-line) !important;
  background: #fff !important;
}
.edit-data-page .client-group-header {
  padding: 16px 20px !important;
  border-bottom: 1px solid var(--app-line) !important;
  background: var(--page) !important;
}
.edit-data-page .table-container {
  width: 100%;
  margin: 0;
  border-color: var(--app-line) !important;
  background: #fff !important;
}
.edit-data-page .image-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.edit-data-page .image-gallery > div {
  flex: 0 0 auto;
  padding: 12px;
  border: 1px solid var(--app-line);
  border-radius: 0;
  background: #fff;
}
.edit-data-page .image-gallery > .image-view-card {
  width: 100px;
  padding: 0 !important;
  border: 0 !important;
  background: transparent;
}
.edit-data-page .image-view-card {
  text-align: center;
}
.edit-data-page .image-view-control {
  width: 100%;
  max-width: 100%;
  height: 100px;
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--page);
  color: var(--text-secondary);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;
  box-sizing: border-box;
}
.edit-data-page .image-view-control:hover {
  color: var(--primary);
  border-color: var(--primary);
  background: var(--accent-soft);
}
.edit-data-page .image-view-control span {
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
}
.edit-data-page .image-view-label {
  max-width: 100px;
  margin-top: 4px;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 0.7rem;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.edit-data-page select.product-select,
.edit-data-page select.supply-select,
.edit-data-page .searchable-select.item-select .searchable-select-input,
.edit-data-page .searchable-select.item-select .searchable-select-option-main {
  text-transform: uppercase;
}
.edit-data-page .searchable-select.item-select .searchable-select-input::placeholder {
  text-transform: none;
}

/* Edit-page detail forms can be tucked away without removing their values. */
.details-section {
  position: relative;
}
.details-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.details-section-header > h5 {
  margin-bottom: 0 !important;
}
.details-section-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid #aebdb7;
  border-radius: 6px;
  background: #fff;
  color: var(--app-copy);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1;
  text-transform: uppercase;
}
.details-section-toggle:hover {
  border-color: var(--app-teal);
  background: var(--page);
  color: var(--app-teal-deep);
}
.details-section-toggle:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--mint) 38%, transparent);
  outline-offset: 2px;
}
.details-section.is-collapsed .details-section-content {
  display: none;
}
.details-section.is-collapsed .details-section-header {
  margin-bottom: 0 !important;
}

/* Sales document details use complete, equal-width rows at desktop sizes. */
.edit-data-page .invoice-details-grid {
  display: grid;
  gap: 12px 24px;
  margin-bottom: 12px;
}
.edit-data-page .invoice-details-primary-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.edit-data-page .invoice-details-secondary-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.edit-data-page .invoice-details-grid > * {
  min-width: 0;
}
@media (max-width: 767px) {
  .edit-data-page .invoice-details-grid {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .edit-data-page .invoice-details-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Inventory document fields follow the same paired-row layout as sales
   documents, sized for five header fields and three payment/cost fields. */
.edit-data-page .inventory-details-primary-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.edit-data-page .inventory-details-secondary-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 767px) {
  .edit-data-page .inventory-details-primary-grid,
  .edit-data-page .inventory-details-secondary-grid {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .edit-data-page .inventory-details-primary-grid,
  .edit-data-page .inventory-details-secondary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* A muted header remains a distinct, solidly outlined region. */
.card > .card-header, .modern-card > .card-header { border: 1px solid var(--line) !important; background: var(--page) !important; }

/* Page actions and reference controls should remain secondary to content. */
.page-header-actions .btn, .action-state-shell .btn, .page-instructions-btn, .outlet-context-btn { min-height: 36px !important; padding: 7px 12px !important; font-size: 11px !important; letter-spacing: .04em; }

/* Legacy page-local modal classes cannot reintroduce rounded corners. */
.modal, .modal-panel, .outlet-form-modal, .quick-add-modal-panel { border-radius: 0 !important; }

/* Manual financial-input dialogs are table editors, so give them enough room
   on desktop while keeping the table itself scrollable on narrow viewports. */
.manual-financial-modal {
  display: flex;
  flex-direction: column;
  max-height: min(90vh, 860px);
  width: min(calc(100vw - 32px), 960px) !important;
  max-width: 960px !important;
  min-width: 0;
  overflow: hidden;
}
.manual-financial-modal .manual-cogs-modal-body,
.manual-financial-modal .modal-panel-body {
  min-height: 0;
  overflow-y: auto;
}
.manual-financial-modal .manual-cogs-modal-body { flex: 1 1 auto; }
.manual-financial-modal .modal-footer { flex-shrink: 0; }
/* The Cash Flow footer lives inside its form.  Give that form the same
   header/body/footer layout as COGS so its actions never join the scrollable
   record list. */
#cashFlowSettingsModal form {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
#cashFlowSettingsModal .modal-panel-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.manual-table-actions {
  align-items: center;
  display: inline-flex;
  gap: 6px;
  justify-content: flex-end;
  white-space: nowrap;
}
.manual-cogs-table,
.manual-cash-flow-table,
.manual-history-table {
  border: 0;
}
.manual-cogs-table-wrap,
.manual-cash-flow-table-wrap {
  border: 1px solid var(--app-line, var(--line));
}
.manual-table-date-filter {
  display: flex;
  flex: 1 1 220px;
  flex-direction: column;
  gap: 6px;
  max-width: 280px;
}
.manual-table-date-filter span {
  color: var(--app-muted, var(--muted));
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.manual-table-date-filter input {
  box-sizing: border-box;
  height: 40px;
  min-height: 40px;
  padding: 8px 10px !important;
  width: 100%;
}
.manual-record-add {
  align-items: center;
  background: var(--primary);
  border: 1px solid var(--primary);
  color: #fff;
  display: inline-flex;
  gap: 6px;
  justify-content: center;
  min-height: 40px;
  padding: 8px 12px;
  white-space: nowrap;
}
.manual-record-add:hover,
.manual-record-add:focus-visible {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  color: #fff;
}
.manual-record-pagination {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  margin-top: 12px;
  min-height: 32px;
}
.manual-record-pagination[hidden] { display: none; }
.manual-record-pagination .pagination-info {
  color: var(--app-muted, var(--muted));
  font-size: .76rem;
}
.manual-record-pagination .pagination-controls {
  align-items: center;
  display: inline-flex;
  gap: 4px;
}
.manual-record-pagination button {
  align-items: center;
  background: #fff;
  border: 1px solid var(--app-line, var(--line));
  color: var(--primary);
  display: inline-flex;
  height: 30px;
  justify-content: center;
  min-width: 30px;
  padding: 4px 8px;
}
.manual-record-pagination button.active,
.manual-record-pagination button:hover:not(:disabled) {
  background: var(--accent-soft);
  border-color: var(--primary);
}
.manual-record-pagination button:disabled { cursor: not-allowed; opacity: .45; }
.manual-record-pagination .pagination-ellipsis { color: var(--app-muted); }
.manual-table-icon-btn {
  align-items: center;
  border-radius: 6px !important;
  cursor: pointer;
  display: inline-flex;
  height: 36px;
  justify-content: center;
  padding: 0 !important;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
  width: 36px;
}
.manual-table-icon-btn--history {
  background: #fff;
  border: 1px solid var(--app-line, var(--line));
  color: var(--app-teal, var(--primary));
}
.manual-table-icon-btn--history:hover,
.manual-table-icon-btn--history:focus-visible {
  background: var(--accent-soft, var(--selected));
  border-color: var(--app-teal, var(--primary));
}
.manual-table-icon-btn--delete {
  background: var(--red-soft);
  border: 1px solid var(--red-line);
  color: var(--app-danger, var(--red-ink));
}
.manual-table-icon-btn--delete:hover,
.manual-table-icon-btn--delete:focus-visible {
  background: var(--red-soft);
  border-color: var(--app-danger, var(--red-ink));
}
.manual-table-icon-btn:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--mint) 30%, transparent);
  outline-offset: 1px;
}
@media (max-width: 767px) {
  .manual-financial-modal {
    max-height: 85vh;
    width: calc(100vw - 20px) !important;
    max-width: none !important;
  }
  .manual-table-date-filter { max-width: none; }
  .manual-record-pagination { align-items: flex-start; flex-direction: column; }
}
/* In stacked mobile toolbars, the desktop date-filter basis must not become
   vertical whitespace between the date control and the add action. */
@media (max-width: 480px) {
  .manual-cogs-toolbar .manual-table-date-filter,
  .manual-cash-flow-toolbar .manual-table-date-filter {
    flex: 0 0 auto;
    height: auto;
  }
}

/* Outlet-management dialogs share the add/edit width; the Show Guide modal keeps the instruction-modal size. */
#outletModal .modal, #deleteOutletModal .modal, #outletCatalogueLimitModal .modal, #metadataOptionModal .modal, #supplyProductPromptModal .modal, #addMemberModal .modal, #editMemberModal .modal, #clientModal .modal, #editClientModal .modal, #addProductModal .modal, #editProductModal .modal, #supplyModal .modal, #expenseModal .modal, #expensePaymentModal .modal, #duplicateNameModal .modal { width: min(92vw, 860px) !important; max-width: 860px !important; }

/* Compact confirmation used after saving a supply: keep the copy rhythm tight
   and give both decisions the same visual weight at every viewport size. */
#supplyProductPromptModal .supply-product-prompt-modal .modal-panel-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 32px 20px !important;
}
#supplyProductPromptModal .supply-product-prompt-modal .modal-panel-body p {
  max-width: 68ch;
  margin: 0 !important;
  line-height: 1.5;
}
#supplyProductPromptModal .supply-product-prompt-modal .modal-panel-body p.text-muted {
  font-size: .9rem;
  line-height: 1.5;
}
#supplyProductPromptModal .supply-product-prompt-modal .modal-panel-footer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 12px;
  padding: 14px 32px 18px !important;
}
#supplyProductPromptModal .supply-product-prompt-modal .modal-panel-footer > .btn {
  width: 100%;
  min-height: 44px;
  margin: 0 !important;
}

/* Date History's edit dialog gets a readable desktop width and a two-column
   form while retaining a single-column flow on phones. */
#editRecordModal .edit-record-modal {
  width: min(100%, 760px) !important;
  max-width: 760px !important;
}
#editRecordModal .edit-record-modal #editRecordForm {
  display: flex;
  min-height: 0;
  flex-direction: column;
}
#editRecordModal .edit-record-modal .modal-body {
  padding: 24px 32px !important;
}
#editRecordModal .edit-record-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 18px;
}
#editRecordModal .edit-record-field {
  min-width: 0;
}
#editRecordModal .edit-record-field label {
  margin-bottom: 7px;
  line-height: 1.25;
}
#editRecordModal .edit-record-field input,
#editRecordModal .edit-record-field select,
#editRecordModal .edit-record-field textarea {
  min-height: 44px;
  box-sizing: border-box;
  border-radius: 6px;
}
#editRecordModal #editRecordNotes {
  min-height: 104px;
}
#editRecordModal .edit-record-field:has(#editRecordNotes) {
  grid-column: 1 / -1;
}
#editRecordModal .modal-footer {
  gap: 12px;
  padding: 14px 32px 18px;
}
#editRecordModal .modal-footer .btn {
  min-width: 120px;
}
@media (max-width: 767px) {
  #supplyProductPromptModal .supply-product-prompt-modal .modal-panel-body {
    padding: 20px 20px 18px !important;
  }
  #supplyProductPromptModal .supply-product-prompt-modal .modal-panel-footer {
    padding: 12px 20px 16px !important;
  }
  #editRecordModal .edit-record-modal .modal-body {
    padding: 20px !important;
  }
  #editRecordModal .edit-record-grid {
    grid-template-columns: 1fr;
    row-gap: 16px;
  }
  #editRecordModal .edit-record-field:has(#editRecordNotes) {
    grid-column: auto;
  }
  #editRecordModal .modal-footer {
    padding: 12px 20px 16px;
  }
}
@media (max-width: 480px) {
  #supplyProductPromptModal .supply-product-prompt-modal .modal-panel-footer {
    grid-template-columns: 1fr;
  }
  #editRecordModal .modal-footer .btn {
    min-width: 0;
    flex: 1 1 0;
  }
}
.instruction-modal-icon, .instruction-modal-highlight { border-radius: 0 !important; }
.sub-panel, .team-hero, .team-card, .checkout-info-panel, .checkout-pay-panel, .status-card, .setup-card { border: 1px solid var(--app-line) !important; border-radius: 0 !important; background: #fff !important; box-shadow: none !important; }
.sub-hero, .team-hero, .checkout-info-panel { background: var(--app-ink) !important; color: var(--page) !important; }.sub-hero h1, .team-hero h1, .checkout-info-panel h1 { color: #fff !important; }.sub-hero p, .team-desc, .checkout-info-tagline { color: var(--selected) !important; }
.sub-hero-kicker, .team-eyebrow, .checkout-info-kicker { color: var(--app-mint) !important; }.sub-faq-item { border-radius: 0 !important; border-color: var(--app-line) !important; }.team-kpi, .team-member { border-radius: 0 !important; border-color: var(--app-line) !important; box-shadow: none !important; }

/* Outlet catalogue: make every add/edit modal use one readable form rhythm. */
#addMemberModal .modal-panel-body > form,
#editMemberModal .modal-panel-body > form,
#clientModal .modal-panel-body > form,
#editClientModal .modal-panel-body > form,
#addProductModal .modal-panel-body > form,
#editProductModal .modal-panel-body > form,
#supplyModal .modal-panel-body > form,
#expenseModal .modal-panel-body > form,
#metadataOptionModal .modal-panel-body > form,
#duplicateNameModal .modal-panel-body > form,
#expensePaymentModal .modal-panel-body > form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
#addMemberModal .modal-panel-body .form-group,
#editMemberModal .modal-panel-body .form-group,
#clientModal .modal-panel-body .form-group,
#editClientModal .modal-panel-body .form-group,
#addProductModal .modal-panel-body .form-group,
#editProductModal .modal-panel-body .form-group,
#supplyModal .modal-panel-body .form-group,
#expenseModal .modal-panel-body .form-group,
#metadataOptionModal .modal-panel-body .form-group,
#duplicateNameModal .modal-panel-body .form-group,
#expensePaymentModal .modal-panel-body .form-group { margin-bottom: 0 !important; }
#addMemberModal .modal-panel-body .row,
#editMemberModal .modal-panel-body .row,
#clientModal .modal-panel-body .row,
#editClientModal .modal-panel-body .row,
#addProductModal .modal-panel-body .row,
#editProductModal .modal-panel-body .row,
#supplyModal .modal-panel-body .row,
#expenseModal .modal-panel-body .row,
#metadataOptionModal .modal-panel-body .row,
#duplicateNameModal .modal-panel-body .row,
#expensePaymentModal .modal-panel-body .row { row-gap: 16px; }
#addMemberModal .modal-panel-body .form-label,
#editMemberModal .modal-panel-body .form-label,
#clientModal .modal-panel-body .form-label,
#editClientModal .modal-panel-body .form-label,
#addProductModal .modal-panel-body .form-label,
#editProductModal .modal-panel-body .form-label,
#supplyModal .modal-panel-body .form-label,
#expenseModal .modal-panel-body .form-label,
#metadataOptionModal .modal-panel-body .form-label,
#duplicateNameModal .modal-panel-body .form-label,
#expensePaymentModal .modal-panel-body .form-label { display: block; margin: 0 0 7px; line-height: 1.25; }
#addMemberModal .modal-panel-body > form > hr,
#editMemberModal .modal-panel-body > form > hr,
#clientModal .modal-panel-body > form > hr,
#editClientModal .modal-panel-body > form > hr,
#addProductModal .modal-panel-body > form > hr,
#editProductModal .modal-panel-body > form > hr,
#supplyModal .modal-panel-body > form > hr,
#expenseModal .modal-panel-body > form > hr,
#metadataOptionModal .modal-panel-body > form > hr,
#duplicateNameModal .modal-panel-body > form > hr,
#expensePaymentModal .modal-panel-body > form > hr,
#addMemberModal .modal-panel-body > form > .btn,
#editMemberModal .modal-panel-body > form > .btn,
#clientModal .modal-panel-body > form > .btn,
#editClientModal .modal-panel-body > form > .btn,
#addProductModal .modal-panel-body > form > .btn,
#editProductModal .modal-panel-body > form > .btn,
#supplyModal .modal-panel-body > form > .btn,
#expenseModal .modal-panel-body > form > .btn,
#metadataOptionModal .modal-panel-body > form > .btn,
#duplicateNameModal .modal-panel-body > form > .btn,
#expensePaymentModal .modal-panel-body > form > .btn { margin: 0 !important; }
.member-mode-selector { margin: 0 !important; }
.member-mode-options { gap: 8px !important; }
.member-mode-options .btn { min-height: 38px; padding: 8px 12px; border: 1px solid #9eb2aa !important; border-radius: 0 !important; font-size: 11px; letter-spacing: .06em; }
.member-mode-options .btn-check:checked + .btn { border-color: var(--app-teal) !important; background: var(--app-teal) !important; color: #fff !important; box-shadow: none !important; }
.client-mode-selector { margin: 0 !important; }
.client-mode-options { gap: 8px !important; }
.client-mode-options .btn-check { position: absolute; clip: rect(0, 0, 0, 0); pointer-events: none; }
.client-mode-options .btn { min-height: 38px; padding: 8px 12px; border: 1px solid #9eb2aa !important; border-radius: 0 !important; font-size: 11px; letter-spacing: .06em; }
.client-mode-options .btn-check:checked + .btn { border-color: var(--app-teal) !important; background: var(--app-teal) !important; color: #fff !important; box-shadow: none !important; }
.modal-helper-callout, .supply-modal-helper { display: flex; align-items: flex-start; gap: 7px; margin: 0 !important; padding: 10px 12px; border: 1px solid var(--app-line); border-radius: 0; background: var(--page); font-size: 12px !important; line-height: 1.45 !important; }
.modal-helper-callout i, .supply-modal-helper i { margin: 3px 0 0 !important; color: var(--app-teal); }
.quick-add-modal-body .modal-helper-callout { margin: 12px 0 20px !important; }

/* The shared Add Client modal follows the same field rhythm on outlet and edit pages. */
.quick-add-client-modal .quick-add-modal-body form { display: flex; flex-direction: column; gap: 16px; }
.quick-add-client-modal .quick-add-modal-body form > * { margin-top: 0 !important; margin-bottom: 0 !important; }
.quick-add-client-modal .quick-add-modal-body .form-label { display: block; margin: 0 0 8px !important; line-height: 1.25; }
.quick-add-client-modal .quick-add-modal-body .quick-add-toggle-row { margin: 0 !important; }
.quick-add-client-modal .quick-add-modal-body .row { row-gap: 16px; }
.quick-add-client-modal .quick-add-modal-body #section_new_client > .row { margin-bottom: 0 !important; }
.quick-add-client-modal .quick-add-modal-body #section_existing_client,
.quick-add-client-modal .quick-add-modal-body #section_new_client { padding-top: 4px; }
.quick-add-client-modal .quick-add-modal-body #section_new_client .form-label { margin-top: 4px; }

/* Keep the client options attached to the field and inside the modal. The
   open modal body is allowed to show the panel beyond the field's own box. */
.quick-add-client-modal { overflow: visible !important; }
.quick-add-client-modal .quick-add-modal-body.client-dropdown-open { overflow: visible !important; }
.quick-add-client-modal .searchable-select { position: relative; z-index: 1; }
.quick-add-client-modal .searchable-select-input {
  width: 100%;
  min-height: 42px !important;
  padding: 9px 40px 9px 12px !important;
  border: 1px solid var(--line) !important;
  border-radius: 6px !important;
  background: #fff !important;
  color: var(--app-copy);
  font-size: 14px;
  line-height: 1.35;
}
.quick-add-client-modal .searchable-select-input:focus {
  border-color: var(--app-teal) !important;
  outline: 3px solid color-mix(in srgb, var(--mint) 38%, transparent) !important;
  outline-offset: 1px;
  box-shadow: none !important;
}
.quick-add-client-modal .searchable-select-panel {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: none;
  z-index: 20 !important;
  display: none;
  max-height: 228px;
  overflow-y: auto;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 18px 36px -24px color-mix(in srgb, var(--ink) 42%, transparent);
}
.quick-add-client-modal .searchable-select.open .searchable-select-panel { display: block; }
.quick-add-client-modal .searchable-select-panel .searchable-select-option { border-radius: 4px; }

/* Account settings use the same label-to-field and field-to-field spacing as app forms. */
.settings-card #passwordForm, .settings-card #usernameForm { display: flex; flex-direction: column; gap: 18px; }
.settings-card .password-fields, .settings-card .password-row { gap: 16px; }
.settings-card .password-fields .form-group { margin: 0; }
.settings-card .password-fields .form-label { display: block; margin: 0 0 7px; line-height: 1.25; }
.settings-card #usernameHint { display: block; margin-top: 6px; line-height: 1.4; }
.settings-card .account-actions { margin-top: 0; }

/* Inventory and Account actions stay compact, even where old page CSS is more specific. */
.reset-button, .retry-button { min-height: 34px; padding: 7px 11px; border-radius: 0; font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.inv-view-toggle, .inv-columns-dropdown { border-radius: 0 !important; }
.inv-view-toggle-btn, .inv-columns-btn { min-height: 34px; padding: 6px 10px; border-radius: 0 !important; font-size: 11px; letter-spacing: .03em; }
.logout-btn-container .btn, .account-actions .btn, .subscription-actions .btn { min-height: 38px; padding: 8px 13px; border-radius: 0; font-size: 11px; letter-spacing: .045em; }
.tab-navigation, .tab-button, .billing-page-btn, .copy-btn { border-radius: 0 !important; }
.tab-button { min-height: 38px; padding: 8px 10px; font-size: 12px; }

/* The dashboard chart picker is a first-class modal, not a rounded floating card. */
.cp-dialog { border: 1px solid var(--app-line); border-radius: 0 !important; box-shadow: 0 24px 80px color-mix(in srgb, var(--nav) 28%, transparent); }
.cp-open-btn, #chart-picker-modal .cp-btn-primary, #chart-picker-modal .cp-btn-secondary { min-height: 36px; padding: 7px 12px; border-radius: 6px !important; font-family: var(--font-sans); font-size: 11px; font-weight: 700; letter-spacing: .045em; line-height: 1.2; }
#chart-picker-modal .cp-footer { padding: 12px 20px 16px; }

/* Explicit keyboard affordances. */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--app-mint) !important; outline-offset: 2px; }

/* One subtle corner treatment for every interactive target in the authenticated app. */
button, input[type="button"], input[type="submit"], input[type="reset"], a[href], [role="button"] { border-radius: 6px !important; }

@media (max-width: 1080px) {
  .navbar, .navbar.navbar--scrolled { height: 68px; padding: 0 22px; }
  .navbar.navbar--scrolled .mobile-menu-btn { color: #fff; }
  .navbar-container { gap: 12px; }.main-content { padding-top: 92px; }
  .nav-menu { top: 68px; left: 0; right: 0; max-height: calc(100vh - 68px); padding: 12px 22px 22px; gap: 0; background: var(--app-ink-2); border: 0; border-top: 1px solid var(--app-line-dark); border-radius: 0; box-shadow: 0 18px 34px rgba(0,0,0,.3); }
  .nav-menu .nav-link { min-height: 48px; justify-content: flex-start; padding: 0 2px; border-bottom: 1px solid var(--app-line-dark); color: var(--selected); }
  .nav-menu .nav-link.active { box-shadow: none; color: var(--app-mint); }
  .page-header, .page-header-bar { align-items: flex-start; flex-direction: column; }
}

/* Only the title row drops the legacy outer gutter.  Content/chart rows keep
   their own grid gutters and column proportions. */
.scan-page-shell > .page-title-row,
.dashboard-page-shell > .page-title-row,
.inventory-page-shell > .page-title-row {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.scan-page-shell > .page-title-row > [class*="col-"],
.dashboard-page-shell > .page-title-row > [class*="col-"],
.inventory-page-shell > .page-title-row > [class*="col-"] {
  box-sizing: border-box;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
@media (max-width: 720px) {
  .container { width: auto; margin-left: 18px; margin-right: 18px; padding: 0; }.navbar-container { width: auto; margin-left: 22px; margin-right: 22px; }.main-content { padding-top: 88px; padding-bottom: 40px; }
  .page-header, .page-header-bar { margin-bottom: 20px; padding-bottom: 18px; }.page-header-actions { width: 100%; display: flex; flex-wrap: wrap; gap: 8px; }
  .card-header, .card-body { padding: 15px; }.filter-bar, .filter-row, .toolbar, .admin-toolbar, .table-summary-bar { align-items: stretch; padding: 12px; }
  .filter-bar > *, .filter-row > * { flex: 1 1 150px; }.table-container, .table-responsive, .table-wrapper { margin-left: -1px; margin-right: -1px; }
  .modal-backdrop { padding: 12px; }.modal { max-height: 92vh; }.modal-body { max-height: calc(92vh - 124px); padding: 16px; }.modal-footer { flex-wrap: wrap; }.modal-footer .btn { flex: 1; }
  th, .klaro-table th, .modern-table th, .data-table th { padding: 10px; } td, .klaro-table td, .modern-table td, .data-table td { padding: 11px 10px; }
  .chart-wrapper { min-height: 250px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }

/* Final cascade: page-local legacy selectors cannot give individual controls a different shape. */
body :is(button, input[type="button"], input[type="submit"], input[type="reset"], a[href], [role="button"], .btn):not(.radius-exempt) { border-radius: 6px !important; }
body button.payment-history-empty-action:not(.radius-exempt) { border-radius: 0 !important; }

/* Match the public shell: brand anchors left; controls anchor to the far edge. */
.navbar-container { display: flex !important; flex: 0 0 min(92vw, 1920px); width: min(92vw, 1920px) !important; max-width: none !important; margin: 0 auto !important; justify-content: space-between !important; }
.nav-utility-cluster { margin-left: auto !important; justify-content: flex-end !important; }
/* The public menu switches to its dark mobile panel at the same tablet breakpoint. */
@media (min-width: 1081px) and (max-width: 1200px) {
  .nav-menu { top: 76px; left: 0; right: 0; max-height: calc(100vh - 76px); padding: 12px 22px 22px; gap: 0; background: var(--app-ink-2); border: 0; border-top: 1px solid var(--app-line-dark); border-radius: 0; box-shadow: 0 18px 34px rgba(0,0,0,.3); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .nav-menu .nav-link { min-height: 48px; justify-content: flex-start; padding: 0 2px; border-bottom: 1px solid var(--app-line-dark); color: var(--selected); }
}
@media (max-width: 1080px) {
  .nav-menu .nav-link { border-bottom: 1px solid var(--app-line-dark) !important; }
  .page-header, .page-header-bar { justify-content: flex-start !important; align-content: flex-start; gap: 12px !important; }
  .page-header-actions { margin: 0 !important; }
}
@media (max-width: 720px) {
  .navbar-container { flex-basis: calc(100% - 44px); width: calc(100% - 44px) !important; margin: 0 !important; }
}

/* Match Home's scroll treatment while keeping the header geometry identical in
   both states. The app's opening ink band makes the transparent state read dark;
   the same ink surface is applied once the document reaches paper content. */
.navbar {
  background: transparent !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
  transition: background .3s var(--app-ease), border-color .3s var(--app-ease) !important;
}
.navbar.navbar--scrolled {
  background: var(--app-ink) !important;
  border-bottom-color: rgba(255,255,255,.12) !important;
  box-shadow: none !important;
}
.navbar.navbar--scrolled .navbar-container { height: 100% !important; }

/* Product and expense forms contain nested field groups, so give those groups
   the exact same rhythm as the direct fields in every Outlet add/edit dialog. */
#addProductModal .top-scroll-area,
#editProductModal .top-scroll-area {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
#addProductModal .top-scroll-area > .row,
#editProductModal .top-scroll-area > .row,
#addProductModal .component-scroll-area > .row,
#editProductModal .component-scroll-area > .row {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
#addProductModal .included-supplies-header,
#editProductModal .included-supplies-header { margin: 0 !important; }
#expenseModal .expense-form-grid,
#expensePaymentModal .expense-form-grid { gap: 16px !important; }

/* The outlet registration and duplication forms use the identical 16px grid,
   including their section titles, notes, labels, and controls. */
#outletModal .outlet-form-shell,
#duplicateOutletModal .modal-panel-body > form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
#outletModal .form-section-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--app-line);
  border-radius: 0;
  background: #ffffff;
}
#outletModal .outlet-modal-body { padding: 24px 28px 28px; }
#outletModal .form-section-title,
#outletModal .form-note { margin: 0 !important; }
#outletModal .form-grid,
#outletModal .location-grid { gap: 16px !important; }
#outletModal .form-group,
#duplicateOutletModal .form-group { margin: 0 !important; }
#outletModal .form-label,
#duplicateOutletModal .form-label {
  display: block;
  margin: 0 0 7px !important;
  line-height: 1.25;
}
#outletModal .form-control { border-radius: 6px; }
#duplicateOutletModal .modal-panel-body > form > .btn { margin: 0 !important; }

@media (max-width: 600px) {
  #outletModal .outlet-modal-body { padding: 18px !important; }
  #outletModal .form-section-panel { padding: 16px; }
}

/* Member forms have nested groups, so their internal fields use the same
   vertical rhythm as the outer add/edit dialog. */
#addMemberModal #section_new_user,
#addMemberModal #section_existing_user,
#addMemberModal .member-permissions-grid,
#editMemberModal .member-permissions-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
#addMemberModal .member-permissions-grid > .row,
#editMemberModal .member-permissions-grid > .row { row-gap: 12px; }
#addMemberModal .member-permissions-grid .form-group,
#editMemberModal .member-permissions-grid .form-group { margin: 0 !important; }

/* Creating a client has two catalogue guidance messages; both are visual
   callouts rather than loose helper text. */
.quick-add-client-modal .client-catalogue-reuse-note {
  margin: 0 !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}

/* On compact screens a page header is content-sized, not a viewport-height
   spacer. This keeps its action directly beneath the heading and full width. */
@media (max-width: 1080px) {
  .full-height-container > .row:first-child .page-header-bar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    align-items: start !important;
    align-content: start !important;
    justify-items: stretch !important;
    gap: 16px !important;
  }
  .full-height-container > .row:first-child .page-header-copy,
  .full-height-container > .row:first-child .page-header-actions,
  .full-height-container > .row:first-child .page-instructions-btn {
    width: 100% !important;
    max-width: none !important;
  }
  .full-height-container > .row:first-child .page-header-copy { flex: none !important; }
  .full-height-container > .row:first-child .page-header-actions { display: flex !important; align-items: stretch; }
  .full-height-container > .row:first-child,
  .full-height-container > .row:first-child > .col-12,
  .full-height-container > .row:first-child > .col-12.mb-4,
  .full-height-container > .row:first-child .page-header-bar {
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
  }
  .full-height-container > .row:first-child .page-header-bar {
    width: 100%;
    justify-content: flex-start !important;
  }
  .full-height-container > .row:first-child .page-header-actions {
    width: 100%;
    min-height: 0 !important;
  }
}

/* Interactive labels use one uppercase control vocabulary across the app.
   Keep ordinary body links readable while giving actions one responsive scale. */
body :is(button, input[type="button"], input[type="submit"], input[type="reset"], a[href], [role="button"]) {
  text-transform: uppercase !important;
}
body :is(button, input[type="button"], input[type="submit"], input[type="reset"], [role="button"], .btn, .mk-btn, .tier-detail-modal-btn, .job-notification-link, .job-notification-remove):not(.mobile-menu-btn):not(.job-bell-btn):not(.modal-close):not(.password-toggle):not(.btn-icon):not(.table-action-btn) {
  font-size: clamp(.72rem, .8vw, .82rem) !important;
  letter-spacing: .055em;
}

/* Sub-laptop navigation is full-bleed text, not an inset card. Keep the
   authenticated shell aligned with Home at every tablet and phone width. */
@media (max-width: 1200px) {
  .nav-menu {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 22px 24px 30px !important;
    gap: 0 !important;
    background: var(--app-ink-2) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .nav-menu li { width: 100%; }
  .nav-menu .nav-link,
  .nav-menu .nav-link:hover,
  .nav-menu .nav-link:active,
  .nav-menu .nav-link:focus {
    width: 100% !important;
    min-height: 48px;
    justify-content: center !important;
    padding: 12px 0 !important;
    border: 0 !important;
    border-bottom: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--selected) !important;
    text-decoration: none !important;
    transform: none !important;
  }
  .nav-menu .nav-link.active,
  .nav-menu .nav-link.active:hover,
  .nav-menu .nav-link.active:focus { color: var(--app-mint) !important; }
  .nav-menu .nav-btn,
  .nav-menu .nav-btn:hover,
  .nav-menu .nav-btn:focus {
    width: auto !important;
    min-height: 48px;
    margin: 0 auto !important;
    padding: 12px 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--selected) !important;
    text-decoration: none !important;
    transform: none !important;
  }
  .nav-menu .nav-link:focus-visible,
  .nav-menu .nav-btn:focus-visible { outline: 2px solid var(--app-mint) !important; outline-offset: 4px; }
}
@media (min-width: 1081px) and (max-width: 1200px) {
  .nav-menu { top: 76px !important; max-height: calc(100vh - 76px) !important; }
}
@media (max-width: 1080px) {
  .nav-menu { top: 68px !important; max-height: calc(100vh - 68px) !important; }
}

/* Final universal shell pass: width and navbar geometry do not change with
   scroll position, and compact navigation stays structural and quiet. */
.navbar,
.navbar.navbar--scrolled {
  background: var(--app-ink) !important;
  border-bottom: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: none !important;
  transition: none !important;
  padding: 0 32px !important;
}
.navbar.navbar--scrolled .navbar-container {
  height: 100% !important;
  width: min(92vw, 1920px) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.main-content > .container {
  width: min(92vw, 1920px) !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.main-content > .container > * { width: 100%; max-width: none; }
.main-content > .container > .row:first-child,
.main-content > .container > .full-height-container > .row:first-child {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.main-content > .container > .row:first-child > [class*="col-"],
.main-content > .container > .full-height-container > .row:first-child > [class*="col-"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
@media (max-width: 1080px) {
  .navbar,.navbar.navbar--scrolled { height: 68px; padding: 0 22px !important; }
  .navbar-container,.navbar.navbar--scrolled .navbar-container { width: 100% !important; flex: 1 1 auto; flex-basis: auto; margin: 0 !important; }
  .nav-menu { position: fixed !important; top: 68px !important; left: 0 !important; right: 0 !important; width: 100vw !important; max-width: none !important; margin: 0 !important; }
  .nav-menu .nav-link,
  .nav-menu .nav-link:hover { border-bottom: 0 !important; background: transparent !important; color: var(--selected) !important; }
  .nav-menu .nav-link.active,
  .nav-menu .nav-link.active:hover { color: var(--app-mint) !important; }
}
@media (max-width: 720px) {
  .main-content > .container { width: auto !important; margin-left: 18px !important; margin-right: 18px !important; }
  .navbar-container,.navbar.navbar--scrolled .navbar-container { width: 100% !important; flex-basis: auto; margin: 0 !important; }
}

/* The authenticated compact menu is a full-bleed viewport panel, matching
   the public Home menu instead of inheriting the old inset/frosted treatment. */
@media (min-width: 1081px) and (max-width: 1200px) {
  .nav-menu { position: fixed !important; top: 76px !important; left: 0 !important; right: 0 !important; width: 100vw !important; max-width: none !important; margin: 0 !important; }
}

/* Scan Notifications: a light, editorial popover that remains complete when
   there are no records.  Keep the panel intentionally separate from the dark
   application header so its content is easy to scan at every breakpoint. */
.job-notification-panel {
  width: min(620px, calc(100vw - 48px)) !important;
  border: 1px solid var(--app-line) !important;
  border-radius: 0 !important;
  background: var(--app-surface) !important;
  box-shadow: 0 18px 42px color-mix(in srgb, var(--nav) 18%, transparent) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.job-notification-panel-inner {
  max-height: min(72vh, 620px) !important;
  background: var(--app-surface);
}
.job-notification-header {
  align-items: center !important;
  padding: 22px 24px 20px !important;
  border-bottom: 1px solid var(--app-line) !important;
  background: var(--app-surface) !important;
}
.job-notification-header h4 {
  color: var(--app-ink) !important;
  font-family: var(--font-sans) !important;
  font-size: clamp(1.25rem, 2.1vw, 1.55rem) !important;
  font-weight: 650 !important;
  letter-spacing: -.045em !important;
  line-height: 1.1 !important;
}
.job-notification-header p {
  max-width: 38ch;
  margin-top: 6px !important;
  color: var(--app-muted) !important;
  font-size: .9rem !important;
  line-height: 1.45 !important;
}
.job-notification-header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.job-notification-status {
  flex-shrink: 0;
  padding: 6px 10px !important;
  border: 1px solid var(--mint) !important;
  border-radius: 4px !important;
  background: var(--selected) !important;
  color: var(--app-teal) !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.job-notification-status:not(.is-muted) {
  border-color: var(--red-line) !important;
  background: var(--red-soft) !important;
  color: var(--app-danger) !important;
}
.job-notification-body {
  min-height: 120px;
  padding: 20px 24px 24px !important;
  gap: 18px !important;
  background: var(--app-surface) !important;
}
.job-notification-section-label {
  margin: 0 0 12px !important;
  color: var(--muted) !important;
  font-size: .76rem !important;
  font-weight: 750 !important;
  letter-spacing: .12em !important;
}
.job-notification-list { gap: 12px !important; }
.job-notification-item {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px !important;
  padding: 15px 16px !important;
  border: 1px solid var(--app-line) !important;
  border-left: 4px solid var(--app-teal) !important;
  border-radius: 6px !important;
  background: #fff !important;
  box-shadow: none !important;
}
.job-notification-item.is-unseen {
  border-color: var(--mint) !important;
  border-left-color: var(--app-mint) !important;
  background: var(--selected) !important;
}
.job-notification-item.is-completed { border-left-color: var(--app-success) !important; }
.job-notification-item.is-failed { border-left-color: var(--app-danger) !important; }
.job-notification-item.is-active { border-left-color: var(--app-teal) !important; }
.job-notification-item-title {
  color: var(--app-copy) !important;
  font-size: .96rem !important;
  font-weight: 650 !important;
  line-height: 1.3 !important;
}
.job-notification-item-meta {
  margin-top: 4px !important;
  color: var(--app-muted) !important;
  font-size: .82rem !important;
  line-height: 1.4 !important;
}
.job-notification-actions {
  justify-content: flex-end !important;
  gap: 10px !important;
}
.job-notification-link,
.job-notification-remove,
.job-notification-clear-all {
  min-height: 36px !important;
  padding: 7px 13px !important;
  border-radius: 6px !important;
  font-size: .86rem !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  transition: background .2s ease, border-color .2s ease, color .2s ease !important;
}
.job-notification-link {
  border: 1px solid var(--app-teal) !important;
  background: var(--app-teal) !important;
  color: #fff !important;
}
.job-notification-link:hover {
  border-color: var(--app-teal-deep) !important;
  background: var(--app-teal-deep) !important;
  color: #fff !important;
  transform: none !important;
}
.job-notification-remove {
  border: 1px solid var(--red-line) !important;
  background: #fff !important;
  color: var(--app-danger) !important;
}
.job-notification-clear-all {
  margin-top: 0 !important;
  border: 1px solid var(--red-line) !important;
  background: #fff !important;
  color: var(--app-danger) !important;
  cursor: pointer;
}
.job-notification-remove:hover,
.job-notification-clear-all:hover {
  border-color: var(--app-danger) !important;
  background: var(--red-soft) !important;
  color: var(--app-danger) !important;
}
.job-notification-empty {
  display: grid !important;
  justify-items: center;
  min-height: 160px;
  padding: 26px 22px !important;
  border: 1px solid var(--app-line) !important;
  border-radius: 0 !important;
  background: var(--app-paper) !important;
  color: var(--app-muted) !important;
}
.job-notification-empty i {
  width: 42px !important;
  height: 42px !important;
  margin: 0 0 12px !important;
  border: 1px solid var(--mint);
  border-radius: 8px !important;
  background: var(--selected) !important;
  color: var(--app-teal) !important;
  font-size: .95rem !important;
}
.job-notification-empty h5 {
  margin: 0 0 8px !important;
  color: var(--app-copy) !important;
  font-size: 1rem !important;
  font-weight: 650 !important;
}
.job-notification-empty p {
  max-width: 42ch;
  margin: 0 !important;
  color: var(--app-muted) !important;
  font-size: .82rem !important;
  line-height: 1.55 !important;
}
@media (max-width: 1080px) {
  .job-notification-panel {
    position: fixed !important;
    top: 78px !important;
    left: 28px !important;
    right: 28px !important;
    width: min(620px, calc(100vw - 56px)) !important;
    max-width: 620px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Navbar labels and in-page tabs retain their readable title case. */
body :is(.navbar a[href], .nav-link, .nav-btn, .nav-menu a[href], .nav-center a[href], .sidebar-nav a[href], .sidebar-footer a[href], .manage-table-tab, .tab-btn, .account-tab, .view-tab, .tab-button, .filter-tab, .switch-btn, .footer a[href], .footer-links a[href], .legal-link, .policy-nav a[href]) {
  text-transform: none !important;
  letter-spacing: normal;
}

/* User-provided image names are content, not action labels. Preserve their
   original casing even when they appear inside selectable image buttons. */
body :is(.bank-ready-name, .bank-scanned-name, .bank-scanned-meta, .image-index, .preview-name-input, .collection-file-name) {
  text-transform: none !important;
}

/* The upload drop zone is descriptive content, not an uppercase action label. */
body :is(.image-bank-upload, .image-bank-upload-copy, .image-bank-upload-copy strong, .image-bank-upload-copy span) {
  text-transform: none !important;
  letter-spacing: normal;
}

/* Keep paired edit-page actions aligned vertically without changing their
   original content-based widths. */
.summary-bar-btn-strip > .action-state-shell > .btn,
.summary-bar-btn-strip > .btn {
  min-height: 42px !important;
  padding: 10px 16px !important;
  line-height: 1.2 !important;
  font-size: clamp(.72rem, .8vw, .82rem) !important;
}
@media (max-width: 620px) {
  .job-notification-panel {
    position: fixed !important;
    top: 78px !important;
    left: 28px !important;
    right: 28px !important;
    width: min(620px, calc(100vw - 56px)) !important;
    max-width: 620px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .job-notification-header { align-items: flex-start !important; padding: 18px 16px 16px !important; }
  .job-notification-header p { font-size: .9rem !important; }
  .job-notification-body { padding: 16px !important; }
  .job-notification-item { grid-template-columns: 1fr; gap: 12px !important; padding: 14px !important; }
  .job-notification-actions { justify-content: flex-start !important; }
}

/* Keep page content, guide controls, and dividers on the same responsive
   width as the authenticated navigation.  The narrower mobile gutter is
   intentional, but it must be shared by every page family. */
.main-content > .container,
.main-content > .container > .full-height-container,
.full-height-container,
.page-header-bar {
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
}
.page-header-actions,
.page-instructions-btn {
  box-sizing: border-box;
}

/* Edit-page row actions are icon-only controls, not text buttons.  Explicit
   flex centering keeps history/delete icons centered in their square hit area
   across every edit_* template and browser default button style. */
.btn-icon,
.table-action-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle;
  line-height: 1 !important;
  flex: 0 0 auto;
}
.btn-icon > i,
.table-action-btn > i {
  display: block;
  line-height: 1 !important;
  margin: 0 !important;
}
@media (max-width: 1080px) {
  .main-content > .container {
    width: calc(100% - 44px) !important;
    max-width: none !important;
    margin-left: 22px !important;
    margin-right: 22px !important;
  }
  .page-header-bar,
  .page-header-actions,
  .page-instructions-btn {
    width: 100% !important;
    max-width: none !important;
  }
  .page-header-actions {
    display: flex !important;
    flex: 1 1 100% !important;
    align-items: stretch !important;
  }
  .page-instructions-btn {
    flex: 1 1 auto !important;
  }
  .hero-actions-stack {
    width: 100% !important;
    align-items: stretch !important;
  }
  .hero-actions-stack > .hero-guide-btn,
  .hero-actions-stack > .action-state-shell {
    width: 100% !important;
    max-width: none !important;
    flex: 1 1 100% !important;
  }
  .hero-actions-stack > .action-state-shell > .btn {
    width: 100% !important;
  }

  /* Header rows collapse to one real column below laptop width.  This avoids
     the flex-basis reserved for desktop actions leaving a blank right rail. */
  .page-header-bar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
    justify-content: stretch !important;
    gap: 12px !important;
  }
  .page-header-copy,
  .page-header-actions {
    grid-column: 1 !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: none !important;
  }
  .page-header-actions {
    justify-content: flex-start !important;
  }
  .page-header-actions:not(:has(*)) {
    display: none !important;
  }
}

/* Match every compact page header to the Accounts Receivable layout before
   the mobile rules take over: the divider and each direct header action use
   the complete content column. */
@media (min-width: 1081px) and (max-width: 1200px) {
  .main-content > .container > .row:first-child,
  .main-content > .container > .full-height-container > .row:first-child,
  .main-content > .container > .row:first-child > [class*="col-"],
  .main-content > .container > .full-height-container > .row:first-child > [class*="col-"],
  .page-header-bar,
  .page-header-copy,
  .page-header-actions {
    min-width: 0 !important;
    width: 100% !important;
    max-width: none !important;
  }
  .page-header-bar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 12px !important;
  }
  .page-header-copy,
  .page-header-actions {
    grid-column: 1 !important;
  }
  .page-header-actions > .page-instructions-btn {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: none !important;
  }
}

/* A gated header action may be wrapped in an action-state shell.  Treat every
   direct header-action child as a full-width control at compact widths, so a
   wrapper cannot make its button narrower than the header divider. */
@media (max-width: 1200px) {
  .main-content > .container > .row:has(> [class*="col-"] > .page-header-bar),
  .main-content > .container > .full-height-container > .row:has(> [class*="col-"] > .page-header-bar) {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .main-content > .container > .row > [class*="col-"]:has(> .page-header-bar),
  .main-content > .container > .full-height-container > .row > [class*="col-"]:has(> .page-header-bar) {
    box-sizing: border-box !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .page-header-bar {
    width: 100% !important;
    max-width: none !important;
  }
  .page-header-bar .page-header-actions > * {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: none !important;
  }
  .page-header-bar .page-header-actions > .action-state-shell > .page-instructions-btn {
    width: 100% !important;
    max-width: none !important;
  }
  .page-header-bar .page-header-actions > .download-btn-row {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
  }
  .page-header-bar .page-header-actions > .download-btn-row > .action-state-shell {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: none !important;
  }
  .page-header-bar .page-header-actions > .download-btn-row .page-instructions-btn {
    width: 100% !important;
    max-width: none !important;
  }
  .date-range-form[data-demo-tour="statement-period"] {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }
  .date-range-form[data-demo-tour="statement-period"] input[type="date"] {
    width: 100% !important;
    min-width: 0 !important;
  }
  .date-range-form[data-demo-tour="statement-period"] > .page-instructions-btn {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: none !important;
  }
}

/* Scan's saved-settings action is intentionally sentence case, even though
   the rest of the shared action vocabulary is uppercase. */
body .scan-page-shell .saved-settings-btn {
  text-transform: none !important;
}

/* Ready, Processing, and Scanned are one status-pill group. */
body .scan-page-shell .image-bank-stat {
  border-radius: 999px !important;
  font-weight: 800 !important;
  text-transform: none !important;
}
body .scan-page-shell #readyBankStat {
  background: #fff !important;
  color: var(--brand-teal) !important;
}
body .scan-page-shell #readyBankStat.is-active {
  background: var(--app-teal) !important;
  border-color: var(--app-teal) !important;
  color: #fff !important;
}
body .scan-page-shell #readyBankStat,
body .scan-page-shell #processingBankStat,
body .scan-page-shell #scannedBankStat {
  border-radius: 999px !important;
  text-transform: none !important;
  font-weight: 800 !important;
}

/* Keep the wizard step heading on the same type scale as Review Photos. */
body .scan-page-shell #stepIndicator {
  font-size: 1rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: -.035em !important;
}

/* Compact the multiple-choice cards without reducing touch targets. */
body .scan-page-shell .choice-grid { gap: 8px !important; }
body .scan-page-shell .choice-label {
  padding: 14px 12px !important;
}
body .scan-page-shell .choice-label .choice-title {
  line-height: 1.25 !important;
}
body .scan-page-shell .choice-label .choice-meta {
  margin-top: 4px !important;
  line-height: 1.25 !important;
}
body .scan-page-shell .choice-label .choice-description {
  margin-top: 4px !important;
  line-height: 1.3 !important;
}
body .scan-page-shell .choice-label .choice-note {
  margin-top: 6px !important;
}

/* Data History view descriptions use the same squared information surface as
   the rest of the page, without a rounded green callout shape. */
body .history-view-description {
  border-radius: 0 !important;
}

/* Keep AI guidance directly on its white parent surface, with no nested alert box. */
body .ai-disclaimer {
  align-items: flex-start !important;
  gap: 12px !important;
  margin-top: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}
body .ai-disclaimer .ai-warning-icon {
  flex: 0 0 auto;
  color: var(--app-teal) !important;
}
body .ai-disclaimer-content {
  flex: 1 1 auto;
  min-width: 0;
}
body .ai-disclaimer-content .ai-warning-text {
  margin: 0 !important;
  color: var(--ink) !important;
}
body .ai-disclaimer-content .ai-warning-text strong {
  color: var(--ink) !important;
}
body .ai-disclaimer-content .ai-warning-text strong:not(:first-child) {
  display: inline !important;
  margin: 0 !important;
}
body .ai-disclaimer-toggle {
  display: inline-flex !important;
  align-items: center;
  margin: 10px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--app-teal) !important;
  cursor: pointer;
  font: inherit !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-transform: none !important;
}
body .ai-disclaimer-toggle:hover,
body .ai-disclaimer-toggle:focus-visible {
  color: var(--brand-teal-hover) !important;
}
body .ai-disclaimer-details {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--brand-teal) 18%, transparent);
  color: var(--muted);
  font-size: .85rem;
  line-height: 1.5;
}
body .ai-disclaimer-details p {
  margin: 0 0 8px;
}
body .ai-disclaimer-details p:last-child {
  margin-bottom: 0;
}
@media (max-width: 600px) {
  body .ai-disclaimer {
    gap: 10px !important;
    padding: 0 !important;
  }
  body .ai-disclaimer-details {
    font-size: .82rem;
  }
}

/* Keep row actions in the Outlets tab tables aligned with the start of their
   action column instead of centering them in the reserved cell width. */
body .manage-table-panel .table-actions-col {
  text-align: left !important;
}
body .manage-table-panel .table-actions {
  display: flex !important;
  justify-content: flex-start !important;
  width: 100%;
}

/* Review pages use one compact content gutter for every editable block.  The
   source-group body used to add a second, wider inset than its add-row panel,
   which made the cards look uneven at desktop widths. */
.edit-data-page .source-group-stack {
  gap: 12px !important;
}
.edit-data-page .source-group-header {
  padding-left: 18px !important;
  padding-right: 18px !important;
}
/* No bottom padding: the add-row panel's 12px top margin is the only gap
   between a table and its Add Row box, matching OpEx/Payroll/NSR pages. */
.edit-data-page .source-group-body {
  padding: 14px 18px 0 !important;
}
.edit-data-page .client-group-stack {
  gap: 12px !important;
}
.edit-data-page .source-group-add-zone {
  margin: 12px 18px 18px !important;
}
.edit-data-page .add-row-zone:not(.source-group-add-zone) {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.edit-data-page:not(:has(.source-group-stack)) .add-row-zone {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.edit-data-page:not(:has(.source-group-stack)) .table-container,
.edit-data-page:not(:has(.source-group-stack)) .table-summary-bar {
  width: 100% !important;
  box-sizing: border-box;
}
.edit-data-page .table-summary-bar {
  width: 100% !important;
  box-sizing: border-box;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.edit-data-page .summary-bar-btn-strip {
  justify-content: flex-end !important;
}
.edit-data-page .form-footer {
  width: 100% !important;
  box-sizing: border-box;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
}