/* layout.css - Header, sidebar navigation, main content wrapper */

/* ==================== HEADER STYLES ==================== */
.main-header {
    background-color: #fff;
    border-bottom: 1px solid #dee2e6;
    padding: 0 1.5rem;
    height: var(--header-height);
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1030;
}

/* Header Mobile Logo (visible only on mobile) */
.header-mobile-logo {
    display: none;
    text-decoration: none;
}

.header-mobile-logo img {
    height: 32px;
    width: auto;
}

@media (max-width: 991px) {
    .header-mobile-logo {
        display: flex;
        align-items: center;
        margin-left: 0.75rem;
    }
}

/* Current Page Title in Header */
.current-page-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-left: 1.5rem;
    padding-left: 1.5rem;
    border-left: 1px solid #e5e7eb;
}

.current-page-title i {
    font-size: 1.1rem;
    color: var(--eff-primary);
}

.current-page-title span {
    font-size: 1.15rem;
    font-weight: 600;
    color: #1f2937;
}

@media (max-width: 991px) {
    .current-page-title {
        margin-left: 1rem;
        padding-left: 1rem;
    }

    .current-page-title span {
        font-size: 1rem;
    }
}

.header-logo {
    height: 40px;
    padding: 0;
}

.nav-item .nav-link {
    color: #212529;
    font-size: 1.125rem;
    padding: 1.125rem 1rem;
    position: relative;
}

.nav-item .nav-link:hover {
    color: #1E6332;
}

.nav-item .nav-link.active {
    color: #1E6332;
}

.nav-item .nav-link.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background-color: #1E6332;
}

.draft-badge {
    position: absolute;
    top: 8px;
    right: -2px;
    font-size: 0.65rem;
}

.btn-success {
    background-color: #1E6332;
    border-color: #1E6332;
}

.btn-success:hover {
    background-color: #214A3E;
    border-color: #146c43;
}

.profile-img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

/* ==================== SIDEBAR NAVIGATION ==================== */

/* Main Sidebar Container */
.app-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    height: 100dvh;
    width: var(--sidebar-width-expanded);
    background: #fff;
    border-right: 1px solid #dee2e6;
    display: flex;
    flex-direction: column;
    z-index: 1040;
    transition: var(--sidebar-transition);
    box-shadow: 2px 0 10px rgba(0,0,0,0.05);
}

/* Collapsed State */
.app-sidebar.collapsed {
    width: var(--sidebar-width-collapsed);
    overflow: hidden;
}

.app-sidebar.collapsed .sidebar-text,
.app-sidebar.collapsed .sidebar-brand-text {
    opacity: 0;
    visibility: hidden;
    width: 0;
    white-space: nowrap;
}

.app-sidebar.collapsed .sidebar-toggle-icon {
    transform: none;
}

.app-sidebar.collapsed .sidebar-header {
    padding: 1rem 0.75rem;
    justify-content: center;
}

.app-sidebar.collapsed .sidebar-brand {
    justify-content: center;
}

.app-sidebar.collapsed .sidebar-logo {
    margin-right: 0;
}

/* Sidebar Header */
.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e9ecef;
    min-height: var(--header-height);
    gap: 0.75rem;
    position: relative;
}

.app-sidebar.collapsed .sidebar-header {
    justify-content: center;
    padding: 1rem 0.75rem;
    flex-direction: column;
    gap: 0.5rem;
}

.app-sidebar.collapsed .sidebar-toggle {
    position: relative;
    right: auto;
}

/* Sidebar Brand (Logo/Avatar) */
.sidebar-brand-container {
    display: flex;
    align-items: center;
    text-decoration: none;
    position: relative;
    height: 40px;
    overflow: hidden;
}

.sidebar-brand-avatar {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1E6332 0%, #214A3E 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transform: scale(1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-brand-avatar span {
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
}

/* Collapsed state */
.app-sidebar.collapsed .sidebar-brand-container {
    width: 40px;
    height: 40px;
    justify-content: center;
}

.sidebar-toggle {
    background: none;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6c757d;
    cursor: pointer;
    transition: var(--sidebar-transition);
    flex-shrink: 0;
    position: absolute;
    right: 1.25rem;
}

.sidebar-toggle:hover {
    background: #f8f9fa;
    color: #1E6332;
    border-color: #1E6332;
}

.sidebar-toggle-icon {
    transition: transform 0.3s ease;
}

/* Sidebar Navigation */
.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    /* No top padding — the sticky Home item must pin flush to the very top of
       the scroll area, otherwise items scrolling up show through this strip
       (the "floating Home" bleed). Bottom padding kept for end-of-list spacing. */
    padding: 0 0 0.5rem 0;
}


.sidebar-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-item {
    margin: 0.125rem 0.5rem;
}

/* Sticky Home tab — stays pinned at the top of the scrollable nav area,
   mirroring how the profile footer is pinned at the bottom. */
.sidebar-item-sticky-top {
    position: sticky;
    top: 0;
    z-index: 10;
    /* Solid full-width background (no side/top margins) so nav items scrolling
       underneath are fully hidden — no "floating Home" bleed-through. The
       horizontal inset for the pill is recreated with padding, and a bottom
       separator mirrors the pinned profile footer at the bottom. */
    background: #fff;
    margin: 0;
    padding: 0.5rem;
    border-bottom: 1px solid #e9ecef;
}

/* Sidebar Separators with Labels */
.sidebar-separator {
    margin: 0.4rem 0.5rem 0.15rem 0.5rem;
    padding: 0.35rem 0.85rem 0.15rem 0.85rem;
    border-top: 1px solid #e9ecef;
}

.sidebar-separator:first-of-type {
    border-top: none;
    margin-top: 0.15rem;
}

.sidebar-separator-label {
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9ca3af;
}

.app-sidebar.collapsed .sidebar-separator {
    padding: 0.5rem 0;
    margin: 0.5rem 0.75rem;
}

.app-sidebar.collapsed .sidebar-separator-label {
    display: none;
}

/* Note: no ::after line here — the base .sidebar-separator { border-top } rule
   already provides the divider. Previously rendering both caused a double line
   in collapsed mode (visible as two gray stripes between sections). */

.sidebar-link {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.85rem;
    color: #495057;
    text-decoration: none;
    border-radius: 8px;
    transition: var(--sidebar-transition);
    position: relative;
    overflow: hidden;
}

.sidebar-link:hover {
    background: #f0fff4;
    color: #1E6332;
}

.sidebar-link.active,
.sidebar-link.active:hover {
    background: linear-gradient(135deg, #1E6332 0%, #214A3E 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(30, 99, 50, 0.3);
}

.sidebar-link.active .sidebar-icon {
    color: #fff;
}

.sidebar-icon {
    width: 18px;
    font-size: 1rem;
    margin-right: 0.75rem;
    text-align: center;
    flex-shrink: 0;
    color: #6c757d;
    transition: var(--sidebar-transition);
}

.sidebar-link:hover .sidebar-icon {
    color: #1E6332;
}

.sidebar-link.active:hover .sidebar-icon {
    color: #fff;
}

.sidebar-text {
    font-size: 0.85rem;
    font-weight: 500;
    transition: var(--sidebar-transition);
    white-space: nowrap;
}

.sidebar-badge {
    display: none;
}

.app-sidebar.collapsed .sidebar-link {
    overflow: visible;
}

.app-sidebar.collapsed .sidebar-badge {
    display: none;
}

.sidebar-badge-new {
    display: none;
}

/* Sidebar Footer - Profile Section */
.sidebar-footer {
    padding: 0.5rem;
    border-top: 1px solid #e9ecef;
    position: relative;
}

.sidebar-profile {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    cursor: pointer;
    transition: var(--sidebar-transition);
    gap: 0.75rem;
}

.sidebar-profile:hover {
    background: #f3f4f6;
}

.sidebar-profile-avatar {
    position: relative;
    flex-shrink: 0;
}

.sidebar-profile-avatar img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #e9ecef;
}

.sidebar-role-indicator {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #fff;
}

.sidebar-role-indicator.admin {
    background: #1E6332;
}

.sidebar-role-indicator.user {
    background: #0d6efd;
}

.sidebar-profile-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.sidebar-profile-name {
    display: block;
    font-weight: 600;
    font-size: 0.84rem;
    color: #212529;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-profile-role {
    display: block;
    font-size: 0.75rem;
    color: #6c757d;
}

.app-sidebar.collapsed .sidebar-profile-info {
    display: none;
}

.app-sidebar.collapsed .sidebar-profile {
    justify-content: center;
    padding: 0.5rem;
}

/* Sidebar Logout Button */
.sidebar-logout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: calc(100% - 1rem);
    margin: 0 0.5rem 0.4rem;
    padding: 0.3rem 0.5rem;
    border: 1px solid #e5e1da;
    border-radius: 6px;
    background: transparent;
    color: #8a8580;
    font-size: 0.7rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.sidebar-logout-btn:hover {
    background: #fff5f5;
    color: #dc3545;
    border-color: #fecaca;
}

.sidebar-logout-btn i {
    font-size: 0.8rem;
}

.app-sidebar.collapsed .sidebar-logout-btn .sidebar-text {
    display: none;
}

.app-sidebar.collapsed .sidebar-logout-btn {
    width: auto;
    margin: 0.25rem auto 0.5rem;
    padding: 0.4rem 0.6rem;
}

/* Tooltip for Collapsed State — fixed position, created by JS */
.sidebar-tooltip {
    position: fixed;
    background: #212529;
    color: #fff;
    padding: 0.35rem 0.65rem;
    border-radius: 6px;
    font-size: 0.8rem;
    white-space: nowrap;
    pointer-events: none;
    z-index: 9999;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    opacity: 0;
    transition: opacity 0.12s ease;
}

.sidebar-tooltip.visible {
    opacity: 1;
}

/* Mobile Overlay */
.sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1039;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
    background: none;
    border: none;
    font-size: 1.25rem;
    color: #495057;
    padding: 0.5rem;
    margin-right: 0.5rem;
    cursor: pointer;
    display: none;
}

.mobile-menu-toggle:hover {
    color: #1E6332;
}

/* Main Content Wrapper */
.main-content-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    margin-left: var(--sidebar-width-expanded);
    transition: var(--sidebar-transition);
}

.sidebar-collapsed .main-content-wrapper {
    margin-left: var(--sidebar-width-collapsed);
}

/* Mobile Responsive */
@media (max-width: 991.98px) {
    .app-sidebar {
        transform: translateX(-100%);
    }

    .app-sidebar.mobile-open {
        transform: translateX(0);
    }

    .mobile-menu-toggle {
        display: flex;
    }

    .header-logo-link {
        display: flex !important;
    }

    .main-content-wrapper {
        margin-left: 0 !important;
    }

    .main-footer {
        left: 0 !important;
    }
}

@media (min-width: 992px) {
    .header-logo-link {
        display: none;
    }
}

/* ==================== MAIN CONTENT LAYOUT ==================== */
.main-content {
    flex: 1;
    display: flex;
    overflow: hidden;
    padding-bottom: 50px; /* Space for fixed footer */
}

/* Allow scrolling on pages that need it */
.main-content:has(#page-deceased.active),
.main-content:has(#page-e-signatures.active),
.main-content:has(#page-claims.active),
.main-content:has(#page-drafts.active),
.main-content:has(#page-analytics.active),
.main-content:has(#page-admin.active),
.main-content:has(#page-create-claim.active) {
    overflow-y: auto;
}

/* Wizard pages: remove footer padding so wizard fills full height */
.main-content:has(#page-create-claim.active),
.main-content:has(#page-create-claim-v2.active),
.main-content:has(#page-create-claim-v3.active) {
    padding-bottom: 0;
}

/* SYSTEMIC FIX (app-wide bottom gap): the footer is position:fixed and
   .main-content reserves 50px for it. On every page where the footer is
   HIDDEN (data pages set body.hide-footer; wizards set body.wizard-active),
   that 50px is dead space — a gray gap at the bottom. Zero it everywhere the
   footer is hidden, in one place, so pages fill to the bottom edge. */
body.hide-footer .main-content,
body.wizard-active .main-content {
    padding-bottom: 0;
}

/* Reports (Custom Report Builder): locked viewport — list/preview scroll
   internally. The footer is hidden on Reports, so we DON'T reserve the 50px
   footer band (that was leaving a dead gap at the bottom). */
#page-reports.active {
    height: calc(100vh - 60px);   /* viewport - header only (footer hidden) */
    height: calc(100dvh - 60px);
    overflow: hidden;
}

/* Drop the fixed-footer padding reservation on Reports so the builder fills
   to the very bottom (no gap below the preview table). */
.main-content:has(#page-reports.active) {
    padding-bottom: 0;
}

#page-reports.active .dashboard-content {
    height: 100%;
    overflow: hidden;
}

/* Claims: locked viewport on DESKTOP only — the filter toolbar, "Claims Data"
   band, and column-header row stay frozen while the user scrolls through 100
   claims; the table body scrolls internally and horizontal scroll still works.
   Mobile keeps its existing page-scroll behavior (mobile.css owns it), so this
   is gated to ≥769px. `.main-content:has(#page-claims.active)` was setting
   overflow-y:auto (page scroll) above — override it to hidden here so the
   viewport lock can take effect. */
@media (min-width: 769px) {
    .main-content:has(#page-claims.active) {
        overflow-y: hidden;
        /* The footer is hidden on Claims (body.hide-footer), so the 50px
           bottom padding `.main-content` reserves for the fixed footer is
           just dead space here. Zero it out so the locked page can fill
           all the way to the bottom edge — this was the big gray gap
           below the pagination bar. */
        padding-bottom: 0;
    }
    #page-claims.active {
        /* Only subtract the 60px global header — no footer to reserve for
           (it's hidden on this page, and main-content's footer padding is
           zeroed above). Subtracting 50px AND keeping that padding was
           double-counting ~100px → the dead band the user flagged. */
        height: calc(100vh - 60px);
        height: calc(100dvh - 60px);
        overflow: hidden;
    }
    #page-claims.active .dashboard-content.claims-page {
        height: 100%;
        overflow: hidden;
    }

    /* Drafts: same viewport lock as Claims — Active/Archived tabs, filter
       toolbar, and "Drafts Data" band stay frozen while the list scrolls
       internally. Footer is hidden on Drafts too, so zero its reservation. */
    .main-content:has(#page-drafts.active) {
        overflow-y: hidden;
        padding-bottom: 0;
    }
    #page-drafts.active {
        height: calc(100vh - 60px);
        height: calc(100dvh - 60px);
        overflow: hidden;
    }
    #page-drafts.active .dashboard-content {
        height: 100%;
        overflow: hidden;
    }

    /* Decedent: same viewport lock — filter toolbar + "Decedent Data" band
       stay frozen while the cards grid / table body scrolls internally.
       Footer is hidden on Decedent too, so zero its reservation. */
    .main-content:has(#page-deceased.active) {
        overflow-y: hidden;
        padding-bottom: 0;
    }
    #page-deceased.active {
        height: calc(100vh - 60px);
        height: calc(100dvh - 60px);
        overflow: hidden;
    }
    #page-deceased.active .dashboard-content {
        height: 100%;
        overflow: hidden;
    }

    /* E-Signatures: same viewport lock — filter toolbar, status chips, bulk
       bar, and "E-Signatures" band stay frozen while the list/cards scroll
       internally. Footer is hidden here too, so zero its reservation. */
    .main-content:has(#page-e-signatures.active) {
        overflow-y: hidden;
        padding-bottom: 0;
    }
    #page-e-signatures.active {
        height: calc(100vh - 60px);
        height: calc(100dvh - 60px);
        overflow: hidden;
    }
    #page-e-signatures.active .dashboard-content {
        height: 100%;
        overflow: hidden;
    }
}

.page-section {
    display: none;
    width: 100%;
    height: 100%;
}

.page-section.active {
    display: flex;
    flex-direction: column;
}

/* Shimmer loading state for lazy-loaded pages */
.page-section.active:empty::before {
    content: '';
    display: block;
    width: calc(100% - 40px);
    height: 200px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: pageShimmer 1.5s infinite;
    border-radius: 8px;
    margin: 20px;
}

@keyframes pageShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.page-section.flex-section.active {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    position: relative;
}

#page-create-claim.active {
    flex-direction: row;
    height: calc(100vh - var(--header-height));
    height: calc(100dvh - var(--header-height));
    overflow: hidden;
}

#page-create-claim .form-area {
    padding-top: 1.5rem;
    overflow-y: auto;
    margin-left: 280px; /* Account for fixed step-nav width */
    flex: 1;
    height: 100%;
    padding-bottom: 80px; /* Space at bottom for scrolling comfort */
}

#page-create-claim .step-nav {
    padding-top: 1.5rem;
}

/* Full-height content containers */
#page-reports.active .dashboard-content,
#page-drafts.active .dashboard-content,
#page-deceased.active .dashboard-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Claims page - no overflow hidden to allow sticky */
#page-claims.active .dashboard-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

#page-reports .reports-page {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

#page-reports .reports-table-container,
#page-claims .table-container,
#page-deceased .table-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

#page-reports .reports-table-wrap,
#page-claims .table-container,
#page-deceased .table-container {
    flex: 1;
    overflow-y: auto;
}

/* Drafts grid takes full height */
#page-drafts .drafts-grid {
    flex: 1;
    overflow-y: auto;
    align-content: flex-start;
}

/* Make tables fill available space with sticky headers */
#page-claims .table-container table,
#page-deceased .table-container table {
    margin-bottom: 0;
}

#page-claims .table-container table thead,
#page-deceased .table-container table thead {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 10;
}