/* =============================================================================
   DIHR brand styling (design.md). Overrides Bootstrap variables with the
   approved palette and typography. Loaded after bootstrap.min.css.
   ========================================================================== */

:root {
    /* Approved palette only — no transparencies, no gradients (design.md §1). */
    --dihr-deep-red:   #C32032; /* accent: links, headlines, CTAs — never a bg */
    --dihr-dark-blue:  #0F294A; /* primary background / buttons / text */
    --dihr-beige:      #F8F0E2; /* secondary background */
    --dihr-light-blue: #639FAB; /* accent background / buttons */
    --dihr-black:      #05070C; /* main text */
    --dihr-white:      #FFFFFF;

    /* Holding-shape radius. design.md §3: 2.5% of the shorter side for large
       responsive shapes; a fixed token keeps small controls consistent. */
    --dihr-hold-radius: 1rem;

    /* Map Bootstrap 5.3 CSS variables onto the brand palette. */
    --bs-body-color: var(--dihr-black);
    --bs-body-bg: var(--dihr-white);
    --bs-primary: var(--dihr-dark-blue);
    --bs-primary-rgb: 15, 41, 74;
    --bs-link-color: var(--dihr-deep-red);
    --bs-link-color-rgb: 195, 32, 50;
    --bs-link-hover-color: #97121f;
    --bs-border-radius: var(--dihr-hold-radius);

    /* Typography (design.md §2). Proxima Nova is licensed and must be vendored
       into /assets/fonts when available; Segoe UI is the approved fallback. */
    --bs-body-font-family: "Proxima Nova", "Segoe UI", system-ui, -apple-system, sans-serif;
}

body {
    font-family: var(--bs-body-font-family);
    color: var(--dihr-black);
    background: var(--dihr-white);
    text-align: left;            /* design.md §2: strictly left-aligned */
}

/* design.md §2: no italics, no text effects, sentence case (avoid all-caps). */
em, i, cite, address { font-style: normal; }
* { text-shadow: none !important; }
.text-uppercase { text-transform: none !important; }

/* Headlines use the deep-red accent, sentence case, semibold. */
h1, h2, h3, h4, h5, h6 {
    color: var(--dihr-deep-red);
    font-weight: 600;
    text-transform: none;
}

a { color: var(--dihr-deep-red); }
a:hover { color: var(--bs-link-hover-color); }

/* --- The "holding shape": three rounded corners + one sharp (bottom-left) --- */
.card, .alert, .btn, .form-control, .form-select, .list-group-item, .holding-shape {
    border-radius: var(--dihr-hold-radius) var(--dihr-hold-radius) var(--dihr-hold-radius) 0;
}
.holding-shape-lg {
    border-radius: 2.5% 2.5% 2.5% 0;
}

/* --- Navbar / footer (dark blue background, white text: ~13:1 contrast) --- */
.dihr-navbar {
    background-color: var(--dihr-dark-blue);
}
.dihr-navbar .navbar-brand,
.dihr-navbar .nav-link,
.dihr-navbar .navbar-text { color: var(--dihr-white); }
.dihr-navbar .nav-link:hover,
.dihr-navbar .nav-link:focus { color: var(--dihr-beige); }
.dihr-footer {
    color: var(--dihr-dark-blue);
    border-top: 2px solid var(--dihr-beige);
}

/* --- Buttons --- */
.btn-primary {
    --bs-btn-bg: var(--dihr-dark-blue);
    --bs-btn-border-color: var(--dihr-dark-blue);
    --bs-btn-hover-bg: #0a1d36;
    --bs-btn-hover-border-color: #0a1d36;
    --bs-btn-color: var(--dihr-white);
    --bs-btn-hover-color: var(--dihr-white);
}
.btn-accent {
    --bs-btn-bg: var(--dihr-light-blue);
    --bs-btn-border-color: var(--dihr-light-blue);
    --bs-btn-color: var(--dihr-black);
    --bs-btn-hover-bg: #527f88;
    --bs-btn-hover-color: var(--dihr-white);
}

/* Secondary surfaces use the beige token. */
.surface-beige { background-color: var(--dihr-beige); }

/* --- Accessibility (manifesto §3 / WCAG 2.1 AA) --- */
.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    background: var(--dihr-dark-blue);
    color: var(--dihr-white);
    padding: 0.5rem 1rem;
    z-index: 1000;
}
.skip-link:focus { left: 0; }

a:focus-visible,
button:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.btn:focus-visible {
    outline: 3px solid var(--dihr-light-blue);
    outline-offset: 2px;
}

/* Status pills for approval/state display. */
.pill { display: inline-block; padding: 0.15rem 0.6rem; border-radius: 1rem 1rem 1rem 0; font-size: 0.85rem; }
.pill-pending  { background: var(--dihr-beige);      color: var(--dihr-black); }
.pill-approved { background: var(--dihr-light-blue);  color: var(--dihr-black); }
.pill-rejected { background: var(--dihr-deep-red);    color: var(--dihr-white); }

/* Active nav item. */
.dihr-navbar .nav-link.active {
    color: var(--dihr-beige);
    font-weight: 600;
    border-bottom: 2px solid var(--dihr-deep-red);
}

/* --- Workflow stepper (request progress) --- */
.dihr-stepper { overflow-x: auto; }
.dihr-steps { display: flex; list-style: none; margin: 0; padding: 0; }
.dihr-step {
    position: relative;
    flex: 1 1 0;
    min-width: 96px;
    padding-top: 1.75rem;
    text-align: center;
    font-size: 0.85rem;
}
.dihr-step::before {
    content: "";
    position: absolute;
    top: 0.45rem;
    left: -50%;
    width: 100%;
    height: 2px;
    background: var(--dihr-light-blue);
    z-index: 0;
}
.dihr-step:first-child::before { display: none; }
.dihr-step-dot {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: var(--dihr-white);
    border: 2px solid var(--dihr-light-blue);
    z-index: 1;
}
.dihr-step-done .dihr-step-dot    { background: var(--dihr-light-blue); border-color: var(--dihr-light-blue); }
.dihr-step-current .dihr-step-dot { background: var(--dihr-deep-red);   border-color: var(--dihr-deep-red); }
.dihr-step-current .dihr-step-label { color: var(--dihr-deep-red); font-weight: 600; }
.dihr-step-todo .dihr-step-label  { color: #5b6470; }

/* Wrapping preformatted blocks (e.g. the notifications log). */
.dihr-pre { white-space: pre-wrap; word-break: break-word; }