/* ══════════════════════════════════════════════════════════════
   Oanaqa – Calendrier horaire (Google Calendar style)
   Layout : full-width, panneau durée à droite
══════════════════════════════════════════════════════════════ */

/* ── Wrap principal ───────────────────────────────────────── */
#oanaqa-gcal {
    font-family: inherit;
    width: 100%;
    background: #fff;
    border: 1px solid #e0dbd4;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

/* ── Toolbar ──────────────────────────────────────────────── */
.ogc-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid #eee;
    background: #faf8f5;
    flex-wrap: wrap;
}
.ogc-toolbar-left  { display: flex; align-items: center; gap: 8px; flex: 1; }
.ogc-toolbar-right { display: flex; align-items: center; gap: 6px; }

.ogc-nav-btn {
    background: none; border: 1px solid #ddd; border-radius: 6px;
    width: 30px; height: 30px; cursor: pointer; font-size: 1rem;
    display: flex; align-items: center; justify-content: center;
    color: #444; transition: background 0.15s;
}
.ogc-nav-btn:hover { background: #f0ebe3; border-color: #8b7355; }

.ogc-today-btn {
    border: 1px solid #ddd; background: #fff; border-radius: 6px;
    padding: 5px 12px; font-size: 12px; font-weight: 600; cursor: pointer;
    color: #444; transition: background 0.15s;
}
.ogc-today-btn:hover { background: #f0ebe3; }

.ogc-period-label { font-size: 0.95rem; font-weight: 600; color: #2c2c2c; margin-left: 4px; }

.ogc-view-switch { display: flex; border: 1px solid #ddd; border-radius: 6px; overflow: hidden; }
.ogc-view-btn {
    background: none; border: none; padding: 5px 12px; font-size: 12px;
    cursor: pointer; color: #666; transition: background 0.15s;
}
.ogc-view-btn.active  { background: #8b7355; color: #fff; }
.ogc-view-btn:not(.active):hover { background: #f5f0ea; }

/* ── Layout avec panneau latéral ──────────────────────────── */
.ogc-body {
    display: flex;
    align-items: flex-start;
}

/* ── Vue Semaine ──────────────────────────────────────────── */
#ogc-week-view {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.ogc-week-header {
    display: grid;
    grid-template-columns: 52px repeat(7, 1fr); /* remplacé dynamiquement par le JS */
    border-bottom: 1px solid #eee;
    background: #faf8f5;
    position: sticky; top: 0; z-index: 10;
}
.ogc-col-time { /* vide */ }
.ogc-col-day-header {
    text-align: center; padding: 8px 4px;
    border-left: 1px solid #f0ebe3;
}
.ogc-col-day-header.ogc-past { opacity: 0.45; }
.ogc-day-name { display: block; font-size: 10px; font-weight: 700; color: #999; text-transform: uppercase; letter-spacing: .04em; }
.ogc-day-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%; font-size: 14px;
    font-weight: 500; color: #2c2c2c; margin-top: 2px;
}
.ogc-today .ogc-day-num,
.ogc-today-dot { background: #8b7355; color: #fff !important; }

.ogc-week-scroll { overflow-y: auto; max-height: 520px; }
.ogc-week-grid {
    display: grid;
    grid-template-columns: 52px repeat(7, 1fr);
}

.ogc-time-col { display: flex; flex-direction: column; }
.ogc-time-slot {
    height: 56px; border-bottom: 1px solid #f0f0f0;
    font-size: 10px; color: #bbb;
    display: flex; align-items: flex-start; justify-content: flex-end;
    padding: 3px 6px 0 0; box-sizing: border-box;
}

.ogc-day-col { border-left: 1px solid #f0ebe3; position: relative; }
.ogc-day-col.ogc-day-blocked {
    background: repeating-linear-gradient(
        135deg,
        #f5f0ea, #f5f0ea 4px,
        #ede8e0 4px, #ede8e0 8px
    );
}
.ogc-day-col.ogc-day-blocked .ogc-hour-slot { background: transparent; cursor: not-allowed; }
.ogc-hour-slot {
    height: 56px; border-bottom: 1px solid #f5f2ee;
    box-sizing: border-box; cursor: default; transition: background 0.1s;
}
.ogc-slot-free   { cursor: pointer; }
.ogc-slot-free:hover { background: rgba(139,115,85,0.08); }
.ogc-slot-past   { background: #fafafa; }
.ogc-slot-booked { background: repeating-linear-gradient(135deg,#f5f0ea,#f5f0ea 4px,#ede8e0 4px,#ede8e0 8px); cursor: not-allowed; }
.ogc-slot-outside { background: #f8f8f8; cursor: not-allowed; opacity: 0.5; }
.ogc-slot-selected { background: rgba(139,115,85,0.12) !important; }

/* Blocs réservés */
.ogc-booked-block {
    position: absolute; left: 2px; right: 2px;
    background: #c8b89a; border-radius: 4px;
    border-left: 3px solid #8b7355;
    z-index: 2; overflow: hidden;
    display: flex; align-items: flex-start; padding: 3px 5px;
}
.ogc-booked-block span { font-size: 10px; color: #5c3d1e; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Sélection en cours */
.ogc-selected-block {
    position: absolute; left: 2px; right: 2px;
    background: rgba(139,115,85,0.25);
    border: 2px solid #8b7355; border-radius: 4px;
    z-index: 3; display: flex; align-items: flex-start;
    justify-content: center; padding-top: 4px;
    pointer-events: none; overflow: hidden;
}
.ogc-selected-block span {
    font-size: 11px; font-weight: 700; color: #5c3d1e;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 100%; padding: 0 4px;
}

/* ── Vue Mois ─────────────────────────────────────────────── */
#ogc-month-view { padding: 16px; flex: 1; }

.ogc-month-grid {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
}
.ogc-month-dow {
    text-align: center; font-size: 10px; font-weight: 700;
    color: #bbb; text-transform: uppercase; padding: 6px 0;
}
.ogc-month-cell {
    position: relative; aspect-ratio: 1;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    border-radius: 8px; cursor: default;
    font-size: 13px; color: #9a9a9a; transition: background 0.12s;
}
.ogc-month-empty    { background: none; }
.ogc-past           { opacity: 0.3; }
.ogc-month-clickable { cursor: pointer; color: #2c2c2c; }
.ogc-month-clickable:hover { background: #f5f0ea; }
.ogc-month-num      { position: relative; z-index: 1; }
.ogc-today .ogc-month-num {
    background: #8b7355; color: #fff;
    width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.ogc-month-has-booked .ogc-month-num { font-weight: 700; }
.ogc-month-booked-dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: #8b7355; position: absolute; bottom: 5px;
}
.ogc-month-selected { background: #f0ebe3 !important; }

/* ── Panneau sélection (droite) ───────────────────────────── */
.ogc-side-panel {
    width: 220px;
    flex-shrink: 0;
    border-left: 1px solid #eee;
    background: #fdf9f5;
    padding: 20px 16px;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.ogc-side-panel-empty {
    color: #bbb;
    font-size: 12px;
    text-align: center;
    margin-top: 40px;
    line-height: 1.6;
}
.ogc-side-panel-empty::before {
    content: '⬅';
    display: block;
    font-size: 1.5rem;
    margin-bottom: 8px;
    opacity: 0.4;
}

.ogc-sel-info h4  { margin: 0 0 4px; font-size: 0.92rem; color: #2c2c2c; font-weight: 700; }
.ogc-sel-info p   { margin: 0; font-size: 0.8rem; color: #888; }

.ogc-sel-label { font-size: 11px; font-weight: 700; color: #666; text-transform: uppercase; letter-spacing: .04em; }

.ogc-dur-list  { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }

.ogc-dur-btn {
    border: 2px solid #e0dbd4; border-radius: 10px;
    background: #fff; padding: 10px 12px; cursor: pointer;
    font-size: 14px; font-weight: 700; color: #2c2c2c;
    transition: all 0.15s;
    display: flex; align-items: center; justify-content: space-between;
}
.ogc-dur-btn span { font-size: 11px; color: #888; font-weight: 400; }
.ogc-dur-btn:hover   { border-color: #8b7355; background: #fdf9f5; }
.ogc-dur-btn.selected { border-color: #8b7355; background: #8b7355; color: #fff; }
.ogc-dur-btn.selected span { color: rgba(255,255,255,0.75); }

.ogc-no-slots { font-size: 12px; color: #e65100; line-height: 1.5; margin-top: 4px; }

.ogc-cancel-sel {
    background: none; border: none; color: #aaa; cursor: pointer;
    font-size: 11px; padding: 4px 0; transition: color 0.15s; text-align: left;
    margin-top: auto;
}
.ogc-cancel-sel:hover { color: #666; }

/* ── Légende ──────────────────────────────────────────────── */
.ogc-legend {
    display: flex; gap: 16px; padding: 10px 16px;
    border-top: 1px solid #f0ebe3; background: #faf8f5;
    flex-wrap: wrap;
}
.ogc-legend-item { display: flex; align-items: center; gap: 5px; font-size: 11px; color: #888; }
.ogc-legend-dot  { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }

/* ── Loading ──────────────────────────────────────────────── */
.oanaqa-calendar-loading { padding: 40px; text-align: center; color: #999; }

/* ── Mobile ───────────────────────────────────────────────── */
@media (max-width: 640px) {

    /* Toolbar compacte sur une ligne */
    .ogc-toolbar {
        padding: 10px 12px;
        gap: 6px;
        flex-wrap: nowrap;
    }
    .ogc-toolbar-left { gap: 4px; min-width: 0; }
    .ogc-today-btn { padding: 5px 8px; font-size: 11px; white-space: nowrap; }
    .ogc-period-label { font-size: 0.82rem; margin-left: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .ogc-view-btn { padding: 5px 8px; font-size: 11px; }

    /* Layout empilé : calendrier au-dessus, panneau en bas */
    .ogc-body { flex-direction: column; }

    /* Vue semaine : colonnes gérées dynamiquement par le JS */
    .ogc-week-header { grid-template-columns: unset; }
    .ogc-week-grid   { grid-template-columns: unset; }

    /* Colonne temps plus étroite */
    .ogc-time-slot {
        font-size: 10px;
        padding-right: 4px;
        height: 52px;
    }
    /* Hauteur des slots réduite */
    .ogc-hour-slot { height: 52px; }
    .ogc-booked-block, .ogc-selected-block { /* recalculés en JS */ }

    /* Headers de jours */
    .ogc-day-name { font-size: 10px; letter-spacing: 0; }
    .ogc-day-num  { width: 26px; height: 26px; font-size: 13px; }
    .ogc-col-day-header { padding: 6px 2px; }

    /* Scroll vertical limité */
    .ogc-week-scroll { max-height: 380px; }

    /* Panneau durée : pleine largeur en bas */
    .ogc-side-panel {
        width: 100%;
        border-left: none;
        border-top: 1px solid #eee;
        min-height: auto;
        padding: 14px 16px;
    }
    .ogc-side-panel-empty { margin-top: 10px; font-size: 13px; }
    .ogc-side-panel-empty::before { font-size: 1.2rem; }

    /* Durées en ligne sur mobile */
    .ogc-dur-list { flex-direction: row; flex-wrap: wrap; gap: 8px; }
    .ogc-dur-btn  { flex: 1; min-width: 80px; justify-content: center; }

    /* Légende compacte */
    .ogc-legend { padding: 8px 12px; gap: 10px; }
    .ogc-legend-item { font-size: 10px; }
}

/* ── Bouton Confirmer ─────────────────────────────────────── */
.ogc-confirm-btn {
    width: 100%;
    padding: 12px;
    background: #8b7355;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    margin-top: 4px;
}
.ogc-confirm-btn:hover { background: #7a6347; }