/**
 * LeadFunnel Calendar Styles
 * Working CSS from the original implementation
 */

/* ===========================================
   CALENDAR WIDGET STYLES
   =========================================== */
/* Global variables are now in global-variables.css */
   
/* Calendar widget */
.lf-calendar-widget {
    background: var(--lf-bg);
    border: var(--lf-border);
    border-radius: var(--lf-radius);
    padding: var(--lf-space-3);
}

.lf-calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--lf-space-3);
    padding-inline: var(--lf-space-2);
}

.lf-calendar-month {
    font-size: 18px;
    font-weight: 700;
    color: var(--lf-text-color);
}

.lf-calendar-nav {
    background: var(--lf-primary);
    color: var(--lf-bg);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    display: grid;
    place-items: center;
    transition: transform .12s ease, background-color .12s ease;
}
.lf-calendar-nav:hover { 
    background: var(--lf-primary-color-dark); 
    transform: scale(1.06); 
}

.lf-calendar-nav:disabled,
.lf-calendar-nav.disabled {
    background: var(--lf-muted-light) !important;
    color: var(--lf-muted-dark) !important;
    cursor: not-allowed !important;
    transform: none !important;
}

.lf-calendar-nav:disabled:hover,
.lf-calendar-nav.disabled:hover {
    background: var(--lf-muted-light) !important;
    transform: none !important;
}

.lf-calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 6px;
}
.lf-calendar-weekday {
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--lf-muted);
    padding: 8px 0;
}

.lf-calendar-days {
    font-family: var(--font-family);
    font-size:17px;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px 6px;
}

.lf-calendar-day, .lf-time-cell {
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    color: var(--lf-text);
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    background: transparent;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.lf-calendar-day:hover, .lf-time-cell:hover {
    background-color: var(--lf-primary-color-light);
    border-color: var(--lf-primary-color);
}
.lf-calendar-day.today {
    background-color: var(--lf-primary-color-light);
    color: var(--lf-text-color);
}
.lf-calendar-day.selected {
    background: var(--lf-accent);
    color: var(--lf-bg);
    border-color: var(--lf-accent);
}
.lf-calendar-day.empty {
    visibility: hidden;
    pointer-events: none;
}
.lf-calendar-day.disabled-past {
    background-color: var(--lf-muted-light) !important;
    color: var(--lf-muted-dark) !important;
    cursor: not-allowed !important;
}
.lf-calendar-day.disabled-past:hover {
    background-color: var(--lf-muted-light) !important;
    border-color: transparent !important;
}
.lf-calendar-day.disabled-future {
    color: var(--lf-muted-color) !important;
    cursor: not-allowed !important;
    position: relative;
}
.lf-calendar-day.disabled-future::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(-45deg, transparent 47%, var(--lf-primary-color) 48%, var(--lf-primary-color) 52%, transparent 53%);
    pointer-events: none;
    z-index: 2;
}
.lf-calendar-day.disabled-future:hover {
    background-color: var(--lf-muted-light) !important;
    border-color: transparent !important;
}

/* HTML/CSS Tooltip */
.lf-calendar-day.lf-tooltip {
    position: relative;
}
.lf-calendar-day.disabled-future.lf-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--lf-primary);
    color: var(--lf-bg);
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    z-index: 1001;
    pointer-events: none;
}
.lf-calendar-day.disabled-future.lf-tooltip:hover::after {
    opacity: 1;
    visibility: visible;
}
/* Ensure red line stays visible on hover */
.lf-calendar-day.disabled-future.lf-tooltip:hover::before {
    z-index: 2;
}

/* ===========================================
   STANDARD TEMPLATE STYLES (for dropdown)
   =========================================== */

.lf-datepicker-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.lf-datepicker-input {
    width: 100%;
    padding: 12px 45px 12px 16px;
    border: 2px solid var(--lf-border);
    border-radius: 6px;
    font-size: 14px;
    background: var(--lf-bg);
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.lf-datepicker-input:focus {
    outline: none;
    border-color: var(--lf-primary-color);
    box-shadow: 0 0 0 3px var(--lf-primary-color-light);
}

.lf-datepicker-trigger {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.lf-datepicker-trigger:hover {
    background-color: var(--lf-muted-light);
}

.lf-calendar-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    margin-top: 4px;
    background: var(--lf-bg);
    border: 1px solid var(--lf-border);
    border-radius: 8px;
    box-shadow: 0 4px 12px var(--lf-muted-light);
    overflow: hidden;
}

.lf-calendar-container {
    padding: 16px;
}

/* ===========================================
   RESPONSIVE DESIGN
   =========================================== */

@media (max-width: 768px) {
    .lf-calendar-widget {
        padding: 12px;
    }
    
    .lf-calendar-header {
        padding-inline: 8px;
        margin-bottom: 12px;
    }
    
    .lf-calendar-month {
        font-size: 16px;
    }
    
    .lf-calendar-nav {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }
    
    .lf-calendar-day, .lf-time-cell {
        height: 36px;
        font-size: 14px;
    }
    
    .lf-calendar-weekday {
        font-size: 11px;
        padding: 6px 0;
    }
}

/* ===========================================
   ACCESSIBILITY
   =========================================== */

.lf-calendar-nav:focus,
.lf-calendar-day:focus {
    outline: 2px solid var(--lf-primary-color);
    outline-offset: 2px;
}

.lf-calendar-day:focus-visible {
    background-color: var(--lf-primary-color-light);
}

/* ===========================================
   ANIMATIONS
   =========================================== */

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.lf-calendar-dropdown {
    animation: fadeIn 0.2s ease-out;
}

/* ===========================================
   CSS VARIABLES FALLBACKS
   =========================================== */

/* Duplicate variables removed - using main :root variables above */

/* ===========================================
   WATCH DIAL STYLES
   =========================================== */
/* ===========================================
   WATCH DIAL — COMPLETE CSS (final)
   - Nessuna dipendenza dagli inline style errati
   - Funziona con la micro-patch JS che genera numeri e tacche
   =========================================== */

/* ---------- Variabili configurabili ---------- */
.lf-watch-dial-widget {
    --lf-watch-size: 209px;                 /* diametro del quadrante */
    --lf-face-bg: var(--lf-bg);
    --lf-face-border: none;
    --lf-shadow: none;

    --lf-hour-marker-width: 4px;
    --lf-hour-marker-len:  calc(var(--lf-watch-size) * 0.04);
    --lf-minute-marker-width: 1px;
    --lf-minute-marker-len: calc(var(--lf-watch-size) * 0.03);
    --lf-marker-margin:      0; /* distanza dal bordo - moved away from center */

    --lf-number-size: 14px;
    --lf-number-radius: calc(var(--lf-watch-size) * 0.34);      /* distanza dal centro - moved closer to center */

    --lf-hour-hand-width: 3px;
    --lf-hour-hand-len:   calc(var(--lf-watch-size) * 0.25);
    --lf-minute-hand-width: 2px;
    --lf-minute-hand-len:   calc(var(--lf-watch-size) * 0.3);


    
    /* Integrazione con il tuo design system, se presente */
    background: var(--lf-bg);
    border: var(--lf-border);
    border-radius: var(--lf-radius);
    padding: var(--lf-space-3);
    text-align: center;
}

/* Wrapper layout */
.lf-watch-dial-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--lf-space-3);
}

/* ---------- Quadrante ---------- */
.lf-watch-dial {
    position: relative;
    width: var(--lf-watch-size);
    height: var(--lf-watch-size);
    background: var(--lf-face-bg);
    border: var(--lf-face-border);
    border-radius: 50%;
    box-shadow: var(--lf-shadow);
    margin: 0 auto;
}

/* Superficie del quadrante: taglia tutto all’interno del cerchio */
.lf-watch-face {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
}

/* ---------- Tacche (markers) ---------- */
.lf-watch-marker {
    position: absolute;
    top: 50%;
    left: 50%;
    /* ruotiamo e trasliamo via JS; qui definiamo solo aspetto base */
    transform-origin: 50% 0%;
    pointer-events: none;
}

.lf-watch-marker.lf-watch-hour {
    width: var(--lf-hour-marker-width);
    height: var(--lf-hour-marker-len);
    background: var(--lf-text-color);
}

.lf-watch-marker.lf-watch-minute {
    width: var(--lf-minute-marker-width);
    height: var(--lf-minute-marker-len);
    background: var(--lf-muted-color);
}

/* ---------- Numeri (1–12) ----------
   JS imposta posizione/rotazione; qui solo stile tipografico */
.lf-watch-number {
    font-family: var(--font-family);
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(var(--lf-number-size) + 6px);
    height: calc(var(--lf-number-size) + 6px);
    transform: translate(-50%, -50%);
    font-size: var(--lf-number-size);
    font-weight: 700;
    color: var(--lf-text-color);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    z-index: 10;
    user-select: none;
    pointer-events: none;
}

/* Punto centrale */
.lf-watch-center {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    background: var(--lf-text-color);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}

/* ---------- Lancette ---------- */
.lf-watch-hand {
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: 50% 100%;
    transition: transform .25s ease;
    background: var(--lf-primary-color);
}

.lf-watch-hour-hand {
    width: var(--lf-hour-hand-width);
    height: var(--lf-hour-hand-len);
    border-radius: 1.5px;
    transform: translate(-50%, -100%) rotate(0deg); /* la JS sovrascrive rotate */
    z-index: 5;
}

.lf-watch-minute-hand {
    width: var(--lf-minute-hand-width);
    height: var(--lf-minute-hand-len);
    border-radius: 1px;
    transform: translate(-50%, -100%) rotate(0deg); /* la JS sovrascrive rotate */
    z-index: 6;
}

/* ---------- Selettori orari ---------- */
.lf-watch-selectors {
    display: flex;
    gap: var(--lf-space-2);
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.lf-watch-time-selector {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.lf-watch-time-selector label {
    font-size: 15px;
    font-weight: 600;
    color: var(--lf-text-color);
    margin: 0;
}

.lf-watch-time-selector select {
    padding: 6px 8px !important;
    border: var(--lf-border) !important;
    border-radius: var(--lf-radius) !important;
    background: #fff !important;
    color: var(--lf-text-color) !important;
    font-size: 17px !important;
    min-width: 64px !important;
    width: 64px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
}

.lf-watch-time-selector select:focus {
    outline: none;
    border-color: var(--lf-primary-color);
    box-shadow: 0 0 0 2px var(--lf-primary-color-light);
}

.lf-watch-time-selector select.selected {
    background: var(--lf-primary-color) !important;
    color: #fff !important;
    border-color: var(--lf-primary-color) !important;
}

.lf-watch-time-selector select.selected:focus {
    background: var(--lf-primary-color) !important;
    color: #fff !important;
    border-color: var(--lf-primary-color) !important;
    box-shadow: 0 0 0 2px var(--lf-primary-color-light) !important;
}

/* Dropdown options styling */
.lf-watch-time-selector select option {
    background: #fff;
    color: var(--lf-text-color);
    padding: 8px;
}

.lf-watch-time-selector select option:hover {
    background: var(--lf-primary-color-light);
    color: var(--lf-text-color);
}

.lf-watch-time-selector select option:checked {
    background: var(--lf-primary-color);
    color: #fff;
}

/* ---------- Timezone note ---------- */
.lf-watch-timezone {
    font-size: 15px;
    color: var(--lf-text);
    font-style: italic;
}

/* ---------- Preferenze riduzione animazioni ---------- */
@media (prefers-reduced-motion: reduce) {
    .lf-watch-hand { transition: none; }
}

/* ---------- Responsive ---------- */

/* General responsive improvements */
.lf-field-datepicker {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.lf-field-datepicker_datetime {
    width: 100%;
    max-width: 100%;
}

/* Tablet styles */
@media (max-width: 768px) {
    .lf-watch-dial-widget {
        --lf-watch-size: 180px;
        --lf-number-size: 13px;
        padding: var(--lf-space-2);
    }
    
    .lf-watch-selectors {
        gap: var(--lf-space-1);
    }
    
    .lf-watch-time-selector select {
        font-size: 16px !important;
        min-width: 60px !important;
        width: 60px !important;
        padding: 5px 6px !important;
    }
}

/* Mobile styles */
@media (max-width: 480px) {
    .lf-watch-dial-widget {
        --lf-watch-size: 160px;
        --lf-number-size: 12px;
        --lf-hour-hand-len:  calc(var(--lf-watch-size) * 0.24);
        --lf-minute-hand-len: calc(var(--lf-watch-size) * 0.33);
        --lf-hour-marker-len:  calc(var(--lf-watch-size) * 0.06);
        --lf-minute-marker-len: calc(var(--lf-watch-size) * 0.045);
        --lf-number-radius:    calc(var(--lf-watch-size) * 0.35);
        --lf-marker-margin:    calc(var(--lf-watch-size) * 0.05);
        padding: var(--lf-space-1);
        margin: 0 auto;
        max-width: 100%;
    }

    .lf-watch-dial-container {
        gap: var(--lf-space-2);
    }

    .lf-watch-selectors {
        flex-direction: column;
        gap: var(--lf-space-2);
        width: 100%;
        max-width: 200px;
        margin: 0 auto;
    }
    
    .lf-watch-time-selector {
        width: 100%;
    }
    
    .lf-watch-time-selector select {
        font-size: 15px !important;
        min-width: 100% !important;
        width: 100% !important;
        padding: 8px 12px !important;
        text-align: center;
    }
    
    .lf-watch-time-selector label {
        font-size: 14px;
        margin-bottom: 4px;
    }
    
    .lf-watch-timezone {
        font-size: 13px;
        text-align: center;
        margin-top: var(--lf-space-1);
    }
}

/* Very small mobile devices */
@media (max-width: 360px) {
    .lf-watch-dial-widget {
        --lf-watch-size: 140px;
        --lf-number-size: 11px;
        padding: var(--lf-space-1);
    }
    
    .lf-watch-selectors {
        max-width: 160px;
    }
    
    .lf-watch-time-selector select {
        font-size: 14px !important;
        padding: 6px 8px !important;
    }
    
    .lf-watch-time-selector label {
        font-size: 13px;
    }
}

/* Landscape orientation on mobile */
@media (max-width: 768px) and (orientation: landscape) {
    .lf-watch-dial-widget {
        --lf-watch-size: 150px;
        padding: var(--lf-space-1);
    }
    
    .lf-watch-dial-container {
        flex-direction: row;
        gap: var(--lf-space-2);
    }
    
    .lf-watch-selectors {
        flex-direction: row;
        gap: var(--lf-space-1);
        max-width: none;
    }
    
    .lf-watch-time-selector {
        width: auto;
    }
    
    .lf-watch-time-selector select {
        min-width: 50px !important;
        width: 50px !important;
        font-size: 14px !important;
        padding: 4px 6px !important;
    }
}

/* ---------- HARD RESET contro gli inline style preesistenti ----------
   Se il markup contiene ancora transform/left/top inline per numeri/markers,
   li neutralizziamo per evitare “ammassamento” al centro.
   (Gli stili corretti verranno applicati via JS al build del quadrante)
*/
.lf-watch-face .lf-watch-marker,
.lf-watch-face .lf-watch-number {
    left: 50% !important;
    top: 50% !important;

}