/* Coneso CF — brand pass overrides (Phase E.1).
 *
 * The bulk of the legacy templates render Bootstrap 4 utility classes
 * (`btn btn-primary`, `bg-primary`, `text-primary`, …) instead of the new
 * `c-*` primitives. Until the per-page CSS files migrate, this layer
 * re-points Bootstrap's "primary" hue at our brand-primary token so the
 * blue scale picked in Phase A.1 actually shows up in the live UI.
 *
 * Loaded immediately AFTER bootstrap.min.css (in both _head_minimal.html
 * and _head_full.html) so its declarations win the cascade without
 * needing `!important`.
 *
 * Edit policy:
 *   - Override Bootstrap defaults only when their colour disagrees with
 *     the token. Don't add new Bootstrap classes here.
 *   - Every value must resolve to a `var(--…)` token. No literals.
 */

/* --- Buttons ----------------------------------------------------- */
.btn-primary,
.btn-primary:not(:disabled):not(.disabled) {
  background-color: var(--brand-primary-600);
  border-color: var(--brand-primary-600);
  color: var(--text-inverse);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):hover,
.btn-primary:not(:disabled):not(.disabled):focus,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active {
  background-color: var(--brand-primary-700);
  border-color: var(--brand-primary-700);
  color: var(--text-inverse);
  box-shadow: 0 0 0 3px var(--brand-primary-100);
}
.btn-outline-primary {
  color: var(--brand-primary-700);
  border-color: var(--brand-primary-600);
  background-color: transparent;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--brand-primary-600);
  border-color: var(--brand-primary-600);
  color: var(--text-inverse);
}

/* --- Links ------------------------------------------------------- */
a, .nav-link {
  color: var(--text-link);
}
a:hover, .nav-link:hover {
  color: var(--text-link-hover);
}
.text-primary {
  color: var(--brand-primary-600) !important;
}
.bg-primary {
  background-color: var(--brand-primary-600) !important;
}

/* --- Focus ring (a11y) ------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}
.btn:focus,
.btn.focus,
.form-control:focus,
.custom-select:focus {
  outline: none;
  border-color: var(--brand-primary-500);
  box-shadow: 0 0 0 3px var(--brand-primary-100);
}

/* --- Active nav highlight (legacy `.cf-mainnav .is-active`) ------ */
.cf-mainnav .is-active,
.cf-mainnav a.is-active {
  color: var(--brand-primary-700);
  border-bottom-color: var(--brand-primary-600);
}

/* --- Dark-mode tweaks for the same overrides --------------------- *
 * Brand stays loud, but the focus-ring tint needs to be visible on a
 * dark surface so we swap to a brighter tier.                       */
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn-primary:not(:disabled):not(.disabled) {
  background-color: var(--brand-primary-500);
  border-color: var(--brand-primary-500);
}
[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] .btn-primary:focus,
[data-theme="dark"] .btn-primary:not(:disabled):not(.disabled):hover,
[data-theme="dark"] .btn-primary:not(:disabled):not(.disabled):focus {
  background-color: var(--brand-primary-400);
  border-color: var(--brand-primary-400);
  box-shadow: 0 0 0 3px var(--brand-primary-800);
}
[data-theme="dark"] .btn-outline-primary {
  color: var(--brand-primary-300);
  border-color: var(--brand-primary-400);
}
[data-theme="dark"] :focus-visible {
  outline-color: var(--brand-primary-300);
}
[data-theme="dark"] .btn:focus,
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .custom-select:focus {
  border-color: var(--brand-primary-400);
  box-shadow: 0 0 0 3px var(--brand-primary-800);
}

/* ============================================================
 * PR-H follow-up — Bootstrap dark-mode text contrast.
 *
 * Bootstrap 4 hard-codes `color: #495057` etc. on `.card`, `.card-header`,
 * `.col-form-label`, `.form-control`, DataTables labels, and table text.
 * Those values are baked into the vendor stylesheet and do not adapt when
 * `[data-theme="dark"]` flips the surface tokens to dark — the result is
 * the unreadable "dark text on dark background" reported on every
 * cfmanagement page in dark mode.
 *
 * This block re-points each Bootstrap text colour at the design tokens so
 * a single source of truth (the `--text-*` variables) drives both light
 * and dark renderings. Light mode keeps the same look (tokens map to
 * Bootstrap's grays); dark mode picks up the dark-theme overrides from
 * _tokens.css and the text becomes readable.
 *
 * Targets cover both the cfmanagement family and the other migrated pages
 * (homeuser, customerordermanagement, chatbotconsole, etc.) — they all
 * inherit `_brand.css` via `_head_full.html`.
 * ============================================================ */

/* --- Card surface + header -------------------------------------- */
.card {
  background-color: var(--bg-surface);
  color: var(--text-primary);
  border-color: var(--border-subtle);
}
.card-header {
  background-color: var(--bg-base);
  color: var(--text-primary);
  border-bottom-color: var(--border-subtle);
}
.card-header h1, .card-header h2, .card-header h3,
.card-header h4, .card-header h5, .card-header h6 {
  color: inherit;
}
.card-body {
  color: var(--text-primary);
}
.card-footer {
  background-color: var(--bg-base);
  color: var(--text-secondary);
  border-top-color: var(--border-subtle);
}

/* --- Form labels + form-control text ---------------------------- */
label,
.col-form-label,
.form-control-label,
.form-check-label {
  color: var(--text-secondary);
}
.form-control,
.custom-select,
textarea.form-control,
select.form-control {
  background-color: var(--bg-surface);
  color: var(--text-primary);
  border-color: var(--border-default);
}
.form-control::placeholder,
textarea.form-control::placeholder {
  color: var(--text-muted);
  opacity: 1;
}
.form-control[readonly],
.form-control:disabled,
.form-control[disabled],
.custom-select:disabled {
  background-color: var(--bg-base);
  color: var(--text-muted);
}
.form-text,
small.form-text,
.text-muted {
  color: var(--text-muted) !important;
}

/* Phase C — management forms must not force horizontal page-scroll at narrow
   widths. Form controls (and especially <input type=file>, which has an
   intrinsic min-width that ignores the grid) are capped to their container so a
   320px viewport never overflows. box-sizing keeps padding inside the cap. */
.form-control,
.c-input,
input,
select,
textarea {
  max-width: 100%;
  box-sizing: border-box;
}
input[type="file"] {
  max-width: 100%;
}

/* --- Images ----------------------------------------------------- */
/* Phase C — never show the broken-image icon for an empty src. Many imgs ship
   with src="" as a JS-populated placeholder (product QR previews, shipping-bill
   preview, slip previews); hide them until JS/template sets a real URL. This is
   CSS-only so it does NOT alter the src attribute the page JS reads as its
   "no image picked" sentinel. 404s on a *non-empty* src are handled per-img with
   onerror (which sets display:none). */
img[src=""] {
  display: none;
}

/* --- Tables ----------------------------------------------------- */
.table {
  color: var(--text-primary);
  background-color: transparent;
}
.table thead th {
  color: var(--text-primary);
  border-bottom-color: var(--border-default);
  background-color: var(--bg-base);
}
.table th,
.table td {
  border-top-color: var(--border-subtle);
  color: var(--text-primary);
}
.table-bordered,
.table-bordered th,
.table-bordered td {
  border-color: var(--border-subtle);
}
.table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--bg-base);
}
.table-hover tbody tr:hover {
  background-color: var(--bg-base);
  color: var(--text-primary);
}
.thead-light th,
.table .thead-light th {
  background-color: var(--bg-base);
  color: var(--text-primary);
  border-color: var(--border-subtle);
}

/* --- DataTables wrapper text ----------------------------------- */
.dataTables_wrapper,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing,
.dataTables_wrapper .dataTables_paginate {
  color: var(--text-secondary);
}
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
  color: var(--text-secondary);
}
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  background-color: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: 2px var(--space-2);
}
/* Phase C — the "Show [10] entries" length <select> was clipping to "1" + caret:
   the padding override above left no room for the native dropdown arrow and the
   select had no min-width. Give the caret room and a floor width so 2–3 digit
   page sizes (10 / 25 / 100 / All) render fully. */
.dataTables_wrapper .dataTables_length select {
  min-width: 4.5rem;
  padding-right: 1.6rem;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  color: var(--text-secondary) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--brand-primary-600) !important;
  border-color: var(--brand-primary-600) !important;
  color: var(--text-inverse) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--bg-base) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-default) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  color: var(--text-muted) !important;
  background: transparent !important;
  border-color: transparent !important;
}
table.dataTable tbody tr {
  background-color: transparent;
  color: var(--text-primary);
}
table.dataTable.no-footer {
  border-bottom-color: var(--border-default);
}
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
  color: var(--text-primary);
}

/* --- Dropdown menus (navbar Language switcher etc.) ------------- */
.navdropdown-content {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-subtle);
}
.navdropdown-content a {
  color: var(--text-primary);
}
.navdropdown-content a:hover {
  background-color: var(--bg-base);
  color: var(--text-link-hover);
}

/* --- Misc Bootstrap text utilities used in the templates -------- */
.text-secondary { color: var(--text-secondary) !important; }
.text-dark      { color: var(--text-primary)   !important; }
.text-body      { color: var(--text-primary)   !important; }

/* --- Dark-mode-specific surface tweaks --------------------------
 * Some Bootstrap shadows and the table-striped tint don't read well on the
 * darker surface. Soften them to match the design tokens. */
[data-theme="dark"] .card,
[data-theme="dark"] .card-header,
[data-theme="dark"] .card-footer {
  border-color: var(--border-subtle);
}
[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--bg-base);
}
[data-theme="dark"] .table-hover tbody tr:hover {
  background-color: var(--bg-raised);
}
[data-theme="dark"] .thead-light th,
[data-theme="dark"] .table .thead-light th {
  background-color: var(--bg-base);
  color: var(--text-primary);
}
[data-theme="dark"] .form-control,
[data-theme="dark"] .custom-select {
  background-color: var(--bg-surface);
  color: var(--text-primary);
  border-color: var(--border-default);
}
[data-theme="dark"] .form-control[readonly],
[data-theme="dark"] .form-control:disabled,
[data-theme="dark"] .custom-select:disabled {
  background-color: var(--bg-base);
  color: var(--text-muted);
}
[data-theme="dark"] .dataTables_wrapper .dataTables_length select,
[data-theme="dark"] .dataTables_wrapper .dataTables_filter input {
  background-color: var(--bg-surface);
  color: var(--text-primary);
  border-color: var(--border-default);
}