/*
 * Alleen wat Livewire en Filament's JavaScript in het origineel anders deden. Alles wat het uiterlijk bepaalt staat in
 * theme.css (letterlijk de build van FlexDash) en wordt hier niet overschreven. Nieuwe regels hier alleen met uitleg.
 */

/* Geen horizontaal scrollen op 390px: de decoratieblokken onderaan (mb-dashboard-deco) en de uitklappanelen steken
   met absolute posities buiten het scherm. clip (niet hidden) laat de plakkende zijbalk en de paginabalk met rust. */
html.fi {
    overflow-x: clip;
}

/* Uitklapmenu's (fi-dropdown): Filament plaatst het paneel met floating-ui (x-float), dat we niet laden. theme.css geeft
   het paneel position:absolute en een breedte, maar geen plek; die geven we het hier relatief aan de knop. */
.fi-dropdown {
    position: relative;
}
.fi-dropdown-panel {
    top: 100%;
    margin-top: 0.5rem;
    inset-inline-start: 0;
}
/* data-placement="bottom-end" (rij-acties, gebruikersmenu): het paneel sluit aan de rechterkant van de knop aan. */
.fi-dropdown-panel[data-placement$="-end"] {
    inset-inline-start: auto;
    inset-inline-end: 0;
}
/* data-placement="top-*" (de gebruikerskaart onderin): het paneel gaat boven de knop open. */
.fi-dropdown-panel[data-placement^="top-"] {
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: 0.5rem;
}

/* Een lijst die via htmx ververst wordt (zoeken, sorteren, bladeren): Livewire toonde dat met wire:loading. Tijdens het
   verzoek zetten we de tabel zachter, zodat de gebruiker ziet dat er iets gebeurt zonder dat de indeling verspringt. */
.fi-ta.htmx-request .fi-ta-content-ctn {
    opacity: 0.6;
    transition: opacity 150ms ease-in-out;
}

/* Knoppen en links die geen <button> zijn, maar de klasse fi-pagination-item-btn hebben (paginering via htmx): een <a>
   moet er net zo uitzien als de <button> van Filament. */
a.fi-pagination-item-btn,
a.fi-tabs-item,
a.fd-tk-views__tab {
    text-decoration: none;
}

/* De laadbalk bovenin bij navigeren, letterlijk het stijlblok van Livewire (nprogress), omdat flexdash-navigate.js
   dezelfde balk toont als wire:navigate in het origineel. De kleur komt uit --livewire-progress-bar-color (primary-500). */
/* Make clicks pass-through */

    #nprogress {
      pointer-events: none;
    }

    #nprogress .bar {
      background: var(--livewire-progress-bar-color, #29d);

      position: fixed;
      z-index: 1031;
      top: 0;
      left: 0;

      width: 100%;
      height: 2px;
    }

    /* Fancy blur effect */
    #nprogress .peg {
      display: block;
      position: absolute;
      right: 0px;
      width: 100px;
      height: 100%;
      box-shadow: 0 0 10px var(--livewire-progress-bar-color, #29d), 0 0 5px var(--livewire-progress-bar-color, #29d);
      opacity: 1.0;

      -webkit-transform: rotate(3deg) translate(0px, -4px);
          -ms-transform: rotate(3deg) translate(0px, -4px);
              transform: rotate(3deg) translate(0px, -4px);
    }

    /* Remove these to get rid of the spinner */
    #nprogress .spinner {
      display: block;
      position: fixed;
      z-index: 1031;
      top: 15px;
      right: 15px;
    }

    #nprogress .spinner-icon {
      width: 18px;
      height: 18px;
      box-sizing: border-box;

      border: solid 2px transparent;
      border-top-color: var(--livewire-progress-bar-color, #29d);
      border-left-color: var(--livewire-progress-bar-color, #29d);
      border-radius: 50%;

      -webkit-animation: nprogress-spinner 400ms linear infinite;
              animation: nprogress-spinner 400ms linear infinite;
    }

    .nprogress-custom-parent {
      overflow: hidden;
      position: relative;
    }

    .nprogress-custom-parent #nprogress .spinner,
    .nprogress-custom-parent #nprogress .bar {
      position: absolute;
    }

    @-webkit-keyframes nprogress-spinner {
      0%   { -webkit-transform: rotate(0deg); }
      100% { -webkit-transform: rotate(360deg); }
    }
    @keyframes nprogress-spinner {
      0%   { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    

/* De kopkaart (mb-content-header) heeft in theme.css overflow:hidden en geen eigen laag. Daardoor viel elk menu dat eruit
   openklapt (+ Nieuw, het menu met acties van een offerte of project) eronder weg: afgeknipt aan de rand van de kaart en
   bedekt door de inhoud die erna komt. Dat zit ook zo in het origineel; de opdrachtgever wilde het overal opgelost
   (20 oktober 2026). Gemeten met tools/shots/stapel-test.js. De kaart knipt zelf niets af wat zichtbaar moet blijven:
   de lange titels hebben hun eigen overflow met ellipsis. */
.mb-content-header {
    overflow: visible;
    z-index: 25; /* boven de inhoud, onder de zijbalk op een telefoon (30) en vensters (40, 50) */
}

/* De timerbanner van het dashboard (active-timer-widget.blade.php) gebruikt Tailwind-klassen die niet in de build van
   theme.css zitten: in het origineel staat er daardoor een klok van schermbreedte en valt alles onder elkaar. Hier de
   opmaak die de view bedoelt, alleen binnen de banner. Op een telefoon gaan de knoppen onder de tekst. */
.fd-active-timer .flex { display: flex; }
.fd-active-timer .items-center { align-items: center; }
.fd-active-timer .justify-between { justify-content: space-between; flex-wrap: wrap; }
.fd-active-timer .gap-2 { gap: 0.5rem; }
.fd-active-timer .gap-3 { gap: 0.75rem; }
.fd-active-timer .gap-4 { gap: 1rem; }
.fd-active-timer .relative { position: relative; flex: none; }
.fd-active-timer .w-8 { width: 2rem; }
.fd-active-timer .h-8 { height: 2rem; }
.fd-active-timer .text-success-500 { color: var(--success-500); }
.fd-active-timer .animate-pulse { animation: fd-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.fd-active-timer .text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.fd-active-timer .text-xl { font-size: 1.25rem; line-height: 1.75rem; font-variant-numeric: tabular-nums; }
.fd-active-timer .font-medium { font-weight: 500; }
.fd-active-timer .font-bold { font-weight: 700; }
.fd-active-timer .text-gray-500 { color: var(--gray-500); }
.fd-active-timer .text-gray-900 { color: var(--gray-950); }
.fd-active-timer .text-primary-600 { color: var(--primary-600); }
.dark .fd-active-timer .text-gray-900 { color: #fff; }
.dark .fd-active-timer .text-gray-500 { color: var(--gray-400); }
@keyframes fd-pulse { 50% { opacity: 0.5; } }
/* Even breed als de widgets eronder (fd-widget heeft 16px rondom) en met dezelfde ronde hoeken als een sectie. */
.fd-active-timer { padding: 0 16px; }
.fd-active-timer .fi-section { border-radius: 0.75rem; overflow: hidden; }