/*
Theme visuel FacControl.

Ce fichier centralise les couleurs et les adaptations clair/sombre sans
modifier la logique des templates. Les variables demandees sont exposees sur
body.theme-light et body.theme-dark, puis reutilisees par les composants.
*/

body.theme-light,
html[data-faccontrol-theme="light"] body {
  --bg-main: #f6f9ff;
  --bg-card: #ffffff;
  --bg-sidebar: #ffffff;
  --text-main: #1f2937;
  --text-muted: #6b7280;
  --border-color: #e5e7eb;
  --primary-color: #4154f1;
  --hover-bg: #f1f5ff;
  --surface-subtle: #f8fafc;
  --surface-raised: #ffffff;
  --input-bg: #ffffff;
  --shadow-soft: 0 14px 36px rgba(1, 41, 112, 0.10);
}

body.theme-dark,
html[data-faccontrol-theme="dark"] body {
  --bg-main: #0b0f14;
  --bg-card: #161b22;
  --bg-sidebar: #161b22;
  --text-main: #f0f6fc;
  --text-muted: #9ba7b4;
  --border-color: #30363d;
  --primary-color: #58a6ff;
  --hover-bg: #21262d;
  --surface-subtle: #0d1117;
  --surface-raised: #1c2128;
  --input-bg: #0d1117;
  --shadow-soft: 0 18px 44px rgba(0, 0, 0, 0.38);
  --bs-body-bg: #0b0f14;
  --bs-body-color: #f0f6fc;
  --bs-secondary-color: #9ba7b4;
  --bs-border-color: #30363d;
  --bs-primary: #58a6ff;
  --bs-primary-rgb: 88, 166, 255;
  --bs-success: #3fb950;
  --bs-success-rgb: 63, 185, 80;
  --bs-danger: #ff7b72;
  --bs-danger-rgb: 255, 123, 114;
  --bs-warning: #d29922;
  --bs-warning-rgb: 210, 153, 34;
  --faccontrol-table-primary: #1f6feb;
  --faccontrol-table-border: #30363d;
  --faccontrol-table-zebra: #161b22;
  --faccontrol-table-hover: #21262d;
  --faccontrol-table-text: #f0f6fc;
  --faccontrol-table-muted: #9ba7b4;
  --faccontrol-table-shadow: none;
  color-scheme: dark;
}

body {
  background: var(--bg-main);
  color: var(--text-main);
  transition: background-color 0.22s ease, color 0.22s ease;
}

body,
.header,
.sidebar,
.card,
.dropdown-menu,
.modal-content,
.table,
.form-control,
.form-select,
.btn,
.alert,
.footer,
.dashboard-kpi-card,
.dashboard-mini-card,
.dashboard-table-card {
  transition:
    background-color 0.22s ease,
    border-color 0.22s ease,
    color 0.22s ease,
    box-shadow 0.22s ease;
}

/* Selecteur de theme compact dans la barre superieure. */
.faccontrol-theme-switcher {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: var(--surface-raised);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

.faccontrol-theme-option {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  background: transparent;
  line-height: 1;
}

.faccontrol-theme-option:hover,
.faccontrol-theme-option:focus-visible {
  color: var(--primary-color);
  background: var(--hover-bg);
  outline: none;
}

.faccontrol-theme-option.is-active {
  color: #ffffff;
  background: var(--primary-color);
  box-shadow: 0 6px 16px rgba(47, 129, 247, 0.26);
}

/* Socle layout : le theme s'applique au contenant, pas aux routes metier. */
#main,
.main,
.section,
.footer {
  background: var(--bg-main);
  color: var(--text-main);
}

.pagetitle h1,
.card-title,
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--text-main);
}

a {
  color: var(--primary-color);
}

.text-muted,
.form-text,
.small.text-muted {
  color: var(--text-muted) !important;
}

/* Barre superieure et menu lateral. */
.header {
  background: var(--surface-raised);
  border-bottom: 1px solid var(--border-color);
  box-shadow: var(--shadow-soft);
}

.header .toggle-sidebar-btn,
.header-nav .nav-profile,
.header-nav .nav-profile span,
.header-nav .nav-icon,
.logo span {
  color: var(--text-main);
}

.sidebar {
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border-color);
  box-shadow: none;
  scrollbar-color: var(--border-color) transparent;
}

.sidebar::-webkit-scrollbar {
  background-color: transparent;
}

.sidebar::-webkit-scrollbar-thumb {
  background-color: var(--border-color);
}

.sidebar-nav .nav-heading {
  color: var(--text-muted);
}

.sidebar-nav .nav-link,
.sidebar-nav .nav-link.collapsed,
.sidebar-nav .sidebar-action-link,
.sidebar-nav .sidebar-action-link.collapsed {
  color: var(--text-main);
  background: transparent;
}

.sidebar-nav .nav-link:not(.collapsed),
.sidebar-nav .nav-link.active {
  color: var(--primary-color);
  background: color-mix(in srgb, var(--primary-color) 12%, transparent);
}

.sidebar-nav .nav-link i,
.sidebar-nav .nav-link.collapsed i {
  color: var(--text-muted);
}

.sidebar-nav .nav-link:hover,
.sidebar-nav .nav-link:focus,
.sidebar-nav .sidebar-action-link:hover,
.sidebar-nav .sidebar-action-link:focus {
  color: var(--primary-color);
  background: var(--hover-bg);
}

.sidebar-nav .nav-link:hover i,
.sidebar-nav .nav-link:focus i,
.sidebar-nav .nav-link:not(.collapsed) i {
  color: var(--primary-color);
}

/* Surfaces communes : cartes, listes, menus et modales. */
.card,
.dashboard-kpi-card,
.dashboard-mini-card,
.dashboard-table-card,
.list-group-item,
.dropdown-menu,
.modal-content,
.swal2-popup {
  background: var(--bg-card);
  color: var(--text-main);
  border-color: var(--border-color);
  box-shadow: var(--shadow-soft);
}

.card-header,
.card-footer,
.dropdown-menu-arrow::before {
  background: var(--bg-card);
  border-color: var(--border-color);
  color: var(--text-muted);
}

.dropdown-item,
.dropdown-menu .dropdown-footer a,
.header-nav .profile .dropdown-header h6 {
  color: var(--text-main);
}

.dropdown-item:hover,
.dropdown-item:focus,
.header-nav .profile .dropdown-item:hover {
  color: var(--text-main);
  background: var(--hover-bg);
}

.dropdown-divider {
  border-color: var(--border-color);
}

/* Formulaires et tableaux. */
.form-control,
.form-select,
.input-group-text,
.dataTable-input,
.dataTable-selector {
  background-color: var(--input-bg);
  border-color: var(--border-color);
  color: var(--text-main);
}

.form-control::placeholder,
.dataTable-input::placeholder {
  color: var(--text-muted);
}

.form-control:focus,
.form-select:focus,
.dataTable-input:focus {
  background-color: var(--input-bg);
  border-color: var(--primary-color);
  color: var(--text-main);
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--primary-color) 22%, transparent);
}

.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--text-main);
  --bs-table-border-color: var(--border-color);
  --bs-table-striped-bg: color-mix(in srgb, var(--hover-bg) 72%, transparent);
  --bs-table-striped-color: var(--text-main);
  --bs-table-hover-bg: var(--hover-bg);
  --bs-table-hover-color: var(--text-main);
  color: var(--text-main);
  border-color: var(--border-color);
}

.table-light,
.table thead,
.datatable thead,
.dashboard .recent-sales .table thead,
.dashboard .top-selling .table thead {
  --bs-table-bg: var(--surface-subtle);
  --bs-table-color: var(--text-main);
  background: var(--surface-subtle);
  color: var(--text-main);
}

.table > :not(caption) > * > * {
  border-color: var(--border-color);
}

/* Boutons : on garde Bootstrap, en rattachant seulement les couleurs au theme. */
.btn-primary,
.btn-proforma {
  border-color: var(--primary-color);
  background: var(--primary-color);
  color: #ffffff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-proforma:hover,
.btn-proforma:focus {
  border-color: color-mix(in srgb, var(--primary-color) 82%, #ffffff 18%);
  background: color-mix(in srgb, var(--primary-color) 82%, #ffffff 18%);
  color: #ffffff;
}

.btn-outline-primary {
  color: var(--primary-color);
  border-color: var(--primary-color);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  color: #ffffff;
  background: var(--primary-color);
  border-color: var(--primary-color);
}

/* Adaptations ciblees du dashboard et du POS, sans toucher a leur logique JS. */
.dashboard-kpi-card,
.dashboard-mini-card,
.dashboard-table-card,
.recent-sales {
  background: var(--bg-card);
  border-color: var(--border-color);
}

.dashboard-kpi-title,
.dashboard-mini-value,
.dashboard-kpi-value,
.dashboard-table-card .card-title {
  color: var(--text-main);
}

.dashboard-kpi-note,
.dashboard-kpi-caption,
.dashboard-kpi-subvalue,
.dashboard-kpi-conversion-text,
.dashboard-mini-label,
.dashboard-mini-subvalue,
.dashboard-chip,
.dashboard-mini-chip {
  color: var(--text-muted);
}

.dashboard-chip,
.dashboard-mini-chip {
  background: var(--surface-subtle);
  border-color: var(--border-color);
}

.bg-light,
.payment-row,
.client-search-results {
  background-color: var(--surface-subtle) !important;
  color: var(--text-main);
  border-color: var(--border-color) !important;
}

.client-search-option {
  background: var(--bg-card);
  color: var(--text-main);
}

.client-search-option.active,
.client-search-option:hover {
  background: var(--primary-color);
  color: #ffffff;
}

/* Theme sombre inspire GitHub dark : contraste fort, surfaces nettes. */
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) {
  background: #0b0f14;
  color: #f0f6fc;
}

:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .header {
  background: #161b22;
  border-bottom-color: #30363d;
  box-shadow: none;
}

:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .sidebar {
  background: #161b22;
}

:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .card,
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .dashboard-kpi-card,
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .dashboard-mini-card,
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .dashboard-table-card {
  background: #161b22 !important;
  border: 1px solid #30363d;
  box-shadow: none;
}

/* Contraste dark renforce : les libelles restent calmes et les valeurs ressortent nettement. */
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) #main,
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .main,
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .section,
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .footer {
  background: #0b0f14 !important;
  color: #f0f6fc;
}

:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .pagetitle h1,
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .card-title,
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .card-body,
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .card-text,
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) label,
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .form-label,
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .fw-bold,
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) strong {
  color: #f0f6fc;
}

:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .text-muted,
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .form-text,
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .card-title span,
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .small.text-muted {
  color: #9ba7b4 !important;
}

:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .text-primary,
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) a,
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .dashboard .news h4 a {
  color: #58a6ff !important;
}

:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .text-success {
  color: #56d364 !important;
}

:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .text-danger {
  color: #ff7b72 !important;
}

:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .text-warning {
  color: #d29922 !important;
}

:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .text-secondary {
  color: #9ba7b4 !important;
}

:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .text-dark:not(.badge),
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .border-dark {
  color: #f0f6fc !important;
  border-color: #30363d !important;
}

/* Les montants du POS, des tableaux et du dashboard doivent rester lisibles au premier coup d'oeil. */
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) #totalCDF,
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) #totalTVA,
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) #netAPayer,
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) #totalUSD,
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) #totalPaidDisplay,
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) #restToPayDisplay,
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .dashboard .info-card h6,
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .dashboard-mini-value,
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .dashboard-kpi-value,
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .table td.text-end,
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .datatable-table td.text-end {
  color: #f0f6fc;
  font-weight: 800;
}

:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .h5.text-success #netAPayer,
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .text-success #netAPayer,
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) #restToPayDisplay.text-success,
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) #totalPaidDisplay.text-success {
  color: #56d364 !important;
}

:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) #restToPayDisplay.text-danger {
  color: #ff7b72 !important;
}

/* Surfaces forcees par Bootstrap dans les templates existants. */
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .bg-white,
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .bg-light,
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .card-header.bg-white,
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .payment-row,
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .client-search-empty,
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .list-group-item {
  background-color: #1c2128 !important;
  color: #f0f6fc !important;
  border-color: #30363d !important;
}

:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .card-header,
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .card-footer,
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .modal-header,
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .modal-footer {
  background-color: #161b22;
  border-color: #30363d;
  color: #f0f6fc;
}

/* Formulaires sombres avec placeholders visibles, proche de GitHub dark. */
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .form-control,
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .form-select,
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .input-group-text,
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .dataTable-input,
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .dataTable-selector,
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .datatable-input,
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .datatable-selector {
  background-color: #0d1117 !important;
  border-color: #30363d !important;
  color: #f0f6fc !important;
}

:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .form-control::placeholder,
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .dataTable-input::placeholder,
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .datatable-input::placeholder {
  color: #8b949e !important;
}

:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .form-control:focus,
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .form-select:focus,
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .dataTable-input:focus,
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .datatable-input:focus {
  background-color: #0d1117 !important;
  border-color: #58a6ff !important;
  color: #f0f6fc !important;
  box-shadow: 0 0 0 0.18rem rgba(88, 166, 255, 0.24) !important;
}

:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .form-control:disabled,
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .form-select:disabled,
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .form-control[readonly] {
  background-color: #161b22 !important;
  color: #9ba7b4 !important;
}

/* Tableaux : neutralise les fonds blancs de la feuille faccontrol-tables.css. */
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .table-responsive,
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .datatable-wrapper .datatable-container {
  background: #161b22 !important;
  border-color: #30363d !important;
  box-shadow: none !important;
}

:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .table,
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .datatable-table {
  background: #161b22 !important;
  color: #f0f6fc !important;
  border-color: #30363d !important;
  box-shadow: none !important;
}

:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .table > thead,
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .datatable-table > thead,
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .table > thead > tr,
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .datatable-table > thead > tr,
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .table > thead > tr > th,
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .datatable-table > thead > tr > th {
  background-color: #1f6feb !important;
  color: #ffffff !important;
  border-color: #30363d !important;
}

:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .table > tbody > tr:nth-of-type(odd) > *,
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .datatable-table > tbody > tr:nth-of-type(odd) > * {
  background-color: #161b22 !important;
  color: #f0f6fc !important;
}

:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .table > tbody > tr:nth-of-type(even) > *,
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .datatable-table > tbody > tr:nth-of-type(even) > * {
  background-color: #1c2128 !important;
  color: #f0f6fc !important;
}

:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .table > tbody > tr:hover > *,
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .datatable-table > tbody > tr:hover > * {
  background-color: #21262d !important;
  color: #ffffff !important;
}

:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .table > tfoot > tr > *,
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .datatable-table > tfoot > tr > * {
  background-color: #1c2128 !important;
  color: #f0f6fc !important;
  border-color: #30363d !important;
}

:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .table > :not(caption) > * > *,
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .datatable-table > :not(caption) > * > * {
  border-color: #30363d !important;
}

/* Badges et boutons secondaires visibles sur fond sombre. */
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .badge.bg-light,
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .badge.text-bg-light {
  background-color: #21262d !important;
  color: #f0f6fc !important;
  border: 1px solid #30363d;
}

:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .badge.bg-secondary {
  background-color: #30363d !important;
  color: #f0f6fc !important;
}

:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .btn-outline-secondary,
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .btn-outline-dark {
  color: #c9d1d9;
  border-color: #30363d;
}

:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .btn-outline-secondary:hover,
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .btn-outline-dark:hover {
  color: #ffffff;
  background-color: #21262d;
  border-color: #8b949e;
}

:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .btn-light,
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .btn-secondary {
  background-color: #21262d;
  border-color: #30363d;
  color: #f0f6fc;
}

/* Boutons d'action principaux en theme sombre : contour bleu, fond profond et
icone visible, dans le meme esprit que le bouton "Ventes en attente" du POS. */
.faccontrol-dark-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.48rem;
  font-weight: 700;
  white-space: nowrap;
}

:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .faccontrol-dark-action-btn {
  min-height: 46px;
  padding: 0.68rem 1.18rem !important;
  border: 1px solid #2f81f7 !important;
  border-radius: 10px;
  background: #161b22 !important;
  color: #58a6ff !important;
  box-shadow: inset 0 0 0 1px rgba(88, 166, 255, 0.08);
  letter-spacing: 0;
}

:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .faccontrol-dark-action-btn i {
  color: #58a6ff !important;
  font-size: 1.15rem;
  line-height: 1;
}

:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .faccontrol-dark-action-btn--compact {
  min-width: 36px;
  min-height: 34px;
  padding: 0.42rem 0.58rem !important;
  border-radius: 8px;
}

:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .faccontrol-dark-action-btn--compact i {
  font-size: 1rem;
}

:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .faccontrol-dark-action-btn:hover,
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .faccontrol-dark-action-btn:focus-visible {
  background: rgba(47, 129, 247, 0.12) !important;
  border-color: #58a6ff !important;
  color: #79c0ff !important;
  box-shadow:
    inset 0 0 0 1px rgba(88, 166, 255, 0.16),
    0 0 0 0.18rem rgba(47, 129, 247, 0.16);
}

:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .faccontrol-dark-action-btn:hover i,
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .faccontrol-dark-action-btn:focus-visible i {
  color: #79c0ff !important;
}

/* Sidebar proche de la capture : fond net, actif bleu, texte secondaire plus lisible. */
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .sidebar-nav .nav-heading {
  color: #7d8590;
}

:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .sidebar-nav .nav-link,
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .sidebar-nav .nav-link.collapsed,
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .sidebar-nav .sidebar-action-link,
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .sidebar-nav .sidebar-action-link.collapsed {
  color: #9ba7b4;
}

:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .sidebar-nav .nav-link:not(.collapsed),
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .sidebar-nav .nav-link.active {
  color: #58a6ff;
  background: rgba(88, 166, 255, 0.14);
}

:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .sidebar-nav .nav-link:hover,
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .sidebar-nav .nav-link:focus,
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .sidebar-nav .sidebar-action-link:hover,
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .sidebar-nav .sidebar-action-link:focus {
  color: #f0f6fc;
  background: #21262d;
}

/* POS : produits, paiement, recherche client et ventes en attente restent lisibles. */
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .product-card {
  background: #161b22 !important;
  border: 1px solid #30363d !important;
}

:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .product-card:hover {
  border-color: #58a6ff !important;
}

:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .client-search-results,
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .pending-sale-item {
  background-color: #161b22 !important;
  border-color: #30363d !important;
  color: #f0f6fc !important;
}

:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .client-search-option {
  background: #161b22;
  color: #f0f6fc;
}

:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .client-search-option.active,
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .client-search-option:hover {
  background: #1f6feb;
  color: #ffffff;
}

:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .dashboard-kpi-card--emerald {
  border-left-color: #3fb950;
}

:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .dashboard-kpi-card--blue {
  border-left-color: #2f81f7;
}

:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .dashboard-kpi-card--violet {
  border-left-color: #a371f7;
}

:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .dashboard-kpi-card--amber {
  border-left-color: #d29922;
}

:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .dashboard-mini-card--sales {
  border-left-color: #3fb950;
}

:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .dashboard-mini-card--clients {
  border-left-color: #2f81f7;
}

:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .dashboard-kpi-card::after,
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .dashboard-mini-card::after {
  background: rgba(48, 54, 61, 0.34);
}

:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .alert,
:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .pos-feedback .alert {
  background: #161b22;
  border-color: #30363d;
  color: #f0f6fc;
}

:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .badge.bg-warning {
  color: #1f2328 !important;
}

:where(body.theme-dark, html[data-faccontrol-theme="dark"] body) .back-to-top {
  background: #238636;
}

/* Ecran de connexion : le fond reste sobre et coherent avec le theme actif. */
.login-theme-page {
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--primary-color) 8%, transparent), transparent 28%),
    radial-gradient(circle at bottom right, color-mix(in srgb, #238636 8%, transparent), transparent 24%),
    var(--bg-main) !important;
}

.login-theme-page .login-card,
.login-theme-page .login-input {
  background: var(--bg-card);
  border-color: var(--border-color);
  color: var(--text-main);
}

.login-theme-page .login-title-text,
.login-theme-page .credits,
.login-theme-page .credits a {
  color: var(--text-main);
}

.login-theme-page .login-input::placeholder {
  color: var(--text-muted);
}