/* ============================================================================
   parent_theme_retrofit.css — mise à la charte des pages du thème parent
   Créée le 08/09/2026.

   POURQUOI CETTE FEUILLE EXISTE
   -----------------------------
   64 gabarits n'ont aucune surcharge dans kheweul-child-theme et sont donc
   rendus par le thème parent « twenty-one », avec son apparence Bootstrap
   d'origine. Ce n'est pas un recoin du site : c'est TOUT le support
   (supportticketslist, viewticket, knowledgebase*, announcements, downloads*),
   l'authentification à deux facteurs (two-factor-*), la configuration SSL
   (configuressl-*), les contacts (account-contacts-*,
   clientareadomaincontactinfo), la gestion des utilisateurs (user-*), ainsi que
   contact.tpl, serverstatus.tpl et masspay.tpl.

   Un client qui ouvre un ticket quitte donc visuellement le site.

   Plutôt que réécrire 64 gabarits — long, risqué, et qui casserait à chaque
   mise à jour de WHMCS — cette feuille applique les tokens de marque aux
   classes Bootstrap que ces gabarits emploient déjà. Elle ne touche aucun
   fichier .tpl : elle est entièrement réversible en retirant une ligne du
   header.

   DEUX RÈGLES DE CONCEPTION, à respecter si l'on complète ce fichier
   -----------------------------------------------------------------
   1. TOUT passe par les variables --kw-*. Elles sont redéfinies dans le bloc
      .dark-mode de custom.css : le mode sombre est donc obtenu gratuitement,
      sans écrire une seule règle sombre ici. Ne jamais écrire une couleur en
      dur — ce serait exactement le défaut relevé dans invoice_redesign.css et
      password-reset.css, qui n'utilisent aucun token.

   2. SPÉCIFICITÉ MINIMALE, et AUCUN !important. Le cadrage se fait par
      :where(#main-body), qui n'ajoute rien à la spécificité : « .card » ci-
      dessous pèse donc exactement autant qu'un « .card » ordinaire. Comme
      cette feuille est chargée AVANT les feuilles de page
      (clientarea_redesign, dashboard, domaindetails…), toute page qui a déjà
      son propre style l'emporte naturellement. C'est une base, pas une
      surcouche.

      Conséquence à connaître : les navigateurs antérieurs à 2021 ignorent
      :where(). Ils verront ces pages comme aujourd'hui — dégradation propre,
      jamais de mise en page cassée.
   ========================================================================= */

/* --- Cadre de page -------------------------------------------------------- */

:where(#main-body) {
    background: var(--kw-bg);
    color: var(--kw-text);
}

:where(#main-body) h1,
:where(#main-body) h2,
:where(#main-body) h3,
:where(#main-body) h4 {
    color: var(--kw-text-heading);
    font-family: "Poppins", "Inter", system-ui, sans-serif;
    font-weight: 600;
    text-wrap: balance;
}

:where(#main-body) h1 { font-size: var(--fs-2xl); }
:where(#main-body) h2 { font-size: var(--fs-xl); }
:where(#main-body) h3 { font-size: var(--fs-lg); }

:where(#main-body) a {
    color: var(--kw-primary-text);
    text-decoration: none;
}

:where(#main-body) a:hover {
    color: var(--kw-primary-hover);
    text-decoration: underline;
}

:where(#main-body) .text-muted,
:where(#main-body) .text-black-50 {
    color: var(--kw-text-muted);
}

:where(#main-body) hr {
    border-top-color: var(--kw-border);
}

/* --- Cartes --------------------------------------------------------------- */

:where(#main-body) .card,
:where(#main-body) .panel {
    background: var(--kw-bg-card);
    border: 1px solid var(--kw-border);
    border-radius: var(--kw-radius-md);
    box-shadow: var(--kw-shadow);
    color: var(--kw-text);
}

:where(#main-body) .card-header,
:where(#main-body) .panel-heading {
    background: var(--kw-bg-alt);
    border-bottom: 1px solid var(--kw-border);
    border-radius: var(--kw-radius-md) var(--kw-radius-md) 0 0;
    color: var(--kw-text-heading);
    font-weight: 600;
    padding: var(--spacing-3) var(--spacing-4);
}

:where(#main-body) .card-body,
:where(#main-body) .panel-body {
    padding: var(--spacing-4);
}

:where(#main-body) .card-title {
    color: var(--kw-text-heading);
    font-weight: 600;
}

:where(#main-body) .card-footer {
    background: var(--kw-bg-alt);
    border-top: 1px solid var(--kw-border);
    border-radius: 0 0 var(--kw-radius-md) var(--kw-radius-md);
}

/* --- Boutons -------------------------------------------------------------- */

:where(#main-body) .btn {
    border-radius: var(--kw-radius-sm);
    font-weight: 600;
    padding: 0.5rem 1.1rem;
    transition: background-color var(--transition-fast),
                border-color var(--transition-fast),
                color var(--transition-fast);
}

:where(#main-body) .btn-primary {
    background-color: var(--kw-primary);
    border-color: var(--kw-primary);
    color: var(--kw-on-primary);
}

:where(#main-body) .btn-primary:hover,
:where(#main-body) .btn-primary:focus {
    background-color: var(--kw-primary-hover);
    border-color: var(--kw-primary-hover);
    color: var(--kw-on-primary);
}

/* btn-default est la classe du thème parent pour l'action secondaire.
   Bootstrap 4 ne la définit plus : sans cette règle, ces boutons sont
   entièrement transparents et illisibles. C'est le défaut le plus visible des
   pages concernées. */
:where(#main-body) .btn-default,
:where(#main-body) .btn-secondary {
    background-color: var(--kw-bg-alt);
    border: 1px solid var(--kw-border);
    color: var(--kw-text);
}

:where(#main-body) .btn-default:hover,
:where(#main-body) .btn-secondary:hover {
    background-color: var(--kw-border);
    color: var(--kw-text-heading);
}

:where(#main-body) .btn-sm {
    font-size: var(--fs-xs);
    padding: 0.3rem 0.75rem;
}

/* --- Formulaires ---------------------------------------------------------- */

:where(#main-body) .form-control,
:where(#main-body) select,
:where(#main-body) textarea {
    background: var(--kw-bg);
    border: 1px solid var(--kw-border);
    border-radius: var(--kw-radius-sm);
    color: var(--kw-text);
    padding: 0.55rem 0.85rem;
    transition: border-color var(--transition-fast),
                box-shadow var(--transition-fast);
}

:where(#main-body) .form-control:focus,
:where(#main-body) select:focus,
:where(#main-body) textarea:focus {
    border-color: var(--kw-primary);
    box-shadow: 0 0 0 3px var(--kw-primary-light);
    outline: none;
}

:where(#main-body) .form-control::placeholder {
    color: var(--kw-text-muted);
}

:where(#main-body) .col-form-label,
:where(#main-body) label {
    color: var(--kw-text-heading);
    font-weight: 600;
}

/* Tout élément atteint au clavier doit rester repérable : les gabarits du
   thème parent n'ont aucun état de focus visible. */
:where(#main-body) a:focus-visible,
:where(#main-body) .btn:focus-visible,
:where(#main-body) button:focus-visible {
    outline: 2px solid var(--kw-primary);
    outline-offset: 2px;
}

/* --- Tableaux ------------------------------------------------------------- */

:where(#main-body) .table {
    color: var(--kw-text);
}

:where(#main-body) .table thead th {
    background: var(--kw-bg-alt);
    border-bottom: 1px solid var(--kw-border);
    color: var(--kw-text-heading);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

:where(#main-body) .table td,
:where(#main-body) .table th {
    border-top: 1px solid var(--kw-border);
    vertical-align: middle;
}

:where(#main-body) .table tbody tr:hover {
    background: var(--kw-bg-alt);
}

/* Les listes de tickets et de téléchargements débordent sur mobile — le trafic
   est majoritairement mobile. On confine le défilement au tableau plutôt que
   de laisser la page entière glisser latéralement. */
:where(#main-body) .table-container,
:where(#main-body) .table-responsive {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
}

/* --- Pagination ----------------------------------------------------------- */

:where(#main-body) .page-link {
    background: var(--kw-bg-card);
    border: 1px solid var(--kw-border);
    color: var(--kw-text);
}

:where(#main-body) .page-item.active .page-link {
    background: var(--kw-primary);
    border-color: var(--kw-primary);
    color: var(--kw-on-primary);
}

:where(#main-body) .page-link:hover {
    background: var(--kw-bg-alt);
    color: var(--kw-text-heading);
}

/* --- Messages et étiquettes ----------------------------------------------- */

:where(#main-body) .alert {
    border: 1px solid var(--kw-border);
    border-radius: var(--kw-radius-sm);
    padding: var(--spacing-3) var(--spacing-4);
}

/* Bandeau de gauche coloré : l'information de gravité doit se lire d'un coup
   d'œil, sans dépendre uniquement de la teinte du fond. */
:where(#main-body) .alert-success { border-left: 4px solid #16a34a; }
:where(#main-body) .alert-danger  { border-left: 4px solid #dc2626; }
:where(#main-body) .alert-warning { border-left: 4px solid #d97706; }
:where(#main-body) .alert-info    { border-left: 4px solid var(--kw-primary); }

:where(#main-body) .badge,
:where(#main-body) .label {
    border-radius: var(--kw-radius-full);
    font-size: var(--fs-xs);
    font-weight: 600;
    padding: 0.25em 0.75em;
}

/* --- Listes et onglets ---------------------------------------------------- */

:where(#main-body) .list-group-item {
    background: var(--kw-bg-card);
    border-color: var(--kw-border);
    color: var(--kw-text);
}

:where(#main-body) .nav-tabs {
    border-bottom: 1px solid var(--kw-border);
}

:where(#main-body) .nav-tabs .nav-link {
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--kw-text-muted);
    font-weight: 600;
}

:where(#main-body) .nav-tabs .nav-link.active {
    background: transparent;
    border-bottom-color: var(--kw-primary);
    color: var(--kw-text-heading);
}

/* --- Fil d'Ariane --------------------------------------------------------- */

:where(#main-body) .breadcrumb {
    background: transparent;
    padding-left: 0;
}

:where(#main-body) .breadcrumb-item,
:where(#main-body) .breadcrumb-item + .breadcrumb-item::before {
    color: var(--kw-text-muted);
}

/* --- Confort de lecture --------------------------------------------------- */

/* Les articles de la base de connaissances et les réponses aux tickets sont du
   texte long : au-delà d'environ 75 caractères par ligne, l'œil perd la ligne
   suivante. */
:where(#main-body) .kbarticle-content p,
:where(#main-body) .announcement-content p {
    max-width: 75ch;
}

@media (prefers-reduced-motion: reduce) {
    :where(#main-body) * {
        transition-duration: 0.01ms;
    }
}