/*
 * Site-wide dark theme, toggled via the [data-theme="dark"] attribute on <html>.
 * Applies to both the public client site (nfdc/cusm/paramed layouts) and the
 * internal dashboard portals (Staff/Manager/Admin/Coordinator/Dietitian/Supplier/Shipper).
 * Toggled by the button injected next to the Language dropdown; state persists via
 * localStorage (see the inline scripts in templates/element/share/css.php).
 */

/* ===== Toggle button (same look in both themes) ===== */
.theme-toggle-btn {
    /* Strip native OS/browser button chrome -- otherwise Firefox's dark native form-control
       styling (triggered by color-scheme: dark below) renders its own chunky button chrome
       on top of/instead of this custom circular look. */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    margin: 0;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 50%;
    background: transparent;
    color: #495057;
    cursor: pointer;
    line-height: 1;
}

.theme-toggle-btn:hover,
.theme-toggle-btn:focus {
    background: rgba(0, 0, 0, .06);
    outline: none;
}

.theme-toggle-icon {
    display: inline-flex;
    width: 16px;
    height: 16px;
    overflow: hidden;
}

.theme-toggle-icon svg {
    width: 100%;
    height: 100%;
}

/* The dashboard layouts pull in datta-able's style.css, which @imports feather.css and defines
   an unscoped `.icon-sun:before { content: "\e8cf" }` / `.icon-moon:before { content: "\e898" }`.
   The icon classes here are namespaced so they cannot collide with it, and this belt-and-braces
   rule kills any other vendor icon font that tries to inject a glyph into the toggle. */
.theme-toggle-icon::before,
.theme-toggle-icon::after {
    content: none !important;
}

.theme-toggle-icon--moon {
    display: none;
}

html[data-theme="dark"] .theme-toggle-icon--sun {
    display: none;
}

html[data-theme="dark"] .theme-toggle-icon--moon {
    display: inline-flex;
}

html[data-theme="dark"] .theme-toggle-btn {
    border-color: rgba(255, 255, 255, .25);
    color: #e4e6eb;
}

html[data-theme="dark"] .theme-toggle-btn:hover,
html[data-theme="dark"] .theme-toggle-btn:focus {
    background: rgba(255, 255, 255, .12);
}

/* ===== Dark theme palette + overrides ===== */
html[data-theme="dark"] {
    color-scheme: dark;
    --dt-bg: #14161a;
    --dt-surface: #1e2126;
    --dt-surface-alt: #262a31;
    --dt-border: #383e46;
    --dt-text: #e4e6eb;
    --dt-text-muted: #9aa0a8;
    --dt-link: #5aa9f7;
    --dt-accent: #7fa600;
}

html[data-theme="dark"] body {
    background-color: var(--dt-bg) !important;
    color: var(--dt-text) !important;
}

html[data-theme="dark"] a {
    color: var(--dt-link);
}

html[data-theme="dark"] hr,
html[data-theme="dark"] .dropdown-divider {
    border-color: var(--dt-border) !important;
}

/* Headers / top navigation (client site + dashboard portals) */
html[data-theme="dark"] .header-area,
html[data-theme="dark"] .dash-topnav,
html[data-theme="dark"] .header-mobile-menu,
html[data-theme="dark"] .dash-toolbar,
html[data-theme="dark"] .navbar-light {
    background-color: var(--dt-surface) !important;
    color: var(--dt-text) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .5) !important;
}

html[data-theme="dark"] .navbar-light .nav-link,
html[data-theme="dark"] .navbar-light .navbar-toggler-icon,
html[data-theme="dark"] .nfdc-header-nav a {
    color: var(--dt-text) !important;
}

/* dashboard-topnav.css scopes its base nav-link colour under .dash-topnav .navbar-nav .nav-link
   (with !important) specifically so it wins over stray legacy rules -- match that same selector
   chain here so our override actually beats it on specificity, not just source order. */
html[data-theme="dark"] .dash-topnav .navbar-nav .nav-link,
html[data-theme="dark"] .dash-topnav .navbar-nav .nav-link.dropdown-toggle {
    color: var(--dt-text) !important;
}

/* Same story for the "active section" pill -- same selector chain, same !important, so it
   needs the same specificity-matching treatment as the base nav-link rule above.
   .nav-item.active > .nav-link never matched anything: the active-link script at the bottom of
   dashboard_topnav.php puts .active on the <a> itself, never on the <li> -- the same mistake
   dashboard-topnav.css already documents having fixed on its own side. So the light pill kept
   winning in dark mode, and Home showed a pale tint on the dark bar. */
html[data-theme="dark"] .dash-topnav .navbar-nav .nav-link.active:not(.main-btn),
html[data-theme="dark"] .dash-topnav .navbar-nav .dropdown-toggle.active {
    color: #a8d651 !important;
    background-color: rgba(127, 166, 0, .18) !important;
    box-shadow: inset 0 -2px 0 #a8d651 !important;
}

/* The selected entry in a nav dropdown -- the current language, the open section. The generic
   .dropdown-item.active rule further down paints it --dt-surface-alt, the same grey as :hover,
   so the selection was invisible; this marks it with the accent the light theme uses. More
   specific than that rule (one extra class), so it wins wherever both apply. */
html[data-theme="dark"] .dash-topnav .dropdown-item.active,
html[data-theme="dark"] .dash-topnav .role-category-toggle.active {
    background-color: rgba(127, 166, 0, .18) !important;
    color: #a8d651 !important;
}

html[data-theme="dark"] .dash-topnav .navbar-nav .nav-link:not(.main-btn):hover,
html[data-theme="dark"] .dash-topnav .navbar-nav .nav-link:not(.main-btn):focus,
html[data-theme="dark"] .dash-topnav .dropdown-item:hover,
html[data-theme="dark"] .dash-topnav .dropdown-item:focus,
html[data-theme="dark"] .dash-topnav .role-category-toggle:hover {
    color: #a8d651 !important;
    background-color: rgba(127, 166, 0, .12) !important;
}

html[data-theme="dark"] .navbar-toggler {
    border-color: var(--dt-border);
}

html[data-theme="dark"] .nfdc-header-right > div:not(:first-child)::before {
    color: var(--dt-border);
}

/* Dropdown menus (language switcher, portal menus, settings, help, etc.) */
html[data-theme="dark"] .dropdown-menu {
    background-color: var(--dt-surface) !important;
    border-color: var(--dt-border) !important;
    color: var(--dt-text) !important;
}

html[data-theme="dark"] .dropdown-item {
    color: var(--dt-text) !important;
}

html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus,
html[data-theme="dark"] .dropdown-item.active {
    background-color: var(--dt-surface-alt) !important;
    color: var(--dt-text) !important;
}

html[data-theme="dark"] .dropdown-header {
    color: var(--dt-text-muted) !important;
}

/* Page containers / dashboard shell */
html[data-theme="dark"] #content,
html[data-theme="dark"] .pcoded-main-container,
html[data-theme="dark"] .pcoded-wrapper,
html[data-theme="dark"] .pcoded-content,
html[data-theme="dark"] .pcoded-inner-content,
html[data-theme="dark"] .main-body,
html[data-theme="dark"] .page-wrapper,
html[data-theme="dark"] .page-header,
html[data-theme="dark"] .page-block,
html[data-theme="dark"] #page-init-overlay {
    background-color: var(--dt-bg) !important;
    color: var(--dt-text) !important;
}

html[data-theme="dark"] .page-header-title,
html[data-theme="dark"] .breadcrumb {
    background-color: transparent !important;
    color: var(--dt-text) !important;
}

/* Cards / panels */
html[data-theme="dark"] .card,
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-body,
html[data-theme="dark"] .card-footer,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .h-list-body,
html[data-theme="dark"] .h-list-header,
html[data-theme="dark"] .header-user-list,
html[data-theme="dark"] .header-chat {
    background-color: var(--dt-surface) !important;
    border-color: var(--dt-border) !important;
    color: var(--dt-text) !important;
}

html[data-theme="dark"] .card-header {
    border-bottom-color: var(--dt-border) !important;
}

/* Card/widget headings (h1-h6) carry their own explicit vendor colour that
   beats the inherited .card colour, so they need to be targeted directly. */
html[data-theme="dark"] .card h1,
html[data-theme="dark"] .card h2,
html[data-theme="dark"] .card h3,
html[data-theme="dark"] .card h4,
html[data-theme="dark"] .card h5,
html[data-theme="dark"] .card h6 {
    color: var(--dt-text) !important;
}

html[data-theme="dark"] .card .text-muted {
    color: var(--dt-text-muted) !important;
}

html[data-theme="dark"] .card-footer,
html[data-theme="dark"] .modal-footer,
html[data-theme="dark"] .modal-header {
    border-color: var(--dt-border) !important;
}

/* Tables */
html[data-theme="dark"] table,
html[data-theme="dark"] .table {
    color: var(--dt-text) !important;
    background-color: transparent;
}

html[data-theme="dark"] .table th,
html[data-theme="dark"] .table td,
html[data-theme="dark"] .table thead th {
    border-color: var(--dt-border) !important;
}

/* Header and filter rows: the light theme greys them (.table-hover thead in
   nfdcDash-added-styles-B.css, Bootstrap's .table-light / .thead-light), which left the dark
   theme's light text on a light grey -- the column titles of the lists (users, orders...)
   vanished. */
html[data-theme="dark"] .table-hover thead,
html[data-theme="dark"] .table thead.table-light,
html[data-theme="dark"] .table thead.table-light th,
html[data-theme="dark"] .table .thead-light th,
html[data-theme="dark"] .table .table-light,
html[data-theme="dark"] .table .table-light > th,
html[data-theme="dark"] .table .table-light > td {
    background-color: var(--dt-surface-alt) !important;
    color: var(--dt-text) !important;
}

/* Users list: a deleted user's row (pale red on the light theme, share-added-styles-Q.css). */
html[data-theme="dark"] .table tbody tr.user-row-deleted {
    background-color: #3d2327 !important;
}
html[data-theme="dark"] .table-hover tbody tr.user-row-deleted:hover {
    background-color: #4d2a2f !important;
}

html[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd),
html[data-theme="dark"] .table-hover tbody tr:hover {
    background-color: var(--dt-surface-alt) !important;
    color: var(--dt-text) !important;
}

html[data-theme="dark"] .table-bordered,
html[data-theme="dark"] .table-bordered th,
html[data-theme="dark"] .table-bordered td {
    border-color: var(--dt-border) !important;
}

/* Forms */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .custom-select,
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    background-color: var(--dt-surface-alt) !important;
    border-color: var(--dt-border) !important;
    color: var(--dt-text) !important;
}

html[data-theme="dark"] .form-control::placeholder {
    color: var(--dt-text-muted) !important;
}

html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .form-control[readonly] {
    background-color: var(--dt-surface) !important;
    color: var(--dt-text-muted) !important;
}

/* .form-select (list filters, defined in share-added-styles-Q.css): the generic rule above
   darkens its background; give it a light arrow and a focus ring that shows on dark. */
html[data-theme="dark"] select.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23e4e6eb' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
}
html[data-theme="dark"] select.form-select:focus {
    border-color: var(--dt-accent) !important;
    box-shadow: 0 0 0 .2rem rgba(127, 166, 0, .35);
}
html[data-theme="dark"] select.form-select:disabled {
    background-color: var(--dt-surface) !important;
    color: var(--dt-text-muted) !important;
}

/* nice-select (jquery.nice-select swaps a <select> for a div.nice-select + ul.list): the generic
   select rule doesn't reach the div, which stayed white with its white list on the dark page. */
html[data-theme="dark"] .nice-select,
html[data-theme="dark"] .nice-select .list {
    background-color: var(--dt-surface-alt) !important;
    border-color: var(--dt-border) !important;
    color: var(--dt-text) !important;
}
html[data-theme="dark"] .nice-select:after {
    border-color: var(--dt-text) !important;
}
html[data-theme="dark"] .nice-select .option:hover,
html[data-theme="dark"] .nice-select .option.focus,
html[data-theme="dark"] .nice-select .option.selected.focus {
    background-color: var(--dt-border) !important;
}
html[data-theme="dark"] .nice-select.open,
html[data-theme="dark"] .nice-select:focus {
    border-color: var(--dt-accent) !important;
}

html[data-theme="dark"] .input-group-text {
    background-color: var(--dt-surface-alt) !important;
    border-color: var(--dt-border) !important;
    color: var(--dt-text) !important;
}

/* Front-site boxed content that isn't a Bootstrap .card (login, register, etc.) --
   vendor CSS sets explicit colours on headings/labels inside these boxes, so
   descendants need the override too, not just the container. */
html[data-theme="dark"] .login-wrapper,
html[data-theme="dark"] .auth-wrapper {
    background-color: var(--dt-surface) !important;
}

html[data-theme="dark"] .login-wrapper,
html[data-theme="dark"] .login-wrapper :not(.btn),
html[data-theme="dark"] .auth-wrapper,
html[data-theme="dark"] .auth-wrapper :not(.btn) {
    color: var(--dt-text) !important;
}

/* select2 (used across dashboard portals) */
html[data-theme="dark"] .select2-container--default .select2-selection--single,
html[data-theme="dark"] .select2-container--default .select2-selection--multiple {
    background-color: var(--dt-surface-alt) !important;
    border-color: var(--dt-border) !important;
    color: var(--dt-text) !important;
}

html[data-theme="dark"] .select2-container--default .select2-selection__rendered {
    color: var(--dt-text) !important;
}

html[data-theme="dark"] .select2-dropdown {
    background-color: var(--dt-surface) !important;
    border-color: var(--dt-border) !important;
}

html[data-theme="dark"] .select2-results__option {
    color: var(--dt-text) !important;
}

html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--dt-accent) !important;
    color: #fff !important;
}

/* DataTables (Supplier portal) */
html[data-theme="dark"] .dataTables_wrapper,
html[data-theme="dark"] .dataTables_filter,
html[data-theme="dark"] .dataTables_length,
html[data-theme="dark"] .dataTables_info {
    color: var(--dt-text) !important;
}

html[data-theme="dark"] .paginate_button {
    color: var(--dt-text) !important;
}

html[data-theme="dark"] table.dataTable tbody tr {
    background-color: transparent !important;
}

/* Badges / alerts (keep semantic colours, just tone backgrounds where "light") */
html[data-theme="dark"] .badge-light {
    background-color: var(--dt-surface-alt) !important;
    color: var(--dt-text) !important;
}

html[data-theme="dark"] .alert-light {
    background-color: var(--dt-surface-alt) !important;
    border-color: var(--dt-border) !important;
    color: var(--dt-text) !important;
}

/* Nav tabs / pills / pagination */
html[data-theme="dark"] .nav-tabs {
    border-color: var(--dt-border) !important;
}

html[data-theme="dark"] .nav-tabs .nav-link {
    color: var(--dt-text) !important;
}

html[data-theme="dark"] .nav-tabs .nav-link.active {
    background-color: var(--dt-surface) !important;
    border-color: var(--dt-border) var(--dt-border) var(--dt-surface) !important;
    color: var(--dt-text) !important;
}

html[data-theme="dark"] .page-link {
    background-color: var(--dt-surface) !important;
    border-color: var(--dt-border) !important;
    color: var(--dt-text) !important;
}

html[data-theme="dark"] .page-item.disabled .page-link {
    background-color: var(--dt-bg) !important;
    color: var(--dt-text-muted) !important;
}

/* Utility classes commonly used inline */
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-light {
    background-color: var(--dt-surface) !important;
}

html[data-theme="dark"] .text-dark {
    color: var(--dt-text) !important;
}

html[data-theme="dark"] .text-muted {
    color: var(--dt-text-muted) !important;
}

html[data-theme="dark"] .shadow,
html[data-theme="dark"] .shadow-sm,
html[data-theme="dark"] .shadow-lg {
    box-shadow: 0 .125rem .5rem rgba(0, 0, 0, .6) !important;
}

/* Scrollbars (WebKit) */
html[data-theme="dark"] ::-webkit-scrollbar {
    background-color: var(--dt-bg);
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background-color: var(--dt-border);
}


/* ===== Carte d'authentification (.auth-card, /forgot) =====
   Les champs sont déjà couverts par la règle générique input/.form-control plus haut ;
   il ne reste que la surface, les textes et les deux traits. */
html[data-theme="dark"] .auth-card {
    background-color: var(--dt-surface) !important;
    border-color: var(--dt-border);
    box-shadow: none;
}

html[data-theme="dark"] .auth-card__title {
    color: var(--dt-text);
}

html[data-theme="dark"] .auth-card__lead,
html[data-theme="dark"] .auth-field label {
    color: var(--dt-text-muted);
}

html[data-theme="dark"] .auth-card__icon {
    background: rgba(127, 166, 0, .16);
    color: var(--dt-accent);
}

html[data-theme="dark"] .auth-card__footer {
    border-top-color: var(--dt-border);
}

html[data-theme="dark"] .auth-link {
    color: var(--dt-accent);
}

html[data-theme="dark"] .auth-link:hover,
html[data-theme="dark"] .auth-link:focus {
    color: #a8d651;
}

/* Le bouton est un <button> : la règle générique input/select/textarea ne l'atteint pas,
   mais le thème sombre ne doit pas non plus l'éteindre -- le vert de marque reste lisible. */
html[data-theme="dark"] .auth-submit {
    background: #7fa600;
    color: #14161a;
}

html[data-theme="dark"] .auth-submit:hover {
    background: #a8d651;
}


/* ===== Formulaire de contact (.auth-card--wide) ===== */
html[data-theme="dark"] .auth-captcha__image {
    border-color: var(--dt-border);
}

html[data-theme="dark"] .auth-captcha__hint {
    color: var(--dt-text-muted);
}

html[data-theme="dark"] .auth-alert {
    background: rgba(220, 76, 63, .14);
    border-color: rgba(220, 76, 63, .4);
    color: #f3a9a2;
}


/* ===== Page Contact (coordonnées, trombinoscope) ===== */
html[data-theme="dark"] .contact-details li + li {
    border-top-color: var(--dt-border);
}

html[data-theme="dark"] .contact-details a,
html[data-theme="dark"] .team-card .team-email {
    color: var(--dt-accent) !important;
}

html[data-theme="dark"] .contact-icon {
    background: rgba(127, 166, 0, .16);
    color: var(--dt-accent);
}

html[data-theme="dark"] .team-card {
    background-color: var(--dt-surface) !important;
    border-color: var(--dt-border);
    box-shadow: none;
}

html[data-theme="dark"] .team-card .team-name {
    color: var(--dt-text);
}

html[data-theme="dark"] .team-card .team-title {
    color: var(--dt-text-muted);
}

html[data-theme="dark"] .team-card .team-phone {
    color: var(--dt-text);
}