/* ===== HORAIRES INTELLIGENTS FRONTEND STYLES ===== */
/* Minimal, unopinionated base styles for broad compatibility */

/*
CUSTOMIZATION EXAMPLES:

1. Custom colors:
.horaires-intelligents {
    --horaires-open-color: #28a745;
    --horaires-closed-color: #dc3545;
}

2. Custom spacing:
.horaires-intelligents {
    --horaires-spacing: 1rem;
}

3. Custom current day styling:
.horaires-intelligents {
    --horaires-current-day-weight: bold;
}

4. Disable animation:
.horaires-intelligents {
    animation: none !important;
    opacity: 1 !important;
}

5. Add borders/backgrounds in your theme:
.horaires-all-days { 
    border: 1px solid var(--your-border-color);
    background: var(--your-bg-color);
    padding: 1rem;
}

6. Style individual formats differently:
.horaires-today { your styles }
.horaires-all-days { your styles }  
.horaires-list { your styles }
*/

/* CSS Custom Properties for easy customization */
.horaires-intelligents {
    --horaires-font-family: inherit;
    --horaires-line-height: 1.5;
    --horaires-font-size: inherit;
    --horaires-text-color: inherit;
    --horaires-open-color: currentColor;
    --horaires-closed-color: currentColor;
    --horaires-current-day-weight: 600;
    --horaires-border-color: currentColor;
    --horaires-spacing: 0.5em;
}

/* Base styles for all formats */
.horaires-intelligents {
    font-family: var(--horaires-font-family);
    line-height: var(--horaires-line-height);
    font-size: var(--horaires-font-size);
    color: var(--horaires-text-color);
}

/* Today format (default, backward compatible) */
.horaires-today {
    display: inline-flex;
    align-items: center;
}

.horaires-today .jour {
    font-weight: var(--horaires-current-day-weight);
}

.horaires-today .divider {
    margin: 0 0.25em;
}

.horaires-today .divider::before {
    content: " : ";
}

.horaires-today .status {
    color: var(--horaires-open-color);
}

.horaires-today .status.closed {
    color: var(--horaires-closed-color);
}

/* All days format */
.horaires-all-days .store-name {
    font-weight: 700;
    margin-bottom: var(--horaires-spacing);
}

.horaires-jour {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: var(--horaires-spacing) 0;
}

.horaires-jour.current-day {
    font-weight: var(--horaires-current-day-weight);
}

.horaires-jour .jour {
    flex-shrink: 0;
}

.horaires-jour .divider {
    margin: 0 0.5em;
}

.horaires-jour .divider::before {
    content: " : ";
}

.horaires-jour .status {
    color: var(--horaires-open-color);
    text-align: right;
}

.horaires-jour .status.closed {
    color: var(--horaires-closed-color);
}

/* List format (with store information) */
.horaires-list .store-header h4 {
    margin: 0 0 var(--horaires-spacing) 0;
    font-weight: 700;
}

.horaires-list .store-address {
    margin: calc(var(--horaires-spacing) * 0.5) 0;
}

.horaires-list .store-phone {
    font-weight: 600;
    margin: calc(var(--horaires-spacing) * 0.5) 0 0 0;
}

.horaires-table-wrapper {
    margin-top: 1em;
    overflow-x: auto;
}

.horaires-table {
    width: 100%;
    border-collapse: collapse;
}

.horaires-row.current-day {
    font-weight: var(--horaires-current-day-weight);
}

.jour-cell {
    padding: var(--horaires-spacing);
    vertical-align: top;
}

.hours-cell {
    padding: var(--horaires-spacing);
    text-align: right;
}

.hours-cell .status {
    color: var(--horaires-open-color);
}

.hours-cell .status.closed {
    color: var(--horaires-closed-color);
}

/* Error states */
.error {
    font-style: italic;
}

/* Essential responsive behavior */
@media(min-width: 768px){
    .horaires-jour .jour {
        width: 20%;
    }
    .horaires-jour .divider {
        width: 2%;
    }
    .horaires-jour .status {
        width: 78%;
    }
}
@media (max-width: 768px) {
    .horaires-jour {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .horaires-jour .divider {
        display: none;
    }
    
    .horaires-row {
        display: table-row;
    }
    
    .jour-cell {
        width: auto;
    }
    
    .hours-cell {
        text-align: left;
    }
}

/* Minimal animation - can be easily disabled */
.horaires-intelligents {
    opacity: 0;
    animation: horaires-fadein 0.3s ease-out forwards;
}

@keyframes horaires-fadein {
    to { opacity: 1; }
}