/* CaleDoHub — Compact UI Override v3 (2026-05-10)
 * Densité maximale : zéro gros vide, scroll réduit, info dense.
 * Conçu en mode ingénieur senior pour dashboards / sidebars / tables.
 */

/* ═══ Hero / sections accueil — compactes ═══ */
.hero, section.hero, header.hero, .hero-section {
  padding-top: 26px !important;
  padding-bottom: 26px !important;
  min-height: auto !important;
}
.hero h1 { margin: 0 0 8px !important; font-size: clamp(1.5rem, 3.2vw, 2.4rem) !important; }
.hero p, .hero .lead { margin: 0 0 12px !important; font-size: clamp(.9rem, 1.4vw, 1.05rem) !important; }
.hero-section .container { max-width: 1100px; }

/* ═══ Section dividers ═══ */
section, .section { padding-top: 18px !important; padding-bottom: 18px !important; }
section h2, .section h2 { margin: 0 0 10px !important; font-size: clamp(1.15rem, 2.2vw, 1.6rem) !important; }
section .subtitle, .section .subtitle { margin: 0 0 12px !important; font-size: .9rem !important; color: #666; }

/* ═══ Cards & grids ═══ */
.card { padding: 10px 12px !important; }
.card.compact { padding: 7px 10px !important; }
.cards-grid, .grid, [class*="grid"]:not(.ch-pp-month):not(.ch-pp-team-grid):not(.ch-fmap-canvas):not(.ch-as-nav) {
  gap: 8px !important;
}

/* ═══ Forms ═══ */
.field { margin-bottom: 6px !important; }
.field label { margin-bottom: 2px !important; font-size: .72rem !important; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; }
input, select, textarea { padding: 6px 9px !important; font-size: .82rem !important; }
input[type=checkbox], input[type=radio] { padding: 0 !important; }
textarea { min-height: 60px !important; }

/* ═══ Headers ═══ */
header.cdb-header, .site-header { padding: 6px 14px !important; }
.cdb-section-h { padding: 6px 10px !important; }
.cdb-section-h h1, .cdb-section-h h2 { margin: 0 !important; font-size: 16px !important; }
.cdb-section-h p { font-size: 11px !important; margin: 1px 0 0 !important; color: #666; }

/* ═══ Footers ═══ */
footer { padding: 14px 14px 10px !important; }
footer p { margin: 3px 0 !important; font-size: .76rem !important; }
footer h4 { margin: 0 0 6px !important; font-size: .82rem !important; }
footer a { padding: 1px 0 !important; font-size: .76rem !important; }

/* ═══ Hub Launcher ═══ */
.cdh-hub-launcher { bottom: 80px !important; }

/* ═══ Mobile ═══ */
@media (max-width: 640px) {
  .hero, section.hero { padding: 18px 12px !important; }
  section, .section { padding: 14px 12px !important; }
  .card { padding: 8px !important; }
  h1 { font-size: 1.4rem !important; }
  h2 { font-size: 1.15rem !important; }
  h3 { font-size: 1rem !important; }
  .container, .wrap, [class*="wrap"] { padding-left: 10px !important; padding-right: 10px !important; }
}

/* ═══ Sidebars dashboards — TRÈS compactes ═══ */
.cdb-nav-item, .cdb-nav .item {
  padding: 5px 10px !important;
  font-size: 11.5px !important;
  line-height: 1.2 !important;
}
.cdb-nav-item .cdb-nav-ico { margin-right: 5px !important; font-size: 13px !important; }
.cdb-section { padding: 8px 12px !important; }

/* === Sidebar groupings denses (pour CHAdminShell) === */
.sb, aside.sb, [class*="sidebar"] { font-size: 12px; }
.sb h3, aside.sb h3 { font-size: 10px !important; padding: 6px 10px 2px !important; opacity: 0.55; text-transform: uppercase; letter-spacing: 0.5px; }
.sb a, aside.sb a, .sb .item { padding: 4px 10px !important; font-size: 11.5px !important; line-height: 1.3 !important; }

/* ═══ Tables ULTRA-denses ═══ */
table { border-spacing: 0 !important; }
table th { padding: 5px 8px !important; font-size: .68rem !important; text-transform: uppercase; letter-spacing: .3px; font-weight: 600; }
table td { padding: 5px 8px !important; font-size: .78rem !important; }
table tr:nth-child(even) td { background: rgba(0,0,0,0.012); }
table tr:hover td { background: rgba(0,0,0,0.025); }

/* ═══ Boutons ═══ */
.btn, button { padding: 6px 12px !important; font-size: .8rem !important; }
.btn-lg, button.btn-lg { padding: 9px 16px !important; font-size: .88rem !important; }
.btn-sm, button.btn-sm { padding: 4px 9px !important; font-size: .7rem !important; }
.btn-icon { padding: 4px 7px !important; }

/* ═══ Toasts/Notifications ═══ */
.toast, .notification { padding: 7px 12px !important; font-size: .8rem !important; max-width: 360px; }

/* ═══ Paragraphes ═══ */
p { margin: 0 0 7px !important; line-height: 1.5 !important; }
ul, ol { margin: 0 0 7px !important; padding-left: 18px !important; }
li { margin: 1px 0 !important; }

/* ═══ Containers max-width ═══ */
.container, .wrap, main { max-width: 1280px; margin-left: auto; margin-right: auto; }

/* ═══ Skip empty divs ═══ */
div:empty:not([class*="loader"]):not([class*="spinner"]):not([id]):not([class*="map"]):not([class*="canvas"]):not(.ch-as-overlay) { display: none !important; }

/* ═══ Modals overlay sticky non-fullscreen ═══ */
.modal { padding: 0 !important; }
.modal-content {
  max-width: 720px !important;
  max-height: 85vh !important;
  overflow-y: auto !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.15);
}
.modal-header { padding: 8px 14px !important; }
.modal-body { padding: 12px 14px !important; }
.modal-footer { padding: 6px 14px !important; }

/* ═══ Sticky toolbars dashboards ═══ */
.toolbar, .actions-bar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: white;
  padding: 5px 0 !important;
  border-bottom: 1px solid #f0f0f0;
}

/* ═══ Tabs denses ═══ */
.tabs, .tab-nav {
  display: flex;
  gap: 0 !important;
  border-bottom: 1px solid #ddd;
  margin-bottom: 8px !important;
  overflow-x: auto;
  scrollbar-width: thin;
}
.tabs > *, .tab-nav > * {
  padding: 5px 12px !important;
  font-size: .78rem !important;
  border: none !important;
  background: transparent !important;
  border-bottom: 2px solid transparent !important;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.4 !important;
}
.tabs > .active, .tab-nav > .active {
  border-bottom-color: var(--brand, #1a3a5c) !important;
  color: var(--brand, #1a3a5c) !important;
  font-weight: 600;
}

/* ═══ Stats cards (KPI) compactes ═══ */
.kpi-card, .stat-card {
  padding: 8px 12px !important;
}
.kpi-card .num, .stat-card .num {
  font-size: 20px !important;
  font-weight: 700;
  margin: 1px 0 !important;
}
.kpi-card .lbl, .stat-card .lbl {
  font-size: 10px !important;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: #666;
}

/* ═══ Density utility classes ═══ */
.dense > * + * { margin-top: 5px !important; }
.dense-row { display: flex; gap: 6px; align-items: center; padding: 3px 0; font-size: .82rem; }
.dense-grid { display: grid; gap: 6px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* ═══ Reduce scroll : horizontal lists ═══ */
.list-horizontal {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}
.list-horizontal > * { flex: 0 0 auto; min-width: 220px; }

/* ═══ Floating side panels ═══ */
.side-panel {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(420px, 90vw);
  background: white;
  box-shadow: -4px 0 20px rgba(0,0,0,.1);
  z-index: 200;
  overflow-y: auto;
  padding: 12px 16px;
  transform: translateX(100%);
  transition: transform .22s ease;
}
.side-panel.open { transform: translateX(0); }
.side-panel-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 190;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.side-panel-overlay.open { opacity: 1; pointer-events: auto; }

/* ═══ Dashboards : empêcher les gros padding sur les sections vides ═══ */
.dashboard-section, .dash-section {
  padding: 8px 12px !important;
  margin-bottom: 8px !important;
}
.dashboard-section:empty, .dash-section:empty { display: none !important; }

/* ═══ Listes déroulantes natives : fix lent sur Safari ═══ */
select { -webkit-appearance: menulist-button; min-height: 32px; }

/* ═══ Headers de menus / dropdowns custom ═══ */
.dropdown, [class*="dropdown"] {
  font-size: .82rem !important;
}
.dropdown-item, [class*="dropdown-item"] {
  padding: 4px 10px !important;
  font-size: .8rem !important;
  line-height: 1.4 !important;
}

/* ═══ Reduce vertical empty in form rows ═══ */
form .row, .form-row, .form-group {
  margin-bottom: 6px !important;
}

/* ═══ Scrollbars fines partout ═══ */
* { scrollbar-width: thin; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius: 4px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.25); }