/* AI-Header: AuthenticatedLayout structure and theme-specific styling */
/* Date: 2025-07-13 */

/* ===========================================
   PAGE LAYOUT STRUCTURE
   =========================================== */

.page {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    box-sizing: border-box;
}

main {
    flex: 1;
}

/* ===========================================
   SIDEBAR - THEME-SPECIFIC STYLING
   =========================================== */

/* Light theme sidebar - light modern gradient */
[data-bs-theme="light"] .sidebar {
    background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 50%, #dee2e6 100%);
    border-right: 1px solid #dee2e6;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
}

/* Dark theme sidebar - modern gradient */
[data-bs-theme="dark"] .sidebar {
    background: linear-gradient(180deg, #1a1a1a 0%, #0f0f0f 50%, #0a0a0a 100%);
    border-right: 1px solid #333333;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);
}

/* ===========================================
   PAGE AND CONTENT LAYOUT
   =========================================== */

/* Light theme page and content */
[data-bs-theme="light"] .page {
    background-color: #ffffff;
    color: #212529;
}

[data-bs-theme="light"] main {
    background-color: #ffffff;
    color: #212529;
}

[data-bs-theme="light"] .content {
    background-color: transparent;
    color: #212529;
}

/* Dark theme page and content */
[data-bs-theme="dark"] .page {
    background-color: #000000;
    color: #ffffff;
}

[data-bs-theme="dark"] main {
    background-color: #000000;
}

[data-bs-theme="dark"] .content {
    background-color: transparent;
}

/* ===========================================
   TOP ROW - MAIN CONTENT AREA (About link)
   =========================================== */

/* Main content top row - theme-specific */
[data-bs-theme="light"] main .top-row {
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background: #f8f9fa !important;
    border-bottom: 1px solid #dee2e6;
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

[data-bs-theme="dark"] main .top-row {
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background: #1a1a1a !important;
    border-bottom: 1px solid #333333;
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

[data-bs-theme="light"] main .top-row a, 
[data-bs-theme="light"] main .top-row .btn-link {
    white-space: nowrap;
    margin-left: 1.5rem;
    text-decoration: none;
    color: #6c757d !important;  /* gray for light theme */
    font-weight: 500;
    transition: all 0.2s ease;
}

[data-bs-theme="light"] main .top-row a:hover, 
[data-bs-theme="light"] main .top-row .btn-link:hover {
    color: #495057 !important;  /* darker gray on hover */
    text-decoration: none;
    transform: translateY(-1px);
}

[data-bs-theme="dark"] main .top-row a, 
[data-bs-theme="dark"] main .top-row .btn-link {
    white-space: nowrap;
    margin-left: 1.5rem;
    text-decoration: none;
    color: #9ca3af !important;  /* gray-400 for modern theme */
    font-weight: 500;
    transition: all 0.2s ease;
}

[data-bs-theme="dark"] main .top-row a:hover, 
[data-bs-theme="dark"] main .top-row .btn-link:hover {
    color: #d1d5db !important;  /* gray-300 on hover */
    text-decoration: none;
    transform: translateY(-1px);
}

main .top-row a:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===========================================
   RESPONSIVE LAYOUT
   =========================================== */

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

    main .top-row a, 
    main .top-row .btn-link {
        margin-left: 0;
    }
}

@media (max-width: 768px) {
    /* Light theme mobile sidebar - light modern gradient */
    [data-bs-theme="light"] .sidebar {
        background: linear-gradient(180deg, #f8f9fa 0%, #dee2e6 100%);
    }
    
    /* Dark theme mobile sidebar - modern gradient */
    [data-bs-theme="dark"] .sidebar {
        background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%);
    }
}

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

    .sidebar {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    main .top-row {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    main .top-row.auth ::deep a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }
}

/* ===========================================
   MOBILE-OPTIMIZED LAYOUT MARGINS
   =========================================== */

/* Reset layout elements to minimal padding/margins */
main .top-row, article {
    padding: 0px !important;
    margin: 0px !important;
    /* border: 3px solid red !important; TEMP: Visual indicator that styles are loading */
}

/* Override Bootstrap container defaults with mobile-friendly spacing (EXCLUDE sidebar containers) */
main .container:not(.sidebar .container-fluid), 
main .container-fluid:not(.sidebar .container-fluid), 
main .container-sm, 
main .container-md, 
main .container-lg, 
main .container-xl, 
main .container-xxl,
.content .container, 
.content .container-fluid, 
.content .container-sm, 
.content .container-md, 
.content .container-lg, 
.content .container-xl, 
.content .container-xxl {
    padding: 0px !important;
    margin: 0.5rem !important;
    margin-bottom: 0px !important;
    width: auto !important;
    max-width: none !important;
    box-sizing: border-box !important;
    /* border: 2px solid blue !important; TEMP: Visual indicator that container styles are loading */
}

/* Protect sidebar containers from margin overrides */
.sidebar .container-fluid,
.sidebar .container,
.navbar-brand {
    margin: initial !important;
    padding: initial !important;
    width: initial !important;
    max-width: initial !important;
}

/* Reset only main and content base elements, preserve container margins */
main, .content {
    padding: 0px !important;
    margin: 0px !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

/* Reset non-container page content elements */
.content > section:not([class*="container"]),
.content > article:not([class*="container"]),
.page-content:not([class*="container"]) {
    padding: 0px !important;
    margin: 0px !important;
}

/* ===========================================
   ERROR UI STYLING
   =========================================== */

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}