/* Mugavai Windows CRM — Zoho-style theme layered on top of Tailwind CDN */
:root {
  --brand: #1664d8; --brand-dark: #1250b0; --brand-50: #eef5ff;
  --sidebar-bg: #ffffff; --sidebar-active: #4a154b;   /* Zoho-style deep plum */
}
* { -webkit-font-smoothing: antialiased; }
html { scroll-behavior: smooth; }
body { background: #f5f6fa; }

.scrollbar-thin::-webkit-scrollbar { width: 8px; height: 8px; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: #cdd3db; border-radius: 999px; }
.scrollbar-thin::-webkit-scrollbar-track { background: transparent; }

/* nav — light Zoho-style sidebar with collapsible groups + plum active bar */
.nav-link {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 16px; font-size: 13.5px; font-weight: 500;
  color: #41464e; cursor: pointer; transition: background .12s, color .12s; white-space: nowrap;
}
.nav-link:hover { background: #f1eef4; color: #1a212b; }
.nav-link.active { background: var(--sidebar-active); color: #fff; }
.nav-link svg { width: 18px; height: 18px; flex-shrink: 0; color: #7a828e; }
.nav-link.active svg { color: #fff; }
/* expandable group parent */
.nav-chevron { width: 13px; height: 13px; color: #aab0b8; transition: transform .15s; }
.nav-chevron.open { transform: rotate(90deg); }
/* indented sub-items */
.nav-child { padding-left: 45px; font-size: 13px; color: #545b65; font-weight: 500; }
.nav-child:hover { background: #f1eef4; color: #1a212b; }
.nav-child.active { background: var(--sidebar-active); color: #fff; }

/* cards / tables */
.card { background:#fff; border:1px solid #e4e7ec; border-radius:8px; box-shadow:0 1px 2px rgba(16,24,40,.04); }
.stat-card { background:#fff; border:1px solid #e4e7ec; border-radius:8px; padding:16px 18px; box-shadow:0 1px 2px rgba(16,24,40,.04); }

.tbl { width:100%; border-collapse:collapse; font-size:13.5px; }
.tbl thead th {
  text-align:left; font-size:11px; letter-spacing:.03em; text-transform:uppercase;
  color:#667085; font-weight:600; padding:10px 14px; background:#fafbfc; border-bottom:1px solid #e4e7ec; white-space:nowrap;
}
.tbl tbody td { padding:11px 14px; border-bottom:1px solid #f0f1f4; color:#283042; vertical-align:middle; }
.tbl tbody tr:hover { background:#f5f8ff; }
.tbl tbody tr:last-child td { border-bottom:none; }
.num { text-align:right; font-variant-numeric: tabular-nums; white-space:nowrap; }

/* badges */
.badge { display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:999px; font-size:11.5px; font-weight:600; }
.badge-green { background:#e6f4ea; color:#1a7f43; }
.badge-amber { background:#fdf2dd; color:#9a6700; }
.badge-red   { background:#fdeaea; color:#d92d20; }
.badge-gray  { background:#eef0f3; color:#5f6b7a; }
.badge-blue  { background:#e7f0ff; color:#1664d8; }

/* forms */
.inp {
  width:100%; padding:8px 11px; border:1px solid #d0d5dd; border-radius:6px;
  font-size:14px; background:#fff; transition:border .12s, box-shadow .12s; color:#1a212b;
}
.inp:focus { outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(22,100,216,.14); }
.lbl { display:block; font-size:12px; font-weight:600; color:#475061; margin-bottom:5px; }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:8px 15px;
  border-radius:6px; font-size:14px; font-weight:600; cursor:pointer; transition:all .12s; border:1px solid transparent; }
.btn-brand { background:var(--brand); color:#fff; }
.btn-brand:hover { background:var(--brand-dark); }
.btn-ghost { background:#fff; color:#344054; border-color:#d0d5dd; }
.btn-ghost:hover { background:#f5f7fa; }
.btn-sm { padding:5px 10px; font-size:12.5px; border-radius:5px; }
.btn:disabled { opacity:.5; cursor:not-allowed; }

/* modal */
.modal-back { position:fixed; inset:0; background:rgba(16,24,40,.45); backdrop-filter:blur(2px); z-index:60;
  display:flex; align-items:flex-start; justify-content:center; padding:24px 16px; overflow-y:auto; }
.modal-box { background:#fff; border-radius:10px; width:100%; box-shadow:0 24px 60px -12px rgba(16,24,40,.35); margin:auto; }

.chip { padding:5px 12px; border-radius:6px; font-size:12.5px; font-weight:600; cursor:pointer; border:1px solid #d0d5dd; background:#fff; color:#475061; }
.chip.active { background:var(--brand); color:#fff; border-color:var(--brand); }

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

/* print invoice */
@media print {
  body * { visibility:hidden; }
  #print-area, #print-area * { visibility:visible; }
  #print-area { position:absolute; left:0; top:0; width:100%;
    -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .no-print { display:none !important; }
}