/* Theme CSS: combined sidebar + topbar styles */

/* Sidebar styles */
.left-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 240px;
    height: 100%;
    background: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
    padding: 12px 10px 18px 10px;
    overflow-y: auto;
    transition: width .18s ease, left .18s ease;
    z-index: 800;
}

/* Hide sidebar initially to avoid flash; reveal when body.content-ready is present */
.left-sidebar {
    opacity: 0;
    transform: translateX(-6px);
    visibility: hidden;
    transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
}
body.content-ready .left-sidebar {
    opacity: 1;
    transform: none;
    visibility: visible;
    transition-delay: 0s;
}
.left-sidebar .sidebar-header { padding: 6px 6px; }
.left-sidebar .sidebar-logo { height: 30px; width:auto; }
.left-sidebar .sidebar-title { font-weight:700; margin-left:8px; color:#153b68; }
.left-sidebar .sidebar-search { padding-top:6px; padding-bottom:6px; }
.left-sidebar .nav-link {
    color: #3b4a5a;
    padding: 8px 10px;
    border-radius:6px;
    display: grid;
    grid-template-columns: 28px 1fr;
    column-gap: 12px;
    align-items: center;
}
.left-sidebar .nav-link i {
    justify-self: start;
    font-size: 18px;
    line-height: 1;
}
.left-sidebar .nav-link .sidebar-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    justify-self: start;
    display: inline-block;
    text-align: center;
    font-size: 18px;
    line-height: 24px;
}
.left-sidebar .nav-link .label {
    display: block;
    margin: 0;
    vertical-align: middle;
}
.left-sidebar .nav-link:hover { background: rgba(21,59,104,0.06); color: #153b68; text-decoration:none; }
.left-sidebar .nav-link.active { background: rgba(21,59,104,0.12); color:#153b68; }
.left-sidebar .sidebar-footer { padding:8px 6px; color:#6c757d; }

/* Collapsed (mini) sidebar */
.left-sidebar.collapsed { width: 72px; }
.left-sidebar.collapsed .sidebar-title { display:none; }
.left-sidebar.collapsed .sidebar-search { display:none; }
.left-sidebar.collapsed .nav-link { justify-items: center; grid-template-columns: 1fr; }
.left-sidebar.collapsed .nav-link .label { display:none; }

/* Mobile behaviour: off-canvas sidebar (hidden by default), opened by toggle */
@media (max-width: 991.98px) {
    .topbar::before{ display: none; }

    .left-sidebar {
        position: fixed !important;
        top: 56px !important; /* below topbar */
        left: -260px !important; /* hide off-canvas */
        width: 230px !important;
        height: calc(100% - 56px) !important;
        transition: left .22s ease !important;
        box-shadow: 0 4px 18px rgba(0,0,0,0.12);
        z-index: 900 !important;
    }

    .left-sidebar.open { left: 0 !important; }

    /* allow collapsed state even on mobile: shrink width and keep visible */
    .left-sidebar.collapsed {
        width: 72px !important;
        left: 0 !important; /* keep it on-screen */
        overflow: hidden;
    }
    .left-sidebar.collapsed .nav-link .label { display: none; }

    /* content should occupy full width when sidebar hidden */
    .content-with-sidebar, .main-content > .container-fluid {
        margin-left: 0 !important;
        max-width: 100% !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}

/* Off-canvas fallback (if needed) */
@media (max-width: 991.98px) {
    .left-sidebar.open { left: 0 !important; z-index: 900 !important; }
}

/* Overlay inserted by JS when sidebar is open */
.sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 850;
}

/* Topbar styles */
.topbar {
    position: fixed;
    top: 0;
    left: 0; /* updated dynamically by JS when sidebar present */
    right: 0;
    height: 56px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    z-index: 1000;
    background: #153b68;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.topbar::before{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(0,0,0,0.08);
    z-index: 1001;
}
.topbar .brand { display:flex; align-items:center; gap:10px; color:#fff; }
.topbar .brand img { height:28px; width:auto; }
.topbar .title { font-weight:600; font-size:16px; margin:0; display:flex; align-items:center; gap:8px; }
/* center the title horizontally in the topbar */
.topbar .title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
.topbar .title .title-logo { height:28px; width:auto; vertical-align:middle; margin-right:8px; }

@media (max-width: 576px) {
    .topbar .title .title-logo { height:20px; margin-right:6px; }
}
.main-content { padding-top: 56px; transition: padding-top 0.12s ease; }

/* Start hidden while loader is visible, then fade in */
.main-content { opacity: 0; transition: opacity .28s ease-in-out, padding-top 0.12s ease; }
body.content-ready .main-content { opacity: 1; }

/* small tweaks for mobile topbar spacing */
@media (max-width: 576px) {
    .topbar .title { font-size:14px; }
    .topbar .brand img { height:24px; }
}

/* Responsive Tableau defaults */
.tableauPlaceholder { width: 100% !important; max-width: 100% !important; margin: 0 auto; overflow: hidden; }
.tableauPlaceholder .tableauViz, .tableauPlaceholder object, .tableauPlaceholder iframe { width:100% !important; height:auto !important; }

/* --- Styles moved from layouts/app.blade.php <style> block --- */
/* Ensure content area is at least full viewport height */
.main-content, .content-with-sidebar, .main-content > .container-fluid {
    min-height: calc(100vh - 56px);
}
/* Content sizing when sidebar present */
.content-with-sidebar, .main-content > .container-fluid {
    max-width: calc(100% - 250px);
    margin-left: 250px; /* match sidebar width + gap */
}

/* Reduce default padding for content and cards to make content denser */
.main-content > .container-fluid {
    padding-left: 8px !important;
    padding-right: 8px !important;
}
.content-with-sidebar {
    padding-left: 8px !important;
    padding-right: 8px !important;
}
.card { margin-bottom: 12px; }
.card-body { padding: 12px 14px !important; }

/* Make Tableau embed responsive without changing its embed code
   and increase its minimum height to better fill the content area. */
.tableauPlaceholder { width: 100% !important; max-width: 100% !important; margin: 0 auto; overflow: hidden; min-height: calc(100vh - 40px) !important; }
.tableauPlaceholder .tableauViz,
.tableauPlaceholder object,
.tableauPlaceholder iframe { width: 100% !important; max-width: 100% !important; min-height: calc(100vh - 56px - 40px) !important; height: auto !important; }
.card-body > .tableauPlaceholder { display: block; max-width: 100% !important; }
.tableau-wrapper { padding-left: 4px !important; padding-right: 4px !important; }
.tableau-wrapper .tableauPlaceholder { margin-left: 0 !important; margin-right: 0 !important; }

/* Search input in topbar */
.topbar .form-control.form-control-sm { width: 180px; opacity: .95; }

/* Open survey button styling moved from inline */
#openSurvey { background-color: #153b68; color: #fff; }

/* End moved styles */

/* Full page loader to avoid layout shifting while resources load */
#page-loader {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    z-index: 2000;
}
#page-loader .spinner {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 5px solid rgba(0,0,0,0.08);
    border-top-color: #153b68;
    animation: loader-spin 1s linear infinite;
}
@keyframes loader-spin { to { transform: rotate(360deg); } }

/* small loader for tiny screens */
@media (max-width: 576px) {
    #page-loader .spinner { width: 36px; height: 36px; border-width:4px; }
}