/* ============================================================
   GSTR-9 / GSTR-9C module design system — scoped under .gstr9-shell
   Ports the prototype's visual language (GSTR9-Web-UI styles.css /
   GSTR9C GSTR9_UI style.css): GST-portal navy bands, light blue
   chrome, compact statutory tables.
   ============================================================ */

.gstr9-shell {
    /* ---- brand palette: navy/blue for statutory table headers, accents,
       borders, landing cards, and part-description strips now all derive from
       the app's --theme-default so the entire module recolours with the
       Appearance theme picker (2026-09-16). ---- */
    --g9-navy: color-mix(in srgb, var(--theme-default, #274c6b) 90%, #000 10%);
    --g9-navy-dark: color-mix(in srgb, var(--theme-default, #1d3a53) 78%, #000 22%);
    --g9-blue: var(--theme-default, #2c5f8a);
    --g9-blue-light: color-mix(in srgb, var(--theme-default, #2c5f8a) 10%, var(--bs-body-bg, #fff));
    --g9-border: var(--bs-border-color, #c9d8e6);
    --g9-amber: #b45309;
    --g9-amber-bg: #fff7e6;

    /* ---- prototype tokens — surfaces/borders/ink tied to Bootstrap theme vars ---- */
    --bg:       var(--bs-body-bg, #eef1f6);
    --surface:  var(--bs-body-bg, #ffffff);
    --surface-2: color-mix(in srgb, var(--bs-body-color, #17202e) 4%,  var(--bs-body-bg, #f7f9fc));
    --surface-3: color-mix(in srgb, var(--bs-body-color, #17202e) 7%,  var(--bs-body-bg, #eaeff7));
    --line:     var(--bs-border-color, #d3dbe7);
    --line-soft: color-mix(in srgb, var(--bs-border-color, #d3dbe7) 60%, transparent);
    --ink:      var(--bs-body-color, #17202e);
    --ink-2:    color-mix(in srgb, var(--bs-body-color, #17202e) 75%, var(--bs-secondary-color, #78849a));
    --ink-3:    var(--bs-secondary-color, #78849a);
    --brand:    var(--theme-default, #1f4b8f);
    --brand-dk: var(--theme-default, #163a72);
    --brand-lt: color-mix(in srgb, var(--theme-default, #1f4b8f) 10%, var(--bs-body-bg, #fff));
    --accent: #0f766e; --accent-lt: #e2f4f1;
    --ok: #16794c; --ok-lt: #e3f6ec;
    --warn: #a4600b; --warn-lt: #fdf1dc;
    --err: #b3261e; --err-lt: #fdecea;
    --info: #1f4b8f; --info-lt: color-mix(in srgb, var(--theme-default, #1f4b8f) 10%, var(--bs-body-bg, #fff));
    --radius: 10px; --radius-sm: 6px;
    --shadow: 0 1px 2px rgba(0,0,0,.06), 0 6px 20px rgba(0,0,0,.07);
    --shadow-sm: 0 1px 2px rgba(0,0,0,.08);
    --mono: ui-monospace, "Cascadia Mono", Consolas, "Roboto Mono", monospace;
    /* Sans stack falls through to the app-wide body font so GSTR-9 typography
       matches whatever theme font is in effect elsewhere. */
    --sans: var(--bs-body-font-family, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
    --navy: var(--theme-default, #1c3a5e); --navy-dk: color-mix(in srgb, var(--theme-default, #1c3a5e) 80%, #000); --navy-lt: color-mix(in srgb, var(--theme-default, #1c3a5e) 70%, #fff);
}

@media (prefers-color-scheme: dark) {
    .gstr9-shell:not([data-g9-theme="light"]) {
        --bg: #0d1420; --surface: #141d2b; --surface-2: #182333; --surface-3: #1e2a3c;
        --line: #2b3a51; --line-soft: #222f42;
        --ink: #e6ecf5; --ink-2: #a9b6c9; --ink-3: #7d8ba1;
        --brand: #6f9dea; --brand-dk: #4a7fd4; --brand-lt: #1b2b45;
        --accent: #3fb3a3; --accent-lt: #14312e;
        --ok: #52c08a; --ok-lt: #12301f;
        --warn: #e0a34a; --warn-lt: #33260f;
        --err: #f0837a; --err-lt: #3a1614;
        --info: #6f9dea; --info-lt: #1b2b45;
    }
}
.gstr9-shell[data-g9-theme="dark"] {
    --bg: #0d1420; --surface: #141d2b; --surface-2: #182333; --surface-3: #1e2a3c;
    --line: #2b3a51; --line-soft: #222f42;
    --ink: #e6ecf5; --ink-2: #a9b6c9; --ink-3: #7d8ba1;
    --brand: var(--theme-default, #6f9dea); --brand-dk: #4a7fd4; --brand-lt: #1b2b45;
    --accent: #3fb3a3; --accent-lt: #14312e;
    --ok: #52c08a; --ok-lt: #12301f;
    --warn: #e0a34a; --warn-lt: #33260f;
    --err: #f0837a; --err-lt: #3a1614;
    --info: #6f9dea; --info-lt: #1b2b45;
}

/* ---- app dark mode (body.dark-only) integration — mirrors prefers-color-scheme dark ---- */
body.dark-only .gstr9-shell {
    --bg: #0d1420; --surface: #141d2b; --surface-2: #182333; --surface-3: #1e2a3c;
    --line: #2b3a51; --line-soft: #222f42;
    --ink: #e6ecf5; --ink-2: #a9b6c9; --ink-3: #7d8ba1;
    --brand: var(--theme-default, #6f9dea); --brand-dk: #4a7fd4; --brand-lt: #1b2b45;
    --accent: #3fb3a3; --accent-lt: #14312e;
    --ok: #52c08a; --ok-lt: #12301f;
    --warn: #e0a34a; --warn-lt: #33260f;
    --err: #f0837a; --err-lt: #3a1614;
    --info: #6f9dea; --info-lt: #1b2b45;
    --navy: var(--theme-default, #6f9dea); --navy-dk: color-mix(in srgb, var(--theme-default, #4a7fd4) 90%, #000); --navy-lt: color-mix(in srgb, var(--theme-default, #6f9dea) 60%, #fff);
    /* Dark-mode statutory table band: keep the theme colour but push it toward
       navy so white text keeps enough contrast on any picked hue. */
    --g9-navy: color-mix(in srgb, var(--theme-default, #6f9dea) 55%, #05101d 45%);
    --g9-navy-dark: color-mix(in srgb, var(--theme-default, #6f9dea) 40%, #05101d 60%);
    --g9-blue: color-mix(in srgb, var(--theme-default, #6f9dea) 85%, #fff);
    --g9-border: #2b3a51; --g9-blue-light: #1b2b45; --g9-amber-bg: #33260f;
}
body.dark-only .gstr9-shell .gstr9-table-card > .card-body.small { background: #182333; color: #a9b6c9; }
body.dark-only .gstr9-shell .gstr9-table-card > .card-footer { background: #141d2b; color: #7d8ba1; }
body.dark-only .gstr9-shell .menu-list button { color: var(--ink); }
body.dark-only .gstr9-shell .card:not(.gstr9-table-card) > .card-header { color: #a9b6c9; }
body.dark-only .gstr9-shell .alert-info { background: #1b2b45; border-color: #2b3a51; color: #a9b6c9; }

/* ---- appbar-row: module filing-status band (row 1) — themed, no hardcoded navy ---- */
.gstr9-shell .appbar-row {
    display: flex; align-items: center; gap: 12px;
    padding: 5px 16px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--line);
    border-radius: 8px 8px 0 0;
}
.gstr9-shell .appbar-row .filing { display: flex; gap: 10px; align-items: center; flex: 0 0 auto; }
.gstr9-shell .appbar-row .fl { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.gstr9-shell .appbar-row .fl > span {
    font-size: 9px; text-transform: uppercase; letter-spacing: .5px;
    color: var(--ink-3); font-weight: 700; white-space: nowrap;
}
.gstr9-shell .appbar-row .fl select, .gstr9-shell .appbar-row .fl input {
    font: 11.5px var(--sans); color: var(--ink);
    background: var(--surface); border: 1px solid var(--line);
    border-radius: 5px; padding: 2px 5px; height: 22px;
}
.gstr9-shell .appbar-row .fl select { width: 110px; }
.gstr9-shell .filing[data-status="filed"] .fl select { background: var(--ok-lt); border-color: var(--ok); color: var(--ok); font-weight: 700; }
.gstr9-shell .filing[data-status="uploaded"] .fl select { background: var(--info-lt); border-color: var(--info); color: var(--info); font-weight: 700; }
.gstr9-shell .filing[data-status="prepared"] .fl select { background: var(--warn-lt); border-color: var(--warn); color: var(--warn); font-weight: 700; }
.gstr9-shell .filing[data-status="notfiled"] .fl select { background: var(--err-lt); border-color: var(--err); color: var(--err); font-weight: 700; }
.gstr9-shell .appbar-row .fl input[type="date"] { width: 122px; font-family: var(--mono); font-size: 11px; }
.gstr9-shell .appbar-row .fl-arn input { width: 118px; font-family: var(--mono); text-transform: uppercase; letter-spacing: .3px; }
.gstr9-shell .appbar-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gstr9-shell .appbar-row .btn {
    font: 600 12.5px var(--sans); border: 1px solid var(--line);
    background: var(--surface); color: var(--ink);
    padding: 6px 12px; border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap;
}
.gstr9-shell .appbar-row .btn:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-lt); }
.gstr9-shell .appbar-row .hd-export { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 700; }
.gstr9-shell .appbar-row .hd-export:hover { background: var(--brand-dk); border-color: var(--brand-dk); color: #fff; }
.gstr9-shell .appbar-row .save-chip {
    font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
    background: var(--ok-lt); color: var(--ok); border: 1px solid transparent;
}
.gstr9-shell .appbar-row .save-chip.dirty { background: var(--warn-lt); color: var(--warn); }

/* ---- stepstrip: dataset radio + preparation steps (row 2) ---- */
.gstr9-shell .stepstrip {
    display: flex; align-items: stretch; gap: 8px;
    padding: 8px 14px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    overflow: visible !important;
    border-radius: 0 0 8px 8px;
}
.gstr9-shell .dsbar { display: flex; align-items: stretch; gap: 6px; flex: 0 0 auto; padding: 0; border: 0; background: transparent; }
.gstr9-shell .ds-opt {
    display: flex; align-items: center; gap: 7px;
    padding: 3px 11px 3px 8px; border-radius: var(--radius-sm);
    border: 1px solid var(--line); background: var(--surface);
    cursor: pointer; line-height: 1.15;
}
.gstr9-shell .ds-opt:hover { border-color: var(--brand); }
.gstr9-shell .ds-opt.active {
    border-color: var(--brand); background: var(--brand-lt);
    box-shadow: inset 0 0 0 1px var(--brand);
}
.gstr9-shell .dsbar[data-active="pc"] .ds-opt.active,
.gstr9-shell .dsbar[data-active="ps"] .ds-opt.active {
    border-color: var(--warn); background: var(--warn-lt);
    box-shadow: inset 0 0 0 1px var(--warn);
}
.gstr9-shell .ds-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.gstr9-shell .ds-dot { flex: 0 0 auto; width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--ink-3); background: var(--surface); position: relative; }
.gstr9-shell .ds-opt input:checked + .ds-dot { border-color: var(--brand); }
.gstr9-shell .ds-opt input:checked + .ds-dot::after { content: ''; position: absolute; inset: 2px; border-radius: 50%; background: var(--brand); }
.gstr9-shell .dsbar[data-active="pc"] .ds-opt input:checked + .ds-dot,
.gstr9-shell .dsbar[data-active="ps"] .ds-opt input:checked + .ds-dot { border-color: var(--warn); }
.gstr9-shell .dsbar[data-active="pc"] .ds-opt input:checked + .ds-dot::after,
.gstr9-shell .dsbar[data-active="ps"] .ds-opt input:checked + .ds-dot::after { background: var(--warn); }
.gstr9-shell .ds-txt { display: flex; flex-direction: column; font-size: 12.5px; font-weight: 600; }
.gstr9-shell .ds-txt em { font-style: normal; font-weight: 400; font-size: 11px; color: var(--ink-3); }
.gstr9-shell .ds-opt input:checked ~ .ds-txt { color: var(--brand); }
.gstr9-shell .dsbar[data-active="pc"] .ds-opt input:checked ~ .ds-txt,
.gstr9-shell .dsbar[data-active="ps"] .ds-opt input:checked ~ .ds-txt { color: var(--warn); }

.gstr9-shell .steps { display: flex; align-items: stretch; gap: 8px; flex: 1 1 auto; min-width: 0; overflow: visible !important; }
.gstr9-shell .step {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
    text-align: center; cursor: pointer; white-space: nowrap;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--ink);
    padding: 3px 12px; font: inherit; flex: 0 0 auto; min-width: 118px;
}
.gstr9-shell .step:hover { border-color: var(--brand); box-shadow: var(--shadow-sm); }
.gstr9-shell .step em { font-style: normal; font-size: 9.5px; font-weight: 800; color: var(--err); letter-spacing: .2px; }
.gstr9-shell .step b { font-size: 11.5px; font-weight: 700; line-height: 1.25; color: var(--navy); display: block; }
.gstr9-shell .step i { font-style: normal; font-size: 9.5px; line-height: 1.2; color: var(--warn); font-weight: 600; }
.gstr9-shell .step.done em, .gstr9-shell .step.done i { color: var(--ok); }
.gstr9-shell .step-help { background: var(--warn-lt); border-color: var(--warn); margin-left: auto; }
.gstr9-shell .step-help em { color: var(--warn); }
.gstr9-shell .step-menu { position: relative; display: flex; overflow: visible !important; }
.gstr9-shell .step-menu .menu-list { top: calc(100% + 4px); left: 0; right: auto; min-width: 250px; z-index: 9999 !important; }

.gstr9-shell .menu { position: relative; overflow: visible !important; }
.gstr9-shell .menu-list {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 9999 !important;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow);
    min-width: 230px; padding: 6px;
}
.gstr9-shell .menu-list button {
    display: block; width: 100%; text-align: left;
    border: 0; background: transparent; color: var(--ink);
    font: 13px var(--sans); padding: 8px 10px; border-radius: var(--radius-sm); cursor: pointer;
}
.gstr9-shell .menu-list button:hover { background: var(--surface-3); }
.gstr9-shell .menu-list hr { border: 0; border-top: 1px solid var(--line-soft); margin: 5px 2px; }
.gstr9-shell .gstr9-topbar-card,
.gstr9-shell .gstr9-topbar-card > .card-body,
.gstr9-shell .gstr9-topbar,
.gstr9-shell .appbar-row { overflow: visible !important; }

/* ---- Part I: registration strip + summary/position cards (verbatim) ---- */
.gstr9-shell .reg-strip {
    display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap;
    padding: 10px 14px; margin-bottom: 14px;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.gstr9-shell .reg-f { display: flex; flex-direction: column; gap: 2px; flex: 0 1 auto; }
.gstr9-shell .reg-f > span { font-size: 9.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--ink-3); font-weight: 700; white-space: nowrap; }
.gstr9-shell .reg-f em { color: var(--err); font-style: normal; }
.gstr9-shell .reg-f input, .gstr9-shell .reg-f select {
    font: 12.5px var(--sans); color: var(--ink);
    background: var(--surface-2); border: 1px solid var(--line);
    border-radius: 5px; padding: 4px 8px; height: 28px;
}
.gstr9-shell .reg-f input { width: 150px; }
.gstr9-shell .reg-f select { width: 150px; }
.gstr9-shell .reg-meta { display: flex; align-items: center; gap: 10px; margin-left: auto; font-size: 12px; color: var(--ink-3); padding-bottom: 4px; white-space: nowrap; }
.gstr9-shell .reg-meta b { color: var(--ink); font-family: var(--mono); }

.gstr9-shell .card {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow-sm); margin-bottom: 22px; overflow: hidden;
}
.gstr9-shell .card > header {
    display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px;
    border-bottom: 1px solid var(--line-soft); background: var(--surface-2);
}
.gstr9-shell .card-no { flex: 0 0 auto; font: 700 13px var(--mono); color: #fff; background: var(--brand); border-radius: var(--radius-sm); padding: 5px 9px; min-width: 34px; text-align: center; }
.gstr9-shell .card-ttl { flex: 1 1 auto; min-width: 0; }
.gstr9-shell .card-ttl h3 { font-size: 14.5px; font-weight: 650; line-height: 1.35; margin: 0; }
.gstr9-shell .card-ttl .sub { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.gstr9-shell .card-tools { flex: 0 0 auto; display: flex; gap: 6px; align-items: center; }
.gstr9-shell .tag { font: 600 10.5px var(--sans); text-transform: uppercase; letter-spacing: .5px; padding: 3px 7px; border-radius: 999px; background: var(--surface-3); color: var(--ink-3); }

.gstr9-shell .tbl-wrap { overflow-x: auto; }
.gstr9-shell table.calc { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; margin: 0; }
.gstr9-shell table.calc th { background: var(--surface-3); font: 600 11.5px var(--sans); color: var(--ink-2); text-align: right; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.gstr9-shell table.calc th:first-child { text-align: left; }
.gstr9-shell table.calc td { padding: 8px 12px; border-bottom: 1px solid var(--line-soft); text-align: right; font: 13px var(--mono); white-space: nowrap; }
.gstr9-shell table.calc td:first-child { text-align: left; font-family: var(--sans); }
.gstr9-shell .pos { color: var(--err); }
.gstr9-shell .neg { color: var(--ok); }

.gstr9-shell table.sum th.c-tno, .gstr9-shell table.sum td.c-tno { width: 58px; text-align: center; font-family: var(--mono); font-weight: 600; }
.gstr9-shell table.sum th.c-dsc, .gstr9-shell table.sum td.c-dsc { text-align: left; min-width: 280px; }
.gstr9-shell table.sum th.c-val0, .gstr9-shell table.sum td.c-val0 { width: 104px; text-align: center; }
.gstr9-shell table.sum tbody tr { cursor: pointer; }
.gstr9-shell table.sum tbody tr:hover td { background: var(--surface-2); }
.gstr9-shell table.sum td.na-cell { background: repeating-linear-gradient(135deg,transparent,transparent 5px,var(--line-soft) 5px,var(--line-soft) 6px); }
.gstr9-shell .vchip { display: inline-block; font: 700 10px var(--sans); letter-spacing: .4px; padding: 2px 7px; border-radius: 999px; text-transform: uppercase; }
.gstr9-shell .vchip.ok { background: var(--ok-lt); color: var(--ok); }
.gstr9-shell .vchip.warn { background: var(--warn-lt); color: var(--warn); }
.gstr9-shell .vchip.err { background: var(--err-lt); color: var(--err); }

.gstr9-shell .help-panel { padding: 12px 16px; font-size: 12.5px; line-height: 1.6; color: var(--ink-2); background: var(--accent-lt); border-bottom: 1px solid var(--line-soft); white-space: pre-line; }
.gstr9-shell .card-help {
    width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto;
    border: 1.5px solid var(--brand); background: var(--surface);
    color: var(--brand); font: 800 14px var(--sans); cursor: pointer;
}
.gstr9-shell .card-help:hover { background: var(--brand); color: #fff; }
.gstr9-shell .tbl-notes {
    margin: -18px 0 22px; padding: 12px 16px;
    background: var(--surface-2); border: 1px solid var(--line); border-top: 0;
    border-radius: 0 0 var(--radius) var(--radius);
    font-size: 12.5px; line-height: 1.65; color: var(--ink-2); white-space: pre-line;
}
.gstr9-shell .tbl-notes b { display: block; color: var(--ink); margin-bottom: 4px; }
.gstr9-shell .gstr9-table-card { margin-bottom: 0; }

/* ---- Review screens: validation / compare / computation (verbatim) ---- */
.gstr9-shell .part-head { margin: 6px 0 16px; font-size: 12px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; color: var(--accent); }
.gstr9-shell .v-summary { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.gstr9-shell .v-pill { display: flex; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 11px 16px; box-shadow: var(--shadow-sm); }
.gstr9-shell .v-pill b { font: 700 20px var(--mono); }
.gstr9-shell .v-pill span { font-size: 12px; color: var(--ink-3); }
.gstr9-shell .v-pill.err b { color: var(--err); }
.gstr9-shell .v-pill.warn b { color: var(--warn); }
.gstr9-shell .v-pill.info b { color: var(--info); }
.gstr9-shell .v-pill.ok b { color: var(--ok); }

.gstr9-shell .issue { display: flex; gap: 12px; align-items: flex-start; padding: 11px 14px; border-bottom: 1px solid var(--line-soft); cursor: pointer; }
.gstr9-shell .issue:hover { background: var(--surface-2); }
.gstr9-shell .issue:last-child { border-bottom: 0; }
.gstr9-shell .issue .sev { flex: 0 0 auto; font: 700 9.5px var(--sans); text-transform: uppercase; letter-spacing: .6px; padding: 3px 7px; border-radius: 4px; margin-top: 1px; min-width: 52px; text-align: center; }
.gstr9-shell .sev.error { background: var(--err-lt); color: var(--err); }
.gstr9-shell .sev.warn { background: var(--warn-lt); color: var(--warn); }
.gstr9-shell .sev.info { background: var(--info-lt); color: var(--info); }
.gstr9-shell .issue .where { font: 600 12px var(--mono); color: var(--ink-2); flex: 0 0 96px; margin-top: 2px; }
.gstr9-shell .issue .what { flex: 1 1 auto; font-size: 13px; line-height: 1.5; }
.gstr9-shell .clean-state { padding: 40px 20px; text-align: center; }
.gstr9-shell .clean-state .big { font-size: 34px; }
.gstr9-shell .clean-state h3 { margin-top: 8px; font-size: 16px; }
.gstr9-shell .clean-state p { margin-top: 6px; color: var(--ink-3); font-size: 13px; }

.gstr9-shell table.calc tr.sep td { background: var(--sub-bg); font-weight: 600; }
.gstr9-shell table.calc tr.grand td { background: var(--total-bg); font-weight: 700; }
.gstr9-shell table.calc tr.grand td:first-child { font-weight: 700; }
.gstr9-shell table.calc td.na-cell, .gstr9-shell table.calc td.cmp-diff { text-align: right; }
.gstr9-shell table.calc td.cmp-diff { background: var(--warn-lt); color: var(--warn); font-weight: 700; }
.gstr9-shell table.calc td.na-cell { background: repeating-linear-gradient(135deg,transparent,transparent 5px,var(--line-soft) 5px,var(--line-soft) 6px); }

/* ---- cards ---------------------------------------------------- */
.gstr9-shell .card {
    border: 1px solid var(--g9-border);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* the module toolbar card gets a soft blue wash */
.gstr9-shell > .card:first-child > .card-body {
    background: var(--g9-blue-light);
    border-radius: 8px;
}

/* ---- statutory table cards (Gstr9TableSheet / Gstr9cTableSheet) */
.gstr9-shell .gstr9-table-card {
    border-color: var(--g9-blue);
    overflow: hidden;
}

.gstr9-shell .gstr9-table-card > .card-header {
    background: linear-gradient(180deg, var(--g9-navy), var(--g9-navy-dark));
    color: #fff;
    border-bottom: 0;
    letter-spacing: .01em;
}

.gstr9-shell .gstr9-table-card > .card-header .btn-outline-secondary {
    color: #fff;
    border-color: rgba(255, 255, 255, .55);
}

.gstr9-shell .gstr9-table-card > .card-header .btn-outline-secondary:hover {
    background: rgba(255, 255, 255, .15);
    color: #fff;
}

.gstr9-shell .gstr9-table-card > .card-header .btn-outline-primary {
    color: #fff;
    border-color: rgba(255, 255, 255, .55);
    background: rgba(255, 255, 255, .08);
}

.gstr9-shell .gstr9-table-card > .card-header .badge.text-bg-light {
    background: var(--g9-amber-bg) !important;
    color: var(--g9-amber);
    border-color: #f0d9a8 !important;
}

/* help / notes strips under the navy band */
.gstr9-shell .gstr9-table-card > .card-body.small {
    background: var(--g9-blue-light);
    border-bottom: 1px solid var(--g9-border);
    color: var(--ink-2);
}

.gstr9-shell .gstr9-table-card > .card-footer {
    background: var(--surface-2);
    color: var(--ink-3);
    font-style: italic;
}

/* ---- part description band ----------------------------------- */
.gstr9-shell .g9-part-desc {
    background: var(--g9-blue-light);
    border-left: 4px solid var(--g9-blue);
    border-radius: 4px;
    padding: .35rem .6rem;
    color: var(--g9-navy);
    font-weight: 600;
}

/* ---- dataset switch: prototype colouring ---------------------- */
.gstr9-shell .btn-group .btn-primary {
    background: var(--g9-navy);
    border-color: var(--g9-navy);
}

.gstr9-shell .btn-group .btn-outline-primary {
    color: var(--g9-navy);
    border-color: var(--g9-navy);
}

.gstr9-shell .btn-group .btn-outline-primary:hover {
    background: var(--g9-blue-light);
    color: var(--g9-navy);
}

/* ---- landing cards (summary jump tiles) ----------------------- */
.gstr9-shell .card[role="button"] {
    transition: box-shadow .12s ease, transform .12s ease;
    border-left: 4px solid var(--g9-blue);
}

.gstr9-shell .card[role="button"]:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, .16);
    transform: translateY(-1px);
}

/* ---- headers inside plain info cards -------------------------- */
.gstr9-shell .card:not(.gstr9-table-card) > .card-header {
    background: var(--g9-blue-light);
    border-bottom: 1px solid var(--g9-border);
    color: var(--g9-navy);
}

/* statutory table band text stays white (beats any theme colour) */
.gstr9-shell .gstr9-table-card > .card-header,
.gstr9-shell .gstr9-table-card > .card-header .fw-semibold,
.gstr9-shell .gstr9-table-card > .card-header span {
    color: #fff !important;
}

/* ---- FY notes / alerts ---------------------------------------- */
.gstr9-shell .alert-info {
    background: var(--g9-blue-light);
    border-color: var(--g9-border);
    color: var(--ink);
}

/* ---- datasheet polish inside the module ----------------------- */
.gstr9-shell .data-grid {
    border-top: 1px solid var(--g9-border);
}

.gstr9-shell .gstr9-table-card .card-body.p-0 {
    background: var(--surface);
    /* horizontal scroll wraps wide statutory tables inside the card on narrow
       viewports instead of pushing the page wider than the phone screen */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ============================================================
   Mobile responsive layer — "native app feel"
   Applies below 768px. Scoped under .gstr9-shell so it never
   leaks into other modules.
   ============================================================ */
@media (max-width: 768px) {
    .gstr9-shell {
        padding: 0 !important;
    }

    /* trim outer card chrome so the phone gets edge-to-edge content */
    .gstr9-shell > .card {
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        margin-left: -0.25rem;
        margin-right: -0.25rem;
    }

    .gstr9-shell > .card > .card-body {
        padding: 0.5rem !important;
    }

    /* sticky module toolbar so save/validate stay reachable while scrolling
       tall statutory tables — mimics a mobile app's top action bar */
    .gstr9-shell > .card:first-child {
        position: sticky;
        top: 0;
        z-index: 20;
        margin-bottom: 0.5rem !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    }

    /* toolbar packs tighter and wraps cleanly */
    .gstr9-shell .spq-toolbar {
        gap: 0.35rem !important;
        padding: 0 !important;
    }

    /* dataset switch: shrink text and give thumb-sized tap targets */
    .gstr9-shell .spq-toolbar .btn-group .btn {
        font-size: 0.72rem;
        padding: 0.35rem 0.5rem;
        min-height: 40px;
    }

    /* status chip strip drops onto its own line so it never crowds buttons */
    .gstr9-shell .spq-toolbar > .d-inline-flex.small {
        flex-basis: 100%;
        order: 10;
        margin: 0 !important;
        font-size: 0.72rem;
    }

    /* every action button in the toolbar gets a comfortable tap target */
    .gstr9-shell .spq-toolbar .btn {
        min-height: 40px;
    }

    /* delete moves inline with the scroller instead of hugging the far right,
       which on phones ended up under the go-back arrow */
    .gstr9-shell .spq-toolbar > .ms-auto {
        margin-left: 0 !important;
    }

    /* statutory table card: less inner chrome, header stacks */
    .gstr9-shell .gstr9-table-card {
        border-radius: 6px;
        margin-bottom: 0.75rem !important;
    }

    .gstr9-shell .gstr9-table-card > .card-header {
        padding: 0.5rem 0.6rem;
        font-size: 0.85rem;
        gap: 0.35rem !important;
    }

    .gstr9-shell .gstr9-table-card > .card-header .fw-semibold {
        font-size: 0.85rem;
        line-height: 1.25;
    }

    .gstr9-shell .gstr9-table-card > .card-header .btn {
        min-height: 36px;
        padding: 0.3rem 0.55rem;
    }

    /* the SmartGrid host: keep sheet at natural width, scroll the card body */
    .gstr9-shell .gstr9-table-card .card-body.p-0 > .d-flex {
        min-width: 640px;
    }

    /* summary landing cards: mobile-app-style stacked list with press feedback */
    .gstr9-shell .card[role="button"] {
        border-left-width: 6px;
        border-radius: 8px;
    }

    .gstr9-shell .card[role="button"]:active {
        transform: scale(0.98);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18) inset;
    }

    /* landing header/summary grid — bigger, one-per-line fields for touch */
    .gstr9-shell .card-body .row.g-2.small > [class*="col-"] {
        flex-basis: 100%;
        max-width: 100%;
    }

    .gstr9-shell .form-select-sm,
    .gstr9-shell .form-control-sm {
        min-height: 40px;
        font-size: 0.9rem;
    }

    /* preparation-step rows: bigger tappable link + generous row height */
    .gstr9-shell .card-body .btn-link.p-0 {
        padding: 0.5rem 0 !important;
        font-size: 0.9rem;
    }

    /* validation results table shrinks to a phone-friendly font */
    .gstr9-shell .table.table-sm {
        font-size: 0.78rem;
    }

    .gstr9-shell .table.table-sm td,
    .gstr9-shell .table.table-sm th {
        padding: 0.4rem 0.35rem;
    }

    /* FY-notes alert becomes edge-to-edge like a mobile notification */
    .gstr9-shell .alert {
        border-radius: 6px;
        padding: 0.5rem 0.6rem;
        font-size: 0.8rem;
    }

    /* ---- Summary page: appbar-row wraps on mobile ---- */
    .gstr9-shell .appbar-row {
        flex-wrap: wrap;
        gap: 8px;
        padding: 8px 10px;
    }
    .gstr9-shell .appbar-row .filing {
        flex-wrap: wrap;
        gap: 6px;
        width: 100%;
    }
    .gstr9-shell .appbar-row .fl {
        flex: 1 1 auto;
    }
    .gstr9-shell .appbar-row .appbar-actions {
        width: 100%;
        flex-wrap: wrap;
        gap: 6px;
    }
    .gstr9-shell .appbar-row .btn,
    .gstr9-shell .appbar-row .save-chip {
        min-height: 44px;
        font-size: 11.5px;
    }

    /* stepstrip scrolls horizontally rather than overflowing the viewport */
    .gstr9-shell .stepstrip {
        overflow-x: auto !important;
        flex-wrap: nowrap;
        padding: 6px 10px;
    }
    .gstr9-shell .steps {
        flex-wrap: nowrap;
        overflow-x: auto;
    }
    .gstr9-shell .step {
        min-width: 90px;
        min-height: 44px;
        padding: 3px 8px;
    }

    /* registration strip: stack fields full-width on mobile */
    .gstr9-shell .reg-strip {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 8px 10px;
    }
    .gstr9-shell .reg-f {
        width: 100%;
    }
    .gstr9-shell .reg-f input,
    .gstr9-shell .reg-f select {
        width: 100%;
        min-height: 40px;
        font-size: 14px;
    }
    .gstr9-shell .reg-meta {
        margin-left: 0;
        padding-bottom: 0;
        white-space: normal;
        flex-direction: column;
        gap: 4px;
        align-items: flex-start;
    }

    /* summary tables: horizontal scroll + comfortable row height */
    .gstr9-shell .tbl-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .gstr9-shell table.calc.sum {
        min-width: 700px;
    }
    .gstr9-shell table.calc td,
    .gstr9-shell table.calc th {
        padding: 6px 8px;
        font-size: 12px;
    }

    /* part jump cards: full-width on mobile, left border accent, touch feedback */
    .gstr9-shell .row.g-2 > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .gstr9-shell .card[role="button"] .card-body {
        padding: 0.65rem 0.75rem !important;
    }
    .gstr9-shell .card[role="button"] .fw-semibold {
        font-size: 0.88rem;
    }

    /* card <header> element compression on mobile */
    .gstr9-shell .card > header {
        padding: 10px 12px;
        gap: 8px;
        flex-wrap: wrap;
    }
    .gstr9-shell .card-no {
        font-size: 11px;
        padding: 4px 6px;
        min-width: 28px;
    }
    .gstr9-shell .card-ttl h3 {
        font-size: 13px;
    }
    .gstr9-shell .card-ttl .sub {
        font-size: 11px;
    }

    /* dataset radio options: ≥44px touch target */
    .gstr9-shell .ds-opt {
        min-height: 44px;
        padding: 4px 11px 4px 8px;
    }

    /* bottombar sticky footer: 44px touch targets */
    .gstr9-shell .gstr9-bottombar .btn {
        min-height: 44px;
        padding: 0.4rem 0.65rem;
    }
    .gstr9-shell .gstr9-bottombar .btn-group {
        margin-left: 0 !important;
    }

    /* position-of-return table (2-col): allow horizontal scroll on narrow viewports */
    .gstr9-shell table.calc:not(.sum) {
        min-width: 300px;
    }

    /* FY-notes help strip: compact on mobile */
    .gstr9-shell .help-panel.fy-note {
        padding: 8px 12px;
        font-size: 12px;
    }
}

/* very narrow phones — tighten one more notch */
@media (max-width: 380px) {
    .gstr9-shell .spq-toolbar .btn-group .btn {
        font-size: 0.68rem;
        padding: 0.3rem 0.4rem;
    }

    .gstr9-shell .gstr9-table-card > .card-header {
        font-size: 0.8rem;
    }
}

/* ============================================================
   Inline prototype host pages (body.g9proto-active) — the
   prototype carries its own rail/header, so the app sidebar
   collapses and the content area goes full width.
   ============================================================ */
body.g9proto-active .appnav { display: none !important; }
body.g9proto-active .page-wrapper .page-body-wrapper,
body.g9proto-active .page-body {
    margin-left: 0 !important;
    padding-left: 0 !important;
}
/* the prototype manages its own scrolling chrome */
.g9proto { min-height: 60vh; }

/* The prototype's own <header class="appbar"> must not compete with the app
   header: no viewport-sticky, and a z-index well below the app chrome. Its
   sidebar then sticks to the viewport top on scroll instead of the appbar. */
body.g9proto-active .g9proto .appbar {
    position: static !important;
    z-index: 10 !important;
}

body.g9proto-active .g9proto .sidebar {
    top: 0 !important;
    height: calc(100vh - 64px) !important;
}

/* bottom action bar stays under the app's floating widgets and dialogs */
body.g9proto-active .g9proto .actionbar {
    z-index: 30 !important;
}

/* app layout offset variable: collapse the reserved sidebar width entirely
   while the prototype page owns the viewport */
body.g9proto-active {
    --appnav-w: -12px !important;
}

/* ---- Table-6 auto-fill buttons: semantic colouring that still tracks light/dark
   theme (no hardcoded !important). Purple = "View", Red = "Last-Year import",
   Blue = "Import from 3B". Card background follows the amber-note colour so
   they read as annotation buttons over any theme. ---- */
.gstr9-shell .g9-autofill-btn {
    font-size: 11px;
    line-height: 1.2;
    background: var(--g9-amber-bg);
    border: 1px solid var(--line);
}
.gstr9-shell .g9-autofill-btn:hover {
    filter: brightness(0.97);
}
.gstr9-shell .g9-autofill-purple .fw-bold { color: #7a1ea1; }
.gstr9-shell .g9-autofill-red    .fw-bold { color: var(--err); }
.gstr9-shell .g9-autofill-red    { border-color: var(--err); }
.gstr9-shell .g9-autofill-blue   .fw-bold { color: var(--brand); }
.gstr9-shell .g9-autofill-blue   { border: 2px solid var(--brand); }
body.dark-only .gstr9-shell .g9-autofill-purple .fw-bold { color: #c789e6; }

/* ---- native GSTR-9 module header/footer (Gstr9TopBar / Gstr9BottomBar) --- */
/* Pin the Gstr9TopBar across every GSTR-9 sub-section (Summary / Parts /
   Validation / Computation / Compare) so filing status, dataset toggle and the
   five prep steps stay reachable while scrolling long statutory tables. Sits
   just below the app's fixed .page-header (~56px tall). z-index below the
   app header (z:8) but above table content and SmartGrid chrome. Mobile has
   its own rule earlier (top:0, z-index:20) — this scope keeps it desktop-only. */
/* #region Himanshu (17-Sep-2026) — the page scrolls INSIDE .root-container, which already
   sits below the fixed app header. The old `top: 56px` offset therefore left a 56px empty band
   above the Status row once stuck, and applied on desktop only. Stick flush at the scroller's
   top on every breakpoint, and drop the card's outer chrome so no band shows above the row. */
.gstr9-shell > .gstr9-topbar-card {
    position: sticky;
    top: 0;
    z-index: 20;
    margin-top: 0 !important;
    margin-bottom: 6px !important;
    border: 0;
    border-radius: 0 0 8px 8px;
    background: var(--surface, #fff);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
}
.gstr9-shell > .gstr9-topbar-card > .card-body {
    padding: 0 !important;
}
/* The portal host's ProviderLoginGate renders ahead of the shell and always emits an empty
   SingleLineButtonScroller (arrow buttons + track); on GSTR-9 screens it had no buttons, so it
   only added a blank band above the Status row. Hidden while empty, GSTR-9 pages only. */
.root-container:has(.gstr9-shell) .spq-provider-login-gate-container .slbs:not(:has(.slbs__track > *)) {
    display: none !important;
}
.gstr9-shell > .gstr9-topbar-card .appbar-row {
    border-radius: 0;
}

@media (max-width: 768px) {
    /* phones: one horizontally scrolling line each for the status/actions row and the step
       strip, so the pinned bar stays two rows tall instead of wrapping over half the screen */
    .gstr9-shell > .gstr9-topbar-card .appbar-row {
        flex-wrap: nowrap;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 6px 10px;
    }
    .gstr9-shell > .gstr9-topbar-card .appbar-row::-webkit-scrollbar { display: none; }
    .gstr9-shell > .gstr9-topbar-card .appbar-row .filing,
    .gstr9-shell > .gstr9-topbar-card .appbar-row .appbar-actions {
        flex-wrap: nowrap;
        width: auto;
        flex: 0 0 auto;
    }
    .gstr9-shell > .gstr9-topbar-card .appbar-row .fl { flex: 0 0 auto; }
    .gstr9-shell > .gstr9-topbar-card .stepstrip { scrollbar-width: none; }
    .gstr9-shell > .gstr9-topbar-card .stepstrip::-webkit-scrollbar { display: none; }

    /* top bar dropdowns open as a bottom sheet — they would be clipped by the scrolling row,
       and a thumb-reachable sheet is the native pattern anyway */
    .gstr9-shell > .gstr9-topbar-card .menu-list,
    .gstr9-shell > .gstr9-topbar-card .step-menu .menu-list {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        bottom: 0 !important;
        min-width: 0 !important;
        max-height: 70vh;
        overflow-y: auto;
        border-radius: 16px 16px 0 0;
        padding: 10px 12px calc(12px + env(safe-area-inset-bottom));
        z-index: 1060 !important;
        animation: g9-sheet-up .2s cubic-bezier(.22, .61, .36, 1);
    }
    .gstr9-shell > .gstr9-topbar-card .menu-list button { min-height: 48px; font-size: 15px; }
    .gstr9-shell > .gstr9-topbar-card .menu-backdrop {
        background: rgba(0, 0, 0, .35) !important;
        z-index: 1055 !important;
    }
}
@keyframes g9-sheet-up {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}
/* #endregion */

.gstr9-topbar .gstr9-step {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.15;
    padding: 4px 10px;
    min-width: 108px;
}

.gstr9-topbar .gstr9-step-em {
    font-size: 10px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--g9-amber, #b45309);
    font-weight: 700;
}

.gstr9-bottombar {
    position: sticky;
    bottom: 0;
    z-index: 20;
}

/* the app header already names the screen — drop the prototype's own brand */
body.g9proto-active .g9proto .appbar .brand {
    display: none !important;
}

/* ============================================================
   #region Himanshu (17-Sep-2026) — GSTR-9 desktop-parity UI pieces
   Theme tokens only (no hard-coded palette), mobile rules behind
   media queries, desktop layout unchanged.
   ============================================================ */

/* AATO slab on the filing strip */
.gstr9-shell .appbar-row .fl-aato select { width: 118px; }
.gstr9-shell .appbar-row .fl-aato .fl-value { font: 11.5px var(--sans); color: var(--ink); }
.gstr9-shell .appbar-row .fl-aato.unconfirmed select {
    background: var(--warn-lt); border-color: var(--warn); color: var(--warn); font-weight: 700;
}
.gstr9-shell .appbar-row .g9-aato-check { align-self: flex-end; }

/* bottom sheet: proceed-to-file differences (dialog on desktop, sheet on phones) */
.g9-sheet-backdrop {
    position: fixed; inset: 0; z-index: 1055;
    background: rgba(0, 0, 0, .35);
}
.g9-sheet {
    position: fixed; z-index: 1060;
    left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: min(880px, calc(100vw - 32px)); max-height: 80vh;
    display: flex; flex-direction: column;
    background: var(--bs-body-bg, #fff); color: var(--bs-body-color, #17202e);
    border: 1px solid var(--bs-border-color, #d3dbe7);
    border-radius: 12px; box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
}
.g9-sheet-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    padding: 12px 16px; border-bottom: 1px solid var(--bs-border-color, #d3dbe7);
}
.g9-sheet-title { font-weight: 700; font-size: 15px; }
.g9-sheet-sub { font-size: 12px; color: var(--bs-secondary-color, #6c757d); margin-top: 2px; }
.g9-sheet-body { overflow: auto; padding: 8px 16px 16px; -webkit-overflow-scrolling: touch; }
.g9-diff-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.g9-diff-table th, .g9-diff-table td { padding: 6px 8px; border-bottom: 1px solid var(--bs-border-color, #e3e9f3); }
.g9-diff-table th { position: sticky; top: 0; background: var(--bs-tertiary-bg, #f4f6fa); text-align: left; }
.g9-diff-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.g9-diff-table .diff { color: var(--bs-danger, #b3261e); font-weight: 700; }

/* HSN tools under Tables 17 / 18 */
.gstr9-shell .g9-hsn-tools {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    margin: 6px 0 12px; padding: 8px 10px;
    background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px;
}
.gstr9-shell .g9-hsn-tools .g9-file-btn { cursor: pointer; }
.gstr9-shell .g9-hsn-adjust { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); }
.gstr9-shell .g9-hsn-adjust input { width: 72px; }

/* Quick Review gate + dialog width */
.gstr9-quickreview-backdrop .g9-review-dialog { max-width: 95vw; }
.gstr9-quickreview-backdrop .g9-review-gate ul { font-size: 12.5px; }

/* observation report */
.gstr9-shell .g9-obs-note { padding: 10px 14px; font-size: 12.5px; color: var(--ink-2); }
.gstr9-shell .g9-obs-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.gstr9-shell .g9-obs-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.gstr9-shell .g9-obs-table th, .gstr9-shell .g9-obs-table td { padding: 5px 8px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.gstr9-shell .g9-obs-table th { background: var(--surface-3); color: var(--ink); text-align: left; white-space: nowrap; }
.gstr9-shell .g9-obs-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gstr9-shell .g9-obs-section td { background: var(--brand-lt); color: var(--brand); font-weight: 700; }
.gstr9-shell .g9-obs-diff td { font-weight: 700; }
.gstr9-shell .g9-obs-diff.has-diff td.num { color: var(--err); }
.gstr9-shell .g9-obs-main.has-diff td:first-child { box-shadow: inset 3px 0 0 var(--err); }
.gstr9-shell .g9-obs-foot { padding: 8px 14px 12px; font-size: 11.5px; color: var(--ink-3); }

@media (max-width: 767.98px) {
    /* differences: a real bottom sheet */
    .g9-sheet {
        left: 0; right: 0; top: auto; bottom: 0; transform: none;
        width: 100%; max-height: 85vh;
        border-radius: 16px 16px 0 0;
        padding-bottom: env(safe-area-inset-bottom);
        animation: g9-sheet-up .2s cubic-bezier(.22, .61, .36, 1);
    }
    .g9-sheet-head .btn-close { min-width: 44px; min-height: 44px; }
    /* table rows become stacked cards */
    .g9-diff-table thead { display: none; }
    .g9-diff-table tr { display: block; padding: 8px 0; border-bottom: 1px solid var(--bs-border-color, #e3e9f3); }
    .g9-diff-table td { display: flex; justify-content: space-between; gap: 12px; border: 0; padding: 3px 0; }
    .g9-diff-table td::before { content: attr(data-label); color: var(--bs-secondary-color, #6c757d); font-weight: 600; }

    .gstr9-shell .g9-hsn-tools { flex-direction: column; align-items: stretch; }
    .gstr9-shell .g9-hsn-tools .btn { min-height: 44px; }
    .gstr9-shell .g9-hsn-adjust input { flex: 1 1 auto; min-height: 44px; font-size: 16px; }
    .gstr9-shell .g9-hsn-tools .ms-auto { margin-left: 0 !important; }

    .gstr9-shell .g9-obs-fetch { min-height: 44px; }
    .gstr9-shell .g9-obs-table thead { display: none; }
    .gstr9-shell .g9-obs-table tr { display: block; }
    .gstr9-shell .g9-obs-table td { display: flex; justify-content: space-between; gap: 12px; border: 0; padding: 2px 12px; }
    .gstr9-shell .g9-obs-table td[rowspan] { display: flex; }
    .gstr9-shell .g9-obs-table td::before { content: attr(data-label); color: var(--ink-3); font-weight: 600; }
    .gstr9-shell .g9-obs-section td { display: block; padding: 8px 12px; }
    .gstr9-shell .g9-obs-section td::before { content: none; }
    .gstr9-shell .g9-obs-main { padding-top: 8px; }
    .gstr9-shell .g9-obs-diff { padding-bottom: 8px; border-bottom: 1px solid var(--line); }
    .gstr9-shell .g9-obs-main.has-diff td:first-child { box-shadow: none; }
}
/* #endregion */