/* CSS personalizzato del framework. */

button:not(:disabled),
input[type="button"]:not(:disabled),
input[type="submit"]:not(:disabled),
input[type="reset"]:not(:disabled),
[role="button"]:not([aria-disabled="true"]) {
    cursor: pointer;
}

button:disabled,
input[type="button"]:disabled,
input[type="submit"]:disabled,
input[type="reset"]:disabled,
[role="button"][aria-disabled="true"] {
    cursor: not-allowed;
}

@media (max-width: 639px) {
    details > summary {
        flex-wrap: wrap;
    }

    details > summary > .shrink-0:last-child {
        margin-left: auto;
        max-width: 100%;
    }
}

.ef-required-marker {
    margin-left: 0.25rem;
    font-weight: 700;
}

.ef-required-marker.hidden {
    display: none;
}

.ef-required-star {
    color: #fbbf24;
}

.ef-placeholder-select {
    color: #9ca3af !important;
}

.ef-settings-menu summary {
    list-style: none;
}

.ef-settings-menu summary::-webkit-details-marker {
    display: none;
}

.ef-scroll-top {
    display: none !important;
    opacity: 0;
    pointer-events: none;
    transform: translateY(0.75rem);
}

.ef-scroll-top.ef-scroll-top-visible {
    display: grid !important;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.ef-chart-panel canvas {
    display: block;
    height: 100% !important;
    width: 100% !important;
}

.ef-list-table {
    border-collapse: collapse;
    background-color: #0f172a;
}

.ef-list-table thead {
    border-top: 1px solid #334155 !important;
    border-bottom: 1px solid #334155 !important;
    background-color: rgba(30, 41, 59, 0.72) !important;
    color: #e2e8f0 !important;
}

.ef-list-table thead tr {
    border-bottom-color: #334155 !important;
}

.ef-list-table tbody {
    background-color: #0f172a;
}

.ef-list-table tbody tr {
    border-color: #1e293b !important;
    background-color: #0f172a;
    transition: background-color 120ms ease-in-out;
}

.ef-list-table tbody tr:hover {
    background-color: rgba(30, 41, 59, 0.38);
}

.ef-list-table tbody tr[hidden] {
    display: none !important;
}

.ef-list-table tbody tr > * {
    border-color: #1e293b !important;
}

.ef-list-footer {
    border-top: 1px solid #334155 !important;
    border-bottom: 1px solid #334155 !important;
    background-color: rgba(30, 41, 59, 0.72) !important;
    color: #e2e8f0 !important;
}

.ef-list-footer-empty {
    border-color: #1e293b !important;
    background-color: #0f172a !important;
    color: #94a3b8 !important;
}

.ef-state-ok {
    border-color: #34d399 !important;
    background-color: #0b2922 !important;
    color: #d1fae5 !important;
}

.ef-state-ok-card {
    border-color: #34d399 !important;
    background-color: #071b23 !important;
    color: #d1fae5 !important;
}

.ef-state-error {
    border-color: #f87171 !important;
    background-color: #2a1216 !important;
    color: #fee2e2 !important;
}

.ef-state-error-card {
    border-color: #f87171 !important;
    background-color: #240b14 !important;
    color: #fee2e2 !important;
}

.ef-state-warning {
    border-color: #fbbf24 !important;
    background-color: #272008 !important;
    color: #fef3c7 !important;
}

.ef-state-warning-card {
    border-color: #fbbf24 !important;
    background-color: #211808 !important;
    color: #fef3c7 !important;
}

.ef-state-info {
    border-color: rgba(56, 189, 248, 0.38) !important;
    background-color: rgba(14, 165, 233, 0.12) !important;
    color: #e0f2fe !important;
}

.ef-state-info-card,
.ef-framework-card {
    border-color: rgba(56, 189, 248, 0.45) !important;
    background-color: #082f49 !important;
    color: #e0f2fe !important;
}

.ef-alert-box {
    border-style: solid !important;
    border-radius: 0.5rem !important;
    border-width: 1px !important;
    padding: 0.75rem 1rem !important;
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
}

.ef-alert-row {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
}

.ef-alert-icon {
    flex-shrink: 0 !important;
    height: 1rem !important;
    margin-top: 0.125rem !important;
    width: 1rem !important;
}

.ef-alert-title {
    font-weight: 700 !important;
}

.ef-alert-body {
    margin-top: 0.125rem !important;
    white-space: pre-line !important;
}

.ef-alert-list {
    display: grid !important;
    gap: 0.25rem !important;
    margin-top: 0.125rem !important;
}

.ef-framework-active {
    border-color: #22d3ee !important;
    background-color: rgba(34, 211, 238, 0.1) !important;
    color: #cffafe !important;
}

.ef-state-neutral-card {
    border-color: #1e293b !important;
    background-color: #0f172a !important;
}

.ef-state-ok-icon {
    background-color: #0b2922 !important;
    color: #6ee7b7 !important;
}

.ef-state-error-icon {
    background-color: #2a1216 !important;
    color: #fca5a5 !important;
}

.ef-state-warning-icon {
    background-color: #272008 !important;
    color: #fcd34d !important;
}

.ef-state-info-icon,
.ef-framework-icon {
    background-color: rgba(14, 165, 233, 0.14) !important;
    color: #7dd3fc !important;
}

.ef-state-ok-text {
    color: #d1fae5 !important;
}

.ef-state-error-text {
    color: #fee2e2 !important;
}

.ef-state-warning-text {
    color: #fef3c7 !important;
}

.ef-state-info-text,
.ef-framework-text {
    color: #7dd3fc !important;
}

.ef-state-ok-badge {
    border-color: #34d399 !important;
    background-color: #0b2922 !important;
    color: #d1fae5 !important;
}

.ef-state-error-badge {
    border-color: #f87171 !important;
    background-color: #2a1216 !important;
    color: #fee2e2 !important;
}

.ef-state-warning-badge {
    border-color: #fbbf24 !important;
    background-color: #272008 !important;
    color: #fef3c7 !important;
}

.ef-state-info-badge,
.ef-framework-badge {
    border-color: rgba(34, 211, 238, 0.3) !important;
    background-color: rgba(6, 182, 212, 0.1) !important;
    color: #cffafe !important;
}

.ef-action-ok {
    border-color: #34d399 !important;
    color: #d1fae5 !important;
}

.ef-action-ok:hover {
    background-color: #0b2922 !important;
}

.ef-action-error {
    border-color: #f87171 !important;
    color: #fee2e2 !important;
}

.ef-action-error:hover {
    background-color: #2a1216 !important;
}

.ef-action-warning {
    border-color: #fbbf24 !important;
    color: #fef3c7 !important;
}

.ef-action-warning:hover,
.ef-hover-warning:hover {
    background-color: #272008 !important;
}

.ef-ticket-free-toggle:has(input:checked) {
    border-color: #34d399 !important;
    background-color: #071b23 !important;
    color: #d1fae5 !important;
}

.ef-ticket-free-toggle:has(input:checked) .ef-ticket-free-title,
.ef-ticket-free-toggle:has(input:checked) .ef-ticket-free-description {
    color: #d1fae5 !important;
}

.ef-field-ok {
    border-color: #34d399 !important;
}

.ef-field-ok:focus {
    border-color: #6ee7b7 !important;
    box-shadow: 0 0 0 2px #064e3b !important;
}

.ef-field-warning {
    border-color: #fbbf24 !important;
}

.ef-field-warning:focus {
    border-color: #fcd34d !important;
    box-shadow: 0 0 0 2px #422006 !important;
}

.ef-invalid-field {
    border-color: #f87171 !important;
}

.ef-invalid-field:focus {
    border-color: #f87171 !important;
    box-shadow: 0 0 0 2px #450a0a !important;
}

input[type="checkbox"],
input[type="radio"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    display: inline-grid;
    width: 1rem !important;
    height: 1rem !important;
    margin: 0;
    flex-shrink: 0;
    place-content: center;
    border: 2px solid #cbd5e1 !important;
    background-color: #020617 !important;
    accent-color: #06b6d4;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.9), inset 0 0 0 1px rgba(2, 6, 23, 0.9);
    vertical-align: middle;
}

input[type="checkbox"] {
    border-radius: 0.25rem;
}

input[type="radio"] {
    border-radius: 9999px;
    position: relative;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
    border-color: #22d3ee !important;
    background-color: #06b6d4 !important;
}

input[type="checkbox"]::before,
input[type="radio"]::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    transform: scale(0);
    transition: transform 120ms ease-in-out;
}

input[type="checkbox"]::before {
    clip-path: polygon(14% 44%, 0 65%, 44% 100%, 100% 16%, 80% 0, 39% 65%);
    background-color: #020617;
}

input[type="radio"]::before {
    border-radius: 9999px;
    background-color: #020617;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%) scale(0);
}

input[type="checkbox"]:checked::before,
input[type="radio"]:checked::before {
    transform: scale(1);
}

input[type="radio"]:checked::before {
    transform: translate(-50%, -50%) scale(1);
}

input[type="checkbox"]:focus,
input[type="radio"]:focus {
    outline: 2px solid rgba(34, 211, 238, 0.35);
    outline-offset: 2px;
}

.flatpickr-calendar {
    border: 1px solid #1e293b;
    border-radius: 0.5rem;
    background: #020617;
    box-shadow: 0 24px 60px rgba(2, 6, 23, 0.5);
    color: #e2e8f0;
}

.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after,
.flatpickr-calendar.arrowBottom::before,
.flatpickr-calendar.arrowBottom::after {
    border-bottom-color: #020617;
    border-top-color: #020617;
}

.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
    background: transparent;
    color: #f8fafc;
}

.flatpickr-current-month .flatpickr-monthDropdown-months:hover,
.flatpickr-current-month input.cur-year:hover,
.flatpickr-current-month input.cur-year:focus {
    background: #0f172a;
}

.flatpickr-weekday {
    color: #67e8f9;
}

.flatpickr-day {
    border-color: transparent;
    color: #cbd5e1;
}

.flatpickr-day:hover,
.flatpickr-day:focus {
    border-color: #334155;
    background: #1e293b;
    color: #f8fafc;
}

.flatpickr-day.today {
    border-color: #22d3ee;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    border-color: #06b6d4;
    background: #06b6d4;
    color: #020617;
}

.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay,
.flatpickr-day.flatpickr-disabled {
    color: #475569;
}

.flatpickr-prev-month,
.flatpickr-next-month {
    color: #cbd5e1;
    fill: #cbd5e1;
}

.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
    color: #67e8f9;
    fill: #67e8f9;
}