/*
 * Premium presentation layer
 * --------------------------
 * This file owns the final visual contract while legacy page markup is migrated.
 * It intentionally changes presentation only: routes, form names, handlers,
 * values, permissions, and business calculations remain untouched.
 */

html {
    font-size: 14px;
    color-scheme: light;
}

.visually-hidden,
.ui-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.ui-proxy-submitter {
    display: none !important;
}

body {
    min-width: 0;
    color: var(--ui-text);
    background: var(--ui-canvas);
    font-family: var(--ui-font-sans);
    font-size: var(--ui-font-size-base);
    font-weight: var(--ui-font-weight-regular);
    line-height: var(--ui-line-height-base);
    letter-spacing: 0;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

button,
input,
select,
textarea {
    font: inherit;
    letter-spacing: 0;
}

:where(input, select, textarea, button, a, summary):focus-visible {
    outline: 3px solid var(--ui-focus-ring);
    outline-offset: 2px;
}

.shell-nav-filter-body :is(input, select, button),
.shell-nav-filter-summary,
#ImportFile,
#purchaseImportButton,
.data-grid-wrap[tabindex],
.table-wrap[tabindex],
.responsive-table-wrap[tabindex],
button[aria-label*="workspace status"],
details:has(button[data-column-reset]) > summary,
button[data-column-reset] {
    min-height: var(--ui-control-height);
}

::selection {
    color: var(--ui-text-strong);
    background: var(--ui-selection);
}

.num,
.metric-card strong,
.table-wrap :is(td, th),
.report-table :is(td, th),
.statement-table :is(td, th),
input[type="number"] {
    font-variant-numeric: tabular-nums lining-nums;
}

/* Authentication */

.login-body {
    min-height: 100dvh;
    overflow: auto;
    background: #edf1ef;
}

.login-shell {
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: clamp(16px, 4vw, 56px);
}

.login-surface {
    width: min(100%, 1040px);
}

.login-workspace {
    min-height: min(720px, calc(100dvh - clamp(32px, 8vw, 112px)));
    display: grid;
    grid-template-columns: minmax(300px, .92fr) minmax(420px, 1.08fr);
    overflow: hidden;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface);
    box-shadow: 0 30px 80px rgb(18 33 28 / 14%);
}

.login-brand-panel {
    position: relative;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: var(--ui-text-inverse);
    background: var(--ui-shell);
    padding: clamp(32px, 5vw, 64px);
}

.login-brand-panel::after {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 42%;
    height: 6px;
    background: var(--ui-shell-accent);
    content: "";
}

.login-brand-lockup {
    display: flex;
    align-items: center;
    gap: 12px;
}

.login-brand-mark {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid rgb(255 255 255 / 22%);
    border-radius: var(--ui-radius-md);
    color: var(--ui-text-inverse);
    background: var(--ui-brand);
    font-size: 19px;
    font-weight: var(--ui-font-weight-bold);
}

.login-brand-copy {
    min-width: 0;
    display: grid;
    gap: 1px;
}

.login-brand-copy strong {
    font-size: var(--ui-font-size-lg);
    font-weight: var(--ui-font-weight-bold);
}

.login-brand-copy span {
    color: var(--ui-text-inverse-muted);
    font-size: var(--ui-font-size-sm);
}

.login-brand-message {
    max-width: 390px;
    margin: auto 0;
    padding: 56px 0;
}

.login-brand-message p {
    margin: 0 0 12px;
    color: var(--ui-shell-accent);
    font-size: var(--ui-font-size-sm);
    font-weight: var(--ui-font-weight-bold);
    text-transform: uppercase;
}

.login-brand-message h2 {
    margin: 0;
    color: var(--ui-text-inverse);
    font-size: clamp(30px, 3.2vw, 44px);
    font-weight: var(--ui-font-weight-semibold);
    line-height: 1.14;
    letter-spacing: 0;
}

.login-brand-context {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--ui-text-inverse-muted);
    font-size: var(--ui-font-size-sm);
}

.login-brand-context svg {
    width: 16px;
    height: 16px;
    color: var(--ui-shell-accent);
}

.login-panel {
    position: relative;
    overflow: visible;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 0;
    border-radius: 0;
    background: var(--ui-surface);
    padding: clamp(36px, 6vw, 64px);
    box-shadow: none;
}

.login-panel::before {
    display: none;
}

.login-panel-header {
    max-width: 440px;
}

.login-panel h1 {
    margin: 0;
    color: var(--ui-text-strong);
    font-size: 30px;
    font-weight: var(--ui-font-weight-bold);
    line-height: 1.25;
}

.login-panel .muted {
    max-width: 42ch;
    margin: 8px 0 0;
    color: var(--ui-text-muted);
    font-size: var(--ui-font-size-base);
}

.login-form {
    max-width: 440px;
    display: grid;
    gap: 16px;
    margin-top: 30px;
}

.login-fieldset {
    display: grid;
    gap: 16px;
    margin: 0;
    border: 0;
    padding: 0;
}

.login-fieldset + .login-fieldset {
    padding-top: 20px;
    border-top: 1px solid var(--ui-divider);
}

.login-fieldset legend {
    float: none;
    width: auto;
    margin: 0 0 2px;
    color: var(--ui-text-muted);
    font-size: var(--ui-font-size-xs);
    font-weight: var(--ui-font-weight-bold);
    text-transform: uppercase;
}

.login-field {
    min-width: 0;
    display: grid;
    gap: 7px;
}

.login-form .login-field label {
    margin: 0;
    color: var(--ui-text);
    font-size: var(--ui-font-size-sm);
    font-weight: var(--ui-font-weight-semibold);
}

.login-form .login-field :is(input, select) {
    width: 100%;
    min-height: 46px;
    margin: 0;
    border: 1px solid var(--ui-border-control);
    border-radius: var(--ui-radius-md);
    color: var(--ui-text-strong);
    background: var(--ui-surface);
    padding: 10px 12px;
    box-shadow: 0 1px 0 rgb(12 26 22 / 3%);
    transition: border-color var(--ui-duration-fast) var(--ui-ease),
        box-shadow var(--ui-duration-fast) var(--ui-ease),
        background var(--ui-duration-fast) var(--ui-ease);
}

.login-form .login-field :is(input, select):hover {
    border-color: var(--ui-text-soft);
}

.login-form .login-field :is(input, select):focus {
    border-color: var(--ui-focus);
    outline: 0;
    box-shadow: 0 0 0 3px var(--ui-focus-ring);
}

.login-password-control {
    position: relative;
}

.login-password-control input {
    padding-right: 48px;
}

.login-form .login-password-toggle {
    position: absolute;
    inset: 1px 1px 1px auto;
    width: 44px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 0 var(--ui-radius-md) var(--ui-radius-md) 0;
    color: var(--ui-text-muted);
    background: transparent;
}

.login-form .login-password-toggle:hover {
    color: var(--ui-text-strong);
    background: var(--ui-surface-muted);
}

.login-password-toggle svg {
    width: 18px;
    height: 18px;
}

.login-form .field-validation-error {
    margin: 0;
    color: var(--ui-danger);
    font-size: var(--ui-font-size-xs);
    line-height: 1.35;
}

.login-form .validation-summary:not(:empty) {
    margin: 0;
    border: 1px solid var(--ui-danger-border);
    border-radius: var(--ui-radius-md);
    color: var(--ui-danger);
    background: var(--ui-danger-bg);
    padding: 12px 14px;
    font-size: var(--ui-font-size-sm);
}

.login-form button[type="submit"] {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin: 4px 0 0;
    border: 1px solid var(--ui-brand);
    border-radius: var(--ui-radius-md);
    color: var(--ui-text-inverse);
    background: var(--ui-brand);
    padding: 10px 18px;
    font-size: var(--ui-font-size-base);
    font-weight: var(--ui-font-weight-bold);
}

.login-form button[type="submit"]:hover {
    border-color: var(--ui-brand-hover);
    background: var(--ui-brand-hover);
}

.login-form button[type="submit"][aria-busy="true"] {
    cursor: wait;
    opacity: .78;
}

.login-submit-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgb(255 255 255 / 42%);
    border-top-color: #fff;
    border-radius: 50%;
    animation: login-spin .75s linear infinite;
}

@keyframes login-spin {
    to { transform: rotate(360deg); }
}

/* Shell */

.desktop-frame {
    min-height: 100dvh;
    grid-template-columns: var(--ui-nav-width) minmax(0, 1fr);
}

.desktop-main {
    min-width: 0;
    grid-template-rows: var(--ui-topbar-height) minmax(0, 1fr);
}

.side-menu,
.shell-navigation-content {
    background: var(--ui-shell);
}

.side-menu {
    border-right: 1px solid var(--ui-shell-border);
}

.side-logo {
    min-height: var(--ui-topbar-height);
    gap: 12px;
    padding: 0 20px;
}

.side-brand-mark,
.top-company-avatar {
    border-radius: var(--ui-radius-md);
}

.top-bar {
    gap: 18px;
    border-bottom: 1px solid var(--ui-border);
    background: rgb(255 255 255 / 96%);
    padding: 0 var(--ui-page-gutter);
    box-shadow: 0 1px 0 rgb(12 26 22 / 2%);
}

.top-module-label {
    font-size: var(--ui-font-size-sm);
}

.top-title {
    color: var(--ui-text-muted);
    font-size: var(--ui-font-size-sm);
    font-weight: var(--ui-font-weight-medium);
}

.top-company {
    font-size: var(--ui-font-size-sm);
}

.top-context {
    font-size: var(--ui-font-size-xs);
}

.shell-navigation-content {
    padding: 14px 12px 16px;
}

.side-nav-scroll {
    gap: 20px;
}

.side-section-label {
    color: var(--ui-shell-section);
    font-size: var(--ui-font-size-xs);
    letter-spacing: 0;
}

.shell-navigation-content .side-link {
    min-height: 42px;
    border-radius: var(--ui-radius-md);
    color: var(--ui-shell-link);
    font-size: var(--ui-font-size-base);
}

.shell-navigation-content .side-link.active {
    color: var(--ui-shell-active);
    background: var(--ui-shell-selected);
}

.shell-navigation-content .side-link.active::before {
    inset: 10px auto 10px -12px;
    background: var(--ui-shell-accent);
}

.shell-nav-filter {
    border-color: rgb(255 255 255 / 14%);
    background: var(--ui-shell-control);
}

.shell-nav-filter-summary {
    min-height: 42px;
    font-size: var(--ui-font-size-sm);
}

.work-area {
    padding: 26px var(--ui-page-gutter) 56px;
    background: var(--ui-canvas);
}

.master-split,
.sales-entry-split {
    height: auto;
    min-height: 0;
    grid-template-rows: auto minmax(320px, min(52dvh, 640px));
    align-items: start;
}

.work-area:has(.master-split) .master-split {
    flex: none;
    height: auto;
}

.master-split > .entry-panel {
    min-height: 0;
    overflow: visible;
}

.master-split > .grid-panel {
    width: 100%;
    min-height: 320px;
    max-height: min(52dvh, 640px);
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable both-edges;
}

.module-head {
    min-height: 76px;
    gap: 24px;
    border-bottom: 1px solid var(--ui-border);
    padding: 0 0 20px;
}

.module-head h1 {
    font-size: var(--ui-font-size-title);
    line-height: 1.24;
}

.module-head p {
    margin-top: 5px;
    font-size: var(--ui-font-size-base);
    line-height: 1.5;
}

/* Shared controls */

:where(.btn-primary-form, .btn-line, .btn-danger-form, .module-actions a, .module-actions button,
    .toolbar-actions a, .toolbar-actions button, .entry-actions a, .entry-actions button,
    .report-export-toolbar a, .report-export-toolbar button) {
    min-height: var(--ui-control-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: var(--ui-radius-md);
    padding: 9px 14px;
    font-size: var(--ui-font-size-sm);
    font-weight: var(--ui-font-weight-semibold);
    line-height: 1;
}

:where(.btn-primary-form, button.btn-primary-form, a.btn-primary-form) {
    border: 1px solid var(--ui-brand);
    color: var(--ui-text-inverse);
    background: var(--ui-brand);
}

:where(.btn-primary-form, button.btn-primary-form, a.btn-primary-form):hover {
    border-color: var(--ui-brand-hover);
    color: var(--ui-text-inverse);
    background: var(--ui-brand-hover);
}

:where(.btn-line, button.btn-line, a.btn-line) {
    border: 1px solid var(--ui-border-strong);
    color: var(--ui-text-strong);
    background: var(--ui-surface);
}

:where(.btn-line, button.btn-line, a.btn-line):hover {
    border-color: var(--ui-border-control);
    color: var(--ui-text-strong);
    background: var(--ui-surface-muted);
}

.btn-danger-form {
    border: 1px solid var(--ui-danger-border);
    color: var(--ui-danger);
    background: var(--ui-surface);
}

.btn-danger-form:hover {
    border-color: var(--ui-danger);
    color: #fff;
    background: var(--ui-danger);
}

:where(input, select, textarea):disabled,
:where(input, select, textarea)[readonly] {
    color: var(--ui-text-muted);
    background: var(--ui-surface-muted);
}

/* Surfaces, forms, and feedback */

:where(.work-panel, .entry-panel, .form-panel, .report-filter-panel, .filter-panel, .summary-panel) {
    border-color: var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-sm);
}

.section-title {
    min-height: 48px;
    border: 0;
    border-bottom: 1px solid var(--ui-divider);
    border-radius: 0;
    margin-right: 0;
    margin-left: 0;
    background: transparent;
    padding: 0 0 12px;
}

.section-title h2,
.section-title h3 {
    color: var(--ui-text-strong);
    font-size: var(--ui-font-size-lg);
    font-weight: var(--ui-font-weight-semibold);
}

/* Module gateways */

:where(.sales-action-grid, .purchase-action-grid, .inventory-action-grid, .accounts-action-grid,
    .gst-return-action-grid, .reports-action-grid, .masters-action-grid, .payroll-action-grid) {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

:where(.sales-action, .purchase-action, .inventory-action, .accounts-action,
    .gst-return-action, .reports-action, .masters-action, .payroll-action) {
    min-width: 0;
    min-height: 96px;
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid var(--ui-border);
    border-left: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    color: var(--ui-text);
    background: var(--ui-surface);
    padding: 14px;
    box-shadow: var(--ui-shadow-sm);
}

:where(.sales-action, .purchase-action, .inventory-action, .accounts-action,
    .gst-return-action, .reports-action, .masters-action, .payroll-action) > div {
    min-width: 0;
    flex: 1 1 auto;
}

:where(.sales-action, .purchase-action, .inventory-action, .accounts-action,
    .gst-return-action, .reports-action, .masters-action, .payroll-action) :is(h3, strong) {
    margin: 0;
    color: var(--ui-text-strong);
    font-size: var(--ui-font-size-md);
    font-weight: var(--ui-font-weight-semibold);
}

:where(.sales-action, .purchase-action, .inventory-action, .accounts-action,
    .gst-return-action, .reports-action, .masters-action, .payroll-action) :is(p, small) {
    display: -webkit-box;
    margin: 3px 0 0;
    overflow: hidden;
    color: var(--ui-text-muted);
    font-size: var(--ui-font-size-sm);
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

:where(.sales-action, .purchase-action, .inventory-action, .accounts-action,
    .gst-return-action, .reports-action, .masters-action, .payroll-action) > :is(a, button) {
    min-width: 76px;
    flex: 0 0 auto;
}

/* Long-form progressive disclosure */

:is(.employee-form-sections, .master-form-sections) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.ui-form-disclosure {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface);
}

.ui-form-disclosure.is-wide {
    grid-column: 1 / -1;
}

.ui-form-disclosure > summary {
    min-height: 54px;
    display: grid;
    align-content: center;
    gap: 1px;
    list-style: none;
    color: var(--ui-text-strong);
    background: var(--ui-surface-subtle);
    padding: 9px 14px;
    font-size: var(--ui-font-size-base);
    font-weight: var(--ui-font-weight-semibold);
}

.ui-form-disclosure > summary::-webkit-details-marker {
    display: none;
}

.ui-form-disclosure > summary::after {
    grid-area: 1 / 2 / span 2;
    align-self: center;
    color: var(--ui-text-muted);
    content: "+";
    font-size: 20px;
    font-weight: var(--ui-font-weight-regular);
}

.ui-form-disclosure[open] > summary::after {
    content: "\2212";
}

.ui-form-disclosure > summary small {
    color: var(--ui-text-muted);
    font-size: var(--ui-font-size-xs);
    font-weight: var(--ui-font-weight-regular);
}

.ui-form-disclosure-content {
    border-top: 1px solid var(--ui-divider);
    padding: 14px;
}

:is(.ui-employee-section, .ui-master-section):not(.is-wide) .form-grid {
    grid-template-columns: 120px minmax(0, 1fr);
}

:where(.form-grid, .entry-grid, .report-filter-grid) label {
    color: var(--ui-text);
    font-size: var(--ui-font-size-sm);
    font-weight: var(--ui-font-weight-semibold);
}

:where(.form-grid, .entry-grid, .report-filter-grid) :is(input, select, textarea) {
    min-height: var(--ui-control-height);
    border-color: var(--ui-border-control);
    border-radius: var(--ui-radius-md);
    color: var(--ui-text-strong);
    background: var(--ui-surface);
}

:where(.form-grid, .entry-grid, .report-filter-grid) :is(input, select, textarea):focus {
    border-color: var(--ui-focus);
    outline: 0;
    box-shadow: 0 0 0 3px var(--ui-focus-ring);
}

:where(.status-band, .validation-banner, .alert) {
    border-radius: var(--ui-radius-md);
    font-size: var(--ui-font-size-sm);
}

/* Data */

.metric-grid {
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-sm);
}

.metric-card {
    min-height: 108px;
    border: 0;
    border-right: 1px solid var(--ui-divider);
    border-radius: 0;
    background: var(--ui-surface);
    padding: 18px 20px;
    box-shadow: none;
}

.metric-card:last-child {
    border-right: 0;
}

.metric-card > span {
    color: var(--ui-text-muted);
    font-size: var(--ui-font-size-sm);
    font-weight: var(--ui-font-weight-medium);
    text-transform: none;
}

.metric-card strong {
    margin-top: 10px;
    color: var(--ui-text-strong);
    font-size: 24px;
    font-weight: var(--ui-font-weight-semibold);
}

.metric-card small {
    margin-top: 3px;
    color: var(--ui-text-soft);
    font-size: var(--ui-font-size-xs);
}

.table-wrap {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface);
    scrollbar-color: var(--ui-border-control) var(--ui-surface-muted);
}

.data-grid-wrap,
.responsive-table-wrap {
    max-width: 100%;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-color: var(--ui-border-control) var(--ui-surface-muted);
    scrollbar-gutter: stable both-edges;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
}

.mobile-x-scrollbar {
    height: 16px;
    margin: 6px 0 2px;
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface-muted);
    scrollbar-color: var(--ui-border-control) var(--ui-surface-muted);
}

.mobile-x-scrollbar__spacer {
    height: 1px;
}

.mobile-x-scrollbar.is-hidden {
    display: none;
}

:where(.table-wrap, .report-table-wrap) table {
    color: var(--ui-text);
    font-size: var(--ui-font-size-sm);
}

:where(.table-wrap, .report-table-wrap) thead th {
    height: var(--ui-table-row);
    border-color: var(--ui-border);
    color: var(--ui-text-muted);
    background: var(--ui-surface-subtle);
    font-size: var(--ui-font-size-xs);
    font-weight: var(--ui-font-weight-bold);
    text-transform: none;
}

:where(.table-wrap, .report-table-wrap) tbody td {
    height: var(--ui-table-row);
    border-color: var(--ui-divider);
    background: var(--ui-surface);
}

:where(.table-wrap, .report-table-wrap) tbody tr:hover td {
    background: var(--ui-row-hover);
}

:where(.table-wrap, .report-table-wrap) tbody tr.selected td,
:where(.table-wrap, .report-table-wrap) tbody tr[aria-selected="true"] td {
    background: var(--ui-row-selected);
}

/* Dashboard */

.dashboard-hero {
    min-height: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 24px;
    border: 0;
    border-bottom: 1px solid var(--ui-border);
    border-radius: 0;
    background: transparent;
    padding: 0 0 22px;
    box-shadow: none;
}

.dashboard-kicker {
    color: var(--ui-brand);
    font-size: var(--ui-font-size-sm);
    font-weight: var(--ui-font-weight-bold);
    text-transform: none;
}

.dashboard-hero h1 {
    margin: 4px 0 0;
    color: var(--ui-text-strong);
    font-size: 30px;
    font-weight: var(--ui-font-weight-bold);
    line-height: 1.22;
}

.dashboard-session {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 9px;
    color: var(--ui-text-muted);
    font-size: var(--ui-font-size-sm);
}

.dashboard-session span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    border-radius: 0;
    color: var(--ui-text-muted);
    background: transparent;
    padding: 0;
}

.dashboard-session span + span::before {
    color: var(--ui-border-control);
    content: "/";
}

.dashboard-hero-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.dashboard-overview {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(300px, .55fr);
    gap: 22px;
    margin-top: 22px;
}

.dashboard-section {
    min-width: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0;
    box-shadow: none;
}

.dashboard-summary-panel,
.home-menu-panel,
.dashboard-system-details {
    grid-column: 1 / -1;
}

.dashboard-section > .section-title {
    min-height: 42px;
    margin-bottom: 10px;
}

.dashboard-focus-list,
.dashboard-quick-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
}

.dashboard-focus-list a,
.dashboard-quick-card {
    min-height: 66px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    color: var(--ui-text);
    background: var(--ui-surface);
    padding: 12px 14px;
    box-shadow: var(--ui-shadow-sm);
}

.dashboard-focus-list a:hover,
.dashboard-quick-card:hover {
    border-color: var(--ui-brand-border);
    color: var(--ui-text);
    background: var(--ui-brand-tint);
    transform: none;
}

.dashboard-focus-list a > svg:first-child,
.dashboard-quick-card > svg:first-child {
    color: var(--ui-brand);
    background: transparent;
}

.dashboard-quick-grid {
    grid-template-columns: 1fr;
}

.dashboard-metric-stack {
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
}

.home-menu-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.home-menu-card {
    min-height: 76px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    color: var(--ui-text);
    background: var(--ui-surface);
    padding: 14px;
    box-shadow: var(--ui-shadow-sm);
}

.home-menu-card:hover {
    border-color: var(--ui-brand-border);
    color: var(--ui-text);
    background: var(--ui-brand-tint);
    transform: none;
}

.home-menu-icon {
    color: var(--ui-brand);
    background: var(--ui-brand-tint);
}

.dashboard-system-details {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface);
}

/* Reports */

.report-filter-panel {
    margin-top: 18px;
    padding: 16px;
}

.report-filter-grid {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    align-items: end;
    gap: 12px;
}

.report-filter-panel .report-filter-grid[data-ui-filter-fields="true"] {
    min-width: 0;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.ui-filter-field {
    min-width: 0;
    display: grid;
    align-content: end;
    gap: 6px;
}

.ui-filter-field > label {
    min-height: auto;
    margin: 0;
    color: var(--ui-text-muted);
    font-size: var(--ui-font-size-xs);
    font-weight: var(--ui-font-weight-semibold);
}

.ui-filter-field > :is(input, select, textarea) {
    width: 100%;
    min-width: 0;
    min-height: var(--ui-control-height);
}

.ui-action-menu-content > a,
.ui-action-menu-content > button,
.ui-action-menu-content > span {
    justify-content: flex-start;
    text-align: left;
}

.report-filter-grid > button[type="submit"],
.report-filter-grid > button[id$="FilterSubmit"] {
    min-height: var(--ui-control-height);
    align-self: end;
}

.report-export-toolbar {
    min-height: 48px;
    justify-content: flex-start;
    gap: 6px;
    border: 0;
    border-top: 1px solid var(--ui-divider);
    background: transparent;
    padding: 12px 0 0;
}

.report-export-toolbar > span:first-child {
    margin-right: 4px;
    color: var(--ui-text-muted);
    font-size: var(--ui-font-size-sm);
    font-weight: var(--ui-font-weight-semibold);
}

.report-context,
.report-summary-band,
.report-filter-panel ~ .status-band {
    color: var(--ui-text-muted);
    background: var(--ui-surface);
}

.report-filter-panel ~ .status-band {
    position: relative;
    border-color: var(--ui-border);
    padding-left: 36px;
}

.report-filter-panel ~ .status-band::before {
    position: absolute;
    top: 50%;
    left: 15px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    content: "";
    transform: translateY(-50%);
}

.report-filter-panel ~ .status-band.ok {
    border-color: var(--ui-success-border);
    color: var(--ui-success);
    background: var(--ui-success-bg);
}

.report-filter-panel ~ .status-band.warn,
.report-filter-panel ~ .status-band.warning {
    border-color: var(--ui-warning-border);
    color: var(--ui-warning);
    background: var(--ui-warning-bg);
}

.report-filter-panel ~ .status-band.error {
    border-color: var(--ui-danger-border);
    color: var(--ui-danger);
    background: var(--ui-danger-bg);
}

.report-context-list {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: thin;
    white-space: nowrap;
}

.report-context-list > span {
    flex: 0 0 auto;
}

.report-context-list > span + span {
    margin-left: 10px;
    border-left: 1px solid var(--ui-border);
    padding-left: 10px;
}

.table-empty-state {
    min-height: 160px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 9px;
    color: var(--ui-text-muted);
    background: var(--ui-surface);
    padding: 28px;
    text-align: center;
}

.table-empty-state svg {
    width: 24px;
    height: 24px;
    color: var(--ui-text-soft);
}

@media (min-width: 1201px) {
    .sales-entry-totals,
    .purchase-entry-totals {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

@media (max-width: 1023px) {
    .entry-panel .inline-title {
        min-height: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        margin: 18px 0 0;
    }

    .entry-panel .inline-title .toolbar-actions {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
    }

    .entry-panel .inline-title .toolbar-actions > * {
        width: 100%;
        min-width: 0;
    }

    .report-export-toolbar {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
    }

    .report-export-toolbar > span:first-child {
        grid-column: 1 / -1;
    }

    .report-export-toolbar > :is(a, button) {
        width: 100%;
        min-width: 0;
    }

    body[data-current-module="Reports"] .data-grid-wrap .data-grid :is(th, td):first-child,
    body[data-current-module="Accounts"] .data-grid-wrap .data-grid :is(th, td):first-child,
    body[data-current-module="GST Return"] .data-grid-wrap .data-grid :is(th, td):first-child {
        position: sticky;
        z-index: 2;
        left: 0;
        min-width: 94px;
        background: var(--ui-surface);
        box-shadow: 1px 0 0 var(--ui-border);
    }

    body[data-current-module="Reports"] .data-grid-wrap .data-grid thead th:first-child,
    body[data-current-module="Accounts"] .data-grid-wrap .data-grid thead th:first-child,
    body[data-current-module="GST Return"] .data-grid-wrap .data-grid thead th:first-child {
        z-index: 3;
        background: var(--ui-surface-subtle);
    }
}

/* Responsive */

@media (max-width: 1200px) {
    .shell-navigation[open] > .shell-navigation-content {
        color: var(--ui-text);
        background: var(--ui-surface);
    }

    .shell-navigation-content .side-section-label {
        color: var(--ui-text-soft);
    }

    .shell-navigation-content .side-link {
        color: var(--ui-text);
        background: transparent;
    }

    .shell-navigation-content .side-link:hover {
        color: var(--ui-text-strong);
        background: var(--ui-surface-muted);
    }

    .shell-navigation-content .side-link.active {
        color: var(--ui-brand);
        background: var(--ui-brand-tint);
    }

    .shell-navigation-content .side-signout {
        border-color: var(--ui-danger-border);
        color: var(--ui-danger);
        background: var(--ui-danger-bg);
    }

    .shell-navigation-content .shell-nav-filter {
        border-color: var(--ui-border);
        color: var(--ui-text);
        background: var(--ui-surface-subtle);
    }

    :where(.sales-action-grid, .purchase-action-grid, .inventory-action-grid, .accounts-action-grid,
        .gst-return-action-grid, .reports-action-grid, .masters-action-grid, .payroll-action-grid) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    html:has(body.ui-navigation-open),
    body.desktop-body.ui-navigation-open {
        height: 100dvh !important;
        overflow: hidden !important;
        overscroll-behavior: none;
        touch-action: none !important;
    }

    .dashboard-overview {
        grid-template-columns: 1fr;
    }

    .dashboard-summary-panel,
    .home-menu-panel,
    .dashboard-system-details {
        grid-column: auto;
    }

    .dashboard-quick-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-menu-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .login-shell {
        align-items: stretch;
        padding: 0;
    }

    .login-surface {
        min-height: 100dvh;
    }

    .login-workspace {
        min-height: 100dvh;
        grid-template-columns: 1fr;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .login-brand-panel {
        min-height: 152px;
        justify-content: flex-start;
        gap: 26px;
        padding: 24px var(--ui-page-gutter);
    }

    .login-brand-panel::after {
        width: 34%;
        height: 4px;
    }

    .login-brand-message {
        margin: 0;
        padding: 0;
    }

    .login-brand-message p,
    .login-brand-context {
        display: none;
    }

    .login-brand-message h2 {
        max-width: 18ch;
        font-size: 22px;
        line-height: 1.25;
    }

    .login-panel {
        justify-content: flex-start;
        padding: 34px var(--ui-page-gutter) 48px;
    }

    .login-panel h1 {
        font-size: 26px;
    }

    .login-form {
        max-width: none;
        margin-top: 26px;
    }

    .work-area {
        padding-top: 18px;
        padding-bottom: calc(76px + env(safe-area-inset-bottom));
    }

    .module-head {
        min-height: auto;
        display: grid;
        gap: 14px;
        padding-bottom: 16px;
    }

    .module-head h1 {
        font-size: var(--ui-font-size-title-mobile);
    }

    .module-actions {
        width: 100%;
        max-width: none;
        justify-content: flex-start;
    }

    .module-actions:has(.ui-context-switch-menu):has(> :nth-child(3)) {
        grid-template-columns: 1.2fr 1fr 1fr;
    }

    .module-actions:has(.ui-context-switch-menu):not(:has(> :nth-child(3))) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .module-actions .ui-action-menu[open]::before {
        position: fixed;
        z-index: calc(var(--ui-z-popover) - 1);
        inset: 0;
        background: var(--ui-overlay);
        content: "";
    }

    .module-actions .ui-action-menu-content,
    .module-actions .reports-menu-content {
        position: fixed;
        z-index: var(--ui-z-popover);
        inset: auto 12px calc(12px + env(safe-area-inset-bottom)) 12px;
        width: auto;
        min-width: 0;
        max-height: min(72dvh, 620px);
        grid-template-columns: minmax(0, 1fr);
        overflow: auto;
        border-radius: var(--ui-radius-lg);
        padding: 8px;
        box-shadow: var(--ui-shadow-popover);
    }

    body.desktop-body .sales-entry-head .module-actions > *,
    body.desktop-body .module-actions:has(.ui-context-switch-menu) > * {
        width: 100%;
        min-width: 0;
    }

    .sales-entry-head .module-actions .ui-action-menu-content {
        top: auto;
        right: 12px;
        bottom: calc(62px + env(safe-area-inset-bottom));
        left: 12px;
    }

    .dashboard-hero {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 16px;
        padding-bottom: 18px;
    }

    .dashboard-hero h1 {
        font-size: 26px;
    }

    .dashboard-session {
        display: grid;
        gap: 4px;
    }

    .dashboard-session span + span::before {
        display: none;
    }

    .dashboard-hero-actions {
        justify-content: flex-start;
    }

    .dashboard-hero-actions .btn-line {
        width: auto;
    }

    .dashboard-overview {
        gap: 24px;
        margin-top: 18px;
    }

    .dashboard-quick-grid,
    .home-menu-grid {
        grid-template-columns: 1fr;
    }

    .metric-grid,
    .dashboard-metric-stack {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .metric-card {
        min-height: 100px;
        border-right: 1px solid var(--ui-divider);
        border-bottom: 1px solid var(--ui-divider);
        padding: 15px;
    }

    .metric-card strong {
        font-size: 21px;
    }

    .report-filter-panel {
        padding: 14px;
    }

    .report-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 11px;
    }

    .report-filter-panel .report-filter-grid[data-ui-filter-fields="true"] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .report-filter-grid > :is(.span-2, .field-wide, .filter-search, .ui-filter-field-search),
    .report-filter-grid > button[type="submit"],
    .report-filter-grid > button[id$="FilterSubmit"] {
        grid-column: 1 / -1;
    }

    .report-export-toolbar {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .report-export-toolbar > span:first-child {
        grid-column: 1 / -1;
    }

    .report-export-toolbar > :is(a, button) {
        width: 100%;
        min-width: 0;
    }

    .master-split,
    .sales-entry-split {
        display: grid;
        grid-template-rows: auto minmax(280px, 56dvh);
        gap: 14px;
    }

    :where(.sales-action-grid, .purchase-action-grid, .inventory-action-grid, .accounts-action-grid,
        .gst-return-action-grid, .reports-action-grid, .masters-action-grid, .payroll-action-grid),
    :is(.employee-form-sections, .master-form-sections) {
        grid-template-columns: minmax(0, 1fr);
    }

    .ui-form-disclosure.is-wide {
        grid-column: auto;
    }

    :is(.ui-employee-section, .ui-master-section) .form-grid,
    :is(.ui-employee-section, .ui-master-section):not(.is-wide) .form-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
    }

    :is(.ui-employee-section, .ui-master-section) .form-grid > label {
        margin-top: 8px;
    }

    .entry-panel .inline-title {
        min-height: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        margin: 18px 0 0;
    }

    .entry-panel .inline-title .toolbar-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .entry-panel .inline-title .toolbar-actions > * {
        width: 100%;
        min-width: 0;
    }

    .master-split > .grid-panel {
        min-height: 280px;
        max-height: 56dvh;
    }

    .table-wrap {
        max-width: 100%;
        overflow: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x pan-y;
        scrollbar-gutter: stable both-edges;
    }

    body.desktop-body .data-grid.sales-entry-item-grid input.sales-line-input,
    body.desktop-body .data-grid.sales-entry-item-grid .line-remove-action,
    body.desktop-body .data-grid.purchase-entry-item-grid input.purchase-line-input,
    body.desktop-body .data-grid.purchase-entry-item-grid select.purchase-line-input,
    body.desktop-body .data-grid.purchase-entry-item-grid input.purchase-line-checkbox,
    body.desktop-body .data-grid.purchase-entry-item-grid .line-remove-action,
    body.desktop-body .data-grid.sales-return-entry-item-grid input.return-line-input,
    body.desktop-body .data-grid.delivery-challan-item-grid input.delivery-line-input,
    body.desktop-body .data-grid.quotation-item-grid input.quotation-line-input,
    body.desktop-body .data-grid.purchase-order-item-grid input.purchase-order-line-input,
    body.desktop-body .data-grid.purchase-return-entry-item-grid input.purchase-return-line-input {
        min-height: var(--ui-touch-target);
    }

    body.desktop-body .data-grid.purchase-entry-item-grid input.purchase-line-checkbox {
        width: var(--ui-touch-target);
        min-width: var(--ui-touch-target);
    }

    .shell-navigation-content :is(input, select, button),
    .shell-nav-filter-summary,
    .ui-action-menu > summary,
    .report-filter-grid :is(input, select, textarea, button),
    #ImportFile,
    #purchaseImportButton,
    .data-grid-wrap[tabindex],
    .table-wrap[tabindex],
    .responsive-table-wrap[tabindex] {
        min-height: var(--ui-touch-target);
    }

    .shell-nav-search-row button {
        min-width: var(--ui-touch-target);
    }

    .sales-entry-item-grid tbody td[data-mobile-field="essential"],
    .purchase-entry-item-grid tbody td[data-mobile-field="essential"] {
        order: 10;
    }

    .sales-entry-item-grid tbody td.mobile-line-toggle-cell,
    .purchase-entry-item-grid tbody td.mobile-line-toggle-cell {
        order: 20;
    }

    .sales-entry-item-grid tbody td[data-mobile-field="advanced"],
    .purchase-entry-item-grid tbody td[data-mobile-field="advanced"] {
        order: 30;
    }
}

@media (max-width: 479px) {
    .login-brand-panel {
        min-height: 142px;
        padding-right: 20px;
        padding-left: 20px;
    }

    .login-panel {
        padding-right: 20px;
        padding-left: 20px;
    }

    .metric-grid,
    .dashboard-metric-stack {
        grid-template-columns: 1fr 1fr;
    }

    .report-filter-grid,
    .report-filter-panel .report-filter-grid[data-ui-filter-fields="true"] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .report-filter-grid > :is(.span-2, .field-wide, .filter-search, .ui-filter-field-search),
    .report-filter-grid > button[type="submit"],
    .report-filter-grid > button[id$="FilterSubmit"] {
        grid-column: 1 / -1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .login-submit-spinner {
        animation-duration: 1.5s;
    }
}

@media print {
    .login-body,
    .desktop-body {
        background: #fff;
    }
}

/*
 * 2026 experience refinement
 * --------------------------
 * A presentation-only refinement of the shared shell, fields, metrics, cards,
 * reports, and transaction workflow. Business bindings and print rules remain
 * authoritative in their existing files.
 */

@media screen {
    .mobile-report-row-toggle,
    .mobile-statement-preview-toggle {
        display: none;
    }

    body.desktop-body :is(button, a).compact-action {
        min-height: 44px !important;
    }

    html {
        background: var(--ui-canvas);
    }

    body {
        font-family: var(--ui-font-sans);
        font-size: 14px;
    }

    h1,
    h2,
    h3,
    .top-title,
    .side-brand-copy strong,
    .login-brand-copy strong {
        font-family: var(--ui-font-display);
    }

    .desktop-frame,
    .desktop-main,
    .work-area {
        background: var(--ui-canvas);
    }

    .side-menu {
        border-right-color: rgb(255 255 255 / 8%);
        background: var(--ui-shell);
        box-shadow: inset -1px 0 rgb(0 0 0 / 14%);
    }

    .side-logo {
        min-height: var(--ui-topbar-height);
        gap: 12px;
        border-bottom: 1px solid var(--ui-shell-border);
        padding: 0 17px;
    }

    .side-brand-mark {
        width: 34px;
        height: 34px;
        border: 1px solid rgb(255 255 255 / 14%);
        border-radius: var(--ui-radius-md);
        background: var(--ui-brand);
        box-shadow: 0 6px 18px rgb(0 0 0 / 18%);
    }

    .side-brand-copy strong {
        font-size: 15px;
        font-weight: 650;
    }

    .side-brand-copy small {
        color: #9fb0ab;
        font-size: 11px;
    }

    .top-bar {
        min-height: var(--ui-topbar-height);
        border-bottom-color: var(--ui-border);
        background: rgb(255 255 255 / 97%);
        box-shadow: 0 1px 0 rgb(17 27 25 / 2%);
        backdrop-filter: blur(16px) saturate(130%);
    }

    .top-product-context {
        gap: 10px;
    }

    .top-module-label {
        display: inline-flex;
        min-height: 28px;
        align-items: center;
        border-radius: var(--ui-radius-sm);
        color: var(--ui-brand);
        background: var(--ui-brand-tint);
        padding: 0 9px;
        font-size: 12px;
        font-weight: 700;
    }

    .top-title {
        color: var(--ui-text-muted);
        font-size: 13px;
        font-weight: 500;
    }

    .top-session {
        gap: 11px;
    }

    .top-company-avatar {
        width: 34px;
        height: 34px;
        border: 1px solid var(--ui-brand-border);
        color: var(--ui-brand);
        background: var(--ui-brand-tint);
        font-weight: 700;
    }

    .top-company {
        font-size: 13px;
        font-weight: 650;
    }

    .top-context {
        color: var(--ui-text-soft);
        font-size: 11px;
    }

    .shell-navigation-content {
        padding: 13px 10px 14px;
    }

    .shell-nav-filter {
        overflow: hidden;
        margin-bottom: 12px;
        border-color: rgb(255 255 255 / 12%);
        background: #172522;
    }

    .shell-nav-filter-summary {
        min-height: 42px;
        color: #dce7e3;
        font-size: 12px;
        padding: 0 11px;
    }

    .shell-nav-filter-summary svg {
        color: var(--ui-shell-accent);
    }

    .side-nav-scroll {
        gap: 18px;
        padding: 8px 0 12px;
    }

    .side-section-label {
        min-height: 22px;
        color: var(--ui-shell-section);
        font-size: 10px;
        font-weight: 700;
        padding: 0 12px;
    }

    .side-link,
    .shell-navigation-content .side-link {
        min-height: 43px;
        gap: 12px;
        border-radius: var(--ui-radius-md);
        padding: 0 12px;
        font-size: 13px;
        font-weight: 550;
    }

    .side-link svg {
        width: 18px;
        height: 18px;
        color: #9eb1ab;
        stroke-width: 1.75;
    }

    .side-link:hover svg,
    .side-link.active svg {
        color: var(--ui-shell-accent);
    }

    .side-link.active,
    .shell-navigation-content .side-link.active {
        color: #f5fffb;
        background: var(--ui-shell-selected);
    }

    .side-link.active::before {
        inset: 8px auto 8px -10px;
        width: 3px;
        border-radius: 0 4px 4px 0;
    }

    .side-signout {
        margin-top: 8px;
        border-top: 1px solid var(--ui-shell-border);
        border-radius: 0;
        color: #e8c3bf;
    }

    .work-area {
        padding: 30px var(--ui-page-gutter) 64px;
    }

    .module-head {
        min-height: 82px;
        align-items: center;
        gap: 28px;
        border-bottom-color: var(--ui-border);
        padding: 0 0 22px;
    }

    .module-head h1 {
        color: var(--ui-text-strong);
        font-size: 28px;
        font-weight: 680;
        line-height: 1.18;
    }

    .module-head p {
        margin-top: 6px;
        color: var(--ui-text-muted);
        font-size: 13px;
        line-height: 1.5;
    }

    .module-actions {
        gap: 8px;
    }

    :where(.btn-primary-form, .btn-line, .btn-danger-form, .module-actions a, .module-actions button,
        .toolbar-actions a, .toolbar-actions button, .entry-actions a, .entry-actions button,
        .report-export-toolbar a, .report-export-toolbar button, .ui-action-menu > summary) {
        min-height: 42px;
        border-radius: var(--ui-radius-md);
        padding: 9px 14px;
        font-size: 13px;
        font-weight: 650;
        transition:
            border-color var(--ui-duration-fast) var(--ui-ease),
            background var(--ui-duration-fast) var(--ui-ease),
            color var(--ui-duration-fast) var(--ui-ease),
            box-shadow var(--ui-duration-fast) var(--ui-ease),
            transform var(--ui-duration-fast) var(--ui-ease);
    }

    :where(.btn-primary-form, button.btn-primary-form, a.btn-primary-form) {
        border-color: var(--ui-brand);
        background: var(--ui-brand);
        box-shadow: 0 1px 1px rgb(4 80 66 / 14%), 0 5px 14px rgb(4 80 66 / 10%);
    }

    :where(.btn-primary-form, button.btn-primary-form, a.btn-primary-form):hover {
        border-color: var(--ui-brand-hover);
        background: var(--ui-brand-hover);
        box-shadow: 0 1px 2px rgb(4 80 66 / 18%), 0 7px 18px rgb(4 80 66 / 14%);
        transform: translateY(-1px);
    }

    :where(.btn-line, button.btn-line, a.btn-line, .ui-action-menu > summary) {
        border-color: var(--ui-border-strong);
        color: var(--ui-text-strong);
        background: var(--ui-surface);
        box-shadow: 0 1px 1px rgb(17 27 25 / 3%);
    }

    :where(.btn-line, button.btn-line, a.btn-line, .ui-action-menu > summary):hover {
        border-color: #9faea9;
        background: var(--ui-surface-subtle);
        box-shadow: 0 3px 10px rgb(17 27 25 / 6%);
        transform: translateY(-1px);
    }

    :where(.btn-primary-form, .btn-line, .btn-danger-form, .ui-action-menu > summary) svg {
        width: 17px;
        height: 17px;
        stroke-width: 1.8;
    }

    .ui-action-menu-content {
        top: calc(100% + 8px);
        min-width: 210px;
        gap: 2px;
        border-color: var(--ui-border);
        border-radius: var(--ui-radius-lg);
        padding: 7px;
        box-shadow: var(--ui-shadow-popover);
    }

    .ui-action-menu-content a,
    .ui-action-menu-content button,
    .ui-action-menu-content > span {
        min-height: 42px;
        border-radius: var(--ui-radius-md);
        padding: 9px 11px;
        font-size: 13px;
    }

    :where(.work-panel, .entry-panel, .form-panel, .report-filter-panel, .filter-panel, .summary-panel, .grid-panel) {
        border: 1px solid var(--ui-border);
        border-radius: var(--ui-radius-lg);
        background: var(--ui-surface);
        box-shadow: var(--ui-shadow-sm);
    }

    .work-panel,
    .entry-panel {
        padding: 18px;
    }

    .grid-panel {
        overflow: hidden;
        padding: 0;
    }

    .section-title {
        min-height: 45px;
        align-items: center;
        border-bottom-color: var(--ui-divider);
        margin-bottom: 12px;
        padding: 0 0 12px;
    }

    .section-title h2,
    .section-title h3 {
        color: var(--ui-text-strong);
        font-size: 16px;
        font-weight: 680;
    }

    .section-title > span {
        color: var(--ui-text-soft);
        font-size: 12px;
    }

    .form-grid[data-ui-form-fields="true"] {
        min-width: 0;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
        gap: 16px 18px;
    }

    .sales-entry-header-grid[data-ui-form-fields="true"],
    .purchase-entry-header-grid[data-ui-form-fields="true"] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ui-form-field {
        min-width: 0;
        display: grid;
        grid-column: auto !important;
        align-content: start;
        gap: 7px;
    }

    .ui-form-field-wide,
    .form-grid[data-ui-form-fields="true"] > .ui-form-field-wide {
        grid-column: 1 / -1 !important;
    }

    .ui-form-field > label,
    .ui-picker-field > label,
    .ui-filter-field > label {
        min-height: auto;
        margin: 0;
        color: var(--ui-text-muted);
        font-size: 12px;
        font-weight: 650;
        line-height: 1.35;
    }

    .ui-form-field > :is(input, select, textarea, fieldset, .check-strip, .input-group, .field-control),
    .ui-picker-field > :is(input, select),
    .ui-filter-field > :is(input, select, textarea) {
        width: 100%;
        min-width: 0;
        grid-column: auto !important;
    }

    .ui-form-field > :is(input, select, textarea),
    .ui-picker-field > :is(input, select),
    .ui-filter-field > :is(input, select, textarea),
    .search-row input {
        min-height: 44px;
        border: 1px solid #a9b7b2;
        border-radius: var(--ui-radius-md);
        color: var(--ui-text-strong);
        background-color: var(--ui-surface);
        padding: 9px 12px;
        box-shadow: inset 0 1px 1px rgb(17 27 25 / 3%);
        transition:
            border-color var(--ui-duration-fast) var(--ui-ease),
            box-shadow var(--ui-duration-fast) var(--ui-ease),
            background var(--ui-duration-fast) var(--ui-ease);
    }

    .ui-form-field > :is(input, select, textarea):hover,
    .ui-picker-field > :is(input, select):hover,
    .ui-filter-field > :is(input, select, textarea):hover,
    .search-row input:hover {
        border-color: #7f918b;
    }

    .ui-form-field > :is(input, select, textarea):focus,
    .ui-picker-field > :is(input, select):focus,
    .ui-filter-field > :is(input, select, textarea):focus,
    .search-row input:focus {
        border-color: var(--ui-focus);
        outline: 0;
        box-shadow: 0 0 0 3px var(--ui-focus-ring);
    }

    .ui-form-field > :is(input, select, textarea):disabled,
    .ui-form-field > :is(input, select, textarea)[readonly] {
        border-color: var(--ui-border);
        color: var(--ui-text-muted);
        background: #f0f3f2;
        box-shadow: none;
    }

    .ui-form-field textarea {
        min-height: 84px;
        resize: vertical;
    }

    .ui-form-field .field-validation-error {
        font-size: 12px;
        line-height: 1.35;
    }

    .check-strip {
        gap: 8px;
    }

    .check-row {
        min-height: 42px;
        border: 1px solid var(--ui-border);
        border-radius: var(--ui-radius-md);
        background: var(--ui-surface-subtle);
        padding: 8px 11px;
    }

    .check-row:has(input:checked) {
        border-color: var(--ui-brand-border);
        color: var(--ui-brand-active);
        background: var(--ui-brand-tint);
    }

    .entry-workflow-section {
        border: 1px solid var(--ui-border);
        border-radius: var(--ui-radius-lg);
        background: var(--ui-surface-subtle);
        padding: 16px;
    }

    .entry-workflow-section .section-title {
        min-height: 39px;
        margin-bottom: 14px;
    }

    .sales-item-picker,
    .purchase-item-picker {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 120px auto;
        align-items: end;
        gap: 10px;
        border: 1px solid var(--ui-border);
        border-radius: var(--ui-radius-lg);
        margin-top: 14px;
        background: #f2f6f4;
        padding: 13px;
    }

    .ui-picker-field {
        min-width: 0;
        display: grid;
        gap: 6px;
    }

    .sales-item-picker > button,
    .purchase-item-picker > button {
        min-width: 112px;
        min-height: 44px;
        border-color: var(--ui-brand);
        color: var(--ui-text-inverse);
        background: var(--ui-brand);
        box-shadow: 0 5px 14px rgb(4 80 66 / 10%);
    }

    .sales-item-picker > button:hover,
    .purchase-item-picker > button:hover {
        border-color: var(--ui-brand-hover);
        background: var(--ui-brand-hover);
    }

    .entry-panel .inline-title {
        min-height: 56px;
        margin: 18px 0 0;
        padding: 0;
    }

    .entry-panel .inline-title .toolbar-actions {
        gap: 6px;
    }

    .entry-panel .compact-action {
        min-height: 38px;
        padding: 7px 11px;
        font-size: 12px;
    }

    .sales-item-wrap,
    .purchase-item-wrap {
        min-height: 118px;
        border: 1px solid var(--ui-border);
        border-radius: var(--ui-radius-lg);
        background: var(--ui-surface);
    }

    .transaction-empty-row td {
        min-height: 120px !important;
        height: 120px !important;
        text-align: center !important;
        white-space: normal !important;
        background: var(--ui-surface-subtle) !important;
    }

    .transaction-empty-row td > * {
        display: block;
        margin-right: auto;
        margin-left: auto;
    }

    .transaction-empty-row strong {
        margin-top: 7px;
        color: var(--ui-text);
        font-size: 13px;
        font-weight: 650;
    }

    .transaction-empty-row small {
        margin-top: 2px;
        color: var(--ui-text-soft);
        font-size: 12px;
    }

    .transaction-empty-icon {
        width: 34px;
        height: 34px;
        display: grid !important;
        place-items: center;
        border-radius: var(--ui-radius-md);
        color: var(--ui-brand);
        background: var(--ui-brand-tint);
    }

    .transaction-empty-icon svg {
        width: 18px;
        height: 18px;
    }

    .line-remove-action {
        width: 36px;
        min-width: 36px !important;
        min-height: 36px !important;
        overflow: hidden;
        color: var(--ui-danger);
        font-size: 0 !important;
        padding: 0 !important;
    }

    .line-remove-action svg {
        width: 16px;
        height: 16px;
    }

    .entry-disclosure,
    .ui-form-disclosure {
        overflow: hidden;
        border: 1px solid var(--ui-border);
        border-radius: var(--ui-radius-lg);
        background: var(--ui-surface);
        box-shadow: none;
    }

    .entry-disclosure {
        margin-top: 10px;
    }

    .entry-disclosure > summary,
    .ui-form-disclosure > summary {
        min-height: 52px;
        color: var(--ui-text);
        background: var(--ui-surface);
        padding: 10px 14px;
        font-size: 13px;
        font-weight: 650;
    }

    .entry-disclosure > summary:hover,
    .ui-form-disclosure > summary:hover {
        background: var(--ui-surface-subtle);
    }

    .entry-disclosure > summary svg {
        width: 18px;
        height: 18px;
        color: var(--ui-brand);
    }

    .entry-disclosure[open] > summary,
    .ui-form-disclosure[open] > summary {
        color: var(--ui-text-strong);
        background: var(--ui-surface-subtle);
    }

    .entry-disclosure-content,
    .ui-form-disclosure-content {
        border-top-color: var(--ui-divider);
        padding: 16px;
    }

    .metric-grid {
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .metric-card {
        position: relative;
        min-width: 0;
        min-height: 116px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto 1fr;
        align-content: start;
        border: 1px solid var(--ui-border);
        border-radius: var(--ui-radius-lg);
        background: var(--ui-surface);
        padding: 16px;
        box-shadow: var(--ui-shadow-sm);
    }

    .metric-card > span:not(.ui-metric-icon) {
        grid-column: 1;
        color: var(--ui-text-muted);
        font-size: 12px;
        font-weight: 650;
    }

    .metric-card strong {
        grid-column: 1 / -1;
        margin-top: 8px;
        color: var(--ui-text-strong);
        font-size: 24px;
        font-weight: 680;
        line-height: 1.15;
    }

    .metric-card small {
        grid-column: 1 / -1;
        align-self: end;
        margin-top: 6px;
        color: var(--ui-text-soft);
        font-size: 11px;
    }

    .ui-metric-icon {
        grid-column: 2;
        grid-row: 1 / span 2;
        width: 32px;
        height: 32px;
        display: grid;
        place-items: center;
        border-radius: var(--ui-radius-md);
        color: var(--ui-brand);
        background: var(--ui-brand-tint);
    }

    .ui-metric-icon svg {
        width: 17px;
        height: 17px;
        stroke-width: 1.8;
    }

    .metric-card[data-tone="accent"] .ui-metric-icon {
        color: var(--ui-accent);
        background: var(--ui-accent-tint);
    }

    .metric-card[data-tone="violet"] .ui-metric-icon {
        color: var(--ui-violet);
        background: var(--ui-violet-tint);
    }

    .metric-card[data-tone="amber"] .ui-metric-icon {
        color: var(--ui-amber);
        background: var(--ui-amber-tint);
    }

    .metric-card[data-tone="coral"] .ui-metric-icon {
        color: var(--ui-coral);
        background: var(--ui-coral-tint);
    }

    .dashboard-metric-stack,
    .reports-metrics,
    .sales-report-totals,
    .metric-grid:not(.sales-entry-totals):not(.purchase-entry-totals) {
        gap: 12px;
        overflow: visible;
    }

    .sales-entry-totals,
    .purchase-entry-totals {
        overflow: hidden;
        display: grid;
        gap: 0;
        border: 1px solid var(--ui-border);
        border-radius: var(--ui-radius-lg);
        margin-top: 14px;
        background: var(--ui-surface);
        box-shadow: var(--ui-shadow-sm);
    }

    .sales-entry-totals .metric-card,
    .purchase-entry-totals .metric-card {
        min-height: 96px;
        display: block;
        border: 0;
        border-right: 1px solid var(--ui-divider);
        border-radius: 0;
        padding: 14px;
        box-shadow: none;
    }

    .sales-entry-totals .metric-card:last-child,
    .purchase-entry-totals .metric-card:last-child {
        border-right: 0;
        background: var(--ui-brand-tint);
    }

    .sales-entry-totals .ui-metric-icon,
    .purchase-entry-totals .ui-metric-icon {
        display: none;
    }

    .sales-entry-totals .metric-card strong,
    .purchase-entry-totals .metric-card strong {
        display: block;
        margin-top: 8px;
        font-size: 20px;
    }

    .sales-entry-totals .metric-card:last-child strong,
    .purchase-entry-totals .metric-card:last-child strong {
        color: var(--ui-brand-active);
        font-size: 23px;
    }

    .dashboard-hero {
        min-height: 112px;
        align-items: center;
        border-bottom-color: var(--ui-border);
        padding: 0 0 24px;
    }

    .dashboard-kicker {
        display: inline-flex;
        min-height: 26px;
        align-items: center;
        border-radius: var(--ui-radius-sm);
        color: var(--ui-brand);
        background: var(--ui-brand-tint);
        padding: 0 9px;
        font-size: 11px;
        font-weight: 700;
    }

    .dashboard-hero h1 {
        margin-top: 9px;
        font-size: 32px;
        font-weight: 680;
    }

    .dashboard-session {
        margin-top: 10px;
        font-size: 12px;
    }

    .dashboard-overview {
        grid-template-columns: minmax(0, 1.55fr) minmax(320px, .75fr);
        gap: 28px 22px;
        margin-top: 26px;
    }

    .dashboard-section > .section-title {
        min-height: 40px;
        margin-bottom: 12px;
    }

    .dashboard-metric-stack {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .dashboard-quick-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .dashboard-focus-list {
        gap: 10px;
    }

    .dashboard-quick-card,
    .dashboard-focus-list a,
    .home-menu-card {
        min-height: 78px;
        gap: 13px;
        border: 1px solid var(--ui-border);
        border-radius: var(--ui-radius-lg);
        color: var(--ui-text);
        background: var(--ui-surface);
        padding: 14px;
        box-shadow: var(--ui-shadow-sm);
        transition:
            border-color var(--ui-duration-fast) var(--ui-ease),
            background var(--ui-duration-fast) var(--ui-ease),
            box-shadow var(--ui-duration-fast) var(--ui-ease),
            transform var(--ui-duration-fast) var(--ui-ease);
    }

    .dashboard-quick-card:hover,
    .dashboard-focus-list a:hover,
    .home-menu-card:hover {
        border-color: var(--ui-brand-border);
        color: var(--ui-text);
        background: var(--ui-surface);
        box-shadow: var(--ui-shadow-md);
        transform: translateY(-2px);
    }

    .dashboard-quick-card > svg:first-child,
    .dashboard-focus-list a > svg:first-child,
    .home-menu-icon {
        width: 36px;
        height: 36px;
        display: grid;
        flex: 0 0 auto;
        place-items: center;
        border-radius: var(--ui-radius-md);
        color: var(--ui-brand);
        background: var(--ui-brand-tint);
        padding: 9px;
    }

    .dashboard-quick-card > span,
    .dashboard-focus-list a > span {
        min-width: 0;
    }

    .dashboard-quick-card strong,
    .dashboard-focus-list strong {
        font-size: 13px;
        font-weight: 680;
    }

    .dashboard-quick-card small,
    .dashboard-focus-list small {
        margin-top: 3px;
        color: var(--ui-text-soft);
        font-size: 11px;
    }

    .home-menu-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
    }

    .dashboard-system-details {
        overflow: hidden;
        border-color: var(--ui-border);
        border-radius: var(--ui-radius-lg);
        box-shadow: var(--ui-shadow-sm);
    }

    :where(.sales-action-grid, .purchase-action-grid, .inventory-action-grid, .accounts-action-grid,
        .gst-return-action-grid, .reports-action-grid, .masters-action-grid, .payroll-action-grid) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 11px;
    }

    :where(.sales-action, .purchase-action, .inventory-action, .accounts-action,
        .gst-return-action, .reports-action, .masters-action, .payroll-action) {
        position: relative;
        min-height: 98px;
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr) 36px !important;
        align-items: center;
        gap: 13px;
        overflow: hidden;
        border: 1px solid var(--ui-border);
        border-left: 1px solid var(--ui-border) !important;
        border-radius: var(--ui-radius-lg);
        background: var(--ui-surface);
        padding: 14px;
        box-shadow: var(--ui-shadow-sm);
        transition:
            border-color var(--ui-duration-fast) var(--ui-ease),
            box-shadow var(--ui-duration-fast) var(--ui-ease),
            transform var(--ui-duration-fast) var(--ui-ease);
    }

    :where(.sales-action, .purchase-action, .inventory-action, .accounts-action,
        .gst-return-action, .reports-action, .masters-action, .payroll-action):hover {
        border-color: var(--ui-brand-border);
        box-shadow: var(--ui-shadow-md);
        transform: translateY(-2px);
    }

    .ui-module-card-icon {
        grid-column: 1;
        grid-row: 1;
        width: 40px;
        height: 40px;
        display: grid;
        place-items: center;
        border-radius: var(--ui-radius-md);
        color: var(--ui-brand);
        background: var(--ui-brand-tint);
    }

    [data-tone="accent"] > .ui-module-card-icon {
        color: var(--ui-accent);
        background: var(--ui-accent-tint);
    }

    [data-tone="violet"] > .ui-module-card-icon {
        color: var(--ui-violet);
        background: var(--ui-violet-tint);
    }

    [data-tone="amber"] > .ui-module-card-icon {
        color: var(--ui-amber);
        background: var(--ui-amber-tint);
    }

    .ui-module-card-icon svg {
        width: 19px;
        height: 19px;
        stroke-width: 1.8;
    }

    :where(.sales-action, .purchase-action, .inventory-action, .accounts-action,
        .gst-return-action, .reports-action, .masters-action, .payroll-action) h3 {
        color: var(--ui-text-strong);
        font-size: 14px;
        font-weight: 680;
    }

    :where(.sales-action, .purchase-action, .inventory-action, .accounts-action,
        .gst-return-action, .reports-action, .masters-action, .payroll-action) p {
        margin-top: 4px;
        color: var(--ui-text-muted);
        font-size: 12px;
        line-height: 1.45;
    }

    .ui-module-card-link {
        position: static;
        z-index: 2;
        grid-column: 3;
        grid-row: 1;
        min-width: 34px !important;
        min-height: 34px !important;
        gap: 0;
        border: 0 !important;
        border-radius: var(--ui-radius-md) !important;
        color: var(--ui-text-muted) !important;
        background: var(--ui-surface-muted) !important;
        padding: 0 !important;
        box-shadow: none !important;
    }

    .ui-module-card-link::after {
        position: absolute;
        z-index: 1;
        inset: 0;
        content: "";
    }

    .ui-module-card-link span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
    }

    .ui-module-card-link svg {
        position: relative;
        z-index: 2;
        width: 16px;
        height: 16px;
    }

    .report-filter-panel {
        margin-top: 18px;
        border-color: var(--ui-border);
        border-radius: var(--ui-radius-lg);
        background: var(--ui-surface);
        padding: 18px;
        box-shadow: var(--ui-shadow-sm);
    }

    .report-filter-grid,
    .report-filter-panel .report-filter-grid[data-ui-filter-fields="true"] {
        grid-template-columns: repeat(5, minmax(140px, 1fr));
        gap: 14px 12px;
    }

    .report-export-toolbar {
        min-height: 55px;
        gap: 7px;
        border-top-color: var(--ui-divider);
        padding-top: 13px;
    }

    .report-export-toolbar > span:first-child {
        font-size: 12px;
    }

    .report-context-list {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    .report-context-list span {
        min-height: 27px;
        display: inline-flex;
        align-items: center;
        border: 1px solid var(--ui-border);
        border-radius: var(--ui-radius-sm);
        color: var(--ui-text-muted);
        background: var(--ui-surface);
        padding: 4px 8px;
        font-size: 11px;
    }

    .report-filter-panel ~ .status-band {
        min-height: 48px;
        align-items: center;
        overflow: visible;
        border-color: var(--ui-border);
        white-space: normal;
        padding: 10px 12px;
    }

    .reports-metrics,
    .sales-report-totals {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        margin-top: 14px;
    }

    .work-panel:has(> .data-grid-wrap) {
        margin-top: 14px;
    }

    .work-panel > .data-grid-wrap {
        max-height: min(64dvh, 720px);
        border: 1px solid var(--ui-border);
        border-radius: var(--ui-radius-md);
    }

    .data-grid,
    .report-table,
    .statement-table {
        font-size: 12px;
    }

    .data-grid thead th,
    .report-table thead th,
    .statement-table thead th {
        position: sticky;
        z-index: 2;
        top: 0;
        min-height: 42px;
        border-color: var(--ui-border);
        color: #52635e;
        background: #f1f5f3;
        font-size: 11px;
        font-weight: 700;
        white-space: nowrap;
    }

    .data-grid tbody td,
    .report-table tbody td,
    .statement-table tbody td {
        min-height: 42px;
        border-color: var(--ui-divider);
        color: var(--ui-text);
        background: var(--ui-surface);
    }

    .data-grid tbody tr:nth-child(even) td,
    .report-table tbody tr:nth-child(even) td {
        background: #fbfcfc;
    }

    .data-grid tbody tr:hover td,
    .report-table tbody tr:hover td,
    .statement-table tbody tr:hover td {
        background: #edf6f3;
    }

    .data-grid a,
    .report-table a,
    .statement-table a {
        color: var(--ui-link);
        font-weight: 650;
        text-decoration: none;
    }

    .data-grid a:hover,
    .report-table a:hover,
    .statement-table a:hover {
        color: var(--ui-link-hover);
        text-decoration: underline;
        text-underline-offset: 2px;
    }

    .data-grid :is(input, select, textarea) {
        min-height: 36px;
        border-color: #aab8b3;
        border-radius: var(--ui-radius-sm);
        background: #fff;
    }

    .search-row {
        min-height: 58px;
        gap: 8px;
        border-bottom: 1px solid var(--ui-divider);
        background: var(--ui-surface-subtle);
        padding: 8px 10px;
    }

    .search-row button {
        min-width: 94px;
        border-color: var(--ui-brand);
        color: #fff;
        background: var(--ui-brand);
    }

    .message-bar,
    .status-band,
    .validation-banner,
    .settings-status {
        border-width: 1px;
        border-radius: var(--ui-radius-md);
        padding: 11px 13px;
        font-size: 12px;
        line-height: 1.45;
    }

    .master-split,
    .sales-entry-split {
        gap: 16px;
        margin-top: 14px;
    }

    .login-body {
        background: #eef2f1;
    }

    .login-workspace {
        width: min(100%, 1020px);
        min-height: min(680px, calc(100dvh - clamp(32px, 8vw, 112px)));
        grid-template-columns: minmax(360px, .9fr) minmax(450px, 1.1fr);
        border-color: #d5ddda;
        box-shadow: 0 36px 90px rgb(18 33 28 / 16%), 0 3px 10px rgb(18 33 28 / 5%);
    }

    .login-brand-panel {
        background: #111d1a;
        padding: clamp(36px, 5vw, 60px);
    }

    .login-brand-message p {
        color: var(--ui-shell-accent);
        font-size: 11px;
        letter-spacing: 0;
    }

    .login-brand-message h2 {
        max-width: 12ch;
        font-family: var(--ui-font-display);
        font-size: clamp(34px, 3vw, 43px);
        font-weight: 600;
        line-height: 1.16;
    }

    .login-panel {
        padding: clamp(44px, 6vw, 68px);
    }

    .login-panel h1 {
        font-family: var(--ui-font-display);
        font-size: 32px;
        font-weight: 680;
    }

    .login-panel-header p {
        max-width: 42ch;
        margin-top: 7px;
        color: var(--ui-text-muted);
    }

    .login-form {
        margin-top: 28px;
    }

    .login-fieldset {
        gap: 14px;
    }

    .login-fieldset legend {
        color: var(--ui-text-soft);
        font-size: 11px;
        font-weight: 700;
    }

    .login-field {
        gap: 7px;
    }

    .login-form .login-field :is(input, select) {
        min-height: 46px;
        border-color: #a6b5b0;
        border-radius: var(--ui-radius-md);
        padding: 10px 12px;
    }

    .login-form button[type="submit"] {
        min-height: 48px;
        border-radius: var(--ui-radius-md);
        box-shadow: 0 7px 18px rgb(4 80 66 / 13%);
    }
}

@media screen and (min-width: 1201px) {
    .sales-entry-head {
        top: -30px;
        padding-top: 10px;
    }

    .dashboard-priority-panel {
        grid-column: 2;
    }

    .dashboard-quick-panel {
        grid-column: 1;
    }
}

@media screen and (max-width: 1200px) {
    .shell-navigation[open] > .shell-navigation-content {
        width: min(336px, 88vw);
        border-right: 1px solid var(--ui-border);
        background: var(--ui-surface);
        box-shadow: var(--ui-shadow-popover);
    }

    .shell-navigation-content .side-link {
        min-height: 46px;
        color: var(--ui-text);
    }

    .shell-navigation-content .side-link svg {
        color: var(--ui-text-soft);
    }

    .shell-navigation-content .side-link.active {
        color: var(--ui-brand-active);
        background: var(--ui-brand-tint);
    }

    .shell-navigation-content .side-link.active svg {
        color: var(--ui-brand);
    }

    .shell-navigation-content .side-section-label {
        color: var(--ui-text-soft);
    }

    .shell-navigation-content .shell-nav-filter {
        border-color: var(--ui-border);
        background: var(--ui-surface-subtle);
    }

    .dashboard-metric-stack {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    :where(.sales-action-grid, .purchase-action-grid, .inventory-action-grid, .accounts-action-grid,
        .gst-return-action-grid, .reports-action-grid, .masters-action-grid, .payroll-action-grid) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .reports-metrics,
    .sales-report-totals {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .report-filter-grid,
    .report-filter-panel .report-filter-grid[data-ui-filter-fields="true"] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media screen and (max-width: 1023px) {
    .sales-entry-header-grid[data-ui-form-fields="true"],
    .purchase-entry-header-grid[data-ui-form-fields="true"] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-overview {
        grid-template-columns: 1fr;
    }

    .dashboard-quick-panel,
    .dashboard-priority-panel {
        grid-column: auto;
    }

    .home-menu-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media screen and (max-width: 767px) {
    .top-bar {
        min-height: 60px;
        gap: 10px;
        padding-right: 12px;
        padding-left: 12px;
    }

    .shell-menu-trigger {
        width: 44px;
        min-width: 44px;
        height: 44px;
        border-color: var(--ui-border);
        border-radius: var(--ui-radius-md);
        background: var(--ui-surface);
    }

    .top-product-context {
        display: none;
    }

    .top-session {
        min-width: 0;
        flex: 1 1 auto;
        justify-content: flex-end;
    }

    .top-company-avatar {
        width: 32px;
        height: 32px;
    }

    .top-session-copy {
        max-width: calc(100vw - 112px);
    }

    .top-company {
        font-size: 12px;
    }

    .top-context {
        font-size: 10px;
    }

    .work-area {
        padding: 20px var(--ui-page-gutter) calc(84px + env(safe-area-inset-bottom));
    }

    .module-head {
        min-height: auto;
        align-items: start;
        gap: 14px;
        padding-bottom: 17px;
    }

    .module-head h1 {
        font-size: 24px;
    }

    .module-head p {
        max-width: 44ch;
        font-size: 12px;
    }

    body.desktop-body:has(.master-split) .module-head .module-actions,
    body.desktop-body:has(.report-filter-panel) .module-head .module-actions {
        position: fixed;
        z-index: var(--ui-z-sticky);
        right: 0;
        bottom: 0;
        left: 0;
        width: auto;
        max-width: none;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        border: 0;
        border-top: 1px solid var(--ui-border);
        border-radius: 0;
        background: rgb(255 255 255 / 98%);
        padding: 8px 12px max(8px, env(safe-area-inset-bottom));
        box-shadow: 0 -12px 30px rgb(17 27 25 / 9%);
        backdrop-filter: blur(16px);
    }

    body.desktop-body:has(.master-split) .module-head .module-actions > *,
    body.desktop-body:has(.report-filter-panel) .module-head .module-actions > * {
        width: 100%;
        min-width: 0;
        min-height: 44px;
    }

    .module-actions .ui-action-menu-content,
    .module-actions .reports-menu-content {
        inset: auto 12px calc(64px + env(safe-area-inset-bottom)) 12px;
        border-radius: var(--ui-radius-lg);
    }

    .entry-panel,
    .work-panel {
        padding: 14px;
    }

    .entry-workflow-section {
        padding: 13px;
    }

    .form-grid[data-ui-form-fields="true"],
    .sales-entry-header-grid[data-ui-form-fields="true"],
    .purchase-entry-header-grid[data-ui-form-fields="true"] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px 12px;
    }

    .sales-item-picker,
    .purchase-item-picker {
        grid-template-columns: minmax(0, 1fr) 90px;
        gap: 10px;
        padding: 12px;
    }

    .ui-picker-item {
        grid-column: 1 / -1;
    }

    .sales-item-picker > button,
    .purchase-item-picker > button {
        min-width: 0;
    }

    .entry-panel .inline-title .toolbar-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sales-entry-totals,
    .purchase-entry-totals {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sales-entry-totals .metric-card,
    .purchase-entry-totals .metric-card {
        border-right: 1px solid var(--ui-divider);
        border-bottom: 1px solid var(--ui-divider);
    }

    .dashboard-hero {
        min-height: 0;
        gap: 14px;
    }

    .dashboard-hero h1 {
        font-size: 27px;
    }

    .dashboard-overview {
        gap: 24px;
        margin-top: 20px;
    }

    .dashboard-metric-stack {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-quick-grid,
    .home-menu-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .metric-card {
        min-height: 108px;
        padding: 14px;
    }

    .metric-card strong {
        font-size: 21px;
    }

    .reports-metrics,
    .sales-report-totals {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .report-filter-panel {
        padding: 13px;
    }

    .report-filter-grid,
    .report-filter-panel .report-filter-grid[data-ui-filter-fields="true"] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .report-context-list {
        gap: 5px;
    }

    .report-context-list span {
        min-height: 25px;
        padding: 3px 7px;
        font-size: 10px;
    }

    :where(.sales-action, .purchase-action, .inventory-action, .accounts-action,
        .gst-return-action, .reports-action, .masters-action, .payroll-action) {
        min-height: 92px;
    }

    .master-split,
    .sales-entry-split {
        gap: 14px;
        margin-top: 12px;
    }

    .login-workspace {
        width: 100%;
        min-height: 100dvh;
        grid-template-columns: 1fr;
    }

    .login-brand-panel {
        min-height: 142px;
        gap: 22px;
        padding: 22px var(--ui-page-gutter);
    }

    .login-brand-message h2 {
        max-width: 24ch;
        font-size: 22px;
    }

    .login-panel {
        padding: 32px var(--ui-page-gutter) 48px;
    }
}

@media (prefers-contrast: more) {
    :root {
        --ui-text-muted: #354640;
        --ui-text-soft: #40514b;
        --ui-border: #899993;
        --ui-border-control: #4f625b;
    }

    :where(button, .btn-line, .btn-primary-form, .btn-danger-form, input, select, textarea) {
        border-width: 2px;
    }
}

@media (forced-colors: active) {
    :where(a, button, input, select, textarea, summary):focus-visible {
        outline: 3px solid Highlight !important;
        outline-offset: 3px !important;
    }

    :where(.metric-card, .dashboard-quick-card, .dashboard-focus-list a, .home-menu-card,
        .sales-action, .purchase-action, .inventory-action, .accounts-action,
        .gst-return-action, .reports-action, .masters-action, .payroll-action,
        .entry-panel, .work-panel, .report-filter-panel) {
        border: 1px solid CanvasText;
    }

    :where(.btn-primary-form, .gstr-filing-primary, .status-pill) {
        forced-color-adjust: none;
    }
}

@media screen and (max-width: 559px) {
    .form-grid[data-ui-form-fields="true"],
    .sales-entry-header-grid[data-ui-form-fields="true"],
    .purchase-entry-header-grid[data-ui-form-fields="true"],
    .report-filter-grid,
    .report-filter-panel .report-filter-grid[data-ui-filter-fields="true"] {
        grid-template-columns: minmax(0, 1fr);
    }

    .report-filter-grid > *,
    .report-filter-grid > :is(.span-2, .field-wide, .filter-search, .ui-filter-field-search),
    .report-filter-grid > button[type="submit"],
    .report-filter-grid > button[id$="FilterSubmit"] {
        grid-column: 1 !important;
    }

    .dashboard-quick-grid,
    .home-menu-grid,
    :where(.sales-action-grid, .purchase-action-grid, .inventory-action-grid, .accounts-action-grid,
        .gst-return-action-grid, .reports-action-grid, .masters-action-grid, .payroll-action-grid) {
        grid-template-columns: minmax(0, 1fr);
    }

    .dashboard-quick-card,
    .dashboard-focus-list a,
    .home-menu-card {
        min-height: 72px;
    }

    .reports-metrics,
    .sales-report-totals {
        gap: 8px;
    }

    .reports-metrics .metric-card,
    .sales-report-totals .metric-card {
        min-height: 102px;
        padding: 12px;
    }

}

@media screen and (max-width: 359px) {
    .top-company-avatar {
        display: none;
    }

    .top-session-copy {
        max-width: calc(100vw - 76px);
    }

    .dashboard-metric-stack {
        grid-template-columns: minmax(0, 1fr);
    }

    .metric-card {
        min-height: 100px;
    }
}

@media (prefers-reduced-motion: reduce) {
    :where(.btn-primary-form, .btn-line, .btn-danger-form, .dashboard-quick-card,
        .dashboard-focus-list a, .home-menu-card, .sales-action, .purchase-action,
        .inventory-action, .accounts-action, .gst-return-action, .reports-action,
        .masters-action, .payroll-action) {
        transition: none !important;
        transform: none !important;
    }
}

@media screen {
    .entry-workflow-section {
        border: 0;
        border-bottom: 1px solid var(--ui-divider);
        border-radius: 0;
        background: transparent;
        padding: 0 0 18px;
    }

    :where(.sales-shell, .purchase-shell, .inventory-shell, .accounts-shell, .gst-return-shell,
        .reports-shell, .masters-shell, .payroll-shell) > .work-panel:has(> [class$="-action-grid"]) {
        border: 0;
        background: transparent;
        padding: 0;
        box-shadow: none;
    }

    .dashboard-quick-panel {
        grid-column: 1;
        order: 1;
    }

    .dashboard-priority-panel {
        grid-column: 2;
        order: 2;
    }

    .dashboard-summary-panel {
        grid-column: 1 / -1;
        order: 3;
    }

    .home-menu-panel {
        grid-column: 1 / -1;
        order: 4;
    }

    .dashboard-system-details {
        grid-column: 1 / -1;
        order: 5;
    }

    .sales-item-wrap,
    .purchase-item-wrap {
        overflow: visible;
        border: 0;
        background: transparent;
    }

    .sales-entry-item-grid,
    .purchase-entry-item-grid {
        width: 100%;
        min-width: 0 !important;
        display: block;
        border: 0;
        background: transparent;
    }

    .sales-entry-item-grid thead,
    .purchase-entry-item-grid thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }

    .sales-entry-item-grid tbody,
    .purchase-entry-item-grid tbody {
        width: 100%;
        display: grid;
        gap: 10px;
    }

    .sales-entry-item-grid tbody tr:not(.transaction-empty-row),
    .purchase-entry-item-grid tbody tr:not(.transaction-empty-row) {
        min-width: 0;
        display: grid;
        grid-template-columns: repeat(14, minmax(0, 1fr));
        align-items: end;
        gap: 10px;
        border: 1px solid var(--ui-border);
        border-radius: var(--ui-radius-lg);
        background: var(--ui-surface);
        padding: 12px;
        box-shadow: var(--ui-shadow-sm);
    }

    .sales-entry-item-grid tbody td,
    .purchase-entry-item-grid tbody td {
        min-width: 0;
        min-height: 0;
        height: auto;
        display: grid;
        align-content: end;
        gap: 5px;
        border: 0 !important;
        color: var(--ui-text);
        background: transparent !important;
        padding: 0;
        white-space: normal;
    }

    .sales-entry-item-grid tbody td::before,
    .purchase-entry-item-grid tbody td::before {
        min-height: 16px;
        display: block;
        overflow: hidden;
        color: var(--ui-text-muted);
        content: attr(data-mobile-label);
        font-size: 11px;
        font-weight: 700;
        line-height: 1.25;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .sales-entry-item-grid tbody td[data-mobile-label="Action"],
    .purchase-entry-item-grid tbody td[data-mobile-label="Action"] {
        grid-column: span 1;
    }

    .sales-entry-item-grid tbody td[data-mobile-label="Sr"],
    .purchase-entry-item-grid tbody td[data-mobile-label="Sr"],
    .sales-entry-item-grid tbody td[data-mobile-label="Code"],
    .purchase-entry-item-grid tbody td[data-mobile-label="Code"],
    .sales-entry-item-grid tbody td[data-mobile-label="Unit"],
    .purchase-entry-item-grid tbody td[data-mobile-label="Unit"],
    .sales-entry-item-grid tbody td[data-mobile-label="Qty"],
    .purchase-entry-item-grid tbody td[data-mobile-label="Qty"],
    .sales-entry-item-grid tbody td[data-mobile-label="GST %"],
    .purchase-entry-item-grid tbody td[data-mobile-label="GST %"] {
        grid-column: span 1;
    }

    .sales-entry-item-grid tbody td[data-mobile-label="Item Name"],
    .purchase-entry-item-grid tbody td[data-mobile-label="Item Name"],
    .sales-entry-item-grid tbody td[data-mobile-label="Description"],
    .purchase-entry-item-grid tbody td[data-mobile-label="Description"] {
        grid-column: span 4;
    }

    .sales-entry-item-grid tbody td[data-mobile-label*="Rate"],
    .purchase-entry-item-grid tbody td[data-mobile-label*="Rate"],
    .sales-entry-item-grid tbody td[data-mobile-label="Disc %"],
    .purchase-entry-item-grid tbody td[data-mobile-label="Disc %"],
    .sales-entry-item-grid tbody td[data-mobile-label="Taxable"],
    .purchase-entry-item-grid tbody td[data-mobile-label="Taxable"],
    .sales-entry-item-grid tbody td[data-mobile-label="Amount"],
    .purchase-entry-item-grid tbody td[data-mobile-label="Amount"],
    .sales-entry-item-grid tbody td[data-mobile-label="Line Total"],
    .purchase-entry-item-grid tbody td[data-mobile-label="Line Total"] {
        grid-column: span 1;
    }

    .sales-entry-item-grid tbody td[data-mobile-field="advanced"],
    .purchase-entry-item-grid tbody td[data-mobile-field="advanced"] {
        display: none;
    }

    .sales-entry-item-grid tbody tr[data-mobile-expanded="true"] td[data-mobile-field="advanced"],
    .purchase-entry-item-grid tbody tr[data-mobile-expanded="true"] td[data-mobile-field="advanced"] {
        grid-column: span 2;
        display: grid;
    }

    .sales-entry-item-grid tbody tr[data-mobile-expanded="true"] td[data-mobile-wide="true"],
    .purchase-entry-item-grid tbody tr[data-mobile-expanded="true"] td[data-mobile-wide="true"] {
        grid-column: span 4;
    }

    .sales-entry-item-grid .mobile-line-toggle-cell,
    .purchase-entry-item-grid .mobile-line-toggle-cell {
        grid-column: 1 / -1 !important;
        display: flex !important;
        justify-content: flex-end;
        border-top: 1px solid var(--ui-divider) !important;
        margin-top: 2px;
        padding-top: 9px;
    }

    .sales-entry-item-grid .mobile-line-toggle-cell::before,
    .purchase-entry-item-grid .mobile-line-toggle-cell::before {
        display: none;
    }

    .mobile-line-toggle {
        min-height: 34px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        border: 0;
        border-radius: var(--ui-radius-md);
        color: var(--ui-brand);
        background: var(--ui-brand-tint);
        padding: 6px 10px;
        font-size: 11px;
        font-weight: 650;
    }

    .mobile-line-toggle svg {
        width: 15px;
        height: 15px;
    }

    .sales-entry-item-grid .transaction-empty-row,
    .purchase-entry-item-grid .transaction-empty-row {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
    }

    .sales-entry-item-grid .transaction-empty-row td,
    .purchase-entry-item-grid .transaction-empty-row td {
        grid-column: 1;
        min-height: 122px !important;
        display: grid;
        place-content: center;
        border: 1px dashed var(--ui-border-strong) !important;
        border-radius: var(--ui-radius-lg);
        padding: 18px;
    }

    .sales-entry-item-grid .transaction-empty-row td::before,
    .purchase-entry-item-grid .transaction-empty-row td::before {
        display: none;
    }
}

@media screen and (max-width: 1200px) {
    .dashboard-quick-panel,
    .dashboard-priority-panel,
    .dashboard-summary-panel,
    .home-menu-panel,
    .dashboard-system-details {
        grid-column: 1;
    }
}

@media screen and (max-width: 1099px) {
    .sales-entry-item-grid tbody tr:not(.transaction-empty-row),
    .purchase-entry-item-grid tbody tr:not(.transaction-empty-row) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 10px;
        padding: 12px;
    }

    .sales-entry-item-grid tbody td,
    .purchase-entry-item-grid tbody td,
    .sales-entry-item-grid tbody td[data-mobile-field="essential"],
    .purchase-entry-item-grid tbody td[data-mobile-field="essential"] {
        grid-column: span 1;
        order: initial;
        display: grid;
        border: 0 !important;
        padding: 0;
    }

    .sales-entry-item-grid tbody td[data-mobile-label="Item Name"],
    .purchase-entry-item-grid tbody td[data-mobile-label="Item Name"],
    .sales-entry-item-grid tbody td[data-mobile-label="Description"],
    .purchase-entry-item-grid tbody td[data-mobile-label="Description"],
    .sales-entry-item-grid tbody td[data-mobile-label="Action"],
    .purchase-entry-item-grid tbody td[data-mobile-label="Action"] {
        grid-column: 1 / -1;
    }

    .sales-entry-item-grid tbody td[data-mobile-label="Action"],
    .purchase-entry-item-grid tbody td[data-mobile-label="Action"] {
        justify-content: flex-end;
        order: 90;
    }

    .sales-entry-item-grid tbody td[data-mobile-label="Action"]::before,
    .purchase-entry-item-grid tbody td[data-mobile-label="Action"]::before {
        display: none;
    }

    .sales-entry-item-grid tbody td[data-mobile-field="advanced"],
    .purchase-entry-item-grid tbody td[data-mobile-field="advanced"] {
        display: none;
    }

    .sales-entry-item-grid tbody tr[data-mobile-expanded="true"] td[data-mobile-field="advanced"],
    .purchase-entry-item-grid tbody tr[data-mobile-expanded="true"] td[data-mobile-field="advanced"],
    .sales-entry-item-grid tbody tr[data-mobile-expanded="true"] td[data-mobile-wide="true"],
    .purchase-entry-item-grid tbody tr[data-mobile-expanded="true"] td[data-mobile-wide="true"] {
        grid-column: 1 / -1;
        display: grid;
    }

    .sales-entry-item-grid .mobile-line-toggle-cell,
    .purchase-entry-item-grid .mobile-line-toggle-cell {
        order: 100;
    }

    .line-remove-action {
        width: 44px;
        min-width: 44px !important;
        min-height: 44px !important;
    }

    .line-action-cluster .mobile-line-toggle {
        width: auto;
        min-width: 44px;
        min-height: 44px;
        padding: 0 12px;
    }

    .line-action-cluster .mobile-line-toggle span {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
        white-space: normal;
    }
}

@media screen {
    .ui-form-field > .field-label {
        color: var(--ui-text-muted);
        font-size: 11px;
        font-weight: 700;
        line-height: 1.3;
    }

    .settings-activation-field {
        grid-column: 1 / -1 !important;
    }

    .settings-activation-field .check-row.setup-incomplete {
        border-color: var(--ui-warning-border);
        color: var(--ui-text);
        background: var(--ui-warning-bg);
    }

    .shell-navigation-content .shell-nav-filter-summary,
    .shell-navigation-content .shell-nav-filter-summary > span {
        color: #f3f8f6;
        background: #172522;
    }

    body:has(.statement-print-area) .report-export-toolbar
        :is([data-report-export="pdf"], [data-report-export="print"]) {
        display: none;
    }

    .ui-action-menu-label {
        display: block;
        border-bottom: 1px solid var(--ui-divider);
        color: var(--ui-text-muted);
        padding: 8px 10px 7px;
        font-size: 10px;
        font-weight: 750;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    .gstr-filing-actions {
        min-height: 62px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        border-block: 1px solid var(--ui-divider);
        padding: 10px 0;
    }

    .gstr-filing-actions > div:first-child {
        display: grid;
        gap: 2px;
    }

    .gstr-filing-actions strong {
        color: var(--ui-text-strong);
        font-size: 13px;
    }

    .gstr-filing-actions span {
        color: var(--ui-text-muted);
        font-size: 11px;
    }

    .gstr-filing-action-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 7px;
    }

    .gstr-filing-action-list a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--ui-border-control);
        border-radius: var(--ui-radius-md);
        color: var(--ui-text);
        background: var(--ui-surface);
        padding: 7px 12px;
        font-size: 12px;
        font-weight: 650;
        text-decoration: none;
    }

    .gstr-filing-action-list a:hover {
        border-color: var(--ui-brand-border);
        color: var(--ui-brand-strong);
        background: var(--ui-brand-tint);
    }

    .gstr-filing-action-list .gstr-filing-primary {
        border-color: var(--ui-brand);
        color: #fff;
        background: var(--ui-brand);
    }

    .gstr-filing-action-list .gstr-filing-primary:hover {
        border-color: var(--ui-brand-strong);
        color: #fff;
        background: var(--ui-brand-strong);
    }

    .gstr1-check-grid .issue-cell {
        min-width: 260px;
        max-width: 360px;
        color: var(--ui-text);
        white-space: normal;
    }

    .contra-import-form :is(input, select, button) {
        min-height: 44px;
    }
}

@media screen and (max-width: 767px) {
    body.desktop-body .statement-toolbar {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    body.desktop-body .statement-toolbar > :is(button, a) {
        width: 100%;
        min-width: 0;
        justify-content: center;
    }

    body.desktop-body .mobile-statement-preview-toggle {
        display: inline-flex;
    }

    body.desktop-body .statement-wrap[data-ui-statement-preview="true"]
        :is(.statement-page, .statement-print-area) {
        max-width: none;
    }

    body.desktop-body .statement-wrap[data-ui-statement-preview="true"]
        .statement-page {
        width: 760px;
    }

    body.desktop-body .statement-wrap[data-ui-statement-preview="true"][data-mobile-preview="closed"] {
        display: none;
    }

    body.desktop-body .statement-wrap[data-ui-statement-preview="true"][data-mobile-preview="open"] {
        display: block;
        max-height: 70vh !important;
        overflow: auto !important;
        overscroll-behavior: contain !important;
        scrollbar-gutter: stable;
        touch-action: pan-x pan-y !important;
    }

    body.desktop-body .work-panel .data-grid-wrap:has(> table.ui-mobile-report-grid) {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        border: 0;
        background: transparent;
        scrollbar-gutter: auto;
    }

    body.desktop-body table.data-grid.ui-mobile-report-grid {
        width: 100% !important;
        min-width: 0 !important;
        display: block;
        border: 0;
        background: transparent;
    }

    table.data-grid.ui-mobile-report-grid thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }

    table.data-grid.ui-mobile-report-grid tbody {
        display: grid;
        gap: 10px;
    }

    table.data-grid.ui-mobile-report-grid tbody tr {
        position: relative;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 10px;
        border: 1px solid var(--ui-border);
        border-radius: var(--ui-radius-lg);
        background: var(--ui-surface);
        padding: 14px 12px;
        box-shadow: var(--ui-shadow-sm);
    }

    table.data-grid.ui-mobile-report-grid tbody td {
        min-width: 0;
        display: none;
        position: static !important;
        align-content: start;
        gap: 4px;
        border: 0 !important;
        box-shadow: none !important;
        color: var(--ui-text);
        background: transparent !important;
        padding: 0 !important;
        text-align: left !important;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    table.data-grid.ui-mobile-report-grid tbody td a {
        width: auto;
        justify-self: start;
        text-align: left;
    }

    table.data-grid.ui-mobile-report-grid tbody td[data-mobile-report-field="primary"],
    table.data-grid.ui-mobile-report-grid tbody tr[data-mobile-expanded="true"]
        td[data-mobile-report-field="secondary"] {
        display: grid;
    }

    table.data-grid.ui-mobile-report-grid tbody td::before {
        min-height: 15px;
        color: var(--ui-text-muted);
        content: attr(data-mobile-label);
        font-size: 10px;
        font-weight: 750;
        line-height: 1.2;
    }

    table.data-grid.ui-mobile-report-grid tbody td:is(
        [data-mobile-label="Issue"],
        [data-mobile-label="Customer"],
        [data-mobile-label="Supplier"],
        [data-mobile-label="Item"],
        [data-mobile-label="Item Name"],
        [data-mobile-label="Description"],
        [data-mobile-label="Sales No"],
        [data-mobile-label="Purchase No"],
        [data-mobile-label="Return No"]) {
        grid-column: 1 / -1;
    }

    table.data-grid.ui-mobile-report-grid tbody td.mobile-report-toggle-host {
        padding-right: 50px !important;
    }

    .mobile-report-row-toggle {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 44px;
        min-width: 44px;
        min-height: 44px;
        display: grid;
        place-items: center;
        border: 0;
        border-radius: var(--ui-radius-md);
        color: var(--ui-brand);
        background: var(--ui-brand-tint);
        padding: 0;
    }

    .mobile-report-row-toggle svg {
        width: 16px;
        height: 16px;
        transition: transform var(--ui-motion-fast) var(--ui-motion-ease);
    }

    .data-grid-wrap:has(> table.ui-mobile-report-grid) + .mobile-x-scrollbar {
        display: none !important;
    }

    .gstr-filing-actions {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
        padding: 12px 0;
    }

    .gstr-filing-action-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-content: stretch;
    }

    .gstr-filing-action-list a {
        width: 100%;
        min-height: 44px;
        padding-inline: 8px;
        text-align: center;
    }

    body.desktop-body .entry-panel .data-grid-wrap:has(> :is(.receipt-voucher-line-grid,
        .payment-voucher-line-grid, .journal-line-grid, .supplier-payment-bill-grid)) {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        border: 0;
        background: transparent;
    }

    :is(.receipt-voucher-line-grid, .payment-voucher-line-grid,
        .journal-line-grid, .supplier-payment-bill-grid) {
        width: 100%;
        min-width: 0 !important;
        display: block;
        border: 0;
        background: transparent;
    }

    :is(.receipt-voucher-line-grid, .payment-voucher-line-grid,
        .journal-line-grid, .supplier-payment-bill-grid) thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }

    :is(.receipt-voucher-line-grid, .payment-voucher-line-grid,
        .journal-line-grid, .supplier-payment-bill-grid) tbody {
        display: grid;
        gap: 10px;
    }

    :is(.receipt-voucher-line-grid, .payment-voucher-line-grid,
        .journal-line-grid, .supplier-payment-bill-grid) tbody tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 10px;
        border: 1px solid var(--ui-border);
        border-radius: var(--ui-radius-lg);
        background: var(--ui-surface);
        padding: 12px;
        box-shadow: var(--ui-shadow-sm);
    }

    :is(.receipt-voucher-line-grid, .payment-voucher-line-grid,
        .journal-line-grid, .supplier-payment-bill-grid) tbody td {
        min-width: 0;
        display: grid;
        align-content: end;
        gap: 5px;
        border: 0 !important;
        background: transparent !important;
        padding: 0 !important;
        white-space: normal;
    }

    :is(.receipt-voucher-line-grid, .payment-voucher-line-grid,
        .journal-line-grid, .supplier-payment-bill-grid) tbody td::before {
        min-height: 16px;
        color: var(--ui-text-muted);
        content: attr(data-mobile-label);
        font-size: 11px;
        font-weight: 700;
        line-height: 1.25;
    }

    :is(.receipt-voucher-line-grid, .payment-voucher-line-grid,
        .journal-line-grid, .supplier-payment-bill-grid) tbody td:first-child,
    :is(.receipt-voucher-line-grid, .payment-voucher-line-grid,
        .journal-line-grid, .supplier-payment-bill-grid) tbody td:nth-child(2),
    :is(.receipt-voucher-line-grid, .payment-voucher-line-grid,
        .journal-line-grid, .supplier-payment-bill-grid) tbody td:last-child {
        grid-column: 1 / -1;
    }

    :is(.receipt-voucher-line-grid, .payment-voucher-line-grid,
        .journal-line-grid, .supplier-payment-bill-grid) tbody td:first-child {
        display: flex;
        align-items: center;
        gap: 6px;
        color: var(--ui-text-strong);
        font-weight: 700;
    }

    :is(.receipt-voucher-line-grid, .payment-voucher-line-grid,
        .journal-line-grid, .supplier-payment-bill-grid) tbody td:first-child::before {
        content: "Line";
    }

    :is(.receipt-voucher-line-grid, .payment-voucher-line-grid,
        .journal-line-grid, .supplier-payment-bill-grid) :is(input:not([type="hidden"]), select, textarea) {
        width: 100%;
        min-height: 44px;
    }
}

/* Precision pass: report context, transaction rows, and compact mobile work surfaces. */
@media screen {
    .report-filter-panel ~ .status-band.ok {
        border-color: var(--ui-accent-border);
        color: var(--ui-text);
        background: var(--ui-accent-tint);
    }

    .report-filter-panel ~ .status-band {
        padding-left: 34px;
    }

    .report-filter-panel ~ .status-band.ok::before {
        background: var(--ui-accent);
        box-shadow: 0 0 0 4px rgb(51 91 200 / 10%);
    }

    .sales-entry-item-grid tbody td.line-action-cluster,
    .purchase-entry-item-grid tbody td.line-action-cluster {
        display: flex;
        align-items: flex-end;
        justify-content: flex-start;
        gap: 5px;
    }

    .sales-entry-item-grid tbody td.line-action-cluster::before,
    .purchase-entry-item-grid tbody td.line-action-cluster::before {
        display: none;
    }

    .line-action-cluster .mobile-line-toggle {
        width: 34px;
        min-width: 34px;
        min-height: 34px;
        justify-content: center;
        padding: 0;
    }

    .line-action-cluster .mobile-line-toggle span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
}

@media screen and (min-width: 1100px) {
    .sales-entry-item-grid tbody tr:not(.transaction-empty-row),
    .purchase-entry-item-grid tbody tr:not(.transaction-empty-row) {
        grid-template-columns:
            78px 30px 64px minmax(150px, 1fr) 76px 92px
            116px 78px 98px 82px 104px;
        gap: 8px;
    }

    .sales-entry-item-grid tbody td[data-mobile-label],
    .purchase-entry-item-grid tbody td[data-mobile-label] {
        grid-column: span 1;
    }

    .sales-entry-item-grid tbody td[data-mobile-label="Item Name"],
    .purchase-entry-item-grid tbody td[data-mobile-label="Item Name"],
    .sales-entry-item-grid tbody td[data-mobile-label="Description"],
    .purchase-entry-item-grid tbody td[data-mobile-label="Description"] {
        grid-column: span 1;
    }

    .sales-entry-item-grid tbody td::before,
    .purchase-entry-item-grid tbody td::before {
        font-size: 10px;
    }

    .sales-entry-item-grid tbody tr[data-mobile-expanded="true"] td[data-mobile-field="advanced"],
    .purchase-entry-item-grid tbody tr[data-mobile-expanded="true"] td[data-mobile-field="advanced"] {
        grid-column: span 2;
    }

    .sales-entry-item-grid tbody tr[data-mobile-expanded="true"] td[data-mobile-wide="true"],
    .purchase-entry-item-grid tbody tr[data-mobile-expanded="true"] td[data-mobile-wide="true"] {
        grid-column: span 4;
    }
}

@media screen and (max-width: 767px) {
    body.desktop-body .module-head .module-actions {
        position: fixed !important;
        z-index: var(--ui-z-sticky);
        inset: auto 0 0 !important;
        width: 100vw !important;
        max-width: none !important;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        border: 0;
        border-top: 1px solid var(--ui-border);
        border-radius: 0 !important;
        background: rgb(255 255 255 / 98%);
        margin: 0 !important;
        padding: 8px 12px max(8px, env(safe-area-inset-bottom));
        box-shadow: 0 -12px 30px rgb(17 27 25 / 9%);
        backdrop-filter: blur(16px);
    }

    body.desktop-body .module-head .module-actions > * {
        width: 100%;
        min-width: 0;
        min-height: 44px;
    }

    body.desktop-body .module-head .module-actions:has(> :nth-child(3)) {
        grid-template-columns: 1.15fr 1fr 1fr;
    }

    body.desktop-body .module-head .module-actions .ui-action-menu-content,
    body.desktop-body .module-head .module-actions .reports-menu-content {
        inset: auto 12px calc(64px + env(safe-area-inset-bottom)) 12px !important;
    }

    .dashboard-hero {
        position: relative;
        gap: 8px;
        padding-right: 54px;
    }

    .dashboard-hero h1 {
        font-size: 24px;
    }

    .dashboard-session {
        display: flex;
        flex-wrap: wrap;
        gap: 3px 10px;
        margin-top: 5px;
        font-size: 11px;
    }

    .dashboard-session span + span::before {
        display: inline;
        content: "/";
    }

    .dashboard-hero-actions {
        position: absolute;
        top: 0;
        right: 0;
    }

    .dashboard-hero-actions .btn-line {
        width: 44px;
        min-width: 44px;
        min-height: 44px;
        overflow: hidden;
        gap: 0;
        padding: 0;
        font-size: 0;
    }

    .dashboard-hero-actions .btn-line svg {
        width: 18px;
        height: 18px;
    }
}

@media screen and (max-width: 1099px) {
    .line-action-cluster .line-remove-action,
    .line-action-cluster .mobile-line-toggle {
        flex: 1 1 0;
        width: auto;
        min-width: 44px;
        min-height: 44px;
        padding: 0 12px;
    }

    .line-action-cluster .line-remove-action {
        gap: 7px;
        font-size: 12px !important;
        padding: 0 12px !important;
    }

    .line-action-cluster .mobile-line-toggle span {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
        white-space: normal;
    }
}