/*
  IMA Logistics - Pack Starter responsive
  Breakpoints desktop, tablette et mobile.
*/

.starter-mobile-only {
  display: none !important;
}

.starter-desktop-only {
  display: initial !important;
}

.starter-table-scroll {
  overflow-x: auto;
}

@media (max-width: 1200px) {
  .starter-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1024px) {
  :root {
    --starter-sidebar-width: 248px;
  }

  .starter-content {
    padding: 24px;
  }

  .starter-grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  body.starter-sidebar-open {
    overflow: hidden;
  }

  .starter-sidebar {
    width: min(88vw, 304px);
    transform: translateX(-105%);
    transition: transform var(--starter-transition);
    box-shadow: var(--starter-shadow-lg);
  }

  html[dir="rtl"] .starter-sidebar {
    transform: translateX(105%);
  }

  body.starter-sidebar-open .starter-sidebar {
    transform: translateX(0);
  }

  body.starter-sidebar-open .starter-overlay {
    display: block;
  }

  .starter-main,
  html[dir="rtl"] .starter-main {
    margin-left: 0;
    margin-right: 0;
  }

  .starter-menu-toggle {
    display: inline-flex;
  }

  .starter-topbar {
    min-height: 64px;
    padding: 11px 14px;
  }

  .starter-topbar-actions {
    gap: 7px;
  }

  .starter-topbar-actions [data-starter-company-name],
  .starter-topbar-actions [data-starter-trial-status],
  .starter-topbar-actions .starter-company,
  .starter-topbar-actions .starter-trial {
    display: none;
  }

  .starter-content {
    padding: 18px 14px 28px;
  }

  .starter-page-header {
    align-items: stretch;
    flex-direction: column;
  }

  .starter-grid-2,
  .starter-grid-3,
  .starter-grid-4,
  .starter-form-row {
    grid-template-columns: 1fr;
  }

  .starter-table {
    min-width: 680px;
  }

  .starter-mobile-only {
    display: initial !important;
  }

  .starter-desktop-only {
    display: none !important;
  }
}

@media (max-width: 640px) {
  body {
    font-size: 14px;
  }

  .starter-page-title {
    font-size: 18px;
  }

  .starter-page-subtitle {
    display: none;
  }

  .starter-topbar {
    gap: 10px;
  }

  .starter-topbar-left {
    flex: 1;
  }

  .starter-topbar-actions .starter-btn span,
  .starter-topbar-actions .starter-badge span {
    display: none;
  }

  .starter-card-header,
  .starter-card-body,
  .starter-card-footer,
  .starter-kpi-card {
    padding: 14px;
  }

  .starter-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .starter-actions .starter-btn {
    width: 100%;
  }

  .starter-input,
  .starter-select,
  .starter-textarea {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .starter-sidebar {
    width: min(92vw, 300px);
  }

  .starter-content {
    padding: 14px 10px 24px;
  }

  .starter-page-header .starter-page-title {
    font-size: 22px;
  }

  .starter-btn {
    min-height: 44px;
  }

  .starter-toast-container {
    right: 10px;
    bottom: 10px;
    width: calc(100vw - 20px);
  }

  html[dir="rtl"] .starter-toast-container {
    right: auto;
    left: 10px;
  }
}