:root {
        --ink: #222;
        --muted: #666;
        --line: #d9d9d9;
        --soft: #f3f3f3;
        --chip: #e7eef6;
        --pill-h: 22px;
        --pill-px: 8px;
        --pill-r: 999px;
        --pill-fs: 12px;
        --pill-bw: 1px;
        --pill-gap: 6px;
        --pill-soft-bg: var(--chip, #eef5ff);
        --pill-soft-bd: #cfe0f5;
        --pill-soft-fg: #2a3b55;
        --pill-solid-bg: #3d9970;
        --pill-solid-bd: #3d9970;
        --pill-solid-fg: #fff;
        --nine-offset-y: 6px;
        /* seberapa turun dari bawah konten Del */
        --nine-clearance: 84px;
        --col-del: 48px;
        --col-qty: 60px;
        --col-order: 60px;
        --nine-align-top: 36px;
        /* tambah nilainya biar makin turun (coba 22–28px) */
        --nine-clearance-top: 64px;
    }

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

    #previewimage,
    .preview-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
        gap: 8px;
    }

    .preview-item {
        position: relative;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 6px;
        background: #fff;
    }

    .preview-item img {
        display: block;
        width: 100%;
        height: 96px;
        object-fit: contain;
        /* biar proporsional */
    }

    .preview-name {
        font-size: 11px;
        margin-top: 4px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: center;
    }

    .preview-remove {
        position: absolute;
        top: 4px;
        right: 4px;
        font-size: 11px;
        line-height: 1;
        padding: 2px 6px;
        border: none;
        border-radius: 6px;
        cursor: pointer;
    }


    .order-table .td-del {
        position: relative;
        z-index: 5;
    }

    .order-table .nine-panel.in-row {
        position: absolute;
        left: 0;
        top: 0;
        /* biar JS align ke label C: kalau dipakai */
        width: calc(var(--col-del) + var(--col-qty) + var(--col-order));
        /* border: 1px solid var(--line); */
        background: transparent;
        border-radius: 3px;
        padding: 6px 0;
        /* 0 kiri/kanan agar pas kolom */
        z-index: 3;
    }

    .order-table tbody td {
        border: none;
    }

    .order-table tbody td:nth-child(1) {
        border-right: none !important;
        /* sisi kanan Del */
    }

    .order-table tbody td:nth-child(2) {
        border-left: none !important;
        /* sisi kiri Qty  */
        border-right: none !important;
        /* sisi kanan Qty */
    }

    .order-table tbody td:nth-child(3) {
        border-left: none !important;
        /* sisi kiri Qty  */
        border-right: none !important;
        /* sisi kanan Qty */
    }

    /* ====== Global bits ====== */
    .muted {
        color: var(--muted)
    }

    .thumb {
        width: 150px !important;
        /* height: 48px; */
        object-fit: cover !important;
        /* border: 1px solid var(--line) */
    }

    .actions-col .btn-xs {
        width: 100%
    }

    /* ====== Select2: font Genos & ukuran seragam ====== */
    .order-wrap select,
    .order-wrap select option,
    .order-wrap .select2-container--default .select2-selection--single,
    .order-wrap .select2-container--default .select2-selection--multiple,
    .order-wrap .select2-container--default .select2-selection--single .select2-selection__rendered,
    .order-wrap .select2-container--default .select2-selection--multiple .select2-selection__rendered,
    .order-wrap .select2-container--default .select2-results__option,
    .order-wrap .select2-container--default .select2-search__field,
    .order-wrap .select2-container--default .select2-selection__placeholder {
        font-family: 'Genos', sans-serif !important;
        letter-spacing: .2px;
        font-weight: 500;
        font-size: 15px
    }

    .order-wrap .select2-container--default .select2-selection--single {
        height: 28px;
        border: 1px solid #cfcfcf;
        border-radius: 2px;
        background: #fff
    }

    .order-wrap .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 26px;
        padding-left: 6px;
        color: var(--ink)
    }

    .order-wrap .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 26px;
        right: 6px
    }

    #personName.select2-hidden-accessible+.select2 {
        width: 100% !important
    }

    /* ====== Header/status & panes ====== */
    .status-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #f5f5f5;
        border: 1px solid var(--line);
        padding: 8px 10px
    }

    .status-pill {
        font-family: 'Genos', sans-serif;
        letter-spacing: .5px;
        font-weight: 700;
        color: #fff;
        background: #64748b;
        border: 0;
        border-radius: 2px;
        padding: 6px 10px;
        font-size: 18px
    }

    .mini-actions a {
        display: inline-block;
        margin-left: 6px;
        background: #eaeaea;
        border: 1px solid #d5d5d5;
        border-radius: 14px;
        padding: 2px 10px;
        font-size: 12px;
        color: #333;
        text-decoration: none
    }

    .created-note {
        border-left: 3px solid #ffc658;
        background: #fffaf0;
        padding: 8px 10px;
        margin: 8px 0 14px;
        font-size: 13px;
        color: #4b4b4b;
        display: flex;
        align-items: center;
        gap: 6px;
        white-space: nowrap
    }

    .created-note a {
        font-weight: 600;
        text-decoration: underline
    }

    .created-note .form-control {
        width: 240px;
        display: inline-block
    }

    .pane-title {
        background: #ededed;
        border: 1px solid var(--line);
        border-bottom: none;
        font-family: 'Genos', sans-serif;
        font-weight: 700;
        letter-spacing: .6px;
        padding: 6px 10px;
        text-transform: uppercase;
        color: #111
    }

    .pane {
        border: 1px solid var(--line);
        padding: 10px 10px 4px;
        background: #fff;
        height: 100%
    }

    .field {
        margin-bottom: 6px
    }

    .field label {
        display: block;
        font-size: 12px;
        color: #444;
        margin: 0 0 3px;
        font-weight: 600
    }

    .field input,
    .field select,
    .field textarea {
        height: 28px;
        border-radius: 2px;
        border: 1px solid #cfcfcf;
        font-size: 13px;
        color: var(--ink)
    }

    .field textarea {
        height: 60px;
        resize: vertical
    }

    .btn-xs {
        height: 26px;
        line-height: 24px;
        padding: 0 8px;
        border-radius: 2px;
        border: 1px solid #cfcfcf;
        background: #f7f7f7;
        font-size: 12px;
        color: #222
    }

    .btn-primary-xs {
        background: #4c7fe0;
        color: #fff;
        border-color: #3d6fcd
    }

    .btn-warning-xs {
        background: #edbe2f;
        color: #111;
        border-color: #d5a91f
    }

    .block-title {
        margin-top: 12px;
        background: #ededed;
        border: 1px solid var(--line);
        padding: 6px 10px;
        font-family: 'Genos', sans-serif;
        font-weight: 700;
        text-transform: uppercase
    }

    @media (max-width:991.98px) {
        .totals {
            float: none;
            width: 100%
        }
    }

    /* ====== Table ====== */
    .order-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0
    }

    .order-table th,
    .order-table td {
        border: 1px solid var(--line);
        padding: 6px 8px;
        font-size: 13px;
        vertical-align: middle
    }

    .order-table th {
        background: #f0f0f0;
        font-family: 'Genos', sans-serif;
        font-weight: 700
    }

    .order-table tr {
        position: relative;
    }

    /* izinkan overlay subrow */
    .order-table tbody,
    .order-table tr,
    .order-table td {
        overflow: visible
    }

    /* ====== Product cell as card ====== */
    .product-td .product-pane {
        /* border: 1px solid var(--line); */
        background: #fff;
        border-radius: 3px;
        box-shadow: 0 0 0 1px rgba(0, 0, 0, .02) inset;
        padding: 8px 10px
    }

    .product-td .product-grid--no-status {
        display: grid;
        grid-template-columns: 1fr 120px;
        gap: 10px;
        align-items: start
    }

    .product-td .product-info .field {
        margin-bottom: 6px
    }

    .product-td .product-info label {
        margin-bottom: 2px
    }

    .product-td .product-thumb {
        display: flex;
        justify-content: center;
        align-items: flex-start
    }

    .product-td .product-thumb .thumb {
        width: 110px;
        height: 62px;
        object-fit: contain;
        border: 1px solid var(--line)
    }

    .product-td .product-actions {
        margin-top: 8px;
        display: flex;
        flex-wrap: wrap;
        gap: 6px
    }

    @media (max-width:768px) {
        .product-td .product-grid--no-status {
            grid-template-columns: 1fr
        }

        .product-td .product-thumb {
            grid-column: 1 / -1;
            justify-content: flex-start
        }
    }

    /* ====== Subrow: nine panel (overlay tepat di bawah Del/Qty/Order) ====== */
    .order-table td:nth-child(1),
    .order-table td:nth-child(2),
    .order-table td:nth-child(3) {
        padding-top: var(--nine-clearance-top);
    }

    /* beri ruang kecil */

    .nine-panel {
        /* display: inline-block; */
        /* border: 1px solid var(--line); */
        background: transparent;
        border-radius: 3px;
        padding: 6px;
        z-index: 2
    }

    .nine-panel:not(.in-row) {
        position: relative;
        /* top: -38px; */
    }

    .nine-grid {
        background-color: transparent;
        padding-left: 5px;
        margin-right: 15px;
        display: grid;
        grid-template-columns: repeat(3, 42px);
        grid-auto-rows: 22px;
        gap: 11px
    }

    .nine-badge {
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: 'Genos', sans-serif;
        font-size: 15px;
        width: 50px;
        height: 30px;
        line-height: 1;
        border: 1px solid #cfe0f5;
        border-radius: 3px;
        background: var(--pill-soft-bg, #e7eef6);
        color: black !important;
        font-weight: 600;
        user-select: none
    }

    .nine-badge--solid {
        background: var(--pill-solid-bg, #3d9970);
        border-color: var(--pill-solid-bd, #3d9970);
        color: var(--pill-solid-fg, #fff)
    }

    .nine-badge:hover {
        filter: brightness(.97);
        cursor: pointer
    }

    /* ====== Totals ====== */
    .totals {
        border: 1px solid var(--line);
        padding: 10px;
        background: #fff;
        width: 260px;
        float: right;
        margin-top: 10px
    }

    .totals .rowline {
        display: flex;
        justify-content: space-between;
        padding: 4px 0;
        font-size: 13px
    }

    .totals .rowline.total {
        font-weight: 700;
        border-top: 1px dashed #cfcfcf;
        margin-top: 6px;
        padding-top: 8px
    }