/**
 * bo.css — Styles back-office Clean Auto Detailing. Mobile-first (le gérant est
 * en déplacement, souvent sur téléphone). Consomme les tokens de theme.css.
 * Même palette que le site public (rose/bleu, clair/sombre), en plus sobre :
 * fond uni, cartes blanches, couleur réservée aux actions et aux états.
 */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--ca-font-body);
    color: var(--ca-ink);
    background: var(--ca-bg);
    line-height: 1.5;
    font-size: 16px;
}
h1, h2, h3 { font-family: var(--ca-font-title); font-weight: 800; line-height: 1.2; letter-spacing: -.02em; margin: 0 0 .5em; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.2rem; }
a { color: var(--ca-link); }

/* --- Layout : menu latéral + barre du haut (même principe que le BO d'ALS) --- */
.bo { display: flex; min-height: 100vh; min-height: 100dvh; }
.bo-side {
    --bo-side-w: 240px;
    width: var(--bo-side-w); flex: none;
    position: sticky; top: 0; height: 100vh; height: 100dvh;
    display: flex; flex-direction: column;
    background: var(--ca-surface); border-right: 1px solid var(--ca-line);
    transition: width .2s ease;
}
html.boot .bo-side { transition: none; }   /* pas d'animation au chargement (état mémorisé) */
.bo-brand {
    height: 64px; flex: none; padding: 0 18px;
    display: flex; align-items: center; text-decoration: none;
    border-bottom: 1px solid var(--ca-line);
}
.bo-brand img { height: 40px; width: auto; display: block; }
.bo-mono {
    display: none; width: 34px; height: 34px; border-radius: 10px;
    place-items: center; background: var(--ca-grad); color: #fff;
    font-weight: 800; font-size: .8rem; letter-spacing: .02em;
}
/* Logo noir en mode clair, blanc en mode sombre. */
html[data-theme="dark"] .ca-logo-l, html:not([data-theme="dark"]) .ca-logo-d { display: none; }

.bo-nav { flex: 1; overflow-y: auto; padding: 10px 10px 16px; }
.bo-group {
    padding: 16px 12px 6px;
    font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--ca-muted);
}
.bo-link {
    display: flex; align-items: center; gap: 12px;
    min-height: 40px; padding: 8px 12px; margin: 1px 0;
    border-radius: 12px;
    color: var(--ca-ink); text-decoration: none; font-weight: 600; font-size: .92rem;
}
.bo-link svg { width: 19px; height: 19px; flex: none; stroke-width: 1.8; color: var(--ca-muted); }
.bo-link:hover { background: var(--ca-surface-2); }
.bo-link.is-active { background: var(--ca-grad); color: #fff; box-shadow: 0 6px 16px -8px rgba(236,46,142,.8); }
.bo-link.is-active svg { color: #fff; }
.bo-label { flex: 1; white-space: nowrap; overflow: hidden; }
.ca-nav-count {
    display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: 999px; background: var(--ca-grad); color: #fff; font-size: .75rem; font-weight: 800;
}
.bo-link.is-active .ca-nav-count { background: #fff; color: var(--ca-pink); }

/* Menu replié : icônes seules (bouton ☰, mémorisé). */
html.bo-collapsed .bo-side { --bo-side-w: 68px; }
html.bo-collapsed .bo-brand { justify-content: center; padding: 0; }
html.bo-collapsed .bo-brand img, html.bo-collapsed .bo-label, html.bo-collapsed .bo-group { display: none; }
html.bo-collapsed .bo-mono { display: grid; }
html.bo-collapsed .bo-link { justify-content: center; padding: 8px 0; position: relative; }
html.bo-collapsed .bo-link .ca-nav-count { position: absolute; top: 2px; right: 6px; min-width: 16px; height: 16px; padding: 0 4px; font-size: .65rem; }
html.bo-collapsed .bo-group + .bo-link { margin-top: 10px; }

/* --- Bandeau d'état (site hors ligne) : même hauteur que le bloc logo --- */
.bo-status { height: 64px; flex: none; display: flex; align-items: center; justify-content: center; padding: 0 16px; color: #fff; text-align: center; font-size: .92rem; font-weight: 600; line-height: 1.3; border-bottom: 1px solid rgba(0,0,0,.12); }
.bo-status a { color: #fff; text-decoration: underline; }

/* --- Barre du haut --- */
.bo-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bo-top {
    position: sticky; top: 0; z-index: 20;
    height: 64px; flex: none; padding: 0 20px;
    display: flex; align-items: center; gap: 14px;
    background: var(--ca-bar);
    backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
    border-bottom: 1px solid var(--ca-line);
}
.bo-title { flex: 1; min-width: 0; font-weight: 800; font-size: 1.1rem; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bo-toggle, .ca-mode {
    width: 38px; height: 38px; flex: none; padding: 0; cursor: pointer;
    display: grid; place-items: center;
    border: 1px solid var(--ca-line); background: var(--ca-surface); color: var(--ca-muted); font-size: 1rem;
}
.bo-toggle { border-radius: 10px; }
.bo-toggle svg { width: 18px; height: 18px; }
.ca-mode { border-radius: 50%; color: var(--ca-ink); }
.bo-toggle:hover, .ca-mode:hover { background: var(--ca-surface-2); color: var(--ca-ink); }
.bo-toggle:focus-visible, .ca-mode:focus-visible, .bo-link:focus-visible { outline: none; box-shadow: var(--ca-focus); }
html[data-theme="dark"] .ca-mode .ca-moon, html:not([data-theme="dark"]) .ca-mode .ca-sun { display: none; }
/* Le titre de la page est dans la barre du haut : le h1 du contenu ferait doublon. */
.bo .ca-wrap > h1:first-child { display: none; }
.bo .ca-wrap { width: 100%; }   /* sinon rétréci à son contenu dans la colonne flex */

/* Mobile : menu toujours réduit aux icônes (comme ALS), pas de bouton ☰. */
@media (max-width: 720px) {
    .bo-side { --bo-side-w: 60px; }
    .bo-brand { justify-content: center; padding: 0; height: 56px; }
    .bo-status { height: 56px; font-size: .82rem; }
    .bo-brand img, .bo-label, .bo-group { display: none; }
    .bo-mono { display: grid; }
    .bo-nav { padding: 8px 6px; }
    .bo-link { justify-content: center; padding: 8px 0; position: relative; }
    .bo-group + .bo-link { margin-top: 10px; }
    .bo-link .ca-nav-count { position: absolute; top: 2px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px; font-size: .65rem; }
    .bo-toggle { display: none; }
    .bo-top { height: 56px; padding: 0 12px; }
    .bo-title { font-size: 1rem; }
    .bo .ca-wrap { padding: 14px 12px 48px; }
}

/* --- Conteneur --- */
.ca-wrap { max-width: 960px; margin: 0 auto; padding: 18px 16px 64px; }

/* --- Cartes --- */
.ca-card {
    background: var(--ca-surface);
    border: 1px solid var(--ca-line);
    border-radius: var(--ca-radius);
    padding: 16px;
    box-shadow: var(--ca-shadow);
    margin-bottom: 16px;
}
.ca-card h2 { margin-top: 0; }

/* --- Boutons --- */
.ca-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: var(--ca-tap); padding: 10px 18px;
    border: 0; border-radius: 999px;
    font: inherit; font-weight: 700; cursor: pointer;
    background: var(--ca-grad); color: #fff;
    box-shadow: 0 8px 20px -10px rgba(236,46,142,.75), inset 0 1px 0 rgba(255,255,255,.22);
    text-decoration: none; transition: transform .15s ease, box-shadow .2s ease;
}
.ca-btn:hover { box-shadow: 0 12px 26px -10px rgba(236,46,142,.9), inset 0 1px 0 rgba(255,255,255,.22); }
.ca-btn:active { transform: scale(.98); }
.ca-btn:focus-visible { outline: none; box-shadow: var(--ca-focus); }
.ca-btn--ghost { background: var(--ca-surface); color: var(--ca-ink); border: 1px solid var(--ca-line); box-shadow: none; }
.ca-btn--ghost:hover { background: var(--ca-surface-2); box-shadow: none; }
.ca-btn--blue { background: var(--ca-blue); box-shadow: 0 8px 20px -10px rgba(47,164,224,.8); }
.ca-btn--blue:hover { background: var(--ca-blue-deep); box-shadow: 0 8px 20px -10px rgba(47,164,224,.8); }
.ca-btn--danger { background: var(--ca-danger); box-shadow: none; }
.ca-btn--danger:hover { box-shadow: 0 8px 20px -10px rgba(217,58,74,.8); }
.ca-btn--block { display: flex; width: 100%; }

/* --- Formulaires --- */
.ca-field { margin-bottom: 14px; }
.ca-field label { display: block; font-weight: 600; margin-bottom: 5px; font-size: .92rem; }
.ca-input, .ca-select, .ca-textarea {
    width: 100%; min-height: var(--ca-tap);
    padding: 10px 12px;
    border: 1px solid var(--ca-line); border-radius: var(--ca-radius-sm);
    font: inherit; color: var(--ca-ink); background: var(--ca-field);
}
.ca-textarea { min-height: 90px; resize: vertical; }
.ca-input:focus, .ca-select:focus, .ca-textarea:focus { outline: none; border-color: var(--ca-pink); box-shadow: var(--ca-focus); }
.ca-row { display: flex; gap: 12px; flex-wrap: wrap; }
.ca-row > * { flex: 1 1 160px; }
.ca-hint { color: var(--ca-muted); font-size: .84rem; margin-top: 4px; }

/* --- Tables / listes --- */
.ca-table { width: 100%; border-collapse: collapse; }
.ca-table th, .ca-table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--ca-line); }
.ca-table th { font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--ca-muted); }
.ca-list-scroll { overflow-x: auto; }

/* --- Badges d'état --- */
.ca-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; }
.ca-badge--active   { background: var(--ca-success-bg); color: var(--ca-success); }
.ca-badge--standby  { background: var(--ca-warning-bg); color: var(--ca-warning); }
.ca-badge--hidden   { background: var(--ca-surface-2);  color: var(--ca-muted); }
.ca-badge--archived { background: var(--ca-danger-bg);  color: var(--ca-danger); }
.ca-badge--online   { background: var(--ca-blue-light); color: var(--ca-blue-deep); }

/* --- Messages flash --- */
.ca-flash { padding: 12px 14px; border-radius: var(--ca-radius-sm); margin-bottom: 16px; font-weight: 600; }
.ca-flash--ok  { background: var(--ca-success-bg); color: var(--ca-success); }
.ca-flash--err { background: var(--ca-danger-bg);  color: var(--ca-danger); }

/* --- Titre dégradé façon logo --- */
.ca-title-grad {
    background: var(--ca-pink-grad);
    -webkit-background-clip: text; background-clip: text;
    color: transparent; font-style: italic;
}

@media (min-width: 640px) {
    h1 { font-size: 1.85rem; }
    .ca-wrap { padding-top: 24px; }
}