/* Employment Verification console.

   A global sheet rather than three scoped .razor.css files because the same page
   head, stat strip and drawer appear on Needs request, Tracking and Contacts - the
   feature guide's rule is to share a look, not copy it. Rules that target
   TableComponent internals have to be global anyway: the ::deep boundary and the
   scope attribute make those overrides fragile to duplicate per page.

   Everything here builds on the shared .ats-management-* family in ats.css and the
   --c-* tokens in theme.css. No colour literals, and nothing re-declares a colour,
   radius or type scale that a shared class already sets.

   Loaded from index.html after ats.css so the --management-* re-pointing below wins. */

/* ---- Console navbar tabs ----

   Global, not scoped to EVLayout, and deliberately so. The tabs are <NavLink>
   components, and Blazor does not apply a scope attribute to a child component's
   markup - the generated code passes class="ev-nav-item" with no b-* attribute. A
   scoped rule compiles to .ev-nav-item[b-xxxxx] and therefore never matches, which
   left the anchors falling through to app.css's global `a { color: var(--c-blue-600) }`.
   In light mode that is dark navy text on the dark navy navbar: unreadable.

   .ats-console-nav-item in ats.css is global for exactly the same reason. */

.ev-topbar-nav {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 8px;
    flex: 1 1 auto;
    justify-content: center;
}

.ev-nav-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    padding: 0 20px;
    border-radius: 10px;
    /* An on-dark token, never the ramp: this sits on --c-sidebar-gradient, which is
       dark in BOTH themes, so a ramp colour would invert and disappear in light mode. */
    color: var(--c-on-dark-fg-muted);
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.ev-nav-item:hover {
    background: var(--c-on-dark-hover);
    color: var(--c-on-dark-fg);
    text-decoration: none;
}

/* Blazor's NavLink adds .active. The wash matches the ATS sidebar's active item;
   the underline is what makes a horizontal axis readable, and is the one place the
   teal accent appears in the shell. */
.ev-nav-item.active {
    background: var(--c-on-dark-border);
    color: var(--c-on-dark-fg);
    font-weight: 600;
}

.ev-nav-item.active::after {
    position: absolute;
    right: 16px;
    bottom: 5px;
    left: 16px;
    height: 3px;
    border-radius: 3px;
    background: var(--c-ev-accent-soft);
    content: "";
}

.ev-nav-item:focus-visible {
    outline: 3px solid var(--c-ev-focus-ring);
    outline-offset: 2px;
}

.ev-nav-ic {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    font-size: 18px;
}

/* Below the 960px platform breakpoint the tabs become a horizontal scroll strip
   rather than an off-canvas drawer: three items fit a 390px strip, and a hamburger
   for three items is worse than the scroll. */
@media (max-width: 960px) {
    .ev-topbar-nav {
        order: 3;
        width: 100%;
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 2px;
        scrollbar-width: none;
    }

    .ev-topbar-nav::-webkit-scrollbar {
        display: none;
    }
}

@media (max-width: 600px) {
    .ev-nav-item {
        gap: 8px;
        padding: 0 14px;
        font-size: 13px;
    }

    .ev-topbar-nav {
        gap: 6px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ev-nav-item {
        transition: none;
    }
}

.ev-management-page {
    /* The shared .ats-management-* rules read the --management-* custom properties.
       Re-pointing the accent ones here gives every shared class the Employment
       Verification teal without a second copy of any rule. The neutrals are left
       alone on purpose - borders and body text should match ATS exactly. */
    --management-navy-900: var(--c-ev-fg);
    --management-navy-800: var(--c-ev-accent-strong);
    --management-blue-600: var(--c-ev-accent);
    --management-blue-500: var(--c-ev-accent-soft);
    --management-blue-tint: var(--c-ev-tint);
    --management-blue-tint-2: var(--c-ev-tint-2);
    --management-border: var(--c-border-soft);
    --management-border-strong: var(--c-border-strong);
    --management-text-1: var(--c-fg-strong);
    --management-text-2: var(--c-fg-muted);
    --management-text-3: var(--c-fg-subtle);
    --management-green: var(--c-success);
    --management-green-tint: var(--c-success-bg);
    width: 100%;
    color: var(--management-text-1);
    font-family: "Inter", sans-serif;
}

/* ---- Page head ----
   ATS gets its page title from the console topbar breadcrumb. The EV navbar carries
   tabs in that space instead, so each page states its own heading here. */

.ev-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 20px;
}

.ev-eyebrow {
    display: block;
    margin-bottom: 4px;
    color: var(--c-ev-accent);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ev-page-head h1 {
    margin: 0;
    color: var(--c-fg-strong);
    font-family: "Poppins", sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
}

.ev-page-head p {
    margin: 5px 0 0;
    color: var(--c-fg-muted);
    font-size: 13.5px;
}

/* ---- Stat strip (Tracking) ---- */

.ev-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.ev-stat {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 18px;
    border: 1px solid var(--c-border-soft);
    border-radius: 14px;
    background: var(--c-surface);
    box-shadow: var(--c-shadow-card);
}

.ev-stat span {
    color: var(--c-fg-muted);
    font-size: 12px;
    font-weight: 500;
}

.ev-stat strong {
    color: var(--c-ev-fg);
    font-family: "Poppins", sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
}

/* ---- Table cells ---- */

.ev-stacked-cell {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.ev-stacked-cell strong {
    color: var(--c-fg-strong);
    font-weight: 600;
}

.ev-stacked-cell small {
    color: var(--c-fg-subtle);
    font-size: 12px;
}

/* Long addresses must wrap rather than force the table wider. */
.ev-email-cell {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* The decline reason is anonymous free text of up to 1000 characters, so it wraps
   anywhere like an address does - and is clamped, because one long sentence must not
   set the row height for the whole page. The cell carries the full text on its title
   attribute. Two classes because the clamp needs a box to apply to and a <td> is not
   one: the same split .ev-email-cell and .ev-stacked-cell already use. */
.ev-reason-cell {
    min-width: 0;
    overflow-wrap: anywhere;
}

.ev-reason-clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    color: var(--c-fg-subtle);
    font-size: 13px;
    line-height: 1.5;
}

/* A standing note on the queue screen explaining that sending is automatic. Uses the
   EV tint rather than a status colour: it is context, not a warning. */
.ev-notice {
    margin-bottom: 18px;
    padding: 12px 16px;
    border-left: 3px solid var(--c-ev-accent);
    border-radius: 0 10px 10px 0;
    background: var(--c-ev-tint);
    color: var(--c-ev-fg-muted);
    font-size: 13px;
    line-height: 1.55;
}

/* ---- Contact dialogs ----

   Global rather than scoped for two reasons. The markup is split across three
   components - AddContactComponent, EditContactComponent and the ContactDialogFields
   they share - so a scoped sheet would carry one component's scope attribute and miss
   the others. And the MudBlazor internals below would need ::deep in scoped CSS, which
   the guide calls out as fragile to duplicate.

   The shell, header and scroll behaviour come from the shared .ats-scroll-dialog and
   .ats-dialog-headline families in ats.css - including the navy gradient header, which
   is deliberately identical to ATS. Only what is genuinely unique is here. */

.evc-shell,
.evc-shell *,
.evc-shell *::before,
.evc-shell *::after {
    box-sizing: border-box;
}

.evc-shell {
    width: 100%;
    overflow: hidden;
    background: var(--c-surface);
    color: var(--c-fg-strong);
    font-family: "Inter", sans-serif;
}

.evc-body {
    padding: 22px 26px 6px;
}

.evc-section {
    margin-bottom: 18px;
    overflow: hidden;
    border: 1px solid var(--c-border);
    border-radius: 14px;
    background: var(--c-surface-sunken);
}

.evc-section-head {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 51px;
    padding: 13px 18px;
    border-bottom: 1px solid var(--c-border);
    background: var(--c-ev-tint);
}

.evc-section-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    border-radius: 7px;
    background: var(--c-chip-solid-bg);
    color: var(--c-on-dark-fg);
    font-family: "Poppins", sans-serif;
    font-size: 12px;
    font-weight: 600;
}

.evc-section-head h2 {
    margin: 0;
    color: var(--c-fg-strong);
    font-family: "Poppins", sans-serif;
    font-size: 14.5px;
    font-weight: 600;
}

.evc-section-helper {
    margin-left: auto;
    color: var(--c-fg-subtle);
    font-size: 11.5px;
    font-weight: 500;
    text-align: right;
}

.evc-section-body {
    display: grid;
    gap: 14px;
    padding: 18px;
}

.evc-field {
    position: relative;
    min-width: 0;
}

.evc-field > label {
    display: block;
    margin-bottom: 6px;
    color: var(--c-fg-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.evc-required {
    margin-left: 2px;
    color: var(--c-danger);
}

.evc-hint {
    display: block;
    margin-top: 6px;
    color: var(--c-fg-subtle);
    font-size: 11.5px;
    line-height: 1.45;
}

.evc-note {
    margin: 0 0 18px;
    padding: 12px 14px;
    border-left: 3px solid var(--c-ev-accent);
    border-radius: 0 10px 10px 0;
    background: var(--c-ev-tint);
    color: var(--c-ev-fg-muted);
    font-size: 12.5px;
    line-height: 1.5;
}

/* MudBlazor input internals, matching the ATS dialog treatment. */

.evc-input-wrap .mud-input-control {
    margin-top: 0;
}

.evc-input-wrap .mud-input {
    min-height: 42px;
    border-radius: 10px;
    background: var(--c-surface);
    color: var(--c-fg-strong);
    font-family: "Inter", sans-serif;
    font-size: 14px;
}

.evc-input-wrap .mud-input-slot {
    height: 42px !important;
    min-height: 42px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    color: var(--c-fg-strong);
    font-family: "Inter", sans-serif;
    font-size: 14px;
    line-height: 42px;
}

.evc-input-wrap .mud-input-slot::placeholder {
    color: var(--c-fg-subtle);
    opacity: 1;
}

.evc-input-wrap .mud-input-outlined-border {
    border-width: 1.5px;
    border-color: var(--c-border-strong);
    border-radius: 10px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.evc-input-wrap .mud-input:focus-within .mud-input-outlined-border {
    border-color: var(--c-ev-accent-soft);
    box-shadow: 0 0 0 3px var(--c-ev-focus-ring);
}

.evc-input-wrap .mud-input-error .mud-input-outlined-border {
    border-color: var(--c-danger);
}

.evc-input-wrap .mud-input-adornment {
    color: var(--c-fg-subtle);
}

.evc-input-wrap .mud-input-adornment-start {
    margin-right: 8px;
    margin-left: 0;
    margin-inline-start: unset;
    margin-inline-end: 8px;
}

.evc-input-wrap .mud-input-adornment-start .mud-icon-root {
    width: 16px;
    height: 16px;
    font-size: 16px;
}

/* Status toggle */

.evc-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--c-border);
    border-radius: 12px;
    background: var(--c-surface);
}

.evc-status-copy p {
    margin: 0;
    color: var(--c-fg-strong);
    font-size: 13px;
    font-weight: 600;
}

.evc-status-copy span {
    color: var(--c-fg-subtle);
    font-size: 11.5px;
}

.evc-status-control {
    display: flex;
    align-items: center;
    gap: 10px;
}

.evc-status-badge {
    padding: 4px 10px;
    border-radius: 20px;
    background: var(--c-success-bg);
    color: var(--c-success);
    font-size: 11.5px;
    font-weight: 700;
}

.evc-status-badge.is-off {
    background: var(--c-neutral-bg);
    color: var(--c-neutral-fg);
}

.evc-toggle {
    position: relative;
    width: 44px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--c-ev-accent);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.evc-toggle.is-off {
    background: var(--c-border-strong);
}

.evc-toggle > span {
    position: absolute;
    top: 3px;
    left: 21px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--c-surface);
    transition: left 0.15s ease;
}

.evc-toggle.is-off > span {
    left: 3px;
}

.evc-toggle:focus-visible {
    outline: 3px solid var(--c-ev-focus-ring);
    outline-offset: 2px;
}

/* Footer */

.evc-footer {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    padding: 18px 26px 22px;
    border-top: 1px solid var(--c-border);
    background: var(--c-surface);
}

.evc-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 20px;
    border-radius: 10px;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.15s ease;
}

.evc-button svg {
    width: 16px;
    height: 16px;
}

.evc-button:active {
    transform: scale(0.97);
}

.evc-button:focus-visible {
    outline: 3px solid var(--c-ev-focus-ring);
    outline-offset: 2px;
}

.evc-button-cancel {
    border: 1.5px solid var(--c-border-strong);
    background: var(--c-surface);
    color: var(--c-fg-muted);
}

.evc-button-save {
    border: 0;
    background: linear-gradient(120deg, var(--c-ev-accent-strong), var(--c-ev-accent));
    color: var(--c-on-dark-fg);
    box-shadow: 0 8px 20px -6px var(--c-ev-shadow);
}

@media (max-width: 600px) {
    .evc-body {
        padding: 18px 16px 4px;
    }

    .evc-footer {
        padding: 16px;
    }

    .evc-button {
        flex: 1 1 100%;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .evc-button,
    .evc-toggle,
    .evc-toggle > span,
    .evc-input-wrap .mud-input-outlined-border {
        transition: none;
    }
}