/*
 * Palette et typographie alignées sur le thème par défaut du panel Filament
 * (admin) : primaire Blue, neutre Zinc, police Inter — pour qu'il n'y ait
 * aucune rupture visuelle en passant de l'appli utilisateur à /admin.
 * Valeurs Zinc/Blue reprises telles quelles depuis Filament\Support\Colors\Color.
 */
:root {
    --bg: #fafafa;          /* zinc-50 */
    --card-bg: #ffffff;
    --text: #09090b;        /* zinc-950 */
    --muted: #71717a;       /* zinc-500 */
    --border: #e4e4e7;      /* zinc-200 */
    --accent: #2563eb;      /* blue-600 */
    --accent-hover: #1d4ed8;/* blue-700 */
    --accent-tint: #eff6ff; /* blue-50 */
    --accent-contrast: #ffffff;
    --row-hover: #f4f4f5;   /* zinc-100 */
    --success-bg: #e3f7ea; --success-text: #157347;
    --info-bg: #e5f0ff;    --info-text: #1d4ed8;
    --warning-bg: #fff4e0; --warning-text: #b45309;
    --danger-bg: #fde7ea;  --danger-text: #b00020;
    --neutral-bg: #eef0f3; --neutral-text: #4b5563;
    --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
    --series-1: #2563eb;
    --chart-track: #eef0f3;
}

/* Le mode sombre s'applique soit par préférence système (media query), soit
   explicitement via le sélecteur de thème (attribut data-theme posé par
   public/js/theme-toggle.js) — qui, en tant que sélecteur d'attribut, gagne
   toujours sur la seule media query si l'utilisateur a fait un choix explicite. */
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #09090b;          /* zinc-950 */
        --card-bg: #18181b;     /* zinc-900 */
        --text: #fafafa;        /* zinc-50 */
        --muted: #a1a1aa;       /* zinc-400 */
        --border: #27272a;      /* zinc-800 */
        --accent: #3b82f6;      /* blue-500, éclairci pour le contraste sur fond sombre */
        --accent-hover: #60a5fa;/* blue-400 */
        --accent-tint: #17233d;
        --accent-contrast: #ffffff;
        --row-hover: #202023;
        --success-bg: #123425; --success-text: #57d888;
        --info-bg: #142a4d;    --info-text: #7fb0ff;
        --warning-bg: #3a2a0d; --warning-text: #f2b653;
        --danger-bg: #3a1420;  --danger-text: #ff7a90;
        --neutral-bg: #262b36; --neutral-text: #b4bccb;
        --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 10px rgba(0, 0, 0, .25);
        --series-1: #3b82f6;
        --chart-track: #262b36;
    }
}

:root[data-theme="dark"] {
    --bg: #09090b; --card-bg: #18181b; --text: #fafafa; --muted: #a1a1aa;
    --border: #27272a; --accent: #3b82f6; --accent-hover: #60a5fa;
    --accent-tint: #17233d; --accent-contrast: #ffffff; --row-hover: #202023;
    --success-bg: #123425; --success-text: #57d888;
    --info-bg: #142a4d;    --info-text: #7fb0ff;
    --warning-bg: #3a2a0d; --warning-text: #f2b653;
    --danger-bg: #3a1420;  --danger-text: #ff7a90;
    --neutral-bg: #262b36; --neutral-text: #b4bccb;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 10px rgba(0, 0, 0, .25);
    --series-1: #3b82f6; --chart-track: #262b36;
}

:root[data-theme="light"] {
    --bg: #fafafa; --card-bg: #ffffff; --text: #09090b; --muted: #71717a;
    --border: #e4e4e7; --accent: #2563eb; --accent-hover: #1d4ed8;
    --accent-tint: #eff6ff; --accent-contrast: #ffffff; --row-hover: #f4f4f5;
    --success-bg: #e3f7ea; --success-text: #157347;
    --info-bg: #e5f0ff;    --info-text: #1d4ed8;
    --warning-bg: #fff4e0; --warning-text: #b45309;
    --danger-bg: #fde7ea;  --danger-text: #b00020;
    --neutral-bg: #eef0f3; --neutral-text: #4b5563;
    --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
    --series-1: #2563eb; --chart-track: #eef0f3;
}

* { box-sizing: border-box; }

body {
    font-family: "Inter Variable", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    margin: 0;
    line-height: 1.5;
}

/* --- Topbar : même hauteur (4rem) et même traitement (fond plein, fine
   bordure basse) que le .fi-topbar du panel Filament --- */

.app-topbar {
    background: var(--card-bg);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 50;
}
.app-topbar-inner {
    width: 100%;
    height: 4rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding-inline: 1rem;
}

.app-main {
    width: 100%;
    padding: 2rem 1rem 4rem;
}

@media (min-width: 48rem) {
    .app-topbar-inner { padding-inline: 1.5rem; }
    .app-main { padding-inline: 1.5rem; }
}
@media (min-width: 64rem) {
    .app-topbar-inner { padding-inline: 2rem; }
    .app-main { padding-inline: 2rem; }
}

/* Pages "détail/lecture" (recherche DIT, doc) : une pleine largeur ne les aide
   pas — les tableaux clé/valeur et paragraphes deviennent difficiles à lire
   quand ils s'étirent sur un écran large. Le dashboard (grille de widgets),
   lui, reste fluide sur toute la largeur de .app-main. */
.content-narrow {
    max-width: 760px;
    margin: 0 auto;
    width: 100%;
}

.topnav {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    width: 100%;
    font-size: .875rem;
}
.topnav .brand {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    font-size: .95rem;
    color: var(--text);
    text-decoration: none;
    letter-spacing: -.01em;
    white-space: nowrap;
}
.topnav .brand .brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--accent);
    color: var(--accent-contrast);
    font-size: .8rem;
    font-weight: 700;
}
.topnav nav {
    display: flex;
    align-items: center;
    gap: .25rem;
}
.topnav nav a {
    color: var(--muted);
    text-decoration: none;
    font-weight: 500;
    padding: .5rem .75rem;
    border-radius: 8px;
}
.topnav nav a:hover { color: var(--text); background: var(--row-hover); }
.topnav nav a.active { color: var(--accent); font-weight: 600; background: var(--accent-tint); }
.topnav .spacer { flex: 1; }
.topnav .admin-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--accent);
    background: var(--accent-tint);
    text-decoration: none;
    font-weight: 600;
    font-size: .82rem;
    padding: .4rem .75rem;
    border-radius: 999px;
    white-space: nowrap;
}
.topnav .admin-link:hover { opacity: .85; }
.topnav form { background: none; border: none; box-shadow: none; padding: 0; margin: 0; display: contents; }
.topnav .user {
    display: flex;
    align-items: center;
    gap: .55rem;
    color: var(--text);
    font-weight: 500;
    white-space: nowrap;
}
.topnav .user .avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: var(--accent-tint);
    color: var(--accent);
    font-size: .78rem;
    font-weight: 700;
    flex-shrink: 0;
}
.topnav button.link {
    background: none;
    border: none;
    padding: 0;
    color: var(--muted);
    font-size: .82rem;
    cursor: pointer;
}
.topnav button.link:hover { color: var(--danger-text); }

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border: 1px solid var(--border);
    background: var(--card-bg);
    color: var(--muted);
    border-radius: 8px;
    cursor: pointer;
    padding: 0;
}
.theme-toggle:hover { color: var(--text); background: var(--row-hover); }
.theme-toggle svg { width: 16px; height: 16px; }

.login-page {
    max-width: 360px;
    margin: 5rem auto 0;
    text-align: center;
}
.login-page .card { padding: 2.5rem 2rem; }
.btn-microsoft {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    background: var(--accent);
    color: var(--accent-contrast);
    text-decoration: none;
    font-weight: 600;
    font-size: .92rem;
    padding: .7rem 1.4rem;
    border-radius: 8px;
    margin-top: 1rem;
}
.btn-microsoft:hover { opacity: .9; }

.kiosk-banner {
    font-size: .8rem;
    color: var(--muted);
    text-align: right;
    margin-bottom: .5rem;
}

h1 { font-size: 1.4rem; margin: 0 0 .25rem; }
h1 + p { color: var(--muted); margin: 0 0 1.75rem; font-size: .95rem; }
h2 { font-size: 1.1rem; margin: 0 0 .75rem; }
h3 { font-size: .95rem; margin: 0 0 .75rem; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }

.dashboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.dashboard-header h1 { margin: 0; }
.dashboard-header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}
#dashboard-picker {
    background: var(--card-bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: .5rem .75rem;
    font-size: .875rem;
    font-family: inherit;
    font-weight: 500;
    cursor: pointer;
}

.switch-label {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .875rem;
    color: var(--muted);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.switch-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}
.switch-track {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 20px;
    flex-shrink: 0;
    background: var(--border);
    border-radius: 999px;
    transition: background .15s ease;
}
.switch-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    transition: transform .15s ease;
}
.switch-input:checked + .switch-track { background: var(--accent); }
.switch-input:checked + .switch-track .switch-thumb { transform: translateX(14px); }
.switch-input:focus-visible + .switch-track { outline: 2px solid var(--accent); outline-offset: 2px; }

form {
    display: flex;
    gap: .5rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    border-radius: 12px;
    padding: .5rem;
    margin-bottom: 1.5rem;
}
form label { display: none; }
form input[type="text"] {
    flex: 1;
    border: none;
    background: transparent;
    padding: .6rem .75rem;
    font-size: .95rem;
    color: var(--text);
    outline: none;
}
form button {
    border: none;
    background: var(--accent);
    color: var(--accent-contrast);
    font-size: .9rem;
    font-weight: 600;
    padding: .6rem 1.25rem;
    border-radius: 8px;
    cursor: pointer;
    transition: opacity .15s ease;
}
form button:hover { opacity: .9; }

.error {
    color: var(--danger-text);
    background: var(--danger-bg);
    padding: .75rem 1rem;
    border-radius: 10px;
    margin-bottom: 1.5rem;
    font-size: .92rem;
}

.card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}
.card-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 1rem;
}
.card-header h2 { margin: 0; }
.card + h2 { margin-top: 2rem; }

.it-card { margin-bottom: 1rem; }
.it-card:last-child { margin-bottom: 0; }

table { border-collapse: collapse; width: 100%; }
table + table { margin-top: 1rem; }
th, td { padding: .5rem .25rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); font-size: .92rem; }
tr:last-child > th, tr:last-child > td { border-bottom: none; }

table.kv th {
    width: 200px;
    font-weight: 500;
    color: var(--muted);
    border-bottom: 1px solid var(--border);
}
table.kv tr:hover td, table.kv tr:hover th { background: var(--row-hover); }

table.list th {
    color: var(--muted);
    font-weight: 600;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .02em;
    border-bottom: 2px solid var(--border);
}
table.list tr:hover td { background: var(--row-hover); }

.badge {
    display: inline-block;
    padding: .2rem .6rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
}
.badge--success { background: var(--success-bg); color: var(--success-text); }
.badge--info    { background: var(--info-bg);    color: var(--info-text); }
.badge--warning { background: var(--warning-bg); color: var(--warning-text); }
.badge--danger  { background: var(--danger-bg);  color: var(--danger-text); }
.badge--neutral { background: var(--neutral-bg); color: var(--neutral-text); }

details.debug {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: .75rem 1rem;
}
details.debug summary {
    cursor: pointer;
    color: var(--muted);
    font-size: .85rem;
    font-weight: 600;
}
details.debug pre {
    margin-top: .75rem;
    padding: 1rem;
    background: var(--bg);
    border-radius: 8px;
    overflow-x: auto;
    font-size: .8rem;
    color: var(--text);
}

@media (max-width: 560px) {
    table.kv th { width: 45%; }
}

/* --- Dashboard : KPI + bar chart --- */

.kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.stat-tile {
    background: var(--card-bg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
}
.stat-tile .label { color: var(--muted); font-size: .85rem; margin-bottom: .4rem; }
.stat-tile .value { font-size: 2rem; font-weight: 600; line-height: 1; }

.barchart { width: 100%; }
.barchart .row {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .4rem 0;
}
.barchart .row-label {
    width: 190px;
    flex-shrink: 0;
    font-size: .88rem;
    color: var(--text);
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.barchart .row-track {
    flex: 1;
    position: relative;
    height: 24px;
    background: var(--chart-track);
    border-radius: 4px;
}
.barchart .row-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 24px;
    border-radius: 4px;
    background: var(--w-accent, var(--series-1, #2a78d6));
    min-width: 4px;
}
.barchart .row-bar:hover { filter: brightness(1.08); }
.barchart .row-value {
    width: 40px;
    flex-shrink: 0;
    font-size: .88rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* --- Widgets génériques (dashboard authentifié + écrans /screen) --- */

.widgets-grid {
    display: grid;
    /* 24 colonnes : même convention que la page admin "Organiser" (Gridstack) —
       la disposition choisie là-bas se reflète telle quelle ici. 24 (pas 12) :
       une case plus fine, utile pour des petits widgets moins "rectangle".
       minmax(0, 1fr), pas juste 1fr : une colonne 1fr a un min-width:auto
       implicite basé sur le contenu le plus large qu'elle contient — un widget
       étroit (1 case) au padding/texte trop large pour sa part forçait donc sa
       colonne (et toutes les cases qui la partagent) à s'élargir bien au-delà
       de ce que "span 1" devrait donner. minmax(0, 1fr) supprime ce plancher
       implicite : le contenu déborde/tronque dans sa cellule au lieu de
       distordre la grille. */
    grid-template-columns: repeat(24, minmax(0, 1fr));
    /* Réglable par dashboard (page admin, "Taille de la grille") — voir
       applyTheme() dans dashboard.js/screen.js. */
    grid-auto-rows: var(--row-height, 70px);
    gap: 1rem;
}
.widget-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    /* Un item de grille a, en plus de la piste (corrigé plus haut avec
       minmax(0, 1fr)), sa PROPRE taille minimale implicite basée sur son
       contenu (ex. un nombre KPI en gros texte insécable) — sans ça, un
       widget étroit (1 case) continue de s'élargir malgré la piste corrigée.
       min-width: 0 supprime ce second plancher ; le contenu déborde dans sa
       propre boîte (overflow ci-dessous) au lieu d'agrandir le widget. */
    min-width: 0;
    min-height: 0;
}
.widget-card h3 {
    margin: 0 0 .75rem;
    font-size: .95rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .03em;
}
.widget-card { overflow: auto; }
.widget-card.is-transparent { background: transparent; box-shadow: none; }
.widget-card.is-borderless { border: none; box-shadow: none; }
/* overflow: hidden (pas auto), même raison que .widget-title : un KPI (juste un
   libellé + un nombre) ne doit jamais afficher de barre de défilement — un
   léger recadrage vaut mieux qu'une scrollbar sur un contenu aussi simple. */
.widget-kpi { overflow: hidden; }
.widget-kpi .label { color: var(--muted); font-size: .85rem; margin-bottom: .4rem; }
.widget-kpi .value { font-size: 2rem; font-weight: 600; line-height: 1; color: var(--w-accent, var(--text)); }
.widget-table table.list { width: 100%; }

/* Numéros de DIT détectés dans un tableau/texte libre (vue dashboard
   utilisateur connecté uniquement, voir dashboard.js) : couleur héritée du
   texte environnant (fonctionne quelle que soit la couleur de fond du widget,
   personnalisable) — seul le soulignement signale que c'est cliquable. */
.dit-link {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: currentColor;
    text-underline-offset: 2px;
}
.dit-link:hover { opacity: .7; }

/* overflow: hidden (pas auto) : un titre/bandeau ne doit jamais afficher de
   barre de défilement — si le contenu dépasse légèrement (titre long qui
   passe à la ligne, par ex.), on préfère un léger recadrage à une scrollbar
   sur un élément purement décoratif. */
.widget-title { display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.widget-title h1 { margin: 0; font-size: 1.8rem; line-height: 1.2; }
.widget-title .subtitle { margin: 4px 0 0; color: var(--muted); font-size: 1rem; line-height: 1.2; }

.widget-text .text-body { white-space: pre-wrap; font-size: .95rem; line-height: 1.6; }

.widget-image { display: flex; align-items: center; justify-content: center; padding: .75rem; }
.widget-image img { max-width: 100%; max-height: 100%; display: block; border-radius: 8px; }

.widget-clock { display: flex; flex-direction: column; justify-content: center; }
.widget-clock .clock-value {
    font-size: 2.2rem;
    font-weight: 600;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    color: var(--w-accent, var(--text));
}

/* --- Écran /screen/{token} : rotation de dashboards en plein écran --- */

.screen-body {
    background: var(--bg);
    color: var(--text);
    max-width: none;
    min-height: 100vh;
    width: 100%;
    margin: 0;
    padding: 2rem 2.5rem;
}
.screen-slide { display: none; }
.screen-slide.active { display: block; }
.screen-slide h1 { font-size: 1.6rem; margin: 0 0 1.25rem; }
.screen-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    color: var(--muted);
    font-size: 1.1rem;
    text-align: center;
}

/* Écran non (encore) apparié — voir ScreenPairingService/screen/unauthorized.blade.php. */
.screen-unauthorized {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    min-height: 100vh;
    text-align: center;
    padding: 2rem;
}
.screen-unauthorized .icon { font-size: 2.5rem; }
.screen-unauthorized h1 { font-size: 1.3rem; margin: 0; }
.screen-unauthorized p { color: var(--muted); max-width: 32rem; margin: 0; }

/* --- Barre de progression avant rafraîchissement --- */

.refresh-bar-track {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--border);
    z-index: 100;
}
.refresh-bar-fill {
    height: 100%;
    width: 100%;
    background: var(--accent);
}