/* =============================================================================
   Keepnew back-office — styles applicatifs
   Mobile-first. Variables dans design-tokens.css.
   ============================================================================= */

/* --- Reset & base ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--kn-font-body);
    font-size: var(--kn-fs-body);
    line-height: var(--kn-lh-body);
    color: var(--kn-ink);
    background: var(--kn-paper);
    -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { font-family: var(--kn-font-display); line-height: 1.25; margin-top: 0; }
h1 { font-size: clamp(1.4rem, 5vw, 2rem); }
h2 { font-size: clamp(1.2rem, 4vw, 1.5rem); }
h3 { font-size: var(--kn-fs-3); }

a { color: var(--kn-accent-ink); }
p { margin-top: 0; }
img { max-width: 100%; }

.kn-tabular { font-variant-numeric: tabular-nums; }
.kn-muted    { color: var(--kn-muted); }
.kn-mt       { margin-top: var(--kn-space-5); }
.kn-mt-sm    { margin-top: var(--kn-space-4); }

/* --- Navigation ------------------------------------------------------------ */
.kn-header {
    position: sticky;
    top: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: var(--kn-space-3) var(--kn-space-4);
    background: var(--kn-surface);
    border-bottom: 1px solid var(--kn-line);
    gap: var(--kn-space-2);
}

.kn-logo {
    text-decoration: none;
    color: var(--kn-ink);
    font-family: var(--kn-font-display);
    font-size: var(--kn-fs-body);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.22em;
}

/* Bouton hamburger */
.kn-nav-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0 10px;
    background: none;
    border: 1.5px solid var(--kn-line);
    border-radius: var(--kn-radius-control);
    cursor: pointer;
    flex-shrink: 0;
}
.kn-nav-btn span {
    display: block;
    height: 2px;
    background: var(--kn-ink);
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.kn-header.is-open .kn-nav-btn span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.kn-header.is-open .kn-nav-btn span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.kn-header.is-open .kn-nav-btn span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Navigation mobile : drawer sous le header */
.kn-nav {
    display: none;
    flex-direction: column;
    width: 100%;
    order: 10;
    border-top: 1px solid var(--kn-line);
    padding: var(--kn-space-2) 0;
    gap: 2px;
}
.kn-header.is-open .kn-nav { display: flex; }

.kn-nav a {
    display: flex;
    align-items: center;
    min-height: var(--kn-touch);
    padding: 0 var(--kn-space-4);
    text-decoration: none;
    color: var(--kn-ink);
    font-weight: 500;
    font-size: var(--kn-fs-body);
    border-radius: var(--kn-radius-control);
    transition: background 0.12s;
}
.kn-nav a:hover { background: var(--kn-paper); }
.kn-nav a[aria-current="page"] {
    color: var(--kn-accent-ink);
    font-weight: 600;
    background: var(--kn-blush);
}
.kn-nav-logout {
    margin-top: var(--kn-space-2) !important;
    padding-top: var(--kn-space-2) !important;
    border-top: 1px solid var(--kn-line);
    color: var(--kn-muted) !important;
    font-weight: 400 !important;
}

/* Desktop : nav horizontale */
@media (min-width: 768px) {
    .kn-nav-btn { display: none; }
    .kn-nav {
        display: flex !important;
        flex-direction: row;
        width: auto;
        order: 0;
        border-top: none;
        padding: 0;
        gap: 2px;
    }
    .kn-nav a {
        min-height: auto;
        padding: var(--kn-space-2) var(--kn-space-3);
        font-size: var(--kn-fs-small);
        border-radius: var(--kn-radius-pill);
    }
    .kn-nav-logout {
        margin-top: 0 !important;
        padding-top: 0 !important;
        border-top: none;
    }
}

/* --- Sous-navigation (niveau 2) -------------------------------------------- */
/* Barre d'onglets du groupe courant, sous l'en-tête. C'est elle qui remplace
   un menu déroulant : la structure reste lisible et on voit où l'on est.
   Délibérément NON collante — la caler sous un en-tête lui-même collant
   imposerait un `top` en pixels, faux dès que la hauteur de l'en-tête change
   (police, zoom, retour à la ligne). Seul l'en-tête reste collant. */
.kn-subnav {
    background: var(--kn-paper);
    border-bottom: 1px solid var(--kn-line);
}

/* Défilement horizontal en mobile plutôt qu'un retour à la ligne : la barre
   garde une hauteur constante quel que soit le nombre d'onglets (six sous
   Réglages). */
.kn-subnav-inner {
    display: flex;
    gap: var(--kn-space-1);
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--kn-space-2) var(--kn-space-4);
    overflow-x: auto;
    scrollbar-width: none;
}
.kn-subnav-inner::-webkit-scrollbar { display: none; }

.kn-subnav a {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    min-height: 36px;
    padding: 0 var(--kn-space-3);
    text-decoration: none;
    white-space: nowrap;
    color: var(--kn-muted);
    font-size: var(--kn-fs-small);
    font-weight: 500;
    border-radius: var(--kn-radius-pill);
    transition: background 0.12s, color 0.12s;
}
.kn-subnav a:hover {
    background: var(--kn-surface);
    color: var(--kn-ink);
}
.kn-subnav a[aria-current="page"] {
    background: var(--kn-surface);
    color: var(--kn-accent-ink);
    font-weight: 600;
    box-shadow: inset 0 0 0 1px var(--kn-line);
}

/* Groupe courant dans l'en-tête : marqué sans la pastille pleine réservée à
   l'onglet actif de niveau 2, pour ne pas signaler deux « pages courantes ». */
.kn-nav a[aria-current="true"] {
    color: var(--kn-accent-ink);
    font-weight: 600;
}

/* Croix de retrait intégrée à un badge (extra d'une ligne de commande). */
.kn-btn-inline-x {
    margin-left: 4px;
    padding: 0 2px;
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    line-height: 1;
    cursor: pointer;
    opacity: 0.55;
}
.kn-btn-inline-x:hover { opacity: 1; }

/* --- Layout ---------------------------------------------------------------- */
.kn-wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--kn-space-4);
}
@media (min-width: 640px) { .kn-wrap { padding: var(--kn-space-5); } }

.kn-wrap-narrow { max-width: 640px; }

/* Grilles responsive */
.kn-grid { display: grid; gap: var(--kn-space-4); }
@media (min-width: 640px) {
    .kn-grid { gap: var(--kn-space-5); }
    .kn-grid-2 { grid-template-columns: 1fr 1fr; }
}

/* Ligne flexible (boutons côte à côte) */
.kn-row {
    display: flex;
    gap: var(--kn-space-3);
    align-items: center;
    flex-wrap: wrap;
}

/* --- Cartes ---------------------------------------------------------------- */
.kn-card {
    background: var(--kn-surface);
    border: 1px solid var(--kn-line);
    border-radius: var(--kn-radius-card);
    padding: var(--kn-space-4);
}
@media (min-width: 640px) { .kn-card { padding: var(--kn-space-5); } }

/* --- Contrôles de formulaire ----------------------------------------------- */
label {
    display: block;
    font-size: var(--kn-fs-small);
    font-weight: 600;
    color: var(--kn-muted);
    margin-bottom: var(--kn-space-1);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="search"],
select,
textarea {
    width: 100%;
    min-height: var(--kn-touch);
    padding: 0 var(--kn-space-3);
    font-size: var(--kn-fs-body);
    font-family: inherit;
    color: var(--kn-ink);
    background: var(--kn-surface);
    border: 1.5px solid var(--kn-line);
    border-radius: var(--kn-radius-control);
    transition: border-color 0.15s;
    appearance: none;
    -webkit-appearance: none;
}
textarea {
    min-height: 80px;
    padding: var(--kn-space-3);
    resize: vertical;
    line-height: var(--kn-lh-body);
}
input:focus, select:focus, textarea:focus, button:focus-visible {
    outline: 2.5px solid var(--kn-accent);
    outline-offset: 2px;
    border-color: var(--kn-accent);
}
input:not(:focus):hover, select:not(:focus):hover, textarea:not(:focus):hover {
    border-color: var(--kn-muted);
}

.kn-field { margin-bottom: var(--kn-space-4); }

/* Checkbox inline */
.kn-check {
    display: flex;
    align-items: center;
    gap: var(--kn-space-2);
    font-size: var(--kn-fs-body);
    color: var(--kn-ink);
    cursor: pointer;
    margin-bottom: var(--kn-space-4);
}
.kn-check input[type="checkbox"] {
    width: 18px;
    min-height: 18px;
    flex-shrink: 0;
    accent-color: var(--kn-accent);
}

/* --- Boutons --------------------------------------------------------------- */
.kn-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--kn-space-2);
    min-height: var(--kn-touch);
    padding: 0 var(--kn-space-5);
    font-size: var(--kn-fs-body);
    font-weight: 600;
    font-family: inherit;
    border: 1.5px solid transparent;
    border-radius: var(--kn-radius-control);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    white-space: nowrap;
    line-height: 1;
}
.kn-btn-primary {
    background: var(--kn-accent);
    color: #fff;
    border-color: var(--kn-accent);
}
.kn-btn-primary:hover { background: var(--kn-accent-ink); border-color: var(--kn-accent-ink); }
.kn-btn-ghost {
    background: transparent;
    color: var(--kn-accent-ink);
    border-color: var(--kn-line);
}
.kn-btn-ghost:hover { background: var(--kn-paper); border-color: var(--kn-muted); }
.kn-btn-danger {
    background: transparent;
    color: var(--kn-alert);
    border-color: var(--kn-line);
}
.kn-btn-danger:hover { background: var(--kn-alert-bg); border-color: var(--kn-alert-border); }
.kn-btn-sm { min-height: 36px; padding: 0 var(--kn-space-4); font-size: var(--kn-fs-small); }
.kn-btn-full { width: 100%; }

/* --- Tables ---------------------------------------------------------------- */
/* Toujours envelopper dans .kn-table-wrap pour le scroll horizontal mobile */
.kn-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--kn-radius-card);
    border: 1px solid var(--kn-line);
}

table.kn-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--kn-fs-body);
}
.kn-table th {
    text-align: left;
    padding: var(--kn-space-3) var(--kn-space-4);
    border-bottom: 2px solid var(--kn-line);
    font-size: var(--kn-fs-small);
    font-weight: 700;
    color: var(--kn-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    background: var(--kn-paper);
}
.kn-table td {
    padding: var(--kn-space-3) var(--kn-space-4);
    border-bottom: 1px solid var(--kn-line);
    vertical-align: middle;
}
.kn-table tbody tr:last-child td { border-bottom: none; }
.kn-table tbody tr:hover { background: color-mix(in srgb, var(--kn-paper) 50%, var(--kn-surface)); }
.kn-table td.kn-num,
.kn-table th.kn-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Table sans bordure externe (dans une .kn-card) */
.kn-card .kn-table-wrap {
    border: none;
    border-radius: 0;
    margin: 0 calc(-1 * var(--kn-space-4));
    width: calc(100% + 2 * var(--kn-space-4));
}
@media (min-width: 640px) {
    .kn-card .kn-table-wrap {
        margin: 0 calc(-1 * var(--kn-space-5));
        width: calc(100% + 2 * var(--kn-space-5));
    }
}

/* --- Badges ---------------------------------------------------------------- */
.kn-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px var(--kn-space-3);
    border-radius: var(--kn-radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid var(--kn-line);
    background: var(--kn-surface);
    color: var(--kn-muted);
}
.kn-badge-onsite   { background: var(--kn-blush); color: var(--kn-accent-ink); border-color: transparent; }
.kn-badge-workshop { background: var(--kn-royal-soft); color: var(--kn-accent-ink); border-color: transparent; }
.kn-badge-off      { color: var(--kn-muted); background: var(--kn-paper); }

/* Statuts de RDV (vue Jour du planning) : mêmes teintes que les alertes. */
.kn-badge-late      { background: var(--kn-warning-bg); color: var(--kn-warning); border-color: transparent; }
.kn-badge-complete  { background: var(--kn-success-bg); color: var(--kn-success); border-color: transparent; }
.kn-badge-scheduled { background: var(--kn-royal-soft); color: var(--kn-accent-ink); border-color: transparent; }
.kn-badge-info      { background: var(--kn-blush); color: var(--kn-accent-ink); border-color: transparent; }

/* --- Alertes --------------------------------------------------------------- */
.kn-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--kn-space-3);
    padding: var(--kn-space-3) var(--kn-space-4);
    border-radius: var(--kn-radius-control);
    margin-bottom: var(--kn-space-4);
    font-weight: 500;
    border: 1px solid transparent;
}
.kn-alert-error   { background: var(--kn-alert-bg);   color: var(--kn-alert);   border-color: var(--kn-alert-border); }
.kn-alert-ok      { background: var(--kn-success-bg); color: var(--kn-success); border-color: var(--kn-success-border); }
.kn-alert-warning { background: var(--kn-warning-bg); color: var(--kn-warning); border-color: var(--kn-warning-border); }

/* --- KPIs (rapports) ------------------------------------------------------- */
.kn-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--kn-space-3);
    margin-bottom: var(--kn-space-5);
}
.kn-kpi {
    background: var(--kn-surface);
    border: 1px solid var(--kn-line);
    border-radius: var(--kn-radius-card);
    padding: var(--kn-space-4);
}
.kn-kpi .v {
    font-size: clamp(1.3rem, 4vw, 1.6rem);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--kn-ink);
    display: block;
    margin-bottom: 2px;
}
.kn-kpi .l { color: var(--kn-muted); font-size: var(--kn-fs-small); }

/* --- Devis / ticket -------------------------------------------------------- */
.kn-ticket { font-variant-numeric: tabular-nums; }
.kn-ticket .row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: var(--kn-space-2) 0;
    border-bottom: 1px dashed var(--kn-line);
    gap: var(--kn-space-3);
}
.kn-ticket .row.total {
    border-bottom: none;
    border-top: 2px solid var(--kn-ink);
    font-weight: 700;
    font-size: var(--kn-fs-3);
    margin-top: var(--kn-space-2);
    padding-top: var(--kn-space-3);
}
.kn-ticket .row .comp { color: var(--kn-muted); font-size: var(--kn-fs-small); }

/* --- Navigation de journée (dispatch) -------------------------------------- */
.kn-daynav {
    display: flex;
    align-items: center;
    gap: var(--kn-space-3);
    margin-bottom: var(--kn-space-5);
    flex-wrap: wrap;
}
.kn-daynav h1 { margin: 0; }

/* --- Planning (vue Jour) : liste de RDV + carte ----------------------------- */
.kn-schedule-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--kn-space-3); }

.kn-schedule-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--kn-space-2) var(--kn-space-4);
    background: var(--kn-surface);
    border: 1px solid var(--kn-line);
    border-radius: var(--kn-radius-card);
    padding: var(--kn-space-3) var(--kn-space-4);
    font-size: var(--kn-fs-small);
}
.kn-schedule-summary strong { font-variant-numeric: tabular-nums; color: var(--kn-ink); }
.kn-schedule-summary .kn-schedule-route { margin-left: auto; }

.kn-schedule-row { display: flex; gap: var(--kn-space-4); align-items: stretch; min-height: 420px; }

.kn-schedule-list {
    flex: 1 1 55%;
    min-width: 0;
    overflow-y: auto;
    max-height: 70vh;
}

.kn-schedule-card {
    display: block;
    background: var(--kn-surface);
    border: 1px solid var(--kn-line);
    border-radius: var(--kn-radius-control);
    padding: var(--kn-space-3);
    margin-bottom: var(--kn-space-2);
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.15s;
}
.kn-schedule-card:hover { box-shadow: 0 2px 8px rgba(20,26,46,0.08); background: var(--kn-paper); }
.kn-schedule-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--kn-space-2);
    margin-bottom: var(--kn-space-1);
}
.kn-schedule-time {
    font-variant-numeric: tabular-nums;
    font-size: var(--kn-fs-small);
    font-weight: 600;
    color: var(--kn-accent-ink);
}
.kn-schedule-ref { color: var(--kn-muted); font-size: var(--kn-fs-small); }

.kn-schedule-map {
    flex: 1 1 40%;
    min-height: 420px;
    border-radius: var(--kn-radius-card);
    overflow: hidden;
    border: 1px solid var(--kn-line);
}

@media (max-width: 900px) {
    .kn-schedule-row { flex-direction: column; min-height: 0; }
    .kn-schedule-list { max-height: none; }
    .kn-schedule-map { min-height: 240px; flex: none; }
}

/* --- Liste catégories ------------------------------------------------------ */
.kn-cat-list { padding-left: var(--kn-space-5); margin: var(--kn-space-3) 0; list-style: disc; }
.kn-cat-list li { padding: var(--kn-space-2) 0; }
.kn-cat-list a { font-weight: 500; }

/* --- App technicien (PWA) -------------------------------------------------- */
.kn-tech-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--kn-space-4);
    border-bottom: 1px solid var(--kn-line);
    background: var(--kn-surface);
}

.kn-jobcard {
    display: block;
    text-decoration: none;
    color: inherit;
    background: var(--kn-surface);
    border: 1px solid var(--kn-line);
    border-radius: var(--kn-radius-card);
    padding: var(--kn-space-4);
    margin: 0 var(--kn-space-4) var(--kn-space-3);
    transition: box-shadow 0.15s;
}
.kn-jobcard:hover { box-shadow: 0 4px 16px rgba(20,26,46,0.1); border-color: var(--kn-accent); }
.kn-jobcard .t {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--kn-accent-ink);
}

.kn-status {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: var(--kn-radius-pill);
    background: var(--kn-line);
    color: var(--kn-muted);
}
.kn-status.completed  { background: var(--kn-success-bg); color: var(--kn-success); }
.kn-status.in_progress { background: var(--kn-blush); color: var(--kn-accent-ink); }
.kn-status.en_route   { background: var(--kn-royal-soft); color: var(--kn-accent-ink); }

/* Page de connexion centrée */
.kn-login-wrap {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--kn-space-4);
}
.kn-login-box {
    width: 100%;
    max-width: 400px;
}
.kn-login-box h1 { margin-bottom: 4px; }

/* --- Calendrier (mensuel / hebdomadaire) ----------------------------------- */

/* Mise en page à deux colonnes : sidebar de filtres + grille. Empilée sous 768px. */
.kn-cal-layout {
    display: flex;
    align-items: flex-start;
    gap: var(--kn-space-4);
}
.kn-cal-main { flex: 1 1 auto; min-width: 0; }

.kn-cal-sidebar {
    flex: 0 0 210px;
    width: 210px;
    background: var(--kn-surface);
    border: 1px solid var(--kn-line);
    border-radius: var(--kn-radius-card);
    padding: var(--kn-space-3);
}
.kn-cal-sidebar-section { margin-bottom: var(--kn-space-4); }
.kn-cal-sidebar-section:last-child { margin-bottom: 0; }
.kn-cal-sidebar-section h3 {
    font-size: var(--kn-fs-small);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--kn-muted);
    margin: 0 0 6px;
}
.kn-cal-sidebar-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    border-radius: var(--kn-radius-control);
    font-size: var(--kn-fs-small);
    color: var(--kn-ink);
    text-decoration: none;
}
.kn-cal-sidebar-link:hover { background: var(--kn-paper); }
.kn-cal-sidebar-link.is-active { background: var(--kn-blush); color: var(--kn-accent-ink); font-weight: 600; }

/* Avatar rond initiales, réutilisé dans la sidebar et les pastilles. */
.kn-avatar {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--kn-ink);
    line-height: 1;
}

/* Grille mensuelle : 7 colonnes, condensée sur mobile (le jour renvoie à la semaine). */
.kn-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}
.kn-cal-head {
    text-align: center;
    font-size: var(--kn-fs-small);
    font-weight: 700;
    color: var(--kn-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 4px 0;
}
.kn-cal-cell {
    min-height: 84px;
    background: var(--kn-surface);
    border: 1px solid var(--kn-line);
    border-radius: var(--kn-radius-control);
    padding: 4px;
    overflow: hidden;
}
.kn-cal-cell.is-out { background: var(--kn-paper); opacity: 0.55; }
.kn-cal-cell.is-today { border-color: var(--kn-accent); box-shadow: inset 0 0 0 1px var(--kn-accent); }
.kn-cal-daynum { font-size: var(--kn-fs-small); font-weight: 600; margin-bottom: 2px; }
.kn-cal-daynum a { text-decoration: none; color: var(--kn-ink); }
.kn-cal-daynum a:hover { color: var(--kn-accent); }

.kn-cal-pill {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    line-height: 1.3;
    padding: 2px 5px;
    margin-bottom: 2px;
    border-radius: 6px;
    text-decoration: none;
    color: var(--kn-accent-ink);
    background: var(--kn-blush);
}
.kn-cal-pill:hover { filter: brightness(0.96); }
.kn-pill-onsite   { background: var(--kn-blush);      color: var(--kn-accent-ink); }
.kn-pill-workshop { background: var(--kn-royal-soft);  color: var(--kn-accent-ink); }
.kn-cal-time { font-variant-numeric: tabular-nums; font-weight: 700; }
.kn-cal-pill-body {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kn-cal-pill-service {
    display: block;
    font-size: 0.68rem;
}

@media (max-width: 768px) {
    .kn-cal-layout { flex-direction: column; }
    .kn-cal-sidebar { width: 100%; flex-basis: auto; }
    .kn-cal-sidebar-section { display: inline-block; margin-right: var(--kn-space-4); vertical-align: top; }
}

@media (max-width: 560px) {
    .kn-cal-cell { min-height: 60px; }
    .kn-cal-pill { font-size: 0.65rem; padding: 1px 3px; }
}

/* Grille hebdomadaire : colonnes responsives (1 → 7). */
.kn-week-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--kn-space-3);
}
.kn-week-col {
    background: var(--kn-surface);
    border: 1px solid var(--kn-line);
    border-radius: var(--kn-radius-card);
    padding: var(--kn-space-3);
    min-width: 0;
}
.kn-week-col.is-today { border-color: var(--kn-accent); }
.kn-week-col h3 { font-size: var(--kn-fs-small); margin: 0 0 8px; }
.kn-week-col .kn-cal-pill { white-space: normal; align-items: flex-start; }
.kn-week-col .kn-cal-pill-body { white-space: normal; }

/* --- Panneau job coulissant --------------------------------------------- */
.kn-job-panel-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 26, 46, .35);
    z-index: 90;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}
.kn-job-panel-overlay.is-open { opacity: 1; pointer-events: auto; }
.kn-job-panel-slot {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 480px;
    max-width: 100%;
    background: var(--kn-paper);
    box-shadow: -8px 0 24px rgba(20, 26, 46, .18);
    z-index: 91;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .25s ease;
    padding: var(--kn-space-4);
}
.kn-job-panel-slot.is-open { transform: translateX(0); }
@media (max-width: 768px) {
    .kn-job-panel-slot { width: 100%; }
}
.kn-job-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--kn-space-3);
    margin-bottom: var(--kn-space-3);
}
.kn-job-panel-title { margin: 0; font-size: var(--kn-fs-2, 1.25rem); }
.kn-job-panel-close {
    background: none;
    border: 1px solid var(--kn-line);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    flex: 0 0 auto;
}
.kn-job-panel-close:hover { background: var(--kn-surface); }

/* Stepper de statut : rangée d'étapes cliquables. */
.kn-status-stepper {
    display: flex;
    gap: 4px;
    margin: var(--kn-space-3) 0;
    flex-wrap: wrap;
}
.kn-status-step-form { margin: 0; flex: 1 1 auto; min-width: 90px; }
.kn-status-step {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--kn-line);
    border-radius: var(--kn-radius-control);
    background: var(--kn-surface);
    color: var(--kn-muted);
    font-size: var(--kn-fs-small);
    font-weight: 600;
    cursor: pointer;
}
.kn-status-step.is-done { background: var(--kn-blush); color: var(--kn-accent-ink); border-color: transparent; }
.kn-status-step.is-active { background: var(--kn-accent); color: #fff; border-color: transparent; }

/* Carte (Leaflet). */
.kn-job-map {
    height: 200px;
    border-radius: var(--kn-radius-card);
    margin: var(--kn-space-3) 0;
    background: var(--kn-surface);
    border: 1px solid var(--kn-line);
}

/* Sélecteur de créneaux de replanification. */
.kn-resched-picker {
    display: flex;
    gap: var(--kn-space-4);
    flex-wrap: wrap;
    margin-top: var(--kn-space-3);
}
.kn-resched-cal { flex: 0 0 220px; }
.kn-resched-cal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-weight: 600; }
.kn-resched-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.kn-resched-cal-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--kn-fs-small);
    border-radius: 50%;
    background: none;
    border: 0;
    cursor: pointer;
}
.kn-resched-cal-day:disabled { color: var(--kn-line); cursor: not-allowed; }
.kn-resched-cal-day.is-selected { background: var(--kn-accent); color: #fff; }
.kn-resched-slots { flex: 1 1 240px; min-width: 220px; }
/* Hauteur plafonnée + défilement interne : une journée chargée reste
   scannable sans faire défiler tout le panneau job. */
#kn-resched-slot-list { max-height: min(50vh, 380px); overflow-y: auto; padding-right: 2px; margin-top: 8px; }
.kn-slot-heading {
    font-size: var(--kn-fs-small);
    font-weight: 700;
    color: var(--kn-muted);
    text-transform: uppercase;
    letter-spacing: .03em;
    margin: 10px 0 4px;
}
.kn-slot-heading:first-child { margin-top: 0; }
.kn-resched-slot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 8px 10px;
    margin-bottom: 4px;
    border: 1px solid var(--kn-line);
    border-radius: var(--kn-radius-control);
    background: var(--kn-surface);
    cursor: pointer;
    font: inherit;
    text-align: left;
}
.kn-resched-slot:hover { border-color: var(--kn-accent); }
.kn-resched-slot.is-selected { border-color: var(--kn-accent); background: var(--kn-blush); }
.kn-resched-slot-avatars { display: flex; gap: 2px; align-items: center; }
/* Avatars individuellement cliquables dans une ligne de créneau, pour choisir
   précisément le technicien plutôt que de subir la présélection automatique. */
.kn-avatar-pick { border: 2px solid transparent; padding: 0; font: inherit; }
.kn-avatar-pick:hover { border-color: var(--kn-ink); }
.kn-avatar-pick.is-selected { border-color: var(--kn-accent); box-shadow: 0 0 0 2px var(--kn-blush); }
.kn-btn:disabled { opacity: .5; cursor: not-allowed; }
.kn-mode-toggle { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kn-space-4); margin: var(--kn-space-3) 0; }
.kn-mode-toggle select { min-height: 36px; }