/* Shared shell for every modal overlay/dialog below - each #xOverlay only
   sets its own background tint and stacking order (plus, occasionally, a
   layout tweak like progressOverlay's flex-direction), and each #xDialog
   only sets its own max-width (plus, occasionally, position:relative for a
   floating .dialog-close-btn, or a border-top accent color). reviewDialog
   and companyFilterReminderDialog opt out entirely - both differ too much
   (full-size flex layout; centered/padded promo card) to share this shell. */
.dialog-overlay {
  display: none;
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  align-items: center; justify-content: center;
}
.dialog-overlay.active { display: flex; }
.dialog-box {
  background: #fff; border-radius: 8px; width: 90%;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  padding: 20px;
}
.dialog-close-btn {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px; border-radius: 50%;
  background: none; border: none; padding: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; line-height: 1; color: #706E6B; cursor: pointer;
}
.dialog-close-btn:hover { background: var(--sf-bg); color: var(--sf-text); }

#progressOverlay { background: rgba(255, 255, 255, 0.92); flex-direction: column; z-index: 1000; }
#progressContainer { width: 90%; max-width: 320px; }
#progressBarTrack {
  width: 100%; height: 10px; background: var(--sf-bg);
  border: 1px solid var(--sf-border); border-radius: 999px; overflow: hidden;
}
#progressBarFill {
  height: 100%; width: 0%; background: var(--sf-blue);
  transition: width 0.3s ease;
}
#progressText { margin-top: 10px; font-size: 0.9rem; color: var(--sf-navy); font-weight: 600; text-align: center; }

#cifOverlay { background: rgba(0, 0, 0, 0.45); z-index: 1800; }
#cifDialog { max-width: 420px; }
#cifDialogTitle { margin: 0 0 10px; color: var(--sf-navy); font-size: 1.05rem; }
#cifDialogHint { margin: 0 0 14px; font-size: 0.85rem; color: #706E6B; line-height: 1.5; }
#cifInputWrapper { position: relative; margin-bottom: 16px; }
#cifInput {
  width: 100%; box-sizing: border-box; padding: 8px 10px;
  border: 1px solid var(--sf-border); border-radius: 4px; font-size: 0.9rem;
}
#cifInput:focus { outline: none; border-color: var(--sf-blue); box-shadow: 0 0 0 1px var(--sf-blue); }
#cifInputWrapper .combo-dropdown { left: 0; right: 0; }
#cifDialogButtons { display: flex; justify-content: flex-end; gap: 10px; }

#changePasswordOverlay { background: rgba(0, 0, 0, 0.45); z-index: 1900; }
#changePasswordDialog { max-width: 380px; }
#changePasswordDialog h3 { margin: 0 0 14px; color: var(--sf-navy); font-size: 1.05rem; }
#changePasswordButtons { display: flex; justify-content: flex-end; gap: 10px; }
#importMappingsOverlay { background: rgba(0, 0, 0, 0.45); z-index: 1900; }
#importMappingsDialog { position: relative; max-width: 560px; }
#importMappingsDialog h3 { margin: 0 32px 10px 0; color: var(--sf-navy); font-size: 1.05rem; }

#mappingConfirmOverlay { background: rgba(0, 0, 0, 0.45); z-index: 1900; }
#mappingConfirmDialog { max-width: 640px; }
#mappingConfirmDialog h3 { margin: 0 0 6px; color: var(--sf-navy); font-size: 1.05rem; }
#mappingConfirmTableWrapper { max-height: 320px; overflow-y: auto; margin-bottom: 16px; }
#mappingConfirmTable { width: 100%; border-collapse: collapse; }
#mappingConfirmTable th, #mappingConfirmTable td {
  border: 1px solid var(--sf-border); padding: 6px 8px; text-align: left; font-size: 0.85rem;
}
#mappingConfirmTable th { background: var(--sf-bg); position: sticky; top: 0; }
#mappingConfirmTable .value-before { color: var(--sf-red); }
#mappingConfirmTable .value-after { color: #2E844A; font-weight: 600; }
#mappingConfirmButtons { display: flex; justify-content: flex-end; gap: 10px; }

#spendingLimitOverlay { background: rgba(0, 0, 0, 0.45); z-index: 1900; }
#spendingLimitDialog { max-width: 440px; border-top: 4px solid var(--sf-red); }
#spendingLimitDialog.close-warning { border-top-color: #B25400; }
#spendingLimitDialogTitle { margin: 0 0 10px; color: var(--sf-navy); font-size: 1.05rem; }
#spendingLimitDialogMessage { margin: 0 0 14px; font-size: 0.9rem; color: var(--sf-text); line-height: 1.5; }
#spendingLimitDialogBreakdown {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 0.85rem; color: #706E6B; margin-bottom: 18px;
  padding: 12px 14px; background: var(--sf-bg); border-radius: 6px;
}
.spending-limit-row { display: flex; justify-content: space-between; gap: 12px; }
.spending-limit-row .value { color: var(--sf-navy); font-weight: 600; }
#spendingLimitDialogButtons { display: flex; justify-content: flex-end; gap: 10px; }

#errorOverlay { background: rgba(0, 0, 0, 0.45); z-index: 2000; }
#errorDialog { max-width: 420px; border-top: 4px solid var(--sf-red); }
#errorDialog.success { border-top-color: #2E844A; }
#errorDialog.info { border-top-color: var(--sf-border); }
#errorDialogTitle {
  display: flex; align-items: center; gap: 8px;
  font-size: 1.05rem; font-weight: 700; color: var(--sf-red); margin: 0 0 12px;
}
#errorDialogTitle.success { color: #2E844A; }
#errorDialogTitle.info { color: var(--sf-navy); }
#errorDialogIcon {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--sf-red); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.85rem; flex-shrink: 0;
}
#errorDialogIcon.success { background: #2E844A; }
#errorDialogIcon.info { background: var(--sf-navy); }
#errorDialogMessage { font-size: 0.9rem; color: var(--sf-text); line-height: 1.5; margin: 0 0 20px; }
#errorDialogButtons { text-align: right; }

#reviewOverlay { background: rgba(0, 0, 0, 0.5); z-index: 1500; padding: 24px 48px; }
#reviewDialog {
  position: relative;
  background: #fff; border-radius: 8px;
  width: 100%; height: 100%;
  padding: 20px; display: flex; flex-direction: column;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
#reviewTitle { margin: 0 32px 4px 0; color: var(--sf-navy); font-size: 1.1rem; }
#reviewSubtitle { margin: 0 0 2px; font-size: 0.85rem; color: #706E6B; }
#reviewPagination { margin: 0 0 14px; font-size: 0.8rem; color: #706E6B; }
#reviewContent { display: flex; gap: 16px; flex: 1; min-height: 0; }
#reviewPreview {
  flex: 1 1 auto; min-width: 0;
  border: 1px solid var(--sf-border); border-radius: 4px;
  overflow: auto; background: var(--sf-bg);
  display: flex; align-items: center; justify-content: center;
}
#reviewPreview img { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; object-fit: contain; }
#reviewPreview embed { width: 100%; height: 100%; border: none; }
#reviewPreview pre {
  white-space: pre-wrap; word-break: break-word; padding: 12px;
  font-size: 0.8rem; margin: 0; text-align: left; width: 100%;
}
#reviewForm { width: 340px; flex: 0 0 340px; overflow-y: auto; padding-right: 4px; }
.review-field { margin-bottom: 12px; }
.review-field label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--sf-navy); margin-bottom: 4px; }
.review-field input {
  width: 100%; padding: 8px 10px; border: 1px solid var(--sf-border); border-radius: 4px; font-size: 0.9rem;
}
.review-field input.review-missing { border-color: var(--sf-red); background: #FDECEA; }
.conflict-info { font-size: 0.8rem; color: var(--sf-navy); margin: 0 0 8px; }
.conflict-option { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 400; margin-bottom: 6px; cursor: pointer; }
#reviewButtons { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; }

#createUserOverlay { background: rgba(0, 0, 0, 0.45); z-index: 1900; }
#createUserDialog { position: relative; max-width: 420px; }
#createUserDialog h3 { margin: 0 32px 10px 0; color: var(--sf-navy); font-size: 1.05rem; }
#createUserDialog label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--sf-navy); margin: 10px 0 4px; }
#createUserDialog label:first-child { margin-top: 0; }
/* Rol isn't wrapped in .field-input-wrap (see base.css) - it always has a
   valid default value, so it gets no status dot/check, just this dialog's
   own matching base style instead of the browser-default select look. */
#createUserDialog select {
  width: 100%; box-sizing: border-box; padding: 8px 10px;
  border: 1px solid var(--sf-border); border-radius: 4px; font-size: 0.9rem;
}
#createUserDialog select:focus {
  outline: none; border-color: var(--sf-blue); box-shadow: 0 0 0 1px var(--sf-blue);
}
#createUserButtons { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }

#editUserOverlay { background: rgba(0, 0, 0, 0.45); z-index: 1900; }
#editUserDialog { position: relative; max-width: 420px; }
#editUserDialog h3 { margin: 0 32px 10px 0; color: var(--sf-navy); font-size: 1.05rem; }
#editUserDialog label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--sf-navy); margin: 10px 0 4px; }
#editUserDialog label:first-child { margin-top: 0; }
/* Rol isn't wrapped in .field-input-wrap (see base.css) - it always has a
   valid value from the user being edited, so it gets no status dot/check,
   just this dialog's own matching base style instead of the browser-default
   select look (same as #createUserDialog select). */
#editUserDialog select {
  width: 100%; box-sizing: border-box; padding: 8px 10px;
  border: 1px solid var(--sf-border); border-radius: 4px; font-size: 0.9rem;
}
#editUserDialog select:focus {
  outline: none; border-color: var(--sf-blue); box-shadow: 0 0 0 1px var(--sf-blue);
}
#editUserButtons { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }

#createMappingOverlay { background: rgba(0, 0, 0, 0.45); z-index: 1900; }
#createMappingDialog { position: relative; max-width: 420px; }
#createMappingDialog h3 { margin: 0 32px 10px 0; color: var(--sf-navy); font-size: 1.05rem; }
#createMappingDialog label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--sf-navy); margin: 10px 0 4px; }
#createMappingDialog label:first-of-type { margin-top: 0; }
#createMappingClientCifWrapper { position: relative; }
#createMappingClientCifWrapper .combo-dropdown { left: 0; right: 0; }
#createMappingDialog input {
  width: 100%; box-sizing: border-box; padding: 8px 10px;
  border: 1px solid var(--sf-border); border-radius: 4px; font-size: 0.9rem;
}
#createMappingDialog input:focus {
  outline: none; border-color: var(--sf-blue); box-shadow: 0 0 0 1px var(--sf-blue);
}
#createMappingButtons { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
#createMappingStatus { font-size: 0.8rem; color: var(--sf-red); margin-top: 8px; }

/* Shown once per login (see common/global-company-filter.js) - deliberately
   bigger/more central than the other dialogs above (wider dialog, larger
   title, centered text) since its whole job is to be the first thing a
   user notices, not a routine confirmation. */
#companyFilterReminderOverlay { background: rgba(0, 0, 0, 0.5); z-index: 2100; }
#companyFilterReminderDialog {
  background: #fff; border-radius: 10px; max-width: 480px; width: 92%;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
  padding: 32px 28px; text-align: center; box-sizing: border-box;
}
#companyFilterReminderDialog h3 { margin: 0 0 16px; color: var(--sf-navy); font-size: 1.3rem; }
#companyFilterReminderMessage { margin: 0 0 20px; color: var(--sf-text); font-size: 0.95rem; line-height: 1.5; }
.company-filter-reminder-active-name { color: var(--sf-blue); font-weight: 700; }
/* The company picker below the message - lets the user filter right from
   this popup instead of having to go find the real header control the
   first time it appears (see common/global-company-filter.js). Hidden for
   the "0 known clients" and "already filtering" variants, which have
   nothing to pick. */
#companyFilterReminderPicker { display: none; position: relative; text-align: left; margin-bottom: 20px; }
#companyFilterReminderPicker.visible { display: block; }
#companyFilterReminderSearchInput {
  width: 100%; box-sizing: border-box; padding: 8px 12px; margin-bottom: 8px;
  border: 1px solid var(--sf-border); border-radius: 999px; font-size: 0.85rem;
}
#companyFilterReminderSearchInput:focus { outline: none; border-color: var(--sf-blue); box-shadow: 0 0 0 1px var(--sf-blue); }
/* Floats over the dialog instead of taking up layout space, so opening it
   never grows/reflows the popup - closed by default (see the search
   input's focus/input/blur handlers in common/global-company-filter.js),
   shown only while actually searching. Capped to ~5 rows (each
   .combo-dropdown-option is ~36px - padding 8px top/bottom + ~0.85rem
   text): a 6th result scrolls instead of growing the dropdown further. */
#companyFilterReminderPickerList {
  display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30;
  background: #fff; border: 1px solid var(--sf-border); border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  max-height: 180px; overflow-y: auto;
}
#companyFilterReminderPickerList.open { display: block; }
/* <=3 known clients (see COMPANY_FILTER_REMINDER_CARD_THRESHOLD): one big
   tappable rectangle per company instead of the search box + narrow list -
   with this few, seeing every option at a glance beats typing. Always
   visible (not a dropdown) and back in normal flow, since there's no
   search input here to anchor a float to. */
#companyFilterReminderPickerList.card-list {
  display: flex; position: static; flex-direction: column; gap: 8px;
  max-height: none; overflow: visible; border: none; box-shadow: none;
}
.company-filter-reminder-card {
  padding: 16px; border: 1px solid var(--sf-border); border-radius: 6px;
  font-size: 0.9rem; font-weight: 600; color: var(--sf-navy); text-align: center;
  cursor: pointer; background: #fff;
}
.company-filter-reminder-card:hover { border-color: var(--sf-blue); background: var(--sf-bg); }
#companyFilterReminderButtons { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }