@import url('capsule.css?v=20261020-1');
/* ============================================================
   NUMCHAI POS — Design System (Agri-Tech Precision)
   Deep Emerald + IBM Plex Sans Thai — ตาม design token ในโปรเจกต์
   ============================================================ */
@import url('ui-font.css?v=20261020-1');

:root {
    /* Colors */
    --surface: #f8f9fa;
    --surface-container-lowest: #ffffff;
    --surface-container-low: #f3f4f5;
    --surface-container: #edeeef;
    --surface-container-high: #e7e8e9;
    --on-surface: #191c1d;
    --on-surface-variant: #414844;
    --outline: #717973;
    --outline-variant: #c1c8c2;
    --primary: #1b4332;
    /* Deep Emerald */
    --primary-dark: #012d1d;
    --on-primary: #ffffff;
    --primary-container: #c1ecd4;
    --secondary-container: #bdeacd;
    /* Mint accent */
    --on-secondary-container: #103a26;
    --success: #2e7d46;
    --success-bg: #d7f0df;
    --warning: #9a6b00;
    --warning-bg: #fdf0d0;
    --danger: #ba1a1a;
    --danger-bg: #ffdad6;
    --muted: #6b7280;
    --muted-bg: #e6e8ea;
    /* Radius */
    --r-sm: 4px;
    --r: 8px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-full: 9999px;
    /* Shadows */
    --shadow-2: 0 4px 12px rgba(27, 67, 50, 0.08);
    --shadow-3: 0 8px 24px rgba(27, 67, 50, 0.12);
    --sidebar-w: 240px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--ui-font-family);
    background: var(--surface);
    color: var(--on-surface);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
}

.tabnum {
    font-variant-numeric: tabular-nums;
}

.ui-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    flex: none;
    vertical-align: -0.16em;
}

.ui-icon-inline {
    display: inline-flex;
    align-items: center;
}

.ui-icon-inline .ui-icon {
    width: 15px;
    height: 15px;
}

/* Shared modal behavior: keep the page still while dialog content can scroll. */
@media screen {
    html {
        scrollbar-gutter: stable;
    }

    html:has(dialog:modal),
    html:has(dialog:modal) body {
        overflow: hidden;
        overscroll-behavior: none;
    }

    :root dialog[open]::backdrop {
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
    }

    dialog:modal {
        overscroll-behavior: contain;
    }
}

/* ============ App layout ============ */
.app {
    display: flex;
    min-height: 100vh;
}

/* แถบเมนูพื้นขาว — เมนูที่เลือกเป็นสีเขียว */
.sidebar {
    width: var(--sidebar-w);
    background: #ffffff;
    color: var(--on-surface);
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0 auto 0 0;
    height: 100vh;
    border-right: 1px solid var(--outline-variant);
}

.sidebar .brand {
    padding: 22px 20px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--surface-container-high);
}

.sidebar .brand-logo {
    width: 38px;
    height: 38px;
    min-width: 38px;
    max-width: 38px;
    border-radius: var(--r);
    overflow: hidden;
    flex: none;
}

.sidebar .brand-logo img {
    width: 100%;
    max-width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sidebar .brand-name {
    font-weight: 700;
    font-size: 17px;
    line-height: 1.2;
    color: var(--primary-dark);
}

.sidebar .brand-sub {
    font-size: 11px;
    color: var(--on-surface-variant);
}

.nav {
    flex: 1;
    overflow-y: auto;
    padding: 12px 12px;
}

.nav-group + .nav-group {
    margin-top: 11px;
    padding-top: 8px;
    border-top: 1px solid #edf1ee;
}

.nav-section-title {
    padding: 0 12px 5px;
    color: #849087;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.055em;
    line-height: 1.4;
}

.nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: var(--r);
    color: var(--on-surface-variant);
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 2px;
    transition:
        background 0.12s,
        color 0.12s;
}

.nav a .ic {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    flex: none;
    opacity: 0.9;
}

.nav a .ic svg {
    width: 20px;
    height: 20px;
}

.nav a:hover {
    background: var(--surface-container);
    color: var(--on-surface);
}

.nav a.active {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 2px 8px rgba(27, 67, 50, 0.22);
}

.nav a.active .ic {
    opacity: 1;
}

.sidebar .user-box {
    padding: 14px 16px;
    border-top: 1px solid var(--surface-container-high);
    display: flex;
    align-items: center;
    gap: 10px;
}

.avatar {
    width: 34px;
    height: 34px;
    border-radius: var(--r-full);
    flex: none;
    background: var(--secondary-container);
    color: var(--primary-dark);
    display: grid;
    place-items: center;
    font-weight: 600;
}

.user-box .u-name {
    font-size: 14px;
    font-weight: 600;
}

.user-box .u-role {
    font-size: 11px;
    color: var(--on-surface-variant);
}

.user-box .logout {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    margin-left: auto;
    border-radius: 8px;
    color: var(--on-surface-variant);
}

.user-box .logout svg {
    width: 18px;
    height: 18px;
}

.user-box .logout:hover {
    color: var(--danger);
}

/* Fit every desktop navigation item into the available sidebar height. */
@media screen and (min-width: 761px) {
    .sidebar > .brand,
    .sidebar > .user-box {
        flex-shrink: 0;
    }

    .sidebar > .nav {
        display: grid;
        grid-auto-rows: minmax(0, 44px);
        align-content: start;
        gap: 1px;
        min-height: 0;
        padding: 8px 12px;
        overflow: hidden;
    }

    .sidebar .nav-group {
        display: contents;
    }

    .sidebar .nav-section-title {
        display: flex;
        align-items: center;
        padding: 0 12px;
    }

    .sidebar .nav-group + .nav-group > .nav-section-title {
        border-top: 1px solid #e2e7e3;
    }

    .sidebar .nav a {
        padding: 0 12px;
        margin: 0;
        min-height: 0;
        white-space: nowrap;
        line-height: 20px;
    }
}

@media screen and (min-width: 761px) and (max-height: 650px) {
    .sidebar .brand {
        padding: 10px 16px;
    }
    .sidebar .brand-sub,
    .sidebar .user-box .u-role {
        display: none;
    }
    .sidebar .user-box {
        padding: 8px 16px;
    }
    .sidebar .nav a {
        font-size: 13px;
        line-height: 18px;
        gap: 10px;
    }
    .sidebar .nav a .ic,
    .sidebar .nav a .ic svg {
        width: 16px;
        height: 16px;
    }
}

.main {
    margin-left: var(--sidebar-w);
    flex: 1;
    min-width: 0;
}

.topbar {
    height: 64px;
    background: var(--surface-container-lowest);
    border-bottom: 1px solid var(--outline-variant);
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 28px;
    position: sticky;
    top: 0;
    z-index: 20;
}

.topbar .search {
    flex: 1;
    max-width: 460px;
    position: relative;
}

.topbar .search input {
    width: 100%;
    padding: 9px 12px 9px 38px;
    border-radius: var(--r);
    border: 1px solid var(--outline-variant);
    background: var(--surface-container-low);
}

.topbar .search::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 50%;
    width: 16px;
    height: 16px;
    transform: translateY(-50%);
    opacity: 0.5;
    background: center / contain no-repeat
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6b60' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E");
}

.topbar .spacer {
    flex: 1;
}

.topbar .icon-btn {
    color: var(--on-surface-variant);
    font-size: 18px;
    padding: 6px;
    background: none;
    border: none;
    cursor: pointer;
}

/* กระดิ่งแจ้งเตือน (dropdown) */
.notif {
    position: relative;
}

.notif > summary {
    list-style: none;
    cursor: pointer;
    position: relative;
    padding: 8px;
    border-radius: var(--r);
    display: inline-flex;
    align-items: center;
}

.notif > summary > .ui-icon {
    width: 20px;
    height: 20px;
}

.notif > summary::-webkit-details-marker {
    display: none;
}

.notif > summary:hover {
    background: var(--surface-container-low);
}

.notif .dot {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    background: var(--danger);
    color: #fff;
    border-radius: var(--r-full);
    font-size: 10px;
    font-weight: 700;
    display: grid;
    place-items: center;
    border: 2px solid #fff;
}

.notif-panel {
    position: absolute;
    right: 0;
    top: 46px;
    width: 340px;
    background: #fff;
    border: 1px solid var(--outline-variant);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-3);
    z-index: 50;
    overflow: hidden;
}

.notif-panel .np-head {
    padding: 12px 16px;
    border-bottom: 1px solid var(--surface-container-high);
    font-weight: 600;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
}

.notif-panel .np-list {
    max-height: 360px;
    overflow-y: auto;
}

.notif-panel a.np-item {
    display: flex;
    gap: 10px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--surface-container-high);
    align-items: flex-start;
}

.notif-panel a.np-item:hover {
    background: var(--surface-container-low);
}

.notif-panel .np-ic {
    width: 30px;
    height: 30px;
    border-radius: var(--r);
    flex: none;
    display: grid;
    place-items: center;
}

.notif-panel .np-ic .ui-icon {
    width: 17px;
    height: 17px;
}

.notif-panel .np-ic.warn {
    background: var(--warning-bg);
}

.notif-panel .np-ic.dang {
    background: var(--danger-bg);
}

.notif-panel .np-t {
    font-size: 13px;
    font-weight: 500;
}

.notif-panel .np-s {
    font-size: 12px;
    color: var(--on-surface-variant);
}

.notif-panel .np-empty {
    padding: 26px;
    text-align: center;
    color: var(--on-surface-variant);
    font-size: 14px;
}

/* รูปสินค้า (thumbnail) */
.prod-thumb {
    width: 44px;
    height: 44px;
    border-radius: var(--r);
    object-fit: cover;
    background: var(--surface-container-low);
    border: 1px solid var(--outline-variant);
    flex: none;
}

.prod-thumb.ph {
    display: grid;
    place-items: center;
    color: var(--outline);
}

.prod-thumb.ph .ui-icon {
    width: 24px;
    height: 24px;
}

.img-preview.ph .ui-icon {
    width: 36px;
    height: 36px;
}

.p-card .p-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
    background: #fff;
}

.img-preview {
    width: 90px;
    height: 90px;
    border-radius: var(--r);
    object-fit: cover;
    border: 1px solid var(--outline-variant);
    background: var(--surface-container-low);
}

.content {
    padding: 28px;
    max-width: none;
    width: 100%;
}

/* ============ Headings ============ */
.page-head {
    margin-bottom: 22px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.page-head .grow {
    flex: 1;
    min-width: 200px;
}

.page-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--primary-dark);
}

.page-sub {
    color: var(--on-surface-variant);
    font-size: 15px;
    margin-top: 2px;
}

/* ============ Cards ============ */
.card {
    background: var(--surface-container-lowest);
    border: 1px solid var(--outline-variant);
    border-radius: var(--r-md);
    padding: 20px;
    box-shadow: 0 1px 2px rgba(16, 40, 28, 0.04);
}

.card.pad0 {
    padding: 0;
}

.card-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.card-title .sub {
    font-weight: 400;
    font-size: 13px;
    color: var(--on-surface-variant);
}

.cur {
    margin-right: 0.1em;
    font-weight: 600;
    opacity: 0.9;
}

.grid {
    display: grid;
    gap: 20px;
}

.cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* Stat tiles */
.stat {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    overflow: hidden;
}

.stat .stat-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.stat .stat-ic {
    width: 42px;
    height: 42px;
    border-radius: var(--r);
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--secondary-container), var(--primary-container));
    color: var(--primary-dark);
    font-size: 19px;
}

.stat .stat-ic .ui-icon {
    width: 22px;
    height: 22px;
}

.stat .stat-label {
    color: var(--on-surface-variant);
    font-size: 14px;
}

.stat .stat-value {
    font-size: 27px;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.15;
}

.stat.alert {
    background: linear-gradient(135deg, #fff5f4, var(--danger-bg));
    border-color: #f3b6b1;
}

.stat.alert .stat-ic {
    background: #fff;
    color: var(--danger);
}

.stat.alert .stat-value {
    color: var(--danger);
}

.badge-trend {
    font-size: 12px;
    font-weight: 600;
    color: var(--success);
    background: var(--success-bg);
    padding: 3px 9px;
    border-radius: var(--r-full);
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.badge-trend.down {
    color: var(--danger);
    background: var(--danger-bg);
}

.badge-trend.flat {
    color: var(--muted);
    background: var(--muted-bg);
}

/* Bar chart */
.chart-wrap {
    position: relative;
}

.chart-yaxis {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--on-surface-variant);
    margin-bottom: 6px;
}

.chart-grid {
    position: absolute;
    left: 0;
    right: 0;
    top: 24px;
    bottom: 26px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none;
    z-index: 0;
}

.chart-grid span {
    border-top: 1px dashed var(--surface-container-high);
}

.chart-grid span:last-child {
    border-top: 1.5px solid var(--outline-variant);
}

.bar-chart {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    gap: 10px;
    height: 220px;
    padding-top: 10px;
}

.bar-chart .col .peak-val {
    font-size: 11px;
    font-weight: 700;
    color: var(--primary-dark);
    margin-bottom: 4px;
}

/* Payment mix bars */
.paymix .pm-row {
    margin-bottom: 12px;
}

.paymix .pm-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 13px;
    margin-bottom: 5px;
}

.paymix .pm-top b {
    font-variant-numeric: tabular-nums;
}

.paymix .pm-track {
    height: 8px;
    background: var(--surface-container);
    border-radius: var(--r-full);
    overflow: hidden;
}

.paymix .pm-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--secondary-container), var(--primary));
    border-radius: var(--r-full);
}

.bar-chart .col {
    flex: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
}

.bar-chart .bar {
    background: linear-gradient(180deg, var(--primary-container), var(--secondary-container));
    border-radius: 8px 8px 0 0;
    margin-bottom: 8px;
    transition: filter 0.15s;
    min-height: 3px;
}

.bar-chart .col:hover .bar {
    filter: brightness(0.94);
}

.bar-chart .col.peak .bar {
    background: linear-gradient(180deg, var(--primary), var(--primary-dark));
}

.bar-chart .lbl {
    font-size: 11px;
    color: var(--on-surface-variant);
}

/* Rank list (top products) */
.rank-list {
    display: flex;
    flex-direction: column;
}

.rank-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--surface-container-high);
}

.rank-item:last-child {
    border-bottom: none;
}

.rank-no {
    width: 28px;
    height: 28px;
    border-radius: var(--r);
    flex: none;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 14px;
    background: var(--surface-container);
    color: var(--on-surface-variant);
}

.rank-item:nth-child(1) .rank-no {
    background: var(--primary);
    color: #fff;
}

.rank-item:nth-child(2) .rank-no {
    background: var(--secondary-container);
    color: var(--primary-dark);
}

.rank-item:nth-child(3) .rank-no {
    background: var(--primary-container);
    color: var(--primary-dark);
}

.rank-name {
    font-size: 14px;
    font-weight: 500;
}

.rank-cat {
    font-size: 12px;
    color: var(--on-surface-variant);
}

.rank-val {
    margin-left: auto;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.rank-val small {
    font-weight: 500;
    color: var(--on-surface-variant);
}

/* Alert item (low stock) */
.alert-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--r);
    background: var(--surface-container-low);
    border-left: 3px solid var(--warning);
    margin-bottom: 8px;
}

.alert-item.crit {
    border-left-color: var(--danger);
    background: #fff6f5;
}

.alert-item .ai-name {
    font-weight: 500;
    font-size: 14px;
}

.alert-item .ai-sub {
    font-size: 12px;
    color: var(--on-surface-variant);
}

/* หัวข้อย่อยแยกกลุ่ม "สินค้าหมด" / "สินค้าใกล้หมด" ในการ์ดแจ้งเตือนสต็อก */
.stock-sec-lbl {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2px;
    margin: 12px 0 6px;
}

.stock-sec-lbl:first-child {
    margin-top: 0;
}

.stock-sec-lbl.out {
    color: var(--danger);
}

.stock-sec-lbl.low {
    color: var(--warning);
}

/* ============ Buttons ============ */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    padding: 10px 18px;
    border-radius: var(--r);
    border: 1px solid transparent;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition:
        filter 0.12s,
        background 0.12s;
    background: var(--surface-container);
    color: var(--on-surface);
}

.btn:hover {
    filter: brightness(0.97);
}

.btn-primary {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 2px 6px rgba(27, 67, 50, 0.18);
}

.btn-primary:hover {
    background: var(--primary-dark);
    filter: none;
}

.btn-secondary {
    background: var(--secondary-container);
    color: var(--primary-dark);
}

.btn-danger {
    background: var(--danger-bg);
    color: var(--danger);
}

.btn-outline {
    background: #fff;
    border-color: var(--outline-variant);
    color: var(--on-surface);
}

.btn-sm {
    padding: 6px 12px;
    font-size: 13px;
}

.btn-block {
    width: 100%;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ============ Chips / tags ============ */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: var(--r-full);
    font-size: 12px;
    font-weight: 600;
}

.chip-success {
    background: var(--success-bg);
    color: var(--success);
}

.chip-warning {
    background: var(--warning-bg);
    color: var(--warning);
}

.chip-danger {
    background: var(--danger-bg);
    color: var(--danger);
}

.chip-muted {
    background: var(--muted-bg);
    color: var(--muted);
}

.chip-primary {
    background: var(--secondary-container);
    color: var(--primary-dark);
}

/* ============ Tables ============ */
.table-wrap {
    overflow-x: auto;
}

table.data {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

table.data thead th {
    text-align: left;
    padding: 12px 14px;
    background: var(--surface-container-low);
    color: var(--on-surface-variant);
    font-weight: 600;
    font-size: 13px;
    border-bottom: 1px solid var(--outline-variant);
    white-space: nowrap;
    position: sticky;
    top: 0;
}

table.data tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--surface-container-high);
    vertical-align: middle;
}

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

table.data tbody tr:hover {
    background: var(--surface-container-low);
}

table.data .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

table.data .center {
    text-align: center;
}

.sales-history-note {
    min-width: 150px;
    max-width: 260px;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.45;
}

.link-strong {
    color: var(--primary);
    font-weight: 600;
}

/* ============ Forms ============ */
.search-clear-host {
    position: relative;
}

.search-clear-control {
    width: 100%;
    min-width: 0;
}

.search-clear-host > .search-clear-input {
    width: 100%;
    padding-right: 44px;
}

.search-clear-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

.search-clear-button {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--muted);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.search-clear-button[hidden] {
    display: none;
}

.search-clear-button:hover {
    background: var(--surface-container);
    color: var(--on-surface);
}

.search-clear-button:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.pos-search-panel > .search-clear-control {
    flex: 1;
}

.pos-search-panel .search-clear-control > .search-clear-input {
    padding-right: 44px;
}

.stock-history-toolbar > .search-clear-control {
    flex: 1 1 200px;
}

.stock-history-toolbar .search-clear-input {
    padding-right: 44px;
}

.search-clear-supplier {
    margin-bottom: 12px;
}

.search-clear-supplier > .supplier-manage-search {
    margin-bottom: 0;
}

@media print {
    .search-clear-button {
        display: none;
    }
}

.field {
    margin-bottom: 14px;
}

.field label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 6px;
    color: var(--on-surface-variant);
}

.field .req {
    color: var(--danger);
}

.input,
.field input,
.field select,
.field textarea {
    width: 100%;
    padding: 10px 12px;
    border-radius: var(--r);
    border: 1px solid var(--outline-variant);
    background: #fff;
    color: var(--on-surface);
}

.field input[type='checkbox'],
.field input[type='radio'] {
    width: auto;
}

.input:focus,
.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(27, 67, 50, 0.1);
}

/* ให้วันที่และ placeholder mm/dd/yyyy เป็นสีดำทุกหน้า */
input[type='date'],
input[type='date']::placeholder,
input[type='date']::-webkit-datetime-edit,
input[type='date']::-webkit-datetime-edit-fields-wrapper,
input[type='date']::-webkit-datetime-edit-text,
input[type='date']::-webkit-datetime-edit-month-field,
input[type='date']::-webkit-datetime-edit-day-field,
input[type='date']::-webkit-datetime-edit-year-field {
    color: #000;
    opacity: 1;
}

.field textarea {
    resize: vertical;
    min-height: 80px;
}

.field .err-text {
    color: var(--danger);
    font-size: 12px;
    margin-top: 4px;
}

.form-actions {
    display: flex;
    gap: 10px;
    margin-top: 6px;
}

.toolbar {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: flex-end;
    margin-bottom: 18px;
}

.toolbar .field {
    margin-bottom: 0;
}

/* ============ Flash ============ */
.flash {
    padding: 12px 16px;
    border-radius: var(--r);
    margin-bottom: 18px;
    font-weight: 500;
}

.flash.success {
    background: var(--success-bg);
    color: var(--success);
}

.flash.error {
    background: var(--danger-bg);
    color: var(--danger);
}

.flash.info {
    background: var(--secondary-container);
    color: var(--primary-dark);
}

/* ============ Store settings ============ */
.settings-page-head {
    margin-bottom: 18px;
}

.settings-title-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

.settings-page-icon {
    width: 52px;
    height: 52px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    flex: none;
    background: linear-gradient(145deg, var(--secondary-container), var(--primary-container));
    color: var(--primary-dark);
    font-size: 24px;
    box-shadow: 0 5px 16px rgba(27, 67, 50, 0.12);
}

.settings-page-icon .ui-icon {
    width: 26px;
    height: 26px;
}

.settings-form {
    max-width: 1180px;
}

.settings-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(340px, 0.75fr);
    gap: 18px;
    align-items: start;
}

.payment-accounts-card {
    grid-column: 1 / -1;
}

.payment-account-list {
    display: grid;
    gap: 12px;
    margin-bottom: 14px;
}

.payment-account-row {
    padding: 14px;
    border: 1px solid var(--outline-variant);
    border-radius: var(--r-md);
    background: var(--surface-container-lowest);
}

.payment-account-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.payment-account-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 14px;
}

.payment-account-fields .field {
    margin-bottom: 10px;
}

.payment-account-fields [hidden] {
    display: none;
}

.payment-account-destinations {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 20px;
}

.payment-account-destinations .field {
    margin-bottom: 0;
}

.settings-card {
    padding: 0;
    overflow: hidden;
}

.settings-section-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--surface-container-high);
    background: linear-gradient(135deg, #fff 40%, #f4faf6);
}

.settings-section-head h2 {
    font-size: 18px;
    line-height: 1.3;
    color: var(--primary-dark);
}

.settings-section-head p {
    margin-top: 3px;
    color: var(--on-surface-variant);
    font-size: 12.5px;
}

.settings-section-head .grow {
    flex: 1;
    min-width: 0;
}

.settings-section-icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    flex: none;
    background: var(--secondary-container);
    color: var(--primary-dark);
    font-size: 18px;
    font-weight: 800;
}

.settings-section-icon .ui-icon {
    width: 21px;
    height: 21px;
}

.settings-section-icon.promptpay-icon {
    background: var(--primary);
    color: #fff;
}

.settings-section-body {
    padding: 20px;
}

.settings-fields-grid {
    gap: 2px 16px;
}

.settings-card .field {
    margin-bottom: 16px;
}

.settings-card .field label {
    color: var(--on-surface);
    font-weight: 600;
}

.field-help {
    margin-top: 5px;
    color: var(--muted);
    font-size: 11.5px;
    line-height: 1.45;
}

.field-error {
    margin-top: 5px;
    color: var(--danger);
    font-size: 12px;
    font-weight: 600;
}

.field input.is-invalid,
.field select.is-invalid,
.field textarea.is-invalid {
    border-color: var(--danger);
    background: #fffafa;
}

.field input.is-invalid:focus,
.field select.is-invalid:focus,
.field textarea.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(186, 26, 26, 0.1);
}

.settings-address-field {
    margin-top: 2px;
}

.settings-vat-field {
    max-width: 220px;
}

.input-suffix-wrap,
.secret-input-wrap {
    position: relative;
}

.input-suffix-wrap input {
    padding-right: 42px;
}

.input-suffix-wrap > span {
    position: absolute;
    right: 1px;
    top: 1px;
    bottom: 1px;
    width: 40px;
    display: grid;
    place-items: center;
    border-left: 1px solid var(--outline-variant);
    background: var(--surface-container-low);
    border-radius: 0 7px 7px 0;
    color: var(--on-surface-variant);
    font-weight: 700;
}

.settings-status {
    flex: none;
    padding: 4px 9px;
    border-radius: var(--r-full);
    background: var(--muted-bg);
    color: var(--muted);
    font-size: 10.5px;
    font-weight: 700;
    white-space: nowrap;
}

.settings-status.is-on {
    background: var(--success-bg);
    color: var(--success);
}

.settings-switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px;
    border: 1px solid var(--outline-variant);
    border-radius: var(--r-md);
    cursor: pointer;
    background: var(--surface-container-low);
}

.settings-switch-row strong {
    display: block;
    color: var(--on-surface);
    font-size: 13.5px;
}

.field .customer-price-permission {
    display: flex;
    gap: 12px;
    margin: 0;
    padding: 12px 14px;
    font-weight: 400;
}

.customer-price-permission:has(input:checked) {
    border-color: var(--primary);
    background: var(--surface-container-low);
}

.settings-switch-row small {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.4;
}

.settings-switch {
    flex: none;
    display: inline-flex;
    position: relative;
}

.settings-switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.settings-switch-track {
    width: 46px;
    height: 26px;
    padding: 3px;
    display: block;
    border-radius: var(--r-full);
    background: #aeb5b0;
    transition: background 0.18s;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.settings-switch-track span {
    width: 20px;
    height: 20px;
    display: block;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    transition: transform 0.18s;
}

.settings-switch input:checked + .settings-switch-track {
    background: var(--primary);
}

.settings-switch input:checked + .settings-switch-track span {
    transform: translateX(20px);
}

.settings-switch input:focus-visible + .settings-switch-track {
    outline: 3px solid rgba(27, 67, 50, 0.22);
    outline-offset: 2px;
}

.promptpay-fields {
    border: 0;
    padding: 18px 0 0;
    margin: 0;
    min-width: 0;
    transition: opacity 0.15s;
}

.promptpay-fields:disabled {
    opacity: 0.5;
}

.secret-input-wrap input {
    padding-right: 66px;
}

.secret-reveal {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    border-radius: 6px;
    padding: 5px 8px;
    background: var(--surface-container);
    color: var(--primary);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.settings-info-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 2px;
    padding: 12px;
    border-radius: var(--r);
    background: #f2f8f4;
    color: var(--on-surface-variant);
    font-size: 11.5px;
    line-height: 1.5;
}

.settings-info-note strong {
    color: var(--primary-dark);
}

.settings-info-note > span .ui-icon {
    width: 17px;
    height: 17px;
}

.settings-actions {
    position: sticky;
    bottom: 12px;
    z-index: 8;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 18px;
    padding: 12px 14px 12px 18px;
    border: 1px solid var(--outline-variant);
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--shadow-3);
    backdrop-filter: blur(8px);
}

.settings-actions[hidden] {
    display: none;
}

.settings-actions > div {
    display: flex;
    flex-direction: column;
    font-size: 12px;
    color: var(--on-surface-variant);
}

.settings-actions > div[hidden] {
    display: none;
}

.settings-actions > div strong {
    color: var(--on-surface);
    font-size: 13px;
}

.settings-save {
    min-width: 190px;
}

.settings-error-summary {
    max-width: 1180px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding: 12px 16px;
    border: 1px solid #efb5b0;
    border-radius: var(--r);
    background: var(--danger-bg);
    color: var(--danger);
    font-size: 13px;
}

.settings-error-summary span {
    color: #6d2926;
}

@media (max-width: 800px) {
    .payment-account-fields,
    .payment-account-destinations {
        grid-template-columns: 1fr;
    }
}

/* ============ Misc ============ */
.muted {
    color: var(--on-surface-variant);
}

.text-danger {
    color: var(--danger);
}

.text-success {
    color: var(--success);
}

.right {
    text-align: right;
}

.mt {
    margin-top: 16px;
}

.mb {
    margin-bottom: 16px;
}

.flex {
    display: flex;
    align-items: center;
    gap: 10px;
}

.between {
    justify-content: space-between;
}

.wrap {
    flex-wrap: wrap;
}

.pagination {
    display: flex;
    gap: 6px;
    align-items: center;
}

.pagination a,
.pagination span {
    padding: 6px 11px;
    border-radius: var(--r);
    border: 1px solid var(--outline-variant);
    background: #fff;
    font-size: 14px;
}

.pagination .cur {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.pagination .disabled {
    opacity: 0.4;
    pointer-events: none;
}

.empty {
    text-align: center;
    padding: 40px;
    color: var(--on-surface-variant);
}

/* ============ Login (จอผ่าครึ่ง: ซ้ายแบรนด์ดิ้ง / ขวาฟอร์ม) ============ */
.login-page {
    min-height: 100vh;
    display: flex;
    background: var(--surface);
}

/* ---- ซ้าย: แผงแบรนด์ ---- */
.login-brand {
    flex: 1 1 52%;
    max-width: 640px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 52px;
    color: #fff;
    background:
        radial-gradient(circle at 12% 0%, rgba(189, 234, 205, 0.18), transparent 42%),
        radial-gradient(circle at 100% 100%, rgba(1, 45, 29, 0.55), transparent 46%),
        linear-gradient(155deg, #06301f 0%, var(--primary) 58%, #23543f 100%);
}

/* เส้นคอนทัวร์จาง ๆ ให้ดูเป็น agri-tech */
.login-brand::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 46px);
    -webkit-mask-image: radial-gradient(circle at 28% 30%, #000, transparent 76%);
    mask-image: radial-gradient(circle at 28% 30%, #000, transparent 76%);
}

.login-brand::after {
    content: '';
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    top: -160px;
    right: -140px;
    background: rgba(255, 255, 255, 0.05);
    pointer-events: none;
}

.login-brand-inner {
    position: relative;
    z-index: 1;
    max-width: 400px;
    margin-top: auto;
}

.login-brand .login-logo {
    width: 60px;
    height: 60px;
    border-radius: var(--r-md);
    margin-bottom: 28px;
    overflow: hidden;
}

.login-brand .login-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.login-brand h1 {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 10px;
    letter-spacing: -0.01em;
}

.login-brand .login-tagline {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 32px;
}

.login-points {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.login-points li {
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 11px;
    color: rgba(255, 255, 255, 0.94);
}

.login-points li .lp-ic {
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: var(--r-sm);
    display: grid;
    place-items: center;
    font-size: 13px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.login-points li .lp-ic .ui-icon {
    width: 16px;
    height: 16px;
}

.login-brand-foot {
    position: relative;
    z-index: 1;
    margin-top: auto;
    padding-top: 40px;
    display: flex;
    gap: 28px;
    font-size: 12.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.62);
}

.login-brand-foot b {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 3px;
}

/* ---- ขวา: ฟอร์ม ---- */
.login-formside {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
}

.login-card {
    width: 100%;
    max-width: 400px;
    background: var(--surface-container-lowest);
    border: 1px solid var(--surface-container-high);
    border-radius: var(--r-lg);
    padding: 36px 34px;
    box-shadow: var(--shadow-2);
}

.login-card-head {
    margin-bottom: 24px;
}

.login-card h2 {
    font-size: 23px;
    color: var(--primary-dark);
    margin-bottom: 5px;
}

.login-card .sub {
    color: var(--on-surface-variant);
    font-size: 14px;
    line-height: 1.5;
}

.login-card .field {
    margin-bottom: 16px;
}

.login-card .input-icon {
    position: relative;
}

.login-card .input-icon .ic {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    opacity: 0.5;
    pointer-events: none;
}

.login-card .input-icon .ic .ui-icon {
    width: 16px;
    height: 16px;
}

.login-card .input-icon input {
    padding-left: 40px;
    padding-right: 44px;
    height: 46px;
}

.login-card .pw-toggle {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 15px;
    opacity: 0.5;
    padding: 8px;
    border-radius: var(--r-sm);
    line-height: 1;
}

.login-card .pw-toggle .ui-icon {
    width: 17px;
    height: 17px;
}

.login-card .pw-toggle .pw-eye-off {
    display: none;
}

.login-card .pw-toggle.is-visible .pw-eye {
    display: none;
}

.login-card .pw-toggle.is-visible .pw-eye-off {
    display: inline-block;
}

.login-card .pw-toggle:hover {
    opacity: 1;
    background: var(--surface-container-low);
}

.login-caps {
    display: none;
    margin-top: 6px;
    font-size: 12px;
    color: var(--warning);
}

.login-caps .ui-icon {
    width: 14px;
    height: 14px;
    vertical-align: -3px;
}

.login-caps.show {
    display: block;
}

.login-submit {
    margin-top: 8px;
    padding: 13px;
    font-size: 15.5px;
}

.login-lock {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    margin-top: 16px;
    font-size: 12px;
    color: var(--muted);
}

.login-foot {
    margin-top: 22px;
    font-size: 12px;
    color: var(--muted);
    text-align: center;
}

/* ============ POS specific ============ */
.pos {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(500px, 520px);
    gap: 14px;
    align-items: start;
}

.pos-products {
    min-width: 0;
}

.pos-page-head {
    display: flex;
    flex-wrap: wrap;
    min-height: 68px;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding: 2px 2px 0;
}

.pos-title-group,
.pos-title-line {
    display: flex;
    align-items: center;
    min-width: 0;
}

.pos-title-group {
    flex: 1 1 260px;
    gap: 12px;
}

.pos-title-icon,
.cart-head-icon {
    display: grid;
    place-items: center;
    flex: none;
    border: 1px solid #bfe0c9;
    color: #17613c;
    background: #eaf7ee;
    box-shadow: 0 5px 14px rgba(17, 91, 54, 0.09);
}

.pos-title-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    font-size: 22px;
}

.pos-title-icon svg {
    width: 23px;
    height: 23px;
}

.pos-title-line {
    flex-wrap: wrap;
    gap: 7px;
}

.pos-title-line .page-title {
    margin: 0;
    color: #173d2a;
    font-size: 23px;
    line-height: 1.15;
}

.pos-title-line .page-title span {
    color: #587064;
    font-size: 14px;
    font-weight: 600;
}

.pos-terminal-badge,
.pos-ready-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 23px;
    padding: 3px 8px;
    border-radius: 99px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.025em;
}

.pos-terminal-badge {
    border: 1px solid #dbe4dd;
    color: #69776e;
    background: #f5f7f5;
}

.pos-ready-badge {
    border: 1px solid #cfe6d5;
    color: #1e6b3e;
    background: #edf8f0;
}

.pos-ready-badge i,
.pos-search-status i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22a052;
    box-shadow: 0 0 0 3px rgba(34, 160, 82, 0.12);
}

.pos-page-head .page-sub {
    margin-top: 5px;
    font-size: 11px;
}

.pos-search-panel {
    display: flex;
    height: 54px;
    align-items: center;
    gap: 10px;
    margin-bottom: 11px;
    padding: 6px 9px 6px 14px;
    border: 2px solid #cfe2d4;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 5px 18px rgba(25, 78, 48, 0.06);
}

.pos-search-panel:focus-within {
    border-color: #28794c;
    box-shadow: 0 0 0 4px rgba(40, 121, 76, 0.09);
}

.pos-search-icon {
    display: grid;
    place-items: center;
    color: #547363;
}

.pos-search-icon svg {
    width: 21px;
    height: 21px;
}

.pos-search-panel .input {
    min-width: 0;
    height: 40px;
    padding: 0;
    border: 0;
    box-shadow: none;
    font-size: 15px;
}

.pos-search-status {
    display: flex;
    flex: none;
    align-items: center;
    gap: 8px;
}

.pos-search-status > span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #528064;
    font-size: 10px;
    font-weight: 700;
}

/* บังคับ input[type=date] แสดงผล วัน/เดือน/ปี เสมอ ไม่ขึ้นกับ locale ของ browser/OS
   (ซ่อนตัวเลขที่ browser วาดเอง แล้ววาดข้อความ d/m/Y ทับแทน ตัว input เดิมยังคลิกเปิดปฏิทินได้ปกติ) */
.date-nav-wrap {
    position: relative;
    display: inline-block;
}

.date-nav-wrap.date-field-wide {
    display: block;
    width: 100%;
}

.date-nav-wrap input[type='date'] {
    color: transparent;
}

.date-nav-wrap input[type='date']::-webkit-datetime-edit,
.date-nav-wrap input[type='date']::-webkit-datetime-edit-fields-wrapper,
.date-nav-wrap input[type='date']::-webkit-datetime-edit-text,
.date-nav-wrap input[type='date']::-webkit-datetime-edit-month-field,
.date-nav-wrap input[type='date']::-webkit-datetime-edit-day-field,
.date-nav-wrap input[type='date']::-webkit-datetime-edit-year-field {
    color: transparent;
}

.date-nav-wrap .date-display {
    position: absolute;
    left: 10px;
    right: 34px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 15px;
    line-height: 1.2;
    color: #000;
    white-space: nowrap;
    overflow: hidden;
}

.pos-category-panel {
    flex: 0 1 180px;
    width: 180px;
    min-width: 0;
    max-width: 100%;
    margin-left: auto;
    padding: 6px 8px;
    border: 1px solid #dbe5de;
    border-radius: 9px;
    background: #f7faf8;
}

.pos-category-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 3px 6px;
    margin-bottom: 4px;
}

.pos-category-head label {
    margin: 0;
    color: #365443;
    font-size: 10px;
    font-weight: 700;
}

.pos-category-head span {
    color: #6b7d71;
    font-size: 10px;
    overflow-wrap: anywhere;
}

.pos-category-panel .cat-filter {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: 30px;
    margin: 0;
    padding: 3px 7px;
    border: 1px solid #cbded1;
    border-radius: 6px;
    color: #17613c;
    background-color: #fff;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    text-overflow: ellipsis;
    cursor: pointer;
}

.pos-category-panel .cat-filter:hover {
    border-color: #6fa083;
}

.pos-category-panel .cat-filter:focus-visible {
    outline: 2px solid #28794c;
    outline-offset: 2px;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(142px, 1fr));
    gap: 10px;
}

.p-card {
    min-width: 0;
    padding: 0;
    background: #fff;
    border: 1px solid #dfe7e1;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition:
        border-color 0.12s,
        box-shadow 0.12s,
        transform 0.12s;
    text-align: left;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 7px rgba(22, 59, 39, 0.035);
}

.p-card:hover {
    border-color: var(--primary);
    box-shadow: 0 8px 19px rgba(22, 91, 51, 0.13);
    transform: translateY(-2px);
}

.p-card:disabled {
    opacity: 0.62;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.p-card.is-out {
    filter: grayscale(0.3);
}

.p-card .p-thumb {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #fff;
    display: grid;
    place-items: center;
    font-size: 29px;
    position: relative;
    overflow: hidden;
}

.p-card .p-thumb img {
    width: 100%;
    height: 100%;
    padding: 8px;
    object-fit: contain;
}

.p-thumb-placeholder {
    color: #4d8b68;
    background: linear-gradient(145deg, #f1f8f3, #e5f2e9) !important;
}

.p-thumb-placeholder svg {
    width: 40px;
    height: 40px;
}

.p-card .p-body {
    padding: 8px 9px 9px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
}

.p-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    color: #7b887f;
    font-size: 9px;
    line-height: 1.2;
}

.p-meta > span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.p-stock {
    flex: none;
    padding: 2px 5px;
    border-radius: 99px;
    color: #2a7349;
    background: #eaf6ed;
    font-size: 8px;
    font-weight: 800;
}

.p-stock-low {
    color: #9a6500;
    background: #fff4d3;
}

.p-stock-out {
    color: #a23e39;
    background: #ffefed;
}

.p-card .p-name {
    min-height: 34px;
    color: #26382c;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.p-card .p-foot {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.p-card .p-price {
    font-size: 15px;
    font-weight: 800;
    color: var(--primary);
}

.p-stock-track {
    height: 3px;
    overflow: hidden;
    border-radius: 99px;
    background: #e8eee9;
}

.p-stock-track i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #3d9d62;
}

.p-card.is-low .p-stock-track i {
    background: #d49a19;
}

.p-card.is-out .p-stock-track i {
    background: #bd4b46;
}

.cart {
    background: #fff;
    border: 1px solid #dbe6de;
    border-radius: 15px;
    position: sticky;
    top: 62px;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 92px);
    max-height: calc(100vh - 92px);
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(18, 69, 41, 0.09);
}

.cart-head,
.cart-cust,
.cart-bulk-tools,
.cart-sum {
    flex: none;
}

.cart-head {
    min-height: 68px;
    padding: 10px 15px;
    border-bottom: 1px solid #deebe2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, #f9fcfa, #edf7f0);
}

.cart-head-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cart-head-icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    font-size: 18px;
}

.cart-head-icon svg {
    width: 20px;
    height: 20px;
}

.cart-head h3 {
    margin: 0 0 2px;
    font-size: 17px;
    color: var(--primary-dark);
}

#cartCount {
    display: block;
    color: #6c7e71;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

.cart-clear-btn {
    padding: 6px 9px;
    border: 1px solid #efd3d0;
    border-radius: 8px;
    color: #ac4943;
    background: #fff8f7;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
}

.cart-clear-btn:hover {
    border-color: #c45c55;
    background: #fff0ee;
}

.cart-cust {
    padding: 9px 15px 10px;
    border-bottom: 1px solid var(--surface-container-high);
    background: #fff;
}

.cart-cust-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cart-cust-head label {
    font-size: 11px;
    font-weight: 800;
    color: var(--on-surface-variant);
}

.cart-cust-head span {
    padding: 2px 7px;
    border-radius: 99px;
    color: #287249;
    background: #edf7f0;
    font-size: 9px;
    font-weight: 700;
}

.pos-inline-alert svg {
    width: 14px;
    height: 14px;
    margin-right: 4px;
    color: #b36a00;
    vertical-align: -3px;
}

.cart-cust .input {
    height: 40px;
}

.cust-combo {
    position: relative;
    margin-top: 4px;
}

.cust-input-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    transform: translateY(-50%);
    color: #287249;
    pointer-events: none;
}

.cust-input-icon svg {
    width: 17px;
    height: 17px;
}

.cust-combo > .input {
    padding-left: 34px;
}

.cust-list {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    background: #fff;
    border: 1px solid var(--outline-variant);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-3);
    z-index: 40;
    max-height: 260px;
    overflow-y: auto;
}

.cust-list.open {
    display: block;
}

.cust-list .cl-item {
    padding: 9px 12px;
    cursor: pointer;
}

.cust-list .cl-item:hover,
.cust-list .cl-item.active {
    background: var(--surface-container-low);
}

.cust-list .cl-item.cl-walkin {
    border-bottom: 1px solid var(--surface-container-high);
}

.cust-list .cl-name {
    font-size: 13px;
    font-weight: 500;
}

.cust-list .cl-phone {
    font-size: 12px;
    color: var(--on-surface-variant);
}

.cl-name-walkin,
.cl-fuzzy-note {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cl-name-walkin svg {
    width: 15px;
    height: 15px;
    color: #287249;
}

.cl-fuzzy-note svg {
    width: 12px;
    height: 12px;
    flex: none;
}

.cust-list .cl-empty {
    padding: 14px;
    text-align: center;
    color: var(--on-surface-variant);
    font-size: 13px;
}

.cart-lines {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 145px;
    overflow: hidden;
    background: #f7faf8;
}

.cart-lines-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 15px 5px;
}

.cart-lines-head strong {
    font-size: 13px;
    color: var(--on-surface);
}

.cart-lines-head span {
    color: var(--muted);
    font-size: 10px;
    text-align: right;
}

.cart-items {
    flex: 1;
    overflow-y: auto;
    padding: 1px 7px 6px;
    min-height: 105px;
}

.cart-note {
    flex: none;
    padding: 7px 14px 9px;
    border-top: 1px solid var(--outline-variant);
    background: #fff;
}

.cart-note label {
    display: block;
    margin-bottom: 4px;
    color: var(--on-surface);
    font-size: 11px;
    font-weight: 700;
}

.cart-note textarea {
    width: 100%;
    min-height: 48px;
    resize: vertical;
    font-size: 12px;
    line-height: 1.4;
}

.cart-item {
    display: flex;
    gap: 6px;
    margin: 4px 0;
    padding: 7px;
    border: 1px solid #e1e9e3;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(25, 60, 39, 0.025);
}

.cart-item .ci-name {
    font-size: 12px;
    font-weight: 500;
    flex: 1;
}

.cart-item .ci-price {
    font-weight: 600;
}

.cart-bulk-tools {
    padding: 7px 10px 8px;
    border-bottom: 1px solid #dbe8df;
    background: #f4f9f5;
}

.cart-bulk-tools[hidden] {
    display: none;
}

.cart-bulk-tools > label {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 5px;
    color: #397050;
    font-size: 10px;
    font-weight: 800;
}

.cart-bulk-tools > label::before {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #2d8a56;
    content: '';
}

.cart-bulk-row {
    display: flex;
    gap: 6px;
}

.cart-bulk-row select {
    min-width: 0;
}

.cart-bulk-row .input {
    min-height: 30px;
    padding: 4px 8px;
    border-radius: 7px;
    font-size: 10px;
}

.cart-bulk-row .btn {
    min-height: 30px;
    padding: 4px 8px;
    border-radius: 7px;
    border-color: #a9ceb6;
    color: #17613c;
    background: #fff;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}

.cart-bulk-row .btn:hover {
    border-color: #287249;
    color: #fff;
    background: #287249;
}

.cart-select-all-btn {
    flex: none;
}

.cart-item {
    align-items: flex-start;
}

.cart-item .ci-select {
    display: flex;
    align-items: flex-start;
    padding-top: 2px;
    cursor: pointer;
}

.cart-item .ci-select input {
    width: 15px;
    height: 15px;
    margin: 0;
    border-radius: 4px;
    accent-color: #25804d;
    cursor: pointer;
}

.ci-index {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    flex: none;
    border-radius: 5px;
    color: #397050;
    background: #eaf4ed;
    font-size: 9px;
    font-weight: 800;
}

.ci-content {
    flex: 1;
    min-width: 0;
}

.ci-product-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 7px;
}

.ci-line-actions {
    display: flex;
    flex: none;
    align-items: center;
    gap: 5px;
}

.ci-name {
    color: #273b2e;
    font-weight: 700 !important;
    overflow-wrap: anywhere;
}

.ci-code {
    margin-top: 0;
    color: #8a958d;
    font-size: 8px;
}

.ci-config {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(106px, 0.88fr);
    gap: 5px;
    margin-top: 5px;
}

.ci-config label {
    display: block;
    min-width: 0;
    color: var(--on-surface-variant);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.25;
}

.ci-config .input {
    width: 100%;
    min-width: 0;
    height: 30px;
    margin-top: 2px;
    padding: 4px 6px;
    font-size: 10px;
}

.ci-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
    margin-top: 5px;
}

.ci-unit-price {
    flex: 1;
    min-width: 0;
    font-size: 10px;
}

.ci-bottom .qty button {
    width: 27px;
    height: 27px;
}

.ci-bottom .qty span {
    min-width: 27px;
    font-size: 11px;
}

.ci-line-total {
    flex: none;
    white-space: nowrap;
    color: #17613c;
    font-size: 12px;
    font-weight: 800;
}

.ci-line-total del {
    color: var(--muted);
    font-size: 9px;
    font-weight: 400;
}

.ci-remove-btn {
    display: grid;
    width: 25px;
    height: 25px;
    flex: none;
    place-items: center;
    padding: 0;
    border: 1px solid #efc9c5;
    border-radius: 7px;
    color: #b34f48;
    background: #fff7f6;
    cursor: pointer;
}

.ci-remove-btn:hover {
    border-color: #c45c55;
    color: #fff;
    background: #c45c55;
}

.ci-remove-btn svg {
    width: 14px;
    height: 14px;
}

.qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--outline-variant);
    border-radius: var(--r);
    overflow: hidden;
}

.qty button {
    width: 28px;
    height: 28px;
    border: none;
    background: var(--surface-container-low);
    cursor: pointer;
    font-size: 16px;
}

.qty span {
    min-width: 30px;
    text-align: center;
    font-weight: 600;
}

.qty .ci-qty-input {
    width: 58px;
    min-width: 0;
    height: 27px;
    padding: 0 4px;
    border: 0;
    border-radius: 0;
    background: #fff;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    appearance: textfield;
    -moz-appearance: textfield;
}

.qty .ci-qty-input::-webkit-inner-spin-button,
.qty .ci-qty-input::-webkit-outer-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.qty .ci-qty-input:focus {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
    box-shadow: none;
}

.cart-empty {
    margin: 9px 4px;
    padding: 32px 10px;
    border: 1px dashed #cfdcd2;
    border-radius: 10px;
    text-align: center;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    line-height: 1.7;
}

.cart-sum {
    padding: 8px 14px 9px;
    border-top: 1px solid var(--outline-variant);
    background: #fff;
    border-radius: 0 0 var(--r-md) var(--r-md);
}

.pos-payment-btn {
    position: relative;
    z-index: 3;
    display: flex;
    flex: none;
    width: 100%;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 16px;
    border: 0;
    border-radius: 0 0 14px 14px;
    color: #fff;
    background: linear-gradient(135deg, #1b7045, #105632);
    box-shadow: 0 -4px 12px rgba(17, 91, 54, 0.12);
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
}

.pos-payment-btn:hover {
    background: linear-gradient(135deg, #237c4e, #125f38);
}

.pos-payment-btn svg {
    width: 20px;
    height: 20px;
    flex: none;
}

.payment-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    margin: 0;
    width: min(960px, calc(100vw - 24px));
    height: min(700px, calc(100dvh - 24px));
    padding: 0;
    border: 0;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 22px 60px rgba(13, 43, 28, 0.3);
    overflow: hidden;
}

.payment-dialog[open] {
    display: flex;
    flex-direction: column;
    animation: void-pop 0.16s ease-out;
}

.payment-dialog::backdrop {
    background: rgba(0, 0, 0, 0.58);
}

.payment-dialog-head {
    display: flex;
    flex: none;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 17px 18px 14px;
    border-bottom: 1px solid var(--outline-variant);
    background: linear-gradient(135deg, #f9fcfa, #edf7f0);
}

.payment-dialog-head h3 {
    margin: 0;
    color: var(--primary-dark);
    font-size: 20px;
}

.payment-dialog-head span {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
}

.payment-dialog-body {
    display: grid;
    flex: 1;
    min-height: 0;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 12px 16px;
    padding: 14px 16px 16px;
    border: 0;
    border-radius: 0;
    overflow: hidden;
}

.payment-summary-column {
    display: flex;
    grid-column: 1;
    grid-row: 1;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    min-height: 0;
    padding-right: 4px;
    overflow-y: auto;
}

.payment-dialog-body .cart-cust,
.payment-dialog-body .cart-note {
    flex: none;
    margin: 0;
    padding: 13px 14px;
    border: 1px solid #dce7df;
    border-radius: 12px;
    background: #fff;
}

.payment-dialog-body .cart-cust {
    background: linear-gradient(135deg, #f5faf7, #fff);
}

.payment-dialog-body .cart-cust-head label,
.payment-note-head label {
    margin: 0;
    color: #244b35;
    font-size: 13px;
    font-weight: 700;
}

.payment-dialog-body .cart-cust-head span {
    padding: 3px 8px;
    color: #52705d;
    background: #eaf3ed;
    font-size: 10px;
    font-weight: 500;
}

.payment-dialog-body .cust-combo {
    margin-top: 9px;
}

.payment-dialog-body .cust-combo > .input {
    height: 44px;
    border-color: #cbdcd0;
    border-radius: 9px;
    background: #fff;
    font-size: 13px;
}

.payment-dialog-body .cart-summary-rows {
    flex: none;
    min-width: 0;
    padding: 13px 14px 0;
    border-color: #dce7df;
    border-radius: 12px;
    background: #f7faf8;
}

.payment-dialog-body .cart-summary-head {
    margin-bottom: 10px;
    color: #244b35;
}

.payment-dialog-body .sum-row {
    margin-bottom: 7px;
    font-size: 12px;
}

.payment-dialog-body .sum-total {
    margin: 12px -14px 0;
    padding: 12px 14px;
    border-radius: 0 0 11px 11px;
    box-shadow: none;
}

.payment-note-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 9px;
}

.payment-note-head span {
    color: #7b8980;
    font-size: 10px;
}

.payment-dialog-body .cart-note textarea {
    display: block;
    min-height: 70px;
    padding: 10px 12px;
    border-color: #d7e2db;
    border-radius: 9px;
    background: #fbfcfb;
    font-size: 12px;
    line-height: 1.6;
}

.payment-dialog-body .cart-note small {
    display: block;
    margin-top: 7px;
    color: #78867d;
    font-size: 10px;
    line-height: 1.5;
}

.payment-dialog-body .cust-combo > .input:focus,
.payment-dialog-body .cart-note textarea:focus {
    border-color: #5b9972;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(48, 128, 78, 0.1);
}

.payment-dialog-body .cart-payment-section {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    min-height: 0;
    margin-top: 0;
    padding-top: 0;
    padding-right: 4px;
    border-top: 0;
    overflow-y: auto;
}

.payment-dialog-body .payment-actions {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 0;
    padding-top: 8px;
    background: #fff;
}

.payment-dialog .pay-methods b {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    line-height: 1.2;
    font-size: 10px;
}

.payment-dialog .pos-transfer-account {
    min-width: 0;
    overflow-wrap: anywhere;
}

.payment-dialog .promptpay-inline-head {
    flex-wrap: wrap;
}

.payment-dialog .split-payment-summary {
    flex-wrap: wrap;
}

.payment-actions {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 8px;
    margin-top: 12px;
}

.payment-actions .pos-checkout-btn {
    margin-top: 0;
}

.payment-back-btn {
    display: flex;
    min-width: 0;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 6px 9px;
    border: 1px solid #cbd9cf;
    border-radius: 10px;
    color: #52645a;
    background: #fff;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.payment-back-btn:hover {
    border-color: #77a589;
    color: #17613c;
    background: #f2f9f4;
}

.payment-back-btn svg {
    width: 17px;
    height: 17px;
    flex: none;
}

.payment-dialog-body #cashBox {
    margin-bottom: 10px;
}

@media (max-width: 760px) {
    .payment-dialog-body {
        display: block;
        overflow: auto;
    }

    .payment-summary-column {
        padding-right: 0;
        overflow: visible;
    }

    .payment-dialog-body .cart-payment-section {
        margin-top: 7px;
        padding-top: 6px;
        padding-right: 0;
        border-top: 1px solid var(--outline-variant);
        overflow: visible;
    }

    .payment-dialog-body .sum-total {
        margin-top: 7px;
    }

    .payment-dialog-body .payment-actions {
        margin-top: 12px;
    }
}

.cart-summary-head {
    margin-bottom: 5px;
    color: var(--on-surface);
    font-size: 13px;
    font-weight: 800;
}

.cart-summary-rows {
    padding: 7px 8px 0;
    border: 1px solid var(--outline-variant);
    border-radius: 11px;
    background: #f8faf8;
}

.sum-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    margin-bottom: 3px;
}

.sum-discount-row {
    color: var(--on-surface-variant);
    cursor: default;
}

.sum-input-wrap {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--on-surface);
    white-space: nowrap;
}

.sum-input-wrap input {
    width: 92px;
    height: 30px;
    padding: 4px 7px;
    border: 1px solid var(--outline-variant);
    border-radius: 7px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.sum-total {
    display: flex;
    min-height: 58px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 7px -8px 0;
    padding: 8px 11px;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(135deg, #164c31, #0b3823);
    box-shadow: 0 5px 14px rgba(11, 56, 35, 0.18);
}

.sum-total > div {
    display: flex;
    flex-direction: column;
}

.sum-total > div > span {
    font-size: 13px;
    font-weight: 800;
}

.sum-total small {
    margin-top: 1px;
    color: #b8d8c3;
    font-size: 9px;
    font-weight: 500;
}

.sum-total > .tabnum {
    color: #ccf4d8;
    font-size: 25px;
    font-weight: 900;
    letter-spacing: -0.02em;
}

.cart-payment-section {
    margin-top: 7px;
    padding-top: 6px;
    border-top: 1px solid var(--outline-variant);
}

.cart-payment-section h4 {
    margin: 0;
    font-size: 13px;
    color: #16243a;
}

.pay-methods-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.pay-methods-head > span {
    color: #16805b;
    font-size: 11px;
    font-weight: 700;
}

.cart-payment-section #cashBox {
    padding: 7px 8px;
    border: 1px solid var(--outline-variant);
    border-radius: 9px;
    background: var(--surface-container-low);
}

.cash-input-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 5px;
}

.cash-input-head label {
    color: #526158;
    font-size: 12px;
    font-weight: 800;
}

.cash-input-head span {
    color: #6b786f;
    font-size: 11px;
}

.cash-input-head strong {
    margin-left: 4px;
    color: #17613c;
    font-size: 14px;
}

.cash-input-wrap {
    position: relative;
}

.cash-input-wrap > span {
    position: absolute;
    left: 11px;
    top: 50%;
    z-index: 1;
    transform: translateY(-50%);
    color: #5a6a60;
    font-size: 14px;
    font-weight: 700;
}

.cash-input-wrap .input {
    height: 36px;
    padding-left: 28px;
    text-align: right;
    font-size: 16px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.quick-cash {
    display: grid;
    grid-template-columns: 1.3fr repeat(4, 1fr) 0.8fr;
    gap: 4px;
    margin-top: 6px;
}

.quick-cash button {
    min-width: 0;
    padding: 4px 5px;
    border-radius: 7px;
    border: 1px solid var(--outline-variant);
    background: #fff;
    color: var(--on-surface);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.quick-cash button:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.quick-cash button.qc-exact {
    border-color: var(--primary);
    color: var(--primary);
}

.quick-cash button.qc-clear {
    color: var(--danger);
}

.split-payment-box {
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid var(--outline-variant);
    border-radius: 9px;
    background: var(--surface-container-low);
}

.split-payment-box[hidden] {
    display: none;
}

.split-method-picker {
    display: flex;
    gap: 5px;
    margin-bottom: 8px;
}

.split-method-picker label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 25px;
    padding: 3px 7px;
    border: 1px solid #d5e0d8;
    border-radius: 99px;
    color: #5d6d63;
    background: #fff;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.split-method-picker input {
    width: 13px;
    height: 13px;
    margin: 0;
    accent-color: #25804d;
}

.split-method-picker label:has(input:checked) {
    border-color: #9ac8aa;
    color: #17613c;
    background: #eaf7ee;
}

.split-payment-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.split-payment-grid > label,
.split-transfer-field {
    min-width: 0;
    color: var(--on-surface-variant);
    font-size: 12px;
    font-weight: 600;
}

.split-payment-grid > label:last-child {
    grid-column: 1 / -1;
}

.split-payment-grid .cash-input-wrap {
    margin-top: 4px;
    background: #fff;
}

.split-transfer-label {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 14px;
}

.split-payment-grid [data-split-field][hidden] {
    display: none;
}

.split-payment-grid [data-split-field].is-auto .input {
    border-color: #9ac8aa;
    color: #17613c;
    background: #edf8f0;
    font-weight: 800;
}

.split-payment-grid [data-split-field].is-auto::after {
    display: block;
    margin-top: 2px;
    color: #25804d;
    content: 'คำนวณอัตโนมัติ';
    font-size: 8px;
    font-weight: 700;
}

.pos-switch {
    position: relative;
    display: inline-flex;
    width: 26px;
    height: 15px;
    flex: none;
    cursor: pointer;
}

.pos-switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.pos-switch i {
    width: 100%;
    height: 100%;
    border-radius: 99px;
    background: #b6c5ba;
    transition: background 0.16s;
}

.pos-switch i::after {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    content: '';
    transition: transform 0.16s;
}

.pos-switch input:checked + i {
    background: #25804d;
}

.pos-switch input:checked + i::after {
    transform: translateX(11px);
}

.pos-switch input:focus-visible + i {
    outline: 2px solid #17613c;
    outline-offset: 2px;
}

.split-transfer-qr {
    margin-top: 7px;
    text-align: center;
}

.split-transfer-qr[hidden] {
    display: none;
}

.split-transfer-qr-content {
    min-height: 52px;
    padding: 8px;
    border: 1px dashed #9dc9aa;
    border-radius: 8px;
    color: #5b6f62;
    background: #fff;
    font-size: 10px;
}

.split-transfer-qr-content svg {
    display: block;
    width: 112px;
    max-width: 100%;
    height: auto;
    margin: 5px auto 0;
}

.split-transfer-qr-amount {
    color: #17613c;
    font-size: 12px;
    font-weight: 800;
}

.split-transfer-qr-print {
    display: block;
    width: 100%;
    min-height: 30px;
    margin-top: 7px;
    padding: 4px 9px;
    border-radius: 7px;
    font-size: 10px;
    font-weight: 800;
}

.split-transfer-qr-print:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.split-payment-box:has(#splitTransferQr:checked) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 122px;
    gap: 8px;
    align-items: start;
}

.split-payment-box:has(#splitTransferQr:checked) .split-method-picker {
    grid-column: 1 / -1;
    grid-row: 1;
    margin-bottom: 0;
}

.split-payment-box:has(#splitTransferQr:checked) .split-payment-grid {
    grid-column: 1;
    grid-row: 2;
}

.split-payment-box:has(#splitTransferQr:checked) .split-payment-summary {
    grid-column: 1;
    grid-row: 3;
    margin-top: 0;
}

.split-payment-box:has(#splitTransferQr:checked) .split-transfer-qr {
    grid-column: 2;
    grid-row: 2 / span 2;
    margin-top: 0;
}

.split-payment-box:has(#splitTransferQr:checked) .split-transfer-qr-content {
    min-height: 0;
    padding: 6px 4px;
}

.split-payment-box:has(#splitTransferQr:checked) .split-transfer-qr-amount {
    font-size: 10px;
}

.split-payment-box:has(#splitTransferQr:checked) .split-transfer-qr-content svg {
    width: 104px;
}

.split-payment-box:has(#splitTransferQr:checked) .split-transfer-qr-print {
    width: 100%;
    min-height: 28px;
    margin-top: 5px;
    padding: 3px 4px;
    font-size: 9px;
}

@media (max-width: 760px) {
    .payment-dialog .quick-cash {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .payment-dialog .split-payment-box:has(#splitTransferQr:checked) {
        display: block;
    }

    .payment-dialog .split-transfer-qr {
        margin-top: 10px;
    }

    .payment-dialog .split-transfer-qr-content svg {
        width: 140px;
    }
}

.split-payment-summary {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--surface-container-high);
    font-size: 12px;
}

.split-payment-summary strong {
    color: var(--primary-dark);
    font-variant-numeric: tabular-nums;
}

.pay-methods {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    margin-bottom: 6px;
}

.pay-methods label {
    position: relative;
    min-width: 0;
    border: 1px solid #d9e1eb;
    border-radius: 9px;
    padding: 0;
    text-align: center;
    cursor: pointer;
    background: #fff;
    overflow: hidden;
    transition:
        border-color 0.15s,
        background 0.15s,
        box-shadow 0.15s;
}

.pay-methods input {
    display: none;
}

.pay-methods label > span {
    position: relative;
    display: flex;
    min-height: 54px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 5px 4px;
    color: #25344c;
}

.pay-methods b {
    max-width: 100%;
    overflow: hidden;
    font-size: 9px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pay-icon {
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border-radius: 7px;
    color: #53657b;
    background: #f0f4f8;
}

.pay-icon svg {
    width: 14px;
    height: 14px;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pay-check {
    position: absolute;
    top: 5px;
    right: 5px;
    display: none;
    width: 15px;
    height: 15px;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: #07966d;
}

.pay-check svg {
    width: 10px;
    height: 10px;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pay-methods input:checked + span {
    color: #087554;
}

.pay-methods input:checked + span .pay-icon {
    color: #07845f;
    background: #dff8ed;
}

.pay-methods input:checked + span .pay-check {
    display: grid;
}

.pay-methods label:has(input:checked) {
    border: 2px solid #07966d;
    background: #effbf6;
    box-shadow: 0 1px 2px rgba(7, 150, 109, 0.08);
}

.pay-methods label.pay-credit {
    border-color: #f2ca58;
    background: #fffdf7;
}

.pay-methods label.pay-credit .pay-icon {
    color: #c96a05;
    background: #fff3cf;
}

.pay-methods label.pay-credit > span {
    color: #a84600;
}

.pay-methods label.pay-credit:has(input:checked) {
    border: 2px solid #e99519;
    background: #fff8e7;
}

.pay-methods label.pay-credit input:checked + span .pay-check {
    background: #e17a08;
}

.pos-checkout-btn {
    display: flex;
    width: 100%;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 2px;
    border: 0;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(135deg, #1b7045, #105632);
    box-shadow: 0 7px 18px rgba(17, 91, 54, 0.24);
    font: inherit;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
}

.pos-checkout-btn:hover {
    background: linear-gradient(135deg, #237c4e, #125f38);
}

.pos-checkout-btn:disabled {
    color: #f0f4f1;
    background: #89968e;
    box-shadow: none;
    cursor: not-allowed;
}

.pos-checkout-btn svg {
    width: 20px;
    height: 20px;
    flex: none;
}

/* Payment dialog typography: 2px larger than the base component sizes. */
#paymentModal {
    font-size: 18px;
}

#paymentModal .payment-dialog-head h3 {
    font-size: 22px;
}

#paymentModal .payment-dialog-head span {
    font-size: 14px;
}

#paymentModal .cart-cust-head label,
#paymentModal .payment-note-head label,
#paymentModal .cust-combo > .input,
#paymentModal .cl-name,
#paymentModal .cl-empty,
#paymentModal .cart-summary-head {
    font-size: 15px;
}

#paymentModal .cart-cust-head span,
#paymentModal .payment-note-head span,
#paymentModal .cart-note small {
    font-size: 12px;
}

#paymentModal .cl-phone,
#paymentModal .cart-note textarea,
#paymentModal .sum-row {
    font-size: 14px;
}

#paymentModal .sum-total > div > span {
    font-size: 15px;
}

#paymentModal .sum-total small {
    font-size: 11px;
}

#paymentModal .sum-total > .tabnum {
    font-size: 27px;
}

#paymentModal .cart-payment-section h4 {
    font-size: 15px;
}

#paymentModal .pay-methods-head > span {
    font-size: 13px;
}

#paymentModal .pay-methods b {
    font-size: 12px;
}

#paymentModal .cash-input-head label {
    font-size: 14px;
}

#paymentModal .cash-input-head span {
    font-size: 13px;
}

#paymentModal .cash-input-head strong,
#paymentModal .cash-input-wrap > span {
    font-size: 16px;
}

#paymentModal .cash-input-wrap .input {
    font-size: 18px;
}

#paymentModal .quick-cash button {
    font-size: 15px;
}

#paymentModal .split-method-picker label {
    font-size: 13px;
}

#paymentModal .split-payment-grid > label,
#paymentModal .split-transfer-field,
#paymentModal .split-payment-summary {
    font-size: 14px;
}

#paymentModal .split-payment-grid [data-split-field].is-auto::after {
    font-size: 10px;
}

#paymentModal .split-transfer-qr-content {
    font-size: 12px;
}

#paymentModal .split-transfer-qr-amount {
    font-size: 14px;
}

#paymentModal .split-transfer-qr-print {
    font-size: 12px;
}

#paymentModal .split-payment-box:has(#splitTransferQr:checked) .split-transfer-qr-amount {
    font-size: 12px;
}

#paymentModal .split-payment-box:has(#splitTransferQr:checked) .split-transfer-qr-print {
    font-size: 11px;
}

#paymentModal .pos-transfer-account,
#paymentModal .promptpay-inline-head {
    font-size: 14px;
}

#paymentModal .pos-transfer-account b {
    font-size: 18px;
}

#paymentModal #promptPayCountdown {
    font-size: 11px;
}

#paymentModal .promptpay-print-btn {
    font-size: 12px;
}

#paymentModal .promptpay-amount {
    font-size: 24px;
}

#paymentModal .promptpay-account {
    font-size: 15px;
}

#paymentModal .payment-back-btn {
    font-size: 14px;
}

#paymentModal .pos-checkout-btn {
    font-size: 17px;
}

/* ============ Invoice / Receipt (professional, print-ready) ============ */
.invoice {
    max-width: 720px;
    margin: 0 auto;
    background: #fff;
    color: #1a1a1a;
    border: 1px solid var(--outline-variant);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-2);
    overflow: hidden;
}

.inv-top {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 26px 32px;
    background: #fff;
    color: #000;
    border-bottom: 2px solid #000;
}

.inv-brand {
    display: flex;
    gap: 14px;
    align-items: center;
}

.inv-logo {
    width: 52px;
    height: 52px;
    border-radius: var(--r-md);
    overflow: hidden;
}

.inv-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.inv-store {
    font-size: 20px;
    font-weight: 700;
}

.inv-store-sub {
    font-size: 12px;
    opacity: 0.8;
    margin-top: 2px;
    line-height: 1.5;
}

.inv-title {
    text-align: right;
}

.inv-title .t {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.inv-title .no {
    font-size: 13px;
    opacity: 0.8;
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}

.inv-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 24px 40px;
    padding: 20px 32px;
    border-bottom: 1px solid var(--surface-container-high);
}

.inv-meta .m-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--on-surface-variant);
}

.inv-meta .m-value {
    font-size: 14px;
    font-weight: 600;
    margin-top: 3px;
}

.inv-body {
    padding: 8px 32px 24px;
}

table.inv-items {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

table.inv-items thead th {
    text-align: left;
    padding: 11px 8px;
    border-top: 1.5px solid #000;
    border-bottom: 1.5px solid #000;
    color: #000;
    font-size: 12px;
    letter-spacing: 0.02em;
    font-weight: 700;
}

table.inv-items thead th.num {
    text-align: right;
}

table.inv-items tbody td {
    padding: 11px 8px;
    border-bottom: 1px solid var(--surface-container-high);
    vertical-align: top;
}

table.inv-items tbody td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

table.inv-items .it-unit {
    font-size: 12px;
    color: var(--on-surface-variant);
}

.invoice#customerHistorySheet table.inv-items {
    table-layout: fixed;
}

.invoice#customerHistorySheet .history-col-index {
    width: 6%;
}

.invoice#customerHistorySheet .history-col-date {
    width: 16%;
}

.invoice#customerHistorySheet .history-col-invoice {
    width: 20%;
}

.invoice#customerHistorySheet .history-col-products {
    width: 38%;
}

.invoice#customerHistorySheet .history-col-total {
    width: 20%;
}

.invoice#customerHistorySheet table.inv-items th,
.invoice#customerHistorySheet table.inv-items td {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* จัดเอกสารประวัติการซื้อสำหรับบันทึกเป็นภาพ A4 โดยไม่กระทบหน้าจอปกติ */
.invoice#customerHistorySheet.customer-history-a4-source {
    width: 900px;
    max-width: none;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

.invoice#customerHistorySheet.customer-history-a4-source .inv-top {
    padding: 22px 36px;
}

.invoice#customerHistorySheet.customer-history-a4-source .inv-meta {
    gap: 16px 36px;
    padding: 16px 36px;
}

.invoice#customerHistorySheet.customer-history-a4-source .inv-meta > div {
    min-width: 150px;
}

.invoice#customerHistorySheet.customer-history-a4-source .inv-body {
    padding: 10px 36px 22px;
}

.invoice#customerHistorySheet.customer-history-a4-source .inv-store {
    font-size: 22px;
}

.invoice#customerHistorySheet.customer-history-a4-source .inv-store-sub {
    font-size: 14px;
}

.invoice#customerHistorySheet.customer-history-a4-source .inv-title .t {
    font-size: 25px;
}

.invoice#customerHistorySheet.customer-history-a4-source .inv-title .no {
    font-size: 13px;
}

.invoice#customerHistorySheet.customer-history-a4-source .inv-meta .m-label {
    font-size: 12px;
}

.invoice#customerHistorySheet.customer-history-a4-source .inv-meta .m-value {
    font-size: 15px;
}

.invoice#customerHistorySheet.customer-history-a4-source table.inv-items {
    font-size: 14px;
    line-height: 1.45;
}

.invoice#customerHistorySheet.customer-history-a4-source table.inv-items thead th {
    padding: 10px 8px;
    font-size: 14px;
}

.invoice#customerHistorySheet.customer-history-a4-source table.inv-items tbody td {
    padding: 10px 8px;
    font-size: 14px;
    line-height: 1.45;
}

.invoice#customerHistorySheet.customer-history-a4-source table.inv-items .it-unit {
    font-size: 14px;
    line-height: 1.5;
}

.invoice#customerHistorySheet.customer-history-a4-source .history-product-name {
    font-size: 16px;
    font-weight: 600;
}

.invoice#customerHistorySheet.customer-history-a4-source table.inv-items tbody td:nth-child(3) > span {
    font-size: 12px !important;
}

.invoice#customerHistorySheet.customer-history-a4-source table.inv-items tbody td:nth-child(3) > div {
    font-size: 13px !important;
}

.invoice#customerHistorySheet.customer-history-a4-source table.inv-items tbody td:last-child > div {
    font-size: 13px !important;
}

.invoice#customerHistorySheet.customer-history-a4-source table.inv-items tbody td:last-child > div:last-child {
    font-size: 15px !important;
}

.invoice#customerHistorySheet.customer-history-a4-source .inv-totals .row {
    font-size: 15px;
}

.invoice#customerHistorySheet.customer-history-a4-source .inv-totals .row.grand {
    font-size: 20px;
}

.invoice#customerHistorySheet.customer-history-a4-source .inv-foot {
    font-size: 13px;
}

.invoice#customerHistorySheet.customer-history-a4-source .history-col-index {
    width: 5%;
}

.invoice#customerHistorySheet.customer-history-a4-source .history-col-date {
    width: 14%;
}

.invoice#customerHistorySheet.customer-history-a4-source .history-col-invoice {
    width: 18%;
}

.invoice#customerHistorySheet.customer-history-a4-source .history-col-products {
    width: 44%;
}

.invoice#customerHistorySheet.customer-history-a4-source .history-col-total {
    width: 19%;
}

.invoice#customerHistorySheet.customer-history-a4-source table.inv-items td:last-child,
.invoice#customerHistorySheet.customer-history-a4-source table.inv-items th:last-child {
    padding-left: 12px;
    padding-right: 4px;
}

.invoice#customerHistorySheet.customer-history-a4-source .inv-totals {
    margin-top: 14px;
}

.invoice#customerHistorySheet.customer-history-a4-source .inv-foot {
    padding: 14px 36px 18px;
}

.inv-totals {
    margin-left: auto;
    width: 300px;
    margin-top: 18px;
}

.inv-totals .row {
    display: flex;
    justify-content: space-between;
    padding: 7px 8px;
    font-size: 14px;
}

.inv-totals .row.grand {
    border-top: 1.5px solid #000;
    border-bottom: 4px double #000;
    margin-top: 6px;
    font-size: 19px;
    font-weight: 700;
    color: #000;
    padding: 10px 0;
}

.inv-totals .row.disc {
    color: #000;
}

.inv-pay {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 40px;
    padding: 16px 32px;
    background: #f5f5f5;
    border-top: 1px solid #ccc;
}

.inv-pay .pay-b {
    font-size: 13px;
}

.inv-pay .pay-b b {
    display: block;
    font-size: 15px;
    margin-top: 2px;
}

.inv-foot {
    text-align: center;
    padding: 20px 32px 26px;
    border-top: 1px dashed var(--outline-variant);
    color: var(--on-surface-variant);
    font-size: 13px;
}

.inv-sign {
    display: flex;
    justify-content: space-around;
    gap: 30px;
    margin: 26px 0 6px;
}

.inv-sign .s {
    flex: 1;
    text-align: center;
}

.inv-sign .s .line {
    border-top: 1px solid #999;
    margin: 40px 12px 6px;
}

.inv-sign .s .cap {
    font-size: 12px;
    color: var(--on-surface-variant);
}

.category-preview-scroll {
    overflow-x: auto;
    padding: 12px 0 24px;
}

.invoice.customer-category-sheet {
    box-sizing: border-box;
    width: 210mm;
    max-width: none;
    min-height: 297mm;
    padding: 12mm;
    border: 0;
    border-radius: 0;
    background: #fff;
}

.customer-category-sheet,
.customer-category-sheet * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.customer-category-sheet .inv-top {
    align-items: flex-start;
    padding: 0 0 5mm;
    gap: 16px;
    break-inside: avoid;
}

.customer-category-sheet .inv-brand {
    flex: 1;
    min-width: 0;
}

.customer-category-sheet .inv-store-sub {
    overflow-wrap: anywhere;
}

.customer-category-sheet .inv-title {
    flex: none;
    max-width: 45%;
}

.customer-category-sheet .inv-title .t {
    font-size: 20px;
    line-height: 1.4;
}

.customer-category-sheet .inv-title .no {
    font-size: 10px;
    letter-spacing: 0.04em;
}

.customer-category-sheet .inv-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 24px;
    padding: 4mm 0;
    break-inside: avoid;
}

.customer-category-sheet .inv-body {
    padding: 3mm 0 5mm;
    overflow: visible;
}

.invoice.customer-category-sheet table.customer-category-table {
    table-layout: fixed;
    font-size: 11px;
}

.category-col-index {
    width: 5%;
}

.category-col-name {
    width: 38%;
}

.category-col-count {
    width: 9%;
}

.category-col-amount {
    width: 16%;
}

.category-name {
    display: block;
    white-space: normal;
    overflow-wrap: anywhere;
}

.invoice.customer-category-sheet table.customer-category-table th,
.invoice.customer-category-sheet table.customer-category-table td {
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
    padding: 3mm 1.5mm;
    font-size: 11px;
}

.invoice.customer-category-sheet table.customer-category-table thead th {
    font-size: 11px;
    background: #eeeeee;
}

.invoice.customer-category-sheet table.customer-category-table tbody td {
    vertical-align: middle;
    height: 10mm;
}

.customer-category-table tbody td {
    background: #fff;
}

.customer-category-table tbody tr:nth-child(even) td {
    background: #f7f7f7;
}

.customer-category-table tbody tr:nth-child(even) td:last-child,
.customer-category-table tbody td:last-child {
    background: #eeeeee;
}

.customer-category-table tfoot th {
    padding: 12px 6px;
    border-top: 2px solid #000;
    border-bottom: 4px double #000;
    font-size: 12px;
    background: #eeeeee;
    text-align: right;
}

.customer-category-sheet .inv-meta {
    border-bottom-color: #ccc;
}

.customer-category-sheet .inv-meta .m-label,
.customer-category-sheet .inv-foot {
    color: #555;
}

.customer-category-sheet .inv-foot {
    border-top-color: #bbb;
}

.invoice.customer-category-sheet table.customer-category-table tbody td {
    border-bottom-color: #ddd;
}

.customer-category-table thead {
    display: table-header-group;
}

.customer-category-table tbody tr,
.customer-category-table tfoot {
    break-inside: avoid;
}

.customer-category-sheet .inv-foot {
    padding: 3mm 0;
    font-size: 11px;
    line-height: 1.6;
    break-inside: avoid;
}

@media print {
    @page customer-category-report {
        size: A4 portrait;
        margin: 12mm;
    }

    .category-preview-scroll {
        display: contents;
    }

    .invoice.customer-category-sheet {
        page: customer-category-report;
        width: 186mm;
        min-height: 0;
        padding: 0;
        margin: 0;
    }
}

.date-nav-wrap .date-display:empty::before {
    content: 'วว/ดด/ปปปป';
    color: var(--muted);
}

.customer-print-picker {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 9px;
    margin: 0 16px 12px;
    padding: 11px 12px;
    border: 1px solid #d8e5dc;
    border-radius: 10px;
    background: #f5faf7;
}

.customer-print-picker-copy {
    display: flex;
    min-width: 205px;
    flex: 1;
    flex-direction: column;
}

.customer-print-picker-copy strong {
    color: #234b34;
    font-size: 15px;
}

.customer-print-picker-copy span {
    color: var(--muted);
    font-size: 10px;
}

.customer-print-picker > label {
    flex: 0 1 155px;
    min-width: 0;
    color: var(--on-surface-variant);
    font-size: 11px;
    font-weight: 600;
}

.customer-print-picker input[type='date'] {
    display: block;
    width: 100%;
    min-width: 0;
    height: 36px;
    margin-top: 5px;
    padding: 6px 10px;
    border-color: #cbdcd0;
    border-radius: 8px;
    background: #fff;
    color: var(--on-surface);
    font: inherit;
    font-size: 13px;
    font-weight: 400;
    color-scheme: light;
}

.customer-print-picker input[type='date']:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 128, 77, 0.12);
}

.customer-print-picker input[type='date']::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.65;
}

.customer-print-picker .customer-print-date {
    display: block;
    margin-top: 5px;
}

.customer-print-picker .customer-print-date input[type='date'] {
    margin-top: 0;
    color: transparent;
}

.customer-print-picker .customer-print-date .date-display {
    font-size: 13px;
    font-weight: 400;
    color: var(--on-surface);
}

.customer-print-selection-options {
    display: flex;
    flex-wrap: wrap;
    flex-basis: 100%;
    gap: 8px;
    font-size: 12px;
}

.customer-print-selection-options label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 7px 12px;
    border: 1px solid var(--action-border, var(--outline-variant));
    border-radius: var(--r-full);
    background: #fff;
    color: var(--primary);
    font-weight: 500;
    cursor: pointer;
    transition:
        background 0.15s,
        border-color 0.15s;
}

.customer-print-selection-options label:hover {
    border-color: var(--primary);
    background: #f1f8f4;
}

.customer-print-selection-options label:has(input:checked),
.customer-print-selection-options label:has(input:indeterminate) {
    border-color: var(--primary);
    background: var(--primary-container);
    color: var(--primary-dark);
}

.customer-print-check-col {
    width: 42px;
}

.customer-print-selection-options input[type='checkbox'],
.customer-print-check-col input[type='checkbox'] {
    appearance: none;
    display: inline-grid;
    place-content: center;
    flex: none;
    width: 18px;
    height: 18px;
    margin: 0;
    padding: 0;
    border: 1.5px solid #8bafa0;
    border-radius: 5px;
    background: #fff;
    vertical-align: middle;
    cursor: pointer;
    transition:
        background 0.15s,
        border-color 0.15s;
}

.customer-print-selection-options input:is(:checked, :indeterminate),
.customer-print-check-col input:is(:checked, :indeterminate) {
    border-color: var(--primary);
    background: var(--primary);
}

.customer-print-selection-options input:checked::after,
.customer-print-check-col input:checked::after {
    content: '';
    width: 9px;
    height: 5px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: translateY(-1px) rotate(-45deg);
}

.customer-print-selection-options input:indeterminate::after,
.customer-print-check-col input:indeterminate::after {
    content: '';
    width: 9px;
    height: 2px;
    border: 0;
    background: #fff;
    transform: none;
}

.customer-print-selection-options input:focus-visible,
.customer-print-check-col input:focus-visible {
    outline: 3px solid #9bc7af;
    outline-offset: 3px;
}

.customer-print-selection-options label:has(input:disabled),
.customer-print-check-col input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

@media (forced-colors: active) {
    .customer-print-selection-options input[type='checkbox'],
    .customer-print-check-col input[type='checkbox'] {
        appearance: auto;
    }
    .customer-print-selection-options input::after,
    .customer-print-check-col input::after {
        display: none;
    }
}

.customer-category-batch-sheet {
    margin-bottom: 24px;
}

@media print {
    .category-preview-scroll.customer-category-batch-page {
        display: block;
        overflow: visible;
        padding: 0;
    }

    .customer-category-batch-page + .customer-category-batch-page {
        break-before: page;
        page-break-before: always;
    }

    .customer-category-batch-sheet {
        margin-bottom: 0;
    }
}

.customer-history-print-controls {
    display: flex;
    align-items: center;
    gap: 9px;
}

.customer-history-format {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 4px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f1f5f9;
}

.customer-history-format-option {
    min-height: 36px;
    padding: 0 13px;
    border-radius: 8px;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

.customer-history-format-option:hover {
    color: #166534;
    background: rgba(255, 255, 255, 0.65);
}

.customer-history-format-option.is-active {
    color: #1e293b;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}

.customer-history-format-option.is-active .ui-icon {
    color: #16a34a;
}

.customer-history-print-button {
    min-height: 44px;
    padding-inline: 18px;
    border-color: #15803d;
    background: #15803d;
    color: #fff;
    box-shadow: 0 2px 5px rgba(21, 128, 61, 0.18);
}

.customer-history-print-button:hover {
    border-color: #166534;
    background: #166534;
    color: #fff;
}

/* ===== ใบกำกับภาษีอย่างย่อ (สลิปความร้อน 75mm) ===== */
.thermal {
    width: 75mm;
    max-width: 100%;
    margin: 0 auto;
    background: #fff;
    color: #111;
    padding: 4mm;
    position: relative;
    border: 1px solid var(--outline-variant);
    border-radius: 6px;
    box-shadow: var(--shadow-2);
    font-size: 13px;
    line-height: 1.55;
}

.thermal .th-corner {
    position: absolute;
    top: 0;
    right: 0;
    border-width: 0 26px 26px 0;
    border-style: solid;
    border-color: transparent #000 transparent transparent;
}

.thermal .th-logo {
    text-align: center;
    font-weight: 700;
    font-size: 15px;
    color: #000;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.thermal .th-logo .lg {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    background: #000;
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 13px;
}

.thermal .th-store {
    text-align: center;
    font-weight: 700;
    font-size: 15px;
}

.thermal .th-c {
    text-align: center;
}

.thermal .th-bold {
    font-weight: 700;
}

.thermal .th-copy-label {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    transform: translate(-50%, -50%) rotate(-25deg);
    margin: 0;
    color: rgba(208, 0, 0, 0.18);
    font-size: 52px;
    font-weight: 700;
    font-style: normal;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.thermal.receipt-screen-copy .th-copy-label,
.thermal.receipt-print-copy-version .th-copy-label {
    display: block;
}

.thermal hr.solid {
    border: none;
    border-top: 1px solid #111;
    margin: 10px 0;
}

.thermal hr.dash {
    border: none;
    border-top: 1px dashed #999;
    margin: 8px 0;
}

.thermal .th-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.thermal .th-row > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.thermal .th-row .r {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.thermal .th-note {
    margin: 3px 0;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.thermal .th-item {
    display: flex;
    gap: 8px;
    margin: 3px 0;
}

.thermal .th-item .q {
    flex: 0 0 auto;
    min-width: 20px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.thermal .th-item .n {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.thermal .th-item .a {
    flex: 0 0 auto;
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.thermal .th-sec {
    font-weight: 700;
    margin: 2px 0 4px;
}

.thermal .th-grand {
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    font-size: 15px;
}

.thermal .th-vat {
    text-align: center;
    letter-spacing: 0.1em;
    font-weight: 700;
    margin-top: 12px;
}

.thermal {
    overflow-wrap: anywhere;
}

.thermal .th-grand {
    gap: 8px;
    flex-wrap: wrap;
}

/* รูปดาวน์โหลดใช้ขนาดและสไตล์เดียวกับใบเสร็จตอนพิมพ์ */
.thermal.receipt-image-mode {
    box-shadow: none;
    border: none;
    border-radius: 0;
    width: 67mm;
    max-width: none;
    margin: 0;
    padding: 0 0 4mm;
    color: #000;
    line-height: 1.65;
}

.thermal.receipt-image-mode .muted {
    color: #000;
}

.thermal.receipt-image-mode .th-corner {
    display: none;
}

.receipt-print-copies {
    display: none;
}

/* ===== ใบกำกับภาษีเต็มรูป (พิมพ์ A5/คาร์บอน และดาวน์โหลดเป็น A4) ===== */
.ti {
    max-width: 800px;
    margin: 0 auto;
    background: #fff;
    color: #000;
    border: 1px solid #000;
    padding: 30px 34px;
    position: relative;
    font-size: 13px;
    line-height: 1.5;
}

.ti * {
    border-color: #000 !important;
}

.ti-head {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.ti-seller {
    flex: 1;
    min-width: 0;
    max-width: 58%;
    overflow-wrap: anywhere;
}

.ti-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.ti-logo .lg {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: cover;
    display: block;
}

.ti-logo .nm {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.ti-seller .line {
    font-size: 12.5px;
    line-height: 1.55;
}

.ti-title {
    flex: 0 0 auto;
    text-align: right;
    padding-right: 34px;
    padding-top: 4px;
}

.ti-title .t {
    font-size: 26px;
    font-weight: 700;
    white-space: nowrap;
}

.ti-title .s {
    font-size: 14px;
    margin-top: -2px;
}

.ti-info {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    margin-top: 6px;
}

.ti-buyer {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.ti-buyer > div {
    margin-bottom: 3px;
}

.ti-buyer .lbl {
    font-weight: 700;
    margin-bottom: 2px;
}

.ti-meta {
    width: 330px;
}

.ti-meta table {
    width: 100%;
    border-collapse: collapse;
}

.ti-meta td {
    padding: 2px 0;
    vertical-align: top;
}

.ti-meta td.l {
    width: 96px;
}

.ti-meta td.v {
    font-weight: 600;
}

.ti-meta .sep td {
    border-top: 1px solid #000;
    padding-top: 6px;
}

table.ti-items {
    width: 100%;
    border-collapse: collapse;
    margin-top: 16px;
}

table.ti-items thead th {
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    padding: 8px 6px;
    text-align: left;
    font-weight: 700;
    font-size: 12.5px;
}

table.ti-items thead th.num {
    text-align: right;
}

table.ti-items tbody td {
    padding: 8px 6px;
    vertical-align: top;
}

table.ti-items tbody td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.ti-body {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 12px;
    align-items: flex-start;
}

.ti-body-left {
    min-width: 0;
    flex: 1;
}

.ti-baht {
    min-width: 0;
    font-weight: 600;
    align-self: flex-end;
    padding: 8px 0;
    overflow-wrap: anywhere;
}

.ti-account-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 8px;
    padding: 8px 10px;
    border: 1px solid #000;
    font-size: 11.5px;
    line-height: 1.45;
}

.ti-account-copy {
    min-width: 0;
    flex: 1;
    overflow-wrap: anywhere;
}

.ti-account-copy > strong {
    display: block;
    margin-bottom: 2px;
    font-size: 12.5px;
}

.ti-account-qr {
    display: grid;
    width: 72px;
    height: 72px;
    flex: none;
    place-items: center;
    padding: 2px;
    background: #fff;
}

.ti-account-qr svg {
    display: block;
    width: 100%;
    height: 100%;
}

.ti-account-carbon {
    display: block;
    width: fit-content;
    min-width: 245px;
    max-width: 100%;
    margin-top: 0;
    padding: 4px 7px;
    font-size: 10.5px;
    line-height: 1.3;
}

.ti-account-carbon .ti-account-copy > strong {
    margin-bottom: 1px;
    font-size: 11.5px;
}

.ti-sum {
    flex: 0 0 340px;
    width: 340px;
}

.ti-sum .row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 3px 2px;
    font-variant-numeric: tabular-nums;
}

.ti-sum .row > span:last-child {
    flex-shrink: 0;
    white-space: nowrap;
}

.ti-sum .grand {
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    font-weight: 700;
    font-size: 15px;
    padding: 7px 2px;
    margin-top: 4px;
}

.ti-sum .ti-payment-row {
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px solid #000;
    font-weight: 600;
}

.ti-sum .ti-payment-detail {
    font-size: 12px;
    padding: 1px 2px 1px 8px;
}

.ti-sign {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    margin-top: 60px;
}

.ti-sign .col {
    flex: 1;
    text-align: center;
}

.ti-sign .in-name {
    font-size: 12.5px;
    margin-bottom: 40px;
}

.ti-sign .row2 {
    display: flex;
    gap: 12px;
}

.ti-sign .ln {
    flex: 1;
    border-top: 1px dotted #000;
    padding-top: 4px;
    font-size: 12px;
}

/* ใบกำกับภาษี A5 แนวตั้งตามแบบฟอร์ม: หัวบิล ตารางเต็มหน้า และส่วนชำระเงินท้ายใบ */
.ti-full-a5 {
    display: flex;
    flex-direction: column;
    font-size: 11px;
    line-height: 1.4;
}

.ti-full-a5 .ti-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.ti-full-a5 .ti-seller {
    flex: 1 1 56%;
    max-width: 56%;
    text-align: left;
}

.ti-full-a5 .ti-logo {
    justify-content: flex-start;
    margin-bottom: 4px;
}

.ti-full-a5 .ti-logo .lg {
    width: 32px;
    height: 32px;
}

.ti-full-a5 .ti-logo .nm {
    font-size: 17px;
}

.ti-full-a5 .ti-seller .line {
    font-size: 10.5px;
    line-height: 1.35;
    text-align: left;
}

.ti-full-a5 .ti-address-nowrap {
    white-space: nowrap;
}

.ti-full-a5 .ti-title {
    display: flex;
    flex: 1 1 44%;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 1px;
    min-width: 0;
    width: auto;
    padding: 0;
    text-align: right;
}

.ti-full-a5 .ti-title .t {
    font-size: 15px;
    white-space: normal;
}

.ti-full-a5 .ti-title .s {
    font-size: 11px;
    font-weight: 600;
}

.ti-full-a5.receipt-full-print-copy:not(.receipt-full-print-original) .ti-title .s {
    color: #d00000 !important;
    font-weight: 700;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.ti-full-a5 .ti-info {
    gap: 0;
    align-items: stretch;
    min-height: 18mm;
    margin-top: 7px;
    border: 1px solid #000;
}

.ti-full-a5 .ti-buyer {
    padding: 4px 6px;
}

.ti-full-a5 .ti-buyer > div {
    margin-bottom: 1px;
}

.ti-full-a5 .ti-meta {
    flex: 0 0 39%;
    width: 39%;
    border-left: 1px solid #000;
}

.ti-full-a5 .ti-meta table {
    height: 100%;
}

.ti-full-a5 .ti-meta tr + tr,
.ti-full-a5 .ti-meta tr + tr td {
    border-top: 1px solid #000;
}

.ti-full-a5 .ti-meta td {
    padding: 3px 4px;
}

.ti-full-a5 .ti-meta td.l {
    width: 72px;
    white-space: nowrap;
}

.ti-full-a5 .ti-meta td.v {
    overflow-wrap: anywhere;
}

.ti-full-a5 .ti-meta tr:nth-child(-n + 2) td.v {
    white-space: nowrap;
    overflow-wrap: normal;
}

.ti-full-a5 .ti-items-frame {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 60mm;
    min-height: 60mm;
    margin-top: 0;
    border: 1px solid #000;
    border-top: 0;
}

.ti-full-a5 .ti-items-divider {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    border-left: 1px solid #000;
    pointer-events: none;
}

.ti-full-a5 .ti-items-divider:nth-of-type(1) {
    left: 6%;
}

.ti-full-a5 .ti-items-divider:nth-of-type(2) {
    left: 50%;
}

.ti-full-a5 .ti-items-divider:nth-of-type(3) {
    left: 61%;
}

.ti-full-a5 .ti-items-divider:nth-of-type(4) {
    left: 76%;
}

.ti-full-a5 .ti-items-divider:nth-of-type(5) {
    left: 88%;
}

.ti-full-a5 table.ti-items {
    position: relative;
    display: block;
    margin-top: 0;
}

.ti-full-a5 table.ti-items thead,
.ti-full-a5 table.ti-items tbody {
    display: block;
}

.ti-full-a5 table.ti-items tr {
    display: grid;
    grid-template-columns: 6% 44% 11% 15% 12% 12%;
}

.ti-full-a5 table.ti-items thead th {
    border-top: 0;
    border-bottom: 1px solid #000;
    padding: 4px 2px;
    font-size: 9.5px;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.ti-full-a5 table.ti-items tbody td {
    padding: 1px 2px;
    font-size: 9.5px;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.ti-full-a5 table.ti-items th {
    width: auto !important;
}

.ti-full-a5 .ti-items-note {
    position: relative;
    z-index: 1;
    margin-top: auto;
    padding: 3px 5px;
    border-top: 1px solid #000;
    background: #fff;
    font-size: 10px;
    line-height: 1.35;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.ti-full-a5 .ti-a5-footer {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: auto auto;
    border: 1px solid #000;
    border-top: 0;
    break-inside: avoid;
}

.ti-full-a5 .ti-body {
    grid-column: 2;
    grid-row: 1;
    display: block;
    margin-top: 0;
    border-left: 1px solid #000;
}

.ti-full-a5 .ti-sum {
    width: 100%;
    flex-basis: auto;
}

.ti-full-a5 .ti-sum .row {
    padding: 2px 5px;
    border-bottom: 1px solid #000;
}

.ti-full-a5 .ti-sum .grand {
    margin: 0;
    padding: 3px 5px;
    border-top: 0;
    border-bottom: 1px solid #000;
    font-size: 12px;
}

.ti-full-a5 .ti-sum .ti-baht {
    margin: 0;
    padding: 2px 5px;
    border-bottom: 1px solid #000;
    font-size: 10px;
    text-align: right;
}

.ti-full-a5 .ti-sum .ti-payment-row {
    margin: 0;
    padding: 2px 5px;
    border-top: 0;
    border-bottom: 0;
}

.ti-full-a5 .ti-credit-label {
    color: #c62828;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.ti-full-a5 .ti-sum .ti-payment-detail {
    margin: 0;
    padding: 1px 5px 1px 12px;
    border-top: 0;
    border-bottom: 0;
    font-size: 9.5px;
}

.ti-full-a5 .ti-a5-footer > .ti-account-box {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 8px 12px;
    margin: 0;
    border: 0;
}

.ti-full-a5 .ti-account-head {
    margin-bottom: 6px;
}

.ti-full-a5 .ti-account-badge {
    display: inline-block;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #000;
    padding: 1px 7px;
    border: 1px solid #000;
    border-radius: 4px;
    background: #f4f6f4;
}

.ti-full-a5 .ti-account-body {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ti-full-a5 .ti-a5-footer .ti-account-qr {
    width: 22mm;
    height: 22mm;
    min-width: 22mm;
    padding: 2px;
    border: 1px solid #000;
    border-radius: 4px;
    background: #fff;
    box-sizing: border-box;
}

.ti-full-a5 .ti-account-info {
    flex: 1;
    min-width: 0;
    line-height: 1.45;
}

.ti-full-a5 .ti-qr-beneficiary {
    align-self: stretch;
    margin-top: 3px;
    font-size: 8.5px;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.ti-full-a5 .ti-acc-line {
    margin-bottom: 2px;
}

.ti-full-a5 .ti-acc-line .lbl {
    font-size: 9px;
    color: #555;
}

.ti-full-a5 .ti-acc-line .val {
    display: block;
    font-size: 10.5px;
    color: #000;
}

.ti-full-a5 .ti-acc-line .val-num {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.ti-full-a5 .ti-acc-note {
    font-size: 8.5px;
    color: #666;
    margin-top: 4px;
}

.ti-full-a5 .ti-sign-section {
    grid-column: 1 / -1;
    grid-row: 2;
    border-top: 1px solid #000;
    break-inside: avoid;
}

.ti-full-a5 .ti-sign {
    display: grid;
    grid-template-columns: 50% 50%;
    gap: 0;
    margin: 0;
}

.ti-full-a5 .ti-sign .col {
    min-width: 0;
    min-height: 22mm;
    padding: 5px;
    text-align: left;
}

.ti-full-a5 .ti-sign .col + .col {
    border-left: 1px solid #000;
}

.ti-full-a5 .ti-sign .in-name {
    margin-bottom: 7mm;
    font-size: 10px;
    text-align: center;
}

.ti-full-a5 .ti-sign .row2 {
    gap: 4px;
}

.ti-full-a5 .ti-sign .ln {
    font-size: 9px;
    text-align: center;
}

/* กระดาษคาร์บอน 9 × 5.5 นิ้ว: จัดเนื้อหาให้อยู่ระหว่างแนวรูพรุน */
.ti-carbon {
    display: flex;
    flex-direction: column;
    font-size: 13px;
    line-height: 1.35;
}

.ti-carbon .ti-head {
    align-items: flex-start;
}

.ti-carbon .ti-seller {
    max-width: 53%;
}

.ti-carbon .ti-logo {
    margin-bottom: 4px;
}

.ti-carbon .ti-logo .lg {
    width: 32px;
    height: 32px;
}

.ti-carbon .ti-logo .nm {
    font-size: 18px;
}

.ti-carbon .ti-seller .line {
    font-size: 11.5px;
    line-height: 1.35;
}

.ti-carbon .ti-title {
    max-width: 47%;
    padding-right: 0;
}

.ti-carbon .ti-title .t {
    font-size: 18px;
    white-space: normal;
}

.ti-carbon .ti-title .s {
    font-size: 13px;
}

.ti-carbon .ti-info {
    gap: 18px;
    margin-top: 4px;
}

.ti-carbon .ti-meta {
    flex: 0 0 34%;
    width: auto;
}

.ti-carbon table.ti-items {
    margin-top: 8px;
    table-layout: fixed;
}

.ti-carbon table.ti-items thead th {
    padding: 5px 4px;
    font-size: 11.5px;
}

.ti-carbon table.ti-items tbody td {
    padding: 0.25mm 1mm;
    font-size: 11px;
    line-height: 1.15;
}

.ti-carbon table.ti-items thead tr:last-child th {
    border-top: 1px solid #000;
}

.ti-carbon table.ti-items thead tr:last-child th,
.ti-carbon table.ti-items tbody td {
    border-right: 1px solid #000;
}

.ti-carbon table.ti-items thead tr:last-child th:first-child,
.ti-carbon table.ti-items tbody td:first-child {
    border-left: 1px solid #000;
}

.ti-carbon table.ti-items tbody tr:last-child td {
    border-bottom: 1px solid #000;
}

.ti-carbon table.ti-items tbody td {
    height: 4.4mm;
}

/* Match the account box edge to the item description edge; the four numeric columns total 350px. */
.ti-carbon .ti-body {
    display: grid;
    grid-template-columns: minmax(0, calc(100% - 350px)) minmax(0, 1fr);
    align-items: start;
    gap: 6mm;
    margin-top: 1mm;
}

.ti-carbon .ti-body-left {
    min-width: 0;
    padding: 0;
}

.ti-carbon .ti-sum {
    min-width: 0;
    width: 100%;
}

.ti-carbon .ti-sum .row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: baseline;
    gap: 2mm;
    padding: 0.25mm 0;
    border: 0;
    font-size: 11px;
    line-height: 1.25;
}

.ti-carbon .ti-sum .row > span:first-child {
    min-width: 0;
    overflow-wrap: anywhere;
}

.ti-carbon .ti-sum .row > span:last-child {
    text-align: right;
}

.ti-carbon .ti-sum .grand {
    margin-top: 0.5mm;
    padding: 0.5mm 0;
    font-size: 12px;
}

.ti-carbon .ti-sum .ti-payment-row {
    margin-top: 0.5mm;
    padding: 0.25mm 0;
}

.ti-carbon .ti-sum .ti-payment-detail {
    padding: 0.25mm 0 0.25mm 2mm;
}

.ti-carbon .ti-sum .ti-carbon-baht {
    padding: 0.25mm 0;
    font-size: 10.5px;
    line-height: 1.25;
    text-align: right;
}

.ti-carbon .ti-body .ti-account-carbon {
    width: 100%;
    min-width: 0;
    margin: 0;
    border: 1px solid #000;
    padding: 1.5mm 2mm;
    font-size: 11px;
    line-height: 1.3;
}

.ti-carbon .ti-body .ti-account-copy > strong {
    margin-bottom: 0.75mm;
    font-size: 11.5px;
}

.ti-carbon .ti-account-row {
    display: grid;
    grid-template-columns: 26mm minmax(0, 1fr);
    align-items: baseline;
    gap: 2mm;
    padding: 0.25mm 0;
}

.ti-carbon .ti-account-row > :last-child {
    min-width: 0;
    overflow-wrap: anywhere;
}

.ti-carbon .ti-sign {
    width: 90%;
    justify-content: center;
    gap: 6%;
    margin: 1mm auto 0;
    padding-top: 0;
    border-top: 0;
}

.ti-carbon .ti-sign .col {
    flex: 1 1 0;
}

.ti-carbon .ti-sign .in-name {
    margin-bottom: 7mm;
    font-size: 12px;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.ti-carbon .ti-sign .ln {
    font-size: 13px;
}

.ti-carbon.receipt-carbon-summary-page .ti-body {
    border: 0;
}

.ti-carbon.receipt-carbon-summary-page .ti-sum {
    border: 0;
}

/* ส่งออกเอกสารเต็มรูปบน A4; คาร์บอนคงสัดส่วนกระดาษจริงก่อนวางบน A4 */
.ti.receipt-image-mode {
    width: 210mm;
    min-width: 210mm;
    max-width: none;
    min-height: 297mm;
    margin: 0;
    padding: 18mm;
    border: none;
    box-shadow: none;
}

.ti.receipt-image-mode .ti-title .t {
    font-size: 22px;
}

.ti-full-a5.receipt-image-mode {
    width: 148mm;
    min-width: 148mm;
    height: 210mm;
    min-height: 210mm;
    padding: 9mm;
}

.ti-full-a5.receipt-image-mode .ti-title .t {
    font-size: 15px;
}

.ti-carbon.receipt-image-mode {
    width: 9in;
    min-width: 9in;
    min-height: 5.5in;
    padding: 0.36in 0.47in 0.43in;
}

.ti-carbon.receipt-image-mode .ti-title .t {
    font-size: 21px;
}

.receipt-full-print-copies {
    display: none;
}

.receipt-carbon-print-copies {
    display: none;
}

/* ============ Void modal (ยกเลิกบิล) ============ */
.void-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    border: none;
    border-radius: var(--r-lg);
    padding: 0;
    width: min(520px, calc(100vw - 32px));
    max-height: min(640px, calc(100vh - 32px));
    box-shadow: var(--shadow-3);
    overflow: hidden;
    display: none;
    flex-direction: column;
    /* ซ่อนตอนปิด — ต้องระบุชัดเจน ไม่งั้นจะทับกฎ display:none ของเบราว์เซอร์ ทำให้เปิดค้างตลอด */
}

.void-dialog[open] {
    display: flex;
    animation: void-pop 0.16s ease-out;
}

@keyframes void-pop {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.void-dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
}

.void-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px 20px 16px;
    flex: none;
}

.void-ic {
    width: 44px;
    height: 44px;
    border-radius: var(--r-full);
    flex: none;
    display: grid;
    place-items: center;
    background: var(--danger-bg);
    color: var(--danger);
    font-size: 19px;
}

.void-ic .ui-icon {
    width: 20px;
    height: 20px;
}

.void-titles {
    flex: 1;
    min-width: 0;
}

.void-head h3 {
    font-size: 17px;
    font-weight: 700;
    color: var(--on-surface);
}

.void-sub {
    font-size: 13px;
    color: var(--on-surface-variant);
    margin-top: 2px;
}

.void-x {
    background: var(--surface-container-low);
    border: none;
    width: 30px;
    height: 30px;
    border-radius: var(--r-full);
    font-size: 14px;
    cursor: pointer;
    color: var(--on-surface-variant);
    flex: none;
    display: grid;
    place-items: center;
}

.void-x svg {
    width: 15px;
    height: 15px;
}

.void-x:hover {
    background: var(--surface-container);
    color: var(--on-surface);
}

.void-body {
    padding: 4px 20px 20px;
    overflow-y: auto;
    flex: 1;
}

.void-body .field:last-child {
    margin-bottom: 0;
}

.void-reasons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-top: 6px;
}

.void-chk {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    border-radius: var(--r);
    border: 1.5px solid var(--outline-variant);
    background: #fff;
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    transition:
        border-color 0.12s,
        background 0.12s,
        color 0.12s;
}

.void-chk:hover {
    border-color: var(--danger);
}

.void-chk input {
    display: none;
}

.void-box {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border: 1.5px solid var(--outline-variant);
    flex: none;
    display: grid;
    place-items: center;
    font-size: 12px;
    line-height: 1;
    color: #fff;
    transition:
        background 0.12s,
        border-color 0.12s;
}

.void-chk:has(input:checked) {
    background: var(--danger-bg);
    border-color: var(--danger);
    color: var(--danger);
}

.void-chk:has(input:checked) .void-box {
    background: var(--danger);
    border-color: var(--danger);
}

.void-chk:has(input:checked) .void-box::after {
    content: '✓';
}

.void-req-tag {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--danger);
    background: var(--danger-bg);
    padding: 2px 8px;
    border-radius: var(--r-full);
    vertical-align: middle;
    margin-left: 2px;
}

.void-foot {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    flex: none;
    border-top: 1px solid var(--outline-variant);
    background: var(--surface-container-low);
}

.void-foot .btn {
    min-width: 108px;
}

.void-blocked-dialog {
    width: min(440px, calc(100vw - 32px));
    background: #fff;
}

.void-blocked-dialog .void-ic {
    color: #b77912;
    background: #fff3d6;
}

.void-blocked-dialog .void-ic svg {
    width: 23px;
    height: 23px;
}

.void-blocked-dialog .void-sub {
    overflow-wrap: anywhere;
}

.void-blocked-dialog .void-body p {
    margin: 0;
    color: var(--on-surface-variant);
    font-size: 14px;
    line-height: 1.7;
}

/* ============ Form modal (ป็อปอัพฟอร์มเพิ่ม/แก้ไข เช่น หน้าคลังสินค้า) ============ */
.form-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    border: none;
    border-radius: var(--r-lg);
    padding: 0;
    width: min(600px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    box-shadow: var(--shadow-3);
    overflow: hidden;
    display: none;
    flex-direction: column;
    /* ซ่อนตอนปิด — ต้องระบุชัดเจน ไม่งั้นทับ display ของเบราว์เซอร์ */
}

.form-dialog[open] {
    display: flex;
    animation: void-pop 0.16s ease-out;
}

.stock-warning-dialog {
    width: min(430px, calc(100vw - 32px));
}

.stock-warning-dialog[open] {
    display: block;
}

.form-dialog::backdrop {
    background: rgba(0, 0, 0, 0.45);
}

.form-dialog > form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: calc(100vh - 48px);
}

/* ============ PromptPay QR modal ============ */
.promptpay-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    border: none;
    border-radius: var(--r-lg);
    padding: 0;
    width: min(460px, calc(100vw - 24px));
    max-height: calc(100vh - 24px);
    box-shadow: var(--shadow-3);
    overflow: hidden;
    display: none;
    flex-direction: column;
}

.promptpay-dialog[open] {
    display: flex;
    animation: void-pop 0.16s ease-out;
}

.promptpay-dialog::backdrop {
    background: rgba(0, 0, 0, 0.58);
}

.promptpay-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--outline-variant);
}

.promptpay-head h3 {
    margin: 0 0 2px;
    font-size: 19px;
    color: var(--primary-dark);
}

.promptpay-body {
    padding: 18px 20px;
    text-align: center;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.promptpay-qr {
    width: min(300px, 72vw);
    min-height: min(300px, 72vw);
    margin: 0 auto 10px;
    display: grid;
    place-items: center;
    background: #fff;
    border: 1px solid var(--outline-variant);
    border-radius: var(--r-md);
    overflow: hidden;
}

.promptpay-qr svg {
    width: 100%;
    height: auto;
    display: block;
}

.promptpay-loading,
.promptpay-error {
    padding: 28px;
    color: var(--on-surface-variant);
}

.promptpay-error {
    color: var(--danger);
}

.promptpay-amount {
    font-size: 32px;
    line-height: 1.2;
    font-weight: 800;
    color: var(--primary-dark);
    font-variant-numeric: tabular-nums;
}

.promptpay-account {
    margin-top: 7px;
    font-size: 15px;
    font-weight: 700;
}

.promptpay-warning {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 7px;
    margin-top: 14px;
    padding: 10px 12px;
    background: var(--warning-bg, #fff3cd);
    border-radius: var(--r);
    font-size: 12.5px;
    color: #6b5000;
}

.promptpay-warning svg {
    width: 17px;
    height: 17px;
    flex: none;
}

.btn-line-icon {
    width: 16px;
    height: 16px;
    margin-right: 5px;
    vertical-align: -3px;
}

.promptpay-foot {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid var(--outline-variant);
    background: var(--surface-container-low);
    flex: none;
}

.promptpay-foot .btn {
    min-width: 128px;
}

.promptpay-foot .promptpay-cancel {
    min-width: 72px;
}

.promptpay-foot .promptpay-print-btn {
    min-width: 108px;
}

.promptpay-foot .promptpay-confirm {
    min-width: 152px;
}

.promptpay-print-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.promptpay-inline {
    margin-top: 8px;
    overflow: hidden;
    border: 1px solid #b9dcc4;
    border-radius: 10px;
    background: #f7fcf8;
}

.promptpay-inline[hidden] {
    display: none;
}

.pos-transfer-account {
    display: grid;
    gap: 2px;
    margin: 8px 0;
    padding: 10px 12px;
    border: 1px solid var(--outline-variant);
    border-radius: var(--r);
    background: #f7fcf8;
    font-size: 12px;
}

.pos-transfer-account[hidden] {
    display: none;
}

.pos-transfer-account b {
    font-size: 16px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
}

.promptpay-inline-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 10px;
    border-bottom: 1px solid #d6e9dc;
    color: #17613c;
    font-size: 12px;
}

.promptpay-inline-actions {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.promptpay-inline-head #promptPayCountdown {
    font-size: 9px;
}

.promptpay-inline .promptpay-print-btn {
    min-height: 25px;
    padding: 3px 7px;
    border-radius: 6px;
    font-size: 10px;
}

.promptpay-inline .promptpay-body {
    padding: 9px 10px 7px;
    overflow: visible;
}

.promptpay-inline .promptpay-qr {
    width: 150px;
    min-height: 150px;
    margin-bottom: 6px;
    border-radius: 8px;
}

.promptpay-inline .promptpay-amount {
    font-size: 22px;
}

.promptpay-inline .promptpay-account {
    margin-top: 3px;
    font-size: 13px;
}

/* ============ Debtor aging summary ============ */
.debtor-page-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.debtor-page-title-row .page-title {
    font-size: 25px;
}

.debtor-page-badge {
    padding: 4px 10px;
    border: 1px solid #cfe5d5;
    border-radius: 99px;
    background: #eef8f1;
    color: #28583a;
    font-size: 11px;
    font-weight: 600;
}

.debtor-summary-grid {
    gap: 14px;
    align-items: stretch;
}

.debtor-total-card {
    min-height: 188px;
    justify-content: space-between;
    padding: 19px 21px;
    border-color: #e1e8e3;
    background: #fff;
}

.debtor-total-main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.debtor-total-card .stat-label {
    color: #66746b;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.debtor-total-card .stat-value {
    margin-top: 8px;
    color: #17251c;
    font-size: 30px;
}

.debtor-total-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid #d8eadc;
    border-radius: 12px;
    background: #edf8f0;
    color: #1b5736;
    font-size: 22px;
    font-weight: 800;
}

.debtor-total-foot {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    border-top: 1px solid #edf0ee;
    padding-top: 10px;
    color: #748078;
    font-size: 11px;
}

.debtor-aging-card {
    appearance: none;
    width: 100%;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    display: flex;
    min-height: 188px;
    flex-direction: column;
    justify-content: flex-start;
    gap: 8px;
    padding: 17px 18px;
    border: 1px solid var(--outline-variant);
    border-top: 4px solid #d49a19;
    transition:
        transform 0.12s,
        box-shadow 0.12s,
        border-color 0.12s;
}

.debtor-aging-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-2);
    border-color: var(--primary);
}

.debtor-aging-card:focus-visible {
    outline: 3px solid var(--secondary-container);
    outline-offset: 2px;
}

.debtor-aging-card.aging-7 {
    border-top: 4px solid #e6a700;
}

.debtor-aging-card.aging-15 {
    border-top: 4px solid #e26f00;
}

.debtor-aging-card.aging-30 {
    border-top: 4px solid var(--danger);
}

.debtor-aging-card .stat-top {
    width: 100%;
}

.debtor-aging-card .stat-label {
    font-size: 12px;
    font-weight: 700;
}

.debtor-aging-card .stat-value {
    font-size: 26px;
}

.debtor-aging-status {
    padding: 3px 8px;
    border: 1px solid transparent;
    border-radius: 99px;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
}

.aging-status-7 {
    border-color: #f3dea0;
    background: #fff8e4;
    color: #936700;
}

.aging-status-15 {
    background: #f0f2f1;
    color: #68736c;
}

.aging-status-30 {
    border-color: #f4d1ce;
    background: #fff0ef;
    color: #a13e37;
}

.debtor-aging-card.aging-15 {
    border-top-color: #aeb8b1;
}

.debtor-aging-card.aging-30 {
    background: linear-gradient(180deg, #fff9f8, #fff);
}

.debtor-aging-period {
    color: var(--on-surface-variant);
    font-size: 11px;
}

.debtor-aging-period span {
    color: var(--muted);
}

.debtor-aging-amount {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-top: 2px;
}

.debtor-aging-amount span {
    color: var(--on-surface-variant);
    font-size: 11px;
}

.debtor-aging-amount strong {
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

.aging-7 .debtor-aging-amount strong {
    color: #a97900;
}

.aging-30 .stat-value,
.aging-30 .debtor-aging-amount strong {
    color: #bd4140;
}

.debtor-card-hint {
    display: flex;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 7px;
    border-top: 1px solid var(--surface-container-high);
    color: var(--primary);
    font-size: 11px;
    font-weight: 700;
}

.debtor-aging-note {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: -7px 0 17px;
    color: var(--on-surface-variant);
    font-size: 11px;
}

.debtor-aging-note > span {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    flex: none;
    border-radius: 50%;
    background: #edf4ef;
    color: #55745e;
    font-size: 13px;
}

.debtor-bills-card {
    overflow: visible;
}

.debtor-table-toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--outline-variant);
}

.debtor-table-heading .card-title {
    margin: 0 0 3px;
    color: var(--primary-dark);
    font-size: 17px;
}

.debtor-table-title-en {
    color: var(--on-surface-variant);
    font-size: 11px;
    font-weight: 400;
}

.debtor-table-heading .muted {
    font-size: 11px;
}

.debtor-toolbar-controls {
    display: flex;
    align-items: flex-end;
    gap: 9px;
}

.debtor-search-field {
    width: min(340px, 31vw);
    margin: 0;
}

.debtor-search-field > label {
    margin-bottom: 5px;
    font-size: 11px;
}

.debtor-search-field .input {
    height: 42px;
    border-radius: 10px;
}

.debtor-status-field {
    width: 165px;
    margin: 0;
}

.debtor-status-field > label {
    margin-bottom: 5px;
    font-size: 11px;
}

.debtor-status-field .input {
    height: 42px;
    border-radius: 10px;
}

.debtor-print-btn {
    height: 42px;
    white-space: nowrap;
    border-radius: 10px;
}

.debtor-print-btn:disabled,
#debtorExportHistory:disabled {
    background: #f5f7f5;
    color: #87928a;
    cursor: not-allowed;
}

#debtorExportHistory {
    height: 42px;
    white-space: nowrap;
    border-radius: 10px;
}

.debtor-table-wrap {
    padding: 0 14px 14px;
}

.debtor-table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px 14px;
    border-top: 1px solid #edf0ee;
    color: #68776d;
    font-size: 11px;
}

.debtor-table-footer strong {
    color: #273d2e;
}

.debtor-bills-table {
    min-width: 940px;
}

.debtor-bills-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding-top: 13px;
    padding-bottom: 13px;
    background: #f1f6f2;
    color: #4d6656;
    font-size: 11px;
    text-transform: none;
}

.debtor-bills-table tbody td {
    height: 58px;
    font-size: 12px;
}

.debtor-bills-table tbody tr:hover {
    background: #f3f8f4;
}

.debtor-bills-table .debtor-row-overdue {
    background: #fffafa;
}

.debtor-bills-table .debtor-row-overdue:hover {
    background: #fff3f2;
}

.debtor-invoice-link {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.debtor-customer-cell {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 140px;
    font-weight: 600;
}

.debtor-customer-avatar {
    display: grid;
    place-items: center;
    width: 29px;
    height: 29px;
    flex: none;
    border: 1px solid #dce9df;
    border-radius: 10px;
    background: #f0f7f2;
    color: #356447;
    font-size: 12px;
    font-weight: 800;
}

.debtor-aging-dialog {
    width: min(900px, calc(100vw - 32px));
}

.debtor-aging-table {
    min-width: 720px;
}

.debtor-print-action {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.debtor-print-action svg {
    width: 17px;
    height: 17px;
}

@media (max-width: 1280px) {
    .debtor-table-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .debtor-toolbar-controls {
        flex-wrap: wrap;
    }

    .debtor-search-field {
        width: min(340px, 42vw);
    }
}

.debtor-statement-sheet {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    padding: 30px 34px 24px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #111;
    border-radius: 0;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.08);
    color: #111;
}

.debtor-statement-sheet .ti-sign,
.debtor-statement-sheet .inv-sign,
.debtor-statement-sheet .debtor-statement-sign {
    display: none !important;
}

.debtor-statement-accent {
    display: none;
}

.debtor-statement-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 17px;
    border-bottom: 2px solid #111;
}

.debtor-statement-brand {
    display: flex;
    max-width: 52%;
    align-items: flex-start;
    gap: 12px;
}

.debtor-statement-logo {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    flex: none;
    overflow: hidden;
    border: 1px solid #aaa;
    border-radius: 0;
    background: #fff;
}

.debtor-statement-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.debtor-statement-store {
    margin-bottom: 5px;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #111;
}

.debtor-statement-brand > div:last-child > div:not(.debtor-statement-store) {
    color: #555;
    font-size: 11px;
    line-height: 1.55;
}

.debtor-statement-title {
    min-width: 290px;
    text-align: right;
}

.debtor-statement-eyebrow {
    margin-bottom: 3px;
    color: #666;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.18em;
}

.debtor-statement-title h1 {
    margin: 0 0 8px;
    color: #111;
    font-size: 22px;
    line-height: 1.2;
}

.debtor-statement-docmeta {
    margin-left: auto;
    width: 210px;
    border-top: 1px solid #dbe4dd;
}

.debtor-statement-docmeta > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 4px 0;
    border-bottom: 1px solid #ddd;
    font-size: 10px;
}

.debtor-statement-docmeta span {
    color: #555;
}

.debtor-statement-docmeta strong {
    color: #111;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.debtor-statement-not-receipt {
    display: inline-block;
    margin-top: 7px;
    padding: 3px 8px;
    border: 1px solid #bbb;
    border-radius: 4px;
    color: #444;
    background: #f5f5f5;
    font-size: 9px;
    font-weight: 700;
}

.debtor-statement-section-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 14px;
    padding-bottom: 5px;
    border-bottom: 1px solid #111;
    color: #222;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.debtor-statement-customer {
    display: grid;
    grid-template-columns: 1.35fr 0.65fr;
    gap: 8px 28px;
    margin: 0 0 15px;
    padding: 11px 2px 13px;
    border: 0;
    border-bottom: 1px solid #aaa;
    border-radius: 0;
    background: #fff;
}

.debtor-statement-customer > div {
    display: flex;
    gap: 10px;
    align-items: baseline;
}

.debtor-statement-customer span {
    min-width: 64px;
    color: #666;
    font-size: 10px;
}

.debtor-statement-customer strong {
    color: #222;
    font-size: 12px;
    font-weight: 650;
}

.debtor-customer-primary strong {
    color: #111;
    font-size: 15px;
}

.debtor-statement-address {
    grid-column: 1 / -1;
}

.debtor-statement-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
    margin-bottom: 9px;
}

.debtor-metric {
    display: flex;
    min-height: 76px;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    padding: 11px 14px;
    border: 1px solid #dfe7e1;
    border-radius: 5px;
    background: #fff;
}

.debtor-metric > span {
    color: #555;
    font-size: 10px;
    font-weight: 700;
}

.debtor-metric > strong {
    color: #222;
    font-size: 20px;
    font-variant-numeric: tabular-nums;
}

.debtor-metric > small {
    color: #777;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.debtor-metric-due {
    border-color: #777;
    background: #ededed;
}

.debtor-metric-due > strong {
    color: #111;
    font-size: 24px;
}

.debtor-metric-due > small {
    color: #555;
    font-size: 9px;
    letter-spacing: 0;
}

.debtor-statement-balance-words {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
    padding: 8px 12px;
    border-radius: 4px;
    color: #fff;
    background: #252525;
    font-size: 10px;
}

.debtor-statement-balance-words strong {
    color: #fff;
    font-size: 11px;
}

.debtor-table-caption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 7px;
}

.debtor-table-caption > div {
    display: flex;
    align-items: baseline;
    gap: 9px;
}

.debtor-table-caption strong {
    color: #222;
    font-size: 14px;
}

.debtor-table-caption > div > span {
    color: #7a877f;
    font-size: 9px;
}

.debtor-bill-count {
    padding: 3px 8px;
    border-radius: 99px;
    background: #eee;
    color: #444;
    font-size: 9px;
    font-weight: 700;
}

.debtor-statement-table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
    border: 1px solid #dbe4dd;
    border-radius: 4px;
    overflow: hidden;
}

.debtor-statement-table thead th {
    padding: 9px 8px;
    border-bottom: 1px solid #111;
    color: #fff;
    background: #222;
    font-size: 10px;
    font-weight: 700;
    white-space: normal;
    overflow-wrap: anywhere;
}

.debtor-statement-table tbody td {
    padding: 9px 8px;
    border-bottom-color: #ddd;
    font-size: 10.5px;
}

.debtor-statement-table th,
.debtor-statement-table td {
    overflow-wrap: anywhere;
}

.debtor-statement-table tbody td:nth-child(2) {
    white-space: nowrap;
    overflow-wrap: normal;
}

.debtor-statement-table tbody tr:nth-child(even) {
    background: #f7f7f7;
}

.debtor-statement-table tbody tr.debtor-statement-row-aged {
    background: #eee;
}

.debtor-statement-table tbody td:last-child strong {
    color: #111;
    font-size: 11px;
}

.debtor-age-badge {
    display: inline-block;
    min-width: 48px;
    padding: 2px 6px;
    border: 1px solid #ccc;
    border-radius: 99px;
    color: #444;
    background: #f2f2f2;
    text-align: center;
    font-size: 8px;
    font-weight: 800;
    white-space: nowrap;
}

.debtor-age-badge.age-7,
.debtor-age-badge.age-15,
.debtor-age-badge.age-30 {
    border-color: #888;
    color: #222;
    background: #e5e5e5;
}

.debtor-statement-table tfoot th {
    padding: 10px 8px;
    border-top: 2px solid #222;
    color: #222;
    background: #e9e9e9;
    font-size: 10px;
    font-weight: 800;
}

.debtor-statement-table tfoot th:last-child {
    color: #111;
    font-size: 13px;
}

.debtor-statement-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 24px;
    align-items: start;
    margin-top: 13px;
    padding-top: 4px;
}

.debtor-summary-words {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding-top: 8px;
    color: #555;
    font-size: 10px;
}

.debtor-summary-words strong {
    color: #111;
    font-size: 11px;
    font-weight: 600;
}

.debtor-summary-words small {
    margin-top: 8px;
    color: #666;
    font-size: 9px;
}

.debtor-summary-totals > div {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 6px 2px;
    color: #333;
    font-size: 11px;
}

.debtor-summary-totals strong {
    color: #111;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.debtor-summary-totals .grand {
    margin-top: 4px;
    padding: 9px 2px;
    border-top: 1.5px solid #111;
    border-bottom: 3px double #111;
    color: #111;
    font-size: 13px;
    font-weight: 800;
}

.debtor-summary-totals .grand strong {
    font-size: 16px;
}

.debtor-statement-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 14px 0 18px;
    padding: 10px 0;
    border: 0;
    border-top: 1px solid #bbb;
    border-bottom: 1px solid #bbb;
    border-radius: 0;
    color: #444;
    background: #fff;
    font-size: 9px;
}

.debtor-note-icon {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    flex: none;
    border-radius: 50%;
    color: #333;
    background: #e5e5e5;
}

.debtor-note-icon svg {
    width: 14px;
    height: 14px;
}

.debtor-statement-note > div:nth-child(2) {
    flex: 1;
}

.debtor-statement-note strong {
    display: block;
    color: #222;
    font-size: 10px;
}

.debtor-statement-note p {
    margin: 2px 0 0;
    line-height: 1.45;
}

.debtor-note-contact {
    flex: none;
    padding-left: 12px;
    border-left: 1px solid #ccc;
    text-align: right;
}

.debtor-note-contact span {
    display: block;
    color: #666;
    font-size: 8px;
}

.debtor-note-contact strong {
    margin-top: 2px;
    white-space: nowrap;
}

.debtor-payment-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 14px 0 0;
    padding: 12px 14px;
    border: 1px solid #cfd9d1;
    border-radius: 6px;
    background: #f8fbf8;
}

.debtor-payment-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: #333;
    font-size: 10px;
    line-height: 1.45;
}

.debtor-payment-copy > strong {
    color: #1b4332;
    font-size: 12px;
}

.debtor-promptpay-qr {
    display: grid;
    width: 104px;
    height: 104px;
    flex: none;
    place-items: center;
    padding: 4px;
    background: #fff;
}

.debtor-promptpay-qr svg {
    display: block;
    width: 100%;
    height: 100%;
}

.debtor-statement-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 12px;
    padding-top: 7px;
    border-top: 1px solid #111;
    color: #555;
    font-size: 9px;
}

.debtor-payment-print-head,
.debtor-payment-print-summary {
    display: none;
}

.debtor-payment-history-sheet.debtor-payment-history-image {
    width: 1123px;
    max-width: none;
    margin: 0;
    padding: 26px 30px;
    box-sizing: border-box;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

.debtor-payment-history-image .debtor-payment-print-head {
    display: flex;
}

.debtor-payment-history-image .debtor-payment-print-summary {
    display: grid;
}

.debtor-payment-history-image .debtor-payment-print-store {
    font-size: 20px;
}

.debtor-payment-history-image .no-print {
    display: none !important;
}

.debtor-payment-history-image .table-wrap {
    padding: 0 !important;
    overflow: visible;
}

.debtor-payment-history-image .debtor-payment-history-table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
}

.debtor-payment-history-image .debtor-payment-history-table thead th {
    color: #fff;
    background: #263238;
}

.debtor-payment-print-head {
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 2px solid #202a25;
    color: #111;
}

.debtor-payment-print-brand {
    display: flex;
    max-width: 52%;
    align-items: flex-start;
    gap: 10px;
    color: #4b5560;
    font-size: 10px;
    line-height: 1.45;
}

.debtor-payment-print-brand img {
    width: 46px;
    height: 46px;
    flex: none;
    object-fit: contain;
}

.debtor-payment-print-store {
    margin-bottom: 3px;
    color: #111;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.2;
}

.debtor-payment-print-title {
    text-align: right;
}

.debtor-payment-print-title small {
    color: #65726b;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.debtor-payment-print-title h1 {
    margin: 2px 0 5px;
    color: #111;
    font-size: 20px;
    line-height: 1.2;
}

.debtor-payment-print-title span {
    color: #606a64;
    font-size: 10px;
}

.debtor-payment-print-summary {
    grid-template-columns: 1.25fr 1.35fr 0.75fr 1fr;
    margin-bottom: 14px;
    border: 1px solid #aeb8b2;
    background: #f6f8f7;
}

.debtor-payment-print-summary > div {
    min-width: 0;
    padding: 8px 10px;
    border-right: 1px solid #cbd2ce;
}

.debtor-payment-print-summary > div:last-child {
    border-right: 0;
}

.debtor-payment-print-summary span {
    display: block;
    margin-bottom: 2px;
    color: #68736c;
    font-size: 9px;
}

.debtor-payment-print-summary strong {
    display: block;
    overflow-wrap: anywhere;
    color: #111;
    font-size: 11px;
}

/* รูปแบบกระชับสำหรับบันทึกใบแจ้งยอดลงภาพ A4 */
.debtor-statement-sheet.debtor-statement-image-a4 {
    width: 794px;
    max-width: none;
    min-height: 0;
    margin: 0;
    padding: 24px 30px 20px;
    box-sizing: border-box;
    overflow: visible;
}

.debtor-statement-image-a4 .debtor-statement-head {
    gap: 18px;
    padding-bottom: 11px;
}

.debtor-statement-image-a4 .debtor-statement-brand {
    max-width: 55%;
    gap: 10px;
}

.debtor-statement-image-a4 .debtor-statement-logo {
    width: 48px;
    height: 48px;
}

.debtor-statement-image-a4 .debtor-statement-store {
    margin-bottom: 3px;
    font-size: 20px;
    line-height: 1.25;
}

.debtor-statement-image-a4 .debtor-statement-brand > div:last-child > div:not(.debtor-statement-store) {
    font-size: 16px;
    line-height: 1.35;
}

.debtor-statement-image-a4 .debtor-statement-title {
    min-width: 270px;
}

.debtor-statement-image-a4 .debtor-statement-eyebrow {
    font-size: 16px;
}

.debtor-statement-image-a4 .debtor-statement-title h1 {
    margin-bottom: 6px;
    font-size: 24px;
}

.debtor-statement-image-a4 .debtor-statement-docmeta {
    width: 205px;
}

.debtor-statement-image-a4 .debtor-statement-docmeta > div {
    font-size: 16px;
}

.debtor-statement-image-a4 .debtor-statement-docmeta strong {
    font-size: 16px;
}

.debtor-statement-image-a4 .debtor-statement-section-label {
    margin-top: 10px;
    padding-bottom: 4px;
    font-size: 16px;
}

.debtor-statement-image-a4 .debtor-statement-customer {
    gap: 5px 22px;
    margin-bottom: 10px;
    padding: 7px 2px 9px;
}

.debtor-statement-image-a4 .debtor-statement-customer span {
    font-size: 16px;
}

.debtor-statement-image-a4 .debtor-statement-customer strong {
    font-size: 16px;
}

.debtor-statement-image-a4 .debtor-customer-primary strong {
    font-size: 18px;
}

.debtor-statement-image-a4 .debtor-table-caption {
    margin-bottom: 5px;
}

.debtor-statement-image-a4 .debtor-table-caption strong {
    font-size: 18px;
}

.debtor-statement-image-a4 .debtor-table-caption > div > span {
    font-size: 16px;
}

.debtor-statement-image-a4 .debtor-bill-count {
    font-size: 16px;
}

.debtor-statement-image-a4 .debtor-statement-table thead th {
    padding: 6px 5px;
    font-size: 16px;
}

.debtor-statement-image-a4 .debtor-statement-table tbody td {
    padding: 7px 5px;
    font-size: 16px;
}

.debtor-statement-image-a4 .debtor-statement-table tbody td:last-child strong {
    font-size: 16px;
}

.debtor-statement-image-a4 .debtor-statement-table tfoot th {
    padding: 7px 5px;
    font-size: 16px;
}

.debtor-statement-image-a4 .debtor-statement-table tfoot th:last-child {
    font-size: 16px;
}

.debtor-statement-image-a4 .debtor-age-badge {
    min-width: 42px;
    font-size: 16px;
}

.debtor-statement-image-a4 .debtor-statement-summary {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 18px;
    margin-top: 8px;
}

.debtor-statement-image-a4 .debtor-summary-words {
    gap: 4px;
    padding-top: 5px;
    font-size: 16px;
}

.debtor-statement-image-a4 .debtor-summary-words strong {
    font-size: 16px;
}

.debtor-statement-image-a4 .debtor-summary-words small {
    margin-top: 3px;
    font-size: 16px;
}

.debtor-statement-image-a4 .debtor-summary-totals > div {
    padding: 4px 2px;
    font-size: 16px;
}

.debtor-statement-image-a4 .debtor-summary-totals .grand {
    padding: 6px 2px;
    font-size: 18px;
}

.debtor-statement-image-a4 .debtor-summary-totals .grand strong {
    font-size: 20px;
}

.debtor-statement-image-a4 .debtor-payment-box {
    gap: 14px;
    margin-top: 8px;
    padding: 8px 11px;
}

.debtor-statement-image-a4 .debtor-payment-copy {
    gap: 2px;
    font-size: 16px;
}

.debtor-statement-image-a4 .debtor-payment-copy > strong {
    font-size: 18px;
}

.debtor-statement-image-a4 .debtor-promptpay-qr {
    width: 86px;
    height: 86px;
}

.debtor-statement-image-a4 .debtor-statement-note {
    gap: 7px;
    margin: 8px 0 9px;
    padding: 7px 0;
    font-size: 16px;
}

.debtor-statement-image-a4 .debtor-statement-note strong {
    font-size: 16px;
}

.debtor-statement-image-a4 .debtor-note-contact span {
    font-size: 16px;
}

.debtor-statement-image-a4 .debtor-statement-footer {
    margin-top: 5px;
    padding-top: 5px;
    font-size: 16px;
}

.fd-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    flex: none;
    border-bottom: 1px solid var(--outline-variant);
}

.fd-head h3 {
    flex: 1;
    font-size: 17px;
    font-weight: 700;
    color: var(--primary-dark);
}

.fd-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.fd-body .field:last-child {
    margin-bottom: 0;
}

.fd-foot {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    flex: none;
    border-top: 1px solid var(--outline-variant);
    background: var(--surface-container-low);
}

.fd-foot .btn {
    min-width: 120px;
}

/* Categories page — searchable cards with a persistent add/edit panel. */
.category-page-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.category-search {
    position: relative;
    display: flex;
    align-items: center;
    width: min(310px, 30vw);
    margin: 0;
}

.category-search > span {
    position: absolute;
    left: 12px;
    display: grid;
    place-items: center;
    color: var(--on-surface-variant);
    pointer-events: none;
}

.category-search > span .ui-icon {
    width: 17px;
    height: 17px;
}

.category-search .input {
    height: 42px;
    padding-left: 38px;
    border-radius: var(--r-full);
    background: var(--surface-container-lowest);
}

.category-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(290px, 0.95fr);
    gap: 22px;
    align-items: start;
}

.category-list-panel {
    min-width: 0;
}

.category-list-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 14px;
}

.category-list-heading h2,
.category-editor-heading h2 {
    margin: 0;
    color: var(--primary-dark);
    font-size: 17px;
    font-weight: 700;
}

.category-list-heading p,
.category-editor-heading p {
    margin: 3px 0 0;
    color: var(--on-surface-variant);
    font-size: 12px;
}

.category-total-products {
    color: var(--primary-dark);
    font-size: 19px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.category-total-products small {
    color: var(--on-surface-variant);
    font-size: 11px;
    font-weight: 500;
}

.category-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.category-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 17px;
    border: 1px solid var(--outline-variant);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(16, 40, 28, 0.04);
    transition:
        border-color 0.15s,
        box-shadow 0.15s,
        transform 0.15s;
}

.category-card:hover {
    border-color: #8cae98;
    box-shadow: 0 7px 20px rgba(16, 40, 28, 0.08);
    transform: translateY(-1px);
}

.category-card.is-viewing {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(27, 67, 50, 0.12);
}

.category-card.is-editing {
    border-color: #789984;
}

.category-card-top {
    display: flex;
    align-items: center;
    gap: 9px;
}

.category-symbol {
    display: grid;
    place-items: center;
    width: 43px;
    height: 43px;
    flex: none;
    border-radius: 11px;
}

.category-symbol .ui-icon {
    width: 23px;
    height: 23px;
}

.category-code {
    color: var(--on-surface-variant);
    font-size: 11px;
    font-weight: 600;
}

.category-actions {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-left: auto;
}

.category-actions a,
.category-actions button,
.category-actions > span {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    color: var(--on-surface-variant);
    background: transparent;
}

.category-actions a:hover,
.category-actions button:hover {
    color: var(--primary-dark);
    background: var(--surface-container);
}

.category-actions button {
    cursor: pointer;
    color: var(--danger);
}

.category-actions button:hover {
    color: var(--danger);
    background: var(--danger-bg);
}

.category-actions > span.is-disabled {
    color: #a2aaa4;
    cursor: not-allowed;
}

.category-actions form {
    display: inline;
    margin: 0;
}

.category-actions .ui-icon {
    width: 16px;
    height: 16px;
}

.category-card h3 {
    overflow-wrap: anywhere;
    margin: 15px 0 12px;
    color: var(--on-surface);
    font-size: 16px;
    font-weight: 700;
}

.category-card-count {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    padding: 11px 0;
    border-top: 1px solid var(--surface-container-high);
    color: var(--on-surface-variant);
    font-size: 11px;
}

.category-card-count strong {
    color: var(--primary-dark);
    font-size: 18px;
    font-variant-numeric: tabular-nums;
}

.category-card-count small {
    margin-left: 4px;
    color: var(--on-surface-variant);
    font-size: 10px;
    font-weight: 500;
}

.category-view-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2px;
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--primary-dark);
    background: var(--surface-container-low);
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
}

.category-view-link:hover {
    color: var(--primary-dark);
    background: #e6eee8;
    text-decoration: none;
}

.category-search-empty {
    padding: 30px 16px;
    border: 1px dashed var(--outline-variant);
    border-radius: 12px;
    color: var(--on-surface-variant);
    text-align: center;
}

.category-card.tone-1 .category-symbol {
    color: #276447;
    background: #e4f1e8;
}

.category-card.tone-2 .category-symbol {
    color: #8b3a35;
    background: #f8e8e6;
}

.category-card.tone-3 .category-symbol {
    color: #416a55;
    background: #e7efe9;
}

.category-card.tone-4 .category-symbol {
    color: #526c35;
    background: #edf2e4;
}

.category-card.tone-5 .category-symbol {
    color: #53616d;
    background: #e9edf0;
}

.category-editor-card {
    position: sticky;
    top: 20px;
    padding: 21px;
    border: 1px solid var(--outline-variant);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 4px 18px rgba(16, 40, 28, 0.06);
}

.category-editor-heading {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 19px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--surface-container-high);
}

.category-editor-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 50%;
    color: #fff;
    background: var(--primary);
}

.category-editor-icon .ui-icon {
    width: 19px;
    height: 19px;
}

.category-editor-form .field {
    margin-bottom: 15px;
}

.category-editor-form .field label {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px;
    color: var(--on-surface-variant);
    font-size: 12px;
}

.category-editor-form .field .input {
    border-radius: 9px;
}

.category-editor-form .field small {
    display: block;
    margin-top: 6px;
    color: var(--on-surface-variant);
    font-size: 10px;
}

.category-optional {
    color: var(--on-surface-variant);
    font-size: 10px;
    font-weight: 400;
}

.category-editor-note {
    margin-top: 18px;
    padding: 12px;
    border: 1px solid var(--surface-container-high);
    border-radius: 10px;
    background: var(--surface-container-low);
}

.category-editor-note strong {
    color: var(--on-surface);
    font-size: 11px;
}

.category-editor-note p {
    margin: 5px 0 8px;
    color: var(--on-surface-variant);
    font-size: 10px;
    line-height: 1.6;
}

.category-editor-note a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--primary-dark);
    font-size: 11px;
    font-weight: 700;
}

.category-editor-note a .ui-icon {
    width: 13px;
    height: 13px;
}

.category-editor-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 17px;
}

.category-editor-actions .btn {
    min-height: 40px;
    font-size: 12px;
}

@media (max-width: 1180px) {
    .category-layout {
        grid-template-columns: minmax(0, 1.6fr) minmax(275px, 1fr);
        gap: 16px;
    }

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

/* Dashboard — align the live data view with the dashboard mockup. */
.dashboard-kpis {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

.dashboard-stock-kpi {
    color: inherit;
    text-decoration: none;
    transition:
        border-color 0.15s,
        box-shadow 0.15s,
        transform 0.15s;
}

.dashboard-stock-kpi:hover {
    color: inherit;
    text-decoration: none;
    border-color: var(--outline-variant);
    box-shadow: 0 5px 16px rgba(20, 48, 33, 0.08);
    transform: translateY(-1px);
}

.dashboard-stock-kpi.is-critical {
    border-color: #f0c3bf;
}

.dashboard-stock-kpi.is-low {
    border-color: #ead5a1;
}

.dashboard-columns {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
    gap: 20px;
    align-items: start;
    margin-bottom: 16px;
}

.dashboard-main-column,
.dashboard-side-column {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.dashboard-chart-card {
    padding: 20px;
}

.dashboard-low-stock-dialog {
    width: min(800px, calc(100vw - 32px));
    color: var(--on-surface);
    background: var(--surface);
}

.dashboard-low-stock-dialog .fd-head,
.dashboard-low-stock-dialog .fd-foot {
    flex-shrink: 0;
}

.dashboard-stock-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.dashboard-stock-actions .btn {
    min-width: 0;
    white-space: normal;
    text-align: center;
}

.dashboard-chart-sub {
    margin: 5px 0 0 29px;
    font-size: 12px;
}

.dashboard-peak {
    min-width: 140px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    padding: 8px 11px;
    border: 1px solid #d5e7dc;
    border-radius: 11px;
    color: var(--primary-dark);
    background: #f3f8f5;
}

.dashboard-peak span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--on-surface-variant);
    font-size: 11px;
}

.dashboard-peak span .ui-icon {
    width: 14px;
    height: 14px;
}

.dashboard-peak strong {
    font-size: 16px;
    font-variant-numeric: tabular-nums;
}

.dashboard-peak small {
    color: var(--on-surface-variant);
    font-size: 11px;
}

.dashboard-chart-wrap .chart-yaxis {
    margin-bottom: 0;
}

.dashboard-line-plot {
    display: block;
    width: 100%;
    height: 174px;
    overflow: visible;
}

.dashboard-line-grid {
    stroke: var(--surface-container-high);
    stroke-width: 1;
    stroke-dasharray: 4 5;
    vector-effect: non-scaling-stroke;
}

.dashboard-line-grid:last-of-type {
    stroke: var(--outline-variant);
    stroke-dasharray: none;
}

.dashboard-sales-line {
    fill: none;
    stroke: var(--primary);
    stroke-width: 3;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.dashboard-line-point {
    fill: var(--surface);
    stroke: var(--primary);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

.dashboard-line-point.peak,
.dashboard-line-point:hover,
.dashboard-line-point:focus {
    fill: var(--primary);
}

.dashboard-line-labels {
    display: flex;
    margin-top: 5px;
    min-height: 15px;
    font-size: 10px;
    color: var(--on-surface-variant);
}

.dashboard-line-labels span {
    flex: 1;
    min-width: 0;
    text-align: center;
}

.dashboard-line-labels.is-month {
    font-size: 9px;
}

.dashboard-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 17px 20px 13px;
    border-bottom: 1px solid var(--surface-container-high);
}

.dashboard-section-head .card-title {
    margin: 0 0 3px;
}

.dashboard-section-head .muted,
.dashboard-widget-head .muted {
    font-size: 12px;
}

.dashboard-table-wrap {
    padding: 0 12px 12px;
    overflow-x: auto;
}

.dashboard-table-wrap table {
    min-width: 760px;
}

.dashboard-table-wrap thead th {
    white-space: nowrap;
}

.dashboard-table-wrap tbody td {
    vertical-align: middle;
}

.dashboard-customer {
    max-width: 210px;
    overflow: hidden;
    color: var(--on-surface);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-items {
    max-width: 230px;
    overflow: hidden;
    color: var(--on-surface-variant);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-payment {
    color: var(--on-surface-variant);
    font-size: 12px;
    white-space: nowrap;
}

.dashboard-row-action {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--outline-variant);
    border-radius: 8px;
    color: var(--on-surface-variant);
    background: #fff;
}

.dashboard-row-action:hover {
    color: var(--primary-dark);
    border-color: var(--primary-container);
    background: var(--surface-container-low);
}

.dashboard-row-action .ui-icon {
    width: 16px;
    height: 16px;
}

.dashboard-rank-value {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    white-space: nowrap;
}

.dashboard-rank-value span {
    color: var(--on-surface-variant);
    font-size: 11px;
    font-weight: 500;
}

.dashboard-widget-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.dashboard-widget-head .card-title {
    margin: 0 0 3px;
}

.dashboard-widget-head > strong {
    color: var(--primary-dark);
    font-size: 17px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.dashboard-payment-stack {
    display: flex;
    height: 9px;
    overflow: hidden;
    margin: 10px 0 14px;
    border-radius: 99px;
    background: var(--surface-container);
}

.dashboard-payment-stack > span {
    height: 100%;
}

.dashboard-payment-stack .cash,
.dashboard-method i.cash {
    background: #25835a;
}

.dashboard-payment-stack .transfer,
.dashboard-method i.transfer {
    background: #4385cf;
}

.dashboard-payment-stack .credit,
.dashboard-method i.credit {
    background: #9b75bd;
}

.dashboard-method {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.dashboard-method i {
    width: 8px;
    height: 8px;
    display: inline-block;
    border-radius: 50%;
}

.dashboard-profit-total {
    display: flex;
    justify-content: space-between;
    margin: 0 0 14px;
    padding: 11px 13px;
    border: 1px solid #dcebe1;
    border-radius: 10px;
    color: var(--primary-dark);
    background: #f3f8f5;
    font-size: 14px;
    font-weight: 700;
}

.dashboard-debt-card {
    border-color: #ead8d6;
}

.dashboard-debt-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 11px;
    border: 1px solid var(--surface-container-high);
    border-radius: 10px;
    color: inherit;
    background: var(--surface-container-low);
    text-decoration: none;
}

.dashboard-debt-item + .dashboard-debt-item {
    margin-top: 8px;
}

.dashboard-debt-item:hover {
    border-color: #e4b8b3;
    background: #fff8f7;
    text-decoration: none;
}

.dashboard-debt-person {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.dashboard-debt-person strong {
    overflow: hidden;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-debt-person small {
    color: var(--danger);
    font-size: 11px;
}

.dashboard-debt-amount {
    color: var(--danger);
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.dashboard-empty-compact {
    padding: 14px 8px;
}

@media (max-width: 1200px) {
    .dashboard-kpis {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .dashboard-columns {
        grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr);
    }
}

/* Multi-line stock receiving document */
.stock-page-location {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 4px;
    color: var(--on-surface-variant);
    font-size: 13px;
}

.stock-page-location > span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border: 1px solid #d9e8de;
    border-radius: 7px;
    color: #276447;
    background: #f0f7f2;
    font-weight: 700;
}

.stock-page-location .ui-icon {
    width: 13px;
    height: 13px;
}

.stock-page-location > i {
    color: #a2aaa4;
    font-style: normal;
}

.stock-page-title-en {
    margin-left: 5px;
    color: var(--on-surface-variant);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0;
}

.stock-page-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.stock-today-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--outline-variant);
    border-radius: 9px;
    color: var(--on-surface-variant);
    background: #fff;
    font-size: 12px;
    white-space: nowrap;
}

.stock-today-badge > span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #35a568;
    box-shadow: 0 0 0 3px #e6f4eb;
}

.stock-today-badge strong {
    display: block;
    margin-top: 1px;
    color: var(--on-surface);
    font-size: 13px;
}

.stock-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: -2px 0 18px;
}

.stock-kpi {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
    padding: 15px;
    border: 1px solid #e1e8e3;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(20, 48, 33, 0.035);
}

.stock-kpi-icon {
    display: grid;
    place-items: center;
    width: 43px;
    height: 43px;
    flex: none;
    border: 1px solid transparent;
    border-radius: 12px;
}

.stock-kpi-icon .ui-icon {
    width: 21px;
    height: 21px;
}

.stock-kpi-green {
    color: #278355;
    border-color: #d7ecdf;
    background: #edf7f0;
}

.stock-kpi-blue {
    color: #3974b5;
    border-color: #dce8f6;
    background: #f0f5fb;
}

.stock-kpi-violet {
    color: #7660a8;
    border-color: #e8e1f2;
    background: #f6f3fa;
}

.stock-kpi > div {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.stock-kpi small {
    color: var(--on-surface-variant);
    font-size: 12px;
    font-weight: 600;
}

.stock-kpi strong {
    overflow: hidden;
    margin-top: 1px;
    color: var(--on-surface);
    font-size: 22px;
    font-variant-numeric: tabular-nums;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stock-kpi strong span {
    color: var(--on-surface-variant);
    font-size: 13px;
    font-weight: 500;
}

.stock-kpi em {
    overflow: hidden;
    margin-top: 2px;
    color: #36815a;
    font-size: 11px;
    font-style: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stock-receipt-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 20px;
}

.stock-receipt-form-card {
    min-width: 0;
    overflow: hidden;
    padding: 0;
    border: 1px solid #e1e8e3;
    border-radius: 15px;
}

.stock-form-head {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 16px 18px;
    border-bottom: 1px solid #e9eee9;
    background: linear-gradient(100deg, #f3f8f4 0%, #fff 75%);
}

.stock-form-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 11px;
    color: #fff;
    background: var(--primary-dark);
    box-shadow: 0 3px 8px rgba(27, 67, 50, 0.15);
}

.stock-form-icon .ui-icon {
    width: 20px;
    height: 20px;
}

.stock-form-head > div {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.stock-form-head > div strong {
    color: var(--on-surface);
    font-size: 15px;
}

.stock-form-head > div small {
    color: var(--on-surface-variant);
    font-size: 12px;
}

.stock-doc-auto {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 5px 8px;
    border: 1px solid #e1e6e2;
    border-radius: 7px;
    color: #53615a;
    background: #f8faf8;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.stock-doc-auto i {
    color: #748078;
    font-family: inherit;
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
}

.stock-form-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 17px;
}

.stock-form-body .field {
    margin-bottom: 4px;
}

.stock-form-body .field label {
    font-size: 13px;
    font-weight: 700;
}

.stock-form-body .field label .ui-icon {
    width: 13px;
    height: 13px;
    margin-right: 3px;
    color: #718078;
}

.stock-form-body .field input:not([type='file']),
.stock-form-body .field textarea {
    padding: 10px 12px;
    border-radius: 9px;
    font-size: 14px;
}

.stock-optional {
    margin-left: 4px;
    color: #8b948e;
    font-size: 11px;
    font-weight: 400;
}

.stock-doc-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 12px;
}

.stock-doc-grid .field {
    min-width: 0;
}

.stock-doc-grid .field:first-child {
    grid-column: 1 / -1;
}

.stock-supplier-add {
    width: 42px;
    flex: none;
    border: 1px solid var(--primary);
    border-radius: 9px;
    color: #fff;
    background: var(--primary);
    font-size: 23px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
}

.stock-supplier-add:hover {
    background: var(--primary-dark);
}

.stock-supplier-card-add {
    align-self: center;
    margin-left: auto;
}

.stock-supplier-card-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.stock-supplier-card-actions .stock-supplier-card-add {
    margin-left: 0;
}

.supplier-create-dialog {
    width: min(620px, calc(100vw - 32px));
}

.supplier-manage-dialog {
    width: min(980px, calc(100vw - 32px));
}

.supplier-manage-search {
    margin-bottom: 12px;
}

.supplier-manage-table {
    min-width: 760px;
}

.supplier-manage-table td small {
    display: block;
    margin-top: 3px;
    color: var(--on-surface-variant);
    font-size: 11px;
}

.supplier-row-actions {
    display: flex;
    justify-content: center;
    gap: 5px;
}

.supplier-row-actions form {
    margin: 0;
}

.stock-lines-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 7px 0 10px;
}

.stock-lines-heading > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stock-lines-heading > div strong {
    font-size: 16px;
}

.stock-lines-heading > div span {
    font-size: 13px;
}

.stock-lines-heading .ui-icon {
    width: 15px;
    height: 15px;
}

.stock-lines-scroll {
    overflow-x: auto;
    border: 1px solid var(--outline-variant);
    border-radius: 10px;
}

.stock-lines-table {
    min-width: 610px;
}

.stock-lines-table thead th {
    padding: 10px 8px;
    font-size: 11px;
    white-space: nowrap;
}

.stock-lines-table tbody td {
    padding: 9px 8px;
    vertical-align: top;
}

.stock-lines-table input {
    width: 100%;
    min-width: 0;
    min-height: 39px;
    padding: 8px;
    border: 1px solid var(--outline-variant);
    border-radius: 7px;
    background: #fff;
    font-size: 13px;
}

.stock-lines-table input:focus {
    outline: 2px solid var(--primary-container);
    border-color: var(--primary);
}

.stock-line-stock {
    display: block;
    min-height: 16px;
    margin-top: 4px;
    font-size: 11px;
}

.stock-current-stock {
    white-space: nowrap;
    padding-top: 18px !important;
    font-size: 12px;
}

.stock-remove-line {
    display: inline-grid;
    place-items: center;
    width: 31px;
    height: 31px;
    border: 1px solid #efd5d2;
    border-radius: 8px;
    color: var(--danger);
    background: #fff;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
}

.stock-remove-line:hover {
    background: var(--danger-bg);
}

.stock-lines-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 2px 15px;
    font-size: 13px;
}

.stock-lines-footer strong {
    color: var(--primary-dark);
    font-size: 14px;
}

.stock-doc-grid-bottom {
    padding-top: 3px;
}

.stock-doc-grid-bottom .field small {
    display: block;
    margin-top: 5px;
    font-size: 11px;
}

.stock-file-picker {
    position: relative;
}

.stock-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    clip-path: inset(50%);
    border: 0;
}

.stock-file-drop {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 78px;
    padding: 13px;
    border: 1px dashed #b7c9bd;
    border-radius: 12px;
    background: linear-gradient(135deg, #f7faf8, #f0f6f2);
    cursor: pointer;
    transition:
        border-color 0.15s,
        background 0.15s,
        box-shadow 0.15s;
}

.stock-doc-grid-bottom .field .stock-file-drop {
    display: flex;
    margin: 0;
    color: var(--on-surface);
    font-size: inherit;
    font-weight: 400;
}

.stock-file-drop:hover,
.stock-file-picker.is-dragging .stock-file-drop {
    border-color: var(--primary);
    background: #edf6f0;
    box-shadow: 0 0 0 3px rgba(47, 111, 74, 0.08);
}

.stock-file-input:focus-visible + .stock-file-drop {
    outline: 3px solid var(--primary-container);
    outline-offset: 2px;
}

.stock-file-icon,
.stock-file-selected-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: none;
    border-radius: 11px;
    color: var(--primary-dark);
    background: #e3eee7;
}

.stock-file-icon .ui-icon,
.stock-file-selected-icon .ui-icon {
    width: 20px;
    height: 20px;
}

.stock-file-prompt {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.stock-file-prompt strong {
    color: var(--on-surface);
    font-size: 14px;
}

.stock-file-prompt small {
    color: var(--on-surface-variant);
    font-size: 12px;
    line-height: 1.4;
}

.stock-doc-grid-bottom .field .stock-file-prompt small {
    margin-top: 0;
}

.stock-file-button {
    flex: none;
    padding: 7px 10px;
    border: 1px solid #d2e1d7;
    border-radius: 8px;
    color: var(--primary-dark);
    background: #fff;
    font-size: 12px;
    font-weight: 700;
}

.stock-file-selected {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    margin-top: 8px;
    padding: 8px 10px;
    border: 1px solid #d5e6db;
    border-radius: 10px;
    background: #f7fbf8;
}

.stock-file-selected[hidden] {
    display: none;
}

.stock-file-selected-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
}

.stock-file-selected-icon .ui-icon {
    width: 16px;
    height: 16px;
}

.stock-file-name {
    overflow: hidden;
    flex: 1;
    color: var(--on-surface);
    font-size: 13px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stock-file-size {
    flex: none;
    color: var(--on-surface-variant);
    font-size: 11px;
}

.stock-file-clear {
    display: grid;
    place-items: center;
    width: 27px;
    height: 27px;
    flex: none;
    border: 0;
    border-radius: 7px;
    color: var(--danger);
    background: transparent;
    cursor: pointer;
    font-size: 20px;
}

.stock-file-clear:hover {
    background: var(--danger-bg);
}

/* Product image selection inside the add/edit item dialog */
.inventory-image-picker {
    min-width: 0;
}

.inventory-image-input,
.sales-import-file-input {
    position: absolute;
    width: 1px !important;
    height: 1px;
    padding: 0 !important;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0 !important;
}

.field .inventory-image-drop,
.field .sales-import-drop {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0;
    padding: 12px;
    border: 1px dashed var(--outline-variant);
    border-radius: 11px;
    color: var(--on-surface);
    background: var(--surface-container-low);
    cursor: pointer;
    transition:
        border-color 0.15s,
        background 0.15s,
        box-shadow 0.15s;
}

.inventory-image-drop:hover,
.inventory-image-picker.is-dragging .inventory-image-drop {
    border-color: var(--primary);
    background: #f0f6f2;
    box-shadow: 0 0 0 3px rgba(47, 111, 74, 0.08);
}

.inventory-image-input:focus-visible + .inventory-image-drop,
.sales-import-file-input:focus-visible + .sales-import-drop {
    outline: 3px solid var(--primary-container);
    outline-offset: 2px;
}

.inventory-image-drop-icon,
.sales-import-file-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: 10px;
    color: var(--primary-dark);
    background: #e3eee7;
}

.inventory-image-drop-icon .ui-icon,
.sales-import-file-icon .ui-icon {
    width: 19px;
    height: 19px;
}

.inventory-image-drop-copy,
.sales-import-file-copy {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.inventory-image-drop-copy strong,
.sales-import-file-copy strong {
    color: var(--on-surface);
    font-size: 12px;
}

.inventory-image-drop-copy small,
.sales-import-file-copy small {
    margin: 0 !important;
    color: var(--on-surface-variant);
    font-size: 10px !important;
    line-height: 1.4;
}

.inventory-image-choose,
.sales-import-choose {
    flex: none;
    padding: 7px 9px;
    border: 1px solid var(--outline-variant);
    border-radius: 8px;
    color: var(--primary-dark);
    background: #fff;
    font-size: 10px;
    font-weight: 700;
}

.inventory-image-filename {
    overflow: hidden;
    margin-top: 6px;
    color: var(--on-surface-variant);
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inventory-image-filename[hidden] {
    display: none;
}

.sales-import-file {
    position: relative;
}

.sales-import-drop:hover,
.sales-import-file.is-dragging .sales-import-drop {
    border-color: #4b79b8 !important;
    background: #f1f5fb;
    box-shadow: 0 0 0 3px rgba(56, 105, 168, 0.08);
}

.sales-import-file-icon,
.sales-import-selected-icon {
    color: #315f9d;
    background: #e8eff9;
}

.sales-import-choose {
    color: #315f9d;
    border-color: #d2dff0;
}

.sales-import-selected {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    margin-top: 8px;
    padding: 8px 10px;
    border: 1px solid #d5e1f1;
    border-radius: 10px;
    background: #f7f9fd;
}

.sales-import-selected[hidden] {
    display: none;
}

.sales-import-selected-icon {
    display: grid;
    place-items: center;
    width: 31px;
    height: 31px;
    flex: none;
    border-radius: 8px;
}

.sales-import-selected-icon .ui-icon {
    width: 16px;
    height: 16px;
}

.sales-import-name {
    overflow: hidden;
    flex: 1;
    color: var(--on-surface);
    font-size: 11px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sales-import-size {
    flex: none;
    color: var(--on-surface-variant);
    font-size: 10px;
}

.sales-import-clear {
    display: grid;
    place-items: center;
    width: 27px;
    height: 27px;
    flex: none;
    border: 0;
    border-radius: 7px;
    color: var(--danger);
    background: transparent;
    cursor: pointer;
    font-size: 20px;
}

.sales-import-clear:hover {
    background: var(--danger-bg);
}

.sales-import-template-hint {
    margin-top: 7px;
    color: var(--on-surface-variant);
    font-size: 11px;
    line-height: 1.5;
}

.stock-receipt-help {
    margin: 11px 0 0;
    color: var(--on-surface-variant);
    font-size: 11px;
    text-align: center;
}

.stock-history-card {
    min-width: 0;
    container: stockhistory / inline-size;
}

.stock-history-page {
    width: 100%;
    min-width: 0;
}

.stock-history-page .stock-history-card {
    overflow: hidden;
}

.stock-history-page .stock-history-table-wrap {
    overflow-x: auto;
}

.stock-history-page .stock-history-head,
.stock-history-page .stock-history-head-actions,
.stock-history-page .stock-history-toolbar {
    flex-wrap: wrap;
}

.stock-history-dialog {
    position: fixed;
    inset: 0;
    width: min(1320px, calc(100vw - 36px));
    max-width: none;
    max-height: calc(100dvh - 36px);
    margin: auto;
    padding: 0;
    overflow: hidden;
    border: 1px solid #dfe8e1;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(18, 39, 26, 0.22);
}

.stock-history-dialog::backdrop {
    background: rgba(0, 0, 0, 0.48);
    backdrop-filter: blur(3px);
}

.stock-history-dialog[open] {
    display: block;
    animation: stock-confirm-in 0.18s ease-out;
}

.stock-history-dialog .stock-history-card {
    height: 100%;
    overflow: hidden;
    border: 0;
    border-radius: 0;
}

.stock-history-dialog .stock-history-table-wrap {
    max-height: calc(100dvh - 260px);
    overflow: auto;
}

.stock-history-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 17px 17px 12px;
}

.stock-history-head-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.stock-history-close {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 9px;
    color: #6f7b73;
    background: #f4f6f4;
    cursor: pointer;
    font-size: 24px;
    line-height: 1;
}

.stock-history-close:hover {
    color: var(--on-surface);
    background: #e9eeea;
}

.stock-history-title {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.stock-history-title > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.stock-history-title strong {
    color: var(--on-surface);
    font-size: 15px;
}

.stock-history-title small {
    color: var(--on-surface-variant);
    font-size: 12px;
}

.stock-history-icon {
    display: grid;
    place-items: center;
    width: 35px;
    height: 35px;
    flex: none;
    border: 1px solid #d9eade;
    border-radius: 10px;
    color: #287448;
    background: #eff7f1;
}

.stock-history-icon .ui-icon {
    width: 18px;
    height: 18px;
}

.stock-history-count {
    flex: none;
    padding: 5px 8px;
    border: 1px solid #e2e9e4;
    border-radius: 7px;
    color: #637067;
    background: #f7f9f7;
    font-size: 11px;
    white-space: nowrap;
}

.stock-history-toolbar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 17px 12px;
}

.stock-history-toolbar input,
.stock-history-toolbar select {
    min-width: 0;
    height: 38px;
    padding: 7px 10px;
    border: 1px solid var(--outline-variant);
    border-radius: 8px;
    color: var(--on-surface);
    background: #fff;
    font-size: 12px;
}

.stock-history-toolbar > .stock-history-search {
    flex: 1 1 200px;
}

.stock-history-toolbar select {
    flex: none;
    max-width: 142px;
}

.stock-history-toolbar .btn {
    flex: none;
    height: 38px;
    padding: 0 11px;
    font-size: 12px;
}

.stock-history-toolbar .ui-icon {
    width: 15px;
    height: 15px;
}

.stock-date-filter {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: none;
    color: var(--on-surface-variant);
    font-size: 11px;
    white-space: nowrap;
}

.stock-date-picker {
    display: flex;
    align-items: center;
    overflow: hidden;
    height: 38px;
    border: 1px solid var(--outline-variant);
    border-radius: 8px;
    background: #fff;
}

.stock-date-picker input {
    width: 138px;
    height: 36px;
    flex: none !important;
    padding: 6px 7px !important;
    border: 0 !important;
    background: transparent !important;
    font-size: 11px !important;
}

.stock-date-picker .date-display {
    left: 7px;
    right: 28px;
    font-size: 11px;
}

.stock-calendar-button {
    display: grid;
    place-items: center;
    width: 34px;
    height: 36px;
    flex: none;
    border: 0;
    border-left: 1px solid #e6ebe7;
    color: #417452;
    background: #f7faf7;
    cursor: pointer;
}

.stock-calendar-button:hover,
.stock-calendar-button:focus-visible {
    color: #1b6940;
    background: #eaf4ed;
}

.stock-calendar-button svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

.stock-history-date-error {
    margin: -5px 17px 12px;
    color: #a43b32;
    font-size: 12px;
}

.stock-history-date-hint {
    margin: -6px 17px 10px;
    color: #7d8981;
    font-size: 11px;
}

.stock-history-table-wrap {
    padding: 8px 14px 12px;
}

.stock-history-table {
    min-width: 920px;
    font-size: 12px;
}

.stock-history-table thead th {
    padding: 11px 9px;
    color: #617067;
    background: #f7f9f7;
    font-size: 11px;
    white-space: nowrap;
}

.stock-history-table tbody td {
    padding: 12px 9px;
    vertical-align: middle;
}

.stock-history-row:hover {
    background: #f1f8f3 !important;
}

.stock-date-cell {
    white-space: nowrap;
}

.stock-date-cell strong,
.stock-date-cell small {
    display: block;
}

.stock-date-cell strong {
    color: #2c3931;
    font-size: 12px;
    font-weight: 600;
}

.stock-date-cell small {
    margin-top: 2px;
    color: #929b95;
    font-size: 11px;
}

.stock-doc-number {
    display: inline-block;
    padding: 5px 7px;
    border: 1px solid #dfe8e1;
    border-radius: 6px;
    color: #415349;
    background: #f5f8f5;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.stock-doc-number:not(.is-legacy) {
    color: #176740;
    border-color: #cfe3d5;
    background: #eff7f1;
}

.stock-history-supplier {
    display: block;
    max-width: 150px;
    overflow: hidden;
    color: #354239;
    font-size: 12px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stock-ref-lines {
    display: block;
    max-width: 160px;
    overflow: hidden;
    margin-top: 3px;
    color: var(--on-surface-variant);
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stock-main-product {
    max-width: 190px;
}

.stock-main-product > strong {
    display: block;
    overflow: hidden;
    color: #303b34;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stock-main-product > small {
    display: block;
    margin-top: 3px;
    color: #89948d;
    font-size: 10px;
}

.stock-history-items summary {
    color: var(--primary-dark);
    cursor: pointer;
    font-size: 10px;
    font-weight: 700;
}

.stock-history-items > div {
    display: grid;
    gap: 4px;
    min-width: 220px;
    margin-top: 7px;
    padding: 8px;
    border: 1px solid var(--surface-container-high);
    border-radius: 8px;
    background: var(--surface-container-low);
    font-size: 11px;
}

.stock-history-items > div span {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.stock-history-items b {
    white-space: nowrap;
}

.stock-history-items summary {
    font-size: 10px;
}

.stock-in-quantity {
    display: inline-block;
    padding: 5px 8px;
    border: 1px solid #cfe5d5;
    border-radius: 99px;
    color: #1c6b40;
    background: #edf7f0;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.stock-employee-chip {
    display: inline-block;
    max-width: 110px;
    overflow: hidden;
    padding: 6px 8px;
    border-radius: 6px;
    color: #236442;
    background: #eaf4ed;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stock-file-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 7px;
    border: 1px solid #dce5de;
    border-radius: 6px;
    color: #3d5647;
    background: #fff;
    font-size: 11px;
    white-space: nowrap;
}

.stock-file-link:hover {
    color: #1b6940;
    border-color: #bad7c3;
    background: #f5faf6;
}

.stock-file-link .ui-icon {
    width: 14px;
    height: 14px;
    color: #2b8551;
}

.stock-no-file {
    color: #b0b8b2;
}

.stock-history-pagination {
    padding: 0 18px 16px;
}

.stock-history-row-actions {
    display: grid;
    grid-template-columns: repeat(2, 40px);
    justify-content: center;
    gap: 6px;
}

.stock-history-row-actions .btn {
    width: 40px;
    white-space: nowrap;
}

.stock-history-row-actions .ui-icon {
    width: 14px;
    height: 14px;
}

.stock-confirm-dialog {
    position: fixed;
    inset: 0;
    width: min(480px, calc(100vw - 28px));
    max-width: none;
    max-height: calc(100dvh - 28px);
    margin: auto;
    padding: 24px;
    overflow-y: auto;
    border: 1px solid #dfe8e1;
    border-radius: 18px;
    color: var(--on-surface);
    background: #fff;
    box-shadow: 0 24px 70px rgba(18, 39, 26, 0.22);
}

.stock-confirm-dialog::backdrop {
    background: rgba(0, 0, 0, 0.48);
    backdrop-filter: blur(3px);
}

.stock-confirm-dialog[open] {
    display: block;
    animation: stock-confirm-in 0.18s ease-out;
}

#stockCancelDialog {
    box-sizing: border-box;
    width: min(210mm, calc(100vw - 28px));
    height: min(148mm, calc(100dvh - 28px));
}

#stockCancelForm {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

#stockCancelForm > :not(.stock-cancel-items-wrap) {
    flex-shrink: 0;
}

#stockCancelDialog .stock-cancel-items-wrap {
    flex: 1 1 auto;
    min-height: 180px;
    overflow: auto;
}

#stockCancelDialog .stock-confirm-head {
    gap: 12px;
    margin-bottom: 8px;
}

#stockCancelDialog .stock-confirm-head h2 {
    flex: 1;
    margin: 0;
}

#stockCancelDialog .stock-confirm-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
}

#stockCancelDialog .stock-confirm-subtitle {
    margin: 0 0 12px;
}

#stockCancelDialog .stock-cancel-reason {
    margin: 12px 0 0;
}

#stockCancelDialog .stock-cancel-reason textarea {
    min-height: 60px;
    padding: 8px 10px;
}

#stockCancelDialog .stock-confirm-notice {
    margin-top: 8px;
    padding: 8px 10px;
}

#stockCancelDialog .stock-confirm-actions {
    flex-wrap: wrap;
    margin-top: 12px;
}

@keyframes stock-confirm-in {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.985);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.stock-confirm-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 13px;
}

.stock-confirm-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 1px solid #cfe5d5;
    border-radius: 14px;
    color: #1c7445;
    background: #edf7f0;
}

.stock-confirm-icon .ui-icon {
    width: 23px;
    height: 23px;
}

.stock-confirm-close {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 9px;
    color: #6f7b73;
    background: #f4f6f4;
    cursor: pointer;
    font-size: 24px;
    line-height: 1;
}

.stock-confirm-close:hover {
    color: var(--on-surface);
    background: #e9eeea;
}

.stock-confirm-dialog h2 {
    color: var(--on-surface);
    font-size: 21px;
    font-weight: 700;
}

.stock-confirm-subtitle {
    margin: 4px 0 18px;
    color: var(--on-surface-variant);
    font-size: 13px;
}

.stock-confirm-summary {
    overflow: hidden;
    border: 1px solid #e3eae5;
    border-radius: 12px;
    background: #fafcfb;
}

.stock-confirm-summary > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 13px;
    border-bottom: 1px solid #e9efeb;
}

.stock-confirm-summary > div:last-child {
    border-bottom: 0;
}

.stock-confirm-summary span {
    color: #647168;
    font-size: 12px;
}

.stock-confirm-summary strong {
    overflow: hidden;
    color: #25352b;
    font-size: 13px;
    font-weight: 700;
    text-align: right;
    text-overflow: ellipsis;
}

.stock-confirm-summary .stock-confirm-total {
    background: #f0f7f2;
}

.stock-confirm-total strong {
    color: #176740;
    font-size: 17px;
    white-space: nowrap;
}

.stock-confirm-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 13px;
    padding: 10px 11px;
    border: 1px solid #efe3c3;
    border-radius: 9px;
    color: #795b17;
    background: #fffaf0;
    font-size: 11px;
    line-height: 1.5;
}

.stock-confirm-notice .ui-icon {
    width: 16px;
    height: 16px;
    flex: none;
}

.stock-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 20px;
}

.stock-confirm-actions .btn {
    min-height: 42px;
    padding: 0 14px;
    font-size: 13px;
}

.stock-confirm-actions .ui-icon {
    width: 16px;
    height: 16px;
}

.stock-confirm-actions button:disabled {
    opacity: 0.65;
    cursor: wait;
}

.users-reset-dialog {
    position: fixed;
    inset: 0;
    width: min(440px, calc(100vw - 28px));
    max-width: none;
    max-height: calc(100dvh - 28px);
    margin: auto;
    padding: 24px;
    overflow-y: auto;
    border: 1px solid #dfe8e1;
    border-radius: 18px;
    color: var(--on-surface);
    background: #fff;
    box-shadow: 0 24px 70px rgba(18, 39, 26, 0.22);
}

.users-reset-dialog::backdrop {
    background: rgba(0, 0, 0, 0.48);
    backdrop-filter: blur(3px);
}

.users-reset-dialog[open] {
    display: block;
    animation: stock-confirm-in 0.18s ease-out;
}

.users-reset-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 13px;
}

.users-reset-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 1px solid #cfe5d5;
    border-radius: 14px;
    color: #1c7445;
    background: #edf7f0;
}

.users-reset-icon .ui-icon {
    width: 23px;
    height: 23px;
}

.users-reset-close {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 9px;
    color: #6f7b73;
    background: #f4f6f4;
    cursor: pointer;
    font-size: 24px;
    line-height: 1;
}

.users-reset-close:hover {
    color: var(--on-surface);
    background: #e9eeea;
}

.users-reset-dialog h2 {
    color: var(--on-surface);
    font-size: 21px;
    font-weight: 700;
}

.users-reset-subtitle {
    margin: 4px 0 18px;
    color: var(--on-surface-variant);
    font-size: 13px;
}

.users-reset-subtitle strong {
    color: var(--on-surface);
}

.users-reset-dialog form > label {
    display: block;
    margin-bottom: 6px;
    color: #405047;
    font-size: 13px;
    font-weight: 700;
}

.users-reset-dialog form > input {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--outline-variant);
    border-radius: 9px;
    color: var(--on-surface);
    background: #fff;
    font: inherit;
    font-size: 14px;
}

.users-reset-dialog form > input:focus {
    border-color: #4c9567;
    outline: 3px solid rgba(76, 149, 103, 0.14);
}

.users-reset-dialog form > small {
    display: block;
    margin-top: 6px;
    color: var(--on-surface-variant);
    font-size: 11px;
}

.users-reset-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 20px;
}

.users-reset-actions .btn {
    min-height: 42px;
    padding: 0 14px;
    font-size: 13px;
}

.users-reset-actions .ui-icon {
    width: 16px;
    height: 16px;
}

@container stockhistory (max-width: 820px) {
    .stock-history-table-wrap {
        overflow-x: hidden;
        padding: 8px 12px 12px;
    }

    .stock-history-table {
        display: block;
        width: 100%;
        min-width: 0;
        table-layout: fixed;
    }

    .stock-history-table thead {
        display: none;
    }

    .stock-history-table tbody {
        display: grid;
        gap: 10px;
    }

    .stock-history-table tbody tr.stock-history-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        overflow: hidden;
        border: 1px solid #e2e9e4;
        border-radius: 11px;
        background: #fff;
    }

    .stock-history-table tbody tr.stock-history-row:hover {
        background: #fff !important;
        border-color: #c8ddce;
    }

    .stock-history-table tbody tr.stock-history-row td {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 4px;
        min-width: 0;
        padding: 10px 11px;
        border-bottom: 1px solid #edf0ed;
        text-align: left;
    }

    .stock-history-table tbody tr.stock-history-row td::before {
        content: attr(data-label);
        color: #7b877f;
        font-size: 11px;
        font-weight: 600;
        line-height: 1.35;
    }

    .stock-history-table tbody tr.stock-history-row td:nth-child(3),
    .stock-history-table tbody tr.stock-history-row td:nth-child(4),
    .stock-history-table tbody tr.stock-history-row td:nth-child(6) {
        grid-column: 1 / -1;
    }

    .stock-history-table tbody tr.stock-history-row td:nth-child(8),
    .stock-history-table tbody tr.stock-history-row td:nth-child(9) {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        background: #f8faf8;
    }

    .stock-history-table tbody tr.stock-history-row td:nth-child(9) {
        border-bottom: 0;
    }

    .stock-history-table tbody tr.stock-history-row td:nth-child(8)::before,
    .stock-history-table tbody tr.stock-history-row td:nth-child(9)::before {
        color: #53635a;
    }

    .stock-history-row-actions {
        width: max-content;
        margin-left: auto;
    }

    .stock-history-supplier,
    .stock-main-product {
        max-width: 100%;
        width: 100%;
    }

    .stock-main-product > strong {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .stock-ref-lines {
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .stock-employee-chip {
        max-width: 100%;
    }

    .stock-history-items > div {
        min-width: 0;
        width: 100%;
    }

    .stock-history-items > div span {
        flex-wrap: wrap;
    }

    .stock-history-table tbody tr td.empty {
        display: block;
        padding: 24px 10px;
        border: 0;
        text-align: center;
    }

    .stock-history-table tbody tr td.empty::before {
        content: none;
    }
}

@media (max-width: 1180px) {
    .stock-receipt-layout {
        grid-template-columns: 1fr;
    }

    .stock-receipt-form-card {
        max-width: none;
    }
}

@media print {
    @page {
        margin: 12mm;
    }

    @page debtor-payment-history {
        size: A4 landscape;
        margin: 10mm;
    }

    @page receipt-full-a5 {
        size: A5 portrait;
        margin: 6mm;
    }

    /* Keep the left feed position; 10mm page margin + 5mm padding leaves 15mm on the right. */
    @page receipt-carbon {
        size: 9in 5.5in;
        margin: 0.24in 10mm 0.24in 0.34in;
    }

    /* บิลอย่างย่อใช้กับเครื่องพิมพ์ความร้อน 75 มม. */
    @page receipt-thermal {
        size: auto;
        margin: 4mm;
    }

    /* ขอบซ้ายและขวา 4mm; พื้นที่ข้อความ 67mm บนม้วน 75mm */
    @page debtor-statement-a5 {
        size: A5 portrait;
        margin: 8mm;
    }

    .thermal {
        page: receipt-thermal;
        /* ใช้กฎหน้ากระดาษสำหรับสลิปที่ประกาศไว้ด้านบน */
        box-shadow: none;
        border: none;
        border-radius: 0;
        width: 67mm;
        max-width: 100%;
        margin: 0;
        padding: 0 0 4mm;
        color: #000;
        line-height: 1.65;
    }

    .ti {
        page: receipt-full-a5;
        border: none;
        max-width: none;
        width: 100%;
        margin: 0;
        padding: 3mm;
        font-size: 11px;
        line-height: 1.35;
    }

    .ti-full-a5 {
        line-height: 1.4;
    }

    .ti-carbon {
        page: receipt-carbon;
        width: 100%;
        height: 5in;
        min-height: 0;
        max-width: calc(9in - 0.34in - 10mm);
        box-sizing: border-box;
        overflow: hidden;
        font-size: 12px;
        line-height: 1.25;
        padding: 3mm 5mm 2mm;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .ti-carbon .ti-head {
        gap: 12mm;
    }

    /* JavaScript แบ่งหน้าคาร์บอนให้แล้ว จึงใช้หัวเอกสารของแต่ละหน้าโดยตรง */
    .ti-carbon > .ti-head,
    .ti-carbon > .ti-info {
        display: flex;
    }

    .ti-carbon .ti-seller {
        max-width: 56%;
    }

    .ti-carbon .ti-title {
        max-width: 44%;
    }

    .ti-carbon .ti-logo {
        margin-bottom: 1mm;
    }

    .ti-carbon .ti-logo .lg {
        width: 28px;
        height: 28px;
    }

    .ti-carbon .ti-logo .nm {
        font-size: 17px;
    }

    .ti-carbon .ti-seller .line {
        font-size: 10.5px;
        line-height: 1.2;
    }

    .ti-carbon .ti-title .t {
        font-size: 17px;
    }

    .ti-carbon .ti-info {
        gap: 12mm;
        margin-top: 1.5mm;
        font-size: 11px;
        line-height: 1.2;
    }

    .ti-carbon .ti-buyer > div {
        margin-bottom: 1px;
    }

    .ti-carbon .ti-meta td {
        padding: 1px 0;
    }

    .ti-carbon table.ti-items {
        margin-top: 1.5mm;
    }

    .ti-carbon table.ti-items thead th {
        padding: 1mm;
        font-size: 11px;
    }

    .ti-carbon table.ti-items tbody td {
        height: 4.4mm;
        padding: 0.25mm 1mm;
        font-size: 11px;
        line-height: 1.15;
    }

    .ti-carbon .ti-body {
        gap: 6mm;
        margin-top: 1mm;
    }

    .ti-carbon .ti-body-left {
        padding: 0;
    }

    .ti-carbon .ti-sum {
        width: 100%;
    }

    .ti-carbon .ti-sign {
        width: 90%;
        justify-content: center;
        gap: 6%;
        margin: 1mm auto 0;
        padding-top: 0;
        border-top: 0;
    }

    .ti-carbon .ti-sign .col {
        flex: 1 1 0;
    }

    .ti-carbon .ti-sign .in-name {
        margin-bottom: 7mm;
        font-size: 12px;
    }

    .ti-logo {
        margin-bottom: 4px;
    }

    .ti-logo .lg {
        width: 32px;
        height: 32px;
    }

    .ti-logo .nm {
        font-size: 17px;
    }

    .ti-seller .line {
        font-size: 10.5px;
        line-height: 1.35;
    }

    .ti-title .t {
        font-size: 20px;
    }

    .ti-title .s {
        font-size: 12px;
    }

    .ti-info {
        gap: 18px;
        margin-top: 4px;
    }

    .ti-meta {
        width: 285px;
    }

    table.ti-items {
        margin-top: 8px;
    }

    table.ti-items thead th {
        padding: 5px 4px;
        font-size: 10.5px;
    }

    table.ti-items tbody td {
        padding: 5px 4px;
    }

    .ti-body {
        margin-top: 7px;
    }

    .ti-account-box {
        gap: 2mm;
        margin-top: 2mm;
        padding: 1.5mm 2mm;
        font-size: 10px;
        line-height: 1.3;
    }

    .ti-account-copy > strong {
        font-size: 11px;
    }

    .ti-account-qr {
        width: 18mm;
        height: 18mm;
        padding: 0.5mm;
    }

    .ti-carbon .ti-account-carbon {
        display: block;
        width: fit-content;
        min-width: 60mm;
        max-width: 100%;
        margin-top: 0;
        padding: 1mm 1.5mm;
        font-size: 11px;
        line-height: 1.25;
    }

    .ti-carbon .ti-account-carbon .ti-account-copy > strong {
        margin-bottom: 0.4mm;
        font-size: 11.5px;
    }

    .ti-sum {
        flex-basis: 305px;
        width: 305px;
    }

    .ti-sum .row {
        padding: 2px;
    }

    .ti-sum .grand {
        padding: 5px 2px;
        font-size: 13px;
    }

    .ti-sign {
        gap: 28px;
        margin-top: 20px;
    }

    .ti-sign .in-name {
        margin-bottom: 22px;
        font-size: 11px;
    }

    .ti-sign .ln {
        font-size: 10.5px;
    }

    .ti-carbon .ti-sign .ln {
        font-size: 11.5px;
    }

    .ti-carbon .ti-sign {
        gap: 6%;
        margin-top: 1mm;
        padding-top: 0;
    }

    .ti-carbon .ti-sign .in-name {
        margin-bottom: 7mm;
        font-size: 12px;
    }

    .ti-head,
    .ti-info,
    .ti-body,
    .ti-sign {
        break-inside: avoid;
    }

    .ti-items thead {
        display: table-header-group;
    }

    .ti-items tr {
        break-inside: avoid;
    }

    .thermal .muted {
        color: #000;
    }

    .thermal .th-corner {
        display: none;
    }

    /* ต้องตรงกับตัวอย่างบนจอของ receipt.css เพื่อให้การตัดบรรทัดเหมือนกัน */
    .thermal .th-store {
        color: #000;
        font-size: 16px;
    }

    .thermal .th-c {
        color: #000;
        font-size: 11px;
    }

    .thermal .th-document-title {
        text-align: center;
        color: #000;
        font-size: 12px;
    }

    .thermal .th-order-no {
        text-align: center;
        font-size: 12px;
        letter-spacing: 0.06em;
    }

    .thermal .th-row {
        margin: 3px 0;
        font-size: 12px;
    }

    .thermal .th-row > span:first-child {
        color: #000;
    }

    .thermal hr {
        border-color: #111;
    }

    .thermal hr.solid {
        margin: 13px 0;
    }

    .thermal hr.dash {
        margin: 13px 0;
    }

    .thermal .th-vat {
        margin-top: 22px;
        letter-spacing: 0;
        color: #000;
        font-size: 12px;
        font-weight: 500;
    }

    .receipt-screen-copy {
        display: none;
    }

    .thermal .th-item,
    .thermal .th-row,
    .thermal .th-grand {
        break-inside: avoid;
    }

    /* A5 พิมพ์ต่อเนื่อง 3 หน้า: ใบเสร็จ 1 และสำเนา 2 */
    .ti-full-a5:not(.receipt-full-print-copy) {
        display: none;
    }

    .receipt-full-print-copies {
        display: block;
    }

    .receipt-full-print-copy {
        display: flex;
        flex-direction: column;
        height: 198mm;
        min-height: 198mm;
        page: receipt-full-a5;
        break-after: page;
        page-break-after: always;
    }

    .receipt-full-print-copy:last-child {
        break-after: auto;
        page-break-after: auto;
    }

    .receipt-carbon-source,
    .receipt-carbon-screen-pages {
        display: none;
    }

    .receipt-carbon-print-copies {
        display: block;
    }

    .ti-carbon.receipt-carbon-print-copy {
        break-after: page;
        page-break-after: always;
    }

    .ti-carbon.receipt-carbon-print-copy:last-child {
        break-after: auto;
        page-break-after: auto;
    }

    .ti-carbon.receipt-carbon-summary-page > .ti-head,
    .ti-carbon.receipt-carbon-summary-page > .ti-info {
        display: flex;
    }

    /* พิมพ์สลิปเฉพาะต้นฉบับหรือสำเนาที่เลือก */
    .thermal:not(.receipt-print-copy) {
        display: none;
    }

    .receipt-print-copies {
        display: block;
    }

    .receipt-print-copy {
        break-after: page;
        page-break-after: always;
    }

    .receipt-print-copy:last-child {
        break-after: auto;
        page-break-after: auto;
    }

    .no-print {
        display: none !important;
    }

    .sidebar,
    .topbar {
        display: none !important;
    }

    .main {
        margin: 0 !important;
    }

    .content {
        padding: 0 !important;
        max-width: none;
    }

    body {
        background: #fff;
    }

    .invoice {
        box-shadow: none;
        border: none;
        max-width: none;
    }

    .inv-top {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    table.inv-items thead th,
    .inv-totals .row.grand {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .print-sheet {
        box-shadow: none !important;
        border: none !important;
    }

    .app {
        display: block !important;
    }

    .debtor-statement-sheet {
        page: debtor-statement-a5;
        width: 132mm;
        max-width: 132mm;
        min-height: 194mm;
        margin: 0 auto;
        padding: 0;
        box-sizing: border-box;
        overflow: visible;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        font-size: 7pt;
    }

    .debtor-statement-sheet,
    .debtor-statement-sheet * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .debtor-statement-accent {
        height: 1.2mm;
        background: #222;
    }

    .debtor-statement-head {
        break-inside: avoid;
        gap: 4mm;
        padding-top: 2mm;
        padding-bottom: 3mm;
    }

    .debtor-statement-brand {
        max-width: 58%;
        gap: 2.5mm;
    }

    .debtor-statement-logo {
        width: 11mm;
        height: 11mm;
        border-radius: 1mm;
    }

    .debtor-statement-store {
        font-size: 10pt;
    }

    .debtor-statement-brand > div:last-child > div:not(.debtor-statement-store) {
        font-size: 6.3pt;
        line-height: 1.3;
    }

    .debtor-statement-title {
        min-width: 48mm;
    }

    .debtor-statement-eyebrow {
        font-size: 6pt;
    }

    .debtor-statement-title h1 {
        margin-bottom: 2mm;
        font-size: 12pt;
    }

    .debtor-statement-docmeta {
        width: 46mm;
    }

    .debtor-statement-docmeta > div,
    .debtor-statement-docmeta strong {
        font-size: 6.3pt;
    }

    .debtor-statement-section-label {
        margin-top: 3.5mm;
        font-size: 7pt;
    }

    .debtor-statement-customer {
        break-inside: avoid;
        margin: 1.5mm 0 2.5mm;
        padding: 2.5mm 3.5mm;
    }

    .debtor-statement-customer span {
        font-size: 6.3pt;
    }

    .debtor-statement-customer strong {
        font-size: 7pt;
    }

    .debtor-customer-primary strong {
        font-size: 8pt;
    }

    .debtor-statement-summary {
        break-inside: avoid;
        grid-template-columns: minmax(0, 1fr) 52mm;
        gap: 4mm;
        margin-top: 2.5mm;
    }

    .debtor-summary-words {
        gap: 1.5mm;
        font-size: 6.3pt;
    }

    .debtor-summary-words strong,
    .debtor-summary-words small {
        font-size: 6.3pt;
    }

    .debtor-summary-totals > div {
        padding: 1.5mm 0;
        font-size: 7pt;
    }

    .debtor-summary-totals .grand {
        font-size: 8pt;
    }

    .debtor-summary-totals .grand strong {
        font-size: 10pt;
    }

    .debtor-statement-sheet .table-wrap {
        overflow: visible;
    }

    .debtor-statement-table tr {
        break-inside: avoid;
    }

    .debtor-metric {
        min-height: 17mm;
        padding: 2mm 3mm;
    }

    .debtor-metric > strong {
        font-size: 14pt;
    }

    .debtor-metric-due > strong {
        font-size: 16pt;
    }

    .debtor-statement-balance-words {
        break-inside: avoid;
        margin-bottom: 3mm;
        padding: 2mm 3mm;
    }

    .debtor-table-caption {
        break-after: avoid;
        margin-bottom: 1.5mm;
    }

    .debtor-table-caption strong {
        font-size: 8pt;
    }

    .debtor-table-caption > div > span,
    .debtor-bill-count {
        font-size: 6pt;
    }

    .debtor-statement-table {
        font-size: 6.3pt;
    }

    .debtor-statement-table thead {
        display: table-header-group;
    }

    .debtor-statement-table tr {
        break-inside: avoid;
    }

    .debtor-statement-sheet table.data.debtor-statement-table thead th {
        padding: 1.3mm 0.8mm;
        font-size: 6.5pt;
        line-height: 1.2;
    }

    .debtor-statement-sheet table.data.debtor-statement-table tbody td {
        padding: 1.4mm 1mm;
        font-size: 7.8pt;
    }

    .debtor-statement-table tbody td:last-child strong {
        font-size: 6.7pt;
    }

    .debtor-age-badge {
        min-width: 10mm;
        padding: 0.5mm 1mm;
        font-size: 5.5pt;
    }

    .debtor-statement-table tfoot th {
        padding: 1.5mm 1mm;
        font-size: 6.3pt;
    }

    .debtor-statement-table tfoot th:last-child {
        font-size: 7.5pt;
    }

    .debtor-statement-note,
    .debtor-statement-footer {
        break-inside: avoid;
        margin: 2mm 0 2.5mm;
        padding: 1.5mm 0;
        font-size: 6pt;
    }

    .debtor-payment-box {
        break-inside: avoid;
        gap: 3mm;
        margin: 2.5mm 0 0;
        padding: 2mm 2.5mm;
    }

    .debtor-payment-copy {
        font-size: 6.3pt;
    }

    .debtor-payment-copy > strong {
        font-size: 7pt;
    }

    .debtor-promptpay-qr {
        width: 24mm;
        height: 24mm;
    }

    .debtor-statement-footer {
        break-inside: avoid;
        margin-top: 3mm;
    }

    .debtor-payment-history-sheet {
        page: debtor-payment-history;
        padding: 0;
        border: 0;
        box-shadow: none;
    }

    .debtor-payment-print-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 8mm;
        margin-bottom: 4mm;
        padding-bottom: 3mm;
        border-bottom: 1.5px solid #111;
    }

    .debtor-payment-print-brand {
        font-size: 7pt;
    }

    .debtor-payment-print-brand img {
        width: 12mm;
        height: 12mm;
    }

    .debtor-payment-print-store {
        margin-bottom: 1mm;
        font-size: 13pt;
        font-weight: 800;
    }

    .debtor-payment-print-title small {
        font-size: 6.5pt;
    }

    .debtor-payment-print-title h1 {
        font-size: 15pt;
    }

    .debtor-payment-print-title span {
        font-size: 7pt;
    }

    .debtor-payment-print-summary {
        display: grid;
        margin-bottom: 4mm;
    }

    .debtor-payment-print-summary > div {
        padding: 2mm 2.5mm;
    }

    .debtor-payment-print-summary span {
        font-size: 6.5pt;
    }

    .debtor-payment-print-summary strong {
        font-size: 8pt;
    }

    .debtor-payment-history-sheet .table-wrap {
        padding: 0 !important;
        overflow: visible;
    }

    .debtor-payment-history-table {
        width: 100%;
        min-width: 0;
        table-layout: fixed;
        font-size: 8pt;
    }

    .debtor-payment-history-table thead {
        display: table-header-group;
    }

    .debtor-payment-history-table thead th {
        color: #fff !important;
        background: #263238 !important;
    }

    .debtor-payment-history-table tr {
        break-inside: avoid;
    }

    .debtor-payment-history-table th,
    .debtor-payment-history-table td {
        padding: 2mm 1.5mm;
    }

    .debtor-payment-history-table a {
        color: #111;
        text-decoration: none;
    }

    .debtor-payment-history-table tfoot td {
        border-top: 1.5px solid #111;
        background: #eef1ef;
    }
}

/* Promotion builder and gift handover */
.promotion-editor {
    margin-bottom: 20px;
}

.promotion-options,
.promotion-section-head,
.promotion-rule-top {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.promotion-options {
    margin: 12px 0;
}

.promotion-options input,
.promo-choice-wrap input,
.promotion-pick input,
.promotion-handover input[type='checkbox'] {
    width: auto;
}

.promotion-section-head {
    justify-content: space-between;
    margin-top: 16px;
}

.promotion-rule-row {
    padding: 14px;
    margin: 10px 0;
    border: 1px solid var(--outline-variant);
    border-radius: 10px;
    background: var(--surface-container-low);
}

.promotion-rule-top .field {
    flex: 1;
    min-width: 180px;
}

.promo-products {
    width: 100%;
    margin: 6px 0;
}

.promotion-preview {
    margin-top: 16px;
    padding: 14px;
    border-radius: 10px;
    background: var(--secondary-container);
}

.promo-choice-wrap {
    display: block;
    margin: 8px 0;
}

.promotion-pos-box {
    flex: none;
    padding: 10px 15px;
    border-top: 1px solid #dce7df;
    background: #f5faf7;
}

#promotionCart {
    max-height: 210px;
    overflow-y: auto;
}

#promotionPayment {
    border: 1px solid #dce7df;
    border-radius: 12px;
}

.promotion-applied,
.promotion-pick {
    display: block;
    margin: 7px 0;
}

.promotion-applied .chip {
    margin: 2px;
}

.promotion-gift-line {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px dashed #c7dccf;
    font-size: 12px;
}

.promotion-gift-line small,
.promotion-handover small {
    display: block;
    color: var(--muted);
}

.promotion-handover {
    margin-top: 9px;
    padding: 10px;
    border: 1px solid #e2c078;
    border-radius: 8px;
    background: #fff9e9;
}

.promotion-handover label {
    display: block;
    margin-top: 8px;
}

.promotion-alert {
    margin-top: 8px;
    color: #9c382d;
    font-weight: 600;
}

.promotion-bill-discount {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin: 8px 0;
    color: #166534;
}

/* Guided promotion setup */
.promo-easy-editor {
    max-width: 1050px;
    margin-left: auto;
    margin-right: auto;
}

.promo-easy-editor [hidden] {
    display: none !important;
}

.promo-step {
    padding: 20px 0;
    border-top: 1px solid var(--outline-variant);
}

.promo-step-title {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

.promo-step-title > span {
    display: grid;
    place-items: center;
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-weight: 700;
}

.promo-step-title h3 {
    margin: 0;
    font-size: 17px;
}

.promo-step-title p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 13px;
}

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

.promo-template {
    display: block;
    padding: 16px;
    border: 1px solid #d3e2d8;
    border-radius: 12px;
    background: #fff;
    color: var(--on-surface);
    text-align: left;
    cursor: pointer;
    font: inherit;
}

.promo-template strong {
    display: block;
    margin-bottom: 4px;
    font-size: 15px;
}

.promo-template small {
    color: var(--muted);
}

.promo-template:hover {
    background: #f5faf7;
    border-color: #7da48b;
}

.promo-template.is-selected {
    background: #edf7f0;
    border: 2px solid #287249;
    padding: 15px;
}

.promo-template.is-selected strong {
    color: #1c633b;
}

.promo-custom-button {
    margin-top: 12px;
}

.promo-custom-button.is-selected {
    background: var(--secondary-container);
}

.promo-easy-editor .promotion-rule-row {
    background: #fafcfb;
    border-color: #dce7df;
    padding: 16px;
}

.promo-easy-editor .promotion-rule-top {
    align-items: flex-end;
    margin-bottom: 8px;
}

.promo-easy-editor .promotion-rule-top .field {
    margin-bottom: 0;
}

.promo-easy-editor .promo-number-field {
    max-width: 340px;
}

.promo-number-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.promo-number-wrap input {
    width: 150px;
}

.promo-number-wrap > span {
    min-width: 30px;
    color: var(--muted);
}

.promo-products-field > label {
    display: block;
    margin: 12px 0 8px;
    font-size: 14px;
    font-weight: 500;
}

.promo-picker-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.promo-picked-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 6px 10px;
    border-radius: 8px;
    background: #e8f3ec;
    color: #235c37;
    font-size: 13px;
}

.promo-picked-chip > span {
    overflow-wrap: anywhere;
}

.promo-picked-chip button {
    border: 0;
    background: transparent;
    color: #235c37;
    font-size: 20px;
    cursor: pointer;
}

.promo-picker {
    max-width: 650px;
    border: 1px solid #d3e2d8;
    border-radius: 9px;
    background: #fff;
}

.promo-picker summary {
    cursor: pointer;
    padding: 10px 12px;
    font-weight: 600;
    color: #287249;
}

.promo-picker-body {
    padding: 0 12px 12px;
}

.promo-picker-options {
    max-height: 240px;
    overflow-y: auto;
    margin-top: 8px;
}

.promo-picker-option {
    display: flex !important;
    align-items: flex-start;
    gap: 9px;
    padding: 8px 6px;
    margin: 0 !important;
    cursor: pointer;
    border-bottom: 1px solid #edf2ee;
    font-weight: 400 !important;
}

.promo-picker-option:hover {
    background: #f2f8f4;
}

.promo-picker-option input {
    width: auto;
    flex: none;
    margin-top: 4px;
}

.promo-repeat-option,
.promo-active-option,
.promo-check-option {
    display: block;
    margin: 14px 0;
}

.promo-repeat-option input,
.promo-active-option input,
.promo-check-option input {
    width: auto;
}

.promo-repeat-option small {
    display: block;
    margin: 4px 0 0 22px;
    color: var(--muted);
}

.promo-gift-confirmation {
    max-width: 650px;
    margin-top: 18px;
}

.promo-advanced {
    border: 1px solid #dce7df;
    border-radius: 10px;
    margin: 12px 0 18px;
}

.promo-advanced > summary {
    padding: 14px;
    cursor: pointer;
    font-weight: 600;
}

.promo-advanced > summary span {
    margin-left: 8px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 400;
}

.promo-advanced-body {
    padding: 4px 16px 16px;
}

.promo-easy-editor .promotion-preview {
    padding: 18px;
    background: #eaf4ee;
    border: 1px solid #c9dfd0;
}

.promo-easy-editor .promotion-preview p {
    margin: 8px 0;
    font-size: 16px;
    line-height: 1.7;
    overflow-wrap: anywhere;
}

.promo-easy-editor .promotion-preview small {
    color: #526c5b;
}

.promo-form-error {
    margin-top: 12px;
    padding: 12px;
    border-radius: 8px;
    color: #9c382d;
    background: #fff1ee;
}

.promo-list-description {
    max-width: 540px;
    margin-top: 5px;
    white-space: normal;
    line-height: 1.6;
    font-size: 12px;
}

@media (max-width: 650px) {
    .promo-template-grid {
        grid-template-columns: 1fr;
    }

    .promo-step {
        padding: 16px 0;
    }

    .promo-advanced > summary span {
        display: block;
        margin: 4px 0 0;
    }

    .promo-number-wrap input {
        width: 120px;
    }

    .promo-easy-editor .promotion-rule-top {
        gap: 10px;
    }
}

/* Dashboard date control matches the compact action capsules. */
@media screen {
    .dashboard-date-picker input[type='date'] {
        width: 190px;
        height: 42px;
        min-height: 42px;
        padding: 9px 16px;
        border: 1px solid var(--action-border);
        border-radius: 999px;
        background: #fff;
        font: inherit;
        font-size: 15px;
        line-height: 22px;
        box-shadow: 0 2px 5px rgba(27, 67, 50, 0.06);
        transition:
            border-color 0.15s,
            background 0.15s,
            box-shadow 0.15s;
    }

    .dashboard-date-picker .date-display {
        inset: 0;
        transform: none;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 32px;
        text-align: center;
        color: var(--primary-dark);
        font-size: 15px;
        font-weight: 500;
        line-height: 1;
        font-variant-numeric: tabular-nums;
    }

    .dashboard-date-picker input[type='date']:hover {
        background: var(--action-surface);
        border-color: #a9d8ba;
    }

    .dashboard-date-picker input[type='date']:focus-visible {
        border-color: var(--primary);
        outline: 3px solid var(--primary-container);
        outline-offset: 3px;
    }

    .dashboard-date-picker input[type='date']::-webkit-calendar-picker-indicator {
        opacity: 0.65;
        cursor: pointer;
    }
}

/* Sales history filters share the action button palette and capsule shape. */
@media screen {
    :root body .sales-history-filters {
        gap: 14px 12px;
    }

    :root body .sales-history-filters .field {
        min-width: 160px;
        flex: 1 1 160px;
    }

    :root body .sales-history-filters .field label {
        padding-left: 14px;
        font-size: 12px;
        font-weight: 500;
        color: var(--action-muted);
    }

    :root body .sales-history-filters .field :is(input, select) {
        height: 42px;
        min-height: 42px;
        padding: 9px 16px;
        border: 1px solid var(--action-border);
        border-radius: 999px;
        background: #fff;
        color: var(--primary-dark);
        font: inherit;
        font-size: 13px;
        box-shadow: 0 2px 5px rgba(27, 67, 50, 0.06);
        transition:
            border-color 0.15s,
            background 0.15s,
            box-shadow 0.15s;
    }

    :root body .sales-history-filters .field :is(input, select):hover {
        border-color: #a9d8ba;
        background: var(--action-surface);
    }

    :root body .sales-history-filters .field :is(input, select):focus {
        border-color: var(--primary);
        outline: none;
        box-shadow: 0 0 0 3px var(--primary-container);
    }

    :root body .sales-history-filters input::placeholder {
        color: var(--action-muted);
    }

    :root body .sales-history-filters .sales-history-search-control input {
        padding-right: 48px;
    }

    :root body .sales-history-filters .date-nav-wrap {
        display: block;
        width: 100%;
    }

    :root body .sales-history-filters input[type='date'] {
        color: transparent;
    }

    :root body .sales-history-filters .date-display {
        inset: 0;
        transform: none;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 32px;
        color: var(--primary-dark);
        font-size: 13px;
        line-height: 1;
        font-variant-numeric: tabular-nums;
    }

    :root:root body .sales-history-filters > .btn {
        height: 42px;
        padding: 9px 20px;
        font-size: 13px;
    }

    :root body .sales-history-filters .return-bill-matches {
        top: 68px;
        border-color: var(--action-border);
    }
}

/* Customer database date range uses the same capsules as its actions. */
@media screen {
    :root body .customer-print-picker {
        border-color: var(--action-border);
        border-radius: 20px;
    }

    :root body .customer-print-picker > label {
        flex-basis: 180px;
        color: var(--action-muted);
        font-weight: 500;
    }

    :root body .customer-print-picker .customer-print-date input[type='date'] {
        height: 42px;
        padding: 9px 14px;
        border-radius: 999px;
        border-color: var(--action-border);
        background: #fff;
        box-shadow: 0 2px 5px rgba(27, 67, 50, 0.06);
        transition:
            border-color 0.15s,
            background 0.15s,
            box-shadow 0.15s;
    }

    :root body .customer-print-picker .customer-print-date input[type='date']:hover {
        background: var(--action-surface);
        border-color: #a9d8ba;
    }

    :root body .customer-print-picker .customer-print-date input[type='date']:focus {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 3px var(--primary-container);
    }

    :root body .customer-print-picker .customer-print-date .date-display {
        inset: 0;
        transform: none;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 32px;
        font-size: 13px;
        line-height: 1;
        color: var(--primary-dark);
        font-variant-numeric: tabular-nums;
    }

    :root:root body .customer-print-picker > .btn {
        min-height: 42px;
        padding: 9px 16px;
    }
}

/* Customer purchase history screen controls. */
@media screen {
    :root body .customer-history-filters .field {
        min-width: 180px;
    }

    :root body .customer-history-filters .field label {
        padding-left: 14px;
        font-size: 12px;
        font-weight: 500;
        color: var(--action-muted);
    }

    :root body .customer-history-filters .field :is(input, select) {
        height: 42px;
        padding: 9px 16px;
        border-radius: 999px;
        border: 1px solid var(--action-border);
        background: #fff;
        color: var(--primary-dark);
        font: inherit;
        font-size: 13px;
        box-shadow: 0 2px 5px rgba(27, 67, 50, 0.06);
        transition:
            border-color 0.15s,
            background 0.15s,
            box-shadow 0.15s;
    }

    :root body .customer-history-filters .field :is(input, select):hover {
        border-color: #a9d8ba;
        background: var(--action-surface);
    }

    :root body .customer-history-filters .field :is(input, select):focus {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 3px var(--primary-container);
    }

    :root body .customer-history-filters .date-nav-wrap {
        display: block;
        width: 100%;
    }

    :root body .customer-history-filters input[type='date'] {
        color: transparent;
    }

    :root body .customer-history-filters .date-display {
        inset: 0;
        transform: none;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 32px;
        color: var(--primary-dark);
        font-size: 13px;
        line-height: 1;
        font-variant-numeric: tabular-nums;
    }

    :root:root body .customer-history-filters .btn {
        min-height: 42px;
        padding: 9px 16px;
        font-size: 13px;
    }

    :root:root body .customer-history-filters > .btn-secondary {
        color: #fff;
        background: var(--primary-dark);
        border-color: var(--primary-dark);
        box-shadow: var(--action-shadow);
    }

    :root:root body .customer-history-filters > .btn-secondary:hover {
        background: var(--primary);
    }

    :root:root body .customer-history-filters .btn-outline {
        color: var(--primary);
        background: #fff;
        border-color: var(--action-border);
        box-shadow: 0 2px 5px rgba(27, 67, 50, 0.06);
    }

    :root:root body .customer-history-filters .btn-outline:hover {
        background: var(--action-surface);
    }

    :root body .customer-history-filters .customer-history-print-controls {
        flex-wrap: wrap;
    }

    :root body .customer-history-filters .customer-history-format {
        padding: 4px;
        gap: 4px;
        border-radius: 999px;
        border-color: var(--action-border);
        background: var(--action-surface);
        box-shadow: 0 2px 5px rgba(27, 67, 50, 0.06);
    }

    :root body .customer-history-filters .customer-history-format-option {
        min-height: 32px;
        border-radius: 999px;
        color: var(--action-muted);
        padding: 0 14px;
    }

    :root body .customer-history-filters .customer-history-format-option:hover {
        color: var(--primary-dark);
        background: var(--primary-container);
    }

    :root body .customer-history-filters .customer-history-format-option.is-active {
        color: var(--primary-dark);
        background: #fff;
        box-shadow: 0 1px 3px rgba(27, 67, 50, 0.08);
    }

    :root body .customer-history-filters .customer-history-format-option.is-active .ui-icon {
        color: inherit;
    }

    :root:root body .customer-history-filters .customer-history-print-button {
        color: #fff;
        background: #285c43;
        border-color: #285c43;
        box-shadow: var(--action-shadow);
    }

    :root:root body .customer-history-filters .customer-history-print-button:hover {
        color: #fff;
        background: #346d51;
    }
}

@media screen {
    :root:root body .stock-supplier-card-actions > button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 76px;
        height: 32px;
        min-height: 32px;
        padding: 5px 12px;
        box-sizing: border-box;
    }
}

@media screen {
    .customer-loyalty-summary {
        margin: 18px 0 12px;
        padding: 16px;
        border: 1px solid #b8ddc7;
        border-radius: 16px;
        background: #edf7f0;
        color: var(--primary-dark);
    }

    .customer-loyalty-summary > span {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
    }

    .customer-loyalty-summary .ui-icon {
        width: 16px;
        height: 16px;
    }

    .customer-loyalty-summary > strong {
        display: block;
        margin: 6px 0;
        font-size: 28px;
    }

    .customer-loyalty-summary small {
        font-size: 13px;
        font-weight: 500;
    }

    .customer-loyalty-summary .muted {
        font-size: 11px;
    }

    .customer-loyalty-history {
        margin-bottom: 18px;
        font-size: 12px;
    }

    .customer-loyalty-history summary {
        cursor: pointer;
        color: var(--primary);
        padding: 4px 0;
    }

    .customer-loyalty-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 10px 0;
        border-bottom: 1px solid var(--action-border);
    }

    .customer-loyalty-row small {
        display: block;
        color: var(--muted);
        font-size: 10px;
    }
}

/* Keep A5 promotion text directly below its note, including wrapped lines. */
.ti-full-a5 .ti-items-notes {
    margin-top: auto;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    background: #fff;
}

.ti-full-a5 .ti-items-notes .ti-items-note {
    margin-top: 0;
}

.ti-full-a5 .ti-items-notes .ti-order-note + .ti-promotion-note {
    border-top: 0;
}