@import '_content/Blazor.Bootstrap/Blazor.Bootstrap.olwso25aue.bundle.scp.css';

/* _content/AlterHub/Components/Account/Pages/ForcePasswordChange.razor.rz.scp.css */
/* Mirrors the login card (Login.razor.css). Scoped CSS does not cross component
   boundaries, so the auth-* rules are repeated here for the force-change page. */
.auth-card[b-30n3r7ub5h] { background: rgba(255,255,255,.10); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.22); border-radius: 18px; padding: 36px 34px; color: #fff; box-shadow: 0 20px 50px rgba(0,0,0,.30); }
.auth-brand[b-30n3r7ub5h] { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.auth-mark[b-30n3r7ub5h] { display: flex; align-items: center; justify-content: center; filter: drop-shadow(0 10px 18px rgba(0,0,0,.35)); }
.auth-name[b-30n3r7ub5h] { font-size: 21px; font-weight: 700; text-align: center; }
.auth-name small[b-30n3r7ub5h] { display: block; font-size: 12px; font-weight: 500; opacity: .8; letter-spacing: .08em; text-transform: uppercase; }
.auth-sub[b-30n3r7ub5h] { text-align: center; font-size: 12px; opacity: .8; letter-spacing: .06em; text-transform: uppercase; margin: 6px 0 18px; }
.auth-note[b-30n3r7ub5h] { text-align: center; font-size: 13px; opacity: .85; color: rgba(255,255,255,.85); margin: 0 0 22px; }
.auth-field[b-30n3r7ub5h] { margin-bottom: 16px; }
.auth-label[b-30n3r7ub5h] { display: block; font-size: 12px; font-weight: 600; margin-bottom: 6px; color: rgba(255,255,255,.85); }
.auth-input.form-control[b-30n3r7ub5h] { height: 44px; border-radius: 8px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); color: #fff; }
.auth-input.form-control[b-30n3r7ub5h]::placeholder { color: rgba(255,255,255,.55); }
.auth-input.form-control:focus[b-30n3r7ub5h] { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.55); box-shadow: none; color: #fff; }
.auth-btn[b-30n3r7ub5h] { height: 46px; border: 0; border-radius: 8px; font-weight: 700; font-size: 15px; background: #fff; color: var(--color-primary, #052767); }
.auth-btn:hover[b-30n3r7ub5h] { background: #eef0f5; color: var(--color-primary, #052767); }
/* _content/AlterHub/Components/Account/Pages/Login.razor.rz.scp.css */
.auth-card[b-m5kicyrj07] { background: rgba(255,255,255,.10); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.22); border-radius: 18px; padding: 36px 34px; color: #fff; box-shadow: 0 20px 50px rgba(0,0,0,.30); }
.auth-brand[b-m5kicyrj07] { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.auth-mark[b-m5kicyrj07] { display: flex; align-items: center; justify-content: center; filter: drop-shadow(0 10px 18px rgba(0,0,0,.35)); }
.auth-name[b-m5kicyrj07] { font-size: 21px; font-weight: 700; text-align: center; }
.auth-name small[b-m5kicyrj07] { display: block; font-size: 12px; font-weight: 500; opacity: .8; letter-spacing: .08em; text-transform: uppercase; }
.auth-version[b-m5kicyrj07] { font-size: 11px; font-weight: 600; letter-spacing: .12em; opacity: .55; }
.auth-sub[b-m5kicyrj07] { text-align: center; font-size: 12px; opacity: .8; letter-spacing: .06em; text-transform: uppercase; margin: 6px 0 24px; }
.auth-field[b-m5kicyrj07] { margin-bottom: 16px; }
.auth-label[b-m5kicyrj07] { display: block; font-size: 12px; font-weight: 600; margin-bottom: 6px; color: rgba(255,255,255,.85); }
.auth-input.form-control[b-m5kicyrj07] { height: 44px; border-radius: 8px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); color: #fff; }
.auth-input.form-control[b-m5kicyrj07]::placeholder { color: rgba(255,255,255,.55); }
.auth-input.form-control:focus[b-m5kicyrj07] { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.55); box-shadow: none; color: #fff; }
.auth-remember[b-m5kicyrj07] { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255,255,255,.85); margin-bottom: 20px; }
.auth-btn[b-m5kicyrj07] { height: 46px; border: 0; border-radius: 8px; font-weight: 700; font-size: 15px; background: #fff; color: var(--color-primary, #052767); }
.auth-btn:hover[b-m5kicyrj07] { background: #eef0f5; color: var(--color-primary, #052767); }
/* _content/AlterHub/Components/Layout/AuthLayout.razor.rz.scp.css */
.auth-shell[b-cv5r3xo81f] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(155deg, #052767 0%, #3a0647 100%);
}
.auth-glow[b-cv5r3xo81f] { position: absolute; border-radius: 50%; pointer-events: none; }
.auth-glow-1[b-cv5r3xo81f] { width: 460px; height: 460px; top: -140px; left: -120px; background: radial-gradient(circle, rgba(120,60,160,.55), transparent 70%); }
.auth-glow-2[b-cv5r3xo81f] { width: 420px; height: 420px; bottom: -150px; right: -110px; background: radial-gradient(circle, rgba(40,80,180,.45), transparent 70%); }
.auth-content[b-cv5r3xo81f] { position: relative; z-index: 2; width: 100%; max-width: 380px; }
/* _content/AlterHub/Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-5pmkq8y3sa] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-5pmkq8y3sa] {
    flex: 1;
}

.sidebar[b-5pmkq8y3sa] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-5pmkq8y3sa] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
    position: relative;
}

.client-cobrand[b-5pmkq8y3sa] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 8px;
    pointer-events: none;
}
.client-cobrand-logo[b-5pmkq8y3sa] { max-height: 28px; max-width: 160px; object-fit: contain; }
.client-cobrand-name[b-5pmkq8y3sa] { font-weight: 600; color: #1d2330; font-size: 0.95rem; white-space: nowrap; }

    .top-row[b-5pmkq8y3sa]  a, .top-row[b-5pmkq8y3sa]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-5pmkq8y3sa]  a:hover, .top-row[b-5pmkq8y3sa]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-5pmkq8y3sa]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-5pmkq8y3sa] {
        justify-content: space-between;
    }

    .top-row[b-5pmkq8y3sa]  a, .top-row[b-5pmkq8y3sa]  .btn-link {
        margin-left: 0;
    }

    /* On mobile, anchor the client logo + company name to the far left
       (instead of centered) so it no longer overlaps the user/language
       dropdown on the right. Cap the width and ellipsize the name so it
       can never run under the dropdown. */
    .client-cobrand[b-5pmkq8y3sa] {
        left: 1rem;
        transform: translateY(-50%);
        max-width: 50%;
    }

    .client-cobrand-name[b-5pmkq8y3sa] {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Compact account trigger on phones: avatar + caret only, so the wider pill
       no longer overlaps the (absolutely-positioned) company name. The full name
       still shows in the dropdown header once opened. */
    .user-dropdown .user-trigger-name[b-5pmkq8y3sa] {
        display: none;
    }

    .user-dropdown .user-trigger[b-5pmkq8y3sa] {
        gap: 4px;
        padding: 4px 8px 4px 4px;
    }
}

@media (min-width: 641px) {
    .page[b-5pmkq8y3sa] {
        flex-direction: row;
    }

    .sidebar[b-5pmkq8y3sa] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-5pmkq8y3sa] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-5pmkq8y3sa]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-5pmkq8y3sa], article[b-5pmkq8y3sa] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

/* Prevent dropdown from exceeding screen width */
@media screen and (max-width: 400px) {
    .user-dropdown .dropdown-menu[b-5pmkq8y3sa] {
        max-width: 90vw; /* Make it responsive */
    }
}

#blazor-error-ui[b-5pmkq8y3sa] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-5pmkq8y3sa] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/* ===== Account dropdown — branded gradient menu ===== */

/* Trigger: navy pill with avatar + name + caret */
.user-dropdown .user-trigger[b-5pmkq8y3sa] {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background-color: #052767;
    color: #ffffff;
    border: none;
    border-radius: 9999px;
    padding: 5px 14px 5px 6px;
    font-size: 14px;
    font-weight: 600;
}

.user-dropdown .user-trigger:hover[b-5pmkq8y3sa],
.user-dropdown .user-trigger:focus[b-5pmkq8y3sa] {
    background-color: #083072;
    color: #ffffff;
}

.user-dropdown .user-trigger.dropdown-toggle[b-5pmkq8y3sa]::after {
    margin-left: 1px;
    opacity: 0.85;
}

/* Avatar monogram (shared by trigger + menu header) */
.user-avatar[b-5pmkq8y3sa] {
    width: 30px;
    height: 30px;
    border-radius: 9999px;
    background: #ffffff;
    color: #052767;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
    line-height: 1;
    flex: none;
}

/* Menu card */
.user-dropdown .user-menu[b-5pmkq8y3sa] {
    right: 0;
    left: auto;
    min-width: 250px;
    padding: 0;
    border: 1px solid #e7e9ee;
    border-radius: 14px;
    box-shadow: 0 16px 38px rgba(5, 22, 61, 0.18);
    overflow: hidden;
}

/* Gradient header (avatar + name) */
.user-menu-head[b-5pmkq8y3sa] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(150deg, #052767, #3a0647);
    color: #ffffff;
}

.user-avatar-lg[b-5pmkq8y3sa] {
    width: 40px;
    height: 40px;
    font-size: 14px;
}

.user-menu-name[b-5pmkq8y3sa] {
    font-weight: 700;
    font-size: 15px;
    line-height: 1.2;
}

/* Language row */
.user-menu-row[b-5pmkq8y3sa] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
}

.user-menu-label[b-5pmkq8y3sa] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #94a0b0;
}

.user-menu-divider[b-5pmkq8y3sa] {
    margin: 0;
    border-top: 1px solid #eef1f5;
    opacity: 1;
}

/* Logout */
.user-menu-logout-form[b-5pmkq8y3sa] {
    margin: 0;
    padding: 8px;
}

.user-menu-logout[b-5pmkq8y3sa] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    background: transparent;
    color: #5a6573;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    border-radius: 9px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.user-menu-logout:hover[b-5pmkq8y3sa] {
    background: #fdecec;
    color: #dc3545;
}


/* _content/AlterHub/Components/Layout/NavGroup.razor.rz.scp.css */
/* Rich subsystem tiles rendered in place of the flat nav glyph. Keep them
   vertically centred against the nav label in both the flat-link (flex) and
   the expandable-button (inline) forms. */
.nav-tile[b-9rxdugkc88] {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    line-height: 0;
}

.nav-tile svg[b-9rxdugkc88] {
    border-radius: 6px;
}

/* Expanded child rows get a smaller version of the same dimensional tile as the
   parent (gradient + top-left sheen + soft lift), tinted to the parent
   subsystem's colour family so the children read as belonging to the group
   above them. The child keeps its own distinct white glyph. Mirrors the
   SubsystemIcon treatment used on the parent tiles. */
.nav-subtile[b-9rxdugkc88] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35),
                inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

    /* Top-left sheen, matching the SubsystemIcon radial highlight. */
    .nav-subtile[b-9rxdugkc88]::after {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(120% 90% at 30% 14%, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0) 55%);
        pointer-events: none;
    }

    /* The glyph itself: crisp white, sized for the tile, sitting above the sheen. */
    .nav-subtile[b-9rxdugkc88]  .bi {
        position: relative;
        z-index: 1;
        color: #fff;
        font-size: 0.8rem;
        line-height: 1;
        filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.28));
    }

/* Per-subsystem gradients — vertical light→dark, mirroring SubsystemIcon's
   _g1→_g2 stops so a child tile matches its parent's hue exactly. */
.nav-subtile--settings[b-9rxdugkc88]  { background: linear-gradient(to bottom, #828da5, #454b5c); }
.nav-subtile--ticketing[b-9rxdugkc88] { background: linear-gradient(to bottom, #3a6fd6, #123a86); }
.nav-subtile--purchases[b-9rxdugkc88] { background: linear-gradient(to bottom, #22c6b1, #0d7168); }
.nav-subtile--expenses[b-9rxdugkc88]  { background: linear-gradient(to bottom, #33c163, #146c34); }
.nav-subtile--convey[b-9rxdugkc88]    { background: linear-gradient(to bottom, #6a72f2, #312a9e); }
.nav-subtile--leave[b-9rxdugkc88]     { background: linear-gradient(to bottom, #8b5cf6, #3a0647); }
.nav-subtile--training[b-9rxdugkc88]  { background: linear-gradient(to bottom, #f6ac3e, #b45309); }
/* _content/AlterHub/Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-nwlbexey5r] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-nwlbexey5r] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-nwlbexey5r] {
    height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
    padding-left: 0.4rem;
}

/* Pull the brand (mark + "AlterHub") toward the sidebar's left edge. Scoped
   selectors out-specify Bootstrap's .navbar / .ps-3 / .container-fluid padding. */
.container-fluid[b-nwlbexey5r] {
    padding-left: 0.3rem;
    padding-right: 0.5rem;
}

.navbar-brand[b-nwlbexey5r] {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 1.1rem;
}

    .navbar-brand .brand-mark[b-nwlbexey5r] {
        display: inline-flex;
        line-height: 0;
    }

/* Rich subsystem tiles on the Home / Reports flat links (see also NavGroup.razor.css). */
.nav-tile[b-nwlbexey5r] {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    line-height: 0;
}

    .nav-tile svg[b-nwlbexey5r] {
        border-radius: 6px;
    }

.bi[b-nwlbexey5r] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-nwlbexey5r] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-nwlbexey5r] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-nwlbexey5r] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.bi-lock-nav-menu[b-nwlbexey5r] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
}

.bi-person-nav-menu[b-nwlbexey5r] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person' viewBox='0 0 16 16'%3E%3Cpath d='M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4Zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10Z'/%3E%3C/svg%3E");
}

.bi-person-badge-nav-menu[b-nwlbexey5r] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-badge' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0z'/%3E%3Cpath d='M4.5 0A2.5 2.5 0 0 0 2 2.5V14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2.5A2.5 2.5 0 0 0 11.5 0h-7zM3 2.5A1.5 1.5 0 0 1 4.5 1h7A1.5 1.5 0 0 1 13 2.5v10.795a4.2 4.2 0 0 0-.776-.492C11.392 12.387 10.063 12 8 12s-3.392.387-4.224.803a4.2 4.2 0 0 0-.776.492V2.5z'/%3E%3C/svg%3E");
}

.bi-person-fill-nav-menu[b-nwlbexey5r] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-fill' viewBox='0 0 16 16'%3E%3Cpath d='M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'/%3E%3C/svg%3E");
}

.bi-arrow-bar-left-nav-menu[b-nwlbexey5r] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-arrow-bar-left' viewBox='0 0 16 16'%3E%3Cpath d='M12.5 15a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5ZM10 8a.5.5 0 0 1-.5.5H3.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L3.707 7.5H9.5a.5.5 0 0 1 .5.5Z'/%3E%3C/svg%3E");
}

/* Sidebar link styling is anchored on .nav-scrollable (owned by NavMenu) with
   ::deep so it also reaches the .nav-item/.nav-link elements rendered inside the
   NavGroup child component — scoped rules anchored on .nav-item would only match
   NavMenu's own items (Home/Logout) and leave the grouped links unstyled/dark. */
.nav-scrollable[b-nwlbexey5r]  .nav-item {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

.nav-scrollable[b-nwlbexey5r]  .nav-item:first-of-type {
    padding-top: 1rem;
}

.nav-scrollable[b-nwlbexey5r]  .nav-item:last-of-type {
    padding-bottom: 1rem;
}

.nav-scrollable[b-nwlbexey5r]  .nav-link {
    color: #d7d7d7;
    background: none;
    border: none;
    border-radius: 4px;
    min-height: 3rem;        /* was height:3rem — allow growth for 2-line labels */
    display: flex;
    align-items: center;
    line-height: 1.2;        /* was 3rem — wrapped lines sit normally */
    white-space: normal;     /* let long labels wrap instead of overflowing */
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
    width: 100%;
}

.nav-scrollable[b-nwlbexey5r]  a.active {
    background: none;
    color: white;
}

.nav-scrollable[b-nwlbexey5r]  .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.nav-scrollable[b-nwlbexey5r] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-nwlbexey5r] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-nwlbexey5r] {
        display: none;
    }

    .nav-scrollable[b-nwlbexey5r] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* _content/AlterHub/Components/Pages/BulkRoles.razor.rz.scp.css */
/* Keep columns legible; container scrolls on narrow screens */
.table[b-ygcrkw4l2i] {
    min-width: 720px;
}
/* _content/AlterHub/Components/Pages/ConveyApprovals.razor.rz.scp.css */
/* ConveyApprovals scoped styles — keep MINIMAL: tokens, pills, modal sizing and the
   responsive collapse rules live in shared-ui.css (single source). Mirrors ConveyDocs. */

/* ===== Allow the Status column-filter dropdown to escape the table card =====
   .table-card in shared-ui.css sets overflow-x:auto and overflow-y:hidden so the card
   is a horizontal-scroll container.  Any absolutely-positioned descendant (the
   multi-select dropdown panel from MySortableHeader) is clipped by that overflow
   boundary when the table has few rows and the card's height is short.

   Fix: override overflow to visible for this page only, scoped via the modifier class
   ca-hscroll-outer added to the .table-card div in the markup.  With overflow:visible
   the dropdown panel is no longer clipped regardless of row count.

   Horizontal scroll trade-off: browsers coerce overflow-y:visible to auto when
   overflow-x is non-visible on the same element, so both axes must be visible here.
   The table's min-width:820px means horizontal overflow is only a concern on viewports
   narrower than 820px; the page's main scroll area handles that.  The shared-ui.css
   mobile rule (≤600px) was already switching .table-card to overflow-x:visible, so
   the narrowest viewports are unaffected. */
.table-card.ca-hscroll-outer[b-99466h5dbn] {
    overflow: visible;
}

/* ===== Approvals grid (6 columns) ===== */
.convey-approvals-grid[b-99466h5dbn] {
    table-layout: fixed; /* sized so the no-wrap sortable headers never overflow/overlap */
    width: 100%;
    min-width: 820px; /* keep the grid readable; horizontal-scroll on narrow viewports */
}

    .convey-approvals-grid thead th:nth-child(1)[b-99466h5dbn],
    .convey-approvals-grid tbody td:nth-child(1)[b-99466h5dbn] {
        width: 12%; /* Protocol column */
    }

    .convey-approvals-grid thead th:nth-child(2)[b-99466h5dbn],
    .convey-approvals-grid tbody td:nth-child(2)[b-99466h5dbn] {
        width: 18%; /* Document type column */
    }

    .convey-approvals-grid thead th:nth-child(3)[b-99466h5dbn],
    .convey-approvals-grid tbody td:nth-child(3)[b-99466h5dbn] {
        width: 26%; /* Subject column */
    }

    .convey-approvals-grid thead th:nth-child(4)[b-99466h5dbn],
    .convey-approvals-grid tbody td:nth-child(4)[b-99466h5dbn] {
        width: 17%; /* Creator column */
    }

    .convey-approvals-grid thead th:nth-child(5)[b-99466h5dbn],
    .convey-approvals-grid tbody td:nth-child(5)[b-99466h5dbn] {
        width: 14%; /* Received-date column */
    }

    .convey-approvals-grid thead th:nth-child(6)[b-99466h5dbn],
    .convey-approvals-grid tbody td:nth-child(6)[b-99466h5dbn] {
        width: 13%; /* Status column (>=13% so the pill never spills) */
    }

/* Row affordance — single-clickable */
.convey-approvals-grid tbody tr[b-99466h5dbn] {
    cursor: pointer;
}

/* ===== Detail modal (procurement custom-modal precedent) ===== */
.custom-modal[b-99466h5dbn] {
    max-width: 90%;
    margin: 1.5rem auto;
}

.modal-body[b-99466h5dbn] {
    max-height: 75vh;
    overflow-y: auto;
}

.detail-fields p[b-99466h5dbn] {
    margin-bottom: 6px;
}

/* Signatures-progress table (class name reuses the global .custom-modal .products-table
   mobile card-collapse rules from shared-ui.css; desktop styling is local) */
.products-table[b-99466h5dbn] {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.5rem;
}

    .products-table th[b-99466h5dbn],
    .products-table td[b-99466h5dbn] {
        padding: 0.5rem 0.75rem;
        text-align: left;
        vertical-align: middle;
        border: 1px solid #dee2e6;
        word-wrap: break-word;
    }

    .products-table thead th[b-99466h5dbn] {
        background-color: #f8f9fa;
        font-weight: bold;
    }

/* Rejection-history entries */
.reject-item[b-99466h5dbn] {
    border-left: 3px solid #842029;
    background: #fdf3f4;
    border-radius: 4px;
    padding: 6px 10px;
    margin-bottom: 10px;
}
/* _content/AlterHub/Components/Pages/ConveyDocs.razor.rz.scp.css */
/* ConveyDocs scoped styles — keep MINIMAL: tokens, pills, modal sizing and the
   responsive collapse rules live in shared-ui.css (single source). */

/* Hero: the two action buttons side by side */
.hero-actions[b-55nz36e8ml] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ===== Documents grid ===== */
.convey-docs-grid[b-55nz36e8ml] {
    table-layout: fixed; /* sized so the no-wrap sortable headers never overflow/overlap */
    width: 100%;
    min-width: 820px; /* keep the grid readable; horizontal-scroll on narrow viewports */
}

    .convey-docs-grid thead th:nth-child(1)[b-55nz36e8ml],
    .convey-docs-grid tbody td:nth-child(1)[b-55nz36e8ml] {
        width: 14%; /* Protocol column */
    }

    .convey-docs-grid thead th:nth-child(2)[b-55nz36e8ml],
    .convey-docs-grid tbody td:nth-child(2)[b-55nz36e8ml] {
        width: 24%; /* Document type column */
    }

    .convey-docs-grid thead th:nth-child(3)[b-55nz36e8ml],
    .convey-docs-grid tbody td:nth-child(3)[b-55nz36e8ml] {
        width: 33%; /* Subject column */
    }

    .convey-docs-grid thead th:nth-child(4)[b-55nz36e8ml],
    .convey-docs-grid tbody td:nth-child(4)[b-55nz36e8ml] {
        width: 15%; /* Date column */
    }

    .convey-docs-grid thead th:nth-child(5)[b-55nz36e8ml],
    .convey-docs-grid tbody td:nth-child(5)[b-55nz36e8ml] {
        width: 14%; /* Status column (>=13% so the pill never spills) */
    }

/* Row affordance — single-clickable */
.convey-docs-grid tbody tr[b-55nz36e8ml] {
    cursor: pointer;
}

/* ===== Detail modal (procurement custom-modal precedent) ===== */
.custom-modal[b-55nz36e8ml] {
    max-width: 90%;
    margin: 1.5rem auto;
}

.modal-body[b-55nz36e8ml] {
    max-height: 75vh;
    overflow-y: auto;
}

.detail-fields p[b-55nz36e8ml] {
    margin-bottom: 6px;
}

/* Signatures-progress table (class name reuses the global .custom-modal .products-table
   mobile card-collapse rules from shared-ui.css; desktop styling is local) */
.products-table[b-55nz36e8ml] {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.5rem;
}

    .products-table th[b-55nz36e8ml],
    .products-table td[b-55nz36e8ml] {
        padding: 0.5rem 0.75rem;
        text-align: left;
        vertical-align: middle;
        border: 1px solid #dee2e6;
        word-wrap: break-word;
    }

    .products-table thead th[b-55nz36e8ml] {
        background-color: #f8f9fa;
        font-weight: bold;
    }

/* Rejection-history entries */
.reject-item[b-55nz36e8ml] {
    border-left: 3px solid #842029;
    background: #fdf3f4;
    border-radius: 4px;
    padding: 6px 10px;
    margin-bottom: 10px;
}

/* ===== Create/edit modal form =====
   Single column so every non-rich-text field is full modal width and long
   values (e.g. a long "Προς" recipient) are fully visible without clipping. */
.convey-form-grid[b-55nz36e8ml] {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
}

.convey-span-2[b-55nz36e8ml] {
    grid-column: 1 / -1;
}

.req-star[b-55nz36e8ml] {
    color: #a32d2d;
}

/* Submit panel revealed by the submit button */
.submit-panel[b-55nz36e8ml] {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    padding: var(--space-3);
}

/* Ordered read-only signer preview of the selected pipeline */
.signer-preview[b-55nz36e8ml] {
    list-style: none;
    padding-left: 0;
    margin: 10px 0;
    font-size: 14px;
}

    .signer-preview li[b-55nz36e8ml] {
        padding: 2px 0;
    }

.signer-inactive[b-55nz36e8ml] {
    color: #8a4b0f;
    font-weight: 600;
    margin-left: 6px;
}

/* ===== Pipeline manager ===== */
.pipeline-name-input[b-55nz36e8ml] {
    max-width: 360px;
}

.pipeline-list-table td[b-55nz36e8ml] {
    vertical-align: middle;
}
/* _content/AlterHub/Components/Pages/ExpenseApprovals.razor.rz.scp.css */
/******************************** Page notice ********************************/
.page-notice[b-gwz3zgd11f] {
    margin: 8px 0;
}

/******************************** Reports grid ********************************/
/* Mirror ExpenseReports.razor.css: fixed layout + min-width so the grid stays
   readable and horizontally scrolls on narrow viewports. */
.expense-reports-grid[b-gwz3zgd11f] {
    table-layout: fixed;
    width: 100%;
    min-width: 820px;
}

    .expense-reports-grid thead th:nth-child(1)[b-gwz3zgd11f],
    .expense-reports-grid tbody td:nth-child(1)[b-gwz3zgd11f] {
        width: 12%; /* Report No. */
    }

    .expense-reports-grid thead th:nth-child(2)[b-gwz3zgd11f],
    .expense-reports-grid tbody td:nth-child(2)[b-gwz3zgd11f] {
        width: 30%; /* Purpose */
    }

    .expense-reports-grid thead th:nth-child(3)[b-gwz3zgd11f],
    .expense-reports-grid tbody td:nth-child(3)[b-gwz3zgd11f] {
        width: 18%; /* Period */
    }

    .expense-reports-grid thead th:nth-child(4)[b-gwz3zgd11f],
    .expense-reports-grid tbody td:nth-child(4)[b-gwz3zgd11f] {
        width: 13%; /* Total */
    }

    .expense-reports-grid thead th:nth-child(5)[b-gwz3zgd11f],
    .expense-reports-grid tbody td:nth-child(5)[b-gwz3zgd11f] {
        width: 14%; /* Status */
    }

    .expense-reports-grid thead th:nth-child(6)[b-gwz3zgd11f],
    .expense-reports-grid tbody td:nth-child(6)[b-gwz3zgd11f] {
        width: 13%; /* Date */
    }

.expense-reports-grid tbody tr.clickable-row[b-gwz3zgd11f] {
    cursor: pointer;
}

/******************************** Detail modal ********************************/
/* Single scroll region: the dialog fits within the viewport and does NOT scroll
   itself (overflow:hidden); only .modal-body scrolls. Previously both .custom-modal
   and .modal-body had overflow-y:auto, so a tall report showed TWO stacked
   vertical scrollbars. Flex column keeps the header/footer fixed. */
.custom-modal[b-gwz3zgd11f] {
    max-width: 90%;
    margin: 1.5rem auto;
    max-height: calc(100vh - 3rem);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.custom-modal .modal-content[b-gwz3zgd11f] {
    max-height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.modal-body[b-gwz3zgd11f] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.reject-banner .reject-meta[b-gwz3zgd11f] {
    font-size: 12px;
    margin-top: 4px;
    opacity: 0.85;
}

.phase-label[b-gwz3zgd11f] {
    font-weight: 600;
    margin: 12px 0 4px;
    color: var(--color-text, #333);
}

/* Detail tables: static, full-width, min-width so they scroll/stack nicely. */
.detail-table[b-gwz3zgd11f] {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.5rem;
    min-width: 640px;
}

    .detail-table th[b-gwz3zgd11f],
    .detail-table td[b-gwz3zgd11f] {
        padding: 0.6rem 0.75rem;
        text-align: left;
        vertical-align: middle;
        border: 1px solid #dee2e6;
        word-wrap: break-word;
    }

    .detail-table thead th[b-gwz3zgd11f] {
        background-color: #f8f9fa;
        font-weight: bold;
        text-align: center;
        white-space: nowrap;
    }

    .detail-table tbody tr:nth-child(odd)[b-gwz3zgd11f] {
        background-color: #f9f9f9;
    }

.comparison-table[b-gwz3zgd11f] {
    min-width: 480px;
}

.comparison-total td[b-gwz3zgd11f] {
    font-weight: bold;
    background-color: #f1f3f5;
}

.delta-good[b-gwz3zgd11f] {
    color: #198754;
    font-weight: 600;
}

.delta-bad[b-gwz3zgd11f] {
    color: #A32D2D;
    font-weight: 600;
}

.estimated-detail[b-gwz3zgd11f] {
    margin-top: 0.75rem;
}

    .estimated-detail summary[b-gwz3zgd11f] {
        cursor: pointer;
        font-weight: 600;
        margin-bottom: 0.5rem;
    }

/* Totals strip under each line table. */
.totals-strip[b-gwz3zgd11f] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 12px;
}

.total-cell[b-gwz3zgd11f] {
    flex: 1 1 120px;
    background: #f8f9fa;
    border: 1px solid var(--color-border, #dee2e6);
    border-radius: var(--radius-md, 6px);
    padding: 8px 12px;
}

.total-cell.total-grand[b-gwz3zgd11f] {
    background: #eef6ef;
    border-color: #198754;
}

.total-label[b-gwz3zgd11f] {
    font-size: 12px;
    color: #666;
}

.total-value[b-gwz3zgd11f] {
    font-weight: 700;
    font-size: 15px;
}

.file-list[b-gwz3zgd11f] {
    list-style: none;
    padding-left: 0;
}

    .file-list li[b-gwz3zgd11f] {
        padding: 2px 0;
    }

/******************************** Responsive: stack tables on mobile ********************************/
@media (max-width: 768px) {
    .detail-table[b-gwz3zgd11f] {
        min-width: 0;
    }

        .detail-table thead[b-gwz3zgd11f] {
            display: none;
        }

        .detail-table[b-gwz3zgd11f],
        .detail-table tbody[b-gwz3zgd11f],
        .detail-table tr[b-gwz3zgd11f],
        .detail-table td[b-gwz3zgd11f] {
            display: block;
            width: 100%;
        }

        .detail-table tr[b-gwz3zgd11f] {
            margin-bottom: 0.75rem;
            border: 1px solid #dee2e6;
            border-radius: var(--radius-md, 6px);
            overflow: hidden;
        }

        .detail-table td[b-gwz3zgd11f] {
            border: none;
            border-bottom: 1px solid #f1f1f1;
            text-align: right;
            position: relative;
            padding-left: 45%;
        }

            .detail-table td[b-gwz3zgd11f]::before {
                content: attr(data-label);
                position: absolute;
                left: 0.75rem;
                width: 40%;
                text-align: left;
                font-weight: 600;
                color: #555;
            }

    .totals-strip[b-gwz3zgd11f] {
        flex-direction: column;
    }
}

/******************************** Insights tab ********************************/
/* The Insights markup reuses the Reports scorecard class names (.kpi-row/.kpi/
   .kpi-k/.kpi-v) but those rules are component-scoped to Reports.razor, so they
   don't reach this page — hence the raw-text look. These scoped rules give the
   Insights KPIs a polished, on-brand stat-card treatment of their own. */
.insights-panel[b-gwz3zgd11f] {
    padding: 2px 2px 28px;
    animation: insights-fade-b-gwz3zgd11f .18s ease;
}

@keyframes insights-fade-b-gwz3zgd11f {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}

/* Date-range controls — a compact inline row, not full-width inputs */
.insights-date-row[b-gwz3zgd11f] {
    display: flex;
    align-items: center;       /* From/To labels vertically centred with the inputs */
    flex-wrap: wrap;
    gap: 8px 12px;
    margin: 6px 0 22px;
}

    .insights-date-row > label[b-gwz3zgd11f] {
        margin: 0;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: #64748b;
        line-height: 38px;     /* match the input height so text sits on the same line */
    }

.insights-date-input[b-gwz3zgd11f] {
    width: 168px;
    height: 38px;
}

.insights-date-row .btn[b-gwz3zgd11f] {
    height: 38px;
}

/* Charts: compact 2-up grid + capped height, matching the Reports page (the
   .reports-grid grid + .rc-body 230px cap are otherwise scoped to Reports.razor,
   so without these the Insights charts stack full-width and stretch endlessly). */
.insights-panel .reports-grid[b-gwz3zgd11f] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr));
    gap: 14px;
    margin-bottom: 8px;
}

/* Section headings: "Your activity" / "Department approvals" / "Organisation" */
.insights-section-title[b-gwz3zgd11f] {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #475569;
    margin: 26px 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eef1f6;
}

/* KPI tiles use the shared global .kpi-strip look (same as Ticketing) — defined in
   wwwroot/shared-ui.css, so they render identically and stay cache-busted. The
   bespoke gradient cards that lived here were removed in favour of that. */

@media (max-width: 600px) {
    .insights-date-input[b-gwz3zgd11f] { width: 100%; }
    .insights-date-row > label[b-gwz3zgd11f] { flex: 1 1 140px; }
}
/* _content/AlterHub/Components/Pages/ExpenseReports.razor.rz.scp.css */
/******************************** Page notice ********************************/
.page-notice[b-4n7jjavr3r] {
    margin: 8px 0;
}

/******************************** Reports grid ********************************/
/* Mirror Procurement.razor.css: fixed layout + min-width so the grid stays
   readable and horizontally scrolls on narrow viewports. */
.expense-reports-grid[b-4n7jjavr3r] {
    table-layout: fixed;
    width: 100%;
    min-width: 820px;
}

    .expense-reports-grid thead th:nth-child(1)[b-4n7jjavr3r],
    .expense-reports-grid tbody td:nth-child(1)[b-4n7jjavr3r] {
        width: 12%; /* Report No. */
    }

    .expense-reports-grid thead th:nth-child(2)[b-4n7jjavr3r],
    .expense-reports-grid tbody td:nth-child(2)[b-4n7jjavr3r] {
        width: 30%; /* Purpose */
    }

    .expense-reports-grid thead th:nth-child(3)[b-4n7jjavr3r],
    .expense-reports-grid tbody td:nth-child(3)[b-4n7jjavr3r] {
        width: 18%; /* Period */
    }

    .expense-reports-grid thead th:nth-child(4)[b-4n7jjavr3r],
    .expense-reports-grid tbody td:nth-child(4)[b-4n7jjavr3r] {
        width: 13%; /* Total */
    }

    .expense-reports-grid thead th:nth-child(5)[b-4n7jjavr3r],
    .expense-reports-grid tbody td:nth-child(5)[b-4n7jjavr3r] {
        width: 14%; /* Status */
    }

    .expense-reports-grid thead th:nth-child(6)[b-4n7jjavr3r],
    .expense-reports-grid tbody td:nth-child(6)[b-4n7jjavr3r] {
        width: 13%; /* Date */
    }

.expense-reports-grid tbody tr.clickable-row[b-4n7jjavr3r] {
    cursor: pointer;
}

/******************************** Detail modal ********************************/
/* Single scroll region: the dialog fits within the viewport and does NOT scroll
   itself (overflow:hidden); only .modal-body scrolls. Previously both .custom-modal
   and .modal-body had overflow-y:auto, so a tall report showed TWO stacked
   vertical scrollbars. Flex column keeps the header/footer fixed. */
.custom-modal[b-4n7jjavr3r] {
    max-width: 90%;
    margin: 1.5rem auto;
    max-height: calc(100vh - 3rem);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.custom-modal .modal-content[b-4n7jjavr3r] {
    max-height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.modal-body[b-4n7jjavr3r] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.reject-banner .reject-meta[b-4n7jjavr3r] {
    font-size: 12px;
    margin-top: 4px;
    opacity: 0.85;
}

.phase-label[b-4n7jjavr3r] {
    font-weight: 600;
    margin: 12px 0 4px;
    color: var(--color-text, #333);
}

/* Detail tables: static, full-width, min-width so they scroll/stack nicely. */
.detail-table[b-4n7jjavr3r] {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.5rem;
    min-width: 640px;
}

    .detail-table th[b-4n7jjavr3r],
    .detail-table td[b-4n7jjavr3r] {
        padding: 0.6rem 0.75rem;
        text-align: left;
        vertical-align: middle;
        border: 1px solid #dee2e6;
        word-wrap: break-word;
    }

    .detail-table thead th[b-4n7jjavr3r] {
        background-color: #f8f9fa;
        font-weight: bold;
        text-align: center;
        white-space: nowrap;
    }

    .detail-table tbody tr:nth-child(odd)[b-4n7jjavr3r] {
        background-color: #f9f9f9;
    }

.comparison-table[b-4n7jjavr3r] {
    min-width: 480px;
}

.comparison-total td[b-4n7jjavr3r] {
    font-weight: bold;
    background-color: #f1f3f5;
}

.delta-good[b-4n7jjavr3r] {
    color: #198754;
    font-weight: 600;
}

.delta-bad[b-4n7jjavr3r] {
    color: #A32D2D;
    font-weight: 600;
}

.estimated-detail[b-4n7jjavr3r] {
    margin-top: 0.75rem;
}

    .estimated-detail summary[b-4n7jjavr3r] {
        cursor: pointer;
        font-weight: 600;
        margin-bottom: 0.5rem;
    }

/* Totals strip under each line table (mirrors the create modal). */
.totals-strip[b-4n7jjavr3r] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 12px;
}

.total-cell[b-4n7jjavr3r] {
    flex: 1 1 120px;
    background: #f8f9fa;
    border: 1px solid var(--color-border, #dee2e6);
    border-radius: var(--radius-md, 6px);
    padding: 8px 12px;
}

.total-cell.total-grand[b-4n7jjavr3r] {
    background: #eef6ef;
    border-color: #198754;
}

.total-label[b-4n7jjavr3r] {
    font-size: 12px;
    color: #666;
}

.total-value[b-4n7jjavr3r] {
    font-weight: 700;
    font-size: 15px;
}

/* Fill-actuals editor: reuse the create modal's amount input affordance. */
.amount-wrap[b-4n7jjavr3r] {
    position: relative;
    display: flex;
    align-items: center;
}

.ghost-euro[b-4n7jjavr3r] {
    position: absolute;
    left: 8px;
    color: #999;
    pointer-events: none;
}

.amount-input[b-4n7jjavr3r] {
    padding-left: 22px;
}

.file-list[b-4n7jjavr3r] {
    list-style: none;
    padding-left: 0;
}

    .file-list li[b-4n7jjavr3r] {
        padding: 2px 0;
    }

/******************************** Responsive: stack tables on mobile ********************************/
@media (max-width: 768px) {
    .detail-table[b-4n7jjavr3r] {
        min-width: 0;
    }

        .detail-table thead[b-4n7jjavr3r] {
            display: none;
        }

        .detail-table[b-4n7jjavr3r],
        .detail-table tbody[b-4n7jjavr3r],
        .detail-table tr[b-4n7jjavr3r],
        .detail-table td[b-4n7jjavr3r] {
            display: block;
            width: 100%;
        }

        .detail-table tr[b-4n7jjavr3r] {
            margin-bottom: 0.75rem;
            border: 1px solid #dee2e6;
            border-radius: var(--radius-md, 6px);
            overflow: hidden;
        }

        .detail-table td[b-4n7jjavr3r] {
            border: none;
            border-bottom: 1px solid #f1f1f1;
            text-align: right;
            position: relative;
            padding-left: 45%;
        }

            .detail-table td[b-4n7jjavr3r]::before {
                content: attr(data-label);
                position: absolute;
                left: 0.75rem;
                width: 40%;
                text-align: left;
                font-weight: 600;
                color: #555;
            }

    .totals-strip[b-4n7jjavr3r] {
        flex-direction: column;
    }
}
/* _content/AlterHub/Components/Pages/ExpenseTracking.razor.rz.scp.css */
/******************************** Page notice ********************************/
.page-notice[b-ufnu6rx9hp] {
    margin: 8px 0;
}

/******************************** Tracking grid ********************************/
/* Mirror ExpenseReports.razor.css: fixed layout + min-width so the grid stays
   readable and horizontally scrolls on narrow viewports. The Paid tab adds
   three columns (Statement No / Date Paid / Balance), so it gets a wider floor. */
.expense-tracking-grid[b-ufnu6rx9hp] {
    table-layout: fixed;
    width: 100%;
    min-width: 920px;
}

    .expense-tracking-grid.paid-tab[b-ufnu6rx9hp] {
        min-width: 1120px;
    }

.expense-tracking-grid tbody tr.clickable-row[b-ufnu6rx9hp] {
    cursor: pointer;
}

/******************************** Detail modal ********************************/
/* Single scroll region: the dialog fits within the viewport and does NOT scroll
   itself (overflow:hidden); only .modal-body scrolls. Previously both .custom-modal
   and .modal-body had overflow-y:auto, so a tall report showed TWO stacked
   vertical scrollbars. Flex column keeps the header/footer fixed. */
.custom-modal[b-ufnu6rx9hp] {
    max-width: 90%;
    margin: 1.5rem auto;
    max-height: calc(100vh - 3rem);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.custom-modal .modal-content[b-ufnu6rx9hp] {
    max-height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.modal-body[b-ufnu6rx9hp] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.phase-label[b-ufnu6rx9hp] {
    font-weight: 600;
    margin: 12px 0 4px;
    color: var(--color-text, #333);
}

/* Detail tables: static, full-width, min-width so they scroll/stack nicely. */
.detail-table[b-ufnu6rx9hp] {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.5rem;
    min-width: 640px;
}

    .detail-table th[b-ufnu6rx9hp],
    .detail-table td[b-ufnu6rx9hp] {
        padding: 0.6rem 0.75rem;
        text-align: left;
        vertical-align: middle;
        border: 1px solid #dee2e6;
        word-wrap: break-word;
    }

    .detail-table thead th[b-ufnu6rx9hp] {
        background-color: #f8f9fa;
        font-weight: bold;
        text-align: center;
        white-space: nowrap;
    }

    .detail-table tbody tr:nth-child(odd)[b-ufnu6rx9hp] {
        background-color: #f9f9f9;
    }

.comparison-table[b-ufnu6rx9hp] {
    min-width: 480px;
}

.comparison-total td[b-ufnu6rx9hp] {
    font-weight: bold;
    background-color: #f1f3f5;
}

.delta-good[b-ufnu6rx9hp] {
    color: #198754;
    font-weight: 600;
}

.delta-bad[b-ufnu6rx9hp] {
    color: #A32D2D;
    font-weight: 600;
}

.estimated-detail[b-ufnu6rx9hp] {
    margin-top: 0.75rem;
}

    .estimated-detail summary[b-ufnu6rx9hp] {
        cursor: pointer;
        font-weight: 600;
        margin-bottom: 0.5rem;
    }

/* Totals strip under each line table. */
.totals-strip[b-ufnu6rx9hp] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 12px;
}

.total-cell[b-ufnu6rx9hp] {
    flex: 1 1 120px;
    background: #f8f9fa;
    border: 1px solid var(--color-border, #dee2e6);
    border-radius: var(--radius-md, 6px);
    padding: 8px 12px;
}

.total-cell.total-grand[b-ufnu6rx9hp] {
    background: #eef6ef;
    border-color: #198754;
}

.total-label[b-ufnu6rx9hp] {
    font-size: 12px;
    color: #666;
}

.total-value[b-ufnu6rx9hp] {
    font-weight: 700;
    font-size: 15px;
}

.file-list[b-ufnu6rx9hp] {
    list-style: none;
    padding-left: 0;
}

    .file-list li[b-ufnu6rx9hp] {
        padding: 2px 0;
    }

/******************************** Mark Paid modal ********************************/
/* Reuse the create modal's amount input affordance (€ ghost prefix). */
.amount-wrap[b-ufnu6rx9hp] {
    position: relative;
    display: flex;
    align-items: center;
}

.ghost-euro[b-ufnu6rx9hp] {
    position: absolute;
    left: 8px;
    color: #999;
    pointer-events: none;
}

.amount-input[b-ufnu6rx9hp] {
    padding-left: 22px;
}

/* Live-computed balance preview. */
.balance-strip[b-ufnu6rx9hp] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 12px;
}

.balance-cell[b-ufnu6rx9hp] {
    flex: 1 1 160px;
    background: #f8f9fa;
    border: 1px solid var(--color-border, #dee2e6);
    border-radius: var(--radius-md, 6px);
    padding: 8px 12px;
}

.balance-cell.balance-grand[b-ufnu6rx9hp] {
    background: #eef6ef;
    border-color: #198754;
}

/* Negative balance — company owes money back to the employee. */
.balance-cell.balance-negative[b-ufnu6rx9hp] {
    background: #fdecec;
    border-color: #A32D2D;
}

    .balance-cell.balance-negative .balance-value[b-ufnu6rx9hp] {
        color: #A32D2D;
    }

.balance-label[b-ufnu6rx9hp] {
    font-size: 12px;
    color: #666;
}

.balance-value[b-ufnu6rx9hp] {
    font-weight: 700;
    font-size: 16px;
}

/******************************** Responsive: stack tables on mobile ********************************/
@media (max-width: 768px) {
    .detail-table[b-ufnu6rx9hp] {
        min-width: 0;
    }

        .detail-table thead[b-ufnu6rx9hp] {
            display: none;
        }

        .detail-table[b-ufnu6rx9hp],
        .detail-table tbody[b-ufnu6rx9hp],
        .detail-table tr[b-ufnu6rx9hp],
        .detail-table td[b-ufnu6rx9hp] {
            display: block;
            width: 100%;
        }

        .detail-table tr[b-ufnu6rx9hp] {
            margin-bottom: 0.75rem;
            border: 1px solid #dee2e6;
            border-radius: var(--radius-md, 6px);
            overflow: hidden;
        }

        .detail-table td[b-ufnu6rx9hp] {
            border: none;
            border-bottom: 1px solid #f1f1f1;
            text-align: right;
            position: relative;
            padding-left: 45%;
        }

            .detail-table td[b-ufnu6rx9hp]::before {
                content: attr(data-label);
                position: absolute;
                left: 0.75rem;
                width: 40%;
                text-align: left;
                font-weight: 600;
                color: #555;
            }

    .totals-strip[b-ufnu6rx9hp],
    .balance-strip[b-ufnu6rx9hp] {
        flex-direction: column;
    }
}
/* _content/AlterHub/Components/Pages/Gnosis.razor.rz.scp.css */
/* Gnosis scoped styles — keep MINIMAL: tokens, pills, modal sizing and the responsive
   collapse rules live in shared-ui.css (single source). Mirrors ConveyApprovals. */

/* ===== Trainings grid (6 columns) ===== */
.gnosis-grid[b-4xkh8mjc6g] {
    table-layout: fixed; /* sized so the no-wrap sortable headers never overflow/overlap */
    width: 100%;
    min-width: 820px; /* keep the grid readable; horizontal-scroll on narrow viewports */
}

    .gnosis-grid thead th:nth-child(1)[b-4xkh8mjc6g],
    .gnosis-grid tbody td:nth-child(1)[b-4xkh8mjc6g] {
        width: 12%; /* Scheduled-date column */
    }

    .gnosis-grid thead th:nth-child(2)[b-4xkh8mjc6g],
    .gnosis-grid tbody td:nth-child(2)[b-4xkh8mjc6g] {
        width: 24%; /* Title column */
    }

    .gnosis-grid thead th:nth-child(3)[b-4xkh8mjc6g],
    .gnosis-grid tbody td:nth-child(3)[b-4xkh8mjc6g] {
        width: 21%; /* Subject column */
    }

    .gnosis-grid thead th:nth-child(4)[b-4xkh8mjc6g],
    .gnosis-grid tbody td:nth-child(4)[b-4xkh8mjc6g] {
        width: 18%; /* Counterpart (trainer/trainee) column */
    }

    .gnosis-grid thead th:nth-child(5)[b-4xkh8mjc6g],
    .gnosis-grid tbody td:nth-child(5)[b-4xkh8mjc6g] {
        width: 12%; /* Duration column */
    }

    .gnosis-grid thead th:nth-child(6)[b-4xkh8mjc6g],
    .gnosis-grid tbody td:nth-child(6)[b-4xkh8mjc6g] {
        width: 13%; /* Status column (>=13% so the pill never spills) */
    }

/* Empty-state line under the toolbar */
.grid-message[b-4xkh8mjc6g] {
    margin: var(--space-4) var(--space-1);
    color: var(--color-muted);
}

/* ===== Detail modal (procurement custom-modal precedent) ===== */
.custom-modal[b-4xkh8mjc6g] {
    max-width: 90%;
    margin: 1.5rem auto;
}

.modal-body[b-4xkh8mjc6g] {
    max-height: 75vh;
    overflow-y: auto;
}

.detail-fields p[b-4xkh8mjc6g] {
    margin-bottom: 6px;
}

/* Plain multiline fields (Description / KeyPoints / Evaluation / comments / reason) */
.pre-wrap[b-4xkh8mjc6g] {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Latest reject reason — same visual language as Convey's rejection history */
.reject-banner[b-4xkh8mjc6g] {
    border-left: 3px solid #842029;
    background: #fdf3f4;
    border-radius: 4px;
    padding: 6px 10px;
}

/* Trainer recording form + trainee accept panel */
.record-form[b-4xkh8mjc6g],
.accept-panel[b-4xkh8mjc6g] {
    border: 1px solid #dee2e6;
    border-radius: 6px;
    background: #f8f9fa;
    padding: 12px;
}

.req-star[b-4xkh8mjc6g] {
    color: #A32D2D;
}

/* Increment 4: rich description display in the record detail */
.gnosis-rich[b-4xkh8mjc6g]  img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}
.gnosis-rich[b-4xkh8mjc6g]  p {
    margin-bottom: 4px;
}

/* Background detail modal blurs while the Reject sub-modal is open (modal-on-modal). */
.gnosis-bg-blur .modal-dialog[b-4xkh8mjc6g] {
    filter: blur(4px);
    pointer-events: none;
    transition: filter .15s ease;
}
/* _content/AlterHub/Components/Pages/GnosisManage.razor.rz.scp.css */
/* GnosisManage scoped styles — keep MINIMAL: tokens, pills, modal sizing and the
   responsive collapse rules live in shared-ui.css (single source). Mirrors Gnosis. */

/* ===== Team grid (7 columns — name/dept/hire + 4 compact count columns) ===== */
.gnosis-team-grid[b-07a8mixtal] {
    table-layout: fixed; /* sized so the no-wrap sortable headers never overflow/overlap */
    width: 100%;
    min-width: 820px; /* keep the grid readable; horizontal-scroll on narrow viewports */
}

    .gnosis-team-grid thead th:nth-child(1)[b-07a8mixtal],
    .gnosis-team-grid tbody td:nth-child(1)[b-07a8mixtal] {
        width: 24%; /* Full-name column */
    }

    .gnosis-team-grid thead th:nth-child(2)[b-07a8mixtal],
    .gnosis-team-grid tbody td:nth-child(2)[b-07a8mixtal] {
        width: 18%; /* Department column */
    }

    .gnosis-team-grid thead th:nth-child(3)[b-07a8mixtal],
    .gnosis-team-grid tbody td:nth-child(3)[b-07a8mixtal] {
        width: 18%; /* Hiring-date column */
    }

    .gnosis-team-grid thead th:nth-child(n+4)[b-07a8mixtal],
    .gnosis-team-grid tbody td:nth-child(n+4)[b-07a8mixtal] {
        width: 10%; /* the 4 per-status count columns */
    }

/* ===== Catalogue ===== */
.catalogue-toolbar[b-07a8mixtal] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: var(--space-3);
}

.gnosis-catalogue-grid[b-07a8mixtal] {
    width: 100%;
}

/* Empty-state line under the toolbar */
.grid-message[b-07a8mixtal] {
    margin: var(--space-4) var(--space-1);
    color: var(--color-muted);
}

/* ===== Member modal (procurement custom-modal precedent) ===== */
.custom-modal[b-07a8mixtal] {
    max-width: 90%;
    margin: 1.5rem auto;
}

.modal-body[b-07a8mixtal] {
    max-height: 75vh;
    overflow-y: auto;
}

.detail-fields p[b-07a8mixtal] {
    margin-bottom: 6px;
}

/* Plain multiline fields (Description / KeyPoints / Evaluation / comments / reason) */
.pre-wrap[b-07a8mixtal] {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Latest reject reason — same visual language as Convey's rejection history */
.reject-banner[b-07a8mixtal] {
    border-left: 3px solid #842029;
    background: #fdf3f4;
    border-radius: 4px;
    padding: 6px 10px;
}

/* Read-only snapshot preview of the selected template in the schedule modal */
.template-preview[b-07a8mixtal] {
    border: 1px solid #dee2e6;
    border-radius: 6px;
    background: #f8f9fa;
    padding: 12px;
}

    .template-preview p[b-07a8mixtal] {
        margin-bottom: 6px;
    }

.req-star[b-07a8mixtal] {
    color: #A32D2D;
}

/* compact numeric count columns in the team grid */
.count-cell[b-07a8mixtal] { text-align: center; width: 7%; }

/* member-timeline table inside the member modal */
.gnosis-timeline[b-07a8mixtal] { width: 100%; table-layout: fixed; min-width: 560px; }
.gnosis-timeline td[b-07a8mixtal], .gnosis-timeline th[b-07a8mixtal] { overflow: hidden; text-overflow: ellipsis; }

/* ===== Scheduled Trainings filter bar (mirrors GnosisReview pattern) ===== */
.review-filters[b-07a8mixtal] {
    background: #fff;
    border: 1px solid var(--color-border, #dee2e6);
    border-radius: var(--radius-md, 8px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    padding: 14px 16px;
    margin-bottom: 14px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 18px;
}

.review-filters-field[b-07a8mixtal] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 150px;
}

.review-filters-lbl[b-07a8mixtal] {
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-muted, #6c757d);
}

.review-filters-field .form-select[b-07a8mixtal],
.review-filters-field .form-control[b-07a8mixtal] {
    min-width: 150px;
}

/* push Clear to the far right, aligned with the inputs */
.review-filters-clear[b-07a8mixtal] {
    margin-left: auto;
    align-self: flex-end;
}

.sched-date-sort-btn[b-07a8mixtal] {
    white-space: nowrap;
}

@media (max-width: 640px) {
    .review-filters-field[b-07a8mixtal] {
        flex: 1 1 100%;
        min-width: 0;
    }
    .review-filters-field .form-select[b-07a8mixtal],
    .review-filters-field .form-control[b-07a8mixtal] {
        min-width: 0;
        width: 100%;
    }
    .review-filters-clear[b-07a8mixtal] {
        margin-left: 0;
        width: 100%;
        justify-content: center;
    }
    .sched-date-sort-btn[b-07a8mixtal] {
        width: 100%;
    }
}

/* Increment 4: personal-method checkbox columns + rich description display */
.method-columns[b-07a8mixtal] {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}
.method-columns > div[b-07a8mixtal] {
    min-width: 240px;
}
.method-custom[b-07a8mixtal] {
    display: flex;
    align-items: center;
    gap: 6px;
}
.method-remove[b-07a8mixtal] {
    border: none;
    background: none;
    color: #A32D2D;
    font-size: 12px;
    line-height: 1;
    padding: 0 4px;
    cursor: pointer;
}
.method-remove:hover[b-07a8mixtal] {
    color: #7a1f1f;
}
.gnosis-rich[b-07a8mixtal]  img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}
.gnosis-rich[b-07a8mixtal]  p {
    margin-bottom: 4px;
}

/* Background member modal blurs while the New Schedule sub-modal is open (item 2). */
.gnosis-bg-blur .modal-dialog[b-07a8mixtal] {
    filter: blur(4px);
    pointer-events: none;
    transition: filter .15s ease;
}
/* _content/AlterHub/Components/Pages/GnosisReview.razor.rz.scp.css */
/* Trainings Review — filter bar card */
.review-filters[b-o5rhdv0cdv] {
    background: #fff;
    border: 1px solid var(--color-border, #dee2e6);
    border-radius: var(--radius-md, 8px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    padding: 14px 16px;
    margin-bottom: 14px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 18px;
}

.review-filters-field[b-o5rhdv0cdv] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 150px;
}

.review-filters-lbl[b-o5rhdv0cdv] {
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-muted, #6c757d);
}

.review-filters-field .form-select[b-o5rhdv0cdv],
.review-filters-field .form-control[b-o5rhdv0cdv] {
    min-width: 150px;
}

/* push Clear to the far right, aligned with the inputs */
.review-filters-clear[b-o5rhdv0cdv] {
    margin-left: auto;
    align-self: flex-end;
}

@media (max-width: 640px) {
    .review-filters-field[b-o5rhdv0cdv] {
        flex: 1 1 100%;
        min-width: 0;
    }
    .review-filters-field .form-select[b-o5rhdv0cdv],
    .review-filters-field .form-control[b-o5rhdv0cdv] {
        min-width: 0;
        width: 100%;
    }
    .review-filters-clear[b-o5rhdv0cdv] {
        margin-left: 0;
        width: 100%;
        justify-content: center;
    }
}

/* ===== Templates tab — header row ===== */
.tmpl-toolbar[b-o5rhdv0cdv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

/* ===== Templates tab — card gallery (home-card style) ===== */
.tmpl-cards[b-o5rhdv0cdv] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.tmpl-card[b-o5rhdv0cdv] {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e2e6ec);
    border-left: 4px solid #b45309; /* GnΩsis accent */
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, .04));
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease;
}
.tmpl-card:hover[b-o5rhdv0cdv] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md, 0 2px 8px rgba(0, 0, 0, .08));
}
.tmpl-card-mand[b-o5rhdv0cdv] { border-left-color: #A32D2D; } /* mandatory = red accent */

.tmpl-card-top[b-o5rhdv0cdv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
.tmpl-card-icon[b-o5rhdv0cdv] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #b45309;
    color: #fff;
    font-size: 19px;
    flex: 0 0 auto;
}
.tmpl-card-mand .tmpl-card-icon[b-o5rhdv0cdv] { background: #A32D2D; }

.tmpl-card-title[b-o5rhdv0cdv] {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--color-primary, #052767);
}
.tmpl-card-subject[b-o5rhdv0cdv] {
    font-size: 13px;
    color: var(--color-muted, #6c757d);
    margin: 0 0 12px;
    flex: 1;
    line-height: 1.5;
}
.tmpl-card-meta[b-o5rhdv0cdv] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.tmpl-chip[b-o5rhdv0cdv] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-primary, #052767);
    background: var(--color-bg, #f3f4f6);
    border: 1px solid var(--color-border, #e2e6ec);
    border-radius: 999px;
    padding: 3px 10px;
}
.tmpl-chip .bi[b-o5rhdv0cdv] { font-size: 12px; opacity: .8; }

@media (max-width: 1100px) {
    .tmpl-cards[b-o5rhdv0cdv] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
    .tmpl-cards[b-o5rhdv0cdv] { grid-template-columns: 1fr; }
}

/* ===== Rich-text + pre-wrap inside this page's modals =====
   (.pre-wrap / .gnosis-rich are otherwise only defined in other components' scoped CSS) */
.pre-wrap[b-o5rhdv0cdv] { white-space: pre-wrap; word-break: break-word; }
.gnosis-rich[b-o5rhdv0cdv] { font-size: 14px; line-height: 1.55; }
.gnosis-rich[b-o5rhdv0cdv]  p { margin: 0 0 8px; }
.gnosis-rich[b-o5rhdv0cdv]  ul,
.gnosis-rich[b-o5rhdv0cdv]  ol { margin: 0 0 8px; padding-left: 22px; }
.gnosis-rich[b-o5rhdv0cdv]  img { max-width: 100%; height: auto; }
/* _content/AlterHub/Components/Pages/Home.razor.rz.scp.css */
/* ===== Home (Proposal C — greeting + quick actions + accent service cards) ===== */

/* Feedback modal keeps a soft shadow */
.modal-content[b-awk1ulwe5l] {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Greeting hero — brand gradient, matches the login */
.home-hero[b-awk1ulwe5l] {
    background: linear-gradient(155deg, #052767 0%, #3a0647 100%);
    color: #fff;
    border-radius: var(--radius-md, 8px);
    padding: 22px 26px;
    margin-top: var(--space-3, 12px);
    margin-bottom: var(--space-4, 16px);
}
.home-hero-date[b-awk1ulwe5l] {
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .78;
}
.home-hero-greeting[b-awk1ulwe5l] {
    font-size: 26px;
    font-weight: 700;
    margin: 6px 0 16px;
    color: #fff;
}
/* h1 is programmatically focused by FocusOnNavigate — hide the focus ring on the gradient. */
.home-hero-greeting:focus[b-awk1ulwe5l],
.home-hero-greeting:focus-visible[b-awk1ulwe5l] { outline: none; }
.home-quick[b-awk1ulwe5l] { display: flex; gap: 10px; flex-wrap: wrap; }
.home-quick-pill[b-awk1ulwe5l] {
    background: rgba(255, 255, 255, .13);
    border: 1px solid rgba(255, 255, 255, .22);
    color: #fff;
    border-radius: 9px;
    padding: 9px 15px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    line-height: 1.5;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .12s ease;
}
.home-quick-pill:hover[b-awk1ulwe5l] { background: rgba(255, 255, 255, .24); color: #fff; }

/* Section label */
.home-section-title[b-awk1ulwe5l] {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-muted, #6c757d);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin: 6px 2px 12px;
}

/* Service cards with brand-colored left accent */
.home-cards[b-awk1ulwe5l] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.home-card[b-awk1ulwe5l] {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e2e6ec);
    border-left: 4px solid #052767;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.04));
    transition: transform .12s ease, box-shadow .12s ease;
}
.home-card:hover[b-awk1ulwe5l] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md, 0 2px 8px rgba(0,0,0,.08));
}
.home-card-tk[b-awk1ulwe5l] { border-left-color: #052767; }
.home-card-pr[b-awk1ulwe5l] { border-left-color: #14b8a6; }
.home-card-lv[b-awk1ulwe5l] { border-left-color: #3a0647; }
.home-card-cv[b-awk1ulwe5l] { border-left-color: #4f46e5; }
.home-card-gn[b-awk1ulwe5l] { border-left-color: #b45309; }
.home-card-ex[b-awk1ulwe5l] { border-left-color: #15803d; }

.home-card-head[b-awk1ulwe5l] { display: flex; align-items: center; gap: 11px; }
.home-card-icon[b-awk1ulwe5l] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 19px;
    flex: 0 0 auto;
}
.home-card h3[b-awk1ulwe5l] {
    font-size: 15px;
    font-weight: 700;
    margin: 0;
    color: var(--color-primary, #052767);
}
.home-card p[b-awk1ulwe5l] {
    font-size: 13px;
    color: var(--color-muted, #6c757d);
    margin: 12px 0 14px;
    flex: 1;
    line-height: 1.5;
}
.home-card-actions[b-awk1ulwe5l] { display: flex; gap: 8px; }

/* Buttons (shared by cards + feedback) */
.home-btn-open[b-awk1ulwe5l] {
    background: var(--color-primary, #052767);
    color: #fff;
    border: 0;
    border-radius: 7px;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}
.home-btn-open:hover[b-awk1ulwe5l] { background: var(--color-accent, #3a0647); color: #fff; }
.home-btn-guide[b-awk1ulwe5l] {
    background: transparent;
    color: var(--color-primary, #052767);
    border: 1px solid var(--color-border, #e2e6ec);
    border-radius: 7px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.home-btn-guide:hover[b-awk1ulwe5l] { background: var(--color-bg, #f8f9fa); }

/* Feedback strip */
.home-feedback[b-awk1ulwe5l] {
    margin-top: 16px;
    background: linear-gradient(90deg, #eef1f8, #f6f1fa);
    border: 1px solid var(--color-border, #e2e6ec);
    border-radius: 12px;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.home-feedback > span[b-awk1ulwe5l] {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-primary, #052767);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* 6 cards: drop to 2 columns before the 1-column mobile stack */
@media (max-width: 1100px) {
    .home-cards[b-awk1ulwe5l] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Stack on small screens */
@media (max-width: 800px) {
    .home-cards[b-awk1ulwe5l] { grid-template-columns: 1fr; }
}
/* _content/AlterHub/Components/Pages/HRLeavePlanner.razor.rz.scp.css */
body[b-a48zyeywaj] {
}

/*********************************GRID FOR VIEW REQUESTS*******************************************/
/* Modal Width */
.modal-lg[b-a48zyeywaj] {
    max-width: 90%; /* Wider modal for larger content */
}

/* General Grid Table Styling */
.table[b-a48zyeywaj] {
    table-layout: fixed; /* Ensures the table width is fixed */
    width: 100%; /* Make table take up full container width */
    min-width: 820px; /* Keep columns legible; container scrolls on narrow screens */
}

        /* Specific Column Widths — sum to 100%; sized for the no-wrap headers + status pill */
        .table thead th:nth-child(1)[b-a48zyeywaj],
        .table tbody td:nth-child(1)[b-a48zyeywaj] {
            width: 7%; /* No. */
            text-align: center;
        }

        .table thead th:nth-child(2)[b-a48zyeywaj],
        .table tbody td:nth-child(2)[b-a48zyeywaj] {
            width: 17%; /* Requested By */
            text-align: center;
        }

        .table thead th:nth-child(3)[b-a48zyeywaj],
        .table tbody td:nth-child(3)[b-a48zyeywaj] {
            width: 15%; /* Leave Type */
            text-align: center;
        }

        .table thead th:nth-child(4)[b-a48zyeywaj],
        .table tbody td:nth-child(4)[b-a48zyeywaj] {
            width: 15%; /* Starting Date */
            text-align: center;
        }

        .table thead th:nth-child(5)[b-a48zyeywaj],
        .table tbody td:nth-child(5)[b-a48zyeywaj] {
            width: 15%; /* Ending Date */
            text-align: center;
        }

        .table thead th:nth-child(6)[b-a48zyeywaj],
        .table tbody td:nth-child(6)[b-a48zyeywaj] {
            width: 16%; /* Business Days */
            text-align: center;
        }

        .table thead th:nth-child(7)[b-a48zyeywaj],
        .table tbody td:nth-child(7)[b-a48zyeywaj] {
            width: 15%; /* Status column */
            text-align: center;
        }

/* Row affordance — double-clickable */
.procurement-requests-grid tbody tr[b-a48zyeywaj] { cursor: pointer; }


/*************************************For Modal of Request Details**********************************************/
.custom-modal[b-a48zyeywaj] {
    max-width: 40%; /* Adjust modal width */
    max-height: 90%; /* Adjust modal width */
    margin: 1.5rem auto; /* Center modal */
    max-height: 700vh; /* Set max height for content */
    overflow-y: auto; /* Enable vertical scrolling */
}

.modal-body[b-a48zyeywaj] {
    max-height: 700vh; /* Set a maximum height for modal content */
    overflow-y: auto; /* Enable vertical scrolling for overflowing content */
}


/************************** Inner container of Modal for Request Details **********************************************/
.request-details-container[b-a48zyeywaj] {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.details-column[b-a48zyeywaj], .procurement-approval-column[b-a48zyeywaj], .executive-approval-column[b-a48zyeywaj] {
    flex: 1; /* Equal width for both columns */
    max-width: 100%; /* Prevents columns from getting too wide */
}

.details-column[b-a48zyeywaj] {
    text-align: left; /* Align text to the left */
}


/******************CUSTOM SEARCH BAR CSS********************/

/* Custom Search panel — HR-specific filter form (F3 restyle, tokens consumed from F1/F2) */
.custom-search-wrapper[b-a48zyeywaj] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    max-width: 100%;
    margin-bottom: var(--space-4);
}

.custom-search-title[b-a48zyeywaj] {
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--space-2);
    padding-left: var(--space-1);
}

.custom-search-container[b-a48zyeywaj] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.custom-search-fields[b-a48zyeywaj] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    width: 100%;
}

    .custom-search-fields select[b-a48zyeywaj],
    .custom-search-fields input[b-a48zyeywaj] {
        flex: 1;
        min-width: 120px;
        max-width: 200px;
    }

    .custom-search-fields label[b-a48zyeywaj] {
        font-weight: var(--weight-semibold);
        font-size: var(--text-sm);
        margin-bottom: 0;
        transform: translateY(4px);
    }

.search-btn[b-a48zyeywaj] {
    flex-shrink: 0;
    height: 38px;
    white-space: nowrap;
}

/***********************ENTITLEMENTS TAB CSS***********************/
.hr-ent-head[b-a48zyeywaj]{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px;}
.hr-ent-foot[b-a48zyeywaj]{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px;}
.hr-note[b-a48zyeywaj]{font-size:12px;color:#5F5E5A;margin-top:10px;}
.hr-uncapped[b-a48zyeywaj]{color:#888780;}
/* _content/AlterHub/Components/Pages/LeavePlanner.razor.rz.scp.css */
body[b-fvdaf3rfim] {
}

/*********************************GRID FOR VIEW REQUESTS*******************************************/
/* Modal Width */
.modal-lg[b-fvdaf3rfim] {
    max-width: 90%; /* Wider modal for larger content */
}

/* General Grid Table Styling */
.table[b-fvdaf3rfim] {
    table-layout: fixed; /* Ensures the table width is fixed */
    width: 100%; /* Make table take up full container width */
    min-width: 820px; /* Keep columns legible; container scrolls on narrow screens */
}

        /* Specific Column Widths — sum to 100%; sized for the no-wrap headers + status pill */
        .table thead th:nth-child(1)[b-fvdaf3rfim],
        .table tbody td:nth-child(1)[b-fvdaf3rfim] {
            width: 22%; /* Leave Type column */
            text-align: center;
        }

        .table thead th:nth-child(2)[b-fvdaf3rfim],
        .table tbody td:nth-child(2)[b-fvdaf3rfim] {
            width: 20%; /* Starting Date column */
            text-align: center;
        }

        .table thead th:nth-child(3)[b-fvdaf3rfim],
        .table tbody td:nth-child(3)[b-fvdaf3rfim] {
            width: 20%; /* Ending Date column */
            text-align: center;
        }

        .table thead th:nth-child(4)[b-fvdaf3rfim],
        .table tbody td:nth-child(4)[b-fvdaf3rfim] {
            width: 18%; /* Business Days column */
            text-align: center;
        }

        .table thead th:nth-child(5)[b-fvdaf3rfim],
        .table tbody td:nth-child(5)[b-fvdaf3rfim] {
            width: 20%; /* Status column */
            text-align: center;
        }

/*************************************CLICKABLE ANIMATION FOR OPENING CHOOSING REQUESTS**********************************************/
/* Row affordance — double-clickable */
.procurement-requests-grid tbody tr[b-fvdaf3rfim] { cursor: pointer; }


/*************************************For Modal of Request Details**********************************************/
.custom-modal[b-fvdaf3rfim] {
    max-width: 40%; /* Adjust modal width */
    max-height: 90%; /* Adjust modal width */
    margin: 1.5rem auto; /* Center modal */
    max-height: 700vh; /* Set max height for content */
    overflow-y: auto; /* Enable vertical scrolling */
}

.modal-body[b-fvdaf3rfim] {
    max-height: 700vh; /* Set a maximum height for modal content */
    overflow-y: auto; /* Enable vertical scrolling for overflowing content */
}


/************************** Inner container of Modal for Request Details **********************************************/
.request-details-container[b-fvdaf3rfim] {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.details-column[b-fvdaf3rfim], .procurement-approval-column[b-fvdaf3rfim], .executive-approval-column[b-fvdaf3rfim] {
    flex: 1; /* Equal width for both columns */
    max-width: 100%; /* Prevents columns from getting too wide */
}

.details-column[b-fvdaf3rfim] {
    text-align: left; /* Align text to the left */
}

/*************************************Calendar Tab Layout**********************************************/
.lc-layout[b-fvdaf3rfim]{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap;}
.lc-cal[b-fvdaf3rfim]{flex:1 1 640px;min-width:320px;}
.lc-balance[b-fvdaf3rfim]{flex:0 0 250px;}
.lc-legend[b-fvdaf3rfim]{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:10px;}
.lg[b-fvdaf3rfim]{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:#5F5E5A;}
.sw[b-fvdaf3rfim]{width:12px;height:12px;border-radius:3px;display:inline-block;}
.lc-bar[b-fvdaf3rfim]{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;padding:12px 14px;background:#E6F1FB;border-radius:12px;}
.lc-error[b-fvdaf3rfim]{color:#A32D2D;font-size:13px;}
/* .balance-card/.balance-rows/.balance-row moved into LeaveBalancePanel.razor.css (Spec A1) —
   scoped CSS here never reached the child component anyway. */
/* _content/AlterHub/Components/Pages/License.razor.rz.scp.css */
/* License page — built on the shared .kpi-strip / .kpi pattern (shared-ui.css).
   The strip wraps so each license fact keeps its own framed card with room to breathe. */
.license-kpis[b-dvqcxkv7xw] {
    flex-wrap: wrap;
}

.license-kpis .kpi[b-dvqcxkv7xw] {
    min-width: 150px;
}

/* The Customer value can be a long company name — let it sit a little smaller
   than a numeric KPI and wrap instead of overflowing its card. */
.license-kpis .kpi-value[b-dvqcxkv7xw] {
    font-size: var(--text-md);
    overflow-wrap: anywhere;
}

/* Apply-key panel — a calm form surface that matches the app's card look. */
.license-form[b-dvqcxkv7xw] {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    padding: var(--space-4) var(--space-6);
    box-shadow: var(--shadow-sm);
}

.license-form h2[b-dvqcxkv7xw] {
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
    color: var(--color-primary);
    margin: 0 0 var(--space-1) 0;
}

.license-form .license-hint[b-dvqcxkv7xw] {
    font-size: var(--text-xs);
    color: var(--color-muted);
    margin: 0 0 var(--space-3) 0;
}

/* Slimmer textarea — narrow, not a full-width slab. */
.license-form textarea[b-dvqcxkv7xw] {
    max-width: 560px;
    resize: vertical;
    font-size: var(--text-sm);
}

.license-form .license-message[b-dvqcxkv7xw] {
    margin-top: var(--space-3);
    font-size: var(--text-sm);
}

.license-form .license-message.is-ok[b-dvqcxkv7xw] {
    color: var(--color-success);
}

.license-form .license-message.is-error[b-dvqcxkv7xw] {
    color: var(--color-danger);
}
/* _content/AlterHub/Components/Pages/ManageOrganization.razor.rz.scp.css */
.table[b-lu3aexs00u] {
    min-width: 900px;
}
/* _content/AlterHub/Components/Pages/ManagersLeavePlanner.razor.rz.scp.css */
/*****************************GRID FOR VIEW REQUESTS*******************************************/
/* General Grid Table Styling */
.table[b-mveld9br31] {
    table-layout: fixed; /* Ensures the table width is fixed */
    width: 100%; /* Make table take up full container width */
    min-width: 820px; /* Keep columns legible; container scrolls on narrow screens */
}

    /* Specific Column Widths — sum to 100%; sized for the no-wrap headers + status pill */
    .table thead th:nth-child(1)[b-mveld9br31],
    .table tbody td:nth-child(1)[b-mveld9br31] {
        width: 18%; /* Requested By column */
        text-align: center;
    }

    .table thead th:nth-child(2)[b-mveld9br31],
    .table tbody td:nth-child(2)[b-mveld9br31] {
        width: 17%; /* Leave Type column */
        text-align: center;
    }

    .table thead th:nth-child(3)[b-mveld9br31],
    .table tbody td:nth-child(3)[b-mveld9br31] {
        width: 16%; /* Starting Date column */
        text-align: center;
    }

    .table thead th:nth-child(4)[b-mveld9br31],
    .table tbody td:nth-child(4)[b-mveld9br31] {
        width: 16%; /* Ending Date column */
        text-align: center;
    }

    .table thead th:nth-child(5)[b-mveld9br31],
    .table tbody td:nth-child(5)[b-mveld9br31] {
        width: 17%; /* Business Days column */
        text-align: center;
    }

    .table thead th:nth-child(6)[b-mveld9br31],
    .table tbody td:nth-child(6)[b-mveld9br31] {
        width: 16%; /* Status column */
        text-align: center;
    }

/* Row affordance — double-clickable */
.procurement-requests-grid tbody tr[b-mveld9br31] { cursor: pointer; }

/*************************************For Modal of Request Details**********************************************/
.custom-modal[b-mveld9br31] {
    max-width: 40%; /* Adjust modal width */
    max-height: 90%; /* Adjust modal width */
    margin: 1.5rem auto; /* Center modal */
    max-height: 700vh; /* Set max height for content */
    overflow-y: auto; /* Enable vertical scrolling */
}

.modal-body[b-mveld9br31] {
    max-height: 700vh; /* Set a maximum height for modal content */
    overflow-y: auto; /* Enable vertical scrolling for overflowing content */
}

/************************** Inner container of Modal for Request Details **********************************************/
.request-details-container[b-mveld9br31] {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.details-column[b-mveld9br31], .procurement-approval-column[b-mveld9br31], .executive-approval-column[b-mveld9br31] {
    flex: 1; /* Equal width for both columns */
    max-width: 100%; /* Prevents columns from getting too wide */
}

.details-column[b-mveld9br31] {
    text-align: left; /* Align text to the left */
}

/* Team calendar legend */
.lc-legend[b-mveld9br31]{display:flex;gap:12px;flex-wrap:wrap;}
.lg[b-mveld9br31]{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:#5F5E5A;}
.sw[b-mveld9br31]{width:12px;height:12px;border-radius:3px;display:inline-block;}
/* _content/AlterHub/Components/Pages/ManageUsers.razor.rz.scp.css */
/* All visual rules for ManageUsers superseded by F2/F3/F4/F5 shared utilities in app.css */

.table[b-gjkzhuravq] {
    min-width: 1120px;
}
/* _content/AlterHub/Components/Pages/Procurement.razor.rz.scp.css */
body[b-v1vvoh1p5x] {
}
/**************************For details of procurement approval**********************************************/
.request-details-container[b-v1vvoh1p5x] {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.details-column[b-v1vvoh1p5x], .procurement-approval-column[b-v1vvoh1p5x], .executive-approval-column[b-v1vvoh1p5x] {
    flex: 1; /* Equal width for both columns */
    max-width: 33%; /* Prevents columns from getting too wide */
}

.details-column[b-v1vvoh1p5x] {
    text-align: left; /* Align text to the left */
}

.procurement-approval-column[b-v1vvoh1p5x] {
    text-align: left; /* Align text to the left */
}

.executive-approval-column[b-v1vvoh1p5x] {
    text-align: left; /* Align text to the left */
}

/*********************************GRID FOR VIEW REQUESTS*******************************************/

/* General Grid Table Styling */
.table[b-v1vvoh1p5x] {
    table-layout: fixed; /* Ensures the table width is fixed */
    width: 100%; /* Make table take up full container width */
    min-width: 820px; /* Keep the requests grid readable; horizontal-scroll on narrow viewports */
}

        /* Specific Column Widths — sized so the no-wrap sortable headers never overflow/overlap */
        .table thead th:nth-child(1)[b-v1vvoh1p5x],
        .table tbody td:nth-child(1)[b-v1vvoh1p5x] {
            width: 13%; /* Request No. column */
        }

        .table thead th:nth-child(2)[b-v1vvoh1p5x],
        .table tbody td:nth-child(2)[b-v1vvoh1p5x] {
            width: 32%; /* Title column */
        }

        .table thead th:nth-child(3)[b-v1vvoh1p5x],
        .table tbody td:nth-child(3)[b-v1vvoh1p5x] {
            width: 14%; /* Request Cost column */
        }

        .table thead th:nth-child(4)[b-v1vvoh1p5x],
        .table tbody td:nth-child(4)[b-v1vvoh1p5x] {
            width: 14%; /* Requested by column */
        }

        .table thead th:nth-child(5)[b-v1vvoh1p5x],
        .table tbody td:nth-child(5)[b-v1vvoh1p5x] {
            width: 14%; /* Date Created column */
        }

        .table thead th:nth-child(6)[b-v1vvoh1p5x],
        .table tbody td:nth-child(6)[b-v1vvoh1p5x] {
            width: 13%; /* Status column */
        }
/*************************************CLICKABLE ANIMATION FOR OPENING CHOOSING REQUESTS**********************************************/
/* Row affordance — double-clickable */
.procurement-requests-grid tbody tr[b-v1vvoh1p5x] { cursor: pointer; }

/*************************************VIEW MODAL STYLING**********************************************/
.custom-modal[b-v1vvoh1p5x] {
    max-width: 90%; /* Adjust modal width */
    max-height: 90%; /* Adjust modal width */
    margin: 1.5rem auto; /* Center modal */
    max-height: 700vh; /* Set max height for content */
    overflow-y: auto; /* Enable vertical scrolling */
}

.modal-body[b-v1vvoh1p5x] {
    max-height: 700vh; /* Set a maximum height for modal content */
    overflow-y: auto; /* Enable vertical scrolling for overflowing content */
}

/**************************TABLE STYLING Table of products in Request Details**********************************************/
/* Static table for product list */
.products-table[b-v1vvoh1p5x] {
    width: 100%; /* Ensure the table spans the full modal width */
    border-collapse: collapse; /* Merge borders for a clean look */
    margin-top: 1rem; /* Add spacing above the table */
}

    .products-table th[b-v1vvoh1p5x], .products-table td[b-v1vvoh1p5x] {
        padding: 0.75rem; /* Add padding to cells */
        text-align: left; /* Align text to the left */
        vertical-align: middle; /* Align cell content vertically */
        border: 1px solid #dee2e6; /* Add border to cells */
    }

    .products-table thead th[b-v1vvoh1p5x] {
        background-color: #f8f9fa; /* Light gray background for headers */
        font-weight: bold; /* Bold header text */
        text-align: center; /* Center align header text */
    }

    .products-table tbody tr:nth-child(odd)[b-v1vvoh1p5x] {
        background-color: #f9f9f9; /* Alternate row colors for readability */
    }

    .products-table tbody tr:hover[b-v1vvoh1p5x] {
        background-color: #f1f1f1; /* Highlight row on hover */
        cursor: pointer; /* Show pointer cursor on hover */
    }

    /* Ensure table columns adjust to content */
    .products-table th[b-v1vvoh1p5x], .products-table td[b-v1vvoh1p5x] {
        word-wrap: break-word; /* Allow breaking long text */
    }


/* General Grid Table Styling */
.products-table[b-v1vvoh1p5x] {
    table-layout: fixed; /* Ensures the table width is fixed */
    width: 100%; /* Make table take up full container width */
}

    /* Header Styling */
    .products-table thead th[b-v1vvoh1p5x] {
        white-space: nowrap; /* Prevent header text from wrapping */
        text-align: center;
        font-weight: bold;
        background-color: #f8f9fa;
        white-space: normal; /* Allow text to wrap to the next line */
        word-wrap: break-word; /* Break long words to prevent overflow */
        overflow: hidden; /* Hide anything overflowing */
    }
    /* Column Styling */
    .products-table tbody td[b-v1vvoh1p5x] {
        overflow: hidden; /* Hide overflowing content */
        text-overflow: ellipsis; /* Add ellipsis for truncated content */
        white-space: nowrap; /* Prevent text wrapping */
    }
        /* Specific Column Widths */
        .products-table thead th:nth-child(1)[b-v1vvoh1p5x],
        .products-table tbody td:nth-child(1)[b-v1vvoh1p5x] {
            width: 30%; /* Title column */
        }

        .products-table thead th:nth-child(2)[b-v1vvoh1p5x],
        .products-table tbody td:nth-child(2)[b-v1vvoh1p5x] {
            width: 20%; /* Description column */
        }

        .products-table thead th:nth-child(3)[b-v1vvoh1p5x],
        .products-table tbody td:nth-child(3)[b-v1vvoh1p5x] {
            width: 20%; /* Vendor's Company Name column */
        }

        .products-table thead th:nth-child(4)[b-v1vvoh1p5x],
        .products-table tbody td:nth-child(4)[b-v1vvoh1p5x] {
            width: 6%; /* PartNumber column */
        }

        .products-table thead th:nth-child(5)[b-v1vvoh1p5x],
        .products-table tbody td:nth-child(5)[b-v1vvoh1p5x] {
            width: 5%; /* Amount column */
        }

        .products-table thead th:nth-child(6)[b-v1vvoh1p5x],
        .products-table tbody td:nth-child(6)[b-v1vvoh1p5x] {
            width: 5%; /* Unit Price column */
        }

        .products-table thead th:nth-child(7)[b-v1vvoh1p5x],
        .products-table tbody td:nth-child(7)[b-v1vvoh1p5x] {
            width: 6%; /* OverallPrice column */
        }
/* _content/AlterHub/Components/Pages/ProcurementApprovals.razor.rz.scp.css */
/*********************************GRID FOR VIEW REQUESTS*******************************************/
/* General Grid Table Styling */
.table[b-6gnf117iu0] {
    table-layout: fixed; /* Ensures the table width is fixed */
    width: 100%; /* Make table take up full container width */
    min-width: 820px; /* Keep the requests grid readable; horizontal-scroll on narrow viewports */
}

    /* Specific Column Widths — sized so the no-wrap sortable headers never overflow/overlap */
    .table thead th:nth-child(1)[b-6gnf117iu0],
    .table tbody td:nth-child(1)[b-6gnf117iu0] {
        width: 13%; /* Request No. column */
    }

    .table thead th:nth-child(2)[b-6gnf117iu0],
    .table tbody td:nth-child(2)[b-6gnf117iu0] {
        width: 32%; /* Title column */
    }

    .table thead th:nth-child(3)[b-6gnf117iu0],
    .table tbody td:nth-child(3)[b-6gnf117iu0] {
        width: 14%; /* Request Cost column */
    }

    .table thead th:nth-child(4)[b-6gnf117iu0],
    .table tbody td:nth-child(4)[b-6gnf117iu0] {
        width: 14%; /* Requested by column */
    }

    .table thead th:nth-child(5)[b-6gnf117iu0],
    .table tbody td:nth-child(5)[b-6gnf117iu0] {
        width: 14%; /* DateCreated column */
    }

    .table thead th:nth-child(6)[b-6gnf117iu0],
    .table tbody td:nth-child(6)[b-6gnf117iu0] {
        width: 13%; /* Status column */
    }

/*************************************CLICKABLE ANIMATION FOR OPENING REQUESTS**********************************************/
/* Row affordance — double-clickable */
.procurement-requests-grid tbody tr[b-6gnf117iu0] { cursor: pointer; }

/*************************************VIEW MODAL STYLING**********************************************/
.custom-modal[b-6gnf117iu0] {
    max-width: 90%; /* Adjust modal width */
    margin: 1.5rem auto; /* Center modal */
    max-height: 700vh; /* Set max height for content */
    overflow-y: auto; /* Enable vertical scrolling */
}

.modal-body[b-6gnf117iu0] {
    max-height: 700vh; /* Set a maximum height for modal content */
    overflow-y: auto; /* Enable vertical scrolling for overflowing content */
}

/**************************TABLE STYLING — products + approval-pipeline tables**********************************************/
.products-table[b-6gnf117iu0] {
    width: 100%; /* Ensure the table spans the full modal width */
    border-collapse: collapse; /* Merge borders for a clean look */
    margin-top: 1rem; /* Add spacing above the table */
    table-layout: fixed; /* Ensures the table width is fixed */
}

    .products-table th[b-6gnf117iu0], .products-table td[b-6gnf117iu0] {
        padding: 0.75rem; /* Add padding to cells */
        text-align: left; /* Align text to the left */
        vertical-align: middle; /* Align cell content vertically */
        border: 1px solid #dee2e6; /* Add border to cells */
        word-wrap: break-word; /* Allow breaking long text */
    }

    .products-table thead th[b-6gnf117iu0] {
        background-color: #f8f9fa; /* Light gray background for headers */
        font-weight: bold; /* Bold header text */
        text-align: center; /* Center align header text */
        white-space: normal; /* Allow text to wrap to the next line */
        overflow: hidden; /* Hide anything overflowing */
    }

    .products-table tbody tr:nth-child(odd)[b-6gnf117iu0] {
        background-color: #f9f9f9; /* Alternate row colors for readability */
    }

    .products-table tbody tr:hover[b-6gnf117iu0] {
        background-color: #f1f1f1; /* Highlight row on hover */
    }

/**************************For request general details**********************************************/
.request-details-container[b-6gnf117iu0] {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3);
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.details-column[b-6gnf117iu0] {
    flex: 1; /* Equal width for the column(s) */
    text-align: left; /* Align text to the left */
}
/* _content/AlterHub/Components/Pages/ProcurementFinance.razor.rz.scp.css */
body[b-qjj0r2ihvl] {
}

/*********************************GRID FOR VIEW REQUESTS*******************************************/
/* Modal Width */
.modal-lg[b-qjj0r2ihvl] {
    max-width: 90%; /* Wider modal for larger content */
}

/* General Grid Table Styling */
.table[b-qjj0r2ihvl] {
    table-layout: fixed; /* Ensures the table width is fixed */
    width: 100%; /* Make table take up full container width */
    min-width: 820px; /* Keep the requests grid readable; horizontal-scroll on narrow viewports */
}

        /* Specific Column Widths — sized so the no-wrap sortable headers never overflow/overlap */
        .table thead th:nth-child(1)[b-qjj0r2ihvl],
        .table tbody td:nth-child(1)[b-qjj0r2ihvl] {
            width: 13%; /* Request No. column */
        }

        .table thead th:nth-child(2)[b-qjj0r2ihvl],
        .table tbody td:nth-child(2)[b-qjj0r2ihvl] {
            width: 30%; /* Title column */
        }

        .table thead th:nth-child(3)[b-qjj0r2ihvl],
        .table tbody td:nth-child(3)[b-qjj0r2ihvl] {
            width: 14%; /* Request Cost column */
        }

        .table thead th:nth-child(4)[b-qjj0r2ihvl],
        .table tbody td:nth-child(4)[b-qjj0r2ihvl] {
            width: 14%; /* Requested by column */
        }

        .table thead th:nth-child(5)[b-qjj0r2ihvl],
        .table tbody td:nth-child(5)[b-qjj0r2ihvl] {
            width: 14%; /* DateCreated column */
        }

        .table thead th:nth-child(6)[b-qjj0r2ihvl],
        .table tbody td:nth-child(6)[b-qjj0r2ihvl] {
            width: 15%; /* Date Approved */
        }

/*************************************CLICKABLE ANIMATION FOR OPENING CHOOSING REQUESTS**********************************************/
/* Row affordance — double-clickable */
.procurement-requests-grid tbody tr[b-qjj0r2ihvl] { cursor: pointer; }

/*************************************VIEW MODAL STYLING**********************************************/
.custom-modal[b-qjj0r2ihvl] {
    max-width: 90%; /* Adjust modal width */
    max-height: 90%; /* Adjust modal width */
    margin: 1.5rem auto; /* Center modal */
    max-height: 700vh; /* Set max height for content */
    overflow-y: auto; /* Enable vertical scrolling */
}

.modal-body[b-qjj0r2ihvl] {
    max-height: 700vh; /* Set a maximum height for modal content */
    overflow-y: auto; /* Enable vertical scrolling for overflowing content */
}

/**************************TABLE STYLING Table of products in Request Details**********************************************/
/* Static table for product list */
.products-table[b-qjj0r2ihvl] {
    width: 100%; /* Ensure the table spans the full modal width */
    border-collapse: collapse; /* Merge borders for a clean look */
    margin-top: 1rem; /* Add spacing above the table */
}

    .products-table th[b-qjj0r2ihvl], .products-table td[b-qjj0r2ihvl] {
        padding: 0.75rem; /* Add padding to cells */
        text-align: left; /* Align text to the left */
        vertical-align: middle; /* Align cell content vertically */
        border: 1px solid #dee2e6; /* Add border to cells */
    }

    .products-table thead th[b-qjj0r2ihvl] {
        background-color: #f8f9fa; /* Light gray background for headers */
        font-weight: bold; /* Bold header text */
        text-align: center; /* Center align header text */
    }

    .products-table tbody tr:nth-child(odd)[b-qjj0r2ihvl] {
        background-color: #f9f9f9; /* Alternate row colors for readability */
    }

    .products-table tbody tr:hover[b-qjj0r2ihvl] {
        background-color: #f1f1f1; /* Highlight row on hover */
        cursor: pointer; /* Show pointer cursor on hover */
    }

    /* Ensure table columns adjust to content */
    .products-table th[b-qjj0r2ihvl], .products-table td[b-qjj0r2ihvl] {
        word-wrap: break-word; /* Allow breaking long text */
    }


/* General Grid Table Styling */
.products-table[b-qjj0r2ihvl] {
    table-layout: fixed; /* Ensures the table width is fixed */
    width: 100%; /* Make table take up full container width */
}

    /* Header Styling */
    .products-table thead th[b-qjj0r2ihvl] {
        white-space: nowrap; /* Prevent header text from wrapping */
        text-align: center;
        font-weight: bold;
        background-color: #f8f9fa;
        white-space: normal; /* Allow text to wrap to the next line */
        word-wrap: break-word; /* Break long words to prevent overflow */
        overflow: hidden; /* Hide anything overflowing */
    }
    /* Column Styling */
    .products-table tbody td[b-qjj0r2ihvl] {
        overflow: hidden; /* Hide overflowing content */
        text-overflow: ellipsis; /* Add ellipsis for truncated content */
        white-space: nowrap; /* Prevent text wrapping */
    }
        /* Specific Column Widths */
        .products-table thead th:nth-child(1)[b-qjj0r2ihvl],
        .products-table tbody td:nth-child(1)[b-qjj0r2ihvl] {
            width: 30%; /* Title column */
        }

        .products-table thead th:nth-child(2)[b-qjj0r2ihvl],
        .products-table tbody td:nth-child(2)[b-qjj0r2ihvl] {
            width: 20%; /* Description column */
        }

        .products-table thead th:nth-child(3)[b-qjj0r2ihvl],
        .products-table tbody td:nth-child(3)[b-qjj0r2ihvl] {
            width: 20%; /* Vendor's Company Name column */
        }

        .products-table thead th:nth-child(4)[b-qjj0r2ihvl],
        .products-table tbody td:nth-child(4)[b-qjj0r2ihvl] {
            width: 6%; /* PartNumber column */
        }

        .products-table thead th:nth-child(5)[b-qjj0r2ihvl],
        .products-table tbody td:nth-child(5)[b-qjj0r2ihvl] {
            width: 5%; /* Amount column */
        }

        .products-table thead th:nth-child(6)[b-qjj0r2ihvl],
        .products-table tbody td:nth-child(6)[b-qjj0r2ihvl] {
            width: 5%; /* Unit Price column */
        }

        .products-table thead th:nth-child(7)[b-qjj0r2ihvl],
        .products-table tbody td:nth-child(7)[b-qjj0r2ihvl] {
            width: 6%; /* OverallPrice column */
        }

/**************************For details of procurement approval**********************************************/
.request-details-container[b-qjj0r2ihvl] {
    display: flex;
    justify-content: space-between; /* Creates space between columns */
    gap: var(--space-3); /* Adds spacing between columns */
    padding: var(--space-3); /* Adds padding inside the container */
    background-color: var(--color-bg); /* Page background */
    border: 1px solid var(--color-border); /* Subtle border */
    border-radius: var(--radius-md); /* Rounded corners */
}

.details-column[b-qjj0r2ihvl], .procurement-approval-column[b-qjj0r2ihvl], .executive-approval-column[b-qjj0r2ihvl] {
    flex: 1; /* Equal width for both columns */
    max-width: 33%; /* Prevents columns from getting too wide */
}

.details-column[b-qjj0r2ihvl] {
    text-align: left; /* Align text to the left */
}

.procurement-approval-column[b-qjj0r2ihvl] {
    text-align: left; /* Align text to the left */
}

.executive-approval-column[b-qjj0r2ihvl] {
    text-align: left; /* Align text to the left */
}
/* _content/AlterHub/Components/Pages/Shared/LeaveBalancePanel.razor.rz.scp.css */
/* Soft-coloured self-contained leave-balance card (Spec A1).
   Lives in the component's own scoped CSS so it actually reaches the panel's
   markup — a parent page's scoped CSS does not cross the component boundary. */
.balance-card[b-24vl7qt10v]{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:14px;
    background:#F4F2FC;                 /* soft lavender, matches the leave theme (#7F77DD/#CECBF6) */
    border:1px solid #E4DFF7;
    border-radius:14px;
    padding:18px 16px 14px;
    box-shadow:0 1px 4px rgba(20,16,60,.07);
}
.balance-title[b-24vl7qt10v]{
    align-self:flex-start;
    font-size:12px;
    font-weight:700;
    letter-spacing:.05em;
    text-transform:uppercase;
    color:#4A4670;
}
.balance-donut[b-24vl7qt10v]{display:flex;justify-content:center;}
.balance-rows[b-24vl7qt10v]{
    width:100%;
    display:flex;
    flex-direction:column;
    gap:6px;
    font-size:12.5px;
}
.balance-row[b-24vl7qt10v]{
    display:flex;
    justify-content:space-between;
    gap:10px;
    padding-bottom:6px;
    border-bottom:1px solid rgba(20,16,60,.07);
}
.balance-row:last-child[b-24vl7qt10v]{border-bottom:none;padding-bottom:0;}
.bl-label[b-24vl7qt10v]{color:#5A5677;}
.bl-val[b-24vl7qt10v]{font-weight:600;color:#312B57;white-space:nowrap;}
/* _content/AlterHub/Components/Pages/Shared/LeaveCalendar.razor.rz.scp.css */
.lc-toolbar[b-4oasah96b1]{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:var(--space-3);margin-bottom:var(--space-3);}
.lc-card[b-4oasah96b1]{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:var(--space-4);}
.lc-card .lc-head[b-4oasah96b1]{margin-bottom:var(--space-1);}
/* minmax(0,1fr) — NOT 1fr (=minmax(auto,1fr)): nowrap chips make each column's min-content
   as wide as the untruncated chip text, which blew the 7-col grid past the viewport on mobile
   (fine when empty, overflowed once leaves were present). 0 lets the chip ellipsis actually clip. */
.lc-grid[b-4oasah96b1]{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;}
.lc-head .wk[b-4oasah96b1]{font-size:11px;font-weight:600;color:#888780;text-align:center;padding:4px 0;}
.cell[b-4oasah96b1]{position:relative;min-height:74px;border:.5px solid rgba(0,0,0,.12);border-radius:8px;padding:6px;background:#fff;user-select:none;}
.cell.ok[b-4oasah96b1]{cursor:pointer;}
.cell.ok:hover[b-4oasah96b1]{background:#f5f4ef;}
.cell.off[b-4oasah96b1]{color:#888780;background:transparent;border-color:transparent;}
.cell.block[b-4oasah96b1]{background:rgba(99,153,34,.17);cursor:not-allowed;}
.cell.today[b-4oasah96b1]{box-shadow:inset 0 0 0 2px #378ADD;}
.cell.sel[b-4oasah96b1]{background:#E6F1FB;box-shadow:inset 0 0 0 2px #378ADD;}
.num[b-4oasah96b1]{font-size:12px;font-weight:600;color:#5F5E5A;}
.cell.block .num[b-4oasah96b1]{color:#3B6D11;}
.hol[b-4oasah96b1]{font-size:10px;color:#3B6D11;margin-top:2px;line-height:1.2;}
.chip[b-4oasah96b1]{display:block;font-size:10px;line-height:1.35;padding:1px 5px;border-radius:5px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;}
.chip.leave[b-4oasah96b1]{background:#CECBF6;color:#26215C;}
.chip.more[b-4oasah96b1]{background:#eef0f4;color:#475;font-weight:600;text-align:center;}
.chip.remote[b-4oasah96b1]{background:#9FE1CB;color:#04342C;}
.chip.pend[b-4oasah96b1]{outline:1px dashed currentColor;}
.nb[b-4oasah96b1]{width:32px;height:32px;border-radius:8px;border:.5px solid rgba(0,0,0,.22);background:transparent;cursor:pointer;}

/* Phones: 7 columns get narrow, so tighten the card/cells/chips to keep the grid readable. */
@media (max-width: 600px){
    .lc-card[b-4oasah96b1]{padding:var(--space-2);}
    .lc-grid[b-4oasah96b1]{gap:3px;}
    .cell[b-4oasah96b1]{min-height:52px;padding:3px;border-radius:6px;}
    .num[b-4oasah96b1]{font-size:11px;}
    .hol[b-4oasah96b1]{font-size:8px;}
    .chip[b-4oasah96b1]{font-size:8px;padding:1px 3px;border-radius:4px;margin-top:2px;}
}
/* _content/AlterHub/Components/Pages/SubsystemSettings/PurchasesSettingsTab.razor.rz.scp.css */
.table[b-efjnvcjzz7] {
    min-width: 900px;
}
/* _content/AlterHub/Components/Pages/Ticketing.razor.rz.scp.css */
/* General Display Grid Styling */
.table[b-rniyuwldkk] {
    table-layout: fixed; /* Ensures the table width is fixed */
    width: 100%; /* Make table take up full container width */
    min-width: 820px;
}

        /* Specific Column Widths */
        .table thead th:nth-child(1)[b-rniyuwldkk],
        .table tbody td:nth-child(1)[b-rniyuwldkk] {
            width: 5%; /* No. column */
        }

        .table thead th:nth-child(2)[b-rniyuwldkk],
        .table tbody td:nth-child(2)[b-rniyuwldkk] {
            width: 22%; /* Title column */
        }

        .table thead th:nth-child(3)[b-rniyuwldkk],
        .table tbody td:nth-child(3)[b-rniyuwldkk] {
            width: 36%; /* Description column */
        }

        .table thead th:nth-child(4)[b-rniyuwldkk],
        .table tbody td:nth-child(4)[b-rniyuwldkk] {
            width: 9%; /* Priority column */
        }

        .table thead th:nth-child(5)[b-rniyuwldkk],
        .table tbody td:nth-child(5)[b-rniyuwldkk] {
            width: 14%; /* Date column */
        }

        .table thead th:nth-child(6)[b-rniyuwldkk],
        .table tbody td:nth-child(6)[b-rniyuwldkk] {
            width: 14%; /* Status column */
        }
/* Row affordance — single-click to open */
.ongoing-tickets-grid tbody tr[b-rniyuwldkk],
.clickable-row[b-rniyuwldkk] { cursor: pointer; }

/* Message Styling for Empty Grid */
.grid-message[b-rniyuwldkk] {
    text-align: center;
    font-size: 16px;
    color: #6c757d;
    padding: 20px;
}

.messages-container[b-rniyuwldkk] {
    flex: 1 1 auto;
    min-height: 220px;
    max-height: 52vh;
    overflow-y: auto; /* Add scroll if content exceeds height */
    background-color: #f9f9f9; /* Slight background for separation */
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 5px;
    margin-top: 10px;
}

.message-item[b-rniyuwldkk] {
    margin-bottom: 10px;
}

    .message-item p[b-rniyuwldkk] {
        margin: 0; /* Remove extra spacing */
    }

    .message-item small[b-rniyuwldkk] {
        color: #6c757d; /* Light gray for date text */
    }

/* Custom Buttons */
.btn-CustomResolveTicket[b-rniyuwldkk] {
    background-color: #28a745;
    color: white;
}

    .btn-CustomResolveTicket:hover[b-rniyuwldkk] {
        background-color: #218838;
        box-shadow: 0 2px 5px #fff;
    }

    /* Remove Focus Outline */
    .btn-CustomResolveTicket:focus[b-rniyuwldkk] {
        outline: none;
    }

/* Reviewed-by label spacing in the ticket-detail modal */
.reviewed-user[b-rniyuwldkk] {
    margin-left: 5px; /* Adjust spacing as needed */
}
/* _content/AlterHub/Components/Pages/TicketManagement.razor.rz.scp.css */
body[b-mcu9cywu8i] {
}
/* Modal Width */
.modal-lg[b-mcu9cywu8i] {
    max-width: 90%; /* Wider modal for larger content */
}

/* General Grid Table Styling */
.table[b-mcu9cywu8i] {
    table-layout: fixed; /* Ensures the table width is fixed */
    width: 100%; /* Make table take up full container width */
    min-width: 820px;
}

        /* Specific Column Widths */
        .table thead th:nth-child(1)[b-mcu9cywu8i],
        .table tbody td:nth-child(1)[b-mcu9cywu8i] {
            width: 5%; /* No. column */
        }

        .table thead th:nth-child(2)[b-mcu9cywu8i],
        .table tbody td:nth-child(2)[b-mcu9cywu8i] {
            width: 20%; /* Title column */
        }

        .table thead th:nth-child(3)[b-mcu9cywu8i],
        .table tbody td:nth-child(3)[b-mcu9cywu8i] {
            width: 25%; /* Description column */
        }

        .table thead th:nth-child(4)[b-mcu9cywu8i],
        .table tbody td:nth-child(4)[b-mcu9cywu8i] {
            width: 9%; /* Priority column */
        }

        .table thead th:nth-child(5)[b-mcu9cywu8i],
        .table tbody td:nth-child(5)[b-mcu9cywu8i] {
            width: 14%; /* CreatedBy column */
        }

        .table thead th:nth-child(6)[b-mcu9cywu8i],
        .table tbody td:nth-child(6)[b-mcu9cywu8i] {
            width: 14%; /* Date column */
        }

        .table thead th:nth-child(7)[b-mcu9cywu8i],
        .table tbody td:nth-child(7)[b-mcu9cywu8i] {
            width: 13%; /* Status column */
        }

/* Row affordance — single-clickable */
.view-tickets-grid tbody tr[b-mcu9cywu8i],
.clickable-row[b-mcu9cywu8i] { cursor: pointer; }

/* Message Styling for Empty Grid */
.grid-message[b-mcu9cywu8i] {
    text-align: center;
    font-size: 16px;
    color: #6c757d;
    padding: 20px;
}

.messages-container[b-mcu9cywu8i] {
    flex: 1 1 auto;
    min-height: 220px;
    max-height: 52vh;
    overflow-y: auto; /* Add scroll if content exceeds height */
    background-color: #f9f9f9; /* Slight background for separation */
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 5px;
    margin-top: 10px;
}

.message-item[b-mcu9cywu8i] {
    margin-bottom: 10px;
}

    .message-item p[b-mcu9cywu8i] {
        margin: 0; /* Remove extra spacing */
    }

    .message-item small[b-mcu9cywu8i] {
        color: #6c757d; /* Light gray for date text */
    }



/* _content/AlterHub/Components/Shared/CreateExpenseReportModal.razor.rz.scp.css */
/******************************** CREATE EXPENSE REPORT MODAL ********************************************/

/* Header row: Purpose (wide) + Period from + Period to */
.report-header-grid[b-xlx79iwimw] {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.report-header-grid .form-label[b-xlx79iwimw] {
    font-weight: bold;
}

/* Pre-approval toggle + helper text */
.pre-approval-row[b-xlx79iwimw] {
    margin-bottom: 18px;
}

.pre-approval-check[b-xlx79iwimw] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    cursor: pointer;
}

.pre-approval-help[b-xlx79iwimw] {
    color: #6c757d;
    font-size: 12px;
    margin-top: 4px;
}

/* Line table */
.lines-section[b-xlx79iwimw] {
    margin-top: 8px;
}

.expense-lines-table[b-xlx79iwimw] {
    table-layout: fixed;
    width: 100%;
}

    .expense-lines-table thead th[b-xlx79iwimw] {
        white-space: normal;
        text-align: center;
        font-weight: bold;
        background-color: #f8f9fa;
        word-wrap: break-word;
    }

    .expense-lines-table tbody td[b-xlx79iwimw] {
        vertical-align: middle;
        overflow: visible;
    }

    /* Column widths: # · Date · Account · Payment · Category · Amount · remove */
    .expense-lines-table th:nth-child(1)[b-xlx79iwimw], .expense-lines-table td:nth-child(1)[b-xlx79iwimw] { width: 5%; text-align: center; }
    .expense-lines-table th:nth-child(2)[b-xlx79iwimw], .expense-lines-table td:nth-child(2)[b-xlx79iwimw] { width: 15%; }
    .expense-lines-table th:nth-child(3)[b-xlx79iwimw], .expense-lines-table td:nth-child(3)[b-xlx79iwimw] { width: 22%; }
    .expense-lines-table th:nth-child(4)[b-xlx79iwimw], .expense-lines-table td:nth-child(4)[b-xlx79iwimw] { width: 17%; }
    .expense-lines-table th:nth-child(5)[b-xlx79iwimw], .expense-lines-table td:nth-child(5)[b-xlx79iwimw] { width: 19%; }
    .expense-lines-table th:nth-child(6)[b-xlx79iwimw], .expense-lines-table td:nth-child(6)[b-xlx79iwimw] { width: 14%; }
    .expense-lines-table th:nth-child(7)[b-xlx79iwimw], .expense-lines-table td:nth-child(7)[b-xlx79iwimw] { width: 8%; text-align: center; white-space: nowrap; }

.row-no[b-xlx79iwimw] {
    font-weight: 600;
    color: #6c757d;
}

/* Ghost euro affordance inside the Amount input (input type=number can't use ::before) */
.amount-wrap[b-xlx79iwimw] {
    position: relative;
}

    .amount-wrap .ghost-euro[b-xlx79iwimw] {
        position: absolute;
        left: 8px;
        top: 50%;
        transform: translateY(-50%);
        color: #adb5bd;
        pointer-events: none;
        font-size: 0.9em;
    }

.amount-input[b-xlx79iwimw] {
    padding-left: 20px;
}

/* Live totals strip */
.totals-strip[b-xlx79iwimw] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 18px;
    padding: 14px 16px;
    background: #f8f9fa;
    border: 1px solid #e3e6ea;
    border-radius: 6px;
}

.total-cell[b-xlx79iwimw] {
    text-align: center;
}

.total-label[b-xlx79iwimw] {
    font-size: 12px;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 4px;
}

.total-value[b-xlx79iwimw] {
    font-size: 18px;
    font-weight: 700;
    color: #212529;
}

.total-grand .total-value[b-xlx79iwimw] {
    color: #198754;
}

/* Stacked card layout on narrow screens — data-label cells become captions. */
@media (max-width: 800px) {
    .report-header-grid[b-xlx79iwimw] { grid-template-columns: 1fr; }
    .expense-lines-table thead[b-xlx79iwimw] { display: none; }
    .expense-lines-table[b-xlx79iwimw], .expense-lines-table tbody[b-xlx79iwimw] { display: block; width: 100%; }
    .expense-lines-table tr[b-xlx79iwimw] {
        display: block; width: 100%;
        border: 1px solid #e3e6ea; border-radius: 6px;
        padding: 8px 10px; margin-bottom: 10px;
    }
    .expense-lines-table td[b-xlx79iwimw] {
        display: block; width: 100% !important;
        padding: 4px 0; text-align: left;
    }
    .expense-lines-table td[b-xlx79iwimw]::before {
        content: attr(data-label);
        display: block; font-size: 12px; font-weight: 600;
        color: #6c757d; margin-bottom: 2px;
    }
    .expense-lines-table td.remove-cell[b-xlx79iwimw] { text-align: right; }
    .expense-lines-table td.remove-cell[b-xlx79iwimw]::before { content: ""; }
}
/* _content/AlterHub/Components/Shared/CreateProcurementRequestModal.razor.rz.scp.css */
/********************************CREATE REQUEST MODAL********************************************/
/* Modal Width */
.modal-lg[b-x2zkkbs240] {
    max-width: 90%; /* Wider modal for larger content */
}

/* Request Title Styling */
.request-title-section[b-x2zkkbs240] {
    margin-bottom: 20px; /* Adds a gap between title and product sections */
}

.request-title-input[b-x2zkkbs240] {
    width: 50%; /* Make the input field narrower */
    margin-bottom: 10px; /* Add a bit of spacing below the input */
}

/* Ensure bold label */
.form-label[b-x2zkkbs240] {
    font-weight: bold;
}

/* Product Section Margin */
.product-section[b-x2zkkbs240] {
    margin-top: 30px; /* Adds space above the product grid */
}

/**************************TABLE STYLING Table for products Entry in Create Request **********************************************/

/* General Grid Table Styling */
.entry-products-table[b-x2zkkbs240] {
    table-layout: fixed; /* Ensures the table width is fixed */
    width: 100%; /* Make table take up full container width */
}

    /* Header Styling */
    .entry-products-table thead th[b-x2zkkbs240] {
        white-space: nowrap; /* Prevent header text from wrapping */
        text-align: center;
        font-weight: bold;
        background-color: #f8f9fa;
        white-space: normal; /* Allow text to wrap to the next line */
        word-wrap: break-word; /* Break long words to prevent overflow */
        overflow: hidden; /* Hide anything overflowing */
    }
    /* Column Styling — allow wrapped content and validation messages to show (no clipping) */
    .entry-products-table tbody td[b-x2zkkbs240] {
        white-space: normal; /* Allow text to wrap to the next line */
        overflow: visible; /* Show overflowing content (e.g. validation messages) */
        text-overflow: clip; /* No ellipsis truncation */
        vertical-align: top; /* Keep cell content top-aligned as rows grow */
    }
        /* Specific Column Widths */
        .entry-products-table thead th:nth-child(1)[b-x2zkkbs240],
        .entry-products-table tbody td:nth-child(1)[b-x2zkkbs240] {
            width: 17%; /* Product column */
        }
        /* Specific Column Widths */
        .entry-products-table thead th:nth-child(2)[b-x2zkkbs240],
        .entry-products-table tbody td:nth-child(2)[b-x2zkkbs240] {
            width: 15%; /* Description column */
        }
        /* Specific Column Widths */
        .entry-products-table thead th:nth-child(3)[b-x2zkkbs240],
        .entry-products-table tbody td:nth-child(3)[b-x2zkkbs240] {
            width: 16%; /* Vendor's Company Name column */
        }
        /* Specific Column Widths */
        .entry-products-table thead th:nth-child(4)[b-x2zkkbs240],
        .entry-products-table tbody td:nth-child(4)[b-x2zkkbs240] {
            width: 11%; /* PartNumber column */
        }
        /* Specific Column Widths */
        .entry-products-table thead th:nth-child(5)[b-x2zkkbs240],
        .entry-products-table tbody td:nth-child(5)[b-x2zkkbs240] {
            width: 8%; /* Amount column */
        }
        /* Specific Column Widths */
        .entry-products-table thead th:nth-child(6)[b-x2zkkbs240],
        .entry-products-table tbody td:nth-child(6)[b-x2zkkbs240] {
            width: 12%; /* Unit Price column */
        }
        /* Specific Column Widths */
        .entry-products-table thead th:nth-child(7)[b-x2zkkbs240],
        .entry-products-table tbody td:nth-child(7)[b-x2zkkbs240] {
            width: 9%; /* OverallPrice column */
        }
        /* Specific Column Widths — keep the Remove button on one line */
        .entry-products-table thead th:nth-child(8)[b-x2zkkbs240],
        .entry-products-table tbody td:nth-child(8)[b-x2zkkbs240] {
            width: 12%; /* Actions column */
            white-space: nowrap;
        }

    /* Euro prefix addon on the Unit Price input — a clean attached € box (no crowding/clipping) */
    .unit-price-group[b-x2zkkbs240] {
        flex-wrap: nowrap;
    }

        .unit-price-group .input-group-text[b-x2zkkbs240] {
            padding: 0 0.5rem;
            color: #6c757d;
            background-color: #f1f3f5;
        }

    /* Validation messages must wrap and stay visible under the field */
    .entry-products-table .validation-message[b-x2zkkbs240] {
        color: #A32D2D;
        font-size: 12px;
        display: block;
        white-space: normal;
    }

/**************************Validation Container for errors in Create process **********************************************/
/* Custom styles for validation summary */
.validation-summary-container[b-x2zkkbs240] {
    margin-bottom: 20px;
    padding: 10px;
    border: 1px solid #fff;
    background-color: #fff;
    color: #721c24;
    font-weight: bold;
    font-size: 1.1em;
    border-radius: 5px;
    display: inline-block; /* Allow the width to depend on content */
    width: auto; /* Automatically adjust width to content */
    min-width: 0.001px; /* Optional: Minimum width in case of very small content */
    min-height: 0.001px;
}

        /* Optional: Style individual error messages for more emphasis */
    .validation-summary-container ul[b-x2zkkbs240]

{
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.validation-summary-container li[b-x2zkkbs240] {
    padding: 5px;
}
/* _content/AlterHub/Components/Shared/CreateTicketModal.razor.rz.scp.css */
/******** Create Ticket Modal properties ***************/

/* Specific Modal Width (wide enough for comfortable rich-text editing on PC) */
.create-ticket-modal .modal-dialog[b-e9cjhooetb] {
    max-width: 1100px;
    width: 94%;
}

/* Specific Modal Height */
.create-ticket-modal .modal-content[b-e9cjhooetb] {
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

/* Ensure the modal body expands properly */
.create-ticket-modal .modal-body[b-e9cjhooetb] {
    flex-grow: 1;
    overflow-y: auto; /* Adds scrolling if content is too large */
}

/* Fullscreen Option (Optional) */
.create-ticket-modal.fullscreen .modal-dialog[b-e9cjhooetb] {
    max-width: 100vw;
    height: 100vh;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.create-ticket-modal.fullscreen .modal-content[b-e9cjhooetb] {
    width: 90vw;
    height: 90vh;
}
/* _content/AlterHub/Components/Shared/LanguageSwitcher.razor.rz.scp.css */
.lang-switcher[b-e1n4jv9dhy] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
}

.lang-link[b-e1n4jv9dhy] {
    color: inherit;
    text-decoration: none;
    opacity: 0.6;
    padding: 2px 4px;
    border-radius: 3px;
    transition: opacity 0.15s;
}

.lang-link:hover[b-e1n4jv9dhy] {
    opacity: 1;
    text-decoration: underline;
}

.lang-link.active[b-e1n4jv9dhy] {
    font-weight: 600;
    opacity: 1;
}

.lang-sep[b-e1n4jv9dhy] {
    opacity: 0.3;
}

/* Segmented pill toggle (account dropdown). */
.lang-seg[b-e1n4jv9dhy] {
    display: inline-flex;
    background: #eef1f6;
    border-radius: 9999px;
    padding: 3px;
    gap: 2px;
}

.lang-seg-btn[b-e1n4jv9dhy] {
    padding: 4px 14px;
    border-radius: 9999px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    color: #052767;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

.lang-seg-btn:hover[b-e1n4jv9dhy] {
    background: rgba(5, 39, 103, 0.07);
    color: #052767;
}

.lang-seg-btn.active[b-e1n4jv9dhy],
.lang-seg-btn.active:hover[b-e1n4jv9dhy] {
    background: #052767;
    color: #ffffff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
/* _content/AlterHub/Components/Shared/MyPagination.razor.rz.scp.css */
/* Token-styled pagination to match the project's .toolbar-btn look (item 10) */
.pg-btn[b-a2dh33h69n] {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-1) var(--space-3);
    color: var(--color-text);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}
.pg-btn:hover:not(:disabled)[b-a2dh33h69n] {
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.pg-btn:disabled[b-a2dh33h69n] {
    opacity: .5;
    cursor: default;
}
.pg-btn-active[b-a2dh33h69n] {
    background: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-md);
    padding: var(--space-1) var(--space-3);
    color: var(--color-surface);
    font-weight: var(--weight-semibold);
    cursor: pointer;
}
.pg-select[b-a2dh33h69n] {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-1) var(--space-3);
    color: var(--color-text);
    font-weight: var(--weight-semibold);
    background: var(--color-surface);
    cursor: pointer;
}
.pg-select:hover[b-a2dh33h69n], .pg-select:focus[b-a2dh33h69n] {
    border-color: var(--color-primary);
    outline: none;
}
/* _content/AlterHub/Components/Shared/RichTextEditor.razor.rz.scp.css */
.rt-editor[b-jx2603ld3p]  .ql-container { min-height: 180px; font-size: 14px; background: #fff; }
.rt-editor[b-jx2603ld3p]  .ql-toolbar { background: #f8f9fa; border-radius: 6px 6px 0 0; }
.rt-editor[b-jx2603ld3p]  .ql-container { border-radius: 0 0 6px 6px; }
.rt-editor[b-jx2603ld3p]  .ql-editor img { max-width: 100%; height: auto; border-radius: 4px; }
.rt-meta[b-jx2603ld3p] { display: flex; justify-content: flex-end; gap: 12px; margin-top: 4px; }
.rt-count[b-jx2603ld3p] { font-size: 12px; color: #6c757d; }
.rt-count-over[b-jx2603ld3p] { color: #A32D2D; font-weight: 600; }