/* ============================================================
   Planning Service Technique — Mairie de Freneuse (76410)
   Design system : mobile-first, clair, professionnel.
   Palette : bleu institutionnel + accents fonctionnels.
   ============================================================ */

:root {
  --bg: #f5f6f8;
  --surface: #ffffff;
  --border: #e3e6ea;
  --border-strong: #cfd4da;
  --text: #1a2530;
  --brand: #0f5aa0;
  --brand-dark: #0d4a80;
  --accent: #1a9e5c;
  --danger: #d63d3d;

  /* badges d'urgence : rouge = urgent → vert/bleu = planifié */
  --urg-urgent-bg: #fdecea;   --urg-urgent-fg: #c0392b;   --urg-urgent-bd: #f5b5ab;
  --urg-h24-bg:    #fff3e0;   --urg-h24-fg:    #c47a00;   --urg-h24-bd:    #f5d98a;
  --urg-h48-bg:    #fffbe6;   --urg-h48-fg:    #b39100;   --urg-h48-bd:    #ecdf7a;
  --urg-semaine-bg:#eaf3ff;   --urg-semaine-fg:#2568c0;   --urg-semaine-bd:#bcd8f2;
  --urg-mois-bg:   #ecf9f1;   --urg-mois-fg:    #2f9e6b;  --urg-mois-bd:    #a9dcc4;

  --radius: 10px;
  --shadow: 0 1px 3px rgba(15,40,70,.08), 0 4px 14px rgba(15,40,70,.06);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  color: var(--text); background: var(--bg); line-height: 1.45; font-size: 16px;
}
a { color: var(--brand); text-decoration: none; }
h1,h2,h3 { margin: 0; line-height: 1.2; }
button, .btn { cursor: pointer; }
.muted { color: #8b95a1; font-size: .9rem; }
.small { font-size: .78rem; }

/* ===== Marque ===== */
.brand-mark { border-radius: 12px; box-shadow: var(--shadow); display: block; }
.topbar .brand-mark { height: 48px; width: auto; max-width: 260px; object-fit: contain; box-shadow: none; border-radius: 0; }
.auth-card .brand-mark { margin-bottom: .75rem; max-width: 180px; display: block; margin-left: auto; margin-right: auto; }
/* ===== Connexion ===== */
.auth-body { min-height: 100vh; display: flex; flex-direction: column; padding: 2rem 1rem; background: linear-gradient(160deg, #eaf3ff 0%, var(--bg) 60%); }
.auth-body .auth-wrap { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; }
.auth-card { width: 100%; max-width: 400px; background: var(--surface); border-radius: 16px; padding: 2rem; box-shadow: var(--shadow); text-align: center; }
.auth-card h1 { font-size: 1.3rem; margin-bottom: .25rem; }
.auth-card form { text-align: left; margin-top: 1.25rem; }

/* ===== Formulaires ===== */
label { display: block; font-weight: 600; font-size: .92rem; margin: 0 0 .3rem; color: var(--text); }
input[type=text], input[type=password], input[type=date], input[type=time], input[type=number], select, textarea {
  width: 100%; padding: .65rem .75rem; border: 1.5px solid var(--border-strong);
  border-radius: 8px; font-size: 1rem; background: #fff; margin-bottom: 1rem; font-family: inherit;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); }

/* ===== Boutons ===== */
.btn { border: 0; border-radius: 8px; padding: .6rem 1.1rem; font-weight: 600; font-size: .95rem; transition: transform .05s, background .12s; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); }
.btn-ghost { background: transparent; border: 1.5px solid var(--border-strong); color: var(--text); padding: .4rem .8rem; font-size: .9rem; }
.btn-danger { background: #fbeeee; color: #b23a3a; border: 1px solid #f0c9c9; }
.btn-success { background: #eaf6ee; color: #1f7a46; border: 1px solid #a9dcc4; }

/* ===== Flash messages ===== */
.flash { border-radius: 8px; padding: .7rem 1rem; margin-bottom: .9rem; font-size: .95rem; position: relative; }
.flash-ok   { background: #eaf6ee; color: #1f7a46; border-left: 3px solid var(--accent); }
.flash-err  { background: #fbeeea; color: #b23a3a; border-left: 3px solid var(--danger); }
.flash-close { position: absolute; right:.5rem; top:.4rem; cursor: pointer; font-size:1.1rem; opacity:.6; line-height:1; background:none; border:0; color:inherit; }

/* ===== Barre supérieure ===== */
.topbar { display: flex; align-items: center; gap: .75rem; padding: .7rem 1rem; background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 10; }

/* ===== Pied de page ===== */
body { display: flex; flex-direction: column; min-height: 100vh; }
.site-footer { margin-top: auto; background: #2b3a4d; color: #cfd8e0; font-size: .85rem; padding: .9rem 1rem; line-height: 1.6; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .35rem .5rem; }
.site-footer a { color: #fff; }
.site-footer .footer-sep { opacity:.45; }

.tabs { display: flex; gap: .5rem; }
.tab { text-decoration: none; padding: .4rem .8rem; border-radius: 7px; color: #6b7a89; font-weight: 600; }
.tab.active { background: #eaf3ff; color: var(--brand); }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.user-chip { font-size: .9rem; white-space: nowrap; overflow:hidden; text-overflow: ellipsis; max-width: 240px; }

/* ===== Menu mobile : hamburger + panneau déroulant ======================= */
.menu-toggle { display:none; width:44px; height:44px; border-radius:8px; background:#eef2f7; color:#3a4a5b; font-size:1.2rem; line-height:1; border:0; cursor:pointer; }
.mobile-menu { position:absolute; top:100%; left:0; right:0; display:none; background:var(--surface); box-shadow: var(--shadow); padding:.6rem 1rem .8rem; z-index:99; }
.topbar.open .mobile-menu { display:block; }
.mobile-menu .tabs { flex-direction:column; gap:.25rem; margin-top:.4rem; }
.mobile-menu .tab { width:100%; text-align:left; padding:.6rem .8rem; border-radius:8px; background:#f4f6f8; color:#3a4a5b; font-weight:600; }
.mobile-menu .tab.active { background:#eaf3ff; color:var(--brand); }
.topbar-mobile-right { margin-top:.7rem; padding-top:.7rem; border-top:1px solid var(--border); }
.mobile-logout-btn { width:100%; text-align:center; font-weight:600; background:#eef2f7; color:#3a4a5b; border:0; border-radius:8px; padding:.6rem .8rem; cursor:pointer; }

@media (max-width: 640px) {
  /* Le header devient : logo + hamburger ; menu dans le panneau déroulant */
  .topbar { flex-wrap: wrap; }
  .menu-toggle { display:inline-flex; align-items:center; justify-content:center; margin-left:auto; }
  .topbar > .tabs, .topbar-right { display:none; }
  .brand-mark { max-height:42px; width:auto; object-fit:contain; }
}

.container { padding: 1.25rem; max-width: 1680px; margin: 0 auto; }
@media (max-width: 900px) { .container { padding: .75rem; } }

/* ===== Carte générique ===== */
.card { background: var(--surface); border-radius: 14px; box-shadow: var(--shadow); padding: 1.25rem; margin-bottom: 1rem; }
.card h3 { font-size: 1.02rem; margin-bottom:.9rem; }

/* ===== Toolbar planning ===== */
.toolbar { display:flex; align-items:center; gap:.75rem; margin-bottom: 1rem; flex-wrap:wrap; }
.toolbar-export { margin-left:auto; display:flex; gap:.35rem; font-size:.82rem; font-weight:600; }
.toolbar-export a { text-decoration:none; padding:.25rem .7rem; border-radius:999px; background:#eef2f7; color:#4a5a6b; border:1px solid var(--border-strong); transition:background .15s, color .15s; }
.toolbar-export a:hover { background:#dfe7f0; color:#1a2a3b; }

/* ===== Absences / journal de temps ===== */
.absence-row, .te-form, .abs-form { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; margin-bottom:.6rem; }
.absence-row input[type=date], .absence-row input[type=text], .te-form input[type=time], .te-form input[type=number], .abs-form input[type=date] { width: auto; min-width: 140px; margin-bottom:0; }
details summary { cursor:pointer; font-weight:700; list-style:none; }
details summary::before { content:"▸ "; color:#8b95a1; }
details[open] summary::before { content:"▾ "; }

/* ===== Grille planning : colonnes de jours, empilées sur mobile ===== */
.grid-wrap { overflow-x: auto; }
.day-cols { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; min-width: 720px; align-items: stretch; }

@media (max-width: 980px) { .day-cols { grid-template-columns: 1fr; min-width: 0; } }

.day-col { min-width: 0; background: var(--surface); border-radius: 14px; box-shadow: var(--shadow); padding: .75rem; min-height: 320px; display:flex; flex-direction:column; gap:.6rem; }
@media (max-width: 980px) { .day-col { min-height:auto; } }

.day-header { display:flex; justify-content:space-between; align-items:center; border-bottom:2px solid var(--border); padding-bottom:.4rem; }
.day-label { font-weight:700; color:#3a4a5b; font-size:.95rem; letter-spacing:.02em; }

/* ===== Slot (carte tâche) ===== */
.slot { background: #fff; border: 1px solid var(--border-strong); border-radius: 8px; box-shadow: 0 1px 2px rgba(15,40,70,.08); padding: .6rem .7rem; cursor: pointer; position: relative; }
.slot[data-urgence="urgent"] { border-left: 3px solid var(--danger); background: #fffdf9; }
.slot-title { font-weight: 700; font-size: .88rem; line-height:1.25; word-break: break-word; display:block; margin-bottom:.25rem; }
.slot-time-badge { font-size:.74rem; color:#6b7a89; }
.slot-note { font-size:.78rem; margin-top:.3rem; display:block; white-space:pre-wrap; }
.slot-agents { display: flex; flex-wrap: wrap; gap: 3px; margin-top: .45rem; }
.agent-chip { font-size:.72rem; background:#eef2f7; color:#3a4a5b; border-radius:999px; padding:.1rem .5rem; border:1px solid var(--border); display:inline-block; }
.slot-empty { font-size:.74rem; color:#8b95a1; font-style:italic; margin-top:.3rem; display:block; }
.slot-edit-btn { position:absolute; top:-0.4rem; right:.5rem; background:#eef2f7; border:1px solid var(--border-strong); border-radius:6px; padding:.1rem .5rem; font-size:.72rem; color:#3a4a5b; }
.slot-edit-btn:hover { background:#dfe7f0; }

/* ===== Badges urgence (pastilles uniformes) ============================ */
.badge[class*="urg"] { display:inline-block; padding:.08rem .45rem; border-radius:6px; font-size:.72rem; font-weight:700; letter-spacing:.01em; margin-right:.35rem; vertical-align:middle; }
.badge[class*="urgent"]   { background:#c0392b; color:#fff !important; border:1px solid #a5312a; }
.badge[class*="h24"]      { background: var(--urg-h24-bg);     color: var(--urg-h24-fg);     border:1px solid var(--urg-h24-bd); }
.badge[class*="h48"]      { background: var(--urg-h48-bg);     color: var(--urg-h48-fg);     border:1px solid var(--urg-h48-bd); }
.badge[class*="semaine"]  { background: var(--urg-semaine-bg); color: var(--urg-semaine-fg); border:1px solid var(--urg-semaine-bd); }
.badge[class*="mois"]     { background: var(--urg-mois-bg);    color: var(--urg-mois-fg);    border:1px solid var(--urg-mois-bd); }

/* ===== Modale ===== */
.modal-backdrop { position: fixed; inset: 0; background: rgba(20,30,45,.42); display:none; z-index:50; align-items:center; justify-content:center; padding:1rem; }
.modal-backdrop.show { display:flex; }
.modal { background:#fff; border-radius:14px; max-width:460px; width:100%; box-shadow:var(--shadow); max-height:92vh; overflow-y:auto; }
.modal-head { padding: 1rem 1.25rem .5rem; font-weight:700; font-size:1.05rem; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; gap:.8rem; }
.modal-body, form.slot-form { padding: 1rem 1.25rem 1.4rem; }
.modal .close-x { cursor:pointer; font-size:1.3rem; color:#8b95a1; line-height:1; background:none; border:0; }
.modal-sub { margin:.75rem 0 .5rem; font-size:.92rem; font-weight:700; }

/* ===== Comptes admin ===== */
table.accounts { width:100%; border-collapse:collapse; font-size:.92rem; min-width:480px; }
.accounts th, .accounts td { padding:.55rem .6rem; text-align:left; border-bottom:1px solid var(--border); vertical-align:middle; }
.accounts thead th { color:#8b95a1; font-size:.78rem; letter-spacing:.03em; text-transform:uppercase; }
.role-pill { display:inline-block; padding:.1rem .5rem; border-radius:999px; font-size:.72rem; font-weight:700; background:#eef2f7; color:#4a5a6b; }
.role-admin { background:#fff3d6; color:#8a5a00; }
.role-agent   { background:#e2ecff; color:#1d4ed8; }
.role-conseiller { background:#e0f4ea; color:#0a7d4f; }
.row-off { opacity:.5; }
.row-actions { display:flex; gap:.3rem; flex-wrap:wrap; align-items:center; }

/* ===== Vue calendrier (mensuel) — grille 6×7 ============================= */
.cal-wrap { overflow-x:auto; }
.calendar { width:100%; border-collapse:collapse; table-layout:fixed; min-width:560px; }
.calendar th { padding:.3rem .2rem; font-size:.68rem; letter-spacing:.04em; color:#8b95a1; text-transform:uppercase; border-bottom:2px solid var(--border-strong); }
.cal-cell { vertical-align:top; height:84px; border:1px solid var(--line); padding:.3rem; font-size:.72rem; position:relative; }
.cal-cell.other-month { background:#f6f7fa; color:#9aa5b0; }
.cal-cell.today { outline:2px solid var(--brand); outline-offset:-2px; }
.cal-daynum { display:inline-block; font-weight:700; font-size:.8rem; margin-bottom:.2rem; }
.cal-slot { display:block; padding:.15rem .35rem; border-radius:5px; margin-top:.15rem; color:#fff; background:#8b95a1; text-decoration:none; font-size:.72rem; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cal-time { opacity:.85; font-weight:600; }
.cal-plus { display:inline-block; width:1.2rem; height:1.2rem; line-height:1.2rem; text-align:center; border-radius:999px; background:#fff; color:var(--brand); border:1px solid var(--border-strong); font-weight:700; margin-right:.4rem; vertical-align:top; }
.cal-plus:hover { background:#eef2f7; }
/* Couleurs d'urgence alignées sur les badges de la vue hebdo */
.cal-cell .urg-urg-urgent   { background:#c0392b !important; color:#fff !important; }
.cal-cell .urg-urg-h24      { background:#e67e22 !important; color:#fff !important; }
.cal-cell .urg-urg-h48      { background:#f1c40f !important; color:#5a4800 !important; }
.cal-cell .urg-urg-semaine  { background:var(--brand) !important; color:#fff !important; }
.cal-cell .urg-urg-mois     { background:#9aa5b0 !important; color:#fff !important; }
/* Couleurs de statut (mêmes couleurs que les pastilles du planning) */
.cal-st-nouveau   { background: #2568c0 !important; color: #fff !important; }
.cal-st-encours   { background: #1a9e5c !important; color: #fff !important; }
.cal-st-termine   { background: #8b95a1 !important; color: #fff !important; }
.cal-st-retard    { background: #e67e22 !important; color: #fff !important; }
/* Urgence « Urgent » : rouge (priorité sur le status) */
.cal-cell .cal-slot.cal-st-urgent { background:#c0392b !important; color:#fff !important; }

/* ===== Navigation semaine / mois ========================================= */
.week-range, .month-title { font-weight:700; letter-spacing:.02em; min-width:14rem; text-align:center; }
.toolbar-week, .toolbar-month { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin-bottom:.9rem; }
.btn-nav { padding:.35rem .7rem; font-size:1.05rem; line-height:1; }

/* ===== Container étroit (calendrier) ==================================== */
.container-narrow { max-width: 820px; }
.cal-legend-note { display:block; margin-top:.4rem; font-size:.78rem; color:#8b95a1; }
.cal-legend-text { display:block; text-align:center; margin-bottom:.2rem; }
.cal-week-link { display:block; text-align:center; font-weight:600; }
.muted.small { font-size:.78rem; }

/* ===== Badges de date (vue hebdomadaire) ================================== */
.day-date-badge { display:inline-block; background:#fff; border:1px solid var(--border-strong); color:var(--muted); font-size:.72rem; padding:.05rem .4rem; margin-left:.4rem; vertical-align:middle; white-space:nowrap; }
.day-col[data-today] .day-date-badge { background:#fff3d6; color:#8a5a00; border-color:#f1c40f; font-weight:700; }

.toolbar-inline { margin-top:1rem; }
.field-row { margin-bottom: .8rem; }

/* ===== Résumé du jour (listing des tâches) ============================== */
.day-summary { border-left:4px solid var(--brand); }
.day-summary-head { display:flex; align-items:center; justify-content:space-between; gap:.6rem; flex-wrap:wrap; margin-bottom:.9rem; }
.day-summary h3 { margin-bottom:0; font-size:1.02rem; }
.day-nav { display:flex; align-items:center; gap:.45rem; }
.day-count { font-size:.8rem; color:#8b95a1; min-width:6rem; text-align:center; }
.day-table td, .day-table th { padding:.5rem .55rem; }
.day-cards-mobile { display:none; } /* masquée par défaut ; visible sous 640 px */
.day-time { white-space:nowrap; font-variant-numeric:tabular-nums; font-size:.82rem; color:#4a5a6b; min-width:7.5rem; }
.day-note { font-size:.78rem; margin-top:.15rem; }
.day-empty { font-size:.85rem; }

/* ===== Résumé du jour : version mobile (cartes empilées) ================ */
@media (max-width: 640px) {
  .day-cards-mobile { display:block; }
  .day-table { display:none; }
  .day-card { border:1px solid var(--border); background:#fff; border-radius:8px; padding:.7rem .85rem; margin-bottom:.6rem; box-shadow:0 1px 3px rgba(20,40,60,.05); }
  .dc-head { display:flex; align-items:baseline; gap:.6rem; margin-bottom:.25rem; }
  .dc-time { font-weight:700; color:#1a9e5c; font-variant-numeric:tabular-nums; white-space:nowrap; }
  .dc-period { font-size:.72rem; color:#8b95a1; }
  .dc-title { margin-bottom:.3rem; }
  .dc-badges { display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:.35rem; }
  .dc-agents { font-size:.78rem; color:#4a5a6b; margin-top:.25rem; }
}

/* ===== Slot multi-jours + période du listing ============================ */
.badge.slot-multi { background:#10b981; color:#fff; font-size:.62rem; letter-spacing:.03em; text-transform:uppercase; }
.day-period { font-size:.72rem; margin-top:2px; }

/* ===== Statut de tâche ================================================== */
.slot-status { display:block; font-size:.74rem; font-weight:700; color:#6b7a89; margin-top:.15rem; }
/* Vignette : badge Urgent en rouge (même style que le statut « En cours ») */
.slot .badge[class*="urg"] { background:#c0392b; color:#fff !important; border:1px solid #a5312a; padding:.08rem .45rem; border-radius:6px; display:inline-block; font-size:.74rem; font-weight:700; }
.st-nouveau   { color:#2568c0; background:#eaf1ff; padding:.05rem .35rem; border-radius:6px; display:inline-block; }
.st-encours   { color:#1f7a46; background:rgba(26,158,92,.08); padding:.05rem .35rem; border-radius:6px; display:inline-block; }
.st-termine   { color:#6b7a89; background:#eef2f6; padding:.05rem .35rem; border-radius:6px; display:inline-block; }
.st-retard    { color:#c47a00; background:#fff3e0; padding:.05rem .35rem; border-radius:6px; display:inline-block; }

/* Badge Status dans le listing (pills de couleur) */
.badge.status-badge { font-size:.72rem; font-weight:700; }
.badge.status-badge.st-nouveau   { background:#eaf1ff; color:#2568c0; border:1px solid #bcd8f2; }
.badge.status-badge.st-encours   { background:rgba(26,158,92,.08); color:#1f7a46; border:1px solid rgba(26,158,92,.3); }
.badge.status-badge.st-termine   { background:#eef2f6; color:#6b7a89; text-decoration:none; border:1px solid #d8e1ea; }
.badge.status-badge.st-retard    { background:#fff3e0; color:#c47a00; border:1px solid #f5d98a; }

/* ===== Bas de formulaire modale : Enregistrer / Annuler / Supprimer ===== */
.slot-form-btns { display:flex; gap:.5rem; flex-wrap:wrap; margin-left:15px; margin-right:15px; margin-bottom:15px; }
.slot-delete-row { margin-left:auto; display:inline-flex; align-items:center; }
.slot-delete-row .slot-delete-btn { font-size:.95rem; padding:.6rem 1.1rem; }

/* picker d'agents */
.agent-picker label { font-weight:400; font-size:.9rem; display:flex; gap:.4rem; align-items:center; margin-bottom:.4rem; cursor:pointer; }
.agent-picker input[type=checkbox] { width:auto; min-width:auto; margin:0 .35rem 0 0; accent-color: var(--brand); transform: scale(1.2); }