/* ============================================================
   UniProj: A Progressive Web Platform for Digital Work Order
   and Project Oversight  |  SLSU PMO
   Color Palette: #2A3F3F | #467750 | #89C07E | #E0E8E2 | #F0CD6E
   ============================================================ */

:root {
    /* Official palette */
    --up-dark-teal:    #2A3F3F;
    --up-green:        #467750;
    --up-forest-green: #006837;
    --up-green-mid:    #89C07E;
    --up-green-light:  #E0E8E2;
    --up-green-xlight: #f0f5f1;
    --up-gold:         #F0CD6E;
    --up-gold-dark:    #c9a227;
    --up-gold-light:   #fdf8e8;

    /* Layout */
    --up-sidebar-w:    255px;
    --up-topbar-h:     64px;
    --up-bg:           #f5f5f6;
    --up-border:       #dde3df;
    --up-text-muted:   #555555;
}

body {
    background: var(--up-bg) !important;
}

/* Bootstrap overrides */
.btn-primary,
.bg-primary        { background-color: var(--up-green)      !important; border-color: var(--up-green)      !important; color: #fff !important; }
.btn-primary:hover,
.btn-primary:focus { background-color: var(--up-dark-teal)  !important; border-color: var(--up-dark-teal)  !important; color: #fff !important; }

/* Radio / checkbox: visible on the light background, green when selected */
.form-check-input {
    border: 1px solid #7a8a7e;
    background-color: #fff;
}
.form-check-input:checked {
    background-color: var(--up-green);
    border-color: var(--up-green);
}
.form-check-input:focus {
    border-color: var(--up-green);
    box-shadow: 0 0 0 .25rem rgba(70, 119, 80, .25);
}

/* Page header action buttons: match Director Dashboard green */
.page-header-actions .btn {
    background-color: var(--up-forest-green) !important;
    border-color:     var(--up-forest-green) !important;
    color:            #fff                 !important;
}
.page-header-actions .btn:hover,
.page-header-actions .btn:focus {
    background-color: var(--up-dark-teal)  !important;
    border-color:     var(--up-dark-teal)  !important;
    color:            #fff                 !important;
}

/* Account Manager: admin / requester toggle */
.account-type-toggle-wrap {
    display: flex;
    justify-content: flex-start;
}
.account-type-toggle {
    display: inline-flex;
    align-items: stretch;
    padding: .25rem;
    border-radius: 999px;
    background: #e8ece9;
    border: 1px solid #6c757d;
    gap: .25rem;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .16);
}
.account-type-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .55rem 1.1rem;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: #444;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, box-shadow .18s ease;
    white-space: nowrap;
}
.account-type-toggle-btn:hover {
    color: var(--up-forest-green);
}
/* selected tab: solid green pill, white text */
.account-type-toggle-btn.active {
    background: var(--up-forest-green);
    color: #fff;
    box-shadow: 0 4px 14px rgba(0, 104, 55, .22);
}
.account-type-toggle-btn.active:hover {
    background: var(--up-dark-teal);
    color: #fff;
}
.account-type-toggle-btn .badge {
    font-size: .68rem;
    font-weight: 700;
    padding: .28rem .5rem;
    background: rgba(0, 0, 0, .08);
    color: inherit;
}
.account-type-toggle-btn.active .badge {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}
.account-type-toggle-btn.active .badge.bg-warning {
    background: var(--up-gold) !important;
    color: #000 !important;
}
@media (max-width: 575.98px) {
    .account-type-toggle {
        width: 100%;
    }
    .account-type-toggle-btn {
        flex: 1;
        justify-content: center;
        padding-inline: .75rem;
    }
}
/* Narrow phones: three full labels + counts no longer fit the pill without
   overlapping/overflowing, so drop the text label and keep icon + count. */
@media (max-width: 420px) {
    .account-type-toggle-btn > span:not(.badge) {
        display: none;
    }
    .account-type-toggle-btn {
        gap: .35rem;
        padding-inline: .5rem;
    }
}
.text-primary      { color: #000 !important; }
.border-primary    { border-color: var(--up-green) !important; }

/* Modals: black title/text, colour lives on the icon only; footer centred */
.modal-header:not(.text-white) .modal-title { color: #000; }
.modal-footer { justify-content: center; }

/* Confirmation modals: one seamless card — big black icon, bold title,
   muted description, then a Cancel / Confirm button pair. No colored
   header bar, no separate footer strip. */
.confirm-modal-content {
    border: 0;
    border-radius: 20px;
    padding: 1.75rem 1.5rem;
    text-align: center;
}
.confirm-modal-icon {
    font-size: 2.75rem;
    color: #000;
    display: block;
    margin: 0 auto .75rem;
}
.confirm-modal-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #000;
    margin-bottom: .5rem;
}
.confirm-modal-desc {
    color: var(--up-text-muted);
    font-size: .92rem;
    margin-bottom: 1.5rem;
}
.confirm-modal-actions {
    display: flex;
    gap: .75rem;
}
/* A few confirm modals wrap their confirm button in its own <form> (so it
   posts directly); keep that form the same flex width as a plain button. */
.confirm-modal-actions form {
    flex: 1;
    margin: 0;
}
.confirm-modal-actions form .confirm-modal-btn {
    width: 100%;
}
.confirm-modal-list {
    text-align: left;
    color: var(--up-text-muted);
    font-size: .85rem;
    margin-bottom: 1.5rem;
}
.confirm-modal-btn {
    flex: 1;
    border: 0;
    border-radius: 12px;
    padding: .65rem 1rem;
    font-weight: 600;
    font-size: .92rem;
    transition: background-color .15s ease, color .15s ease;
}
.confirm-modal-btn--cancel {
    background: #eef1ef;
    color: #000;
}
.confirm-modal-btn--cancel:hover,
.confirm-modal-btn--cancel:focus {
    background: #e2e6e3;
    color: #000;
}
.confirm-modal-btn--confirm {
    background: var(--up-green);
    color: #fff;
}
.confirm-modal-btn--confirm:hover,
.confirm-modal-btn--confirm:focus {
    background: var(--up-forest-green);
    color: #fff;
}
.btn-outline-primary       { color: #000 !important; border-color: var(--up-green) !important; }
.btn-outline-primary:hover { background-color: var(--up-green-light) !important; color: #000 !important; }
/* Pressed / dropdown-open states: same light green instead of Bootstrap's default blue */
.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-outline-primary.show,
.btn-outline-primary:focus-visible { background-color: var(--up-green-light) !important; color: #000 !important;
                                     border-color: var(--up-green) !important; box-shadow: 0 0 0 .2rem rgba(70, 119, 80, .25) !important; }

/* Export / Download buttons: a deeper, distinct green from the View buttons above */
.btn-outline-forest,
.btn-outline-forest:focus { color: var(--up-forest-green) !important; border-color: var(--up-forest-green) !important; background-color: transparent !important; }
.btn-outline-forest:hover { background-color: var(--up-forest-green) !important; color: #fff !important; border-color: var(--up-forest-green) !important; }

/* View Timeline button: logo blue */
.btn-timeline,
.btn-timeline:focus       { color: #3a7cba !important; border-color: #3a7cba !important; background-color: transparent !important; }
.btn-timeline:hover       { background-color: #3a7cba !important; color: #fff !important; border-color: #3a7cba !important; }

.btn-warning,
.bg-warning        { background-color: var(--up-gold)      !important; border-color: var(--up-gold)      !important; color: #000 !important; }
.btn-warning:hover { background-color: var(--up-gold-dark) !important; border-color: var(--up-gold-dark) !important; color: #fff !important; }

.form-control:focus,
.form-select:focus { border-color: var(--up-green); box-shadow: 0 0 0 .2rem rgba(70,119,80,.2); }

.progress-bar { background-color: var(--up-green) !important; transition: width .65s ease; }

/* Text color overrides: black/white only */
.text-success { color: #000 !important; }
.text-muted   { color: var(--up-text-muted) !important; }

/* Explicit green, for spots (like a completed task check) that need to
   read as done at a glance and shouldn't follow the black-only rule above */
.text-up-green { color: var(--up-green) !important; }

/* Work-order control numbers */
code { color: var(--up-green) !important; }

/* Profile page: detail fields (readonly text-field style) */
.profile-fields {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: .7rem .8rem;
}
.profile-field {
    min-width: 0;
    grid-column: 1 / -1;
}
.profile-field--wide { grid-column: 1 / -1; }
.profile-field--name  { grid-column: span 5; }
.profile-field--mi    { grid-column: span 2; }
.profile-field-label {
    display: block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--up-forest-green);
    margin: 0 0 .25rem .1rem;
}
.profile-field-value {
    display: block;
    /* same look as the Edit Profile text fields (.form-control) */
    background: #f4f6f5;
    border: 1px solid #c7d2cb;
    border-radius: var(--bs-border-radius, .375rem);
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #1a1a1a;
    word-break: break-word;
}
.profile-field-empty { color: #7c8a80; font-style: italic; }
@media (max-width: 575.98px) {
    .profile-field,
    .profile-field--name,
    .profile-field--mi { grid-column: 1 / -1; }
}

/* Hide browser-native password reveal button */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
    display: none !important;
}
input[type="password"]::-webkit-credentials-auto-fill-button,
input[type="password"]::-webkit-contacts-auto-fill-button,
input[type="password"]::-webkit-password-saving-indicator {
    display: none !important;
    visibility: hidden;
    pointer-events: none;
}
input.no-pwd-reveal::-ms-reveal,
input.no-pwd-reveal::-ms-clear,
input.no-pwd-reveal::-webkit-credentials-auto-fill-button,
input.no-pwd-reveal::-webkit-contacts-auto-fill-button,
input.no-pwd-reveal::-webkit-password-saving-indicator {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* ============================================================
   AUTH PAGES: Floating split-card layout
   ============================================================ */
body.auth-body {
    margin: 0;
    background:
        radial-gradient(1200px 600px at 15% 0%, #f3f0ec 0%, transparent 60%),
        radial-gradient(1000px 700px at 100% 100%, #e9ebec 0%, transparent 55%),
        #e7e8ea;
    min-height: 100vh;
}

.auth-page {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(12px, 2.5vw, 36px);
    overflow: hidden;
}

.auth-shell {
    width: 100%;
    max-width: 1120px;
    height: 100%;
    max-height: 680px;
    display: flex;
    gap: 22px;
}

/* Left: dark showcase card */
.auth-hero {
    position: relative;
    flex: 1.05;
    border-radius: 30px;
    background: #0b3623;
    overflow: hidden;
    padding: clamp(1.75rem, 3vw, 3rem) clamp(1.5rem, 2.6vw, 2.5rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
}
.auth-hero-bg {
    position: absolute;
    inset: -50px;
    background-image: url('../img/SLSU/SLSU.jpg');
    background-size: cover;
    background-position: center;
    filter: blur(12px) brightness(.75) saturate(.7);
    opacity: .8;
    z-index: 0;
}
.auth-hero-inst,
.auth-hero-main { position: relative; z-index: 2; }

.auth-hero-inst {
    font-size: clamp(1.55rem, 2.5vw, 2.25rem);
    font-weight: 700;
    color: #fff;
    letter-spacing: -.025em;
    line-height: 1.2;
    white-space: nowrap;
    margin: 0 0 1.8rem;
    text-shadow: 0 2px 16px rgba(0,0,0,.45);
}
.auth-hero-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}
.auth-hero-logo {
    width: clamp(128px, 15vw, 184px);
    height: auto;
    filter: drop-shadow(0 16px 36px rgba(0,0,0,.5));
}
.auth-hero-title {
    margin: 0;
    font-size: clamp(1.55rem, 2.5vw, 2.25rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.02em;
    color: #fff;
    text-shadow: 0 2px 16px rgba(0,0,0,.45);
}

/* Right: form card */
.auth-card {
    flex: 1;
    min-width: 0;
    border-radius: 30px;
    background: #fff;
    box-shadow: 0 40px 80px -30px rgba(20,30,30,.28);
    display: flex;
    flex-direction: column;
    padding: clamp(1.5rem, 2.4vw, 2.6rem) clamp(1.6rem, 2.8vw, 2.9rem);
    overflow: hidden;
}
.auth-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.auth-logo {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    text-decoration: none;
    color: #141414;
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: -.01em;
}
.auth-logo img { width: 20px; height: 20px; object-fit: contain; }
.auth-logo .auth-logo-text { width: auto; height: 15px; }

.auth-toplink {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    text-decoration: none;
    color: #2b2f2e;
    font-size: .95rem;
    font-weight: 600;
}
.auth-toplink:hover { color: var(--up-forest-green); }

.auth-card-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1.75rem 0;
    max-width: 440px;
    width: 100%;
    margin: 0 auto;
}
.auth-card-body.is-top {
    justify-content: flex-start;
}

.auth-card-title {
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    font-weight: 700;
    letter-spacing: -.02em;
    color: #111;
    margin: 0 0 1.6rem;
}
.auth-card-body.is-top .auth-card-title { margin-bottom: .8rem; }
.auth-card-sub {
    margin: -1.15rem 0 1.6rem;
    color: #3a3f3e;
    font-size: .88rem;
    line-height: 1.5;
}
.auth-card-notice {
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    margin: 0 0 1.15rem;
    color: #2b2f2e;
    font-size: .92rem;
    font-weight: 500;
    line-height: 1.45;
}
.auth-card-notice i {
    flex-shrink: 0;
    margin-top: .12rem;
    font-size: 1rem;
    color: var(--up-forest-green);
}

/* Fields */
.auth-group { margin-bottom: 1rem; position: relative; }
.auth-input {
    width: 100%;
    border: 1px solid #dfe1e3;
    border-radius: 999px;
    padding: .88rem 1.35rem;
    font-size: .92rem;
    color: #161616;
    background: #fff;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.auth-input::placeholder { color: #767c7b; }
.auth-input:focus {
    border-color: var(--up-green);
    box-shadow: 0 0 0 3px rgba(70,119,80,.12);
}
.auth-group-pass .auth-input { padding-right: 3rem; }
.auth-eye {
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
    border: 0;
    background: none;
    color: #6b7170;
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    padding: .25rem;
}
.auth-eye:hover { color: #333; }

.auth-inline-link {
    display: inline-block;
    margin: .4rem 0 1.6rem .3rem;
    color: var(--up-forest-green);
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
}
.auth-inline-link:hover { text-decoration: underline; }

.auth-btn {
    width: 100%;
    border: 0;
    border-radius: 999px;
    padding: .95rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(90deg, #4a7d54 0%, #006837 55%, #0b8a4a 100%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    cursor: pointer;
    transition: filter .15s ease;
}
.auth-btn:hover { background: var(--up-dark-teal); background-image: none; }
.auth-btn:active { filter: brightness(.95); }
.auth-btn i { font-size: 1.1rem; }

.auth-switch {
    margin: 1.5rem 0 0;
    text-align: center;
    font-size: .88rem;
    color: #3a3f3e;
}
.auth-switch a {
    color: var(--up-forest-green);
    font-weight: 600;
    text-decoration: none;
}
.auth-switch a:hover { text-decoration: underline; }

/* Signup: multi-field grid inside the card */
.auth-card-body.is-top .row { --bs-gutter-x: .6rem; --bs-gutter-y: .55rem; }
.auth-card .form-control,
.auth-card .form-select {
    border-radius: 999px;
    padding: .7rem 1.2rem;
    font-size: .88rem;
    color: #161616;
    border: 1px solid #dfe1e3;
    line-height: 1.4;
}
.auth-card .form-control::placeholder { color: #767c7b; }
.auth-card .form-control:focus,
.auth-card .form-select:focus {
    border-color: var(--up-green);
    box-shadow: 0 0 0 3px rgba(70,119,80,.12);
}
.auth-card .form-label {
    font-size: .75rem;
    font-weight: 600;
    color: #4a504f;
    margin: 0 0 .2rem .9rem;
}
.auth-card .form-text {
    font-size: .72rem;
    margin: .15rem 0 0 .9rem;
    line-height: 1.35;
    color: #4a504f;
}
.auth-card .input-group .form-control { border-radius: 999px 0 0 999px; }
.auth-card .input-group .btn {
    border: 1px solid #dfe1e3;
    border-left: 0;
    border-radius: 0 999px 999px 0;
    background: #fff;
    color: #6b7170;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 1.05rem;
}
.auth-card .alert { border-radius: 14px; padding: .55rem .85rem; margin-bottom: .75rem; font-size: .82rem; }
.auth-card-body.is-top .auth-btn { padding: .9rem 1.5rem; }

/* Signup affiliation picker: drop labels, placeholders carry the meaning */
#regAffiliation .form-label { display: none; }
#regAffiliation .row { --bs-gutter-y: .55rem; }

/* Responsive */
@media (max-width: 900px) {
    .auth-page { height: auto; min-height: 100vh; overflow-y: auto; align-items: flex-start; }
    .auth-shell {
        flex-direction: column;
        height: auto;
        max-height: none;
        max-width: 460px;
    }
    .auth-card { flex: none; overflow: visible; }
    .auth-hero {
        min-height: 170px;
        flex: none;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
    .auth-hero-inst { font-size: clamp(1.15rem, 4.6vw, 1.7rem); white-space: normal; margin-bottom: 1.1rem; }
    .auth-hero-main { gap: 1rem; }
    .auth-hero-title { font-size: clamp(1.15rem, 4.6vw, 1.7rem); }
    .auth-hero-logo { width: clamp(96px, 22vw, 128px); }
    .auth-card-body { padding: 1.5rem 0; }
}
@media (max-width: 560px) {
    .auth-page { padding: 0; }
    .auth-shell { gap: 0; max-width: none; }
    .auth-hero { border-radius: 0; }
    .auth-card { border-radius: 24px 24px 0 0; margin-top: -20px; padding-top: 3rem; box-shadow: none; }
}

/* Campus / College / Office picker: clip long option text with an ellipsis */
select.affiliation-select {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}


/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar {
    width: var(--up-sidebar-w);
    background: #2A3F3F;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 1040;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    transition: transform .25s ease, left .25s ease;
    box-shadow: 2px 0 16px rgba(0,0,0,.18);
    border-radius: 0 16px 16px 0;
}

/* Brand area */
.sidebar-brand {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: .85rem;
    text-decoration: none;
    background: #2A3F3F;
    flex-shrink: 0;
}
.sidebar-brand-logo {
    width: 38px;
    height: 38px;
    object-fit: contain;
    flex-shrink: 0;
}
.sidebar-brand-text {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -.3px;
    line-height: 1.1;
}

/* Section label */
.sidebar-section {
    display: block;
    padding: 1.25rem 1.5rem .4rem;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: rgba(255,255,255,.8);
    font-weight: 700;
    text-align: left !important;
}

/* Nav list */
.sidebar-nav {
    list-style: none;
    padding: .25rem 0;
    flex: 1;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: left !important;
}
.sidebar-nav li {
    width: 100%;
    text-align: left !important;
}
.sidebar-nav .nav-link {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    gap: 1rem;
    padding: .8rem 1.5rem;
    color: #fff;
    font-size: .95rem;
    font-family: 'Roboto', Arial, sans-serif;
    font-weight: 500;
    border-left: 4px solid transparent;
    border-radius: 0;
    margin: 0;
    line-height: 1.2;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
    text-decoration: none !important;
    position: relative;
    width: 100%;
}
.sidebar-nav .nav-link .nav-icon {
    font-size: 1.2rem;
    width: 1.6rem;
    min-width: 1.6rem;
    height: 1.6rem;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    flex-shrink: 0;
    line-height: 1 !important;
    opacity: 1;
    transition: opacity .2s ease, transform .2s ease;
}
.sidebar-nav .nav-link:hover {
    background: #fff;
    color: #2A3F3F;
    border-left-color: transparent;
    text-decoration: none !important;
}
.sidebar-nav .nav-link:hover .nav-icon {
    color: #2A3F3F;
    opacity: 1;
}
.sidebar-nav .nav-link.active {
    background: #fff;
    color: #2A3F3F;
    border-left-color: transparent;
    font-weight: 700;
    text-decoration: none !important;
}
.sidebar-nav .nav-link.active .nav-icon {
    color: #2A3F3F;
    opacity: 1;
}
.sidebar-nav .nav-link.active:hover {
    background: #fff;
    color: #2A3F3F;
}
.sidebar-nav .nav-link .nav-label {
    flex: 1;
    text-align: left !important;
    line-height: 1.2 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}
.sidebar-nav .nav-link .nav-badge {
    position: relative;
    right: auto;
    background: var(--up-forest-green);
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 10px;
    line-height: 1;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.sidebar-nav .nav-link.active .nav-badge {
    background: #fff;
    color: var(--up-forest-green);
}

/* Footer */
.sidebar-footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid rgba(255,255,255,.08);
    background: #2A3F3F;
    flex-shrink: 0;
}
.sidebar-avatar {
    width: 36px;
    height: 36px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .9rem;
    color: #000;
    flex-shrink: 0;
}
.sidebar-user-name { color: #fff; font-size: .84rem; font-weight: 600; }
.sidebar-user-role { color: rgba(255,255,255,.8); font-size: .68rem; }
.sidebar-logout { color: rgba(255,255,255,.5); font-size: 1.1rem; transition: color .15s; }
.sidebar-logout:hover { color: #fff; }

/* ============================================================
   MAIN LAYOUT
   ============================================================ */
.main-wrap {
    margin-left: var(--up-sidebar-w);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--up-bg);
    padding-top: var(--up-topbar-h);
    transition: margin-left .25s ease;
}

/* Fixed top bar (page title, notifications, role badge) */
.topbar-shell {
    position: fixed;
    top: 0;
    left: var(--up-sidebar-w);
    right: 0;
    z-index: 1030;
    transition: left .25s ease;
}

/* Desktop collapsed state when toggled by hamburger menu */
@media (min-width: 992px) {
    body.sidebar-collapsed .sidebar {
        transform: translateX(-100%);
    }
    body.sidebar-collapsed .main-wrap {
        margin-left: 0;
    }
    body.sidebar-collapsed .topbar-shell {
        left: 0;
    }
}

/* Topbar */
.topbar {
    height: var(--up-topbar-h);
    background: #fff;
    border-bottom: 1px solid var(--up-border);
    box-shadow: 0 1px 6px rgba(0,0,0,.05);
}
.topbar-toggle-btn {
    color: #2A3F3F !important;
    padding: .35rem .55rem;
    border-radius: 8px;
    transition: background .15s ease, color .15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.topbar-toggle-btn:hover {
    background: var(--up-green-light) !important;
    color: #2A3F3F !important;
}
.topbar-title {
    font-size: 1rem;
    font-weight: 700;
    color: #000;
}

/* Back navigation (shared backButton() helper) */
.back-nav {
    display: flex;
    align-items: center;
    gap: .85rem;
    margin-bottom: 1.25rem;
}
.page-create-top .back-nav {
    margin-bottom: 0;
}

/* Uniform page description / subtitle: upper-left of every page */
.back-nav-desc,
.page-desc {
    font-size: 1.05rem;
    font-weight: 400;
    color: #000;
    margin-bottom: 0;
}
.back-nav-desc {
    margin: 0;
    max-width: 65ch;
}

/* Glass CTA card (frosted glassmorphism panel) */
.glass-cta {
    position: relative;
    background: rgba(255, 255, 255, 0.15);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 16px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    padding: .7rem .95rem;
    color: #3f4652;
    font-size: .92rem;
}
.glass-cta-title {
    color: #2b303b;
    font-weight: 600;
    font-size: .95rem;
}
.glass-cta-icon {
    color: #5b6472;
}
.glass-cta-success,
.glass-cta-danger {
    border: 1px solid #000;
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .glass-cta { background: rgba(255, 255, 255, 0.88); }
}

/* Neutral-toned buttons (pair with .glass-cta or use standalone) */
.btn-neutral {
    background: #4b5563;
    border-color: #4b5563;
    color: #fff;
}
.btn-neutral:hover,
.btn-neutral:focus {
    background: #374151;
    border-color: #374151;
    color: #fff;
}
.btn-outline-neutral {
    border-color: rgba(107, 114, 128, 0.55);
    color: #374151;
    background: rgba(255, 255, 255, 0.35);
}
.btn-outline-neutral:hover,
.btn-outline-neutral:focus {
    background: rgba(107, 114, 128, 0.14);
    color: #1f2937;
}

/* Banner buttons */
.glass-cta .btn-neutral,
.glass-cta .btn-outline-neutral {
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
/* Primary action: highlighted by default */
.glass-cta .btn-neutral {
    background: #1e5f2b;
    border-color: #1e5f2b;
    color: #fff;
}
.glass-cta .btn-neutral:hover,
.glass-cta .btn-neutral:focus {
    background: #164821;
    border-color: #164821;
    color: #fff;
}
/* Secondary action: transparent, fills in on hover */
.glass-cta .btn-outline-neutral {
    background: transparent;
    border-color: #1e5f2b;
    color: #1e5f2b;
}
.glass-cta .btn-outline-neutral:hover,
.glass-cta .btn-outline-neutral:focus {
    background: #1e5f2b;
    border-color: #1e5f2b;
    color: #fff;
}
/* Hovering the secondary action de-emphasises the primary one */
.glass-cta:has(.btn-outline-neutral:hover) .btn-neutral {
    background: transparent;
    border-color: #1e5f2b;
    color: #1e5f2b;
}

/* Create request page: title stays visible below fixed topbar */
.page-create-top {
    position: sticky;
    top: var(--up-topbar-h);
    z-index: 1020;
    background: var(--up-bg);
    padding: .25rem 0 .75rem;
    margin-bottom: 1rem !important;
    border-bottom: 1px solid var(--up-border);
}

/* Notification button */
.notif-btn {
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    color: #000;
    padding: .35rem .45rem;
    border-radius: 8px;
    transition: background .15s, color .15s;
    line-height: 1;
}
/* Hover, dropdown open, and being on the Notifications page all share one look:
   a filled green bell, no background */
.notif-btn .notif-icon-on { display: none; }
.notif-btn:hover,
.notif-btn.is-open,
.notif-btn.active { background: none; color: var(--up-green); }
.notif-btn:hover .notif-icon-idle,
.notif-btn.is-open .notif-icon-idle,
.notif-btn.active .notif-icon-idle { display: none; }
.notif-btn:hover .notif-icon-on,
.notif-btn.is-open .notif-icon-on,
.notif-btn.active .notif-icon-on { display: inline-block; }
.notif-count {
    position: absolute;
    top: 0; right: 0;
    background: var(--up-forest-green);
    color: #fff;
    font-size: .58rem;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    padding: 0 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    line-height: 1;
}

/* Topbar profile avatar (right of notifications) */
.topbar-avatar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    text-decoration: none;
    flex-shrink: 0;
    transition: box-shadow .15s ease;
}
.topbar-avatar-btn:hover {
    box-shadow: 0 0 0 2px var(--up-green-light);
}
.topbar-avatar-img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}
.topbar-avatar-initial {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--up-forest-green);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .85rem;
}

/* Notification dropdown (frosted glass, matches .topbar-glass) */
.notif-dropdown {
    position: absolute;
    top: calc(var(--up-topbar-h) + 2px);
    right: 1rem;
    width: 370px;
    background: linear-gradient(150deg, rgba(255,255,255,.9), rgba(255,255,255,.82));
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid #6c757d;
    border-radius: 14px;
    box-shadow:
        -4px 6px 18px rgba(15,23,42,.16),
        inset 0 1px 0 rgba(255,255,255,.6);
    z-index: 1050;
    display: none;
    flex-direction: column;
    max-height: 490px;
    overflow: hidden;
}
.notif-dropdown.show { display: flex; }
.notif-dropdown,
.notif-dropdown .small,
.notif-dropdown .fw-semibold { color: #1c1c1c; }
.notif-dropdown .text-muted { color: #555 !important; }

/* header action buttons: circular green hover like .topbar-glass-btn */
.notif-head-btn {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    border: 0;
    background: transparent;
    border-radius: 999px;
    padding: .2rem .55rem;
    font-size: .78rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
.notif-head-btn.is-read  { color: var(--up-green); }
.notif-head-btn.is-clear { color: #b02a37; }
.notif-head-btn.is-read:hover  { background: var(--up-green); color: #fff; }
.notif-head-btn.is-clear:hover { background: #b02a37; color: #fff; }

/* list rows */
.notif-item {
    transition: background-color .13s ease;
}
.notif-item:hover { background: var(--up-green-xlight); }
.notif-item-unread { background: #f2f8f3; }
.notif-item-unread:hover { background: #e6f1e8 !important; }

/* "View all" in the notification dropdown uses the same filled pill as the Confirm button (.btn-primary) */
.notif-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 4px;
}
.notif-dot.info    { background: #000; }
.notif-dot.success { background: #000; }
.notif-dot.warning { background: #555; }
.notif-dot.danger  { background: #000; }

/* Notifications page list */
.notif-list {
    display: flex;
    flex-direction: column;
    border-radius: inherit;
    overflow: hidden;
}
.notif-row {
    display: flex;
    gap: .85rem;
    align-items: flex-start;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid var(--up-border);
    text-decoration: none;
    color: inherit;
    transition: background .13s;
}
.notif-row:last-child { border-bottom: 0; }
.notif-row .notif-dot { margin-top: .4rem; }
.notif-row-link { cursor: pointer; }
.notif-row-link:hover { background: var(--up-green-xlight); color: inherit; }
.notif-row-unread { background: #f2f8f3; }
.notif-row-unread:hover { background: #e6f1e8; }
.notif-row-title {
    font-weight: 600;
    font-size: .92rem;
    color: #1c1c1c;
}
.notif-row-msg {
    margin: .15rem 0 .35rem;
    font-size: .85rem;
    color: #555;
    line-height: 1.4;
}
.notif-row-time {
    font-size: .76rem;
    color: #8a8a8a;
}
.notif-row-new {
    font-size: .66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #fff;
    background: var(--up-green);
    border-radius: 999px;
    padding: .1rem .5rem;
}
.notif-row-chev {
    align-self: center;
    color: #bbb;
    font-size: 1rem;
}
.notif-row-link:hover .notif-row-chev { color: var(--up-green); }
.min-w-0 { min-width: 0; }

/* ============================================================
   STAT CARDS
   ============================================================ */
.stat-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}
.stat-icon.green  { background: var(--up-green-light); color: #000; }
.stat-icon.teal   { background: rgba(42,63,63,.1);     color: #000; }
.stat-icon.gold   { background: var(--up-gold-light);  color: #000; }
.stat-icon.yellow { background: #fff8e1;               color: #000; }
.stat-icon.gray   { background: #f3f4f6;               color: #000; }
.stat-icon.red    { background: #fee2e2;               color: #000; }
.stat-icon.blue   { background: #dbeafe;               color: #000; }

/* Flat stat strip: read-only KPI readout (no hover, no click) */
.stat-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 100%;
}
.stat-stack .stat-group {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.stat-group-title {
    display: flex;
    align-items: baseline;
    gap: .4rem;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -.01em;
    color: #1f2937;
    margin-bottom: .5rem;
}
.stat-group-total {
    font-weight: 700;
    color: #1f2937;
}
/* Boxed group: wraps a stat-strip in its own bordered, shadowed panel,
   like Hostinger's "Essentials" / "Performance" dashboard cards */
.stat-group--boxed {
    background: #fff;
    border: 1px solid #adb5bd;
    border-radius: 14px;
    box-shadow: 0 .35rem 1rem rgba(0, 0, 0, .12);
    padding: 1.1rem 1.25rem;
}
.stat-strip {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
    gap: 1px;
    background: var(--up-border);
    border: 1px solid var(--up-border);
    border-radius: 10px;
    overflow: hidden;
}
.stat-strip-item {
    background: #fff;
    padding: .5rem .45rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: .15rem;
    min-height: 58px;
}
.stat-strip-value {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1;
    color: #1f2937;
}
.stat-strip-label {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .85rem;
    font-weight: 500;
    color: #000;
    line-height: 1.2;
}
/* Match each work-order count's label to that status's badge color */
.text-status-pending,
.text-status-todo,
.text-status-inprogress,
.text-status-validating,
.text-status-completed,
.text-status-declined {
    font-weight: 700;
}
.text-status-pending     { color: #333333; }
.text-status-todo        { color: #0d6efd; }
.text-status-inprogress  { color: #FFBF00; }
.text-status-validating  { color: #8b5cf6; }
.text-status-completed   { color: #16A34A; }
.text-status-declined    { color: #dc2626; }
.stat-strip-icon {
    font-size: .8rem;
    color: #000;
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .stat-strip--wo { grid-template-columns: repeat(5, 1fr); }
}

/* ============================================================
   WORK ORDER FORM  (create + resubmit)
   ============================================================ */
.wo-section-title {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 1rem;
}

/* ============================================================
   ATTACHMENT / PICTURE THUMBNAILS  (create + resubmit forms)
   ============================================================ */
.pic-dropzone {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .2rem .5rem;
    text-align: center;
    padding: .65rem .85rem;
    border: 1.5px dashed var(--up-border);
    border-radius: 10px;
    background: #f3f7f3;
    color: var(--up-text-muted);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
.pic-dropzone:hover { border-color: var(--up-green); }
.pic-dropzone.dragover {
    border-color: var(--up-green);
    background: var(--up-green-xlight);
}
.pic-dropzone i { font-size: 1.05rem; color: var(--up-green); }
.pic-dropzone .pic-dropzone-main { font-weight: 600; font-size: .85rem; color: #2b303b; }
.pic-dropzone small { font-size: .72rem; flex-basis: 100%; }

.att-remove-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .7rem;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease;
}
.att-remove-btn:hover { background: #dc2626; }
.att-remove-flag {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: .375rem;
    background: rgba(220, 38, 38, .4);
    color: #fff;
    font-weight: 600;
    font-size: .8rem;
}
.att-thumb.marked .att-thumb-media img { filter: grayscale(1); opacity: .45; }
.att-thumb.marked .att-remove-flag { display: flex; }
.att-thumb.marked .att-remove-btn { background: #16a34a; }
.att-thumb.marked .att-remove-btn:hover { background: #15803d; }
.att-new-badge {
    position: absolute;
    top: 5px;
    left: 5px;
    background: #1e5f2b;
    color: #fff;
    font-size: .65rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 999px;
}
/* Related Files (read-only): image-only thumbnails, no caption */
.rel-thumb { display: block; border-radius: .5rem; overflow: hidden; }
.rel-thumb-img { display: block; width: 100%; height: 160px; object-fit: cover; border-radius: .5rem;
                 transition: transform .2s ease, opacity .2s ease; }
.rel-thumb:hover .rel-thumb-img { opacity: .9; }
.rel-thumb .rel-pdf-tile { height: 160px; }
.att-thumb .att-thumb-media, .att-thumb .att-remove-flag { border-radius: .5rem; }
.att-thumb.marked .rel-pdf-tile { opacity: .45; }

/* Related Files: PDF placeholder tile (same footprint as an image thumb) */
.rel-pdf-tile {
    height: 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .15rem;
    border: 1px solid var(--up-border);
    border-radius: .375rem;
    background: #f8faf9;
    color: #b42318;
    font-size: 2rem;
}
.rel-pdf-tile span {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .05em;
    color: var(--up-text-muted);
}

/* ============================================================
   BADGES
   ============================================================ */
.badge.bg-success  { background-color: var(--up-green)     !important; color: #fff !important; }
.badge.bg-warning  { background-color: #F0CD6E !important; color: #000 !important; } /* In Progress: same gold as the dashboard donut */
.badge.bg-primary  { background-color: var(--up-green)     !important; color: #fff !important; }
.badge.bg-info     { background-color: var(--up-green-mid) !important; color: #000 !important; }
.badge.bg-secondary { background-color: #555 !important;   color: #fff !important; }
.badge.bg-danger   { background-color: #dc2626 !important; color: #fff !important; }
.badge.bg-status-blue { background-color: #0d6efd !important; color: #fff !important; }
.badge.bg-status-approved { background-color: #0d9488 !important; color: #fff !important; } /* Approved (history): teal */
.badge.bg-status-validating { background-color: #8b5cf6 !important; color: #fff !important; }

/* Role badges */
.badge.role-super  { background: var(--up-dark-teal); color: #fff; }
.badge.role-admin1 { background: #555; color: #fff; }
.badge.role-admin2 { background: #555; color: #fff; }
.badge.role-user   { background: #555; color: #fff; }

/* Verified badges */
.badge-verified   { background: var(--up-green); color: #fff; }
.badge-unverified { background: #555; color: #fff; }

/* Topbar role badge */
.topbar-role-badge {
    font-size: .68rem;
    padding: .28rem .65rem;
    border-radius: 20px;
    font-weight: 600;
    letter-spacing: .02em;
    background: #000;
    color: #fff;
}

/* ============================================================
   TIMELINE
   ============================================================ */
.timeline { padding-left: 1.5rem; position: relative; }
.tl-item { position: relative; margin-bottom: 1.75rem; }
.tl-item:last-child { margin-bottom: 0; }
/* Several entries under one status badge (consecutive same status) */
.tl-group .tl-sub { border-left: 2px solid var(--up-border); padding-left: .65rem; }
.tl-sub + .tl-sub { margin-top: .6rem; }
/* Connector line only between items: nothing after the final entry */
.tl-item:not(:last-child)::before {
    content: '';
    position: absolute;
    left: calc(-1.35rem + 6px);
    top: .4rem;
    bottom: -1.75rem;
    width: 2px;
    background: var(--up-border);
}
.tl-dot {
    position: absolute;
    left: -1.35rem; top: .3rem;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: #555;
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px #555;
}
.tl-dot.done   { background: var(--up-dark-teal); box-shadow: 0 0 0 2px var(--up-dark-teal); }
.tl-dot.reject { background: #dc2626; box-shadow: 0 0 0 2px #dc2626; }

/* ============================================================
   CARDS & TABLES
   ============================================================ */
.card {
    border-radius: 12px;
    border: 1px solid var(--up-border);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
    overflow: hidden;
}
.card-header {
    background: #fff;
    border-bottom: 1px solid var(--up-border);
    border-radius: 12px 12px 0 0 !important;
    padding: .9rem 1.25rem;
}
/* Director dashboard: validations waiting 3+ days get a soft yellow row (same gold family as In Progress) */

/* List rows directly under a card header line up with the header title */
.card-header + .list-group-flush > .list-group-item {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.table thead th {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #000;
    font-weight: 700;
    border-bottom: 2px solid var(--up-border);
    background: #fafbfa;
}
.table-hover tbody tr:hover { background: var(--up-green-xlight); }

/* ============================================================
   DIRECTOR DASHBOARD: SLSU forest green, white, and yellow
   ============================================================ */
.director-dashboard {
    --director-green: #006837;
    --director-yellow: #fff200;
    --director-ink: #123b2a;
}
.director-dashboard .director-hero {
    background: #006837;
    border-radius: 18px;
    padding: 1.65rem 1.75rem;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    box-shadow: 0 12px 30px rgba(0, 104, 55, .18);
}
.director-dashboard .director-eyebrow {
    color: #fff200;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .13em;
    margin-bottom: .4rem;
}
.director-dashboard .director-hero h1 {
    color: #fff;
    font-size: clamp(1.45rem, 3vw, 2rem);
    font-weight: 750;
    letter-spacing: -.03em;
    margin: 0;
}
.director-dashboard .director-hero p {
    color: rgba(255,255,255,.85) !important;
    margin-top: .35rem !important;
    font-size: .86rem;
}
.director-dashboard .director-hero-action {
    background: #fff200;
    border: 1px solid #fff200;
    border-radius: 9px;
    color: #006837;
    font-weight: 750;
    padding: .65rem 1rem;
    white-space: nowrap;
}
.director-dashboard .director-hero-action:hover {
    background: #fff;
    border-color: #fff;
    color: #006837;
}
.director-dashboard .director-stat-card,
.director-dashboard .director-panel {
    border: 0;
    border-radius: 14px;
    box-shadow: 0 3px 12px rgba(0,104,55,.05);
}
.director-dashboard .director-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(0,104,55,.12);
}
.director-dashboard .director-stat-card .stat-icon,
.director-dashboard .stat-icon.green,
.director-dashboard .stat-icon.teal,
.director-dashboard .stat-icon.gold,
.director-dashboard .stat-icon.yellow,
.director-dashboard .stat-icon.gray,
.director-dashboard .stat-icon.red,
.director-dashboard .stat-icon.blue {
    background: #fff;
    color: #006837;
    border: 0;
    border-radius: 50%;
}
.director-dashboard .director-panel .card-header {
    color: #000;
    font-weight: 750 !important;
    border-bottom-color: rgba(0,104,55,.12);
}
.director-dashboard .director-panel .card-header i {
    color: #006837;
}
.director-dashboard .director-activity-icon { color: #006837 !important; }
.director-dashboard .director-panel .table thead th {
    background: #fff;
    color: #000;
    border-bottom-color: #d5d9d7;  /* neutral gray line under the column names */
}
.director-dashboard .director-panel .table-hover tbody tr:hover { background: #eef0ef; }
.director-dashboard .progress-bar { background-color: #006837 !important; }
.director-dashboard .btn-primary { background-color: #006837 !important; border-color: #006837 !important; color: #fff !important; }
.director-dashboard .btn-outline-secondary { border-color: #006837; color: #006837; }
.director-dashboard .btn-outline-secondary:hover { background: #006837; border-color: #006837; color: #fff; }

@media (max-width: 575.98px) {
    .director-dashboard .director-hero { align-items: flex-start; flex-direction: column; padding: 1.35rem; }
    .director-dashboard .director-hero-action { width: 100%; }
}

/* ============================================================
   SIDEBAR BACKDROP (mobile)
   ============================================================ */
.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 1039;
}
.sidebar-backdrop.show { display: block; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 991.98px) {
    .sidebar { transform: translateX(-100%); }
    .sidebar.show { transform: translateX(0); }
    .main-wrap { margin-left: 0; }
    .topbar-shell { left: 0; }
    .notif-dropdown { right: .5rem; width: 320px; }
}

@media print {
    .sidebar, .topbar-shell, .btn, .no-print { display: none !important; }
    .main-wrap { margin-left: 0; padding-top: 0; }
}

/* ============================================================
   PROFILE AVATAR
   ============================================================ */
.profile-avatar-wrap {
    position: relative;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-block;
    flex-shrink: 0;
}
.profile-avatar-img {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--up-green-light);
    display: block;
}
.profile-avatar-initial {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: #000;
    color: #fff;
    font-size: 1.9rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--up-green-light);
    user-select: none;
}
.profile-avatar-overlay {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(0,0,0,.6);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-size: .58rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.1;
    opacity: 0;
    transition: opacity .2s ease;
    pointer-events: none;
}
.profile-avatar-overlay .bi { font-size: 1.1rem; }
.profile-avatar-wrap:hover .profile-avatar-overlay { opacity: 1; }

/* ============================================================
   SIDEBAR AVATAR: photo variant
   ============================================================ */
.sidebar-avatar-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-decoration: none;
}
.sidebar-avatar-img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,.25);
    display: block;
    transition: border-color .15s;
}
.sidebar-avatar-wrap:hover .sidebar-avatar-img { border-color: #fff; }

/* ============================================================
   HOSTING-PANEL STYLE CARD (Update Work Order page)
   ============================================================ */
.hcard {
    background: #fff;
    border: 1px solid var(--up-border);
    border-radius: 16px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .09);
    padding: 1.5rem;
}
.hcard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}
.hcard-title {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0;
}
.hcard-title .bi {
    color: #000;
}
.hcard-badge {
    background: var(--up-green-light);
    color: var(--up-green);
    font-size: .72rem;
    font-weight: 700;
    padding: .3rem .7rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .02em;
}
.hcard-action {
    margin-left: auto;
}
.hcard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1.1rem 1.75rem;
}
.hcard-grid .hcard-label {
    display: block;
    font-size: .78rem;
    color: var(--up-text-muted);
    font-weight: 500;
    margin-bottom: .25rem;
}
.hcard-grid .hcard-value {
    display: block;
    font-size: .95rem;
    font-weight: 600;
    color: #1f2937;
}
.hcard-grid-full {
    grid-column: 1 / -1;
}
/* Office Action timeline: two titled groups side by side (Proposed | Actual),
   each with Start / Finish / Duration; they stack on phones */
.oa-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.1rem 1.75rem;
    /* divider below the Proposed / Actual section (before Remarks) */
    border-bottom: 1px solid var(--up-border);
    padding-bottom: 1.1rem;
}
.oa-split:last-child { border-bottom: 0; padding-bottom: 0; }  /* no Remarks after it: no extra line */
.oa-group-title {
    font-size: .78rem;  /* a step smaller than the Office Action form's PROPOSED / ACTUAL labels (.875rem) */
    font-weight: 700;
    text-transform: uppercase;
    color: var(--up-dark-teal);
    padding-bottom: .35rem;
    margin-bottom: .75rem;
    border-bottom: 1px solid var(--up-border);
}
.oa-group-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.1rem 1.75rem;
}
@media (max-width: 767.98px) {
    .oa-split { grid-template-columns: 1fr; }
}

/* ============================================================
   WORK ORDER STATUS STEPPER (4-step)
   ============================================================ */
.wo-status-card {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

/* ============================================================
   WORK ORDER DOCUMENT LAYOUT (view and update)
   ============================================================ */
.wo-doc {
    background: #fff;
    border: 1px solid var(--up-border);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .05);
    padding: 1.5rem 1.75rem 1.75rem;
}
/* Full request shown inside the information card: no card of its own, just a divider above */
.wo-doc.wo-doc--inline {
    background: transparent;
    border: 0;
    border-top: 1px solid var(--up-green); /* same green as the form's section dividers */
    border-radius: 0;
    box-shadow: none;
    padding: 1.25rem 0 0;
    margin-top: 1.25rem;
}
.wo-doc-head {
    padding-bottom: .5rem;
    margin-bottom: 1rem;
}
.wo-doc-title {
    font-size: 2.10rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 .4rem;
    line-height: 1.25;
}
.wo-doc-sub {
    font-size: 1.15rem;
    color: var(--up-text-muted);
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}
.wo-doc-sub code { font-size: 1.15rem; color: #1a1a1a; }

.wo-doc-group {
    background: #fff;
    border: 1px solid var(--up-border);
    border-radius: 16px;
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .06);
    padding: 1.5rem 1.5rem .25rem;
    margin-bottom: 1.25rem;
}
.wo-doc-group:last-of-type { margin-bottom: 1.1rem; }
.wo-doc-section { margin-bottom: 1.1rem; }
.wo-doc-section:last-child { margin-bottom: 0; }
.wo-doc-section-title {
    /* same as the Proposed / Actual group titles (.oa-group-title) */
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--up-dark-teal);
    text-align: left;
    padding-bottom: .35rem;
    margin-bottom: .75rem;
    border-bottom: 1px solid var(--up-border);
}
.wo-doc-grid {
    display: grid;
    grid-template-columns: minmax(150px, max-content) 1fr;
    gap: 0;
    font-size: 1rem;
    margin: 0;
}
.wo-doc-grid.wo-doc-grid--2col {
    grid-template-columns: minmax(150px, max-content) 1fr minmax(150px, max-content) 1fr;
}
.wo-doc-grid dt {
    color: var(--up-text-muted);
    font-weight: 500;
    font-size: .78rem;
    align-self: stretch;
    display: flex;
    align-items: center;
    padding: .5rem .75rem .5rem 0;
}
.wo-doc-grid dd {
    margin: 0;
    min-width: 0;
    color: #1a1a1a;
    font-weight: 600;
    font-size: .95rem;
    text-align: right;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: .5rem 0 .5rem .75rem;
    overflow-wrap: anywhere;
}
.wo-doc-grid dd code {
    font: inherit;
    color: inherit !important;
}
.wo-doc-subhead {
    font-size: 1.40rem;
    font-weight: 500;
    color: var(--up-text-muted);
    margin: 1rem 0 .3rem;
}
.wo-doc-prose {
    /* plain text like the Proposed / Actual values (.hcard-value) */
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.55;
    color: #1f2937;
    white-space: pre-wrap;
    word-break: break-word;
}
.wo-photo-grid {
    /* Fixed 3 columns (the upload max): with fewer than 3 photos the
       remaining slot(s) stay in place as empty tiles (showing this
       background) rather than the photos stretching to fill the row. */
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px;
    background: #b9c2bc;
    border: 1px solid #b9c2bc;
    border-radius: 6px;
    overflow: hidden;
}
.wo-photo-grid-item {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #fff;
}
.wo-photo-grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .2s ease;
}
.wo-photo-grid-item:hover img {
    transform: scale(1.06);
}
.wo-photo-grid-item.wo-photo-grid-file {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--up-text-muted);
    font-size: 1.6rem;
    text-decoration: none;
}
.wo-doc-foot {
    border-top: 1px solid var(--up-border);
    margin-top: 1rem;
    padding-top: .6rem;
    font-size: .85rem;
    color: var(--up-text-muted);
    text-align: center;
}
@media (max-width: 767.98px) {
    .wo-doc { padding: 1.5rem 1.25rem; }
    .wo-doc-grid,
    .wo-doc-grid.wo-doc-grid--2col {
        grid-template-columns: minmax(120px, max-content) 1fr;
    }
}

/* Soft-gray fill on editable inputs (assign, office action, update status),
   turning white on focus: signals "editable" and sets them apart from the
   green read-only value boxes above. */
.wo-input-soft .form-control,
.wo-input-soft .form-select {
    background-color: #f4f6f5;
    border-color: #c7d2cb;
    font-size: .95rem;
}
.wo-input-soft .form-control:focus,
.wo-input-soft .form-select:focus {
    background-color: #fff;
    border-color: var(--up-green);
    box-shadow: 0 0 0 .2rem rgba(70, 119, 80, .15);
}
/* Match the Work Order Details card's label size */
.wo-input-soft .form-label {
    font-size: .78rem;
}

/* Work order edit: Office Action / Work Tasks / Update Status combined into
   one card as stacked sections, separated by a divider instead of separate
   card borders. */
div.wo-section-title {  /* the h6 form headings (create/edit) keep their normal left-aligned layout */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.wo-section-title h4 {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: .95rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0;
}
.wo-section-title h4 .bi {
    color: #000; /* black, same as the card-title icons */
}
/* Vertical divider between the Office Action column and the Work
   Tasks / Update Status column — only once they actually sit side by
   side; on mobile they stack, so the line would float mid-page. */
@media (min-width: 768px) {
    .wo-col-divider {
        border-left: 1px solid var(--up-green);
        padding-left: 2rem !important;
    }
}
/* Dividers use the same green as the action buttons' hover ring;
   opacity 1 overrides Bootstrap's faded <hr> (opacity .25) */
.wo-section-divider {
    border: 0;
    border-top: 1px solid var(--up-green);
    opacity: 1;
    margin: 1.5rem 0;
}

/* Middle icon cluster of the work-order header: icon-above-label action
   buttons, sitting flush inside the single-row .wo-topbar pill. */
.topbar-glass {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    /* Let this cluster shrink below its content's natural width and, if it
       still doesn't fit the pill on a narrow screen, scroll horizontally
       within its own bounds rather than spilling its buttons out past the
       pill's rounded border. */
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.topbar-glass::-webkit-scrollbar {
    display: none;
}

/* Work-order edit page header: the shared back-button (upper-left, same
   as every other page) and the action pill share one row, back button on
   the left and the pill pushed to the right. */
.wo-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.wo-header-row .back-nav {
    margin-bottom: 0;
}
.wo-header-row .wo-topbar {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
}

/* Work-order header: one single-row pill (status text · icon actions ·
   optional highlighted CTA on the far right), no stacked rows and no
   stepper (that lives in the project card instead). */
.wo-topbar {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: .6rem;
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.5rem;
    position: sticky;
    top: calc(var(--up-topbar-h) + .5rem);
    z-index: 1020;
    background: linear-gradient(150deg, rgba(42, 63, 63, 0.18), rgba(42, 63, 63, 0.08));
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid rgba(70, 119, 80, 0.55);
    border-radius: 18px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.2);
    padding: .35rem .5rem .35rem 1.1rem;
}
.wo-topbar-vdivider {
    align-self: stretch;
    width: 1px;
    margin: .2rem 0;
    background: var(--up-green); /* same green as the action buttons' hover ring */
    flex-shrink: 0;
}
.wo-topbar > .wo-status-glass {
    min-width: 0;
    flex-shrink: 0;
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.wo-topbar > .wo-status-glass > .text-center {
    margin-bottom: 0 !important;
    white-space: nowrap;
}
/* Highlighted primary action (e.g. "Confirm Completion"), set apart on the
   far right like a "Save" button, instead of just another icon in the row. */
.wo-topbar-cta {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem 1rem;
    border-radius: 999px;
    border: 1px solid var(--up-green);
    background: transparent;
    color: var(--up-green);
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.wo-topbar-cta:hover,
.wo-topbar-cta:focus {
    background: var(--up-green);
    color: #fff;
    border-color: var(--up-green);
}

/* Status timeline, moved out of the topbar (to keep that narrow) and
   placed inline at the top-left of the project title card instead. */
.wo-stepper-inline {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 1.5rem;
}
.wo-stepper-inline .wo-stepper {
    width: min(260px, 70vw);
    margin-left: 0;
    margin-right: 0;
}
/* Inside the Status History offcanvas: centred, full panel width, with a
   bottom border separating it from the detailed history list below. */
.wo-stepper-inline--panel {
    justify-content: center;
    padding-bottom: 1.25rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--up-border);
}
.wo-stepper-inline--panel .wo-stepper {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 767.98px) {
    /* max-width: 100% only: no overflow clipping here. Clipping (even just
       on one axis) would crop the active step's glow ring, which extends a
       few pixels past the circle itself. A step row that's occasionally a
       little tight on a very small phone is a smaller issue than that. */
    .wo-stepper { max-width: 100%; }
}
/* Circular frosted-glass button (back arrow): same glass as .topbar-glass */
.glass-circle-btn {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #000;
    font-size: 1.05rem;
    text-decoration: none;
    cursor: pointer;
    padding: 0;
    /* same colors as the outlined pill buttons (View full request): white, green outline, black icon */
    background: #fff;
    border: 1px solid var(--up-green);
    transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .2s ease;
}
.glass-circle-btn:hover,
.glass-circle-btn:focus {
    background: var(--up-green-light);
    border-color: var(--up-green);
    color: #000;
}
.glass-circle-btn:focus-visible { box-shadow: 0 0 0 .2rem rgba(70, 119, 80, .25); outline: none; }
.glass-circle-btn--danger {
    color: #b02a37;
    background: linear-gradient(150deg, rgba(176, 42, 55, 0.18), rgba(176, 42, 55, 0.07));
    border-color: rgba(176, 42, 55, 0.55);
}
.glass-circle-btn--danger:hover,
.glass-circle-btn--danger:focus {
    background: #b02a37;
    border-color: #b02a37;
    color: #fff;
}
.glass-circle-btn:disabled,
.glass-circle-btn[disabled] {
    opacity: .4;
    pointer-events: none;
}

/* Row of standalone circle buttons in a page header (top-right) */
.topbar-glass-row {
    display: inline-flex;
    align-items: flex-start;
    gap: .65rem;
    flex-wrap: wrap;
}
.icon-label-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    text-decoration: none;
    color: inherit;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    font: inherit;
}
.icon-label-text {
    font-size: .68rem;
    font-weight: 600;
    color: var(--up-green);
    line-height: 1;
    white-space: nowrap;
}
.icon-label-btn:has(.glass-circle-btn--danger) .icon-label-text {
    color: #b02a37;
}
.topbar-glass-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 0 .18rem;
    color: #000; /* same colors as the outlined pill buttons (View All, Export) */
    line-height: 1;
    text-decoration: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    font: inherit;
    flex-shrink: 0;
}
.topbar-glass-btn .tg-icon {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: .9rem;
    transition: background-color .15s ease, color .15s ease;
}
.topbar-glass-btn:hover .tg-icon,
.topbar-glass-btn:focus .tg-icon {
    background: var(--up-green-light);
    color: #000;
    /* inset ring: an outer ring would be clipped by the toolbar's overflow */
    box-shadow: inset 0 0 0 1px var(--up-green);
}
.topbar-glass-btn .tg-label {
    font-size: .66rem;
    font-weight: 600;
}
/* Destructive action in the pill (Clear All) */
.topbar-glass-btn--danger { color: #b02a37; }
.topbar-glass-btn--danger:hover .tg-icon,
.topbar-glass-btn--danger:focus .tg-icon {
    background: #b02a37;
    color: #fff;
    box-shadow: none;
}
/* Highlighted call-to-action button in the action pill (requester "Confirm") */
.topbar-glass-btn--cta .tg-icon {
    background: var(--up-green);
    color: #fff;
    box-shadow: 0 0 0 3px rgba(70, 119, 80, .35);
}
.topbar-glass-btn--cta:hover .tg-icon,
.topbar-glass-btn--cta:focus .tg-icon {
    background: #164821;
    color: #fff;
}
.topbar-glass-btn--cta .tg-label { color: var(--up-green); }

/* "More actions" (3-dot) menus: dark teal card, white text, visible hover.
   Uses Bootstrap 5's dropdown CSS variables so every state (hover, active,
   the border, the divider) stays consistent automatically. */
.dropdown-menu {
    --bs-dropdown-bg: var(--up-dark-teal);
    --bs-dropdown-border-color: var(--up-dark-teal);
    --bs-dropdown-link-color: #fff;
    --bs-dropdown-link-hover-color: #fff;
    --bs-dropdown-link-hover-bg: rgba(255, 255, 255, .18);
    --bs-dropdown-link-active-color: #fff;
    --bs-dropdown-link-active-bg: rgba(255, 255, 255, .28);
    --bs-dropdown-divider-bg: rgba(255, 255, 255, .25);
}
.dropdown-menu .dropdown-item i {
    color: inherit;
}
/* Keep "Delete" items white too (icon + label already signal danger) instead
   of Bootstrap's red utility text, which would fight the dark teal card. */
.dropdown-menu .dropdown-item.text-danger {
    color: #fff !important;
}

/* Table row actions: plain icon, no box, dark teal, circular hover.
   Same class for the "more actions" (3-dot) trigger and any lone action
   button (e.g. a table row with only a View action), so every action in
   every table reads the same regardless of how many actions it opens. */
.row-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--up-dark-teal);
    border-radius: 50%;
    font-size: 1.05rem;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
.row-action-btn:hover,
.row-action-btn:focus {
    background-color: var(--up-green-light);  /* same hover as the outline buttons (e.g. Work Order Report) */
    color: #000;
    box-shadow: inset 0 0 0 1px var(--up-green);  /* green outline, like the report button */
}

/* Small dot on the 3-dot trigger flagging a work order ready to confirm completion */
.row-action-flag {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--up-green);
    border: 1.5px solid #fff;
    pointer-events: none;
}

/* "View All" card-header link: rounder pill, dark teal on hover */
.view-all-btn {
    border-radius: 50rem;
}
.view-all-btn:hover,
.view-all-btn:focus {
    background-color: var(--up-dark-teal);
    border-color: var(--up-dark-teal);
    color: #fff;
}

/* Underline-style filter tabs (e.g. Request Count By Category) */
.org-tab-filter {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    border-bottom: 1px solid #dee2e6;
}
.org-tab-btn {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: .4rem .1rem .5rem;
    font-size: .85rem;
    font-weight: 600;
    color: #6c757d;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
}
.org-tab-btn:hover {
    color: var(--up-dark-teal);
}
.org-tab-btn.active {
    color: var(--up-dark-teal);
    border-bottom-color: var(--up-dark-teal);
}

/* Request Count By Category: expandable unit rows listing their requesters */
.org-unit-row { cursor: pointer; }
.org-unit-row:focus-visible { outline: 2px solid var(--up-dark-teal); outline-offset: -2px; }
.org-unit-chevron {
    display: inline-block;
    font-size: .7rem;
    color: var(--up-text-muted);
    transition: transform .15s ease;
}
.org-unit-row.expanded .org-unit-chevron { transform: rotate(90deg); }
.org-requester-row td { background: #f8faf9; }

/* Frosted-glass modal (e.g. Confirm Completion) */
.modal-glass {
    background: linear-gradient(150deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, .62));
    -webkit-backdrop-filter: blur(24px) saturate(170%);
    backdrop-filter: blur(24px) saturate(170%);
    border: 1px solid #6c757d;
    border-radius: 18px;
    box-shadow:
        0 24px 60px rgba(15, 23, 42, .28),
        inset 0 1px 0 rgba(255, 255, 255, .65);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .modal-glass { background: rgba(255, 255, 255, .96); }
}

/* Work-order status container: same glass treatment as .topbar-glass,
   shrink-wrapped around the stepper and centered in the top row. */
.wo-status-glass {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: .8rem 1.5rem .5rem;
    background: linear-gradient(150deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.07));
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid rgba(0, 0, 0, 0.55);
    border-radius: 14px;
    box-shadow:
        0 6px 18px rgba(15, 23, 42, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.wo-stepper {
    display: flex;
    align-items: flex-start;
    padding: 4px 20px 0;   /* room for the first and last captions, which overhang their nodes */
    box-sizing: border-box;
    gap: 0;
    /* .wo-status-glass shrink-wraps to content, so max-width alone is just a
       ceiling nothing ever grows into: an explicit width (capped so it never
       overflows a narrow screen) is what actually makes the connecting
       lines (flex: 1) stretch out. Kept close to the action-button row's
       own natural width below it, instead of forcing the whole card wider
       than the buttons actually need. */
    width: min(300px, 88vw);
    max-height: 120px;
    margin-left: auto;
    margin-right: auto;
    transition: max-height .22s ease, max-width .22s ease, width .22s ease, opacity .18s ease, margin .22s ease;
}
/* Progress-track stepper: a thick track with a round node per step, each
   holding that step's own icon (filled = done or current, grey = still to
   come), and the label underneath. Each .wo-step is only as wide as its node
   so the track runs node to node; the label overflows it, centred. */
.wo-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    width: 30px;
}
.wo-step-circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #cdd8d1;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: .9rem;
    line-height: 1;
    position: relative;
    z-index: 1;
    transition: background .2s, box-shadow .2s;
}
.wo-step.done .wo-step-circle,
.wo-step.active .wo-step-circle { background: var(--up-dark-teal); }
.wo-step.active .wo-step-circle { box-shadow: 0 0 0 4px rgba(70,119,80,.55); }
.wo-step-label {
    font-size: .66rem;
    font-weight: 700;
    line-height: 1.15;
    color: #7a857e;
    width: 58px;
    text-align: center;
}
.wo-step.active .wo-step-label { color: var(--up-dark-teal); }
.wo-step.done .wo-step-label   { color: var(--up-dark-teal); }

.wo-step-line {
    flex: 1;
    height: 6px;
    background: #cdd8d1;
    margin: 12px -2px 0;
    min-width: 12px;
    transition: background .2s;
}
.wo-step-line.done { background: var(--up-dark-teal); }

@media (max-width: 575.98px) {
    .wo-step        { width: 26px; }
    .wo-step-circle { width: 26px; height: 26px; font-size: .78rem; }
    .wo-step-line   { margin-top: 10px; }
    .wo-step-label  { font-size: .56rem; width: 52px; }
}

/* ============================================================
   WORK TASKS: one auto-saving row per task
   ============================================================ */
.wo-tasks {
    display: flex;
    flex-direction: column;
    gap: .45rem;
}
.wo-task {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.wo-task .task-num {
    flex-shrink: 0;
    min-width: 20px;
    font-size: .78rem;
    font-weight: 700;
    color: #8a8f8a;
    text-align: right;
}
.wo-task .task-label-input {
    flex: 1 1 auto;
    min-width: 0;
}
.wo-task .task-label-input:focus {
    border-color: var(--up-green);
    box-shadow: 0 0 0 .18rem rgba(70, 119, 80, .15);
}
.wo-task.is-done .task-label-input {
    text-decoration: line-through;
    color: #8a8f8a;
    background: #f0fdf4;
    border-color: #cbe4d3;
}
.wo-task .done-at {
    flex-shrink: 0;
    font-size: .72rem;
    white-space: nowrap;
    color: #8a8f8a;
}
.wo-task .task-toggle-btn {
    flex-shrink: 0;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
}
.wo-task .task-toggle-btn:disabled {
    opacity: .4;
    cursor: default;
}
.wo-task .remove-task-btn {
    flex-shrink: 0;
    line-height: 1;
    font-size: .8rem;
}

/* Sign-up email verification code */
.signup-code { letter-spacing: .5em; padding-left: .5em; }

/* Live password requirements checklist (assets/app.js: data-pwd-rules) */
.pwd-rules { list-style: none; padding: 0; margin: .6rem 0 .25rem; display: grid; gap: .3rem; font-size: .85rem; color: #6b7280; }
.pwd-rules li { display: flex; align-items: center; gap: .5rem; }
.pwd-rules li i { font-size: 1rem; line-height: 1; }
.pwd-rules li.is-ok { color: #1f2937; }
.pwd-rules li.is-ok i { color: #198754; }
.pwd-rules.show-errors li:not(.is-ok) { color: #dc3545; }
@media (min-width: 576px) { #pwdFieldRules .pwd-rules { grid-template-columns: 1fr 1fr; } }

/* All text fields and dropdowns: the same soft-gray fill and border as the
   Office Action / Timeline inputs, turning white on focus. (The sign-in /
   sign-up pages keep their own .auth-card style.) */
.form-control,
.form-select,
.input-group-text {
    background-color: #f4f6f5;
    border-color: #c7d2cb;
}
.input-group-text { color: var(--up-text-muted); }
.form-control:focus,
.form-select:focus {
    background-color: #fff;
    border-color: var(--up-green);
}

/* Work order information card: control number in the page font, not monospace */
.hcard-header code { font-family: inherit; }


/* "· Requested Sep 30, 2026" beside the control number */
.hcard-meta {
    font-size: .875em;
    color: var(--up-text-muted);
    margin-left: .25rem;
}

/* Information card: Purpose / Description under the fields */
.wo-narrative {
    display: grid;
    gap: 1.1rem 1.75rem;
}
/* Purpose on the left, Description on the right (stacked on phones) */
@media (min-width: 768px) {
    .wo-narrative { grid-template-columns: 1fr 1fr; }
}
.hcard-grid .wo-narrative .hcard-value { font-weight: 500; line-height: 1.5; }
.hcard-grid .hcard-value.wo-clamp {  /* beats .hcard-grid .hcard-value { display: block } */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}
.hcard-grid .hcard-value.wo-clamp.is-open { display: block; }
.wo-more {
    background: none;
    border: 0;
    padding: 0;
    margin-top: .15rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--up-green);
}
.wo-more:hover { text-decoration: underline; }

/* Picture documentation: small clickable thumbnails */
.wo-thumbs { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .25rem; }
.wo-thumb {
    width: 64px;
    height: 64px;
    border-radius: .5rem;
    overflow: hidden;
    border: 1px solid var(--up-border);
    background: #f4f6f5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--up-text-muted);
    font-size: 1.4rem;
}
.wo-thumb img { width: 100%; height: 100%; object-fit: cover; }
.wo-thumb:hover { border-color: var(--up-green); }

/* Remarks inside the timeline block, under Actual (full width of the block) */
.oa-remarks {
    grid-column: 1 / -1;
    border-top: 1px solid var(--up-border);
    padding-top: 1.1rem;
}

/* Divider between the basic info fields and Purpose / Description / Pictures */
.hcard-grid > .wo-narrative {
    border-top: 1px solid var(--up-border);
    padding-top: 1.1rem;
}

/* Picture documentation as a gallery strip: large rounded photos at their
   natural shape, side by side in a soft container (scrolls sideways if many) */
.wo-thumbs {
    display: flex;
    flex-wrap: nowrap;
    gap: .6rem;
    overflow-x: auto;
    padding: .6rem;
    background: #f4f6f5;
    border-radius: 16px;
    scrollbar-width: thin;
}
.wo-thumb {
    flex: 0 0 auto;
    width: auto;
    height: 150px;
    max-width: 280px;
    border-radius: 12px;
    border: 0;
    background: #e3e8e5;
}
.wo-thumb img { width: auto; height: 100%; max-width: 280px; object-fit: cover; }
.wo-thumb:hover img { opacity: .9; }
/* PDFs: a tile the same height */
.wo-thumb.wo-thumb-file { width: 115px; font-size: 2.2rem; }
@media (max-width: 575.98px) {
    .wo-thumb { height: 120px; }
}

/* Wide screens: fields 3 x 2, a divider, then Purpose | Description and the
   pictures below them on the left; Proposed, Actual and Remarks stacked in
   the right column */
@media (min-width: 1200px) {
    .hcard-grid:has(> .oa-split) {
        grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 2fr);
    }
    .hcard-grid > .oa-split {
        grid-column: 4;
        grid-row: 1 / span 3;  /* beside the two field rows + Purpose / Description */
        grid-template-columns: 1fr;
        align-content: start;  /* keep Proposed, Actual and Remarks together at the top */
        border-bottom: 0;
        padding-bottom: 0;
        border-left: 1px solid var(--up-border);
        padding-left: 1.75rem;
    }
    .hcard-grid:has(> .oa-split) > .wo-narrative,
    .hcard-grid:has(> .oa-split) > .wo-thumbs-row { grid-column: 1 / span 3; }
    /* with pictures, the right column also runs beside them */
    .hcard-grid:has(> .wo-thumbs-row) > .oa-split { grid-row: 1 / span 4; }
}

/* ============================================================
   Update Work Order (Director): bento layout
   One white panel; soft rounded tiles; round icon buttons
   ============================================================ */
.bento {
    background: #fff;
    border: 1px solid var(--up-border);
    border-radius: 24px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
    padding: 1.5rem;
    margin-bottom: 1rem;
}
.bento-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.bento-title { font-size: 1.35rem; font-weight: 600; margin: 0 0 .2rem; color: #1f2937; }
.bento-sub { display: flex; align-items: center; flex-wrap: wrap; gap: .15rem; }
.bento-head-actions { display: flex; gap: .5rem; flex-shrink: 0; }
.bento-icon-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #d5dcd8;
    background: #fff;
    color: #1f2937;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    text-decoration: none;
    transition: background .15s, border-color .15s;
}
.bento-icon-btn:hover { background: #f4f6f5; border-color: var(--up-green); color: #1f2937; }
.bento-notice {
    background: #f4f6f5;
    border-left: 3px solid var(--up-green);
    border-radius: 12px;
    padding: .85rem 1rem;
    margin-bottom: 1rem;
}

/* Columns: Work Tasks | main | side */
.bento-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
.bento-col { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
@media (min-width: 1200px) {
    .bento-grid { grid-template-columns: minmax(0, 1fr) 300px; }
    .bento-grid.has-tasks { grid-template-columns: 280px minmax(0, 1fr) 300px; }
}
@media (max-width: 1199.98px) {
    /* phones/tablets: status and personnel first, then the details, then tasks */
    .bento-col--side  { order: -1; }
    .bento-col--tasks { order: 1; }
}

/* Tiles */
.bento-tile {
    background: #f4f6f5;
    border-radius: 20px;
    padding: 1.15rem 1.25rem;
    min-width: 0;
}
.bento-tile--tall { height: 100%; }
.bento-tile-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .75rem; }
.bento-tile-head .bento-tile-title { margin-bottom: 0; }
.bento-tile-title { font-size: 1.05rem; font-weight: 500; color: #1f2937; margin: 0 0 .85rem; }
.bento-chip {
    display: inline-block;
    background: #fff;
    border: 1px solid #d5dcd8;
    border-radius: 999px;
    padding: .2rem .7rem;
    font-size: .8rem;
    font-weight: 600;
    color: #1f2937;
}
.bento-pair { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .bento-pair { grid-template-columns: 1fr 1fr; } }
.bento-pair > .bento-tile:only-child { grid-column: 1 / -1; }

/* Fields inside tiles (same label/value style as the info card) */
.bento-fields { display: grid; gap: 1rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.bento-fields--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bento-fields .hcard-label { display: block; font-size: .78rem; color: var(--up-text-muted); font-weight: 500; margin-bottom: .25rem; }
.bento-fields .hcard-value { display: block; font-size: .95rem; font-weight: 600; color: #1f2937; overflow-wrap: anywhere; }
.bento-text { font-size: .95rem; font-weight: 500; line-height: 1.5; color: #1f2937; }
.bento-text.wo-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.bento-text.wo-clamp.is-open { display: block; }

/* Inputs sit white on the gray tiles */
.bento-tile .form-control,
.bento-tile .form-select { background-color: #fff; }
.bento-tile .form-control.bento-readonly { background-color: #fff; }
.bento-date-grid { display: grid; gap: .75rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bento-date-grid .form-label { color: var(--up-text-muted); margin-bottom: .25rem; }
@media (max-width: 575.98px) { .bento-date-grid { grid-template-columns: 1fr 1fr; } }

/* Work Tasks as cards */
.bento-tasks { display: flex; flex-direction: column; gap: .5rem; margin-top: .85rem; }
.bento-tasks .wo-task {
    background: #fff;
    border-radius: 14px;
    padding: .6rem .7rem;
    border: 1px solid transparent;
}
.bento-tasks .wo-task.is-done { border-color: #d5e7da; }
.bento-task-ro {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    background: #fff;
    border-radius: 14px;
    padding: .6rem .8rem;
    font-size: .92rem;
}
.bento-task-ro.is-done span { color: var(--up-text-muted); }

.bento .wo-doc-foot { margin-top: 1.25rem; }
/* Proposed / Actual: Start | Finish, Duration on its own row (dates need the width) */
.bento-date-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bento-date-grid .form-control { min-width: 0; }
.bento-date-grid > div:last-child { grid-column: 1 / -1; }
/* "No tasks yet" hint shows only while the list is empty */
.bento-empty:has(+ .bento-tasks .wo-task) { display: none; }
/* Request Details: 3 x 2 (2 columns on phones) */
.bento-fields--details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 576px) { .bento-fields--details { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Picture Documentation tile: pictures centered in their container
   ("safe" keeps the first one visible when the strip overflows and scrolls) */
.bento-tile .wo-thumbs { justify-content: safe center; }
/* Bento header: a little larger title, control no., status and % */
.bento-sub { gap: .35rem; margin-top: .15rem; }
.bento-sub code { font-size: .95rem; }
.bento-sub .badge { font-size: .85rem; padding: .4em .75em; }
.bento-sub .small { font-size: .95rem; }
/* Work Orders list: ⋮ menu sized to sit beside the small Work Order Report pill */
.bento-icon-btn.list-more-btn { width: 32px; height: 32px; font-size: .95rem; }
/* Round icon buttons (Update Work Order header, Work Orders list ⋮): green border */
.bento-icon-btn { border-color: var(--up-green); }

/* View Work Order: Picture Documentation | Related Files side by side */
.vr-media {
    margin-top: 1.25rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--up-border);
}
.vr-media-label {
    display: block;
    font-size: .78rem;
    font-weight: 500;
    color: var(--up-text-muted);
    margin-bottom: .4rem;
}
/* View Work Order media: fixed 3-column grid (max 3 files each), no scrolling */
.vr-media .wo-thumbs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible;
}
.vr-media .wo-thumb {
    width: 100%;
    height: auto;
    max-width: none;
    aspect-ratio: 4 / 3;
}
.vr-media .wo-thumb img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.vr-media .wo-thumb.wo-thumb-file { width: 100%; }
/* empty side of the Picture Documentation | Related Files row */
.vr-media-empty {
    margin: 0;
    padding: 1.25rem 1rem;
    background: #f4f6f5;
    border-radius: 16px;
    color: var(--up-text-muted);
    font-size: .9rem;
    text-align: center;
}
/* "n/1000" under text areas with a character limit */
.char-counter { font-size: .75rem; color: var(--up-text-muted); text-align: right; margin-top: .2rem; }
.char-counter.is-near { color: #b45309; font-weight: 600; }
/* Work Tasks column: the done timestamp gets its own line under the task so the
   name keeps its width; the column is a bit wider for longer task names */
.bento-tasks .wo-task { flex-wrap: wrap; row-gap: .15rem; }
.bento-tasks .wo-task .done-at {
    order: 10;
    flex-basis: 100%;
    padding-left: calc(20px + .5rem);  /* line up under the task name */
}
@media (min-width: 1200px) {
    .bento-grid.has-tasks { grid-template-columns: 320px minmax(0, 1fr) 300px; }
}
.bento-tasks .wo-task .task-label-input { flex: 1 1 0; }  /* share the row with number + buttons; only the timestamp wraps */

/* Right (actions) column: Related Files previews sized for the narrow column */
.bento-col--side #relGrid > [class*="col-"] { flex: 0 0 33.333%; max-width: 33.333%; }
.bento-col--side .rel-thumb-img,
.bento-col--side .rel-thumb .rel-pdf-tile { height: 84px; }
.bento-col--side .pic-dropzone small { font-size: .7rem; }
/* Update Work Order: Picture Documentation as a fixed 3-column grid (max 3 pictures), no scrolling */
.bento-tile .wo-thumbs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible;
}
.bento-tile .wo-thumb {
    width: 100%;
    height: auto;
    max-width: none;
    aspect-ratio: 4 / 3;
}
.bento-tile .wo-thumb img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.bento-tile .wo-thumb.wo-thumb-file { width: 100%; }
/* ...centered: each picture keeps a fixed third of the width, 1–2 pictures sit in the middle */
.bento-tile .wo-thumbs { display: flex; justify-content: center; }
.bento-tile .wo-thumb { flex: 0 0 calc((100% - 1.2rem) / 3); }  /* 3 across with the .6rem gaps */
/* "Requested Sep 29, 2026" on its own line under the control number */
.hcard-meta-line { font-size: .875rem; color: var(--up-text-muted); margin-top: .15rem; }
/* Round icon buttons: same hover / open state as the outline buttons (e.g. Work Order Report) */
.bento-icon-btn:hover,
.bento-icon-btn.show,
.bento-icon-btn:active,
.bento-icon-btn:focus-visible { background: var(--up-green-light); border-color: var(--up-green); color: #000; }
/* View Work Order header: status + % centered between the title and the actions */
.vr-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.vr-head > :last-child { justify-self: end; }
.vr-head-status { display: flex; align-items: center; gap: .25rem; }
@media (max-width: 767.98px) {
    .vr-head { grid-template-columns: 1fr auto; }
    .vr-head-status { grid-column: 1 / -1; grid-row: 2; }
}
/* Plain notice tile (e.g. Declined on My Requests): soft gray, rounded, no icon or colored edge */
.notice-tile {
    background: #fff;  /* plain white card */
    box-shadow: 0 4px 14px rgba(0, 0, 0, .09);  /* same shadow as the other cards */
    font-size: 1.02rem; /* a little larger than body-small text */
    border-radius: 20px;
    padding: 1.15rem 1.25rem;
}
/* message left, action button right (stacks on phones) */
.notice-tile--row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.notice-tile--row > .btn { flex-shrink: 0; }
/* View Work Order: control no. + status badge + % on one line (like Update Work Order) */
.vr-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
/* a little space between the title and the control no. line (View + Update Work Order) */
.hcard-header .vr-title-row { margin-top: .35rem; }
.bento-head .bento-sub { margin-top: .35rem; }
/* Update Work Order: Related Files thumbnails in the same 4:3 shape as Picture Documentation */
.bento-tile .rel-thumb-img,
.bento-tile .rel-thumb .rel-pdf-tile { height: auto; aspect-ratio: 4 / 3; }
/* ...and the same grid: 3 per row, centered, like Picture Documentation */
.bento-tile .row.g-2 { justify-content: center; }
.bento-tile .row.g-2 > [class*="col-"] { flex: 0 0 33.333%; max-width: 33.333%; }
.bento-tile .wo-thumbs { padding: 0; background: none; gap: .5rem; }  /* same edges and gaps as the Related Files grid */
.bento-tile .wo-thumb { flex-basis: calc((100% - 1rem) / 3); }
/* read-only task list: the done date under each finished task */
.bento-task-ro .done-at { font-size: .72rem; color: #8a8f8a; margin-top: .1rem; }

/* Dropdown (select) menus styled like the Bootstrap dropdowns (e.g. Work Order
   Report): dark teal list, white text, soft white highlight. Uses Chrome's
   customizable <select> (appearance: base-select); other browsers keep the
   native list. The closed field keeps its normal .form-select look. */
@supports (appearance: base-select) {
    select.form-select,
    select.form-select::picker(select) { appearance: base-select; }
    select.form-select::picker-icon { display: none; }   /* Bootstrap already draws the arrow */
    select.form-select::picker(select) {
        background: var(--up-dark-teal);
        border: 1px solid var(--up-dark-teal);
        border-radius: .5rem;
        padding: .25rem;
        box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
        margin-top: .15rem;
    }
    select.form-select option {
        color: #fff;
        background: transparent;
        padding: .4rem .75rem;
        border-radius: .35rem;
        font-size: inherit;
    }
    select.form-select option::checkmark { display: none; }
    select.form-select option:hover,
    select.form-select option:focus-visible { background: rgba(255, 255, 255, .18); outline: none; }
    select.form-select option:checked { background: rgba(255, 255, 255, .28); }
    select.form-select option:disabled { color: rgba(255, 255, 255, .45); }
}

/* Search boxes and filter dropdowns: same hover as the outline buttons
   (e.g. Work Order Report) — light green fill, green border. While typing
   (focus) the field stays white so the text is easy to read. */
.form-select-sm:hover:not(:focus),
.input-group-sm:hover > .form-control:not(:focus),
.input-group-sm:hover > .form-select:not(:focus),
.input-group-sm:hover > .input-group-text {
    background-color: var(--up-green-light);
    border-color: var(--up-green);
}
.form-select-sm,
.input-group-sm > .form-control,
.input-group-sm > .form-select,
.input-group-sm > .input-group-text { transition: background-color .15s, border-color .15s; }

/* Narrower screens (e.g. laptops): keep pictures and dates readable.
   Thumbnails never shrink below 140px — 3 per row when there's room, else 2;
   Start / Finish stack when the tile is too narrow for both dates. */
.bento-tile .wo-thumb { flex-basis: max(calc((100% - 1rem) / 3), 140px); }
.bento-tile .row.g-2 > [class*="col-"] { flex-basis: max(33.333%, 148px); max-width: max(33.333%, 148px); }
.bento-date-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* Bento on laptop-size screens: side columns flex (220–300px) so the middle
   keeps room, and the middle's paired tiles stack when it gets narrow
   (container queries react to the middle column's own width). */
@media (min-width: 1200px) {
    .bento-grid           { grid-template-columns: minmax(0, 1fr) minmax(230px, 300px); }
    .bento-grid.has-tasks { grid-template-columns: minmax(220px, 300px) minmax(0, 1fr) minmax(230px, 300px); }
}
.bento-col--main { container-type: inline-size; }
@container (max-width: 620px) {
    .bento-pair { grid-template-columns: 1fr; }
}
@container (max-width: 480px) {
    .bento-fields--details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* refine: thumbnails wrap (2 per row when narrow, min 110px); pairs stack only below 520px */
.bento-tile .wo-thumbs { flex-wrap: wrap; }
.bento-tile .wo-thumb { flex-basis: max(calc((100% - 1rem) / 3), 110px); }
.bento-tile .row.g-2 > [class*="col-"] { flex-basis: max(33.333%, 118px); max-width: max(33.333%, 118px); }
@container (min-width: 520px) {
    .bento-pair { grid-template-columns: 1fr 1fr; }
}

/* Update Work Order: Picture Documentation and Related Files as a real grid —
   columns 110–200px (3 across when there's room, 2 when narrow), rows line up,
   a short set is centered as a block */
.bento-tile .wo-thumbs,
.bento-tile .row.g-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 200px));
    justify-content: center;
    gap: .5rem;
    margin: 0;
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
}
.bento-tile .wo-thumb,
.bento-tile .row.g-2 > [class*="col-"] {
    flex: none;
    width: auto;
    max-width: none;
    padding: 0;
    margin: 0;
}
/* final: fixed-column grid — 3 equal columns, 2 when the tile is under 300px;
   unused columns collapse so 1–2 items stay centered */
.bento-pair > .bento-tile { container-type: inline-size; }
.bento-tile .wo-thumbs,
.bento-tile .row.g-2 { grid-template-columns: repeat(auto-fit, calc((100% - 1rem) / 3)); }
@container (max-width: 300px) {
    .bento-tile .wo-thumbs,
    .bento-tile .row.g-2 { grid-template-columns: repeat(auto-fit, calc((100% - .5rem) / 2)); }
}

/* Sign-up code notice: the sentence wraps as one block (not one flex item per piece) */
.auth-card-notice > span { min-width: 0; overflow-wrap: anywhere; }

/* Tables that scroll sideways (phones): headers stay on one line instead of breaking
   mid-word, and the "no records" message starts at the left so it isn't cut off */
.table-responsive .table thead th { white-space: nowrap; }
@media (max-width: 767.98px) {
    .table-responsive .table td[colspan] { text-align: left !important; }
}

/* Update Work Order: Picture Documentation back to the gallery strip (photos at
   their natural shape, 150px tall, centered in a white container, scrolls sideways
   if needed). Related Files keeps its grid. */
.bento .bento-tile .wo-thumbs {
    display: flex;
    flex-wrap: nowrap;
    justify-content: safe center;
    gap: .6rem;
    overflow-x: auto;
    padding: .6rem;
    background: #fff;
    border-radius: 16px;
}
.bento .bento-tile .wo-thumb {
    flex: 0 0 auto;
    width: auto;
    height: 150px;
    max-width: 280px;
    aspect-ratio: auto;
}
.bento .bento-tile .wo-thumb img { width: auto; height: 100%; max-width: 280px; }
.bento .bento-tile .wo-thumb.wo-thumb-file { width: 115px; }

/* Update Work Order: Related Files as three tall thumbnails across (160px), the earlier clean look */
.bento .bento-tile .row.g-2 { grid-template-columns: repeat(3, minmax(0, 1fr)); justify-content: stretch; }
.bento .bento-tile .rel-thumb-img,
.bento .bento-tile .rel-thumb .rel-pdf-tile { height: 160px; aspect-ratio: auto; }

/* Update Work Order: Picture Documentation stacked vertically (one photo per row,
   a little shorter so up to three fit), no sideways scrolling */
.bento .bento-tile .wo-thumbs {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow: visible;
}
.bento .bento-tile .wo-thumb { height: 120px; max-width: 100%; }
.bento .bento-tile .wo-thumb img { max-width: 100%; }
/* ...each stacked photo fills the container's width (cropped to fit) */
.bento .bento-tile .wo-thumbs { align-items: stretch; }
.bento .bento-tile .wo-thumb,
.bento .bento-tile .wo-thumb.wo-thumb-file { width: 100%; max-width: none; height: 120px; }
.bento .bento-tile .wo-thumb img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
/* ...but when Picture Documentation has the whole row to itself (no Related Files tile
   beside it, e.g. while Pending) the photos run left to right, sharing the width equally,
   instead of stacking as very wide strips. They wrap onto a new row on a narrow screen. */
.bento .bento-pair > .bento-tile:only-child .wo-thumbs {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;   /* one or two photos sit in the middle */
}
.bento .bento-pair > .bento-tile:only-child .wo-thumb,
.bento .bento-pair > .bento-tile:only-child .wo-thumb.wo-thumb-file {
    flex: 1 1 160px;
    width: auto;
    max-width: 480px;
    height: 200px;
}

/* Update Work Order: locked Related Files (Validating / Completed) laid out like Picture
   Documentation beside it — white container, one file per row, 120px tall, full width.
   The editable grid (In Progress) keeps its three-across thumbnails. */
.bento .bento-tile .row.g-2.rel-stack {
    grid-template-columns: 1fr;
    gap: .6rem;
    padding: .6rem;
    background: #fff;
    border-radius: 16px;
}
.bento .bento-tile .rel-stack .rel-thumb,
.bento .bento-tile .rel-stack .rel-thumb-img { border-radius: 12px; }
.bento .bento-tile .rel-stack .rel-thumb-img,
.bento .bento-tile .rel-stack .rel-thumb .rel-pdf-tile { height: 120px; }
/* alone in its row: left to right, like the pictures */
.bento .bento-pair > .bento-tile:only-child .row.g-2.rel-stack {
    grid-template-columns: repeat(auto-fit, minmax(160px, 480px));
    justify-content: center;
}
.bento .bento-pair > .bento-tile:only-child .rel-stack .rel-thumb-img,
.bento .bento-pair > .bento-tile:only-child .rel-stack .rel-thumb .rel-pdf-tile { height: 200px; }

/* Read-only Proposed / Actual (e.g. while Validating): Start | Finish on one row,
   Duration underneath — same arrangement as the editable version */
.bento-fields.bento-fields--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bento-fields.bento-fields--3 > div:last-child { grid-column: 1 / -1; }

/* ============================================================
   Director dashboard: bento layout
   One white panel; cards become soft tiles; order by priority:
   stats | Pending Approval + Status | Rework + For Validation |
   Monthly chart + Category. (Markup order is unchanged; CSS grid
   + order place the cards.)
   ============================================================ */
.director-dashboard {
    background: #fff;
    border: 1px solid var(--up-border);
    border-radius: 24px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
    padding: 1.5rem;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1rem;
}
.director-dashboard > * { grid-column: 1 / -1; margin-bottom: 0 !important; }
.director-dashboard > .row { display: contents; }
.director-dashboard > .row > [class*="col-"] {
    grid-column: 1 / -1;
    width: auto;
    max-width: none;
    padding: 0;
    margin: 0;
    min-width: 0;
}
.director-dashboard > .stat-group { order: 1; }
/* Director / Head: monthly chart + status donut, then Rework Requested + category.
   Personnel: Rework Requested (full width). (Pending and Validating are reached from the stat tiles.) */
.director-dashboard .dash-monthly    { order: 2; }
.director-dashboard .dash-status     { order: 3; }
.director-dashboard .dash-rework     { order: 4; }
.director-dashboard .dash-validation { order: 5; }
.director-dashboard .dash-category   { order: 6; }
@media (min-width: 992px) {
    .director-dashboard > .row > .dash-monthly { grid-column: span 7; }
    .director-dashboard > .row > .dash-status  { grid-column: span 5; }
    .director-dashboard > .row > .dash-rework,
    .director-dashboard > .row > .dash-validation,
    .director-dashboard > .row > .dash-category { grid-column: span 6; }
    .director-dashboard > .row > .dash-full { grid-column: 1 / -1; }
}
@media (max-width: 575.98px) { .director-dashboard { padding: 1rem; border-radius: 20px; } }

/* Tiles */
.director-dashboard .card,
.director-dashboard .stat-group--boxed {
    background: #f4f6f5;
    border: 0;
    border-radius: 20px;
    box-shadow: none;
    overflow: hidden;
}
.director-dashboard .card-header {
    background: transparent;
    border-bottom: 0;
    padding: 1.15rem 1.25rem .6rem;
    font-size: 1.05rem;
}
.director-dashboard .card-header .fw-semibold { font-weight: 500 !important; color: #1f2937; }
.director-dashboard .stat-group-title { font-size: 1.05rem; font-weight: 500; color: #1f2937; }

/* Stat tiles: white, clickable */
.director-dashboard .stat-strip { gap: .75rem; background: transparent; border: 0; border-radius: 0; overflow: visible; }
.director-dashboard .stat-strip-item {
    background: #fff;
    border-radius: 14px;
    padding: .9rem .5rem;
    text-decoration: none;
    border: 1px solid transparent;
    transition: border-color .15s, background-color .15s;
}
.director-dashboard a.stat-strip-item:hover { border-color: var(--up-green); background: var(--up-green-light); }
.director-dashboard .stat-strip-value { font-size: 1.5rem; margin-bottom: .25rem; }

/* Tables sit on a white rounded block inside the gray tile */
.director-dashboard .card > .table-responsive {
    background: #fff;
    border-radius: 14px;
    margin: 0 1rem 1rem;
}
.director-dashboard .card > .table-responsive .table { --bs-table-bg: transparent; }
.director-dashboard .card > .table-responsive thead th { background: transparent !important; }

/* Director dashboard: stronger contrast — darker tiles with a hairline border,
   bolder dark titles, white inner blocks with a soft shadow */
.director-dashboard .card,
.director-dashboard .stat-group--boxed {
    background: #e6ebe8;
    border: 1px solid #d3dbd6;
}
.director-dashboard .card-header .fw-semibold,
.director-dashboard .stat-group-title { font-weight: 600 !important; color: #111827; }
.director-dashboard .stat-strip-item,
.director-dashboard .card > .table-responsive {
    border: 1px solid #d3dbd6;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}
.director-dashboard .stat-strip-label { color: #111827; font-weight: 600; }
.director-dashboard .text-muted { color: #3f4a45 !important; }
.director-dashboard .card > .table-responsive thead th { color: #111827; }
/* charts and the category table on a white block too */
.director-dashboard .card > .card-body {
    background: #fff;
    border: 1px solid #d3dbd6;
    border-radius: 14px;
    margin: 0 1rem 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}

/* Director dashboard: sage green tiles */
.director-dashboard .card,
.director-dashboard .stat-group--boxed {
    background: #d6e2d5;
    border-color: #bccdbb;
}
.director-dashboard .stat-strip-item,
.director-dashboard .card > .table-responsive,
.director-dashboard .card > .card-body { border-color: #bccdbb; }

/* Director dashboard: sage panel, white tiles inside */
.director-dashboard { background: #d6e2d5; border-color: #bccdbb; }
.director-dashboard .card,
.director-dashboard .stat-group--boxed {
    background: #fff;
    border-color: #c9d6c8;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}
/* content sits directly on the white tile (no nested block) */
.director-dashboard .card > .table-responsive,
.director-dashboard .card > .card-body {
    border: 0;
    box-shadow: none;
    border-radius: 0;
    margin: 0;
    background: transparent;
}
.director-dashboard .stat-strip-item { background: #eef3ee; border-color: #d6e2d5; box-shadow: none; }
/* stat tiles: white; hover / click look like the outline buttons (e.g. Work Order Report) */
.director-dashboard .stat-strip-item { background: #fff; border-color: #c9d6c8; }
.director-dashboard a.stat-strip-item:hover,
.director-dashboard a.stat-strip-item:focus-visible,
.director-dashboard a.stat-strip-item:active { background: #fff; border-color: var(--up-green); outline: none; }

/* Director dashboard: gray container, white tiles inside */
.director-dashboard { background: var(--up-green-light); border-color: #c5d3c8; }  /* #E0E8E2 */
.director-dashboard .card,
.director-dashboard .stat-group--boxed { border-color: transparent; }  /* white tiles: no border */
/* stat tiles lift on hover (floating effect) */
.director-dashboard a.stat-strip-item { transition: transform .18s ease, box-shadow .18s ease, border-color .15s; }
.director-dashboard a.stat-strip-item:hover,
.director-dashboard a.stat-strip-item:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 10px 22px rgba(0, 0, 0, .14);
}
.director-dashboard a.stat-strip-item:active { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0, 0, 0, .12); }
@media (prefers-reduced-motion: reduce) { .director-dashboard a.stat-strip-item { transition: none; } }

/* Personnel dashboard (same bento panel): Recent Work Orders goes last, full width */
.director-dashboard > .dash-recent { order: 8; }

/* Dashboards: clean look like View Work Order — no colored container; each tile
   is a white card (same border, radius and shadow as .hcard) on the page background */
.director-dashboard {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
}
.director-dashboard .card,
.director-dashboard .stat-group--boxed {
    background: #fff;
    border: 1px solid var(--up-border);
    border-radius: 16px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .09);
}
/* clickable stat tiles: light green fill on hover (same as the outline buttons), plus the lift */
.director-dashboard a.stat-strip-item:hover,
.director-dashboard a.stat-strip-item:focus-visible,
.director-dashboard a.stat-strip-item:active { background: var(--up-green-light); border-color: var(--up-green); }

/* Dropdown lists: transparent "glass" look — see-through dark teal with a blur
   behind it, a faint light edge and a soft shadow. Applies to the select lists
   and to the Bootstrap menus (Work Order Report, ⋮ menus, profile menu). */
.dropdown-menu {
    --bs-dropdown-bg: rgba(28, 44, 44, .88);
    --bs-dropdown-border-color: rgba(255, 255, 255, .22);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .22);
    border-radius: .75rem;
}
@supports (appearance: base-select) {
    select.form-select::picker(select) {
        background: rgba(28, 44, 44, .88);
        border: 1px solid rgba(255, 255, 255, .22);
        -webkit-backdrop-filter: blur(14px) saturate(140%);
        backdrop-filter: blur(14px) saturate(140%);
        box-shadow: 0 12px 32px rgba(0, 0, 0, .22);
        border-radius: .75rem;
    }
}

/* Search boxes and filter dropdowns: same design as the "View All" button —
   white with a green outline; original corner radius (hover keeps the light green fill) */
.form-select-sm,
.form-control-sm,
.input-group-sm > .form-control,
.input-group-sm > .form-select,
.input-group-sm > .input-group-text {
    background-color: #fff;
    border-color: var(--up-green);
    color: #000;
}
/* keep task inputs and other small fields inside forms rectangular */
.wo-task .form-control-sm { border-radius: var(--bs-border-radius-sm, .25rem); padding-left: .5rem; border-color: #c7d2cb; }
/* small fields inside real forms (e.g. the CSM form) keep the normal text-field look */
form .form-control-sm,
form .form-select-sm { border-radius: var(--bs-border-radius-sm, .25rem); padding-left: .5rem; border-color: #c7d2cb; background-color: #f4f6f5; }

/* Search / filter controls when clicked (focused or open): white inside, green border,
   soft green ring (same as the dropdowns) */
.form-select-sm:focus,
.form-control-sm:focus,
.input-group-sm > .form-control:focus,
.input-group-sm > .form-select:focus {
    background-color: #fff !important;
    border-color: var(--up-green);
    box-shadow: 0 0 0 .2rem rgba(70, 119, 80, .25);
    color: #000;
}
/* form fields (CSM form, task inputs) keep their white-on-focus behaviour */
form .form-control-sm:focus,
form .form-select-sm:focus,
.wo-task .form-control-sm:focus { background-color: #fff !important; }
/* ...and while the list is open (focus moves into the list, so :focus alone misses it).
   Kept as separate rules so a browser that lacks one selector still applies the other. */
.form-select-sm:focus-within,
.input-group-sm > .form-select:focus-within {
    background-color: #fff !important;
    border-color: var(--up-green);
    box-shadow: 0 0 0 .2rem rgba(70, 119, 80, .25);
}
.form-select-sm:open,
.input-group-sm > .form-select:open {
    background-color: #fff !important;
    border-color: var(--up-green);
    box-shadow: 0 0 0 .2rem rgba(70, 119, 80, .25);
}

/* Feedback & Evaluation donuts: legend and hover label are HTML text so they render sharp */
.fb-donut { width: 100%; max-width: 220px; }
.fb-donut-chart { position: relative; }
.fb-donut-legend {
    display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem 1rem;
    list-style: none; margin: .75rem 0 0; padding: 0;
    font-size: .8rem; color: #374151;
}
.fb-donut-legend li { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.fb-donut-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.fb-donut-tip {
    position: absolute; z-index: 2; pointer-events: none;
    transform: translate(-50%, calc(-100% - 8px));
    /* white with a border and shadow: stands out on every slice colour, dark hover ones included */
    background: #fff; color: #111827;
    border: 1px solid #c9d1cd; box-shadow: 0 4px 12px rgba(0, 0, 0, .22);
    font-size: .8rem; font-weight: 600; line-height: 1.2; white-space: nowrap;
    padding: .35rem .6rem; border-radius: 6px;
    opacity: 0; transition: opacity .12s;
}
.fb-donut-tip.is-shown { opacity: 1; }
/* Director / Head dashboard: six status tiles (Declined included) */
@media (min-width: 768px)  { .stat-strip--wo.stat-strip--wo6 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .stat-strip--wo.stat-strip--wo6 { grid-template-columns: repeat(6, 1fr); } }

/* Long text in a field ends in "…" instead of being cut off or running under the arrow.
   (A field's own text shows in full again while it is being typed in.) */
input.form-control,
select.form-select {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
/* Sign-in / sign-up pills: keep room on the right for the dropdown arrow */
.auth-card select.form-select { padding-right: 2.75rem; background-position: right 1.1rem center; }
/* Customizable selects: the closed field's text lives in <selectedcontent> (added by app.js) */
select.form-select > button { all: unset; display: block; width: 100%; min-width: 0; }
select.form-select selectedcontent { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Tables with fixed, proportional columns. A .cell-clip cell keeps to one line and ends
   in "…"; app.js shows the full text as a tooltip only when it was actually cut. */
.table-fit { table-layout: fixed; width: 100%; min-width: 560px; }
.cell-clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Captcha box (Cloudflare Turnstile) on the sign-in / sign-up / forgot password cards */
.recaptcha-wrap { display: flex; justify-content: center; margin: .75rem 0 .25rem; min-height: 78px; }
/* Sign In only: room above the button (the "Forgot password?" link above already leaves a gap) */
.auth-inline-link + .recaptcha-wrap { margin: -.6rem 0 1.25rem; }
/* Sign-up (wide screens): the box makes the form taller than the fixed card, which cut the
   button off. Let the card grow with the form and the page scroll if the screen is short. */
@media (min-width: 901px) {
    .auth-page:has(.auth-card-body.is-top .recaptcha-wrap) { height: auto; min-height: 100vh; overflow: visible; }
    .auth-shell:has(.auth-card-body.is-top .recaptcha-wrap) { height: auto; max-height: none; min-height: min(680px, calc(100vh - 72px)); }
}
@media (max-width: 359.98px) { .recaptcha-wrap > div { transform: scale(.86); transform-origin: center; } }

/* Sign-up code step: "Resend code" is a form button that looks like the other auth links */
.auth-link-btn {
    border: 0; background: none; padding: 0;
    color: var(--up-forest-green); font: inherit; font-weight: 600; cursor: pointer;
}
.auth-link-btn:hover, .auth-link-btn:focus-visible { text-decoration: underline; }
.auth-card .signup-code { font-size: 1.5rem; padding-top: .8rem; padding-bottom: .8rem; }

/* All dropdowns (selects): white field with a soft shadow behind it. Clicked (focused or
   with its list open) it stays white inside and only gains the green ring. */
select.form-select,
.wo-input-soft select.form-select {
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}
select.form-select:focus,
select.form-select:focus-within {
    background-color: #fff !important;
    border-color: var(--up-green);
    box-shadow: 0 0 0 .2rem rgba(70, 119, 80, .25), 0 2px 8px rgba(0, 0, 0, .12);
}
/* separate rule: a browser without :open still applies the one above */
select.form-select:open {
    background-color: #fff !important;
    border-color: var(--up-green);
    box-shadow: 0 0 0 .2rem rgba(70, 119, 80, .25), 0 2px 8px rgba(0, 0, 0, .12);
}

/* Dropdown lists (the opened select lists and the Bootstrap menus: Work Order Report,
   ⋮ menus, profile menu): white card with dark text and a soft shadow behind it;
   light green highlight on hover and on the chosen option. */
.dropdown-menu {
    --bs-dropdown-bg: #fff;
    --bs-dropdown-border-color: var(--up-border);
    --bs-dropdown-link-color: #1f2937;
    --bs-dropdown-link-hover-color: #1f2937;
    --bs-dropdown-link-hover-bg: var(--up-green-xlight);
    --bs-dropdown-link-active-color: #1f2937;
    --bs-dropdown-link-active-bg: var(--up-green-light);
    --bs-dropdown-divider-bg: var(--up-border);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .22);
}
/* on a white card "Delete" can be red again */
.dropdown-menu .dropdown-item.text-danger { color: #dc2626 !important; }
@supports (appearance: base-select) {
    select.form-select::picker(select) {
        background: #fff;
        border: 1px solid var(--up-border);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        box-shadow: 0 12px 32px rgba(0, 0, 0, .22);
    }
    select.form-select option { color: #1f2937; }
    select.form-select option:hover,
    select.form-select option:focus-visible { background: var(--up-green-xlight); }
    select.form-select option:checked { background: var(--up-green-light); }
    select.form-select option:disabled { color: #9aa3a0; }
}

/* Buttons when clicked (pressed, focused, or with their menu open): same as the dropdowns —
   the button keeps its normal fill and only gains the soft green ring. Hover is unchanged
   until the button is clicked. (.active is a "selected" state, not a click, so it's left alone.) */
.btn:focus, .btn:active, .btn.show,
.bento-icon-btn:focus, .bento-icon-btn:active, .bento-icon-btn.show,
.row-action-btn:focus, .row-action-btn:active, .row-action-btn.show,
.glass-circle-btn:focus,
.confirm-modal-btn:focus,
.auth-btn:focus {
    box-shadow: 0 0 0 .2rem rgba(70, 119, 80, .25) !important;
    outline: 0;
}
/* filled green buttons (Save, Submit, Yes...) stay green */
.btn-primary:focus, .btn-primary:active, .btn-primary.show {
    background-color: var(--up-green) !important;
    border-color: var(--up-green) !important;
    color: #fff !important;
}
.confirm-modal-btn--confirm:focus { background: var(--up-green); color: #fff; }
.confirm-modal-btn--cancel:focus  { background: #eef1ef; color: #000; }
.auth-btn:active { filter: none; }
/* outlined buttons (Work Order Report, View All, Add New...) stay white */
.btn-outline-primary:focus, .btn-outline-primary:active, .btn-outline-primary.show,
.btn-outline-primary:focus-visible {
    background-color: #fff !important;
    border-color: var(--up-green) !important;
    color: #000 !important;
}
.btn-outline-secondary:focus, .btn-outline-secondary:active,
.btn-outline-danger:focus, .btn-outline-danger:active {
    background-color: transparent !important;
    border-color: var(--bs-btn-border-color) !important;
    color: var(--bs-btn-color) !important;
}
/* round icon buttons (History, Add task, ⋮, back arrow) */
.bento-icon-btn:focus, .bento-icon-btn:active, .bento-icon-btn.show,
.glass-circle-btn:not(.glass-circle-btn--danger):focus {
    background: #fff;
    border-color: var(--up-green);
    color: #1f2937;
}
/* table row actions (edit, view, ⋮): no fill, just the ring */
.row-action-btn:focus, .row-action-btn:active, .row-action-btn.show {
    background-color: transparent;
    color: var(--up-dark-teal);
}
/* ...with the green border too (these have no border of their own), then the soft ring */
.row-action-btn:focus, .row-action-btn:active, .row-action-btn.show {
    box-shadow: inset 0 0 0 1px var(--up-green), 0 0 0 .2rem rgba(70, 119, 80, .25) !important;
}

/* Select with a count badge per option (see data-badge-select in app.js) */
.badge-select > .form-select { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.badge-select > .form-select > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge-select > .form-select > .badge-select-count { margin-right: .25rem; }
.badge-select .dropdown-menu { max-height: 260px; overflow-y: auto; }
.badge-select-count { background: #e5e7eb; color: #374151; font-weight: 600; min-width: 1.6rem; }
.badge-select-count.is-zero { color: #9ca3af; }
.dropdown-item.active .badge-select-count { background: #fff; color: #374151; }

/* Work Orders: filter row under the column headers */
.table-filter-row > td { background: var(--bs-tertiary-bg, #f8f9fa); padding-top: .5rem; padding-bottom: .4rem; }
.table-filter-row .form-select,
.table-filter-row .form-control { min-width: 7.5rem; }
.table-filter-row .input-group .form-select { min-width: 6.5rem; }
/* Keep icon, From, "to" and To on one line (Bootstrap input groups wrap by default) */
.table-filter-row .input-group { flex-wrap: nowrap; }
@media (max-width: 767.98px) {
    .table-filter-row .input-group-text { padding-left: .5rem; padding-right: .5rem; }
}

/* Month range filters on small screens: names are short there (Jan, Feb, …, set in app.js).
   Keep each dropdown wide enough for three letters, with a tighter arrow area,
   so they never shrink to "J…" */
@media (max-width: 767.98px) {
    #filterMonthFrom, #filterMonthTo,
    #fbMonthFrom, #fbMonthTo,
    #histMonthFrom, #histMonthTo {
        min-width: 4.5rem !important;
        padding-right: 1.6rem;
        background-position: right .45rem center;
    }
}