/* ===========================
 * Decima Exports Dashboard CSS
 * ===========================
 * Colours and fonts come from tokens.css; do not add raw hex values here.
 * Mobile-first responsive system. Tested on iPhone Safari and Android Chrome.
 * Breakpoints align with Tailwind defaults: sm=640, md=768, lg=1024, xl=1280.
 */

/* Fonts are self-hosted in tokens.css. No runtime CDN. */
body { background: var(--surface); color: var(--text); font-family: var(--font-display); }

/* Labels are set in mono (uppercase utility text is label text throughout). */
.uppercase, table.data-table thead th { font-family: var(--font-mono); }

/* Nav variant: 269px wide puts the DECIMA wordmark at 156px, above the 150px
   minimum. It must never shrink. Between 768 and 1023px the lockup and the
   seven nav items do not fit on one row, so the kit's dot-only mark stands in
   (see NAV at the end of this file). */
.brand-lockup-nav { width: 269px; height: auto; display: block; flex-shrink: 0; }
.brand-dot-nav { width: 40px; height: 40px; display: none; flex-shrink: 0; }
nav a:has(> .brand-lockup-nav), nav div:has(> a > .brand-lockup-nav) { flex-shrink: 0; }

.site-footer {
  border-top: 1px solid var(--rule);
  padding: 16px 0 24px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
}

#activity-badge { background: var(--inverse-bg); color: var(--inverse-text); }

* { -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: var(--inverse-bg);
  color: var(--inverse-text);
}
.nav-link.active:hover {
  background-color: var(--graphite);
}

/* 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: var(--ink);
}

/* Mobile menu drawer — slides down from nav, hidden by default */
#mobile-menu {
  display: none;
  position: fixed;
  top: 56px;
  left: 0;
  right: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 4px 12px rgba(26,24,19,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: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
}
#mobile-menu a:last-child { border-bottom: none; }
#mobile-menu a.active {
  background: var(--mist);
  color: var(--ink);
  font-weight: 700;
  border-left: 3px solid var(--ink);
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

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

.card { box-shadow: none; }

/* Headings and UI titles */
.serif {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
}
/* Amounts, counts, weights: mono with tabular figures so columns align */
.display, .display-num {
  font-family: var(--font-mono);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
 * 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;
}
/* Every status carries its text label plus an icon; colour is never the only
   signal. State colours only where the state is ok / alert / warn; the rest
   are neutral ink outlines. State colours sit on bone only. */
.status-pill {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--ink);
  --status-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='5' fill='none' stroke='black' stroke-width='2.5'/%3E%3C/svg%3E");
}
.status-pill::before {
  content: '';
  width: 0.75em;
  height: 0.75em;
  flex-shrink: 0;
  background: currentColor;
  -webkit-mask: var(--status-icon) center / contain no-repeat;
          mask: var(--status-icon) center / contain no-repeat;
}
.status-sent, .status-accepted, .status-approved, .status-converted {
  color: var(--state-ok);
  border-color: var(--state-ok);
  --status-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.5l3.5 3.5 7.5-8' fill='none' stroke='black' stroke-width='2.5'/%3E%3C/svg%3E");
}
.status-cancelled, .status-rejected {
  color: var(--state-alert);
  border-color: var(--state-alert);
  --status-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 3.5l9 9M12.5 3.5l-9 9' fill='none' stroke='black' stroke-width='2.5'/%3E%3C/svg%3E");
}
.status-requested, .status-in_production {
  color: var(--state-warn);
  border-color: var(--state-warn);
  --status-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M8 4.5V8l2.5 2' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
}
.status-ready_to_ship, .status-shipped, .status-with_buyer {
  --status-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h10M8.5 4l4 4-4 4' fill='none' stroke='black' stroke-width='2.5'/%3E%3C/svg%3E");
}
.status-draft {
  color: var(--graphite);
  border-color: var(--slate);
  border-style: dashed;
}

/* ============================================================
 * 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: var(--graphite);
  font-weight: 700;
  padding: 0.65rem 0.875rem;
  text-align: left;
  background: var(--surface);
  border-bottom: 1px solid var(--ink);
}
table.data-table tbody td {
  padding: 0.75rem 0.875rem;
  border-bottom: 1px solid var(--rule);
  font-size: 0.875rem;
  vertical-align: middle;
}
table.data-table tbody tr:hover {
  background-color: var(--mist);
  cursor: pointer;
}

/* ============================================================
 * SIDE PANELS (buyer/sample/proforma detail, activity)
 * ============================================================ */
.side-panel {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(560px, 90vw);
  background: var(--surface);
  box-shadow: -10px 0 25px rgba(26,24,19,0.12);
  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(26,24,19,0.35);
  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) {

  /* Nav container */
  /* Right inset stays 16px so the hamburger clears Android's gesture-nav edge
     zone. Left is 8px because the lockup SVG carries its own clear space: its
     ink still starts ~16px in, aligned with the page content. */
  nav .max-w-7xl {
    padding-left: 8px;
    padding-right: 16px;
  }
  /* 400-767px: 259px keeps the wordmark at 150px, the primary minimum. Below
     400px the dot-only mark stands in (see NAV at the end of this file). */
  .brand-lockup-nav { width: 259px; }
  /* auto (not 0): groups Activity with the hamburger when the narrow dot
     mark leaves free space; takes no width when the row is tight. */
  #activity-toggle { margin-left: auto; }

  /* 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: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 0.5rem;
    padding: 14px;
    margin-bottom: 10px;
    cursor: pointer;
  }
  .mobile-row-card:active {
    background: var(--mist);
  }
  .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: var(--ink);
  }
  .mobile-row-card .row-subtitle {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 2px;
  }
  .mobile-row-card .row-meta {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--rule);
    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: var(--text-muted); font-family: var(--font-mono); }

  /* 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 var(--rule);
    border-radius: 0.5rem;
    background: var(--surface);
    overflow: hidden;
  }
  .kanban-board.mobile-accordion .kanban-section-header {
    padding: 14px 16px;
    background: var(--surface);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--ink);
  }
  .kanban-board.mobile-accordion .kanban-section-header .count-badge {
    background: var(--inverse-bg);
    color: var(--inverse-text);
    font-family: var(--font-mono);
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
  }
  .kanban-board.mobile-accordion .kanban-section-header .count-badge.empty {
    background: var(--mist);
    color: var(--ink);
  }
  .kanban-board.mobile-accordion .kanban-section-body {
    display: none;
    padding: 12px;
    background: var(--surface);
  }
  .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: var(--graphite);
  }
  .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-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; }
}

/* ============================================================
 * NAV (after the defaults above so these win)
 * Hamburger below 768px. The dot-only mark replaces the lockup where
 * the lockup and the controls beside it do not fit with room to spare:
 * 768-1023px (nav items visible) and below 400px (phones, where OS
 * text scaling grows the controls). Tenant block (also in the page
 * heading) hides below 1280px.
 * ============================================================ */
@media (max-width: 1279px) {
  #exporter-switcher { display: none !important; }
}
@media (max-width: 767px) {
  #mobile-menu-toggle { display: flex; align-items: center; justify-content: center; }
  #desktop-nav-links { display: none !important; }
}
@media (min-width: 768px) {
  #mobile-menu { display: none !important; }
  #mobile-menu-toggle { display: none; }
}
@media (max-width: 399px), (min-width: 768px) and (max-width: 1023px) {
  .brand-lockup-nav { display: none; }
  .brand-dot-nav { display: block; }
}