/*! AccessConfig Custom Styling - MyJobGlasses Platform */
/*! Overrides to match platform modal design system */

/* ======================
   OVERLAY
   ====================== */
.a42-ac-overlay {
  background-color: rgba(9, 25, 59, 0.5) !important; /* Platform blue, 50% opacity */
  z-index: 1030 !important; /* Below modal */
}

/* Override contrast mode overlays to use same platform color */
.a42-ac-inv-contrast .a42-ac-overlay,
.a42-ac-high-contrast .a42-ac-overlay {
  background-color: rgba(9, 25, 59, 0.5) !important;
}

/* ======================
   MODAL CONTAINER
   ====================== */
#a42-ac {
  /* Z-INDEX: MUST BE ABOVE OVERLAY */
  z-index: 1031 !important; /* Above overlay (1030) */

  /* Positioning - centered like platform modals */
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;

  /* Width - match platform */
  width: min(90%, 720px) !important;
  max-width: 720px !important;

  /* Visual design */
  background-color: #ffffff !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 5px rgba(9, 25, 59, 0.25) !important;
  border: none !important;

  /* Layout */
  padding: 0 !important;
  max-height: 90vh !important; /* Prevent overflow on small screens */
  overflow: hidden !important; /* Hide overflow, content div will scroll */

  /* Typography base */
  color: #0b1b34 !important;
  font-size: 16px !important;
}

/* Remove responsive width overrides */
@media screen and (min-width: 50em) {
  #a42-ac {
    width: min(90%, 720px) !important;
    margin-left: 0 !important;
  }
}

@media screen and (min-width: 64em) {
  #a42-ac {
    width: min(90%, 720px) !important;
    margin-left: 0 !important;
  }
}

/* ======================
   HEADER / TITLE
   ====================== */
#a42-ac h1 {
  padding: 24px 32px 16px !important;
  margin: 0 !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  color: #09193b !important;
  line-height: 1.2 !important;
}

/* ======================
   CLOSE BUTTON
   ====================== */
#a42-ac-close {
  position: absolute !important;
  top: 24px !important; /* Aligned with h1 top padding */
  right: 24px !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  transition: background-color 100ms ease-in-out !important;
  opacity: 1 !important; /* Override AccessConfig hover opacity */
}

#a42-ac-close:hover,
#a42-ac-close:focus {
  background-color: rgba(204, 204, 204, 0.25) !important;
  opacity: 1 !important; /* Override default opacity change */
}

/* Close button icon - centered */
#a42-ac-close::after {
  content: 'x';
  font-weight: bold !important;
  left: 50% !important;
  margin-left: -8px !important; /* Center 24px icon */
  width: 16px !important;
  height: 16px !important;
  top: 4px !important; /* Center vertically in 32px button */
  background: none !important;
}

/* ======================
   CONTENT AREA
   ====================== */
#a42-ac .a42-ac-content {
  padding: 12px 32px 32px !important;
  max-height: calc(90vh - 80px) !important; /* Account for header */
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* Maintain 2-column layout on desktop */
@media screen and (min-width: 50em) {
  #a42-ac .a42-ac-content {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 16px !important; /* Modern gap instead of margins */
  }
}

/* ======================
   FIELDSETS
   ====================== */
#a42-ac fieldset {
  background-color: transparent !important; /* Lighter grey than original */
  border: none !important;
  padding: 16px !important;
  margin: 12px 0 !important;
  border-radius: 4px !important;
}

/* 2-column layout on desktop */
@media screen and (min-width: 50em) {
  #a42-ac fieldset {
    width: calc(50% - 8px) !important; /* Account for gap */
    margin: 0 !important; /* Remove margins, use gap */
  }

  /* Remove old odd/even margins */
  #a42-ac fieldset:nth-child(odd),
  #a42-ac fieldset:nth-child(even) {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ======================
   LEGENDS
   ====================== */
#a42-ac legend {
  color: #09193b !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  padding: 0 0 12px 0 !important;
  margin: 0 !important;
  border: none !important;
}

/* ======================
   LABELS
   ====================== */
#a42-ac label {
  color: #09193b !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}

/* ======================
   RADIO BUTTONS
   ====================== */
#a42-ac input[type="radio"] + label::before {
  border-color: #cccccc !important;
  background-color: #ffffff !important;
}

#a42-ac input[type="radio"]:checked + label::before {
  border-color: #09193b !important; /* Platform blue */
}

#a42-ac input[type="radio"] + label::after {
  background-color: #09193b !important; /* Platform blue for checked dot */
}

/* Focus state for accessibility */
#a42-ac input[type="radio"]:focus + label::before {
  outline: 2px solid #09193b !important;
  outline-offset: 2px !important;
}

/* ======================
   MOBILE OPTIMIZATION
   ====================== */
@media screen and (max-width: 49.9em) {
  #a42-ac {
    width: min(95%, 720px) !important; /* Slightly narrower on mobile */
  }

  #a42-ac h1 {
    padding: 20px 24px 12px !important;
    font-size: 18px !important;
  }

  #a42-ac-close {
    top: 20px !important;
    right: 20px !important;
  }

  #a42-ac .a42-ac-content {
    padding: 8px 24px 24px !important;
  }

  #a42-ac fieldset {
    padding: 12px !important;
  }
}

/* ======================
   HIGH CONTRAST MODE OVERRIDES
   ====================== */
.a42-ac-high-contrast #a42-ac {
  background-color: #343643 !important;
}

.a42-ac-high-contrast #a42-ac h1,
.a42-ac-high-contrast #a42-ac legend,
.a42-ac-high-contrast #a42-ac label {
  color: white !important;
}

.a42-ac-high-contrast #a42-ac fieldset {
  background-color: transparent !important;
}


/* ======================
   INVERT CONTRAST MODE OVERRIDES
   ====================== */
.a42-ac-inv-contrast #a42-ac {
  background-color: navy !important;
}

.a42-ac-inv-contrast #a42-ac h1,
.a42-ac-inv-contrast #a42-ac legend,
.a42-ac-inv-contrast #a42-ac label {
  color: #FF0 !important;
}

.a42-ac-inv-contrast #a42-ac fieldset {
  background-color: transparent !important;
}

.a42-ac-replace-style{
	border: 2px solid !important;
	padding: .2em;
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	font-size: 1rem !important;
}