/**
 * ============================================================================
 * Projet      : Portail de Support & Ticketing
 * Fichier     : /templates/css/variante.css
 *
 * Auteur      : Nathan MIDOUX
 * Version     : 1.0.0
 *
 * Technologies:
 * - PHP 8.x
 * - MySQL
 * - Bootstrap
 * - JavaScript
 *
 * Encodage    : UTF-8 sans BOM
 *
 *
 * Copyright (c) 2025 et +, Nathan MIDOUX.
 * Tous droits réservés.
 * ============================================================================
**/
/* page orphans.php */
  th.chk-col, td.chk-col { width: 36px; text-align: center; }
  .table tr.table-active > * {
    background-color: rgba(var(--bs-primary-rgb,13,110,253),.12) !important;
  }
  .table tr.table-active td:first-child {
    box-shadow: inset 3px 0 0 var(--bs-primary);
  }
  
/* page maintenance_admin.php */
.accordion-item,
.accordion-body,
.accordion-body .card,
.accordion-body .card-body,
.accordion-body .card-body > .d-flex,
.accordion-body .card-body > .d-flex > div,
.accordion-body .card-body .border.rounded {
	min-width: 0 !important;
	max-width: 100%;
}

.code-snippet {
	max-width: 100%;
	max-height: 320px;
	overflow: auto;
	font-size: 0.82rem;
	line-height: 1.45;
}

.code-snippet pre,
.code-snippet code,
.code-snippet pre code {
	max-width: 100% !important;
	white-space: pre-wrap !important;   
	overflow-wrap: anywhere !important;
	word-break: break-word !important;
	margin: 0;
}
.code-snippet pre {
	display: block;
	width: 100%;
}

.accordion-body code { overflow-wrap: anywhere; word-break: break-word; }

.code-snippet table { width: 100% !important; table-layout: fixed; }
.code-snippet img   { max-width: 100%; height: auto; }

#newEntryToggle .chevron-icon { transition: transform 0.2s ease; }
#newEntryToggle[aria-expanded="true"] .chevron-icon { transform: rotate(180deg); }

/* page infra_tools.php */
.ping-dot{display:inline-block;width:9px;height:9px;border-radius:50%;flex-shrink:0;transition:background .4s}
.ping-dot.responded{background:#27ae60}
.ping-dot.timeout{background:#e74c3c;animation:blink .9s infinite}
.ping-dot.unknown{background:#adb5bd}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
.agent-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:7px 14px;margin-bottom:.75rem;background:var(--card-bg);border:1px solid var(--card-border);border-radius:.5rem;font-size:.78rem;color:var(--card-text-muted)}
#agentWarning{display:none;align-items:center;gap:8px;padding:8px 14px;border-radius:.5rem;margin-bottom:.75rem;background:#fff3cd;border:1px solid #ffc107;color:#664d03;font-size:.82rem;font-weight:600}
html.dark-mode #agentWarning{background:#2d2200;border-color:#a07800;color:#ffd966}
#agentWarning.show{display:flex}
.supervision-bar{display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding:7px 12px;margin-bottom:.75rem;background:var(--card-bg);border:1px solid var(--card-border);border-radius:.5rem}
.supervision-label{font-size:.72rem;font-weight:700;color:var(--card-text-muted);text-transform:uppercase;letter-spacing:.05em;margin-right:4px}
.btn-superv{display:inline-flex;align-items:center;padding:3px 9px;border-radius:4px;font-size:.76rem;font-weight:600;text-decoration:none;transition:opacity .15s;white-space:nowrap}
.btn-superv:hover{opacity:.82;text-decoration:none}
.sp-primary{background:var(--btn-primary-bg);color:var(--btn-primary-text);border:1px solid var(--btn-primary-border)}
.sp-warning{background:var(--btn-warning-bg);color:var(--btn-warning-text);border:1px solid var(--btn-warning-border)}
.sp-success{background:var(--btn-success-bg);color:var(--btn-success-text);border:1px solid var(--btn-success-border)}
.sp-danger{background:var(--btn-danger-bg);color:var(--btn-danger-text);border:1px solid var(--btn-danger-border)}
.sp-info{background:var(--soft-info-bg);color:var(--soft-info-color);border:1px solid var(--soft-info-border)}
.infra-section-header{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;margin-bottom:6px;background:var(--card-bg);border:1px solid var(--card-border);border-radius:.5rem;cursor:pointer;user-select:none}
.infra-section-header:hover{background:var(--table-hover-bg)}
.infra-section-title{font-size:.82rem;font-weight:600;color:var(--card-text);display:flex;align-items:center;gap:8px}
.infra-section-chevron{font-size:.7rem;color:var(--card-text-muted);transition:transform .2s}
.infra-section-chevron.open{transform:rotate(180deg)}
.infra-section-body{border:1px solid var(--card-border);border-radius:.5rem;overflow:hidden;margin-bottom:.75rem}
.ping-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--card-border)}
@media(max-width:900px){.ping-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.ping-grid{grid-template-columns:repeat(2,1fr)}}
.ping-cell{background:var(--table-bg);padding:7px 10px;display:flex;align-items:center;gap:7px}
.ping-cell:hover{background:var(--table-hover-bg)}
.ping-cell-name{font-size:.75rem;font-weight:600;color:var(--table-text);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ping-cell-ip{font-size:.67rem;color:var(--card-text-muted);font-family:'Courier New',monospace;white-space:nowrap}
.table-wrapper{overflow-x:auto}
.table-infra{font-size:.72rem;border-collapse:separate;border-spacing:0;width:100%;background:var(--table-bg) !important;color:var(--table-text) !important}
.table-infra thead th{background:var(--table-header-bg) !important;color:var(--table-header-text) !important;border:1px solid var(--table-border) !important;white-space:nowrap;padding:5px 6px;font-weight:600;vertical-align:middle}
.table-infra thead th.grp-web{background:var(--table-header-bg) !important;color:var(--table-header-text) !important;border-color:var(--table-border) !important;border-bottom:3px solid #3d9cdb !important}
.table-infra thead th.grp-ssh{background:var(--table-header-bg) !important;color:var(--table-header-text) !important;border-color:var(--table-border) !important;border-bottom:3px solid #27ae60 !important}
.table-infra tbody td{padding:3px 5px;border:1px solid var(--table-border) !important;vertical-align:middle;background:var(--table-bg) !important}
.table-infra tbody tr:hover td{background:var(--table-hover-bg) !important}
.td-sticky{position:sticky;left:0;z-index:2;background:var(--table-bg) !important;box-shadow:2px 0 4px rgba(0,0,0,.06);min-width:175px;max-width:185px}
.table-infra tbody tr:hover .td-sticky{background:var(--table-hover-bg) !important}
.table-infra thead th.td-sticky{z-index:3;background:var(--table-header-bg) !important}
.col-name-main{font-weight:700;font-size:.74rem;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--table-text)}
.col-code-cell{font-family:'Courier New',monospace;font-size:.68rem;color:var(--card-text-muted);white-space:nowrap}
.btn-srv{display:inline-flex;align-items:center;justify-content:center;padding:1px 5px;border-radius:3px;font-size:.67rem;font-weight:600;text-decoration:none;border:none;cursor:pointer;line-height:1.7;transition:opacity .15s;white-space:nowrap}
.btn-srv:hover{opacity:.8;text-decoration:none}
.btn-esxi{background:#286090;color:#fff}
.btn-horus{background:#d58512;color:#fff;opacity:.35;cursor:not-allowed}
.btn-amon{background:#ac2925;color:#fff}
.btn-srvpeda{background:#449d44;color:#fff}
.btn-nas{background:#286090;color:#fff}
.btn-idrac{background:#d58512;color:#fff}
.btn-ondsrv{background:#ac2925;color:#fff}
.btn-ondnas{background:#449d44;color:#fff}
.btn-ntopng{background:#6c757d;color:#fff}
.btn-ssh{display:inline-flex;align-items:center;gap:2px;padding:1px 5px;border-radius:3px;font-size:.67rem;font-weight:600;line-height:1.7;text-decoration:none;cursor:pointer;border:1.5px solid;background:transparent;transition:opacity .15s;white-space:nowrap}
.btn-ssh:hover{opacity:.8;text-decoration:none}
.ssh-esxi{border-color:#286090;color:#286090}
.ssh-amon{border-color:#ac2925;color:#ac2925}
.ssh-nas{border-color:#286090;color:#286090}
.ssh-idrac{border-color:#d58512;color:#d58512}
html.dark-mode .ssh-esxi{border-color:#6baed6;color:#6baed6}
html.dark-mode .ssh-amon{border-color:#e07e7a;color:#e07e7a}
html.dark-mode .ssh-nas{border-color:#6baed6;color:#6baed6}
html.dark-mode .ssh-idrac{border-color:#f4c05a;color:#f4c05a}
.infra-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:6px 10px;background:var(--card-bg);border-bottom:1px solid var(--card-border)}
#searchInput{max-width:220px}
.infra-footer-note{font-size:.75rem;color:var(--card-text-muted);background:var(--card-bg);border:1px solid var(--card-border);border-radius:.5rem;padding:7px 14px;margin-top:.75rem;display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.infra-alert{display:none;align-items:flex-start;gap:10px;padding:9px 14px;border-radius:.5rem;margin-bottom:.75rem;background:#fff0f0;border:1px solid #f5c2c7;color:#842029;font-size:.82rem}
html.dark-mode .infra-alert{background:#3a1218;border-color:#6b2030;color:#f8a0aa}
.infra-alert.show{display:flex}
.infra-alert-list{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.infra-alert-badge{background:#f5c2c7;color:#58151c;padding:1px 7px;border-radius:3px;font-size:.74rem;font-weight:600}
html.dark-mode .infra-alert-badge{background:#6b2030;color:#ffd0d5}

/* page conges_global.php */
.table-year {
    table-layout: fixed;
    width: 100%;
}
.table-year thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fff;
}
/* Colonne mois */
.table-year th.sticky-col {
    position: sticky;
    left: 0;
    z-index: 3;
    width: 100px;
    min-width: 100px;
    max-width: 100px;
    padding: .28rem .35rem;
}
.table-year th.sticky-col .month-name {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Colonnes users */
.table-year th.user-col,
.table-year td.user-td {
    padding: .22rem .28rem;
    vertical-align: top;
}
/* Badge initiales */
.user-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 28px;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,.12);
    background: rgba(0,0,0,.03);
    font-weight: 700;
    font-size: .72rem;
    letter-spacing: .02em;
    user-select: none;
}
/* Cellules dates */
.cell-dates {
    font-size: .70rem;
    line-height: 1.12;
    white-space: normal;
    word-break: break-word;
}
.cell-dates .line  { margin: .07rem 0; }
.badge-mini        { font-size: .66rem; padding: .18rem .32rem; }
.has-overlap       { box-shadow: inset 0 0 0 9999px rgba(220, 53, 69, .06); }

/* Modale */
.overlap-trigger   { transition: opacity .15s; }
.overlap-trigger:hover { opacity: .8; }
#modalOverlap .modal-header { border-bottom: 2px solid #dc3545; }
#modalOverlapBody .overlap-day {
    border-left: 3px solid #dc3545;
    padding-left: .75rem;
    margin-bottom: .75rem;
}
#modalOverlapBody .overlap-day:last-child { margin-bottom: 0; }

/* page conges.php */
/* Sticky header + sticky première colonne */
.planning-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}
.planning-table th.sticky-col {
  position: sticky;
  left: 0;
  z-index: 3;
  min-width: 130px;
  max-width: 130px;
  width: 130px;
}

/* Anti-débordement noms */
.planning-table th.sticky-col .fw-semibold {
  display: block;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Cellules compactes */
.planning-table td.daycell { min-width: 46px; }
.planning-table td.daycell .slot { font-size: .75rem; line-height: 1.1; padding: .25rem 0; }
.planning-table td.daycell .cell-label { font-weight: 600; padding: .45rem 0; }

/* Masquer week-ends (th + td) */
.hide-weekends .day-col[data-weekend="1"] { display: none !important; }

/* page cleanup.php */
  .table tr.table-active > * {
    background-color: rgba(var(--bs-primary-rgb,13,110,253),.12) !important;
  }
  .table tr.table-active td:first-child {
    box-shadow: inset 3px 0 0 var(--bs-primary);
  }
  
/* page attachments.php */

/* Forcer l’affichage des cases à cocher dans le tableau (priorité sur styles globaux) */
.table input[type="checkbox"],
.table .form-check-input {
display: inline-block !important;
position: static !important;   /* évite les positions relatives/absolues des thèmes */
opacity: 1 !important;
width: 1.1rem; height: 1.1rem;
vertical-align: middle;
margin: 0;
}
/* Colonne plus étroite et centrée */
th.chk-col, td.chk-col { width: 36px; text-align: center; }
/* Couleur de la case */
.table .row-check { accent-color: var(--bs-primary); }

/* Surlignage de la ligne sélectionnée */
.table tr.table-active > * {
background-color: rgba(var(--bs-primary-rgb, 13,110,253), .12) !important;
}
/* Un petit repère à gauche (optionnel) */
.table tr.table-active td:first-child {
box-shadow: inset 3px 0 0 var(--bs-primary);
}

  th.chk-col, td.chk-col { width: 36px; text-align: center; }
  .table tr.table-active > * {
    background-color: rgba(var(--bs-primary-rgb,13,110,253),.12) !important;
  }
  .table tr.table-active td:first-child {
    box-shadow: inset 3px 0 0 var(--bs-primary);
  }
  
/* Masquer la colonne des catégories du picker emoticons (une seule catégorie) */
.tox .tox-dialog__body-nav {
  display: none !important;
}
.tox .tox-dialog__body-content {
  width: 100% !important;
}

/* ============================================================================
   infra_tools.php — couleurs SÉMANTIQUES (hors thème)
   ----------------------------------------------------------------------------
   WEB = bleu, SSH = vert, états ping = vert/rouge/orange.
   Ces couleurs codent une INFORMATION (type de service, état) : elles restent
   identiques quel que soit le thème, mais s'adaptent clair/sombre.
   ============================================================================ */

/* ---- Badges de groupe (toolbar + en-têtes tableau) ---- */
.tag-web {
  background: #1a3a5c;
  color: #cfe8ff;
  padding: 1px 7px;
  border-radius: 3px;
  font-size: .68rem;
  font-weight: 600;
}
.tag-ssh {
  background: #14452a;
  color: #c8f5df;
  padding: 1px 7px;
  border-radius: 3px;
  font-size: .68rem;
  font-weight: 600;
}

/* ---- En-têtes de modales + boutons "service" ---- */
.svc-web-header {
  background: #1a3a5c;
  color: #cfe8ff;
  border-bottom: 1px solid #1e4d80;
}
.svc-ssh-header {
  background: #14452a;
  color: #c8f5df;
  border-bottom: 1px solid #1a5c37;
}
.btn-svc-web {
  background: #1a3a5c;
  color: #cfe8ff;
  border: 1px solid #1e4d80;
}
.btn-svc-ssh {
  background: #14452a;
  color: #c8f5df;
  border: 1px solid #1a5c37;
}

/* Variantes sombres (cohérentes avec .grp-web/.grp-ssh) */
html.dark-mode .tag-web,
html.dark-mode .svc-web-header,
html.dark-mode .btn-svc-web {
  background: #102033;
  color: #7ec8fd;
}
html.dark-mode .tag-ssh,
html.dark-mode .svc-ssh-header,
html.dark-mode .btn-svc-ssh {
  background: #0c2218;
  color: #6fefad;
}

/* ---- États de supervision (ping / agents) ---- */
/* Couleurs d'état : vert=OK, rouge=KO, orange=secours. Hors thème. */
.state-ok      { color: #27ae60; }
.state-down    { color: #e74c3c; }
.state-standby { color: #f39c12; }

/* Bordure gauche de cellule selon l'état ping (posée par le JS via classe) */
.pcell-ok   { border-left: 3px solid #27ae60 !important; }
.pcell-down { border-left: 3px solid #e74c3c !important; }