/* GST Report Maker – accounting dashboard theme (navy / light blue) */
:root {
  --navy: #14305a;
  --navy-2: #1f3f73;
  --blue: #2f6fb0;
  --sky: #e8f1fb;
  --sky-2: #d4e5f7;
  --ink: #1b2533;
  --muted: #64748b;
  --line: #e2e8f0;
  --bg: #f4f7fb;
  --ok: #16a34a;
  --warn: #d97706;
  --err: #dc2626;
  --radius: 14px;
  --bs-primary: #1f4f8f;
  --bs-primary-rgb: 31, 79, 143;
  --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --bs-body-color: var(--ink);
  --bs-body-bg: var(--bg);
}
html, body { background: var(--bg); color: var(--ink); }
body { font-size: .9rem; -webkit-font-smoothing: antialiased; }
a { color: var(--blue); }
.btn-primary { --bs-btn-bg: #1f4f8f; --bs-btn-border-color: #1f4f8f; --bs-btn-hover-bg: #173d70; --bs-btn-hover-border-color: #173d70; --bs-btn-active-bg: #12315b; }
.btn-outline-primary { --bs-btn-color: #1f4f8f; --bs-btn-border-color: #9db8dc; --bs-btn-hover-bg: #1f4f8f; --bs-btn-hover-border-color: #1f4f8f; }
.form-control:focus, .form-select:focus { border-color: #7aa6d8; box-shadow: 0 0 0 .2rem rgba(47, 111, 176, .15); }
.text-navy { color: var(--navy) !important; }

/* ---------- shell ---------- */
.app-shell { display: flex; min-height: 100vh; }
.sidebar {
  width: 252px; flex: 0 0 252px; background: linear-gradient(180deg, var(--navy) 0%, #0f2547 100%);
  color: #cfdcf0; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}
@media (max-width: 991.98px) { .sidebar { position: fixed; height: 100%; } }
.sidebar-brand { display: flex; align-items: center; gap: .7rem; padding: 1.15rem 1.2rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.sidebar-brand .logo { width: 38px; height: 38px; border-radius: 11px; background: linear-gradient(135deg, #5aa0e6, #2f6fb0); display: grid; place-items: center; color: #fff; font-size: 1.15rem; box-shadow: 0 6px 16px rgba(47,111,176,.45); }
.sidebar-brand strong { color: #fff; display: block; line-height: 1.1; font-size: 1rem; }
.sidebar-brand small { color: #8fb2de; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; }
.sidebar-nav { padding: .6rem .7rem; overflow-y: auto; flex: 1; }
.sidebar-nav .nav-link { display: flex; align-items: center; gap: .7rem; color: #c3d3ea; padding: .55rem .75rem; border-radius: 10px; margin-bottom: 2px; font-weight: 500; transition: background .15s, color .15s; }
.sidebar-nav .nav-link i { font-size: 1.05rem; opacity: .85; }
.sidebar-nav .nav-link:hover { background: rgba(255,255,255,.07); color: #fff; }
.sidebar-nav .nav-link.active { background: rgba(122, 175, 235, .18); color: #fff; box-shadow: inset 3px 0 0 #7fb3ee; }
.nav-section { font-size: .66rem; text-transform: uppercase; letter-spacing: .14em; color: #7f9cc4; padding: .9rem .75rem .3rem; }
.sidebar-foot { padding: .7rem 1.2rem; font-size: .72rem; color: #6f8bb3; border-top: 1px solid rgba(255,255,255,.06); }

.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; gap: .8rem; padding: .85rem 1.6rem; background: rgba(255,255,255,.82); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 1020; }
.topbar h1 { font-size: 1.15rem; margin: 0; font-weight: 700; color: var(--navy); }
.topbar .sub { font-size: .78rem; color: var(--muted); }
.btn-icon { border: 1px solid var(--line); background: #fff; }
.btn-user { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: .25rem .8rem .25rem .3rem; display: inline-flex; align-items: center; gap: .5rem; font-weight: 500; }
.avatar { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, #2f6fb0, #14305a); color: #fff; display: grid; place-items: center; font-size: .8rem; font-weight: 600; }
.content { padding: 1.5rem 1.6rem 3rem; }
@media (max-width: 575.98px) { .content { padding: 1rem; } .topbar { padding: .7rem 1rem; } }

/* ---------- cards ---------- */
.glass-card {
  background: rgba(255,255,255,.78); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(214, 227, 243, .9); border-radius: var(--radius); box-shadow: 0 1px 2px rgba(16,40,80,.04), 0 8px 24px rgba(16,40,80,.05);
}
.card-pad { padding: 1.2rem 1.3rem; }
.section-title { font-size: .95rem; font-weight: 700; color: var(--navy); margin-bottom: .8rem; display: flex; align-items: center; gap: .5rem; }
.section-title .bi { color: var(--blue); }

.kpi { padding: 1rem 1.1rem; height: 100%; position: relative; overflow: hidden; }
.kpi::after { content: ""; position: absolute; right: -24px; top: -24px; width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(circle, rgba(47,111,176,.12), transparent 70%); }
.kpi .label { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; display: flex; align-items: center; gap: .4rem; }
.kpi .label i { color: var(--blue); }
.kpi .value { font-size: 1.35rem; font-weight: 700; color: var(--navy); margin-top: .25rem; font-variant-numeric: tabular-nums; }
.kpi .hint { font-size: .74rem; color: var(--muted); }
.kpi.net { background: linear-gradient(135deg, #1f4f8f, #14305a); border: none; }
.kpi.net .label, .kpi.net .hint { color: #b9cfee; }
.kpi.net .label i { color: #9cc5f3; }
.kpi.net .value { color: #fff; }
.kpi.ret .value { color: #9a3412; }

.report-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; padding: 1rem 1.2rem; margin-bottom: 1.2rem; }
.rh-title { font-weight: 700; font-size: 1.05rem; color: var(--navy); }
.rh-title .gstin { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .82rem; background: var(--sky); color: var(--navy-2); padding: .1rem .45rem; border-radius: 6px; margin-left: .4rem; }
.rh-sub { color: var(--muted); font-size: .8rem; margin-top: .2rem; }
.report-picker select { min-width: 280px; }

/* ---------- tables ---------- */
.table-wrap { overflow: auto; border-radius: 12px; border: 1px solid var(--line); background: #fff; }
.table-wrap.tall { max-height: 68vh; }
.table-gst { margin: 0; font-size: .82rem; white-space: nowrap; }
.table-gst thead th { position: sticky; top: 0; z-index: 2; background: var(--navy); color: #fff; font-weight: 600; font-size: .76rem; border-color: #2a4a7b; padding: .55rem .65rem; }
.table-gst td { padding: .45rem .65rem; border-color: #edf1f6; vertical-align: middle; }
.table-gst tbody tr:hover td { background: #f5f9fe; }
.table-gst tfoot td { background: var(--sky-2); font-weight: 700; border-top: 2px solid var(--navy); position: sticky; bottom: 0; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.neg { color: var(--err); font-weight: 600; }
.mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .78rem; }
tr.row-error td { background: #fff1f1 !important; }
tr.row-warning td { background: #fffaeb !important; }
.wrap-cell { white-space: normal; min-width: 280px; max-width: 520px; font-size: .76rem; color: #475569; }

/* ---------- wizard / upload ---------- */
.steps { display: flex; gap: .5rem; margin-bottom: 1.2rem; flex-wrap: wrap; }
.step { display: flex; align-items: center; gap: .55rem; padding: .5rem .9rem .5rem .55rem; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--muted); font-weight: 600; font-size: .82rem; }
.step .n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--sky); color: var(--navy); font-size: .75rem; }
.step.active { border-color: #9db8dc; color: var(--navy); box-shadow: 0 2px 10px rgba(31,79,143,.12); }
.step.active .n { background: var(--blue); color: #fff; }
.step.done .n { background: var(--ok); color: #fff; }

.dropzone {
  border: 2px dashed #b6cbe6; border-radius: var(--radius); padding: 1.8rem 1rem; text-align: center; cursor: pointer;
  background: linear-gradient(180deg, rgba(232,241,251,.55), rgba(255,255,255,.4)); transition: all .15s;
}
.dropzone:hover, .dropzone.drag { border-color: var(--blue); background: rgba(232,241,251,.95); }
.dropzone .bi { font-size: 2.2rem; color: var(--blue); }
.dropzone .t { font-weight: 600; color: var(--navy); margin-top: .3rem; }
.dropzone .s { font-size: .78rem; color: var(--muted); }
.upload-card { padding: 1.2rem; height: 100%; }
.upload-card .head { display: flex; align-items: center; gap: .7rem; margin-bottom: .9rem; }
.upload-card .head .ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; font-size: 1.2rem; }
.ic-sales { background: #e3f0ff; color: #1f5fae; }
.ic-ret { background: #fff0e6; color: #c2410c; }
.file-meta { display: flex; gap: .8rem; flex-wrap: wrap; font-size: .8rem; color: var(--muted); }
.file-meta b { color: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.chip { font-size: .72rem; padding: .15rem .5rem; border-radius: 999px; background: var(--sky); color: var(--navy-2); border: 1px solid var(--sky-2); }
.chip.miss { background: #fde8e8; color: #9b1c1c; border-color: #f8caca; }
.map-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .55rem .8rem; }
.map-grid label { font-size: .74rem; font-weight: 600; color: #334155; margin-bottom: .15rem; display: block; }
.map-grid .req::after { content: " *"; color: var(--err); }
.map-grid select.unmapped { color: #94a3b8; }
.progress { height: .65rem; border-radius: 999px; background: #e6edf6; }
.progress-bar { background: linear-gradient(90deg, #2f6fb0, #5aa0e6); }
.stat-pills { display: flex; gap: .4rem; flex-wrap: wrap; }
.stat-pills span { font-size: .75rem; border-radius: 8px; padding: .25rem .55rem; background: #f1f5f9; }
.stat-pills .ok { background: #e7f7ee; color: #166534; }
.stat-pills .w { background: #fff6e0; color: #92400e; }
.stat-pills .e { background: #fde8e8; color: #991b1b; }
.stat-pills .d { background: #eef2ff; color: #3730a3; }

.empty-state { text-align: center; padding: 3rem 1rem; }
.empty-state .bi { font-size: 2.6rem; color: #9db8dc; }
.empty-state h5 { margin-top: .6rem; color: var(--navy); font-weight: 700; }
.empty-state p { color: var(--muted); }

/* ---------- login ---------- */
.login-bg { min-height: 100vh; display: grid; place-items: center; padding: 1rem;
  background: radial-gradient(1200px 600px at 10% -10%, #cfe2f8 0%, transparent 60%), radial-gradient(900px 500px at 110% 110%, #d9e6f7 0%, transparent 55%), #eef3f9; }
.login-card { width: 100%; max-width: 400px; padding: 2rem; }
.login-card .logo { width: 52px; height: 52px; border-radius: 15px; background: linear-gradient(135deg, #5aa0e6, #1f4f8f); color: #fff; display: grid; place-items: center; font-size: 1.5rem; margin: 0 auto .8rem; box-shadow: 0 10px 24px rgba(31,79,143,.3); }

.chart-box { position: relative; height: 290px; }
.small-muted { font-size: .78rem; color: var(--muted); }
.badge { font-weight: 600; }
.filters .form-control, .filters .form-select { font-size: .82rem; }
code.k { background: var(--sky); color: var(--navy-2); padding: .05rem .35rem; border-radius: 5px; font-size: .76rem; }
.table-gst thead th { white-space: normal; vertical-align: bottom; }
.table-gst td.lbl { white-space: normal; min-width: 150px; }
.table-gst td.src { white-space: normal; max-width: 180px; word-break: break-all; }