/**
 * File:          public/css/large_dialogs.css
 * Version:       0.1.1
 * Last Modified: 2026-11-02 07:50 AM EST
 * Changes:       0.1.1 — Critic: real backdrop (no click-through) replaces the shadow dim; Voice notes is large too.
 * Changes:       New. Dialogs fill most of the screen on tablets and desktops (Jeff: "these dialog windows
 *                should fill a bigger portion of the screen on larger screens"). Phone sizes (≤768px) are
 *                unchanged. Same three sizes as the Apple apps (Council/Views/KoraSheetSizing.swift):
 *                  large  — 90% of the width (max 1280px), 90% of the height: title sheet, Export, Create
 *                           image, Settings, Guide, Member / Council editors, Skills, Google pickers, tours,
 *                           assignment plan, Voice notes.
 *                  medium — 66% of the width (max 900px): Filters, Google Doc link.
 *                  full   — the whole window less a 12px edge: Full screen reply (text column ≤1100px).
 *                Export / Create image / Filters get a real backdrop (js/large_dialog_backdrop.js) that takes
 *                the click. Loaded last so it wins; !important beats inline styles set by older scripts.
 *                Also (L1, no blue): the Export JSON button, Full screen reply links and the selected Member
 *                editor section are no longer blue.
 */

:root {
  --kd-large-w: min(1280px, max(90vw, 640px), calc(100vw - 32px));
  --kd-large-h: min(max(90dvh, 560px), calc(100dvh - 32px));
  --kd-medium-w: min(900px, max(66vw, 560px), calc(100vw - 32px));
  --kd-medium-h: min(max(72dvh, 480px), calc(100dvh - 32px));
}

@media (min-width: 769px) {
  /* ── large: content that scrolls inside a fixed-size dialog ── */
  .c2-sheet.is-centered {
    width: var(--kd-large-w) !important; height: var(--kd-large-h) !important; max-height: none !important;
  }
  #settingsModal .settings-panel {
    max-width: none !important; width: var(--kd-large-w) !important;
    height: var(--kd-large-h) !important; max-height: none !important; margin: 0 auto !important;
  }
  .help-modal {
    max-width: none !important; width: var(--kd-large-w) !important;
    height: var(--kd-large-h) !important; max-height: none !important;
  }
  .mw-dialog, .mw-member-settings-dialog {
    max-width: none !important; width: var(--kd-large-w) !important; max-height: var(--kd-large-h) !important;
  }
  #vn-modal .vn-box {
    max-width: none !important; width: var(--kd-large-w) !important; max-height: var(--kd-large-h) !important;
  }
  #showme-index-card {
    width: var(--kd-large-w) !important; max-height: var(--kd-large-h) !important;
  }
  #assignment-plan-overlay > div {
    max-width: none !important; width: var(--kd-large-w) !important; max-height: var(--kd-large-h) !important;
  }
  #gattach-drive-picker > div, #gattach-connect-modal > div, #gattach-drive-fallback > div, #gattach-photos-wait > div {
    max-width: none !important; width: var(--kd-large-w) !important; max-height: var(--kd-large-h) !important;
  }

  /* ── large, centred: popovers that used to sit in a corner (Export, Create image, Skills) ── */
  #exportPopup.visible,
  #imageGenPopup,
  #skills-picker {
    left: 50% !important; right: auto !important; top: 50% !important; bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    width: var(--kd-large-w) !important; max-width: none !important; max-height: var(--kd-large-h) !important;
    overflow-y: auto; box-sizing: border-box; box-shadow: 0 24px 80px rgba(0, 0, 0, .55) !important;
  }
  #exportPopup.visible { padding: 24px 28px !important; }
  #exportPopup .export-popup-title { font-size: 18px; margin-bottom: 16px; }
  #exportPopup .export-popup-dates > * { flex: 1 1 260px; }
  #skills-picker-backdrop { background: rgba(0, 0, 0, .6) !important; }
  /* A real backdrop under the open Export / Create image / Filters popover (js/large_dialog_backdrop.js):
     it dims the page and takes the click, so nothing behind it runs. */
  #kd-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .6); }
  #kd-backdrop[hidden] { display: none; }

  /* ── medium ── */
  #desktop-filters-popover.open {
    left: 50% !important; top: 50% !important; right: auto !important; bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    width: var(--kd-medium-w) !important; max-height: var(--kd-medium-h) !important; box-sizing: border-box;
    padding: 22px 24px !important; box-shadow: 0 24px 80px rgba(0, 0, 0, .55) !important;
  }
  #gdoc-modal > div { max-width: none !important; width: var(--kd-medium-w) !important; }

  /* ── full: Full screen reply ── */
  #card-fullscreen-overlay { padding: 12px !important; }
  #card-fullscreen-box {
    max-width: none !important; width: calc(100vw - 24px) !important;
    height: calc(100dvh - 24px) !important; max-height: none !important;
  }
  #card-fullscreen-body > * { max-width: 1100px; margin-left: auto; margin-right: auto; }
  #card-fullscreen-body { font-size: 16px; }
}

/* L1: no blue. Links in the Full screen reply use the gold accent like the chat (they were browser blue). */
#card-fullscreen-body a { color: var(--c2-accent, #F0B84B) !important; }

/* L1: no blue. The selected section in the Member / Council editor was navy; now the gold tint. */
.mw-member-section-button[aria-current="page"] {
  background: rgba(240, 184, 75, .14) !important; border-color: var(--c2-accent, #F0B84B) !important;
}

/* L1: no blue. Check boxes and radio buttons use the gold accent (browser default is blue). */
input[type="checkbox"], input[type="radio"] { accent-color: var(--c2-accent, #F0B84B); }

/* L1: no blue. The Export JSON button is a neutral button beside the gold PDF one (all widths). */
.export-btn.export-btn-json {
  background: var(--c2-surface-2, #262626) !important; color: var(--c2-text, #f2f2f2) !important;
  border: 1px solid var(--c2-line-2, rgba(255, 255, 255, .14)) !important;
}

/* === END OF FILE (FILENAME: public/css/large_dialogs.css) === */