@import '_content/Blazor.SignaturePad/Blazor.SignaturePad.g22u5lm4z9.bundle.scp.css';
@import '_content/Microsoft.AspNetCore.Components.QuickGrid/Microsoft.AspNetCore.Components.QuickGrid.25o87uqmvr.bundle.scp.css';

/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* ==== Page Layout ==== */
/* The root container for the entire page, using flexbox to arrange sidebar and main content horizontally */
.page[b-mll54zyq6b] {
    display: flex;
    flex-direction: row; /* Sidebar and main content side by side */
    height: 100vh; /* Full viewport height */
    overflow: hidden; /* Prevent scrollbars at page level */
}

/* ==== Sidebar ==== */
/* Fixed vertical sidebar on the left */
.sidebar[b-mll54zyq6b] {
    background-color: #333; /* Dark background */
    width: 120px; /* Default collapsed width */
    height: 100vh; /* Full viewport height */
    position: fixed; /* Stays in place on scroll */
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    z-index: 2; /* Above main content but below top-row if needed */
    box-sizing: border-box;
    transition: width 0.3s ease; /* Smooth width change when collapsing/expanding */
}

    /* Sidebar collapsed state (slightly larger than default for alignment tweaks) */
    .sidebar.collapsed[b-mll54zyq6b] {
        width: 130px;
    }

    /* Sidebar expanded or pinned states */
    .sidebar.expanded[b-mll54zyq6b],
    .sidebar.pinned[b-mll54zyq6b] {
        width: 260px;
    }

    /* Sidebar heading text at the top */
    .sidebar .heading[b-mll54zyq6b] {
        font-size: 20px;
        color: #fff;
        padding: 10px;
        text-align: center;
        white-space: nowrap; /* Prevent wrapping */
    }

/* ==== Sidebar Buttons (Toggle & Pin) ==== */
/* Container for sidebar toggle and pin buttons */
.sidebar-buttons[b-mll54zyq6b] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    gap: 5px; /* Spacing between buttons */
}

/* Collapsed sidebar buttons adjustments */
.sidebar.collapsed .sidebar-buttons[b-mll54zyq6b] {
    justify-content: center; /* Center the button(s) */
}

.sidebar.collapsed .toggle-btn[b-mll54zyq6b] {
    display: flex; /* Show toggle button */
}

.sidebar.collapsed .pin-btn[b-mll54zyq6b] {
    display: none; /* Hide pin button when collapsed */
}

/* Expanded but not pinned buttons */
.sidebar.expanded:not(.pinned) .sidebar-buttons[b-mll54zyq6b] {
    justify-content: center;
}

.sidebar.expanded:not(.pinned) .toggle-btn[b-mll54zyq6b],
.sidebar.expanded:not(.pinned) .pin-btn[b-mll54zyq6b] {
    display: flex; /* Show both buttons */
}

/* Expanded and pinned sidebar buttons */
.sidebar.expanded.pinned .sidebar-buttons[b-mll54zyq6b] {
    justify-content: center;
}

.sidebar.expanded.pinned .toggle-btn[b-mll54zyq6b] {
    display: none; /* Hide toggle button when pinned */
}

.sidebar.expanded.pinned .pin-btn[b-mll54zyq6b] {
    display: flex; /* Show pin button */
}

/* ==== Sidebar Menu Scrollable Container ==== */
/* Makes the nav items scrollable if content exceeds sidebar height */
.nav-scrollable[b-mll54zyq6b] {
    flex: 1 1 auto;
    overflow-y: auto; /* Vertical scroll if needed */
    -ms-overflow-style: none; /* Hide IE scrollbar */
    scrollbar-width: none; /* Hide Firefox scrollbar */
}

    /* Hide scrollbar in WebKit browsers */
    .nav-scrollable[b-mll54zyq6b]::-webkit-scrollbar {
        display: none;
    }

/* ==== Sidebar Links ==== */
/* Styling for individual links */
.sidebar .nav-link[b-mll54zyq6b] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0.5rem 1rem;
    color: #fff;
    flex-shrink: 0;
    overflow: hidden;
    text-decoration: none;
}

/* Collapsed sidebar: center icons, hide text */
.sidebar.collapsed .nav-link[b-mll54zyq6b] {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 3rem !important;
    height: 3rem;
    padding: 0 !important;
    color: white !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

    /* Remove icon margins for collapsed icons */
    .sidebar.collapsed .nav-link .bi[b-mll54zyq6b] {
        margin: 0 !important;
    }

/* Nav item spacing in collapsed state */
.sidebar.collapsed .nav-item[b-mll54zyq6b] {
    margin-bottom: 0.4rem;
}

/* Expanded sidebar: standard left/right padding for links */
.sidebar.expanded .nav-link[b-mll54zyq6b] {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

/* ==== Hover and Active States ==== */
/* Hover effect for nav items */
.nav-item[b-mll54zyq6b]  .nav-link:hover,
.nav-link:hover[b-mll54zyq6b] {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
}

/* Active link styling */
.nav-item[b-mll54zyq6b]  a.active,
.nav-link.active[b-mll54zyq6b] {
    background-color: rgba(255, 255, 255, 0.37);
    color: white;
}

/* ==== Toggle and Pin Buttons Styling ==== */
.toggle-btn[b-mll54zyq6b],
.pin-btn[b-mll54zyq6b] {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-top: -10px;
}

    /* Hover effect for buttons */
    .toggle-btn:hover[b-mll54zyq6b],
    .pin-btn:hover[b-mll54zyq6b] {
        background-color: rgba(255, 255, 255, 0.1);
        border-radius: 7px;
    }

    /* Icon size for buttons */
    .toggle-btn .bi[b-mll54zyq6b],
    .pin-btn .bi[b-mll54zyq6b] {
        font-size: 1rem;
    }

/* ==== Main Wrapper Adjustments ==== */
main[b-mll54zyq6b] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    transition: margin-left 0.3s ease; /* Smooth sidebar push effect */
}

/* Adjust main content margin based on sidebar state */
.sidebar.collapsed ~ main[b-mll54zyq6b] {
    margin-left: 130px;
}

.sidebar.expanded ~ main[b-mll54zyq6b],
.sidebar.pinned ~ main[b-mll54zyq6b] {
    margin-left: 260px;
}

/* ==== Top Row / Header ==== */
.top-row[b-mll54zyq6b] {
    height: 3.5rem;
    background-color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky; /* Stays at top when scrolling */
    top: 0;
    z-index: 3; /* Above sidebar and content */
}

    /* Top row links styling */
    .top-row a[b-mll54zyq6b] {
        color: white;
        text-decoration: none;
    }

/* ==== Content Area ==== */
main .content[b-mll54zyq6b] {
    flex: 1;
    padding: 1rem;
    overflow-y: auto; /* Scrollable content vertically */
    overflow-x: hidden; /* Prevent horizontal scroll */
}

/* Optional overlay shadow when sidebar expanded/pinned */
.sidebar.expanded ~ main[b-mll54zyq6b]::before,
.sidebar.pinned ~ main[b-mll54zyq6b]::before {
    content: '';
    position: fixed;
    top: 0;
    left: 260px;
    width: calc(100% - 260px);
    height: 100%;
    background: rgba(0, 0, 0, 0.05);
    pointer-events: none; /* Doesn't block clicks */
    z-index: 2;
}

/* ==== Responsive Adjustments ==== */
@media (max-width: 640px) {
    main[b-mll54zyq6b] {
        margin-left: 120px; /* Sidebar width on small screens */
        overflow-x: hidden;
        overflow-y: auto;
    }

    .sidebar.collapsed ~ main[b-mll54zyq6b] {
        margin-left: 120px;
    }

    .sidebar.expanded ~ main[b-mll54zyq6b],
    .sidebar.pinned ~ main[b-mll54zyq6b] {
        margin-left: 200px; /* Adjusted expanded width for mobile */
    }
}

/* ==== Bottom Sidebar Info ==== */
.sidebar-info[b-mll54zyq6b] {
    display: flex;
    flex-direction: column;
    text-align: center;
    margin-top: auto; /* Push to bottom */
    padding-bottom: 10px;
}

    /* Fineprint / developer / copyright text */
    .sidebar-info .fineprint[b-mll54zyq6b] {
        margin: 2px 0;
        font-size: 9px;
        color: #42A44D;
    }

    .sidebar-info .dev[b-mll54zyq6b] {
        margin: 2px 0;
        font-size: 9px;
        color: #42A44D;
        margin-top: -10px;
    }

    .sidebar-info .copyright[b-mll54zyq6b] {
        margin: 2px 0;
        font-size: 9px;
        color: white;
        margin-top: -10px;
        padding: 10px !important;
    }

    /* Additional spacing between fineprint lines */
    .sidebar-info .fineprint + .fineprint[b-mll54zyq6b] {
        margin-top: 4px;
    }

/* Ensure sidebar nav is scrollable on small screens */
@media (max-width: 640px) {
    .nav-scrollable[b-mll54zyq6b] {
        flex: 1 1 auto;
        /* Subtract top-row (3.5rem) and button row (~2.5rem) */
        height: calc(100dvh - 3.5rem - 2.5rem);
        max-height: calc(100dvh - 3.5rem - 2.5rem);
        overflow-y: auto;
        /* Fallback for browsers without dvh support */
    }

    @supports not (height: 100dvh) {
        .nav-scrollable[b-mll54zyq6b] {
            height: calc(100vh - 3.5rem - 2.5rem);
            max-height: calc(100vh - 3.5rem - 2.5rem);
        }
    }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* ==== Sidebar Nav Items Container ==== */
/* The scrollable container for all nav links inside the sidebar */
.nav-scrollable[b-syckooka9e] {
    flex: 1 1 auto; /* Grow/shrink to fill available sidebar height */
    overflow-y: auto; /* Enable vertical scrolling if content overflows */
    -ms-overflow-style: none; /* Hide scrollbar in IE/Edge */
    scrollbar-width: none; /* Hide scrollbar in Firefox */
}

    /* Hide scrollbar in WebKit-based browsers (Chrome, Safari) */
    .nav-scrollable[b-syckooka9e]::-webkit-scrollbar {
        display: none;
    }

/* ==== Individual Nav Items ==== */
/* Each sidebar link container */
.nav-item[b-syckooka9e] {
    font-size: 0.9rem; /* Base font size */
    height: 3rem; /* Default height for expanded items */
    margin: 0.2rem 0; /* Vertical spacing between items */
    display: flex;
    align-items: center; /* Vertically center link content */
    transition: margin 0.12s, height 0.12s; /* Smooth spacing changes */
}

    /* First nav item slightly offset from top for spacing */
    .nav-item:first-of-type[b-syckooka9e] {
        margin-top: 0.25rem;
    }

    /* ==== Nav Links Styling ==== */
    /* Base style for all links */
    .nav-item[b-syckooka9e]  .nav-link,
    .nav-link[b-syckooka9e] {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start;
        width: 100%;
        height: 100%;
        padding: 0 10px;
        box-sizing: border-box;
        color: white !important;
        text-decoration: none;
        transition: background 0.18s, color 0.18s; /* Smooth hover/active transitions */
        border-radius: 7px;
    }

        /* Active link styling (expanded state) */
        .nav-item[b-syckooka9e]  .nav-link.active,
        .nav-link.active[b-syckooka9e] {
                    background-color: #0c71c3;
            color: white !important;
        }

        /* Hover effect for links (expanded state) */
        .nav-item[b-syckooka9e]  .nav-link:hover,
        .nav-link:hover[b-syckooka9e] {
            background-color: #42A44D;
            color: white !important;
        }

/* ==== Collapsed Sidebar Overrides ==== */
/* Scrollable container adjustments for collapsed sidebar */
.sidebar.collapsed .nav-scrollable[b-syckooka9e] {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    height: 100%;
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    padding-top: 0.06rem;
    padding-bottom: 0.06rem;
}

    .sidebar.collapsed .nav-scrollable[b-syckooka9e]::-webkit-scrollbar {
        display: none;
    }

/* Collapsed nav items: allow vertical shrink using clamp for small viewports */
.sidebar.collapsed .nav-item[b-syckooka9e] {
    flex: 0 1 auto; /* Allow shrinking, no forced growth */
    height: auto; /* Let child determine height */
    display: flex;
    justify-content: center;
    align-items: center;
    margin: clamp(0.04rem, 0.9vh, 0.25rem) 0; /* Dynamic vertical spacing */
    transition: margin 0.12s;
}

    /* Collapsed nav link: compact square/rounded button */
    .sidebar.collapsed .nav-item[b-syckooka9e]  .nav-link,
    .sidebar.collapsed .nav-link[b-syckooka9e] {
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        width: 3rem !important; /* Fixed width for icons */
        height: clamp(1.8rem, 4.5vh, 2.6rem); /* Shrinks on short viewports */
        padding: 0 !important;
        border-radius: 7px;
        color: white !important;
        margin-left: auto !important;
        margin-right: auto !important;
        transition: height 0.12s, background 0.12s;
    }

        /* Icons inside collapsed links scale with viewport height */
        .sidebar.collapsed .nav-item[b-syckooka9e]  .bi,
        .sidebar.collapsed .nav-link .bi[b-syckooka9e] {
            margin: 0 !important;
            font-size: clamp(0.72rem, 2.2vh, 1rem); /* Dynamic size */
            line-height: 1;
            transition: font-size 0.12s;
        }

        /* Hover/active colors remain consistent in collapsed state */
        .sidebar.collapsed .nav-item[b-syckooka9e]  .nav-link:hover,
        .sidebar.collapsed .nav-link:hover[b-syckooka9e] {
            background-color: #42A44D;
            color: white !important;
        }

        .sidebar.collapsed .nav-item[b-syckooka9e]  .nav-link.active,
        .sidebar.collapsed .nav-link.active[b-syckooka9e] {
            background-color: #0c71c3;
            color: white !important;
        }

/* ==== Expanded Sidebar Adjustments ==== */
/* Row alignment and spacing for expanded sidebar links */
.sidebar.expanded .nav-item[b-syckooka9e]  .nav-link {
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding-left: 10px !important;
    padding-right: 10px !important;
    color: #d7d7d7;
}

/* Keep expanded nav items at fixed height */
.sidebar.expanded .nav-item[b-syckooka9e] {
    height: 3rem;
    display: flex;
    align-items: center;
}

    /* Fixed icon + label alignment in expanded state */
    .sidebar.expanded .nav-item[b-syckooka9e]  .bi,
    .sidebar.expanded .nav-item[b-syckooka9e]  .fa-solid,
    .sidebar.expanded .nav-item[b-syckooka9e]  .fa-regular,
    .sidebar.expanded .nav-item[b-syckooka9e]  .fa-light,
    .sidebar.expanded .nav-item[b-syckooka9e]  .fa-duotone {
        display: inline-block;
        width: 30px; /* Icon column width */
        text-align: center; /* Center icon */
        margin-right: 0.75rem; /* Spacing between icon and label */
        font-size: 1rem;
    }

/* ==== Form Buttons in Nav ==== */
/* Ensure forms/buttons inside nav inherit the same styling */
.nav-item form .nav-link[b-syckooka9e],
.nav-item form button.nav-link[b-syckooka9e] {
    display: flex !important;
    flex-direction: inherit !important;
    align-items: center;
    justify-content: inherit;
    padding: inherit;
    height: 100%;
    width: 100%;
    border: none;
    background: none;
    color: inherit;
    text-align: left;
    box-sizing: border-box;
}

/* Extra spacing for expanded state */
.sidebar.expanded .nav-item[b-syckooka9e] {
    margin-left: 10px;
    margin-right: 10px;
}

/* Reset horizontal margins for collapsed centering */
.sidebar.collapsed .nav-item[b-syckooka9e] {
    margin-left: 0;
    margin-right: 0;
}


/* ==== Mobile Dynamic Height Fix ==== */
@media (max-width: 640px) {
    .sidebar .nav-scrollable[b-syckooka9e] {
        height: calc(100dvh - 3.5rem - 2.5rem);
        max-height: calc(100dvh - 3.5rem - 2.5rem);
        overflow-y: auto;
    }

    @supports not (height: 100dvh) {
        .sidebar .nav-scrollable[b-syckooka9e] {
            height: calc(100vh - 3.5rem - 2.5rem);
            max-height: calc(100vh - 3.5rem - 2.5rem);
        }
    }
}