/* _content/HCP.Timesheet/Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-uwdcgq0ng5] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-uwdcgq0ng5] {
    flex: 1;

    /* THE fix for the whole-page horizontal overflow.
       A flex item defaults to min-width:auto, which means it refuses to shrink below its
       CONTENT's intrinsic minimum. So a wide table or a wide grid track did not scroll or
       compress — it pushed <main> past the viewport and the entire page gained a horizontal
       scrollbar, cutting off the "Add Employee" button and the right-hand detail panel.
       min-width:0 lets <main> be as narrow as the viewport allows, which in turn lets the
       content inside decide how to handle its own overflow. */
    min-width: 0;
}

.sidebar[b-uwdcgq0ng5] {
    /* Deep navy (brief §5). Drop an industrial/fuel photo at
       wwwroot/images/sidebar-bg.png and it appears at the bottom under a navy
       overlay (like the mockup). If the file is absent, it stays solid navy. */
    background-color: #0d2c54;
    background-image: linear-gradient(180deg, rgba(13, 44, 84, 0.92) 0%, rgba(13, 44, 84, 0.70) 55%, rgba(11, 31, 59, 0.96) 100%), url('/images/sidebar-bg.png');
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
}

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

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

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

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

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

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

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

    .sidebar[b-uwdcgq0ng5] {
        width: 250px;
        /* Paired with main's min-width:0. Once main is allowed to shrink, the flex algorithm
           would otherwise be free to take the difference out of the sidebar instead, squeezing
           the navigation. flex-shrink:0 pins it at 250px and makes main absorb all the change. */
        flex-shrink: 0;
        height: 100vh;
        position: sticky;
        top: 0;
    }

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

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

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

#blazor-error-ui[b-uwdcgq0ng5] {
    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-uwdcgq0ng5] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/* ============================================================================
   Print — for the dashboard's "Export PDF" (window.hcpPrint). These rules MUST
   live in the layout's scoped CSS: .sidebar / .top-row / .page are styled here,
   and Blazor's scoped selectors ([b-xxxx]) outrank a plain rule in app.css, so
   an @media print block in app.css alone could not hide them. ::deep reaches the
   page content that marks itself .no-print / .print-only.
   ============================================================================ */
@media print {
    .sidebar[b-uwdcgq0ng5],
    .top-row[b-uwdcgq0ng5],
    #blazor-error-ui[b-uwdcgq0ng5],
    [b-uwdcgq0ng5] .no-print {
        display: none !important;
    }

    /* Report uses the whole sheet, on white, no sticky positioning. */
    .page[b-uwdcgq0ng5] { display: block !important; }
    main[b-uwdcgq0ng5] { flex: none !important; }
    .top-row[b-uwdcgq0ng5], article[b-uwdcgq0ng5] { padding: 0 !important; }
    .sidebar[b-uwdcgq0ng5] { width: 0 !important; height: 0 !important; }

    [b-uwdcgq0ng5] .print-only { display: block !important; }
}
/* _content/HCP.Timesheet/Components/Layout/NavMenu.razor.rz.scp.css */
.navbar[b-t6ggjnb5mn] {
    background: transparent;
    padding: 0;
}

.top-row[b-t6ggjnb5mn] {
    height: 5.5rem;
    background: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
}

.container-fluid[b-t6ggjnb5mn] {
    padding: 0 1rem;
}

.hcp-brand[b-t6ggjnb5mn] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hcp-logo[b-t6ggjnb5mn] {
    max-width: 160px;
    max-height: 70px;
    object-fit: contain;
}

.navbar-toggler[b-t6ggjnb5mn] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.7rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.12);
    border-radius: 0.5rem;
}

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

    .navbar-toggler[b-t6ggjnb5mn]::before {
        content: "☰";
        font-size: 1.4rem;
        position: absolute;
        top: 0.35rem;
        left: 1rem;
        color: white;
    }

.nav-scrollable[b-t6ggjnb5mn] {
    display: none;
    height: calc(100vh - 5.5rem);
    overflow-y: auto;
    background: linear-gradient(180deg, #061a35 0%, #07234c 45%, #031225 100%);
    padding-top: 1rem;
    padding-bottom: 1rem;
}

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

.nav-scrollable nav[b-t6ggjnb5mn] {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.nav-section-title[b-t6ggjnb5mn] {
    color: rgba(255, 255, 255, 0.48);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 1rem 1.35rem 0.35rem;
    /* Uppercase + letter-spacing makes these wider than they look; "Review & Approvals" is
       within a few px of the 250px sidebar. Wrapping one would push the chevron onto its own
       line, so headers truncate rather than reflow — same rule the nav items follow. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Collapsible section header (accordion toggle) */
.nav-toggle[b-t6ggjnb5mn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
}

.nav-toggle:hover[b-t6ggjnb5mn] {
    color: rgba(255, 255, 255, 0.78);
}

.nav-chevron[b-t6ggjnb5mn] {
    font-size: 0.7rem;
    transition: transform 0.18s ease;
}

.nav-chevron.collapsed[b-t6ggjnb5mn] {
    transform: rotate(-90deg);
}

.nav-item[b-t6ggjnb5mn] {
    font-size: 0.95rem;
    padding-bottom: 0.15rem;
}

    /* Labels must stay on ONE line.
       The anchor is a fixed 44px pill with line-height:44px, so a label that wrapped rendered
       TWO 44px lines inside a 44px box and spilled out of the highlight — which is what
       "Timesheet Dashboard", the longest label, did in the 250px sidebar.
       nowrap removes the wrap; the ellipsis rule below keeps any future label that is still
       too wide inside the pill instead of overflowing it again.
       The horizontal padding and gap are trimmed from Bootstrap's defaults purely to buy back
       the ~14px of text width that made the longest labels wrap in the first place. */
    .nav-item[b-t6ggjnb5mn]  a {
        color: rgba(255, 255, 255, 0.82);
        border-radius: 12px;
        height: 44px;
        display: flex;
        align-items: center;
        gap: 0.55rem;
        line-height: 44px;
        white-space: nowrap;
        overflow: hidden;
        padding-left: 0.6rem;
        padding-right: 0.6rem;
        transition: all 0.18s ease;
    }

        /* The icon keeps its full width; only the label gives way when space runs out. */
        .nav-item[b-t6ggjnb5mn]  a .nav-icon {
            flex: 0 0 auto;
        }

        /* min-width:0 is required for text-overflow on a flex child: without it the span
           refuses to shrink below its content width and the ellipsis never appears. */
        .nav-item[b-t6ggjnb5mn]  a > span:not(.nav-icon) {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .nav-item[b-t6ggjnb5mn]  a:hover {
            color: #ffffff;
            background: rgba(255, 255, 255, 0.11);
            transform: translateX(2px);
        }

        .nav-item[b-t6ggjnb5mn]  a.active {
            color: #ffffff;
            background: linear-gradient(90deg, #1f6fe5 0%, #2f7ff0 100%);
            box-shadow: 0 10px 24px rgba(31, 111, 229, 0.32);
        }

.nav-icon[b-t6ggjnb5mn] {
    width: 1.25rem;
    font-size: 1.05rem;
    text-align: center;
}

.nav-footer[b-t6ggjnb5mn] {
    margin-top: auto;
    padding: 1rem;
}

.support-box[b-t6ggjnb5mn] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem;
    border-radius: 16px;
    color: white;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.11);
}

    .support-box span[b-t6ggjnb5mn] {
        font-size: 1.2rem;
        color: #7fb2ff;
    }

    .support-box div[b-t6ggjnb5mn] {
        display: flex;
        flex-direction: column;
        line-height: 1.2;
    }

    .support-box strong[b-t6ggjnb5mn] {
        font-size: 0.85rem;
        font-weight: 700;
    }

    .support-box small[b-t6ggjnb5mn] {
        color: rgba(255, 255, 255, 0.62);
        font-size: 0.72rem;
    }

/* Desktop behaviour */
@media (min-width: 641px) {
    .navbar-toggler[b-t6ggjnb5mn] {
        display: none;
    }

    .nav-scrollable[b-t6ggjnb5mn] {
        display: block;
    }
}

/* Scrollbar styling */
.nav-scrollable[b-t6ggjnb5mn]::-webkit-scrollbar {
    width: 6px;
}

.nav-scrollable[b-t6ggjnb5mn]::-webkit-scrollbar-track {
    background: transparent;
}

.nav-scrollable[b-t6ggjnb5mn]::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 999px;
}

    .nav-scrollable[b-t6ggjnb5mn]::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.28);
    }
/* _content/HCP.Timesheet/Components/Layout/TopBar.razor.rz.scp.css */
.topbar[b-gst99iq76l] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
}

.topbar-search[b-gst99iq76l] {
    position: relative;
    flex: 1;
    max-width: 460px;
    display: flex;
    align-items: center;
}

.topbar-search .bi[b-gst99iq76l] {
    position: absolute;
    left: 0.85rem;
    color: #9ca3af;
    font-size: 0.95rem;
}

.topbar-search input[b-gst99iq76l] {
    width: 100%;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    border-radius: 9px;
    padding: 0.55rem 0.85rem 0.55rem 2.4rem;
    font-size: 0.88rem;
    outline: none;
}

.topbar-search input:focus[b-gst99iq76l] {
    border-color: #2563eb;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.topbar-right[b-gst99iq76l] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.topbar-icon[b-gst99iq76l] {
    position: relative;
    color: #6b7280;
    font-size: 1.15rem;
    text-decoration: none;
    line-height: 1;
}

.topbar-icon:hover[b-gst99iq76l] { color: #2563eb; }

.topbar-badge[b-gst99iq76l] {
    position: absolute;
    top: -7px;
    right: -9px;
    background: #dc2626;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    min-width: 1rem;
    height: 1rem;
    padding: 0 0.25rem;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 0 0 2px #fff;
}

.topbar-dd[b-gst99iq76l] { position: relative; }

.topbar-switch[b-gst99iq76l] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    padding: 0.4rem 0.7rem;
    font-size: 0.8rem;
    cursor: pointer;
}

.topbar-switch:hover[b-gst99iq76l] { background: #dbeafe; }

.topbar-menu[b-gst99iq76l] {
    position: absolute;
    top: calc(100% + 0.4rem);
    left: 0;
    min-width: 190px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(0,0,0,.14);
    padding: 0.35rem;
    z-index: 50;
}

.topbar-menu-right[b-gst99iq76l] { left: auto; right: 0; }

.topbar-menu-head[b-gst99iq76l] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #9ca3af;
    padding: 0.4rem 0.6rem 0.25rem;
}

.topbar-menu-item[b-gst99iq76l] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.6rem;
    border-radius: 7px;
    color: #374151;
    text-decoration: none;
    font-size: 0.85rem;
}

button.topbar-menu-item[b-gst99iq76l] {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    font: inherit;
    cursor: pointer;
}

.topbar-menu-item:hover[b-gst99iq76l] { background: #f3f4f6; }
.topbar-menu-item.active[b-gst99iq76l] { background: #eff6ff; color: #1d4ed8; font-weight: 600; }
.topbar-menu-item.danger:hover[b-gst99iq76l] { background: #fef2f2; color: #b91c1c; }

.topbar-menu-sep[b-gst99iq76l] { height: 1px; background: #e5e7eb; margin: 0.3rem 0.2rem; }

.topbar-user[b-gst99iq76l] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding-left: 0.5rem;
    border-left: 1px solid #e5e7eb;
    background: none;
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    cursor: pointer;
}

.topbar-avatar[b-gst99iq76l] {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background: #2563eb;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
    object-fit: cover;
}

.topbar-user-meta[b-gst99iq76l] {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.topbar-name[b-gst99iq76l] { font-size: 0.85rem; font-weight: 600; color: #111827; }
.topbar-role[b-gst99iq76l] { font-size: 0.72rem; color: #6b7280; }

.topbar-logout[b-gst99iq76l] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #6b7280;
    text-decoration: none;
    font-size: 0.82rem;
    padding: 0.4rem 0.7rem;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

.topbar-logout:hover[b-gst99iq76l] { color: #b91c1c; border-color: #fecaca; background: #fef2f2; }

@media (max-width: 640px) {
    .topbar-logout-text[b-gst99iq76l], .topbar-user-meta[b-gst99iq76l] { display: none; }
}