/* OFCRA — thème de la refonte, partagé entre les pages migrées.
   Généré à partir de la maquette accueil/serveur, sans changement de fond. */

  :root{
    --bg: #14171a;
    --panel: #1b201d;
    --panel-raised: #202521;
    --line: #34392f;
    --line-soft: #262b25;
    --olive: #6b7a4f;
    --olive-bright: #97a86b;
    --ok: #4c8c5a;
    --ok-bg: #1c2a1e;
    --stop: #b84c3c;
    --stop-bg: #2a1c19;
    --warn: #c99a3e;
    --bf: #6a9bd8;
    --rf: #d67a6a;
    --gf: #7fb589;
    --text: #e7e4d8;
    --text-dim: #9a9d8d;
    --text-faint: #6b6f60;
    --mono: 'JetBrains Mono', monospace;
    --cond: 'Barlow Condensed', sans-serif;
  }
  *{ box-sizing: border-box; }
  html,body{ margin:0; padding:0; }
  body{
    background: var(--bg);
    color: var(--text);
    font-family: var(--mono);
    font-size: 14px;
    line-height: 1.5;
    background-image: radial-gradient(ellipse at top left, rgba(107,122,79,0.06), transparent 50%);
  }
  a{ color: var(--olive-bright); text-decoration: none; }
  a:hover{ text-decoration: underline; }

  /* ===== layout shell ===== */
  .shell{
    display: grid;
    grid-template-columns: 240px 1fr;
    grid-template-rows: auto 1fr;
    align-content: start;
    min-height: 100vh;
  }
  @media (max-width: 900px){
    .shell{ grid-template-columns: 1fr; }
    .sidebar{ display:none; }
    .sidebar.open{ display:block; }
  }

  /* ===== topbar ===== */
  .topbar{
    grid-column: 1 / -1;
    display:flex; align-items:center; justify-content: space-between;
    padding: 0 20px; height: 52px;
    background: #10130f;
    border-bottom: 1px solid var(--line);
  }
  .brand{
    display:flex; align-items:center; gap: 10px;
    font-family: var(--cond); font-weight: 700; font-size: 20px; letter-spacing: .3px;
    color: var(--text);
  }
  .brand .logo{
    height: 26px;
    width: auto;
    display: block;
  }
  .brand .sub{
    font-family: var(--mono); font-size: 11px; color: var(--text-dim); font-weight: 400;
    margin-left: 4px; padding-left: 10px; border-left: 1px solid var(--line);
  }
  .who{ display:flex; align-items:center; gap: 10px; font-size: 12.5px; color: var(--text-dim); }
  .who img{ width: 24px; height: 24px; border: 1px solid var(--line); object-fit: cover; }
  .who strong{ color: var(--text); font-weight: 600; }
  .who .logout{ color: var(--text-faint); font-size: 12px; }

  /* ===== sidebar / accordion ===== */
  .sidebar{ background: #10130f; border-right: 1px solid var(--line); padding: 10px 0 30px; }

  .navgroup{ border-bottom: 1px solid var(--line-soft); }
  .navgroup summary{
    list-style: none;
    display:flex; align-items:center; justify-content:space-between; gap: 8px;
    cursor: pointer;
    padding: 11px 18px;
    font-family: var(--cond);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .3px;
    color: var(--text-dim);
  }
  .navgroup summary::-webkit-details-marker{ display:none; }
  .navgroup summary:hover{ color: var(--text); background: var(--line-soft); }
  .navgroup summary .chev{
    font-family: var(--mono); font-size: 11px; color: var(--text-faint);
    transform: rotate(0deg); transition: transform .12s ease;
  }
  .navgroup[open] summary .chev{ transform: rotate(90deg); }
  .navgroup summary .live-count{
    margin-left: auto;
    font-family: var(--mono); font-size: 10.5px; color: var(--text-faint);
    display:flex; align-items:center; gap:5px;
  }

  .navgroup ul{ list-style:none; margin:0; padding: 2px 0 10px; }
  .navgroup li a{
    display:flex; align-items:center; gap: 8px;
    padding: 6px 18px 6px 26px;
    color: var(--text-dim);
    font-size: 13px;
    border-left: 2px solid transparent;
  }
  .navgroup li a:hover{ color: var(--text); background: var(--line-soft); text-decoration:none; }
  .navgroup li a.active{ color: var(--olive-bright); border-left-color: var(--olive); background: var(--line-soft); }

  .dot{ width: 7px; height: 7px; border-radius: 50%; background: var(--text-faint); flex: none; }
  .dot.up{ background: var(--ok); box-shadow: 0 0 6px rgba(76,140,90,.7); }
  .dot.down{ background: var(--stop); }

  /* ===== main ===== */
  main{ padding: 26px 32px 60px; max-width: 1640px; }
  .page-head{
    border-bottom: 1px solid var(--line);
    padding-bottom: 14px; margin-bottom: 22px;
  }
  .page-head h1{ font-family: var(--cond); font-weight: 700; font-size: 26px; margin: 0 0 4px; letter-spacing: .2px; }
  .page-head p{ margin: 0; color: var(--text-dim); font-size: 13px; }

  .panel{ background: var(--panel); border: 1px solid var(--line); }
  .panel > .panel-head{
    display:flex; align-items:center; justify-content:space-between;
    padding: 10px 14px; border-bottom: 1px solid var(--line);
    font-family: var(--cond); font-weight: 600; font-size: 15px; color: var(--text);
  }
  .panel > .panel-body{ padding: 14px; }

  /* espacement vertical entre tous les blocs directs de main (panels, cartes,
     split-cols...) — les marges se fondent entre elles (collapsing), donc pas
     de risque de double-espace avec les margin-bottom déjà en place ailleurs */
  main > * + *{ margin-top: 18px; }

  /* cartes serveurs */
  .server-cards{
    display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
    margin-bottom: 18px;
  }
  @media (max-width: 900px){ .server-cards{ grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 560px){ .server-cards{ grid-template-columns: 1fr; } }
  .server-card{
    background: var(--panel);
    border: 1px solid var(--line);
    padding: 12px 14px;
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease;
  }
  .server-card:hover{
    border-color: var(--olive);
    background: var(--panel-raised);
    text-decoration: none;
    color: inherit;
  }
  .server-card .row1{
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom: 8px;
  }
  .server-card .name{
    font-family: var(--cond); font-weight: 600; font-size: 15.5px;
    display:flex; align-items:center; gap: 7px;
  }
  .server-card .state{ font-size: 11px; color: var(--text-faint); }
  .server-card .state.up{ color: var(--ok); }
  .server-card .meta{
    display:flex; justify-content:space-between;
    font-size: 12px; color: var(--text-faint);
    border-top: 1px dashed var(--line); padding-top: 8px;
  }
  .server-card .meta b{ color: var(--text-dim); font-weight: 500; }
  .server-card .players{ color: var(--olive-bright); }

  /* services (TS3/OCAP) */
  .services-row{
    display:flex; flex-wrap: wrap; gap: 10px;
    margin-bottom: 26px;
  }
  .chip{
    display:flex; align-items:center; gap: 7px;
    font-size: 12px;
    padding: 6px 12px;
    border: 1px solid var(--line);
    background: var(--panel);
    color: var(--text-dim);
  }
  .chip .dot{ margin-right: 1px; }

  /* Teamspeak */
  .ts-frame{
    background: var(--panel-raised);
    border: 1px solid var(--line-soft);
    padding: 14px;
    max-height: 420px;
    overflow-y: auto;
  }
  .ts-frame::-webkit-scrollbar{ width: 8px; }
  .ts-frame::-webkit-scrollbar-thumb{ background: var(--line); }

  /* bloc machine */
  .host-panel{ margin-bottom: 22px; }
  .host-panel .panel-head .host-refresh{
    font-family: var(--mono); font-size: 11px; color: var(--text-faint); font-weight: 400;
  }
  .metrics-row{
    display:grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
    margin-bottom: 16px;
  }
  @media (max-width: 900px){ .metrics-row{ grid-template-columns: 1fr 1fr; } }
  .metric-tile{
    border: 1px solid var(--line-soft);
    padding: 10px 12px;
  }
  .metric-tile .m-label{
    font-family: var(--cond); font-size: 12.5px; font-weight: 600;
    color: var(--text-faint); letter-spacing: .2px;
    margin-bottom: 6px;
  }
  .metric-tile .m-value{
    font-family: var(--mono); font-size: 22px; font-weight: 600;
    color: var(--text);
    margin-bottom: 8px;
  }
  .metric-tile .m-value .m-unit{ font-size: 13px; color: var(--text-faint); font-weight: 400; }
  .metric-bar{
    height: 5px; background: var(--line-soft); position: relative; overflow: hidden;
  }
  .metric-bar > span{ display:block; height: 100%; background: var(--olive); }
  .metric-bar.warn > span{ background: var(--warn); }
  .metric-bar.crit > span{ background: var(--stop); }
  .metric-tile .m-sub{
    font-size: 11px; color: var(--text-faint); margin-top: 6px;
  }
  .metric-tile.net .m-value{ font-size: 16px; }
  .net-line{ display:flex; justify-content:space-between; font-family: var(--mono); font-size: 13px; }
  .net-line .down{ color: var(--ok); }
  .net-line .up{ color: var(--olive-bright); }

  .sparkline-wrap{
    border-top: 1px dashed var(--line);
    padding-top: 12px;
  }
  .sparkline-wrap .sp-head{
    display:flex; justify-content:space-between; align-items:baseline;
    font-size: 11px; color: var(--text-faint); margin-bottom: 6px;
  }
  .sparkline-wrap svg{ display:block; width:100%; height:56px; }

  .host-tag{
    font-size: 10.5px; color: var(--text-faint);
    margin-top: 6px;
  }
  .host-tag a{ color: var(--text-faint); text-decoration: underline; }

  /* deux/trois colonnes */
  .split-cols{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px; }
  .split-cols.three{ grid-template-columns: repeat(3, 1fr); }
  @media (max-width: 1200px){ .split-cols.three{ grid-template-columns: 1fr 1fr; } }
  @media (max-width: 900px){ .split-cols, .split-cols.three{ grid-template-columns: 1fr; } }

  .next-mission{
    border: 1px solid var(--olive);
    background: rgba(107,122,79,.08);
    padding: 10px 12px;
    margin-bottom: 14px;
  }
  .next-mission-tag{
    font-size: 11px; color: var(--olive-bright);
    margin-bottom: 4px;
  }
  .next-mission-name{
    font-family: var(--cond); font-weight: 600; font-size: 17px;
    margin-bottom: 3px;
  }
  .next-mission-name a{ color: var(--text); }
  .next-mission-meta{ font-size: 11.5px; color: var(--text-dim); }

  .mod-subhead{
    font-family: var(--cond); font-size: 12.5px; font-weight: 600; color: var(--text-faint);
    padding: 6px 8px 4px; letter-spacing: .2px;
  }

  table.data{ width: 100%; border-collapse: collapse; font-size: 12.5px; }
  table.data th{
    text-align: left; font-family: var(--cond); font-weight: 600; font-size: 13px;
    color: var(--text-dim); border-bottom: 1px solid var(--line); padding: 7px 8px;
  }
  table.data td{ padding: 7px 8px; border-bottom: 1px solid var(--line-soft); color: var(--text-dim); }
  table.data tr:hover td{ background: var(--line-soft); color: var(--text); }
  table.data td.name{ color: var(--text); }
  table.data td.num{ color: var(--text-faint); white-space: nowrap; font-size: 11.5px; }

  /* teamspeak */
  .ts-readout{
    display:flex; align-items:center; justify-content:space-between;
    font-size: 12px; color: var(--text-dim);
    padding-bottom: 10px; margin-bottom: 10px;
    border-bottom: 1px dashed var(--line);
  }
  .ts-readout .who-count{ color: var(--olive-bright); }
  .channel-tree{ max-height: 380px; overflow-y: auto; font-size: 12.5px; }
  .channel-tree::-webkit-scrollbar{ width: 8px; }
  .channel-tree::-webkit-scrollbar-thumb{ background: var(--line); }
  .channel{
    display:flex; align-items:center; gap: 7px;
    padding: 5px 4px;
    color: var(--text-dim);
    border-bottom: 1px solid var(--line-soft);
  }
  .channel .sq{
    width: 6px; height: 6px; flex: none;
    border: 1px solid var(--olive);
  }
  .channel.d1{ padding-left: 22px; }
  .channel.d2{ padding-left: 40px; color: var(--text-faint); font-size: 12px; }
  .channel .n{ color: var(--text-faint); font-size: 11px; margin-left: auto; }
  .ts-link{
    display:block; text-align:center; margin-top: 12px;
    font-size: 11.5px; color: var(--text-faint);
  }

  footer{ max-width: 1640px; padding: 0 32px 40px; color: var(--text-faint); font-size: 11.5px; }

/* Compat avec les endpoints existants (getServerStatus.php renvoie ces classes
   telles quelles, sans rien changer côté PHP) */
.running{ color: var(--ok); font-weight: 600; }
.not_running{ color: var(--stop); font-weight: 600; }

/* Toggle menu mobile (remplace le comportement Bootstrap collapse de l'ancien design) */
.navbar-toggler{
  background: none; border: 1px solid var(--line); color: var(--text);
  font-family: var(--mono); font-size: 12px; padding: 5px 10px; cursor: pointer;
  display: none;
}
@media (max-width: 900px){
  .navbar-toggler{ display: inline-block; }
}

/* ===== server2.php — actions, terminal, upload, tableaux injectés ===== */

.status-pill{
  display:inline-flex; align-items:center; gap:7px;
  font-family: var(--mono); font-size: 12px;
  padding: 4px 10px; border: 1px solid var(--line);
}
.status-pill.down{ color: var(--stop); border-color: rgba(184,76,60,.4); background: var(--stop-bg); }
.status-pill.up{ color: var(--ok); border-color: rgba(76,140,90,.4); background: var(--ok-bg); }

.btn{
  font-family: var(--cond); font-weight: 600; font-size: 15px; letter-spacing: .3px;
  padding: 9px 16px;
  border: 1px solid var(--line);
  background: var(--panel-raised);
  color: var(--text);
  cursor: pointer;
  display:flex; align-items:center; gap:8px;
}
.btn:hover{ border-color: var(--olive); color: var(--olive-bright); }
.btn.start:hover{ border-color: var(--ok); color: var(--ok); }
.btn .k{
  font-family: var(--mono); font-size: 10px; color: var(--text-faint);
  border: 1px solid var(--line); padding: 1px 5px;
}
.btn svg{ flex: none; }
.btn.stop:hover{ border-color: var(--stop); color: var(--stop); }
.actions-row{
  display:flex; align-items:stretch; gap: 10px; flex-wrap: wrap;
}
.actions-row .readout{
  margin-left: auto; align-self: center;
  font-size: 12px; color: var(--text-faint); text-align: right;
}
#msg{
  margin-top: 10px; font-size: 11.5px; color: var(--text-dim);
  white-space: pre-wrap; word-break: break-word;
}

.terminal{
  background: #0e100d;
  height: 320px;
  overflow: auto;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}
.terminal::-webkit-scrollbar{ width: 8px; }
.terminal::-webkit-scrollbar-thumb{ background: var(--line); }

.upload-box{
  display:flex; align-items:stretch; gap: 10px;
  margin-bottom: 14px;
}
.upload-drop{
  flex: 1;
  display:flex; align-items:center; gap: 8px;
  border: 1px dashed var(--line);
  padding: 10px 12px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text-faint);
  min-width: 0;
}
.upload-drop:hover{ border-color: var(--olive); background: var(--line-soft); color: var(--text-dim); }
.upload-icon{ font-family: var(--mono); color: var(--olive-bright); flex: none; }
.upload-text{ white-space: nowrap; }
.upload-browse{ color: var(--olive-bright); text-decoration: underline; }
.upload-filename{
  font-family: var(--mono); color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  border-left: 1px solid var(--line); padding-left: 8px; margin-left: 2px;
}
.upload-btn{ flex: none; padding: 9px 16px; }
.upload-btn:disabled{ opacity: .4; cursor: not-allowed; }
.upload-btn:disabled:hover{ border-color: var(--line); color: var(--text); }

.modlist-scroll{ max-height: 300px; overflow-y: auto; border: 1px solid var(--line-soft); }
.modlist-scroll::-webkit-scrollbar{ width: 8px; }
.modlist-scroll::-webkit-scrollbar-thumb{ background: var(--line); }

/* Habillage générique des tables/checkbox brutes renvoyées telles quelles par
   les anciens endpoints AJAX (missions-list.php, stats-list.php, getModset.php,
   getPlayerNumbers.php, get_mods_server()) — on stylise par conteneur plutôt que
   de dépendre de leurs classes Bootstrap, pour ne rien avoir à changer côté PHP. */
.raw-table-host table{
  width: 100%; border-collapse: collapse; font-size: 12.5px;
  background: transparent;
}
.raw-table-host th{
  text-align: left; font-family: var(--cond); font-weight: 600; font-size: 13px;
  color: var(--text-dim); border-bottom: 1px solid var(--line); padding: 7px 8px;
}
.raw-table-host td{
  padding: 7px 8px; border-bottom: 1px solid var(--line-soft); color: var(--text-dim);
}
.raw-table-host tr:hover td{ background: var(--line-soft); color: var(--text); }
.raw-table-host a{ color: var(--text); }
.raw-table-host a:hover{ color: var(--olive-bright); }
.raw-table-host input[type=checkbox]{ accent-color: var(--olive); }
.raw-table-host label{ color: var(--text-dim); cursor: pointer; }
.raw-table-host tr.checked td, .raw-table-host tr.checked{ background: rgba(107,122,79,.1); }
.raw-table-host td.delete{ cursor: pointer; }
.raw-table-host img{ width: 32px; height: 32px; border: 1px solid var(--line); display: block; }
.raw-table-host button{
  font-family: var(--mono); font-size: 11px; color: var(--text-dim);
  background: none; border: 1px solid var(--line); padding: 3px 7px; cursor: pointer;
}
.raw-table-host button:hover{ border-color: var(--olive); color: var(--olive-bright); }
.raw-table-host .btn-danger, .raw-table-host .deleteModBtn{
  font-family: var(--mono); font-size: 11px; color: var(--stop);
  background: none; border: 1px solid rgba(184,76,60,.4); padding: 3px 7px; cursor: pointer;
}
.raw-table-host .btn-danger:hover, .raw-table-host .deleteModBtn:hover{ background: var(--stop-bg); }
.raw-table-host .label{
  font-family: var(--mono); font-size: 10px; color: var(--olive-bright);
}
.raw-table-host p{ font-size: 11.5px; color: var(--text-faint); margin: 0 0 8px; }
.raw-table-host .panel.panel-primary{
  border: 1px solid var(--stop); background: var(--stop-bg); padding: 10px 12px; color: var(--stop);
}
.raw-table-host .panel-heading{ font-family: var(--cond); font-weight: 600; margin-bottom: 4px; }

/* ===== stats_importer2.php — champs de formulaire + panneau d'édition ===== */
.field{
  background: var(--panel-raised); border: 1px solid var(--line); color: var(--text);
  font-family: var(--mono); font-size: 12.5px; padding: 7px 8px; width: 100%;
}
.field:focus{ outline: none; border-color: var(--olive); }
textarea.field{ min-height: 160px; resize: vertical; }

.table-pagination{
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-top: 1px solid var(--line);
}
.field-label{
  font-family: var(--cond); font-size: 11.5px; font-weight: 600;
  color: var(--text-faint); letter-spacing: .2px; margin: 10px 0 4px;
}
.icon-btn{
  background: none; border: 1px solid var(--line); color: var(--text-dim);
  padding: 4px 7px; cursor: pointer; display: inline-flex; align-items: center;
}
.icon-btn:hover{ border-color: var(--olive); color: var(--olive-bright); }
.icon-ok{ color: var(--ok); display: inline-flex; align-items: center; }
.btn-delete-stats{
  font-family: var(--mono); font-size: 11px; color: var(--stop);
  background: none; border: 1px solid rgba(184,76,60,.4); padding: 3px 7px; cursor: pointer;
}
.btn-delete-stats:hover{ background: var(--stop-bg); }
.btn-delete-stats:disabled{ opacity: .5; cursor: not-allowed; }

/* ===== logs2.php — filtre en pills ===== */
.radio-pills{ display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 16px; }
.radio-pill{
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--text-dim);
  border: 1px solid var(--line); padding: 6px 10px;
  cursor: pointer;
}
.radio-pill input{ accent-color: var(--olive); }
.radio-pill.checked{ border-color: var(--olive); color: var(--text); background: var(--line-soft); }
.radio-pill .num{ color: var(--text-faint); }

.log-search-wrap{ display: flex; align-items: center; gap: 8px; }
.log-search-wrap .field{ width: 220px; padding: 5px 8px; font-size: 12px; }
.log-search-wrap .num{ font-size: 11px; white-space: nowrap; }
.terminal{ position: relative; } /* pour que .position() se calcule par rapport au terminal, pas au body */
.terminal.terminal-tall{ height: 600px; }
.terminal mark{
  background: var(--warn); color: #14171a; padding: 0 1px;
}
.terminal mark.current{ background: var(--olive-bright); }
.terminal .log-line-match{
  display: inline-block; width: 100%;
  background: rgba(201,154,62,.08);
}

table.data tr.imported{ background: rgba(76,140,90,.06); }
table.data tr.imported:hover td{ background: rgba(76,140,90,.12); }
table.data tr.imported td:first-child{ border-left: 2px solid var(--ok); }
table.data tr:not(.imported) td:first-child{ border-left: 2px solid transparent; }

.edit-panel{
  background: var(--panel-raised);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 16px;
}
.edit-panel .close-edit{
  float: right; background: none; border: 1px solid var(--line); color: var(--text-faint);
  font-family: var(--mono); font-size: 11px; padding: 3px 8px; cursor: pointer;
}
.edit-panel .close-edit:hover{ border-color: var(--stop); color: var(--stop); }
.edit-title{ font-family: var(--cond); font-weight: 600; font-size: 16px; margin-bottom: 10px; }
.edit-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 14px 0; }
@media (max-width: 900px){ .edit-grid{ grid-template-columns: 1fr; } }
.edit-side{ border: 1px solid var(--line-soft); padding: 10px 12px; }
.edit-side-head{ font-family: var(--cond); font-weight: 600; font-size: 13px; color: var(--text-dim); margin-bottom: 6px; }
.edit-actions{ display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.edit-status{ font-size: 11.5px; color: var(--text-faint); }

.leader-picker{ position: relative; }
.leader-picker-bf .leader-search{ border-left: 3px solid var(--bf); }
.leader-picker-rf .leader-search{ border-left: 3px solid var(--rf); }
.leader-picker-gf .leader-search{ border-left: 3px solid var(--gf); }
.leader-list{
  display: none; position: absolute; z-index: 20; top: 100%; left: 0; right: 0;
  background: var(--panel); border: 1px solid var(--line);
  max-height: 220px; overflow-y: auto; margin-top: 2px;
}
.leader-list::-webkit-scrollbar{ width: 8px; }
.leader-list::-webkit-scrollbar-thumb{ background: var(--line); }
.leader-item{
  padding: 6px 10px 6px 8px; font-size: 12.5px; cursor: pointer; color: var(--text-dim);
  display: flex; align-items: center; gap: 8px;
  border-left: 3px solid transparent;
}
.leader-item:hover{ background: var(--line-soft); }
.leader-item::before{
  content: ''; width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--line-soft);
}
.leader-item.leader-bf{ border-left-color: var(--bf); color: var(--bf); }
.leader-item.leader-bf::before{ background: var(--bf); }
.leader-item.leader-rf{ border-left-color: var(--rf); color: var(--rf); }
.leader-item.leader-rf::before{ background: var(--rf); }
.leader-item.leader-gf{ border-left-color: var(--gf); color: var(--gf); }
.leader-item.leader-gf::before{ background: var(--gf); }
.leader-item.leader-bf:hover, .leader-item.leader-rf:hover, .leader-item.leader-gf:hover{ color: var(--text); }
.leader-item.leader-clear{ color: var(--text-faint); font-style: italic; }
.leader-item.leader-clear::before{ display: none; }
.leader-empty{ padding: 8px 10px; font-size: 12px; color: var(--text-faint); }