/* ============================================================
   Africa Coffee Park — Shared Responsive + Print Styles
   Applies to all ERP department modules
   ============================================================ */

/* ── Universal design tokens ─────────────────────────────── */
:root {
  /* Font stacks */
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-nav:     'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-mono:    'DM Mono', 'Fira Code', Consolas, monospace;

  /* Font sizes */
  --font-size-xs:   10px;
  --font-size-sm:   11px;
  --font-size-base: 13px;
  --font-size-md:   14px;
  --font-size-lg:   16px;

  /* Core color palette */
  --espresso:     #1a0e08;
  --dark-brown:   #2c1a0e;
  --mid-brown:    #6f3f2a;
  --warm-tan:     #b8874a;
  --gold:         #c9a227;
  --light-gold:   #e8c96a;
  --cream:        #fdf6ee;
  --light-cream:  #fef9f4;

  /* Border radius scale */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
}

/* ── Universal font application ──────────────────────────── */
/* Body text inherits the Inter stack */
body {
  font-family: var(--font-body);
}

/* Topbar and navigation elements use DM Sans */
.erp-topbar,
header.topbar,
.topbar {
  font-family: var(--font-nav);
}
.erp-topbar *,
.topbar *,
.dept-nav *,
.module-nav *,
.dept-nav-drawer-inner * {
  font-family: inherit;
}

/* Buttons and tab controls use DM Sans for tighter UI density */
button,
.btn,
.erp-btn,
.mod-tab,
.sub-tab,
.erp-export-btn,
.kpi-label {
  font-family: var(--font-nav);
}

/* Table headers use DM Sans with uppercase tracking */
table {
  border-collapse: collapse;
  width: 100%;
}
th {
  font-family: var(--font-nav);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
td {
  font-family: var(--font-body);
  font-size: 13px;
}

/* Code/mono fields (IDs, references, SKUs) */
code,
.mono,
.ref-code,
.emp-id {
  font-family: var(--font-mono);
}

/* ── Mobile: dept-nav collapses into drawer ──────────────── */
.dept-nav-hamburger {
  display: none;
  background: none;
  border: 1px solid rgba(212,168,67,0.4);
  border-radius: 5px;
  color: #c9a227;
  padding: 4px 8px;
  font-size: 16px;
  cursor: pointer;
  position: fixed;
  top: 14px;
  right: 70px;
  z-index: 1100;
}
.dept-nav-drawer {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2100;
  background: rgba(0,0,0,0.6);
}
.dept-nav-drawer.open { display: block; }
.dept-nav-drawer-inner {
  position: absolute;
  top: 0; left: 0;
  width: 260px; max-width: 85vw;
  height: 100%;
  background: #1a0e08;
  border-right: 1px solid rgba(212,168,67,0.25);
  overflow-y: auto;
  padding: 16px 0 40px;
}
.dept-nav-drawer-brand {
  padding: 12px 20px 14px;
  font-size: 14px;
  font-weight: 700;
  color: #c9a227;
  border-bottom: 1px solid rgba(212,168,67,0.15);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.dept-nav-drawer-close {
  background: none;
  border: none;
  color: #b8874a;
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
}
.dept-nav-drawer-inner a {
  display: block;
  padding: 11px 24px;
  color: rgba(245,234,216,0.8);
  text-decoration: none;
  font-size: 13px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background 0.12s, color 0.12s;
}
.dept-nav-drawer-inner a:hover,
.dept-nav-drawer-inner a.current {
  background: rgba(212,168,67,0.1);
  color: #c9a227;
}

/* ── Mobile: table overflow ──────────────────────────────── */
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 8px; }
.tbl-wrap table { min-width: 540px; }

/* ── Mobile: general responsive overrides ───────────────── */
@media (max-width: 900px) {
  .dept-nav { display: none !important; }
  .dept-nav-hamburger { display: flex; align-items: center; justify-content: center; }
  .module-nav { top: 56px !important; }
  .erp-body { margin-top: 104px !important; }
  .kpi-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 600px) {
  .erp-topbar { padding: 0 12px !important; }
  .erp-body { padding: 12px !important; margin-top: 100px !important; }
  .kpi-grid { grid-template-columns: 1fr !important; }
  .mod-tab { padding: 10px 12px !important; font-size: 11px !important; }
  .mod-status-bar { flex-direction: column !important; align-items: flex-start !important; }
  .msb-chip { border-right: none !important; border-bottom: 1px solid var(--border, #e8d8c8) !important; width: 100% !important; }
  .modal-content, .modal-body { padding: 14px !important; }
  .form-row { flex-direction: column !important; }
  .erp-brand-sub { display: none; }
}

/* ── Print: full letterhead ──────────────────────────────── */
@media print {
  body { background: #fff !important; font-size: 11pt !important; }
  .erp-topbar, .dept-nav, .module-nav, .erp-footer, .erp-body > *:not(.mod-panel.active),
  .mod-tab, .no-print, button:not(.print-show), .toast, .modal-backdrop,
  .dept-nav-hamburger, .dept-nav-drawer, .mod-status-bar { display: none !important; }
  .erp-body { margin-top: 0 !important; padding: 0 !important; }
  .mod-panel { display: block !important; }
  .print-letterhead { display: block !important; }
  .tbl-wrap { overflow: visible !important; }
  table { page-break-inside: auto; }
  tr { page-break-inside: avoid; }
  thead { display: table-header-group; }
}
.print-letterhead { display: none; }