/* =============================================
   J1mmy Responsive — Groep 2
   Breakpoints: 639px (mobiel), 1023px (tablet)
   Laden NA alle theme-CSS (app-material etc.)
   ============================================= */

/* --- MOBIEL (max 639px) --- */

@media (max-width: 639px) {

  .grid-page {
    grid-template-columns: 1fr !important;
  }

  .nav-bg-top {
    grid-column: 1 !important;
  }

  .hamburger-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #ffffff;
    padding: 0.75rem;
    min-width: 2.75rem;
    min-height: 2.75rem;
    margin-right: 0.5rem;
  }

  .sidebar-wrapper {
    position: fixed !important;
    top: 4rem;
    left: 0;
    width: 15rem;
    height: calc(100dvh - 4rem);
    z-index: 1000;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    background-color: #18222C;
    overflow: hidden;
    pointer-events: none;
  }

  .sidebar-wrapper.sidebar-open {
    transform: translateX(0);
    pointer-events: auto;
  }

  .sidebar-wrapper .p-navmenu {
    position: relative !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow-y: auto !important;
  }

  .sidebar-backdrop {
    display: none;
    position: fixed;
    top: 4rem;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
  }

  .sidebar-backdrop.sidebar-backdrop-visible {
    display: block;
  }

  .nav-bg-top form {
    display: none !important;
  }

  /* Vignet (favicon) links van breadcrumb verbergen */
  .nav-bg-top .rz-panel-content nav > .flex:first-of-type {
    display: none !important;
  }

  /* Fallback — vorige selector triggert niet als Radzen geen .rz-panel-content-
     wrapper zet, en :first-of-type faalt sowieso omdat de hamburger-toggle ook
     een div is (staat ervóór in DOM, "verstoort" first-of-type). Deze pakt
     de img in de linker-flex-groep (class="flex" zonder items-center) — dus
     de vignet-img — zonder de rechter-flex-groep te raken (class="flex
     items-center gap-2"). Onafhankelijk van src (favicon-file of base64). */
  .nav-bg-top nav > div.flex:not(.items-center) img {
    display: none !important;
  }

  /* Breadcrumb verbergen op mobiel (overlapt het gecentreerde logo) */
  .nav-bg-top nav > div.flex:not(.items-center) > div {
    display: none !important;
  }

  /* Bedrijfskennis-tabel horizontaal scrollbaar op mobiel */
  .bk-table-shell {
    overflow-x: auto !important;
  }

  /* --- WERKPLEK MOBIEL --- */

  /* Grid naar single column, alleen feed zichtbaar */
  .werkplek-root {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto 1fr !important;
  }

  /* Rail: standaard verborgen */
  .werkplek-col--rail {
    display: none !important;
  }

  /* Rail: zichtbaar wanneer filter-toggle actief */
  .werkplek-col--rail.werkplek-rail-open {
    display: flex !important;
  }

  /* Filter-toggle zichtbaar */
  .werkplek-filter-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #6b7280;
    padding: 0.25rem;
    font-size: 1.5rem;
  }

  /* Detail-panel: fixed overlay, off-screen rechts */
  .werkplek-detail-col {
    position: fixed !important;
    top: 4rem;
    right: 0;
    width: 100%;
    height: calc(100dvh - 4rem);
    z-index: 900;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    background-color: #ffffff;
    overflow-y: auto;
    pointer-events: none;
  }

  /* Detail-panel: slide in wanneer item geselecteerd */
  .werkplek-detail-col.werkplek-detail-open {
    transform: translateX(0);
    pointer-events: auto;
  }

  /* Terug-pijl zichtbaar */
  .werkplek-detail-back {
    display: flex !important;
    align-items: center;
    cursor: pointer;
    color: #374151;
    padding: 0.5rem;
    font-size: 1.5rem;
  }

  /* Top nav: content verticaal centreren */
  .nav-bg-top {
    justify-content: center !important;
  }

  /* J1mmyOverlay: full hoogte tot onder de nav-bar */
  .j1mmy-overlay {
    top: 4rem !important;
    height: auto !important;
  }

  /* Versienummer verbergen in mobiel sidebar-menu */
  .sidebar-wrapper .p-navmenu .rz-navigation-item-text-version,
  .sidebar-wrapper .p-navmenu [class*="version"] {
    display: none !important;
  }

  /* Disclaimer tweede zin verbergen op mobiel */
  .j1mmy-bar-disclaimer-extra {
    display: none !important;
  }

  /* --- DASHBOARD MOBIEL --- */

  /* Snelknoppen: 2x2 grid i.p.v. één rij */
  .j1mmy-dashboard .rz-display-flex.gap-6 {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }

  .j1mmy-dashboard .rz-display-flex.gap-6 > .rz-button {
    flex: 1 1 calc(50% - 0.5rem) !important;
    min-width: 0 !important;
  }

  /* Dashboard kaarten: full width, geen 2-koloms layout */
  .dashboard-item {
    min-width: 100% !important;
  }

  /* Tabellen: horizontaal scrollbaar */
  .dashboard-item .rz-datatable-wrapper,
  .dashboard-item table {
    overflow-x: auto !important;
    display: block !important;
  }

  /* --- VERKOOP MOBIEL --- */

  /* Toggle "Met inhoudsindeling" verbergen */
  .frontdesk-header .rz-switch {
    display: none !important;
  }

  /* Titel compacter: verberg de H6 titel-tekst,
     knoppen spreken voor zich */
  .frontdesk-header > section:first-child > h6 {
    display: none !important;
  }

  /* Save-knoppen wrappen en volle breedte */
  .frontdesk-header .flex.gap-2.justify-center {
    flex-wrap: wrap !important;
  }

  .frontdesk-header .flex.gap-2.justify-center > div {
    width: 100% !important;
    display: flex !important;
    gap: 0.25rem !important;
  }

  /* Totalen-balk: font kleiner voor leesbaarheid */
  .frontdesk-footer .p-detail-item {
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 0 !important;
  }

  .frontdesk-footer .p-detail-item .rz-text-caption {
    font-size: 0.6rem !important;
  }

  .frontdesk-footer .p-detail-item .rz-text-body2 {
    font-size: 0.75rem !important;
  }

  /* Horizontaal scrollen voorkomen */
  .grid-item.frontdesk {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* Ruimte boven save-knoppen */
  .frontdesk-header {
    padding-top: 0.5rem !important;
  }

  /* Totalen-footer: volle breedte vanaf links */
  .frontdesk-footer {
    left: 0 !important;
    width: 100% !important;
    right: 0 !important;
  }

  /* Header op mobiel: flex zodat toggle inline met knoppen staat */
  .frontdesk-header {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
  }

  /* Timeline toggle: compact icoon, past in de knoppenrij */
  .timeline-toggle-btn {
    margin: 0 !important;
    padding: 0.25rem !important;
    order: 10 !important;
  }

  /* Tijdlijn-aside: full-screen overlay van rechts op mobiel.
     TimeLineSideBar.razor rendert een classless <aside> die als peer
     van PViewLayout staat (dus BUITEN .frontdesk-scope). Attribute-match
     op de border-left + primary-color-signatuur uit de inline style.
     Op mobiel wordt de aside een overlay ipv een tweede grid-kolom;
     open/dicht via de timeline-toggle in de header. */
  aside[style*="border-left"][style*="var(--rz-primary)"] {
    display: block !important;
    position: fixed !important;
    top: 4rem;
    right: 0;
    width: 85% !important;
    height: calc(100dvh - 4rem) !important;
    min-height: auto !important;
    z-index: 900 !important;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    background-color: #ffffff;
    overflow-y: auto;
    border-left: none !important;
  }

  /* Tijdlijn backdrop */
  .timeline-backdrop {
    display: none;
    position: fixed;
    top: 4rem;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 899;
  }

  .timeline-backdrop.timeline-backdrop-visible {
    display: block;
  }

  /* Sluitknop tijdlijn */
  .timeline-close-btn {
    display: flex !important;
    justify-content: flex-end;
    padding: 0.75rem 1rem;
    cursor: pointer;
    font-size: 1.5rem;
    color: #374151;
  }

  /* Alle children in tijdlijn-aside: volle breedte */
  aside[style*="border-left"][style*="var(--rz-primary)"] * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  aside[style*="border-left"][style*="var(--rz-primary)"] [style*="width"] {
    width: 100% !important;
  }

  /* Tijdlijn-editor: volle breedte van aside, niet breder */
  aside[style*="border-left"][style*="var(--rz-primary)"] .p-popup > div {
    left: 0 !important;
    right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Tijdlijn optionsbalk: zelfde rechter-padding als close-btn */
  aside[style*="border-left"][style*="var(--rz-primary)"] .flex.justify-between.items-center.ab {
    padding-right: 1rem !important;
  }

  /* Tijdlijn open: slide in wanneer inline width begint met "2"
     (dus 20rem = maxWidth). Bij width=0rem matcht deze niet en
     blijft de aside off-screen (transform: translateX(100%)). */
  aside[style*="border-left"][style*="var(--rz-primary)"][style*="width: 2"] {
    transform: translateX(0) !important;
  }

  /* Content neemt volle breedte (geen tijdlijn-ruimte) */
  .grid-item.frontdesk > section {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Header toolbar: wrap knoppen */
  .frontdesk-header > section:last-child {
    flex-wrap: wrap !important;
    gap: 0.25rem !important;
  }

  /* Radzen dialogen: bijna volle breedte op mobiel */
  .rz-dialog {
    width: calc(100vw - 2rem) !important;
    max-width: calc(100vw - 2rem) !important;
    min-width: auto !important;
    margin: 0 1rem !important;
  }

  /* Datepicker popups: niet breder dan viewport */
  .rz-datepicker-popup {
    max-width: calc(100vw - 1rem) !important;
  }

  /* Parent containers: max-width voorkomen overflow */
  main > section.grid {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  /* Verzenden-dialog header: knoppen wrappen */
  .rz-dialog .rz-dialog-titlebar {
    flex-wrap: wrap !important;
    gap: 0.25rem !important;
  }

  .rz-dialog .rz-dialog-titlebar .rz-dialog-title {
    width: 100% !important;
    margin-bottom: 0.25rem !important;
  }

  /* Root grid: override inline width die sidebar-ruimte aftrekt */
  .grid[style*="grid-template-columns"][style*="100vw"] {
    width: 100% !important;
    max-width: 100vw !important;
  }

  /* Save-knoppen: iets kleiner font */
  .frontdesk-header .rz-button {
    font-size: 0.8rem !important;
  }

  /* --- VERKENNER MOBIEL --- */

  /* Grid naar single column */
  .verkenner-root {
    grid-template-columns: 1fr !important;
  }

  /* Filters: standaard verborgen */
  .verkenner-filters {
    display: none !important;
  }

  /* Filters: zichtbaar bij toggle */
  .verkenner-filters.verkenner-filters-open {
    display: block !important;
  }

  /* Filter-toggle: zichtbaar + absoluut links gepositioneerd in de header */
  .verkenner-filter-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #6b7280;
    padding: 0.25rem;
    font-size: 1.5rem;
    position: absolute !important;
    left: 0.5rem !important;
  }

  /* "Met financiële gegevens" verbergen op mobiel */
  .verkenner-financial-toggle {
    display: none !important;
  }

  /* Resultaten-kolom: forceer naar eerste kolom */
  .verkenner-root > div:not(.verkenner-filters) {
    grid-column: 1 !important;
  }

  /* Accordion: collapse-pijl verbergen */
  .rz-accordion:has(.verkenner-root) .rz-accordion-toggle-icon {
    display: none !important;
  }

  /* Accordion header: klik uitschakelen op collapse-button,
     maar child-elementen weer aanzetten */
  .rz-accordion:has(.verkenner-root) > .rz-accordion-header > button {
    pointer-events: none !important;
  }

  .rz-accordion:has(.verkenner-root) > .rz-accordion-header > button > header {
    pointer-events: auto !important;
  }

  /* Filter-toggle helemaal links positioneren */
  .rz-accordion:has(.verkenner-root) .rz-accordion-header header {
    justify-content: flex-end !important;
  }

  .rz-accordion:has(.verkenner-root) .rz-accordion-header header {
    position: relative !important;
  }

  /* Tune-icoon (eerste flex-div in header) verbergen */
  .rz-accordion:has(.verkenner-root) .rz-accordion-header header > div.flex:first-child {
    display: none !important;
  }

  /* --- INSTELLINGEN MOBIEL --- */

  /* Settings layout: single column, volle breedte */
  .settings-layout {
    grid-template-columns: 1fr !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  /* Settings nav: standaard dicht */
  .settings-nav .p-navmenu-settings {
    display: none !important;
  }

  .settings-nav.settings-nav-open .p-navmenu-settings {
    display: block !important;
  }

  /* Current-header: clickable bar */
  .settings-nav-current {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background-color: #f3f4f6;
    border-bottom: 1px solid #e5e7eb;
    cursor: pointer;
    font-weight: 600;
  }

  /* Content volle breedte */
  .settings-content {
    grid-column: 1 !important;
    max-width: 100vw !important;
  }

  /* Content secties: single column (was 1fr 1fr) */
  .settings-content section[style*="1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  .settings-content .p-navmenu-administration,
  .settings-content .p-navmenu-environment,
  .settings-content .p-navmenu-side {
    display: flex !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  /* Root grid width override (sidebar-aftrek weg) */
  .settings-layout + div,
  .settings-content > div[style*="100vh"] {
    width: 100% !important;
    max-width: 100vw !important;
  }

  /* Scroll-hint wrapper: overlay rechts, alleen actief bij scrollbare content */
  .scroll-hint-wrapper {
    position: relative !important;
  }

  .scroll-hint-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 2.5rem;
    background: linear-gradient(to right, transparent, rgba(243, 244, 246, 0.95));
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
  }

  .scroll-hint-wrapper.scroll-hint-active::after {
    opacity: 1;
  }

}

/* --- TABLET + DESKTOP (min 640px) --- */

@media (min-width: 640px) {

  .hamburger-toggle {
    display: none !important;
  }

  .sidebar-backdrop {
    display: none !important;
  }

  /* Filter-toggle verborgen op desktop */
  .werkplek-filter-toggle {
    display: none !important;
  }

  /* Terug-pijl verborgen op desktop */
  .werkplek-detail-back {
    display: none !important;
  }

  /* Detail-col: geen fixed positioning op desktop */
  .werkplek-detail-col {
    position: static !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  /* Tijdlijn-backdrop uit op desktop (aside is dan gewoon 2e grid-kolom) */
  .timeline-backdrop {
    display: none !important;
  }

  /* Sluitknop tijdlijn uit op desktop */
  .timeline-close-btn {
    display: none !important;
  }

  /* Filter-toggle verborgen op desktop */
  .verkenner-filter-toggle {
    display: none !important;
  }

  /* Current-header verborgen op desktop */
  .settings-nav-current {
    display: none !important;
  }
}

/* NavMenu badge-positionering */
.p-navmenu-item-has-badge {
  position: relative !important;
}

.j1mmy-count-badge--navmenu {
  position: absolute !important;
  top: 0.85rem;
  left: 2.25rem;
  font-size: 0.65rem;
  min-width: 1rem;
  height: 1rem;
  padding: 0 0.25rem;
  border-radius: 9999px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  z-index: 1;
}