/* public/css/custom.css */
.fc-event-no-end {
    background-image: linear-gradient(to bottom, yellow, #1f1f1f);
    color: #000000;
}

.fc-event-no-end .fc-event-main-frame {
    color: #000000;
}

.warning-text {
    color: red;
}

.fc-event-title {
    font-size: 0.75em;
}

.fc-event-ticket {
    font-size: 0.65em;
    font-weight: bold;
}

.fc-event-main-frame {
    position: relative;
}

.fc-time {
    position: absolute;
    top: 0;
    left: 0;
}

.fc-event-ticket {
    position: absolute;
    top: 0;
    right: 0;
}

.reload-icon {
    position: absolute;
    top: 0;
    right: 0;
}

.fc-event-title-container {
    position: relative;
    float: left;
    margin-top:15px;
}

.fc-daygrid-day-events .fc-event-title-container {
    margin-top:2px;
    font-weight: bold;
}

.fc-daygrid-day-events .fc-event-title-container .fc-event-title {
    font-size: 0.9em;
}


.icon-classname, .hand-icon-classname, .home-icon-classname {
    display: none;
}

.fc-timegrid-slot-label-cushion {
    font-size: 0.7em;
}

.fc .fc-timegrid-slot {
    height: 1.0em!important;
}

.fi-modal-window {
    transition: none !important;
    animation: none !important;
}

.filament-modal {
    animation: none !important; /* Verwijdert de animatie */
    transform: none !important; /* Zorgt dat de modal direct zichtbaar is */
    opacity: 1 !important; /* Zorgt voor onmiddellijke zichtbaarheid */
}

.fi-section-content-ctn {
    border-top: none !important;
}

.fc-timegrid-axis-cushion {
    font-size: 0.70em!important;
    font-weight: bold!important;
}

.show-link {
    font-size: 0.8em;
    font-family: Verdana;
}

.show-on-hover {
    display:none;
}

.show-link:hover .show-on-hover {
    display: block;
    opacity: 100;
}

button[wire\:target="resetTableFiltersForm"] {
    display: none!important;
}

/* Todoist autocomplete dropdown */
.todoist-autocomplete-dropdown {
    position: fixed;
    z-index: 9999;
    max-height: 240px;
    overflow-y: auto;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

.dark .todoist-autocomplete-dropdown {
    background: #1f2937;
    border-color: #374151;
}

.todoist-autocomplete-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 0.875rem;
    transition: background-color 0.1s;
}

.todoist-autocomplete-header {
    padding: 8px 12px;
    font-size: 0.75rem;
    color: #6b7280;
    border-bottom: 1px solid #e5e7eb;
    font-style: italic;
}

.dark .todoist-autocomplete-header {
    color: #9ca3af;
    border-bottom-color: #374151;
}

.todoist-autocomplete-item:hover,
.todoist-autocomplete-item-active {
    background: #f3f4f6;
}

.dark .todoist-autocomplete-item:hover,
.dark .todoist-autocomplete-item-active {
    background: #374151;
}

.todoist-priority-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.todoist-task-content {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #111827;
}

.dark .todoist-task-content {
    color: #f9fafb;
}

.todoist-task-due {
    flex-shrink: 0;
    font-size: 0.75rem;
    color: #6b7280;
}

.dark .todoist-task-due {
    color: #9ca3af;
}

.ticket-autocomplete-code {
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 600;
    font-family: monospace;
    color: #2563eb;
    min-width: 80px;
}

.dark .ticket-autocomplete-code {
    color: #60a5fa;
}

/* ------------------------------------------------------------------
   Alles staat direct in beeld.

   Filament fade't en zoomt standaard elke modal, slide-over, dropdown
   en notificatie in. Dat is 150 tot 300 ms per klik, en op dit paneel
   klik je er honderden per dag: het voelt als wachten terwijl het
   antwoord er al is. Dus zetten we de duur van elke transitie op nul.
   Alpine zet zijn x-transition als inline stijl op het element, en
   daar komt deze regel met !important alsnog voor.

   Bewust alléén transities en niet animaties: de laadspinner is een
   animatie en die hoort juist wel te draaien, anders staat er een
   stilstaand rondje op het scherm.
   ------------------------------------------------------------------ */
.fi-body *,
.fi-body *::before,
.fi-body *::after {
    transition-duration: 0s !important;
    transition-delay: 0s !important;
}

.fi-body {
    scroll-behavior: auto !important;
}

/* ------------------------------------------------------------------
   STATZ-13: paginakop mag nooit breder worden dan het scherm.
   De kop van een AI Ticket Run staat op één regel (white-space: nowrap
   met ellipsis). Als flexkind kreeg het titelblok daardoor de breedte
   van de volledige titel als minimum en duwde de pagina over de rand,
   zodat sidebar en inhoud bij tussenbreedtes (1024 tot 1660px) niet
   meer op elkaar aansloten. Met min-width: 0 mag het blok krimpen en
   doet de ellipsis zijn werk.
   ------------------------------------------------------------------ */
.fi-header > :first-child,
.fi-header-heading {
    min-width: 0;
}

.fi-header-heading {
    max-width: 100%;
    overflow: hidden;
}

.fi-main,
.fi-main-ctn {
    min-width: 0;
}