:root {
    --primary: #2563eb;
    --primary-glow: #3b82f6;
}

/*
   Every Bootstrap size (headings, badges, buttons, .fs-*, icon glyphs - bi
   icons are font glyphs, so they scale with this too) is defined in rem,
   which is relative to the root (html) font-size. Dropping it from the
   16px default to 14px scales all of that down together in one place,
   instead of hunting down every heading/label across every page.

   Text still needs to shrink a bit further as the screen gets smaller - a
   14px base that looks right on a laptop reads noticeably bigger on a phone,
   where the same rem-sized headings/badges/tiles have much less width to
   work with. These breakpoints match the ones already used for the sidebar
   (992px) and the star-rating widget (576px) elsewhere in this file, so the
   whole responsive scheme stays on one shared set of steps.
*/
html {
    font-size: 14px;
}

@media (max-width: 991.98px) {
    html {
        font-size: 13.5px;
    }
}

@media (max-width: 575.98px) {
    html {
        font-size: 13px;
    }
}

body {
    font-family: 'Segoe UI', sans-serif;
}

/* Bootstrap sets its own monospace stack on these by default (e.g. the
   <code> username cell on Admin > User Management) - pull them back onto
   the site's one font family so weight (via font-weight/fw-*) is the only
   thing that ever varies, never the typeface itself. */
code,
kbd,
pre,
samp {
    font-family: inherit;
}

/*
   Every native <select>/.form-select in the system - status filters on
   Manager > Job Tickets/Office Tasks, the Period/Employee selects on
   Manager > Performance Evaluation, the Report Period select on Manager >
   Performance Report, etc. - applied globally rather than per-page so a
   dropdown added anywhere automatically matches. A deliberate border makes
   every one read as a real control (not just Bootstrap's default hairline),
   text always reads left-to-right (some contexts otherwise inherit a
   centered text-align from an ancestor, e.g. a table cell), and hovering or
   focusing the control plus the selected-option highlight all use the same
   dark purple brand accent (matches .status-dropdown-btn/.progress-bar-brand)
   instead of the browser's default blue.
*/
select,
.form-select {
    text-align: left;
    border: 1.5px solid rgba(2,2,54,.25);
}

    select option {
        text-align: left;
    }

    .form-select:hover {
        border-color: #47076f;
    }

    .form-select:focus {
        border-color: #47076f;
        box-shadow: 0 0 0 .18rem rgba(71,7,111,.18);
    }

    /* Best-effort - only Chromium-based browsers let CSS reach into the
       native dropdown popup at all; Firefox/Safari keep their own colors. */
    select option:checked,
    select option:hover {
        background: linear-gradient(#47076f, #47076f);
        color: #fff;
    }

/*
   position: sticky + align-self: flex-start keeps the sidebar pinned to
   exactly the viewport height, independent of its flex sibling (main). By
   default a flex row stretches every child to match the tallest one
   (align-items: stretch), so without this the sidebar's rendered height
   would track whatever main happens to be at that instant - very visible on
   pages like Manager/PerformanceEvaluation/Create, where selecting an
   employee reveals/hides large blocks of criteria via JS and used to make
   the sidebar visibly grow/shrink along with it. overflow-y lets the nav
   scroll on its own if it ever has more links than a short window can fit.

   flex-shrink: 0 is just as important: every flex item defaults to
   flex-shrink: 1, so if main's content is ever wider than the space left for
   it (e.g. a wide table/form on a page like the one above), the browser
   would otherwise shrink the sidebar along with it to make room, even below
   its own 250px width. main gets min-width: 0 (see the layout files) so IT
   absorbs all of that instead - the sidebar now never gives up width no
   matter how wide main's content gets.
*/
.sidebar {
    width: 250px;
    height: 100vh;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    align-self: flex-start;
    overflow-y: auto;
    background: linear-gradient(180deg, #00001e, #020236);
}

/* ===================== Responsive app shell ===================== */
/*
   Below 992px (phones and portrait tablets) the sidebar becomes an
   off-canvas panel: fixed, translated fully off-screen, and slid in over a
   dimmed backdrop via the .sidebar-open toggle class (see
   wwwroot/js/sidebar-toggle.js). At 992px and up (landscape tablets,
   laptops, desktops) none of this applies - the sidebar rules above just
   render statically like before, and .mobile-topbar stays hidden.
*/
.mobile-topbar {
    display: none;
    align-items: center;
    gap: .75rem;
    background-color: #020236;
    color: #fff;
    padding: .75rem 1rem;
    position: sticky;
    top: 0;
    z-index: 1040;
}

    .mobile-topbar .sidebar-toggle-btn {
        background: rgba(255,255,255,.12);
        border: 0;
        color: #fff;
        width: 40px;
        height: 40px;
        border-radius: 8px;
        font-size: 1.25rem;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

        .mobile-topbar .sidebar-toggle-btn:hover {
            background: rgba(255,255,255,.22);
        }

.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .5);
    z-index: 1045;
    border: 0;
    padding: 0;
}

@media (max-width: 991.98px) {
    .mobile-topbar {
        display: flex;
    }

    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 260px;
        max-width: 82vw;
        z-index: 1050;
        transform: translateX(-100%);
        transition: transform .2s ease-in-out;
        overflow-y: auto;
    }

        .sidebar.sidebar-open {
            transform: translateX(0);
        }

    .sidebar-backdrop.show {
        display: block;
    }
}

.sidebar h4 {
    font-size: 1.15rem;
}

/*
       display: flex (rather than Bootstrap's block .nav-link) plus a
       fixed-width icon slot lines every label up on the same left edge,
       regardless of how wide each bi glyph happens to be - without it,
       "Dashboard" and "Criteria" start at visibly different x positions.

       position: relative is what the .active indicator bar below anchors to.
    */
.sidebar .nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .92rem;
    font-weight: 500;
    border-radius: 10px;
    margin-bottom: 2px;
    padding: 10px 14px;
    color: rgba(255,255,255,.92);
}

    .sidebar .nav-link i {
        font-size: 1.05rem;
        width: 1.3rem;
        text-align: center;
        flex-shrink: 0;
    }

    .sidebar .nav-link:hover {
        background: rgba(255,255,255,.1);
        color: #fff;
    }

    .sidebar .nav-link.active {
        background: linear-gradient(90deg, #2c0a56, #6b2ba8);
        color: #fff;
        font-weight: 600;
    }

        /*
               Light bar pinned to the sidebar's left edge on the active item.
               The negative offset stays inside the sidebar's own 1rem padding,
               so it never pushes the scrollable area wider.
            */
        .sidebar .nav-link.active::before {
            content: "";
            position: absolute;
            left: -.85rem;
            top: 50%;
            transform: translateY(-50%);
            width: 4px;
            height: 22px;
            border-radius: 0 4px 4px 0;
            background: #e5d3fa;
        }

.sidebar .nav-section-label {
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255,255,255,.55);
    margin: 20px 14px 8px;
}

/*
   Brand lockup (logo badge + wordmark) at the top of the sidebar, matching
   the gradient icon tile and two-line "Pakonek Solutions / Performance
   Tracking" wordmark from Figma.
*/
.sidebar-logo-badge {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: linear-gradient(135deg, #31055d, #47076f);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: #fff;
    flex-shrink: 0;
}

.sidebar-brand {
    font-weight: 800;
    font-size: 1.12rem;
    line-height: 1.15;
    color: #fff;
}

.sidebar-logo-orb {
    width: 42px;
    height: 42px;
    object-fit: contain;
    flex-shrink: 0;
}

.sidebar-wordmark {
    height: 38px;
    width: 153px;
    display: block;
}

.sidebar-divider {
    border: none;
    height: 1.5px;
    background: linear-gradient(90deg, #9f4cd6, #47076f);
    margin: 12px 0;
}

/*
   The mockup groups the profile tile and the log out link inside one
   outlined panel at the bottom of the sidebar, rather than leaving them
   floating loose against the background.
*/
.sidebar-footer {
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px;
    padding: 10px;
}

.sidebar-profile-card {
    background: rgba(255,255,255,.05);
    border: 1.5px solid rgba(159,76,214,.55);
    border-radius: 11px;
    padding: 9px 11px;
}

/*
   The profile card doubles as the "My Account" entry point - the whole tile
   is a link, so it needs its own hover/active treatment on top of the base
   card look above.
*/
.sidebar-profile-link {
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

    .sidebar-profile-link:hover {
        background: rgba(255,255,255,.12);
        border-color: rgba(159,76,214,.7);
    }

    .sidebar-profile-link.active {
        background: rgba(159,76,214,.22);
        border-color: #9f4cd6;
    }

.sidebar-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .7rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.sidebar-profile-name {
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .02em;
    color: #fff;
}

.sidebar-profile-role {
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .05em;
    color: rgba(255,255,255,.5);
    text-transform: uppercase;
}

.sidebar-logout-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    color: #fff;
    font-weight: 800;
    font-size: .85rem;
    letter-spacing: .03em;
    text-decoration: none;
    padding: 9px;
    border-radius: 10px;
}

    /* The mockup sets the log out glyph in its own small tile. */
    .sidebar-logout-link i {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        border-radius: 6px;
        background: rgba(255,255,255,.12);
        font-size: .9rem;
    }

    .sidebar-logout-link:hover {
        background: rgba(255,255,255,.1);
        color: #fff;
    }

.card-stat {
    border: none;
    border-radius: 14px;
    box-shadow: 0 4px 12px rgba(0,0,0,.06);
}

    .card-stat .icon {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        background: linear-gradient(135deg, var(--primary), var(--primary-glow));
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.4rem;
    }

.table thead th {
    background: #f1f5f9;
    font-weight: 600;
}

.badge-soft-primary {
    background: #dbeafe;
    color: #1d4ed8;
}

.badge-soft-success {
    background: #dcfce7;
    color: #166534;
}

.badge-soft-warning {
    background: #fef3c7;
    color: #92400e;
}

/* ===================== Star rating (Performance Evaluation) ===================== */
/*
   Each star is an outlined star with a filled blue star layered on top, clipped
   to 0%, 50% or 100% width. That's what makes a true half star possible
   without a second icon set.
*/
.star-rating {
    display: inline-flex;
    align-items: center;
    gap: .15rem;
    font-size: 1.5rem;
    line-height: 1;
    user-select: none;
}

    .star-rating .star {
        position: relative;
        display: inline-block;
        width: 1em;
        height: 1em;
    }

    .star-rating .star-bg,
    .star-rating .star-fg {
        position: absolute;
        top: 0;
        left: 0;
        height: 1em;
        line-height: 1;
        white-space: nowrap;
        overflow: hidden;
    }

    .star-rating .star-bg {
        width: 1em;
        color: #cbd5e1;
    }

    /* Width is set inline to 0 / 50% / 100% - this is the fill color. */
    .star-rating .star-fg {
        width: 0;
        color: #47076f;
        transition: width .08s linear;
    }

        .star-rating .star-bg i,
        .star-rating .star-fg i {
            display: block;
            width: 1em;
            font-size: inherit;
        }

    /* Interactive variant */
    .star-rating[data-star-input] {
        cursor: pointer;
    }

        .star-rating[data-star-input]:hover .star-fg {
            color: #9f4cd6;
        }

    .star-rating.readonly {
        cursor: default;
    }

    .star-rating.sm {
        font-size: 1rem;
    }

    .star-rating.lg {
        font-size: 1.9rem;
    }

.star-value-label {
    font-size: .8rem;
    color: #64748b;
}

.star-clear-btn {
    border: 0;
    background: none;
    color: #94a3b8;
    font-size: .8rem;
    padding: 0 .25rem;
    line-height: 1;
}

    .star-clear-btn:hover {
        color: #dc3545;
    }

@media (max-width: 575.98px) {
    .star-rating {
        font-size: 1.3rem;
    }
}

/* ===================== Stat tiles ===================== */
.stat-tile {
    border: 1px solid #e2e8f0;
    border-radius: .75rem;
    background: #fff;
    padding: 1rem;
    height: 100%;
}

    .stat-tile .stat-label {
        font-size: .75rem;
        text-transform: uppercase;
        letter-spacing: .03em;
        color: #64748b;
        font-weight: 600;
    }

    .stat-tile .stat-value {
        font-size: 1.75rem;
        font-weight: 700;
        line-height: 1.2;
    }

    .stat-tile .stat-icon {
        width: 38px;
        height: 38px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.1rem;
    }

/* ===================== Manager index pages: status pill ===================== */
/*
   Dedicated pill for the Active/Inactive Status column on the
   Manager > Departments/Employees/Criteria index pages. Bootstrap's default
   .badge only rounds corners by --bs-border-radius (6px, and only for the
   badge as a whole) - border-radius: 50rem here rounds every corner into a
   full pill, and the larger padding/font-size reads clearly at a glance in
   a dense table. Inactive is intentionally neutral gray (not the amber
   .badge-soft-warning used elsewhere) so it doesn't compete for attention
   with Active green.
*/
.status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 5.25rem;
    padding: .3rem .75rem;
    border-radius: 50rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1;
}

.status-badge-active {
    background: #e4f4ec;
    color: #219750;
}

.status-badge-inactive {
    background: #e6e3e3;
    color: #403e3e;
}

/*
   Role pills (Office Staff / Field Technician) on the same three pages,
   matched to the Figma palette - deliberately a separate class from the
   shared .badge-soft-primary (used app-wide on Admin's equivalent pages),
   so this recolor stays scoped to Manager > Departments/Employees/Criteria
   instead of bleeding into pages nobody asked to change.
*/
.role-badge-office-staff {
    background: #cca8e3;
    color: #000331;
}

.role-badge-field-technician {
    background: #e3c5f6;
    color: #000331;
}

/*
   Manager and Admin extend the same purple family used above (rather than
   Bootstrap's unrelated blue .bg-primary-subtle) - each step up the role
   hierarchy gets a progressively darker shade of the same hue, same text
   color, so all four roles read as one consistent badge system.
*/
.role-badge-manager {
    background: #b891d3;
    color: #000331;
}

.role-badge-admin {
    background: #a378c4;
    color: #000331;
}

/* Solid navy highlight pill (e.g. "(You)" tags on assignee lists) instead of Bootstrap's default blue .bg-primary. */
.badge-navy {
    background: #020236;
    color: #fff;
}

/* Username cell (Admin > User Management) - navy instead of Bootstrap's default pink/red <code> color. */
.username-text {
    color: #020236;
    font-weight: 700;
}

/* Criteria weight (Manager/Admin > Criteria) - plain colored text, no pill/background. */
.weight-text {
    color: #47076f;
    font-weight: 700;
}

/* ===================== Department cards (Manager > Departments) ===================== */
.dept-card {
    border: 1px solid rgba(2,2,54,.15);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,.05);
    height: 100%;
}

    .dept-card .dept-icon {
        width: 52px;
        height: 52px;
        border-radius: 14px;
        background: linear-gradient(160deg, #020236, #47076f);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.4rem;
        flex-shrink: 0;
    }

.avatar-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #ded4f6;
    color: #020236;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .75rem;
    flex-shrink: 0;
}

.btn-outline-navy {
    color: #020236;
    border-color: rgba(2,2,54,.5);
    border-radius: 10px;
}

    .btn-outline-navy:hover {
        color: #fff;
        background: #020236;
        border-color: #020236;
    }

/*
   Solid action button - same navy-plum-purple gradient as .tf-btn-save (the
   Job Ticket/Task/Evaluation "Save" button), so a primary CTA like "Generate
   Report" or "Add Employee" reads as the same brand color everywhere instead
   of Bootstrap's default blue .btn-primary.
*/
.btn-navy {
    background: linear-gradient(90deg, #020236, #31055d, #47076f);
    border-color: transparent;
    color: #fff;
}

    .btn-navy:hover,
    .btn-navy:focus {
        filter: brightness(1.12);
        border-color: transparent;
        color: #fff;
    }

/* ===================== Workload Monitoring (Manager) ===================== */
/*
   Segmented pill tab bar (Active Tickets / Active Tasks / Employee Workload
   Summary), matching the bordered navy-pill switcher Figma uses in place of
   Bootstrap's default underlined nav-tabs. Bootstrap's Tab plugin only
   requires data-bs-toggle="tab" on the trigger - it toggles the "active"
   class on whatever element it's given, so these buttons need no extra JS.
*/
.wlm-tabs {
    display: flex;
    align-items: stretch;
    gap: .4rem;
    border: 1px solid rgba(2,2,54,.25);
    border-radius: 9px;
    box-shadow: 0 4px 5px rgba(0,0,0,.1);
    padding: .4rem;
    background: #fff;
}

.wlm-tab-btn {
    flex: 1;
    border: 0;
    background: transparent;
    color: #020236;
    font-weight: 600;
    font-size: .85rem;
    padding: .65rem 1rem;
    border-radius: 9px;
    text-align: center;
}

    .wlm-tab-btn.active {
        background: #020236;
        color: #fff;
        font-weight: 700;
        box-shadow: 0 4px 5px rgba(0,0,0,.1);
    }

.wlm-card {
    background: #fff;
    border: 1px solid rgba(169,165,165,.5);
    border-radius: 9px;
    box-shadow: 0 4px 5px rgba(0,0,0,.1);
}

.wlm-table thead th {
    color: #020236;
    font-weight: 800;
    text-transform: uppercase;
    font-size: .82rem;
    letter-spacing: .02em;
    border-bottom: 1px solid rgba(169,165,165,.5);
    background: transparent;
}

.wlm-table > tbody > tr > td {
    border-bottom: 1px solid rgba(169,165,165,.3);
    padding-top: .85rem;
    padding-bottom: .85rem;
}

.wlm-table > tbody > tr:last-child > td {
    border-bottom: 0;
}

/*
   Every data table in the system: fixed, evenly-proportioned column widths
   (set per <th> - see the pages that use this) instead of each column
   auto-sizing to its own content, which left some columns (Description,
   Name, Feedback...) far wider than others (Status, Weight...) and made
   the table look lopsided, with no consistent right edge either. A value
   that doesn't fit its column wraps onto a second line rather than
   forcing the column wider or getting cut off.
*/
.wlm-table-fixed {
    table-layout: fixed;
    width: 100%;
}

    .wlm-table-fixed th,
    .wlm-table-fixed td {
        overflow-wrap: break-word;
    }

/*
   Criteria's rows only ever hold a line of text/a badge, so they came out
   visibly shorter than Employees' (whose rows are held open by the 36px
   .wlm-avatar circle) even though both use .wlm-table's same base padding.
   Extra top/bottom padding here brings Criteria's row height up to match.
*/
.wlm-table-row-lg > tbody > tr > td {
    padding-top: 1.3rem;
    padding-bottom: 1.3rem;
}

.wlm-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f5ecfa;
    color: #020236;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .75rem;
    flex-shrink: 0;
}

/*
   One brand-purple alert instead of Bootstrap's default blue/yellow -
   used where a page shows more than one alert variant for what's really
   the same kind of notice (e.g. Manager > Tasks's "arrived here from a
   Dashboard tile" banners), so they read as one consistent style instead
   of looking like different severities.
*/
.alert-purple {
    background: #f5ecfa;
    color: #47076f;
    border: 1px solid #e3c5f6;
}

    .alert-purple a {
        color: #47076f;
        font-weight: 700;
    }

.count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.6rem;
    padding: .25rem .5rem;
    border-radius: 10px;
    border: 1px solid rgba(169,165,165,.5);
    box-shadow: 0 4px 5px rgba(0,0,0,.1);
    font-weight: 800;
    font-size: .85rem;
}

.count-badge-active {
    background: #e5f5ec;
    color: #219750;
}

.count-badge-warning {
    background: #fdf1e3;
    color: #b3620d;
}

.count-badge-danger {
    background: #fbe8e8;
    color: #a21919;
}

/*
   Stat-tile icon badges (Dashboard, New/Edit Evaluation, Workload Monitoring)
   all share the same purple gradient now - the same navy-to-plum-to-purple
   gradient as .tf-btn-save (Task/Job Ticket/Evaluation "Save" buttons) -
   instead of each variant tinting a different color (blue/green/red/orange),
   so every icon reads as one consistent brand instead of Bootstrap's stock
   severity colors.
*/
.icon-palette-primary,
.icon-palette-success,
.icon-palette-danger,
.icon-palette-warning {
    background: linear-gradient(90deg, #020236, #31055d, #47076f);
    color: #fff;
}

/* Progress bar fill matched to the brand purple instead of Bootstrap's default blue. */
.progress-bar-brand {
    background-color: #47076f;
}

/*
   Divider under the page title/subtitle on Manager > Departments/Employees/
   Criteria, matching the solid navy rule Figma places under the header on
   each of those three screens.
*/
.page-divider {
    border: none;
    border-top: 1px solid #020236;
    margin: 0 0 1.25rem;
}

/*
   Adds breathing room between data rows on the Manager > Departments/
   Employees/Criteria tables. Scoped to its own class (rather than the
   shared .table used app-wide) so denser tables elsewhere are unaffected.
*/
.table-spaced > tbody > tr > td,
.table-spaced > tbody > tr > th {
    padding-top: .9rem;
    padding-bottom: .9rem;
}

/*
   Role filter segmented control (All Roles / Office Staff / Field
   Technician) on Manager > Employees/Criteria, replacing a native <select>
   to match the pill-tab control Figma shows next to the search bar.
*/
.role-filter {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    border: 1px solid rgba(2,2,54,.25);
    border-radius: 9px;
    padding: .25rem;
    background: #fff;
}

.role-filter-btn {
    border: 0;
    background: transparent;
    color: #020236;
    font-weight: 700;
    font-size: .78rem;
    padding: .45rem .85rem;
    border-radius: 7px;
    white-space: nowrap;
    text-decoration: none;
    text-align: center;
}

    .role-filter-btn:hover {
        color: #020236;
        text-decoration: none;
    }

    .role-filter-btn.active {
        background: #020236;
        color: #fff;
    }

        .role-filter-btn.active:hover {
            color: #fff;
        }

/*
   Period-selector dropdowns (Month/Quarter/Year on the Dashboard, Department
   on Manager > Performance Report) - a Bootstrap .dropdown with no color
   variant, so previously unstyled. Bordered to read as a real control, with
   the open menu's hover/selected state recolored to the brand's dark purple
   (matches .progress-bar-brand) instead of Bootstrap's default blue.
*/
.status-dropdown-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    border: 1.5px solid rgba(2,2,54,.25);
    border-radius: 9px;
    background: #fff;
    color: #020236;
    font-weight: 600;
    font-size: .85rem;
    padding: .5rem .9rem;
}

    .status-dropdown-btn:hover,
    .status-dropdown-btn:focus,
    .status-dropdown-btn:active,
    .status-dropdown-btn.show {
        border-color: #47076f;
        color: #020236;
        background: #fff;
    }

.status-dropdown-menu {
    border: 1.5px solid rgba(2,2,54,.15);
    border-radius: 9px;
    box-shadow: 0 8px 20px rgba(0,0,0,.1);
    padding: .35rem;
}

    .status-dropdown-menu .dropdown-item {
        border-radius: 7px;
        padding: .5rem .75rem;
        font-size: .85rem;
        color: #020236;
    }

    .status-dropdown-menu .dropdown-item:hover,
    .status-dropdown-menu .dropdown-item:focus,
    .status-dropdown-menu .dropdown-item.active {
        background: #47076f;
        color: #fff;
    }

/* ===================== Report charts ===================== */
/* Chart.js needs a sized, positioned parent to render into. */
.chart-box {
    position: relative;
    height: 340px;
}

.chart-message {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1rem;
    color: #64748b;
    font-size: .9rem;
}

/* ===================== My Account (/Account) ===================== */
/*
   Self-service account screen, matched to the Figma mockup: a wide left
   column holding "Account Overview" + "Employee's Information", and a
   narrower right column holding "Change Password". Everything here is
   scoped to .account-* so it can't leak into the Bootstrap .card usage on
   every other page.
*/
.account-card {
    background: #fff;
    border: 1px solid rgba(2,2,54,.12);
    border-radius: 14px;
    box-shadow: 0 4px 10px rgba(0,0,0,.05);
    padding: 1.5rem;
}

/*
   Card heading with the navy rule underneath it. Same #020236 and same
   1px weight as .page-divider, so the rule inside a card reads as the same
   system as the one under the page title.
*/
.account-card-title {
    font-size: 1.2rem;
    font-weight: 800;
    color: #020236;
    padding-bottom: .6rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid #020236;
}

/* --- Account Overview: icon tile + label/value pairs --- */
/* Matches the Dashboard's .stat-icon/.icon-palette-* tiles exactly (same
   gradient, size, radius, glyph size) so an account page's icons read as
   the same component instead of a similar-but-not-quite one. */
.account-info-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(90deg, #020236, #31055d, #47076f);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

/*
   Shared by the Account Overview tiles and the fields inside the employee
   box - one label style, one value style, so the two blocks line up
   visually even though their surrounding markup differs.
*/
.account-label {
    font-size: .72rem;
    font-weight: 700;
    color: #8b8ba7;
    line-height: 1.2;
    margin-bottom: .15rem;
}

.account-value {
    font-size: .95rem;
    font-weight: 800;
    color: #020236;
    line-height: 1.25;
    word-break: break-word;
}

/* Names/roles/departments render uppercase in the mockup; the email doesn't. */
.account-value-caps {
    text-transform: uppercase;
}

/*
   Inset panel inside "Employee's Information" - the mockup draws the
   employee fields in their own bordered box rather than flat on the card.
*/
.account-employee-box {
    border: 1.5px solid rgba(2,2,54,.35);
    border-radius: 12px;
    padding: 1.25rem;
}

/* --- Change Password form --- */
/*
   Same bordered input shell as the login screen (.login-input-group), with
   the eye toggle sitting inside the border instead of Bootstrap's separate
   .input-group-text button.
*/
.account-input-group {
    display: flex;
    align-items: center;
    gap: .6rem;
    border: 1.5px solid rgba(2,2,54,.14);
    border-radius: 9px;
    box-shadow: 0 4px 5px rgba(0,0,0,.08);
    padding: .6rem .9rem;
    background: #fff;
}

    .account-input-group:focus-within {
        border-color: #9f4cd6;
    }

    .account-input-group input {
        border: 0;
        outline: 0;
        flex: 1;
        min-width: 0;
        font-size: .95rem;
        background: transparent;
    }

    .account-input-group button {
        border: 0;
        background: none;
        color: #020236;
        padding: 0;
        line-height: 1;
        font-size: 1.05rem;
    }

/*
   Search boxes on every Index/list page - the same bordered input shell as
   every other input in the app (Create/Edit forms' .form-control, the
   account/login inputs above): 1.5px navy-tinted border, 9px radius, and a
   purple focus glow - in place of Bootstrap's plainer, thinner
   .input-group/.input-group-text look. Purely a restyle: the input's own
   name/id/placeholder (and so the search behavior wired to it) don't change.
*/
.search-input-group {
    display: flex;
    align-items: center;
    gap: .5rem;
    border: 1.5px solid rgba(2,2,54,.18);
    border-radius: 9px;
    box-shadow: 0 2px 4px rgba(0,0,0,.04);
    padding: .55rem .9rem;
    background: #fff;
}

    .search-input-group:focus-within {
        border-color: #9f4cd6;
        box-shadow: 0 0 0 .18rem rgba(159,76,214,.15);
    }

    .search-input-group i {
        color: #a9a9bd;
    }

    .search-input-group input {
        border: 0;
        outline: 0;
        flex: 1;
        min-width: 0;
        font-size: .9rem;
        background: transparent;
    }

        .search-input-group input::placeholder {
            color: #a9a9bd;
        }

.account-form-label {
    font-size: .82rem;
    font-weight: 600;
    color: #020236;
    margin-bottom: .35rem;
}

.account-form-hint {
    font-size: .72rem;
    color: #8b8ba7;
    margin-top: .3rem;
}

/*
   Primary CTA, same gradient as the login button so the only two
   password-entry surfaces in the app share one button treatment.
*/
.account-btn-submit {
    background: linear-gradient(90deg, #020236, #31055d, #47076f);
    color: #fff;
    border: 0;
    border-radius: 9px;
    font-weight: 700;
    padding: .65rem 1.5rem;
    box-shadow: 0 4px 5px rgba(0,0,0,.1);
}

    .account-btn-submit:hover,
    .account-btn-submit:focus {
        filter: brightness(1.12);
        color: #fff;
    }

/* ===================== Task / ticket form pages (.tf-*) ===================== */
/*
   Stepped form shell used by Manager > Task Assignments > Create: a
   read-only meta strip across the top, then numbered white section cards.
   Scoped to .tf-* rather than overriding Bootstrap's .card / .form-control
   globally, so the denser forms on other pages are untouched.
*/
.tf-page-title {
    font-size: 1.9rem;
    font-weight: 800;
    color: #020236;
    line-height: 1.1;
}

.tf-page-sub {
    font-size: .85rem;
    color: #6b7280;
}

/* --- Read-only meta strip (task number / date created / assigned by) --- */
.tf-meta-card {
    background: #fff;
    border: 1px solid rgba(2,2,54,.12);
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,.05);
    padding: .9rem 1.25rem;
}

.tf-meta-item {
    flex: 1;
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
    padding: .35rem 0;
}

/*
   The hairline separators only make sense once the three items sit side by
   side; below md they stack, so the rule would cut across them vertically.
*/
@media (min-width: 768px) {
    .tf-meta-item + .tf-meta-item {
        border-left: 1px solid rgba(2,2,54,.12);
        padding-left: 1.5rem;
    }
}

.tf-meta-icon {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: linear-gradient(135deg, #31055d, #47076f);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.tf-meta-label {
    font-size: .7rem;
    font-weight: 600;
    color: #8b8ba7;
    line-height: 1.2;
}

.tf-meta-value {
    font-size: 1rem;
    font-weight: 800;
    color: #020236;
    line-height: 1.25;
}

/* --- Numbered section cards --- */
.tf-section {
    background: #fff;
    border: 1px solid rgba(2,2,54,.12);
    border-radius: 14px;
    box-shadow: 0 4px 10px rgba(0,0,0,.05);
    padding: 1.5rem;
}

.tf-step-badge {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #020236;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    font-weight: 800;
    flex-shrink: 0;
}

.tf-section-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: #020236;
}

.tf-section-sub {
    font-size: .82rem;
    color: #6b7280;
}

/* --- Fields --- */
.tf-label {
    font-size: .9rem;
    font-weight: 700;
    color: #020236;
    margin-bottom: .4rem;
}

.tf-required {
    color: #dc3545;
}

/*
   Applied to Bootstrap's own .form-control / .form-select rather than
   replacing them, so asp-validation's is-invalid styling and the jQuery
   validation hooks keep working exactly as before.
*/
.tf-section .form-control,
.tf-section .form-select,
.vm-card .form-control,
.vm-card .form-select,
.tf-form-card .form-control,
.tf-form-card .form-select {
    border: 1.5px solid rgba(2,2,54,.18);
    border-radius: 9px;
    padding: .65rem .9rem;
    font-size: .9rem;
    box-shadow: 0 2px 4px rgba(0,0,0,.04);
}

    .tf-section .form-control:focus,
    .vm-card .form-control:focus,
    .tf-form-card .form-control:focus {
        border-color: #9f4cd6;
        box-shadow: 0 0 0 .18rem rgba(159,76,214,.15);
    }

    /* Dropdowns get the same dark-purple hover/highlight as every other
       <select> in the system (see the global select/.form-select rule
       above) - kept separate from .form-control above so text inputs keep
       their own lighter accent. */
    .tf-section .form-select:hover,
    .vm-card .form-select:hover,
    .tf-form-card .form-select:hover,
    .tf-section .form-select:focus,
    .vm-card .form-select:focus,
    .tf-form-card .form-select:focus {
        border-color: #47076f;
        box-shadow: 0 0 0 .18rem rgba(71,7,111,.18);
    }

    .tf-section .form-control::placeholder,
    .vm-card .form-control::placeholder,
    .tf-form-card .form-control::placeholder {
        color: #a9a9bd;
    }

/*
   Every native <input type="date"> in the system (Job Ticket, Office Task,
   and Performance Evaluation Create/Edit) - the field itself already picks
   up the bordered/purple-focus look above via .form-control, but the
   calendar icon browsers paint inside it defaults to plain black/gray.
   Recolors that icon into the same brand purple - Chromium/WebKit browsers
   only (::-webkit-calendar-picker-indicator has no Firefox equivalent), so
   Firefox keeps its own native icon rather than being left broken.
*/
input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(21%) sepia(38%) saturate(3207%) hue-rotate(258deg) brightness(80%) contrast(96%);
    cursor: pointer;
}

/* Plain caption under a field (no icon) - Bootstrap's .form-text, restyled. */
.tf-form-hint {
    font-size: .75rem;
    color: #8b8ba7;
    margin-top: .3rem;
}

.tf-hint {
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    font-size: .78rem;
    color: #6b7280;
}

    .tf-hint i {
        flex-shrink: 0;
        line-height: 1.45;
    }

/* --- Added employee / activity rows --- */
/*
   The mockup lists each added employee and activity as its own full-width
   lavender row rather than an inline pill, so long names stay readable and
   the remove control always sits in the same place.
*/
.tf-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    background: #f4ecfb;
    border: 1px solid #d9c2ef;
    border-radius: 8px;
    padding: .6rem .9rem;
    margin-bottom: .5rem;
    font-size: .88rem;
    font-weight: 700;
    color: #020236;
}

    /* Lets a long name actually truncate instead of stretching the row. */
    .tf-chip .text-truncate {
        min-width: 0;
    }

.tf-chip-remove {
    border: 0;
    background: none;
    color: #c0392b;
    font-size: 1rem;
    line-height: 1;
    padding: 0 .15rem;
    flex-shrink: 0;
}

    .tf-chip-remove:hover {
        color: #8e2a1e;
    }

.tf-empty-msg {
    font-size: .8rem;
    color: #8b8ba7;
}

/* --- Buttons --- */
.tf-btn-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    background: linear-gradient(90deg, #020236, #31055d, #47076f);
    border: 0;
    border-radius: 9px;
    color: #fff;
    font-weight: 700;
    font-size: .88rem;
    padding: .65rem 1.15rem;
    white-space: nowrap;
}

    .tf-btn-add:hover,
    .tf-btn-add:focus {
        filter: brightness(1.12);
        color: #fff;
    }

/* Rendered as an <a> back to the index, so it needs the link decoration cleared. */
.tf-btn-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    background: #fff;
    border: 1.5px solid rgba(2,2,54,.25);
    border-radius: 9px;
    color: #020236;
    font-weight: 700;
    font-size: .88rem;
    padding: .6rem 2.25rem;
}

    .tf-btn-cancel:hover,
    .tf-btn-cancel:focus {
        background: #f4f4f8;
        color: #020236;
        text-decoration: none;
    }

/* Also rendered as an <a> (Field Technician details "Go back"), so link
   decoration has to be cleared here too. */
.tf-btn-save {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    background: linear-gradient(90deg, #020236, #31055d, #47076f);
    border: 0;
    border-radius: 9px;
    color: #fff;
    font-weight: 700;
    font-size: .88rem;
    padding: .6rem 2.25rem;
    box-shadow: 0 4px 5px rgba(0,0,0,.1);
}

    .tf-btn-save:hover,
    .tf-btn-save:focus {
        filter: brightness(1.12);
        color: #fff;
        text-decoration: none;
    }

/*
   Outlined variant of .tf-btn-add - the Job Ticket mockup draws "Add Fiber
   Plan" and "Add Technician" as white buttons with a solid navy plus glyph,
   rather than the solid navy button the Task form uses.
*/
.tf-btn-add-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    background: #fff;
    border: 1.5px solid rgba(2,2,54,.25);
    border-radius: 9px;
    color: #020236;
    font-weight: 700;
    font-size: .88rem;
    padding: .65rem 1.15rem;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(0,0,0,.04);
}

    .tf-btn-add-outline:hover,
    .tf-btn-add-outline:focus {
        background: #f4f4f8;
        color: #020236;
        border-color: rgba(2,2,54,.4);
    }

    .tf-btn-add-outline i {
        font-size: 1rem;
    }

/*
   Leader tag on the assignee rows. Deliberately not Bootstrap's
   .badge bg-primary (stock blue) - this picks up the same lavender/navy
   pair as the .tf-chip row it sits inside.
*/
.tf-leader-badge {
    display: inline-flex;
    align-items: center;
    background: #e6d5f7;
    border: 1px solid #c9a9e8;
    border-radius: 50rem;
    color: #020236;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .02em;
    padding: .2rem .7rem;
}

/* Leader radio inside an assignee row - navy instead of Bootstrap's blue. */
.tf-chip .form-check-input {
    border-color: rgba(2,2,54,.45);
    margin-top: 0;
}

    .tf-chip .form-check-input:checked {
        background-color: #020236;
        border-color: #020236;
    }

    .tf-chip .form-check-input:focus {
        border-color: #9f4cd6;
        box-shadow: 0 0 0 .18rem rgba(159,76,214,.2);
    }

/*
   Neutral status pill on a read-only .tf-chip row (Edit pages list activities
   with their current status and no remove control). Same pill geometry as
   .tf-leader-badge, deliberately grey so it reads as information rather than
   as the highlighted Leader tag.
*/
.tf-chip-status {
    display: inline-flex;
    align-items: center;
    background: #fff;
    border: 1px solid rgba(2,2,54,.2);
    border-radius: 50rem;
    color: #4b4b63;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .02em;
    padding: .2rem .7rem;
    flex-shrink: 0;
}

/* Read-only textarea inside a section card (e.g. Leader Remarks). */
.tf-section .form-control[readonly] {
    background: #f6f6fa;
    color: #4b4b63;
}

/* ===================== Index view modals (.vm-*) ===================== */
/*
   Shared look for the "quick view" modals on Manager > Job Tickets and
   Manager > Task Assignments: a gradient icon tile + title header, then
   bordered info cards instead of Bootstrap's flat label/value rows.
   Scoped to .vm-* so the other modals in the app (fiber plans, workload
   monitoring, evaluation) keep Bootstrap's default modal styling.
*/
.vm-content {
    border: 1px solid rgba(2,2,54,.15);
    border-radius: 18px;
}

.vm-header {
    align-items: flex-start;
    gap: .9rem;
    padding: 1.25rem 1.5rem 1rem;
    border-bottom: 0;
}

.vm-header-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: linear-gradient(135deg, #31055d, #47076f);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.vm-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #020236;
    line-height: 1.15;
}

.vm-subtitle {
    font-size: .85rem;
    color: #6b7280;
}

/* Navy rule under the header, matching .page-divider on the index pages. */
.vm-header-rule {
    border: none;
    border-top: 1px solid #020236;
    margin: 0 1.5rem 1rem;
}

.vm-body {
    padding: 0 1.5rem 1rem;
}

.vm-footer {
    border-top: 0;
    padding: .5rem 1.5rem 1.5rem;
    gap: .5rem;
}

/* --- Bordered info cards inside the body --- */
.vm-card {
    border: 1px solid rgba(2,2,54,.15);
    border-radius: 12px;
    background: #fff;
    padding: 1.1rem 1.25rem;
}

.vm-card-label {
    font-size: .8rem;
    font-weight: 700;
    color: #020236;
}

/* Heading with its own rule, used by the Client Information / Location / Description cards. */
.vm-card-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: #020236;
    padding-bottom: .5rem;
    margin-bottom: .9rem;
    border-bottom: 1px solid rgba(2,2,54,.2);
}

.vm-label {
    font-size: .72rem;
    font-weight: 600;
    color: #8b8ba7;
    line-height: 1.2;
    margin-bottom: .2rem;
}

.vm-value {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .95rem;
    font-weight: 800;
    color: #020236;
    line-height: 1.3;
    word-break: break-word;
}

    .vm-value i {
        color: #020236;
        font-size: 1rem;
        flex-shrink: 0;
    }

.vm-text {
    font-size: .82rem;
    font-weight: 600;
    color: #3a3a52;
    line-height: 1.5;
}

/* One entry in a plain list of dated events inside a .vm-card - reschedule
   history, audit-style logs - a lighter-weight alternative to a full nested
   .vm-card for content that's just a few lines per entry. */
.vm-history-item {
    border: 1px solid rgba(2,2,54,.12);
    border-radius: 10px;
    padding: .75rem 1rem;
}

/*
   Hairline between the columns of a stat grid. Only applied from md up -
   below that the columns stack and a left rule would sit across them.
*/
@media (min-width: 768px) {
    .vm-col-divider {
        border-left: 1px solid rgba(2,2,54,.12);
    }
}

/* Solid tile for the Client / Address / Phone icons. */
.vm-icon-tile {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: linear-gradient(135deg, #020236, #31055d);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
    flex-shrink: 0;
}

/* --- Pills --- */
.vm-pill {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: #f4ecfb;
    border: 1px solid #d9c2ef;
    border-radius: 8px;
    color: #020236;
    font-size: .8rem;
    font-weight: 700;
    padding: .45rem .8rem;
}

.vm-count-badge {
    display: inline-flex;
    align-items: center;
    background: #f4ecfb;
    border: 1px solid #d9c2ef;
    border-radius: 50rem;
    color: #020236;
    font-size: .72rem;
    font-weight: 800;
    padding: .15rem .6rem;
}

/*
   Status pill. The colour variants are deliberately separate from the
   app-wide .badge-soft-* set: Pending here is the lavender the mockup uses,
   not Bootstrap's grey secondary.
*/
.vm-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50rem;
    font-size: .78rem;
    font-weight: 800;
    padding: .35rem .95rem;
    line-height: 1;
    white-space: nowrap;
}

.vm-status-pending {
    background: #f0e6fa;
    border: 1px solid #c9a9e8;
    color: #47076f;
}

.vm-status-success {
    background: #e4f4ec;
    border: 1px solid #a9dcc0;
    color: #219750;
}

.vm-status-info {
    background: #e4eefa;
    border: 1px solid #a8c6ea;
    color: #1b5fa8;
}

.vm-status-warning {
    background: #fdf1e3;
    border: 1px solid #efc999;
    color: #b3620d;
}

.vm-status-danger {
    background: #fbe8e8;
    border: 1px solid #edb0b0;
    color: #a21919;
}

/* --- Activities table --- */
.vm-table {
    margin-bottom: 0;
}

    .vm-table > thead > tr > th {
        background: #f4ecfb;
        color: #020236;
        font-size: .82rem;
        font-weight: 800;
        border-bottom: 0;
        padding: .7rem .9rem;
        white-space: nowrap;
    }

        .vm-table > thead > tr > th:first-child {
            border-top-left-radius: 9px;
            border-bottom-left-radius: 9px;
        }

        .vm-table > thead > tr > th:last-child {
            border-top-right-radius: 9px;
            border-bottom-right-radius: 9px;
        }

    .vm-table > tbody > tr > td {
        border-bottom: 1px solid rgba(2,2,54,.08);
        padding: .7rem .9rem;
        font-size: .82rem;
        vertical-align: middle;
    }

    .vm-table > tbody > tr:last-child > td {
        border-bottom: 0;
    }

/* Row hidden because it's off the current page (see wwwroot/js/table-pagination.js).
   Kept as its own !important class, separate from a page's own filter which
   hides rows via plain style.display or Bootstrap's .d-none, so pagination
   never has to guess whether a row's display:none came from itself or from
   the filter when it rebuilds. */
.tf-page-hidden {
    display: none !important;
}

/* Prev/Next control appended below any table (see wwwroot/js/table-pagination.js)
   once its tbody has more rows than fit on one page - keeps a long table from
   just expanding the page instead of scrolling internally. */
.tf-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .9rem;
    padding: .75rem 0 .25rem;
}

.tf-pagination-info {
    font-size: .78rem;
    font-weight: 700;
    color: #020236;
    min-width: 6.5rem;
    text-align: center;
}

.tf-pagination-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: #fff;
    border: 1.5px solid rgba(2,2,54,.25);
    border-radius: 8px;
    color: #020236;
    font-size: .85rem;
}

    .tf-pagination-btn:hover:not(:disabled),
    .tf-pagination-btn:focus:not(:disabled) {
        background: #f4f4f8;
    }

    .tf-pagination-btn:disabled {
        opacity: .4;
    }

/* Row number chip in front of each activity name. */
.vm-num-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: #e6d5f7;
    color: #020236;
    font-size: .72rem;
    font-weight: 800;
    flex-shrink: 0;
}

/* --- Footer buttons (same pair as the form pages) --- */
.vm-btn-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    background: #fff;
    border: 1.5px solid rgba(2,2,54,.25);
    border-radius: 9px;
    color: #020236;
    font-weight: 700;
    font-size: .88rem;
    padding: .6rem 2.25rem;
}

    .vm-btn-close:hover,
    .vm-btn-close:focus {
        background: #f4f4f8;
        color: #020236;
    }

.vm-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    background: linear-gradient(90deg, #020236, #31055d, #47076f);
    border: 0;
    border-radius: 9px;
    color: #fff;
    font-weight: 700;
    font-size: .88rem;
    padding: .6rem 1.75rem;
    box-shadow: 0 4px 5px rgba(0,0,0,.1);
}

    .vm-btn-primary:hover,
    .vm-btn-primary:focus {
        filter: brightness(1.12);
        color: #fff;
    }

/* ===================== Performance Evaluation form (.eval-*) ===================== */
/*
   Manager > Evaluations > New. Reuses the .tf-* stepped-card shell from the
   Job Ticket / Task forms; everything below is what that shell doesn't
   already cover - the two role option cards, the tinted stat tiles in the
   right rail, the score preview, and the criteria table.
*/

/* --- Step 1: role option cards --- */
/*
   These keep .role-filter-btn (the JS toggles .active on that selector to
   drive the employee dropdown filter), so this is a visual override of the
   small segmented pill into a full-width option card.
*/
.eval-role-card {
    display: flex;
    align-items: center;
    gap: .8rem;
    width: 100%;
    text-align: left;
    padding: .9rem 1rem;
    border: 1.5px solid rgba(2,2,54,.15);
    border-radius: 11px;
    background: #f4f4f8;
    color: #020236;
}

    .eval-role-card:hover {
        border-color: rgba(2,2,54,.35);
    }

    .eval-role-card.active {
        background: linear-gradient(120deg, #1c0637, #47076f);
        border-color: transparent;
        color: #fff;
    }

.eval-role-icon {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    background: linear-gradient(135deg, #31055d, #47076f);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
}

.eval-role-card.active .eval-role-icon {
    background: rgba(255,255,255,.16);
}

.eval-role-text {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-width: 0;
}

.eval-role-title {
    font-size: .95rem;
    font-weight: 800;
    line-height: 1.2;
}

.eval-role-sub {
    font-size: .7rem;
    font-weight: 500;
    opacity: .7;
    line-height: 1.3;
}

.eval-role-check {
    font-size: 1.1rem;
    flex-shrink: 0;
    opacity: .55;
}

.eval-role-card.active .eval-role-check {
    opacity: 1;
}

/*
   Both check glyphs ship in the markup and CSS picks one - swapping a
   Bootstrap Icons glyph by class alone isn't possible without hardcoding
   its codepoint.
*/
.eval-role-check-on {
    display: none;
}

.eval-role-card.active .eval-role-check-on {
    display: inline;
}

.eval-role-card.active .eval-role-check-off {
    display: none;
}

/* --- Right rail: stat tiles --- */
.eval-stat {
    border-radius: 12px;
    border: 1px solid transparent;
    padding: .85rem;
    height: 100%;
    cursor: pointer;
    transition: box-shadow .15s ease, transform .15s ease;
}

    .eval-stat:hover {
        box-shadow: 0 4px 12px rgba(0,0,0,.08);
        transform: translateY(-1px);
    }

/*
   Tone classes. Tiles 3 and 4 change meaning with the selected role
   (Rescheduled/Cancelled vs Rejected Activities/Overdue), so applyStats()
   swaps these at runtime alongside the icon's palette class.
*/
.eval-stat-primary {
    background: #eef0fb;
    border-color: #cfd5f2;
}

.eval-stat-success {
    background: #e6f5ec;
    border-color: #b6ddc6;
}

.eval-stat-warning {
    background: #fdf3e4;
    border-color: #efd6ad;
}

.eval-stat-danger {
    background: #fceaea;
    border-color: #eebcbc;
}

/*
   Overrides the flat tint (and, now, the white glyph colour) that
   .icon-palette-* would otherwise paint, so the glyph sits in a light disc
   on the already-tinted tile - .icon-palette-*'s own white would disappear
   against that same light disc, so this sets its own dark purple instead.
*/
.eval-stat .stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,.8);
    color: #47076f;
    width: 32px;
    height: 32px;
    font-size: 1rem;
    flex-shrink: 0;
}

.eval-stat .stat-label {
    font-size: .68rem;
    text-transform: none;
    letter-spacing: 0;
    color: #5b5b72;
    font-weight: 700;
    line-height: 1.2;
}

.eval-stat .stat-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: #020236;
    line-height: 1.15;
}

/* --- Right rail: score preview --- */
/*
   New/Edit Evaluation's stat-tile sidebar. Reordered ahead of the form on
   mobile (see Create/Edit.cshtml's order-1/order-lg-2) so the manager can
   see it without scrolling past the whole rating form first, and kept
   sticky there too - but on mobile the fixed navy .mobile-topbar (see
   above, ~64px incl. padding) already occupies the very top of the
   viewport, so this needs a larger top offset there or it would stick
   partway underneath that bar instead of below it.

   Bootstrap's .sticky-top utility carries its own z-index: 1020 - higher
   than a Bootstrap .dropdown-menu's default 1000, which put this sidebar
   in front of the notification bell's dropdown instead of behind it.
   Nothing on this page needs to out-rank global chrome like that, so this
   brings it back down below dropdowns/modals.
*/
.eval-sidebar-sticky {
    top: 1rem;
    z-index: 1;
}

@media (max-width: 991.98px) {
    .eval-sidebar-sticky {
        top: calc(64px + .75rem);
    }
}

.eval-score-card {
    background: #f6f6fa;
    border: 1px solid rgba(2,2,54,.12);
    border-radius: 14px;
    padding: 1.25rem;
    text-align: center;
}

.eval-score-label {
    font-size: .82rem;
    font-weight: 600;
    color: #6b7280;
}

.eval-score-value {
    font-size: 3.2rem;
    font-weight: 800;
    color: #020236;
    line-height: 1.05;
}

.eval-score-out-of {
    font-size: .82rem;
    color: #8b8ba7;
}

/* --- Step 3: criteria table --- */
/*
   Scoped to this wrapper rather than the _CriteriaStarRows partial itself,
   so the same partial keeps its current look on the Edit page.
*/
.eval-criteria-table table > thead > tr > th {
    background: #f4ecfb;
    color: #020236;
    font-size: .82rem;
    font-weight: 800;
    border-bottom: 0;
    padding: .7rem .9rem;
    white-space: nowrap;
}

    .eval-criteria-table table > thead > tr > th:first-child {
        border-top-left-radius: 9px;
        border-bottom-left-radius: 9px;
    }

    .eval-criteria-table table > thead > tr > th:last-child {
        border-top-right-radius: 9px;
        border-bottom-right-radius: 9px;
    }

.eval-criteria-table table > tbody > tr > td {
    border-bottom: 1px solid rgba(2,2,54,.08);
    padding: .8rem .9rem;
    vertical-align: middle;
}

.eval-criteria-table table > tbody > tr:last-child > td {
    border-bottom: 0;
}

.eval-criteria-table .form-control {
    background: #faf7fd;
    border: 1.5px solid rgba(2,2,54,.15);
    border-radius: 8px;
}

/* Evaluator is filled in from the session and shown read-only. */
.eval-evaluator:disabled {
    background: #f4ecfb;
    color: #020236;
    font-weight: 700;
    opacity: 1;
}

/* Overall feedback box, tinted to match the mockup. */
.eval-feedback {
    background: #faf7fd;
}

/*
   Page-level header for a details screen (Field Technician > job order):
   the same gradient tile + title + reference-number pairing the .vm-* view
   modals use, at page scale rather than inside a dialog.
*/
.vm-page-header {
    display: flex;
    align-items: center;
    gap: .9rem;
}

/* Thumbnail card for an uploaded photo / file. */
.vm-file-card {
    border: 1px solid rgba(2,2,54,.15);
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
    height: 100%;
    position: relative;
}

.vm-file-thumb {
    width: 100%;
    height: 140px;
    object-fit: cover;
    display: block;
}

.vm-file-thumb-placeholder {
    height: 140px;
    background: #f4ecfb;
    color: #47076f;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
}

.vm-file-name {
    font-size: .78rem;
    font-weight: 700;
    color: #020236;
}

.vm-file-meta {
    font-size: .7rem;
    color: #8b8ba7;
}

/* Small outlined download button inside a file card. */
.vm-btn-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    width: 100%;
    text-decoration: none;
    background: #fff;
    border: 1.5px solid rgba(2,2,54,.25);
    border-radius: 7px;
    color: #020236;
    font-weight: 700;
    font-size: .75rem;
    padding: .35rem .5rem;
}

    .vm-btn-sm:hover,
    .vm-btn-sm:focus {
        background: #f4f4f8;
        color: #020236;
    }

/* Approve/Reject color variants of .vm-btn-sm, tinted with the same
   green/red tokens as .vm-status-success / .vm-status-danger. */
.vm-btn-sm-success {
    border-color: #a9dcc0;
    color: #219750;
}

    .vm-btn-sm-success:hover,
    .vm-btn-sm-success:focus {
        background: #e4f4ec;
        color: #219750;
    }

.vm-btn-sm-danger {
    border-color: #edb0b0;
    color: #a21919;
}

    .vm-btn-sm-danger:hover,
    .vm-btn-sm-danger:focus {
        background: #fbe8e8;
        color: #a21919;
    }

/* Remove-file control, pinned to the corner of a file card. */
.vm-file-remove {
    position: absolute;
    top: .35rem;
    right: .35rem;
    z-index: 2;
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 50%;
    background: #a21919;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0;
}

/*
   Fifth status tone, so the five evaluation ratings (Excellent / Very Good /
   Good / Needs Improvement / Poor) each get their own pill instead of two of
   them sharing the blue .vm-status-info.
*/
.vm-status-primary {
    background: #eae6fa;
    border: 1px solid #bfb4ea;
    color: #2f1b8f;
}

/*
   Plain-header variant of .vm-table for the Performance Records screens,
   where the mockup shows column labels as bare text rather than the lavender
   band the index/view-modal tables use.
*/
.vm-table-plain > thead > tr > th {
    background: transparent;
    color: #8b8ba7;
    font-size: .75rem;
    font-weight: 700;
    border-bottom: 1px solid rgba(2,2,54,.12);
    padding: .6rem .9rem;
    white-space: nowrap;
}

.vm-table-plain > tbody > tr > td {
    border-bottom: 1px solid rgba(2,2,54,.08);
    padding: .8rem .9rem;
    vertical-align: middle;
}

.vm-table-plain > tbody > tr:last-child > td {
    border-bottom: 0;
}

/* One entry in the Appraisal Feedback trail. */
.vm-feedback-item {
    border: 1px solid rgba(2,2,54,.12);
    border-radius: 10px;
    background: #faf7fd;
    padding: .85rem 1rem;
}

/* ===================== Centred single-form pages (.tf-form-*) ===================== */
/*
   Admin > New Employee / New User Account / New Criteria: one short form,
   centred in the content area rather than pinned to the left edge. Shares the
   field styling of the .tf-section stepped cards above.
*/
.tf-form-page {
    max-width: 760px;
    margin: 0 auto;
}

.tf-form-card {
    background: #fff;
    border: 1px solid rgba(2,2,54,.12);
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(0,0,0,.06);
    padding: 2rem;
}

.tf-form-heading {
    font-size: 1.85rem;
    font-weight: 800;
    color: #020236;
    line-height: 1.1;
    padding-bottom: .85rem;
    margin-bottom: 1.75rem;
    border-bottom: 1px solid #020236;
}

/* Larger navy checkbox, sized to sit beside a full-height input. */
.tf-check-input {
    width: 1.35rem;
    height: 1.35rem;
    margin-top: 0;
    border: 1.5px solid rgba(2,2,54,.45);
    border-radius: 5px;
}

    .tf-check-input:checked {
        background-color: #020236;
        border-color: #020236;
    }

    .tf-check-input:focus {
        border-color: #9f4cd6;
        box-shadow: 0 0 0 .18rem rgba(159,76,214,.2);
    }

.tf-check-label {
    font-size: 1rem;
    font-weight: 700;
    color: #020236;
}

/* Server-generated value shown for reference but not editable (e.g. username). */
.tf-input-locked:disabled,
.tf-input-locked[readonly] {
    background: #f4ecfb;
    color: #020236;
    font-weight: 600;
    opacity: 1;
}

/* ===================== Notification bell (.notif-*) ===================== */
/*
   Every layout renders this right before @RenderBody(), inside the same
   <main>. Floating it (rather than giving it its own flex row) pulls it up
   to the page's upper-right corner and lets the page's own title/heading -
   whatever markup that turns out to be, since every page's first block is
   different - wrap in beside it at the same height, so the bell reads as
   "level with" the page name instead of sitting in a separate strip above
   it. See Pages/Shared/_NotificationBell.cshtml and wwwroot/js/notifications.js
   - the badge/dropdown are populated by polling, never by a page reload.
*/
.app-topbar {
    float: right;
    margin: 0 0 .5rem 1rem;
}

.notif-bell-wrap {
    position: relative;
}

.notif-bell-btn {
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    border: 1.5px solid rgba(2,2,54,.15);
    background: #fff;
    color: #020236;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

    .notif-bell-btn:hover,
    .notif-bell-btn:focus {
        background: #f4f4f8;
    }

.notif-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 50rem;
    background: #a21919;
    color: #fff;
    font-size: .65rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
}

.notif-dropdown {
    width: 360px;
    max-width: 90vw;
    padding: 0;
    border: 1px solid rgba(2,2,54,.15);
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(2,2,54,.15);
    overflow: hidden;
}

.notif-dropdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .85rem 1rem;
    font-weight: 800;
    color: #020236;
    font-size: .92rem;
    border-bottom: 1px solid rgba(2,2,54,.08);
}

.notif-mark-all-btn {
    background: none;
    border: 0;
    color: #47076f;
    font-weight: 700;
    font-size: .75rem;
    padding: 0;
}

    .notif-mark-all-btn:hover {
        text-decoration: underline;
    }

.notif-dropdown-list {
    max-height: 360px;
    overflow-y: auto;
}

.notif-empty {
    padding: 1.5rem 1rem;
    text-align: center;
    color: #8b8ba7;
    font-size: .82rem;
}

.notif-dropdown-item {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .7rem 1rem;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid rgba(2,2,54,.06);
}

    .notif-dropdown-item:last-child {
        border-bottom: 0;
    }

    .notif-dropdown-item:hover {
        background: #f8f6fb;
    }

.notif-dropdown-item-unread {
    background: #f4ecfb;
}

.notif-dropdown-item-icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    flex-shrink: 0;
    background: linear-gradient(135deg, #31055d, #47076f);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
}

.notif-dropdown-item-message {
    font-size: .82rem;
    font-weight: 700;
    color: #020236;
    line-height: 1.35;
}

.notif-dropdown-item-date {
    font-size: .7rem;
    color: #8b8ba7;
    margin-top: .15rem;
}

.notif-dropdown-footer {
    display: block;
    text-align: center;
    padding: .65rem;
    font-size: .8rem;
    font-weight: 700;
    color: #47076f;
    text-decoration: none;
    border-top: 1px solid rgba(2,2,54,.08);
}

    .notif-dropdown-footer:hover {
        background: #f8f6fb;
    }

/* Notifications/Index.cshtml's own "All Notifications" row list. */
.notif-row {
    text-decoration: none;
    color: inherit;
    padding: .85rem;
    border-radius: 12px;
    border: 1px solid rgba(2,2,54,.1);
}

    .notif-row:hover {
        background: #f8f6fb;
    }

.notif-row-unread {
    background: #f4ecfb;
    border-color: #e5d3fa;
}

.notif-row-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    flex-shrink: 0;
    background: linear-gradient(135deg, #31055d, #47076f);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
}

.notif-row-message {
    font-size: .88rem;
    font-weight: 700;
    color: #020236;
}

.notif-row-date {
    font-size: .72rem;
    color: #8b8ba7;
    margin-top: .2rem;
}

.notif-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #47076f;
    margin-top: .35rem;
    flex-shrink: 0;
}