/* Planning iShop – grille hebdo. Utilise les variables de couleur de Filament. */
.ps {
    --ps-row: 14px;
    --ps-col-w: 64px;
    --ps-head-h: 2.25rem;
    --ps-event-h: 1.75rem;
    --ps-colhead-h: 1.75rem;
    --ps-foot-h: 1.5rem;
    --ps-line: var(--gray-200);
    --ps-line-strong: var(--gray-300);
    --ps-bg: #fff;
    --ps-closed: var(--gray-100);
    --ps-text-muted: var(--gray-500);
    font-variant-numeric: tabular-nums;
}
.dark .ps {
    --ps-line: color-mix(in oklab, var(--gray-700) 60%, transparent);
    --ps-line-strong: var(--gray-700);
    --ps-bg: var(--gray-900);
    --ps-closed: color-mix(in oklab, var(--gray-800) 80%, transparent);
    --ps-text-muted: var(--gray-400);
}
[x-cloak] { display: none !important; }

.ps-toolbar { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.ps-nav { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.ps-weeknum { font-weight: 700; font-size: 1.125rem; min-width: 3rem; text-align: center; }
.ps-date { border: 1px solid var(--ps-line-strong); border-radius: .5rem; padding: .25rem .5rem; font-size: .875rem; background: var(--ps-bg); color: inherit; }

.ps-layout { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1280px) { .ps-layout { grid-template-columns: minmax(0, 1fr) 20rem; } }
.ps-main { display: grid; gap: 1rem; min-width: 0; grid-template-columns: minmax(0, 1fr); }
.ps-aside { display: grid; gap: 1rem; align-content: start; }

/* --- Grille --- */
.ps-scroll { overflow-x: auto; border: 1px solid var(--ps-line-strong); border-radius: .75rem; background: var(--ps-bg); }
.ps-loading { opacity: .5; transition: opacity .2s; }
.ps-grid { display: flex; width: max-content; min-width: 100%; }

.ps-timecol { position: sticky; left: 0; z-index: 3; background: var(--ps-bg); border-right: 1px solid var(--ps-line-strong); width: 3.25rem; flex: none; }
.ps-timecol-spacer { height: calc(var(--ps-head-h) + var(--ps-event-h) + var(--ps-colhead-h)); border-bottom: 1px solid var(--ps-line-strong); }
.ps-time { height: var(--ps-row); font-size: .7rem; line-height: 1; color: var(--ps-text-muted); text-align: right; padding-right: .375rem; transform: translateY(-.35rem); }
.ps-foot-label { height: calc(var(--ps-foot-h) * 2); display: flex; align-items: center; justify-content: flex-end; padding-right: .375rem; font-size: .7rem; font-weight: 600; border-top: 1px solid var(--ps-line-strong); }

.ps-day { border-right: 2px solid var(--ps-line-strong); flex: none; }
.ps-day.is-closed .ps-day-head { color: var(--ps-text-muted); }
.ps-day-name::first-letter, .ps-alert-date::first-letter { text-transform: uppercase; }
.ps-day-head { height: var(--ps-head-h); display: flex; align-items: center; justify-content: center; gap: .375rem; padding: 0 .5rem; font-weight: 600; font-size: .8125rem; border-bottom: 1px solid var(--ps-line); white-space: nowrap; }
.ps-day-event { display: block; width: 100%; height: var(--ps-event-h); font-size: .75rem; font-weight: 600; color: var(--warning-700); background: color-mix(in oklab, var(--warning-500) 10%, transparent); border-bottom: 1px solid var(--ps-line); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 .375rem; }
.dark .ps-day-event { color: var(--warning-400); }
.ps-day-event:not(:disabled):hover { background: color-mix(in oklab, var(--warning-500) 20%, transparent); }
.ps-day-event:empty::before { content: "\00a0"; }
.ps-day-cols { display: flex; }
.ps-day-total { height: var(--ps-foot-h); font-size: .75rem; font-weight: 600; text-align: center; line-height: var(--ps-foot-h); border-top: 1px solid var(--ps-line); }
.ps-empty { padding: 1rem; color: var(--ps-text-muted); font-size: .8125rem; width: 10rem; }

.ps-col { width: var(--ps-col-w); border-right: 1px solid var(--ps-line); flex: none; transition: box-shadow .2s; }
.ps-col:last-child { border-right: 0; }
.ps-col-head { position: relative; height: var(--ps-colhead-h); display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 700; color: #fff; background: var(--emp); text-shadow: 0 1px 1px rgb(0 0 0 / .35); overflow: hidden; white-space: nowrap; padding: 0 .25rem; border-bottom: 1px solid var(--ps-line-strong); }
.ps-col-body {
    position: relative;
    height: calc(var(--ps-rows) * var(--ps-row));
    background-image:
        linear-gradient(to bottom, var(--ps-line-strong) 1px, transparent 1px),
        linear-gradient(to bottom, var(--ps-line) 1px, transparent 1px);
    background-size: 100% calc(var(--ps-row) * 4), 100% var(--ps-row);
    touch-action: pan-x pan-y;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}
.ps-col-body[x-on\:pointerdown], .ps-col-body:has(.ps-selection) { cursor: crosshair; }
.ps-col.is-rest .ps-col-body { background-color: var(--ps-closed); }
.ps-col-total { height: var(--ps-foot-h); font-size: .75rem; text-align: center; line-height: var(--ps-foot-h); border-top: 1px solid var(--ps-line-strong); font-weight: 600; }
.ps-rest-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; writing-mode: vertical-rl; font-size: .75rem; letter-spacing: .3em; text-transform: uppercase; color: var(--ps-text-muted); pointer-events: none; }

.ps-closed, .ps-shift, .ps-selection, .ps-flash-marker { position: absolute; left: 0; right: 0; top: calc(var(--top) * var(--ps-row)); height: calc(var(--span, 1) * var(--ps-row)); }
.ps-closed { background: repeating-linear-gradient(135deg, var(--ps-closed) 0 6px, color-mix(in oklab, var(--gray-300) 45%, var(--ps-closed)) 6px 7px); pointer-events: none; }

.ps-shift {
    left: 2px; right: 2px; z-index: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 1px;
    padding: 2px 1px; overflow: hidden;
    border-radius: 4px; border-left: 3px solid var(--emp);
    background: color-mix(in oklab, var(--emp) 35%, var(--ps-bg));
    font-size: .6875rem; line-height: 1.15; font-weight: 600; text-align: center;
    box-shadow: 0 1px 2px rgb(0 0 0 / .08);
    cursor: pointer;
}
.ps-shift:hover { filter: brightness(.96); box-shadow: 0 0 0 2px var(--emp); }
.ps-shift-label { font-size: .625rem; font-weight: 500; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ps-shift.type-heures_sup { background-image: repeating-linear-gradient(135deg, transparent 0 5px, color-mix(in oklab, var(--emp) 55%, transparent) 5px 8px); }
.ps-shift.type-recup, .ps-shift.type-conge { background: var(--gray-200); border-left-color: var(--gray-400); color: var(--gray-700); }
.dark .ps-shift.type-recup, .dark .ps-shift.type-conge { background: var(--gray-700); color: var(--gray-200); }
.ps-shift.type-absence { background: color-mix(in oklab, var(--danger-500) 15%, var(--ps-bg)); border-left-color: var(--danger-500); }
.ps-shift.type-formation { border-left-style: double; border-left-width: 4px; }
.ps-shift.is-elsewhere { background: transparent; border: 1px dashed var(--gray-400); border-left: 3px dashed var(--gray-400); color: var(--ps-text-muted); cursor: default; }
.ps-shift.is-converted::after { content: "●"; position: absolute; top: 1px; right: 2px; font-size: .5rem; color: var(--success-600); }

.ps-selection { z-index: 2; left: 2px; right: 2px; border-radius: 4px; background: color-mix(in oklab, var(--emp) 25%, transparent); border: 2px dashed var(--emp); display: flex; align-items: flex-start; justify-content: center; font-size: .625rem; font-weight: 700; pointer-events: none; padding-top: 2px; }
.ps-flash-marker { z-index: 2; height: calc(var(--ps-row) * 2); background: color-mix(in oklab, var(--danger-500) 35%, transparent); pointer-events: none; animation: ps-pulse 1s ease-in-out infinite; }
.ps-flash { box-shadow: inset 0 0 0 3px var(--danger-500); }
@keyframes ps-pulse { 50% { opacity: .3; } }

.ps-badge-renfort { margin-left: 3px; display: inline-flex; align-items: center; justify-content: center; width: 1rem; height: 1rem; border-radius: 999px; background: #fff; color: var(--gray-800); font-size: .625rem; font-weight: 800; text-shadow: none; flex: none; }
.ps-tag { display: inline-block; font-size: .6875rem; font-weight: 600; padding: 0 .375rem; border-radius: 999px; background: var(--gray-100); color: var(--gray-700); text-transform: none; white-space: nowrap; }
.dark .ps-tag { background: var(--gray-800); color: var(--gray-300); }
.ps-tag-holiday { background: color-mix(in oklab, var(--danger-500) 15%, transparent); color: var(--danger-700); }
.dark .ps-tag-holiday { color: var(--danger-400); }
.ps-dot { display: inline-block; width: .625rem; height: .625rem; border-radius: 999px; background: var(--emp); vertical-align: middle; flex: none; }

/* --- Panneau latéral --- */
.ps-alert { display: block; width: 100%; text-align: left; font-size: .8125rem; padding: .5rem .625rem; margin-bottom: .375rem; border-radius: .5rem; background: color-mix(in oklab, var(--warning-500) 10%, transparent); border-left: 3px solid var(--warning-500); }
.ps-alert:hover { background: color-mix(in oklab, var(--warning-500) 20%, transparent); }
.ps-alert.is-blocking { background: color-mix(in oklab, var(--danger-500) 10%, transparent); border-left-color: var(--danger-500); }
.ps-alert-date { display: inline-block; font-weight: 700; margin-right: .25rem; }
.ps-muted { font-size: .8125rem; color: var(--ps-text-muted); }
.ps-resp { display: grid; grid-template-columns: auto 1fr; gap: .375rem .75rem; font-size: .875rem; }
.ps-resp dt { color: var(--ps-text-muted); }
.ps-resp dd { font-weight: 600; }
.ps-legend { display: grid; gap: .375rem; font-size: .8125rem; margin-bottom: .5rem; }
.ps-legend li { display: flex; gap: .5rem; align-items: center; }
.ps-shift-sample { --emp: var(--primary-500); position: relative; display: inline-block; width: 1.5rem; height: 1rem; border-radius: 3px; border-left: 3px solid var(--emp); background: color-mix(in oklab, var(--emp) 35%, var(--ps-bg)); }
.ps-shift-sample.type-heures_sup { background-image: repeating-linear-gradient(135deg, transparent 0 4px, color-mix(in oklab, var(--emp) 55%, transparent) 4px 6px); }
.ps-shift-sample.type-recup { background: var(--gray-200); border-left-color: var(--gray-400); }
.ps-shift-sample.is-elsewhere { background: transparent; border: 1px dashed var(--gray-400); }
.ps-shift-sample.is-converted::after { content: "●"; position: absolute; top: -3px; right: 1px; font-size: .5rem; color: var(--success-600); }

/* --- Totaux --- */
.ps-table-wrap { overflow-x: auto; }
.ps-table { width: 100%; font-size: .8125rem; border-collapse: collapse; white-space: nowrap; }
.ps-table th { text-align: left; font-weight: 600; color: var(--ps-text-muted); padding: .375rem .5rem; border-bottom: 1px solid var(--ps-line-strong); }
.ps-table td { padding: .375rem .5rem; border-bottom: 1px solid var(--ps-line); }
.ps-table td:not(:first-child), .ps-table th:not(:first-child) { text-align: right; }
.is-over { color: var(--danger-600); font-weight: 700; }
.is-under { color: var(--warning-600); font-weight: 700; }
.is-ok { color: var(--success-600); font-weight: 700; }

/* --- Mobile : liste par jour --- */
.ps-mobile { display: none; }
@media (max-width: 767px) {
    .ps-scroll { display: none; }
    .ps-mobile { display: grid; gap: .75rem; }
}
.ps-m-day { border: 1px solid var(--ps-line-strong); border-radius: .75rem; padding: .75rem; background: var(--ps-bg); display: grid; gap: .5rem; }
.ps-m-day header { display: flex; justify-content: space-between; font-size: .875rem; }
.ps-m-day header span, .ps-m-day footer { color: var(--ps-text-muted); font-size: .8125rem; }
.ps-m-event { font-size: .8125rem; font-weight: 600; color: var(--warning-700); }
.ps-m-day ul { display: grid; gap: .375rem; }
.ps-m-shift { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .5rem; border-radius: .5rem; border-left: 4px solid var(--emp); background: color-mix(in oklab, var(--emp) 12%, var(--ps-bg)); font-size: .875rem; text-align: left; }
.ps-m-shift.type-heures_sup { background-image: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in oklab, var(--emp) 25%, transparent) 6px 9px); }
.ps-m-shift.type-recup, .ps-m-shift.type-conge { background: var(--gray-100); border-left-color: var(--gray-400); }
.ps-m-name { font-weight: 700; min-width: 4.5rem; }

/* --- Vue réseau --- */
.ps-network td { vertical-align: top; }
.ps-network .ps-network-day { text-align: center !important; }
.ps-network-shift { display: block; margin: 1px 0; padding: 1px 6px; border-radius: 4px; border-left: 3px solid var(--emp); background: color-mix(in oklab, var(--emp) 18%, transparent); font-size: .75rem; }
.ps-network-shift.type-heures_sup { background-image: repeating-linear-gradient(135deg, transparent 0 5px, color-mix(in oklab, var(--emp) 35%, transparent) 5px 7px); }
.ps-network-shift.type-recup, .ps-network-shift.type-conge { background: var(--gray-100); border-left-color: var(--gray-400); }
.ps-network-shift small { opacity: .75; margin-left: 2px; }
.ps-network .ps-badge-renfort { background: var(--gray-200); }

/* --- Panel employé --- */
.ps-stats { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); margin-bottom: 1rem; }
.ps-stat { display: grid; gap: .125rem; padding: .75rem 1rem; border-radius: .75rem; border: 1px solid var(--ps-line-strong); background: var(--ps-bg); }
.ps-stat span, .ps-stat small { font-size: .8125rem; color: var(--ps-text-muted); }
.ps-stat strong { font-size: 1.5rem; }
.ps-qr { width: 12rem; height: 12rem; background: #fff; padding: .5rem; border-radius: .5rem; }
.ps-feed-url { font-family: ui-monospace, monospace; font-size: .75rem; word-break: break-all; padding: .5rem; border-radius: .5rem; background: var(--gray-100); }
.dark .ps-feed-url { background: var(--gray-800); }

/* --- Planning du mois --- */
.ps-month { border-collapse: separate; border-spacing: 0; font-size: .75rem; width: max-content; min-width: 100%; }
.ps-month th, .ps-month td { border-right: 1px solid var(--ps-line); border-bottom: 1px solid var(--ps-line); padding: 2px 3px; vertical-align: top; }
.ps-month thead th { background: var(--ps-bg); position: sticky; top: 0; z-index: 2; font-weight: 600; text-align: center; white-space: nowrap; }
.ps-month-name { position: sticky; left: 0; z-index: 3 !important; background: var(--ps-bg); text-align: left !important; min-width: 7rem; font-weight: 600; white-space: nowrap; border-right: 2px solid var(--ps-line-strong) !important; }
.ps-month-week { border-left: 2px solid var(--ps-line-strong); padding: .375rem !important; }
.ps-month-week a { font-weight: 700; margin-right: .25rem; color: var(--primary-600); }
.ps-month-day { min-width: 4.75rem; }
.ps-month-day span::first-letter { text-transform: uppercase; }
.ps-month-day small { display: block; font-size: .625rem; font-weight: 600; color: var(--warning-700); white-space: normal; }
.ps-month-day.is-holiday small { color: var(--danger-600); }
.ps-month-day.is-closed, .ps-month-cell.is-closed { color: var(--ps-text-muted); background: var(--ps-closed); }
.ps-month-cell { height: 2.75rem; }
.ps-month-cell.is-editable { cursor: copy; }
.ps-month-cell.is-editable:hover { background: color-mix(in oklab, var(--emp) 10%, transparent); }
.ps-month-shift { display: block; width: 100%; margin-bottom: 2px; padding: 1px 3px; border-radius: 3px; border-left: 3px solid var(--emp); background: color-mix(in oklab, var(--emp) 25%, var(--ps-bg)); font-weight: 600; white-space: nowrap; text-align: left; font-size: .6875rem; cursor: pointer; }
.ps-month-shift small { font-weight: 500; opacity: .8; margin-left: 2px; }
.ps-month-shift.type-heures_sup { background-image: repeating-linear-gradient(135deg, transparent 0 4px, color-mix(in oklab, var(--emp) 45%, transparent) 4px 6px); }
.ps-month-shift.type-recup, .ps-month-shift.type-conge { background: var(--gray-200); border-left-color: var(--gray-400); color: var(--gray-700); }
.dark .ps-month-shift.type-recup, .dark .ps-month-shift.type-conge { background: var(--gray-700); color: var(--gray-200); }
.ps-month-shift.type-absence { background: color-mix(in oklab, var(--danger-500) 15%, var(--ps-bg)); border-left-color: var(--danger-500); }
.ps-month-shift.is-elsewhere { background: transparent; border: 1px dashed var(--gray-400); color: var(--ps-text-muted); cursor: default; }
.ps-month-sub { background: color-mix(in oklab, var(--gray-500) 6%, transparent); text-align: right !important; font-weight: 600; white-space: nowrap; border-right: 2px solid var(--ps-line-strong) !important; min-width: 3rem; }
.ps-month-total { text-align: right !important; font-weight: 700; white-space: nowrap; min-width: 4.5rem; }
.ps-month-total small { display: block; font-weight: 600; }
.ps-month-foot { text-align: center; font-weight: 600; color: var(--ps-text-muted); }
.ps-month tfoot th, .ps-month tfoot td { border-top: 2px solid var(--ps-line-strong); }
.ps-tag-ok { background: color-mix(in oklab, var(--success-500) 15%, transparent); color: var(--success-700); }
.ps-tag-warn { background: color-mix(in oklab, var(--warning-500) 15%, transparent); color: var(--warning-700); }
@media (max-width: 767px) { .ps-scroll:has(.ps-month) { display: block; } }
.ps-month-name .ps-badge-renfort, .ps-table .ps-badge-renfort { background: var(--gray-200); }
.dark .ps-month-name .ps-badge-renfort, .dark .ps-table .ps-badge-renfort { background: var(--gray-700); color: var(--gray-100); }

/* --- Mon calendrier (mobile d'abord) --- */
.ps-stack { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
.ps-cal { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
.ps-cal-main, .ps-cal-url { display: grid; gap: .625rem; min-width: 0; }
.ps-cal-url > .fi-btn { justify-self: start; }
.ps-cal-subscribe { width: 100%; }
.ps-cal-qr { display: grid; gap: .5rem; justify-items: center; text-align: center; margin: 0; }
.ps-feed-url { overflow-wrap: anywhere; }
.ps-steps { list-style: decimal; padding-left: 1.25rem; display: grid; gap: .375rem; font-size: .875rem; }
@media (min-width: 768px) {
    .ps-cal { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
    .ps-cal-qr { order: 2; }
}
@media (max-width: 767px) {
    .ps-qr { width: 9rem; height: 9rem; }
}

/* --- Planning de l'équipe (espace employé) --- */
.ps-team-days { display: none; gap: .75rem; }
.ps-month tr.is-me th, .ps-month tr.is-me td { background: color-mix(in oklab, var(--primary-500) 7%, var(--ps-bg)); }
.ps-m-shift.is-me { outline: 2px solid var(--primary-500); }
@media (max-width: 767px) {
    .ps-team-table { display: none !important; }
    .ps-team-days { display: grid; }
}
.ps > .fi-section + .ps-mobile, .ps > .fi-section + .ps-stats { margin-top: 1rem; }