/* ============================================================
   Renuka Chain & Jewels — Brand Design System
   Color theme extracted from the reference warehouse dashboard:
   Dark Red #A91E24  ·  Gold #D4AF37  ·  Slate grey  ·  White cards
   ============================================================ */

[x-cloak]{ display:none !important; }

:root {
  --brand: #A91E24;
  --brand-dark: #7E151A;
  --brand-soft: #FBECEC;
  --gold: #D4AF37;
  --gold-soft: #FBF3DD;
  --ink: #1F2430;
  --label: #8A93A3;
  --line: #ECECF1;
  --canvas: #F4F5F7;
  --ok: #17935B;
  --warn: #C8881B;
  --bad: #D03A3A;
}

* { -webkit-tap-highlight-color: transparent; }

body {
  background: var(--canvas);
  color: var(--ink);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 14px;
}

/* Logo / brand text */
.brand-serif {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
}

/* Thin gold rule under top nav (matches reference image) */
.gold-rule { height: 2px; background: linear-gradient(90deg, var(--gold), #E8CE7A, var(--gold)); }

/* Cards */
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(31,36,48,.04), 0 8px 24px rgba(31,36,48,.05);
}
.card-hover:hover { box-shadow: 0 6px 14px rgba(169,30,36,.10); border-color: #f1d4d6; }

/* Stat number */
.stat-num { color: var(--brand); font-family: 'Playfair Display', serif; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 10px; font-weight: 600;
  transition: all .15s ease; cursor: pointer; border: 1px solid transparent;
}
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); }
.btn-ghost { background: #fff; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: #FAFAFB; border-color: #dcdce3; }
.btn-gold { background: var(--gold); color: #3a2c06; }
.btn-gold:hover { filter: brightness(.96); }

/* Inputs */
.field {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 10px; background: #fff; font-size: 14px; color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
label.lb { display:block; font-size: 12px; font-weight:600; color: var(--label); margin-bottom:6px; text-transform: uppercase; letter-spacing:.03em; }

/* Status badges */
.badge { display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:600; }
.badge-paid { background:#E7F6EE; color:var(--ok); }
.badge-partial { background:var(--gold-soft); color:#9a7a14; }
.badge-unpaid { background:#FBECEC; color:var(--bad); }
.badge-pending { background:#FFF3E0; color:var(--warn); }
.badge-active { background:#E7F6EE; color:var(--ok); }
.badge-inactive { background:#EEF0F3; color:var(--label); }

/* Sidebar nav */
.nav-item { display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:11px; color:#4A5160; font-weight:600; transition: all .15s; }
.nav-item:hover { background:#fff; color:var(--brand); }
.nav-item.active { background:var(--brand); color:#fff; box-shadow:0 6px 16px rgba(169,30,36,.28); }
.nav-item.active svg { color:#fff; }

/* Table */
.tbl { width:100%; border-collapse:collapse; }
.tbl th { text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--label); font-weight:700; padding:12px 14px; border-bottom:1px solid var(--line); }
.tbl td { padding:13px 14px; border-bottom:1px solid #F2F3F6; font-size:14px; }
.tbl tbody tr:hover { background:#FAFAFB; }

/* Tabs */
.tab { padding:10px 16px; font-weight:600; color:var(--label); border-bottom:2px solid transparent; cursor:pointer; }
.tab.active { color:var(--brand); border-color:var(--brand); }

/* Modal */
.modal-overlay { position:fixed; inset:0; background:rgba(31,36,48,.45); display:flex; align-items:center; justify-content:center; z-index:60; padding:16px; }
.modal-card { background:#fff; border-radius:18px; width:100%; max-width:520px; max-height:90vh; overflow:auto; box-shadow:0 20px 60px rgba(0,0,0,.25); }

/* Toast */
.toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:var(--ink); color:#fff; padding:12px 20px; border-radius:12px; z-index:80; box-shadow:0 10px 30px rgba(0,0,0,.25); display:flex; gap:10px; align-items:center; }

/* scrollbar */
::-webkit-scrollbar{height:8px;width:8px}
::-webkit-scrollbar-thumb{background:#d8dae0;border-radius:8px}

/* Isometric illustration backdrop */
.illo-bg { background: radial-gradient(120% 120% at 70% 20%, #FCE9EA 0%, #F4F1F8 55%, #EFEFF3 100%); }

/* Bottom mobile nav */
.bottom-nav { position:fixed; bottom:0; left:0; right:0; background:#fff; border-top:1px solid var(--line); display:none; z-index:50; padding:6px 4px; }
@media (max-width: 767px){ .bottom-nav{ display:flex; } .sidebar-desk{ display:none; } main{ padding-bottom:72px; } }

/* Print */
@media print {
  .no-print { display:none !important; }
  body { background:#fff; }
  .card { box-shadow:none; border:1px solid #ddd; }
}