/* ═══════════════════════════════════════════
   gst.css — GST Calculator · FY 2026-27
   Requires: calc-global.css
   NOTE: Colors, card, hero, result-grid,
   insight-card, advanced-section, donut,
   bar-item, seg-tabs, disclaimer, responsive
   base are all defined in calc-global.css.
   Only GST-specific overrides live here.
═══════════════════════════════════════════ */

/* ── GST-specific colour tokens ── */
:root {
    --gst-blue:        #1D4ED8;
    --gst-blue-soft:   #DBEAFE;
    --gst-orange:      #EA580C;
    --gst-orange-soft: #FFEDD5;
    --gst-teal:        #0D9488;
    --gst-teal-soft:   #CCFBF1;
    --gst-purple:      #7C3AED;
    --gst-purple-soft: #EDE9FE;
    --gst-green:       #16A34A;
    --gst-green-soft:  #DCFCE7;
    /* alias used in global colour helpers */
    --font: var(--font-body);
}

/* ── Colour utility aliases (GST palette) ── */
.c-gst-blue   { color: var(--gst-blue); }
.c-gst-orange { color: var(--gst-orange); }
.c-gst-teal   { color: var(--gst-teal); }
.c-gst-purple { color: var(--gst-purple); }

/* ════════════════════════════════════════════
   UPDATE BANNER
════════════════════════════════════════════ */
.gst-update-banner {
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    border: 1.5px solid #86efac;
    border-radius: 10px;
    padding: .55rem .85rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: .71rem;
    color: #14532d;
    line-height: 1.5;
}
.gst-update-banner i      { color: var(--gst-green); flex-shrink: 0; margin-top: 2px; }
.gst-update-banner strong { color: #065f46; }

/* ════════════════════════════════════════════
   MODE TABS  (Add GST / Remove GST)
════════════════════════════════════════════ */
.gst-mode-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: .6rem;
}
.gst-mode-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: .65rem .5rem;
    border-radius: var(--r-md);
    border: 1.5px solid var(--slate-line);
    background: var(--white);
    cursor: pointer;
    transition: border-color .15s, background .15s, box-shadow .15s;
    font-family: var(--font-body);
    color: var(--slate);
    user-select: none;
    text-align: center;
}
.gst-mode-tab i           { font-size: 1.05rem; transition: color .15s; }
.gst-mode-tab .mode-label { font-size: .78rem; font-weight: 700; color: var(--navy); }
.gst-mode-tab .mode-sub   { font-size: .64rem; color: var(--slate); line-height: 1.3; }
.gst-mode-tab:hover,
.gst-mode-tab.active      { border-color: var(--gst-teal); background: var(--gst-teal-soft); }
.gst-mode-tab.active      { box-shadow: 0 0 0 3px rgba(13,148,136,.12); }
.gst-mode-tab.active i,
.gst-mode-tab.active .mode-label { color: var(--gst-teal); }
.gst-mode-tab:first-child i { color: var(--gst-green); }
.gst-mode-tab:last-child  i { color: var(--gst-orange); }
.gst-mode-tab.active      i { color: var(--gst-teal); }

.mode-hint {
    background: var(--slate-light);
    border-radius: 8px;
    padding: .38rem .65rem;
    font-size: .69rem;
    color: var(--slate);
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    line-height: 1.5;
}
.mode-hint i { color: var(--gst-blue); flex-shrink: 0; margin-top: 1px; }

/* ════════════════════════════════════════════
   GST SLAB CHIPS
════════════════════════════════════════════ */
.slab-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: .45rem;
}
.slab-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: .38rem .6rem;
    border-radius: 10px;
    border: 1.5px solid var(--slate-line);
    background: var(--white);
    cursor: pointer;
    transition: border-color .15s, background .15s, box-shadow .15s;
    user-select: none;
    min-width: 64px;
    text-align: center;
}
.slab-chip:hover,
.slab-chip.active            { border-color: var(--gst-teal); background: var(--gst-teal-soft); }
.slab-chip.active            { box-shadow: 0 0 0 3px rgba(13,148,136,.12); }
.slab-chip .slab-rate        { font-size: .82rem; font-weight: 800; color: var(--navy); }
.slab-chip .slab-name        { font-size: .59rem; color: var(--slate); font-weight: 500; }
.slab-chip.active .slab-rate { color: var(--gst-teal); }
.slab-chip.custom-slab .slab-rate        { color: var(--gst-purple); }
.slab-chip.custom-slab.active .slab-rate { color: var(--gst-teal); }

.slab-legend {
    font-size: .65rem;
    color: var(--slate);
    margin-top: 3px;
    line-height: 1.5;
}

/* ════════════════════════════════════════════
   TRANSACTION TYPE HINT
════════════════════════════════════════════ */
.txn-hint {
    background: var(--slate-light);
    border-radius: 8px;
    padding: .38rem .65rem;
    font-size: .69rem;
    color: var(--slate);
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    line-height: 1.5;
    margin-top: 6px;
}
.txn-hint i { color: var(--gst-orange); flex-shrink: 0; margin-top: 1px; }

/* ════════════════════════════════════════════
   TOOLTIP
════════════════════════════════════════════ */
.tooltip-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 5px;
    cursor: help;
}
.tooltip-wrap i { color: var(--slate); font-size: .75rem; }
.tooltip-box {
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--navy);
    color: #fff;
    font-size: .66rem;
    font-weight: 500;
    padding: .4rem .6rem;
    border-radius: 8px;
    white-space: normal;
    min-width: 190px;
    max-width: 250px;
    line-height: 1.5;
    z-index: 99;
    box-shadow: 0 4px 16px rgba(13,37,69,.25);
    pointer-events: none;
}
.tooltip-box::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--navy);
}
.tooltip-wrap:hover .tooltip-box,
.tooltip-wrap:focus-within .tooltip-box { display: block; }

/* ════════════════════════════════════════════
   FIELD EMPTY PROMPT
════════════════════════════════════════════ */
.field-empty-prompt {
    font-size: .69rem;
    color: var(--danger);
    margin-top: 4px;
    display: none;
    align-items: center;
    gap: 4px;
    background: var(--danger-soft);
    border: 1px solid #FECACA;
    border-radius: 8px;
    padding: .28rem .55rem;
}
.field-empty-prompt.show { display: flex; }

/* ════════════════════════════════════════════
   HERO GST SPLIT BANNER
   Fix: equal-width boxes, proper alignment,
   no overflow, readable on all screen sizes
════════════════════════════════════════════ */
.gst-split-banner {
    margin-top: 14px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 12px;
    padding: .8rem 1rem;
    display: flex;
    align-items: stretch;        /* equal height */
    justify-content: center;
    gap: 8px;
    flex-wrap: nowrap;           /* keep on one row */
}
.split-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: .5rem .65rem;
    background: rgba(255,255,255,.1);
    border-radius: 10px;
    flex: 1 1 0;                 /* equal flex widths */
    min-width: 0;                /* allow shrinking */
    text-align: center;
}
.split-item.total-split {
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.25);
}
.split-item.igst-item { display: none; }

.split-label {
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .75;
    white-space: nowrap;
}
.split-val {
    font-size: .88rem;
    font-weight: 800;
    font-family: var(--font-mono);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.split-pct {
    font-size: .6rem;
    opacity: .65;
    font-weight: 600;
}
.split-divider {
    font-size: 1rem;
    font-weight: 800;
    opacity: .45;
    flex-shrink: 0;
    align-self: center;         /* vertically centre the + = */
    padding: 0 2px;
}
.hs-value.amber { color: #FDE68A; }

/* ════════════════════════════════════════════
   ZERO GST BOX
════════════════════════════════════════════ */
.gst-zero-box {
    background: var(--gst-green-soft);
    border: 1.5px solid #86EFAC;
    border-radius: var(--r-md);
    padding: .7rem .95rem;
    margin-bottom: 1.1rem;
    font-size: .76rem;
    color: #14532D;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.gst-zero-box i { color: var(--gst-green); font-size: .88rem; flex-shrink: 0; }

/* ════════════════════════════════════════════
   INSIGHT CARD — GST VARIANTS
   (base .insight-card is in calc-global.css)
════════════════════════════════════════════ */
.insight-card.orange {
    border-left-color: var(--gst-orange);
    background: var(--gst-orange-soft);
}
.insight-card.orange .insight-icon { background: #FED7AA; }
.insight-card.teal   { border-left-color: var(--gst-teal); }

/* ════════════════════════════════════════════
   SINGLE-ITEM INVOICE PREVIEW
════════════════════════════════════════════ */
.invoice-preview {
    background: var(--white);
    border: 1.5px solid var(--slate-line);
    border-radius: var(--r-md);
    overflow: hidden;
    font-size: .78rem;
}
.inv-header {
    background: var(--navy);
    color: #fff;
    padding: .7rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.inv-title { font-size: .78rem; font-weight: 800; letter-spacing: .1em; }
.inv-fy    { font-size: .65rem; opacity: .7; font-weight: 500; }
.inv-table { padding: .45rem 0; }
.inv-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .48rem 1rem;
    border-bottom: 1px solid var(--slate-line);
    font-size: .76rem;
    color: var(--navy);
    transition: background .12s;
}
.inv-row:last-child  { border-bottom: none; }
.inv-row:hover       { background: var(--slate-light); }
.inv-row.inv-head    {
    background: var(--slate-light);
    font-size: .63rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--slate);
}
.inv-row.inv-tax     { color: var(--gst-orange); font-weight: 600; }
.inv-row.inv-total   {
    background: var(--navy-light);
    font-weight: 800;
    font-size: .85rem;
    color: var(--navy);
    border-top: 2px solid var(--navy);
}
.inv-footer {
    background: var(--slate-light);
    padding: .55rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    flex-wrap: wrap;
}
.inv-copy-btn {
    background: var(--gst-teal);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: .33rem .7rem;
    font-size: .71rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-body);
    transition: background .15s;
}
.inv-copy-btn:hover { background: #0f766e; }
.inv-note { font-size: .63rem; color: var(--slate); font-weight: 500; }

/* ════════════════════════════════════════════
   MULTI-ITEM INVOICE BUILDER
   Fix: balanced column widths, aligned header
════════════════════════════════════════════ */
.multi-inv-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: .9rem;
    flex-wrap: wrap;
}
.inv-clear-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: .33rem .8rem;
    border-radius: 8px;
    border: 1.5px solid #FECACA;
    background: var(--white);
    color: var(--danger);
    font-size: .73rem;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font-body);
    transition: background .15s;
}
.inv-clear-btn:hover { background: #FEF2F2; }

/* Column layout: description gets most space, others fixed */
.inv-col-heads,
.inv-item-row {
    display: grid;
    grid-template-columns: minmax(0,2fr) minmax(90px,1fr) 90px 90px 34px;
    gap: 8px;
    align-items: center;
}
.inv-col-heads {
    padding: .22rem .8rem;
    margin-bottom: 4px;
    font-size: .64rem;
    font-weight: 700;
    color: var(--slate);
    text-transform: uppercase;
    letter-spacing: .05em;
}
.inv-item-row {
    background: var(--slate-light);
    border-radius: 10px;
    padding: .5rem .8rem;
    border: 1.5px solid var(--slate-line);
    transition: border-color .15s;
}
.inv-item-row:hover { border-color: var(--gst-teal); }
.inv-items {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: .9rem;
}

.inv-inp {
    padding: .42rem .55rem;
    background: var(--white);
    border: 1.5px solid var(--slate-line);
    border-radius: 7px;
    font-family: var(--font-body);
    font-size: .79rem;
    font-weight: 600;
    color: var(--navy);
    outline: none;
    width: 100%;
    transition: border-color .15s, box-shadow .15s;
}
.inv-inp:focus {
    border-color: var(--gst-teal);
    box-shadow: 0 0 0 3px rgba(13,148,136,.08);
}
.inv-inp::-webkit-inner-spin-button { display: none; }
.inv-inp.rate-sel {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23A0AEC0'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
    padding-right: 20px;
}
.inv-gst-cell {
    font-size: .79rem;
    font-weight: 700;
    color: var(--gst-teal);
    text-align: right;
    white-space: nowrap;
    font-family: var(--font-mono);
}
.del-btn {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    border: none;
    background: #fee2e2;
    color: var(--danger);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .73rem;
    transition: background .15s;
    flex-shrink: 0;
    justify-self: center;
}
.del-btn:hover { background: #fecaca; }

.add-row-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: .55rem 1rem;
    border-radius: 10px;
    border: 1.5px dashed var(--slate-line);
    background: var(--white);
    font-size: .79rem;
    font-weight: 600;
    color: var(--slate);
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
    font-family: var(--font-body);
    width: 100%;
    justify-content: center;
    margin-bottom: .9rem;
}
.add-row-btn:hover {
    border-color: var(--gst-teal);
    color: var(--gst-teal);
    background: var(--gst-teal-soft);
}

/* Invoice totals panel */
.inv-totals {
    background: linear-gradient(135deg, var(--gst-teal-soft), #ecfdf5);
    border: 1.5px solid #6EE7B7;
    border-radius: var(--r-md);
    padding: .95rem 1.05rem;
}
.inv-tot-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: .8rem;
}
.inv-tot-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .52rem .75rem;
    background: var(--white);
    border-radius: 9px;
    border: 1px solid #A7F3D0;
    min-height: 46px;
}
/* IGST row spans full width */
.inv-tot-item.full-span {
    grid-column: span 2;
}
.itl { font-size: .72rem; color: #065f46; font-weight: 500; }
.itv {
    font-size: .84rem;
    font-weight: 800;
    color: var(--gst-teal);
    font-family: var(--font-mono);
}
.inv-grand {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .65rem .95rem;
    background: var(--navy);
    border-radius: 10px;
    color: white;
}
.igt-lbl { font-size: .79rem; font-weight: 700; opacity: .85; }
.igt-val {
    font-size: 1.18rem;
    font-weight: 800;
    font-family: var(--font-mono);
}

/* ════════════════════════════════════════════
   HSN CODE LOOKUP
   Fix: better card sizing, no overflow
════════════════════════════════════════════ */
.hsn-search-wrap { position: relative; margin-bottom: .9rem; }
.hsn-search {
    width: 100%;
    padding: .62rem 1rem .62rem 2.3rem;
    border: 1.5px solid var(--slate-line);
    border-radius: 10px;
    font-family: var(--font-body);
    font-size: .84rem;
    color: var(--navy);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    background: var(--slate-light);
}
.hsn-search:focus {
    border-color: var(--gst-teal);
    background: var(--white);
    box-shadow: 0 0 0 3px rgba(13,148,136,.08);
}
.hsn-search-icon {
    position: absolute;
    left: .72rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--slate);
    font-size: .84rem;
    pointer-events: none;
}

.hsn-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(195px, 1fr));
    gap: 10px;
}
.hsn-item {
    background: var(--slate-light);
    border-radius: 10px;
    padding: .75rem .95rem;
    border: 1.5px solid var(--slate-line);
    transition: border-color .15s, background .15s;
    cursor: pointer;
    position: relative;
}
.hsn-item:hover { border-color: var(--gst-teal); background: var(--gst-teal-soft); }
.hsn-code {
    font-size: .67rem;
    font-weight: 700;
    color: var(--gst-teal);
    margin-bottom: 3px;
    font-family: var(--font-mono);
}
.hsn-desc {
    font-size: .77rem;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 7px;
    line-height: 1.4;
}
.hsn-rate-badge {
    display: inline-block;
    background: var(--gst-teal);
    color: white;
    font-size: .63rem;
    font-weight: 700;
    border-radius: 20px;
    padding: .1rem .55rem;
}
.hsn-rate-badge.rate-0  { background: var(--slate); }
.hsn-rate-badge.rate-5  { background: var(--gst-green); }
.hsn-rate-badge.rate-12 { background: var(--gst-blue); }
.hsn-rate-badge.rate-40 { background: var(--danger); }
.hsn-changed {
    position: absolute;
    top: 7px;
    right: 8px;
    font-size: .57rem;
    font-weight: 700;
    background: var(--amber-soft);
    color: #92400E;
    border-radius: 5px;
    padding: .05rem .35rem;
    border: 1px solid #FDE68A;
}
.hsn-empty {
    text-align: center;
    padding: 2rem;
    color: var(--slate);
    font-size: .84rem;
    grid-column: 1 / -1;
}

/* ════════════════════════════════════════════
   COMMON GST CATEGORIES
   Fix: each group in its own card, chips
   have proper spacing, badges don't overflow
════════════════════════════════════════════ */
.category-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: .8rem;
}
/* Each rate group is a self-contained card */
.cat-group {
    background: var(--white);
    border: 1.5px solid var(--slate-line);
    border-radius: 12px;
    padding: .8rem .9rem .55rem;
}
.cat-group-label {
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: .24rem .6rem;
    border-radius: 6px;
    margin-bottom: .65rem;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.cat-group-label.gst-0  { background: var(--slate-light);    color: var(--slate); }
.cat-group-label.gst-3  { background: var(--amber-soft);     color: #92400E; }
.cat-group-label.gst-5  { background: var(--gst-green-soft); color: #14532D; }
.cat-group-label.gst-12 { background: var(--gst-blue-soft);  color: #1E3A8A; }
.cat-group-label.gst-18 { background: var(--navy-light);     color: var(--navy); }
.cat-group-label.gst-40 { background: var(--danger-soft);    color: #991B1B; }

/* Chip container */
.cat-chips-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}
.cat-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: .28rem .65rem;
    border-radius: 20px;
    border: 1.5px solid var(--slate-line);
    background: var(--slate-light);
    font-size: .71rem;
    font-weight: 500;
    color: var(--navy);
    cursor: pointer;
    transition: border-color .13s, background .13s, color .13s;
    margin: 0 5px 7px 0;
    user-select: none;
    line-height: 1.4;
}
.cat-chip:hover {
    border-color: var(--gst-teal);
    background: var(--gst-teal-soft);
    color: var(--gst-teal);
}
.cat-new {
    font-size: .54rem;
    font-weight: 700;
    background: var(--gst-green);
    color: #fff;
    border-radius: 4px;
    padding: .05rem .3rem;
    flex-shrink: 0;
    white-space: nowrap;
}
.cat-changed {
    font-size: .54rem;
    font-weight: 700;
    background: var(--amber-soft);
    color: #92400E;
    border-radius: 4px;
    padding: .05rem .3rem;
    border: 1px solid #FDE68A;
    flex-shrink: 0;
    white-space: nowrap;
}
.cat-disclaimer {
    background: var(--amber-soft);
    border: 1px solid #FDE68A;
    border-radius: 8px;
    padding: .45rem .7rem;
    font-size: .67rem;
    color: #92400E;
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    line-height: 1.5;
    margin-top: 4px;
}
.cat-disclaimer i { flex-shrink: 0; margin-top: 1px; }

/* ════════════════════════════════════════════
   GST COMPLIANCE CARDS
   Fix: 2-col on tablet, 1-col on mobile
════════════════════════════════════════════ */
.compliance-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: .5rem;
}
.compliance-card {
    background: var(--white);
    border: 1.5px solid var(--slate-line);
    border-radius: var(--r-md);
    padding: .8rem .9rem;
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    transition: box-shadow .15s, border-color .15s;
}
.compliance-card:hover {
    box-shadow: 0 2px 12px rgba(13,37,69,.08);
    border-color: var(--gst-teal);
}
.compliance-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--gst-teal-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.compliance-icon i  { color: var(--gst-teal); font-size: .84rem; }
.compliance-title   { font-size: .73rem; font-weight: 700; color: var(--navy); margin-bottom: 3px; }
.compliance-desc    { font-size: .65rem; color: var(--slate); line-height: 1.55; }

/* ════════════════════════════════════════════
   TOAST NOTIFICATION
════════════════════════════════════════════ */
.gst-toast {
    position: fixed;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%) translateY(16px);
    background: var(--navy);
    color: #fff;
    padding: .5rem 1.1rem;
    border-radius: 30px;
    font-size: .77rem;
    font-weight: 600;
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s, transform .22s;
    z-index: 9999;
    white-space: nowrap;
    box-shadow: 0 4px 20px rgba(13,37,69,.25);
}
.gst-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ════════════════════════════════════════════
   ADV-BODY PADDING  (open state inner padding)
════════════════════════════════════════════ */
.adv-body.open {
    display: block;
    padding: 1.2rem 1.5rem 1.4rem;
}

/* ════════════════════════════════════════════
   RESPONSIVE OVERRIDES
════════════════════════════════════════════ */

/* Tablet: compliance stays 2-col until 640px */
@media (max-width: 860px) {
    .compliance-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 700px) {
    /* Split banner: allow slight shrink but stay one row */
    .gst-split-banner {
        padding: .65rem .75rem;
        gap: 6px;
    }
    .split-item { padding: .4rem .45rem; }
    .split-val  { font-size: .82rem; }

    /* Slab chips */
    .slab-chip { min-width: 58px; padding: .33rem .48rem; }

    /* Invoice builder columns */
    .inv-col-heads { display: none; }
    .inv-item-row  {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }
    .inv-gst-cell  { grid-column: span 2; text-align: left; }

    /* Invoice totals */
    .inv-tot-grid  { grid-template-columns: 1fr; }
    .inv-tot-item.full-span { grid-column: span 1; }

    /* HSN grid */
    .hsn-grid { grid-template-columns: 1fr 1fr; }

    /* Compliance */
    .compliance-grid { grid-template-columns: 1fr; }

    /* Category groups */
    .cat-group { padding: .7rem .75rem .45rem; }

    /* adv-body less padding on mobile */
    .adv-body.open { padding: .9rem 1rem 1.1rem; }
}

@media (max-width: 480px) {
    /* Split banner: wrap if truly too narrow */
    .gst-split-banner {
        flex-wrap: wrap;
        padding: .6rem .65rem;
        gap: 6px;
    }
    .split-item {
        flex: 1 1 60px;
        min-width: 60px;
        padding: .38rem .4rem;
    }
    .split-val   { font-size: .78rem; }
    .split-label { font-size: .56rem; }

    /* Mode tabs */
    .gst-mode-tabs { gap: 6px; }
    .gst-mode-tab  { padding: .5rem .38rem; }

    /* Slab grid */
    .slab-grid { gap: 5px; }

    /* Invoice builder: single column */
    .inv-item-row { grid-template-columns: 1fr; }
    .del-btn      { justify-self: flex-end; }

    /* HSN grid: single column */
    .hsn-grid { grid-template-columns: 1fr; }

    /* Chips smaller */
    .cat-chip { font-size: .68rem; padding: .24rem .52rem; }
}