/**
 * H360-CUSTOM [INVITE_PORTAL_HUB_UI] — feuille de style du portail invité H360.
 *
 * POURQUOI CE FICHIER EXISTE
 * Les vues du hub utilisaient des utilitaires Tailwind ABSENTS du CSS compilé du
 * dépôt (`public/css/tailwind/app.css` est un build pré-compilé, livré par le
 * fournisseur, sans `package.json` ni config Tailwind dans le projet) :
 *   sm:tw-grid-cols-3, md:tw-grid-cols-3, tw-grid-cols-[1fr_auto],
 *   tw-text-[11px], tw-tracking-[0.22em] …
 * Résultat mesuré : toutes les grilles restaient sur UNE colonne (cartes de 829 px
 * de haut), la micro-typographie (letter-spacing) était perdue, les pilules se
 * cassaient en ellipse, et le titre du hero s'affichait en navy sur fond navy
 * (contraste ≈ 1,2:1).
 *
 * Ce fichier fournit donc un petit design-system autonome, préfixé `hip-`
 * (H-style InvitePortal), volontairement SANS dépendance à Tailwind : il ne
 * s'appuie sur aucune classe utilitaire, ce qui le rend insensible à un futur
 * rebuild du CSS du fournisseur.
 *
 * Dépendance : aucune. Chargé par `h360inviteportal::layout` (hub) et par
 * `scanner.blade.php` (via @section('css')) pour l'écran de connexion.
 */

/* ── 1. Jetons de design ──────────────────────────────────────────────────── */
:root {
    --hip-ink: #0b1220;
    --hip-ink-2: #334155;
    --hip-muted: #64748b;
    --hip-soft: #94a3b8;
    --hip-line: #e2e8f0;
    --hip-line-strong: #cbd5e1;
    --hip-bg: #f5f7fb;
    --hip-surface: #ffffff;
    --hip-surface-2: #f8fafc;

    --hip-brand: #2563eb;
    --hip-brand-dark: #1d4ed8;
    --hip-brand-ink: #1e3a8a;
    --hip-accent: #f97316;

    --hip-ok: #047857;
    --hip-ok-bg: #ecfdf5;
    --hip-info: #0369a1;
    --hip-info-bg: #eff8ff;
    --hip-warn: #b45309;
    --hip-warn-bg: #fffaeb;
    --hip-danger: #b42318;
    --hip-danger-bg: #fef3f2;
    --hip-violet: #6941c6;
    --hip-violet-bg: #f4f3ff;

    --hip-radius: 20px;
    --hip-radius-sm: 14px;
    --hip-radius-xs: 10px;
    --hip-pill: 999px;

    --hip-shadow-1: 0 1px 2px rgba(15, 23, 42, .05), 0 10px 26px -18px rgba(15, 23, 42, .35);
    --hip-shadow-2: 0 2px 6px rgba(15, 23, 42, .06), 0 26px 50px -28px rgba(15, 23, 42, .45);
    --hip-ring: 0 0 0 3px rgba(37, 99, 235, .28);
}

/* ── 2. Base : typographie et nombres ─────────────────────────────────────── */
/* Le <html> du thème porte un fond SOMBRE (daisyUI/Tailwind base : oklch(0.25 …)).
   Dès que la page dépasse 100vh, ce fond sombre apparaît sous le dégradé clair du
   <body> : effet « page coupée en deux ». Cette feuille n'étant chargée que par le
   hub et son écran de connexion, on fixe le fond de page sur ces pages uniquement. */
:root,
html,
body {
    background-color: var(--hip-bg);
}

.hip-scope {
    color: var(--hip-ink-2);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

.hip-scope h1,
.hip-scope h2,
.hip-scope h3 {
    color: var(--hip-ink);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.15;
    margin: 0;
}

/* Les paragraphes SANS classe ne doivent pas hériter des marges AdminLTE ; les
   composants `hip-*` gardent la main sur leur propre espacement (sans `:not([class])`
   la règle `.hip-scope p` écrasait `.hip-hero__sub` — spécificité 0,1,1 > 0,1,0). */
.hip-scope p:not([class]) { margin: 0; }

/* Les montants doivent s'aligner verticalement : chiffres tabulaires partout. */
.hip-num,
.hip-tile__value,
.hip-kpi__value,
.hip-amount {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.hip-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--hip-muted);
}

.hip-lead {
    font-size: 15px;
    color: var(--hip-muted);
}

/* ── 3. Hero ──────────────────────────────────────────────────────────────── */
.hip-hero {
    position: relative;
    overflow: hidden;
    border-radius: var(--hip-radius);
    padding: 26px 26px 24px;
    color: #fff;
    box-shadow: var(--hip-shadow-2);
    background:
        radial-gradient(120% 150% at 100% 0%, rgba(249, 115, 22, .38) 0%, rgba(249, 115, 22, 0) 46%),
        linear-gradient(135deg, #0b1220 0%, #1e3a8a 52%, #2563eb 100%);
}

.hip-hero__inner {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.hip-hero__eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(219, 234, 254, .92);
}

/* Correctif de contraste : le titre était en rgb(50,50,93) sur un fond navy.
   Sélecteur composé obligatoire : `.hip-scope h1` (0,1,1) battait
   `.hip-hero__title` (0,1,0) et reimposait la couleur encre. */
.hip-hero .hip-hero__title {
    margin-top: 8px;
    color: #ffffff;
    font-size: clamp(24px, 3.1vw, 36px);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.12;
    text-shadow: 0 1px 2px rgba(2, 6, 23, .25);
}

.hip-hero .hip-hero__sub {
    margin: 10px 0 0;
    max-width: 62ch;
    font-size: 15px;
    color: rgba(239, 246, 255, .92);
}

.hip-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.hip-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* ── 4. Pilules et badges ─────────────────────────────────────────────────── */
.hip-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border-radius: var(--hip-pill);
    border: 1px solid transparent;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap; /* évite la pilule « ellipse » sur deux lignes */
}

.hip-pill--glass {
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .22);
    color: #ffffff;
}

.hip-pill--neutral { background: #f1f5f9; color: var(--hip-ink-2); }
.hip-pill--brand { background: #eff4ff; color: var(--hip-brand-ink); }
.hip-pill--ok { background: var(--hip-ok-bg); color: var(--hip-ok); }
.hip-pill--info { background: var(--hip-info-bg); color: var(--hip-info); }
.hip-pill--warn { background: var(--hip-warn-bg); color: var(--hip-warn); }
.hip-pill--violet { background: var(--hip-violet-bg); color: var(--hip-violet); }

.hip-pill__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    opacity: .75;
}

/* ── 5. Boutons ───────────────────────────────────────────────────────────── */
.hip-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: var(--hip-pill);
    background: #fff;
    color: var(--hip-ink);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: transform .14s ease, box-shadow .14s ease, background-color .14s ease, color .14s ease;
}

.hip-btn:hover { transform: translateY(-1px); }

.hip-btn:focus-visible {
    outline: none;
    box-shadow: var(--hip-ring);
}

.hip-btn--primary {
    color: #fff;
    background: linear-gradient(135deg, var(--hip-brand-dark) 0%, var(--hip-brand) 100%);
    box-shadow: 0 10px 22px -14px rgba(37, 99, 235, .85);
}

.hip-btn--primary:hover { background: linear-gradient(135deg, #1e40af 0%, #1d4ed8 100%); }

.hip-btn--ghost {
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .26);
    color: #fff;
}

.hip-btn--ghost:hover { background: rgba(255, 255, 255, .22); }

.hip-btn--outline {
    background: #fff;
    border-color: var(--hip-line-strong);
    color: var(--hip-ink-2);
}

.hip-btn--outline:hover { border-color: var(--hip-brand); color: var(--hip-brand-ink); }

.hip-btn--block { width: 100%; }

.hip-btn[disabled],
.hip-btn.is-busy { opacity: .6; cursor: progress; transform: none; }

/* ── 6. Surfaces / cartes / sections ──────────────────────────────────────── */
.hip-card {
    background: var(--hip-surface);
    border: 1px solid var(--hip-line);
    border-radius: var(--hip-radius);
    box-shadow: var(--hip-shadow-1);
}

.hip-card__body { padding: 22px; }

.hip-section { margin-top: 20px; }

.hip-section__head {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 22px 22px 0;
}

@media (min-width: 720px) {
    .hip-section__head {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
    }
}

.hip-section__title { font-size: 21px; }
.hip-section .hip-section__hint { margin: 6px 0 0; font-size: 14px; color: var(--hip-muted); }
.hip-section__aside { display: flex; flex-wrap: wrap; gap: 8px; }
.hip-section__body { padding: 20px 22px 22px; }

/* ── 7. KPI ───────────────────────────────────────────────────────────────── */
.hip-grid { display: grid; gap: 16px; }

/* auto-fit : 2 tuiles remplissent la ligne quand les KPI « zéro » sont masqués ;
   largeur plafonnée à 300 px pour éviter des cartes étirées sur toute la page. */
.hip-grid--kpi {
    grid-template-columns: repeat(auto-fit, minmax(215px, 300px));
    justify-content: start;
}
.hip-grid--2 { grid-template-columns: 1fr; }
.hip-grid--3 { grid-template-columns: 1fr; }
.hip-grid--profiles { grid-template-columns: 1fr; }

@media (min-width: 620px) {
    .hip-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 860px) {
    .hip-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hip-grid--profiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1240px) {
    .hip-grid--profiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.hip-kpi {
    padding: 18px 20px;
    border-radius: var(--hip-radius-sm);
    background: var(--hip-surface);
    border: 1px solid var(--hip-line);
    box-shadow: var(--hip-shadow-1);
}

.hip-kpi__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--hip-muted);
}

.hip-kpi__value {
    margin-top: 8px;
    font-size: 30px;
    font-weight: 800;
    color: var(--hip-ink);
    letter-spacing: -.02em;
    line-height: 1;
}

.hip-kpi__hint { margin-top: 8px; font-size: 13px; color: var(--hip-muted); }

/* ── 8. Tuiles de montants ────────────────────────────────────────────────── */
.hip-tiles { display: grid; gap: 10px; grid-template-columns: 1fr; }

@media (min-width: 560px) {
    .hip-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .hip-tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.hip-tile {
    padding: 13px 15px;
    border-radius: var(--hip-radius-sm);
    background: var(--hip-surface-2);
    border: 1px solid var(--hip-line);
}

/* Dès 360 px, les 3 montants tiennent côte à côte (valeurs courtes) : évite une
   colonne de tuiles interminable sur mobile. */
@media (min-width: 360px) {
    .hip-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .hip-tiles--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.hip-tile__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--hip-muted);
}

.hip-tile__value {
    margin-top: 6px;
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--hip-ink);
}

.hip-tile--sales { background: var(--hip-ok-bg); border-color: #a7f3d0; }
.hip-tile--sales .hip-tile__value { color: #065f46; }
.hip-tile--paid { background: var(--hip-info-bg); border-color: #b9e6fe; }
.hip-tile--paid .hip-tile__value { color: #075985; }
.hip-tile--due { background: var(--hip-warn-bg); border-color: #fedf89; }
.hip-tile--due .hip-tile__value { color: #92400e; }
.hip-tile--points { background: var(--hip-violet-bg); border-color: #ddd6fe; }
.hip-tile--points .hip-tile__value { color: #5b21b6; }

/* ── 9. Carte d'accès (portail) ───────────────────────────────────────────── */
.hip-profile {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--hip-radius);
    border: 1px solid var(--hip-line);
    background: var(--hip-surface);
    box-shadow: var(--hip-shadow-1);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.hip-profile:hover {
    transform: translateY(-2px);
    box-shadow: var(--hip-shadow-2);
    border-color: #bfdbfe;
}

.hip-profile__band {
    position: relative;
    padding: 20px 22px;
    color: #fff;
    background-image: linear-gradient(135deg, var(--hip-band-start, #0f172a) 0%, var(--hip-band-end, #2563eb) 100%);
}

/* Voile sombre : garantit un contraste ≥ 4.5:1 pour le texte blanc quelle que
   soit la couleur de thème fournie par le module (école, immobilier, gym…). */
.hip-profile__band::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(2, 6, 23, .62) 0%, rgba(2, 6, 23, .34) 100%);
}

.hip-profile__band > * { position: relative; z-index: 1; }

.hip-profile__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.hip-profile__module {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .82);
}

.hip-profile__portal {
    margin-top: 6px;
    font-size: 19px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -.01em;
}

.hip-profile__identity {
    margin-top: 14px;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}

.hip-profile__ids {
    margin-top: 5px;
    font-size: 13px;
    color: rgba(255, 255, 255, .88);
    word-break: break-word;
}

.hip-profile__body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 22px 22px;
}

.hip-chips { display: flex; flex-wrap: wrap; gap: 7px; }

.hip-chip {
    display: inline-flex;
    align-items: center;
    padding: 5px 11px;
    border-radius: var(--hip-pill);
    background: #f1f5f9;
    color: var(--hip-ink-2);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.hip-chips--accent .hip-chip { background: #eff4ff; color: var(--hip-brand-ink); }

.hip-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.hip-fact {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    padding: 8px 12px;
    border-radius: var(--hip-radius-xs);
    background: var(--hip-surface-2);
    border: 1px solid var(--hip-line);
}

.hip-fact__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--hip-muted);
}

.hip-fact__value { font-size: 14px; font-weight: 800; color: var(--hip-ink); }

.hip-quick {
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr;
}

@media (min-width: 480px) {
    .hip-quick { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.hip-quick__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 12px;
    border-radius: var(--hip-radius-xs);
    border: 1px solid var(--hip-line);
    background: var(--hip-surface-2);
    color: var(--hip-ink);
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    transition: background-color .14s ease, border-color .14s ease, color .14s ease;
}

.hip-quick__link:hover {
    background: #eff4ff;
    border-color: #bfdbfe;
    color: var(--hip-brand-ink);
}

.hip-quick__link:focus-visible { outline: none; box-shadow: var(--hip-ring); }

.hip-profile__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--hip-line);
}

.hip-profile__ref { font-size: 12px; color: var(--hip-muted); }
.hip-profile__ref strong { color: var(--hip-ink-2); }

/* ── 10. Filtre, états vides, messages ────────────────────────────────────── */
.hip-toolbar {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

@media (min-width: 720px) {
    .hip-toolbar { flex-direction: row; align-items: center; justify-content: space-between; }
}

.hip-search {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 420px;
    padding: 10px 14px;
    border: 1px solid var(--hip-line-strong);
    border-radius: var(--hip-radius-sm);
    background: #fff;
}

.hip-search:focus-within { border-color: var(--hip-brand); box-shadow: var(--hip-ring); }

.hip-search i { color: var(--hip-soft); }

.hip-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    font-size: 14px;
    color: var(--hip-ink);
}

.hip-empty {
    padding: 34px 24px;
    text-align: center;
    border: 1px dashed var(--hip-line-strong);
    border-radius: var(--hip-radius);
    background: var(--hip-surface-2);
}

.hip-empty__title { font-size: 18px; font-weight: 800; color: var(--hip-ink); }
.hip-empty .hip-empty__hint { margin: 6px 0 0; font-size: 14px; color: var(--hip-muted); }

.hip-notice {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    margin-top: 16px;
    border-radius: var(--hip-radius-sm);
    border: 1px solid var(--hip-line);
    background: var(--hip-surface);
    font-size: 14px;
}

.hip-notice--ok { border-color: #a7f3d0; background: var(--hip-ok-bg); color: #065f46; }
.hip-notice--error { border-color: #fecdca; background: var(--hip-danger-bg); color: #912018; }

.hip-hidden { display: none !important; }

/* ── 11. Écran de connexion (carte d'authentification) ────────────────────── */
.hip-auth {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.hip-field { display: flex; flex-direction: column; gap: 7px; }

.hip-field__label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--hip-ink-2);
}

.hip-input {
    width: 100%;
    min-height: 50px;
    padding: 0 14px;
    border: 1px solid var(--hip-line-strong);
    border-radius: var(--hip-radius-sm);
    background: #fff;
    color: var(--hip-ink);
    font-size: 15px;
    outline: none;
    transition: border-color .14s ease, box-shadow .14s ease;
}

.hip-input:focus { border-color: var(--hip-brand); box-shadow: var(--hip-ring); }

.hip-input--code {
    font-weight: 800;
    letter-spacing: .34em;
    text-align: center;
}

.hip-panel {
    padding: 18px;
    border: 1px solid var(--hip-line);
    border-radius: var(--hip-radius-sm);
    background: var(--hip-surface-2);
}

.hip-panel--channel { border-color: #b9e6fe; background: var(--hip-info-bg); }
.hip-panel--verify { border-color: #a7f3d0; background: var(--hip-ok-bg); }

.hip-panel__title { font-size: 15px; font-weight: 800; color: var(--hip-ink); }
.hip-panel__hint { margin-top: 4px; font-size: 13px; color: var(--hip-muted); }

.hip-choice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--hip-line);
    border-radius: var(--hip-radius-sm);
    background: #fff;
    cursor: pointer;
    transition: border-color .14s ease, background-color .14s ease;
}

.hip-choice:hover { border-color: #bfdbfe; background: #f8fbff; }
.hip-choice input { margin-top: 3px; }
.hip-choice__label { font-size: 14px; font-weight: 700; color: var(--hip-ink); }
.hip-choice__meta { margin-top: 3px; font-size: 12px; color: var(--hip-muted); }

.hip-feedback {
    padding: 12px 15px;
    border-radius: var(--hip-radius-sm);
    font-size: 14px;
    font-weight: 600;
    border: 1px solid transparent;
}

.hip-feedback--error { background: var(--hip-danger-bg); border-color: #fecdca; color: #912018; }
.hip-feedback--info { background: var(--hip-info-bg); border-color: #b9e6fe; color: #075985; }
.hip-feedback--success { background: var(--hip-ok-bg); border-color: #a7f3d0; color: #065f46; }
.hip-feedback--busy { background: var(--hip-surface-2); border-color: var(--hip-line); color: var(--hip-ink-2); }

.hip-preview { display: grid; gap: 10px; grid-template-columns: 1fr; }

@media (min-width: 720px) {
    .hip-preview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.hip-preview__card {
    padding: 14px;
    border: 1px solid var(--hip-line);
    border-radius: var(--hip-radius-sm);
    background: #fff;
}

/* Choix du canal de réception (radios) et ligne « code + bouton ». */
.hip-choices { display: grid; gap: 10px; }

.hip-verify-row { display: grid; gap: 12px; align-items: end; grid-template-columns: 1fr; }

@media (min-width: 620px) {
    .hip-verify-row { grid-template-columns: minmax(0, 1fr) auto; }
}

/* ── 12. Accessibilité / impression ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .hip-btn,
    .hip-profile,
    .hip-quick__link { transition: none; }
    .hip-btn:hover,
    .hip-profile:hover { transform: none; }
}

/* Le hub est consultable sur une borne ou un écran étroit : on garde tout
   lisible jusqu'à 320 px. */
@media (max-width: 420px) {
    .hip-hero { padding: 20px; border-radius: var(--hip-radius-sm); }
    .hip-card__body,
    .hip-section__head,
    .hip-section__body,
    .hip-profile__body { padding-left: 16px; padding-right: 16px; }
    /* Tuiles de montants : police réduite pour tenir sur 3 colonnes en téléphone
       (mesuré : 62 px de contenu pour 59 px de tuile en 21 px). */
    .hip-tile { padding: 11px 10px; }
    .hip-tile__label { font-size: 10px; letter-spacing: .08em; }
    .hip-tile__value { font-size: 17px; }
}