.portal-date-field { display:flex; gap:8px; align-items:stretch; }
.portal-date-field input { min-width:0; flex:1; margin:0; }
.portal-date-field > button { margin:0; }
.portal-calendar { width:min(380px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); overflow:auto; padding:16px; border:1px solid var(--border); border-radius:16px; background:var(--theme-paper,#fff); color:var(--theme-text,#183b35); box-shadow:0 12px 40px #0003; }
.portal-calendar::backdrop { background:#0005; }
.calendar-heading,.calendar-actions { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.calendar-heading { margin-bottom:12px; }
.calendar-actions { margin-top:12px; }
.calendar-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; }
.calendar-grid.calendar-months { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.portal-calendar button { margin:0; min-height:40px; padding:6px; box-shadow:none; }
.portal-calendar button[aria-pressed="true"] { background:var(--green,#376e52) !important; color:white !important; border-color:var(--green,#376e52) !important; }
.calendar-weekday { text-align:center; font-size:12px; padding:5px 0; color:var(--theme-muted,#526568); }
/* Explicit user choice; light stays the default regardless of the device theme. */
:root { color-scheme: light; }
@media screen {
  :root[data-theme="light"] { --theme-page: #f7f8fa; }
  :root[data-theme="dark"] {
    color-scheme: dark;
    --green: #376e52;
    font-family: system-ui, "Segoe UI", Arial, sans-serif;
    --dark: #fafafa;
    --border: #626862;
    --muted: #d0d4d1;
    --accent-text: #a6d9ba;
    --action-hover: #2b5b43;
    --theme-text: #fafafa;
    --theme-muted: #d0d4d1;
    --theme-accent: #a6d9ba;
    --theme-warning-text: #f1cf90;
    --theme-danger-text: #ffb6af;
    --theme-page: #101010;
    --theme-paper: #1c1c1c;
    --theme-surface: #242424;
    --theme-soft: #282828;
    --theme-warning: #362d1d;
    --theme-danger: #3c2524;
    --theme-border: #626862;
    --theme-border-strong: #929e96;
    --theme-border-warning: #897044;
    --theme-border-danger: #b6746d;
    --theme-focus: #a6d9ba;
    --theme-shadow: #0005;
    --nav-shadow: #0000001f;
    --theme-ring: #a6d9ba30;
  }
  html { scroll-padding-top: calc(var(--portal-header-height, 110px) + 16px); }
  body > header, body > header:not(.manager-header), body > header.manager-header, body[data-role="dealer"] > header {
    position: sticky;
    top: 0;
    z-index: 30;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px 20px;
  }
  header .brand { margin: 0; }
  #navigation { min-width: 0; }
  #navigation.manager-navigation { flex-wrap: wrap; gap: 8px; }
  #navigation .manager-sections { min-width: 0; }
  .theme-control { margin: 0; align-self: center; }
  .theme-control select { width: 120px; margin: 0; min-height: 44px; font-size: 14px; cursor: pointer; }
  :root[data-theme="dark"] .brand-wordmark { filter: brightness(0) invert(1); }
  :root[data-theme="dark"] input::placeholder,
  :root[data-theme="dark"] textarea::placeholder { color: #c4ccc7; opacity: 1; }
  /* Use the platform's normal rasterization and a wider UI face on dark surfaces. */
  :root[data-theme="dark"] body { -webkit-font-smoothing: auto; }
  :root[data-theme="dark"] :is(h1, h2, h3, button, .button, label) { font-weight: 600; }
  :root[data-theme="dark"] :is(.help, .meta, .muted, .page-description, .tracking-notice,
    .invitation-email, .invitation-activation, .finance-totals span, .finance-totals small,
    .finance-table small, .finance-table th, .finance-payments li, .request-money small,
    .device-help, .employee-results [role="option"] span, .item-search-results [role="option"] span) {
    font-size: 14px;
    line-height: 1.5;
  }
  :root[data-theme="dark"] .finance-table { font-size: 15px; }
  :root[data-theme="dark"] #navigation button { font-size: 14px !important; }
  :root[data-theme="dark"] input,
  :root[data-theme="dark"] select,
  :root[data-theme="dark"] textarea { background-color: var(--theme-paper); }
  :root[data-theme="dark"] option { background: var(--theme-paper); color: var(--theme-text); }
  .dealer-guide { scroll-margin-top: 16px; }
}
@media screen and (max-width: 1100px) {
  body > header, body > header:not(.manager-header), body > header.manager-header, body[data-role="dealer"] > header {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 12px 16px 8px;
    gap: 8px 12px;
  }
  header .brand, .manager-header .brand { grid-column: 1; grid-row: 1; width: 148px; margin: 0; }
  .theme-control { grid-column: 2; grid-row: 1; }
  body > header:not(.manager-header) #navigation, body > header #navigation.manager-navigation {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    gap: 6px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding: 4px 3px 8px;
    scrollbar-width: thin;
    scroll-padding-inline: 4px;
  }
  #navigation:empty { display: none !important; }
  #navigation .manager-sections, #navigation .manager-tools {
    display: flex;
    flex-wrap: nowrap;
    flex: 0 0 auto;
    gap: 6px;
    position: static;
  }
  body > header:not(.manager-header) #navigation :is(button, .button),
  body > header.manager-header #navigation :is(button, .button) {
    flex: 0 0 auto;
    white-space: nowrap;
    min-height: 44px;
    padding: 8px 12px;
    font-size: 14px;
  }
  body > header:not(.manager-header) #navigation #logout,
  body > header.manager-header #navigation #logout { position: static; }
}
@media print { :root { color-scheme: light; } .theme-control { display: none; } }

/* Required fields are visible before validation; red remains reserved for errors. */
.field-requirement { display:inline-block; margin-inline-start: .5rem; font-size: .75rem; font-weight: 600; line-height:1.4; color:#695127; }
.field-requirement[data-status="optional"] { color:var(--muted); font-weight:400; }
#main :is(input,select,textarea)[data-field-requirement="required"],
#main :is(input,select,textarea)[data-field-requirement]:not([data-field-requirement="optional"]):not([data-field-requirement=""]) { background-color:#fff8e9; border-color:#ab8950; }
:root[data-theme="dark"] .field-requirement { color:#ebce93; }
:root[data-theme="dark"] .field-requirement[data-status="optional"] { color:var(--muted); }
:root[data-theme="dark"] #main :is(input,select,textarea)[data-field-requirement="required"],
:root[data-theme="dark"] #main :is(input,select,textarea)[data-field-requirement]:not([data-field-requirement="optional"]):not([data-field-requirement=""]) { background-color:#30291c; border-color:#b39a65; color:#fff; }
#main :is(input,select,textarea)[aria-invalid="true"], #main :is(input,select,textarea):user-invalid { border-color:#b42318; background-color:#fff1ef; }
:root[data-theme="dark"] #main :is(input,select,textarea)[aria-invalid="true"], :root[data-theme="dark"] #main :is(input,select,textarea):user-invalid { border-color:#ef9389; background-color:#3c2524; }
.payer-type-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; border:0; padding:0; margin:0 0 20px; }
.payer-type-options legend { margin-bottom:10px; font-weight:700; }
.payer-type-options label { display:flex; align-items:flex-start; gap:10px; padding:16px; border:1px solid var(--border); border-radius:10px; cursor:pointer; }
.payer-type-options label:has(input:checked) { border-color:var(--green); box-shadow:0 0 0 1px var(--green); }
.payer-type-options input { width:auto; min-height:0; margin:4px 0 0; }
.payer-type-options small { display:block; font-weight:400; margin-top:6px; }
@media(max-width:600px) { .payer-type-options { grid-template-columns:1fr; } }

#manager-section-select{display:none}
@media(max-width:600px){
 body>header.manager-header #navigation.manager-navigation{flex-wrap:wrap;overflow:visible;gap:8px}
 body>header.manager-header #navigation .manager-sections{display:none}
 #manager-section-select{display:block;width:100%;flex:1 0 100%;margin:0}
 body>header.manager-header #navigation .manager-tools{display:flex;flex-wrap:wrap;gap:8px}
}

/* Dealer navigation: three sections and one account menu, no horizontal scrolling. */
body>header.dealer-header{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
body>header.dealer-header #navigation{display:flex;flex:1;align-items:center;gap:10px;overflow:visible;flex-wrap:wrap}
.dealer-sections{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.dealer-account{margin-left:auto}
body>header.dealer-header #navigation #logout{position:static}
.dealer-filters{display:grid;grid-template-columns:minmax(140px,1fr) minmax(170px,1fr) minmax(200px,2fr);gap:14px;align-items:end}
.dealer-filters input,.dealer-filters select{width:100%;margin-bottom:0}
.create-menu>summary{background:var(--green,#326b52);color:#fff;padding:12px 22px}
.create-menu .manager-popover{min-width:260px}
.aw-tour-offer{background:rgba(0,0,0,.64)}
@media(max-width:700px){
 body>header.dealer-header{gap:10px;padding:12px 16px}
 body>header.dealer-header .brand{width:140px;min-width:140px}
 body>header.dealer-header #navigation{flex-basis:100%;gap:8px}
 .dealer-sections{flex:1;gap:4px}.dealer-sections button{padding:10px 8px}
 .dealer-account{margin-left:0}
 .dealer-filters{grid-template-columns:1fr 1fr}.dealer-filters>div:last-child{grid-column:1/-1}
 .create-menu .manager-popover{position:absolute;left:auto;right:0;top:100%;min-width:240px}
}

@media(max-width:700px){
 body>header.dealer-header #navigation{display:block}
 .dealer-sections{width:100%;flex-wrap:nowrap;justify-content:space-between}
 .dealer-sections button{font-size:13px;padding:10px 7px;white-space:nowrap}
 .dealer-account{position:absolute;top:12px;right:16px}
 .dealer-account>summary{font-size:13px}
}

button.secondary-delete { background:transparent !important; color:var(--theme-muted,#607269) !important; border-color:transparent !important; box-shadow:none !important; font-size:14px; padding:8px 12px; }
button.secondary-delete:hover { background:var(--theme-soft,#edf3ee) !important; text-decoration:underline; }

/* Company sections remain distinct even when inactive. */
.steps.company-tabs { flex-wrap:wrap; overflow:visible; gap:8px; }
.steps.company-tabs button { border:1px solid var(--theme-border-strong,var(--border)); border-radius:8px; background:transparent; }
.steps.company-tabs button.active { background:var(--theme-paper,#fff); border-color:var(--green); }
.company-access-explanation { font-size:14px; }
.company-access-explanation p { margin:8px 0 0; }
.portal-phones { display:flex; flex-wrap:wrap; gap:8px 24px; margin-top:12px; }
.portal-phones a { white-space:nowrap; }

/* Stack the caption above the theme selector inside account popovers. */
.manager-popover .theme-control {
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:8px;
  grid-column:auto;
  grid-row:auto;
  min-width:0;
  margin:0;
}
.manager-popover .theme-control::before { line-height:1.4; }
.manager-popover .theme-control select { width:100%; min-width:0; max-width:100%; }
#dealer-account, #manager-account { margin-top:8px; max-width:calc(100vw - 20px); box-sizing:border-box; }