@charset "utf-8";
/* wwwroot/css/app.css */
/* แทนทั้งไฟล์ */

:root {
    --bg: #eef1f8;
    --card: #ffffff;
    --card-soft: #f8f9fd;
    --text: #17243a;
    --muted: #748094;
    --line: #e2e7f0;
    --blue-900: #163766;
    --blue-800: #1c4d89;
    --blue-700: #2563a9;
    --blue-100: #e7eefb;
    --cyan: #4aa8d8;
    --green: #22a06b;
    --amber: #d28721;
    --red: #cf5c5c;
    --purple: #7562d6;
    --shadow: 0 20px 50px rgba(38, 62, 105, .12);
    --shadow-sm: 0 10px 28px rgba(38, 62, 105, .08);
    --sidebar: 306px;
    --radius: 22px;
    --z-modal-alert: 10070;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: "Noto Sans Thai", sans-serif;
    color: var(--text);
    background: radial-gradient(circle at 8% 0%, rgba(83, 104, 216, .15), transparent 26%), radial-gradient(circle at 94% 2%, rgba(74, 168, 216, .14), transparent 28%), linear-gradient(135deg, #eceff7 0%, #f8f7fb 52%, #e9eef8 100%);
}

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

html,
body {
    overflow-x: clip;
}

.app {
    display: grid;
    grid-template-columns: var(--sidebar) minmax(0, 1fr);
    min-height: 100vh;
}

.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 20px 16px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    background: linear-gradient(180deg, #e5eaf5 0%, #f5f6fb 50%, #e2e8f4 100%);
    border-right: 1px solid rgba(28, 77, 137, .12);
    box-shadow: 10px 0 30px rgba(38, 62, 105, .07);
}

    .sidebar::-webkit-scrollbar {
        width: 0;
        height: 0;
    }

.brand {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px;
    border-radius: 24px;
    background: linear-gradient(135deg, var(--blue-900), var(--blue-700));
    color: #fff;
    box-shadow: 0 16px 34px rgba(28, 77, 137, .25);
    margin-bottom: 16px;
}

.brand-mark {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.18);
    font-weight: 800;
    letter-spacing: -.4px;
}

.brand strong {
    display: block;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.15;
}

.brand span {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: rgba(255,255,255,.76);
    line-height: 1.35;
}

.nav-section {
    margin: 2px 0;
}

    .nav-section + .nav-section {
        margin-top: 4px;
        padding-top: 0;
        border-top: 0;
    }

.nav-group-toggle {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) 16px;
    align-items: center;
    gap: 11px;
    width: 100%;
    min-height: 38px;
    margin: 1px 0;
    padding: 5px 9px;
    border: 0;
    border-radius: 16px;
    background: rgba(255, 255, 255, .42);
    color: var(--blue-900);
    font-size: 13.5px;
    font-weight: 750;
    letter-spacing: .01em;
    line-height: 1.25;
    text-align: left;
    cursor: pointer;
}

    .nav-group-toggle:hover {
        background: rgba(255, 255, 255, .55);
    }

    .nav-section.open .nav-group-toggle {
        background: rgba(255, 255, 255, .58);
    }

.nav-group-label {
    min-width: 0;
}

.nav-group-chevron {
    width: 16px;
    height: 18px;
    justify-self: end;
    position: relative;
}

    .nav-group-chevron::before {
        content: "";
        position: absolute;
        top: 5px;
        left: 5px;
        width: 7px;
        height: 7px;
        border-right: 2px solid var(--blue-800);
        border-bottom: 2px solid var(--blue-800);
        transform: rotate(45deg);
    }

.nav-section.open .nav-group-chevron::before {
    top: 7px;
    transform: rotate(-135deg);
}

.nav-submenu {
    display: none;
}

.nav-group-toggle {
    background: rgba(255, 255, 255, .62);
    color: var(--blue-900);
    box-shadow: inset 0 0 0 1px rgba(28, 77, 137, .06);
}

    .nav-group-toggle:hover {
        background: rgba(255, 255, 255, .78);
    }

.nav-section.open .nav-group-toggle {
    background: linear-gradient(135deg, rgba(231, 238, 251, .95), rgba(255, 255, 255, .82));
    color: var(--blue-900);
    box-shadow: inset 3px 0 0 var(--blue-700);
}

.nav-section.open .nav-submenu {
    display: block;
    margin: 4px 0 6px 18px;
    padding: 5px 0 5px 8px;
    border-left: 2px solid rgba(28, 77, 137, .16);
    background: rgba(255, 255, 255, .24);
    border-radius: 0 14px 14px 0;
}

.nav-section .nav-submenu .nav-item {
    width: calc(100% - 14px);
    margin-left: 0;
    min-height: 36px;
    padding: 5px 8px;
    border-radius: 13px;
    color: #31435f;
    font-size: 13px;
    font-weight: 700;
}

    .nav-section .nav-submenu .nav-item:hover {
        background: rgba(231, 238, 251, .9);
        transform: translateX(2px);
    }

    .nav-section .nav-submenu .nav-item.active {
        color: var(--blue-900);
        background: #ffffff;
        box-shadow: inset 3px 0 0 var(--blue-700), 0 8px 18px rgba(38, 62, 105, .08);
    }

    .nav-section .nav-submenu .nav-item .nav-icon {
        width: 29px;
        height: 29px;
        border-radius: 11px;
        background: rgba(231, 238, 251, .72);
        color: var(--blue-800);
    }

    .nav-section .nav-submenu .nav-item.active .nav-icon {
        color: #fff;
        background: linear-gradient(135deg, var(--blue-900), var(--blue-700));
    }

.nav-subgroup + .nav-subgroup {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(28, 77, 137, .14);
}

.nav-subgroup-label {
    display: block;
    width: calc(100% - 6px);
    margin: 0 0 7px 2px;
    padding: 7px 10px;
    border-radius: 11px;
    background: linear-gradient(135deg, rgba(231, 238, 251, .96), rgba(255, 255, 255, .84));
    color: var(--blue-900);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .02em;
    line-height: 1.3;
    box-shadow: inset 3px 0 0 var(--blue-700), 0 2px 8px rgba(38, 62, 105, .06);
}

.nav-subgroup:first-child .nav-subgroup-label {
    margin-top: 2px;
}

.nav-subgroup .nav-item {
    width: calc(100% - 10px);
    margin-left: 4px;
}

.nav-section--single .nav-item {
    width: 100%;
    margin-left: 0;
}

.sidebar.menu-filter-active .nav-item.menu-filter-hidden,
.sidebar.menu-filter-active .nav-section.menu-filter-hidden,
.sidebar.menu-filter-active .nav-subgroup.menu-filter-hidden {
    display: none !important;
}

.sidebar-menu-filter-empty {
    margin: 8px 12px 10px;
    padding: 8px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .12);
    color: rgba(255, 255, 255, .78);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
}

.nav-item {
    width: 100%;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    min-height: 38px;
    padding: 5px 9px;
    margin: 2px 0;
    border: 0;
    border-radius: 16px;
    background: transparent;
    color: #2d405d;
    text-align: left;
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 750;
    cursor: pointer;
    transition: .18s ease;
}

    .nav-item:hover {
        background: rgba(255,255,255,.64);
        transform: translateX(2px);
    }

    .nav-item.active {
        color: #fff;
        background: linear-gradient(135deg, var(--blue-900), var(--blue-700));
        box-shadow: 0 13px 26px rgba(28, 77, 137, .22);
    }

.nav-item[data-coming-soon="true"] {
    cursor: default;
}

    .nav-item[data-coming-soon="true"]:hover {
        background: rgba(255,255,255,.64);
        transform: translateX(2px);
    }

.nav-item--locked {
    cursor: not-allowed;
    pointer-events: auto;
}

    .nav-item--locked:hover {
        background: transparent;
        transform: none;
    }

    .nav-item--locked .nav-item-text {
        color: #8a97ab;
    }

    .nav-item--locked .nav-icon {
        color: #93a0b2;
        background: #eef2f7;
    }

.nav-item-text {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.nav-item-lock {
    display: inline-grid;
    flex-shrink: 0;
    place-items: center;
    width: 16px;
    height: 16px;
    color: #5c6b80;
}

    .nav-item-lock svg {
        width: 15px;
        height: 15px;
    }

.nav-icon,
.stat-icon,
.action-icon,
.car-thumb {
    display: grid;
    place-items: center;
    color: var(--blue-800);
    background: var(--blue-100);
}

.nav-icon {
    width: 31px;
    height: 31px;
    border-radius: 12px;
    box-shadow: inset 0 0 0 1px rgba(28,77,137,.05);
}

.nav-item.active .nav-icon {
    color: #fff;
    background: rgba(255,255,255,.16);
}

svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.main {
    min-width: 0;
    max-width: 100%;
    padding: 28px;
}

.topbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px;
}

.top-left {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
}

.menu-toggle {
    display: none;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 16px;
    background: #fff;
    color: var(--blue-800);
    box-shadow: var(--shadow-sm);
    font-size: 22px;
    cursor: pointer;
}

.page-title h1 {
    margin: 0;
    color: var(--blue-900);
    font-size: clamp(26px, 3vw, 38px);
    line-height: 1.16;
    font-weight: 800;
    letter-spacing: -.7px;
}

.page-title p {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 14.5px;
    line-height: 1.55;
}

.top-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.top-actions-tools {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex: 0 1 auto;
}

.menu-search {
    position: relative;
    width: 240px;
    max-width: 280px;
    min-width: 0;
    flex: 0 1 240px;
}

.menu-search-label {
    display: block;
    position: relative;
}

.menu-search-icon {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--muted);
    pointer-events: none;
}

    .menu-search-icon svg {
        width: 16px;
        height: 16px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2.2;
    }

.menu-search-input {
    width: 100%;
    min-height: 43px;
    padding: 10px 14px 10px 40px;
    border: 1px solid rgba(28,77,137,.10);
    border-radius: 16px;
    background: rgba(255,255,255,.88);
    color: var(--blue-900);
    box-shadow: var(--shadow-sm);
    font-size: 13.5px;
    font-weight: 600;
}

    .menu-search-input:focus {
        outline: none;
        border-color: rgba(28,77,137,.24);
        box-shadow: 0 0 0 3px rgba(28,77,137,.10), var(--shadow-sm);
    }

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

.menu-search-results {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 25;
    max-height: 320px;
    overflow: auto;
    padding: 7px;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid rgba(28,77,137,.14);
    box-shadow: 0 18px 36px rgba(38, 62, 105, .18);
    display: none;
}

.menu-search.open .menu-search-results {
    display: block;
}

.menu-search-status,
.menu-search-option {
    width: 100%;
    min-height: 40px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--blue-900);
    text-align: left;
    cursor: pointer;
    font: inherit;
}

.menu-search-status {
    cursor: default;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
}

.menu-search-option:hover,
.menu-search-option.active {
    background: rgba(28,77,137,.08);
}

.menu-search-option-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    color: var(--blue-700);
}

    .menu-search-option-icon svg {
        width: 18px;
        height: 18px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2.1;
    }

.menu-search-option-body {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.menu-search-option-title {
    font-size: 13.5px;
    font-weight: 800;
    line-height: 1.3;
}

.menu-search-option-group {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.branch-select {
    position: relative;
    min-width: 210px;
}

.branch-button {
    width: 100%;
    min-height: 43px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid rgba(28,77,137,.10);
    border-radius: 16px;
    background: rgba(255,255,255,.88);
    color: var(--blue-900);
    box-shadow: var(--shadow-sm);
    font-size: 13.5px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
}

    .branch-button span {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .branch-button svg {
        width: 15px;
        height: 15px;
        stroke-width: 2.4;
    }

.branch-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 20;
    width: 100%;
    padding: 7px;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid rgba(28,77,137,.14);
    box-shadow: 0 18px 36px rgba(38, 62, 105, .18);
    display: none;
}

.branch-select.open .branch-menu {
    display: grid;
    gap: 4px;
}

.branch-option {
    width: 100%;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #31435f;
    font-size: 13px;
    font-weight: 750;
    cursor: pointer;
    text-align: left;
}

    .branch-option:hover {
        background: var(--blue-100);
        color: var(--blue-900);
    }

    .branch-option.active {
        background: linear-gradient(135deg, var(--blue-900), var(--blue-700));
        color: #fff;
        box-shadow: 0 8px 18px rgba(28, 77, 137, .18);
    }

.btn {
    min-height: 43px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border: 0;
    border-radius: 16px;
    font-size: 13.5px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
}

.btn-primary {
    color: #fff;
    background: #092F6D;
    background-image: none;
    box-shadow: 0 8px 18px rgba(9, 47, 109, .22);
}

.btn-secondary {
    color: var(--blue-800);
    background: rgba(255,255,255,.88);
    border: 1px solid rgba(28,77,137,.10);
    box-shadow: var(--shadow-sm);
}

.card {
    background: rgba(255,255,255,.88);
    border: 1px solid rgba(28,77,137,.08);
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius);
}

.dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(340px, .75fr);
    gap: 20px;
    margin-bottom: 20px;
}

.summary-panel {
    padding: 20px;
    border-radius: 28px;
}

.section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}

.section-title {
    margin: 0;
    color: var(--blue-900);
    font-size: 18px;
    font-weight: 800;
    line-height: 1.25;
}

.section-subtitle {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
}

.mini-link {
    color: var(--blue-700);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

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

.priority-card {
    min-height: 132px;
    padding: 15px;
    border-radius: 22px;
    background: linear-gradient(180deg, #ffffff, #f7f9fe);
    border: 1px solid var(--line);
    position: relative;
    overflow: hidden;
}

    .priority-card::after {
        content: "";
        position: absolute;
        right: -32px;
        top: -32px;
        width: 92px;
        height: 92px;
        border-radius: 50%;
        background: rgba(47,115,208,.08);
    }

.priority-label {
    color: var(--muted);
    font-size: 12.5px;
    font-weight: 800;
    margin-bottom: 8px;
}

.priority-value {
    color: var(--blue-900);
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.5px;
}

.priority-desc {
    margin-top: 9px;
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.45;
}

.alert-card {
    padding: 18px;
    border-radius: 28px;
    background: linear-gradient(135deg, var(--blue-900), var(--blue-700));
    color: #fff;
    box-shadow: var(--shadow);
}

.alert-title {
    font-size: 17px;
    font-weight: 800;
    margin-bottom: 14px;
}

.alert-list {
    display: grid;
    gap: 10px;
}

.alert-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 12px;
    border-radius: 18px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.10);
}

.alert-name {
    font-weight: 800;
    font-size: 13.5px;
}

.alert-desc {
    margin-top: 2px;
    color: rgba(255,255,255,.74);
    font-size: 12.5px;
}

.alert-count {
    font-size: 20px;
    font-weight: 800;
}

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.kpi-card {
    padding: 18px;
    border-radius: 24px;
}

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

.stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 16px;
}

.kpi-value {
    margin: 0;
    color: var(--blue-900);
    font-size: 31px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.5px;
}

.kpi-label {
    margin-top: 7px;
    color: var(--muted);
    font-size: 13.5px;
    font-weight: 700;
}

.trend {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 13px;
    padding: 7px 10px;
    border-radius: 999px;
    background: var(--blue-100);
    color: var(--blue-700);
    font-size: 12px;
    font-weight: 800;
}

.pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.pill-blue {
    color: var(--blue-700);
    background: var(--blue-100);
}

.pill-green {
    color: var(--green);
    background: #e6f7ef;
}

.pill-amber {
    color: var(--amber);
    background: #fff1df;
}

.pill-red {
    color: var(--red);
    background: #ffeaea;
}

.pill-purple {
    color: var(--purple);
    background: #efedff;
}

.content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(340px, .78fr);
    gap: 20px;
}

.panel {
    min-width: 0;
    padding: 20px;
    border-radius: 28px;
}

.pipeline {
    display: grid;
    gap: 12px;
}

.pipeline-row {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 13px;
    border-radius: 20px;
    background: var(--card-soft);
    border: 1px solid var(--line);
}

.action-icon {
    width: 44px;
    height: 44px;
    border-radius: 16px;
}

.row-title {
    color: var(--blue-900);
    font-size: 14px;
    font-weight: 800;
}

.row-desc {
    margin-top: 3px;
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.45;
}

.progress {
    height: 8px;
    border-radius: 999px;
    background: #e8edf5;
    overflow: hidden;
    margin-top: 9px;
}

    .progress > span {
        display: block;
        height: 100%;
        border-radius: 999px;
        background: linear-gradient(90deg, var(--blue-700), var(--cyan));
    }

.finance-summary {
    display: grid;
    gap: 12px;
}

.finance-item {
    padding: 14px;
    border-radius: 20px;
    background: var(--card-soft);
    border: 1px solid var(--line);
}

.finance-top {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 7px;
    font-size: 13px;
    font-weight: 800;
    color: var(--blue-900);
}

.finance-note {
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.45;
}

.filter-panel {
    padding: 18px;
    border-radius: 28px;
    margin-bottom: 18px;
}

.filter-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    align-items: end;
}

.field label {
    display: block;
    margin: 0 0 6px;
    color: var(--muted);
    font-size: 12.5px;
    font-weight: 800;
}

.ui-control {
    width: 100%;
    height: 38px;
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid rgba(28,77,137,.12);
    border-radius: 14px;
    background: rgba(255,255,255,.86);
    color: var(--blue-900);
    font-size: 13px;
    font-weight: 700;
    line-height: 36px;
    outline: 0;
    box-shadow: 0 8px 20px rgba(38, 62, 105, .04);
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}

/* Select2 ซ่อน <select> ต้นฉบับ — ห้ามให้ .ui-control (โดยเฉพาะ min-height) ดึงกลับมาสูง 38px */
select.ui-control.select2-hidden-accessible {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: -1px !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    box-shadow: none !important;
    background: transparent !important;
    pointer-events: none !important;
}

.role-permission-filter > .field,
.reservation-filter > .field,
.purchase-appraisal-filter > .field {
    overflow: visible;
    min-width: 0;
}

    .ui-control:focus {
        border-color: rgba(47,115,208,.35);
        box-shadow: 0 0 0 4px rgba(47,115,208,.10);
    }

textarea.ui-control {
    height: auto;
    min-height: 88px;
    padding: 9px 12px;
    line-height: 1.45;
    resize: vertical;
}

.filter-actions {
    display: flex;
    gap: 8px;
}

    .filter-actions .btn {
        flex: 1;
        min-height: 38px;
        padding: 0 13px;
    }

.table-panel {
    padding: 20px;
    border-radius: 28px;
}

.table-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.table-wrap {
    overflow-x: auto;
}

/* Responsive data tables (all menus): compact = hide columns + row expand */
.table-wrap.js-responsive-table {
    position: relative;
    overflow-x: hidden;
}

    .table-wrap.js-responsive-table > table.app-data-table,
    .table-wrap.js-responsive-table .dataTables_wrapper table.app-data-table {
        min-width: 0;
        width: 100% !important;
    }

    .table-wrap.js-responsive-table .rt-col-hidden {
        display: none !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        overflow: hidden !important;
    }

.rt-row-toggle {
    width: 28px;
    height: 28px;
    margin-right: 8px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid rgba(28, 77, 137, .14);
    border-radius: 999px;
    background: #fff;
    color: var(--blue-800);
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    vertical-align: middle;
}

    .rt-row-toggle:hover {
        background: var(--blue-100);
    }

.rt-control-host-cell {
    white-space: nowrap;
}

.rt-table-compact .rt-control-host-cell .role-permission-seq,
.rt-table-compact .rt-control-host-cell .doc-no {
    display: inline-block;
    vertical-align: middle;
}

table.rt-table-compact tbody tr.rt-row-expanded > td {
    border-bottom-color: transparent;
}

.rt-detail-row > td,
table.dataTable tr.rt-detail-row > td {
    padding: 0 10px 12px !important;
    background: #f8faff;
    border-bottom: 1px solid var(--line);
    width: 100%;
}

.rt-detail-panel {
    display: grid;
    gap: 10px;
    padding: 12px 12px 12px 46px;
}

.rt-detail-item {
    display: grid;
    gap: 4px;
}

.rt-detail-label {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.rt-detail-value {
    color: var(--text);
    font-size: 13px;
    font-weight: 650;
    line-height: 1.45;
    white-space: normal;
}

.rt-detail-audit-name {
    color: var(--text);
    font-size: 13px;
    font-weight: 700;
}

.rt-detail-audit-at {
    margin-top: 2px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 650;
}

.table-wrap.js-responsive-table[data-rt-compact="1"] {
    overflow-x: hidden !important;
}

    .table-wrap.js-responsive-table[data-rt-compact="1"] .dataTables_wrapper {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .table-wrap.js-responsive-table[data-rt-compact="1"] table.app-data-table,
    .table-wrap.js-responsive-table[data-rt-compact="1"] .dataTables_wrapper table.app-data-table {
        min-width: 0 !important;
        max-width: 100% !important;
        table-layout: fixed !important;
    }

    .table-wrap.js-responsive-table[data-rt-compact="1"] th,
    .table-wrap.js-responsive-table[data-rt-compact="1"] td {
        white-space: normal;
        word-break: keep-all;
        overflow-wrap: normal;
        line-break: strict;
    }

    .table-wrap.js-responsive-table[data-rt-compact="1"] .rt-control-host-cell,
    .table-wrap.js-responsive-table[data-rt-compact="1"] .rt-col-persist-actions,
    .table-wrap.js-responsive-table[data-rt-compact="1"] th.action-col,
    .table-wrap.js-responsive-table[data-rt-compact="1"] td.action-col {
        white-space: nowrap;
        word-break: normal;
        overflow-wrap: normal;
        line-break: auto;
    }

    .table-wrap.js-responsive-table[data-rt-compact="1"] .rt-col-primary,
    .table-wrap.js-responsive-table[data-rt-compact="1"] th[data-rt-primary],
    .table-wrap.js-responsive-table[data-rt-compact="1"] td.rt-col-primary {
        width: auto !important;
        min-width: 160px !important;
        max-width: none !important;
        white-space: normal;
        word-break: keep-all;
        overflow-wrap: break-word;
        line-break: strict;
    }

        .table-wrap.js-responsive-table[data-rt-compact="1"] .rt-col-primary .doc-no {
            white-space: normal;
            word-break: keep-all;
            overflow-wrap: break-word;
            line-break: strict;
        }

    .table-wrap.js-responsive-table[data-rt-compact="1"] .rt-control-host-cell,
    .table-wrap.js-responsive-table[data-rt-compact="1"] th.rt-control-host-col,
    .table-wrap.js-responsive-table[data-rt-compact="1"] td.rt-control-host-col {
        width: 72px;
        min-width: 72px !important;
        max-width: 72px;
    }

    .table-wrap.js-responsive-table[data-rt-compact="1"] th.action-col,
    .table-wrap.js-responsive-table[data-rt-compact="1"] td.action-col,
    .table-wrap.js-responsive-table[data-rt-compact="1"] .rt-col-persist-actions {
        width: 96px !important;
        min-width: 96px !important;
        max-width: 96px !important;
    }

        .table-wrap.js-responsive-table[data-rt-compact="1"] td.action-col .row-actions,
        .table-wrap.js-responsive-table[data-rt-compact="1"] td.rt-col-persist-actions .row-actions {
            gap: 4px;
        }

        .table-wrap.js-responsive-table[data-rt-compact="1"] td.action-col .icon-btn,
        .table-wrap.js-responsive-table[data-rt-compact="1"] td.rt-col-persist-actions .icon-btn {
            width: 30px;
            height: 30px;
        }

.table-wrap.js-responsive-table[data-rt-compact="1"] #rolePermissionTable th.role-permission-status-col,
.table-wrap.js-responsive-table[data-rt-compact="1"] #rolePermissionTable td.role-permission-status-col,
.table-wrap.js-responsive-table[data-rt-compact="1"] #rolePermissionTable th.role-permission-last-modified-col,
.table-wrap.js-responsive-table[data-rt-compact="1"] #rolePermissionTable td.role-permission-last-modified-col,
.table-wrap.js-responsive-table[data-rt-compact="1"] #userManagementTable th.role-permission-status-col,
.table-wrap.js-responsive-table[data-rt-compact="1"] #userManagementTable td.role-permission-status-col,
.table-wrap.js-responsive-table[data-rt-compact="1"] #userManagementTable th.role-permission-last-modified-col,
.table-wrap.js-responsive-table[data-rt-compact="1"] #userManagementTable td.role-permission-last-modified-col,
.table-wrap.js-responsive-table[data-rt-compact="1"] #masterCrudTable th.role-permission-status-col,
.table-wrap.js-responsive-table[data-rt-compact="1"] #masterCrudTable td.role-permission-status-col,
.table-wrap.js-responsive-table[data-rt-compact="1"] #masterCrudTable th.role-permission-last-modified-col,
.table-wrap.js-responsive-table[data-rt-compact="1"] #masterCrudTable td.role-permission-last-modified-col,
.table-wrap.js-responsive-table[data-rt-compact="1"] #chartOfAccountTable th.role-permission-status-col,
.table-wrap.js-responsive-table[data-rt-compact="1"] #chartOfAccountTable td.role-permission-status-col {
    width: auto;
    min-width: 0;
    max-width: none;
}

table {
    width: 100%;
    min-width: 790px;
    border-collapse: collapse;
}

th,
td {
    padding: 12px 10px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    white-space: nowrap;
    font-size: 13px;
}

th {
    color: #637083;
    background: #f2f5fb;
    font-weight: 800;
}

td {
    color: #25364e;
    font-weight: 650;
}

.doc-no {
    color: var(--blue-800);
    font-weight: 800;
}

.amount {
    text-align: right;
    font-weight: 800;
    color: var(--blue-900);
}

/* Table column alignment helpers (list + modal) — header and body must match */
.app-data-table th.col-status,
.app-data-table td.col-status,
.app-data-table th.col-center,
.app-data-table td.col-center {
    text-align: center;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 82px;
    padding: 7px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.status-reserved {
    color: var(--blue-700);
    background: var(--blue-100);
}

.status-finance {
    color: var(--purple);
    background: #efedff;
}

.status-sold {
    color: var(--green);
    background: #e6f7ef;
}

.status-cancel {
    color: var(--red);
    background: #ffeaea;
}

.status-warning {
    color: var(--amber);
    background: #fdf3e3;
}

.row-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-end;
}

.icon-btn {
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(28,77,137,.10);
    border-radius: 12px;
    background: #fff;
    color: var(--blue-800);
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(38,62,105,.05);
}

    .icon-btn:hover {
        background: var(--blue-100);
    }

    .icon-btn.danger {
        color: var(--red);
    }

.overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(23,36,58,.38);
}

/* Reservation page */

.reservation-page .reservation-head {
    margin-bottom: 12px;
}

.reservation-page .table-head-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

    .reservation-page .table-head-actions .btn,
    .reservation-page .filter-actions.compact .btn {
        height: 38px;
        min-height: 38px;
        padding: 0 14px;
        border-radius: 12px;
        font-size: 13px;
        font-weight: 700;
        gap: 6px;
        box-shadow: 0 6px 14px rgba(38, 62, 105, .06);
    }

    .reservation-page .table-head-actions .btn-primary {
        box-shadow: 0 8px 16px rgba(28, 77, 137, .16);
    }

.reservation-page.table-panel {
    padding: 16px 18px;
    max-width: 100%;
}

.reservation-page .reservation-filter {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr)) auto;
    gap: 8px 10px;
    align-items: end;
    margin-bottom: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
    min-width: 0;
}

/* ใบจอง / ใบขาย / ส่งมอบ — ใช้ .purchase-appraisal-filter (5 คอลัมน์) ตามต้นแบบ PurchaseAppraisal */

    .reservation-page .reservation-filter .field {
        min-width: 0;
    }

        .reservation-page .reservation-filter .field label {
            margin-bottom: 4px;
            font-size: 12px;
        }

    .reservation-page .reservation-filter .ui-control:not(.select2-hidden-accessible) {
        height: 38px;
        min-height: 38px;
        padding: 0 11px;
        font-size: 13px;
    }

.reservation-page .filter-actions.compact {
    display: flex;
    gap: 8px;
    align-self: end;
}

    .reservation-page .filter-actions.compact .btn {
        flex: 0 0 auto;
    }

.reservation-page .table-summary {
    margin-bottom: 10px;
}

/* Reservation / VehicleSale editor: customer + sale terms — same 3-col grid */
#reservationEditorModal .reservation-customer-sale-grid > .field,
#vehicleSaleEditorModal .reservation-customer-sale-grid > .field {
    min-width: 0;
    margin: 0;
}

#reservationEditorModal .reservation-customer-sale-grid > .field .ui-control,
#reservationEditorModal .reservation-customer-sale-grid > .field .select2-container,
#vehicleSaleEditorModal .reservation-customer-sale-grid > .field .ui-control,
#vehicleSaleEditorModal .reservation-customer-sale-grid > .field .select2-container {
    width: 100% !important;
    max-width: 100%;
}

#reservationEditorModal .reservation-payment-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#reservationEditorModal .reservation-payment-card .pa-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

#reservationEditorModal .reservation-payment-card .ap-payment-settlement-bank {
    width: min(100%, 36ch);
    max-width: 36ch;
}

#reservationEditorModal .reservation-payment-card .reservation-payment-amount {
    width: 18ch;
    max-width: 200px;
}

#reservationEditorModal .reservation-payment-total-wrap {
    margin-top: 12px;
    text-align: right;
}

#reservationEditorModal .reservation-payment-empty {
    color: var(--muted);
    padding: 8px 0;
}

#reservationEditorModal .reservation-files-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#reservationEditorModal .reservation-file-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
}

#reservationEditorModal .reservation-file-thumb {
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: #f5f7fb;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
}

#reservationEditorModal .reservation-file-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#reservationEditorModal .reservation-file-thumb svg {
    width: 24px;
    height: 24px;
    color: var(--muted);
}

#reservationEditorModal .reservation-file-meta {
    flex: 1 1 auto;
    min-width: 0;
}

#reservationEditorModal .reservation-file-name {
    font-weight: 600;
    color: var(--text);
    word-break: break-word;
}

#reservationEditorModal .reservation-file-sub {
    margin-top: 2px;
    font-size: 12px;
    color: var(--muted);
}

#reservationEditorModal .reservation-file-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 0 0 auto;
}

.reservation-page .table-wrap {
    max-width: 100%;
    overflow-x: auto;
}

.reservation-page .dataTables_wrapper {
    width: 100%;
    max-width: 100%;
    font-family: inherit;
}

    .reservation-page .dataTables_wrapper .dataTable {
        width: 100% !important;
        max-width: none;
    }

    .reservation-page .dataTables_wrapper .dataTables_info,
    .reservation-page .dataTables_wrapper .dataTables_paginate {
        padding-top: 0;
        margin-top: 0;
    }

.reservation-page .reservation-dt-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
}

.reservation-page .dataTables_info {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
}

.reservation-page .dataTables_paginate {
    margin-left: auto;
}

    .reservation-page .dataTables_paginate .paginate_button {
        min-width: 28px;
        min-height: 28px;
        margin-left: 3px;
        padding: 3px 8px;
        border: 1px solid rgba(28,77,137,.12) !important;
        border-radius: 8px !important;
        background: #fff !important;
        color: var(--blue-800) !important;
        font-size: 12px;
        font-weight: 700;
        line-height: 1.2;
        box-shadow: 0 4px 10px rgba(38,62,105,.04);
    }

        .reservation-page .dataTables_paginate .paginate_button:hover {
            background: var(--blue-100) !important;
            color: var(--blue-900) !important;
            border-color: rgba(28,77,137,.18) !important;
        }

        .reservation-page .dataTables_paginate .paginate_button.current,
        .reservation-page .dataTables_paginate .paginate_button.current:hover {
            background: linear-gradient(135deg, var(--blue-900), var(--blue-700)) !important;
            color: #fff !important;
            border-color: transparent !important;
            box-shadow: 0 6px 12px rgba(28, 77, 137, .14);
        }

        .reservation-page .dataTables_paginate .paginate_button.disabled,
        .reservation-page .dataTables_paginate .paginate_button.disabled:hover {
            opacity: .45;
            background: #f5f7fb !important;
            color: var(--muted) !important;
            box-shadow: none;
            cursor: default;
        }

.reservation-page table.dataTable thead th {
    border-bottom: 1px solid var(--line);
}

.reservation-page table.dataTable tbody td {
    padding-top: 10px;
    padding-bottom: 10px;
}

.reservation-page table.dataTable.no-footer {
    border-bottom: 1px solid var(--line);
}

/* Select2 */

.reservation-page .select2-container {
    display: block;
    width: 100% !important;
    max-width: 100%;
}

.reservation-page .select2-container--default .select2-selection--single {
    height: 38px;
    min-height: 38px;
    display: flex;
    align-items: center;
    border: 1px solid rgba(28,77,137,.12) !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: 0 8px 20px rgba(38, 62, 105, .04);
}

    .reservation-page .select2-container--default .select2-selection--single .select2-selection__rendered {
        padding: 0 34px 0 12px;
        color: var(--blue-900) !important;
        font-size: 13px;
        font-weight: 700;
        line-height: 36px;
    }

    .reservation-page .select2-container--default .select2-selection--single .select2-selection__placeholder {
        color: var(--muted) !important;
        font-weight: 700;
    }

    .reservation-page .select2-container--default .select2-selection--single .select2-selection__arrow {
        top: 50%;
        right: 10px;
        width: 16px;
        height: 16px;
        transform: translateY(-50%);
    }

        .reservation-page .select2-container--default .select2-selection--single .select2-selection__arrow b {
            border-color: var(--blue-800) transparent transparent transparent !important;
            border-width: 6px 5px 0 5px;
        }

.reservation-page .select2-container--default.select2-container--open .select2-selection--single {
    border-color: rgba(47,115,208,.35) !important;
    box-shadow: 0 0 0 4px rgba(47,115,208,.10);
}

    .reservation-page .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
        border-color: transparent transparent var(--blue-800) transparent !important;
        border-width: 0 5px 6px 5px;
    }

body:has(.reservation-page) .select2-dropdown {
    z-index: 1200;
    border: 1px solid rgba(28,77,137,.14) !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: 0 18px 36px rgba(38, 62, 105, .18);
    overflow: hidden;
}

    body:has(.reservation-page) .select2-dropdown .select2-results__options {
        padding: 6px;
    }

    body:has(.reservation-page) .select2-dropdown .select2-results__option {
        padding: 8px 10px;
        border-radius: 12px;
        color: #31435f !important;
        font-size: 13px;
        font-weight: 750;
        background: #fff !important;
    }

        body:has(.reservation-page) .select2-dropdown .select2-results__option[aria-selected="true"] {
            background: #fff !important;
            color: #31435f !important;
        }

    body:has(.reservation-page) .select2-dropdown .select2-results__option--highlighted[aria-selected],
    body:has(.reservation-page) .select2-dropdown .select2-results__option--highlighted.select2-results__option--selectable {
        background: var(--blue-100) !important;
        color: var(--blue-900) !important;
    }

    body:has(.reservation-page) .select2-dropdown .select2-results__option--selected,
    body:has(.reservation-page) .select2-dropdown .select2-results__option--selected.select2-results__option--highlighted {
        background: linear-gradient(135deg, var(--blue-900), var(--blue-700)) !important;
        color: #fff !important;
    }

/* Bootstrap Datepicker (Reservation) */

body:has(.reservation-page) .datepicker.datepicker-dropdown {
    position: absolute;
}

body:has(.reservation-page) .datepicker.app-datepicker {
    width: 280px;
    padding: 8px;
    border: 1px solid rgba(28, 77, 137, .22);
    border-radius: 16px;
    background: linear-gradient(180deg, #e5eaf5 0%, #f5f6fb 52%, #e8edf6 100%);
    box-shadow: 0 22px 44px rgba(28, 77, 137, .22);
    font-family: inherit;
    font-size: 13px;
    z-index: 1200;
}

/* Reset global table rules (min-width: 790px, etc.) inside datepicker only */
body:has(.reservation-page) .datepicker.app-datepicker table {
    width: 100%;
    min-width: 0;
    margin: 0;
    border-collapse: collapse;
    table-layout: fixed;
}

body:has(.reservation-page) .datepicker.app-datepicker th,
body:has(.reservation-page) .datepicker.app-datepicker td {
    display: table-cell;
    padding: 2px;
    border: 0;
    border-bottom: none;
    background: transparent;
    color: inherit;
    font-weight: 500;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

body:has(.reservation-page) .datepicker.app-datepicker .datepicker-switch,
body:has(.reservation-page) .datepicker.app-datepicker tfoot .today,
body:has(.reservation-page) .datepicker.app-datepicker tfoot .clear {
    font-size: 13px;
    font-weight: 600;
    color: var(--blue-900);
}

body:has(.reservation-page) .datepicker.app-datepicker .datepicker-switch {
    border-radius: 10px;
    cursor: pointer;
}

body:has(.reservation-page) .datepicker.app-datepicker .datepicker-switch:hover {
    background: rgba(255, 255, 255, .75);
}

body:has(.reservation-page) .datepicker.app-datepicker thead tr:first-child th {
    height: 34px;
    padding: 4px 2px;
    background: rgba(255, 255, 255, .55);
}

body:has(.reservation-page) .datepicker.app-datepicker thead tr:first-child th.prev,
body:has(.reservation-page) .datepicker.app-datepicker thead tr:first-child th.next {
    width: 32px;
    border-radius: 10px;
    color: var(--blue-800);
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
}

body:has(.reservation-page) .datepicker.app-datepicker thead tr:first-child th.prev:hover,
body:has(.reservation-page) .datepicker.app-datepicker thead tr:first-child th.next:hover {
    background: rgba(255, 255, 255, .75);
}

body:has(.reservation-page) .datepicker.app-datepicker thead tr:nth-child(2) th {
    height: 28px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    line-height: 28px;
}





body:has(.reservation-page) .datepicker.app-datepicker .datepicker-days tbody,
body:has(.reservation-page) .datepicker.app-datepicker .datepicker-days tbody tr,
body:has(.reservation-page) .datepicker.app-datepicker .datepicker-days tbody td {
    background: transparent;
}

body:has(.reservation-page) .datepicker.app-datepicker .datepicker-days tbody td.day {
    background: transparent;
    border-radius: 0;
}

body:has(.reservation-page) .datepicker.app-datepicker .datepicker-days tbody td.day:hover,
body:has(.reservation-page) .datepicker.app-datepicker .datepicker-days tbody td.day.focused,
body:has(.reservation-page) .datepicker.app-datepicker .datepicker-days tbody td.day.today,
body:has(.reservation-page) .datepicker.app-datepicker .datepicker-days tbody td.day.active {
    border-radius: 8px;
}



body:has(.reservation-page) .datepicker.app-datepicker .datepicker-days tbody td {
    width: 14.285714%;
    height: 34px;
    line-height: 30px;
}

body:has(.reservation-page) .datepicker.app-datepicker .datepicker-days tbody td.day {
    border-radius: 8px;
    color: #31435f;
    font-size: 13px;
    cursor: pointer;
}

body:has(.reservation-page) .datepicker.app-datepicker .datepicker-days tbody td.day:hover,
body:has(.reservation-page) .datepicker.app-datepicker .datepicker-days tbody td.day.focused {
    background: var(--blue-100);
    color: var(--blue-900);
}

body:has(.reservation-page) .datepicker.app-datepicker .datepicker-days tbody td.day.active,
body:has(.reservation-page) .datepicker.app-datepicker .datepicker-days tbody td.day.active:hover,
body:has(.reservation-page) .datepicker.app-datepicker .datepicker-days tbody td.day.active.focused {
    background: linear-gradient(135deg, var(--blue-900), var(--blue-700));
    color: #fff;
}

body:has(.reservation-page) .datepicker.app-datepicker .datepicker-days tbody td.day.today {
    color: var(--blue-900);
    box-shadow: inset 0 0 0 1px var(--blue-700);
}

body:has(.reservation-page) .datepicker.app-datepicker .datepicker-days tbody td.day.today.active {
    box-shadow: none;
}

body:has(.reservation-page) .datepicker.app-datepicker .datepicker-days tbody td.day.old,
body:has(.reservation-page) .datepicker.app-datepicker .datepicker-days tbody td.day.new {
    color: #94a3b8;
}

body:has(.reservation-page) .datepicker.app-datepicker .datepicker-months tbody,
body:has(.reservation-page) .datepicker.app-datepicker .datepicker-years tbody {
    background: rgba(255, 255, 255, .72);
}

body:has(.reservation-page) .datepicker.app-datepicker .datepicker-months tbody td,
body:has(.reservation-page) .datepicker.app-datepicker .datepicker-years tbody td {
    width: auto;
    height: auto;
    padding: 4px;
}

body:has(.reservation-page) .datepicker.app-datepicker .datepicker-months tbody td span,
body:has(.reservation-page) .datepicker.app-datepicker .datepicker-years tbody td span {
    display: block;
    float: left;
    width: 23%;
    height: 40px;
    margin: 1%;
    padding: 0 4px;
    border: 0;
    border-radius: 8px;
    line-height: 40px;
    color: #31435f;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

body:has(.reservation-page) .datepicker.app-datepicker .datepicker-months tbody td span:hover,
body:has(.reservation-page) .datepicker.app-datepicker .datepicker-months tbody td span.focused,
body:has(.reservation-page) .datepicker.app-datepicker .datepicker-years tbody td span:hover,
body:has(.reservation-page) .datepicker.app-datepicker .datepicker-years tbody td span.focused {
    background: var(--blue-100);
    color: var(--blue-900);
}

body:has(.reservation-page) .datepicker.app-datepicker .datepicker-months tbody td span.active,
body:has(.reservation-page) .datepicker.app-datepicker .datepicker-months tbody td span.active:hover,
body:has(.reservation-page) .datepicker.app-datepicker .datepicker-months tbody td span.active.focused,
body:has(.reservation-page) .datepicker.app-datepicker .datepicker-years tbody td span.active,
body:has(.reservation-page) .datepicker.app-datepicker .datepicker-years tbody td span.active:hover,
body:has(.reservation-page) .datepicker.app-datepicker .datepicker-years tbody td span.active.focused {
    background: linear-gradient(135deg, var(--blue-900), var(--blue-700));
    color: #fff;
}

/* Dealer profile page */

.dealer-profile-page {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.dealer-profile-page .dealer-profile-main-card,
.dealer-profile-page .dealer-profile-branch-card {
    width: 100%;
    padding: 20px;
    border-radius: 28px;
}

.dealer-profile-page .dealer-profile-head {
    margin-bottom: 18px;
}

.dealer-profile-page .table-head-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.dealer-profile-page .table-head-actions .btn {
    min-height: 42px;
    padding: 9px 16px;
    white-space: nowrap;
}

.dealer-profile-page .table-wrap {
    overflow-x: auto;
}

.dealer-profile-page .dataTables_wrapper {
    width: 100%;
}

.dealer-profile-page .dealer-profile-dt-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
}

.dealer-profile-page .dataTables_info {
    color: var(--muted);
    font-size: 12.5px;
    font-weight: 700;
}

.dealer-profile-page .dataTables_paginate {
    margin-left: auto;
}

.dealer-profile-page .dataTables_paginate .paginate_button {
    min-width: 36px;
    min-height: 36px;
    margin-left: 6px;
    padding: 7px 12px;
    border: 1px solid rgba(28, 77, 137, .10);
    border-radius: 12px;
    background: #fff;
    color: var(--blue-800);
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
}

.dealer-profile-page .dataTables_paginate .paginate_button:hover {
    background: var(--blue-100);
}

.dealer-profile-page .dataTables_paginate .paginate_button.current,
.dealer-profile-page .dataTables_paginate .paginate_button.current:hover {
    color: #fff;
    background: var(--blue-700);
    border-color: var(--blue-700);
}

.dealer-profile-page .dataTables_paginate .paginate_button.disabled,
.dealer-profile-page .dataTables_paginate .paginate_button.disabled:hover {
    opacity: .45;
    cursor: default;
    background: #fff;
}

.dealer-profile-page table.dataTable thead th {
    white-space: nowrap;
}

.dealer-profile-page #dealerBranchTable thead th[data-rt-key="status"],
.dealer-profile-page #dealerBranchTable thead th.action-col {
    text-align: center;
}

.dealer-profile-page #dealerBranchTable tbody td:nth-child(6),
.dealer-profile-page #dealerBranchTable tbody td:nth-child(7) {
    text-align: center;
}

.dealer-profile-page #dealerBranchTable tbody td:nth-child(7) .row-actions {
    justify-content: center;
}

.dealer-profile-page table.dataTable tbody td {
    vertical-align: middle;
}

.dealer-profile-page table.dataTable.no-footer {
    border-bottom: 1px solid var(--line);
}

.dealer-profile-page .status-primary {
    color: var(--blue-700);
    background: var(--blue-100);
}

.dealer-profile-page .status-active {
    color: var(--green);
    background: #e6f7ef;
}

.dealer-profile-page .status-inactive {
    color: var(--amber);
    background: #fff4e5;
}

.dealer-profile-page .dealer-profile-muted {
    color: var(--muted);
    font-weight: 650;
}

.dealer-profile-page .dealer-profile-modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal-alert);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.dealer-profile-page .dealer-profile-modal[hidden] {
    display: none !important;
}

.dealer-profile-page .dealer-profile-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(23, 36, 58, .45);
    backdrop-filter: blur(2px);
}

.dealer-profile-page .dealer-profile-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 380px);
    padding: 24px 22px 20px;
    border-radius: 22px;
    background: var(--card);
    box-shadow: var(--shadow);
    text-align: center;
}

.dealer-profile-page .dealer-profile-modal-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 14px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
}

.dealer-profile-page .dealer-profile-modal-dialog.is-success .dealer-profile-modal-icon {
    color: var(--green);
    background: #e6f7ef;
}

.dealer-profile-page .dealer-profile-modal-dialog.is-warning .dealer-profile-modal-icon {
    color: var(--amber);
    background: #fff4e5;
}

.dealer-profile-page .dealer-profile-modal-dialog.is-error .dealer-profile-modal-icon {
    color: var(--red);
    background: #ffeaea;
}

.dealer-profile-page .dealer-profile-modal-message {
    margin: 0 0 18px;
    color: var(--text);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
}

.dealer-profile-page .dealer-profile-modal-actions {
    display: flex;
    justify-content: center;
}

.dealer-profile-page .dealer-profile-modal-actions .btn {
    min-width: 110px;
}

body.dealer-profile-modal-open {
    overflow: hidden;
}

.dealer-profile-page .dealer-profile-form-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 128px;
    gap: 14px 18px;
    align-items: start;
    width: 100%;
    max-width: none;
}

.dealer-profile-page .dealer-profile-form-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px 16px;
}

.dealer-profile-page .dealer-profile-name-field {
    min-width: 0;
}

.dealer-profile-page .dealer-profile-span-2 {
    grid-column: span 2;
}

.dealer-profile-page .dealer-profile-span-full {
    grid-column: 1 / -1;
}

.dealer-profile-page .dealer-profile-vat-field {
    min-width: 0;
}

.dealer-profile-page .dealer-profile-logo-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.dealer-profile-page .dealer-profile-logo-panel-label {
    display: block;
    width: 100%;
    margin: 0;
    color: var(--muted);
    font-size: 12.5px;
    font-weight: 800;
    text-align: center;
}

.dealer-profile-page .dealer-profile-logo-preview-shell {
    position: relative;
    width: 112px;
}

.dealer-profile-page .dealer-profile-logo-preview-wrap {
    width: 112px;
    height: 112px;
    border: 1px solid rgba(28, 77, 137, .12);
    border-radius: 18px;
    background: rgba(255, 255, 255, .86);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(38, 62, 105, .04);
}

.dealer-profile-page .dealer-profile-logo-preview {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 10px;
}

.dealer-profile-page .dealer-profile-logo-preview[hidden] {
    display: none !important;
}

.dealer-profile-page .dealer-profile-logo-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 100%;
    padding: 12px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    line-height: 1.45;
}

.dealer-profile-page .dealer-profile-logo-placeholder[hidden] {
    display: none !important;
}

.dealer-profile-page .dealer-profile-logo-placeholder-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 14px;
    background: var(--blue-100);
    color: var(--blue-700);
}

.dealer-profile-page .dealer-profile-logo-placeholder-icon svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}

.dealer-profile-page .dealer-profile-logo-pick-btn {
    position: absolute;
    right: -8px;
    bottom: -8px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(28, 77, 137, .10);
    border-radius: 12px;
    background: rgba(255, 255, 255, .96);
    color: var(--blue-800);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
}

.dealer-profile-page .dealer-profile-logo-pick-btn:hover {
    background: var(--blue-100);
}

.dealer-profile-page .dealer-profile-logo-pick-btn svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}

.dealer-profile-page .dealer-profile-logo-file {
    display: none;
}

.dealer-profile-page .dealer-profile-logo-hint {
    margin: 0;
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.45;
    text-align: center;
}

.dealer-profile-page .dealer-profile-form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}

.dealer-profile-page .dealer-profile-form-actions .btn {
    min-width: 160px;
}

.dealer-profile-page .req {
    color: var(--red);
}

.dealer-profile-page .dealer-profile-branch-modal {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.dealer-profile-page .dealer-profile-branch-modal[hidden] {
    display: none !important;
}

.dealer-profile-page .dealer-profile-branch-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(23, 36, 58, .45);
    backdrop-filter: blur(2px);
}

.dealer-profile-page .dealer-profile-branch-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 640px);
    max-height: calc(100vh - 40px);
    overflow: auto;
    padding: 22px 22px 20px;
    border-radius: 24px;
    background: var(--card);
    box-shadow: var(--shadow);
}

.dealer-profile-page .dealer-profile-branch-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.dealer-profile-page .dealer-profile-branch-modal-title {
    margin: 0;
    color: var(--blue-900);
    font-size: 18px;
    font-weight: 800;
}

.dealer-profile-page .dealer-profile-branch-modal-close {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(28, 77, 137, .10);
    border-radius: 12px;
    background: #fff;
    color: var(--blue-800);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.dealer-profile-page .dealer-profile-branch-modal-close:hover {
    background: var(--blue-100);
}

.dealer-profile-page .dealer-profile-branch-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
}

.dealer-profile-page .dealer-profile-branch-modal .select2-container {
    display: block;
    width: 100% !important;
    max-width: 100%;
}

.dealer-profile-page .dealer-profile-branch-modal .select2-container--default .select2-selection--single {
    height: 38px;
    min-height: 38px;
    display: flex;
    align-items: center;
    border: 1px solid rgba(28, 77, 137, .12) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, .86) !important;
    box-shadow: 0 8px 20px rgba(38, 62, 105, .04);
}

.dealer-profile-page .dealer-profile-branch-modal .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0 34px 0 12px;
    color: var(--blue-900) !important;
    font-size: 13px;
    font-weight: 700;
    line-height: 36px;
}

.dealer-profile-page .dealer-profile-branch-modal .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 50%;
    right: 10px;
    width: 16px;
    height: 16px;
    transform: translateY(-50%);
}

.dealer-profile-page .dealer-profile-branch-modal .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--blue-800) transparent transparent transparent !important;
    border-width: 6px 5px 0 5px;
}

.dealer-profile-page .dealer-profile-branch-modal .select2-container--default.select2-container--open .select2-selection--single {
    border-color: rgba(47, 115, 208, .35) !important;
    box-shadow: 0 0 0 4px rgba(47, 115, 208, .10);
}

.dealer-profile-page .dealer-profile-branch-modal .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--blue-800) transparent !important;
    border-width: 0 5px 6px 5px;
}

.dealer-profile-page .dealer-profile-branch-modal .select2-dropdown {
    z-index: 10002;
    border: 1px solid rgba(28, 77, 137, .14) !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: 0 18px 36px rgba(38, 62, 105, .18);
    overflow: hidden;
}

.dealer-profile-page .dealer-profile-branch-modal .select2-dropdown .select2-results__options {
    padding: 6px;
}

.dealer-profile-page .dealer-profile-branch-modal .select2-dropdown .select2-results__option {
    padding: 8px 10px;
    border-radius: 12px;
    color: #31435f !important;
    font-size: 13px;
    font-weight: 750;
    background: #fff !important;
}

.dealer-profile-page .dealer-profile-branch-modal .select2-dropdown .select2-results__option--highlighted[aria-selected],
.dealer-profile-page .dealer-profile-branch-modal .select2-dropdown .select2-results__option--highlighted.select2-results__option--selectable {
    background: var(--blue-100) !important;
    color: var(--blue-900) !important;
}

.dealer-profile-page .dealer-profile-branch-modal .select2-dropdown .select2-results__option--selected,
.dealer-profile-page .dealer-profile-branch-modal .select2-dropdown .select2-results__option--selected.select2-results__option--highlighted {
    background: linear-gradient(135deg, var(--blue-900), var(--blue-700)) !important;
    color: #fff !important;
}

.dealer-profile-page .dealer-profile-branch-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}

.dealer-profile-page .dealer-profile-branch-modal-actions .btn {
    min-width: 110px;
}

body.dealer-profile-branch-modal-open {
    overflow: hidden;
}

/* Role permission page */

.role-permission-page > .table-panel {
    padding: 16px 18px;
    max-width: 100%;
}

.role-permission-page .role-permission-head {
    margin-bottom: 12px;
}

.role-permission-page .table-head-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

    .role-permission-page .table-head-actions .btn,
    .role-permission-page .filter-actions.compact .btn,
    .role-permission-page .role-permission-editor-modal-actions .btn {
        height: 38px;
        min-height: 38px;
        padding: 0 14px;
        border-radius: 12px;
        font-size: 13px;
        font-weight: 700;
        gap: 6px;
        box-shadow: 0 6px 14px rgba(38, 62, 105, .06);
    }

    .role-permission-page .table-head-actions .btn-primary,
    .role-permission-page .filter-actions.compact .btn-primary {
        box-shadow: 0 8px 16px rgba(28, 77, 137, .16);
    }

.role-permission-page .role-permission-filter,
.user-management-page .role-permission-filter,
.master-crud-page .role-permission-filter {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 180px) auto;
    gap: 8px 10px;
    align-items: end;
    justify-content: stretch;
    width: 100%;
    max-width: 100%;
    margin-bottom: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
    min-width: 0;
    box-sizing: border-box;
}

.role-permission-page .role-permission-filter .field,
.user-management-page .role-permission-filter .field,
.master-crud-page .role-permission-filter .field {
    min-width: 0;
}

.role-permission-page .role-permission-search-field,
.user-management-page .role-permission-search-field,
.master-crud-page .role-permission-search-field {
    max-width: none;
}

/* ข้อมูลพื้นฐาน (Master) — ช่องค้นหาประมาณครึ่งหนึ่ง ไม่ยืดเต็มแถว */
.master-crud-page .role-permission-filter {
    grid-template-columns: minmax(160px, 320px) minmax(0, 180px) auto;
    justify-content: start;
}

.master-crud-page .role-permission-filter .role-permission-search-field {
    max-width: 320px;
}

.role-permission-page .role-permission-status-field,
.user-management-page .role-permission-status-field,
.master-crud-page .role-permission-status-field {
    max-width: 180px;
}

.role-permission-page .role-permission-filter .field label,
.user-management-page .role-permission-filter .field label,
.master-crud-page .role-permission-filter .field label {
    margin-bottom: 4px;
    font-size: 12px;
}

.role-permission-page .role-permission-filter .ui-control:not(.select2-hidden-accessible),
.user-management-page .role-permission-filter .ui-control:not(.select2-hidden-accessible),
.master-crud-page .role-permission-filter .ui-control:not(.select2-hidden-accessible) {
    width: 100%;
    height: 38px;
    min-height: 38px;
    padding: 0 11px;
    font-size: 13px;
    box-sizing: border-box;
}

.role-permission-page .filter-actions.compact,
.user-management-page .filter-actions.compact,
.master-crud-page .filter-actions.compact {
    display: flex;
    gap: 8px;
    align-self: end;
    min-width: 0;
}

.role-permission-page .filter-actions.compact .btn,
.user-management-page .filter-actions.compact .btn,
.master-crud-page .filter-actions.compact .btn {
    flex: 0 0 auto;
}

.role-permission-page .table-wrap {
    max-width: 100%;
    overflow-x: auto;
}

.role-permission-page .table-wrap.js-responsive-table {
    overflow-x: hidden;
}

.role-permission-page .dataTables_wrapper {
    width: 100%;
    max-width: 100%;
    font-family: inherit;
}

    .role-permission-page .dataTables_wrapper .dataTable {
        width: 100% !important;
        max-width: none;
    }

.role-permission-page .table-wrap.js-responsive-table[data-rt-compact="1"] .dataTables_wrapper .dataTable {
    max-width: 100% !important;
}

    .role-permission-page .dataTables_wrapper .dataTables_info,
    .role-permission-page .dataTables_wrapper .dataTables_paginate {
        padding-top: 0;
        margin-top: 0;
    }

.role-permission-page .role-permission-dt-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
}

.role-permission-page .dataTables_info {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
}

.role-permission-page .dataTables_paginate {
    margin-left: auto;
}

    .role-permission-page .dataTables_paginate .paginate_button {
        min-width: 28px;
        min-height: 28px;
        margin-left: 3px;
        padding: 3px 8px;
        border: 1px solid rgba(28,77,137,.12) !important;
        border-radius: 8px !important;
        background: #fff !important;
        color: var(--blue-800) !important;
        font-size: 12px;
        font-weight: 700;
        line-height: 1.2;
        box-shadow: 0 4px 10px rgba(38,62,105,.04);
    }

        .role-permission-page .dataTables_paginate .paginate_button:hover {
            background: var(--blue-100) !important;
            color: var(--blue-900) !important;
            border-color: rgba(28,77,137,.18) !important;
        }

        .role-permission-page .dataTables_paginate .paginate_button.current,
        .role-permission-page .dataTables_paginate .paginate_button.current:hover {
            background: linear-gradient(135deg, var(--blue-900), var(--blue-700)) !important;
            color: #fff !important;
            border-color: transparent !important;
            box-shadow: 0 6px 12px rgba(28, 77, 137, .14);
        }

        .role-permission-page .dataTables_paginate .paginate_button.disabled,
        .role-permission-page .dataTables_paginate .paginate_button.disabled:hover {
            opacity: .45;
            background: #f5f7fb !important;
            color: var(--muted) !important;
            box-shadow: none;
            cursor: default;
        }

.role-permission-page .role-permission-seq-col {
    width: 64px;
    text-align: center;
    white-space: nowrap;
}

.role-permission-page table.dataTable tbody td.role-permission-seq-col {
    text-align: center;
}

.role-permission-page .role-permission-seq {
    color: var(--muted);
    font-weight: 700;
}

.role-permission-page #rolePermissionTable:not(.rt-table-compact),
.role-permission-page #userManagementTable:not(.rt-table-compact),
.role-permission-page #masterCrudTable:not(.rt-table-compact),
.role-permission-page #chartOfAccountTable:not(.rt-table-compact) {
    table-layout: fixed;
}

.role-permission-page #rolePermissionTable th.role-permission-status-col,
.role-permission-page #rolePermissionTable td.role-permission-status-col,
.role-permission-page #userManagementTable th.role-permission-status-col,
.role-permission-page #userManagementTable td.role-permission-status-col,
.role-permission-page #masterCrudTable th.role-permission-status-col,
.role-permission-page #masterCrudTable td.role-permission-status-col,
.role-permission-page #chartOfAccountTable th.role-permission-status-col,
.role-permission-page #chartOfAccountTable td.role-permission-status-col {
    width: 108px;
    min-width: 108px;
    max-width: 108px;
    text-align: center;
}

.role-permission-page #rolePermissionTable th.role-permission-last-modified-col,
.role-permission-page #rolePermissionTable td.role-permission-last-modified-col,
.role-permission-page #userManagementTable th.role-permission-last-modified-col,
.role-permission-page #userManagementTable td.role-permission-last-modified-col,
.role-permission-page #masterCrudTable th.role-permission-last-modified-col,
.role-permission-page #masterCrudTable td.role-permission-last-modified-col {
    width: 132px;
    min-width: 132px;
    max-width: 132px;
    white-space: normal;
}

.role-permission-page #rolePermissionTable th.action-col,
.role-permission-page #rolePermissionTable td.action-col,
.role-permission-page #userManagementTable th.action-col,
.role-permission-page #userManagementTable td.action-col,
.role-permission-page #masterCrudTable th.action-col,
.role-permission-page #masterCrudTable td.action-col,
.role-permission-page #chartOfAccountTable th.action-col,
.role-permission-page #chartOfAccountTable td.action-col {
    width: 118px;
    min-width: 118px;
    max-width: 118px;
    text-align: center;
}

.role-permission-page #rolePermissionTable td.action-col .row-actions,
.role-permission-page #userManagementTable td.action-col .row-actions,
.role-permission-page #masterCrudTable td.action-col .row-actions,
.role-permission-page #chartOfAccountTable td.action-col .row-actions {
    justify-content: center;
    flex-wrap: nowrap;
}

.role-permission-page #rolePermissionTable .row-actions .icon-btn svg,
.role-permission-page #userManagementTable .row-actions .icon-btn svg,
.role-permission-page #masterCrudTable .row-actions .icon-btn svg,
.role-permission-page #chartOfAccountTable .row-actions .icon-btn svg {
    width: 18px;
    height: 18px;
}

.role-permission-page .role-permission-last-modified-name {
    color: var(--text);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
}

.role-permission-page .role-permission-last-modified-at {
    margin-top: 2px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 650;
    line-height: 1.35;
}

.role-permission-page table.dataTable thead th {
    border-bottom: 1px solid var(--line);
}

.role-permission-page table.dataTable tbody td {
    padding-top: 10px;
    padding-bottom: 10px;
    vertical-align: middle;
}

.role-permission-page table.dataTable.no-footer {
    border-bottom: 1px solid var(--line);
}

.role-permission-page .role-permission-muted {
    color: var(--muted);
    font-weight: 650;
}

.role-permission-page .req {
    color: var(--red);
}

.role-permission-page .select2-container {
    display: block;
    width: 100% !important;
    max-width: 100%;
}

.role-permission-page .select2-container--default .select2-selection--single {
    height: 38px;
    min-height: 38px;
    display: flex;
    align-items: center;
    border: 1px solid rgba(28,77,137,.12) !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: 0 8px 20px rgba(38, 62, 105, .04);
}

    .role-permission-page .select2-container--default .select2-selection--single .select2-selection__rendered {
        padding: 0 34px 0 12px;
        color: var(--blue-900) !important;
        font-size: 13px;
        font-weight: 700;
        line-height: 36px;
    }

    .role-permission-page .select2-container--default .select2-selection--single .select2-selection__arrow {
        top: 50%;
        right: 10px;
        width: 16px;
        height: 16px;
        transform: translateY(-50%);
    }

        .role-permission-page .select2-container--default .select2-selection--single .select2-selection__arrow b {
            border-color: var(--blue-800) transparent transparent transparent !important;
            border-width: 6px 5px 0 5px;
        }

.role-permission-page .select2-container--default.select2-container--open .select2-selection--single {
    border-color: rgba(47,115,208,.35) !important;
    box-shadow: 0 0 0 4px rgba(47,115,208,.10);
}

/* Select2 dropdown search — match ui-control theme (editor / filter dropdowns) */
body.role-permission-active .select2-dropdown .select2-search--dropdown,
body:has(.role-permission-page) .select2-dropdown .select2-search--dropdown,
body.master-crud-active .select2-dropdown .select2-search--dropdown,
body.user-management-active .select2-dropdown .select2-search--dropdown,
body:has(.reservation-page) .select2-dropdown .select2-search--dropdown,
.dealer-profile-page .dealer-profile-branch-modal .select2-dropdown .select2-search--dropdown {
    padding: 8px 8px 4px;
}

    body.role-permission-active .select2-dropdown .select2-search--dropdown .select2-search__field,
    body:has(.role-permission-page) .select2-dropdown .select2-search--dropdown .select2-search__field,
    body.master-crud-active .select2-dropdown .select2-search--dropdown .select2-search__field,
    body.user-management-active .select2-dropdown .select2-search--dropdown .select2-search__field,
    body:has(.reservation-page) .select2-dropdown .select2-search--dropdown .select2-search__field,
    .dealer-profile-page .dealer-profile-branch-modal .select2-dropdown .select2-search--dropdown .select2-search__field {
        width: 100% !important;
        height: 38px;
        min-height: 38px;
        margin: 0;
        padding: 0 12px;
        border: 1px solid rgba(28, 77, 137, .12) !important;
        border-radius: 12px !important;
        background: #fff !important;
        color: var(--blue-900) !important;
        font-size: 13px;
        font-weight: 700;
        line-height: 36px;
        outline: none !important;
        box-shadow: 0 8px 20px rgba(38, 62, 105, .04);
        -webkit-appearance: none;
        appearance: none;
    }

        body.role-permission-active .select2-dropdown .select2-search--dropdown .select2-search__field:focus,
        body:has(.role-permission-page) .select2-dropdown .select2-search--dropdown .select2-search__field:focus,
        body.master-crud-active .select2-dropdown .select2-search--dropdown .select2-search__field:focus,
        body.user-management-active .select2-dropdown .select2-search--dropdown .select2-search__field:focus,
        body:has(.reservation-page) .select2-dropdown .select2-search--dropdown .select2-search__field:focus,
        .dealer-profile-page .dealer-profile-branch-modal .select2-dropdown .select2-search--dropdown .select2-search__field:focus {
            border-color: rgba(47, 115, 208, .35) !important;
            box-shadow: 0 0 0 4px rgba(47, 115, 208, .10);
        }

/* :has(.role-permission-page) = fallback เมื่อ body class ถูก strip โดย init หน้าอื่น */
body.role-permission-active .select2-dropdown,
body:has(.role-permission-page) .select2-dropdown {
    z-index: 1200;
    border: 1px solid rgba(28,77,137,.14) !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: 0 18px 36px rgba(38, 62, 105, .18);
    overflow: hidden;
}

    body.role-permission-active .select2-dropdown .select2-results__options,
    body:has(.role-permission-page) .select2-dropdown .select2-results__options {
        padding: 6px;
    }

    body.role-permission-active .select2-dropdown .select2-results__option,
    body:has(.role-permission-page) .select2-dropdown .select2-results__option {
        padding: 8px 10px;
        border-radius: 12px;
        color: #31435f !important;
        font-size: 13px;
        font-weight: 750;
        background: #fff !important;
    }

    body.role-permission-active .select2-dropdown .select2-results__option--highlighted[aria-selected],
    body.role-permission-active .select2-dropdown .select2-results__option--highlighted.select2-results__option--selectable,
    body:has(.role-permission-page) .select2-dropdown .select2-results__option--highlighted[aria-selected],
    body:has(.role-permission-page) .select2-dropdown .select2-results__option--highlighted.select2-results__option--selectable {
        background: var(--blue-100) !important;
        color: var(--blue-900) !important;
    }

    body.role-permission-active .select2-dropdown .select2-results__option--selected,
    body.role-permission-active .select2-dropdown .select2-results__option--selected.select2-results__option--highlighted,
    body:has(.role-permission-page) .select2-dropdown .select2-results__option--selected,
    body:has(.role-permission-page) .select2-dropdown .select2-results__option--selected.select2-results__option--highlighted {
        background: linear-gradient(135deg, var(--blue-900), var(--blue-700)) !important;
        color: #fff !important;
    }

body.master-crud-active .select2-dropdown {
    z-index: 1200;
    border: 1px solid rgba(28,77,137,.14) !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: 0 18px 36px rgba(38, 62, 105, .18);
    overflow: hidden;
}

    body.master-crud-active .select2-dropdown .select2-results__options {
        padding: 6px;
    }

    body.master-crud-active .select2-dropdown .select2-results__option {
        padding: 8px 10px;
        border-radius: 12px;
        color: #31435f !important;
        font-size: 13px;
        font-weight: 750;
        background: #fff !important;
    }

    body.master-crud-active .select2-dropdown .select2-results__option--highlighted[aria-selected],
    body.master-crud-active .select2-dropdown .select2-results__option--highlighted.select2-results__option--selectable {
        background: var(--blue-100) !important;
        color: var(--blue-900) !important;
    }

    body.master-crud-active .select2-dropdown .select2-results__option--selected,
    body.master-crud-active .select2-dropdown .select2-results__option--selected.select2-results__option--highlighted {
        background: linear-gradient(135deg, var(--blue-900), var(--blue-700)) !important;
        color: #fff !important;
    }

.role-permission-page .role-permission-modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal-alert);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.role-permission-page .role-permission-modal[hidden] {
    display: none !important;
}

.role-permission-page .role-permission-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(23, 36, 58, .45);
    backdrop-filter: blur(2px);
}

.role-permission-page .role-permission-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 380px);
    padding: 24px 22px 20px;
    border-radius: 22px;
    background: var(--card);
    box-shadow: var(--shadow);
    text-align: center;
}

.role-permission-page .role-permission-modal-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 14px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
}

.role-permission-page .role-permission-modal-dialog.is-success .role-permission-modal-icon {
    color: var(--green);
    background: #e6f7ef;
}

.role-permission-page .role-permission-modal-dialog.is-warning .role-permission-modal-icon {
    color: var(--amber);
    background: #fff4e5;
}

.role-permission-page .role-permission-modal-dialog.is-error .role-permission-modal-icon {
    color: var(--red);
    background: #ffeaea;
}

.role-permission-page .role-permission-modal-message {
    margin: 0 0 18px;
    color: var(--text);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
}

.role-permission-page .role-permission-modal-actions {
    display: flex;
    justify-content: center;
}

.role-permission-page .role-permission-modal-actions .btn {
    min-width: 110px;
}

body.role-permission-modal-open {
    overflow: hidden;
}

.role-permission-page .role-permission-editor-modal {
    position: fixed;
    inset: 0;
    z-index: 10002;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 20px 16px 16px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.role-permission-page .role-permission-editor-modal[hidden] {
    display: none !important;
}

.role-permission-page .role-permission-editor-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(23, 36, 58, .45);
    backdrop-filter: blur(2px);
}

.role-permission-page .role-permission-editor-modal-dialog {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: min(100%, 920px);
    height: calc(100vh - 36px);
    max-height: calc(100vh - 36px);
    min-height: 320px;
    margin-top: 0;
    overflow: hidden;
    flex-shrink: 0;
    padding: 18px 20px 16px;
    border-radius: 20px;
    background: var(--card);
    box-shadow: var(--shadow);
}

.role-permission-page .role-permission-editor-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    flex: 0 0 auto;
}

.role-permission-page .role-permission-editor-modal-title-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.role-permission-page .role-permission-editor-modal-icon {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--blue-100);
    color: var(--blue-800);
    flex: 0 0 auto;
}

    .role-permission-page .role-permission-editor-modal-icon svg {
        width: 18px;
        height: 18px;
        fill: currentColor;
        stroke: currentColor;
    }

.role-permission-page .role-permission-editor-modal-title {
    margin: 0;
    color: var(--blue-900);
    font-size: 18px;
    font-weight: 800;
}

.role-permission-page .role-permission-editor-modal-close {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(28, 77, 137, .10);
    border-radius: 50%;
    background: #fff;
    color: var(--blue-800);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.role-permission-page .role-permission-editor-modal-close:hover {
    background: var(--blue-100);
}

.role-permission-page .role-permission-editor-form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
}

.role-permission-page .role-permission-editor-role-section {
    flex: 0 0 auto;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--line);
}

.role-permission-page .role-permission-editor-role-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr);
    gap: 12px 14px;
}

    .role-permission-page .role-permission-editor-role-grid .field label {
        margin-bottom: 6px;
        color: var(--blue-900);
        font-size: 13px;
        font-weight: 700;
    }

    .role-permission-page .role-permission-editor-role-grid .ui-control {
        width: 100%;
        border-radius: 12px;
    }

    .role-permission-page .role-permission-editor-role-grid .ui-control[readonly] {
        background: #f5f7fb;
        color: var(--muted);
    }

.role-permission-page .role-permission-editor-status-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 18px;
    margin-top: 12px;
}

.role-permission-page .role-permission-editor-status-label {
    color: var(--blue-900);
    font-size: 13px;
    font-weight: 700;
}

.role-permission-page .role-permission-editor-status-option {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--text);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

    .role-permission-page .role-permission-editor-status-option input {
        flex: 0 0 auto;
    }

.role-permission-page .role-permission-editor-permissions-section {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
}

.role-permission-page .role-permission-editor-permissions-title {
    margin: 0 0 10px;
    color: var(--blue-900);
    font-size: 14px;
    font-weight: 800;
    flex: 0 0 auto;
}

.role-permission-page .role-permission-matrix-toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    flex: 0 0 auto;
}

.role-permission-page .role-permission-editor-menu-search {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 300px;
}

    .role-permission-page .role-permission-editor-menu-search label {
        margin-bottom: 4px;
        color: var(--blue-900);
        font-size: 12px;
        font-weight: 700;
    }

    .role-permission-page .role-permission-editor-menu-search .ui-control {
        width: 100%;
        height: 38px;
        min-height: 38px;
        border-radius: 12px;
    }

.role-permission-page .role-permission-matrix-toolbar .role-permission-matrix-select-all-program {
    flex: 0 0 auto;
    margin-bottom: 6px;
}

.role-permission-page .role-permission-matrix-select-all-program {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--text);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
}

    .role-permission-page .role-permission-matrix-select-all-program input {
        flex: 0 0 auto;
    }

.role-permission-page .role-permission-editor-permissions-section .role-permission-matrix-panel {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.role-permission-page .role-permission-matrix-panel {
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
}

.role-permission-page .role-permission-matrix-wrap {
    flex: 1 1 auto;
    min-height: 100px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.role-permission-page .role-permission-editor-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    flex: 0 0 auto;
}

.role-permission-page .role-permission-editor-modal-actions .btn {
    min-width: 120px;
    height: 40px;
    min-height: 40px;
    border-radius: 12px;
}

body.role-permission-editor-modal-open {
    overflow: hidden;
}

/* Master CRUD — compact editor modal; backdrop click does not close (handled in JS) */
.master-crud-page .role-permission-editor-modal {
    align-items: flex-start;
    justify-content: center;
    overflow-x: hidden;
}

.master-crud-page .role-permission-editor-modal-dialog {
    width: min(100%, 720px);
    height: auto;
    max-height: calc(100vh - 40px);
    min-height: 0;
    overflow: hidden;
}

.master-crud-page .role-permission-editor-modal-dialog .select2-container {
    display: block;
    width: 100% !important;
    max-width: 100%;
}

.master-crud-page .role-permission-editor-role-grid .field {
    min-width: 0;
}

.master-crud-page .role-permission-editor-form {
    flex: 0 1 auto;
}

.master-crud-page .role-permission-editor-role-grid .field.role-permission-editor-field-full {
    grid-column: 1 / -1;
}

.master-crud-page .role-permission-editor-role-grid textarea.ui-control {
    height: auto;
    min-height: 88px;
    resize: vertical;
}

.role-permission-page .role-permission-matrix-row-hidden {
    display: none;
}

.role-permission-page input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    width: 17px;
    height: 17px;
    margin: 0;
    border: 1.5px solid rgba(28, 77, 137, .22);
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 4px 10px rgba(38, 62, 105, .04);
    cursor: pointer;
    vertical-align: middle;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

    .role-permission-page input[type="checkbox"]:hover {
        border-color: rgba(37, 99, 169, .45);
        background: #f8faff;
    }

    .role-permission-page input[type="checkbox"]:focus-visible {
        outline: none;
        border-color: rgba(47, 115, 208, .55);
        box-shadow: 0 0 0 3px rgba(47, 115, 208, .14);
    }

    .role-permission-page input[type="checkbox"]:checked {
        border-color: transparent;
        background: linear-gradient(135deg, var(--blue-900), var(--blue-700));
        box-shadow: 0 5px 12px rgba(28, 77, 137, .2);
    }

    .role-permission-page input[type="checkbox"]:checked::after {
        content: "";
        position: absolute;
        left: 5px;
        top: 2px;
        width: 4px;
        height: 8px;
        border: solid #fff;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
    }

    .role-permission-page input[type="checkbox"]:indeterminate {
        border-color: rgba(37, 99, 169, .55);
        background: var(--blue-100);
        box-shadow: 0 4px 10px rgba(38, 62, 105, .06);
    }

    .role-permission-page input[type="checkbox"]:indeterminate::after {
        content: "";
        position: absolute;
        left: 3px;
        top: 7px;
        width: 9px;
        height: 2px;
        border: 0;
        border-radius: 1px;
        background: var(--blue-700);
        transform: none;
    }

    .role-permission-page input[type="checkbox"]:disabled {
        opacity: .45;
        cursor: not-allowed;
        box-shadow: none;
    }

.role-permission-page input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    width: 17px;
    height: 17px;
    margin: 0;
    border: 1.5px solid rgba(28, 77, 137, .22);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 4px 10px rgba(38, 62, 105, .04);
    cursor: pointer;
    vertical-align: middle;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .role-permission-page input[type="radio"]:hover {
        border-color: rgba(37, 99, 169, .45);
    }

    .role-permission-page input[type="radio"]:focus-visible {
        outline: none;
        border-color: rgba(47, 115, 208, .55);
        box-shadow: 0 0 0 3px rgba(47, 115, 208, .14);
    }

    .role-permission-page input[type="radio"]:checked {
        border-color: var(--blue-700);
        background: #fff;
        box-shadow: 0 0 0 3px rgba(47, 115, 208, .1);
    }

    .role-permission-page input[type="radio"]:checked::after {
        content: "";
        position: absolute;
        left: 4px;
        top: 4px;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--blue-900), var(--blue-700));
    }

    .role-permission-page input[type="radio"]:disabled {
        opacity: .45;
        cursor: not-allowed;
    }

.role-permission-page .role-permission-matrix-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}

    .role-permission-page .role-permission-matrix-table thead th {
        position: sticky;
        top: 0;
        z-index: 2;
        padding: 10px 8px;
        border-bottom: 1px solid var(--line);
        background: #fff;
        color: var(--blue-900);
        font-size: 12px;
        font-weight: 800;
        text-align: center;
        vertical-align: bottom;
    }

    .role-permission-page .role-permission-matrix-table tbody td {
        padding: 10px 8px;
        border-bottom: 1px solid var(--line);
        vertical-align: middle;
    }

    .role-permission-page .role-permission-matrix-table tbody tr:last-child td {
        border-bottom: 0;
    }

.role-permission-page .role-permission-matrix-menu-col,
.role-permission-page .role-permission-matrix-menu-cell {
    min-width: 240px;
    text-align: left;
    white-space: nowrap;
}

.role-permission-page .role-permission-matrix-menu-cell {
    color: var(--text);
    font-size: 13px;
    font-weight: 700;
}

.role-permission-page .role-permission-matrix-action-col {
    width: 72px;
    min-width: 72px;
}

.role-permission-page .role-permission-matrix-action-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    min-height: 52px;
}

    .role-permission-page .role-permission-matrix-action-head input {
        flex: 0 0 auto;
    }

    .role-permission-page .role-permission-matrix-action-head span {
        display: block;
        color: var(--muted);
        font-size: 11px;
        font-weight: 800;
        line-height: 1.2;
        text-align: center;
        white-space: nowrap;
    }

.role-permission-page .role-permission-matrix-check-cell {
    text-align: center;
}

    .role-permission-page .role-permission-matrix-check-cell input {
        flex: 0 0 auto;
    }

.role-permission-page .role-permission-matrix-empty-cell {
    background: transparent;
}

.role-permission-page .role-permission-matrix-empty {
    text-align: center;
    color: var(--muted);
    font-weight: 700;
    padding: 18px 12px;
}

/* Responsive */

@media (max-width: 1260px) {
    .dashboard-grid,
    .content-grid {
        grid-template-columns: 1fr;
    }

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

    .reservation-page .reservation-filter {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .reservation-page .reservation-search-field {
        grid-column: span 2;
    }

    .reservation-page .filter-actions.compact {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }

    .role-permission-page .role-permission-filter,
    .user-management-page .role-permission-filter,
    .master-crud-page .role-permission-filter {
        grid-template-columns: minmax(0, 1fr) minmax(0, 180px) auto;
    }
}

@media (max-width: 992px) {
    .role-permission-page .role-permission-filter,
    .user-management-page .role-permission-filter,
    .master-crud-page .role-permission-filter {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .role-permission-page .role-permission-search-field,
    .role-permission-page .role-permission-status-field,
    .user-management-page .role-permission-search-field,
    .user-management-page .role-permission-status-field,
    .master-crud-page .role-permission-search-field,
    .master-crud-page .role-permission-status-field {
        max-width: none;
    }

    .role-permission-page .filter-actions.compact,
    .user-management-page .filter-actions.compact,
    .master-crud-page .filter-actions.compact {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}

@media (max-width: 980px) {
    .app {
        grid-template-columns: 1fr;
    }

    .sidebar {
        position: fixed;
        z-index: 50;
        left: 0;
        top: 0;
        width: min(88vw, 330px);
        transform: translateX(-105%);
        transition: .22s ease;
    }

    body.sidebar-open .sidebar {
        transform: translateX(0);
    }

    body.sidebar-open .overlay {
        display: block;
    }

    .menu-toggle {
        display: inline-grid;
        place-items: center;
    }

    .main {
        padding: 18px;
    }

    .topbar {
        align-items: flex-start;
    }
}

@media (max-width: 680px) {
    .main {
        padding: 14px;
    }

    .topbar {
        flex-direction: column;
    }

    .top-actions-tools {
        width: 100%;
        flex-wrap: wrap;
    }

    .menu-search {
        flex: 1 1 160px;
        width: auto;
        max-width: none;
    }

    .branch-select {
        flex: 1 1 180px;
        min-width: 0;
    }

    .top-actions {
        width: 100%;
        justify-content: stretch;
    }

    .btn {
        flex: 1 1 auto;
    }

    .kpi-grid,
    .priority-grid,
    .filter-grid {
        grid-template-columns: 1fr;
    }

    .pipeline-row {
        grid-template-columns: 44px minmax(0, 1fr);
    }

        .pipeline-row .pill {
            grid-column: 2;
            width: fit-content;
        }

    .reservation-page .reservation-head {
        flex-direction: column;
    }

    .reservation-page .table-head-actions {
        width: 100%;
    }

    .reservation-page .reservation-filter {
        grid-template-columns: 1fr;
    }

    .reservation-page .reservation-search-field {
        grid-column: auto;
    }

    .reservation-page .reservation-dt-footer {
        flex-direction: column;
        align-items: flex-start;
    }

    .reservation-page .dataTables_paginate {
        margin-left: 0;
    }

    .role-permission-page .role-permission-head,
    .user-management-page .role-permission-head,
    .master-crud-page .role-permission-head {
        flex-direction: column;
    }

    .role-permission-page .table-head-actions,
    .user-management-page .table-head-actions,
    .master-crud-page .table-head-actions {
        width: 100%;
    }

    .role-permission-page .role-permission-filter,
    .user-management-page .role-permission-filter,
    .master-crud-page .role-permission-filter {
        grid-template-columns: 1fr;
    }

    .role-permission-page .role-permission-search-field,
    .role-permission-page .role-permission-status-field,
    .user-management-page .role-permission-search-field,
    .user-management-page .role-permission-status-field,
    .master-crud-page .role-permission-search-field,
    .master-crud-page .role-permission-status-field {
        max-width: none;
    }

    .role-permission-page .filter-actions.compact,
    .user-management-page .filter-actions.compact,
    .master-crud-page .filter-actions.compact {
        grid-column: auto;
        width: 100%;
    }

    .role-permission-page .filter-actions.compact .btn,
    .user-management-page .filter-actions.compact .btn,
    .master-crud-page .filter-actions.compact .btn {
        width: 100%;
    }

    .role-permission-page .role-permission-dt-footer,
    .user-management-page .role-permission-dt-footer {
        flex-direction: column;
        align-items: flex-start;
    }

    .role-permission-page .dataTables_paginate,
    .user-management-page .dataTables_paginate {
        margin-left: 0;
    }


    .role-permission-page .role-permission-editor-modal {
        padding: 12px 10px max(12px, env(safe-area-inset-bottom, 0px));
    }

    .role-permission-page .role-permission-editor-modal-dialog {
        width: 100%;
        height: calc(100dvh - 24px);
        max-height: calc(100dvh - 24px);
        min-height: 0;
        padding: 14px 12px 12px;
        border-radius: 16px;
    }

    .master-crud-page .role-permission-editor-modal-dialog {
        width: 100%;
        height: auto;
        max-height: calc(100dvh - 24px);
        min-height: 0;
    }

    .role-permission-page .role-permission-editor-modal-header {
        margin-bottom: 10px;
    }

    .role-permission-page .role-permission-editor-modal-title {
        font-size: 16px;
    }

    .role-permission-page .role-permission-editor-role-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .role-permission-page .role-permission-matrix-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .role-permission-page .role-permission-editor-menu-search {
        max-width: none;
    }

    .role-permission-page .role-permission-matrix-toolbar .role-permission-matrix-select-all-program {
        margin-bottom: 0;
        padding-top: 4px;
    }

    .role-permission-page .role-permission-matrix-wrap {
        min-height: 80px;
    }

    .role-permission-page .role-permission-editor-modal-actions {
        flex-direction: column-reverse;
        gap: 8px;
    }

        .role-permission-page .role-permission-editor-modal-actions .btn {
            width: 100%;
            min-width: 0;
        }

    .vehicle-purchase-editor-modal .vehicle-purchase-form-footer.role-permission-editor-modal-actions {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .vehicle-purchase-editor-modal .vehicle-purchase-form-footer.role-permission-editor-modal-actions .btn {
        width: auto;
        min-width: 120px;
        flex: 0 0 auto;
    }

    .role-permission-page .role-permission-matrix-table {
        min-width: 640px;
    }

    .dealer-profile-page .dealer-profile-main-card,
    .dealer-profile-page .dealer-profile-branch-card {
        padding: 18px 16px 16px;
        border-radius: 20px;
    }

    .dealer-profile-page .dealer-profile-form-layout {
        grid-template-columns: 1fr;
        max-width: none;
    }

    .dealer-profile-page .dealer-profile-vat-field {
        max-width: 160px;
    }

    .dealer-profile-page .dealer-profile-logo-panel {
        order: -1;
        padding-top: 0;
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 12px;
    }

    .dealer-profile-page .dealer-profile-logo-panel-label {
        display: none;
    }

    .dealer-profile-page .dealer-profile-logo-hint {
        text-align: left;
        align-self: center;
    }

    .dealer-profile-page .dealer-profile-form-grid,
    .dealer-profile-page .dealer-profile-branch-form-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .dealer-profile-page .dealer-profile-span-2 {
        grid-column: span 1;
    }

    .dealer-profile-page .dealer-profile-head {
        flex-direction: column;
    }

    .dealer-profile-page .table-head-actions {
        width: 100%;
    }

    .dealer-profile-page .dealer-profile-dt-footer {
        flex-direction: column;
        align-items: flex-start;
    }

    .dealer-profile-page .dataTables_paginate {
        margin-left: 0;
    }

}


/* User management page */

/* User management list panel (same layout as role-permission-page) */

.user-management-page > .table-panel {
    padding: 16px 18px;
    max-width: 100%;
}

.user-management-page .role-permission-head {
    margin-bottom: 12px;
}

.master-crud-page > .table-panel {
    padding: 16px 18px;
    max-width: 100%;
    box-sizing: border-box;
}

.user-management-page .table-head-actions .btn,
.user-management-page .filter-actions.compact .btn {
    height: 38px;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    gap: 6px;
    box-shadow: 0 6px 14px rgba(38, 62, 105, .06);
}

.user-management-page .filter-actions.compact .btn {
    flex: 0 0 auto !important;
}

.user-management-page .table-head-actions .btn-primary,
.user-management-page .filter-actions.compact .btn-primary {
    box-shadow: 0 8px 16px rgba(28, 77, 137, .16);
}

.user-management-page .table-wrap.js-responsive-table {
    overflow-x: hidden;
}

.user-management-page .dataTables_wrapper {
    width: 100%;
    max-width: 100%;
    font-family: inherit;
}

.user-management-page .dataTables_wrapper .dataTable {
    width: 100% !important;
    max-width: none;
}

.user-management-page .dataTables_wrapper .dataTables_info,
.user-management-page .dataTables_wrapper .dataTables_paginate {
    padding-top: 0;
    margin-top: 0;
}

.user-management-page .role-permission-dt-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
}

.user-management-page .dataTables_info {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
}

.user-management-page .dataTables_paginate {
    margin-left: auto;
}

.user-management-page .dataTables_paginate .paginate_button {
    min-width: 28px;
    min-height: 28px;
    margin-left: 3px;
    padding: 3px 8px;
    border: 1px solid rgba(28,77,137,.12) !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: var(--blue-800) !important;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    box-shadow: 0 4px 10px rgba(38,62,105,.04);
}

.user-management-page .dataTables_paginate .paginate_button:hover {
    background: var(--blue-100) !important;
    color: var(--blue-900) !important;
    border-color: rgba(28,77,137,.18) !important;
}

.user-management-page .dataTables_paginate .paginate_button.current,
.user-management-page .dataTables_paginate .paginate_button.current:hover {
    background: linear-gradient(135deg, var(--blue-900), var(--blue-700)) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 6px 12px rgba(28, 77, 137, .14);
}

.user-management-page .dataTables_paginate .paginate_button.disabled,
.user-management-page .dataTables_paginate .paginate_button.disabled:hover {
    opacity: .45;
    background: #f5f7fb !important;
    color: var(--muted) !important;
    box-shadow: none;
    cursor: default;
}

.user-management-page table.dataTable thead th {
    border-bottom: 1px solid var(--line);
}

.user-management-page table.dataTable tbody td {
    padding-top: 10px;
    padding-bottom: 10px;
    vertical-align: middle;
}

.user-management-page table.dataTable.no-footer {
    border-bottom: 1px solid var(--line);
}

body.user-management-active .select2-dropdown {
    z-index: 1200;
    border: 1px solid rgba(28,77,137,.14) !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: 0 18px 36px rgba(38, 62, 105, .18);
    overflow: hidden;
}

body.user-management-editor-modal-open:has(#userManagementEditorModal:not([hidden])) .select2-dropdown {
    z-index: 10030 !important;
}

.user-management-page .select2-container {
    display: block;
    width: 100% !important;
    max-width: 100%;
}

.user-management-page .select2-container--default .select2-selection--single {
    height: 38px;
    min-height: 38px;
    display: flex;
    align-items: center;
    border: 1px solid rgba(28,77,137,.12) !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: 0 8px 20px rgba(38, 62, 105, .04);
}

.user-management-page .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0 34px 0 12px;
    color: var(--blue-900) !important;
    font-size: 13px;
    font-weight: 700;
    line-height: 36px;
}

.user-management-page .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 50%;
    right: 10px;
    width: 16px;
    height: 16px;
    transform: translateY(-50%);
}

.user-management-page .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--blue-800) transparent transparent transparent !important;
    border-width: 6px 5px 0 5px;
}

.user-management-page .select2-container--default.select2-container--open .select2-selection--single {
    border-color: rgba(47,115,208,.35) !important;
    box-shadow: 0 0 0 4px rgba(47,115,208,.10);
}

.user-management-page .user-management-editor-modal-actions .btn {
    height: 38px;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    gap: 6px;
    box-shadow: 0 6px 14px rgba(38, 62, 105, .06);
}

.user-management-page .user-management-editor-modal {
    position: fixed;
    inset: 0;
    z-index: 10002;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 20px 16px;
    overflow-y: auto;
}

.user-management-page .user-management-editor-modal[hidden] {
    display: none !important;
}

.user-management-page .user-management-editor-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(23, 36, 58, .45);
    backdrop-filter: blur(2px);
}

.user-management-page .user-management-editor-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 920px);
    margin: 0 auto;
    border-radius: 22px;
    background: var(--card);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.user-management-page .user-management-editor-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--line);
}

.user-management-page .user-management-editor-modal-title-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-management-page .user-management-editor-modal-icon svg {
    width: 22px;
    height: 22px;
    color: var(--blue-800);
}

.user-management-page .user-management-editor-modal-title {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
}

.user-management-page .user-management-editor-modal-close {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 12px;
    background: var(--blue-100);
    color: var(--blue-900);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.user-management-page .user-management-editor-form {
    padding: 16px 18px 18px;
}

.user-management-page .user-management-editor-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 16px;
    align-items: start;
}

.user-management-page .user-management-editor-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.user-management-page .user-management-span-full {
    grid-column: 1 / -1;
}

.user-management-page .user-management-password-optional {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}

.user-management-page .user-management-signature-panel {
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 12px;
    background: #fff;
}

.user-management-page .user-management-signature-panel-label {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 800;
    color: var(--blue-900);
}

.user-management-page .user-management-signature-preview-shell {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.user-management-page .user-management-signature-preview-wrap {
    flex: 1;
    min-height: 120px;
    border: 1px dashed rgba(28, 77, 137, .18);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #fff;
}

.user-management-page .user-management-signature-preview {
    width: 100%;
    max-height: 160px;
    object-fit: contain;
}

.user-management-page .user-management-signature-placeholder {
    padding: 12px;
    text-align: center;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.user-management-page .user-management-signature-pick-btn {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(28, 77, 137, .12);
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
}

.user-management-page .user-management-signature-hint {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
}

.user-management-page .user-management-signature-actions {
    margin-top: 8px;
}

.user-management-page .user-management-editor-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.user-management-page .user-management-modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal-alert);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.user-management-page .user-management-modal[hidden] {
    display: none !important;
}

.user-management-page .user-management-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(23, 36, 58, .45);
    backdrop-filter: blur(2px);
}

.user-management-page .user-management-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 380px);
    padding: 24px 22px 20px;
    border-radius: 22px;
    background: var(--card);
    box-shadow: var(--shadow);
    text-align: center;
}

.user-management-page .user-management-modal-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 14px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
}

.user-management-page .user-management-modal-dialog.is-success .user-management-modal-icon {
    color: var(--green);
    background: #e6f7ef;
}

.user-management-page .user-management-modal-dialog.is-warning .user-management-modal-icon {
    color: var(--amber);
    background: #fff4e5;
}

.user-management-page .user-management-modal-dialog.is-error .user-management-modal-icon {
    color: var(--red);
    background: #ffeaea;
}

.user-management-page .user-management-modal-message {
    margin: 0 0 18px;
    color: var(--text);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
}

.user-management-page .user-management-modal-actions {
    display: flex;
    justify-content: center;
}

.user-management-page .user-management-modal-actions .btn {
    min-width: 110px;
}

body.user-management-editor-modal-open,
body.user-management-modal-open {
    overflow: hidden;
}

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

@media (max-width: 900px) {
    .user-management-page .user-management-editor-layout,
    .user-management-page .user-management-editor-grid {
        grid-template-columns: 1fr;
    }
}

body .datepicker.dropdown-menu,
body .datepicker.datepicker-dropdown,
body .datepicker.app-datepicker {
    position: absolute !important;
    z-index: 9999 !important;
    pointer-events: auto;
}

/* ไม่มี Bootstrap .dropdown-menu CSS — ซ่อนไว้จนกว่า datepicker JS จะตั้ง inline display */
body > .datepicker.dropdown-menu:not([style]),
body > .datepicker.datepicker-dropdown:not([style]) {
    display: none !important;
}

/* Opaque calendar chrome (all menus) — prevents transparent overlap over modal fields */
body .datepicker.app-datepicker {
    width: 280px;
    padding: 8px;
    border: 1px solid rgba(28, 77, 137, .22);
    border-radius: 16px;
    background: linear-gradient(180deg, #e5eaf5 0%, #f5f6fb 52%, #e8edf6 100%) !important;
    box-shadow: 0 22px 44px rgba(28, 77, 137, .22);
    font-family: inherit;
    font-size: 13px;
}

body .datepicker.app-datepicker table {
    width: 100%;
    min-width: 0 !important;
    margin: 0;
    border-collapse: collapse;
    table-layout: fixed;
    background: transparent;
}

body .datepicker.app-datepicker th,
body .datepicker.app-datepicker td {
    min-width: 0 !important;
    background: transparent;
}

/* Datepicker must sit above editor modals (z-index 10002) */
body.role-permission-editor-modal-open .datepicker.dropdown-menu,
body.role-permission-editor-modal-open .datepicker.datepicker-dropdown,
body.role-permission-editor-modal-open .datepicker.app-datepicker {
    z-index: 20060 !important;
}

.app-confirm-modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal-alert);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.app-confirm-modal[hidden] {
    display: none !important;
}

.app-confirm-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(23, 36, 58, .45);
    backdrop-filter: blur(2px);
}

.app-confirm-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 400px);
    padding: 24px 22px 20px;
    border-radius: 22px;
    background: var(--card);
    box-shadow: var(--shadow);
    text-align: center;
}

.app-confirm-modal-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 14px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--amber);
    background: #fff4e5;
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
}

.app-confirm-modal-dialog.is-danger .app-confirm-modal-icon {
    color: var(--red);
    background: #ffeaea;
}

.app-confirm-modal-title {
    margin: 0 0 8px;
    color: var(--blue-900);
    font-size: 18px;
    font-weight: 800;
}

.app-confirm-modal-message {
    margin: 0 0 18px;
    color: var(--text);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
}

.app-confirm-modal-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.app-confirm-modal-actions .btn {
    min-width: 110px;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 12px;
    font-size: 13px;
}

.app-confirm-modal-dialog.is-danger .app-confirm-modal-confirm {
    color: #fff;
    background: linear-gradient(135deg, #c62828, #e53935);
    box-shadow: 0 10px 22px rgba(198, 40, 40, .22);
}

body.app-confirm-modal-open {
    overflow: hidden;
}

/* Login & Platform shell — centered card (split pane) */
body.login-page {
    margin: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background: #e8ecf2;
    overflow-x: hidden;
}

.login-scene {
    width: 100%;
    max-width: 980px;
    animation: loginPanelIn .45s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes loginPanelIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.login-card {
    display: grid;
    grid-template-columns: minmax(280px, 380px) minmax(320px, 1fr);
    min-height: 520px;
    border-radius: 20px;
    overflow: hidden;
    background: var(--card);
    box-shadow:
        0 2px 4px rgba(38, 62, 105, .04),
        0 24px 48px rgba(38, 62, 105, .14);
}

.login-card-aside {
    display: flex;
    flex-direction: column;
    padding: 32px 32px 28px;
    color: #fff;
    background: linear-gradient(165deg, #143d6e 0%, var(--blue-800) 55%, #1a5f9e 100%);
}

.login-page--platform .login-card-aside {
    background: linear-gradient(165deg, #2a2460 0%, #3d52a8 50%, var(--blue-700) 100%);
}

.login-aside-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.login-aside-mark {
    flex-shrink: 0;
    transform: translateY(-12px);
    width: 54px;
    height: 54px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    font-size: 20px;
    font-weight: 800;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .2);
}

.login-aside-head strong {
    display: block;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.3px;
}

.login-aside-head span {
    display: block;
    margin-top: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .72);
}

.login-aside-desc {
    margin: 0 0 24px;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .88);
}

.login-aside-promo {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.login-aside-promo-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    color: #fff;
}

.login-aside-promo-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 12px;
}

.login-aside-promo-list li {
    position: relative;
    padding-left: 26px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    color: rgba(255, 255, 255, .92);
}

.login-aside-promo-list li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 1px;
    width: 18px;
    height: 18px;
    border-radius: 6px;
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 800;
    background: rgba(34, 160, 107, .45);
    border: 1px solid rgba(255, 255, 255, .25);
}

.login-aside-promo-card {
    margin-top: auto;
    padding: 16px 18px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .2);
    backdrop-filter: blur(6px);
}

.login-aside-promo-card strong {
    display: block;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    color: #fff;
}

.login-aside-promo-card p {
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .85);
}

.login-card-main {
    display: flex;
    flex-direction: column;
    padding: 32px 36px 28px;
    background: #f7f8fb;
}

.login-main-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 26px;
}

.login-main-titles h1 {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    color: var(--blue-900);
    letter-spacing: -.3px;
    line-height: 1.25;
}

.login-main-title-en {
    margin: 6px 0 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--muted);
}

.login-alt-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--blue-800);
    text-decoration: none;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: 0 2px 8px rgba(38, 62, 105, .06);
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.login-alt-link:hover {
    background: var(--blue-100);
    border-color: #b8c8e0;
    color: var(--blue-900);
}

.login-main-note {
    margin: 20px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    font-size: 14px;
    line-height: 1.5;
    color: var(--muted);
    text-align: center;
}

.login-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: linear-gradient(135deg, #fff5f5, #fdecea);
    color: #9b1c1c;
    border: 1px solid #f5c2c0;
    border-radius: 14px;
    padding: 12px 14px;
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.45;
}

.login-alert-icon {
    flex-shrink: 0;
    margin-top: 1px;
}

.login-form {
    display: grid;
    gap: 18px;
}

.login-field {
    display: grid;
    gap: 8px;
}

.login-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
}

.login-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.login-input-icon {
    position: absolute;
    left: 14px;
    color: var(--muted);
    pointer-events: none;
    display: flex;
}

.login-input {
    width: 100%;
    min-height: 46px;
    border: 1px solid #d5dce8;
    border-radius: 10px;
    padding: 0 44px 0 44px;
    font-size: 14px;
    color: var(--text);
    background: #fff;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.login-input::placeholder {
    color: #9aa5b5;
}

.login-input:hover {
    border-color: #c5d0e2;
}

.login-input:focus {
    outline: none;
    border-color: var(--blue-700);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(37, 99, 169, .14);
}

.login-password-toggle {
    position: absolute;
    right: 8px;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background .15s ease, color .15s ease;
}

.login-password-toggle:hover {
    background: var(--blue-100);
    color: var(--blue-800);
}

.login-form-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: -2px;
}

.login-remember {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

.login-remember input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.login-remember-box {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 1.5px solid #c5d0e2;
    background: #fff;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
    flex-shrink: 0;
    position: relative;
}

.login-remember-box::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transition: transform .15s ease;
}

.login-remember input:checked + .login-remember-box {
    background: linear-gradient(135deg, var(--blue-800), var(--blue-700));
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(28, 77, 137, .25);
}

.login-remember input:checked + .login-remember-box::after {
    transform: rotate(45deg) scale(1);
}

.login-remember input:focus-visible + .login-remember-box {
    box-shadow: 0 0 0 3px rgba(37, 99, 169, .2);
}

.login-remember-text {
    font-size: 14px;
    color: var(--text);
    line-height: 1.4;
}

.login-remember-text em {
    font-style: normal;
    color: var(--muted);
    font-size: 13px;
}

.login-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    margin-top: 8px;
    border: 0;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    background: var(--blue-800);
    box-shadow: 0 8px 20px rgba(28, 77, 137, .22);
    transition: background .15s ease, box-shadow .15s ease, transform .15s ease;
}

.login-submit:hover {
    background: var(--blue-700);
    box-shadow: 0 10px 24px rgba(28, 77, 137, .28);
    transform: translateY(-1px);
}

.login-submit:active {
    transform: translateY(0);
    box-shadow: 0 6px 14px rgba(28, 77, 137, .2);
}

.login-page--platform .login-submit {
    background: #3d52a8;
    box-shadow: 0 8px 20px rgba(61, 82, 168, .25);
}

.login-page--platform .login-submit:hover {
    background: #4a63b8;
}

.login-page--platform .login-remember input:checked + .login-remember-box {
    background: #3d52a8;
    box-shadow: 0 4px 12px rgba(61, 82, 168, .25);
}

@media (max-width: 860px) {
    .login-card {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .login-card-aside {
        padding: 24px 22px 22px;
    }

    .login-card-main {
        padding: 24px 22px 22px;
    }

    .login-main-top {
        flex-direction: column;
        align-items: stretch;
    }

    .login-alt-link {
        align-self: flex-start;
    }
}

@media (max-width: 480px) {
    body.login-page {
        padding: 12px 10px;
        align-items: flex-start;
    }

}

body.platform-shell {
    min-height: 100vh;
    background: var(--bg);
}

.platform-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 24px;
    background: var(--card);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
}

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

.platform-brand strong {
    display: block;
    color: var(--blue-800);
}

.platform-brand span {
    font-size: 13px;
    color: var(--muted);
}

.platform-topbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.platform-user-label {
    font-size: 14px;
    color: var(--muted);
}

.platform-logout-form {
    margin: 0;
}

.platform-main {
    padding: 24px;
    max-width: 960px;
    margin: 0 auto;
}

.platform-dashboard-card {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 28px;
}

.platform-dashboard-card h2 {
    margin: 0 0 8px;
    color: var(--blue-800);
}

.platform-dashboard-hint {
    color: var(--muted);
    margin-top: 12px;
}

.topbar-logout-form {
    margin: 0;
}

/* Chart of account page */

.chart-of-account-page .chart-of-account-hint {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--muted);
    max-width: 42rem;
}

.master-crud-page.chart-of-account-page .chart-of-account-filter {
    grid-template-columns: minmax(160px, 320px) minmax(0, 170px) minmax(0, 150px) auto;
    justify-content: start;
}

.master-crud-page.chart-of-account-page .chart-of-account-filter .role-permission-search-field {
    max-width: 320px;
}

.master-crud-page.chart-of-account-page .chart-of-account-filter > .field {
    overflow: visible;
    position: relative;
}

.master-crud-page.chart-of-account-page .chart-of-account-filter .select2-container {
    width: 100% !important;
}

.master-crud-page.chart-of-account-page .chart-of-account-filter .role-permission-status-field {
    max-width: none;
}

#chartOfAccountEditorModal .role-permission-editor-role-grid > .field {
    overflow: visible;
    position: relative;
}

#chartOfAccountEditorModal .role-permission-editor-role-grid > .field .select2-container {
    width: 100% !important;
}

.master-crud-page.account-mapping-page .account-mapping-filter {
    grid-template-columns: minmax(160px, 320px) minmax(0, 180px) minmax(0, 160px) minmax(0, 140px) auto;
    justify-content: start;
}

.master-crud-page.account-mapping-page .account-mapping-filter .role-permission-search-field {
    max-width: 320px;
}

.master-crud-page.account-mapping-page .account-mapping-filter > .field {
    overflow: visible;
    position: relative;
}

.master-crud-page.account-mapping-page .account-mapping-filter .select2-container {
    width: 100% !important;
}

.master-crud-page.account-mapping-page .account-mapping-filter .role-permission-status-field {
    max-width: none;
}

#accountMappingEditorModal .role-permission-editor-role-grid > .field,
#accountMappingEditorModal .field {
    overflow: visible;
    position: relative;
}

#accountMappingEditorModal .select2-container {
    width: 100% !important;
}

/* บัญชีรับเงิน / จ่ายเงิน — ค้นหาความกว้างประมาณครึ่งหนึ่ง ไม่ยืดเต็มแถว */
.master-crud-page.receipt-payment-account-page .receipt-payment-account-filter {
    grid-template-columns: minmax(160px, 320px) minmax(0, 160px) minmax(0, 160px) minmax(0, 150px) auto;
    justify-content: start;
}

/* Select2 dropdown บน filter ต้องไม่ถูก field ตัด และกว้างพอคลิกได้ */
.master-crud-page.receipt-payment-account-page .receipt-payment-account-filter > .field {
    overflow: visible;
    position: relative;
}

.master-crud-page.receipt-payment-account-page .receipt-payment-account-filter .select2-container {
    width: 100% !important;
}

.master-crud-page.receipt-payment-account-page .receipt-payment-account-filter .role-permission-status-field {
    max-width: none;
}

#rpaEditorModal .role-permission-editor-role-grid > .field {
    overflow: visible;
    position: relative;
}

#rpaEditorModal .role-permission-editor-role-grid > .field .select2-container {
    width: 100% !important;
}

/* ผู้ขาย / คู่ค้า — 4 filter fields + ค้นหา แถวเดียว */
.master-crud-page.supplier-page .supplier-filter {
    grid-template-columns: minmax(180px, 320px) minmax(0, 140px) minmax(0, 150px) minmax(0, 120px) auto;
    justify-content: start;
}

.master-crud-page.supplier-page .supplier-filter .role-permission-search-field {
    max-width: 320px;
}

.master-crud-page.supplier-page .supplier-filter > .field {
    overflow: visible;
    position: relative;
}

.master-crud-page.supplier-page .supplier-filter .select2-container {
    width: 100% !important;
}

.master-crud-page.supplier-page .supplier-filter .role-permission-status-field {
    max-width: none;
}

#supplierEditorModal .role-permission-editor-role-grid > .field,
#supplierEditorModal .field {
    overflow: visible;
    position: relative;
}

#supplierEditorModal .select2-container {
    width: 100% !important;
}

@media (max-width: 1100px) {
    .master-crud-page.supplier-page .supplier-filter {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto;
    }

    .master-crud-page.supplier-page .supplier-filter .role-permission-search-field {
        grid-column: 1 / -1;
        max-width: none;
    }
}

@media (max-width: 768px) {
    .master-crud-page.supplier-page .supplier-filter {
        grid-template-columns: 1fr;
    }
}

.master-crud-page.receipt-payment-account-page .receipt-payment-account-filter .role-permission-search-field {
    max-width: 320px;
}

.master-crud-page.receipt-payment-account-page .receipt-payment-account-filter .role-permission-status-field {
    max-width: none;
}

.receipt-payment-account-page .rpa-usage-row {
    margin-top: 4px;
}

@media (max-width: 768px) {
    .master-crud-page.receipt-payment-account-page .receipt-payment-account-filter {
        grid-template-columns: 1fr;
    }

    .master-crud-page.receipt-payment-account-page .receipt-payment-account-filter .role-permission-search-field,
    .master-crud-page.receipt-payment-account-page .receipt-payment-account-filter .rpa-type-field,
    .master-crud-page.receipt-payment-account-page .receipt-payment-account-filter .rpa-usage-field,
    .master-crud-page.receipt-payment-account-page .receipt-payment-account-filter .rpa-status-field,
    .master-crud-page.receipt-payment-account-page .receipt-payment-account-filter .filter-actions.compact {
        grid-column: auto;
    }
}

.account-mapping-page #accountMappingEditorModal .select2-container {
    width: 100% !important;
}

.chart-of-account-page .chart-account-name {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    line-height: 1.4;
}

.chart-of-account-page .chart-account-name-control {
    font-weight: 800;
    color: var(--blue-900);
}

.chart-of-account-page .chart-account-tree {
    flex: 0 0 auto;
    color: var(--blue-700);
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    opacity: .85;
}

.chart-of-account-page .chart-account-name.chart-account-depth-1 {
    padding-left: 4px;
    font-weight: 500;
}

.chart-of-account-page .chart-account-name.chart-account-depth-2 {
    padding-left: 10px;
    font-weight: 500;
}

.chart-of-account-page .chart-account-name.chart-account-depth-3 {
    padding-left: 16px;
    font-weight: 500;
    color: var(--text);
}

.chart-of-account-page .chart-of-account-control-row {
    margin-top: 4px;
}

@media (max-width: 1100px) {
    .master-crud-page.chart-of-account-page .chart-of-account-filter {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    }

    .master-crud-page.chart-of-account-page .chart-of-account-filter .role-permission-search-field {
        grid-column: 1 / -1;
        max-width: none;
    }

    .master-crud-page.chart-of-account-page .chart-of-account-filter .chart-of-account-type-field {
        grid-column: 1 / 2;
    }

    .master-crud-page.chart-of-account-page .chart-of-account-filter .role-permission-status-field:not(.chart-of-account-type-field) {
        grid-column: 2 / 3;
    }

    .master-crud-page.chart-of-account-page .chart-of-account-filter .filter-actions.compact {
        grid-column: 3 / 4;
        justify-content: flex-end;
    }

    .master-crud-page.receipt-payment-account-page .receipt-payment-account-filter {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto;
    }

    .master-crud-page.receipt-payment-account-page .receipt-payment-account-filter .role-permission-search-field {
        grid-column: 1 / -1;
    }

    .master-crud-page.receipt-payment-account-page .receipt-payment-account-filter .rpa-type-field {
        grid-column: 1 / 2;
    }

    .master-crud-page.receipt-payment-account-page .receipt-payment-account-filter .rpa-usage-field {
        grid-column: 2 / 3;
    }

    .master-crud-page.receipt-payment-account-page .receipt-payment-account-filter .rpa-status-field {
        grid-column: 3 / 4;
    }

    .master-crud-page.receipt-payment-account-page .receipt-payment-account-filter .filter-actions.compact {
        grid-column: 4 / 5;
    }

    .master-crud-page.account-mapping-page .account-mapping-filter {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto;
    }

    .master-crud-page.account-mapping-page .account-mapping-filter .role-permission-search-field {
        grid-column: 1 / -1;
    }

    .master-crud-page.account-mapping-page .account-mapping-filter .chart-of-account-type-field {
        grid-column: 1 / 2;
    }

    .master-crud-page.account-mapping-page .account-mapping-filter .account-mapping-link-status-field {
        grid-column: 2 / 3;
    }

    .master-crud-page.account-mapping-page .account-mapping-filter .account-mapping-active-status-field {
        grid-column: 3 / 4;
    }

    .master-crud-page.account-mapping-page .account-mapping-filter .filter-actions.compact {
        grid-column: 4 / 5;
        justify-content: flex-end;
    }
}

.master-crud-page.vehicle-generation-page .vehicle-generation-filter,
.master-crud-page.vehicle-sub-model-page .vehicle-sub-model-filter {
    grid-template-columns: minmax(160px, 320px) minmax(0, 150px) minmax(0, 150px) minmax(0, 130px) auto;
    justify-content: start;
}

.master-crud-page.vehicle-generation-page .vehicle-generation-filter .role-permission-search-field,
.master-crud-page.vehicle-sub-model-page .vehicle-sub-model-filter .role-permission-search-field {
    max-width: 320px;
}

.master-crud-page.vehicle-generation-page .vehicle-generation-filter .role-permission-status-field,
.master-crud-page.vehicle-sub-model-page .vehicle-sub-model-filter .role-permission-status-field {
    max-width: none;
}

@media (max-width: 1200px) {
    .master-crud-page.vehicle-generation-page .vehicle-generation-filter,
    .master-crud-page.vehicle-sub-model-page .vehicle-sub-model-filter {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto;
    }

    .master-crud-page.vehicle-generation-page .vehicle-generation-filter .role-permission-search-field,
    .master-crud-page.vehicle-sub-model-page .vehicle-sub-model-filter .role-permission-search-field {
        grid-column: 1 / -1;
    }

    .master-crud-page.vehicle-generation-page .vehicle-generation-filter .filter-actions.compact,
    .master-crud-page.vehicle-sub-model-page .vehicle-sub-model-filter .filter-actions.compact {
        justify-content: flex-end;
    }
}

@media (max-width: 768px) {
    .master-crud-page.vehicle-generation-page .vehicle-generation-filter,
    .master-crud-page.vehicle-sub-model-page .vehicle-sub-model-filter {
        grid-template-columns: 1fr;
    }
}

/* CRM: CustomerLead / CustomerFollowUp / TestDriveAppointment */

.master-crud-page.customer-lead-page .role-permission-filter.customer-lead-filter {
    grid-template-columns: auto minmax(180px, 220px) auto;
    justify-content: start;
}

.master-crud-page.customer-lead-page .role-permission-filter.customer-lead-filter .role-permission-search-field {
    max-width: 280px;
}

.master-crud-page.customer-lead-page .role-permission-filter.customer-lead-filter .crm-employee-filter-field,
.master-crud-page.customer-follow-up-page .role-permission-filter.customer-follow-up-filter .crm-employee-filter-field,
.master-crud-page.test-drive-appointment-page .role-permission-filter.test-drive-appointment-filter .crm-employee-filter-field {
    min-width: 180px;
}

.master-crud-page.customer-lead-page .role-permission-filter.customer-lead-filter .crm-employee-filter-field .select2-container,
.master-crud-page.customer-follow-up-page .role-permission-filter.customer-follow-up-filter .crm-employee-filter-field .select2-container,
.master-crud-page.test-drive-appointment-page .role-permission-filter.test-drive-appointment-filter .crm-employee-filter-field .select2-container {
    width: 100% !important;
}

@media (max-width: 1400px) {
    .master-crud-page.customer-lead-page .role-permission-filter.customer-lead-filter {
        grid-template-columns: auto minmax(180px, 220px) auto;
    }

    .master-crud-page.customer-lead-page .role-permission-filter.customer-lead-filter .role-permission-search-field {
        max-width: 280px;
    }
}

@media (max-width: 768px) {
    .master-crud-page.customer-lead-page .role-permission-filter.customer-lead-filter {
        grid-template-columns: 1fr;
    }

    .master-crud-page.customer-lead-page .role-permission-filter.customer-lead-filter .role-permission-search-field {
        max-width: none;
    }
}

.master-crud-page.customer-follow-up-page .role-permission-filter.customer-follow-up-filter {
    grid-template-columns: auto auto auto minmax(180px, 220px) auto;
    justify-content: start;
}

.master-crud-page.customer-follow-up-page .role-permission-filter.customer-follow-up-filter .role-permission-search-field {
    max-width: 240px;
}

@media (max-width: 1400px) {
    .master-crud-page.customer-follow-up-page .role-permission-filter.customer-follow-up-filter {
        grid-template-columns: auto auto auto minmax(180px, 220px) auto;
    }

    .master-crud-page.customer-follow-up-page .role-permission-filter.customer-follow-up-filter .role-permission-search-field {
        max-width: 240px;
    }
}

@media (max-width: 768px) {
    .master-crud-page.customer-follow-up-page .role-permission-filter.customer-follow-up-filter {
        grid-template-columns: 1fr;
    }

    .master-crud-page.customer-follow-up-page .role-permission-filter.customer-follow-up-filter .role-permission-search-field {
        max-width: none;
    }
}

.customer-follow-up-tab-count {
    display: inline-block;
    min-width: 20px;
    padding: 1px 6px;
    margin-left: 4px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.08);
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}

.customer-follow-up-overdue-text {
    color: #c0392b;
    font-weight: 600;
}

.master-crud-page.test-drive-appointment-page .role-permission-filter.test-drive-appointment-filter {
    grid-template-columns: auto auto auto minmax(180px, 220px) auto;
    justify-content: start;
}

.master-crud-page.test-drive-appointment-page .role-permission-filter.test-drive-appointment-filter .role-permission-search-field {
    max-width: 260px;
}

@media (max-width: 1400px) {
    .master-crud-page.test-drive-appointment-page .role-permission-filter.test-drive-appointment-filter {
        grid-template-columns: auto auto auto minmax(180px, 220px) auto;
    }

    .master-crud-page.test-drive-appointment-page .role-permission-filter.test-drive-appointment-filter .role-permission-search-field {
        max-width: 260px;
    }
}

@media (max-width: 768px) {
    .master-crud-page.test-drive-appointment-page .role-permission-filter.test-drive-appointment-filter {
        grid-template-columns: 1fr;
    }

    .master-crud-page.test-drive-appointment-page .role-permission-filter.test-drive-appointment-filter .role-permission-search-field {
        max-width: none;
    }
}

/* Purchase Appraisal */

.purchase-appraisal-page .purchase-appraisal-filter {
    grid-template-columns: auto auto auto auto auto;
    justify-content: start;
    width: auto;
    max-width: 100%;
}

.ar-ap-netting-page .ar-ap-netting-filter {
    grid-template-columns: auto auto auto auto auto;
    justify-content: start;
    width: auto;
    max-width: 100%;
}

#arApNettingEditorModal .ar-ap-netting-select-col {
    width: 56px;
    text-align: center;
}

#arApNettingEditorModal .ar-ap-netting-lines-table-wrap {
    overflow-x: auto;
}

#arApNettingEditorModal .ar-ap-netting-summary-bar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

#arApNettingEditorModal .ar-ap-netting-summary-bar .amount-input {
    text-align: right;
}

.purchase-receive-page .purchase-receive-filter {
    grid-template-columns: auto auto auto auto auto;
    justify-content: start;
    width: auto;
    max-width: 100%;
}

.purchase-appraisal-page .purchase-appraisal-date-field {
    width: 150px;
    max-width: 150px;
}

.purchase-appraisal-page .purchase-appraisal-search-field {
    width: 300px;
    max-width: 300px;
}

.purchase-appraisal-page .purchase-appraisal-status-field {
    width: 180px;
    max-width: 180px;
}

.direct-finance-contract-page .direct-finance-contract-filter {
    grid-template-columns: auto auto auto auto auto;
}

.direct-finance-overdue-page .direct-finance-overdue-filter {
    grid-template-columns: auto auto auto auto auto auto;
}

.vehicle-stock-report-page .vehicle-stock-report-filter {
    grid-template-columns: auto auto auto auto auto;
    justify-content: start;
    width: auto;
}

.vehicle-stock-report-page .vehicle-stock-report-keyword-field {
    width: 300px;
    max-width: 300px;
}

.vehicle-stock-report-page .vehicle-stock-report-filter .ap-payment-status-field,
.vehicle-stock-report-page .vehicle-stock-report-filter .purchase-appraisal-status-field {
    width: 180px;
    max-width: 180px;
}

.vehicle-stock-report-page .vsr-stock-no-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.25;
}

.vehicle-stock-report-page .vsr-stock-in-date {
    color: var(--muted, #667085);
    font-size: 0.82rem;
}

.vehicle-stock-report-page .role-permission-seq-col {
    text-align: center;
    white-space: nowrap;
}

.vehicle-stock-report-page #vehicleStockReportTable th.amount,
.vehicle-stock-report-page #vehicleStockReportTable td.amount {
    text-align: right !important;
}

.profit-report-page .pr-sale-no-cell,
.profit-report-page .pr-vehicle-cell,
.commission-report-page .cr-commission-no-cell,
.commission-report-page .cr-sale-vehicle-cell,
.commission-report-page .cr-calc-cell,
.tax-report-page .txr-tax-doc-cell,
.tax-report-page .txr-source-cell,
.tax-report-page .txr-party-cell,
.bank-report-page .br-recon-no-cell,
.ar-report-page .arr-doc-cell,
.ap-report-page .apr-doc-cell,
.purchase-expense-report-page .per-po-cell,
.purchase-expense-report-page .per-doc-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.25;
}

.profit-report-page .pr-secondary,
.commission-report-page .cr-secondary,
.tax-report-page .txr-secondary,
.bank-report-page .br-secondary,
.ar-report-page .arr-secondary,
.ap-report-page .apr-secondary,
.purchase-expense-report-page .per-secondary {
    color: var(--muted, #667085);
    font-size: 0.82rem;
}

.profit-report-page #profitReportTable th.amount,
.profit-report-page #profitReportTable td.amount,
.commission-report-page #commissionReportTable th.amount,
.commission-report-page #commissionReportTable td.amount,
.tax-report-page #taxReportTable th.amount,
.tax-report-page #taxReportTable td.amount,
.bank-report-page #bankReportTable th.amount,
.bank-report-page #bankReportTable td.amount,
.ar-report-page #arReportTable th.amount,
.ar-report-page #arReportTable td.amount,
.ap-report-page #apReportTable th.amount,
.ap-report-page #apReportTable td.amount,
.purchase-expense-report-page #purchaseExpenseReportTable th.amount,
.purchase-expense-report-page #purchaseExpenseReportTable td.amount,
.receipt-payment-report-page #receiptPaymentReportTable th.amount,
.receipt-payment-report-page #receiptPaymentReportTable td.amount,
.cash-flow-report-page #cashFlowReportTable th.amount,
.cash-flow-report-page #cashFlowReportTable td.amount {
    text-align: right !important;
}

.sales-report-page .sales-report-filter,
.finance-report-page .finance-report-filter,
.direct-finance-report-page .direct-finance-report-filter,
.vehicle-purchase-report-page .vehicle-purchase-report-filter {
    grid-template-columns: auto auto auto auto auto auto;
    justify-content: start;
    width: auto;
}

.lead-pipeline-report-page .lead-pipeline-report-filter {
    grid-template-columns: auto auto auto auto auto auto auto;
    justify-content: start;
    width: auto;
}

.profit-report-page .profit-report-filter {
    grid-template-columns: auto auto auto auto auto;
    justify-content: start;
    width: auto;
    flex-wrap: wrap;
}

.commission-report-page .commission-report-filter {
    grid-template-columns: auto auto auto auto auto;
    justify-content: start;
    width: auto;
    flex-wrap: wrap;
}

.cash-flow-report-page .cash-flow-report-filter {
    grid-template-columns: auto auto auto auto;
    justify-content: start;
    width: auto;
    flex-wrap: wrap;
}

.receipt-payment-report-page .receipt-payment-report-filter {
    grid-template-columns: auto auto auto auto auto auto;
    justify-content: start;
    width: auto;
    flex-wrap: wrap;
}

.bank-report-page .bank-report-filter {
    grid-template-columns: auto auto auto auto auto;
    justify-content: start;
    width: auto;
    flex-wrap: wrap;
}

.ar-report-page .ar-report-filter {
    grid-template-columns: auto auto auto auto;
    justify-content: start;
    width: auto;
    flex-wrap: wrap;
}

.ap-report-page .ap-report-filter {
    grid-template-columns: auto auto auto auto auto;
    justify-content: start;
    width: auto;
    flex-wrap: wrap;
}

.purchase-expense-report-page .purchase-expense-report-filter {
    grid-template-columns: auto auto auto auto auto auto;
    justify-content: start;
    width: auto;
    flex-wrap: wrap;
}

.tax-report-page .tax-report-filter {
    grid-template-columns: auto auto auto auto auto;
    justify-content: start;
    width: auto;
    flex-wrap: wrap;
}

.journal-report-page .journal-report-filter {
    grid-template-columns: auto auto auto auto auto auto auto auto auto;
    justify-content: start;
    width: auto;
    flex-wrap: wrap;
}

.general-ledger-report-page .general-ledger-report-filter {
    grid-template-columns: auto auto auto auto auto auto auto auto auto;
    justify-content: start;
    width: auto;
    flex-wrap: wrap;
}

.trial-balance-report-page .trial-balance-report-filter {
    grid-template-columns: auto auto auto auto auto auto auto auto;
    justify-content: start;
    width: auto;
    flex-wrap: wrap;
}

.financial-statement-report-page .financial-statement-report-filter {
    grid-template-columns: auto auto auto auto auto auto auto auto;
    justify-content: start;
    width: auto;
    flex-wrap: wrap;
}

.fixed-asset-depreciation-report-page .fixed-asset-depreciation-report-filter {
    grid-template-columns: auto auto auto auto auto auto auto auto auto auto;
    justify-content: start;
    width: auto;
    flex-wrap: wrap;
}

.fixed-asset-depreciation-report-page .fad-primary {
    font-weight: 600;
}

.fixed-asset-depreciation-report-page .fad-secondary {
    color: #64748b;
    font-size: 0.875rem;
}

.financial-statement-report-page .financial-statement-report-validation {
    margin: 0 0 12px;
    color: #64748b;
    font-size: 0.875rem;
}

.financial-statement-report-page .financial-statement-section-head td,
.financial-statement-report-page .financial-statement-section-total td,
.financial-statement-report-page .financial-statement-summary-row td,
.financial-statement-report-page .financial-statement-net-row td {
    background: #f8fafc;
}

.financial-statement-report-page .financial-statement-derived-row td {
    font-style: italic;
}

.sales-report-page .sales-report-keyword-field,
.finance-report-page .finance-report-keyword-field,
.direct-finance-report-page .direct-finance-report-keyword-field,
.vehicle-purchase-report-page .vehicle-purchase-report-keyword-field,
.lead-pipeline-report-page .lead-pipeline-report-keyword-field,
.profit-report-page .profit-report-keyword-field,
.commission-report-page .commission-report-keyword-field,
.receipt-payment-report-page .receipt-payment-report-keyword-field,
.bank-report-page .bank-report-keyword-field,
.ar-report-page .ar-report-keyword-field,
.ap-report-page .ap-report-keyword-field,
.purchase-expense-report-page .purchase-expense-report-keyword-field,
.tax-report-page .tax-report-keyword-field,
.journal-report-page .journal-report-keyword-field,
.general-ledger-report-page .general-ledger-report-keyword-field,
.fixed-asset-depreciation-report-page .fixed-asset-depreciation-report-keyword-field {
    width: 300px;
    max-width: 300px;
}

.sales-report-page .sales-report-filter .ap-payment-date-field,
.sales-report-page .sales-report-filter .purchase-appraisal-date-field,
.finance-report-page .finance-report-filter .ap-payment-date-field,
.finance-report-page .finance-report-filter .purchase-appraisal-date-field,
.direct-finance-report-page .direct-finance-report-filter .ap-payment-date-field,
.direct-finance-report-page .direct-finance-report-filter .purchase-appraisal-date-field,
.vehicle-purchase-report-page .vehicle-purchase-report-filter .ap-payment-date-field,
.vehicle-purchase-report-page .vehicle-purchase-report-filter .purchase-appraisal-date-field,
.lead-pipeline-report-page .lead-pipeline-report-filter .ap-payment-date-field,
.lead-pipeline-report-page .lead-pipeline-report-filter .purchase-appraisal-date-field,
.profit-report-page .profit-report-filter .ap-payment-date-field,
.profit-report-page .profit-report-filter .purchase-appraisal-date-field,
.commission-report-page .commission-report-filter .ap-payment-date-field,
.commission-report-page .commission-report-filter .purchase-appraisal-date-field,
.cash-flow-report-page .cash-flow-report-filter .ap-payment-date-field,
.cash-flow-report-page .cash-flow-report-filter .purchase-appraisal-date-field,
.receipt-payment-report-page .receipt-payment-report-filter .ap-payment-date-field,
.receipt-payment-report-page .receipt-payment-report-filter .purchase-appraisal-date-field,
.bank-report-page .bank-report-filter .ap-payment-date-field,
.bank-report-page .bank-report-filter .purchase-appraisal-date-field,
.ar-report-page .ar-report-filter .ap-payment-date-field,
.ar-report-page .ar-report-filter .purchase-appraisal-date-field,
.ap-report-page .ap-report-filter .ap-payment-date-field,
.ap-report-page .ap-report-filter .purchase-appraisal-date-field,
.purchase-expense-report-page .purchase-expense-report-filter .ap-payment-date-field,
.purchase-expense-report-page .purchase-expense-report-filter .purchase-appraisal-date-field,
.tax-report-page .tax-report-filter .ap-payment-date-field,
.tax-report-page .tax-report-filter .purchase-appraisal-date-field,
.journal-report-page .journal-report-filter .ap-payment-date-field,
.journal-report-page .journal-report-filter .purchase-appraisal-date-field,
.general-ledger-report-page .general-ledger-report-filter .ap-payment-date-field,
.general-ledger-report-page .general-ledger-report-filter .purchase-appraisal-date-field,
.trial-balance-report-page .trial-balance-report-filter .ap-payment-date-field,
.trial-balance-report-page .trial-balance-report-filter .purchase-appraisal-date-field,
.financial-statement-report-page .financial-statement-report-filter .ap-payment-date-field,
.financial-statement-report-page .financial-statement-report-filter .purchase-appraisal-date-field,
.fixed-asset-depreciation-report-page .fixed-asset-depreciation-report-filter .ap-payment-date-field,
.fixed-asset-depreciation-report-page .fixed-asset-depreciation-report-filter .purchase-appraisal-date-field {
    width: 150px;
    max-width: 150px;
}

.sales-report-page .sales-report-filter .ap-payment-status-field,
.sales-report-page .sales-report-filter .purchase-appraisal-status-field,
.finance-report-page .finance-report-filter .ap-payment-status-field,
.finance-report-page .finance-report-filter .purchase-appraisal-status-field,
.direct-finance-report-page .direct-finance-report-filter .ap-payment-status-field,
.direct-finance-report-page .direct-finance-report-filter .purchase-appraisal-status-field,
.vehicle-purchase-report-page .vehicle-purchase-report-filter .ap-payment-status-field,
.vehicle-purchase-report-page .vehicle-purchase-report-filter .purchase-appraisal-status-field,
.lead-pipeline-report-page .lead-pipeline-report-filter .ap-payment-status-field,
.lead-pipeline-report-page .lead-pipeline-report-filter .purchase-appraisal-status-field,
.profit-report-page .profit-report-filter .ap-payment-status-field,
.profit-report-page .profit-report-filter .purchase-appraisal-status-field,
.commission-report-page .commission-report-filter .ap-payment-status-field,
.commission-report-page .commission-report-filter .purchase-appraisal-status-field,
.cash-flow-report-page .cash-flow-report-filter .ap-payment-status-field,
.cash-flow-report-page .cash-flow-report-filter .purchase-appraisal-status-field,
.receipt-payment-report-page .receipt-payment-report-filter .ap-payment-status-field,
.receipt-payment-report-page .receipt-payment-report-filter .purchase-appraisal-status-field,
.bank-report-page .bank-report-filter .ap-payment-status-field,
.bank-report-page .bank-report-filter .purchase-appraisal-status-field,
.ar-report-page .ar-report-filter .ap-payment-status-field,
.ar-report-page .ar-report-filter .purchase-appraisal-status-field,
.ap-report-page .ap-report-filter .ap-payment-status-field,
.ap-report-page .ap-report-filter .purchase-appraisal-status-field,
.purchase-expense-report-page .purchase-expense-report-filter .ap-payment-status-field,
.purchase-expense-report-page .purchase-expense-report-filter .purchase-appraisal-status-field,
.tax-report-page .tax-report-filter .ap-payment-status-field,
.tax-report-page .tax-report-filter .purchase-appraisal-status-field,
.journal-report-page .journal-report-filter .ap-payment-status-field,
.journal-report-page .journal-report-filter .purchase-appraisal-status-field,
.general-ledger-report-page .general-ledger-report-filter .ap-payment-status-field,
.general-ledger-report-page .general-ledger-report-filter .purchase-appraisal-status-field,
.trial-balance-report-page .trial-balance-report-filter .ap-payment-status-field,
.trial-balance-report-page .trial-balance-report-filter .purchase-appraisal-status-field,
.financial-statement-report-page .financial-statement-report-filter .ap-payment-status-field,
.financial-statement-report-page .financial-statement-report-filter .purchase-appraisal-status-field,
.fixed-asset-depreciation-report-page .fixed-asset-depreciation-report-filter .ap-payment-status-field,
.fixed-asset-depreciation-report-page .fixed-asset-depreciation-report-filter .purchase-appraisal-status-field {
    width: 180px;
    max-width: 180px;
}

.lead-pipeline-report-page .lead-pipeline-report-channel-field,
.lead-pipeline-report-page .lead-pipeline-report-owner-field {
    width: 200px;
    max-width: 200px;
}

.sales-report-page .role-permission-seq-col,
.finance-report-page .role-permission-seq-col,
.direct-finance-report-page .role-permission-seq-col,
.vehicle-purchase-report-page .role-permission-seq-col,
.lead-pipeline-report-page .role-permission-seq-col,
.profit-report-page .role-permission-seq-col,
.commission-report-page .role-permission-seq-col,
.cash-flow-report-page .role-permission-seq-col,
.receipt-payment-report-page .role-permission-seq-col,
.bank-report-page .role-permission-seq-col {
    text-align: center;
    white-space: nowrap;
}

.journal-report-page .select2-container,
.general-ledger-report-page .select2-container,
.trial-balance-report-page .select2-container {
    width: 100% !important;
}

.journal-report-page .select2-dropdown,
.general-ledger-report-page .select2-dropdown,
.trial-balance-report-page .select2-dropdown {
    z-index: 2000;
}

.journal-report-page .role-permission-seq-col,
.general-ledger-report-page .role-permission-seq-col,
.trial-balance-report-page .role-permission-seq-col {
    text-align: center;
    white-space: nowrap;
}

.journal-report-page #journalReportTable th.amount,
.journal-report-page #journalReportTable td.amount,
.general-ledger-report-page #generalLedgerReportTable th.amount,
.general-ledger-report-page #generalLedgerReportTable td.amount,
.trial-balance-report-page #trialBalanceReportTable th.amount,
.trial-balance-report-page #trialBalanceReportTable td.amount {
    text-align: right !important;
}

.journal-report-page #journalReportTableFoot td,
.trial-balance-report-page #trialBalanceReportTableFoot td {
    border-top: 1px solid var(--line, #e4e7ec);
    padding-top: 8px;
    font-size: 0.9rem;
}

.general-ledger-report-page .report-row-bold {
    font-weight: 700;
}

.sales-report-page #salesReportTable th.amount,
.sales-report-page #salesReportTable td.amount,
.finance-report-page #financeReportTable th.amount,
.finance-report-page #financeReportTable td.amount,
.direct-finance-report-page #directFinanceReportTable th.amount,
.direct-finance-report-page #directFinanceReportTable td.amount,
.vehicle-purchase-report-page #vehiclePurchaseReportTable th.amount,
.vehicle-purchase-report-page #vehiclePurchaseReportTable td.amount {
    text-align: right !important;
}

.sales-report-page .sr-sale-no-cell,
.finance-report-page .fr-case-no-cell,
.direct-finance-report-page .dfr-contract-no-cell,
.vehicle-purchase-report-page .vpr-doc-no-cell,
.lead-pipeline-report-page .lpr-date-cell,
.lead-pipeline-report-page .lpr-customer-cell,
.lead-pipeline-report-page .lpr-vehicle-cell,
.lead-pipeline-report-page .lpr-activity-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.25;
}

.sales-report-page .sr-transaction-date,
.finance-report-page .fr-sent-at,
.finance-report-page .fr-follow-up-summary,
.direct-finance-report-page .dfr-contract-date,
.direct-finance-report-page .dfr-installment-count,
.direct-finance-report-page .dfr-overdue-note,
.vehicle-purchase-report-page .vpr-secondary,
.lead-pipeline-report-page .lpr-secondary {
    color: var(--muted, #667085);
    font-size: 0.82rem;
}

.sales-report-page .sr-reservation-note,
.vehicle-purchase-report-page .vpr-suggested-note {
    color: var(--muted, #667085);
    font-size: 0.78rem;
}

.direct-finance-closing-page .direct-finance-closing-filter {
    grid-template-columns: auto auto auto auto auto auto auto;
}

.direct-finance-overdue-page .ap-payment-date-field,
.direct-finance-overdue-page .purchase-appraisal-date-field,
.direct-finance-closing-page .ap-payment-date-field,
.direct-finance-closing-page .purchase-appraisal-date-field {
    width: 150px;
    max-width: 150px;
}

.direct-finance-overdue-page .ap-payment-search-field,
.direct-finance-overdue-page .purchase-appraisal-search-field,
.direct-finance-closing-page .ap-payment-search-field,
.direct-finance-closing-page .purchase-appraisal-search-field {
    width: 300px;
    max-width: 300px;
}

.direct-finance-overdue-page .ap-payment-status-field,
.direct-finance-overdue-page .purchase-appraisal-status-field,
.direct-finance-closing-page .ap-payment-status-field,
.direct-finance-closing-page .purchase-appraisal-status-field {
    width: 180px;
    max-width: 180px;
}

.direct-finance-payment-page .direct-finance-payment-filter {
    grid-template-columns: auto auto auto auto auto;
}

.direct-finance-payment-page .ap-payment-date-field,
.direct-finance-payment-page .purchase-appraisal-date-field {
    width: 150px;
    max-width: 150px;
}

.direct-finance-payment-page .ap-payment-search-field,
.direct-finance-payment-page .purchase-appraisal-search-field {
    width: 300px;
    max-width: 300px;
}

.direct-finance-payment-page .ap-payment-status-field,
.direct-finance-payment-page .purchase-appraisal-status-field {
    width: 180px;
    max-width: 180px;
}

.direct-finance-contract-page .ap-payment-date-field,
.direct-finance-contract-page .purchase-appraisal-date-field {
    width: 150px;
    max-width: 150px;
}

.direct-finance-contract-page .ap-payment-search-field,
.direct-finance-contract-page .purchase-appraisal-search-field {
    width: 300px;
    max-width: 300px;
}

.direct-finance-contract-page .ap-payment-status-field,
.direct-finance-contract-page .purchase-appraisal-status-field {
    width: 180px;
    max-width: 180px;
}

/* Journal Entry — วันที่จาก/ถึง + เลขสมุด + เลขอ้างอิง + ประเภท + ค้นหา = 6 คอลัมน์ */
.journal-entry-page .journal-entry-filter.purchase-appraisal-filter {
    grid-template-columns: auto auto auto auto auto auto;
    justify-content: start;
    width: auto;
    max-width: 100%;
    align-items: end;
}

.account-period-page .account-period-filter.purchase-appraisal-filter {
    grid-template-columns: auto auto auto;
    justify-content: start;
    width: auto;
    max-width: 100%;
    align-items: end;
}

.account-period-page .account-period-filter .account-period-year-field {
    width: 260px;
    max-width: 260px;
}

.account-period-page .account-period-filter > .field {
    overflow: visible;
}

.account-period-page .account-period-filter .select2-container {
    width: 100% !important;
}

#accountPeriodFiscalYearModal .account-period-fy-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

#accountPeriodFiscalYearModal .account-period-fy-dialog {
    max-width: 560px;
    width: calc(100% - 32px);
}

#accountPeriodHistoryModal .account-period-history-dialog {
    max-width: 820px;
}

#accountPeriodCloseModal .account-period-action-grid,
#accountPeriodReopenModal .account-period-action-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

#accountPeriodCloseModal .account-period-action-grid .pa-span-full,
#accountPeriodReopenModal .account-period-action-grid .pa-span-full {
    grid-column: 1 / -1;
}

.account-period-preview-wrap {
    margin-top: 12px;
}

.account-period-preview-title {
    margin: 0 0 8px;
    font-size: 0.95rem;
    font-weight: 600;
}

#accountPeriodFiscalYearModal .account-period-preview-table-wrap {
    overflow: visible;
    border: 1px solid var(--line, #d7dee8);
    border-radius: 8px;
}

#accountPeriodFiscalYearModal .account-period-preview-table {
    width: 100%;
    min-width: 0 !important;
    max-width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

#accountPeriodFiscalYearModal .account-period-preview-table th,
#accountPeriodFiscalYearModal .account-period-preview-table td {
    padding: 8px 8px;
    border-bottom: 1px solid var(--line, #e6ebf2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.9rem;
}

#accountPeriodFiscalYearModal .account-period-preview-table thead th {
    background: #f5f7fb;
    font-weight: 600;
}

#accountPeriodFiscalYearModal .account-period-preview-table tbody tr:last-child td {
    border-bottom: none;
}

#accountPeriodFiscalYearModal .account-period-preview-table th:nth-child(1),
#accountPeriodFiscalYearModal .account-period-preview-table td:nth-child(1) {
    width: 52px;
    text-align: center;
}

#accountPeriodFiscalYearModal .account-period-preview-table th:nth-child(2),
#accountPeriodFiscalYearModal .account-period-preview-table td:nth-child(2) {
    width: auto;
}

#accountPeriodFiscalYearModal .account-period-preview-table th:nth-child(3),
#accountPeriodFiscalYearModal .account-period-preview-table td:nth-child(3),
#accountPeriodFiscalYearModal .account-period-preview-table th:nth-child(4),
#accountPeriodFiscalYearModal .account-period-preview-table td:nth-child(4) {
    width: 108px;
}

.account-period-preview-status-cell {
    text-align: center;
    padding: 18px 12px;
    color: var(--muted, #5f6b7a);
}

.account-period-preview-loading {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.account-period-preview-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid #c5cdd8;
    border-top-color: var(--primary, #2f6fed);
    border-radius: 50%;
    animation: account-period-spin 0.7s linear infinite;
}

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

#accountPeriodFiscalYearSaveBtn:disabled,
#accountPeriodFiscalYearSaveBtn.is-disabled,
#accountPeriodFiscalYearSaveBtn[aria-disabled="true"] {
    opacity: 0.45 !important;
    filter: grayscale(0.4);
    cursor: not-allowed !important;
    pointer-events: none;
    box-shadow: none !important;
}


.journal-entry-page .journal-entry-filter .purchase-appraisal-search-field {
    width: 220px;
    max-width: 220px;
}

.journal-entry-page .journal-entry-filter .journal-entry-source-type-field {
    width: 220px;
    max-width: 220px;
}

.journal-entry-page .journal-entry-filter > .field {
    overflow: visible;
}

.journal-entry-page .journal-entry-filter .select2-container {
    width: 100% !important;
}

@media (max-width: 1200px) {
    .purchase-appraisal-page .purchase-appraisal-filter {
        grid-template-columns: auto auto auto auto;
    }

    .vehicle-stock-report-page .vehicle-stock-report-filter {
        grid-template-columns: auto auto auto auto auto;
    }

    .purchase-appraisal-page .purchase-appraisal-search-field {
        grid-column: auto;
    }

    .purchase-appraisal-page .purchase-appraisal-filter .filter-actions.compact {
        grid-column: auto;
        justify-content: flex-start;
    }

    .journal-entry-page .journal-entry-filter.purchase-appraisal-filter {
        grid-template-columns: auto auto auto auto;
    }

    .account-period-page .account-period-filter.purchase-appraisal-filter {
        grid-template-columns: auto auto auto;
    }
}

@media (max-width: 768px) {
    .purchase-appraisal-page .purchase-appraisal-filter {
        grid-template-columns: 1fr !important;
        width: 100%;
        max-width: 100%;
        justify-content: stretch;
    }

    .purchase-appraisal-page .purchase-appraisal-date-field,
    .purchase-appraisal-page .purchase-appraisal-search-field,
    .purchase-appraisal-page .purchase-appraisal-status-field,
    .purchase-appraisal-page .ap-payment-date-field,
    .purchase-appraisal-page .ap-payment-search-field,
    .purchase-appraisal-page .ap-payment-status-field,
    .purchase-appraisal-page .reservation-search-field {
        width: 100% !important;
        max-width: none !important;
    }

    .purchase-appraisal-page .purchase-appraisal-filter .filter-actions.compact {
        grid-column: 1 / -1;
        width: 100%;
        justify-content: stretch;
    }

    .purchase-appraisal-page .purchase-appraisal-filter .filter-actions.compact .btn {
        width: 100%;
    }

    .purchase-appraisal-page .table-head-actions,
    .reservation-page .table-head-actions,
    .role-permission-page .table-head-actions {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
        justify-content: stretch;
    }

    .purchase-appraisal-page .table-head-actions .btn,
    .reservation-page .table-head-actions .btn,
    .role-permission-page .table-head-actions .btn {
        width: 100%;
    }
}

/* Account Payable — filter row matches VehiclePurchase + extra source-type column */

.account-payable-page .account-payable-filter.purchase-appraisal-filter,
.account-receivable-page .account-receivable-filter.purchase-appraisal-filter {
    grid-template-columns: auto auto auto auto auto auto;
}

/* Account Payable / Account Receivable — detail modal (read-only display fields) */
#accountPayableDetailModal .account-payable-detail-body .purchase-appraisal-form-page,
#accountReceivableDetailModal .account-receivable-detail-body .purchase-appraisal-form-page {
    gap: 12px;
}

#accountPayableDetailModal .account-payable-detail-card .pa-card-head,
#accountReceivableDetailModal .account-receivable-detail-card .pa-card-head {
    padding: 10px 14px 0;
}

#accountPayableDetailModal .account-payable-detail-card .pa-card-body,
#accountReceivableDetailModal .account-receivable-detail-card .pa-card-body {
    padding: 10px 14px 12px;
}

#accountPayableDetailModal .account-payable-detail-grid,
#accountReceivableDetailModal .account-receivable-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 16px;
}

#accountPayableDetailModal .account-payable-detail-amounts,
#accountReceivableDetailModal .account-receivable-detail-amounts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 16px;
}

#accountPayableDetailModal .account-payable-detail-field,
#accountReceivableDetailModal .account-receivable-detail-field {
    display: grid;
    gap: 4px;
    min-width: 0;
}

#accountPayableDetailModal .account-payable-detail-label,
#accountReceivableDetailModal .account-receivable-detail-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted, #667085);
    line-height: 1.3;
}


#accountPayableDetailModal .account-payable-detail-value,
#accountReceivableDetailModal .account-receivable-detail-value {
    display: block;
    font-size: 14px;
    font-weight: 650;
    color: var(--text, #1f2937);
    line-height: 1.4;
    word-break: break-word;
}

#accountPayableDetailModal .account-payable-detail-amount-field .account-payable-detail-value,
#accountReceivableDetailModal .account-receivable-detail-amount-field .account-receivable-detail-value {
    font-variant-numeric: tabular-nums;
    text-align: left;
}

/* Detail tables: one alignment rule per column type — header matches body */
#accountPayableDetailModal .account-payable-detail-table {
    width: 100%;
    table-layout: fixed;
}

#accountPayableDetailModal .account-payable-detail-table th,
#accountPayableDetailModal .account-payable-detail-table td {
    text-align: left;
    vertical-align: middle;
}

#accountPayableDetailModal .account-payable-detail-table th.amount,
#accountPayableDetailModal .account-payable-detail-table td.amount {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

#accountPayableDetailModal .account-payable-detail-table th.col-center,
#accountPayableDetailModal .account-payable-detail-table td.col-center,
#accountPayableDetailModal .account-payable-detail-table th.col-status,
#accountPayableDetailModal .account-payable-detail-table td.col-status {
    text-align: center;
}

#accountPayableDetailModal .account-payable-detail-table td.col-empty {
    text-align: center;
    color: var(--muted, #667085);
    font-weight: 650;
}

#accountPayableDetailModal #accountPayableDetailLinesTable th:nth-child(1),
#accountPayableDetailModal #accountPayableDetailLinesTable td:nth-child(1) {
    width: 4.5rem;
    text-align: center;
}

#accountPayableDetailModal #accountPayableDetailLinesTable th:nth-child(2),
#accountPayableDetailModal #accountPayableDetailLinesTable td:nth-child(2) {
    width: auto;
}

#accountPayableDetailModal #accountPayableDetailLinesTable th.amount,
#accountPayableDetailModal #accountPayableDetailLinesTable td.amount {
    width: 7.5rem;
}

#accountPayableDetailModal #accountPayableDetailLinesTable th:nth-child(6),
#accountPayableDetailModal #accountPayableDetailLinesTable td:nth-child(6) {
    width: 7.5rem;
    text-align: center;
}

#accountPayableDetailModal #accountPayableDetailAdjustmentsTable th:nth-child(1),
#accountPayableDetailModal #accountPayableDetailAdjustmentsTable td:nth-child(1) {
    width: 6.5rem;
}

#accountPayableDetailModal #accountPayableDetailAdjustmentsTable th:nth-child(3),
#accountPayableDetailModal #accountPayableDetailAdjustmentsTable td:nth-child(3) {
    width: 8rem;
}

#accountPayableDetailModal #accountPayableDetailAdjustmentsTable th:nth-child(4),
#accountPayableDetailModal #accountPayableDetailAdjustmentsTable td:nth-child(4) {
    width: 6.5rem;
}

#accountPayableDetailModal #accountPayableDetailAdjustmentsTable th.amount,
#accountPayableDetailModal #accountPayableDetailAdjustmentsTable td.amount {
    width: 7.5rem;
}

@media (max-width: 768px) {
    #accountPayableDetailModal .account-payable-detail-grid,
    #accountPayableDetailModal .account-payable-detail-amounts,
    #accountReceivableDetailModal .account-receivable-detail-grid,
    #accountReceivableDetailModal .account-receivable-detail-amounts {
        grid-template-columns: 1fr;
    }

    #accountPayableDetailModal .account-payable-detail-table {
        table-layout: auto;
    }
}

@media (max-width: 1200px) {
    .account-payable-page .account-payable-filter.purchase-appraisal-filter,
    .account-receivable-page .account-receivable-filter.purchase-appraisal-filter {
        grid-template-columns: auto auto auto auto;
    }

    .account-payable-page .account-payable-filter .filter-actions.compact,
    .account-receivable-page .account-receivable-filter .filter-actions.compact {
        grid-column: auto;
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    .account-payable-page .account-payable-filter.purchase-appraisal-filter,
    .account-receivable-page .account-receivable-filter.purchase-appraisal-filter,
    .wht-cert-page .wht-cert-filter.purchase-appraisal-filter,
    .bank-reconciliation-page .bank-reconcile-filter.purchase-appraisal-filter,
    .journal-entry-page .journal-entry-filter.purchase-appraisal-filter {
        grid-template-columns: 1fr !important;
        width: 100%;
    }

    .account-period-page .account-period-filter.purchase-appraisal-filter {
        grid-template-columns: 1fr !important;
        width: 100%;
    }
}

.status-draft {
    color: #5f6b7a;
    background: #eef1f5;
}

.status-appraised {
    color: var(--green);
    background: #e6f7ef;
}

.status-offered {
    color: var(--blue-700);
    background: var(--blue-100);
}

.status-accepted {
    color: var(--purple);
    background: #efedff;
}

.status-rejected {
    color: #b45309;
    background: #fff4e5;
}

.purchase-appraisal-form-page {
    display: flex;
    flex-direction: column;
    gap: 16px;
    border: none;
    box-shadow: none;
    background: transparent;
    padding: 0;
}

.purchase-appraisal-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #667085;
}

.purchase-appraisal-breadcrumb a {
    color: var(--blue-700);
    text-decoration: none;
    font-weight: 600;
}

.purchase-appraisal-breadcrumb a:hover {
    text-decoration: underline;
}

.purchase-appraisal-form-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid rgba(28, 77, 137, 0.08);
    box-shadow: 0 8px 24px rgba(38, 62, 105, 0.05);
}

.purchase-appraisal-form-header-main {
    min-width: 0;
}

.purchase-appraisal-form-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

.purchase-appraisal-form-date {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.purchase-appraisal-form-doc-no {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.purchase-appraisal-form-doc-no label,
.purchase-appraisal-form-date label {
    font-size: 12px;
    color: #667085;
    white-space: nowrap;
}

.purchase-appraisal-form-doc-no .ui-control,
.purchase-appraisal-form-date .ui-control {
    min-width: 140px;
}

.purchase-appraisal-form-doc-no .ui-control {
    min-width: 160px;
    max-width: 200px;
}

.purchase-appraisal-form-head-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.purchase-appraisal-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border-bottom: 1px solid rgba(28, 77, 137, 0.12);
    background: #fff;
    border-radius: 16px 16px 0 0;
    padding: 0 8px;
}

.purchase-appraisal-tab {
    appearance: none;
    border: none;
    background: transparent;
    color: #667085;
    font: inherit;
    font-weight: 600;
    font-size: 13px;
    padding: 14px 16px;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
}

.purchase-appraisal-tab:hover {
    color: var(--blue-700);
}

.purchase-appraisal-tab.is-active {
    color: var(--blue-700);
    border-bottom-color: var(--blue-700);
}

.purchase-appraisal-tab-panels {
    background: #fff;
    border: 1px solid rgba(28, 77, 137, 0.08);
    border-top: none;
    border-radius: 0 0 16px 16px;
    padding: 16px;
}

.purchase-appraisal-tab-panel {
    display: none;
}

.purchase-appraisal-tab-panel.is-active {
    display: block;
}

.purchase-appraisal-overview-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.85fr);
    gap: 16px;
    align-items: start;
}

.purchase-appraisal-overview-main {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pa-card {
    border: 1px solid rgba(28, 77, 137, 0.08);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(38, 62, 105, 0.04);
}

.pa-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px 0;
}

.pa-card-title {
    margin: 0;
    font-size: 15px;
    color: var(--blue-900);
}

.pa-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.pa-card-body {
    padding: 14px 16px 16px;
}

.pa-grid {
    display: grid;
    gap: 12px;
}

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

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

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

.pa-span-full {
    grid-column: 1 / -1;
}

.pa-span-2 {
    grid-column: span 2;
}

.pa-span-3 {
    grid-column: span 3;
}

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

.purchase-appraisal-overview-aside {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.vehicle-purchase-vehicle-overview {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 0.9fr);
    gap: 12px;
}

.vehicle-purchase-document-checklist-full {
    margin-bottom: 16px;
}

.vehicle-purchase-document-remark-field {
    margin-top: 4px;
}

.vehicle-purchase-source-option:has(input:checked) {
    border-color: var(--blue-700);
    background: #eff6ff;
}

.vehicle-purchase-intake-message {
    display: inline-flex;
    width: fit-content;
    margin: 0 0 8px;
}

.pa-radio-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
    min-height: 38px;
    align-items: center;
}

.purchase-appraisal-summary-bar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.purchase-appraisal-summary-item label {
    display: block;
    font-size: 12px;
    color: #667085;
    margin-bottom: 6px;
}

.purchase-appraisal-gallery {
    display: grid;
    gap: 12px;
}

.purchase-appraisal-gallery-main {
    position: relative;
    min-height: 280px;
    border-radius: 16px;
    overflow: hidden;
    background: #eef2f8;
    display: grid;
    place-items: center;
}

.purchase-appraisal-gallery-main img {
    width: 100%;
    height: 100%;
    min-height: 280px;
    object-fit: cover;
}

.purchase-appraisal-gallery-main img[hidden] {
    display: none;
}

.purchase-appraisal-gallery-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: #667085;
    text-align: center;
    padding: 24px;
}

.purchase-appraisal-gallery-placeholder svg {
    width: 40px;
    height: 40px;
    color: var(--blue-700);
}

.purchase-appraisal-gallery-placeholder[hidden] {
    display: none;
}

.purchase-appraisal-gallery-nav {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    pointer-events: none;
    z-index: 2;
}

.purchase-appraisal-gallery-nav button {
    pointer-events: auto;
}

.purchase-appraisal-gallery-nav .icon-btn svg {
    width: 18px;
    height: 18px;
}

.purchase-appraisal-gallery-delete-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
}

.purchase-appraisal-gallery-hint {
    margin: 0 0 10px;
    font-size: 12px;
    color: #667085;
}

.vehicle-stock-attachment-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vehicle-stock-attachment-empty {
    margin: 0;
    color: #667085;
    font-size: 13px;
}

.vehicle-stock-attachment-row {
    display: grid;
    grid-template-columns: minmax(180px, 1.2fr) minmax(220px, 1.4fr) auto;
    gap: 12px;
    align-items: end;
}

.vehicle-stock-attachment-file-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    width: 100%;
    min-width: 0;
}

.vehicle-stock-attachment-pick {
    width: 100%;
}

.vehicle-stock-attachment-file-display {
    flex: 1 1 auto;
    width: 0;
    min-width: 120px;
    color: #667085;
}

.vehicle-stock-attachment-file-display.has-file {
    color: #101828;
}

.vehicle-stock-attachment-filename {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    color: #344054;
    word-break: break-all;
}

.vehicle-stock-attachment-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 38px;
}

@media (max-width: 900px) {
    .vehicle-stock-attachment-row {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .vehicle-stock-attachment-actions {
        justify-content: flex-start;
    }
}

.purchase-appraisal-gallery-compact .purchase-appraisal-gallery-main {
    min-height: 220px;
}

.purchase-appraisal-gallery-compact .purchase-appraisal-gallery-main img {
    min-height: 220px;
}

.purchase-appraisal-gallery-count {
    position: absolute;
    right: 12px;
    bottom: 12px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 12px;
    z-index: 2;
}

.purchase-appraisal-gallery-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.purchase-appraisal-gallery-thumb {
    width: 72px;
    height: 54px;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    background: #eef2f8;
}

.purchase-appraisal-gallery-thumb.is-active {
    border-color: var(--blue-700);
}

.purchase-appraisal-gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.purchase-appraisal-gallery-modal {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: grid;
    place-items: center;
}

.purchase-appraisal-gallery-modal[hidden] {
    display: none;
}

.purchase-appraisal-gallery-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(23, 36, 58, 0.45);
}

.purchase-appraisal-gallery-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(960px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    overflow: auto;
    background: #fff;
    border-radius: 16px;
    padding: 16px;
}

.purchase-appraisal-gallery-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.purchase-appraisal-gallery-modal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}

.purchase-appraisal-gallery-main-clickable {
    cursor: zoom-in;
}

.purchase-appraisal-gallery-strip-empty {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: #667085;
    font-size: 13px;
    padding: 8px 0;
}

.purchase-appraisal-gallery-strip-empty[hidden],
.purchase-appraisal-gallery-strip[hidden] {
    display: none;
}

.purchase-appraisal-gallery-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.purchase-appraisal-gallery-strip-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.purchase-appraisal-gallery-strip-thumb {
    width: 88px;
    height: 66px;
    border: 1px solid rgba(28, 77, 137, 0.12);
    border-radius: 12px;
    overflow: hidden;
    padding: 0;
    background: #eef2f8;
    cursor: zoom-in;
}

.purchase-appraisal-gallery-strip-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.purchase-appraisal-gallery-strip-delete {
    width: 28px;
    height: 28px;
    border-radius: 999px;
}

.purchase-appraisal-photo-col,
.purchase-appraisal-list-photo-col {
    width: 56px;
    max-width: 56px;
}

.purchase-appraisal-list-no-photo {
    color: #98a2b3;
}

.purchase-appraisal-list-thumb-btn {
    position: relative;
    width: 48px;
    height: 36px;
    border: 1px solid rgba(28, 77, 137, 0.12);
    border-radius: 10px;
    overflow: hidden;
    padding: 0;
    background: #eef2f8;
    cursor: zoom-in;
}

.purchase-appraisal-list-thumb-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.crm-vehicle-select-option {
    display: flex;
    align-items: center;
    gap: 8px;
}

.crm-vehicle-select-thumb {
    width: 48px;
    height: 36px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.crm-vehicle-select-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.crm-vehicle-selected-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.crm-vehicle-selected-card {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(28, 77, 137, 0.12);
    border-radius: 10px;
    padding: 6px 10px 6px 6px;
    background: #fff;
    max-width: 280px;
}

.crm-vehicle-selected-card img {
    width: 56px;
    height: 42px;
    object-fit: cover;
    border-radius: 8px;
}

.customer-lead-page .crm-vehicle-gallery-card,
.test-drive-appointment-page .crm-vehicle-gallery-card {
    margin-top: 0;
}

.customer-lead-page .crm-vehicle-gallery-card .purchase-appraisal-gallery-main,
.test-drive-appointment-page .crm-vehicle-gallery-card .purchase-appraisal-gallery-main {
    min-height: 180px;
    max-height: 220px;
    height: 220px;
}

.customer-lead-page .crm-vehicle-gallery-card .purchase-appraisal-gallery-main img,
.test-drive-appointment-page .crm-vehicle-gallery-card .purchase-appraisal-gallery-main img {
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: 220px;
    object-fit: cover;
}

.crm-vehicle-gallery-caption {
    margin-top: 8px;
    font-size: 12px;
    color: #667085;
    line-height: 1.4;
    word-break: break-word;
}

.purchase-appraisal-list-thumb-count {
    position: absolute;
    right: 2px;
    bottom: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-size: 10px;
    line-height: 16px;
    text-align: center;
}

.purchase-appraisal-lightbox-modal {
    position: fixed;
    inset: 0;
    z-index: 10060;
    display: grid;
    place-items: center;
}

.purchase-appraisal-lightbox-modal[hidden] {
    display: none;
}

.purchase-appraisal-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(23, 36, 58, 0.72);
}

.purchase-appraisal-lightbox-dialog {
    position: relative;
    z-index: 1;
    width: min(980px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(23, 36, 58, 0.28);
}

.purchase-appraisal-lightbox-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(28, 77, 137, 0.08);
}

.purchase-appraisal-lightbox-header h4 {
    margin: 0;
    font-size: 16px;
}

.purchase-appraisal-lightbox-body {
    display: grid;
    gap: 12px;
    padding: 16px 18px 18px;
}

.purchase-appraisal-lightbox-stage {
    position: relative;
    min-height: min(62vh, 560px);
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    background: #eef2f8;
    border-radius: 16px;
    padding: 12px;
}

.purchase-appraisal-lightbox-stage img {
    width: 100%;
    max-height: min(62vh, 560px);
    object-fit: contain;
    border-radius: 12px;
}

.purchase-appraisal-lightbox-count {
    text-align: center;
    font-size: 13px;
    color: #667085;
}

.purchase-appraisal-lightbox-thumbs {
    justify-content: center;
}

.purchase-appraisal-check-table .radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
}

.purchase-appraisal-check-table .radio-group label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    white-space: nowrap;
}

.purchase-appraisal-check-table .text-muted {
    color: #667085;
    font-size: 12px;
    margin-top: 2px;
}

.purchase-appraisal-page .purchase-appraisal-editor-modal {
    align-items: flex-start;
    justify-content: center;
    overflow-x: hidden;
}

.purchase-appraisal-page .purchase-appraisal-editor-modal.is-loading .purchase-appraisal-editor-body,
.purchase-appraisal-page .purchase-appraisal-editor-modal.is-loading .purchase-appraisal-editor-actions {
    opacity: 0.85;
}

.vehicle-preparation-page .vehicle-preparation-source-issues-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
}

.vehicle-preparation-page .vehicle-preparation-source-issue-item {
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fafbfc;
}

.vehicle-preparation-page .vehicle-preparation-source-issue-desc {
    margin-top: 4px;
    color: var(--muted);
    font-size: 0.92rem;
}

.vehicle-preparation-page #vehiclePreparationEditorModal .purchase-appraisal-editor-body .select2-container {
    display: block;
    width: 100% !important;
    max-width: 100%;
}

.vehicle-preparation-page #vehiclePreparationEditorModal .select2-dropdown {
    z-index: 10020 !important;
}

.purchase-appraisal-page .purchase-appraisal-editor-dialog {
    width: min(100%, 1240px);
    max-height: calc(100vh - 32px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.purchase-appraisal-page .purchase-appraisal-editor-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0 20px 8px;
}

.purchase-appraisal-page .purchase-appraisal-editor-actions {
    flex-shrink: 0;
    margin-top: 0;
}

.purchase-appraisal-modal-meta {
    flex-wrap: wrap;
}

.vehicle-purchase-modal-meta .vehicle-purchase-appraisal-lookup-meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 240px;
    min-width: 220px;
}

.vehicle-purchase-modal-meta .vehicle-purchase-appraisal-lookup-meta label {
    font-size: 12px;
    color: #667085;
    white-space: nowrap;
}

.vehicle-purchase-modal-meta .vehicle-purchase-appraisal-lookup-meta .vp-lookup-input {
    flex: 1 1 auto;
    min-width: 180px;
    max-width: 280px;
}

.vehicle-purchase-modal-meta .vehicle-purchase-appraisal-lookup-meta .vp-lookup-display {
    font-size: 13px;
    padding: 6px 10px;
}

.purchase-appraisal-page .purchase-appraisal-editor-dialog .select2-container {
    display: block;
    width: 100% !important;
    max-width: 100%;
}

@media (max-width: 1200px) {
    .purchase-appraisal-overview-layout {
        grid-template-columns: 1fr;
    }

    .pa-gallery-card {
        order: -1;
    }
}

@media (max-width: 1200px) {
    .pa-grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 992px) {
    .pa-grid-3,
    .pa-grid-4,
    .purchase-appraisal-summary-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .pa-grid-2,
    .pa-grid-3,
    .pa-grid-4,
    .purchase-appraisal-summary-bar {
        grid-template-columns: 1fr;
    }

    .purchase-appraisal-form-head-actions,
    .pa-card-actions {
        width: 100%;
    }

    .purchase-appraisal-form-head-actions .btn,
    .pa-card-actions .btn {
        flex: 1 1 auto;
    }
}

/* Vehicle purchase confirmation summary */
.vehicle-purchase-editor-header {
    flex-wrap: wrap;
    gap: 12px;
}

.vehicle-purchase-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    margin-right: 8px;
}

.vehicle-purchase-page .vehicle-purchase-editor-actions {
    flex-shrink: 0;
    margin-top: 0;
}

.vehicle-purchase-wizard-nav-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.vehicle-purchase-appraisal-pick-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    margin: 0 0 16px;
}

.vehicle-purchase-appraisal-pick-search {
    flex: 1 1 280px;
    min-width: 0;
}

.vehicle-purchase-form-shell {
    position: relative;
}

.vehicle-purchase-editor-modal .purchase-appraisal-tab-panels {
    padding-top: 12px;
}

.vehicle-purchase-editor-modal .purchase-appraisal-tab-panel.is-active[data-vehicle-purchase-panel="document"],
.vehicle-purchase-editor-modal .purchase-appraisal-tab-panel.is-active[data-vehicle-purchase-panel="contract"] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vehicle-purchase-editor-modal .vehicle-purchase-subsection-card {
    margin-top: 0;
}

.vehicle-purchase-editor-modal .pa-card-body.pa-grid > .field {
    min-width: 0;
}

.vehicle-purchase-editor-modal .pa-card-body.pa-grid > .field .ui-control,
.vehicle-purchase-editor-modal .pa-card-body.pa-grid > .field .select2-container,
.vehicle-purchase-editor-modal .vp-form-section .pa-grid > .field .ui-control,
.vehicle-purchase-editor-modal .vp-form-section .pa-grid > .field .select2-container {
    width: 100% !important;
    max-width: 100%;
}

.vehicle-purchase-editor-modal .vp-form-radio-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    grid-column: 1 / -1;
}

.vehicle-purchase-editor-modal .vp-form-radio-strip--quad {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.vehicle-purchase-editor-modal .vp-form-radio-strip--vehicle {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.vehicle-purchase-editor-modal .vp-form-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    grid-column: 1 / -1;
    padding-top: 4px;
    border-top: 1px solid var(--border-color, #e5e7eb);
}

.vehicle-purchase-editor-modal .vp-form-section-title {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary, #6b7280);
}

.vehicle-purchase-editor-modal .vehicle-purchase-editor-table-wrap {
    width: 100%;
    margin-bottom: 4px;
}

.vehicle-purchase-editor-modal .vehicle-purchase-editor-data-table {
    width: 100%;
    table-layout: fixed;
}

.vehicle-purchase-editor-modal #vehiclePurchaseDocumentTable th:nth-child(1),
.vehicle-purchase-editor-modal #vehiclePurchaseDocumentTable td:nth-child(1) {
    width: 26%;
}

.vehicle-purchase-editor-modal #vehiclePurchaseDocumentTable th:nth-child(2),
.vehicle-purchase-editor-modal #vehiclePurchaseDocumentTable td:nth-child(2) {
    width: 9%;
}

.vehicle-purchase-editor-modal #vehiclePurchaseDocumentTable th:nth-child(3),
.vehicle-purchase-editor-modal #vehiclePurchaseDocumentTable td:nth-child(3) {
    width: 12%;
}

.vehicle-purchase-editor-modal #vehiclePurchaseDocumentTable th:nth-child(4),
.vehicle-purchase-editor-modal #vehiclePurchaseDocumentTable td:nth-child(4) {
    width: 14%;
}

.vehicle-purchase-editor-modal #vehiclePurchaseDocumentTable th:nth-child(5),
.vehicle-purchase-editor-modal #vehiclePurchaseDocumentTable td:nth-child(5) {
    width: 31%;
}

.vehicle-purchase-editor-modal #vehiclePurchaseDocumentTable th:nth-child(6),
.vehicle-purchase-editor-modal #vehiclePurchaseDocumentTable td:nth-child(6) {
    width: 8%;
}

.vehicle-purchase-editor-modal #vehiclePurchaseSignatureTable th:nth-child(1),
.vehicle-purchase-editor-modal #vehiclePurchaseSignatureTable td:nth-child(1) {
    width: 16%;
}

.vehicle-purchase-editor-modal #vehiclePurchaseSignatureTable th:nth-child(2),
.vehicle-purchase-editor-modal #vehiclePurchaseSignatureTable td:nth-child(2) {
    width: 16%;
}

.vehicle-purchase-editor-modal #vehiclePurchaseSignatureTable th:nth-child(3),
.vehicle-purchase-editor-modal #vehiclePurchaseSignatureTable td:nth-child(3) {
    width: 22%;
}

.vehicle-purchase-editor-modal #vehiclePurchaseSignatureTable th:nth-child(4),
.vehicle-purchase-editor-modal #vehiclePurchaseSignatureTable td:nth-child(4) {
    width: 18%;
}

.vehicle-purchase-editor-modal #vehiclePurchaseSignatureTable th:nth-child(5),
.vehicle-purchase-editor-modal #vehiclePurchaseSignatureTable td:nth-child(5) {
    width: 14%;
}

.vehicle-purchase-editor-modal #vehiclePurchaseSignatureTable th:nth-child(6),
.vehicle-purchase-editor-modal #vehiclePurchaseSignatureTable td:nth-child(6) {
    width: 14%;
}

.vehicle-purchase-editor-modal .vehicle-purchase-editor-data-table .ui-control {
    width: 100%;
    min-width: 0;
}

@media (max-width: 992px) {
    .vehicle-purchase-editor-modal .vp-form-radio-strip--quad,
    .vehicle-purchase-editor-modal .vp-form-radio-strip--vehicle {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .vehicle-purchase-editor-modal .vp-form-radio-strip,
    .vehicle-purchase-editor-modal .vp-form-radio-strip--quad,
    .vehicle-purchase-editor-modal .vp-form-radio-strip--vehicle {
        grid-template-columns: 1fr;
    }
}

.vehicle-purchase-appraisal-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.vehicle-purchase-appraisal-inline .vp-field-readonly {
    min-width: 0;
}

.vehicle-purchase-intake-fields {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vehicle-purchase-intake-third-col {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.vehicle-purchase-intake-third-col > label {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    color: #344054;
    line-height: 1.3;
}

[data-vehicle-purchase-source-field="appraisal"][hidden] {
    display: none !important;
}

.vehicle-purchase-appraisal-ref-strip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    min-height: 38px;
    padding: 7px 12px;
    border: 1px solid rgba(28, 77, 137, 0.12);
    border-radius: 8px;
    background: #f0f6ff;
    box-sizing: border-box;
}

.vehicle-purchase-appraisal-ref-text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
}

.vehicle-purchase-appraisal-ref-text.is-empty {
    color: #667085;
    font-weight: 500;
}

.vehicle-purchase-appraisal-ref-text.doc-no {
    color: var(--blue-700, #1d4ed8);
}

.vehicle-purchase-appraisal-ref-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    flex: 0 0 auto;
}

.vehicle-purchase-appraisal-ref-actions .btn {
    min-height: 32px;
    height: 32px;
    padding: 0 12px;
    font-size: 12px;
    line-height: 30px;
    white-space: nowrap;
}

.vehicle-purchase-editor-modal .role-permission-editor-modal-actions {
    margin-top: 16px;
}

.vehicle-purchase-editor-modal .vehicle-purchase-form-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.vehicle-purchase-editor-modal .vehicle-purchase-form-toolbar-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.vehicle-purchase-editor-modal .vehicle-purchase-form-toolbar-actions,
.vehicle-purchase-editor-modal .vehicle-purchase-form-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.vehicle-purchase-print-dropdown {
    position: relative;
}

.vehicle-purchase-print-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 5;
    display: grid;
    gap: 4px;
    min-width: 160px;
    padding: 6px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    background: var(--surface-bg, #fff);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}

.vehicle-purchase-print-menu[hidden] {
    display: none !important;
}

.vehicle-purchase-print-item {
    width: 100%;
    text-align: left;
    padding: 8px 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
}

.vehicle-purchase-print-item:hover {
    background: #f3f4f6;
}

.vehicle-purchase-editor-modal .vehicle-purchase-form-blocks {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.vehicle-purchase-editor-modal .vehicle-purchase-form-page {
    padding-bottom: 12px;
}

.vehicle-purchase-editor-modal .vehicle-purchase-form-footer {
    position: static;
    bottom: auto;
    z-index: 1;
    margin-top: 16px;
    padding: 12px 0 0;
    background: var(--surface-bg, #fff);
    border-top: 1px solid var(--border-color, #e5e7eb);
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
}

.vehicle-purchase-editor-modal .vehicle-purchase-form-footer .btn {
    flex: 0 0 auto;
    width: auto;
    min-width: 120px;
}

.vehicle-purchase-editor-modal .vehicle-purchase-form-footer .vehicle-purchase-print-dropdown {
    flex: 0 0 auto;
}

.vehicle-purchase-editor-modal .pa-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.vehicle-purchase-block-divider {
    border: 0;
    border-top: 1px solid var(--border-color, #e5e7eb);
    margin: 16px 0;
}

.vehicle-purchase-doc-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.vehicle-purchase-document-table .ui-control {
    width: 100%;
}

.vehicle-purchase-appraisal-pick-table-wrap {
    margin-top: 0;
    overflow-x: auto;
    overflow-y: auto;
    max-width: 100%;
    max-height: min(58vh, 520px);
    -webkit-overflow-scrolling: touch;
}

/* Modal เลือกใบประเมิน — กว้างกว่า editor modal ปกติ (override role-permission 920px) */
.role-permission-page .vehicle-purchase-appraisal-pick-modal {
    z-index: 10055;
    align-items: center;
    justify-content: center;
    padding: 12px;
    overflow: hidden;
}

.role-permission-page .vehicle-purchase-appraisal-pick-modal .vehicle-purchase-appraisal-pick-dialog {
    width: 90vw;
    max-width: 1200px;
    height: auto;
    max-height: calc(100vh - 24px);
    min-height: 0;
    overflow: hidden;
    flex-shrink: 1;
}

.role-permission-page .vehicle-purchase-appraisal-pick-header {
    flex: 0 0 auto;
    margin-bottom: 12px;
}

.vehicle-purchase-appraisal-pick-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.vehicle-purchase-appraisal-pick-search-field {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
}

.vehicle-purchase-appraisal-pick-search-field .ui-control {
    width: 100%;
    box-sizing: border-box;
}

.vehicle-purchase-appraisal-pick-table {
    width: 100%;
    min-width: 990px;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
}

.vehicle-purchase-appraisal-pick-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--card, #fff);
    box-shadow: 0 1px 0 rgba(28, 77, 137, 0.08);
}

.vehicle-purchase-appraisal-pick-table th,
.vehicle-purchase-appraisal-pick-table td {
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;
}

.vehicle-purchase-appraisal-pick-table .vp-pick-col-doc-no {
    width: 140px;
    min-width: 140px;
}

.vehicle-purchase-appraisal-pick-table .vp-pick-col-date {
    width: 110px;
    min-width: 110px;
}

.vehicle-purchase-appraisal-pick-table .vp-pick-col-seller {
    width: 160px;
    min-width: 160px;
}

.vehicle-purchase-appraisal-pick-table .vp-pick-col-vehicle {
    width: 220px;
    min-width: 220px;
    white-space: normal;
    word-break: break-word;
}

.vehicle-purchase-appraisal-pick-table .vp-pick-col-plate {
    width: 130px;
    min-width: 130px;
}

.vehicle-purchase-appraisal-pick-table .vp-pick-col-price {
    width: 130px;
    min-width: 130px;
}

.vehicle-purchase-appraisal-pick-table .vp-pick-col-status {
    width: 100px;
    min-width: 100px;
    white-space: nowrap;
}

.vehicle-purchase-appraisal-pick-table .vp-pick-col-action {
    width: 90px;
    min-width: 90px;
    text-align: right;
}

.vehicle-purchase-appraisal-pick-table .vp-pick-col-action .vp-pick-select-btn {
    min-width: 72px;
    min-height: 34px;
    padding: 0 10px;
}

@media (max-width: 768px) {
    .role-permission-page .vehicle-purchase-appraisal-pick-modal .vehicle-purchase-appraisal-pick-dialog {
        width: calc(100vw - 24px);
        max-width: none;
    }
}

.vehicle-purchase-current-branch-field .vehicle-purchase-current-branch-value {
    display: flex;
    align-items: center;
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid rgba(28, 77, 137, 0.12);
    border-radius: 8px;
    background: #f8fafc;
    color: var(--blue-700, #1d4ed8);
    font-weight: 600;
    font-size: 14px;
}

.purchase-appraisal-branch-context {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.purchase-appraisal-branch-context strong {
    color: var(--blue-700, #1d4ed8);
}

.vehicle-purchase-form-page.vehicle-purchase-awaiting-appraisal .vehicle-purchase-wizard-nav-item[data-vehicle-purchase-step="purchase"],
.vehicle-purchase-form-page.vehicle-purchase-awaiting-appraisal .vehicle-purchase-wizard-nav-item[data-vehicle-purchase-step="document"] {
    opacity: 0.55;
}

.vehicle-purchase-form-page:not([data-mode="create"]) .vehicle-purchase-wizard-nav-item[data-vehicle-purchase-step="appraisal"],
.vehicle-purchase-form-page:not([data-mode="create"]) #vehiclePurchaseStepAppraisal {
    display: none;
}

.vehicle-purchase-form-page:not([data-mode="create"]) .vehicle-purchase-wizard-nav-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.vehicle-purchase-appraisal-pick-row.is-selected td {
    background: #eff6ff;
}

.vehicle-purchase-appraisal-search-field {
    position: relative;
}

.vehicle-purchase-appraisal-search-field .select2-container {
    width: 100% !important;
}

.vehicle-purchase-appraisal-search-icon {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    color: var(--blue-700, #1d4ed8);
    pointer-events: none;
    z-index: 2;
}

.vehicle-purchase-appraisal-search-icon svg {
    width: 16px;
    height: 16px;
    display: block;
}

.vehicle-purchase-appraisal-search-field .select2-container .select2-selection--single {
    padding-right: 36px;
}

.vehicle-purchase-wizard-nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 16px;
}

.vehicle-purchase-wizard-nav-item {
    appearance: none;
    border: 1px solid rgba(28, 77, 137, 0.12);
    border-radius: 10px;
    background: #fff;
    color: #667085;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 10px 12px;
    text-align: left;
    cursor: pointer;
}

.vehicle-purchase-wizard-nav-item.is-active {
    border-color: var(--blue-700);
    background: #eff6ff;
    color: var(--blue-700);
}

.vehicle-purchase-wizard-nav-item.is-complete:not(.is-active) {
    border-color: #86efac;
    background: #f0fdf4;
    color: #15803d;
}

.pa-inline-input {
    display: flex;
    align-items: stretch;
}

.pa-inline-input .ui-control {
    flex: 1 1 auto;
    min-width: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.pa-input-suffix {
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    border: 1px solid var(--border-color, #d0d5dd);
    border-left: none;
    border-radius: 0 8px 8px 0;
    background: var(--surface-muted, #f9fafb);
    color: #667085;
    font-size: 13px;
    white-space: nowrap;
}

.vehicle-purchase-intake-banner {
    border-color: #86efac;
    background: #f0fdf4;
}

.vehicle-purchase-intake-banner .pa-card-body {
    padding-top: 14px;
}

.vehicle-purchase-intake-message {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    color: #15803d;
    font-weight: 600;
}

.vehicle-purchase-support-fields {
    display: none !important;
}

.vehicle-purchase-wizard {
    display: grid;
    gap: 16px;
}

.vehicle-purchase-step-panels {
    display: grid;
    gap: 16px;
}

.vehicle-purchase-step-panel {
    display: none;
}

.vehicle-purchase-step-panel.is-active {
    display: block;
}

.vehicle-purchase-wizard-actions {
    justify-content: flex-end;
    gap: 8px;
}

.vehicle-purchase-source-choice {
    display: grid;
    gap: 10px;
}

.vehicle-purchase-source-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
}

.vehicle-purchase-source-option input {
    margin-top: 3px;
}

.vehicle-purchase-field-hint {
    margin: 6px 0 0;
    font-size: 12px;
    color: #6b7280;
}

.vehicle-purchase-appraisal-pick-summary {
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid #bfdbfe;
    background: #eff6ff;
}

.vehicle-purchase-appraisal-pick-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 16px;
}

.vehicle-purchase-appraisal-pick-summary-grid .label {
    display: block;
    font-size: 12px;
    color: #6b7280;
}

.vehicle-purchase-detail-stack {
    display: grid;
    gap: 16px;
}

.vehicle-purchase-confirm-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 20px;
    margin: 0;
}

.vehicle-purchase-confirm-item dt {
    margin: 0 0 4px;
    font-size: 12px;
    color: #6b7280;
}

.vehicle-purchase-confirm-item dd {
    margin: 0;
    font-weight: 600;
}

.vehicle-purchase-confirm-note {
    margin: 16px 0 0;
    font-size: 13px;
    color: #6b7280;
}

.vehicle-purchase-step {
    cursor: pointer;
}

.vehicle-purchase-summary-tab {
    display: grid;
    gap: 16px;
}

.vehicle-purchase-completeness-bar {
    padding: 12px 16px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 10px;
    background: var(--surface-muted, #f9fafb);
}

.vehicle-purchase-completeness-title {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 600;
}

.vehicle-purchase-completeness-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.vehicle-purchase-completeness-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--border-color, #e5e7eb);
    font-size: 13px;
}

.vehicle-purchase-completeness-item.is-complete {
    border-color: #86efac;
    background: #f0fdf4;
}

.vehicle-purchase-completeness-item.is-incomplete {
    border-color: #fcd34d;
    background: #fffbeb;
}

.vehicle-purchase-completeness-item.is-optional {
    border-color: #d1d5db;
    background: #fff;
}

.vehicle-purchase-completeness-status[data-status="complete"] {
    color: #15803d;
    font-weight: 600;
}

.vehicle-purchase-completeness-status[data-status="incomplete"] {
    color: #b45309;
    font-weight: 600;
}

.vehicle-purchase-completeness-status[data-status="optional"] {
    color: #6b7280;
}

.vehicle-purchase-summary-value {
    min-height: 38px;
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--surface-muted, #f9fafb);
    font-weight: 600;
}

.vehicle-purchase-summary-muted {
    color: var(--text-muted, #6b7280);
    font-weight: 500;
}

.vehicle-purchase-summary-empty {
    display: grid;
    gap: 12px;
    justify-items: start;
    padding: 8px 0;
}

.vehicle-purchase-summary-empty-text {
    margin: 0;
    color: var(--text-muted, #6b7280);
    font-size: 14px;
}

.vehicle-purchase-readonly-ref {
    background: var(--surface-muted, #f9fafb);
    color: var(--text-muted, #4b5563);
}

.vehicle-purchase-workspace-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.9fr);
    gap: 16px;
    align-items: start;
}

.vehicle-purchase-workspace-main,
.vehicle-purchase-workspace-aside {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.vehicle-purchase-stepper {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.vehicle-purchase-step {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--border-color, #e5e7eb);
    background: #fff;
    cursor: pointer;
    font-size: 13px;
}

.vehicle-purchase-step.is-active {
    border-color: #2563eb;
    background: #eff6ff;
}

.vehicle-purchase-step.is-complete .vehicle-purchase-step-index {
    background: #16a34a;
}

.vehicle-purchase-step-index {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #94a3b8;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

.vehicle-purchase-step.is-active .vehicle-purchase-step-index {
    background: #2563eb;
}

.vehicle-purchase-price-hint {
    padding: 10px 12px;
    border-radius: 8px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 13px;
}

.vehicle-purchase-spec-grid {
    display: grid;
    gap: 8px;
    margin: 12px 0 0;
}

.vehicle-purchase-spec-grid > div {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 8px;
}

.vehicle-purchase-spec-grid dt {
    margin: 0;
    color: var(--text-muted, #6b7280);
    font-size: 13px;
}

.vehicle-purchase-spec-grid dd {
    margin: 0;
    font-weight: 600;
}

.vehicle-purchase-gallery-main {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: #f3f4f6;
    min-height: 180px;
}

.vehicle-purchase-gallery-main-image {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}

.vehicle-purchase-gallery-placeholder {
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    font-size: 13px;
}

.vehicle-purchase-gallery-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.vehicle-purchase-gallery-thumb {
    width: 56px;
    height: 42px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    cursor: pointer;
}

.vehicle-purchase-gallery-thumb.is-active {
    border-color: #2563eb;
}

.vehicle-purchase-gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vehicle-purchase-document-checklist {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.vehicle-purchase-document-check-item {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--border-color, #e5e7eb);
    font-size: 13px;
}

.vehicle-purchase-document-check-item.is-complete {
    background: #f0fdf4;
    border-color: #86efac;
}

.vehicle-purchase-document-check-item.is-pending {
    background: #fff;
}

.vehicle-purchase-system-note {
    margin: 0;
    font-size: 12px;
    color: #6b7280;
}

.vehicle-purchase-tab-hint {
    margin: 0;
    font-size: 13px;
    color: #6b7280;
}

@media (max-width: 1100px) {
    .vehicle-purchase-workspace-layout {
        grid-template-columns: 1fr;
    }

    .vehicle-purchase-stepper {
        grid-template-columns: 1fr 1fr;
    }
}
.vehicle-purchase-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.vehicle-purchase-summary-card .pa-card-body {
    min-height: 120px;
}

.vehicle-purchase-summary-vehicle-body {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.vehicle-purchase-summary-photo-wrap {
    width: 96px;
    height: 72px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--surface-muted, #f3f4f6);
    display: flex;
    align-items: center;
    justify-content: center;
}

.vehicle-purchase-summary-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vehicle-purchase-summary-photo-placeholder {
    font-size: 12px;
    color: var(--text-muted, #6b7280);
    text-align: center;
    padding: 8px;
}

.vehicle-purchase-summary-dl {
    display: grid;
    gap: 8px;
    margin: 0;
}

.vehicle-purchase-summary-dl > div {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 8px;
}

.vehicle-purchase-summary-dl dt {
    margin: 0;
    color: var(--text-muted, #6b7280);
    font-size: 13px;
}

.vehicle-purchase-summary-dl dd {
    margin: 0;
    font-weight: 600;
    word-break: break-word;
}

.vehicle-purchase-summary-price-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.vehicle-purchase-highlight-field .vehicle-purchase-primary-price {
    font-size: 1.15rem;
    font-weight: 700;
    border-color: var(--primary, #2563eb);
    background: #eff6ff;
}

.vehicle-purchase-summary-status {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
}

.vp-readonly-ref {
    background: var(--surface-muted, #f9fafb);
    color: var(--text-muted, #4b5563);
}

.vehicle-purchase-confirmed-text {
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--surface-muted, #f3f4f6);
    font-size: 14px;
}

.vehicle-purchase-page .vehicle-purchase-photo-col img,
.vehicle-purchase-page .purchase-appraisal-photo-col img {
    width: 48px;
    height: 36px;
    object-fit: cover;
    border-radius: 6px;
}

@media (max-width: 900px) {
    .vehicle-purchase-summary-grid {
        grid-template-columns: 1fr;
    }

    .vehicle-purchase-summary-vehicle-body {
        grid-template-columns: 72px minmax(0, 1fr);
    }

    .vehicle-purchase-summary-photo-wrap {
        width: 72px;
        height: 54px;
    }
}

/* Vehicle purchase dashboard layout */
.vehicle-purchase-page .vehicle-purchase-editor-dialog {
    width: min(100%, 1320px);
}

.vehicle-purchase-dashboard-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
    gap: 16px;
    align-items: start;
}

.vehicle-purchase-dashboard-main,
.vehicle-purchase-dashboard-aside {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.vp-section-card .pa-card-title,
.vp-vehicle-card .pa-card-title,
.vp-doc-card .pa-card-title,
.vp-intake-card .pa-card-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--blue-900, #1e3a5f);
}

.vp-field-readonly {
    min-height: 38px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    border-radius: 8px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    font-weight: 600;
    color: #1e3a5f;
}

.vehicle-purchase-price-compare {
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    font-size: 13px;
    color: #1d4ed8;
    display: grid;
    gap: 4px;
}

.vehicle-purchase-price-compare strong {
    font-weight: 700;
}

.vp-finance-card {
    border-color: rgba(59, 130, 246, 0.35);
    box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.08);
}

.vp-finance-choice {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.vehicle-purchase-spec-list {
    margin: 16px 0 0;
    padding: 0;
    display: grid;
    gap: 0;
}

.vehicle-purchase-spec-row {
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr);
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f1f5f9;
    align-items: baseline;
}

.vehicle-purchase-spec-row:last-child {
    border-bottom: none;
}

.vehicle-purchase-spec-row dt {
    margin: 0;
    font-size: 13px;
    color: #64748b;
}

.vehicle-purchase-spec-row dd {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
}

.vp-vehicle-gallery .purchase-appraisal-gallery-main,
.vp-vehicle-gallery .purchase-appraisal-gallery-placeholder {
    width: 100%;
    min-height: 200px;
    max-height: 240px;
    border-radius: 12px;
}

.vp-vehicle-gallery .purchase-appraisal-gallery-main img,
.vp-vehicle-gallery .purchase-appraisal-gallery-main {
    object-fit: cover;
}

.vehicle-purchase-document-checklist-full {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 0;
}

.vehicle-purchase-document-check-item {
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: start;
    padding: 12px;
    border-radius: 10px;
}

.vehicle-purchase-document-check-body {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.vehicle-purchase-document-check-icon {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.vehicle-purchase-document-check-item.is-complete .vehicle-purchase-document-check-icon {
    background: #dcfce7;
    color: #15803d;
}

.vehicle-purchase-document-check-item.is-pending .vehicle-purchase-document-check-icon {
    background: #f3f4f6;
    color: #9ca3af;
}

.vp-intake-card.vehicle-purchase-intake-banner {
    border-color: #86efac;
    background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 100%);
}

.vp-pick-card {
    max-width: 960px;
    margin: 0 auto;
}

.vp-lookup-input {
    display: flex;
    align-items: stretch;
    gap: 0;
}

.vp-lookup-display {
    flex: 1 1 auto;
    min-width: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    cursor: default;
}

.vehicle-purchase-form-page:not(.vehicle-purchase-has-appraisal) .vp-lookup-display.is-empty {
    color: #94a3b8;
    font-weight: 500;
}

.vehicle-purchase-form-page[data-mode="create"] .vp-lookup-display {
    cursor: pointer;
}

.vp-lookup-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    flex: 0 0 42px;
    border: 1px solid #d0d5dd;
    border-left: none;
    border-radius: 0 8px 8px 0;
    background: #fff;
    color: var(--blue-700, #1d4ed8);
    cursor: pointer;
}

.vp-lookup-btn svg {
    width: 18px;
    height: 18px;
    display: block;
}

.vp-lookup-btn:hover {
    background: #eff6ff;
}

.vehicle-purchase-appraisal-lookup-modal {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: grid;
    place-items: center;
    padding: 20px;
}

.vehicle-purchase-appraisal-lookup-modal[hidden] {
    display: none !important;
}

.vehicle-purchase-appraisal-lookup-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
}

.vehicle-purchase-appraisal-lookup-dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 920px);
    max-height: calc(100% - 40px);
    overflow: auto;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.18);
}

.vehicle-purchase-appraisal-lookup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px 0;
}

.vehicle-purchase-appraisal-lookup-title {
    margin: 0;
    font-size: 16px;
    color: var(--blue-900, #1e3a5f);
}

.vehicle-purchase-appraisal-lookup-body {
    padding: 12px 18px 18px;
}

.vehicle-purchase-editor-dialog {
    position: relative;
}

@media (max-width: 1100px) {
    .vehicle-purchase-dashboard-layout {
        grid-template-columns: 1fr;
    }

    .vehicle-purchase-document-checklist-full {
        grid-template-columns: 1fr;
    }
}

/* VehiclePurchase / รับซื้อรถเข้า : ส่วนเสริมที่ไม่มีในชุดคลาสของใบประเมิน */
.purchase-appraisal-inline-pick {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.vehicle-purchase-print-dropdown {
    position: relative;
    display: inline-block;
}

.vehicle-purchase-print-menu {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    z-index: 50;
    min-width: 200px;
    background: #fff;
    border: 1px solid var(--border-color, #d9dee6);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.16);
    padding: 6px;
}

.vehicle-purchase-print-item {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.vehicle-purchase-print-item:hover {
    background: var(--hover-bg, #f1f5f9);
}

/* Vehicle preparation: condition work detail modal */
.vehicle-preparation-page .vehicle-preparation-condition-work-modal .vehicle-preparation-condition-work-dialog {
    width: min(100%, 760px);
    max-height: min(85vh, calc(100vh - 32px));
    height: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 18px 0 16px;
}

.vehicle-preparation-page .vehicle-preparation-condition-work-modal .role-permission-editor-modal-header {
    flex-shrink: 0;
    padding: 0 20px;
}

.vehicle-preparation-page .vehicle-preparation-condition-work-body {
    flex: 1 1 auto;
    min-height: 0;
    max-height: calc(85vh - 140px);
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0 20px 12px;
    -webkit-overflow-scrolling: touch;
}

.vehicle-preparation-page .vehicle-preparation-condition-work-modal .purchase-appraisal-editor-actions {
    flex-shrink: 0;
    margin-top: 0;
    padding: 0 20px;
}

.vehicle-preparation-page .vehicle-preparation-condition-work-modal .select2-container {
    display: block;
    width: 100% !important;
    max-width: 100%;
}

.datepicker.app-datepicker,
.datepicker-dropdown.app-datepicker {
    z-index: 20060 !important;
}

/* Vehicle ready for sale: list column widths */
.vehicle-ready-for-sale-page #vehicleReadyForSaleTable {
    table-layout: fixed;
}

.vehicle-ready-for-sale-page #vehicleReadyForSaleTable th:nth-child(1),
.vehicle-ready-for-sale-page #vehicleReadyForSaleTable td:nth-child(1) {
    width: 56px;
    max-width: 56px;
}

.vehicle-ready-for-sale-page #vehicleReadyForSaleTable th:nth-child(2),
.vehicle-ready-for-sale-page #vehicleReadyForSaleTable td:nth-child(2) {
    width: 132px;
    max-width: 140px;
}

.vehicle-ready-for-sale-page #vehicleReadyForSaleTable th:nth-child(3),
.vehicle-ready-for-sale-page #vehicleReadyForSaleTable td:nth-child(3) {
    width: 28%;
    min-width: 160px;
}

.vehicle-ready-for-sale-page #vehicleReadyForSaleTable th:nth-child(4),
.vehicle-ready-for-sale-page #vehicleReadyForSaleTable td:nth-child(4) {
    width: 156px;
    max-width: 168px;
}

.vehicle-ready-for-sale-page #vehicleReadyForSaleTable th:nth-child(5),
.vehicle-ready-for-sale-page #vehicleReadyForSaleTable td:nth-child(5) {
    width: 76px;
    max-width: 88px;
}

.vehicle-ready-for-sale-page #vehicleReadyForSaleTable th:nth-child(6),
.vehicle-ready-for-sale-page #vehicleReadyForSaleTable td:nth-child(6) {
    width: 116px;
    max-width: 124px;
}

.vehicle-ready-for-sale-page #vehicleReadyForSaleTable th:nth-child(7),
.vehicle-ready-for-sale-page #vehicleReadyForSaleTable td:nth-child(7) {
    width: 116px;
    max-width: 124px;
}

.vehicle-ready-for-sale-page #vehicleReadyForSaleTable th.amount {
    text-align: right;
}

.vehicle-ready-for-sale-page #vehicleReadyForSaleTable th.action-col,
.vehicle-ready-for-sale-page #vehicleReadyForSaleTable td.action-col {
    width: 88px;
    max-width: 96px;
}

.vehicle-ready-for-sale-page #vehicleReadyForSaleTable td.action-col .row-actions {
    justify-content: flex-end;
}

/* Journal Entry detail lines: column widths from posted-view layout */
.journal-entry-page #journalEntryDetailLinesTable {
    table-layout: fixed;
    width: 100%;
}

.journal-entry-page #journalEntryDetailLinesTable th,
.journal-entry-page #journalEntryDetailLinesTable td {
    vertical-align: top;
}

.journal-entry-page #journalEntryDetailLinesTable th.je-col-account,
.journal-entry-page #journalEntryDetailLinesTable td.je-col-account {
    width: 28%;
    min-width: 180px;
}

.journal-entry-page #journalEntryDetailLinesTable th.je-col-description,
.journal-entry-page #journalEntryDetailLinesTable td.je-col-description {
    width: 42%;
    min-width: 220px;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    overflow: hidden;
    line-height: 1.45;
}

.journal-entry-page #journalEntryDetailLinesTable th.je-col-debit,
.journal-entry-page #journalEntryDetailLinesTable td.je-col-debit,
.journal-entry-page #journalEntryDetailLinesTable th.je-col-credit,
.journal-entry-page #journalEntryDetailLinesTable td.je-col-credit {
    width: 12%;
    min-width: 110px;
    text-align: right;
    white-space: nowrap;
}

.journal-entry-page #journalEntryDetailLinesTable th.je-col-action,
.journal-entry-page #journalEntryDetailLinesTable td.je-col-action {
    width: 64px;
    max-width: 72px;
}

.journal-entry-page #journalEntryDetailLinesTable td.je-col-action .row-actions {
    justify-content: flex-end;
}

.journal-entry-page #journalEntryDetailLinesTable td.je-col-account .select2-container {
    width: 100% !important;
    max-width: 100%;
}

.journal-entry-page #journalEntryDetailLinesTable tfoot .je-lines-total-row td {
    border-bottom: none;
    background: #f2f5fb;
    font-weight: 800;
    vertical-align: middle;
}

.journal-entry-page #journalEntryDetailLinesTable tfoot .je-col-total-label {
    text-align: right;
    white-space: nowrap;
    color: #637083;
}

.journal-entry-page #journalEntryDetailLinesTable tfoot .je-col-debit,
.journal-entry-page #journalEntryDetailLinesTable tfoot .je-col-credit {
    white-space: nowrap;
    text-align: right;
}

.journal-entry-page #journalEntryDetailBalanceWarning {
    margin: 10px 0 0;
}

.purchase-appraisal-editor-modal .ap-payment-attachment-panel {
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 12px;
    background: #fff;
}

.purchase-appraisal-editor-modal .ap-payment-attachment-display {
    min-height: 38px;
    padding: 8px 10px;
    border: 1px dashed rgba(28, 77, 137, .18);
    border-radius: 12px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    word-break: break-word;
}

.purchase-appraisal-editor-modal .ap-payment-attachment-display.has-file {
    color: var(--blue-900);
}

.purchase-appraisal-editor-modal .ap-payment-attachment-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.purchase-appraisal-editor-modal .ap-payment-attachment-hint {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
}

.ap-payment-page .ap-payment-date-field {
    width: 150px;
    max-width: 150px;
}

.ap-payment-page .ap-payment-search-field {
    width: 300px;
    max-width: 300px;
}

.ap-payment-page .ap-payment-status-field {
    width: 180px;
    max-width: 180px;
}

.finance-application-page .finance-application-filter,
.finance-follow-up-page .finance-follow-up-filter {
    /* reuse purchase-appraisal-filter columns via stacked class — only field widths */
}

.finance-application-page .ap-payment-date-field,
.finance-follow-up-page .ap-payment-date-field {
    width: 150px;
    max-width: 150px;
}

.finance-application-page .ap-payment-search-field,
.finance-follow-up-page .ap-payment-search-field {
    width: 280px;
    max-width: 280px;
}

.finance-application-page .ap-payment-status-field,
.finance-follow-up-page .ap-payment-status-field {
    width: 180px;
    max-width: 180px;
}

.finance-sale-info-box,
.finance-offer-summary-box {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr);
    gap: 10px 12px;
}

.fa-document-checklist {
    display: grid;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.fa-checklist-group-title {
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.fa-checklist-row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) 90px 60px minmax(0, 2fr);
    gap: 0.5rem;
    align-items: start;
    font-size: 0.875rem;
    padding: 0.25rem 0;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.fa-checklist-files {
    word-break: break-word;
}

.fa-print-options-list {
    display: grid;
    gap: 0.5rem;
}

.fa-print-option-btn {
    width: 100%;
    justify-content: flex-start;
}

#faOfferInstallmentHint.field-hint {
    margin-top: 0.25rem;
    font-size: 0.8rem;
    color: #b45309;
}

@media (max-width: 768px) {
    .fa-checklist-row {
        grid-template-columns: 1fr;
    }
}

.finance-offer-summary-box .ap-payment-payee-info-value.amount,
.finance-sale-info-box .ap-payment-payee-info-value.amount {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.finance-net-payout-highlight {
    font-weight: 700;
    color: var(--color-primary, #1d4ed8);
}

.finance-submission-summary-table .row-actions {
    white-space: nowrap;
}

/* Finance Application: ซ้ายพอดีเนื้อหา ไม่เว้นช่องว่าง — ขวาใช้พื้นที่ที่เหลือ */
#financeApplicationEditorModal .finance-case-sale-split {
    display: flex;
    flex-wrap: nowrap;
    gap: 16px;
    align-items: flex-start;
    width: 100%;
}

#financeApplicationEditorModal .finance-case-sale-left {
    flex: 0 0 280px;
    width: 280px;
    max-width: 280px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#financeApplicationEditorModal .finance-case-sale-right {
    flex: 1 1 auto;
    min-width: 0;
}

#financeApplicationEditorModal .finance-case-sale-select-field {
    width: 100%;
    max-width: none;
}

#financeApplicationEditorModal .finance-case-sale-select-field .select2-container,
#financeApplicationEditorModal .finance-case-sale-select-field .ui-control {
    width: 100% !important;
    max-width: none;
}

#financeApplicationEditorModal .finance-case-customer-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: none;
}

#financeApplicationEditorModal .finance-case-customer-stack > .field {
    margin: 0;
}

/* Nested offer modal — ~78% ของ modal หลัก (1240px) แต่ยังเล็กกว่า */
.finance-offer-nested-modal {
    z-index: 10050;
}

.finance-offer-nested-modal .finance-offer-nested-backdrop {
    background: rgba(15, 23, 42, 0.35);
}

.finance-offer-nested-modal .finance-offer-nested-dialog {
    width: min(100% - 40px, 980px);
    max-width: 980px;
    max-height: calc(100vh - 40px);
    margin: 20px auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
}

/* ระยะขอบ modal body — ห้ามให้เนื้อหาชิดกรอบ dialog */
.finance-offer-nested-modal .finance-offer-nested-body,
#financeOfferEditorModal .finance-offer-nested-body,
#faPartyEditorModal .finance-offer-nested-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px 28px 28px !important;
    margin: 0;
    box-sizing: border-box;
}

#financeOfferEditorModal .purchase-appraisal-form-page {
    padding: 0;
    margin: 0;
    gap: 16px;
}

#financeOfferEditorModal .pa-card {
    margin: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

#financeOfferEditorModal .pa-card-head {
    padding: 16px 20px 0 !important;
}

/* สำคัญ: อย่าใส่ .fa-offer-form-grid บน element เดียวกับ .pa-card-body
   (เคยทำให้ padding:0 ของ grid ทับระยะขอบจน input ชิดเส้น) */
#financeOfferEditorModal .pa-card-body {
    padding: 16px 20px 20px !important;
    margin: 0;
    box-sizing: border-box;
    overflow: visible;
}

#financeOfferEditorModal .pa-card-body > .fa-offer-form-grid {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0 !important;
    padding: 0;
}

.finance-offer-nested-modal .purchase-appraisal-editor-actions {
    flex-shrink: 0;
    border-top: 1px solid rgba(28, 77, 137, 0.1);
    padding: 14px 28px 16px !important;
    margin: 0;
    box-sizing: border-box;
}

/* Select2 in nested finance modals — above footer, not clipped */
#financeOfferEditorModal .select2-container,
#faPartyEditorModal .select2-container,
#financeApplicationEditorModal .select2-container {
    z-index: 1;
}

#financeOfferEditorModal .select2-container--open,
#faPartyEditorModal .select2-container--open,
#financeApplicationEditorModal .select2-container--open {
    z-index: 10120;
}

#financeOfferEditorModal .select2-dropdown,
#faPartyEditorModal .select2-dropdown,
#financeApplicationEditorModal .select2-dropdown {
    z-index: 10130;
}

/* Nested CustomerLead modal (opened from Reservation etc.) */
#customerLeadEditorModal.customer-lead-nested-modal,
#customerLeadEditorModal.finance-offer-nested-modal {
    z-index: 10050;
}

body.role-permission-editor-modal-open:has(#customerLeadEditorModal.customer-lead-nested-modal:not([hidden])) .select2-dropdown,
body.role-permission-editor-modal-open:has(#customerLeadEditorModal.finance-offer-nested-modal:not([hidden])) .select2-dropdown {
    z-index: 10130 !important;
}

#customerLeadEditorModal.customer-lead-nested-modal .select2-container--open,
#customerLeadEditorModal.finance-offer-nested-modal .select2-container--open {
    z-index: 10120;
}

#reservationEditorModal .reservation-customer-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

#reservationEditorModal .reservation-customer-label-row > label {
    margin: 0;
}

#reservationEditorModal .reservation-add-customer-btn {
    flex: 0 0 auto;
    padding: 4px 10px;
    font-size: 12px;
    line-height: 1.2;
    min-height: 0;
    white-space: nowrap;
}

#reservationEditorModal .reservation-panel-full.ap-payment-payee-select-field > .reservation-customer-label-row + .select2-container,
#reservationEditorModal .reservation-panel-full.ap-payment-payee-select-field > .reservation-customer-label-row + .ui-control {
    margin-top: 0;
}

.fa-doc-upload-layout {
    display: grid;
    grid-template-columns: minmax(160px, 200px) minmax(160px, 200px) minmax(260px, 380px);
    gap: 10px 12px;
    align-items: start;
    width: 100%;
    box-sizing: border-box;
}

.fa-doc-type-row,
.fa-doc-owner-row,
.fa-doc-file-row {
    margin: 0;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.fa-doc-file-row {
    max-width: 380px;
}

.fa-doc-attach-inline {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
    position: relative;
    box-sizing: border-box;
}

.fa-doc-file-display {
    flex: 1 1 auto;
    width: 0;
    min-width: 120px;
    max-width: 180px;
    min-height: 38px;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
}

.fa-doc-attach-inline .btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

.fa-doc-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    opacity: 0;
}

.fa-doc-attach-hint {
    margin: 6px 0 0;
}

#faDocumentTable .fa-doc-file-cell,
#dfcDocumentsTable .fa-doc-file-cell {
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#faDocumentTable .fa-doc-file-link,
#dfcDocumentsTable .fa-doc-file-link {
    color: var(--blue-700, #1c4d89);
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
}

#faDocumentTable .fa-doc-file-link:hover,
#dfcDocumentsTable .fa-doc-file-link:hover {
    color: var(--blue-900, #0f2f54);
}

@media (max-width: 1100px) {
    .fa-doc-upload-layout {
        grid-template-columns: minmax(140px, 180px) minmax(140px, 180px) minmax(240px, 340px);
    }

    .fa-doc-file-row {
        max-width: 340px;
    }
}

@media (max-width: 767px) {
    .fa-doc-upload-layout {
        grid-template-columns: 1fr;
    }

    .fa-doc-file-row {
        max-width: none;
    }

    .fa-doc-attach-inline {
        flex-wrap: wrap;
    }

    .fa-doc-file-display {
        flex: 1 1 100%;
        width: auto;
        max-width: none;
        min-width: 0;
    }

    #faDocumentTable .fa-doc-file-cell {
        max-width: none;
        white-space: normal;
    }
}

#financeApplicationEditorModal .purchase-appraisal-tabs {
    position: sticky;
    top: 0;
    z-index: 5;
    flex-wrap: wrap;
}

#financeApplicationEditorModal .purchase-appraisal-tab {
    flex: 0 0 auto;
    white-space: nowrap;
}

#financeApplicationEditorModal .fa-case-tab-mobile {
    display: none;
    margin: 0 0 12px;
    padding: 0 4px;
}

#financeApplicationEditorModal .fa-case-tab-mobile label {
    font-weight: 600;
    font-size: 13px;
    color: #344054;
    margin-bottom: 6px;
    display: block;
}

#financeApplicationEditorModal .purchase-appraisal-tab.has-error {
    color: #d92d20;
}

#financeApplicationEditorModal .purchase-appraisal-tab.has-error::after {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-left: 6px;
    border-radius: 50%;
    background: #d92d20;
    vertical-align: middle;
}

@media (max-width: 767px) {
    #financeApplicationEditorModal .fa-case-tabs-desktop {
        display: none !important;
    }

    #financeApplicationEditorModal .fa-case-tab-mobile {
        display: block;
    }

    #financeApplicationEditorModal .finance-submission-summary-table {
        min-width: 0;
    }
}

#dfcEditorModal .purchase-appraisal-tabs {
    position: sticky;
    top: 0;
    z-index: 5;
    flex-wrap: wrap;
}

#dfcEditorModal .purchase-appraisal-tab {
    flex: 0 0 auto;
    white-space: nowrap;
}

#dfcEditorModal .dfc-tab-mobile {
    display: none;
    margin: 0 0 12px;
    padding: 0 4px;
}

#dfcEditorModal .dfc-tab-mobile label {
    font-weight: 600;
    font-size: 13px;
    color: #344054;
    margin-bottom: 6px;
    display: block;
}

@media (max-width: 767px) {
    #dfcEditorModal .dfc-tabs-desktop {
        display: none !important;
    }

    #dfcEditorModal .dfc-tab-mobile {
        display: block;
    }
}

#dfcEditorModal .purchase-appraisal-tab-panel.is-active[data-dfc-panel="finance"] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#dfcEditorModal [data-dfc-panel="finance"] .pa-card-body.pa-grid > .field {
    min-width: 0;
}

#dfcEditorModal [data-dfc-panel="finance"] .pa-card-body.pa-grid > .field .ui-control,
#dfcEditorModal [data-dfc-panel="finance"] .pa-card-body.pa-grid > .field .select2-container {
    width: 100% !important;
    max-width: 100%;
}

#dfcEditorModal .dfc-finance-amount-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

#dfcEditorModal .dfc-source-input {
    background: #f8fafc;
    color: #475467;
}

#dfcEditorModal .dfc-principal-field .dfc-principal-input {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1e3a5f;
    font-weight: 700;
}

#dfcEditorModal .dfc-calc-card {
    background: #f8fafc;
}

#dfcEditorModal .dfc-calc-hint {
    margin: 4px 0 0;
    font-size: 12px;
    font-weight: 500;
    color: #667085;
}

#dfcEditorModal .dfc-calc-input {
    background: #eef2f7;
    color: #1e3a5f;
    font-weight: 600;
}

#dfcEditorModal .pa-inline-input.is-plain .ui-control {
    border-radius: 8px;
}

#dfcEditorModal .pa-inline-input.is-plain .pa-input-suffix {
    display: none;
}

@media (max-width: 1200px) {
    #dfcEditorModal .dfc-finance-amount-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #dfcEditorModal .dfc-principal-field {
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {
    #dfcEditorModal .dfc-finance-amount-grid {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 768px) {
    #financeApplicationEditorModal .fa-case-tab-mobile {
        display: none !important;
    }
}

/* Offer form: 4-column grid — แถว/คอลัมน์ตรงกัน ความกว้างช่องเท่ากันในคอลัมน์ */
.fa-offer-form-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px 14px;
    align-items: start;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.fa-offer-form-grid > .field {
    margin: 0;
    min-width: 0;
    width: 100%;
    grid-column: span 1;
}

.fa-offer-form-grid > .field.fa-field-wide {
    grid-column: span 2;
}

.fa-offer-form-grid > .field.fa-field-md,
.fa-offer-form-grid > .field.fa-field-sm {
    grid-column: span 1;
}

.fa-offer-form-grid > .field > .ui-control,
.fa-offer-form-grid > .field > .select2-container {
    width: 100% !important;
    max-width: none;
}

.fa-offer-form-grid > .field .ui-control.amount {
    text-align: right;
}

.fa-offer-form-grid > .field .ui-control.is-invalid,
.fa-offer-form-grid > .field .select2-container.is-invalid .select2-selection {
    border-color: #d92d20;
    box-shadow: 0 0 0 1px rgba(217, 45, 32, 0.2);
}

.fa-offer-form-grid .field-error {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.3;
    color: #d92d20;
}

.fa-result-select-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: #344054;
    cursor: pointer;
    user-select: none;
}

.fa-result-select-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
}

.finance-offer-summary-card .pa-card-body {
    padding-bottom: 24px;
}

.finance-offer-nested-modal .finance-offer-summary-card {
    margin-bottom: 8px;
}

/* ผลคำนวณ: 4 คอลัมน์จริง = Label | ค่า | Label | ค่า (2 คู่ต่อแถว) */
#financeOfferEditorModal #faOfferSummaryBox.finance-offer-summary-box,
.finance-offer-summary-box {
    pointer-events: none;
    user-select: text;
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 10px;
    width: 100%;
    box-sizing: border-box;
    padding: 4px 4px 8px;
}

#financeOfferEditorModal #faOfferSummaryBox .finance-summary-item,
.finance-offer-summary-box .finance-summary-item {
    display: contents;
}

#financeOfferEditorModal #faOfferSummaryBox .finance-summary-label,
.finance-offer-summary-box .finance-summary-label {
    display: block;
    margin: 0;
    padding: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted, #667085);
    line-height: 1.35;
    text-align: left;
    white-space: nowrap;
    align-self: baseline;
}

#financeOfferEditorModal #faOfferSummaryBox .finance-summary-value,
.finance-offer-summary-box .finance-summary-value {
    display: block;
    margin: 0;
    padding: 0 4px 0 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.35;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    align-self: baseline;
}

@media (max-width: 960px) {
    .finance-sale-info-box,
    .finance-offer-summary-box {
        grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr);
    }

    #financeApplicationEditorModal .finance-case-sale-split {
        flex-wrap: wrap;
    }

    #financeApplicationEditorModal .finance-case-sale-left,
    #financeApplicationEditorModal .finance-case-sale-right {
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%;
    }

    #financeApplicationEditorModal .finance-case-sale-select-field .select2-container,
    #financeApplicationEditorModal .finance-case-customer-stack,
    #financeApplicationEditorModal .finance-case-sale-select-field .select2-container,
    #financeApplicationEditorModal .finance-case-sale-select-field .ui-control {
        max-width: 100%;
    }

    .fa-offer-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fa-offer-form-grid > .field.fa-field-wide {
        grid-column: span 2;
    }

    #financeOfferEditorModal #faOfferSummaryBox.finance-offer-summary-box,
    .finance-offer-summary-box {
        grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    .finance-sale-info-box,
    .finance-offer-summary-box,
    #financeOfferEditorModal #faOfferSummaryBox.finance-offer-summary-box {
        grid-template-columns: max-content minmax(0, 1fr);
    }

    .finance-offer-nested-modal .finance-offer-nested-dialog {
        width: calc(100% - 24px);
        max-width: none;
        margin: 12px auto;
        max-height: calc(100vh - 24px);
    }

    .finance-offer-nested-modal .finance-offer-nested-body,
    #financeOfferEditorModal .finance-offer-nested-body,
    #faPartyEditorModal .finance-offer-nested-body {
        padding: 12px 16px 20px !important;
    }

    #financeOfferEditorModal .pa-card-head {
        padding: 14px 16px 0 !important;
    }

    #financeOfferEditorModal .pa-card-body {
        padding: 14px 16px 16px !important;
    }

    .finance-offer-nested-modal .purchase-appraisal-editor-actions {
        padding: 12px 16px 14px !important;
    }

    .fa-offer-form-grid {
        grid-template-columns: 1fr;
    }

    .fa-offer-form-grid > .field.fa-field-wide,
    .fa-offer-form-grid > .field.fa-field-md,
    .fa-offer-form-grid > .field.fa-field-sm {
        grid-column: span 1;
    }
}

.purchase-appraisal-editor-modal .ap-payment-field-spacer {
    display: block;
    min-height: 1px;
}

#apPaymentEditorModal .ap-payment-form-page,
#receiptPaymentEditorModal .ap-payment-form-page,
#arReceiptEditorModal .ap-payment-form-page,
#whtCertEditorModal .ap-payment-form-page,
#reservationEditorModal .ap-payment-form-page,
#vehicleSaleEditorModal .ap-payment-form-page,
#vehicleDeliveryEditorModal .ap-payment-form-page,
#salesCommissionEditorModal .ap-payment-form-page{
    gap: 12px;
}

#apPaymentEditorModal .ap-payment-header-meta,
#receiptPaymentEditorModal .ap-payment-header-meta,
#arReceiptEditorModal .ap-payment-header-meta,
#whtCertEditorModal .ap-payment-header-meta,
#reservationEditorModal .ap-payment-header-meta,
#vehicleSaleEditorModal .ap-payment-header-meta,
#vehicleDeliveryEditorModal .ap-payment-header-meta,
#salesCommissionEditorModal .ap-payment-header-meta,
#payrollPeriodEditorModal .ap-payment-header-meta,
#employeePaymentEditorModal .ap-payment-header-meta,
#purchaseOrderEditorModal .ap-payment-header-meta,
#purchaseReceiveEditorModal .ap-payment-header-meta,
#purchaseDebitNoteEditorModal .ap-payment-header-meta,
#salesDebitNoteEditorModal .ap-payment-header-meta,
#billingNoteEditorModal .ap-payment-header-meta,
#salesCreditNoteEditorModal .ap-payment-header-meta,
#purchaseCreditNoteEditorModal .ap-payment-header-meta,
#salesInvoiceEditorModal .ap-payment-header-meta,
#purchaseReturnEditorModal .ap-payment-header-meta, #salesReturnEditorModal .ap-payment-header-meta,
#depreciationEditorModal .ap-payment-header-meta,
#financeApplicationEditorModal .ap-payment-header-meta,
#dfcEditorModal .ap-payment-header-meta,
#arApNettingEditorModal .ap-payment-header-meta,
#dfpEditorModal .ap-payment-header-meta,
#dfclEditorModal .ap-payment-header-meta,
#dfoDetailModal .ap-payment-header-meta{
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
    align-items: flex-end;
    margin-top: 8px;
}


#apPaymentEditorModal .ap-payment-header-meta > .field,
#receiptPaymentEditorModal .ap-payment-header-meta > .field,
#arReceiptEditorModal .ap-payment-header-meta > .field,
#whtCertEditorModal .ap-payment-header-meta > .field,
#reservationEditorModal .ap-payment-header-meta > .field,
#vehicleSaleEditorModal .ap-payment-header-meta > .field,
#vehicleDeliveryEditorModal .ap-payment-header-meta > .field,
#salesCommissionEditorModal .ap-payment-header-meta > .field,
#payrollPeriodEditorModal .ap-payment-header-meta > .field,
#employeePaymentEditorModal .ap-payment-header-meta > .field,
#purchaseOrderEditorModal .ap-payment-header-meta > .field,
#purchaseReceiveEditorModal .ap-payment-header-meta > .field,
#purchaseDebitNoteEditorModal .ap-payment-header-meta > .field,
#salesDebitNoteEditorModal .ap-payment-header-meta > .field,
#billingNoteEditorModal .ap-payment-header-meta > .field,
#salesCreditNoteEditorModal .ap-payment-header-meta > .field,
#purchaseCreditNoteEditorModal .ap-payment-header-meta > .field,
#salesInvoiceEditorModal .ap-payment-header-meta > .field,
#purchaseReturnEditorModal .ap-payment-header-meta > .field, #salesReturnEditorModal .ap-payment-header-meta > .field,
#depreciationEditorModal .ap-payment-header-meta > .field,
#financeApplicationEditorModal .ap-payment-header-meta > .field,
#dfcEditorModal .ap-payment-header-meta > .field,
#arApNettingEditorModal .ap-payment-header-meta > .field,
#dfpEditorModal .ap-payment-header-meta > .field,
#dfclEditorModal .ap-payment-header-meta > .field,
#dfoDetailModal .ap-payment-header-meta > .field{
    flex: 0 0 auto;
    min-width: 0;
    margin: 0;
}


#apPaymentEditorModal .ap-payment-header-doc-no .ui-control,
#receiptPaymentEditorModal .ap-payment-header-doc-no .ui-control,
#arReceiptEditorModal .ap-payment-header-doc-no .ui-control,
#whtCertEditorModal .ap-payment-header-doc-no .ui-control,
#reservationEditorModal .ap-payment-header-doc-no .ui-control,
#vehicleSaleEditorModal .ap-payment-header-doc-no .ui-control,
#vehicleDeliveryEditorModal .ap-payment-header-doc-no .ui-control,
#salesCommissionEditorModal .ap-payment-header-doc-no .ui-control,
#financeApplicationEditorModal .ap-payment-header-doc-no .ui-control,
#dfcEditorModal .ap-payment-header-doc-no .ui-control,
#arApNettingEditorModal .ap-payment-header-doc-no .ui-control,
#dfpEditorModal .ap-payment-header-doc-no .ui-control,
#dfclEditorModal .ap-payment-header-doc-no .ui-control,
#dfoDetailModal .ap-payment-header-doc-no .ui-control,
#payrollPeriodEditorModal .ap-payment-header-doc-no .ui-control,
#employeePaymentEditorModal .ap-payment-header-doc-no .ui-control,
#purchaseOrderEditorModal .ap-payment-header-doc-no .ui-control,
#purchaseReceiveEditorModal .ap-payment-header-doc-no .ui-control,
#purchaseDebitNoteEditorModal .ap-payment-header-doc-no .ui-control,
#salesDebitNoteEditorModal .ap-payment-header-doc-no .ui-control,
#billingNoteEditorModal .ap-payment-header-doc-no .ui-control,
#salesCreditNoteEditorModal .ap-payment-header-doc-no .ui-control,
#purchaseCreditNoteEditorModal .ap-payment-header-doc-no .ui-control,
#salesInvoiceEditorModal .ap-payment-header-doc-no .ui-control,
#purchaseReturnEditorModal .ap-payment-header-doc-no .ui-control, #salesReturnEditorModal .ap-payment-header-doc-no .ui-control,
#depreciationEditorModal .ap-payment-header-doc-no .ui-control{
    width: 20ch;
    max-width: 20ch;
}

#apPaymentEditorModal .ap-payment-header-date .ui-control,
#receiptPaymentEditorModal .ap-payment-header-date .ui-control,
#arReceiptEditorModal .ap-payment-header-date .ui-control,
#whtCertEditorModal .ap-payment-header-date .ui-control,
#reservationEditorModal .ap-payment-header-date .ui-control,
#vehicleSaleEditorModal .ap-payment-header-date .ui-control,
#vehicleDeliveryEditorModal .ap-payment-header-date .ui-control,
#salesCommissionEditorModal .ap-payment-header-date .ui-control,
#dfcEditorModal .ap-payment-header-date .ui-control,
#arApNettingEditorModal .ap-payment-header-date .ui-control,
#dfpEditorModal .ap-payment-header-date .ui-control,
#dfclEditorModal .ap-payment-header-date .ui-control,
#dfoDetailModal .ap-payment-header-date .ui-control,
#payrollPeriodEditorModal .ap-payment-header-date .ui-control,
#employeePaymentEditorModal .ap-payment-header-date .ui-control,
#purchaseOrderEditorModal .ap-payment-header-date .ui-control,
#purchaseReceiveEditorModal .ap-payment-header-date .ui-control,
#purchaseDebitNoteEditorModal .ap-payment-header-date .ui-control,
#salesDebitNoteEditorModal .ap-payment-header-date .ui-control,
#billingNoteEditorModal .ap-payment-header-date .ui-control,
#salesCreditNoteEditorModal .ap-payment-header-date .ui-control,
#purchaseCreditNoteEditorModal .ap-payment-header-date .ui-control,
#salesInvoiceEditorModal .ap-payment-header-date .ui-control,
#purchaseReturnEditorModal .ap-payment-header-date .ui-control, #salesReturnEditorModal .ap-payment-header-date .ui-control,
#depreciationEditorModal .ap-payment-header-date .ui-control{
    width: 14ch;
    min-width: 140px;
    max-width: 160px;
}

#apPaymentEditorModal .ap-payment-header-status .ap-payment-status-wrap,
#receiptPaymentEditorModal .ap-payment-header-status .ap-payment-status-wrap,
#arReceiptEditorModal .ap-payment-header-status .ap-payment-status-wrap,
#whtCertEditorModal .ap-payment-header-status .ap-payment-status-wrap,
#reservationEditorModal .ap-payment-header-status .ap-payment-status-wrap,
#vehicleSaleEditorModal .ap-payment-header-status .ap-payment-status-wrap,
#vehicleDeliveryEditorModal .ap-payment-header-status .ap-payment-status-wrap,
#salesCommissionEditorModal .ap-payment-header-status .ap-payment-status-wrap,
#payrollPeriodEditorModal .ap-payment-header-status .ap-payment-status-wrap,
#employeePaymentEditorModal .ap-payment-header-status .ap-payment-status-wrap,
#purchaseOrderEditorModal .ap-payment-header-status .ap-payment-status-wrap,
#purchaseReceiveEditorModal .ap-payment-header-status .ap-payment-status-wrap,
#purchaseDebitNoteEditorModal .ap-payment-header-status .ap-payment-status-wrap,
#salesDebitNoteEditorModal .ap-payment-header-status .ap-payment-status-wrap,
#billingNoteEditorModal .ap-payment-header-status .ap-payment-status-wrap,
#salesCreditNoteEditorModal .ap-payment-header-status .ap-payment-status-wrap,
#purchaseCreditNoteEditorModal .ap-payment-header-status .ap-payment-status-wrap,
#salesInvoiceEditorModal .ap-payment-header-status .ap-payment-status-wrap,
#purchaseReturnEditorModal .ap-payment-header-status .ap-payment-status-wrap, #salesReturnEditorModal .ap-payment-header-status .ap-payment-status-wrap,
#depreciationEditorModal .ap-payment-header-status .ap-payment-status-wrap,
#financeApplicationEditorModal .ap-payment-header-status .ap-payment-status-wrap,
#dfcEditorModal .ap-payment-header-status .ap-payment-status-wrap,
#arApNettingEditorModal .ap-payment-header-status .ap-payment-status-wrap,
#dfpEditorModal .ap-payment-header-status .ap-payment-status-wrap,
#dfclEditorModal .ap-payment-header-status .ap-payment-status-wrap{
    display: flex;
    align-items: center;
    min-height: 36px;
}

#apPaymentEditorModal .ap-payment-header-type,
#receiptPaymentEditorModal .ap-payment-header-type,
#arReceiptEditorModal .ap-payment-header-type,
#whtCertEditorModal .ap-payment-header-type,
#reservationEditorModal .ap-payment-header-type,
#vehicleSaleEditorModal .ap-payment-header-type{
    min-width: 200px;
}

#apPaymentEditorModal .ap-payment-header-type .select2-container,
#receiptPaymentEditorModal .ap-payment-header-type .select2-container,
#arReceiptEditorModal .ap-payment-header-type .select2-container,
#whtCertEditorModal .ap-payment-header-type .select2-container,
#reservationEditorModal .ap-payment-header-type .select2-container,
#reservationEditorModal .ap-payment-header-type .ui-control,
#vehicleSaleEditorModal .ap-payment-header-type .select2-container,
#vehicleSaleEditorModal .ap-payment-header-type .ui-control{
    width: 220px !important;
    max-width: 220px;
}

#apPaymentEditorModal .ap-payment-payee-card .pa-card-body,
#receiptPaymentEditorModal .ap-payment-payee-card .pa-card-body,
#arReceiptEditorModal .ap-payment-payee-card .pa-card-body,
#whtCertEditorModal .ap-payment-payee-card .pa-card-body,
#reservationEditorModal .ap-payment-payee-card .pa-card-body,
#vehicleSaleEditorModal .ap-payment-payee-card .pa-card-body,
#vehicleDeliveryEditorModal .ap-payment-payee-card .pa-card-body,
#financeApplicationEditorModal .ap-payment-payee-card .pa-card-body{
    padding-top: 10px;
    padding-bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#apPaymentEditorModal .ap-payment-payee-row,
#receiptPaymentEditorModal .ap-payment-payee-row,
#arReceiptEditorModal .ap-payment-payee-row,
#whtCertEditorModal .ap-payment-payee-row,
#reservationEditorModal .ap-payment-payee-row,
#vehicleSaleEditorModal .ap-payment-payee-row,
#vehicleDeliveryEditorModal .ap-payment-payee-row{
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
}

#apPaymentEditorModal .ap-payment-payee-row > .field,
#receiptPaymentEditorModal .ap-payment-payee-row > .field,
#arReceiptEditorModal .ap-payment-payee-row > .field,
#whtCertEditorModal .ap-payment-payee-row > .field,
#reservationEditorModal .ap-payment-payee-row > .field,
#vehicleSaleEditorModal .ap-payment-payee-row > .field,
#vehicleDeliveryEditorModal .ap-payment-payee-row > .field{
    flex: 0 0 auto;
    min-width: 0;
}

#apPaymentEditorModal .ap-payment-payee-select-field,
#receiptPaymentEditorModal .ap-payment-payee-select-field,
#arReceiptEditorModal .ap-payment-payee-select-field,
#whtCertEditorModal .ap-payment-payee-select-field,
#reservationEditorModal .ap-payment-payee-select-field,
#vehicleSaleEditorModal .ap-payment-payee-select-field,
#vehicleDeliveryEditorModal .ap-payment-payee-select-field{
    width: min(100%, 420px);
}

#apPaymentEditorModal .ap-payment-payee-select-field .select2-container,
#receiptPaymentEditorModal .ap-payment-payee-select-field .select2-container,
#arReceiptEditorModal .ap-payment-payee-select-field .select2-container,
#whtCertEditorModal .ap-payment-payee-select-field .select2-container,
#reservationEditorModal .ap-payment-payee-select-field .select2-container,
#vehicleSaleEditorModal .ap-payment-payee-select-field .select2-container,
#vehicleDeliveryEditorModal .ap-payment-payee-select-field .select2-container{
    width: 100% !important;
    max-width: 420px;
}

#apPaymentEditorModal .ap-payment-manual-payee-toggle,
#receiptPaymentEditorModal .ap-payment-manual-payee-toggle,
#arReceiptEditorModal .ap-payment-manual-payee-toggle,
#whtCertEditorModal .ap-payment-manual-payee-toggle,
#reservationEditorModal .ap-payment-manual-payee-toggle,
#vehicleSaleEditorModal .ap-payment-manual-payee-toggle,
#vehicleDeliveryEditorModal .ap-payment-manual-payee-toggle{
    flex: 0 0 auto;
}

#apPaymentEditorModal .ap-payment-manual-payee-toggle .btn,
#receiptPaymentEditorModal .ap-payment-manual-payee-toggle .btn,
#arReceiptEditorModal .ap-payment-manual-payee-toggle .btn,
#whtCertEditorModal .ap-payment-manual-payee-toggle .btn,
#reservationEditorModal .ap-payment-manual-payee-toggle .btn,
#reservationEditorModal .ap-payment-manual-payee-toggle a.btn,
#vehicleSaleEditorModal .ap-payment-manual-payee-toggle .btn,
#vehicleDeliveryEditorModal .ap-payment-manual-payee-toggle .btn{
    white-space: nowrap;
}

#apPaymentEditorModal .ap-payment-payee-manual-fields,
#receiptPaymentEditorModal .ap-payment-payee-manual-fields,
#arReceiptEditorModal .ap-payment-payee-manual-fields,
#whtCertEditorModal .ap-payment-payee-manual-fields,
#apPaymentEditorModal .ap-payment-payee-tax-address-fields,
#receiptPaymentEditorModal .ap-payment-payee-tax-address-fields,
#arReceiptEditorModal .ap-payment-payee-tax-address-fields,
#reservationEditorModal .ap-payment-payee-tax-address-fields,
#vehicleSaleEditorModal .ap-payment-payee-tax-address-fields,
#vehicleDeliveryEditorModal .ap-payment-payee-tax-address-fields{
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 4px;
}

#apPaymentEditorModal .ap-payment-payee-manual-fields[hidden],
#receiptPaymentEditorModal .ap-payment-payee-manual-fields[hidden],
#arReceiptEditorModal .ap-payment-payee-manual-fields[hidden],
#whtCertEditorModal .ap-payment-payee-manual-fields[hidden],
#apPaymentEditorModal .ap-payment-payee-tax-address-fields[hidden],
#receiptPaymentEditorModal .ap-payment-payee-tax-address-fields[hidden],
#arReceiptEditorModal .ap-payment-payee-tax-address-fields[hidden]{
    display: none !important;
}

#apPaymentEditorModal .ap-payment-payee-select-field[hidden],
#receiptPaymentEditorModal .ap-payment-payee-select-field[hidden],
#arReceiptEditorModal .ap-payment-payee-select-field[hidden],
#whtCertEditorModal .ap-payment-payee-select-field[hidden]{
    display: none !important;
}

#apPaymentEditorModal .ap-payment-payee-tax-address-row,
#receiptPaymentEditorModal .ap-payment-payee-tax-address-row,
#arReceiptEditorModal .ap-payment-payee-tax-address-row,
#reservationEditorModal .ap-payment-payee-tax-address-row,
#vehicleSaleEditorModal .ap-payment-payee-tax-address-row,
#vehicleDeliveryEditorModal .ap-payment-payee-tax-address-row{
    align-items: flex-end;
    flex-wrap: nowrap;
}

#apPaymentEditorModal .ap-payment-payee-tax-address-row > .ap-payment-payee-tax-field,
#receiptPaymentEditorModal .ap-payment-payee-tax-address-row > .ap-payment-payee-tax-field,
#arReceiptEditorModal .ap-payment-payee-tax-address-row > .ap-payment-payee-tax-field,
#reservationEditorModal .ap-payment-payee-tax-address-row > .ap-payment-payee-tax-field,
#vehicleSaleEditorModal .ap-payment-payee-tax-address-row > .ap-payment-payee-tax-field,
#vehicleDeliveryEditorModal .ap-payment-payee-tax-address-row > .ap-payment-payee-tax-field{
    flex: 0 0 auto;
}

#apPaymentEditorModal .ap-payment-payee-tax-address-row > .ap-payment-payee-address-field,
#receiptPaymentEditorModal .ap-payment-payee-tax-address-row > .ap-payment-payee-address-field,
#arReceiptEditorModal .ap-payment-payee-tax-address-row > .ap-payment-payee-address-field,
#reservationEditorModal .ap-payment-payee-tax-address-row > .ap-payment-payee-address-field,
#vehicleSaleEditorModal .ap-payment-payee-tax-address-row > .ap-payment-payee-address-field,
#vehicleDeliveryEditorModal .ap-payment-payee-tax-address-row > .ap-payment-payee-address-field{
    flex: 1 1 auto;
    min-width: 0;
}

#apPaymentEditorModal .ap-payment-input-tax,
#receiptPaymentEditorModal .ap-payment-input-tax,
#arReceiptEditorModal .ap-payment-input-tax,
#whtCertEditorModal .ap-payment-input-tax,
#reservationEditorModal .ap-payment-input-tax,
#vehicleSaleEditorModal .ap-payment-input-tax,
#vehicleDeliveryEditorModal .ap-payment-input-tax{
    width: 28ch;
    max-width: min(100%, 28ch);
}

#apPaymentEditorModal .ap-payment-input-address,
#receiptPaymentEditorModal .ap-payment-input-address,
#arReceiptEditorModal .ap-payment-input-address,
#whtCertEditorModal .ap-payment-input-address,
#reservationEditorModal .ap-payment-input-address,
#vehicleSaleEditorModal .ap-payment-input-address,
#vehicleDeliveryEditorModal .ap-payment-input-address{
    width: 100%;
    max-width: 100%;
}

#apPaymentEditorModal .ap-payment-input-name,
#receiptPaymentEditorModal .ap-payment-input-name,
#arReceiptEditorModal .ap-payment-input-name,
#whtCertEditorModal .ap-payment-input-name{
    width: 36ch;
    max-width: min(100%, 36ch);
}

#apPaymentEditorModal .ap-payment-payee-info-box,
#receiptPaymentEditorModal .ap-payment-payee-info-box,
#arReceiptEditorModal .ap-payment-payee-info-box,
#whtCertEditorModal .ap-payment-payee-info-box,
#reservationEditorModal .ap-payment-payee-info-box,
#vehicleSaleEditorModal .ap-payment-payee-info-box,
#vehicleDeliveryEditorModal .ap-payment-payee-info-box,
#financeApplicationEditorModal .ap-payment-payee-info-box,
#financeFollowUpEditorModal .ap-payment-payee-info-box,
#salesCommissionEditorModal .ap-payment-payee-info-box{
    display: grid;
    grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
    gap: 12px 20px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #f8fafc;
}

#dfpEditorModal .ap-payment-payee-info-box{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 16px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #f8fafc;
    width: 100%;
    box-sizing: border-box;
}

/* Reservation: vehicle info uses full width of vehicle panel */
#reservationEditorModal .ap-payment-payee-info-box {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
}

#apPaymentEditorModal .ap-payment-payee-info-box[hidden],
#receiptPaymentEditorModal .ap-payment-payee-info-box[hidden],
#arReceiptEditorModal .ap-payment-payee-info-box[hidden],
#whtCertEditorModal .ap-payment-payee-info-box[hidden],
#reservationEditorModal .ap-payment-payee-info-box[hidden],
#vehicleSaleEditorModal .ap-payment-payee-info-box[hidden],
#vehicleDeliveryEditorModal .ap-payment-payee-info-box[hidden],
#financeApplicationEditorModal .ap-payment-payee-info-box[hidden],
#financeFollowUpEditorModal .ap-payment-payee-info-box[hidden],
#salesCommissionEditorModal .ap-payment-payee-info-box[hidden],
#dfpEditorModal .ap-payment-payee-info-box[hidden]{
    display: none !important;
}

#apPaymentEditorModal .ap-payment-payee-info-item,
#receiptPaymentEditorModal .ap-payment-payee-info-item,
#arReceiptEditorModal .ap-payment-payee-info-item,
#whtCertEditorModal .ap-payment-payee-info-item,
#reservationEditorModal .ap-payment-payee-info-item,
#vehicleSaleEditorModal .ap-payment-payee-info-item,
#vehicleDeliveryEditorModal .ap-payment-payee-info-item,
#financeApplicationEditorModal .ap-payment-payee-info-item,
#financeFollowUpEditorModal .ap-payment-payee-info-item,
#salesCommissionEditorModal .ap-payment-payee-info-item,
#dfpEditorModal .ap-payment-payee-info-item{
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

#apPaymentEditorModal .ap-payment-payee-info-label,
#receiptPaymentEditorModal .ap-payment-payee-info-label,
#arReceiptEditorModal .ap-payment-payee-info-label,
#whtCertEditorModal .ap-payment-payee-info-label,
#reservationEditorModal .ap-payment-payee-info-label,
#vehicleSaleEditorModal .ap-payment-payee-info-label,
#vehicleDeliveryEditorModal .ap-payment-payee-info-label,
#financeApplicationEditorModal .ap-payment-payee-info-label,
#financeFollowUpEditorModal .ap-payment-payee-info-label,
#salesCommissionEditorModal .ap-payment-payee-info-label,
#dfpEditorModal .ap-payment-payee-info-label{
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
}

#apPaymentEditorModal .ap-payment-payee-info-value,
#receiptPaymentEditorModal .ap-payment-payee-info-value,
#arReceiptEditorModal .ap-payment-payee-info-value,
#whtCertEditorModal .ap-payment-payee-info-value,
#reservationEditorModal .ap-payment-payee-info-value,
#vehicleSaleEditorModal .ap-payment-payee-info-value,
#vehicleDeliveryEditorModal .ap-payment-payee-info-value,
#financeApplicationEditorModal .ap-payment-payee-info-value,
#financeFollowUpEditorModal .ap-payment-payee-info-value,
#salesCommissionEditorModal .ap-payment-payee-info-value,
#dfpEditorModal .ap-payment-payee-info-value{
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    white-space: pre-wrap;
    word-break: break-word;
}

/* Sales Commission — modal กระชับตามปริมาณข้อมูล (ไม่ใช้ความกว้าง 1240px ของเอกสารใหญ่) */
#salesCommissionEditorModal .purchase-appraisal-editor-dialog {
    width: min(100%, 800px);
}

#salesCommissionEditorModal .sc-sale-select-field {
    margin: 0;
}

#salesCommissionEditorModal .sc-sale-select-field .select2-container,
#salesCommissionEditorModal .sc-sale-select-field .ui-control {
    width: 100% !important;
}

#salesCommissionEditorModal .ap-payment-payee-info-box.sc-sale-ref-box {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    margin-top: 10px;
    gap: 8px 14px;
    padding: 10px 12px;
}

#salesCommissionEditorModal .ap-payment-payee-info-box.sc-sale-ref-box > .sc-info-vehicle {
    grid-column: 1 / -1;
}

#salesCommissionEditorModal .ap-payment-lines-card .pa-card-body {
    padding-top: 10px;
    padding-bottom: 10px;
}

#salesCommissionEditorModal .sc-calc-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 12px 14px;
}

#salesCommissionEditorModal .sc-calculation-type-options {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px 14px;
    margin: 0;
    padding: 0;
    flex: 0 0 auto;
}

#salesCommissionEditorModal .sc-radio-option {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    white-space: nowrap;
}

#salesCommissionEditorModal .sc-radio-option input {
    margin: 0;
}

#salesCommissionEditorModal .sc-field-percent,
#salesCommissionEditorModal .sc-field-fixed {
    flex: 0 0 auto;
    margin: 0;
}

#salesCommissionEditorModal .sc-field-percent[hidden],
#salesCommissionEditorModal .sc-field-fixed[hidden] {
    display: none !important;
}

#salesCommissionEditorModal .sc-field-percent .ui-control {
    width: 10ch;
    max-width: 10ch;
    text-align: right;
}

#salesCommissionEditorModal .sc-field-fixed .ui-control {
    width: 16ch;
    max-width: 16ch;
    text-align: right;
}

#salesCommissionEditorModal .sc-commission-result {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    margin-left: auto;
    padding: 6px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #f0fdf4;
    white-space: nowrap;
}

#salesCommissionEditorModal .sc-commission-result-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
}

#salesCommissionEditorModal .sc-commission-result-value {
    font-size: 16px;
    font-weight: 800;
    color: #15803d;
    font-variant-numeric: tabular-nums;
}

#salesCommissionEditorModal .sc-commission-result-unit {
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
}

@media (max-width: 720px) {
    #salesCommissionEditorModal .ap-payment-payee-info-box.sc-sale-ref-box {
        grid-template-columns: minmax(0, 1fr);
    }

    #salesCommissionEditorModal .ap-payment-payee-info-box.sc-sale-ref-box > .sc-info-vehicle {
        grid-column: auto;
    }

    #salesCommissionEditorModal .sc-calc-row {
        flex-wrap: wrap;
    }

    #salesCommissionEditorModal .sc-commission-result {
        margin-left: 0;
        width: 100%;
        justify-content: flex-start;
    }

    #salesCommissionEditorModal .sc-field-percent .ui-control,
    #salesCommissionEditorModal .sc-field-fixed .ui-control {
        width: 100% !important;
        max-width: none;
    }
}

#dfpEditorModal #dfpContractSummaryCard {
    margin-top: 12px;
}

#dfpEditorModal .ap-payment-payee-info-item.ap-payment-payee-info-address {
    grid-column: 1 / -1;
}

#dfpEditorModal .dfp-top-split.reservation-split-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 16px;
    align-items: stretch;
    width: 100%;
}

#dfpEditorModal .dfp-top-split > .reservation-split-panel {
    flex: 1 1 calc(50% - 8px);
    min-width: 0;
    display: flex;
    flex-direction: column;
}

#dfpEditorModal .dfp-top-split > .reservation-split-panel > .pa-card-body {
    flex: 1 1 auto;
}

#dfpEditorModal .dfp-settlement-panel .ap-payment-settlement-grid {
    height: 100%;
}

#dfpEditorModal .dfp-settlement-panel .ap-payment-settlement-attachment {
    flex: 1 1 auto;
}

#dfpEditorModal .dfp-settlement-panel .ap-payment-settlement-method {
    width: min(100%, 220px);
}

#dfpEditorModal .dfp-contract-panel .pa-card-body > .field + .field {
    margin-top: 12px;
}

@media (max-width: 1100px) {
    #dfpEditorModal .dfp-top-split.reservation-split-row {
        flex-wrap: wrap;
    }

    #dfpEditorModal .dfp-top-split > .reservation-split-panel {
        flex: 1 1 100%;
    }

    #dfpEditorModal .ap-payment-payee-info-box {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Finance Application: ข้อมูลรถและยอดขาย — 4 คอลัมน์จริง = Label | ค่า | Label | ค่า */
#financeApplicationEditorModal .finance-sale-info-box.ap-payment-payee-info-box {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 10px;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
}

#financeApplicationEditorModal .finance-sale-info-box .ap-payment-payee-info-item {
    display: contents;
}

#financeApplicationEditorModal .finance-sale-info-box .ap-payment-payee-info-label {
    display: block;
    margin: 0;
    padding: 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
    text-align: left;
    white-space: nowrap;
    align-self: baseline;
}

#financeApplicationEditorModal .finance-sale-info-box .ap-payment-payee-info-value {
    display: block;
    margin: 0;
    padding: 0 2px 0 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
    align-self: baseline;
}

#financeApplicationEditorModal .finance-sale-info-box .ap-payment-payee-info-value.amount {
    text-align: right;
}

@media (max-width: 900px) {
    #financeApplicationEditorModal .finance-sale-info-box.ap-payment-payee-info-box {
        grid-template-columns: max-content minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    #financeApplicationEditorModal .finance-case-sale-left {
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%;
    }
}

/* AutoDealer > การเงิน / ธนาคาร > Auto Generate ใบหัก ณ ที่จ่ายจากใบสำคัญจ่าย */
#apPaymentEditorModal .ap-payment-linked-wht-box,
#receiptPaymentEditorModal .ap-payment-linked-wht-box,
#arReceiptEditorModal .ap-payment-linked-wht-box,
#whtCertEditorModal .wht-cert-auto-source-box{
    margin-bottom: 12px;
    align-items: center;
}

#apPaymentEditorModal .ap-payment-linked-wht-actions,
#receiptPaymentEditorModal .ap-payment-linked-wht-actions,
#arReceiptEditorModal .ap-payment-linked-wht-actions,
#whtCertEditorModal .ap-payment-linked-wht-actions{
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}

#apPaymentEditorModal .ap-payment-wht-fields,
#receiptPaymentEditorModal .ap-payment-wht-fields,
#arReceiptEditorModal .ap-payment-wht-fields{
    margin-top: 4px;
}

#apPaymentEditorModal .ap-payment-line-wht-fields,
#receiptPaymentEditorModal .ap-payment-line-wht-fields,
#arReceiptEditorModal .ap-payment-line-wht-fields{
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#apPaymentEditorModal .ap-payment-line-wht-label,
#receiptPaymentEditorModal .ap-payment-line-wht-label,
#arReceiptEditorModal .ap-payment-line-wht-label{
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
}

#apPaymentEditorModal .ap-payment-line-wht-extra,
#receiptPaymentEditorModal .ap-payment-line-wht-extra,
#arReceiptEditorModal .ap-payment-line-wht-extra{
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#apPaymentEditorModal .ap-payment-line-wht-readonly,
#receiptPaymentEditorModal .ap-payment-line-wht-readonly,
#arReceiptEditorModal .ap-payment-line-wht-readonly{
    font-size: 12px;
    color: var(--text);
}

#apPaymentEditorModal .ap-payment-lines-card,
#receiptPaymentEditorModal .ap-payment-lines-card,
#arReceiptEditorModal .ap-payment-lines-card,
#whtCertEditorModal .ap-payment-lines-card,
#reservationEditorModal .ap-payment-lines-card{
    flex: 0 0 auto;
}

#apPaymentEditorModal .ap-payment-lines-table-wrap,
#receiptPaymentEditorModal .ap-payment-lines-table-wrap,
#arReceiptEditorModal .ap-payment-lines-table-wrap,
#whtCertEditorModal .ap-payment-lines-table-wrap,
#reservationEditorModal .ap-payment-lines-table-wrap{
    overflow-x: auto;
}

#apPaymentEditorModal .ap-payment-lines-table-wrap #apPaymentLinesTable,
#receiptPaymentEditorModal .ap-payment-lines-table-wrap #receiptPaymentLinesTable,
#arReceiptEditorModal .ap-payment-lines-table-wrap #receiptPaymentLinesTable,
#whtCertEditorModal .ap-payment-lines-table-wrap #whtCertLinesTable{
    min-width: 980px;
    width: 100%;
}

#reservationEditorModal .ap-payment-lines-table-wrap #reservationConditionsTable{
    width: 100%;
    min-width: 0;
    table-layout: fixed;
}

#vehicleSaleEditorModal .ap-payment-lines-table-wrap #vehicleSaleConditionsTable{
    width: 100%;
    min-width: 0;
    table-layout: fixed;
}

/* Reservation conditions: 5 columns (sale method + 4 money fields) */
#reservationEditorModal #reservationConditionsTable th:nth-child(1),
#reservationEditorModal #reservationConditionsTable td:nth-child(1){
    width: 18%;
}

#reservationEditorModal #reservationConditionsTable th:nth-child(2),
#reservationEditorModal #reservationConditionsTable td:nth-child(2),
#reservationEditorModal #reservationConditionsTable th:nth-child(3),
#reservationEditorModal #reservationConditionsTable td:nth-child(3),
#reservationEditorModal #reservationConditionsTable th:nth-child(4),
#reservationEditorModal #reservationConditionsTable td:nth-child(4),
#reservationEditorModal #reservationConditionsTable th:nth-child(5),
#reservationEditorModal #reservationConditionsTable td:nth-child(5){
    width: 20.5%;
}

/* VehicleSale conditions: 5 คอลัมน์กว้างเท่ากัน + หัวตารางชิดขวา */
#vehicleSaleEditorModal #vehicleSaleConditionsTable th,
#vehicleSaleEditorModal #vehicleSaleConditionsTable td {
    width: 20%;
}

#vehicleSaleEditorModal #vehicleSaleConditionsTable thead th {
    text-align: right;
}

#vehicleSaleEditorModal .vehicle-sale-conditions-table .vehicle-sale-down-col[hidden],
#vehicleSaleEditorModal .vehicle-sale-conditions-table .vehicle-sale-finance-amount-col[hidden],
#vehicleSaleEditorModal .vehicle-sale-conditions-table .vehicle-sale-finance-status-col[hidden] {
    display: none !important;
}

#vehicleSaleEditorModal .vehicle-sale-conditions-table-wrap {
    overflow-x: hidden;
}

#vehicleSaleEditorModal .vehicle-sale-finance-status-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
}

#vehicleSaleEditorModal .vehicle-sale-finance-status-btn {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    max-width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: default;
}

#vehicleSaleEditorModal .vehicle-sale-finance-status-btn.is-clickable:not(:disabled) {
    cursor: pointer;
}

#vehicleSaleEditorModal .vehicle-sale-finance-status-btn .status-badge {
    max-width: 100%;
    white-space: normal;
    text-align: center;
    line-height: 1.25;
}

#vehicleSaleEditorModal .vehicle-sale-finance-status-detail-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    color: var(--muted, #667085);
}

#vehicleSaleFinanceDetailModal .vehicle-sale-finance-detail-dialog {
    width: min(960px, calc(100vw - 24px));
}

#vehicleSaleFinanceDetailModal .vehicle-sale-finance-detail-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
    margin-bottom: 12px;
}

#vehicleSaleFinanceDetailModal .vehicle-sale-finance-detail-meta-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

#vehicleSaleFinanceDetailModal .vehicle-sale-finance-detail-meta-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--muted, #667085);
}

#vehicleSaleFinanceDetailModal .vehicle-sale-finance-detail-meta-value {
    font-size: 13px;
    font-weight: 600;
    word-break: break-word;
}

#vehicleSaleFinanceDetailModal .vehicle-sale-finance-detail-table-wrap {
    overflow-x: hidden;
}

#vehicleSaleFinanceDetailModal .vehicle-sale-finance-detail-table {
    table-layout: fixed;
    width: 100%;
}

#vehicleSaleFinanceDetailModal .vehicle-sale-finance-detail-table th:nth-child(1),
#vehicleSaleFinanceDetailModal .vehicle-sale-finance-detail-table td:nth-child(1) {
    width: 18%;
}

#vehicleSaleFinanceDetailModal .vehicle-sale-finance-detail-table th:nth-child(2),
#vehicleSaleFinanceDetailModal .vehicle-sale-finance-detail-table td:nth-child(2) {
    width: 12%;
}

#vehicleSaleFinanceDetailModal .vehicle-sale-finance-detail-table th:nth-child(3),
#vehicleSaleFinanceDetailModal .vehicle-sale-finance-detail-table td:nth-child(3),
#vehicleSaleFinanceDetailModal .vehicle-sale-finance-detail-table th:nth-child(4),
#vehicleSaleFinanceDetailModal .vehicle-sale-finance-detail-table td:nth-child(4),
#vehicleSaleFinanceDetailModal .vehicle-sale-finance-detail-table th:nth-child(6),
#vehicleSaleFinanceDetailModal .vehicle-sale-finance-detail-table td:nth-child(6) {
    width: 14%;
}

#vehicleSaleFinanceDetailModal .vehicle-sale-finance-detail-table th:nth-child(5),
#vehicleSaleFinanceDetailModal .vehicle-sale-finance-detail-table td:nth-child(5) {
    width: 10%;
}

#vehicleSaleFinanceDetailModal .vehicle-sale-finance-detail-table th:nth-child(7),
#vehicleSaleFinanceDetailModal .vehicle-sale-finance-detail-table td:nth-child(7) {
    width: 14%;
}

#vehicleSaleFinanceDetailModal .vehicle-sale-finance-detail-table th,
#vehicleSaleFinanceDetailModal .vehicle-sale-finance-detail-table td {
    word-break: break-word;
    vertical-align: middle;
}

/* คอลัมน์ 2–7: กึ่งกลางทั้ง header และข้อมูล (ยกเว้นบริษัทไฟแนนซ์) */
#vehicleSaleFinanceDetailModal .vehicle-sale-finance-detail-table th:nth-child(n+2),
#vehicleSaleFinanceDetailModal .vehicle-sale-finance-detail-table td:nth-child(n+2) {
    text-align: center;
}

#vehicleSaleFinanceDetailModal .vehicle-sale-finance-detail-table td.amount {
    white-space: nowrap;
}

#vehicleSaleFinanceDetailModal .vehicle-sale-finance-detail-empty-row td {
    text-align: center;
    color: var(--muted, #667085);
    padding: 18px 12px;
}

#apPaymentEditorModal .ap-payment-summary-cards,
#receiptPaymentEditorModal .ap-payment-summary-cards,
#arReceiptEditorModal .ap-payment-summary-cards,
#whtCertEditorModal .ap-payment-summary-cards,
#bankReconcileEditorModal .ap-payment-summary-cards,
#reservationEditorModal .ap-payment-summary-cards,
#vehicleSaleEditorModal .ap-payment-summary-cards,
#salesCommissionEditorModal .ap-payment-summary-cards{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

#apPaymentEditorModal .ap-payment-summary-tile,
#receiptPaymentEditorModal .ap-payment-summary-tile,
#arReceiptEditorModal .ap-payment-summary-tile,
#whtCertEditorModal .ap-payment-summary-tile,
#bankReconcileEditorModal .ap-payment-summary-tile,
#reservationEditorModal .ap-payment-summary-tile,
#vehicleSaleEditorModal .ap-payment-summary-tile,
#salesCommissionEditorModal .ap-payment-summary-tile{
    border-radius: 14px;
    padding: 14px 16px;
    border: 1px solid transparent;
}

#apPaymentEditorModal .ap-payment-summary-tile-label,
#receiptPaymentEditorModal .ap-payment-summary-tile-label,
#arReceiptEditorModal .ap-payment-summary-tile-label,
#whtCertEditorModal .ap-payment-summary-tile-label,
#bankReconcileEditorModal .ap-payment-summary-tile-label,
#reservationEditorModal .ap-payment-summary-tile-label,
#vehicleSaleEditorModal .ap-payment-summary-tile-label,
#salesCommissionEditorModal .ap-payment-summary-tile-label{
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 8px;
}

#apPaymentEditorModal .ap-payment-summary-tile-value,
#receiptPaymentEditorModal .ap-payment-summary-tile-value,
#arReceiptEditorModal .ap-payment-summary-tile-value,
#whtCertEditorModal .ap-payment-summary-tile-value,
#bankReconcileEditorModal .ap-payment-summary-tile-value,
#reservationEditorModal .ap-payment-summary-tile-value,
#vehicleSaleEditorModal .ap-payment-summary-tile-value,
#salesCommissionEditorModal .ap-payment-summary-tile-value{
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 6px;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.2;
}

#apPaymentEditorModal .ap-payment-summary-tile-unit,
#receiptPaymentEditorModal .ap-payment-summary-tile-unit,
#arReceiptEditorModal .ap-payment-summary-tile-unit,
#whtCertEditorModal .ap-payment-summary-tile-unit,
#bankReconcileEditorModal .ap-payment-summary-tile-unit,
#reservationEditorModal .ap-payment-summary-tile-unit,
#vehicleSaleEditorModal .ap-payment-summary-tile-unit,
#salesCommissionEditorModal .ap-payment-summary-tile-unit{
    font-size: 12px;
    font-weight: 700;
}

#apPaymentEditorModal .ap-payment-summary-tile-gross,
#receiptPaymentEditorModal .ap-payment-summary-tile-gross,
#arReceiptEditorModal .ap-payment-summary-tile-gross,
#whtCertEditorModal .ap-payment-summary-tile-gross,
#bankReconcileEditorModal .ap-payment-summary-tile-gross,
#reservationEditorModal .ap-payment-summary-tile-gross,
#vehicleSaleEditorModal .ap-payment-summary-tile-gross,
#salesCommissionEditorModal .ap-payment-summary-tile-gross{
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1e3a8a;
}

#apPaymentEditorModal .ap-payment-summary-tile-wh,
#receiptPaymentEditorModal .ap-payment-summary-tile-wh,
#arReceiptEditorModal .ap-payment-summary-tile-wh,
#whtCertEditorModal .ap-payment-summary-tile-wh,
#bankReconcileEditorModal .ap-payment-summary-tile-wh,
#reservationEditorModal .ap-payment-summary-tile-wh,
#vehicleSaleEditorModal .ap-payment-summary-tile-wh{
    background: #fff7ed;
    border-color: #fed7aa;
    color: #9a3412;
}

#apPaymentEditorModal .ap-payment-summary-tile-net,
#receiptPaymentEditorModal .ap-payment-summary-tile-net,
#arReceiptEditorModal .ap-payment-summary-tile-net,
#whtCertEditorModal .ap-payment-summary-tile-net,
#bankReconcileEditorModal .ap-payment-summary-tile-net,
#reservationEditorModal .ap-payment-summary-tile-net,
#vehicleSaleEditorModal .ap-payment-summary-tile-net,
#salesCommissionEditorModal .ap-payment-summary-tile-net{
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #065f46;
}

/* Purchase Order editor */
#purchaseOrderEditorModal .po-editor-form,
#purchaseReceiveEditorModal .po-editor-form,
#purchaseDebitNoteEditorModal .po-editor-form,
#salesDebitNoteEditorModal .po-editor-form,
#billingNoteEditorModal .po-editor-form,
#arReceiptEditorModal .po-editor-form,
#salesCreditNoteEditorModal .po-editor-form,
#purchaseCreditNoteEditorModal .po-editor-form,
#salesInvoiceEditorModal .po-editor-form,
#purchaseReturnEditorModal .po-editor-form , #salesReturnEditorModal .po-editor-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

#purchaseOrderEditorModal .po-supplier-card,
#purchaseReceiveEditorModal .po-supplier-card,
#purchaseDebitNoteEditorModal .po-supplier-card,
#salesDebitNoteEditorModal .po-supplier-card,
#billingNoteEditorModal .po-supplier-card,
#arReceiptEditorModal .po-supplier-card,
#salesCreditNoteEditorModal .po-supplier-card,
#purchaseCreditNoteEditorModal .po-supplier-card,
#salesInvoiceEditorModal .po-supplier-card,
#purchaseReturnEditorModal .po-supplier-card , #salesReturnEditorModal .po-supplier-card {
    margin: 0;
    padding: 16px;
    border: 1px solid #dbe3f0;
    border-radius: 14px;
    background: #f8fafc;
}

#purchaseOrderEditorModal .po-supplier-top,
#purchaseReceiveEditorModal .po-supplier-top,
#purchaseDebitNoteEditorModal .po-supplier-top,
#salesDebitNoteEditorModal .po-supplier-top,
#billingNoteEditorModal .po-supplier-top,
#arReceiptEditorModal .po-supplier-top,
#salesCreditNoteEditorModal .po-supplier-top,
#purchaseCreditNoteEditorModal .po-supplier-top,
#salesInvoiceEditorModal .po-supplier-top,
#purchaseReturnEditorModal .po-supplier-top , #salesReturnEditorModal .po-supplier-top {
    display: grid;
    grid-template-columns: minmax(200px, 300px) 120px minmax(200px, 280px);
    gap: 14px;
    align-items: start;
    justify-content: start;
}

/* ใบสั่งซื้อกว้าง (ค้นหา) | เลขกำกับ = รหัสสั้น ~doc-no | เครดิตเทอมแคบ */
#purchaseReceiveEditorModal .po-supplier-top {
    grid-template-columns: minmax(200px, 300px) 180px 120px;
}

#purchaseReceiveEditorModal .pr-invoice-field .ui-control,
#purchaseReceiveEditorModal .pr-invoice-field .ui-control {
    width: 100%;
    max-width: 180px;
}

#purchaseOrderEditorModal .po-supplier-select-field .select2-container,
#purchaseReceiveEditorModal .po-supplier-select-field .select2-container,
#purchaseDebitNoteEditorModal .po-supplier-select-field .select2-container,
#salesDebitNoteEditorModal .po-supplier-select-field .select2-container,
#billingNoteEditorModal .po-supplier-select-field .select2-container,
#salesCreditNoteEditorModal .po-supplier-select-field .select2-container,
#purchaseCreditNoteEditorModal .po-supplier-select-field .select2-container,
#salesInvoiceEditorModal .po-supplier-select-field .select2-container,
#purchaseReturnEditorModal .po-supplier-select-field .select2-container, #salesReturnEditorModal .po-supplier-select-field .select2-container,
#purchaseOrderEditorModal .po-supplier-select-field .select2-container,
#purchaseReceiveEditorModal .po-supplier-select-field .select2-container,
#purchaseDebitNoteEditorModal .po-supplier-select-field .select2-container,
#salesDebitNoteEditorModal .po-supplier-select-field .select2-container,
#billingNoteEditorModal .po-supplier-select-field .select2-container,
#salesCreditNoteEditorModal .po-supplier-select-field .select2-container,
#purchaseCreditNoteEditorModal .po-supplier-select-field .select2-container,
#salesInvoiceEditorModal .po-supplier-select-field .select2-container,
#purchaseReturnEditorModal .po-supplier-select-field .select2-container , #salesReturnEditorModal .po-supplier-select-field .select2-container {
    width: 100% !important;
    max-width: 300px;
}

#purchaseOrderEditorModal .po-credit-term-field .select2-container,
#purchaseReceiveEditorModal .po-credit-term-field .select2-container,
#purchaseDebitNoteEditorModal .po-credit-term-field .select2-container,
#salesDebitNoteEditorModal .po-credit-term-field .select2-container,
#billingNoteEditorModal .po-credit-term-field .select2-container,
#salesCreditNoteEditorModal .po-credit-term-field .select2-container,
#purchaseCreditNoteEditorModal .po-credit-term-field .select2-container,
#salesInvoiceEditorModal .po-credit-term-field .select2-container,
#purchaseReturnEditorModal .po-credit-term-field .select2-container, #salesReturnEditorModal .po-credit-term-field .select2-container,
#purchaseOrderEditorModal .po-credit-term-field .select2-container,
#purchaseReceiveEditorModal .po-credit-term-field .select2-container,
#purchaseDebitNoteEditorModal .po-credit-term-field .select2-container,
#salesDebitNoteEditorModal .po-credit-term-field .select2-container,
#billingNoteEditorModal .po-credit-term-field .select2-container,
#salesCreditNoteEditorModal .po-credit-term-field .select2-container,
#purchaseCreditNoteEditorModal .po-credit-term-field .select2-container,
#salesInvoiceEditorModal .po-credit-term-field .select2-container,
#purchaseReturnEditorModal .po-credit-term-field .select2-container , #salesReturnEditorModal .po-credit-term-field .select2-container {
    width: 100% !important;
    max-width: 120px;
}

#purchaseOrderEditorModal .po-ref-stock-field .select2-container,
#purchaseReceiveEditorModal .po-ref-stock-field .select2-container,
#purchaseDebitNoteEditorModal .po-ref-stock-field .select2-container,
#salesDebitNoteEditorModal .po-ref-stock-field .select2-container,
#billingNoteEditorModal .po-ref-stock-field .select2-container,
#salesCreditNoteEditorModal .po-ref-stock-field .select2-container,
#purchaseCreditNoteEditorModal .po-ref-stock-field .select2-container,
#salesInvoiceEditorModal .po-ref-stock-field .select2-container,
#purchaseReturnEditorModal .po-ref-stock-field .select2-container, #salesReturnEditorModal .po-ref-stock-field .select2-container,
#purchaseOrderEditorModal .po-ref-stock-field .select2-container,
#purchaseReceiveEditorModal .po-ref-stock-field .select2-container,
#purchaseDebitNoteEditorModal .po-ref-stock-field .select2-container,
#salesDebitNoteEditorModal .po-ref-stock-field .select2-container,
#billingNoteEditorModal .po-ref-stock-field .select2-container,
#salesCreditNoteEditorModal .po-ref-stock-field .select2-container,
#purchaseCreditNoteEditorModal .po-ref-stock-field .select2-container,
#salesInvoiceEditorModal .po-ref-stock-field .select2-container,
#purchaseReturnEditorModal .po-ref-stock-field .select2-container , #salesReturnEditorModal .po-ref-stock-field .select2-container {
    width: 100% !important;
    max-width: 280px;
}

#purchaseOrderEditorModal .po-supplier-meta,
#purchaseReceiveEditorModal .po-supplier-meta,
#purchaseDebitNoteEditorModal .po-supplier-meta,
#salesDebitNoteEditorModal .po-supplier-meta,
#billingNoteEditorModal .po-supplier-meta,
#arReceiptEditorModal .po-supplier-meta,
#salesCreditNoteEditorModal .po-supplier-meta,
#purchaseCreditNoteEditorModal .po-supplier-meta,
#salesInvoiceEditorModal .po-supplier-meta,
#purchaseReturnEditorModal .po-supplier-meta , #salesReturnEditorModal .po-supplier-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 20px;
    margin-top: 14px;
}

#purchaseOrderEditorModal .po-supplier-meta-col,
#purchaseReceiveEditorModal .po-supplier-meta-col,
#purchaseDebitNoteEditorModal .po-supplier-meta-col,
#salesDebitNoteEditorModal .po-supplier-meta-col,
#billingNoteEditorModal .po-supplier-meta-col,
#arReceiptEditorModal .po-supplier-meta-col,
#salesCreditNoteEditorModal .po-supplier-meta-col,
#purchaseCreditNoteEditorModal .po-supplier-meta-col,
#salesInvoiceEditorModal .po-supplier-meta-col,
#purchaseReturnEditorModal .po-supplier-meta-col , #salesReturnEditorModal .po-supplier-meta-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

#purchaseOrderEditorModal .po-supplier-meta-item,
#purchaseReceiveEditorModal .po-supplier-meta-item,
#purchaseDebitNoteEditorModal .po-supplier-meta-item,
#salesDebitNoteEditorModal .po-supplier-meta-item,
#billingNoteEditorModal .po-supplier-meta-item,
#arReceiptEditorModal .po-supplier-meta-item,
#salesCreditNoteEditorModal .po-supplier-meta-item,
#purchaseCreditNoteEditorModal .po-supplier-meta-item,
#salesInvoiceEditorModal .po-supplier-meta-item,
#purchaseReturnEditorModal .po-supplier-meta-item , #salesReturnEditorModal .po-supplier-meta-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
}

#purchaseOrderEditorModal .po-supplier-meta-icon,
#purchaseReceiveEditorModal .po-supplier-meta-icon,
#purchaseDebitNoteEditorModal .po-supplier-meta-icon,
#salesDebitNoteEditorModal .po-supplier-meta-icon,
#billingNoteEditorModal .po-supplier-meta-icon,
#arReceiptEditorModal .po-supplier-meta-icon,
#salesCreditNoteEditorModal .po-supplier-meta-icon,
#purchaseCreditNoteEditorModal .po-supplier-meta-icon,
#salesInvoiceEditorModal .po-supplier-meta-icon,
#purchaseReturnEditorModal .po-supplier-meta-icon , #salesReturnEditorModal .po-supplier-meta-icon {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    color: #94a3b8;
}

#purchaseOrderEditorModal .po-supplier-meta-icon svg ,
#purchaseReceiveEditorModal .po-supplier-meta-icon svg,
#purchaseDebitNoteEditorModal .po-supplier-meta-icon svg,
#salesDebitNoteEditorModal .po-supplier-meta-icon svg,
#billingNoteEditorModal .po-supplier-meta-icon svg,
#arReceiptEditorModal .po-supplier-meta-icon svg,
#salesCreditNoteEditorModal .po-supplier-meta-icon svg,
#purchaseCreditNoteEditorModal .po-supplier-meta-icon svg,
#salesInvoiceEditorModal .po-supplier-meta-icon svg,
#purchaseReturnEditorModal .po-supplier-meta-icon svg , #salesReturnEditorModal .po-supplier-meta-icon svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
    stroke: currentColor;
}

#purchaseOrderEditorModal .po-supplier-meta-text,
#purchaseReceiveEditorModal .po-supplier-meta-text,
#purchaseDebitNoteEditorModal .po-supplier-meta-text,
#salesDebitNoteEditorModal .po-supplier-meta-text,
#billingNoteEditorModal .po-supplier-meta-text,
#arReceiptEditorModal .po-supplier-meta-text,
#salesCreditNoteEditorModal .po-supplier-meta-text,
#purchaseCreditNoteEditorModal .po-supplier-meta-text,
#salesInvoiceEditorModal .po-supplier-meta-text,
#purchaseReturnEditorModal .po-supplier-meta-text , #salesReturnEditorModal .po-supplier-meta-text {
    min-width: 0;
    line-height: 1.45;
}

#purchaseOrderEditorModal .po-supplier-meta-label,
#purchaseReceiveEditorModal .po-supplier-meta-label,
#purchaseDebitNoteEditorModal .po-supplier-meta-label,
#salesDebitNoteEditorModal .po-supplier-meta-label,
#billingNoteEditorModal .po-supplier-meta-label,
#arReceiptEditorModal .po-supplier-meta-label,
#salesCreditNoteEditorModal .po-supplier-meta-label,
#purchaseCreditNoteEditorModal .po-supplier-meta-label,
#salesInvoiceEditorModal .po-supplier-meta-label,
#purchaseReturnEditorModal .po-supplier-meta-label , #salesReturnEditorModal .po-supplier-meta-label {
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    margin-right: 4px;
}

#purchaseOrderEditorModal .po-supplier-meta-value,
#purchaseReceiveEditorModal .po-supplier-meta-value,
#purchaseDebitNoteEditorModal .po-supplier-meta-value,
#salesDebitNoteEditorModal .po-supplier-meta-value,
#billingNoteEditorModal .po-supplier-meta-value,
#arReceiptEditorModal .po-supplier-meta-value,
#salesCreditNoteEditorModal .po-supplier-meta-value,
#purchaseCreditNoteEditorModal .po-supplier-meta-value,
#salesInvoiceEditorModal .po-supplier-meta-value,
#purchaseReturnEditorModal .po-supplier-meta-value , #salesReturnEditorModal .po-supplier-meta-value {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    word-break: break-word;
}

#purchaseOrderEditorModal .po-lines-section,
#purchaseReceiveEditorModal .po-lines-section,
#purchaseDebitNoteEditorModal .po-lines-section,
#salesDebitNoteEditorModal .po-lines-section,
#billingNoteEditorModal .po-lines-section,
#arReceiptEditorModal .po-lines-section,
#salesCreditNoteEditorModal .po-lines-section,
#purchaseCreditNoteEditorModal .po-lines-section,
#salesInvoiceEditorModal .po-lines-section,
#purchaseReturnEditorModal .po-lines-section , #salesReturnEditorModal .po-lines-section {
    margin: 0;
}

#purchaseOrderEditorModal .po-lines-head,
#purchaseReceiveEditorModal .po-lines-head,
#purchaseDebitNoteEditorModal .po-lines-head,
#salesDebitNoteEditorModal .po-lines-head,
#billingNoteEditorModal .po-lines-head,
#arReceiptEditorModal .po-lines-head,
#salesCreditNoteEditorModal .po-lines-head,
#purchaseCreditNoteEditorModal .po-lines-head,
#salesInvoiceEditorModal .po-lines-head,
#purchaseReturnEditorModal .po-lines-head , #salesReturnEditorModal .po-lines-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

#purchaseOrderEditorModal .po-lines-title,
#purchaseReceiveEditorModal .po-lines-title,
#purchaseDebitNoteEditorModal .po-lines-title,
#salesDebitNoteEditorModal .po-lines-title,
#billingNoteEditorModal .po-lines-title,
#arReceiptEditorModal .po-lines-title,
#salesCreditNoteEditorModal .po-lines-title,
#purchaseCreditNoteEditorModal .po-lines-title,
#salesInvoiceEditorModal .po-lines-title,
#purchaseReturnEditorModal .po-lines-title , #salesReturnEditorModal .po-lines-title {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: #0f172a;
}

#purchaseOrderEditorModal .po-add-line-btn,
#purchaseReceiveEditorModal .po-add-line-btn,
#purchaseDebitNoteEditorModal .po-add-line-btn,
#salesDebitNoteEditorModal .po-add-line-btn,
#billingNoteEditorModal .po-add-line-btn,
#salesCreditNoteEditorModal .po-add-line-btn,
#purchaseCreditNoteEditorModal .po-add-line-btn,
#salesInvoiceEditorModal .po-add-line-btn,
#purchaseReturnEditorModal .po-add-line-btn , #salesReturnEditorModal .po-add-line-btn {
    white-space: nowrap;
    border-color: #93c5fd;
    color: #1d4ed8;
    background: #fff;
}

#purchaseOrderEditorModal .po-lines-table-wrap,
#purchaseReceiveEditorModal .po-lines-table-wrap,
#purchaseDebitNoteEditorModal .po-lines-table-wrap,
#salesDebitNoteEditorModal .po-lines-table-wrap,
#billingNoteEditorModal .po-lines-table-wrap,
#arReceiptEditorModal .po-lines-table-wrap,
#salesCreditNoteEditorModal .po-lines-table-wrap,
#purchaseCreditNoteEditorModal .po-lines-table-wrap,
#salesInvoiceEditorModal .po-lines-table-wrap,
#purchaseReturnEditorModal .po-lines-table-wrap , #salesReturnEditorModal .po-lines-table-wrap {
    overflow-x: auto;
    overflow-y: visible;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
}

#purchaseOrderEditorModal .po-lines-table,
#purchaseReceiveEditorModal .po-lines-table,
#purchaseDebitNoteEditorModal .po-lines-table,
#salesDebitNoteEditorModal .po-lines-table,
#billingNoteEditorModal .po-lines-table,
#arReceiptEditorModal .po-lines-table,
#salesCreditNoteEditorModal .po-lines-table,
#purchaseCreditNoteEditorModal .po-lines-table,
#salesInvoiceEditorModal .po-lines-table,
#purchaseReturnEditorModal .po-lines-table , #salesReturnEditorModal .po-lines-table {
    margin: 0;
    width: 100%;
}

#purchaseOrderEditorModal .po-lines-table thead th ,
#purchaseReceiveEditorModal .po-lines-table thead th,
#purchaseDebitNoteEditorModal .po-lines-table thead th,
#salesDebitNoteEditorModal .po-lines-table thead th,
#billingNoteEditorModal .po-lines-table thead th,
#arReceiptEditorModal .po-lines-table thead th,
#salesCreditNoteEditorModal .po-lines-table thead th,
#purchaseCreditNoteEditorModal .po-lines-table thead th,
#salesInvoiceEditorModal .po-lines-table thead th,
#purchaseReturnEditorModal .po-lines-table thead th , #salesReturnEditorModal .po-lines-table thead th {
    background: #f8fafc;
    font-weight: 700;
    white-space: nowrap;
    border-bottom: 1px solid #e2e8f0;
}

#purchaseOrderEditorModal .po-lines-table th,
#purchaseReceiveEditorModal .po-lines-table th,
#purchaseDebitNoteEditorModal .po-lines-table th,
#salesDebitNoteEditorModal .po-lines-table th,
#billingNoteEditorModal .po-lines-table th,
#arReceiptEditorModal .po-lines-table th,
#salesCreditNoteEditorModal .po-lines-table th,
#purchaseOrderEditorModal .po-lines-table td ,
#purchaseReceiveEditorModal .po-lines-table td,
#purchaseDebitNoteEditorModal .po-lines-table td,
#salesDebitNoteEditorModal .po-lines-table td,
#billingNoteEditorModal .po-lines-table td,
#arReceiptEditorModal .po-lines-table td,
#salesCreditNoteEditorModal .po-lines-table td,
#purchaseCreditNoteEditorModal .po-lines-table td,
#salesInvoiceEditorModal .po-lines-table td,
#purchaseReturnEditorModal .po-lines-table td , #salesReturnEditorModal .po-lines-table td {
    vertical-align: middle;
    padding: 10px 8px;
}

#purchaseOrderEditorModal .po-lines-table .ui-control,
#purchaseReceiveEditorModal .po-lines-table .ui-control,
#purchaseDebitNoteEditorModal .po-lines-table .ui-control,
#salesDebitNoteEditorModal .po-lines-table .ui-control,
#billingNoteEditorModal .po-lines-table .ui-control,
#arReceiptEditorModal .po-lines-table .ui-control,
#salesCreditNoteEditorModal .po-lines-table .ui-control,
#purchaseCreditNoteEditorModal .po-lines-table .ui-control,
#salesInvoiceEditorModal .po-lines-table .ui-control,
#purchaseReturnEditorModal .po-lines-table .ui-control , #salesReturnEditorModal .po-lines-table .ui-control {
    min-width: 0;
    width: 100%;
}

#purchaseOrderEditorModal .po-col-desc,
#purchaseReceiveEditorModal .po-col-desc,
#purchaseDebitNoteEditorModal .po-col-desc,
#salesDebitNoteEditorModal .po-col-desc,
#billingNoteEditorModal .po-col-desc,
#salesCreditNoteEditorModal .po-col-desc,
#purchaseCreditNoteEditorModal .po-col-desc,
#salesInvoiceEditorModal .po-col-desc,
#purchaseReturnEditorModal .po-col-desc , #salesReturnEditorModal .po-col-desc {
    min-width: 160px;
}

#purchaseOrderEditorModal .po-line-desc-stack,
#purchaseReceiveEditorModal .po-line-desc-stack,
#purchaseDebitNoteEditorModal .po-line-desc-stack,
#salesDebitNoteEditorModal .po-line-desc-stack,
#billingNoteEditorModal .po-line-desc-stack,
#salesCreditNoteEditorModal .po-line-desc-stack,
#purchaseCreditNoteEditorModal .po-line-desc-stack,
#salesInvoiceEditorModal .po-line-desc-stack,
#purchaseReturnEditorModal .po-line-desc-stack , #salesReturnEditorModal .po-line-desc-stack {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

#purchaseOrderEditorModal .po-line-desc-row,
#purchaseReceiveEditorModal .po-line-desc-row,
#purchaseDebitNoteEditorModal .po-line-desc-row,
#salesDebitNoteEditorModal .po-line-desc-row,
#billingNoteEditorModal .po-line-desc-row,
#salesCreditNoteEditorModal .po-line-desc-row,
#purchaseCreditNoteEditorModal .po-line-desc-row,
#salesInvoiceEditorModal .po-line-desc-row,
#purchaseReturnEditorModal .po-line-desc-row , #salesReturnEditorModal .po-line-desc-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(140px, 180px);
    gap: 8px;
    align-items: center;
}

#purchaseOrderEditorModal .po-line-desc-row .po-line-desc,
#purchaseReceiveEditorModal .po-line-desc-row .po-line-desc,
#purchaseDebitNoteEditorModal .po-line-desc-row .po-line-desc,
#salesDebitNoteEditorModal .po-line-desc-row .po-line-desc,
#billingNoteEditorModal .po-line-desc-row .po-line-desc,
#salesCreditNoteEditorModal .po-line-desc-row .po-line-desc,
#purchaseCreditNoteEditorModal .po-line-desc-row .po-line-desc,
#salesInvoiceEditorModal .po-line-desc-row .po-line-desc,
#purchaseReturnEditorModal .po-line-desc-row .po-line-desc , #salesReturnEditorModal .po-line-desc-row .po-line-desc {
    min-width: 0;
}

#purchaseOrderEditorModal .po-line-expense-field,
#purchaseReceiveEditorModal .po-line-expense-field,
#purchaseDebitNoteEditorModal .po-line-expense-field,
#salesDebitNoteEditorModal .po-line-expense-field,
#billingNoteEditorModal .po-line-expense-field,
#salesCreditNoteEditorModal .po-line-expense-field,
#purchaseCreditNoteEditorModal .po-line-expense-field,
#salesInvoiceEditorModal .po-line-expense-field,
#purchaseReturnEditorModal .po-line-expense-field , #salesReturnEditorModal .po-line-expense-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

#purchaseOrderEditorModal .po-line-meta-readonly,
#purchaseReceiveEditorModal .po-line-meta-readonly,
#purchaseDebitNoteEditorModal .po-line-meta-readonly,
#salesDebitNoteEditorModal .po-line-meta-readonly,
#billingNoteEditorModal .po-line-meta-readonly,
#salesCreditNoteEditorModal .po-line-meta-readonly,
#purchaseCreditNoteEditorModal .po-line-meta-readonly,
#salesInvoiceEditorModal .po-line-meta-readonly,
#purchaseReturnEditorModal .po-line-meta-readonly , #salesReturnEditorModal .po-line-meta-readonly {
    font-size: 12px;
    color: #334155;
    line-height: 1.4;
    padding: 6px 0;
}

@media (max-width: 900px) {
    #purchaseOrderEditorModal .po-line-desc-row,
#purchaseReceiveEditorModal .po-line-desc-row,
#purchaseDebitNoteEditorModal .po-line-desc-row,
#salesDebitNoteEditorModal .po-line-desc-row,
#billingNoteEditorModal .po-line-desc-row,
#salesCreditNoteEditorModal .po-line-desc-row,
#purchaseCreditNoteEditorModal .po-line-desc-row,
#salesInvoiceEditorModal .po-line-desc-row,
#purchaseReturnEditorModal .po-line-desc-row , #salesReturnEditorModal .po-line-desc-row {
        grid-template-columns: 1fr;
    }
}

#purchaseOrderEditorModal .po-col-qty,
#purchaseReceiveEditorModal .po-col-qty,
#purchaseDebitNoteEditorModal .po-col-qty,
#salesDebitNoteEditorModal .po-col-qty,
#billingNoteEditorModal .po-col-qty,
#salesCreditNoteEditorModal .po-col-qty,
#purchaseCreditNoteEditorModal .po-col-qty,
#salesInvoiceEditorModal .po-col-qty,
#purchaseReturnEditorModal .po-col-qty, #salesReturnEditorModal .po-col-qty,
#purchaseOrderEditorModal .po-col-price,
#purchaseReceiveEditorModal .po-col-price,
#purchaseDebitNoteEditorModal .po-col-price,
#salesDebitNoteEditorModal .po-col-price,
#billingNoteEditorModal .po-col-price,
#salesCreditNoteEditorModal .po-col-price,
#purchaseCreditNoteEditorModal .po-col-price,
#salesInvoiceEditorModal .po-col-price,
#purchaseReturnEditorModal .po-col-price, #salesReturnEditorModal .po-col-price,
#purchaseOrderEditorModal .po-col-discount,
#purchaseReceiveEditorModal .po-col-discount,
#purchaseDebitNoteEditorModal .po-col-discount,
#salesDebitNoteEditorModal .po-col-discount,
#billingNoteEditorModal .po-col-discount,
#salesCreditNoteEditorModal .po-col-discount,
#purchaseCreditNoteEditorModal .po-col-discount,
#salesInvoiceEditorModal .po-col-discount,
#purchaseReturnEditorModal .po-col-discount , #salesReturnEditorModal .po-col-discount {
    width: 112px;
    min-width: 112px;
    max-width: 112px;
}

#purchaseOrderEditorModal .po-col-total,
#purchaseReceiveEditorModal .po-col-total,
#purchaseDebitNoteEditorModal .po-col-total,
#salesDebitNoteEditorModal .po-col-total,
#billingNoteEditorModal .po-col-total,
#salesCreditNoteEditorModal .po-col-total,
#purchaseCreditNoteEditorModal .po-col-total,
#salesInvoiceEditorModal .po-col-total,
#purchaseReturnEditorModal .po-col-total , #salesReturnEditorModal .po-col-total {
    width: 100px;
    min-width: 72px;
}

#purchaseOrderEditorModal .po-col-unit,
#purchaseReceiveEditorModal .po-col-unit,
#purchaseDebitNoteEditorModal .po-col-unit,
#salesDebitNoteEditorModal .po-col-unit,
#billingNoteEditorModal .po-col-unit,
#salesCreditNoteEditorModal .po-col-unit,
#purchaseCreditNoteEditorModal .po-col-unit,
#salesInvoiceEditorModal .po-col-unit,
#purchaseReturnEditorModal .po-col-unit , #salesReturnEditorModal .po-col-unit {
    width: 80px;
    min-width: 64px;
    text-align: right;
}

#purchaseOrderEditorModal .po-col-action,
#purchaseReceiveEditorModal .po-col-action,
#purchaseDebitNoteEditorModal .po-col-action,
#salesDebitNoteEditorModal .po-col-action,
#billingNoteEditorModal .po-col-action,
#salesCreditNoteEditorModal .po-col-action,
#purchaseCreditNoteEditorModal .po-col-action,
#salesInvoiceEditorModal .po-col-action,
#purchaseReturnEditorModal .po-col-action , #salesReturnEditorModal .po-col-action {
    width: 44px;
}

#purchaseOrderEditorModal .po-lines-table .po-line-qty,
#purchaseReceiveEditorModal .po-lines-table .po-line-qty,
#purchaseDebitNoteEditorModal .po-lines-table .po-line-qty,
#salesDebitNoteEditorModal .po-lines-table .po-line-qty,
#billingNoteEditorModal .po-lines-table .po-line-qty,
#arReceiptEditorModal .po-lines-table .po-line-qty,
#salesCreditNoteEditorModal .po-lines-table .po-line-qty,
#purchaseCreditNoteEditorModal .po-lines-table .po-line-qty,
#salesInvoiceEditorModal .po-lines-table .po-line-qty,
#purchaseReturnEditorModal .po-lines-table .po-line-qty, #salesReturnEditorModal .po-lines-table .po-line-qty,
#purchaseOrderEditorModal .po-lines-table .po-line-price,
#purchaseReceiveEditorModal .po-lines-table .po-line-price,
#purchaseDebitNoteEditorModal .po-lines-table .po-line-price,
#salesDebitNoteEditorModal .po-lines-table .po-line-price,
#billingNoteEditorModal .po-lines-table .po-line-price,
#arReceiptEditorModal .po-lines-table .po-line-price,
#salesCreditNoteEditorModal .po-lines-table .po-line-price,
#purchaseCreditNoteEditorModal .po-lines-table .po-line-price,
#salesInvoiceEditorModal .po-lines-table .po-line-price,
#purchaseReturnEditorModal .po-lines-table .po-line-price, #salesReturnEditorModal .po-lines-table .po-line-price,
#purchaseOrderEditorModal .po-lines-table .po-line-discount,
#purchaseReceiveEditorModal .po-lines-table .po-line-discount,
#purchaseDebitNoteEditorModal .po-lines-table .po-line-discount,
#salesDebitNoteEditorModal .po-lines-table .po-line-discount,
#billingNoteEditorModal .po-lines-table .po-line-discount,
#arReceiptEditorModal .po-lines-table .po-line-discount,
#salesCreditNoteEditorModal .po-lines-table .po-line-discount,
#purchaseCreditNoteEditorModal .po-lines-table .po-line-discount,
#salesInvoiceEditorModal .po-lines-table .po-line-discount,
#purchaseReturnEditorModal .po-lines-table .po-line-discount, #salesReturnEditorModal .po-lines-table .po-line-discount,
#purchaseOrderEditorModal .po-lines-table .po-line-unit,
#purchaseReceiveEditorModal .po-lines-table .po-line-unit,
#purchaseDebitNoteEditorModal .po-lines-table .po-line-unit,
#salesDebitNoteEditorModal .po-lines-table .po-line-unit,
#billingNoteEditorModal .po-lines-table .po-line-unit,
#arReceiptEditorModal .po-lines-table .po-line-unit,
#salesCreditNoteEditorModal .po-lines-table .po-line-unit,
#purchaseCreditNoteEditorModal .po-lines-table .po-line-unit,
#salesInvoiceEditorModal .po-lines-table .po-line-unit,
#purchaseReturnEditorModal .po-lines-table .po-line-unit , #salesReturnEditorModal .po-lines-table .po-line-unit {
    text-align: right;
    box-sizing: border-box;
}

#purchaseOrderEditorModal .po-lines-empty,
#purchaseReceiveEditorModal .po-lines-empty,
#purchaseDebitNoteEditorModal .po-lines-empty,
#salesDebitNoteEditorModal .po-lines-empty,
#billingNoteEditorModal .po-lines-empty,
#arReceiptEditorModal .po-lines-empty,
#salesCreditNoteEditorModal .po-lines-empty,
#purchaseCreditNoteEditorModal .po-lines-empty,
#salesInvoiceEditorModal .po-lines-empty,
#purchaseReturnEditorModal .po-lines-empty , #salesReturnEditorModal .po-lines-empty {
    text-align: center;
    padding: 28px 12px !important;
}

#purchaseOrderEditorModal .po-summary-bar,
#purchaseReceiveEditorModal .po-summary-bar,
#purchaseDebitNoteEditorModal .po-summary-bar,
#salesDebitNoteEditorModal .po-summary-bar,
#billingNoteEditorModal .po-summary-bar,
#arReceiptEditorModal .po-summary-bar,
#salesCreditNoteEditorModal .po-summary-bar,
#purchaseCreditNoteEditorModal .po-summary-bar,
#salesInvoiceEditorModal .po-summary-bar,
#purchaseReturnEditorModal .po-summary-bar , #salesReturnEditorModal .po-summary-bar {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
    box-sizing: border-box;
    /* parent .po-editor-form gap = 18px → ดึงให้เหลือ ~12px จากปุ่มเพิ่มรายการ */
    margin: -6px 0 0;
    padding: 0;
    gap: 0;
    min-height: 78px;
    height: auto;
    border: 1px solid #bfdbfe;
    border-radius: 12px;
    background: #f0f7ff;
    overflow: hidden;
}

#purchaseOrderEditorModal .po-summary-bar-item,
#purchaseReceiveEditorModal .po-summary-bar-item,
#purchaseDebitNoteEditorModal .po-summary-bar-item,
#salesDebitNoteEditorModal .po-summary-bar-item,
#billingNoteEditorModal .po-summary-bar-item,
#arReceiptEditorModal .po-summary-bar-item,
#salesCreditNoteEditorModal .po-summary-bar-item,
#purchaseCreditNoteEditorModal .po-summary-bar-item,
#salesInvoiceEditorModal .po-summary-bar-item,
#purchaseReturnEditorModal .po-summary-bar-item , #salesReturnEditorModal .po-summary-bar-item {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 14px 10px;
    min-width: 0;
    box-sizing: border-box;
    border: 0;
    border-radius: 0;
    background: transparent;
    text-align: center;
}

#purchaseOrderEditorModal .po-summary-col-subtotal,
#purchaseReceiveEditorModal .po-summary-col-subtotal { flex: 1 1 20%; }
#purchaseDebitNoteEditorModal .po-summary-col-subtotal,
#salesDebitNoteEditorModal .po-summary-col-subtotal,
#billingNoteEditorModal .po-summary-col-subtotal,
#salesCreditNoteEditorModal .po-summary-col-subtotal,
#purchaseCreditNoteEditorModal .po-summary-col-subtotal { flex: 1 1 20%; }
#salesInvoiceEditorModal .po-summary-col-subtotal { flex: 1 1 20%; }
#purchaseReturnEditorModal .po-summary-col-subtotal , #salesReturnEditorModal .po-summary-col-subtotal { flex: 1 1 20%; }
#purchaseOrderEditorModal .po-summary-col-discount,
#purchaseReceiveEditorModal .po-summary-col-discount { flex: 1 1 18%; }
#purchaseDebitNoteEditorModal .po-summary-col-discount,
#salesDebitNoteEditorModal .po-summary-col-discount,
#billingNoteEditorModal .po-summary-col-discount,
#salesCreditNoteEditorModal .po-summary-col-discount,
#purchaseCreditNoteEditorModal .po-summary-col-discount { flex: 1 1 18%; }
#salesInvoiceEditorModal .po-summary-col-discount { flex: 1 1 18%; }
#purchaseReturnEditorModal .po-summary-col-discount , #salesReturnEditorModal .po-summary-col-discount { flex: 1 1 18%; }
#purchaseOrderEditorModal .po-summary-col-before-vat,
#purchaseReceiveEditorModal .po-summary-col-before-vat { flex: 1 1 20%; }
#purchaseDebitNoteEditorModal .po-summary-col-before-vat,
#salesDebitNoteEditorModal .po-summary-col-before-vat,
#billingNoteEditorModal .po-summary-col-before-vat,
#salesCreditNoteEditorModal .po-summary-col-before-vat,
#purchaseCreditNoteEditorModal .po-summary-col-before-vat { flex: 1 1 20%; }
#salesInvoiceEditorModal .po-summary-col-before-vat { flex: 1 1 20%; }
#purchaseReturnEditorModal .po-summary-col-before-vat , #salesReturnEditorModal .po-summary-col-before-vat { flex: 1 1 20%; }
#purchaseOrderEditorModal .po-summary-col-vat,
#purchaseReceiveEditorModal .po-summary-col-vat { flex: 1 1 18%; }
#purchaseDebitNoteEditorModal .po-summary-col-vat,
#salesDebitNoteEditorModal .po-summary-col-vat,
#billingNoteEditorModal .po-summary-col-vat,
#salesCreditNoteEditorModal .po-summary-col-vat,
#purchaseCreditNoteEditorModal .po-summary-col-vat { flex: 1 1 18%; }
#salesInvoiceEditorModal .po-summary-col-vat { flex: 1 1 18%; }
#purchaseReturnEditorModal .po-summary-col-vat , #salesReturnEditorModal .po-summary-col-vat { flex: 1 1 18%; }
#purchaseOrderEditorModal .po-summary-col-net,
#purchaseReceiveEditorModal .po-summary-col-net { flex: 1 1 24%; }
#purchaseDebitNoteEditorModal .po-summary-col-net,
#salesDebitNoteEditorModal .po-summary-col-net,
#billingNoteEditorModal .po-summary-col-net,
#salesCreditNoteEditorModal .po-summary-col-net,
#purchaseCreditNoteEditorModal .po-summary-col-net { flex: 1 1 24%; }
#salesInvoiceEditorModal .po-summary-col-net { flex: 1 1 24%; }
#purchaseReturnEditorModal .po-summary-col-net , #salesReturnEditorModal .po-summary-col-net { flex: 1 1 24%; }

/* เส้นแบ่งแนวตั้งภายในกรอบ — ไม่ชิดขอบบน/ล่าง */
#purchaseOrderEditorModal .po-summary-bar-item:not(.po-summary-bar-net)::after ,
#purchaseReceiveEditorModal .po-summary-bar-item:not(.po-summary-bar-net)::after,
#purchaseDebitNoteEditorModal .po-summary-bar-item:not(.po-summary-bar-net)::after,
#salesDebitNoteEditorModal .po-summary-bar-item:not(.po-summary-bar-net)::after,
#billingNoteEditorModal .po-summary-bar-item:not(.po-summary-bar-net)::after,
#arReceiptEditorModal .po-summary-bar-item:not(.po-summary-bar-net)::after,
#salesCreditNoteEditorModal .po-summary-bar-item:not(.po-summary-bar-net)::after,
#purchaseCreditNoteEditorModal .po-summary-bar-item:not(.po-summary-bar-net)::after,
#salesInvoiceEditorModal .po-summary-bar-item:not(.po-summary-bar-net)::after,
#purchaseReturnEditorModal .po-summary-bar-item:not(.po-summary-bar-net)::after , #salesReturnEditorModal .po-summary-bar-item:not(.po-summary-bar-net)::after {
    content: "";
    position: absolute;
    top: 12px;
    bottom: 12px;
    right: 0;
    width: 1px;
    background: #93c5fd;
    pointer-events: none;
}

#purchaseOrderEditorModal .po-summary-bar-label,
#purchaseReceiveEditorModal .po-summary-bar-label,
#purchaseDebitNoteEditorModal .po-summary-bar-label,
#salesDebitNoteEditorModal .po-summary-bar-label,
#billingNoteEditorModal .po-summary-bar-label,
#arReceiptEditorModal .po-summary-bar-label,
#salesCreditNoteEditorModal .po-summary-bar-label,
#purchaseCreditNoteEditorModal .po-summary-bar-label,
#salesInvoiceEditorModal .po-summary-bar-label,
#purchaseReturnEditorModal .po-summary-bar-label , #salesReturnEditorModal .po-summary-bar-label {
    display: block;
    width: 100%;
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    text-align: center;
    line-height: 1.25;
    word-break: break-word;
}

#purchaseOrderEditorModal .po-summary-bar-value,
#purchaseReceiveEditorModal .po-summary-bar-value,
#purchaseDebitNoteEditorModal .po-summary-bar-value,
#salesDebitNoteEditorModal .po-summary-bar-value,
#billingNoteEditorModal .po-summary-bar-value,
#arReceiptEditorModal .po-summary-bar-value,
#salesCreditNoteEditorModal .po-summary-bar-value,
#purchaseCreditNoteEditorModal .po-summary-bar-value,
#salesInvoiceEditorModal .po-summary-bar-value,
#purchaseReturnEditorModal .po-summary-bar-value , #salesReturnEditorModal .po-summary-bar-value {
    display: block;
    width: 100%;
    margin: 0;
    font-size: clamp(12px, 1.1vw, 15px);
    font-weight: 800;
    color: #0f172a;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

#purchaseOrderEditorModal .po-summary-bar-discount .po-summary-bar-label,
#purchaseReceiveEditorModal .po-summary-bar-discount .po-summary-bar-label,
#purchaseDebitNoteEditorModal .po-summary-bar-discount .po-summary-bar-label,
#salesDebitNoteEditorModal .po-summary-bar-discount .po-summary-bar-label,
#billingNoteEditorModal .po-summary-bar-discount .po-summary-bar-label,
#arReceiptEditorModal .po-summary-bar-discount .po-summary-bar-label,
#salesCreditNoteEditorModal .po-summary-bar-discount .po-summary-bar-label,
#purchaseCreditNoteEditorModal .po-summary-bar-discount .po-summary-bar-label,
#salesInvoiceEditorModal .po-summary-bar-discount .po-summary-bar-label,
#purchaseReturnEditorModal .po-summary-bar-discount .po-summary-bar-label, #salesReturnEditorModal .po-summary-bar-discount .po-summary-bar-label,
#purchaseOrderEditorModal .po-summary-bar-discount .po-summary-bar-value,
#purchaseReceiveEditorModal .po-summary-bar-discount .po-summary-bar-value,
#purchaseDebitNoteEditorModal .po-summary-bar-discount .po-summary-bar-value,
#salesDebitNoteEditorModal .po-summary-bar-discount .po-summary-bar-value,
#billingNoteEditorModal .po-summary-bar-discount .po-summary-bar-value,
#arReceiptEditorModal .po-summary-bar-discount .po-summary-bar-value,
#salesCreditNoteEditorModal .po-summary-bar-discount .po-summary-bar-value,
#purchaseCreditNoteEditorModal .po-summary-bar-discount .po-summary-bar-value,
#salesInvoiceEditorModal .po-summary-bar-discount .po-summary-bar-value,
#purchaseReturnEditorModal .po-summary-bar-discount .po-summary-bar-value , #salesReturnEditorModal .po-summary-bar-discount .po-summary-bar-value {
    color: #dc2626;
}

/* ยอดสุทธิ: พื้นหลังต่อถึงขอบขวา ไม่มีกรอบซ้อน */
#purchaseOrderEditorModal .po-summary-bar-net,
#purchaseReceiveEditorModal .po-summary-bar-net,
#purchaseDebitNoteEditorModal .po-summary-bar-net,
#salesDebitNoteEditorModal .po-summary-bar-net,
#billingNoteEditorModal .po-summary-bar-net,
#arReceiptEditorModal .po-summary-bar-net,
#salesCreditNoteEditorModal .po-summary-bar-net,
#purchaseCreditNoteEditorModal .po-summary-bar-net,
#salesInvoiceEditorModal .po-summary-bar-net,
#purchaseReturnEditorModal .po-summary-bar-net , #salesReturnEditorModal .po-summary-bar-net {
    margin: 0;
    padding: 14px 12px;
    background: #dbeafe;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

#purchaseOrderEditorModal .po-summary-bar-net .po-summary-bar-label,
#purchaseReceiveEditorModal .po-summary-bar-net .po-summary-bar-label,
#purchaseDebitNoteEditorModal .po-summary-bar-net .po-summary-bar-label,
#salesDebitNoteEditorModal .po-summary-bar-net .po-summary-bar-label,
#billingNoteEditorModal .po-summary-bar-net .po-summary-bar-label,
#arReceiptEditorModal .po-summary-bar-net .po-summary-bar-label,
#salesCreditNoteEditorModal .po-summary-bar-net .po-summary-bar-label,
#purchaseCreditNoteEditorModal .po-summary-bar-net .po-summary-bar-label,
#salesInvoiceEditorModal .po-summary-bar-net .po-summary-bar-label,
#purchaseReturnEditorModal .po-summary-bar-net .po-summary-bar-label , #salesReturnEditorModal .po-summary-bar-net .po-summary-bar-label {
    color: #1e3a8a;
    font-weight: 800;
}

#purchaseOrderEditorModal .po-summary-bar-net .po-summary-bar-value,
#purchaseReceiveEditorModal .po-summary-bar-net .po-summary-bar-value,
#purchaseDebitNoteEditorModal .po-summary-bar-net .po-summary-bar-value,
#salesDebitNoteEditorModal .po-summary-bar-net .po-summary-bar-value,
#billingNoteEditorModal .po-summary-bar-net .po-summary-bar-value,
#arReceiptEditorModal .po-summary-bar-net .po-summary-bar-value,
#salesCreditNoteEditorModal .po-summary-bar-net .po-summary-bar-value,
#purchaseCreditNoteEditorModal .po-summary-bar-net .po-summary-bar-value,
#salesInvoiceEditorModal .po-summary-bar-net .po-summary-bar-value,
#purchaseReturnEditorModal .po-summary-bar-net .po-summary-bar-value , #salesReturnEditorModal .po-summary-bar-net .po-summary-bar-value {
    font-size: clamp(16px, 1.6vw, 24px);
    font-weight: 800;
    color: #1e3a8a;
}

#purchaseOrderEditorModal .po-summary-bar-net .po-summary-bar-unit,
#purchaseReceiveEditorModal .po-summary-bar-net .po-summary-bar-unit,
#purchaseDebitNoteEditorModal .po-summary-bar-net .po-summary-bar-unit,
#salesDebitNoteEditorModal .po-summary-bar-net .po-summary-bar-unit,
#billingNoteEditorModal .po-summary-bar-net .po-summary-bar-unit,
#arReceiptEditorModal .po-summary-bar-net .po-summary-bar-unit,
#salesCreditNoteEditorModal .po-summary-bar-net .po-summary-bar-unit,
#purchaseCreditNoteEditorModal .po-summary-bar-net .po-summary-bar-unit,
#salesInvoiceEditorModal .po-summary-bar-net .po-summary-bar-unit,
#purchaseReturnEditorModal .po-summary-bar-net .po-summary-bar-unit , #salesReturnEditorModal .po-summary-bar-net .po-summary-bar-unit {
    font-size: 14px;
    font-weight: 700;
    color: #1e3a8a;
}

@media (max-width: 1100px) {
    #purchaseOrderEditorModal .po-summary-bar,
#purchaseReceiveEditorModal .po-summary-bar,
#purchaseDebitNoteEditorModal .po-summary-bar,
#salesDebitNoteEditorModal .po-summary-bar,
#billingNoteEditorModal .po-summary-bar,
#arReceiptEditorModal .po-summary-bar,
#salesCreditNoteEditorModal .po-summary-bar,
#purchaseCreditNoteEditorModal .po-summary-bar,
#salesInvoiceEditorModal .po-summary-bar,
#purchaseReturnEditorModal .po-summary-bar , #salesReturnEditorModal .po-summary-bar {
        flex-wrap: wrap;
    }

    #purchaseOrderEditorModal .po-summary-bar-item,
#purchaseReceiveEditorModal .po-summary-bar-item,
#purchaseDebitNoteEditorModal .po-summary-bar-item,
#salesDebitNoteEditorModal .po-summary-bar-item,
#billingNoteEditorModal .po-summary-bar-item,
#arReceiptEditorModal .po-summary-bar-item,
#salesCreditNoteEditorModal .po-summary-bar-item,
#purchaseCreditNoteEditorModal .po-summary-bar-item,
#salesInvoiceEditorModal .po-summary-bar-item,
#purchaseReturnEditorModal .po-summary-bar-item , #salesReturnEditorModal .po-summary-bar-item {
        flex: 1 1 33.333%;
        padding: 12px 10px;
    }

    #purchaseOrderEditorModal .po-summary-bar-item::after ,
#purchaseReceiveEditorModal .po-summary-bar-item::after,
#purchaseDebitNoteEditorModal .po-summary-bar-item::after,
#salesDebitNoteEditorModal .po-summary-bar-item::after,
#billingNoteEditorModal .po-summary-bar-item::after,
#arReceiptEditorModal .po-summary-bar-item::after,
#salesCreditNoteEditorModal .po-summary-bar-item::after,
#purchaseCreditNoteEditorModal .po-summary-bar-item::after,
#salesInvoiceEditorModal .po-summary-bar-item::after,
#purchaseReturnEditorModal .po-summary-bar-item::after , #salesReturnEditorModal .po-summary-bar-item::after {
        display: none;
    }

    #purchaseOrderEditorModal .po-summary-bar-net,
#purchaseReceiveEditorModal .po-summary-bar-net,
#purchaseDebitNoteEditorModal .po-summary-bar-net,
#salesDebitNoteEditorModal .po-summary-bar-net,
#billingNoteEditorModal .po-summary-bar-net,
#arReceiptEditorModal .po-summary-bar-net,
#salesCreditNoteEditorModal .po-summary-bar-net,
#purchaseCreditNoteEditorModal .po-summary-bar-net,
#salesInvoiceEditorModal .po-summary-bar-net,
#purchaseReturnEditorModal .po-summary-bar-net , #salesReturnEditorModal .po-summary-bar-net {
        flex: 1 1 100%;
        border-top: 1px solid #93c5fd;
    }
}

@media (max-width: 900px) {
    #purchaseOrderEditorModal .po-supplier-top,
#purchaseReceiveEditorModal .po-supplier-top,
#purchaseDebitNoteEditorModal .po-supplier-top,
#salesDebitNoteEditorModal .po-supplier-top,
#billingNoteEditorModal .po-supplier-top,
#arReceiptEditorModal .po-supplier-top,
#salesCreditNoteEditorModal .po-supplier-top,
#purchaseCreditNoteEditorModal .po-supplier-top,
#salesInvoiceEditorModal .po-supplier-top,
#purchaseReturnEditorModal .po-supplier-top , #salesReturnEditorModal .po-supplier-top {
        grid-template-columns: 1fr;
    }

    #purchaseOrderEditorModal .po-supplier-select-field .select2-container,
#purchaseReceiveEditorModal .po-supplier-select-field .select2-container,
#purchaseDebitNoteEditorModal .po-supplier-select-field .select2-container,
#salesDebitNoteEditorModal .po-supplier-select-field .select2-container,
#billingNoteEditorModal .po-supplier-select-field .select2-container,
#salesCreditNoteEditorModal .po-supplier-select-field .select2-container,
#purchaseCreditNoteEditorModal .po-supplier-select-field .select2-container,
#salesInvoiceEditorModal .po-supplier-select-field .select2-container,
#purchaseReturnEditorModal .po-supplier-select-field .select2-container, #salesReturnEditorModal .po-supplier-select-field .select2-container,
    #purchaseOrderEditorModal .po-supplier-select-field .select2-container,
#purchaseReceiveEditorModal .po-supplier-select-field .select2-container,
#purchaseDebitNoteEditorModal .po-supplier-select-field .select2-container,
#salesDebitNoteEditorModal .po-supplier-select-field .select2-container,
#billingNoteEditorModal .po-supplier-select-field .select2-container,
#salesCreditNoteEditorModal .po-supplier-select-field .select2-container,
#purchaseCreditNoteEditorModal .po-supplier-select-field .select2-container,
#salesInvoiceEditorModal .po-supplier-select-field .select2-container,
#purchaseReturnEditorModal .po-supplier-select-field .select2-container, #salesReturnEditorModal .po-supplier-select-field .select2-container,
    #purchaseOrderEditorModal .po-credit-term-field,
#purchaseReceiveEditorModal .po-credit-term-field,
#purchaseDebitNoteEditorModal .po-credit-term-field,
#salesDebitNoteEditorModal .po-credit-term-field,
#billingNoteEditorModal .po-credit-term-field,
#salesCreditNoteEditorModal .po-credit-term-field,
#purchaseCreditNoteEditorModal .po-credit-term-field,
#salesInvoiceEditorModal .po-credit-term-field,
#purchaseReturnEditorModal .po-credit-term-field, #salesReturnEditorModal .po-credit-term-field,
    #purchaseOrderEditorModal .po-credit-term-field .select2-container,
#purchaseReceiveEditorModal .po-credit-term-field .select2-container,
#purchaseDebitNoteEditorModal .po-credit-term-field .select2-container,
#salesDebitNoteEditorModal .po-credit-term-field .select2-container,
#billingNoteEditorModal .po-credit-term-field .select2-container,
#salesCreditNoteEditorModal .po-credit-term-field .select2-container,
#purchaseCreditNoteEditorModal .po-credit-term-field .select2-container,
#salesInvoiceEditorModal .po-credit-term-field .select2-container,
#purchaseReturnEditorModal .po-credit-term-field .select2-container, #salesReturnEditorModal .po-credit-term-field .select2-container,
    #purchaseOrderEditorModal .po-ref-stock-field,
#purchaseReceiveEditorModal .po-ref-stock-field,
#purchaseDebitNoteEditorModal .po-ref-stock-field,
#salesDebitNoteEditorModal .po-ref-stock-field,
#billingNoteEditorModal .po-ref-stock-field,
#salesCreditNoteEditorModal .po-ref-stock-field,
#purchaseCreditNoteEditorModal .po-ref-stock-field,
#salesInvoiceEditorModal .po-ref-stock-field,
#purchaseReturnEditorModal .po-ref-stock-field, #salesReturnEditorModal .po-ref-stock-field,
    #purchaseOrderEditorModal .po-ref-stock-field .select2-container,
#purchaseReceiveEditorModal .po-ref-stock-field .select2-container,
#purchaseDebitNoteEditorModal .po-ref-stock-field .select2-container,
#salesDebitNoteEditorModal .po-ref-stock-field .select2-container,
#billingNoteEditorModal .po-ref-stock-field .select2-container,
#salesCreditNoteEditorModal .po-ref-stock-field .select2-container,
#purchaseCreditNoteEditorModal .po-ref-stock-field .select2-container,
#salesInvoiceEditorModal .po-ref-stock-field .select2-container,
#purchaseReturnEditorModal .po-ref-stock-field .select2-container , #salesReturnEditorModal .po-ref-stock-field .select2-container {
        max-width: none;
    }

    #purchaseOrderEditorModal .po-supplier-meta,
#purchaseReceiveEditorModal .po-supplier-meta,
#purchaseDebitNoteEditorModal .po-supplier-meta,
#salesDebitNoteEditorModal .po-supplier-meta,
#billingNoteEditorModal .po-supplier-meta,
#arReceiptEditorModal .po-supplier-meta,
#salesCreditNoteEditorModal .po-supplier-meta,
#purchaseCreditNoteEditorModal .po-supplier-meta,
#salesInvoiceEditorModal .po-supplier-meta,
#purchaseReturnEditorModal .po-supplier-meta , #salesReturnEditorModal .po-supplier-meta {
        grid-template-columns: 1fr;
    }

    #purchaseOrderEditorModal .po-summary-bar-item,
#purchaseReceiveEditorModal .po-summary-bar-item,
#purchaseDebitNoteEditorModal .po-summary-bar-item,
#salesDebitNoteEditorModal .po-summary-bar-item,
#billingNoteEditorModal .po-summary-bar-item,
#arReceiptEditorModal .po-summary-bar-item,
#salesCreditNoteEditorModal .po-summary-bar-item,
#purchaseCreditNoteEditorModal .po-summary-bar-item,
#salesInvoiceEditorModal .po-summary-bar-item,
#purchaseReturnEditorModal .po-summary-bar-item , #salesReturnEditorModal .po-summary-bar-item {
        flex: 1 1 50%;
    }
}

/* Purchase Order editor: lines table + summary on mobile (pattern: Reservation conditions) */
@media (max-width: 768px) {
    #purchaseOrderEditorModal .po-lines-head,
#purchaseReceiveEditorModal .po-lines-head,
#purchaseDebitNoteEditorModal .po-lines-head,
#salesDebitNoteEditorModal .po-lines-head,
#billingNoteEditorModal .po-lines-head,
#arReceiptEditorModal .po-lines-head,
#salesCreditNoteEditorModal .po-lines-head,
#purchaseCreditNoteEditorModal .po-lines-head,
#salesInvoiceEditorModal .po-lines-head,
#purchaseReturnEditorModal .po-lines-head , #salesReturnEditorModal .po-lines-head {
        flex-wrap: wrap;
        gap: 8px;
    }

    #purchaseOrderEditorModal .po-add-line-btn,
#purchaseReceiveEditorModal .po-add-line-btn,
#purchaseDebitNoteEditorModal .po-add-line-btn,
#salesDebitNoteEditorModal .po-add-line-btn,
#billingNoteEditorModal .po-add-line-btn,
#salesCreditNoteEditorModal .po-add-line-btn,
#purchaseCreditNoteEditorModal .po-add-line-btn,
#salesInvoiceEditorModal .po-add-line-btn,
#purchaseReturnEditorModal .po-add-line-btn , #salesReturnEditorModal .po-add-line-btn {
        width: 100%;
    }

    #purchaseOrderEditorModal .po-lines-table-wrap,
#purchaseReceiveEditorModal .po-lines-table-wrap,
#purchaseDebitNoteEditorModal .po-lines-table-wrap,
#salesDebitNoteEditorModal .po-lines-table-wrap,
#billingNoteEditorModal .po-lines-table-wrap,
#arReceiptEditorModal .po-lines-table-wrap,
#salesCreditNoteEditorModal .po-lines-table-wrap,
#purchaseCreditNoteEditorModal .po-lines-table-wrap,
#salesInvoiceEditorModal .po-lines-table-wrap,
#purchaseReturnEditorModal .po-lines-table-wrap , #salesReturnEditorModal .po-lines-table-wrap {
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
    }

    /* เลิก global table{min-width:790px} + td{white-space:nowrap} บนการ์ดมือถือ */
    #purchaseOrderEditorModal .po-lines-table,
#purchaseReceiveEditorModal .po-lines-table,
#purchaseDebitNoteEditorModal .po-lines-table,
#salesDebitNoteEditorModal .po-lines-table,
#billingNoteEditorModal .po-lines-table,
#arReceiptEditorModal .po-lines-table,
#salesCreditNoteEditorModal .po-lines-table,
#purchaseCreditNoteEditorModal .po-lines-table,
#salesInvoiceEditorModal .po-lines-table,
#purchaseReturnEditorModal .po-lines-table , #salesReturnEditorModal .po-lines-table {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    #purchaseOrderEditorModal .po-lines-table tbody,
#purchaseReceiveEditorModal .po-lines-table tbody,
#purchaseDebitNoteEditorModal .po-lines-table tbody,
#salesDebitNoteEditorModal .po-lines-table tbody,
#billingNoteEditorModal .po-lines-table tbody,
#arReceiptEditorModal .po-lines-table tbody,
#salesCreditNoteEditorModal .po-lines-table tbody,
#purchaseCreditNoteEditorModal .po-lines-table tbody,
#salesInvoiceEditorModal .po-lines-table tbody,
#purchaseReturnEditorModal .po-lines-table tbody, #salesReturnEditorModal .po-lines-table tbody,
    #purchaseOrderEditorModal .po-lines-table tbody ,
#purchaseReceiveEditorModal .po-lines-table tbody,
#purchaseDebitNoteEditorModal .po-lines-table tbody,
#salesDebitNoteEditorModal .po-lines-table tbody,
#billingNoteEditorModal .po-lines-table tbody,
#arReceiptEditorModal .po-lines-table tbody,
#salesCreditNoteEditorModal .po-lines-table tbody,
#purchaseCreditNoteEditorModal .po-lines-table tbody,
#salesInvoiceEditorModal .po-lines-table tbody,
#purchaseReturnEditorModal .po-lines-table tbody , #salesReturnEditorModal .po-lines-table tbody {
        display: block;
        width: 100%;
    }

    #purchaseOrderEditorModal .po-lines-table thead ,
#purchaseReceiveEditorModal .po-lines-table thead,
#purchaseDebitNoteEditorModal .po-lines-table thead,
#salesDebitNoteEditorModal .po-lines-table thead,
#billingNoteEditorModal .po-lines-table thead,
#arReceiptEditorModal .po-lines-table thead,
#salesCreditNoteEditorModal .po-lines-table thead,
#purchaseCreditNoteEditorModal .po-lines-table thead,
#salesInvoiceEditorModal .po-lines-table thead,
#purchaseReturnEditorModal .po-lines-table thead , #salesReturnEditorModal .po-lines-table thead {
        display: none;
    }

    #purchaseOrderEditorModal .po-lines-table tr.po-line-row,
#purchaseReceiveEditorModal .po-lines-table tr.po-line-row,
#purchaseDebitNoteEditorModal .po-lines-table tr.po-line-row,
#salesDebitNoteEditorModal .po-lines-table tr.po-line-row,
#billingNoteEditorModal .po-lines-table tr.po-line-row,
#arReceiptEditorModal .po-lines-table tr.po-line-row,
#salesCreditNoteEditorModal .po-lines-table tr.po-line-row,
#purchaseCreditNoteEditorModal .po-lines-table tr.po-line-row,
#salesInvoiceEditorModal .po-lines-table tr.po-line-row,
#purchaseReturnEditorModal .po-lines-table tr.po-line-row , #salesReturnEditorModal .po-lines-table tr.po-line-row {
        display: block;
        width: 100%;
        box-sizing: border-box;
        margin: 0 0 12px;
        padding: 12px;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        background: #fff;
    }

    #purchaseOrderEditorModal .po-lines-table tr.po-line-empty-row,
#purchaseReceiveEditorModal .po-lines-table tr.po-line-empty-row,
#purchaseDebitNoteEditorModal .po-lines-table tr.po-line-empty-row,
#salesDebitNoteEditorModal .po-lines-table tr.po-line-empty-row,
#billingNoteEditorModal .po-lines-table tr.po-line-empty-row,
#arReceiptEditorModal .po-lines-table tr.po-line-empty-row,
#salesCreditNoteEditorModal .po-lines-table tr.po-line-empty-row,
#purchaseCreditNoteEditorModal .po-lines-table tr.po-line-empty-row,
#salesInvoiceEditorModal .po-lines-table tr.po-line-empty-row,
#purchaseReturnEditorModal .po-lines-table tr.po-line-empty-row , #salesReturnEditorModal .po-lines-table tr.po-line-empty-row {
        display: block;
        width: 100%;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        background: #fff;
    }

    #purchaseOrderEditorModal .po-lines-table tr.po-line-row td ,
#purchaseReceiveEditorModal .po-lines-table tr.po-line-row td,
#purchaseDebitNoteEditorModal .po-lines-table tr.po-line-row td,
#salesDebitNoteEditorModal .po-lines-table tr.po-line-row td,
#billingNoteEditorModal .po-lines-table tr.po-line-row td,
#arReceiptEditorModal .po-lines-table tr.po-line-row td,
#salesCreditNoteEditorModal .po-lines-table tr.po-line-row td,
#purchaseCreditNoteEditorModal .po-lines-table tr.po-line-row td,
#salesInvoiceEditorModal .po-lines-table tr.po-line-row td,
#purchaseReturnEditorModal .po-lines-table tr.po-line-row td , #salesReturnEditorModal .po-lines-table tr.po-line-row td {
        display: block;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100%;
        box-sizing: border-box;
        padding: 0 0 12px;
        border: 0;
        text-align: left !important;
        vertical-align: top;
        white-space: normal !important;
    }

    #purchaseOrderEditorModal .po-lines-table tr.po-line-row td:last-child ,
#purchaseReceiveEditorModal .po-lines-table tr.po-line-row td:last-child,
#purchaseDebitNoteEditorModal .po-lines-table tr.po-line-row td:last-child,
#salesDebitNoteEditorModal .po-lines-table tr.po-line-row td:last-child,
#billingNoteEditorModal .po-lines-table tr.po-line-row td:last-child,
#arReceiptEditorModal .po-lines-table tr.po-line-row td:last-child,
#salesCreditNoteEditorModal .po-lines-table tr.po-line-row td:last-child,
#purchaseCreditNoteEditorModal .po-lines-table tr.po-line-row td:last-child,
#salesInvoiceEditorModal .po-lines-table tr.po-line-row td:last-child,
#purchaseReturnEditorModal .po-lines-table tr.po-line-row td:last-child , #salesReturnEditorModal .po-lines-table tr.po-line-row td:last-child {
        padding-bottom: 0;
    }

    #purchaseOrderEditorModal .po-lines-table tr.po-line-row td::before ,
#purchaseReceiveEditorModal .po-lines-table tr.po-line-row td::before,
#purchaseDebitNoteEditorModal .po-lines-table tr.po-line-row td::before,
#salesDebitNoteEditorModal .po-lines-table tr.po-line-row td::before,
#billingNoteEditorModal .po-lines-table tr.po-line-row td::before,
#arReceiptEditorModal .po-lines-table tr.po-line-row td::before,
#salesCreditNoteEditorModal .po-lines-table tr.po-line-row td::before,
#purchaseCreditNoteEditorModal .po-lines-table tr.po-line-row td::before,
#salesInvoiceEditorModal .po-lines-table tr.po-line-row td::before,
#purchaseReturnEditorModal .po-lines-table tr.po-line-row td::before , #salesReturnEditorModal .po-lines-table tr.po-line-row td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 6px;
        font-size: 12px;
        font-weight: 700;
        color: #667085;
        white-space: normal;
        word-break: break-word;
    }

    #purchaseOrderEditorModal .po-lines-table tr.po-line-row td.po-col-action,
#purchaseReceiveEditorModal .po-lines-table tr.po-line-row td.po-col-action,
#purchaseDebitNoteEditorModal .po-lines-table tr.po-line-row td.po-col-action,
#salesDebitNoteEditorModal .po-lines-table tr.po-line-row td.po-col-action,
#billingNoteEditorModal .po-lines-table tr.po-line-row td.po-col-action,
#arReceiptEditorModal .po-lines-table tr.po-line-row td.po-col-action,
#salesCreditNoteEditorModal .po-lines-table tr.po-line-row td.po-col-action,
#purchaseCreditNoteEditorModal .po-lines-table tr.po-line-row td.po-col-action,
#salesInvoiceEditorModal .po-lines-table tr.po-line-row td.po-col-action,
#purchaseReturnEditorModal .po-lines-table tr.po-line-row td.po-col-action , #salesReturnEditorModal .po-lines-table tr.po-line-row td.po-col-action {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding-top: 4px;
    }

    #purchaseOrderEditorModal .po-lines-table tr.po-line-row td.po-col-action::before ,
#purchaseReceiveEditorModal .po-lines-table tr.po-line-row td.po-col-action::before,
#purchaseDebitNoteEditorModal .po-lines-table tr.po-line-row td.po-col-action::before,
#salesDebitNoteEditorModal .po-lines-table tr.po-line-row td.po-col-action::before,
#billingNoteEditorModal .po-lines-table tr.po-line-row td.po-col-action::before,
#arReceiptEditorModal .po-lines-table tr.po-line-row td.po-col-action::before,
#salesCreditNoteEditorModal .po-lines-table tr.po-line-row td.po-col-action::before,
#purchaseCreditNoteEditorModal .po-lines-table tr.po-line-row td.po-col-action::before,
#salesInvoiceEditorModal .po-lines-table tr.po-line-row td.po-col-action::before,
#purchaseReturnEditorModal .po-lines-table tr.po-line-row td.po-col-action::before , #salesReturnEditorModal .po-lines-table tr.po-line-row td.po-col-action::before {
        margin-right: auto;
        margin-bottom: 0;
    }

    #purchaseOrderEditorModal .po-lines-table tr.po-line-row td.po-col-action:not([data-label])::before ,
#purchaseReceiveEditorModal .po-lines-table tr.po-line-row td.po-col-action:not([data-label])::before,
#purchaseDebitNoteEditorModal .po-lines-table tr.po-line-row td.po-col-action:not([data-label])::before,
#salesDebitNoteEditorModal .po-lines-table tr.po-line-row td.po-col-action:not([data-label])::before,
#billingNoteEditorModal .po-lines-table tr.po-line-row td.po-col-action:not([data-label])::before,
#arReceiptEditorModal .po-lines-table tr.po-line-row td.po-col-action:not([data-label])::before,
#salesCreditNoteEditorModal .po-lines-table tr.po-line-row td.po-col-action:not([data-label])::before,
#purchaseCreditNoteEditorModal .po-lines-table tr.po-line-row td.po-col-action:not([data-label])::before,
#salesInvoiceEditorModal .po-lines-table tr.po-line-row td.po-col-action:not([data-label])::before,
#purchaseReturnEditorModal .po-lines-table tr.po-line-row td.po-col-action:not([data-label])::before , #salesReturnEditorModal .po-lines-table tr.po-line-row td.po-col-action:not([data-label])::before {
        content: none;
        display: none;
    }

    #purchaseOrderEditorModal .po-lines-table tr.po-line-row td.amount .ui-control,
#purchaseReceiveEditorModal .po-lines-table tr.po-line-row td.amount .ui-control,
#purchaseDebitNoteEditorModal .po-lines-table tr.po-line-row td.amount .ui-control,
#salesDebitNoteEditorModal .po-lines-table tr.po-line-row td.amount .ui-control,
#billingNoteEditorModal .po-lines-table tr.po-line-row td.amount .ui-control,
#arReceiptEditorModal .po-lines-table tr.po-line-row td.amount .ui-control,
#salesCreditNoteEditorModal .po-lines-table tr.po-line-row td.amount .ui-control,
#purchaseCreditNoteEditorModal .po-lines-table tr.po-line-row td.amount .ui-control,
#salesInvoiceEditorModal .po-lines-table tr.po-line-row td.amount .ui-control,
#purchaseReturnEditorModal .po-lines-table tr.po-line-row td.amount .ui-control, #salesReturnEditorModal .po-lines-table tr.po-line-row td.amount .ui-control,
    #purchaseOrderEditorModal .po-lines-table tr.po-line-row .po-line-qty,
#purchaseReceiveEditorModal .po-lines-table tr.po-line-row .po-line-qty,
#purchaseDebitNoteEditorModal .po-lines-table tr.po-line-row td.amount .ui-control,
#salesDebitNoteEditorModal .po-lines-table tr.po-line-row td.amount .ui-control,
#billingNoteEditorModal .po-lines-table tr.po-line-row td.amount .ui-control,
#arReceiptEditorModal .po-lines-table tr.po-line-row td.amount .ui-control,
#salesCreditNoteEditorModal .po-lines-table tr.po-line-row td.amount .ui-control,
#purchaseCreditNoteEditorModal .po-lines-table tr.po-line-row .po-line-qty,
#salesInvoiceEditorModal .po-lines-table tr.po-line-row .po-line-qty,
#purchaseReturnEditorModal .po-lines-table tr.po-line-row .po-line-qty, #salesReturnEditorModal .po-lines-table tr.po-line-row .po-line-qty,
    #purchaseOrderEditorModal .po-lines-table tr.po-line-row .po-line-price,
#purchaseReceiveEditorModal .po-lines-table tr.po-line-row .po-line-price,
#purchaseDebitNoteEditorModal .po-lines-table tr.po-line-row td.amount .ui-control,
#salesDebitNoteEditorModal .po-lines-table tr.po-line-row td.amount .ui-control,
#billingNoteEditorModal .po-lines-table tr.po-line-row td.amount .ui-control,
#arReceiptEditorModal .po-lines-table tr.po-line-row td.amount .ui-control,
#salesCreditNoteEditorModal .po-lines-table tr.po-line-row td.amount .ui-control,
#purchaseCreditNoteEditorModal .po-lines-table tr.po-line-row .po-line-price,
#salesInvoiceEditorModal .po-lines-table tr.po-line-row .po-line-price,
#purchaseReturnEditorModal .po-lines-table tr.po-line-row .po-line-price, #salesReturnEditorModal .po-lines-table tr.po-line-row .po-line-price,
    #purchaseOrderEditorModal .po-lines-table tr.po-line-row .po-line-discount,
#purchaseReceiveEditorModal .po-lines-table tr.po-line-row .po-line-discount,
#purchaseDebitNoteEditorModal .po-lines-table tr.po-line-row td.amount .ui-control,
#salesDebitNoteEditorModal .po-lines-table tr.po-line-row td.amount .ui-control,
#billingNoteEditorModal .po-lines-table tr.po-line-row td.amount .ui-control,
#arReceiptEditorModal .po-lines-table tr.po-line-row td.amount .ui-control,
#salesCreditNoteEditorModal .po-lines-table tr.po-line-row td.amount .ui-control,
#purchaseCreditNoteEditorModal .po-lines-table tr.po-line-row .po-line-discount,
#salesInvoiceEditorModal .po-lines-table tr.po-line-row .po-line-discount,
#purchaseReturnEditorModal .po-lines-table tr.po-line-row .po-line-discount , #salesReturnEditorModal .po-lines-table tr.po-line-row .po-line-discount {
        text-align: right;
    }

    #purchaseOrderEditorModal .po-lines-table tr.po-line-row td .ui-control,
#purchaseReceiveEditorModal .po-lines-table tr.po-line-row td .ui-control,
#purchaseDebitNoteEditorModal .po-lines-table tr.po-line-row td .ui-control,
#salesDebitNoteEditorModal .po-lines-table tr.po-line-row td .ui-control,
#billingNoteEditorModal .po-lines-table tr.po-line-row td .ui-control,
#arReceiptEditorModal .po-lines-table tr.po-line-row td .ui-control,
#salesCreditNoteEditorModal .po-lines-table tr.po-line-row td .ui-control,
#purchaseCreditNoteEditorModal .po-lines-table tr.po-line-row td .ui-control,
#salesInvoiceEditorModal .po-lines-table tr.po-line-row td .ui-control,
#purchaseReturnEditorModal .po-lines-table tr.po-line-row td .ui-control , #salesReturnEditorModal .po-lines-table tr.po-line-row td .ui-control {
        width: 100% !important;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    #purchaseOrderEditorModal .po-lines-table tr.po-line-row td.po-col-total,
#purchaseReceiveEditorModal .po-lines-table tr.po-line-row td.po-col-total,
#purchaseDebitNoteEditorModal .po-lines-table tr.po-line-row td.po-col-total,
#salesDebitNoteEditorModal .po-lines-table tr.po-line-row td.po-col-total,
#billingNoteEditorModal .po-lines-table tr.po-line-row td.po-col-total,
#arReceiptEditorModal .po-lines-table tr.po-line-row td.po-col-total,
#salesCreditNoteEditorModal .po-lines-table tr.po-line-row td.po-col-total,
#purchaseCreditNoteEditorModal .po-lines-table tr.po-line-row td.po-col-total,
#salesInvoiceEditorModal .po-lines-table tr.po-line-row td.po-col-total,
#purchaseReturnEditorModal .po-lines-table tr.po-line-row td.po-col-total , #salesReturnEditorModal .po-lines-table tr.po-line-row td.po-col-total {
        font-weight: 800;
        text-align: right !important;
    }

    #purchaseOrderEditorModal .po-summary-bar,
#purchaseReceiveEditorModal .po-summary-bar,
#purchaseDebitNoteEditorModal .po-summary-bar,
#salesDebitNoteEditorModal .po-summary-bar,
#billingNoteEditorModal .po-summary-bar,
#arReceiptEditorModal .po-summary-bar,
#salesCreditNoteEditorModal .po-summary-bar,
#purchaseCreditNoteEditorModal .po-summary-bar,
#salesInvoiceEditorModal .po-summary-bar,
#purchaseReturnEditorModal .po-summary-bar , #salesReturnEditorModal .po-summary-bar {
        flex-direction: column;
        flex-wrap: nowrap;
        border-radius: 12px;
    }

    #purchaseOrderEditorModal .po-summary-bar-item,
#purchaseReceiveEditorModal .po-summary-bar-item,
#purchaseDebitNoteEditorModal .po-summary-bar-item,
#salesDebitNoteEditorModal .po-summary-bar-item,
#billingNoteEditorModal .po-summary-bar-item,
#arReceiptEditorModal .po-summary-bar-item,
#salesCreditNoteEditorModal .po-summary-bar-item,
#purchaseCreditNoteEditorModal .po-summary-bar-item,
#salesInvoiceEditorModal .po-summary-bar-item,
#purchaseReturnEditorModal .po-summary-bar-item , #salesReturnEditorModal .po-summary-bar-item {
        flex: 1 1 auto;
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        padding: 12px 14px;
        text-align: left;
        border-bottom: 1px solid #bfdbfe;
    }

    #purchaseOrderEditorModal .po-summary-bar-item:last-child ,
#purchaseReceiveEditorModal .po-summary-bar-item:last-child,
#purchaseDebitNoteEditorModal .po-summary-bar-item:last-child,
#salesDebitNoteEditorModal .po-summary-bar-item:last-child,
#billingNoteEditorModal .po-summary-bar-item:last-child,
#arReceiptEditorModal .po-summary-bar-item:last-child,
#salesCreditNoteEditorModal .po-summary-bar-item:last-child,
#purchaseCreditNoteEditorModal .po-summary-bar-item:last-child,
#salesInvoiceEditorModal .po-summary-bar-item:last-child,
#purchaseReturnEditorModal .po-summary-bar-item:last-child , #salesReturnEditorModal .po-summary-bar-item:last-child {
        border-bottom: 0;
    }

    #purchaseOrderEditorModal .po-summary-bar-item::after ,
#purchaseReceiveEditorModal .po-summary-bar-item::after,
#purchaseDebitNoteEditorModal .po-summary-bar-item::after,
#salesDebitNoteEditorModal .po-summary-bar-item::after,
#billingNoteEditorModal .po-summary-bar-item::after,
#arReceiptEditorModal .po-summary-bar-item::after,
#salesCreditNoteEditorModal .po-summary-bar-item::after,
#purchaseCreditNoteEditorModal .po-summary-bar-item::after,
#salesInvoiceEditorModal .po-summary-bar-item::after,
#purchaseReturnEditorModal .po-summary-bar-item::after , #salesReturnEditorModal .po-summary-bar-item::after {
        display: none;
    }

    #purchaseOrderEditorModal .po-summary-bar-label,
#purchaseReceiveEditorModal .po-summary-bar-label,
#purchaseDebitNoteEditorModal .po-summary-bar-label,
#salesDebitNoteEditorModal .po-summary-bar-label,
#billingNoteEditorModal .po-summary-bar-label,
#arReceiptEditorModal .po-summary-bar-label,
#salesCreditNoteEditorModal .po-summary-bar-label,
#purchaseCreditNoteEditorModal .po-summary-bar-label,
#salesInvoiceEditorModal .po-summary-bar-label,
#purchaseReturnEditorModal .po-summary-bar-label, #salesReturnEditorModal .po-summary-bar-label,
    #purchaseOrderEditorModal .po-summary-bar-value,
#purchaseReceiveEditorModal .po-summary-bar-value,
#purchaseDebitNoteEditorModal .po-summary-bar-value,
#salesDebitNoteEditorModal .po-summary-bar-value,
#billingNoteEditorModal .po-summary-bar-value,
#arReceiptEditorModal .po-summary-bar-value,
#salesCreditNoteEditorModal .po-summary-bar-value,
#purchaseCreditNoteEditorModal .po-summary-bar-value,
#salesInvoiceEditorModal .po-summary-bar-value,
#purchaseReturnEditorModal .po-summary-bar-value , #salesReturnEditorModal .po-summary-bar-value {
        width: auto;
        text-align: left;
        font-size: 13px;
    }

    #purchaseOrderEditorModal .po-summary-bar-value,
#purchaseReceiveEditorModal .po-summary-bar-value,
#purchaseDebitNoteEditorModal .po-summary-bar-value,
#salesDebitNoteEditorModal .po-summary-bar-value,
#billingNoteEditorModal .po-summary-bar-value,
#arReceiptEditorModal .po-summary-bar-value,
#salesCreditNoteEditorModal .po-summary-bar-value,
#purchaseCreditNoteEditorModal .po-summary-bar-value,
#salesInvoiceEditorModal .po-summary-bar-value,
#purchaseReturnEditorModal .po-summary-bar-value , #salesReturnEditorModal .po-summary-bar-value {
        text-align: right;
        flex: 1 1 auto;
        min-width: 0;
    }

    #purchaseOrderEditorModal .po-summary-bar-net,
#purchaseReceiveEditorModal .po-summary-bar-net,
#purchaseDebitNoteEditorModal .po-summary-bar-net,
#salesDebitNoteEditorModal .po-summary-bar-net,
#billingNoteEditorModal .po-summary-bar-net,
#arReceiptEditorModal .po-summary-bar-net,
#salesCreditNoteEditorModal .po-summary-bar-net,
#purchaseCreditNoteEditorModal .po-summary-bar-net,
#salesInvoiceEditorModal .po-summary-bar-net,
#purchaseReturnEditorModal .po-summary-bar-net , #salesReturnEditorModal .po-summary-bar-net {
        border-top: 0;
        border-radius: 0 0 11px 11px;
    }

    #purchaseOrderEditorModal .po-summary-bar-net .po-summary-bar-value,
#purchaseReceiveEditorModal .po-summary-bar-net .po-summary-bar-value,
#purchaseDebitNoteEditorModal .po-summary-bar-net .po-summary-bar-value,
#salesDebitNoteEditorModal .po-summary-bar-net .po-summary-bar-value,
#billingNoteEditorModal .po-summary-bar-net .po-summary-bar-value,
#arReceiptEditorModal .po-summary-bar-net .po-summary-bar-value,
#salesCreditNoteEditorModal .po-summary-bar-net .po-summary-bar-value,
#purchaseCreditNoteEditorModal .po-summary-bar-net .po-summary-bar-value,
#salesInvoiceEditorModal .po-summary-bar-net .po-summary-bar-value,
#purchaseReturnEditorModal .po-summary-bar-net .po-summary-bar-value , #salesReturnEditorModal .po-summary-bar-net .po-summary-bar-value {
        font-size: 18px;
    }

    #purchaseOrderEditorModal .purchase-appraisal-editor-actions.role-permission-editor-modal-actions,
#purchaseReceiveEditorModal .purchase-appraisal-editor-actions.role-permission-editor-modal-actions,
#purchaseDebitNoteEditorModal .purchase-appraisal-editor-actions.role-permission-editor-modal-actions,
#salesDebitNoteEditorModal .purchase-appraisal-editor-actions.role-permission-editor-modal-actions,
#billingNoteEditorModal .purchase-appraisal-editor-actions.role-permission-editor-modal-actions,
#salesCreditNoteEditorModal .purchase-appraisal-editor-actions.role-permission-editor-modal-actions,
#purchaseCreditNoteEditorModal .purchase-appraisal-editor-actions.role-permission-editor-modal-actions,
#salesInvoiceEditorModal .purchase-appraisal-editor-actions.role-permission-editor-modal-actions,
#purchaseReturnEditorModal .purchase-appraisal-editor-actions.role-permission-editor-modal-actions , #salesReturnEditorModal .purchase-appraisal-editor-actions.role-permission-editor-modal-actions {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 8px;
    }

    #purchaseOrderEditorModal .purchase-appraisal-editor-actions .btn,
#purchaseReceiveEditorModal .purchase-appraisal-editor-actions .btn,
#purchaseDebitNoteEditorModal .purchase-appraisal-editor-actions .btn,
#salesDebitNoteEditorModal .purchase-appraisal-editor-actions .btn,
#billingNoteEditorModal .purchase-appraisal-editor-actions .btn,
#salesCreditNoteEditorModal .purchase-appraisal-editor-actions .btn,
#purchaseCreditNoteEditorModal .purchase-appraisal-editor-actions .btn,
#salesInvoiceEditorModal .purchase-appraisal-editor-actions .btn,
#purchaseReturnEditorModal .purchase-appraisal-editor-actions .btn , #salesReturnEditorModal .purchase-appraisal-editor-actions .btn {
        width: 100%;
    }
}

#apPaymentEditorModal #apPaymentLinesTable th.amount,
#receiptPaymentEditorModal #receiptPaymentLinesTable th.amount,
#arReceiptEditorModal #receiptPaymentLinesTable th.amount,
#whtCertEditorModal #whtCertLinesTable th.amount,
#apPaymentEditorModal #apPaymentLinesTable td.amount,
#receiptPaymentEditorModal #receiptPaymentLinesTable td.amount,
#arReceiptEditorModal #receiptPaymentLinesTable td.amount,
#whtCertEditorModal #whtCertLinesTable td.amount{
    width: 7.5rem;
    max-width: 7.5rem;
}

#apPaymentEditorModal #apPaymentLinesTable th:nth-child(6),
#receiptPaymentEditorModal #receiptPaymentLinesTable th:nth-child(6),
#arReceiptEditorModal #receiptPaymentLinesTable th:nth-child(6),
#whtCertEditorModal #whtCertLinesTable th:nth-child(6),
#apPaymentEditorModal #apPaymentLinesTable td:nth-child(6),
#receiptPaymentEditorModal #receiptPaymentLinesTable td:nth-child(6),
#arReceiptEditorModal #receiptPaymentLinesTable td:nth-child(6),
#whtCertEditorModal #whtCertLinesTable td:nth-child(6){
    width: 5.5rem;
    max-width: 5.5rem;
}

#apPaymentEditorModal #apPaymentLinesTable td.amount .ui-control,
#receiptPaymentEditorModal #receiptPaymentLinesTable td.amount .ui-control,
#arReceiptEditorModal #receiptPaymentLinesTable td.amount .ui-control,
#whtCertEditorModal #whtCertLinesTable td.amount .ui-control,
#reservationEditorModal #reservationConditionsTable td.amount .ui-control,
#vehicleSaleEditorModal #vehicleSaleConditionsTable td.amount .ui-control{
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding-left: 6px;
    padding-right: 6px;
    text-align: right;
}

#reservationEditorModal #reservationConditionsTable td .ui-control,
#reservationEditorModal #reservationConditionsTable td .select2-container,
#vehicleSaleEditorModal #vehicleSaleConditionsTable td .ui-control,
#vehicleSaleEditorModal #vehicleSaleConditionsTable td .select2-container {
    width: 100% !important;
    min-width: 0;
    max-width: 100%;
}

#reservationEditorModal .reservation-conditions-table-wrap {
    overflow-x: hidden;
}

#reservationEditorModal .pa-span-full {
    width: 100%;
    margin-top: 12px;
}

.purchase-appraisal-editor-modal .ap-payment-payee-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.purchase-appraisal-editor-modal .ap-payment-payee-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
}

.purchase-appraisal-editor-modal .ap-payment-payee-row > .field {
    flex: 0 0 auto;
    min-width: 0;
}

.purchase-appraisal-editor-modal .ap-payment-payee-select-field {
    width: min(100%, 420px);
}

.purchase-appraisal-editor-modal .ap-payment-payee-select-field .select2-container {
    width: 100% !important;
    max-width: 420px;
}

.purchase-appraisal-editor-modal .ap-payment-manual-payee-toggle {
    flex: 0 0 auto;
}

.purchase-appraisal-editor-modal .ap-payment-manual-payee-toggle .btn {
    white-space: nowrap;
}

.purchase-appraisal-editor-modal .ap-payment-input-name {
    width: 36ch;
    max-width: min(100%, 36ch);
}

.purchase-appraisal-editor-modal .ap-payment-payee-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-start;
}

.purchase-appraisal-editor-modal .ap-payment-payee-row-main {
    align-items: flex-end;
}

.purchase-appraisal-editor-modal .ap-payment-payee-row > .field,
.purchase-appraisal-editor-modal .ap-payment-payee-row-compact > .field {
    flex: 0 0 auto;
    min-width: 0;
}

.purchase-appraisal-editor-modal .ap-payment-payee-grid > .field {
    min-width: 0;
    flex: 0 0 auto;
}

.purchase-appraisal-editor-modal .ap-payment-payee-grid > .field .ui-control,
.purchase-appraisal-editor-modal .ap-payment-payee-grid > .field .select2-container {
    max-width: 100%;
}

.purchase-appraisal-editor-modal .ap-payment-payee-select-field {
    width: min(100%, 420px);
}

.purchase-appraisal-editor-modal .ap-payment-payee-select-field .select2-container {
    width: 100% !important;
    max-width: 420px;
}

.purchase-appraisal-editor-modal .ap-payment-manual-payee-toggle {
    flex: 0 0 auto;
    align-self: flex-end;
}

.purchase-appraisal-editor-modal .ap-payment-manual-payee-toggle .btn {
    white-space: nowrap;
}

.purchase-appraisal-editor-modal .ap-payment-payee-name-field {
    flex: 0 0 auto;
}

.purchase-appraisal-editor-modal .ap-payment-input-name {
    width: 36ch;
    max-width: min(100%, 36ch);
}

.purchase-appraisal-editor-modal .ap-payment-settlement-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.purchase-appraisal-editor-modal .ap-payment-settlement-grid > .field,
.purchase-appraisal-editor-modal .ap-payment-settlement-grid > .ap-payment-method-detail-panel,
.purchase-appraisal-editor-modal .ap-payment-settlement-grid > .ap-payment-settlement-summary {
    min-width: 0;
}

.purchase-appraisal-editor-modal .ap-payment-settlement-top {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-start;
}

.purchase-appraisal-editor-modal .ap-payment-settlement-method {
    width: 240px;
    flex: 0 0 auto;
}

.purchase-appraisal-editor-modal .ap-payment-settlement-bank {
    width: 28ch;
    max-width: min(100%, 28ch);
    flex: 0 0 auto;
}

#apPaymentEditorModal .ap-payment-settlement-bank .ui-control,
#receiptPaymentEditorModal .ap-payment-settlement-bank .ui-control,
#arReceiptEditorModal .ap-payment-settlement-bank .ui-control,
#whtCertEditorModal .ap-payment-settlement-bank .ui-control,
#reservationEditorModal .ap-payment-settlement-bank .ui-control,
#vehicleSaleEditorModal .ap-payment-settlement-bank .ui-control,
#vehicleDeliveryEditorModal .ap-payment-settlement-bank .ui-control{
    width: 100%;
    max-width: 28ch;
}

#apPaymentEditorModal .ap-payment-settlement-top .ap-payment-field-ref .ui-control,
#receiptPaymentEditorModal .ap-payment-settlement-top .ap-payment-field-ref .ui-control,
#arReceiptEditorModal .ap-payment-settlement-top .ap-payment-field-ref .ui-control,
#whtCertEditorModal .ap-payment-settlement-top .ap-payment-field-ref .ui-control,
#reservationEditorModal .ap-payment-settlement-top .ap-payment-field-ref .ui-control,
#vehicleSaleEditorModal .ap-payment-settlement-top .ap-payment-field-ref .ui-control,
#vehicleDeliveryEditorModal .ap-payment-settlement-top .ap-payment-field-ref .ui-control{
    width: 22ch;
    max-width: 22ch;
}

#apPaymentEditorModal .ap-payment-settlement-top .ap-payment-field-date .ui-control,
#receiptPaymentEditorModal .ap-payment-settlement-top .ap-payment-field-date .ui-control,
#arReceiptEditorModal .ap-payment-settlement-top .ap-payment-field-date .ui-control,
#whtCertEditorModal .ap-payment-settlement-top .ap-payment-field-date .ui-control,
#reservationEditorModal .ap-payment-settlement-top .ap-payment-field-date .ui-control,
#vehicleSaleEditorModal .ap-payment-settlement-top .ap-payment-field-date .ui-control,
#vehicleDeliveryEditorModal .ap-payment-settlement-top .ap-payment-field-date .ui-control{
    width: 14ch;
    min-width: 140px;
    max-width: 160px;
}

.purchase-appraisal-editor-modal .ap-payment-settlement-attachment {
    width: 100%;
    max-width: 520px;
}

.purchase-appraisal-editor-modal .ap-payment-settlement-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 4px;
    border-top: 1px solid var(--line);
}

.purchase-appraisal-editor-modal .ap-payment-settlement-summary > .field {
    flex: 0 0 auto;
    width: auto;
}

#apPaymentEditorModal .ap-payment-settlement-summary > .field .ui-control,
#receiptPaymentEditorModal .ap-payment-settlement-summary > .field .ui-control,
#arReceiptEditorModal .ap-payment-settlement-summary > .field .ui-control,
#whtCertEditorModal .ap-payment-settlement-summary > .field .ui-control,
.purchase-appraisal-editor-modal .ap-payment-settlement-summary > .field .ui-control {
    width: 14ch;
    max-width: 14ch;
    text-align: right;
}

.purchase-appraisal-editor-modal .purchase-appraisal-form-doc-no .ui-control {
    min-width: 120px;
    max-width: 180px;
}

.purchase-appraisal-editor-modal .purchase-appraisal-form-date .ui-control {
    min-width: 110px;
    max-width: 130px;
}

.purchase-appraisal-editor-modal #apPaymentLinesTable th:nth-child(4),
.purchase-appraisal-editor-modal #apPaymentLinesTable td:nth-child(4),
.purchase-appraisal-editor-modal #apPaymentLinesTable th:nth-child(5),
.purchase-appraisal-editor-modal #apPaymentLinesTable td:nth-child(5),
.purchase-appraisal-editor-modal #apPaymentLinesTable th:nth-child(7),
.purchase-appraisal-editor-modal #apPaymentLinesTable td:nth-child(7),
.purchase-appraisal-editor-modal #apPaymentLinesTable th:nth-child(8),
.purchase-appraisal-editor-modal #apPaymentLinesTable td:nth-child(8) {
    width: 7.5rem;
    max-width: 7.5rem;
}

.purchase-appraisal-editor-modal #apPaymentLinesTable th:nth-child(6),
.purchase-appraisal-editor-modal #apPaymentLinesTable td:nth-child(6) {
    width: 5.5rem;
    max-width: 5.5rem;
}

.purchase-appraisal-editor-modal #apPaymentLinesTable th:nth-child(3),
.purchase-appraisal-editor-modal #apPaymentLinesTable td:nth-child(3) {
    width: 11rem;
    max-width: 14rem;
}

.purchase-appraisal-editor-modal #apPaymentLinesTable td.amount .ui-control,
.purchase-appraisal-editor-modal #apPaymentLinesTable td.amount .app-payment-line-wh-display {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    text-align: right;
}

.purchase-appraisal-editor-modal #apPaymentLinesTable td.amount input[type="number"] {
    padding-left: 6px;
    padding-right: 6px;
}

.purchase-appraisal-editor-modal .ap-payment-attachment-preview {
    margin-bottom: 10px;
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    background: #f8fafc;
}

.purchase-appraisal-editor-modal .ap-payment-attachment-preview img,
.purchase-appraisal-editor-modal .ap-payment-attachment-preview iframe {
    display: block;
    width: 100%;
    max-height: 280px;
    object-fit: contain;
    background: #fff;
}

.purchase-appraisal-editor-modal .ap-payment-attachment-preview iframe {
    min-height: 280px;
    border: 0;
}

.purchase-appraisal-editor-modal .ap-payment-attachment-preview-fallback {
    padding: 16px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

@media (max-width: 960px) {
    #apPaymentEditorModal .ap-payment-input-name,
    #receiptPaymentEditorModal .ap-payment-input-name,
#arReceiptEditorModal .ap-payment-input-name,
#whtCertEditorModal .ap-payment-input-name,
    #apPaymentEditorModal .ap-payment-payee-select-field,
    #receiptPaymentEditorModal .ap-payment-payee-select-field,
#arReceiptEditorModal .ap-payment-payee-select-field,
#whtCertEditorModal .ap-payment-payee-select-field,
    #apPaymentEditorModal .ap-payment-payee-select-field .select2-container,
    #receiptPaymentEditorModal .ap-payment-payee-select-field .select2-container,
#arReceiptEditorModal .ap-payment-payee-select-field .select2-container,
#whtCertEditorModal .ap-payment-payee-select-field .select2-container,
    #apPaymentEditorModal .ap-payment-header-doc-no .ui-control,
    #receiptPaymentEditorModal .ap-payment-header-doc-no .ui-control,
#arReceiptEditorModal .ap-payment-header-doc-no .ui-control,
#whtCertEditorModal .ap-payment-header-doc-no .ui-control,
#reservationEditorModal .ap-payment-header-doc-no .ui-control,
#vehicleSaleEditorModal .ap-payment-header-doc-no .ui-control,
#vehicleDeliveryEditorModal .ap-payment-header-doc-no .ui-control,
#salesCommissionEditorModal .ap-payment-header-doc-no .ui-control,
#financeApplicationEditorModal .ap-payment-header-doc-no .ui-control,
#dfcEditorModal .ap-payment-header-doc-no .ui-control,
#arApNettingEditorModal .ap-payment-header-doc-no .ui-control,
    #apPaymentEditorModal .ap-payment-header-date .ui-control,
    #receiptPaymentEditorModal .ap-payment-header-date .ui-control,
#arReceiptEditorModal .ap-payment-header-date .ui-control,
#whtCertEditorModal .ap-payment-header-date .ui-control,
#reservationEditorModal .ap-payment-header-date .ui-control,
#vehicleSaleEditorModal .ap-payment-header-date .ui-control,
#vehicleDeliveryEditorModal .ap-payment-header-date .ui-control,
#salesCommissionEditorModal .ap-payment-header-date .ui-control,
#dfcEditorModal .ap-payment-header-date .ui-control,
#arApNettingEditorModal .ap-payment-header-date .ui-control,
    #apPaymentEditorModal .ap-payment-header-type,
    #receiptPaymentEditorModal .ap-payment-header-type,
#arReceiptEditorModal .ap-payment-header-type,
#whtCertEditorModal .ap-payment-header-type,
    #apPaymentEditorModal .ap-payment-header-type .select2-container,
    #receiptPaymentEditorModal .ap-payment-header-type .select2-container,
#arReceiptEditorModal .ap-payment-header-type .select2-container,
#whtCertEditorModal .ap-payment-header-type .select2-container,
    .purchase-appraisal-editor-modal .ap-payment-payee-select-field,
    .purchase-appraisal-editor-modal .ap-payment-payee-select-field .select2-container,
    .purchase-appraisal-editor-modal .ap-payment-settlement-method,
    .purchase-appraisal-editor-modal .ap-payment-settlement-bank,
    #apPaymentEditorModal .ap-payment-settlement-bank .ui-control,
    #receiptPaymentEditorModal .ap-payment-settlement-bank .ui-control,
#arReceiptEditorModal .ap-payment-settlement-bank .ui-control,
#whtCertEditorModal .ap-payment-settlement-bank .ui-control,
    #apPaymentEditorModal .ap-payment-settlement-top .ap-payment-field-ref .ui-control,
    #receiptPaymentEditorModal .ap-payment-settlement-top .ap-payment-field-ref .ui-control,
#arReceiptEditorModal .ap-payment-settlement-top .ap-payment-field-ref .ui-control,
#whtCertEditorModal .ap-payment-settlement-top .ap-payment-field-ref .ui-control,
    #apPaymentEditorModal .ap-payment-settlement-top .ap-payment-field-date .ui-control,
    #receiptPaymentEditorModal .ap-payment-settlement-top .ap-payment-field-date .ui-control,
#arReceiptEditorModal .ap-payment-settlement-top .ap-payment-field-date .ui-control,
#whtCertEditorModal .ap-payment-settlement-top .ap-payment-field-date .ui-control{
        width: 100%;
        max-width: none;
    }

    #apPaymentEditorModal .ap-payment-payee-info-box,
    #receiptPaymentEditorModal .ap-payment-payee-info-box,
#arReceiptEditorModal .ap-payment-payee-info-box,
#whtCertEditorModal .ap-payment-payee-info-box,
    #apPaymentEditorModal .ap-payment-summary-cards,
    #receiptPaymentEditorModal .ap-payment-summary-cards,
#arReceiptEditorModal .ap-payment-summary-cards,
#whtCertEditorModal .ap-payment-summary-cards,
    #bankReconcileEditorModal .ap-payment-summary-cards{
        grid-template-columns: 1fr;
    }

    #apPaymentEditorModal .ap-payment-payee-tax-address-row,
    #receiptPaymentEditorModal .ap-payment-payee-tax-address-row,
#arReceiptEditorModal .ap-payment-payee-tax-address-row{
        flex-wrap: wrap;
    }

    #apPaymentEditorModal .ap-payment-payee-tax-address-row > .ap-payment-payee-tax-field,
    #receiptPaymentEditorModal .ap-payment-payee-tax-address-row > .ap-payment-payee-tax-field,
#arReceiptEditorModal .ap-payment-payee-tax-address-row > .ap-payment-payee-tax-field,
    #apPaymentEditorModal .ap-payment-payee-tax-address-row > .ap-payment-payee-address-field,
    #receiptPaymentEditorModal .ap-payment-payee-tax-address-row > .ap-payment-payee-address-field,
#arReceiptEditorModal .ap-payment-payee-tax-address-row > .ap-payment-payee-address-field{
        flex: 1 1 100%;
    }
}

.purchase-appraisal-editor-modal #apPaymentLinesTable .select2-container,
.purchase-appraisal-editor-modal #whtCertLinesTable .select2-container,
.purchase-appraisal-editor-modal #reservationConditionsTable .select2-container,
.purchase-appraisal-editor-modal #vehicleSaleConditionsTable .select2-container {
    width: 100% !important;
    max-width: 100%;
}

/* Withholding Tax Certificate — filter + modal tweaks (match ApPayment pattern) */
.wht-cert-page .wht-cert-filter.purchase-appraisal-filter {
    grid-template-columns: auto auto auto auto auto auto auto;
    justify-content: start;
    width: auto;
    max-width: 100%;
    align-items: end;
}

.wht-cert-page .wht-cert-filter > .field {
    overflow: visible;
}

.wht-cert-page .wht-cert-filter .wht-cert-tax-form-field {
    width: 200px;
    max-width: 200px;
}

.employee-payment-page .employee-payment-filter > .field,
.payroll-period-page .payroll-period-filter > .field {
    overflow: visible;
}

@media (max-width: 1400px) {
    .wht-cert-page .wht-cert-filter.purchase-appraisal-filter {
        grid-template-columns: auto auto auto auto;
    }

    .wht-cert-page .wht-cert-filter .filter-actions.compact {
        grid-column: auto;
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    .wht-cert-page .wht-cert-filter.purchase-appraisal-filter {
        grid-template-columns: 1fr !important;
        width: 100%;
    }
}

#whtCertEditorModal .ap-payment-header-doc-no .ui-control {
    width: 20ch;
    max-width: 20ch;
}

#whtCertEditorModal .wht-cert-header-seq .ui-control {
    width: 8ch;
    max-width: 8ch;
    min-width: 8ch;
}

#whtCertEditorModal .ap-payment-summary-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

#whtCertEditorModal .wht-cert-baht-text-row {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#whtCertEditorModal .ap-payment-lines-table-wrap #whtCertLinesTable {
    min-width: 1100px;
    width: 100%;
    table-layout: fixed;
}

#whtCertEditorModal #whtCertLinesTable th.amount,
#whtCertEditorModal #whtCertLinesTable td.amount {
    width: 7.5rem;
    max-width: 7.5rem;
}

#whtCertEditorModal #whtCertLinesTable td.amount .ui-control {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding-left: 6px;
    padding-right: 6px;
    text-align: right;
}

#whtCertEditorModal #whtCertLinesTable .wht-line-income-type-cell {
    width: 22%;
    min-width: 0;
}

#whtCertEditorModal #whtCertLinesTable .wht-line-income-type-cell .ui-control,
#whtCertEditorModal #whtCertLinesTable .wht-line-income-type-cell select {
    width: 100%;
    max-width: 100%;
}

#whtCertEditorModal #whtCertLinesTable .wht-line-detail-cell {
    width: 16%;
    min-width: 0;
}

#whtCertEditorModal #whtCertLinesTable .wht-line-detail-cell .ui-control {
    width: 100%;
    max-width: 100%;
}

#whtCertEditorModal #whtCertLinesTable .wht-line-date-cell {
    width: 9.5rem;
    max-width: 9.5rem;
    vertical-align: top;
}

#whtCertEditorModal #whtCertLinesTable .wht-line-date-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    min-width: 0;
}

#whtCertEditorModal #whtCertLinesTable .wht-line-date-wrap .ui-control {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

#whtCertEditorModal #whtCertLinesTable .wht-line-paid-cell,
#whtCertEditorModal #whtCertLinesTable .wht-line-rate-cell,
#whtCertEditorModal #whtCertLinesTable .wht-line-tax-cell {
    width: 7.5rem;
    max-width: 7.5rem;
    vertical-align: middle;
}

#whtCertEditorModal #whtCertLinesTable .wht-line-subtype-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
}

#whtCertEditorModal #whtCertLinesTable .action-col {
    width: 3rem;
    max-width: 3rem;
}

/* Bank Reconciliation — 5 fields + ค้นหา = 6 คอลัมน์ (ห้ามใช้ PA 5-col แล้วให้ปุ่มตกแถว) */
.bank-reconciliation-page .bank-reconcile-filter.purchase-appraisal-filter {
    grid-template-columns: auto auto auto auto auto auto;
    justify-content: start;
    width: auto;
    max-width: 100%;
    align-items: end;
}

@media (max-width: 1200px) {
    .bank-reconciliation-page .bank-reconcile-filter.purchase-appraisal-filter {
        grid-template-columns: auto auto auto;
    }

    .bank-reconciliation-page .bank-reconcile-filter .filter-actions.compact {
        grid-column: auto;
        justify-content: flex-start;
    }
}

.bank-reconciliation-page .bank-reconcile-date-field {
    width: 150px;
    max-width: 150px;
}

.bank-reconciliation-page .bank-reconcile-bank-field {
    width: 220px;
    max-width: 220px;
}

.bank-reconciliation-page .bank-reconcile-search-field {
    width: 220px;
    max-width: 220px;
}

.bank-reconciliation-page .bank-reconcile-status-field {
    width: 180px;
    max-width: 180px;
}

#bankReconcileEditorModal .bank-reconcile-header-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin-top: 8px;
}

#bankReconcileEditorModal .bank-reconcile-header-meta .field {
    min-width: 140px;
}

#bankReconcileEditorModal .bank-reconcile-header-bank {
    min-width: 220px;
    flex: 1 1 220px;
}

#bankReconcileEditorModal .bank-reconcile-summary-cards {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

#bankReconcileEditorModal .ap-payment-summary-tile {
    background: #f8fafc;
    border-color: #e2e8f0;
    color: #0f172a;
}

#bankReconcileEditorModal .bank-reconcile-panel-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 12px;
}

#bankReconcileEditorModal .bank-reconcile-book-search-field {
    flex: 1 1 220px;
    min-width: 180px;
    margin: 0;
}

#bankReconcileEditorModal .bank-reconcile-lines-table-wrap {
    overflow-x: auto;
}

#bankReconcileEditorModal .bank-reconcile-select-col {
    width: 2.5rem;
    max-width: 2.5rem;
    text-align: center;
}

#bankReconcileEditorModal tr.is-selected {
    background: #eff6ff;
}

#bankReconcileEditorModal .bank-reconcile-adjust-link {
    margin-top: 4px;
    font-size: 12px;
}

#bankReconcileEditorModal .bank-reconcile-adjust-link a {
    color: var(--blue-700);
    font-weight: 600;
}

#bankReconcileImportPreviewModal .bank-reconcile-import-dialog {
    width: min(100%, 920px);
}

@media (max-width: 1200px) {
    #bankReconcileEditorModal .bank-reconcile-summary-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Business-only: reservation payment lines table + delivery signatures (ApPayment has no multi-line receive / canvas) */
#reservationEditorModal #reservationPaymentsTable {
    min-width: 860px;
    width: 100%;
}

#reservationEditorModal #reservationPaymentsTable td .ui-control,
#reservationEditorModal #reservationPaymentsTable td .select2-container {
    width: 100% !important;
    min-width: 0;
}

#reservationEditorModal #reservationPaymentsTable td.amount .ui-control {
    text-align: right;
}

#reservationEditorModal .reservation-payment-empty {
    text-align: center;
    color: var(--muted);
    padding: 16px 8px;
}

/* Reservation + VehicleSale: customer left / vehicle right — ApPayment flex row */
#reservationEditorModal .reservation-split-row,
#vehicleSaleEditorModal .reservation-split-row,
#financeApplicationEditorModal .reservation-split-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    align-items: flex-start;
    width: 100%;
}

#reservationEditorModal .reservation-split-panel,
#vehicleSaleEditorModal .reservation-split-panel,
#financeApplicationEditorModal .reservation-split-panel {
    flex: 1 1 calc(50% - 6px);
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#financeApplicationEditorModal .reservation-split-panel.finance-case-sale-left {
    flex: 0 0 280px;
    width: 280px;
    max-width: 280px;
    gap: 10px;
}

#financeApplicationEditorModal .reservation-split-panel.finance-case-sale-right {
    flex: 1 1 auto;
    max-width: none;
}

#reservationEditorModal .reservation-split-panel-title,
#vehicleSaleEditorModal .reservation-split-panel-title,
#financeApplicationEditorModal .reservation-split-panel-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--text);
    line-height: 1.2;
}

#reservationEditorModal .reservation-panel-full,
#vehicleSaleEditorModal .reservation-panel-full,
#financeApplicationEditorModal .reservation-panel-full {
    width: 100%;
    max-width: none;
}

#reservationEditorModal .reservation-panel-full .select2-container,
#reservationEditorModal .reservation-panel-full .ui-control,
#vehicleSaleEditorModal .reservation-panel-full .select2-container,
#vehicleSaleEditorModal .reservation-panel-full .ui-control,
#financeApplicationEditorModal .reservation-panel-full .select2-container,
#financeApplicationEditorModal .reservation-panel-full .ui-control {
    width: 100% !important;
    max-width: none;
}

#reservationEditorModal .reservation-customer-contact-row,
#vehicleSaleEditorModal .reservation-customer-contact-row {
    width: 100%;
    flex-wrap: nowrap;
}

#reservationEditorModal .reservation-customer-contact-row > .reservation-field-phone,
#vehicleSaleEditorModal .reservation-customer-contact-row > .reservation-field-phone {
    flex: 1 1 calc(40% - 6px);
    max-width: none;
}

#reservationEditorModal .reservation-customer-contact-row > .reservation-field-email,
#vehicleSaleEditorModal .reservation-customer-contact-row > .reservation-field-email {
    flex: 1 1 calc(60% - 6px);
    max-width: none;
}

#reservationEditorModal .reservation-customer-contact-row > .field .ui-control,
#vehicleSaleEditorModal .reservation-customer-contact-row > .field .ui-control {
    width: 100%;
    max-width: none;
}

#reservationEditorModal #reservationVehicleDetailBox.ap-payment-payee-info-box,
#vehicleSaleEditorModal #vehicleSaleInfoBox.ap-payment-payee-info-box {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 10px 16px;
}

#vehicleDeliveryEditorModal .reservation-split-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    align-items: flex-start;
    width: 100%;
}

#vehicleDeliveryEditorModal .reservation-split-panel {
    flex: 1 1 calc(50% - 6px);
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#vehicleDeliveryEditorModal .reservation-split-panel-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--text);
    line-height: 1.2;
}

#vehicleDeliveryEditorModal .reservation-panel-full {
    width: 100%;
    max-width: none;
}

#vehicleDeliveryEditorModal .reservation-panel-full .select2-container,
#vehicleDeliveryEditorModal .reservation-panel-full .ui-control {
    width: 100% !important;
    max-width: none;
}

#vehicleDeliveryEditorModal #vdVehicleInfoBox.ap-payment-payee-info-box {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 10px 16px;
}

#vehicleDeliveryEditorModal .vd-customer-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
}

#vehicleDeliveryEditorModal .vd-customer-fields > .field {
    margin: 0;
    min-width: 0;
}

#vehicleDeliveryEditorModal .vd-customer-fields > .field .ui-control {
    width: 100%;
    max-width: none;
}

#vehicleDeliveryEditorModal .vd-customer-fields > .field:last-child {
    grid-column: 1 / -1;
}

#vehicleDeliveryEditorModal .ap-payment-lines-table-wrap #vdDeliveryConditionsTable {
    width: 100%;
    min-width: 720px;
    table-layout: fixed;
}

#vehicleDeliveryEditorModal #vdDeliveryConditionsTable td .ui-control,
#vehicleDeliveryEditorModal #vdDeliveryConditionsTable td .select2-container {
    width: 100% !important;
    min-width: 0;
    max-width: 100%;
}

#vehicleDeliveryEditorModal .ap-payment-summary-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

#vehicleDeliveryEditorModal .vd-signature-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

#vehicleDeliveryEditorModal .vd-signature-row > .field {
    flex: 1 1 calc(50% - 6px);
    min-width: 0;
}

@media (max-width: 960px) {
    #vehicleDeliveryEditorModal .reservation-split-row,
    #vehicleDeliveryEditorModal .vd-signature-row {
        flex-wrap: wrap;
    }

    #vehicleDeliveryEditorModal .reservation-split-panel,
    #vehicleDeliveryEditorModal .vd-signature-row > .field {
        flex: 1 1 100%;
        width: 100%;
    }

    #vehicleDeliveryEditorModal .ap-payment-summary-cards {
        grid-template-columns: 1fr;
    }
}

/* VehicleSale: ใบจอง / วิธีขาย / บริษัทไฟแนนซ์(FINANCE) / ลูกค้า / เบอร์ / อีเมล / พนักงาน = 2-col grid */
#vehicleSaleEditorModal .vehicle-sale-customer-fields,
#financeApplicationEditorModal .vehicle-sale-customer-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
}

/* Finance Application uses vertical stack instead of 2-col customer grid */
#financeApplicationEditorModal .finance-case-customer-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 260px;
}

#vehicleSaleEditorModal .vehicle-sale-customer-fields > .field,
#financeApplicationEditorModal .vehicle-sale-customer-fields > .field {
    margin: 0;
    min-width: 0;
}

#vehicleSaleEditorModal .vehicle-sale-finance-company-field[hidden] {
    display: none !important;
}

#vehicleSaleEditorModal .vehicle-sale-customer-fields > .field .ui-control,
#vehicleSaleEditorModal .vehicle-sale-customer-fields > .field .select2-container,
#financeApplicationEditorModal .vehicle-sale-customer-fields > .field .ui-control {
    width: 100% !important;
    max-width: none;
}

#financeApplicationEditorModal .role-permission-editor-modal-title-wrap {
    align-items: flex-start;
}

#financeApplicationEditorModal .role-permission-editor-modal-header {
    align-items: flex-start;
}

#financeApplicationEditorModal .role-permission-editor-modal-close {
    margin-top: 2px;
}

/* Select2 เปิดนอก dialog เพื่อไม่ให้ถูก overflow:hidden ของ modal ทับ */
body:has(.finance-application-page) .select2-dropdown {
    z-index: 10030 !important;
}

#financeApplicationEditorModal .ap-payment-lines-table-wrap {
    overflow: visible;
}

#financeApplicationEditorModal .fa-line-attachment {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

#financeApplicationEditorModal .fa-line-attachment-name {
    font-size: 12px;
    color: var(--muted);
    word-break: break-word;
}

#reservationEditorModal .ap-payment-settlement-bank .ui-control[data-rv-money],
#reservationEditorModal #reservationNetSalePrice,
#reservationEditorModal #reservationListPrice,
#reservationEditorModal #reservationDiscountAmount,
#reservationEditorModal #reservationAmount,
#reservationEditorModal #reservationReceivedAmount,
#vehicleSaleEditorModal .ap-payment-settlement-bank .ui-control[data-vs-money],
#vehicleSaleEditorModal #vehicleSaleNetPrice,
#vehicleSaleEditorModal #vehicleSaleReservationApplied,
#vehicleSaleEditorModal #vehicleSaleRemainingAmount,
#vehicleSaleEditorModal #vehicleSaleListPrice,
#vehicleSaleEditorModal #vehicleSaleDiscountAmount,
#vehicleSaleEditorModal #vehicleSaleDownPayment,
#vehicleSaleEditorModal #vehicleSaleFinanceAmount {
    text-align: right;
}

@media (max-width: 960px) {
    #reservationEditorModal .reservation-split-row,
    #reservationEditorModal .reservation-customer-contact-row,
    #vehicleSaleEditorModal .reservation-split-row,
    #vehicleSaleEditorModal .reservation-customer-contact-row,
    #financeApplicationEditorModal .reservation-split-row {
        flex-wrap: wrap;
    }

    #reservationEditorModal .reservation-split-panel,
    #reservationEditorModal .reservation-customer-contact-row > .reservation-field-phone,
    #reservationEditorModal .reservation-customer-contact-row > .reservation-field-email,
    #vehicleSaleEditorModal .reservation-split-panel,
    #vehicleSaleEditorModal .reservation-customer-contact-row > .reservation-field-phone,
    #vehicleSaleEditorModal .reservation-customer-contact-row > .reservation-field-email,
    #financeApplicationEditorModal .reservation-split-panel {
        flex: 1 1 100%;
        max-width: none;
        width: 100%;
    }

    #reservationEditorModal #reservationVehicleDetailBox.ap-payment-payee-info-box,
    #vehicleSaleEditorModal #vehicleSaleInfoBox.ap-payment-payee-info-box {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #reservationEditorModal .ap-payment-summary-cards,
    #vehicleSaleEditorModal .ap-payment-summary-cards {
        grid-template-columns: 1fr;
    }
}

/* Reservation editor: header + conditions card + footer on mobile */
@media (max-width: 768px) {
    #reservationEditorModal .ap-payment-header-meta {
        gap: 10px 12px;
    }

    #reservationEditorModal .ap-payment-header-meta > .field {
        flex: 1 1 calc(50% - 6px);
        min-width: calc(50% - 6px);
        max-width: 100%;
    }

    #reservationEditorModal .ap-payment-header-doc-no {
        flex: 1 1 100%;
        min-width: 100%;
    }

    #reservationEditorModal .ap-payment-header-doc-no .ui-control,
    #reservationEditorModal .ap-payment-header-date .ui-control {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    #reservationEditorModal .ap-payment-header-status {
        flex: 1 1 calc(50% - 6px);
    }

    #reservationEditorModal .reservation-conditions-table-wrap {
        overflow: visible;
    }

    #reservationEditorModal #reservationConditionsTable tbody,
    #reservationEditorModal #reservationConditionsTable tbody {
        display: block;
        width: 100%;
    }

    #reservationEditorModal #reservationConditionsTable thead {
        display: none;
    }

    #reservationEditorModal #reservationConditionsTable tr.reservation-conditions-row {
        display: block;
        width: 100%;
        box-sizing: border-box;
        margin: 0;
        padding: 12px;
        border: 1px solid var(--line, #e2e8f0);
        border-radius: 12px;
        background: #fff;
    }

    #reservationEditorModal #reservationConditionsTable td {
        display: block;
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
        padding: 0 0 12px;
        border: 0;
        text-align: left !important;
        vertical-align: top;
    }

    #reservationEditorModal #reservationConditionsTable td:last-child {
        padding-bottom: 0;
    }

    #reservationEditorModal #reservationConditionsTable td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 6px;
        font-size: 12px;
        font-weight: 700;
        color: var(--muted, #667085);
        white-space: normal;
        word-break: break-word;
    }

    #reservationEditorModal #reservationConditionsTable td.amount .ui-control {
        text-align: right;
    }

    #reservationEditorModal #reservationConditionsTable td .ui-control,
    #reservationEditorModal #reservationConditionsTable td .select2-container {
        width: 100% !important;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    #reservationEditorModal .ap-payment-summary-card {
        margin-top: 4px;
    }

    #reservationEditorModal .ap-payment-summary-cards {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    #reservationEditorModal .ap-payment-summary-tile {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    #reservationEditorModal .ap-payment-summary-tile-value {
        flex-wrap: wrap;
        justify-content: flex-end;
        word-break: break-word;
    }

    #reservationEditorModal .purchase-appraisal-editor-actions.role-permission-editor-modal-actions {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 8px;
    }

    #reservationEditorModal .purchase-appraisal-editor-actions .btn {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    /* VehicleSale conditions: mobile card (same pattern as Reservation) */
    #vehicleSaleEditorModal .vehicle-sale-conditions-table-wrap {
        overflow: visible;
    }

    #vehicleSaleEditorModal #vehicleSaleConditionsTable tbody,
    #vehicleSaleEditorModal #vehicleSaleConditionsTable tbody {
        display: block;
        width: 100%;
    }

    #vehicleSaleEditorModal #vehicleSaleConditionsTable thead {
        display: none;
    }

    #vehicleSaleEditorModal #vehicleSaleConditionsTable tr.vehicle-sale-conditions-row {
        display: block;
        width: 100%;
        box-sizing: border-box;
        margin: 0;
        padding: 12px;
        border: 1px solid var(--line, #e2e8f0);
        border-radius: 12px;
        background: #fff;
    }

    #vehicleSaleEditorModal #vehicleSaleConditionsTable td {
        display: block;
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
        padding: 0 0 12px;
        border: 0;
        text-align: left !important;
        vertical-align: top;
    }

    #vehicleSaleEditorModal #vehicleSaleConditionsTable td:last-child {
        padding-bottom: 0;
    }

    #vehicleSaleEditorModal #vehicleSaleConditionsTable td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 6px;
        font-size: 12px;
        font-weight: 700;
        color: var(--muted, #667085);
        white-space: normal;
        word-break: break-word;
    }

    #vehicleSaleEditorModal #vehicleSaleConditionsTable td.amount .ui-control {
        text-align: right;
    }

    #vehicleSaleEditorModal #vehicleSaleConditionsTable td .ui-control,
    #vehicleSaleEditorModal #vehicleSaleConditionsTable td .select2-container {
        width: 100% !important;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    #vehicleSaleEditorModal .vehicle-sale-customer-fields {
        grid-template-columns: 1fr;
    }

    #vehicleSaleEditorModal .vehicle-sale-finance-status-wrap {
        justify-content: flex-start;
    }

    #vehicleSaleEditorModal .vehicle-sale-finance-status-btn {
        justify-content: flex-start;
    }

    #vehicleSaleFinanceDetailModal .vehicle-sale-finance-detail-meta {
        grid-template-columns: 1fr;
    }

    #vehicleSaleFinanceDetailModal .vehicle-sale-finance-detail-table-wrap {
        overflow: visible;
    }

    #vehicleSaleFinanceDetailModal #vehicleSaleFinanceDetailTable,
    #vehicleSaleFinanceDetailModal #vehicleSaleFinanceDetailTable tbody {
        display: block;
        width: 100%;
    }

    #vehicleSaleFinanceDetailModal #vehicleSaleFinanceDetailTable thead {
        display: none;
    }

    #vehicleSaleFinanceDetailModal #vehicleSaleFinanceDetailTable tr.vehicle-sale-finance-detail-row {
        display: block;
        width: 100%;
        box-sizing: border-box;
        margin: 0 0 10px;
        padding: 12px;
        border: 1px solid var(--line, #e2e8f0);
        border-radius: 12px;
        background: #fff;
    }

    #vehicleSaleFinanceDetailModal #vehicleSaleFinanceDetailTable tr.vehicle-sale-finance-detail-row:last-child {
        margin-bottom: 0;
    }

    #vehicleSaleFinanceDetailModal #vehicleSaleFinanceDetailTable tr.vehicle-sale-finance-detail-empty-row {
        display: block;
        width: 100%;
        box-sizing: border-box;
        margin: 0;
        padding: 16px 12px;
        border: 1px solid var(--line, #e2e8f0);
        border-radius: 12px;
        background: #fff;
    }

    #vehicleSaleFinanceDetailModal #vehicleSaleFinanceDetailTable tr.vehicle-sale-finance-detail-empty-row td {
        display: block;
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
        padding: 0;
        border: 0;
        text-align: center !important;
        color: var(--muted, #667085);
    }

    #vehicleSaleFinanceDetailModal #vehicleSaleFinanceDetailTable td {
        display: block;
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
        padding: 0 0 10px;
        border: 0;
        text-align: left !important;
        white-space: normal;
    }

    #vehicleSaleFinanceDetailModal #vehicleSaleFinanceDetailTable td:last-child {
        padding-bottom: 0;
    }

    #vehicleSaleFinanceDetailModal #vehicleSaleFinanceDetailTable td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 4px;
        font-size: 12px;
        font-weight: 700;
        color: var(--muted, #667085);
    }

    #vehicleSaleEditorModal .ap-payment-summary-card {
        margin-top: 4px;
    }

    #vehicleSaleEditorModal .ap-payment-summary-cards {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    #vehicleSaleEditorModal .ap-payment-summary-tile {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    #vehicleSaleEditorModal .purchase-appraisal-editor-actions.role-permission-editor-modal-actions {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 8px;
    }

    #vehicleSaleEditorModal .purchase-appraisal-editor-actions .btn {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
}

@media (max-width: 640px) {
    #reservationEditorModal #reservationVehicleDetailBox.ap-payment-payee-info-box {
        grid-template-columns: 1fr;
    }
}

#vehicleDeliveryEditorModal .vd-signature-wrap canvas {
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    touch-action: none;
    max-width: 100%;
}

#vehicleDeliveryEditorModal .vd-signature-wrap img {
    max-width: 100%;
    margin-top: 8px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

/* Receipt payment summary: 2 tiles (no WHT) */
#receiptPaymentEditorModal .receipt-payment-summary-cards ,
#arReceiptEditorModal .receipt-payment-summary-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Mobile list filters — single column (overrides page-specific auto auto / fixed widths) */
@media (max-width: 768px) {
    .purchase-appraisal-page .purchase-appraisal-filter,
    .reservation-page .reservation-filter,
    .finance-application-page .finance-application-filter,
    .finance-follow-up-page .finance-follow-up-filter,
    .account-payable-page .account-payable-filter,
    .account-receivable-page .account-receivable-filter,
    .ap-payment-page .ap-payment-filter,
    .direct-finance-contract-page .direct-finance-contract-filter,
    .direct-finance-overdue-page .direct-finance-overdue-filter,
    .vehicle-stock-report-page .vehicle-stock-report-filter,
    .sales-report-page .sales-report-filter,
    .finance-report-page .finance-report-filter,
    .direct-finance-report-page .direct-finance-report-filter,
    .vehicle-purchase-report-page .vehicle-purchase-report-filter,
    .lead-pipeline-report-page .lead-pipeline-report-filter,
    .profit-report-page .profit-report-filter,
    .commission-report-page .commission-report-filter,
    .cash-flow-report-page .cash-flow-report-filter,
    .receipt-payment-report-page .receipt-payment-report-filter,
    .bank-report-page .bank-report-filter,
    .tax-report-page .tax-report-filter,
    .journal-report-page .journal-report-filter,
    .general-ledger-report-page .general-ledger-report-filter,
    .trial-balance-report-page .trial-balance-report-filter,
    .financial-statement-report-page .financial-statement-report-filter,
    .fixed-asset-depreciation-report-page .fixed-asset-depreciation-report-filter,
    .direct-finance-closing-page .direct-finance-closing-filter,
    .direct-finance-payment-page .direct-finance-payment-filter,
    .journal-entry-page .journal-entry-filter,
    .wht-cert-page .wht-cert-filter,
    .bank-reconciliation-page .bank-reconcile-filter {
        grid-template-columns: 1fr !important;
        width: 100% !important;
        max-width: 100% !important;
        justify-content: stretch;
    }

    .purchase-appraisal-page .purchase-appraisal-date-field,
    .purchase-appraisal-page .purchase-appraisal-search-field,
    .purchase-appraisal-page .purchase-appraisal-status-field,
    .purchase-appraisal-page .ap-payment-date-field,
    .purchase-appraisal-page .ap-payment-search-field,
    .purchase-appraisal-page .ap-payment-status-field,
    .purchase-appraisal-page .reservation-search-field,
    .finance-application-page .ap-payment-date-field,
    .finance-application-page .ap-payment-search-field,
    .finance-application-page .ap-payment-status-field,
    .finance-follow-up-page .ap-payment-date-field,
    .finance-follow-up-page .ap-payment-search-field,
    .finance-follow-up-page .ap-payment-status-field,
    .ap-payment-page .ap-payment-date-field,
    .ap-payment-page .ap-payment-search-field,
    .ap-payment-page .ap-payment-status-field {
        width: 100% !important;
        max-width: none !important;
    }

    .purchase-appraisal-page .purchase-appraisal-filter .filter-actions.compact,
    .reservation-page .reservation-filter .filter-actions.compact,
    .finance-application-page .finance-application-filter .filter-actions.compact,
    .finance-follow-up-page .finance-follow-up-filter .filter-actions.compact,
    .ap-payment-page .ap-payment-filter .filter-actions.compact {
        grid-column: 1 / -1;
        width: 100%;
        justify-content: stretch;
    }

    .purchase-appraisal-page .purchase-appraisal-filter .filter-actions.compact .btn,
    .reservation-page .reservation-filter .filter-actions.compact .btn,
    .finance-application-page .finance-application-filter .filter-actions.compact .btn,
    .finance-follow-up-page .finance-follow-up-filter .filter-actions.compact .btn,
    .ap-payment-page .ap-payment-filter .filter-actions.compact .btn {
        width: 100%;
    }

    .purchase-appraisal-page .table-head-actions,
    .reservation-page .table-head-actions,
    .role-permission-page .table-head-actions,
    .finance-application-page .table-head-actions,
    .finance-follow-up-page .table-head-actions {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .purchase-appraisal-page .table-head-actions .btn,
    .reservation-page .table-head-actions .btn,
    .role-permission-page .table-head-actions .btn,
    .finance-application-page .table-head-actions .btn,
    .finance-follow-up-page .table-head-actions .btn {
        width: 100%;
    }
}

/* EP/PP: ต้องชนะ .reservation-page .reservation-filter (6×1fr) ที่ทำให้ช่อง filter ห่างมั่ว */
.payroll-period-page .payroll-period-filter.purchase-appraisal-filter,
.employee-payment-page .employee-payment-filter.purchase-appraisal-filter,
.reservation-page .payroll-period-filter.purchase-appraisal-filter,
.reservation-page .employee-payment-filter.purchase-appraisal-filter {
    grid-template-columns: auto auto auto auto auto;
    justify-content: start;
    width: auto;
    max-width: 100%;
    gap: 8px 10px;
    align-items: end;
}

.employee-payment-page .employee-payment-list-summary {
    display: grid;
    gap: 12px;
    margin: 12px 0 16px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.employee-payment-page .ap-payment-summary-tile {
    border-radius: 14px;
    padding: 14px 16px;
    border: 1px solid var(--border, #e5e7eb);
    background: var(--surface, #fff);
}

.employee-payment-page .ap-payment-summary-tile-label {
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 8px;
    color: var(--muted, #64748b);
}

.employee-payment-page .ap-payment-summary-tile-value {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 6px;
    font-size: 18px;
    font-weight: 800;
}

.employee-payment-page .ap-payment-summary-tile-unit {
    font-size: 12px;
    font-weight: 700;
}

#payrollPeriodEditorModal .pa-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

#payrollPeriodEditorModal .pp-commission-nested-table {
    margin-top: 4px;
}

#payrollPeriodEditorModal #ppEmployeeTable th.action-col,
#payrollPeriodEditorModal #ppEmployeeTable td.action-col {
    width: 9.5rem;
    min-width: 9.5rem;
    text-align: center;
    vertical-align: middle;
}

#payrollPeriodEditorModal #ppEmployeeTable td.action-col .row-actions {
    justify-content: center;
    min-height: 34px;
}

#payrollPeriodEditorModal .pp-commission-detail td {
    background: #f8fafc;
    padding: 8px 12px;
}

#payrollPeriodEditorModal .ap-payment-header-date .ui-control#ppPeriodRead {
    width: 22ch;
    max-width: 220px;
    min-width: 160px;
}

/* Select2 เปิดที่ body — ต้องสูงกว่า modal (10002) ไม่ให้ถูกทับ/เลือกไม่ได้ */
body:has(.customer-lead-page) .select2-dropdown,
body.role-permission-editor-modal-open:has(#customerLeadEditorModal:not([hidden])) .select2-dropdown,
body:has(.payroll-period-page) .select2-dropdown,
body.role-permission-editor-modal-open:has(#payrollPeriodEditorModal:not([hidden])) .select2-dropdown,
body:has(.employee-payment-page) .select2-dropdown,
body.role-permission-editor-modal-open:has(#employeePaymentEditorModal:not([hidden])) .select2-dropdown,
body.role-permission-editor-modal-open:has(#purchaseOrderEditorModal:not([hidden])) .select2-dropdown,
body.role-permission-editor-modal-open:has(#purchaseReceiveEditorModal:not([hidden])) .select2-dropdown,
body.role-permission-editor-modal-open:has(#purchaseDebitNoteEditorModal:not([hidden])) .select2-dropdown,
body.role-permission-editor-modal-open:has(#salesDebitNoteEditorModal:not([hidden])) .select2-dropdown,
body.role-permission-editor-modal-open:has(#billingNoteEditorModal:not([hidden])) .select2-dropdown,
body.role-permission-editor-modal-open:has(#salesCreditNoteEditorModal:not([hidden])) .select2-dropdown,
body.role-permission-editor-modal-open:has(#arReceiptEditorModal:not([hidden])) .select2-dropdown,
body.role-permission-editor-modal-open:has(#purchaseCreditNoteEditorModal:not([hidden])) .select2-dropdown,
body.role-permission-editor-modal-open:has(#salesInvoiceEditorModal:not([hidden])) .select2-dropdown,
body.role-permission-editor-modal-open:has(#purchaseReturnEditorModal:not([hidden])) .select2-dropdown,
body.role-permission-editor-modal-open:has(#salesReturnEditorModal:not([hidden])) .select2-dropdown,
body.role-permission-editor-modal-open:has(#depreciationEditorModal:not([hidden])) .select2-dropdown,
body:has(.chart-of-account-page) .select2-dropdown,
body.role-permission-editor-modal-open:has(#chartOfAccountEditorModal:not([hidden])) .select2-dropdown,
body:has(.account-mapping-page) .select2-dropdown,
body.role-permission-editor-modal-open:has(#accountMappingEditorModal:not([hidden])) .select2-dropdown,
body:has(.journal-entry-page) .select2-dropdown,
body:has(.receipt-payment-account-page) .select2-dropdown,
body.role-permission-editor-modal-open:has(#rpaEditorModal:not([hidden])) .select2-dropdown,
body:has(.ap-payment-page) .select2-dropdown,
body:has(.supplier-page) .select2-dropdown,
body.role-permission-editor-modal-open:has(#supplierEditorModal:not([hidden])) .select2-dropdown,
body:has(.account-receivable-page) .select2-dropdown,
body:has(.wht-cert-page) .select2-dropdown,
body.role-permission-editor-modal-open:has(#whtCertEditorModal:not([hidden])) .select2-dropdown,
body:has(.fixed-asset-page) .select2-dropdown,
body.role-permission-editor-modal-open:has(#fixedAssetEditorModal:not([hidden])) .select2-dropdown {
    z-index: 10030 !important;
}

@media (max-width: 1100px) {
    .payroll-period-page .payroll-period-filter.purchase-appraisal-filter,
    .employee-payment-page .employee-payment-filter.purchase-appraisal-filter,
    .reservation-page .payroll-period-filter.purchase-appraisal-filter,
    .reservation-page .employee-payment-filter.purchase-appraisal-filter {
        grid-template-columns: auto auto auto;
    }

    .payroll-period-page .payroll-period-filter .filter-actions.compact,
    .employee-payment-page .employee-payment-filter .filter-actions.compact {
        grid-column: auto;
        justify-content: flex-start;
    }
}


/* Purchase Debit Note — filter 5 คอลัมน์ตาม UI_Standard / PurchaseReceive */
.purchase-debit-note-page .purchase-debit-note-filter {
    grid-template-columns: auto auto auto auto auto;
    justify-content: start;
    width: auto;
    max-width: 100%;
}

/* Purchase Debit Note modal — ใบรับกว้าง | เลขที่ DN/ใบกำกับแคบ | สาเหตุเต็มแถว */
#purchaseDebitNoteEditorModal .po-editor-form,
#salesDebitNoteEditorModal .po-editor-form,
#billingNoteEditorModal .po-editor-form,
#arReceiptEditorModal .po-editor-form,
#salesCreditNoteEditorModal .po-editor-form {
    min-width: 0;
    max-width: 100%;
}

#purchaseDebitNoteEditorModal .po-supplier-card,
#salesDebitNoteEditorModal .po-supplier-card,
#billingNoteEditorModal .po-supplier-card,
#arReceiptEditorModal .po-supplier-card,
#salesCreditNoteEditorModal .po-supplier-card {
    min-width: 0;
    max-width: 100%;
    overflow: visible;
}

#purchaseDebitNoteEditorModal .po-supplier-top.pdn-receive-top,
#salesDebitNoteEditorModal .po-supplier-top.pdn-receive-top,
#billingNoteEditorModal .po-supplier-top.pdn-receive-top,
#arReceiptEditorModal .po-supplier-top.pdn-receive-top,
#salesCreditNoteEditorModal .po-supplier-top.pdn-receive-top {
    grid-template-columns: minmax(0, 1fr) 150px 160px;
    width: 100%;
    min-width: 0;
    justify-content: stretch;
}

#purchaseDebitNoteEditorModal .pdn-receive-select-field .select2-container,
#salesDebitNoteEditorModal .pdn-receive-select-field .select2-container,
#billingNoteEditorModal .pdn-receive-select-field .select2-container,
#arReceiptEditorModal .pdn-receive-select-field .select2-container,
#salesCreditNoteEditorModal .pdn-receive-select-field .select2-container,
#purchaseDebitNoteEditorModal .pdn-receive-select-field .select2-container,
#salesDebitNoteEditorModal .pdn-receive-select-field .select2-container,
#billingNoteEditorModal .pdn-receive-select-field .select2-container,
#arReceiptEditorModal .pdn-receive-select-field .select2-container,
#salesCreditNoteEditorModal .pdn-receive-select-field .select2-container {
    width: 100% !important;
    max-width: none;
    min-width: 0;
}

#purchaseDebitNoteEditorModal .pdn-reason-row,
#salesDebitNoteEditorModal .pdn-reason-row,
#billingNoteEditorModal .pdn-reason-row,
#salesCreditNoteEditorModal .pdn-reason-row {
    margin-top: 12px;
    width: 100%;
    min-width: 0;
}

#purchaseDebitNoteEditorModal .pdn-doc-no-field .ui-control,
#salesDebitNoteEditorModal .pdn-doc-no-field .ui-control,
#billingNoteEditorModal .pdn-doc-no-field .ui-control,
#salesCreditNoteEditorModal .pdn-doc-no-field .ui-control,
#purchaseDebitNoteEditorModal .pdn-doc-no-field .ui-control,
#salesDebitNoteEditorModal .pdn-doc-no-field .ui-control,
#billingNoteEditorModal .pdn-doc-no-field .ui-control,
#salesCreditNoteEditorModal .pdn-doc-no-field .ui-control,
#purchaseDebitNoteEditorModal .pdn-reason-field,
#salesDebitNoteEditorModal .pdn-reason-field,
#billingNoteEditorModal .pdn-reason-field,
#salesCreditNoteEditorModal .pdn-reason-field,
#purchaseDebitNoteEditorModal .pdn-reason-field .ui-control,
#salesDebitNoteEditorModal .pdn-reason-field .ui-control,
#billingNoteEditorModal .pdn-reason-field .ui-control,
#salesCreditNoteEditorModal .pdn-reason-field .ui-control {
    width: 100%;
    min-width: 0;
    max-width: none;
    box-sizing: border-box;
}

/* อย่าใช้ overflow-x:hidden — จะทำให้ overflow-y กลายเป็น auto แล้วเกิด scrollbar ซ้อนใน Modal */
#purchaseDebitNoteEditorModal .pdn-lines-table-wrap,
#salesDebitNoteEditorModal .pdn-lines-table-wrap,
#billingNoteEditorModal .pdn-lines-table-wrap,
#salesCreditNoteEditorModal .pdn-lines-table-wrap {
    overflow: visible;
    max-width: 100%;
    min-width: 0;
}

#purchaseDebitNoteEditorModal .pdn-lines-table,
#salesDebitNoteEditorModal .pdn-lines-table,
#billingNoteEditorModal .pdn-lines-table,
#salesCreditNoteEditorModal .pdn-lines-table {
    table-layout: fixed;
    width: 100%;
    max-width: 100%;
}

#purchaseDebitNoteEditorModal .pdn-col-item,
#salesDebitNoteEditorModal .pdn-col-item,
#billingNoteEditorModal .pdn-col-item,
#salesCreditNoteEditorModal .pdn-col-item {
    width: 22%;
}

#purchaseDebitNoteEditorModal .pdn-col-adj,
#salesDebitNoteEditorModal .pdn-col-adj,
#billingNoteEditorModal .pdn-col-adj,
#salesCreditNoteEditorModal .pdn-col-adj {
    width: 28%;
}

#purchaseDebitNoteEditorModal .pdn-col-amt,
#salesDebitNoteEditorModal .pdn-col-amt,
#billingNoteEditorModal .pdn-col-amt,
#salesCreditNoteEditorModal .pdn-col-amt {
    width: 12.5%;
}

#purchaseDebitNoteEditorModal .pdn-lines-table .ui-control,
#salesDebitNoteEditorModal .pdn-lines-table .ui-control,
#billingNoteEditorModal .pdn-lines-table .ui-control,
#salesCreditNoteEditorModal .pdn-lines-table .ui-control {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

#purchaseDebitNoteEditorModal .pdn-summary-bar,
#salesDebitNoteEditorModal .pdn-summary-bar,
#billingNoteEditorModal .pdn-summary-bar,
#arReceiptEditorModal .pdn-summary-bar,
#salesCreditNoteEditorModal .pdn-summary-bar {
    flex-wrap: wrap;
    max-width: 100%;
    min-width: 0;
}

#purchaseDebitNoteEditorModal .pdn-summary-col,
#salesDebitNoteEditorModal .pdn-summary-col,
#billingNoteEditorModal .pdn-summary-col,
#salesCreditNoteEditorModal .pdn-summary-col {
    flex: 1 1 30%;
    min-width: 0;
}

#purchaseDebitNoteEditorModal .pdn-summary-col-net,
#salesDebitNoteEditorModal .pdn-summary-col-net,
#billingNoteEditorModal .pdn-summary-col-net,
#arReceiptEditorModal .pdn-summary-col-net,
#salesCreditNoteEditorModal .pdn-summary-col-net {
    flex: 1 1 40%;
    min-width: 0;
}

@media (max-width: 1100px) {
    #purchaseDebitNoteEditorModal .po-supplier-top.pdn-receive-top,
#salesDebitNoteEditorModal .po-supplier-top.pdn-receive-top,
#billingNoteEditorModal .po-supplier-top.pdn-receive-top,
#arReceiptEditorModal .po-supplier-top.pdn-receive-top,
#salesCreditNoteEditorModal .po-supplier-top.pdn-receive-top {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    #purchaseDebitNoteEditorModal .pdn-receive-select-field,
#salesDebitNoteEditorModal .pdn-receive-select-field,
#billingNoteEditorModal .pdn-receive-select-field,
#arReceiptEditorModal .pdn-receive-select-field,
#salesCreditNoteEditorModal .pdn-receive-select-field {
        grid-column: 1 / -1;
    }
}

/* จอเล็ก: เรียงแนวตั้งเต็มความกว้าง — เลื่อนเฉพาะ editor-body ไม่ซ้อน scrollbar */
@media (max-width: 900px) {
    #purchaseDebitNoteEditorModal .po-supplier-top.pdn-receive-top,
#salesDebitNoteEditorModal .po-supplier-top.pdn-receive-top,
#billingNoteEditorModal .po-supplier-top.pdn-receive-top,
#arReceiptEditorModal .po-supplier-top.pdn-receive-top,
#salesCreditNoteEditorModal .po-supplier-top.pdn-receive-top {
        grid-template-columns: 1fr;
    }

    #purchaseDebitNoteEditorModal .pdn-receive-select-field,
#salesDebitNoteEditorModal .pdn-receive-select-field,
#billingNoteEditorModal .pdn-receive-select-field,
#arReceiptEditorModal .pdn-receive-select-field,
#salesCreditNoteEditorModal .pdn-receive-select-field {
        grid-column: auto;
    }

    #purchaseDebitNoteEditorModal .pdn-doc-no-field .ui-control,
#salesDebitNoteEditorModal .pdn-doc-no-field .ui-control,
#billingNoteEditorModal .pdn-doc-no-field .ui-control,
#salesCreditNoteEditorModal .pdn-doc-no-field .ui-control,
    #purchaseDebitNoteEditorModal .pdn-doc-no-field .ui-control,
#salesDebitNoteEditorModal .pdn-doc-no-field .ui-control,
#billingNoteEditorModal .pdn-doc-no-field .ui-control,
#salesCreditNoteEditorModal .pdn-doc-no-field .ui-control {
        max-width: none;
        width: 100%;
    }

    #purchaseDebitNoteEditorModal .pdn-lines-table-wrap,
#salesDebitNoteEditorModal .pdn-lines-table-wrap,
#billingNoteEditorModal .pdn-lines-table-wrap,
#salesCreditNoteEditorModal .pdn-lines-table-wrap,
    #purchaseDebitNoteEditorModal .pdn-lines-table,
#salesDebitNoteEditorModal .pdn-lines-table,
#billingNoteEditorModal .pdn-lines-table,
#salesCreditNoteEditorModal .pdn-lines-table {
        overflow: visible;
        width: 100%;
        max-width: 100%;
    }

    #purchaseDebitNoteEditorModal .pdn-summary-bar,
#salesDebitNoteEditorModal .pdn-summary-bar,
#billingNoteEditorModal .pdn-summary-bar,
#arReceiptEditorModal .pdn-summary-bar,
#salesCreditNoteEditorModal .pdn-summary-bar {
        flex-wrap: nowrap;
        flex-direction: column;
    }

    #purchaseDebitNoteEditorModal .pdn-summary-col,
#salesDebitNoteEditorModal .pdn-summary-col,
#billingNoteEditorModal .pdn-summary-col,
#salesCreditNoteEditorModal .pdn-summary-col,
    #purchaseDebitNoteEditorModal .pdn-summary-col-net,
#salesDebitNoteEditorModal .pdn-summary-col-net,
#billingNoteEditorModal .pdn-summary-col-net,
#arReceiptEditorModal .pdn-summary-col-net,
#salesCreditNoteEditorModal .pdn-summary-col-net {
        flex: 1 1 auto;
        width: 100%;
    }
}

@media (max-width: 768px) {
    #purchaseDebitNoteEditorModal .purchase-appraisal-editor-body,
#salesDebitNoteEditorModal .purchase-appraisal-editor-body,
#billingNoteEditorModal .purchase-appraisal-editor-body,
#salesCreditNoteEditorModal .purchase-appraisal-editor-body,
    #purchaseDebitNoteEditorModal .po-editor-form,
#salesDebitNoteEditorModal .po-editor-form,
#billingNoteEditorModal .po-editor-form,
#arReceiptEditorModal .po-editor-form,
#salesCreditNoteEditorModal .po-editor-form,
    #purchaseDebitNoteEditorModal .po-supplier-card,
#salesDebitNoteEditorModal .po-supplier-card,
#billingNoteEditorModal .po-supplier-card,
#arReceiptEditorModal .po-supplier-card,
#salesCreditNoteEditorModal .po-supplier-card,
    #purchaseDebitNoteEditorModal .po-lines-section,
#salesDebitNoteEditorModal .po-lines-section,
#billingNoteEditorModal .po-lines-section,
#arReceiptEditorModal .po-lines-section,
#salesCreditNoteEditorModal .po-lines-section {
        min-width: 0;
        max-width: 100%;
        overflow-x: clip;
    }

    #purchaseDebitNoteEditorModal .po-supplier-top.pdn-receive-top,
#salesDebitNoteEditorModal .po-supplier-top.pdn-receive-top,
#billingNoteEditorModal .po-supplier-top.pdn-receive-top,
#arReceiptEditorModal .po-supplier-top.pdn-receive-top,
#salesCreditNoteEditorModal .po-supplier-top.pdn-receive-top {
        grid-template-columns: 1fr !important;
    }

    #purchaseDebitNoteEditorModal .pdn-receive-select-field,
#salesDebitNoteEditorModal .pdn-receive-select-field,
#billingNoteEditorModal .pdn-receive-select-field,
#arReceiptEditorModal .pdn-receive-select-field,
#salesCreditNoteEditorModal .pdn-receive-select-field {
        grid-column: auto;
    }

    #purchaseDebitNoteEditorModal .pdn-lines-table-wrap,
#salesDebitNoteEditorModal .pdn-lines-table-wrap,
#billingNoteEditorModal .pdn-lines-table-wrap,
#salesCreditNoteEditorModal .pdn-lines-table-wrap {
        overflow: visible !important;
        width: 100%;
        max-width: 100%;
    }

    /* บังคับการ์ดรายการเต็มความกว้าง — เลิก global table min-width:790px + nowrap */
    #purchaseDebitNoteEditorModal .pdn-lines-table,
#salesDebitNoteEditorModal .pdn-lines-table tbody,
#billingNoteEditorModal .pdn-lines-table tbody,
#salesCreditNoteEditorModal .pdn-lines-table tbody,
    #purchaseDebitNoteEditorModal .pdn-lines-table tbody,
#salesDebitNoteEditorModal .pdn-lines-table tbody,
#billingNoteEditorModal .pdn-lines-table tbody,
#salesCreditNoteEditorModal .pdn-lines-table tbody {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        table-layout: auto !important;
    }

    #purchaseDebitNoteEditorModal .pdn-lines-table tr.po-line-row,
#salesDebitNoteEditorModal .pdn-lines-table tr.po-line-row,
#billingNoteEditorModal .pdn-lines-table tr.po-line-row,
#salesCreditNoteEditorModal .pdn-lines-table tr.po-line-row {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
    }

    #purchaseDebitNoteEditorModal .pdn-lines-table tr.po-line-row td.pdn-col-item,
#salesDebitNoteEditorModal .pdn-lines-table tr.po-line-row td.pdn-col-item,
#billingNoteEditorModal .pdn-lines-table tr.po-line-row td.pdn-col-item,
#salesCreditNoteEditorModal .pdn-lines-table tr.po-line-row td.pdn-col-item,
    #purchaseDebitNoteEditorModal .pdn-lines-table tr.po-line-row td.pdn-col-item,
#salesDebitNoteEditorModal .pdn-lines-table tr.po-line-row td.pdn-col-item,
#billingNoteEditorModal .pdn-lines-table tr.po-line-row td.pdn-col-item,
#salesCreditNoteEditorModal .pdn-lines-table tr.po-line-row td.pdn-col-item,
    #purchaseDebitNoteEditorModal .pdn-lines-table tr.po-line-row td.pdn-col-adj,
#salesDebitNoteEditorModal .pdn-lines-table tr.po-line-row td.pdn-col-adj,
#billingNoteEditorModal .pdn-lines-table tr.po-line-row td.pdn-col-adj,
#salesCreditNoteEditorModal .pdn-lines-table tr.po-line-row td.pdn-col-adj,
    #purchaseDebitNoteEditorModal .pdn-lines-table tr.po-line-row td.pdn-col-amt,
#salesDebitNoteEditorModal .pdn-lines-table tr.po-line-row td.pdn-col-amt,
#billingNoteEditorModal .pdn-lines-table tr.po-line-row td.pdn-col-amt,
#salesCreditNoteEditorModal .pdn-lines-table tr.po-line-row td.pdn-col-amt,
    #purchaseDebitNoteEditorModal .pdn-lines-table tr.po-line-row td.amount,
#salesDebitNoteEditorModal .pdn-lines-table tr.po-line-row td.amount,
#billingNoteEditorModal .pdn-lines-table tr.po-line-row td.amount,
#salesCreditNoteEditorModal .pdn-lines-table tr.po-line-row td.amount {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box;
        white-space: normal !important;
    }

    #purchaseDebitNoteEditorModal .pdn-lines-table .ui-control,
#salesDebitNoteEditorModal .pdn-lines-table .ui-control,
#billingNoteEditorModal .pdn-lines-table .ui-control,
#salesCreditNoteEditorModal .pdn-lines-table .ui-control,
    #purchaseDebitNoteEditorModal .pdn-lines-table .pdn-line-adj,
#salesDebitNoteEditorModal .pdn-lines-table .pdn-line-adj,
#billingNoteEditorModal .pdn-lines-table .pdn-line-adj,
#salesCreditNoteEditorModal .pdn-lines-table .pdn-line-adj,
    #purchaseDebitNoteEditorModal .pdn-lines-table .pdn-line-increase,
#salesDebitNoteEditorModal .pdn-lines-table .pdn-line-increase,
#billingNoteEditorModal .pdn-lines-table .pdn-line-increase,
#salesCreditNoteEditorModal .pdn-lines-table .pdn-line-increase,
    #purchaseDebitNoteEditorModal .pdn-lines-table tr.po-line-row td.amount .ui-control,
#salesDebitNoteEditorModal .pdn-lines-table tr.po-line-row td.amount .ui-control,
#billingNoteEditorModal .pdn-lines-table tr.po-line-row td.amount .ui-control,
#salesCreditNoteEditorModal .pdn-lines-table tr.po-line-row td.amount .ui-control {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
        white-space: normal !important;
    }
}

/* Sales Debit Note modal — คัดลอกจาก Purchase Debit Note (pdn → sdn) */
.sales-debit-note-page .sales-debit-note-filter {
    grid-template-columns: auto auto auto auto auto;
    justify-content: start;
    width: auto;
    max-width: 100%;
}

.billing-note-page .billing-note-filter {
    grid-template-columns: auto auto auto auto auto;
    justify-content: start;
    width: auto;
    max-width: 100%;
}

#arReceiptEditorModal .arr-party-top {
    grid-template-columns: minmax(200px, 360px);
    width: auto;
}
#arReceiptEditorModal .arr-party-top:has(#arrBillingNoteField:not([hidden])) {
    grid-template-columns: minmax(200px, 300px) minmax(200px, 300px);
}
.ar-receipt-page .ar-receipt-filter {
    grid-template-columns: auto auto auto auto auto;
    justify-content: start;
    width: auto;
    max-width: 100%;
}

#arReceiptEditorModal .arr-mode-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}

#arReceiptEditorModal .arr-mode-option {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
}

#arReceiptEditorModal .arr-top-split.reservation-split-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 16px;
    align-items: stretch;
    width: 100%;
}

#arReceiptEditorModal .arr-top-split > .reservation-split-panel {
    flex: 1 1 calc(50% - 8px);
    min-width: 0;
    display: flex;
    flex-direction: column;
}

#arReceiptEditorModal .arr-top-split > .reservation-split-panel > .pa-card-body {
    flex: 1 1 auto;
}

#arReceiptEditorModal .arr-settlement-panel .ap-payment-settlement-grid {
    height: 100%;
}

#arReceiptEditorModal .arr-settlement-panel .ap-payment-settlement-attachment {
    flex: 1 1 auto;
}

#arReceiptEditorModal .arr-settlement-panel .ap-payment-settlement-method {
    width: min(100%, 220px);
}

@media (max-width: 960px) {
    #arReceiptEditorModal .arr-top-split.reservation-split-row {
        flex-wrap: wrap;
    }

    #arReceiptEditorModal .arr-top-split > .reservation-split-panel {
        flex: 1 1 100%;
    }

    #arReceiptEditorModal .ap-payment-payee-info-box {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.sales-credit-note-page .sales-credit-note-filter {
    grid-template-columns: auto auto auto auto auto;
    justify-content: start;
    width: auto;
}

#salesDebitNoteEditorModal .po-editor-form,
#billingNoteEditorModal .po-editor-form,
#arReceiptEditorModal .po-editor-form,
#salesCreditNoteEditorModal .po-editor-form {
    min-width: 0;
    max-width: 100%;
}

#salesDebitNoteEditorModal .po-supplier-card,
#billingNoteEditorModal .po-supplier-card,
#arReceiptEditorModal .po-supplier-card,
#salesCreditNoteEditorModal .po-supplier-card {
    min-width: 0;
    max-width: 100%;
    overflow: visible;
}

/* Purchase Credit Note — คัดลอกจาก Purchase Debit Note block (pdn → pcn) */
.purchase-credit-note-page .purchase-credit-note-filter {
    grid-template-columns: auto auto auto auto auto;
    justify-content: start;
    width: auto;
    max-width: 100%;
}

.sales-invoice-page .sales-invoice-filter {
    grid-template-columns: auto auto auto auto auto;
    justify-content: start;
    width: auto;
    max-width: 100%;
}

/* Sales Invoice editor — ลูกค้า + เครดิต + รถที่เกี่ยวข้อง (3 คอลัมน์ แบบ PurchaseOrder)
   คอลัมน์แรกของ meta = ความกว้างเดียวกับ dropdown ลูกค้า (ชิดซ้าย/ขวาตรงกัน) */
#salesInvoiceEditorModal .po-supplier-top {
    grid-template-columns: minmax(200px, 300px) 120px minmax(200px, 280px);
}

#salesInvoiceEditorModal .po-supplier-meta {
    grid-template-columns: minmax(200px, 300px) minmax(160px, 1fr) minmax(180px, 1.2fr);
}

/* ไอคอนอยู่แถว label — input กว้างเต็มคอลัมน์ ตรงกับ dropdown ลูกค้า */
#salesInvoiceEditorModal .po-supplier-meta-item {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    grid-template-areas:
        "icon label"
        "field field";
    column-gap: 8px;
    row-gap: 4px;
    align-items: center;
}

#salesInvoiceEditorModal .po-supplier-meta-icon {
    grid-area: icon;
    margin-top: 0;
}

#salesInvoiceEditorModal .si-buyer-meta-field {
    display: contents;
}

#salesInvoiceEditorModal .si-buyer-meta-field .po-supplier-meta-label {
    grid-area: label;
    margin-right: 0;
}

#salesInvoiceEditorModal .si-buyer-meta-field .ui-control {
    grid-area: field;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

#salesInvoiceEditorModal .si-buyer-meta-field textarea.ui-control {
    min-height: 56px;
    resize: vertical;
}

@media (max-width: 900px) {
    #salesInvoiceEditorModal .po-supplier-top {
        grid-template-columns: 1fr;
    }

    #salesInvoiceEditorModal .po-supplier-meta {
        grid-template-columns: 1fr;
    }
}

/* Purchase Credit Note modal — ใบรับกว้าง | เลขที่ CN/ใบกำกับแคบ | สาเหตุเต็มแถว */
#purchaseCreditNoteEditorModal .po-editor-form,
#purchaseReturnEditorModal .po-editor-form , #salesReturnEditorModal .po-editor-form {
    min-width: 0;
    max-width: 100%;
}

#purchaseCreditNoteEditorModal .po-supplier-card,
#purchaseReturnEditorModal .po-supplier-card , #salesReturnEditorModal .po-supplier-card {
    min-width: 0;
    max-width: 100%;
    overflow: visible;
}

#purchaseCreditNoteEditorModal .po-supplier-top.pcn-receive-top,
#purchaseReturnEditorModal .po-supplier-top.pcn-receive-top , #salesReturnEditorModal .po-supplier-top.pcn-receive-top {
    grid-template-columns: minmax(0, 1.2fr) minmax(140px, 160px) minmax(140px, 160px) minmax(140px, 170px);
    width: 100%;
    min-width: 0;
    justify-content: stretch;
}

#purchaseCreditNoteEditorModal .pcn-receive-select-field .select2-container,
#purchaseReturnEditorModal .pcn-receive-select-field .select2-container, #salesReturnEditorModal .pcn-receive-select-field .select2-container,
#purchaseCreditNoteEditorModal .pcn-receive-select-field .select2-container,
#purchaseReturnEditorModal .pcn-receive-select-field .select2-container , #salesReturnEditorModal .pcn-receive-select-field .select2-container {
    width: 100% !important;
    max-width: none;
    min-width: 0;
}

#purchaseCreditNoteEditorModal .pcn-reason-row,
#purchaseReturnEditorModal .pcn-reason-row , #salesReturnEditorModal .pcn-reason-row {
    margin-top: 12px;
    width: 100%;
    min-width: 0;
}

#purchaseCreditNoteEditorModal .pcn-doc-no-field .ui-control,
#purchaseReturnEditorModal .pcn-doc-no-field .ui-control, #salesReturnEditorModal .pcn-doc-no-field .ui-control,
#purchaseCreditNoteEditorModal .pcn-doc-no-field .ui-control,
#purchaseReturnEditorModal .pcn-doc-no-field .ui-control, #salesReturnEditorModal .pcn-doc-no-field .ui-control,
#purchaseCreditNoteEditorModal .pcn-reason-field,
#purchaseReturnEditorModal .pcn-reason-field, #salesReturnEditorModal .pcn-reason-field,
#purchaseCreditNoteEditorModal .pcn-reason-field .ui-control,
#purchaseReturnEditorModal .pcn-reason-field .ui-control , #salesReturnEditorModal .pcn-reason-field .ui-control {
    width: 100%;
    min-width: 0;
    max-width: none;
    box-sizing: border-box;
}

/* อย่าใช้ overflow-x:hidden — จะทำให้ overflow-y กลายเป็น auto แล้วเกิด scrollbar ซ้อนใน Modal */
#purchaseCreditNoteEditorModal .pcn-lines-table-wrap,
#purchaseReturnEditorModal .pcn-lines-table-wrap , #salesReturnEditorModal .pcn-lines-table-wrap {
    overflow: visible;
    max-width: 100%;
    min-width: 0;
}

#purchaseCreditNoteEditorModal .pcn-lines-table,
#purchaseReturnEditorModal .pcn-lines-table , #salesReturnEditorModal .pcn-lines-table {
    table-layout: fixed;
    width: 100%;
    max-width: 100%;
}

#purchaseCreditNoteEditorModal .pcn-col-item {
    width: 22%;
}

#purchaseCreditNoteEditorModal .pcn-col-adj {
    width: 28%;
}

#purchaseCreditNoteEditorModal .pcn-col-amt {
    width: 12.5%;
}

/* ใบส่งคืนซื้อ — 7 คอลัมน์: คอลัมน์จำนวน/หน่วยแคบ, หัวยาวตัดบรรทัดได้ */
#purchaseReturnEditorModal .pcn-lines-table, #salesReturnEditorModal .pcn-lines-table,
#purchaseReturnEditorModal #prtLinesTable, #salesReturnEditorModal #srtLinesTable {
    min-width: 0 !important;
    width: 100%;
    max-width: 100%;
    table-layout: fixed;
}

#purchaseReturnEditorModal .po-lines-table-wrap.pcn-lines-table-wrap , #salesReturnEditorModal .po-lines-table-wrap.pcn-lines-table-wrap {
    overflow-x: clip;
    max-width: 100%;
    min-width: 0;
}

#purchaseReturnEditorModal .pcn-col-item , #salesReturnEditorModal .pcn-col-item {
    width: 26%;
    min-width: 0;
    white-space: normal;
}

#purchaseReturnEditorModal .pcn-col-adj , #salesReturnEditorModal .pcn-col-adj {
    width: 22%;
    min-width: 0;
}

#purchaseReturnEditorModal .pcn-col-amt , #salesReturnEditorModal .pcn-col-amt {
    width: 4.75rem;
    max-width: 4.75rem;
    min-width: 0;
    padding-left: 4px;
    padding-right: 4px;
    white-space: normal;
    line-height: 1.25;
    vertical-align: middle;
    word-break: break-word;
}

#purchaseReturnEditorModal .pcn-col-unit , #salesReturnEditorModal .pcn-col-unit {
    width: 3.25rem;
    max-width: 3.5rem;
    min-width: 0;
    padding-left: 4px;
    padding-right: 4px;
    white-space: normal;
    line-height: 1.25;
    word-break: break-word;
}

#purchaseReturnEditorModal .pcn-lines-table thead th.pcn-col-amt, #salesReturnEditorModal .pcn-lines-table thead th.pcn-col-amt,
#purchaseReturnEditorModal .pcn-lines-table thead th.pcn-col-unit , #salesReturnEditorModal .pcn-lines-table thead th.pcn-col-unit {
    white-space: normal;
    font-size: 12px;
}

#purchaseCreditNoteEditorModal .pcn-lines-table .ui-control,
#purchaseReturnEditorModal .pcn-lines-table .ui-control , #salesReturnEditorModal .pcn-lines-table .ui-control {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

#purchaseReturnEditorModal .pcn-lines-table .prt-line-qty , #salesReturnEditorModal .pcn-lines-table .prt-line-qty {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding-left: 4px;
    padding-right: 4px;
}

#purchaseCreditNoteEditorModal .pcn-summary-bar,
#purchaseReturnEditorModal .pcn-summary-bar , #salesReturnEditorModal .pcn-summary-bar {
    flex-wrap: wrap;
    max-width: 100%;
    min-width: 0;
}

#purchaseCreditNoteEditorModal .pcn-summary-col,
#purchaseReturnEditorModal .pcn-summary-col , #salesReturnEditorModal .pcn-summary-col {
    flex: 1 1 30%;
    min-width: 0;
}

#purchaseCreditNoteEditorModal .pcn-summary-col-net,
#purchaseReturnEditorModal .pcn-summary-col-net , #salesReturnEditorModal .pcn-summary-col-net {
    flex: 1 1 40%;
    min-width: 0;
}

@media (max-width: 1100px) {
    #purchaseCreditNoteEditorModal .po-supplier-top.pcn-receive-top,
    #purchaseReturnEditorModal .po-supplier-top.pcn-receive-top , #salesReturnEditorModal .po-supplier-top.pcn-receive-top {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    #purchaseCreditNoteEditorModal .pcn-receive-select-field,
    #purchaseReturnEditorModal .pcn-receive-select-field , #salesReturnEditorModal .pcn-receive-select-field {
        grid-column: 1 / -1;
    }
}

/* จอเล็ก: เรียงแนวตั้งเต็มความกว้าง — เลื่อนเฉพาะ editor-body ไม่ซ้อน scrollbar */
@media (max-width: 900px) {
    #purchaseCreditNoteEditorModal .po-supplier-top.pcn-receive-top,
    #purchaseReturnEditorModal .po-supplier-top.pcn-receive-top , #salesReturnEditorModal .po-supplier-top.pcn-receive-top {
        grid-template-columns: 1fr;
    }

    #purchaseCreditNoteEditorModal .pcn-receive-select-field,
    #purchaseReturnEditorModal .pcn-receive-select-field , #salesReturnEditorModal .pcn-receive-select-field {
        grid-column: auto;
    }

    #purchaseCreditNoteEditorModal .pcn-doc-no-field .ui-control,
    #purchaseReturnEditorModal .pcn-doc-no-field .ui-control, #salesReturnEditorModal .pcn-doc-no-field .ui-control,
    #purchaseCreditNoteEditorModal .pcn-doc-no-field .ui-control,
    #purchaseReturnEditorModal .pcn-doc-no-field .ui-control , #salesReturnEditorModal .pcn-doc-no-field .ui-control {
        max-width: none;
        width: 100%;
    }

    #purchaseCreditNoteEditorModal .pcn-lines-table-wrap,
    #purchaseReturnEditorModal .pcn-lines-table-wrap, #salesReturnEditorModal .pcn-lines-table-wrap,
    #purchaseCreditNoteEditorModal .pcn-lines-table,
    #purchaseReturnEditorModal .pcn-lines-table , #salesReturnEditorModal .pcn-lines-table {
        overflow: visible;
        width: 100%;
        max-width: 100%;
    }

    #purchaseCreditNoteEditorModal .pcn-summary-bar,
    #purchaseReturnEditorModal .pcn-summary-bar , #salesReturnEditorModal .pcn-summary-bar {
        flex-wrap: nowrap;
        flex-direction: column;
    }

    #purchaseCreditNoteEditorModal .pcn-summary-col,
    #purchaseReturnEditorModal .pcn-summary-col, #salesReturnEditorModal .pcn-summary-col,
    #purchaseCreditNoteEditorModal .pcn-summary-col-net,
    #purchaseReturnEditorModal .pcn-summary-col-net , #salesReturnEditorModal .pcn-summary-col-net {
        flex: 1 1 auto;
        width: 100%;
    }
}

@media (max-width: 768px) {
    #purchaseCreditNoteEditorModal .purchase-appraisal-editor-body,
    #purchaseReturnEditorModal .purchase-appraisal-editor-body, #salesReturnEditorModal .purchase-appraisal-editor-body,
    #purchaseCreditNoteEditorModal .po-editor-form,
    #purchaseReturnEditorModal .po-editor-form, #salesReturnEditorModal .po-editor-form,
    #purchaseCreditNoteEditorModal .po-supplier-card,
    #purchaseReturnEditorModal .po-supplier-card, #salesReturnEditorModal .po-supplier-card,
    #purchaseCreditNoteEditorModal .po-lines-section,
    #purchaseReturnEditorModal .po-lines-section , #salesReturnEditorModal .po-lines-section {
        min-width: 0;
        max-width: 100%;
        overflow-x: clip;
    }

    #purchaseCreditNoteEditorModal .po-supplier-top.pcn-receive-top,
    #purchaseReturnEditorModal .po-supplier-top.pcn-receive-top , #salesReturnEditorModal .po-supplier-top.pcn-receive-top {
        grid-template-columns: 1fr !important;
    }

    #purchaseCreditNoteEditorModal .pcn-receive-select-field,
    #purchaseReturnEditorModal .pcn-receive-select-field , #salesReturnEditorModal .pcn-receive-select-field {
        grid-column: auto;
    }

    #purchaseCreditNoteEditorModal .pcn-lines-table-wrap,
    #purchaseReturnEditorModal .pcn-lines-table-wrap , #salesReturnEditorModal .pcn-lines-table-wrap {
        overflow: visible !important;
        width: 100%;
        max-width: 100%;
    }

    /* บังคับการ์ดรายการเต็มความกว้าง — เลิก global table min-width:790px + nowrap */
    #purchaseCreditNoteEditorModal .pcn-lines-table,
    #purchaseReturnEditorModal .pcn-lines-table tbody, #salesReturnEditorModal .pcn-lines-table tbody,
    #purchaseCreditNoteEditorModal .pcn-lines-table tbody,
    #purchaseReturnEditorModal .pcn-lines-table tbody , #salesReturnEditorModal .pcn-lines-table tbody {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        table-layout: auto !important;
    }

    #purchaseCreditNoteEditorModal .pcn-lines-table tr.po-line-row,
    #purchaseReturnEditorModal .pcn-lines-table tr.po-line-row , #salesReturnEditorModal .pcn-lines-table tr.po-line-row {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
    }

    #purchaseCreditNoteEditorModal .pcn-lines-table tr.po-line-row td.pcn-col-item,
    #purchaseReturnEditorModal .pcn-lines-table tr.po-line-row td.pcn-col-item, #salesReturnEditorModal .pcn-lines-table tr.po-line-row td.pcn-col-item,
    #purchaseCreditNoteEditorModal .pcn-lines-table tr.po-line-row td.pcn-col-item,
    #purchaseReturnEditorModal .pcn-lines-table tr.po-line-row td.pcn-col-item, #salesReturnEditorModal .pcn-lines-table tr.po-line-row td.pcn-col-item,
    #purchaseCreditNoteEditorModal .pcn-lines-table tr.po-line-row td.pcn-col-adj,
    #purchaseReturnEditorModal .pcn-lines-table tr.po-line-row td.pcn-col-adj, #salesReturnEditorModal .pcn-lines-table tr.po-line-row td.pcn-col-adj,
    #purchaseCreditNoteEditorModal .pcn-lines-table tr.po-line-row td.pcn-col-amt,
    #purchaseReturnEditorModal .pcn-lines-table tr.po-line-row td.pcn-col-amt, #salesReturnEditorModal .pcn-lines-table tr.po-line-row td.pcn-col-amt,
    #purchaseCreditNoteEditorModal .pcn-lines-table tr.po-line-row td.amount,
    #purchaseReturnEditorModal .pcn-lines-table tr.po-line-row td.amount , #salesReturnEditorModal .pcn-lines-table tr.po-line-row td.amount {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box;
        white-space: normal !important;
    }

    #purchaseCreditNoteEditorModal .pcn-lines-table .ui-control,
    #purchaseReturnEditorModal .pcn-lines-table .ui-control, #salesReturnEditorModal .pcn-lines-table .ui-control,
    #purchaseCreditNoteEditorModal .pcn-lines-table .pcn-line-adj,
    #purchaseReturnEditorModal .pcn-lines-table .pcn-line-adj, #salesReturnEditorModal .pcn-lines-table .pcn-line-adj,
    #purchaseCreditNoteEditorModal .pcn-lines-table .pcn-line-decrease,
    #purchaseReturnEditorModal .pcn-lines-table .pcn-line-decrease, #salesReturnEditorModal .pcn-lines-table .pcn-line-decrease,
    #purchaseCreditNoteEditorModal .pcn-lines-table tr.po-line-row td.amount .ui-control,
    #purchaseReturnEditorModal .pcn-lines-table tr.po-line-row td.amount .ui-control , #salesReturnEditorModal .pcn-lines-table tr.po-line-row td.amount .ui-control {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
        white-space: normal !important;
    }
}

/* Fixed Asset — list filter, editor layout, gallery */
.master-crud-page.fixed-asset-page .fixed-asset-filter {
    grid-template-columns: minmax(220px, 320px) minmax(140px, 180px) auto;
    justify-content: start;
    width: auto;
    max-width: 100%;
}

.master-crud-page.fixed-asset-page .fixed-asset-filter > .field {
    min-width: 0;
}

.master-crud-page.fixed-asset-page .fixed-asset-filter .role-permission-search-field {
    max-width: 320px;
}

.master-crud-page.fixed-asset-page .fixed-asset-filter .role-permission-status-field {
    max-width: 180px;
}

.fixed-asset-page .fixed-asset-photo-col {
    width: 56px;
}

.fixed-asset-list-no-photo {
    color: #98a2b3;
}

.fixed-asset-list-thumb {
    display: inline-flex;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    overflow: hidden;
    background: #eef2f8;
}

.fixed-asset-list-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#fixedAssetEditorModal .fixed-asset-editor-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 360px);
    gap: 16px;
    align-items: start;
}

#fixedAssetEditorModal .fixed-asset-editor-fields {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

#fixedAssetEditorModal .fixed-asset-editor-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    position: sticky;
    top: 0;
}

#fixedAssetEditorModal .fixed-asset-image-panel,
#fixedAssetEditorModal .fixed-asset-accounts-panel {
    margin: 0;
}

#fixedAssetEditorModal .fixed-asset-depreciable-check {
    margin-top: 28px;
}

#fixedAssetEditorModal .pa-grid-1 {
    grid-template-columns: minmax(0, 1fr);
}

#fixedAssetEditorModal .fixed-asset-gallery {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#fixedAssetEditorModal .fixed-asset-gallery-main {
    position: relative;
    min-height: 220px;
    border-radius: 14px;
    overflow: hidden;
    background: #eef2f8;
}

#fixedAssetEditorModal .fixed-asset-gallery-main-image {
    display: block;
    width: 100%;
    height: 220px;
    object-fit: contain;
    background: #f8fafc;
}

#fixedAssetEditorModal .fixed-asset-gallery-main-image[hidden] {
    display: none !important;
}

#fixedAssetEditorModal .fixed-asset-gallery-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 220px;
    color: #667085;
    text-align: center;
    padding: 16px;
}

#fixedAssetEditorModal .fixed-asset-gallery-placeholder[hidden] {
    display: none !important;
}

#fixedAssetEditorModal .fixed-asset-gallery-placeholder svg {
    width: 36px;
    height: 36px;
    opacity: 0.55;
}

#fixedAssetEditorModal .fixed-asset-gallery-placeholder small {
    font-size: 12px;
}

#fixedAssetEditorModal .fixed-asset-gallery-nav {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px;
    pointer-events: none;
    z-index: 2;
}

#fixedAssetEditorModal .fixed-asset-gallery-nav .icon-btn {
    pointer-events: auto;
    background: rgba(255, 255, 255, 0.92);
}

#fixedAssetEditorModal .fixed-asset-gallery-delete-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    background: rgba(255, 255, 255, 0.92);
}

#fixedAssetEditorModal .fixed-asset-gallery-count {
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 3;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(23, 36, 58, 0.72);
    color: #fff;
    font-size: 12px;
}

#fixedAssetEditorModal .fixed-asset-gallery-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#fixedAssetEditorModal .fixed-asset-gallery-thumb {
    width: 72px;
    height: 54px;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    background: #eef2f8;
}

#fixedAssetEditorModal .fixed-asset-gallery-thumb.is-active {
    border-color: var(--blue-700);
}

#fixedAssetEditorModal .fixed-asset-gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fixed-asset-gallery-modal {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: grid;
    place-items: center;
}

.fixed-asset-gallery-modal[hidden] {
    display: none;
}

.fixed-asset-gallery-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(23, 36, 58, 0.45);
}

.fixed-asset-gallery-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(960px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    overflow: auto;
    background: #fff;
    border-radius: 16px;
    padding: 16px;
}

.fixed-asset-gallery-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.fixed-asset-gallery-modal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}

.fixed-asset-gallery-modal-item {
    border: 0;
    padding: 0;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    background: #eef2f8;
    aspect-ratio: 4 / 3;
}

.fixed-asset-gallery-modal-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 1100px) {
    .master-crud-page.fixed-asset-page .fixed-asset-filter {
        grid-template-columns: minmax(200px, 1fr) minmax(140px, 180px) auto;
        width: 100%;
    }

    #fixedAssetEditorModal .fixed-asset-editor-layout {
        grid-template-columns: 1fr;
    }

    #fixedAssetEditorModal .fixed-asset-editor-sidebar {
        order: -1;
        position: static;
    }
}

@media (max-width: 768px) {
    .master-crud-page.fixed-asset-page .fixed-asset-filter {
        grid-template-columns: 1fr;
        width: 100%;
    }

    .master-crud-page.fixed-asset-page .fixed-asset-filter .role-permission-search-field,
    .master-crud-page.fixed-asset-page .fixed-asset-filter .role-permission-status-field,
    .master-crud-page.fixed-asset-page .fixed-asset-filter .filter-actions.compact {
        max-width: none;
        grid-column: auto;
        justify-self: stretch;
    }
}

/* Depreciation — ค่าเสื่อม */
.depreciation-page .depreciation-filter {
    grid-template-columns: auto auto auto auto auto;
    justify-content: start;
    width: auto;
    max-width: 100%;
}

#depreciationEditorModal .depreciation-editor-form {
    min-width: 0;
    max-width: 100%;
}

#depreciationEditorModal .dep-period-card {
    margin-bottom: 16px;
}

#depreciationEditorModal .dep-period-row {
    display: grid;
    grid-template-columns: minmax(120px, 160px) 100px auto minmax(140px, 160px) minmax(140px, 160px);
    gap: 12px 16px;
    align-items: end;
}

#depreciationEditorModal .dep-month-field .ui-control,
#depreciationEditorModal .dep-year-field .ui-control {
    width: 100%;
}

#depreciationEditorModal .dep-calc-action-label {
    visibility: hidden;
}

#depreciationEditorModal .dep-lines-table-wrap {
    overflow-x: auto;
}

#depreciationEditorModal .dep-lines-table {
    min-width: 860px;
}

#depreciationEditorModal .dep-col-seq {
    width: 48px;
}

#depreciationEditorModal .dep-col-code {
    min-width: 90px;
}

#depreciationEditorModal .dep-col-name {
    min-width: 160px;
}

#depreciationEditorModal .dep-col-amt {
    min-width: 96px;
}

#depreciationEditorModal .dep-summary-bar {
    margin-top: 16px;
}

#depreciationEditorModal .dep-summary-col {
    flex: 1 1 40%;
}

#depreciationEditorModal .dep-summary-col-net {
    flex: 1 1 60%;
}

@media (max-width: 900px) {
    #depreciationEditorModal .dep-period-row {
        grid-template-columns: 1fr 1fr;
    }

    #depreciationEditorModal .dep-calc-action {
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {
    #depreciationEditorModal .dep-lines-table-wrap {
        overflow: visible;
    }

    #depreciationEditorModal .dep-lines-table tbody,
    #depreciationEditorModal .dep-lines-table tbody {
        display: block;
        width: 100%;
        min-width: 0;
    }

    #depreciationEditorModal .dep-lines-table thead {
        display: none;
    }

    #depreciationEditorModal .dep-lines-table tr.dep-line-row,
    #depreciationEditorModal .dep-lines-table tr.po-line-empty-row {
        display: block;
        margin-bottom: 12px;
        padding: 12px;
        border: 1px solid var(--line, #dbe3ef);
        border-radius: 8px;
        background: var(--card, #fff);
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    }

    #depreciationEditorModal .dep-lines-table tr.dep-line-row td,
    #depreciationEditorModal .dep-lines-table tr.po-line-empty-row td {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box;
        white-space: normal !important;
        border: 0;
        padding: 4px 0;
    }

    #depreciationEditorModal .dep-lines-table tr.dep-line-row td::before {
        content: attr(data-label);
        display: block;
        font-size: 0.78rem;
        color: var(--muted, #64748b);
        margin-bottom: 2px;
    }

    #depreciationEditorModal .dep-summary-bar {
        flex-direction: column;
        gap: 8px;
    }

    #depreciationEditorModal .dep-summary-col,
    #depreciationEditorModal .dep-summary-col-net {
        flex: 1 1 auto;
        width: 100%;
    }
}


/* Purchase Return list filter — mirror PurchaseCreditNote */
.purchase-return-filter.purchase-appraisal-filter, .sales-return-filter.purchase-appraisal-filter {
  /* inherits purchase-appraisal-filter grid */
}

/* ===== Media Workflow ===== */
.media-workflow-filter.purchase-appraisal-filter {
    display: grid;
    grid-template-columns: auto auto auto auto;
    gap: 10px 12px;
    align-items: end;
    justify-content: start;
    width: auto;
}

.media-workflow-page .media-workflow-filter .reservation-search-field .ui-control,
.media-workflow-page .media-workflow-filter .purchase-appraisal-search-field .ui-control {
    width: 300px;
    max-width: 100%;
}

.media-workflow-page .media-workflow-filter .purchase-appraisal-status-field {
    width: 180px;
    max-width: 100%;
}

.media-equipment-filter {
    display: grid;
    grid-template-columns: auto auto auto;
    gap: 10px 12px;
    align-items: end;
    justify-content: start;
    width: auto;
}

.media-dashboard-cards-wrap {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 16px;
}

.media-dashboard-page {
    --db-navy: #0f2f66;
    --db-gold: #f2ba1a;
    --db-blue: #1f5bb8;
    --db-amber: #e39b2b;
    --db-amber-soft: #fff1df;
    --db-green: #2f9e68;
    --db-green-soft: #e6f7ef;
    --db-red: #d45757;
    --db-red-soft: #ffe8e8;
    --db-muted: #8a97ab;
    --db-line: #e6ebf3;
    --db-card: #ffffff;
    --db-soft: #f5f7fb;
    color: var(--db-navy);
}

.media-dashboard-page .media-dashboard-section {
    background: var(--db-card);
    border: 1px solid rgba(15, 47, 102, .05);
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(15, 47, 102, .06);
    padding: 16px 16px 14px;
}

.media-dashboard-page .media-dashboard-section-label {
    font-size: 16px;
    font-weight: 700;
    color: #0f2f66;
    margin: 0 0 12px;
    line-height: 1.25;
}

.media-dashboard-page .media-dashboard-workflow {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 10px 8px;
}

.media-dashboard-page .media-dashboard-status {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.media-dashboard-page .media-dashboard-flow-item {
    display: flex;
    align-items: stretch;
    gap: 6px;
    flex: 1 1 140px;
    min-width: 0;
}

.media-dashboard-page .media-dashboard-flow-arrow {
    display: flex;
    align-items: center;
    color: #8a97ab;
    opacity: 0.7;
    flex: 0 0 auto;
}

.media-dashboard-page .media-dashboard-flow-arrow svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.media-dashboard-page .media-dashboard-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    text-align: left;
    border: 1px solid #e8eef6;
    border-radius: 14px;
    background: #f7f9fc;
    box-shadow: none;
    padding: 14px 14px 12px;
    width: 100%;
    min-width: 0;
    min-height: 128px;
    cursor: default;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}

.media-dashboard-page .media-dashboard-card.is-clickable {
    cursor: pointer;
}

.media-dashboard-page .media-dashboard-card.is-clickable:hover {
    border-color: rgba(31, 91, 184, 0.28);
    box-shadow: 0 8px 18px rgba(15, 47, 102, .08);
    background: #f3f7fd;
    transform: translateY(-1px);
}

.media-dashboard-page .media-dashboard-card-icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 10px;
    background: #2f6fdb;
    color: #fff;
}

.media-dashboard-page .media-dashboard-card-icon svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.media-dashboard-page .media-dashboard-card-count {
    font-size: 28px;
    font-weight: 700;
    color: #0f2f66;
    line-height: 1;
    letter-spacing: -.4px;
    margin: 0 0 8px;
}

.media-dashboard-page .media-dashboard-card-label {
    margin-top: auto;
    color: #7a879c;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.35;
}

.media-dashboard-page .media-dashboard-card.tone-workflow {
    background: #f3f7fd;
}

.media-dashboard-page .media-dashboard-card.tone-workflow .media-dashboard-card-icon {
    background: #2f6fdb;
}

.media-dashboard-page .media-dashboard-card.tone-attention {
    background: #fff8ef;
    border-color: #f3e2c4;
}

.media-dashboard-page .media-dashboard-card.tone-attention .media-dashboard-card-icon {
    background: #f0a33a;
}

.media-dashboard-page .media-dashboard-card.tone-attention .media-dashboard-card-count {
    color: #0f2f66;
}

.media-dashboard-page .media-dashboard-card.tone-completed {
    background: #f3fbf6;
    border-color: #d7eee2;
}

.media-dashboard-page .media-dashboard-card.tone-completed .media-dashboard-card-icon {
    background: #2f9e68;
}

.media-dashboard-page .media-dashboard-card.tone-completed .media-dashboard-card-count {
    color: #0f2f66;
}

.media-dashboard-page .media-dashboard-card.tone-overdue {
    background: #fff4f4;
    border-color: #f3c7c7;
    box-shadow: none;
}

.media-dashboard-page .media-dashboard-card.tone-overdue .media-dashboard-card-icon {
    background: #d45757;
}

.media-dashboard-page .media-dashboard-card.tone-overdue .media-dashboard-card-count {
    color: #b42318;
}

.media-dashboard-page .media-dashboard-card.tone-overdue.is-clickable:hover {
    border-color: rgba(212, 87, 87, 0.45);
    box-shadow: 0 8px 18px rgba(180, 35, 24, .08);
    background: #ffeaea;
}

.media-dashboard-page .media-dashboard-alert-card {
    margin-top: 0;
}

.media-dashboard-page .media-dashboard-alert-head {
    margin-bottom: 12px;
}

.media-dashboard-page .media-dashboard-alert-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.media-dashboard-page .media-dashboard-alert-sub {
    margin: 4px 0 0;
}

.media-dashboard-page .media-dashboard-alert-icon {
    display: inline-flex;
    width: 22px;
    height: 22px;
    color: #f0a33a;
}

.media-dashboard-page .media-dashboard-alert-icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

/* legacy selector kept for safety */
.media-dashboard-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 4px;
}

.media-dashboard-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: left;
    border: 1px solid rgba(47, 115, 208, 0.18);
    border-radius: 10px;
    background: #fff;
    padding: 14px 16px;
    cursor: pointer;
}

.media-dashboard-card:hover {
    border-color: rgba(47, 115, 208, 0.45);
    box-shadow: 0 0 0 3px rgba(47, 115, 208, 0.08);
}

.media-dashboard-card-count {
    font-size: 1.6rem;
    font-weight: 700;
    color: #1f4f9c;
    line-height: 1.1;
}

.media-dashboard-card-label {
    color: #475569;
    font-size: 0.92rem;
}

@media (max-width: 1100px) {
    .media-dashboard-page .media-dashboard-status {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .media-dashboard-page .media-dashboard-flow-arrow {
        display: none;
    }
}

@media (max-width: 768px) {
    .media-dashboard-page .media-dashboard-workflow,
    .media-dashboard-page .media-dashboard-status {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .media-dashboard-page .media-dashboard-flow-item {
        flex: none;
    }
}

@media (max-width: 480px) {
    .media-dashboard-page .media-dashboard-workflow,
    .media-dashboard-page .media-dashboard-status {
        grid-template-columns: 1fr;
    }
}

.media-progress-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.media-progress-dots {
    display: flex;
    gap: 3px;
    justify-content: center;
}

.media-progress-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #cbd5e1;
}

.media-progress-dot.is-done {
    background: #2f73d0;
}

.media-progress-text {
    font-size: 0.82rem;
    color: #475569;
    white-space: nowrap;
}

.media-workflow-vehicle-grid {
    display: grid;
    grid-template-columns: minmax(120px, 0.7fr) minmax(240px, 1.6fr) minmax(160px, 1fr);
    gap: 12px 14px;
}

.media-workflow-vehicle-grid .media-workflow-vehicle-plate {
    grid-column: auto;
}

.media-file-card .pa-card-head {
    align-items: center;
}

.media-job-list-card .pa-card-head {
    align-items: center;
}

.media-job-empty {
    color: #64748b;
    padding: 12px 2px 4px;
}

.media-job-table .media-job-name-col {
    min-width: 160px;
    width: 18%;
}

.media-job-last-actor {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.86rem;
    color: #475569;
}

.media-job-files-section {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.media-job-files-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.media-job-files-title {
    margin: 0;
    font-size: 1rem;
    color: var(--blue-900);
}

.media-job-files-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.media-job-upload-btn {
    margin: 0;
    cursor: pointer;
}

.media-job-upload-btn[hidden] {
    display: none !important;
}

.media-job-files-empty {
    color: #64748b;
    font-size: 0.9rem;
    padding: 4px 0 8px;
}

.media-workflow-job-dialog {
    max-width: 760px;
}

#mediaWorkflowJobModal {
    z-index: 10020;
}

#mediaWorkflowLinkModal {
    z-index: 10025;
}

body.media-workflow-job-modal-open .select2-container--open,
body.media-workflow-link-modal-open .select2-container--open {
    z-index: 10040 !important;
}

body.media-workflow-job-modal-open .select2-dropdown,
body.media-workflow-link-modal-open .select2-dropdown {
    z-index: 10041 !important;
}

.media-file-table .media-file-name-col {
    min-width: 180px;
    width: 32%;
}

.media-file-name {
    font-weight: 700;
    color: var(--blue-900);
    line-height: 1.35;
}

.media-file-source {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.media-file-source-type {
    color: #475569;
    font-size: 0.9rem;
}

.media-file-open-link {
    border: 0;
    background: transparent;
    color: var(--blue-700);
    padding: 0;
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
}

.media-file-open-link:hover {
    color: var(--blue-900);
}

.media-file-table td,
.media-file-table th {
    vertical-align: middle;
}

@media (max-width: 900px) {
    .media-workflow-vehicle-grid {
        grid-template-columns: 1fr 1fr;
    }

    .media-workflow-vehicle-grid .media-workflow-vehicle-main {
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {
    .media-workflow-vehicle-grid {
        grid-template-columns: 1fr;
    }

    .media-workflow-vehicle-grid .media-workflow-vehicle-main,
    .media-workflow-vehicle-grid .media-workflow-vehicle-plate {
        grid-column: auto;
    }

    .media-file-table-wrap {
        overflow-x: hidden;
    }

    .media-file-table thead {
        display: none;
    }

    .media-file-table,
    .media-file-table tbody,
    .media-file-table tr,
    .media-file-table td {
        display: block;
        width: 100%;
    }

    .media-file-table tr {
        border: 1px solid rgba(15, 23, 42, 0.08);
        border-radius: 10px;
        padding: 10px 12px;
        margin-bottom: 10px;
        background: #fff;
    }

    .media-file-table td {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        padding: 6px 0;
        border: 0;
    }

    .media-file-table td::before {
        content: attr(data-label);
        color: #64748b;
        font-size: 0.82rem;
        flex: 0 0 42%;
    }

    .media-file-table td.media-file-name-col {
        display: block;
    }

    .media-file-table td.media-file-name-col::before {
        display: block;
        margin-bottom: 4px;
    }

    .media-file-table td.action-col .row-actions {
        justify-content: flex-end;
    }

    .media-job-table-wrap {
        overflow-x: hidden;
    }

    .media-job-table thead {
        display: none;
    }

    .media-job-table,
    .media-job-table tbody,
    .media-job-table tr,
    .media-job-table td {
        display: block;
        width: 100%;
    }

    .media-job-table tr {
        border: 1px solid rgba(15, 23, 42, 0.08);
        border-radius: 10px;
        padding: 10px 12px;
        margin-bottom: 10px;
        background: #fff;
    }

    .media-job-table td {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        padding: 6px 0;
        border: 0;
    }

    .media-job-table td::before {
        content: attr(data-label);
        color: #64748b;
        font-size: 0.82rem;
        flex: 0 0 42%;
    }

    .media-job-table td.media-job-name-col {
        display: block;
    }

    .media-job-table td.media-job-name-col::before {
        display: block;
        margin-bottom: 4px;
    }

    .media-job-table td.action-col .row-actions {
        justify-content: flex-end;
    }
}

.media-workflow-step-groups {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 12px 0;
}

.media-workflow-tabs {
    margin: 12px 0 4px;
}

.media-workflow-tablist {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.media-workflow-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(47, 115, 208, 0.22);
    background: #fff;
    color: var(--blue-900);
    border-radius: 999px;
    padding: 7px 12px;
    font-size: 0.88rem;
    cursor: pointer;
}

.media-workflow-tab.is-active {
    background: var(--blue-100);
    border-color: rgba(47, 115, 208, 0.5);
    font-weight: 600;
}

.media-workflow-tab-badge {
    display: inline-flex;
    width: 16px;
    height: 16px;
}

.media-workflow-tab-badge svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.media-workflow-tab-badge.is-done {
    color: var(--green);
}

.media-workflow-tab-badge.is-pending {
    color: var(--amber);
}

.media-workflow-tab-panels {
    min-height: 120px;
}

.media-workflow-upload-section {
    margin-bottom: 14px;
}

.media-workflow-upload-section-title {
    margin: 0 0 8px;
    font-size: 0.95rem;
    color: var(--blue-900);
}

.media-workflow-empty {
    color: #64748b;
    padding: 8px 0;
}

body.media-workflow-editor-modal-open:has(#mediaWorkflowEditorModal:not([hidden])) .select2-dropdown,
body.media-workflow-link-modal-open:has(#mediaWorkflowLinkModal:not([hidden])) .select2-dropdown {
    z-index: 10030 !important;
}

.media-workflow-step-card {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 10px;
    background: #fafbfc;
}

.media-workflow-upload-substeps .media-workflow-step-card.is-nested {
    margin-left: 12px;
    border-left: 3px solid rgba(47, 115, 208, 0.35);
}

.media-workflow-step-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.media-workflow-step-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    color: #64748b;
    font-size: 0.86rem;
    margin-top: 8px;
}

.media-workflow-step-actions {
    margin-top: 10px;
}

.media-stock-step-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.media-stock-step-item {
    color: #64748b;
}

.media-stock-step-item.is-done {
    color: #166534;
    font-weight: 600;
}

#mediaWorkflowEditorModal .ap-payment-header-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 6px;
}

#mediaWorkflowEditorModal .ap-payment-header-meta > .field {
    margin: 0;
}

#mediaWorkflowEditorModal .ap-payment-header-doc-no .ui-control,
#mediaWorkflowEditorModal .ap-payment-header-date .ui-control {
    min-width: 140px;
}

#mediaWorkflowEditorModal .ap-payment-header-status .ap-payment-status-wrap {
    display: flex;
    align-items: center;
    min-height: 38px;
}

#mediaWorkflowTable th.text-center,
#mediaWorkflowTable td.text-center {
    text-align: center;
}

@media (max-width: 1100px) {
    .media-workflow-filter.purchase-appraisal-filter,
    .media-equipment-filter {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .media-workflow-page .media-workflow-filter .reservation-search-field .ui-control,
    .media-workflow-page .media-workflow-filter .purchase-appraisal-search-field .ui-control,
    .media-workflow-page .media-workflow-filter .purchase-appraisal-status-field {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .media-workflow-filter.purchase-appraisal-filter,
    .media-equipment-filter {
        grid-template-columns: 1fr;
    }
}