/* =============================================================
   OCIL Dispute Resolution Portal — Custom Stylesheet
   =============================================================
   Design tokens, layout, components, and portal overrides.
   This is the ONLY custom CSS file — all portal styling goes here.

   Table of Contents
   -----------------
    1. Design Tokens
    2. Animations & Motion
    3. Typography & Fonts
    4. Base Layout & Backgrounds
    5. Links & Buttons
    6. Form Controls & Inputs
    7. Navigation
    8. Breadcrumbs & Progress
    9. Sign-in / Register Containers
   10. 404 Page
   11. Form Layout, Cards, Read-only, Lookups, Dates
   12. Page-specific: Review Mode & Subgrids
   13. Misc Layout & Components
   14. Invitation Page Tweaks
   15. Password Strength & Toggle Helpers
   16. Compact Review Step Styling
   17. Notification Bar
   18. Responsive: Small phones (< 576px)
   19. Responsive: Large screens (> 1200px)
   20. Keyboard Focus Indicator
   21. Collapsed Mobile Nav
   22. Empty List / "No records" State
   23. Withdraw Button in Section Title
   ============================================================= */

/* -------------------------------------------------------------
   Design Tokens
------------------------------------------------------------- */
:root {
  /* Brand Colors */
  --ocil-primary: #007AA9;
  --ocil-primary-dark: #006890;
  --ocil-primary-light: rgb(87, 166, 205);
  --ocil-primary-subtle: rgba(87, 166, 205, 0.08);
  --ocil-primary-ring: rgba(87, 166, 205, 0.3);
  --ocil-primary-border: rgba(0, 122, 169, 0.3);
  --ocil-accent: #A71F64;
  --ocil-orange: #f47b20;
  --ocil-gold: #f4c144;
  --ocil-teal: #87D3E6;

  /* Neutrals */
  --ocil-text: #212529;
  --ocil-text-muted: #6c757d;
  --ocil-text-light: #495057;
  --ocil-text-dark: #343a40;        /* Headings on light backgrounds */
  --ocil-text-faint: #555;          /* Hint / helper text */
  --ocil-text-readonly: #2b3035;    /* Read-only field text — WCAG AA on --ocil-bg-disabled */
  --ocil-bg: #ffffff;
  --ocil-bg-subtle: #f5f5f5;
  --ocil-bg-hover: #fafafa;
  --ocil-bg-disabled: #fafbfc;
  --ocil-bg-light: #f8f9fa;         /* Bootstrap gray-100 */
  --ocil-bg-muted: #e9ecef;         /* Bootstrap gray-200 */
  --ocil-bg-shaded: #f1f1f1;        /* Pagination active, etc. */
  --ocil-border: #d5dadf;
  --ocil-border-hover: #c5cacd;
  --ocil-border-light: #dee2e6;
  --ocil-border-section: #eee;
  --ocil-border-input: #ced4da;     /* Bootstrap input border */
  --ocil-border-strong: #ddd;       /* Heavier dividers */

  /* Feedback / Status Colors */
  --ocil-error: #d9534f;
  --ocil-warning: #f0ad4e;
  --ocil-success: #5cb85c;
  --ocil-info: #0275d8;

  /* External / Reference Colors (Bootstrap defaults retained for parity) */
  --ocil-bs-link: #0d6efd;
  --ocil-bs-link-hover: #0b5ed7;
  --ocil-bs-link-active: #0a58ca;
  --ocil-primary-disabled: #A9D4E6; /* Light primary tint for disabled buttons */

  /* Spacing */
  --ocil-space-xs: 0.25rem;
  --ocil-space-sm: 0.5rem;
  --ocil-space-md: 1rem;
  --ocil-space-lg: 1.5rem;
  --ocil-space-xl: 2rem;
  --ocil-space-2xl: 2.5rem;
  --ocil-space-3xl: 3rem;

  /* Typography */
  --ocil-font-family: 'Noto Sans', 'BC Sans', sans-serif;
  --ocil-font-size-sm: 0.875rem;
  --ocil-font-size-base: 1rem;
  --ocil-font-size-lg: 1.125rem;
  --ocil-font-size-xl: 1.25rem;
  --ocil-font-size-2xl: clamp(1.25rem, 1.5vw + 0.5rem, 1.5rem);
  --ocil-font-size-3xl: clamp(1.5rem, 2vw + 0.5rem, 2rem);
  --ocil-font-size-4xl: clamp(1.75rem, 2.5vw + 0.5rem, 2.5rem);

  /* Borders */
  --ocil-radius-sm: 4px;
  --ocil-radius-md: 8px;
  --ocil-radius-lg: 15px;
  --ocil-radius-xl: 32px;
  --ocil-radius-pill: 100px;

  /* Shadows */
  --ocil-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --ocil-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.05);
  --ocil-shadow-lg: 0 6px 12px rgba(0, 0, 0, 0.1);
  --ocil-shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.06);

  /* Transitions */
  --ocil-transition-fast: 150ms ease-in-out;
  --ocil-transition-normal: 200ms ease-in-out;
  --ocil-transition-slow: 300ms ease-in-out;

  /* Form-specific */
  --ocil-form-row-gap: 1.5rem;
  --ocil-form-col-gap: 1.5rem;
  --ocil-input-height: calc(1.5em + 0.75rem + 2px);
  --ocil-input-padding: 0.375rem 0.75rem;
  --ocil-readonly-padding: 0.375rem 5.5rem 0.375rem 0.75rem;
}

/* -------------------------------------------------------------
   Animations & Motion
------------------------------------------------------------- */
@keyframes ocil-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes ocil-slide-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes ocil-scale-in {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes ocil-skeleton {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* -------------------------------------------------------------
   Typography & Fonts
------------------------------------------------------------- */
@font-face {
    font-family: 'BC Sans';
    src: url('bc-sans-regular.woff2') format('woff2'),
         url('bc-sans-regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'BC Sans';
    src: url('bc-sans-italic.woff2') format('woff2'),
         url('bc-sans-italic.woff') format('woff');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'BC Sans';
    src: url('bc-sans-bold.woff2') format('woff2'),
         url('bc-sans-bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'BC Sans';
    src: url('bc-sans-bold-italic.woff2') format('woff2'),
         url('bc-sans-bold-italic.woff') format('woff');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'BC Sans';
    src: url('bc-sans-light-italic.woff2') format('woff2'),
         url('bc-sans-light-italic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}
body,
html,
.ocil-body,
.ocil-navbar {
    font-family: var(--ocil-font-family) !important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Responsive width utilities — Bootstrap doesn't ship these by default.
   Mirrors the standard w-* family with breakpoint variants.
   Selectors are doubled (.w-lg-50.w-lg-50) to bump specificity above
   Bootstrap's base .w-75 / .w-50 utilities, which load after this file. */
@media (min-width: 576px) {
    .w-sm-25.w-sm-25 { width: 25% !important; }
    .w-sm-50.w-sm-50 { width: 50% !important; }
    .w-sm-75.w-sm-75 { width: 75% !important; }
    .w-sm-100.w-sm-100 { width: 100% !important; }
    .w-sm-auto.w-sm-auto { width: auto !important; }
}
@media (min-width: 768px) {
    .w-md-25.w-md-25 { width: 25% !important; }
    .w-md-50.w-md-50 { width: 50% !important; }
    .w-md-75.w-md-75 { width: 75% !important; }
    .w-md-100.w-md-100 { width: 100% !important; }
    .w-md-auto.w-md-auto { width: auto !important; }
}
@media (min-width: 992px) {
    .w-lg-25.w-lg-25 { width: 25% !important; }
    .w-lg-50.w-lg-50 { width: 50% !important; }
    .w-lg-75.w-lg-75 { width: 75% !important; }
    .w-lg-100.w-lg-100 { width: 100% !important; }
    .w-lg-auto.w-lg-auto { width: auto !important; }
}
@media (min-width: 1200px) {
    .w-xl-25.w-xl-25 { width: 25% !important; }
    .w-xl-50.w-xl-50 { width: 50% !important; }
    .w-xl-75.w-xl-75 { width: 75% !important; }
    .w-xl-100.w-xl-100 { width: 100% !important; }
    .w-xl-auto.w-xl-auto { width: auto !important; }
}
@media (min-width: 1400px) {
    .w-xxl-25.w-xxl-25 { width: 25% !important; }
    .w-xxl-50.w-xxl-50 { width: 50% !important; }
    .w-xxl-75.w-xxl-75 { width: 75% !important; }
    .w-xxl-100.w-xxl-100 { width: 100% !important; }
    .w-xxl-auto.w-xxl-auto { width: auto !important; }
}
/* Override portalbasictheme.css which hardcodes font-family: Arial on these */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6,
p, .p, .p2, a, .a, footer, label, legend,
input, select, textarea, button,
.btn, .btn-primary, .btn-secondary, .btn-default,
.button1, .button2,
p.smallText, h1.siteTitle,
p.form-text span,
.section-landing-heading,
.page_section h1, .page_section h2, .page_section h3, .page_section p,
.navbar-nav a, .navbar-brand a, .navbar-brand a span {
    font-family: var(--ocil-font-family) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.ocil-body { margin-bottom: 80px; }
.ocil-navbar h1 { font-weight: normal; }

/* -------------------------------------------------------------
   Base Layout & Backgrounds
------------------------------------------------------------- */
/* Scope all page-layout rules to documents that include the .ocil-body
   wrapper. Power Pages modal iframes (e.g. /_portal/modal-form-template-path/)
   load custom.css but don't include .ocil-body — :has() excludes them
   automatically so the form renders at natural size with no gradient bleed. */
html:has(.ocil-body) {
    min-height: 100% !important;
    background-color: rgb(255, 235, 178);
}
html:has(.ocil-body) body {
    background-image: linear-gradient(180deg, rgb(224, 245, 253) 0%, rgb(180, 225, 235) 30%, rgb(180, 225, 235) 60%, rgb(255, 235, 178) 100%) !important;
    height: auto !important;
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
}
html:has(.ocil-body) .wrapper-body,
html:has(.ocil-body) #mainContent,
html:has(.ocil-body) .ocil-body,
html:has(.ocil-body) main { flex: 1 0 auto !important; }
footer.footer {
    width: 100% !important;
    margin-top: auto !important;
    flex-shrink: 0 !important;
    position: relative !important;
    z-index: 2;
    overflow: hidden;
    border-radius: var(--ocil-radius-xl) var(--ocil-radius-xl) 0 0;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.06);
    background: var(--ocil-bg);
}
footer.footer::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(ellipse max(28vw, 320px) max(18vw, 200px) at 12% 55%, rgba(135, 211, 230, 0.55) 0%, transparent 100%),
        radial-gradient(ellipse max(24vw, 280px) max(17vw, 200px) at 40% 70%, rgba(167, 31, 100, 0.5) 0%, transparent 100%),
        radial-gradient(ellipse max(22vw, 260px) max(15vw, 180px) at 65% 35%, rgba(244, 193, 68, 0.6) 0%, transparent 100%),
        radial-gradient(ellipse max(30vw, 340px) max(19vw, 220px) at 90% 55%, rgba(244, 123, 32, 0.75) 0%, transparent 100%);
    filter: blur(max(2vw, 25px)) saturate(1.5);
    pointer-events: none;
}
footer .footer-bottom {
    background-color: var(--ocil-bg) !important;
    margin-top: 0 !important;
}
.ocil-footer-top {
    position: relative;
    z-index: 1;
    background: rgba(255, 255, 255, 0.45);
    padding-top: var(--ocil-space-lg);
    padding-bottom: var(--ocil-space-sm);
}
footer .ocil-footer-bottom {
    position: relative;
    z-index: 1;
    background: var(--ocil-bg);
    border-top: none;
    background-image: linear-gradient(90deg, rgb(28, 127, 167), rgba(135, 211, 230, 0.8) 20%, rgba(167, 31, 100, 0.8) 40%, rgba(244, 193, 68, 0.7) 55%, rgba(244, 123, 32, 0.9) 75%, rgba(244, 193, 68, 0.9));
    background-size: 100% 4px;
    background-repeat: no-repeat;
    background-position: top;
    padding-top: 4px;
}
footer .ocil-footer-bottom p { margin: 0; }
footer img.custom-logo { max-width: 368px; }
footer a:not(.btn) { color: #000 !important; }

/* Gradients for hero */
.full-page-top-graphic {
    color: #ffffff;
    isolation: isolate;
    width: 100%;
    padding: 16px 16px 90px;
    position: relative;
    overflow: hidden;
    background-color: rgb(28, 127, 167);
    background-image:
        radial-gradient(circle 300px at 21% -80px, rgba(135, 211, 230, 0.8) 0%, rgba(135, 211, 230, 0) 100%),
        radial-gradient(circle 320px at 39% -100px, rgba(167, 31, 100, 0.8) 0%, rgba(167, 31, 100, 0) 100%),
        radial-gradient(circle 280px at 50% -90px, rgba(244, 193, 68, 0.7) 0%, rgba(244, 193, 68, 0) 100%),
        radial-gradient(circle 380px at 71% -110px, rgba(244, 123, 32, 0.9) 0%, rgba(244, 123, 32, 0) 100%),
        radial-gradient(circle 320px at 88% -75px, rgba(244, 193, 68, 0.9) 0%, rgba(244, 193, 68, 0) 100%);
}
.full-page-top-graphic::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url('/OCIL-Hero.jpg') center 40% / cover no-repeat;
    opacity: 0.12;
}
.ocil-hero-area {
    position: relative;
    overflow: hidden;
    height: 66vh;
    margin-bottom: -2rem;
    border-radius: 0 !important;
    background-image:
        radial-gradient(circle 347px at 21% -137px, rgba(135, 211, 230, 0.8) 0%, rgba(135, 211, 230, 0) 100%),
        radial-gradient(circle 386px at 39% -153px, var(--ocil-accent) 0%, rgba(167, 31, 100, 0) 100%),
        radial-gradient(circle 347px at 50% -157px, rgba(244, 193, 68, 0.6) 0%, rgba(244, 193, 68, 0) 100%),
        radial-gradient(circle 639px at 71% -204px, var(--ocil-orange) 0%, rgba(244, 123, 32, 0) 100%),
        radial-gradient(circle 424px at 88% -135px, rgba(244, 193, 68, 0.9) 0%, rgba(244, 193, 68, 0) 100%),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.05) 40%, transparent 60%);
}
/* Hero image layer — separated so filters only affect the photo, not text/overlays */
.ocil-hero-area::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    background: url('/OCIL-Hero.jpg') center bottom / cover no-repeat;
    filter: contrast(1.15) saturate(1.2) brightness(0.78);
}
/* Vignette overlay for cinematic depth */
.ocil-hero-area::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(ellipse at center, transparent 30%, rgba(0, 0, 0, 0.35) 100%);
}
/* Hero text readability */
.ocil-hero-content {
    padding: var(--ocil-space-3xl);
}
.ocil-hero-content h2,
.ocil-hero-content p {
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.3);
}
.ocil-hero-content .btn-outline-light {
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    border-width: 2px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    background: rgba(0, 0, 0, 0.1);
}
.ocil-hero-content .btn-outline-light:focus {
    color: #fff;
}

/* -------------------------------------------------------------
   Links & Buttons
------------------------------------------------------------- */
a:not(.btn),
a:not(.btn):hover { text-decoration: none !important; }
a:not(.btn) { color: var(--ocil-primary) !important; }
.btn { border-radius: var(--ocil-radius-pill); }
.btn.btn-default {
    color: var(--ocil-primary) !important;
    background-color: var(--ocil-bg) !important;
    border: 1px solid var(--ocil-border) !important;
    transition: all var(--ocil-transition-normal);
}
.btn.btn-default:hover {
    background-color: var(--ocil-primary-subtle) !important;
    border-color: var(--ocil-primary-border) !important;
    color: var(--ocil-primary) !important;
}
.btn.btn-default:focus,
.btn.btn-default.focus {
    background-color: var(--ocil-bg) !important;
    border-color: rgba(87, 166, 205, 0.6) !important;
    color: var(--ocil-primary) !important;
    outline: 2px solid var(--ocil-primary-ring);
    outline-offset: 2px;
    box-shadow: none !important;
}
.btn-check:checked + .btn.btn-default,
:not(.btn-check) + .btn.btn-default:active,
.btn.btn-default:first-child:active,
.btn.btn-default.active,
.btn.btn-default.show {
    background-color: rgba(87, 166, 205, 0.15) !important;
    border-color: rgba(0, 122, 169, 0.5) !important;
    color: var(--ocil-primary-dark) !important;
}
.btn.btn-default:active:focus,
.btn.btn-default.active:focus {
    background-color: rgba(87, 166, 205, 0.15) !important;
    border-color: rgba(87, 166, 205, 0.6) !important;
    color: var(--ocil-primary-dark) !important;
    outline: 2px solid var(--ocil-primary-ring);
    outline-offset: 2px;
}
.btn.btn-default .fa-times,
.btn.btn-default .fa { color: inherit; }
.btn-primary,
.btn-info {
    color: #ffffff !important;
    background-color: var(--ocil-primary-light) !important;
    border-color: var(--ocil-primary-light) !important;
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary.active,
.btn-primary:active:hover,
.btn-primary.active:hover,
.btn-primary:active:focus,
.btn-primary.active:focus,
.btn-primary:active.focus,
.btn-primary.active.focus,
.btn-primary:focus,
.btn-primary.focus { background-color: var(--ocil-primary-dark) !important; }
.btn.btn-info:hover {
    color: var(--bs-btn-hover-color);
    background-color: var(--ocil-primary-dark) !important;
    border-color: var(--ocil-primary-dark) !important;
}
.btn {
    transition: all var(--ocil-transition-normal);
}
.sign-in-container .btn { width: 100%; box-sizing: border-box; }
.sign-in-container a.btn[href*="ForgotPassword"] { margin-top: 0.75rem; }
.sign-in-container .btn.btn-primary.btn-line {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-bottom: var(--ocil-space-md);
    padding: 0.75rem;
    font-size: var(--ocil-font-size-base);
    font-weight: 400;
    border: 1px solid var(--ocil-border-light);
    background-color: var(--ocil-bg) !important;
    color: var(--ocil-text) !important;
    text-align: left;
}
.sign-in-container .btn.btn-primary.btn-line:hover {
    background-color: var(--ocil-bg-light) !important;
    border-color: var(--ocil-border-input);
}
.sign-in-container .btn.btn-primary.btn-line::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 12px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.sign-in-container button[id="Google"]::before { background-image: url('google-logo.svg'); }
.sign-in-container button[value*="login.windows.net"]::before,
.sign-in-container button[value*="ocildev.ciamlogin.com"]::before { background-image: url('entra-logo.svg'); }
/* Page templates (e.g. Full-Page) set `h1, p { color: #fff !important }`
   for the white-on-hero effect. That rule leaks into inline Bootstrap
   modals on the same page — override so modal headings/copy stay dark. */
.modal .modal-title,
.modal .modal-header h1, .modal .modal-header h2,
.modal .modal-body h1, .modal .modal-body h2,
.modal .modal-body h3, .modal .modal-body p {
    color: #000 !important;
}

.modal-footer .btn-primary:disabled,
.modal-footer .btn-primary[disabled] {
    background-color: var(--ocil-primary-disabled) !important;
    border-color: var(--ocil-primary-disabled) !important;
    cursor: not-allowed;
    opacity: 1;
}
.modal-footer .btn.btn-default:disabled,
.modal-footer .btn.btn-default[disabled] {
    color: var(--ocil-text-muted) !important;
    background-color: var(--ocil-bg-muted) !important;
    border-color: var(--ocil-border-light) !important;
    cursor: not-allowed;
    opacity: 1;
}
input.query.form-control { padding-bottom: 9px !important; }
.input-group-btn.align-top > button {
    border-top-right-radius: 5px !important;
    border-bottom-right-radius: 5px !important;
}
.input-group-addon,
.input-group-addon.active {
    border: 1px solid #000 !important;
    border-radius: 0 30px 30px 0 !important;
    height: 38px;
    padding: 8px 16px;
    vertical-align: middle;
}
.datetimepicker .input-group-addon {
    background-color: var(--ocil-bg) !important;
    border: 1px solid var(--ocil-border) !important;
    border-radius: 0 5px 5px 0 !important;
    height: auto !important;
    padding: var(--ocil-input-padding);
    color: var(--ocil-primary) !important;
    transition: all var(--ocil-transition-normal);
}
.datetimepicker .input-group-addon:hover {
    background-color: var(--ocil-primary-subtle) !important;
    border: 1px solid var(--ocil-border) !important;
    color: var(--ocil-primary) !important;
}
.datetimepicker .input-group-addon:focus {
    background-color: var(--ocil-bg) !important;
    border: 1px solid var(--ocil-border) !important;
    color: var(--ocil-primary) !important;
    outline: 2px solid var(--ocil-primary-ring);
    outline-offset: 2px;
    box-shadow: none !important;
}
.datetimepicker .input-group-addon .fa { color: var(--ocil-primary) !important; }

/* -------------------------------------------------------------
   Form Controls & Inputs
------------------------------------------------------------- */
input,
input.msos-input,
.msos-filter-container,
input.form-control,
select.form-control,
textarea.form-control {
    background-color: var(--ocil-bg-subtle);
    border: 2px solid var(--ocil-primary-light);
    transition: border-color var(--ocil-transition-fast), background-color var(--ocil-transition-fast);
}
input:hover:not(:disabled):not([readonly]),
input.msos-input:hover,
input.form-control:hover:not(:disabled):not([readonly]),
select.form-control:hover:not(:disabled):not([readonly]),
textarea.form-control:hover:not(:disabled):not([readonly]) {
    background-color: var(--ocil-bg-hover);
    border: 2px solid var(--ocil-primary);
}
input:focus,
input.msos-input:focus,
input.form-control:focus,
select.form-control:focus,
textarea.form-control:focus {
    background-color: var(--ocil-bg-subtle);
    border-color: var(--ocil-primary);
    box-shadow: 0 0 0 1px var(--ocil-primary);
    outline: none;
}
/* Multi-select overrides */
.msos-container:not(.msos-disabled) {
    background-color: var(--ocil-bg-subtle) !important;
    border: 2px solid var(--ocil-primary-light) !important;
    box-shadow: none !important;
    transition: border-color var(--ocil-transition-fast), background-color var(--ocil-transition-fast) !important;
}
.msos-container:not(.msos-disabled):hover,
.msos-container:not(.msos-disabled).msos-active {
    background-color: var(--ocil-bg-hover) !important;
    border: 2px solid var(--ocil-primary) !important;
    box-shadow: none !important;
}
.msos-container:not(.msos-disabled).msos-focused {
    background-color: var(--ocil-bg-subtle) !important;
    border-color: var(--ocil-primary) !important;
    box-shadow: 0 0 0 1px var(--ocil-primary) !important;
    outline: 0 !important;
}
.msos-filter-container {
    border-radius: 5px;
    background-color: transparent !important;
    border: none !important;
}
/* Select2 */
.select2-container--default .select2-selection--single {
    background-color: var(--ocil-bg-subtle) !important;
    border: 2px solid var(--ocil-primary-light) !important;
    border-radius: var(--bs-border-radius) !important;
    height: var(--ocil-input-height) !important;
    padding: var(--ocil-input-padding) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 1.5 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: var(--ocil-input-height) !important;
    right: 0.75rem !important;
}
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--ocil-border) !important;
    outline: 0 !important;
}

/* Readonly / Disabled fields */
.crmEntityFormView:not(.review-step-compact) .form-control.readonly,
.crmEntityFormView:not(.review-step-compact) .form-control[readonly][disabled],
.crmEntityFormView:not(.review-step-compact) .form-control:disabled,
.crmEntityFormView:not(.review-step-compact) .form-control.aspNetDisabled,
.form-readonly:not(.review-step-compact) .form-control {
  background-color: var(--ocil-bg-disabled) !important;
  border: 1px solid var(--ocil-border) !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  padding: var(--ocil-readonly-padding) !important;
  color: var(--ocil-text-readonly) !important;
  opacity: 1 !important;
}

.review-step-compact .form-control.lookup.readonly,
.review-step-compact .form-control.lookup[readonly][disabled],
.review-step-compact .form-control.lookup:disabled,
.review-step-compact .form-control.lookup.aspNetDisabled {
  background-color: var(--ocil-bg-disabled) !important;
  border: 1px solid var(--ocil-border) !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  padding: var(--ocil-readonly-padding) !important;
  color: var(--ocil-text-readonly) !important;
  opacity: 1 !important;
}

/* Positioning for readonly badge */
.crmEntityFormView:not(.review-step-compact) .control:has(.form-control:disabled),
.crmEntityFormView:not(.review-step-compact) .control:has(.form-control.aspNetDisabled),
.crmEntityFormView:not(.review-step-compact) .control:has(.form-control[readonly][disabled]),
.review-step-compact .control:has(.form-control.lookup:disabled),
.review-step-compact .control:has(.form-control.lookup.aspNetDisabled),
.review-step-compact .control:has(.form-control.lookup[readonly][disabled]) {
  position: relative;
}

/* Readonly badge */
.crmEntityFormView:not(.review-step-compact) .control:has(.form-control:disabled)::after,
.crmEntityFormView:not(.review-step-compact) .control:has(.form-control.aspNetDisabled)::after,
.crmEntityFormView:not(.review-step-compact) .control:has(.form-control[readonly][disabled])::after,
.review-step-compact .control:has(.form-control.lookup:disabled)::after,
.review-step-compact .control:has(.form-control.lookup.aspNetDisabled)::after,
.review-step-compact .control:has(.form-control.lookup[readonly][disabled])::after {
  content: "Read Only";
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ocil-text-muted);
  background-color: var(--ocil-bg-muted);
  padding: var(--ocil-space-xs) var(--ocil-space-sm);
  border-radius: var(--ocil-radius-sm);
  pointer-events: none;
  z-index: 10;
}

/* Select + helper text */
.crmEntityFormView:not(.review-step-compact) .control select + .text-muted,
.review-step-compact .control select.lookup + .text-muted {
  background-color: var(--ocil-bg-disabled) !important;
  border: 1px solid var(--ocil-border) !important;
  cursor: not-allowed !important;
  padding: var(--ocil-readonly-padding) !important;
  border-radius: 6px !important;
}

/* Email in quick views */
.form-readonly:not(.review-step-compact) .control .control:has(a[href^="mailto:"]) {
  background-color: var(--ocil-bg-disabled) !important;
  border: 1px solid var(--ocil-border) !important;
  box-shadow: none !important;
  padding: var(--ocil-readonly-padding) !important;
  border-radius: 5px;
  display: block;
  min-height: var(--ocil-input-height);
}
.form-readonly:not(.review-step-compact) .control .control a[href^="mailto:"] {
  color: var(--ocil-text-readonly) !important;
  text-decoration: none !important;
  cursor: not-allowed !important;
}
.form-readonly:not(.review-step-compact) .control .control a[href^="mailto:"]:hover {
  text-decoration: underline !important;
}
.form-readonly:not(.review-step-compact) .control:has(.control a[href^="mailto:"])::after { top: 0; }

.form-readonly:not(.review-step-compact) .control:has(.form-control[readonly]) { position: relative; }
.form-readonly:not(.review-step-compact) .control:has(.form-control[readonly])::after {
  content: "Read Only";
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ocil-text-muted);
  background-color: var(--ocil-bg-muted);
  padding: var(--ocil-space-xs) var(--ocil-space-sm);
  border-radius: var(--ocil-radius-sm);
  pointer-events: none;
  z-index: 10;
}
.form-readonly:not(.review-step-compact) .form-control[readonly] {
  background-color: var(--ocil-bg-disabled) !important;
  border: 1px solid var(--ocil-border) !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  padding: var(--ocil-readonly-padding) !important;
  color: var(--ocil-text-readonly) !important;
  opacity: 1 !important;
}

/* -------------------------------------------------------------
   Navigation
------------------------------------------------------------- */
.navbar-dark .navbar-nav > li > a,
.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show {
    font-size: var(--ocil-font-size-lg);
    padding: var(--ocil-space-sm);
    color: #000000 !important;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid transparent;
}
.navbar-dark .navbar-nav .show.dropdown-menu > li > a { color: #000000 !important; }
.navbar-dark .navbar-nav > li > a:hover,
.navbar-dark .navbar-nav > li > a:focus {
    background-color: transparent !important;
    color: var(--ocil-primary) !important;
    text-decoration: none !important;
}
.navbar-dark .navbar-nav > .dropdown > a.show,
.navbar-dark .navbar-nav > .dropdown > a.show:hover,
.navbar-dark .navbar-nav > .dropdown > a.show:focus,
.navbar-dark .navbar-nav .show.dropdown-menu {
    background-color: var(--ocil-bg) !important;
}
.navbar-dark .navbar-nav .show.dropdown-menu > li > a:hover,
.navbar-dark .navbar-nav .show.dropdown-menu > li > a:focus,
.navbar-dark .navbar-nav .show.dropdown-menu > .active > a,
.navbar-dark .navbar-nav .show.dropdown-menu > .active > a:hover,
.navbar-dark .navbar-nav .show.dropdown-menu > .active > a:focus,
.dropdown-menu>li>a:focus,
.dropdown-menu>li>a:hover {
    padding: 4px 16px;
    outline: none !important;
    border: none !important;
    background: rgba(0, 122, 169, 0.1) !important;
    color: var(--ocil-primary) !important;
    text-decoration: none !important;
}
.dropdown-menu>.active>a,
.dropdown-menu>.active>a:focus,
.dropdown-menu>.active>a:hover,
.dropdown-menu>a:not(.btn):hover,
.dropdown-menu>.active>a:not(.btn):hover {
    outline: none !important;
    border: none !important;
    background: rgba(0, 122, 169, 0.1) !important;
    color: var(--ocil-primary) !important;
    text-decoration: none !important;
}
.navbar-dark .navbar-toggler {
    border: 2px solid rgba(87, 166, 205, 0.4) !important;
    background-color: var(--ocil-primary-light) !important;
    color: #fff !important;
}

/* -------------------------------------------------------------
   Breadcrumbs & Progress
------------------------------------------------------------- */
.breadcrumb > li a { color: #fff !important; padding: 0 !important; }
.breadcrumb-item:not(.active) { text-decoration: underline !important; }
.breadcrumb-item + .breadcrumb-item::before { color: #fff !important; }
.breadcrumb > .active { color: #fff !important; }
.breadcrumb.pagesBreadcrumb { padding: 15px 0 0 0 !important; }
/* Progress indicator container — equal-width cards across full row */
.progress.list-group.top { background: none !important; }
ol.progress.list-group.top {
    display: flex;
    width: 100%;
    padding: 0;
    margin: 0 0 20px 0;
    border: none;
    background: none !important;
    list-style: none;
    gap: 8px;
}

/* Step cards — base layout */
.progress.list-group.top .list-group-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 14px 20px;
    border: 2px solid #a6b2c0 !important;
    border-radius: 10px !important;
    font-weight: 700;
    position: relative;
    min-height: 52px;
    transition: transform 0.15s ease;
}
/* Defeat Bootstrap's default list-group sibling overrides that zero the top/left
   border and apply a -1px margin on adjacent items — our flex-pill layout
   needs full borders on every card, no margin collapsing. */
.progress.list-group.top .list-group-item + .list-group-item {
    border-top-width: 2px !important;
    border-left-width: 2px !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
}

/* Number circle — base */
.progress.list-group.top .list-group-item .number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 50%;
    font-size: 1.1rem;
    font-weight: 700;
    flex-shrink: 0;
    line-height: 1;
}

/* Upcoming — muted slate (quiet so current + complete pop) */
.progress.list-group.top .list-group-item {
    background: linear-gradient(45deg, #e5e7eb 0%, #cbd5e1 100%) !important;
    color: #64748b !important;
}
.progress.list-group.top .list-group-item .number {
    background: #fff !important;
    color: #64748b !important;
}

/* Complete — lime → fresh green */
.progress.list-group.top .list-group-item.list-group-item-success {
    background: linear-gradient(45deg, #a8e063 0%, #56ab2f 100%) !important;
    color: #fff !important;
    border-color: #3f9136 !important;
}
.progress.list-group.top .list-group-item.list-group-item-success .number {
    background: #fff !important;
    color: #56ab2f !important;
}

/* Current — warm amber → orange (focal) */
.progress.list-group.top .list-group-item.active {
    background: linear-gradient(45deg, #fbbf24 0%, #f97316 100%) !important;
    color: #fff !important;
    font-weight: 700;
    border-color: #c2410c !important;
}
.progress.list-group.top .list-group-item.active .number {
    background: #fff !important;
    color: #c2410c !important;
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.55), 0 0 0 8px rgba(255, 255, 255, 0.18);
}

/* Active step gets a pen icon to mirror the complete checkmark */
.progress.list-group.top .list-group-item.active::after {
    content: "\f044";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: #fff;
    font-size: 1rem;
}

/* Completion checkmark */
.progress.list-group.top .list-group-item .fa-check {
    color: #fff;
}

/* -------------------------------------------------------------
   Sign-in / Register Containers
------------------------------------------------------------- */
.sign-in-container,
.register-container {
    max-width: 500px;
    margin: var(--ocil-space-3xl) auto;
    background-color: var(--ocil-bg);
    border-radius: var(--ocil-radius-md);
    box-shadow: var(--ocil-shadow-md);
    padding: var(--ocil-space-2xl) var(--ocil-space-2xl) var(--ocil-space-xl);
    overflow: hidden;
}
.sign-in-container .nav-tabs.nav-account,
.register-container .nav-tabs.nav-account {
    display: flex;
    justify-content: center;
    border-bottom: none;
    margin: calc(-1 * var(--ocil-space-2xl)) calc(-1 * var(--ocil-space-2xl)) var(--ocil-space-xl) calc(-1 * var(--ocil-space-2xl));
    padding: var(--ocil-space-lg) var(--ocil-space-2xl) 0 var(--ocil-space-2xl);
    background-color: var(--ocil-bg-light);
    border-bottom: 1px solid var(--ocil-border-light);
}
.sign-in-container .nav-tabs.nav-account .nav-item .nav-link,
.register-container .nav-tabs.nav-account .nav-item .nav-link {
    border: none;
    border-bottom: 3px solid transparent;
    color: #a1a1a1;
    font-weight: 700;
    padding: 0.75rem var(--ocil-space-md);
    transition: all var(--ocil-transition-normal);
    border-radius: 0;
    background-color: transparent;
}
.sign-in-container .nav-tabs.nav-account .nav-item .nav-link.active,
.register-container .nav-tabs.nav-account .nav-item .nav-link.active {
    color: var(--ocil-bs-link);
    border-bottom: 3px solid var(--ocil-bs-link);
}
.sign-in-container .nav-tabs.nav-account .nav-item .nav-link:hover,
.register-container .nav-tabs.nav-account .nav-item .nav-link:hover { color: var(--ocil-bs-link); }
.sign-in-container h2,
.register-container h2 {
    margin-bottom: var(--ocil-space-xl);
    font-size: 1.4rem;
    text-align: center;
    font-weight: 400;
    color: var(--ocil-text-light);
}
.sign-in-container .btn,
.register-container .btn { transition: all var(--ocil-transition-normal); }
.sign-in-container .col-md-6 {
    flex: 0 0 100%;
    max-width: 100%;
}
.register-container .row .col-md-2,
.register-container .row .col-md-10 {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
    text-align: left;
}
.register-container .row .offset-md-2 { margin-left: 0; }
.register-container .row.mb-3 { align-items: center; }
.register-container label.required {
    font-weight: 400;
    margin-bottom: var(--ocil-space-sm);
    padding-right: 0;
}
.register-container .form-control {
    height: calc(1.5em + 1rem + 2px);
    padding: var(--ocil-space-sm) var(--ocil-space-md);
    font-size: var(--ocil-font-size-base);
    border-radius: 0.25rem;
    border: 1px solid var(--ocil-border-input);
    width: 100%;
}
.register-container .checkbox {
    margin-top: var(--ocil-space-md);
    margin-bottom: var(--ocil-space-lg);
    text-align: center;
}
.register-container .actions .btn,
.register-container .offset-md-2 .btn {
    width: 100%;
    padding: 0.75rem;
    font-size: var(--ocil-font-size-base);
    font-weight: 400;
}

/* -------------------------------------------------------------
   404 Page
------------------------------------------------------------- */
.not-found-page-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    justify-content: center;
    min-height: 70vh;
    padding: var(--ocil-space-xl);
    gap: var(--ocil-space-xl);
}
.not-found-content {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}
.not-found-content .site-logo { max-width: 200px; margin-bottom: var(--ocil-space-xl); }
.not-found-content h1 {
    font-size: var(--ocil-font-size-4xl);
    font-weight: 700;
    color: var(--ocil-text-dark);
    margin-bottom: var(--ocil-space-md);
}
.not-found-content p {
    font-size: 1.1rem;
    color: var(--ocil-text-muted);
    margin-bottom: var(--ocil-space-xl);
    line-height: 1.6;
    max-width: 450px;
}
.not-found-content .btn-home {
    display: inline-block;
    padding: 0.8rem 2.5rem;
    font-size: var(--ocil-font-size-base);
    font-weight: 400;
    color: #fff !important;
    background-color: var(--ocil-bs-link) !important;
    border-color: var(--ocil-bs-link) !important;
    border-radius: 0.25rem;
    text-decoration: none;
    transition: all var(--ocil-transition-normal);
}
.not-found-content .btn-home:hover {
    background-color: var(--ocil-bs-link-hover) !important;
    border-color: var(--ocil-bs-link-active) !important;
}
.not-found-graphic {
    font-size: clamp(12rem, 18vw, 22rem);
    font-weight: 800;
    color: rgba(87, 166, 205, 0.4);
    line-height: 1;
    text-align: left;
}
@media (max-width: 992px) {
    .not-found-page-container { grid-template-columns: 1fr; text-align: center; gap: var(--ocil-space-sm); align-content: center; }
    .not-found-content { align-items: center; text-align: center; order: 2; }
    .not-found-graphic { font-size: clamp(8rem, 20vw, 15rem); text-align: center; order: 1; }
}

/* -------------------------------------------------------------
   Access Denied Page
------------------------------------------------------------- */
.access-denied-page-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    justify-content: center;
    min-height: 70vh;
    padding: var(--ocil-space-xl);
    gap: var(--ocil-space-xl);
}
.access-denied-content {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}
.access-denied-content h1 {
    font-size: var(--ocil-font-size-4xl);
    font-weight: 700;
    color: var(--ocil-text-dark);
    margin-bottom: var(--ocil-space-md);
}
.access-denied-content p {
    font-size: 1.1rem;
    color: var(--ocil-text-muted);
    margin-bottom: var(--ocil-space-xl);
    line-height: 1.6;
    max-width: 450px;
}
.access-denied-content .btn-home {
    display: inline-block;
    padding: 0.8rem 2.5rem;
    font-size: var(--ocil-font-size-base);
    font-weight: 400;
    color: #fff !important;
    background-color: var(--ocil-bs-link) !important;
    border-color: var(--ocil-bs-link) !important;
    border-radius: 0.25rem;
    text-decoration: none;
    transition: all var(--ocil-transition-normal);
}
.access-denied-content .btn-home:hover {
    background-color: var(--ocil-bs-link-hover) !important;
    border-color: var(--ocil-bs-link-active) !important;
}
.access-denied-graphic {
    font-size: clamp(12rem, 18vw, 22rem);
    font-weight: 800;
    color: rgba(87, 166, 205, 0.4);
    line-height: 1;
    text-align: left;
}
@media (max-width: 992px) {
    .access-denied-page-container { grid-template-columns: 1fr; text-align: center; gap: var(--ocil-space-sm); align-content: center; }
    .access-denied-content { align-items: center; text-align: center; order: 2; }
    .access-denied-graphic { font-size: clamp(8rem, 20vw, 15rem); text-align: center; order: 1; }
}

/* Error pages (404 / 403) use the Default studio template which lacks the
   .full-page-top-graphic header — cancel the overlap margin. */
html:has(.not-found-page-container) #mainContent,
html:has(.access-denied-page-container) #mainContent { margin-top: 0; }

/* -------------------------------------------------------------
   Form Layout, Cards, Read-only, Lookups, Dates
------------------------------------------------------------- */
.crmEntityFormView {
    padding: var(--ocil-space-2xl) !important;
    border-radius: var(--ocil-radius-lg);
    box-shadow: var(--ocil-shadow-md);
}
.quickform .crmEntityFormView { padding: 0; }
.entitylist {
    border-radius: var(--ocil-radius-lg);
    box-shadow: 0px 0px 20px 10px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--ocil-border) !important;
}
.entitylist > div { padding: 10px 15px; }
/* Strengthen faint table/list borders and input borders */
.entitylist .table th,
.entitylist .table td {
    border-color: var(--ocil-border) !important;
}
.entitylist .table thead th {
    border-bottom-width: 2px !important;
}
.crmEntityFormView .form-control,
.entitylist .form-control {
    border-color: var(--ocil-border-input) !important;
}
.crmEntityFormView .cell { padding: 0; }
.crmEntityFormView table > tbody > tr > td.cell {
    padding-top: 0;
    padding-bottom: 0;
}
/* Row gap on desktop only. Below 768px cells stack via display:block and the
   form's default spacing is already acceptable, so we simply omit the rule. */
@media (min-width: 768px) {
    .crmEntityFormView table > tbody > tr:not(:last-child):has(> td.cell > *:not([style*="display: none"])) > td.cell {
        padding-bottom: var(--ocil-form-row-gap);
    }
}
/* Gap between horizontally-adjacent form columns (not on outer edges; skip zero-cell filler).
   Scoped to ≥768px because at smaller widths Power Pages stacks cells to a single
   column via display:block, and the left padding becomes unwanted indent. */
@media (min-width: 768px) {
    .crmEntityFormView table > tbody > tr > td.cell + td.cell:not(.zero-cell) {
        padding-left: var(--ocil-form-col-gap) !important;
    }
    .crmEntityFormView .ocil-review-mode table > tbody > tr > td.cell + td.cell:not(.zero-cell) {
        padding-left: 0 !important;
    }
}

html[dir=ltr] .crmEntityFormView .cell.crmquickform-cell:first-child {
    border-right: none;
}

/* -------------------------------------------------------------
   Page-specific: Review Mode & Subgrids
------------------------------------------------------------- */
.ocil-review-mode fieldset {
    border: none;
    box-shadow: none;
    padding: 0;
    background: transparent;
    margin: 0 0 var(--ocil-space-2xl) 0;
}
.ocil-review-mode fieldset legend.section-title {
    margin-top: 0;
    margin-bottom: var(--ocil-space-sm);
    padding-bottom: var(--ocil-space-xs);
    width: 100%;
}
/* h3 inherits the global section-title style — no override needed in review mode */
.ocil-review-mode table > tbody > tr > td.cell {
    padding: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    line-height: 1.4 !important;
    vertical-align: top;
    border-bottom: 1px solid rgba(0, 122, 169, 0.3);
}

/* Spec-sheet layout for review mode: convert each section's <table> to a
   single vertical column where every visible field is one row with a
   fixed-width label gutter on the left and the value filling the rest.
   This packs ~20 fields into ~20 lines (vs. ~40+ in the stacked layout)
   and uses the page's full width via the long value column. */
.ocil-review-mode table.section,
.ocil-review-mode table.section > tbody,
.ocil-review-mode table.section > tbody > tr {
    display: block;
    width: 100%;
}
.ocil-review-mode table.section > colgroup { display: none; }
.ocil-review-mode table.section > tbody > tr > td.cell {
    display: block;
    padding: 0;
}
/* Hide layout spacers and any cell that doesn't actually carry content */
.ocil-review-mode table.section > tbody > tr > td.cell.zero-cell { display: none; }
.ocil-review-mode table.section > tbody > tr > td.cell:not(:has(.ocil-review-data)):not(.subgrid-cell):not(.checkbox-cell) {
    display: none;
}

/* Each field: label gutter (240px) + value (1fr), with a thin row divider */
.ocil-review-mode .ocil-review-data {
    display: grid !important;
    grid-template-columns: 240px 1fr;
    gap: 0 var(--ocil-space-lg);
    width: 100%;
    padding: var(--ocil-space-sm) 0;
    border-bottom: 1px solid var(--ocil-border-section);
    align-items: baseline;
}
.ocil-review-mode .ocil-review-data > strong {
    margin: 0;
    color: var(--ocil-text-light);
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.4;
}
.ocil-review-mode .ocil-review-data > span {
    margin: 0;
    min-width: 0;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
    color: var(--ocil-text);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.4;
}
.ocil-review-mode td.subgrid-cell { padding: 5px 0 !important; }
.ocil-review-mode .entity-grid.subgrid {
    box-shadow: none;
    border: 1px solid var(--ocil-border-section);
    border-radius: var(--ocil-radius-sm);
    margin-top: 5px;
}
.ocil-review-mode .entity-grid .table thead th {
    padding: 4px 8px !important;
    background: var(--ocil-bg-light);
    font-size: 0.85rem;
    font-weight: 700;
    border-bottom: 1px solid var(--ocil-border-strong);
    height: auto !important;
}
.ocil-review-mode .entity-grid .table tbody td {
    padding: 4px 8px !important;
    font-size: 0.9rem;
    height: auto !important;
    border-top: 1px solid var(--ocil-border-section);
}
.ocil-review-mode .entity-grid .view-toolbar,
.ocil-review-mode .entity-grid .view-pagination { display: none; }
#sg_reviewer_documents .view-toolbar { display: block !important; }
.ocil-review-mode .file-control-container { margin: 0; padding: 0; }

/* Exception: Keep accuracy confirmation checkbox interactive in review mode */
.ocil-review-mode .control:has(input[type="checkbox"]) .ocil-review-data,
.ocil-review-mode td.cell:has(input[type="checkbox"]) .ocil-review-data {
    display: block !important;
}

.ocil-review-mode input[type="checkbox"] {
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    margin-right: 8px;
    cursor: pointer !important;
    pointer-events: auto !important;
}

.ocil-review-mode .control:has(input[type="checkbox"]) label,
.ocil-review-mode td.cell:has(input[type="checkbox"]) label {
    display: inline !important;
    cursor: pointer !important;
}

html[dir=ltr] .crmEntityFormView .cell.checkbox-cell div.table-info {
    padding-left: 0;
}

/* Make the confirmation checkbox larger */
#ocil_confirmation[type="checkbox"] {
    width: 24px !important;
    height: 24px !important;
    cursor: pointer;
}

/* Optional: Add some spacing between checkbox and its wrapper */
.checkbox-cell .control {
    padding-top: 4px;
}

/* -------------------------------------------------------------
   Misc Layout & Components
------------------------------------------------------------- */
.captcha-cell { margin-left: 25px; }
.alert.alert-warning {
    background-color: #fff3cd !important;
    border: 1px solid #e2a903 !important;
    color: #664d03 !important;
}
.alert.sr-only {
    border: 0;
    clip: rect(0 0 0 0);
    height: auto;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap;
}
.float-end.toolbar-actions { display: flex !important; }
.card[id^="ocil-"] .card-header { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.tab-title { display: none; }
.pagination>.active>a,
.pagination>.active>a:focus,
.pagination>.active>a:hover {
    background-color: var(--ocil-bg-shaded) !important;
}
.pagination>.active>a { margin: 0 12px !important; }
.grid-actions a.btn.action {
    margin-left: 18px !important;
    width: max-content !important;
}
.view-grid.table-responsive { overflow: visible; }
/* NO z-index here — creates a stacking context that traps modals under
   the Bootstrap backdrop. DOM order already gives the -80px overlap.
   Scoped to .ocil-body pages so modal iframes don't inherit the negative
   margin (which pushes form content out of the modal viewport). */
html:has(.ocil-body) #mainContent { margin-top: -80px; position: relative; }
ol.progress.list-group.top { position: relative; z-index: 3; }
.section-title {
    margin-top: var(--ocil-space-md);
    margin-bottom: var(--ocil-space-md) !important;
    padding-bottom: 0;
    border-bottom: none;
    width: 100%;
}
.section-title:first-of-type { margin-top: 0; }
.section-title h3 {
    color: var(--ocil-primary-dark) !important;
    font-family: var(--ocil-font-family);
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1.3;
    padding: 0 0 4px 0;
    margin: 0;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 3px solid var(--ocil-primary);
    border-radius: 0;
    text-transform: none;
    letter-spacing: 0;
    display: inline-block;
}
.message.error { padding: 14px !important; }

/* Embedded components */
div[id^="powerpages-react-portal-"] > div[class^="body-"] { border-radius: 10px; }
div[id^="powerpages-react-portal-"] > div[class^="body-"] > .fui-FluentProvider { border-radius: 10px; }
div[id^="powerpages-react-portal-"] > div[class^="body-"] > .fui-FluentProvider > .page-container > span > div {
    border-radius: 10px;
}
body.embedded { background: none; }

/* Table cleanup */
.table > :not(caption) > * > * { background-color: transparent !important; }
.subject-details-card .table td { background-color: transparent !important; box-shadow: none !important; }

/* Body state overrides for 404 */
body[data-sitemap-state="/page-not-found/:/"]:not(.four-zero-four) { background: var(--ocil-bg); }
body[data-sitemap-state="/page-not-found/:/"]:not(.four-zero-four) .crmEntityFormView,
body[data-sitemap-state="/page-not-found/:/"]:not(.four-zero-four) .entitylist { border: none; }
body[data-sitemap-state="/page-not-found/:/"]:not(.four-zero-four) .tab-title { display: none; }
body[data-sitemap-state="/page-not-found/:/"]:not(.four-zero-four) .container:not(.quickform),
body[data-sitemap-state="/page-not-found/:/"]:not(.four-zero-four) .container-fluid,
body[data-sitemap-state="/page-not-found/:/"]:not(.four-zero-four) .content-container:not(.quickform) {
    width: 100% !important;
    max-width: none !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

input[type="checkbox"] {
    width: 20px !important;
    height: 20px !important;
    cursor: pointer;
}

/* Action Required card on the authenticated home (drives users to their Draft) */
.ocil-action-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ocil-space-lg);
    background: var(--ocil-bg);
    border: 1px solid var(--ocil-primary-border);
    border-left: 4px solid var(--ocil-primary);
    border-radius: var(--ocil-radius-md);
    padding: var(--ocil-space-lg) var(--ocil-space-xl);
    margin-bottom: var(--ocil-space-lg);
    box-shadow: var(--ocil-shadow-md);
}
.ocil-action-card-body { flex: 1 1 320px; min-width: 0; }
.ocil-action-card-heading {
    margin: 0 0 var(--ocil-space-xs) 0;
    font-size: var(--ocil-font-size-xl);
    font-weight: 700;
    color: var(--ocil-primary-dark);
}
.ocil-action-card-text { margin: 0; color: var(--ocil-text); }
.ocil-action-card-cta { flex: 0 0 auto; white-space: nowrap; }

/* Eligibility line in the hero (when user is within their 6-month window) */
.ocil-eligibility-line {
    margin-top: var(--ocil-space-md);
    padding: var(--ocil-space-sm) var(--ocil-space-md);
    background: rgba(255, 255, 255, 0.15);
    border-left: 3px solid var(--ocil-gold);
    border-radius: var(--ocil-radius-sm);
    color: #fff;
}

/* Eligibility block on the New Complaint page (defense-in-depth gate) */
.ocil-eligibility-block {
    background: var(--ocil-bg);
    border: 1px solid var(--ocil-border);
    border-radius: var(--ocil-radius-md);
    padding: var(--ocil-space-2xl);
    margin: var(--ocil-space-xl) auto;
    max-width: 600px;
    text-align: center;
    box-shadow: var(--ocil-shadow-md);
}
.ocil-eligibility-block p { margin-bottom: var(--ocil-space-lg); font-size: var(--ocil-font-size-lg); }

/* -------------------------------------------------------------
   Invitation Page Tweaks
------------------------------------------------------------- */
/* Hide the empty local-registration column */
#ContentContainer_MainContent_MainContent_SecureRegister .row .col-lg-6:first-child {
  display: none;
}
/* Make the external-login column full width */
#ContentContainer_MainContent_MainContent_SecureRegister .row .col-lg-6:last-child {
  flex: 0 0 100%;
  max-width: 100%;
}
/* Invitation code alert tweaks */
#ContentContainer_MainContent_MainContent_SecureRegister .alert.alert-info {
  font-size: 0.9rem;
  word-break: break-all;
  overflow-wrap: anywhere;
}

/* -------------------------------------------------------------
   Password Strength & Toggle Helpers
------------------------------------------------------------- */
.pw-toggle { margin-top: 4px; }
.pw-strength { margin-top: 6px; display: none; }
.pw-bar { height: 6px; background: var(--ocil-border-strong); width: 100%; border-radius: 3px; overflow: hidden; }
.pw-fill { height: 6px; width: 0%; transition: width var(--ocil-transition-normal); }
.pw-score-0 { background: var(--ocil-error); }
.pw-score-1 { background: var(--ocil-warning); }
.pw-score-2 { background: var(--ocil-warning); }
.pw-score-3 { background: var(--ocil-info); }
.pw-score-4 { background: var(--ocil-success); }
.pw-label, .pw-match { margin-top: 4px; font-size: 0.9rem; color: var(--ocil-text-faint); }

/* -------------------------------------------------------------
   Compact Review Step Styling
------------------------------------------------------------- */

.review-step-compact .form-control:not(.lookup),
.review-step-compact .control input:not(.lookup),
.review-step-compact .control textarea:not(.lookup),
.review-step-compact .control select:not(.lookup) {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-height: 0;
}

/* Suppress the form-section accent treatment in compact review step */
.review-step-compact .section-title {
  margin-top: 0;
  padding-bottom: var(--ocil-space-xs);
  border-bottom: none;
}
.review-step-compact .section-title h3 {
  background: none;
  border-left: none;
  border-radius: 0;
  padding: 0;
  text-transform: none;
  letter-spacing: 0;
  color: #000 !important;
  display: block;
}

.review-step-compact .control-label {
  margin: 0 0 2px 0;
  padding: 0;
  line-height: 1.2;
}
.review-step-compact .form-group {
  margin: 0 0 6px 0;
  padding: 0;
}
.review-step-compact .row > [class^="col-"] {
  padding-left: 0;
  padding-right: 0;
}

.review-step-compact.crmEntityFormView
table > tbody > tr:not(:last-child):has(> td.cell > *:not([style*="display: none"])) > td.cell {
  padding-bottom: 2px !important;
}

.review-step-compact.crmEntityFormView .cell div.table-info.required label::after {
  content: '' !important;
}

.review-step-compact .form-control:not(.lookup):focus,
.review-step-compact .form-control:not(.lookup):focus-visible,
.review-step-compact .form-control:not(.lookup):focus:active,
.review-step-compact .form-control.readonly:not(.lookup):focus,
.review-step-compact .form-control[readonly][disabled]:not(.lookup):focus {
  outline: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

/* -------------------------------------------------------------
   Notification Bar
------------------------------------------------------------- */
.notification-bar {
    background: linear-gradient(90deg, var(--ocil-primary) 0%, var(--ocil-accent) 100%);
    position: relative;
    z-index: 2;
    transition: height var(--ocil-transition-slow), opacity var(--ocil-transition-slow);
}

.py-3 {
    padding-top: var(--ocil-space-md) !important;
    padding-bottom: var(--ocil-space-md) !important;
}

.notification-close {
    transition: opacity var(--ocil-transition-normal);
    padding: 0;
}

.notification-icon, .notification-text a, .notification-close {
    color: var(--ocil-teal) !important;
}

.btn-close {
    color: var(--ocil-teal) !important;
    background-color: var(--ocil-bg);
}

.text-decoration-none {
    text-decoration: none !important;
}

.ms-2 {
    margin-left: var(--ocil-space-sm) !important;
}

#MessageLabel p,
#MessageLabel h3,
#MessageLabel li {
    color: #000 !important;
}

/* -------------------------------------------------------------
   Responsive: Small phones (< 576px)
------------------------------------------------------------- */
@media (max-width: 576px) {
    .ocil-hero-area { height: 50vh; }
    .ocil-hero-content { padding: var(--ocil-space-lg); }
    .sign-in-container,
    .register-container {
        margin: var(--ocil-space-md);
        padding: var(--ocil-space-lg);
    }
    .crmEntityFormView { padding: var(--ocil-space-lg) !important; }
}

/* -------------------------------------------------------------
   Responsive: Large screens (> 1200px)
------------------------------------------------------------- */
@media (min-width: 1200px) {
    .ocil-hero-content { padding: var(--ocil-space-3xl) 4rem; }
}

/* -------------------------------------------------------------
   Keyboard Focus Indicator (:focus-visible)
   Supplements existing :focus rules so keyboard users get a
   consistent visible ring; mouse focus is unchanged.
------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
.btn:focus-visible,
.page-link:focus-visible,
.dropdown-item:focus-visible {
    outline: 2px solid var(--ocil-primary-ring);
    outline-offset: 2px;
}

/* -------------------------------------------------------------
   Collapsed mobile nav: cap expanded height so contents scroll.
   Replaces the inline setHeight() JS removed from header templates.
------------------------------------------------------------- */
@media (max-width: 1199.98px) {
    .navbar .navbar-collapse.show,
    .navbar .navbar-collapse.collapsing {
        max-height: calc(100vh - 140px);
        overflow-y: auto;
    }
}

/* -------------------------------------------------------------
   Empty List / "No records" State
   Replaces default yellow Bootstrap warning with a soft,
   centered placeholder.
------------------------------------------------------------- */
.view-empty.message {
    margin: 0 !important;
    padding: var(--ocil-space-xl) 25px !important;
    background-color: var(--ocil-bg-subtle) !important;
    border: 1px dashed var(--ocil-border) !important;
    border-radius: var(--ocil-radius-md) !important;
    color: var(--ocil-text-muted) !important;
    text-align: center;
    font-size: var(--ocil-font-size-base);
}
.view-empty.message .alert.alert-block.alert-warning,
.view-empty .alert.alert-warning {
    background: transparent !important;
    border: none !important;
    color: inherit !important;
    padding: 0 !important;
    margin: 0;
    text-align: center;
    font-size: inherit;
}

/* -------------------------------------------------------------
   Withdraw button in section-title legend
   Page JS inserts a floated <button class="btn btn-danger">
   before the first h3 inside legend.section-title; lift it so
   it doesn't overlap the section's border-bottom divider.
------------------------------------------------------------- */
legend.section-title > button.btn.btn-danger,
.section-title > button.btn.btn-danger {
    margin-top: -6px;
    margin-left: 12px;
}