/* wwwroot/app.css */

html, body {
    height: 100%;
    margin: 0;
    font-family: sans-serif;
    /* Body should not scroll if page-content-column and page-sidebar-column manage their own scrolling */
    overflow: hidden;
}

/* Overall container for the app layout */
.app-layout-container {
    /* height: 100vh; -- Handled by html, body and vh-100 on MainLayout root if needed */
    /* Using vh-100 on MainLayout root div directly */
}

/* The main row that holds content and sidebar */
.main-row-wrapper {
    height: 100%; /* Make this row fill its parent (app-layout-container or main-area-wrapper) */
    /* If app-layout-container is not flex-column vh-100, then this might need
       height: calc(100vh - 60px); if header is outside and fixed */
}

/* --- Header Styling --- */
.top-row-header {
    height: 60px; /* Fixed header height */
    background-color: #ffffff;
    border-bottom: 1px solid #dee2e6;
    /* padding for items inside the header is handled by container-fluid within it */
    z-index: 1030;
    flex-shrink: 0; /* Important for when parent is flex-column */
    /* The header is now *inside* the main content column, so its width is naturally constrained */
}

.header-logo img {
    max-height: 40px;
    width: auto;
}

/* --- Main Content Column (Left side) --- */
.page-content-column {
    display: flex;
    flex-direction: column; /* Stack header and article vertically */
    height: 100vh; /* Make the content column take full viewport height initially */
    /* The sidebar will sit next to it, also taking full viewport height */
    overflow: hidden; /* This column itself should not scroll */
}

/* The article where @Body renders, below the header */
.main-body-content {
    flex-grow: 1; /* Takes up space remaining after its own header */
    overflow-y: auto; /* SCROLLS this main body content if it overflows */
    background-color: #ffffff;
}

    .main-body-content .content { /* The <article class="content"> element */
        padding: 1rem; /* Padding for the actual page content */
    }


/* --- Desktop Right Sidebar Column --- */
.page-sidebar-column {
    background-color: #95bb9b; /* Your green color */
    border-left: 1px solid #ccc;
    height: 100vh; /* Make sidebar take full viewport height */
    padding: 0; /* Remove padding from the aside itself */
    display: flex; /* Ensure flex context for child */
    flex-direction: column; /* Stack NavLinks content */
    overflow: hidden; /* This column itself should not scroll */
}

    /* Target the NavigationLinks component's root wrapper *inside* the sidebar */
    .page-sidebar-column > .navigation-links-wrapper {
        height: 100%; /* Fill the sidebar column */
        overflow-y: auto; /* SCROLLS Sidebar Content ONLY */
        display: flex;
        flex-direction: column;
        /* Padding for the content of navlinks can be inside the navlinks component
       or applied here if consistent padding is needed around the scrollable area */
    }

.navigation-links-wrapper .sidebar-nav-section {
    padding: 1rem; /* Padding for the actual ul/nav items */
}


/* --- Mobile Offcanvas Styling --- */
/* Reuse page-sidebar-column styles for background if desired, or new class */
.page-sidebar-offcanvas {
    background-color: #95bb9b;
}

    .page-sidebar-offcanvas .offcanvas-body {
        padding: 0; /* Let NavigationLinks control its padding */
    }
        /* Ensure the inner div for offcanvas content scrolls */
        .page-sidebar-offcanvas .offcanvas-body > .h-100.overflow-y-auto {
            /* Ensure NavigationLinks' root fills this and scrolls */
        }

    .page-sidebar-offcanvas .navigation-links-wrapper { /* If you use this wrapper in offcanvas too */
        padding: 0; /* Offcanvas body already has some padding often */
    }

        .page-sidebar-offcanvas .navigation-links-wrapper .sidebar-nav-section {
            padding: 1rem;
        }


/* --- NavigationLinks Styling (largely from your existing CSS) --- */
.sidebar-nav-item {
    margin-bottom: 0.75rem;
    /* margin-top: 0.75rem; -- Handled by ul padding if needed */
}

.sidebar-nav-button {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100%;
    padding: 0.8rem 1rem !important;
    font-weight: 500;
    color: #000 !important; /* White text on green buttons */
    background-color: transparent; /* Buttons transparent, rely on sidebar background */
    border: 1px solid #FFFFFF; /* White border */
    border-radius: 0.5rem;
    text-align: left;
    text-decoration: none !important;
    transition: none !important;
}

    .sidebar-nav-button:hover,
    .sidebar-nav-button.active {
        border-color: #000;
        color: #000 !important;
    }


.sidebar-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.3); /* Lighter border for green bg */
    padding: 1rem; /* Ensure footer has padding */
    color: #FFFFFF; /* White text for footer */
}

    .sidebar-footer img { /* AllClear logo at bottom */
        /* Styles are inline, but consider filter: brightness(0) invert(1); if it's not white */
    }

    .sidebar-footer p {
        color: #FFFFFF; /* White text for paragraphs */
        margin-bottom: 0.25rem;
    }

/* Table Row Color Coding (Unchanged) */
.table-row-safe-time-missing { /* ... */
}

.table-row-alert {
    background-color: #d8636e !important;
    color: #58151c !important;
}

/* Blazor Error UI (Unchanged) */
#blazor-error-ui {
    background: lightyellow; /* ... */
}

    #blazor-error-ui .dismiss { /* ... */
    }


table.dataTable.table-bordered > tbody > tr > td {
    border-top: 1px solid #dee2e6; /* This is the default Bootstrap border color */
}

/* Optional: Ensure the header has a solid bottom border if it's also missing */
table.dataTable.table-bordered > thead > tr > th {
    border-bottom-width: 2px;
}

.table-text-center th,
.table-text-center td {
    text-align: center;
    vertical-align: middle;
}

.edit-team-container {
    max-width: 1200px; /* Or another width that suits your layout */
}

.edit-team-header {
    background-color: #e4dfd3; /* Light tan color from screenshot */
    border-radius: 8px;
}

.super-admin-box {
    background-color: #e4dfd3; /* Light tan color from screenshot */
    border: 1px solid #ccc;
    border-radius: 8px;
    height: 100%;
}

/* Provide background utility classes for toasts if Bootstrap version lacks text-bg-* */
.text-bg-success {
    background-color: #95bb9b !important; /* Bootstrap success */
    color: #000 !important;
    font-size:16px
}

.text-bg-danger {
    background-color: #d8636e !important; /* Bootstrap danger */
    color: #000 !important;
    font-size: 16px
}



.card-setup {
    /* Enforce a visible outline even if Bootstrap sets its own border */
    border-style: solid !important;
    border-width: 2px !important;
    border-color: transparent !important;
    border-radius: .5rem;
    transition: transform .08s ease-in-out, box-shadow .08s ease-in-out;
}

.card-setup:hover {
    transform: translateY(-2px);
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.08);
}

.card-outline-common { border-color: #436477 !important; }

.card-outline-admin { border-color: #d8636e !important; }

.icon-common {
    color: #436477;
    font-size: 2rem; /* roughly display-6 */
}

.icon-admin {
    color: #d8636e;
    font-size: 2rem;
}

.card-setup .card-title {
    color: #000;
}

.card-setup .card-text {
    color: #6c757d;
}

/* DataTables button + pagination styling */
.dt-btn-green {
    background-color: #95bb9b !important;
    border-color: #95bb9b !important;
    color: #000 !important;
    border-radius: 5px !important;
    box-shadow: none;
}

.dt-btn-green:hover,
.dt-btn-green:focus {
    background-color: #7ca482 !important;
    border-color: #7ca482 !important;
    color: #000 !important;
}

.dt-btn-green:active {
    background-color: #6f9475 !important;
    border-color: #6f9475 !important;
    color: #000 !important;
}

.dt-btn-green:focus-visible {
    box-shadow: 0 0 0 0.2rem rgba(149, 187, 155, 0.35) !important;
}

.dt-btn-green:disabled,
.dt-btn-green.disabled {
    background-color: #c6d9ca !important;
    border-color: #c6d9ca !important;
    color: #6c757d !important;
}

.dataTables_wrapper .dataTables_paginate,
.dt-container .dt-paging {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.3rem;
    text-align: right;
    padding-top: 0.25rem;
}