/* Copyright (c) 2026 LandmarkLouie. Responsive design system — mobile-first breakpoints. */

/* Base (mobile-first) — all devices */
:root {
  --sidebar-width-mobile: 0;          /* hidden on mobile */
  --sidebar-width-tablet: 180px;      /* narrower on tablet */
  --sidebar-width-desktop: 260px;     /* full width on desktop */
}

/* Mobile optimizations (< 640px) */
@media (max-width: 639px) {
  /* Hide sidebar on mobile, replace with drawer/bottom-nav */
  .layout {
    flex-direction: column !important;
  }

  .sidebar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: auto !important;
    max-height: 60vh !important;
    border-right: none !important;
    border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
    background: var(--color-card) !important;
    z-index: 100 !important;
    transform: translateY(100%) !important;
    transition: transform 0.3s ease !important;
    overflow-y: auto !important;
  }

  .sidebar.open {
    transform: translateY(0) !important;
  }

  .chat-area {
    flex: 1 !important;
    width: 100% !important;
    min-height: 0 !important;
  }

  /* Sidebar nav items stack vertically */
  .sidebar-nav {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .sidebar-nav > a,
  .sidebar-nav > div {
    width: 100% !important;
    padding: var(--space-3) var(--space-4) !important;
    margin: var(--space-1) 0 !important;
  }

  /* Sidebar footer: email + button stack */
  .sidebar-footer {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: var(--space-2) !important;
    padding: var(--space-3) var(--space-4) !important;
  }

  .sidebar-footer span {
    width: 100% !important;
    word-break: break-word !important;
  }

  .sidebar-footer button {
    width: 100% !important;
  }

  /* Data tables → stacked cards */
  table {
    display: block !important;
    border-collapse: separate !important;
    border-spacing: 0 12px !important;
  }

  thead {
    display: none !important;
  }

  tbody tr {
    display: flex !important;
    flex-direction: column !important;
    background: var(--color-card, #fff) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: var(--radius-md) !important;
    padding: 12px !important;
    margin-bottom: 12px !important;
  }

  tbody td {
    display: flex !important;
    justify-content: space-between !important;
    padding: var(--space-2) 0 !important;
    border: none !important;
  }

  tbody td::before {
    content: attr(data-label) !important;
    font-weight: 600 !important;
    color: var(--color-ink, #1a1a2e) !important;
    min-width: 80px !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
  }

  /* Chat composer full width */
  .chat-composer {
    width: 100% !important;
    padding: var(--space-3) !important;
    margin: 0 !important;
  }

  .chat-composer input,
  .chat-composer textarea {
    width: 100% !important;
  }

  /* Modals: full width on mobile */
  .louie-modal {
    max-width: 100% !important;
    width: calc(100% - var(--space-6)) !important;
    max-height: 90vh !important;
  }

  /* Card grids → single column */
  [class*="grid"],
  [class*="cards"],
  .dashboard-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--space-4) !important;
  }

  [class*="grid"] > *,
  [class*="cards"] > *,
  .dashboard-grid > * {
    width: 100% !important;
  }

  /* Buttons stack on small screens */
  .button-group,
  [class*="actions"] {
    flex-direction: column !important;
    gap: var(--space-2) !important;
  }

  .button-group button,
  [class*="actions"] button {
    width: 100% !important;
  }

  /* Input labels → stacked */
  .form-group,
  .field-group {
    flex-direction: column !important;
  }

  .form-group label,
  .field-group label {
    margin-bottom: var(--space-1) !important;
  }

  /* Hide decorative spacing on mobile */
  [class*="spacer"],
  [class*="divider"] {
    display: none !important;
  }

  /* Reduce font sizes on mobile */
  h1 { font-size: var(--text-2xl)) !important; }
  h2 { font-size: var(--text-xl)) !important; }
  h3 { font-size: var(--text-md)) !important; }
  body { font-size: var(--text-base) !important; }

  /* Sidebar menu button (hamburger) */
  .sidebar-menu-toggle {
    display: flex !important;
    position: fixed !important;
    bottom: 16px !important;
    right: 16px !important;
    z-index: 99 !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    background: var(--color-gold) !important;
    color: var(--color-sidebar) !important;
    border: none !important;
    font-weight: 600 !important;
    cursor: pointer !important;
  }
}

/* Tablet (640px – 768px) */
@media (min-width: 640px) and (max-width: 767px) {
  .sidebar {
    width: var(--sidebar-width-tablet) !important;
  }

  .sidebar-nav > a span,
  .sidebar-nav > div span {
    font-size: 12px !important;
  }

  /* Smaller sidebar badges */
  .sidebar-badge {
    padding: 1px 3px !important;
    font-size: 8px !important;
  }

  /* Data tables: sticky first column for horizontal scroll */
  table {
    display: block !important;
    overflow-x: auto !important;
  }

  thead th:first-child,
  tbody td:first-child {
    position: sticky !important;
    left: 0 !important;
    background: var(--color-card) !important;
    z-index: 10 !important;
  }

  /* Reduce padding in modals */
  .louie-modal-header,
  .louie-modal-body,
  .louie-modal-footer {
    padding: var(--space-4) !important;
  }
}

/* Desktop (768px+) */
@media (min-width: 768px) {
  .sidebar {
    width: var(--sidebar-width-desktop) !important;
  }

  .sidebar-menu-toggle {
    display: none !important;
  }

  /* Revert mobile table styles */
  table {
    display: table !important;
  }

  thead {
    display: table-header-group !important;
  }

  tbody tr {
    display: table-row !important;
  }

  tbody td {
    display: table-cell !important;
    padding: 12px !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  }

  tbody td::before {
    content: none !important;
  }

  /* Grid back to grid */
  [class*="grid"],
  [class*="cards"],
  .dashboard-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: 16px !important;
  }

  /* Buttons inline */
  .button-group,
  [class*="actions"] {
    flex-direction: row !important;
  }

  .button-group button,
  [class*="actions"] button {
    width: auto !important;
  }

  /* Form groups horizontal */
  .form-group,
  .field-group {
    flex-direction: row !important;
    align-items: center !important;
  }

  .form-group label,
  .field-group label {
    margin-right: 8px !important;
    margin-bottom: 0 !important;
  }

  /* Restore spacing */
  [class*="spacer"],
  [class*="divider"] {
    display: block !important;
  }

  /* Restore font sizes */
  h1 { font-size: var(--text-display)) !important; }
  h2 { font-size: var(--text-2xl)) !important; }
  h3 { font-size: var(--text-lg) !important; }
  body { font-size: var(--text-base) !important; }
}

/* Large desktop (1024px+) */
@media (min-width: 1024px) {
  /* Enable multi-column grids */
  [class*="grid"],
  [class*="cards"],
  .dashboard-grid {
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)) !important;
    gap: var(--space-4) !important;
  }

  /* Wider modals */
  .louie-modal {
    max-width: 800px !important;
  }
}

/* Extra-large desktop (1280px+) */
@media (min-width: 1280px) {
  /* Max-width constraint to prevent excessive line lengths */
  .chat-area,
  .main-content,
  [class*="container"] {
    max-width: 1400px !important;
    margin: 0 auto !important;
  }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  /* Larger tap targets on touch */
  button,
  a,
  [role="button"] {
    min-height: 44px !important;
    min-width: 44px !important;
  }

  /* Remove hover states, add active states */
  button:hover { background: inherit !important; }
  button:active { opacity: 0.8 !important; }

  /* Reduce animation on low-motion devices */
  @media (prefers-reduced-motion: reduce) {
    * {
      animation: none !important;
      transition: none !important;
    }
  }
}

/* Print styles */
@media print {
  .sidebar,
  .chat-composer,
  .sidebar-menu-toggle,
  [class*="nav"],
  button,
  [role="button"] {
    display: none !important;
  }

  .chat-area,
  .main-content {
    width: 100% !important;
  }

  body {
    background: white !important;
    color: black !important;
  }
}