/* ============================================================
   PRACO WMS — Core Design System
   Extracted from Styles.html
   ============================================================ */

:root {
  --bg: #f8f6f1;
  --bg2: #f0ece4;
  --surface: #ffffff;
  --surface2: #faf8f4;
  --surface3: #f5f2ec;
  --border: rgba(209,196,172,0.45);
  --border2: rgba(209,196,172,0.7);
  --text: #1c1408;
  --text2: #3d2e14;
  --text3: #7a6840;
  --text4: #a89970;
  --amber: #f59e0b;
  --amber2: #d97706;
  --amber-light: rgba(245,158,11,0.10);
  --amber-pale: rgba(245,158,11,0.04);
  --green: #059669;
  --green2: #047857;
  --green-light: rgba(5,150,105,0.10);
  --red: #dc2626;
  --red-light: rgba(220,38,38,0.08);
  --blue: #3b82f6;
  --blue2: #2563eb;
  --blue-light: rgba(37,99,235,0.08);
  --purple2: #7c3aed;
  --shadow-card: 0 2px 10px rgba(0,0,0,0.04);
  --shadow-md: 0 6px 20px rgba(0,0,0,0.08);
}

* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family:'Poppins',sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}

/* ─── Hero ─── */
.hero {
  display:flex; justify-content:space-between; align-items:flex-start; gap:16px;
  margin-bottom:20px; flex-wrap:wrap;
}
.hero h1 { font-size:28px; font-weight:900; line-height:1.1; letter-spacing:-0.5px; color:var(--text); }
.hero h1 span { background:linear-gradient(90deg,#f59e0b,#d97706); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.hero-sub { font-size:12px; color:var(--text4); margin-top:4px; font-weight:500; }
.hero-eyebrow { display:flex; align-items:center; gap:6px; font-size:10px; font-weight:700; color:var(--amber2); text-transform:uppercase; letter-spacing:1.2px; margin-bottom:6px; }
.hero-dot { width:8px; height:8px; border-radius:50%; background:var(--green); display:inline-block; }
.hero-right { display:flex; gap:16px; }
.hero-stat { text-align:right; }
.hero-stat-value { font-family:'DM Mono',monospace; font-size:24px; font-weight:700; color:var(--text); line-height:1; }
.hero-stat-label { font-size:10px; color:var(--text4); font-weight:600; margin-top:3px; }

/* ─── Cards ─── */
.card {
  background:var(--surface); border:1.5px solid var(--border); border-radius:16px;
  padding:18px; box-shadow:var(--shadow-card); margin-bottom:14px;
}

/* ─── Inputs ─── */
.input-wrap { margin-bottom:12px; }
.input-wrap label { display:block; font-size:10px; font-weight:700; color:var(--text4); text-transform:uppercase; letter-spacing:0.8px; margin-bottom:4px; }
.input-wrap input, .input-wrap select, .input-wrap textarea {
  width:100%; padding:10px 12px; font-size:13px; font-weight:500; font-family:inherit;
  border:1.5px solid var(--border); border-radius:10px; background:var(--surface); color:var(--text);
  transition:border-color 0.15s;
}
.input-wrap input:focus, .input-wrap select:focus, .input-wrap textarea:focus {
  border-color:var(--amber); outline:none; box-shadow:0 0 0 3px rgba(245,158,11,0.1);
}

/* ─── Buttons ─── */
.btn-primary {
  background:linear-gradient(135deg,var(--amber),var(--amber2)); color:#fff; border:none;
  border-radius:10px; padding:10px 18px; font-family:inherit; font-size:13px; font-weight:700;
  cursor:pointer; transition:all 0.15s; letter-spacing:0.2px;
}
.btn-primary:hover { box-shadow:0 4px 14px rgba(245,158,11,0.35); transform:translateY(-1px); }
.btn-primary:disabled { opacity:0.5; cursor:not-allowed; transform:none; }
.btn-secondary {
  background:var(--surface); border:1.5px solid var(--border); color:var(--text3);
  border-radius:10px; padding:10px 18px; font-family:inherit; font-size:13px; font-weight:700;
  cursor:pointer; transition:all 0.15s;
}
.btn-secondary:hover { border-color:var(--amber); color:var(--amber2); }
.btn-icon {
  background:var(--surface2); border:1.5px solid var(--border); border-radius:8px;
  padding:6px 12px; font-size:11px; font-weight:700; color:var(--text3); cursor:pointer;
  font-family:inherit; transition:all 0.12s;
}
.btn-icon:hover { border-color:var(--amber); color:var(--amber2); }
.btn-green { background:linear-gradient(135deg,var(--green),#34d399); border-color:var(--green); color:#fff; }

/* ─── Messages ─── */
.msg { font-size:12px; font-weight:600; padding:8px 12px; border-radius:8px; display:none; }
.msg.show { display:block; }
.msg.success { background:var(--green-light); color:var(--green); }
.msg.error { background:var(--red-light); color:var(--red); }
.msg.info { background:var(--blue-light); color:var(--blue2); }

/* ─── Search ─── */
.search-input {
  width:100%; padding:10px 12px 10px 36px; font-size:13px; font-weight:500; font-family:inherit;
  border:1.5px solid var(--border); border-radius:10px; background:var(--surface); color:var(--text);
}
.search-icon { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--text4); font-size:14px; pointer-events:none; }

/* ─── Filter Chips ─── */
.filter-chips { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.filter-chip {
  padding:6px 14px; border-radius:999px; font-size:11px; font-weight:700;
  border:1.5px solid var(--border); background:var(--surface); color:var(--text3);
  cursor:pointer; transition:all 0.12s;
}
.filter-chip.active, .filter-chip:hover { background:var(--amber-light); border-color:var(--amber); color:var(--amber2); }

/* ─── Status Badges ─── */
.status-badge {
  display:inline-block; padding:3px 10px; border-radius:999px; font-size:9px; font-weight:700;
  text-transform:uppercase; letter-spacing:0.5px;
}
.status-badge.new { background:var(--blue-light); color:var(--blue2); }
.status-badge.pallet_ready { background:var(--amber-light); color:var(--amber2); }
.status-badge.dispatched { background:var(--green-light); color:var(--green); }
.status-badge.on_hold { background:var(--red-light); color:var(--red); }

/* ─── Section Labels ─── */
.section-label { font-size:9px; font-weight:700; color:var(--text4); text-transform:uppercase; letter-spacing:1.2px; margin-bottom:6px; }
.section-title { font-size:18px; font-weight:800; color:var(--text); margin-bottom:4px; }
.section-sub { font-size:12px; color:var(--text4); margin-bottom:16px; }

/* ─── Modal ─── */
.modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,0.4); backdrop-filter:blur(4px);
  display:none; align-items:center; justify-content:center; z-index:9999; padding:20px;
}
.modal-overlay.open { display:flex; }
.modal {
  background:var(--surface); border-radius:18px; max-height:90vh; overflow-y:auto;
  box-shadow:0 20px 60px rgba(0,0,0,0.2); width:100%;
}
.modal-header {
  display:flex; justify-content:space-between; align-items:center; padding:16px 20px;
  border-bottom:1px solid var(--border); position:sticky; top:0; background:var(--surface); z-index:2;
}
.modal-title { font-size:16px; font-weight:800; color:var(--text); }
.modal-close {
  width:32px; height:32px; border-radius:8px; border:1px solid var(--border);
  background:var(--surface2); color:var(--text3); font-size:16px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}

/* ─── Customer Cards ─── */
.cust-card {
  background:var(--surface); border:1.5px solid var(--border); border-radius:14px;
  padding:14px; box-shadow:var(--shadow-card); cursor:pointer; transition:all 0.15s;
}
.cust-card:hover { border-color:var(--amber); box-shadow:var(--shadow-md); }
.cust-name { font-size:14px; font-weight:800; color:var(--text); line-height:1.2; }

/* ─── Hidden utility ─── */
.hidden { display:none !important; }

@media(max-width:640px) {
  .hero h1 { font-size:22px; }
  .hero-right { gap:10px; }
  .hero-stat-value { font-size:18px; }
}