/*
 * KOLSHI COMMAND / Dialog Experience v2 / 2026-10-09
 * Presentation layer only: no changes to finance, dispatch, Firebase, authorization,
 * CRUD handlers, form names, IDs, or validation rules.
 * Sizes reflect content type: small confirmation, medium form, large record, full ledger.
 */
:root {
  --dlg-surface: var(--bg-card, #fff);
  --dlg-canvas: var(--surface-muted, #f8f9fc);
  --dlg-outline: var(--border, #e6ebf2);
  --dlg-ink: var(--text-main, #192339);
  --dlg-subtext: var(--text-muted, #708097);
  --dlg-accent: var(--primary, #da3853);
  --dlg-gap: clamp(14px, 2.5vw, 32px);
}

/* Rebind semantic tokens in dark mode; inherited custom properties resolve on their declaring element. */
body.dark-mode {
  --dlg-surface: var(--bg-card);
  --dlg-canvas: var(--surface-muted);
  --dlg-outline: var(--border);
  --dlg-ink: var(--text-main);
  --dlg-subtext: var(--text-muted);
  --dlg-accent: var(--primary);
}

/* Overlay and consistent sizing: preserve original JS-driven show/hide semantics. */
.modal {
  padding: var(--dlg-gap);
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  overscroll-behavior: contain;
  background: rgba(9, 17, 33, .67);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}
.modal > .modal-content {
  --dialog-width: 720px;
  box-sizing: border-box;
  flex: 0 1 auto;
  width: min(100%, var(--dialog-width)) !important;
  max-width: var(--dialog-width) !important;
  max-height: calc(100dvh - var(--dlg-gap) - var(--dlg-gap)) !important;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden !important;
  color: var(--dlg-ink);
  background: var(--dlg-surface);
  border: 1px solid var(--dlg-outline);
  border-radius: 23px;
  box-shadow: 0 32px 95px rgba(6, 13, 30, .3), 0 4px 15px rgba(6, 13, 30, .09);
  animation: kolshi-dialog-enter .22s cubic-bezier(.2,.8,.2,1) both;
  isolation: isolate;
}
@keyframes kolshi-dialog-enter {
  from { opacity: 0; transform: translateY(14px) scale(.988); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Four clear size tiers, including dynamically mounted finance and support dialogs. */
#user-detail-modal > .modal-content { --dialog-width: 860px; }
#settings-action-modal > .modal-content { --dialog-width: 880px; }
#settings-action-modal.wide-modal > .modal-content { --dialog-width: 1260px; }
#settings-action-modal:has(.zone-editor-layout) > .modal-content { --dialog-width: 1200px; }
#order-modal > .modal-content { --dialog-width: 1120px; }
#order-modal.support-store-movement-modal > .modal-content { --dialog-width: 1490px; }
#operations-candidate-modal > .modal-content { --dialog-width: 870px; }
#finance-v5-settlement-modal > .modal-content { --dialog-width: 1080px; }
#finance-v5-financial-confirm-modal > .modal-content { --dialog-width: 760px; }
#finance-v5-reconciliation-adjustment-modal > .modal-content { --dialog-width: 750px; }
#company-finance-payment-modal > .modal-content { --dialog-width: 950px; }
#company-finance-payment-detail-modal > .modal-content { --dialog-width: 1140px; }
#am-daily-receipt-details-modal > .modal-content { --dialog-width: 1330px; }
#am-store-payment-modal > .modal-content,
#am-selected-store-settlement-modal > .modal-content { --dialog-width: 600px; }
.modal > .modal-content.am-transaction-modal { --dialog-width: 730px; }
.modal > .modal-content:has(#admin-reauth-form) { --dialog-width: 470px; }
#finance-v5-driver-receipt-orders-modal > .modal-content {
  --dialog-width: min(1630px, calc(100vw - 24px));
  height: min(96dvh, 1220px);
  max-height: calc(100dvh - 24px) !important;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}
#finance-v5-driver-receipt-orders-modal {
  --dlg-gap: 12px;
}
/* Structural scrolling: title & actions stay visible while long content scrolls. */
.modal > .modal-content > form,
.modal > .modal-content > .modal-form {
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal .modal-header {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  min-height: 78px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 19px clamp(18px, 2vw, 30px) 19px clamp(18px, 2vw, 30px);
  border: 0;
  border-bottom: 1px solid var(--dlg-outline);
  border-radius: 0;
  background: var(--dlg-surface);
  color: var(--dlg-ink);
}
.modal .modal-header:not(.finance-v5-final-confirm-header)::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 24px;
  bottom: 24px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--dlg-accent);
}
.modal .modal-header > :first-child { min-width: 0; }
.modal .modal-header h3 {
  margin: 0;
  font-size: clamp(16px, 1.12vw, 19px);
  line-height: 1.5;
  font-weight: 900;
  letter-spacing: -.025em;
  color: var(--dlg-ink);
  overflow-wrap: anywhere;
}
.modal .modal-header p, .modal .modal-header small {
  display: block;
  margin-block-start: 4px;
  color: var(--dlg-subtext);
  font-size: 12px;
  line-height: 1.75;
}
.modal .btn-close-modal {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  padding: 0;
  border: 1px solid var(--dlg-outline);
  border-radius: 13px;
  color: var(--dlg-subtext);
  background: var(--dlg-canvas);
  font-size: 16px;
  transition: border-color .16s, background .16s, color .16s;
}
.modal .btn-close-modal:hover {
  background: var(--soft-primary, #fff1f3);
  border-color: var(--dlg-accent);
  color: var(--dlg-accent);
}
.modal .btn-close-modal:focus-visible,
.finance-v5-preview-modal button:focus-visible,
.exec-detail-modal button:focus-visible {
  outline: 3px solid var(--focus-ring, rgba(218,56,83,.25));
  outline-offset: 3px;
}
.modal .modal-body {
  min-height: 0;
  min-width: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding: clamp(17px, 2vw, 28px);
  color: var(--dlg-ink);
  background: var(--dlg-surface);
  scrollbar-width: thin;
  scrollbar-color: #bac5d6 transparent;
}
.modal .modal-footer {
  z-index: 1;
  min-width: 0;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px clamp(18px, 2vw, 28px);
  border: 0;
  border-top: 1px solid var(--dlg-outline);
  border-radius: 0;
  background: var(--dlg-canvas);
}
.modal .modal-footer > button,
.modal .modal-footer > .btn-primary,
.modal .modal-footer > .btn-secondary,
.modal .modal-footer > .btn-danger {
  min-height: 43px;
  min-width: 105px;
  max-width: 100%;
  padding: 9px 16px;
  border-radius: 11px;
  font-size: 12px;
  font-weight: 800;
  white-space: normal;
  line-height: 1.55;
  transition: background-color .16s ease, border-color .16s ease, transform .16s ease;
}
.modal .modal-footer > button:active:not(:disabled) { transform: translateY(1px); }
.modal .modal-footer > .btn-secondary,
.modal .modal-footer > button.btn-secondary {
  border: 1px solid var(--dlg-outline);
  color: var(--dlg-ink);
  background: var(--dlg-surface);
}
.modal .modal-footer > .btn-secondary:hover { border-color: var(--dlg-accent); color: var(--dlg-accent); }

/* Form rhythm: make long forms scannable without modifying values or validation. */
.modal .modal-body :where(.form-group, .input-group) { min-width: 0; }
.modal .modal-body :where(.form-group > label, label:not(.toggle-switch)):not(.btn)) {
  font-size: 12px;
  line-height: 1.6;
  font-weight: 750;
}
.modal .modal-body :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]), select, textarea) {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  min-height: 43px;
  border-radius: 11px;
  border-color: var(--dlg-outline);
  background: var(--dlg-surface);
  color: var(--dlg-ink);
}
.modal .modal-body :where(input:not([type="checkbox"]):not([type="radio"]),select,textarea):focus {
  border-color: var(--dlg-accent);
  box-shadow: 0 0 0 3px var(--focus-ring, rgba(218,56,83,.15));
}
.modal .modal-body :where(textarea) { min-height: 88px; line-height: 1.7; resize: vertical; }
.modal .modal-body :where(.form-row, .form-grid, .finance-v5-form-grid, .finance-v5-settlement-form-grid) > * { min-width: 0; }
.modal .modal-body :where(.settings-modal-item, .user-info-grid > div, .user-docs-grid > div,
  .order-detail-grid > div, .am-detail-field, .finance-v5-summary-card) {
  border: 1px solid var(--dlg-outline);
  border-radius: 13px;
  background: var(--dlg-canvas);
  color: var(--dlg-ink);
  box-shadow: none;
}
.modal .modal-body :where(.settings-modal-list, .order-items-list, .am-detail-grid) { gap: 12px; }
.modal .modal-body :where(.settings-modal-item-head, .order-item-row) { gap: 10px; }
.modal .modal-body :where(.order-item-row, .order-total-row) { border-color: var(--dlg-outline); }
.modal .modal-body :where(.order-total-row, .am-transaction-summary, .am-transaction-hero) {
  background: var(--soft-primary, #fff1f3);
  color: var(--dlg-ink);
  border-radius: 12px;
}
.modal .modal-body :where(.am-table, .table-responsive, .finance-v5-table-wrap) {
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: thin;
}
.modal .modal-body :where(.am-table table, .data-table) { min-width: min(100%, 500px); }

/* Special-purpose dialogs retain their dedicated business layouts. */
#settings-action-modal:has(.zone-editor-layout) .modal-body { padding: 18px 22px; }
#settings-action-modal:has(.zone-editor-layout) .zone-editor-layout { align-items: stretch; }
#settings-action-modal:has(.zone-editor-layout) .zone-editor-panel { min-width: 0; }
#settings-action-modal:has(.zone-editor-layout) .zone-editor-map-shell { min-width: 0; }
#operations-candidate-modal .operations-candidate-modal-content {
  background: var(--ops-surface, var(--dlg-surface));
  color: var(--ops-text, var(--dlg-ink));
}
#operations-candidate-modal .operations-modal-head { padding: 20px 25px; }
#operations-candidate-modal .operations-modal-head::before { display: none; }
#operations-candidate-modal .operations-modal-head h3 { color: var(--ops-text, var(--dlg-ink)); }
#operations-candidate-modal .operations-candidate { border-radius: 15px; padding: 17px; }
#operations-candidate-modal .operations-modal-bottom {
  padding: 15px 23px;
  border-top: 1px solid var(--ops-border, var(--dlg-outline));
  color: var(--ops-muted, var(--dlg-subtext));
  background: var(--ops-muted-surface, var(--dlg-canvas));
}
#operations-details-layer .operations-details-drawer {
  width: min(490px, 94vw);
  border-color: var(--ops-border, var(--dlg-outline));
  box-shadow: -28px 0 72px rgba(9,17,33,.22);
}
#operations-details-layer .operations-details-drawer > header { min-height: 79px; padding: 19px 22px; }
#operations-details-layer .operations-details-close { min-width: 43px; min-height: 43px; border-radius: 12px; }
#operations-details-layer .operations-details-body { padding: 22px; scrollbar-width: thin; }
#operations-details-layer .operations-detail-item,
#operations-details-layer .operations-detail-address,
#operations-details-layer .operations-account-row { padding: 13px; border-radius: 12px; }

/* Financial confirmation has its own intentionally high-contrast warning header. */
#finance-v5-financial-confirm-modal .finance-v5-final-confirm-header {
  min-height: 108px;
  background: #1a2438;
  color: #fff;
  border-bottom: 3px solid var(--dlg-accent);
  padding: 23px 28px;
}
#finance-v5-financial-confirm-modal .finance-v5-final-confirm-header h3 { color: #fff; }
#finance-v5-financial-confirm-modal .finance-v5-final-confirm-header .btn-close-modal {
  color: #fff;
  border-color: rgba(255,255,255,.2);
  background: rgba(255,255,255,.09);
}
#finance-v5-financial-confirm-modal .finance-v5-final-confirm-body {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  background: var(--dlg-surface);
  color: var(--dlg-ink);
}
#finance-v5-driver-receipt-orders-modal .finance-v5-driver-receipt-modal-body { overflow-y: auto; min-height: 0; }
#finance-v5-driver-receipt-orders-modal .finance-v5-reconciliation-modal-header { min-height: 82px; }
#finance-v5-driver-receipt-orders-modal .finance-v5-reconciliation-modal-footer { min-height: 70px; }
#finance-v5-driver-receipt-orders-modal .finance-v5-reconciliation-hero { border-radius: 13px; }

/* Separate report preview component, deliberately not affected by .modal selectors. */
.finance-v5-preview-modal {
  padding: clamp(12px, 2vw, 26px);
  background: rgba(9,17,33,.67);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}
.finance-v5-preview-content {
  box-sizing: border-box;
  width: min(100%, 1090px);
  max-width: 1090px;
  max-height: calc(100dvh - 28px);
  height: min(92dvh, 1050px);
  background: var(--dlg-surface);
  border: 1px solid var(--dlg-outline);
  border-radius: 23px;
  box-shadow: 0 28px 90px rgba(6,13,30,.3);
}
.finance-v5-preview-header {
  flex: 0 0 auto;
  min-height: 73px;
  padding: 16px 24px;
  background: var(--dlg-surface);
  border-color: var(--dlg-outline);
}
.finance-v5-preview-header h3 { color: var(--dlg-ink); font-weight: 900; font-size: 18px; }
.finance-v5-preview-body { min-height: 0; overflow-y: auto; padding: clamp(12px, 2vw, 27px); background: var(--dlg-canvas); }
.finance-v5-preview-footer {
  flex: 0 0 auto;
  background: var(--dlg-surface);
  border-top: 1px solid var(--dlg-outline);
  padding: 13px 22px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 9px;
}
.finance-v5-preview-footer button { min-height: 43px; border-radius: 11px; }

/* Executive detail sheet: constrain tall content and keep close action discoverable. */
.exec-detail-modal { padding: 16px; }
.exec-detail-sheet {
  box-sizing: border-box;
  width: min(810px, 100%);
  max-height: calc(100dvh - 32px);
  background: var(--dlg-surface);
  color: var(--dlg-ink);
  border: 1px solid var(--dlg-outline);
  border-radius: 22px;
  box-shadow: 0 25px 82px rgba(9,17,33,.22);
  scrollbar-width: thin;
  overscroll-behavior: contain;
}
.exec-detail-close { min-width: 44px; min-height: 44px; background: var(--dlg-canvas); }
.exec-detail-stat, .exec-detail-list > div, .exec-detail-alert {
  background: var(--dlg-canvas);
  color: var(--dlg-ink);
  border: 1px solid var(--dlg-outline);
  border-radius: 13px;
}

/* Tablet widths and interior density */
@media (max-width: 1024px) {
  #settings-action-modal.wide-modal .zone-editor-layout,
  #settings-action-modal:has(.zone-editor-layout) .zone-editor-layout { grid-template-columns: 1fr; }
  .modal .modal-body :where(.user-info-grid, .user-docs-grid, .finance-v5-settlement-layout) { min-width: 0; }
  #operations-details-layer .operations-details-drawer { width: min(460px, 95vw); }
}
@media (max-width: 760px) {
  .modal { --dlg-gap: 10px; }
  .modal > .modal-content { border-radius: 18px; }
  .modal .modal-header { min-height: 69px; padding: 15px 17px; }
  .modal .modal-header h3 { font-size: 16px; }
  .modal .modal-body { padding: 16px; }
  .modal .modal-footer { padding: 12px 16px; }
  .modal .modal-footer > button { min-width: 100px; }
  #operations-details-layer .operations-details-drawer { width: min(430px, 96vw); }
  #settings-action-modal:has(.zone-editor-layout) .modal-body { padding: 15px; }
  #settings-action-modal:has(.zone-editor-layout) .zone-editor-layout { grid-template-columns: 1fr; }
  .modal .modal-body :where(.finance-v5-summary-grid) { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px) {
  /* Small tasks = bottom sheet; data-heavy workspaces = readable full screen. */
  .modal { --dlg-gap: 0px; padding: 0; align-items: flex-end; }
  .modal > .modal-content {
    width: 100% !important;
    max-width: 100% !important;
    max-height: min(92dvh, 950px) !important;
    border-inline: 0;
    border-bottom: 0;
    border-radius: 22px 22px 0 0;
    animation: kolshi-sheet-enter .2s cubic-bezier(.2,.8,.2,1) both;
  }
  @keyframes kolshi-sheet-enter { from { opacity:.65; transform:translateY(35px); } to { opacity:1; transform:translateY(0); } }
  .modal .modal-header { min-height: 70px; padding: 14px 16px; gap: 12px; }
  .modal .modal-header h3 { font-size: 16px; }
  .modal .modal-header::before { top: 21px; bottom: 21px; }
  .modal .btn-close-modal { width: 42px; height: 42px; min-width: 42px; }
  .modal .modal-body { padding: 15px; }
  .modal .modal-footer {
    padding: 12px 15px calc(12px + env(safe-area-inset-bottom));
    gap: 8px;
  }
  .modal .modal-footer > button {
    flex: 1 1 120px;
    min-width: 0;
    min-height: 46px;
  }
  .modal .modal-body :where(.form-row, .finance-v5-form-grid,
  .finance-v5-settlement-form-grid, .am-detail-grid, .user-info-grid, .user-docs-grid,
  .order-detail-grid) { grid-template-columns: 1fr; }
  .modal .modal-body :where(.finance-v5-summary-grid) { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .modal .modal-body :where(.finance-v5-summary-grid) > * { min-width: 0; }
  #order-modal,
  #user-detail-modal,
  #settings-action-modal.wide-modal,
  #settings-action-modal:has(.zone-editor-layout),
  #am-daily-receipt-details-modal,
  #company-finance-payment-detail-modal,
  #finance-v5-settlement-modal,
  #finance-v5-driver-receipt-orders-modal,
  #operations-candidate-modal { align-items: stretch; }
  #order-modal > .modal-content,
  #user-detail-modal > .modal-content,
  #settings-action-modal.wide-modal > .modal-content,
  #settings-action-modal:has(.zone-editor-layout) > .modal-content,
  #am-daily-receipt-details-modal > .modal-content,
  #company-finance-payment-detail-modal > .modal-content,
  #finance-v5-settlement-modal > .modal-content,
  #finance-v5-driver-receipt-orders-modal > .modal-content,
  #operations-candidate-modal > .modal-content {
    height: 100dvh;
    max-height: 100dvh !important;
    border-radius: 0;
  }
  #finance-v5-financial-confirm-modal .finance-v5-final-confirm-header { min-height: 95px; padding: 16px; }
  #finance-v5-driver-receipt-orders-modal { padding: 0; }
  #operations-details-layer .operations-details-drawer {
    width: 100vw;
    max-width: 100%;
    border: 0;
    box-shadow: -13px 0 48px rgba(0,0,0,.18);
  }
  #operations-details-layer .operations-details-body { padding: 16px; }
  .finance-v5-preview-modal { padding: 0; }
  .finance-v5-preview-content { width: 100vw; height: 100dvh; max-height: 100dvh; border: 0; border-radius: 0; }
  .finance-v5-preview-header { min-height: 70px; padding: 13px 16px; }
  .finance-v5-preview-body { padding: 12px; }
  .finance-v5-preview-footer { padding: 11px 13px calc(11px + env(safe-area-inset-bottom)); }
  .finance-v5-preview-footer button { flex: 1 1 auto; }
  .finance-v5-report-paper { padding: 17px; }
  .exec-detail-modal { padding: 0; align-items: stretch; }
  .exec-detail-sheet { width: 100vw; height: 100dvh; max-height: 100dvh; border: 0; border-radius: 0; padding: 16px; }
  .exec-detail-stat-grid,.exec-detail-list { grid-template-columns: 1fr; }
}
@media (max-width: 350px) {
  .modal .modal-header h3 { font-size: 15px; }
  .modal .modal-footer > button { flex-basis: 100%; }
  #operations-candidate-modal .operations-modal-head { padding: 14px 15px; }
}
body.dark-mode .modal > .modal-content,
body.dark-mode .modal .modal-header,
body.dark-mode .finance-v5-preview-content,
body.dark-mode .finance-v5-preview-header {
  background: var(--dlg-surface);
  color: var(--dlg-ink);
}
body.dark-mode .modal .modal-footer,
body.dark-mode .finance-v5-preview-footer { background: var(--dlg-canvas); }
body.dark-mode .modal .modal-body :where(.settings-modal-item, .user-info-grid > div,
  .user-docs-grid > div, .order-detail-grid > div, .am-detail-field),
body.dark-mode .exec-detail-stat,
body.dark-mode .exec-detail-list > div,
body.dark-mode .exec-detail-alert {
  background: var(--dlg-canvas);
  color: var(--dlg-ink);
  border-color: var(--dlg-outline);
}
@media (prefers-reduced-motion: reduce) {
  .modal > .modal-content { animation: none; }
  .modal .btn-close-modal, .modal .modal-footer > button { transition: none; }
}
@media print {
  /* Finance/receipt printable output is implemented in the existing print stylesheet. */
  .modal { -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none; }
}

/* Photo proof/document lightbox: visible dismissal instead of backdrop-only discovery. */
.image-lightbox {
  padding: clamp(12px, 3vw, 32px);
  background: rgba(8, 14, 26, .88);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.image-lightbox img {
  max-width: min(1100px, 93vw);
  max-height: 88dvh;
  width: auto;
  height: auto;
  object-fit: contain;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 16px;
  box-shadow: 0 28px 95px rgba(0,0,0,.55);
}
.kolshi-lightbox-close {
  position: absolute;
  inset-inline-end: max(16px, env(safe-area-inset-right));
  inset-block-start: max(16px, env(safe-area-inset-top));
  z-index: 1;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255,255,255,.26);
  border-radius: 14px;
  background: rgba(255,255,255,.14);
  color: #fff;
  font: inherit;
  font-size: 18px;
  cursor: pointer;
}
.kolshi-lightbox-close:hover { background: rgba(255,255,255,.28); }
.kolshi-lightbox-close:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (max-width: 640px) {
  .image-lightbox img { max-width: 96vw; max-height: 82dvh; border-radius: 10px; }
}