/* ============================================================
   L'art Dore POS — Mobile Responsive Styles
   Left Sidebar SaaS Dashboard — 2025/2026
   ============================================================ */

/* =========================
   TABLET BREAKPOINT (768px)
   ========================= */
@media (max-width: 768px) {

  /* =========================
     SIDEBAR — Off-canvas
     ========================= */
  .sidebar {
    transform: translateX(-100%);
    transition: transform var(--transition-slow) cubic-bezier(0.16, 1, 0.3, 1);
    width: var(--sidebar-width);
    box-shadow: none;
  }

  .sidebar.mobile-open {
    transform: translateX(0);
    box-shadow: var(--shadow-xl);
  }

  /* Hide collapsed state on mobile — always full width when open */
  .sidebar.collapsed {
    width: var(--sidebar-width);
  }
  .sidebar.collapsed .sidebar-brand-text,
  .sidebar.collapsed .sidebar-section,
  .sidebar.collapsed .sidebar-user-info,
  .sidebar.collapsed .sidebar-link span {
    opacity: 1;
    width: auto;
  }
  .sidebar.collapsed .sidebar-header {
    justify-content: space-between;
    padding: 0 16px;
  }
  .sidebar.collapsed .sidebar-link {
    justify-content: flex-start;
    padding: 0 12px;
  }
  .sidebar.collapsed .sidebar-user {
    justify-content: flex-start;
    padding: 8px;
  }
  .sidebar.collapsed .sidebar-logout {
    display: flex;
  }
  .sidebar.collapsed .sidebar-link::after {
    display: none;
  }

  /* Mobile overlay behind sidebar */
  .mobile-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: var(--z-mobile-overlay);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-slow);
  }
  .mobile-overlay.active {
    opacity: 1;
    pointer-events: auto;
  }

  /* =========================
     MAIN CONTENT — Full width
     ========================= */
  .main-content {
    margin-left: 0;
  }

  .sidebar.collapsed + .main-content,
  .sidebar.collapsed ~ .main-content {
    margin-left: 0;
  }

  /* =========================
     TOP BAR — Show hamburger
     ========================= */
  .topbar {
    height: 56px;
    padding: 0 var(--space-md);
  }

  .mobile-toggle {
    display: flex;
  }

  /* =========================
     LEGACY TOPNAV
     ========================= */
  .topnav {
    height: 56px;
    padding: 0 var(--space-md);
  }

  .topnav-hamburger {
    display: flex;
  }

  .topnav-links {
    display: none;
    position: absolute;
    top: 56px;
    left: 0;
    right: 0;
    background: var(--surface);
    flex-direction: column;
    padding: var(--space-sm) var(--space-md);
    gap: 2px;
    overflow-y: auto;
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    z-index: var(--z-dropdown);
    max-height: calc(100vh - 56px);
    animation: navSlideDown 200ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .topnav-links.open {
    display: flex;
  }

  .topnav-links a {
    padding: 12px 16px;
    font-size: var(--text-md);
    border-radius: var(--radius-sm);
    width: 100%;
    transition: background-color var(--transition-fast), color var(--transition-fast);
  }
  .topnav-links a:hover {
    background-color: var(--surface2);
  }
  .topnav-links a.active {
    background-color: var(--accent-light);
    color: var(--accent);
  }
  .topnav-links a.active::after {
    display: none;
  }

  .topnav-user-name {
    display: none;
  }

  .topnav-brand {
    margin-right: auto;
    font-size: var(--text-lg);
  }

  @keyframes navSlideDown {
    from {
      opacity: 0;
      transform: translateY(-8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* =========================
     PAGE CONTENT
     ========================= */
  .page-content {
    padding: var(--space-md);
  }

  .main {
    padding: var(--space-md);
  }

  /* =========================
     PAGE HEADER
     ========================= */
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
  }

  .page-header h1,
  .page-title {
    font-size: var(--text-xl);
  }

  .page-header-actions {
    width: 100%;
  }
  .page-header-actions .btn {
    flex: 1;
  }

  /* =========================
     SUMMARY CARDS — 2 columns
     ========================= */
  .summary-cards {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
  }

  .summary-card {
    padding: var(--space-md);
  }

  .summary-value {
    font-size: var(--text-xl);
  }

  .summary-label {
    font-size: var(--text-xs);
  }

  /* =========================
     TABLE -> CARD VIEW
     ========================= */
  .table-wrap {
    display: none;
  }

  .mobile-cards {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }

  .mobile-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: box-shadow var(--transition), border-color var(--transition);
    border-left: 3px solid var(--accent-mid);
  }
  .mobile-card:active {
    box-shadow: var(--shadow-sm);
  }
  .mobile-card.expanded {
    border-left-color: var(--accent);
    box-shadow: var(--shadow-sm);
  }

  .mobile-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md);
    cursor: pointer;
    user-select: none;
  }

  .mobile-card-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
  }

  .mobile-card-title {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-card-subtitle {
    font-size: var(--text-sm);
    color: var(--text-muted);
  }

  .mobile-card-right {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-shrink: 0;
  }

  .mobile-card-amount {
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    color: var(--text);
    font-family: var(--font-heading);
  }

  .mobile-card-chevron {
    display: flex;
    align-items: center;
    color: var(--text-muted);
    transition: transform var(--transition), color var(--transition-fast);
  }
  .mobile-card-chevron svg {
    width: 18px;
    height: 18px;
  }
  .mobile-card.expanded .mobile-card-chevron {
    transform: rotate(180deg);
    color: var(--accent);
  }

  .mobile-card-details {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-slow) ease;
    padding: 0 var(--space-md);
  }
  .mobile-card.expanded .mobile-card-details {
    max-height: 500px;
    padding: 0 var(--space-md) var(--space-md);
    border-top: 1px solid var(--border);
  }

  .mobile-card-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 8px 0;
    border-bottom: 1px solid var(--surface3);
  }
  .mobile-card-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  .mobile-card-label {
    font-size: var(--text-sm);
    color: var(--text-muted);
    flex-shrink: 0;
  }

  .mobile-card-value {
    font-size: var(--text-sm);
    color: var(--text);
    font-weight: var(--weight-medium);
    text-align: right;
    margin-left: var(--space-md);
    word-break: break-word;
  }

  .mobile-card-actions {
    display: flex;
    gap: var(--space-sm);
    padding-top: var(--space-sm);
    margin-top: var(--space-sm);
    border-top: 1px solid var(--border);
  }
  .mobile-card-actions .btn {
    flex: 1;
  }

  /* =========================
     FILTERS — Collapsible
     ========================= */
  .filters {
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-md);
    border-radius: var(--radius);
  }

  .filter-search {
    width: 100%;
    min-width: 0;
  }

  .filter-collapsible {
    display: none;
    width: 100%;
    flex-direction: column;
    gap: var(--space-sm);
    animation: filterExpand 200ms ease;
  }
  .filter-collapsible.open {
    display: flex;
  }

  @keyframes filterExpand {
    from {
      opacity: 0;
      transform: translateY(-4px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .filter-group {
    width: 100%;
    flex-direction: column;
    gap: 4px;
  }
  .filter-group .filter-input,
  .filter-group .filter-select {
    width: 100%;
  }

  .filters-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 8px 14px;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--text-sub);
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    cursor: pointer;
    align-self: flex-start;
    transition: all var(--transition-fast);
  }
  .filters-toggle:hover {
    background: var(--surface3);
    border-color: var(--text-muted);
  }
  .filters-toggle svg {
    width: 14px;
    height: 14px;
  }

  .sort-btn-mobile {
    display: flex;
  }

  /* =========================
     MODALS — Slide up from bottom
     ========================= */
  .modal-overlay {
    padding: 0;
    align-items: flex-end;
  }

  .modal {
    max-width: 100%;
    max-height: 92vh;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    animation: slideUpMobile 300ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .modal-body {
    padding: var(--space-md);
  }

  .modal-header {
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  }

  .modal-footer {
    padding: var(--space-md);
    border-radius: 0;
  }

  @keyframes slideUpMobile {
    from {
      opacity: 0;
      transform: translateY(100%);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* =========================
     FORMS — Single column
     ========================= */
  .form-row,
  .form-row-3 {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .form-input,
  .form-select,
  .form-textarea {
    font-size: 16px; /* prevent iOS zoom */
  }

  .sidebar-layout {
    grid-template-columns: 1fr;
  }

  .tips-sidebar {
    position: static;
  }

  .two-col {
    grid-template-columns: 1fr;
  }

  /* =========================
     TABS — Scrollable
     ========================= */
  .tabs {
    gap: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .tab-item {
    padding: 10px 14px;
    font-size: var(--text-sm);
  }

  /* =========================
     PAGINATION
     ========================= */
  .pagination button {
    min-width: 32px;
    height: 32px;
    font-size: var(--text-xs);
  }

  /* =========================
     TOASTS — Full width bottom
     ========================= */
  .toast-container {
    left: var(--space-md);
    right: var(--space-md);
    bottom: var(--space-md);
  }

  .toast {
    max-width: 100%;
    border-radius: var(--radius);
  }

  /* =========================
     CARDS
     ========================= */
  .card {
    border-radius: var(--radius);
  }

  .card-body {
    padding: var(--space-md);
  }

  .card-header {
    padding: var(--space-md);
  }

  /* =========================
     TABLE HEADER
     ========================= */
  .table-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
  }

  /* =========================
     BREADCRUMBS
     ========================= */
  .breadcrumbs {
    display: none;
  }

  /* =========================
     AUTH
     ========================= */
  .auth-card {
    padding: var(--space-xl) var(--space-lg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
  }

  .auth-brand h1 {
    font-size: var(--text-2xl);
  }
}

/* =========================
   SMALL SCREENS (480px)
   ========================= */
@media (max-width: 480px) {

  /* Summary cards — single column */
  .summary-cards {
    grid-template-columns: 1fr;
  }

  .summary-card {
    padding: var(--space-md) var(--space-md);
  }

  /* Tighter spacing */
  .page-content {
    padding: var(--space-sm) var(--space-md) var(--space-lg);
  }

  .main {
    padding: var(--space-sm) var(--space-md) var(--space-lg);
  }

  .page-header h1,
  .page-title {
    font-size: var(--text-lg);
  }

  .page-header-actions .btn {
    font-size: var(--text-sm);
    padding: 0 14px;
    height: 36px;
  }

  .filters {
    padding: var(--space-sm) var(--space-md);
  }

  .mobile-card-header {
    padding: var(--space-sm) var(--space-md);
  }

  .card-body {
    padding: var(--space-sm) var(--space-md);
  }

  .card-header {
    padding: var(--space-sm) var(--space-md);
  }

  /* Modal — truly full screen */
  .modal {
    max-height: 100vh;
    border-radius: 0;
    height: 100vh;
  }

  .modal-header {
    border-radius: 0;
  }

  /* Topbar */
  .topbar {
    padding: 0 var(--space-sm);
  }

  .topbar-title {
    font-size: 16px;
  }
}

/* =========================
   DESKTOP: Hide mobile-only elements
   ========================= */
@media (min-width: 769px) {
  .mobile-cards {
    display: none;
  }

  .sort-btn-mobile {
    display: none;
  }

  .mobile-overlay {
    display: none;
  }

  .mobile-toggle {
    display: none;
  }
}