/* Navigation Layout Fix - Prevents sidebar from overlapping content */

/* Fix the app layout structure */
body {
    overflow-x: hidden;
}

/* Sidebar positioning fix */
#sidebar {
    position: fixed !important;
    left: 0;
    top: 0;
    width: 256px !important; /* w-64 in Tailwind = 16rem = 256px */
    height: 100vh;
    z-index: 50;
    background: #1e1b4b; /* indigo-950 */
    border-right: 1px solid #3730a3; /* indigo-800 */
    overflow-y: auto;
    transition: transform 0.3s ease-in-out;
}

/* Main content wrapper adjustment */
#main-content-wrapper {
    margin-left: 0 !important; /* Reset default margin */
    transition: margin-left 0.3s ease-in-out;
    min-height: 100vh;
    position: relative;
    background: var(--background, #f8fafc);
}

/* Desktop: Show sidebar and adjust content */
@media (min-width: 1024px) {
    #sidebar {
        transform: translateX(0) !important;
    }
    
    #main-content-wrapper {
        margin-left: 256px !important; /* Match sidebar width */
    }

    /* Collapsed sidebar fallback */
    body[data-sidebar-collapsed="true"] #sidebar { width: 64px !important; }
    body[data-sidebar-collapsed="true"] #main-content-wrapper { margin-left: 64px !important; }
    body[data-sidebar-collapsed="true"] .sidebar-label { display: none !important; }
    body[data-sidebar-collapsed="true"] .sidebar-item { justify-content: center !important; }
    #collapse-toggle svg { transition: transform 200ms ease; }
    #collapse-toggle[aria-pressed="true"] svg { transform: rotate(180deg); }
    /* Hover-to-expand */
    body[data-sidebar-collapsed="true"] #sidebar { transition: width 200ms ease; }
    body[data-sidebar-collapsed="true"] #sidebar:hover { width: 256px !important; }
    body[data-sidebar-collapsed="true"] #sidebar:hover .sidebar-label { display: inline !important; }
    body[data-sidebar-collapsed="true"] #sidebar:hover ~ #main-content-wrapper { margin-left: 256px !important; transition: margin-left 200ms ease; }
}

/* Mobile/Tablet: Hide sidebar by default */
@media (max-width: 1023px) {
    #sidebar {
        transform: translateX(-100%);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    }
    
    #sidebar.mobile-open {
        transform: translateX(0);
    }
    
    #main-content-wrapper {
        margin-left: 0 !important;
    }
}

/* Mobile sidebar toggle button is handled in header */

/* Mobile overlay for sidebar */
.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 25;
}

.sidebar-overlay.active {
    display: block;
}

/* Accessible skip link fallback when Tailwind isn't built */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap; /* added line */
    border: 0;
}
.sr-only:focus {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
}

/* Panel content adjustment */
.panel {
    padding: 0;
    background: transparent;
    max-width: 100%;
}

.panel.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Ensure content doesn't get hidden behind fixed elements */
main {
    min-height: 100%;
}

/* HTMX Indicator baseline */
.htmx-indicator { opacity: 0; transition: opacity 200ms ease-in; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { opacity: 1; }

/* Fix z-index stacking issues */
.info-banner {
    position: relative;
    z-index: 1;
}

.card {
    position: relative;
    z-index: 1;
}

/* Navigation sections proper spacing */
#sms-section,
#phonecall-section,
#reporting-section,
#admin-section {
    margin-bottom: 0.5rem;
}

/* Navigation button styles */
.nav-item button,
#sms-section button,
#phonecall-section button,
#reporting-section button,
#admin-section button {
    width: 100%;
    text-align: left;
    padding: 0.625rem 1.5rem 0.625rem 3rem;
    background: transparent;
    border: none;
    color: var(--text-secondary, #475569);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.nav-item button:hover,
#sms-section button:hover,
#phonecall-section button:hover,
#reporting-section button:hover,
#admin-section button:hover {
    background: var(--primary-light, #dbeafe);
    color: var(--primary-color, #2563eb);
    padding-left: 3.25rem;
}

/* Active navigation item */
.nav-item button.active {
    background: var(--primary-light, #dbeafe);
    color: var(--primary-color, #2563eb);
    font-weight: 600;
    border-right: 3px solid var(--primary-color, #2563eb);
}

/* Prevent content from being cut off */
.table-container {
    overflow-x: auto;
    margin: 1rem 0;
}

.data-table {
    min-width: 100%;
    border-collapse: collapse;
}

/* Ensure forms and inputs are not hidden */
.form-group {
    position: relative;
    z-index: 1;
}

/* Fix header z-index to stay on top */
header {
    z-index: 30 !important;
}

/* Smooth scrolling for better UX */
html {
    scroll-behavior: smooth;
}

/* Accessibility: Focus styles */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--primary-color, #2563eb);
    outline-offset: 2px;
}

/* Print styles */
@media print {
    #sidebar,
    #sidebar-toggle,
    .sidebar-overlay,
    header {
        display: none !important;
    }
    
    #main-content-wrapper {
        margin-left: 0 !important;
    }
}