/**
 * App fullscreen chrome — full-width topbar, menu, and page content.
 * Enabled via html[data-app-fullscreen="1"] (db_system_apps.app_fullscreen).
 *
 * --d4-fullscreen-inset matches typical app sidebar padding (e.g. Drive .d4-drive-sidebar)
 * so horizontal menu items line up with sidebar content (Naloži, etc.).
 */

html[data-app-fullscreen="1"] {
    --d4-fullscreen-logo-inset: 0.85rem;
    --d4-fullscreen-inset: 0.85rem;
    --d4-fullscreen-nav-nudge: 33px;
}

html[data-app-fullscreen="1"] #page-topbar {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: none !important;
}

html[data-app-fullscreen="1"] #page-topbar .layout-width,
html[data-app-fullscreen="1"] #page-topbar .container-fluid {
    max-width: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

html[data-app-fullscreen="1"] #page-topbar .navbar-header {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 0.35rem 0 var(--d4-fullscreen-logo-inset) !important;
}

html[data-app-fullscreen="1"] #page-topbar .horizontal-logo {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
}

html[data-app-fullscreen="1"] #page-topbar .horizontal-logo .logo,
html[data-app-fullscreen="1"] #page-topbar .horizontal-logo .logo-sm,
html[data-app-fullscreen="1"] #page-topbar .horizontal-logo .logo-lg {
    padding-left: 0 !important;
    margin-left: 0 !important;
}

html[data-app-fullscreen="1"] #page-topbar .app-title-icon {
    margin-left: 0 !important;
}

html[data-app-fullscreen="1"] #page-topbar .top-bar-widget {
    margin-right: 0 !important;
    padding-right: 0 !important;
}

html[data-app-fullscreen="1"] .app-menu.navbar-menu {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: none !important;
}

html[data-app-fullscreen="1"] .app-menu.navbar-menu #scrollbar {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
}

html[data-app-fullscreen="1"] .app-menu.navbar-menu .container-fluid,
html[data-layout="horizontal"][data-layout-width="boxed"][data-app-fullscreen="1"] .app-menu.navbar-menu .container-fluid {
    max-width: none !important;
    width: 100% !important;
    padding-left: var(--d4-fullscreen-inset) !important;
    padding-right: 0.35rem !important;
    margin: 0 !important;
}

html[data-app-fullscreen="1"] ul#navbar-nav {
    margin-left: calc(-1 * var(--d4-fullscreen-nav-nudge));
}

/* First item sits near the left edge after the nudge — keep its dropdown in view */
html[data-app-fullscreen="1"] ul#navbar-nav > .nav-item:first-child > .menu-dropdown:not(.is-menu-fixed):not(.is-menu-ported) {
    left: var(--d4-fullscreen-nav-nudge) !important;
}

/* Compact header: menu lives under logo, not at viewport edge — keep dropdown flush with trigger */
html[data-app-fullscreen="1"][data-header-layout="compact"].is-compact-menu-in-header ul#navbar-nav > .nav-item:first-child > .menu-dropdown:not(.is-menu-fixed):not(.is-menu-ported) {
    left: 0 !important;
}

html[data-app-fullscreen="1"] .page-content > .d4-content-data,
html[data-app-fullscreen="1"] .page-content > .container-fluid,
html[data-app-fullscreen="1"] .page-content > .container-fluid.d4-content-data,
html[data-layout="horizontal"][data-layout-width="boxed"][data-app-fullscreen="1"] .page-content > .container-fluid {
    max-width: none !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}