/* ==========================================================
   Thème MagIRC "discutbiz" — aligné sur la charte discut.biz
   Variables reprises de style.css (site principal)
   ========================================================== */
:root {
  --blue:   #2563eb;
  --blue-d: #1d4ed8;
  --blue-l: #eff6ff;
  --blue-b: #dbeafe;
  --text:   #0f172a;
  --muted:  #64748b;
  --border: #e2e8f0;
  --bg:     #f8fafc;
  --white:  #ffffff;
  --navy:   #0f172a;
  --green:  #22c55e;
  --r:      8px;
  --rl:     12px;
  --sh:     0 4px 24px rgba(0,0,0,.08);
}

html { background: var(--bg); overflow-x: hidden; }
body {
  margin: 0; padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 14px;
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, td, th { border: 0; }
h1, h2, h3, h4, h5, h6 { color: var(--text); }

/* ── HEADER / NAVBAR ── */
div#header {
  width: 100%;
  background: rgba(255,255,255,.97);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 200;
  box-sizing: border-box;
}
div#header-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
  height: 68px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
img#logo { padding: 0; margin-right: 24px; height: 34px; width: auto; float: none; }

div#menu { float: none; margin: 0 auto 0 0; padding: 0; }
div#menu ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
div#menu li { display: inline; margin: 0; padding: 0; }
div#menu a {
    float: none;
    height: auto;
    width: auto;
    padding: 8px 14px;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: var(--text);
    font-size: 14px;
    font-weight: 500;
    text-shadow: none;
    border-radius: var(--r);
    transition: background .15s, color .15s;
}
div#menu a:hover { background: var(--bg); color: var(--blue); }
div#menu a.active { background: var(--blue-l); color: var(--blue); font-weight: 600; }
div#menu a i { font-size: 13px; opacity: .85; }

div#main {
    width: 960px;
    max-width: 100%;
    margin: 24px auto;
    padding: 24px 32px;
    background-color: var(--white);
    border: 1.5px solid var(--border);
    border-radius: var(--rl);
    min-height: 500px;
    box-sizing: border-box;
    box-shadow: var(--sh);
    overflow-x: auto;
}

div.ui-tabs-panel a, div.ui-tabs-panel a:visited { color: var(--blue); }
div.ui-tabs-panel a:hover, div.ui-tabs-panel a:active { color: var(--blue-d); text-decoration: none; }
div.ui-tabs { padding: 0; }
div.ui-tabs .ui-corner-all { border-radius: var(--r) var(--r) 0 0; }

/* ── FOOTER ── */
div#footer {
    width: 100%;
    background: var(--navy);
    box-sizing: border-box;
    margin-top: 40px;
}
div#footer-inner {
    max-width: 960px;
    margin: 0 auto;
    padding: 16px 20px;
    box-sizing: border-box;
    font-size: 12px;
    color: rgba(255,255,255,.55);
}
div#footer a, div#footer a:visited { color: #60a5fa; font-size: 12px; font-weight: 600; text-decoration: none; }
div#footer a:hover, div#footer a:active { color: #fff; text-decoration: underline; }
div#footer table { width: 100%; }
div#footer table tr td { width: 33%; }

div#errorbox {
    text-align: center;
    width: 500px;
    margin: 0 auto;
    padding-top: 200px;
}
div#loading { display: none; }
div.halfleft { width: 49%; float: left; }
div.halfright { width: 49%; float: right; }
div.choser { text-align: right; margin-bottom: 10px; }
div.motd {
    border: 1.5px solid var(--border);
    border-radius: var(--r);
    margin: 15px 0 0 0;
    padding: 10px 14px;
    height: 300px;
    overflow: scroll;
    background: var(--bg);
}
div.motd pre { font-family: ui-monospace, "Courier New", Courier, monospace; }
div.topic {
    border: 1.5px dashed var(--border);
    border-radius: var(--r);
    padding: 12px 14px;
    font-family: ui-monospace, "Courier New", Courier, monospace;
    background: var(--bg);
}
span.val { color: var(--blue); font-weight: 600; }
div.clear { clear: both; }
table.details { max-width: 100%; border-spacing: 0; }

/* ── Formulaire de connexion webchat embarqué (identique au site principal) ── */
div.fcard {
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: var(--rl);
    padding: 20px;
    margin: 12px 0 10px;
}
div.fcard-head {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}
div.fcard-head h3 { font-size: .95rem; font-weight: 700; color: var(--text); margin: 0; }
div.ff { margin-bottom: 13px; }
div.ff label { display: block; font-size: 11.5px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
div.fi-row { display: flex; gap: 8px; }
div.fi-row .ff { flex: 1; margin-bottom: 13px; }
input.fi, select.fi {
    width: 100%;
    padding: 10px 13px;
    border-radius: var(--r);
    border: 1.5px solid var(--border);
    background: var(--bg);
    font-size: 14px;
    font-family: inherit;
    color: var(--text);
    outline: none;
    box-sizing: border-box;
    transition: all .18s;
}
input.fi:focus { border-color: var(--blue); background: #fff; box-shadow: 0 0 0 3px rgba(37,99,235,.08); }
div.ff label[for="mchat-kiwiirc"] { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 400; color: var(--muted); }
div.ff label[for="mchat-kiwiirc"] input { flex-shrink: 0; }

button.submit-btn {
    width: 100%;
    padding: 12px;
    border-radius: var(--r);
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    background: var(--blue);
    border: none;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background .15s;
    box-shadow: 0 2px 8px rgba(37,99,235,.3);
}
button.submit-btn:hover { background: var(--blue-d); }

div.join-alt { font-size: 12.5px; color: var(--muted); }
div.join-alt a, div.join-alt a:visited { color: var(--muted); text-decoration: underline; }
div.join-alt a:hover { color: var(--blue); }

table.details th { text-align: left; vertical-align: top; color: var(--muted); font-weight: 600; font-size: 12.5px; }
table.details h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); font-weight: 700; margin-bottom: 8px; }

/* ── Bloc stats "Serveurs / Canaux / Utilisateurs / Opérateurs" ──
   Divs simples groupées dans l'ordre naturel du DOM : aucune dépendance
   à display:contents / order (peu fiable sur table/tr selon navigateurs). */
div.stats-quad {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin: 15px 0;
}
div.sq-block {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 12px 14px;
}
div.sq-head {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-weight: 700;
    color: var(--muted);
    margin-bottom: 8px;
}
div.sq-row { font-size: 13px; margin-bottom: 4px; }
div.sq-row.sq-end { margin-bottom: 0; }
span.sq-lbl { color: var(--muted); font-weight: 600; margin-right: 4px; }

/* Titre de section (h1, h3 hors table) */
#welcome h1 { font-size: 1.3rem; font-weight: 800; margin-bottom: 18px; }

/* ── Tableaux DataTables "Top 10" en mini-cards ── */
table.display, table.dataTable {
    border: 1.5px solid var(--border);
    border-radius: var(--rl);
    overflow: hidden;
    background: var(--white);
}
table.dataTable thead th {
    background: var(--bg);
    text-transform: uppercase;
    letter-spacing: .4px;
    font-size: 11px !important;
}
table.dataTable tbody tr { transition: background .15s; }
table.dataTable tbody tr.odd { background: var(--white); }
table.dataTable tbody tr.even { background: var(--bg); }
table.clickable tbody tr.even:hover td,
table.clickable tbody tr.odd:hover td {
    background-color: var(--blue-l) !important;
}

/* jQuery-UI overrides */
.ui-widget {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif !important;
    font-size: 14px !important;
}
.ui-widget .ui-widget {
    font-size: 14px !important;
}
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif !important;
    font-size: 14px !important;
}
.ui-widget-header {
    background: var(--blue-l) !important;
    border: 1px solid var(--blue-b) !important;
    color: var(--blue) !important;
}
.ui-widget-content {
    border: 1.5px solid var(--border) !important;
    background: var(--white) !important;
    color: var(--text) !important;
}
.ui-widget-content a {
    color: var(--text) !important;
}
.ui-state-default, .ui-widget-content .ui-state-default {
    background: var(--bg) !important;
    border: 1px solid var(--border) !important;
    color: var(--muted) !important;
}
.ui-state-active, .ui-widget-content .ui-state-active,
.ui-state-hover, .ui-widget-content .ui-state-hover {
    background: var(--blue-l) !important;
    border: 1px solid var(--blue-b) !important;
    color: var(--blue) !important;
}
ul.ui-menu.ui-widget-content {
    border: 1.5px solid var(--border) !important;
    background: var(--white) !important;
    color: var(--text) !important;
    border-radius: var(--r) !important;
    box-shadow: var(--sh) !important;
}
ul.ui-menu.ui-widget-content a {
    color: var(--text) !important;
    text-decoration: none !important;
    border: 0 !important;
    padding: 0 !important;
}
ul.ui-menu .ui-menu-item {
    padding: 6px 1em 6px 0.4em;
}

/* DataTables overrides */
table.dataTable {
    border-collapse: collapse !important;
}
table.dataTable thead th {
    color: var(--muted) !important;
    font-weight: 600 !important;
    border-bottom: 1.5px solid var(--border) !important;
}
table.dataTable tbody th,
table.dataTable tbody td {
    padding: 8px 10px !important;
    border-bottom: 1px solid var(--border) !important;
}
.dataTables_wrapper .ui-toolbar {
    padding: 8px 0 !important;
    background: none !important;
    border: 0 !important;
}
table.dataTable tbody tr img { vertical-align: middle; }
table.clickable tbody tr { cursor: pointer; }

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width: 720px) {
    div#header-inner {
        height: auto;
        min-height: 56px;
        padding: 8px 12px;
        flex-wrap: wrap;
        justify-content: center;
    }
    img#logo { height: 26px; margin: 4px 0; }
    div#menu { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    div#menu ul { justify-content: center; }
    div#menu a { padding: 7px 10px; font-size: 12.5px; white-space: nowrap; }
    div#menu a i { font-size: 12px; }

    div#main { margin: 12px auto; padding: 16px; border-radius: var(--r); }

    /* Colonnes flottantes 49% (page canal, page serveur) : empilées en pleine largeur */
    div.halfleft, div.halfright {
        width: 100% !important;
        float: none !important;
        margin-bottom: 20px;
    }
    div.clear { display: none; }

    /* Pub AdSense 728px codée en dur dans layout.twig */
    div#main > div[style*="728px"] { width: 100% !important; overflow: hidden; }

    div#footer-inner { padding: 14px 16px; }
    div#footer table,
    div#footer table tr,
    div#footer table tr td {
        display: block;
        width: 100% !important;
        text-align: center !important;
    }
    div#footer table tr td { padding: 8px 0; }

    /* Graphiques Highcharts à largeur fixe → pleine largeur, empilés avec de l'air */
    #chart_line, #chart_status,
    #chart-clients, #chart-countries, #chart-history, #chart_activity {
        width: 100% !important;
        min-width: 0 !important;
        height: 220px !important;
    }
    table:has(#chart_line) tr,
    table:has(#chart_status) tr { display: flex; flex-direction: column; }
    table:has(#chart_line) td,
    table:has(#chart_status) td {
        display: block;
        width: 100% !important;
        padding: 0 0 24px 0 !important;
    }
    /* Highcharts : évite le chevauchement des labels de l'axe X en rotation */
    .highcharts-xaxis-labels text { font-size: 10px !important; }

    /* ── Tableau .details GÉNÉRIQUE (canal/serveur/utilisateur : Actuel/Pic/Modes en 1 seule colonne) ── */
    table.details:not(.top10-grid) tr,
    table.details:not(.top10-grid) th,
    table.details:not(.top10-grid) td {
        display: block;
        width: 100% !important;
    }
    table.details:not(.top10-grid) tr {
        border-bottom: 1px solid var(--border);
        padding-bottom: 8px;
        margin-bottom: 8px;
    }
    table.details:not(.top10-grid) tr:last-child { border-bottom: 0; }

    /* ── Bloc stats "Serveurs/Canaux/Utilisateurs/Opérateurs" : 1 colonne sur mobile ── */
    div.stats-quad { grid-template-columns: 1fr; gap: 10px; }

    /* ── Tableau "Top 10" (3 mini-tables côte à côte) : empilées avec marge entre chaque ── */
    table.top10-grid tr { display: flex; flex-direction: column; }
    table.top10-grid td, table.top10-grid th {
        display: block;
        width: 100% !important;
        padding: 0 0 20px 0 !important;
    }
    table.dataTable { width: 100% !important; }

    /* Onglets jQuery-UI (Statut/Pays/Clients/...) : scroll horizontal au lieu de déborder */
    div.ui-tabs { overflow: hidden; }
    ul.ui-tabs-nav {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
    ul.ui-tabs-nav li { flex: 0 0 auto; float: none; }

    /* Formulaire de connexion : âge/sexe/ville empilés au lieu de côte à côte */
    div.fi-row { flex-direction: column; gap: 0; }
    div.fi-row .ff { flex: none; }
}

@media (max-width: 480px) {
    body { font-size: 13px; }
    div#menu a span { display: none; }
    div#menu a { padding: 9px 12px; }
    div#menu a i { font-size: 15px; }
}