/* ==========================================================================
   Layout melayang: sidebar, topbar, footer terpisah dari tepi layar.
   Aktif bila <body data-float="1"> (diset applyTheme untuk tema mono & glass).
   Warna border/latar mengikuti variabel --dk-* tema yang aktif.
   ========================================================================== */

body[data-float] {
    --float-gap: 12px;
    --float-radius: 16px;
    --float-sidebar-w: 250px;
    --float-shadow: 0 8px 24px rgba(0, 0, 0, .45);
    --float-border: var(--dk-border);
}

@media (min-width: 992px) {
    body[data-float]:not(.spreadsheet-full-mode) .vertical-menu {
        top: var(--float-gap) !important;
        bottom: var(--float-gap) !important;
        left: var(--float-gap) !important;
        /* sidebar_new memaksa height:100vh saat mode kecil */
        height: auto !important;
        border: 1px solid var(--float-border) !important;
        border-radius: var(--float-radius);
        box-shadow: var(--float-shadow);
    }

    /* Header logo sidebar = position:fixed lebar 255px (bawaan template).
       .vertical-menu punya transform (head-css), jadi acuan posisi fixed-nya
       adalah sidebar itu sendiri: tempel ke pojok kiri-atas sidebar, selebar sidebar. */
    body[data-float]:not(.spreadsheet-full-mode) .vertical-menu .navbar-brand-box {
        top: 0;
        left: 0;
        width: 100% !important;
        border-radius: calc(var(--float-radius) - 1px) calc(var(--float-radius) - 1px) 0 0;
        box-shadow: none;
    }

    body[data-float]:not(.spreadsheet-full-mode) .vertical-menu .vertical-menu-btn {
        right: 4px;
    }

    /* Topbar */
    body[data-float] #page-topbar {
        top: var(--float-gap);
        right: var(--float-gap);
        border: 1px solid var(--float-border);
        border-radius: var(--float-radius);
        box-shadow: var(--float-shadow);
    }

    body[data-float]:not([data-sidebar-size=sm]):not(.spreadsheet-full-mode) #page-topbar {
        left: calc(var(--float-sidebar-w) + var(--float-gap) * 2) !important;
    }

    body[data-float][data-sidebar-size=sm]:not(.spreadsheet-full-mode) #page-topbar {
        left: calc(70px + var(--float-gap) * 2) !important;
    }

    body[data-float].spreadsheet-full-mode #page-topbar {
        left: var(--float-gap) !important;
        width: auto !important;
    }

    /* Konten */
    body[data-float]:not([data-sidebar-size=sm]):not(.spreadsheet-full-mode) .main-content {
        margin-left: calc(var(--float-sidebar-w) + var(--float-gap)) !important;
    }

    body[data-float][data-sidebar-size=sm]:not(.spreadsheet-full-mode) .main-content {
        margin-left: calc(70px + var(--float-gap)) !important;
    }

    body[data-float] .page-content {
        padding-top: calc(70px + var(--float-gap) + 20px);
        padding-bottom: calc(60px + var(--float-gap) * 2 + 8px);
        padding-right: var(--float-gap);
    }

    /* Footer */
    body[data-float] .footer {
        bottom: var(--float-gap);
        right: var(--float-gap);
        border: 1px solid var(--float-border);
        border-radius: var(--float-radius);
        box-shadow: var(--float-shadow);
    }

    body[data-float]:not([data-sidebar-size=sm]):not(.spreadsheet-full-mode) .footer {
        left: calc(var(--float-sidebar-w) + var(--float-gap) * 2) !important;
    }

    body[data-float][data-sidebar-size=sm]:not(.spreadsheet-full-mode) .footer {
        left: calc(70px + var(--float-gap) * 2) !important;
    }

    body[data-float].spreadsheet-full-mode .footer {
        left: var(--float-gap) !important;
        width: auto !important;
    }
}

/* Mobile: sidebar tetap off-canvas, topbar & footer tetap melayang */
@media (max-width: 991.98px) {
    body[data-float] #page-topbar {
        top: 8px;
        left: 8px;
        right: 8px;
        border: 1px solid var(--float-border);
        border-radius: 14px;
        box-shadow: var(--float-shadow);
    }

    body[data-float] .page-content {
        padding-top: calc(70px + 8px + 16px);
        padding-bottom: calc(60px + 24px);
    }

    body[data-float] .footer {
        left: 8px !important;
        right: 8px;
        bottom: 8px;
        border-radius: 14px;
        border: 1px solid var(--float-border);
    }
}

/* --------------------------------------------------------------------------
   Bentuk item menu sidebar: membulat dengan jarak dari tepi
   -------------------------------------------------------------------------- */
body[data-float]:not([data-sidebar-size=sm]) #sidebar-menu > ul > li > a {
    margin: 2px 10px;
    border-radius: 10px;
}

body[data-float]:not([data-sidebar-size=sm]) #sidebar-menu ul.sub-menu {
    margin: 2px 10px;
    border-radius: 10px;
}

body[data-float]:not([data-sidebar-size=sm]) #sidebar-menu ul.sub-menu ul.sub-menu {
    margin: 0;
}

body[data-float]:not([data-sidebar-size=sm]) #sidebar-menu ul.sub-menu li a {
    border-radius: 8px;
}