:root {
      --bg-primary:   #0d1117;
      --bg-secondary: #161b22;
      --bg-card:      #1c2128;
      --border:       #30363d;
      --text-primary: #e6edf3;
      --text-muted:   #7d8590;
      --accent-blue:  #388bfd;
      --accent-green: #3fb950;
      --accent-orange:#d29922;
      --accent-red:   #f85149;
      --accent-purple:#bc8cff;
      --accent-yellow :#fdd275;
    }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { background: var(--bg-primary); color: var(--text-primary); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; height: 100vh; overflow: hidden; display: flex; flex-direction: column; }

    /* Header */
    .header { background: var(--bg-secondary); border-bottom: 1px solid var(--border); padding: 0 20px; display: flex; align-items: center; justify-content: space-between; height: 50px; flex-shrink: 0; }
    .header-title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; }
    .header-stats { display: flex; align-items: center; gap: 8px; font-size: 12px; }
    .stat-badge { background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; padding: 3px 10px; display: flex; align-items: center; gap: 5px; }
    .status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-red); flex-shrink: 0; }
    .status-dot.pulse { background: var(--accent-green); animation: pulse 1.5s infinite; }
    @keyframes pulse { 0%,100%{ opacity:1; } 50%{ opacity:.4; } }

    /* Layout */
    .app { display: flex; flex: 1; overflow: hidden; min-height: 0; }

    /* Camera list panel */
    .cam-list-panel { width: 290px; flex-shrink: 0; background: var(--bg-secondary); border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; }
    .panel-top { padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
    .count-badge { background: var(--accent-blue); color: #fff; border-radius: 10px; padding: 1px 7px; font-size: 10px; font-weight: 700; }
    .cam-list-body { flex: 1; overflow-y: auto; }
    .cam-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; border-bottom: 1px solid rgba(48,54,61,.4); transition: background .15s; user-select: none; }
    .cam-row:hover { background: rgba(56,139,253,.08); }
    .cam-row.active { background: rgba(56,139,253,.13); border-right: 3px solid var(--accent-blue); }
    .cam-sdot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-red); flex-shrink: 0; }
    .cam-sdot.on { background: var(--accent-green); animation: pulse 2s infinite; }
    .cam-row-info { flex: 1; min-width: 0; }
    .cam-row-name { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .cam-row-meta { font-size: 10px; color: var(--text-muted); margin-top: 2px; }
    .cam-mini-badges { display: flex; gap: 5px; flex-shrink: 0; }
    .mbadge { width: 6px; height: 6px; border-radius: 50%; background: transparent; }
    .mbadge.mo { background: var(--accent-orange); }
    .mbadge.re { background: var(--accent-red); }
    .no-cam { padding: 40px 14px; text-align: center; color: var(--text-muted); font-size: 12px; line-height: 1.6; }

    /* Detail panel */
    .detail-panel { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; min-height: 0; }
    .empty-state { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: var(--text-muted); }
    .empty-state svg { width: 52px; height: 52px; opacity: .25; }
    .empty-state p { font-size: 13px; }
    #camDetail { display: none; flex: 1; flex-direction: column; overflow: hidden; min-height: 0; }
    #camDetail.visible { display: flex; }

    /* Detail header */
    .detail-header { background: var(--bg-secondary); border-bottom: 1px solid var(--border); padding: 9px 16px; display: flex; align-items: center; gap: 10px; flex-shrink: 0; flex-wrap: wrap; }
    .detail-sdot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-red); flex-shrink: 0; }
    .detail-sdot.on { background: var(--accent-green); animation: pulse 2s infinite; }
    .detail-devname { font-size: 14px; font-weight: 600; }
    .detail-bdg { font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 4px; display: none; }
    .detail-bdg.vis { display: inline-block; }
    .bdg-mo   { background: rgba(210,153,34,.8); color: #fff; }
    .bdg-re   { background: rgba(248,81,73,.8);  color: #fff; }
    .bdg-diff { background: var(--bg-card); border: 1px solid var(--border); color: var(--text-muted); display: inline-block; }
    .detail-link { margin-left: auto; font-size: 11px; color: var(--text-muted); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
    .detail-link:hover { color: var(--accent-blue); }

    /* Tabs */
    .tab-nav { background: var(--bg-secondary); border-bottom: 1px solid var(--border); padding: 0 14px; display: flex; gap: 2px; flex-shrink: 0; }
    .tab-btn { background: none; border: none; padding: 9px 14px; font-size: 12px; font-weight: 500; color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .2s, border-color .2s; display: flex; align-items: center; gap: 6px; }
    .tab-btn:hover { color: var(--text-primary); }
    .tab-btn.active { color: var(--accent-blue); border-bottom-color: var(--accent-blue); }

    /* Tab panes */
    .tab-pane { flex: 1; overflow: hidden; display: none; flex-direction: column; min-height: 0; }
    .tab-pane.active { display: flex; }

    /* Flux */
    .stream-area { flex: 1; background: #000; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; min-height: 0; }
    .stream-area img { 
      position: absolute;
      top: 0;
      left: 0;
      width: 100%; 
      height: 100%; 
      object-fit: contain; 
      display: block; 
    }
    .stream-err { color: var(--text-muted); font-size: 13px; text-align: center; display: none; }
    .stream-wait { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: var(--text-muted); font-size: 13px; text-align: center; }
    .heartbeat-icon { width: 32px; height: 32px; animation: heartbeat 1.5s ease-in-out infinite; }
    @keyframes heartbeat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
    .stream-controls { margin-top: auto; background: var(--bg-secondary); border-top: 1px solid var(--border); padding: 8px 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex-shrink: 0; }
    .cam-sw-group { display: flex; gap: 6px; }
    .cbtn { background: var(--bg-card); border: 1px solid var(--border); color: var(--text-muted); border-radius: 6px; padding: 5px 12px; font-size: 12px; cursor: pointer; transition: all .2s; display: inline-flex; align-items: center; gap: 5px; }
    .cbtn:hover { border-color: var(--accent-blue); color: var(--accent-blue); }
    .cbtn.active { background: rgba(56,139,253,.15); border-color: var(--accent-blue); color: var(--accent-blue); }
    .diff-val { font-size: 12px; color: var(--text-muted); margin-left: auto; }

    /* Library */
    .lib-view { flex: 1; overflow-y: auto; padding: 12px 14px; }
    .lib-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
    .lib-cnt { font-size: 12px; color: var(--text-muted); }
    .btn-sm { background: none; border: 1px solid var(--border); color: var(--text-muted); border-radius: 6px; padding: 4px 10px; font-size: 11px; cursor: pointer; transition: all .2s; display: inline-flex; align-items: center; gap: 5px; }
    .btn-sm:hover { border-color: var(--accent-blue); color: var(--accent-blue); }
    .btn-sm-green { border-color: var(--accent-green); color: var(--accent-green); }
    .btn-sm-green:hover { background: rgba(63,185,80,.1); }
    .btn-sm:disabled { opacity:.35; cursor:not-allowed; }
    /* Two-section library */
    .lib-section       { margin-bottom: 14px; }
    .lib-section-hdr   { display:flex; align-items:flex-start; justify-content:space-between; gap:6px; margin-bottom:6px; }
    .lib-section-title { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.07em; color:var(--text-muted); }
    .lib-section-meta  { font-size:10px; color:var(--text-muted); margin-bottom:6px; }
    .lib-section-actions { display:flex; gap:4px; flex-shrink:0; flex-wrap:wrap; justify-content:flex-end; }
    .lib-section-divider { border:none; border-top:1px solid var(--border); margin:12px 0; }
    .lib-cmd-feedback  { font-size:10px; color:var(--accent-green); margin-bottom:6px; display:none; }
    .rec-item { background: var(--bg-card); border: 1px solid var(--border); border-radius: 7px; padding: 9px 12px; margin-bottom: 6px; transition: opacity .3s; }
    .rec-name { font-size: 12px; font-weight: 500; margin-bottom: 3px; }
    .rec-meta { font-size: 11px; color: var(--text-muted); margin-bottom: 6px; }
    .rec-actions { display: flex; gap: 5px; flex-wrap: wrap; }
    .act { background: none; border: 1px solid var(--border); color: var(--text-muted); border-radius: 5px; padding: 3px 9px; font-size: 11px; cursor: pointer; transition: all .2s; display: inline-flex; align-items: center; gap: 4px; }
    .act:hover { border-color: var(--accent-blue); color: var(--accent-blue); }
    .act-del:hover { border-color: var(--accent-red); color: var(--accent-red); }
    .act-upload:hover { border-color: var(--accent-green); color: var(--accent-green); }
    .lib-empty { padding: 30px; text-align: center; color: var(--text-muted); font-size: 12px; }

    /* Settings */
    .settings-view { flex: 1; overflow-y: auto; padding: 12px 16px; }
    .sett-section { margin-bottom: 18px; }
    .sett-title { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 6px; }
.slider-row { 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  gap: 12px; 
  margin-bottom: 12px; 
}

.slider-lbl {
  font-size: 13px;
  color: var(--text-muted);
  flex-shrink: 0;
  /* Une largeur fixe empêche le label de se compresser et aligne toutes les barres de slide sur le même axe vertical : */
  width: 210px; 
}

/* NOUVELLE RÈGLE : Conteneur du slider et de la valeur */
.slider-row-bottom {
  display: flex;
  align-items: center; 
  justify-content: center;
  flex: 1; /* Permet au bloc de prendre toute la largeur restante */
  gap: 10px;
}

.slider-row input[type=range] { 
  flex: 1; /* Force la barre à s'étirer pour combler l'espace vide */
  accent-color: var(--accent-blue); 
  height: 4px; 
  margin: 0; /* Important : supprime les marges par défaut qui empêchent le centrage */
  cursor: pointer;
}

.slider-val { 
  font-size: 12px; 
  font-weight: 500; 
  min-width: 50px; /* Évite les sauts de ligne ou décalages sur des valeurs longues (ex: 1000 ms) */
  text-align: right; 
  flex-shrink: 0;
}


    .toggle-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }
    .toggle-lbl  { font-size: 12px; color: var(--text-muted); }
    .tgl { position: relative; width: 34px; height: 18px; flex-shrink: 0; }
    .tgl input { opacity: 0; width: 0; height: 0; position: absolute; }
    .tgl-track { position: absolute; inset: 0; background: var(--border); border-radius: 9px; cursor: pointer; transition: background .2s; }
    .tgl input:checked + .tgl-track { background: var(--accent-blue); }
    .tgl-track::after { content: ''; position: absolute; width: 12px; height: 12px; left: 3px; top: 3px; border-radius: 50%; background: #fff; transition: transform .2s; }
    .tgl input:checked + .tgl-track::after { transform: translateX(16px); }
    .btn-apply { background: var(--accent-blue); color: #fff; border: none; border-radius: 6px; padding: 6px 16px; font-size: 12px; cursor: pointer; transition: opacity .2s; margin-top: 6px; }
    .btn-apply:hover { opacity: .85; }
    .btn-apply:disabled { opacity: .5; cursor: default; }
    .apply-ok { font-size: 11px; color: var(--accent-green); margin-left: 10px; display: none; }

    /* ══════════════════════════════════════════════════
       EVENTS SLIDE PANEL — base (desktop : depuis droite)
       ══════════════════════════════════════════════════ */

    /* Backdrop — commun desktop + mobile */
    .panel-backdrop {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .50);
      z-index: 199;
    }
    .panel-backdrop.open { display: block; }

    /* Panneau principal */
    .slide-panel {
      position: fixed;
      top: 0;
      right: 0;
      width: 300px;
      height: 100vh;
      background: var(--bg-secondary);
      border-left: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      transform: translateX(100%);
      transition: transform .25s ease;
      z-index: 200;
    }
    .slide-panel.open { transform: translateX(0); }

    /* Header du panneau */
    .panel-header {
      padding: 12px 16px;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-shrink: 0;
    }
    .panel-header h2 {
      font-size: 13px;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    /* Bouton fermeture × */
    .panel-close {
      background: none;
      border: none;
      color: var(--text-muted);
      font-size: 22px;
      line-height: 1;
      cursor: pointer;
      padding: 0 2px;
      transition: color .15s;
    }
    .panel-close:hover { color: var(--accent-red); }

    /* Corps du panneau */
    .panel-body {
      flex: 1;
      overflow-y: auto;
      padding: 8px;
    }

    /* Compteur badge */
    .ev-count {
      background: var(--accent-blue);
      color: #fff;
      border-radius: 10px;
      padding: 1px 7px;
      font-size: 10px;
      font-weight: 700;
    }

    /* Items événements */
    .ev-item { border: 1px solid var(--border); border-radius: 5px; padding: 6px 8px; margin-bottom: 4px; font-size: 11px; background: var(--bg-card); }
    .ev-motion    { border-left: 3px solid var(--accent-orange); }
    .ev-recording { border-left: 3px solid var(--accent-red); }
    .ev-device    { border-left: 3px solid var(--accent-blue); }
    .ev-type { font-weight: 600; margin-bottom: 1px; }
    .ev-did  { color: var(--accent-blue); }
    .ev-time { color: var(--text-muted); float: right; }

    /* Icons */
    .icon { display: inline-block; vertical-align: middle; width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; flex-shrink: 0; }

    /* Scrollbar */
    ::-webkit-scrollbar { width: 5px; height: 5px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

    /* Video Modal */
    .vid-modal-overlay {
      display: none; position: fixed; inset: 0;
      background: rgba(0,0,0,.82); z-index: 1000;
      align-items: center; justify-content: center;
    }
    .vid-modal-overlay.open { display: flex; }
    .vid-modal {
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius: 10px; padding: 16px; max-width: 92vw; width: 860px;
      display: flex; flex-direction: column; gap: 12px;
    }
    .vid-modal-header {
      display: flex; align-items: center; justify-content: space-between;
      font-size: 13px; font-weight: 600; color: var(--text-primary);
    }
    .vid-modal-close {
      background: none; border: none; cursor: pointer;
      color: var(--text-muted); font-size: 20px; line-height: 1;
      transition: color .2s;
    }
    .vid-modal-close:hover { color: var(--accent-red); }
    .vid-modal video {
      width: 100%; border-radius: 6px; background: #000;
      max-height: 72vh; outline: none;
    }

/* Layout adaptatif pour les vues cartes */
.lib-grid {
  display: grid;
  gap: 16px;
  /* 3 cartes par défaut sur grand écran */
  grid-template-columns: repeat(3, 1fr); 
  width: 100%;
}

/* 2 cartes sur écran moyen (tablettes / petits ordis) */
@media (max-width: 1100px) {
  .lib-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 1 carte sur mobile */
@media (max-width: 768px) {
  .lib-grid {
    grid-template-columns: 1fr;
  }
}

/* Assure-toi que les éléments de la grille s'étirent bien */
.rec-item {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.rec-item .rec-actions {
  margin-top: auto; /* Pousse les boutons d'action toujours en bas de la carte */
}

/* ── Conteneur tableau ── */
.lib-table-wrap { width: 100%; }

.rec-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
  background: var(--bg-secondary); border-radius: 12px;
  overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.3); color: var(--text-primary);
}

.rec-table thead tr {
  background: #141a20;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.rec-table thead th {
  padding: 12px 16px;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgba(255,255,255,.5);
  white-space: nowrap;
}
.sortable-th:hover { color: rgba(255,255,255,.9); }
.th-active         { color: #58a6ff !important; }

.rec-row {
  border-bottom: 1px solid rgba(255,255,255,.06);
  transition: background .15s;
}
.rec-row:last-child { border-bottom: none; }
.rec-row:hover      { background: #252d38; }
.rec-row td         { padding: 11px 16px; vertical-align: middle; }

.rec-name-cell {
  text-align: left;
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  color: var(--text-primary)
}
.rec-meta-cell  { text-align: center; white-space: nowrap; color: rgba(255,255,255,.5); }
.device-cell    { text-align: center; white-space: nowrap; }
.rec-actions-cell {
  text-align: right;
  white-space: nowrap;
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.device-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.7);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
}

.rec-table colgroup .col-filename { width: 100%; }
.rec-table colgroup .col-device   { width: 1%; white-space: nowrap; }
.rec-table colgroup .col-date     { width: 1%; white-space: nowrap; }
.rec-table colgroup .col-size     { width: 1%; white-space: nowrap; }
.rec-table colgroup .col-actions  { width: 1%; white-space: nowrap; }

.rec-table thead th                    { text-align: left; }
.rec-table thead th:nth-child(2),
.rec-table thead th:nth-child(3),
.rec-table thead th:nth-child(4)       { text-align: center; }
.rec-table thead th:nth-child(5)       { text-align: right; }

/* ══ Barre de tri ══ */
.sort-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 0 8px;
  flex-wrap: wrap;
}
.sort-bar-label {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}
.sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  font-size: 11px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--bg-tertiary);
  color: var(--text-muted);
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
  white-space: nowrap;
}
.sort-btn:hover {
  border-color: var(--accent-blue);
  color: var(--text-primary);
}
.sort-btn.active {
  border-color: var(--accent-blue);
  background: rgba(88,166,255,.12);
  color: var(--accent-blue);
  font-weight: 600;
}
.sort-btn .sort-arrow { font-size: 10px; opacity: 0.7; }

.sortable-th {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.sortable-th:hover { color: var(--accent-blue); }
.th-active         { color: var(--accent-blue); }

/* ── Battery widget ── */
.batt-widget {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(0,0,0,.52);
  border: 1.5px solid rgba(255,255,255,.15);
  border-radius: 10px;
  padding: 5px 12px;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .3px;
  line-height: 1;
  cursor: default;
  user-select: none;
  white-space: nowrap;
}
.batt-green  { color: #4CAF50; }
.batt-yellow { color: #FFC107; }
.batt-orange { color: #FF9800; }
.batt-red    { color: #F44336; }
.batt-blue   { color: #00BFFF; }

.row-batt {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  min-width: 32px;
  text-align: right;
  letter-spacing: .2px;
}
.row-batt.batt-green  { color: #4CAF50; }
.row-batt.batt-yellow { color: #FFC107; }
.row-batt.batt-orange { color: #FF9800; }
.row-batt.batt-red    { color: #F44336; }
.row-batt.batt-blue   { color: #00BFFF; }

/* ── 2-row header ── */
.header.header-2rows {
  height: auto;
  flex-direction: column;
  padding: 0;
  align-items: stretch;
  gap: 0;
}
.header-row {
  display: flex;
  align-items: center;
  padding: 0 20px;
  width: 100%;
  box-sizing: border-box;
}
.header-row-nav {
  height: 44px;
  border-bottom: 1px solid var(--border);
  gap: 10px;
}
.header-row-status {
  height: 36px;
  justify-content: space-between;
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border);
}
.header-tabs {
  display: flex;
  gap: 6px;
  margin-left: auto;
}
.header-events-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  padding: 4px 10px;
  cursor: pointer;
  font-size: 12px;
  transition: color .15s, border-color .15s;
  flex-shrink: 0;
}
.header-events-btn:hover { color: var(--text-primary); border-color: var(--text-muted); }
.header-events-label { font-size: 12px; }
input:focus-visible { outline: none; box-shadow: 0 0 0 1px #4285f4; }