/* assets/style.css - styles basiques pour l'agenda */

:root 
{
  --bg: #f5f7fb;
  --card: #ffffff;
  --text: #222;
  --accent: #3788d8;
  --danger: #c0392b;
}

* 
{ 
box-sizing: border-box; 
}

body 
{ 
    margin: 0; 
    font-family: Arial, Helvetica, sans-serif; 
    background: var(--bg); 
    color: var(--text); 
}

.container 
{ 
    max-width: 1100px; 
    margin: 24px auto; 
    padding: 16px; 
}

.header 
{
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 12px; 
}

.controls 
{ 
    display: flex; 
    gap: 8px; 
    align-items: center; 
}

.controls button 
{
    padding: 6px 10px; 
    border: none; 
    background: var(--accent); 
    color: white; 
    border-radius: 4px; 
    cursor: pointer; 
}

.controls #monthLabel 
{
    font-weight: bold; 
    min-width: 220px; 
    text-align: center; 
}

#calendar 
{ 
    display: grid; 
    grid-template-columns: repeat(7, 1fr); 
    gap: 8px; 
}

.day-header 
{ 
    background: transparent; 
    text-align: center; 
    padding: 6px 0; 
    font-weight: bold; 
    color: #666; 
}

.day 
{
    min-height: 100px;
    background: var(--card);
    padding: 8px;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    position: relative;
    cursor: pointer;
}

.day .date-number 
{ 
    font-size: 14px; 
    font-weight: 600; 
    margin-bottom: 6px; 
}

.day .events 
{ 
    display: flex; 
    flex-direction: column; 
    gap: 4px; 
}

.event 
{
    padding: 4px 6px;
    border-radius: 4px;
    color: #fff;
    font-size: 13px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.other-month 
{ 
    opacity: 0.45; 
}

.modal 
{ 
    position: fixed; 
    inset: 0; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    background: rgba(0,0,0,0.35); 
    z-index: 50; 
}

.hidden 
{ 
    display: none; 
}

.modal-content 
{ 
    background: var(--card); 
    padding: 16px; 
    border-radius: 8px; 
    width: 360px; 
    box-shadow: 0 6px 20px rgba(0,0,0,0.15); 
}

.modal-content label 
{ 
    display: block; 
    margin-top: 8px; 
    font-size: 13px; 
}

.modal-content input[type="text"], .modal-content input[type="datetime-local"], .modal-content textarea, .modal-content input[type="color"] 
{
    width: 100%; 
    padding: 6px; 
    margin-top: 4px; 
    border: 1px solid #ddd; 
    border-radius: 4px;
}

.modal-actions 
{
    display: flex; 
    gap: 8px; 
    margin-top: 12px; 
    justify-content: flex-end; 
}

button.danger 
{ 
    background: var(--danger); 
    color: #fff; 
    border: none; 
    padding: 8px 10px; 
    border-radius: 4px; 
    cursor: pointer; 
}

button#cancelBtn 
{ 
    background: #eee; 
    border: none; 
    padding: 8px 10px; 
    border-radius: 4px; 
    cursor: pointer; 
}

@media (max-width: 700px) 
{
    .modal-content 
    { 
        width: 92%; 
    }
    #calendar 
    { 
        grid-template-columns: repeat(7, 1fr); 
    }
}