/* Zijbalk (hoofd-app + instellingen) altijd als uitschuiflade in de native
   Android-app — staand ÉN liggend, in plaats van te wisselen naar een vaste
   balk zodra de liggende breedte >1024px meet.

   GEEN nieuwe lade-logica: dit is een letterlijke kopie van de al werkende
   ≤1024px-regels (styles.css "GSM/TABLET NOODKASSA"-blok en index-main.css'
   twee instellingen-lade-blokken), enkel met de trigger vervangen door de
   `.dp-android-app`-klasse (vroege detectie: js/bootstrap/early-platform.js)
   in plaats van een schermbreedte. Zo blijft browser/desktop-gedrag exact
   ongewijzigd (deze klasse verschijnt daar nooit), en verandert er niets aan
   de bewezen CSS zelf — enkel WANNEER ze geldt.

   Bewust GEEN `(hover:none) and (pointer:coarse)`-conditie: dat werd elders al
   eens geprobeerd en weer teruggedraaid (zie settings.js) omdat een groot
   aanraakscherm-kassastation daardoor ten onrechte ook het gsm-menu kreeg.
   Aanraking zegt iets over hóe je bedient, niets over hoe breed het scherm is
   — vandaar hier specifiek de Android-app-klasse, nooit een touch-check.

   Geladen als LAATSTE stylesheet (na styles.css/index-main.css) én met
   selectors die een extra klasse toevoegen aan het bestaande `html`-element
   (dus minstens gelijke, meestal hogere specificiteit dan het origineel) —
   wint daardoor zowel op brondiepte als op cascade-volgorde over ELK bestaand
   blok, inclusief het brede "vaste rail"-blok voor instellingen
   (index-main.css, @media (min-width:769px), geen bovengrens) dat anders ook
   op een liggende tablet >1024px zou blijven winnen.

   Bij een wijziging aan de brondelen: dezelfde wijziging hier overnemen. */

/* ═══ Hoofd-app-zijbalk — kopie van styles.css "GSM/TABLET NOODKASSA" ═══ */
html.dp-android-app body #mainApp #mainSidebar.sidebar {
    position: fixed !important;
    z-index: 2147482000 !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: auto !important;
    width: var(--dp-msb-w, min(78vw, 230px)) !important;
    min-width: var(--dp-msb-w, min(78vw, 230px)) !important;
    max-width: 92vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    padding: 10px 0 18px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border-right: 1px solid var(--border-color) !important;
    border-top: 0 !important;
    border-radius: 0 14px 14px 0 !important;
    box-shadow: 14px 0 38px rgba(0,0,0,.48) !important;
    transform: translateX(-105%) !important;
    transition: transform .22s ease !important;
}

html.dp-android-app body #mainApp #mainSidebar.sidebar.sidebar-open {
    transform: translateX(0) !important;
}

html.dp-android-app body #mainApp #mainSidebar .logo,
html.dp-android-app body #mainApp #mainSidebar > div[style*="padding:4px 10px"],
html.dp-android-app body #mainApp #mainSidebar #sidebarSearchInput,
html.dp-android-app body #mainApp #mainSidebar #sidebarSearchResults {
    display: flex !important;
}

html.dp-android-app body #mainApp #mainSidebar > div[style*="padding:4px 10px"] {
    flex-direction: column !important;
}

html.dp-android-app body #mainApp #sidebarNavScroll {
    display: block !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 4px 8px 12px !important;
    box-sizing: border-box !important;
}

html.dp-android-app body #mainApp #mainSidebar .nav-group {
    display: block !important;
}

html.dp-android-app body #mainApp #mainSidebar .nav-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 46px !important;
    height: auto !important;
    margin: 2px 0 !important;
    padding: 10px 13px !important;
    gap: 11px !important;
    border-left: 3px solid transparent !important;
    border-bottom: 0 !important;
    border-radius: 9px !important;
    text-align: left !important;
    font-size: 13px !important;
    overflow: visible !important;
}

html.dp-android-app body #mainApp #mainSidebar .nav-item span {
    display: inline !important;
    max-width: none !important;
    font-size: 13px !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

html.dp-android-app body #mainApp #mainSidebar .nav-item svg {
    width: 20px !important;
    height: 20px !important;
    flex: 0 0 20px !important;
}

html.dp-android-app body #mainApp #mainSidebar .nav-item.active {
    border-left-color: #d4845c !important;
    border-bottom-color: transparent !important;
    background: rgba(212,132,92,.13) !important;
}

html.dp-android-app body #mainApp #mainSidebar .mobile-sidebar-action-rail .mobile-pos-action:first-child {
    margin-top: 12px !important;
    padding-top: 18px !important;
    border-top: 1px solid var(--border-color) !important;
    border-radius: 0 0 9px 9px !important;
}

html.dp-android-app body #mainApp #sidebarSettingsFixed {
    display: none !important;
}

html.dp-android-app body #mainApp #mobileMenuBtn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 42px !important;
    width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
}

html.dp-android-app body #mainApp #sidebarBackdrop.sidebar-backdrop {
    display: none !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147481999 !important;
    background: rgba(0,0,0,.58) !important;
    backdrop-filter: blur(2px) !important;
}

html.dp-android-app body #mainApp #sidebarBackdrop.sidebar-backdrop.active {
    display: block !important;
}

html.dp-android-app body #mainApp .main-content {
    left: 0 !important;
    bottom: 0 !important;
}

/* ═══ Instellingen-zijbalk — kopie van index-main.css' twee lade-blokken ═══ */
html.dp-android-app #settingsNavBtn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    min-width: 42px !important;
    height: 40px !important;
    padding: 0 10px !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}
html.dp-android-app #settingsModalInner .menu-modal-header { position: relative !important; padding-right: 58px !important; }
html.dp-android-app #settingsModalInner .settings-header-spacer { display: none !important; }
html.dp-android-app #settingsModalInner .menu-modal-title { flex: 1 1 auto !important; text-align: left !important; margin-left: 10px !important; }
html.dp-android-app #settingsModalInner .settings-header-actions { flex: 0 0 auto !important; margin-left: auto !important; }
html.dp-android-app #settingsCloseBtn {
    position: absolute !important; z-index: 8 !important; top: 50% !important; right: 10px !important;
    transform: translateY(-50%) !important; width: 40px !important; height: 40px !important; margin: 0 !important;
}
html.dp-android-app #settingsModalInner .settings-layout { position: relative !important; flex-direction: row !important; }
html.dp-android-app #settingsModalInner .settings-layout > .s-sidebar,
html.dp-android-app #settingsModalInner .s-sidebar {
    position: absolute !important; z-index: 6 !important; inset: 0 auto 0 0 !important;
    width: var(--dp-settings-msb-w, min(310px,84vw)) !important; min-width: var(--dp-settings-msb-w, min(310px,84vw)) !important;
    height: 100% !important; min-height: 0 !important; max-height: none !important;
    display: flex !important; flex-flow: column nowrap !important; align-items: stretch !important;
    justify-content: flex-start !important; gap: 4px !important; padding: 10px !important;
    overflow-x: hidden !important; overflow-y: auto !important;
    border-right: 1px solid var(--border-color) !important; border-bottom: 0 !important;
    background: var(--bg-secondary) !important; box-shadow: 12px 0 28px rgba(0,0,0,.3) !important;
    transform: translateX(-105%) !important; transition: transform .2s ease !important;
}
html.dp-android-app #settingsModalInner.settings-nav-open .settings-layout > .s-sidebar,
html.dp-android-app #settingsModalInner.settings-nav-open .s-sidebar {
    transform: translateX(0) !important;
}
html.dp-android-app #settingsModalInner .settings-layout > .s-sidebar > .settings-tab,
html.dp-android-app #settingsModalInner .settings-layout > .s-sidebar > .s-tab,
html.dp-android-app #settingsModalInner .s-sidebar .settings-tab,
html.dp-android-app #settingsModalInner .s-sidebar .s-tab {
    display: flex !important; align-items: center !important; justify-content: flex-start !important;
    width: 100% !important; min-width: 0 !important; max-width: none !important;
    flex: 0 0 46px !important; height: 46px !important; min-height: 46px !important;
    margin: 0 !important; padding: 10px 12px !important;
    white-space: normal !important; text-align: left !important;
    border-left: 3px solid transparent !important; border-bottom: 0 !important; border-radius: 8px !important;
    scroll-snap-align: none !important; font-size: 13px !important;
}
html.dp-android-app #settingsModalInner .settings-layout > .s-sidebar > .settings-tab span,
html.dp-android-app #settingsModalInner .settings-layout > .s-sidebar > .s-tab span {
    display: block !important; width: 100% !important;
}
html.dp-android-app #settingsNavBackdrop {
    display: none !important;
    position: absolute !important; z-index: 4 !important; inset: 0 !important;
    background: rgba(0,0,0,.48) !important;
}
html.dp-android-app #settingsModalInner.settings-nav-open #settingsNavBackdrop { display: block !important; }
html.dp-android-app #settingsModalInner .settings-layout > .s-content,
html.dp-android-app #settingsModalInner .s-content {
    width: 100% !important; min-width: 0 !important; flex: 1 1 auto !important; padding: 16px !important;
}