@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-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;
}
/* _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; }