/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* ==========================================================================
   Main Layout - CSS Styles
   Summary:
   - Base page & container layout
   - Sidebar & top row header
   - University name display (EN, FR, ES)
   - Responsive adjustments (mobile, tablet, desktop)
   - Error UI styles (Blazor error panel)
   - Centralized shared styles for ads, users, residences, permissions, billboard
   - Page titles & section headers
   - Action buttons
   - Tables (listings, residence, user, permissions)
   - Loading & empty states
   - Accessibility helpers (skip link, sr-only, focusable)
   ========================================================================== */


/* ----------------------------- Base Page Layout ---------------------------- */

.page[b-5wnpunr3y3] {
    position: relative;
    display: flex;
    flex-direction: column;
}

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

/* ----------------------------- Sidebar ---------------------------- */

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

/* ----------------------------- Top Row Header ---------------------------- */

.top-row[b-5wnpunr3y3] {
    border-bottom: 1px solid #d6d5d5;
    min-height: 3.5rem;
    background-color: var(--primary-garnet);
    display: flex;
    align-items: center;
}

.top-row-content[b-5wnpunr3y3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    color: white;
    font-size: 1.25rem;
    gap: 1rem;
}

/* ----------------------------- Bottom Row Header ---------------------------- */

[b-5wnpunr3y3] .footer-container {
    z-index: 1;
    background-color: var(--PolarGrey);
    height: 2rem;
    border-top: 1px solid #d6d5d5;
    display: block;
}

[b-5wnpunr3y3] .footer-text {
    color: black;
    text-align: center;
}

/* ----------------------------- University Name (multilingual) ---------------------------- */

[b-5wnpunr3y3] .university-name {
    font-weight: 500;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-5wnpunr3y3] .university-name-display {
    text-align: center;
}

[b-5wnpunr3y3] .culture-selector-wrapper {
    flex: 0 0 auto;
    background-color: var(--PolarGrey);
    border-radius: 35%;
}

/* ----------------------------- Responsive: Very Small Screens ---------------------------- */
@media (max-width: 480px) {
    .top-row[b-5wnpunr3y3] {
        min-height: 3.5rem;
        padding: 0.5rem 1rem;
    }

    .top-row-content[b-5wnpunr3y3] {
        font-size: 0.9rem;
        gap: 0.75rem;
        justify-content: space-between;
    }

    [b-5wnpunr3y3] .university-name-display {
        display: block;
        text-align: center;
        margin: 0 2rem;
        font-size: 1.1rem;
    }
}

/* ----------------------------- Responsive: Small Mobile Screens ---------------------------- */
@media (min-width: 481px) and (max-width: 640.98px) {
    .top-row[b-5wnpunr3y3] {
        min-height: 4rem;
        padding: 0.5rem 1rem;
    }

    .top-row-content[b-5wnpunr3y3] {
        font-size: 0.875rem;
        gap: 0.75rem;
        justify-content: space-between;
    }

    [b-5wnpunr3y3] .university-name-display {
        display: block;
        text-align: center;
        margin: 0 2rem;
        font-size: 1.25rem;
    }
}

/* ----------------------------- Responsive: Tablet ---------------------------- */
@media (min-width: 641px) and (max-width: 1024px) {
    .top-row-content[b-5wnpunr3y3] {
        font-size: 1.1rem;
        justify-content: space-between;
    }

    [b-5wnpunr3y3] .university-name-display {
        display: block;
        text-align: center;
        margin: 0 2rem;
    }
}

/* ----------------------------- Responsive: Desktop ---------------------------- */
@media (min-width: 1025px) {
    .top-row-content[b-5wnpunr3y3] {
        font-size: 1.25rem;
        justify-content: space-between;
    }

    [b-5wnpunr3y3] .university-name-display {
        display: block;
        text-align: center;
        margin: 0 3rem;
    }
}

/* ----------------------------- Responsive: General (>=641px) ---------------------------- */

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

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

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

/* ----------------------------- Blazor Error UI ---------------------------- */

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

/* ========================================================================== 
   Shared Containers & Components
   ========================================================================== */

/* ----------------------------- Base Containers ---------------------------- */
[b-5wnpunr3y3] .ads-management-container,
[b-5wnpunr3y3] .user-container,
[b-5wnpunr3y3] .residence-container,
[b-5wnpunr3y3] .permissions-page-container,
[b-5wnpunr3y3] .billboard-container {
    margin: 0 auto;
    padding: 0;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

/* ---------------------- Main container for edit/details page ---------------------- */
[b-5wnpunr3y3] .details-container,
[b-5wnpunr3y3] .edit-listing-container {
    min-height: 100vh;
    padding: 2rem;
    background-color: white;
}


/* ----------------------------- Page Titles ---------------------------- */
[b-5wnpunr3y3] .page-title,
[b-5wnpunr3y3] .user-title,
[b-5wnpunr3y3] .residence-title,
[b-5wnpunr3y3] .billboard-title {
    color: var(--primary-garnet);
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 2rem;
    padding: 1.5rem 0;
    border-bottom: 2px solid var(--primary-garnet);
}

/* ----------------------------- Section Headers ---------------------------- */
[b-5wnpunr3y3] .header-text,
[b-5wnpunr3y3] .section-header,
[b-5wnpunr3y3] .results-title,
[b-5wnpunr3y3] .listings-title {
    font-size: 1.5rem;
    font-weight: 500;
    margin: 1.5rem 0;
    padding-left: 1rem;
    border-left: 4px solid var(--primary-garnet);
    color: #660014; /* Burgundy dark tone */
}

/* ----------------------------- Action Buttons ---------------------------- */
[b-5wnpunr3y3] .action-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

    [b-5wnpunr3y3] .action-buttons .mud-button,
    [b-5wnpunr3y3] .action-buttons .mud-icon-button {
        min-width: auto;
        padding: 4px 8px;
    }

/* ----------------------------- Tables ---------------------------- */
[b-5wnpunr3y3] .listings-table,
[b-5wnpunr3y3] .residence-table,
[b-5wnpunr3y3] .user-table,
[b-5wnpunr3y3] .permissions-table-wrapper {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

[b-5wnpunr3y3] .table-header,
[b-5wnpunr3y3] .table-head-bordered {
    background-color: var(--light-garnet) !important;
    color: #fff !important;
    font-weight: 600 !important;
    text-align: center;
}

/* ----------------------------- Loading / Empty States ---------------------------- */
[b-5wnpunr3y3] .loading-state,
[b-5wnpunr3y3] .empty-state,
[b-5wnpunr3y3] .loading-container,
[b-5wnpunr3y3] .no-results {
    text-align: center;
    padding: 3rem;
    color: #6c757d;
    font-size: 1.1rem;
}

/* ----------------------------- Accessibility ---------------------------- */
[b-5wnpunr3y3] .skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: var(--primary-garnet);
    color: white;
    padding: 8px;
    text-decoration: none;
    border-radius: 4px;
    z-index: 1000;
    transition: top 0.3s ease;
    font-weight: 600;
}

    [b-5wnpunr3y3] .skip-link:focus {
        top: 6px;
        outline: 3px solid white;
        outline-offset: 2px;
    }

[b-5wnpunr3y3] .sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

[b-5wnpunr3y3] .sr-only-focusable:focus {
    position: static !important;
    width: auto !important;
    height: auto !important;
    padding: 0.5rem 1rem !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
    background-color: #007bff !important;
    color: white !important;
    text-decoration: none !important;
    border-radius: 4px !important;
    z-index: 1000 !important;
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */

:root[b-6635li94oa] {
--base-clr: #9c0414;
--line-clr: #42434a;
--hover-clr: #222533;
--text-clr: #e6e6ef;
--accent-clr: #5e63ff;
--secondary-text-clr: #b0b3c1;
}

*[b-6635li94oa] {
margin: 0;
padding: 0;
}

.logomenu[b-6635li94oa] {
    width: 100px;
    object-fit:contain;
    margin-bottom: 15px;
}

#sidebar.close .logomenu[b-6635li94oa] {
    width: 50px;
    object-fit: contain;
}

#sidebar[b-6635li94oa] {
    box-sizing: border-box;
    height: 100vh;
    width: 250px;
    padding: 5px 1em;
    background-color: var(--primary-garnet);
    border-right: 1px solid #42434a;
    color: white;
    position: sticky;
    top: 0;
    align-self: start;
    transition: 300ms ease-in-out;
    overflow: auto;
    text-wrap: nowrap;
    z-index: 1000; /* Make sure that the navbar stay on top */
}

#sidebar.close[b-6635li94oa] {
padding: 5px;
width: 58px;
}

#sidebar ul[b-6635li94oa] {
list-style: none;
}

#sidebar > ul > li:first-child[b-6635li94oa] {
display: flex;
justify-content: flex-end;
}

#sidebar > ul > li:first-child .logo[b-6635li94oa] {
font-weight: 600;
}

#sidebar ul li.active a[b-6635li94oa] {
color: #5e63ff;
}

#sidebar ul li.active a i[b-6635li94oa] {
fill: #5e63ff;
}

#sidebar a[b-6635li94oa],
#sidebar .dropdown-btn[b-6635li94oa],
#sidebar .logo[b-6635li94oa] {
border-radius: .5em;
padding: .85em;
text-decoration: none;
color: var(--text-clr);
display: flex;
align-items: center;
gap: 1em;
}

.dropdown-btn[b-6635li94oa] {
width: 100%;
text-align: left;
background: none;
border: none;
font: inherit;
cursor: pointer;
}

#sidebar i[b-6635li94oa] {
flex-shrink: 0;
fill: var(--text-clr);
}

#sidebar a span[b-6635li94oa],
#sidebar .dropdown-btn span[b-6635li94oa] {
flex-grow: 1;
}

#sidebar a:hover[b-6635li94oa],
#sidebar .dropdown-btn:hover[b-6635li94oa] {
background-color: var(--hover-clr);
}

#sidebar .sub-menu[b-6635li94oa] {
display: grid;
grid-template-rows: 0fr;
transition: 300ms ease-in-out;
}

#sidebar .sub-menu > li[b-6635li94oa] {
overflow: hidden;
}

#sidebar .sub-menu.show[b-6635li94oa] {
grid-template-rows: 1fr;
}

.dropdown-btn i[b-6635li94oa] {
transition: 200ms ease;
}

.rotate i:last-child[b-6635li94oa] {
transform: rotate(180deg);
}

#sidebar .sub-menu a[b-6635li94oa] {
padding-left: 2em;
}

#toggle-btn[b-6635li94oa] {
margin-left: auto;
padding: 1em;
border: none;
border-radius: .5em;
background: none;
cursor: pointer;
}

#toggle-btn i[b-6635li94oa] {
transition: transform 150ms ease;
}

#toggle-btn:hover[b-6635li94oa] {
background-color: var(--hover-clr);
}

main[b-6635li94oa] {
padding: min(30px, 7%);
}

main p[b-6635li94oa] {
color: var(--secondary-text-clr);
margin-top: 5px;
margin-bottom: 15px;
}

.container[b-6635li94oa] {
border: 1px solid #42434a;
border-radius: 1em;
margin-bottom: 20px;
padding: min(3em, 15%);
}

.container h2[b-6635li94oa],
.container p[b-6635li94oa] {
margin-top: 1em;
}

@media (max-width: 800px) {
    #sidebar[b-6635li94oa],
    #sidebar.close[b-6635li94oa] {
        width: 100% !important;
        height: 60px !important;
        padding: 0 !important;
    }

    #sidebar.close ul[b-6635li94oa] {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
        grid-auto-flow: column;
        align-items: center;
        overflow-x: auto;
    }

    #sidebar.close li[b-6635li94oa] {
        display: flex;
        justify-content: center;
    }

    #sidebar.close span[b-6635li94oa] {
        display: none;
    }

    body[b-6635li94oa] {
    grid-template-columns: 1fr;
    }

    main[b-6635li94oa] {
    padding: 2em 1em 60px 1em;
    }

    .container[b-6635li94oa] {
    border: none;
    padding: 0;
    }

    #sidebar[b-6635li94oa] {
    height: 60px;
    width: 100%;
    border-right: none;
    border-top: 1px solid #42434a;
    padding: 0;
    position: fixed;
    top: unset;
    bottom: 0;
    overflow:hidden;
    }

    #sidebar > ul[b-6635li94oa] {
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
    grid-auto-flow: column;
    align-items: center;
    overflow-x: scroll;
    }

    #sidebar ul li[b-6635li94oa] {
    height: 100%;
    }

    #sidebar ul a[b-6635li94oa],
    #sidebar ul .dropdown-btn[b-6635li94oa] {
    width: 60px;
    height: 60px;
    padding: 0;
    border-radius: 0;
    justify-content: center;
    }

    #sidebar ul li span[b-6635li94oa],
    #sidebar ul li:first-child[b-6635li94oa],
    .dropdown-btn i:last-child[b-6635li94oa] {
    display: none;
    }

    #sidebar ul li .sub-menu.show[b-6635li94oa] {
    position: fixed;
    bottom: 60px;
    left: 0;
    box-sizing: border-box;
    height: 60px;
    width: 100%;
    background-color: black;
    border-top: 1px solid #42434a;
    display: flex;
    justify-content: center;
    }

    #sidebar ul li .sub-menu.show > li[b-6635li94oa] {
        overflow-x: auto;
    }

    #sidebar ul li .sub-menu.show li[b-6635li94oa] {
        display: inline-flex;
    }
    .nav-item[b-6635li94oa] {
       padding-top:1.5px;
    }

    #sidebar ul li .sub-menu.show a[b-6635li94oa] {
        box-sizing: border-box;
        padding: 1em;
        width: auto;
        justify-content: center;
    }
    #sidebar ul[b-6635li94oa] {
        text-align: -webkit-center !important;
    }
    .logomenu[b-6635li94oa] {
        width: 50px !important;
        object-fit: contain;
        padding-top: 6px;
    }
    .nav-item[b-6635li94oa]  .menu {
        justify-content: center;
    }
     
}
#sidebar ul .menu:hover[b-6635li94oa] {
    background-color: rgba(255,255,255,0.1);
}
 
#sidebar ul[b-6635li94oa] {
padding-left: 0.1rem;
}


.nav-item[b-6635li94oa]  .nav-link {
    border-radius: .5em;
    padding: .85em;
    text-decoration: none;
    color: var(--text-clr);
    display: flex;
    align-items: center;
    gap: 1em;
}
.nav-item[b-6635li94oa]  a.active {
    background-color: #80746C;
}

.nav-item[b-6635li94oa]  .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
}
/* /Components/Pages/Account/ConfirmInfoDialog.razor.rz.scp.css */
/* General container and card styling */
.profile-form-container[b-d9llermee1] {
    background-color: var(--bs-gray-100); /* Light gray background */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.profile-card[b-d9llermee1] {
    border: 1px solid var(--bs-gray-300);
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.05);
    padding: 20px;
}

/* Header styling */
.card-header-custom[b-d9llermee1] {
    background-color: transparent;
    border-bottom: none;
    padding-bottom: 1.5rem;
    text-align: center;
}

.card-title-custom[b-d9llermee1] {
    font-size: 2.25rem; /* h2 equivalent */
    font-weight: 700;
    color: var(--uottawa-burgundy);
}

/* Form field styling */
.form-grid[b-d9llermee1] {
    display: grid;
    grid-template-columns: 120px 1fr; /* Fixed width for labels, rest for input */
    align-items: center;
    gap: 1rem 1rem; /* Row gap, column gap */
}

.form-label-custom[b-d9llermee1] {
    text-align: right;
    color: var(--uottawa-burgundy);
    font-weight: 500; /* Slightly bolder than default */
}

.form-control-custom[b-d9llermee1] {
    border-color: var(--uottawa-burgundy);
    border-width: 1px; /* Ensure border is visible */
}

.form-control-custom:focus[b-d9llermee1] {
    border-color: var(--uottawa-burgundy);
    box-shadow: 0 0 0 0.25rem rgba(var(--uottawa-burgundy-rgb), 0.25);
}

/* Checkbox styling */
.form-check[b-d9llermee1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.form-check-input-custom[b-d9llermee1] {
    border: 2px solid var(--uottawa-burgundy); /* Darker border for visibility */
    width: 1.25rem;
    height: 1.25rem;
    cursor: pointer;
    margin: 0; /* Remove default margin */
    flex-shrink: 0; /* Prevent checkbox from shrinking */
}

.form-check-input-custom:checked[b-d9llermee1] {
    background-color: var(--uottawa-burgundy);
    border-color: var(--uottawa-burgundy);
}

.form-check-input-custom:focus[b-d9llermee1] {
    box-shadow: 0 0 0 0.25rem rgba(var(--uottawa-burgundy-rgb), 0.25);
}

/* Link styling */
.info-link[b-d9llermee1] {
    color: #007bff; /* Standard blue for links */
    text-decoration: underline;
}

.info-link:hover[b-d9llermee1] {
    color: #0056b3; /* Darker blue on hover */
}

/* Button styling */
.btn-custom-outline[b-d9llermee1] {
    background-color: transparent;
    color: var(--bs-gray-700);
    border: 1px solid var(--bs-gray-300);
    padding: 0.75rem 2rem; /* Larger padding */
    font-size: 1.125rem; /* Larger font */
    font-weight: 500;
    border-radius: 0.5rem; /* Rounded corners */
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.btn-custom-outline:hover[b-d9llermee1] {
    background-color: var(--bs-gray-100);
    border-color: var(--bs-gray-300);
    color: var(--bs-gray-800);
}

.btn-custom-outline:focus[b-d9llermee1] {
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-gray-600), 0.25);
}

.btn-custom-primary[b-d9llermee1] {
    background-color: var(--uottawa-burgundy);
    color: var(--bs-white) !important;
    border: 1px solid var(--uottawa-burgundy);
    padding: 0.75rem 2rem; /* Larger padding */
    font-size: 1.125rem; /* Larger font */
    font-weight: 500;
    border-radius: 0.5rem; /* Rounded corners */
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.btn-custom-primary:hover[b-d9llermee1] {
    background-color: var(--uottawa-burgundy-dark) !important;
    border-color: var(--uottawa-burgundy-dark) !important;
}

.btn-custom-primary:focus[b-d9llermee1] {
    box-shadow: 0 0 0 0.25rem rgba(var(--uottawa-burgundy-dark-rgb), 0.25);
}

.btn-custom-primary:disabled[b-d9llermee1] {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: var(--light-garnet);
}

@media (max-width: 400px) {
    .profile-form-container[b-d9llermee1] {
        min-height: unset !important;
    }
    /* 1) Stack labels and inputs */
    [b-d9llermee1] .form-grid {
        grid-template-columns: 1fr !important;
        gap: 0.5rem 0 !important;
    }

    /* 2) Left-align labels so they don’t disappear off-screen */
    [b-d9llermee1] .form-label-custom {
        text-align: left !important;
    }

    /* 3) Make the card full‐width with small side padding */
    [b-d9llermee1] .profile-card {
        max-width: 100% !important;
        margin: 0 0.5rem !important;
        padding: 1rem !important;
    }

    /* 4) Stretch buttons to full width for easier tapping */
    [b-d9llermee1] .btn-custom-outline,
    .btn-custom-primary[b-d9llermee1] {
        width: 100% !important;
        box-sizing: border-box;
    }
}
@media (max-width: 768px) {

    .nav-buttons[b-d9llermee1] {
        flex-direction: column-reverse;
        gap: 1rem;
        margin-top: 2rem;
        padding-top: 1.5rem;
    }
}

.btn-back[b-d9llermee1] {
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
    color: white;
    border: 2px solid #6c757d;
}
/* /Components/Pages/Account/Login.razor.rz.scp.css */
/* /Components/Pages/Account/UserProfileWrapper.razor.rz.scp.css */
/* /Components/Pages/Admin/AdManagement.razor.rz.scp.css */
/* ============================================================
   Ads Management CSS
   Summary:
   - Layout containers (.listings-container, .section-stats)
   - View toggle buttons and toolbar styling
   - Custom table headers, cells, hover, and chips
   - Status and statistic card colors
   - Action buttons and approval column
   - Loading / Empty states
   - Responsive adjustments for mobile
   - Entry animation for fade-in effect
   ============================================================ */


/* Listings main container - wraps the Ads management content */
.listings-container[b-0pgw5l9y4c] {
    padding: 20px;
    margin: 0 auto;
}


/* ----------------------------- View Toggle ----------------------------- */

/* Wrapper for the row of toggle buttons (Pending/Approved/Rejected/Expired) */
.view-toggle-section[b-0pgw5l9y4c] {
    margin-bottom: 2rem;
    display: flex;
    justify-content: center;
}

/* Styles the MudButtonGroup used for view toggles */
.view-toggle-buttons[b-0pgw5l9y4c] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
}


/* ----------------------------- Table Styling ----------------------------- */

/* Custom table header cells (MudTable Th) */
[b-0pgw5l9y4c] .table-header {
    background-color: #f8f9fa !important;
    font-weight: 600 !important;
    color: #495057 !important;
    border-bottom: 2px solid var(--primary-garnet) !important;
    text-align: center;
}

/* Top toolbar of the MudTable */
[b-0pgw5l9y4c] .mud-table-toolbar {
    background: var(--primary-garnet);
    color: white;
    padding: 1.5rem;
}

/* Title text inside the table toolbar */
.table-title[b-0pgw5l9y4c] {
    color: white !important;
    font-weight: 600;
    font-size: 1.25rem;
}


/* ----------------------------- Search Input ----------------------------- */

/* Restrict search bar width in toolbar */
.search-input[b-0pgw5l9y4c] {
    max-width: 300px;
}

/* Base search input (MudTextField) styling */
[b-0pgw5l9y4c] .search-input .mud-input-root {
    border-radius: 8px;
    color: white;
}

/* White icon inside the search input (magnifying glass) */
[b-0pgw5l9y4c] .white-icon .mud-input-adornment .mud-icon-root {
    color: white !important;
}

/* White text inside the search input */
[b-0pgw5l9y4c] .search-input .mud-input-root input {
    color: white;
}

    /* Semi-transparent white placeholder text */
    [b-0pgw5l9y4c] .search-input .mud-input-root input::placeholder {
        color: rgba(255, 255, 255, 0.7);
    }


/* ----------------------------- Approval Header ----------------------------- */

/* Special green header cell when Assign Status column is shown */
.approval-header[b-0pgw5l9y4c] {
    background-color: #e8f5e8 !important;
    color: #2e7d32 !important;
}


/* ----------------------------- Table Cells ----------------------------- */

/* Common table data cells */
.residence-cell[b-0pgw5l9y4c],
.price-cell[b-0pgw5l9y4c],
.type-cell[b-0pgw5l9y4c],
.gender-cell[b-0pgw5l9y4c],
.date-cell[b-0pgw5l9y4c] {
    text-align: center;
    color: #495057;
}

/* Expiry column cell */
.expiry-cell[b-0pgw5l9y4c] {
    text-align: center;
    color: #495057;
}

/* Expiry column extra info (Expired / Expiring Soon / Renewable) */
.expiry-info[b-0pgw5l9y4c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

/* Small font chips inside expiry cell */
.expired-chip[b-0pgw5l9y4c] {
    font-size: 0.65rem !important;
}

.expiring-chip[b-0pgw5l9y4c] {
    font-size: 0.65rem !important;
}

/* Generic status cell styling */
.status-cell[b-0pgw5l9y4c] {
    text-align: center;
}

/* Approval column cell */
.approval-cell[b-0pgw5l9y4c] {
    text-align: center;
    background-color: #f8fff8;
}

/* Actions column cell */
.actions-cell[b-0pgw5l9y4c] {
    text-align: center;
}

/* Alternate style for actions when rejected listings are shown */
.actions-cell-rejected[b-0pgw5l9y4c] {
    text-align: center;
}


/* ----------------------------- Statistics Cards ----------------------------- */

/* Container wrapping all statistic cards */
.section-stats[b-0pgw5l9y4c] {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
    flex-wrap: wrap;
    justify-content: center;
}

/* Base card style */
.stat-card[b-0pgw5l9y4c] {
    padding: 10px 15px;
    border-radius: 8px;
    min-width: 120px;
    text-align: center;
}

/* Yellow card for Pending */
.pending-stat[b-0pgw5l9y4c] {
    background-color: #fff3cd;
    color: #856404;
}

/* Garnet card for Approved */
.approved-stat[b-0pgw5l9y4c] {
    background-color: #59de3f;
    color: #660014;
}

/* Red card for Rejected */
.rejected-stat[b-0pgw5l9y4c] {
    background-color: #f8d7da;
    color: #721c24;
}

/* Grey card for Expired */
.expired-stat[b-0pgw5l9y4c] {
    background-color: #e2e3e5;
    color: #383d41;
}


/* ----------------------------- Action Buttons ----------------------------- */

/* Container for grouped buttons inside table cells */
.action-buttons[b-0pgw5l9y4c] {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

    /* Reduce padding for buttons inside action containers */
    .action-buttons .mud-button[b-0pgw5l9y4c] {
        min-width: auto;
        padding: 4px 8px;
    }


/* ----------------------------- Chips ----------------------------- */

/* Font size for renewable chip */
.renewable-chip[b-0pgw5l9y4c] {
    font-size: 0.75rem;
}

/* Minimum width for status select (MudSelect) */
.status-select-container[b-0pgw5l9y4c] {
    min-width: 120px;
}

/* MudChip global styling */
[b-0pgw5l9y4c] .mud-chip {
    font-weight: 500;
    font-size: 0.75rem;
}


/* ----------------------------- Table Row Hover ----------------------------- */

/* Row hover effect on MudTable rows */
[b-0pgw5l9y4c] .mud-table-row:hover {
    background: rgba(143, 0, 26, 0.05);
}


/* ----------------------------- Loading / Empty States ----------------------------- */

/* Shared style for loading and empty states */
.loading-state[b-0pgw5l9y4c],
.empty-state[b-0pgw5l9y4c] {
    text-align: center;
    padding: 3rem;
    color: #6c757d;
}

    /* Icon inside empty state */
    .empty-state .mud-icon[b-0pgw5l9y4c] {
        margin-bottom: 1rem;
        color: #dee2e6;
    }

    /* Text inside loading/empty states */
    .loading-state .mud-typography[b-0pgw5l9y4c],
    .empty-state .mud-typography[b-0pgw5l9y4c] {
        font-size: 1.1rem;
        margin-bottom: 1rem;
    }


/* ----------------------------- Responsive ----------------------------- */

@media (max-width: 768px) {

    /* Stack the toggle buttons in a grid on mobile */
    [b-0pgw5l9y4c] .mud-button-group-root {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        gap: .5rem;
        justify-content: center;
        box-shadow: none;
    }

    /* Smaller title for mobile */
    .page-title[b-0pgw5l9y4c] {
        font-size: 2rem;
        padding: 1rem;
    }

    /* Reduced padding for container */
    .listings-container[b-0pgw5l9y4c] {
        padding: 10px;
    }

    /* Less spacing before toggle section */
    .view-toggle-section[b-0pgw5l9y4c] {
        margin-bottom: 1rem;
    }

    /* Smaller expiry info text */
    .expiry-info[b-0pgw5l9y4c] {
        font-size: 0.8rem;
    }

    /* Stack action buttons vertically on mobile */
    .action-buttons[b-0pgw5l9y4c] {
        flex-direction: column;
        gap: 2px;
    }

        /* Buttons expand full width on mobile */
        .action-buttons .mud-button[b-0pgw5l9y4c] {
            width: 100%;
            justify-content: center;
        }

    /* Toolbar layout stacks vertically */
    [b-0pgw5l9y4c] .mud-table-toolbar {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    /* Search input uses full width */
    .search-input[b-0pgw5l9y4c] {
        max-width: 100%;
    }
}


/* ----------------------------- Animation ----------------------------- */

/* Fade-in slide-up animation for the listings container */
.listings-container[b-0pgw5l9y4c] {
    animation: fadeInUp-b-0pgw5l9y4c 0.6s ease-out;
}

@keyframes fadeInUp-b-0pgw5l9y4c {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* /Components/Pages/Admin/AuthorizePosting.razor.rz.scp.css */
/* ============================================================
   Authorize Posting CSS
   Summary:
   - Search section (inputs, search/clear buttons)
   - Authorize section (card, display, edit modes)
   - Status chips and descriptions
   - Quick select buttons for posting limits
   - No results + loading state
   - Responsive adjustments for mobile
   - Slide-down animation
   ============================================================ */


/* ----------------------------- Search Section ----------------------------- */

/* Container for the search form area */
.search-section[b-qh5u0c7gtc] {
    margin-bottom: 30px;
}

/* Card wrapping the search form */
.search-card[b-qh5u0c7gtc] {
    border: 2px solid #b565a7;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    animation: slideDown-b-qh5u0c7gtc 0.3s ease-out; /* subtle entry animation */
}

/* Search form uses vertical stack layout with spacing */
.search-form[b-qh5u0c7gtc] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Row containing the text field + buttons */
.search-row[b-qh5u0c7gtc] {
    display: flex;
    gap: 15px;
    align-items: end; /* align button with input bottom */
}

/* Search text field styling */
.search-input[b-qh5u0c7gtc] {
    flex: 1;
    max-width: 400px;
}

/* Primary search button (MudButton) styled via ::deep */
[b-qh5u0c7gtc] .search-btn {
    color: white !important;
    background-color: #8b1538 !important;
    min-width: 120px;
    height: 56px; /* aligns with text field height */
}

/* Clear button positioning */
.clear-btn[b-qh5u0c7gtc] {
    align-self: flex-start;
}


/* ----------------------------- Authorize Section ----------------------------- */

/* Container for the authorize posting card */
.authorize-section[b-qh5u0c7gtc] {
    margin-bottom: 40px;
}

/* Card styling for authorize section */
.authorize-card[b-qh5u0c7gtc] {
    border: 2px solid #b565a7;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    animation: slideDown-b-qh5u0c7gtc 0.3s ease-out;
}


/* ----------------------------- Display Section ----------------------------- */

/* View mode wrapper (when not editing) */
.display-section[b-qh5u0c7gtc] {
    text-align: center;
    padding: 20px;
}

/* Section showing the current posting limit */
.current-status[b-qh5u0c7gtc] {
    margin-bottom: 25px;
}

/* Chip showing current posting limit */
.status-chip[b-qh5u0c7gtc] {
    font-weight: 600;
    font-size: 1.1rem;
    padding: 12px 20px;
}

/* Text description below the chip */
.status-description[b-qh5u0c7gtc] {
    color: #666;
    font-style: italic;
}

/* "Update Posting Limit" button */
.update-btn[b-qh5u0c7gtc] {
    background-color: #8b1538 !important;
    color: white !important;
    font-size: 1rem;
    padding: 12px 24px;
}


/* ----------------------------- Editing Section ----------------------------- */

/* Wrapper when editing mode is active */
.editing-section[b-qh5u0c7gtc] {
    padding: 20px;
}

/* Container for numeric input + quick select */
.posting-limit-controls[b-qh5u0c7gtc] {
    margin: 20px 0;
}

/* Numeric field input styling */
.posting-input[b-qh5u0c7gtc] {
    max-width: 300px;
    margin-bottom: 20px;
}

/* Box around quick select buttons */
.quick-select-buttons[b-qh5u0c7gtc] {
    background-color: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #dee2e6;
}

/* Row of quick select MudButtons */
.quick-buttons[b-qh5u0c7gtc] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* Individual quick select button */
.quick-buttons .mud-button[b-qh5u0c7gtc] {
    min-width: 80px;
}


/* ----------------------------- No Results Section ----------------------------- */

/* Container when no student is found */
.no-results-section[b-qh5u0c7gtc] {
    margin-top: 30px;
}

/* Alert box inside no results */
.search-no-results[b-qh5u0c7gtc] {
    text-align: center;
    padding: 20px;
}


/* ----------------------------- Loading State ----------------------------- */

/* Smaller circular loader for "Searching…" */
.mud-progress-circular[b-qh5u0c7gtc] {
    width: 16px !important;
    height: 16px !important;
}


/* ----------------------------- Animation ----------------------------- */

/* Keyframes for sliding down when cards load */
@keyframes slideDown-b-qh5u0c7gtc {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ----------------------------- Responsive ----------------------------- */

@media (max-width: 768px) {

    /* Stack search inputs/buttons vertically */
    .search-row[b-qh5u0c7gtc] {
        flex-direction: column;
        align-items: stretch;
    }

    /* Allow search input full width */
    .search-input[b-qh5u0c7gtc] {
        max-width: none;
    }

    /* Stack action buttons vertically in edit mode */
    .action-buttons[b-qh5u0c7gtc] {
        flex-direction: column;
        align-items: center;
    }

    /* Reduce padding in display mode */
    .display-section[b-qh5u0c7gtc] {
        padding: 15px;
    }

    /* Reduce padding in editing mode */
    .editing-section[b-qh5u0c7gtc] {
        padding: 15px;
    }

    /* Center quick buttons row */
    .quick-buttons[b-qh5u0c7gtc] {
        justify-content: center;
    }

    /* Allow numeric field full width */
    .posting-input[b-qh5u0c7gtc] {
        max-width: none;
    }
}


/* ----------------------------- Chips ----------------------------- */

/* Stronger chip text weight globally */
[b-qh5u0c7gtc] .mud-chip {
    font-weight: 600;
}
/* /Components/Pages/Admin/ContentManagement/TermsConditionsInsert.razor.rz.scp.css */
[b-ipvdjh6io8] .agreement-section {
    margin-bottom: 2rem;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 2rem;
    background-color: #f8f9fa;
}

[b-ipvdjh6io8] .agreement-title {
    color: #8b1538;
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid #8b1538;
    padding-bottom: 0.5rem;
}

[b-ipvdjh6io8] .agreement-list {
    color: black;
    line-height: 1.6;
}

[b-ipvdjh6io8] .agreement-item {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    align-items: flex-start;
}

[b-ipvdjh6io8] .agreement-number {
    font-weight: 600;
    flex-shrink: 0;
    margin-top: 0.1rem;
    color: #8b1538;
    font-size: 1.1rem;
}

[b-ipvdjh6io8] .agreement-text {
    margin: 0;
    flex: 1;
    font-size: 1rem;
}

.main-title[b-ipvdjh6io8] {
    color: #8b1538;
    font-size: 2rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 2rem;
    border-bottom: 2px solid #8b1538;
    padding-bottom: 1rem;
}
/* Responsive padding */
@media (min-width: 768px) { /* md: */
    .message-manager-container[b-ipvdjh6io8] {
        padding: 1.5rem; /* md:p-6 */
    }
}

@media (min-width: 1024px) { /* lg: */
    .message-manager-container[b-ipvdjh6io8] {
        padding: 2rem; /* lg:p-8 */
    }
}
@media (min-width: 640px) { /* sm: */
    .form-select[b-ipvdjh6io8] {
        font-size: 0.875rem; /* sm:text-sm */
        line-height: 1.25rem;
    }
}
/* Base styles for the container */
.message-manager-container[b-ipvdjh6io8] {
    display: flex;
    justify-content: center;
    padding: 1rem; /* p-4 */
    background-color: #f9fafb; /* bg-gray-50 */
    min-height: 100vh; /* min-h-screen */
}


/* Card wrapper styles - MADE LARGER */
.card-wrapper[b-ipvdjh6io8] {
    width: 100%; /* w-full */
    max-width: 70rem; /* Increased from 42rem to 70rem for larger size */
    background-color: #fff; /* bg-white */
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
    padding: 1.5rem; /* p-6 */
    display: grid; /* grid */
    gap: 1.5rem; /* space-y-6 (approximated with gap) */
}

/* Header section styles */
.header-section[b-ipvdjh6io8] {
    padding-bottom: 1rem; /* pb-4 */
}

.header-title[b-ipvdjh6io8] {
    font-size: medium; /* text-3xl */
    line-height: 2.25rem;
    font-weight: 600; /* font-extrabold */
    color: #111827; /* text-gray-900 */
    margin-bottom: unset;
}

.header-description[b-ipvdjh6io8] {
    color: #4b5563; /* text-gray-600 */
    margin-top: 0.25rem; /* mt-1 */
}

/* Form field group styles */
.form-group[b-ipvdjh6io8] {
    display: grid; /* grid */
    gap: 1rem; /* gap-4 */
}

.form-label[b-ipvdjh6io8] {
    display: block; /* block */
    font-size: 0.875rem; /* text-sm */
    line-height: 1.25rem;
    font-weight: 500; /* font-medium */
    color: #374151; /* text-gray-700 */
}

/* Text input styles (for Title) */
[b-ipvdjh6io8] .form-input {
    margin-top: 0.25rem; /* mt-1 */
    display: block; /* block */
    width: 100%; /* w-full */
    padding: 0.5rem 0.75rem; /* px-3 py-2 */
    font-size: 1rem; /* text-base */
    line-height: 1.5rem;
    border: 1px solid #d1d5db; /* border-gray-300 */
    border-radius: 0.375rem; /* rounded-md */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
}

[b-ipvdjh6io8] .form-input:focus {
    outline: 2px solid transparent; /* focus:outline-none */
    outline-offset: 2px;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #3b82f6; /* focus:ring-blue-500 with ring-offset-2 */
    border-color: #3b82f6; /* focus:border-blue-500 */
}

/* Select input styles */
[b-ipvdjh6io8] .form-select {
    margin-top: 0.25rem; /* mt-1 */
    display: block; /* block */
    width: 100%; /* w-full */
    padding-left: 0.75rem; /* pl-3 */
    padding-right: 2.5rem; /* pr-10 */
    padding-top: 0.5rem; /* py-2 */
    padding-bottom: 0.5rem; /* py-2 */
    font-size: 1rem; /* text-base */
    line-height: 1.5rem;
    border: 1px solid #d1d5db; /* border-gray-300 */
    border-radius: 0.375rem; /* rounded-md */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
    -webkit-appearance: none; /* Remove default arrow */
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E"); /* Custom arrow */
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.5em 1.5em;
}

    [b-ipvdjh6io8] .form-select:focus {
        outline: 2px solid transparent; /* focus:outline-none */
        outline-offset: 2px;
        box-shadow: 0 0 0 2px #fff, 0 0 0 4px #3b82f6; /* focus:ring-blue-500 with ring-offset-2 */
        border-color: #3b82f6; /* focus:border-blue-500 */
    }



/* Language editors container */
.language-editors-container[b-ipvdjh6io8] {
    display: grid;
    grid-template-columns: 1fr; /* Stack on small screens */
    gap: 1.5rem; /* gap-6 */
}



/* Message content description */
.message-content-description[b-ipvdjh6io8] {
    font-size: 0.875rem; /* text-sm */
    line-height: 1.25rem;
    color: #6b7280; /* text-gray-500 */
    margin-top: 0.5rem; /* Added margin-top for spacing below editors */
}

/* Save button styles - UPDATED COLORS */
[b-ipvdjh6io8] .save-button {
    display: inline-flex; /* inline-flex */
    align-items: center; /* items-center */
    padding-left: 1.5rem; /* px-6 */
    padding-right: 1.5rem; /* px-6 */
    padding-top: 0.75rem; /* py-3 */
    padding-bottom: 0.75rem; /* py-3 */
    border: 1px solid transparent; /* border border-transparent */
    font-size: 1rem; /* text-base */
    line-height: 1.5rem;
    font-weight: 500; /* font-medium */
    border-radius: 0.375rem; /* rounded-md */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
    color: #fff !important; /* text-white */
    background-color: var(--primary-garnet) !important; /* Using custom color */
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; /* transition-colors */
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms; /* duration-200 */
    cursor: pointer;
    width: fit-content; /* w-fit */
}

    .save-button:hover[b-ipvdjh6io8] {
        background-color: var(--light-garnet); /* Using custom color */
    }

    .save-button:focus[b-ipvdjh6io8] {
        outline: 2px solid transparent; /* focus:outline-none */
        outline-offset: 2px;
        box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--primary-garnet); /* focus:ring-2 focus:ring-offset-2 focus:ring-gray-700 */
    }

/* Message preview section */
.preview-section[b-ipvdjh6io8] {
    display: grid; /* grid */
    gap: 1rem; /* gap-4 */
    padding-top: 1rem; /* pt-4 */
    border-top: 1px solid #e5e7eb; /* border-t border-gray-200 */
}

.preview-title[b-ipvdjh6io8] {
    font-size: 1.25rem; /* text-xl */
    line-height: 1.75rem;
    font-weight: 700; /* font-bold */
    color: #111827; /* text-gray-900 */
}

.preview-content-grid[b-ipvdjh6io8] {
    display: grid;
    grid-template-columns: 1fr; /* Stack on small screens */
    gap: 1rem; /* gap-4 */
}



.preview-content-item[b-ipvdjh6io8] {
    min-height: 120px; /* min-h-[120px] */
    border-radius: 0.5rem; /* rounded-lg */
    border: 1px solid #e5e7eb; /* border border-gray-200 */
    background-color: #f9fafb; /* bg-gray-50 */
    padding: 1rem; /* p-4 */
    color: #4b5563; /* text-gray-600 */
}
/* /Components/Pages/Admin/ContentManagement/TermsConditonsList.razor.rz.scp.css */
/* Apply custom primary color to Bootstrap primary elements */
.btn-primary[b-03gzlvw4kz], .badge.bg-primary[b-03gzlvw4kz] {
    background-color: var(--primary-garnet) !important;
    border-color: var(--primary-garnet) !important;
}

    .btn-primary:hover[b-03gzlvw4kz], .badge.bg-primary[b-03gzlvw4kz] {
        background-color: var(--light-garnet) !important;
        border-color: var(--light-garnet) !important;
    }

    .btn-primary:focus[b-03gzlvw4kz], .btn-primary.focus[b-03gzlvw4kz] {
        box-shadow: 0 0 0 0.25rem rgba(var(--uottawa-burgundy-rgb), 0.25) !important; /* Custom focus ring */
    }

/* General container styling */
.container-fluid.message-list-container[b-03gzlvw4kz] {
    background-color: var(--bs-gray-50); /* Light gray background */
    min-height: 100vh;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

/* Header styling */
.page-header[b-03gzlvw4kz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.page-title[b-03gzlvw4kz] {
    font-size: 2.25rem; /* h2 equivalent */
    font-weight: 700; /* bold */
    color: var(--bs-gray-900); /* dark text */
    border-bottom: 2px solid var(--primary-garnet); /* Burgundy underline */
    padding-bottom: 0.5rem;
}

.page-subtitle[b-03gzlvw4kz] { /* Added for consistency with React version */
    font-size: 1rem;
    color: var(--bs-gray-600);
    margin-top: 1rem;
}

/* Card styling */
.message-card[b-03gzlvw4kz] {
    height: 100%; /* Ensure cards in a row have equal height */
    border: 1px solid var(--bs-gray-200);
    border-radius: 0.75rem; /* Slightly more rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); /* Subtle shadow */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    border-left: 4px solid var(--primary-garnet); /* Burgundy left border */
}

    .message-card:hover[b-03gzlvw4kz] {
        transform: translateY(-3px); /* Slight lift on hover */
        box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); /* Enhanced shadow on hover */
    }

.card-header[b-03gzlvw4kz] {
    background-color: transparent;
    border-bottom: none;
    padding-bottom: 0.5rem;
    display: flex; /* For flex layout within header */
    justify-content: space-between;
    align-items: flex-start;
}

.card-title[b-03gzlvw4kz] {
    font-size: 1.25rem; /* h5 equivalent */
    font-weight: 600;
    color: var(--bs-gray-900);
    transition: color 0.3s; /* For hover effect */
}

.message-card:hover .card-title[b-03gzlvw4kz] {
    color: var(--primary-garnet); /* Change color on card hover */
}

.card-subtitle[b-03gzlvw4kz] {
    font-size: 0.875rem; /* small text */
    color: var(--bs-gray-600);
    margin-top: 0.25rem;
}

.card-body[b-03gzlvw4kz] {
    padding-top: 0.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.message-snippet[b-03gzlvw4kz] {
    font-size: 0.9rem;
    color: var(--bs-gray-700);
    margin-bottom: 1rem;
    /* Custom multi-line truncation */
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Limit to 3 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    background-color: var(--bs-gray-50); /* Light background for snippet */
    border-radius: 0.375rem; /* Rounded corners */
    padding: 0.75rem;
}

.badge-container[b-03gzlvw4kz] {
    display: flex;
    justify-content: flex-end;
    margin-top: auto; /* Push badge to bottom */
}

.info-row[b-03gzlvw4kz] {
    display: flex;
    justify-content: space-between;
    font-size: 0.875rem;
    color: var(--bs-gray-600);
}

/* Dropdown menu styling */
.dropdown-toggle[b-03gzlvw4kz]::after {
    display: none; /* Hide default caret */
}

.dropdown-item[b-03gzlvw4kz] {
    font-size: 0.9rem;
    gap: 0.5rem;
}

    .dropdown-item svg[b-03gzlvw4kz] { /* Icon styling within dropdown */
        width: 1rem;
        height: 1rem;
        color: var(--bs-gray-500);
    }

    .dropdown-item.text-danger svg[b-03gzlvw4kz] {
        color: var(--bs-red-600);
    }

/* Modal styling for preview */
.modal-preview .modal-body[b-03gzlvw4kz] {
    max-height: 70vh; /* Limit height for scrollable content */
    overflow-y: auto;
}

.modal-preview h4[b-03gzlvw4kz] {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: var(--bs-gray-800);
}

.modal-preview .preview-content-box[b-03gzlvw4kz] {
    border: 1px solid var(--bs-gray-200);
    background-color: var(--bs-gray-50);
    padding: 1rem;
    border-radius: 0.5rem;
    min-height: 100px;
    color: var(--bs-gray-700);
    line-height: 1.6;
}
/* No messages found styling */
.no-messages-found[b-03gzlvw4kz] {
    text-align: center;
    padding: 3rem 0;
    color: var(--bs-gray-600);
    font-size: 1.1rem;
}

/* Custom styles for icons and badges to match React version */
.icon-wrapper[b-03gzlvw4kz] {
    padding: 0.5rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--uottawa-burgundy-light-bg);
    color: var(--primary-garnet);
}

    .icon-wrapper svg[b-03gzlvw4kz] {
        width: 1rem;
        height: 1rem;
    }

.badge.active-badge[b-03gzlvw4kz] {
    background-color: var(--bs-green-100);
    color: var(--bs-green-800);
    border: 1px solid var(--bs-green-200);
}

.badge.archived-badge[b-03gzlvw4kz] { /* Mapping 'Disabled' to 'Archived' for visual consistency */
    background-color: var(--bs-gray-100);
    color: var(--bs-gray-800);
    border: 1px solid var(--bs-gray-200);
}

.card-title-group[b-03gzlvw4kz] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dropdown-trigger[b-03gzlvw4kz] {
    background: none;
    border: none;
    padding: 0.5rem;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: opacity 0.3s;
    opacity: 0; /* Hidden by default */
}

.message-card:hover .dropdown-trigger[b-03gzlvw4kz] {
    opacity: 1; /* Visible on card hover */
}

.dropdown-trigger:hover[b-03gzlvw4kz] {
    background-color: var(--bs-gray-100);
}

.dropdown-trigger svg[b-03gzlvw4kz] {
    width: 1.125rem; /* 18px */
    height: 1.125rem; /* 18px */
    color: var(--bs-gray-500);
}

/* Custom Modal/Dialog styles to match React version's dialogs */
.custom-modal-dialog .modal-content[b-03gzlvw4kz] {
    border-radius: 0.5rem;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.custom-modal-dialog .modal-header[b-03gzlvw4kz] {
    border-bottom: none;
    padding-bottom: 0;
}

.custom-modal-dialog .modal-title[b-03gzlvw4kz] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--bs-gray-900);
}

.custom-modal-dialog .modal-body[b-03gzlvw4kz] {
    padding-top: 0.5rem;
}

.custom-modal-dialog .form-label[b-03gzlvw4kz] {
    font-weight: 500;
    color: var(--bs-gray-700);
}

.custom-modal-dialog .form-control[b-03gzlvw4kz],
.custom-modal-dialog .form-select[b-03gzlvw4kz],
.custom-modal-dialog .form-textarea[b-03gzlvw4kz] {
    border-color: var(--bs-gray-300);
}

    .custom-modal-dialog .form-control:focus[b-03gzlvw4kz],
    .custom-modal-dialog .form-select:focus[b-03gzlvw4kz],
    .custom-modal-dialog .form-textarea:focus[b-03gzlvw4kz] {
        border-color: var(--primary-garnet);
        box-shadow: 0 0 0 0.25rem rgba(var(--uottawa-burgundy-rgb), 0.2);
    }

.custom-modal-dialog .modal-footer[b-03gzlvw4kz] {
    border-top: none;
    padding-top: 0;
}

/* Empty State */
.empty-state[b-03gzlvw4kz] {
    text-align: center;
    padding: 3rem 0;
    color: var(--bs-gray-600);
    font-size: 1.1rem;
}

.empty-state-icon-wrapper[b-03gzlvw4kz] {
    width: 6rem; /* 96px */
    height: 6rem; /* 96px */
    margin: 0 auto 1rem auto;
    background-color: var(--bs-gray-100);
    border-radius: 9999px; /* Full circle */
    display: flex;
    align-items: center;
    justify-content: center;
}

    .empty-state-icon-wrapper svg[b-03gzlvw4kz] {
        width: 3rem; /* 48px */
        height: 3rem; /* 48px */
        color: var(--bs-gray-400);
    }

.empty-state-title[b-03gzlvw4kz] {
    font-size: 1.125rem; /* 18px */
    font-weight: 500;
    color: var(--bs-gray-900);
    margin-bottom: 0.5rem;
}

.empty-state-description[b-03gzlvw4kz] {
    color: var(--bs-gray-500);
    margin-bottom: 1rem;
}

[b-03gzlvw4kz] .agreement-section {
    margin-bottom: 2rem;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 2rem;
    background-color: #f8f9fa;
}

[b-03gzlvw4kz] .agreement-title {
    color: #8b1538;
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid #8b1538;
    padding-bottom: 0.5rem;
}

[b-03gzlvw4kz] .agreement-list {
    color: black;
    line-height: 1.6;
}

[b-03gzlvw4kz] .agreement-item {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    align-items: flex-start;
}

[b-03gzlvw4kz] .agreement-number {
    font-weight: 600;
    flex-shrink: 0;
    margin-top: 0.1rem;
    color: #8b1538;
    font-size: 1.1rem;
}

[b-03gzlvw4kz] .agreement-text {
    margin: 0;
    flex: 1;
    font-size: 1rem;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    /* Header styling */
    .page-header[b-03gzlvw4kz] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 2rem;
        flex-direction:column
    }

}
/* /Components/Pages/Admin/MyListings.razor.rz.scp.css */
/* ============================================================
   My Listings Page CSS
   Summary:
   - Styles for container, toolbar, table, cells, chips
   - Hover/empty/loading states
   - Responsive adjustments
   - Accessibility focus styles
   ============================================================ */


/* ----------------------------- Listings Container ----------------------------- */

/* Main wrapper around the table */
.listings-container[b-ysvq17pgjt] {
    padding: 20px;
    margin: 0 auto;
}


/* ----------------------------- Table Toolbar ----------------------------- */

/* Toolbar background gradient (MudBlazor toolbar inside MudTable) */
[b-ysvq17pgjt] .mud-table-toolbar {
    background: linear-gradient(135deg, var(--primary-garnet), #9c1c30);
    color: white;
    padding: 1.5rem;
}

/* Title inside toolbar */
.table-title[b-ysvq17pgjt] {
    color: white !important;
    font-weight: 600;
    font-size: 1.25rem;
}

/* Search input (MudTextField) max width */
.search-input[b-ysvq17pgjt] {
    max-width: 300px;
}

/* Deep styling for MudBlazor input root */
[b-ysvq17pgjt] .search-input .mud-input-root {
    border-radius: 8px;
    color: white;
}

/* Search input text */
[b-ysvq17pgjt] .search-input .mud-input-root input {
    color: white;
}

/* Placeholder color */
[b-ysvq17pgjt] .search-input .mud-input-root input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}


/* ----------------------------- Custom Table Headers ----------------------------- */

/* Header row cells */
[b-ysvq17pgjt] .table-header {
    background-color: #f8f9fa !important;
    font-weight: 600 !important;
    color: #495057 !important;
    border-bottom: 2px solid var(--primary-garnet) !important;
    text-align: center;
}


/* ----------------------------- Table Cells ----------------------------- */

/* Center text in these columns */
.residence-cell[b-ysvq17pgjt],
.price-cell[b-ysvq17pgjt],
.type-cell[b-ysvq17pgjt],
.gender-cell[b-ysvq17pgjt],
.date-cell[b-ysvq17pgjt] {
    text-align: center;
    color: #495057;
}

/* Expiry date column */
.expiry-cell[b-ysvq17pgjt] {
    text-align: center;
    color: #495057;
}

/* Container for expiry date + chips */
.expiry-info[b-ysvq17pgjt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

/* Small font sizes for chips */
.expired-chip[b-ysvq17pgjt] {
    font-size: 0.65rem !important;
}

.expiring-chip[b-ysvq17pgjt] {
    font-size: 0.65rem !important;
}

/* Status column text alignment */
.status-cell[b-ysvq17pgjt] {
    text-align: center;
}

/* Action column text alignment */
.actions-cell[b-ysvq17pgjt] {
    text-align: center;
}


/* ----------------------------- Row Hover ----------------------------- */

/* Hover color for MudTable rows */
[b-ysvq17pgjt] .mud-table-row:hover {
    background: rgba(143, 0, 26, 0.05);
}


/* ----------------------------- Status Chips ----------------------------- */

/* Generic MudChip styling */
[b-ysvq17pgjt] .mud-chip {
    font-weight: 500;
    font-size: 0.75rem;
}


/* ----------------------------- Empty & Loading States ----------------------------- */

/* Icon in empty state */
.empty-state .mud-icon[b-ysvq17pgjt] {
    margin-bottom: 1rem;
    color: #dee2e6;
}

/* Typography styling for empty/loading */
.loading-state .mud-typography[b-ysvq17pgjt],
.empty-state .mud-typography[b-ysvq17pgjt] {
    font-size: 1.1rem;
    margin-bottom: 1rem;
}


/* ----------------------------- Delete Button Styling ----------------------------- */

/* Error (outlined) buttons like Delete */
[b-ysvq17pgjt] .mud-button-outlined.mud-button-error {
    border-color: #d32f2f;
    color: #d32f2f;
}

[b-ysvq17pgjt] .mud-button-outlined.mud-button-error:hover {
    background-color: rgba(211, 47, 47, 0.04);
}


/* ----------------------------- Responsive ----------------------------- */
@media (max-width: 768px) {
    /* Page title responsive */
    .page-title[b-ysvq17pgjt] {
        font-size: 2rem;
        padding: 1rem;
    }

    /* Container padding reduced */
    .listings-container[b-ysvq17pgjt] {
        padding: 10px;
    }

    /* ⚠️ UNUSED in this view: no toggle section */
    .view-toggle-section[b-ysvq17pgjt] {
        margin-bottom: 1rem;
    }

    /* Smaller expiry info on mobile */
    .expiry-info[b-ysvq17pgjt] {
        font-size: 0.8rem;
    }

    /* Toolbar responsive layout */
    [b-ysvq17pgjt] .mud-table-toolbar {
        flex-direction: row;
        gap: 1rem;
        text-align: center;
    }

    /* Search input expands full width */
    .search-input[b-ysvq17pgjt] {
        max-width: 100%;
    }
}


/* ----------------------------- Search Input Icon ----------------------------- */

/* White color for search icon */
[b-ysvq17pgjt] .white-icon .mud-input-adornment .mud-icon-root {
    color: white !important;
}


/* ----------------------------- Animation ----------------------------- */

/* Fade-in animation (not directly applied in MyListings) */
@keyframes fadeInUp-b-ysvq17pgjt {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ----------------------------- Accessibility: Focus Styles ----------------------------- */

/* Global focus styles for all elements */
*:focus[b-ysvq17pgjt] {
    outline: 3px solid var(--primary-garnet);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px white, 0 0 0 5px var(--primary-garnet);
}

/* Remove focus when not keyboard-driven */
*:focus:not(:focus-visible)[b-ysvq17pgjt] {
    outline: none;
    box-shadow: none;
}

/* Explicit keyboard focus styles */
*:focus-visible[b-ysvq17pgjt] {
    outline: 3px solid var(--primary-garnet);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px white, 0 0 0 5px var(--primary-garnet);
}


/* ----------------------------- MudBlazor Component Focus ----------------------------- */

[b-ysvq17pgjt] .mud-button:focus,
[b-ysvq17pgjt] .mud-button:focus-visible {
    outline: 3px solid var(--primary-garnet) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px white, 0 0 0 5px var(--primary-garnet) !important;
}

[b-ysvq17pgjt] .mud-button-filled:focus,
[b-ysvq17pgjt] .mud-button-filled:focus-visible {
    outline: 3px solid white !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px var(--primary-garnet), 0 0 0 5px white !important;
}

[b-ysvq17pgjt] .mud-input-root:focus-within {
    outline: 3px solid var(--primary-garnet) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px white, 0 0 0 5px var(--primary-garnet) !important;
}

[b-ysvq17pgjt] .search-input .mud-input-root:focus-within {
    outline: 3px solid white !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px var(--primary-garnet), 0 0 0 5px white !important;
}
/* Table row focus styles for keyboard navigation */
[b-ysvq17pgjt] .mud-table-row:focus,
[b-ysvq17pgjt] .mud-table-row:focus-visible {
    outline: 3px solid var(--primary-garnet) !important;
    outline-offset: -2px !important;
    background: rgba(143, 0, 26, 0.1) !important;
}

/* Table cell focus styles */
[b-ysvq17pgjt] .mud-table-cell:focus,
[b-ysvq17pgjt] .mud-table-cell:focus-visible {
    outline: 2px solid var(--primary-garnet) !important;
    outline-offset: -1px !important;
    background: rgba(143, 0, 26, 0.05) !important;
}

/* Chip focus styles */
[b-ysvq17pgjt] .mud-chip:focus,
[b-ysvq17pgjt] .mud-chip:focus-visible {
    outline: 2px solid var(--primary-garnet) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 1px white, 0 0 0 3px var(--primary-garnet) !important;
}

/* Icon button focus styles */
[b-ysvq17pgjt] .mud-icon-button:focus,
[b-ysvq17pgjt] .mud-icon-button:focus-visible {
    outline: 3px solid var(--primary-garnet) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px white, 0 0 0 5px var(--primary-garnet) !important;
    background: rgba(143, 0, 26, 0.1) !important;
}

/* Toggle button focus styles */
[b-ysvq17pgjt] .mud-toggle-button:focus,
[b-ysvq17pgjt] .mud-toggle-button:focus-visible {
    outline: 3px solid var(--primary-garnet) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px white, 0 0 0 5px var(--primary-garnet) !important;
}

/* Link focus styles */
a:focus[b-ysvq17pgjt],
a:focus-visible[b-ysvq17pgjt] {
    outline: 3px solid var(--primary-garnet);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px white, 0 0 0 5px var(--primary-garnet);
    text-decoration: underline;
    background: rgba(143, 0, 26, 0.1);
}

/* Select dropdown focus styles */
[b-ysvq17pgjt] .mud-select:focus,
[b-ysvq17pgjt] .mud-select:focus-visible {
    outline: 3px solid var(--primary-garnet) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px white, 0 0 0 5px var(--primary-garnet) !important;
}

/* Menu item focus styles */
[b-ysvq17pgjt] .mud-menu-item:focus,
[b-ysvq17pgjt] .mud-menu-item:focus-visible {
    outline: 2px solid var(--primary-garnet) !important;
    outline-offset: -2px !important;
    background: rgba(143, 0, 26, 0.1) !important;
}

/* Pagination focus styles */
[b-ysvq17pgjt] .mud-pagination-item:focus,
[b-ysvq17pgjt] .mud-pagination-item:focus-visible {
    outline: 3px solid var(--primary-garnet) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px white, 0 0 0 5px var(--primary-garnet) !important;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    *:focus[b-ysvq17pgjt],
    *:focus-visible[b-ysvq17pgjt] {
        outline: 4px solid #000000;
        outline-offset: 2px;
        box-shadow: 0 0 0 2px white, 0 0 0 6px #000000;
    }

    [b-ysvq17pgjt] .mud-button:focus,
    [b-ysvq17pgjt] .mud-button:focus-visible {
        outline: 4px solid #000000 !important;
        outline-offset: 2px !important;
        box-shadow: 0 0 0 2px white, 0 0 0 6px #000000 !important;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    *:focus[b-ysvq17pgjt],
    *:focus-visible[b-ysvq17pgjt] {
        transition: none;
    }
}
/* /Components/Pages/Admin/ResidenceEligibility.razor.rz.scp.css */
/* ============================================================
   Residence Eligibility Page CSS
   Summary:
   - Table section layout
   - Yes/No button groups
   - Navigation buttons (Reset & Save) with hover animations
   ============================================================ */

/* ----------------------------- Table Section ----------------------------- */

/* Wrapper around the residence management table */
.table-section[b-oemeen2are] {
    padding: 20px;
    margin: 0 auto;
}

/* Added styles for the expanded table layout */
.residence-table[b-oemeen2are] {
    min-width: 1200px; /* Ensure table has enough width for all columns */
}

.table-header[b-oemeen2are] {
    white-space: nowrap;
    font-size: 0.875rem;
    padding: 8px 4px;
}

/* ----------------------------- Button Group ----------------------------- */

/* Container for Yes/No toggle buttons inside table cells */
.button-group[b-oemeen2are] {
    display: flex;
    gap: 2px; /* Adjusted gap for smaller cells */
    justify-content: center;
    min-width: 80px; /* Added min-width for smaller cells */
}

    .button-group .mud-button[b-oemeen2are] {
        font-size: 0.75rem; /* Added font-size for buttons */
        padding: 4px 8px; /* Added padding for buttons */
    }

/* ----------------------------- Navigation Buttons ----------------------------- */

/* Container for Reset/Save buttons at the bottom */
.navigation-buttons[b-oemeen2are] {
    display: flex;
    justify-content: end;
    align-items: end;
    margin-top: -1.85rem;
    padding-top: 2rem;
    gap: 1rem;
    padding: 2rem;
}

/* Base navigation button styles (applied to Reset & Save) */
.btn-nav[b-oemeen2are] {
    display: flex;
    align-items: end;
    gap: 0.75rem;
    padding: 1rem 2rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    min-width: 160px;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

    /* Animated gradient overlay for buttons */
    .btn-nav[b-oemeen2are]::before {
        content: "";
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: left 0.5s;
    }

    .btn-nav:hover[b-oemeen2are]::before {
        left: 100%;
    }

/* ----------------------------- Reset Button ----------------------------- */

/* Grey styled button */
.btn-reset[b-oemeen2are] {
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
    color: white;
    border: 2px solid #6c757d;
}

    .btn-reset:hover[b-oemeen2are] {
        background: linear-gradient(135deg, #545b62 0%, #343a40 100%);
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(108, 117, 125, 0.3);
        color: white;
        text-decoration: none;
    }

/* ----------------------------- Save Button ----------------------------- */

/* Green styled button */
.btn-save[b-oemeen2are] {
    background: linear-gradient(135deg, #28a745 0%, #218838 100%);
    color: white;
    border: 2px solid #28a745;
}

    .btn-save:hover[b-oemeen2are] {
        background: linear-gradient(135deg, #218838 0%, #1e7e34 100%);
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
    }
/* /Components/Pages/Admin/RolesPermissions.razor.rz.scp.css */
/* ============================================================
   Role Permissions Management Page CSS
   Summary:
   - Loading overlay
   - Section actions + Add Role button
   - Permissions table + headers + cells
   - Checkboxes + action buttons
   - Add Role form styling
   - Page-level Save/Reset actions
   - Animations
   - Responsive adjustments
   ============================================================ */


/* ----------------------------- Page Layout ----------------------------- */

/* Loading overlay for data fetching */
.loading-overlay[b-d4mb0o60oh] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
    flex-direction: column;
    gap: 1rem;
    color: var(--primary-garnet); /* University of Ottawa garnet */
}


/* ----------------------------- Section Styles ----------------------------- */

/* Container for action buttons within a section */
.section-actions[b-d4mb0o60oh] {
    margin-bottom: 20px;
    display: flex;
    justify-content: flex-end;
}

/* Add Role Button styling */
[b-d4mb0o60oh] .add-role-button {
    color: white !important;
    background-color: var(--primary-garnet) !important;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

[b-d4mb0o60oh] .add-role-button:hover {
    background-color: #660014 !important; /* Dark burgundy */
    transform: translateY(-2px);
}


/* ----------------------------- Table Styles ----------------------------- */

/* Wrapper around the permissions table */
.permissions-table-wrapper[b-d4mb0o60oh] {
    width: 100%;
    overflow-x: auto;
}

/* Table base */
[b-d4mb0o60oh] .permissions-table {
    border-collapse: collapse;
    width: 100%;
}

/* Header row */
[b-d4mb0o60oh] .table-head-bordered {
    background-color: #9c1c30 !important; /* Light garnet */
    color: white !important;
    font-size: 1rem !important;
    font-weight: bold !important;
}

/* Header cells */
[b-d4mb0o60oh] .role-title-header,
[b-d4mb0o60oh] .permission-header,
[b-d4mb0o60oh] .actions-header {
    background-color: #9c1c30 !important;
    color: white !important;
    font-weight: 600 !important;
    text-align: center;
    padding: 8px 4px;
    border: 1px solid var(--primary-garnet);
}

/* Specific headers */
.role-title-header[b-d4mb0o60oh] {
    width: 150px;
    text-align: left !important;
}

.permission-header[b-d4mb0o60oh] {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 0.7rem;
    padding: 4px 2px;
    min-width: 30px;
    white-space: nowrap;
    vertical-align: bottom;
}

.actions-header[b-d4mb0o60oh] {
    width: 80px;
}

/* Row striping + hover */
[b-d4mb0o60oh] .mud-table-row:nth-child(even) {
    background-color: var(--PolarGrey, #f2f2f2);
}

[b-d4mb0o60oh] .mud-table-row:hover {
    background-color: var(--background-light, #fafafa);
}

/* Table cells */
[b-d4mb0o60oh] .mud-table-cell {
    border: 1px solid var(--border-color, #e0e0e0);
}

.role-title-cell[b-d4mb0o60oh] {
    font-weight: 600;
    color: var(--text-dark, #333333);
    padding: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.permission-cell[b-d4mb0o60oh],
.actions-cell[b-d4mb0o60oh] {
    text-align: center;
    padding: 4px 2px;
}


/* ----------------------------- Checkbox Styles ----------------------------- */

/* Checkbox container */
.checkbox-container[b-d4mb0o60oh] {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Custom round checkbox */
.permission-checkbox[b-d4mb0o60oh] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #dee2e6;
    border-radius: 50%;
    background-color: white;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}

.permission-checkbox:hover[b-d4mb0o60oh] {
    border-color: #28a745;
    transform: scale(1.1);
}

.permission-checkbox:checked[b-d4mb0o60oh] {
    background-color: #28a745;
    border-color: #28a745;
}

.permission-checkbox:checked[b-d4mb0o60oh]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background-color: white;
    border-radius: 50%;
}

.permission-checkbox:focus[b-d4mb0o60oh] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.2);
}


/* ----------------------------- Action Buttons ----------------------------- */

/* Container for action buttons */
.action-buttons[b-d4mb0o60oh] {
    display: flex;
    gap: 8px;
    justify-content: center;
}

/* Icon button size */
[b-d4mb0o60oh] .action-buttons .mud-icon-button {
    width: 32px;
    height: 32px;
    min-width: unset;
    padding: 0;
}


/* ----------------------------- Add Role Form ----------------------------- */

/* Form card */
[b-d4mb0o60oh] .add-role-form {
    margin-top: 20px;
    border: 2px solid #9c1c30;
    border-radius: 8px;
    animation: slideDown-b-d4mb0o60oh 0.3s ease-out;
}

/* Header inside form */
.form-header[b-d4mb0o60oh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 16px;
    border-bottom: 1px solid var(--border-color, #e0e0e0);
}

[b-d4mb0o60oh] .form-header .mud-typography {
    color: #660014; /* Burgundy */
    font-weight: 600;
}

/* Form content */
.role-form-content[b-d4mb0o60oh] {
    display: flex;
    flex-direction: column;
    gap: 25px;
    padding: 16px;
}

.role-title-input[b-d4mb0o60oh] {
    width: 100%;
}

/* Form action buttons */
.form-actions[b-d4mb0o60oh] {
    display: flex;
    gap: 15px;
    justify-content: flex-end;
    width: 100%;
    padding: 16px;
    border-top: 1px solid var(--border-color, #e0e0e0);
}


/* ----------------------------- Page Actions ----------------------------- */

/* Container for Reset/Save */
.page-actions[b-d4mb0o60oh] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 2rem;
    gap: 1rem;
}

/* Base styles for both buttons */
[b-d4mb0o60oh] .reset-button,
[b-d4mb0o60oh] .save-button {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    min-width: 160px;
    justify-content: center;
}

/* Reset button */
[b-d4mb0o60oh] .reset-button {
    background: linear-gradient(135deg, var(--bs-gray-500, #6b7280) 0%, var(--bs-gray-600, #4b5563) 100%);
    color: white;
    border: 2px solid var(--bs-gray-500, #6b7280);
}

    [b-d4mb0o60oh] .reset-button:hover {
        background: linear-gradient(135deg, var(--bs-gray-600, #4b5563) 0%, var(--bs-gray-700, #374151) 100%);
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(107, 114, 128, 0.3);
    }

/* Save button */
[b-d4mb0o60oh] .save-button {
    background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%);
    color: white;
    border: 2px solid #28a745;
}

    [b-d4mb0o60oh] .save-button:hover {
        background: linear-gradient(135deg, #1e7e34 0%, #155724 100%);
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
    }


/* ----------------------------- Animations ----------------------------- */

/* Slide down animation */
@keyframes slideDown-b-d4mb0o60oh {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ----------------------------- Responsive ----------------------------- */

@media (max-width: 768px) {
    .permissions-page-container[b-d4mb0o60oh] {
        padding: 10px;
    }

    .page-title[b-d4mb0o60oh] {
        font-size: 2rem;
        margin-bottom: 1.5rem;
    }

    .section-header[b-d4mb0o60oh] {
        font-size: 1.2rem;
        margin: 1rem 0;
    }

    .section-actions[b-d4mb0o60oh] {
        justify-content: center;
    }

    /* Smaller headers on mobile */
    [b-d4mb0o60oh] .role-title-header,
    [b-d4mb0o60oh] .permission-header,
    [b-d4mb0o60oh] .actions-header {
        padding: 6px 2px;
        font-size: 0.85rem !important;
    }

    .role-title-header[b-d4mb0o60oh] {
        width: 120px;
    }

    .permission-header[b-d4mb0o60oh] {
        font-size: 0.65rem;
        min-width: 25px;
    }

    .actions-header[b-d4mb0o60oh] {
        width: 60px;
    }

    /* Smaller table cells */
    .role-title-cell[b-d4mb0o60oh],
    .permission-cell[b-d4mb0o60oh],
    .actions-cell[b-d4mb0o60oh] {
        padding: 6px 2px;
    }

    /* Form + Page actions stack */
    .form-actions[b-d4mb0o60oh],
    .page-actions[b-d4mb0o60oh] {
        flex-direction: column-reverse;
        gap: 10px;
        padding: 1rem;
    }

    /* Buttons full width */
    [b-d4mb0o60oh] .reset-button,
    [b-d4mb0o60oh] .save-button {
        width: 100%;
        min-width: unset;
        padding: 0.8rem 1.5rem;
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .page-title[b-d4mb0o60oh] {
        font-size: 1.8rem;
        padding: 1rem 0;
    }

    .section-header[b-d4mb0o60oh] {
        font-size: 1rem;
        padding-left: 0.5rem;
    }

    /* Further adjustments for very small screens */
    .permission-header[b-d4mb0o60oh] {
        font-size: 0.6rem;
        min-width: 20px;
    }
}
/* /Components/Pages/Admin/StudentInformation.razor.rz.scp.css */
/* Removed unused CSS classes, keeping only what's used in the Blazor component */

/* Animations */
@keyframes fadeInUp-b-448cvns50y {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.student-info-grid[b-448cvns50y] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .student-info-grid[b-448cvns50y] {
        grid-template-columns: 1fr 1fr;
    }
}

.info-section[b-448cvns50y] {
    margin-bottom: 2rem;
    padding: 1rem;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background-color: #fafafa;
}

.info-section-title[b-448cvns50y] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    color: #333;
    font-weight: 600;
}

.info-item[b-448cvns50y] {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
    border: solid 0.5px #dcdcdc;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 8px;
    /* Updated border to use garnet color */
    border-left: 4px solid #8f001a;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .info-item:hover[b-448cvns50y] {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

.info-label[b-448cvns50y] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}

.info-value[b-448cvns50y] {
    font-size: 1.1rem;
    font-weight: 500;
    color: #333;
    word-break: break-word;
}

.phone-link[b-448cvns50y] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: #1976d2;
    text-decoration: none;
}

    .phone-link:hover[b-448cvns50y] {
        text-decoration: underline;
    }

.error-message[b-448cvns50y] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    background-color: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 4px;
    color: #856404;
}
/* /Components/Pages/Admin/StudentResult.razor.rz.scp.css */
/* ============================================================
   Student Result Page CSS
   Summary:
   - Filter card & search form styling
   - MudTable header overrides
   - Buttons (search/back/reset/new-search)
   - Results/student card/listings sections
   - Loading & empty states
   - Animations
   - Responsive adjustments
   Notes:
   - ::deep selectors intentionally override MudBlazor defaults
   - .student-info-grid is defined twice; later rules provide
     mobile-first overrides and responsive adjustments
   ============================================================ */


/* ----------------------------- Filter Card ----------------------------- */

/* Filter Card - Search Section */
.filter-card[b-kid2w2dtr2] {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    width: 60%;
    margin: 0 auto; /* <-- This centers it horizontally */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    border: 1px solid #e9ecef;
    margin-bottom: 2rem;
    animation: fadeInUp-b-kid2w2dtr2 0.6s ease-out;
}


/* ----------------------------- Section Headings & Dividers ----------------------------- */

/* Section Title */
.section-title[b-kid2w2dtr2] {
    color: #2c3e50;
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
    padding-bottom: 0.5rem;
    /* Updated border to use garnet color */
    border-bottom: 2px solid var(--primary-garnet);
    display: inline-block;
    font-style: italic;
}

/* Section divider */
.section-divider[b-kid2w2dtr2] {
    border: none;
    height: 2px;
    /* Updated background to use garnet color */
    background-color: var(--primary-garnet);
    margin: 1.5rem 0 2rem 0;
}


/* ----------------------------- Search Area ----------------------------- */

/* Search Section */
.search-section[b-kid2w2dtr2] {
    margin-bottom: 2rem;
}

.search-title[b-kid2w2dtr2] {
    color: #495057;
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 1.5rem 0;
    text-align: left;
}

[b-kid2w2dtr2] .table-head-bordered {
    /* Updated header background to use light garnet */
    background-color: var(--light-garnet) !important; /* University of Ottawa light garnet */
    color: white !important;
    font-size: 1rem !important;
    font-weight: bold !important;
}

[b-kid2w2dtr2] .mud-table-root .mud-table-head .mud-table-cell {
    color: white !important;
    font-weight: 500;
    line-height: 1.5rem;
}


/* ----------------------------- Form Styling ----------------------------- */

/* Form Styling */
.student-search-form[b-kid2w2dtr2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.form-group[b-kid2w2dtr2] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-label[b-kid2w2dtr2] {
    font-weight: 500;
    color: #495057;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.form-label.required[b-kid2w2dtr2] {
    color: #2c3e50;
}

.form-input[b-kid2w2dtr2] {
    padding: 0.75rem;
    border: 2px solid #dee2e6;
    border-radius: 6px;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    background: #f8f9fa;
}

.form-input:focus[b-kid2w2dtr2] {
    outline: none;
    /* Updated border to use garnet color */
    border-color: var(--primary-garnet);
    background: white;
    /* Updated box-shadow to use garnet color with transparency */
    box-shadow: 0 0 0 3px rgba(143, 0, 26, 0.1);
}


/* ----------------------------- Buttons ----------------------------- */

/* Button Styling */
.search-button-container[b-kid2w2dtr2] {
    grid-column: 1 / -1;
    text-align: center;
    margin: 1rem 0;
}

.search-btn[b-kid2w2dtr2] {
    padding: 0.75rem 2rem;
    /* Updated gradient to use garnet and light garnet colors */
    background: linear-gradient(135deg, var(--primary-garnet), #9c1c30);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 120px;
}

.search-btn:hover[b-kid2w2dtr2] {
    /* Updated hover gradient to use burgundy dark and garnet colors */
    background: linear-gradient(135deg, #660014, var(--primary-garnet));
    transform: translateY(-2px);
    /* Updated box-shadow to use garnet color with transparency */
    box-shadow: 0 4px 12px rgba(143, 0, 26, 0.3);
}

.search-btn:disabled[b-kid2w2dtr2] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Bottom buttons */
.bottom-buttons[b-kid2w2dtr2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1.5rem;
    border-top: 1px solid #dee2e6;
    gap: 1rem;
}

.back-button[b-kid2w2dtr2],
.reset-btn[b-kid2w2dtr2] {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.95rem;
}

.back-button[b-kid2w2dtr2] {
    background: linear-gradient(135deg, #6c757d, #495057);
    color: white;
}

.back-button:hover[b-kid2w2dtr2] {
    background: linear-gradient(135deg, #495057, #343a40);
    transform: translateY(-2px);
}

[b-kid2w2dtr2] .mud-button-filled.mud-button-filled-primary {
    background-color: var(--primary-green) !important;
}

.reset-btn[b-kid2w2dtr2] {
    background: #f8f9fa;
    color: #495057;
    border: 2px solid #dee2e6;
}

.reset-btn:hover[b-kid2w2dtr2] {
    background: #e9ecef;
    /* Updated border and text color to use garnet */
    border-color: var(--primary-garnet);
    color: var(--primary-garnet);
    transform: translateY(-2px);
}


/* ----------------------------- Results Header ----------------------------- */

/* Results Section */
.results-section[b-kid2w2dtr2] {
    margin-top: 3rem;
    animation: fadeInUp-b-kid2w2dtr2 0.6s ease-out;
}

.results-header[b-kid2w2dtr2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 8px;
    /* Updated border to use garnet color */
    border-left: 4px solid var(--primary-garnet);
}

.results-title[b-kid2w2dtr2] {
    /* Updated to use garnet color */
    color: var(--primary-garnet);
    font-size: 1.5rem;
    font-weight: 600;
    padding-left: unset;
    border-left: unset;
    margin: 0;
}

.new-search-btn[b-kid2w2dtr2] {
    padding: 0.5rem 1rem;
    /* Updated background to use garnet color */
    background: var(--primary-garnet);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.new-search-btn:hover[b-kid2w2dtr2] {
    /* Updated hover background to use burgundy dark */
    background: #660014;
    transform: translateY(-1px);
}


/* ----------------------------- Student Card ----------------------------- */

/* Student Card Styling */
.student-info-section[b-kid2w2dtr2] {
    width: 100%;
    margin-bottom: 3rem;
}

.student-card[b-kid2w2dtr2] {
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border: 1px solid #e0e0e0;
    overflow: hidden;
}

.student-card-header[b-kid2w2dtr2] {
    /* Updated gradient to use garnet and light garnet colors */
    background: linear-gradient(135deg, var(--primary-garnet) 0%, #9c1c30 100%);
    color: white;
    padding: 1.5rem;
}

.student-card-title[b-kid2w2dtr2] {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.student-info-grid[b-kid2w2dtr2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    padding: 2rem;
    background: white;
}

.info-item[b-kid2w2dtr2] {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
    border: solid 0.5px #dcdcdc;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 8px;
    /* Updated border to use garnet color */
    border-left: 4px solid var(--primary-garnet);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.info-item:hover[b-kid2w2dtr2] {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.info-label[b-kid2w2dtr2] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}

.info-value[b-kid2w2dtr2] {
    font-size: 1.1rem;
    font-weight: 500;
    color: #333;
    word-break: break-word;
}


/* ----------------------------- Listings ----------------------------- */

/* Listings Section */
.listings-section[b-kid2w2dtr2] {
    margin-top: 2rem;
}

.listings-title[b-kid2w2dtr2] {
    /* Updated to use garnet color */
    color: var(--primary-garnet);
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    /* Updated border to use garnet color */
    border-bottom: 2px solid var(--primary-garnet);
    display: inline-block;
}

.listings-table .mud-table-head[b-kid2w2dtr2] {
    /* Updated to use garnet color */
    background-color: var(--primary-garnet) !important;
}

.listings-table .mud-table-head .mud-table-cell[b-kid2w2dtr2] {
    color: white !important;
    font-weight: 600 !important;
}

.no-results[b-kid2w2dtr2] {
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #dee2e6;
}


/* ----------------------------- Animations ----------------------------- */

/* Animations */
@keyframes fadeInUp-b-kid2w2dtr2 {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ----------------------------- Responsive ----------------------------- */

/* Responsive Design */
@media (max-width: 768px) {
    .billboard-title[b-kid2w2dtr2] {
        font-size: 2rem;
        padding: 1rem;
    }

    .student-search-form[b-kid2w2dtr2] {
        grid-template-columns: 1fr;
    }

    .bottom-buttons[b-kid2w2dtr2] {
        flex-direction: column;
        gap: 1rem;
    }

    .back-button[b-kid2w2dtr2],
    .reset-btn[b-kid2w2dtr2] {
        width: 100%;
    }

    .results-header[b-kid2w2dtr2] {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    .student-info-grid[b-kid2w2dtr2] {
        grid-template-columns: 1fr;
        padding: 1rem;
    }

    .listing-actions[b-kid2w2dtr2] {
        flex-direction: column;
        align-items: stretch;
    }

    /* Filter Card - Search Section */
    .filter-card[b-kid2w2dtr2] {
        width: 100%;
    }
}


/* ----------------------------- Loading State ----------------------------- */

.loading-section[b-kid2w2dtr2] {
    background: white;
    border-radius: 16px;
    padding: 3rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    border: 1px solid #e9ecef;
    text-align: center;
    animation: fadeInUp-b-kid2w2dtr2 0.6s ease-out;
}


/* ----------------------------- Student Search Table ----------------------------- */

/* New styles for the student search results table, adapted from user-management.css */
.student-search-table .mud-table-head[b-kid2w2dtr2] {
    /* Updated to use light garnet color */
    background-color: #9c1c30 !important;
}

.student-search-table .mud-table-head .mud-table-cell[b-kid2w2dtr2] {
    color: white !important;
    font-weight: 600 !important;
}

.student-search-table .table-header[b-kid2w2dtr2] {
    /* Updated to use light garnet color */
    background-color: #9c1c30 !important;
    color: white !important;
    font-size: 1rem !important;
    font-weight: bold !important;
}

/* Table alternating row colors */
.student-search-table .mud-table-row:nth-child(even)[b-kid2w2dtr2] {
    background-color: #f9f9f9;
}

.student-search-table .mud-table-row:hover[b-kid2w2dtr2] {
    background-color: #f0f0f0;
}


/* ----------------------------- Info Blocks & Utilities ----------------------------- */

.info-section[b-kid2w2dtr2] {
    margin-bottom: 2rem;
    padding: 1rem;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background-color: #fafafa;
}

.info-section-title[b-kid2w2dtr2] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    color: #333;
    font-weight: 600;
}

.phone-link[b-kid2w2dtr2] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: #1976d2;
    text-decoration: none;
}

.phone-link:hover[b-kid2w2dtr2] {
    text-decoration: underline;
}

.error-message[b-kid2w2dtr2] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    background-color: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 4px;
    color: #856404;
}


/* ----------------------------- Responsive Grid Override ----------------------------- */

.student-info-grid[b-kid2w2dtr2] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .student-info-grid[b-kid2w2dtr2] {
        grid-template-columns: 1fr 1fr;
    }
}
/* /Components/Pages/Admin/UserManagement.razor.rz.scp.css */
/* ============================================================
   User Management Page CSS
   Summary:
   - Title header, table section & actions
   - MudBlazor overrides (table header, buttons, switches)
   - Add User form layout & validation
   - Navigation-style buttons (unused in this view)
   - Loading, animations, responsive tweaks
   Notes:
   - ::deep selectors intentionally override MudBlazor defaults.
   ============================================================ */


/* ----------------------------- Title ----------------------------- */

/* Page title at the top of the screen */
.user-title[b-eywbnexs9c] {
    /* Updated to use University of Ottawa garnet color */
    color: var(--primary-garnet);
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 2rem;
    padding: 1.5rem 0;
    /* Updated border to use garnet color */
    border-bottom: 2px solid var(--primary-garnet);
}

/* ----------------------------- Table Section ----------------------------- */

/* Container for the whole table area */
.table-section[b-eywbnexs9c] {
    margin-bottom: 40px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 20px;
}

/* Row with “Add New User” button */
.table-actions[b-eywbnexs9c] {
    margin-bottom: 20px;
    display: flex;
    justify-content: flex-end;
}

/* “Add user” button override */
[b-eywbnexs9c] .add-user-btn {
    color: white !important;
    background-color: var(--primary-garnet);
}

/* Table header (MudTable head) */
.user-table .mud-table-head[b-eywbnexs9c] {
    background-color: #9c1c30 !important;
}

    /* Cells in table head */
    .user-table .mud-table-head .mud-table-cell[b-eywbnexs9c] {
        color: white !important;
        font-weight: 600 !important;
    }


/* ----------------------------- Row Actions ----------------------------- */

/* Flex row for per-user action icons */
.action-buttons[b-eywbnexs9c] {
    display: flex;
    gap: 8px;
}

    .action-buttons .mud-icon-button[b-eywbnexs9c] {
        width: 32px;
        height: 32px;
    }


/* ----------------------------- Status Switch ----------------------------- */

/* Label next to MudSwitch in the Status column */
.status-switch .mud-switch-label[b-eywbnexs9c] {
    font-size: 0.875rem;
}


/* ----------------------------- Add User Form ----------------------------- */

/* Card wrapper for the inline add-user form */
.add-user-form[b-eywbnexs9c] {
    margin-top: 20px;
    border: 2px solid #9c1c30;
    border-radius: 8px;
    animation: slideDown-b-eywbnexs9c 0.3s ease-out;
}

/* Header row inside the add-user form card */
.form-header[b-eywbnexs9c] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

    .form-header .mud-typography[b-eywbnexs9c] {
        color: #660014;
        font-weight: 600;
    }

/* Grid row for form controls */
.form-row[b-eywbnexs9c] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    align-items: start;
}

/* (⚠️ UNUSED in this view) reserved container for switches in forms */
.switch-container[b-eywbnexs9c] {
    display: flex;
    align-items: center;
    height: 56px;
}

/* Footer actions of the add-user form */
.form-actions[b-eywbnexs9c] {
    display: flex;
    gap: 15px;
    justify-content: flex-end;
    width: 100%;
}

/* ----------------------------- Validation & Loading ----------------------------- */

/* Field error border override */
.mud-input-error .mud-input-slot[b-eywbnexs9c] {
    border-color: #f44336 !important;
}

/* Required indicator after labels */
.mud-form .mud-input-required .mud-input-label[b-eywbnexs9c]::after {
    content: " *";
    color: #f44336;
}

/* Smaller progress spinner (used inside buttons) */
.mud-progress-circular[b-eywbnexs9c] {
    width: 16px !important;
    height: 16px !important;
}


/* ----------------------------- Animations ----------------------------- */

/* Card/table entrance animation */
@keyframes slideDown-b-eywbnexs9c {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ----------------------------- Table Row Effects ----------------------------- */

/* Alternating row color */
.mud-table-row:nth-child(even)[b-eywbnexs9c] {
    background-color: #f9f9f9;
}

/* Hover highlight */
.mud-table-row:hover[b-eywbnexs9c] {
    background-color: #f0f0f0;
}


/* ----------------------------- Switch Overrides ----------------------------- */

/* Checked track color override for MudSwitch */
.mud-switch-checked .mud-switch-track[b-eywbnexs9c] {
    background-color: #660014 !important;
}


/* ----------------------------- Responsive ----------------------------- */

@media (max-width: 768px) {
    /* Stack form controls on small screens */
    .form-row[b-eywbnexs9c] {
        grid-template-columns: 1fr;
    }

    /* Stack action icons if needed on small screens */
    .action-buttons[b-eywbnexs9c] {
        flex-direction: column;
    }

    /* Center the “Add New User” button on small screens */
    .table-actions[b-eywbnexs9c] {
        justify-content: center;
    }

    /* Center and reorder form action buttons on small screens */
    .form-actions[b-eywbnexs9c] {
        justify-content: center;
        flex-direction: column-reverse;
    }
}
/* /Components/Pages/ListingPages/Confirmation.razor.rz.scp.css */
/* Enhanced Step 4 Confirmation Styles - Extends the existing create page styles */
/*confirmation css*/

/* Enhanced focus indicators for better accessibility */
*:focus[b-o7owwaf4b3] {
    outline: 3px solid #8b1538;
    outline-offset: 2px;
    box-shadow: 0 0 0 1px #ffffff, 0 0 0 4px #8b1538;
}

/* High contrast focus for form elements */
.form-control-custom:focus[b-o7owwaf4b3],
.form-select-custom:focus[b-o7owwaf4b3],
.phone-input:focus[b-o7owwaf4b3],
.phone-input-long:focus[b-o7owwaf4b3] {
    border-color: #8b1538 !important;
    box-shadow: 0 0 0 1px #ffffff, 0 0 0 4px #8b1538 !important;
    outline: none;
}

.preview-modal-overlay[b-o7owwaf4b3] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

.preview-modal-content[b-o7owwaf4b3] {
    background: white;
    border-radius: 8px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.preview-modal-header[b-o7owwaf4b3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #dee2e6;
    background-color: #f8f9fa;
}

    .preview-modal-header h2[b-o7owwaf4b3] {
        margin: 0;
        font-size: 1.5rem;
        color: #495057;
    }

.close-button[b-o7owwaf4b3] {
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    color: #6c757d;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .close-button:hover[b-o7owwaf4b3] {
        color: #495057;
    }

.preview-modal-body[b-o7owwaf4b3] {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

.btn-preview[b-o7owwaf4b3] {
    background-color: #17a2b8;
    color: white;
    border: 2px solid #17a2b8;
}

    .btn-preview:hover:not(:disabled)[b-o7owwaf4b3] {
        background-color: #138496;
        border-color: #117a8b;
    }

    .btn-preview:disabled[b-o7owwaf4b3] {
        background-color: #6c757d;
        border-color: #6c757d;
        cursor: not-allowed;
    }

/* Enhanced button focus states */
.btn-nav:focus[b-o7owwaf4b3],
.btn-submit-final:focus[b-o7owwaf4b3],
.btn-reset:focus[b-o7owwaf4b3] {
    outline: 3px solid #ffd700;
    outline-offset: 2px;
    box-shadow: 0 0 0 1px #ffffff, 0 0 0 4px #8b1538;
    transform: translateY(-2px);
}

/* Enhanced checkbox focus for MudBlazor components */
[b-o7owwaf4b3] .mud-checkbox:focus-within {
    outline: 3px solid #8b1538;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Base Styles */
body[b-o7owwaf4b3] {
    background-color: #f8f9fa;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

/* Full-height wrapper for the page */
.full-page-container[b-o7owwaf4b3] {
    min-height: 100vh;
    padding: 0;
}

/* Inline required star */
.required-asterisk[b-o7owwaf4b3] {
    color: red;
}

/* Generic input/select look */
.form-control-custom[b-o7owwaf4b3],
.form-select-custom[b-o7owwaf4b3] {
    border: 2px solid #dee2e6;
    border-radius: 6px;
    padding: 0.75rem;
    font-size: 1rem;
    transition: all 0.3s ease;
    width: 100%;
    color: black;
}

/* Color override for Mud ripple within checkboxes */
[b-o7owwaf4b3] .mud-ripple-checkbox {
    color: var(--primary-garnet) !important;
}

/* Main content card */
.main-content[b-o7owwaf4b3] {
    max-width: 100%;
    margin: 0 auto;
    background: white;
    padding: 3rem;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
}

/* Step section title */
.step-title[b-o7owwaf4b3] {
    color: #8b1538;
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: 2rem;
}

/* Page H1 */
.main-title[b-o7owwaf4b3] {
    color: #8b1538;
    font-size: 2rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 2rem;
    border-bottom: 2px solid #8b1538;
    padding-bottom: 1rem;
}

/* Step indicator below main title */
.progress-indicator[b-o7owwaf4b3] {
    text-align: center;
    margin-bottom: 2rem;
    color: #6c757d;
    font-size: 0.9rem;
}

/* Contact form grouping container */
.contact-form-container[b-o7owwaf4b3] {
    border: 2px solid #dee2e6;
    border-radius: 8px;
    padding: 2rem;
    margin-bottom: 2rem;
    background-color: #f8f9fa;
}

/* Short note above contact fields */
.contact-requirement[b-o7owwaf4b3] {
    color: black;
    font-weight: 500;
    margin-bottom: 2rem;
    font-size: 1.1rem;
}

/* Enhanced phone input styling with better focus management */
.phone-inputs[b-o7owwaf4b3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

/* Dash between phone inputs */
.phone-separator[b-o7owwaf4b3] {
    color: #6c757d;
    font-weight: 600;
    font-size: 1.2rem;
    margin: 0 0.25rem;
}

/* 3-digit phone segments */
.phone-input[b-o7owwaf4b3] {
    width: 60px;
    height: 45px;
    text-align: center;
    border: 2px solid #dee2e6;
    border-radius: 6px;
    font-size: 1rem;
    padding: 0.5rem;
    background-color: white;
    color: black;
    transition: all 0.3s ease;
}

/* 4-digit phone segment */
.phone-input-long[b-o7owwaf4b3] {
    width: 80px;
    height: 45px;
    text-align: center;
    border: 2px solid #dee2e6;
    border-radius: 6px;
    font-size: 1rem;
    padding: 0.5rem;
    background-color: white;
    color: black;
    transition: all 0.3s ease;
}

.phone-input[b-o7owwaf4b3]::placeholder,
.phone-input-long[b-o7owwaf4b3]::placeholder {
    color: #adb5bd;
    font-size: 0.9rem;
}

/* Max width for email field */
.email-input[b-o7owwaf4b3] {
    max-width: 400px;
}

/* Enhanced fieldset and legend styling for better accessibility */
fieldset[b-o7owwaf4b3] {
    border: none;
    padding: 0;
    margin: 0;
}

legend[b-o7owwaf4b3] {
    font-size: 1rem;
    font-weight: 500;
    color: #333;
    margin-bottom: 0.5rem;
    padding: 0;
}

/* === Agreement styles (made global via ::deep) === */
[b-o7owwaf4b3] .agreement-section {
    margin-bottom: 2rem;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 2rem;
    background-color: #f8f9fa;
}

[b-o7owwaf4b3] .agreement-title {
    color: #8b1538;
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid #8b1538;
    padding-bottom: 0.5rem;
}

[b-o7owwaf4b3] .agreement-list {
    color: black;
    line-height: 1.6;
}

[b-o7owwaf4b3] .agreement-item {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    align-items: flex-start;
}

[b-o7owwaf4b3] .agreement-number {
    font-weight: 600;
    flex-shrink: 0;
    margin-top: 0.1rem;
    color: #8b1538;
    font-size: 1.1rem;
}

[b-o7owwaf4b3] .agreement-text {
    margin: 0;
    flex: 1;
    font-size: 1rem;
}

/* Enhanced agreement checkbox container */
.agreement-checkbox-container[b-o7owwaf4b3] {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #dee2e6;
}

/* === End deep agreement styles === */

/* Enhanced notification preferences focus styles for better tab navigation */
/* Notification Preferences Enhanced Focus Styles */
.notification-preferences-container[b-o7owwaf4b3] {
    border: 2px solid #dee2e6;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    background-color: #f8f9fa;
}

.notification-preferences-container:focus-within[b-o7owwaf4b3] {
    border-color: #8b1538;
    box-shadow: 0 0 0 1px #ffffff, 0 0 0 4px #8b1538;
}

/* Enhanced focus for notification preference checkboxes */
[b-o7owwaf4b3] .notification-checkbox {
    position: relative;
    padding: 0.75rem;
    border-radius: 6px;
    transition: all 0.3s ease;
    margin-bottom: 0.5rem;
}

[b-o7owwaf4b3] .notification-checkbox:focus-within {
    background-color: #fff3cd;
    border: 2px solid #8b1538;
    box-shadow: 0 0 0 1px #ffffff, 0 0 0 3px #8b1538;
    outline: none;
}

[b-o7owwaf4b3] .notification-checkbox .mud-checkbox {
    margin-right: 0.75rem;
}

[b-o7owwaf4b3] .notification-checkbox .mud-checkbox:focus {
    outline: 3px solid #8b1538;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Enhanced focus for notification method radio buttons */
[b-o7owwaf4b3] .notification-method-group {
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 1rem;
    margin: 0.75rem 0;
    background-color: white;
}

[b-o7owwaf4b3] .notification-method-group:focus-within {
    border-color: #8b1538;
    box-shadow: 0 0 0 1px #ffffff, 0 0 0 3px #8b1538;
    background-color: #fff3cd;
}

/* Each radio row */
[b-o7owwaf4b3] .notification-method-radio {
    display: flex;
    align-items: center;
    padding: 0.5rem;
    margin: 0.25rem 0;
    border-radius: 4px;
    transition: all 0.3s ease;
    cursor: pointer;
}

[b-o7owwaf4b3] .notification-method-radio:hover {
    background-color: #f8f9fa;
}

[b-o7owwaf4b3] .notification-method-radio:focus-within {
    background-color: #fff3cd;
    border: 2px solid #8b1538;
    box-shadow: 0 0 0 1px #ffffff, 0 0 0 3px #8b1538;
    outline: none;
}

[b-o7owwaf4b3] .notification-method-radio input[type="radio"] {
    margin-right: 0.75rem;
    transform: scale(1.2);
}

[b-o7owwaf4b3] .notification-method-radio input[type="radio"]:focus {
    outline: 3px solid #8b1538;
    outline-offset: 2px;
}

/* Enhanced focus for phone number selection dropdown */
[b-o7owwaf4b3] .phone-selection-dropdown {
    margin-top: 0.75rem;
    padding: 0.5rem;
    border-radius: 6px;
    transition: all 0.3s ease;
}

[b-o7owwaf4b3] .phone-selection-dropdown:focus-within {
    background-color: #fff3cd;
    border: 2px solid #8b1538;
    box-shadow: 0 0 0 1px #ffffff, 0 0 0 3px #8b1538;
}

[b-o7owwaf4b3] .phone-selection-dropdown select {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid #dee2e6;
    border-radius: 6px;
    font-size: 1rem;
    background-color: white;
    color: black;
    transition: all 0.3s ease;
}

[b-o7owwaf4b3] .phone-selection-dropdown select:focus {
    border-color: #8b1538;
    box-shadow: 0 0 0 1px #ffffff, 0 0 0 4px #8b1538;
    outline: none;
    background-color: #fff3cd;
}

/* Enhanced focus for MudBlazor components in notification preferences */
[b-o7owwaf4b3] .mud-input-control:focus-within {
    background-color: #fff3cd;
    border-radius: 6px;
    padding: 0.25rem;
}

[b-o7owwaf4b3] .mud-checkbox-input:focus {
    outline: 3px solid #8b1538 !important;
    outline-offset: 2px !important;
    border-radius: 4px !important;
}

[b-o7owwaf4b3] .mud-radio-input:focus {
    outline: 3px solid #8b1538 !important;
    outline-offset: 2px !important;
    border-radius: 50% !important;
}

[b-o7owwaf4b3] .mud-select:focus-within {
    background-color: #fff3cd !important;
    border: 2px solid #8b1538 !important;
    border-radius: 6px !important;
}

/* Enhanced focus for toggle buttons/switches in notification preferences */
/* Enhanced Toggle Button Focus Styles for Email and SMS Notifications */
[b-o7owwaf4b3] .notification-toggle-container {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    border-radius: 8px;
    margin: 0.5rem 0;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

[b-o7owwaf4b3] .notification-toggle-container:focus-within {
    background-color: #fff3cd;
    border-color: #8b1538;
    box-shadow: 0 0 0 1px #ffffff, 0 0 0 4px #8b1538;
    outline: none;
}

/* MudBlazor Switch/Toggle Button Focus Enhancement */
[b-o7owwaf4b3] .mud-switch {
    margin-right: 1rem;
}

[b-o7owwaf4b3] .mud-switch:focus-within {
    outline: 3px solid #8b1538;
    outline-offset: 3px;
    border-radius: 20px;
}

[b-o7owwaf4b3] .mud-switch-input:focus {
    outline: 3px solid #8b1538 !important;
    outline-offset: 3px !important;
    border-radius: 20px !important;
}

[b-o7owwaf4b3] .mud-switch-track:focus-within {
    box-shadow: 0 0 0 1px #ffffff, 0 0 0 4px #8b1538 !important;
    outline: none !important;
}

/* Enhanced focus for toggle button labels */
[b-o7owwaf4b3] .notification-toggle-label {
    font-weight: 500;
    color: #333;
    cursor: pointer;
    flex: 1;
    padding: 0.25rem;
    border-radius: 4px;
    transition: all 0.3s ease;
}

[b-o7owwaf4b3] .notification-toggle-label:focus {
    background-color: #fff3cd;
    outline: 2px solid #8b1538;
    outline-offset: 2px;
}

/* Specific styles for Email and SMS notification toggles */
[b-o7owwaf4b3] .email-notification-toggle:focus-within,
[b-o7owwaf4b3] .sms-notification-toggle:focus-within {
    background-color: #fff3cd;
    border: 2px solid #8b1538;
    box-shadow: 0 0 0 1px #ffffff, 0 0 0 4px #8b1538;
    transform: translateY(-1px);
}

/* Enhanced hover states for better visual feedback */
[b-o7owwaf4b3] .notification-toggle-container:hover {
    background-color: #f8f9fa;
    border-color: #dee2e6;
}

[b-o7owwaf4b3] .notification-toggle-container:hover:focus-within {
    background-color: #fff3cd;
    border-color: #8b1538;
}

/* High contrast mode support for toggles */
@media (prefers-contrast: high) {
    [b-o7owwaf4b3] .notification-toggle-container:focus-within {
        border-color: #000000 !important;
        box-shadow: 0 0 0 3px #000000 !important;
        background-color: #ffffff !important;
    }

    [b-o7owwaf4b3] .mud-switch-input:focus,
    [b-o7owwaf4b3] .mud-switch:focus-within {
        outline: 4px solid #000000 !important;
        outline-offset: 3px !important;
    }

    [b-o7owwaf4b3] .notification-toggle-label:focus {
        outline: 3px solid #000000 !important;
        background-color: #ffffff !important;
    }
}

/* Reduced motion support for toggles */
@media (prefers-reduced-motion: reduce) {
    [b-o7owwaf4b3] .notification-toggle-container,
    [b-o7owwaf4b3] .notification-toggle-label,
    [b-o7owwaf4b3] .mud-switch-track {
        transition: none !important;
    }
}

/* Screen reader live-region (visually hidden) */
.notification-status-announcement[b-o7owwaf4b3] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Info panel explaining submission */
.submit-instruction[b-o7owwaf4b3] {
    margin-bottom: 2rem;
    color: black;
    font-weight: 500;
    font-size: 1.1rem;
    text-align: center;
    padding: 1rem;
    background-color: #e7f3ff;
    border: 1px solid #b3d9ff;
    border-radius: 6px;
}

/* Primary submit button */
.btn-submit-final[b-o7owwaf4b3] {
    background-color: #8b1538 !important;
    color: white !important;
    border-color: #8b1538 !important;
    font-weight: 600;
}

.btn-submit-final:hover:not(:disabled)[b-o7owwaf4b3] {
    background-color: #6d1028 !important;
    border-color: #6d1028 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(139, 21, 56, 0.25);
}

.btn-submit-final:disabled[b-o7owwaf4b3] {
    background-color: #8b1538 !important;
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Optional reset row below content */
.reset-section[b-o7owwaf4b3] {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid #dee2e6;
}

/* Reset button styling */
.btn-reset[b-o7owwaf4b3] {
    background-color: #6c757d !important;
    color: white !important;
    border-color: #6c757d !important;
    font-weight: 500;
}

.btn-reset:hover[b-o7owwaf4b3] {
    background-color: #5a6268 !important;
    border-color: #5a6268 !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Enhanced validation alert with better accessibility */
.validation-alert[b-o7owwaf4b3] {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
    padding: 1rem;
    border-radius: 6px;
    margin-bottom: 1.5rem;
    animation: slideIn-b-o7owwaf4b3 0.3s ease-out;
}

/* Footer nav area containing reset/submit */
.navigation-buttons[b-o7owwaf4b3] {
    display: flex;
    justify-content: space-between;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid #dee2e6;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Generic nav button style */
.btn-nav[b-o7owwaf4b3] {
    padding: 0.75rem 2rem;
    border-radius: 6px;
    font-weight: 500;
    border: 1px solid #dee2e6;
    background-color: #f8f9fa;
    color: black;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.btn-nav:hover[b-o7owwaf4b3] {
    background-color: #e9ecef;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.btn-nav:disabled[b-o7owwaf4b3] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Enhanced high contrast mode support */
@media (prefers-contrast: high) {
    .form-control-custom:focus[b-o7owwaf4b3],
    .phone-input:focus[b-o7owwaf4b3],
    .phone-input-long:focus[b-o7owwaf4b3] {
        border-color: #000000 !important;
        box-shadow: 0 0 0 3px #000000 !important;
    }

    .btn-nav:focus[b-o7owwaf4b3] {
        outline: 4px solid #000000;
        outline-offset: 2px;
    }

    [b-o7owwaf4b3] .notification-checkbox:focus-within,
    [b-o7owwaf4b3] .notification-method-radio:focus-within,
    [b-o7owwaf4b3] .phone-selection-dropdown:focus-within {
        border-color: #000000 !important;
        box-shadow: 0 0 0 3px #000000 !important;
        background-color: #ffffff !important;
    }

    [b-o7owwaf4b3] .mud-checkbox-input:focus,
    [b-o7owwaf4b3] .mud-radio-input:focus {
        outline: 4px solid #000000 !important;
        outline-offset: 2px !important;
    }
}

/* Enhanced reduced motion support */
@media (prefers-reduced-motion: reduce) {
    *[b-o7owwaf4b3] {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .skip-link[b-o7owwaf4b3] {
        transition: none;
    }

    [b-o7owwaf4b3] .notification-checkbox,
    [b-o7owwaf4b3] .notification-method-radio,
    [b-o7owwaf4b3] .phone-selection-dropdown select {
        transition: none !important;
    }
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .contact-form-container[b-o7owwaf4b3] {
        padding: 1.5rem;
    }

    .phone-inputs[b-o7owwaf4b3] {
        justify-content: center;
        gap: 0.25rem;
    }

    .phone-separator[b-o7owwaf4b3] {
        margin: 0 0.1rem;
        font-size: 1rem;
    }

    .phone-input[b-o7owwaf4b3],
    .phone-input-long[b-o7owwaf4b3] {
        width: 50px;
        height: 40px;
        font-size: 0.9rem;
    }

    .phone-input-long[b-o7owwaf4b3] {
        width: 65px;
    }

    .email-input[b-o7owwaf4b3] {
        max-width: 100%;
        font-size: 16px; /* Prevents zoom on iOS */
    }

    .navigation-buttons[b-o7owwaf4b3] {
        flex-direction: column-reverse;
        gap: 1rem;
        margin-top: 2rem;
        padding-top: 1.5rem;
    }

    [b-o7owwaf4b3] .agreement-section {
        padding: 1.5rem;
    }

    [b-o7owwaf4b3] .agreement-item {
        gap: 0.5rem;
        margin-bottom: 1rem;
    }

    [b-o7owwaf4b3] .agreement-title {
        font-size: 1.2rem;
    }

    [b-o7owwaf4b3] .agreement-text {
        font-size: 0.95rem;
    }
}

@media (max-width: 480px) {
    .contact-form-container[b-o7owwaf4b3] {
        padding: 1rem;
    }

    [b-o7owwaf4b3] .agreement-section {
        padding: 1rem;
    }

    [b-o7owwaf4b3] .agreement-text {
        font-size: 0.9rem;
    }
}

/* Landscape Mobile */
@media (max-width: 768px) and (orientation: landscape) {
    .reset-section[b-o7owwaf4b3] {
        margin-top: 1rem;
    }

    .btn-reset[b-o7owwaf4b3] {
        width: auto;
        min-width: 150px;
        padding: 0.75rem 2rem;
    }

    .navigation-buttons[b-o7owwaf4b3] {
        flex-direction: row;
    }

    .btn-nav[b-o7owwaf4b3] {
        width: auto;
        min-width: 120px;
        padding: 0.75rem 2rem;
    }
}

/* Validation banner entrance */
@keyframes slideIn-b-o7owwaf4b3 {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* /Components/Pages/ListingPages/Create.razor.rz.scp.css */
/* ============================================================
   Create Listing Page CSS
   Summary:
   - Base layout, containers, and typography
   - Preset buttons for occupancy selection
   - Main content, titles, questions
   - Option buttons (step 1 ad type)
   - Description box and separator text
   - Form controls (inputs, selects, numbers, calendar)
   - Radio groups and items
   - Character counter
   - Navigation buttons
   - Eligibility and admin warning banners
   - Buttons (wizard navigation)
   - Progress indicator and validation alerts
   - Responsive adjustments (tablet, mobile, small mobile,
     landscape, high DPI, reduced motion, dark mode)
   - Accessibility: focus indicators, high contrast support
   Notes:
   - ::deep selectors intentionally override MudBlazor defaults
   - .upload-section and .file-input-group apply to embedded 
     MediaGallery component (mobile)
   ============================================================ */


/* ----------------------------- Base & Containers ----------------------------- */

body[b-jhexuwm7zb] {
    background-color: #f8f9fa;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.full-page-container[b-jhexuwm7zb] {
    min-height: 100vh;
    padding: 0;
}

.required-asterisk[b-jhexuwm7zb] {
    color: red;
}


/* ----------------------------- Preset Buttons (Step 2 Occupancy) ----------------------------- */

[b-jhexuwm7zb] .preset-button:not(.selected) {
    background-color: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
}

[b-jhexuwm7zb] .preset-button.selected {
    background-color: var(--light-garnet) !important;
    border-color: var(--light-garnet) !important;
    color: white !important;
}


/* ----------------------------- Main Content & Titles ----------------------------- */

.main-content[b-jhexuwm7zb] {
    max-width: 100%;
    margin: 0 auto;
    background: white;
    padding: 3rem;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
}

.main-title[b-jhexuwm7zb] {
    color: #8b1538;
    font-size: 2rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 2rem;
    border-bottom: 2px solid #8b1538;
    padding-bottom: 1rem;
}

.step-title[b-jhexuwm7zb] {
    color: #8b1538;
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: 2rem;
}

.question-text[b-jhexuwm7zb] {
    color: #8b1538;
    font-size: 1.3rem;
    font-weight: 500;
    margin-bottom: 2rem;
}


/* ----------------------------- Option Buttons (Step 1 Ad Type) ----------------------------- */

.option-container[b-jhexuwm7zb] {
    margin-bottom: 2rem;
}

.option-button[b-jhexuwm7zb] {
    background-color: #e9ecef;
    border: 2px solid #dee2e6;
    color: #8b1538;
    font-size: 1.1rem;
    font-weight: 600;
    padding: 1rem 2rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-block;
    margin-bottom: 1rem;
    width: auto;
    min-width: 150px;
    position: relative;
    display: block;
}

    .option-button:hover[b-jhexuwm7zb] {
        background-color: #dee2e6;
        border-color: #8b1538;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(139, 21, 56, 0.15);
    }

    .option-button.selected[b-jhexuwm7zb],
    .option-button[aria-pressed="true"][b-jhexuwm7zb] {
        background-color: #8b1538;
        color: white;
        border-color: #8b1538;
    }

    .option-button[aria-disabled="true"][b-jhexuwm7zb] {
        opacity: 0.6;
        cursor: not-allowed;
        background-color: #f8f9fa;
        border-color: #dee2e6;
    }

        .option-button[aria-disabled="true"]:hover[b-jhexuwm7zb] {
            background-color: #f8f9fa;
            border-color: #dee2e6;
            transform: none;
            box-shadow: none;
        }


/* ----------------------------- Description & Separators ----------------------------- */

.description-box[b-jhexuwm7zb] {
    border: 1px solid #dee2e6;
    background-color: #f8f9fa;
    padding: 1rem;
    border-radius: 6px;
    color: #6c757d;
    font-size: 0.95rem;
}

.or-text[b-jhexuwm7zb] {
    color: #8b1538;
    font-size: 1.2rem;
    font-weight: 500;
    text-align: center;
    margin: 2rem 0;
}


/* ----------------------------- Form Controls ----------------------------- */

.form-label-custom[b-jhexuwm7zb] {
    color: black;
    font-weight: 600;
    margin-bottom: 0.5rem;
    display: block;
}

.form-control-custom[b-jhexuwm7zb],
.form-select-custom[b-jhexuwm7zb] {
    border: 2px solid #dee2e6;
    border-radius: 6px;
    padding: 0.75rem;
    font-size: 1rem;
    transition: all 0.3s ease;
    width: 100%;
    color: black;
}

.form-control-custom:focus[b-jhexuwm7zb],
.form-select-custom:focus[b-jhexuwm7zb] {
    border-color: #8b1538;
    box-shadow: 0 0 0 0.2rem rgba(139, 21, 56, 0.15);
    outline: none;
}

.number-input-group[b-jhexuwm7zb] {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.number-digit[b-jhexuwm7zb] {
    width: 100%;
    height: 50px;
    text-align: center;
    border: 2px solid #dee2e6;
    border-radius: 6px;
    font-size: 1.2rem;
    font-weight: 600;
    flex-shrink: 0;
}

.number-digit:focus[b-jhexuwm7zb] {
    border-color: #8b1538;
    outline: none;
}

.calendar-container[b-jhexuwm7zb] {
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 1rem;
    background-color: #f8f9fa;
    margin-bottom: 1rem;
}


/* ----------------------------- Radio Groups ----------------------------- */

.radio-group-custom[b-jhexuwm7zb] {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    margin-top: 1rem;
}

.radio-item-custom[b-jhexuwm7zb] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    height: 20px;
    accent-color: #8b1538;
    flex-shrink: 0;
    font-weight: 500;
    cursor: pointer;
    margin: 0;
}

.radio-item-custom input[type="radio"][b-jhexuwm7zb] {
    margin-right: 0.5rem;
    transform: scale(1.2);
}

.radio-item-custom input[type="radio"]:focus[b-jhexuwm7zb] {
    outline: 3px solid #0066cc;
    outline-offset: 2px;
}


/* ----------------------------- Character Counter ----------------------------- */

.character-counter[b-jhexuwm7zb] {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    padding: 0.5rem;
    border-radius: 4px;
    display: inline-block;
    margin-top: 0.5rem;
    font-size: 0.9rem;
    color: #6c757d;
}


/* ----------------------------- Navigation Buttons ----------------------------- */

.navigation-buttons[b-jhexuwm7zb] {
    display: flex;
    justify-content: space-between;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid #dee2e6;
    gap: 1rem;
}

/* Added styles for disabled options */
.option-button.disabled[b-jhexuwm7zb] {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: #f8f9fa;
    border-color: #dee2e6;
}

.option-button.disabled:hover[b-jhexuwm7zb] {
    background-color: #f8f9fa;
    border-color: #dee2e6;
}

.text-muted[b-jhexuwm7zb] {
    color: #6c757d !important;
    font-style: italic;
}

input.valid.modified:not([type="checkbox"])[b-jhexuwm7zb],
select.valid.modified:not([type="checkbox"])[b-jhexuwm7zb],
textarea.valid.modified:not([type="checkbox"])[b-jhexuwm7zb] {
    outline: none !important;
}

.eligibility-warning[b-jhexuwm7zb] {
    background-color: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 4px;
    padding: 12px;
    margin: 10px 0;
    color: #856404;
}

.eligibility-error[b-jhexuwm7zb] {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    padding: 12px;
    margin: 10px 0;
    color: #721c24;
}

.admin-warning[b-jhexuwm7zb] {
    background-color: #d1ecf1;
    border: 1px solid #bee5eb;
    border-radius: 4px;
    padding: 12px;
    margin: 10px 0;
    color: #0c5460;
}


/* ----------------------------- Buttons ----------------------------- */

.btn-nav[b-jhexuwm7zb] {
    padding: 0.75rem 2rem;
    border-radius: 6px;
    font-weight: 500;
    border: 1px solid #dee2e6;
    background-color: #f8f9fa;
    color: black;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.btn-nav:hover[b-jhexuwm7zb] {
    background-color: #e9ecef;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.btn-nav:disabled[b-jhexuwm7zb] {
    opacity: 0.6;
    cursor: not-allowed;
}


/* ----------------------------- Progress & Validation ----------------------------- */

.progress-indicator[b-jhexuwm7zb] {
    text-align: center;
    margin-bottom: 2rem;
    color: #495057;
    font-size: 0.9rem;
    font-weight: 500;
}

.validation-alert[b-jhexuwm7zb] {
    border-left: 4px solid #dc3545;
    padding-left: 1rem;
}

.text-danger[b-jhexuwm7zb] {
    font-weight: 500;
}


/* ----------------------------- Responsive: Tablet ----------------------------- */

@media (min-width: 1025px) {
    .form-label-custom[b-jhexuwm7zb] {
        margin-top: 2.5rem;
    }
}

@media (max-width: 992px) {
    .main-content[b-jhexuwm7zb] {
        padding: 2rem;
    }

    .main-title[b-jhexuwm7zb] {
        font-size: 1.8rem;
    }

    .step-title[b-jhexuwm7zb] {
        font-size: 1.3rem;
    }

    .question-text[b-jhexuwm7zb] {
        font-size: 1.2rem;
    }

    .radio-group-custom[b-jhexuwm7zb] {
        gap: 1.5rem;
    }

    .form-control-custom[b-jhexuwm7zb],
    .form-select-custom[b-jhexuwm7zb] {
        max-width: 100%;
    }
}


/* ----------------------------- Responsive: Mobile ----------------------------- */

@media (max-width: 768px) {
    .full-page-container[b-jhexuwm7zb] {
        padding: 0;
    }

    .main-content[b-jhexuwm7zb] {
        padding: 1.5rem;
        border-radius: 8px;
    }

    .main-title[b-jhexuwm7zb] {
        font-size: 1.6rem;
        margin-bottom: 1.5rem;
    }

    .step-title[b-jhexuwm7zb] {
        font-size: 1.2rem;
        margin-bottom: 1.5rem;
    }

    .question-text[b-jhexuwm7zb] {
        font-size: 1.1rem;
        margin-bottom: 1.5rem;
    }

    .option-button[b-jhexuwm7zb] {
        width: 100%;
        text-align: center;
        padding: 1rem;
        font-size: 1rem;
    }

    .or-text[b-jhexuwm7zb] {
        font-size: 1.1rem;
        margin: 1.5rem 0;
    }

    .radio-group-custom[b-jhexuwm7zb] {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }

    .radio-item-custom[b-jhexuwm7zb] {
        width: 100%;
        padding: 0.5rem 0;
    }

    .number-input-group[b-jhexuwm7zb] {
        justify-content: center;
        gap: 0.5rem;
    }

    .number-digit[b-jhexuwm7zb] {
        width: 45px;
        height: 45px;
        font-size: 1.1rem;
    }

    .form-control-custom[b-jhexuwm7zb],
    .form-select-custom[b-jhexuwm7zb] {
        max-width: 100%;
        font-size: 16px;
    }
    /* Prevents zoom on iOS */
    .calendar-container[b-jhexuwm7zb] {
        margin-bottom: 1rem;
    }

    .upload-section[b-jhexuwm7zb] {
        padding: 1.5rem;
    }
    /* MediaGallery embed */
    .file-input-group[b-jhexuwm7zb] {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }
    /* MediaGallery embed */
    .navigation-buttons[b-jhexuwm7zb] {
        flex-direction: column-reverse;
        gap: 1rem;
        margin-top: 2rem;
        padding-top: 1.5rem;
    }

    .btn-nav[b-jhexuwm7zb] {
        width: 100%;
        padding: 1rem;
        font-size: 1rem;
    }

    .character-counter[b-jhexuwm7zb] {
        font-size: 0.85rem;
        text-align: center;
        width: 100%;
        margin-top: 1rem;
    }
}


/* ----------------------------- Responsive: Small Mobile ----------------------------- */

@media (max-width: 480px) {
    .full-page-container[b-jhexuwm7zb] {
        padding: 0;
    }

    .main-content[b-jhexuwm7zb] {
        padding: 1rem;
    }

    .main-title[b-jhexuwm7zb] {
        font-size: 1.4rem;
    }

    .step-title[b-jhexuwm7zb] {
        font-size: 1.1rem;
    }

    .question-text[b-jhexuwm7zb] {
        font-size: 1rem;
    }

    .option-button[b-jhexuwm7zb] {
        padding: 0.8rem;
        font-size: 0.95rem;
    }

    .number-digit[b-jhexuwm7zb] {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
}


/* ----------------------------- Responsive: Landscape Mobile ----------------------------- */

@media (max-width: 768px) and (orientation: landscape) {
    .main-content[b-jhexuwm7zb] {
        padding: 1rem;
    }

    .navigation-buttons[b-jhexuwm7zb] {
        flex-direction: row;
    }

    .btn-nav[b-jhexuwm7zb] {
        width: auto;
        min-width: 120px;
    }
}


/* ----------------------------- Responsive: High DPI & Motion ----------------------------- */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .option-button[b-jhexuwm7zb], .btn-nav[b-jhexuwm7zb] {
        border-width: 1px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *[b-jhexuwm7zb] {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* ----------------------------- Responsive: Dark Mode ----------------------------- */

@media (prefers-color-scheme: dark) {
    /* Add dark mode styles if needed */
}


/* ----------------------------- Accessibility & Focus ----------------------------- */

.option-button:focus[b-jhexuwm7zb],
.btn-nav:focus[b-jhexuwm7zb],
.form-control-custom:focus[b-jhexuwm7zb],
.form-select-custom:focus[b-jhexuwm7zb],
.number-digit:focus[b-jhexuwm7zb] {
    outline: 3px solid #0066cc;
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.3);
}

@media (prefers-contrast: high) {
    .option-button:focus[b-jhexuwm7zb],
    .btn-nav:focus[b-jhexuwm7zb],
    .form-control-custom:focus[b-jhexuwm7zb],
    .form-select-custom:focus[b-jhexuwm7zb],
    .number-digit:focus[b-jhexuwm7zb] {
        outline: 4px solid #000;
        outline-offset: 2px;
    }
}


/* ----------------------------- Occupancy Preset Button Enhancements ----------------------------- */

.occupancy-period-group[b-jhexuwm7zb] {
    gap: 0.5rem;
}

.preset-button[b-jhexuwm7zb] {
    background-color: #f8f9fa !important;
    border: 2px solid #dee2e6 !important;
    color: #8b1538 !important;
    font-size: 1rem;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.preset-button:hover[b-jhexuwm7zb] {
    background-color: #e9ecef !important;
    border-color: #8b1538 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(139, 21, 56, 0.15);
}

.preset-button.selected[b-jhexuwm7zb] {
    background-color: #8b1538 !important;
    border-color: #8b1538 !important;
    color: white !important;
}

.preset-button:focus[b-jhexuwm7zb] {
    outline: 3px solid #0066cc !important;
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.3) !important;
    z-index: 1;
}


/* ----------------------------- Accessibility: Step 1 Radio Focus ----------------------------- */

.option-button[role="radio"]:focus[b-jhexuwm7zb] {
    outline: 3px solid #0066cc !important;
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.3) !important;
    z-index: 1;
}

@media (prefers-contrast: high) {
    .preset-button:focus[b-jhexuwm7zb],
    .option-button[role="radio"]:focus[b-jhexuwm7zb] {
        outline: 4px solid #000 !important;
        outline-offset: 2px;
    }

    .preset-button.selected[b-jhexuwm7zb] {
        border: 3px solid #000 !important;
    }
}
/* /Components/Pages/ListingPages/Details.razor.rz.scp.css */
/* ============================================================
   Listing Details Page - CSS Styles
   Summary:
   - Contact actions & links
   - Base layout & containers
   - Detail sections (labels, values, grids)
   - Buttons (primary, secondary, back, edit)
   - Loading & spinner animations
   - Navigation enhancements
   - Responsive breakpoints (tablet, mobile, small mobile)
   - Media gallery & image viewer modal
   - Accessibility (focus, reduced motion, high contrast)
   ============================================================ */


/* ----------------------------- Contact Links & Actions ----------------------------- */

.email-link[b-1i0xyy2aty],
.phone-link[b-1i0xyy2aty] {
    color: #007bff;
    text-decoration: none;
}

.email-link:hover[b-1i0xyy2aty],
.phone-link:hover[b-1i0xyy2aty] {
    text-decoration: underline;
}

.contact-actions[b-1i0xyy2aty] {
    margin-top: 1rem;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Primary contact button (green) */
.btn-contact[b-1i0xyy2aty] {
    background-color: #28a745;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    transition: background-color 0.2s;
}

.btn-contact:hover[b-1i0xyy2aty] {
    background-color: #218838;
}

/* Secondary contact button (teal) */
.btn-contact-secondary[b-1i0xyy2aty] {
    background-color: #17a2b8;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    transition: background-color 0.2s;
}

.btn-contact-secondary:hover[b-1i0xyy2aty] {
    background-color: #138496;
}

/* Error and loading message styles */
.error-message[b-1i0xyy2aty] {
    color: #dc3545;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-style: italic;
}

.loading-text[b-1i0xyy2aty] {
    color: #6c757d;
    font-style: italic;
}


/* ----------------------------- Base Layout & Styles ----------------------------- */

/* Content wrapper */
.details-content[b-1i0xyy2aty] {
    margin: 0 auto;
    background: white;
}

/* Page header section */
.page-header[b-1i0xyy2aty] {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
}

/* Main page title with UofO garnet color */
.page-title[b-1i0xyy2aty] {
    color: #8b1538;
    font-size: 2rem;
    font-weight: 600;
    margin: 0;
}

/* Card container for listing information */
.listing-card[b-1i0xyy2aty] {
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    padding: 2rem;
    margin-bottom: 2rem;
}


/* ----------------------------- Detail Sections & Grids ----------------------------- */

/* Grid layout for detail sections */
.details-grid[b-1i0xyy2aty] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

/* Individual detail section styling */
.details-section[b-1i0xyy2aty] {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 1.5rem;
    border-left: 4px solid #8b1538; /* UofO garnet accent */
}

/* Section title styling */
.section-title[b-1i0xyy2aty] {
    color: #8b1538;
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Detail list container */
.detail-list[b-1i0xyy2aty] {
    margin: 0;
    padding: 0;
}

/* Individual detail item (label-value pair) */
.detail-item[b-1i0xyy2aty] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0.75rem 0;
    border-bottom: 1px solid #dee2e6;
    gap: 1rem;
}

/* Remove border from last item */
.detail-item:last-child[b-1i0xyy2aty] {
    border-bottom: none;
}

/* Label styling for detail items */
.detail-item dt[b-1i0xyy2aty] {
    font-weight: 600;
    color: #495057;
    min-width: 120px;
    flex-shrink: 0;
}

/* Value styling for detail items */
.detail-item dd[b-1i0xyy2aty] {
    color: #212529;
    text-align: right;
    word-break: break-word;
    margin: 0;
}

/* Standalone label styling */
.detail-label[b-1i0xyy2aty] {
    font-weight: 600;
    color: #495057;
    min-width: 120px;
    flex-shrink: 0;
}

/* Standalone value styling */
.detail-value[b-1i0xyy2aty] {
    color: #212529;
    text-align: right;
    word-break: break-word;
}

/* Special styling for price values */
.price-highlight[b-1i0xyy2aty] {
    color: #8b1538;
    /*font-weight: 700;*/
    /*font-size: 1.1rem;*/
}

/* Monospace font for dates */
/*.date-value {
    font-family: "Courier New", monospace;
    font-size: 0.9rem;
}*/


/* ----------------------------- Generic Action Buttons ----------------------------- */

/* Base action button styling */
.btn-action[b-1i0xyy2aty] {
    padding: 0.75rem 2rem;
    border-radius: 6px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: none;
    font-size: 1rem;
}

/* Secondary button variant */
.btn-secondary[b-1i0xyy2aty] {
    background-color: #f8f9fa;
    color: #495057;
    border: 1px solid #dee2e6;
}

.btn-secondary:hover[b-1i0xyy2aty] {
    background-color: #e9ecef;
    border-color: #adb5bd;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}


/* ----------------------------- Loading States ----------------------------- */

/* Container for loading spinner and text */
.loading-container[b-1i0xyy2aty] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px;
    flex-direction: column;
    gap: 1rem;
}

/* CSS-only loading spinner */
.loading-spinner[b-1i0xyy2aty] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #8b1538; /* UofO garnet color */
    border-radius: 50%;
    animation: spin-b-1i0xyy2aty 1s linear infinite;
}

/* Spinner rotation animation */
@keyframes spin-b-1i0xyy2aty {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.loading-text[b-1i0xyy2aty] {
    color: #6c757d;
    font-size: 1.1rem;
}


/* ----------------------------- Enhanced Navigation Buttons ----------------------------- */

/* Container for navigation buttons */
.navigation-buttons-enhanced[b-1i0xyy2aty] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4rem;
    padding-top: 2rem;
    border-top: 2px solid #e9ecef;
    gap: 1rem;
    padding: 2rem;
}

/* Enhanced navigation button base styling */
.btn-nav-enhanced[b-1i0xyy2aty] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    min-width: 160px;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* Shimmer effect on hover */
.btn-nav-enhanced[b-1i0xyy2aty]::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.btn-nav-enhanced:hover[b-1i0xyy2aty]::before {
    left: 100%;
}

/* Focus styles for keyboard navigation accessibility */
.btn-nav-enhanced:focus[b-1i0xyy2aty] {
    outline: 3px solid #0066cc;
    outline-offset: 2px;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 102, 204, 0.3), 0 2px 8px rgba(0, 0, 0, 0.1);
}

.btn-nav-enhanced:focus:not(:focus-visible)[b-1i0xyy2aty] {
    outline: none;
}

.btn-nav-enhanced:focus-visible[b-1i0xyy2aty] {
    outline: 3px solid #0066cc;
    outline-offset: 2px;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 102, 204, 0.3), 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Back button variant (gray gradient) */
.btn-back[b-1i0xyy2aty] {
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
    color: white;
    border: 2px solid #6c757d;
}

.btn-back:hover[b-1i0xyy2aty] {
    background: linear-gradient(135deg, #545b62 0%, #343a40 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(108, 117, 125, 0.3);
    color: white;
    text-decoration: none;
}

/* Enhanced focus state for back button */
.btn-back:focus[b-1i0xyy2aty],
.btn-back:focus-visible[b-1i0xyy2aty] {
    background: linear-gradient(135deg, #545b62 0%, #343a40 100%);
    border-color: #0066cc;
}

/* Edit button variant (UofO garnet gradient) */
.btn-edit[b-1i0xyy2aty] {
    background: linear-gradient(135deg, var(--primary-garnet) 0%, #660014 100%);
    color: white;
    border: 2px solid var(--primary-garnet);
}

.btn-edit:hover[b-1i0xyy2aty] {
    background: linear-gradient(135deg, #660014 0%, #4d0010 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(143, 0, 26, 0.3);
}

/* Enhanced focus state for edit button */
.btn-edit:focus[b-1i0xyy2aty],
.btn-edit:focus-visible[b-1i0xyy2aty] {
    background: linear-gradient(135deg, #660014 0%, #4d0010 100%);
    border-color: #0066cc;
}

/* Disabled state focus handling */
.btn-edit:disabled:focus[b-1i0xyy2aty],
.btn-edit:disabled:focus-visible[b-1i0xyy2aty] {
    outline: 2px solid #6c757d;
    outline-offset: 2px;
    transform: none;
    box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.25);
}


/* ----------------------------- Responsive Breakpoints ----------------------------- */

/* Tablet Styles (992px and below) */
@media (max-width: 992px) {
    .details-container[b-1i0xyy2aty] {
        padding: 1.5rem;
    }

    .listing-card[b-1i0xyy2aty] {
        padding: 1.5rem;
    }

    .page-title[b-1i0xyy2aty] {
        font-size: 1.8rem;
    }

    .listing-title[b-1i0xyy2aty] {
        font-size: 1.6rem;
    }

    .details-grid[b-1i0xyy2aty] {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* Mobile Styles (768px and below) */
@media (max-width: 768px) {
    .details-container[b-1i0xyy2aty] {
        padding: 1rem;
    }

    .details-content[b-1i0xyy2aty] {
        padding: 1rem 0;
    }

    .listing-card[b-1i0xyy2aty] {
        padding: 1rem;
        border-radius: 8px;
    }

    .page-title[b-1i0xyy2aty] {
        font-size: 1.6rem;
    }

    .details-section[b-1i0xyy2aty] {
        padding: 1rem;
    }

    .section-title[b-1i0xyy2aty] {
        font-size: 1.1rem;
    }

    /* Stack detail items vertically on mobile */
    .detail-item[b-1i0xyy2aty] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .detail-value[b-1i0xyy2aty] {
        text-align: left;
    }

    .action-buttons[b-1i0xyy2aty] {
        flex-direction: column;
    }

    .btn-action[b-1i0xyy2aty] {
        width: 100%;
        justify-content: center;
        padding: 1rem;
    }
}

/* Small Mobile Styles (480px and below) */
@media (max-width: 480px) {
    .details-container[b-1i0xyy2aty] {
        padding: 0.5rem;
    }

    .listing-card[b-1i0xyy2aty] {
        padding: 0.75rem;
    }

    .page-title[b-1i0xyy2aty] {
        font-size: 1.4rem;
    }

    .listing-title[b-1i0xyy2aty] {
        font-size: 1.2rem;
    }

    .details-section[b-1i0xyy2aty] {
        padding: 0.75rem;
    }

    /* Stack navigation buttons vertically on small screens */
    .navigation-buttons-enhanced[b-1i0xyy2aty] {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .btn-nav-enhanced[b-1i0xyy2aty] {
        width: 100% !important;
        min-width: unset;
        justify-content: center;
    }
}

/* Narrow screens (680px and below) */
@media (max-width: 680px) {
    .details-container[b-1i0xyy2aty] {
        padding: 0;
    }

    .details-content[b-1i0xyy2aty] {
        padding: 0;
    }
}


/* ----------------------------- Media Gallery Section ----------------------------- */

/* Main container for media gallery */
.media-gallery-section[b-1i0xyy2aty] {
    margin-top: 2rem;
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    padding: 2rem;
}

/* Grid layout for media items */
.media-grid[b-1i0xyy2aty] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

/* Individual media card */
.media-card[b-1i0xyy2aty] {
    border: 1px solid var(--border-color); /* Assuming --border-color is defined elsewhere or use a direct color */
    border-radius: 4px;
    overflow: hidden;
    background: white;
    transition: box-shadow 0.2s ease;
    cursor: pointer;
}

.media-card:hover[b-1i0xyy2aty] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transform: scale(1.02);
}

/* Media preview (image/video thumbnail) */
.media-preview[b-1i0xyy2aty] {
    width: 100%;
    height: 180px;
    object-fit: cover;
    background: #f8f9fa;
}

/* Media information section */
.media-info[b-1i0xyy2aty] {
    padding: 1rem;
}

/* Media filename display */
.media-filename[b-1i0xyy2aty] {
    font-size: 0.9rem;
    font-weight: 500;
    color: #212529;
    margin-bottom: 0.25rem;
    word-break: break-word;
}

/* Media file size display */
.media-size[b-1i0xyy2aty] {
    font-size: 0.8rem;
    color: #6c757d;
    margin-bottom: 0.5rem;
}

/* Media action buttons container */
.media-actions[b-1i0xyy2aty] {
    display: flex;
    gap: 0.5rem;
}

/* Small button variant for media actions */
.btn-small[b-1i0xyy2aty] {
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
    border-radius: 3px;
}

/* Empty state when no media items */
.empty-state[b-1i0xyy2aty] {
    text-align: center;
    padding: 3rem 1rem;
    color: #6c757d;
}

.empty-state-icon[b-1i0xyy2aty] {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.media-description[b-1i0xyy2aty] {
    text-align: left;
    font-size: 0.8rem;
    color: #6c757d;
}


/* ----------------------------- Image Viewer Modal ----------------------------- */

/* Modal overlay (dark background) */
.image-viewer-modal-overlay[b-1i0xyy2aty] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Modal content container */
.image-viewer-modal-content[b-1i0xyy2aty] {
    position: relative;
    background-color: #fff;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
}

/* Modal close button (X) */
.close-button[b-1i0xyy2aty] {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 2.8rem;
    color: #8b1538;
    cursor: pointer;
    z-index: 1001;
    line-height: 1;
    padding: 5px 10px;
    border-radius: 50%;
    transition: background-color 0.2s, color 0.2s;
}

.close-button:hover[b-1i0xyy2aty] {
    background-color: rgba(139, 21, 56, 0.1);
    color: #6d1028;
}

/* Zoomable image in modal */
.zoomed-image[b-1i0xyy2aty] {
    max-width: 100%;
    max-height: calc(90vh - 120px);
    object-fit: contain;
    transition: transform 0.05s ease-out; /* Smoother zoom transition */
    cursor: grab; /* Indicate draggable */
    touch-action: none; /* Prevent default touch actions like scrolling/zooming */
}

.zoomed-image:active[b-1i0xyy2aty] {
    cursor: grabbing;
}

.zoomed-image:focus[b-1i0xyy2aty] {
    outline: 3px solid #ffffff;
    outline-offset: 4px;
}

/* Image description in modal */
.image-description-viewer[b-1i0xyy2aty] {
    margin-top: 15px;
    font-size: 1.1rem;
    color: #333;
    text-align: center;
    max-width: 85%;
    word-wrap: break-word;
}

/* Zoom control buttons */
.zoom-controls[b-1i0xyy2aty] {
    display: flex;
    gap: 15px;
}

.zoom-controls button[b-1i0xyy2aty] {
    background-color: #8b1538;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 10px 20px;
    font-size: 1.3rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

.zoom-controls button:hover[b-1i0xyy2aty] {
    background-color: #6d1028;
}

.zoom-controls button:disabled[b-1i0xyy2aty] {
    background-color: #ccc;
    cursor: not-allowed;
    opacity: 0.7;
}

/* Responsive adjustments for modal */
@media (max-width: 768px) {
    .image-viewer-modal-content[b-1i0xyy2aty] {
        padding: 15px;
        max-width: 95vw;
        max-height: 95vh;
    }

    .close-button[b-1i0xyy2aty] {
        font-size: 2rem;
        top: 5px;
        right: 5px;
    }

    .zoomed-image[b-1i0xyy2aty] {
        max-height: calc(95vh - 80px);
    }

    .zoom-controls button[b-1i0xyy2aty] {
        padding: 6px 12px;
        font-size: 1rem;
    }
}

.btn-map[b-1i0xyy2aty] {
    background-color: #28a745;
    color: white;
    padding: 8px 16px;
    border-radius: 4px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    transition: background-color 0.2s;
}

    .btn-map:hover[b-1i0xyy2aty] {
        background-color: #218838;
        color: white;
        text-decoration: none;
    }

.contact-preference[b-1i0xyy2aty] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background-color: #f8f9fa;
    border-radius: 4px;
    font-size: 14px;
}

.phone-link[b-1i0xyy2aty] {
    color: #007bff;
    text-decoration: none;
}

    .phone-link:hover[b-1i0xyy2aty] {
        text-decoration: underline;
    }

/* Added preview mode styles */
.preview-badge[b-1i0xyy2aty] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #ffc107;
    color: #212529;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    margin-top: 8px;
}

/* Added preview media styles */
.preview-media .media-card[b-1i0xyy2aty] {
    border: 2px dashed #ffc107;
    background-color: #fff9e6;
}

.preview-indicator[b-1i0xyy2aty] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background-color: #ffc107;
    color: #212529;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    margin-top: 8px;
}

.preview-item[b-1i0xyy2aty] {
    position: relative;
}

    .preview-item[b-1i0xyy2aty]::before {
        content: "PREVIEW";
        position: absolute;
        top: 8px;
        right: 8px;
        background-color: rgba(255, 193, 7, 0.9);
        color: #212529;
        padding: 2px 6px;
        border-radius: 4px;
        font-size: 10px;
        font-weight: bold;
        z-index: 1;
    }


/* ----------------------------- Accessibility Features ----------------------------- */

/* Respect user's preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
    *[b-1i0xyy2aty] {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .media-card:hover[b-1i0xyy2aty],
    .media-card:focus[b-1i0xyy2aty] {
        transform: none;
    }

    .btn-action:hover[b-1i0xyy2aty] {
        transform: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .listing-card[b-1i0xyy2aty] {
        border: 2px solid #000;
    }

    .details-section[b-1i0xyy2aty] {
        border-left-width: 6px;
        border-left-color: #000;
    }

    .btn-action:focus[b-1i0xyy2aty],
    .btn-contact:focus[b-1i0xyy2aty],
    .btn-contact-secondary:focus[b-1i0xyy2aty] {
        outline: 4px solid #000;
        outline-offset: 2px;
    }
}

/* Enhanced focus indicators for better keyboard navigation */
.btn-action:focus[b-1i0xyy2aty],
.btn-contact:focus[b-1i0xyy2aty],
.btn-contact-secondary:focus[b-1i0xyy2aty],
.email-link:focus[b-1i0xyy2aty],
.phone-link:focus[b-1i0xyy2aty],
.media-card:focus[b-1i0xyy2aty],
.close-button:focus[b-1i0xyy2aty],
.zoom-controls button:focus[b-1i0xyy2aty] {
    outline: 3px solid #007bff;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}
/* /Components/Pages/ListingPages/Edit.razor.rz.scp.css */
/* ============================================================
   Edit Listing Page - CSS Styles
   Summary:
   - Base layout & typography
   - Form sections & organization
   - Enhanced form controls (inputs, selects, validation)
   - Navigation buttons with animations
   - Loading states & spinners
   - Responsive design for mobile devices
   - UofO branding colors integration
   ============================================================ */


/* ----------------------------- Base Layout & Typography ----------------------------- */

body[b-m0xhos29up] {
    background-color: white;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

/* Page header section */
.page-header[b-m0xhos29up] {
    margin-bottom: 2rem;
    /*border-bottom: 2px solid var(--primary-garnet);  UofO garnet branding */
    padding-bottom: 1rem;
}

/* Main page title with UofO branding */
.page-title[b-m0xhos29up] {
    color: var(--primary-garnet); /* UofO garnet color */
    font-size: 2rem;
    font-weight: 600;
    margin: 0;
}

/* UNUSED - Legacy container class, replaced by edit-listing-container */
.main-content[b-m0xhos29up] {
    padding: 2rem;
}

/* Subtitle text below main title */
.page-subtitle[b-m0xhos29up] {
    color: #6c757d;
    font-size: 1.1rem;
    font-weight: 400;
    margin-top: 0.5rem;
}


/* ----------------------------- Loading States ----------------------------- */

/* CSS-only loading spinner */
.loading-spinner[b-m0xhos29up] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid var(--primary-garnet); /* UofO garnet color */
    border-radius: 50%;
    animation: spin-b-m0xhos29up 1s linear infinite;
    margin: 0 auto 1rem;
}

/* Spinner rotation animation */
@keyframes spin-b-m0xhos29up {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


/* ----------------------------- Form Layout & Organization ----------------------------- */

/* Main form container - single card design */
.form-section-unified[b-m0xhos29up] {
    background: #fafbfc;
    padding: 1rem;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
    margin-bottom: 2rem;
}

/* Individual fieldset groups within the form */
.section-group[b-m0xhos29up] {
    margin-bottom: 3rem;
    padding-bottom: 2rem;
}

    /* Remove spacing from the last section */
    .section-group:last-child[b-m0xhos29up] {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }

/* Section headers with UofO branding */
.section-title[b-m0xhos29up] {
    color: var(--primary-garnet); /* UofO garnet color */
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    /* Decorative arrow before section titles */
    .section-title[b-m0xhos29up]::before {
        content: "▶";
        color: var(--primary-garnet); /* UofO garnet color */
        font-size: 0.8em;
    }


/* ----------------------------- Enhanced Form Controls ----------------------------- */

/* Custom dropdown styling for gender restriction */
.gender-select[b-m0xhos29up] {
    color: #333333 !important;
    border-radius: 6px;
    padding: 0.75rem;
    font-size: 1rem;
    transition: all 0.3s ease;
    appearance: none; /* Remove default browser styling */
    /* Custom dropdown arrow using SVG */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1em;
    padding-right: 2.5rem;
}

    /* Focus state with UofO branding */
    .gender-select:focus[b-m0xhos29up] {
        border-color: var(--primary-garnet) !important; /* UofO garnet focus */
        box-shadow: 0 0 0 0.2rem rgba(143, 0, 26, 0.15) !important; /* UofO garnet shadow */
        outline: none !important;
    }

    /* Option styling for better contrast */
    .gender-select option[b-m0xhos29up] {
        color: black !important;
        background-color: white !important;
        padding: 0.5rem;
    }

/* Standard form inputs and selects */
.form-control-custom[b-m0xhos29up],
.form-select-custom[b-m0xhos29up] {
    border: 2px solid #dee2e6;
    border-radius: 6px;
    padding: 0.75rem;
    font-size: 1rem;
    height: 50px;
    transition: all 0.3s ease;
    width: 100%;
    background-color: white;
    color: black;
    font-weight: 500;
}

    /* Enhanced focus states with UofO branding */
    .form-control-custom:focus[b-m0xhos29up],
    .form-select-custom:focus[b-m0xhos29up] {
        border-color: var(--primary-garnet); /* UofO garnet focus border */
        box-shadow: 0 0 0 0.2rem rgba(143, 0, 26, 0.15); /* UofO garnet shadow */
        outline: none;
        transform: translateY(-1px); /* Subtle lift effect */
    }

    /* Readonly input styling */
    .form-control-custom[readonly][b-m0xhos29up] {
        background-color: #f8f9fa;
        color: #6c757d;
        cursor: not-allowed;
    }


/* ----------------------------- Validation & Error Handling ----------------------------- */

/* Custom validation summary styling */
[b-m0xhos29up] .validation-summary-custom {
    background: linear-gradient(135deg, #f8d7da 0%, #f1aeb5 100%);
    border: 2px solid #f5c6cb;
    color: #721c24;
    padding: 1.5rem;
    border-radius: 8px;
    margin-bottom: 2rem;
    box-shadow: 0 2px 8px rgba(114, 28, 36, 0.1);
}

/* Remove default list styling from ValidationSummary */
[b-m0xhos29up] .validation-summary-custom ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Style each validation message */
[b-m0xhos29up] .validation-summary-custom li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

/* Add warning icon before each message */
[b-m0xhos29up] .validation-summary-custom li::before {
    content: "⚠️";
    font-size: 1.2em;
    margin-right: 0.25rem;
}

/* Required field asterisk styling */
[b-m0xhos29up] .required-asterisk {
    color: red;
}


/* ----------------------------- Navigation Buttons ----------------------------- */

/* Navigation button container */
.navigation-buttons-enhanced[b-m0xhos29up] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4rem;
    padding-top: 2rem;
    border-top: 2px solid #e9ecef;
    gap: 1rem;
    padding: 2rem;
}

/* Enhanced button base styling */
.btn-nav-enhanced[b-m0xhos29up] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    min-width: 160px;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

    /* Shimmer effect animation on hover */
    .btn-nav-enhanced[b-m0xhos29up]::before {
        content: "";
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: left 0.5s;
    }

    .btn-nav-enhanced:hover[b-m0xhos29up]::before {
        left: 100%;
    }

    /* Focus states for keyboard navigation accessibility */
    .btn-nav-enhanced:focus[b-m0xhos29up] {
        outline: 3px solid #0066cc;
        outline-offset: 2px;
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(0, 102, 204, 0.3), 0 2px 8px rgba(0, 0, 0, 0.1);
    }

        /* Remove focus outline for mouse users */
        .btn-nav-enhanced:focus:not(:focus-visible)[b-m0xhos29up] {
            outline: none;
        }

    .btn-nav-enhanced:focus-visible[b-m0xhos29up] {
        outline: 3px solid #0066cc;
        outline-offset: 2px;
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(0, 102, 204, 0.3), 0 2px 8px rgba(0, 0, 0, 0.1);
    }

/* Back button variant (gray gradient) */
.btn-back[b-m0xhos29up] {
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
    color: white;
    border: 2px solid #6c757d;
}

    .btn-back:hover[b-m0xhos29up] {
        background: linear-gradient(135deg, #545b62 0%, #343a40 100%);
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(108, 117, 125, 0.3);
        color: white;
        text-decoration: none;
    }

    /* Enhanced focus state for back button */
    .btn-back:focus[b-m0xhos29up],
    .btn-back:focus-visible[b-m0xhos29up] {
        background: linear-gradient(135deg, #545b62 0%, #343a40 100%);
        border-color: #0066cc;
    }

/* Save button variant with UofO branding */
.btn-save[b-m0xhos29up] {
    background: linear-gradient(135deg, var(--primary-garnet) 0%, #660014 100%); /* UofO gradient */
    color: white;
    border: 2px solid var(--primary-garnet); /* UofO garnet border */
}

    .btn-save:hover[b-m0xhos29up] {
        background: linear-gradient(135deg, #660014 0%, #4d0010 100%); /* Darker UofO gradient */
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(143, 0, 26, 0.3); /* UofO garnet shadow */
    }

    /* Enhanced focus state for save button */
    .btn-save:focus[b-m0xhos29up],
    .btn-save:focus-visible[b-m0xhos29up] {
        background: linear-gradient(135deg, #660014 0%, #4d0010 100%);
        border-color: #0066cc;
    }

    /* Disabled state focus handling */
    .btn-save:disabled:focus[b-m0xhos29up],
    .btn-save:disabled:focus-visible[b-m0xhos29up] {
        outline: 2px solid #6c757d;
        outline-offset: 2px;
        transform: none;
        box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.25);
    }

/* Button icon animation */
.btn-icon[b-m0xhos29up] {
    transition: transform 0.3s ease;
}

/* Icon scaling on hover and focus */
.btn-nav-enhanced:hover .btn-icon[b-m0xhos29up],
.btn-nav-enhanced:focus .btn-icon[b-m0xhos29up],
.btn-nav-enhanced:focus-visible .btn-icon[b-m0xhos29up] {
    transform: scale(1.1);
}


/*  Custom checkbox styling not used in current form */
.form-check-custom[b-m0xhos29up] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background-color: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #dee2e6;
    transition: all 0.3s ease;
}

.form-check-custom:hover[b-m0xhos29up] {
    background-color: #e9ecef;
    border-color: var(--primary-garnet); /* UofO garnet hover */
}

.form-check-input-custom[b-m0xhos29up] {
    width: 20px;
    height: 20px;
    accent-color: var(--primary-garnet); /* UofO garnet accent */
    cursor: pointer;
}

.form-check-label-custom[b-m0xhos29up] {
    color: black;
    font-weight: 600;
    cursor: pointer;
    margin: 0;
}


/* ----------------------------- Responsive Design ----------------------------- */

/* Mobile layout adjustments */
@media (max-width: 480px) {
    .navigation-buttons-enhanced[b-m0xhos29up] {
        flex-direction: column-reverse; /* Save button on top, back button below */
        align-items: stretch; /* Full width buttons */
    }

    .btn-nav-enhanced[b-m0xhos29up] {
        width: 100% !important; /* Full width on mobile */
        min-width: unset; /* Remove minimum width constraint */
        justify-content: center; /* Center content */
    }
}
/* /Components/Pages/ListingPages/Listings.razor.rz.scp.css */
/* ============================================================
   Listings Page - CSS Styles
   Summary:
   - Billboard & filter layout
   - Section titles & subsections
   - Residence & rental filter grids
   - Checkbox containers & items
   - Input fields (price, search)
   - Action buttons (search, reset, back, create)
   - Results container & table
   - Loading, empty, and error states
   - Responsive design adjustments
   - MudBlazor overrides (::deep)
   - Accessibility (focus, high contrast, reduced motion)
   - Animations
   ============================================================ */


/* ----------------------------- Billboard & Filter Layout ----------------------------- */

/* Table headers override inside MudTable */
[b-8yr9914vam] .table-header {
    background-color: #f8f9fa !important;
    font-weight: 600 !important;
    color: #495057 !important;
    border-bottom: 2px solid var(--primary-garnet) !important;
    text-align: center;
}

/* Billboard title at top of page */
.billboard-title[b-8yr9914vam] {
    color: #8b1538; /* University red */
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 2rem;
    padding: 1.5rem 0;
    border-bottom: 2px solid #8b1538;
    position: relative;
    overflow: hidden;
}

/* Card around search filters */
.filter-card[b-8yr9914vam] {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    border: 1px solid #e9ecef;
    margin-bottom: 2rem;
}


/* ----------------------------- Section Titles & Subsections ----------------------------- */

/* Section titles inside filter card */
.section-title[b-8yr9914vam] {
    color: #2c3e50;
    font-size: 1.25rem;
    font-weight: 600;
    margin: 2rem 0 1rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #8b1538;
    display: inline-block;
}

/* Subsection titles inside filter card */
.subsection-title[b-8yr9914vam] {
    color: #495057;
    font-size: 1.1rem;
    font-weight: 500;
    margin: 1.5rem 0 1rem 0;
    padding-left: 1rem;
    border-left: 4px solid #8b1538;
}


/* ----------------------------- Residence & Rental Filter Grids ----------------------------- */

/* Grid for residence groups with dynamic functionality */
.residence-sections[b-8yr9914vam] {
    display: grid;
    gap: 2rem;
    margin: 1rem 0 2rem 0;
}

    /* Dynamic grid based on number of groups */
    .residence-sections:has(.residence-column:nth-child(1):last-child)[b-8yr9914vam] {
        grid-template-columns: 1fr;
    }

    .residence-sections:has(.residence-column:nth-child(2):last-child)[b-8yr9914vam] {
        grid-template-columns: 1fr 1fr;
    }

    .residence-sections:has(.residence-column:nth-child(3):last-child)[b-8yr9914vam] {
        grid-template-columns: repeat(3, 1fr);
    }

    .residence-sections:has(.residence-column:nth-child(4):last-child)[b-8yr9914vam] {
        grid-template-columns: repeat(2, 1fr);
    }

/* Residence column container */
.residence-column[b-8yr9914vam] {
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #dee2e6;
    padding: 1rem;
}

/* Rental + price two-column grid */
.rental-price-sections[b-8yr9914vam] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin: 1rem 0 2rem 0;
}

/* Rental and price section columns */
.rental-column[b-8yr9914vam],
.price-column[b-8yr9914vam] {
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #dee2e6;
    padding: 1rem;
}


/* ----------------------------- Checkbox Containers & Items ----------------------------- */

/* Single-column checkboxes */
.checkbox-container[b-8yr9914vam] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 1rem 0;
}

/* Two-column checkboxes for large groups */
.checkbox-container-two-columns[b-8yr9914vam] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin: 1rem 0;
}

/* Individual checkbox items */
.checkbox-item[b-8yr9914vam] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 8px;
    transition: all 0.3s ease;
    cursor: pointer;
    background: white;
    border: 1px solid #e9ecef;
}

    .checkbox-item:hover[b-8yr9914vam] {
        background: #f1f3f4;
        border-color: #8b1538;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(139, 21, 56, 0.15);
    }

    .checkbox-item input[type="checkbox"][b-8yr9914vam] {
        width: 18px;
        height: 18px;
        accent-color: #8b1538;
        cursor: pointer;
    }

    .checkbox-item label[b-8yr9914vam] {
        font-weight: 500;
        color: #495057;
        cursor: pointer;
        user-select: none;
        font-size: 0.9rem;
    }

    .checkbox-item:has(input:checked)[b-8yr9914vam] {
        background: #8b1538;
        color: white;
        border-color: #8b1538;
    }

        .checkbox-item:has(input:checked) label[b-8yr9914vam] {
            color: white;
        }


/* ----------------------------- Input Fields (Price, Search) ----------------------------- */

/* Price section wrapper */
.price-section[b-8yr9914vam] {
    margin: 1rem 0;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    background: white;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Price input fields */
.price-input[b-8yr9914vam] {
    width: 100px;
    padding: 0.5rem;
    border: 2px solid #dee2e6;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s ease;
    background: #f8f9fa;
}

    .price-input:focus[b-8yr9914vam] {
        outline: none;
        border-color: #8b1538;
        background: white;
        box-shadow: 0 0 0 3px rgba(139, 21, 56, 0.1);
    }

/* Labels for price input */
.price-label[b-8yr9914vam] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #495057;
    min-width: 80px;
}

/* Currency symbols */
.currency-symbol[b-8yr9914vam] {
    font-size: 1rem;
    font-weight: 600;
    color: #8b1538;
}

/* MudTextField search input overrides */
[b-8yr9914vam] .search_listing .mud-input-root {
    border-radius: 8px;
    color: white;
}

[b-8yr9914vam] .white-icon .mud-input-adornment .mud-icon-root {
    color: white !important;
}

/* Rental container vertical layout */
.rental-container[b-8yr9914vam] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 1rem 0;
}


/* ----------------------------- Action Buttons ----------------------------- */

/* Search + Reset container */
.button-container[b-8yr9914vam] {
    text-align: center;
    margin: 3rem 0;
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

/* Base search + reset buttons */
.search-btn[b-8yr9914vam],
.reset-btn[b-8yr9914vam] {
    padding: 1rem 2.5rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 600;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    min-width: 140px;
}

.search-btn[b-8yr9914vam] {
    background: linear-gradient(135deg, #8b1538, #a91d42);
    color: white;
    box-shadow: 0 4px 15px rgba(139, 21, 56, 0.3);
}

    .search-btn:hover[b-8yr9914vam] {
        background: linear-gradient(135deg, #6d1028, #8b1538);
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(139, 21, 56, 0.4);
    }

.reset-btn[b-8yr9914vam] {
    background: #f8f9fa;
    color: #495057;
    border: 2px solid #dee2e6;
}

    .reset-btn:hover[b-8yr9914vam] {
        background: #e9ecef;
        border-color: #8b1538;
        color: #8b1538;
        transform: translateY(-2px);
    }

/* Back + Create buttons container */
.bottom-buttons[b-8yr9914vam] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid #dee2e6;
    gap: 1rem;
}

/* Base styling for bottom action buttons */
.back-button[b-8yr9914vam],
.create-button[b-8yr9914vam] {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* Back button */
.back-button[b-8yr9914vam] {
    background: linear-gradient(135deg, #6c757d, #495057);
    color: white;
}

    .back-button:hover[b-8yr9914vam] {
        background: linear-gradient(135deg, #495057, #343a40);
        transform: translateY(-2px);
    }

/* Create button */
.create-button[b-8yr9914vam] {
    background: linear-gradient(135deg, #8b1538, #a91d42);
    color: white;
}

    .create-button:hover[b-8yr9914vam] {
        background: linear-gradient(135deg, #6d1028, #8b1538);
        transform: translateY(-2px);
    }


/* ----------------------------- Results Container & Table ----------------------------- */

/* Results wrapper section */
.results-container[b-8yr9914vam] {
    animation: fadeInUp-b-8yr9914vam 0.6s ease-out;
    padding-bottom: 3rem;
}

/* Results title inside toolbar */
.results-title[b-8yr9914vam] {
    color: white;
    padding-left: 0rem;
    font-weight: 700;
    margin: 0;
}

/* Expiry info column */
.expiry-info[b-8yr9914vam] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

/* Chips inside expiry info */
[b-8yr9914vam] .expired-chip {
    font-size: 0.65rem !important;
}

[b-8yr9914vam] .expiring-chip {
    font-size: 0.65rem !important;
}


/* ----------------------------- Loading, Empty, and Error States ----------------------------- */

/* Loading + error messages */
.loading-section[b-8yr9914vam],
.error-section[b-8yr9914vam] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
}

/* No residences found */
.no-residences[b-8yr9914vam] {
    margin: 2rem 0;
}

/* Selected filters summary */
.selected-filters[b-8yr9914vam] {
    margin-top: 2rem;
    padding: 1.5rem;
    background-color: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #dee2e6;
}

    .selected-filters h4[b-8yr9914vam] {
        margin-bottom: 1rem;
        color: #495057;
    }

.filter-group[b-8yr9914vam] {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

    .filter-group strong[b-8yr9914vam] {
        color: #495057;
        min-width: 100px;
    }

/* Table states (MudTable) */
[b-8yr9914vam] .loading-state,
[b-8yr9914vam] .empty-state {
    text-align: center;
    padding: 3rem;
    color: #6c757d;
}

    [b-8yr9914vam] .loading-state .mud-typography,
    [b-8yr9914vam] .empty-state .mud-typography {
        font-size: 1.1rem;
        margin-bottom: 1rem;
    }


/* ----------------------------- Responsive Design ----------------------------- */

/* Responsive layout adjustments */
@media (max-width: 768px) {
    .billboard-title[b-8yr9914vam] {
        font-size: 2rem;
        padding: 1rem;
    }

    .filter-card[b-8yr9914vam] {
        padding: 1.5rem;
    }

    .residence-sections[b-8yr9914vam] {
        grid-template-columns: 1fr !important;
    }

    .rental-price-sections[b-8yr9914vam] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .checkbox-container-two-columns[b-8yr9914vam] {
        grid-template-columns: 1fr;
    }

    .price-section[b-8yr9914vam] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .price-label[b-8yr9914vam] {
        min-width: auto;
    }

    .button-container[b-8yr9914vam] {
        flex-direction: column;
        align-items: center;
    }

    .search-btn[b-8yr9914vam],
    .reset-btn[b-8yr9914vam] {
        width: 100%;
        max-width: 300px;
    }

    /* Results header responsive - preserved from original */
    .results-header[b-8yr9914vam] {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    .bottom-buttons[b-8yr9914vam] {
        flex-direction: column;
        gap: 1rem;
    }

    .back-button[b-8yr9914vam],
    .create-button[b-8yr9914vam] {
        width: 100%;
        justify-content: center;
    }
}


/* ----------------------------- MudBlazor Overrides ----------------------------- */

/* MudTable container indirectly */
[b-8yr9914vam] .mud-table {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* MudTable toolbar indirectly */
[b-8yr9914vam] .mud-table-toolbar {
    background: var(--primary-garnet);
    color: white;
    padding: 1.5rem;
}

    [b-8yr9914vam] .mud-table-toolbar .mud-typography {
        color: white !important;
        font-weight: 600;
        font-size: 1.25rem;
    }

[b-8yr9914vam] .mud-table-head {
    background: #f8f9fa;
}

    [b-8yr9914vam] .mud-table-head .mud-table-cell {
        font-weight: 600;
        color: #495057;
        border-bottom: 2px solid #8b1538;
    }

[b-8yr9914vam] .mud-table-row:hover {
    background: rgba(139, 21, 56, 0.05);
}


/* ----------------------------- Accessibility ----------------------------- */

/* Focus outlines */
input[type="checkbox"]:focus[b-8yr9914vam],
input[type="number"]:focus[b-8yr9914vam],
button:focus[b-8yr9914vam],
a:focus[b-8yr9914vam] {
    outline: 3px solid #8b1538;
    outline-offset: 2px;
}

.search-btn:focus[b-8yr9914vam],
.reset-btn:focus[b-8yr9914vam],
.back-button:focus[b-8yr9914vam],
.create-button:focus[b-8yr9914vam] {
    outline: 3px solid #ffffff;
    outline-offset: 2px;
    box-shadow: 0 0 0 6px rgba(139, 21, 56, 0.3);
}

/* Fieldset styling for better structure - ✅ preserved */
fieldset[b-8yr9914vam] {
    border: none;
    padding: 0;
    margin: 0;
}

legend[b-8yr9914vam] {
    padding: 0;
    margin-bottom: 1rem;
}

.residence-fieldset[b-8yr9914vam] {
    margin-bottom: 2rem;
}

/* High contrast mode - ✅ useful for a11y */
@media (prefers-contrast: high) {
    .checkbox-item[b-8yr9914vam] {
        border: 2px solid;
    }

        .checkbox-item:hover[b-8yr9914vam] {
            border-width: 3px;
        }

    .search-btn[b-8yr9914vam],
    .reset-btn[b-8yr9914vam],
    .back-button[b-8yr9914vam],
    .create-button[b-8yr9914vam] {
        border: 2px solid;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .checkbox-item[b-8yr9914vam],
    .search-btn[b-8yr9914vam],
    .reset-btn[b-8yr9914vam],
    .back-button[b-8yr9914vam],
    .create-button[b-8yr9914vam],
    .price-input[b-8yr9914vam] {
        transition: none;
    }

        .checkbox-item:hover[b-8yr9914vam],
        .search-btn:hover[b-8yr9914vam],
        .reset-btn:hover[b-8yr9914vam],
        .back-button:hover[b-8yr9914vam],
        .create-button:hover[b-8yr9914vam] {
            transform: none;
        }

    @keyframes fadeInUp-b-8yr9914vam {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }
}


/* ----------------------------- Animations ----------------------------- */

/* Fade in on results/filter card */
@keyframes fadeInUp-b-8yr9914vam {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Prevent pointer events on aria-hidden */
[aria-hidden="true"] *[b-8yr9914vam] {
    pointer-events: none !important;
}
/* /Components/Pages/ListingPages/MediaGallery.razor.rz.scp.css */
/* ============================================================
   Media Upload Component - CSS Styles
   Summary:
   - Upload section (container, info, inputs, buttons, help text)
   - Collapsible section (container, header, title, arrow, content)
   - File upload area (⚠️ UNUSED: file-upload-area, icon, text)
   - Buttons (choose, upload, secondary; ⚠️ UNUSED: primary)
   - Alerts (alert, alert-danger; ⚠️ UNUSED: alert-error)
   - Media grid & cards (layout, preview, info, actions, selection)
   - Utility buttons & spinners
   - Empty states
   - Text & forms (descriptions, input focus)
   - Accessibility (focus styles, high contrast, reduced motion)
   - Animations
   ============================================================ */


/* ----------------------------- Upload Section ----------------------------- */
.section-header[b-5bgj0x7tp5]{
    margin:unset !important;
}

.upload-section[b-5bgj0x7tp5] {
    border: 2px dashed #dee2e6;
    border-radius: 8px;
    padding: 2rem;
    background-color: #f8f9fa;
    text-align: center;
    margin-bottom: 1rem;
}

#selected-files-title[b-5bgj0x7tp5], .upload-info[b-5bgj0x7tp5] {
    color: #6c757d;
    font-size: 0.95rem;
    margin-bottom: 1rem;
}

.file-input-group[b-5bgj0x7tp5] {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.btn-choose-file[b-5bgj0x7tp5],
.btn-upload[b-5bgj0x7tp5] {
    background-color: #e9ecef;
    border: 1px solid #dee2e6;
    color: black;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    white-space: nowrap;
}

.btn-choose-file:hover[b-5bgj0x7tp5],
.btn-upload:hover[b-5bgj0x7tp5] {
    background-color: #dee2e6;
}

.btn-upload:disabled[b-5bgj0x7tp5] {
    opacity: 0.6;
    cursor: not-allowed;
}

.upload-help-text[b-5bgj0x7tp5] {
    color: #6c757d;
    font-size: 0.9rem;
    line-height: 1.4;
    text-align: left;
}


/* ----------------------------- Collapsible Section ----------------------------- */

.section-container[b-5bgj0x7tp5] {
    border: 1px solid var(--border-color) !important;
    border-radius: 4px;
    margin-bottom: 1.5rem;
    background: white;
}

.section-header[b-5bgj0x7tp5] {
    padding: 1rem 1.5rem;
    background: var(--background-light) !important;
    border-bottom: 1px solid var(--border-color) !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: background-color 0.2s ease;
}

.section-header:hover[b-5bgj0x7tp5] {
    background: #f5f5f5;
}

.section-title[b-5bgj0x7tp5] {
    color: var(--primary-garnet) !important; /* UofO garnet */
    font-size: 1.1rem;
    font-weight: 500;
    margin: 0;
}

.section-arrow[b-5bgj0x7tp5] {
    color: var(--primary-garnet) !important; /* UofO garnet */
    transition: transform 0.2s ease;
    font-size: 0.8rem;
}

.section-arrow.expanded[b-5bgj0x7tp5] {
    transform: rotate(90deg);
}

.section-content[b-5bgj0x7tp5] {
    padding: 1.5rem;
}


/* ----------------------------- File Upload Area (UNUSED) ----------------------------- */

.file-upload-area:hover[b-5bgj0x7tp5],
.file-upload-area.dragover[b-5bgj0x7tp5] {
    border-color: var(--primary-garnet) !important;
    background: rgba(143, 0, 26, 0.02);
}

.file-upload-icon[b-5bgj0x7tp5] {
    color: var(--text-muted) !important;
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.file-upload-text[b-5bgj0x7tp5] {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}


/* ----------------------------- Buttons ----------------------------- */

/* Primary button (⚠️ UNUSED in markup) */
.btn-primary[b-5bgj0x7tp5] {
    background: var(--primary-garnet) !important;
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-primary:hover:not(:disabled)[b-5bgj0x7tp5] {
    background: #9c1c30 !important; /* UofO light garnet */
    color: white !important;
}

.btn-primary:disabled[b-5bgj0x7tp5] {
    background: #cccccc;
    cursor: not-allowed;
}

/* Secondary button (used in gallery) */
.btn-secondary[b-5bgj0x7tp5] {
    background: white;
    color: var(--primary-garnet) !important; /* UofO garnet */
    border: 1px solid var(--primary-garnet) !important;
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-secondary:hover[b-5bgj0x7tp5] {
    background: var(--primary-garnet) !important;
    color: white !important;
}


/* ----------------------------- Alerts ----------------------------- */

/* Custom error alert (⚠️ UNUSED) */
.alert-error[b-5bgj0x7tp5] {
    background: #ffebee;
    border: 1px solid #f44336;
    color: #c62828;
    padding: 0.75rem;
    border-radius: 4px;
    margin-top: 1rem;
    font-size: 0.9rem;
}

/* Bootstrap-style alerts */
.alert[b-5bgj0x7tp5] {
    border-radius: 4px;
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
}

.alert-danger[b-5bgj0x7tp5] {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}


/* ----------------------------- Media Grid & Cards ----------------------------- */

.media-grid[b-5bgj0x7tp5] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.media-card[b-5bgj0x7tp5] {
    border: 1px solid var(--border-color);
    border-radius: 4px;
    overflow: hidden;
    background: white;
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
}

.media-card:hover[b-5bgj0x7tp5] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transform: scale(1.02);
}

.media-card.selected[b-5bgj0x7tp5] {
    border: 2px solid var(--primary-garnet) !important;
    background-color: rgba(143, 0, 26, 0.05);
}

.media-card.selected[b-5bgj0x7tp5]::before {
    content: "✓ Selected";
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--primary-garnet);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: bold;
    z-index: 10;
}

.media-preview[b-5bgj0x7tp5] {
    width: 100%;
    height: 180px;
    object-fit: cover;
    background: var(--background-light) !important;
}

.media-info[b-5bgj0x7tp5] {
    padding: 1rem;
}

.media-filename[b-5bgj0x7tp5] {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-dark) !important;
    margin-bottom: 0.25rem;
    word-break: break-word;
}

.media-size[b-5bgj0x7tp5] {
    font-size: 0.8rem;
    color: var(--text-muted) !important;
    margin-bottom: 0.5rem;
}

.media-actions[b-5bgj0x7tp5] {
    display: flex;
    gap: 0.5rem;
}


/* ----------------------------- Utility Buttons & Spinners ----------------------------- */

.btn-small[b-5bgj0x7tp5] {
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
    border-radius: 3px;
}

.loading-spinner[b-5bgj0x7tp5] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin-b-5bgj0x7tp5 1s linear infinite;
    margin-right: 0.5rem;
}


/* ----------------------------- Empty States ----------------------------- */

.empty-state[b-5bgj0x7tp5] {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-muted) !important;
}

.empty-state-icon[b-5bgj0x7tp5] {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}


/* ----------------------------- Text & Forms ----------------------------- */

.media-description[b-5bgj0x7tp5] {
    text-align: left;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.form-control-custom:focus[b-5bgj0x7tp5] {
    border-color: var(--primary-garnet) !important;
    box-shadow: 0 0 0 0.2rem rgba(143, 0, 26, 0.25) !important;
    outline: none;
}


/* ----------------------------- Accessibility Enhancements ----------------------------- */

/* Enhanced focus styles */
button:focus[b-5bgj0x7tp5],
.btn-choose-file:focus[b-5bgj0x7tp5],
.btn-upload:focus[b-5bgj0x7tp5],
.btn-secondary:focus[b-5bgj0x7tp5],
.btn-primary:focus[b-5bgj0x7tp5],
.section-header:focus[b-5bgj0x7tp5],
.media-card:focus[b-5bgj0x7tp5],
a:focus[b-5bgj0x7tp5],
textarea:focus[b-5bgj0x7tp5],
input:focus[b-5bgj0x7tp5] {
    outline: 3px solid #005fcc !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px rgba(0, 95, 204, 0.2) !important;
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .media-card[b-5bgj0x7tp5] {
        border: 2px solid #000 !important;
    }

    .media-card.selected[b-5bgj0x7tp5] {
        border: 3px solid var(--primary-garnet) !important;
        background-color: #fff !important;
    }

    .btn-choose-file[b-5bgj0x7tp5],
    .btn-upload[b-5bgj0x7tp5],
    .btn-secondary[b-5bgj0x7tp5],
    .btn-primary[b-5bgj0x7tp5] {
        border: 2px solid #000 !important;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .media-card[b-5bgj0x7tp5],
    .section-arrow[b-5bgj0x7tp5],
    .loading-spinner[b-5bgj0x7tp5],
    .btn-choose-file[b-5bgj0x7tp5],
    .btn-upload[b-5bgj0x7tp5],
    .btn-secondary[b-5bgj0x7tp5],
    .btn-primary[b-5bgj0x7tp5] {
        transition: none !important;
        animation: none !important;
    }
}

/* Mobile adjustment: smaller min width for cards */
@media (max-width: 600px) {
    .media-grid[b-5bgj0x7tp5] {
        grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    }
}

/* ----------------------------- Animations ----------------------------- */

@keyframes spin-b-5bgj0x7tp5 {
    to {
        transform: rotate(360deg);
    }
}
/* /Components/Shared/NotificationPreferences.razor.rz.scp.css */
/* ============================================================
   Notification Preferences - CSS Styles
   Summary:
   - Section containers & headers
   - Notification options & icons
   - Toggle switches
   - SMS phone selection
   - Primary method (radio group)
   - Settings summary
   - Enhanced focus styles
   - Accessibility (high contrast & reduced motion)
   ============================================================ */


/* ----------------------------- Section Containers & Headers ----------------------------- */

.notification-preferences-section[b-m1s824qej5] {
    background: #f8f9fa;
    border-radius: 8px;
    padding-top: 2rem;
}

.notification-header[b-m1s824qej5] {
    margin-bottom: 24px;
}

.notification-title[b-m1s824qej5] {
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 8px 0;
}

.notification-subtitle[b-m1s824qej5] {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
}


/* ----------------------------- Notification Options & Icons ----------------------------- */

/* Each notification preference (email / SMS row) */
.notification-option[b-m1s824qej5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin-bottom: 12px;
}

/* Content inside option: icon + text */
.notification-content[b-m1s824qej5] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Icon container */
.notification-icon[b-m1s824qej5] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
}

/* Variant: email */
.email-icon[b-m1s824qej5] {
    background: #dbeafe;
}

/* Variant: sms */
.sms-icon[b-m1s824qej5] {
    background: #d1fae5;
}

/* Text block */
.notification-text[b-m1s824qej5] {
    display: flex;
    flex-direction: column;
}

.notification-label[b-m1s824qej5] {
    font-weight: 500;
    color: #1f2937;
    font-size: 14px;
}

.notification-description[b-m1s824qej5] {
    font-size: 12px;
    color: #6b7280;
}


/* ----------------------------- Toggle Switches ----------------------------- */

.toggle-switch[b-m1s824qej5] {
    position: relative;
}

.toggle-input[b-m1s824qej5] {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-label[b-m1s824qej5] {
    display: inline-block;
    width: 48px;
    height: 24px;
    background-color: #d1d5db;
    border-radius: 24px;
    position: relative;
    cursor: pointer;
    transition: background-color 0.3s;
}

    .toggle-label[b-m1s824qej5]::after {
        content: '';
        position: absolute;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: white;
        top: 2px;
        left: 2px;
        transition: transform 0.3s;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }

/* Checked state */
.toggle-input:checked + .toggle-label[b-m1s824qej5] {
    background-color: #10b981;
}

    .toggle-input:checked + .toggle-label[b-m1s824qej5]::after {
        transform: translateX(24px);
    }


/* ----------------------------- SMS Phone Selection ----------------------------- */

.sms-phone-selection[b-m1s824qej5] {
    margin-left: 32px;
    margin-bottom: 16px;
}

.phone-selection-label[b-m1s824qej5] {
    display: block;
    font-weight: 500;
    color: #1f2937;
    margin-bottom: 8px;
    font-size: 14px;
}

.phone-selection-dropdown[b-m1s824qej5] {
    width: 100%;
    max-width: 400px;
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: white;
    font-size: 14px;
}

/* Warning when no phone available */
.phone-warning[b-m1s824qej5] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 8px 12px;
    background: #fef3c7;
    border: 1px solid #f59e0b;
    border-radius: 6px;
    font-size: 12px;
    color: #92400e;
}


/* ----------------------------- Primary Method (Radio Group) ----------------------------- */

.primary-method-section[b-m1s824qej5] {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}

.primary-method-label[b-m1s824qej5] {
    display: block;
    font-weight: 500;
    color: #1f2937;
    margin-bottom: 12px;
    font-size: 14px;
}

.radio-group[b-m1s824qej5] {
    display: flex;
    gap: 24px;
}

.radio-option[b-m1s824qej5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.radio-label[b-m1s824qej5] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    color: #374151;
}


/* ----------------------------- Settings Summary ----------------------------- */

.settings-summary[b-m1s824qej5] {
    background: #f3f4f6;
    border-radius: 6px;
    padding: 12px;
    font-size: 14px;
    color: #374151;
}


/* ----------------------------- Enhanced Focus Styles ----------------------------- */

/* Toggle focus */
.toggle-input:focus + .toggle-label[b-m1s824qej5] {
    outline: 3px solid #3b82f6;
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.toggle-input:focus-visible + .toggle-label[b-m1s824qej5] {
    outline: 3px solid #3b82f6;
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Focus inside notification option */
.notification-option:focus-within[b-m1s824qej5] {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    background-color: #f8fafc;
}

/* Phone dropdown focus */
.phone-selection-dropdown:focus[b-m1s824qej5] {
    outline: 3px solid #3b82f6;
    outline-offset: 2px;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Radio focus */
.radio-option input[type="radio"]:focus + .radio-label[b-m1s824qej5] {
    outline: 3px solid #3b82f6;
    outline-offset: 2px;
    border-radius: 4px;
    background-color: rgba(59, 130, 246, 0.05);
    padding: 4px 8px;
    margin: -4px -8px;
}

.radio-option input[type="radio"]:focus-visible + .radio-label[b-m1s824qej5] {
    outline: 3px solid #3b82f6;
    outline-offset: 2px;
    border-radius: 4px;
    background-color: rgba(59, 130, 246, 0.05);
    padding: 4px 8px;
    margin: -4px -8px;
}


/* ----------------------------- Accessibility ----------------------------- */

/* High contrast mode */
@media (prefers-contrast: high) {
    .toggle-input:focus + .toggle-label[b-m1s824qej5],
    .toggle-input:focus-visible + .toggle-label[b-m1s824qej5] {
        outline: 4px solid;
        outline-color: Highlight;
    }

    .notification-option:focus-within[b-m1s824qej5] {
        border: 3px solid;
        border-color: Highlight;
    }

    .phone-selection-dropdown:focus[b-m1s824qej5] {
        outline: 4px solid;
        outline-color: Highlight;
    }

    .radio-option input[type="radio"]:focus + .radio-label[b-m1s824qej5],
    .radio-option input[type="radio"]:focus-visible + .radio-label[b-m1s824qej5] {
        outline: 4px solid;
        outline-color: Highlight;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .toggle-label[b-m1s824qej5], .toggle-label[b-m1s824qej5]::after {
        transition: none;
    }
}

/* Mobile adjustments */
@media (max-width: 600px) {
    .notification-option[b-m1s824qej5] {
        flex-direction: column; /* Stack content vertically */
        align-items: flex-start; /* Align text & toggle to the left */
        gap: 12px; /* Add spacing between text and switch */
    }
}