:root {
  color-scheme: dark;
  --bg: #0b0c10;
  --surface: #13151b;
  --surface-raised: #1a1d25;
  --surface-hover: #222630;
  --line: #303541;
  --text: #f3f5f7;
  --muted: #a8b0bc;
  --soft: #7f8997;
  --accent: #d8a62a;
  --success: #3bc47d;
  --danger: #ef6575;
  --warning: #e3b448;
  --info: #68a7e8;
  --radius: 8px;
  --sidebar-width: 244px;
  /* Horizontal inset shared by the modal header, body and footer. Full-bleed
     rows inside the body (.detail-summary, .financial-context) negate it. */
  --modal-inset: 20px;
  --surface-2: var(--surface-raised);
  --surface-3: var(--surface-hover);
  --gold: var(--accent);
  --gold-2: var(--warning);
  --green: var(--success);
  --red: var(--danger);
  --blue: var(--info);
  font-family: "Noto Sans Hebrew", "Heebo", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
[role="button"],
summary {
  cursor: pointer;
  min-height: 44px;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--info);
  outline-offset: 2px;
}

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  border-left: 1px solid var(--line);
  background: var(--surface);
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: linear-gradient(145deg, var(--gold-2), #b77b00);
  color: #151006;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 20px;
}

.brand-title {
  font-weight: 800;
  font-size: 18px;
}

.brand-subtitle {
  color: var(--muted);
  font-size: 13px;
  margin-top: 2px;
}

.nav {
  display: grid;
  gap: 8px;
}

.nav button {
  border: 1px solid transparent;
  color: var(--muted);
  background: transparent;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: var(--radius);
  text-align: right;
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav button.active,
.nav button:hover {
  background: var(--surface-hover);
  border-color: var(--line);
  color: var(--text);
}

.icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  pointer-events: none;
}

.nav-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.badge-count {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--radius);
  background: var(--surface-hover);
  color: var(--text);
  display: inline-grid;
  place-items: center;
  font-size: 12px;
  margin-inline-start: auto;
}

.sidebar-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--soft);
  font-size: 12px;
}

/*
 * Collapsing the sidebar works at every width the sidebar itself exists at.
 * These rules used to live inside @media (max-width: 1199px), so above that the
 * toggle flipped the class and nothing matched it: a click with no effect.
 */
.app-shell.sidebar-collapsed {
  grid-template-columns: 72px minmax(0, 1fr);
}

.app-shell.sidebar-collapsed .desktop-sidebar {
  padding-inline: 12px;
  align-items: center;
}

.app-shell.sidebar-collapsed .desktop-sidebar .brand > :not(.brand-mark),
.app-shell.sidebar-collapsed .desktop-sidebar .sidebar-heading,
.app-shell.sidebar-collapsed .desktop-sidebar .user-panel {
  display: none;
}

/*
 * The destination label is hidden from the eye, not from the accessibility
 * tree: a collapsed navigation is a row of icons, and an icon-only button with
 * `display: none` on its only text has no accessible name at all.
 */
.app-shell.sidebar-collapsed .desktop-sidebar .nav-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.app-shell.sidebar-collapsed .desktop-sidebar .sidebar-tools,
.app-shell.sidebar-collapsed .desktop-sidebar .nav,
.app-shell.sidebar-collapsed .desktop-sidebar .nav button {
  width: 100%;
}

.app-shell.sidebar-collapsed .desktop-sidebar .nav button {
  justify-content: center;
  padding-inline: 0;
}

/* The count still shows, stacked on the icon rather than pushed to the edge. */
.app-shell.sidebar-collapsed .desktop-sidebar .nav .badge-count {
  margin-inline-start: 4px;
}

.app-shell.sidebar-collapsed .desktop-sidebar .brand {
  justify-content: center;
}

.app-shell.sidebar-collapsed .desktop-sidebar .sidebar-tools {
  justify-content: center;
}

.icon-button {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-raised);
  color: var(--text);
  display: inline-grid;
  place-items: center;
}

.icon-button:hover {
  background: var(--surface-hover);
}

.user-panel {
  margin-top: auto;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius);
  padding: 12px;
}

.user-name {
  font-weight: 700;
}

.user-meta {
  color: var(--muted);
  font-size: 12px;
  margin-top: 4px;
  line-height: 1.45;
}

.main {
  min-width: 0;
  padding: 24px 28px;
  overflow-x: hidden;
}

.page-container {
  width: min(100%, 1440px);
  margin-inline: auto;
}

.topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}

.page-title {
  margin: 0;
  font-size: 26px;
}

.page-kicker {
  color: var(--muted);
  margin-top: 7px;
  font-size: 14px;
}

.actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.btn {
  border: 1px solid var(--line);
  color: var(--text);
  background: var(--surface-2);
  border-radius: var(--radius);
  min-height: 44px;
  padding: 0 14px;
}

.btn.primary {
  border-color: var(--accent);
  background: var(--accent);
  color: #130e04;
  font-weight: 800;
}

.btn.ghost {
  background: transparent;
}

.btn.danger {
  color: var(--red);
}

.btn.success {
  color: var(--green);
}

.grid {
  display: grid;
  gap: 14px;
}

.stats-grid {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.stat {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius);
  padding: 16px;
  min-height: 94px;
}

.stat-label {
  color: var(--muted);
  font-size: 13px;
}

.stat-value {
  margin-top: 10px;
  font-size: 25px;
  font-weight: 800;
}

.stat-value.gold {
  color: var(--gold-2);
}

.stat-value.green {
  color: var(--green);
}

.stat-value.red {
  color: var(--red);
}

.stat-value.compact-value {
  font-size: 18px;
  line-height: 1.35;
}

.agent-quick-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.agent-quick-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.agent-primary-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.agent-context-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.agent-context-card {
  display: grid;
  align-content: start;
}

.context-highlight {
  color: var(--gold-2);
  font-size: 20px;
  white-space: nowrap;
}

.context-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 13px;
  margin-top: 9px;
}

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

.league-summary > div {
  display: grid;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-raised);
  padding: 12px;
}

.league-summary span {
  color: var(--muted);
  font-size: 12px;
}

.league-secondary {
  margin-top: 12px;
  color: var(--muted);
}

.league-secondary summary,
.agent-secondary-details summary {
  min-height: 40px;
  display: flex;
  align-items: center;
  cursor: pointer;
  color: var(--text);
  font-weight: 700;
}

.agent-secondary-details {
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 0 18px 18px;
}

.mobile-bottom-nav {
  display: none;
}

.section {
  margin-top: 16px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius);
  padding: 18px;
  min-width: 0;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.section-title {
  margin: 0;
  font-size: 19px;
}

.section-subtitle {
  color: var(--muted);
  font-size: 13px;
  margin-top: 5px;
}

.targets {
  grid-template-columns: repeat(4, minmax(180px, 1fr));
}

.target {
  border: 1px solid var(--line);
  background: var(--surface-2);
  border-radius: var(--radius);
  padding: 14px;
}

.target-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-weight: 800;
}

.progress {
  height: 8px;
  border-radius: var(--radius);
  background: #2a2c43;
  overflow: hidden;
  margin: 12px 0 8px;
}

.progress span {
  display: block;
  height: 100%;
  background: var(--success);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 12px;
}

.deal-step-indicator {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}

.deal-step-indicator span {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
}

.deal-step-indicator strong {
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: inline-grid;
  place-items: center;
  color: var(--text);
}

.deal-step-indicator .is-active {
  color: var(--text);
  font-weight: 700;
}

.deal-step-indicator .is-active strong {
  border-color: var(--accent);
  background: var(--accent);
  color: #130e04;
}

.deal-form-sections {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.deal-form-step {
  min-width: 0;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-raised);
  padding: 14px;
  display: grid;
  align-content: start;
  gap: 12px;
}

.deal-form-step legend {
  padding: 0 5px;
  color: var(--text);
  font-size: 15px;
  font-weight: 800;
}

.future-delivery-fields {
  display: grid;
  gap: 12px;
}

.future-delivery-fields[hidden] {
  display: none;
}

/* Step-to-step navigation, and only that: the submit button lives in the
   modal's footer, where there is one of it at every width. */
.deal-step-actions {
  display: none;
  gap: 8px;
}

.agent-history-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.agent-history-tabs {
  margin-top: 16px;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
}

.agent-history-records {
  min-width: 0;
}

.record-summary-footer {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 13px;
}

.record-summary-footer strong {
  color: var(--text);
  font-size: 14px;
}

.manager-note {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line)) !important;
}

.field {
  display: grid;
  gap: 7px;
}

.field label {
  color: var(--muted);
  font-size: 13px;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text);
  border-radius: var(--radius);
  min-height: 40px;
  padding: 0 11px;
}

.password-control {
  position: relative;
}

.password-control input {
  min-height: 44px;
  padding-inline-end: 52px;
}

.password-toggle {
  position: absolute;
  inset-inline-end: 0;
  top: 0;
  width: 44px;
  min-height: 44px;
  border: 0;
  border-inline-start: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  display: inline-grid;
  place-items: center;
}

.password-toggle:hover {
  color: var(--text);
  background: var(--surface-hover);
}

.field textarea {
  padding-top: 10px;
  min-height: 84px;
  resize: vertical;
}

.field.wide {
  grid-column: span 2;
}

.field.full {
  grid-column: 1 / -1;
}

/* The admin's on-behalf submission modals. `.field.wide` and `.field.full`
   already span a form-grid; the balance panel and the future-delivery group
   sit in the same grid and are not fields, so they take the same two spans by
   position rather than by being dressed up as fields they are not. */
.form-grid > .wide {
  grid-column: span 2;
}

.form-grid > .full {
  grid-column: 1 / -1;
}

.drawer-lead {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.field-hint {
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.filters {
  display: grid;
  grid-template-columns: repeat(5, minmax(130px, 1fr));
  gap: 10px;
}

.filters-wide {
  grid-template-columns: repeat(6, minmax(130px, 1fr));
}

.target-filters {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.fixed-filter-label {
  color: var(--muted);
  font-size: 13px;
}

.fixed-filter-value {
  min-height: 40px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  display: flex;
  align-items: center;
  font-size: 14px;
}

.target-filter-clear {
  align-content: end;
}

.target-filter-clear .btn {
  width: 100%;
}

.target-operations {
  display: grid;
  gap: 16px;
}

.manager-note-readonly {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 5px;
}

.manager-note-readonly span {
  color: var(--muted);
  font-size: 13px;
}

.filter-bar {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius);
  margin-bottom: 16px;
}

.filter-primary {
  display: grid;
  grid-template-columns: repeat(5, minmax(130px, 1fr));
  gap: 10px;
}

.employee-filters {
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) repeat(3, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

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

.filter-actions .badge-count {
  margin-inline-start: 6px;
}

.open-count {
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
}

.open-count strong {
  color: var(--text);
  font-size: 17px;
}

.workflow-tabs {
  width: fit-content;
  max-width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(128px, 1fr));
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.workflow-tabs button {
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
}

.workflow-tabs button.active {
  border-color: var(--line);
  background: var(--surface-hover);
  color: var(--text);
  font-weight: 700;
}

.workflow-tabs button span {
  margin-inline-start: 5px;
  color: var(--soft);
  font-size: 12px;
}

.filter-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 8px 0 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-raised);
  color: var(--muted);
  font-size: 13px;
}

.filter-chip button {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  display: inline-grid;
  place-items: center;
}

.filter-chip button:hover {
  background: var(--surface-hover);
}

.saved-view-bar {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(220px, 1fr) auto auto;
  align-items: end;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.work-queue,
.trend-grid {
  grid-template-columns: repeat(4, minmax(150px, 1fr));
}

.primary-metrics {
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  margin-top: 16px;
}

.report-tabs,
.organization-tabs {
  margin-top: 16px;
}

/* The base strip is a hard two-column grid, so the third tab — the cancelled
   pile — dropped onto a second row inside a box the width of one stat card.
   Named rather than widened in the base rule, because the two-tab strips that
   share the class look right as they are. */
.advance-tabs {
  grid-template-columns: repeat(3, minmax(116px, 1fr));
}

.organization-tabs {
  grid-template-columns: repeat(2, minmax(140px, 1fr));
}

.actions-menu {
  position: relative;
}

.actions-menu > summary {
  list-style: none;
}

.actions-menu > summary::-webkit-details-marker {
  display: none;
}

.actions-menu-popover {
  position: absolute;
  z-index: 8;
  inset-inline-end: 0;
  top: calc(100% + 6px);
  min-width: 170px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-raised);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3);
}

.actions-menu-popover .btn {
  width: 100%;
  justify-content: flex-start;
  display: flex;
  align-items: center;
  gap: 8px;
}

.secondary-data {
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.secondary-data > summary {
  min-height: 48px;
  padding: 13px 16px;
  color: var(--muted);
  cursor: pointer;
  font-weight: 700;
}

.secondary-data[open] > summary {
  border-bottom: 1px solid var(--line);
  color: var(--text);
}

.secondary-data .section {
  margin: 0;
  border: 0;
  border-radius: 0;
}

.secondary-data .section + .section {
  border-top: 1px solid var(--line);
}

.organization-section {
  margin-top: 16px;
}

.organization-records {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
}

.organization-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-raised);
  display: grid;
  gap: 14px;
}

.organization-card-heading {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

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

.organization-card h3 {
  margin: 0;
  font-size: 16px;
}

.organization-card-heading span:not(.status) {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  overflow-wrap: anywhere;
}

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

.organization-summary div {
  min-width: 0;
}

.organization-summary dt {
  color: var(--muted);
  font-size: 12px;
}

.organization-summary dd {
  margin: 4px 0 0;
  font-size: 14px;
  overflow-wrap: anywhere;
}

.organization-edit {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.switch-field {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
}

.switch-field input {
  width: 38px;
  height: 22px;
  accent-color: var(--success);
}

.drawer-assignment-list {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 8px;
}

.drawer-assignment-list span {
  color: var(--muted);
  font-size: 13px;
}

.work-item,
.trend-item {
  min-height: 88px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  color: var(--text);
  background: var(--surface-2);
  text-align: right;
}

.work-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.work-item:hover {
  border-color: var(--gold);
  background: var(--surface-3);
}

.work-item strong,
.trend-item strong {
  font-size: 24px;
}

.trend-item {
  display: grid;
  gap: 8px;
}

.trend-item > span:first-child {
  color: var(--muted);
  font-size: 13px;
}

.trend {
  color: var(--muted);
  font-size: 13px;
}

.trend.up {
  color: var(--green);
}

.trend.down {
  color: var(--red);
}

.table-input {
  min-width: 150px;
  width: 100%;
  min-height: 36px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  background: var(--surface-2);
}

button:disabled,
input:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.compact-form {
  grid-template-columns: repeat(3, minmax(140px, 1fr));
}

.table-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  max-width: 100%;
  min-width: 0;
}

.responsive-record-table .table-wrap {
  max-height: min(65vh, 680px);
}

@media (min-width: 1200px) {
  .responsive-record-table table:has(th.table-action-cell) {
    min-width: 100%;
    table-layout: fixed;
  }

  .responsive-record-table table:has(th.table-action-cell) th,
  .responsive-record-table table:has(th.table-action-cell) td {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .responsive-record-table .table-key-customer {
    width: 11%;
  }

  .responsive-record-table .table-key-department,
  .responsive-record-table .table-key-vehicle,
  .responsive-record-table .table-key-amount {
    width: 8%;
  }

  .responsive-record-table .table-key-date,
  .responsive-record-table .table-key-bonus,
  .responsive-record-table .table-key-approval,
  .responsive-record-table .table-key-delivery,
  .responsive-record-table .table-key-expected,
  .responsive-record-table .table-key-actual {
    width: 7%;
  }

  .responsive-record-table .table-key-agent {
    width: 6%;
  }

  .responsive-record-table .table-key-overdue {
    width: 5%;
  }

  .responsive-record-table .table-key-actions {
    width: 9%;
  }

  .agent-open-orders .responsive-record-table .table-key-actions {
    width: 16%;
  }

  [data-target-queue] .responsive-record-table .table-key-actions,
  [data-target-history] .responsive-record-table .table-key-actions {
    width: 14%;
  }

  /* THE SUGGESTIONS GRID HAS ITS OWN PROPORTIONS, and needs them.
     The percentages above were written for the deals table: thirteen narrow
     columns and one action cell holding a single פרטים button, so 9% is
     plenty. This table is seven wide columns and an action cell holding THREE
     buttons — the admin's three answers — and at 9% they were clipped by the
     `overflow: hidden` two rules up, which is how two of the three became
     unreachable without anybody deleting them. The shares below add to 100. */
  [data-link-suggestions] .responsive-record-table .table-key-kind {
    width: 14%;
  }

  [data-link-suggestions] .responsive-record-table .table-key-customer,
  [data-link-suggestions] .responsive-record-table .table-key-amounts {
    width: 12%;
  }

  [data-link-suggestions] .responsive-record-table .table-key-gap {
    width: 11%;
  }

  [data-link-suggestions] .responsive-record-table .table-key-source,
  [data-link-suggestions] .responsive-record-table .table-key-target {
    width: 13%;
  }

  [data-link-suggestions] .responsive-record-table .table-key-actions {
    width: 25%;
  }

  /* AND SO DOES THE LINKED-PAIRS GRID, for the opposite reason. It has four
     columns, three of which the deals percentages above happen to name — so it
     was laid out as 11% / 8% / 9% with the whole 72% remainder falling to
     `target`, which has no rule up there. FOUND IN A BROWSER: מחלקה at 8% of a
     1440px window is 88px, which clipped "מכירות פרונטליות" to "מכירות ..."
     while the column beside it held 792px of empty space.
     That was survivable while the widths were fixed. It is not survivable now
     that the admin can drag them, because the first drag seeds every column at
     its measured width — so that 72% column is where the dragging would start.
     The shares below add to 100. */
  [data-linked-pairs] .responsive-record-table .table-key-customer {
    width: 22%;
  }

  [data-linked-pairs] .responsive-record-table .table-key-department {
    width: 20%;
  }

  [data-linked-pairs] .responsive-record-table .table-key-target {
    width: 43%;
  }

  [data-linked-pairs] .responsive-record-table .table-key-actions {
    width: 15%;
  }
}

.table-controls {
  min-height: 38px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}

.table-controls select {
  min-height: 36px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-raised);
  color: var(--text);
}

.table-columns-button {
  min-height: 36px;
  padding: 0 10px;
  gap: 6px;
}

/* A stored width only means anything under a fixed layout, so the table becomes
   fixed the moment the user has one -- and not a moment earlier, so a table
   nobody has touched keeps exactly the proportions the rules above give it.
   The first drag seeds every column's measured width before it moves anything,
   which is what makes this switch invisible when it happens. */
.responsive-record-table table.table-sized {
  min-width: 100%;
  table-layout: fixed;
}

.responsive-record-table table.table-sized th,
.responsive-record-table table.table-sized td {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* `inset-inline-end` and not `left`: in this RTL table the columns run right to
   left, so a column's trailing edge -- the one that moves when it is resized --
   is its LEFT edge. The logical property puts the handle there without the
   stylesheet having to know which way the page runs, and puts it on the right
   automatically if a screen is ever rendered LTR. */
.column-resize-handle {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: 11px;
  z-index: 2;
  cursor: col-resize;
  /* The grab area is 11px so a pointer can find it; the line the user sees is
     2px, drawn with a pseudo-element in the middle of it. */
  touch-action: none;
}

.column-resize-handle::after {
  content: "";
  position: absolute;
  inset-block: 6px;
  inset-inline-end: 4px;
  width: 2px;
  border-radius: 2px;
  background: var(--line);
  transition: background 120ms ease;
}

.column-resize-handle:hover::after,
.column-resize-handle:focus-visible::after {
  background: var(--gold);
  inset-block: 2px;
}

.column-resize-handle:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}

/* During a drag the pointer is captured by the handle, but the text under it is
   still selectable and the cursor still changes per element it crosses. Both
   read as the drag having been lost. */
body.column-resizing {
  cursor: col-resize;
  user-select: none;
}

.column-picker-body {
  display: grid;
  gap: 12px;
}

.column-picker-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 4px;
}

.column-picker-option {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-raised);
  cursor: pointer;
}

.column-picker-option:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.6;
}

.column-picker-option input {
  width: 18px;
  height: 18px;
  accent-color: var(--gold);
}

.table-sort-button {
  width: 100%;
  min-height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  font-weight: inherit;
}

.table-sort-button .icon {
  width: 14px;
  height: 14px;
}

.table-action-cell {
  position: sticky;
  inset-inline-end: 0;
  z-index: 1;
  background: var(--surface);
  box-shadow: 1px 0 0 var(--line);
}

th.table-action-cell {
  z-index: 4;
  background: #151625;
}

tr.selected-row td.table-action-cell {
  background: #242017;
}

.record-card-list {
  display: none;
}

.record-card {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 14px;
}

.record-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.record-card h3 {
  margin: 0;
  font-size: 16px;
}

.record-card-amount {
  color: var(--gold-2);
  font-size: 19px;
  font-weight: 800;
}

.record-card-details {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 13px;
}

/*
 * Detail panels. They used to slide in against a screen edge; they are centred
 * modals now, on the same stack as the confirmation overlay above them. The
 * class names still read "drawer" because .drawer-header / .drawer-body /
 * .drawer-footer are shared hooks used by the advanced-filter sheet and the
 * mobile account sheet too — what changed is the presentation, not the markup.
 *
 * While one is open the page underneath does not move: without the lock below,
 * the wheel over the backdrop and PageDown with focus in the dialog scrolled
 * the screen behind instead of the modal. `:has` is already relied on
 * elsewhere in this file, so this needs no fallback.
 */
body:has(.drawer-backdrop),
body:has(.sheet-backdrop),
body:has(.confirmation-backdrop) {
  overflow: hidden;
}

.drawer-backdrop,
.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 30;
  padding: 24px;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.62);
}

.confirmation-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  padding: 20px;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.68);
}

.confirmation-dialog {
  width: min(440px, 100%);
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-raised);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.4);
}

.confirmation-dialog h2 {
  margin: 0;
  font-size: 19px;
}

.confirmation-dialog p {
  margin: 10px 0 20px;
  color: var(--muted);
  line-height: 1.6;
}

.confirmation-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.account-sheet-body {
  display: grid;
  gap: 18px;
}

.mobile-account-trigger {
  display: none;
}

.drawer,
.filter-sheet {
  width: min(720px, 100%);
  /* The dialog never grows past the backdrop's padding box: long content
     scrolls in the body so the title and the action row stay in view. */
  max-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}

/* The agent's "עסקה חדשה" window. Its three steps stand side by side above the
   phone breakpoint and 720px would squeeze them. One class, no extra
   specificity, so the phone rule below still flattens it to full-screen. */
.drawer-wide {
  width: min(1000px, 100%);
}

/*
 * No entrance animation, deliberately. render() rebuilds the whole document
 * from a template string, so every state change — a keystroke that revalidates
 * a field, a toast appearing — would replay it, and the modal would flash.
 */

.drawer-header {
  flex: 0 0 auto;
  min-height: 64px;
  padding: 14px var(--modal-inset);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.drawer-header h2 {
  margin: 0;
  font-size: 18px;
}

.drawer-body,
.filter-sheet-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  /* A long deal does not drag the page behind the modal along with it. */
  overscroll-behavior: contain;
  padding: 18px var(--modal-inset);
}

.drawer-footer {
  flex: 0 0 auto;
  min-height: 64px;
  padding: 12px var(--modal-inset);
  border-top: 1px solid var(--line);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}

.drawer-action-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.drawer-record-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.drawer-record-heading > div {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.drawer-record-heading strong {
  font-size: 18px;
}

.drawer-record-heading span:not(.status) {
  color: var(--muted);
  font-size: 13px;
}

.detail-summary,
.financial-context {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-block: 1px solid var(--line);
  margin-inline: calc(var(--modal-inset) * -1);
  padding-inline: var(--modal-inset);
}

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

.detail-summary > div,
.financial-context > div {
  min-width: 0;
  padding: 14px 10px;
  display: grid;
  gap: 5px;
}

.detail-summary > div + div,
.financial-context > div:nth-child(even) {
  border-inline-start: 1px solid var(--line);
}

.detail-summary span,
.financial-context span,
.read-only-details span {
  color: var(--muted);
  font-size: 12px;
}

.detail-summary strong,
.financial-context strong {
  overflow-wrap: anywhere;
  font-size: 15px;
}

.drawer-body .compact-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 18px;
}

.read-only-details {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
}

.read-only-details > div {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.read-only-details .full {
  grid-column: 1 / -1;
}

.read-only-details strong {
  overflow-wrap: anywhere;
  font-size: 14px;
}

.delivery-action {
  margin-top: 18px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-raised);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.delivery-action > div {
  display: grid;
  gap: 4px;
}

.delivery-action span {
  color: var(--muted);
  font-size: 13px;
}

/* Narrower than a deal modal: the advanced filters are a single column. */
.filter-sheet {
  max-width: 640px;
}

.toast {
  position: fixed;
  inset-inline-start: 24px;
  bottom: 24px;
  z-index: 40;
  max-width: min(360px, calc(100vw - 32px));
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-raised);
  color: var(--text);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
}

.toast.success {
  border-color: #21643d;
}

.toast.danger {
  border-color: #74313e;
}

.field-error {
  margin-top: 6px;
  color: var(--red);
  font-size: 13px;
  line-height: 1.4;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 840px;
}

table.density-compact th,
table.density-compact td {
  padding: 8px 10px;
}

th,
td {
  padding: 13px 12px;
  border-bottom: 1px solid #24263a;
  text-align: right;
  white-space: nowrap;
}

th {
  color: var(--muted);
  background: #151625;
  font-size: 13px;
  font-weight: 700;
}

.responsive-record-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #151625;
}

.responsive-record-table thead th.table-action-cell {
  z-index: 4;
}

tr:last-child td {
  border-bottom: 0;
}

.selected-row td {
  background: rgba(214, 162, 30, 0.08);
}

.status,
.tag {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  padding: 0 9px;
  font-size: 12px;
  color: var(--muted);
  background: var(--surface-2);
}

.status.waiting,
.tag.waiting {
  color: var(--gold-2);
  border-color: #6b5013;
}

.status.approved,
.tag.approved {
  color: var(--green);
  border-color: #21643d;
}

.status.rejected,
.tag.rejected {
  color: var(--red);
  border-color: #74313e;
}

.status.pipeline,
.tag.pipeline {
  color: var(--blue);
  border-color: #284f82;
}

.status.due,
.tag.due {
  color: var(--red);
  border-color: #74313e;
}

/* A RETRACTION READS AS ABSENCE, NOT AS AN OUTCOME.
   Deliberately the quietest badge on the page: muted text on a struck-through
   label, dimmer than the base .status it overrides. Every other status here is
   a position the record holds — waiting, approved, rejected, offset. Cancelled
   is the record having no position at all, so colouring it like a decision
   (and gold, like work still awaiting one, is what the advances table used to
   do) states something untrue about a row that counts towards nothing. */
.status.cancelled,
.tag.cancelled {
  color: var(--soft);
  border-color: var(--line);
  border-style: dashed;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

/* An offset advance is settled money and was wearing the waiting badge until
   the status class list became explicit. It is a completed outcome, so it
   reads like one, in the calm blue the pipeline already uses rather than in
   the green that means "earned and still owed". */
.status.offset,
.tag.offset {
  color: var(--blue);
  border-color: #284f82;
}

.manager-layout {
  grid-template-columns: 1fr;
}

.mini-stats {
  grid-template-columns: repeat(2, minmax(120px, 1fr));
}

/* THE CROSS-LINK SUGGESTIONS GRID.
   `.two-cols`, `.small-title` and `.suggestion` were deleted with the markup
   they styled: the suggestions and the linked pairs shared one section in a
   two-column grid, which gave the work list half the width and put it second
   in an RTL reading order. They are two full-width sections now, and the
   suggestions one is an ordinary responsive-records table, so it inherits the
   sorting, the resize handles, the picker and the card fallback for free.
   What is left here is the inside of four cells. */

/* One side of a pair: department, then who and what state, then which date
   this deal is showing and what kind of date that is. Stacked rather than
   inline because the two sides sit next to each other and a reader compares
   them line for line. */
.link-side {
  display: grid;
  gap: 2px;
  align-content: start;
}

.link-side .user-meta {
  font-size: 12px;
}

/* Two amounts above a verdict. Equal amounts are the single strongest sign
   that one sale was entered twice, so the words say it rather than leaving a
   reader to compare two formatted numbers in a narrow column. */
.link-amounts {
  display: grid;
  gap: 4px;
  justify-items: start;
}

.link-actions {
  gap: 6px;
}

/* `flex: 0 0 auto`, so a button that does not fit WRAPS rather than shrinking.
   With `flex-shrink: 1` they compressed instead, and because the cell clips its
   overflow at desktop widths the third answer read as "הת" — a label truncated
   into meaninglessness on a control whose whole job is to be unambiguous. */
.link-actions .btn {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 10px;
  white-space: nowrap;
}

/* FOUND IN A BROWSER, NOT IN A TEST, TWICE.
   Left to wrap, the three buttons stacked three deep in every row: an auto
   table lays a column out at its min-content width, which for a wrapping flex
   row is ONE button, so the column never asked for more and eight suggestions
   became a page four screens long. `flex-wrap: nowrap` fixed the height and
   broke something worse — the column then overflowed `.table-wrap`, and two of
   the three answers were reachable only by scrolling sideways.
   A min-width is the fix that addresses the actual cause: it is what the cell
   reports as its minimum, so the column is allocated the room for one row of
   buttons, and wrapping stays available for when a user drags the column
   narrower than that. */
td .link-actions {
  min-width: 264px;
}

.link-more {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

/* Both link windows show the pair side by side: rejecting asks which of the
   two, linking asks whether both are one sale. */
.link-pair-choice {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.link-card-sides {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin: 10px 0;
}

.link-card-gap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0;
  flex-wrap: wrap;
}

.info-list {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.info-list div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.info-list span {
  color: var(--muted);
  font-size: 13px;
}

.info-list strong {
  font-size: 13px;
}

.login-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.login-box {
  width: min(420px, 100%);
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius);
  padding: 28px;
}

.login-brand {
  justify-content: center;
  margin-bottom: 24px;
}

.login-box .btn {
  width: 100%;
  margin-top: 14px;
}

.boot-box {
  text-align: center;
}

.boot-loader {
  width: 28px;
  height: 28px;
  margin: 4px auto 0;
  border: 3px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: boot-spin 800ms linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  .boot-loader {
    animation: none;
    border-color: var(--accent);
  }
}

.empty {
  color: var(--muted);
  text-align: center;
  padding: 28px;
}

.list-state {
  min-height: 168px;
  padding: 28px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  color: var(--muted);
  text-align: center;
}

.list-state strong {
  color: var(--text);
  overflow-wrap: anywhere;
}

.list-state span {
  max-width: 56ch;
  overflow-wrap: anywhere;
}

.list-state-icon {
  width: 24px;
  height: 24px;
  color: var(--info);
}

.loading-state .list-state-icon {
  animation: list-state-spin 1s linear infinite;
}

.error-state .list-state-icon {
  color: var(--danger);
}

.disabled-reason {
  grid-column: 1 / -1;
  margin: 0;
  padding: 10px 12px;
  border-inline-start: 3px solid var(--warning);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

@keyframes list-state-spin {
  to {
    transform: rotate(360deg);
  }
}

.notice {
  border: 1px solid #654f1d;
  background: #1d1a11;
  color: var(--gold-2);
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 14px;
}

/* The month scope is a default, so the one thing it must never be is quiet
   about what it is holding back. Warning colours, its own icon, and the way
   out of the scope sitting inside the banner itself. */
/* SAME BANNER, SECOND REASON. The link-suggestion alert on the dashboard is
   the month banner's twin — work the screen is not showing, named, with one
   button that takes you to it — so it wears the same rules rather than a
   second set that can drift from them. */
.month-scope-alert,
.link-suggestion-alert {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  border-color: var(--gold);
  border-inline-start-width: 4px;
  font-weight: 700;
}

.month-scope-alert > span,
.link-suggestion-alert > span {
  flex: 1 1 220px;
  min-width: 0;
}

.month-scope-alert .icon,
.link-suggestion-alert .icon {
  flex: none;
}

.month-scope-alert .btn,
.link-suggestion-alert .btn {
  flex: none;
  background: transparent;
  border-color: var(--gold);
  color: var(--gold-2);
}

.month-scope-select {
  max-width: 100%;
}

/* NOT A WARNING. It sits on a record whose retraction the admin is looking at
   deliberately, so it borrows .notice's shape and drops its alarm colours:
   gold here would put the same emphasis on "this is what cancelled means" as
   the month-scope banner puts on "work you cannot see". */
.cancelled-record-notice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 12px 0 14px;
  border-color: var(--line);
  background: var(--surface-2);
  color: var(--muted);
  font-weight: 400;
}

.cancelled-record-notice > span {
  flex: 1 1 auto;
  min-width: 0;
}

.cancelled-record-notice .icon {
  flex: none;
  margin-top: 2px;
  color: var(--soft);
}

.restricted-access {
  min-height: 320px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  max-width: 680px;
  margin: 40px auto;
  padding: 32px;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.restricted-access > .icon {
  width: 34px;
  height: 34px;
  color: var(--warning);
}

.restricted-access h2,
.restricted-access p {
  margin: 0;
}

.restricted-access p {
  max-width: 520px;
  color: var(--muted);
  line-height: 1.6;
}

@media (min-width: 768px) and (max-width: 1199px) {
  .responsive-record-table .table-column-secondary {
    display: none;
  }

  .responsive-record-table tbody .table-action-cell {
    position: static;
    box-shadow: none;
  }

  .responsive-record-table table {
    min-width: 100%;
    table-layout: fixed;
  }

  .responsive-record-table th,
  .responsive-record-table td {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .responsive-record-table .table-key-agent {
    width: 12%;
  }

  .responsive-record-table .table-key-customer {
    width: 25%;
  }

  .responsive-record-table .table-key-amount,
  .responsive-record-table .table-key-bonus {
    width: 15%;
  }

  .responsive-record-table .table-key-approval {
    width: 14%;
  }

  .responsive-record-table .table-key-actions {
    width: 19%;
  }
}

@media (max-width: 1199px) {
  .stats-grid,
  .targets,
  .form-grid,
  .filters,
  .filters-wide,
  .compact-form,
  .saved-view-bar,
  .work-queue,
  .trend-grid,
  .primary-metrics,
  .agent-context-grid,
  .deal-form-sections,
  .agent-history-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .filter-primary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .target-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .employee-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  :root {
    --modal-inset: 16px;
  }

  input:not([type="checkbox"]),
  select,
  textarea {
    min-height: 44px;
  }

  .field select,
  .field textarea {
    min-height: 44px;
  }

  .app-shell,
  .app-shell.sidebar-collapsed {
    display: block;
  }

  .desktop-sidebar {
    display: none;
  }

  .mobile-account-trigger {
    position: fixed;
    inset-inline-start: 12px;
    top: max(12px, env(safe-area-inset-top));
    z-index: 12;
    display: inline-grid;
    background: var(--surface-raised);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.24);
  }

  .main {
    padding: 16px 16px 88px;
  }

  .page-container {
    width: 100%;
  }

  .topbar {
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 16px;
    padding-inline-start: 56px;
  }

  .page-title {
    font-size: 22px;
  }

  .page-kicker {
    font-size: 13px;
    margin-top: 4px;
  }

  .section-header {
    display: grid;
  }

  .mobile-bottom-nav {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 10;
    min-height: 72px;
    padding: 6px max(12px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
    gap: 4px;
    border-top: 1px solid var(--line);
    background: var(--surface);
    box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.2);
  }

  .mobile-bottom-nav button {
    min-width: 0;
    border: 1px solid transparent;
    border-radius: var(--radius);
    padding: 5px 2px;
    background: transparent;
    color: var(--muted);
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 3px;
    font-size: 11px;
    line-height: 1.15;
  }

  .mobile-bottom-nav button.active,
  .mobile-bottom-nav button:hover {
    color: var(--text);
    background: var(--surface-hover);
    border-color: var(--line);
  }

  .mobile-bottom-nav .nav-label {
    width: 100%;
    text-align: center;
  }

  .mobile-bottom-nav .badge-count {
    display: none;
  }

  .stats-grid,
  .targets,
  .form-grid,
  .filters,
  .filters-wide,
  .compact-form,
  .saved-view-bar,
  .work-queue,
  .trend-grid,
  .primary-metrics,
  .organization-records,
  .agent-primary-metrics,
  .agent-context-grid,
  .agent-history-summary {
    grid-template-columns: 1fr;
  }

  .agent-quick-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .agent-quick-actions .btn {
    min-width: 0;
    min-height: 44px;
    justify-content: center;
  }

  .agent-primary-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .agent-primary-metrics .stat {
    min-width: 0;
  }

  .agent-primary-metrics .stat-value {
    font-size: 21px;
    overflow-wrap: anywhere;
  }

  .deal-step-indicator {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .deal-step-indicator span {
    display: grid;
    justify-items: center;
    text-align: center;
    font-size: 11px;
  }

  .deal-form-sections {
    display: block;
  }

  .deal-form-step:not(.is-active) {
    display: none;
  }

  .deal-form-step.is-active {
    display: grid;
  }

  .deal-step-actions {
    display: flex;
    margin-top: 4px;
  }

  .deal-step-actions .btn {
    flex: 1 1 0;
    min-height: 44px;
  }

  .agent-history-tabs,
  .advance-tabs {
    display: flex;
    width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }

  .agent-history-tabs button,
  .advance-tabs button {
    flex: 0 0 auto;
    min-width: 104px;
  }

  .context-meta,
  .league-summary {
    grid-template-columns: 1fr;
  }

  .context-meta {
    display: grid;
  }

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

  .target-filters {
    grid-template-columns: 1fr;
  }

  .filter-bar {
    padding: 14px;
  }

  .responsive-record-table {
    display: none;
  }

  .record-card-list {
    display: grid;
    gap: 10px;
  }

  .agent-open-orders .record-card .btn {
    width: 100%;
  }

  .target-request-card .btn {
    width: 100%;
  }

  .record-summary-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  /* A centred modal on a 390px screen is a full-screen one: no backdrop gutter,
     no corner radius, no border, and the full height so the body still scrolls
     between a pinned header and a pinned action row. */
  .drawer-backdrop,
  .sheet-backdrop {
    padding: 0;
  }

  .drawer,
  .filter-sheet {
    width: 100%;
    height: 100%;
    max-height: 100%;
    border: 0;
    border-radius: 0;
  }

  .workflow-tabs {
    width: 100%;
  }

  .workflow-tabs button {
    min-height: 44px;
  }

  .filter-chip {
    min-height: 44px;
  }

  .filter-chip button {
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
    margin-block: -1px;
  }

  .employee-filters {
    grid-template-columns: 1fr;
  }

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

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

  .organization-edit {
    width: 100%;
    min-height: 44px;
    justify-content: center;
  }

  .drawer-body .compact-form,
  .detail-summary,
  .financial-context,
  .read-only-details {
    grid-template-columns: 1fr;
  }

  .detail-summary > div + div,
  .financial-context > div:nth-child(even) {
    border-inline-start: 0;
  }

  .detail-summary > div + div,
  .financial-context > div + div {
    border-top: 1px solid var(--line);
  }

  .read-only-details .full {
    grid-column: auto;
  }

  .delivery-action {
    align-items: stretch;
    flex-direction: column;
  }

  .drawer-action-row .btn {
    flex: 1 1 120px;
  }

  .drawer-footer {
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }

  .toast {
    inset-inline: 16px;
    bottom: 88px;
    max-width: none;
  }

  .field.wide,
  .form-grid > .wide {
    grid-column: auto;
  }

  .table-wrap {
    margin-inline: -1px;
  }
}

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

/* Link to the sales portal, styled as one more navigation item. */
.nav a.portal-link {
  border: 1px solid transparent;
  color: var(--muted);
  background: transparent;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.nav a.portal-link:hover {
  background: var(--surface-hover);
  border-color: var(--line);
  color: var(--text);
}
.app-shell.sidebar-collapsed .desktop-sidebar .nav a.portal-link {
  justify-content: center;
  padding-inline: 0;
}
.app-shell.sidebar-collapsed .desktop-sidebar .nav a.portal-link .nav-label {
  display: none;
}
@media (max-width: 767px) {
  .mobile-bottom-nav a.portal-link {
    min-width: 0;
    min-height: 0;
    border: 1px solid transparent;
    border-radius: var(--radius);
    padding: 5px 2px;
    color: var(--muted);
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 3px;
    font-size: 11px;
    line-height: 1.15;
    text-align: center;
  }
}