/**
 * Keep large form/job/activity modals inside the viewport.
 * Clears sticky EzyHires header; scrollable body; close button always visible.
 * Loaded from assets/easyhire/css/ (that path deploys reliably on sitedemo).
 * Mirror of assets/easyhire/css/ezy-modals.css — keep in sync.
 */

/*
 * Modal open/close must not shift the page (hero / “Hiring is easier…” etc.).
 * Bootstrap body.modal-open { overflow: hidden } hides the scrollbar and widens
 * the layout. Reserve the gutter always; zero Bootstrap’s padding-right so it
 * does not double-compensate. Does not affect .login-modal-main 90vh scroll.
 */
html {
  scrollbar-gutter: stable;
}
body.modal-open {
  padding-right: 0 !important;
}

:root {
  --ezy-modal-header-clear: 72px;
  --ezy-modal-bottom-gap: 16px;
  /* Fit tall dialogs on 14–15″ laptops at 100% zoom without clipping CTAs */
  --ezy-modal-max-h: min(86vh, calc(100vh - var(--ezy-modal-header-clear) - var(--ezy-modal-bottom-gap)));

  /*
   * Theme A — Split Prism Glass (docs/ui-proposals/A-split-prism/)
   * Dense mint frost (login parity) site-wide + thick translucent glass rim/frame.
   */
  --ezy-a-forest: #0d3b2e;
  --ezy-a-emerald: #1a7a52;
  --ezy-a-mint: #b8e6cf;
  --ezy-a-mist: #e8f6ef;
  --ezy-a-ink: #0f1f17;
  --ezy-a-muted: #5a6b62;
  --ezy-a-link: #146b48;
  /* Dense mint/forest frost — signup parity; 0.95 for logged-in readability */
  --ezy-a-glass: rgba(245, 252, 248, 0.95);
  --ezy-a-glass-blur: 20px;
  /* Drop shadow only (legacy alias); frame = thick glass bezel + drop */
  --ezy-a-glass-shadow: 0 16px 48px rgba(13, 59, 46, 0.12);
  /*
   * Translucent glass rim via box-shadow only (no hard white border strip):
   * soft frost ring + soft forest edge + depth. Mobile reduces rim.
   * Desktop ~18/20px (~50%+ over prior 12/14); mobile ~12/14.
   */
  --ezy-a-glass-frame:
    0 0 0 18px rgba(255, 255, 255, 0.22),
    0 0 0 20px rgba(13, 59, 46, 0.06),
    0 16px 48px rgba(13, 59, 46, 0.12);
  /* Square shells site-wide (user approved); inputs/buttons keep their radii */
  --ezy-a-radius: 0;
  --ezy-a-backdrop-bg: rgba(10, 30, 22, 0.45);
  --ezy-a-backdrop-blur: 6px;
  --ezy-a-input-bg: rgba(255, 255, 255, 0.95);
  --ezy-a-input-border: rgba(13, 59, 46, 0.14);
  --ezy-a-input-radius: 10px;
  --ezy-a-input-focus-ring: 0 0 0 3px rgba(26, 122, 82, 0.15);
  --ezy-a-btn-radius: 10px;
  --ezy-a-btn-primary-bg: linear-gradient(145deg, #1f8f5f 0%, #146b48 100%);
  --ezy-a-btn-primary-hover: linear-gradient(145deg, #219866 0%, #0f5a3c 100%);
  --ezy-a-btn-primary-shadow: 0 8px 20px rgba(20, 107, 72, 0.28);
  --ezy-a-btn-ghost-bg: rgba(255, 255, 255, 0.55);
  --ezy-a-btn-ghost-border: rgba(13, 59, 46, 0.12);
}

/*
 * Prefer top alignment for tall job/form modals — NOT Login/Sign Up.
 * Auth stays vertically centered (Split Prism baseline); short screens scroll inside.
 */
@media only screen and (min-height: 600px) {
  .form-modal.modal:not(#login):not(#signup),
  .form-moda.modal,
  #job-modal.modal,
  #activity-modal.modal,
  #edit-experience-modal.modal,
  #main-experience-modal.modal {
    align-items: flex-start !important;
  }
}

#job-modal .modal-dialog,
#activity-modal .modal-dialog,
#edit-experience-modal .modal-dialog,
#main-experience-modal .modal-dialog,
.form-modal:not(#login):not(#signup) .modal-dialog.max-width-px-840,
.form-moda .modal-dialog.max-width-px-840 {
  margin-top: var(--ezy-modal-header-clear) !important;
  margin-bottom: var(--ezy-modal-bottom-gap) !important;
  max-width: min(840px, calc(100vw - 24px));
  max-height: var(--ezy-modal-max-h) !important;
  width: 100%;
  height: auto !important;
}

/*
 * Login / Sign Up — Split Prism baseline (liked look), restored after 100%-fit revert.
 * Centered; max ~90vh. Desktop (md+): shell clips; form column / .login-modal-body scrolls
 * so Login/Sign Up CTAs stay reachable; left photo framing locked (see split-panel block)
 * so validation errors do not re-crop background-size: cover. Mobile: shell scrolls
 * (photo rail hidden). No top-align / 640px compact chrome.
 * Page shift fixed via html scrollbar-gutter (above).
 */
#login.modal,
#signup.modal {
  align-items: center !important;
  /* Modest top offset so dialogs clear sticky header / address-bar area without flex-start jump */
  padding-top: 2rem;
}

#login .modal-dialog.ezy-auth-split-dialog,
#signup .modal-dialog.ezy-auth-split-dialog {
  max-width: min(920px, calc(100vw - 24px));
  width: 100%;
  max-height: 90vh;
  margin-top: auto !important;
  margin-bottom: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#login .login-modal-main,
#signup .login-modal-main {
  max-height: 90vh !important;
  overflow-x: auto !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

#login .login-modal-main > .row.no-gutters,
#signup .login-modal-main > .row.no-gutters {
  min-height: 0;
}

#login .login-modal-body,
#signup .login-modal-body {
  max-height: none;
  overflow: visible;
}

/* Job detail popup: hard cap so X stays visible and body scrolls */
#job-modal.modal {
  overflow-x: hidden;
  overflow-y: auto;
}

#job-modal .modal-dialog {
  max-height: var(--ezy-modal-max-h) !important;
  display: flex !important;
  flex-direction: column;
}

#job-modal .login-modal-main,
#activity-modal .login-modal-main,
#edit-experience-modal .modal-body,
#main-experience-modal .login-modal-main,
.form-modal:not(#login):not(#signup) .login-modal-main {
  max-height: var(--ezy-modal-max-h) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  flex: 1 1 auto;
  min-height: 0 !important;
}

#job-modal .login-modal-body,
#activity-modal .login-modal-body,
#activity-modal .modal-body,
#edit-experience-modal .modal-body > div,
#main-experience-modal .login-modal-main > .bg-white-2,
.form-modal:not(#login):not(#signup) .login-modal-body {
  overflow-x: auto !important;
  overflow-y: auto !important;
  max-height: none !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  -webkit-overflow-scrolling: touch;
}

/* Close (X): pin to top-right of dialog; auth padding below clears Google / Guest / Welcome */
#job-modal .modal-dialog > button.circle-32[data-dismiss="modal"],
#activity-modal .modal-dialog > button.circle-32[data-dismiss="modal"],
#edit-experience-modal .modal-dialog > button.circle-32[data-dismiss="modal"],
#main-experience-modal .modal-dialog > button.circle-32[data-dismiss="modal"],
#camera-modal .modal-dialog > button.circle-32[data-dismiss="modal"],
.form-modal .modal-dialog > button.circle-32[data-dismiss="modal"],
.form-moda .modal-dialog > button.circle-32[data-dismiss="modal"] {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  margin: 0 !important;
  z-index: 50 !important;
  /* Theme A .btn-ghost surface */
  background: rgba(255, 255, 255, 0.55) !important;
  border: 1px solid rgba(13, 59, 46, 0.12);
  box-shadow: 0 16px 48px rgba(13, 59, 46, 0.08);
  width: 32px;
  height: 32px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  color: #0d3b2e;
}

/* Step1 / selfie camera — medium shell (do not inherit form-modal 840px) */
#camera-modal .modal-dialog.ezy-camera-modal-dialog {
  max-width: 520px;
  width: calc(100% - 1.5rem);
  margin-left: auto;
  margin-right: auto;
  max-height: min(86vh, calc(100vh - 48px));
}
#camera-modal .ezy-camera-modal-body {
  max-height: min(80vh, 620px);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#camera-modal #my_camera {
  width: 100%;
  max-width: 440px;
  margin-left: auto;
  margin-right: auto;
}
#camera-modal #my_camera video,
#camera-modal #my_camera canvas {
  width: 100% !important;
  max-width: 100%;
  height: auto !important;
  display: block;
}

#job-modal .job-details-content .font-size-4[style*="pre-line"],
#job-modal .job-details-wp {
  word-break: break-word;
}

/*
 * Soft dim + frost over the whole page; only the modal (z-index 1050) stays bright.
 * IMPORTANT: do NOT put backdrop at z-index 0 — ezy-tile-lift tiles use z-index 1–6
 * and would punch through the dim (looked like “popup + a few jobs” highlighted).
 * Theme A login.html .modal-backdrop (exact): bg rgba(10,30,22,0.45) + blur(6px).
 * Opacity stays 1 when shown so backdrop-filter is not flattened by BS opacity dim.
 */
.modal-backdrop {
  z-index: 1040 !important;
  background-color: rgba(10, 30, 22, 0.45) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.modal-backdrop.fade {
  opacity: 0 !important;
}
.modal-backdrop.show,
.modal-backdrop.in {
  opacity: 1 !important;
}

/* While any modal is open: flatten piano-lift tiles so nothing sits above the dim */
body.modal-open .ezy-tile-lift,
body.modal-open .mb-8:has(> .ezy-tile-lift),
body.modal-open .ezy-tile-wrap:has(> .ezy-tile-lift) {
  z-index: 0 !important;
  transform: none !important;
}

/* Leave room for the in-dialog close button (incl. auth — clears Google / Guest) */
#job-modal .login-modal-body,
#activity-modal .login-modal-body,
#edit-experience-modal .modal-body > div,
#main-experience-modal .login-modal-main > .bg-white-2,
#signup .login-modal-body,
#login .login-modal-body {
  padding-top: 2.75rem !important;
  padding-right: 2.75rem !important;
}

/* Large non-auth modals: keep content + footer actions usable at 100% zoom */
@media (min-width: 768px) {
  .form-modal:not(#login):not(#signup) .modal-dialog,
  .form-moda .modal-dialog,
  #job-modal .modal-dialog,
  #activity-modal .modal-dialog,
  #edit-experience-modal .modal-dialog,
  #main-experience-modal .modal-dialog,
  #feedbackmodal .modal-dialog,
  #contact-form-modal .modal-dialog,
  #review-form-modal .modal-dialog,
  #job-message-modal .modal-dialog,
  #apply-modal .modal-dialog {
    max-height: var(--ezy-modal-max-h) !important;
  }

  .form-modal:not(#login):not(#signup) .modal-content,
  .form-moda .modal-content,
  #feedbackmodal .modal-content,
  #contact-form-modal .modal-content,
  #review-form-modal .modal-content,
  #job-message-modal .modal-content,
  #apply-modal .modal-content {
    max-height: var(--ezy-modal-max-h);
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  #feedbackmodal .modal-body,
  #contact-form-modal .modal-body,
  #review-form-modal .modal-body,
  #job-message-modal .modal-body,
  #apply-modal .modal-body {
    overflow-x: auto;
    overflow-y: auto;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
  }
}

#register-form .ezy-field-invalid {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 0.1rem rgba(220, 53, 69, 0.2);
}

.signup-validation-summary ul {
  margin-bottom: 0;
}

.signup-validation-summary li {
  margin-bottom: 0.15rem;
}

/* Hide stray per-field labels if any still render outside the summary */
#register-form label.error {
  display: none !important;
}

/* Prefer one line for Teams create/download hint when form is wide enough */
#signup .ezy-skype-hint {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 575.98px) {
  #signup .ezy-skype-hint {
    white-space: normal;
  }
  :root {
    --ezy-modal-max-h: min(85vh, calc(100vh - 72px));
    /* Slimmer glass rim so dialogs keep airspace on phones (~50%+ over prior 8/10) */
    --ezy-a-glass-frame:
      0 0 0 12px rgba(255, 255, 255, 0.22),
      0 0 0 14px rgba(13, 59, 46, 0.06),
      0 12px 32px rgba(13, 59, 46, 0.12);
  }
}

@media (max-width: 767.98px) {
  #signup .login-modal-main,
  #login .login-modal-main {
    overflow-x: auto !important;
    overflow-y: auto !important;
  }
  #signup .login-modal-body,
  #login .login-modal-body {
    max-height: none;
  }
}

/*
 * Login / Sign Up left rail — Theme A Split Prism photo + text overlay
 * Mock: docs/ui-proposals/A-split-prism/login.html (.panel-left)
 * Photo: Unsplash photo-1521737711867-e3b97375f902 (local copy below)
 * Existing Welcome / signup copy stays on top of the image.
 * Sign In: exact 50% photo / 50% form (.ezy-auth-login-split).
 * Sign Up: ~45% photo / ~55% form. Dialog max 920px.
 */
#login .ezy-login-split-panel,
#signup .ezy-login-split-panel {
  position: relative;
  z-index: 0;
  color: #eef8f2;
  background-color: #0d3b2e;
  background-image:
    linear-gradient(145deg, rgba(13, 59, 46, 0.88) 0%, rgba(20, 90, 65, 0.55) 50%, rgba(13, 59, 46, 0.75) 100%),
    url("../easyhire/image/login-split-prism.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 100%;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}
#login .ezy-login-split-panel .ezy-login-split-copy,
#login .ezy-login-split-panel .ezy-login-split-stats,
#signup .ezy-login-split-panel .ezy-login-split-copy {
  position: relative;
  z-index: 1;
}
#login .ezy-login-split-panel .border-default-color-2 {
  border-color: rgba(255, 255, 255, 0.28) !important;
}

/*
 * Sign In + Sign Up — lock left photo framing when validation errors grow the form.
 * Cause: panel used background-size:cover on a box whose height tracked the form;
 * each error / repeat submit reflowed height and cover re-cropped (zoom in/out).
 * Fix: desktop equal-height row; shell overflow hidden (keeps max-height 90vh);
 * form column / .login-modal-body scrolls (override Bootstrap .h-100 so flex can
 * shrink and overflow-y:auto actually paints a scrollbar); photo on ::before
 * sized to 90vh so cover scale is stable; panel overflow:hidden clips.
 * Mobile keeps form-only (photo rail hidden) with shell scroll.
 */
@media (min-width: 768px) {
  #login .modal-dialog.ezy-auth-split-dialog,
  #signup .modal-dialog.ezy-auth-split-dialog {
    display: flex;
    flex-direction: column;
  }

  #login .login-modal-main,
  #signup .login-modal-main {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto;
    min-height: 0;
    /* Shell clips at 90vh; form column is the scroll surface (not the photo). */
    overflow: hidden !important;
  }

  #login .login-modal-main > .row.no-gutters,
  #signup .login-modal-main > .row.no-gutters {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    /* Avoid height:100% — % height fails when parent only has max-height, which
       grew the row with content and killed the inner scrollbar. */
    max-height: 100%;
    align-items: stretch;
    overflow: hidden;
  }

  #login .ezy-login-split-col,
  #signup .ezy-login-split-col {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
  }

  #login .ezy-login-split-panel,
  #signup .ezy-login-split-panel {
    flex: 1 1 auto;
    align-self: stretch;
    height: 100%;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
    /* Paint via ::before so cover math uses a stable 90vh box, not form height */
    background-image: none;
  }

  #login .ezy-login-split-panel::before,
  #signup .ezy-login-split-panel::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 90vh;
    z-index: 0;
    pointer-events: none;
    background-color: #0d3b2e;
    background-image:
      linear-gradient(145deg, rgba(13, 59, 46, 0.88) 0%, rgba(20, 90, 65, 0.55) 50%, rgba(13, 59, 46, 0.75) 100%),
      url("../easyhire/image/login-split-prism.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }

  #login .ezy-login-form-col,
  #signup .ezy-login-form-col {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
  }

  #login .login-modal-body,
  #signup .login-modal-body {
    flex: 1 1 auto;
    /* Override Bootstrap .h-100 so this box can shrink inside the 90vh shell */
    height: auto !important;
    min-height: 0 !important;
    /* Hard cap so overflow-y:auto always paints a scrollbar even if % flex chain fails */
    max-height: 90vh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* Sign Up ~45/55; Sign In exact 50/50 via .ezy-auth-login-split (overrides Bootstrap cols) */
@media (min-width: 768px) {
  #signup .ezy-login-split-col {
    flex: 0 0 45%;
    max-width: 45%;
  }
  #signup .ezy-login-form-col {
    flex: 0 0 55%;
    max-width: 55%;
  }
  #login .ezy-auth-login-split .ezy-login-split-col {
    flex: 0 0 50%;
    max-width: 50%;
  }
  #login .ezy-auth-login-split .ezy-login-form-col {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

/* Phones: hide photo rail so the form stays first and usable */
@media (max-width: 767.98px) {
  #login .ezy-login-split-col,
  #signup .ezy-login-split-col {
    display: none !important;
  }
  #login .ezy-login-form-col,
  #signup .ezy-login-form-col,
  #login .login-modal-main > .row.no-gutters > .col-lg-7,
  #login .login-modal-main > .row.no-gutters > .col-md-6:not(.ezy-login-split-col),
  #signup .login-modal-main > .row.no-gutters > .col-lg-7,
  #signup .login-modal-main > .row.no-gutters > .col-md-6:not(.ezy-login-split-col) {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* ==========================================================================
 * Theme A — Split Prism Glass (pixel-locked to mock)
 * Sources:
 *   docs/ui-proposals/A-split-prism/style.css  (.glass, .btn-*, .input)
 *   docs/ui-proposals/A-split-prism/login.html (.modal-backdrop, .modal on .glass)
 * Covers Bootstrap .modal / form shells, feedback, crop, jConfirm, Swal.
 * Login/Sign Up left photo overlay is live (.ezy-login-split-panel); form column unchanged.
 * ========================================================================== */

/*
 * Theme A .glass — dense mint frost + soft glass rim (all site modals):
 *   background: rgba(245, 252, 248, 0.95)
 *   backdrop-filter: blur(20px)
 *   border: none (rim is box-shadow frost only — no hard white strip)
 *   box-shadow: frost ring 18px + forest edge 20px + drop (mobile 12/14)
 *   border-radius: 0 (square shells site-wide)
 * Covers Login/Sign Up, Bootstrap .modal-content, form shells (including
 * job-message / interest / contact without #login IDs), job-modal nested
 * reminder pane, crop, account type, jConfirm, Swal2.
 *
 * IMPORTANT: never clear background on the SHELL (.login-modal-main /
 * .modal-content) via .bg-white utilities — that left interest/reminder
 * fully transparent while #login/#signup stayed dense via ID specificity.
 */
.modal .modal-content,
.modal-content,
.modal .modal-content.bg-white,
.login-modal-main,
.login-modal-main.bg-white,
.form-modal .login-modal-main,
.form-modal .login-modal-main.bg-white,
.form-moda .login-modal-main,
.form-moda .login-modal-main.bg-white,
.modal-body.login-modal-main,
.modal-body.login-modal-main.bg-white,
#login-modal .login-modal-main,
#login .login-modal-main,
#signup .login-modal-main,
#job-modal .login-modal-main,
#activity-modal .login-modal-main,
#main-experience-modal .login-modal-main,
#job-message-modal .login-modal-main,
#job-message-modal .login-modal-main.bg-white,
#contact-form-modal .login-modal-main,
#review-form-modal .login-modal-main,
#apply-modal .login-modal-main,
#edit-experience-modal .modal-content,
#feedbackmodal .modal-content,
#ezy-avatar-crop-modal .modal-content,
#accountTypeModal .modal-content,
#reminder-modal .modal-content,
#business-modal .modal-content,
#set-business-modal .modal-content,
#dipositemodal .login-modal-main,
#withdrawmodal .login-modal-main,
.form-modal .modal-content,
.jconfirm .jconfirm-box,
.swal2-popup,
.ezy-glass-panel {
  background: var(--ezy-a-glass) !important;
  -webkit-backdrop-filter: blur(var(--ezy-a-glass-blur)) !important;
  backdrop-filter: blur(var(--ezy-a-glass-blur)) !important;
  border: none !important;
  box-shadow: var(--ezy-a-glass-frame) !important;
  border-radius: 0 !important;
  color: var(--ezy-a-ink) !important;
}

/*
 * One frost rim only: never stack glass frame on nested shells.
 * Job/activity markup is often .login-modal-main > .bg-white-2.login-modal-body;
 * some modals use .modal-content wrapping .login-modal-main — both got the rim.
 */
.modal-content > .login-modal-main,
.modal-content .login-modal-main,
.login-modal-main > .login-modal-main,
.modal .login-modal-main .modal-content,
.login-modal-main .bg-white:not(.btn):not(.circle-32):not(.btn-reset),
.login-modal-main .bg-white-2,
.login-modal-main .login-modal-body,
.modal-content > .modal-body:not(.login-modal-main),
.modal-content .modal-body:not(.login-modal-main),
#job-modal .login-modal-main .bg-white,
#job-modal .login-modal-main .bg-white-2,
#job-modal .login-modal-body,
#activity-modal .login-modal-main .bg-white,
#activity-modal .login-modal-main .bg-white-2,
#activity-modal .login-modal-body,
#main-experience-modal .login-modal-main .bg-white-2,
#profiletype-modal .login-modal-main .login-modal-body,
#profiletype-modal .login-modal-main > .bg-white-2,
#profiletype-modal .modal-body > .bg-white-2 {
  box-shadow: none !important;
}

/* When .modal-content wraps .login-modal-main, only outer panel keeps the rim */
.modal-content > .login-modal-main,
.modal-content .login-modal-main {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/*
 * Square corners everywhere on modal chrome (user approved).
 * Nested header/footer / side panel / inner bg must not peek rounded under shell.
 */
.modal .modal-content,
.modal-content,
.login-modal-main,
.login-modal-main.rounded-8,
.form-modal .login-modal-main,
.form-moda .login-modal-main,
.modal-body.login-modal-main,
.form-modal .modal-body.bg-white,
.form-modal .modal-body.rounded-8,
.jconfirm .jconfirm-box,
.swal2-popup,
.ezy-glass-panel,
.modal .modal-header,
.modal .modal-footer,
.modal .login-modal-body,
.modal .bg-white-2,
.modal .bg-black-2,
.login-modal-main > .row,
.login-modal-main .bg-black-2,
.login-modal-main .dark-mode-texts {
  border-radius: 0 !important;
}

/*
 * Nested theme whites only — clear so the dense shell frost shows through.
 * Do NOT target .login-modal-main / .modal-content shells here.
 */
.modal .bg-white:not(.btn):not(.circle-32):not(.btn-reset):not(.login-modal-main):not(.modal-content):not(.jconfirm-box):not(.swal2-popup),
.modal .bg-white-2,
.modal .login-modal-body,
.form-modal .login-modal-body,
#job-modal .login-modal-body,
#activity-modal .login-modal-body,
#job-message-modal .login-modal-body,
.modal .modal-body:not(.login-modal-main),
.modal form,
.modal .form-check,
.jconfirm .jconfirm-content-pane,
.jconfirm .jconfirm-content,
.swal2-html-container,
/* Job popup inner panes (interest is separate modal; reminder lives under #job-modal) */
#job-modal .job-details-wp,
#job-modal .job-details-wp.bg-white,
#job-modal .reminder_message-wp,
#job-modal .reminder_message-wp.bg-white,
.reminder_message-wp.bg-white {
  background-color: transparent !important;
  background-image: none !important;
}

/*
 * Job / activity AJAX view reuses full-page shells (jobDetails-section + bg-default-1 +
 * bg-white cards). Those painted a second solid “card” inset inside Theme A glass —
 * glass rim → gap → black/white rectangle (worse in dark mode). Flatten so one frost fills.
 */
#job-modal .jobDetails-section,
#job-modal .jobDetails-section.bg-default,
#job-modal .jobDetails-section.bg-default-1,
#job-modal .jobDetails-section.bg-default-2,
#activity-modal .jobDetails-section,
#activity-modal .jobDetails-section.bg-default,
#activity-modal .jobDetails-section.bg-default-1,
#apply-modal .jobDetails-section,
.form-modal .jobDetails-section,
#job-modal .bg-default-1,
#job-modal .bg-default,
#job-modal .bg-default-2,
#activity-modal .bg-default-1,
#job-modal .job-details-content,
#activity-modal .job-details-content,
#job-modal .light-mode-texts,
#activity-modal .light-mode-texts {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* No elevated tile border/shadow on nested whites inside glass shells */
#job-modal .bg-white:not(.btn):not(.circle-32):not(.btn-reset):not(.login-modal-main),
#job-modal .bg-white-2:not(.login-modal-main),
#activity-modal .bg-white:not(.btn):not(.circle-32):not(.btn-reset):not(.login-modal-main),
#activity-modal .bg-white-2:not(.login-modal-main),
#apply-modal .bg-white:not(.btn):not(.circle-32):not(.btn-reset):not(.login-modal-main),
#apply-modal .bg-white-2:not(.login-modal-main) {
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Body padding is for close X clearance only — content should still sit flush with glass */
#job-modal .login-modal-body,
#activity-modal .login-modal-body,
#apply-modal .login-modal-body {
  margin: 0 !important;
}

/* Nested text sits on dense frost — dark ink (never white-on-mint) */
#job-message-modal .login-modal-body,
#job-message-modal .login-modal-body p,
#job-message-modal .login-modal-body label,
#job-message-modal .form-check-label,
#job-modal .reminder_message-wp,
#job-modal .job-details-wp,
#job-modal .job-details-wp .text-black-2,
#job-modal .job-details-wp .text-gray,
.modal .card,
.modal .card-body,
.modal .card-body label,
.modal table,
.modal .table {
  color: var(--ezy-a-ink) !important;
}

/* If a nested white layer still punches a hole, give content a soft opaque underlay */
.modal .card,
.modal .card-body {
  background-color: rgba(255, 255, 255, 0.55) !important;
  border-color: rgba(13, 59, 46, 0.08) !important;
  box-shadow: none !important;
}
.modal table,
.modal .table,
.modal .table td,
.modal .table th {
  background-color: rgba(255, 255, 255, 0.72) !important;
  color: var(--ezy-a-ink) !important;
}

/*
 * Theme A demo modal is a single .glass panel (no header/footer bars).
 * Keep BS header/footer chrome transparent so frost is continuous;
 * mute separators so they don't read as white strips.
 */
.modal-header,
.modal-footer {
  background: transparent !important;
  border-color: rgba(13, 59, 46, 0.06) !important;
  border-top-color: rgba(13, 59, 46, 0.06) !important;
  border-bottom-color: rgba(13, 59, 46, 0.06) !important;
  color: #0f1f17;
}
/* Theme A .modal h2 → --forest; body copy → dark ink (high contrast, all modals) */
.modal-title,
.modal-header .modal-title,
.modal .heading-default-color {
  color: var(--ezy-a-forest) !important;
}
.modal,
.modal-body,
.modal-content,
.login-modal-body,
#login .login-modal-body,
#signup .login-modal-body,
#login-modal .login-modal-body,
.jconfirm .jconfirm-box,
.swal2-popup {
  color: var(--ezy-a-ink) !important;
}

/*
 * Form column readability — force dark labels / helpers / checkbox copy.
 * Overrides yellow/blue/theme utility classes that wash out on light glass.
 * Leaves .dark-mode-texts / .text-white side panels alone.
 */
.modal-content label,
.modal-content .form-label,
.modal-body label:not(.error),
.login-modal-body label:not(.error),
.login-modal-body .font-size-4,
.login-modal-body .font-size-3,
.login-modal-body .text-black-2,
.login-modal-body .text-gray,
.login-modal-body .text-muted,
.login-modal-body .text-default-color,
.login-modal-body p:not(.text-white),
.login-modal-body span:not(.text-white):not(.checkbox):not(.error-text):not(.error),
.login-modal-body .or-devider span,
#login .login-modal-body label:not(.error),
#signup .login-modal-body label:not(.error),
#login-modal .login-modal-body label:not(.error),
#login .login-modal-body .text-black-2,
#signup .login-modal-body .text-black-2,
#register-form label:not(.error),
#login-form label:not(.error),
#register-form .ezy-skype-hint,
#register-form .gr-check-input,
#login-form .gr-check-input {
  color: var(--ezy-a-ink) !important;
}
.modal-content label.font-weight-semibold:not(.error),
.login-modal-body label.font-weight-semibold:not(.error),
.login-modal-body h3:not(.text-white),
.login-modal-body h4:not(.text-white),
.login-modal-body h5:not(.text-white),
#login .login-modal-body .heading-default-color,
#signup .login-modal-body .heading-default-color {
  color: var(--ezy-a-forest) !important;
}
/* Soft helper tone still high-contrast (not yellow/muted wash) */
.modal .text-muted,
.modal .font-size-3.text-default-color,
.login-modal-body .text-gray,
.login-modal-body .ezy-skype-hint {
  color: var(--ezy-a-muted) !important;
}

/* Links inside glass forms: forest green + underline (Terms, Privacy, Forgot) */
.modal-content a:not(.btn):not(.btn-primary):not(.btn-secondary):not(.text-white):not([class*="bg-"]),
.modal-body a:not(.btn):not(.btn-primary):not(.btn-secondary):not(.text-white),
.login-modal-body a:not(.btn):not(.btn-primary):not(.btn-secondary):not(.text-white):not([class*="bg-"]),
#login .login-modal-body a:not(.btn):not([class*="bg-"]),
#signup .login-modal-body a:not(.btn):not([class*="bg-"]),
#login-modal .login-modal-body a:not(.btn):not([class*="bg-"]),
#login-form a,
#register-form a,
.login-modal-body a.text-primary,
.login-modal-body a.text-dodger,
.login-modal-body a.text-green,
.login-modal-body .text-primary,
.login-modal-body .text-dodger,
.modal .text-primary:not(.btn):not(.text-white),
.modal .text-dodger:not(.btn),
#register-form .ezy-skype-hint a,
#register-form a[style*="color"] {
  color: var(--ezy-a-link) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
}
.login-modal-body a:not(.btn):hover,
#login-form a:hover,
#register-form a:hover {
  color: var(--ezy-a-forest) !important;
}
/* Password eye / icon controls stay ink, no underline */
.login-modal-body a.show-password,
.login-modal-body .show-password {
  color: var(--ezy-a-ink) !important;
  text-decoration: none !important;
}
/*
 * Validation messages stay RED (never forced ink/black by glass label rules).
 * Covers jQuery Validate label.error, .error-text spans, CI form errors, bootstrap invalid-feedback.
 */
label.error,
span.error,
div.error,
.error-text,
.invalid-feedback,
.help-block.error,
.form-control-feedback.error,
.modal label.error,
.modal span.error,
.modal .error-text,
.modal .invalid-feedback,
.login-modal-body label.error,
.login-modal-body span.error,
.login-modal-body .error-text,
.login-modal-body .text-danger,
.login-modal-body .alert-danger,
.login-modal-body .alert-danger *,
.login-modal-body .error-login-message,
.login-modal-body .error-login-message *,
#login-form label.error,
#login-form .error-text,
#register-form label.error,
#register-form .error-text,
#signup label.error,
#login label.error,
.edit-form label.error,
.form-validate label.error,
.signup-validation-summary,
.signup-validation-summary * {
  color: #b71c1c !important;
  text-decoration: none !important;
}
.signup-validation-summary a {
  color: #8a1212 !important;
  text-decoration: underline !important;
}

/* Never force white/light body text onto light glass (except dark rail) */
.login-modal-body .text-white:not(.btn):not([class*="bg-"]),
.modal-content > .modal-body .text-white:not(.btn) {
  color: var(--ezy-a-ink) !important;
}
.login-modal-main .dark-mode-texts,
.login-modal-main .dark-mode-texts *,
.login-modal-main .bg-black-2,
.login-modal-main .bg-black-2 * {
  color: #fff !important;
  text-decoration: none;
}
.login-modal-main .dark-mode-texts a,
.login-modal-main .bg-black-2 a {
  color: #fff !important;
}

/*
 * Theme A .input — solid enough fields on denser glass:
 *   background: rgba(255,255,255,0.95)
 *   border: 1px solid rgba(13, 59, 46, 0.14)
 *   border-radius: 10px
 * focus: border #1a7a52; box-shadow 0 0 0 3px rgba(26, 122, 82, 0.15)
 */
.modal .form-control,
.modal input.form-control,
.modal textarea.form-control,
.modal select.form-control,
.login-modal-body .form-control,
.login-modal-body input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.login-modal-body textarea,
.login-modal-body select,
.form-modal .form-control,
#login .form-control,
#signup .form-control,
#login-modal .form-control,
#register-form .form-control,
#login-form .form-control {
  background-color: var(--ezy-a-input-bg) !important;
  border: 1px solid var(--ezy-a-input-border) !important;
  border-radius: var(--ezy-a-input-radius) !important;
  color: var(--ezy-a-ink) !important;
}
.modal .form-control:focus,
.login-modal-body .form-control:focus,
.login-modal-body input:focus,
.login-modal-body textarea:focus,
.login-modal-body select:focus {
  border-color: #1a7a52 !important;
  box-shadow: 0 0 0 3px rgba(26, 122, 82, 0.15) !important;
  outline: none;
}
.modal .form-control::placeholder,
.login-modal-body input::placeholder,
.login-modal-body textarea::placeholder {
  color: #5a6b62;
  opacity: 0.85;
}

/* Theme A .btn-primary (exact gradient + shadow) */
.modal .btn-primary,
.form-modal .btn-primary,
.login-modal-body .btn-primary {
  background: linear-gradient(145deg, #1f8f5f 0%, #146b48 100%) !important;
  border: none !important;
  border-radius: 10px !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(20, 107, 72, 0.28);
  font-weight: 600;
}
.modal .btn-primary:hover,
.form-modal .btn-primary:hover,
.login-modal-body .btn-primary:hover {
  background: linear-gradient(145deg, #219866 0%, #0f5a3c 100%) !important;
  color: #fff !important;
}

/* Theme A .btn-ghost — secondary / cancel (not text links) */
.modal .btn-secondary,
.modal .btn-outline-secondary,
.modal .btn-light,
.form-modal .btn-secondary,
#feedbackmodal .btn.btn-link,
#ezy-avatar-crop-modal .btn-outline-secondary {
  background: rgba(255, 255, 255, 0.55) !important;
  border: 1px solid rgba(13, 59, 46, 0.12) !important;
  border-radius: 10px !important;
  color: #0d3b2e !important;
  box-shadow: none;
  text-decoration: none !important;
}
.modal .btn-secondary:hover,
.modal .btn-outline-secondary:hover,
.modal .btn-light:hover,
#feedbackmodal .btn.btn-link:hover,
#ezy-avatar-crop-modal .btn-outline-secondary:hover {
  background: #fff !important;
  color: #0d3b2e !important;
}

/* Close: readable on glass (btn-ghost-like surface) */
.modal .close,
.modal .btn-close,
#feedbackmodal .close,
#ezy-avatar-crop-modal .close {
  color: #0d3b2e !important;
  opacity: 0.9;
  text-shadow: none;
}
.modal .close:hover,
.modal .btn-close:hover,
#feedbackmodal .close:hover {
  opacity: 1;
  color: #1a7a52 !important;
}
#job-modal .modal-dialog > button.circle-32[data-dismiss="modal"],
#activity-modal .modal-dialog > button.circle-32[data-dismiss="modal"],
#edit-experience-modal .modal-dialog > button.circle-32[data-dismiss="modal"],
#main-experience-modal .modal-dialog > button.circle-32[data-dismiss="modal"],
#camera-modal .modal-dialog > button.circle-32[data-dismiss="modal"],
.form-modal .modal-dialog > button.circle-32[data-dismiss="modal"],
.form-moda .modal-dialog > button.circle-32[data-dismiss="modal"] {
  background: rgba(255, 255, 255, 0.55) !important;
  border: 1px solid rgba(13, 59, 46, 0.12) !important;
  box-shadow: 0 16px 48px rgba(13, 59, 46, 0.08);
  color: #0d3b2e;
}
#job-modal .modal-dialog > button.circle-32[data-dismiss="modal"] i,
#activity-modal .modal-dialog > button.circle-32[data-dismiss="modal"] i,
#camera-modal .modal-dialog > button.circle-32[data-dismiss="modal"] i,
.form-modal .modal-dialog > button.circle-32[data-dismiss="modal"] i,
.form-moda .modal-dialog > button.circle-32[data-dismiss="modal"] i {
  color: #0d3b2e;
}

/* jQuery Confirm — same Theme A surface + backdrop */
.jconfirm .jconfirm-bg {
  background: rgba(10, 30, 22, 0.45) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 1 !important;
}
.jconfirm .jconfirm-box {
  background: var(--ezy-a-glass) !important;
  -webkit-backdrop-filter: blur(var(--ezy-a-glass-blur)) !important;
  backdrop-filter: blur(var(--ezy-a-glass-blur)) !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: var(--ezy-a-glass-frame) !important;
  color: var(--ezy-a-ink) !important;
}
.jconfirm .jconfirm-box .jconfirm-title {
  color: #0d3b2e !important;
}
.jconfirm .jconfirm-box .jconfirm-content {
  color: #5a6b62 !important;
}
.jconfirm .jconfirm-buttons button.btn-blue,
.jconfirm .jconfirm-buttons button.btn-green {
  background: linear-gradient(145deg, #1f8f5f 0%, #146b48 100%) !important;
  color: #fff !important;
  text-shadow: none;
  border-radius: 10px !important;
  box-shadow: 0 8px 20px rgba(20, 107, 72, 0.28);
}

/* SweetAlert2 (superadmin) — Theme A surface + backdrop */
.swal2-container.swal2-backdrop-show,
.swal2-container.swal2-noanimation {
  background: rgba(10, 30, 22, 0.45) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.swal2-popup {
  background: var(--ezy-a-glass) !important;
  -webkit-backdrop-filter: blur(var(--ezy-a-glass-blur)) !important;
  backdrop-filter: blur(var(--ezy-a-glass-blur)) !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: var(--ezy-a-glass-frame) !important;
  color: var(--ezy-a-ink) !important;
}
.swal2-title {
  color: #0d3b2e !important;
}
.swal2-html-container,
.swal2-content {
  color: #5a6b62 !important;
}
.swal2-confirm.swal2-styled {
  background: linear-gradient(145deg, #1f8f5f 0%, #146b48 100%) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 20px rgba(20, 107, 72, 0.28);
}
.swal2-cancel.swal2-styled {
  background: rgba(255, 255, 255, 0.55) !important;
  border: 1px solid rgba(13, 59, 46, 0.12) !important;
  border-radius: 10px !important;
  color: #0d3b2e !important;
}

/* No-filter browsers only: denser solid stand-ins (cannot match blur) */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .modal-backdrop.show,
  .modal-backdrop.in,
  .jconfirm .jconfirm-bg,
  .swal2-container.swal2-backdrop-show {
    background-color: rgba(10, 30, 22, 0.55) !important;
  }
  .modal-content,
  .login-modal-main,
  .form-modal .login-modal-main,
  .form-modal .login-modal-main.bg-white,
  #login .login-modal-main,
  #signup .login-modal-main,
  #job-modal .login-modal-main,
  #activity-modal .login-modal-main,
  #job-message-modal .login-modal-main,
  #feedbackmodal .modal-content,
  .jconfirm .jconfirm-box,
  .swal2-popup,
  .ezy-glass-panel {
    background: rgba(245, 252, 248, 0.97) !important;
  }
}

/* Accessibility: solid substitute only when user prefers reduced transparency */
@media (prefers-reduced-transparency: reduce) {
  .modal-content,
  .login-modal-main,
  .form-modal .login-modal-main,
  .form-modal .login-modal-main.bg-white,
  #login .login-modal-main,
  #signup .login-modal-main,
  #job-modal .login-modal-main,
  #activity-modal .login-modal-main,
  #job-message-modal .login-modal-main,
  #feedbackmodal .modal-content,
  .jconfirm .jconfirm-box,
  .swal2-popup,
  .ezy-glass-panel {
    background: rgba(245, 252, 248, 0.98) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .modal-backdrop.show,
  .modal-backdrop.in {
    background-color: rgba(10, 30, 22, 0.45) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/*
 * Login / Sign Up square corners (redundant with site-wide radius 0; keep for ID specificity).
 * IDs from application/views/include/modal.php: #login, #signup.
 * Buttons/inputs keep Theme A radius.
 */
#login .login-modal-main,
#login .login-modal-main.rounded-8,
#login .login-modal-main.bg-white,
#login .modal-content,
#signup .login-modal-main,
#signup .login-modal-main.rounded-8,
#signup .login-modal-main.bg-white,
#signup .modal-content {
  border-radius: 0 !important;
}

#login .modal-header,
#login .modal-footer,
#login .login-modal-main > .row,
#login .login-modal-main .bg-black-2,
#login .login-modal-body,
#login .bg-white-2,
#signup .modal-header,
#signup .modal-footer,
#signup .login-modal-main > .row,
#signup .login-modal-main .bg-black-2,
#signup .login-modal-body,
#signup .bg-white-2 {
  border-radius: 0 !important;
}

/*
 * Profile Type (#profiletype-modal): employee "professional type" edit popup.
 * Markup used .modal-body + overflow-hidden + .h-100 without a scroll child, so
 * form-modal flex centering / viewport caps clipped fields below the fold.
 * Cap dialog ~90vh; shell overflow hidden; body/content scrolls.
 */
#profiletype-modal.modal {
  overflow-x: hidden;
  overflow-y: auto;
  align-items: flex-start !important;
}

#profiletype-modal .modal-dialog {
  margin-top: var(--ezy-modal-header-clear) !important;
  margin-bottom: var(--ezy-modal-bottom-gap) !important;
  max-width: min(420px, calc(100vw - 24px));
  max-height: min(90vh, calc(100vh - var(--ezy-modal-header-clear) - var(--ezy-modal-bottom-gap))) !important;
  width: 100%;
  height: auto !important;
  display: flex !important;
  flex-direction: column;
}

/* Glass only on the outer shell (login-modal-main and/or standalone modal-body panel). */
#profiletype-modal .login-modal-main,
#profiletype-modal .modal-dialog > .modal-body {
  max-height: min(90vh, calc(100vh - var(--ezy-modal-header-clear) - var(--ezy-modal-bottom-gap))) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  flex: 1 1 auto;
  min-height: 0 !important;
  /* glass shell when markup uses modal-body as panel */
  background: var(--ezy-a-glass) !important;
  -webkit-backdrop-filter: blur(var(--ezy-a-glass-blur)) !important;
  backdrop-filter: blur(var(--ezy-a-glass-blur)) !important;
  border: none !important;
  box-shadow: var(--ezy-a-glass-frame) !important;
  border-radius: 0 !important;
  color: var(--ezy-a-ink) !important;
}

/* Nested body under glassed main: no second frame */
#profiletype-modal .login-modal-main > .modal-body {
  box-shadow: none !important;
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  max-height: none !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  flex: 1 1 auto;
  min-height: 0 !important;
}

#profiletype-modal .login-modal-body,
#profiletype-modal .modal-body > .bg-white-2,
#profiletype-modal .login-modal-main > .bg-white-2 {
  overflow-x: auto !important;
  overflow-y: auto !important;
  max-height: none !important;
  height: auto !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  -webkit-overflow-scrolling: touch;
  padding-top: 2.75rem !important;
  padding-right: 2.75rem !important;
  padding-left: 1.25rem;
  padding-bottom: 1.25rem;
}

#profiletype-modal .modal-dialog > button.circle-32[data-dismiss="modal"] {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  margin: 0 !important;
  z-index: 50 !important;
}