:root {
    --st-safe-top: env(safe-area-inset-top, 0px);
    --st-safe-right: env(safe-area-inset-right, 0px);
    --st-safe-bottom: env(safe-area-inset-bottom, 0px);
    --st-safe-left: env(safe-area-inset-left, 0px);

    --st-touch: 44px;
    --st-radius: 12px;
    --st-radius-lg: 16px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    width: 100%;
    min-width: 0;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    width: 100%;
    min-width: 0;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body,
main,
section,
article,
aside,
header,
footer,
nav,
div,
form,
fieldset {
    min-width: 0;
}

img,
svg,
video,
canvas,
iframe {
    max-width: 100%;
}

img,
video {
    height: auto;
}

button,
input,
select,
textarea {
    font: inherit;
}

button,
input[type="button"],
input[type="submit"],
input[type="reset"],
select,
.btn,
[role="button"] {
    min-height: var(--st-touch);
}

button,
a,
.btn,
[role="button"] {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

input,
select,
textarea {
    max-width: 100%;
}

textarea {
    resize: vertical;
}

.tenant-main,
.tenant-content,
.platform-main,
.platform-content,
.app-main,
.app-content,
.page-content,
.container,
.container-fluid,
.card,
.panel,
.box {
    min-width: 0;
    max-width: 100%;
}

p,
li,
td,
th,
dd,
dt,
span,
strong,
small,
code {
    overflow-wrap: anywhere;
}

pre {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table {
    max-width: 100%;
}

.st-table-scroll {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.st-table-scroll > table {
    margin-bottom: 0;
}

:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 2px;
}

dialog,
.modal,
.modal-dialog,
.drawer,
.sheet,
.offcanvas {
    max-width: calc(
        100vw
        - var(--st-safe-left)
        - var(--st-safe-right)
        - 24px
    );

    max-height: calc(
        100dvh
        - var(--st-safe-top)
        - var(--st-safe-bottom)
        - 24px
    );
}

[hidden] {
    display: none !important;
}

/* TABLET */
@media screen and (max-width: 1024px) {

    body {
        padding-left: var(--st-safe-left);
        padding-right: var(--st-safe-right);
    }

    input,
    select,
    textarea {
        font-size: 16px !important;
    }

    .actions,
    .action-row,
    .page-actions,
    .toolbar,
    .button-row,
    .btn-row {
        flex-wrap: wrap;
        max-width: 100%;
    }

    [style*="min-width"] {
        max-width: 100%;
    }
}

/* PHONE */
@media screen and (max-width: 760px) {

    table {
        font-size: 14px;
    }

    th,
    td {
        padding-left: 10px;
        padding-right: 10px;
    }

    h1 {
        font-size: clamp(1.45rem, 7vw, 2rem);
        line-height: 1.15;
    }

    h2 {
        font-size: clamp(1.2rem, 5.5vw, 1.6rem);
        line-height: 1.2;
    }

    h3 {
        font-size: clamp(1.05rem, 4.8vw, 1.35rem);
    }

    .actions,
    .action-row,
    .page-actions,
    .toolbar,
    .button-row,
    .btn-row {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .modal,
    .modal-dialog,
    .drawer,
    .sheet,
    .offcanvas {
        width: calc(
            100vw
            - var(--st-safe-left)
            - var(--st-safe-right)
            - 16px
        );
    }
}

/* SMALL PHONE */
@media screen and (max-width: 480px) {

    main,
    .tenant-content,
    .platform-content,
    .app-content,
    .page-content {
        padding-left: max(
            12px,
            var(--st-safe-left)
        );

        padding-right: max(
            12px,
            var(--st-safe-right)
        );
    }
}

/* iPHONE / ANDROID SAFE AREAS */
@supports (
    padding-bottom:
        env(safe-area-inset-bottom)
) {
    body {
        padding-bottom:
            var(--st-safe-bottom);
    }

    .tenant-sidebar,
    .sidebar,
    .drawer,
    .offcanvas {
        padding-bottom:
            max(
                12px,
                var(--st-safe-bottom)
            );
    }
}

/* ACCESSIBILITY */
@media (
    prefers-reduced-motion:
    reduce
) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* PRINTING */
@media print {
    body {
        overflow: visible !important;
        padding: 0 !important;
    }

    .st-table-scroll {
        overflow: visible !important;
    }
}

/* ==========================================================
   SCORESTECH TENANT APPLICATION SHELL
   ========================================================== */

.tenant-body {
    min-height: 100vh;
    min-height: 100dvh;
}

.tenant-app {
    min-height: 100vh;
    min-height: 100dvh;
}

.tenant-main {
    min-width: 0;
}

.tenant-content {
    min-width: 0;
}

.tenant-topbar {
    min-width: 0;
}

.tenant-topbar-left,
.tenant-topbar-right {
    min-width: 0;
}

.tenant-page-title,
.tenant-page-subtitle,
.tenant-user-name,
.tenant-user-email {
    overflow: hidden;
    text-overflow: ellipsis;
}

.tenant-mobile-toggle,
.tenant-sidebar-close,
.tenant-notification-button,
.tenant-topbar-btn {
    min-width: 44px;
    min-height: 44px;
}

.tenant-overlay {
    position: fixed;
    inset: 0;
    z-index: 1290;
    background:
        rgba(
            15,
            23,
            42,
            0.52
        );
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 180ms ease,
        visibility 180ms ease;
}

.tenant-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

body.tenant-sidebar-open {
    overflow: hidden;
    overscroll-behavior: none;
}

/* TABLET + MOBILE APPLICATION SHELL */
@media screen and (max-width: 1024px) {

    .tenant-app {
        display: block !important;
        width: 100%;
    }

    .tenant-main {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
    }

    .tenant-sidebar {
        position: fixed !important;

        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;

        width:
            min(
                88vw,
                350px
            ) !important;

        max-width:
            calc(
                100vw
                - 36px
            ) !important;

        height: 100vh !important;
        height: 100dvh !important;

        z-index: 1300 !important;

        transform:
            translate3d(
                -105%,
                0,
                0
            ) !important;

        transition:
            transform
            200ms
            ease !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        overscroll-behavior:
            contain;

        -webkit-overflow-scrolling:
            touch;

        padding-top:
            max(
                0px,
                var(--st-safe-top)
            );

        padding-bottom:
            max(
                14px,
                var(--st-safe-bottom)
            );

        box-shadow:
            20px 0 50px
            rgba(
                15,
                23,
                42,
                0.28
            );
    }

    .tenant-sidebar.is-open {
        transform:
            translate3d(
                0,
                0,
                0
            ) !important;
    }

    .tenant-topbar {
        position: sticky !important;
        top: 0 !important;
        z-index: 1200 !important;

        min-height:
            calc(
                64px
                + var(--st-safe-top)
            );

        padding-top:
            max(
                10px,
                var(--st-safe-top)
            ) !important;

        padding-left:
            max(
                14px,
                var(--st-safe-left)
            ) !important;

        padding-right:
            max(
                14px,
                var(--st-safe-right)
            ) !important;

        display: flex !important;
        align-items: center !important;
        justify-content:
            space-between !important;

        gap: 10px !important;

        backdrop-filter:
            blur(14px);

        -webkit-backdrop-filter:
            blur(14px);
    }

    .tenant-topbar-left {
        display: flex !important;
        align-items: center !important;

        flex:
            1 1 auto;

        min-width: 0;

        gap: 10px !important;
    }

    .tenant-topbar-right {
        display: flex !important;
        align-items: center !important;

        flex:
            0 0 auto;

        gap: 6px !important;
    }

    .tenant-mobile-toggle {
        display:
            inline-flex !important;

        align-items: center;
        justify-content: center;

        flex:
            0 0 44px;

        border-radius: 12px;
    }

    .tenant-page-title {
        max-width:
            min(
                55vw,
                460px
            );

        margin:
            0 !important;

        white-space:
            nowrap;
    }

    .tenant-page-subtitle {
        max-width:
            min(
                55vw,
                460px
            );

        margin-top:
            2px !important;

        white-space:
            nowrap;
    }

    .tenant-content {
        width: 100%;
        max-width: 100%;

        padding-left:
            max(
                16px,
                var(--st-safe-left)
            ) !important;

        padding-right:
            max(
                16px,
                var(--st-safe-right)
            ) !important;

        padding-bottom:
            max(
                24px,
                calc(
                    var(--st-safe-bottom)
                    + 14px
                )
            ) !important;
    }

    .tenant-notification-menu {
        position:
            fixed !important;

        top:
            calc(
                68px
                + var(--st-safe-top)
            ) !important;

        right:
            max(
                12px,
                var(--st-safe-right)
            ) !important;

        left:
            auto !important;

        width:
            min(
                390px,
                calc(
                    100vw
                    - 24px
                    - var(--st-safe-left)
                    - var(--st-safe-right)
                )
            ) !important;

        max-height:
            min(
                68vh,
                520px
            );

        overflow-y:
            auto;

        z-index:
            1400 !important;
    }

    .tenant-notification-item {
        min-height: 54px;
    }
}

/* PHONE */
@media screen and (max-width: 760px) {

    .tenant-topbar {
        min-height:
            calc(
                60px
                + var(--st-safe-top)
            );
    }

    .tenant-page-title {
        max-width: 48vw;

        font-size:
            clamp(
                1.05rem,
                4.9vw,
                1.35rem
            ) !important;
    }

    .tenant-page-subtitle {
        display: none !important;
    }

    .tenant-user-card,
    .tenant-user-email,
    .tenant-topbar-plan {
        display: none !important;
    }

    .tenant-topbar-right {
        gap: 5px !important;
    }

    .tenant-topbar-upgrade {
        min-height: 44px;
        display:
            inline-flex;
        align-items:
            center;
        justify-content:
            center;
    }

    .tenant-topbar-btn {
        min-height: 44px;
    }

    .tenant-content {
        padding-top:
            14px !important;

        padding-left:
            max(
                12px,
                var(--st-safe-left)
            ) !important;

        padding-right:
            max(
                12px,
                var(--st-safe-right)
            ) !important;
    }
}

/* SMALL PHONE */
@media screen and (max-width: 520px) {

    .tenant-sidebar {
        width:
            min(
                92vw,
                340px
            ) !important;

        max-width:
            calc(
                100vw
                - 24px
            ) !important;
    }

    .tenant-page-title {
        max-width: 44vw;
    }

    .tenant-topbar-upgrade {
        display: none !important;
    }

    .tenant-logout-form
    .tenant-topbar-btn {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

/* VERY SMALL PHONE */
@media screen and (max-width: 390px) {

    .tenant-page-title {
        max-width: 40vw;
    }

    .tenant-topbar {
        padding-left:
            max(
                8px,
                var(--st-safe-left)
            ) !important;

        padding-right:
            max(
                8px,
                var(--st-safe-right)
            ) !important;

        gap: 6px !important;
    }

    .tenant-content {
        padding-left:
            max(
                10px,
                var(--st-safe-left)
            ) !important;

        padding-right:
            max(
                10px,
                var(--st-safe-right)
            ) !important;
    }
}

/* LANDSCAPE PHONE */
@media screen
and (max-height: 520px)
and (orientation: landscape)
and (max-width: 950px) {

    .tenant-sidebar {
        width:
            min(
                48vw,
                350px
            ) !important;
    }

    .tenant-topbar {
        min-height:
            calc(
                52px
                + var(--st-safe-top)
            );
    }

    .tenant-content {
        padding-top:
            10px !important;
    }
}

/* ==========================================================
   SCORESTECH POS MOBILE HARDENING
   ========================================================== */

#pos-sale-workbench {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

#pos-sale-workbench *,
#pos-sale-workbench *::before,
#pos-sale-workbench *::after {
    box-sizing: border-box;
}

#pos-sale-workbench input,
#pos-sale-workbench select,
#pos-sale-workbench textarea,
#pos-sale-workbench button {
    max-width: 100%;
}

#pos-sale-workbench input,
#pos-sale-workbench select,
#pos-sale-workbench textarea {
    min-height: 44px;
}

#pos-sale-workbench button,
#pos-sale-workbench .btn,
#pos-sale-workbench [role="button"] {
    min-height: 44px;
    touch-action: manipulation;
}

#pos-sale-workbench .form-row,
#pos-sale-workbench .card,
#pos-sale-workbench .panel,
#pos-sale-workbench .box,
#pos-sale-workbench .pos-summary-box,
#pos-sale-workbench .fast-payment-fields,
#pos-sale-workbench .customer-change-panel {
    min-width: 0;
    max-width: 100%;
}

/* Product/customer result lists */
#pos-sale-workbench [class*="suggest"],
#pos-sale-workbench [class*="autocomplete"],
#pos-sale-workbench [class*="search-results"] {
    max-width: 100%;
}

#pos-sale-workbench [class*="suggest"] button,
#pos-sale-workbench [class*="suggest"] a,
#pos-sale-workbench [class*="result"] button,
#pos-sale-workbench [class*="result"] a {
    min-height: 48px;
}

/* Cart */
#pos-sale-workbench .pos-cart-table-wrap,
#pos-sale-workbench .table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

#pos-sale-workbench #sale-lines-table {
    width: 100%;
}

#pos-sale-workbench #sale-lines-table input,
#pos-sale-workbench #sale-lines-table select {
    min-width: 70px;
}

/* Payment mode tabs */
#pos-sale-workbench .flex-pay-mode-tabs {
    width: 100%;
    max-width: 100%;
}

#pos-sale-workbench .flex-pay-mode-btn {
    min-height: 46px;
}

/* Payment methods */
#pos-sale-workbench .fast-payment-method {
    min-height: 46px;
    min-width: 88px;
}

/* Split-payment controls */
#pos-sale-workbench .flex-payment-row,
#pos-sale-workbench .flex-payment-row-detail,
#pos-sale-workbench .flex-single-amount-grid,
#pos-sale-workbench .flex-change-mini,
#pos-sale-workbench .customer-change-grid {
    min-width: 0;
    max-width: 100%;
}

/* Totals stay readable */
#pos-sale-workbench [id*="total"],
#pos-sale-workbench [class*="total"] {
    font-variant-numeric: tabular-nums;
}

/* ==========================================================
   TABLET POS
   ========================================================== */

@media screen and (max-width: 1024px) {

    #pos-sale-workbench {
        border-radius: 14px;
    }

    #pos-sale-workbench input,
    #pos-sale-workbench select,
    #pos-sale-workbench textarea {
        font-size: 16px !important;
    }

    #pos-sale-workbench .flex-payment-row {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;
    }

    #pos-sale-workbench
    .flex-payment-row-detail {
        grid-column: 1 / -1;
    }

    #pos-sale-workbench
    .flex-payment-row-remove {
        min-height: 44px;
    }
}

/* ==========================================================
   PHONE POS
   ========================================================== */

@media screen and (max-width: 760px) {

    #pos-sale-workbench {
        margin: 0;
        padding-left: 0;
        padding-right: 0;
        box-shadow: none;
    }

    #pos-sale-workbench .card,
    #pos-sale-workbench .panel,
    #pos-sale-workbench .box {
        border-radius: 12px;
    }

    /* Customer */
    #customer_suggest_input,
    #customer_phone_snapshot,
    #customer_name_snapshot,
    #stock_suggest_input {
        min-height: 50px !important;
        font-size: 16px !important;
    }

    /* Payment modes: 3 equal touch buttons */
    #pos-sale-workbench
    .flex-pay-mode-tabs {
        display: grid !important;

        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            ) !important;

        gap: 6px !important;
    }

    #pos-sale-workbench
    .flex-pay-mode-btn {
        width: 100%;
        padding:
            8px 6px !important;

        font-size:
            13px !important;

        white-space:
            normal;
    }

    /* Payment method buttons */
    #pos-sale-workbench
    [class*="payment-methods"],
    #pos-sale-workbench
    .fast-payment-methods {
        display: grid !important;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;

        gap: 8px !important;
    }

    #pos-sale-workbench
    .fast-payment-method {
        width: 100%;
        min-width: 0;
        min-height: 48px;
    }

    /* Amount / cash / phone / reference */
    #pos-sale-workbench
    .flex-single-amount-grid,
    #pos-sale-workbench
    .fast-payment-fields,
    #pos-sale-workbench
    .flex-payment-row,
    #pos-sale-workbench
    .flex-payment-row-detail,
    #pos-sale-workbench
    .customer-change-grid,
    #pos-sale-workbench
    .flex-change-mini {
        grid-template-columns:
            1fr !important;
    }

    #pos-sale-workbench
    .flex-payment-row {
        padding: 10px !important;
        gap: 8px !important;
    }

    #pos-sale-workbench
    .flex-payment-row-remove {
        width: 100% !important;
        min-height: 46px;
    }

    /* Cart becomes safe horizontal area rather than whole-page overflow */
    #pos-sale-workbench
    .pos-cart-table-wrap,
    #pos-sale-workbench
    .table-wrap {
        margin-left: 0;
        margin-right: 0;
        border-radius: 10px;

        scrollbar-width:
            thin;
    }

    #pos-sale-workbench
    #sale-lines-table {
        min-width:
            720px;
    }

    #pos-sale-workbench
    #sale-lines-table th,
    #pos-sale-workbench
    #sale-lines-table td {
        padding:
            8px 7px;
    }

    #pos-sale-workbench
    #sale-lines-table button {
        min-height: 40px;
    }

    /* Make action rows touch-friendly */
    #pos-sale-workbench
    .btn-row,
    #pos-sale-workbench
    .action-row,
    #pos-sale-workbench
    .actions {
        display: grid !important;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap: 8px;
    }

    #pos-sale-workbench
    .btn-row > *,
    #pos-sale-workbench
    .action-row > *,
    #pos-sale-workbench
    .actions > * {
        width: 100%;
        min-width: 0;
    }

    /* Help text should not consume huge amounts of screen */
    #pos-sale-workbench
    .form-help,
    #pos-sale-workbench
    .flex-pay-help {
        font-size: 12px;
        line-height: 1.4;
    }

    /* Drawers / sheets / dialogs */
    #pos-sale-workbench
    .drawer,
    #pos-sale-workbench
    .sheet,
    #pos-sale-workbench
    .modal,
    #pos-sale-workbench
    [class*="drawer"],
    #pos-sale-workbench
    [class*="sheet"] {
        width:
            calc(
                100vw
                - 12px
                - var(--st-safe-left)
                - var(--st-safe-right)
            ) !important;

        max-width:
            100% !important;

        max-height:
            calc(
                100dvh
                - var(--st-safe-top)
                - var(--st-safe-bottom)
                - 12px
            ) !important;
    }
}

/* ==========================================================
   SMALL PHONE POS
   ========================================================== */

@media screen and (max-width: 480px) {

    #pos-sale-workbench
    .flex-pay-mode-tabs {
        grid-template-columns:
            1fr 1fr 1fr !important;
    }

    #pos-sale-workbench
    [class*="payment-methods"],
    #pos-sale-workbench
    .fast-payment-methods {
        grid-template-columns:
            1fr 1fr !important;
    }

    #pos-sale-workbench
    .btn-row,
    #pos-sale-workbench
    .action-row,
    #pos-sale-workbench
    .actions {
        grid-template-columns:
            1fr !important;
    }

    #pos-sale-workbench
    input[type="number"],
    #pos-sale-workbench
    input[inputmode="decimal"],
    #pos-sale-workbench
    input[inputmode="numeric"] {
        font-size: 17px !important;
    }
}

/* ==========================================================
   VERY SMALL PHONE
   ========================================================== */

@media screen and (max-width: 390px) {

    #pos-sale-workbench
    .flex-pay-mode-btn {
        font-size:
            12px !important;

        padding:
            8px 4px !important;
    }

    #pos-sale-workbench
    .fast-payment-method {
        font-size:
            13px !important;
    }
}

/* ==========================================================
   PHONE LANDSCAPE
   ========================================================== */

@media screen
and (max-height: 540px)
and (orientation: landscape)
and (max-width: 950px) {

    #pos-sale-workbench
    .fast-payment-fields,
    #pos-sale-workbench
    .flex-single-amount-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;
    }
}

/* ==========================================================
   SCORESTECH BUSINESS MODULE RESPONSIVE LAYER
   Inventory / Accounting / HR / CRM / Purchases /
   Transfers / Delivery / Reports
   ========================================================== */

.st-business-module {
    min-width: 0;
}

.st-business-module
:is(
    .card,
    .panel,
    .box,
    .widget,
    .summary-card,
    .stat-card,
    .metric-card
) {
    min-width: 0;
    max-width: 100%;
}

.st-business-module
:is(
    .grid,
    .card-grid,
    .stats-grid,
    .stat-grid,
    .metrics-grid,
    .metric-grid,
    .summary-grid,
    .dashboard-grid
) {
    min-width: 0;
    max-width: 100%;
}

/* Filters and action areas */
.st-business-module
:is(
    .filters,
    .filter-row,
    .filter-bar,
    .toolbar,
    .page-toolbar,
    .page-actions,
    .actions,
    .action-row
) {
    max-width: 100%;
    min-width: 0;
}

.st-business-module
:is(
    .filters,
    .filter-row,
    .filter-bar,
    .toolbar,
    .page-toolbar
)
input,
.st-business-module
:is(
    .filters,
    .filter-row,
    .filter-bar,
    .toolbar,
    .page-toolbar
)
select {
    max-width: 100%;
}

/* Dense business tables */
.st-business-module
:is(
    .table-wrap,
    .table-responsive,
    .st-table-scroll
) {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.st-business-module table {
    border-collapse: collapse;
}

.st-business-module
table
:is(
    button,
    a.btn,
    [role="button"]
) {
    min-height: 40px;
}

/* Forms */
.st-business-module
:is(
    .form-grid,
    .fields-grid,
    .field-grid,
    .edit-grid,
    .input-grid
) {
    min-width: 0;
    max-width: 100%;
}

.st-business-module
:is(
    input,
    select,
    textarea
) {
    max-width: 100%;
}

/* ==========================================================
   TABLET
   ========================================================== */

@media screen and (max-width: 1024px) {

    .st-business-module
    :is(
        .card-grid,
        .stats-grid,
        .stat-grid,
        .metrics-grid,
        .metric-grid,
        .summary-grid,
        .dashboard-grid
    ) {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;

        gap: 12px !important;
    }

    .st-business-module
    :is(
        .form-grid,
        .fields-grid,
        .field-grid,
        .edit-grid,
        .input-grid
    ) {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;

        gap: 12px !important;
    }

    .st-business-module
    :is(
        .filters,
        .filter-row,
        .filter-bar,
        .toolbar,
        .page-toolbar
    ) {
        display: flex;
        flex-wrap: wrap;
        align-items: end;
        gap: 10px;
    }

    .st-business-module
    :is(
        .actions,
        .action-row,
        .page-actions
    ) {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .st-business-module
    :is(
        input,
        select,
        textarea
    ) {
        font-size: 16px !important;
    }
}

/* ==========================================================
   PHONE
   ========================================================== */

@media screen and (max-width: 760px) {

    .st-business-module
    :is(
        .card-grid,
        .stats-grid,
        .stat-grid,
        .metrics-grid,
        .metric-grid,
        .summary-grid,
        .dashboard-grid,
        .form-grid,
        .fields-grid,
        .field-grid,
        .edit-grid,
        .input-grid
    ) {
        grid-template-columns:
            1fr !important;

        gap: 10px !important;
    }

    .st-business-module
    :is(
        .filters,
        .filter-row,
        .filter-bar,
        .toolbar,
        .page-toolbar
    ) {
        display: grid !important;

        grid-template-columns:
            1fr !important;

        width: 100%;
        gap: 8px !important;
    }

    .st-business-module
    :is(
        .filters,
        .filter-row,
        .filter-bar,
        .toolbar,
        .page-toolbar
    )
    > * {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .st-business-module
    :is(
        .filters,
        .filter-row,
        .filter-bar,
        .toolbar,
        .page-toolbar
    )
    :is(
        input,
        select,
        button,
        .btn
    ) {
        width: 100%;
        min-height: 46px;
    }

    .st-business-module
    :is(
        .actions,
        .action-row,
        .page-actions
    ) {
        display: grid !important;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap: 8px !important;
    }

    .st-business-module
    :is(
        .actions,
        .action-row,
        .page-actions
    )
    > * {
        min-width: 0;
        max-width: 100%;
    }

    .st-business-module
    :is(
        .actions,
        .action-row,
        .page-actions
    )
    :is(
        button,
        .btn,
        a
    ) {
        width: 100%;
        min-height: 46px;
    }

    /*
     * Keep dense data readable.
     * Horizontal scrolling is contained inside the table wrapper,
     * never across the whole application.
     */
    .st-business-module
    .st-table-scroll
    table {
        min-width: 700px;
    }

    .st-module-reports
    .st-table-scroll
    table,

    .st-module-accounting
    .st-table-scroll
    table {
        min-width: 760px;
    }

    .st-module-inventory
    .st-table-scroll
    table,

    .st-module-transfers
    .st-table-scroll
    table {
        min-width: 720px;
    }

    .st-business-module
    table th,

    .st-business-module
    table td {
        padding:
            9px 8px;
        vertical-align: top;
    }

    .st-business-module
    table
    :is(
        input,
        select
    ) {
        min-height: 40px;
        min-width: 80px;
    }

    /* KPI cards */
    .st-business-module
    :is(
        .stat-card,
        .metric-card,
        .summary-card
    ) {
        padding: 14px !important;
    }

    /* Long descriptions / names */
    .st-business-module
    :is(
        td,
        .card,
        .panel
    ) {
        overflow-wrap: anywhere;
    }
}

/* ==========================================================
   SMALL PHONE
   ========================================================== */

@media screen and (max-width: 480px) {

    .st-business-module
    :is(
        .actions,
        .action-row,
        .page-actions
    ) {
        grid-template-columns:
            1fr !important;
    }

    .st-business-module
    :is(
        .card,
        .panel,
        .box,
        .stat-card,
        .metric-card,
        .summary-card
    ) {
        border-radius:
            10px !important;
    }

    .st-business-module
    .st-table-scroll
    table {
        font-size: 13px;
    }
}

/* ==========================================================
   MODULE-SPECIFIC TUNING
   ========================================================== */

/* Inventory */
.st-module-inventory
:is(
    .stock-grid,
    .inventory-grid,
    .product-grid
) {
    min-width: 0;
}

/* Accounting */
.st-module-accounting
:is(
    .finance-grid,
    .accounting-grid,
    .totals-grid
) {
    min-width: 0;
}

/* HR */
.st-module-hr
:is(
    .employee-grid,
    .payroll-grid,
    .attendance-grid
) {
    min-width: 0;
}

/* CRM */
.st-module-crm
:is(
    .customer-grid,
    .lead-grid,
    .crm-grid
) {
    min-width: 0;
}

/* Delivery */
.st-module-delivery
:is(
    .delivery-grid,
    .driver-grid,
    .rider-grid
) {
    min-width: 0;
}

/* Reports */
.st-module-reports
:is(
    canvas,
    svg
) {
    max-width: 100% !important;
    height: auto;
}

/* ==========================================================
   SCORESTECH EXTERNAL INTERFACE RESPONSIVE LAYER
   Public / Authentication / Customer Portal /
   Catalog / Billing / Platform Administration
   ========================================================== */

.st-public-interface,
.st-customer-portal,
.st-public-catalog,
.st-subscription-billing,
.st-platform-interface {
    min-width: 0;
}

.st-public-interface
:is(
    main,
    .container,
    .page,
    .shell,
    .wrap
),

.st-customer-portal
:is(
    main,
    .container,
    .cp-shell,
    .cp-page
),

.st-public-catalog
:is(
    main,
    .container,
    .catalog-shell,
    .shop-shell
),

.st-platform-interface
:is(
    main,
    .container,
    .platform-main,
    .platform-content
) {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

/* Authentication and onboarding cards */
.st-public-interface
:is(
    .login-card,
    .auth-card,
    .register-card,
    .verify-card,
    .status-card,
    .public-card,
    .card
) {
    max-width: 100%;
}

/* Customer portal */
.st-customer-portal
:is(
    .cp-card,
    .cp-panel,
    .cp-grid,
    .cp-field,
    .cp-actions
) {
    min-width: 0;
    max-width: 100%;
}

/* Catalog */
.st-public-catalog
:is(
    .catalog-grid,
    .product-grid,
    .category-grid,
    .products-grid,
    .shop-grid
) {
    min-width: 0;
    max-width: 100%;
}

.st-public-catalog
:is(
    .product-card,
    .catalog-card,
    .category-card
) {
    min-width: 0;
    max-width: 100%;
}

.st-public-catalog
:is(
    .product-card img,
    .catalog-card img,
    .category-card img
) {
    display: block;
    width: 100%;
    max-width: 100%;
    object-fit: contain;
}

/* Subscription billing */
.st-subscription-billing
:is(
    .bo-card,
    .billing-card,
    .subscription-card,
    .payment-card
) {
    min-width: 0;
    max-width: 100%;
}

/* Platform admin */
.st-platform-interface
:is(
    .platform-card,
    .admin-card,
    .card,
    .panel,
    .box
) {
    min-width: 0;
    max-width: 100%;
}

.st-platform-interface
:is(
    .platform-grid,
    .admin-grid,
    .stats-grid,
    .metrics-grid
) {
    min-width: 0;
}

/* Shared form controls */
.st-public-interface
:is(
    input,
    select,
    textarea,
    button
),

.st-customer-portal
:is(
    input,
    select,
    textarea,
    button
),

.st-public-catalog
:is(
    input,
    select,
    textarea,
    button
),

.st-subscription-billing
:is(
    input,
    select,
    textarea,
    button
),

.st-platform-interface
:is(
    input,
    select,
    textarea,
    button
) {
    max-width: 100%;
}

/* ==========================================================
   TABLET
   ========================================================== */

@media screen and (max-width: 1024px) {

    .st-public-interface
    :is(
        input,
        select,
        textarea
    ),

    .st-customer-portal
    :is(
        input,
        select,
        textarea
    ),

    .st-public-catalog
    :is(
        input,
        select,
        textarea
    ),

    .st-subscription-billing
    :is(
        input,
        select,
        textarea
    ),

    .st-platform-interface
    :is(
        input,
        select,
        textarea
    ) {
        font-size: 16px !important;
    }

    .st-public-interface
    :is(
        button,
        .btn,
        a.button
    ),

    .st-customer-portal
    :is(
        button,
        .btn,
        a.button
    ),

    .st-public-catalog
    :is(
        button,
        .btn,
        a.button
    ),

    .st-subscription-billing
    :is(
        button,
        .btn,
        a.button
    ),

    .st-platform-interface
    :is(
        button,
        .btn,
        a.button
    ) {
        min-height: 44px;
    }

    .st-public-catalog
    :is(
        .catalog-grid,
        .product-grid,
        .products-grid,
        .category-grid
    ) {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;
    }

    .st-platform-interface
    :is(
        .platform-grid,
        .admin-grid,
        .stats-grid,
        .metrics-grid
    ) {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;
    }
}

/* ==========================================================
   PHONE
   ========================================================== */

@media screen and (max-width: 760px) {

    .st-public-interface,
    .st-customer-portal,
    .st-public-catalog,
    .st-subscription-billing,
    .st-platform-interface {
        padding-left:
            var(--st-safe-left);

        padding-right:
            var(--st-safe-right);
    }

    /* Authentication / registration */

    .st-public-interface
    :is(
        .login-card,
        .auth-card,
        .register-card,
        .verify-card,
        .status-card,
        .public-card
    ) {
        width:
            calc(
                100vw
                - var(--st-safe-left)
                - var(--st-safe-right)
                - 24px
            ) !important;

        max-width:
            520px !important;

        margin-left:
            auto !important;

        margin-right:
            auto !important;
    }

    .st-public-interface form {
        max-width: 100%;
    }

    .st-public-interface
    form
    :is(
        input,
        select,
        textarea,
        button,
        .btn
    ) {
        width: 100%;
        min-height: 48px;
    }

    /* Verification/OTP entry */

    .st-public-interface
    input[
        autocomplete="one-time-code"
    ] {
        min-height: 54px;
        text-align: center;
        letter-spacing: .18em;
        font-size: 20px !important;
    }

    /* Customer portal */

    .st-customer-portal
    :is(
        .cp-grid,
        .cp-dashboard-grid,
        .cp-card-grid
    ) {
        grid-template-columns:
            1fr !important;
    }

    .st-customer-portal
    :is(
        .cp-actions,
        .actions,
        .action-row
    ) {
        display: grid !important;

        grid-template-columns:
            1fr !important;

        gap: 8px !important;
    }

    .st-customer-portal
    :is(
        .cp-actions,
        .actions,
        .action-row
    )
    :is(
        button,
        a,
        .btn
    ) {
        width: 100%;
        min-height: 46px;
    }

    /* Catalog */

    .st-public-catalog
    :is(
        .catalog-grid,
        .product-grid,
        .products-grid,
        .category-grid,
        .shop-grid
    ) {
        grid-template-columns:
            1fr !important;
    }

    .st-public-catalog
    :is(
        .checkout-grid,
        .cart-grid,
        .order-grid
    ) {
        display: grid !important;
        grid-template-columns:
            1fr !important;
    }

    .st-public-catalog
    :is(
        .product-card,
        .catalog-card,
        .category-card
    ) {
        width: 100%;
    }

    .st-public-catalog
    :is(
        form input,
        form select,
        form textarea,
        form button
    ) {
        min-height: 46px;
    }

    /* Subscription checkout */

    .st-subscription-billing
    :is(
        .bo-grid,
        .billing-grid,
        .subscription-grid
    ) {
        grid-template-columns:
            1fr !important;
    }

    .st-subscription-billing
    :is(
        .bo-card,
        .billing-card,
        .subscription-card,
        .payment-card
    ) {
        padding: 14px !important;
    }

    #scorestech-mpesa-box
    > div {
        max-width: 100%;
    }

    #scorestech-mpesa-box
    input,
    #scorestech-mpesa-box
    button {
        width: 100% !important;
        min-height: 48px;
    }

    /* Platform administration */

    .st-platform-interface
    :is(
        .platform-grid,
        .admin-grid,
        .stats-grid,
        .metrics-grid
    ) {
        grid-template-columns:
            1fr !important;
    }

    .st-platform-interface
    :is(
        .toolbar,
        .filters,
        .filter-row,
        .page-actions,
        .actions
    ) {
        display: grid !important;

        grid-template-columns:
            1fr !important;

        gap: 8px !important;
    }

    .st-platform-interface
    :is(
        .toolbar,
        .filters,
        .filter-row,
        .page-actions,
        .actions
    )
    > * {
        min-width: 0;
        max-width: 100%;
    }

    .st-platform-interface
    :is(
        .toolbar,
        .filters,
        .filter-row
    )
    :is(
        input,
        select,
        button
    ) {
        width: 100%;
        min-height: 46px;
    }

    .st-platform-interface
    .st-table-scroll
    table {
        min-width: 760px;
    }
}

/* ==========================================================
   SMALL PHONE
   ========================================================== */

@media screen and (max-width: 480px) {

    .st-public-interface
    :is(
        .login-card,
        .auth-card,
        .register-card,
        .verify-card,
        .status-card,
        .public-card
    ) {
        width:
            calc(
                100vw
                - var(--st-safe-left)
                - var(--st-safe-right)
                - 16px
            ) !important;

        padding-left:
            14px !important;

        padding-right:
            14px !important;
    }

    .st-public-interface
    h1,

    .st-customer-portal
    h1,

    .st-public-catalog
    h1,

    .st-platform-interface
    h1 {
        font-size:
            clamp(
                1.45rem,
                7vw,
                1.9rem
            ) !important;
    }

    .st-subscription-billing
    .bo-card {
        padding:
            12px !important;
    }
}

/* ==========================================================
   NATIVE-WRAPPER SAFE AREA
   ========================================================== */

@supports (
    padding-top:
        env(safe-area-inset-top)
) {

    .st-public-interface,
    .st-customer-portal,
    .st-public-catalog,
    .st-platform-interface {
        padding-bottom:
            max(
                12px,
                var(--st-safe-bottom)
            );
    }
}

/* ==========================================================
   SCORESTECH ACCESSIBILITY PRODUCTION CSS
   ========================================================== */

.st-skip-link {
    position: fixed;
    top: 8px;
    left: 8px;

    z-index: 99999;

    transform:
        translateY(
            -150%
        );

    padding:
        10px 14px;

    border-radius:
        10px;

    background:
        #111827;

    color:
        #ffffff;

    font-weight:
        800;

    text-decoration:
        none;

    transition:
        transform
        120ms ease;
}

.st-skip-link:focus {
    transform:
        translateY(
            0
        );
}

.st-table-scroll:focus-visible {
    outline:
        3px solid
        currentColor;

    outline-offset:
        2px;
}

[aria-invalid="true"] {
    border-color:
        #b91c1c !important;
}

[aria-disabled="true"],
button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
    cursor:
        not-allowed;

    opacity:
        .68;
}

.st-touch-device
:is(
    button,
    .btn,
    [role="button"],
    input[type="submit"],
    input[type="button"],
    input[type="reset"]
) {
    min-height:
        44px;
}

/* Never allow a fixed bottom action bar to sit behind iPhone home indicator. */
@supports (
    padding-bottom:
        env(safe-area-inset-bottom)
) {

    :is(
        .fixed-bottom,
        .sticky-bottom,
        .bottom-bar,
        .bottom-actions,
        .mobile-bottom-bar,
        .mobile-actions
    ) {
        padding-bottom:
            max(
                10px,
                var(--st-safe-bottom)
            );
    }
}

/* Prevent long unbroken IDs, references and receipt numbers from overflowing. */
:is(
    .reference,
    .reference-number,
    .transaction-id,
    .receipt-number,
    .order-number,
    .invoice-number,
    .document-number
) {
    overflow-wrap:
        anywhere;

    word-break:
        break-word;
}

/* Better form error readability */
:is(
    .error,
    .field-error,
    .form-error,
    .validation-error
) {
    line-height:
        1.45;
}

/* Loading controls */
[aria-busy="true"] {
    cursor:
        progress;
}

/* Minimum touch area for small icon links */
.st-touch-device
a.icon-button,

.st-touch-device
button.icon-button {
    min-width:
        44px;

    min-height:
        44px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;
}

/* Phone readability */
@media screen and (max-width: 760px) {

    body {
        line-height:
            1.45;
    }

    form {
        width:
            100%;

        max-width:
            100%;
    }

    label {
        line-height:
            1.35;
    }

    input,
    select,
    textarea {
        min-height:
            44px;
    }

    textarea {
        min-height:
            96px;
    }

    input[type="checkbox"],
    input[type="radio"] {
        min-height:
            auto;
    }

    button,
    .btn,
    [role="button"] {
        min-height:
            44px;
    }

    /* Prevent tiny adjacent action targets */
    :is(
        .actions,
        .action-row,
        .button-row,
        .btn-row,
        .page-actions
    ) {
        gap:
            8px;
    }
}

/* Native wrapper / standalone mode */
@media (
    display-mode:
        standalone
) {

    html,
    body {
        min-height:
            100dvh;
    }

    body {
        overscroll-behavior-y:
            none;
    }
}

/* High contrast preference */
@media (
    prefers-contrast:
        more
) {

    button,
    .btn,
    input,
    select,
    textarea {
        border-width:
            2px;
    }

    :focus-visible {
        outline-width:
            4px;
    }
}

/* ==========================================================
   SCORESTECH ACCOUNT PRIVACY UI
   ========================================================== */

.st-account-privacy {
    display: grid;
    gap: 16px;
    max-width: 900px;
}

.st-account-card {
    padding: 20px;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #fff;
}

.st-account-card h2 {
    margin-top: 0;
}

.st-account-card p {
    color: #475569;
    line-height: 1.65;
}

.st-account-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.st-account-links a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid #cbd5e1;
    text-decoration: none;
    font-weight: 750;
}

.st-account-danger {
    border-color: #fecaca;
}

.st-account-confirm {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 16px;
}

.st-account-confirm input {
    width: 20px;
    height: 20px;
    min-height: auto;
    margin-top: 2px;
}

.st-account-field {
    display: grid;
    gap: 6px;
    margin-top: 16px;
    font-weight: 750;
}

.st-account-field textarea {
    min-height: 110px;
    border: 1px solid #cbd5e1;
    border-radius: 11px;
    padding: 10px;
}

.st-account-delete {
    margin-top: 16px;
    min-height: 48px;
    padding: 10px 16px;
    border: 0;
    border-radius: 11px;
    background: #b91c1c;
    color: #fff;
    font-weight: 850;
    cursor: pointer;
}

.st-account-message {
    padding: 12px 14px;
    border-radius: 11px;
    background: #ecfdf5;
    color: #065f46;
}

@media(max-width:760px) {
    .st-account-card {
        padding: 14px;
    }

    .st-account-links {
        display: grid;
        grid-template-columns: 1fr;
    }

    .st-account-links a,
    .st-account-delete {
        width: 100%;
    }
}

.tenant-privacy-link {
    display: flex;
    align-items: center;
    min-height: 44px;
    margin-bottom: 10px;
    padding: 9px 11px;
    border-radius: 10px;
    color: inherit;
    text-decoration: none;
    font-weight: 750;
}

.tenant-privacy-link:hover,
.tenant-privacy-link:focus-visible {
    background:
        rgba(
            255,
            255,
            255,
            .09
        );
}

/* ==========================================================
   SCORESTECH NATIVE APPLICATION LAYER
   ========================================================== */

#st-native-network-banner {
    position: fixed;

    top:
        max(
            8px,
            var(--st-safe-top)
        );

    left: 50%;

    z-index: 99999;

    width:
        min(
            92vw,
            560px
        );

    transform:
        translateX(-50%);

    padding:
        10px 14px;

    border-radius:
        12px;

    background:
        #991b1b;

    color:
        #ffffff;

    text-align:
        center;

    font-size:
        14px;

    font-weight:
        750;

    box-shadow:
        0 10px 30px
        rgba(
            15,
            23,
            42,
            .22
        );
}

#st-native-network-banner[hidden] {
    display: none !important;
}

html.st-native-app {
    height:
        100%;
}

html.st-native-app body {
    min-height:
        100dvh;

    overscroll-behavior:
        none;
}

html.st-native-app
:is(
    button,
    .btn,
    [role="button"]
) {
    -webkit-user-select:
        none;

    user-select:
        none;
}

html.st-native-offline
:is(
    [data-requires-network="1"],
    [data-requires-network="true"]
) {
    opacity:
        .55;

    pointer-events:
        none;
}

html.st-native-app
.st-native-only {
    display:
        initial;
}

html:not(.st-native-app)
.st-native-only {
    display:
        none !important;
}

/*
 * Native apps receive edge-to-edge insets from the operating system.
 */
html.st-native-app
.tenant-topbar {
    padding-top:
        max(
            10px,
            var(--st-safe-top)
        );
}

html.st-native-app
.tenant-content {
    padding-bottom:
        max(
            20px,
            calc(
                var(--st-safe-bottom)
                + 14px
            )
        );
}

/*
 * Avoid accidental text selection during repeated POS taps.
 */
html.st-native-app
#pos-sale-workbench
:is(
    button,
    .btn,
    [role="button"]
) {
    -webkit-touch-callout:
        none;
}

/* Native offline state */
html.st-native-offline
body::after {
    content:
        "Offline";

    position:
        fixed;

    right:
        max(
            10px,
            var(--st-safe-right)
        );

    bottom:
        max(
            10px,
            var(--st-safe-bottom)
        );

    z-index:
        9998;

    padding:
        6px 10px;

    border-radius:
        999px;

    background:
        #334155;

    color:
        #ffffff;

    font-size:
        12px;

    font-weight:
        800;
}