/*
 * Wukusy GST Filing — a clean SaaS layout on top of Bootstrap 5.3.8: fixed left sidebar, sticky top
 * bar, white cards on a light-grey canvas. The brand blue (#1f3864) matches the Excel header fill
 * 1F3864 and the new-party red (#ffd9d6) the Excel fill FFD9D6.
 */
:root {
  --app-bg: #f6f7f9;
  --app-panel: #ffffff;
  --app-ink: #111827;
  --app-ink-2: #374151;
  --app-muted: #6b7280;
  --app-faint: #9ca3af;
  --app-line: #e5e7eb;
  --app-line-soft: #f0f1f4;
  --app-brand: #1f3864;
  --app-brand-600: #2a4a82;
  --app-brand-50: #eef2f9;
  --app-good: #067647;
  --app-warn: #b54708;
  --app-bad: #b42318;
  --app-radius: 12px;
  --app-radius-sm: 8px;
  --app-shadow: 0 1px 2px rgba(16, 24, 40, .05);
  --app-sidebar-w: 256px;
  --bs-body-font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --bs-body-font-size: 14px;
  --bs-body-color: var(--app-ink);
  --bs-border-color: var(--app-line);
  --bs-link-color: var(--app-brand);
  --bs-link-color-rgb: 31, 56, 100;
  --bs-link-hover-color: var(--app-brand-600);
  --bs-link-hover-color-rgb: 42, 74, 130;
}

body.app { background: var(--app-bg); color: var(--app-ink); line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { text-decoration: none; }
.app-main a:not(.tile):not(.button):hover { text-decoration: underline; }
code { font-family: "Cascadia Mono", Consolas, monospace; font-size: 12.5px; color: var(--app-ink-2); }
h1 { font-size: 22px; font-weight: 650; letter-spacing: -.01em; margin: 0 0 4px; }
h2 { font-size: 15px; font-weight: 600; margin: 28px 0 10px; }
h3 { font-size: 14px; font-weight: 600; margin: 0 0 6px; }

/* ---- brand ---------------------------------------------------------------- */
.app-brand, .brand { display: flex; align-items: center; gap: 10px; color: var(--app-ink); text-decoration: none; }
.app-brand .mark, .brand .mark {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(135deg, var(--app-brand-600), var(--app-brand));
  color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .4px; box-shadow: 0 1px 2px rgba(16, 24, 40, .15);
}
.brand-text { display: block; line-height: 1.25; }
.brand-text strong { display: block; font-size: 14.5px; color: var(--app-ink); }
.brand-text small { display: block; font-size: 11.5px; color: var(--app-muted); }

/* ---- sidebar ------------------------------------------------------------------ */
.app-sidebar { --bs-offcanvas-width: 272px; }
.app-sidebar-inner { display: flex; flex-direction: column; width: 100%; height: 100%; background: var(--app-panel); }
.app-sidebar-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 18px 18px 12px; }
.app-sidebar-nav { flex: 1 1 auto; overflow-y: auto; padding: 4px 12px 16px; }
.app-navgroup + .app-navgroup { margin-top: 12px; }
.app-navgroup .navgroup {
  display: block; padding: 10px 10px 6px; font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .07em; color: var(--app-faint);
}
.app-sidebar .nav-link {
  display: flex; align-items: center; gap: 10px; margin: 1px 0; padding: 8px 10px; border-radius: var(--app-radius-sm);
  color: var(--app-ink-2); font-size: 13.5px; font-weight: 500;
}
.app-sidebar .nav-link i { width: 18px; font-size: 16px; text-align: center; color: var(--app-faint); }
.app-sidebar .nav-link:hover { background: #f3f4f6; color: var(--app-ink); }
.app-sidebar .nav-link:hover i { color: var(--app-ink-2); }
.app-sidebar .nav-link.active { background: var(--app-brand-50); color: var(--app-brand); font-weight: 600; box-shadow: inset 3px 0 0 var(--app-brand); }
.app-sidebar .nav-link.active i { color: var(--app-brand); }
.app-sidebar .nav-link:focus-visible { outline: 2px solid var(--app-brand); outline-offset: 1px; }

.userbox {
  display: flex; align-items: center; gap: 6px; margin: 0 12px 12px; padding: 8px 8px 8px 10px;
  border: 1px solid var(--app-line); border-radius: var(--app-radius); background: #fafbfc;
}
.userbox .who { display: flex; flex: 1 1 auto; align-items: center; gap: 10px; min-width: 0; color: var(--app-ink); text-decoration: none; }
.userbox .who:hover strong, .userbox .who.on strong { color: var(--app-brand); }
.userbox .avatar {
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 32px; height: 32px;
  border-radius: 50%; background: var(--app-brand-50); color: var(--app-brand); font-size: 12px; font-weight: 700;
}
.userbox .who-text { min-width: 0; line-height: 1.25; }
.userbox .who-text strong { display: block; overflow: hidden; font-size: 13px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.userbox .who-text small { display: block; font-size: 11.5px; color: var(--app-muted); text-transform: capitalize; }
button.signout {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 34px; height: 34px;
  padding: 0; border: 0; border-radius: var(--app-radius-sm); background: transparent; color: var(--app-muted); box-shadow: none;
}
button.signout i { font-size: 17px; }
button.signout span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
button.signout:hover { background: #fef3f2; color: var(--app-bad); }

/* ---- top bar, content, footer ------------------------------------------------------ */
.app-body { display: flex; flex-direction: column; min-height: 100vh; }
.app-topbar {
  position: sticky; top: 0; z-index: 1020; display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 32px;
  background: rgba(255, 255, 255, .88); backdrop-filter: saturate(180%) blur(8px); border-bottom: 1px solid var(--app-line);
}
.app-menu-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin-left: -4px; padding: 0;
  border: 1px solid var(--app-line); border-radius: var(--app-radius-sm); background: #fff; color: var(--app-ink);
}
.app-menu-btn i { font-size: 20px; }
.app-crumbs { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13.5px; }
.app-crumbs .crumb-group { color: var(--app-muted); white-space: nowrap; }
.app-crumbs .bi { font-size: 11px; color: var(--app-faint); }
.app-crumbs .crumb-page { overflow: hidden; color: var(--app-ink); font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.app-topbar-meta { display: flex; gap: 8px; margin-left: auto; }
.app-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--app-line);
  border-radius: 999px; background: #fff; color: var(--app-muted); font-size: 12px; white-space: nowrap;
}
.app-main { flex: 1 0 auto; width: 100%; max-width: 1440px; padding: 28px 32px 16px; }
.app-footer { max-width: 1440px; padding: 8px 32px 28px; color: var(--app-faint); font-size: 12px; }

@media (min-width: 992px) {
  .app-sidebar { position: fixed; top: 0; bottom: 0; left: 0; z-index: 1030; width: var(--app-sidebar-w); border-right: 1px solid var(--app-line); }
  .app-body { margin-left: var(--app-sidebar-w); }
}
@media (max-width: 991.98px) {
  .app-topbar { padding: 0 16px; }
  .app-main { padding: 20px 16px 12px; }
  .app-footer { padding: 8px 16px 24px; }
  .app-crumbs .crumb-group, .app-crumbs .bi { display: none; }
}
@media (max-width: 575.98px) {
  .app-topbar-meta { display: none; }
}

/* ---- page building blocks ------------------------------------------------------------- */
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.muted { color: var(--app-muted); }
p.muted { margin-bottom: 14px; }
.small { font-size: 12.5px; }
.back { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 8px; font-size: 13px; }
.bad { color: var(--app-bad); }
a.warn-link { color: var(--app-warn); }
.nowrap { white-space: nowrap; }

.banner { margin: 0 0 16px; padding: 11px 14px; border: 1px solid var(--app-line); border-radius: 10px; background: #f3f5f9; font-size: 13.5px; }
.banner a { color: inherit; font-weight: 600; text-decoration: underline; }
.banner.ok { background: #ecfdf3; border-color: #abefc6; color: var(--app-good); }
.banner.bad { background: #fef3f2; border-color: #fecdca; color: var(--app-bad); }
.banner.newparty-banner { background: #fff6f5; border-color: #f7cfca; color: #7a1710; }

.card, .panel {
  padding: 20px; border: 1px solid var(--app-line); border-radius: var(--app-radius); background: var(--app-panel);
  box-shadow: var(--app-shadow);
}
.card h2, .panel h2 { margin-top: 0; }
.panel + .panel { margin-top: 16px; }
.panel-grid > .panel + .panel, .cards > .panel + .panel { margin-top: 0; }
.panel.newparty { border-left: 3px solid #d9534f; }
.panel.filing-result { border-left: 3px solid var(--app-brand); }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin: 16px 0 8px; }
.small-cards { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.panel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin: 20px 0; }
.card-actions { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--app-line-soft); }
.statline {
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin: 12px 0; padding: 10px 14px;
  border: 1px solid var(--app-line); border-radius: var(--app-radius); background: var(--app-panel);
}

dl { margin: 0; }
dl dt { font-size: 12px; font-weight: 500; color: var(--app-muted); }
dl dd { margin: 0 0 8px; font-weight: 500; }
dl.wide > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px dashed var(--app-line); }
dl.wide > div:last-child { border-bottom: 0; }
dl.wide dt { margin: 0; font-size: 13px; font-weight: 400; color: var(--app-ink-2); }
dl.wide dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
dl.defs > div { display: grid; grid-template-columns: 72px 1fr; gap: 12px; }
dl.defs dt { font-weight: 600; color: var(--app-ink); }
dl.defs dd { font-weight: 400; color: var(--app-ink-2); text-align: left; }

.pill { display: inline-block; padding: 2px 9px; border-radius: 999px; background: var(--app-brand-50); color: var(--app-brand); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.pill.good { background: #ecfdf3; color: var(--app-good); }
.pill.warn { background: #fffaeb; color: var(--app-warn); }
.pill.bad { background: #fef3f2; color: var(--app-bad); }
.pill.muted { background: #f2f4f7; color: #475467; }

.swatch { display: inline-block; width: 12px; height: 12px; margin: 0 2px; border: 1px solid #e0a19b; border-radius: 3px; background: #ffd9d6; vertical-align: -1px; }

/* ---- tables ------------------------------------------------------------------------------ */
.app-main .table-responsive { margin: 8px 0 24px; border: 1px solid var(--app-line); border-radius: var(--app-radius); background: var(--app-panel); box-shadow: var(--app-shadow); }
.card .table-responsive, .panel .table-responsive { margin: 4px 0 8px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.app-main table { width: 100%; margin: 0; border-collapse: collapse; background: transparent; --bs-table-bg: transparent; }
.app-main th, .app-main td { padding: 10px 14px; border-bottom: 1px solid var(--app-line-soft); text-align: left; vertical-align: top; }
.app-main thead th {
  border-bottom: 1px solid var(--app-line); background: #f9fafb; color: var(--app-muted); font-size: 11.5px;
  font-weight: 600; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}
.card thead th, .panel thead th { background: transparent; }
.app-main tbody tr:last-child > td { border-bottom: 0; }
.app-main tbody tr:hover > td { background: #fafbfc; }
td.num, th.num { text-align: right !important; font-variant-numeric: tabular-nums; }
tr.backdated > td, tr.chainbreak > td { background: #fff8e8; }
tr.provisional > td { background: #fffaf0; }
.newparty-table tr.held > td { background: #fff7f6; }
.newparty-table tr.isnew > td { background: #fffaf0; }
.newparty-table tr.picked > td { background: #eef4ff; }
table.reconcile tr.hit > td { background: #ecfdf3; }
table.reconcile tr.miss > td { background: #fffaeb; }
tfoot tr.totals td { border-top: 2px solid var(--app-line); background: #f9fafb; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---- buttons and forms ----------------------------------------------------------------------- */
button, .button {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1px solid #d0d5dd;
  border-radius: var(--app-radius-sm); background: #fff; color: var(--app-ink-2); font: inherit; font-size: 13.5px;
  font-weight: 500; line-height: 1.4; text-decoration: none; cursor: pointer; box-shadow: var(--app-shadow);
  transition: background-color .15s, border-color .15s, color .15s;
}
button:hover, .button:hover { border-color: #b9c0cc; background: #f9fafb; color: var(--app-ink); }
button.primary, .button.primary { border-color: var(--app-brand); background: var(--app-brand); color: #fff; }
button.primary:hover, .button.primary:hover { border-color: #172b4d; background: #172b4d; color: #fff; }
button.danger { border-color: #fecdca; color: var(--app-bad); }
button.danger:hover { background: #fef3f2; }
button.small { padding: 4px 10px; font-size: 12.5px; }
button.small.danger { border-color: var(--app-bad); background: var(--app-bad); color: #fff; }
button.newparty-btn { border-color: var(--app-bad); background: var(--app-bad); color: #fff; font-weight: 600; white-space: nowrap; }
button.newparty-btn:hover { border-color: #912018; background: #912018; color: #fff; }
button:disabled, button:disabled:hover { border-color: #e4e7ec; background: #f9fafb; color: var(--app-faint); cursor: not-allowed; opacity: 1; }
button.primary:disabled { border-color: #98a6c0; background: #98a6c0; color: #fff; }
button.wide { justify-content: center; width: 100%; margin-top: 4px; padding: 9px 14px; }

.form-control, .form-select { border-color: #d0d5dd; border-radius: var(--app-radius-sm); font-size: 13.5px; }
.form-control:focus, .form-select:focus, .app-main input:focus, .app-main select:focus, .app-main textarea:focus {
  border-color: #8aa3cf; outline: 0; box-shadow: 0 0 0 3px rgba(31, 56, 100, .12);
}
.app-main input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not(.form-control),
.app-main select:not(.form-select), .app-main textarea:not(.form-control) {
  padding: 6px 10px; border: 1px solid #d0d5dd; border-radius: var(--app-radius-sm); background: #fff; color: var(--app-ink); font: inherit;
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--app-brand); }
form.stack { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
form.stack label { display: flex; flex-direction: column; gap: 5px; width: 100%; color: var(--app-ink-2); font-size: 12.5px; font-weight: 500; }
form.inline { display: inline-flex; align-items: center; gap: 8px; margin-right: 12px; }
.filters {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin: 16px 0 8px; padding: 14px 16px;
  border: 1px solid var(--app-line); border-radius: var(--app-radius); background: var(--app-panel); box-shadow: var(--app-shadow);
}
.filters label { display: flex; flex-direction: column; gap: 5px; color: var(--app-ink-2); font-size: 12.5px; font-weight: 500; }

/* ---- dashboard tiles ------------------------------------------------------------------------------ */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; margin: 20px 0 8px; }
.tile {
  position: relative; display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border: 1px solid var(--app-line);
  border-radius: var(--app-radius); background: var(--app-panel); color: inherit; text-decoration: none; box-shadow: var(--app-shadow);
  transition: border-color .15s, box-shadow .15s;
}
.tile:hover { border-color: #c9d3e6; color: inherit; box-shadow: 0 4px 14px rgba(16, 24, 40, .08); }
.tile-label { color: var(--app-muted); font-size: 12px; font-weight: 500; }
.tile-value { color: var(--app-ink); font-size: 28px; font-weight: 650; letter-spacing: -.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.tile-foot { color: var(--app-muted); font-size: 12px; }
.tile.tile-warn { border-color: #fecdca; }
.tile.tile-warn .tile-value { color: var(--app-bad); }
.tile.tile-warn::after { content: ""; position: absolute; top: 18px; right: 18px; width: 8px; height: 8px; border-radius: 50%; background: var(--app-bad); }

/* ---- sign-in ---------------------------------------------------------------------------------------- */
body.loginpage { min-height: 100vh; background: radial-gradient(1100px 520px at 50% -8%, #e6ecf7 0%, var(--app-bg) 62%); color: var(--app-ink); }
.loginwrap { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; min-height: 100vh; padding: 24px 16px; }
.logincard {
  width: 100%; max-width: 384px; padding: 28px; border: 1px solid var(--app-line); border-radius: 16px; background: var(--app-panel);
  box-shadow: 0 12px 32px rgba(16, 24, 40, .08);
}
.logincard .brand { padding: 0 0 22px; }
.logincard h1 { margin: 0 0 4px; font-size: 20px; }
.logincard form { margin-top: 18px; }
.logincard .banner { margin: 14px 0 0; }
.loginfoot { margin: 0; color: var(--app-muted); text-align: center; }

/* ---- error pages -------------------------------------------------------------------------------------- */
.app-error .app-topbar { position: static; }
.app-error .app-main { margin: 0 auto; }
.error-panel { max-width: 640px; margin: 40px auto; }