/*
 * Pilote — composants partagés calés sur la vue jour du Planning
 * (PLANNING-RÉFÉRENCE lot 1, 11/10/2026).
 *
 * Six composants, une seule source : les jetons `--pds-ref-*` définis dans
 * `pilote-design-system.css` (Classic sur :root, Studio sur
 * html[data-pilot-theme="studio"]). Le Planning lit les mêmes jetons via ses
 * alias `--rv-*` : ce qui change ici change aussi là-bas.
 *
 *   pds-page-header  ← barre d'en-tête de la vue jour (.revue-toolbar)
 *   pds-filter       ← puce de filtre (#revue-hidden-chip)
 *   pds-table        ← cadre de grille (#planning-grid) + en-têtes de colonne
 *   pds-badge        ← libellé de statut des cartes (.revue-paid-label)
 *   pds-card         ← carte de panneau (.revue-focus-team button) ;
 *                      pds-card--event ← carte de RDV (.appointment-block)
 *   pds-button       ← bouton de barre d'outils ; --primary ← « Rendez-vous »
 *
 * Chargée par base.html APRÈS pilot-studio-skin.css : le préfixe
 * `html body.pds-admin` suffit alors face au pont de compatibilité et aux
 * règles d'éléments du skin Studio. Aucun écran ne redéfinit ces classes ;
 * le test-cliquet (app/core/test_design_cliquet.py) le vérifie.
 * Référence : docs/design/DESIGN_SYSTEM.md.
 */

/* ── pds-page-header ─────────────────────────────────────────────── */
html body.pds-admin .pds-page-header {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    padding: 8px 24px;
    border: 1px solid var(--pds-ref-border);
    border-radius: var(--pds-ref-radius-frame);
    background: var(--pds-ref-surface);
    color: var(--pds-ref-ink);
    font-family: var(--pds-ref-font);
    font-size: 14px;
}
/* Collée au tableau qui suit, comme la barre et la grille du Planning. */
html body.pds-admin .pds-page-header--attached {
    margin-bottom: 0;
    border-radius: var(--pds-ref-radius-frame) var(--pds-ref-radius-frame) 0 0;
}
html body.pds-admin .pds-page-header--attached + :is(.pds-table-wrap, .pds-card) {
    border-top: 0;
    border-radius: 0 0 var(--pds-ref-radius-frame) var(--pds-ref-radius-frame);
}

/* ── pds-filter ──────────────────────────────────────────────────── */
html body.pds-admin :is(a, button, label, select, span, summary).pds-filter {
    display: inline-flex;
    align-items: center;
    height: var(--pds-ref-control-height);
    min-height: var(--pds-ref-control-height);
    box-sizing: border-box;
    padding: 0 14px;
    border: 1px solid var(--pds-ref-border);
    border-radius: var(--pds-ref-radius-pill);
    background: var(--pds-ref-soft);
    color: var(--pds-ref-link);
    font: 600 13px var(--pds-ref-font);
    white-space: nowrap;
    text-decoration: none;
}
html body.pds-admin summary.pds-filter { list-style: none; cursor: pointer; }
html body.pds-admin summary.pds-filter::-webkit-details-marker { display: none; }
html body.pds-admin .pds-filter[aria-pressed="true"],
html body.pds-admin .pds-filter[aria-current] {
    border-color: transparent;
    background: var(--pds-ref-accent);
    color: var(--pds-ref-on-accent);
}

/* ── pds-table ───────────────────────────────────────────────────── */
html body.pds-admin .pds-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--pds-ref-border);
    border-radius: var(--pds-ref-radius-frame);
    background: var(--pds-ref-surface);
    box-shadow: var(--pds-ref-shadow-frame);
}
html body.pds-admin table.pds-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--pds-ref-surface);
    color: var(--pds-ref-ink);
    font-family: var(--pds-ref-font);
    font-size: 14px;
}
html body.pds-admin table.pds-table th {
    padding: 12px;
    border-bottom: 1px solid var(--pds-ref-border);
    background: var(--pds-ref-subtle);
    color: var(--pds-ref-ink);
    font-size: 15px;
    font-weight: 700;
    text-align: left;
}
html body.pds-admin table.pds-table td {
    padding: 12px;
    border-bottom: 1px solid var(--pds-ref-grid);
    background: transparent;
    color: var(--pds-ref-ink);
}
html body.pds-admin table.pds-table :is(td, th):last-child { text-align: right; }
html body.pds-admin table.pds-table tbody tr:last-child td { border-bottom: 0; }
html body.pds-admin table.pds-table tbody tr:hover td { background: var(--pds-ref-soft); }
html body.pds-admin table.pds-table tbody tr[aria-selected="true"] td {
    background: var(--pds-ref-soft);
}
html body.pds-admin table.pds-table tbody tr[aria-selected="true"] td:first-child {
    box-shadow: inset 3px 0 0 var(--pds-ref-accent);
}

/* Pages de données : corps de tableau lisible (≥ 15 px). */
html body.pds-admin table.pds-table--data :is(td, th) { font-size: var(--pds-ref-size-data); }

/* ── pds-badge ───────────────────────────────────────────────────── */
html body.pds-admin .pds-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 22px;
    box-sizing: border-box;
    padding: 2px 8px;
    border: 1px solid var(--pds-ref-border);
    border-radius: var(--pds-radius-xs);
    background: var(--pds-ref-soft);
    color: var(--pds-ref-ink);
    font: 600 11px var(--pds-ref-font);
    white-space: nowrap;
}
/* Pastille du Planning (.revue-paid-dot). */
html body.pds-admin .pds-badge--dot::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
}
html body.pds-admin .pds-badge--brand { border-color: transparent; background: var(--pds-ref-accent); color: var(--pds-ref-on-accent); }
html body.pds-admin .pds-badge--success { border-color: transparent; background: var(--pds-success-soft); color: var(--studio-success-ink, #126D53); }
html body.pds-admin .pds-badge--warning { border-color: transparent; background: var(--pds-warning-soft); color: var(--studio-warning-ink, #98500A); }
html body.pds-admin .pds-badge--danger { border-color: transparent; background: var(--pds-danger-soft); color: var(--studio-danger-ink, var(--pds-ref-danger)); }

/* ── pds-card ────────────────────────────────────────────────────── */
html body.pds-admin .pds-card {
    padding: 16px;
    /* --pds-ref-line : filet des blocs de la maquette mobile (phone.css) ;
       absent au bureau, la bordure de référence s'applique. */
    border: 1px solid var(--pds-ref-line, var(--pds-ref-border));
    border-radius: var(--pds-ref-radius-panel);
    background: var(--pds-ref-surface);
    box-shadow: none;
    color: var(--pds-ref-ink);
    font-family: var(--pds-ref-font);
}
html body.pds-admin .pds-card--flat { box-shadow: none; }
/* Pages de données : corps 15 px, chiffre clé 17 px, ligne d'aide 13 px. */
html body.pds-admin .pds-card--data { font-size: var(--pds-ref-size-data); }
html body.pds-admin .pds-card--data .pds-card__key { font-size: var(--pds-ref-size-key); font-weight: 700; line-height: 1.25; }
html body.pds-admin .pds-card__help { color: var(--pds-ref-muted); font-size: var(--pds-ref-size-help); }
html body.pds-admin details.pds-card--data > summary { cursor: pointer; font-weight: 700; list-style-position: inside; }
html body.pds-admin .pds-card--selected {
    border-color: var(--pds-ref-link);
    background: var(--pds-ref-soft);
}
html body.pds-admin .pds-card--accent { border-top: 3px solid var(--pds-ref-accent); }
/* Carte de RDV : la couleur vient de --pds-card-color (couleur du coiffeur). */
html body.pds-admin .pds-card--event {
    padding: 8px 10px;
    border: 0;
    border-radius: var(--pds-ref-radius-card);
    background: var(--pds-card-color, var(--pds-ref-surface));
    box-shadow: var(--pds-ref-shadow-card);
    line-height: 1.4;
}
html body.pds-admin .pds-card--event:hover { box-shadow: var(--pds-ref-shadow-card-hover); }

/* ── pds-button ──────────────────────────────────────────────────── */
html body.pds-admin .pds-button,
html body.pds-admin .pds-button--secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: var(--pds-ref-control-height);
    min-height: var(--pds-ref-control-height);
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid var(--pds-ref-border);
    border-radius: var(--pds-ref-radius-control);
    background: var(--pds-ref-surface);
    box-shadow: none;
    color: var(--pds-ref-ink);
    cursor: pointer;
    font: 600 14px var(--pds-ref-font);
    text-decoration: none;
}
/* Survol du bouton standard seulement : les variantes gardent leur fond (#598). */
html body.pds-admin .pds-button:not(.pds-button--primary, .pds-button--danger, .pds-button--success):hover { background: var(--pds-ref-soft); color: var(--pds-ref-ink); }
html body.pds-admin summary.pds-button { list-style: none; }
html body.pds-admin summary.pds-button::-webkit-details-marker { display: none; }
html body.pds-admin .pds-button--primary,
html body.pds-admin .pds-button--primary:hover {
    border-color: transparent;
    background: var(--pds-ref-accent);
    color: var(--pds-ref-on-accent);
}
html body.pds-admin .pds-button--success,
html body.pds-admin .pds-button--success:hover { border-color: transparent; background: var(--pds-success); color: var(--pds-ref-on-accent); }
html body.pds-admin .pds-button--danger,
html body.pds-admin .pds-button--danger:hover { border-color: transparent; background: var(--pds-ref-danger); color: var(--pds-ref-on-accent); }
html body.pds-admin :is(.pds-button, .pds-filter):focus-visible {
    outline: 3px solid var(--pds-ref-link);
    outline-offset: 3px;
}
html body.pds-admin .pds-button:is([disabled], :disabled) { opacity: .5; cursor: not-allowed; }

/* ── Texte indicatif des champs (DETTE-CAISSE-PLACEHOLDER-CLASSIC) ──
   La couleur par défaut de WebKit donne 2,35:1 sur fond clair ; le skin Studio garde sa
   propre règle (plus spécifique). */
html body.pds-admin :is(input, textarea)::placeholder { color: var(--pds-ref-muted); opacity: 1; }

/* ── Paliers, mêmes seuils que la vue jour ──────────────────────── */
@media (max-width: 1050px) {
    html body.pds-admin .pds-page-header { flex-wrap: wrap; }
}
@media (max-width: 767.98px) {
    html body.pds-admin .pds-page-header { gap: 6px; padding: 4px 10px 10px; }
    html body.pds-admin .pds-button { padding: 8px; }
    /* Dans une cellule de tableau au téléphone, un badge long passe à la ligne
       plutôt que d'élargir la page (MIGRATION-PDS-base_html). */
    html body.pds-admin td .pds-badge { white-space: normal; }

    /* Tableau en cartes (`.phone-cards`, phone.css §5) : la carte garde la mise
       en page de phone.css ; pds-table ne lui impose ni cadre, ni padding, ni
       filet de cellule, et ses couleurs viennent des jetons (Classic et Studio)
       au lieu du blanc fixe de phone.css (MIGRATION-PDS-clients). */
    html body.pds-admin .phone-cards .pds-table-wrap {
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }
    html body.pds-admin .phone-cards table.pds-table { background: transparent; }
    html body.pds-admin .phone-cards table.pds-table tr {
        border-color: var(--pds-ref-border);
        background: var(--pds-ref-surface);
    }
    html body.pds-admin .phone-cards table.pds-table td {
        padding: 4px 0;
        border-bottom: 0;
        background: transparent;
        text-align: left;
    }
    html body.pds-admin .phone-cards table.pds-table td[data-label]::before { color: var(--pds-ref-muted); }
    html body.pds-admin .phone-cards table.pds-table td[data-phone-primary] {
        padding-bottom: 6px;
        border-bottom: 1px solid var(--pds-ref-grid);
    }
    html body.pds-admin .phone-cards table.pds-table td[data-phone-actions] {
        padding-top: 8px;
        border-top-color: var(--pds-ref-grid);
    }
}
@media (max-width: 560px) {
    html body.pds-admin .pds-actions .pds-button { width: 100%; }
}