/* Pastel success overrides (Sage Pastel) */
:root {
  --bs-success: #7bae7f;
  --bs-success-rgb: 123, 174, 127;

  /* Emphasis and subtle variants */
  --bs-success-text-emphasis: color-mix(in sRGB, #000 65%, var(--bs-success));
  --bs-success-bg-subtle: rgba(var(--bs-success-rgb), 0.12);
  --bs-success-border-subtle: rgba(var(--bs-success-rgb), 0.28);
}

/* Dark theme tuning */
[data-bs-theme="dark"] {
  /* Make text emphasis lighter in dark */
  --bs-success-text-emphasis: color-mix(in sRGB, var(--bs-paper-bg) 30%, var(--bs-success));
  /* Softer backgrounds in dark */
  --bs-success-bg-subtle: color-mix(in sRGB, var(--bs-paper-bg) 88%, var(--bs-success));
  --bs-success-border-subtle: color-mix(in sRGB, var(--bs-paper-bg) 72%, var(--bs-success));
}

/*
 * Alert text contrast fix.
 * core.css defines .alert-{type} twice: an earlier rule sets --bs-alert-color to the
 * *-text-emphasis token (readable against the *-bg-subtle background), but a later
 * "Alert icon styles" block overrides it with the raw brand color instead — the same
 * color the background is tinted from. That's unreadable for several types (e.g.
 * orange warning text on pale-orange background). Route the text color back through
 * the text-emphasis tokens, matching Bootstrap's own intended pairing with -bg-subtle.
 */
.alert-primary { --bs-alert-color: var(--bs-primary-text-emphasis); }
.alert-secondary { --bs-alert-color: var(--bs-secondary-text-emphasis); }
.alert-success { --bs-alert-color: var(--bs-success-text-emphasis); }
.alert-info { --bs-alert-color: var(--bs-info-text-emphasis); }
.alert-warning { --bs-alert-color: var(--bs-warning-text-emphasis); }
.alert-danger { --bs-alert-color: var(--bs-danger-text-emphasis); }
.alert-light { --bs-alert-color: var(--bs-light-text-emphasis); }
.alert-dark { --bs-alert-color: var(--bs-dark-text-emphasis); }
.alert-gray { --bs-alert-color: var(--bs-gray-text-emphasis); }

/* Compact tables and sticky helpers */
.table-compact {
  --bs-table-cell-padding-y: .25rem;
  --bs-table-cell-padding-x: .5rem;
  font-size: .875rem;
}

.table-compact thead th { font-size: .75rem; }

/* Sticky table header that accounts for the app's fixed navbar + horizontal menu */
:root {
  --sticky-header-offset: 8.15rem; /* navbar (4rem) + horizontal menu (~4.15rem), measured */
}

@media (max-width: 1199.98px) {
  /* Below xl the horizontal menu is no longer fixed, only the navbar stays pinned */
  :root { --sticky-header-offset: 4rem; }
}

/*
 * Bootstrap's .table-responsive sets overflow-x: auto, which per the CSS overflow
 * computed-value fixup also forces overflow-y to a non-"visible" value — turning this
 * div into a scroll container, which position: sticky would pin against instead of the
 * page. We don't rely on sticky at all: the `sticky-table-header` Stimulus controller
 * (assets/controllers/sticky-table-header_controller.js) clones <thead> into a
 * `position: fixed` overlay once the table scrolls past the fixed navbar/menu, and
 * mirrors this div's horizontal scroll onto the clone. That keeps a single page-level
 * vertical scroll while horizontal overflow (text-nowrap + long content on narrow
 * screens) still scrolls within this box instead of bleeding out past the card.
 */
.table-responsive-sticky {
  overflow-x: auto;
}

/* Name column width and truncation */
.td-name { max-width: 420px; }
.td-name .title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.td-name .meta { font-size: .8125rem; color: var(--bs-body-color); opacity: .7; }
.td-name .meta .danger { color: var(--bs-danger); opacity: 1; }

@media (max-width: 767.98px) {
  .td-name { max-width: none; }
  /* Mobile row separator element */
  .mobile-separator {
    height: 1px;
    background-color: color-mix(in sRGB, var(--bs-body-color) 18%, transparent);
    margin: .75rem 0 .25rem;
    border-radius: 1px;
  }
  [data-bs-theme="dark"] .mobile-separator {
    background-color: color-mix(in sRGB, #ffffff 22%, transparent);
  }
}

/* Typography utilities (Bootstrap-friendly) */
.fw-medium { font-weight: 500 !important; }
.fw-semibold { font-weight: 600 !important; }
.fw-extrabold { font-weight: 800 !important; }

/* Semantic aliases for readability */
.text-medium { font-weight: 500 !important; }
.text-semibold { font-weight: 600 !important; }
.text-bold { font-weight: 700 !important; }
.text-extrabold { font-weight: 800 !important; }
.td-name .title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.td-name .meta { font-size: .8125rem; color: var(--bs-body-color); opacity: .7; }
.td-name .meta .danger { color: var(--bs-danger); opacity: 1; }



/* Datatables */
.dt-info {padding-left: 20px;font-size: 12px;}

/* min-width:0 helper — lets a flex child shrink so .text-truncate works inside it */
.min-w-0 { min-width: 0 !important; }

/* ФБС-вкладки: неактивная вкладка — светло-серая заливка (активная остаётся синей) */
.fbs-nav .nav-link:not(.active) {
  background-color: var(--bs-gray-100);
  color: var(--bs-body-color);
}
.fbs-nav .nav-link:not(.active):hover,
.fbs-nav .nav-link:not(.active):focus {
  background-color: var(--bs-gray-200);
  color: var(--bs-body-color);
}

/* ─── Финансы / Акты: карточный список на мобильных ──────────────────── */
.invoice-card-list .invoice-card + .invoice-card { margin-top: .75rem; }

.invoice-card {
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius-lg);
  background-color: var(--bs-card-bg, var(--bs-paper-bg));
}
.invoice-card .invoice-card__num { color: var(--bs-body-color); }
.invoice-card .invoice-card__num:hover { color: var(--bs-primary); }
.invoice-card__amount { font-variant-numeric: tabular-nums; }

/* ─── МП-товары: карточный список на мобильных ──────────────────────── */
.mp-card-list .mp-card + .mp-card { margin-top: .75rem; }

.mp-card {
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius-lg);
  background-color: var(--bs-card-bg, var(--bs-paper-bg));
  white-space: normal;
}
.mp-card__media {
  width: 60px;
  height: 60px;
  object-fit: cover;
}
.mp-card__media--empty { width: 60px; height: 60px; }
.mp-card__name {
  font-size: .875rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mp-card__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--bs-border-color);
}
.mp-card__stats > div {
  padding: .5rem .75rem;
  text-align: center;
}
.mp-card__stats > div + div { border-left: 1px solid var(--bs-border-color); }
.mp-card__stat-label {
  display: block;
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--bs-secondary-color);
}
.mp-card__stat-value {
  display: block;
  font-weight: 600;
  font-size: .9375rem;
  font-variant-numeric: tabular-nums;
}

/* ─── Шапка на мобильных: название организации сжимается до свободной ширины ─ */
@media (max-width: 767.98px) {
  #layout-navbar .navbar-nav-right,
  #layout-navbar .navbar-nav,
  #layout-navbar .nav-item-scope { min-width: 0; }

  #layout-navbar .app-brand,
  #layout-navbar .dropdown-notifications { margin-inline-end: .5rem !important; }
  #layout-navbar .nav-item-scope { margin-inline: .5rem !important; }
  #layout-navbar .nav-item-scope .dropdown-toggle {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
  }
  #layout-navbar .nav-item-scope .scope-name { min-width: 0; }
}

/* Тема пишет каждое слово кнопок и вкладок с заглавной — для русского интерфейса это неверно */
.btn,
.nav-tabs .nav-link,
.nav-pills .nav-link {
  text-transform: none;
}