/* ==========================================================================
   Blastforce UI kit (bf-*)
   Shared components for list pages: status tabs, filter toolbar, tables
   (incl. mobile stacked mode), status pills, empty states, row actions.
   Colors come from Vuexy CSS variables only, so light and dark themes are
   both covered without per-theme overrides.
   Markup helpers: views/mixins/ui.pug · Behavior: public/js/app-ui.js
   ========================================================================== */

/* --- Status tabs -------------------------------------------------------- */
.bf-tabs {
  display: flex;
  align-items: stretch;
  gap: 0.25rem;
  padding: 0 0.5rem;
  border-bottom: 1px solid var(--bs-border-color);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.bf-tabs::-webkit-scrollbar {
  display: none;
}
.bf-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.7rem 0.875rem;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  margin-bottom: -1px;
  background: transparent;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--bs-secondary-color);
  white-space: nowrap;
  cursor: pointer;
  transition:
    color 0.15s ease,
    border-color 0.15s ease;
}
.bf-tab:hover {
  color: var(--bs-heading-color);
}
.bf-tab.is-active {
  color: var(--bs-primary);
  border-bottom-color: var(--bs-primary);
}
/* Deep brand red lacks contrast on dark navy — use the theme's lifted
   emphasis tone for the label, keep the brand red underline. */
[data-bs-theme='dark'] .bf-tab.is-active {
  color: var(--bs-primary-text-emphasis);
}
[data-bs-theme='dark'] .bf-tab.is-active .bf-tab-count:not(.badge) {
  color: var(--bs-primary-text-emphasis);
}
.bf-tab-count {
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.3em 0.55em;
  border-radius: 1rem;
  background: rgba(var(--bs-base-color-rgb), 0.07);
  color: var(--bs-secondary-color);
}
.bf-tab.is-active .bf-tab-count:not(.badge) {
  background: rgba(var(--bs-primary-rgb), 0.12);
  color: var(--bs-primary);
}
.bf-tab .badge.bf-tab-count {
  padding: 0.3em 0.55em;
  font-size: 0.72rem;
}

/* --- Filter toolbar ------------------------------------------------------ */
.bf-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
}
.bf-toolbar > .form-select {
  width: auto;
  flex: 0 1 auto;
  min-width: 150px;
  max-width: 230px;
}
.bf-search {
  flex: 1 1 240px;
  min-width: 200px;
}
.bf-search .input-group-text {
  background: transparent;
}
.bf-toolbar-count {
  margin-left: auto;
  font-size: 0.8125rem;
  color: var(--bs-secondary-color);
  white-space: nowrap;
}
@media (max-width: 575.98px) {
  .bf-toolbar {
    padding: 0.75rem;
    gap: 0.5rem;
  }
  .bf-search {
    flex: 1 1 100%;
    min-width: 0;
  }
  .bf-toolbar > .form-select {
    flex: 1 1 calc(50% - 0.25rem);
    max-width: none;
  }
}

/* --- Tables --------------------------------------------------------------- */
.bf-table th {
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
  white-space: nowrap;
}
.bf-table td {
  vertical-align: middle;
}
.bf-cell-main {
  font-weight: 600;
}
.bf-cell-meta {
  font-size: 0.8125rem;
  color: var(--bs-secondary-color);
  margin-top: 0.15rem;
}
.bf-nowrap {
  white-space: nowrap;
}
.bf-num {
  font-variant-numeric: tabular-nums;
}

/* Row actions: at most one visible quick action + a kebab dropdown. */
.bf-row-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.375rem;
  white-space: nowrap;
}

/* --- Status pill ----------------------------------------------------------- */
.badge.bf-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.bf-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}

/* --- Empty state ------------------------------------------------------------ */
.bf-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 2rem 1rem;
  border: 1px dashed var(--bs-border-color);
  border-radius: 10px;
  color: var(--bs-secondary-color);
  text-align: center;
}
.bf-empty i {
  font-size: 1.6rem;
  opacity: 0.55;
}

/* --- Mobile stacked tables (.bf-table--stack) --------------------------------
   Under 768px each row becomes a small card: the lead cell (.bf-stack-lead)
   spans full width, other cells show a label from data-th="…", and the
   actions cell (.bf-stack-actions) right-aligns. Collapse rows (inline edit
   forms) keep working through Bootstrap's .show class. */
@media (max-width: 767.98px) {
  .table.bf-table--stack thead {
    display: none;
  }
  .table.bf-table--stack tbody {
    display: block;
    width: 100%;
  }
  .table.bf-table--stack tbody > tr {
    display: block;
    width: 100%;
    padding: 0.65rem 0.25rem;
    border-bottom: 1px solid var(--bs-border-color);
  }
  .table.bf-table--stack tbody > tr.collapse:not(.show):not(.collapsing) {
    display: none;
    padding: 0;
    border: 0;
  }
  .table.bf-table--stack tbody > tr > td,
  .table.bf-table--stack tbody > tr > th {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.3rem 0;
    border: 0;
    box-shadow: none;
    text-align: start;
  }
  .table.bf-table--stack tbody > tr > td[data-th]::before {
    content: attr(data-th);
    flex: 0 0 42%;
    max-width: 42%;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
  }
  .table.bf-table--stack tbody > tr > td.bf-stack-lead {
    display: block;
    padding-bottom: 0.35rem;
  }
  .table.bf-table--stack tbody > tr > td.bf-stack-actions {
    justify-content: flex-end;
    padding-top: 0.45rem;
  }
  .table.bf-table--stack tbody > tr > td[colspan] {
    display: block;
  }
  .table.bf-table--stack tbody > tr > td:empty {
    display: none;
  }
}

/* --- Forms (.bf-form / .bf-form-panel) --------------------------------------
   The BT form treatment (views/partials/bts/_bt_styles.pug), generalized so
   every CRUD form reads the same. Put .bf-form on the form (or its wrapper)
   to get the input styling; .bf-form-panel is the framed paper panel that
   replaces the old grey .bg-body-tertiary inline-edit wrappers. */
.bf-form-panel {
  border: 1px solid var(--bs-border-color);
  border-radius: 12px;
  background: var(--bs-paper-bg);
  padding: 1rem;
}
.bf-form .form-label {
  font-weight: 600;
}
html[data-bs-theme='light'] .bf-form .form-label {
  color: rgba(0, 0, 0, 0.6);
}
html[data-bs-theme='light'] .bf-form .form-control,
html[data-bs-theme='light'] .bf-form .form-select {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.8);
  box-shadow: none;
  border-radius: 10px;
  transition:
    border-color 0.14s ease,
    box-shadow 0.14s ease,
    background 0.14s ease;
}
html[data-bs-theme='light'] .bf-form .form-control::placeholder {
  color: rgba(0, 0, 0, 0.35);
}
html[data-bs-theme='light'] .bf-form .form-control:hover,
html[data-bs-theme='light'] .bf-form .form-select:hover {
  border-color: rgba(var(--bs-primary-rgb), 0.22);
  background: rgba(255, 255, 255, 0.98);
}
html[data-bs-theme='light'] .bf-form .form-control:focus,
html[data-bs-theme='light'] .bf-form .form-select:focus {
  border-color: rgba(var(--bs-primary-rgb), 0.4);
  box-shadow: 0 0 0 0.12rem rgba(var(--bs-primary-rgb), 0.1);
  background: rgba(255, 255, 255, 1);
}
html[data-bs-theme='dark'] .bf-form .form-label {
  color: rgba(255, 255, 255, 0.72);
}
html[data-bs-theme='dark'] .bf-form .form-control,
html[data-bs-theme='dark'] .bf-form .form-select {
  background: rgba(15, 18, 30, 0.72);
  color: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  transition:
    border-color 0.14s ease,
    box-shadow 0.14s ease,
    background 0.14s ease;
}
html[data-bs-theme='dark'] .bf-form .form-control::placeholder {
  color: rgba(255, 255, 255, 0.38);
}
html[data-bs-theme='dark'] .bf-form .form-control:hover,
html[data-bs-theme='dark'] .bf-form .form-select:hover {
  border-color: rgba(var(--bs-primary-rgb), 0.45);
}
html[data-bs-theme='dark'] .bf-form .form-control:focus,
html[data-bs-theme='dark'] .bf-form .form-select:focus {
  border-color: rgba(var(--bs-primary-rgb), 0.55);
  box-shadow: 0 0 0 0.14rem rgba(var(--bs-primary-rgb), 0.2);
}
/* Keep joined input-groups seamless despite the 10px control radius. */
.bf-form .input-group > .form-control:not(:first-child),
.bf-form .input-group > .form-select:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.bf-form .input-group > .form-control:not(:last-child),
.bf-form .input-group > .form-select:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
html[data-bs-theme='dark'] .bf-form .input-group-text {
  background: rgba(15, 18, 30, 0.72);
  color: rgba(255, 255, 255, 0.72);
  border-color: rgba(255, 255, 255, 0.14);
}

/* --- Dark-mode readability for brand-tinted elements ------------------------
   The deep brand red is too dim as text on dark tinted surfaces; use the
   theme's lifted emphasis tone (same fix as the active tab). */
[data-bs-theme='dark'] .badge.bg-label-primary {
  color: var(--bs-primary-text-emphasis) !important;
}
[data-bs-theme='dark'] .btn-label-primary {
  --bs-btn-color: var(--bs-primary-text-emphasis);
  --bs-btn-hover-color: var(--bs-primary-text-emphasis);
  --bs-btn-active-color: var(--bs-primary-text-emphasis);
}
[data-bs-theme='dark'] .crud-doc-link {
  color: var(--bs-primary-text-emphasis);
}
/* Vuexy routes <a> colors through --bs-custom-link-color (see _root.scss),
   bypassing $link-color-dark — lift it the same way. */
[data-bs-theme='dark'] {
  --bs-custom-link-color: var(--bs-primary-text-emphasis);
}

/* ==========================================================================
   Shared legacy classes (crud-*), moved out of products.pug / clients.pug so
   every CRUD page uses one copy. Borders and tints use theme variables, so
   the old html[data-bs-theme="dark"] overrides are no longer needed.
   ========================================================================== */
.crud-wrap {
  max-width: 1480px;
  margin: 0 auto;
}
.crud-muted {
  color: var(--bs-secondary-color);
}
.crud-filter-card .form-label,
.crud-form-section .form-label,
.crud-unified-form .form-label {
  font-weight: 600;
}
.crud-section-title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
}
.crud-unified-form {
  border: 1px solid var(--bs-border-color);
  border-radius: 12px;
  padding: 1rem;
  background: var(--bs-paper-bg);
}
.crud-form-section-title {
  font-weight: 700;
  color: var(--bs-secondary-color);
  text-transform: uppercase;
  font-size: 0.76rem;
  letter-spacing: 0.05em;
}
/* Sub-sections inside forms mirror the BT form's pm-section tint. */
.crud-form-section {
  border: 1px solid rgba(var(--bs-primary-rgb), 0.12);
  border-radius: 10px;
  padding: 12px;
  background: rgba(var(--bs-primary-rgb), 0.025);
}
[data-bs-theme='dark'] .crud-form-section {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}
.crud-repeat-row {
  align-items: end;
}
.crud-section-card {
  overflow: visible;
}
.crud-section-card .table,
.crud-table-card .table {
  margin-bottom: 0;
}
.crud-table-card {
  overflow: hidden;
}
.crud-row-name {
  min-width: 230px;
}
.crud-product-name {
  min-width: 250px;
}
.crud-actions {
  white-space: nowrap;
}
.crud-doc-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 600;
  border: 0;
  background: transparent;
  color: var(--bs-primary);
  padding: 0;
}
.crud-doc-link:hover {
  color: var(--bs-primary-text-emphasis);
}
.crud-file-current {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  color: var(--bs-secondary-color);
  font-size: 0.84rem;
}
.crud-file-current a {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.crud-product-thumb {
  width: 38px;
  height: 38px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--bs-border-color);
  background: rgba(var(--bs-base-color-rgb), 0.04);
}
.crud-product-image-current {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}
.crud-product-image-current img {
  width: 54px;
  height: 54px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--bs-border-color);
}
.crud-profit-field[readonly] {
  background: rgba(var(--bs-base-color-rgb), 0.05);
  font-weight: 600;
}
.crud-action-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.crud-action-menu .dropdown-item i {
  width: 1rem;
  opacity: 0.75;
}
.crud-action-menu .dropdown-menu {
  z-index: 1080;
}
.crud-empty {
  border: 1px dashed var(--bs-border-color);
  border-radius: 10px;
  padding: 18px;
  color: var(--bs-secondary-color);
}
.crud-stock-warning {
  color: var(--bs-warning);
  font-weight: 700;
}
@media (min-width: 992px) {
  .crud-section-card .table-responsive {
    overflow: visible;
  }
}

/* --- Stat / KPI cards (bf-stat) ------------------------------------------- */
.bf-stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.bf-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: start;
  border: 1px solid var(--bs-border-color);
  border-radius: 12px;
  padding: 12px 14px;
  background: var(--bs-card-bg);
}
button.bf-stat,
a.bf-stat {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}
button.bf-stat:hover,
button.bf-stat.is-active,
a.bf-stat:hover {
  color: inherit;
  border-color: rgba(var(--bs-primary-rgb), 0.4);
  box-shadow: 0 0 0 0.12rem rgba(var(--bs-primary-rgb), 0.08);
}
.bf-stat__label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
}
.bf-stat__value {
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--bs-heading-color);
}
.bf-stat__hint {
  font-size: 0.78rem;
  color: var(--bs-secondary-color);
}
@media (max-width: 575.98px) {
  .bf-stat-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- Toolbar text inputs (e.g. "# BT", "# Projet") ------------------------- */
.bf-toolbar > .form-control {
  width: auto;
  flex: 0 1 auto;
  min-width: 110px;
  max-width: 170px;
}
@media (max-width: 575.98px) {
  .bf-toolbar > .form-control {
    flex: 1 1 calc(50% - 0.25rem);
    max-width: none;
  }
}

/* --- Preset row (date shortcuts etc.) -------------------------------------- */
.bf-preset-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
}
@media (max-width: 575.98px) {
  .bf-preset-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .bf-preset-row::-webkit-scrollbar {
    display: none;
  }
}

/* --- Sortable table headers (.bf-sort-btn) ---------------------------------
   A reset button that inherits the th typography; pages keep their own
   data-* sort attributes and JS. */
.bf-sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  white-space: nowrap;
  cursor: pointer;
}
.bf-sort-btn:hover {
  color: var(--bs-heading-color);
}
.bf-sort-btn .bf-sort-icon {
  font-size: 0.85em;
  opacity: 0.5;
}
.bf-sort-btn.is-sorted,
.bf-sort-btn.is-active {
  color: var(--bs-primary);
}
.bf-sort-btn.is-sorted .bf-sort-icon,
.bf-sort-btn.is-active .bf-sort-icon {
  opacity: 1;
}
[data-bs-theme='dark'] .bf-sort-btn.is-sorted,
[data-bs-theme='dark'] .bf-sort-btn.is-active {
  color: var(--bs-primary-text-emphasis);
}