/* Font import */
@import 'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800;1000&display=swap';

/* Root variabelen */
:root {
    --layout-sidebar-width: 225px;
}

/* Scrollbar styling */
html {
    scrollbar-gutter: auto !important; /* Standaard scrollbar gedrag */
}

html:has(body.content-overflow-y) {
    scrollbar-gutter: stable !important; /* Voorkomt layout shifts bij overflow */
}

/* Layout componenten */
#layout-content {
    /* padding: calc(var(--spacing)*1); */
    transition-property: all;
    transition-timing-function: var(--default-transition-timing-function);
    transition-duration: var(--default-transition-duration);
    /* flex-grow: 1;
    height: calc(100vh - 65px);
    overflow-y: auto; */
}

/* Sidebar styling en animaties */
#layout-sidebar {
    width: var(--layout-sidebar-width);
    min-width: var(--layout-sidebar-width);
    height: 100vh;
    top: 0;
    bottom: 0;
    transition-property: margin, top, max-height, border-radius;
    transition-timing-function: var(--default-transition-timing-function);
    transition-duration: .3s;
    flex-direction: column;
    display: flex;
    position: sticky;
    z-index: 10;
    overflow-y: auto;
}

#layout-sidebar.hide {
    margin-inline-start: calc(var(--layout-sidebar-width)*-1) /* Verbergt sidebar */
}

#layout-sidebar-toggle-trigger:checked~#layout-sidebar {
    margin-inline-start: calc(var(--layout-sidebar-width)*-1) /* Toggle sidebar via checkbox */
}

html.sidebar-closed #layout-sidebar {
    margin-inline-start: calc(var(--layout-sidebar-width)*-1) /* Gesloten sidebar status */
}

/* Splash screen animatie */
#splash-screen {
    position: fixed;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 15s linear;
}

#splash-screen.remove {
    animation: fadeout 0.7s forwards;
    z-index: 0;
}

@keyframes fadeout {
    to {
        opacity: 0;
        visibility: hidden;
        display: none;
    }
}

/* Aanpassingen styling van input fields */

/* Light mode - gebruik dezelfde kleuren als in je theme */
.textarea,
.input,
.select {
  /* Enkele lichte border voor normale state */
    /* border: 1px solid oklch(0.94 0 0) !important; */
    transition: all 0.2s ease-in-out;
}

.textarea:focus,
.input:focus,
.select:focus {
    outline: none !important;
    /* border-color: oklch(0.83 0.13 220.46 / 0.53) !important; */
    /* box-shadow: 0 0 0 1px rgba(20, 184, 166, 0.1) !important; */
}

.textarea:focus-within,
.input:focus-within,
.select:focus-within {
    outline: none !important;
}

/* Voorkomt layout shifts sluiten modals*/
.modal {
    scrollbar-gutter: auto;
}

.tab-active {
    background-color: color-mix(in srgb, var(--color-primary) 10%, transparent) !important;
}

.gap-10 {
    gap: calc(var(--spacing) * 10);
}

.gap-16 {
    gap: calc(var(--spacing) * 16);
}

.gap-24 {
    gap: calc(var(--spacing) * 24);
}   

.gap-32 {
    gap: calc(var(--spacing) * 32);
}

/* Verwijder de checkmark in de toggle button */
.toggle:checked {
    background-image: none !important;
}

/* Aanpassing toggle button unchecked voor weergave in dark mode */
[type='checkbox'],
[type='radio'] {
    /* background-color: #ff08081f; */
    border-color: oklch(0.63 0 0 / 0.45);
}

.text-glow-blue {
    text-shadow: 0 0 5px rgba(0, 186, 254, 0.5), 0 0 20px rgba(0, 186, 254, 0.2);
}

.text-glow-citrus {
    text-shadow: 0 0 7px rgba(189, 255, 0, 0.5), 0 0 20px rgba(189, 255, 0, 0.2);
}

.fieldset {
    font-size: 0.95rem;
}
 
.floating-label:focus-within>span,
.floating-label:not(:has(input:placeholder-shown, textarea:placeholder-shown))>span {
    scale: 0.9 !important;
    translate: -12.5% calc(-50% - 0.30em) !important;
}

.loading-2xl {
    width: calc(var(--size-selector, 0.25rem) * 16);
}

/* Theme-adaptive backgrounds - Automatische detectie */
.bg-adaptive {
  background-color: light-dark(
    var(--color-base-100),  /* Light themes */
    var(--color-base-200)   /* Dark themes */
  );
}

.bg-adaptive-100-200 {
  background-color: light-dark(
    var(--color-base-100),  /* Light themes */
    var(--color-base-200)   /* Dark themes */
  );
}

.bg-adaptive-100-300 {
  background-color: light-dark(
    var(--color-base-100),  /* Light themes */
    var(--color-base-300)   /* Dark themes */
  );
}

.bg-adaptive-200-300 {
  background-color: light-dark(
    var(--color-base-200),  /* Light themes */
    var(--color-base-300)   /* Dark themes */
  );
}

/* Voor borders */
.border-adaptive {
  border-color: light-dark(
    var(--color-base-300),  /* Light themes */
    color-mix(in oklch, var(--color-base-content), transparent 80%)  /* Dark themes */
  );
}

/* Voor text contrast */
.text-adaptive-muted {
  color: light-dark(
    color-mix(in oklch, var(--color-base-content), transparent 40%),  /* Light themes */
    color-mix(in oklch, var(--color-base-content), transparent 50%)   /* Dark themes */
  );
}