/* Softic.Badge - habillage de l'interface (charte SOFTIC : bleu nuit, orange, Space Grotesk)
   Les composants DevExpress gardent le theme blazing-berry ; ce fichier habille la coque (rail, pages, mur des appareils). */

@font-face {
    font-family: "Space Grotesk";
    src: url("../fonts/SpaceGrotesk-Medium.woff2") format("woff2");
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: "Space Grotesk";
    src: url("../fonts/SpaceGrotesk-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-display: swap;
}

:root {
    --sb-nuit: #0A2540;
    --sb-nuit-2: #123456;
    --sb-orange: #FF7200;
    --sb-orange-soft: #FFF1E6;
    --sb-brume: #F3F5F8;
    --sb-encre: #1B2A3A;
    --sb-gris: #6B7A8C;
    --sb-trait: #D9DFE6;
    --sb-vert: #1E8E5A;
    --sb-rouge: #C8102E;
    --sb-ambre: #B86E00;
    --sb-blanc: #FFFFFF;
    --sb-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
    --sb-text: "Segoe UI", system-ui, -apple-system, sans-serif;
}

html, body { height: 100%; margin: 0; background: var(--sb-brume); color: var(--sb-encre); font-family: var(--sb-text); }
a { color: var(--sb-nuit); }
h1, h2, h3 { font-family: var(--sb-display); font-weight: 600; letter-spacing: -0.01em; color: var(--sb-nuit); margin: 0; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.15rem; margin: 1.6rem 0 0.7rem; }

/* ---- coque ---- */
.sb-shell { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
.sb-rail { background: var(--sb-nuit); color: #CFD8E3; display: flex; flex-direction: column; padding: 18px 14px; position: sticky; top: 0; height: 100vh; }
.sb-brand { display: flex; align-items: center; gap: 10px; color: var(--sb-blanc); text-decoration: none; font-family: var(--sb-display); font-weight: 600; font-size: 1.15rem; padding: 4px 6px 18px; border-bottom: 1px solid rgba(255,255,255,0.12); margin-bottom: 14px; }
.sb-brand img { width: 34px; height: 34px; border-radius: 8px; }
.sb-brand i { font-style: normal; color: var(--sb-orange); }
.sb-nav { display: flex; flex-direction: column; gap: 2px; }
.sb-nav a { color: #CFD8E3; text-decoration: none; padding: 9px 12px; border-radius: 6px; font-size: 0.95rem; }
.sb-nav a:hover { background: var(--sb-nuit-2); color: var(--sb-blanc); }
.sb-nav a.active { background: var(--sb-blanc); color: var(--sb-nuit); font-weight: 600; }
.sb-rail-foot { margin-top: auto; font-size: 0.85rem; display: flex; flex-direction: column; gap: 4px; padding: 10px 6px 0; border-top: 1px solid rgba(255,255,255,0.12); }
.sb-rail-foot a { color: var(--sb-orange); text-decoration: none; }
.sb-user { color: var(--sb-blanc); font-weight: 600; }
.sb-main { padding: 26px 32px 48px; min-width: 0; }
.sb-empty-layout { min-height: 100vh; }

/* ---- en-tete de page, actions, filtres ---- */
.sb-page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.sb-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sb-filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.sb-filters > * { min-width: 170px; }
.sb-row-actions { display: flex; gap: 6px; }
.sb-muted { color: var(--sb-gris); font-size: 0.9rem; }
.sb-empty { color: var(--sb-gris); padding: 18px 0; }
.sb-tab { padding: 16px 4px; display: flex; flex-direction: column; gap: 12px; }
.sb-kv { display: grid; grid-template-columns: 260px 1fr; gap: 6px 14px; margin: 0; font-size: 0.95rem; }
.sb-kv dt { color: var(--sb-gris); }
.sb-kv dd { margin: 0; }
.sb-detail summary { cursor: pointer; color: var(--sb-gris); }
.sb-detail pre { white-space: pre-wrap; font-size: 0.8rem; background: var(--sb-blanc); border: 1px solid var(--sb-trait); padding: 8px; max-height: 260px; overflow: auto; }
.sb-check-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 14px; }
.sb-check-list label { display: flex; gap: 8px; align-items: center; cursor: pointer; }
.sb-check-list small { color: var(--sb-gris); }
.sb-action-list { display: flex; flex-direction: column; gap: 8px; }
.sb-action-list .dxbl-btn { justify-content: flex-start; }

/* ---- messages ---- */
.sb-alert { padding: 10px 14px; border-radius: 6px; margin-bottom: 14px; border: 1px solid var(--sb-trait); background: var(--sb-blanc); }
.sb-alert.ok { border-color: var(--sb-vert); color: var(--sb-vert); }
.sb-alert.error { border-color: var(--sb-rouge); color: var(--sb-rouge); }

/* ---- compteurs ---- */
.sb-counters { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.sb-counter { background: var(--sb-blanc); border: 1px solid var(--sb-trait); border-left: 4px solid var(--sb-nuit); padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.sb-counter b { font-family: var(--sb-display); font-size: 1.7rem; font-weight: 600; color: var(--sb-nuit); line-height: 1; }
.sb-counter b small { font-size: 0.95rem; color: var(--sb-gris); font-weight: 500; }
.sb-counter span { color: var(--sb-gris); font-size: 0.85rem; }
.sb-counter.warn { border-left-color: var(--sb-orange); }
.sb-counter.warn b { color: var(--sb-orange); }

/* ---- mur des appareils : l'element memorable, un tableau d'etat lisible de loin ---- */
.sb-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.sb-tile { display: block; text-decoration: none; color: var(--sb-encre); background: var(--sb-blanc); border: 1px solid var(--sb-trait); border-top: 5px solid var(--sb-gris); padding: 12px 14px 10px; }
.sb-tile:hover { border-color: var(--sb-nuit); }
.sb-tile.st-online { border-top-color: var(--sb-vert); }
.sb-tile.st-offline { border-top-color: var(--sb-gris); }
.sb-tile.st-error { border-top-color: var(--sb-rouge); }
.sb-tile.st-unknown { border-top-color: var(--sb-trait); }
.sb-tile-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.sb-tile-head strong { font-family: var(--sb-display); font-size: 1.02rem; color: var(--sb-nuit); }
.sb-tile-head em { font-style: normal; font-size: 0.7rem; color: var(--sb-gris); border: 1px solid var(--sb-trait); padding: 1px 6px; border-radius: 3px; }
.sb-tile-status { font-size: 0.85rem; margin: 4px 0 6px; font-weight: 600; }
.st-online .sb-tile-status { color: var(--sb-vert); }
.st-error .sb-tile-status { color: var(--sb-rouge); }
.st-offline .sb-tile-status, .st-unknown .sb-tile-status { color: var(--sb-gris); }
.sb-tile-meta { display: flex; flex-direction: column; gap: 2px; font-size: 0.82rem; color: var(--sb-gris); }
.sb-tile-error { margin-top: 6px; font-size: 0.78rem; color: var(--sb-rouge); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- pastilles d'etat ---- */
.sb-pill { display: inline-block; font-size: 0.75rem; padding: 2px 8px; border-radius: 10px; border: 1px solid var(--sb-trait); background: var(--sb-brume); color: var(--sb-gris); margin-right: 4px; white-space: nowrap; }
.sb-pill.st-online, .sb-pill.fw-forwarded, .sb-pill.cs-done { border-color: var(--sb-vert); color: var(--sb-vert); background: #EAF6EF; }
.sb-pill.st-error, .sb-pill.fw-failed, .sb-pill.cs-failed { border-color: var(--sb-rouge); color: var(--sb-rouge); background: #FBEAEC; }
.sb-pill.cs-sent, .sb-pill.fw-pending, .sb-pill.cs-pending, .sb-pill.warn { border-color: var(--sb-orange); color: var(--sb-ambre); background: var(--sb-orange-soft); }
.sb-pill.new { border-color: var(--sb-orange); color: var(--sb-orange); background: var(--sb-orange-soft); }

/* ---- connexion ---- */
.sb-login { min-height: 100vh; display: grid; place-items: center; background: linear-gradient(160deg, var(--sb-nuit) 0 42%, var(--sb-brume) 42% 100%); padding: 24px; }
.sb-login-card { width: min(420px, 100%); background: var(--sb-blanc); border: 1px solid var(--sb-trait); padding: 30px 32px 26px; display: flex; flex-direction: column; gap: 14px; }
.sb-login-logo { width: 240px; margin-bottom: 4px; }
.sb-login form { display: flex; flex-direction: column; gap: 12px; }
.sb-login label { display: flex; flex-direction: column; gap: 4px; font-size: 0.9rem; color: var(--sb-gris); }
.sb-login input[type=text], .sb-login input[type=password] { font: inherit; color: var(--sb-encre); padding: 9px 10px; border: 1px solid var(--sb-trait); border-radius: 4px; }
.sb-login input:focus { outline: 2px solid var(--sb-orange); outline-offset: 1px; border-color: var(--sb-orange); }
.sb-check { flex-direction: row !important; align-items: center; }
.sb-btn-primary { font: inherit; font-weight: 600; background: var(--sb-orange); color: var(--sb-blanc); border: 0; padding: 10px 14px; border-radius: 4px; cursor: pointer; }
.sb-btn-primary:hover { background: #E66600; }
.sb-login-sso { margin: 0; font-size: 0.9rem; text-align: center; }

/* ---- accessibilite, mobile ---- */
:focus-visible { outline: 2px solid var(--sb-orange); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
@media (max-width: 900px) {
    .sb-shell { grid-template-columns: 1fr; }
    .sb-rail { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
    .sb-brand { border: 0; padding: 0 8px 0 0; margin: 0; }
    .sb-nav { flex-direction: row; flex-wrap: wrap; }
    .sb-rail-foot { margin: 0 0 0 auto; border: 0; padding: 0; flex-direction: row; gap: 10px; }
    .sb-main { padding: 16px; }
    .sb-kv { grid-template-columns: 1fr; }
}