/* ==========================================================================
   Administration — même palette, densité d'outil.
   Tout est en Karla : ici on manipule des données, on ne raconte rien.
   ========================================================================== */

.admin {
    font-family: var(--util);
    font-weight: 400;
    font-size: 0.95rem;
    line-height: 1.6;
    background: var(--ink);
    padding-bottom: 7rem;
}

.admin-shell {
    width: 100%;
    max-width: 62rem;
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.admin-main { padding-block: 2rem; }

/* ------------------------------------------------------------------ en-tête */

.admin-header {
    border-bottom: 1px solid var(--ink-line);
    background: var(--ink-2);
    position: sticky;
    top: 0;
    z-index: 30;
}

.admin-header__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    padding-block: 0.9rem;
}

.admin-brand {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    color: var(--parchment);
    text-decoration: none;
    font-family: var(--display);
    font-variation-settings: "WONK" 1;
    font-weight: 500;
    font-size: 1.1rem;
    letter-spacing: -0.015em;
}
.admin-brand span {
    font-family: var(--util);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ember);
}

.admin-nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; }
.admin-nav a {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--parchment-soft);
    text-decoration: none;
    padding-block: 0.3rem;
    border-bottom: 2px solid transparent;
}
.admin-nav a:hover { color: var(--parchment); }
.admin-nav a[aria-current="page"] { color: var(--ember); border-bottom-color: var(--ember); }

/* -------------------------------------------------------------------- titres */

.admin-title {
    font-family: var(--display);
    font-variation-settings: "WONK" 1;
    font-weight: 500;
    font-size: clamp(1.7rem, 4vw, 2.3rem);
    letter-spacing: -0.015em;
    margin: 0;
}

.admin-subtitle {
    font-family: var(--util);
    font-variation-settings: normal;
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ember);
    margin: 2.5rem 0 1rem;
}

.admin-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2rem;
}

/* ------------------------------------------------------------------ messages */

.flash,
.alert {
    border-radius: var(--radius);
    padding: 0.85rem 1.1rem;
    margin: 0 0 1.25rem;
    font-size: 0.9rem;
    border: 1px solid var(--ink-line);
    background: var(--ink-2);
    color: var(--parchment);
}
.flash--ok { border-color: color-mix(in srgb, var(--moss) 55%, var(--ink-line)); }
.alert--error { border-color: color-mix(in srgb, var(--ember) 60%, var(--ink-line)); color: var(--ember); }
.alert--warn { border-color: color-mix(in srgb, var(--ember) 45%, var(--ink-line)); color: var(--parchment); }
.alert code { background: var(--ink-3); border-radius: 3px; padding: 0.1em 0.35em; font-size: 0.9em; }

/* --------------------------------------------------------------- compteurs */

.counters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.counter {
    background: var(--ink-2);
    border: 1px solid var(--ink-line);
    border-radius: var(--radius);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.counter__value {
    font-family: var(--display);
    font-variation-settings: "WONK" 1;
    font-weight: 500;
    font-size: 2.4rem;
    line-height: 1;
    letter-spacing: -0.015em;
    color: var(--ember);
}
.counter__label { font-weight: 700; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; }
.counter__hint { font-size: 0.78rem; color: var(--muted); }

.tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1rem;
}

.tile {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1.25rem;
    background: var(--ink-2);
    border: 1px solid var(--ink-line);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--parchment);
    transition: border-color 0.2s ease;
}
.tile:hover { border-color: var(--ember); color: var(--parchment); }
.tile__title { font-weight: 700; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ember); }
.tile__text { font-size: 0.85rem; color: var(--parchment-soft); }

/* ------------------------------------------------------------------ tableaux */

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    background: var(--ink-2);
    border: 1px solid var(--ink-line);
    border-radius: var(--radius);
    overflow: hidden;
}

.table th {
    text-align: left;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--ink-line);
}

.table td { padding: 0.85rem 1rem; border-bottom: 1px solid var(--ink-line); vertical-align: top; }
.table tr:last-child td { border-bottom: 0; }
.table a { color: var(--parchment); text-decoration: none; font-weight: 600; }
.table a:hover { color: var(--ember); }
.table__meta { color: var(--muted); font-size: 0.82rem; white-space: nowrap; }
.table__sub { display: block; color: var(--muted); font-size: 0.78rem; font-weight: 400; margin-top: 0.15rem; }
.table__actions { text-align: right; white-space: nowrap; }
.table__actions a { font-size: 0.78rem; color: var(--ember); }

.pill {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    border: 1px solid var(--ink-line);
    white-space: nowrap;
}
.pill--on { color: var(--moss); border-color: color-mix(in srgb, var(--moss) 50%, var(--ink-line)); }
.pill--off { color: var(--muted); }

/* ---------------------------------------------------------------- formulaires */

.form { display: grid; gap: 1.5rem; }
.form > .button { justify-self: start; }

.block {
    border: 1px solid var(--ink-line);
    border-radius: var(--radius);
    background: var(--ink-2);
    padding: 1.5rem;
    margin: 0;
    display: grid;
    gap: 1.1rem;
}

.block__title {
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ember);
    padding: 0 0.5rem;
    margin-inline-start: -0.5rem;
}

.block__note { margin: 0; font-size: 0.82rem; color: var(--muted); }

.block__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 1.1rem;
}

.field { display: flex; flex-direction: column; gap: 0.35rem; }
.field--narrow { max-width: 12rem; }

.field__label {
    font-weight: 700;
    font-size: 0.65rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--parchment-soft);
}
.field__label--standalone { margin: 0.5rem 0 0; }

.field__hint { font-size: 0.76rem; color: var(--muted); line-height: 1.45; }

/*
 * Tous les champs de saisie de l'administration, pas une liste de types.
 *
 * Une liste blanche laissait en blanc tout ce qui n'y figurait pas — une date,
 * une adresse web, un champ posé hors d'un .field — et un champ blanc dans une
 * page sombre saute aux yeux. Les cases, les boutons radio, les curseurs et le
 * sélecteur de fichier gardent leur apparence native : ils se dessinent, ils ne
 * se remplissent pas.
 */
.admin input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
.admin textarea,
.admin select {
    font-family: var(--util);
    font-size: 0.92rem;
    color: var(--parchment);
    background: var(--ink);
    border: 1px solid var(--ink-line);
    border-radius: var(--radius);
    padding: 0.6rem 0.7rem;
}

/* La largeur, elle, dépend du contexte : pleine dans un champ de formulaire
   ou une cellule de tableau, courte quand la valeur tient en deux chiffres. */
.field input,
.field textarea,
.field select,
.table input,
.copyline__field { width: 100%; }

.field textarea {
    font-family: var(--body);
    font-size: 1rem;
    line-height: 1.6;
    resize: vertical;
    min-height: 6rem;
}

.admin input:focus,
.admin textarea:focus,
.admin select:focus { border-color: var(--ember); }

.field input[type="file"] { font-size: 0.82rem; color: var(--parchment-soft); }
.admin input::placeholder,
.admin textarea::placeholder { color: color-mix(in srgb, var(--muted) 75%, transparent); }

.field--check { flex-direction: row; align-items: center; gap: 0.6rem; align-self: end; padding-bottom: 0.6rem; }
.field--check input { width: 1.05rem; height: 1.05rem; accent-color: var(--ember); }
.field--check span { font-size: 0.85rem; color: var(--parchment); }

.abilities-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.6rem;
}
.field--tiny .field__label { text-align: center; font-size: 0.6rem; }
.field--tiny input { text-align: center; padding-inline: 0.3rem; }

.thumb { margin: 0; }
.thumb img {
    width: 8rem;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border: 1px solid var(--ink-line);
    border-radius: var(--radius);
}

.hidden-form { display: none; }

/* -------------------------------------------------------- barre d'actions */

.actionbar {
    position: sticky;
    bottom: 0;
    z-index: 20;
    background: color-mix(in srgb, var(--ink-2) 94%, transparent);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--ink-line);
    padding-block: 0.85rem;
    margin-top: 1.5rem;
}

.actionbar__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.actionbar__inner .button--danger { margin-inline-start: auto; }

.button--danger {
    background: transparent;
    border-color: color-mix(in srgb, var(--ember-deep) 70%, var(--ink-line));
    color: var(--ember-deep);
}
.button--danger:hover { background: var(--ember-deep); border-color: var(--ember-deep); color: var(--ink); }

/* ------------------------------------------------------------------ connexion */

.admin--bare { display: grid; place-items: center; min-height: 100vh; padding: var(--gutter); }
.admin--bare .admin-main { width: 100%; max-width: 24rem; }

.login {
    background: var(--ink-2);
    border: 1px solid var(--ink-line);
    border-radius: var(--radius);
    padding: 2rem;
}

.login__title {
    font-family: var(--display);
    font-variation-settings: "WONK" 1;
    font-weight: 500;
    font-size: 1.5rem;
    letter-spacing: -0.015em;
    margin: 0 0 0.15rem;
}

.login__sub {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ember);
    margin: 0 0 1.75rem;
}

.login__form { display: grid; gap: 1rem; }
.login__form .button { margin-top: 0.25rem; }
.login__back { margin: 1.5rem 0 0; font-size: 0.8rem; }
.login__back a { color: var(--muted); text-decoration: none; }
.login__back a:hover { color: var(--ember); }

/* -------------------------------------------------------------- responsive */

@media (max-width: 40rem) {
    .abilities-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .table { display: block; overflow-x: auto; }
    .actionbar__inner .button { flex: 1 1 auto; }
    .actionbar__inner .button--danger { margin-inline-start: 0; }
}

/* ------------------------------------------------------- carte d'Eryndor */

/* Les outils de carte prévisualisent le bandeau public, qui reste nocturne :
   on y rétablit la palette sombre de l'âtre, comme dans .hero. */
.picker, .hero-preview {
    --ink:            #241811;
    --ink-2:          #2e2015;
    --ink-3:          #1c1109;
    --ink-line:       #7a5c3a;
    --parchment:      #f3e9d2;
    --parchment-soft: #dac9a6;
    --muted:          #b9a884;
    --ember:          #e0913f;
    --ember-bright:   #f4b673;
    --ember-deep:     #b5551f;
    --moss:           #9aad64;
}

.picker {
    position: relative;
    display: block;
    border: 1px solid var(--ink-line);
    border-radius: var(--radius);
    overflow: hidden;
    cursor: crosshair;
    line-height: 0;
    background: var(--ink);
}

.picker img { width: 100%; display: block; }

.picker__marker {
    position: absolute;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border-radius: 50%;
    background: var(--ember-bright);
    box-shadow: 0 0 0 3px var(--ink), 0 0 0 8px color-mix(in srgb, var(--ember) 40%, transparent);
    pointer-events: none;
}

.picker__readout {
    margin: 0.75rem 0 0;
    font-size: 0.8rem;
    color: var(--muted);
}
.picker__readout output { color: var(--parchment); font-weight: 600; }

.hero-preview {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--ink-line);
    border-radius: var(--radius);
    background: var(--ink);
    isolation: isolate;
}

.hero-preview img {
    position: absolute;
    max-width: none;
    filter: sepia(0.42) brightness(0.5) saturate(1.1) contrast(1.02);
}

.hero-preview__veil {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(38% 60% at 62% 45%,
            color-mix(in srgb, var(--ember) 26%, transparent) 0%,
            transparent 72%),
        linear-gradient(to bottom,
            color-mix(in srgb, var(--ink) 55%, transparent) 0%,
            color-mix(in srgb, var(--ink) 30%, transparent) 38%,
            var(--ink) 96%);
}

.hero-preview__column {
    position: absolute;
    left: 4%;
    bottom: 12%;
    width: 42%;
    padding: 0.6rem 0.8rem;
    border: 1px dashed color-mix(in srgb, var(--parchment) 35%, transparent);
    border-radius: var(--radius);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--parchment-soft);
    text-align: center;
}

.hero-preview__dot {
    position: absolute;
    left: 62%;
    top: 45%;
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    border-radius: 50%;
    background: var(--ember-bright);
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--ember) 26%, transparent);
}

.hero-preview__label {
    position: absolute;
    left: calc(62% + 1rem);
    top: 45%;
    transform: translateY(-50%);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--parchment);
    text-shadow: 0 1px 6px var(--ink);
    white-space: nowrap;
}

.field input[type="range"] {
    width: 100%;
    accent-color: var(--ember);
    background: transparent;
    border: 0;
    padding: 0.4rem 0;
}

/* ------------------------------------------------------- quêtes et séances */

.flash--error { border-color: color-mix(in srgb, var(--ember) 60%, var(--ink-line)); color: var(--ember); }

.admin-head__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.button--small { padding: 0.35rem 0.7rem; font-size: 0.7rem; }

.form--inline {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
}
.form--inline .field { margin: 0; flex: 1 1 22rem; }

.input--tiny { width: 5rem; text-align: center; }
.table input { width: 100%; }
.table .input--tiny { width: 5rem; }

/* Les cases à cocher des tags. */
.checks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.2rem;
    margin: 0 0 0.5rem;
}
.check {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.9rem;
    cursor: pointer;
}
.check input { accent-color: var(--ember); width: 1rem; height: 1rem; }

/* Un créneau par ligne : début, durée, et de quoi le retirer. */
.slots { margin: 0 0 1rem; }
.slot {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.8rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--ink-line);
}
.slot .field { margin: 0; }
.slot .field:first-child { flex: 1 1 14rem; }

.actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0 0 1rem; }

.lede {
    font-family: var(--display);
    font-size: 1.3rem;
    line-height: 1.3;
    color: var(--parchment);
    margin: 0 0 0.5rem;
}

/* Le petit bloc de diagnostic sous un avertissement. */
.diag { margin: 0.6rem 0 0; font-size: 0.85rem; }
.diag summary { cursor: pointer; color: var(--parchment-soft); }
.diag__list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.25rem 0.9rem;
    margin: 0.6rem 0 0;
}
.diag__list dt { color: var(--muted); }
.diag__list dd { margin: 0; overflow-wrap: anywhere; }

/* Le bouton du sélecteur de fichier : le navigateur le dessine clair, et il
   restait la dernière tache blanche des formulaires. */
.admin input[type="file"]::file-selector-button {
    font-family: var(--util);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    color: var(--parchment);
    background: var(--ink-3);
    border: 1px solid var(--ink-line);
    border-radius: var(--radius);
    padding: 0.4rem 0.8rem;
    margin-inline-end: 0.7rem;
    cursor: pointer;
}
.admin input[type="file"]::file-selector-button:hover { border-color: var(--ember); }

/* ----------------------------------------------------- boîte de réception
   Des messages, pas des lignes de tableau : ils se lisent en entier, et le
   corps du message est ce qui compte — pas la date à laquelle il est arrivé. */

.inbox { list-style: none; margin: 0; padding: 0; }

.inbox__item {
    border: 1px solid var(--ink-line);
    border-radius: var(--radius);
    background: var(--ink-2);
    padding: 1.1rem 1.2rem;
    margin: 0 0 0.9rem;
}
.inbox__item--done { opacity: 0.6; }

.inbox__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.7rem;
}
.inbox__meta { margin-left: auto; color: var(--muted); font-size: 0.78rem; }

.inbox__from { margin: 0 0 0.6rem; font-size: 0.9rem; }

.inbox__body {
    margin: 0 0 1rem;
    padding: 0.8rem 0.9rem;
    background: var(--ink);
    border-radius: var(--radius);
    font-size: 0.92rem;
    line-height: 1.6;
    white-space: normal;
    overflow-wrap: anywhere;
}

.inbox__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.inbox__actions form { display: contents; }

/* Un formulaire réduit à son bouton, posé dans une cellule de tableau. */
.row-form { display: inline; }

/* Plusieurs boutons dans la même cellule : ils s'alignent à droite et passent
   à la ligne plutôt que de se coller l'un à l'autre. */
.row-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
}
.row-actions .row-form { display: contents; }