/*
 * FlexiAsso Premium UI
 * Final shared layer for native Laravel modules.
 * Loaded after module styles so typography, filters and modal positioning stay
 * consistent without duplicating those rules in every module stylesheet.
 */

:root {
  --fxa-premium-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fxa-premium-ink: #172033;
  --fxa-premium-muted: #66758b;
  --fxa-premium-line: #dce5ed;
  --fxa-premium-soft: #f8fafc;
  --fxa-premium-focus: rgba(72, 197, 189, .18);
  --fxa-premium-radius: 12px;
  --fxa-premium-sidebar-half: 126px;
  --fxa-premium-sidebar-collapsed-half: 38px;
}

/* Typography hierarchy based on the current Laravel Subventions module. */
body.flexiasso-dash-standalone-page,
body.flexiasso-dash-standalone-page button,
body.flexiasso-dash-standalone-page input,
body.flexiasso-dash-standalone-page select,
body.flexiasso-dash-standalone-page textarea {
  font-family: var(--fxa-premium-font) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.flexiasso-dashboard-native {
  color: var(--fxa-premium-ink);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}

.flexiasso-dashboard-native :where(p, li, dd, td, input, select, textarea) {
  font-weight: 400 !important;
}

.flexiasso-dashboard-native :where(h1, h2) {
  font-weight: 700 !important;
  letter-spacing: -.018em;
}

.flexiasso-dashboard-native :where(h3, h4, h5, h6) {
  font-weight: 600 !important;
  letter-spacing: -.01em;
}

.flexiasso-dashboard-native :where(label, dt, th) {
  font-weight: 600 !important;
}

.flexiasso-dashboard-native :where(button, .button, [class$="-button"], [class*="-button "]) {
  font-weight: 600 !important;
}

.flexiasso-dashboard-native :where(small, .description, .fadh-muted, [class$="-muted"]) {
  font-weight: 400 !important;
}

.flexiasso-dashboard-native select,
.flexiasso-dashboard-native select option,
.flexiasso-dashboard-native select optgroup {
  font-style: normal !important;
  font-weight: 400 !important;
}

.flexiasso-dashboard-native select optgroup {
  font-weight: 600 !important;
}

/* Controls use the same compact, calm proportions as Subventions. */
.flexiasso-dashboard-native :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea
) {
  border-color: var(--fxa-premium-line) !important;
  border-radius: 10px !important;
  background-color: #fff;
  color: var(--fxa-premium-ink);
  font-size: 14px !important;
  line-height: 1.35;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .025);
}

.flexiasso-dashboard-native :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  select
) {
  min-height: 40px !important;
}

.flexiasso-dashboard-native :where(input, select, textarea):focus {
  border-color: #48c5bd !important;
  outline: 0 !important;
  box-shadow: 0 0 0 3px var(--fxa-premium-focus) !important;
}

/* Shared framing and weight rules for filter areas. */
.flexiasso-dashboard-native :where(
  .fadh-filter-card,
  .fassoc-filters,
  .fplanning-filter-card,
  .fadh-member-status-filter,
  .fadh-mail-read-tabs,
  .fadh-reminder-filter-form
) {
  border: 1px solid var(--fxa-premium-line) !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, #fff 0%, var(--fxa-premium-soft) 100%) !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .035);
}

.flexiasso-dashboard-native :where(
  .fadh-filter-card,
  .fassoc-filters,
  .fplanning-filter-card,
  .fadh-member-status-filter
) :where(label, span, strong) {
  font-weight: 500 !important;
}

.flexiasso-dashboard-native :where(
  .fadh-filter-card,
  .fassoc-filters,
  .fplanning-filter-card,
  .fadh-member-status-filter
) :where(select, option, input) {
  font-weight: 400 !important;
}

.flexiasso-dashboard-native :where(
  .fadh-filter-card,
  .fassoc-filters,
  .fplanning-filter-card,
  .fadh-member-status-filter
) :where(a, button) {
  font-weight: 500 !important;
}

.flexiasso-dashboard-native :where(
  .fadh-filter-card,
  .fassoc-filters,
  .fplanning-filter-card,
  .fadh-member-status-filter
) :where(a.is-active, button.is-active, [aria-current="page"], :checked + span) {
  font-weight: 600 !important;
}

.flexiasso-dash.is-dark-mode .flexiasso-dashboard-native :where(
  .fadh-filter-card,
  .fassoc-filters,
  .fplanning-filter-card,
  .fadh-member-status-filter,
  .fadh-mail-read-tabs,
  .fadh-reminder-filter-form
) {
  border-color: rgba(148, 163, 184, .24) !important;
  background: linear-gradient(135deg, #111c2f 0%, #0f172a 100%) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
}

.flexiasso-dash.is-dark-mode .flexiasso-dashboard-native :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea
) {
  border-color: rgba(148, 163, 184, .28) !important;
  background-color: #0f172a !important;
  color: #eef3f9 !important;
}

/*
 * Modal overlays
 * On desktop, reserve the sidebar width so the dialog is centered in the main
 * content area. The backdrop itself still covers the whole viewport.
 */
body.flexiasso-dash-standalone-page :where(
  .flexiasso-dashboard-native .fadh-modal,
  .fassoc-modal,
  .fa-grant-modal,
  .fplanning-modal,
  [data-flexiasso-smtp-test-modal],
  #wfp-tiers-modal-overlay,
  .wfp-modal-overlay,
  .wfp-ap-modal-backdrop,
  .webeisfinance-modal-backdrop
) {
  box-sizing: border-box;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  align-items: center !important;
  justify-content: center !important;
  place-items: center !important;
  padding-top: max(24px, env(safe-area-inset-top)) !important;
  padding-right: max(24px, env(safe-area-inset-right)) !important;
  padding-bottom: max(24px, env(safe-area-inset-bottom)) !important;
  padding-left: max(calc(var(--fxa-sidebar, 252px) + 24px), env(safe-area-inset-left)) !important;
  overflow: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

body.flexiasso-dash-standalone-page:has(.flexiasso-dash.is-sidebar-collapsed) :where(
  .flexiasso-dashboard-native .fadh-modal,
  .fassoc-modal,
  .fa-grant-modal,
  .fplanning-modal,
  [data-flexiasso-smtp-test-modal],
  #wfp-tiers-modal-overlay,
  .wfp-modal-overlay,
  .wfp-ap-modal-backdrop,
  .webeisfinance-modal-backdrop
) {
  padding-left: max(calc(var(--fxa-sidebar-collapsed, 76px) + 24px), env(safe-area-inset-left)) !important;
}

.flexiasso-dashboard-native .fadh-modal.is-open,
.fassoc-modal.is-open,
.fplanning-modal.is-open {
  display: flex !important;
}

body.flexiasso-dash-standalone-page :where(
  .flexiasso-dashboard-native .fadh-modal-panel,
  .flexiasso-dashboard-native .fadh-modal-dialog,
  .fassoc-modal-dialog,
  .fa-grant-modal > section,
  .fplanning-modal-dialog,
  .fplanning-cancel-dialog,
  [data-flexiasso-smtp-test-modal] .fadh-modal-dialog,
  .wfp-modal,
  #wfp-tiers-modal-overlay > div
) {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  margin: 0 !important;
  max-width: 100% !important;
  max-height: calc(100vh - 48px) !important;
  max-height: calc(100dvh - 48px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Finance keeps autonomous fixed dialogs instead of nesting them in an overlay. */
body.flexiasso-dash-standalone-page :where(
  .wfp-ap-modal,
  .webeisfinance-modal,
  .webeisfinance-advanced-payment-modal,
  #wfp-advanced-payment-modal
) {
  position: fixed !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  left: calc(50% + var(--fxa-premium-sidebar-half)) !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  max-width: calc(100vw - var(--fxa-sidebar, 252px) - 48px) !important;
  max-height: calc(100vh - 48px) !important;
  max-height: calc(100dvh - 48px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

body.flexiasso-dash-standalone-page:has(.flexiasso-dash.is-sidebar-collapsed) :where(
  .wfp-ap-modal,
  .webeisfinance-modal,
  .webeisfinance-advanced-payment-modal,
  #wfp-advanced-payment-modal
) {
  left: calc(50% + var(--fxa-premium-sidebar-collapsed-half)) !important;
  max-width: calc(100vw - var(--fxa-sidebar-collapsed, 76px) - 48px) !important;
}

body.flexiasso-dash-standalone-page :where(
  .flexiasso-dashboard-native .fadh-modal-backdrop,
  .fassoc-modal-backdrop,
  .fa-grant-modal-backdrop,
  .fplanning-modal-backdrop,
  [data-flexiasso-smtp-test-modal] .fadh-modal-backdrop
) {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

html.fadh-modal-open,
html.fplanning-modal-open,
body.fadh-modal-open,
body.fassoc-modal-open,
body.fplanning-modal-open,
body.fa-grant-modal-open,
body.flexiasso-modal-open,
body.fadh-wfp-modal-open {
  overflow: hidden !important;
}

/* Public site and member-area dialogs use the same centered responsive model. */
.fadh-public-modal {
  box-sizing: border-box;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  padding-top: max(24px, env(safe-area-inset-top));
  padding-right: max(24px, env(safe-area-inset-right));
  padding-bottom: max(24px, env(safe-area-inset-bottom));
  padding-left: max(24px, env(safe-area-inset-left));
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.fadh-public-modal.is-open {
  display: grid !important;
  place-items: center !important;
}

.fadh-public-modal-backdrop {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.fadh-public-modal-panel {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  margin: 0 !important;
  max-width: 100% !important;
  max-height: calc(100vh - 48px) !important;
  max-height: calc(100dvh - 48px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 1040px) {
  body.flexiasso-dash-standalone-page :where(
    .flexiasso-dashboard-native .fadh-modal,
    .fassoc-modal,
    .fa-grant-modal,
    .fplanning-modal,
    [data-flexiasso-smtp-test-modal],
    #wfp-tiers-modal-overlay,
    .wfp-modal-overlay,
    .wfp-ap-modal-backdrop,
    .webeisfinance-modal-backdrop
  ),
  body.flexiasso-dash-standalone-page:has(.flexiasso-dash.is-sidebar-collapsed) :where(
    .flexiasso-dashboard-native .fadh-modal,
    .fassoc-modal,
    .fa-grant-modal,
    .fplanning-modal,
    [data-flexiasso-smtp-test-modal],
    #wfp-tiers-modal-overlay,
    .wfp-modal-overlay,
    .wfp-ap-modal-backdrop,
    .webeisfinance-modal-backdrop
  ) {
    padding-top: max(18px, env(safe-area-inset-top)) !important;
    padding-right: max(18px, env(safe-area-inset-right)) !important;
    padding-bottom: max(18px, env(safe-area-inset-bottom)) !important;
    padding-left: max(18px, env(safe-area-inset-left)) !important;
  }

  body.flexiasso-dash-standalone-page :where(
    .wfp-ap-modal,
    .webeisfinance-modal,
    .webeisfinance-advanced-payment-modal,
    #wfp-advanced-payment-modal
  ),
  body.flexiasso-dash-standalone-page:has(.flexiasso-dash.is-sidebar-collapsed) :where(
    .wfp-ap-modal,
    .webeisfinance-modal,
    .webeisfinance-advanced-payment-modal,
    #wfp-advanced-payment-modal
  ) {
    left: 50% !important;
    max-width: calc(100vw - 36px) !important;
  }
}

@media (max-width: 680px) {
  body.flexiasso-dash-standalone-page :where(
    .flexiasso-dashboard-native .fadh-modal,
    .fassoc-modal,
    .fa-grant-modal,
    .fplanning-modal,
    [data-flexiasso-smtp-test-modal]
  ),
  .fadh-public-modal {
    align-items: center !important;
    justify-content: center !important;
    place-items: center !important;
    padding-top: max(10px, env(safe-area-inset-top)) !important;
    padding-right: max(10px, env(safe-area-inset-right)) !important;
    padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
    padding-left: max(10px, env(safe-area-inset-left)) !important;
  }

  body.flexiasso-dash-standalone-page :where(
    .flexiasso-dashboard-native .fadh-modal-panel,
    .flexiasso-dashboard-native .fadh-modal-dialog,
    .fassoc-modal-dialog,
    .fa-grant-modal > section,
    .fplanning-modal-dialog,
    .fplanning-cancel-dialog,
    [data-flexiasso-smtp-test-modal] .fadh-modal-dialog
  ),
  .fadh-public-modal-panel {
    width: 100% !important;
    max-height: calc(100vh - 20px) !important;
    max-height: calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    border-radius: 18px !important;
  }

  body.flexiasso-dash-standalone-page :where(
    .wfp-ap-modal,
    .webeisfinance-modal,
    .webeisfinance-advanced-payment-modal,
    #wfp-advanced-payment-modal
  ) {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100vh - 20px) !important;
    max-height: calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  }

  .flexiasso-dashboard-native :where(
    .fadh-filter-card,
    .fassoc-filters,
    .fplanning-filter-card,
    .fadh-member-status-filter,
    .fadh-mail-read-tabs,
    .fadh-reminder-filter-form
  ) {
    border-radius: 14px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .flexiasso-dashboard-native *,
  .fadh-public-modal * {
    scroll-behavior: auto !important;
  }
}