/* Detail produk: struktur yang sama stabilnya di desktop dan mobile. */
.product-detail-mobile {
    background: var(--bg-body, #f7f8fa);
    color: var(--text-main, #1f2937);
}

.product-detail-info-card {
    padding: 18px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
    background: var(--bg-card, #fff);
}

.product-detail-section-title {
    margin-bottom: 14px;
    padding-bottom: 9px;
    border-bottom: 2px solid var(--primary-orange, #f15a22);
    color: var(--text-main, #1f2937);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.product-detail-meta > div {
    display: grid;
    grid-template-columns: minmax(105px, .8fr) minmax(0, 1.2fr);
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.product-detail-meta > div:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.product-detail-meta dt {
    color: var(--text-muted, #6b7280);
    font-size: .76rem;
    font-weight: 700;
}

.product-detail-meta dd {
    min-width: 0;
    margin: 0;
    color: var(--text-main, #1f2937);
    overflow-wrap: anywhere;
}

.product-detail-description-text {
    min-height: 104px;
    color: var(--text-main, #1f2937);
    line-height: 1.65;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.product-detail-toolbar h6 {
    color: var(--text-main, #1f2937);
}

.product-variation-list {
    border-color: var(--border-color, #e5e7eb) !important;
    background: var(--bg-card, #fff);
}

.product-variation-table > tbody > tr > td {
    color: var(--text-main, #1f2937);
}

.product-action-label {
    display: none;
}

.product-detail-footer {
    border-top: 1px solid var(--border-color, #e5e7eb);
    background: var(--bg-card, #fff);
}

[data-theme="dark"] .product-detail-mobile,
[data-theme="dark"] .product-detail-info-card,
[data-theme="dark"] .product-variation-list,
[data-theme="dark"] .product-detail-footer {
    background: var(--bg-card) !important;
}

/* Tampilan ringkas master data di layar kecil. Desktop tidak diubah. */
@media (max-width: 767.98px) {
    .partner-detail-modal > .modal-dialog {
        width: 100%;
        max-width: none;
        min-height: 100%;
        margin: 0;
    }

    .partner-detail-modal > .modal-dialog > .modal-content {
        min-height: 100vh;
        min-height: 100dvh;
        border: 0;
        border-radius: 0;
    }

    .partner-detail-modal .modal-body {
        padding: 14px;
    }

    .partner-detail-modal .detail-body,
    .partner-detail-modal .detail-body > tr {
        display: block;
        width: 100%;
    }

    .partner-detail-modal .detail-body > tr {
        display: grid;
        grid-template-columns: minmax(105px, .75fr) minmax(0, 1.25fr);
        gap: 10px;
        padding: 10px 0;
        border-bottom: 1px solid var(--border-color);
    }

    .partner-detail-modal .detail-body > tr > td {
        display: block;
        width: auto !important;
        padding: 0 !important;
        border: 0 !important;
        color: var(--text-main);
        overflow-wrap: anywhere;
    }

    .partner-detail-modal .detail-body > tr > td:nth-child(2) {
        display: none;
    }

    .partner-detail-items {
        overflow: visible;
        border: 0;
    }

    .partner-detail-items table,
    .partner-detail-items tbody {
        display: block;
        width: 100%;
    }

    .partner-detail-items thead {
        display: none;
    }

    .partner-detail-items tbody tr {
        display: block;
        margin-bottom: 10px;
        overflow: hidden;
        border: 1px solid var(--border-color);
        border-left: 4px solid var(--primary-orange);
        border-radius: 10px;
        background: var(--bg-card);
    }

    .partner-detail-items tbody td {
        display: grid;
        grid-template-columns: minmax(105px, .75fr) minmax(0, 1.25fr);
        gap: 10px;
        width: 100% !important;
        padding: 10px 12px !important;
        border-width: 0 0 1px !important;
        border-color: var(--border-color) !important;
        background: transparent !important;
        color: var(--text-main) !important;
        text-align: left !important;
    }

    .partner-detail-items tbody td::before {
        content: attr(data-mobile-label);
        color: var(--text-muted);
        font-size: .67rem;
        font-weight: 800;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    .partner-detail-items tbody td.partner-detail-index {
        display: none;
    }

    .partner-detail-items tbody td:last-child {
        border-bottom: 0 !important;
    }

    .partner-detail-modal .modal-footer .btn {
        width: 100%;
        min-height: 44px;
    }

    .master-mobile-page {
        padding-bottom: 1.5rem !important;
    }

    .master-mobile-page > .row {
        --bs-gutter-x: 0;
    }

    .master-mobile-page .mb-9 {
        margin-bottom: 1.5rem !important;
    }

    .master-mobile-page .my-5 {
        margin-top: .75rem !important;
        margin-bottom: .75rem !important;
    }

    .master-mobile-page h2 {
        font-size: 1.35rem;
    }

    .master-mobile-page .lead {
        font-size: .92rem;
    }

    .master-mobile-page > .card,
    .master-mobile-page .card.master-mobile-card {
        margin-top: .75rem !important;
        border-radius: 14px !important;
    }

    .master-mobile-page .card-header,
    .master-mobile-page .card-body {
        padding: 14px !important;
    }

    .master-mobile-page > .card > .card-header.d-flex {
        flex-direction: column;
        align-items: stretch !important;
        gap: 14px;
    }

    .master-mobile-page > .card > .card-header.d-flex > div,
    .master-mobile-page > .card > .card-header.d-flex .btn-group,
    .master-mobile-page > .card > .card-header.d-flex .btn {
        width: 100%;
    }

    .master-mobile-page > .card > .card-header.d-flex .btn-group > .btn:first-child {
        flex: 1 1 auto;
    }

    .master-mobile-page .master-filter-toolbar {
        padding: 14px !important;
    }

    .master-mobile-page .master-filter-row,
    .master-mobile-page .master-filter-toolbar > .row {
        gap: 12px;
    }

    .master-mobile-page .master-filter-field,
    .master-mobile-page .master-filter-actions,
    .master-mobile-page .master-filter-actions > .btn,
    .master-mobile-page .master-filter-actions > .btn-group {
        width: 100% !important;
        min-width: 0 !important;
    }

    .master-mobile-page .master-filter-actions .btn-group > .btn:first-child {
        flex: 1 1 auto;
    }

    .master-mobile-page .master-filter-toolbar .form-control,
    .master-mobile-page .master-filter-toolbar .form-select,
    .master-mobile-page .master-filter-toolbar .select2-selection {
        min-height: 44px !important;
        font-size: 16px !important;
    }

    .master-mobile-page input,
    .master-mobile-page select,
    .master-mobile-page textarea {
        font-size: 16px !important;
    }

    .master-mobile-page .card-header .row > .col,
    .master-mobile-page .card-header .row > .col-auto,
    .master-mobile-page .card-header .row > [class*="col-md-auto"] {
        width: 100%;
        flex: 0 0 100%;
    }

    .master-mobile-page .card-header .btn-add {
        width: 100%;
        min-height: 44px;
    }

    .master-mobile-page .select2-container {
        width: 100% !important;
    }

    .master-mobile-page .master-mobile-table-wrap {
        overflow: visible;
        border: 0;
    }

    :is(.master-mobile-page .master-mobile-table-wrap, .master-config-page) .dt-scroll,
    :is(.master-mobile-page .master-mobile-table-wrap, .master-config-page) .dt-scroll-body,
    :is(.master-mobile-page .master-mobile-table-wrap, .master-config-page) .dt-layout-table,
    :is(.master-mobile-page .master-mobile-table-wrap, .master-config-page) .dt-layout-table > .dt-layout-cell {
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
    }

    :is(.master-mobile-page .master-mobile-table-wrap, .master-config-page) .dt-scroll-body {
        max-height: none !important;
    }

    :is(.master-mobile-page .master-mobile-table-wrap, .master-config-page) .dt-scroll-head,
    :is(.master-mobile-page .master-mobile-table-wrap, .master-config-page) .dt-scroll-foot {
        display: none !important;
    }

    :is(.master-mobile-page .master-mobile-table-wrap, .master-config-page) table.master-mobile-card-table,
    :is(.master-mobile-page .master-mobile-table-wrap, .master-config-page) table.master-mobile-card-table > tbody {
        display: block;
        width: 100% !important;
        min-width: 0 !important;
    }

    :is(.master-mobile-page .master-mobile-table-wrap, .master-config-page) table.master-mobile-card-table > thead {
        display: none;
    }

    :is(.master-mobile-page .master-mobile-table-wrap, .master-config-page) table.master-mobile-card-table > tbody > tr {
        display: flex;
        flex-direction: column;
        width: 100%;
        margin-bottom: 14px;
        overflow: visible;
        border: 1px solid var(--border-color);
        border-left: 4px solid var(--primary-orange);
        border-radius: 14px;
        background: var(--bg-card);
        box-shadow: 0 8px 22px rgba(15, 23, 42, .07);
    }

    :is(.master-mobile-page .master-mobile-table-wrap, .master-config-page) table.master-mobile-card-table > tbody > tr > td {
        display: grid;
        grid-template-columns: minmax(112px, .8fr) minmax(0, 1.2fr);
        gap: 12px;
        align-items: start;
        width: 100% !important;
        min-width: 0 !important;
        padding: 11px 13px !important;
        border-width: 0 0 1px !important;
        border-color: var(--border-color) !important;
        background: var(--bg-card) !important;
        color: var(--text-main) !important;
        text-align: left !important;
        overflow-wrap: anywhere;
    }

    :is(.master-mobile-page .master-mobile-table-wrap, .master-config-page) table.master-mobile-card-table > tbody > tr > td:last-child {
        border-bottom: 0 !important;
    }

    :is(.master-mobile-page .master-mobile-table-wrap, .master-config-page) table.master-mobile-card-table > tbody > tr > td::before {
        content: attr(data-mobile-label);
        color: var(--text-muted);
        font-size: .67rem;
        font-weight: 800;
        letter-spacing: .045em;
        line-height: 1.35;
        text-transform: uppercase;
    }

    :is(.master-mobile-page .master-mobile-table-wrap, .master-config-page) table.master-mobile-card-table > tbody > tr > td > * {
        min-width: 0;
        max-width: 100%;
    }

    :is(.master-mobile-page .master-mobile-table-wrap, .master-config-page) table.master-mobile-card-table img {
        max-width: 100%;
        height: auto;
    }

    :is(.master-mobile-page .master-mobile-table-wrap, .master-config-page) table.master-mobile-card-table > tbody > tr > td.mobile-card-index-cell {
        display: none;
    }

    :is(.master-mobile-page .master-mobile-table-wrap, .master-config-page) table.master-mobile-card-table > tbody > tr > td.mobile-card-primary-cell {
        order: -1;
        border-radius: 10px 10px 0 0;
        background: #fff7f2 !important;
        font-weight: 750;
    }

    [data-theme="dark"] :is(.master-mobile-page .master-mobile-table-wrap, .master-config-page) table.master-mobile-card-table > tbody > tr > td.mobile-card-primary-cell {
        background: #293342 !important;
    }

    :is(.master-mobile-page .master-mobile-table-wrap, .master-config-page) .mobile-card-empty-cell {
        display: block !important;
        padding: 28px 15px !important;
        border: 0 !important;
        text-align: center !important;
    }

    :is(.master-mobile-page .master-mobile-table-wrap, .master-config-page) .mobile-card-empty-cell::before {
        content: none;
    }

    :is(.master-mobile-page .master-mobile-table-wrap, .master-config-page) table.master-mobile-card-table td:last-child .btn,
    :is(.master-mobile-page .master-mobile-table-wrap, .master-config-page) table.master-mobile-card-table td:last-child form,
    :is(.master-mobile-page .master-mobile-table-wrap, .master-config-page) table.master-mobile-card-table td:last-child form .btn {
        min-height: 40px;
    }

    :is(.master-mobile-page .master-mobile-table-wrap, .master-config-page) table.master-mobile-card-table td:last-child .dropdown,
    :is(.master-mobile-page .master-mobile-table-wrap, .master-config-page) table.master-mobile-card-table td:last-child .btn-group {
        width: 100%;
    }

    :is(.master-mobile-page .master-mobile-table-wrap, .master-config-page) table.master-mobile-card-table td:last-child .dropdown-toggle,
    :is(.master-mobile-page .master-mobile-table-wrap, .master-config-page) table.master-mobile-card-table td:last-child > .btn {
        width: 100%;
        min-height: 42px;
    }

    :is(.master-mobile-page .master-mobile-table-wrap, .master-config-page) table.master-mobile-card-table td:last-child > .d-flex {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(44px, 1fr));
        gap: 8px !important;
        width: 100%;
    }

    :is(.master-mobile-page .master-mobile-table-wrap, .master-config-page) table.master-mobile-card-table td:last-child > .d-flex > .btn {
        width: 100%;
        min-height: 42px;
        margin: 0 !important;
    }

    :is(.master-mobile-page, .master-config-page) .dt-layout-row {
        display: flex;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        flex-direction: column;
        gap: 10px;
        align-items: stretch !important;
    }

    :is(.master-mobile-page, .master-config-page) .dt-layout-cell,
    :is(.master-mobile-page, .master-config-page) .dt-search,
    :is(.master-mobile-page, .master-config-page) .dt-length {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    :is(.master-mobile-page, .master-config-page) :is(.dt-container, .dataTables_wrapper) {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    :is(.master-mobile-page, .master-config-page) .dt-search {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 8px;
        align-items: center;
    }

    :is(.master-mobile-page, .master-config-page) .dt-search label {
        width: auto;
        margin: 0;
        white-space: nowrap;
    }

    :is(.master-mobile-page, .master-config-page) .dt-length {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    :is(.master-mobile-page, .master-config-page) .dt-length label {
        width: auto;
        margin: 0;
    }

    :is(.master-mobile-page, .master-config-page) .dt-search input {
        width: 100% !important;
        min-width: 0;
        max-width: 100%;
        margin: 0 !important;
        box-sizing: border-box;
        font-size: 16px !important;
    }

    :is(.master-mobile-page, .master-config-page) .dt-search input,
    :is(.master-mobile-page, .master-config-page) .dt-length select {
        min-height: 42px;
    }

    :is(.master-mobile-page, .master-config-page) .dt-info {
        padding-top: 4px !important;
        text-align: center;
    }

    :is(.master-mobile-page, .master-config-page) .dt-paging {
        max-width: 100%;
        overflow-x: auto;
        padding-bottom: 4px;
        text-align: center;
        white-space: nowrap;
    }

    :is(.master-mobile-page, .master-config-page) :is(.dt-container, .dataTables_wrapper) > .row {
        margin-right: 0 !important;
        margin-left: 0 !important;
        padding: 10px 0 !important;
        row-gap: 10px;
    }

    :is(.master-mobile-page, .master-config-page) :is(.dt-container, .dataTables_wrapper) > .row > [class*="col-"] {
        width: 100%;
        flex: 0 0 100%;
        padding-right: 0 !important;
        padding-left: 0 !important;
        justify-content: flex-start !important;
    }

    :is(.master-mobile-page, .master-config-page) :is(.dataTables_filter, .dataTables_length) {
        width: 100%;
    }

    :is(.master-mobile-page, .master-config-page) :is(.dataTables_filter, .dataTables_length) label {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        margin: 0;
    }

    :is(.master-mobile-page, .master-config-page) .dataTables_filter input {
        width: 100% !important;
        min-width: 0;
        max-width: 100%;
        min-height: 42px;
        flex: 1 1 auto;
        margin-left: 0 !important;
        box-sizing: border-box;
        font-size: 16px !important;
    }

    .inventory-mobile-page .inventory-heading {
        flex-direction: column;
        align-items: stretch !important;
        gap: 14px;
    }

    .inventory-mobile-page .inventory-actions,
    .inventory-mobile-page .inventory-actions > .btn,
    .inventory-mobile-page .inventory-actions > .btn-group {
        width: 100%;
    }

    .inventory-mobile-page .inventory-actions > .btn,
    .inventory-mobile-page .inventory-actions > .btn-group > .btn {
        min-height: 44px;
    }

    :is(.master-mobile-page, .master-config-page) :is(.dataTables_info, .dataTables_paginate) {
        width: 100%;
        padding-top: 0 !important;
        text-align: center !important;
    }

    .modal-submission > .modal-dialog,
    .product-form-theme > .modal-dialog,
    .master-form-modal > .modal-dialog {
        width: 100%;
        max-width: none;
        min-height: 100%;
        margin: 0;
    }

    .modal-submission > .modal-dialog > .modal-content,
    .product-form-theme > .modal-dialog > .modal-content,
    .master-form-modal > .modal-dialog > .modal-content {
        min-height: 100vh;
        min-height: 100dvh;
        border: 0 !important;
        border-radius: 0 !important;
    }

    .modal-submission > .modal-dialog > .modal-content > form,
    .product-form-theme > .modal-dialog > .modal-content > form,
    .master-form-modal > .modal-dialog > .modal-content > form {
        display: flex;
        min-height: calc(100vh - 58px);
        min-height: calc(100dvh - 58px);
        flex-direction: column;
    }

    .modal-submission > .modal-dialog > .modal-content > .modal-body,
    .product-form-theme > .modal-dialog > .modal-content > .modal-body,
    .master-form-modal > .modal-dialog > .modal-content > .modal-body,
    .modal-submission > .modal-dialog > .modal-content > form > .modal-body,
    .product-form-theme > .modal-dialog > .modal-content > form > .modal-body,
    .master-form-modal > .modal-dialog > .modal-content > form > .modal-body {
        flex: 1 1 auto;
        padding: 16px !important;
    }

    .modal-submission > .modal-dialog > .modal-content > form > .modal-footer,
    .product-form-theme > .modal-dialog > .modal-content > form > .modal-footer,
    .master-form-modal > .modal-dialog > .modal-content > form > .modal-footer,
    .modal-submission > .modal-dialog > .modal-content > .modal-footer,
    .product-form-theme > .modal-dialog > .modal-content > .modal-footer,
    .master-form-modal > .modal-dialog > .modal-content > .modal-footer {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 12px !important;
    }

    .modal-submission > .modal-dialog > .modal-content > form > .modal-footer .btn,
    .product-form-theme > .modal-dialog > .modal-content > form > .modal-footer .btn,
    .master-form-modal > .modal-dialog > .modal-content > form > .modal-footer .btn,
    .modal-submission > .modal-dialog > .modal-content > .modal-footer .btn,
    .product-form-theme > .modal-dialog > .modal-content > .modal-footer .btn,
    .master-form-modal > .modal-dialog > .modal-content > .modal-footer .btn {
        width: 100%;
        min-height: 44px;
        margin: 0;
    }

    .modal-submission input,
    .modal-submission select,
    .modal-submission textarea,
    .product-form-theme input,
    .product-form-theme select,
    .product-form-theme textarea,
    .master-form-modal input,
    .master-form-modal select,
    .master-form-modal textarea,
    .master-config-page input,
    .master-config-page select,
    .master-config-page textarea,
    .role-permission-page input {
        font-size: 16px !important;
    }

    .product-form-theme .table-responsive {
        border: 1px solid var(--border-color);
        border-radius: 10px;
    }

    .product-form-theme .table-responsive > table {
        min-width: 680px;
    }

    .master-config-page,
    .role-permission-page {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    .master-config-page > .d-flex,
    .role-permission-page > .d-flex {
        align-items: flex-start !important;
        gap: 12px;
    }

    .master-config-page .card-body,
    .role-permission-page .card-body {
        padding: 14px !important;
    }

    .master-config-page .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .master-config-page .nav-tabs .nav-link {
        min-height: 44px;
        white-space: nowrap;
    }

    .master-config-page .row > [class*="col-md-"] {
        padding-right: 12px !important;
        padding-left: 12px !important;
        border-right: 0 !important;
    }
}

/* Riwayat stok dimuat lewat modal yang sama dengan form edit stok. */
@media (max-width: 767.98px) {
    .inventory-remote-modal .modal-dialog {
        width: 100%;
        max-width: none;
        min-height: 100%;
        margin: 0;
    }

    .inventory-remote-modal .modal-content {
        min-height: 100vh;
        min-height: 100dvh;
        border: 0 !important;
        border-radius: 0 !important;
        overflow-x: hidden;
    }

    .inventory-remote-modal .modal-header,
    .inventory-remote-modal .modal-footer {
        flex: 0 0 auto;
    }

    .inventory-remote-modal .modal-body {
        min-width: 0;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .stock-history-header .modal-title {
        min-width: 0;
        font-size: 1rem;
        line-height: 1.4;
        overflow-wrap: anywhere;
    }

    .stock-history-summary {
        overflow-wrap: anywhere;
    }

    .stock-history-table-wrap {
        max-height: none !important;
        overflow: visible !important;
        padding: 12px;
    }

    .stock-history-table,
    .stock-history-table > tbody {
        display: block;
        width: 100% !important;
    }

    .stock-history-table > thead {
        display: none;
    }

    .stock-history-table > tbody > tr {
        display: block;
        width: 100%;
        margin-bottom: 12px;
        padding: 12px;
        border: 1px solid var(--border-color);
        border-left: 4px solid var(--primary-orange);
        border-radius: 12px;
        background: var(--bg-card);
    }

    .stock-history-table > tbody > tr > td {
        display: grid;
        grid-template-columns: minmax(90px, .75fr) minmax(0, 1.25fr);
        gap: 10px;
        width: 100% !important;
        padding: 8px 0 !important;
        border-width: 0 0 1px !important;
        border-color: var(--border-color) !important;
        background: transparent !important;
        text-align: left !important;
        overflow-wrap: anywhere;
    }

    .stock-history-table > tbody > tr > td:last-child {
        border-bottom: 0 !important;
    }

    .stock-history-table > tbody > tr > td::before {
        content: attr(data-mobile-label);
        color: var(--text-muted);
        font-size: .68rem;
        font-weight: 800;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    .stock-history-table > tbody > tr > td.stock-history-empty {
        display: block;
        padding: 18px 8px !important;
        text-align: center !important;
    }

    .stock-history-table > tbody > tr > td.stock-history-empty::before {
        content: none;
    }

    .stock-history-footer .btn {
        width: 100%;
        min-height: 44px;
    }
}

@media (max-width: 575.98px) {
    :is(.master-mobile-page .master-mobile-table-wrap, .master-config-page) table.master-mobile-card-table > tbody > tr > td {
        grid-template-columns: minmax(0, 1fr);
        gap: 5px;
    }

    :is(.master-mobile-page .master-mobile-table-wrap, .master-config-page) table.master-mobile-card-table > tbody > tr > td::before {
        padding-bottom: 2px;
    }

    :is(.master-mobile-page .master-mobile-table-wrap, .master-config-page) table.master-mobile-card-table > tbody > tr > td.mobile-card-primary-cell {
        padding-top: 13px !important;
        padding-bottom: 13px !important;
    }
}

@media (max-width: 767.98px) {
    :is(.master-mobile-page .master-mobile-table-wrap, .master-config-page) table.master-mobile-card-table .badge {
        max-width: 100%;
        white-space: normal;
        line-height: 1.35;
        text-align: left;
        overflow-wrap: anywhere;
    }

    :is(.master-mobile-page .master-mobile-table-wrap, .master-config-page) table.master-mobile-card-table td .d-flex {
        flex-wrap: wrap;
    }

    .material-combination-drawer {
        width: 100%;
        margin-left: 0 !important;
        padding: 12px !important;
        border-radius: 12px !important;
        box-shadow: none !important;
    }

    #materialDataTable.master-mobile-card-table > tbody > tr.shown {
        margin-bottom: 0;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
        box-shadow: none;
    }

    #materialDataTable.master-mobile-card-table > tbody > tr.mobile-card-detail-row,
    #materialDataTable.master-mobile-card-table > tbody > tr.material-combination-child-row {
        display: block;
        margin: 0 0 16px;
        padding: 0 7px 7px;
        border: 1px solid var(--border-color);
        border-top: 0;
        border-left: 4px solid var(--primary-orange);
        border-radius: 0 0 14px 14px;
        background: var(--bg-card);
        box-shadow: 0 8px 22px rgba(15, 23, 42, .07);
    }

    #materialDataTable.master-mobile-card-table > tbody > tr.mobile-card-detail-row > td.mobile-card-detail-cell,
    #materialDataTable.master-mobile-card-table > tbody > tr.material-combination-child-row > td {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

    #materialDataTable.master-mobile-card-table > tbody > tr.mobile-card-detail-row > td.mobile-card-detail-cell::before,
    #materialDataTable.master-mobile-card-table > tbody > tr.material-combination-child-row > td::before {
        content: none !important;
    }

    .material-combination-drawer > .d-flex {
        flex-wrap: wrap;
        gap: 8px;
    }

    .material-combination-drawer > .d-flex .ms-auto {
        width: 100%;
        margin-left: 0 !important;
    }

    .material-combination-table-wrap {
        overflow: visible !important;
    }

    .material-combination-table,
    .material-combination-table > tbody {
        display: block;
        width: 100% !important;
        min-width: 0 !important;
    }

    .material-combination-table > thead {
        display: none;
    }

    .material-combination-table > tbody > tr {
        display: flex !important;
        flex-direction: column;
        width: 100%;
        margin-bottom: 12px;
        overflow: hidden;
        border: 1px solid var(--border-color) !important;
        border-left: 3px solid var(--primary-orange) !important;
        border-radius: 11px;
        background: var(--bg-card);
        box-shadow: none;
    }

    .material-combination-table > tbody > tr:last-child {
        margin-bottom: 0;
    }

    .material-combination-table > tbody > tr > td,
    .material-combination-table > tbody > tr > td.mobile-card-primary-cell {
        display: grid !important;
        grid-template-columns: minmax(92px, .75fr) minmax(0, 1.25fr) !important;
        gap: 9px !important;
        align-items: center !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 9px 10px !important;
        border-width: 0 0 1px !important;
        border-color: var(--border-color) !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: var(--text-main) !important;
        text-align: left !important;
    }

    .material-combination-table > tbody > tr > td:last-child {
        border-bottom: 0 !important;
    }

    .material-combination-table > tbody > tr > td::before {
        content: attr(data-mobile-label) !important;
        color: var(--text-muted);
        font-size: .65rem;
        font-weight: 800;
        letter-spacing: .04em;
        line-height: 1.3;
        text-transform: uppercase;
    }

    .material-combination-table > tbody > tr > td > * {
        min-width: 0;
        max-width: 100%;
    }

    .material-combination-table > tbody > tr > td .badge {
        display: inline-flex;
        justify-self: start;
        max-width: 100%;
    }

    .material-combination-table > tbody > tr > td.mobile-card-primary-cell {
        background: #fff7f2 !important;
        font-weight: 750;
    }

    .material-combination-table .combination-actions {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
        gap: 8px !important;
        width: 100%;
    }

    .material-combination-table .combination-actions .btn {
        width: 100%;
        min-height: 40px;
        margin: 0 !important;
    }

    [data-theme="dark"] .material-combination-drawer,
    [data-theme="dark"] .material-combination-table > tbody > tr {
        background: var(--bg-card) !important;
        border-color: var(--border-color) !important;
    }

    [data-theme="dark"] .material-combination-drawer h6,
    [data-theme="dark"] .material-combination-table .text-dark {
        color: var(--text-main) !important;
    }

    [data-theme="dark"] .material-combination-table > tbody > tr > td.mobile-card-primary-cell {
        background: #293342 !important;
    }

    .material-combination-empty {
        margin-left: 0 !important;
        color: var(--text-muted) !important;
    }

    .combination-form-table-wrap {
        max-height: none !important;
        overflow: visible !important;
    }

    .combination-form-table,
    .combination-form-table > tbody {
        display: block;
        width: 100% !important;
    }

    .combination-form-table > thead {
        display: none;
    }

    .combination-form-table > tbody > tr {
        display: block;
        margin-bottom: 14px;
        padding: 12px;
        border: 1px solid var(--border-color);
        border-left: 4px solid var(--primary-orange);
        border-radius: 12px;
        background: var(--bg-card);
    }

    .combination-form-table > tbody > tr > td {
        display: grid;
        grid-template-columns: minmax(108px, .8fr) minmax(0, 1.2fr);
        gap: 10px;
        align-items: center;
        width: 100% !important;
        padding: 9px 0 !important;
        border-width: 0 0 1px !important;
        border-color: var(--border-color) !important;
        background: transparent !important;
        text-align: left !important;
    }

    .combination-form-table > tbody > tr > td:last-child {
        border-bottom: 0 !important;
    }

    .combination-form-table > tbody > tr > td::before {
        content: attr(data-mobile-label);
        color: var(--text-muted);
        font-size: .68rem;
        font-weight: 800;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    .combination-form-table > tbody > tr > td .form-control,
    .combination-form-table > tbody > tr > td .form-select,
    .combination-form-table > tbody > tr > td .input-group {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 575.98px) {
    .combination-form-table > tbody > tr > td {
        grid-template-columns: minmax(0, 1fr);
        gap: 5px;
    }
}

@media (max-width: 767.98px) {
    .product-detail-header {
        align-items: flex-start !important;
        gap: 12px;
        padding: 14px !important;
    }

    .product-detail-header .modal-title {
        min-width: 0;
        font-size: 1rem;
        line-height: 1.45;
        overflow-wrap: anywhere;
    }

    .product-detail-mobile {
        padding: 14px !important;
    }

    .product-detail-mobile .product-detail-summary > [class*="col-"] {
        padding-top: 0;
        padding-bottom: 0;
    }

    .product-detail-mobile .product-detail-description {
        border-left: 0 !important;
    }

    .product-detail-mobile .product-detail-info-card {
        padding: 14px;
    }

    .product-detail-mobile .product-detail-description-text {
        min-height: 0 !important;
        overflow-wrap: anywhere;
    }

    .product-detail-mobile .product-detail-toolbar {
        flex-direction: column;
        align-items: stretch !important;
        gap: 12px;
    }

    .product-detail-mobile .product-detail-toolbar h6 {
        line-height: 1.45;
    }

    .product-detail-mobile .product-detail-toolbar .btn {
        width: 100%;
        min-height: 44px;
    }

    .product-form-theme .product-detail-mobile .product-variation-list > table {
        min-width: 0 !important;
    }

    .product-detail-mobile .product-variation-list {
        overflow: visible !important;
        border: 0 !important;
    }

    .product-detail-mobile .product-variation-actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
        width: 100%;
    }

    .product-detail-mobile .product-variation-actions > .btn,
    .product-detail-mobile .product-variation-actions > form,
    .product-detail-mobile .product-variation-actions > form .btn {
        width: 100%;
        min-height: 42px;
        margin: 0;
        border-radius: 8px !important;
    }

    .product-detail-mobile .product-variation-actions > .btn,
    .product-detail-mobile .product-variation-actions > form .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding-right: 7px;
        padding-left: 7px;
        font-size: .72rem;
    }

    .product-detail-mobile .product-action-label {
        display: inline;
    }

    .product-detail-footer {
        padding: 12px !important;
    }

    .product-detail-footer .btn {
        width: 100%;
        min-height: 44px;
    }
}