/* ── Wrapper ─────────────────────────────────────────────────────────────── */
#agenda-calendar-wrap {
    max-width: 820px;
    margin: 24px auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #2c3e50;
}

/* ── Header de navegação ────────────────────────────────────────────────── */
#agenda-calendar-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 16px;
    background: linear-gradient(135deg, #2980b9, #3498db);
    border-radius: 10px 10px 0 0;
    color: #fff;
    user-select: none;
}

#agenda-calendar-header button {
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.4);
    color: #fff;
    padding: 4px 14px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 18px;
    line-height: 1.4;
    transition: background .2s;
}

#agenda-calendar-header button:hover {
    background: rgba(255,255,255,.35);
}

#agenda-current-label {
    font-size: 22px;
    font-weight: 700;
    min-width: 210px;
    text-align: center;
    letter-spacing: .5px;
}

/* ── Grid do calendário ─────────────────────────────────────────────────── */
#agenda-calendar-grid {
    border: 1px solid #dde3ea;
    border-top: none;
    border-radius: 0 0 8px 8px;
    overflow: hidden;
    box-shadow: 0 3px 12px rgba(0,0,0,.08);
}

#agenda-calendar-grid table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

#agenda-calendar-grid th {
    background: #ecf3fb;
    color: #2980b9;
    padding: 9px 4px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    border-bottom: 2px solid #c9dff5;
}

#agenda-calendar-grid td {
    border: 1px solid #e8edf3;
    vertical-align: top;
    height: 90px;
    padding: 5px 6px;
    background: #fff;
    overflow: hidden;
}

/* Células vazias (padding do início do mês) */
.agenda-empty {
    background: #f6f8fb !important;
    cursor: default !important;
}

/* Dias clicáveis */
.agenda-day {
    cursor: pointer;
    transition: background .15s, transform .1s;
}

.agenda-day:hover {
    background: #eaf4fb !important;
}

.agenda-day:active {
    transform: scale(.97);
}

/* Número do dia */
.agenda-day-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 50%;
    color: #444;
}

/* Hoje */
.agenda-today .agenda-day-num {
    background: #3498db;
    color: #fff;
    font-weight: 700;
}

/* Dia com eventos */
.agenda-has-events {
    background: #fff9f9 !important;
}

/* Eventos dentro do quadro do dia */
.agenda-day-events {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 3px;
    overflow: hidden;
}

.agenda-day-event-item {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    border-radius: 3px;
    padding: 1px 3px;
    min-width: 0;
    transition: background .15s;
}

.agenda-day-event-item:hover {
    background: rgba(0,0,0,.08);
}

.agenda-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.agenda-day-event-title {
    font-size: 11px;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
    min-width: 0;
}

/* ── Lista de eventos do mês ─────────────────────────────────────────────── */
#agenda-events-list {
    margin-top: 20px;
    padding: 16px 18px;
    background: #f4f7fa;
    border-radius: 8px;
    border: 1px solid #dde3ea;
}

#agenda-events-list h4 {
    margin: 0 0 12px;
    color: #2980b9;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.agenda-no-events {
    color: #999;
    text-align: center;
    padding: 12px 0;
    font-size: 14px;
}

.agenda-events-ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.agenda-event-item {
    display: flex;
    align-items: stretch;
    background: #fff;
    border-radius: 7px;
    box-shadow: 0 1px 5px rgba(0,0,0,.07);
    cursor: pointer;
    overflow: hidden;
    transition: box-shadow .2s, transform .1s;
}

.agenda-event-item:hover {
    box-shadow: 0 4px 14px rgba(0,0,0,.13);
    transform: translateY(-1px);
}

.agenda-event-color-bar {
    width: 5px;
    flex-shrink: 0;
}

.agenda-event-info {
    padding: 9px 13px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.agenda-event-info strong {
    font-size: 14px;
    color: #2c3e50;
}

.agenda-event-meta {
    font-size: 12px;
    color: #7f8c8d;
}

.agenda-event-desc {
    margin: 3px 0 0;
    font-size: 12px;
    color: #666;
    white-space: pre-wrap;
}

/* ── Overlay ────────────────────────────────────────────────────────────── */
#agenda-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.48);
    z-index: 9000;
    backdrop-filter: blur(2px);
}

/* ── Modal ──────────────────────────────────────────────────────────────── */
#agenda-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 12px 48px rgba(0,0,0,.28);
    z-index: 9001;
    width: 400px;
    max-width: 95vw;
    max-height: 92vh;
    overflow-y: auto;
    padding: 26px 28px 22px;
    box-sizing: border-box;
}

#agenda-modal h3 {
    margin: 0 0 20px;
    font-size: 18px;
    color: #2c3e50;
    padding-bottom: 12px;
    border-bottom: 2px solid #eef2f7;
}

#agenda-modal label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 14px;
    font-size: 13px;
    color: #555;
    font-weight: 600;
}

#agenda-modal input[type="text"],
#agenda-modal textarea,
#agenda-modal input[type="time"],
#agenda-modal input[type="number"] {
    width: 100%;
    box-sizing: border-box;
    border: 1.5px solid #dde3ea;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 14px;
    color: #333;
    transition: border-color .2s, box-shadow .2s;
    background: #fafbfc;
    font-family: inherit;
}

#agenda-modal input[type="text"]:focus,
#agenda-modal textarea:focus,
#agenda-modal input[type="time"]:focus,
#agenda-modal input[type="number"]:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 3px rgba(52,152,219,.15);
    background: #fff;
}

#agenda-modal textarea {
    height: 80px;
    resize: vertical;
    line-height: 1.5;
}

/* Linha de dois campos lado a lado */
.agenda-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* Campo de cor */
.agenda-color-label {
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
}

#agenda-color {
    width: 48px !important;
    height: 36px;
    padding: 2px 3px;
    border: 1.5px solid #dde3ea;
    border-radius: 6px;
    cursor: pointer;
    flex-shrink: 0;
}

/* Botões do modal */
#agenda-modal-buttons {
    display: flex;
    gap: 8px;
    margin-top: 22px;
    justify-content: flex-end;
}

#agenda-modal-buttons button {
    padding: 9px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: opacity .2s, transform .1s;
    font-family: inherit;
}

#agenda-modal-buttons button:hover {
    opacity: .86;
}

#agenda-modal-buttons button:active {
    transform: scale(.97);
}

#agenda-save-event   { background: #27ae60; color: #fff; }
#agenda-delete-event { background: #e74c3c; color: #fff; }
#agenda-cancel-event { background: #bdc3c7; color: #fff; }

/* ── Responsivo ─────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    #agenda-current-label { min-width: 140px; font-size: 17px; }

    #agenda-calendar-grid td {
        height: 64px;
        padding: 3px 4px;
    }

    .agenda-day-event-title { font-size: 10px; }

    .agenda-day-num { width: 24px; height: 24px; font-size: 12px; }

    #agenda-calendar-grid th { font-size: 10px; padding: 7px 2px; }

    .agenda-dot { width: 6px; height: 6px; }

    .agenda-row-2 { grid-template-columns: 1fr; }
}