/* agenda : calendrier central, calendrier annuel, « Mon organisation », « À traiter » (chargé après style.css) */

/* pastilles de type : orange = tâche, violet / couleur du projet = projet, vert = entretien, bleu = réunion / RDV, rose = événement */
.ag-dot { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--muted); }
.ag-dot.t-task { background: var(--t-task); }
.ag-dot.t-project { background: var(--pc, var(--t-project)); }
.ag-dot.t-interview { background: var(--t-interview); }
.ag-dot.t-meeting { background: var(--t-meeting); }
.ag-dot.t-event, .ag-dot.t-annual { background: var(--t-event); }

/* barre d'outils */
.ag-toolbar { display: grid; gap: 12px; }
.ag-toolbar .row.wrap { flex-wrap: wrap; gap: 8px 12px; align-items: end; }
.ag-actions { justify-content: flex-end; }
.ag-types { display: flex; flex-wrap: wrap; gap: 6px; }
.ag-type { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 999px; min-height: 36px; padding: 4px 13px; font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; }
.ag-type:hover { border-color: var(--sage); }
.ag-type[aria-pressed="true"] { background: var(--surface-2); border-color: var(--brand); color: var(--ink); box-shadow: inset 0 0 0 1px var(--brand); }
.ag-period { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.ag-period input[type=date] { width: auto; min-height: 40px; padding: 6px 10px; }
.ag-period label { margin: 0; font-weight: 600; color: var(--muted); }
.ag-filters { align-items: end; }
.ag-filters .field { margin: 0; }
.ag-person-filter { display: flex; align-items: center; gap: 8px; }
.ag-person-filter label { margin: 0; font-weight: 600; color: var(--muted); }
.ag-person-filter select { width: auto; min-width: 180px; }
.ag-count { margin: 0; text-align: right; }

/* puces : le titre de l'élément, directement dans la case. Couleur = type, rouge = en retard, barré = fait */
.ag-dot.t-deadline { background: var(--t-deadline); }
.ag-dot.t-late { background: var(--alert-red); }
.ag-items { gap: 3px; }
.ag-chip { --tc: var(--muted); display: flex; align-items: center; gap: 5px; width: 100%; min-width: 0; text-align: left; border: 0; border-left: 3px solid var(--tc); background: color-mix(in srgb, var(--tc) 11%, #fff); color: var(--ink); font: inherit; font-size: .76rem; line-height: 1.25; font-weight: 650; padding: 3px 6px; border-radius: 6px; cursor: pointer; }
.ag-chip.t-task { --tc: var(--t-task); }
.ag-chip.t-project { --tc: var(--pc, var(--t-project)); }
.ag-chip.t-interview { --tc: var(--t-interview); }
.ag-chip.t-meeting { --tc: var(--t-meeting); }
.ag-chip.t-event { --tc: var(--t-event); }
.ag-chip.t-deadline { --tc: var(--t-deadline); }
.ag-chip:hover { background: color-mix(in srgb, var(--tc) 22%, #fff); }
.ag-chip .ag-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ag-chip.wide .ag-title { white-space: normal; overflow-wrap: anywhere; }
.ag-chip .ag-time { color: var(--muted); font-weight: 700; flex: none; }
.ag-chip .ag-urgent { flex: none; color: #fff; background: var(--alert-red); border-radius: 50%; width: 15px; height: 15px; display: inline-flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 800; }
.ag-chip.late { --tc: var(--alert-red); background: var(--bad-bg); color: var(--bad); }
.ag-chip.done { opacity: .6; }
.ag-chip.done .ag-title { text-decoration: line-through; }
.ag-chip:focus-visible, .ag-row-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.ag-body .cal-cell { min-height: 118px; }
@media (max-width: 640px) {
  .ag-body .cal-cell { min-height: 60px; }
  .ag-chip:not(.wide) { height: 6px; padding: 0; border: 0; border-radius: 3px; background: var(--tc); font-size: 0; gap: 0; }
  .ag-chip:not(.wide) .ag-title, .ag-chip:not(.wide) .ag-time, .ag-chip:not(.wide) .ag-urgent { display: none; }
}

/* barre du calendrier : ‹ › titre · Aujourd'hui · Année Mois Semaine Jour */
.ag-nav { flex-wrap: wrap; }
.ag-nav .month-title { flex: 0 1 auto; min-width: 0; text-align: left; font-size: 1.25rem; margin: 0 6px; }
.ag-step { min-width: 40px; padding-left: 10px; padding-right: 10px; }
.ag-views { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.ag-views .segbtn { min-height: 40px; padding: 6px 14px; }
.ag-bar, .ag-bar2 { gap: 8px 12px; }

/* semaine */
.ag-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface); }
.ag-wday { display: flex; flex-direction: column; min-height: 300px; border-left: 1px solid var(--line); }
.ag-wday:first-child { border-left: 0; }
.ag-wday.weekend { background: var(--surface-2); }
.ag-wdate { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 4px; border: 0; border-bottom: 1px solid var(--line); background: var(--surface-2); color: var(--ink); font: inherit; cursor: pointer; }
.ag-wdate:hover { background: color-mix(in srgb, var(--honey) 25%, #fff); }
.ag-wname { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
.ag-wnum { font-size: 1.2rem; font-weight: 800; }
.ag-wtoday { font-size: .68rem; font-weight: 800; color: var(--brand-strong); }
.ag-wday.today .ag-wdate { background: color-mix(in srgb, var(--honey) 42%, #fff); }
.ag-wlist { display: grid; gap: 4px; padding: 6px; align-content: start; }
.ag-wnone { text-align: center; color: var(--line-strong); }
@media (max-width: 860px) {
  .ag-week { grid-template-columns: 1fr; }
  .ag-wday { display: grid; grid-template-columns: 84px minmax(0, 1fr); min-height: 0; border-left: 0; border-top: 1px solid var(--line); }
  .ag-wday:first-child { border-top: 0; }
  .ag-wdate { border-bottom: 0; border-right: 1px solid var(--line); justify-content: center; }
  .ag-wnone { text-align: left; padding: 4px 6px; }
}

/* jour */
.ag-daytitle { margin: 0 0 8px; font-size: 1.05rem; }
.ag-dayview .empty { display: grid; gap: 10px; justify-items: center; }

/* année */
.ag-year { display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 14px; }
.ag-ymonth { border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; background: var(--surface); display: grid; gap: 6px; align-content: start; }
.ag-ymonth.current { border-color: var(--brand); }
.ag-ytitle { display: flex; justify-content: space-between; align-items: center; border: 0; background: none; color: var(--ink); font: inherit; font-weight: 750; text-align: left; cursor: pointer; padding: 2px 0; min-height: 32px; }
.ag-ycount { background: var(--surface-2); border-radius: 999px; padding: 0 9px; font-size: .75rem; font-weight: 700; }
.ag-ygrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.ag-yhead { text-align: center; font-size: .68rem; color: var(--muted); font-weight: 700; }
.ag-yday { display: flex; flex-direction: column; align-items: center; gap: 1px; border: 0; background: none; padding: 3px 0 2px; border-radius: 8px; cursor: pointer; font: inherit; color: var(--ink); min-height: 34px; }
.ag-yday:hover { background: var(--surface-2); }
.ag-ynum { font-size: .8rem; font-weight: 500; min-width: 1.7em; text-align: center; }
.ag-yday.has .ag-ynum { font-weight: 800; }
.ag-yday.today .ag-ynum { background: var(--honey); color: var(--on-honey); border-radius: 999px; font-weight: 800; }
.ag-ydots { display: flex; gap: 2px; min-height: 6px; }
.ag-ydots .ag-dot { width: 6px; height: 6px; }

/* liste par jour */
.ag-list { display: grid; gap: 14px; }
.ag-day h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 0 0 4px; }
.ag-day.today h3 { color: var(--ink); }
.ag-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ag-row-btn { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; border-radius: 12px; padding: 10px 14px; min-height: 48px; cursor: pointer; }
.ag-row-btn:hover { border-color: var(--sage); background: var(--surface-2); }
.ag-row-main { display: grid; gap: 1px; flex: 1 1 auto; min-width: 0; }
.ag-row-title { font-weight: 650; overflow-wrap: anywhere; }
.ag-row.done .ag-row-title { text-decoration: line-through; color: var(--muted); }
.ag-row.late .ag-row-btn { border-left: 3px solid var(--alert-red); }
.ag-st.late { background: var(--bad-bg); color: var(--bad); }
.ag-st.done { background: var(--ok-bg); color: var(--ok); }
.ag-st.skipped { background: var(--surface-2); color: var(--muted); }

/* fiche d'un élément, fenêtre du jour, ajout */
.ag-info-head { display: flex; gap: 12px; align-items: flex-start; }
.ag-info-head .ag-dot { margin-top: 8px; width: 12px; height: 12px; }
.ag-info-head h2 { margin: 0; overflow-wrap: anywhere; }
.ag-facts { display: grid; gap: 8px; margin: 0; }
.ag-facts > div { display: grid; grid-template-columns: 9.5em 1fr; gap: 8px; }
.ag-facts dt { color: var(--muted); font-size: .88rem; }
.ag-facts dd { margin: 0; overflow-wrap: anywhere; }
.ag-desc { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--surface-2); border-radius: 12px; padding: 10px 12px; margin: 0; }
.ag-add { display: grid; gap: 8px; }
.ag-add-btn { display: grid; gap: 2px; text-align: left; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; border-radius: 12px; padding: 12px 14px; cursor: pointer; }
.ag-add-btn:hover { border-color: var(--sage); background: var(--surface-2); }
@media (max-width: 520px) { .ag-facts > div { grid-template-columns: 1fr; gap: 0; } }

/* formulaire d'un élément d'agenda */
.ag-site-fixed { margin: 0; font-weight: 650; }
.ag-aud { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; }
.ag-radio { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 500; }
.ag-radio input { width: auto; min-height: 0; }
.ag-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 4px 12px; max-height: 190px; overflow: auto; border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; }
.ag-person { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 500; }
.ag-person input { width: auto; min-height: 0; }

/* calendrier annuel */
.an-months { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; align-items: start; }
.an-month { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; background: var(--surface); display: grid; gap: 6px; break-inside: avoid; }
.an-month h3 { margin: 0; font-size: .95rem; }
.an-month.quiet { background: var(--surface-2); border-style: dashed; }
.an-month.quiet h3 { color: var(--muted); }
.an-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.an-btn { display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left; border: 0; background: transparent; font: inherit; color: var(--ink); padding: 6px 4px; border-radius: 8px; cursor: pointer; }
.an-btn:hover { background: var(--surface-2); }
.an-date { font-weight: 700; font-size: .8rem; color: var(--t-event); }
.an-main { display: grid; gap: 1px; min-width: 0; flex: 1 1 auto; }
.an-main strong { overflow-wrap: anywhere; }

/* « À traiter » (accueil direction) */
.todo { display: grid; gap: 12px; }
.todo-head { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; }
.todo-head h2 { margin: 0; }
.todo-counts { display: flex; gap: 8px; flex-wrap: wrap; }
.todo-count { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .9rem; }
.lv-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.lv-dot.red { background: var(--alert-red); }
.lv-dot.orange { background: var(--alert-orange); }
.lv-dot.blue { background: var(--alert-blue); }
.todo-filters { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.todo-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.todo-item { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; border-radius: 12px; padding: 10px 14px; min-height: 52px; cursor: pointer; }
.todo-item:hover { border-color: var(--sage); background: var(--surface-2); }
.todo-item:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.todo-item.red { border-left: 4px solid var(--alert-red); }
.todo-item.orange { border-left: 4px solid var(--alert-orange); }
.todo-item.blue { border-left: 4px solid var(--alert-blue); }
.todo-main { display: grid; gap: 1px; flex: 1 1 auto; min-width: 0; }
.todo-title { font-weight: 650; overflow-wrap: anywhere; }
.todo-go { color: var(--muted); font-weight: 700; flex: none; }
.todo-empty { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; background: var(--surface-2); color: var(--muted); }
.todo-empty strong { color: var(--ok); }
.dash-more > summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; }

/* Mon organisation (salarié) et bloc « Aujourd'hui » */
.org-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.org-section { display: grid; gap: 8px; }
.org-section > h3 { margin: 0; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.today-card { display: grid; gap: 12px; }
.today-card h2 { margin: 0; }
.today-sub { display: grid; gap: 6px; }
.today-sub > h3 { margin: 0; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.today-hours { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.today-hours strong { font-size: 1.15rem; }
.today-info { border-left: 4px solid var(--honey-strong); background: var(--surface-2); border-radius: 10px; padding: 8px 12px; }

@media print {
  .ag-toolbar, .no-print { display: none !important; }
  .ag-row-btn { border: 0; padding: 4px 0; min-height: 0; }
  .an-months { grid-template-columns: 1fr 1fr; }
}

/* espace salarié : cinq espaces sur un téléphone */
.tabs-main.tabs-many .tab { font-size: .7rem; padding-left: 0; padding-right: 0; }
@media (min-width: 560px) { .tabs-main.tabs-many .tab { font-size: .9rem; } }

/* ---------------------------------------------------------------------- */
/* Accueil de la direction : Aujourd'hui · En retard · À venir, puis le planning */
/* ---------------------------------------------------------------------- */
.hm-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 8px 16px; }
.hm-head h2 { font-size: 1.5rem; }
.hm-pill { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 999px; min-height: 40px; padding: 6px 14px; font: inherit; font-weight: 700; cursor: pointer; }
.hm-pill:hover { border-color: var(--sage); }
.hm-pill.red { border-color: var(--alert-red); background: var(--bad-bg); color: var(--bad); }
.hm-focus { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.hm-col { display: grid; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--sage); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); }
.hm-col.hm-today { border-top-color: var(--honey); }
.hm-col.hm-late { border-top-color: var(--alert-red); }
.hm-col header { display: grid; gap: 1px; }
.hm-col header h2 { display: flex; align-items: center; gap: 8px; font-size: 1.05rem; }
.hm-count { background: var(--surface-2); border-radius: 999px; padding: 0 9px; font-size: .82rem; font-weight: 800; }
.hm-count.red { background: var(--alert-red); color: #fff; }
.hm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.hm-row { display: flex; align-items: flex-start; gap: 10px; padding: 6px 4px; border-radius: 10px; }
.hm-row:hover { background: var(--surface-2); }
.hm-row > .ag-dot { margin: 6px 5.5px 0; width: 11px; height: 11px; }
.hm-check { position: relative; flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; border: 2px solid var(--t-task); background: #fff; cursor: pointer; padding: 0; }
.hm-check::after { content: ''; position: absolute; inset: -9px; }
.hm-check:hover { background: var(--ok-bg); border-color: var(--ok); }
.hm-row.late .hm-check { border-color: var(--alert-red); }
.hm-open { display: grid; gap: 1px; text-align: left; flex: 1 1 auto; min-width: 0; border: 0; background: none; font: inherit; color: var(--ink); cursor: pointer; padding: 0; }
.hm-title { font-weight: 650; overflow-wrap: anywhere; }
.hm-row.late .hm-sub { color: var(--bad); font-weight: 650; }
.hm-row.done .hm-title { text-decoration: line-through; color: var(--muted); }
.hm-empty { margin: 0; padding: 6px 0; color: var(--muted); }
.hm-empty.ok { color: var(--ok); font-weight: 650; }
.hm-more { justify-self: start; }
.hm-cal { display: grid; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); }
.hm-caltitle h2 { font-size: 1.25rem; }
.hm-calbody { display: grid; gap: 12px; }
.hm-legend { display: flex; align-items: center; gap: 6px; margin: 0; }
@media (max-width: 980px) { .hm-focus { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .hm-cal { padding: 12px; } .hm-col { padding: 12px; } }

/* fiche rapide d'une tâche */
.tq-date { display: grid; gap: 8px; }
.tq-date .row input { width: auto; flex: 1 1 10rem; }
.tq-buttons .btn { flex: 1 1 130px; }
.badge.ag-st.todo { background: var(--surface-2); color: var(--ink); }

/* l'accueil de la direction profite de la largeur : le planning est le cœur de la page */
.app.wide:has(.hm-focus) { max-width: 1360px; }

@media (max-width: 640px) {
  .ag-nav .month-title { flex: 1 0 100%; order: -1; margin: 0 0 4px; font-size: 1.1rem; }
  .ag-views { display: flex; width: 100%; }
  .ag-views .segbtn { flex: 1 1 0; padding: 6px 4px; }
  .ag-actions { width: 100%; }
  .ag-actions .btn { flex: 1 1 auto; }
}