:root {

    /* --sidebar-width: 500px; */
    /* --sidebar-expanded-width: 500px; */
    /* --menu-height: 60px; */
    /*  temporary getting body color from modernize templateroot  */
    --modern-bg: #f6f8fb;


/* django sidebar */
--primary: #417690;
    --darker-grey: #264b5d;
    --light-grey: #f8f8f8;
    --sidebar-width: 500px;

}


body 
{ 
    /* display: grid;  */
    grid-template-areas: "nav nav" "side main"; 
    grid-template-rows: 60px 1fr; 
    grid-template-columns: var(--sidebar-width) 1fr;
    height: 100vh; 
    margin: 0; 
    transition: grid-template-columns 0.3s ease;
}
        

/* .top-navbar {

background: var(--fpsys-menu); 
} */

#left-pane {
    grid-area: side;
    /* border-right: 1px solid; */
    /* DO NOT set width: 300px here. Let the grid handle it. */
    overflow: hidden; 

}



.fullscreen-iframe {
            width: 100vw;   /* 100% of the viewport width */
            height: 100vh;  /* 100% of the viewport height */
            border: none;   /* Removes the default border */
            display: block; /* Removes default inline bottom spacing */
        }


#right-content {
    grid-area: main;
    position: relative; /* Crucial: This clamps absolute children to this pane only */
    min-height: 200px;  /* Ensures there's always space for a spinner if the pane is empty */
}


/* When HTMX is actively fetching data for this container, fade the inner content slightly */
#right-content.htmx-request table {
    opacity: 0.4;
    pointer-events: none; /* Stops the user from clicking things while loading */
    transition: opacity 0.2s ease-in-out;
}


.scrollable-container {

    overflow-y: auto;   /* Shows scrollbar only when needed */
    overflow: visible; 
    border: 1px solid #dee2e6; /* Optional: adds a border to see the box */
}


body {
    margin: 0;
    font-family: "Roboto", "Lucida Grande", Verdana, Arial, sans-serif;
}

#container {
    display: flex;
    min-height: 100vh;
}

/* Sidebar Styles */
#nav-sidebar {
    width: var(--sidebar-width);
    background: var(--light-grey);
    /* border-right: 1px solid #ccc; */
    transition: margin-left 0.3s ease;
    z-index: 11;
    padding-left: 6px;
    padding-right: 6px;
}

/* When collapsed, slide it out of view */
body.main-menu-collapsed #nav-sidebar {
    margin-left: calc(var(--sidebar-width) * -1);
}

.sidebar-content {
    padding: 10px;
}

.module table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 15px;
}

.module caption {
    background: var(--darker-grey);
    text-align: left;
    padding: 8px;
}

.module caption a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    font-size: 13px;
}

.module td {
    padding: 8px;
    border-bottom: 1px solid #eee;
}

.module td a {
    color: #444;
    text-decoration: none;
    font-size: 13px;
}





/* The Toggle Button - Fixed to the left edge */
#toggle-nav-sidebar {
    position: fixed;
    left: 0;
    top: 20%;
    transform: translateY(-50%);
    width: 14px;
    height: 45px;
    background: var(--bs-primary) ;
    border: 1px solid var(--darker-grey);
    border-left: none;
    cursor: pointer;
    z-index: 12; /* Ensures it stays above the sidebar and main content */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
    border-radius: 0 4px 4px 0;
}

#toggle-nav-sidebar:hover {
    background: var(--darker-grey);
}

/* Arrow indicator */
#toggle-nav-sidebar::before {
    content: '';
    display: inline-block;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 7px solid white; /* Points Left by default */
    transition: transform 0.3s ease;
}

/* Flip the arrow when collapsed */
body.main-menu-collapsed #toggle-nav-sidebar::before {
    transform: rotate(180deg); /* Points Right */
}

/* Adjust Main Content to not be hidden behind the fixed button */
#main {
flex: 1; /* Shorthand for flex-grow: 1, flex-shrink: 1, flex-basis: 0% */
    min-width: 0; /* Important: Prevents flex items from overflowing their container */
    padding: 6px 6px 6px 12px; 
    transition: margin-left 0.3s ease;
}


.dropdown-divider{

  border-top: 1px solid #c7c7c7 !important ; /*  darker divider */
  margin: 10px 0  !important  ; /* Increase spacing */


}

/* Target the dropend toggle caret */
.dropend .dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.5em;
  vertical-align: 0.255em;
  content: "";
  
  /* Custom Size */
  border-top: 0.4em solid transparent;
  border-bottom: 0.4em solid transparent;
  border-left: 0.6em solid var(--bs-navbar-color) !important; /* Changes color and length */
}



/* Ensure the outer container fills the screen or parent */
.full-height-wrapper {
  display: flex;
  flex-direction: column;
  height: 100vh; /* or 100% if the parent has a fixed height */
}


/* Make the tab-content grow to fill the rest of the flex container */
#imageTabContent {
  flex-grow: 1;
  overflow-y: auto; /* Adds a scrollbar if content is too long */
}


/* Ensure the individual panes also fill the height */
.tab-pane {
  height: 100%;
}





/* Hide the 'locked' icon by default */
.icon-checkbox .icon-locked {
  display: none;
}

/* When the checkbox is checked: */
/* 1. Hide the unlocked icon */
.btn-check:checked + .icon-label .icon-unlocked {
  display: none;
}

/* 2. Show the locked icon */
.btn-check:checked + .icon-label .icon-locked {
  display: inline-block;
}


/* Optional: Change button color when checked (Bootstrap default does this, 
   but you can customize it here) */
.btn-check:checked + .btn-outline-primary {
  background-color: #d63939; /* Tabler-style red for locked */
  border-color: #d63939;
}

  /* Logic: When radio is checked, show the lock-fill and hide the unlock */
  .btn-check:checked + .btn .icon-locked { display: inline-block !important; }
  .btn-check:checked + .btn .icon-unlocked { display: none !important; }

  /* Logic: When radio is NOT checked, show the unlock and hide the lock-fill */
  .btn-check:not(:checked) + .btn .icon-locked { display: none !important; }
  .btn-check:not(:checked) + .btn .icon-unlocked { display: inline-block !important; }




/* Target the button inside our custom container */
.accordion-arrow-left .accordion-button {
    flex-direction: row-reverse ;
    justify-content: flex-end ;
}

/* Remove the default auto-margin that pushes it to the right */
.accordion-arrow-left .accordion-button::after {
    margin-left: 0 ;
    margin-right: 0.75rem ; /* Space between arrow and text */
}


/* Hides the chevron icon completely */
.accordion-button.no-chevron::after {
    display: none !important;
}







/* Accordion with  custom colors */

/* 1. CLOSED state (We want it to look "Active/Primary") */
.accordion-parent-color .accordion-button.collapsed {
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
}

/* 2. OPEN state (We want it to look "Normal/Inactive") */
.accordion-parent-color .accordion-button:not(.collapsed) {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}

/* 3. Handle the Chevron Icon to match theme colors */
.accordion-parent-color .accordion-button.collapsed::after {
    /* Uses the primary colored icon */
    background-image: var(--bs-accordion-btn-icon);
}

.accordion-parent-color .accordion-button:not(.collapsed)::after {
    /* Uses the standard icon */
    background-image: var(--bs-accordion-btn-active-icon);
    /* Note: Bootstrap usually flips the icon color when active, 
       we might need to force the default icon here since we swapped backgrounds */
}

.accordion-parent-color .accordion-button:focus {
    border-color: var(--bs-primary-border-subtle);
    box-shadow: 0 0 0 0.25rem var(--bs-primary-border-subtle);
}

/* Apply the 'Collapsed' styling to BOTH states */
.accordion-parent-color .accordion-button,
.accordion-parent-color .accordion-button:not(.collapsed) {
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
    
    /* Remove the default 'active' box shadow if you want it perfectly flat */
    box-shadow: none;
}

/* Ensure the arrow icon stays consistent as well */
.accordion-parent-color .accordion-button::after,
.accordion-parent-color .accordion-button:not(.collapsed)::after {
    background-image: var(--bs-accordion-btn-icon);
}

.parent-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    flex-shrink: 0;
    position: relative;
    z-index: 10; 
    
    /* 1. Try to load a custom high-contrast SVG cursor first */
    /* 2. Fall back to standard 'grab' if the image fails to load */
    cursor: url('/static/icons/hand-grab.svg') 20 20, grab !important;
    
    -webkit-user-select: none;
    user-select: none;
    touch-action: none; 

    transition: background-color 0.2s ease, color 0.2s ease;
}

.parent-handle:active {
    /* Do the same for the grabbing state */
    cursor: url('/static/icons/hand-grab.svg') 20 20, grabbing !important;
}

/* Fixes children (like <i> or <span> icons) blocking the cursor */
.parent-handle > * {
    pointer-events: none;
}

/* 2. Handle State: COLLAPSED (White/Transparent background) */
.parent-handle:has(+ .accordion-button.collapsed) {
    background-color: transparent !important;
    color: var(--bs-gray-600) !important; /* Visible dark gray */
}

/* 3. Handle State: EXPANDED (Bootstrap Blue background) */
.parent-handle:has(+ .accordion-button:not(.collapsed)) {
    background-color: var(--bs-accordion-active-bg) !important;
    color: var(--bs-accordion-active-color) !important;
}

/* 4. Hover State for responsiveness */
.parent-handle:hover {
    color: var(--bs-primary) !important;
    background-color: rgba(0, 0, 0, 0.05) !important;
}

/* 5. Icon Logic (Inherit colors & block mouse interference) */
.parent-handle i {
    pointer-events: none; /* Crucial: clicks go through to the handle */
    font-size: 1.25rem;
    color: inherit;
    cursor: inherit; /* Ensures the hand shows over the icon pixels too */
}

/* 6. Accordion Structure Fixes */
.accordion-header {
    background-color: transparent;
    display: flex;
    align-items: stretch; /* Makes handle full height */
    overflow: hidden;      /* Clips handle corners to item radius */
}

.accordion-button {
    padding-left: 10px !important;
    box-shadow: none !important; /* Removes focus ring interference */
    z-index: 1; /* Keep button below the handle */
}





.child-item {
    width: 100%; /* Spans the full width of the grid cell */
    border: 1px solid #dee2e6;
    border-radius: 4px;
}






/* Ensure the title doesn't overlap the edit button on small screens */
.accordion-header h1 {
  padding-right: 40px;
  padding-left: 40px;
  font-size: 1.5rem; /* Adjusting size to fit typical headers */
}

/* Make the icon feel like a clickable action */
.btn-edit-parent {
  z-index: 10;
  border-radius: 4px;
  padding: 4px 8px;
  transition: all 0.2s;
}

.btn-edit-parent:hover {
  background-color: #f8f9fa;
  color: #000;
}


.btn-edit-parent {
    transition: color 0.2s ease-in-out, transform 0.1s ease;
    cursor: pointer;
    display: flex;
    align-items: center;
    z-index: 5; /* Ensure it stays above the button background */
}

.btn-edit-parent:hover {
    color: #007bff; /* Primary color on hover */
    transform: scale(1.2);
}

/* Ensure the accordion arrow doesn't overlap our icon */
.accordion-button::after {
    margin-left: 10px; /* Provides breathing room */
}



/* When the button is NOT collapsed, change the background of the div after it */
.accordion-button:not(.collapsed) + .d-flex {
    /* This uses the default Bootstrap accordion active background variable */
    background-color: var(--bs-accordion-active-bg);
    /* This ensures the color fills the height if the header is tall */
    height: 100%;
}

/* Optional: If you want the icons to change color too (e.g. to a darker blue) */
.accordion-button:not(.collapsed) + .d-flex .text-primary {
    color: var(--bs-accordion-active-color) !important;
}

/* If the header contains a button that is NOT collapsed (i.e., it is open) */
.accordion-header:has(.accordion-button:not(.collapsed)) {
    background-color: var(--bs-accordion-active-bg);
}

/* Ensure the handle and the icon div don't have their own conflicting backgrounds */
.accordion-header:has(.accordion-button:not(.collapsed)) .parent-handle,
.accordion-header:has(.accordion-button:not(.collapsed)) .d-flex {
    background-color: transparent;
}

/* Optional: Make the text/icons match the accordion's active theme color */
.accordion-header:has(.accordion-button:not(.collapsed)) .ti {
    color: var(--bs-accordion-active-color);
}

/* Ensures the action container fills the height for centering */
.accordion-header .d-flex.align-items-center {
    height: auto;
    align-self: stretch;
}

/* Ensure the background color covers the icon area when expanded */
.accordion-header:has(.accordion-button:not(.collapsed)) .d-flex.align-items-center {
    background-color: var(--bs-accordion-active-bg);
}


/* 1. When the accordion is CLOSED (button has .collapsed) */
/* Hide the Plus icon */
/* .accordion-button.collapsed + .d-flex .ti-square-plus {
    display: none !important;
} */

/* 2. When the accordion is OPEN (button does NOT have .collapsed) */
/* Hide the Pencil icon */
/* .accordion-button:not(.collapsed) + .d-flex .ti-pencil {
    display: none !important;
} */


/* The color picker from django-colorfield has by deault a z-index of 1000
In the styles.css of modernize bootstrap5 theme  https://github.com/adminmart/Modernize-bootstrap-free  
the z-index for modal class is by default set to 1055 so the color picker would be hidden behind the modal form */
.clr-picker {
    z-index: 1100 !important;
}


.btn-3d-primary {
  /* Using your variables for fonts and colors */
  font-family: var(--bs-font-sans-serif);
  background: var(--bs-primary);
  color: var(--bs-white);
  border: none;
  border-radius: var(--bs-border-radius);
  padding: 10px 20px;
  font-weight: 600;
  cursor: pointer;
  
  /* 3D Edge: A darker version of primary via rgba overlaying black.
    Ambient Shadow: Uses the theme's black-rgb variable.
  */
  box-shadow: 
    0 4px 0 rgba(0, 0, 0, 0.25), 
    0 8px 15px rgba(var(--bs-black-rgb), 0.15);
  
  transition: all 0.1s ease;
}

/* Hover state: Lifts up slightly */
.btn-3d-primary:hover {
  transform: translateY(-2px);
  box-shadow: 
    0 6px 0 rgba(0, 0, 0, 0.25),
    0 12px 20px rgba(var(--bs-black-rgb), 0.2);
}

/* Active (Clicked) state: Pushes down */
.btn-3d-primary:active {
  transform: translateY(4px);
  box-shadow: 
    0 0px 0 rgba(0, 0, 0, 0.25),
    0 2px 4px rgba(var(--bs-black-rgb), 0.15);
}








/* Hide the HTMX indicator wrapper by default */
/* using modernize styles.css
.htmx-indicator {
    display: none !important;
}

/* Show it only when an HTMX request is actively running */
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    display: inline-block !important; /* Matches Bootstrap's spinner display */
}







    /* Algemene container voor het horizontaal scrollen */
    .scroll-nav-container {
      overflow-x: auto;
      white-space: nowrap;
      -webkit-overflow-scrolling: touch; /* Vloeiende momentum-scroll op iOS/Android */
    }

    /* Verberg de scrollbalken op alle browsers voor een native app-look */
    .scroll-nav-container::-webkit-scrollbar {
      display: none;
    }
    .scroll-nav-container {
      -ms-overflow-style: none;  /* IE en Edge */
      scrollbar-width: none;  /* Firefox */
    }
    
    /* Zorg dat de Bootstrap .nav flex-knoppen op één lijn blijven staan en niet wrappen */
    .scroll-nav-container .nav {
      display: inline-flex;
      flex-wrap: nowrap;
    }

    /* Styling voor de tweede balk (Submenu) voor visueel onderscheid */
    .sub-bar-scrollable {
      background-color: var(--bs-light-bg-subtle);
    }
    
    /* Compacte knoppen (pills) voor de diepste laag */
    .sub-bar-scrollable .nav-link {
      font-size: 0.85rem;
      padding: 0.25rem 0.75rem;
      margin: 0.25rem 0.15rem;
    }

    /* De verticale streep die de sub-categorieën visueel scheidt in de scrollbalk */
    .menu-group-divider {
      display: inline-block;
      border-left: 2px solid var(--bs-border-color);
      margin-left: 0.75rem;
      padding-left: 0.75rem;
      height: 1.25rem;
      align-self: center;
    }


/* Zorg dat de wrapper zelf strak binnen de bounds van het dashboard blijft */
.nav-wrapper {
    position: relative;
    width: 100%;
    max-width: 100%;
    display: block;
}

/* Pas de padding direct toe op het onderliggende menu-element */
.scroll-nav-container, 
.scroll-nav-container #layer1 {
    padding-left: 25px !important;
    padding-right: 25px !important;
}

/* De basisinstellingen van je pseudo-elementen (zoals ze nu in je DevTools staan) */
.nav-wrapper::before,
.nav-wrapper::after {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 35px;
    display: flex;
    align-items: center;
    font-weight: bold;
    color: #5d87ff;
    font-family: sans-serif;
    z-index: 10000; /* Staat al perfect in je stylesheet */
    
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    pointer-events: none;
}

.nav-wrapper::before {
    content: "<";
    left: 0;
    justify-content: flex-start;
    padding-left: 10px;
    background: linear-gradient(to right, #ffffff 70%, rgba(255, 255, 255, 0));
}

.nav-wrapper::after {
    content: ">";
    right: 0;
    justify-content: flex-end;
    padding-right: 10px;
    background: linear-gradient(to left, #ffffff 70%, rgba(255, 255, 255, 0));
}

/* DE CRUCIALE TOGGLES: Dwing de zichtbaarheid af met !important */
.nav-wrapper.has-overflow-left::before {
    opacity: 1 !important;
    visibility: visible !important;
}

.nav-wrapper.has-overflow-right::after {
    opacity: 1 !important;
    visibility: visible !important;
}



/* Zorg dat secundaire knoppen tijdens het hoveren de volledige primary-kleuren aannemen */
.layer2-content .btn-light-primary:hover {
    background-color: #5d87ff !important; /* De Modernize primaire blauwe kleur */
    color: #ffffff !important;            /* Witte tekst */
    border-color: #5d87ff !important;
}

/* Optioneel: vloeiende kleurovergang toevoegen aan de knoppen */
.layer2-content .btn {
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}


















/* ==========================================================================
   OPGESCHOONDE SMARTPHONE & TABLET FIX (VOOR CHROME, SAFARI & FIREFOX)
   ========================================================================== */
@media (max-width: 991.98px) {

    /* 1. Voorkom dat het complete scherm horizontaal kan trillen/schuiven op mobiel */
    html, body {
        max-width: 100vw;
        overflow-x: hidden;
    }

    /* 2. Schakel de 130px vaste breedte van het logo en de controls uit op mobiel 
          zodat ze compact aansluiten en er meer ruimte overblijft voor de menu-items */
    #layer1 .navbar-brand,
    #layer1 .menu-right-controls {
        width: auto !important;
        flex: 0 0 auto !important;
    }

    /* 3. DE CRUCIALE WEBKIT FIX: Zet de laptop-centrering (ms-auto/me-auto) hard op 0.
          Dit voorkomt dat Chrome en Safari kilometers aan onzichtbare marge berekenen op mobiel. 
          De pijl-overlays (::before/::after) mogen hierdoor gewoon blijven bestaan en werken! */
    #layer1 .layer1-links-container {
        margin-left: 0 !important;
        margin-right: 0 !important;
        display: flex !important;
        flex-wrap: nowrap !important;
    }

    /* 4. Dwing de navigatiebalken om keurig mee te veren met touch-scrollbewegingen */
    .scroll-nav-container {
        touch-action: pan-x;
    }

    .scroll-nav-container .nav {
        display: flex !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
    }

    /* 5. Zorg dat de subbalk op mobiel ook strak links start voor een fijne scroll-ervaring */
    .layer2-content {
        justify-content: flex-start !important;
    }
}

































/*