/* Light ice glass theme. Layout and workflow contracts remain in app.css. */
:root {
  --color-bg-canvas: #edf3f9;
  --color-bg-surface: rgba(255, 255, 255, .86);
  --color-text-primary: #182d43;
  --color-text-secondary: #597086;
  --color-text-tertiary: #687e92;
  --color-border-default: #dce6ef;
  --color-action-primary: #0878ef;
  --color-action-primary-soft: #eaf3ff;
  --color-status-danger: #c33950;
  --color-status-danger-soft: #fff0f3;
  --color-status-upcoming: #95621a;
  --color-status-upcoming-soft: #fff6e6;
  --color-status-success: #148063;
  --color-status-success-soft: #e8f7f1;
  --radius-control: 12px;
  --radius-card: 22px;
  --radius-panel: 28px;
  --shadow-card: 0 8px 28px rgb(47 90 132 / .055), inset 0 1px 0 #fff;
  --shadow-floating: 0 18px 48px rgb(47 90 132 / .14), inset 0 1px 0 #fff;
  --glass-fill: linear-gradient(125deg, rgb(255 255 255 / .86), rgb(255 255 255 / .52));
  --glass-edge: rgb(255 255 255 / .95);
}
html { min-height: 100%; }
body {
  min-height: 100vh;
  background:
    radial-gradient(ellipse at 98% 3%, rgb(140 208 249 / .36), transparent 36%),
    radial-gradient(ellipse at 0% 68%, rgb(156 205 245 / .3), transparent 40%),
    radial-gradient(ellipse at 65% 100%, rgb(194 218 232 / .35), transparent 42%),
    linear-gradient(155deg, #edf3f9 15%, #f7fafc 48%, #eaf2f8);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
}
h1, h2, h3 { letter-spacing: -.025em; }
a { text-underline-offset: 3px; }
.app-nav img, .mobile-tabbar img, .mobile-more-panel img { width: 24px; height: 24px; flex: 0 0 auto; }
.procurement-po-group .data-table th:first-child, .procurement-po-group .data-table td:first-child { min-width: 7rem; white-space: nowrap; }
.procurement-po-group .data-table th:nth-child(8) { white-space: nowrap; }
button, .button { transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease; }
button, .button, input, select, textarea { border-color: var(--color-border-default); }
button, .button { box-shadow: inset 0 1px 0 rgb(255 255 255 / .72); font-weight: 500; }
.button--primary {
  color: #fff;
  background: linear-gradient(150deg, #2595fa, #0774e9);
  border-color: #0b7ceb;
  box-shadow: 0 5px 13px rgb(8 120 239 / .17), inset 0 1px 0 rgb(255 255 255 / .35);
}
.button--primary:hover { background: linear-gradient(150deg, #1488ed, #0868d0); }
.button--danger { color: #fff; background: var(--color-status-danger); border-color: var(--color-status-danger); }
.button--danger:hover { background: #a62d42; }
.button--danger-outline { background: var(--color-status-danger-soft); border-color: #edbcc6; }
.button--secondary { background: rgb(255 255 255 / .75); }
input, select, textarea { background-color: rgb(255 255 255 / .9); }
input::placeholder, textarea::placeholder { color: #788b9c; opacity: 1; }
input:focus, select:focus, textarea:focus { border-color: var(--color-action-primary); }
input[type="file"]::file-selector-button { font: inherit; color: #32628d; border: 0; background: #eaf3ff; border-radius: 7px; padding: 5px 9px; margin-right: 10px; cursor: pointer; }
.app-shell { grid-template-columns: 244px minmax(0, 1fr); }
.app-sidebar {
  top: 20px;
  height: calc(100vh - 40px);
  height: calc(100dvh - 40px);
  width: 224px;
  margin: 20px 0 20px 20px;
  padding: 20px 13px 12px;
  border: 1px solid var(--glass-edge);
  border-radius: 28px;
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(28px) saturate(145%);
  backdrop-filter: blur(28px) saturate(145%);
  box-shadow: 0 10px 32px rgb(38 82 122 / .1), inset 0 1px 0 #fff;
  overflow: hidden;
}
.brand { display: flex; align-items: center; gap: 11px; flex-shrink: 0; padding: 4px 9px 12px; font-size: 17px; letter-spacing: -.4px; }
.brand__mark { display: inline-grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; border-radius: 13px; color: #fff; background: linear-gradient(145deg, #54b3ff, #0875ed); box-shadow: 0 5px 12px rgb(43 139 244 / .17), inset 0 1px 1px rgb(255 255 255 / .6); font-size: 14px; letter-spacing: -.4px; }
.brand small { display: block; margin-top: 2px; font-size: 9px; letter-spacing: 1.8px; font-weight: 500; color: var(--color-text-tertiary); }
.sidebar-toggle { flex-shrink: 0; min-height: 44px; margin-bottom: 4px; box-shadow: none; }
.app-nav { flex: 1; min-height: 0; align-content: start; gap: 3px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #c4d7e6 transparent; }
.app-nav__group { margin: 15px 12px 6px; font-size: 10px; letter-spacing: 1.6px; }
.app-nav a { min-height: 44px; padding: 9px 11px; gap: 10px; font-size: 13px; color: #51677e; background: transparent; border-color: transparent; border-radius: 13px; }
.app-nav a svg, .app-nav a img { width: 20px; height: 20px; }
.app-nav a::before { display: none; }
.app-nav a:hover, .app-nav a:focus-visible { background: rgb(255 255 255 / .65); border-color: transparent; }
.app-nav a[aria-current="page"] { color: var(--color-action-primary); background: linear-gradient(125deg, #fff, rgb(255 255 255 / .62)); border-color: #fff; box-shadow: 0 4px 13px rgb(47 107 186 / .08); }
.app-sidebar__account { flex-shrink: 0; grid-template-columns: minmax(0, 1fr) auto; gap: 0 5px; margin-top: 12px; padding: 12px 7px 0; align-items: center; }
.app-sidebar__username { font-size: 12px; font-weight: 600; color: var(--color-text-primary); }
.app-sidebar__account form { grid-column: 2; grid-row: 1 / 3; }
.app-sidebar__password { font-size: 11px; margin: 0; min-height: 44px; display: flex; align-items: center; }
.app-sidebar__logout { min-width: 44px; padding: 8px; background: transparent; border-color: transparent; box-shadow: none; }
.app-sidebar__logout .nav-label { display: none; }
.app-main { width: calc(100% - 60px); max-width: 112rem; margin: 24px auto 36px; }
html.app-sidebar-collapsed .app-shell { grid-template-columns: 80px minmax(0, 1fr); }
html.app-sidebar-collapsed .app-sidebar { width: 60px; padding-inline: 5px; }
html.app-sidebar-collapsed .app-sidebar__account { display: flex; justify-content: center; padding-inline: 0; }
html.app-sidebar-collapsed .app-sidebar__username, html.app-sidebar-collapsed .app-sidebar__password { display: none; }
.app-topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; margin-bottom: 28px; color: var(--color-text-tertiary); font-size: 12px; }
.app-topbar__crumb { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.app-topbar__crumb svg { width: 16px; height: 16px; }
.app-topbar__actions { display: flex; align-items: center; gap: 10px; }
.app-topbar__notification { display: grid; place-items: center; min-width: 44px; height: 44px; border: 1px solid #fff; border-radius: 50%; color: #557088; background: var(--glass-fill); box-shadow: var(--shadow-card); }
.app-topbar__notification svg { width: 18px; height: 18px; }
.app-topbar__avatar { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #fff; border-radius: 50%; background: linear-gradient(130deg, #f8fcff, #ccdfee); color: #4e779b; font-size: 12px; font-weight: 600; }
.page-header, .page-heading { margin-bottom: 26px; }
.page-header h1, .page-heading h1 { font-size: 31px; font-weight: 650; line-height: 1.35; overflow-wrap: anywhere; }
.page-header__copy { gap: 8px; }
.page-actions > a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 16px; border: 1px solid var(--glass-edge); border-radius: 13px; background-color: rgb(255 255 255 / .65); text-decoration: none; font-weight: 500; }
.page-description { color: var(--color-text-secondary); font-size: 13px; line-height: 1.7; }
.page-eyebrow { font-size: 11px; letter-spacing: .06em; }
.surface, .settings-card, .form-section, .detail-summary, .content-section, .form-card, .metric-card, .photo-slot-card, .approval-card, .procurement-po-group { border-color: var(--glass-edge); }
.surface, .detail-summary, .content-section, .form-card, .settings-card { background: rgb(255 255 255 / .8); }
.form-card > .form-section { background: rgb(242 247 251 / .6); border-color: #e5edf4; border-radius: 16px; }
.form-card:not(.settings-grid) { grid-template-columns: minmax(0, 1fr); }
.form-card > * { min-width: 0; }
.form-card p.table-note { white-space: normal; overflow-wrap: anywhere; }
.form-card--nested { background: rgb(255 255 255 / .62); }
.content-section h2 { font-size: 18px; font-weight: 650; }
.filter-panel, .work-filter { background: rgb(255 255 255 / .67); border-color: #fff; box-shadow: inset 0 1px 0 #fff; padding: 18px 20px; }
.table-scroll { background: rgb(255 255 255 / .72); border-color: #e4edf4; border-radius: 16px; }
th { background: #f2f6fa; color: #597086; font-weight: 600; }
th, td { border-bottom-color: #e6edf3; }
.data-table tbody tr:hover > td { background-color: rgb(229 241 254 / .36); }
.data-table a:not(.button) { font-weight: 500; }
.procurement-po-group > summary { min-height: 56px; padding: 12px 16px; }
.procurement-po-group .table-scroll { border: 0; border-radius: 0; background: transparent; }
.po-chip { background: #f0f5fa; border-color: transparent; }
.po-chip--danger { background: var(--color-status-danger-soft); }
.status-badge { font-size: 12px; border-radius: 8px; min-height: 26px; }
.status-badge--success { color: var(--color-status-success); }
.status-badge--danger { color: var(--color-status-danger); }
.tabs { gap: 8px; }
.tabs a { background: rgb(255 255 255 / .66); border-color: #fff; box-shadow: var(--shadow-card); }
.tabs a[aria-current="page"] { color: #fff; background: var(--color-action-primary); border-color: var(--color-action-primary); }
.empty-state { background: rgb(248 251 254 / .72); border-color: #cbdde9; padding: 36px 24px; }
.photo-slot-card { padding: 18px; background: rgb(255 255 255 / .83); }
.photo-slot-card--empty { border-style: solid; }
.photo-slot-card__empty { display: grid; place-items: center; min-height: 100px; border: 1px dashed #c6dce9; border-radius: 14px; background: rgb(237 245 252 / .6); }
.photo-slot-card__gallery { min-height: 100px; }
.photo-slot-card__pick { min-height: 44px; border-radius: 12px; }
.photo-slot-card__actions { gap: 8px; }
.photo-slot-card__upload { gap: 8px; }
.photo-slot-card__head { margin-bottom: 12px; }
.photo-slot-card__head h3 { font-size: 14px; }
.photo-search { background-color: rgb(255 255 255 / .88); }
.notification-row { min-height: 58px; }
.express-modal, .mobile-more-panel__sheet { border: 1px solid #fff; background: rgb(247 251 255 / .95); box-shadow: var(--shadow-floating); }
.express-modal-overlay { background: rgb(27 48 69 / .28); }
.approval-card { padding: 20px; box-shadow: var(--shadow-card); }
.metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.metric-card { position: relative; min-height: 144px; align-content: start; gap: 14px; padding: 20px 22px; background: var(--glass-fill); border-radius: 23px; }
.metric-card:hover { border-color: #fff; box-shadow: 0 10px 30px rgb(47 90 132 / .11), inset 0 1px 0 #fff; }
.metric-card__label { display: flex; align-items: center; gap: 9px; }
.metric-card__label svg { width: 28px; height: 28px; padding: 6px; border-radius: 9px; color: #388ade; background: #e9f3ff; }
.metric-card strong { font-size: 36px; font-weight: 600; color: #23465e; letter-spacing: -.5px; }
.metric-card small { color: var(--color-text-tertiary); font-size: 10px; }
a.metric-card::after { position: absolute; right: 20px; bottom: 18px; content: '↗'; color: #7890a3; font-size: 12px; }
.metric-card.warning-card { background: linear-gradient(130deg, #fff, #fff3f6) !important; border-color: #fff !important; }
.metric-card.upcoming-card { background: linear-gradient(130deg, #fff, #fff8ea) !important; border-color: #fff !important; }
.metric-card.warning-card strong { color: var(--color-status-danger); }
.metric-card.upcoming-card strong { color: var(--color-status-upcoming); }
.workspace-links { margin-top: 24px; padding: 24px; }
.workspace-links h2 { margin: 0 0 18px; font-size: 17px; }
.workspace-links__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 12px; }
.workspace-link { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 80px; padding: 14px; text-decoration: none; color: var(--color-text-primary); background: rgb(255 255 255 / .62); border: 1px solid #fff; border-radius: 16px; }
.workspace-link:hover { background: #fff; }
.workspace-link svg, .workspace-link img { width: 24px; height: 24px; flex: 0 0 24px; color: #488dca; }
.workspace-link b { font-size: 13px; font-weight: 600; }
.workspace-link small { display: block; margin-top: 4px; color: var(--color-text-tertiary); font-size: 11px; }
.app-shell:not(:has(.app-sidebar)) .app-main { width: min(calc(100% - 40px), 448px); margin: max(40px, 12vh) auto 40px; padding: 38px; background: var(--glass-fill); border: 1px solid #fff; border-radius: 30px; box-shadow: var(--shadow-floating); -webkit-backdrop-filter: blur(28px); backdrop-filter: blur(28px); }
.auth-brand { display: flex; gap: 12px; align-items: center; margin-bottom: 34px; font-size: 16px; font-weight: 650; }
.auth-brand small { display: block; margin-top: 3px; color: var(--color-text-tertiary); font-size: 9px; letter-spacing: 1.8px; }
.auth-page .form-card, .auth-page .form-section { padding: 0; margin: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.auth-page .form-section { gap: 20px; }
.auth-page .form-card { gap: 26px; }
.auth-page .form-actions button { width: 100%; }
.auth-page .form-field > label { font-size: 12px; margin-bottom: 5px; }
.auth-page input { height: 48px; }
.auth-note { margin: 24px 0 0; color: var(--color-text-tertiary); font-size: 11px; text-align: center; }
/* Fit the procurement workspace to the open sidebar, including inline editors. */
.procurement-group-filters { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 12px; border-top: 1px solid #e6edf3; }
.procurement-group-filters label:empty { display: none; }
.procurement-group-filters select { min-height: 32px; max-width: 20rem; padding: 4px 10px; font-size: 12px; }
@media (min-width: 768px) {
  .app-main:has(.procurement-workspace) { width: calc(100% - 32px); max-width: none; }
  .procurement-workspace .procurement-groups { padding: 0; border: 0; background: transparent; box-shadow: none; }
  .procurement-workspace .procurement-po-group .table-scroll { padding: 0 8px 8px; }
  .procurement-workspace .procurement-table { width: 100%; min-width: 0; table-layout: fixed; font-size: 12px; line-height: 1.55; }
  .procurement-col--sku { width: 6%; }
  .procurement-col--product { width: 8%; }
  .procurement-col--factory { width: 9%; }
  .procurement-col--buyer { width: 5%; }
  .procurement-col--quantity { width: 4%; }
  .procurement-col--unit { width: 4.5%; }
  .procurement-col--checks { width: 5%; }
  .procurement-col--accessory { width: 6%; }
  .procurement-col--ordered { width: 9.5%; }
  .procurement-col--expected { width: 9.5%; }
  .procurement-col--carton { width: 6.5%; }
  .procurement-col--sample { width: 7%; }
  .procurement-col--express { width: 13.5%; }
  .procurement-col--arrived { width: 6.5%; }
  .procurement-workspace .procurement-po-group .procurement-table :is(th, td) {
    min-width: 0; max-width: none; padding: 8px 4px; font-size: 12px;
    white-space: normal; overflow-wrap: anywhere; vertical-align: middle;
  }
  .procurement-workspace .procurement-table th { font-size: 12px; line-height: 1.5; }
  .procurement-workspace .procurement-table :is(.table-note, .sample-due-hint, .status-badge, .accessory-item, .accessory-details summary) { font-size: 11px; white-space: normal; overflow-wrap: anywhere; }
  .procurement-workspace .procurement-table .status-badge { min-height: 24px; padding: 3px 6px; line-height: 1.5; word-break: keep-all; overflow-wrap: normal; }
  .procurement-workspace .procurement-table :is(button, input, select) { min-width: 0; max-width: 100%; min-height: 28px; padding: 3px 5px; border-radius: 8px; font-size: 12px; line-height: 1.4; }
  .procurement-workspace .procurement-table button { white-space: nowrap; flex-shrink: 0; }
  .procurement-workspace .procurement-table :is(.row-inline-form, .row-action-inline, .sample-days-inline) { max-width: 100%; }
  .procurement-workspace .procurement-table .row-inline-form { display: flex; flex-wrap: wrap; gap: 4px; }
  .procurement-workspace .procurement-table .row-inline-form :is(input:not([type="hidden"]), select) { width: 100%; flex: 1 1 100%; }
  .procurement-workspace .procurement-table input[type="date"] { font-size: 11px; padding-inline: 2px; }
  .procurement-workspace .procurement-table .express-form { width: 100%; }
  .procurement-workspace .procurement-table .supplier-date-display { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
  .procurement-workspace .procurement-table .sample-days-inline { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px; }
  .procurement-workspace .procurement-table .sample-days-inline input { width: 100%; }
  .procurement-workspace .procurement-table .sample-days-inline button { grid-column: 1 / -1; justify-self: start; }
  .procurement-workspace .procurement-table .sample-days-unit { font-size: 11px; }
  .procurement-workspace .procurement-table .accessory-details summary { padding: 4px 0; gap: 2px; }
  .procurement-workspace .procurement-table .accessory-item__actions { min-width: 0; }
  .procurement-workspace .procurement-table .order-confirm__panel { padding: 6px; }
  .procurement-workspace .procurement-table .order-confirm__checks { padding-left: 14px; font-size: 11px; }
}
.procurement-workspace .procurement-table .accessory-dialog { width: min(560px, calc(100vw - 40px)); max-height: 80dvh; padding: 24px; color: var(--color-text-primary); background: #f8fbfe; border: 1px solid #fff; border-radius: 24px; box-shadow: var(--shadow-floating); font-size: 14px; }
.accessory-dialog::backdrop { background: rgb(27 48 69 / .28); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.accessory-dialog__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.accessory-dialog__header h2 { margin: 0 0 4px; font-size: 20px; }
.accessory-dialog__header span { color: var(--color-text-secondary); font-size: 12px; }
.procurement-workspace .procurement-table .accessory-dialog .accessory-item { gap: 10px; padding: 16px 0; font-size: 14px; }
.procurement-workspace .procurement-table .accessory-dialog .accessory-item__actions { gap: 10px; }
.procurement-workspace .procurement-table .accessory-dialog :is(button, input) { min-height: 36px; padding: 6px 10px; font-size: 13px; }
.procurement-workspace .procurement-table .accessory-dialog .row-inline-form input[type="date"] { width: 144px; flex: 0 1 144px; font-size: 13px; }
.procurement-workspace .procurement-table .accessory-dialog .status-badge { font-size: 12px; }
@media (min-width: 768px) and (max-width: 1100px) {
  .app-main { width: calc(100% - 40px); }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workspace-links__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  body { font-size: 14px; }
  .procurement-group-filters label { width: 100%; min-width: 0; }
  .procurement-group-filters select { width: 100%; max-width: 100%; min-height: 44px; font-size: 16px; }
  .app-main { width: calc(100% - 40px); margin: 18px auto 24px; }
  .app-shell:has(.mobile-tabbar) .app-main { padding-bottom: calc(130px + env(safe-area-inset-bottom)); }
  .app-topbar { margin-bottom: 24px; min-height: 44px; }
  .app-topbar__crumb { gap: 7px; font-size: 11px; }
  .app-topbar__avatar { display: none; }
  .app-topbar__notification { width: 44px; height: 44px; }
  .page-header h1, .page-heading h1 { font-size: 27px; line-height: 1.4; }
  .page-header, .page-heading { gap: 16px; margin-bottom: 22px; }
  .page-header__copy { flex-basis: 100%; }
  .page-actions { width: 100%; }
  .page-description { font-size: 12px; }
  .page-actions .button { flex: 1 1 auto; }
  .surface, .content-section, .detail-summary, .form-card, .settings-card, .form-section, .work-filter { padding: 18px; border-radius: 22px; }
  input, select, textarea { font-size: 16px; }
  .mobile-tabbar { left: 20px; right: 20px; bottom: calc(18px + env(safe-area-inset-bottom)); padding: 6px; min-height: 74px; border: 1px solid #fff; border-radius: 27px; background: linear-gradient(125deg, rgb(255 255 255 / .85), rgb(246 251 255 / .68)); -webkit-backdrop-filter: blur(28px) saturate(145%); backdrop-filter: blur(28px) saturate(145%); box-shadow: 0 10px 32px rgb(38 82 122 / .14), inset 0 1px 0 #fff; }
  .mobile-tabbar a, .mobile-tabbar button { min-height: 60px; border: 0; border-radius: 20px; background: transparent; box-shadow: none; font-size: 10px; gap: 5px; }
  .mobile-tabbar svg, .mobile-tabbar img { width: 21px; height: 21px; }
  .mobile-tabbar a[aria-current="page"], .mobile-tabbar button[aria-expanded="true"] { background: rgb(223 238 255 / .8); color: #0878ef; }
  .mobile-more-panel__sheet { left: 16px; right: 16px; bottom: calc(108px + env(safe-area-inset-bottom)); max-height: calc(100dvh - 140px - env(safe-area-inset-bottom)); padding: 22px; border-radius: 28px; -webkit-backdrop-filter: blur(28px); backdrop-filter: blur(28px); }
  .mobile-more-panel__sheet nav a { background: rgb(255 255 255 / .72); font-size: 13px; }
  .mobile-more-panel__logout { grid-column: 1 / -1; }
  .mobile-more-panel__sheet h2 { font-size: 18px; }
  .mobile-card { background: rgb(255 255 255 / .85); border-color: #fff; }
  .table-scroll { background: transparent; border: 0; }
  .photo-slot-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .photo-slot-card { padding: 20px; }
  .photo-slot-card__empty { min-height: 122px; }
  .photo-slot-card__pick { min-height: 48px; font-size: 13px; }
  .photo-search { width: 100%; }
  .photo-slot-card__head h3 { font-size: 15px; }
  .photo-slot-card__item img { width: 122px; height: 122px; }
  .notification-row { padding: 12px; flex-wrap: wrap; gap: 8px; }
  .notification-row__time { margin-left: auto; }
  .notification-row__title { flex-basis: calc(100% - 64px); }
  .workspace-links { display: none; }
  .mobile-dashboard-photos .metric-card--primary { min-height: 180px; padding: 24px; display: grid; align-content: center; gap: 12px; }
  .mobile-dashboard-photos .metric-card--primary strong { font-size: 25px; color: var(--color-action-primary); }
  .mobile-dashboard-photos .metric-card--primary span { font-size: 18px; color: var(--color-text-primary); }
  .mobile-dashboard-photos .metric-card--primary small { font-size: 12px; }
  .app-shell:not(:has(.app-sidebar)) .app-main { padding: 28px; margin-top: max(32px, 9vh); }
  .auth-page .page-header h1 { font-size: 28px; }
  .approval-card { padding: 18px; }
}
/* Use opaque surfaces when the platform requests less transparency. */
@media (prefers-reduced-transparency: reduce) {
  :root { --glass-fill: #f8fbfe; --color-bg-surface: #fff; }
  .app-sidebar, .mobile-tabbar, .mobile-more-panel__sheet, .app-shell:not(:has(.app-sidebar)) .app-main { background: #f8fbfe; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .surface, .detail-summary, .content-section, .form-card, .metric-card, .photo-slot-card { background: #fff; }
}
@media print {
  body { background: #fff; }
  .app-sidebar, .mobile-tabbar, .app-topbar, .mobile-more-panel { display: none !important; }
  .app-shell { display: block; }
  .app-main { width: 100%; margin: 0; }
  .surface, .content-section, .form-card { box-shadow: none; background: #fff; }
}

@media (min-width: 1000px) {
  body:not(.auth-page) .form-section:has(> .form-field:nth-of-type(2)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-section > :not(.form-field), .form-section > .form-field:has(textarea), .form-section > .form-field:has(input[type="file"]) { grid-column: 1 / -1; }
  .auth-page .form-section { grid-template-columns: minmax(0, 1fr); }
}

/* Reminder settings: searchable directory and one focused editor. */
.reminder-settings .page-header { margin-bottom: 18px; }
.reminder-tabs { display: flex; gap: 6px; width: fit-content; max-width: 100%; padding: 5px; margin-bottom: 18px; border: 1px solid #fff; border-radius: 15px; background: rgb(255 255 255 / .65); }
.reminder-tabs button { min-height: 36px; padding: 7px 15px; background: transparent; border-color: transparent; box-shadow: none; color: var(--color-text-secondary); font-size: 13px; }
.reminder-tabs button[aria-selected="true"] { color: var(--color-action-primary); background: #fff; box-shadow: 0 3px 10px rgb(47 90 132 / .09); }
.reminder-tabs button span { margin-left: 6px; font-size: 11px; color: var(--color-text-tertiary); }
.reminder-workspace { display: grid; grid-template-columns: 248px minmax(0, 1fr); align-items: start; gap: 16px; }
.reminder-directory, .reminder-editor { min-width: 0; padding: 18px; border: 1px solid #fff; border-radius: 20px; background: rgb(255 255 255 / .8); box-shadow: var(--shadow-card); }
.reminder-directory { padding: 14px 10px; }
.reminder-search-label { display: block; margin: 0 4px 8px; font-size: 13px; font-weight: 600; }
.reminder-directory > input { width: 100%; min-height: 36px; padding: 8px; font-size: 12px; }
.reminder-directory-count { margin: 10px 5px 7px; color: var(--color-text-tertiary); font-size: 11px; }
.reminder-rule-list { display: grid; gap: 3px; max-height: 530px; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-right: 3px; }
.reminder-rule-link { display: grid; justify-content: stretch; align-items: start; gap: 3px; width: 100%; min-height: 49px; padding: 8px 10px; text-align: left; border-color: transparent; background: transparent; box-shadow: none; }
.reminder-rule-link:hover { background: #f0f6fd; }
.reminder-rule-link[aria-current="true"] { background: #e9f3ff; border-color: #d3e6fe; color: var(--color-action-primary); }
.reminder-rule-link__name { font-size: 13px; line-height: 1.4; font-weight: 550; }
.reminder-rule-link__meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; color: var(--color-text-tertiary); font-size: 10px; }
.reminder-state { font-style: normal; white-space: nowrap; }
.reminder-state.is-enabled { color: var(--color-status-success); }
.reminder-state::before { content: '•'; margin-right: 3px; }
.reminder-editor__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.reminder-editor__header h2 { margin: 3px 0 0; font-size: 19px; line-height: 1.5; }
.reminder-editor__header .page-eyebrow { margin: 0; color: var(--color-text-tertiary); font-size: 10px; }
.reminder-editor [data-rule-editor] { display: grid; gap: 14px; }
.reminder-editbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border: 1px solid #e2edf7; border-radius: 11px; background: #f2f7fc; }
.reminder-editbar > span, .reminder-hint { color: var(--color-text-tertiary); font-size: 11px; line-height: 1.7; }
.reminder-editbar .form-actions { flex-shrink: 0; }
.reminder-settings button { font-size: 13px; }
.reminder-editor button { min-height: 34px; padding: 6px 12px; }
.reminder-targets { margin: 0; padding: 0; min-width: 0; border: 0; }
.reminder-targets legend { margin-bottom: 4px; padding: 0; font-size: 13px; font-weight: 600; }
.reminder-options, .reminder-rule-options { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.reminder-settings input[type="checkbox"] { width: 18px; min-width: 18px; max-width: 18px; height: 18px; min-height: 18px; flex: 0 0 18px; border-radius: 5px; }
.reminder-check { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; font-size: 12px; cursor: pointer; }
.reminder-hint { margin: 4px 0 8px; }
.recipient-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 12px 0 7px; font-size: 12px; }
.recipient-toolbar [data-recipient-count] { color: var(--color-text-tertiary); font-size: 11px; }
.reminder-targets > input[type="search"] { width: 100%; min-height: 34px; padding: 6px 10px; font-size: 12px; margin-bottom: 8px; }
.recipient-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 4px 8px; max-height: 176px; overflow: auto; scrollbar-width: thin; overscroll-behavior: contain; padding: 2px; }
.recipient-option { min-width: 0; }
.recipient-option label { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 8px; border: 1px solid transparent; border-radius: 9px; cursor: pointer; font-size: 12px; line-height: 1.5; }
.recipient-option label:has(input:checked) { background: #eaf4ff; border-color: #d8e9fc; }
.recipient-option label:hover { background: #f0f6fc; }
.recipient-option label span { min-width: 0; overflow-wrap: anywhere; }
.reminder-days { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.reminder-days input { width: 70px; min-height: 34px; padding: 6px 8px; font-size: 13px; }
.reminder-editor textarea { width: 100%; max-width: none; min-height: 84px; font-size: 13px; line-height: 1.6; }
.reminder-template-help { color: var(--color-text-tertiary); font-size: 11px; }
.reminder-template-help summary { cursor: pointer; padding: 5px 0; }
.reminder-template-help p { margin: 4px 0; overflow-wrap: anywhere; line-height: 1.8; }
.reminder-test-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 18px; padding-top: 14px; border-top: 1px solid #e6edf3; }
.reminder-test-form .reminder-hint { margin: 0; }
.reminder-settings .form-field:has(> input[type="checkbox"]) { grid-template-columns: 18px minmax(0, max-content); }
.reminder-connections { display: grid; gap: 16px; }
.reminder-connections > .form-card { margin: 0; padding: 20px; }
@media (max-width: 1100px) and (min-width: 768px) {
  .reminder-workspace { grid-template-columns: 210px minmax(0, 1fr); gap: 12px; }
}
@media (max-width: 767px) {
  .reminder-workspace { grid-template-columns: minmax(0, 1fr); }
  .reminder-tabs { width: 100%; gap: 2px; }
  .reminder-tabs button { min-height: 44px; flex: 1; padding: 6px; font-size: 12px; }
  .reminder-directory > input, .reminder-targets > input[type="search"] { min-height: 44px; font-size: 16px; }
  .reminder-rule-list { max-height: 210px; }
  .reminder-rule-link { min-height: 52px; }
  .reminder-editor { padding: 16px; }
  .reminder-editor__header { align-items: flex-start; }
  .reminder-editor__header h2 { font-size: 18px; }
  .reminder-editbar { align-items: flex-start; }
  .recipient-grid { grid-template-columns: minmax(0, 1fr); max-height: 220px; }
  .recipient-option label, .reminder-check { min-height: 44px; }
  .reminder-editor button { min-height: 44px; }
  .reminder-editor textarea, .reminder-days input { font-size: 16px; }
}