/* =============================================
   CORRECTED PORTAL THEME VARIABLES
   Fix: OnColors for light backgrounds must use 
   dark text (#132f3a), not white
   ============================================= */
:root {
    --portalThemeColor1: #132f3a;
    --portalThemeColor2: #000000;
    --portalThemeColor3: #65b4e4;
    --portalThemeColor4: #fbb040;
    --portalThemeColor5: #F3DBB1;
    --portalThemeColor6: #88ABA2;
    --portalThemeColor7: #FFFFFF;
    --portalThemeColor8: #dcd7d0;
    --portalThemeColor9: #fbb040;

    /* ✅ FIXED: Was #FFFFFF (white) on light colors = invisible */
    --portalThemeOnColor1: #FFFFFF;   /* White on dark bg = 14:1 ✅ */
    --portalThemeOnColor2: #FFFFFF;   /* White on black  = 21:1 ✅ */
    --portalThemeOnColor3: #132f3a;   /* Dark on #65b4e4 = 6.15:1 ✅ (was 2.28:1 ❌) */
    --portalThemeOnColor4: #132f3a;   /* Dark on #fbb040 = 7.61:1 ✅ (was 1.84:1 ❌) */
    --portalThemeOnColor5: #132f3a;   /* Dark on #F3DBB1 = 10.4:1 ✅ (was 1.35:1 ❌) */
    --portalThemeOnColor6: #132f3a;   /* Dark on #88ABA2 = 5.61:1 ✅ (was 2.50:1 ❌) */
    --portalThemeOnColor7: #132f3a;   /* Dark on white   = 14.0:1 ✅ (was 1.43:1 ❌) */
    --portalThemeOnColor8: #132f3a;   /* Dark on #dcd7d0 = 9.81:1 ✅ (was 1.43:1 ❌) */
    --portalThemeOnColor9: #132f3a;   /* Dark on #fbb040 = 7.61:1 ✅ (was 1.84:1 ❌) */
}

/* =============================================
   GRID ACTION DROPDOWN
   ============================================= */

/* FIX: display:none removes from tab order entirely.
   Use visually-hidden pattern so screen readers still find it */
.view-grid .dropdown.action > .btn {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.view-grid .dropdown.action .dropdown-menu {
    display: block;
    position: static !important;
    border: 0;
    background: transparent;
    box-shadow: none;
    text-align: center;
    max-width: 95px;
    min-width: 95px;
    width: 95px;
    left: auto !important;
    top: auto !important;
}

.view-grid .dropdown.action .dropdown-menu li {
    display: inline-block;
    text-align: center;
}

.view-grid .dropdown.action .dropdown-menu li a {
    /* FIX: font-size:0 hides text from AT and breaks zoom (WCAG 1.4.4) */
    font-size: 14px;
    padding: 6px;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* FIX: Minimum 44x44px touch target (WCAG 2.5.5) */
    min-width: 44px;
    min-height: 44px;
    border-radius: 4px;
    /* FIX: Remove default outline here, re-add on focus below */
    outline: 2px solid transparent;
    outline-offset: 2px;
    text-decoration: underline; /* Distinguishes links without relying on color alone */
}

.view-grid .dropdown.action .dropdown-menu li a > span {
    font-size: 18px;
}

/* FIX: Visible focus ring - required for WCAG 2.4.7 / 2.4.11 */
.view-grid .dropdown.action .dropdown-menu li a:focus,
.view-grid .dropdown.action .dropdown-menu li a:focus-visible {
    outline: 3px solid var(--portalThemeColor1); /* #132f3a = high contrast */
    outline-offset: 2px;
    background: var(--portalThemeColor5);        /* Warm sand bg on focus */
    border-radius: 4px;
}

/* FIX: Hover must show visible non-color change (WCAG 1.4.11) */
/* #005F73 on white = 6.0:1 ✅  replaces #008C95 which was 4.05:1 ❌ */
.view-grid .dropdown.action .dropdown-menu li a:hover {
    color: #005F73;
    background: var(--portalThemeColor5); /* #F3DBB1 sand - visible + on-brand */
    border-radius: 4px;
    text-decoration: none;
}

/* =============================================
   TAB TITLE
   #1276CE / white = 4.66:1 ✅ AA — passes for large text (28px)
   ============================================= */
.tab-title {
    padding: 8px;
    text-align: center;
    background: #1276CE;
    color: #FFFFFF;
    font-size: 28px;
    font-weight: 600; /* Bold large text is more readable at this contrast level */
    letter-spacing: 0.02em;
}

/* =============================================
   SECTION TITLE
   ============================================= */
.section-title {
    font-size: 16px;
    font-weight: 600; /* Bumped from 500 for readability */
    color: var(--portalThemeColor1); /* #132f3a on white = 14:1 ✅ */
    line-height: 1.4;
}

/* =============================================
   INSTRUCTIONS
   navy (#000080) on whitesmoke = 14.7:1 ✅ AAA — already passes
   ============================================= */
.instructions {
    font-weight: 600;
    color: var(--portalThemeColor1); /* Align to brand dark instead of raw navy */
    line-height: 1.6;               /* WCAG 1.4.12 text spacing */
}

/* =============================================
   PROGRESS BAR
   ============================================= */
.bar.progress-bar {
    background: #1276CE;
    color: #FFFFFF;
    font-weight: 600;
    /* Ensure the bar itself has enough height to be perceivable */
    min-height: 20px;
}

/* =============================================
   NAVBAR
   ============================================= */
.navbar-static-top.navbar {
    min-height: 90px;
}

/* =============================================
   FORM FIELDSET
   ============================================= */
.crmEntityFormView fieldset {
    padding: 0 28px 20px;
    background: whitesmoke;
    /* FIX: Visible boundary aids cognitive accessibility (WCAG 1.3.1) */
    border: 1px solid #a8a8a8;  /* #a8a8a8 on white = 3.07:1 ✅ for UI components */
    border-radius: 4px;
}

/* =============================================
   GLOBAL ACCESSIBLE FOCUS (add to base stylesheet)
   ============================================= */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--portalThemeColor1);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Mouse users don't need the ring, keyboard users do */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
    outline: none;
}