/* ════════════════════════════════════════════════════════════════
   DARK OVERRIDES v3.0 — Bootstrap compatibility for dark theme
   ────────────────────────────────────────────────────────────────
   Rules are SPECIFIC to named Bootstrap / component classes.
   NO dangerous attribute wildcard selectors ([class$="..."] etc.)
   that could break page-specific design systems (POS, etc.)
   ════════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────────
   1. Base — body already themed via design-system.css :root
   ──────────────────────────────────────────────────────────────── */
html, body {
  background-color: var(--ds-bg-app);
  color: var(--ds-text);
}

/* ────────────────────────────────────────────────────────────────
   2. Bootstrap Cards (EXACT class names only)
   ──────────────────────────────────────────────────────────────── */
.card {
  background-color: var(--ds-bg-surface) !important;
  border-color: var(--ds-border) !important;
  border-radius: var(--ds-radius-lg) !important;
  color: var(--ds-text) !important;
}
.card-header {
  background-color: var(--ds-bg-elevated) !important;
  border-color: var(--ds-border) !important;
  color: var(--ds-text) !important;
  font-weight: 600;
}
.card-body  { background-color: var(--ds-bg-surface) !important; color: var(--ds-text) !important; }
.card-footer { background-color: var(--ds-bg-elevated) !important; border-color: var(--ds-border) !important; }
.card-title { color: var(--ds-text) !important; font-weight: 700; }
.card-text  { color: var(--ds-text-sub) !important; }

/* ────────────────────────────────────────────────────────────────
   3. Bootstrap Buttons
   ──────────────────────────────────────────────────────────────── */
.btn {
  border-radius: var(--ds-radius-sm) !important;
  font-weight: 600 !important;
  transition: all var(--ds-duration) var(--ds-ease) !important;
}
.btn-primary   { background: var(--ds-accent) !important; border-color: var(--ds-accent) !important; color: #fff !important; }
.btn-primary:hover { background: var(--ds-accent-hover) !important; border-color: var(--ds-accent-hover) !important; }
.btn-secondary { background: var(--ds-bg-elevated) !important; border-color: var(--ds-border) !important; color: var(--ds-text) !important; }
.btn-secondary:hover { background: var(--ds-bg-surface) !important; border-color: var(--ds-text-sub) !important; }
.btn-danger    { background: var(--ds-danger-dim) !important; border-color: var(--ds-danger) !important; color: var(--ds-danger) !important; }
.btn-danger:hover { background: var(--ds-danger) !important; color: #fff !important; }
.btn-success   { background: var(--ds-success-dim) !important; border-color: var(--ds-success) !important; color: var(--ds-success) !important; }
.btn-success:hover { background: var(--ds-success) !important; color: #fff !important; }
.btn-warning   { background: var(--ds-warning-dim) !important; border-color: var(--ds-warning) !important; color: var(--ds-warning) !important; }
.btn-light     { background: var(--ds-bg-elevated) !important; border-color: var(--ds-border) !important; color: var(--ds-text) !important; }
.btn-outline-primary  { color: var(--ds-accent) !important;   border-color: var(--ds-accent) !important; background: transparent !important; }
.btn-outline-secondary{ color: var(--ds-text-sub) !important; border-color: var(--ds-border) !important; background: transparent !important; }
.btn-outline-danger   { color: var(--ds-danger) !important;   border-color: var(--ds-danger) !important; background: transparent !important; }
.btn-outline-success  { color: var(--ds-success) !important;  border-color: var(--ds-success) !important; background: transparent !important; }
.btn-outline-primary:hover  { background: var(--ds-accent-dim) !important; }
.btn-outline-secondary:hover{ background: var(--ds-bg-elevated) !important; color: var(--ds-text) !important; }
.btn-outline-danger:hover   { background: var(--ds-danger-dim) !important; }
.btn-outline-success:hover  { background: var(--ds-success-dim) !important; }

/* ────────────────────────────────────────────────────────────────
   4. Bootstrap Forms
   ──────────────────────────────────────────────────────────────── */
.form-control, .form-select {
  background-color: var(--ds-bg-elevated) !important;
  border-color: var(--ds-border) !important;
  border-radius: var(--ds-radius-sm) !important;
  color: var(--ds-text) !important;
}
.form-control:focus, .form-select:focus {
  background-color: var(--ds-bg-elevated) !important;
  border-color: var(--ds-border-focus) !important;
  box-shadow: var(--ds-shadow-focus) !important;
  color: var(--ds-text) !important;
}
.form-control::placeholder { color: var(--ds-text-muted) !important; }
.form-label { color: var(--ds-text-sub) !important; font-weight: 600; }
.form-text  { color: var(--ds-text-muted) !important; }
.form-check-input {
  background-color: var(--ds-bg-elevated) !important;
  border-color: var(--ds-border) !important;
}
.form-check-input:checked {
  background-color: var(--ds-accent) !important;
  border-color: var(--ds-accent) !important;
}
.input-group-text {
  background-color: var(--ds-bg-surface) !important;
  border-color: var(--ds-border) !important;
  color: var(--ds-text-sub) !important;
}

/* ────────────────────────────────────────────────────────────────
   5. Bootstrap Table
   ──────────────────────────────────────────────────────────────── */
.table { color: var(--ds-text) !important; border-color: var(--ds-border) !important; }
.table > :not(caption) > * > * {
  background-color: transparent !important;
  border-color: var(--ds-border) !important;
  color: var(--ds-text) !important;
}
.table thead th {
  background-color: var(--ds-bg-surface) !important;
  color: var(--ds-text-sub) !important;
  font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  border-color: var(--ds-border) !important;
}
.table tbody tr:hover > * { background-color: var(--ds-bg-elevated) !important; }
.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: rgba(255,255,255,.02) !important;
}

/* ────────────────────────────────────────────────────────────────
   6. Bootstrap Modals
   ──────────────────────────────────────────────────────────────── */
.modal-content  { background-color: var(--ds-bg-surface) !important; border-color: var(--ds-border) !important; border-radius: var(--ds-radius-xl) !important; }
.modal-header   { background-color: var(--ds-bg-surface) !important; border-color: var(--ds-border) !important; }
.modal-footer   { background-color: var(--ds-bg-elevated) !important; border-color: var(--ds-border) !important; }
.modal-body     { background-color: var(--ds-bg-surface) !important; color: var(--ds-text) !important; }
.modal-title    { color: var(--ds-text) !important; font-weight: 700; }
.btn-close      { filter: invert(1) grayscale(1) brightness(1.5) !important; opacity: .6; }
.btn-close:hover { opacity: 1 !important; }

/* ────────────────────────────────────────────────────────────────
   7. Bootstrap Dropdowns
   ──────────────────────────────────────────────────────────────── */
.dropdown-menu {
  background-color: var(--ds-bg-surface) !important;
  border-color: var(--ds-border) !important;
  border-radius: var(--ds-radius) !important;
  box-shadow: var(--ds-shadow-lg) !important;
}
.dropdown-item { color: var(--ds-text-sub) !important; }
.dropdown-item:hover, .dropdown-item:focus {
  background-color: var(--ds-bg-elevated) !important;
  color: var(--ds-text) !important;
}
.dropdown-item.active { background-color: var(--ds-accent-dim) !important; color: var(--ds-accent) !important; }
.dropdown-divider { border-color: var(--ds-border) !important; }

/* ────────────────────────────────────────────────────────────────
   8. Bootstrap Nav / Tabs
   ──────────────────────────────────────────────────────────────── */
.nav-tabs .nav-link { color: var(--ds-text-sub) !important; border-color: transparent !important; }
.nav-tabs .nav-link:hover { background-color: var(--ds-bg-elevated) !important; color: var(--ds-text) !important; }
.nav-tabs .nav-link.active { background-color: var(--ds-bg-surface) !important; border-color: var(--ds-border) var(--ds-border) var(--ds-bg-surface) !important; color: var(--ds-accent) !important; font-weight: 600; }
.nav-pills .nav-link { color: var(--ds-text-sub) !important; }
.nav-pills .nav-link:hover { background: var(--ds-bg-elevated) !important; color: var(--ds-text) !important; }
.nav-pills .nav-link.active { background: var(--ds-accent-dim) !important; color: var(--ds-accent) !important; font-weight: 600; }
.tab-content { color: var(--ds-text) !important; }

/* ────────────────────────────────────────────────────────────────
   9. Bootstrap List Group
   ──────────────────────────────────────────────────────────────── */
.list-group-item {
  background-color: var(--ds-bg-surface) !important;
  border-color: var(--ds-border) !important;
  color: var(--ds-text) !important;
}
.list-group-item:hover { background-color: var(--ds-bg-elevated) !important; }
.list-group-item.active { background-color: var(--ds-accent-dim) !important; border-color: var(--ds-accent) !important; color: var(--ds-accent) !important; }

/* ────────────────────────────────────────────────────────────────
   10. Bootstrap Badges
   ──────────────────────────────────────────────────────────────── */
.badge.bg-primary   { background-color: var(--ds-accent) !important; }
.badge.bg-success   { background-color: var(--ds-success) !important; }
.badge.bg-danger    { background-color: var(--ds-danger) !important; }
.badge.bg-warning   { background-color: var(--ds-warning) !important; color: #0d1117 !important; }
.badge.bg-secondary { background-color: var(--ds-bg-elevated) !important; color: var(--ds-text-sub) !important; }
.badge.bg-light     { background-color: var(--ds-bg-elevated) !important; color: var(--ds-text) !important; }

/* ────────────────────────────────────────────────────────────────
   11. Bootstrap Alerts
   ──────────────────────────────────────────────────────────────── */
.alert-primary   { background: var(--ds-accent-dim) !important; border-color: rgba(249,115,22,.3) !important; color: var(--ds-accent) !important; }
.alert-success   { background: var(--ds-success-dim) !important; border-color: rgba(63,185,80,.3) !important; color: var(--ds-success) !important; }
.alert-danger    { background: var(--ds-danger-dim) !important; border-color: rgba(248,81,73,.3) !important; color: var(--ds-danger) !important; }
.alert-warning   { background: var(--ds-warning-dim) !important; border-color: rgba(210,153,34,.3) !important; color: var(--ds-warning) !important; }
.alert-info      { background: var(--ds-info-dim) !important; border-color: rgba(121,192,255,.3) !important; color: var(--ds-info) !important; }
.alert-secondary { background: var(--ds-bg-elevated) !important; border-color: var(--ds-border) !important; color: var(--ds-text-sub) !important; }
.alert-light     { background: var(--ds-bg-elevated) !important; border-color: var(--ds-border) !important; color: var(--ds-text) !important; }

/* ────────────────────────────────────────────────────────────────
   12. Bootstrap Progress / Accordion / Toast
   ──────────────────────────────────────────────────────────────── */
.progress { background-color: var(--ds-bg-elevated) !important; border-radius: 999px !important; height: 8px; }
.progress-bar { background-color: var(--ds-accent) !important; }

.accordion-item   { background-color: var(--ds-bg-surface) !important; border-color: var(--ds-border) !important; }
.accordion-button { background-color: var(--ds-bg-elevated) !important; color: var(--ds-text) !important; box-shadow: none !important; font-weight: 600; }
.accordion-button:not(.collapsed) { background-color: var(--ds-accent-dim) !important; color: var(--ds-accent) !important; }
.accordion-body   { background-color: var(--ds-bg-surface) !important; color: var(--ds-text) !important; }

.toast        { background-color: var(--ds-bg-surface) !important; border-color: var(--ds-border) !important; color: var(--ds-text) !important; }
.toast-header { background-color: var(--ds-bg-elevated) !important; border-color: var(--ds-border) !important; color: var(--ds-text) !important; }

/* ────────────────────────────────────────────────────────────────
   13. Bootstrap Pagination
   ──────────────────────────────────────────────────────────────── */
.page-link {
  background-color: var(--ds-bg-surface) !important;
  border-color: var(--ds-border) !important;
  color: var(--ds-text-sub) !important;
}
.page-link:hover { background-color: var(--ds-bg-elevated) !important; color: var(--ds-text) !important; border-color: var(--ds-border) !important; }
.page-item.active .page-link { background-color: var(--ds-accent) !important; border-color: var(--ds-accent) !important; color: #fff !important; }
.page-item.disabled .page-link { background-color: var(--ds-bg-elevated) !important; opacity: .5; }

/* ────────────────────────────────────────────────────────────────
   14. Bootstrap Color utilities
   ──────────────────────────────────────────────────────────────── */
.bg-white   { background-color: var(--ds-bg-surface) !important; }
.bg-light   { background-color: var(--ds-bg-elevated) !important; color: var(--ds-text) !important; }
.bg-dark    { background-color: var(--ds-bg-app) !important; color: var(--ds-text) !important; }
.bg-body    { background-color: var(--ds-bg-app) !important; }
.bg-secondary{ background-color: var(--ds-bg-elevated) !important; color: var(--ds-text-sub) !important; }
.text-dark  { color: var(--ds-text) !important; }
.text-muted { color: var(--ds-text-sub) !important; }
.border     { border-color: var(--ds-border) !important; }

/* ────────────────────────────────────────────────────────────────
   15. Global scrollbar polish
   ──────────────────────────────────────────────────────────────── */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--ds-border) transparent;
}
*::-webkit-scrollbar       { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--ds-border); border-radius: 4px; }
*::-webkit-scrollbar-thumb:hover { background: var(--ds-text-muted); }

/* ────────────────────────────────────────────────────────────────
   16. Page-specific custom component classes (safe, exact names)
   ──────────────────────────────────────────────────────────────── */

/* Stock / Inventory */
.produit-form-card  { background-color: var(--ds-bg-surface) !important; border-color: var(--ds-border) !important; border-radius: var(--ds-radius-lg) !important; }
.produit-form-header{ background-color: var(--ds-bg-elevated) !important; border-color: var(--ds-border) !important; }
.produit-form-body  { background-color: var(--ds-bg-surface) !important; }
.stock-card         { background-color: var(--ds-bg-surface) !important; border-color: var(--ds-border) !important; }
.filter-card        { background-color: var(--ds-bg-surface) !important; border-color: var(--ds-border) !important; }
.matiere-card       { background-color: var(--ds-bg-surface) !important; border-color: var(--ds-border) !important; }
.section-card       { background-color: var(--ds-bg-surface) !important; border-color: var(--ds-border) !important; }
.historique-card    { background-color: var(--ds-bg-surface) !important; border-color: var(--ds-border) !important; }
.produit-card       { background-color: var(--ds-bg-surface) !important; border-color: var(--ds-border) !important; color: var(--ds-text) !important; }
.produit-card:hover { border-color: var(--ds-accent) !important; }

/* Titles and labels */
.main-title         { color: var(--ds-text) !important; font-weight: 700; }
.caisse-title       { color: var(--ds-text) !important; }
.stock-section-title{ color: var(--ds-text) !important; font-weight: 700; }

/* Table wrappers */
.table-responsive {
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-radius-lg) !important;
  overflow: hidden;
  background: var(--ds-bg-surface) !important;
}
.table-responsive > .table { margin-bottom: 0 !important; }
.stock-table-wrapper {
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-radius-lg) !important;
  background: var(--ds-bg-surface) !important;
}

/* Search inputs (exact class) */
.search-input {
  background-color: var(--ds-bg-elevated) !important;
  border-color: var(--ds-border) !important;
  color: var(--ds-text) !important;
}
.search-icon { color: var(--ds-text-muted) !important; }

/* Ecommerce product elements */
.produit-nom   { color: var(--ds-text) !important; }
.produit-prix  { color: var(--ds-accent) !important; font-weight: 700; }
.produit-ref   { color: var(--ds-text-muted) !important; }

/* Stats and KPI */
.kpi-card, .stat-card, .chart-card {
  background-color: var(--ds-bg-surface) !important;
  border-color: var(--ds-border) !important;
}
.kpi-value { color: var(--ds-text) !important; }
.kpi-label { color: var(--ds-text-sub) !important; }
.kpi-trend { color: var(--ds-success) !important; }
.kpi-trend.negative { color: var(--ds-danger) !important; }

/* CRM Chat */
.crm-chat-sidebar     { background: var(--ds-bg-surface) !important; border-color: var(--ds-border) !important; }
.crm-chat-panel       { background: var(--ds-bg-surface) !important; border-color: var(--ds-border) !important; }
.crm-chat-header      { background: var(--ds-bg-elevated) !important; border-color: var(--ds-border) !important; color: var(--ds-text) !important; }
.crm-chat-messages    { background: var(--ds-bg-app) !important; }
.crm-chat-footer      { background: var(--ds-bg-surface) !important; border-color: var(--ds-border) !important; }
.crm-chat-input-wrap  { background: var(--ds-bg-elevated) !important; border-color: var(--ds-border) !important; }
.crm-chat-input       { background: transparent !important; color: var(--ds-text) !important; }
.crm-chat-contact     { color: var(--ds-text) !important; }
.crm-chat-contact:hover, .crm-chat-contact.active { background: var(--ds-bg-elevated) !important; }
.crm-chat-bubble-me   { background: var(--ds-accent-dim) !important; color: var(--ds-text) !important; }
.crm-chat-bubble-them { background: var(--ds-bg-elevated) !important; color: var(--ds-text) !important; }
.crm-chat-time        { color: var(--ds-text-muted) !important; }

/* Supervision / Audit */
.supervision-card { background-color: var(--ds-bg-surface) !important; border-color: var(--ds-border) !important; }
.audit-card       { background-color: var(--ds-bg-surface) !important; border-color: var(--ds-border) !important; }

/* Pointage */
.pointage-card    { background-color: var(--ds-bg-surface) !important; border-color: var(--ds-border) !important; }

/* Colis / Delivery */
.colis-card       { background-color: var(--ds-bg-surface) !important; border-color: var(--ds-border) !important; }

/* Parametres */
.param-card, .setting-card { background-color: var(--ds-bg-surface) !important; border-color: var(--ds-border) !important; }

/* Floating button */
.btn-floating-chat, .btn-floating {
  background: linear-gradient(135deg, var(--ds-accent), var(--ds-purple)) !important;
  border: none !important; color: #fff !important;
  box-shadow: 0 4px 16px rgba(249,115,22,.4), 0 0 28px rgba(249,115,22,.28) !important;
  transition: box-shadow .2s ease, transform .15s ease !important;
}
.btn-floating-chat:hover, .btn-floating:hover {
  box-shadow: 0 6px 22px rgba(249,115,22,.45), 0 0 36px rgba(249,115,22,.32) !important;
}

/* Modal overlay */
.modal-overlay { background: rgba(0,0,0,.65) !important; backdrop-filter: blur(4px) !important; }

/* ────────────────────────────────────────────────────────────────
   17. LIGHT MODE OVERRIDES
   Additional adjustments for light theme that need !important
   to override Bootstrap's own styles
   ──────────────────────────────────────────────────────────────── */
html[data-theme="light"] .bg-white  { background-color: #ffffff !important; }
html[data-theme="light"] .bg-light  { background-color: #fff7ed !important; color: #431407 !important; }
html[data-theme="light"] .text-muted{ color: #b45309 !important; }
html[data-theme="light"] .border    { border-color: #fed7aa !important; }
html[data-theme="light"] .card      { background-color: #ffffff !important; border-color: #fed7aa !important; color: #431407 !important; box-shadow: 0 1px 3px rgba(154,52,18,.06) !important; }
html[data-theme="light"] .card-header { background-color: #fff7ed !important; border-color: #fed7aa !important; color: #431407 !important; }
html[data-theme="light"] .card-body { background-color: #ffffff !important; color: #431407 !important; }
html[data-theme="light"] .card-footer{ background-color: #fff7ed !important; border-color: #fed7aa !important; }
html[data-theme="light"] .form-control, html[data-theme="light"] .form-select {
  background-color: #ffffff !important; border-color: #fdba74 !important; color: #431407 !important;
}
html[data-theme="light"] .table { color: #431407 !important; }
html[data-theme="light"] .table thead th { background-color: #fff7ed !important; color: #7c2d12 !important; border-color: #fed7aa !important; }
html[data-theme="light"] .table > :not(caption) > * > * { color: #431407 !important; border-color: #fed7aa !important; }
html[data-theme="light"] .table tbody tr:hover > * { background-color: #fff7ed !important; }
html[data-theme="light"] .modal-content { background-color: #ffffff !important; border-color: #fed7aa !important; }
html[data-theme="light"] .dropdown-menu { background-color: #ffffff !important; border-color: #fed7aa !important; }
html[data-theme="light"] .dropdown-item:hover { background-color: #fff7ed !important; color: #431407 !important; }
html[data-theme="light"] .list-group-item { background-color: #ffffff !important; border-color: #fed7aa !important; color: #431407 !important; }
html[data-theme="light"] .btn-close { filter: none !important; opacity: .6; }
html[data-theme="light"] .btn-secondary { background: #fff7ed !important; border-color: #fdba74 !important; color: #431407 !important; }
html[data-theme="light"] .badge.bg-warning { color: #431407 !important; }

/* ════════════════════════════════════════════════════════════════
   18. RESPONSIVE — confinement largeur (chargé en DERNIER = priorité)
   Évite scroll horizontal, chevauchements, grilles qui débordent.
   ════════════════════════════════════════════════════════════════ */
html {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  scrollbar-color: rgba(255, 255, 255, 0.18) var(--ds-bg-app);
}

html::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
html::-webkit-scrollbar-track {
  background: var(--ds-bg-app);
}
html::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 4px;
}
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  margin: 0;
  position: relative;
}
#app {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
  min-height: 100vh;
  background: var(--ds-bg-app);
  box-sizing: border-box;
}

/* Contenu sous la topbar : ne jamais forcer la largeur du viewport */
.ds-main {
  max-width: 100%;
}

/* Bootstrap : éviter que .row dépasse sans conteneur */
.ds-content .container,
.ds-content .container-fluid {
  max-width: 100%;
}

.ds-content .row {
  max-width: 100%;
}

/* Tables et blocs larges : scroll interne au lieu de casser la page */
.ds-content .table-responsive {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.ds-content img,
.ds-content video,
.ds-content canvas,
.ds-content svg:not([width]):not([height]) {
  max-width: 100%;
  height: auto;
}

.ds-content pre,
.ds-content .table {
  max-width: 100%;
}

/* Dashboard Home — en-tête : padding fluide (inline trop rigide sur mobile) */
.home-dash .rsp-header {
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  padding: clamp(12px, 3vw, 18px) clamp(12px, 3.5vw, 22px) !important;
  gap: clamp(8px, 2vw, 12px) !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.home-dash .rsp-actions {
  width: 100%;
  max-width: 100%;
  justify-content: flex-start;
}

@media (min-width: 640px) {
  .home-dash .rsp-actions {
    width: auto;
    justify-content: flex-end;
  }
}