/*! Task’in — © 2026 Fandry Ekwalla. Tous droits réservés. */
/* ===== Planning (Team shift) ===== */
.planning-section { max-width: 1240px; margin: 0 auto; }
.plan-head { margin: 4px 0 14px; }
.plan-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--text3); }
.plan-head h2 { margin: 2px 0 4px; font-size: 22px; }
.plan-head p { margin: 0; color: var(--text2); font-size: 13px; max-width: 760px; line-height: 1.5; }
.plan-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; margin-bottom: 14px; }
.plan-muted { color: var(--text3); font-size: 12px; line-height: 1.5; }
.plan-empty b { display: block; font-size: 15px; margin-bottom: 4px; }
.plan-empty p { margin: 0; color: var(--text2); font-size: 13px; }
.plan-alert { background: color-mix(in srgb, var(--amber) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--amber) 40%, transparent); border-radius: 10px; padding: 8px 12px; font-size: 12.5px; margin: 8px 0; }
.plan-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 10px; }
.plan-toolbar .form-input { width: auto; min-width: 150px; }
.plan-nav { display: inline-flex; align-items: center; gap: 6px; }
.plan-nav b { font-size: 13.5px; min-width: 10ch; text-align: center; }
.plan-status { font-size: 12px; color: var(--green); margin-left: auto; }
.plan-status.is-error { color: var(--red); }
.plan-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11.5px; color: var(--text2); margin-bottom: 8px; }
.plan-legend i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; background: var(--c); margin-right: 5px; vertical-align: -1px; }
.plan-legend i.is-off { background: repeating-linear-gradient(135deg, var(--c) 0 2px, transparent 2px 4px); border: 1px solid var(--c); }
.plan-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.plan-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; min-width: 900px; }
.plan-table th, .plan-table td { padding: 4px; text-align: center; border-bottom: 1px solid var(--surface2); }
.plan-table thead th { font-size: 12px; color: var(--text2); font-weight: 700; padding: 6px 4px; }
.plan-table thead th small, .plan-table tfoot small, .plan-agent small { display: block; font-weight: 500; color: var(--text3); font-size: 10.5px; }
.plan-table thead th.is-today { color: var(--ocean); }
.plan-agent { text-align: left !important; white-space: nowrap; position: sticky; left: 0; background: var(--surface); z-index: 1; }
.plan-agent > span:last-child { display: inline-block; vertical-align: middle; margin-left: 6px; font-weight: 600; }
.plan-agent .mini-avatar { vertical-align: middle; }
.plan-pole-row th { text-align: left !important; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--c); padding-top: 12px; }
.plan-cell { min-width: 120px; }
.plan-select { text-overflow: ellipsis; }
.plan-select { width: 100%; font: inherit; font-size: 12px; padding: 5px 6px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; }
.plan-cell.is-work .plan-select { border-color: color-mix(in srgb, var(--c) 55%, transparent); background: color-mix(in srgb, var(--c) 12%, var(--surface)); font-weight: 600; }
.plan-cell.is-off .plan-select, .plan-cell.is-conge .plan-select, .plan-cell.is-maladie .plan-select, .plan-cell.is-formation .plan-select { border-color: color-mix(in srgb, var(--c) 50%, transparent); background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--c) 10%, var(--surface)) 0 6px, var(--surface) 6px 12px); color: var(--c); font-weight: 600; }
.plan-cell.is-today { background: color-mix(in srgb, var(--ocean) 6%, transparent); }
.plan-week-cell { min-width: 140px; }
.plan-week-cell .plan-select { color: var(--text2); border-style: dashed; }
.plan-table tfoot th, .plan-table tfoot td { border-bottom: 0; padding-top: 8px; font-size: 12px; }
.plan-table tfoot th { text-align: left; }
/* Options de shift (admin) */
.plan-opts { display: grid; gap: 8px; margin: 8px 0 12px; }
.plan-opt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; }
.plan-opt.is-inactive { opacity: .6; }
.plan-opt-new { border-style: dashed; }
.plan-opt input[type="color"] { width: 34px; height: 30px; padding: 0; border: 1px solid var(--border); border-radius: 8px; background: none; cursor: pointer; }
.plan-opt [data-f="label"] { flex: 1 1 160px; min-width: 120px; }
.plan-opt input[type="time"] { width: 110px; }
.plan-opt small { color: var(--text3); font-size: 11.5px; min-width: 110px; }
.plan-opt-actions { display: inline-flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.dr-edit-btn.is-danger { color: var(--red); }
.dr-edit-btn.is-primary { background: var(--ocean); color: #fff; border-color: var(--ocean); }
/* Agent : Mon planning */
.plan-h3 { font-size: 13px; margin: 14px 0 8px; color: var(--text2); }
.plan-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.plan-day { border: 1px solid var(--border); border-radius: 10px; padding: 8px; min-height: 62px; display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.plan-day > span { color: var(--text3); font-size: 11px; }
.plan-day b { font-size: 13px; }
.plan-day small { color: var(--text3); font-size: 11px; }
.plan-day.is-work { border-color: color-mix(in srgb, var(--c) 50%, transparent); background: color-mix(in srgb, var(--c) 9%, var(--surface)); }
.plan-day.is-off, .plan-day.is-conge, .plan-day.is-maladie, .plan-day.is-formation { border-color: color-mix(in srgb, var(--c) 45%, transparent); background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--c) 8%, var(--surface)) 0 6px, var(--surface) 6px 12px); }
.plan-day.is-off b, .plan-day.is-conge b, .plan-day.is-maladie b, .plan-day.is-formation b { color: var(--c); }
.plan-day.is-today { box-shadow: 0 0 0 2px var(--ocean); }
.plan-today { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.plan-day.is-big b { font-size: 18px; }
.plan-today > div:last-child { border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.plan-today > div:last-child span { color: var(--text3); font-size: 11px; }
.plan-today > div:last-child b { font-size: 16px; }
.plan-today > div:last-child small { color: var(--text3); }
.plan-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.plan-month > b { font-size: 11px; color: var(--text3); text-align: center; padding: 2px 0; }
.plan-mday { border: 1px solid var(--surface2); border-radius: 8px; min-height: 48px; padding: 4px 5px; font-size: 11px; display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.plan-mday span { font-weight: 700; color: var(--text2); }
.plan-mday small { font-size: 10.5px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plan-mday.is-out { opacity: .4; }
.plan-mday.is-work { background: color-mix(in srgb, var(--c) 10%, var(--surface)); border-color: color-mix(in srgb, var(--c) 35%, transparent); }
.plan-mday.is-off, .plan-mday.is-conge, .plan-mday.is-maladie, .plan-mday.is-formation { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--c) 9%, var(--surface)) 0 5px, var(--surface) 5px 10px); }
.plan-mday.is-off small, .plan-mday.is-conge small, .plan-mday.is-maladie small, .plan-mday.is-formation small { color: var(--c); font-weight: 600; }
.plan-mday.is-today { box-shadow: inset 0 0 0 2px var(--ocean); }
/* Bouton Pause du bandeau du timer (agent) */
.timer-pause-btn { display: inline-flex; align-items: center; gap: 10px; height: 54px; padding: 0 18px 0 8px; margin-left: 4px; border-radius: 27px; border: 1.5px solid color-mix(in srgb, var(--amber) 45%, var(--border)); background: var(--surface); color: var(--text); font: inherit; cursor: pointer; text-align: left; transition: transform .15s, border-color .15s, background .15s, box-shadow .15s; }
.timer-pause-btn .tp-ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: color-mix(in srgb, var(--amber) 18%, var(--surface)); color: color-mix(in srgb, var(--amber) 70%, var(--text)); font-style: normal; flex: none; }
.timer-pause-btn .tp-ico svg { width: 19px; height: 19px; }
.timer-pause-btn .tp-txt { display: flex; flex-direction: column; line-height: 1.15; }
.timer-pause-btn .tp-txt b { font-size: 14px; font-weight: 800; letter-spacing: -.01em; }
.timer-pause-btn .tp-txt small { font-size: 11px; font-weight: 500; color: var(--text3); }
.timer-pause-btn:hover:not(:disabled) { transform: translateY(-1px); border-color: var(--amber); box-shadow: 0 6px 16px color-mix(in srgb, var(--amber) 22%, transparent); }
.timer-pause-btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.timer-pause-btn:disabled { cursor: not-allowed; border-color: var(--border); border-style: dashed; }
.timer-pause-btn:disabled .tp-ico { background: var(--surface2); color: var(--text3); }
.timer-pause-btn:disabled .tp-txt b { color: var(--text3); }
.timer-pause-btn.is-on { background: var(--amber); border-color: var(--amber); color: #1F1300; box-shadow: 0 8px 20px color-mix(in srgb, var(--amber) 35%, transparent); }
.timer-pause-btn.is-on .tp-ico { background: #fff; color: #9A5B00; }
.timer-pause-btn.is-on .tp-txt small { color: #4A3200; }
.timer-banner.paused { border-color: color-mix(in srgb, var(--amber) 60%, transparent); background: color-mix(in srgb, var(--amber) 10%, var(--surface)); }
.timer-banner.paused .timer-label { color: var(--amber); }
.timer-pause-btn.hidden { display: none; }
@media (max-width: 720px) {
  .plan-week { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan-today { grid-template-columns: 1fr; }
  .plan-status { margin-left: 0; width: 100%; }
  .timer-pause-btn .tp-txt small { display: none; }
  .timer-pause-btn { padding: 0 14px 0 8px; height: 48px; }
}

/* ===== Pôle ELITE : bascule vers l'accès superviseur ===== */
.elite-switch-btn { display: inline-flex; align-items: center; gap: 8px; height: 54px; padding: 0 16px 0 12px; margin-left: 4px; border-radius: 27px; border: 1.5px solid color-mix(in srgb, #475569 45%, var(--border)); background: var(--surface); color: var(--text); font: inherit; cursor: pointer; text-align: left; transition: transform .15s, border-color .15s; }
.elite-switch-btn svg { width: 20px; height: 20px; color: #475569; flex: none; }
[data-theme="dark"] .elite-switch-btn svg { color: #94A3B8; }
.elite-switch-btn span { display: flex; flex-direction: column; line-height: 1.15; }
.elite-switch-btn b { font-size: 13.5px; font-weight: 800; }
.elite-switch-btn small { font-size: 11px; color: var(--text3); }
.elite-switch-btn:hover { transform: translateY(-1px); border-color: #475569; }
.elite-switch-btn.hidden, .elite-back-btn.hidden { display: none; }
.elite-back-btn { display: inline-flex; align-items: center; gap: 6px; }
.elite-back-btn svg { width: 16px; height: 16px; color: #B7791F; }
#login-error.is-info { color: var(--text2); }
@media (max-width: 720px) { .elite-switch-btn small { display: none; } .elite-switch-btn { height: 48px; } }

/* TL / SME : switch d'accès (barre du haut) et cases d'accès (Admin › compte) */
.access-switch { position: relative; display: inline-flex; }
.access-switch-btn { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px 0 4px; border: 1px solid color-mix(in srgb, #B7791F 32%, var(--border)); border-radius: 17px; background: linear-gradient(180deg, color-mix(in srgb, #F5B941 9%, var(--surface)), var(--surface)); color: var(--text); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: border-color .16s ease, box-shadow .16s ease; }
.access-switch-btn:hover, .access-switch.is-open .access-switch-btn { border-color: #D9961C; box-shadow: 0 0 0 3px color-mix(in srgb, #F5B941 18%, transparent); }
.access-switch-btn:focus-visible { outline: 2px solid #D9961C; outline-offset: 2px; }
.access-tag { display: inline-grid; place-items: center; height: 26px; min-width: 26px; padding: 0 7px; border-radius: 13px; background: linear-gradient(135deg, #FFD877, #F5B941 55%, #D9961C); color: #1C1404; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; }
.access-cur { display: inline-grid; place-items: center; width: 18px; height: 18px; color: var(--ac); }
.access-cur svg { width: 16px; height: 16px; }
.access-chev { width: 14px; height: 14px; color: var(--text3); transition: transform .18s ease; }
.access-switch.is-open .access-chev { transform: rotate(180deg); }
.access-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 400; width: 280px; padding: 6px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); box-shadow: 0 18px 40px rgba(15, 23, 42, .18); }
.access-menu[hidden] { display: none; }
.access-menu-head { display: flex; align-items: baseline; justify-content: space-between; padding: 8px 10px 6px; }
.access-menu-head b { font-size: 12.5px; font-weight: 800; }
.access-menu-head span { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text3); }
.access-menu [role="menuitemradio"] { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.access-menu [role="menuitemradio"]:hover, .access-menu [role="menuitemradio"]:focus-visible { background: color-mix(in srgb, var(--ac) 9%, transparent); outline: none; }
.access-menu [aria-checked="true"] { background: color-mix(in srgb, var(--ac) 12%, transparent); }
.access-ico { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 9px; background: color-mix(in srgb, var(--ac) 14%, transparent); color: var(--ac); }
.access-ico svg { width: 17px; height: 17px; }
.access-txt { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.access-txt b { font-size: 13px; font-weight: 700; }
.access-txt small { font-size: 11px; color: var(--text3); }
.access-check { flex: none; width: 16px; height: 16px; color: var(--ac); }
.access-menu-foot { margin: 4px 0 0; padding: 8px 10px 6px; border-top: 1px solid var(--border); font-size: 11px; color: var(--text3); }
.account-access-list { display: grid; gap: 6px; }
.account-access-list label { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.account-access-list small { color: var(--text3); }
[data-theme="dark"] .access-cur, [data-theme="dark"] .access-ico, [data-theme="dark"] .access-check { filter: brightness(1.5) saturate(1.1); }
@media (max-width: 720px) { .access-name { display: none; } }