body {
    display: flex;
    flex-direction: column;
    height: 100vh; /* Keep this for desktop */
    height: 100dvh; /* Use dynamic viewport height for mobile/tablet to account for browser UI */
    background-color: var(--bs-tertiary-bg); /* Use a slightly muted background for contrast */
    overflow: hidden; /* Prevent the body itself from scrolling */
}
.main-container {
    display: flex;
    flex-grow: 1;
    overflow: hidden;
}
#main-content-area {
    height: 100%; /* Take up the full height of the flex container */
    overflow-y: auto;
}

/* --- Main Content Card Focus --- */
#main-content-area .card {
    /*border: none;*/ /* Remove default border to enhance the shadow effect */
    /*box-shadow: var(--bs-box-shadow-lg);*/ /* Use a larger shadow for more depth */
    transition: box-shadow 0.3s ease-in-out;
}

#main-content-area .card:hover {
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.1); /* A more pronounced shadow on hover */
}

[data-bs-theme="dark"] #main-content-area .card:hover {
    box-shadow: 0 1rem 3rem rgba(255, 255, 255, 0.1); /* Enhanced white glow on hover */
}

.offcanvas-body {
    padding: 0;
}

/* Responsive styles for mobile/tablet */
@media (max-width: 991.98px) {
    #ai-chat-panel {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100dvh; /* Use dynamic viewport height to fill the screen on mobile/tablet */
        z-index: 1050; /* Higher than navbar and offcanvas */
        border-left: none !important;
    }
}
/* Styles for the resizable AI chat panel */
@media (min-width: 992px) {
    #ai-chat-panel {
        position: relative; /* Needed for the handle's absolute positioning */
        flex-shrink: 0; /* Prevent it from shrinking when the window is small */
        /* Initial width is set by bootstrap's col-lg-4, but we can override if needed */
        width: 33.3333%;
        min-width: 280px;
        max-width: 60%;
    }
    #resize-handle {
        position: absolute;
        top: 0;
        left: -5px; /* Position it just to the left of the panel */
        width: 10px;
        height: 100%;
        cursor: col-resize;
        background-color: rgba(0,0,0,0.1);
        z-index: 100;
    }
    #resize-handle:hover {
        background-color: rgba(0,0,0,0.2);
    }
    #touch-resize-grabber {
        display: none; /* Hidden by default, shown via JS for touch devices */
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 20px; /* Make it a wider, more obvious touch target */
        height: 80px; /* A reasonably tall target area */
        background-color: rgba(128, 128, 128, 0.2); /* Very faint background to lift it off the page */
        border-radius: 6px;
        /* Create a "grip" pattern with two vertical bars using gradients */
        background-image:
            linear-gradient(var(--bs-secondary-color), var(--bs-secondary-color)),
            linear-gradient(var(--bs-secondary-color), var(--bs-secondary-color));
        background-repeat: no-repeat;
        background-size: 2px 40px; /* width and height of each bar */
        background-position: 6px center, 12px center; /* Position the two bars */
    }
    #resize-handle.touch-active #touch-resize-grabber {
        display: block;
    }
}

/* Add this class for fullscreen portrait mode */
#ai-chat-panel.fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%; /* Use 100% instead of 100vw to avoid potential horizontal scroll issues */
    height: 100dvh; /* Use dynamic viewport height to fill the screen on mobile/tablet */
    z-index: 2000;
    max-width: none;
}

/* Control the padding and max-width of the fluid container */
.content-padding {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    max-width: 900px; /* Optional: prevent it from becoming too wide on very large monitors */
    margin-left: auto;
    margin-right: auto;
}

/* --- Back to Top Button --- */
#back-to-top-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none; /* Hidden by default */
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    z-index: 1030; /* Below offcanvas/modals but above content */
    /* Force equal width and height to make it a perfect circle */    
    width: 40px;
    height: 40px;
    padding: 0;
}

#back-to-top-btn.show {
    display: flex; /* Only show as flex when the 'show' class is present */
    align-items: center;
    justify-content: center;
    opacity: 0.3; /* Make it slightly transparent by default */
}

#back-to-top-btn:hover {
    opacity: 1; /* Become fully opaque on hover */
}

/* On portrait devices, move the button up to avoid overlapping browser UI */
@media (orientation: portrait) {
    #back-to-top-btn {
        bottom: 75px;
    }
}

/* Class to disable text selection */
.text-selection-disabled {
    -webkit-user-select: none; /* For Safari */
    user-select: none;
}

/* --- Sidebar Item Transition --- */
.offcanvas .list-group-item {
    /* Add a smooth transition for background and border color changes */
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

/* --- Sidebar Active Item Color --- */
/* This rule overrides Bootstrap's default blue background for the active item. */
#sidebar .list-group-item.active {
    background-color: var(--bs-primary-bg-subtle); /* A subtle, theme-aware background color */
    color: var(--bs-emphasis-color); /* Ensure text is readable */
    border-color: var(--bs-primary-border-subtle);
    /*border-left: 4px solid var(--bs-primary);*/ /* Add a highlight bar on the left */
    padding-left: calc(1rem - 2px); /* Adjust padding to account for the new border */
}


/* --- Outline Item Decorative Border --- */
#outline-panel .list-group-item {
    border-left: 2px solid var(--bs-border-color-translucent);
    transition: border-left-width 0.2s ease-in-out, border-left-color 0.2s ease-in-out;
}

#outline-panel .list-group-item:hover {
    border-left-width: 4px;
    border-left-color: var(--bs-primary);
}

/* --- Accordion Transition Speed --- */
/*
 * Override Bootstrap's default transition duration for the collapse component.
 * The default is 0.35s, which can feel slow. 0.2s provides a snappier feel.
 */
.accordion-collapse.collapsing {
    transition-duration: 0.2s;
}
/* --- Header Icon Buttons (e.g., Expand/Collapse All) --- */
.header-icon-btn, .btn, .btn-icon, .btn-close, .accordion-button, .list-group-item-action, #resize-handle {
    /*
     * Prevents the default "double-tap to zoom" behavior on touch devices.
     * This makes buttons and interactive elements feel more responsive and native,
     * avoiding accidental zooms when a user taps quickly.
     */
    touch-action: manipulation;
}

.header-icon-btn {
    background: none;
    border: none;
    padding: 0.25rem;
    font-size: 1.2rem; /* Make icon slightly larger */
    color: var(--bs-secondary-color); /* Use a subtle color */
    transition: color 0.2s ease-in-out;
}
.header-icon-btn:hover {
    color: var(--bs-primary-text-emphasis); /* Change color on hover */
}

/* --- Generic Icon Button --- */
.btn-icon {
    background: none;
    border: none;
    padding: 0.25rem 0.5rem;
    font-size: 1.1rem;
    color: var(--bs-secondary-color);
    transition: color 0.2s ease-in-out;
    line-height: 1; /* Ensures icon is centered vertically */
}

/* --- GSAP Loader --- */
.loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(var(--bs-body-bg-rgb), 1); /* Use theme color for dimming */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.loader-box {
    padding: 2rem 3rem;
    background-color: var(--bs-body-bg);
    border-radius: 0.75rem;
    box-shadow: var(--loader-shadow, 0 15px 35px rgba(0, 0, 0, 0.15), 0 5px 15px rgba(0, 0, 0, 0.1)); /* Themed shadow */
    border: 1px solid var(--bs-border-color-translucent);
    position: relative; /* Required for the pattern pseudo-element */
    overflow: hidden; /* Ensures the pattern respects the border-radius */
}

@keyframes pattern-scroll {
    from { transform: translate(0, 0); }
    to { transform: translate(-50%, -50%); }
}

.loader-content {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 4rem;
    font-weight: bold;
    color: var(--loader-text-color, #9D3832); /* Themed text color */
    display: flex;
    overflow: hidden;
    position: relative; /* Ensure text appears above the pattern */
    z-index: 1;
}

/* --- Loader Theme Variables --- */
:root {
    --loader-text-color: #9D3832;
    --loader-shadow: 0 15px 35px rgba(0, 0, 0, 0.15), 0 5px 15px rgba(0, 0, 0, 0.1);
}
[data-bs-theme="dark"] {
    --loader-text-color: #e8590f; /* A brighter orange for dark mode */
    --loader-shadow: 0 15px 35px rgba(0, 0, 0, 0.25), 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* --- Navbar Title Wrapping --- */
.navbar > .container-fluid {
    flex-wrap: nowrap; /* Prevent left/right groups from wrapping */
    align-items: center; /* Align items to the top */
}

.navbar-brand {
    white-space: normal; /* Allow text to wrap */
    word-break: break-word; /* Break long words */
}

/* Target the left-side group of the navbar */
.navbar .container-fluid > .d-flex:first-child {
    flex-shrink: 0; /* Prevent this group from shrinking */
        align-items: center !important; /* Align items within this group to the top, overriding Bootstrap utility */
    }
    
    /* --- Responsive Tables --- */
    #content-blocks .table-responsive {
        overflow-x: auto;
    }