@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

@media (max-width: 767px) {
    .main-header .navbar-custom-menu {
        float: none !important;
        display: block !important;
    }

        .main-header .navbar-custom-menu .dropdown-menu {
            left: auto !important;
        }

    .skin-blue-light .main-header .navbar .dropdown-menu li a {
        color: #777;
    }

    .main-header .navbar {
        height: auto;
    }
}

/* Product Sell Report */
.product-sell-dashboard,
.product-sell-dashboard * {
    font-family: 'Inter', sans-serif !important;
}

.psd-header h1 {
    text-transform: uppercase;
}

.psd-header h1 svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    vertical-align: -2px;
}

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

.psd-filter-grid label {
    display: block;
    margin-bottom: 7px;
    color: #0b1638;
    font-size: 12px;
    font-weight: 700;
}

.psd-filter-grid .form-control {
    width: 100%;
    height: 38px;
    border: 1px solid #d8e0eb;
    border-radius: 4px;
    background: #fff;
    color: #101a33;
    font-size: 12px;
    box-shadow: none;
}

.psd-filter-grid .gstr1-filter-actions {
    grid-column: span 2;
    justify-content: flex-end;
}

.psd-kpi-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    margin: 14px 0;
}

.psd-kpi-grid .gstr1-kpi {
    min-width: 0;
    min-height: 104px;
}

.psd-kpi-grid .gstr1-kpi strong {
    white-space: nowrap;
}

.psd-main {
    margin-bottom: 14px;
}

.psd-main .gstr1-tabs {
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: thin;
}

.psd-main .table-responsive {
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: #9aa7b9 #eef2f7;
}

.psd-main .table-responsive::-webkit-scrollbar {
    height: 6px;
}

.psd-main .table-responsive::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background: #9aa7b9;
}

.psd-main .gstr1-data-table {
    min-width: 1580px;
}

.psd-main .gstr1-data-table th,
.psd-main .gstr1-data-table td {
    padding: 10px 9px;
    font-size: 12px;
    white-space: nowrap;
}

.psd-main .gstr1-data-table tfoot th {
    color: #0649e8;
    font-weight: 800;
}

.psd-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 54px;
    padding: 3px 8px;
    border-radius: 4px;
    text-transform: capitalize;
    font-size: 11px;
    font-weight: 700;
}

.psd-status--paid { color: #10813b; background: #e8f8ed; }
.psd-status--partial { color: #b96000; background: #fff2df; }
.psd-status--due { color: #d9243a; background: #ffe8ec; }

.psd-chart-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.psd-chart-grid .gstr1-summary-card {
    min-height: 280px;
}

.psd-horizontal-bars > div {
    display: grid;
    grid-template-columns: 76px minmax(70px, 1fr) 98px;
    gap: 8px;
    align-items: center;
    margin: 9px 0;
    font-size: 11px;
}

.psd-horizontal-bars > div > i {
    display: block;
    height: 10px;
    background: #edf2ff;
}

.psd-horizontal-bars b {
    display: block;
    height: 100%;
    background: #3459f5;
}

.psd-horizontal-bars strong {
    text-align: right;
    white-space: nowrap;
    font-size: 10px;
}

.psd-donut-layout {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 15px;
    align-items: center;
    min-height: 210px;
}

.psd-donut-layout .gstr1-donut-wrap {
    width: 145px;
    height: 145px;
}

.psd-legend > div {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin: 12px 0;
    color: #1b2947;
    font-size: 11px;
    text-transform: capitalize;
}

.psd-legend strong {
    display: block;
    margin-top: 3px;
    color: #0b1638;
    font-size: 10px;
}

.psd-dot {
    flex: 0 0 10px;
    width: 10px;
    height: 10px;
    margin-top: 2px;
    border-radius: 2px;
}

.psd-dot--0 { background: #16833c; }
.psd-dot--1 { background: #ff7300; }
.psd-dot--2 { background: #126ce5; }
.psd-dot--3 { background: #e62b3b; }

.psd-trend {
    display: flex;
    min-height: 205px;
    gap: 12px;
    align-items: flex-end;
    justify-content: space-around;
    padding: 20px 10px 4px;
    border-bottom: 1px solid #dbe3ee;
}

.psd-trend > div {
    display: flex;
    flex: 1;
    min-width: 28px;
    flex-direction: column-reverse;
    gap: 7px;
    align-items: center;
    text-align: center;
    font-size: 9px;
}

.psd-trend > div > i {
    display: flex;
    height: 130px;
    align-items: flex-end;
    gap: 3px;
}

.psd-trend b,
.psd-trend em {
    display: block;
    width: 8px;
    min-height: 2px;
    border-radius: 4px 4px 0 0;
    background: #16833c;
}

.psd-trend em {
    background: #126ce5;
}

@media (max-width: 1400px) {
    .psd-filter-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .psd-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .psd-chart-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .psd-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .psd-kpi-grid,
    .psd-chart-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    .psd-filter-grid { grid-template-columns: 1fr; }
    .psd-filter-grid .gstr1-filter-actions { grid-column: auto; }
    .psd-donut-layout { grid-template-columns: 1fr; justify-items: center; }
}

/* GST report table alignment and GSTR-2's compact result view. */
.gstr1-report-page .gstr1-data-table th:first-child,
.gstr1-report-page .gstr1-data-table td:first-child { text-align: center !important; }
.gstr2-report-page .gstr1-main-card .dataTables_info,
.gstr2-report-page .gstr1-main-card .dataTables_paginate { display: none !important; }

/* GSTR-3B report, using the shared GST report design system. */
.gstr3b-filter-grid { display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:11px 22px; }
.gstr3b-filter-grid label { display:block;margin-bottom:5px;color:#101828;font-size:13px;font-weight:650; }
.gstr3b-filter-grid .form-control,.gstr3b-filter-grid .select2-selection { width:100%!important;height:34px!important;min-height:34px!important;padding:7px 10px!important;border:1px solid #d5dce6!important;border-radius:4px!important;color:#233047!important;background:#fff!important;font-size:13px!important;box-shadow:none!important; }
.gstr3b-filter-spacer { grid-column:span 2; }
.gstr3b-kpi-grid { display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:13px 0; }
.gstr3b-summary-card .gstr1-table-title { padding:12px 15px;border-bottom:1px solid #dfe5ed; }
.gstr3b-summary-card .gstr1-data-table th:nth-child(n+4),.gstr3b-summary-card .gstr1-data-table td:nth-child(n+4) { text-align:center; }
.gstr3b-lower-grid { display:grid;grid-template-columns:.82fr 1.35fr 1.1fr;gap:10px;margin-top:13px; }
.gstr3b-blue-row th { color:#004cff!important; }.gstr3b-green-row th { color:#08a64c!important; }
.gstr3b-balance-row { display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px;padding:10px 8px;color:#08a64c;background:#f1fcf5;border:1px solid #d4f4df;border-radius:5px;font-weight:700; }
.gstr3b-chart-layout { display:grid;grid-template-columns:170px minmax(0,1fr);align-items:center;gap:18px; }
.gstr3b-chart-legend>div { display:flex;align-items:flex-start;gap:9px;margin-bottom:13px;color:#344054;font-size:11px; }
.gstr3b-chart-legend strong { display:block;margin-top:3px;color:#101828;font-size:12px; }
.gstr3b-chart-legend i { flex:0 0 11px;width:11px;height:11px;margin-top:2px;border-radius:2px; }
.gstr3b-legend-dot--0 { background:#087be7; }
.gstr3b-legend-dot--1 { background:#18b675; }
.gstr3b-legend-dot--2 { background:#7945dc; }

/* GST summary tables intentionally have fixed regulatory column order. */
.gstr1-report-page .gstr1-data-table th.sorting,
.gstr1-report-page .gstr1-data-table th.sorting_asc,
.gstr1-report-page .gstr1-data-table th.sorting_desc {
    background-image:none !important;
    cursor:default !important;
}

/* HSN Summary */
.hsn-filter-grid { display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:11px 24px; }
.hsn-filter-grid label { display:block;margin-bottom:5px;color:#101828;font-size:13px;font-weight:650; }
.hsn-filter-grid .form-control,.hsn-filter-grid .select2-selection { width:100%!important;height:34px!important;min-height:34px!important;padding:7px 10px!important;border:1px solid #d5dce6!important;border-radius:4px!important;color:#233047!important;background:#fff!important;font-size:13px!important;box-shadow:none!important; }
.hsn-filter-spacer { grid-column:span 1; }
.hsn-kpi-grid { display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:13px 0; }
.hsn-main-card .gstr1-data-table thead tr:nth-child(2) th { padding-top:5px!important;padding-bottom:5px!important;text-align:center; }
.hsn-main-card .gstr1-data-table th:nth-child(n+4),.hsn-main-card .gstr1-data-table td:nth-child(n+4) { text-align:center; }
.hsn-lower-grid { display:grid;grid-template-columns:1fr 1fr 1.08fr;gap:10px;margin-top:13px; }
.hsn-chart-layout { display:grid;grid-template-columns:170px minmax(0,1fr);align-items:center;gap:14px; }
.hsn-chart-legend>div { display:flex;align-items:flex-start;gap:8px;margin-bottom:8px;color:#344054;font-size:10px; }
.hsn-chart-legend strong { display:block;margin-top:2px;color:#101828;font-size:11px; }
.hsn-dot { flex:0 0 9px;width:9px;height:9px;margin-top:2px;border-radius:2px; }
.hsn-dot--0{background:#087be7}.hsn-dot--1{background:#18b675}.hsn-dot--2{background:#ff9800}.hsn-dot--3{background:#ef3f35}.hsn-dot--4{background:#7945dc}.hsn-dot--5{background:#7d8ba3}
.hsn-bar-chart { display:flex;align-items:flex-end;justify-content:center;gap:54px;height:220px;padding:24px 20px 0;border-bottom:1px solid #dfe5ed;background:repeating-linear-gradient(to bottom,#fff 0,#fff 54px,#e9edf3 55px); }
.hsn-bar-chart>div { display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:125px; }
.hsn-bar-chart strong { margin-bottom:7px;color:#101828;font-size:11px; }
.hsn-bar-chart span { margin-top:8px;color:#344054;font-size:10px;white-space:nowrap; }
.hsn-bar { display:block;width:112px;min-height:2px;transition:height .3s ease; }
.hsn-bar--taxable { background:linear-gradient(180deg,#147cf0,#075cc4); }.hsn-bar--invoice { background:linear-gradient(180deg,#20b65d,#07883b); }
@media(max-width:1250px){.hsn-filter-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.hsn-filter-spacer{display:none}.hsn-kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.hsn-lower-grid{grid-template-columns:1fr}}
@media(max-width:767px){.hsn-filter-grid,.hsn-kpi-grid,.hsn-chart-layout{grid-template-columns:1fr}.hsn-chart-layout .gstr1-donut-wrap{margin:auto}.hsn-bar-chart{gap:18px}.hsn-bar{width:80px}}
@media(max-width:1250px){.gstr3b-filter-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.gstr3b-filter-spacer{display:none}.gstr3b-kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.gstr3b-lower-grid{grid-template-columns:1fr}}
@media(max-width:767px){.gstr3b-filter-grid,.gstr3b-kpi-grid,.gstr3b-chart-layout{grid-template-columns:1fr}.gstr3b-chart-layout .gstr1-donut-wrap{margin:auto}}

/* Sales representative report DataTable controls */
.srir-table-card,
.srir-table-card *,
.srir-table-wrap .dataTables_wrapper,
.srir-table-wrap .dataTables_wrapper * {
    font-family: 'Inter', sans-serif !important;
}

    .srir-table-card > .srir-title {
        padding: 18px 22px 8px;
    }

        .srir-table-card > .srir-title .srir-btn {
            display: none;
        }

.srir-table-wrap {
    padding: 4px 22px 18px !important;
    overflow: visible !important;
}

    .srir-table-wrap .dataTables_wrapper {
        font-size: 12px;
    }

.srir-dt-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

    .srir-dt-toolbar .dataTables_filter {
        margin-left: auto;
    }

.srir-dt-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.srir-table-wrap .dt-buttons {
    display: inline-flex;
    gap: 8px;
    margin: 0 0 12px 6px;
}

.srir-table-wrap .dt-button {
    margin: 0 !important;
    padding: 7px 12px !important;
    color: #ff5a0a !important;
    background: #fff !important;
    border: 1px solid #ff5a0a !important;
    border-radius: 7px !important;
    box-shadow: none !important;
    white-space: nowrap;
}

.srir-table-wrap .dataTables_length,
.srir-table-wrap .dataTables_filter {
    margin-bottom: 12px;
}

    .srir-table-wrap .dataTables_filter input,
    .srir-table-wrap .dataTables_length select {
        height: 34px;
        padding: 6px 10px;
        border: 1px solid #ccd3dd;
        border-radius: 8px;
    }

.srir-table-wrap table.dataTable {
    width: 100% !important;
    border-collapse: collapse !important;
}

    .srir-table-wrap table.dataTable thead th {
        color: #101828 !important;
        background: #fff !important;
        border-bottom: 1px solid #dfe5ed !important;
        white-space: nowrap;
    }

    .srir-table-wrap table.dataTable tbody td {
        border-bottom: 1px solid #e8ebf0 !important;
        white-space: nowrap;
    }

.srir-table-wrap .dataTables_info,
.srir-table-wrap .dataTables_paginate {
    margin-top: 12px;
}

.srir-table-wrap .paginate_button.current {
    color: #fff !important;
    background: #0866e9 !important;
    border-color: #0866e9 !important;
    border-radius: 6px !important;
}

@media (max-width: 767px) {
    .srir-table-card > .srir-title {
        padding: 16px 18px 10px;
    }

    .srir-table-wrap {
        padding: 4px 14px 16px !important;
    }

    .srir-dt-toolbar {
        justify-content: center;
        gap: 0;
    }

        .srir-dt-toolbar .dataTables_length {
            width: 100%;
            margin: 0 0 14px !important;
            float: none !important;
            text-align: center;
        }

    .srir-table-wrap .dt-buttons {
        display: flex !important;
        width: 100%;
        margin: 0 0 14px !important;
        float: none !important;
        justify-content: center;
        flex-wrap: wrap;
        gap: 7px;
    }

    .srir-table-wrap .dt-button {
        float: none !important;
        flex: 0 0 auto;
        padding: 6px 10px !important;
        font-size: 12px !important;
    }

    .srir-dt-toolbar .dataTables_filter {
        width: 100%;
        margin: 0 !important;
        float: none !important;
        text-align: center;
    }

        .srir-dt-toolbar .dataTables_filter input {
            width: min(100%, 185px);
            margin-left: 6px;
        }

    .srir-dt-footer {
        flex-direction: column;
        align-items: center;
    }
}


/* Compact, modern Add/Edit User workspace. Kept page-scoped intentionally. */
.user-form-modern {
    --user-accent: #f97316;
    --user-border: #e2e8f0;
    --user-muted: #64748b;
    padding-top: 8px !important;
}

    .user-form-modern > form > .row {
        margin-left: -6px;
        margin-right: -6px;
    }

        .user-form-modern > form > .row > .col-md-12 {
            padding-left: 6px;
            padding-right: 6px;
        }

        .user-form-modern > form > .row > .user-form-half {
            padding-left: 6px;
            padding-right: 6px;
        }

    .user-form-modern .user-profile-card,
    .user-form-modern .user-access-card,
    .user-form-modern .user-sales-card {
        position: relative;
        margin-bottom: 12px !important;
        overflow: hidden;
        border: 1px solid var(--user-border);
        border-radius: 12px !important;
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
    }

        .user-form-modern .user-profile-card::before,
        .user-form-modern .user-access-card::before,
        .user-form-modern .user-sales-card::before {
            content: "";
            position: absolute;
            inset: 0 auto 0 0;
            width: 3px;
            background: var(--user-accent);
        }

        .user-form-modern .user-profile-card > .tw-p-2,
        .user-form-modern .user-access-card > .tw-p-2,
        .user-form-modern .user-sales-card > .tw-p-2 {
            padding: 0 !important;
        }

    .user-form-modern .box-header {
        min-height: 42px;
        padding: 12px 18px 9px;
        border-bottom: 1px solid #f1f5f9;
    }

    .user-form-modern .box-title {
        color: #172554;
        font-size: 15px;
        font-weight: 650;
        line-height: 20px;
    }

    .user-form-modern .tw-align-middle {
        padding: 12px 18px 6px !important;
    }

    .user-form-modern .form-group {
        margin-bottom: 10px;
    }

    .user-form-modern label {
        margin-bottom: 5px;
        color: #111827;
        font-size: 12px;
        font-weight: 600;
    }

    .user-form-modern .form-control,
    .user-form-modern .select2-container .select2-selection {
        min-height: 36px;
        border-color: #d7dee8;
        border-radius: 8px !important;
        background-color: #fff;
    }

        .user-form-modern .form-control:focus,
        .user-form-modern .select2-container--focus .select2-selection {
            border-color: var(--user-accent) !important;
            box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1) !important;
        }

    .user-form-modern .help-block {
        margin: 4px 0 0;
        color: var(--user-muted);
        font-size: 11px;
    }

    .user-form-modern .checkbox {
        margin-top: 4px;
        margin-bottom: 6px;
    }

        .user-form-modern .checkbox br {
            display: none;
        }

    .user-form-modern .user-profile-card .tw-align-middle {
        display: grid;
        grid-template-columns: minmax(120px, .7fr) repeat(3, minmax(180px, 1fr));
        gap: 4px 14px;
    }

        .user-form-modern .user-profile-card .tw-align-middle > [class*="col-md-"] {
            float: none;
            width: auto;
            padding: 0;
        }

        .user-form-modern .user-profile-card .tw-align-middle > .clearfix {
            display: none;
        }

    .user-form-modern .user-profile-card .checkbox {
        display: flex;
        min-height: 36px;
        align-items: center;
        padding: 0 10px;
        border: 0px solid #edf0f4;
        border-radius: 8px;
        /*background: #f8fafc;*/
    }

    .user-form-modern .user-access-card .user_auth_fields {
        margin-left: -8px;
        margin-right: -8px;
    }

        .user-form-modern .user-access-card .user_auth_fields > [class*="col-md-"],
        .user-form-modern .user-sales-card [class*="col-md-"],
        .user-form-modern .user-sales-card [class*="col-sm-"] {
            padding-left: 8px;
            padding-right: 8px;
        }

    .user-form-modern .user-access-card h4 {
        margin: 5px 0 8px;
        color: #172554;
        font-size: 13px;
        font-weight: 650;
    }

        .user-form-modern .user-access-card h4 + * {
            color: var(--user-muted);
        }

    .user-form-modern .user-sales-card .tw-align-middle::after,
    .user-form-modern .user-access-card .tw-align-middle::after {
        display: table;
        clear: both;
        content: "";
    }

@media (min-width: 992px) {
    .user-form-modern .user-form-half .user-access-card,
    .user-form-modern .user-form-half .user-sales-card {
        min-height: 0;
    }

    .user-form-modern .user-sales-card .tw-align-middle > .col-md-4,
    .user-form-modern .user-sales-card .tw-align-middle > .col-sm-4 {
        width: 50%;
    }

    .user-form-modern .user-sales-card .tw-align-middle > .clearfix {
        display: none;
    }
}

@media (max-width: 991px) {
    .user-form-modern .user-profile-card .tw-align-middle {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .user-form-modern .user-profile-card .tw-align-middle {
        grid-template-columns: 1fr;
    }

    .user-form-modern .box-header,
    .user-form-modern .tw-align-middle {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
}

/* Import Contacts: compact, single-line file actions. */
.import-contact-form {
    margin: 0;
}

.import-contact-actions {
    display: flex;
    align-items: flex-end;
    gap: 18px;
    padding: 4px 0;
}

.import-contact-file {
    min-width: 360px;
    margin: 0 !important;
}

    .import-contact-file label {
        display: block;
        margin-bottom: 7px;
    }

    .import-contact-file input[type="file"] {
        width: 100%;
        min-height: 34px;
        color: #475569;
        font-size: 12px;
    }

.import-contact-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 2px;
}

.import-contact-btn {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 7px 13px;
    border: 1px solid #f97316;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    white-space: nowrap;
    text-decoration: none !important;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.import-action-icon {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Font Awesome remains as a compatibility hook; its painted glyph is replaced by SVG. */
.outline-svg-ready {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-family: inherit !important;
    line-height: 1;
    vertical-align: -.12em;
}

    .outline-svg-ready::before {
        display: none !important;
        content: none !important;
    }

.global-outline-svg {
    width: 1em;
    height: 1em;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

/* Modern contact due payment modal. */
.payment-due-dialog {
    width: min(720px, calc(100vw - 32px));
    max-width: 720px;
}

.payment-due-modal-modern {
    overflow: hidden;
    border: 0;
    border-radius: 14px;
    box-shadow: 0 24px 70px rgba(15,23,42,.3);
}

    .payment-due-modal-modern .modal-header {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 16px 20px;
        border-bottom: 1px solid #e8edf3;
        background: #fffaf6;
    }

        .payment-due-modal-modern .modal-header .close {
            order: 3;
            margin-left: auto;
            color: #64748b;
            opacity: 1;
        }

            .payment-due-modal-modern .modal-header .close svg {
                width: 18px;
                height: 18px;
                fill: none;
                stroke: currentColor;
                stroke-width: 1.8;
                stroke-linecap: round;
            }

.payment-modal-heading-icon {
    display: inline-flex;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    border: 1px solid #fed7aa;
    border-radius: 9px;
    color: #f97316;
    background: #fff7ed;
}

    .payment-modal-heading-icon svg, .payment-field-icon {
        width: 18px;
        height: 18px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.payment-due-modal-modern .modal-title {
    margin: 0;
    color: #111827;
    font-size: 16px;
    font-weight: 650;
}

.payment-due-modal-modern .modal-header p {
    margin: 3px 0 0;
    color: #64748b;
    font-size: 11px;
}

.payment-due-modal-modern .modal-body {
    max-height: calc(100vh - 180px);
    overflow-y: auto;
    padding: 14px 18px 8px;
    background: #f8fafc;
}

.payment-due-modal-modern .well {
    min-height: 96px;
    margin-bottom: 12px;
    padding: 14px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    box-shadow: none;
}

.payment-due-modal-modern .form-group {
    margin-bottom: 12px;
}

.payment-due-modal-modern label {
    margin-bottom: 5px;
    font-size: 12px;
    font-weight: 600;
}

.payment-due-modal-modern .form-control, .payment-due-modal-modern .select2-container .select2-selection {
    min-height: 36px;
    border-color: #d7dee8;
    border-radius: 8px !important;
}

.payment-due-modal-modern .input-group-addon {
    border-color: #d7dee8;
    color: #64748b;
    background: #f8fafc;
}

.payment-due-modal-modern .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 13px 20px;
    border-top: 1px solid #e8edf3;
    background: #fff;
}

.payment-modal-btn {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 600;
}

    .payment-modal-btn svg {
        width: 15px;
        height: 15px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
    }

.payment-modal-close {
    border: 1px solid #d7dee8;
    color: #334155;
    background: #fff;
}

.payment-modal-save {
    border: 1px solid #f97316;
    color: #fff;
    background: #f97316;
}

@media(max-width:767px) {
    .payment-due-dialog {
        width: calc(100vw - 16px);
        margin: 8px auto
    }

    .payment-due-modal-modern .modal-body {
        padding: 11px
    }

    .payment-due-modal-modern .modal-header p {
        display: none
    }
}

.import-contact-submit {
    color: #fff;
    background: #f97316;
}

    .import-contact-submit:hover,
    .import-contact-submit:focus {
        border-color: #ea580c;
        color: #fff;
        background: #ea580c;
    }

.import-contact-download {
    color: #f97316;
    background: #fff;
}

    .import-contact-download:hover,
    .import-contact-download:focus {
        color: #fff;
        background: #f97316;
    }

/* Products header actions. */
.content-header .product-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.product-header-btn {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 7px 13px;
    border: 1px solid #f97316;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    white-space: nowrap;
    text-decoration: none !important;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

    .product-header-btn svg {
        width: 16px;
        height: 16px;
        flex: 0 0 16px;
    }

.product-outline-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    vertical-align: -3px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.product-action-menu > li > a {
    display: flex;
    align-items: center;
    gap: 9px;
}

.product-action-menu .product-outline-icon {
    color: #64748b;
}

.nav-tabs .product-outline-icon {
    margin-right: 5px;
}

#product_table .product-image-column,
.dataTables_scrollHead #product_table .product-image-column {
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
}

#product_table td.product-image-column,
#product_table th.product-image-column {
    padding-left: 8px !important;
    padding-right: 8px !important;
}

#product_table .product-thumbnail-small {
    width: 40px !important;
    height: 40px !important;
    object-fit: cover;
}

/* Modern Print Labels workspace. */
.content-header .label-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.label-header-btn {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 7px 13px;
    border: 1px solid #f97316;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
}

    .label-header-btn svg,
    .label-outline-icon {
        width: 16px;
        height: 16px;
        flex: 0 0 16px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.label-header-btn-primary {
    color: #fff;
    background: #f97316;
}

    .label-header-btn-primary:hover,
    .label-header-btn-primary:focus {
        border-color: #ea580c;
        color: #fff;
        background: #ea580c;
    }

.label-header-btn-secondary {
    color: #f97316;
    background: #fff;
}

    .label-header-btn-secondary:hover,
    .label-header-btn-secondary:focus {
        color: #fff;
        background: #f97316;
    }

.labels-modern {
    padding-top: 8px !important;
}

    .labels-modern .labels-products-card,
    .labels-modern .labels-settings-card {
        margin-bottom: 12px !important;
        overflow: hidden;
        border: 1px solid #e2e8f0;
        border-radius: 12px !important;
        box-shadow: 0 2px 8px rgba(15, 23, 42, .04) !important;
    }

        .labels-modern .labels-products-card > .tw-p-2,
        .labels-modern .labels-settings-card > .tw-p-2 {
            padding: 0 !important;
        }

    .labels-modern .box-header {
        padding: 12px 18px 9px;
        border-bottom: 1px solid #f1f5f9;
    }

    .labels-modern .box-title {
        color: #172554;
        font-size: 15px;
        font-weight: 650;
    }

    .labels-modern .tw-align-middle {
        padding: 12px 18px !important;
    }

    .labels-modern .form-group {
        margin-bottom: 10px;
    }

    .labels-modern .form-control,
    .labels-modern .input-group-addon {
        min-height: 36px;
        border-color: #d7dee8;
    }

        .labels-modern .input-group-addon:first-child,
        .labels-modern .form-control:first-child {
            border-radius: 8px 0 0 8px;
        }

    .labels-modern .input-group .form-control:last-child,
    .labels-modern select.form-control {
        border-radius: 0 8px 8px 0;
    }

/* Product custom-field type picker: keep native Chrome menus readable even
   when the operating system/browser is using a dark control colour scheme. */
.custom_label_product_div .input-group-addon {
    padding: 0;
    background: #ffffff;
}

.custom-field-type-select {
    display: block;
    width: 100%;
    min-width: 102px;
    height: 32px;
    padding: 5px 24px 5px 10px;
    color: #334155 !important;
    background-color: #ffffff !important;
    border: 0;
    border-radius: 0 8px 8px 0;
    color-scheme: light;
    cursor: pointer;
    outline: 0;
}

    .custom-field-type-select:focus {
        color: #1f2937 !important;
        background-color: #fff7ed !important;
        box-shadow: inset 0 0 0 1px #f97316;
    }

    .custom-field-type-select option {
        color: #1f2937 !important;
        background-color: #ffffff !important;
    }

        .custom-field-type-select option:checked {
            color: #ffffff !important;
            background-color: #f97316 !important;
        }

/* Purchase details need a wide data canvas; retain readable column widths and
   let the existing responsive wrapper scroll on smaller screens. */
.purchase-details-modal {
    width: calc(100vw - 32px) !important;
    max-width: 1600px !important;
    margin: 16px auto !important;
}

    .purchase-details-modal .modal-body {
        padding-left: 12px;
        padding-right: 12px;
    }

    .purchase-details-modal .purchase-details-date {
        margin: 0;
        padding: 2px 8px 8px;
        color: #111827;
        font-size: 12px;
        white-space: nowrap;
    }

    .purchase-details-modal .purchase-details-date-row {
        min-height: 34px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding: 5px 8px 0 !important;
    }

.purchase-filter-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(210px, .65fr);
    gap: 14px 28px;
}

    .purchase-filter-grid .form-group {
        margin-bottom: 0;
    }

.business-location-dialog {
    width: min(920px,calc(100vw - 32px)) !important;
    max-width: 920px;
    margin: 14px auto;
}

.business-location-modal-modern .modal-body {
    padding: 10px !important;
}

    .business-location-modal-modern .modal-body > .row {
        padding: 10px 9px 0 !important;
    }

.business-location-modal-modern .form-group {
    margin-bottom: 10px;
}

.business-location-modal-modern hr {
    margin: 10px 0;
    border-color: #fb6a24;
}

.business-location-modal-modern .table thead th {
    color: #fff !important;
    border-color: #fb923c !important;
    background: #f97316 !important;
}

.business-location-modal-modern .modal-footer {
    position: sticky;
    bottom: 0;
    z-index: 2;
}

.location-settings-update {
    min-width: auto !important;
    width: auto !important;
    min-height: 34px !important;
    padding: 7px 13px !important;
}

    .location-settings-update svg {
        width: 15px;
        height: 15px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.9;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

@media (max-width: 1199px) {
    .purchase-filter-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .purchase-filter-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

.purchase-details-modal .table-responsive {
    width: 100%;
    overflow-x: auto;
}

.purchase-details-table {
    width: 100%;
    min-width: 1420px;
    table-layout: auto;
}

    .purchase-details-table th,
    .purchase-details-table td {
        min-width: 105px;
        white-space: nowrap;
        vertical-align: top !important;
    }

        .purchase-details-table th:first-child,
        .purchase-details-table td:first-child {
            min-width: 34px;
            width: 34px;
        }

        .purchase-details-table th:nth-child(2),
        .purchase-details-table td:nth-child(2) {
            min-width: 230px;
            white-space: normal;
        }

        .purchase-details-table th:nth-child(3),
        .purchase-details-table td:nth-child(3) {
            min-width: 90px;
        }

@media (max-width: 767px) {
    .purchase-details-modal {
        width: calc(100vw - 12px) !important;
        margin: 6px auto !important;
    }
}

/* Compact modern quick-product modal used from purchase, sale and POS pages. */
.quick-product-modal-dialog {
    width: min(960px, calc(100vw - 24px)) !important;
    max-width: 960px !important;
    margin: 14px auto !important;
}

.quick-product-modal-modern {
    overflow: hidden;
    border: 0 !important;
    border-radius: 14px !important;
    background: #f8fafc;
    box-shadow: 0 22px 55px rgba(15, 23, 42, .24) !important;
}

    .quick-product-modal-modern .modal-header {
        min-height: 58px;
        padding: 13px 20px !important;
        background: #fffaf5;
        border-bottom: 1px solid #e2e8f0;
    }

    .quick-product-modal-modern .modal-title {
        color: #111827;
        font-size: 17px;
        font-weight: 700;
        line-height: 32px;
    }

    .quick-product-modal-modern .modal-body {
        max-height: calc(100vh - 145px);
        padding: 11px !important;
        overflow-x: hidden;
        overflow-y: auto;
        background: #f8fafc;
        scrollbar-width: thin;
        scrollbar-color: #94a3b8 transparent;
    }

        .quick-product-modal-modern .modal-body::-webkit-scrollbar {
            width: 6px;
        }

        .quick-product-modal-modern .modal-body::-webkit-scrollbar-thumb {
            border-radius: 10px;
            background: #94a3b8;
        }

        .quick-product-modal-modern .modal-body > .row {
            margin: 0 0 10px;
            padding: 12px 10px 4px;
            border: 1px solid #dbe3ed;
            border-left: 3px solid #f97316;
            border-radius: 11px;
            background: #ffffff;
            box-shadow: 0 2px 7px rgba(15, 23, 42, .04);
        }

            .quick-product-modal-modern .modal-body > .row:last-of-type {
                margin-bottom: 0;
            }

    .quick-product-modal-modern .form-group,
    .quick-product-modal-modern .checkbox {
        margin-bottom: 10px;
    }

    .quick-product-modal-modern label {
        margin-bottom: 5px;
        color: #172033;
        font-size: 13px;
        font-weight: 650;
    }

    .quick-product-modal-modern .form-control,
    .quick-product-modal-modern .select2-selection {
        min-height: 35px;
        border-color: #d3ddea !important;
        border-radius: 8px !important;
        background-color: #ffffff;
    }

        .quick-product-modal-modern .form-control:focus,
        .quick-product-modal-modern .select2-container--open .select2-selection {
            border-color: #f97316 !important;
            box-shadow: 0 0 0 3px rgba(249, 115, 22, .11) !important;
        }

    .quick-product-modal-modern .help-block {
        margin: 3px 0 0;
        color: #64748b;
        font-size: 11px;
    }

    .quick-product-modal-modern .mce-tinymce,
    .quick-product-modal-modern .tox-tinymce {
        width: 100% !important;
        border: 1px solid #d3ddea !important;
        border-radius: 8px !important;
        overflow: hidden;
        box-shadow: none !important;
    }

    .quick-product-modal-modern .table-responsive,
    .quick-product-modal-modern table {
        width: 100%;
    }

        .quick-product-modal-modern table > thead > tr > th,
        .quick-product-modal-modern table .bg-green {
            color: #ffffff !important;
            background: #f97316 !important;
        }

    .quick-product-modal-modern .modal-footer {
        display: flex;
        justify-content: flex-end;
        gap: 8px;
        padding: 10px 16px !important;
        background: #ffffff;
        border-top: 1px solid #e2e8f0;
    }

    .quick-product-modal-modern #submit_quick_product {
        color: #ffffff !important;
        background: #f97316 !important;
        border-color: #f97316 !important;
    }

@media (max-width: 767px) {
    .quick-product-modal-dialog {
        width: calc(100vw - 10px) !important;
        margin: 5px auto !important;
    }

    .quick-product-modal-modern .modal-body {
        max-height: calc(100vh - 125px);
        padding: 7px !important;
    }
}

/* Warm spectrum supplied for table frames and DataTables utility icons. */
:root {
    --table-warm-1: #ff9b08;
    --table-warm-2: #f77f0b;
    --table-warm-3: #f25a12;
    --table-warm-4: #e83c16;
    --table-warm-5: #cf2c12;
    --table-warm-6: #a9180c;
}

.dt-buttons .dt-button,
.dt-buttons a,
.dataTables_wrapper .buttons-csv,
.dataTables_wrapper .buttons-excel,
.dataTables_wrapper .buttons-print,
.dataTables_wrapper .buttons-colvis,
.dataTables_wrapper .buttons-pdf {
    background: #ffffff !important;
    border-style: solid !important;
    border-width: 1px !important;
    box-shadow: none !important;
}

.dataTables_wrapper .buttons-csv {
    color: var(--table-warm-1) !important;
    border-color: var(--table-warm-1) !important;
}

.dataTables_wrapper .buttons-excel {
    color: var(--table-warm-2) !important;
    border-color: var(--table-warm-2) !important;
}

.dataTables_wrapper .buttons-print {
    color: var(--table-warm-3) !important;
    border-color: var(--table-warm-3) !important;
}

.dataTables_wrapper .buttons-colvis {
    color: var(--table-warm-4) !important;
    border-color: var(--table-warm-4) !important;
}

.dataTables_wrapper .buttons-pdf {
    color: #94a3b8 !important;
    border-color: #94a3b8 !important;
}

    .dataTables_wrapper .buttons-csv i,
    .dataTables_wrapper .buttons-csv svg,
    .dataTables_wrapper .buttons-excel i,
    .dataTables_wrapper .buttons-excel svg,
    .dataTables_wrapper .buttons-print i,
    .dataTables_wrapper .buttons-print svg,
    .dataTables_wrapper .buttons-colvis i,
    .dataTables_wrapper .buttons-colvis svg,
    .dataTables_wrapper .buttons-pdf i,
    .dataTables_wrapper .buttons-pdf svg {
        color: inherit !important;
        stroke: currentColor !important;
    }

.dataTables_wrapper .buttons-csv:hover {
    background: #fff8e8 !important;
}

.dataTables_wrapper .buttons-excel:hover {
    background: #fff3e5 !important;
}

.dataTables_wrapper .buttons-print:hover {
    background: #fff0eb !important;
}

.dataTables_wrapper .buttons-colvis:hover {
    background: #ffebe7 !important;
}

.dataTables_wrapper .buttons-pdf:hover {
    background: #fff0ef !important;
}

.dataTables_wrapper .dt-buttons .dt-button,
.dataTables_wrapper .dt-buttons > a,
.dataTables_wrapper .dt-buttons > button,
.dataTables_wrapper .dt-buttons .buttons-csv,
.dataTables_wrapper .dt-buttons .buttons-excel,
.dataTables_wrapper .dt-buttons .buttons-print,
.dataTables_wrapper .dt-buttons .buttons-colvis,
.dataTables_wrapper .dt-buttons .buttons-pdf {
    width: auto !important;
    min-width: 0 !important;
    min-height: 26px !important;
    height: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 5px !important;
    margin: 2px 3px !important;
    padding: 3px 9px !important;
    border-radius: 7px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 17px !important;
    text-transform: none !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
}

    .dataTables_wrapper .dt-buttons > a > span,
    .dataTables_wrapper .dt-buttons > button > span,
    .dataTables_wrapper .dt-buttons .dt-button > span {
        width: auto !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 5px !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 17px !important;
        white-space: nowrap !important;
    }

        .dataTables_wrapper .dt-buttons > a > span > span,
        .dataTables_wrapper .dt-buttons > button > span > span,
        .dataTables_wrapper .dt-buttons .dt-button > span > span {
            display: inline !important;
            width: auto !important;
            margin: 0 !important;
            padding: 0 !important;
            line-height: 17px !important;
            white-space: nowrap !important;
        }

.dataTables_wrapper .dt-export-icon {
    width: 12px !important;
    height: 12px !important;
    flex: 0 0 12px;
    display: block !important;
    margin: 0 !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dataTables_wrapper .dt-export-chevron {
    width: 11px !important;
    height: 11px !important;
    flex: 0 0 11px;
    display: block !important;
    margin: 0 !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.contact-summary-actions {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 8px;
    padding-bottom: 8px;
}

.contact-summary-action {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 7px 13px;
    border: 1px solid transparent;
    border-radius: 7px;
    color: #fff !important;
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    text-decoration: none !important;
    box-shadow: none;
}

    .contact-summary-action svg {
        width: 15px;
        height: 15px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.contact-summary-action-pay {
    border-color: #f97316;
    background: #f97316;
}

    .contact-summary-action-pay:hover, .contact-summary-action-pay:focus {
        border-color: #ea580c;
        background: #ea580c;
    }

.contact-summary-action-discount {
    border-color: #c2410c;
    background: #c2410c;
}

    .contact-summary-action-discount:hover, .contact-summary-action-discount:focus {
        border-color: #9a3412;
        background: #9a3412;
    }

@media(max-width:767px) {
    .contact-summary-actions {
        justify-content: flex-start;
        flex-wrap: wrap
    }
}

.labels-modern .table {
    margin-bottom: 8px;
}

    .labels-modern .table > thead > tr > th {
        padding: 9px;
        color: #334155;
        background: #f8fafc;
    }

    .labels-modern .table > tbody > tr > td,
    .labels-modern .table > tr > td {
        padding: 8px;
        vertical-align: middle;
    }

.labels-modern hr {
    margin: 12px 0;
    border-color: #e2e8f0;
}

/* Modern Add/Edit Product editor. */
.product-editor-modern {
    --product-accent: #f97316;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding-top: 8px !important;
    overflow-x: hidden;
    box-sizing: border-box;
}

body:has(.product-editor-modern) #scrollable-container {
    overflow-x: hidden !important;
}

.product-editor-modern .product_form,
.product-editor-modern .product-details-card,
.product-editor-modern .product-pricing-card,
.product-editor-modern .tw-flow-root,
.product-editor-modern .tw-align-middle,
.product-editor-modern #product_form_part {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.product-editor-modern .product-details-card,
.product-editor-modern .product-pricing-card {
    position: relative;
    margin-bottom: 12px !important;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .04) !important;
}

    .product-editor-modern .product-details-card::before,
    .product-editor-modern .product-pricing-card::before {
        content: "";
        position: absolute;
        inset: 0 auto 0 0;
        width: 3px;
        background: var(--product-accent);
    }

    .product-editor-modern .product-details-card > .tw-p-2,
    .product-editor-modern .product-pricing-card > .tw-p-2 {
        padding: 0 !important;
    }

.product-editor-modern .box-header {
    padding: 12px 18px 9px;
    border-bottom: 1px solid #f1f5f9;
}

.product-editor-modern .box-title {
    color: #172554;
    font-size: 15px;
    font-weight: 650;
}

.product-editor-modern .tw-align-middle {
    padding: 12px 18px 6px !important;
}

.product-editor-modern .form-group {
    margin-bottom: 11px;
}

.product-editor-modern label {
    margin-bottom: 5px;
    color: #111827;
    font-size: 12px;
    font-weight: 600;
}

.product-editor-modern .form-control,
.product-editor-modern .select2-container .select2-selection {
    min-height: 36px;
    border-color: #d7dee8;
    border-radius: 8px !important;
    background: #fff;
}

    .product-editor-modern .form-control:focus,
    .product-editor-modern .select2-container--focus .select2-selection {
        border-color: var(--product-accent) !important;
        box-shadow: 0 0 0 3px rgba(249, 115, 22, .1) !important;
    }

.product-editor-modern .help-block {
    margin: 4px 0 0;
    color: #64748b;
    font-size: 11px;
}

.product-editor-modern .product-quick-add {
    display: inline-flex;
    width: 38px;
    height: 36px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-color: #f97316;
    border-radius: 0 8px 8px 0 !important;
    color: #f97316;
    background: #fff !important;
}

    .product-editor-modern .product-quick-add:hover,
    .product-editor-modern .product-quick-add:focus {
        color: #fff;
        background: #f97316 !important;
    }

.product-form-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.product-editor-modern .mce-tinymce,
.product-editor-modern .tox-tinymce {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden;
    border: 1px solid #d7dee8 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

.product-editor-modern .file-input,
.product-editor-modern .file-input-new,
.product-editor-modern .file-input.has-error {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.product-editor-modern .table-responsive {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

.product-editor-modern .add-product-price-table {
    margin-bottom: 0;
}

.product-editor-modern .mce-edit-area iframe,
.product-editor-modern .tox-edit-area iframe {
    height: 135px !important;
    min-height: 135px !important;
}

.product-editor-modern .product-description-label,
.product-editor-modern .image-label {
    min-height: 0 !important;
}

.product-editor-modern .product-brochure-field {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #eef2f7;
}

.product-editor-modern .product-pricing-card .clearfix {
    display: none;
}

.product-editor-modern .product-summary-option,
.product-editor-modern .product-summary-field {
    min-height: 62px;
}

.product-editor-modern .product-summary-option {
    display: flex;
    align-items: center;
}

    .product-editor-modern .product-summary-option .form-group,
    .product-editor-modern .product-summary-option .checkbox {
        width: 100%;
        margin: 9px 0 0;
    }

    .product-editor-modern .product-summary-option br {
        display: none;
    }

.product-editor-modern .product-summary-field .form-group {
    margin-bottom: 8px;
}

.product-editor-modern .product-pricing-card > .tw-p-2 > .tw-flow-root > div > .tw-align-middle > .row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
}

.product-editor-modern #product_form_part {
    flex: 0 0 100%;
    width: 100%;
}

@media (max-width: 991px) {
    .product-editor-modern .product-summary-option,
    .product-editor-modern .product-summary-field {
        width: 50%;
    }
}

@media (max-width: 600px) {
    .product-editor-modern .product-summary-option,
    .product-editor-modern .product-summary-field {
        width: 100%;
        min-height: 0;
    }
}

.product-editor-modern .blue-header th,
.product-editor-modern .add-product-price-table .blue-header th {
    border-color: #fb923c !important;
    color: #fff !important;
    background-color: #f97316 !important;
}

.product-editor-modern #add_variation,
.product-editor-modern .btn-primary,
.product-editor-modern .file-input .btn-file,
.product-editor-modern .fileinput-upload-button {
    border-color: #f97316 !important;
    color: #fff !important;
    background: #f97316 !important;
}

    .product-editor-modern #add_variation:hover,
    .product-editor-modern .btn-primary:hover,
    .product-editor-modern .file-input .btn-file:hover,
    .product-editor-modern .fileinput-upload-button:hover {
        border-color: #ea580c !important;
        background: #ea580c !important;
    }

.product-editor-modern .active-cell {
    border-color: #f97316 !important;
}

.product-editor-modern .add-product-price-table > thead > tr > th {
    border-color: #fb923c;
    background: #f97316;
}

.product-editor-modern #product_form_part {
    margin-bottom: 4px;
}

.product-editor-modern .product-form-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    padding: 4px 6px 12px;
}

.product-save-btn {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 14px;
    border: 1px solid #f97316;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.product-save-btn-secondary {
    color: #f97316;
    background: #fff;
}

    .product-save-btn-secondary:hover,
    .product-save-btn-secondary:focus {
        color: #fff;
        background: #f97316;
    }

.product-save-btn-primary {
    color: #fff;
    background: #f97316;
}

    .product-save-btn-primary:hover,
    .product-save-btn-primary:focus {
        border-color: #ea580c;
        color: #fff;
        background: #ea580c;
    }

.product-save-btn:disabled {
    cursor: not-allowed;
    border-color: #cbd5e1;
    color: #94a3b8;
    background: #f8fafc;
    opacity: 1;
}

@media (max-width: 767px) {
    .product-editor-modern .tw-align-middle {
        padding: 10px 12px 5px !important;
    }

    .product-editor-modern .product-form-actions {
        padding-left: 0;
        padding-right: 0;
    }

    .product-save-btn {
        flex: 1 1 auto;
    }
}

@media (max-width: 767px) {
    .content-header .label-header-actions {
        position: static;
        flex-wrap: wrap;
        margin-top: 10px;
    }

    .labels-modern .tw-align-middle {
        padding: 10px !important;
    }

    .labels-modern .table-responsive,
    .labels-modern .tw-align-middle {
        overflow-x: auto;
    }
}

.product-header-btn-primary {
    color: #fff !important;
    background: #f97316;
}

    .product-header-btn-primary:hover,
    .product-header-btn-primary:focus {
        border-color: #ea580c;
        color: #fff !important;
        background: #ea580c;
    }

.product-header-btn-secondary {
    color: #f97316 !important;
    background: #fff;
}

    .product-header-btn-secondary:hover,
    .product-header-btn-secondary:focus {
        color: #fff !important;
        background: #f97316;
    }

@media (max-width: 767px) {
    .content-header .product-header-actions {
        position: static;
        flex-wrap: wrap;
        margin-top: 10px;
    }
}

@media (max-width: 767px) {
    .import-contact-actions {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
    }

    .import-contact-file {
        min-width: 0;
    }

    .import-contact-buttons {
        flex-wrap: wrap;
        padding-bottom: 0;
    }
}

.bg-danger {
    background-color: #f2dede !important;
}

.btn-big {
    padding: 10px 30px;
    font-size: 18px;
    line-height: 1.3333333;
}

.of-visible {
    overflow: visible !important;
}

#online_indicator {
    font-size: 8px;
    vertical-align: middle;
}

.pt-0 {
    padding-top: 0px;
}

.f-right {
    float: right;
}

.mb-10 {
    margin-bottom: 10px;
}

.discount-badge {
    position: absolute;
    top: 6px;
    right: 10px;
    font-size: 18px;
    padding: 7px;
}

.discount-badge-small {
    position: absolute;
    top: -2px;
    left: 10px;
    font-size: 12px;
    padding: 6px;
}

.product-info-table td, .product-info-table th {
    font-size: 12px;
}

.catalogue {
    max-height: 127px;
    margin: auto;
    margin-bottom: 18px;
}

.catalogue-title {
    display: inline-block;
    font-size: 18px;
    margin: 0;
    line-height: 1;
    margin-bottom: 10px;
}

.bg-light-gray {
    background-color: #f8f8f8 !important;
}

.p-5-5 {
    padding: 5px 5px !important;
}

.m-4 {
    margin: 4px;
}

.skin-black .main-header, .skin-black-light .main-header {
    color: #525f7f !important;
}

    .skin-black .main-header .navbar .nav .open > a {
        color: #999 !important;
    }

    .skin-black .main-header .navbar .nav > li > a:hover {
        color: #999 !important;
    }

    .skin-black .main-header .navbar > .sidebar-toggle:hover {
        color: #999 !important;
    }

.mt-0 {
    margin-top: 0 !important;
}

.table-pdf thead tr {
    background-color: #357ca5 !important;
    color: #fff;
}

    .table-pdf thead tr th {
        color: #fff !important;
    }

.blue-heading {
    background-color: #e95e19;
    color: #fff;
}

.table-pdf .odd {
    background-color: #DCE6F1;
}

.p-4 {
    padding: 4px;
}

.p-10 {
    padding: 10px !important;
}

.jquery-top-scrollbar {
    height: 6px !important;
}

    .jquery-top-scrollbar div {
        height: 6px !important;
    }

.scroll-top-bottom {
    width: 100%;
    overflow: scroll;
}

    .scroll-top-bottom::-webkit-scrollbar {
        height: 6px;
    }

.scrolltop {
    display: none;
    width: 100%;
    margin: 0 auto;
    position: fixed;
    bottom: 20px;
    right: 10px;
}

.scroll {
    position: absolute;
    right: 20px;
    bottom: 20px;
    background: #b2b2b2;
    background: rgba(178,178,178,0.7);
    padding: 7px;
    text-align: center;
    margin: 0 0 0 0;
    cursor: pointer;
    transition: 0.5s;
    -moz-transition: 0.5s;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    border-radius: 6px;
}

    .scroll:hover {
        background: rgba(178,178,178,1.0);
        transition: 0.5s;
        -moz-transition: 0.5s;
        -webkit-transition: 0.5s;
        -o-transition: 0.5s;
    }

        .scroll:hover .fas {
            padding-top: -10px;
        }

    .scroll .fas {
        font-size: 25px;
        margin-top: -5px;
        margin-left: 1px;
        transition: 0.5s;
        -moz-transition: 0.5s;
        -webkit-transition: 0.5s;
        -o-transition: 0.5s;
    }

.f-left {
    float: left;
}

.align-left {
    text-align: left;
}

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

.table-pdf {
    border-collapse: collapse;
    width: 100%;
    border-spacing: 8px 10px;
}

.td-border td, .td-border th {
    border-bottom: 1px solid lightgrey;
    padding: 8px 5px;
}

.ws-nowrap {
    white-space: nowrap;
}

.btn-app > .fas, .btn-app > .fab {
    font-size: 20px;
    display: block;
}

.dropdown-menu > li > a > .fas {
    margin-right: 6px;
}

.mt-5 {
    margin-top: 5px !important;
}
/* pos-form-actions: see full definition at bottom of file */
.mb-12 {
    margin-bottom: 12px !important;
}

.pb-0 {
    padding-bottom: 0px !important;
}

.pr-12 {
    padding-right: 12px !important;
}

.main-header .sidebar-toggle:before {
    content: "" !important;
}

.ui-autocomplete {
    max-height: 300px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
}

.margin-bottom-20 {
    margin-bottom: 20px !important;
}

.text-white {
    color: #fff;
}

.wizard > .steps > ul > li {
    width: 33.33% !important;
}

.wizard > .content {
    /* background: #445867 !important; */
}

legend {
    color: #fff;
    margin-bottom: 6px;
    border-bottom: none;
}

.left-col {
    background: linear-gradient(0deg,rgba(0, 0, 0, 0.76),rgba(51, 51, 51, 0.32)),url(../img/home-bg.jpg);
    text-align: center;
    background-size: cover;
    background-position: center;
}

.left-col-content {
    color: #1A7BF9;
    width: 100%;
}

.login-header {
    font-size: 27px;
    font-weight: 600;
}

    .login-header a {
        color: #fff;
    }

.form-header {
    font-size: 18px;
    margin: 16px 0;
}

.btn-login {
    padding: 6px 52px !important;
}


/* .right-col label {
  color: #fff;
}

.right-col a, .text-white a {
  color: #fff;
  font-weight: 600;
  font-size: 15px
}
.right-col a:hover, .text-white a:hover {
  color: #ccc;
}
.right-col-content {
  padding: 10% 16%;
  padding-bottom: 3%;
}
.right-col-content-register {
  padding: 2% 8%;
} */

.input_inline {
    width: 100%;
    display: inline-flex;
}

    .input_inline input, .input_inline span {
        width: 50%;
    }

.bg-manufacturing {
    background-color: #ff851b;
}

.img-thumbnail {
    position: relative;
    width: 70px;
    height: 70px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 2px;
    transition: border .2s ease-in-out;
    padding: 4px;
    margin: 3px;
    text-align: center;
}

    .img-thumbnail > .badge {
        position: absolute;
        top: -5px;
        right: -7px;
        font-size: 9px;
        font-weight: 400;
        cursor: pointer;
    }

.navbar-nav > .notifications-menu > .dropdown-menu > li .menu {
    max-height: 350px;
}

.bg-aqua-lite {
    background-color: #7FFFD4;
}

.navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a {
    white-space: normal;
}

.spacer {
    margin-top: 20px;
}
/* #product_list_body: see full definition at bottom of file */
.div-overlay {
    cursor: not-allowed;
    background: #e9e9e9;
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.5;
}

.d-inline-table {
    display: inline-table;
}

.label-round {
    font-size: 8px;
    border-radius: 44%;
}

.table > tbody + tbody {
    border-top: 0;
}

.table-pl-12 td, .table-pl-12 th {
    padding-left: 12px !important;
}

table tbody td.pl-20-td {
    padding-left: 20px !important;
}

table.table-border-center > tbody > tr > td:first-child,
table.table-border-center > thead > tr > th:first-child,
table.table-border-center > tfoot > tr > td:first-child {
    border-right: 1px solid darkgray;
}

table.table-border-center-col > tbody > tr > td:nth-child(2),
table.table-border-center-col > thead > tr > th:nth-child(2),
table.table-border-center-col > tfoot > tr > td:nth-child(2) {
    border-right: 1px solid darkgray;
    border-left: 1px solid darkgray;
}

.bg-transparent {
    background-color: transparent !important;
}

.mb-0 {
    margin-bottom: 0;
}

.nav-tabs > li > a {
    font-size: 14px;
    font-weight: 600;
}

.table-transparent, .table-transparent th {
    background-color: transparent !important;
    color: #000 !important;
}

.td-full-width {
    white-space: nowrap;
}

.font-17 {
    font-size: 17px !important;
}

table.dataTable tbody > tr.selected {
    background-color: #B0BED9;
}

tr.footer-total > td {
    vertical-align: middle !important;
}

.error {
    color: red !important;
}
/*  pos tab */
div.pos-tab-container {
    z-index: 10;
    background-color: #ffffff;
    padding: 0 !important;
    border-radius: 4px;
    -moz-border-radius: 4px;
    border: 1px solid #ddd;
    margin-bottom: 28px;
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
    -moz-box-shadow: 0 6px 12px rgba(0,0,0,.175);
    background-clip: padding-box;
}

div.pos-tab-menu {
    padding-right: 0;
    padding-left: 0;
    padding-bottom: 0;
}

    div.pos-tab-menu div.list-group {
        margin-bottom: 0;
    }

        div.pos-tab-menu div.list-group > a {
            margin-bottom: 0;
        }

            div.pos-tab-menu div.list-group > a .glyphicon,
            div.pos-tab-menu div.list-group > a .fa {
                color: var(--theme-800, #5A55A3);
            }

            div.pos-tab-menu div.list-group > a:first-child {
                border-top-right-radius: 0;
                -moz-border-top-right-radius: 0;
            }

            div.pos-tab-menu div.list-group > a:last-child {
                border-bottom-right-radius: 0;
                -moz-border-bottom-right-radius: 0;
            }


            /* div.pos-tab-menu div.list-group>a.active,
div.pos-tab-menu div.list-group>a.active .glyphicon,
div.pos-tab-menu div.list-group>a.active .fa{
  background-color: #3c8dbc;
  color: #ffffff;
    border-color: #3c8dbc;
} */

            div.pos-tab-menu div.list-group > a.active,
            div.pos-tab-menu div.list-group > a.active .glyphicon,
            div.pos-tab-menu div.list-group > a.active .fa {
                background: linear-gradient(to right, var(--theme-700, #6366f1), var(--theme-900, #3b82f6));
                color: #ffffff;
                border-color: transparent;
            }


                div.pos-tab-menu div.list-group > a.active:after {
                    /* content: ''; */
                    position: absolute;
                    left: 100%;
                    top: 50%;
                    margin-top: -13px;
                    border-left: 0;
                    border-bottom: 13px solid transparent;
                    border-top: 13px solid transparent;
                    border-left: 10px solid var(--theme-800, #3c8dbc);
                }

div.pos-tab-content {
    background-color: #ffffff;
    /* border: 1px solid #eeeeee; */
    padding-left: 20px;
    padding-top: 20px;
}

div.pos-tab div.pos-tab-content:not(.active) {
    display: none;
}

.add-product-price-table th {
    background-color: #5cb85c;
    color: white;
}

.blue-header th {
    background-color: #3c8dbc;
    color: white;
}

.table-th-green th {
    background-color: #5cb85c;
    color: white;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
}

.active-cell {
    border: 2px dotted #3c8dbc !important;
}

.cursor-pointer {
    cursor: pointer !important;
}

.pos_product_div {
    overflow-y: auto;
    overflow-x: hidden;
}

.bg-lightgray {
    background-color: #F0EDED !important;
}

.balance_due_box > li {
    padding: 11px 5px 0px 5px;
}

.option-div {
    padding: 15px;
    background-color: #d2d6de;
    color: #333;
    border: 1px solid #d2d6de;
    cursor: pointer;
}

    .option-div input[type="radio"] {
        display: none;
    }

.option-div-group .icon {
    color: #d33724;
    display: none;
}

.option-div-group .option-div:hover {
    border: 1px solid gray;
}

.option-div-group .active .icon {
    display: block;
}

.margin-left-10 {
    margin-left: 10px;
}

.margin-bottom-12 {
    margin-bottom: 12px;
}

.bg-info {
    background-color: #00c0ef !important;
}

    .bg-info > a {
        color: #FFFFFF !important;
    }

        .bg-info > a:hover {
            background-color: #337ab7 !important;
        }

ul.dt-button-collection {
    background-color: #00c0ef;
}

td.details-control {
    background: url('/img/details_open.png') no-repeat center center;
    cursor: pointer;
}

tr.details td.details-control {
    background: url('/img/details_close.png') no-repeat center center;
}

.icheckbox_square-blue, .iradio_square-blue {
    margin-right: 10px;
}

.header-right-div {
    right: 10px;
    float: right;
    position: absolute;
    top: 15px;
}

.header-left-div {
    margin-top: 15px;
    display: inline-flex;
}

.m-8 {
    margin: 8px;
}

.mt-10 {
    margin-top: 10px;
}

.mt-15 {
    margin-top: 15px;
}

.m-5 {
    margin: 5px;
}

.icon-link {
    text-align: center;
    display: block;
    margin-bottom: 18px;
}

    .icon-link > a {
        display: grid;
    }

    .icon-link > .badge {
        position: absolute;
        top: 20px;
        right: 67px;
    }

.link-des {
    display: inline-block;
    text-align: left;
}

.navbar-nav > .user-menu > .dropdown-menu > li.user-header > img {
    border: none;
    height: auto;
    width: 100%;
    max-height: 120px;
}

.bg-light-green {
    background-color: #98D973 !important;
    color: #fff !important
}

.hover-q {
    font-size: 16px;
    margin-left: 3px;
    cursor: help;
}

.input-group-addon .hover-q {
    margin-left: 0px;
}

.text-bold {
    font-weight: bold;
}

.tour .popover-content {
    padding: 18px 14px;
}

.table-slim > tbody > tr > td, .table-slim > tbody > tr > th, .table-slim > tfoot > tr > td, .table-slim > tfoot > tr > th, .table-slim > thead > tr > td, .table-slim > thead > tr > th {
    padding: 1px;
}

/* Custom scroll bar start*/

/* width */
/* ::-webkit-scrollbar {
    width: 7px;
} */

/* Track */
/* ::-webkit-scrollbar-track {
    background: #f1f1f1; 
} */

/* Handle */
/* ::-webkit-scrollbar-thumb {
    background: #888; 
} */

/* Handle on hover */
/* ::-webkit-scrollbar-thumb:hover {
    background: #555; 
} */

/* Custom scroll bar end*/

/* .product_cell, .product_cell_div: unused, removed */

/*CSS to print receipts*/
.print_section {
    display: none;
}

@media print {
    .print_section {
        display: inline !important;
    }

    .modal-xl {
        width: 100% !important;
    }

    ::-webkit-scrollbar {
        display: none !important;
    }

    #toast-container {
        display: none;
    }
}

.input-number .btn-default {
    background-color: white;
    padding: 6px 9px;
}

.width-50 {
    width: 50% !important;
}

.width-40 {
    width: 40% !important;
}

.width-60 {
    width: 60% !important;
}

.width-100 {
    width: 100% !important;
}

.font-30 {
    font-size: 30px !important;
}

.font-23 {
    font-size: 23px !important;
}

.padding-5 {
    padding: 5px !important;
}

.padding-10 {
    padding: 10px !important;
}

.padding-side-15 {
    /*padding-left: 15px !important;
    padding-right: 15px !important;*/
}

.text-muted-imp {
    color: #A3A3A3 !important;
}

.table-no-top-cell-border td {
    border-top: 0px !important;
    border-bottom: 0px !important;
}

.table-no-top-cell-border th {
    border-top: 0px !important;
    border-bottom: 0px !important;
}

.table-no-side-cell-border td {
    border-left: 0px !important;
    border-right: 0px !important;
}

.table-no-side-cell-border th {
    border-left: 0px !important;
    border-right: 0px !important;
}

.color-555 {
    color: #555555 !important;
}

    .color-555 * {
        color: #555555 !important;
    }

.color-white {
    color: white !important;
}

.col-no-padding {
    padding-left: 0px;
    padding-right: 0px;
}

.col-2px-padding {
    padding: 2px;
}

.pos-express-btn {
    font-size: 23px !important;
    overflow: hidden !important;
    height: 73px !important;
    white-space: normal;
}

/* Primary action button icon+label alignment fix */
#pos-finalize,
.pos-express-finalize,
#pos-cancel,
#pos-delete {
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
}

    #pos-finalize i,
    .pos-express-finalize i,
    #pos-cancel i,
    #pos-delete i {
        line-height: 1;
        vertical-align: middle;
        display: inline-block;
        flex-shrink: 0;
    }

/* Totals bar: info icon matches label text size */
.pos_totals_label .fa-info-circle {
    font-size: 11px !important;
    vertical-align: middle;
    line-height: 1;
}

/* Cart header: info icon matches header text size (11px) */
#pos_table thead .hover-q {
    font-size: 11px !important;
    vertical-align: middle;
}

/* Cart row remove button centering (used with Tailwind touch classes in blade) */
.pos_remove_row {
    line-height: 1;
}

.word-wrap {
    word-wrap: break-word !important;
}

.modal-xl {
    width: 90%; /* respsonsive width */
    margin-left: auto !important;
    margin-right: auto !important;
}

table.ajax_view tbody tr {
    cursor: pointer;
}

.bg-white {
    background-color: #fff;
}

.product-thumbnail-small {
    height: 50px;
    width: 50px;
}

table.table-text-center td, table.table-text-center th {
    vertical-align: middle !important;
}
/* .product_list, .product_box base+hover+active, .image-container, .image-container img: moved to Tailwind in blade */
.eq-height-row {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
}

.eq-height-col {
    display: flex;
}
/* .product_box .text_div, .text, .product_price, .product_out_of_stock base: moved to Tailwind in blade */
.product_box.product_out_of_stock .text,
.product_box.product_out_of_stock .text-muted,
.product_box.product_out_of_stock .product_price {
    color: #9ca3af !important;
}

.small-box.bg-gray:hover {
    color: #000;
    text-decoration: none;
}

#calendar table tbody td {
    cursor: pointer;
}

.min-height-90hv {
    min-height: 90vh !important;
}

/* Grow Shadow */
.hvr-grow-shadow {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: box-shadow, transform;
    transition-property: box-shadow, transform;
}

    .hvr-grow-shadow:hover, .hvr-grow-shadow:focus, .hvr-grow-shadow:active {
        box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }

.text-link {
    cursor: pointer;
}

    .text-link:hover {
        text-decoration: underline;
    }

.v-center {
    vertical-align: middle !important;
}

.bg-woocommerce {
    background-color: #9E458B !important;
}

/*.box, .info-box, .nav-tabs-custom, .external-event{
  box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2) !important;
}*/

.user_avatar {
    border-radius: 50%;
    width: 25px;
    height: 25px;
    margin: 1px;
}

.fs-10 {
    font-size: 10px;
}

.timeline-lode-more-btn {
    margin-left: 50px;
    margin-top: 25px;
    padding-right: 12px;
    padding-left: 12px;
}

.pa-0 {
    padding: 0px !important;
}

.mt-56 {
    margin-top: 56px !important;
}

.m-2 {
    margin: 2px !important;
}

.treeview-menu i {
    display: none !important;
}

.treeview-menu a {
    padding-left: 25px !important;
    font-size: 95% !important;
}

    .treeview-menu a::before {
        content: "\2192 ";
    }

/* pos-form-actions mobile: see definition at bottom of file */
.mr-8 {
    margin-right: 8px !important;
}

/* pos_form_totals responsive: see definition at bottom of file */

.swal-modal .swal-text {
    text-align: center;
}

/* pos-total: see definition at bottom of file */
.mb-40 {
    margin-bottom: 40px !important;
}

@media print {
    a:after {
        content: '';
    }

    a[href]:after {
        content: none !important;
    }
}

.fa-times {
    font-size: 30px
}

.mb-5 {
    margin-bottom: 5px !important;
}

.tree-actions {
    margin-left: 20px;
    display: none;
}

.jstree-hovered .tree-actions {
    display: inherit;
}

/* Variation Table Column Widths */
.variation_value_table th:nth-child(3),
.variation_value_table td:nth-child(3) {
    min-width: 200px;
}

/* Variation Image Upload Styles */
.variation-image-cell {
    width: 50px;
    min-width: 50px;
    max-width: 60px;
    text-align: center;
}

.variation-image-upload {
    position: relative;
}

.variation-upload-btn {
    position: relative;
    min-width: 36px;
}

    .variation-upload-btn .image-count-badge {
        position: absolute;
        top: -8px;
        right: -8px;
        background: #ff6b6b;
        color: white;
        border-radius: 50%;
        width: 18px;
        height: 18px;
        font-size: 10px;
        line-height: 18px;
        text-align: center;
    }

.variation-image-preview {
    max-width: 200px;
}

    .variation-image-preview .preview-thumb img {
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }

.existing-images .img-thumbnail {
    max-width: 50px;
    max-height: 50px;
    overflow: hidden;
}

    .existing-images .img-thumbnail img {
        width: 100%;
        height: auto;
    }

/* pos-form-actions: base styles moved to Tailwind in blade */

@media (max-width: 1024px) {
    .pos_form_totals {
        margin-bottom: 54px;
    }
}

/* pos-total: base styles moved to Tailwind in blade */

/* pos-nav-divider + pos_header_more_options: moved to Tailwind in blade */

/* Slim scrollbars for the main content and scrollable tables */
/* Compact DataTables pagination */
.dataTables_wrapper .dataTables_paginate .pagination {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin: 0;
}

    .dataTables_wrapper .dataTables_paginate .pagination > li > a,
    .dataTables_wrapper .dataTables_paginate .pagination > li > span {
        min-width: 28px;
        height: 28px;
        padding: 5px 8px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 0 !important;
        border-radius: 6px !important;
        background: transparent !important;
        color: #64748b !important;
        font-size: 12px;
        line-height: 1;
        box-shadow: none !important;
    }

    .dataTables_wrapper .dataTables_paginate .pagination > li.active > a,
    .dataTables_wrapper .dataTables_paginate .pagination > li.active > span {
        background: #fff0e6 !important;
        color: #f97316 !important;
        border: 1px solid #fed7aa !important;
    }

    .dataTables_wrapper .dataTables_paginate .pagination > li:not(.active):not(.disabled) > a:hover,
    .dataTables_wrapper .dataTables_paginate .pagination > li:not(.active):not(.disabled) > span:hover {
        background: #f8fafc !important;
        color: #334155 !important;
    }

    .dataTables_wrapper .dataTables_paginate .pagination > li.disabled > a,
    .dataTables_wrapper .dataTables_paginate .pagination > li.disabled > span {
        color: #94a3b8 !important;
        cursor: default;
    }

.dataTables_wrapper .dataTables_info {
    color: #94a3b8;
    font-size: 12px;
}

.app-main-footer {
    flex: 0 0 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    width: 100%;
    background: #ffffff;
    border-top: 1px solid #e5e7eb;
}

    .app-main-footer p {
        margin: 0;
    }

html,
body,
#scrollable-container,
.table-responsive,
.dataTables_scrollBody,
.dataTables_scrollHead,
.dataTables_scrollFoot {
    scrollbar-width: thin;
    scrollbar-color: #7c7c7c #f1f1f1;
}

    html::-webkit-scrollbar,
    body::-webkit-scrollbar,
    #scrollable-container::-webkit-scrollbar,
    .table-responsive::-webkit-scrollbar,
    .dataTables_scrollBody::-webkit-scrollbar,
    .dataTables_scrollHead::-webkit-scrollbar,
    .dataTables_scrollFoot::-webkit-scrollbar {
        width: 5px;
        height: 5px;
    }

    html::-webkit-scrollbar-track,
    body::-webkit-scrollbar-track,
    #scrollable-container::-webkit-scrollbar-track,
    .table-responsive::-webkit-scrollbar-track,
    .dataTables_scrollBody::-webkit-scrollbar-track,
    .dataTables_scrollHead::-webkit-scrollbar-track,
    .dataTables_scrollFoot::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    html::-webkit-scrollbar-thumb,
    body::-webkit-scrollbar-thumb,
    #scrollable-container::-webkit-scrollbar-thumb,
    .table-responsive::-webkit-scrollbar-thumb,
    .dataTables_scrollBody::-webkit-scrollbar-thumb,
    .dataTables_scrollHead::-webkit-scrollbar-thumb,
    .dataTables_scrollFoot::-webkit-scrollbar-thumb {
        background: #7c7c7c;
        border-radius: 5px;
        border: 0;
    }

        html::-webkit-scrollbar-thumb:hover,
        body::-webkit-scrollbar-thumb:hover,
        #scrollable-container::-webkit-scrollbar-thumb:hover,
        .table-responsive::-webkit-scrollbar-thumb:hover,
        .dataTables_scrollBody::-webkit-scrollbar-thumb:hover,
        .dataTables_scrollHead::-webkit-scrollbar-thumb:hover,
        .dataTables_scrollFoot::-webkit-scrollbar-thumb:hover {
            background: #666666;
        }

    /* Let compact DataTables fill their card without shrinking genuinely wide tables.
   Using min-width preserves horizontal scrolling whenever the columns need it. */
    .table-responsive > table.table,
    .dataTables_wrapper table.dataTable {
        min-width: 100% !important;
    }

.dataTables_scrollHeadInner,
.dataTables_scrollFootInner {
    min-width: 100% !important;
}

    .dataTables_scrollHeadInner > table.dataTable,
    .dataTables_scrollBody > table.dataTable,
    .dataTables_scrollFootInner > table.dataTable {
        min-width: 100% !important;
    }

/* ===== POS Footer ===== */
/* pos-footer-divider: base styles moved to Tailwind in blade */
body.lockscreen .pos-footer-secondary button {
    opacity: 0.85;
    transition: opacity 0.12s;
    flex-shrink: 0;
}

    body.lockscreen .pos-footer-secondary button:hover {
        opacity: 1;
    }

body.lockscreen .pos-footer-secondary .col-xs-6,
body.lockscreen .pos-form-actions .col-xs-6 {
    width: auto !important;
    float: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    min-height: 0 !important;
}

@media (min-width: 768px) and (max-width: 1279px) {
    body.lockscreen .pos-footer-secondary {
        gap: 6px !important;
    }

    body.lockscreen .pos-total span.tw-text-base.md\:tw-text-xl,
    body.lockscreen .pos-total span {
        font-size: 15px !important;
    }

    body.lockscreen #recent-transactions {
        font-size: 0 !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

        body.lockscreen #recent-transactions i {
            font-size: 14px !important;
        }
}
/* ===== End POS Footer ===== */

/* ===== POS Layout Spacing ===== */
body.lockscreen #scrollable-container {
    overflow: hidden !important;
}

body.lockscreen .content {
    padding: 2px 8px 0 8px !important;
}

body.lockscreen .pos-header {
    padding: 0 8px !important;
    margin: 0 !important;
}

    body.lockscreen .pos-header > div {
        margin-bottom: 2px !important;
    }

#add_pos_sell_form,
#edit_pos_sell_form {
    margin: 0 !important;
}

    #add_pos_sell_form .box-body.pb-0,
    #edit_pos_sell_form .box-body.pb-0 {
        padding: 0 !important;
        padding-top: 6px !important;
    }

body.lockscreen .pos_product_div,
body.lockscreen .pos_product_div table,
body.lockscreen .pos_form_totals {
    margin: 0 !important;
    padding-bottom: 0 !important;
}
/* ===== End POS Layout Spacing ===== */

/* ===== POS Form Top Section Compact ===== */
#add_pos_sell_form .box-body.pb-0 > .row,
#edit_pos_sell_form .box-body.pb-0 > .row {
    margin: 0 !important;
    padding-left: 8px;
    padding-right: 8px;
}

    #add_pos_sell_form .box-body.pb-0 > .row:first-child,
    #edit_pos_sell_form .box-body.pb-0 > .row:first-child {
        padding-top: 6px;
    }

    #add_pos_sell_form .box-body.pb-0 > .row .form-group,
    #edit_pos_sell_form .box-body.pb-0 > .row .form-group {
        margin-bottom: 4px !important;
        margin-top: 0 !important;
    }

    #add_pos_sell_form .box-body.pb-0 > .row:has(.pos_product_div),
    #edit_pos_sell_form .box-body.pb-0 > .row:has(.pos_product_div) {
        padding: 0 !important;
    }

    #add_pos_sell_form .box-body.pb-0 > .row .form-control,
    #edit_pos_sell_form .box-body.pb-0 > .row .form-control {
        height: 32px;
        font-size: 13px;
        padding: 4px 8px;
    }

    #add_pos_sell_form .box-body.pb-0 > .row .input-group-addon,
    #edit_pos_sell_form .box-body.pb-0 > .row .input-group-addon {
        padding: 4px 8px;
        font-size: 13px;
    }

    #add_pos_sell_form .box-body.pb-0 > .row .input-group-btn .btn,
    #edit_pos_sell_form .box-body.pb-0 > .row .input-group-btn .btn {
        height: 32px;
        /* padding: 4px 8px; */
    }
/* ===== End POS Form Top Section Compact ===== */

/* #product_list_body: moved to Tailwind in blade */

/* ===== POS Cart Clean Table ===== */
/* #pos_table base + thead th: moved to Tailwind in blade */
body.lockscreen #pos_table > tbody > tr > td {
    border-top: 1px solid #e8edf2 !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    overflow: hidden;
    word-break: break-word;
}

body.lockscreen #pos_table > tbody > tr:nth-child(odd) {
    background: #ffffff !important;
}

body.lockscreen #pos_table > tbody > tr:nth-child(even) {
    background: #f8fafc !important;
}

body.lockscreen #pos_table > tbody > tr:hover {
    background: #eff6ff !important;
}

body.lockscreen #pos_table td {
    width: auto !important;
}

body.lockscreen #pos_table .form-control {
    width: 100% !important;
    box-sizing: border-box;
}

body.lockscreen #pos_table .input-group {
    width: 100%;
}

    body.lockscreen #pos_table .input-group .form-control {
        min-width: 0;
    }

body.lockscreen #pos_table select.form-control {
    width: 100% !important;
}

body.lockscreen #pos_table > tbody > tr.product_row > td {
    padding: 4px 8px !important;
    vertical-align: middle !important;
    font-size: 13px;
    line-height: 1.4;
}

body.lockscreen #pos_table .form-control,
body.lockscreen #pos_table .input-group .form-control.pos_quantity,
body.lockscreen #pos_table .input-group .form-control.pos_unit_price_inc_tax,
body.lockscreen #pos_table .form-control.pos_line_total {
    height: 32px;
    font-size: 13px;
    font-weight: 500;
    padding: 2px 8px;
    color: #1e293b;
    border-color: #cbd5e1;
    border-radius: 0 !important;
    font-family: inherit;
}

body.lockscreen #pos_table .input-group-btn .btn {
    border-radius: 0 !important;
    height: 32px;
    padding: 0 10px;
    font-size: 14px;
    line-height: 32px;
}

body.lockscreen #pos_table .display_currency.pos_line_total_text {
    font-size: 13px;
    font-weight: 500;
    color: #1e293b;
    font-family: inherit;
    display: block;
    text-align: center;
}

body.lockscreen #pos_table .sub_unit {
    height: 26px !important;
    font-size: 11px !important;
    padding: 0 4px !important;
    margin-top: 2px;
}

body.lockscreen #pos_table .lot_number {
    height: 26px !important;
    font-size: 11px !important;
    padding: 0 4px !important;
    margin-top: 2px;
}
/* ===== End POS Cart Clean Table ===== */

/* ===== POS Totals Section: all styles now in blade (Tailwind + inline) ===== */
body.lockscreen .pos_totals_cell.hide {
    display: none !important;
}

/* ===== POS Cart Delete Button ===== */
/* .fa-times font-size + th:last-child .fa-times: moved to Tailwind in blade */
body.lockscreen #pos_table td:last-child {
    padding: 4px 8px 4px 0 !important;
    text-align: right !important;
    vertical-align: middle !important;
}

body.lockscreen #pos_table > tbody > tr.product_row > td:last-child {
    padding: 4px 8px 4px 0 !important;
    text-align: right !important;
}
/* pos_remove_row + pos-unit-label: moved to Tailwind in blade */
/* ===== End POS Cart Delete Button + Unit Label ===== */

/* ===== POS Column Widths + Header Action Icon: moved to Tailwind in blade ===== */

/* ===== POS Thin Scrollbar ===== */
body.lockscreen .pos_product_div::-webkit-scrollbar,
body.lockscreen #product_list_body::-webkit-scrollbar,
#scrollable-container::-webkit-scrollbar,
body.lockscreen::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

body.lockscreen .pos_product_div::-webkit-scrollbar-track,
body.lockscreen #product_list_body::-webkit-scrollbar-track,
#scrollable-container::-webkit-scrollbar-track,
body.lockscreen::-webkit-scrollbar-track {
    background: transparent;
}

body.lockscreen .pos_product_div::-webkit-scrollbar-thumb,
body.lockscreen #product_list_body::-webkit-scrollbar-thumb,
#scrollable-container::-webkit-scrollbar-thumb,
body.lockscreen::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

    body.lockscreen .pos_product_div::-webkit-scrollbar-thumb:hover,
    body.lockscreen #product_list_body::-webkit-scrollbar-thumb:hover,
    #scrollable-container::-webkit-scrollbar-thumb:hover,
    body.lockscreen::-webkit-scrollbar-thumb:hover {
        background: #94a3b8;
    }
/* ===== End POS Thin Scrollbar ===== */

/* ===================================================================
   POS MOBILE VIEW FIXES (≤ 767px)
   =================================================================== */
@media (max-width: 767px) {
    body.lockscreen .pos-credit-sale-secondary {
        display: none !important;
    }

    body.lockscreen,
    body.lockscreen #scrollable-container {
        overflow: hidden !important;
        height: 100vh !important;
        max-height: 100vh !important;
    }

    #pos_sidebar_wrap {
        display: none !important;
    }

    body.lockscreen .pos-form-actions {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1030;
    }

    body.lockscreen #add_pos_sell_form .box-body.pb-0,
    body.lockscreen #edit_pos_sell_form .box-body.pb-0 {
        display: flex !important;
        flex-direction: column !important;
        height: calc(100vh - 60px) !important;
        max-height: calc(100vh - 60px) !important;
        min-height: 0 !important;
        overflow: hidden !important;
        padding-bottom: 125px !important;
    }

        body.lockscreen #add_pos_sell_form .box-body.pb-0 > .row:has(.pos_product_div),
        body.lockscreen #edit_pos_sell_form .box-body.pb-0 > .row:has(.pos_product_div) {
            flex: 1 1 auto !important;
            min-height: 0 !important;
            display: flex !important;
            flex-direction: column !important;
        }

            body.lockscreen #add_pos_sell_form .box-body.pb-0 > .row:has(.pos_product_div) > .pos_product_div,
            body.lockscreen #edit_pos_sell_form .box-body.pb-0 > .row:has(.pos_product_div) > .pos_product_div {
                flex: 1 1 auto !important;
                min-height: 0 !important;
            }

    body.lockscreen .pos_form_totals {
        position: static !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
    }

        body.lockscreen .pos_form_totals .pos_totals_cell.hide {
            display: none !important;
        }

    body.lockscreen .pos_product_div {
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    body.lockscreen #pos_table {
        table-layout: auto !important;
        width: 100% !important;
        min-width: 0 !important;
    }

        body.lockscreen #pos_table.table-responsive,
        body.lockscreen .table-responsive > #pos_table {
            display: table !important;
            overflow: visible !important;
            border: 0 !important;
        }

        body.lockscreen #pos_table > thead > tr,
        body.lockscreen #pos_table > tbody > tr {
            display: table-row !important;
        }

            body.lockscreen #pos_table > tbody > tr > td,
            body.lockscreen #pos_table > thead > tr > th {
                display: table-cell !important;
                vertical-align: middle !important;
                white-space: nowrap;
            }

            body.lockscreen #pos_table > tbody > tr.product_row > td {
                padding: 6px 8px !important;
                font-size: 12px;
                line-height: 1.35;
            }

        body.lockscreen #pos_table .form-control {
            font-size: 12px;
            height: 30px;
        }

        body.lockscreen #pos_table th.pos-th-product,
        body.lockscreen #pos_table th.pos-th-qty,
        body.lockscreen #pos_table th.pos-th-staff,
        body.lockscreen #pos_table th.pos-th-price,
        body.lockscreen #pos_table th.pos-th-subtotal,
        body.lockscreen #pos_table td:first-child,
        body.lockscreen #pos_table td {
            width: auto !important;
            min-width: 0 !important;
        }

        body.lockscreen #pos_table th.pos-th-product {
            min-width: 150px !important;
        }

        body.lockscreen #pos_table th.pos-th-qty {
            min-width: 110px !important;
        }

        body.lockscreen #pos_table th.pos-th-staff {
            min-width: 110px !important;
        }

        body.lockscreen #pos_table th.pos-th-price {
            min-width: 80px !important;
        }

        body.lockscreen #pos_table th.pos-th-subtotal {
            min-width: 90px !important;
        }

        body.lockscreen #pos_table .display_currency.pos_line_total_text,
        body.lockscreen #pos_table .pos_line_total_text {
            white-space: nowrap !important;
            display: inline-block !important;
            text-align: right;
        }

        body.lockscreen #pos_table .hide-on-mobile {
            display: none !important;
        }

    body.lockscreen .pos-form-actions > div,
    body.lockscreen .pos-form-actions > .row > div > div {
        padding: 4px 8px !important;
        gap: 4px !important;
        min-height: 0 !important;
    }

    body.lockscreen .pos-form-actions > .row > div > div {
        flex-direction: column !important;
        align-items: stretch !important;
    }

        body.lockscreen .pos-form-actions .md\:\!tw-hidden.tw-pos-total,
        body.lockscreen .pos-form-actions > .row > div > div > div:first-child {
            width: 100% !important;
            justify-content: center !important;
            text-align: center !important;
        }

    body.lockscreen .pos-form-actions .tw-pos-total {
        width: 100% !important;
        justify-content: center !important;
    }

        body.lockscreen .pos-form-actions .tw-pos-total > div:first-child {
            font-size: 13px !important;
        }

    body.lockscreen .pos-form-actions #total_payable {
        font-size: 16px !important;
        font-weight: 800 !important;
    }

    body.lockscreen .pos-form-actions .\!tw-w-full.md\:\!tw-hidden {
        width: 100% !important;
        gap: 6px !important;
    }

        body.lockscreen .pos-form-actions .\!tw-w-full.md\:\!tw-hidden > button {
            flex: 1 1 0 !important;
            width: auto !important;
            min-width: 0 !important;
            max-width: none !important;
            padding: 8px 4px !important;
            font-size: 12px !important;
            white-space: nowrap;
        }

    body.lockscreen .pos-footer-secondary {
        width: 100% !important;
        gap: 4px !important;
        overflow: visible !important;
        justify-content: space-between !important;
    }

        body.lockscreen .pos-footer-secondary > button {
            flex: 1 1 0 !important;
            min-width: 0 !important;
            padding: 4px 2px !important;
            font-size: 10px !important;
        }

            body.lockscreen .pos-footer-secondary > button i {
                font-size: 16px !important;
                margin-bottom: 2px;
            }

            body.lockscreen .pos-footer-secondary .pos-footer-divider,
            body.lockscreen .pos-footer-secondary .pos-total.md\:tw-flex,
            body.lockscreen .pos-footer-secondary > button.tw-hidden,
            body.lockscreen .pos-footer-secondary > button.md\:tw-flex {
                display: none !important;
            }

    #pos_header_more_options {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 6px !important;
        padding: 8px !important;
        width: 100% !important;
        background: #fff;
        border-radius: 8px;
        margin-top: 4px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    }

        #pos_header_more_options > a,
        #pos_header_more_options > button {
            width: 100% !important;
            min-width: 100% !important;
            max-width: 100% !important;
            height: auto !important;
            min-height: 36px !important;
            padding: 8px 12px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: flex-start !important;
            float: none !important;
            white-space: nowrap !important;
            overflow: hidden;
            text-overflow: ellipsis;
        }

            #pos_header_more_options > a.tw-h-8,
            #pos_header_more_options > button.tw-h-8,
            #pos_header_more_options > a.tw-h-auto,
            #pos_header_more_options > button.tw-h-auto {
                width: 100% !important;
                min-width: 100% !important;
                height: auto !important;
                min-height: 36px !important;
                padding: 8px 12px !important;
            }

            #pos_header_more_options > a > strong,
            #pos_header_more_options > button > strong {
                display: flex !important;
                align-items: center !important;
                gap: 10px !important;
                margin: 0 !important;
                font-size: 13px;
                font-weight: 500;
                color: #334155;
                width: 100%;
            }

                #pos_header_more_options > a > strong > i,
                #pos_header_more_options > button > strong > i {
                    font-size: 14px !important;
                    min-width: 18px;
                    text-align: center;
                }

                #pos_header_more_options > a > strong > span,
                #pos_header_more_options > button > strong > span {
                    display: inline !important;
                    font-size: 13px;
                    font-weight: 500;
                }

        #pos_header_more_options .pos-nav-divider {
            display: block !important;
            width: 100% !important;
            height: 1px !important;
            background: #e2e8f0;
            margin: 2px 0 !important;
        }

    .pos-header .hamburger.fa-bars {
        font-size: 18px;
        color: #334155;
        cursor: pointer;
    }
}

/* ============================================================
   POS Sidebar — drawer, cards, filter badge, subcategory strip
   ============================================================ */

/* Layout lock (desktop) */
@media (min-width: 1024px) {
    body.lockscreen #scrollable-container {
        height: 100vh !important;
        overflow: hidden !important;
    }

        body.lockscreen #scrollable-container > section.content {
            height: calc(100vh - 60px);
            overflow: hidden;
        }

            body.lockscreen #scrollable-container > section.content > .row,
            body.lockscreen #scrollable-container > section.content > .row > .col-md-12,
            body.lockscreen #scrollable-container > section.content > .row > .col-md-12 > .row.tw-flex {
                height: 100%;
            }

                body.lockscreen #scrollable-container > section.content > .row > .col-md-12 > .row.tw-flex > div:first-child > div > .box-body {
                    max-height: 100%;
                    overflow-y: auto;
                }

    #pos_sidebar_wrap {
        max-height: 100%;
        overflow: hidden;
    }
}

/* Scrollbars */
#product_list_body::-webkit-scrollbar {
    width: 8px;
}

#product_list_body::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

    #product_list_body::-webkit-scrollbar-thumb:hover {
        background: #94a3b8;
    }

/* Featured products box */
#featured_products_box:empty {
    display: none;
}

#featured_products_box:not(:empty) {
    padding: 6px 4px 4px;
    margin-bottom: 6px;
    background: linear-gradient(180deg, #fef9c3 0%, #fef3c7 100%);
    border: 1px solid #fde68a;
    border-radius: 8px;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    width: 100%;
}

    #featured_products_box:not(:empty)::before {
        content: '\f005  Featured';
        font-family: 'Font Awesome 5 Free', 'FontAwesome';
        font-weight: 900;
        display: block;
        font-size: 11px;
        color: #b45309;
        margin: 0 4px 4px;
        letter-spacing: 0.3px;
        text-transform: uppercase;
        flex-basis: 100%;
    }

#featured_products_box > .col-md-3 {
    flex: 0 0 25%;
    max-width: 25%;
}

@media (max-width: 991px) {
    #featured_products_box > .col-xs-4 {
        flex: 0 0 33.3333%;
        max-width: 33.3333%;
    }
}

/* Drawer panel */
.pos-drawer-panel {
    width: min(520px, 96vw) !important;
    padding: 0 !important;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: transform 320ms cubic-bezier(0.32, 0.72, 0, 1) !important;
}

    .pos-drawer-panel::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        z-index: 1;
    }

.pos-drawer-category::before {
    background: linear-gradient(90deg, #4f46e5, #6366f1);
}

.pos-drawer-brand::before {
    background: linear-gradient(90deg, #7c3aed, #a855f7);
}

/* Drawer body scrollbar */
.pos-drawer-body::-webkit-scrollbar {
    width: 8px;
}

.pos-drawer-body::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

    .pos-drawer-body::-webkit-scrollbar-thumb:hover {
        background: #94a3b8;
    }

/* Category / brand card */
.pos-card {
    position: relative;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    height: 78px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px 14px;
    cursor: pointer;
    overflow: hidden;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    transition: transform 180ms cubic-bezier(0.32, 0.72, 0, 1), border-color 160ms ease, box-shadow 180ms ease, background 160ms ease;
}

    .pos-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 24px -12px rgba(15,23,42,.18);
    }

    .pos-card.cat:hover {
        border-color: #818cf8;
    }

    .pos-card.brand:hover {
        border-color: #c4b5fd;
    }

    .pos-card.featured:hover {
        border-color: #fcd34d;
    }

    .pos-card.is-active.cat {
        border-color: #4f46e5;
        background: linear-gradient(180deg, #eef2ff 0%, white 65%);
    }

    .pos-card.is-active.brand {
        border-color: #7c3aed;
        background: linear-gradient(180deg, #f5f3ff 0%, white 65%);
    }

.pos-card-name {
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.3;
    margin: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
}

.pos-card-subcat-dot {
    position: absolute;
    bottom: 5px;
    right: 7px;
    font-size: 10px;
    color: #a5b4fc;
    line-height: 1;
    pointer-events: none;
}

    .pos-card-subcat-dot::after {
        content: '▾';
    }

.pos-card-grid [class*="col-"] {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

/* Card entrance stagger */
@keyframes pos-card-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

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

.pos-card-grid.is-animating > [class*="col-"] > .pos-card {
    animation: pos-card-in 320ms cubic-bezier(0.32, 0.72, 0, 1) both;
}

.pos-card-grid.is-animating > [class*="col-"]:nth-child(1) > .pos-card {
    animation-delay: 20ms;
}

.pos-card-grid.is-animating > [class*="col-"]:nth-child(2) > .pos-card {
    animation-delay: 50ms;
}

.pos-card-grid.is-animating > [class*="col-"]:nth-child(3) > .pos-card {
    animation-delay: 80ms;
}

.pos-card-grid.is-animating > [class*="col-"]:nth-child(4) > .pos-card {
    animation-delay: 110ms;
}

.pos-card-grid.is-animating > [class*="col-"]:nth-child(5) > .pos-card {
    animation-delay: 140ms;
}

.pos-card-grid.is-animating > [class*="col-"]:nth-child(6) > .pos-card {
    animation-delay: 170ms;
}

.pos-card-grid.is-animating > [class*="col-"]:nth-child(7) > .pos-card {
    animation-delay: 200ms;
}

.pos-card-grid.is-animating > [class*="col-"]:nth-child(8) > .pos-card {
    animation-delay: 230ms;
}

.pos-card-grid.is-animating > [class*="col-"]:nth-child(9) > .pos-card {
    animation-delay: 260ms;
}

.pos-card-grid.is-animating > [class*="col-"]:nth-child(n+10) > .pos-card {
    animation-delay: 290ms;
}

/* Active filter badge */
.pos-active-filter-badge {
    display: none !important;
}

    .pos-active-filter-badge.is-active {
        display: inline-flex !important;
        align-items: center;
        animation: pos-card-in 200ms cubic-bezier(0.32, 0.72, 0, 1) both;
    }

        .pos-active-filter-badge.is-active ~ .pos-count-badge {
            display: none !important;
        }

.pos-filter-chip-clear {
    width: 14px;
    height: 14px;
    border-radius: 999px;
    border: none;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: transparent;
    transition: all 140ms ease;
}

    .pos-filter-chip-clear:hover {
        background: #fecaca !important;
        color: #b91c1c !important;
    }

/* Subcategory row-injection strip */
@keyframes pos-strip-in {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

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

.pos-subcat-strip {
    flex: 0 0 100%;
    width: 100%;
    background: #eef2ff;
    border: 1.5px solid #c7d2fe;
    border-radius: 14px;
    padding: 10px 12px;
    margin-bottom: 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    animation: pos-strip-in 240ms cubic-bezier(0.32, 0.72, 0, 1) both;
}

.pos-subcat-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 999px;
    border: 1.5px solid #a5b4fc;
    background: white;
    color: #4338ca;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
    transition: background 130ms ease, border-color 130ms ease, color 130ms ease, transform 100ms ease;
}

    .pos-subcat-pill:active,
    .pos-subcat-pill.is-active {
        background: #4f46e5;
        border-color: #4f46e5;
        color: white;
        transform: scale(0.96);
    }

.pos-subcat-pill--all {
    border-style: dashed;
}
/* ===== End POS Mobile View Fixes ===== */
/* Compact destructive confirmation used by the users table. */
.swal-modal.compact-delete-alert {
    width: 420px;
    max-width: calc(100vw - 24px);
    border-radius: 12px;
    overflow: hidden;
}

.compact-delete-alert .swal-content {
    margin: 0;
    padding: 20px 22px 18px;
    text-align: left;
}

.compact-delete-alert__content {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.compact-delete-alert__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    color: #ef4444;
    background: #fff1f2;
    border: 1px solid #fecdd3;
    border-radius: 8px;
    font-size: 16px;
}

.compact-delete-alert__message {
    min-width: 0;
    padding-top: 1px;
}

.compact-delete-alert__title {
    color: #111827;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
}

.compact-delete-alert__description {
    margin-top: 5px;
    color: #6b7280;
    font-size: 13px;
    line-height: 1.45;
}

.compact-delete-alert .swal-footer {
    margin: 0;
    padding: 11px 18px;
    border-top: 1px solid #e5e7eb;
    text-align: right;
}

.compact-delete-alert .swal-button-container {
    margin: 0 0 0 8px;
}

.compact-delete-alert .swal-button {
    min-height: 34px;
    padding: 7px 13px;
    border-radius: 6px;
    box-shadow: none !important;
    font-size: 12px;
    font-weight: 500;
}

.compact-delete-alert .swal-button--cancel {
    color: #4b5563;
    background: transparent;
}

.compact-delete-alert .swal-button--danger {
    color: #ef4444;
    background: #ffffff;
    border: 1px solid #fecaca;
}

    .compact-delete-alert .swal-button--danger:hover,
    .compact-delete-alert .swal-button--danger:focus {
        color: #dc2626;
        background: #fff7f7;
    }

/* Consistent rounded form controls and search/dropdown fields. */
input.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="time"],
input[type="search"],
select.form-control,
textarea.form-control,
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select,
.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple,
.chosen-container-single .chosen-single,
.chosen-container-multi .chosen-choices,
.bootstrap-select > .dropdown-toggle,
.select2-search__field,
.typeahead,
.tt-input {
    border-radius: 8px !important;
}

.select2-dropdown,
.chosen-container .chosen-drop,
.bootstrap-select .dropdown-menu,
.dropdown-menu,
.tt-menu,
.ui-autocomplete {
    border-radius: 8px !important;
    overflow: hidden;
}

/* Keep grouped icons/buttons joined cleanly to their input. */
.input-group > .form-control:not(:first-child):not(:last-child),
.input-group > .input-group-addon:not(:first-child):not(:last-child),
.input-group > .input-group-btn:not(:first-child):not(:last-child) > .btn {
    border-radius: 0 !important;
}

.input-group > .form-control:first-child,
.input-group > .input-group-addon:first-child,
.input-group > .input-group-btn:first-child > .btn {
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.input-group > .form-control:last-child,
.input-group > .input-group-addon:last-child,
.input-group > .input-group-btn:last-child > .btn {
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.input-group > .form-control:only-child {
    border-radius: 8px !important;
}

/* Global application typography. Icon classes retain their own font files. */
html,
body,
input,
select,
textarea,
button,
.form-control,
.btn,
.dropdown-menu,
.select2-container,
.chosen-container,
.dataTables_wrapper,
.swal-modal,
.modal,
.popover,
.tooltip {
    font-family: 'Inter', sans-serif !important;
}

    /* Compact rounded checkboxes used by native fields and the iCheck plugin. */
    input[type="checkbox"] {
        appearance: none;
        -webkit-appearance: none;
        width: 16px;
        height: 16px;
        margin: 0 5px 0 0;
        border: 1px solid #d7dde5;
        border-radius: 4px;
        background: #ffffff;
        vertical-align: -3px;
        cursor: pointer;
        position: relative;
    }

        input[type="checkbox"]:checked {
            border-color: #f97316;
            background-color: #f97316;
        }

            input[type="checkbox"]:checked::after,
            [class*="icheckbox_"].checked::after {
                content: '';
                position: absolute;
                left: 5px;
                top: 2px;
                width: 4px;
                height: 8px;
                border: solid #ffffff;
                border-width: 0 2px 2px 0;
                transform: rotate(45deg);
            }

        input[type="checkbox"]:focus-visible {
            outline: 2px solid rgba(249, 115, 22, 0.25);
            outline-offset: 2px;
        }

        input[type="checkbox"]:disabled,
        [class*="icheckbox_"].disabled {
            cursor: not-allowed;
            opacity: 0.55;
        }

[class*="icheckbox_"] {
    width: 16px !important;
    height: 16px !important;
    border: 1px solid #d7dde5 !important;
    border-radius: 4px !important;
    background: #ffffff !important;
    background-image: none !important;
    position: relative;
    vertical-align: -3px;
}

    [class*="icheckbox_"].checked {
        border-color: #f97316 !important;
        background: #f97316 !important;
    }

/* Global orange radio controls. */
input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    margin: 0 5px 0 0;
    border: 1px solid #cfd6df;
    border-radius: 50%;
    background: #ffffff;
    position: relative;
    vertical-align: -3px;
    cursor: pointer;
}

    input[type="radio"]:checked {
        border-color: #f97316;
        background: #f97316;
    }

        input[type="radio"]:checked::after,
        [class*="iradio_"].checked::after {
            content: '';
            position: absolute;
            width: 6px;
            height: 6px;
            top: 4px;
            left: 4px;
            border: 0;
            border-radius: 50%;
            background: #ffffff;
            transform: none;
        }

    input[type="radio"]:focus-visible {
        outline: 2px solid rgba(249, 115, 22, 0.25);
        outline-offset: 2px;
    }

[class*="iradio_"] {
    width: 16px !important;
    height: 16px !important;
    border: 1px solid #cfd6df !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    background-image: none !important;
    position: relative;
    vertical-align: -3px;
}

    [class*="iradio_"].checked {
        border-color: #f97316 !important;
        background: #f97316 !important;
    }

/* Standard modal actions: Close first, then the primary Save/Submit action. */
.modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

    .modal-footer > button,
    .modal-footer > .btn,
    .modal-footer > .tw-dw-btn {
        float: none !important;
        margin: 0 !important;
        height: 34px !important;
        min-height: 34px;
        max-height: 34px;
        padding: 7px 8px !important;
        border-radius: 6px !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        font-size: 12px;
        font-weight: 500;
        line-height: 1.4;
        white-space: nowrap;
        flex-shrink: 0;
        box-shadow: none !important;
    }

        .modal-footer > button[data-dismiss="modal"] {
            order: 1;
            width: 77px;
            min-width: 77px;
            color: #374151 !important;
            background: #ffffff !important;
            border: 1px solid #d8dee7 !important;
        }

            .modal-footer > button[data-dismiss="modal"]::before {
                content: none !important;
            }

            .modal-footer > button[data-dismiss="modal"]:hover,
            .modal-footer > button[data-dismiss="modal"]:focus {
                color: #111827 !important;
                background: #f9fafb !important;
                border-color: #c7ced8 !important;
            }

        .modal-footer > button[type="submit"] {
            order: 2;
            width: auto;
            min-width: 82px;
            color: #ffffff !important;
            background: #f97316 !important;
            border: 1px solid #f97316 !important;
        }

/* Pay-term is one compound field: number + period. */
.contact-modal-modern .pay_term .form-group {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
}

    .contact-modal-modern .pay_term .form-group > label {
        flex: 0 0 100%;
    }

.contact-modal-modern .pay_term .form-control.width-40 {
    width: 40% !important;
    flex: 0 0 40%;
    border-radius: 8px 0 0 8px !important;
}

.contact-modal-modern .pay_term .form-control.width-60 {
    width: 60% !important;
    flex: 0 0 60%;
    border-left: 0 !important;
    border-radius: 0 8px 8px 0 !important;
}

/* Shared modern treatment for Bootstrap popups loaded anywhere in the app. */
.modal-content.project-modal-modern {
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(15,23,42,.28);
}

.project-modal-modern .modal-header {
    min-height: 62px;
    padding: 13px 18px;
    display: flex;
    align-items: center;
    gap: 11px;
    border-bottom: 1px solid #e8edf3;
    background: linear-gradient(135deg,#fff 0%,#fff8f3 100%);
}

.project-modal-modern .project-modal-title-icon {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #f97316;
    border: 1px solid #fed7aa;
    border-radius: 10px;
    background: #fff7ed;
}

    .project-modal-modern .project-modal-title-icon svg {
        width: 18px;
        height: 18px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.project-modal-modern .modal-title {
    margin: 0;
    color: #111827;
    font-size: 17px;
    font-weight: 650;
}

.project-modal-modern .modal-header .close {
    order: 3;
    margin: 0 0 0 auto;
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    border: 0;
    border-radius: 8px;
    background: transparent;
    opacity: 1;
    font-size: 0;
}

    .project-modal-modern .modal-header .close svg {
        width: 17px;
        height: 17px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
    }

.project-modal-modern .modal-body {
    padding: 13px;
    background: #f8fafc;
    max-height: calc(100vh - 180px);
    overflow-y: auto;
}

    .project-modal-modern .modal-body > form > .row,
    .project-modal-modern .modal-body > .row {
        margin: 0;
        padding: 14px 12px 2px;
        border: 1px solid #e5eaf0;
        border-radius: 11px;
        background: #fff;
    }

.project-modal-modern .form-group {
    margin-bottom: 13px;
}

.project-modal-modern .form-control,
.project-modal-modern .select2-selection {
    min-height: 36px;
    border-color: #d8e0e9 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

.project-modal-modern textarea.form-control {
    min-height: 74px;
    resize: vertical;
}

.project-modal-modern .modal-footer {
    min-height: 60px;
    padding: 12px 18px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    border-top: 1px solid #e8edf3;
    background: #fff;
}

    .project-modal-modern .modal-footer button::before {
        content: none !important;
    }

    .project-modal-modern .modal-footer svg {
        width: 15px;
        height: 15px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.9;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.project-modal-modern .modal-body {
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 transparent;
}

    .project-modal-modern .modal-body::-webkit-scrollbar {
        width: 5px;
    }

    .project-modal-modern .modal-body::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: #94a3b8;
    }

/* Page heading actions: named, compact and consistently orange. */
.content-header.project-page-header,
.content-header:has(> .project-header-actions) {
    position: relative;
    padding-right: 340px;
}

    .content-header:has(> .project-header-actions) > h1 {
        margin-top: 0;
        margin-bottom: 0;
    }

.project-page-subtitle {
    margin: 3px 0 0;
    color: #475569;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
}

.project-header-actions {
    position: absolute;
    top: 15px;
    right: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    background: transparent;
}

    .project-header-actions .project-header-action {
        min-height: 34px !important;
        height: auto !important;
        padding: 7px 13px !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: 7px;
        color: #fff !important;
        border: 1px solid #f97316 !important;
        border-radius: 6px !important;
        background: #f97316 !important;
        background-image: none !important;
        box-shadow: none !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        line-height: 18px !important;
        white-space: nowrap;
    }

        .project-header-actions .project-header-action:hover {
            border-color: #ea580c !important;
            background: #ea580c !important;
        }

.project-header-action-icon {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media(max-width:767px) {
    .project-header-actions {
        position: static;
        margin-top: 9px;
        flex-wrap: wrap
    }

    .content-header.project-page-header {
        padding-right: 10px
    }

    .project-modal-modern .modal-body {
        padding: 9px
    }
}

/* Legacy list-page actions stay hidden in their old card position and are
   revealed only after being attached to that page's own header. */
.content .box-tools a.tw-dw-btn:not(.project-header-action),
.content .box-tools button.tw-dw-btn:not(.project-header-action),
.content .box-tools a.btn-primary:not(.project-header-action),
.content .box-tools button.btn-primary:not(.project-header-action),
.content .box-tools a.btn-modal:not(.btn-box-tool):not(.project-header-action),
.content .box-tools button.btn-modal:not(.btn-box-tool):not(.project-header-action) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Denser default modal layout; explicitly large/contact/POS dialogs retain their scoped sizes. */
.modal-dialog:not(.modal-lg):not(.modal-xl):not(.project-modal-wide):has(.project-modal-modern) {
    width: min(620px,calc(100vw - 24px));
    max-width: 620px;
    margin: 18px auto;
}

.modal-dialog.modal-lg:has(.project-modal-modern),
.modal-dialog.project-modal-wide:has(.project-modal-modern) {
    width: min(920px,calc(100vw - 32px));
    max-width: 920px;
    margin: 18px auto;
}

.modal-dialog.modal-xl:has(.project-modal-modern) {
    width: min(1180px,calc(100vw - 32px));
    max-width: 1180px;
    margin: 18px auto;
}

.project-modal-modern .modal-header {
    min-height: 56px;
    padding: 10px 15px;
}

.project-modal-modern .modal-body {
    padding: 10px;
}

    .project-modal-modern .modal-body > form > .row,
    .project-modal-modern .modal-body > .row {
        padding: 10px 9px 0;
    }

.project-modal-modern .form-group {
    margin-bottom: 10px;
}

.project-modal-modern .form-control,
.project-modal-modern .select2-selection {
    min-height: 34px;
}

.project-modal-modern .modal-footer {
    min-height: 54px;
    padding: 9px 15px;
}

/* Final orange theme bridge for legacy AdminLTE/Tailwind primary controls. */
.btn-primary,
.btn-info,
.tw-dw-btn-primary,
.tw-from-indigo-600.tw-to-blue-500,
button.tw-bg-gradient-to-r.tw-from-indigo-600,
a.tw-bg-gradient-to-r.tw-from-indigo-600 {
    color: #fff !important;
    border-color: #f97316 !important;
    background: #f97316 !important;
    background-color: #f97316 !important;
    background-image: none !important;
}

    .btn-primary:hover, .btn-primary:focus,
    .btn-info:hover, .btn-info:focus,
    .tw-dw-btn-primary:hover, .tw-dw-btn-primary:focus,
    .tw-from-indigo-600.tw-to-blue-500:hover {
        color: #fff !important;
        border-color: #ea580c !important;
        background: #ea580c !important;
    }

/* Cohesive semantic button palette built around the orange theme. */
.btn,
.tw-dw-btn,
.product-header-btn {
    border-radius: 7px !important;
    box-shadow: none !important;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease, transform .15s ease !important;
}

    .btn:hover,
    .tw-dw-btn:hover,
    .product-header-btn:hover {
        transform: translateY(-1px);
    }

.btn-success {
    color: #fff !important;
    border-color: #059669 !important;
    background: #059669 !important;
}

    .btn-success:hover, .btn-success:focus {
        border-color: #047857 !important;
        background: #047857 !important;
    }

.btn-warning {
    color: #fff !important;
    border-color: #f59e0b !important;
    background: #f59e0b !important;
}

    .btn-warning:hover, .btn-warning:focus {
        border-color: #d97706 !important;
        background: #d97706 !important;
    }

.btn-danger {
    color: #fff !important;
    border-color: #ef4444 !important;
    background: #ef4444 !important;
}

    .btn-danger:hover, .btn-danger:focus {
        border-color: #dc2626 !important;
        background: #dc2626 !important;
    }

.btn-default {
    color: #334155 !important;
    border-color: #d7dee8 !important;
    background: #fff !important;
}

    .btn-default:hover, .btn-default:focus {
        color: #f97316 !important;
        border-color: #fdba74 !important;
        background: #fff7ed !important;
    }

/* Compact table actions use readable theme-compatible outlines. */
.table .btn-primary,
.table .btn-info,
.table .btn-success,
.table .btn-warning,
.table .btn-danger {
    background: #fff !important;
}

.table .btn-primary {
    color: #f97316 !important;
    border-color: #f97316 !important;
}

.table .btn-info {
    color: #0284c7 !important;
    border-color: #38bdf8 !important;
}

.table .btn-success {
    color: #059669 !important;
    border-color: #34d399 !important;
}

.table .btn-warning {
    color: #d97706 !important;
    border-color: #fbbf24 !important;
}

.table .btn-danger {
    color: #ef4444 !important;
    border-color: #f87171 !important;
}

.table .btn-primary:hover {
    color: #fff !important;
    background: #f97316 !important;
}

.table .btn-info:hover {
    color: #fff !important;
    background: #0284c7 !important;
}

.table .btn-success:hover {
    color: #fff !important;
    background: #059669 !important;
}

.table .btn-warning:hover {
    color: #fff !important;
    background: #d97706 !important;
}

.table .btn-danger:hover {
    color: #fff !important;
    background: #ef4444 !important;
}

/* Unified Actions dropdown treatment across all data tables. */
.table .btn-info.dropdown-toggle,
.table a.dropdown-toggle.btn-info,
.dataTables_wrapper .btn-info.dropdown-toggle,
.dataTables_wrapper a.dropdown-toggle.btn-info {
    color: #de421a !important;
    background: #ffffff !important;
    border-color: #de421a !important;
}

.content .dataTables_wrapper .tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-info.dropdown-toggle,
.content table .tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-info.dropdown-toggle,
.modal-content table .tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-info.dropdown-toggle {
    color: #de421a !important;
    background-color: #ffffff !important;
    background-image: none !important;
    border: 1px solid #de421a !important;
    box-shadow: none !important;
}

.table .btn-info.dropdown-toggle:hover,
.table .btn-info.dropdown-toggle:focus,
.table .btn-info.dropdown-toggle[aria-expanded="true"],
.table .open > .btn-info.dropdown-toggle,
.dataTables_wrapper .btn-info.dropdown-toggle:hover,
.dataTables_wrapper .btn-info.dropdown-toggle:focus,
.dataTables_wrapper .open > .btn-info.dropdown-toggle {
    color: #ffffff !important;
    background: #e85d18 !important;
    border-color: #e85d18 !important;
}

.content .dataTables_wrapper .tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-info.dropdown-toggle:hover,
.content .dataTables_wrapper .tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-info.dropdown-toggle:focus,
.content .dataTables_wrapper .open > .tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-info.dropdown-toggle,
.content table .tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-info.dropdown-toggle:hover,
.content table .tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-info.dropdown-toggle:focus,
.modal-content table .tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-info.dropdown-toggle:hover,
.modal-content table .tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-info.dropdown-toggle:focus {
    color: #ffffff !important;
    background-color: #e85d18 !important;
    border-color: #e85d18 !important;
}

.table .dropdown-menu > li > a:hover,
.table .dropdown-menu > li > a:focus,
.dataTables_wrapper .dropdown-menu > li > a:hover,
.dataTables_wrapper .dropdown-menu > li > a:focus {
    color: #ffffff !important;
    background: #e85d18 !important;
}

    .table .dropdown-menu > li > a:hover i,
    .table .dropdown-menu > li > a:hover svg,
    .table .dropdown-menu > li > a:focus i,
    .table .dropdown-menu > li > a:focus svg,
    .dataTables_wrapper .dropdown-menu > li > a:hover i,
    .dataTables_wrapper .dropdown-menu > li > a:hover svg {
        color: #ffffff !important;
        stroke: currentColor !important;
    }

.text-blue, .text-info, .tw-text-blue-500, .tw-text-blue-600 {
    color: #f97316 !important;
}

.border-blue, .tw-border-blue-500, .tw-border-blue-600 {
    border-color: #f97316 !important;
}

.project-modal-modern .table thead th,
.project-modal-modern table thead tr.bg-green th,
.project-modal-modern table thead.bg-green th {
    color: #fff !important;
    border-color: #fb923c !important;
    background: #f97316 !important;
}

.project-modal-modern .btn-success:not(.payment-modal-close) {
    color: #fff !important;
    border-color: #f97316 !important;
    background: #f97316 !important;
}

.project-modal-modern .btn-outline-primary,
.project-modal-modern .btn-default:focus {
    color: #f97316 !important;
    border-color: #f97316 !important;
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover {
    color: #fff !important;
    border-color: #f97316 !important;
    background: #f97316 !important;
}

.box.box-primary {
    border-top-color: #e2e8f0 !important;
}

.nav-tabs-custom > .nav-tabs > li.active {
    border-top-color: #f97316 !important;
}

    .nav-tabs-custom > .nav-tabs > li.active > a {
        color: #f97316 !important;
    }

.form-control:focus,
.select2-container--focus .select2-selection {
    border-color: #fb923c !important;
    box-shadow: 0 0 0 3px rgba(249,115,22,.1) !important;
}

@media(max-width:767px) {
    .content-header:has(> .project-header-actions) {
        padding-right: 10px;
        min-height: auto
    }
}

/* Shared orange side accent for primary content sections.
   Filters and solid status widgets are intentionally excluded. */
.content .box:not(.box-solid),
.content .box.project-accent-card,
.project-modal-modern .modal-body > .box:not(.box-solid),
.contact-modal-modern .modal-body > .box:not(.box-solid) {
    border: 1px solid #e2e8f0 !important;
    border-left: 3px solid #f97316 !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .04) !important;
}

    .content .box:not(.box-solid) > .box-header,
    .content .box.project-accent-card > .box-header,
    .project-modal-modern .modal-body > .box:not(.box-solid) > .box-header,
    .contact-modal-modern .modal-body > .box:not(.box-solid) > .box-header {
        border-bottom: 1px solid #eef2f6 !important;
    }

    /* Keep nested tables aligned after adding the accent rail. */
    .content .box:not(.box-solid) .table-responsive,
    .content .box.project-accent-card .table-responsive {
        max-width: 100%;
    }

@media (max-width: 767px) {
    .content .box:not(.box-solid),
    .content .box.project-accent-card,
    .project-modal-modern .modal-body > .box:not(.box-solid),
    .contact-modal-modern .modal-body > .box:not(.box-solid) {
        border-left-width: 2px !important;
    }
}

.modal-footer > button[type="submit"]::before {
    content: none !important;
}

.modal-footer > button[type="submit"]:hover,
.modal-footer > button[type="submit"]:focus {
    color: #ffffff !important;
    background: #ea580c !important;
    border-color: #ea580c !important;
}

.modal-footer .project-button-icon,
.modal-footer .contact-button-icon {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
}

    .modal-footer .project-button-icon svg,
    .modal-footer .contact-button-icon svg {
        width: 15px !important;
        height: 15px !important;
        display: block;
    }

/* Compact modern Update Price workflow. */
.update-price-modern .update-price-card > .tw-p-2 {
    padding: 0 !important;
}

.update-price-modern .update-price-card .box-header {
    padding: 12px 18px 9px;
}

.update-price-modern .update-price-card .box-body {
    padding: 16px 24px 18px;
}

.update-price-upload {
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: 72px;
}

.update-price-file {
    min-width: 340px;
}

    .update-price-file label {
        display: block;
        margin-bottom: 7px;
    }

.update-price-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.update-price-btn {
    min-height: 36px;
    padding: 8px 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid #f97316;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    text-decoration: none !important;
}

    .update-price-btn svg {
        width: 15px;
        height: 15px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.9;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.update-price-submit {
    color: #fff !important;
    background: #f97316;
}

    .update-price-submit:hover, .update-price-submit:focus {
        color: #fff !important;
        border-color: #ea580c;
        background: #ea580c;
    }

.update-price-export {
    color: #f97316 !important;
    background: #fff;
}

    .update-price-export:hover, .update-price-export:focus {
        color: #fff !important;
        background: #f97316;
    }

.update-price-instructions {
    margin-top: 14px;
    padding: 16px 0 0;
    border-top: 1px solid #eef2f6;
}

    .update-price-instructions h4 {
        margin: 0 0 8px;
        color: #172554;
        font-size: 15px;
        font-weight: 650;
    }

    .update-price-instructions ol {
        margin: 0;
        padding-left: 20px;
        color: #475569;
        line-height: 1.65;
    }

/* Wide, clean Opening Stock editor. */
.opening-stock-modal-modern .modal-body {
    padding: 12px !important;
}

    .opening-stock-modal-modern .modal-body > .row {
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

.opening-stock-modal-modern .box.box-solid {
    margin: 0;
    border: 1px solid #e2e8f0;
    border-radius: 11px;
    background: #fff;
    box-shadow: none;
}

.opening-stock-modal-modern .box-header {
    padding: 14px 18px 9px;
    border-bottom: 0;
}

.opening-stock-modal-modern .box-title {
    color: #172554;
    font-size: 16px;
}

.opening-stock-modal-modern .box-body {
    padding: 8px 18px 16px;
}

.opening-stock-modal-modern .tw-overflow-scroll {
    overflow: auto !important;
}

.opening-stock-modal-modern .add_opening_stock_table {
    width: 100% !important;
    min-width: 900px !important;
    margin: 0;
}

    .opening-stock-modal-modern .add_opening_stock_table thead th {
        color: #fff !important;
        border-color: #fb923c !important;
        background: #f97316 !important;
        vertical-align: middle;
    }

    .opening-stock-modal-modern .add_opening_stock_table td {
        vertical-align: top;
    }

.opening-stock-modal-modern .modal-footer {
    padding: 10px 16px;
}

@media (max-width: 767px) {
    .update-price-upload {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
    }

    .update-price-file {
        min-width: 0;
        width: 100%;
    }

    .update-price-actions {
        flex-wrap: wrap;
    }

    .opening-stock-modal-modern .box-body {
        padding: 8px 10px 12px;
    }
}

/* Modern Add/Edit Contact modal. */
.modal-dialog:has(.contact-modal-modern) {
    width: min(1120px, calc(100vw - 32px));
    max-width: 1120px;
    margin: 24px auto;
}

.contact-modal-modern {
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.18);
}

    .contact-modal-modern .modal-header {
        min-height: 68px;
        padding: 15px 22px;
        display: flex;
        align-items: center;
        gap: 12px;
        border-bottom: 1px solid #e8edf3;
        background: linear-gradient(135deg, #ffffff 0%, #fff8f3 100%);
    }

    .contact-modal-modern .contact-title-icon {
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #f97316;
        border: 1px solid #fed7aa;
        border-radius: 10px;
        background: #fff7ed;
    }

    .contact-modal-modern .modal-title {
        margin: 0;
        color: #111827;
        font-size: 18px;
        font-weight: 600;
        letter-spacing: -0.01em;
    }

    .contact-modal-modern .modal-header .close {
        order: 3;
        width: 32px;
        height: 32px;
        margin: 0 0 0 auto;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #64748b;
        border: 1px solid transparent;
        border-radius: 8px;
        background: transparent;
        opacity: 1;
        font-size: 0;
    }

        .contact-modal-modern .modal-header .close:hover {
            color: #0f172a;
            border-color: #e2e8f0;
            background: #ffffff;
        }

    .contact-modal-modern .modal-body {
        max-height: calc(100vh - 190px);
        padding: 11px;
        overflow-y: auto;
        background: #f8fafc;
    }

        .contact-modal-modern .modal-body > .row {
            margin: 0;
            padding: 18px 14px 4px;
            border: 1px solid #e5eaf0;
            border-radius: 12px;
            background: #ffffff;
        }

    .contact-modal-modern .form-group {
        margin-bottom: 16px;
    }

        .contact-modal-modern .form-group > label,
        .contact-modal-modern .modal-body label:not(.radio-inline) {
            margin-bottom: 6px;
            color: #263244;
            font-size: 12px;
            font-weight: 600;
        }

    .contact-modal-modern .form-control,
    .contact-modal-modern .select2-selection {
        min-height: 38px;
        border-color: #d8e0e9 !important;
        background-color: #ffffff;
        box-shadow: none !important;
        transition: border-color 150ms ease, box-shadow 150ms ease;
    }

        .contact-modal-modern .form-control:focus,
        .contact-modal-modern .select2-container--focus .select2-selection {
            border-color: #fb923c !important;
            box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.12) !important;
        }

    .contact-modal-modern .input-group-addon {
        width: 38px;
        min-width: 38px;
        padding: 0;
        color: #718096;
        border-color: #d8e0e9;
        border-radius: 8px 0 0 8px;
        background: #f8fafc;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }

    .contact-modal-modern .input-group {
        width: 100%;
        display: flex;
        align-items: stretch;
    }

        .contact-modal-modern .input-group > .input-group-addon {
            flex: 0 0 38px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .contact-modal-modern .input-group > .form-control,
        .contact-modal-modern .input-group > select,
        .contact-modal-modern .input-group > .select2-container {
            flex: 1 1 auto;
            width: 1% !important;
            min-width: 0;
        }

        .contact-modal-modern .input-group > .select2-container {
            display: block;
        }

    .contact-modal-modern .select2-container .select2-selection--single,
    .contact-modal-modern .select2-container .select2-selection--multiple {
        width: 100%;
        min-height: 38px;
        display: flex;
        align-items: center;
    }

    .contact-modal-modern .select2-selection--multiple .select2-selection__rendered {
        width: 100%;
        padding: 2px 8px;
    }

    .contact-modal-modern .select2-selection--multiple .select2-search,
    .contact-modal-modern .select2-selection--multiple .select2-search__field {
        width: 100% !important;
        min-width: 120px;
    }

    .contact-modal-modern .input-group-addon .contact-outline-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        vertical-align: middle;
    }

    .contact-modal-modern .help-block {
        margin: 5px 0 0;
        color: #8490a0;
        font-size: 11px;
    }

    .contact-modal-modern .radio-inline {
        margin-top: 7px;
        color: #334155;
        font-size: 12px;
    }

    .contact-modal-modern hr {
        margin: 14px 0 18px;
        border: 0;
        border-top: 1px solid #e8edf3;
    }

    .contact-modal-modern .more_btn {
        min-height: 34px !important;
        padding: 7px 13px !important;
        color: #ea580c !important;
        border: 1px solid #fed7aa !important;
        border-radius: 8px !important;
        background: #fff7ed !important;
        box-shadow: none !important;
        width: max-content;
        margin: 2px auto 4px !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }

        .contact-modal-modern .more_btn:hover {
            color: #c2410c !important;
            background: #ffedd5 !important;
        }

        .contact-modal-modern .more_btn .contact-outline-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

    .contact-modal-modern .contact-action-strip {
        min-height: 64px;
        padding: 10px 12px !important;
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
    }

    .contact-modal-modern .contact-action-copy {
        min-width: 0;
        text-align: left;
    }

        .contact-modal-modern .contact-action-copy strong {
            display: block;
            color: #263244;
            font-size: 12px;
            font-weight: 600;
            line-height: 1.35;
        }

        .contact-modal-modern .contact-action-copy span {
            display: block;
            margin-top: 3px;
            color: #8490a0;
            font-size: 11px;
            line-height: 1.4;
        }

    .contact-modal-modern .contact-action-strip .more_btn {
        flex: 0 0 auto;
        margin: 0 0 0 auto !important;
    }

    .contact-modal-modern .modal-body > .row + .row {
        margin-top: 16px;
    }

    .contact-modal-modern #more_div:not(.hide) {
        padding-top: 18px;
    }

    .contact-modal-modern .contact-person-modal-body {
        width: 100%;
        margin: 12px 0 4px;
        padding: 11px !important;
        border: 1px solid #e5eaf0;
        border-radius: 12px;
        background: linear-gradient(135deg, #ffffff 0%, #fffaf6 100%);
        box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
    }

        .contact-modal-modern .contact-person-modal-body::before,
        .contact-modal-modern .contact-person-modal-body::after {
            content: '';
            display: table;
            clear: both;
        }

        .contact-modal-modern .contact-person-modal-body > hr,
        .contact-modal-modern .contact-person-modal-body > .col-md-12 > hr:first-child {
            display: none;
        }

        .contact-modal-modern .contact-person-modal-body .form-group {
            margin-bottom: 12px;
        }

    .contact-modal-modern input[type="number"] {
        appearance: textfield;
        -moz-appearance: textfield;
    }

        .contact-modal-modern input[type="number"]::-webkit-inner-spin-button,
        .contact-modal-modern input[type="number"]::-webkit-outer-spin-button {
            margin: 0;
            -webkit-appearance: none;
        }

    .contact-modal-modern .modal-footer {
        min-height: 62px;
        padding: 13px 22px;
        border-top: 1px solid #e8edf3;
        background: #ffffff;
    }

        .contact-modal-modern .modal-footer button::before {
            content: none !important;
        }

        .contact-modal-modern .modal-footer .contact-button-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

    .contact-modal-modern svg {
        display: block;
    }

    .contact-modal-modern .modal-body,
    .contact-modal-modern .select2-results__options {
        scrollbar-width: thin;
        scrollbar-color: #94a3b8 transparent;
    }

        .contact-modal-modern .modal-body::-webkit-scrollbar,
        .contact-modal-modern .select2-results__options::-webkit-scrollbar {
            width: 5px;
            height: 5px;
        }

        .contact-modal-modern .modal-body::-webkit-scrollbar-track,
        .contact-modal-modern .select2-results__options::-webkit-scrollbar-track {
            background: transparent;
        }

        .contact-modal-modern .modal-body::-webkit-scrollbar-thumb,
        .contact-modal-modern .select2-results__options::-webkit-scrollbar-thumb {
            border-radius: 999px;
            background: #94a3b8;
        }

            .contact-modal-modern .modal-body::-webkit-scrollbar-thumb:hover,
            .contact-modal-modern .select2-results__options::-webkit-scrollbar-thumb:hover {
                background: #64748b;
            }

.select2-container--open {
    z-index: 10600;
}

    .select2-container--open .select2-results__options {
        scrollbar-width: thin;
        scrollbar-color: #94a3b8 transparent;
    }

        .select2-container--open .select2-results__options::-webkit-scrollbar {
            width: 5px;
        }

        .select2-container--open .select2-results__options::-webkit-scrollbar-track {
            background: transparent;
        }

        .select2-container--open .select2-results__options::-webkit-scrollbar-thumb {
            border-radius: 999px;
            background: #94a3b8;
        }

/* Orange Select2 accent and readable search fields across the application. */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--classic .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option[aria-selected="true"] {
    color: #ffffff !important;
    background: #f97316 !important;
}

.select2-dropdown .select2-search__field,
.select2-search--inline .select2-search__field,
.select2-container--default .select2-search--dropdown .select2-search__field {
    color: #111827 !important;
    caret-color: #f97316 !important;
    background: #ffffff !important;
    -webkit-text-fill-color: #111827 !important;
}

    .select2-dropdown .select2-search__field::placeholder,
    .select2-search--inline .select2-search__field::placeholder {
        color: #9ca3af !important;
        opacity: 1;
    }

    .select2-container--default .select2-search--dropdown .select2-search__field:focus,
    .select2-container--default.select2-container--focus .select2-selection--multiple {
        border-color: #f97316 !important;
        outline: 0;
        box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.12) !important;
    }

.select2-container--default .select2-selection--multiple .select2-selection__choice,
.select2-container--classic .select2-selection--multiple .select2-selection__choice {
    color: #ffffff !important;
    border-color: #f97316 !important;
    background: #f97316 !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove,
.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove {
    color: #ffffff !important;
    border-right-color: rgba(255, 255, 255, 0.28) !important;
}

    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover,
    .select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover {
        color: #ffffff !important;
        background: #ea580c !important;
    }

.modal-dialog:has(.commission-agent-modal-modern) {
    width: min(720px, calc(100vw - 32px));
    max-width: 720px;
}

.commission-agent-modal-modern .modal-body > .row {
    padding-bottom: 8px;
}

.commission-agent-modal-modern textarea.form-control {
    min-height: 90px;
    resize: vertical;
}

.ledger-discount-modal-modern .modal-body > .row {
    padding: 18px 18px 4px !important;
}

.ledger-discount-modal-modern .modal-body .row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

.ledger-discount-modal-modern textarea.form-control {
    min-height: 88px;
}

@media(max-width:767px) {
    .ledger-discount-modal-modern .modal-body .row {
        display: block
    }
}

@media (max-width: 767px) {
    .modal-dialog:has(.contact-modal-modern) {
        width: calc(100vw - 16px);
        margin: 8px auto;
    }

    .contact-modal-modern .modal-header,
    .contact-modal-modern .modal-footer {
        padding-left: 14px;
        padding-right: 14px;
    }


    .contact-modal-modern .modal-body {
        padding: 11px;
    }

    .contact-modal-modern .contact-action-strip {
        align-items: flex-start;
    }

    .contact-modal-modern .modal-body {
        max-height: calc(100vh - 150px);
    }
}

/* Actions dropdowns use DaisyUI's info token. This final override prevents
   the generated blue component color from overriding the application theme. */
button.tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-info.dropdown-toggle,
a.tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-info.dropdown-toggle,
.tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-info.dropdown-toggle {
    --btn-color: #de421a !important;
    color: #de421a !important;
    -webkit-text-fill-color: #de421a !important;
    background-color: #ffffff !important;
    background-image: none !important;
    border: 1px solid #de421a !important;
    box-shadow: none !important;
}

    button.tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-info.dropdown-toggle:hover,
    button.tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-info.dropdown-toggle:focus,
    button.tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-info.dropdown-toggle:active,
    button.tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-info.dropdown-toggle[aria-expanded="true"],
    a.tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-info.dropdown-toggle:hover,
    a.tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-info.dropdown-toggle:focus,
    a.tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-info.dropdown-toggle:active,
    a.tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-info.dropdown-toggle[aria-expanded="true"],
    .open > .tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-info.dropdown-toggle {
        --btn-color: #e85d18 !important;
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
        background-color: #e85d18 !important;
        background-image: none !important;
        border-color: #e85d18 !important;
    }

.location-settings-update {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 34px;
    min-height: 34px;
    padding: 7px 13px;
    border-radius: 8px;
    font-size: 12px;
    line-height: 1;
}

    .location-settings-update svg {
        width: 14px;
        height: 14px;
        flex: 0 0 14px;
    }

.barcode-setting-page {
    background: #f8fafc;
}

.barcode-setting-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

    .barcode-setting-header h1 {
        margin: 0 0 7px;
        color: #111827;
        font-size: 20px;
        font-weight: 600;
        line-height: 1.3;
    }

    .barcode-setting-header p {
        margin: 0;
        color: #475569;
        font-size: 13px;
        line-height: 1.5;
    }

.barcode-setting-save {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 34px;
    padding: 7px 13px;
    border: 0;
    border-radius: 8px;
    color: #fff;
    background: var(--theme-700, #f97316);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .12);
    transition: background-color .2s ease, box-shadow .2s ease, transform .1s ease;
}

    .barcode-setting-save:hover,
    .barcode-setting-save:focus {
        color: #fff;
        background: var(--theme-800, #ea580c);
        box-shadow: 0 4px 12px color-mix(in srgb, var(--theme-700, #f97316) 28%, transparent);
        outline: none;
    }

    .barcode-setting-save:active {
        transform: translateY(1px);
    }

    .barcode-setting-save svg {
        width: 14px;
        height: 14px;
    }

.barcode-setting-card {
    padding: 22px 18px 12px;
    border: 1px solid #dfe5ec;
    border-radius: 11px;
    background: #fff;
}

    .barcode-setting-card .form-group {
        margin-bottom: 18px;
    }

        .barcode-setting-card .form-group > label {
            margin-bottom: 7px;
            color: #111827;
            font-size: 13px;
            font-weight: 600;
        }

    .barcode-setting-card .input-group {
        width: 100%;
    }

    .barcode-setting-card .form-control,
    .barcode-setting-card .input-group-addon {
        min-height: 42px;
        border-color: #d4dce6;
    }

.barcode-setting-measurement .form-group {
    margin-bottom: 11px;
}

    .barcode-setting-measurement .form-group > label {
        margin-bottom: 4px;
        font-size: 11px;
        line-height: 1.25;
    }

.barcode-setting-measurement .form-control,
.barcode-setting-measurement .input-group-addon {
    height: 40px;
    min-height: 28px;
    font-size: 13px;
}

.barcode-setting-measurement input[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
}

    .barcode-setting-measurement input[type="number"]::-webkit-inner-spin-button,
    .barcode-setting-measurement input[type="number"]::-webkit-outer-spin-button {
        margin: 0;
        -webkit-appearance: none;
        appearance: none;
    }

.barcode-setting-card .form-control {
    border-radius: 8px;
    box-shadow: none;
}

.barcode-setting-card textarea.form-control {
    min-height: 76px;
    resize: vertical;
}

.barcode-setting-card .input-group .form-control {
    border-radius: 0 8px 8px 0;
}

.barcode-setting-card .form-control:focus {
    border-color: var(--theme-700, #f97316);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-700, #f97316) 12%, transparent);
}

.barcode-setting-field-icon {
    width: 30px;
    padding: 0;
    border-radius: 8px 0 0 8px;
    color: #64748b;
    background: #fff;
    text-align: center;
    vertical-align: middle;
}

    .barcode-setting-field-icon svg {
        display: block;
        width: 13px;
        height: 13px;
        margin: 0 auto;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.5;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.barcode-setting-checkbox {
    padding-top: 4px;
}

    .barcode-setting-checkbox label {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin: 0;
        color: #334155;
        font-size: 13px;
        font-weight: 400;
        cursor: pointer;
    }

    .barcode-setting-checkbox input {
        margin: 0;
    }

.barcode-setting-default {
    padding-top: 21px;
}

@media (max-width: 640px) {
    .barcode-setting-header {
        flex-direction: column;
    }

    .barcode-setting-save {
        width: 100%;
    }

    .barcode-setting-card {
        padding: 16px 12px 6px;
    }
}

.business-settings-hub {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

    .business-settings-hub.tw-hidden {
        display: none;
    }

.business-settings-card {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 116px;
    padding: 18px;
    border: 1px solid #e5e7eb;
    border-radius: 11px;
    background: #fff;
    text-align: left;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

    .business-settings-card:hover,
    .business-settings-card:focus {
        border-color: #fdba74;
        box-shadow: 0 8px 22px rgba(15, 23, 42, .07);
        outline: none;
        transform: translateY(-1px);
    }

.business-settings-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-right: 14px;
    flex: 0 0 44px;
    border-radius: 11px;
    color: #f97316;
    background: #fff0e6;
}

    .business-settings-card__icon svg {
        width: 21px;
        height: 21px;
    }

.business-settings-card__copy {
    min-width: 0;
    flex: 1;
}

.business-settings-card__title,
.business-settings-card__description {
    display: block;
}

.business-settings-card__title {
    margin: 0 0 4px;
    color: #111827;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
}

.business-settings-card__description {
    margin: 0;
    color: #8b95a7;
    font-size: 12px;
    line-height: 1.45;
}

.business-settings-card__arrow {
    width: 16px;
    height: 16px;
    margin-left: 10px;
    flex: 0 0 16px;
    color: #9ca3af;
}

@media (max-width: 1199px) {
    .business-settings-hub {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .business-settings-hub {
        grid-template-columns: 1fr;
    }

    .business-settings-card {
        min-height: 104px;
    }
}

.business-settings-page {
    background: #f8fafc;
}

.business-settings-page-header {
    padding: 18px 10px 12px;
    background: #f8fafc;
}

    .business-settings-page-header.tw-hidden {
        display: none;
    }

    .business-settings-page-header h1 {
        margin: 0 0 7px;
        color: #111827;
        font-size: 20px;
        font-weight: 600;
        line-height: 1.25;
    }

    .business-settings-page-header p {
        margin: 0;
        color: #475569;
        font-size: 13px;
        line-height: 1.5;
    }

.business-settings-page-header__search {
    margin-top: 17px;
}

.business-settings-editor.tw-hidden {
    display: none;
}

.business-settings-editor__header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 22px;
    padding: 2px 4px;
}

.business-settings-back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-top: 1px;
    border: 0;
    border-radius: 8px;
    color: #64748b;
    background: transparent;
}

    .business-settings-back:hover {
        color: #f97316;
        background: #fff0e6;
    }

    .business-settings-back svg {
        width: 19px;
        height: 19px;
    }

.business-settings-editor__heading {
    min-width: 0;
    flex: 1;
}

    .business-settings-editor__heading h1 {
        margin: 0 0 6px;
        color: #0f172a;
        font-size: 20px;
        font-weight: 600;
        line-height: 1.25;
    }

    .business-settings-editor__heading p {
        margin: 0;
        color: #64748b;
        font-size: 13px;
        line-height: 1.5;
    }

.business-settings-save {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 8px 15px;
    border: 0;
    border-radius: 7px;
    color: #fff;
    background: var(--theme-700, #f97316);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .12);
    transition: background-color .2s ease, box-shadow .2s ease, transform .1s ease;
}

    .business-settings-save:hover,
    .business-settings-save:focus {
        color: #fff;
        background: var(--theme-800, #ea580c);
        box-shadow: 0 4px 12px color-mix(in srgb, var(--theme-700, #f97316) 28%, transparent);
        outline: none;
    }

    .business-settings-save:active {
        background: var(--theme-900, #c2410c);
        transform: translateY(1px);
    }

    .business-settings-save:disabled {
        cursor: not-allowed;
        opacity: .6;
    }

    .business-settings-save svg {
        width: 16px;
        height: 16px;
    }

.business-settings-editor .pos-tab-menu {
    display: none;
}

.business-settings-editor .pos-tab {
    width: 100%;
    padding: 0;
}

.business-settings-editor .pos-tab-container {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.business-settings-editor .pos-tab-content {
    padding: 22px 18px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    box-shadow: none;
}

    .business-settings-editor .pos-tab-content h3,
    .business-settings-editor .pos-tab-content h4 {
        color: #0f172a;
        font-weight: 600;
    }

.business-settings-editor .form-group {
    margin-bottom: 19px;
}

    .business-settings-editor .form-group > label,
    .business-settings-editor .control-label {
        margin-bottom: 7px;
        color: #64748b;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

.business-settings-editor .form-control,
.business-settings-editor .select2-selection,
.business-settings-editor .input-group-addon,
.business-settings-editor .btn-file {
    min-height: 42px;
    border-color: #dbe1e8;
}

.business-settings-editor .form-control,
.business-settings-editor .select2-selection {
    border-radius: 8px;
    box-shadow: none;
}

    .business-settings-editor .form-control:focus {
        border-color: #fb923c;
        box-shadow: 0 0 0 3px rgba(251, 146, 60, .12);
    }

@media (max-width: 640px) {
    .business-settings-page-header {
        padding-top: 14px;
    }

    .business-settings-editor__header {
        flex-wrap: wrap;
    }

    .business-settings-save {
        width: 100%;
        justify-content: center;
    }

    .business-settings-editor .pos-tab-content {
        padding: 16px 12px;
    }
}

.relite-package-column {
    display: flex;
    padding-top: 18px;
}

.relite-package-card {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 560px;
    padding: 32px;
    border: 1px solid #e1e5ea;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

    .relite-package-card:hover,
    .relite-package-card.is-popular {
        border-color: rgba(255, 107, 23, 0.55);
        box-shadow: 0 14px 34px rgba(255, 107, 23, 0.12);
        transform: translateY(-3px);
    }

.relite-package-ribbon {
    position: absolute;
    top: -15px;
    left: 50%;
    min-width: 166px;
    padding: 7px 22px;
    transform: translateX(-50%);
    background: #ff6b17;
    color: #fff;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
}

    .relite-package-ribbon::before,
    .relite-package-ribbon::after {
        content: '';
        position: absolute;
        top: 0;
        border-top: 15px solid transparent;
    }

    .relite-package-ribbon::before {
        right: 100%;
        border-right: 15px solid #d94f00;
    }

    .relite-package-ribbon::after {
        left: 100%;
        border-left: 15px solid #d94f00;
    }

.relite-package-summary {
    min-height: 140px;
    padding: 26px 20px;
    border: 1px solid #e1e5ea;
    border-radius: 8px;
    background: #fff;
}

.relite-package-card.is-popular .relite-package-summary {
    background: #fafafa;
}

.relite-package-summary h2 {
    margin: 0 0 12px;
    color: #073b70;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.25;
}

.relite-package-summary p {
    margin: 0;
    color: #7b8190;
    font-size: 15px;
    line-height: 1.55;
}

.relite-package-price {
    display: flex;
    align-items: baseline;
    gap: 7px;
    min-height: 86px;
    padding: 27px 10px 20px;
    border-bottom: 1px dashed #dfe3e8;
    color: #111827;
}

    .relite-package-price strong {
        color: #ff6b17;
        font-size: 30px;
        font-weight: 700;
        line-height: 1.2;
    }

    .relite-package-price span {
        color: #111827;
        font-size: 13px;
    }

.relite-package-features {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 0;
    padding: 22px 10px 30px;
    list-style: none;
}

    .relite-package-features li {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        color: #737b89;
        font-size: 14px;
        line-height: 1.45;
    }

    .relite-package-features svg {
        width: 16px;
        height: 16px;
        flex: 0 0 16px;
        margin-top: 2px;
        fill: none;
        stroke: #07548c;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.relite-package-action {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    margin-top: auto;
    padding: 11px 20px;
    border: 1px solid #ff6b17;
    border-radius: 6px;
    background: #ff6b17;
    color: #fff !important;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none !important;
    transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

    .relite-package-action:hover,
    .relite-package-action:focus {
        border-color: #e85b0a;
        background: #e85b0a;
        box-shadow: 0 8px 18px rgba(255, 107, 23, 0.22);
    }

@media (max-width: 991px) {
    .relite-package-card {
        min-height: auto;
    }
}

@media (max-width: 767px) {
    .relite-package-card {
        padding: 24px;
    }

    .relite-package-summary h2 {
        font-size: 22px;
    }
}

/* Sales representative item-wise report layout */
.srir {
    padding: 18px 20px 30px;
    color: #101a33;
    background: #f8fafc;
    font-family: 'Inter',sans-serif !important
}

    .srir * {
        box-sizing: border-box
    }

.srir-head h1 {
    margin: 0;
    font-size: 22px;
    font-weight: 800
}

.srir-head p {
    margin: 3px 0 13px;
    color: #667085;
    font-size: 12px
}

.srir-card {
    background: #fff;
    border: 1px solid #e4e9f1;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(15,23,42,.035)
}

.srir-filter {
    padding: 13px 16px;
    border-color: #ff5a0a
}

    .srir-filter h3 {
        margin: 0 0 11px;
        font-size: 12px
    }

.srir-filter-grid {
    display: grid;
    grid-template-columns: 1.25fr repeat(4,1fr);
    gap: 12px 18px
}

.srir-field label {
    display: block;
    margin-bottom: 5px;
    font-size: 13px;
    font-weight: 700
}

.srir-field input, .srir-field select {
    width: 100%;
    height: 36px;
    padding: 7px 10px;
    color: #172033;
    background: #fff;
    border: 1px solid #dfe5ed;
    border-radius: 7px;
    font-size: 13px
}

.srir-actions {
    display: flex;
    align-items: end;
    justify-content: flex-end;
    gap: 8px
}

.srir-btn {
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 14px;
    border: 1px solid #dfe5ed;
    border-radius: 7px;
    background: #fff;
    color: #344054;
    font-size: 12px;
    font-weight: 700
}

    .srir-btn.primary {
        color: #fff;
        background: #095bd8;
        border-color: #095bd8
    }

    .srir-btn svg {
        width: 16px;
        height: 16px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8
    }

.srir-kpis {
    display: grid;
    grid-template-columns: repeat(7,1fr);
    gap: 12px;
    margin: 14px 0
}

.srir-kpi {
    min-height: 88px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px
}

    .srir-kpi i {
        width: 44px;
        height: 44px;
        display: grid;
        place-items: center;
        flex: 0 0 44px;
        border-radius: 50%;
        background: #e9f1ff;
        color: #1260df
    }

    .srir-kpi:nth-child(2) i {
        color: #15a05a;
        background: #eafaf0
    }

    .srir-kpi:nth-child(3) i {
        color: #ff5a0a;
        background: #fff0e9
    }

    .srir-kpi:nth-child(4) i {
        color: #8a32e8;
        background: #f5eaff
    }

    .srir-kpi:nth-child(5) i {
        color: #13a6b9;
        background: #e8f9fb
    }

    .srir-kpi:nth-child(6) i {
        color: #e93562;
        background: #ffedf2
    }

    .srir-kpi:nth-child(7) i {
        color: #e09000;
        background: #fff7dc
    }

    .srir-kpi svg {
        width: 23px;
        height: 23px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round
    }

    .srir-kpi small {
        display: block;
        color: #061a35;
        font-size: 15px
    }

    .srir-kpi strong {
        display: block;
        margin-top: 3px;
        font-size: 15px
    }

    .srir-kpi em {
        display: block;
        margin-top: 5px;
        color: #667085;
        font-size: 10px;
        font-style: normal
    }

.srir-charts {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 13px;
    margin-bottom: 13px
}

.srir-panel {
    padding: 14px 16px
}

.srir-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 13px
}

    .srir-title h3 {
        margin: 0;
        font-size: 14px
    }

.srir-bars {
    height: 190px;
    display: flex;
    align-items: end;
    gap: 18px;
    padding: 14px 10px 0;
    border-bottom: 1px solid #dfe5ed;
    background: repeating-linear-gradient(to top,transparent 0,transparent 44px,#edf1f5 45px)
}

.srir-vbar {
    height: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 5px
}

    .srir-vbar i {
        width: 34px;
        max-width: 80%;
        min-height: 3px;
        background: #1164e8;
        border-radius: 4px 4px 0 0
    }

    .srir-vbar:nth-child(2) i {
        background: #ff5a0a
    }

    .srir-vbar:nth-child(3) i {
        background: #0b9b4b
    }

    .srir-vbar:nth-child(4) i {
        background: #6d22d6
    }

    .srir-vbar:nth-child(5) i {
        background: #18a6b4
    }

    .srir-vbar b, .srir-vbar small {
        font-size: 9px;
        text-align: center
    }

.srir-hbars {
    display: grid;
    gap: 13px;
    padding: 8px 0
}

.srir-hbar {
    display: grid;
    grid-template-columns: 220px 1fr 42px;
    align-items: center;
    gap: 10px;
    font-size: 11px
}

    .srir-hbar span {
        height: 13px;
        background: #1264e8;
        border-radius: 0 3px 3px 0
    }

    .srir-hbar:nth-child(2) span {
        background: #ff5a0a
    }

    .srir-hbar:nth-child(3) span {
        background: #0b9b4b
    }

    .srir-hbar:nth-child(4) span {
        background: #7223d7
    }

    .srir-hbar:nth-child(5) span {
        background: #13a8b6
    }

.srir-table-card {
    padding: 13px 16px
}

.srir-table-wrap {
    overflow: auto
}

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

    .srir-table th, .srir-table td {
        padding: 10px 8px;
        border-bottom: 1px solid #e8edf3;
        white-space: nowrap;
        text-align: right;
        font-size: 11px
    }

    .srir-table th {
        color: #344054;
        background: #fbfcfe;
        font-weight: 700
    }

        .srir-table th:nth-child(-n+5), .srir-table td:nth-child(-n+5) {
            text-align: left
        }

    .srir-table tfoot td {
        font-weight: 800;
        background: #f7f9fc
    }

.srir-empty {
    text-align: center !important;
    color: #667085;
    padding: 28px !important
}

@media(max-width:1300px) {
    .srir-filter-grid {
        grid-template-columns: repeat(3,1fr)
    }

    .srir-kpis {
        grid-template-columns: repeat(4,1fr)
    }
}

@media(max-width:800px) {
    .srir-filter-grid, .srir-kpis, .srir-charts {
        grid-template-columns: 1fr
    }

    .srir {
        padding: 12px
    }
}
/* Standard application filter and table presentation */
.srir-filter {
    padding: 0 !important;
    border-color: #dfe5ed !important;
    overflow: visible
}

.srir-filter-details > summary {
    height: 52px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    background: #f8fafc;
    border-left: 3px solid #ff5a0a;
    border-radius: 12px 12px 0 0;
    cursor: pointer;
    list-style: none;
    color: #101828
}

    .srir-filter-details > summary::-webkit-details-marker {
        display: none
    }

.srir-filter-mark {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: #fff0e7;
    color: #ff5a0a;
    display: grid;
    place-items: center
}

    .srir-filter-mark svg {
        width: 17px;
        height: 17px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round
    }

.srir-filter-chevron {
    width: 18px;
    height: 18px;
    margin-left: auto;
    fill: none;
    stroke: #ff5a0a;
    stroke-width: 2;
    transition: transform .2s
}

.srir-filter-details:not([open]) .srir-filter-chevron {
    transform: rotate(180deg)
}

.srir-filter-body {
    padding: 15px 28px 14px;
    border-top: 1px solid #e5e9f0
}

.srir-filter-grid {
    grid-template-columns: repeat(4,minmax(0,1fr)) !important;
    column-gap: 28px !important;
    row-gap: 14px !important
}

.srir-field label {
    font-size: 13px !important;
    font-weight: 600 !important;
    margin-bottom: 6px !important
}

.srir-field input, .srir-field select {
    height: 36px !important;
    border: 1px solid #ccd3dd !important;
    border-radius: 7px !important;
    background: #fff !important
}

.srir-actions {
    grid-column: auto !important;
    align-self: end !important;
    justify-content: flex-end !important
}
/* The shared filter component owns the card and adds pf-body--open only on click. */
.srir-filter {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important
}

    .srir-filter .pf-inner {
        overflow: hidden
    }

    .srir-filter .pf-body:not(.pf-body--open) {
        visibility: hidden
    }

    .srir-filter .pf-body--open {
        visibility: visible
    }

    .srir-filter .pf-open {
        overflow: visible !important
    }

        .srir-filter .pf-open .pf-inner {
            overflow: visible
        }

.srir-date-picker {
    position: relative
}

.srir-date-trigger {
    width: 100%;
    height: 36px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 11px;
    color: #344054;
    background: #f3f4f6;
    border: 1px solid #ff9b65;
    border-radius: 8px;
    box-shadow: 0 0 0 3px rgba(255,90,10,.08);
    font-size: 14px;
    text-align: left
}

    .srir-date-trigger > svg {
        width: 16px;
        height: 16px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round
    }

    .srir-date-trigger span {
        flex: 1
    }

    .srir-date-trigger .srir-date-caret {
        width: 14px
    }

.srir-date-menu {
    position: absolute;
    z-index: 100;
    width: max-content;
    min-width: 180px;
    top: calc(100% + 5px);
    left: 0;
    padding: 4px 0;
    background: #fff;
    border: 1px solid #d8dee8;
    border-radius: 5px;
    box-shadow: 0 8px 22px rgba(15,23,42,.16)
}

    .srir-date-menu button {
        display: block;
        width: 100%;
        padding: 8px 12px;
        color: #101828;
        background: #fff;
        border: 0;
        font-size: 12px;
        text-align: left
    }

        .srir-date-menu button:hover, .srir-date-menu button:focus {
            color: #fff;
            background: #f85b11;
            outline: 0
        }
/* Match the standard application DataTable typography and clean total rows. */
.srir-table th, .srir-table td, .srir-table-wrap .dataTables_wrapper {
    font-size: 13px !important
}

.srir-table tfoot {
    visibility: hidden
}

.srir-table.dataTable tfoot {
    visibility: visible
}

.srir-table tfoot th, .srir-table tfoot td {
    padding: 10px 8px !important;
    background: #fff !important;
    color: #172033 !important;
    font-weight: 800 !important;
    border-top: 1px solid #dfe5ed !important;
    border-bottom: 1px solid #dfe5ed !important
}

@media(max-width:1100px) {
    .srir-filter-grid {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important
    }
}

@media(max-width:700px) {
    .srir-filter-grid {
        grid-template-columns: 1fr !important
    }

    .srir-filter-body {
        padding: 14px
    }
}

/* Keep numeric fields readable in tables and forms in every theme. */
input[type='number'],
table input[type='number'],
.dataTable input[type='number'],
body.relite-dark input[type='number'],
body.relite-dark table input[type='number'] {
    color: #172033 !important;
    background-color: #fff !important;
    border-color: #cfd7e3 !important;
    caret-color: #172033 !important;
    color-scheme: light !important;
    -webkit-text-fill-color: #172033 !important;
    opacity: 1 !important;
    font-family: 'Inter', sans-serif !important;
}

    input[type='number']:focus,
    table input[type='number']:focus,
    body.relite-dark input[type='number']:focus {
        color: #101828 !important;
        background-color: #fff !important;
        border-color: #ff7a32 !important;
        box-shadow: 0 0 0 3px rgba(255, 90, 10, 0.1) !important;
        outline: 0 !important;
    }

    input[type='number']::placeholder {
        color: #98a2b3 !important;
        -webkit-text-fill-color: #98a2b3 !important;
    }

/* Shared collapsible filter component. */
.pf-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.pf-body--open {
    grid-template-rows: 1fr;
}

.pf-inner {
    overflow: hidden;
}

.pf-btn {
    position: relative;
}

    .pf-btn::before {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 3px;
        background: var(--theme-700, #004eeb);
        content: '';
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }

.pf-open .pf-btn::before {
    transform: scaleX(1);
}

.pf-open .pf-btn {
    border-bottom-color: #e5e7eb !important;
}

/* Shared date-range inputs and calendar picker. */
input[readonly][id*="date_range"], input[readonly][id*="date_filter"], input[readonly][id*="date-range"] {
    height: 36px !important;
    padding-left: 36px !important;
    border: 1px solid #ff9b65 !important;
    border-radius: 8px !important;
    background-color: #f8fafc !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='%23344054' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M3 10h18'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: 11px center !important;
    box-shadow: 0 0 0 3px rgba(255,90,10,.08) !important
}

.daterangepicker {
    font-family: 'Inter',sans-serif !important;
    border-color: #d8dee8 !important;
    border-radius: 7px !important;
    box-shadow: 0 10px 28px rgba(15,23,42,.16) !important
}

    .daterangepicker .ranges li {
        padding: 9px 12px !important;
        font-size: 12px !important;
        color: #101828 !important
    }

        .daterangepicker .ranges li:hover, .daterangepicker .ranges li.active {
            color: #fff !important;
            background: #ff5a0a !important
        }

    .daterangepicker td.active, .daterangepicker td.active:hover {
        background: #ff5a0a !important
    }

    .daterangepicker td.in-range {
        background: #fff0e8
    }

    .daterangepicker .drp-buttons .applyBtn {
        background: #ff5a0a !important;
        border-color: #ff5a0a !important
    }

    .daterangepicker .drp-buttons .cancelBtn {
        color: #344054 !important;
        background: #fff !important;
        border-color: #d8dee8 !important
    }

/* Bulk Operations uses the shared application stylesheet so its layout stays
   consistent with the rest of the sales screens. */
.bulk-operations-page,
.bulk-operations-page button,
.bulk-operations-page input,
.bulk-operations-page select,
.bulk-operations-page table {
    font-family: 'Inter', sans-serif !important;
}

.bulk-operations-page {
    padding-top: 8px !important;
}

.bulk-operation-grid {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 14px !important;
    margin-bottom: 14px !important;
}

.bulk-operation-card {
    min-width: 0;
    min-height: 96px !important;
    padding: 15px !important;
    border: 1px solid #e5eaf1 !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .04) !important;
    align-items: flex-start;
}

.bulk-operation-card:hover {
    border-color: #cfd8e6 !important;
    box-shadow: 0 5px 14px rgba(16, 24, 40, .08) !important;
    transform: translateY(-1px);
}

.bulk-operation-card > span:first-child {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
        border-radius: 10px !important;
        padding: 10px;
    }

.bulk-operation-card > span:first-child svg {
    display: block !important;
    margin: 0 !important;
    width: 27px !important;
    height: 27px !important;
    stroke-width: 1.9;
}

.bulk-operation-card strong {
    margin-top: 2px;
    color: #111827 !important;
    font-size: 13px !important;
    line-height: 18px !important;
    white-space: nowrap;
}

.bulk-operation-card small {
    color: #526174 !important;
    font-size: 12px !important;
    line-height: 18px !important;
}

.bulk-operation-filter {
    margin-bottom: 0 !important;
    padding: 11px 14px !important;
    border: 1px solid #e5eaf1 !important;
    border-radius: 10px 10px 0 0 !important;
    box-shadow: none !important;
}

.bulk-operation-filter > .tw-grid:first-child {
    display: grid !important;
    grid-template-columns: 1.45fr .85fr .85fr 1fr 1fr !important;
    gap: 14px !important;
    align-items: end !important;
}

.bulk-operation-filter > .tw-grid:first-child > div:last-child {
    grid-column: 5 !important;
}

.bulk-advanced-filter-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

.bulk-operation-filter label {
    display: block;
    margin-bottom: 5px;
    color: #344054;
    font-size: 12px;
}

.bulk-operation-filter > .tw-grid:first-child > div > label {
    display: none;
}

.bulk-operation-filter .form-control,
.bulk-operation-filter .select2-selection {
    height: 36px !important;
    min-height: 36px !important;
    border-color: #dbe2ea !important;
    border-radius: 6px !important;
    font-size: 12px !important;
}

.bulk-operation-filter .btn {
    height: 36px;
    border-radius: 6px !important;
    font-size: 12px;
}

.bulk-operation-filter .btn-primary {
    background: #0866e8 !important;
    border-color: #0866e8 !important;
}

.bulk-operation-workspace {
    display: block;
    margin: 0 !important;
}

.bulk-panels-row {
    display: flex !important;
    gap: 14px !important;
    padding: 14px 0 0 !important;
}

.bulk-sales-column,
.bulk-items-column {
    display: flex;
    padding: 0 !important;
}

.bulk-sales-column {
    width: calc(66.666667% - 7px) !important;
}

.bulk-items-column {
    width: calc(33.333333% - 7px) !important;
}

.bulk-sales-panel,
.bulk-items-panel {
    width: 100%;
    margin: 0 !important;
    border: 1px solid #e5eaf1 !important;
    border: 1px solid #e5eaf1 !important;
    border-left: 1px solid #e5eaf1 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}

.bulk-sales-panel {
    border: 1px solid #e5eaf1 !important;
    border-left-color: #e5eaf1 !important;
}

.bulk-items-panel {
    border: 1px solid #e5eaf1 !important;
    border-left-color: #e5eaf1 !important;
}

.bulk-operations-page .box.box-primary.bulk-sales-panel,
.bulk-operations-page .box.box-primary.bulk-items-panel {
    border: 1px solid #e5eaf1 !important;
    border-left: 1px solid #e5eaf1 !important;
}

.bulk-sales-panel .box-header,
.bulk-items-panel .box-header {
    min-height: 43px;
    padding: 12px 14px !important;
    border-bottom: 1px solid #e5eaf1 !important;
}

.bulk-sales-panel .box-title,
.bulk-items-panel .box-title {
    font-size: 13px !important;
    font-weight: 600 !important;
}

.bulk-selected-badge {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    margin: 0 3px;
    color: #0b6df2;
    background: #eaf3ff;
    border-radius: 6px;
    font-weight: 700;
}

.bulk-sales-panel .table,
.bulk-items-panel .table {
    margin-bottom: 0 !important;
    font-size: 12px !important;
}

.bulk-sales-panel .table > thead > tr > th,
.bulk-sales-panel .table > tbody > tr > td,
.bulk-items-panel .table > thead > tr > th,
.bulk-items-panel .table > tbody > tr > td {
    padding: 10px 9px !important;
    border-color: #edf0f4 !important;
    vertical-align: middle !important;
    white-space: nowrap;
}

.bulk-sales-panel .box-footer {
    min-height: 42px;
    padding: 7px 10px !important;
    border-top: 1px solid #edf0f4 !important;
}

.bulk-sales-panel .dataTables_wrapper > .tw-mb-3:first-child {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 10px 12px !important;
}

.bulk-sales-panel .dataTables_wrapper > .tw-mb-3:first-child > .col-sm-2 {
    width: 16.666667% !important;
    max-width: 16.666667% !important;
    padding: 0 7px !important;
    float: none !important;
}

.bulk-sales-panel .dataTables_wrapper > .tw-mb-3:first-child > .col-sm-8 {
    width: 66.666667% !important;
    max-width: 66.666667% !important;
    padding: 0 7px !important;
    float: none !important;
}

.bulk-sales-panel .dataTables_length,
.bulk-sales-panel .dataTables_filter {
    margin: 0 !important;
}

.bulk-sales-panel .dataTables_filter {
    text-align: right !important;
}

.bulk-sales-panel .dataTables_filter input {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
}

.bulk-sales-panel .dt-buttons {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    gap: 7px !important;
    margin: 0 !important;
}

.bulk-sales-panel .dt-buttons .btn {
    margin: 0 !important;
}

.bulk-sales-panel .dt-buttons a,
.bulk-sales-panel .dt-buttons button {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
}

.bulk-items-panel .box-body {
    padding: 13px !important;
}

.bulk-item-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: -6px;
}

.bulk-item-action-btn {
    min-height: 34px !important;
    padding: 7px 12px !important;
    color: #f97316 !important;
    background: #fff !important;
    border: 1px solid #f97316 !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    line-height: 18px !important;
}

.bulk-item-action-btn:hover,
.bulk-item-action-btn:focus {
    color: #fff !important;
    background: #f97316 !important;
}

#print-bulk-item-list {
    color: #fff !important;
    background: #f97316 !important;
    border-color: #f97316 !important;
}

#print-bulk-item-list:hover,
#print-bulk-item-list:focus {
    color: #fff !important;
    background: #ea580c !important;
    border-color: #ea580c !important;
}

.bulk-operation-actions {
    position: sticky;
    bottom: 10px;
    margin-top: 14px;
    padding: 10px 14px !important;
    border: 1px solid #e5eaf1 !important;
    border-radius: 9px !important;
    box-shadow: 0 5px 18px rgba(16, 24, 40, .08) !important;
}

.bulk-operation-actions .btn {
    min-height: 35px;
    padding: 7px 12px;
    border-color: #dbe2ea;
    border-radius: 6px !important;
    color: #344054;
    font-size: 12px;
}

.bulk-operations-page input[type="checkbox"] {
    accent-color: #0b6df2;
}

.bulk-sales-panel a {
    color: #0878d1 !important;
}

.bulk-sales-panel .label-success {
    color: #087a3d !important;
    background: #dff7e8 !important;
}

.bulk-sales-panel .label-warning {
    color: #d36a00 !important;
    background: #fff1db !important;
}

.bulk-sales-panel .label-danger {
    color: #e11d48 !important;
    background: #ffe6eb !important;
}

.bulk-sales-panel .label-default {
    color: #475467 !important;
    background: #e7ebf0 !important;
}

#bulk-operation-modal .modal-content {
    border: 0;
    border-radius: 11px;
    box-shadow: 0 18px 48px rgba(16, 24, 40, .22);
    overflow: hidden;
}

#bulk-operation-modal .modal-header,
#bulk-operation-modal .modal-footer {
    padding: 14px 18px;
    border-color: #e5e7eb;
}

#bulk-operation-modal .modal-body {
    padding: 13px;
}

#bulk-operation-modal .modal-title {
    font-size: 16px;
    font-weight: 600;
}

.compact-delete-alert__icon svg {
    width: 19px;
    height: 19px;
}

.bulk-item-print {
    padding: 24px;
    color: #101828;
    background: #fff;
    font-family: 'Inter', sans-serif !important;
}

.bulk-item-print h2 {
    margin: 0 0 18px;
    font-size: 18px;
}

.bulk-item-print .row {
    display: flex;
    flex-wrap: wrap;
}

.bulk-item-print .col-xs-6 {
    width: 50%;
    margin-bottom: 12px;
}

.bulk-item-print small {
    display: block;
    color: #667085;
}

.bulk-item-print table {
    width: 100%;
    margin-top: 18px;
    border-collapse: collapse;
}

.bulk-item-print th,
.bulk-item-print td {
    padding: 10px;
    border-bottom: 1px solid #e5e7eb;
    text-align: left;
    font-size: 12px;
}

.bulk-invoice-copy {
    position: relative;
}

.bulk-invoice-copy--break {
    break-after: page;
    page-break-after: always;
}

.bulk-invoice-copy__label {
    position: relative;
    z-index: 2;
    margin: 0 0 8px;
    padding: 5px 9px;
    color: #111827;
    background: #f8fafc;
    border: 0px solid #dbe2ea;
    border-radius: 4px;
    text-align: right;
    font-family: 'Inter', sans-serif !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
}

/* GSTR-1 report */
.gstr1-page-header h1 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #101828;
    font-family: 'Inter', sans-serif !important;
    font-size: 20px;
    font-weight: 600;
}

.gstr1-page-header h1 svg,
.gstr1-page-header p + svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: #344054;
    stroke-width: 1.8;
}

.gstr1-page-header p {
    margin: 4px 0 0;
    color: #53627a;
    font-size: 12px;
}

.gstr1-report-page,
.gstr1-report-page button,
.gstr1-report-page input,
.gstr1-report-page select,
.gstr1-report-page table {
    font-family: 'Inter', sans-serif !important;
}

.gstr1-report-page {
    color: #101828;
}

.gstr1-report-page svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.gstr1-filter-card,
.gstr1-main-card,
.gstr1-summary-card {
    background: #fff;
    border: 1px solid #e4e9f0;
    border-radius: 8px;
    box-shadow: 0 2px 9px rgba(16, 24, 40, .06);
}

.gstr1-filter-card {
    padding: 13px 15px;
}

.gstr1-filter-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 11px 24px;
}

.gstr1-filter-grid label {
    display: block;
    margin-bottom: 5px;
    color: #101828;
    font-size: 13px;
    font-weight: 650;
}

.gstr1-filter-grid .form-control,
.gstr1-filter-grid .select2-selection {
    width: 100% !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 7px 10px !important;
    border: 1px solid #d5dce6 !important;
    border-radius: 4px !important;
    color: #233047 !important;
    background: #fff !important;
    font-size: 13px !important;
    box-shadow: none !important;
}

.gstr1-input-icon {
    position: relative;
}

.gstr1-input-icon input {
    padding-right: 34px !important;
}

.gstr1-input-icon svg {
    position: absolute;
    top: 8px;
    right: 9px;
    width: 17px;
    height: 17px;
    color: #344054;
}

.gstr1-filter-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-items: end;
}

.gstr1-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 34px;
    padding: 0 13px;
    color: #101828;
    background: #fff;
    border: 1px solid #d5dce6;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 650;
}

.gstr1-btn svg {
    width: 15px;
    height: 15px;
}

.gstr1-btn--primary {
    color: #fff;
    background: #ff5a0a;
    border-color: #ff5a0a;
}

.gstr1-kpi-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    margin: 13px 0;
}

.gstr1-kpi {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 87px;
    padding: 12px;
    background: #fff;
    border: 1px solid #e4e9f0;
    border-radius: 8px;
    box-shadow: 0 2px 9px rgba(16, 24, 40, .06);
}

.gstr1-kpi-icon {
    display: grid;
    place-items: center;
    flex: 0 0 49px;
    width: 49px;
    height: 49px;
    color: #fff;
    border-radius: 50%;
}

.gstr1-kpi-icon svg {
    width: 23px;
    height: 23px;
}

.gstr1-kpi--purple .gstr1-kpi-icon { background: linear-gradient(145deg,#7638ef,#4f20d5); }
.gstr1-kpi--green .gstr1-kpi-icon { background: linear-gradient(145deg,#23c262,#0ca447); }
.gstr1-kpi--blue .gstr1-kpi-icon { background: linear-gradient(145deg,#158af2,#0870dd); }
.gstr1-kpi--orange .gstr1-kpi-icon { background: linear-gradient(145deg,#ff811d,#ff5700); }
.gstr1-kpi--pink .gstr1-kpi-icon { background: linear-gradient(145deg,#ff5370,#ed2852); }
.gstr1-kpi--cyan .gstr1-kpi-icon { background: linear-gradient(145deg,#18c4c4,#02a6ad); }

.gstr1-kpi small,
.gstr1-kpi strong,
.gstr1-kpi em {
    display: block;
}

.gstr1-kpi small { color: #344054; font-size: 13px; font-weight: 600; }
.gstr1-kpi strong { margin: 2px 0 4px; font-size: 17px; line-height: 1.2; white-space: nowrap; }
.gstr1-kpi em { color: #59687d; font-size: 12px; font-style: normal; white-space: nowrap; }
.gstr1-kpi em span { color: #08a64c; font-weight: 700; }
.gstr1-kpi em svg { width: 10px; height: 10px; color: #08a64c; }

.gstr1-main-card {
    overflow: hidden;
}

.gstr1-main-card .dt-buttons {
    display: none !important;
}

.gstr1-tabs {
    display: flex;
    gap: 5px;
    padding: 0 12px;
    border-bottom: 1px solid #dfe5ed;
    overflow-x: auto;
}

.gstr1-tabs button {
    flex: 0 0 auto;
    padding: 13px 19px 11px;
    color: #101828;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    font-size: 13px;
    font-weight: 650;
}

.gstr1-tabs button.is-active {
    color: #004cff;
    border-bottom-color: #004cff;
}

.gstr1-table-title {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 15px 7px;
    color: #004cff;
}

.gstr1-table-title h3 {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
}

.gstr1-table-title svg {
    width: 15px;
    height: 15px;
    color: #53627a;
}

.gstr1-data-table {
    margin: 0 !important;
    font-size: 12px !important;
}

    .gstr1-data-table th,
    .gstr1-data-table td {
        padding: 8px 9px !important;
        border: 1px solid #ecedf0c2 !important;
        color: #142038;
        white-space: nowrap;
        vertical-align: middle !important;
    }

.gstr1-data-table thead th {
    background: #fbfcfe;
    font-weight: 700;
}

.gstr1-data-table tfoot th {
    color: #004cff;
    background: #fff;
    font-weight: 750;
}

.gstr1-main-card .dataTables_scrollBody thead tr,
.gstr1-main-card .dataTables_scrollBody tfoot tr {
    height: 0 !important;
}

.gstr1-main-card .dataTables_scrollBody thead th,
.gstr1-main-card .dataTables_scrollBody tfoot th,
.gstr1-main-card .dataTables_scrollBody thead td,
.gstr1-main-card .dataTables_scrollBody tfoot td {
    height: 0 !important;
    min-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    line-height: 0 !important;
}

.gstr1-lower-grid {
    display: grid;
    grid-template-columns: 1.08fr .88fr 1.04fr;
    gap: 10px;
    margin-top: 13px;
}

.gstr1-summary-card {
    min-width: 0;
    padding: 12px;
}

.gstr1-summary-card h3 {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 10px;
    padding-bottom: 9px;
    color: #004cff;
    border-bottom: 1px solid #dfe5ed;
    font-size: 13px;
    font-weight: 700;
}

.gstr1-summary-card h3 svg {
    width: 14px;
    height: 14px;
}

.gstr1-summary-card table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}

.gstr1-summary-card th,
.gstr1-summary-card td {
    padding: 7px 9px;
    border-bottom: 1px solid #e2e7ee;
    text-align: left;
}

.gstr1-summary-card th:not(:first-child),
.gstr1-summary-card td:not(:first-child) {
    text-align: right;
}

.gstr1-summary-card tfoot th {
    color: #004cff;
    font-weight: 750;
}

.gstr1-tax-layout {
    display: grid;
    grid-template-columns: 165px 1fr;
    gap: 8px;
    align-items: center;
}

.gstr1-donut-wrap {
    position: relative;
    width: 155px;
    height: 155px;
}

.gstr1-donut-chart {
    display: block;
    width: 100%;
    height: 100%;
}

.gstr1-donut-track,
.gstr1-donut-segment {
    fill: none !important;
    stroke-width: 15 !important;
}

.gstr1-donut-track {
    stroke: #e8eef6 !important;
}

.gstr1-donut-segment {
    transition: stroke-dasharray .25s ease;
}

.gstr1-donut-segment--0 { stroke:#087be7 !important; }.gstr1-donut-segment--1 { stroke:#18b675 !important; }.gstr1-donut-segment--2 { stroke:#ff9800 !important; }.gstr1-donut-segment--3 { stroke:#ff3155 !important; }.gstr1-donut-segment--4 { stroke:#9b43db !important; }

.gstr1-donut-wrap > div {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    pointer-events: none;
    text-align: center;
}

.gstr1-summary-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.gstr1-summary-table-wrap,
.gstr1-main-card .dataTables_scrollBody,
.gstr1-main-card .table-responsive {
    scrollbar-width: thin;
    scrollbar-color: #98a2b3 #f2f4f7;
}

.gstr1-summary-table-wrap::-webkit-scrollbar,
.gstr1-main-card .dataTables_scrollBody::-webkit-scrollbar,
.gstr1-main-card .table-responsive::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

.gstr1-summary-table-wrap::-webkit-scrollbar-track,
.gstr1-main-card .dataTables_scrollBody::-webkit-scrollbar-track,
.gstr1-main-card .table-responsive::-webkit-scrollbar-track {
    background: #f2f4f7;
    border-radius: 999px;
}

.gstr1-summary-table-wrap::-webkit-scrollbar-thumb,
.gstr1-main-card .dataTables_scrollBody::-webkit-scrollbar-thumb,
.gstr1-main-card .table-responsive::-webkit-scrollbar-thumb {
    background: #98a2b3;
    border-radius: 999px;
}

.gstr1-summary-table-wrap table {
    min-width: 365px;
}

.gstr1-donut-wrap strong,
.gstr1-donut-wrap small { display: block; }
.gstr1-donut-wrap strong { font-size: 12px; }
.gstr1-donut-wrap small { margin-top: 3px; font-size: 8px; }
.gstr1-rate-dot { display:inline-block;width:9px;height:9px;margin-right:8px;border-radius:2px; }
.gstr1-rate-dot--0 { background:#087be7; }.gstr1-rate-dot--1 { background:#18b675; }.gstr1-rate-dot--2 { background:#ff9800; }.gstr1-rate-dot--3 { background:#ff3155; }.gstr1-rate-dot--4 { background:#9b43db; }

.gstr1-note {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 12px 0;
    padding: 12px;
    color: #53627a;
    border-bottom: 1px solid #dfe5ed;
    font-size: 10px;
}

.gstr1-note svg { width: 15px; height: 15px; }

.gstr1-footer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
    padding: 4px 12px 14px;
}

.gstr1-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 7px 14px;
    background: #fff;
    border: 1px solid currentColor;
    border-radius: 4px;
    font-size: 12px;
    text-decoration: none !important;
}

.gstr1-action svg { width: 16px; height: 16px; }
.gstr1-action--green { color:#06a64f; }.gstr1-action--red { color:#ff3155; }.gstr1-action--blue { color:#087be7; }.gstr1-action--purple { color:#7945dc; }.gstr1-action--orange { color:#ff5a0a; }

@media (max-width: 1250px) {
    .gstr1-filter-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .gstr1-kpi-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .gstr1-lower-grid { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
    .gstr1-filter-grid,.gstr1-kpi-grid { grid-template-columns: 1fr; }
    .gstr1-tax-layout { grid-template-columns: 1fr; }
    .gstr1-donut-wrap { margin: auto; }
}

@media print {
    .gstr1-page-header,.gstr1-report-page { display:block !important; }
    .gstr1-filter-card,.gstr1-footer-actions { display:none !important; }
    .gstr1-main-card,.gstr1-summary-card,.gstr1-kpi { box-shadow:none !important; }
}

/* Shared responsive-table behavior. Wide data tables remain readable and
   scroll inside their own card instead of widening the whole application. */
.table-responsive {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.table-responsive > table {
    width: 100%;
    min-width: max-content;
    margin-bottom: 0;
}

.dataTables_wrapper,
.dataTables_scroll,
.dataTables_scrollBody {
    max-width: 100%;
}

.dataTables_scrollBody {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

.dataTables_scrollHeadInner,
.dataTables_scrollHeadInner > table,
.dataTables_scrollBody > table {
    min-width: 100% !important;
}

@media (max-width: 1199px) {
    .bulk-operation-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .bulk-operation-filter > .tw-grid:first-child {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .bulk-operation-filter > .tw-grid:first-child > div:last-child {
        grid-column: auto !important;
    }

    .bulk-panels-row {
        display: block !important;
    }

    .bulk-sales-column,
    .bulk-items-column {
        width: 100% !important;
    }

    .bulk-operation-workspace {
        display: block;
    }

    .bulk-sales-panel,
    .bulk-items-panel {
        border: 1px solid #e5eaf1 !important;
        border-radius: 10px !important;
        margin-bottom: 14px !important;
    }
}

@media (max-width: 991px) {
    .bulk-sales-panel .dataTables_wrapper > .tw-mb-3:first-child {
        display: block !important;
    }

    .bulk-sales-panel .dataTables_wrapper > .tw-mb-3:first-child > .col-sm-2,
    .bulk-sales-panel .dataTables_wrapper > .tw-mb-3:first-child > .col-sm-8 {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 10px !important;
    }

    .bulk-sales-panel .dataTables_filter,
    .bulk-sales-panel .dataTables_length {
        text-align: center !important;
    }

    .bulk-sales-panel .dataTables_filter input {
        max-width: 320px !important;
    }
}

@media (max-width: 767px) {
    .bulk-operation-grid,
    .bulk-operation-filter > .tw-grid:first-child {
        grid-template-columns: 1fr !important;
    }

    .bulk-advanced-filter-grid {
        grid-template-columns: 1fr !important;
    }
    .bulk-operation-card strong {
        white-space: normal;
    }

    .bulk-operation-actions {
        position: static;
    }

    .bulk-operation-actions .btn,
    .bulk-operation-actions .btn-group {
        width: 100%;
    }
}