#calendarHolder .flatpickr-calendar.inline,
#calendarHolder .flatpickr-calendar.open {
    display: block !important;
    position: static !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#calendarHolder .flatpickr-day {
    color: #111827;
}

    #calendarHolder .flatpickr-day.prevMonthDay,
    #calendarHolder .flatpickr-day.nextMonthDay,
    #calendarHolder .flatpickr-day.flatpickr-disabled {
        color: #4b5563;
    }

    #calendarHolder .flatpickr-day.selected,
    #calendarHolder .flatpickr-day.startRange,
    #calendarHolder .flatpickr-day.endRange {
        background: #1d4ed8;
        border-color: #1d4ed8;
        color: #ffffff;
    }

    #calendarHolder .flatpickr-day.today:not(.selected) {
        border-color: #111827;
        color: #111827;
    }

.criteria-preview ul {
    list-style: disc;
    padding-left: 1.25rem;
    margin: .5rem 0;
}

.criteria-preview ol {
    list-style: decimal;
    padding-left: 1.25rem;
    margin: .5rem 0;
}

.criteria-preview li {
    margin: .25rem 0;
}

.criteria-preview h2 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0.75rem 0 0.25rem;
}

.criteria-preview h3 {
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0.5rem 0 0.25rem;
}

.criteria-preview p {
    margin: 0.25rem 0;
}

#calendarHolder .flatpickr-calendar {
    z-index: 0 !important;
}

#criteriaModal {
    position: fixed;
    inset: 0;
    z-index: 2147483647;
}

    #criteriaModal > [data-close="criteria"] {
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,.55);
    }

#calendarHolder .flatpickr-calendar.inline,
#calendarHolder .flatpickr-calendar.open {
    display: block !important;
    position: static !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#calendarHolder .flatpickr-day.today {
    position: relative !important;
}

    #calendarHolder .flatpickr-day.today::after {
        content: "";
        position: absolute;
        inset: 3px;
        border-radius: 9999px;
        border: 2px solid rgba(220, 38, 38, 0.75);
        pointer-events: none;
    }

    /* Om dagens datum också är valt */
    #calendarHolder .flatpickr-day.today.selected::after,
    #calendarHolder .flatpickr-day.today.startRange::after,
    #calendarHolder .flatpickr-day.today.endRange::after,
    #calendarHolder .flatpickr-day.today.inRange::after {
        border-color: rgba(255, 255, 255, 0.95);
    }

#ImageFile::file-selector-button {
    display: inline-block !important;
    padding: .4rem .75rem;
    margin-right: .75rem;
    border: 1px solid #d1d5db;
    border-radius: .375rem;
    background: #fff;
    color: #111827;
    cursor: pointer;
}

/* Safari/äldre Chrome */
#ImageFile::-webkit-file-upload-button {
    display: inline-block !important;
    padding: .4rem .75rem;
    margin-right: .75rem;
    border: 1px solid #d1d5db;
    border-radius: .375rem;
    background: #fff;
    color: #111827;
    cursor: pointer;
}

#criteriaModal .criteria-wrap {
    --modal-pad: clamp(16px, 6vh, 48px);
    position: absolute !important;
    inset: 0 !important;
    min-height: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: var(--modal-pad) !important;
    box-sizing: border-box !important;
}

.icon-ring {
    width: 28px;
    height: 28px;
    border-radius: 10px;
    display: inline-grid;
    place-items: center;
    position: relative;
    background: linear-gradient(135deg, #ef4444, #6366f1);
    padding: 1px;
}

.icon-inner {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: #fff;
    display: inline-grid;
    place-items: center;
    color: #ef4444;
}
html, body {
    height: 100%;
}

body {
    background: #fcfcfc;
}
.criteria-wrap {
    /* samma luft uppe och nere (justera fritt) */
    --modal-pad: clamp(16px, 6vh, 48px);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--modal-pad);
    box-sizing: border-box;
}

/* Själva rutan får aldrig bli högre än viewport minus padding uppe+nere */
.criteria-dialog {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - (2 * var(--modal-pad)));
    overflow: hidden; /* viktigt: dialogen växer inte – innehållet scrollar */
}

/* Scroll-ytan */
.criteria-preview {
    flex: 1 1 auto;
    min-height: 0; /* viktigt i flex-kolumn */
    overflow: auto; /* här ska scrollen vara */
}