/* Fleet Manager — Panel opérationnel light v5 */
:root {
  --text3: #6b7280;
  --sidebar-width: 224px;
  --header-height: 64px;
}

body { min-height:100vh; }
body.modal-open { overflow:hidden; }
header {
  position:fixed;
  inset:0 0 auto 0;
  z-index:120;
  padding:0 24px;
  background:rgba(255,255,255,.96);
}
.header-mark { background:var(--accent); box-shadow:none; }
.header-actions .btn { min-height:36px; }

/* Navigation latérale */
.tab-nav {
  position:fixed;
  z-index:110;
  top:var(--header-height);
  bottom:0;
  left:0;
  width:var(--sidebar-width);
  padding:24px 14px 18px;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:4px;
  overflow-y:auto;
  background:#fff;
  border-right:1px solid var(--border);
  border-bottom:0;
}
.sidebar-label {
  padding:0 12px 8px;
  color:var(--text3);
  font-size:10px;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.tab-btn {
  position:static;
  width:100%;
  min-height:42px;
  padding:9px 11px;
  display:flex;
  align-items:center;
  gap:10px;
  border:0;
  border-radius:8px;
  color:var(--text2);
  text-align:left;
}
.tab-btn:hover { color:var(--text); background:var(--surface2); }
.tab-btn.active {
  color:var(--accent);
  background:var(--accent-bg);
  border:0;
}
.nav-icon {
  width:20px;
  height:20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:currentColor;
  font-size:17px;
  font-weight:500;
}
.tab-btn .tab-badge { margin-left:auto; }
.sidebar-foot {
  margin-top:auto;
  padding:14px 12px 0;
  border-top:1px solid var(--border);
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--text3);
  font-size:11px;
  font-weight:600;
}
.sidebar-dot { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px var(--green-bg); }

/* Zone principale */
.app-content {
  max-width:none;
  margin:var(--header-height) 0 0 var(--sidebar-width);
  padding:28px 32px 56px;
}
.section { margin-bottom:28px; }
.section-head { margin-bottom:14px; }
.section-actions { display:flex; gap:8px; flex-wrap:wrap; }
.stats-row { gap:12px; margin-bottom:28px; }
.stat-card { padding:15px 18px; border-radius:10px; box-shadow:none; }
.stat-card:hover { transform:none; box-shadow:var(--shadow-sm); }
.stat-icon { float:right; margin:1px 0 0 12px; font-size:17px; opacity:.72; }
.stat-value { font-size:25px; }
.stat-label { font-size:11px; }

/* Alertes compactes */
.attention-panel {
  padding:16px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:11px;
}
.attention-panel .section-head { margin-bottom:10px; }
.attention-panel .section-title { font-size:15px; }
.dashboard-alerts {
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding-bottom:2px;
  scrollbar-width:thin;
}
.dashboard-alerts .alert-card { min-width:270px; max-width:360px; flex:1; box-shadow:none; }

/* Toolbar */
.accounts-section {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  padding:18px;
  box-shadow:var(--shadow-sm);
}
.table-toolbar {
  display:grid;
  grid-template-columns:minmax(220px,1fr) repeat(3,minmax(145px,auto)) auto;
  gap:8px;
  align-items:center;
  margin-bottom:12px;
}
.account-search {
  height:38px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 11px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--bg);
  color:var(--text3);
}
.account-search:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px rgba(91,95,227,.1); }
.account-search input {
  width:100%;
  border:0;
  outline:0;
  background:transparent;
  color:var(--text);
  font:500 12.5px Inter,system-ui,sans-serif;
}
.toolbar-select {
  height:38px;
  padding:0 30px 0 10px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface);
  color:var(--text2);
  font:600 11.5px Inter,system-ui,sans-serif;
  cursor:pointer;
}
.toolbar-refresh { height:38px; }
.table-meta {
  min-height:28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:var(--text3);
  font-size:10.5px;
}
.table-meta span:first-child { color:var(--text2); font-weight:700; }

/* Tableau principal */
.accounts-table-container {
  border:1px solid var(--border);
  border-radius:10px;
  overflow:visible;
  background:#fff;
}
.accounts-table {
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  table-layout:fixed;
}
.accounts-table th {
  height:40px;
  padding:0 10px;
  border-bottom:1px solid var(--border);
  background:#fafbfc;
  color:var(--text3);
  font-size:9.5px;
  font-weight:700;
  letter-spacing:.055em;
  text-align:left;
  text-transform:uppercase;
  white-space:nowrap;
}
.accounts-table th:first-child { border-radius:10px 0 0 0; }
.accounts-table th:last-child { border-radius:0 10px 0 0; }
.accounts-table td {
  height:62px;
  padding:9px 10px;
  border-bottom:1px solid var(--border);
  color:var(--text2);
  font-size:11.5px;
  vertical-align:middle;
}
.accounts-table tbody tr:last-child td { border-bottom:0; }
.accounts-table tbody tr { cursor:pointer; transition:background .12s ease; }
.accounts-table tbody tr:hover { background:#fafbff; }
.accounts-table tbody tr:focus-visible { outline:3px solid rgba(91,95,227,.28); outline-offset:-3px; }
.accounts-table tbody tr.row-err { box-shadow:inset 3px 0 0 var(--red); }
.accounts-table tbody tr.row-warn { box-shadow:inset 3px 0 0 var(--amber); }
.accounts-table tbody tr.row-ok { box-shadow:inset 3px 0 0 var(--green); }
.accounts-table .select-col { width:42px; text-align:center; }
.accounts-table .account-col { width:17%; }
.accounts-table .status-col { width:12%; }
.accounts-table .debrid-col { width:15%; }
.accounts-table .expiry-col { width:13%; }
.accounts-table .stremio-col { width:12%; }
.accounts-table .streams-col { width:10%; }
.accounts-table .updated-col { width:11%; }
.accounts-table .actions-col { width:108px; text-align:right; }
.bulk-check, #bulkSelectAll { width:15px; height:15px; accent-color:var(--accent); cursor:pointer; }
.sort-button {
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:0;
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
  letter-spacing:inherit;
  text-transform:inherit;
  cursor:pointer;
}
.sort-button:hover, .sort-button.active { color:var(--accent); }
.sort-arrow { font-size:10px; }
.account-identity { min-width:0; }
.account-name-main { overflow:hidden; color:var(--text); font-size:12.5px; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
.account-meta { margin-top:2px; overflow:hidden; color:var(--text3); font-size:9.5px; text-overflow:ellipsis; white-space:nowrap; }
.table-status { display:inline-flex; align-items:center; gap:6px; color:var(--text); font-weight:650; white-space:nowrap; }
.table-subtext { display:block; margin-top:2px; overflow:hidden; color:var(--text3); font-size:9.5px; text-overflow:ellipsis; white-space:nowrap; }
.expiry-days { color:var(--text); font-weight:700; font-variant-numeric:tabular-nums; }
.expiry-days.warn { color:var(--amber); }
.expiry-days.err { color:var(--red); }
.config-chip { display:inline-flex; margin-right:3px; padding:1px 5px; border-radius:4px; background:var(--surface2); color:var(--text3); font-size:8.5px; font-weight:700; }
.row-actions { position:relative; display:flex; justify-content:flex-end; gap:5px; }
.row-manage { min-height:30px; padding:5px 9px; }
.action-menu-button {
  width:30px;
  height:30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  border-radius:7px;
  background:#fff;
  color:var(--text2);
  font:700 15px/1 Inter,sans-serif;
  cursor:pointer;
}
.action-menu-button:hover, .action-menu-button[aria-expanded="true"] { background:var(--surface2); color:var(--text); }
.action-menu {
  position:absolute;
  z-index:50;
  top:35px;
  right:0;
  min-width:190px;
  padding:5px;
  border:1px solid var(--border);
  border-radius:9px;
  background:#fff;
  box-shadow:0 14px 36px rgba(17,24,39,.14);
  text-align:left;
}
.action-menu.hidden { display:none; }
.action-menu button {
  width:100%;
  min-height:34px;
  padding:7px 9px;
  border:0;
  border-radius:6px;
  background:transparent;
  color:var(--text2);
  font:500 11.5px Inter,sans-serif;
  text-align:left;
  cursor:pointer;
}
.action-menu button:hover { background:var(--surface2); color:var(--text); }
.action-menu button.danger { color:var(--red); }
.no-results { padding:48px 20px; text-align:center; color:var(--text3); }

/* Actions groupées */
.bulk-bar {
  position:sticky;
  z-index:30;
  top:74px;
  min-height:46px;
  margin:0 0 10px;
  padding:8px 12px;
  border-color:var(--accent-border);
  background:var(--accent-bg);
  box-shadow:none;
  color:var(--accent);
  font-size:11.5px;
  font-weight:700;
}
.bulk-selection-dot { width:7px; height:7px; border-radius:50%; background:var(--accent); }
.bulk-actions { margin-left:auto; display:flex; align-items:center; justify-content:flex-end; gap:6px; flex-wrap:wrap; }
.bulk-actions .form-select { width:auto; min-width:150px; padding:5px 9px; background:#fff; font-size:11px; }

/* Tiroir latéral de gestion */
#manageModal {
  justify-content:flex-end;
  align-items:stretch;
  padding:0;
  background:rgba(17,24,39,.26);
}
#manageModal .modal {
  width:min(680px,94vw);
  max-width:none !important;
  height:100dvh;
  max-height:none;
  margin:0;
  padding:28px 28px 24px;
  border-width:0 0 0 1px;
  border-radius:0;
  box-shadow:-16px 0 48px rgba(17,24,39,.14);
  animation:drawerIn .2s ease-out;
}
#manageModal .modal-close { position:sticky; top:0; z-index:4; float:right; }
#manageModal .manage-tabs { position:sticky; top:0; z-index:3; }
@keyframes drawerIn { from { transform:translateX(24px); opacity:.35; } to { transform:none; opacity:1; } }

/* Accessibilité */
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline:3px solid rgba(91,95,227,.28); outline-offset:2px; }
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

@media (max-width:1180px) {
  .table-toolbar { grid-template-columns:minmax(220px,1fr) repeat(2,minmax(145px,auto)); }
  .toolbar-refresh { grid-column:auto; }
  .accounts-table .updated-col, .accounts-table th.updated-col { display:none; }
  .accounts-table .account-col { width:19%; }
}

@media (max-width:900px) {
  :root { --header-height:56px; }
  header { height:56px; padding:0 14px; }
  header h1 { font-size:16px; }
  .header-actions .btn { padding:6px 9px; font-size:11px; }
  .tab-nav {
    top:var(--header-height);
    bottom:auto;
    width:100%;
    height:52px;
    padding:5px 10px;
    flex-direction:row;
    gap:3px;
    overflow-x:auto;
    border-right:0;
    border-bottom:1px solid var(--border);
  }
  .sidebar-label, .sidebar-foot { display:none; }
  .tab-btn { width:auto; min-width:max-content; min-height:40px; padding:7px 10px; }
  .tab-btn .nav-icon { width:17px; font-size:15px; }
  .app-content { margin:calc(var(--header-height) + 52px) 0 0; padding:20px 14px 52px; }
  .stats-row { grid-template-columns:repeat(4,1fr); }
  .table-toolbar { grid-template-columns:1fr 1fr; }
  .account-search { grid-column:1/-1; }
  .toolbar-refresh { grid-column:auto; }
  .accounts-table .streams-col, .accounts-table th.streams-col { display:none; }
  .bulk-bar { top:116px; }
}

@media (max-width:700px) {
  .app-content { padding:14px 10px 42px; }
  .stats-row { grid-template-columns:1fr 1fr; gap:8px; margin-bottom:18px; }
  .stat-card { padding:12px 14px; }
  .attention-panel { padding:13px; }
  .dashboard-alerts .alert-card { min-width:250px; }
  .accounts-section { padding:13px; margin-left:-2px; margin-right:-2px; }
  .table-toolbar { display:grid; grid-template-columns:1fr 1fr; overflow:visible; padding-bottom:0; }
  .account-search { grid-column:1/-1; min-width:0; width:100%; }
  .toolbar-select { min-width:0; width:100%; }
  .toolbar-refresh { min-width:0; width:100%; justify-content:center; }
  .table-meta span:last-child { display:none; }
  .accounts-table-container { border:0; background:transparent; }
  .accounts-table, .accounts-table tbody { display:block; }
  .accounts-table thead { display:none; }
  .accounts-table tbody { display:grid; gap:8px; }
  .accounts-table tbody tr {
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:9px 12px;
    padding:14px 12px 12px 42px;
    border:1px solid var(--border);
    border-radius:10px;
    background:#fff;
    box-shadow:var(--shadow-sm);
  }
  .accounts-table td { display:block; width:auto !important; height:auto; padding:0; border:0; }
  .accounts-table .select-col { position:absolute; top:17px; left:14px; }
  .accounts-table .account-col { grid-column:1; }
  .accounts-table .status-col { grid-column:2; grid-row:1; text-align:right; }
  .accounts-table .debrid-col { grid-column:1; }
  .accounts-table .expiry-col { grid-column:2; text-align:right; }
  .accounts-table .stremio-col { grid-column:1; }
  .accounts-table .actions-col { grid-column:2; grid-row:3; align-self:end; }
  .accounts-table .streams-col, .accounts-table .updated-col { display:none; }
  .account-name-main { font-size:13px; }
  .table-subtext { max-width:170px; }
  .row-manage { min-width:70px; min-height:34px; justify-content:center; }
  .action-menu-button { width:34px; height:34px; }
  .action-menu { position:fixed; top:auto; right:12px; bottom:12px; left:12px; min-width:0; padding:8px; }
  .action-menu button { min-height:44px; font-size:13px; }
  .bulk-bar { top:116px; align-items:flex-start; }
  .bulk-actions { width:100%; justify-content:flex-start; overflow-x:auto; flex-wrap:nowrap; padding-top:4px; }
  .bulk-actions > * { flex:0 0 auto; }
  #manageModal .modal { width:100%; max-width:none; padding:22px 16px 18px; }
  #manageModal .credentials-grid, #manageModal .manage-overview-grid { grid-template-columns:1fr; }
  .modal-overlay:not(#manageModal) { padding:10px; }
  .modal-overlay:not(#manageModal) .modal { margin:0; max-height:calc(100dvh - 20px); }
  .section-actions .btn { min-height:38px; }
}

@media (max-width:420px) {
  .tab-btn { padding:7px 9px; }
  .tab-btn .nav-icon { display:none; }
  .header-actions .btn { font-size:0; width:38px; justify-content:center; }
  .header-actions .btn::before { content:'◇'; font-size:16px; }
  .accounts-table tbody tr { grid-template-columns:minmax(0,1fr) auto; }
  .table-status { font-size:10.5px; }
  .expiry-days { font-size:10.5px; }
}