/* =====================================================================
   AFPTM — THÈME SOMBRE "RÉFÉRENCE"
   Jetons de design et composants de base partagés (connexion, clients…).
   Valeurs relevées sur la maquette de référence (1440×960).
   Toutes les classes sont préfixées "af-" pour ne pas interférer avec
   css/style.css utilisé par les autres pages.
   ===================================================================== */

:root {
    --af-bg: #090d11;
    --af-sidebar: #0a0e13;
    --af-topbar: #0f151b;
    --af-card: #10161c;
    --af-card-2: #131a21;
    --af-field: #0d1318;
    --af-elev: #161d25;
    --af-border: #1b222a;
    --af-border-2: #252d36;
    --af-border-3: #2f3842;
    --af-line: #161c24;

    --af-text: #f2f4f7;
    --af-text-2: #c9d0d7;
    --af-text-3: #9aa4ae;
    --af-muted: #6f7a86;

    --af-gold: #f5b12a;
    --af-gold-hover: #ffc23f;
    --af-gold-text: #f6c744;
    --af-gold-ink: #17110a;
    --af-gold-soft: rgba(240, 180, 40, 0.12);
    --af-gold-line: rgba(214, 160, 45, 0.9);

    --af-green: #45bd6c;   --af-green-ink: #062611;
    --af-yellow: #f6b42c;  --af-yellow-ink: #2a1c00;
    --af-blue: #4f94ee;    --af-blue-ink: #ffffff;
    --af-gray: #8895aa;    --af-gray-ink: #0d1218;
    --af-orange: #f28c33;  --af-orange-ink: #2a1300;
    --af-red: #ef5a52;     --af-red-ink: #ffffff;
    --af-purple: #a68cf6;  --af-purple-ink: #170d33;
    --af-cyan: #33b6c9;    --af-cyan-ink: #03252b;

    --af-radius-lg: 14px;
    --af-radius: 12px;
    --af-radius-md: 10px;
    --af-radius-sm: 8px;

    --af-shadow: 0 1px 0 rgba(255, 255, 255, 0.02) inset, 0 8px 24px rgba(0, 0, 0, 0.25);
    --af-font: 'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* ---------- Boutons ---------- */
.af-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 40px;
    padding: 0 18px;
    border-radius: var(--af-radius-md);
    border: 1px solid var(--af-border-2);
    background: transparent;
    color: #e8ecf0;
    font: 500 14px/1 var(--af-font);
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.af-btn svg { flex: none; color: currentColor; }
.af-btn:hover { background: #121920; border-color: var(--af-border-3); color: #fff; }
.af-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(245, 177, 42, 0.28); border-color: var(--af-gold-line); }
.af-btn:disabled, .af-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

.af-btn--primary {
    background: var(--af-gold);
    border-color: var(--af-gold);
    color: var(--af-gold-ink);
    font-weight: 600;
}
.af-btn--primary:hover { background: var(--af-gold-hover); border-color: var(--af-gold-hover); color: var(--af-gold-ink); }

.af-btn--icon { width: 40px; padding: 0; }
.af-btn--sm { height: 32px; padding: 0 12px; font-size: 13px; gap: 8px; border-radius: var(--af-radius-sm); }
.af-btn--block { width: 100%; }

/* ---------- Champs ---------- */
.af-field {
    position: relative;
    display: flex;
    align-items: center;
}
.af-field > svg {
    position: absolute;
    left: 15px;
    color: #8a949f;
    pointer-events: none;
}
.af-input {
    width: 100%;
    height: 40px;
    padding: 0 14px;
    background: var(--af-field);
    border: 1px solid #212932;
    border-radius: var(--af-radius-md);
    color: var(--af-text);
    font: 400 14px/1 var(--af-font);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.af-field > svg + .af-input { padding-left: 46px; }
.af-input::placeholder { color: #7f8994; }
.af-input:focus { border-color: var(--af-gold-line); box-shadow: 0 0 0 3px rgba(245, 177, 42, 0.16); }
textarea.af-input { height: auto; min-height: 84px; padding: 12px 14px; line-height: 1.5; resize: vertical; }
select.af-input { appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239aa4ae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
select.af-input option { background: #10161c; color: #f2f4f7; }

.af-label {
    display: block;
    margin-bottom: 8px;
    color: var(--af-text-2);
    font: 500 13px/1.3 var(--af-font);
}

/* ---------- Case à cocher ---------- */
.af-check {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--af-text-2);
    font: 400 13.5px/1.2 var(--af-font);
    cursor: pointer;
    user-select: none;
}
.af-check input {
    appearance: none;
    width: 18px;
    height: 18px;
    margin: 0;
    border-radius: 5px;
    border: 1px solid var(--af-border-3);
    background: var(--af-field);
    display: grid;
    place-content: center;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}
.af-check input::after {
    content: "";
    width: 9px;
    height: 5px;
    border-left: 2px solid var(--af-gold-ink);
    border-bottom: 2px solid var(--af-gold-ink);
    transform: rotate(-45deg) translate(1px, -1px);
    opacity: 0;
}
.af-check input:checked { background: var(--af-gold); border-color: var(--af-gold); }
.af-check input:checked::after { opacity: 1; }
.af-check input:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(245, 177, 42, 0.28); }

/* ---------- Cartes ---------- */
.af-card {
    background: var(--af-card);
    border: 1px solid var(--af-border);
    border-radius: var(--af-radius);
}

/* ---------- Badges de statut (pleins, comme la référence) ---------- */
.af-badge {
    display: inline-flex;
    align-items: center;
    height: 23px;
    padding: 0 9px;
    border-radius: 6px;
    font: 600 12px/1 var(--af-font);
    white-space: nowrap;
    background: var(--af-gray);
    color: var(--af-gray-ink);
}
.af-badge--green  { background: var(--af-green);  color: var(--af-green-ink); }
.af-badge--yellow { background: var(--af-yellow); color: var(--af-yellow-ink); }
.af-badge--blue   { background: var(--af-blue);   color: var(--af-blue-ink); }
.af-badge--gray   { background: var(--af-gray);   color: var(--af-gray-ink); }
.af-badge--orange { background: var(--af-orange); color: var(--af-orange-ink); }
.af-badge--red    { background: var(--af-red);    color: var(--af-red-ink); }
.af-badge--purple { background: var(--af-purple); color: var(--af-purple-ink); }
.af-badge--cyan   { background: var(--af-cyan);   color: var(--af-cyan-ink); }

/* ---------- Pastilles de compteur (onglets) ---------- */
.af-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 21px;
    height: 21px;
    padding: 0 6px;
    border-radius: 999px;
    font: 700 12px/1 var(--af-font);
    background: #5f6a7a;
    color: #eef1f4;
}
.af-count--yellow { background: var(--af-gold); color: var(--af-gold-ink); }
.af-count--blue   { background: #5b9cef; color: #fff; }
.af-count--green  { background: #47c571; color: #062611; }
.af-count--gray   { background: #788394; color: #0d1218; }

/* ---------- Onglets "pilule" ---------- */
.af-tab {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    height: 38px;
    padding: 0 21px 0 20px;
    border-radius: var(--af-radius-md);
    border: 1px solid #172028;
    background: #11181f;
    color: #dfe4ea;
    font: 500 13.5px/1 var(--af-font);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.af-tab:hover { background: #151d25; color: #fff; }
.af-tab.is-active {
    background: #0b1014;
    border: 1.5px solid #c9952b;
    color: #fff;
    font-weight: 600;
    padding: 0 20.5px 0 19.5px;
}
.af-tab:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(245, 177, 42, 0.28); }

/* ---------- Divers ---------- */
.af-sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}
.af-count--orange { background: var(--af-orange); color: var(--af-orange-ink); }
.af-tab .af-count.is-current { background: var(--af-gold); color: var(--af-gold-ink); }
.af-count--red    { background: var(--af-red); color: #fff; }
.af-count--yellow { background: var(--af-yellow); color: var(--af-yellow-ink); }