/* ===========================
 * Magma Exports Dashboard CSS
 * ===========================
 * Mobile-first responsive system. Tested on iPhone Safari and Android Chrome.
 * Breakpoints align with Tailwind defaults: sm=640, md=768, lg=1024, xl=1280.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

* { -webkit-tap-highlight-color: transparent; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
html, body {
  /* let document flow naturally — don't pin to viewport height */
}

/* ============================================================
 * NAVIGATION
 * ============================================================ */
.nav-link.active {
  background-color: #FF6B2C;
  color: white;
}
.nav-link.active:hover {
  background-color: #e5551c;
}

/* Mobile hamburger button — hidden by default, shown <md */
#mobile-menu-toggle {
  display: none;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 8px;
}
#mobile-menu-toggle svg {
  width: 24px;
  height: 24px;
  color: #1a1a1a;
}

/* Mobile menu drawer — slides down from nav, hidden by default */
#mobile-menu {
  display: none;
  position: fixed;
  top: 56px;
  left: 0;
  right: 0;
  background: white;
  border-bottom: 1px solid #e5e7eb;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  z-index: 40;
  padding: 8px 0;
  animation: slideDown 0.2s ease-out;
}
#mobile-menu.open { display: block; }
#mobile-menu a {
  display: block;
  padding: 14px 24px;
  font-size: 16px;
  color: #1a1a1a;
  text-decoration: none;
  border-bottom: 1px solid #f3f4f6;
}
#mobile-menu a:last-child { border-bottom: none; }
#mobile-menu a.active {
  background: #fff1eb;
  color: #cc3c0a;
  font-weight: 600;
  border-left: 3px solid #FF6B2C;
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
 * COMMON UTILITIES
 * ============================================================ */
.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid #ffdcc4;
  border-top-color: #FF6B2C;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.card { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.03); }

.serif {
  font-family: 'Outfit', 'Inter', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.display, .display-num {
  font-family: 'Outfit', 'Inter', sans-serif;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.mono { font-family: 'JetBrains Mono', monospace; }

/* ============================================================
 * STATUS PILLS (already used everywhere)
 * ============================================================ */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.625rem;
  border-radius: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.status-draft { background: #f9fafb; color: #6b7280; }
.status-sent { background: #dcfce7; color: #15803d; }
.status-cancelled { background: #fee2e2; color: #9c181b; }
.status-accepted { background: #dbeafe; color: #1E40AF; }
.status-requested { background: #fef3c7; color: #92400e; }
.status-in_production { background: #fef3c7; color: #92400e; }
.status-ready_to_ship { background: #dbeafe; color: #1E40AF; }
.status-shipped { background: #c7d2fe; color: #3730a3; }
.status-with_buyer { background: #e0e7ff; color: #4338ca; }
.status-approved { background: #d1fae5; color: #065f46; }
.status-rejected { background: #fee2e2; color: #9c181b; }
.status-converted { background: #ddd6fe; color: #5b21b6; }

/* ============================================================
 * TABLES
 * ============================================================ */
table.data-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}
table.data-table thead th {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7280;
  font-weight: 600;
  padding: 0.65rem 0.875rem;
  text-align: left;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}
table.data-table tbody td {
  padding: 0.75rem 0.875rem;
  border-bottom: 1px solid #f3f4f6;
  font-size: 0.875rem;
  vertical-align: middle;
}
table.data-table tbody tr:hover {
  background-color: #fff1eb;
  cursor: pointer;
}

/* ============================================================
 * SIDE PANELS (buyer/sample/proforma detail, activity)
 * ============================================================ */
.side-panel {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(560px, 90vw);
  background: white;
  box-shadow: -10px 0 25px rgba(0,0,0,0.1);
  z-index: 100;
  animation: slideIn 0.2s ease-out;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.side-panel-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.25);
  z-index: 99;
  animation: fadeIn 0.15s ease-out;
}
@keyframes slideIn {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ============================================================
 * KANBAN BOARD
 * ============================================================ */
.kanban-column {
  transition: background-color 0.15s ease;
}
.kanban-card {
  user-select: none;
  -webkit-user-select: none;
}

/* ============================================================
 * RESPONSIVE: BELOW 768px (mobile)
 * ============================================================ */
@media (max-width: 767px) {
  /* Show hamburger, hide desktop nav links + tenant block */
  #mobile-menu-toggle { display: flex; align-items: center; justify-content: center; }
  #desktop-nav-links { display: none !important; }
  #exporter-switcher { display: none !important; }

  /* Nav container */
  nav .max-w-7xl {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Page content */
  main {
    padding: 16px !important;
  }

  /* Headings smaller */
  .serif.text-3xl { font-size: 1.5rem !important; }
  .serif.text-2xl { font-size: 1.25rem !important; }
  .serif.text-xl { font-size: 1.125rem !important; }

  /* Tables hide on mobile - JS will render cards instead */
  table.data-table.mobile-cards { display: none; }

  /* Mobile card replacements for tables */
  .mobile-row-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 14px;
    margin-bottom: 10px;
    cursor: pointer;
  }
  .mobile-row-card:active {
    background: #fff1eb;
  }
  .mobile-row-card .row-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
  }
  .mobile-row-card .row-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: #1a1a1a;
  }
  .mobile-row-card .row-subtitle {
    font-size: 0.78rem;
    color: #6b7280;
    margin-top: 2px;
  }
  .mobile-row-card .row-meta {
    font-size: 0.78rem;
    color: #6b7280;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #f3f4f6;
    display: flex;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
  }
  .mobile-row-card .row-meta .meta-item { display: flex; gap: 4px; }
  .mobile-row-card .row-meta .meta-label { color: #9ca3af; }

  /* Side panels go fullscreen on mobile */
  .side-panel {
    width: 100vw !important;
    max-width: 100vw !important;
  }

  /* Kanban becomes accordion on mobile */
  .kanban-board.mobile-accordion {
    display: block !important;
    overflow-x: hidden !important;
  }
  .kanban-board.mobile-accordion .kanban-section {
    margin-bottom: 8px;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    background: white;
    overflow: hidden;
  }
  .kanban-board.mobile-accordion .kanban-section-header {
    padding: 14px 16px;
    background: #f9fafb;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem;
    font-weight: 600;
    color: #1a1a1a;
  }
  .kanban-board.mobile-accordion .kanban-section-header .count-badge {
    background: #FF6B2C;
    color: white;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
  }
  .kanban-board.mobile-accordion .kanban-section-header .count-badge.empty {
    background: #e5e7eb;
    color: #6b7280;
  }
  .kanban-board.mobile-accordion .kanban-section-body {
    display: none;
    padding: 12px;
    background: #fafafa;
  }
  .kanban-board.mobile-accordion .kanban-section.open .kanban-section-body {
    display: block;
  }
  .kanban-board.mobile-accordion .kanban-section-header .toggle-icon {
    transition: transform 0.2s ease;
    color: #9ca3af;
  }
  .kanban-board.mobile-accordion .kanban-section.open .toggle-icon {
    transform: rotate(180deg);
  }

  /* Catalog grid: 2 columns on mobile already, just tighten gap */
  #prod-grid {
    gap: 12px !important;
  }
  #prod-grid h3 { font-size: 0.875rem !important; }

  /* Reports KPI cards: stack 1-up but bigger */
  .kpi-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }

  /* Activity panel goes fullscreen too */
  #activity-panel-mount .side-panel { width: 100vw !important; }

  /* Settings: forms 1-col, larger inputs for touch */
  #settings-form input,
  #settings-form select,
  #settings-form textarea {
    font-size: 16px !important;   /* iOS won't zoom on focus if font-size >= 16px */
    padding: 12px !important;
    min-height: 44px;             /* Apple recommended touch target */
  }
  #settings-form button[type="submit"] {
    width: 100%;
    padding: 14px !important;
    font-size: 16px !important;
  }

  /* Hide overflow scroll bars on horizontal scroll containers */
  .overflow-x-auto::-webkit-scrollbar { display: none; }

  /* Touch-friendly button sizes */
  button, .button, a[role="button"] {
    min-height: 40px;
  }
}

/* ============================================================
 * RESPONSIVE: 768px AND UP (tablet + desktop)
 * ============================================================ */
@media (min-width: 768px) {
  #mobile-menu { display: none !important; }
  #mobile-menu-toggle { display: none; }
  .mobile-row-card { display: none; }
}

/* ============================================================
 * SAFE AREA INSETS (iPhone notch / Android gesture bar)
 * ============================================================ */
@supports (padding: env(safe-area-inset-top)) {
  body { padding-top: env(safe-area-inset-top); }
  .side-panel {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* Prevent horizontal page scroll on mobile */
@media (max-width: 767px) {
  body { overflow-x: hidden; }
  html { overflow-x: hidden; overflow-y: auto; height: auto; }

  /* Wrap tables in horizontal scroll containers so only the table scrolls, not the page */
  table.data-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    width: 100%;
  }

  /* Make Overview recent proformas readable: limit nested table width */
  .card table.data-table { max-width: 100%; }

  /* Status column should not get squeezed off screen */
  table.data-table td:last-child, table.data-table th:last-child {
    padding-right: 16px;
    min-width: 70px;
  }
}

/* ============================================================
 * MOBILE/DESKTOP TOGGLE UTILITIES
 * Used by buyers.js, proformas.js, overview.js to switch
 * between table layout (desktop) and card layout (mobile)
 * ============================================================ */
.mobile-only { display: none; }
.hidden-on-mobile { display: block; }

@media (max-width: 767px) {
  .mobile-only { display: block; }
  .hidden-on-mobile { display: none !important; }
}