/* Fix: card overflow:hidden bloque le scroll horizontal des tables sur mobile */
.card:has(.table-responsive),
.card.has-table-responsive {
  overflow: visible;
}

/* Fallback robuste pour navigateurs sans :has() */
.card .table-responsive,
.card.has-table-responsive .table-responsive {
  -webkit-overflow-scrolling: touch;
}

/* Fallback explicite pour classes injectees JS (old Safari sans :has) */
.card.border-0.shadow-sm.has-bg-primary-subtle::before {
  background: var(--bs-primary);
}
.card.border-0.shadow-sm.has-bg-success-subtle::before {
  background: var(--bs-success);
}
.card.border-0.shadow-sm.has-bg-info-subtle::before {
  background: var(--bs-info);
}
.card.border-0.shadow-sm.has-bg-warning-subtle::before {
  background: var(--bs-warning);
}
.card.border-0.shadow-sm.has-bg-danger-subtle::before {
  background: var(--bs-danger);
}
.card.shadow-sm .card-body.has-direct-form-row {
  border-radius: 10px !important;
  border: 1px solid var(--bs-border-color);
  background: var(--bs-tertiary-bg) !important;
  padding: 16px !important;
}

:root {
  --dariana-safe-pad-bottom: env(safe-area-inset-bottom, 0px);
}

/* ── Mobile: KPI cards – 2 colonnes sur petits écrans ──────────────── */
@media (max-width: 575.98px) {
  .row-kpi > [class*="col-"] {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

/* ── Mobile: filter forms – champs pleine largeur sous sm ───────────── */
@media (max-width: 767.98px) {
  .filter-form .col-md-1,
  .filter-form .col-md-2,
  .filter-form .col-md-3,
  .filter-form .col-md-4,
  .filter-form .col-md-5,
  .filter-form .col-md-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* ── Mobile touch: cibles tactiles minimales 44x44 ───────────────────── */
@media (hover: none) and (pointer: coarse) {
  .btn,
  .btn.btn-sm,
  .btn-group-sm > .btn,
  .btn-group-actions .btn,
  .topbar .topbar-item .topbar-button,
  .topbar .topbar-item .button-toggle-menu,
  .topbar .dariana-user-btn {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .wrapper .main-nav .nav-link {
    min-height: 44px;
  }

  .wrapper .main-nav .dariana-nav-icon {
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px !important;
    font-size: 20px !important;
  }
}

/* ── Mobile: minima typo critiques (>=14px) ───────────────────────────── */
@media (max-width: 767.98px) {
  .form-label,
  .btn-group-actions .btn,
  .stepper-labels small {
    font-size: 0.875rem !important;
    line-height: 1.3;
  }
}

/* ── Mobile paysage (largeur >=768): filtre moins dense / sans overflow ─ */
@media (min-width: 768px) and (max-height: 500px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {
  .filter-form {
    row-gap: 0.5rem;
  }

  .filter-form .col-md-1,
  .filter-form .col-md-2,
  .filter-form .col-md-3,
  .filter-form .col-md-4,
  .filter-form .col-md-5,
  .filter-form .col-md-6,
  .filter-form .col-md-7,
  .filter-form .col-md-8,
  .filter-form .col-md-9,
  .filter-form .col-md-10,
  .filter-form .col-md-11,
  .filter-form .col-md-12 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .filter-form .d-flex.gap-2 {
    flex-wrap: wrap;
  }

  .filter-form .d-flex.gap-2 > .btn,
  .filter-form .d-flex.gap-2 > a.btn {
    flex: 1 1 100%;
  }
}

/* ── Mobile: boutons d'action dans les tables – wrap ────────────────── */
@media (max-width: 767.98px) {
  .btn-group-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }
  .btn-group-actions .btn {
    font-size: 0.875rem;
  }
}

/* ── Mobile: stepper labels – texte visible ──────────────────────────── */
@media (max-width: 575.98px) {
  .stepper-labels small {
    font-size: 0.875rem;
    width: auto !important;
  }
}

/* ── Mobile: d-flex headers – wrap systématique ─────────────────────── */
@media (max-width: 767.98px) {
  .card-body > .d-flex.justify-content-between {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
}

/* ── Mobile: purchase lines table – inputs pleine largeur ───────────── */
@media (max-width: 767.98px) {
  .purchase-lines-table input,
  .purchase-lines-table select {
    min-width: 0;
    width: 100%;
  }
}

/* ── Mobile: table-borderless text-nowrap override ───────────────────── */
@media (max-width: 767.98px) {
  .table-responsive .text-nowrap {
    white-space: normal !important;
  }
}

/* ── Dedicated mobile UIs: filter panel + list cards ─────────────────── */
@media (max-width: 767.98px) {
  .mobile-filter-panel {
    display: block;
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    background: var(--bs-body-bg);
    padding: 0.875rem;
    margin-bottom: calc(0.75rem + var(--dariana-safe-pad-bottom, 0px) * 0.15);
    box-shadow: var(--bs-box-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.06));
  }

  .mobile-filter-panel .mobile-filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
  }

  .mobile-filter-panel .mobile-filter-header > * {
    margin-bottom: 0;
  }

  .mobile-filter-panel .form-label {
    margin-bottom: 0.375rem;
  }

  .mobile-filter-panel .form-control,
  .mobile-filter-panel .form-select,
  .mobile-filter-panel .btn,
  .mobile-filter-panel a.btn {
    min-height: 44px;
  }

  .mobile-filter-panel .mobile-filter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
  }

  .mobile-filter-panel .mobile-filter-actions > .btn,
  .mobile-filter-panel .mobile-filter-actions > a.btn {
    flex: 1 1 calc(50% - 0.25rem);
  }

  .mobile-list-stack {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-bottom: calc(0.25rem + var(--dariana-safe-pad-bottom, 0px));
  }

  .mobile-list-card {
    display: block;
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    background: var(--bs-body-bg);
    padding: 0.75rem 0.875rem;
    box-shadow: var(--bs-box-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.06));
  }

  .mobile-list-card .mobile-list-row {
    display: grid;
    grid-template-columns: minmax(108px, 40%) 1fr;
    align-items: start;
    gap: 0.25rem 0.75rem;
    padding: 0.25rem 0;
  }

  .mobile-list-card .mobile-list-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
  }

  .mobile-list-card .mobile-list-value {
    font-size: 0.875rem;
    min-width: 0;
    word-break: break-word;
  }

  .mobile-list-card .mobile-list-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.625rem;
  }

  .mobile-list-card .mobile-list-actions .btn,
  .mobile-list-card .mobile-list-actions a.btn {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 374.98px) {
  .mobile-filter-panel .mobile-filter-actions > .btn,
  .mobile-filter-panel .mobile-filter-actions > a.btn,
  .mobile-list-card .mobile-list-actions .btn,
  .mobile-list-card .mobile-list-actions a.btn {
    flex: 1 1 100%;
  }
}

/* ── Mobile filter foundation: offcanvas bottom-sheet ────────────────── */
@media (max-width: 767.98px) {
  .mobile-filter-sheet.offcanvas-bottom {
    height: min(82vh, 760px);
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    border-top: 1px solid var(--bs-border-color);
  }

  .mobile-filter-sheet .offcanvas-header {
    padding: 0.875rem 1rem 0.75rem;
    border-bottom: 1px solid var(--bs-border-color);
  }

  .mobile-filter-sheet .offcanvas-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.875rem 1rem 0;
    overflow-y: auto;
  }

  .mobile-filter-sheet__form {
    display: flex;
    flex-direction: column;
    min-height: 100%;
  }

  .mobile-filter-sheet__fields {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-bottom: 0.75rem;
  }

  .mobile-filter-sheet__fields .form-label {
    margin-bottom: 0.375rem;
  }

  .mobile-filter-sheet__fields .form-control,
  .mobile-filter-sheet__fields .form-select,
  .mobile-filter-sheet__actions .btn,
  .mobile-filter-sheet__actions a.btn {
    min-height: 44px;
  }

  .mobile-filter-sheet__footer {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin: 0 -1rem;
    padding: 0.75rem 1rem calc(0.75rem + var(--dariana-safe-pad-bottom, 0px));
    border-top: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
  }

  .mobile-filter-sheet__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .mobile-filter-sheet__actions .btn,
  .mobile-filter-sheet__actions a.btn {
    flex: 1 1 calc(50% - 0.25rem);
  }

  .mobile-filter-sheet__trigger {
    min-height: 44px;
  }
}

@media (max-width: 374.98px) {
  .mobile-filter-sheet__actions .btn,
  .mobile-filter-sheet__actions a.btn {
    flex: 1 1 100%;
  }
}

/* ── Dedicated mobile shell helpers: bottom nav + card utilities ─────── */
@media (max-width: 767.98px) {
  .mobile-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1035;
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    gap: 0.25rem;
    padding: 0.375rem 0.5rem calc(0.375rem + var(--dariana-safe-pad-bottom, 0px));
    border-top: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.08);
  }

  .mobile-bottom-nav__item {
    flex: 1 1 0;
    min-width: 0;
  }

  .mobile-bottom-nav__link {
    width: 100%;
    min-height: 44px;
    min-width: 44px;
    border-radius: 10px;
    padding: 0.375rem 0.5rem;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.125rem;
    text-decoration: none;
    color: var(--bs-secondary-color);
    background: transparent;
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  .mobile-bottom-nav__link:hover,
  .mobile-bottom-nav__link:focus-visible {
    background: var(--bs-tertiary-bg);
    color: var(--bs-emphasis-color);
  }

  .mobile-bottom-nav__link[aria-current="page"],
  .mobile-bottom-nav__link.is-active {
    color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), 0.12);
    font-weight: 600;
  }

  .mobile-bottom-nav__icon {
    font-size: 1.2rem;
    line-height: 1;
  }

  .mobile-bottom-nav__label {
    font-size: 0.75rem;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mobile-bottom-nav-spacer {
    height: calc(60px + var(--dariana-safe-pad-bottom, 0px));
  }

  .mobile-list-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
  }

  .mobile-list-card__title {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.35;
    font-weight: 600;
    color: var(--bs-emphasis-color);
  }

  .mobile-list-card__meta {
    margin-top: 0.125rem;
    font-size: 0.8125rem;
    line-height: 1.3;
    color: var(--bs-secondary-color);
  }

  .mobile-list-card__badge {
    flex: 0 0 auto;
    align-self: flex-start;
  }

  .mobile-list-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
  }

  .mobile-list-card__row {
    display: grid;
    grid-template-columns: minmax(96px, 38%) 1fr;
    align-items: start;
    gap: 0.25rem 0.75rem;
  }

  .mobile-list-card__label {
    font-size: 0.8125rem;
    line-height: 1.35;
    color: var(--bs-secondary-color);
    font-weight: 600;
  }

  .mobile-list-card__value {
    min-width: 0;
    font-size: 0.875rem;
    line-height: 1.35;
    color: var(--bs-body-color);
    word-break: break-word;
  }

  .mobile-list-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 0.625rem;
  }

  .mobile-list-card__actions .btn,
  .mobile-list-card__actions a.btn {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 374.98px) {
  .mobile-bottom-nav__label {
    font-size: 0.6875rem;
  }

  .mobile-list-card__row {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }

  .mobile-list-card__actions .btn,
  .mobile-list-card__actions a.btn {
    flex: 1 1 100%;
  }
}

/* ══════════════════════════════════════════════════════════════════
   Sidebar — Colored icon pills (homogeneous with app card style)
   ══════════════════════════════════════════════════════════════════ */

/* Pill container base */
.wrapper .main-nav .dariana-nav-icon {
  border-radius: 8px;
  width: 32px !important;
  height: 32px !important;
  flex: 0 0 32px !important;
  font-size: 18px !important;
  opacity: 1 !important;
  transition: background-color 0.2s ease, filter 0.2s ease;
}

/* Color variants — dark-sidebar optimized */
.wrapper .main-nav .dariana-nav-icon.ic-primary { background: rgba(28,132,238,0.16); color: #5aabff !important; }
.wrapper .main-nav .dariana-nav-icon.ic-info    { background: rgba(83,212,255,0.14); color: #53d4ff !important; }
.wrapper .main-nav .dariana-nav-icon.ic-success { background: rgba(40,167,69,0.16);  color: #5ecf80 !important; }
.wrapper .main-nav .dariana-nav-icon.ic-warning { background: rgba(255,185,0,0.16);  color: #ffc844 !important; }
.wrapper .main-nav .dariana-nav-icon.ic-purple  { background: rgba(111,66,193,0.16); color: #b08fff !important; }
.wrapper .main-nav .dariana-nav-icon.ic-teal    { background: rgba(32,201,151,0.16); color: #20c997 !important; }
.wrapper .main-nav .dariana-nav-icon.ic-orange  { background: rgba(253,126,20,0.16); color: #fd9a4a !important; }

/* Brighten pill on hover / active */
.wrapper .main-nav .nav-link:hover .dariana-nav-icon,
.wrapper .main-nav .nav-link.active .dariana-nav-icon {
  filter: brightness(1.25) saturate(1.2);
}

/* Active link: override icon color to keep the pill accent visible */
.wrapper .main-nav .nav-link.active .dariana-nav-icon {
  color: #ffffff !important;
}

/* Section titles: slightly larger gap and accent line color per section */
.wrapper .main-nav .menu-title .menu-title-text {
  gap: 7px;
}

/* Sidebar font weight refinement for non-active links */
.wrapper .main-nav .navbar-nav .nav-item .nav-link .dariana-nav-text {
  font-weight: 400;
  letter-spacing: 0.015em;
}
.wrapper .main-nav .navbar-nav .nav-item .nav-link.active .dariana-nav-text {
  font-weight: 500;
  letter-spacing: 0.01em;
}