/* ===================================================
   ISP CRM — WHMCS-Style Light Theme
   Professional ISP Management Interface
   =================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ─── CSS Variables ─────────────────────────────── */
:root {
  --topbar-bg: #1a4a8a;
  --topbar-text: #e2e8f0;
  --topbar-hover: rgba(255, 255, 255, 0.1);
  --topbar-active: rgba(255, 255, 255, 0.15);
  --topbar-h:       38px;

  --sidebar-bg:     #ffffff;
  --sidebar-w:      170px;
  --sidebar-border: #d4d9de;
  --sidebar-title-bg: #f1f3f4;
  --sidebar-title-color: #555;
  --sidebar-link:   #2d6bb5;
  --sidebar-link-hover: #1a4a8a;

  --content-bg:     #f0f2f5;
  --panel-bg:       #ffffff;
  --panel-border:   #dde0e4;
  --panel-header-bg:#f5f7f9;
  --panel-header-color: #333;

  --accent:         #2563eb;
  --accent-hover:   #1d4ed8;
  --accent-light:   #dbeafe;
  --success:        #16a34a;
  --success-light:  #dcfce7;
  --warning:        #d97706;
  --warning-light:  #fef3c7;
  --danger:         #dc2626;
  --danger-light:   #fee2e2;
  --info:           #0891b2;
  --info-light:     #cffafe;

  --text-primary:   #1a1a2e;
  --text-secondary: #555e6d;
  --text-muted:     #8a929e;
  --border:         #d1d5db;
  --input-border:   #c5caD0;
  --input-bg:       #ffffff;
  --input-focus:    #2563eb;

  --radius:         4px;
  --shadow:         0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:      0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.05);
  --transition:     0.15s ease;
}

/* ─── Reset ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 13.5px; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--content-bg);
  color: var(--text-primary);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  padding-top: var(--topbar-h);
}
a { text-decoration: none; color: var(--sidebar-link); }
a:hover { color: var(--sidebar-link-hover); text-decoration: underline; }
button { cursor: pointer; font-family: inherit; }
input, select, textarea { font-family: inherit; }
ul { list-style: none; }

/* ─── Scrollbar ──────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #b0b8c4; border-radius: 3px; }

/* ══════════════════════════════════════════════════
   TOP NAVIGATION BAR
══════════════════════════════════════════════════ */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--topbar-h);
  background: var(--topbar-bg);
  display: flex;
  align-items: stretch;
  z-index: 1000;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

.topbar-logo {
  display: flex; align-items: center; gap: 8px;
  padding: 0 16px;
  background: rgba(0,0,0,0.2);
  border-right: 1px solid rgba(255,255,255,0.07);
  min-width: var(--sidebar-w);
  text-decoration: none !important;
}
.topbar-logo .logo-icon {
  width: 22px; height: 22px;
  background: linear-gradient(135deg, #3b82f6, #06b6d4);
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
}
.topbar-logo .logo-text {
  font-size: 0.95rem; font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.2px;
}
.topbar-logo .logo-sub {
  font-size: 0.6rem; color: var(--topbar-text);
  display: block; line-height: 1;
}

.topbar-nav {
  display: flex; align-items: stretch;
  flex: 1;
}

.topbar-nav-item {
  position: relative;
  display: flex; align-items: center;
}
.topbar-nav-item > a,
.topbar-nav-item > button {
  display: flex; align-items: center; gap: 4px;
  padding: 0 13px;
  height: 100%;
  color: var(--topbar-text);
  font-size: 0.82rem; font-weight: 500;
  background: none; border: none;
  white-space: nowrap;
  transition: background var(--transition), color var(--transition);
  cursor: pointer;
}
.topbar-nav-item > a:hover,
.topbar-nav-item > button:hover {
  background: var(--topbar-hover);
  color: #ffffff;
  text-decoration: none;
}
.topbar-nav-item.active > a,
.topbar-nav-item.active > button {
  background: var(--topbar-active);
  color: #ffffff;
}
.topbar-nav-item .chevron {
  font-size: 0.6rem; opacity: 0.7;
  transition: transform var(--transition);
}
.topbar-nav-item:hover .chevron { transform: rotate(180deg); }

/* Dropdown (WHMCS Style) */
.topbar-dropdown {
  display: none;
  position: absolute;
  top: 100%; left: 0;
  background: #ffffff;
  border: 1px solid #c5d0dc;
  border-radius: 3px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  min-width: 220px;
  z-index: 999;
  padding: 4px 0;
}
.topbar-nav-item:hover > .topbar-dropdown { display: block; }
.topbar-dropdown a, .topbar-dropdown .dropdown-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 16px;
  font-size: 0.85rem;
  color: #333;
  text-decoration: none;
  cursor: pointer;
  background: #fff;
  border: none;
}
.topbar-dropdown a:hover, 
.topbar-dropdown .dropdown-item:hover,
.has-submenu:hover > .dropdown-item,
.has-submenu:hover > a {
  background: #1a4a8a; 
  color: #ffffff; 
}
.topbar-dropdown i.lucide { width: 14px; height: 14px; }

/* Submenu System */
.has-submenu {
  position: relative;
}
.has-submenu > .topbar-dropdown {
  top: -4px;
  left: 100%;
  display: none;
}
.has-submenu:hover > .topbar-dropdown {
  display: block;
}

.topbar-right {
  display: flex; align-items: center;
  margin-left: auto;
  gap: 2px;
  padding-right: 8px;
}
.topbar-icon-btn {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--topbar-text);
  background: none; border: none;
  font-size: 0.9rem;
  transition: background var(--transition);
  cursor: pointer;
}
.topbar-icon-btn:hover { background: var(--topbar-hover); color: #fff; }
.topbar-icon-btn svg { width: 20px !important; height: 20px !important; }
/* Wraps .topbar-icon-btn (the bell) for its hover dropdown — deliberately NOT
   .topbar-nav-item, whose ">button" rule (higher specificity: 1 class + 1 element vs
   .topbar-icon-btn's 1 class) overrides the icon button's own padding/font-size and
   squashes it. */
.topbar-notif { position: relative; display: flex; align-items: center; }
.topbar-notif:hover > .topbar-dropdown { display: block; }

/* ══════════════════════════════════════════════════
   APP LAYOUT
══════════════════════════════════════════════════ */
.app-wrapper {
  display: flex;
  min-height: calc(100vh - var(--topbar-h));
}

/* ══════════════════════════════════════════════════
   LEFT SIDEBAR
══════════════════════════════════════════════════ */
.sidebar {
  width: var(--sidebar-w);
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  flex-shrink: 0;
  overflow-y: auto;
  position: sticky;
  top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));
}

.sidebar-section { border-bottom: 1px solid var(--sidebar-border); }
.sidebar-section-title {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 10px 6px;
  background: var(--sidebar-title-bg);
  font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--sidebar-title-color);
  border-bottom: 1px solid var(--sidebar-border);
}
.sidebar-section-title i { opacity: 0.6; }
.sidebar-links { padding: 4px 0; }
.sidebar-link {
  display: block;
  padding: 5px 10px 5px 16px;
  font-size: 0.8rem;
  color: var(--sidebar-link);
  transition: background var(--transition);
}
.sidebar-link:hover { background: #f0f4ff; text-decoration: none; }
.sidebar-link.active { background: #e8f0fe; font-weight: 600; }
.sidebar-link-sub {
  padding-left: 24px;
  font-size: 0.77rem;
  color: var(--text-secondary);
}
.sidebar-link-sub:hover { background: #f5f8ff; }

.sidebar-search {
  padding: 8px 10px;
}
.sidebar-search input {
  width: 100%; padding: 5px 8px;
  border: 1px solid var(--input-border);
  border-radius: var(--radius);
  font-size: 0.78rem;
  color: var(--text-primary);
  background: #fff;
}
.sidebar-search input:focus { outline: none; border-color: var(--accent); }
.sidebar-search select {
  width: 100%; padding: 4px 6px;
  border: 1px solid var(--input-border);
  border-radius: var(--radius);
  font-size: 0.78rem;
  color: var(--text-secondary);
  background: #fff; margin-top: 4px;
}
.sidebar-search button {
  width: 100%; margin-top: 6px;
  padding: 4px;
  background: var(--accent); color: #fff;
  border: none; border-radius: var(--radius);
  font-size: 0.78rem; font-weight: 600;
  transition: background var(--transition);
}
.sidebar-search button:hover { background: var(--accent-hover); }

.sidebar-footer {
  padding: 10px;
  border-top: 1px solid var(--sidebar-border);
  font-size: 0.75rem; color: var(--text-muted);
  text-align: center;
}
.sidebar-user {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 10px;
  background: var(--sidebar-title-bg);
  border-top: 1px solid var(--sidebar-border);
  font-size: 0.78rem;
  color: var(--text-secondary);
}
.sidebar-user .user-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--success);
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════
   MAIN CONTENT AREA
══════════════════════════════════════════════════ */
.main-content {
  flex: 1;
  padding: 16px 18px;
  min-width: 0;
}

/* Page title / breadcrumb */
.page-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
  flex-wrap: wrap; gap: 8px;
}
.page-header h1 {
  font-size: 1.3rem; font-weight: 700;
  color: var(--text-primary);
}
.breadcrumb {
  font-size: 0.78rem; color: var(--text-muted);
  margin-bottom: 12px;
  display: flex; align-items: center; gap: 5px;
}
.breadcrumb a { color: var(--sidebar-link); font-size: 0.78rem; }
.breadcrumb span { color: var(--text-muted); }

/* ══════════════════════════════════════════════════
   PANELS / CONTENT BOXES
══════════════════════════════════════════════════ */
.panel {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 16px;
}
.panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  background: var(--panel-header-bg);
  border-bottom: 1px solid var(--panel-border);
  border-radius: var(--radius) var(--radius) 0 0;
}
.panel-title {
  font-size: 0.88rem; font-weight: 700;
  color: var(--panel-header-color);
  display: flex; align-items: center; gap: 6px;
}
.panel-body { padding: 14px; }
.panel-body-flush { padding: 0; }
.panel-footer {
  padding: 10px 14px;
  background: var(--panel-header-bg);
  border-top: 1px solid var(--panel-border);
  border-radius: 0 0 var(--radius) var(--radius);
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
}

/* ══════════════════════════════════════════════════
   KPI STATS ROW
══════════════════════════════════════════════════ */
.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.stat-box {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow);
  display: flex; align-items: center; gap: 12px;
  position: relative;
  overflow: hidden;
}
.stat-box::before {
  content: '';
  position: absolute; top: 0; left: 0; bottom: 0;
  width: 4px;
  background: var(--stat-color, var(--accent));
}
.stat-box-icon {
  width: 40px; height: 40px;
  border-radius: 8px;
  background: var(--stat-icon-bg, var(--accent-light));
  color: var(--stat-color, var(--accent));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; flex-shrink: 0;
}
.stat-box-label { font-size: 0.73rem; color: var(--text-muted); font-weight: 500; }
.stat-box-value { font-size: 1.6rem; font-weight: 800; line-height: 1; margin: 2px 0; }
.stat-box-sub { font-size: 0.72rem; color: var(--text-muted); }

/* ══════════════════════════════════════════════════
   WHMCS-STYLE FORM LAYOUT (Solid Grid)
══════════════════════════════════════════════════ */
.whmcs-form-grid {
  display: grid;
  grid-template-columns: 160px 1fr 160px 1fr;
  align-items: stretch;
  background: #fff;
  border: 1px solid #ddd;
  border-bottom: none;
}
.wf-label {
  background: #f9f9f9;
  padding: 10px 15px;
  text-align: right;
  font-size: 0.82rem;
  color: #333;
  border-bottom: 1px solid #ddd;
  border-right: 1px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.wf-input {
  padding: 10px 15px;
  background: #fff;
  border-bottom: 1px solid #ddd;
  border-right: 1px solid #ddd;
  display: flex;
  align-items: center;
  min-width: 0;
}
.wf-input:nth-child(4n) {
  border-right: none;
}
.form-input {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--input-border);
  border-radius: var(--radius);
  background: var(--input-bg);
  color: var(--text-primary);
  font-size: 0.82rem;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-input:focus {
  border-color: var(--input-focus);
  box-shadow: 0 0 0 2px rgba(37,99,235,0.12);
}
.form-input::placeholder { color: #aaa; }
select.form-input { cursor: pointer; }
textarea.form-input { resize: vertical; min-height: 60px; }
.form-input-hint { font-size: 0.73rem; color: var(--text-muted); margin-top: 2px; }

/* ══════════════════════════════════════════════════
   RÉGLAGES / SETTINGS ROWS (Inline toggles)
══════════════════════════════════════════════════ */
.wf-reglages-row {
  display: flex;
  padding: 12px 20px;
  gap: 16px;
}
.wf-reglages-label {
  width: 144px;
  text-align: right;
  font-size: 0.82rem;
  color: var(--text-secondary);
  font-weight: 500;
  flex-shrink: 0;
}
.wf-reglages-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wf-toggle-row {
  display: flex;
  gap: 24px;
  align-items: center;
}
.wf-toggle-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--text-primary);
  cursor: pointer;
}
.wf-toggle-text {
  color: var(--text-secondary);
}
.wf-toggle-wrap {
  display: inline-flex;
  align-items: center;
}

/* Toggle Switches */
.toggle-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
/* .wf-toggle-wrap is the wrapper clients.html actually uses around these same
   input+.toggle-track/.toggle-thumb toggles — paired here so checking one turns the
   track blue and slides the thumb right, the same as the .toggle-switch pattern does. */
.toggle-switch input[type="checkbox"], .wf-toggle-wrap input[type="checkbox"] { display: none; }
.toggle-track {
  width: 40px; height: 20px;
  border-radius: 10px;
  background: #ccc;
  position: relative;
  transition: background var(--transition);
  flex-shrink: 0;
}
.toggle-switch input:checked + .toggle-track, .wf-toggle-wrap input:checked + .toggle-track { background: var(--accent); }
.toggle-thumb {
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: transform var(--transition);
}
.toggle-switch input:checked + .toggle-track .toggle-thumb, .wf-toggle-wrap input:checked + .toggle-track .toggle-thumb { transform: translateX(20px); }
.toggle-label { font-size: 0.8rem; color: var(--text-secondary); }
.toggle-on-label  { font-size: 0.7rem; font-weight: 700; color: #fff; background: var(--accent); padding: 1px 5px; border-radius: 3px; }
.toggle-off-label { font-size: 0.7rem; font-weight: 700; color: #fff; background: #999; padding: 1px 5px; border-radius: 3px; }

/* Settings toggles grid */
.settings-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px 16px;
  padding: 10px 14px;
}
.settings-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0;
}
.settings-item-label { font-size: 0.8rem; color: var(--text-secondary); }

/* ══════════════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 14px;
  border-radius: var(--radius);
  font-size: 0.82rem; font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
  text-decoration: none !important;
}
.btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent-hover);
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-secondary {
  background: #f8f9fa;
  color: var(--text-secondary);
  border-color: var(--border);
}
.btn-secondary:hover { background: #e9ecef; }
.btn-success {
  background: var(--success);
  color: #fff;
  border-color: #15803d;
}
.btn-success:hover { background: #15803d; }
.btn-danger {
  background: var(--danger);
  color: #fff;
  border-color: #b91c1c;
}
.btn-danger:hover { background: #b91c1c; }
.btn-warning {
  background: var(--warning);
  color: #fff;
  border-color: #b45309;
}
.btn-sm { padding: 4px 10px; font-size: 0.76rem; }
.btn-xs { padding: 2px 7px; font-size: 0.72rem; }

/* ══════════════════════════════════════════════════
   TABLE
══════════════════════════════════════════════════ */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.83rem; }
thead tr { background: var(--panel-header-bg); }
thead th {
  text-align: left; padding: 8px 12px;
  font-weight: 600; font-size: 0.78rem;
  color: inherit;
  border-bottom: 2px solid var(--panel-border);
  white-space: nowrap;
}
tbody tr { border-bottom: 1px solid #f0f2f4; transition: background var(--transition); }
tbody tr:hover { background: #f8faff; }
tbody td { padding: 9px 12px; color: var(--text-secondary); vertical-align: middle; }
tbody td:first-child { color: var(--text-primary); font-weight: 500; }
.table-actions { display: flex; gap: 4px; }

/* ══════════════════════════════════════════════════
   BADGES / STATUS
══════════════════════════════════════════════════ */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 0.72rem; font-weight: 600;
  text-transform: capitalize; white-space: nowrap;
}
.badge-active,   .badge-paid      { background: var(--success-light); color: var(--success); border: 1px solid #bbf7d0; }
.badge-pending, .badge-unpaid     { background: var(--warning-light);  color: var(--warning);  border: 1px solid #fde68a; }
.badge-overdue,  .badge-critical  { background: var(--danger-light);   color: var(--danger);   border: 1px solid #fecaca; }
.badge-suspended,.badge-expired   { background: #f3e8ff;               color: #7c3aed;         border: 1px solid #ddd6fe; }
.badge-cancelled,.badge-closed,
.badge-inactive                   { background: #f3f4f6;               color: #6b7280;         border: 1px solid #e5e7eb; }
.badge-open                       { background: var(--accent-light);   color: var(--accent);   border: 1px solid #bfdbfe; }
.badge-in_progress                { background: var(--info-light);     color: var(--info);     border: 1px solid #a5f3fc; }
.badge-resolved                   { background: var(--success-light);  color: var(--success);  border: 1px solid #bbf7d0; }
.badge-admin                      { background: #f3e8ff; color: #7c3aed; border: 1px solid #ddd6fe; }
.badge-agent                      { background: var(--accent-light); color: var(--accent); border: 1px solid #bfdbfe; }
.badge-technician                 { background: var(--info-light); color: var(--info); border: 1px solid #a5f3fc; }
.badge-critical                   { background: #fee2e2; color: #dc2626; border: 1px solid #fecaca; } /* Rouge */
.badge-high                       { background: #ffedd5; color: #ea580c; border: 1px solid #fed7aa; } /* Orange */
.badge-medium                     { background: #ffedd5; color: #ea580c; border: 1px solid #fed7aa; } /* Orange */
.badge-low                        { background: #fef08a; color: #a16207; border: 1px solid #fde047; } /* Jaune */
/* ══════════════════════════════════════════════════
   KANBAN BOARD
══════════════════════════════════════════════════ */
.kanban-board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px; align-items: start;
}
.kanban-col {
  background: #f5f7fa;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  min-height: 200px;
}
.kanban-col-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px;
  background: var(--panel-header-bg);
  border-bottom: 1px solid var(--panel-border);
  border-radius: var(--radius) var(--radius) 0 0;
}
.kanban-col-title { font-size: 0.8rem; font-weight: 700; color: var(--text-primary); }
.kanban-count {
  background: #e5e7eb;
  border-radius: 99px;
  padding: 1px 7px;
  font-size: 0.72rem; font-weight: 700;
  color: var(--text-secondary);
}
.kanban-cards { padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.kanban-card {
  background: #fff;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  padding: 10px;
  cursor: pointer;
  transition: box-shadow var(--transition), border-color var(--transition);
}
.kanban-card:hover { box-shadow: var(--shadow-md); border-color: var(--accent); }
.kanban-card-title { font-size: 0.83rem; font-weight: 600; margin-bottom: 5px; }
.kanban-card-meta { font-size: 0.75rem; color: var(--text-muted); display: flex; justify-content: space-between; }

/* ══════════════════════════════════════════════════
   MODAL
══════════════════════════════════════════════════ */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45);
  display: none; align-items: center; justify-content: center;
  z-index: 2000;
}
.modal-overlay.open { display: flex; }
.modal {
  background: #fff;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  width: 100%; max-width: 540px;
  max-height: 90vh; overflow-y: auto;
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
  animation: modalIn 0.18s ease;
}
.modal-lg { max-width: 860px; }
/* Panneau latéral (lot AJ : « Changer de modem », « Déménagement ») : même mécanique que les
   fenêtres (openModal / closeModal), collé au bord droit de l'écran. */
.modal-overlay.panneau-lateral { justify-content: flex-end; align-items: stretch; }
.modal-overlay.panneau-lateral .modal {
  max-width: 460px; max-height: 100vh; height: 100vh;
  border-radius: 0; animation: panneauIn 0.18s ease;
}
@keyframes panneauIn { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.champ-verrouille { background: #eef1f4 !important; color: #6b7280 !important; cursor: not-allowed; }
.pastille-statut { display: inline-block; border-radius: 3px; padding: 1px 6px; font-size: 0.68rem; color: #fff; white-space: nowrap; }
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px;
  background: var(--panel-header-bg);
  border-bottom: 1px solid var(--panel-border);
  border-radius: var(--radius) var(--radius) 0 0;
}
.modal-header h3 { font-size: 0.92rem; font-weight: 700; }
.modal-close {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #e5e7eb; border: none;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary); font-size: 0.85rem;
  transition: background var(--transition);
}
.modal-close:hover { background: var(--danger-light); color: var(--danger); }
.modal-body { padding: 16px; }
.modal-footer {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  padding: 10px 16px;
  background: var(--panel-header-bg);
  border-top: 1px solid var(--panel-border);
  border-radius: 0 0 var(--radius) var(--radius);
}

/* ══════════════════════════════════════════════════
   FILTERS BAR
══════════════════════════════════════════════════ */
.filters-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--panel-header-bg);
  border-bottom: 1px solid var(--panel-border);
}
.search-box {
  display: flex; align-items: center; gap: 6px;
  background: #fff;
  border: 1px solid var(--input-border);
  border-radius: var(--radius);
  padding: 5px 10px;
  flex: 1; min-width: 200px;
}
.search-box input {
  background: none; border: none; outline: none;
  color: var(--text-primary); font-size: 0.82rem; width: 100%;
}
.search-box input::placeholder { color: #aaa; }
.search-box i { color: #aaa; font-size: 0.82rem; }
.filter-select {
  background: #fff;
  border: 1px solid var(--input-border);
  border-radius: var(--radius);
  padding: 5px 10px;
  color: var(--text-secondary); font-size: 0.8rem;
  outline: none; cursor: pointer;
}
.filter-select:focus { border-color: var(--accent); }

/* ══════════════════════════════════════════════════
   CHARTS
══════════════════════════════════════════════════ */
.chart-wrap { position: relative; height: 220px; }

/* ══════════════════════════════════════════════════
   TOAST
══════════════════════════════════════════════════ */
#toast-container {
  position: fixed; bottom: 20px; right: 20px;
  display: flex; flex-direction: column; gap: 8px;
  z-index: 9999;
}
.toast {
  display: flex; align-items: center; gap: 10px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
  min-width: 240px;
  box-shadow: var(--shadow-md);
  animation: slideInR 0.25s ease;
  font-size: 0.82rem;
}
.toast.success { border-left: 3px solid var(--success); }
.toast.error   { border-left: 3px solid var(--danger); }
.toast-icon.success { color: var(--success); }
.toast-icon.error   { color: var(--danger); }

/* ══════════════════════════════════════════════════
   LOGIN PAGE
══════════════════════════════════════════════════ */
.login-page {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background: var(--content-bg);
  padding-top: 0;
}
.login-wrap {
  width: 100%; max-width: 380px;
}
.login-logo-area {
  text-align: center; margin-bottom: 20px;
}
.login-logo-box {
  width: 52px; height: 52px;
  background: linear-gradient(135deg, #2563eb, #0891b2);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; margin: 0 auto 10px;
  box-shadow: 0 4px 12px rgba(37,99,235,0.3);
}
.login-logo-area h1 {
  font-size: 1.2rem; font-weight: 800; color: var(--text-primary);
}
.login-logo-area p { color: var(--text-muted); font-size: 0.82rem; margin-top: 2px; }
.login-card {
  background: #fff;
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.login-card-header {
  background: var(--topbar-bg);
  color: #fff;
  padding: 10px 16px;
  font-size: 0.88rem; font-weight: 600;
}
.login-card-body { padding: 20px; }
.login-form { display: flex; flex-direction: column; gap: 12px; }
.login-form-group { display: flex; flex-direction: column; gap: 4px; }
.login-form-label { font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); }

/* ══════════════════════════════════════════════════
   ACTIVITY FEED
══════════════════════════════════════════════════ */
.activity-list { display: flex; flex-direction: column; }
.activity-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 14px;
  border-bottom: 1px solid #f0f2f4;
  font-size: 0.8rem;
}
.activity-item:last-child { border-bottom: none; }
.activity-dot {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.78rem; flex-shrink: 0;
}
.activity-dot.ticket { background: var(--accent-light); color: var(--accent); }
.activity-dot.invoice { background: var(--success-light); color: var(--success); }
.activity-time { font-size: 0.72rem; color: var(--text-muted); margin-top: 2px; }

/* ══════════════════════════════════════════════════
   PLAN CARDS
══════════════════════════════════════════════════ */
.plan-card {
  background: #fff;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow);
  transition: box-shadow var(--transition);
}
.plan-card:hover { box-shadow: var(--shadow-md); }
.plan-card-name { font-size: 0.92rem; font-weight: 700; }
.plan-card-speed { font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; }
.plan-card-price { font-size: 1.5rem; font-weight: 800; color: var(--accent); margin: 8px 0 4px; }

/* ══════════════════════════════════════════════════
   TEAM CARDS
══════════════════════════════════════════════════ */
.team-card {
  background: #fff;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 10px;
}
.team-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.95rem; font-weight: 700; color: #fff;
  background: var(--accent);
}

/* ══════════════════════════════════════════════════
   EMPTY STATE
══════════════════════════════════════════════════ */
.empty-state {
  text-align: center; padding: 40px 20px;
  color: var(--text-muted);
}
.empty-state i { font-size: 2.5rem; margin-bottom: 10px; display: block; opacity: 0.4; }
.empty-state p { font-size: 0.85rem; }

/* ══════════════════════════════════════════════════
   LOADER
══════════════════════════════════════════════════ */
.loader {
  display: inline-block; width: 16px; height: 16px;
  border: 2px solid #e5e7eb;
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

/* ══════════════════════════════════════════════════
   SECTION DIVIDER
══════════════════════════════════════════════════ */
.section-divider {
  background: var(--panel-header-bg);
  border-top: 1px solid var(--panel-border);
  border-bottom: 1px solid var(--panel-border);
  padding: 6px 14px;
  font-size: 0.78rem; font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.3px;
  margin: 0 -14px;
}

/* ══════════════════════════════════════════════════
   RADIO / CHECKBOX CUSTOM
══════════════════════════════════════════════════ */
.radio-label, .check-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.82rem; color: var(--text-secondary);
  cursor: pointer; margin-bottom: 4px;
}

/* ══════════════════════════════════════════════════
   MISC
══════════════════════════════════════════════════ */
.text-muted  { color: var(--text-muted); }
.text-sm     { font-size: 0.78rem; }
.mt-8        { margin-top: 8px; }
.mt-12       { margin-top: 12px; }
.mt-16       { margin-top: 16px; }
.flex        { display: flex; }
.gap-8       { gap: 8px; }
.gap-12      { gap: 12px; }
.align-center{ align-items: center; }
.justify-between { justify-content: space-between; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 900px) { .grid-2,.grid-3,.grid-4 { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════════════
   ANIMATIONS
══════════════════════════════════════════════════ */
@keyframes spin    { to { transform: rotate(360deg); } }
@keyframes modalIn { from { transform: translateY(-12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes slideInR{ from { transform: translateX(30px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* ══════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .sidebar { display: none; }
  .main-content { padding: 10px; }
  .form-section { grid-template-columns: 1fr; gap: 0; }
  .form-row-label { width: 110px; }
  .kanban-board { grid-template-columns: 1fr 1fr; }
  .settings-grid { grid-template-columns: 1fr 1fr; }
}

/* ══════════════════════════════════════════════════
   WHMCS PROFILE VIEW (NEW)
══════════════════════════════════════════════════ */
/* Tab Bar (Horizontal, WHMCS Style) */
.whmcs-profile-layout {
  display: block;
}
.profile-tabs {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 2px;
  border-bottom: 1px solid var(--panel-border);
  margin-bottom: 15px;
}
.profile-tab {
  padding: 8px 15px;
  background: #f8f9fa;
  border: 1px solid var(--panel-border);
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  font-size: 0.82rem; font-weight: 500; color: #555;
  cursor: pointer; transition: background var(--transition);
  position: relative;
  bottom: -1px;
}
.profile-tab:hover { background: #fff; }
.profile-tab.active {
  background: #fff;
  color: var(--text-primary);
  font-weight: 700;
  border-bottom: 1px solid #fff;
}

/* Profile Content Area */
.profile-content-area { width: 100%; }

/* Profile Summary Top Alerts */
.profile-alerts {
  display: flex; gap: 15px; justify-content: flex-end;
  font-size: 0.75rem; color: #555; margin-bottom: 12px;
}
.profile-alert-item { display: flex; align-items: center; gap: 4px; }
.profile-alert-val { font-weight: 700; color: var(--danger); }

/* Profile Grid */
.profile-summary-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px;
  margin-bottom: 15px;
}
.profile-block {
  background: #fff; border: 1px solid var(--panel-border); border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  display: flex; flex-direction: column;
}
.profile-block-header {
  padding: 8px 12px; background: #f0f4f9;
  border-bottom: 1px solid var(--panel-border);
  font-size: 0.82rem; font-weight: 700; color: #2c3e50; text-align: center;
}
.profile-block-body { padding: 12px; font-size: 0.78rem; flex: 1; }

/* Profile Info Grid */
.profile-info-row { display: flex; align-items: flex-start; margin-bottom: 6px; }
.profile-info-label { width: 110px; color: #666; font-size: 0.75rem; flex-shrink: 0; }
.profile-info-val { font-weight: 500; color: #333; }

/* Profile Action List */
.profile-action-list { display: flex; flex-direction: column; gap: 5px; }
.profile-action-link { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; color: #1a4a8a; }
.profile-action-link i { width: 12px; height: 12px; }

/* Stats Table within Blocks */
.profile-stat-table { width: 100%; font-size: 0.78rem; border-collapse: collapse; }
.profile-stat-table td { padding: 5px 10px; border-bottom: 1px solid #f0f0f0; vertical-align: top; }
.profile-stat-table td:first-child { color: #666; width: 50%; }
.profile-stat-table td:nth-child(2) { text-align: left; font-weight: 500; color: #333; }
.profile-stat-table tr:last-child td { border-bottom: none; }

/* WHMCS Dark Blue Table Headers (Produits/Modules) */
.whmcs-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; border: 1px solid #c5d0dc; margin-bottom: 15px; }
.whmcs-table th {
  background: #1a4a8a; color: #fff;
  padding: 8px 10px; text-align: left;
  font-weight: 600; font-size: 0.75rem; border-right: 1px solid #3366a6;
}
.whmcs-table th:last-child { border-right: none; }
.whmcs-table td {
  padding: 8px 10px; border-bottom: 1px solid #e0e6ed;
  background: #fff; color: #333;
}
.whmcs-table tr:nth-child(even) td { background: #f9fbfd; }
.whmcs-table-title {
  background: #e9ecef; color: #333; font-weight: 700; font-size: 0.8rem;
  padding: 6px 10px; text-align: center; border: 1px solid #c5d0dc; border-bottom: none;
}

/* WHMCS Edit Product Tabs & Form Grid */
.nav-tabs {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  border-bottom: 1px solid #ddd;
}
.nav-tabs li {
  margin-bottom: -1px;
}
.nav-tabs li a {
  display: block;
  padding: 8px 15px;
  background: #f8f8f8;
  border: 1px solid #ddd;
  border-bottom: none;
  border-radius: 3px 3px 0 0;
  color: #337ab7;
  text-decoration: none;
  font-size: 0.85rem;
  margin-right: 2px;
}
.nav-tabs li.active a {
  background: #fff;
  border-bottom: 1px solid #fff;
  color: #555;
  cursor: default;
  font-weight: 500;
}

.ptab-content {
  display: grid;
  grid-template-columns: 250px 1fr;
}

/* RBAC UI Hiding */
body.role-agent .admin-only { display: none !important; }
body.role-agent .no-agent { display: none !important; }
body.role-technician .admin-only { display: none !important; }
/* A reseller session (crmUser.group_name === 'Revendeur') never had this rule at all, so
   every .admin-only element (staff management, billing settings, delete buttons, etc.)
   stayed visible in their nav and pages even though the routes behind them are now locked
   down server-side — this is the UI-level half of that fix. */
body.role-revendeur .admin-only { display: none !important; }
body.role-revendeur .no-agent { display: none !important; }
/* Inverse of .admin-only — hidden by default, shown only for a reseller session. */
.revendeur-only { display: none !important; }
body.role-revendeur .revendeur-only { display: block !important; }
/* Lot BO (Imad, 25/09/2026 : « sur leur tableau de bord, mettez quelque chose […] qu'eux, ils
   peuvent voir ») : le bloc des employés du tableau de bord (#bloc-employe). Caché par défaut,
   montré à l'agent et au technicien seulement — jamais à l'administrateur (il a ses propres
   panneaux ; la route lui permet un aperçu, la page ne le charge pas) ni au revendeur (son bloc est
   revendeur-only). Comme .revendeur-only, il met display:block : à poser sur un bloc, jamais sur
   une grille ni sur une rangée flex. */
.employe-only { display: none !important; }
body.role-agent .employe-only,
body.role-technician .employe-only { display: block !important; }
/* Hidden ONLY for a reseller session — unlike .admin-only, agent/technician still see these. */
body.role-revendeur .revendeur-hide { display: none !important; }
/* Visible to admin AND revendeur, hidden from agent/technician — for pages backed by
   requireAdminOrReseller (admin+revendeur only, not staff), like "Commandes acceptées". */
body.role-agent .admin-or-revendeur { display: none !important; }
body.role-technician .admin-or-revendeur { display: none !important; }
/* Chiffres de l'entreprise (règle d'Imad, 18/09/2026) : les listes globales des factures
   (invoices.html, libellée « Liste des transactions » dans le menu) et des transactions
   (transactions.html) sont réservées à l'administrateur, et au revendeur pour les siennes.
   L'agent et le technicien gardent les factures et transactions d'un client dans sa fiche.
   Le menu étant recopié dans chaque page, on masque ces entrées ici, une seule fois. */
body.role-agent .topbar-dropdown a[href^="invoices.html"],
body.role-technician .topbar-dropdown a[href^="invoices.html"],
body.role-agent .topbar-dropdown a[href^="transactions.html"],
body.role-technician .topbar-dropdown a[href^="transactions.html"],
body.role-agent .sidebar a[href^="invoices.html"],
body.role-technician .sidebar a[href^="invoices.html"],
body.role-agent .sidebar a[href^="transactions.html"],
body.role-technician .sidebar a[href^="transactions.html"] { display: none !important; }
/* Même règle pour le journal global des courriels (emails.html), le traitement des cartes hors
   ligne (offline-cc.html : comptes à recevoir, réservé à l'administrateur et au revendeur) et
   les listes de commandes actives ou annulées (un employé ne traite que celles en attente). */
body.role-agent a[href="emails.html"],
body.role-technician a[href="emails.html"],
body.role-agent a[href="offline-cc.html"],
body.role-technician a[href="offline-cc.html"],
body.role-agent a[href="orders.html?status=active"],
body.role-technician a[href="orders.html?status=active"],
body.role-agent a[href="orders.html?status=cancelled"],
body.role-technician a[href="orders.html?status=cancelled"] { display: none !important; }
/* Le sous-menu « Factures » ne contient que ces liens : on le masque en entier. Règle à part,
   car un navigateur qui ne connaît pas :has() ignorerait toute la liste ci-dessus avec elle. */
body.role-agent .has-submenu:has(a[href^="invoices.html"]),
body.role-technician .has-submenu:has(a[href^="invoices.html"]) { display: none !important; }
/* Revendeur dont les clients ne sont pas gérés dans le CRM (isp_clients.gere_clients_crm =
   false), niveau « espace client » (règles d'Imad, 18/09/2026) : il garde ses clients
   (clients.html ; « Ajouter un client » l'envoie au formulaire de demande, manage-order.html),
   ses commandes (orders.html, manage-order.html), ses factures, ses réglages et ses prix de
   revente. Masqués : ce qui gère ou facture ses clients, et les journaux globaux. Le serveur
   refuse de toute façon le reste (porteeRevendeur). La classe revendeur-gestion-only masque,
   dans la fiche client, les actions qu'il n'a pas (SMS, courriel, remarques, billets…) ; les
   cartes de ses clients sont masquées par clients.js (les siennes restent sur sa propre fiche).
   Lot BS, § 5 (Imad, 25 sept. 2026) : « Connexion client » reste visible au revendeur à qui Imad a
   donné le contrôle direct des connexions (classe revendeur-controle-connexions, posée par
   js/api.js) — la page ne lui laisse que l'interrupteur On/Off de SES clients. */
body.revendeur-sans-gestion a[href="users.html"],
body.revendeur-sans-gestion:not(.revendeur-controle-connexions) a[href="client-connections.html"],
body.revendeur-sans-gestion a[href="reseller-orders.html"],
body.revendeur-sans-gestion a[href="orders.html?view=reseller"],
body.revendeur-sans-gestion a[href="offline-cc.html"],
body.revendeur-sans-gestion a[href="tickets.html"],
body.revendeur-sans-gestion a[href="emails.html"],
body.revendeur-sans-gestion a[href="sms-clients.html"],
body.revendeur-sans-gestion .revendeur-gestion-only,
/* Fiche d'une commande (manage-order.html) : il suit ses commandes, sans les annuler, les
   supprimer ni en facturer le client. */
body.revendeur-sans-gestion #btn-generate-client-invoice,
body.revendeur-sans-gestion #btn-cancel-order,
body.revendeur-sans-gestion #btn-cancel-refund-order,
body.revendeur-sans-gestion #btn-mark-fraud,
body.revendeur-sans-gestion #btn-hold-order,
body.revendeur-sans-gestion #btn-delete-order { display: none !important; }
/* Un revendeur (les deux niveaux) sur SA PROPRE fiche (clients.js, viewClientProfile pose la
   classe sur #view-profile) : le serveur n'y permet ni courriels, ni SMS, ni remarques, ni
   emprunt d'identité, ni fermeture — ces blocs et les onglets Courriels, Remarques et Journal
   sont masqués au lieu d'afficher « Client introuvable ». Même classe pour les boutons de ses
   lignes PBX (supprimer, renvoi, courriel, LNP, ajout) : lecture seule. L'onglet Billets reste,
   en lecture seule (clients.js, loadClientTicketsTab). */
#view-profile.fiche-propre-revendeur .masque-fiche-propre-revendeur { display: none !important; }

/* ══════════════════════════════════════════════════
   CONFIGURATION PBX SUR LA CARTE SERVICE
   Le bloc prend toute la largeur de la ligne ; les numéros se rangent côte à côte quand la
   place le permet, et le bouton d'ajout vient dessous plutôt qu'à côté.
══════════════════════════════════════════════════ */
.pbx-zone { flex-direction: column; align-items: stretch; gap: 10px; }
.pbx-blocs { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 10px; width: 100%; }
.pbx-blocs > div { margin-bottom: 0 !important; }
.pbx-blocs:empty { display: none; }

/* ══════════════════════════════════════════════════
   LOT BR — CHAQUE NUMÉRO RATTACHÉ À SON SERVICE (clients.js, chargerNumerosPbxServicesBR)
   Imad, 25 sept. 2026 : « chaque numéro, tu le mets directement dans son compte… c'est mieux
   que ce soit clair. » Nom de facturation sous le forfait dans les petites boîtes des services,
   « Rattacher à… » dans le bloc d'un numéro, bloc « Numéros non rattachés » sous les cartes,
   numéros groupés par service dans la vue en lecture seule du Profil.
══════════════════════════════════════════════════ */
.service-box-sous-titre { font-size: 0.72rem; font-weight: 400; opacity: 0.8; margin-top: 2px; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pbx-chargement { font-size: 12px; color: #888; }
.pbx-rattachement { display: flex; flex-direction: column; gap: 4px; padding: 8px; background: #f4f7fb; border: 1px solid #d8e2ee; border-radius: 4px; }
.pbx-rattachement-titre { font-size: 11px; color: #555; font-weight: 600; }
.pbx-rattachement-ligne { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.pbx-rattachement-choix { flex: 1 1 220px; min-width: 0; max-width: 100%; box-sizing: border-box; }
.pbx-rattachement-aide { font-size: 11px; color: #1c4d79; }
.pbx-rattache-note { font-size: 12px; color: #1c4d79; background: #eef3fa; border: 1px solid #cfdcec; border-radius: 4px; padding: 5px 8px; }
/* « Utiliser « … » » sous « Nom de la compagnie » : le nom suggéré n'est jamais prérempli (il devient
   le nom d'appelant au central) ; un nom long passe à la ligne au lieu d'élargir le bloc. */
.pbx-nom-propose { margin-top: 4px; max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-align: left; }
.pbx-non-rattaches-titre { background: #fdf3e1; text-align: center; border: 1px solid var(--panel-border); }
.pbx-non-rattaches-corps { padding: 12px; border: 1px solid var(--panel-border); border-top: none; }
.pbx-non-rattaches-note { font-size: 0.78rem; color: #8a6d3b; margin-bottom: 10px; }
.pbx-groupe-lecture { margin-bottom: 10px; }
.pbx-groupe-lecture:last-child { margin-bottom: 0; }
.pbx-groupe-titre { font-size: 11px; font-weight: 600; color: #31708f; margin-bottom: 4px; overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .pbx-rattachement-choix { flex-basis: 100%; }
  .service-box-sous-titre { max-width: 160px; }
}

/* ══════════════════════════════════════════════════
   DÉTAIL AU SURVOL DES TUILES DU TABLEAU DE BORD (dashboard.js, chargerDetailsKpi)
   ══════════════════════════════════════════════════ */
.whmcs-kpi[data-kpi] { position: relative; cursor: help; outline: none; }
/* La rangée est en overflow:hidden (style en ligne de dashboard.html) : sans ceci l'infobulle est coupée. */
#kpi-grid.whmcs-kpi-row { overflow: visible; }
#kpi-grid .whmcs-kpi:first-child { border-radius: 4px 0 0 4px; }
#kpi-grid .whmcs-kpi:last-child { border-radius: 0 4px 4px 0; }
.kpi-popover {
  display: none; position: absolute; top: calc(100% + 6px); left: 8px; z-index: 60;
  min-width: 290px; max-width: 380px; max-height: 420px; overflow-y: auto;
  background: #fff; border: 1px solid #d4dae2; border-radius: 6px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.18); padding: 12px 14px;
  font-size: 0.8rem; color: #334155; text-align: left; cursor: default;
}
.kpi-popover.ouvert { display: block; }
/* Le panneau « Activités automatiques » est en overflow:hidden : sans ceci l'infobulle du
   détail est coupée. Elle s'ouvre vers la gauche, le panneau étant collé au bord droit. */
#panneau-cron, #panneau-cron .dash-panel-body { overflow: visible; }
.cron-ligne .cron-popover { top: calc(100% - 2px); left: auto; right: 4px; min-width: 250px; max-width: 330px; }
.whmcs-kpi[data-kpi]:last-child .kpi-popover { left: auto; right: 8px; }
.kpi-pop-titre { font-weight: 700; color: #0f172a; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid #e2e8f0; }
.kpi-pop-ligne { display: flex; justify-content: space-between; gap: 16px; padding: 3px 0; }
.kpi-pop-ligne strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpi-pop-item { padding: 5px 0; border-bottom: 1px solid #f1f5f9; }
.kpi-pop-sous { font-size: 0.72rem; color: #94a3b8; }
.kpi-pop-lien { display: inline-block; margin-top: 8px; font-size: 0.76rem; color: #1c4d79; text-decoration: none; font-weight: 600; }
.kpi-pop-lien:hover { text-decoration: underline; }

/* ══════════════════════════════════════════════════
   LOT BN — CONTENU DES COURRIELS ENVOYÉS (clients.js, emails.js)
   Imad, 25 sept. 2026 : « Je ne veux pas juste voir des tirets. » Colonne « Contenu » (bouton
   « Voir le courriel », ou « Contenu non conservé » en gris expliqué au survol) et visionneuse :
   en-tête en texte, puis le courriel dans un cadre isolé (iframe sandbox="", srcdoc).
══════════════════════════════════════════════════ */
.btn-voir-courriel {
  padding: 3px 9px; font-size: 0.75rem; font-weight: 600; line-height: 1.3;
  border: 1px solid #1a4d80; border-radius: 4px; background: #fff; color: #1a4d80;
  cursor: pointer; white-space: nowrap;
}
.btn-voir-courriel:hover, .btn-voir-courriel:focus-visible { background: #1a4d80; color: #fff; }
.courriel-sujet-lien {
  padding: 0; border: 0; background: none; font: inherit; color: #1a4d80; text-align: left;
  cursor: pointer; text-decoration: underline dotted; text-underline-offset: 2px;
}
.courriel-sujet-lien:hover { text-decoration: underline; }
.courriel-sans-contenu { color: #94a3b8; font-size: 0.75rem; cursor: help; border-bottom: 1px dotted #cbd5e1; }
.courriel-cellule-contenu { line-height: 1.9; }
.modal.courriel-apercu { max-width: 920px; }
.courriel-apercu-entete {
  display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 4px 12px;
  margin: 0 0 12px; font-size: 0.8rem;
}
.courriel-apercu-entete dt { color: #64748b; font-weight: 600; }
.courriel-apercu-entete dd { margin: 0; color: #1e293b; overflow-wrap: anywhere; }
.courriel-apercu-avis {
  margin-bottom: 8px; padding: 7px 10px; border-radius: 4px;
  background: #fef9c3; color: #854d0e; font-size: 0.78rem;
}
.courriel-apercu-cadre {
  display: block; width: 100%; height: 62vh; min-height: 280px;
  border: 1px solid #d4dae2; border-radius: 4px; background: #fff;
}
.courriel-apercu-note { margin: 6px 0 0; font-size: 0.72rem; color: #94a3b8; }
.courriel-apercu-message { margin: 0; padding: 18px 4px; font-size: 0.85rem; color: #64748b; }
/* Téléphone (375 px) : fenêtre pleine largeur et pleine hauteur, courriel sur 70 % de l'écran. */
@media (max-width: 767.98px) {
  .modal-overlay.courriel-apercu-fond { padding: 0; align-items: stretch; }
  .modal-overlay.courriel-apercu-fond .modal.courriel-apercu {
    width: 100%; max-width: none; height: 100vh; height: 100dvh;
    max-height: 100vh; max-height: 100dvh; border-radius: 0;
  }
  .courriel-apercu-entete { grid-template-columns: 64px minmax(0, 1fr); }
  .courriel-apercu-cadre { height: 70vh; min-height: 0; }
  .btn-voir-courriel { min-height: 44px; padding: 6px 12px; }
}

/* ══════════════════════════════════════════════════
   LOT BN (§ 1.7) — AJOUTS DÉJÀ FACTURÉS (clients.js, loadClientAddons)
   Imad, 25 sept. 2026, devant 7 lignes « Une fois / Facturé » de la fiche de Lamarre : « Oui,
   ajoute ces deux lots. » Sous le tableau « Addons / Équipements », une section repliée
   « Déjà facturés (N) » ; à la place de la corbeille, « Sur une facture » en gris, expliqué au
   survol (la supprimer ne changerait pas la facture et effacerait sa trace).
══════════════════════════════════════════════════ */
.ajouts-factures { margin: -6px 0 15px; border: 1px solid #c5d0dc; background: #f8fafc; }
.ajouts-factures > summary {
  padding: 7px 10px; font-size: 0.78rem; font-weight: 600; color: #1a4d80;
  cursor: pointer; user-select: none;
}
.ajouts-factures > summary:hover { background: #eef2f7; }
.ajouts-factures > summary:focus-visible { outline: 2px solid #1a4d80; outline-offset: -2px; }
.ajouts-factures[open] > summary { border-bottom: 1px solid #c5d0dc; }
.ajouts-factures-note { margin: 0; padding: 6px 10px; font-size: 0.72rem; color: #64748b; }
.ajouts-factures .whmcs-table { margin-bottom: 0; border-left: 0; border-right: 0; border-bottom: 0; }
.ajout-sur-facture { color: #94a3b8; font-size: 0.7rem; cursor: help; border-bottom: 1px dotted #cbd5e1; white-space: nowrap; }
/* Téléphone : une cible tactile de 44 px pour ouvrir la section. */
@media (max-width: 767.98px) {
  .ajouts-factures > summary { min-height: 44px; box-sizing: border-box; padding: 12px 10px; }
}

/* ══════════════════════════════════════════════════
   LOT BQ — « ⓘ PAYS ADMISSIBLES » (fiche client, bloc « Options d'appel » ; clients.js)
   Fenêtre non modale sous le bouton de la rangée, dans le bloc (position: relative). Sur
   téléphone : toute la largeur, en bas de l'écran (feuille), cibles de 44 px au doigt.
   ══════════════════════════════════════════════════ */
#bloc-options-appel { position: relative; }
.oa-pays {
  display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; padding: 1px 6px;
  border: 1px solid #c7d2fe; border-radius: 10px; background: #eef2ff; color: #1e3a8a;
  font: inherit; font-size: 0.72rem; font-weight: 500; line-height: 1.4; cursor: pointer; vertical-align: 1px;
}
.oa-pays:hover, .oa-pays[aria-expanded="true"] { background: #e0e7ff; border-color: #a5b4fc; }
.oa-pays:focus-visible { outline: 2px solid #1c4d79; outline-offset: 1px; }
.oa-pays-fenetre {
  position: absolute; z-index: 70; top: 40px; left: 8px;
  width: 460px; max-width: calc(100% - 16px); max-height: 60vh; overflow-y: auto;
  background: #fff; border: 1px solid #d4dae2; border-radius: 6px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.18); padding: 10px 14px 12px;
  font-size: 0.8rem; color: #334155; text-align: left;
}
.oa-pays-fenetre[hidden] { display: none !important; }
.oa-pays-fenetre:focus { outline: none; }
.oa-pays-fenetre:focus-visible { box-shadow: 0 0 0 2px #1c4d79, 0 10px 28px rgba(15, 23, 42, 0.18); }
.oa-pays-tete {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px solid #e2e8f0; color: #0f172a;
}
.oa-pays-fermer {
  flex: 0 0 auto; border: none; background: none; color: #64748b; font-size: 1.1rem; line-height: 1;
  padding: 0 4px; cursor: pointer; border-radius: 4px;
}
.oa-pays-fermer:hover { color: #0f172a; background: #f1f5f9; }
.oa-pays-fermer:focus-visible { outline: 2px solid #1c4d79; }
.oa-pays-texte { margin: 4px 0; }
.oa-pays-note { margin: 4px 0; font-size: 0.74rem; color: #64748b; }
.oa-pays-cout { margin: 6px 0; font-size: 0.76rem; color: #1e3a8a; }
.oa-pays-pied { margin: 8px 0 0; padding-top: 6px; border-top: 1px solid #e2e8f0; font-size: 0.72rem; color: #64748b; }
.oa-pays-erreur { margin: 6px 0; }
.oa-pays-region { margin: 10px 0 4px; font-weight: 700; color: #0f172a; font-size: 0.78rem; }
.oa-pays-compte { font-weight: 400; color: #64748b; }
.oa-pays-liste { list-style: none; margin: 0; padding: 0; columns: 3 130px; column-gap: 14px; }
.oa-pays-liste li { break-inside: avoid; padding: 1px 0; }
.oa-pays-table { width: 100%; border-collapse: collapse; font-size: 0.76rem; }
.oa-pays-table th, .oa-pays-table td { padding: 3px 6px; border-bottom: 1px solid #f1f5f9; text-align: left; vertical-align: top; }
.oa-pays-table thead th { font-size: 0.7rem; color: #64748b; font-weight: 600; }
.oa-pays-table tbody th { font-weight: 500; color: #0f172a; }
.oa-pays-table td { font-variant-numeric: tabular-nums; white-space: nowrap; }
.oa-pays-cad { display: block; font-size: 0.68rem; color: #64748b; }
.oa-pays-speciaux { display: block; font-size: 0.68rem; font-weight: 400; color: #64748b; }
.oa-pays-ferme { color: #94a3b8; }
@media (max-width: 767.98px) {
  .oa-pays { min-height: 44px; padding: 0 10px; font-size: 0.8rem; }
  .oa-pays-fenetre {
    position: fixed !important; top: auto !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: auto !important; max-width: none !important; max-height: 75vh; z-index: 1500;
    border-radius: 12px 12px 0 0; padding: 12px 16px max(16px, env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -8px 28px rgba(15, 23, 42, 0.25);
  }
  .oa-pays-fermer { min-width: 44px; min-height: 44px; font-size: 1.4rem; }
  .oa-pays-liste { columns: 2 120px; }
  .oa-pays-table td { white-space: normal; }
}

/* ══════════════════════════════════════════════════
   LOT BS — « DEMANDER LA SUSPENSION » EN HAUT DE LA FICHE D'UN CLIENT (clients.js, section « Lot BS »)
   Imad, 25 sept. 2026 : Khalid « ne le trouve pas » — le bouton est au-dessus des onglets, visible
   depuis chacun ; le bandeau d'une demande en attente prend la même place.
   ══════════════════════════════════════════════════ */
.suspension-bs { margin: 0 0 10px; }
.suspension-bs-actions,
.suspension-bs-bandeau {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 4px; font-size: 0.82rem;
}
.suspension-bs-actions { background: #fff; border: 1px solid #fcd9b6; border-left: 4px solid #f0ad4e; }
.suspension-bs-bandeau { background: #fff7ed; color: #9a3412; border: 1px solid #fed7aa; }
.suspension-bs-texte { flex: 1 1 260px; min-width: 0; }
.suspension-bs-aide { font-size: 0.75rem; color: #64748b; }
#c-status-aide.suspension-bs-aide { margin-top: 4px; }
.suspension-bs-etat { font-size: 0.75rem; }
.suspension-bs-avis { font-size: 0.8rem; padding: 8px 10px; border-radius: 4px; margin-bottom: 10px; background: #fff7ed; color: #9a3412; }
.suspension-bs-avis p { margin: 0 0 6px; }
.suspension-bs-avis p:last-child { margin-bottom: 0; }
@media (max-width: 767.98px) {
  .suspension-bs-actions .btn, .suspension-bs-bandeau .btn { width: 100%; justify-content: center; }
}

/* ══════════════════════════════════════════════════
   LOT BS, § 5 — CONTRÔLE DIRECT DES CONNEXIONS D'UN REVENDEUR
   Imad, 25 sept. 2026 : « active au revendeur juste cette partie et qu'il peut voir juste ses
   clients pour les contrôler sans passer par moi ». Page « Connexion client » d'un revendeur qui a
   la permission (js/client-connections.js, mode « controle ») : l'interrupteur On/Off est un vrai
   bouton, le reste du tableau est du texte ; la ligne de message garde le résultat de la dernière
   bascule. Fiche d'un compte revendeur (js/clients.js) : la case de l'administrateur.
   ══════════════════════════════════════════════════ */
.conn-aide-revendeur {
  margin: 0 0 10px; padding: 8px 12px; border-radius: 4px; font-size: 0.82rem; line-height: 1.45;
  background: #eff6ff; color: #1e3a8a; border: 1px solid #bfdbfe;
}
.conn-message { margin: 0 0 10px; padding: 8px 12px; border-radius: 4px; font-size: 0.82rem; line-height: 1.45; }
.conn-message-ok { background: #ecfdf5; color: #166534; border: 1px solid #bbf7d0; }
.conn-message-erreur { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.conn-onoff {
  display: inline-flex; align-items: center; gap: 2px; margin-left: 4px; padding: 1px 7px;
  border-radius: 3px; border: 1px solid currentColor; background: #fff; cursor: pointer;
  font-size: 0.78rem; font-weight: 700; line-height: 1.4;
}
.conn-onoff.conn-on { color: #15803d; }
.conn-onoff.conn-off { color: #b91c1c; }
.conn-onoff:disabled { opacity: 0.55; cursor: wait; }
.conn-onoff:focus-visible { outline: 2px solid #1a4d80; outline-offset: 1px; }
.conn-onoff-absent { margin-left: 6px; color: #94a3b8; }
.conn-refus { max-width: 620px; margin: 40px auto; padding: 28px 26px; text-align: center; }
.conn-refus-titre { font-size: 1.1rem; font-weight: 700; color: #1e293b; margin-bottom: 10px; }
.conn-refus-message { font-size: 0.9rem; color: #64748b; line-height: 1.5; margin-bottom: 18px; }
.controle-connexions-bs label { display: flex; align-items: flex-start; gap: 6px; font-size: 0.85rem; }
.controle-connexions-bs label input { margin-top: 3px; }
@media (max-width: 767.98px) {
  .conn-onoff { padding: 4px 10px; }
  .conn-refus { margin: 20px auto; padding: 20px 16px; }
}