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

/* Bulk Assign Customers */
.bac-page { --bac-orange:#ff5a16; --bac-ink:#0f1b3d; --bac-muted:#687895; --bac-line:#dbe3f0; padding:20px 22px 24px; color:var(--bac-ink); }
.bac-heading { display:flex; align-items:center; min-height:58px; margin-bottom:14px; }
.bac-heading-main { display:flex; align-items:flex-start; }
.bac-heading h1 { margin:0 0 3px; font-size:20px; line-height:1.2; font-weight:600; color:var(--bac-ink); }
.bac-heading p, .bac-subtitle { margin:0; color:var(--bac-muted); font-size:13px; }
.bac-card { background:#fff; border:1px solid var(--bac-line); border-radius:11px; box-shadow:0 3px 12px rgba(31,55,99,.06); }
.bac-steps { display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px; padding:20px 65px; margin-bottom:16px; }
.bac-step { position:relative; display:flex; align-items:center; gap:13px; min-width:0; }
.bac-step:not(:last-child)::after { content:""; position:absolute; left:calc(100% - 4px); top:19px; width:calc(100% - 42px); height:1px; background:#ced7e6; transform:translateX(-50%); }
.bac-step-no { position:relative; z-index:1; display:grid; place-items:center; flex:0 0 38px; width:38px; height:38px; color:#fff; background:#b9c4d8; border-radius:50%; font-weight:700; font-size:16px; }
.bac-step.active .bac-step-no { background:linear-gradient(145deg,#ff3e0a,#ff741d); box-shadow:0 4px 12px rgba(255,90,22,.25); }
.bac-step strong { display:block; margin-bottom:3px; font-size:13px; }
.bac-step.active strong { color:#f4511e; }
.bac-step span { display:block; color:var(--bac-muted); font-size:12px; white-space:nowrap; }
.bac-grid { display:grid; grid-template-columns:minmax(0,1fr) 66px minmax(0,.91fr); gap:12px; align-items:stretch; }
.bac-panel { min-width:0; height:480px; padding:20px 24px 14px; box-sizing:border-box; display:flex; flex-direction:column; overflow:hidden; }
.bac-panel h2, .bac-bottom h2 { margin:0 0 3px; font-size:16px; font-weight:600; }
.bac-tabs { display:flex; margin-top:13px; }
.bac-tab { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-width:184px; height:37px; padding:0 16px; color:var(--bac-ink); background:#fff; border:1px solid var(--bac-line); font-weight:700; cursor:pointer; }
.bac-tab:first-child { border-radius:7px 0 0 7px; }
.bac-tab:last-child { border-radius:0 7px 7px 0; }
.bac-tab.active { color:#f4511e; border-bottom:2px solid var(--bac-orange); background:#fffaf7; }
.bac-tab svg { width:16px; height:16px; }
.bac-upload { display:none; margin-top:14px; padding:16px; text-align:center; border:1px dashed #bfcbe0; border-radius:8px; background:#f8faff; }
.bac-upload.active { display:block; }
.bac-upload input { display:none; }
.bac-upload-label { display:inline-flex; align-items:center; gap:8px; padding:8px 14px; color:#fff; background:var(--bac-orange); border-radius:7px; cursor:pointer; font-weight:700; }
.bac-template-link { display:inline-flex; align-items:center; gap:7px; margin-left:8px; padding:7px 13px; color:#f4511e; background:#fff; border:1px solid #ffb18c; border-radius:7px; font-weight:700; text-decoration:none; }
.bac-template-link:hover, .bac-template-link:focus { color:#dc3d0d; background:#fff7f2; text-decoration:none; }
.bac-template-link svg { width:16px; height:16px; }
.bac-upload small { display:block; margin-top:8px; color:var(--bac-muted); }
.bac-filters { display:grid; grid-template-columns:minmax(0,1fr) 216px 38px; gap:12px; align-items:end; margin:0px 0 16px; }
.bac-search, .bac-select, .bac-icon-btn { height:36px; border:1px solid #cdd8e8; border-radius:7px; background:#fff; }
.bac-search { position:relative; }
.bac-search svg { position:absolute; left:12px; top:10px; width:16px; height:16px; color:#64748b; }
.bac-search input { width:100%; height:100%; padding:0 12px 0 38px; border:0; outline:0; background:transparent; }
.bac-filter label { display:block; margin-bottom:3px; color:#53617a; font-size:11px; }
.bac-entry-control { display:flex; align-items:center; gap:5px; margin:0 0 9px; color:var(--bac-ink); font-size:12px; }
.bac-entry-control select { height:31px; padding:0 25px 0 9px; border:1px solid #cdd8e8; border-radius:7px; background:#fff; outline:0; }
.bac-select { width:100%; padding:0 34px 0 12px; color:var(--bac-ink); outline:0; }
.bac-icon-btn { display:grid; place-items:center; cursor:pointer; }
.bac-icon-btn svg { width:17px; height:17px; }
.bac-list-panel { display:flex; flex:1 1 auto; flex-direction:column; min-height:0; }
.bac-list-panel.is-hidden { display:none !important; }
.bac-table-wrap { min-height:0; overflow:auto; border:1px solid var(--bac-line); border-radius:7px; }
.bac-panel > .bac-table-wrap, .bac-list-panel > .bac-table-wrap { flex:1 1 auto; }
.bac-table { width:100%; border-collapse:collapse; table-layout:fixed; }
.bac-table th, .bac-table td { height:32px; padding:6px 11px; text-align:left; border-right:1px solid #e4eaf3; border-bottom:1px solid #e4eaf3; font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bac-table th:last-child, .bac-table td:last-child { border-right:0; }
.bac-table tbody tr:last-child td { border-bottom:0; }
.bac-table th { position:sticky; top:0; z-index:2; height:36px; background:#f8faff; font-weight:600; }
.bac-table tr.is-assigned td { color:#8090a9; background:#f8fafc; }
.bac-assigned-note { display:block; margin-top:2px; color:#0a9f6b; font-size:10px; line-height:1.15; overflow:hidden; text-overflow:ellipsis; }
.bac-table tr.is-assigned .bac-assigned-note { color:#ed6a2c; }
.bac-checkbox:disabled { cursor:not-allowed; background:#edf1f6; border-color:#d3dbe8; }
.bac-check-col { width:68px; text-align:center !important; }
.bac-code-col { width:145px; }.bac-group-col { width:180px; }.bac-action-col { width:104px; }
.bac-checkbox { appearance:none; width:17px; height:17px; margin:0; vertical-align:middle; border:1px solid #afbdd2; border-radius:4px; background:#fff; cursor:pointer; }
.bac-checkbox:checked { background:var(--bac-orange); border-color:var(--bac-orange); }
.bac-checkbox:checked::after { content:""; display:block; width:8px; height:4px; margin:4px 0 0 3px; border-left:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(-45deg); }
.bac-empty { height:196px !important; text-align:center !important; color:var(--bac-muted); }
.bac-table-footer { display:flex; align-items:center; justify-content:space-between; padding:9px 9px 0; color:var(--bac-muted); font-size:12px; }
.bac-pages { display:flex; gap:7px; }
.bac-page-btn { min-width:32px; height:32px; border:1px solid var(--bac-line); border-radius:6px; background:#fff; cursor:pointer; }
.bac-page-btn.active { color:#fff; background:var(--bac-orange); border-color:var(--bac-orange); }
.bac-page-btn:disabled { opacity:.45; cursor:not-allowed; }
.bac-transfer { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:17px; }
.bac-transfer-set { text-align:center; color:var(--bac-ink); font-size:12px; font-weight:700; }
.bac-transfer-btn { display:grid; place-items:center; width:45px; height:42px; margin-bottom:5px; color:var(--bac-ink); background:#fff; border:1px solid var(--bac-line); border-radius:8px; box-shadow:0 3px 9px rgba(31,55,99,.07); cursor:pointer; }
.bac-transfer-btn.primary { color:#fff; background:linear-gradient(135deg,#ff4810,#ff741c); border-color:transparent; }
.bac-transfer-btn svg { width:20px; height:20px; }
.bac-remove { color:#ef301f; border:0; background:transparent; cursor:pointer; }
.bac-remove svg { width:16px; height:16px; }
.bac-lower { display:grid; grid-template-columns:minmax(0,1fr) 66px minmax(0,.91fr); gap:12px; margin-top:16px; }
.bac-lower > .bac-bottom:first-child { grid-column:1; }
.bac-lower > .bac-bottom:last-child { grid-column:3; }
.bac-bottom { padding:17px 24px; }
.bac-user-select { position:relative; margin-top:10px; }
.bac-user-select svg { position:absolute; left:13px; top:9px; width:25px; height:25px; padding:4px; color:#4188ef; background:#e9f2ff; border:1px solid #cbdfff; border-radius:50%; pointer-events:none; }
.bac-user-select select { width:100%; height:46px; padding:4px 38px 4px 54px; border:1px solid #cdd8e8; border-radius:7px; color:var(--bac-ink); background:#fff; font-weight:600; outline:0; }
.bac-confirm-row { display:flex; align-items:center; gap:24px; margin-top:9px; }
.bac-summary { display:flex; align-items:center; gap:13px; flex:1; min-height:52px; padding:9px 17px; background:#edfaf6; border:1px solid #d2f0e6; border-radius:8px; font-size:12px; }
.bac-summary svg { flex:0 0 19px; width:19px; height:19px; color:#0caf72; }
.bac-summary strong { display:block; margin-top:2px; }
.bac-submit { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-width:234px; height:46px; padding:0 20px; color:#fff; background:linear-gradient(135deg,#ff4810,#ff741c); border:0; border-radius:7px; box-shadow:0 5px 12px rgba(255,90,22,.22); font-size:14px; font-weight:600; cursor:pointer; }
.bac-submit:disabled { opacity:.55; cursor:not-allowed; }.bac-submit svg { width:18px; height:18px; }
.bac-errors { margin-bottom:12px; padding:10px 14px; color:#991b1b; background:#fef2f2; border:1px solid #fecaca; border-radius:8px; }
@media(max-width:1100px){ .bac-grid{grid-template-columns:1fr}.bac-transfer{flex-direction:row}.bac-transfer-set{display:flex;align-items:center;gap:7px}.bac-lower{grid-template-columns:1fr}.bac-lower > .bac-bottom:first-child,.bac-lower > .bac-bottom:last-child{grid-column:1} }
@media(max-width:767px){ .bac-page{padding:14px 10px}.bac-heading h1{font-size:20px}.bac-steps{padding:14px;gap:6px}.bac-step span{display:none}.bac-step:not(:last-child)::after{display:none}.bac-panel{padding:15px 12px}.bac-filters{grid-template-columns:1fr}.bac-icon-btn{display:none}.bac-tabs{width:100%}.bac-tab{min-width:0;flex:1}.bac-table-wrap{overflow-x:auto}.bac-table{min-width:620px}.bac-confirm-row{align-items:stretch;flex-direction:column}.bac-submit{width:100%} }

@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;
    }
}

/* Bulk Assign Customers: keep page controls isolated from later global button rules. */
.bac-page .bac-tabs {
    display: inline-flex !important;
    align-items: stretch;
    width: auto;
    border: 1px solid #dbe3f0;
    border-radius: 7px;
    overflow: hidden;
    background: #fff;
}

.bac-page .bac-tab {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px;
    min-width: 184px;
    height: 37px !important;
    margin: 0 !important;
    padding: 0 16px !important;
    color: #0f1b3d !important;
    background: #fff !important;
    border: 0 !important;
    border-right: 1px solid #dbe3f0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-weight: 700 !important;
    line-height: 37px !important;
    text-decoration: none !important;
    white-space: nowrap;
}

.bac-page .bac-tab:last-child {
    border-right: 0 !important;
}

.bac-page .bac-tab.active {
    color: #f4511e !important;
    background: #fffaf7 !important;
    box-shadow: inset 0 -2px 0 #ff5a16 !important;
}

.bac-page .bac-tab:hover,
.bac-page .bac-tab:focus {
    color: #f4511e !important;
    text-decoration: none !important;
    outline: 0;
}

.bac-page label.bac-upload-label {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center;
    gap: 8px;
    min-height: 36px;
    margin: 0 !important;
    padding: 8px 14px !important;
    color: #fff !important;
    background: #ff5a16 !important;
    border: 1px solid #ff5a16 !important;
    border-radius: 7px !important;
    opacity: 1 !important;
    font-weight: 700 !important;
    line-height: 18px;
    cursor: pointer !important;
}

.bac-page label.bac-upload-label:hover,
.bac-page label.bac-upload-label:focus {
    color: #fff !important;
    background: #e94b0d !important;
    border-color: #e94b0d !important;
}

.bac-page .bac-upload-label svg {
    display: block;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    color: currentColor;
}

/* Shared GST place-of-supply row used by sale create/edit, POS and purchases. */
.gst-pos-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    width: 100%;
    min-width: 0;
    clear: both;
}

.gst-pos-row .gst-pos-field,
.gst-pos-row .form-group,
.gst-pos-row .input-group,
.gst-pos-row .select2-container {
    min-width: 0;
    width: 100% !important;
}

.gst-pos-row .gst-pos-field {
    float: none !important;
    padding: 0 !important;
}

.gst-pos-row .form-group {
    margin-bottom: 15px;
}

.gst-pos-row .gst-nature-status {
    width: 100%;
    min-height: 34px;
    box-sizing: border-box;
}

.modern-sale-page .sale-section-card--overview .widget-slot > .gst-pos-row {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
    align-self: start;
}

/* Sale create/edit joined controls: one complete border with aligned segments. */
.modern-sale-page .sale-layout-main .form-group > .input-group,
.modern-sale-page .sale-layout-main .sale-total-control .input-group,
.modern-sale-page .sale-layout-main .sale-reward-points-panel__redeemed .input-group {
    display: flex !important;
    align-items: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 34px;
    border: 1px solid #cfd9e7 !important;
    border-radius: 7px !important;
    background: #fff;
    box-sizing: border-box;
}

.modern-sale-page .sale-layout-main .form-group > .input-group > .input-group-addon,
.modern-sale-page .sale-layout-main .sale-total-control .input-group > .input-group-addon,
.modern-sale-page .sale-layout-main .sale-reward-points-panel__redeemed .input-group > .input-group-addon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 38px !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 32px !important;
    padding: 0 !important;
    border: 0 !important;
    border-right: 1px solid #cfd9e7 !important;
    border-radius: 6px 0 0 6px !important;
    background: #f8fafc !important;
    box-sizing: border-box;
}

.modern-sale-page .sale-layout-main .form-group > .input-group > .form-control,
.modern-sale-page .sale-layout-main .form-group > .input-group > .select2-container,
.modern-sale-page .sale-layout-main .sale-total-control .input-group > .form-control,
.modern-sale-page .sale-layout-main .sale-total-control .input-group > .select2-container,
.modern-sale-page .sale-layout-main .sale-reward-points-panel__redeemed .input-group > .form-control {
    flex: 1 1 0 !important;
    width: 1% !important;
    min-width: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
}

.modern-sale-page .sale-layout-main .form-group > .input-group .select2-selection,
.modern-sale-page .sale-layout-main .sale-total-control .input-group .select2-selection {
    height: 32px !important;
    border: 0 !important;
    border-radius: 0 6px 6px 0 !important;
    box-shadow: none !important;
}

.modern-sale-page .sale-layout-main .form-group > .input-group > .input-group-btn,
.modern-sale-page .sale-layout-main .sale-total-control .input-group > .input-group-btn {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    border-left: 1px solid #cfd9e7;
}

.modern-sale-page .sale-layout-main .form-group > .input-group > .input-group-btn > .btn,
.modern-sale-page .sale-layout-main .sale-total-control .input-group > .input-group-btn > .btn {
    height: 32px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 6px 6px 0 !important;
    box-shadow: none !important;
}

.modern-sale-page .sale-layout-section-link {
    font-weight: 500 !important;
}

/* Keep loyalty Redeemed and Available controls level and fully bordered. */
.modern-sale-page .sale-section-card--totals .sale-reward-points-panel,
.modern-sale-page .sale-section-card--totals .sale-total-reward-control {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: end !important;
}

.modern-sale-page .sale-reward-points-panel__redeemed,
.modern-sale-page .sale-reward-points-panel__available {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.modern-sale-page .sale-reward-points-panel__redeemed .form-group {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
}

.modern-sale-page .sale-reward-points-panel__redeemed .input-group {
    height: 34px !important;
    min-height: 34px !important;
    overflow: hidden !important;
}

.modern-sale-page .sale-reward-points-panel__redeemed .input-group > .form-control {
    display: block !important;
    flex: 1 1 0 !important;
    width: 1% !important;
    min-width: 0 !important;
    height: 32px !important;
    margin: 0 !important;
    padding: 6px 10px !important;
    border: 0 !important;
    border-radius: 0 6px 6px 0 !important;
    box-sizing: border-box !important;
}

.modern-sale-page .sale-reward-points-panel__available {
    height: 34px !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 6px 10px !important;
    align-self: end !important;
}

@media (max-width: 767px) {
    .gst-pos-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

@media (max-width: 767px) {
    .bac-page .bac-tabs {
        display: flex !important;
        width: 100%;
    }

    .bac-page .bac-tab {
        flex: 1 1 50%;
        min-width: 0;
    }
}

/* Match POS joined-control icon widths on desktop and mobile. */
#add_pos_sell_form .pos-joined-input,
#edit_pos_sell_form .pos-joined-input {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 34px !important;
}

#add_pos_sell_form .pos-joined-input > .form-control,
#edit_pos_sell_form .pos-joined-input > .form-control,
#add_pos_sell_form .pos-joined-input > .select2-container,
#edit_pos_sell_form .pos-joined-input > .select2-container {
    display: block !important;
    flex: 1 1 0 !important;
    float: none !important;
    width: 0 !important;
    max-width: none !important;
    min-width: 0 !important;
}

#add_pos_sell_form .pos-joined-input > .form-control,
#edit_pos_sell_form .pos-joined-input > .form-control {
    float: none !important;
}

#add_pos_sell_form .pos-joined-input > .input-group-addon,
#edit_pos_sell_form .pos-joined-input > .input-group-addon {
    flex: 0 0 34px !important;
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    padding: 0 !important;
}

#add_pos_sell_form .pos-joined-input > .input-group-btn,
#edit_pos_sell_form .pos-joined-input > .input-group-btn {
    display: inline-flex !important;
    align-items: stretch !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    white-space: nowrap !important;
}

#add_pos_sell_form .pos-joined-input > .input-group-btn > .btn,
#edit_pos_sell_form .pos-joined-input > .input-group-btn > .btn {
    flex: 0 0 34px !important;
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    padding: 0 !important;
}

/* Shared joined form controls: keep addons/buttons bordered and let enhanced
   selects (including Payment Account) use all available horizontal space. */
.content-wrapper .input-group,
.modal .input-group {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.content-wrapper .input-group > .form-control,
.modal .input-group > .form-control,
.content-wrapper .input-group > .select2-container,
.modal .input-group > .select2-container {
    flex: 1 1 auto;
    width: 1% !important;
    min-width: 0;
}

.content-wrapper .input-group > .select2-container .select2-selection--single,
.modal .input-group > .select2-container .select2-selection--single {
    box-sizing: border-box;
    width: 100%;
    min-height: 34px;
    border: 1px solid #cfd9e7 !important;
    box-shadow: none !important;
}

.content-wrapper .input-group > .input-group-addon,
.modal .input-group > .input-group-addon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    flex: 0 0 38px;
    width: 38px;
    min-width: 38px;
    padding: 0 9px;
    border: 1px solid #cfd9e7 !important;
    background: #f8fafc;
}

.content-wrapper .input-group > .input-group-btn,
.modal .input-group > .input-group-btn {
    display: inline-flex;
    align-items: stretch;
    flex: 0 0 auto;
    width: auto;
}

.content-wrapper .input-group > .input-group-btn > .btn,
.modal .input-group > .input-group-btn > .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 38px;
    min-height: 34px;
    margin: 0;
    border: 1px solid #cfd9e7 !important;
    background: #fff;
    box-shadow: none;
}

.content-wrapper .input-group > .input-group-addon:first-child,
.modal .input-group > .input-group-addon:first-child,
.content-wrapper .input-group > .input-group-btn:first-child > .btn:first-child,
.modal .input-group > .input-group-btn:first-child > .btn:first-child {
    border-radius: 6px 0 0 6px !important;
}

.content-wrapper .input-group > .input-group-addon:first-child + .form-control,
.modal .input-group > .input-group-addon:first-child + .form-control,
.content-wrapper .input-group > .input-group-addon:first-child + .select2-container .select2-selection--single,
.modal .input-group > .input-group-addon:first-child + .select2-container .select2-selection--single {
    border-left: 0 !important;
    border-radius: 0 6px 6px 0 !important;
}

.content-wrapper .input-group > .input-group-btn:first-child,
.modal .input-group > .input-group-btn:first-child {
    margin-right: -1px;
}

.content-wrapper .input-group > .input-group-btn:last-child,
.modal .input-group > .input-group-btn:last-child {
    margin-left: -1px;
}

.content-wrapper .input-group > .input-group-btn:last-child > .btn:last-child,
.modal .input-group > .input-group-btn:last-child > .btn:last-child {
    border-radius: 0 6px 6px 0 !important;
}

.content-wrapper .input-group > .input-group-btn:first-child + .form-control,
.modal .input-group > .input-group-btn:first-child + .form-control {
    border-radius: 0 !important;
}

.content-wrapper .input-group .account-dropdown + .select2-container,
.modal .input-group .account-dropdown + .select2-container,
.content-wrapper .input-group #change_return_account + .select2-container,
.modal .input-group #change_return_account + .select2-container {
    flex: 1 1 auto;
    width: 1% !important;
    min-width: 0;
}

/* Keep every enhanced dropdown visibly bounded across forms and filter panels. */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
.select2-container--classic .select2-selection--single,
.select2-container--classic .select2-selection--multiple {
    border: 1px solid #cfd9e7 !important;
    background-color: #fff;
    box-shadow: none;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--multiple,
.select2-container--classic.select2-container--focus .select2-selection--single,
.select2-container--classic.select2-container--open .select2-selection--single {
    border-color: #fb923c !important;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, .1);
}

body.relite-dark .select2-container--default .select2-selection--single,
body.relite-dark .select2-container--default .select2-selection--multiple,
body.relite-dark .select2-container--classic .select2-selection--single,
body.relite-dark .select2-container--classic .select2-selection--multiple {
    border-color: #38516c !important;
    background-color: #102844;
}

/* Zoho-inspired horizontal subscription plan panels */
.subscription-billing-page .package-card-grid {
    display: block !important;
    margin: 0 !important
}

    .subscription-billing-page .package-card-grid > .zoho-plan-column {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        padding: 0 !important
    }

.subscription-billing-page .zoho-plan-column + .zoho-plan-column {
    margin-top: 16px
}

.subscription-billing-page .zoho-plan-column .relite-package-card {
    display: grid !important;
    grid-template-columns: 245px minmax(0,1fr) 255px;
    align-items: stretch;
    min-height: 292px;
    overflow: hidden !important;
    border: 1px solid #dbe3ed !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 32px rgba(15,31,61,.07) !important
}

    .subscription-billing-page .zoho-plan-column .relite-package-card:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 16px 38px rgba(15,31,61,.11) !important
    }

    .subscription-billing-page .zoho-plan-column .relite-package-card.is-popular {
        border: 2px solid #f97316 !important
    }

.subscription-billing-page .zoho-plan-column .relite-package-ribbon {
    top: 18px !important;
    right: -38px !important;
    z-index: 3;
    background: #f97316 !important
}

.subscription-billing-page .zoho-plan-column .relite-package-visual {
    align-self: stretch;
    display: grid !important;
    place-items: center;
    height: auto !important;
    min-height: 292px;
    margin: 0 !important;
    background: linear-gradient(145deg,#fff7ed,#fff) !important;
    border: 0 !important;
    border-right: 1px solid #edf0f4 !important;
    border-radius: 0 !important
}

    .subscription-billing-page .zoho-plan-column .relite-package-visual:after {
        content: 'Built for modern business';
        display: block;
        margin-top: -70px;
        color: #f97316;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .6px;
        text-transform: uppercase
    }

    .subscription-billing-page .zoho-plan-column .relite-package-visual svg {
        width: 172px;
        height: 112px;
        stroke: #f97316 !important
    }

.subscription-billing-page .zoho-plan-content {
    min-width: 0;
    padding: 30px 34px
}

.subscription-billing-page .zoho-plan-column .relite-package-summary {
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 0 17px !important;
    text-align: left !important;
    border-bottom: 1px solid #e7ebf1 !important
}

.subscription-billing-page .zoho-plan-label {
    display: block;
    margin-bottom: 7px;
    color: #f97316;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1.4px
}

.subscription-billing-page .zoho-plan-column .relite-package-summary h2 {
    margin: 0 0 7px !important;
    color: #0b1f3a !important;
    font-size: 25px !important
}

.subscription-billing-page .zoho-plan-column .relite-package-summary p {
    min-height: 0 !important;
    margin: 0 !important;
    color: #69778d !important;
    font-size: 12px !important
}

.subscription-billing-page .zoho-plan-benefits {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 0 28px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none
}

    .subscription-billing-page .zoho-plan-benefits li {
        display: flex;
        align-items: flex-start;
        gap: 9px;
        padding: 7px 0;
        color: #152238;
        font-size: 12px
    }

    .subscription-billing-page .zoho-plan-benefits svg {
        flex: 0 0 16px;
        width: 16px;
        height: 16px;
        fill: none;
        stroke: #14a76c;
        stroke-width: 2.1;
        stroke-linecap: round;
        stroke-linejoin: round
    }

.subscription-billing-page .zoho-plan-action-panel {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    padding: 28px 24px;
    background: #fbfcfe;
    border-left: 1px solid #edf0f4
}

.subscription-billing-page .zoho-plan-column .relite-package-price {
    display: block !important;
    margin: 0 0 15px !important;
    padding: 0 !important;
    text-align: center !important;
    border: 0 !important
}

    .subscription-billing-page .zoho-plan-column .relite-package-price strong {
        display: block;
        color: #0b1f3a !important;
        font-size: 29px !important;
        line-height: 1.2
    }

    .subscription-billing-page .zoho-plan-column .relite-package-price span {
        display: block;
        margin-top: 7px;
        color: #6c788d !important;
        font-size: 11px !important
    }

.subscription-billing-page .zoho-plan-column .zoho-extra-benefits {
    min-height: 0 !important;
    margin: 0 0 17px !important;
    padding: 0 !important;
    border: 0 !important
}

    .subscription-billing-page .zoho-plan-column .zoho-extra-benefits li {
        padding: 4px 0 !important;
        font-size: 10px !important
    }

.subscription-billing-page .zoho-plan-column .relite-package-action {
    width: 100%;
    min-height: 43px;
    margin: 0 !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    font-weight: 750
}

    .subscription-billing-page .zoho-plan-column .relite-package-action:not(.is-current) {
        color: #fff !important;
        background: #f97316 !important;
        border-color: #f97316 !important
    }

        .subscription-billing-page .zoho-plan-column .relite-package-action:not(.is-current):hover {
            background: #e85d0a !important
        }

    .subscription-billing-page .zoho-plan-column .relite-package-action.is-current {
        color: #607086 !important;
        background: #eef2f7 !important;
        border-color: #d9e1eb !important
    }

@media(max-width:1050px) {
    .subscription-billing-page .zoho-plan-column .relite-package-card {
        grid-template-columns: 190px minmax(0,1fr)
    }

    .subscription-billing-page .zoho-plan-action-panel {
        grid-column: 1/-1;
        display: grid;
        grid-template-columns: 1fr 220px;
        align-items: center;
        gap: 20px;
        padding: 18px 28px;
        border-top: 1px solid #edf0f4;
        border-left: 0
    }

    .subscription-billing-page .zoho-plan-column .relite-package-price {
        margin: 0 !important;
        text-align: left !important
    }

    .subscription-billing-page .zoho-plan-column .zoho-extra-benefits {
        display: none !important
    }

    .subscription-billing-page .zoho-plan-column .relite-package-visual {
        min-height: 260px
    }
}

@media(max-width:720px) {
    .subscription-billing-page .zoho-plan-column .relite-package-card {
        display: block !important
    }

    .subscription-billing-page .zoho-plan-column .relite-package-visual {
        min-height: 165px;
        border-right: 0 !important;
        border-bottom: 1px solid #edf0f4 !important
    }

        .subscription-billing-page .zoho-plan-column .relite-package-visual:after {
            margin-top: -30px
        }

    .subscription-billing-page .zoho-plan-content {
        padding: 24px 20px
    }

    .subscription-billing-page .zoho-plan-benefits {
        grid-template-columns: 1fr
    }

    .subscription-billing-page .zoho-plan-action-panel {
        display: block;
        padding: 22px 20px
    }

    .subscription-billing-page .zoho-plan-column .relite-package-price {
        text-align: center !important;
        margin-bottom: 16px !important
    }
}

/* Modern add/edit expense pages. */
.modern-expense-page-header,
.modern-expense-form-page,
.modern-expense-form-page * {
    font-family: 'Inter', sans-serif !important;
    box-sizing: border-box;
}

.modern-expense-page-header {
    padding-top: 16px !important;
    padding-bottom: 12px !important;
}

    .modern-expense-page-header h1 {
        margin: 0 0 3px !important;
        color: #111827 !important;
        font-size: 21px !important;
        font-weight: 600 !important;
    }

    .modern-expense-page-header p {
        margin: 4px 0 0;
        color: #64748b;
        font-size: 12px;
    }

.modern-expense-section-heading > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #f97316;
    border: 1px solid #fed7aa;
    background: #fff7ed;
}

.modern-expense-section-heading svg,
.modern-expense-actions svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.modern-expense-inline-icon {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.modern-expense-form-page {
    width: 100%;
    padding-top: 0 !important;
    padding-bottom: 34px !important;
    color: #17213a;
}

    .modern-expense-form-page .modern-expense-card,
    .modern-expense-form-page #recur_expense_div,
    .modern-expense-form-page #payment_rows_div {
        overflow: hidden;
        margin-bottom: 14px;
        border: 1px solid #dbe4ef !important;
        border-radius: 12px !important;
        background: #fff !important;
        box-shadow: 0 4px 15px rgba(15, 35, 70, .05) !important;
    }

        .modern-expense-form-page .modern-expense-card  .widget-slot {
            padding: 18px 18px 5px;
        }

.modern-expense-section-heading {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 17px;
    border-bottom: 1px solid #e5ebf3;
    background: linear-gradient(90deg, #fffaf5, #fff);
}

    .modern-expense-section-heading > span {
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
        border-radius: 9px;
    }

    .modern-expense-section-heading strong,
    .modern-expense-section-heading small {
        display: block;
    }

    .modern-expense-section-heading strong {
        margin-bottom: 2px;
        color: #15213a;
        font-size: 14px;
    }

    .modern-expense-section-heading small {
        color: #64748b;
        font-size: 11px;
        font-weight: 400;
    }

.modern-expense-form-page .form-group {
    margin-bottom: 16px;
}

    .modern-expense-form-page .form-group > label {
        margin-bottom: 7px;
        color: #17213a;
        font-size: 12px;
        font-weight: 700;
    }

.modern-expense-form-page .form-control,
.modern-expense-form-page .select2-selection,
.modern-expense-form-page .input-group-addon {
    min-height: 39px;
    border-color: #cfdae8 !important;
    box-shadow: none !important;
}

.modern-expense-form-page .form-control {
    border-radius: 7px !important;
    font-size: 13px;
}

.modern-expense-form-page textarea.form-control {
    min-height: 96px;
    resize: vertical;
}

.modern-expense-form-page .input-group .form-control {
    border-radius: 0 7px 7px 0 !important;
}

.modern-expense-form-page .input-group-addon {
    min-width: 41px;
    padding: 10px 12px;
    color: #31547c;
    border-radius: 7px 0 0 7px !important;
    background: #f8fafc;
}

.modern-expense-form-page .select2-container {
    width: 100% !important;
}

.modern-expense-form-page .select2-selection {
    border-radius: 7px !important;
}

.modern-expense-form-page .select2-selection__rendered {
    line-height: 37px !important;
    padding-left: 12px !important;
}

.modern-expense-form-page .select2-selection__arrow {
    height: 37px !important;
}

.modern-expense-form-page .help-block {
    margin: 5px 0 0;
    color: #7b8ba4;
    font-size: 10px;
}

.modern-expense-form-page input[type=file] {
    width: 100%;
    min-height: 39px;
    padding: 7px;
    border: 1px dashed #c9d6e6;
    border-radius: 7px;
    background: #f8fafc;
}

.modern-expense-form-page #recur_expense_div  .box-header,
.modern-expense-form-page #payment_rows_div  .box-header {
    padding: 13px 17px;
    border-bottom: 1px solid #e5ebf3;
    background: linear-gradient(90deg, #fffaf5, #fff);
}

    .modern-expense-form-page #recur_expense_div  .box-header .box-title,
    .modern-expense-form-page #payment_rows_div  .box-header .box-title {
        color: #15213a;
        font-size: 14px;
        font-weight: 600;
    }

.modern-expense-form-page #recur_expense_div  .widget-slot,
.modern-expense-form-page #payment_rows_div  .widget-slot {
    padding: 17px;
}

.modern-expense-form-page .payment_row hr {
    border-color: #e5ebf3;
}

.modern-expense-payment-card {
    overflow: hidden;
    margin-bottom: 14px;
}

.modern-expense-payment-body {
    padding: 18px 18px 4px;
}

.modern-expense-payment-card--actions .modern-expense-actions {
    border-top: 0;
}

.modern-expense-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 0;
    padding: 15px 18px;
    border-top: 1px solid #e2e8f0;
}

.modern-expense-cancel,
.modern-expense-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 120px;
    min-height: 38px;
    padding: 9px 16px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 750;
    text-decoration: none !important;
}

.modern-expense-cancel {
    color: #263a59;
    border: 1px solid #cbd7e6;
    background: #fff;
}

.modern-expense-submit {
    color: #fff;
    border: 1px solid #f97316;
    background: #f97316;
    box-shadow: 0 5px 12px rgba(249,115,22,.18);
}

    .modern-expense-submit:hover {
        background: #ea650c;
    }

@media (max-width: 767px) {
    .modern-expense-form-page .modern-expense-card  .widget-slot,
    .modern-expense-form-page #recur_expense_div  .widget-slot,
    .modern-expense-form-page #payment_rows_div  .widget-slot {
        padding: 13px;
    }

    .modern-expense-payment-body {
        padding: 13px;
    }

    .modern-expense-actions {
        padding: 12px 13px;
        background: rgba(255,255,255,.96);
    }

    .modern-expense-cancel,
    .modern-expense-submit {
        flex: 1;
        min-width: 0;
    }
}

/* Modern Expense Report — Product Sell Report visual language. */
.expense-report-modern, .expense-report-modern * {
    font-family: 'Inter',sans-serif !important;
    box-sizing: border-box
}

.expense-report-modern {
    padding: 0 8px 30px;
    color: #101a33
}

.er-header h1 {
    display: flex;
    align-items: center;
    gap: 8px
}

    .er-header h1 svg {
        width: 18px;
        height: 18px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8
    }

.er-filter-card {
    margin-bottom: 12px;
    padding: 14px 16px !important
}

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

    .er-filter-grid label {
        display: block;
        margin-bottom: 7px;
        font-size: 12px;
        font-weight: 700
    }

    .er-filter-grid .form-control, .er-filter-grid .select2-selection {
        height: 38px !important;
        border-color: #d4deec !important;
        border-radius: 7px !important;
        font-size: 12px !important
    }

.er-filter-actions {
    grid-column: span 2;
    display: flex !important;
    justify-content: flex-end;
    gap: 10px
}

    .er-filter-actions .gstr1-btn {
        width: auto;
        min-width: 126px;
        height: 38px;
        justify-content: center;
        text-decoration: none
    }

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

    .er-kpi-grid .gstr1-kpi {
        min-width: 0;
        border-radius: 0
    }

        .er-kpi-grid .gstr1-kpi:first-child {
            border-radius: 12px 0 0 12px
        }

        .er-kpi-grid .gstr1-kpi:last-child {
            border-radius: 0 12px 12px 0
        }

    .er-kpi-grid strong {
        white-space: nowrap;
        font-size: 16px
    }

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

.er-chart-card {
    min-height: 275px;
    padding: 16px;
    border: 1px solid #dce5f0;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 3px 10px rgba(18,44,82,.04)
}

    .er-chart-card h3 {
        margin: 0 0 18px;
        color: #082c72;
        font-size: 13px;
        font-weight: 600
    }

.er-trend {
    display: flex;
    height: 210px;
    align-items: flex-end;
    gap: 7px;
    padding: 8px 4px 0;
    border-bottom: 1px solid #dae3ef;
    overflow-x: auto
}

    .er-trend > span {
        display: flex;
        min-width: 24px;
        height: 100%;
        flex: 1;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center
    }

    .er-trend i {
        display: block;
        width: 70%;
        height: var(--h);
        min-height: 4px;
        border-radius: 5px 5px 0 0;
        background: linear-gradient(#27b3d1,#1b75e8)
    }

    .er-trend small {
        margin-top: 6px;
        color: #6b7b93;
        font-size: 8px;
        white-space: nowrap
    }

.er-donut-wrap {
    display: grid;
    grid-template-columns: 145px 1fr;
    align-items: center;
    gap: 17px
}

.er-donut {
    display: flex;
    width: 145px;
    height: 145px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    position: relative
}

    .er-donut:after {
        content: "";
        position: absolute;
        inset: 29px;
        border-radius: 50%;
        background: #fff
    }

    .er-donut b, .er-donut small {
        z-index: 1
    }

    .er-donut b {
        font-size: 14px
    }

    .er-donut small {
        color: #718096;
        font-size: 10px
    }

.er-donut-wrap ul {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none
}

.er-donut-wrap li {
    display: grid;
    grid-template-columns: 8px 1fr auto;
    align-items: center;
    gap: 7px;
    font-size: 10px
}

    .er-donut-wrap li i {
        width: 8px;
        height: 8px;
        border-radius: 50%
    }

.er-bars {
    display: grid;
    gap: 14px
}

    .er-bars > div {
        display: grid;
        grid-template-columns: 80px 1fr 75px;
        align-items: center;
        gap: 8px;
        font-size: 9px
    }

        .er-bars > div > span, .er-bars strong {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap
        }

    .er-bars i {
        height: 8px;
        border-radius: 6px;
        background: #eaf0f8
    }

        .er-bars i b {
            display: block;
            height: 100%;
            border-radius: 6px;
            background: linear-gradient(90deg,#176ae6,#652bd9)
        }

    .er-bars strong {
        text-align: right
    }

.er-main-card {
    padding: 0 !important
}

    .er-main-card .gstr1-table-title {
        padding: 12px 14px
    }

.er-table-tools, .er-search {
    display: flex;
    align-items: center;
    gap: 9px
}

.er-search {
    position: relative
}

    .er-search svg {
        position: absolute;
        left: 11px;
        width: 16px;
        height: 16px;
        fill: none;
        stroke: #73839b;
        stroke-width: 1.8
    }

    .er-search input {
        width: 215px;
        height: 36px;
        padding-left: 34px;
        border-radius: 8px
    }

.er-table-wrap {
    max-height: 485px;
    overflow: auto
}

    .er-table-wrap::-webkit-scrollbar {
        width: 6px;
        height: 6px
    }

    .er-table-wrap::-webkit-scrollbar-thumb {
        border-radius: 9px;
        background: #9eabba
    }

    .er-table-wrap table {
        min-width: 1450px
    }

    .er-table-wrap th, .er-table-wrap td {
        padding: 10px 9px !important;
        font-size: 12px !important;
        vertical-align: middle !important
    }

.er-money {
    text-align: right;
    font-variant-numeric: tabular-nums
}

.er-due {
    color: #ef2b37
}

.er-status {
    display: inline-flex;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 700
}

.er-status--paid {
    color: #168044;
    background: #e4f7ea
}

.er-status--partial {
    color: #bd6a00;
    background: #fff1d8
}

.er-status--due {
    color: #dd243e;
    background: #ffe4e8
}

.er-table-wrap tfoot td {
    color: #075be8;
    font-weight: 600;
    background: #f8fbff
}

.er-note, .ir-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 14px;
    padding: 17px 20px;
    border: 1px solid #d7e2f1;
    border-radius: 11px;
    color: #24334d;
    background: #fff;
    box-shadow: 0 3px 10px rgba(18,44,82,.03);
    font-size: 12px
}

    .er-note svg, .ir-note svg {
        width: 18px;
        height: 18px;
        flex: 0 0 18px;
        fill: none;
        stroke: #0769ef;
        stroke-width: 1.8
    }

    .er-note b, .ir-note b {
        color: #075be8
    }

    .er-note strong, .ir-note strong {
        white-space: nowrap
    }

@media(max-width:1300px) {
    .er-filter-grid {
        grid-template-columns: repeat(4,minmax(0,1fr))
    }

    .er-kpi-grid {
        grid-template-columns: repeat(3,1fr)
    }

        .er-kpi-grid .gstr1-kpi {
            border-radius: 0 !important
        }

    .er-chart-grid {
        grid-template-columns: 1fr 1fr
    }
}

@media(max-width:767px) {
    .expense-report-modern {
        padding: 0 0 24px
    }

    .er-filter-grid, .er-kpi-grid, .er-chart-grid {
        grid-template-columns: 1fr
    }

    .er-filter-actions {
        grid-column: auto;
        justify-content: stretch
    }

        .er-filter-actions .gstr1-btn {
            flex: 1;
            min-width: 0
        }

    .er-kpi-grid {
        gap: 8px
    }

        .er-kpi-grid .gstr1-kpi {
            border-radius: 10px !important
        }

    .er-chart-card {
        min-height: auto
    }

    .er-donut-wrap {
        grid-template-columns: 120px 1fr
    }

    .er-donut {
        width: 120px;
        height: 120px
    }

    .er-table-tools {
        width: 100%;
        flex-direction: column;
        align-items: stretch
    }

    .er-search input {
        width: 100%
    }

    .er-note, .ir-note {
        flex-wrap: wrap
    }

        .er-note span, .ir-note span {
            width: calc(100% - 27px)
        }
}

/* Unified typography for every Superadmin module screen. */
.superadmin-module,
.superadmin-module button,
.superadmin-module input,
.superadmin-module select,
.superadmin-module textarea,
.superadmin-module table,
.superadmin-module .select2-container,
.superadmin-module .select2-dropdown,
.superadmin-module .modal,
.superadmin-module .tooltip,
.superadmin-module .popover,
.superadmin-module .highcharts-container,
.superadmin-module .highcharts-container text {
    font-family: "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
}

/* Product Purchase Report — Product Sell Report visual system. */
.product-purchase-dashboard, .product-purchase-dashboard * {
    box-sizing: border-box;
    font-family: 'Inter',sans-serif !important
}

.product-purchase-dashboard {
    width: 100%;
    max-width: none;
    padding-bottom: 28px;
    color: #111a35
}

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

    .ppr-filter-grid > div {
        min-width: 0
    }

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

    .ppr-filter-grid .form-control, .ppr-filter-grid .select2-selection {
        height: 38px !important;
        min-height: 38px !important;
        border: 1px solid #d2ddec !important;
        border-radius: 7px !important;
        background: #fff !important;
        box-shadow: none !important
    }

    .ppr-filter-grid .select2-selection__rendered {
        padding-left: 12px !important;
        color: #172554 !important;
        line-height: 36px !important
    }

    .ppr-filter-grid .select2-selection__arrow {
        height: 36px !important
    }

    .ppr-filter-grid .select2-selection__clear {
        display: none !important
    }

.ppr-filter-actions {
    grid-column: 5/7;
    display: grid;
    grid-template-columns: 118px 118px;
    gap: 14px;
    width: max-content;
    justify-self: end
}

    .ppr-filter-actions .gstr1-btn {
        width: 118px;
        min-width: 118px;
        height: 34px
    }

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

    .ppr-kpi-grid .gstr1-kpi {
        min-width: 0;
        min-height: 96px;
        padding: 13px 11px
    }

    .ppr-kpi-grid .gstr1-kpi-icon {
        width: 44px;
        height: 44px;
        flex: 0 0 44px
    }

    .ppr-kpi-grid .gstr1-kpi strong {
        overflow: hidden;
        font-size: 17px;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .ppr-kpi-grid .gstr1-kpi em {
        font-size: 10px
    }

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

.ppr-chart-card {
    min-width: 0;
    min-height: 255px;
    padding: 15px;
    border: 1px solid #dce5f0;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 3px 12px rgba(16,24,40,.045)
}

    .ppr-chart-card h3 {
        margin: 0 0 18px;
        color: #0a2b72;
        font-size: 12px;
        font-weight: 600
    }

.ppr-bars p {
    color: #8a97aa;
    font-size: 11px
}

.ppr-empty-donut {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 150px;
    height: 150px;
    margin: 20px auto;
    border-radius: 50%;
    background: radial-gradient(circle,#fff 0 48%,transparent 49%),conic-gradient(#1473e6 0 34%,#24a148 34% 58%,#f97316 58% 75%,#172a8a 75% 90%,#a855f7 90%)
}

    .ppr-empty-donut strong {
        font-size: 13px
    }

    .ppr-empty-donut small {
        margin-top: 3px;
        color: #667085;
        font-size: 9px
    }

.ppr-trend-placeholder svg {
    width: 100%;
    height: 155px
}

.ppr-trend-placeholder path {
    fill: none;
    stroke: #21afd2;
    stroke-width: 3
}

    .ppr-trend-placeholder path.previous {
        stroke: #f97316;
        stroke-width: 2
    }

.ppr-trend-placeholder p {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #667085;
    font-size: 9px
}

    .ppr-trend-placeholder p i {
        width: 14px;
        height: 5px;
        background: #21afd2
    }

        .ppr-trend-placeholder p i + i {
            margin-left: 8px;
            background: #f97316
        }

.ppr-main {
    overflow: hidden;
    border: 1px solid #dce5f0;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 3px 12px rgba(16,24,40,.045)
}

    .ppr-main .gstr1-table-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
        min-height: 56px;
        padding: 11px 15px
    }

        .ppr-main .gstr1-table-title h3 {
            margin: 0;
            color: #172554;
            font-size: 13px;
            font-weight: 600
        }

.ppr-table-tools {
    display: flex;
    align-items: center;
    gap: 9px
}

.ppr-table-wrap {
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 #edf2f7
}

.product-purchase-dashboard #product_purchase_report_table {
    width: 100% !important;
    min-width: 1500px;
    margin: 0 !important
}

    .product-purchase-dashboard #product_purchase_report_table th, .product-purchase-dashboard #product_purchase_report_table td {
        padding: 9px 8px !important;
        border-color: #e6ebf2 !important;
        color: #172554;
        font-size: 12px !important;
        line-height: 1.35;
        white-space: nowrap
    }

    .product-purchase-dashboard #product_purchase_report_table thead th {
        background: #f8fafc;
        text-align: center;
        font-weight: 600
    }

    .product-purchase-dashboard #product_purchase_report_table tbody tr:nth-child(even) {
        background: #fbfcfe
    }

    .product-purchase-dashboard #product_purchase_report_table tbody tr:hover {
        background: #f2f6ff
    }

    .product-purchase-dashboard #product_purchase_report_table td:nth-child(9), .product-purchase-dashboard #product_purchase_report_table td:nth-child(11), .product-purchase-dashboard #product_purchase_report_table td:nth-child(12) {
        text-align: right
    }

    .product-purchase-dashboard #product_purchase_report_table tfoot td {
        color: #0655e8 !important;
        font-weight: 600
    }

.product-purchase-dashboard .dataTables_wrapper > .row:first-child {
    display: none
}

.report-standard-toolbar {
    display: flex;
    min-height: 52px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 14px;
    border-top: 1px solid #edf1f5;
    border-bottom: 1px solid #edf1f5;
    background: #fff
}
.report-length-control { display: inline-flex; align-items: center; gap: 5px; color: #172033; font-size: 12px }
.report-length-control select { width: 74px; height: 36px; padding: 5px 10px; border: 1px solid #ccd8e7; border-radius: 7px; background: #fff }
.report-standard-toolbar > :last-child { margin-left: auto }
.report-table-footer { display: flex; min-height: 58px; align-items: center; justify-content: space-between; gap: 15px; padding: 10px 14px; border-top: 1px solid #edf1f5; background: #fff }
.report-table-info { color: #64748b; font-size: 12px }
.report-table-pagination { display: flex; align-items: center; gap: 4px }
.report-table-pagination button { min-width: 30px; height: 32px; padding: 0 8px; color: #61728c; border: 1px solid transparent; border-radius: 6px; background: transparent; font-size: 12px }
.report-table-pagination button.is-active { color: #ff5b18; border-color: #ffc3a7; background: #fff7f2 }
.report-table-pagination button:disabled { opacity: .45; cursor: default }
.report-table-pagination span { padding: 0 3px; color: #94a3b8 }
@media (max-width:767px) { .report-standard-toolbar,.report-table-footer { align-items: stretch; flex-direction: column } .report-standard-toolbar > :last-child { width:100%; margin-left:0 } .report-table-pagination { overflow-x:auto } }

.ppr-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 8px;
    border-radius: 99px;
    background: #fff1f2;
    color: #e11d48;
    font-size: 9px;
    font-weight: 700
}

.ppr-status--paid {
    background: #eafbf0;
    color: #159447
}

.ppr-status--partial {
    background: #fff7e6;
    color: #d97706
}

.ppr-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 12px;
    padding: 14px 16px;
    border: 1px solid #dce5f0;
    border-radius: 9px;
    background: #fff;
    color: #344054;
    font-size: 10px
}

    .ppr-note svg {
        width: 18px;
        height: 18px;
        fill: none;
        stroke: #145fe8;
        stroke-width: 1.8
    }

    .ppr-note strong {
        display: block;
        margin-bottom: 4px;
        color: #0a2b72
    }

    .ppr-note span {
        color: #667085
    }

.ppr-bars > div {
    display: grid;
    grid-template-columns: minmax(100px,1fr) minmax(80px,1.25fr) 70px;
    align-items: center;
    gap: 8px;
    margin: 12px 0;
    color: #172554;
    font-size: 9px
}

.ppr-bars span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.ppr-bars i {
    display: block;
    height: 9px;
    overflow: hidden;
    border-radius: 2px;
    background: #edf2fb
}

    .ppr-bars i b {
        display: block;
        height: 100%;
        background: linear-gradient(90deg,#1558cc,#4f78dc)
    }

.ppr-bars--green i b {
    background: linear-gradient(90deg,#078d49,#18b663)
}

.ppr-bars strong {
    text-align: right;
    font-size: 9px
}

@media(max-width:1200px) {
    .ppr-filter-grid {
        grid-template-columns: repeat(4,minmax(0,1fr))
    }

    .ppr-filter-actions {
        grid-column: 3/5
    }

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

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

@media(max-width:767px) {
    .product-purchase-dashboard {
        padding-left: 8px;
        padding-right: 8px
    }

    .ppr-filter-grid, .ppr-kpi-grid, .ppr-chart-grid {
        grid-template-columns: 1fr
    }

    .ppr-filter-actions {
        grid-column: 1;
        width: 100%;
        grid-template-columns: 1fr
    }

        .ppr-filter-actions .gstr1-btn {
            width: 100%;
            min-width: 0
        }

    .ppr-main .gstr1-table-title, .ppr-table-tools {
        align-items: stretch;
        flex-direction: column
    }

        .ppr-table-tools .ir-search-wrap {
            width: 100%
        }
}

@media(min-width:768px) {
    .product-purchase-dashboard .ppr-filter-actions {
        grid-column: auto !important;
        align-self: end
    }
}

.product-purchase-dashboard .ppr-note {
    align-items: center;
    color: #344054
}

    .product-purchase-dashboard .ppr-note svg {
        color: #0969f6;
        stroke: currentColor
    }

    .product-purchase-dashboard .ppr-note > div {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        line-height: 1.8
    }

    .product-purchase-dashboard .ppr-note strong {
        flex: 0 0 auto;
        margin: 0;
        color: #172554
    }

    .product-purchase-dashboard .ppr-note span {
        color: #344054
    }

        .product-purchase-dashboard .ppr-note span b {
            color: #075fe9;
            font-weight: 700
        }

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

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

    .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 .select2-container,
    .srr-filter-grid .select2-container {
        width: 100% !important;
    }

        .psd-filter-grid .select2-container .select2-selection--single,
        .srr-filter-grid .select2-container .select2-selection--single {
            height: 38px !important;
            min-height: 38px !important;
            border: 1px solid #d8e0eb !important;
            border-radius: 6px !important;
            background: #fff !important;
        }

    .psd-filter-grid .select2-selection--single .select2-selection__rendered,
    .srr-filter-grid .select2-selection--single .select2-selection__rendered {
        height: 36px !important;
        padding: 0 30px 0 12px !important;
        color: #17223b !important;
        line-height: 36px !important;
        font-size: 12px !important;
    }

    .psd-filter-grid .select2-selection--single .select2-selection__arrow,
    .srr-filter-grid .select2-selection--single .select2-selection__arrow {
        height: 36px !important;
    }

    .psd-filter-grid .select2-selection__clear,
    .srr-filter-grid .select2-selection__clear {
        display: none !important;
    }

    .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: 600;
        }

.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;
    }

.psd-main > [hidden],
.psd-summary-panel[hidden],
.psd-chart-grid[hidden] {
    display: none !important;
}

.psd-main .gstr1-table-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px;
}

    .psd-main .gstr1-table-title h3 {
        margin: 0;
    }

.psd-table-search {
    width: 220px;
    max-width: 40vw;
    height: 34px;
    margin-left: auto;
    font-family: 'Inter', sans-serif !important;
    font-size: 12px;
}

.psd-table-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-left: auto;
}

    .psd-table-tools .psd-table-search {
        margin-left: 0;
    }

    .psd-table-tools .psd-tab-excel {
        min-height: 34px;
        padding: 7px 12px;
        white-space: nowrap;
    }

.psd-cell-center {
    text-align: center !important;
}

.psd-cell-number {
    text-align: right !important;
}

.psd-main > .table-responsive > #psd-table th:nth-child(7),
.psd-main > .table-responsive > #psd-table td:nth-child(7),
.psd-main > .table-responsive > #psd-table th:nth-child(8),
.psd-main > .table-responsive > #psd-table td:nth-child(8),
.psd-main > .table-responsive > #psd-table th:nth-child(9),
.psd-main > .table-responsive > #psd-table td:nth-child(9),
.psd-main > .table-responsive > #psd-table th:nth-child(10),
.psd-main > .table-responsive > #psd-table td:nth-child(10),
.psd-main > .table-responsive > #psd-table th:nth-child(17),
.psd-main > .table-responsive > #psd-table td:nth-child(17),
.psd-main > .table-responsive > #psd-table th:nth-child(18),
.psd-main > .table-responsive > #psd-table td:nth-child(18) {
    text-align: center !important;
}

.psd-main > .table-responsive > #psd-table th:nth-child(n+11):nth-child(-n+16),
.psd-main > .table-responsive > #psd-table td:nth-child(n+11):nth-child(-n+16) {
    text-align: right !important;
}

.psd-summary-panel .gstr1-data-table th,
.psd-summary-panel .gstr1-data-table td {
    text-align: right;
}

    .psd-summary-panel .gstr1-data-table th:first-child,
    .psd-summary-panel .gstr1-data-table td:first-child,
    .psd-summary-panel .gstr1-data-table th:nth-child(2),
    .psd-summary-panel .gstr1-data-table td:nth-child(2) {
        text-align: left;
    }

.psd-summary-panel .gstr1-data-table tbody td:nth-child(2) {
    color: #0d5be1;
    font-weight: 600;
}

.psd-positive {
    color: #16833c !important;
    font-weight: 700;
}

/* Sales Return Report */
.sales-return-dashboard,
.sales-return-dashboard * {
    font-family: 'Inter', sans-serif !important;
    box-sizing: border-box;
}

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

    .srr-filter-grid label {
        display: block;
        margin-bottom: 7px;
        color: #101a33;
        font-size: 12px;
        font-weight: 700;
    }

    .srr-filter-grid .form-control {
        width: 100%;
        height: 38px;
        border: 1px solid #ced8e7;
        border-radius: 6px;
        color: #17223b;
        background: #fff;
        font-size: 12px;
    }

.srr-product {
    grid-column: span 1;
}

.srr-filter-actions {
    grid-column: span 2;
    justify-content: flex-end;
    align-self: end;
}

    .srr-filter-actions .gstr1-btn {
        min-width: 132px;
    }

.srr-kpi-grid {
    margin-top: 14px;
}

.srr-main {
    margin-top: 14px;
    overflow: hidden;
}

    .srr-main .gstr1-tabs {
        overflow-x: auto;
    }

        .srr-main .gstr1-tabs button {
            white-space: nowrap;
        }

    .srr-main .gstr1-table-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 12px 16px;
    }

        .srr-main .gstr1-table-title h3 {
            margin: 0;
            color: #20284a;
            font-size: 13px;
            font-weight: 700;
        }

    .srr-main .table-responsive {
        max-height: 620px;
        overflow: auto !important;
    }

    .srr-main .gstr1-data-table {
        min-width: 1650px;
    }

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

        .srr-main .gstr1-data-table th {
            color: #101a33;
            font-weight: 700;
        }

        .srr-main .gstr1-data-table tbody td:nth-child(2),
        .srr-main .gstr1-data-table tbody td:nth-child(4) {
            color: #0d6bdc;
            font-weight: 600;
        }

        .srr-main .gstr1-data-table tfoot th {
            color: #075ce5;
            font-weight: 600;
        }

    .srr-main .srr-credit-head td {
        padding: 9px 12px;
        background: #f1f5fd;
        color: #172554;
        font-weight: 600;
    }

        .srr-main .srr-credit-head td > div {
            display: grid;
            grid-template-columns: 1.05fr 1fr 2fr .9fr 1fr .9fr .9fr;
            align-items: center;
            gap: 12px;
        }

    .srr-main .srr-credit-head b {
        color: #24386d;
        font-weight: 600;
    }

    .srr-main .srr-credit-total td {
        background: #fbfdff;
        color: #075ce5;
        font-weight: 600;
    }

.srr-center {
    text-align: center !important;
}

.srr-number {
    text-align: right !important;
    font-variant-numeric: tabular-nums;
}

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

.srr-main .table-responsive::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #b6c2d3;
}

/* Cancelled Invoice Report */
.cancelled-invoice-dashboard,
.cancelled-invoice-dashboard * {
    box-sizing: border-box;
    font-family: 'Inter', sans-serif !important;
}

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

    .cir-filter-grid label {
        display: block;
        margin-bottom: 7px;
        color: #101a33;
        font-size: 12px;
        font-weight: 700;
    }

    .cir-filter-grid .form-control {
        width: 100%;
        height: 38px;
        border: 1px solid #d8e0eb;
        border-radius: 6px;
        background: #fff;
        color: #17223b;
        font-size: 12px;
        box-shadow: none;
    }

    .cir-filter-grid .select2-container {
        width: 100% !important;
    }

    .cir-filter-grid .select2-selection--single {
        height: 38px !important;
        min-height: 38px !important;
        border: 1px solid #d8e0eb !important;
        border-radius: 6px !important;
    }

    .cir-filter-grid .select2-selection__rendered {
        height: 36px !important;
        padding: 0 30px 0 12px !important;
        color: #17223b !important;
        line-height: 36px !important;
        font-size: 12px !important;
    }

    .cir-filter-grid .select2-selection__arrow {
        height: 36px !important;
    }

    .cir-filter-grid .select2-selection__clear {
        display: none !important;
    }

.cir-filter-actions {
    grid-column: span 3;
    justify-content: flex-end;
}

    .cir-filter-actions .gstr1-btn {
        min-width: 132px;
    }

.cir-kpi-grid {
    grid-template-columns: repeat(5,minmax(0,1fr));
    margin: 14px 0;
}

    .cir-kpi-grid .gstr1-kpi {
        min-height: 108px;
    }

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

        .cir-kpi-grid .gstr1-kpi em {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

.cir-main {
    overflow: hidden;
    margin-bottom: 14px;
}

    .cir-main .gstr1-table-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 11px 16px;
    }

        .cir-main .gstr1-table-title h3 {
            margin: 0;
            color: #075ce5;
            font-size: 13px;
            font-weight: 600;
        }

.cir-table-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-left: auto;
}

.cir-search-wrap {
    position: relative;
}

    .cir-search-wrap svg {
        position: absolute;
        z-index: 1;
        top: 9px;
        left: 10px;
        width: 16px;
        height: 16px;
        fill: none;
        stroke: #65748b;
        stroke-width: 1.8;
    }

    .cir-search-wrap input {
        width: 220px;
        height: 34px;
        padding-left: 32px;
        border: 1px solid #d5dce6;
        border-radius: 6px;
        font-size: 12px;
    }

.cir-table-tools .gstr1-btn {
    min-height: 34px;
    padding: 7px 12px;
}

    .cir-table-tools .gstr1-btn svg {
        width: 16px;
        height: 16px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
    }

.cir-table-tools .cir-excel {
    border-color: #16a34a;
    color: #15803d;
}

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

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

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

.cir-main .gstr1-data-table {
    min-width: 1720px;
}

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

    .cir-main .gstr1-data-table tbody td:nth-child(2) {
        color: #0d6bdc;
        font-weight: 600;
    }

    .cir-main .gstr1-data-table tfoot th {
        color: #075ce5;
        font-weight: 600;
    }

.cir-center {
    text-align: center !important;
}

.cir-number {
    text-align: right !important;
    font-variant-numeric: tabular-nums;
}

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

    .cir-chart-grid > article {
        min-width: 0;
        min-height: 285px;
        padding: 16px;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        background: #fff;
    }

    .cir-chart-grid h3 {
        margin: 0 0 20px;
        color: #075ce5;
        font-size: 13px;
        font-weight: 700;
    }

.cir-donut-layout {
    display: grid;
    grid-template-columns: 145px minmax(0,1fr);
    gap: 15px;
    align-items: center;
}

.cir-donut {
    position: relative;
    width: 145px;
    height: 145px;
    border-radius: 50%;
    background: #e8edf5;
}

    .cir-donut::after {
        position: absolute;
        inset: 34px;
        content: '';
        border-radius: 50%;
        background: #fff;
    }

    .cir-donut > span {
        position: absolute;
        z-index: 1;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        color: #101a33;
        font-size: 16px;
        font-weight: 600;
    }

    .cir-donut small {
        margin-top: 3px;
        font-size: 9px;
        font-weight: 500;
    }

.cir-donut-layout section > div {
    display: grid;
    grid-template-columns: 9px minmax(0,1fr) auto;
    align-items: center;
    gap: 6px;
    margin: 9px 0;
    font-size: 10px;
}

.cir-donut-layout section i {
    width: 8px;
    height: 8px;
    border-radius: 2px;
}

.cir-donut-layout section span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cir-bars {
    display: flex;
    min-height: 195px;
    align-items: flex-end;
    justify-content: space-around;
    gap: 8px;
    border-bottom: 1px solid #dce3ed;
}

    .cir-bars > div {
        display: flex;
        flex: 1;
        align-items: center;
        flex-direction: column;
        gap: 6px;
        font-size: 9px;
        text-align: center;
    }

    .cir-bars i {
        display: flex;
        height: 120px;
        align-items: flex-end;
    }

    .cir-bars b {
        display: block;
        width: 18px;
        min-height: 2px;
        border-radius: 4px 4px 0 0;
        background: #126ce5;
    }

.cir-horizontal-bars > div {
    display: grid;
    grid-template-columns: 105px minmax(70px,1fr) 85px;
    align-items: center;
    gap: 7px;
    margin: 13px 0;
    font-size: 10px;
}

    .cir-horizontal-bars > div > span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.cir-horizontal-bars i {
    display: block;
    height: 10px;
    background: #eef3fb;
}

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

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

.cancelled-invoice-dashboard .gstr1-note svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

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

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

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

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

    .cir-filter-actions {
        grid-column: span 2;
    }

    .cir-kpi-grid, .cir-chart-grid {
        grid-template-columns: 1fr;
    }

    .cir-main .gstr1-table-title, .cir-table-tools {
        align-items: stretch;
        flex-direction: column;
    }

    .cir-table-tools, .cir-search-wrap input {
        width: 100%;
    }
}

@media (max-width:520px) {
    .cir-filter-grid {
        grid-template-columns: 1fr;
    }

    .cir-filter-actions {
        grid-column: auto;
        flex-direction: column;
    }

        .cir-filter-actions .gstr1-btn {
            width: 100%;
        }
}

@media (max-width: 1350px) {
    .srr-filter-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

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

    .srr-filter-actions {
        grid-column: span 2;
    }
}

@media (max-width: 640px) {
    .srr-filter-grid {
        grid-template-columns: 1fr;
    }

    .srr-filter-actions {
        grid-column: span 1;
        flex-direction: column;
    }

        .srr-filter-actions .gstr1-btn {
            width: 100%;
        }

    .srr-main .gstr1-table-title {
        align-items: stretch;
        flex-direction: column;
    }
}

@media (max-width: 1100px) {
    .srr-main .srr-credit-head td > div {
        grid-template-columns: repeat(3, minmax(180px, 1fr));
    }
}

@media (max-width: 640px) {
    .psd-main .gstr1-table-title {
        align-items: flex-start;
        flex-direction: column;
    }

    .psd-table-tools {
        width: 100%;
        margin-left: 0;
    }

        .psd-table-tools .psd-table-search {
            width: 100%;
            max-width: none;
        }
}

/* Customer Outstanding Report - Product Sell Report theme. */
.cor-dashboard .cor-filter-grid {
    grid-template-columns: repeat(5,minmax(0,1fr))
}

    .cor-dashboard .cor-filter-grid .gstr1-filter-actions {
        grid-column: 4/-1;
        width: max-content;
        grid-template-columns: 118px 118px;
        justify-self: end
    }

    .cor-dashboard .cor-filter-grid .gstr1-btn {
        width: 118px;
        min-width: 118px
    }

.cor-kpis {
    display: grid;
    grid-template-columns: repeat(6,minmax(0,1fr));
    gap: 10px;
    margin: 10px 0
}

    .cor-kpis .gstr1-kpi {
        min-width: 0
    }

        .cor-kpis .gstr1-kpi strong {
            font-size: 17px;
            white-space: nowrap
        }

.cor-aging-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 10px;
    margin-bottom: 10px
}

.cor-card {
    padding: 13px;
    border: 1px solid #e4e9f0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 2px 9px rgba(16,24,40,.05)
}

    .cor-card h3 {
        margin: 0 0 12px;
        color: #0758dc;
        font-size: 12px;
        font-weight: 600
    }

    .cor-card table {
        width: 100%;
        border-collapse: collapse
    }

    .cor-card th, .cor-card td {
        padding: 7px;
        border: 1px solid #e7ebf1;
        font-size: 12px;
        text-align: right
    }

        .cor-card th:first-child, .cor-card td:first-child {
            text-align: left
        }

.cor-aging-visual {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: 12px;
    align-items: center
}

.cor-donut {
    width: 145px;
    height: 145px;
    margin: auto;
    border-radius: 50%;
    position: relative;
    background: #e8eef7
}

    .cor-donut:before {
        content: '';
        position: absolute;
        inset: 30px;
        border-radius: 50%;
        background: #fff
    }

    .cor-donut span {
        position: absolute;
        inset: 0;
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-weight: 600
    }

    .cor-donut small {
        margin-top: 3px;
        font-size: 9px;
        font-weight: 500
    }

.cor-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 6px;
    border-radius: 2px
}

.cor-panel {
    display: none
}

    .cor-panel.is-active {
        display: block
    }

.cor-main .gstr1-table-title {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.cor-main .psd-table-tools {
    display: flex;
    gap: 8px;
    align-items: center
}

.cor-main .cor-search {
    width: 210px;
    height: 34px
}

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

    .cor-main .gstr1-data-table th:nth-child(n+5), .cor-main .gstr1-data-table td:nth-child(n+5) {
        text-align: right
    }

@media(max-width:1400px) {
    .cor-kpis {
        grid-template-columns: repeat(3,minmax(0,1fr))
    }

    .cor-dashboard .cor-filter-grid {
        grid-template-columns: repeat(4,minmax(0,1fr))
    }
}

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

        .cor-dashboard .cor-filter-grid .gstr1-filter-actions {
            grid-column: 1/-1
        }

    .cor-aging-grid {
        grid-template-columns: 1fr
    }
}

@media(max-width:640px) {
    .cor-dashboard .cor-filter-grid, .cor-kpis {
        grid-template-columns: 1fr
    }

        .cor-dashboard .cor-filter-grid .gstr1-filter-actions {
            width: 100%;
            grid-template-columns: 1fr
        }

        .cor-dashboard .cor-filter-grid .gstr1-btn {
            width: 100%;
            min-width: 0
        }

    .cor-aging-visual {
        grid-template-columns: 1fr
    }

    .cor-main .gstr1-table-title, .cor-main .psd-table-tools {
        align-items: stretch;
        flex-direction: column
    }

    .cor-main .cor-search {
        width: 100%
    }
}

/* Business settings landing dashboard */
.business-settings-page-header {
    position: relative;
    min-height: 188px;
    overflow: hidden;
    padding: 30px 30px 68px !important;
    border-top: 1px solid rgba(96,165,250,.25);
    background: radial-gradient(circle at 72% 35%,rgba(30,80,190,.38),transparent 28%),linear-gradient(118deg,#06152f 0%,#041a3b 52%,#061637 100%) !important
}

    .business-settings-page-header:after {
        content: "";
        position: absolute;
        right: -5%;
        bottom: -115px;
        width: 46%;
        height: 260px;
        border: 1px solid rgba(69,121,255,.2);
        border-radius: 50%;
        transform: rotate(-12deg)
    }

.business-settings-page-header__copy {
    position: relative;
    z-index: 2;
    max-width: 620px
}

.business-settings-page-header h1 {
    margin: 0 0 8px !important;
    color: #fff !important;
    font-size: 30px !important;
    font-weight: 750 !important;
    letter-spacing: -.03em;
    line-height: 1.2 !important
}

.business-settings-page-header p {
    margin: 0 !important;
    color: #e4ecfa !important;
    font-size: 12px !important;
    line-height: 1.45 !important
}

.business-settings-page-header > p.project-page-subtitle {
    display: none !important
}

.business-settings-page-header__art {
    position: absolute;
    z-index: 1;
    top: -3px;
    right: 4%;
    width: 460px;
    height: 205px;
    opacity: .96
}

    .business-settings-page-header__art > svg {
        display: block;
        width: 100%;
        height: 100%;
        overflow: visible
    }

.business-settings-page {
    padding-top: 0 !important;
    padding-bottom: 22px !important;
    background: linear-gradient(#f8fafc,#fff) !important
}

.business-settings-summary {
    position: relative;
    z-index: 4;
    display: grid;
    grid-template-columns: repeat(5,minmax(0,1fr));
    width: calc(100% - 48px);
    max-width: calc(100% - 48px);
    min-height: 104px;
    margin: 20px auto;
    padding: 18px 20px;
    border: 1px solid #dce4ee;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(15,23,42,.07);
    box-sizing: border-box
}

    .business-settings-summary.tw-hidden {
        display: none
    }

.business-settings-summary__item {
    display: grid;
    grid-template-columns: 52px minmax(0,1fr);
    gap: 12px;
    align-items: center;
    min-width: 0;
    padding: 0 20px;
    border-right: 1px solid #dce4ee
}

    .business-settings-summary__item:first-child {
        padding-left: 3px
    }

    .business-settings-summary__item:last-child {
        padding-right: 3px;
        border-right: 0
    }

    .business-settings-summary__item > i {
        display: grid;
        place-items: center;
        width: 52px;
        height: 52px;
        border-radius: 10px;
        background: #eaf2ff;
        color: #2472ed;
        font-style: normal
    }

    .business-settings-summary__item.is-green > i {
        color: #16a34a;
        background: #eaf8ef
    }

    .business-settings-summary__item.is-orange > i {
        color: #f97316;
        background: #fff3df
    }

    .business-settings-summary__item.is-violet > i {
        color: #7c3aed;
        background: #f1eaff
    }

.business-settings-summary svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round
}

.business-settings-summary__item span {
    display: block;
    min-width: 0
}

.business-settings-summary__item b, .business-settings-summary__item strong, .business-settings-summary__item small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.business-settings-summary__item b {
    margin-bottom: 3px;
    color: #172033;
    font-size: 11px
}

.business-settings-summary__item strong {
    margin-bottom: 5px;
    color: #0f172a;
    font-size: 16px;
    line-height: 1.1
}

.business-settings-summary__item small {
    color: #708099;
    font-size: 11px
}

.business-settings-hub {
    gap: 14px !important;
    width: calc(100% - 48px) !important;
    max-width: calc(100% - 48px) !important;
    margin: 0 auto !important
}

.business-settings-card {
    grid-template-columns: 54px minmax(0,1fr) !important;
    grid-template-rows: minmax(72px,1fr) auto !important;
    column-gap: 14px !important;
    row-gap: 10px !important;
    min-height: 138px !important;
    padding: 16px 16px 13px !important;
    border-color: #e2e8f0 !important;
    border-radius: 12px !important;
    background: linear-gradient(145deg,#fff 0%,#fff 72%,#fcfdff 100%) !important;
    box-shadow: 0 5px 16px rgba(15,23,42,.045) !important
}

    .business-settings-card:hover, .business-settings-card:focus {
        border-color: color-mix(in srgb,var(--settings-card-color) 35%,#e2e8f0) !important;
        box-shadow: 0 12px 28px rgba(15,23,42,.09) !important
    }

.business-settings-card__icon {
    grid-row: 1 !important;
    width: 52px !important;
    height: 52px !important;
    border-radius: 10px !important
}

    .business-settings-card__icon svg {
        width: 27px !important;
        height: 27px !important
    }

.business-settings-card__title {
    margin-bottom: 5px !important;
    font-size: 15px !important;
    font-weight: 700 !important
}

.business-settings-card__description {
    max-width: 245px;
    color: #506886 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.45 !important
}

.business-settings-card__meta {
    display: flex;
    grid-column: 1 / 3;
    grid-row: 2;
    align-items: center;
    gap: 15px;
    align-self: end;
    color: #64748b;
    font-size: 12px;
    font-weight: 500;
    line-height: 1
}

    .business-settings-card__meta > span {
        display: inline-flex;
        align-items: center;
        gap: 6px
    }

    .business-settings-card__meta i {
        display: block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #11aa5b
    }

.business-settings-card__action {
    grid-column: 2 !important;
    grid-row: 2 !important;
    z-index: 2;
    align-self: end;
    color: #ff4f0a !important;
    font-size: 12px !important;
    font-weight: 600 !important
}

body.relite-dark .business-settings-summary {
    border-color: #29445f;
    background: #102844
}

body.relite-dark .business-settings-summary__item {
    border-color: #29445f
}

    body.relite-dark .business-settings-summary__item b, body.relite-dark .business-settings-summary__item strong {
        color: #f8fafc
    }

body.relite-dark .business-settings-card {
    border-color: #29445f !important;
    background: #102844 !important
}

@media(max-width:1100px) {
    .business-settings-summary {
        grid-template-columns: repeat(3,1fr);
        row-gap: 18px
    }

    .business-settings-summary__item:nth-child(3) {
        border-right: 0
    }

    .business-settings-summary__item:nth-child(n+4) {
        padding-top: 16px;
        border-top: 1px solid #dce4ee
    }

    .business-settings-hub {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important
    }
}

@media(max-width:700px) {
    .business-settings-page-header {
        min-height: 180px;
        padding: 24px 20px 65px !important
    }

        .business-settings-page-header h1 {
            font-size: 25px !important
        }

        .business-settings-page-header p {
            font-size: 12px !important
        }

    .business-settings-page-header__art {
        right: -120px;
        opacity: .38
    }

    .business-settings-summary {
        grid-template-columns: 1fr;
        width: calc(100% - 24px);
        max-width: calc(100% - 24px);
        padding: 12px 14px
    }

    .business-settings-summary__item, .business-settings-summary__item:first-child, .business-settings-summary__item:last-child {
        padding: 10px 0 !important;
        border-top: 0 !important;
        border-right: 0 !important;
        border-bottom: 1px solid #e2e8f0
    }

        .business-settings-summary__item:last-child {
            border-bottom: 0 !important
        }

    .business-settings-hub {
        grid-template-columns: 1fr !important;
        width: calc(100% - 24px) !important;
        max-width: calc(100% - 24px) !important
    }

    .business-settings-card {
        min-height: 132px !important
    }
}

/* Business settings: Contacts */
.business-settings-editor .contact-settings-tab {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important
}

.contact-settings-layout {
    display: grid;
    grid-template-columns: minmax(300px,.72fr) minmax(0,2fr);
    grid-template-areas: "guide form";
    gap: 18px;
    align-items: stretch
}

.contact-settings-form, .contact-settings-guide {
    box-sizing: border-box;
    min-width: 0;
    border: 1px solid #dbe4ef;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(15,23,42,.06)
}

.contact-settings-form {
    grid-area: form;
    padding: 20px 24px 82px
}

.contact-settings-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 18px
}

    .contact-settings-header > i {
        display: grid;
        place-items: center;
        flex: 0 0 46px;
        width: 46px;
        height: 46px;
        border-radius: 10px;
        background: #fff0e7;
        color: #ff6b13;
        font-style: normal
    }

    .contact-settings-header svg, .contact-settings-guide svg {
        width: 22px;
        height: 22px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round
    }

    .contact-settings-header h3 {
        margin: 0 0 4px !important;
        color: #172033;
        font-size: 18px;
        font-weight: 700 !important
    }

    .contact-settings-header p {
        margin: 0;
        color: #64748b;
        font-size: 12px
    }

.contact-settings-fields {
    border-top: 1px solid #e5ebf2
}

.contact-setting-row {
    display: grid;
    grid-template-columns: minmax(220px,.9fr) minmax(260px,1.15fr);
    gap: 20px;
    align-items: center;
    min-height: 63px;
    padding: 10px 4px;
    border-bottom: 1px solid #e8edf3
}

    .contact-setting-row > label, .contact-setting-row > span:first-child {
        min-width: 0;
        margin: 0 !important;
        color: #26334a;
        font-size: 12px;
        font-weight: 600;
        text-transform: none !important;
        letter-spacing: 0 !important
    }

    .contact-setting-row b, .contact-setting-row small {
        display: block
    }

    .contact-setting-row b {
        margin-bottom: 3px
    }

    .contact-setting-row small {
        color: #728198;
        font-size: 10.5px;
        font-weight: 400;
        line-height: 1.4
    }

    .contact-setting-row > .form-control, .contact-setting-row > .select2-container {
        width: 100% !important
    }

.contact-money-field, .contact-pay-term-field {
    display: flex;
    min-width: 0
}

    .contact-money-field > i {
        display: grid;
        place-items: center;
        box-sizing: border-box;
        flex: 0 0 42px;
        width: 42px;
        height: 42px;
        border: 1px solid var(--settings-control-border);
        border-right: 0;
        border-radius: 8px 0 0 8px;
        background: #f8fafc;
        color: #526987;
        font-style: normal
    }

.business-settings-editor .contact-money-field > .form-control {
    border-left: 0 !important;
    border-radius: 0 8px 8px 0 !important
}

.contact-pay-term-field {
    gap: 8px
}

    .contact-pay-term-field > .form-control:first-child {
        flex: 1 1 45%
    }

    .contact-pay-term-field > .form-control:last-child {
        flex: 1 1 55%
    }

.contact-setting-toggle {
    cursor: pointer
}

    .contact-setting-toggle > .contact-switch {
        justify-self: start
    }

.contact-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 0 0 34px;
    width: 34px;
    height: 18px
}

.contact-switch__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    opacity: 0
}

.contact-switch__track {
    position: absolute;
    inset: 0;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: #dfe4ea;
    transition: .18s
}

    .contact-switch__track:after {
        content: "";
        position: absolute;
        top: 1px;
        left: 1px;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 1px 3px rgba(15,23,42,.25);
        transition: transform .18s
    }

.contact-switch__input:checked + .contact-switch__track {
    border-color: #ff6b13;
    background: #ff6b13
}

    .contact-switch__input:checked + .contact-switch__track:after {
        transform: translateX(16px)
    }

.contact-switch__input:focus-visible + .contact-switch__track {
    box-shadow: 0 0 0 3px rgba(255,107,19,.18)
}

.contact-settings-guide {
    grid-area: guide;
    display: flex;
    flex-direction: column;
    padding: 20px 28px 22px;
    overflow: hidden
}

.contact-settings-guide__visual {
    height: 255px;
    margin: -8px -8px 10px;
    background: url('../img/settings-contacts.png') center/contain no-repeat
}

.contact-settings-guide h3 {
    margin: 0 0 9px !important;
    color: #101d36;
    font-size: 22px;
    font-weight: 700 !important;
    line-height: 1.22
}

.contact-settings-guide__intro {
    margin: 0 0 16px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.5
}

.contact-settings-guide__items {
    display: grid
}

    .contact-settings-guide__items > div {
        display: grid;
        grid-template-columns: 38px minmax(0,1fr);
        gap: 10px;
        align-items: center;
        padding: 10px 0;
        border-bottom: 1px solid #e5ebf2
    }

    .contact-settings-guide__items i {
        display: grid;
        place-items: center;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        font-style: normal
    }

        .contact-settings-guide__items i.orange {
            color: #ff6b13;
            background: #fff0e7
        }

        .contact-settings-guide__items i.blue {
            color: #2d7ff9;
            background: #eaf2ff
        }

        .contact-settings-guide__items i.green {
            color: #17a765;
            background: #eaf8f0
        }

        .contact-settings-guide__items i.violet {
            color: #7c4ee8;
            background: #f1ecff
        }

    .contact-settings-guide__items b, .contact-settings-guide__items small {
        display: block
    }

    .contact-settings-guide__items b {
        margin-bottom: 3px;
        color: #26334a;
        font-size: 11.5px
    }

    .contact-settings-guide__items small {
        color: #728198;
        font-size: 10px;
        line-height: 1.4
    }

.contact-settings-guide__tip {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    padding: 13px;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 10.5px;
    line-height: 1.45
}

    .contact-settings-guide__tip > i {
        font-style: normal
    }

    .contact-settings-guide__tip svg {
        width: 17px;
        height: 17px
    }

    .contact-settings-guide__tip b {
        margin-right: 3px
    }

body.relite-dark .contact-settings-form, body.relite-dark .contact-settings-guide {
    border-color: #294563;
    background: #102844
}

    body.relite-dark .contact-settings-header h3, body.relite-dark .contact-settings-guide h3, body.relite-dark .contact-setting-row b, body.relite-dark .contact-settings-guide__items b {
        color: #f8fafc
    }

body.relite-dark .contact-settings-header p, body.relite-dark .contact-setting-row small, body.relite-dark .contact-settings-guide__intro, body.relite-dark .contact-settings-guide__items small {
    color: #afc1d4
}

@media(max-width:900px) {
    .contact-settings-layout {
        grid-template-columns: 1fr;
        grid-template-areas: "form" "guide"
    }

    .contact-settings-form {
        order: 1
    }

    .contact-settings-guide {
        order: 2
    }
}

@media(max-width:640px) {
    .contact-settings-form, .contact-settings-guide {
        padding: 16px 13px
    }

        .contact-settings-form.settings-save-host {
            padding-bottom: 82px !important
        }

    .contact-setting-row {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 13px 2px
    }

    .contact-setting-toggle {
        grid-template-columns: minmax(0,1fr) auto;
        gap: 12px
    }

    .contact-settings-guide__visual {
        height: 210px
    }

    .contact-pay-term-field {
        display: grid;
        grid-template-columns: 1fr 1fr
    }
}

/* Sales Representative Item-wise dashboard (Product Sell Report theme). */
.srir-dashboard {
    color: #0b1638;
}

    .srir-dashboard .srir-filter-grid {
        grid-template-columns: repeat(5,minmax(0,1fr));
    }

        .srir-dashboard .srir-filter-grid .gstr1-filter-actions {
            grid-column: 4/-1;
            width: max-content;
            grid-template-columns: 118px 118px;
            justify-self: end;
        }

        .srir-dashboard .srir-filter-grid .gstr1-btn {
            width: 118px;
            min-width: 118px;
        }

.srir-kpi-grid {
    display: grid;
    grid-template-columns: repeat(7,minmax(0,1fr));
    gap: 8px;
    margin: 10px 0;
}

    .srir-kpi-grid .gstr1-kpi {
        min-width: 0;
        padding: 12px 10px;
    }

    .srir-kpi-grid .gstr1-kpi-icon {
        flex: 0 0 42px;
        width: 42px;
        height: 42px;
    }

    .srir-kpi-grid .gstr1-kpi strong {
        font-size: 16px;
        white-space: nowrap;
    }

.srir-chart-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr 1.15fr 1.05fr;
    gap: 10px;
    margin-bottom: 10px;
}

.srir-chart-card {
    min-height: 240px;
    padding: 14px;
    border: 1px solid #e4e9f0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 2px 9px rgba(16,24,40,.05);
    overflow: hidden;
}

    .srir-chart-card h3 {
        margin: 0 0 16px;
        color: #0758dc;
        font-size: 12px;
        font-weight: 600;
    }

        .srir-chart-card h3 small {
            display: block;
            margin-top: 2px;
            color: #0b1638;
            font-size: 10px;
        }

.srir-horizontal-bars {
    display: grid;
    gap: 11px;
}

    .srir-horizontal-bars > div {
        display: grid;
        grid-template-columns: minmax(90px,1.1fr) minmax(90px,1fr) auto;
        gap: 8px;
        align-items: center;
        font-size: 10px;
    }

    .srir-horizontal-bars span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .srir-horizontal-bars i {
        height: 9px;
        background: #edf2fb;
    }

    .srir-horizontal-bars b {
        display: block;
        height: 100%;
        background: #126ce5;
    }

    .srir-horizontal-bars strong {
        font-size: 9px;
        white-space: nowrap;
    }

.srir-horizontal-bars--purple b {
    background: #6514d8;
}

.srir-donut-layout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    min-height: 180px;
}

.srir-donut {
    width: 145px;
    height: 145px;
    flex: 0 0 145px;
    border-radius: 50%;
    background: var(--segments,#e8eef7);
    position: relative;
}

    .srir-donut:after {
        content: '';
        position: absolute;
        inset: 31px;
        border-radius: 50%;
        background: #fff;
    }

.srir-legend {
    display: grid;
    gap: 8px;
    font-size: 9px;
}

    .srir-legend span {
        display: grid;
        grid-template-columns: 8px 1fr auto;
        align-items: center;
        gap: 6px;
    }

    .srir-legend i {
        width: 8px;
        height: 8px;
        border-radius: 2px;
    }

.srir-trend {
    height: 185px;
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    gap: 8px;
    padding: 12px 8px 25px;
    border-bottom: 1px solid #dce4ef;
}

    .srir-trend > div {
        height: 100%;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        position: relative;
    }

    .srir-trend b {
        width: 7px;
        border-radius: 6px 6px 0 0;
        background: #126ce5;
    }

    .srir-trend strong {
        margin: 4px 0;
        font-size: 9px;
    }

    .srir-trend span {
        position: absolute;
        top: 100%;
        margin-top: 8px;
        font-size: 9px;
        white-space: nowrap;
    }

.srir-main {
    margin-top: 0;
}

    .srir-main .gstr1-tabs {
        justify-content: flex-start;
    }

        .srir-main .gstr1-tabs button {
            flex: 0 0 auto;
            min-width: 190px;
        }

.srir-tab-panel {
    display: none;
}

    .srir-tab-panel.is-active {
        display: block;
    }

.srir-main .gstr1-table-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 52px;
}

.srir-main .psd-table-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.srir-main .srir-search {
    width: 210px;
    height: 34px;
}

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

    .srir-main .gstr1-data-table th:nth-child(n+3), .srir-main .gstr1-data-table td:nth-child(n+3) {
        text-align: right;
    }

    .srir-main .gstr1-data-table th:first-child, .srir-main .gstr1-data-table td:first-child {
        text-align: center;
    }

.srir-dashboard .gstr1-note {
    margin-top: 42px;
}

@media(max-width:1500px) {
    .srir-kpi-grid {
        grid-template-columns: repeat(4,minmax(0,1fr))
    }

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

@media(max-width:1100px) {
    .srir-dashboard .srir-filter-grid {
        grid-template-columns: repeat(3,minmax(0,1fr))
    }

        .srir-dashboard .srir-filter-grid .gstr1-filter-actions {
            grid-column: 2/-1
        }
}

@media(max-width:767px) {
    .srir-dashboard .srir-filter-grid, .srir-kpi-grid, .srir-chart-grid {
        grid-template-columns: 1fr
    }

        .srir-dashboard .srir-filter-grid .gstr1-filter-actions {
            grid-column: 1/-1;
            width: 100%;
            grid-template-columns: 1fr
        }

        .srir-dashboard .srir-filter-grid .gstr1-btn {
            width: 100%;
            min-width: 0
        }

    .srir-main .gstr1-table-title, .srir-main .psd-table-tools {
        align-items: stretch;
        flex-direction: column
    }

    .srir-main .srir-search {
        width: 100%
    }
}

/* Sales Representative Item-wise Report: Product Sell styling. */
.srir .srir-filter.gstr1-filter-card {
    padding: 14px 16px;
    overflow: visible;
    border: 1px solid #dfe5ed;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 3px 10px rgba(15, 23, 42, .05);
}

.srir .srir-filter-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px 28px;
    padding: 0;
}

.srir .srir-field label {
    display: block;
    margin-bottom: 6px;
    color: #101828;
    font-family: 'Inter', sans-serif !important;
    font-size: 12px;
    font-weight: 700;
}

.srir .srir-field input,
.srir .srir-field select,
.srir .srir-date-trigger,
.srir .srir-field .select2-container .select2-selection--single {
    width: 100%;
    height: 36px !important;
    min-height: 36px;
    border: 1px solid #ccd6e3 !important;
    border-radius: 7px !important;
    background: #fff;
    box-shadow: none !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 12px;
}

.srir .srir-field .select2-selection__rendered {
    line-height: 34px !important;
}

.srir .srir-field .select2-selection__arrow {
    height: 34px !important;
}

.srir .srir-filter-actions {
    width: max-content;
    grid-column: 4 / -1;
    grid-template-columns: 118px 118px;
    align-self: end;
    justify-self: end;
}

    .srir .srir-filter-actions .gstr1-btn {
        width: 118px;
        min-width: 118px;
        text-decoration: none;
    }

.srir-table-card {
    border: 1px solid #dfe5ed;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 3px 10px rgba(15, 23, 42, .05);
}

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

.srir-dt-toolbar.row,
.srir-dt-footer.row {
    display: flex;
    align-items: center;
    margin: 0 0 12px;
}

.srir-dt-toolbar .dataTables_length {
    text-align: left;
}

.srir-dt-toolbar .dt-buttons {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 0;
}

.srir-dt-toolbar .dataTables_filter {
    margin: 0;
    text-align: right;
}

    .srir-dt-toolbar .dataTables_filter label {
        width: 100%;
    }

    .srir-dt-toolbar .dataTables_filter input {
        width: 100%;
        max-width: 190px;
    }

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

    .srir .srir-filter-actions {
        grid-column: 3 / -1;
    }
}

/* Keep the representative report filter identical to Product Sell Report. */
.srir #srir-filter.gstr1-filter-card {
    padding: 13px 15px !important;
    overflow: visible;
    border: 1px solid #e4e9f0 !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-shadow: 0 2px 9px rgba(16, 24, 40, .06) !important;
}

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

.srir #srir-filter .gstr1-btn {
    height: 34px;
    padding: 0 13px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 650;
}

    .srir #srir-filter .gstr1-btn svg {
        width: 15px;
        height: 15px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

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

    .srir .srir-filter-actions {
        grid-column: 1 / -1;
    }

    .srir-dt-toolbar.row,
    .srir-dt-footer.row {
        display: block;
    }

        .srir-dt-toolbar.row > div,
        .srir-dt-footer.row > div {
            width: 100%;
            margin-bottom: 10px;
            text-align: center;
        }

    .srir-dt-toolbar .dataTables_filter {
        text-align: center;
    }
}

@media (max-width: 640px) {
    .srir .srir-filter-grid {
        grid-template-columns: 1fr;
    }

    .srir .srir-filter-actions {
        width: 100%;
        grid-template-columns: 1fr;
    }

        .srir .srir-filter-actions .gstr1-btn {
            width: 100%;
            min-width: 0;
        }
}

.psd-summary-count {
    padding: 12px 4px;
    color: #35405a;
    font-size: 12px;
}

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

    .psd-tab-chart-grid > article {
        min-width: 0;
        min-height: 310px;
        padding: 16px;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        background: #fff;
    }

    .psd-tab-chart-grid h3 {
        margin: 0 0 18px;
        color: #075ce5;
        font-size: 13px;
        font-weight: 700;
    }

.psd-tab-bars > div {
    display: grid;
    grid-template-columns: minmax(80px, .75fr) minmax(80px, 1.4fr) auto;
    align-items: center;
    gap: 8px;
    margin-bottom: 11px;
    font-size: 11px;
}

    .psd-tab-bars > div > span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .psd-tab-bars > div > i {
        display: block;
        height: 10px;
        overflow: hidden;
        border-radius: 2px;
        background: #eef3fb;
    }

.psd-tab-bars b {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #126ce5, #4d74f0);
}

.psd-tab-bars--green b {
    background: linear-gradient(90deg, #16833c, #46a95e);
}

.psd-tab-bars--purple b {
    background: linear-gradient(90deg, #6934d4, #9b65ed);
}

.psd-tab-bars--orange b {
    background: linear-gradient(90deg, #f97316, #fb9b4a);
}

.psd-tab-bars strong {
    color: #23304d;
    font-size: 10px;
    white-space: nowrap;
}

.psd-tab-donut {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
}

.psd-tab-donut-ring {
    position: relative;
    width: 150px;
    height: 150px;
    border-radius: 50%;
}

    .psd-tab-donut-ring::after {
        position: absolute;
        inset: 34px;
        content: '';
        border-radius: 50%;
        background: #fff;
    }

    .psd-tab-donut-ring > span {
        position: absolute;
        z-index: 1;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        color: #101a33;
        font-size: 12px;
        font-weight: 700;
    }

    .psd-tab-donut-ring small {
        display: block;
        margin-top: 3px;
        font-size: 9px;
        font-weight: 500;
    }

.psd-tab-donut section > div {
    display: grid;
    grid-template-columns: 9px minmax(0, 1fr) auto;
    gap: 7px;
    align-items: center;
    margin-bottom: 9px;
    font-size: 10px;
}

.psd-tab-donut section i {
    width: 8px;
    height: 8px;
    border-radius: 2px;
}

.psd-tab-donut section span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@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));
    }

    .psd-tab-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;
    }

    .psd-tab-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;
    }

    .psd-tab-donut {
        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;
        }

/* Modern purchase details modal. */
.purchase-details-modal .purchase-details-modern {
    overflow: hidden;
    border: 0 !important;
    border-radius: 14px !important;
    background: #f7f9fc;
    box-shadow: 0 24px 65px rgba(15,23,42,.28) !important;
    font-family: 'Inter',sans-serif !important
}

.purchase-details-modern .modal-header {
    display: flex;
    align-items: center;
    min-height: 64px;
    padding: 13px 20px;
    border-bottom: 1px solid #e4eaf2;
    background: #fff
}

.purchase-details-modern .modal-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    color: #101828;
    font-size: 16px;
    font-weight: 600
}

    .purchase-details-modern .modal-title small {
        color: #526078;
        font-size: 12px;
        font-weight: 600
    }

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

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

.purchase-details-modern .modal-header .close {
    position: absolute;
    top: 20px;
    right: 20px;
    margin: 0;
    color: #64748b;
    font-size: 22px;
    font-weight: 400;
    opacity: 1
}

.purchase-details-modern .modal-body {
    max-height: calc(100vh - 142px);
    padding: 12px !important;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 #edf2f7
}

.purchase-details-modern .purchase-details-date-row, .purchase-details-modern .purchase-info-card, .purchase-details-modern .purchase-products-card, .purchase-details-modern .purchase-payment-card, .purchase-details-modern .purchase-notes-card {
    margin: 0 0 12px !important;
    padding: 14px !important;
    border: 1px solid #dce5f0;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 3px 12px rgba(16,24,40,.035)
}

.purchase-details-modern .purchase-details-date-row {
    min-height: 38px;
    padding: 8px 14px !important
}

.purchase-details-modern .purchase-details-date {
    padding: 0 !important;
    color: #344054;
    font-size: 11px
}

.purchase-details-modern .purchase-info-card {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 18px
}

    .purchase-details-modern .purchase-info-card:before, .purchase-details-modern .purchase-info-card:after {
        display: none
    }

    .purchase-details-modern .purchase-info-card > [class*=col-] {
        width: auto !important;
        min-width: 0;
        padding: 0 10px;
        color: #344054;
        font-size: 12px;
        line-height: 1.55
    }

        .purchase-details-modern .purchase-info-card > [class*=col-] + [class*=col-] {
            border-left: 1px solid #e8edf4
        }

    .purchase-details-modern .purchase-info-card address {
        margin: 4px 0 0;
        color: #172033;
        font-size: 12px;
        line-height: 1.55
    }

.purchase-details-modern .purchase-products-card > .col-sm-12, .purchase-details-modern .purchase-payment-card > [class*=col-], .purchase-details-modern .purchase-notes-card > [class*=col-] {
    padding-left: 10px;
    padding-right: 10px
}

.purchase-details-modern .table-responsive {
    border: 0 !important;
    border-radius: 8px;
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 #edf2f7
}

.purchase-details-modern .purchase-details-table {
    margin: 0;
    background: #fff
}

    .purchase-details-modern .purchase-details-table thead tr, .purchase-details-modern .purchase-details-table thead th {
        border-color: #f97316 !important;
        background: #f97316 !important;
        color: #fff !important
    }

    .purchase-details-modern .purchase-details-table th, .purchase-details-modern .purchase-details-table td {
        padding: 10px 9px !important;
        border-color: #e4e9f0 !important;
        font-size: 11px !important
    }

    .purchase-details-modern .purchase-details-table tbody tr {
        background: #fff !important
    }

        .purchase-details-modern .purchase-details-table tbody tr:nth-child(even) {
            background: #f8fafc !important
        }

        .purchase-details-modern .purchase-details-table tbody tr:hover {
            background: #fff7ed !important
        }

.purchase-details-modern .purchase-payment-card h4 {
    margin: 0 0 10px;
    color: #172554;
    font-size: 13px;
    font-weight: 600
}

.purchase-details-modern .purchase-payment-card .table {
    margin: 0;
    border: 1px solid #e4e9f0;
    border-radius: 7px;
    background: #fff
}

    .purchase-details-modern .purchase-payment-card .table tr.bg-green, .purchase-details-modern .purchase-payment-card .table tr.bg-green th {
        background: #0fb879 !important;
        color: #fff !important
    }

    .purchase-details-modern .purchase-payment-card .table th, .purchase-details-modern .purchase-payment-card .table td {
        padding: 9px !important;
        border-color: #e7ecf2 !important;
        font-size: 11px
    }

.purchase-details-modern .purchase-notes-card strong {
    color: #172554
}

.purchase-details-modern .purchase-notes-card .well {
    min-height: 58px;
    margin: 7px 0 0;
    border: 1px solid #e0e7f0;
    border-radius: 7px;
    background: #f8fafc !important;
    color: #475467
}

.purchase-details-modern .modal-footer {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    min-height: 58px;
    padding: 10px 16px;
    border-top: 1px solid #e2e8f0;
    background: #fff
}

    .purchase-details-modern .modal-footer .tw-dw-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        min-height: 34px;
        padding: 7px 13px !important;
        border-radius: 6px !important;
        font-size: 11px !important
    }

    .purchase-details-modern .modal-footer .tw-dw-btn-primary {
        border-color: #f97316 !important;
        background: #f97316 !important
    }

    .purchase-details-modern .modal-footer .tw-dw-btn-neutral {
        border: 1px solid #d5dce6 !important;
        background: #fff !important;
        color: #172033 !important
    }

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

@media(max-width:900px) {
    .purchase-details-modern .purchase-info-card {
        grid-template-columns: 1fr
    }

        .purchase-details-modern .purchase-info-card > [class*=col-] + [class*=col-] {
            padding-top: 12px;
            border-top: 1px solid #e8edf4;
            border-left: 0
        }

    .purchase-details-modern .purchase-payment-card > [class*=col-], .purchase-details-modern .purchase-notes-card > [class*=col-] {
        width: 100%;
        margin-bottom: 12px
    }
}

@media(max-width:767px) {
    .purchase-details-modal .purchase-details-modern {
        border-radius: 10px !important
    }

    .purchase-details-modern .modal-header {
        padding: 11px 14px
    }

    .purchase-details-modern .modal-title {
        font-size: 14px
    }

        .purchase-details-modern .modal-title small {
            display: block;
            margin-top: 3px;
            font-size: 10px
        }

    .purchase-details-modern .modal-header .close {
        top: 17px;
        right: 14px
    }

    .purchase-details-modern .modal-body {
        max-height: calc(100vh - 126px);
        padding: 7px !important
    }

    .purchase-details-modern .purchase-details-date-row, .purchase-details-modern .purchase-info-card, .purchase-details-modern .purchase-products-card, .purchase-details-modern .purchase-payment-card, .purchase-details-modern .purchase-notes-card {
        padding: 10px !important
    }

    .purchase-details-modern .modal-footer {
        padding: 8px
    }

        .purchase-details-modern .modal-footer .tw-dw-btn {
            flex: 1
        }
}

.purchase-details-modern .purchase-details-date-row {
    min-height: 24px !important;
    margin: 0 0 2px !important;
    padding: 4px 14px 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important
}

.purchase-details-modern .modal-header .close {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: transparent !important;
    line-height: 1 !important
}

    .purchase-details-modern .modal-header .close:hover {
        background: #f1f5f9 !important;
        color: #0f172a
    }

.purchase-details-modern .modal-footer .tw-dw-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: row !important;
    gap: 7px !important;
    line-height: 1 !important;
    white-space: nowrap !important
}

    .purchase-details-modern .modal-footer .tw-dw-btn svg {
        display: inline-block !important;
        width: 15px !important;
        height: 15px !important;
        flex: 0 0 15px !important;
        margin: 0 !important;
        vertical-align: middle !important
    }

.purchase-details-modern .modal-footer .purchase-modal-close-action {
    width: auto !important;
    min-width: 76px !important;
    height: 34px !important;
    flex: 0 0 auto !important;
    padding: 0 14px !important;
    line-height: 32px !important;
    text-align: center !important
}

/* Modern subscriptions page */
.subscription-page-header {
    padding-bottom: 8px !important
}

.subscription-title-row {
    display: flex;
    align-items: center;
    gap: 12px
}

.subscription-title-icon, .subscription-overview-icon, .subscription-filter-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto
}

.subscription-title-icon {
    width: 42px;
    height: 42px;
    color: #fff;
    background: linear-gradient(135deg,#0f5eea,#6d32df);
    border-radius: 12px;
    box-shadow: 0 8px 18px rgba(15,94,234,.2)
}

    .subscription-title-icon svg, .subscription-overview-icon svg, .subscription-filter-icon svg {
        width: 22px;
        height: 22px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round
    }

.subscription-page-header h1 {
    margin: 0 !important;
    color: #0f1f3d !important;
    font: 700 22px/1.25 'Inter',sans-serif !important
}

.subscription-page-header p {
    margin: 4px 0 0;
    color: #61708a;
    font: 400 12px/1.45 'Inter',sans-serif
}

.subscriptions-modern-page {
    font-family: 'Inter',sans-serif !important
}

.subscription-overview-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 12px;
    padding: 14px 16px;
    color: #fff;
    background: linear-gradient(112deg,#071f46,#0b3c76);
    border: 1px solid #173f70;
    border-radius: 12px;
    box-shadow: 0 8px 22px rgba(15,31,61,.1)
}

.subscription-overview-copy {
    display: flex;
    align-items: center;
    gap: 12px
}

.subscription-overview-icon {
    width: 38px;
    height: 38px;
    color: #53a7ff;
    background: rgba(24,91,164,.38);
    border-radius: 10px
}

.subscription-overview-copy strong, .subscription-overview-copy small {
    display: block
}

.subscription-overview-copy strong {
    font-size: 13px
}

.subscription-overview-copy small {
    margin-top: 3px;
    color: #b8c9df;
    font-size: 11px
}

.subscription-status-key {
    display: flex;
    gap: 18px;
    color: #dce8f7;
    font-size: 11px;
    white-space: nowrap
}

    .subscription-status-key i {
        display: inline-block;
        width: 8px;
        height: 8px;
        margin-right: 6px;
        border-radius: 50%
    }

    .subscription-status-key .is-active {
        background: #21c77a
    }

    .subscription-status-key .is-paused {
        background: #ff9b36
    }

.subscription-filter-card {
    display: flex !important;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 14px !important;
    padding: 14px 16px !important;
    background: #fff !important;
    border: 1px solid #dce5f1 !important;
    border-radius: 12px !important;
    box-shadow: 0 3px 10px rgba(15,31,61,.04)
}

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

.subscription-filter-icon {
    width: 34px;
    height: 34px;
    color: #f97316;
    background: #fff1e8;
    border-radius: 9px
}

.subscription-filter-heading strong, .subscription-filter-heading small {
    display: block
}

.subscription-filter-heading strong {
    color: #0f1f3d;
    font-size: 13px
}

.subscription-filter-heading small {
    margin-top: 2px;
    color: #718198;
    font-size: 11px
}

.subscription-filter-control {
    width: min(100%,390px)
}

    .subscription-filter-control label {
        display: block;
        margin-bottom: 6px;
        color: #15233c;
        font-size: 12px
    }

.subscription-date-field {
    position: relative
}

    .subscription-date-field > svg {
        position: absolute;
        z-index: 2;
        top: 50%;
        left: 12px;
        width: 17px;
        height: 17px;
        transform: translateY(-50%);
        fill: none;
        stroke: #405572;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
        pointer-events: none
    }

    .subscription-date-field .form-control {
        height: 38px !important;
        padding-left: 40px !important;
        border: 1px solid #cfd9e8 !important;
        border-radius: 8px !important;
        background: #fff !important;
        box-shadow: none !important;
        font-size: 12px !important
    }

.subscription-table-card {
    overflow: hidden;
    background: #fff;
    border: 1px solid #dce5f1;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(15,31,61,.05)
}

.subscription-table-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid #e6ecf4
}

    .subscription-table-title strong, .subscription-table-title small {
        display: block
    }

    .subscription-table-title strong {
        color: #101f3d;
        font-size: 14px
    }

    .subscription-table-title small {
        margin-top: 3px;
        color: #74839a;
        font-size: 11px
    }

.subscription-table-responsive {
    margin: 0 !important;
    border: 0 !important
}

.subscription-data-table {
    width: 100% !important;
    margin: 0 !important;
    white-space: nowrap
}

    .subscription-data-table thead th {
        padding: 11px 12px !important;
        color: #1a2942 !important;
        background: #f8fafc !important;
        border-color: #e2e8f0 !important;
        font-size: 12px !important;
        font-weight: 700 !important
    }

    .subscription-data-table tbody td {
        padding: 11px 12px !important;
        color: #26354d;
        border-color: #e8edf4 !important;
        font-size: 12px !important;
        vertical-align: middle !important
    }

    .subscription-data-table tbody tr:hover {
        background: #fff9f5 !important
    }

.subscription-table-card .dataTables_wrapper > .row:first-child {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
    gap: 12px;
    padding: 12px 16px !important;
    margin: 0 !important
}

    .subscription-table-card .dataTables_wrapper > .row:first-child > div {
        width: auto !important;
        padding: 0 !important
    }

.subscription-table-card .dataTables_filter {
    text-align: right !important
}

    .subscription-table-card .dataTables_filter input {
        width: 230px !important;
        height: 36px !important;
        margin-left: 0 !important;
        padding: 7px 12px !important;
        border: 1px solid #cfd9e8 !important;
        border-radius: 8px !important;
        box-shadow: none !important
    }

.subscription-table-card .dataTables_length select {
    height: 34px !important;
    border: 1px solid #cfd9e8 !important;
    border-radius: 7px !important
}

.subscription-table-card .dataTables_wrapper > .row:last-child {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin: 0 !important;
    padding: 12px 16px !important;
    border-top: 1px solid #e6ecf4
}

.subscription-table-card .dataTables_info {
    padding-top: 0 !important;
    color: #718198 !important;
    font-size: 11px !important
}

.subscription-table-card .pagination {
    margin: 0 !important
}

.subscription-empty-state {
    padding: 60px 20px;
    text-align: center;
    background: #fff;
    border: 1px solid #dce5f1;
    border-radius: 12px
}

    .subscription-empty-state svg {
        width: 42px;
        height: 42px;
        fill: none;
        stroke: #f97316;
        stroke-width: 1.6
    }

    .subscription-empty-state h3 {
        margin: 12px 0 5px;
        color: #13223d;
        font-size: 16px
    }

    .subscription-empty-state p {
        color: #718198;
        font-size: 12px
    }

@media(max-width:767px) {
    .subscription-overview-strip, .subscription-filter-card {
        align-items: stretch;
        flex-direction: column
    }

    .subscription-status-key {
        white-space: normal
    }

    .subscription-filter-control {
        width: 100%
    }

    .subscription-table-card .dataTables_wrapper > .row:first-child {
        grid-template-columns: 1fr !important
    }

    .subscription-table-card .dataTables_filter, .subscription-table-card .dataTables_filter label {
        display: block !important;
        width: 100% !important
    }

        .subscription-table-card .dataTables_filter input {
            width: 100% !important
        }

    .subscription-table-card .dataTables_wrapper > .row:last-child {
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 10px
    }
}

/* Subscription and billing workspace */
.subscription-billing-page {
    font-family: 'Inter',sans-serif !important;
    color: #12213c
}

.billing-page-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 14px
}

.billing-heading-copy {
    display: flex;
    align-items: center;
    gap: 12px
}

.billing-heading-icon, .billing-section-title > span, .countdown-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto
}

.billing-heading-icon {
    width: 42px;
    height: 42px;
    color: #fff;
    background: linear-gradient(135deg,#ff7a18,#f4511e);
    border-radius: 12px;
    box-shadow: 0 9px 20px rgba(249,115,22,.24)
}

    .billing-heading-icon svg, .billing-scroll-plans svg, .billing-section-title svg, .countdown-icon svg, .no-active-plan svg {
        width: 21px;
        height: 21px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round
    }

.billing-page-heading h1 {
    margin: 0;
    color: #0b1f3a;
    font-size: 20px;
    font-weight: 600
}

.billing-page-heading p {
    margin: 4px 0 0;
    color: #68778e;
    font-size: 12px
}

.billing-scroll-plans {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 15px;
    color: #f26316;
    background: #fff;
    border: 1px solid #f97316;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 650
}

    .billing-scroll-plans svg {
        width: 17px;
        height: 17px
    }

    .billing-scroll-plans:hover {
        color: #fff;
        background: #f97316
    }

.active-plan-hero {
    display: grid;
    grid-template-columns: minmax(0,1fr) 245px;
    overflow: hidden;
    margin-bottom: 14px;
    color: #fff;
    background: radial-gradient(circle at 88% 15%,rgba(70,116,214,.24),transparent 28%),linear-gradient(120deg,#061c3e,#0b3267);
    border: 1px solid #163e70;
    border-radius: 15px;
    box-shadow: 0 13px 30px rgba(10,34,70,.13)
}

.active-plan-main {
    padding: 24px 28px
}

.active-plan-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 10px;
    color: #b9f8d7;
    background: rgba(23,178,106,.14);
    border: 1px solid rgba(53,213,135,.3);
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase
}

    .active-plan-badge span {
        width: 7px;
        height: 7px;
        background: #2dd483;
        border-radius: 50%;
        box-shadow: 0 0 0 4px rgba(45,212,131,.12)
    }

.active-plan-eyebrow {
    margin: 17px 0 4px !important;
    color: #85a9d5;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px
}

.active-plan-main h2 {
    margin: 0;
    font-size: 27px;
    font-weight: 750
}

.active-plan-description {
    max-width: 650px;
    margin: 7px 0 17px !important;
    color: #c0d1e6;
    font-size: 12px;
    line-height: 1.55
}

.active-plan-progress {
    max-width: 680px;
    height: 6px;
    overflow: hidden;
    background: #183e69;
    border-radius: 10px
}

    .active-plan-progress span {
        display: block;
        height: 100%;
        background: linear-gradient(90deg,#ff6a14,#ffaf3d);
        border-radius: 10px
    }

.active-plan-dates {
    display: flex;
    gap: 50px;
    margin-top: 12px
}

    .active-plan-dates span, .active-plan-dates small, .active-plan-dates strong {
        display: block
    }

    .active-plan-dates small {
        color: #85a9d5;
        font-size: 9px;
        text-transform: uppercase
    }

    .active-plan-dates strong {
        margin-top: 3px;
        font-size: 11px
    }

.active-plan-countdown {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 24px;
    text-align: center;
    background: rgba(255,255,255,.045);
    border-left: 1px solid rgba(255,255,255,.1)
}

.countdown-icon {
    width: 39px;
    height: 39px;
    margin-bottom: 7px;
    color: #ff9d42;
    background: rgba(249,115,22,.13);
    border-radius: 11px
}

.active-plan-countdown > strong {
    font-size: 38px;
    line-height: 1
}

.active-plan-countdown > span:not(.countdown-icon) {
    margin-top: 4px;
    color: #d7e4f3;
    font-size: 11px
}

.active-plan-countdown > small {
    margin-top: 10px;
    color: #88a5c7;
    font-size: 9px;
    line-height: 1.45
}

.no-active-plan {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
    padding: 22px;
    background: #fff8f4;
    border: 1px solid #fed7bd;
    border-radius: 13px
}

    .no-active-plan > span {
        display: grid;
        place-items: center;
        width: 42px;
        height: 42px;
        color: #f97316;
        background: #fff;
        border-radius: 11px
    }

    .no-active-plan h2 {
        margin: 0;
        font-size: 16px
    }

    .no-active-plan p {
        margin: 4px 0 0;
        color: #6f7d90;
        font-size: 11px
    }

.subscription-queue-card, .billing-history-card {
    margin-bottom: 14px;
    background: #fff;
    border: 1px solid #dce5f1;
    border-radius: 13px;
    box-shadow: 0 4px 15px rgba(15,31,61,.045)
}

.billing-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid #e7edf4
}

    .billing-section-title > span {
        width: 34px;
        height: 34px;
        color: #1266e3;
        background: #edf5ff;
        border-radius: 9px
    }

    .billing-section-title h2 {
        margin: 0;
        color: #11213e;
        font-size: 14px;
        font-weight: 700
    }

    .billing-section-title p {
        margin: 3px 0 0;
        color: #718096;
        font-size: 10px
    }

.subscription-queue-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 10px;
    padding: 13px
}

.queued-plan {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 10px
}

.queue-state {
    width: 9px;
    height: 9px;
    border-radius: 50%
}

    .queue-state.upcoming {
        background: #2478ed
    }

    .queue-state.waiting {
        background: #f59e0b
    }

.queued-plan div {
    min-width: 0;
    flex: 1
}

.queued-plan small {
    color: #718096;
    font-size: 9px;
    text-transform: uppercase
}

.queued-plan h3 {
    margin: 2px 0;
    color: #15233d;
    font-size: 13px
}

.queued-plan p {
    margin: 0;
    color: #718096;
    font-size: 10px
}

.queued-plan > a {
    padding: 7px 10px;
    color: #f97316;
    border: 1px solid #fdba8c;
    border-radius: 7px;
    font-size: 10px
}

.billing-history-card {
    overflow: hidden
}

    .billing-history-card .table-responsive {
        margin: 0;
        border: 0
    }

.billing-history-table {
    width: 100% !important;
    margin: 0 !important;
    white-space: nowrap
}

    .billing-history-table th {
        padding: 10px !important;
        color: #1b2940 !important;
        background: #f8fafc !important;
        border-color: #e5eaf1 !important;
        font-size: 11px !important
    }

    .billing-history-table td {
        padding: 10px !important;
        color: #2d3b51;
        border-color: #edf0f4 !important;
        font-size: 11px !important;
        vertical-align: middle !important
    }

    .billing-history-table tbody tr:hover {
        background: #fff9f4
    }

.billing-history-card .dataTables_wrapper > .row:first-child {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
    gap: 12px;
    margin: 0 !important;
    padding: 12px 16px !important
}

    .billing-history-card .dataTables_wrapper > .row:first-child > div {
        width: auto !important;
        padding: 0 !important
    }

.billing-history-card .dataTables_filter {
    text-align: right !important
}

    .billing-history-card .dataTables_filter input {
        width: 225px !important;
        height: 35px !important;
        margin: 0 !important;
        padding: 7px 11px !important;
        border: 1px solid #cfd9e8 !important;
        border-radius: 8px !important;
        box-shadow: none !important
    }

.billing-history-card .dataTables_length select {
    height: 34px !important;
    border: 1px solid #cfd9e8 !important;
    border-radius: 7px !important
}

.billing-history-card .dataTables_wrapper > .row:last-child {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin: 0 !important;
    padding: 11px 16px !important;
    border-top: 1px solid #e7edf4
}

.billing-history-card .dataTables_info {
    padding: 0 !important;
    color: #718096 !important;
    font-size: 10px !important
}

.available-packages {
    padding: 22px 0 4px;
    scroll-margin-top: 20px
}

.packages-heading {
    text-align: center;
    margin-bottom: 20px
}

    .packages-heading > span {
        color: #f97316;
        font-size: 9px;
        font-weight: 750;
        letter-spacing: 1.6px
    }

    .packages-heading h2 {
        margin: 5px 0 4px;
        color: #0b2143;
        font-size: 22px;
        font-weight: 750
    }

    .packages-heading p {
        margin: 0;
        color: #718096;
        font-size: 11px
    }

.package-card-grid {
    display: flex;
    flex-wrap: wrap
}

.subscription-billing-page .relite-package-card {
    height: 100%;
    border-radius: 13px !important;
    box-shadow: 0 8px 24px rgba(15,31,61,.07) !important
}

.subscription-billing-page .relite-package-summary {
    background: linear-gradient(145deg,#f8fbff,#fff) !important
}

.subscription-billing-page .relite-package-action {
    background: #ff6718 !important;
    border-color: #ff6718 !important
}

    .subscription-billing-page .relite-package-action:hover {
        background: #e9550b !important
    }

.subscription-billing-page .relite-package-features svg {
    color: #0873c9 !important
}

@media(max-width:767px) {
    .billing-page-heading {
        align-items: flex-start;
        flex-direction: column
    }

    .active-plan-hero {
        grid-template-columns: 1fr
    }

    .active-plan-countdown {
        border-top: 1px solid rgba(255,255,255,.1);
        border-left: 0
    }

    .active-plan-dates {
        gap: 25px
    }

    .subscription-queue-grid {
        grid-template-columns: 1fr
    }

    .billing-history-card .dataTables_wrapper > .row:first-child {
        grid-template-columns: 1fr !important
    }

    .billing-history-card .dataTables_filter, .billing-history-card .dataTables_filter label, .billing-history-card .dataTables_filter input {
        width: 100% !important
    }

    .billing-history-card .dataTables_wrapper > .row:last-child {
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 9px
    }
}

/* Subscription billing refinements */
.subscription-billing-page .billing-history-table tbody td {
    font-size: 13px !important
}

.billing-history-card .dataTables_wrapper > .tw-mb-3, .billing-history-card .dataTables_wrapper > .row:first-child {
    display: grid !important;
    grid-template-columns: auto minmax(420px,1fr) auto !important;
    align-items: center !important;
    gap: 16px !important;
    margin: 0 !important;
    padding: 12px 16px !important
}

    .billing-history-card .dataTables_wrapper > .tw-mb-3 > .col-sm-2:first-child, .billing-history-card .dataTables_wrapper > .row:first-child > .col-sm-2:first-child {
        justify-self: start !important
    }

    .billing-history-card .dataTables_wrapper > .tw-mb-3 > .col-sm-8, .billing-history-card .dataTables_wrapper > .row:first-child > .col-sm-8 {
        justify-self: center !important;
        text-align: center !important
    }

    .billing-history-card .dataTables_wrapper > .tw-mb-3 > .col-sm-2:last-child, .billing-history-card .dataTables_wrapper > .row:first-child > .col-sm-2:last-child {
        justify-self: end !important
    }

.relite-package-visual {
    display: grid;
    place-items: center;
    height: 126px;
    margin: 18px 18px 0;
    overflow: hidden;
    background: linear-gradient(145deg,#f7f9ff,#fff);
    border: 1px solid #e2e8f4;
    border-radius: 12px
}

    .relite-package-visual svg {
        width: 150px;
        height: 94px;
        fill: none;
        stroke: #244bcc;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round
    }

    .relite-package-visual .visual-cloud {
        fill: #eef1ff;
        stroke: none
    }

    .relite-package-visual.visual-1 svg {
        stroke: #395ce2
    }

    .relite-package-visual.visual-2 svg {
        stroke: #123f9f
    }

.relite-package-card.is-popular .relite-package-visual {
    background: linear-gradient(145deg,#fff8f2,#fff)
}

.subscription-billing-page .relite-package-summary {
    margin: 0 18px !important;
    padding: 17px 4px 14px !important;
    background: transparent !important;
    border: 0 !important;
    text-align: center
}

    .subscription-billing-page .relite-package-summary h2 {
        color: #1745cf !important;
        font-size: 22px !important
    }

    .subscription-billing-page .relite-package-summary p {
        min-height: 32px;
        color: #6e7c96 !important
    }

.subscription-billing-page .relite-package-price {
    justify-content: center !important;
    text-align: center
}

.subscription-billing-page .relite-package-features {
    border-top: 1px solid #e9edf5
}

.subscription-billing-page .relite-package-action {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 7px
}

    .subscription-billing-page .relite-package-action svg {
        width: 17px;
        height: 17px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round
    }

    .subscription-billing-page .relite-package-action.is-current {
        color: #718096 !important;
        background: #e9edf3 !important;
        border-color: #d7dde7 !important;
        cursor: not-allowed !important;
        box-shadow: none !important;
        opacity: 1 !important
    }

@media(max-width:900px) {
    .billing-history-card .dataTables_wrapper > .tw-mb-3, .billing-history-card .dataTables_wrapper > .row:first-child {
        grid-template-columns: 1fr !important
    }

        .billing-history-card .dataTables_wrapper > .tw-mb-3 > div, .billing-history-card .dataTables_wrapper > .row:first-child > div {
            justify-self: stretch !important
        }

    .billing-history-card .dt-buttons {
        text-align: left !important
    }

    .billing-history-card .dataTables_filter {
        text-align: left !important
    }
}

/* Subscription toolbar and plan grid alignment */
.billing-history-card .dataTables_wrapper .tw-mb-3 {
    display: grid !important;
    grid-template-columns: auto minmax(520px,1fr) auto !important;
    align-items: center !important;
    column-gap: 18px !important;
    row-gap: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 12px 16px !important
}

    .billing-history-card .dataTables_wrapper .tw-mb-3:before, .billing-history-card .dataTables_wrapper .tw-mb-3:after {
        display: none !important
    }

    .billing-history-card .dataTables_wrapper .tw-mb-3 > .col-sm-2, .billing-history-card .dataTables_wrapper .tw-mb-3 > .col-sm-8 {
        float: none !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important
    }

        .billing-history-card .dataTables_wrapper .tw-mb-3 > .col-sm-2:first-child {
            grid-column: 1;
            justify-self: start
        }

    .billing-history-card .dataTables_wrapper .tw-mb-3 > .col-sm-8 {
        grid-column: 2;
        justify-self: center;
        text-align: center
    }

    .billing-history-card .dataTables_wrapper .tw-mb-3 > .col-sm-2:last-child {
        grid-column: 3;
        justify-self: end
    }

    .billing-history-card .dataTables_wrapper .tw-mb-3 .dataTables_length, .billing-history-card .dataTables_wrapper .tw-mb-3 .dataTables_filter {
        margin: 0 !important;
        white-space: nowrap
    }

        .billing-history-card .dataTables_wrapper .tw-mb-3 .dataTables_filter label {
            margin: 0 !important
        }

        .billing-history-card .dataTables_wrapper .tw-mb-3 .dataTables_filter input {
            width: 225px !important
        }

.subscription-billing-page .package-card-grid > .relite-package-column {
    display: flex !important;
    flex: 0 0 25% !important;
    width: 25% !important;
    max-width: 25% !important
}

.subscription-billing-page .relite-package-card {
    width: 100% !important
}

.subscription-billing-page .relite-package-summary {
    min-height: 92px
}

.subscription-billing-page .relite-package-features {
    min-height: 286px
}

@media(max-width:1250px) {
    .billing-history-card .dataTables_wrapper .tw-mb-3 {
        grid-template-columns: auto minmax(400px,1fr) auto !important
    }

    .subscription-billing-page .package-card-grid > .relite-package-column {
        flex-basis: 50% !important;
        width: 50% !important;
        max-width: 50% !important
    }
}

@media(max-width:900px) {
    .billing-history-card .dataTables_wrapper .tw-mb-3 {
        grid-template-columns: 1fr !important;
        row-gap: 10px !important
    }

        .billing-history-card .dataTables_wrapper .tw-mb-3 > .col-sm-2:first-child, .billing-history-card .dataTables_wrapper .tw-mb-3 > .col-sm-8, .billing-history-card .dataTables_wrapper .tw-mb-3 > .col-sm-2:last-child {
            grid-column: 1 !important;
            justify-self: stretch !important
        }

        .billing-history-card .dataTables_wrapper .tw-mb-3 .dataTables_filter input {
            width: 100% !important
        }
}

@media(max-width:650px) {
    .subscription-billing-page .package-card-grid > .relite-package-column {
        flex-basis: 100% !important;
        width: 100% !important;
        max-width: 100% !important
    }
}

/* Stable billing DataTables toolbar */
.billing-history-card .billing-dt-toolbar {
    display: grid !important;
    grid-template-columns: auto minmax(500px,1fr) auto !important;
    align-items: center !important;
    gap: 18px !important;
    padding: 13px 16px !important;
    border-bottom: 1px solid #e7edf4 !important
}

.billing-history-card .billing-toolbar-length {
    justify-self: start
}

.billing-history-card .billing-toolbar-buttons {
    justify-self: center;
    text-align: center
}

.billing-history-card .billing-toolbar-search {
    justify-self: end
}

.billing-history-card .billing-dt-toolbar .dataTables_length, .billing-history-card .billing-dt-toolbar .dataTables_filter {
    margin: 0 !important;
    white-space: nowrap !important
}

    .billing-history-card .billing-dt-toolbar .dataTables_filter label {
        margin: 0 !important
    }

    .billing-history-card .billing-dt-toolbar .dataTables_filter input {
        width: 225px !important;
        height: 35px !important;
        margin: 0 !important;
        padding: 7px 11px !important;
        border: 1px solid #cfd9e8 !important;
        border-radius: 8px !important;
        box-shadow: none !important
    }

.billing-history-card .billing-dt-toolbar + .tw-mb-3, .billing-history-card .billing-dt-toolbar ~ .tw-mb-3:has(.dataTables_length), .billing-history-card .billing-dt-toolbar ~ .row:has(.dataTables_length) {
    display: none !important
}

/* Creative comparison pricing cards */
.subscription-billing-page .package-card-grid {
    position: relative;
    align-items: stretch;
    margin-right: -10px !important;
    margin-left: -10px !important
}

    .subscription-billing-page .package-card-grid > .relite-package-column {
        padding-right: 10px !important;
        padding-left: 10px !important
    }

.subscription-billing-page .relite-package-card {
    position: relative;
    overflow: visible !important;
    background: #fff !important;
    border: 1px solid #d9e1ec !important;
    border-radius: 14px !important;
    box-shadow: 0 9px 28px rgba(14,31,58,.07) !important;
    transition: transform .2s ease,box-shadow .2s ease
}

    .subscription-billing-page .relite-package-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 17px 35px rgba(14,31,58,.13) !important
    }

    .subscription-billing-page .relite-package-card.is-popular {
        border: 3px solid #ff6673 !important;
        background: linear-gradient(180deg,#fff4d8 0,#fff4d8 31%,#fff 31%,#fff 100%) !important;
        box-shadow: 0 15px 35px rgba(255,87,105,.17) !important
    }

.subscription-billing-page .relite-package-ribbon {
    top: -31px !important;
    right: -3px !important;
    left: auto !important;
    width: 145px !important;
    height: 31px !important;
    padding: 7px 12px !important;
    color: #fff !important;
    background: linear-gradient(90deg,#ff6d79,#f45f68) !important;
    border-radius: 7px 7px 0 0 !important;
    font-size: 11px !important;
    font-weight: 750 !important;
    text-align: center !important;
    transform: none !important
}

    .subscription-billing-page .relite-package-ribbon:before, .subscription-billing-page .relite-package-ribbon:after {
        display: none !important
    }

.subscription-billing-page .relite-package-visual {
    height: 112px;
    margin: 20px 20px 0;
    background: transparent !important;
    border: 0 !important
}

.subscription-billing-page .relite-package-card.is-popular .relite-package-visual {
    background: transparent !important
}

.subscription-billing-page .relite-package-visual svg {
    width: 142px;
    height: 90px
}

.subscription-billing-page .relite-package-summary {
    min-height: 98px;
    margin: 0 20px !important;
    padding: 3px 0 17px !important;
    text-align: left !important
}

    .subscription-billing-page .relite-package-summary h2 {
        margin-bottom: 8px !important;
        color: #17254a !important;
        font-size: 21px !important
    }

    .subscription-billing-page .relite-package-summary p {
        min-height: 0 !important;
        color: #65728d !important;
        font-size: 11px !important;
        line-height: 1.5
    }

.subscription-billing-page .relite-package-price {
    display: block !important;
    margin: 0 !important;
    padding: 17px 20px 18px !important;
    text-align: left !important;
    border-top: 1px solid #e2e7ee;
    border-bottom: 1px solid #e2e7ee
}

    .subscription-billing-page .relite-package-price strong {
        color: #1b294a !important;
        font-size: 28px !important
    }

        .subscription-billing-page .relite-package-price strong:before {
            content: 'Best value';
            display: block;
            margin-bottom: 4px;
            color: #f45f68;
            font-size: 9px;
            font-weight: 700;
            letter-spacing: .5px;
            text-transform: uppercase
        }

    .subscription-billing-page .relite-package-price span {
        color: #4e5c75 !important;
        font-size: 10px !important
    }

.subscription-billing-page .relite-package-features {
    min-height: 300px;
    margin: 0 !important;
    padding: 20px !important;
    border: 0 !important
}

    .subscription-billing-page .relite-package-features li {
        padding: 6px 0 !important;
        color: #34415c !important;
        font-size: 11px !important
    }

    .subscription-billing-page .relite-package-features svg {
        width: 15px !important;
        height: 15px !important;
        color: #11b870 !important
    }

.subscription-billing-page .relite-package-action {
    margin: 0 20px 20px !important;
    border-radius: 20px !important;
    background: #ff1f45 !important;
    border-color: #ff1f45 !important;
    font-size: 12px !important
}

.subscription-billing-page .relite-package-card:not(.is-popular) .relite-package-action:not(.is-current) {
    color: #ff1f45 !important;
    background: #fff !important;
    border: 1px solid #ff1f45 !important
}

    .subscription-billing-page .relite-package-card:not(.is-popular) .relite-package-action:not(.is-current):hover {
        color: #fff !important;
        background: #ff1f45 !important
    }

.subscription-billing-page .relite-package-action.is-current {
    color: #718096 !important;
    background: #e9edf3 !important;
    border: 1px solid #d7dde7 !important
}

.compare-plan-features {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: max-content;
    margin: 5px auto 0;
    padding: 9px 16px;
    color: #1168e7;
    background: #f5f7fa;
    border: 1px solid #e2e7ee;
    border-radius: 22px;
    font-size: 11px;
    font-weight: 700;
    box-shadow: 0 5px 15px rgba(15,31,61,.06)
}

    .compare-plan-features svg {
        width: 16px;
        height: 16px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round
    }

@media(max-width:1100px) {
    .billing-history-card .billing-dt-toolbar {
        grid-template-columns: 1fr !important
    }

    .billing-history-card .billing-toolbar-length, .billing-history-card .billing-toolbar-buttons, .billing-history-card .billing-toolbar-search {
        justify-self: stretch !important
    }

    .billing-history-card .billing-toolbar-buttons {
        text-align: left
    }

    .billing-history-card .billing-dt-toolbar .dataTables_filter input {
        width: 100% !important
    }
}

/* Restore previous illustrated subscription pricing design */
.subscription-billing-page .relite-package-card, .subscription-billing-page .relite-package-card.is-popular {
    overflow: hidden !important;
    background: #fff !important;
    border: 1px solid #d9e1ec !important;
    border-radius: 13px !important;
    box-shadow: 0 8px 24px rgba(15,31,61,.07) !important;
    transform: none !important
}

    .subscription-billing-page .relite-package-card:hover {
        transform: translateY(-3px) !important;
        box-shadow: 0 13px 30px rgba(15,31,61,.11) !important
    }

    .subscription-billing-page .relite-package-card.is-popular {
        border-color: #ff8a57 !important
    }

.subscription-billing-page .relite-package-ribbon {
    top: 13px !important;
    right: -37px !important;
    left: auto !important;
    width: 145px !important;
    height: auto !important;
    padding: 6px 10px !important;
    color: #fff !important;
    background: #ff6718 !important;
    border-radius: 0 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    transform: rotate(38deg) !important
}

.subscription-billing-page .relite-package-visual {
    height: 126px;
    margin: 18px 18px 0 !important;
    background: linear-gradient(145deg,#f7f9ff,#fff) !important;
    border: 1px solid #e2e8f4 !important;
    border-radius: 12px !important
}

.subscription-billing-page .relite-package-card.is-popular .relite-package-visual {
    background: linear-gradient(145deg,#fff8f2,#fff) !important
}

.subscription-billing-page .relite-package-visual svg {
    width: 150px;
    height: 94px
}

.subscription-billing-page .relite-package-summary {
    min-height: 92px;
    margin: 0 18px !important;
    padding: 17px 4px 14px !important;
    background: transparent !important;
    border: 0 !important;
    text-align: center !important
}

    .subscription-billing-page .relite-package-summary h2 {
        margin-bottom: 6px !important;
        color: #1745cf !important;
        font-size: 22px !important
    }

    .subscription-billing-page .relite-package-summary p {
        min-height: 32px !important;
        color: #6e7c96 !important;
        font-size: 11px !important
    }

.subscription-billing-page .relite-package-price {
    display: flex !important;
    justify-content: center !important;
    align-items: baseline !important;
    margin: 0 18px !important;
    padding: 15px 0 !important;
    text-align: center !important;
    border-top: 1px dashed #dfe6ef !important;
    border-bottom: 0 !important
}

    .subscription-billing-page .relite-package-price strong {
        color: #ff6718 !important;
        font-size: 27px !important
    }

        .subscription-billing-page .relite-package-price strong:before {
            display: none !important;
            content: none !important
        }

    .subscription-billing-page .relite-package-price span {
        color: #26354d !important;
        font-size: 10px !important
    }

.subscription-billing-page .relite-package-features {
    min-height: 286px;
    margin: 0 18px !important;
    padding: 15px 0 !important;
    border-top: 1px solid #e9edf5 !important
}

    .subscription-billing-page .relite-package-features li {
        padding: 6px 0 !important;
        color: #68758b !important;
        font-size: 11px !important
    }

    .subscription-billing-page .relite-package-features svg {
        width: 15px !important;
        height: 15px !important;
        color: #0873c9 !important
    }

.subscription-billing-page .relite-package-action {
    margin: 0 18px 18px !important;
    color: #fff !important;
    background: #ff6718 !important;
    border: 1px solid #ff6718 !important;
    border-radius: 6px !important;
    font-size: 12px !important
}

.subscription-billing-page .relite-package-card:not(.is-popular) .relite-package-action:not(.is-current) {
    color: #fff !important;
    background: #ff6718 !important;
    border-color: #ff6718 !important
}

.subscription-billing-page .relite-package-card .relite-package-action:hover {
    color: #fff !important;
    background: #e9550b !important
}

.subscription-billing-page .relite-package-action.is-current {
    color: #718096 !important;
    background: #e9edf3 !important;
    border-color: #d7dde7 !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 {
        display: flex;
        align-items: center;
        min-height: 58px;
        padding: 13px 20px !important;
        background: #fffaf5;
        border-bottom: 1px solid #e2e8f0;
    }

    .quick-product-modal-modern .modal-header .close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        float: none;
        order: 2;
        width: 28px;
        height: 28px;
        margin: 0 0 0 auto;
        padding: 0;
        line-height: 1;
    }

    .quick-product-modal-modern .modal-header .close svg {
        width: 16px;
        height: 16px;
    }

    .quick-product-modal-modern .modal-title {
        color: #111827;
        font-size: 17px;
        font-weight: 600;
        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-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: 600;
    }

    .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;
        height: 165px !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-toolbar-row {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.dataTables_wrapper .dt-toolbar-length {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.dataTables_wrapper .dt-toolbar-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
}

.dataTables_wrapper .dt-toolbar-buttons .dt-buttons {
    float: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.dataTables_wrapper .dt-toolbar-search {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.dataTables_wrapper .dt-toolbar-length .dataTables_length,
.dataTables_wrapper .dt-toolbar-search .dataTables_filter {
    float: none !important;
    margin: 0;
}

@media (max-width: 767px) {
    .dataTables_wrapper .dt-toolbar-row {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .dataTables_wrapper .dt-toolbar-length,
    .dataTables_wrapper .dt-toolbar-buttons,
    .dataTables_wrapper .dt-toolbar-search {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}

    .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;
}

.selling-price-form-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    padding: 4px 0 12px;
}

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

.product-save-btn-opening {
    border-color: #6d5db5;
    color: #fff;
    background: #6d5db5;
}

.product-save-btn-opening:hover,
.product-save-btn-opening:focus {
    border-color: #58489f;
    color: #fff;
    background: #58489f;
}

.product-save-btn-another {
    border-color: #d81b60;
    color: #fff;
    background: #d81b60;
}

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

    .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;
    }

    .selling-price-form-actions {
        padding-left: 0;
        padding-right: 0;
    }
}

@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 {
    /* 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;
        }

/* DataTables column-visibility collection: shared theme styling. */
ul.dt-button-collection.dropdown-menu {
    max-height: calc(100vh - 24px);
    padding: 6px !important;
    border: 1px solid #dbe4ee !important;
    border-top: 3px solid #f97316 !important;
    border-radius: 10px !important;
    color: #253550 !important;
    background: #ffffff !important;
    box-shadow: 0 14px 34px rgba(15, 35, 70, .18) !important;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #fb923c #f1f5f9;
}

ul.dt-button-collection.dropdown-menu::-webkit-scrollbar {
    width: 8px;
}

ul.dt-button-collection.dropdown-menu::-webkit-scrollbar-track {
    border-radius: 8px;
    background: #f1f5f9;
}

ul.dt-button-collection.dropdown-menu::-webkit-scrollbar-thumb {
    border: 2px solid #f1f5f9;
    border-radius: 8px;
    background: #fb923c;
}

ul.dt-button-collection.dropdown-menu::-webkit-scrollbar-thumb:hover {
    background: #f97316;
}

ul.dt-button-collection.dropdown-menu.relite-colvis-collection {
    position: fixed !important;
    right: auto !important;
    margin: 0 !important;
}

ul.dt-button-collection.dropdown-menu > li.relite-colvis-empty {
    display: none !important;
}

ul.dt-button-collection.dropdown-menu > li.dt-button {
    min-height: 32px;
    margin: 1px 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 7px !important;
    color: #334155 !important;
    background: transparent !important;
    box-shadow: none !important;
}

ul.dt-button-collection.dropdown-menu > li.dt-button > a {
    display: flex !important;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 7px 10px !important;
    border-radius: 7px !important;
    color: #334155 !important;
    background: transparent !important;
    font-size: 12px;
    line-height: 18px;
    white-space: normal;
}

ul.dt-button-collection.dropdown-menu > li.buttons-columnVisibility > a::before {
    display: inline-grid;
    place-items: center;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    border: 1px solid #cbd5e1;
    border-radius: 5px;
    color: transparent;
    background: #ffffff;
    content: '\2713';
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

ul.dt-button-collection.dropdown-menu > li.buttons-columnVisibility.active > a::before {
    border-color: #f97316;
    color: #ffffff;
    background: #f97316;
}

ul.dt-button-collection.dropdown-menu > li.dt-button:hover > a,
ul.dt-button-collection.dropdown-menu > li.dt-button:focus > a,
ul.dt-button-collection.dropdown-menu > li.dt-button > a:hover,
ul.dt-button-collection.dropdown-menu > li.dt-button > a:focus {
    color: #c2410c !important;
    background: #fff4eb !important;
}

ul.dt-button-collection.dropdown-menu > li.dt-button.active > a {
    color: #1f2937 !important;
    background: #fffaf6 !important;
    font-weight: 600;
}

ul.dt-button-collection.dropdown-menu > li.dt-button.active:hover > a,
ul.dt-button-collection.dropdown-menu > li.dt-button.active > a:hover,
ul.dt-button-collection.dropdown-menu > li.dt-button.active > a:focus {
    color: #c2410c !important;
    background: #fff1e6 !important;
}

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 {
    padding-left: 15px;
    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;
    }

.app-main-footer__support {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 18px;
    padding: 0 12px;
    color: #6b7280;
    font-size: 13px;
    line-height: 1.25
}

.app-main-footer__message {
    white-space: nowrap
}

.app-main-footer__link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #6b7280;
    text-decoration: none;
    white-space: nowrap;
    transition: color .18s ease
}

    .app-main-footer__link:hover,
    .app-main-footer__link:focus {
        color: #ff6b17;
        text-decoration: none
    }

    .app-main-footer__link svg {
        width: 17px;
        height: 17px;
        flex: 0 0 17px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round
    }

.app-main-footer__link--phone svg {
    color: #7c3aed
}

.app-main-footer__link--email svg {
    color: #ef4444
}

.app-main-footer__link--support svg {
    color: #f97316
}

@media(max-width:767px) {
    .app-main-footer {
        min-height: 44px;
        height: auto;
        padding: 7px 0
    }

    .app-main-footer__support {
        gap: 6px 12px;
        font-size: 12px
    }
}

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; */
    }

    #add_pos_sell_form .pos-joined-input,
    #edit_pos_sell_form .pos-joined-input {
        width: 100%;
        height: 34px;
        border: 1px solid #cbd7e5;
        border-radius: 8px;
        border-collapse: separate;
        background: #fff;
        box-shadow: none;
        overflow: hidden;
        transition: border-color .18s ease, box-shadow .18s ease
    }

    #add_pos_sell_form .pos-joined-input:focus-within,
    #edit_pos_sell_form .pos-joined-input:focus-within {
        border-color: #ff6b13;
        box-shadow: 0 0 0 2px rgba(255,107,19,.1)
    }

    #add_pos_sell_form .pos-joined-input > .form-control,
    #edit_pos_sell_form .pos-joined-input > .form-control,
    #add_pos_sell_form .pos-joined-input > .input-group-addon,
    #edit_pos_sell_form .pos-joined-input > .input-group-addon,
    #add_pos_sell_form .pos-joined-input .select2-selection--single,
    #edit_pos_sell_form .pos-joined-input .select2-selection--single,
    #add_pos_sell_form .pos-joined-input > .input-group-btn .btn,
    #edit_pos_sell_form .pos-joined-input > .input-group-btn .btn {
        height: 32px !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important
    }

    #add_pos_sell_form .pos-joined-input > .input-group-addon:first-child,
    #edit_pos_sell_form .pos-joined-input > .input-group-addon:first-child,
    #add_pos_sell_form .pos-joined-input > .input-group-btn:first-child .btn,
    #edit_pos_sell_form .pos-joined-input > .input-group-btn:first-child .btn {
        border-right: 1px solid #dbe4ee !important
    }

    #add_pos_sell_form .pos-joined-input > .input-group-btn:last-child .btn,
    #edit_pos_sell_form .pos-joined-input > .input-group-btn:last-child .btn {
        border-left: 1px solid #dbe4ee !important
    }

    #add_pos_sell_form .pos-joined-input > .input-group-btn:last-child .btn + .btn,
    #edit_pos_sell_form .pos-joined-input > .input-group-btn:last-child .btn + .btn {
        margin-left: 0 !important
    }

    #add_pos_sell_form .pos-joined-input .select2-container,
    #edit_pos_sell_form .pos-joined-input .select2-container {
        height: 32px !important
    }

    #add_pos_sell_form .pos-joined-input .select2-selection__rendered,
    #edit_pos_sell_form .pos-joined-input .select2-selection__rendered {
        line-height: 32px !important
    }

    body.relite-dark #add_pos_sell_form .pos-joined-input,
    body.relite-dark #edit_pos_sell_form .pos-joined-input {
        border-color: #38516c;
        background: #102844
    }
/* ===== 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;
}

/* Align the price input with the first line of the quantity control. */
body.lockscreen #pos_table > tbody > tr.product_row > td.pos-price-inc-tax-cell {
    vertical-align: top !important;
}

body.lockscreen #pos_table td.pos-price-inc-tax-cell .pos_unit_price_inc_tax {
    display: block;
    box-sizing: border-box;
    width: 100% !important;
    max-width: 132px;
    height: 32px;
    margin: 0;
}

body.lockscreen #pos_table > tbody > tr.product_row > td.pos-subtotal-cell {
    vertical-align: top !important;
}

body.lockscreen #pos_table td.pos-subtotal-cell .pos_line_total {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 132px;
    height: 32px;
    margin: 0 auto;
}

body.lockscreen #pos_table td.pos-subtotal-cell .pos_line_total_text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    line-height: 1.2;
}

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: 600 !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  .widget-slot {
                    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__icon svg {
        width: 19px;
        height: 19px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.compact-delete-alert__icon--cancel {
    color: #f97316;
    background: #fff7ed;
    border-color: #fed7aa;
}

.compact-delete-alert__icon--change {
    color: #2563eb;
    background: #eff6ff;
    border-color: #bfdbfe;
}

.compact-delete-alert__icon--warning {
    color: #d97706;
    background: #fffbeb;
    border-color: #fde68a;
}

.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;
    }

.quick-product-modal-modern .modal-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    order: 1;
}

.quick-product-action-icon {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
}

.quick-product-title-icon {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    padding: 8px;
    color: #f97316;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 9px;
}

.quick-product-modal-modern .modal-footer .tw-dw-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

/* Purchase shipping and expenses panel. */
.purchase-editor-modern .purchase-section-shipping .reference-section-heading { margin-bottom: 12px; }
.purchase-editor-modern .purchase-section-shipping .shipping-modern-grid { display: flex; align-items: flex-end; margin: 0 -8px 14px; }
.purchase-editor-modern .purchase-section-shipping .shipping-modern-grid > [class*="col-"] { padding: 0 8px; }
.purchase-editor-modern .purchase-section-shipping .shipping-modern-grid > :first-child { width: 58.333333%; }
.purchase-editor-modern .purchase-section-shipping .shipping-charge-field { width: 41.666667%; margin-left: 0 !important; padding-left: 32px !important; border-left: 1px solid #dbe7f6; }
.purchase-editor-modern .purchase-section-shipping label { color: #102451; font-size: 14px; font-weight: 600; }
.purchase-editor-modern .purchase-section-shipping .form-control { height: 38px; border-color: #cddcef; border-radius: 7px; box-shadow: 0 1px 3px rgba(15, 40, 80, .04); }
.purchase-editor-modern .purchase-section-shipping #shipping_details { padding-left: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2360779b' stroke-width='1.8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 3h9l3 3v15H6z'/%3E%3Cpath stroke-linecap='round' d='M9 10h6m-6 4h6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-size:19px; background-position:14px center; }
.purchase-editor-modern .purchase-section-shipping .shipping-additional-panel { position: relative; margin: 0; padding: 60px 18px 14px; border: 1px solid #dce8f6; border-radius: 16px; background: linear-gradient(180deg,#f6faff 0,#fff 60%); }
.purchase-editor-modern .purchase-section-shipping .shipping-additional-heading { position:absolute; top:18px; left:20px; display:flex; align-items:center; gap:12px; color:#102451; }
.purchase-editor-modern .purchase-section-shipping .shipping-additional-heading__icon { display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; color:#f97316; background:#fff7ed; border-radius:50%; }
.purchase-editor-modern .purchase-section-shipping .shipping-additional-heading__icon svg { width:22px; height:22px; }
.purchase-editor-modern .purchase-section-shipping .shipping-additional-heading strong,.purchase-editor-modern .purchase-section-shipping .shipping-additional-heading small { display:block; }
.purchase-editor-modern .purchase-section-shipping .shipping-additional-heading strong { font-size:14px; font-weight:600; }

/* Purchase totals and adjustments. */
.purchase-editor-modern .purchase-section-adjustments .table { width:100%; margin:0; border-collapse:separate; border-spacing:0; }
.purchase-editor-modern .purchase-section-adjustments .sale-reference-panel__head { min-height:44px !important; margin-bottom:9px !important; padding-bottom:8px !important; }
.purchase-editor-modern .purchase-section-adjustments .sale-reference-panel__icon { width:32px; height:32px; flex-basis:32px; margin-right:9px; }
.purchase-editor-modern .purchase-section-adjustments .sale-reference-panel__copy p { display:none; }
.purchase-editor-modern .purchase-section-adjustments .table > tbody > tr { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(250px,.82fr); column-gap:22px; align-items:start; }
.purchase-editor-modern .purchase-section-adjustments .table td { padding:0 0 6px; border:0; vertical-align:top; }
.purchase-editor-modern .purchase-section-adjustments .table tr:nth-child(2) td:not(:nth-child(4)) { display:none; }
.purchase-editor-modern .purchase-section-adjustments .table tr.add_without_price_hide td:nth-child(4) { grid-column:4; min-height:62px; padding:11px 14px 11px 58px !important; border-radius:10px; color:#142850; background:#fff8f5; position:relative; font-size:14px; font-weight:600; }
.purchase-editor-modern .purchase-section-adjustments .table tr.add_without_price_hide td:nth-child(4)::before { content:''; position:absolute; top:14px; left:14px; width:30px; height:30px; border-radius:50%; background:#fff0e9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23f97316' stroke-width='1.8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M20 13.5 13.5 20 4 10.5V4h6.5L20 13.5Z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1' fill='%23f97316' stroke='none'/%3E%3C/svg%3E") center/16px no-repeat; }
.purchase-editor-modern .purchase-section-adjustments .table tr.add_without_price_hide td:nth-child(4) .display_currency { display:block !important; margin-top:2px !important; color:#f4510b !important; font-size:19px !important; font-weight:700 !important; line-height:1.1; }
.purchase-editor-modern .purchase-section-adjustments .table tr:nth-child(2) td:nth-child(4)::before { background-color:#fff0e9; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23f97316' stroke-width='1.8'%3E%3Crect x='5' y='3' width='14' height='18' rx='2'/%3E%3Cpath d='M8 7h8M8 11h2m4 0h2M8 15h2m4 0h2M8 18h8'/%3E%3C/svg%3E"); }
.purchase-editor-modern .purchase-section-adjustments .form-group { margin:0; }
.purchase-editor-modern .purchase-section-adjustments label { margin-bottom:5px; color:#152d56; font-size:13px; font-weight:600; }
.purchase-editor-modern .purchase-section-adjustments .form-control { height:36px; border-color:#d4dfed; border-radius:7px; font-size:13px; }
.purchase-editor-modern .purchase-section-adjustments .table > tbody > tr:last-child { display:block; clear:both; margin-top:-54px; }
.purchase-editor-modern .purchase-section-adjustments .table > tbody > tr:last-child td { display:block; padding:0; }
.purchase-editor-modern .purchase-section-adjustments #additional_notes { min-height:56px; resize:vertical; }
@media(max-width:767px){.purchase-editor-modern .purchase-section-adjustments .table > tbody > tr{grid-template-columns:1fr;gap:12px}.purchase-editor-modern .purchase-section-adjustments .table tr.add_without_price_hide td:nth-child(4){grid-column:auto;min-height:80px}.purchase-editor-modern .purchase-section-adjustments .table tr td:nth-child(3){display:none}}
.purchase-editor-modern .purchase-section-shipping .shipping-additional-heading small { margin-top:2px; color:#657a9d; font-size:12px; }
.purchase-editor-modern .purchase-section-shipping .shipping-additional-panel > .text-center { position: absolute; top: 16px; left: 18px; right: 18px; width: auto !important; margin: 0 !important; display: flex; justify-content: flex-end; padding: 0 !important; }
.purchase-editor-modern .purchase-section-shipping #toggle_additional_expense { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 15px; border: 0; border-radius: 7px; background: #ff6b16; box-shadow: 0 5px 10px rgba(249,115,22,.16); font-size: 13px; font-weight: 600; }
.purchase-editor-modern .purchase-section-shipping #additional_expenses_div { padding: 0; }
.purchase-editor-modern .purchase-section-shipping #additional_expenses_div .table { margin: 0; table-layout: fixed; }
.purchase-editor-modern .purchase-section-shipping #additional_expenses_div th { padding: 0 0 8px; border: 0; color: #526b91; font-size: 13px; font-weight: 600; }
.purchase-editor-modern .purchase-section-shipping #additional_expenses_div th:first-child { width: 68%; }
.purchase-editor-modern .purchase-section-shipping #additional_expenses_div td { padding: 5px 7px 5px 0; border: 0; }
.purchase-editor-modern .purchase-section-shipping #additional_expenses_div td + td { padding-left: 8px; padding-right: 0; }
.purchase-editor-modern .purchase-section-shipping #additional_expenses_div td:last-child { width:32%; }
.purchase-editor-modern .purchase-section-shipping #additional_expenses_div td:last-child .form-control { width:100% !important; }
.purchase-editor-modern .purchase-section-shipping #additional_expenses_div .form-control { height: 34px; }
.purchase-editor-modern .purchase-section-shipping #additional_expenses_div td:first-child .form-control { padding-left: 42px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2360779b' stroke-width='1.8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M20 13.5 13.5 20 4 10.5V4h6.5L20 13.5Z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1' fill='%2360779b' stroke='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 19px; background-position: 14px center; }
@media (max-width: 767px) { .purchase-editor-modern .purchase-section-shipping .shipping-modern-grid { display:block; }.purchase-editor-modern .purchase-section-shipping .shipping-modern-grid > :first-child,.purchase-editor-modern .purchase-section-shipping .shipping-charge-field { width:100%; padding:0 8px !important; border-left:0; }.purchase-editor-modern .purchase-section-shipping .shipping-additional-panel { padding:76px 10px 10px; }.purchase-editor-modern .purchase-section-shipping .shipping-additional-panel > .text-center { left:10px; right:10px; }.purchase-editor-modern .purchase-section-shipping #additional_expenses_div th:first-child { width:62%; } }

/* 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: 600;
}

.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 .project-modal-field-icon {
    width: 31px;
    height: 31px;
    flex: 0 0 31px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 7px;
    vertical-align: middle;
    color: #64748b;
    border-radius: 8px;
    background: #f1f5f9;
}

    .project-modal-modern .project-modal-field-icon .project-outline-icon {
        width: 17px;
        height: 17px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .project-modal-modern a:hover > .project-modal-field-icon,
    .project-modal-modern button:hover > .project-modal-field-icon,
    .project-modal-modern .project-modal-field-icon:hover {
        color: #ff6b17;
        background: #fff2e9;
    }

.project-modal-modern .modal-body .btn,
.project-modal-modern .modal-body a {
    border-radius: 7px;
}

.project-modal-modern .modal-body .table-responsive {
    overflow-x: auto;
    border: 1px solid #e5eaf0;
    border-radius: 9px;
    background: #fff;
}

.project-modal-modern .modal-body table {
    margin-bottom: 0;
}

    .project-modal-modern .modal-body table thead th {
        color: #334155;
        border-color: #e5eaf0;
        background: #f8fafc;
        font-size: 12px;
        font-weight: 700;
    }

    .project-modal-modern .modal-body table tbody td {
        border-color: #edf1f5;
        font-size: 12px;
    }

/* India GST invoice design selector and print themes. */
.invoice-design-preview-button {
    width: 100%;
    margin-top: 8px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #ff6b17;
    border: 1px solid #ffb889;
    border-radius: 7px;
    background: #fff7f1;
    font-size: 12px;
    font-weight: 650;
}

    .invoice-design-preview-button svg, .invoice-design-preview-modal svg {
        width: 17px;
        height: 17px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.invoice-design-preview-dialog {
    width: min(1040px,calc(100vw - 28px));
    margin: 18px auto;
}

.invoice-design-preview-modal {
    overflow: hidden;
    border: 1px solid #dce4ee;
    border-radius: 14px;
    box-shadow: 0 24px 70px rgba(15,23,42,.28);
}

    .invoice-design-preview-modal .modal-header {
        display: flex;
        align-items: center;
        gap: 11px;
        padding: 12px 16px;
        background: linear-gradient(135deg,#fff,#fff7f1);
    }

.invoice-preview-title-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ff6b17;
    border-radius: 9px;
    background: #fff0e6;
}

.invoice-design-preview-modal .modal-header h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 750;
}

.invoice-design-preview-modal .modal-header p {
    margin: 2px 0 0;
    color: #64748b;
    font-size: 11px;
}

.invoice-design-preview-modal .modal-header .close {
    width: 32px;
    height: 32px;
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    color: #64748b;
    border: 0;
    border-radius: 8px;
    background: #f1f5f9;
}

.invoice-design-preview-modal .modal-body {
    max-height: calc(100vh - 155px);
    padding: 14px;
    overflow: auto;
    background: #e9eef4;
}

.invoice-preview-stage {
    min-height: 560px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.invoice-preview-sheet {
    width: 760px;
    min-height: 535px;
    padding: 25px;
    color: #172033;
    border: 1px solid #dbe3ec;
    background: #fff;
    box-shadow: 0 10px 32px rgba(15,23,42,.14);
    transform-origin: top center;
}

    .invoice-preview-sheet header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 14px;
        border-bottom: 3px solid #ff6b17;
    }

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

    .invoice-preview-brand > span {
        width: 38px;
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        border-radius: 8px;
        background: #ff6b17;
        font-weight: 600;
    }

    .invoice-preview-brand strong, .invoice-preview-brand small, .invoice-preview-heading strong, .invoice-preview-heading small {
        display: block;
    }

    .invoice-preview-brand small, .invoice-preview-heading small {
        color: #64748b;
        font-size: 9px;
    }

.invoice-preview-heading {
    text-align: right;
}

    .invoice-preview-heading strong {
        font-size: 20px;
    }

.invoice-preview-gst-strip {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    margin: 13px 0;
    border: 1px solid #dbe3ec;
    border-radius: 6px;
}

    .invoice-preview-gst-strip span {
        padding: 8px 10px;
        border-right: 1px solid #e6ebf1;
    }

        .invoice-preview-gst-strip span:last-child {
            border: 0;
        }

    .invoice-preview-gst-strip small, .invoice-preview-parties small {
        display: block;
        color: #64748b;
        font-size: 8px;
        text-transform: uppercase;
    }

    .invoice-preview-gst-strip b {
        font-size: 10px;
    }

.invoice-preview-parties {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 13px;
}

    .invoice-preview-parties > div {
        padding: 10px;
        border: 1px solid #e1e7ee;
        border-radius: 6px;
    }

    .invoice-preview-parties b {
        font-size: 11px;
    }

    .invoice-preview-parties p {
        margin: 3px 0 0;
        color: #475569;
        font-size: 9px;
        line-height: 1.45;
    }

.invoice-preview-sheet table {
    width: 100%;
    border-collapse: collapse;
    font-size: 9px;
}

.invoice-preview-sheet th {
    padding: 8px 6px;
    color: #fff;
    background: #172033;
    text-align: left;
}

.invoice-preview-sheet td {
    padding: 9px 6px;
    border-bottom: 1px solid #e5eaf0;
}

.invoice-preview-bottom {
    display: grid;
    grid-template-columns: 1fr 70px 190px;
    gap: 14px;
    margin-top: 14px;
}

.invoice-preview-tax b, .invoice-preview-tax p, .invoice-preview-tax small {
    display: block;
    margin: 2px 0;
    font-size: 9px;
}

.invoice-preview-tax small {
    margin-top: 10px;
    color: #64748b;
}

.invoice-preview-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

    .invoice-preview-qr svg {
        width: 47px;
        height: 47px;
        stroke-width: 1.4;
    }

    .invoice-preview-qr small {
        font-size: 8px;
    }

.invoice-preview-total p {
    display: flex;
    justify-content: space-between;
    margin: 0;
    padding: 5px 7px;
    font-size: 9px;
}

.invoice-preview-total .grand {
    color: #fff;
    background: #ff6b17;
    font-size: 11px;
}

.invoice-preview-sheet footer {
    display: flex;
    justify-content: space-between;
    margin-top: 18px;
    padding-top: 10px;
    color: #64748b;
    border-top: 1px solid #dbe3ec;
    font-size: 9px;
}

.invoice-preview-sheet.gst-a4-classic {
    font-family: Georgia,serif;
}

    .invoice-preview-sheet.gst-a4-classic header {
        border-color: #172033;
    }

    .invoice-preview-sheet.gst-a4-classic .invoice-preview-brand > span, .invoice-preview-sheet.gst-a4-classic .invoice-preview-total .grand {
        background: #172033;
    }

.invoice-preview-sheet.gst-a4-classic {
    padding: 18px;
    border: 2px solid #111;
    box-shadow: none
}

    .invoice-preview-sheet.gst-a4-classic header {
        padding: 8px 6px;
        border-bottom: 2px solid #111
    }

    .invoice-preview-sheet.gst-a4-classic .invoice-preview-gst-strip, .invoice-preview-sheet.gst-a4-classic .invoice-preview-parties {
        gap: 0;
        margin-top: 0;
        border: 1px solid #111;
        border-top: 0
    }

        .invoice-preview-sheet.gst-a4-classic .invoice-preview-gst-strip > span, .invoice-preview-sheet.gst-a4-classic .invoice-preview-parties > div {
            border-color: #111;
            border-radius: 0
        }

    .invoice-preview-sheet.gst-a4-classic table {
        border: 1px solid #111
    }

    .invoice-preview-sheet.gst-a4-classic th {
        color: #111;
        background: #fff;
        border: 1px solid #111
    }

    .invoice-preview-sheet.gst-a4-classic td {
        border: 1px solid #111
    }

    .invoice-preview-sheet.gst-a4-classic .invoice-preview-bottom {
        gap: 0;
        margin-top: 0;
        border: 1px solid #111;
        border-top: 0
    }

        .invoice-preview-sheet.gst-a4-classic .invoice-preview-bottom > div {
            padding: 8px;
            border-right: 1px solid #111
        }

    .invoice-preview-sheet.gst-a4-classic footer {
        margin-top: 0;
        padding: 9px;
        border: 1px solid #111;
        border-top: 0;
        color: #111
    }

.invoice-preview-sheet.gst-a5-modern, .invoice-preview-sheet.gst-a5-compact {
    width: 565px;
    min-height: 500px;
    padding: 18px;
}

.invoice-preview-sheet.gst-a5-compact {
    font-size: 90%;
}

    .invoice-preview-sheet.gst-a5-compact header {
        border-width: 2px;
    }

.invoice-preview-sheet.gst-thermal-80, .invoice-preview-sheet.slim {
    width: 300px;
    min-height: 520px;
    padding: 14px;
    filter: grayscale(1);
}

.invoice-preview-sheet.gst-thermal-58, .invoice-preview-sheet.slim2 {
    width: 220px;
    min-height: 500px;
    padding: 10px;
    filter: grayscale(1);
}

    .invoice-preview-sheet.gst-thermal-80 .invoice-preview-gst-strip, .invoice-preview-sheet.gst-thermal-58 .invoice-preview-gst-strip, .invoice-preview-sheet.slim .invoice-preview-gst-strip, .invoice-preview-sheet.slim2 .invoice-preview-gst-strip {
        grid-template-columns: 1fr 1fr;
    }

    .invoice-preview-sheet.gst-thermal-80 .invoice-preview-parties, .invoice-preview-sheet.gst-thermal-58 .invoice-preview-parties, .invoice-preview-sheet.slim .invoice-preview-parties, .invoice-preview-sheet.slim2 .invoice-preview-parties {
        grid-template-columns: 1fr;
    }

    .invoice-preview-sheet.gst-thermal-80 table th:nth-child(n+3), .invoice-preview-sheet.gst-thermal-80 table td:nth-child(n+3), .invoice-preview-sheet.gst-thermal-58 table th:nth-child(n+3), .invoice-preview-sheet.gst-thermal-58 table td:nth-child(n+3), .invoice-preview-sheet.slim table th:nth-child(n+3), .invoice-preview-sheet.slim table td:nth-child(n+3), .invoice-preview-sheet.slim2 table th:nth-child(n+3), .invoice-preview-sheet.slim2 table td:nth-child(n+3) {
        display: none;
    }

    .invoice-preview-sheet.gst-thermal-80 .invoice-preview-bottom, .invoice-preview-sheet.gst-thermal-58 .invoice-preview-bottom, .invoice-preview-sheet.slim .invoice-preview-bottom, .invoice-preview-sheet.slim2 .invoice-preview-bottom {
        grid-template-columns: 1fr;
    }

    .invoice-preview-sheet.gst-thermal-80 .invoice-preview-qr, .invoice-preview-sheet.gst-thermal-58 .invoice-preview-qr, .invoice-preview-sheet.slim .invoice-preview-qr, .invoice-preview-sheet.slim2 .invoice-preview-qr {
        display: none;
    }

.invoice-design-preview-modal, .invoice-design-preview-modal *, .invoice-preview-sheet, .invoice-preview-sheet * {
    font-family: 'Inter',sans-serif !important;
}

    .invoice-design-preview-modal .modal-footer {
        padding: 10px 16px;
    }

        .invoice-design-preview-modal .modal-footer .invoice-preview-use {
            width: auto !important;
            min-width: 112px !important;
            max-width: none !important;
            padding: 7px 14px !important;
            color: #fff !important;
            border-color: #ff6b17 !important;
            background: #ff6b17 !important;
            white-space: nowrap;
        }

.gst-receipt {
    color: #111827;
    background: #fff;
}

    .gst-receipt > .row {
        margin: 0;
    }

.gst-receipt-modern {
    padding: 18px;
    border-top: 5px solid #ff6b17;
}

.gst-receipt-professional {
    padding: 20px;
    border: 1px solid #111827;
    font-family: Georgia,"Times New Roman",serif;
}

.gst-receipt-compact {
    padding: 11px;
    font-size: 11px;
}

    .gst-receipt-modern table thead tr, .gst-receipt-modern table tr.bg-green, .gst-receipt-compact table thead tr, .gst-receipt-compact table tr.bg-green {
        color: #fff !important;
        background: #172033 !important;
    }

    .gst-receipt-modern table th, .gst-receipt-compact table th {
        color: #fff !important;
        background: #172033 !important;
    }

    .gst-receipt-modern .bg-gray, .gst-receipt-compact .bg-gray {
        background: #f8fafc !important;
    }

.gst-receipt-modern h4, .gst-receipt-modern h5 {
    color: #172033;
}

.gst-thermal-receipt {
    color: #000 !important;
    background: #fff !important;
}

    .gst-thermal-receipt .headings {
        font-weight: 600 !important;
    }

    .gst-thermal-receipt table {
        border-collapse: collapse;
    }

        .gst-thermal-receipt table th, .gst-thermal-receipt table td {
            border-color: #000 !important;
        }

@media print {
    .gst-receipt-a4 {
        width: 210mm;
        min-height: 297mm;
        margin: 0 auto;
    }

    .gst-receipt-a5 {
        width: 148mm;
        min-height: 210mm;
        margin: 0 auto;
    }

    .gst-thermal-80 .ticket {
        width: 80mm !important;
        max-width: 80mm !important;
    }

    .gst-thermal-58 .ticket {
        width: 58mm !important;
        max-width: 58mm !important;
    }
}

.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;
}

/* Consistent report page headings. */
.report-module .content-header {
    min-height: 62px;
    padding-top: 15px;
    padding-bottom: 10px;
}

.report-module .content-header h1 {
    margin: 0;
    color: #101828 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    text-transform: capitalize;
}

.report-module .content-header h1 > svg {
    display: none !important;
}

.report-module .content-header .project-page-subtitle,
.report-module .content-header > p {
    margin: 4px 0 0 !important;
    color: #53627a !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
}

.report-module .gst-report-party-input .input-group-addon {
    width: 40px;
    height: 35px;
    padding: 0;
    color: #64748b;
    background: #fff;
    border: 1px solid #cfd8e5;
    border-right: 0;
    border-radius: 6px 0 0 6px;
    text-align: center;
    vertical-align: middle;
}

.report-module .gst-report-party-input {
    display: flex;
    width: 100%;
    align-items: stretch;
}

.report-module .gst-report-party-input .input-group-addon {
    display: inline-flex;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
}

.report-module .gst-report-party-input > .select2-container {
    flex: 1 1 auto;
    width: calc(100% - 40px) !important;
    min-width: 0;
}

.report-module .gst-report-party-input .select2-container .select2-selection--single {
    height: 35px !important;
    border-color: #cfd8e5 !important;
    border-left: 1px solid #cfd8e5 !important;
    border-radius: 0 6px 6px 0 !important;
}

.report-module .gst-report-party-input .select2-selection__rendered {
    line-height: 33px !important;
}

.report-module .gst-report-party-input .select2-selection__arrow {
    height: 33px !important;
}

.report-module .gst-report-party-input .select2-selection__rendered {
    padding-right: 30px !important;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.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;
}

/* Reusable compact actions for contact, product, purchase and sale lists. */
.modern-table-actions {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.modern-table-action,
.modern-table-actions__more {
    width: 29px;
    height: 29px;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    color: #6b7280 !important;
    background: transparent !important;
    box-shadow: none !important;
}

    .modern-table-action:hover,
    .modern-table-action:focus,
    .modern-table-actions__more:hover,
    .modern-table-actions__more:focus,
    .modern-table-actions__menu.open > .modern-table-actions__more {
        color: #ff6b17 !important;
        background: #fff2e9 !important;
    }

    .modern-table-action svg {
        width: 19px;
        height: 19px;
        fill: none;
        stroke: #6b7280;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .modern-table-action:hover svg,
    .modern-table-action:focus svg {
        stroke: #ff6b17;
    }

.modern-table-actions__dots {
    color: #6b7280;
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 1px;
    transform: translateY(-2px);
}

.modern-table-actions__more:hover .modern-table-actions__dots,
.modern-table-actions__more:focus .modern-table-actions__dots,
.modern-table-actions__menu.open > .modern-table-actions__more .modern-table-actions__dots {
    color: #ff6b17;
}

.modern-table-actions__menu {
    display: inline-flex;
}

    .modern-table-actions__menu .dropdown-menu {
        min-width: 245px;
        max-height: 420px;
        overflow-y: auto;
        padding: 7px;
        border: 1px solid #e5e7eb;
        border-radius: 9px;
        box-shadow: 0 10px 28px rgba(15,23,42,.14);
    }

        .modern-table-actions__menu .dropdown-menu > li > a {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 10px;
            border-radius: 6px;
            color: #111827 !important;
        }

            .modern-table-actions__menu .dropdown-menu > li > a:hover,
            .modern-table-actions__menu .dropdown-menu > li > a:focus {
                color: #111827 !important;
                background: #fff4ed !important;
            }

            .modern-table-actions__menu .dropdown-menu > li > a > svg {
                width: 18px !important;
                height: 18px !important;
                flex: 0 0 18px;
                fill: none !important;
                stroke: #6b7280 !important;
                stroke-width: 1.8;
                stroke-linecap: round;
                stroke-linejoin: round;
            }

            .modern-table-actions__menu .dropdown-menu > li > a:hover > svg,
            .modern-table-actions__menu .dropdown-menu > li > a:focus > svg {
                stroke: #ff6b17 !important;
            }

            .modern-table-actions__menu .dropdown-menu > li > a.modern-table-action--delete > svg,
            .modern-table-actions__menu .dropdown-menu > li > a.modern-table-action--delete:hover > svg,
            .modern-table-actions__menu .dropdown-menu > li > a.modern-table-action--delete:focus > svg {
                stroke: #dc2626 !important;
            }

        .modern-table-actions__menu .dropdown-menu.modern-table-actions__floating {
            position: fixed !important;
            right: auto !important;
            margin: 0;
            z-index: 9999 !important;
        }

.modern-table-actions-open {
    position: relative;
    z-index: 100 !important;
}

.dataTables_wrapper table thead th.modern-action-column,
.dataTables_wrapper table tbody td.modern-action-column,
.dataTables_wrapper table tfoot td.modern-action-column {
    position: sticky !important;
    right: 0;
    z-index: 4;
    width: 1%;
    min-width: 150px;
    white-space: nowrap;
    border-left: 1px solid #e5e7eb !important;
    box-shadow: -5px 0 9px -8px rgba(15,23,42,.55);
}

.dataTables_wrapper table thead th.modern-action-column {
    z-index: 6;
    background: #f8fafc !important;
}

.dataTables_wrapper table tbody td.modern-action-column {
    background: #fff !important;
}

.dataTables_wrapper table.table-striped tbody tr:nth-of-type(odd) td.modern-action-column {
    background: #f9f9f9 !important;
}

.dataTables_wrapper table tbody tr:hover td.modern-action-column {
    background: #fff7ed !important;
}

.dataTables_wrapper table tbody td.modern-action-column.modern-table-actions-open {
    z-index: 100 !important;
}

#contact_table_wrapper .dataTables_scrollHead table,
#contact_table_wrapper .dataTables_scrollBody table,
#customer_groups_table_wrapper .dataTables_scrollHead table,
#customer_groups_table_wrapper .dataTables_scrollBody table,
#product_table_wrapper .dataTables_scrollHead table,
#product_table_wrapper .dataTables_scrollBody table,
#purchase_table_wrapper .dataTables_scrollHead table,
#purchase_table_wrapper .dataTables_scrollBody table,
#sell_table_wrapper .dataTables_scrollHead table,
#sell_table_wrapper .dataTables_scrollBody table {
    width: 100% !important;
    min-width: 100% !important;
    table-layout: auto;
}

/* Product quick-view modal */
.product-view-dialog {
    width: calc(100vw - 48px) !important;
    max-width: 1080px !important;
    margin: 28px auto !important;
}

.product-view-modal {
    overflow: hidden;
    border: 1px solid #dbe3ee;
    border-radius: 16px !important;
    background: #fff;
    box-shadow: 0 24px 70px rgba(15,23,42,.28);
    color: #0f172a;
}

    .product-view-modal svg {
        width: 21px;
        height: 21px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.product-view-header {
    min-height: 60px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 20px !important;
    border-bottom: 0 !important;
}

    .product-view-header .project-modal-title-icon {
        display: none !important;
    }

    .product-view-header .modal-title {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin: 0;
        color: #101b36;
        font-size: 17px;
        line-height: 1.25;
        font-weight: 700;
        text-transform: uppercase;
    }

.product-view-title-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    color: #fff;
    background: linear-gradient(145deg,#ff7a1a,#ff5a00);
    box-shadow: 0 6px 14px rgba(255,107,23,.2);
}

    .product-view-title-icon svg {
        width: 21px;
        height: 21px;
        stroke-width: 1.7;
    }

.product-view-close {
    position: static !important;
    width: 32px;
    height: 32px;
    margin: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1 !important;
    color: #64748b !important;
    border: 0;
    border-radius: 50%;
    background: #f5f7fa !important;
}

    .product-view-close svg {
        width: 23px;
        height: 23px;
    }

.product-view-body {
    padding: 0 12px 7px !important;
    background: #fff;
}

.product-view-summary-card, .product-view-section, .product-view-pricing {
    margin-bottom: 8px;
    padding: 10px;
    border: 1px solid #dbe3ee;
    border-radius: 9px;
    background: #fff;
    box-shadow: 0 2px 6px rgba(15,23,42,.035);
}

.product-view-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1.13fr;
    align-items: stretch;
}

.product-view-info-column {
    min-width: 0;
    padding: 1px 11px;
    border-right: 1px solid #dbe3ee;
}

    .product-view-info-column:first-child {
        padding-left: 10px;
    }

.product-view-info-item {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 41px;
}

    .product-view-info-item i {
        flex: 0 0 30px;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 7px;
        font-style: normal;
    }

        .product-view-info-item i svg {
            width: 16px;
            height: 16px;
        }

.product-view-info-column--blue i {
    color: #5689f6;
    background: #edf4ff;
}

.product-view-info-column--orange i {
    color: #ff6b17;
    background: #fff2e9;
}

.product-view-info-column--green i {
    color: #35ae70;
    background: #eaf9f0;
}

.product-view-info-item div {
    min-width: 0;
}

.product-view-info-item span {
    display: block;
    margin-bottom: 1px;
    color: #64748b;
    font-size: 11px;
    line-height: 1.15;
    font-weight: 500;
}

.product-view-info-item strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #0f172a;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 600;
}

.product-view-image-panel {
    position: relative;
    min-height: 190px;
    margin-left: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 8px;
    background: linear-gradient(135deg,#f8fafc,#edf3f8);
}

    .product-view-image-panel img {
        display: block;
        max-width: 82%;
        max-height: 170px;
        object-fit: contain;
    }

    .product-view-image-panel span {
        display: none;
        position: absolute;
        bottom: 70px;
        color: #aeb9c9;
        font-size: 17px;
        font-weight: 700;
    }

.product-view-custom-field {
    display: inline-flex;
    gap: 7px;
    margin: 12px 20px 0 0;
    color: #64748b;
}

    .product-view-custom-field strong {
        color: #0f172a;
    }

.product-view-brochure {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    color: #ff6b17;
}

.product-view-description {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #edf1f5;
    color: #475569;
}

.product-view-pricing {
    padding: 8px 14px;
}

    .product-view-pricing > .row {
        margin: 0;
    }

        .product-view-pricing > .row > [class*="col-"] {
            float: none;
            width: 100%;
            padding: 0;
        }

    .product-view-pricing .table-responsive {
        margin: 0;
        border: 0;
    }

    .product-view-pricing table {
        width: 100% !important;
        margin: 0 !important;
        table-layout: fixed;
        background: #fff !important;
    }

        .product-view-pricing table tr:first-child {
            background: #fff !important;
        }

        .product-view-pricing table th {
            padding: 9px 12px 4px !important;
            color: #64748b !important;
            border: 0 !important;
            border-right: 1px solid #dbe3ee !important;
            background: #fff !important;
            font-size: 12px;
            font-weight: 500;
            text-transform: none;
            white-space: normal;
        }

        .product-view-pricing table td {
            padding: 2px 12px 9px !important;
            color: #0f172a;
            border: 0 !important;
            border-right: 1px solid #dbe3ee !important;
            background: #fff !important;
            font-size: 14px;
            font-weight: 600;
        }

.product-price-icon {
    float: left;
    width: 29px;
    height: 29px;
    margin: 0 7px 3px 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    color: #5689f6;
    background: #edf4ff;
}

    .product-price-icon svg {
        width: 16px;
        height: 16px;
    }

.product-price-icon--margin {
    color: #35ae70;
    background: #eaf9f0;
}

.product-price-icon--selling {
    color: #ff6b17;
    background: #fff2e9;
}

.product-price-icon--image {
    color: #64748b;
    background: #f1f5f9;
}

.product-view-pricing table th:last-child, .product-view-pricing table td:last-child {
    border-right: 0 !important;
}

.product-view-section {
    padding: 10px 12px;
}

    .product-view-section h5 {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 0 0 16px;
        color: #0f172a;
        font-size: 18px;
        font-weight: 600;
    }

        .product-view-section h5 svg {
            color: #ff6b17;
            width: 25px;
            height: 25px;
        }

    .product-view-section .table-responsive {
        border: 0;
        border-radius: 8px;
    }

    .product-view-section table {
        margin: 0;
    }

        .product-view-section table thead th, .product-view-stock table > tbody > tr:first-child > th, .product-view-stock table > thead > tr > th {
            padding: 9px 12px !important;
            color: #fff !important;
            border-color: #ff7a1a !important;
            background: #ff6b17 !important;
            font-size: 12px;
            font-weight: 700;
            white-space: nowrap;
        }

        .product-view-section table tbody td {
            padding: 9px 12px !important;
            color: #0f172a;
            border-color: #e8edf3 !important;
            background: #fff !important;
            font-size: 12px;
        }

.product-view-stock .table-responsive, #view_product_stock_details {
    overflow-x: auto !important;
}

.product-view-stock table {
    width: max-content !important;
    min-width: 100%;
}

    .product-view-stock table th:nth-child(2), .product-view-stock table td:nth-child(2), .product-view-stock table th:nth-child(3), .product-view-stock table td:nth-child(3) {
        white-space: nowrap !important;
    }

.product-view-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 0 18px 11px !important;
    border-top: 0 !important;
}

.product-view-print, .product-view-close-button {
    height: 40px;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
}

.product-view-print {
    color: #fff;
    border: 1px solid #ff6b17;
    background: #ff6b17;
    box-shadow: 0 8px 16px rgba(255,107,23,.18);
}

.product-view-close-button {
    color: #475569;
    border: 1px solid #cfd8e5;
    background: #fff;
}

    .product-view-print svg, .product-view-close-button svg {
        width: 20px;
        height: 20px;
    }

@media (max-width:1100px) {
    .product-view-info-grid {
        grid-template-columns: 1fr 1fr;
    }

    .product-view-info-column {
        border-bottom: 1px solid #dbe3ee;
    }

    .product-view-image-panel {
        margin: 20px 0 0;
    }
}

@media (max-width:700px) {
    .product-view-dialog {
        width: calc(100vw - 12px) !important;
    }

    .product-view-header {
        padding: 16px 18px !important;
        gap: 12px;
    }

        .product-view-header .modal-title {
            font-size: 18px;
        }

    .product-view-info-grid {
        grid-template-columns: 1fr;
    }

    .product-view-info-column {
        padding: 8px 4px;
        border-right: 0;
    }

    .product-view-footer {
        padding: 0 20px 20px !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;
}

/* Keep native Unit form selections readable in add, edit and quick-add modals. */
select.unit-form-select,
select.unit-form-select:focus {
    color: #1f2937 !important;
    -webkit-text-fill-color: #1f2937 !important;
    background-color: #fff !important;
    color-scheme: light;
}

select.unit-form-select option {
    color: #1f2937 !important;
    -webkit-text-fill-color: #1f2937 !important;
    background: #fff !important;
}

select.unit-form-select option:checked,
select.unit-form-select option:hover,
select.unit-form-select option:focus {
    color: #1f2937 !important;
    -webkit-text-fill-color: #1f2937 !important;
    background: #fff3e8 linear-gradient(0deg, #fff3e8 0%, #fff3e8 100%) !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: flex-end;
    gap: 24px;
    min-height: 72px;
}

.update-price-file {
    min-width: 340px;
    width: min(510px, 100%);
}

    .update-price-file label {
        display: block;
        margin-bottom: 7px;
    }

.update-price-file-control {
    position: relative;
    display: flex;
    width: 100%;
    height: 34px;
    align-items: center;
    overflow: hidden;
    background: #fff;
    border: 1px dashed #c8d8ec;
    border-radius: 8px;
}

.update-price-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.update-price-file-name {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 14px;
    overflow: hidden;
    color: #7a879b;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.update-price-file .update-price-browse {
    display: inline-flex;
    flex: 0 0 auto;
    height: 34px;
    margin: -1px -1px -1px 0;
    padding: 0 17px;
    align-items: center;
    gap: 7px;
    color: #fff;
    background: linear-gradient(135deg, #ff6818, #f4510d);
    border: 1px solid #f4510d;
    border-radius: 0 8px 8px 0;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
}

.update-price-browse svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.update-price-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.update-price-btn {
    min-height: 34px;
    height: 34px;
    padding: 0 13px;
    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;
        }

/* Keep native dropdown menus readable when the operating system prefers dark
   controls but RelitePOS is using its light interface. Without this override,
   Chromium can render a white hover label on a white option background. */
body:not(.relite-dark) select,
body:not(.relite-dark) select.form-control,
body:not(.relite-dark) .dataTables_length select {
    color-scheme: light !important;
    color-scheme: only light !important;
}

body:not(.relite-dark) select option {
    color: #1f2937 !important;
    -webkit-text-fill-color: #1f2937 !important;
    background-color: #ffffff !important;
}

body:not(.relite-dark) select option:hover,
body:not(.relite-dark) select option:focus,
body:not(.relite-dark) select option:checked {
    color: #172033 !important;
    -webkit-text-fill-color: #172033 !important;
    background: #ffedd5 linear-gradient(0deg, #ffedd5 0%, #ffedd5 100%) !important;
}

body:not(.relite-dark) select option:disabled {
    color: #94a3b8 !important;
    -webkit-text-fill-color: #94a3b8 !important;
    background-color: #f8fafc !important;
}

body.relite-dark select,
body.relite-dark select.form-control,
body.relite-dark .dataTables_length select {
    color-scheme: dark !important;
}

body.relite-dark select option {
    color: #e2e8f0 !important;
    -webkit-text-fill-color: #e2e8f0 !important;
    background-color: #102844 !important;
}

body.relite-dark select option:hover,
body.relite-dark select option:focus,
body.relite-dark select option:checked {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: #ea580c linear-gradient(0deg, #ea580c 0%, #ea580c 100%) !important;
}

body.relite-dark select option:disabled {
    color: #7890a8 !important;
    -webkit-text-fill-color: #7890a8 !important;
    background-color: #0f2035 !important;
}

/* 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: 12px;
    width: calc(100% - 64px);
    max-width: calc(100% - 64px);
    margin-right: auto;
    margin-left: auto;
    min-width: 0;
    box-sizing: border-box;
}

    .business-settings-hub.tw-hidden {
        display: none;
    }

.business-settings-card {
    --settings-card-color: #2563eb;
    --settings-card-soft: #eef4ff;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    align-items: start;
    column-gap: 13px;
    row-gap: 7px;
    width: 100%;
    min-height: 108px;
    padding: 14px 14px 11px;
    border: 1px solid #e7ebf0;
    border-radius: 12px;
    background: linear-gradient(145deg, #fff 0%, #fff 72%, #fbfcfe 100%);
    text-align: left;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
    min-width: 0;
    box-sizing: border-box;
}

    .business-settings-card:hover,
    .business-settings-card:focus {
        border-color: color-mix(in srgb, var(--settings-card-color) 32%, #e7ebf0);
        box-shadow: 0 10px 26px rgba(15, 23, 42, .08);
        outline: none;
        transform: translateY(-2px);
    }

.business-settings-card__icon {
    display: inline-flex;
    grid-column: 1;
    grid-row: 1 / 3;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 10px;
    color: var(--settings-card-color);
    background: var(--settings-card-soft);
}

    .business-settings-card__icon svg {
        width: 27px;
        height: 27px;
        fill: none !important;
        stroke: currentColor;
    }

.business-settings-card__copy {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
}

.business-settings-card__title,
.business-settings-card__description {
    display: block;
}

.business-settings-card__title {
    margin: 0 0 5px;
    color: #172033;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
}

.business-settings-card__description {
    margin: 0;
    color: #64748b;
    font-size: 12px;
    line-height: 1.42;
}

.business-settings-card__action {
    display: inline-flex;
    grid-column: 2;
    grid-row: 2;
    align-items: center;
    justify-self: end;
    gap: 4px;
    color: #ff5a0a;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
}

    .business-settings-card__action svg {
        width: 13px;
        height: 13px;
        fill: none !important;
        stroke: currentColor;
    }

.business-settings-card--tone-0 {
    --settings-card-color: #2563eb;
    --settings-card-soft: #edf4ff
}

.business-settings-card--tone-1 {
    --settings-card-color: #16a34a;
    --settings-card-soft: #edf9ef
}

.business-settings-card--tone-2 {
    --settings-card-color: #7c3aed;
    --settings-card-soft: #f4edff
}

.business-settings-card--tone-3 {
    --settings-card-color: #ec1763;
    --settings-card-soft: #ffedf4
}

.business-settings-card--tone-4 {
    --settings-card-color: #ff4d22;
    --settings-card-soft: #fff0eb
}

.business-settings-card--tone-5 {
    --settings-card-color: #4f46e5;
    --settings-card-soft: #eef0ff
}

.business-settings-card--tone-6 {
    --settings-card-color: #f59e0b;
    --settings-card-soft: #fff7e7
}

.business-settings-card--tone-7 {
    --settings-card-color: #0ea5a8;
    --settings-card-soft: #e9fafa
}

body.relite-dark .business-settings-card {
    background: #102844;
    border-color: #29445f;
}

body.relite-dark .business-settings-card__title {
    color: #f8fafc;
}

body.relite-dark .business-settings-card__description {
    color: #b8c6d8;
}

@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;
        width: calc(100% - 24px);
        max-width: calc(100% - 24px);
    }

    .business-settings-card {
        min-height: 104px;
    }
}

.business-settings-page {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
    background: #f8fafc;
}

.business-settings-page-header {
    width: 100%;
    max-width: 100%;
    padding: 18px 44px 12px;
    box-sizing: border-box;
    background: #f8fafc;
}

    .business-settings-page-header.tw-hidden {
        display: none;
    }

    .business-settings-page-header h1 {
        margin: 0;
        color: #111827;
        font-size: 20px;
        font-weight: 600;
        line-height: 1.25;
    }

    .business-settings-page-header p {
        margin: 3px 0 0;
        color: #475569;
        font-size: 12px;
        line-height: 1.4;
    }

.business-settings-page-header__search {
    display: none !important;
}

.business-settings-editor,
.business-settings-editor > .row,
.business-settings-editor .pos-tab-container,
.business-settings-editor .pos-tab {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

    .business-settings-editor > .row {
        margin-right: 0;
        margin-left: 0;
    }

        .business-settings-editor > .row > .col-xs-12 {
            float: none;
            width: 100%;
            padding-right: 0;
            padding-left: 0;
        }

    .business-settings-editor.tw-hidden {
        display: none;
    }

.business-settings-editor__header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 0px;
    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__footer {
    position: absolute;
    right: 24px;
    bottom: 24px;
    z-index: 2;
    display: flex;
    justify-content: flex-end;
    width: auto;
    margin: 0;
    padding: 0;
}

.business-settings-editor .settings-save-host {
    position: relative !important;
    padding-bottom: 82px !important;
}

.business-settings-editor .email-settings-form.settings-save-host .email-settings-actions {
    right: 190px;
    bottom: 24px;
}

.business-settings-editor .email-settings-form .business-settings-save {
    min-height: 42px;
    padding-top: 10px;
    padding-bottom: 10px;
}

@media(max-width:640px) {
    .business-settings-editor__footer {
        right: 14px;
        left: 14px;
    }

    .business-settings-editor .email-settings-form.settings-save-host {
        padding-bottom: 138px !important;
    }

        .business-settings-editor .email-settings-form.settings-save-host .email-settings-actions {
            position: absolute;
            right: 14px;
            bottom: 78px;
            left: 14px;
            margin: 0;
        }

        .business-settings-editor .email-settings-form.settings-save-host .email-test-button {
            width: 100%;
        }
}

.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-radius: 10px;
    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 profile settings: consistent card grid and control widths. */
.business-settings-editor .business-settings-primary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px 30px;
    margin: 0;
}

    .business-settings-editor .business-settings-primary-grid::before,
    .business-settings-editor .business-settings-primary-grid::after {
        display: none !important;
        content: none !important;
    }

    .business-settings-editor .business-settings-primary-grid > [class*="col-"] {
        float: none;
        width: auto;
        min-width: 0;
        padding: 0;
    }

    .business-settings-editor .business-settings-primary-grid > .clearfix {
        display: none;
    }

    .business-settings-editor .business-settings-primary-grid .form-group {
        display: flex;
        flex-direction: column;
        min-width: 0;
        margin: 0;
    }

        .business-settings-editor .business-settings-primary-grid .form-group > label {
            display: block;
            min-height: 16px;
            margin-bottom: 7px;
            line-height: 1.35;
        }

    .business-settings-editor .business-settings-primary-grid .input-group {
        display: flex;
        align-items: stretch;
        width: 100%;
        min-width: 0;
    }

    .business-settings-editor .business-settings-primary-grid .input-group-addon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 40px;
        width: 40px;
        padding: 0;
        border-radius: 8px 0 0 8px;
        background: #f8fafc;
        color: #64748b;
    }

    .business-settings-editor .business-settings-primary-grid .form-control,
    .business-settings-editor .business-settings-primary-grid .select2-container,
    .business-settings-editor .business-settings-primary-grid .file-input {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100%;
    }

    .business-settings-editor .business-settings-primary-grid .file-caption-main {
        display: flex !important;
        width: 100% !important;
        min-width: 0 !important;
    }

        .business-settings-editor .business-settings-primary-grid .file-caption-main > .file-caption {
            flex: 1 1 auto;
            width: 1% !important;
            min-width: 0 !important;
        }

        .business-settings-editor .business-settings-primary-grid .file-caption-main > .input-group-btn,
        .business-settings-editor .business-settings-primary-grid .file-caption-main .btn-file {
            flex: 0 0 auto;
            width: auto !important;
        }

    .business-settings-editor .business-settings-primary-grid .btn-file svg {
        width: 16px;
        height: 16px;
        margin-right: 6px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .business-settings-editor .business-settings-primary-grid .input-group > .form-control,
    .business-settings-editor .business-settings-primary-grid .input-group > .select2-container {
        flex: 1 1 auto;
        width: 1% !important;
    }

        .business-settings-editor .business-settings-primary-grid .input-group > .form-control,
        .business-settings-editor .business-settings-primary-grid .input-group > .select2-container .select2-selection {
            border-radius: 0 8px 8px 0;
        }

    .business-settings-editor .business-settings-primary-grid .select2-selection {
        display: flex;
        align-items: center;
        width: 100%;
    }

    .business-settings-editor .business-settings-primary-grid .select2-selection__rendered {
        flex: 1 1 auto;
        min-width: 0;
        padding-right: 24px;
    }

    .business-settings-editor .business-settings-primary-grid .help-block {
        min-height: 17px;
        margin: 6px 0 0;
        color: #7c8798;
        font-size: 11px;
    }

/* Company profile: guidance left, settings form right. */
.business-settings-editor .pos-tab-content.company-profile-tab {
    padding: 0;
    border: 0;
    background: transparent;
}

.company-profile-layout {
    display: grid;
    grid-template-columns: minmax(270px, .72fr) minmax(0, 2fr);
    align-items: stretch;
    gap: 18px;
    width: 100%;
    min-width: 0;
}

.company-profile-form,
.company-profile-guide {
    min-width: 0;
    border: 1px solid #dfe6ee;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
}

.company-profile-form {
    padding: 20px 24px;
}

.business-settings-editor .company-profile-form .business-settings-primary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 28px;
}

.company-profile-guide {
    display: flex;
    flex-direction: column;
    padding: 14px 16px 16px;
    overflow: hidden;
}

.company-profile-guide__visual {
    width: 100%;
    margin: -7px 0 -8px;
    overflow: hidden;
    border-radius: 12px 12px 0 0;
}

    .company-profile-guide__visual > img {
        display: block;
        width: 100%;
        height: auto;
        max-height: none;
        object-fit: contain;
        object-position: center;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        filter: saturate(.98) contrast(.99);
        -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 88%, rgba(0,0,0,.88) 94%, transparent 100%);
        mask-image: linear-gradient(to bottom, #000 0%, #000 88%, rgba(0,0,0,.88) 94%, transparent 100%);
    }

.company-profile-guide h3 {
    margin: 0 2px 5px !important;
    color: #14213a !important;
    font-size: 18px;
    font-weight: 600 !important;
    letter-spacing: -.02em;
}

.company-profile-guide__intro {
    margin: 0 2px 12px;
    color: #607089;
    font-size: 11px;
    line-height: 1.5;
}

.company-profile-guide__items {
    display: grid;
    gap: 9px;
}

    .company-profile-guide__items > div {
        display: grid;
        grid-template-columns: 31px minmax(0, 1fr);
        align-items: center;
        gap: 9px;
    }

        .company-profile-guide__items > div > span {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 31px;
            height: 31px;
            border-radius: 50%;
            color: #fff;
        }

    .company-profile-guide__items .is-orange {
        background: #ff6b19
    }

    .company-profile-guide__items .is-blue {
        background: #438dcc
    }

    .company-profile-guide__items .is-green {
        background: #46a86d
    }

    .company-profile-guide__items .is-purple {
        background: #6958c9
    }

    .company-profile-guide__items svg,
    .company-profile-guide__tip > svg {
        width: 16px;
        height: 16px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .company-profile-guide__items p {
        margin: 0;
        min-width: 0;
        padding-top: 10px;
    }

    .company-profile-guide__items b,
    .company-profile-guide__items small {
        display: block;
    }

    .company-profile-guide__items b {
        margin-bottom: 1px;
        color: #1e293b;
        font-size: 12px;
        font-weight: 600;
    }

    .company-profile-guide__items small {
        color: #718096;
        font-size: 9.5px;
        line-height: 1.35;
    }

.company-profile-guide__tip {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 8px;
    margin-top: 20px;
    padding: 11px 12px;
    border: 1px solid #ffd4b6;
    border-radius: 9px;
    background: #fff8f1;
    color: #f97316;
}

    .company-profile-guide__tip p {
        margin: 0;
    }

    .company-profile-guide__tip b,
    .company-profile-guide__tip span {
        display: block;
    }

    .company-profile-guide__tip b {
        margin-bottom: 2px;
        font-size: 11px;
    }

    .company-profile-guide__tip span {
        color: #c76522;
        font-size: 9.5px;
        line-height: 1.4;
    }

.business-settings-editor .company-profile-form .form-group > label {
    color: #27364e;
    font-size: 10px;
    font-weight: 600;
}

.business-settings-editor .company-profile-form .form-control,
.business-settings-editor .company-profile-form .select2-selection,
.business-settings-editor .company-profile-form .input-group-addon {
    min-height: 38px;
}

.business-settings-editor .company-profile-form .input-group-addon {
    flex-basis: 38px;
    width: 38px;
    color: #42546e;
    background: #f8fafc;
}

.business-settings-editor .company-profile-form .business-profile-logo-field .file-input {
    padding: 7px;
    border: 1px dashed #d5dde8;
    border-radius: 9px;
    background: #fff;
}

.business-settings-editor .company-profile-form .business-profile-logo-field .file-caption-main {
    min-height: 38px;
}

.business-settings-editor .company-profile-form .business-profile-logo-field .help-block {
    margin: 5px 2px 0;
    font-size: 9.5px;
}

body.relite-dark .company-profile-form,
body.relite-dark .company-profile-guide {
    background: #102844;
    border-color: #29445f;
}

    body.relite-dark .company-profile-guide h3,
    body.relite-dark .company-profile-guide__items b {
        color: #f8fafc !important;
    }

body.relite-dark .company-profile-guide__intro,
body.relite-dark .company-profile-guide__items small {
    color: #b8c6d8;
}

/* Tax settings reference layout. */
.business-settings-editor .pos-tab-content.tax-settings-tab {
    padding: 0;
    border: 0;
    background: transparent;
}

.tax-settings-layout {
    display: grid;
    grid-template-columns: minmax(270px, .72fr) minmax(0, 2fr);
    align-items: stretch;
    gap: 18px;
    width: 100%;
    min-width: 0;
}

.tax-settings-guide,
.tax-settings-form {
    min-width: 0;
    min-height: 535px;
    border: 1px solid #dfe6ee;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(15,23,42,.06);
}

.tax-settings-guide {
    display: flex;
    flex-direction: column;
    padding: 18px 28px 20px;
    overflow: hidden;
}

.tax-settings-guide__visual {
    width: 100%;
    max-width: 430px;
    margin: -5px auto 4px;
}

    .tax-settings-guide__visual svg {
        display: block;
        width: 100%;
        height: auto;
    }

.tax-settings-guide h3 {
    margin: 0 0 6px !important;
    color: #17233a !important;
    font-size: 18px;
    font-weight: 600 !important;
    letter-spacing: -.02em;
}

.tax-settings-guide__intro {
    max-width: 430px;
    margin: 0 0 13px;
    color: #607089;
    font-size: 11.5px;
    line-height: 1.5;
}

.tax-settings-guide__items {
    display: grid;
    gap: 9px;
}

    .tax-settings-guide__items > div {
        display: grid;
        grid-template-columns: 32px minmax(0,1fr);
        align-items: center;
        gap: 10px;
        margin-top: 10px;
    }

        .tax-settings-guide__items > div > span {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            color: #fff;
            box-shadow: 0 4px 10px rgba(15,23,42,.09);
        }

    .tax-settings-guide__items .is-blue {
        background: #448ced
    }

    .tax-settings-guide__items .is-green {
        background: #29aa5d
    }

    .tax-settings-guide__items .is-purple {
        background: #8055dc
    }

    .tax-settings-guide__items .is-orange {
        background: #ff6818
    }

    .tax-settings-guide__items svg,
    .tax-settings-guide__note > svg,
    .tax-settings-form svg {
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .tax-settings-guide__items svg {
        width: 16px;
        height: 16px;
    }

    .tax-settings-guide__items p,
    .tax-settings-guide__note p {
        margin: 0;
    }

    .tax-settings-guide__items b,
    .tax-settings-guide__items small {
        display: block;
    }

    .tax-settings-guide__items b {
        margin-bottom: 1px;
        color: #1f2a40;
        font-size: 12px;
        font-weight: 600;
    }

    .tax-settings-guide__items small {
        color: #728097;
        font-size: 9.5px;
        line-height: 1.35;
    }

.tax-settings-guide__note {
    display: grid;
    grid-template-columns: 23px minmax(0,1fr);
    gap: 9px;
    margin-top: 20px;
    padding: 11px 13px;
    border: 1px solid #d8e6fb;
    border-radius: 9px;
    background: #f4f8ff;
    color: #2878ef;
}

    .tax-settings-guide__note > svg {
        width: 21px;
        height: 21px;
    }

    .tax-settings-guide__note b,
    .tax-settings-guide__note span {
        display: block;
    }

    .tax-settings-guide__note b {
        margin-bottom: 2px;
        font-size: 12px;
    }

    .tax-settings-guide__note span {
        color: #53667f;
        font-size: 9.5px;
        line-height: 1.4;
    }

.tax-settings-form {
    padding: 24px 30px;
}

.tax-settings-form__header {
    display: grid;
    grid-template-columns: 48px minmax(0,1fr);
    align-items: center;
    gap: 12px;
    margin-bottom: 31px;
}

    .tax-settings-form__header > span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        border-radius: 11px;
        background: #fff3ec;
        color: #ff5a0a;
    }

    .tax-settings-form__header svg {
        width: 27px;
        height: 27px;
    }

    .tax-settings-form__header h3 {
        margin: 0 0 3px !important;
        color: #17233a !important;
        font-size: 18px;
        font-weight: 600 !important;
    }

    .tax-settings-form__header p {
        margin: 0;
        color: #718096;
        font-size: 11.5px;
    }

.tax-settings-fields {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 32px 38px;
}

    .tax-settings-fields .form-group {
        min-width: 0;
        margin: 0;
    }

        .tax-settings-fields .form-group > label {
            display: block;
            margin-bottom: 8px;
            color: #26344d;
            font-size: 11px;
            font-weight: 600;
            text-transform: none;
            letter-spacing: 0;
        }

    .tax-settings-fields .input-group {
        display: flex;
        width: 100%;
        min-width: 0;
    }

    .tax-settings-fields .input-group-addon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 41px;
        width: 41px;
        min-height: 45px;
        padding: 0;
        border-color: #dbe2eb;
        border-radius: 8px 0 0 8px;
        background: #fff9f5;
        color: #ff6b19;
    }

        .tax-settings-fields .input-group-addon svg {
            width: 17px;
            height: 17px;
        }

    .tax-settings-fields .form-control {
        flex: 1 1 auto;
        width: 1% !important;
        min-width: 0;
        min-height: 45px;
        border-color: #dbe2eb;
        border-radius: 0 8px 8px 0;
        box-shadow: none;
    }

.tax-inline-setting {
    margin-top: 39px;
    padding: 24px 5px 0;
    border-top: 1px solid #e6ebf1;
}

    .tax-inline-setting > label {
        display: flex;
        align-items: flex-start;
        gap: 13px;
        margin: 0;
        cursor: pointer;
    }

    .tax-inline-setting .icheckbox_square-orange {
        flex: 0 0 auto;
        margin-top: 1px;
    }

.tax-inline-switch {
    position: relative;
    display: inline-flex;
    flex: 0 0 30px;
    width: 30px;
    height: 16px;
    margin-top: 1px
}

.tax-inline-switch-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    opacity: 0;
    pointer-events: none
}

.tax-inline-switch-track {
    position: absolute;
    inset: 0;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: #e8edf3;
    transition: background-color .18s ease,border-color .18s ease,box-shadow .18s ease
}

    .tax-inline-switch-track:before {
        content: "";
        position: absolute;
        top: 1px;
        left: 1px;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 1px 3px rgba(15,23,42,.25);
        transition: transform .18s ease
    }

.tax-inline-switch-input:checked + .tax-inline-switch-track {
    border-color: #ff6b13;
    background: #ff6b13
}

    .tax-inline-switch-input:checked + .tax-inline-switch-track:before {
        transform: translateX(14px)
    }

.tax-inline-switch-input:focus-visible + .tax-inline-switch-track {
    box-shadow: 0 0 0 3px rgba(255,107,19,.2)
}

.tax-inline-toggle-row:hover .tax-inline-switch-track {
    border-color: #ff9a5d
}

.tax-inline-setting b,
.tax-inline-setting small {
    display: block;
}

.tax-inline-setting b {
    margin-bottom: 7px;
    color: #1f2a40;
    font-size: 13px;
    font-weight: 700;
}

.tax-inline-setting small {
    color: #718096;
    font-size: 12px;
    font-weight: 400;
}

body.relite-dark .tax-settings-guide,
body.relite-dark .tax-settings-form {
    background: #102844;
    border-color: #29445f;
}

    body.relite-dark .tax-settings-guide h3,
    body.relite-dark .tax-settings-guide__items b,
    body.relite-dark .tax-settings-form__header h3,
    body.relite-dark .tax-settings-fields label,
    body.relite-dark .tax-inline-setting b {
        color: #f8fafc !important;
    }

@media (max-width: 640px) {
    .tax-settings-guide,
    .tax-settings-form {
        padding: 18px 14px;
    }

    .tax-settings-fields {
        grid-template-columns: minmax(0,1fr);
        gap: 18px;
    }
}

@media (max-width: 1180px) {
    .company-profile-layout,
    .tax-settings-layout {
        grid-template-columns: minmax(240px, .8fr) minmax(0, 1.7fr);
    }

    .business-settings-editor .company-profile-form .business-settings-primary-grid {
        gap: 15px 18px;
    }
}

@media (max-width: 900px) {
    .company-profile-layout,
    .tax-settings-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .tax-settings-guide,
    .tax-settings-form {
        min-height: 0;
    }

    .company-profile-guide {
        order: 2;
    }

    .company-profile-form {
        order: 1;
    }

    .tax-settings-guide {
        order: 2;
    }

    .tax-settings-form {
        order: 1;
    }

    .company-profile-guide__visual {
        max-width: 360px;
        margin-right: auto;
        margin-left: auto;
    }
}

@media (max-width: 640px) {
    .company-profile-form {
        padding: 16px 13px;
    }

    .business-settings-editor .company-profile-form .business-settings-primary-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 1100px) {
    .business-settings-editor .business-settings-primary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px 22px;
    }
}

@media (max-width: 640px) {
    .business-settings-editor .business-settings-primary-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 15px;
    }
}

.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;
        padding-right: 12px;
        padding-left: 12px;
    }

    .business-settings-editor__header {
        flex-wrap: wrap;
    }

    .business-settings-save {
        width: 100%;
        justify-content: center;
    }

    .business-settings-editor .pos-tab-content {
        padding: 16px 12px;
    }
}

/* Products & pricing settings */
.business-settings-editor .pos-tab-content.product-pricing-settings {
    padding: 0;
    border-radius: 0;
    background: transparent
}

.product-pricing-layout {
    display: grid;
    grid-template-columns: minmax(0,2fr) minmax(270px,.72fr);
    gap: 22px;
    align-items: start
}

.product-pricing-form, .product-pricing-guide {
    background: #fff;
    border: 1px solid #dce5ef;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(30,51,80,.07)
}

.product-pricing-form {
    padding: 22px 24px
}

.product-pricing-heading, .product-pricing-block h4 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: #13213a;
    font-weight: 700
}

.product-pricing-heading {
    font-size: 17px;
    margin-bottom: 20px
}

    .product-pricing-heading > span {
        width: 24px;
        height: 24px;
        color: #8b5cf6
    }

.product-pricing-layout svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round
}

.product-pricing-top-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px
}

.product-pricing-form .form-group {
    margin-bottom: 8px
}

.product-pricing-form label {
    color: #152238;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 8px
}

.product-pricing-form .form-control {
    height: 42px;
    border-color: #d5dfeb;
    border-radius: 7px;
    box-shadow: none
}

.product-pricing-icon-field, .product-pricing-unit {
    display: flex;
    align-items: center;
    border: 1px solid #d5dfeb;
    border-radius: 7px;
    overflow: hidden
}

    .product-pricing-icon-field > span, .product-pricing-unit > svg {
        flex: 0 0 42px;
        width: 42px;
        padding: 11px;
        color: #7657e8;
        border-right: 1px solid #dbe4ee
    }

    .product-pricing-icon-field .form-control, .product-pricing-unit .form-control {
        border: 0
    }

.product-pricing-native-check {
    display: none
}

.product-pricing-expiry {
    margin: 12px 0
}

    .product-pricing-expiry > div {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px
    }

.product-pricing-block {
    padding: 17px 0;
    border-bottom: 1px solid #e5eaf1
}

.product-pricing-block--last {
    padding-bottom: 0;
    border: 0
}

.product-pricing-block h4 {
    font-size: 14px;
    margin-bottom: 13px
}

    .product-pricing-block h4 > svg {
        color: #397cf6
    }

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

    .product-pricing-options > label {
        display: flex;
        align-items: center;
        min-height: 48px;
        margin: 0;
        padding: 9px 12px;
        border: 1px solid #d8e1ec;
        border-radius: 7px;
        background: #fff;
        cursor: pointer
    }

    .product-pricing-options label > i {
        display: flex;
        margin-right: 11px;
        font-style: normal
    }

    .product-pricing-options label > span {
        flex: 1;
        font-weight: 600
    }

    .product-pricing-options .icheckbox_square-blue {
        margin-left: auto
    }

.product-pricing-unit {
    max-width: 58%
}

    .product-pricing-unit > svg {
        height: 42px
    }

.product-pricing-guide {
    padding: 24px 25px;
    display: flex;
    flex-direction: column
}

.product-pricing-illustration {
    margin: -4px -4px 8px
}

    .product-pricing-illustration svg {
        display: block;
        width: 100%;
        height: auto;
        stroke: none
    }

.product-pricing-guide > h3 {
    margin: 0 0 15px;
    color: #13213a;
    font-size: 18px;
    font-weight: 700
}

.product-pricing-benefits > div {
    display: flex;
    gap: 12px;
    margin: 0 0 13px
}

.product-pricing-benefits i {
    display: grid;
    place-items: center;
    flex: 0 0 36px;
    height: 36px;
    border-radius: 50%;
    font-style: normal
}

.product-pricing-benefits p, .product-pricing-tip p {
    margin: 0
}

.product-pricing-benefits b, .product-pricing-tip b {
    display: block;
    color: #17223a;
    font-size: 12px
}

.product-pricing-benefits small, .product-pricing-tip small {
    display: block;
    margin-top: 2px;
    color: #65758d;
    font-size: 10px;
    line-height: 1.45
}

.product-pricing-tip {
    display: flex;
    gap: 11px;
    margin-top: auto;
    padding: 14px;
    border: 1px solid #bedaff;
    border-radius: 9px;
    background: #f0f7ff;
    color: #2877e8
}

    .product-pricing-tip > i {
        font-style: normal
    }

    .product-pricing-tip small {
        font-size: 11px
    }

.violet {
    color: #8255e9
}

.blue {
    color: #3582f4
}

.green {
    color: #2db579
}

.orange {
    color: #ff6b1a
}

.teal {
    color: #16aaa5
}

body.relite-dark .product-pricing-form, body.relite-dark .product-pricing-guide, body.relite-dark .product-pricing-options > label {
    background: #102844;
    border-color: #29445f
}

    body.relite-dark .product-pricing-heading, body.relite-dark .product-pricing-block h4, body.relite-dark .product-pricing-guide h3, body.relite-dark .product-pricing-benefits b {
        color: #f8fafc
    }

@media(max-width:1180px) {
    .product-pricing-layout {
        grid-template-columns: minmax(0,1.7fr) minmax(240px,.8fr)
    }

    .product-pricing-options {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }
}

@media(max-width:900px) {
    .product-pricing-layout {
        grid-template-columns: minmax(0,1fr)
    }

    .product-pricing-guide {
        order: 2
    }

    .product-pricing-form {
        order: 1
    }
}

@media(max-width:640px) {
    .product-pricing-form, .product-pricing-guide {
        padding: 16px 13px
    }

    .product-pricing-top-grid, .product-pricing-expiry > div, .product-pricing-options {
        grid-template-columns: 1fr
    }

    .product-pricing-unit {
        max-width: 100%
    }
}

.product-pricing-icon-field .form-control {
    order: 2
}

.product-pricing-icon-field .product-pricing-native-check {
    display: flex;
    align-items: center;
    order: 3;
    padding: 0 12px;
    margin: 0;
    font-style: normal
}

.product-pricing-native-check .icheckbox_square-blue {
    margin: 0
}

.product-pricing-layout {
    grid-template-columns: minmax(270px,.72fr) minmax(0,2fr);
    grid-template-areas: "guide form"
}

.product-pricing-form {
    grid-area: form
}

.product-pricing-guide {
    grid-area: guide
}

@media(max-width:1180px) {
    .product-pricing-layout {
        grid-template-columns: minmax(240px,.8fr) minmax(0,1.7fr)
    }
}

@media(max-width:900px) {
    .product-pricing-layout {
        grid-template-columns: minmax(0,1fr);
        grid-template-areas: "form" "guide"
    }
}

/* Sales settings */
.business-settings-editor .pos-tab-content.sales-settings-tab {
    padding: 0;
    border-radius: 0;
    background: transparent
}

.sales-settings-layout {
    display: grid;
    grid-template-columns: minmax(270px,.72fr) minmax(0,2fr);
    gap: 22px;
    align-items: stretch
}

.sales-settings-guide, .sales-settings-card {
    background: #fff;
    border: 1px solid #dce5ef;
    border-radius: 13px;
    box-shadow: 0 8px 24px rgba(30,51,80,.07)
}

.sales-settings-guide {
    display: flex;
    flex-direction: column;
    padding: 22px 25px
}

.sales-guide-visual svg {
    display: block;
    width: 100%;
    height: auto
}

.sales-settings-layout svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round
}

.sales-settings-guide > h3 {
    margin: 5px 0 18px;
    color: #13213a;
    font-size: 18px;
    font-weight: 700
}

.sales-guide-items > div {
    display: flex;
    gap: 12px;
    margin-bottom: 16px
}

.sales-guide-items i {
    display: grid;
    place-items: center;
    flex: 0 0 38px;
    height: 38px;
    border-radius: 50%;
    font-style: normal;
    background: #f3f6fb
}

.sales-guide-items p {
    margin: 0
}

.sales-guide-items b {
    display: block;
    color: #17223a;
    font-size: 12px
}

.sales-guide-items small {
    display: block;
    margin-top: 3px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.5
}

.sales-guide-tip {
    display: flex;
    gap: 10px;
    margin-top: auto;
    padding: 14px;
    color: #a44d14;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 9px;
    font-size: 11px;
    line-height: 1.5
}

    .sales-guide-tip i {
        color: #ff6b1a
    }

.sales-settings-form {
    display: grid;
    gap: 12px
}

.sales-settings-card {
    padding: 18px 20px
}

    .sales-settings-card h3 {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 0 0 17px;
        color: #17223a;
        font-size: 16px;
        font-weight: 700
    }

.sales-title-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 7px;
    background: #f1f5ff;
    font-style: normal
}

.sales-fields {
    display: grid;
    gap: 15px 22px
}

.sales-fields--three {
    grid-template-columns: repeat(3,minmax(0,1fr))
}

.sales-settings-form .form-group {
    margin: 0
}

.sales-settings-form label {
    margin-bottom: 7px;
    color: #334155;
    font-size: 11px;
    font-weight: 700
}

.sales-settings-form .form-control {
    height: 40px;
    border-color: #d6e0eb;
    border-radius: 7px;
    box-shadow: none
}

.sales-icon-field {
    display: flex;
    align-items: center;
    border: 1px solid #d6e0eb;
    border-radius: 7px;
    overflow: hidden
}

    .sales-icon-field > i, .sales-icon-field > svg {
        display: grid;
        place-items: center;
        flex: 0 0 40px;
        width: 40px;
        margin: 0;
        padding: 10px;
        color: #64748b;
        border-right: 1px solid #dce4ed;
        font-style: normal
    }

    .sales-icon-field .form-control {
        border: 0
    }

.sales-toggle {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 40px;
    margin: 19px 0 0 !important;
    font-weight: 600 !important
}

    .sales-toggle > i {
        display: grid;
        place-items: center;
        flex: 0 0 36px;
        height: 36px;
        border: 1px solid #dce5ef;
        border-radius: 7px;
        font-style: normal
    }

    .sales-toggle > span {
        order: 3
    }

.sales-toggle--bottom {
    align-self: end
}

.sales-payment-switch {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 12px !important
}

.sales-provider-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px
}

.sales-provider {
    padding: 12px 15px;
    border: 1px solid #cfe0f4;
    border-radius: 8px
}

    .sales-provider h4 {
        margin: 0 0 12px;
        color: #173b7a;
        font-size: 16px
    }

        .sales-provider h4 small {
            color: #64748b;
            font-size: 10px;
            font-weight: 400
        }

.sales-provider--stripe h4 {
    color: #6754e8;
    font-size: 22px
}

.sales-provider > div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px
}

.sales-provider .form-control {
    height: 38px
}

.sales-provider label {
    font-size: 10px
}

body.relite-dark .sales-settings-guide, body.relite-dark .sales-settings-card, body.relite-dark .sales-provider {
    background: #102844;
    border-color: #29445f
}

    body.relite-dark .sales-settings-guide h3, body.relite-dark .sales-settings-card h3, body.relite-dark .sales-guide-items b {
        color: #f8fafc
    }

@media(max-width:1180px) {
    .sales-settings-layout {
        grid-template-columns: minmax(240px,.8fr) minmax(0,1.7fr)
    }

    .sales-fields--three {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }
}

@media(max-width:900px) {
    .sales-settings-layout {
        grid-template-columns: 1fr
    }

    .sales-settings-form {
        order: 1
    }

    .sales-settings-guide {
        order: 2
    }
}

@media(max-width:640px) {
    .sales-settings-guide, .sales-settings-card {
        padding: 16px 13px
    }

    .business-settings-editor .sales-settings-tab,
    .sales-settings-layout,
    .sales-settings-form,
    .sales-settings-card,
    .sales-fields,
    .sales-fields > *,
    .sales-icon-field {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        min-width: 0
    }

    .business-settings-editor .sales-settings-tab {
        overflow-x: hidden
    }

    .sales-icon-field > .select2-container,
    .sales-icon-field > .form-control {
        flex: 1 1 0 !important;
        width: 1% !important;
        min-width: 0 !important
    }

    .sales-icon-field .select2-selection__rendered,
    .sales-settings-form .sales-toggle > span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .sales-fields--three, .sales-provider-grid, .sales-provider > div {
        grid-template-columns: 1fr
    }

    .sales-toggle {
        margin-top: 0 !important
    }
}

.sales-settings-layout .sales-guide-visual svg {
    display: block;
    width: 100%;
    height: auto;
    max-height: 240px;
    fill: initial;
    stroke: none
}

.sales-settings-layout .payment-brand svg {
    display: block;
    width: auto;
    height: 27px;
    fill: initial;
    stroke: none
}

.sales-provider h4 {
    display: flex;
    align-items: center;
    gap: 8px
}

.sales-payment-switch {
    position: relative;
    cursor: pointer
}

    .sales-payment-switch > .icheckbox_square-blue {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        overflow: hidden;
        opacity: 0
    }

    .sales-payment-switch > input {
        position: absolute;
        opacity: 0;
        pointer-events: none
    }

.sales-payment-switch__track {
    position: relative;
    display: inline-block;
    flex: 0 0 34px;
    width: 34px;
    height: 20px;
    border-radius: 20px;
    background: #cbd5e1;
    box-shadow: inset 0 0 0 1px rgba(15,23,42,.08);
    transition: .2s
}

    .sales-payment-switch__track:after {
        position: absolute;
        top: 3px;
        left: 3px;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 1px 3px rgba(15,23,42,.25);
        content: "";
        transition: .2s
    }

.sales-payment-switch > input:checked + .sales-payment-switch__track, .sales-payment-switch > .icheckbox_square-blue.checked + .sales-payment-switch__track {
    background: #22b573
}

    .sales-payment-switch > input:checked + .sales-payment-switch__track:after, .sales-payment-switch > .icheckbox_square-blue.checked + .sales-payment-switch__track:after {
        transform: translateX(14px)
    }

.sales-icon-field > .sales-field-icon {
    display: grid;
    place-items: center;
    align-self: stretch;
    flex: 0 0 40px;
    width: 40px;
    margin: 0;
    padding: 0;
    color: #64748b;
    border-right: 1px solid #dce4ed;
    font-style: normal;
    position: relative;
    z-index: 2
}

    .sales-icon-field > .sales-field-icon svg {
        display: block !important;
        width: 18px !important;
        height: 18px !important;
        color: inherit !important;
        stroke: currentColor !important
    }

.sales-icon-field > .select2-container {
    min-width: 0 !important;
    flex: 1;
    width: auto !important
}

.sales-key-field {
    display: flex;
    align-items: center;
    height: 38px;
    overflow: hidden;
    border: 1px solid #d6e0eb;
    border-radius: 7px;
    background: #fff
}

    .sales-key-field > .form-control {
        flex: 1;
        min-width: 0;
        border: 0 !important
    }

    .sales-key-field > i {
        display: grid;
        place-items: center;
        flex: 0 0 38px;
        width: 38px;
        height: 100%;
        margin: 0;
        color: #64748b;
        border-right: 1px solid #dce4ed;
        font-style: normal
    }

        .sales-key-field > i svg {
            display: block !important;
            width: 17px !important;
            height: 17px !important;
            stroke: currentColor !important
        }

    .sales-key-field > .sales-key-eye {
        border-right: 0;
        border-left: 0;
        flex-basis: 34px;
        width: 34px
    }

/* Cashier (POS) settings */
.business-settings-editor .pos-tab-content.cashier-settings-tab {
    padding: 0;
    border-radius: 0;
    background: transparent
}

.cashier-settings-layout {
    display: grid;
    grid-template-columns: minmax(270px,.72fr) minmax(0,2fr);
    gap: 22px;
    align-items: stretch
}

.cashier-settings-guide, .cashier-settings-card {
    background: #fff;
    border: 1px solid #dce5ef;
    border-radius: 13px;
    box-shadow: 0 8px 24px rgba(30,51,80,.07)
}

.cashier-settings-guide {
    display: flex;
    flex-direction: column;
    padding: 22px 24px
}

.cashier-guide-visual svg {
    display: block;
    width: 100%;
    height: auto;
    max-height: 275px
}

.cashier-settings-layout svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round
}

.cashier-settings-layout .cashier-guide-visual svg {
    fill: initial;
    stroke: none
}

.cashier-settings-guide h3 {
    margin: 7px 0 18px;
    color: #17223a;
    font-size: 18px;
    font-weight: 700
}

.cashier-guide-items > div {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px
}

.cashier-guide-items i {
    display: grid;
    place-items: center;
    flex: 0 0 37px;
    height: 37px;
    border-radius: 50%;
    background: #f2f5fa;
    font-style: normal
}

.cashier-guide-items svg, .cashier-guide-tip svg {
    width: 18px;
    height: 18px
}

.cashier-guide-items b {
    color: #24324a;
    font-size: 12px
}

.cashier-guide-tip {
    display: flex;
    gap: 10px;
    margin-top: auto;
    padding: 14px;
    color: #2563eb;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 9px
}

    .cashier-guide-tip i {
        font-style: normal
    }

    .cashier-guide-tip b, .cashier-guide-tip small {
        display: block
    }

    .cashier-guide-tip small {
        margin-top: 4px;
        color: #42526b;
        font-size: 12px;
        line-height: 1.5
    }

.cashier-settings-form {
    display: grid;
    gap: 12px
}

.cashier-settings-card {
    padding: 17px 20px
}

    .cashier-settings-card h4 {
        margin: 0 0 7px;
        color: #17223a;
        font-size: 15px;
        font-weight: 700
    }

    .cashier-settings-card > .help-block {
        margin: 3px 0;
        color: #64748b;
        font-size: 10px;
        line-height: 1.45
    }

.cashier-shortcuts-card > .row {
    margin-top: 10px
}

.cashier-shortcuts-card .table {
    margin: 0;
    background: transparent
}

    .cashier-shortcuts-card .table th {
        padding: 5px 9px;
        color: #334155;
        background: #f8fafc;
        border-bottom: 1px solid #dce4ee;
        font-size: 10px
    }

    .cashier-shortcuts-card .table td {
        padding: 3px 9px;
        border-top: 1px solid #edf1f5;
        font-size: 12px;
        vertical-align: middle
    }

.cashier-shortcuts-card .form-control {
    height: 29px;
    border-color: #dce4ee;
    border-radius: 5px;
    font-size: 12px;
    box-shadow: none
}

.cashier-behavior-card .row {
    display: flex;
    flex-wrap: wrap
}

.cashier-behavior-card .col-sm-12 {
    width: 100%
}

.cashier-behavior-card .col-sm-4 {
    width: 33.333%
}

.cashier-behavior-card .form-group {
    margin: 0
}

.cashier-behavior-card .checkbox {
    margin: 0;
    min-height: 34px
}

    .cashier-behavior-card .checkbox br {
        display: none
    }

    .cashier-behavior-card .checkbox label {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 7px 25px;
        color: #334155;
        font-size: 12px
    }

.cashier-scale-card > .row {
    margin: 0
}

.cashier-scale-card .col-sm-12 {
    padding: 0
}

    .cashier-scale-card .col-sm-12 br {
        display: none
    }

    .cashier-scale-card .col-sm-12 p {
        margin: 0 0 12px;
        color: #64748b;
        font-size: 10px
    }

.cashier-scale-card .col-sm-3 {
    padding: 0 9px
}

    .cashier-scale-card .col-sm-3:first-of-type {
        padding-left: 0
    }

    .cashier-scale-card .col-sm-3:last-of-type {
        padding-right: 0
    }

.cashier-scale-card label {
    font-size: 10px
}

.cashier-scale-card .form-control {
    height: 38px;
    border-color: #d6e0eb;
    border-radius: 7px;
    box-shadow: none
}

body.relite-dark .cashier-settings-guide, body.relite-dark .cashier-settings-card {
    background: #102844;
    border-color: #29445f
}

    body.relite-dark .cashier-settings-guide h3, body.relite-dark .cashier-settings-card h4 {
        color: #f8fafc
    }

@media(max-width:1180px) {
    .cashier-settings-layout {
        grid-template-columns: minmax(240px,.8fr) minmax(0,1.7fr)
    }
}

@media(max-width:900px) {
    .cashier-settings-layout {
        grid-template-columns: 1fr
    }

    .cashier-settings-form {
        order: 1
    }

    .cashier-settings-guide {
        order: 2
    }
}

.cashier-shortcuts-card .table td:first-child {
    display: flex;
    align-items: center;
    gap: 8px
}

    .cashier-shortcuts-card .table td:first-child:before {
        display: inline-block;
        flex: 0 0 18px;
        width: 18px;
        height: 18px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c4dff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m13 2-9 12h8l-1 8 9-12h-8z'/%3E%3C/svg%3E") center/16px no-repeat;
        content: ""
    }

.cashier-guide-visual {
    background-image: linear-gradient(to bottom,rgba(255,255,255,0) 82%,#fff 100%),url('../img/settings-pos.png')
}

body.relite-dark .cashier-guide-visual {
    background-image: linear-gradient(to bottom,rgba(16,40,68,0) 82%,#102844 100%),url('../img/settings-pos.png')
}

/* Operation-specific POS outline icons and blended guide artwork. */
.cashier-guide-visual {
    position: relative;
    border-radius: 16px;
    background-color: #faf9ff;
    background-image: linear-gradient(to bottom,rgba(250,249,255,0) 68%,#fff 98%),url('../img/settings-pos.png');
    background-size: 100% 100%,contain;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: normal,multiply;
    overflow: hidden
}

    .cashier-guide-visual:after {
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: radial-gradient(ellipse at center,transparent 58%,rgba(255,255,255,.72) 92%,#fff 100%);
        content: ""
    }

body.relite-dark .cashier-guide-visual {
    background-color: #102844;
    background-image: linear-gradient(to bottom,rgba(16,40,68,0) 68%,#102844 98%),url('../img/settings-pos.png');
    background-blend-mode: normal,multiply
}

    body.relite-dark .cashier-guide-visual:after {
        background: radial-gradient(ellipse at center,transparent 58%,rgba(16,40,68,.65) 92%,#102844 100%)
    }

.cashier-shortcuts-card .table td:first-child:before, .cashier-behavior-card .checkbox label:before {
    background-image: var(--pos-icon) !important
}

.cashier-shortcuts-card .col-sm-6:first-child tr:nth-child(2) {
    --pos-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c4dff' stroke-width='2'%3E%3Cpath d='m13 2-9 12h8l-1 8 9-12h-8z'/%3E%3C/svg%3E")
}

.cashier-shortcuts-card .col-sm-6:first-child tr:nth-child(3) {
    --pos-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b5cff' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 10h18M7 15h4'/%3E%3C/svg%3E")
}

.cashier-shortcuts-card .col-sm-6:first-child tr:nth-child(4) {
    --pos-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c4dff' stroke-width='2'%3E%3Cpath d='M6 2h9l4 4v16H6zM14 2v5h5M9 12h6m-6 4h5'/%3E%3C/svg%3E")
}

.cashier-shortcuts-card .col-sm-6:first-child tr:nth-child(5) {
    --pos-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c4dff' stroke-width='2'%3E%3Cpath d='m5 5 14 14M19 5 5 19'/%3E%3C/svg%3E")
}

.cashier-shortcuts-card .col-sm-6:first-child tr:nth-child(6) {
    --pos-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c4dff' stroke-width='2'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3Cpath d='M17.5 14v7M14 17.5h7'/%3E%3C/svg%3E")
}

.cashier-shortcuts-card .col-sm-6:first-child tr:nth-child(7) {
    --pos-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c4dff' stroke-width='2'%3E%3Cpath d='M4 20h16M7 20V9m10 11V9M5 9h14M12 4v5M8 4h8'/%3E%3C/svg%3E")
}

.cashier-shortcuts-card .col-sm-6:nth-child(2) tr:nth-child(2) {
    --pos-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c4dff' stroke-width='2'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Cpath d='M8 7h8M8 12h2m4 0h2M8 16h2m4 0h2'/%3E%3C/svg%3E")
}

.cashier-shortcuts-card .col-sm-6:nth-child(2) tr:nth-child(3) {
    --pos-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c4dff' stroke-width='2'%3E%3Cpath d='M6 2h9l4 4v16H6zM14 2v5h5M9 12h6m-6 4h5'/%3E%3C/svg%3E")
}

.cashier-shortcuts-card .col-sm-6:nth-child(2) tr:nth-child(4), .cashier-shortcuts-card .col-sm-6:nth-child(2) tr:nth-child(6) {
    --pos-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c4dff' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v8m-4-4h8'/%3E%3C/svg%3E")
}

.cashier-shortcuts-card .col-sm-6:nth-child(2) tr:nth-child(5) {
    --pos-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c4dff' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12 3 3 5-6'/%3E%3C/svg%3E")
}

.cashier-behavior-card .col-sm-4:nth-of-type(3n+2) {
    --pos-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='1.8'%3E%3Cpath d='M6 2h9l4 4v16H6zM14 2v5h5M9 12h6m-6 4h5'/%3E%3C/svg%3E")
}

.cashier-behavior-card .col-sm-4:nth-of-type(3n+3) {
    --pos-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b5cf6' stroke-width='1.8'%3E%3Cpath d='M12 3a4 4 0 0 1 4 4v2l3 4v2H5v-2l3-4V7a4 4 0 0 1 4-4zM10 19h4'/%3E%3C/svg%3E")
}

.cashier-behavior-card .col-sm-4:nth-of-type(4n+1) {
    --pos-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff6b1a' stroke-width='1.8'%3E%3Cpath d='m19 5-14 14'/%3E%3Ccircle cx='7' cy='7' r='2'/%3E%3Ccircle cx='17' cy='17' r='2'/%3E%3C/svg%3E")
}

.cashier-behavior-card .col-sm-4:nth-of-type(5n+2) {
    --pos-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322b573' stroke-width='1.8'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Ccircle cx='17' cy='10' r='2'/%3E%3Cpath d='M3 21v-2a6 6 0 0 1 12 0v2m1-6a5 5 0 0 1 5 5v1'/%3E%3C/svg%3E")
}

.cashier-behavior-card .col-sm-4:nth-last-of-type(-n+3) {
    --pos-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b5cf6' stroke-width='1.8'%3E%3Cpath d='M6 9V3h12v6M6 18H4V9h16v9h-2M7 14h10v8H7z'/%3E%3C/svg%3E")
}

@media(max-width:640px) {
    .cashier-settings-guide, .cashier-settings-card {
        padding: 16px 13px
    }

    .cashier-shortcuts-card .col-sm-6, .cashier-behavior-card .col-sm-4, .cashier-scale-card .col-sm-3 {
        width: 100%;
        padding: 0
    }

    .cashier-shortcuts-card .table {
        margin-bottom: 12px
    }
}

/* Cashier reference refinements: form left, visual guide right. */
.cashier-settings-layout {
    grid-template-columns: minmax(0,2fr) minmax(270px,.72fr)
}

.cashier-settings-form {
    order: 1
}

.cashier-settings-guide {
    order: 2
}

.cashier-guide-visual {
    width: 100%;
    aspect-ratio: 1/1.02;
    margin: -10px 0 4px;
    background: linear-gradient(to bottom,rgba(255,255,255,0) 82%,#fff 100%),url('../img/settings-pos.png') center top/contain no-repeat
}

.cashier-settings-layout .cashier-guide-visual svg {
    display: none
}

.cashier-shortcuts-card .table td, .cashier-shortcuts-card .table th {
    font-size: 12px
}

.cashier-shortcuts-card > h4, .cashier-behavior-card h4, .cashier-scale-card h4 {
    display: flex;
    align-items: center;
    gap: 10px
}

    .cashier-shortcuts-card > h4:before, .cashier-behavior-card h4:before, .cashier-scale-card h4:before {
        display: inline-block;
        flex: 0 0 34px;
        width: 34px;
        height: 34px;
        border-radius: 8px;
        background-color: #f1edff;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 19px;
        content: ""
    }

    .cashier-shortcuts-card > h4:before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c4dff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M6 9h.01M10 9h.01M14 9h.01M18 9h.01M6 13h.01M10 13h.01M14 13h.01M18 13h.01M7 16h10'/%3E%3C/svg%3E")
    }

    .cashier-behavior-card h4:before {
        background-color: #eaf8ee;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232eae63' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19 15a2 2 0 0 0 .4 2L17 19.4a2 2 0 0 0-2-.4 2 2 0 0 0-1 2h-4a2 2 0 0 0-1-2 2 2 0 0 0-2 .4L4.6 17A2 2 0 0 0 5 15a2 2 0 0 0-2-1v-4a2 2 0 0 0 2-1A2 2 0 0 0 4.6 7L7 4.6A2 2 0 0 0 9 5a2 2 0 0 0 1-2h4a2 2 0 0 0 1 2 2 2 0 0 0 2-.4L19.4 7A2 2 0 0 0 19 9a2 2 0 0 0 2 1v4a2 2 0 0 0-2 1z'/%3E%3C/svg%3E")
    }

    .cashier-scale-card h4:before {
        background-color: #eaf4ff;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232d7ff9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h16M7 20V9m10 11V9M5 9h14M12 4v5M8 4h8M4 13h6m4 0h6'/%3E%3C/svg%3E")
    }

.cashier-behavior-card .checkbox label:before {
    display: inline-block;
    flex: 0 0 27px;
    width: 27px;
    height: 27px;
    margin-right: 2px;
    border: 1px solid #dbe4ee;
    border-radius: 6px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c4dff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M7 12h10M10 17h4'/%3E%3Ccircle cx='8' cy='7' r='2' fill='white'/%3E%3Ccircle cx='15' cy='12' r='2' fill='white'/%3E%3Ccircle cx='12' cy='17' r='2' fill='white'/%3E%3C/svg%3E") center/16px no-repeat;
    content: ""
}

.cashier-behavior-card .checkbox label > .icheckbox_square-blue {
    order: -1
}

.cashier-scale-card .form-group {
    position: relative
}

    .cashier-scale-card .form-group:before {
        position: absolute;
        left: 1px;
        bottom: 1px;
        z-index: 3;
        width: 37px;
        height: 36px;
        border-right: 1px solid #dce4ed;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232d7ff9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h16M7 20V9m10 11V9M5 9h14M12 4v5'/%3E%3C/svg%3E") center/16px no-repeat;
        content: ""
    }

.cashier-scale-card .form-control, .cashier-scale-card .select2-selection {
    padding-left: 45px !important
}

body.relite-dark .cashier-guide-visual {
    background-image: linear-gradient(to bottom,rgba(16,40,68,0) 82%,#102844 100%),url('../img/settings-pos.png')
}

@media(max-width:1180px) {
    .cashier-settings-layout {
        grid-template-columns: minmax(0,1.7fr) minmax(240px,.8fr)
    }
}

@media(max-width:900px) {
    .cashier-settings-layout {
        grid-template-columns: 1fr
    }

    .cashier-settings-form {
        order: 1
    }

    .cashier-settings-guide {
        order: 2
    }
}

.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: 600
}

.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: 600;
        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: 600 !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
    }
}

/* Add/Edit Sale reference dashboard. Layout-section navigation and its icons are unchanged. */
.modern-sale-page .sale-layout-main {
    --sale-card-border: #dfe6ef;
    --sale-card-shadow: 0 5px 18px rgba(30,51,79,.055)
}

    .modern-sale-page .sale-layout-main .sale-section-card,
    .modern-sale-page .sale-layout-main .sale-compliance-panel {
        border: 1px solid var(--sale-card-border) !important;
        border-radius: 11px !important;
        background: #fff !important;
        box-shadow: var(--sale-card-shadow) !important;
        overflow: hidden
    }

    .modern-sale-page .sale-layout-main .sale-reference-panel__head {
        min-height: 42px;
        padding: 9px 12px !important;
        border-bottom: 1px solid #e7edf5;
        background: #fff
    }

        .modern-sale-page .sale-layout-main .sale-reference-panel__head h4 {
            margin: 0;
            color: #172033;
            font-size: 13px;
            font-weight: 750;
            line-height: 1.25;
            text-transform: none
        }

        .modern-sale-page .sale-layout-main .sale-reference-panel__head p {
            display: none
        }

    .modern-sale-page .sale-layout-main .sale-reference-panel__icon {
        width: 27px;
        height: 27px;
        border-radius: 7px
    }

        .modern-sale-page .sale-layout-main .sale-reference-panel__icon svg {
            width: 18px;
            height: 18px;
            fill: none;
            stroke: currentColor
        }

.sale-quick-status {
    margin: 0;
    align-self: stretch
}

.sale-quick-status__head {
    display: flex;
    min-height: 42px;
    align-items: center;
    gap: 9px;
    padding: 9px 12px;
    border-bottom: 1px solid #e7edf5
}

    .sale-quick-status__head svg {
        width: 20px;
        height: 20px;
        fill: none;
        stroke: #f97316;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round
    }

    .sale-quick-status__head h3 {
        margin: 0;
        color: #172033;
        font-size: 13px;
        font-weight: 750
    }

.sale-quick-status__grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px;
    padding: 10px 10px 8px
}

.sale-quick-status__item {
    display: flex;
    min-width: 0;
    min-height: 59px;
    align-items: center;
    gap: 9px;
    padding: 8px;
    border: 1px solid #e5ebf3;
    border-radius: 8px;
    background: #fff
}

.sale-quick-status__icon {
    display: inline-flex;
    width: 31px;
    height: 31px;
    flex: 0 0 31px;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: #eff6ff;
    color: #2563eb
}

    .sale-quick-status__icon svg {
        width: 18px;
        height: 18px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round
    }

.sale-quick-status__item--payment .sale-quick-status__icon,
.sale-quick-status__item--shipping .sale-quick-status__icon {
    background: #fff3eb;
    color: #f97316
}

.sale-quick-status__item--gst .sale-quick-status__icon {
    background: #ecfdf5;
    color: #10b981
}

.sale-quick-status__item small,
.sale-quick-status__item strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.sale-quick-status__item small {
    margin-bottom: 3px;
    color: #7c899c;
    font-size: 9px;
    font-weight: 600
}

.sale-quick-status__item strong {
    color: #16a34a;
    font-size: 11px;
    font-weight: 750
}

.sale-quick-status__item--payment strong,
.sale-quick-status__item--shipping strong {
    color: #f97316
}

.sale-quick-status__total {
    display: flex;
    min-height: 42px;
    align-items: center;
    justify-content: space-between;
    margin: 0 10px 10px;
    padding: 9px 12px;
    border: 1px solid #e9ddff;
    border-radius: 8px;
    background: linear-gradient(90deg,#f8f5ff,#fff);
    color: #5b21b6;
    font-size: 11px;
    font-weight: 700
}

    .sale-quick-status__total strong {
        color: #7c3aed;
        font-size: 20px;
        font-weight: 600
    }

@media(min-width:1280px) {
    .modern-sale-page .sale-layout-main {
        display: grid;
        grid-template-columns: repeat(12,minmax(0,1fr));
        align-items: start;
        gap: 12px
    }

        .modern-sale-page .sale-layout-main > .row:first-of-type,
        .modern-sale-page .sale-layout-main > .row:first-of-type > .col-md-12 {
            display: contents !important
        }

        .modern-sale-page .sale-layout-main .sale-section-card--overview {
            grid-column: 1/9 !important;
            grid-row: 1 !important;
            width: 100% !important;
            margin: 0 !important
        }

        .modern-sale-page .sale-layout-main .sale-quick-status {
            grid-column: 9/13 !important;
            grid-row: 1 !important
        }

        .modern-sale-page .sale-layout-main .sale-section-card--products {
            grid-column: 1/9 !important;
            grid-row: 2 !important;
            width: 100% !important;
            margin: 0 !important
        }

        .modern-sale-page .sale-layout-main .sale-section-card--totals {
            grid-column: 9/13 !important;
            grid-row: 2 !important;
            width: 100% !important;
            margin: 0 !important;
            align-self: start
        }

        .modern-sale-page .sale-layout-main .sale-section-card--payments {
            grid-column: 1/5 !important;
            grid-row: 3 !important;
            width: 100% !important;
            margin: 0 !important
        }

        .modern-sale-page .sale-layout-main .sale-section-card--other {
            grid-column: 5/9 !important;
            grid-row: 3 !important;
            width: 100% !important;
            margin: 0 !important
        }

        .modern-sale-page .sale-layout-main > #sale-compliance {
            grid-column: 1/-1 !important;
            grid-row: 4 !important;
            min-width: 0
        }

        .modern-sale-page .sale-layout-main > .sale-modern-savebar,
        .modern-sale-page .sale-layout-main > .sale-reference-actions,
        .modern-sale-page .sale-layout-main > .sale-payment-actions {
            grid-column: 1/-1 !important
        }

        .modern-sale-page .sale-layout-main > .sale-section-anchor,
        .modern-sale-page .sale-layout-main > script,
        .modern-sale-page .sale-layout-main > input[type=hidden] {
            display: none
        }

    .modern-sale-page .sale-section-card--overview  .widget-slot {
        display: grid !important;
        grid-template-columns: repeat(6,minmax(0,1fr)) !important;
        gap: 0 10px !important;
        padding: 10px 12px !important
    }

        .modern-sale-page .sale-section-card--overview  .widget-slot > [class*="col-"] {
            width: auto !important;
            min-width: 0;
            grid-column: span 2;
            padding-right: 0 !important;
            padding-left: 0 !important
        }

    .modern-sale-page .sale-section-card--overview .sale-overview-headings {
        display: none
    }

    .modern-sale-page .sale-section-card--totals  .widget-slot {
        display: block !important;
        padding: 10px 12px !important
    }

        .modern-sale-page .sale-section-card--totals  .widget-slot > [class*="col-"] {
            float: none !important;
            width: 100% !important;
            margin-left: 0 !important;
            padding: 0 !important
        }

    .modern-sale-page .sale-section-card--other  .widget-slot {
        display: grid !important;
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
        gap: 0 10px !important;
        padding: 10px 12px !important
    }

        .modern-sale-page .sale-section-card--other  .widget-slot > [class*="col-"] {
            float: none !important;
            width: auto !important;
            min-width: 0;
            margin-left: 0 !important;
            padding: 0 !important
        }
}

@media(max-width:1279px) {
    .sale-quick-status {
        width: 100%;
        margin: 0 0 12px
    }
}

@media(max-width:575px) {
    .sale-quick-status__grid {
        grid-template-columns: 1fr
    }
}

/* 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;
}

/* Unsaved-form navigation confirmation uses the compact alert shell. */
.swal-modal.compact-leave-alert .compact-delete-alert__icon {
    color: #f97316;
    background: #fff7ed;
    border-color: #fed7aa;
}

.swal-modal.compact-leave-alert .swal-button--confirm {
    color: #fff;
    background: #f97316;
    border-color: #f97316;
}

    .swal-modal.compact-leave-alert .swal-button--confirm:hover,
    .swal-modal.compact-leave-alert .swal-button--confirm:focus {
        color: #fff;
        background: #ea580c;
        border-color: #ea580c;
    }

.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: 9px;
    width: 100%;
    min-height: 54px;
    margin: 14px 0;
    padding: 13px 20px;
    color: #24334d;
    background: #fff;
    border: 1px solid #d7e2f1;
    border-radius: 11px;
    box-shadow: 0 3px 10px rgba(18,44,82,.03);
    font-family: 'Inter', sans-serif !important;
    font-size: 12px !important;
    font-weight: 400;
    line-height: 1.5;
}

    .gstr1-note svg {
        width: 17px;
        height: 17px;
        flex: 0 0 17px;
        fill: none;
        stroke: #344563;
        stroke-width: 1.8;
    }

    .gstr1-note strong,
    .gstr1-note > b {
        color: #24334d;
        font-size: inherit;
        font-weight: 700;
        white-space: nowrap;
    }

    .gstr1-note span b {
        color: #075be8;
        font-weight: 700;
    }

.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%;
        }
}

/* Shared report filter actions and cancelled-invoice KPI sizing. */
.cancelled-invoice-dashboard .cir-kpi-grid {
    width: 100%;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

    .cancelled-invoice-dashboard .cir-kpi-grid .gstr1-kpi,
    .cancelled-invoice-dashboard .cir-kpi-grid .gstr1-kpi > div {
        min-width: 0;
    }

.cancelled-invoice-dashboard #cir_tax_split {
    white-space: normal;
    line-height: 1.35;
    font-size: 10px;
}

.product-sell-dashboard .psd-filter-grid .gstr1-filter-actions,
.sales-return-dashboard .srr-filter-grid .gstr1-filter-actions,
.cancelled-invoice-dashboard .cir-filter-grid .gstr1-filter-actions {
    width: max-content;
    grid-template-columns: 118px 118px;
    justify-self: end;
    justify-content: end;
}

.product-sell-dashboard .psd-filter-grid .gstr1-filter-actions,
.cancelled-invoice-dashboard .cir-filter-grid .gstr1-filter-actions {
    grid-column: 4 / -1;
}

.sales-return-dashboard .srr-filter-grid .gstr1-filter-actions {
    grid-column: -3 / -1;
}

.product-sell-dashboard .gstr1-filter-actions .gstr1-btn,
.sales-return-dashboard .gstr1-filter-actions .gstr1-btn,
.cancelled-invoice-dashboard .gstr1-filter-actions .gstr1-btn {
    width: 118px;
    min-width: 118px;
}

@media (max-width: 1400px) {
    .cancelled-invoice-dashboard .cir-kpi-grid {
        grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) !important;
    }

    .product-sell-dashboard .psd-filter-grid .gstr1-filter-actions,
    .sales-return-dashboard .srr-filter-grid .gstr1-filter-actions,
    .cancelled-invoice-dashboard .cir-filter-grid .gstr1-filter-actions {
        grid-column: 3 / -1;
    }
}

@media (max-width: 900px) {
    .product-sell-dashboard .psd-filter-grid .gstr1-filter-actions,
    .sales-return-dashboard .srr-filter-grid .gstr1-filter-actions,
    .cancelled-invoice-dashboard .cir-filter-grid .gstr1-filter-actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .product-sell-dashboard .psd-filter-grid .gstr1-filter-actions,
    .sales-return-dashboard .srr-filter-grid .gstr1-filter-actions,
    .cancelled-invoice-dashboard .cir-filter-grid .gstr1-filter-actions {
        width: 100%;
        grid-template-columns: 1fr;
    }

    .product-sell-dashboard .gstr1-filter-actions .gstr1-btn,
    .sales-return-dashboard .gstr1-filter-actions .gstr1-btn,
    .cancelled-invoice-dashboard .gstr1-filter-actions .gstr1-btn {
        width: 100%;
        min-width: 0;
    }
}
/* Modern sales and India GST compliance */
.modern-sale-header, .compliance-page-header {
    padding: 18px 20px 8px;
    font-family: 'Inter',sans-serif !important
}

    .modern-sale-header h1, .compliance-page-header h1 {
        margin: 0;
        color: #101a33;
        font-size: 22px;
        font-weight: 600
    }

        .modern-sale-header h1 small {
            font-size: 14px;
            color: #f97316;
            font-weight: 700
        }

        .modern-sale-header p, .compliance-page-header h1 small {
            display: block;
            margin: 5px 0 0;
            color: #64748b;
            font-size: 12px;
            font-weight: 500
        }

.modern-sale-page, .india-compliance-page {
    font-family: 'Inter',sans-serif !important;
    background: #f8fafc
}

    .modern-sale-page .box, .modern-sale-page .sale-compliance-panel {
        border: 1px solid #dfe7f1 !important;
        border-radius: 12px !important;
        box-shadow: 0 3px 12px rgba(15,35,70,.04) !important;
        overflow: hidden
    }

    .modern-sale-page .box-header {
        border-left: 3px solid #f97316;
        background: #fff;
        padding: 14px 16px
    }

    .modern-sale-page .box-body {
        padding: 16px
    }

    .modern-sale-page .form-control, .india-compliance-page .form-control {
        height: 38px;
        border: 1px solid #cfd9e7;
        border-radius: 7px;
        box-shadow: none
    }

    .modern-sale-page textarea.form-control {
        height: auto
    }

    .modern-sale-page .input-group-addon {
        border-color: #cfd9e7;
        background: #f8fafc;
        color: #0b2b59
    }

.sale-compliance-panel {
    margin: 16px 0;
    padding: 18px;
    background: #fff
}

.sale-compliance-panel__head, .compliance-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px
}

    .sale-compliance-panel__head h3, .compliance-card__header h3 {
        margin: 0;
        color: #101a33;
        font-size: 15px;
        font-weight: 600
    }

    .sale-compliance-panel__head p {
        margin: 4px 0 0;
        color: #64748b;
        font-size: 12px
    }

.compliance-amount-box {
    display: flex;
    min-height: 67px;
    flex-direction: column;
    justify-content: center;
    padding: 9px 14px;
    border-radius: 9px;
    background: #fff7ed;
    border: 1px solid #fed7aa
}

    .compliance-amount-box span, .compliance-amount-box small {
        color: #64748b;
        font-size: 11px
    }

    .compliance-amount-box strong {
        color: #f97316;
        font-size: 18px
    }

.compliance-document-options {
    display: flex;
    gap: 24px;
    margin: 6px 0 15px;
    padding: 12px 14px;
    border-radius: 8px;
    background: #eef6ff;
    color: #0b2b59
}

.compliance-transport-fields label {
    font-size: 12px;
    color: #334155
}

.compliance-grid {
    display: grid;
    gap: 16px;
    margin-bottom: 16px
}

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

.compliance-card {
    padding: 18px;
    background: #fff;
    border: 1px solid #dfe7f1;
    border-radius: 12px;
    box-shadow: 0 3px 12px rgba(15,35,70,.04)
}

.compliance-inline-form {
    display: grid;
    grid-template-columns: 100px 1.5fr 100px 1fr 1.5fr auto auto;
    gap: 8px;
    margin-bottom: 16px
}

.compliance-check, .compliance-options label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #334155;
    font-size: 12px
}

.compliance-settings-form .row {
    margin-bottom: 12px
}

.compliance-options {
    display: flex;
    min-height: 58px;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap
}

.compliance-actions {
    text-align: right
}

.compliance-table {
    margin: 0;
    font-size: 12px
}

    .compliance-table thead th {
        background: #f8fafc;
        color: #334155;
        border-bottom: 1px solid #dfe7f1
    }

.compliance-status {
    display: inline-flex;
    padding: 3px 8px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
    font-size: 11px
}

    .compliance-status.is-success {
        background: #ecfdf5;
        color: #059669
    }

.icon-outline-button {
    display: inline-flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border: 1px solid #fecaca;
    border-radius: 7px;
    background: #fff;
    color: #ef4444
}

    .icon-outline-button svg {
        width: 17px;
        height: 17px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round
    }

@media(max-width:1100px) {
    .compliance-grid--2 {
        grid-template-columns: 1fr
    }

    .compliance-inline-form {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }
}

@media(max-width:640px) {
    .compliance-inline-form {
        grid-template-columns: 1fr
    }

    .compliance-document-options {
        flex-direction: column;
        gap: 8px
    }
}

/* Modern create/edit sale layout. Field names and POS row hooks intentionally remain unchanged. */
.sale-form-nav {
    position: sticky;
    top: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 8px;
    margin: 0 0 14px;
    padding: 8px;
    border: 1px solid #dfe7f1;
    border-radius: 12px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 4px 16px rgba(15,35,70,.06);
    backdrop-filter: blur(8px)
}

    .sale-form-nav a {
        display: flex;
        min-height: 42px;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 8px 12px;
        border-radius: 8px;
        color: #334155;
        font-size: 12px;
        font-weight: 700;
        text-align: center;
        transition: .18s ease
    }

        .sale-form-nav a:hover, .sale-form-nav a:focus {
            background: #fff7ed;
            color: #f97316;
            text-decoration: none;
            outline: none
        }

    .sale-form-nav svg {
        width: 18px;
        height: 18px;
        flex: 0 0 auto;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round
    }

.modern-sale-page .sale-section-card {
    scroll-margin-top: 70px
}

.sale-section-anchor {
    display: block;
    position: relative;
    top: -70px;
    visibility: hidden
}

.modern-sale-page .sale-section-card  .box-header .box-title {
    color: #0f1b38;
    font-size: 14px;
    font-weight: 600
}

.modern-sale-page .sale-section-card  .widget-slot > .row {
    display: flex;
    flex-wrap: wrap
}

.modern-sale-page .sale-section-card .form-group > label {
    margin-bottom: 6px;
    color: #263750;
    font-size: 12px;
    font-weight: 700
}

.modern-sale-page .sale-section-card--products .box-body {
    padding: 14px
}

.modern-sale-page .sale-section-card--products .table-responsive {
    margin: 0;
    border: 0;
    border-radius: 8px;
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 #eef2f7
}

.modern-sale-page .sale-section-card--products .direct-sell-product-table {
    margin-bottom: 10px;
    background: #fff
}

    .modern-sale-page .sale-section-card--products .direct-sell-product-table thead th {
        padding: 10px 7px;
        background: #f8fafc;
        color: #1e293b;
        font-size: 11px;
        font-weight: 600;
        vertical-align: middle
    }

    .modern-sale-page .sale-section-card--products .direct-sell-product-table tbody td {
        padding: 7px;
        vertical-align: middle
    }

.modern-sale-page .sale-section-card--products #search_product {
    height: 42px;
    background: #fff
}

.modern-sale-page .sale-section-card--totals .box-body {
    background: linear-gradient(180deg,#fff 0,#fbfdff 100%)
}

.modern-sale-page .sale-section-card--payments .well {
    margin: 0 0 14px;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    background: #f8fafc;
    box-shadow: none
}

.modern-sale-page form > .row:last-of-type > div {
    position: sticky;
    bottom: 8px;
    z-index: 18;
    padding: 10px 12px;
    border: 1px solid #dfe7f1;
    border-radius: 10px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 8px 25px rgba(15,35,70,.12);
    backdrop-filter: blur(8px)
}

@media(max-width:991px) {
    .sale-form-nav {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

    .modern-sale-page {
        padding-left: 12px;
        padding-right: 12px
    }

        .modern-sale-page .box-body, .sale-compliance-panel {
            padding: 13px
        }

        .modern-sale-page .sale-section-card--overview [class*="col-md-"] {
            width: 50%
        }
}

@media(max-width:767px) {
    .modern-sale-header {
        padding: 14px 12px 7px
    }

        .modern-sale-header h1 {
            font-size: 19px
        }

    .sale-form-nav {
        position: relative;
        grid-template-columns: repeat(4,minmax(94px,1fr));
        overflow-x: auto
    }

        .sale-form-nav a {
            min-height: 38px;
            padding: 7px
        }

            .sale-form-nav a span {
                white-space: nowrap
            }

    .modern-sale-page .sale-section-card--overview [class*="col-md-"], .modern-sale-page .sale-section-card--overview [class*="col-sm-"] {
        width: 100%;
        float: none
    }

    .modern-sale-page .sale-section-card--products .col-sm-10 {
        width: 100%;
        margin-left: 0
    }

    .modern-sale-page form > .row:last-of-type > div {
        justify-content: stretch
    }

    .modern-sale-page form > .row:last-of-type .tw-dw-btn {
        flex: 1;
        justify-content: center
    }
}

@media(max-width:480px) {
    .sale-form-nav {
        grid-template-columns: repeat(4,88px)
    }

        .sale-form-nav a {
            flex-direction: column;
            gap: 3px;
            font-size: 10px
        }

    .modern-sale-page {
        padding: 8px
    }

        .modern-sale-page .box-body, .sale-compliance-panel {
            padding: 10px
        }

    .sale-compliance-panel__head {
        flex-direction: column
    }

    .modern-sale-page .form-control {
        font-size: 16px
    }
}

.sale-transport-card {
    margin-top: 14px;
    padding: 15px;
    border: 1px solid #dfe7f1;
    border-radius: 10px;
    background: #f8fafc;
}

.sale-transport-card__title {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 14px;
}

    .sale-transport-card__title > div {
        flex: 1;
    }

    .sale-transport-card__title h4 {
        margin: 0;
        color: #101a33;
        font-size: 14px;
        font-weight: 600;
    }

    .sale-transport-card__title p {
        margin: 3px 0 0;
        color: #64748b;
        font-size: 11px;
    }

.sale-transport-card__icon {
    display: inline-flex;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    border: 1px solid #bfdbfe;
    border-radius: 9px;
    background: #eff6ff;
    color: #2563eb;
}

    .sale-transport-card__icon svg {
        width: 20px;
        height: 20px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.sale-transport-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: 12px;
    row-gap: 2px;
}

    .sale-transport-grid .form-group {
        min-width: 0;
        margin-bottom: 10px;
    }

    .sale-transport-grid label {
        color: #334155;
        font-size: 11px;
        font-weight: 700;
    }

.sale-transport-grid__wide {
    grid-column: span 2;
}

.sale-transport-card__help {
    margin: 3px 0 0;
    padding-top: 10px;
    border-top: 1px solid #e2e8f0;
    color: #64748b;
    font-size: 11px;
    line-height: 1.5;
}

@media (max-width: 1200px) {
    .sale-transport-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .sale-transport-grid {
        grid-template-columns: 1fr;
    }

    .sale-transport-grid__wide {
        grid-column: auto;
    }

    .sale-transport-card__title {
        align-items: flex-start;
        flex-wrap: wrap;
    }
}

.compliance-help {
    margin: 5px 0 0;
    color: #64748b;
    font-size: 12px
}

.compliance-option-list {
    display: grid;
    gap: 12px;
    margin: 12px 0 18px;
    padding: 14px;
    border: 1px solid #dbeafe;
    border-radius: 9px;
    background: #f8fbff
}

    .compliance-option-list label {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0;
        color: #334155
    }

.compliance-readiness__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #eef2f7;
    color: #475569
}

    .compliance-readiness__row strong {
        color: #0b2b59
    }

        .compliance-readiness__row strong.is-ready {
            color: #059669
        }

.compliance-secure-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 16px 0 0;
    padding: 12px;
    border-radius: 8px;
    background: #fff7ed;
    color: #9a3412;
    font-size: 12px
}

    .compliance-secure-note svg {
        width: 18px;
        height: 18px;
        flex: 0 0 18px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7
    }

.compliance-api-card {
    margin-bottom: 16px;
    border-color: #fed7aa
}

.compliance-status.is-superadmin {
    background: #fff7ed;
    color: #ea580c
}

.compliance-workbench {
    margin-bottom: 16px
}

.compliance-toolbar, .compliance-row-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    flex-wrap: wrap
}

.compliance-scroll {
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 #eef2f7
}

    .compliance-scroll::-webkit-scrollbar {
        height: 7px;
        width: 7px
    }

    .compliance-scroll::-webkit-scrollbar-thumb {
        background: #94a3b8;
        border-radius: 8px
    }

.compliance-inline-action {
    display: flex;
    align-items: center;
    gap: 5px
}

    .compliance-inline-action .form-control {
        width: 125px;
        height: 28px
    }

.compliance-table td {
    vertical-align: middle !important
}

.compliance-table .text-right {
    text-align: right !important
}

@media(max-width:767px) {
    .compliance-card__header {
        flex-direction: column
    }

    .compliance-toolbar {
        width: 100%;
        justify-content: flex-start
    }
}

.eway-multivehicle-row td {
    padding: 0 12px 12px !important;
    background: #f8fafc
}

.eway-multivehicle-row details {
    padding: 10px;
    border: 1px solid #dfe7f1;
    border-radius: 8px;
    background: #fff
}

.eway-multivehicle-row summary {
    cursor: pointer;
    color: #0b2b59;
    font-weight: 700
}

.eway-group-grid {
    display: grid;
    gap: 12px;
    margin-top: 12px
}

.eway-group-form, .eway-vehicle-form {
    display: grid;
    grid-template-columns: repeat(4,minmax(120px,1fr));
    gap: 8px
}

.eway-group-card {
    padding: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px
}

    .eway-group-card > small {
        display: block;
        margin: 4px 0 10px;
        color: #64748b
    }

.eway-vehicle-list {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 8px
}

    .eway-vehicle-list span {
        padding: 4px 8px;
        border-radius: 999px;
        background: #ecfdf5;
        color: #047857
    }

    .eway-vehicle-list .is-cancelled {
        text-decoration: line-through;
        background: #fee2e2;
        color: #b91c1c
    }

@media(max-width:900px) {
    .eway-group-form, .eway-vehicle-form {
        grid-template-columns: 1fr 1fr
    }
}

@media(max-width:520px) {
    .eway-group-form, .eway-vehicle-form {
        grid-template-columns: 1fr
    }
}

/* Creative invoice workspace treatment shared by Add Sale and Edit Sale. */
.sale-workspace-banner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
    padding: 15px 18px;
    overflow: hidden;
    border: 1px solid #d9e5f3;
    border-radius: 14px;
    background: linear-gradient(115deg,#071f49 0,#0b3470 58%,#0d4b8d 100%);
    box-shadow: 0 10px 28px rgba(8,42,91,.16);
    color: #fff
}

    .sale-workspace-banner:after {
        position: absolute;
        right: -35px;
        top: -65px;
        width: 210px;
        height: 210px;
        border: 30px solid rgba(255,255,255,.055);
        border-radius: 50%;
        content: ""
    }

.sale-workspace-banner__icon {
    display: flex;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 13px;
    background: linear-gradient(135deg,#ff8a1f,#f97316);
    box-shadow: 0 8px 18px rgba(249,115,22,.3)
}

    .sale-workspace-banner__icon svg {
        width: 25px;
        height: 25px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round
    }

.sale-workspace-banner__copy {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column
}

    .sale-workspace-banner__copy span {
        color: #93c5fd;
        font-size: 10px;
        font-weight: 600;
        letter-spacing: .12em;
        text-transform: uppercase
    }

    .sale-workspace-banner__copy strong {
        margin-top: 2px;
        font-size: 17px;
        font-weight: 600
    }

    .sale-workspace-banner__copy small {
        margin-top: 3px;
        color: #cbdcf3;
        font-size: 11px
    }

.sale-workspace-banner__meta {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    gap: 5px
}

    .sale-workspace-banner__meta span {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 5px 10px;
        border: 1px solid rgba(255,255,255,.16);
        border-radius: 999px;
        background: rgba(255,255,255,.09);
        font-size: 11px;
        font-weight: 700
    }

    .sale-workspace-banner__meta i {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #34d399;
        box-shadow: 0 0 0 4px rgba(52,211,153,.13)
    }

    .sale-workspace-banner__meta small {
        color: #b9cbe4;
        font-size: 10px
    }

.sale-form-nav {
    border-color: #d8e4f1;
    background: #fff
}

    .sale-form-nav a {
        position: relative;
        justify-content: flex-start;
        border: 1px solid transparent;
        background: #f8fafc
    }

        .sale-form-nav a:before {
            width: 3px;
            height: 22px;
            border-radius: 4px;
            background: #2563eb;
            content: ""
        }

        .sale-form-nav a:nth-child(2):before {
            background: #f97316
        }

        .sale-form-nav a:nth-child(3):before {
            background: #7c3aed
        }

        .sale-form-nav a:nth-child(4):before {
            background: #10b981
        }

        .sale-form-nav a:nth-child(1) svg {
            color: #2563eb
        }

        .sale-form-nav a:nth-child(2) svg {
            color: #f97316
        }

        .sale-form-nav a:nth-child(3) svg {
            color: #7c3aed
        }

        .sale-form-nav a:nth-child(4) svg {
            color: #10b981
        }

        .sale-form-nav a:hover {
            border-color: #fed7aa;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(15,35,70,.07)
        }

.modern-sale-page .sale-section-card {
    border-color: #dbe5f0 !important;
    background: #fff
}

    .modern-sale-page .sale-section-card  .box-header {
        min-height: 45px;
        border-left: 0;
        background: linear-gradient(90deg,#f8fbff,#fff)
    }

        .modern-sale-page .sale-section-card  .box-header:before {
            display: inline-block;
            width: 8px;
            height: 8px;
            margin-right: 8px;
            border-radius: 3px;
            background: #f97316;
            box-shadow: 0 0 0 4px #fff0e6;
            content: ""
        }

.modern-sale-page .sale-section-card--overview  .box-header:before {
    background: #2563eb;
    box-shadow: 0 0 0 4px #eaf2ff
}

.modern-sale-page .sale-section-card--products  .box-header:before {
    background: #f97316;
    box-shadow: 0 0 0 4px #fff0e6
}

.modern-sale-page .sale-section-card--totals  .box-header:before {
    background: #7c3aed;
    box-shadow: 0 0 0 4px #f2eaff
}

.modern-sale-page .sale-section-card--payments  .box-header:before {
    background: #10b981;
    box-shadow: 0 0 0 4px #e8faf3
}

.modern-sale-page .sale-section-card--overview .box-body {
    background: linear-gradient(180deg,#fff,#fbfdff)
}

.modern-sale-page .sale-section-card--overview .form-group {
    padding: 0 2px
}

.modern-sale-page .form-control:focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(59,130,246,.1)
}

.modern-sale-page .sale-section-card--products {
    box-shadow: 0 8px 24px rgba(15,35,70,.07) !important
}

    .modern-sale-page .sale-section-card--products .direct-sell-product-table thead th {
        border-color: #dce5f0;
        background: linear-gradient(180deg,#f7faff,#eef4fb);
        color: #12213d
    }

    .modern-sale-page .sale-section-card--products .direct-sell-product-table tbody tr:hover {
        background: #fffaf5
    }

    .modern-sale-page .sale-section-card--products .direct-sell-product-table tbody td {
        border-color: #e4ebf3
    }

    .modern-sale-page .sale-section-card--products #search_product {
        border-color: #b9cbe0;
        background: #fbfdff
    }

        .modern-sale-page .sale-section-card--products #search_product:focus {
            background: #fff
        }

.modern-sale-page .sale-section-card--totals {
    border-color: #d7ccf5 !important
}

    .modern-sale-page .sale-section-card--totals .box-body {
        border-top: 1px solid #eee8fb;
        background: linear-gradient(135deg,#fff 35%,#faf7ff)
    }

.sale-compliance-panel {
    border-top: 3px solid #7c3aed !important
}

.sale-transport-card {
    background: linear-gradient(180deg,#fbfdff,#f8fbff)
}

.modern-sale-page .sale-section-card--payments {
    border-top: 3px solid #10b981 !important
}

.modern-sale-page form > .row:last-of-type > div {
    gap: 10px;
    border-color: #cbd8e7
}

.modern-sale-page form > .row:last-of-type .tw-dw-btn {
    min-height: 40px;
    padding-left: 18px;
    padding-right: 18px;
    border-radius: 8px;
    box-shadow: 0 5px 12px rgba(15,35,70,.1);
    font-weight: 700
}

.modern-sale-page form > .row:last-of-type .tw-dw-btn-primary {
    background: #2563eb
}

.modern-sale-page form > .row:last-of-type .tw-dw-btn-success {
    background: #06275a
}

@media(min-width:1200px) {
    .modern-sale-page .sale-section-card--overview .box-body {
        padding: 18px 20px
    }

    .modern-sale-page .sale-section-card--products .box-body {
        padding: 14px 16px 16px
    }

    .modern-sale-page .sale-section-card--products .table-responsive:first-of-type {
        max-height: 430px
    }
}

@media(max-width:767px) {
    .sale-workspace-banner {
        align-items: flex-start;
        padding: 13px
    }

    .sale-workspace-banner__meta {
        display: none
    }

    .sale-workspace-banner__copy strong {
        font-size: 14px
    }

    .sale-workspace-banner__copy small {
        line-height: 1.4
    }

    .sale-workspace-banner__icon {
        width: 42px;
        height: 42px;
        flex-basis: 42px
    }

    .sale-form-nav a:before {
        display: none
    }

    .sale-form-nav a {
        justify-content: center
    }

    .modern-sale-page form > .row:last-of-type > div {
        bottom: 4px
    }
}

/* Reference-matched compact sale form composition. */
.modern-sale-page {
    padding-top: 4px;
    background: #f7f9fc
}

    .modern-sale-page .sale-section-card {
        margin-bottom: 10px;
        border-radius: 7px !important;
        box-shadow: 0 1px 5px rgba(15,35,70,.055) !important
    }

    .modern-sale-page .sale-section-card--overview  .box-header {
        display: none
    }

    .modern-sale-page .sale-section-card--overview  .widget-slot {
        display: grid;
        grid-template-columns: repeat(12,minmax(0,1fr));
        gap: 0 10px;
        padding: 10px !important;
        background: linear-gradient(90deg,#fff 0,#fff 32.6%,#eef3fa 32.7%,#fff 32.85%,#fff 66.1%,#eef3fa 66.2%,#fff 66.35%,#fff 100%)
    }

.sale-overview-headings {
    display: grid;
    grid-column: 1/-1;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 10px;
    margin: -1px 0 7px
}

    .sale-overview-headings span {
        padding: 7px 9px;
        border-bottom: 1px solid #dfe7f2;
        color: #123b86;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: .025em;
        text-transform: uppercase
    }

.modern-sale-page .sale-section-card--overview  .widget-slot > .col-sm-4, .modern-sale-page .sale-section-card--overview  .widget-slot > .col-md-4 {
    grid-column: span 4;
    width: auto;
    padding-left: 7px;
    padding-right: 7px
}

.modern-sale-page .sale-section-card--overview  .widget-slot > .col-sm-3, .modern-sale-page .sale-section-card--overview  .widget-slot > .col-md-3 {
    grid-column: span 3;
    width: auto;
    padding-left: 7px;
    padding-right: 7px
}

.modern-sale-page .sale-section-card--overview  .widget-slot > .col-sm-6, .modern-sale-page .sale-section-card--overview  .widget-slot > .col-md-6 {
    grid-column: span 6;
    width: auto
}

.modern-sale-page .sale-section-card--overview  .widget-slot > .clearfix {
    display: none
}

.modern-sale-page .sale-section-card--overview .form-group {
    margin-bottom: 8px
}

.modern-sale-page .sale-section-card--overview small {
    font-size: 10px;
    line-height: 1.35
}

.modern-sale-page .form-control, .modern-sale-page .select2-container .select2-selection--single {
    height: 34px !important;
    min-height: 34px;
    border-radius: 5px
}

.modern-sale-page .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 32px
}

.modern-sale-page .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 32px
}

.modern-sale-page .sale-section-card .form-group > label {
    margin-bottom: 4px;
    font-size: 11px
}

.modern-sale-page .sale-section-card  .box-header {
    min-height: 37px;
    padding: 9px 12px
}

    .modern-sale-page .sale-section-card  .box-header .box-title {
        font-size: 12px;
        text-transform: uppercase
    }

.modern-sale-page .sale-section-card--products .box-body {
    padding: 8px 10px 10px
}

.modern-sale-page .sale-section-card--products #search_product {
    height: 36px !important
}

.modern-sale-page .sale-section-card--products .direct-sell-product-table thead th {
    padding: 7px 5px;
    font-size: 10px
}

.modern-sale-page .sale-section-card--products .direct-sell-product-table tbody td {
    padding: 5px;
    font-size: 11px
}

.modern-sale-page .sale-section-card--products .form-control {
    height: 30px !important;
    min-height: 30px
}

.sale-compliance-panel {
    margin: 10px 0;
    padding: 12px;
    border-radius: 7px !important
}

.sale-compliance-panel__head {
    margin-bottom: 10px
}

    .sale-compliance-panel__head h3 {
        font-size: 12px;
        text-transform: uppercase
    }

.sale-transport-card {
    padding: 10px
}

.sale-transport-grid {
    column-gap: 9px
}

    .sale-transport-grid .form-group {
        margin-bottom: 7px
    }

.modern-sale-page form > .row:last-of-type > div {
    padding: 8px 10px;
    border-radius: 7px
}

.modern-sale-page form > .row:last-of-type .tw-dw-btn {
    min-height: 36px;
    border-radius: 5px;
    box-shadow: none
}

@media(max-width:991px) {
    .modern-sale-page .sale-section-card--overview  .widget-slot {
        grid-template-columns: repeat(6,minmax(0,1fr));
        background: #fff
    }

    .sale-overview-headings {
        grid-column: 1/-1;
        grid-template-columns: repeat(3,minmax(150px,1fr));
        overflow-x: auto
    }

    .modern-sale-page .sale-section-card--overview  .widget-slot > .col-sm-4, .modern-sale-page .sale-section-card--overview  .widget-slot > .col-md-4 {
        grid-column: span 3
    }

    .modern-sale-page .sale-section-card--overview  .widget-slot > .col-sm-3, .modern-sale-page .sale-section-card--overview  .widget-slot > .col-md-3 {
        grid-column: span 3
    }
}

@media(max-width:600px) {
    .modern-sale-page .sale-section-card--overview  .widget-slot {
        display: block
    }

    .sale-overview-headings {
        display: none
    }

    .modern-sale-page .sale-section-card--overview  .widget-slot > [class*="col-"] {
        width: 100% !important;
        padding-left: 3px !important;
        padding-right: 3px !important
    }

    .modern-sale-page .sale-section-card--products .box-body {
        padding: 7px
    }

    .modern-sale-page .sale-section-card  .box-header {
        padding: 8px 10px
    }
}

/* Desktop reference grid: two detail panels + fulfilment, then products + totals. */
@media(min-width:1100px) {
    .modern-sale-page .sale-layout-main > .row:first-of-type > .col-md-12 {
        display: grid;
        grid-template-columns: repeat(12,minmax(0,1fr));
        gap: 10px;
        align-items: start
    }

        .modern-sale-page .sale-layout-main > .row:first-of-type > .col-md-12 > .sale-section-card--overview {
            grid-column: 1/span 8;
            grid-row: 1;
            margin: 0
        }

        .modern-sale-page .sale-layout-main > .row:first-of-type > .col-md-12 > .sale-section-card--other {
            grid-column: 9/span 4;
            grid-row: 1;
            margin: 0
        }

        .modern-sale-page .sale-layout-main > .row:first-of-type > .col-md-12 > .sale-section-card--products {
            grid-column: 1/span 10;
            grid-row: 2;
            margin: 0
        }

        .modern-sale-page .sale-layout-main > .row:first-of-type > .col-md-12 > .sale-section-card--totals {
            grid-column: 11/span 2;
            grid-row: 2;
            margin: 0;
            align-self: stretch
        }

            .modern-sale-page .sale-layout-main > .row:first-of-type > .col-md-12 > .sale-section-card--totals  .widget-slot {
                height: calc(100% - 37px);
                padding: 10px
            }

        .modern-sale-page .sale-layout-main > .row:first-of-type > .col-md-12 > .sale-section-card--other  .widget-slot {
            display: grid;
            grid-template-columns: repeat(2,minmax(0,1fr));
            gap: 0 9px;
            padding: 10px
        }

            .modern-sale-page .sale-layout-main > .row:first-of-type > .col-md-12 > .sale-section-card--other  .widget-slot > .col-md-4, .modern-sale-page .sale-layout-main > .row:first-of-type > .col-md-12 > .sale-section-card--other  .widget-slot > .col-md-12 {
                width: auto;
                padding: 0;
                float: none
            }

            .modern-sale-page .sale-layout-main > .row:first-of-type > .col-md-12 > .sale-section-card--other  .widget-slot > .col-md-4 {
                grid-column: span 1
            }

            .modern-sale-page .sale-layout-main > .row:first-of-type > .col-md-12 > .sale-section-card--other  .widget-slot > .col-md-12 {
                grid-column: 1/-1
            }

            .modern-sale-page .sale-layout-main > .row:first-of-type > .col-md-12 > .sale-section-card--other  .widget-slot > .clearfix {
                display: none
            }

    .modern-sale-page .sale-section-card--overview  .widget-slot {
        grid-template-columns: repeat(8,minmax(0,1fr));
        background: linear-gradient(90deg,#fff 0,#fff 49.55%,#e8eef7 49.7%,#fff 49.85%,#fff 100%)
    }

    .sale-overview-headings {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

    .modern-sale-page .sale-section-card--overview  .widget-slot > .col-sm-4, .modern-sale-page .sale-section-card--overview  .widget-slot > .col-md-4 {
        grid-column: span 2
    }

    .modern-sale-page .sale-section-card--overview  .widget-slot > .col-sm-3, .modern-sale-page .sale-section-card--overview  .widget-slot > .col-md-3 {
        grid-column: span 2
    }

    .modern-sale-page .sale-section-card--products .table-responsive:first-of-type {
        max-height: none
    }
}

.modern-sale-page .sale-section-card--other  .box-header:before {
    background: #06b6d4;
    box-shadow: 0 0 0 4px #e6fafd
}

.modern-sale-page .sale-section-card--other textarea.form-control {
    min-height: 54px;
    resize: vertical
}

.modern-sale-page .sale-section-card--totals .box-body .col-md-4, .modern-sale-page .sale-section-card--totals .box-body .col-md-8, .modern-sale-page .sale-section-card--totals .box-body .col-md-12 {
    width: 100%;
    margin-left: 0;
    padding-left: 4px;
    padding-right: 4px
}

.modern-sale-page .sale-section-card--totals .box-body .pull-right {
    float: none !important;
    text-align: right
}

.modern-sale-page .sale-section-card--totals .box-body table {
    font-size: 11px
}

.modern-sale-page .sale-section-card--totals #total_payable {
    display: block;
    margin-top: 7px;
    padding: 10px;
    border-radius: 4px;
    background: #07275d;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    text-align: right
}

@media(max-width:1099px) {
    .modern-sale-page .sale-layout-main > .row:first-of-type > .col-md-12 {
        display: block
    }

    .modern-sale-page .sale-section-card--other  .widget-slot {
        display: flex;
        flex-wrap: wrap
    }

        .modern-sale-page .sale-section-card--other  .widget-slot > .col-md-4 {
            width: 50%
        }
}

@media(max-width:600px) {
    .modern-sale-page .sale-section-card--other  .widget-slot > .col-md-4 {
        width: 100%
    }
}

.sale-reference-actions {
    justify-content: space-between !important;
    flex-wrap: wrap
}

    .sale-reference-actions .sale-cancel-action {
        margin-right: auto;
        min-width: 135px;
        border: 1px solid #b9c9e0;
        background: #fff;
        color: #102a63
    }

    .sale-reference-actions .sale-save-draft-action {
        border: 1px solid #a7e4c5;
        background: #f4fff8;
        color: #079455
    }

    .sale-reference-actions .sale-generate-einvoice {
        border-color: #7c3aed;
        background: linear-gradient(135deg,#6d28d9,#9333ea)
    }

    .sale-reference-actions .sale-generate-eway {
        border-color: #f97316;
        background: linear-gradient(135deg,#f97316,#ea580c)
    }

    .sale-reference-actions #save-and-print {
        min-width: 145px;
        background: #07275d !important
    }

    .sale-reference-actions svg {
        fill: none;
        stroke: currentColor;
        stroke-linecap: round;
        stroke-linejoin: round
    }

    .sale-reference-actions .tw-dw-btn {
        white-space: nowrap
    }

@media(max-width:900px) {
    .sale-reference-actions {
        display: grid !important;
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

        .sale-reference-actions .tw-dw-btn {
            width: 100%;
            margin: 0 !important;
            justify-content: center
        }
}

@media(max-width:480px) {
    .sale-reference-actions {
        grid-template-columns: 1fr
    }
}

/* Reference sale cards: shared with the transport-information visual system. */
.modern-sale-page .sale-reference-panel {
    border: 1px solid #d7e3f2 !important;
    background: linear-gradient(180deg,#fbfdff,#f8fbff) !important
}

    .modern-sale-page .sale-reference-panel  .box-header {
        display: none
    }

    .modern-sale-page .sale-reference-panel  .widget-slot {
        padding: 10px 12px
    }

.sale-reference-panel__head {
    display: flex;
    grid-column: 1/-1;
    align-items: flex-start;
    gap: 10px;
    margin: -1px 0 12px;
    padding: 0 0 10px;
    border-bottom: 1px solid #dbe5f0
}

.sale-reference-panel__icon {
    display: inline-flex;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    align-items: center;
    justify-content: center;
    border: 1px solid #bfdbfe;
    border-radius: 9px;
    background: #eff6ff;
    color: #2563eb
}

    .sale-reference-panel__icon svg {
        width: 20px;
        height: 20px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round
    }

.sale-reference-panel__head h4 {
    margin: 1px 0 2px;
    color: #101a33;
    font-size: 14px;
    font-weight: 600
}

.sale-reference-panel__head p {
    margin: 0;
    color: #64748b;
    font-size: 11px;
    line-height: 1.35
}

.sale-reference-panel__head--totals .sale-reference-panel__icon {
    border-color: #ddd6fe;
    background: #f5f3ff;
    color: #7c3aed
}

.sale-reference-panel__head--payment .sale-reference-panel__icon {
    border-color: #bbf7d0;
    background: #ecfdf5;
    color: #059669
}

.modern-sale-page .sale-reference-panel .form-group > label {
    color: #24344d;
    font-size: 11px;
    font-weight: 700
}

.modern-sale-page .sale-section-card--payments.sale-reference-panel  .widget-slot {
    background: linear-gradient(180deg,#fbfffd,#f7fcfa)
}

.modern-sale-page .sale-section-card--payments .payment_row {
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #dce8e2;
    border-radius: 9px;
    background: #fff
}

.modern-sale-page .sale-section-card--totals.sale-reference-panel  .widget-slot {
    border-top: 0;
    background: linear-gradient(180deg,#fdfcff,#faf8ff)
}

.compliance-document-options {
    align-items: stretch
}

.compliance-generation-option {
    display: flex;
    min-width: 0;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    gap: 12px
}

    .compliance-generation-option label {
        display: flex;
        align-items: center;
        gap: 7px;
        margin: 0;
        color: #334155;
        font-size: 12px
    }

.sale-compliance-generate {
    display: inline-flex;
    min-height: 36px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 7px 13px;
    border: 1px solid currentColor;
    border-radius: 8px;
    background: #fff;
    font-size: 12px;
    font-weight: 700
}

    .sale-compliance-generate svg {
        width: 17px;
        height: 17px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round
    }

.sale-compliance-generate--einvoice {
    color: #7c3aed
}

.sale-compliance-generate--eway {
    color: #ea580c
}

.sale-compliance-generate:hover {
    background: currentColor;
    color: #fff
}

    .sale-compliance-generate:hover svg {
        stroke: #fff
    }

@media(max-width:900px) {
    .compliance-document-options {
        flex-direction: column
    }

    .compliance-generation-option {
        width: 100%
    }
}

@media(max-width:640px) {
    .compliance-generation-option {
        align-items: stretch;
        flex-direction: column
    }

    .sale-compliance-generate {
        width: 100%
    }

    .sale-reference-panel__head p {
        font-size: 10px
    }
}

/* Hard bounds prevent legacy/global SVG rules from expanding sale-form icons. */
.modern-sale-page .sale-transport-card__icon {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    overflow: hidden !important
}

    .modern-sale-page .sale-transport-card__icon > svg, .modern-sale-page .sale-reference-panel__icon > svg {
        display: block !important;
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        max-width: 20px !important;
        min-height: 20px !important;
        max-height: 20px !important;
        fill: none !important;
        stroke: currentColor !important
    }

.modern-sale-page .sale-compliance-generate > svg {
    display: block !important;
    width: 17px !important;
    height: 17px !important;
    min-width: 17px !important;
    max-width: 17px !important;
    min-height: 17px !important;
    max-height: 17px !important;
    fill: none !important;
    stroke: currentColor !important
}

.sale-reference-panel__head--customer {
    grid-column: 1/-1
}

    .sale-reference-panel__head--customer .sale-reference-panel__icon {
        border-color: #bfdbfe;
        background: #eff6ff;
        color: #2563eb
    }

.sale-reference-panel__head--product .sale-reference-panel__icon {
    border-color: #fed7aa;
    background: #fff7ed;
    color: #f97316
}

.modern-sale-page .sale-section-card--overview  .widget-slot > .sale-reference-panel__head, .modern-sale-page .sale-section-card--products .sale-reference-panel__head {
    margin: 0 0 10px;
    padding: 0 0 10px
}

.modern-sale-page .sale-section-card--products .sale-reference-panel__head {
    position: sticky;
    left: 0;
    min-width: min(100%,600px)
}

/* Full-width sale workflow: every primary information card occupies its own row. */
@media(min-width:1100px) {
    .modern-sale-page .sale-layout-main > .row:first-of-type > .col-md-12 {
        display: grid;
        grid-template-columns: minmax(0,1fr);
        gap: 12px
    }

        .modern-sale-page .sale-layout-main > .row:first-of-type > .col-md-12 > .sale-section-card--overview, .modern-sale-page .sale-layout-main > .row:first-of-type > .col-md-12 > .sale-section-card--other, .modern-sale-page .sale-layout-main > .row:first-of-type > .col-md-12 > .sale-section-card--products, .modern-sale-page .sale-layout-main > .row:first-of-type > .col-md-12 > .sale-section-card--totals {
            grid-column: 1/-1;
            grid-row: auto;
            width: 100%;
            margin: 0
        }

            .modern-sale-page .sale-layout-main > .row:first-of-type > .col-md-12 > .sale-section-card--other  .widget-slot {
                grid-template-columns: repeat(4,minmax(0,1fr));
                gap: 0 12px;
                padding: 12px
            }

                .modern-sale-page .sale-layout-main > .row:first-of-type > .col-md-12 > .sale-section-card--other  .widget-slot > .col-md-4 {
                    grid-column: span 1
                }

                .modern-sale-page .sale-layout-main > .row:first-of-type > .col-md-12 > .sale-section-card--other  .widget-slot > .col-md-12 {
                    grid-column: 1/-1
                }

            .modern-sale-page .sale-layout-main > .row:first-of-type > .col-md-12 > .sale-section-card--totals  .widget-slot {
                display: flex;
                height: auto;
                align-items: flex-end;
                flex-wrap: wrap;
                gap: 0;
                padding: 12px
            }

    .modern-sale-page .sale-section-card--totals .box-body .col-md-4 {
        width: 25%;
        padding-left: 7px;
        padding-right: 7px
    }

    .modern-sale-page .sale-section-card--totals .box-body .col-md-8 {
        width: 50%;
        padding-left: 7px;
        padding-right: 7px
    }

    .modern-sale-page .sale-section-card--totals .box-body .col-md-12 {
        width: 100%;
        padding-left: 7px;
        padding-right: 7px
    }

    .modern-sale-page .sale-section-card--totals .sale-reference-panel__head {
        width: 100%;
        flex: 0 0 100%
    }

    .modern-sale-page .sale-section-card--totals #total_payable {
        min-width: 210px
    }
}

.modern-sale-page .sale-section-card--payments .sale-payment-actions {
    display: flex;
    width: 100%;
    clear: both;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 14px;
    padding: 14px 0 2px;
    border-top: 1px solid #dbe5e0
}

.modern-sale-page .sale-payment-actions .sale-cancel-action {
    margin-right: auto;
    min-width: 135px
}

.modern-sale-page .sale-payment-actions .sale-save-draft-action {
    border-color: #86efac;
    background: #f0fdf4;
    color: #059669
}

.modern-sale-page .sale-payment-actions #submit-sell {
    border-color: #f97316;
    background: #f97316
}

.modern-sale-page .sale-payment-actions #save-and-print {
    border-color: #0b2b59;
    background: #0b2b59 !important
}

.modern-sale-page .sale-payment-actions svg {
    display: block;
    width: 16px !important;
    height: 16px !important;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round
}

@media(max-width:700px) {
    .modern-sale-page .sale-section-card--payments .sale-payment-actions {
        display: grid;
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

    .modern-sale-page .sale-payment-actions .tw-dw-btn {
        width: 100%;
        margin: 0 !important;
        justify-content: center
    }
}

@media(max-width:430px) {
    .modern-sale-page .sale-section-card--payments .sale-payment-actions {
        grid-template-columns: 1fr
    }
}

/* Add/Edit sale footer actions: profile-style modern save bar. */
.sale-layout-workspace {
    display: grid;
    grid-template-columns: 220px minmax(0,1fr);
    align-items: start;
    gap: 18px
}

.sale-layout-main {
    min-width: 0
}

.modern-sale-page > .sale-location-switcher-row {
    display: flex;
    justify-content: flex-end;
    margin-right: 0;
    margin-left: 0
}

.modern-sale-page .sale-location-switcher {
    width: min(100%,390px);
    padding-right: 0;
    padding-left: 0;
    float: none
}

    .modern-sale-page .sale-location-switcher .form-group {
        margin-bottom: 10px
    }

    .modern-sale-page .sale-location-switcher .input-group {
        width: 100%
    }

.modern-sale-page .sale-layout-sections {
    position: sticky;
    top: 76px;
    z-index: 24;
    padding: 12px;
    border: 1px solid #dfe6ef;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 5px 18px rgba(30,51,79,.05)
}

.modern-sale-page .sale-layout-sections__title {
    display: block;
    padding: 7px 10px 10px;
    color: #8a97aa;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .9px;
    text-transform: uppercase
}

.sale-layout-sections__nav {
    display: flex;
    flex-direction: column;
    gap: 0
}

.modern-sale-page .sale-layout-section-link {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px;
    border-radius: 9px;
    color: #536176;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    transition: .18s
}

    .modern-sale-page .sale-layout-section-link:hover,
    .modern-sale-page .sale-layout-section-link:focus,
    .modern-sale-page .sale-layout-section-link.is-active {
        color: #ff6b17;
        background: #fff3eb;
        text-decoration: none
    }

    .modern-sale-page .sale-layout-section-link svg {
        width: 16px;
        height: 16px;
        flex: 0 0 16px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round
    }

.modern-sale-page .sale-layout-main > [id],
.modern-sale-page .sale-layout-main .sale-section-card[id] {
    scroll-margin-top: 88px
}

.modern-sale-page .sale-layout-main > .row {
    margin-right: 0;
    margin-left: 0
}

    .modern-sale-page .sale-layout-main > .row > .col-md-12 {
        padding-right: 0;
        padding-left: 0
    }

.modern-sale-page .sale-layout-main > .sale-modern-savebar {
    position: relative;
    z-index: 20;
    display: flex;
    width: 100%;
    max-width: 100%;
    clear: both;
    box-sizing: border-box;
    align-items: center;
    justify-content: space-between !important;
    gap: 14px;
    margin: 16px 0 20px;
    padding: 12px 14px;
    border: 1px solid #d7e3f2;
    border-radius: 10px;
    background: rgba(255,255,255,.97);
    box-shadow: 0 7px 22px rgba(15,35,70,.1);
    backdrop-filter: blur(10px)
}

.sale-modern-savebar__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    margin-left: auto
}

.modern-sale-page .sale-modern-action {
    display: inline-flex !important;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 15px;
    border: 1px solid transparent;
    border-radius: 7px;
    font-family: 'Inter',sans-serif !important;
    font-size: 12px;
    font-weight: 750;
    line-height: 1;
    white-space: nowrap;
    transition: transform .16s ease,box-shadow .16s ease,background-color .16s ease
}

    .modern-sale-page .sale-modern-action:hover {
        transform: translateY(-1px)
    }

    .modern-sale-page .sale-modern-action:focus {
        outline: 2px solid rgba(249,115,22,.2);
        outline-offset: 2px
    }

.modern-sale-page .sale-modern-action--cancel {
    min-width: 135px;
    margin-right: auto;
    border-color: #b9c9e0;
    background: #fff;
    color: #102a63
}

    .modern-sale-page .sale-modern-action--cancel:hover {
        border-color: #7f9bc4;
        background: #f8fbff
    }

.modern-sale-page .sale-modern-action--draft {
    border-color: #86efac;
    background: #f0fdf4;
    color: #059669
}

    .modern-sale-page .sale-modern-action--draft:hover {
        background: #dcfce7;
        box-shadow: 0 5px 12px rgba(5,150,105,.13)
    }

.modern-sale-page .sale-modern-action--new {
    border-color: #ff6b17;
    background: #ff6b17;
    color: #fff;
    box-shadow: 0 5px 12px rgba(255,107,23,.18)
}

    .modern-sale-page .sale-modern-action--new:hover {
        border-color: #ea580c;
        background: #ea580c;
        color: #fff
    }

.modern-sale-page .sale-modern-action--print {
    min-width: 145px;
    border-color: #07275d;
    background: #07275d !important;
    color: #fff;
    box-shadow: 0 5px 12px rgba(7,39,93,.18)
}

    .modern-sale-page .sale-modern-action--print:hover {
        border-color: #0b3470;
        background: #0b3470 !important;
        color: #fff
    }

.modern-sale-page .sale-modern-action > svg {
    display: block !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round
}

@media(max-width:700px) {
    .modern-sale-page .sale-layout-main > .sale-modern-savebar {
        position: static;
        display: flex;
        align-items: stretch;
        flex-direction: column
    }

    .sale-modern-savebar__actions {
        display: grid;
        width: 100%;
        grid-template-columns: repeat(3,minmax(0,1fr));
        margin-left: 0
    }

    .modern-sale-page .sale-modern-action--cancel {
        width: 100%;
        margin-right: 0
    }
}

@media(max-width:540px) {
    .sale-modern-savebar__actions {
        grid-template-columns: 1fr
    }

    .modern-sale-page .sale-modern-action {
        width: 100%
    }
}

@media(max-width:991px) {
    .sale-layout-workspace {
        grid-template-columns: 1fr;
        gap: 12px
    }

    .modern-sale-page .sale-layout-sections {
        position: static;
        display: flex;
        overflow-x: auto
    }

    .modern-sale-page .sale-layout-sections__title {
        display: none
    }

    .sale-layout-sections__nav {
        flex-direction: row
    }

    .modern-sale-page .sale-layout-section-link {
        flex: 0 0 auto;
        white-space: nowrap
    }
}

/* Modern user profile */
.modern-profile-page {
    padding: 18px 20px 32px;
    background: #f6f8fc;
    font-family: 'Inter',sans-serif !important
}

    .modern-profile-page * {
        box-sizing: border-box
    }

.modern-profile-hero {
    position: relative;
    display: flex;
    min-height: 190px;
    align-items: center;
    gap: 24px;
    margin-bottom: 18px;
    padding: 28px 34px;
    overflow: hidden;
    border-radius: 16px;
    background: linear-gradient(120deg,#071f49 0,#0b3470 60%,#f97316 160%);
    box-shadow: 0 14px 32px rgba(7,31,73,.18);
    color: #fff
}

.modern-profile-hero__pattern {
    position: absolute;
    right: -90px;
    top: -160px;
    width: 420px;
    height: 420px;
    border: 55px solid rgba(255,255,255,.055);
    border-radius: 50%
}

.modern-profile-avatar {
    position: relative;
    z-index: 1;
    display: flex;
    width: 112px;
    height: 112px;
    flex: 0 0 112px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 5px solid rgba(255,255,255,.22);
    border-radius: 28px;
    background: linear-gradient(135deg,#fb923c,#f97316);
    box-shadow: 0 12px 25px rgba(0,0,0,.2);
    font-size: 38px;
    font-weight: 600
}

    .modern-profile-avatar img, .modern-profile-avatar__image {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
        border: 0 !important;
        border-radius: 22px !important
    }

.modern-profile-hero__copy {
    position: relative;
    z-index: 1;
    min-width: 0
}

.modern-profile-eyebrow {
    color: #93c5fd;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase
}

.modern-profile-hero h1 {
    margin: 5px 0 6px;
    font-size: 28px;
    font-weight: 600
}

.modern-profile-hero p {
    max-width: 660px;
    margin: 0;
    color: #cbdcf3;
    font-size: 12px
}

.modern-profile-meta {
    display: flex;
    gap: 9px;
    margin-top: 17px;
    flex-wrap: wrap
}

    .modern-profile-meta span {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 6px 10px;
        border: 1px solid rgba(255,255,255,.14);
        border-radius: 999px;
        background: rgba(255,255,255,.08);
        font-size: 11px
    }

    .modern-profile-meta svg {
        width: 15px;
        height: 15px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round
    }

.modern-profile-grid {
    display: grid;
    grid-template-columns: 280px minmax(0,1fr);
    gap: 16px;
    align-items: start
}

.modern-profile-sidebar, .modern-profile-main {
    display: grid;
    gap: 16px
}

.modern-profile-card {
    padding: 18px;
    border: 1px solid #dde6f1;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(15,35,70,.055)
}

.modern-profile-card__head {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-bottom: 17px;
    padding-bottom: 13px;
    border-bottom: 1px solid #e5ebf3
}

    .modern-profile-card__head > span {
        display: inline-flex;
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
        align-items: center;
        justify-content: center;
        border: 1px solid #bfdbfe;
        border-radius: 10px;
        background: #eff6ff;
        color: #2563eb
    }

    .modern-profile-card__head svg, .modern-profile-upload svg, .modern-profile-security-link svg, .modern-profile-save svg {
        width: 19px;
        height: 19px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round
    }

    .modern-profile-card__head h2 {
        margin: 1px 0 3px;
        color: #101a33;
        font-size: 14px;
        font-weight: 600
    }

    .modern-profile-card__head p {
        margin: 0;
        color: #64748b;
        font-size: 11px;
        line-height: 1.4
    }

.modern-profile-photo-preview {
    display: flex;
    width: 130px;
    height: 130px;
    align-items: center;
    justify-content: center;
    margin: 7px auto 16px;
    overflow: hidden;
    border: 5px solid #f1f5f9;
    border-radius: 32px;
    background: linear-gradient(135deg,#0b3470,#2563eb);
    color: #fff;
    font-size: 36px;
    font-weight: 600
}

    .modern-profile-photo-preview img, .modern-profile-photo-preview__image {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
        border: 0 !important;
        border-radius: 27px !important
    }

.modern-profile-upload {
    display: flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    cursor: pointer;
    border: 1px solid #bfd0e6;
    border-radius: 8px;
    background: #f8fbff;
    color: #0b3470;
    font-size: 12px;
    font-weight: 700
}

.modern-profile-file {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0
}

.modern-profile-photo-card small {
    display: block;
    margin-top: 8px;
    color: #94a3b8;
    font-size: 10px;
    text-align: center
}

.modern-profile-security-card .modern-profile-card__head > span {
    border-color: #fed7aa;
    background: #fff7ed;
    color: #f97316
}

.modern-profile-security-link {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    color: #334155;
    font-size: 12px;
    font-weight: 700
}

.modern-profile-fields {
    display: grid;
    gap: 12px
}

.modern-profile-fields--identity {
    grid-template-columns: 110px repeat(2,minmax(0,1fr))
}

    .modern-profile-fields--identity .form-group:nth-child(4), .modern-profile-fields--identity .form-group:nth-child(5) {
        grid-column: span 1
    }

.modern-profile-fields--password {
    grid-template-columns: repeat(3,minmax(0,1fr))
}

.modern-profile-page .form-group {
    margin-bottom: 0
}

    .modern-profile-page .form-group > label {
        margin-bottom: 5px;
        color: #24344d;
        font-size: 11px;
        font-weight: 700
    }

.modern-profile-page .form-control, .modern-profile-page .select2-container .select2-selection--single {
    height: 38px !important;
    border: 1px solid #cfd9e7;
    border-radius: 7px;
    box-shadow: none
}

.modern-profile-page textarea.form-control {
    height: auto !important;
    min-height: 76px
}

.modern-profile-page .form-control:focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(59,130,246,.1)
}

.modern-profile-more-info .modern-profile-card__head > span {
    border-color: #ddd6fe;
    background: #f5f3ff;
    color: #7c3aed
}

.modern-profile-legacy-fields > .row {
    margin: 0 -7px
}

.modern-profile-legacy-fields .form-group {
    margin-bottom: 12px;
    padding-left: 7px;
    padding-right: 7px
}

.modern-profile-legacy-fields hr {
    margin: 7px 0 14px;
    border-color: #e5ebf3
}

.modern-profile-legacy-fields h4 {
    color: #101a33;
    font-size: 13px;
    font-weight: 600
}

.modern-profile-savebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 16px;
    border: 1px solid #d7e3f2;
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 5px 16px rgba(15,35,70,.07)
}

    .modern-profile-savebar > span {
        color: #64748b;
        font-size: 11px
    }

.modern-profile-save {
    display: inline-flex;
    min-height: 39px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 17px;
    border: 1px solid #f97316;
    border-radius: 8px;
    background: #f97316;
    color: #fff;
    font-size: 12px;
    font-weight: 600
}

.modern-profile-password-panel {
    margin: 0
}

    .modern-profile-password-panel .modern-profile-card__head > span {
        border-color: #fecaca;
        background: #fff1f2;
        color: #ef4444
    }

.modern-profile-password-actions {
    margin-top: 15px;
    text-align: right
}

@media(max-width:1100px) {
    .modern-profile-grid {
        grid-template-columns: 240px minmax(0,1fr)
    }

    .modern-profile-fields--identity {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

        .modern-profile-fields--identity .form-group:first-child {
            grid-column: span 2
        }
}

@media(max-width:850px) {
    .modern-profile-grid {
        grid-template-columns: 1fr
    }

    .modern-profile-sidebar {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

    .modern-profile-fields--password {
        grid-template-columns: 1fr
    }
}

@media(max-width:600px) {
    .modern-profile-page {
        padding: 12px
    }

    .modern-profile-hero {
        align-items: flex-start;
        flex-direction: column;
        padding: 22px
    }

    .modern-profile-avatar {
        width: 82px;
        height: 82px;
        flex-basis: 82px;
        border-radius: 22px;
        font-size: 28px
    }

    .modern-profile-hero h1 {
        font-size: 22px
    }

    .modern-profile-sidebar {
        grid-template-columns: 1fr
    }

    .modern-profile-fields--identity {
        grid-template-columns: 1fr
    }

        .modern-profile-fields--identity .form-group:first-child {
            grid-column: auto
        }

    .modern-profile-savebar {
        align-items: stretch;
        flex-direction: column
    }

    .modern-profile-save {
        width: 100%
    }
}

.modern-profile-password-modal {
    font-family: 'Inter',sans-serif !important
}

    .modern-profile-password-modal .modal-dialog {
        width: min(520px,calc(100% - 28px));
        margin: 8vh auto
    }

    .modern-profile-password-modal .modal-content {
        overflow: hidden;
        border: 0;
        border-radius: 14px;
        box-shadow: 0 24px 70px rgba(15,23,42,.28)
    }

    .modern-profile-password-modal .modal-header {
        position: relative;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        padding: 20px 22px;
        border-bottom: 1px solid #e5eaf1;
        background: #fff
    }

.modern-profile-password-modal__heading {
    display: flex;
    align-items: flex-start;
    gap: 11px
}

    .modern-profile-password-modal__heading > span {
        display: inline-flex;
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
        align-items: center;
        justify-content: center;
        border: 1px solid #fed7aa;
        border-radius: 10px;
        background: #fff7ed;
        color: #f97316
    }

.modern-profile-password-modal svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round
}

.modern-profile-password-modal__heading h3 {
    margin: 1px 0 4px;
    color: #101a33;
    font-size: 16px;
    font-weight: 600
}

.modern-profile-password-modal__heading p {
    margin: 0;
    color: #64748b;
    font-size: 11px
}

.modern-profile-password-modal .modal-header .close {
    display: inline-flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    margin: 0;
    border: 0;
    border-radius: 7px;
    background: #f8fafc;
    color: #64748b;
    opacity: 1
}

    .modern-profile-password-modal .modal-header .close svg {
        width: 17px;
        height: 17px
    }

.modern-profile-password-modal .modal-body {
    padding: 20px 22px;
    background: #fbfcfe
}

.modern-profile-password-tip {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-bottom: 16px;
    padding: 11px 12px;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    background: #eff6ff;
    color: #31527c;
    font-size: 11px;
    line-height: 1.45
}

    .modern-profile-password-tip svg {
        width: 18px;
        height: 18px;
        flex: 0 0 18px;
        color: #2563eb
    }

.modern-profile-modal-fields {
    display: grid;
    gap: 13px
}

    .modern-profile-modal-fields .form-group {
        margin: 0
    }

    .modern-profile-modal-fields label {
        margin-bottom: 5px;
        color: #24344d;
        font-size: 11px;
        font-weight: 700
    }

    .modern-profile-modal-fields .form-control {
        height: 40px;
        border: 1px solid #cfd9e7;
        border-radius: 7px;
        box-shadow: none
    }

        .modern-profile-modal-fields .form-control:focus {
            border-color: #60a5fa;
            box-shadow: 0 0 0 3px rgba(59,130,246,.1)
        }

.modern-profile-password-modal .modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    padding: 14px 22px;
    border-top: 1px solid #e5eaf1;
    background: #fff
}

.modern-profile-modal-cancel {
    min-height: 38px;
    padding: 8px 16px;
    border: 1px solid #cbd5e1;
    border-radius: 7px;
    background: #fff;
    color: #475569;
    font-size: 12px;
    font-weight: 700
}

.modern-profile-password-modal .modern-profile-save {
    min-height: 38px
}

@media(max-width:560px) {
    .modern-profile-password-modal .modal-dialog {
        margin: 18px auto
    }

    .modern-profile-password-modal .modal-header, .modern-profile-password-modal .modal-body, .modern-profile-password-modal .modal-footer {
        padding-left: 16px;
        padding-right: 16px
    }

    .modern-profile-password-modal .modal-footer {
        align-items: stretch;
        flex-direction: column-reverse
    }

        .modern-profile-password-modal .modal-footer button {
            width: 100%
        }
}

.modern-profile-page .modern-profile-security-link {
    justify-content: flex-start !important;
    gap: 8px;
    text-align: left
}

    .modern-profile-page .modern-profile-security-link svg {
        flex: 0 0 18px
    }

.modern-profile-password-modal .modal-dialog {
    width: min(620px,calc(100% - 28px)) !important
}

.modern-profile-password-modal .modal-header {
    padding: 18px 22px !important
}

.modern-profile-password-modal .modal-body {
    padding: 20px 22px !important
}

.modern-profile-password-modal .modern-profile-password-tip {
    margin-bottom: 18px
}

.modern-profile-password-modal .modern-profile-modal-fields {
    gap: 15px
}

    .modern-profile-password-modal .modern-profile-modal-fields .form-control {
        height: 41px !important
    }

.modern-profile-password-modal .modal-footer {
    padding: 14px 22px !important
}

    .modern-profile-password-modal .modal-footer .modern-profile-save {
        border-color: #f97316 !important;
        background: #f97316 !important;
        color: #fff !important
    }

.modern-profile-password-modal .modern-profile-modal-cancel {
    min-width: 78px
}

.modern-profile-password-modal .modern-profile-save {
    min-width: 138px
}

.modern-profile-password-modal .modal-header .modern-profile-password-modal__heading {
    width: auto !important;
    margin: 0 auto 0 0 !important;
    padding: 0 !important;
    justify-content: flex-start !important;
    text-align: left !important;
    transform: none !important
}

    .modern-profile-password-modal .modal-header .modern-profile-password-modal__heading > div {
        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important
    }

.modern-profile-password-modal .modal-header .close {
    margin-left: auto !important
}

.modern-profile-fields--identity .form-group:nth-child(4) {
    grid-column: span 2
}

.modern-profile-fields--identity .form-group:nth-child(5) {
    grid-column: span 1
}

@media(max-width:1100px) {
    .modern-profile-fields--identity .form-group:nth-child(4), .modern-profile-fields--identity .form-group:nth-child(5) {
        grid-column: span 1
    }
}

@media(max-width:600px) {
    .modern-profile-fields--identity .form-group:nth-child(4), .modern-profile-fields--identity .form-group:nth-child(5) {
        grid-column: auto
    }
}
/* Modern Items Report — aligned with the Product Sell Report visual system. */
.items-report-modern,
.items-report-modern * {
    font-family: 'Inter',sans-serif !important;
    box-sizing: border-box;
}

.items-report-modern {
    width: 100%;
    max-width: none;
    padding-bottom: 30px;
    color: #101828;
}

.ir-header {
    display: block;
}

.ir-filter-card {
    padding: 16px;
}

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

    .ir-filter-grid > div {
        min-width: 0;
    }

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

    .ir-filter-grid .form-control,
    .ir-filter-grid .select2-selection {
        min-height: 38px;
        border: 1px solid #cfdae8 !important;
        border-radius: 7px !important;
        background: #fff;
        box-shadow: none !important;
    }

    .ir-filter-grid .select2-selection__rendered {
        line-height: 36px !important;
        padding-left: 12px !important;
        color: #24324a !important;
    }

    .ir-filter-grid .select2-selection__arrow {
        height: 36px !important;
    }

.ir-mfg-filter {
    align-self: stretch;
}

.ir-check-line {
    display: flex !important;
    align-items: center;
    min-height: 38px;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid #cfdae8;
    border-radius: 7px;
    background: #fff;
    font-weight: 500 !important;
}

.ir-filter-actions {
    grid-column: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
}

    .ir-filter-actions .gstr1-btn {
        width: 100%;
        min-width: 0;
        height: 38px;
        justify-content: center;
    }

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

    .ir-kpi-grid .gstr1-kpi {
        min-width: 0;
        min-height: 96px;
    }

        .ir-kpi-grid .gstr1-kpi strong {
            overflow: hidden;
            font-size: 18px;
            text-overflow: ellipsis;
        }

    .ir-kpi-grid .gstr1-kpi {
        padding: 13px 11px;
    }

    .ir-kpi-grid .gstr1-kpi-icon {
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
    }

.ir-main-card {
    overflow: hidden;
    border: 1px solid #dce4ee;
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 3px 12px rgba(16,24,40,.05);
}

    .ir-main-card .gstr1-tabs {
        overflow-x: auto;
        scrollbar-width: thin;
    }

    .ir-main-card .gstr1-table-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        min-height: 58px;
        padding: 11px 16px;
    }

        .ir-main-card .gstr1-table-title h3 {
            display: flex;
            align-items: center;
            gap: 8px;
            margin: 0;
            color: #172554;
            font-size: 13px;
            font-weight: 600;
        }

            .ir-main-card .gstr1-table-title h3 svg {
                width: 18px;
                height: 18px;
                color: #1267e8;
                fill: none;
                stroke: currentColor;
                stroke-width: 1.8;
                stroke-linecap: round;
                stroke-linejoin: round;
            }

.ir-table-tools {
    display: flex;
    align-items: center;
    gap: 9px;
}

.ir-search-wrap {
    position: relative;
    width: 230px;
}

    .ir-search-wrap svg {
        position: absolute;
        z-index: 2;
        top: 50%;
        left: 11px;
        width: 16px;
        height: 16px;
        color: #718096;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        transform: translateY(-50%);
    }

    .ir-search-wrap input {
        width: 100%;
        height: 36px;
        padding-left: 34px;
        border: 1px solid #cfdae8;
        border-radius: 7px;
        box-shadow: none;
    }

.ir-table-responsive {
    width: 100%;
    overflow-x: auto;
    scrollbar-color: #94a3b8 #edf2f7;
    scrollbar-width: thin;
}

    .ir-table-responsive::-webkit-scrollbar {
        height: 7px;
    }

    .ir-table-responsive::-webkit-scrollbar-track {
        background: #edf2f7;
    }

    .ir-table-responsive::-webkit-scrollbar-thumb {
        border-radius: 20px;
        background: #94a3b8;
    }

.items-report-modern #items_report_table {
    width: 100% !important;
    min-width: 1640px;
    margin: 0 !important;
}

    .items-report-modern #items_report_table th,
    .items-report-modern #items_report_table td {
        padding: 10px 9px !important;
        border-color: #e5eaf1 !important;
        font-size: 12px !important;
        line-height: 1.35;
        vertical-align: middle;
        white-space: nowrap;
    }

    .items-report-modern #items_report_table thead th {
        color: #172033;
        background: #f8fafc;
        font-weight: 750;
    }

    .items-report-modern #items_report_table tbody tr:nth-child(even) {
        background: #fbfcfe;
    }

    .items-report-modern #items_report_table tbody tr:hover {
        background: #f1f6ff;
    }

    .items-report-modern #items_report_table th:nth-child(13),
    .items-report-modern #items_report_table td:nth-child(13) {
        text-align: center;
    }

    .items-report-modern #items_report_table th:nth-child(8),
    .items-report-modern #items_report_table td:nth-child(8),
    .items-report-modern #items_report_table th:nth-child(14),
    .items-report-modern #items_report_table td:nth-child(14),
    .items-report-modern #items_report_table th:nth-child(15),
    .items-report-modern #items_report_table td:nth-child(15) {
        text-align: right;
    }

    .items-report-modern #items_report_table tfoot td {
        color: #075ce5;
        background: #f6f9ff;
        font-weight: 600;
    }

.items-report-modern .dataTables_wrapper > .row:first-child,
.items-report-modern .dt-buttons,
.items-report-modern #items_report_table_filter {
    display: none !important;
}

.items-report-modern .dataTables_wrapper > .row:last-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: 12px 14px;
    border-top: 1px solid #e5eaf1;
}

.items-report-modern .dataTables_info {
    padding-top: 7px !important;
    padding-left: 15px;
    color: #64748b;
    font-size: 12px;
}

.items-report-modern .dataTables_paginate {
    padding: 0 !important;
}

.items-report-modern .dataTables_processing {
    top: 90px;
    border: 1px solid #dce4ee;
    border-radius: 8px;
    background: rgba(255,255,255,.96);
    color: #075ce5;
    box-shadow: 0 6px 18px rgba(15,23,42,.1);
}

.ir-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 14px;
    padding: 15px 17px;
    border: 1px solid #dce4ee;
    border-radius: 10px;
    background: #fff;
    color: #344054;
    font-size: 12px;
    line-height: 1.65;
    box-shadow: 0 2px 8px rgba(16,24,40,.035);
}

    .ir-note > svg {
        width: 18px;
        height: 18px;
        flex: 0 0 18px;
        margin-top: 1px;
        color: #1267e8;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
    }

    .ir-note strong {
        color: #172554;
    }

    .ir-note b {
        color: #075ce5;
    }

@media (min-width:1400px) {
    .ir-filter-grid {
        grid-template-columns: repeat(6,minmax(0,1fr));
    }

    .ir-filter-actions {
        grid-column: auto;
    }
}

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

    .ir-filter-actions {
        grid-column: span 1;
    }

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

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

@media (max-width:767px) {
    .items-report-modern {
        padding-left: 8px;
        padding-right: 8px;
    }

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

    .ir-filter-actions {
        grid-column: 1;
    }

    .ir-main-card .gstr1-table-title, .ir-table-tools {
        align-items: stretch;
        flex-direction: column;
    }

        .ir-search-wrap, .ir-table-tools .gstr1-action {
            width: 100%;
        }

        .ir-table-tools .gstr1-action {
            justify-content: center;
        }
}
/* Trending Products Report — Product Sell Report visual language. */
.trending-products-modern, .trending-products-modern * {
    font-family: 'Inter',sans-serif !important;
    box-sizing: border-box
}

.trending-products-modern {
    width: 100%;
    max-width: none;
    padding-bottom: 30px;
    color: #111a35
}

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

    .tp-filter-grid > div {
        min-width: 0
    }

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

    .tp-filter-grid .form-control, .tp-filter-grid .select2-selection {
        height: 38px !important;
        min-height: 38px !important;
        border: 1px solid #d2ddec !important;
        border-radius: 7px !important;
        background: #fff !important;
        box-shadow: none !important
    }

    .tp-filter-grid .select2-selection__rendered {
        line-height: 36px !important;
        padding-left: 12px !important;
        color: #172554 !important
    }

    .tp-filter-grid .select2-selection__arrow {
        height: 36px !important
    }

.tp-filter-actions {
    grid-column: 5/7;
    display: grid;
    grid-template-columns: 118px 118px;
    gap: 14px;
    width: max-content;
    justify-self: end;
    justify-content: end
}

    .tp-filter-actions .gstr1-btn {
        width: 118px;
        min-width: 118px;
        height: 34px;
        justify-content: center
    }

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

    .tp-kpi-grid .gstr1-kpi {
        min-width: 0;
        min-height: 96px;
        padding: 13px 11px
    }

    .tp-kpi-grid .gstr1-kpi-icon {
        width: 44px;
        height: 44px;
        flex: 0 0 44px
    }

    .tp-kpi-grid .gstr1-kpi strong {
        overflow: hidden;
        font-size: 17px;
        text-overflow: ellipsis
    }

    .tp-kpi-grid .gstr1-kpi em {
        font-size: 10px
    }

        .tp-kpi-grid .gstr1-kpi em .is-negative {
            color: #e53935
        }

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

.tp-chart-card {
    min-width: 0;
    min-height: 270px;
    padding: 15px;
    border: 1px solid #dce5f0;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 3px 12px rgba(16,24,40,.045)
}

    .tp-chart-card h3 {
        margin: 0 0 18px;
        color: #0a2b72;
        font-size: 12px;
        font-weight: 600
    }

.tp-bars > div, .tp-growth-bars > div {
    display: grid;
    grid-template-columns: minmax(110px,1.2fr) minmax(80px,1fr) 50px;
    align-items: center;
    gap: 8px;
    margin: 9px 0;
    color: #172554;
    font-size: 10px
}

.tp-bars span, .tp-growth-bars span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.tp-bars i, .tp-growth-bars i, .tp-compare i {
    position: relative;
    display: block;
    height: 9px;
    border-radius: 2px;
    background: #eef3fb;
    overflow: hidden
}

    .tp-bars i b {
        display: block;
        height: 100%;
        background: linear-gradient(90deg,#215ac7,#587bd4)
    }

    .tp-growth-bars i b {
        display: block;
        height: 100%;
        background: linear-gradient(90deg,#078d49,#13b866)
    }

.tp-bars strong, .tp-growth-bars strong {
    text-align: right;
    font-size: 10px
}

.tp-contribution {
    display: grid;
    grid-template-columns: 140px 1fr;
    align-items: center;
    gap: 12px
}

.tp-donut {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 135px;
    height: 135px;
    border-radius: 50%;
    background: radial-gradient(circle at center,#fff 0 48%,transparent 49%),conic-gradient(#225dc9 0 calc(var(--tp-a)*1%),#24a148 calc(var(--tp-a)*1%) 55%,#f97316 55% 70%,#7c3aed 70% 83%,#64748b 83% 100%)
}

    .tp-donut strong {
        font-size: 12px
    }

    .tp-donut small {
        margin-top: 3px;
        color: #64748b;
        font-size: 9px
    }

.tp-contribution ul {
    margin: 0;
    padding: 0;
    list-style: none
}

.tp-contribution li {
    display: grid;
    grid-template-columns: 8px 1fr auto;
    gap: 7px;
    align-items: center;
    margin: 9px 0;
    color: #25324d;
    font-size: 9px
}

    .tp-contribution li i {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #225dc9
    }

    .tp-contribution li:nth-child(2) i {
        background: #19a44c
    }

    .tp-contribution li:nth-child(3) i {
        background: #f97316
    }

    .tp-contribution li:nth-child(4) i {
        background: #7c3aed
    }

    .tp-contribution li:nth-child(5) i {
        background: #64748b
    }

    .tp-contribution li span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

.tp-compare > div {
    margin: 10px 0
}

    .tp-compare > div > span {
        display: block;
        overflow: hidden;
        margin-bottom: 4px;
        color: #172554;
        font-size: 9px;
        text-overflow: ellipsis;
        white-space: nowrap
    }

.tp-compare i {
    height: 13px;
    overflow: visible;
    background: #f3f6fb
}

    .tp-compare i b, .tp-compare i em {
        position: absolute;
        left: 0;
        display: block;
        height: 5px;
        border-radius: 3px
    }

    .tp-compare i b {
        top: 0;
        background: #36afd5
    }

    .tp-compare i em {
        bottom: 0;
        background: #f97316
    }

.tp-compare p {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 18px;
    color: #526078;
    font-size: 9px
}

    .tp-compare p b, .tp-compare p em {
        width: 11px;
        height: 5px;
        background: #36afd5
    }

    .tp-compare p em {
        background: #f97316
    }

.tp-main {
    overflow: hidden;
    border: 1px solid #dce5f0;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 3px 12px rgba(16,24,40,.045)
}

    .tp-main .gstr1-table-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
        min-height: 56px;
        padding: 11px 15px
    }

        .tp-main .gstr1-table-title h3 {
            margin: 0;
            color: #172554;
            font-size: 13px;
            font-weight: 600
        }

.tp-table-tools {
    display: flex;
    align-items: center;
    gap: 9px
}

.tp-table-wrap {
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 #edf2f7
}

    .tp-table-wrap::-webkit-scrollbar {
        height: 7px
    }

    .tp-table-wrap::-webkit-scrollbar-thumb {
        border-radius: 9px;
        background: #94a3b8
    }

.trending-products-modern #tp-table {
    width: 100% !important;
    min-width: 1700px;
    margin: 0 !important
}

    .trending-products-modern #tp-table th, .trending-products-modern #tp-table td {
        padding: 9px 8px !important;
        border-color: #e6ebf2 !important;
        color: #172554;
        font-size: 12px !important;
        line-height: 1.35;
        white-space: nowrap
    }

    .trending-products-modern #tp-table thead th {
        background: #f8fafc;
        text-align: center;
        font-weight: 600
    }

    .trending-products-modern #tp-table tbody tr:nth-child(even) {
        background: #fbfcfe
    }

    .trending-products-modern #tp-table tbody tr:hover {
        background: #f2f6ff
    }

    .trending-products-modern #tp-table td:nth-child(n+7):nth-child(-n+17) {
        text-align: right
    }

.tp-trend {
    text-align: center !important;
    color: #0ca653 !important;
    font-size: 16px !important;
    font-weight: 900
}

    .tp-trend.down {
        color: #e53935 !important
    }

.tp-page-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 15px;
    border-top: 1px solid #e6ebf2;
    color: #64748b;
    font-size: 11px
}

    .tp-page-row .dataTables_info {
        padding: 7px 0 0 !important
    }

    .tp-page-row .dataTables_paginate {
        padding: 0 !important
    }

@media(max-width:1350px) {
    .tp-filter-grid {
        grid-template-columns: repeat(4,minmax(0,1fr))
    }

    .tp-filter-actions {
        grid-column: 3/5
    }

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

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

@media(max-width:767px) {
    .trending-products-modern {
        padding-left: 8px;
        padding-right: 8px
    }

    .tp-filter-grid, .tp-kpi-grid, .tp-chart-grid {
        grid-template-columns: 1fr
    }

    .tp-filter-actions {
        grid-column: 1;
        width: 100%;
        grid-template-columns: 1fr
    }

        .tp-filter-actions .gstr1-btn {
            width: 100%;
            min-width: 0
        }

    .tp-main .gstr1-table-title, .tp-table-tools {
        align-items: stretch;
        flex-direction: column
    }

        .tp-table-tools .ir-search-wrap, .tp-table-tools .gstr1-action {
            width: 100%
        }

        .tp-table-tools .gstr1-action {
            justify-content: center
        }

    .tp-page-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px
    }
}
/* Modern Superadmin dashboard */
.superadmin-dashboard {
    font-family: 'Inter',sans-serif !important;
    padding-top: 15px !important;
    background: #f8fafc
}

.sa-dashboard-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 164px;
    margin-bottom: 22px;
    padding: 30px 34px;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(120deg,#071f42 0%,#0d3975 72%,#1557a0 100%);
    border-radius: 18px;
    box-shadow: 0 16px 36px rgba(7,31,66,.16)
}

    .sa-dashboard-hero:before, .sa-dashboard-hero:after {
        position: absolute;
        content: "";
        border: 1px solid rgba(255,255,255,.09);
        border-radius: 50%
    }

    .sa-dashboard-hero:before {
        width: 260px;
        height: 260px;
        right: 75px;
        top: -150px
    }

    .sa-dashboard-hero:after {
        width: 190px;
        height: 190px;
        right: -45px;
        bottom: -105px
    }

.sa-dashboard-eyebrow {
    display: block;
    margin-bottom: 8px;
    color: #8dbdff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.7px
}

.sa-dashboard-hero h1 {
    margin: 0 0 7px;
    color: #fff;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -.5px
}

.sa-dashboard-hero p {
    margin: 0;
    color: #c9dcf7;
    font-size: 13px
}

.sa-dashboard-hero__art {
    position: relative;
    z-index: 1;
    width: 112px;
    height: 112px;
    padding: 17px;
    color: #ff7a1a;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 28px;
    transform: rotate(4deg)
}

    .sa-dashboard-hero__art svg, .sa-metric-card svg, .sa-chart-card svg {
        width: 100%;
        height: 100%;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round
    }

.sa-dashboard-toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 16px
}

    .sa-dashboard-toolbar h2 {
        margin: 0 0 4px;
        color: #101a33;
        font-size: 18px;
        font-weight: 600
    }

    .sa-dashboard-toolbar p {
        margin: 0;
        color: #718096;
        font-size: 12px
    }

.sa-period-filter {
    display: inline-flex;
    padding: 4px;
    background: #fff;
    border: 1px solid #dce5f0;
    border-radius: 11px;
    box-shadow: 0 3px 10px rgba(15,23,42,.04)
}

    .sa-period-filter label {
        position: relative;
        margin: 0;
        padding: 8px 15px;
        color: #536179;
        font-size: 12px;
        font-weight: 700;
        border-radius: 8px;
        cursor: pointer;
        transition: .2s
    }

        .sa-period-filter label:hover {
            color: #f97316;
            background: #fff7ed
        }

        .sa-period-filter label.active {
            color: #fff;
            background: #f97316;
            box-shadow: 0 5px 12px rgba(249,115,22,.22)
        }

    .sa-period-filter input {
        position: absolute;
        opacity: 0;
        pointer-events: none
    }

.sa-metric-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 16px;
    margin-bottom: 18px
}

.sa-metric-card {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 126px;
    padding: 21px;
    background: #fff;
    border: 1px solid #dce5f0;
    border-radius: 15px;
    box-shadow: 0 6px 18px rgba(15,23,42,.045);
    transition: transform .2s,box-shadow .2s
}

    .sa-metric-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 25px rgba(15,23,42,.08)
    }

.sa-metric-card__icon {
    display: grid;
    place-items: center;
    flex: 0 0 54px;
    width: 54px;
    height: 54px;
    margin-right: 16px;
    border-radius: 15px
}

    .sa-metric-card__icon svg {
        width: 25px;
        height: 25px
    }

.sa-metric-card--blue .sa-metric-card__icon {
    color: #1677ff;
    background: #eaf3ff
}

.sa-metric-card--green .sa-metric-card__icon {
    color: #0fa968;
    background: #e9fbf3
}

.sa-metric-card--orange .sa-metric-card__icon {
    color: #f97316;
    background: #fff1e8
}

.sa-metric-card__body {
    min-width: 0
}

.sa-metric-card__label {
    display: block;
    margin-bottom: 5px;
    color: #536179;
    font-size: 12px;
    font-weight: 700
}

.sa-metric-card strong {
    display: block;
    margin-bottom: 4px;
    color: #101a33;
    font-size: 23px;
    line-height: 1.1;
    font-weight: 600
}

.sa-metric-card__hint {
    display: block;
    overflow: hidden;
    color: #8a98ad;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap
}

.sa-metric-card > a {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin-left: auto;
    color: #8290a5;
    background: #f7f9fc;
    border: 1px solid #e3e9f1;
    border-radius: 9px;
    transition: .2s
}

    .sa-metric-card > a:hover {
        color: #fff;
        background: #f97316;
        border-color: #f97316
    }

    .sa-metric-card > a svg {
        width: 16px;
        height: 16px
    }

.sa-chart-card {
    overflow: hidden;
    background: #fff;
    border: 1px solid #dce5f0;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(15,23,42,.045)
}

.sa-chart-card__header {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 19px 22px;
    border-bottom: 1px solid #e7edf5
}

.sa-chart-card__icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    color: #1677ff;
    background: #eaf3ff;
    border-radius: 12px
}

    .sa-chart-card__icon svg {
        width: 22px;
        height: 22px
    }

.sa-chart-card__header h2 {
    margin: 0 0 3px;
    color: #101a33;
    font-size: 16px;
    font-weight: 600
}

.sa-chart-card__header p {
    margin: 0;
    color: #8290a5;
    font-size: 11px
}

.sa-chart-card__badge {
    margin-left: auto;
    padding: 6px 9px;
    color: #1757a6;
    background: #eef5ff;
    border-radius: 7px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .6px
}

.sa-chart-card__canvas {
    min-height: 390px;
    padding: 12px 18px 2px
}

.sa-spinner {
    display: inline-block;
    width: 19px;
    height: 19px;
    border: 2px solid #d7e3f2;
    border-top-color: #1677ff;
    border-radius: 50%;
    animation: sa-spin .7s linear infinite
}

@keyframes sa-spin {
    to {
        transform: rotate(360deg)
    }
}

@media(max-width:991px) {
    .sa-metric-grid {
        grid-template-columns: 1fr
    }

    .sa-dashboard-toolbar {
        align-items: flex-start;
        flex-direction: column
    }

    .sa-period-filter {
        width: 100%;
        overflow-x: auto
    }

        .sa-period-filter label {
            flex: 1;
            text-align: center;
            white-space: nowrap
        }
}

@media(max-width:600px) {
    .superadmin-dashboard {
        padding-left: 10px !important;
        padding-right: 10px !important
    }

    .sa-dashboard-hero {
        min-height: 145px;
        padding: 23px
    }

        .sa-dashboard-hero h1 {
            font-size: 23px
        }

    .sa-dashboard-hero__art {
        display: none
    }

    .sa-period-filter label {
        padding: 8px 10px
    }

    .sa-chart-card__badge {
        display: none
    }

    .sa-chart-card__canvas {
        min-height: 300px;
        padding: 4px
    }

    .sa-metric-card {
        min-height: 112px;
        padding: 17px
    }
}

/* Isolate Highcharts from the outline-icon SVG treatment above. */
.sa-chart-card__canvas .highcharts-root {
    fill: #000;
    stroke: none;
    stroke-width: 1;
    stroke-linecap: butt;
    stroke-linejoin: miter;
}

.sa-nav-brand-icon {
    width: 18px;
    height: 18px;
    margin-right: 7px;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -3px;
}

/* Highcharts must never inherit the outline-icon paint model. */
.sa-chart-card__canvas .highcharts-grid-line,
.sa-chart-card__canvas .highcharts-axis-line,
.sa-chart-card__canvas .highcharts-tick {
    fill: none !important;
}

.sa-chart-card__canvas .highcharts-xaxis-grid .highcharts-grid-line {
    stroke: transparent !important;
    stroke-width: 0 !important;
}

.sa-chart-card__canvas .highcharts-yaxis-grid .highcharts-grid-line {
    stroke: #e8eef6 !important;
    stroke-width: 1px !important;
}

.sa-chart-card__canvas .highcharts-plot-border,
.sa-chart-card__canvas .highcharts-plot-background {
    stroke: transparent !important;
}

/* Superadmin business list and registration. */
.sa-business-add-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 7px 13px !important;
    color: #fff !important;
    background: #f97316 !important;
    border-color: #f97316 !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 18px !important;
}

    .sa-business-add-btn svg,
    .sa-business-create svg,
    .form-outline-svg {
        width: 16px;
        height: 16px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.sa-business-create-shell {
    overflow: hidden;
    background: #fff;
    border: 1px solid #dce5f0;
    border-radius: 16px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .06);
}

.sa-business-create-inner {
    padding: 0;
}

.sa-business-create-body {
    padding: 20px;
}

    .sa-business-create-body > div,
    .sa-business-create-body > div > div {
        width: 100%;
    }

.sa-business-create-header {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 20px 22px;
    background: linear-gradient(135deg, #fff 0%, #f8fbff 100%);
    border-bottom: 1px solid #e4ebf4;
}

.sa-business-create-header__icon,
.sa-create-section-heading > span {
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    color: #1677ff;
    background: #eaf3ff;
    border: 1px solid #cfe2ff;
    border-radius: 12px;
}

    .sa-business-create-header__icon svg {
        width: 22px;
        height: 22px;
    }

.sa-business-create-header h1 {
    margin: 0 0 3px;
    color: #101a33;
    font-size: 19px;
    font-weight: 600;
}

.sa-business-create-header p {
    margin: 0;
    color: #718096;
    font-size: 12px;
}

.sa-business-create fieldset {
    position: relative;
    margin: 0 0 18px;
    padding: 64px 14px 9px;
    overflow: hidden;
    background: #fbfdff;
    border: 1px solid #dce5f0;
    border-radius: 14px;
}

    .sa-business-create fieldset legend {
        position: absolute;
        right: 0;
        left: 0;
        display: block;
        width: auto;
        margin: -64px -14px 18px;
        padding: 16px 18px;
        color: #0b2348;
        background: #fff;
        border: 0;
        border-bottom: 1px solid #e5ebf3;
        font-size: 14px;
        font-weight: 600;
    }

.sa-business-create .form-group {
    margin-bottom: 16px;
}

    .sa-business-create .form-group > label {
        margin-bottom: 7px;
        color: #17213a;
        font-size: 12px;
        font-weight: 700;
    }

.sa-business-create .form-control,
.sa-business-create .select2-selection {
    min-height: 38px !important;
    border-color: #cfdbea !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

.sa-business-create .input-group-addon {
    min-width: 40px;
    color: #44617f;
    background: #f7faff;
    border-color: #cfdbea;
    border-radius: 8px 0 0 8px;
}

.sa-business-create .input-group .form-control {
    border-radius: 0 8px 8px 0 !important;
}

.sa-create-section-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 16px;
    padding: 15px 16px;
    background: #fffaf5;
    border: 1px solid #fed7aa;
    border-radius: 12px;
}

    .sa-create-section-heading > span {
        color: #f97316;
        background: #fff1e8;
        border-color: #fed7aa;
    }

    .sa-create-section-heading strong,
    .sa-create-section-heading small {
        display: block;
    }

    .sa-create-section-heading strong {
        margin-bottom: 3px;
        color: #17213a;
        font-size: 14px;
    }

    .sa-create-section-heading small {
        color: #718096;
        font-size: 11px;
    }

.sa-subscription-fields {
    padding: 2px 0 7px;
}

.sa-business-create-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid #e5ebf3;
    margin-bottom: 24px;
}

.sa-business-create-shell {
    margin-bottom: 34px;
}

.sa-business-create-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    padding: 8px 15px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
}

.sa-business-create-actions .btn-primary {
    color: #fff;
    background: #f97316;
    border-color: #f97316;
}

@media (max-width: 767px) {
    .sa-business-create-body {
        padding: 12px;
    }

    .sa-business-create-header {
        padding: 16px;
    }

    .sa-business-create fieldset {
        padding-left: 8px;
        padding-right: 8px;
    }

        .sa-business-create fieldset legend {
            margin-left: -8px;
            margin-right: -8px;
        }

    .sa-business-create-actions {
        justify-content: stretch;
    }

        .sa-business-create-actions .btn {
            flex: 1;
            justify-content: center;
        }
}

/* Expense report alignment: mirrors the Items Report filter, KPI and toolbar rhythm. */
.er-header {
    padding-top: 14px !important;
    padding-bottom: 12px !important;
}

    .er-header h1 {
        margin-bottom: 4px !important;
    }

.expense-report-modern .er-filter-card {
    padding: 16px !important;
}

.expense-report-modern .er-filter-grid {
    gap: 14px 18px;
}

    .expense-report-modern .er-filter-grid > div {
        min-width: 0;
    }

.expense-report-modern .er-filter-actions {
    grid-column: 5 / 7;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

    .expense-report-modern .er-filter-actions .gstr1-btn {
        width: auto;
        min-width: 120px;
        height: 38px;
    }

.expense-report-modern .er-kpi-grid {
    gap: 10px;
    margin: 12px 0;
}

    .expense-report-modern .er-kpi-grid .gstr1-kpi,
    .expense-report-modern .er-kpi-grid .gstr1-kpi:first-child,
    .expense-report-modern .er-kpi-grid .gstr1-kpi:last-child {
        min-width: 0;
        border-radius: 10px;
    }

.expense-report-modern .er-main-card .gstr1-table-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 60px;
}

    .expense-report-modern .er-main-card .gstr1-table-title h3 {
        margin: 0;
    }

.expense-report-modern .er-table-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    margin-left: auto;
}

@media (max-width: 1300px) {
    .expense-report-modern .er-filter-actions {
        grid-column: 3 / 5;
    }

    .expense-report-modern .er-kpi-grid .gstr1-kpi {
        border-radius: 10px !important;
    }
}

@media (max-width: 767px) {
    .expense-report-modern .er-filter-actions {
        grid-column: auto;
    }

    .expense-report-modern .er-main-card .gstr1-table-title {
        align-items: stretch;
        flex-direction: column;
    }

    .expense-report-modern .er-table-tools {
        width: 100%;
        margin-left: 0;
    }

    .expense-report-modern .er-search {
        flex: 1;
    }

        .expense-report-modern .er-search input {
            width: 100%;
        }
}

/* Keep the horizontal subscription redesign after all legacy package rules. */
.subscription-billing-page .package-card-grid {
    display: block !important;
    margin: 0 !important
}

    .subscription-billing-page .package-card-grid > .zoho-plan-column {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        padding: 0 !important
    }

.subscription-billing-page .zoho-plan-column + .zoho-plan-column {
    margin-top: 16px
}

.subscription-billing-page .zoho-plan-column .relite-package-card {
    display: grid !important;
    grid-template-columns: 245px minmax(0,1fr) 255px;
    align-items: stretch;
    min-height: 292px;
    overflow: hidden !important;
    background: #fff !important;
    border: 1px solid #dbe3ed !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 32px rgba(15,31,61,.07) !important
}

    .subscription-billing-page .zoho-plan-column .relite-package-card.is-popular {
        border: 2px solid #f97316 !important
    }

.subscription-billing-page .zoho-plan-column .relite-package-visual {
    align-self: stretch;
    display: grid !important;
    place-items: center;
    height: auto !important;
    min-height: 292px;
    margin: 0 !important;
    background: linear-gradient(145deg,#fff7ed,#fff) !important;
    border: 0 !important;
    border-right: 1px solid #edf0f4 !important;
    border-radius: 0 !important
}

    .subscription-billing-page .zoho-plan-column .relite-package-visual svg {
        width: 172px;
        height: 112px;
        stroke: #f97316 !important
    }

.subscription-billing-page .zoho-plan-content {
    min-width: 0;
    padding: 30px 34px
}

.subscription-billing-page .zoho-plan-column .relite-package-summary {
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 0 17px !important;
    text-align: left !important;
    border-bottom: 1px solid #e7ebf1 !important
}

    .subscription-billing-page .zoho-plan-column .relite-package-summary h2 {
        margin: 0 0 7px !important;
        color: #0b1f3a !important;
        font-size: 25px !important
    }

    .subscription-billing-page .zoho-plan-column .relite-package-summary p {
        min-height: 0 !important;
        margin: 0 !important;
        color: #69778d !important;
        font-size: 12px !important
    }

.subscription-billing-page .zoho-plan-benefits {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 0 28px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none
}

.subscription-billing-page .zoho-plan-action-panel {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    padding: 28px 24px;
    background: #fbfcfe;
    border-left: 1px solid #edf0f4
}

.subscription-billing-page .zoho-plan-column .relite-package-price {
    display: block !important;
    margin: 0 0 15px !important;
    padding: 0 !important;
    text-align: center !important;
    border: 0 !important
}

.subscription-billing-page .zoho-plan-column .zoho-extra-benefits {
    min-height: 0 !important;
    margin: 0 0 17px !important;
    padding: 0 !important;
    border: 0 !important
}

.subscription-billing-page .zoho-plan-column .relite-package-action {
    width: 100%;
    min-height: 43px;
    margin: 0 !important;
    color: #fff !important;
    background: #f97316 !important;
    border: 1px solid #f97316 !important;
    border-radius: 8px !important
}

    .subscription-billing-page .zoho-plan-column .relite-package-action.is-current {
        color: #607086 !important;
        background: #eef2f7 !important;
        border-color: #d9e1eb !important
    }

@media(max-width:1050px) {
    .subscription-billing-page .zoho-plan-column .relite-package-card {
        grid-template-columns: 190px minmax(0,1fr)
    }

    .subscription-billing-page .zoho-plan-action-panel {
        grid-column: 1/-1;
        display: grid;
        grid-template-columns: 1fr 220px;
        align-items: center;
        gap: 20px;
        border-top: 1px solid #edf0f4;
        border-left: 0
    }

    .subscription-billing-page .zoho-plan-column .zoho-extra-benefits {
        display: none !important
    }
}

@media(max-width:720px) {
    .subscription-billing-page .zoho-plan-column .relite-package-card {
        display: block !important
    }

    .subscription-billing-page .zoho-plan-column .relite-package-visual {
        min-height: 165px;
        border-right: 0 !important;
        border-bottom: 1px solid #edf0f4 !important
    }

    .subscription-billing-page .zoho-plan-content {
        padding: 24px 20px
    }

    .subscription-billing-page .zoho-plan-benefits {
        grid-template-columns: 1fr
    }

    .subscription-billing-page .zoho-plan-action-panel {
        display: block;
        padding: 22px 20px
    }
}

.subscription-billing-page .zoho-plan-column .zoho-extra-benefits > li:nth-child(-n+4) {
    display: none !important
}

/* Advanced Profit & Loss dashboard */
.plx-header {
    display: flex;
    align-items: center;
    justify-content: space-between
}

    .plx-header h1 {
        display: flex;
        align-items: center;
        gap: 8px
    }

        .plx-header h1 svg {
            width: 22px;
            height: 22px;
            fill: none;
            stroke: #64748b;
            stroke-width: 1.8
        }

.plx-header-actions .gstr1-btn {
    background: #fff
}

.profit-loss-modern {
    padding-top: 14px;
    background: #f5f7fb
}

    .profit-loss-modern svg, .plx-header-actions svg {
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round
    }

.plx-filter-card {
    margin-bottom: 18px
}

.plx-filter-grid {
    display: grid;
    grid-template-columns: minmax(250px,1fr) minmax(250px,1fr) auto;
    align-items: end;
    gap: 18px
}

    .plx-filter-grid label {
        display: block;
        margin-bottom: 7px;
        color: #334155;
        font-size: 11px;
        font-weight: 700
    }

.plx-date {
    display: flex !important;
    padding: 0 12px !important;
    align-items: center;
    justify-content: space-between;
    color: #24324a !important;
    background: #fff !important
}

    .plx-date span {
        display: flex;
        align-items: center;
        gap: 9px
    }

    .plx-date svg, .plx-select-wrap > svg {
        width: 18px;
        height: 18px;
        color: #64748b
    }

    .plx-date > svg {
        width: 15px
    }

.plx-select-wrap {
    position: relative
}

    .plx-select-wrap > svg {
        position: absolute;
        z-index: 2;
        top: 50%;
        left: 12px;
        transform: translateY(-50%);
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
        pointer-events: none
    }

    .plx-select-wrap .select2-container .select2-selection--single {
        padding-left: 0
    }

    .plx-select-wrap .select2-container .select2-selection--single .select2-selection__rendered {
        padding-left: 38px
    }

.plx-filter-grid .gstr1-filter-actions {
    display: flex;
    gap: 9px
}

.plx-filter-grid .gstr1-btn {
    min-width: 126px
}

.plx-insight-strip {
    display: flex;
    min-height: 145px;
    margin-bottom: 18px;
    padding: 25px 30px;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    color: #fff;
    border-radius: 14px;
    background: linear-gradient(110deg,#0a2149,#123f7d);
    box-shadow: 0 14px 30px rgba(18,50,96,.14)
}

    .plx-insight-strip span {
        color: #60a5fa;
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 1.5px
    }

    .plx-insight-strip h2 {
        margin: 7px 0 6px;
        color: #fff;
        font-size: 22px
    }

    .plx-insight-strip p {
        max-width: 690px;
        margin: 0;
        color: #cbd8ec;
        font-size: 12px
    }

    .plx-insight-strip > svg {
        width: 190px;
        height: 95px;
        color: #65a8ff;
        opacity: .9
    }

        .plx-insight-strip > svg path {
            stroke-width: 3
        }

        .plx-insight-strip > svg circle {
            fill: #ff7a1a;
            stroke: #fff
        }

.plx-loading {
    display: flex;
    min-height: 130px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #64748b;
    border: 1px solid #dfe5ed;
    border-radius: 12px;
    background: #fff
}

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

    .plx-kpi-grid .gstr1-kpi {
        min-width: 0
    }

        .plx-kpi-grid .gstr1-kpi strong {
            font-size: 20px
        }

    .plx-kpi-grid .gstr1-kpi--red {
        border-left-color: #e23a47
    }

        .plx-kpi-grid .gstr1-kpi--red .gstr1-kpi-icon {
            color: #d92e40;
            background: #fff0f2
        }

.plx-statement-grid {
    display: grid;
    margin-bottom: 18px;
    grid-template-columns: 1fr 1fr;
    gap: 16px
}

.plx-statement-card, .plx-profit-card {
    overflow: hidden;
    border: 1px solid #dfe5ed;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 7px 20px rgba(15,35,65,.045)
}

    .plx-statement-card > header {
        display: flex;
        padding: 17px 20px;
        align-items: center;
        gap: 11px;
        border-bottom: 1px solid #e6ebf1
    }

        .plx-statement-card > header > span {
            display: grid;
            width: 38px;
            height: 38px;
            place-items: center;
            border-radius: 9px
        }

        .plx-statement-card > header svg {
            width: 21px;
            height: 21px
        }

.plx-cost-card > header > span {
    color: #dc3b47;
    background: #fff0f1
}

.plx-income-card > header > span {
    color: #158447;
    background: #ecfbf2
}

.plx-statement-card header small, .plx-profit-card header small, .plx-analysis .gstr1-table-title small {
    display: block;
    margin-bottom: 3px;
    color: #8a97aa;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1.2px
}

.plx-statement-card h3, .plx-profit-card h3 {
    margin: 0;
    color: #172b4d;
    font-size: 16px
}

.plx-statement-table {
    padding: 0 15px 12px
}

    .plx-statement-table > .table {
        margin: 0
    }

        .plx-statement-table > .table thead {
            display: none
        }

        .plx-statement-table > .table > tbody > tr > th, .plx-statement-table > .table > tbody > tr > td, .plx-statement-table > .table > tr > th, .plx-statement-table > .table > tr > td {
            padding: 10px 8px;
            border-top: 1px solid #eef1f5;
            background: transparent !important;
            font-size: 12px
        }

        .plx-statement-table > .table tr:first-child th, .plx-statement-table > .table tr:first-child td {
            border-top: 0
        }

        .plx-statement-table > .table td {
            text-align: right;
            color: #172b4d;
            font-weight: 700
        }

.plx-profit-card {
    margin-bottom: 20px;
    padding: 20px
}

    .plx-profit-card > header {
        display: flex;
        margin-bottom: 12px;
        padding-bottom: 14px;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #e6ebf1
    }

.plx-health {
    padding: 6px 10px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 600
}

    .plx-health.is-positive {
        color: #13743d;
        background: #e9f9ef
    }

    .plx-health.is-negative {
        color: #b52b39;
        background: #fff0f2
    }

.plx-profit-card > .row {
    margin: 0
}

.plx-profit-card .box {
    margin: 0;
    box-shadow: none
}

.plx-analysis {
    margin-top: 4px;
    padding: 0
}

    .plx-analysis > .gstr1-table-title {
        padding: 18px 21px
    }

        .plx-analysis > .gstr1-table-title h3 {
            margin: 3px 0 0
        }

    .plx-analysis .nav-tabs-custom {
        margin: 0;
        box-shadow: none
    }

.plx-tabs {
    display: flex;
    padding: 0 14px;
    overflow-x: auto;
    border-top: 1px solid #e5eaf1 !important;
    border-bottom: 1px solid #e5eaf1 !important;
    background: #fbfcfe
}

    .plx-tabs > li {
        flex: 0 0 auto;
        margin: 0 !important
    }

        .plx-tabs > li > a {
            display: flex !important;
            min-height: 50px;
            padding: 0 15px !important;
            align-items: center;
            gap: 7px;
            color: #5c6b80 !important;
            border: 0 !important;
            border-bottom: 3px solid transparent !important;
            font-size: 13px;
            font-weight: 600
        }

            .plx-tabs > li > a svg {
                width: 17px;
                height: 17px
            }

        .plx-tabs > li.active > a {
            color: #126ce5 !important;
            border-bottom-color: #126ce5 !important;
            background: transparent !important
        }

.plx-analysis .nav-tabs-custom > .nav-tabs > li,
.plx-analysis .nav-tabs-custom > .nav-tabs > li:first-of-type,
.plx-analysis .nav-tabs-custom > .nav-tabs > li.active {
    border-top: 0 !important;
}

.plx-analysis .tab-content {
    padding: 20px
}

.plx-analysis .box {
    border: 0;
    box-shadow: none
}

.plx-analysis table {
    border: 1px solid #e1e6ed
}

    .plx-analysis table thead th {
        color: #44546a;
        background: #f7f9fc
    }

.plx-note {
    margin-top: 18px
}

@media(max-width:1000px) {
    .plx-filter-grid {
        grid-template-columns: 1fr 1fr
    }

        .plx-filter-grid .gstr1-filter-actions {
            grid-column: 1/-1
        }

    .plx-kpi-grid {
        grid-template-columns: 1fr 1fr
    }

    .plx-statement-grid {
        grid-template-columns: 1fr
    }

    .plx-insight-strip > svg {
        width: 140px
    }
}

@media(max-width:650px) {
    .plx-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px
    }

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

        .plx-filter-grid .gstr1-filter-actions {
            grid-column: auto;
            flex-direction: column
        }

        .plx-filter-grid .gstr1-btn {
            width: 100%
        }

    .plx-insight-strip {
        padding: 22px
    }

        .plx-insight-strip > svg {
            display: none
        }

        .plx-insight-strip h2 {
            font-size: 18px
        }

    .plx-kpi-grid .gstr1-kpi strong {
        font-size: 17px
    }

    .plx-profit-card > header {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px
    }

    .plx-analysis .tab-content {
        padding: 12px
    }
}

@media print {
    .profit-loss-modern {
        background: #fff
    }

    .plx-filter-card, .plx-insight-strip, .plx-analysis, .plx-note, .plx-header-actions {
        display: none !important
    }

    .plx-kpi-grid {
        grid-template-columns: repeat(4,1fr)
    }

    .plx-statement-grid {
        grid-template-columns: 1fr 1fr
    }

    .plx-statement-card, .plx-profit-card, .plx-kpi-grid .gstr1-kpi {
        box-shadow: none !important
    }
}

/* Shared bottom note used by all report dashboards. */
.gstr1-page-header h1 {
    text-transform: none !important;
}

.report-bottom-note {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    min-height: 54px;
    margin: 14px 0;
    padding: 13px 20px;
    color: #24334d;
    background: #fff;
    border: 1px solid #d7e2f1;
    border-radius: 11px;
    box-shadow: 0 3px 10px rgba(18,44,82,.03);
    font-family: 'Inter', sans-serif !important;
    font-size: 12px !important;
    font-weight: 400;
    line-height: 1.5;
}

    .report-bottom-note > svg {
        width: 17px !important;
        height: 17px !important;
        flex: 0 0 17px;
        margin: 0 !important;
        color: #344563;
        fill: none;
        stroke: currentColor !important;
        stroke-width: 1.8;
    }

    .report-bottom-note strong,
    .report-bottom-note > b {
        flex: 0 0 auto;
        margin: 0 !important;
        color: #24334d !important;
        font-size: inherit;
        font-weight: 700;
        white-space: nowrap;
    }

    .report-bottom-note span,
    .report-bottom-note > div {
        color: inherit !important;
        font-size: inherit;
    }

        .report-bottom-note span b,
        .report-bottom-note > div b {
            color: #075be8 !important;
            font-weight: 700;
        }

    .report-bottom-note > div {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        line-height: inherit !important;
    }

@media (max-width: 767px) {
    .report-bottom-note {
        align-items: flex-start;
        padding: 12px 14px;
    }

        .report-bottom-note > div {
            align-items: flex-start !important;
            flex-direction: column;
            gap: 3px !important;
        }
}

.invoice-preview-sheet [data-preview-option][style*="display: none"] {
    display: none !important
}

.invoice-preview-sheet .pv-letter-head {
    padding: 5px 10px;
    text-align: center;
    border-bottom: 1px solid #d8e0ea;
    font-size: 8px;
    letter-spacing: 1px;
    color: #64748b
}

.invoice-preview-sheet .pv-header-text {
    padding: 4px 10px;
    border-bottom: 1px solid #d8e0ea;
    font-size: 8px;
    text-align: center
}

.invoice-preview-sheet .invoice-preview-brand small {
    display: block
}

.invoice-preview-sheet .pv-address i {
    font-style: normal
}

.invoice-preview-sheet .invoice-preview-gst-strip {
    grid-template-columns: repeat(5,minmax(0,1fr))
}

.invoice-preview-sheet .invoice-preview-parties {
    grid-template-columns: 1fr 1fr 1fr
}

.invoice-preview-sheet .pv-document-details p {
    margin: 2px 0
}

.invoice-preview-sheet table td small {
    display: block;
    color: #64748b;
    margin-top: 2px
}

.invoice-preview-sheet .pv-barcode {
    text-align: center;
    padding: 5px;
    border-top: 1px solid #d8e0ea;
    font-size: 13px;
    letter-spacing: 2px
}

    .invoice-preview-sheet .pv-barcode small {
        display: block;
        font-size: 6px;
        letter-spacing: 0
    }

.invoice-preview-sheet.gst-a4-classic {
    border: 2px solid #111;
    color: #111
}

    .invoice-preview-sheet.gst-a4-classic header, .invoice-preview-sheet.gst-a4-classic .invoice-preview-gst-strip, .invoice-preview-sheet.gst-a4-classic .invoice-preview-parties, .invoice-preview-sheet.gst-a4-classic .invoice-preview-bottom, .invoice-preview-sheet.gst-a4-classic footer {
        border-color: #111;
        border-radius: 0
    }

    .invoice-preview-sheet.gst-a4-classic .invoice-preview-heading strong {
        color: #111
    }
/* Modern global Toastr alerts */
#toast-container {
    width: min(360px,calc(100vw - 24px));
    pointer-events: none
}

    #toast-container.toast-top-right {
        top: 16px;
        right: 16px
    }

    #toast-container > .toast {
        --toast-accent: #2563eb;
        --toast-soft: #eff6ff;
        position: relative;
        display: grid;
        grid-template-columns: 28px minmax(0,1fr);
        column-gap: 10px;
        align-items: start;
        width: 100%;
        min-height: 0;
        height: auto;
        margin: 0 0 10px;
        padding: 10px 14px 10px 12px;
        overflow: hidden;
        color: #475569;
        background: #fff !important;
        background-image: none !important;
        border: 1px solid #d9dee7;
        border-left: 3px solid var(--toast-accent);
        border-radius: 9px;
        box-shadow: 0 12px 30px rgba(15,23,42,.14);
        opacity: 1;
        cursor: default
    }

        #toast-container > .toast:before {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            grid-column: 1;
            grid-row: 1/span 2;
            width: 22px;
            height: 22px;
            margin-top: 0;
            color: var(--toast-accent);
            background: var(--toast-soft);
            border: 1px solid currentColor;
            border-radius: 50%;
            font-size: 13px;
            font-weight: 600;
            line-height: 1;
            content: "i"
        }

        #toast-container > .toast:hover {
            box-shadow: 0 16px 36px rgba(15,23,42,.18);
            opacity: 1
        }

    #toast-container > .toast-success {
        --toast-accent: #16a34a;
        --toast-soft: #f0fdf4
    }

        #toast-container > .toast-success:before {
            content: "\2713"
        }

    #toast-container > .toast-error {
        --toast-accent: #ff4d5e;
        --toast-soft: #fff1f2
    }

        #toast-container > .toast-error:before, #toast-container > .toast-warning:before {
            content: "!"
        }

    #toast-container > .toast-warning {
        --toast-accent: #f59e0b;
        --toast-soft: #fffbeb
    }

    #toast-container > .toast-info {
        --toast-accent: #2563eb;
        --toast-soft: #eff6ff
    }

    #toast-container .toast-title {
        grid-column: 2;
        margin: 0 24px 2px 0;
        color: #172033;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.35
    }

    #toast-container .toast-message {
        grid-column: 2;
        margin: 0;
        color: #5f6878;
        font-size: 12.5px;
        font-weight: 400;
        line-height: 1.4;
        overflow-wrap: anywhere
    }

        #toast-container .toast-message ul, #toast-container .toast-message ol {
            margin: 3px 0 0;
            padding-left: 18px
        }

        #toast-container .toast-message a {
            color: var(--toast-accent);
            font-weight: 700
        }

    #toast-container .toast-close-button {
        position: absolute;
        top: 7px;
        right: 9px;
        color: #94a3b8;
        text-shadow: none;
        opacity: 1
    }

    #toast-container .toast-progress {
        height: 3px;
        background: var(--toast-accent);
        opacity: .35
    }

body.relite-dark #toast-container > .toast {
    color: #cbd5e1;
    background: #102844 !important;
    border-color: #29445f;
    border-left-color: var(--toast-accent)
}

body.relite-dark #toast-container .toast-title {
    color: #f8fafc
}

body.relite-dark #toast-container .toast-message {
    color: #cbd5e1
}

@media(max-width:480px) {
    #toast-container, #toast-container.toast-top-right {
        top: 10px;
        right: 10px;
        left: 10px;
        width: auto
    }

        #toast-container > .toast {
            width: 100%;
            min-height: 0;
            height: auto;
            padding: 10px 12px
        }
}

.invoice-preview-sheet.gst-a4-classic table {
    border: 1px solid #111
}

    .invoice-preview-sheet.gst-a4-classic table th {
        background: #fff;
        color: #111;
        border: 1px solid #111
    }

    .invoice-preview-sheet.gst-a4-classic table td {
        border: 1px solid #111
    }

.invoice-preview-sheet.gst-a4-classic .invoice-preview-total .grand {
    background: #111;
    color: #fff
}

.invoice-preview-sheet, .invoice-preview-sheet * {
    font-family: 'Inter',sans-serif !important
}

    .invoice-preview-sheet .pv-reference-title {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        align-items: center;
        padding: 6px;
        border: 1px solid #111;
        font-size: 8px
    }

        .invoice-preview-sheet .pv-reference-title strong {
            text-align: center;
            font-size: 14px
        }

        .invoice-preview-sheet .pv-reference-title b {
            text-align: right
        }

    .invoice-preview-sheet.gst-a4-modern {
        border: 0;
        color: #111
    }

        .invoice-preview-sheet.gst-a4-modern header {
            min-height: 88px;
            border: 0;
            padding: 4px
        }

        .invoice-preview-sheet.gst-a4-modern .invoice-preview-brand > span {
            background: #0f9e96
        }

        .invoice-preview-sheet.gst-a4-modern .invoice-preview-brand strong {
            font-size: 18px;
            color: #252452
        }

        .invoice-preview-sheet.gst-a4-modern .invoice-preview-heading {
            display: none
        }

        .invoice-preview-sheet.gst-a4-modern .invoice-preview-gst-strip {
            margin: 0;
            border: 1px solid #111;
            border-top: 0;
            border-radius: 0
        }

            .invoice-preview-sheet.gst-a4-modern .invoice-preview-gst-strip span {
                border-color: #111
            }

        .invoice-preview-sheet.gst-a4-modern .invoice-preview-parties {
            gap: 0;
            margin: 0;
            border: 1px solid #111;
            border-top: 0
        }

            .invoice-preview-sheet.gst-a4-modern .invoice-preview-parties > div {
                min-height: 75px;
                border: 0;
                border-right: 1px solid #111;
                border-radius: 0
            }

        .invoice-preview-sheet.gst-a4-modern table {
            border: 1px solid #111
        }

            .invoice-preview-sheet.gst-a4-modern table th {
                background: #fff;
                color: #111;
                border: 1px solid #111
            }

            .invoice-preview-sheet.gst-a4-modern table td {
                height: 38px;
                border: 1px solid #111
            }

        .invoice-preview-sheet.gst-a4-modern tbody tr:last-child td {
            height: 115px
        }

        .invoice-preview-sheet.gst-a4-modern .invoice-preview-bottom {
            gap: 0;
            margin: 0;
            border: 1px solid #111;
            border-top: 0
        }

            .invoice-preview-sheet.gst-a4-modern .invoice-preview-bottom > div {
                padding: 8px;
                border-right: 1px solid #111
            }

        .invoice-preview-sheet.gst-a4-modern .invoice-preview-total .grand {
            background: #fff;
            color: #111;
            border-top: 2px solid #111
        }

        .invoice-preview-sheet.gst-a4-modern footer {
            margin: 0;
            border: 1px solid #111;
            border-top: 0;
            color: #111
        }

    .invoice-preview-sheet .invoice-preview-brand {
        align-items: flex-start
    }

        .invoice-preview-sheet .invoice-preview-brand strong {
            font-size: 19px !important;
            font-weight: 600 !important;
            line-height: 1.12;
            text-transform: uppercase
        }

        .invoice-preview-sheet .invoice-preview-brand small {
            font-size: 12px !important;
            line-height: 1.45
        }

        .invoice-preview-sheet .invoice-preview-brand [data-preview-option="show_location_name"] {
            font-size: 15px !important;
            font-weight: 600;
            line-height: 1.2;
            text-transform: uppercase;
            color: #252452
        }

    .invoice-preview-sheet .invoice-preview-bottom {
        grid-template-columns: minmax(0,1fr) 70px minmax(155px,190px)
    }

    .invoice-preview-sheet .invoice-preview-total {
        min-width: 0
    }

        .invoice-preview-sheet .invoice-preview-total p {
            gap: 8px;
            align-items: center
        }

            .invoice-preview-sheet .invoice-preview-total p span {
                min-width: 0
            }

            .invoice-preview-sheet .invoice-preview-total p b {
                white-space: nowrap;
                text-align: right
            }

    .invoice-preview-sheet.gst-a4-modern tbody tr:last-child td {
        height: auto
    }

/* Purchase settings */
.business-settings-editor .pos-tab-content.purchase-settings-tab {
    padding: 0;
    border-radius: 0;
    background: transparent
}

.purchase-settings-layout {
    display: grid;
    grid-template-columns: minmax(270px,.72fr) minmax(0,2fr);
    gap: 22px;
    align-items: stretch
}

.purchase-settings-guide, .purchase-settings-form {
    background: #fff;
    border: 1px solid #dce5ef;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(30,51,80,.07)
}

.purchase-settings-guide {
    display: flex;
    flex-direction: column;
    padding: 22px 24px
}

.purchase-guide-visual {
    position: relative;
    width: 100%;
    aspect-ratio: 1.25/1;
    margin: -8px 0 5px;
    border-radius: 16px;
    background-image: linear-gradient(to bottom,rgba(251,250,255,0) 68%,#fff 98%),url('../img/settings-purchase.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%,contain;
    background-blend-mode: normal,multiply;
    overflow: hidden
}

    .purchase-guide-visual:after {
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse at center,transparent 60%,rgba(255,255,255,.65) 90%,#fff 100%);
        content: ""
    }

.purchase-settings-layout svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round
}

.purchase-settings-guide h3 {
    margin: 5px 0 18px;
    color: #17223a;
    font-size: 18px;
    font-weight: 700
}

.purchase-guide-items > div {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
    color: #273650;
    font-size: 12px;
    line-height: 1.45
}

.purchase-guide-items i {
    display: grid;
    place-items: center;
    flex: 0 0 38px;
    height: 38px;
    border-radius: 50%;
    background: #f2f5fa;
    font-style: normal
}

.purchase-guide-tip {
    display: flex;
    gap: 10px;
    margin-top: auto;
    padding: 14px;
    color: #2563eb;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 9px
}

    .purchase-guide-tip i {
        font-style: normal
    }

    .purchase-guide-tip b, .purchase-guide-tip small {
        display: block
    }

    .purchase-guide-tip small {
        margin-top: 4px;
        color: #34435d;
        font-size: 12px;
        line-height: 1.5
    }

.purchase-settings-form {
    padding: 25px
}

.purchase-settings-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 28px
}

    .purchase-settings-header > i {
        display: grid;
        place-items: center;
        flex: 0 0 48px;
        height: 48px;
        color: #ff6b1a;
        background: #fff1e9;
        border-radius: 12px;
        font-style: normal
    }

    .purchase-settings-header h3 {
        margin: 0 0 4px;
        color: #17223a;
        font-size: 19px;
        font-weight: 700
    }

    .purchase-settings-header p {
        margin: 0;
        color: #64748b;
        font-size: 12px
    }

.purchase-option-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 22px
}

.purchase-option {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 118px;
    margin: 0 !important;
    padding: 18px;
    border: 1px solid #dce5ef;
    border-radius: 12px;
    background: #fff;
    cursor: pointer
}

    .purchase-option > i {
        display: grid;
        place-items: center;
        flex: 0 0 58px;
        height: 58px;
        border-radius: 50%;
        background: #f2f5fa;
        font-style: normal
    }

        .purchase-option > i svg {
            width: 28px;
            height: 28px
        }

    .purchase-option > span:not(.purchase-option-switch) {
        flex: 1
    }

    .purchase-option b, .purchase-option small {
        display: block
    }

    .purchase-option b {
        margin-bottom: 8px;
        color: #17223a;
        font-size: 12px
    }

    .purchase-option small {
        color: #64748b;
        font-size: 11px;
        line-height: 1.55
    }

    .purchase-option > .purchase-option-switch {
        position: relative;
        display: inline-flex;
        flex: 0 0 30px;
        width: 30px !important;
        min-width: 30px;
        max-width: 30px;
        height: 16px !important;
        margin: 6px 0 0 auto
    }

.purchase-option-switch__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    opacity: 0;
    pointer-events: none
}

.purchase-option-switch__track {
    position: absolute;
    inset: 0;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: #e8edf3;
    transition: background-color .18s ease,border-color .18s ease,box-shadow .18s ease
}

    .purchase-option-switch__track:before {
        position: absolute;
        top: 1px;
        left: 1px;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 1px 3px rgba(15,23,42,.25);
        transition: transform .18s ease;
        content: ""
    }

.purchase-option-switch__input:checked + .purchase-option-switch__track {
    border-color: #ff6b13;
    background: #ff6b13
}

    .purchase-option-switch__input:checked + .purchase-option-switch__track:before {
        transform: translateX(14px)
    }

.purchase-option-switch__input:focus-visible + .purchase-option-switch__track {
    box-shadow: 0 0 0 3px rgba(255,107,19,.2)
}

.purchase-option:hover .purchase-option-switch__track {
    border-color: #ff9a5d
}

.purchase-option--wide {
    grid-column: 1/-1
}

.purchase-currency-panel {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 15px;
    margin-bottom: 22px
}

    .purchase-currency-panel .purchase-option {
        min-height: 86px
    }

    .purchase-currency-panel .form-control {
        height: 40px;
        border-color: #dce5ef
    }

.yellow {
    color: #f7b500
}

body.relite-dark .purchase-settings-guide, body.relite-dark .purchase-settings-form, body.relite-dark .purchase-option {
    background: #102844;
    border-color: #29445f
}

body.relite-dark .purchase-option-switch__track {
    border-color: #49627c;
    background: #29445f
}

body.relite-dark .purchase-option-switch__input:checked + .purchase-option-switch__track {
    border-color: #ff7a25;
    background: #ff7a25
}

body.relite-dark .purchase-settings-guide h3, body.relite-dark .purchase-settings-header h3, body.relite-dark .purchase-option b {
    color: #f8fafc
}

body.relite-dark .purchase-guide-visual {
    background-color: #102844;
    background-image: linear-gradient(to bottom,rgba(16,40,68,0) 68%,#102844 98%),url('../img/settings-purchase.png');
    background-blend-mode: normal,multiply
}

    body.relite-dark .purchase-guide-visual:after {
        background: radial-gradient(ellipse at center,transparent 60%,rgba(16,40,68,.65) 90%,#102844 100%)
    }

@media(max-width:1180px) {
    .purchase-settings-layout {
        grid-template-columns: minmax(240px,.8fr) minmax(0,1.7fr)
    }
}

@media(max-width:900px) {
    .purchase-settings-layout {
        grid-template-columns: 1fr
    }

    .purchase-settings-form {
        order: 1
    }

    .purchase-settings-guide {
        order: 2
    }
}

/* Final panel placement — visual guide left, settings form right. */
.purchase-settings-layout, .cashier-settings-layout {
    grid-template-columns: minmax(270px,.72fr) minmax(0,2fr) !important;
    grid-template-areas: "guide form"
}

.purchase-settings-guide, .cashier-settings-guide {
    grid-area: guide !important;
    order: initial !important
}

.purchase-settings-form, .cashier-settings-form {
    grid-area: form !important;
    order: initial !important
}

@media(max-width:1180px) {
    .purchase-settings-layout, .cashier-settings-layout {
        grid-template-columns: minmax(240px,.8fr) minmax(0,1.7fr) !important
    }
}

@media(max-width:900px) {
    .purchase-settings-layout, .cashier-settings-layout {
        grid-template-columns: 1fr !important;
        grid-template-areas: "form" "guide"
    }

    .purchase-settings-form, .cashier-settings-form {
        grid-area: form !important
    }

    .purchase-settings-guide, .cashier-settings-guide {
        grid-area: guide !important
    }
}

/* Payment methods settings */
.business-settings-editor .pos-tab-content.payment-methods-tab {
    padding: 0;
    border-radius: 0;
    background: transparent
}

.payment-settings-layout {
    display: grid;
    grid-template-columns: minmax(0,2fr) minmax(270px,.72fr);
    gap: 22px;
    align-items: stretch
}

.payment-settings-form, .payment-settings-guide {
    background: #fff;
    border: 1px solid #dce5ef;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(30,51,80,.07)
}

.payment-settings-form {
    padding: 25px
}

.payment-settings-header {
    display: flex;
    align-items: center;
    gap: 15px
}

    .payment-settings-header > i {
        display: grid;
        place-items: center;
        flex: 0 0 52px;
        height: 52px;
        color: #6d4fe8;
        background: #fff1e9;
        border-radius: 12px;
        font-style: normal
    }

.payment-settings-layout svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round
}

.payment-settings-header h3 {
    margin: 0 0 5px;
    color: #17223a;
    font-size: 19px;
    font-weight: 700
}

.payment-settings-header p {
    margin: 0;
    color: #64748b;
    font-size: 12px
}

.payment-settings-divider {
    height: 1px;
    margin: 27px 0 31px;
    background: #e3e9f0
}

.payment-settings-form label {
    margin-bottom: 10px;
    color: #25324a;
    font-size: 12px;
    font-weight: 700
}

.payment-settings-form .form-control {
    height: 46px;
    border-color: #d5dfeb;
    border-radius: 8px;
    box-shadow: none
}

.payment-denominations-field .form-control {
    height: 56px
}

.payment-denominations-field .help-block {
    margin-top: 9px;
    color: #64748b;
    font-size: 11px
}

.payment-settings-grid {
    display: grid;
    grid-template-columns: 1fr 1.05fr .45fr;
    gap: 28px;
    margin-top: 35px
}

.payment-icon-field {
    display: flex;
    align-items: center;
    overflow: hidden;
    border: 1px solid #d5dfeb;
    border-radius: 8px
}

    .payment-icon-field > i {
        display: grid;
        place-items: center;
        flex: 0 0 44px;
        height: 44px;
        color: #7657e8;
        border-right: 1px solid #dce4ed;
        font-style: normal
    }

    .payment-icon-field .form-control {
        border: 0
    }

    .payment-icon-field .select2-container {
        flex: 1;
        min-width: 0;
        width: auto !important
    }

.payment-strict-check > div {
    display: flex;
    align-items: center;
    gap: 9px;
    height: 46px
}

    .payment-strict-check > div > i {
        display: grid;
        place-items: center;
        width: 36px;
        height: 36px;
        color: #2d7ff9;
        border: 1px solid #dce5ef;
        border-radius: 7px;
        font-style: normal
    }

.payment-strict-check span {
    font-size: 12px;
    font-weight: 600
}

.payment-settings-guide {
    display: flex;
    flex-direction: column;
    padding: 22px 24px
}

.payment-guide-visual {
    position: relative;
    width: calc(100% + 8px);
    aspect-ratio: 1.48/1;
    margin: -8px -4px 12px;
    border-radius: 16px;
    background-image: linear-gradient(to bottom,rgba(251,250,255,0) 60%,rgba(255,255,255,.45) 82%,#fff 100%),url('../img/settings-payment.png');
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% 100%,contain;
    background-blend-mode: normal,multiply;
    overflow: hidden
}

    .payment-guide-visual:after {
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse at 50% 43%,transparent 67%,rgba(255,255,255,.45) 88%,#fff 100%);
        content: ""
    }

.payment-settings-guide h3 {
    margin: 5px 0 18px;
    color: #17223a;
    font-size: 18px;
    font-weight: 700
}

.payment-guide-items > div {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    color: #273650;
    font-size: 11.5px
}

.payment-guide-items i {
    display: grid;
    place-items: center;
    flex: 0 0 38px;
    height: 38px;
    border-radius: 9px;
    background: #f2f5fa;
    font-style: normal
}

.payment-guide-tip {
    display: flex;
    gap: 10px;
    margin-top: auto;
    padding: 14px;
    color: #2563eb;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 9px
}

    .payment-guide-tip i {
        font-style: normal
    }

    .payment-guide-tip b, .payment-guide-tip small {
        display: block
    }

    .payment-guide-tip small {
        margin-top: 4px;
        color: #44516a;
        font-size: 12px;
        line-height: 1.5
    }

body.relite-dark .payment-settings-form, body.relite-dark .payment-settings-guide {
    background: #102844;
    border-color: #29445f
}

    body.relite-dark .payment-settings-header h3, body.relite-dark .payment-settings-guide h3 {
        color: #f8fafc
    }

body.relite-dark .payment-guide-visual {
    background-color: #102844;
    background-image: linear-gradient(to bottom,rgba(16,40,68,0) 60%,rgba(16,40,68,.45) 82%,#102844 100%),url('../img/settings-payment.png');
    background-blend-mode: normal,multiply
}

    body.relite-dark .payment-guide-visual:after {
        background: radial-gradient(ellipse at 50% 43%,transparent 67%,rgba(16,40,68,.45) 88%,#102844 100%)
    }

@media(max-width:1180px) {
    .payment-settings-layout {
        grid-template-columns: minmax(0,1.7fr) minmax(240px,.8fr)
    }
}

@media(max-width:900px) {
    .payment-settings-layout {
        grid-template-columns: 1fr
    }

    .payment-settings-form {
        order: 1
    }

    .payment-settings-guide {
        order: 2
    }
}

/* Keep redesigned settings pages consistent: visual guide left, form right. */
.purchase-settings-layout, .cashier-settings-layout {
    grid-template-columns: minmax(270px,.72fr) minmax(0,2fr)
}

.purchase-settings-guide, .cashier-settings-guide {
    order: 1
}

.purchase-settings-form, .cashier-settings-form {
    order: 2
}

@media(max-width:1180px) {
    .purchase-settings-layout, .cashier-settings-layout {
        grid-template-columns: minmax(240px,.8fr) minmax(0,1.7fr)
    }
}

@media(max-width:900px) {
    .purchase-settings-layout, .cashier-settings-layout {
        grid-template-columns: 1fr
    }

    .purchase-settings-form, .cashier-settings-form {
        order: 1
    }

    .purchase-settings-guide, .cashier-settings-guide {
        order: 2
    }
}

@media(max-width:640px) {
    .payment-settings-form, .payment-settings-guide {
        padding: 16px 13px
    }

    .payment-settings-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 24px
    }
}

.payment-settings-layout {
    grid-template-columns: minmax(270px,.72fr) minmax(0,2fr)
}

.payment-settings-guide {
    order: 1
}

.payment-settings-form {
    order: 2
}

@media(max-width:1180px) {
    .payment-settings-layout {
        grid-template-columns: minmax(240px,.8fr) minmax(0,1.7fr)
    }
}

@media(max-width:900px) {
    .payment-settings-layout {
        grid-template-columns: 1fr
    }

    .payment-settings-form {
        order: 1
    }

    .payment-settings-guide {
        order: 2
    }
}

@media(max-width:640px) {
    .purchase-settings-guide, .purchase-settings-form {
        padding: 16px 13px
    }

    .purchase-option-grid, .purchase-currency-panel {
        grid-template-columns: 1fr
    }

    .purchase-option--wide {
        grid-column: auto
    }

    .purchase-option {
        min-height: 100px;
        padding: 14px
    }
}

/* Purchase reference refinement: form left, blended workflow guide right. */
.purchase-settings-layout {
    grid-template-columns: minmax(0,2fr) minmax(270px,.72fr)
}

.purchase-settings-form {
    order: 1
}

.purchase-settings-guide {
    order: 2
}

.purchase-guide-visual {
    width: calc(100% + 8px);
    aspect-ratio: 1.48/1;
    margin: -10px -4px 12px;
    background-image: url('../img/settings-purchase.png');
    background-size: 100% 100%,contain;
    background-position: center top;
    background-repeat: no-repeat;
    background-blend-mode: normal,multiply
}

    .purchase-guide-visual:after {
        background: radial-gradient(ellipse at 50% 43%,transparent 67%,rgba(255,255,255,.45) 88%,#fff 100%)
    }

body.relite-dark .purchase-guide-visual {
    background-color: #102844;
    background-image: linear-gradient(to bottom,rgba(16,40,68,0) 60%,rgba(16,40,68,.45) 82%,#102844 100%),url('../img/settings-purchase.png');
    background-blend-mode: normal,multiply
}

    body.relite-dark .purchase-guide-visual:after {
        background: radial-gradient(ellipse at 50% 43%,transparent 67%,rgba(16,40,68,.45) 88%,#102844 100%)
    }

@media(max-width:1180px) {
    .purchase-settings-layout {
        grid-template-columns: minmax(0,1.7fr) minmax(240px,.8fr)
    }
}

@media(max-width:900px) {
    .purchase-settings-layout {
        grid-template-columns: 1fr
    }

    .purchase-settings-form {
        order: 1
    }

    .purchase-settings-guide {
        order: 2
    }
}

/* Authoritative panel placement — visual guide left, settings form right. */
.purchase-settings-layout, .cashier-settings-layout {
    grid-template-columns: minmax(270px,.72fr) minmax(0,2fr) !important;
    grid-template-areas: "guide form" !important
}

.purchase-settings-guide, .cashier-settings-guide {
    grid-area: guide !important;
    order: 0 !important
}

.purchase-settings-form, .cashier-settings-form {
    grid-area: form !important;
    order: 0 !important
}

@media(max-width:1180px) {
    .purchase-settings-layout, .cashier-settings-layout {
        grid-template-columns: minmax(240px,.8fr) minmax(0,1.7fr) !important
    }
}

@media(max-width:900px) {
    .purchase-settings-layout, .cashier-settings-layout {
        grid-template-columns: 1fr !important;
        grid-template-areas: "form" "guide" !important
    }
}

/* Dashboard settings */
.business-settings-editor .pos-tab-content.dashboard-settings-tab {
    padding: 0;
    border-radius: 0;
    background: transparent
}

.dashboard-settings-layout {
    display: grid;
    grid-template-columns: minmax(270px,.72fr) minmax(0,2fr);
    grid-template-areas: "guide form";
    gap: 22px;
    align-items: stretch
}

.dashboard-settings-guide, .dashboard-settings-form {
    background: #fff;
    border: 1px solid #dce5ef;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(30,51,80,.07)
}

.dashboard-settings-guide {
    grid-area: guide;
    display: flex;
    flex-direction: column;
    padding: 22px 24px
}

.dashboard-settings-form {
    grid-area: form;
    padding: 0
}

.dashboard-settings-layout svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round
}

.dashboard-guide-visual {
    position: relative;
    width: calc(100% + 8px);
    aspect-ratio: 1.48/1;
    margin: -8px -4px 12px;
    border-radius: 16px;
    background-image: linear-gradient(to bottom,rgba(250,249,255,0) 60%,rgba(255,255,255,.45) 82%,#fff 100%),url('../img/settings-dashboard.png');
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% 100%,contain;
    background-blend-mode: normal,multiply;
    overflow: hidden
}

    .dashboard-guide-visual:after {
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse at 50% 43%,transparent 67%,rgba(255,255,255,.45) 88%,#fff 100%);
        content: ""
    }

.dashboard-settings-guide h3 {
    margin: 5px 0 18px;
    color: #17223a;
    font-size: 18px;
    font-weight: 700
}

.dashboard-guide-items > div {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px
}

.dashboard-guide-items i {
    display: grid;
    place-items: center;
    flex: 0 0 38px;
    height: 38px;
    border-radius: 9px;
    background: #f2f5fa;
    font-style: normal
}

.dashboard-guide-items span {
    color: #263650;
    font-size: 11px
}

.dashboard-guide-items b, .dashboard-guide-items small {
    display: block
}

.dashboard-guide-items b {
    margin-bottom: 3px;
    font-size: 12px
}

.dashboard-guide-items small {
    color: #64748b;
    line-height: 1.45
}

.dashboard-guide-tip {
    display: flex;
    gap: 10px;
    margin-top: auto;
    padding: 14px;
    color: #2563eb;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 9px
}

    .dashboard-guide-tip i {
        font-style: normal
    }

    .dashboard-guide-tip b, .dashboard-guide-tip small {
        display: block
    }

    .dashboard-guide-tip small {
        margin-top: 4px;
        color: #44516a;
        font-size: 12px;
        line-height: 1.5
    }

.dashboard-expiry-card {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    min-height: 170px;
    padding: 30px
}

.dashboard-expiry-icon {
    display: grid;
    place-items: center;
    flex: 0 0 52px;
    height: 52px;
    color: #7047e8;
    background: #eee9ff;
    border-radius: 12px;
    font-style: normal
}

.dashboard-expiry-card .form-group {
    width: min(510px,100%);
    margin: 0
}

.dashboard-expiry-card label {
    display: block;
    margin: 5px 0 18px;
    color: #17223a;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase
}

.dashboard-expiry-field {
    display: flex;
    align-items: center;
    height: 54px;
    overflow: hidden;
    border: 1px solid #d5dfeb;
    border-radius: 9px
}

    .dashboard-expiry-field > i {
        display: grid;
        place-items: center;
        flex: 0 0 54px;
        height: 54px;
        color: #7047e8;
        border-right: 1px solid #d5dfeb;
        font-style: normal
    }

    .dashboard-expiry-field .form-control {
        height: 52px;
        border: 0;
        box-shadow: none;
        font-size: 16px
    }

    .dashboard-expiry-field > span {
        display: grid;
        place-items: center;
        align-self: stretch;
        flex: 0 0 80px;
        color: #334155;
        border-left: 1px solid #d5dfeb;
        font-size: 14px
    }

body.relite-dark .dashboard-settings-guide, body.relite-dark .dashboard-settings-form {
    background: #102844;
    border-color: #29445f
}

    body.relite-dark .dashboard-settings-guide h3, body.relite-dark .dashboard-expiry-card label {
        color: #f8fafc
    }

body.relite-dark .dashboard-guide-visual {
    background-color: #102844;
    background-image: linear-gradient(to bottom,rgba(16,40,68,0) 60%,rgba(16,40,68,.45) 82%,#102844 100%),url('../img/settings-dashboard.png');
    background-blend-mode: normal,multiply
}

    body.relite-dark .dashboard-guide-visual:after {
        background: radial-gradient(ellipse at 50% 43%,transparent 67%,rgba(16,40,68,.45) 88%,#102844 100%)
    }

@media(max-width:1180px) {
    .dashboard-settings-layout {
        grid-template-columns: minmax(240px,.8fr) minmax(0,1.7fr)
    }
}

@media(max-width:900px) {
    .dashboard-settings-layout {
        grid-template-columns: 1fr;
        grid-template-areas: "form" "guide"
    }
}

@media(max-width:640px) {
    .dashboard-settings-guide {
        padding: 16px 13px
    }

    .dashboard-expiry-card {
        min-height: 0;
        padding: 18px 14px
    }

    .dashboard-expiry-icon {
        flex-basis: 42px;
        height: 42px
    }

    .dashboard-expiry-card label {
        font-size: 12px
    }
}

/* System settings */
.business-settings-editor .pos-tab-content.system-settings-tab {
    padding: 0;
    border-radius: 0;
    background: transparent
}

.system-settings-layout {
    display: grid;
    grid-template-columns: minmax(270px,.72fr) minmax(0,2fr);
    grid-template-areas: "guide form";
    gap: 22px;
    align-items: stretch
}

.system-settings-guide, .system-settings-form {
    background: #fff;
    border: 1px solid #dce5ef;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(30,51,80,.07)
}

.system-settings-guide {
    grid-area: guide;
    display: flex;
    flex-direction: column;
    padding: 22px 24px;
}

.system-settings-form {
    grid-area: form;
    padding: 27px
}

.system-settings-layout svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round
}

.system-guide-visual {
    position: relative;
    width: calc(100% + 8px);
    aspect-ratio: 1.48/1;
    margin: -8px -4px 12px;
    border-radius: 16px;
    background-image: linear-gradient(to bottom,rgba(255,247,237,0) 60%,rgba(255,255,255,.45) 82%,#fff 100%),url('../img/settings-system.png');
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% 100%,contain;
    background-blend-mode: normal,multiply;
    overflow: hidden
}

    .system-guide-visual:after {
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse at 50% 43%,transparent 67%,rgba(255,255,255,.42) 88%,#fff 100%);
        content: ""
    }

.system-settings-guide h3 {
    margin: 5px 0 4px;
    color: #17223a;
    font-size: 18px;
    font-weight: 700
}

.system-guide-subtitle {
    margin: 0 0 18px;
    color: #64748b;
    font-size: 11px
}

.system-guide-items > div {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px
}

.system-guide-items i {
    display: grid;
    place-items: center;
    flex: 0 0 38px;
    height: 38px;
    border-radius: 9px;
    background: #f2f5fa;
    font-style: normal
}

.system-guide-items span {
    font-size: 11px
}

.system-guide-items b, .system-guide-items small {
    display: block
}

.system-guide-items b {
    margin-bottom: 3px;
    color: #17223a;
    font-size: 12px
}

.system-guide-items small {
    color: #64748b;
    line-height: 1.45
}

.system-guide-tip {
    display: flex;
    gap: 10px;
    margin-top: auto;
    padding: 14px;
    color: #2563eb;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 9px
}

    .system-guide-tip i {
        font-style: normal
    }

    .system-guide-tip b, .system-guide-tip small {
        display: block
    }

    .system-guide-tip small {
        margin-top: 4px;
        color: #44516a;
        font-size: 12px;
        line-height: 1.5
    }

.system-settings-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 34px
}

    .system-settings-header > i {
        display: grid;
        place-items: center;
        flex: 0 0 52px;
        height: 52px;
        color: #7047e8;
        background: #eee9ff;
        border-radius: 12px;
        font-style: normal
    }

    .system-settings-header h3 {
        margin: 0 0 5px;
        color: #17223a;
        font-size: 19px;
        font-weight: 700
    }

    .system-settings-header p {
        margin: 0;
        color: #64748b;
        font-size: 12px
    }

.system-settings-fields {
    display: grid;
    grid-template-columns: 1fr 1fr .72fr;
    gap: 30px
}

    .system-settings-fields .form-group {
        margin: 0
    }

    .system-settings-fields label {
        display: block;
        margin-bottom: 10px;
        color: #475569;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase
    }

.system-icon-field {
    display: flex;
    align-items: center;
    height: 48px;
    overflow: hidden;
    border: 1px solid #d5dfeb;
    border-radius: 8px
}

    .system-icon-field > i {
        display: grid;
        place-items: center;
        flex: 0 0 46px;
        height: 46px;
        color: #ff6b1a;
        border-right: 1px solid #dce4ed;
        font-style: normal
    }

    .system-icon-field .form-control {
        height: 46px;
        border: 0;
        box-shadow: none
    }

    .system-icon-field .select2-container {
        flex: 1;
        min-width: 0;
        width: auto !important
    }

.system-settings-fields .form-group > small {
    display: block;
    margin-top: 9px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.45
}

.system-help-option > div {
    display: flex;
    align-items: flex-start;
    gap: 10px
}

    .system-help-option > div > i {
        display: grid;
        place-items: center;
        flex: 0 0 38px;
        height: 38px;
        color: #2eae63;
        border: 1px solid #dce5ef;
        border-radius: 8px;
        font-style: normal
    }

.system-help-option span {
    flex: 1
}

.system-expiry-setting {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-top: 28px;
    padding: 22px 0 0;
    border-top: 1px solid #e5ebf2
}

    .system-expiry-setting > i {
        display: grid;
        place-items: center;
        flex: 0 0 48px;
        width: 48px;
        height: 48px;
        border-radius: 11px;
        background: #eee9ff;
        color: #7047e8;
        font-style: normal
    }

    .system-expiry-setting > .form-group {
        width: min(510px,100%);
        margin: 0
    }

    .system-expiry-setting label {
        display: block;
        margin: 0 0 9px;
        color: #475569;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: .04em;
        text-transform: uppercase
    }

    .system-expiry-setting > .form-group > small {
        display: block;
        margin-top: 8px;
        color: #64748b;
        font-size: 11px;
        line-height: 1.45
    }

.system-help-option span b, .system-help-option span small {
    display: block
}

.system-help-option span b {
    color: #17223a;
    font-size: 12px
}

.system-help-option span small {
    margin-top: 6px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.45
}

body.relite-dark .system-settings-guide, body.relite-dark .system-settings-form {
    background: #102844;
    border-color: #29445f
}

    body.relite-dark .system-settings-guide h3, body.relite-dark .system-settings-header h3, body.relite-dark .system-guide-items b, body.relite-dark .system-help-option span b {
        color: #f8fafc
    }

body.relite-dark .system-guide-visual {
    background-color: #102844;
    background-image: linear-gradient(to bottom,rgba(16,40,68,0) 60%,rgba(16,40,68,.45) 82%,#102844 100%),url('../img/settings-system.png');
    background-blend-mode: normal,multiply
}

    body.relite-dark .system-guide-visual:after {
        background: radial-gradient(ellipse at 50% 43%,transparent 67%,rgba(16,40,68,.45) 88%,#102844 100%)
    }

@media(max-width:1180px) {
    .system-settings-layout {
        grid-template-columns: minmax(240px,.8fr) minmax(0,1.7fr)
    }

    .system-settings-fields {
        grid-template-columns: 1fr 1fr
    }
}

@media(max-width:900px) {
    .system-settings-layout {
        grid-template-columns: 1fr;
        grid-template-areas: "form" "guide"
    }
}

@media(max-width:640px) {
    .system-settings-guide, .system-settings-form {
        padding: 16px 13px
    }

    .system-settings-fields {
        grid-template-columns: 1fr
    }

    .system-expiry-setting {
        gap: 10px;
        margin-top: 20px;
        padding-top: 18px
    }

        .system-expiry-setting > i {
            flex-basis: 42px;
            width: 42px;
            height: 42px
        }
}

.system-icon-field .select2-container .select2-selection {
    height: 46px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.system-icon-field .select2-container .select2-selection__rendered {
    height: 46px !important;
    padding-left: 12px !important;
    line-height: 46px !important;
}

.system-icon-field .select2-container .select2-selection__arrow {
    height: 44px !important;
}

/* Numbering & prefixes settings */
.business-settings-editor .pos-tab-content.numbering-settings-tab {
    padding: 0;
    border-radius: 0;
    background: transparent
}

.numbering-settings-layout {
    display: grid;
    grid-template-columns: minmax(270px,.72fr) minmax(0,2fr);
    grid-template-areas: "guide form";
    gap: 22px;
    align-items: stretch
}

.numbering-settings-guide, .numbering-settings-form {
    background: #fff;
    border: 1px solid #dce5ef;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(30,51,80,.07)
}

.numbering-settings-guide {
    grid-area: guide;
    display: flex;
    flex-direction: column;
    padding: 22px 24px
}

.numbering-settings-form {
    grid-area: form;
    padding: 25px
}

.numbering-settings-layout svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round
}

.numbering-guide-visual {
    position: relative;
    width: calc(100% + 8px);
    aspect-ratio: 1.48/1;
    margin: -8px -4px 12px;
    border-radius: 16px;
    background-image: linear-gradient(to bottom,rgba(250,249,255,0) 60%,rgba(255,255,255,.45) 82%,#fff 100%),url('../img/settings-numbering.png');
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% 100%,contain;
    background-blend-mode: normal,multiply;
    overflow: hidden
}

    .numbering-guide-visual:after {
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse at 50% 43%,transparent 67%,rgba(255,255,255,.45) 88%,#fff 100%);
        content: ""
    }

.numbering-settings-guide h3 {
    margin: 5px 0 8px;
    color: #17223a;
    font-size: 18px;
    font-weight: 700
}

.numbering-guide-subtitle {
    margin: 0 0 18px;
    color: #64748b;
    font-size: 11.5px;
    line-height: 1.5
}

.numbering-guide-items > div {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px
}

.numbering-guide-items i {
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    height: 42px;
    border-radius: 50%;
    background: #f2f5fa;
    font-size: 25px;
    font-style: normal;
    font-weight: 600
}

.numbering-guide-items span {
    font-size: 11px
}

.numbering-guide-items b, .numbering-guide-items small {
    display: block
}

.numbering-guide-items b {
    margin-bottom: 4px;
    color: #17223a;
    font-size: 12px
}

.numbering-guide-items small {
    color: #64748b;
    line-height: 1.45
}

.numbering-guide-tip {
    display: flex;
    gap: 10px;
    margin-top: auto;
    padding: 14px;
    color: #2563eb;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 9px
}

    .numbering-guide-tip i {
        font-style: normal
    }

    .numbering-guide-tip b, .numbering-guide-tip small {
        display: block
    }

    .numbering-guide-tip small {
        margin-top: 4px;
        color: #44516a;
        font-size: 12px;
        line-height: 1.5
    }

.numbering-settings-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 27px
}

    .numbering-settings-header > i {
        display: grid;
        place-items: center;
        flex: 0 0 52px;
        height: 52px;
        color: #7047e8;
        background: #eee9ff;
        border-radius: 12px;
        font-size: 30px;
        font-style: normal;
        font-weight: 600
    }

    .numbering-settings-header h3 {
        margin: 0 0 5px;
        color: #17223a;
        font-size: 19px;
        font-weight: 700
    }

    .numbering-settings-header p {
        margin: 0;
        color: #64748b;
        font-size: 12px
    }

.numbering-fields {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 19px 28px
}

    .numbering-fields .form-group {
        margin: 0
    }

    .numbering-fields label {
        display: flex;
        align-items: center;
        gap: 9px;
        margin: 0 0 8px;
        color: #66758f;
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase
    }

        .numbering-fields label i {
            display: grid;
            place-items: center;
            font-style: normal
        }

    .numbering-fields .form-control {
        height: 44px;
        border-color: #d5dfeb;
        border-radius: 8px;
        box-shadow: none;
        font-size: 13px
    }

body.relite-dark .numbering-settings-guide, body.relite-dark .numbering-settings-form {
    background: #102844;
    border-color: #29445f
}

    body.relite-dark .numbering-settings-guide h3, body.relite-dark .numbering-settings-header h3, body.relite-dark .numbering-guide-items b {
        color: #f8fafc
    }

body.relite-dark .numbering-guide-visual {
    background-color: #102844;
    background-image: linear-gradient(to bottom,rgba(16,40,68,0) 60%,rgba(16,40,68,.45) 82%,#102844 100%),url('../img/settings-numbering.png');
    background-blend-mode: normal,multiply
}

    body.relite-dark .numbering-guide-visual:after {
        background: radial-gradient(ellipse at 50% 43%,transparent 67%,rgba(16,40,68,.45) 88%,#102844 100%)
    }

@media(max-width:1180px) {
    .numbering-settings-layout {
        grid-template-columns: minmax(240px,.8fr) minmax(0,1.7fr)
    }

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

@media(max-width:900px) {
    .numbering-settings-layout {
        grid-template-columns: 1fr;
        grid-template-areas: "form" "guide"
    }
}

@media(max-width:640px) {
    .numbering-settings-guide, .numbering-settings-form {
        padding: 16px 13px
    }

    .numbering-fields {
        grid-template-columns: 1fr
    }
}

/* Loyalty points settings */
.business-settings-editor .pos-tab-content.loyalty-settings-tab {
    padding: 0;
    border-radius: 0;
    background: transparent
}

.loyalty-settings-layout {
    display: grid;
    grid-template-columns: minmax(270px,.72fr) minmax(0,2fr);
    grid-template-areas: "guide form";
    gap: 22px;
    align-items: stretch
}

.loyalty-settings-guide, .loyalty-settings-form {
    background: #fff;
    border: 1px solid #dce5ef;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(30,51,80,.07)
}

.loyalty-settings-guide {
    grid-area: guide;
    display: flex;
    flex-direction: column;
    padding: 22px 24px
}

.loyalty-settings-form {
    grid-area: form;
    padding: 25px
}

.loyalty-settings-layout svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round
}

.loyalty-guide-visual {
    position: relative;
    width: calc(100% + 8px);
    aspect-ratio: 1.48/1;
    margin: -8px -4px 12px;
    border-radius: 16px;
    background-image: linear-gradient(to bottom,rgba(255,250,244,0) 60%,rgba(255,255,255,.45) 82%,#fff 100%),url('../img/settings-loyalty.png');
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% 100%,contain;
    background-blend-mode: normal,multiply;
    overflow: hidden
}

    .loyalty-guide-visual:after {
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse at 50% 43%,transparent 67%,rgba(255,255,255,.45) 88%,#fff 100%);
        content: ""
    }

.loyalty-settings-guide h3 {
    margin: 5px 0 5px;
    color: #17223a;
    font-size: 18px;
    font-weight: 700
}

.loyalty-guide-subtitle {
    margin: 0 0 18px;
    color: #64748b;
    font-size: 11.5px
}

.loyalty-guide-items > div {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px dashed #e0e6ee;
    color: #34435d;
    font-size: 11.5px
}

.loyalty-guide-items i {
    display: grid;
    place-items: center;
    flex: 0 0 39px;
    height: 39px;
    border-radius: 9px;
    background: #f2f5fa;
    font-style: normal
}

.loyalty-guide-tip {
    display: flex;
    gap: 10px;
    margin-top: auto;
    padding: 14px;
    color: #2563eb;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 9px
}

    .loyalty-guide-tip i {
        font-style: normal
    }

    .loyalty-guide-tip b, .loyalty-guide-tip small {
        display: block
    }

    .loyalty-guide-tip small {
        margin-top: 4px;
        color: #44516a;
        font-size: 12px;
        line-height: 1.5
    }

.loyalty-settings-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 22px
}

    .loyalty-settings-header > i {
        display: grid;
        place-items: center;
        flex: 0 0 54px;
        height: 54px;
        color: #7047e8;
        background: #eee9ff;
        border-radius: 50%;
        font-style: normal
    }

    .loyalty-settings-header h3 {
        margin: 0 0 5px;
        color: #17223a;
        font-size: 19px;
        font-weight: 700
    }

    .loyalty-settings-header p {
        margin: 0;
        color: #64748b;
        font-size: 12px
    }

.loyalty-enable-row {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    align-items: end;
    gap: 25px;
    padding: 15px 10px 20px;
    border-bottom: 1px solid #e5eaf1
}

    .loyalty-enable-row > label {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 44px;
        margin: 0;
        font-size: 12px
    }

    .loyalty-enable-row .form-group {
        margin: 0
    }

.loyalty-settings-form label {
    color: #66758f;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase
}

.loyalty-settings-form .form-control {
    height: 44px;
    border-color: #d5dfeb;
    border-radius: 8px;
    box-shadow: none
}

.loyalty-group {
    margin-top: 13px
}

    .loyalty-group > header {
        display: flex;
        align-items: center;
        gap: 13px;
        padding: 11px 13px;
        border-radius: 10px;
        background: linear-gradient(90deg,#f3efff,#fff)
    }

        .loyalty-group > header > i {
            display: grid;
            place-items: center;
            flex: 0 0 46px;
            height: 46px;
            color: #7047e8;
            background: #8058df;
            border-radius: 50%;
            font-style: normal
        }

            .loyalty-group > header > i svg {
                color: #fff
            }

    .loyalty-group header h4 {
        margin: 0 0 3px;
        color: #17223a;
        font-size: 14px;
        font-weight: 700
    }

    .loyalty-group header p {
        margin: 0;
        color: #64748b;
        font-size: 12px
    }

.loyalty-group--redeem > header {
    background: linear-gradient(90deg,#eefbf3,#fff)
}

    .loyalty-group--redeem > header > i {
        background: #42bd72
    }

.loyalty-field-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 17px 25px;
    padding: 16px 0
}

    .loyalty-field-grid .form-group {
        margin: 0
    }

.loyalty-expiry-field {
    grid-column: span 2
}

    .loyalty-expiry-field > div {
        display: grid;
        grid-template-columns: 1fr 42px 1fr
    }

        .loyalty-expiry-field > div > span {
            display: grid;
            place-items: center;
            border-top: 1px solid #d5dfeb;
            border-bottom: 1px solid #d5dfeb;
            color: #64748b
        }

        .loyalty-expiry-field > div .form-control:first-child {
            border-radius: 8px 0 0 8px
        }

        .loyalty-expiry-field > div .form-control:last-child {
            border-radius: 0 8px 8px 0
        }

body.relite-dark .loyalty-settings-guide, body.relite-dark .loyalty-settings-form {
    background: #102844;
    border-color: #29445f
}

    body.relite-dark .loyalty-settings-guide h3, body.relite-dark .loyalty-settings-header h3, body.relite-dark .loyalty-group header h4 {
        color: #f8fafc
    }

body.relite-dark .loyalty-guide-visual {
    background-color: #102844;
    background-image: linear-gradient(to bottom,rgba(16,40,68,0) 60%,rgba(16,40,68,.45) 82%,#102844 100%),url('../img/settings-loyalty.png');
    background-blend-mode: normal,multiply
}

    body.relite-dark .loyalty-guide-visual:after {
        background: radial-gradient(ellipse at 50% 43%,transparent 67%,rgba(16,40,68,.45) 88%,#102844 100%)
    }

@media(max-width:1180px) {
    .loyalty-settings-layout {
        grid-template-columns: minmax(240px,.8fr) minmax(0,1.7fr)
    }

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

@media(max-width:900px) {
    .loyalty-settings-layout {
        grid-template-columns: 1fr;
        grid-template-areas: "form" "guide"
    }
}

@media(max-width:640px) {
    .loyalty-settings-guide, .loyalty-settings-form {
        padding: 16px 13px
    }

    .loyalty-enable-row, .loyalty-field-grid {
        grid-template-columns: 1fr
    }

    .loyalty-expiry-field {
        grid-column: auto
    }
}

/* Modules & updates settings */
.business-settings-editor .pos-tab-content.modules-settings-tab {
    padding: 0;
    border-radius: 0;
    background: transparent
}

.modules-settings-layout {
    display: grid;
    grid-template-columns: minmax(270px,.72fr) minmax(0,2fr);
    grid-template-areas: "guide form";
    gap: 22px;
    align-items: stretch
}

.modules-settings-guide, .modules-settings-form {
    background: #fff;
    border: 1px solid #dce5ef;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(30,51,80,.07)
}

.modules-settings-guide {
    grid-area: guide;
    display: flex;
    flex-direction: column;
    padding: 22px 24px
}

.modules-settings-form {
    grid-area: form;
    padding: 22px
}

.modules-settings-layout svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round
}

.modules-guide-visual {
    position: relative;
    width: calc(100% + 8px);
    aspect-ratio: 1.48/1;
    margin: -8px -4px 12px;
    border-radius: 16px;
    background-image: linear-gradient(to bottom,rgba(250,249,255,0) 60%,rgba(255,255,255,.45) 82%,#fff 100%),url('../img/settings-modules.png');
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% 100%,contain;
    background-blend-mode: normal,multiply;
    overflow: hidden
}

    .modules-guide-visual:after {
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse at 50% 43%,transparent 67%,rgba(255,255,255,.45) 88%,#fff 100%);
        content: ""
    }

.modules-settings-guide h3 {
    margin: 5px 0 5px;
    color: #17223a;
    font-size: 18px;
    font-weight: 700
}

.modules-guide-subtitle {
    margin: 0 0 17px;
    color: #64748b;
    font-size: 11px;
    line-height: 1.45
}

.modules-guide-items > div {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 15px
}

.modules-guide-items i {
    display: grid;
    place-items: center;
    flex: 0 0 38px;
    height: 38px;
    border-radius: 9px;
    background: #f2f5fa;
    font-style: normal
}

.modules-guide-items b, .modules-guide-items small {
    display: block
}

.modules-guide-items b {
    margin-bottom: 3px;
    color: #17223a;
    font-size: 12px
}

.modules-guide-items small {
    color: #64748b;
    font-size: 12px;
    line-height: 1.45
}

.modules-guide-tip {
    display: flex;
    gap: 10px;
    margin-top: auto;
    padding: 14px;
    color: #2563eb;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 9px
}

    .modules-guide-tip i {
        font-style: normal
    }

    .modules-guide-tip b, .modules-guide-tip small {
        display: block
    }

    .modules-guide-tip small {
        margin-top: 4px;
        color: #44516a;
        font-size: 12px;
        line-height: 1.5
    }

.modules-settings-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 17px;
    border-bottom: 1px solid #e5eaf1
}

    .modules-settings-header > i {
        display: grid;
        place-items: center;
        flex: 0 0 45px;
        height: 45px;
        color: #7047e8;
        background: #eee9ff;
        border-radius: 10px;
        font-style: normal
    }

    .modules-settings-header h3 {
        margin: 0 0 4px;
        color: #17223a;
        font-size: 16px;
        font-weight: 700
    }

    .modules-settings-header p {
        margin: 0;
        color: #64748b;
        font-size: 12px
    }

.modules-option-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 17px 22px;
    padding-top: 18px
}

.module-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-height: 68px;
    margin: 0 !important;
    padding: 11px;
    border: 1px solid #dce5ef;
    border-radius: 10px;
    background: #fff;
    cursor: pointer
}

    .module-option > i {
        display: grid;
        place-items: center;
        flex: 0 0 39px;
        height: 39px;
        border-radius: 9px;
        background: #f2f5fa;
        font-style: normal
    }

    .module-option > span:not(.module-option-switch) {
        flex: 1
    }

    .module-option b, .module-option small {
        display: block
    }

    .module-option b {
        margin-bottom: 3px;
        color: #17223a;
        font-size: 11px
    }

    .module-option small {
        color: #64748b;
        font-size: 12px;
        line-height: 1.4;
        font-weight: 500;
    }

    .module-option > .module-option-switch {
        position: relative;
        display: inline-flex;
        flex: 0 0 30px;
        width: 30px !important;
        min-width: 30px;
        max-width: 30px;
        height: 16px !important;
        margin: 6px 0 0 auto
    }

.module-option-switch__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    opacity: 0;
    pointer-events: none
}

.module-option-switch__track {
    position: absolute;
    inset: 0;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: #e8edf3;
    transition: background-color .18s ease,border-color .18s ease,box-shadow .18s ease
}

    .module-option-switch__track:before {
        position: absolute;
        top: 1px;
        left: 1px;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 1px 3px rgba(15,23,42,.25);
        transition: transform .18s ease;
        content: ""
    }

.module-option-switch__input:checked + .module-option-switch__track {
    border-color: #ff6b13;
    background: #ff6b13
}

    .module-option-switch__input:checked + .module-option-switch__track:before {
        transform: translateX(14px)
    }

.module-option-switch__input:focus-visible + .module-option-switch__track {
    box-shadow: 0 0 0 3px rgba(255,107,19,.2)
}

.module-option:hover .module-option-switch__track {
    border-color: #ff9a5d
}

body.relite-dark .modules-settings-guide, body.relite-dark .modules-settings-form, body.relite-dark .module-option {
    background: #102844;
    border-color: #29445f
}

    body.relite-dark .modules-settings-guide h3, body.relite-dark .modules-settings-header h3, body.relite-dark .modules-guide-items b, body.relite-dark .module-option b {
        color: #f8fafc
    }

body.relite-dark .modules-guide-visual {
    background-color: #102844;
    background-image: linear-gradient(to bottom,rgba(16,40,68,0) 60%,rgba(16,40,68,.45) 82%,#102844 100%),url('../img/settings-modules.png');
    background-blend-mode: normal,multiply
}

body.relite-dark .module-option-switch__track {
    border-color: #49627c;
    background: #29445f
}

body.relite-dark .module-option-switch__input:checked + .module-option-switch__track {
    border-color: #ff7a25;
    background: #ff7a25
}

body.relite-dark .modules-guide-visual:after {
    background: radial-gradient(ellipse at 50% 43%,transparent 67%,rgba(16,40,68,.45) 88%,#102844 100%)
}

@media(max-width:1180px) {
    .modules-settings-layout {
        grid-template-columns: minmax(240px,.8fr) minmax(0,1.7fr)
    }

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

@media(max-width:900px) {
    .modules-settings-layout {
        grid-template-columns: 1fr;
        grid-template-areas: "form" "guide"
    }
}

@media(max-width:640px) {
    .modules-settings-guide, .modules-settings-form {
        padding: 16px 13px
    }

    .modules-option-grid {
        grid-template-columns: 1fr
    }
}

/* Business settings: custom labels */
.custom-labels-settings-tab {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    overflow: visible
}

.custom-labels-settings-layout {
    display: grid;
    grid-template-columns: minmax(300px,.72fr) minmax(0,1.85fr);
    grid-template-areas: "guide form";
    gap: 20px;
    align-items: stretch
}

.custom-labels-settings-guide,
.custom-labels-settings-form {
    min-width: 0;
    background: #fff;
    border: 1px solid #dbe4ef;
    border-radius: 15px;
    box-shadow: 0 12px 28px rgba(15,23,42,.06)
}

.custom-labels-settings-guide {
    grid-area: guide;
    display: flex;
    flex-direction: column;
    padding: 22px;
    overflow: hidden;
    align-self: start;
    height: auto
}

.custom-labels-guide-visual {
    position: relative;
    min-height: 218px;
    margin: 0 0 18px;
    border-radius: 12px;
    overflow: hidden;
    background: url('../img/settings-custom-labels.png') center/contain no-repeat;
}

    .custom-labels-guide-visual:after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg,transparent 68%,#fff 100%),radial-gradient(ellipse at center,transparent 55%,rgba(255,255,255,.42) 100%);
        pointer-events: none
    }

.custom-labels-settings-guide h3 {
    margin: 0 0 5px;
    color: #0f172a;
    font-size: 18px;
    font-weight: 700
}

.custom-labels-settings-guide > p {
    margin: 0 0 18px;
    color: #536784;
    font-size: 12px;
    line-height: 1.55
}

.custom-labels-guide-items {
    display: grid;
    gap: 14px
}

    .custom-labels-guide-items > div {
        display: grid;
        grid-template-columns: 40px minmax(0,1fr);
        gap: 11px;
        align-items: start
    }

    .custom-labels-guide-items i,
    .custom-labels-guide-tip > i {
        display: grid;
        place-items: center;
        width: 40px;
        height: 40px;
        border-radius: 13px;
        color: #7c3aed;
        background: #f1eafe;
        font-style: normal
    }

        .custom-labels-guide-items i.blue {
            color: #1684ef;
            background: #e8f3ff
        }

        .custom-labels-guide-items i.green {
            color: #16b768;
            background: #e9f9ef
        }

        .custom-labels-guide-items i.orange {
            color: #ff6b13;
            background: #fff0e5
        }

    .custom-labels-guide-items svg,
    .custom-labels-guide-tip svg,
    .custom-labels-settings-header svg {
        width: 21px;
        height: 21px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round
    }

    .custom-labels-guide-items span {
        min-width: 0
    }

    .custom-labels-guide-items b {
        display: block;
        color: #172033;
        font-size: 12px;
        margin: 1px 0 2px
    }

    .custom-labels-guide-items small {
        display: block;
        color: #536784;
        font-size: 12px;
        line-height: 1.45
    }

.custom-labels-guide-tip {
    display: grid;
    grid-template-columns: 32px minmax(0,1fr);
    gap: 10px;
    margin-top: 20px;
    padding: 14px;
    border: 1px solid #b9d8ff;
    border-radius: 11px;
    background: linear-gradient(135deg,#f4f9ff,#edf5ff)
}

    .custom-labels-guide-tip > i {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        color: #1677ed;
        background: transparent
    }

    .custom-labels-guide-tip b {
        display: block;
        color: #1677ed;
        font-size: 12px;
        margin-bottom: 3px
    }

    .custom-labels-guide-tip small {
        display: block;
        color: #324d70;
        font-size: 12px;
        line-height: 1.45
    }

.custom-labels-settings-form {
    grid-area: form;
    padding: 24px 28px
}

.custom-labels-settings-header {
    display: flex;
    gap: 14px;
    align-items: center;
    padding-bottom: 20px;
    margin-bottom: 8px;
    border-bottom: 1px solid #e1e8f0
}

    .custom-labels-settings-header > i {
        display: grid;
        place-items: center;
        flex: 0 0 48px;
        width: 48px;
        height: 48px;
        border-radius: 14px;
        color: #7c3aed;
        background: #f1eafe;
        font-style: normal
    }

    .custom-labels-settings-header h3 {
        margin: 0 0 4px;
        color: #111827;
        font-size: 18px;
        font-weight: 700
    }

    .custom-labels-settings-header p {
        margin: 0;
        color: #536784;
        font-size: 12px
    }

.custom-labels-settings-form > .row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px
}

    .custom-labels-settings-form > .row > [class*=col-sm-] {
        float: none;
        padding-left: 10px;
        padding-right: 10px
    }

.custom-labels-settings-form .clearfix {
    display: none
}

.custom-labels-settings-form h4 {
    display: flex;
    align-items: center;
    min-height: 42px;
    margin: 14px 0 13px;
    padding: 11px 0;
    border-top: 1px solid #e1e8f0;
    color: #172033;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .035em
}

.custom-labels-section-icon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    margin-right: 10px;
    border-radius: 10px;
    color: #7c3aed;
    background: #f1eafe
}

    .custom-labels-section-icon.orange {
        color: #ff6b13;
        background: #fff0e5
    }

    .custom-labels-section-icon.blue {
        color: #1684ef;
        background: #e8f3ff
    }

    .custom-labels-section-icon.green {
        color: #16b768;
        background: #e9f9ef
    }

    .custom-labels-section-icon.teal {
        color: #0ea5a8;
        background: #e7f9f8
    }

    .custom-labels-section-icon svg {
        width: 18px;
        height: 18px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round
    }

.custom-labels-settings-form > .row > .col-sm-12:first-child h4 {
    border-top: 0;
    margin-top: 0
}

.custom-labels-settings-form .form-group {
    margin-bottom: 15px
}

    .custom-labels-settings-form .form-group > label {
        display: block;
        margin-bottom: 7px;
        color: #536784;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .06em
    }

.custom-labels-settings-form .form-control {
    height: 44px;
    border: 1px solid #cfdae8;
    border-radius: 9px;
    box-shadow: none;
    background: #fff;
    color: #172033;
    padding: 9px 13px
}

    .custom-labels-settings-form .form-control:focus {
        border-color: #8b5cf6;
        box-shadow: 0 0 0 3px rgba(139,92,246,.11)
    }

.custom-labels-settings-form .checkbox {
    margin-top: 7px;
    color: #44546a
}

body.relite-dark .custom-labels-settings-guide,
body.relite-dark .custom-labels-settings-form {
    background: #102844;
    border-color: #294563
}

body.relite-dark .custom-labels-guide-visual:after {
    background: linear-gradient(180deg,transparent 60%,#102844 100%)
}

body.relite-dark .custom-labels-settings-guide h3,
body.relite-dark .custom-labels-guide-items b,
body.relite-dark .custom-labels-settings-header h3,
body.relite-dark .custom-labels-settings-form h4 {
    color: #f8fafc
}

body.relite-dark .custom-labels-settings-guide > p,
body.relite-dark .custom-labels-guide-items small,
body.relite-dark .custom-labels-settings-header p {
    color: #a9bdd1
}

body.relite-dark .custom-labels-settings-header,
body.relite-dark .custom-labels-settings-form h4 {
    border-color: #294563
}

body.relite-dark .custom-labels-settings-form .form-control {
    background: #0b1f35;
    border-color: #38516c;
    color: #edf5ff
}

@media(max-width:1080px) {
    .custom-labels-settings-layout {
        grid-template-columns: minmax(260px,.72fr) minmax(0,1.55fr)
    }
}

@media(max-width:900px) {
    .custom-labels-settings-layout {
        grid-template-columns: 1fr;
        grid-template-areas: "form" "guide"
    }
}

@media(max-width:767px) {
    .custom-labels-settings-form {
        padding: 18px 14px
    }

        .custom-labels-settings-form > .row > [class*=col-sm-] {
            width: 100%
        }

    .custom-labels-settings-guide {
        padding: 18px
    }

    .custom-labels-guide-visual {
        margin: 0 0 16px
    }
}

/* Supplied artwork for Products, Tax and Sales settings guides */
.product-pricing-illustration,
.tax-settings-guide__visual,
.sales-guide-visual {
    position: relative;
    display: block;
    width: 100%;
    border-radius: 13px;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: center;
}

.product-pricing-illustration {
    min-height: 235px;
    margin: -4px -4px 12px;
    background-image: linear-gradient(to bottom,rgba(255,255,255,0) 70%,#fff 100%),url('../img/settings-products.png');
    background-size: 100% 100%,contain
}

.tax-settings-guide__visual {
    min-height: 215px;
    margin: -5px auto 8px;
    background-image: linear-gradient(to bottom,rgba(255,255,255,0) 72%,#fff 100%),url('../img/settings-tax.png');
    background-size: 100% 100%,contain
}

    .tax-settings-guide__visual > svg {
        display: none !important
    }

.sales-guide-visual {
    min-height: 225px;
    margin-bottom: 10px;
    background-image: linear-gradient(to bottom,rgba(255,255,255,0) 70%,#fff 100%),url('../img/settings-sales.png');
    background-size: 100% 100%,contain
}

body.relite-dark .product-pricing-illustration,
body.relite-dark .tax-settings-guide__visual,
body.relite-dark .sales-guide-visual {
    background-color: #102844
}

body.relite-dark .product-pricing-illustration {
    background-image: linear-gradient(to bottom,rgba(16,40,68,0) 70%,#102844 100%),url('../img/settings-products.png')
}

body.relite-dark .tax-settings-guide__visual {
    background-image: linear-gradient(to bottom,rgba(16,40,68,0) 72%,#102844 100%),url('../img/settings-tax.png')
}

body.relite-dark .sales-guide-visual {
    background-image: linear-gradient(to bottom,rgba(16,40,68,0) 70%,#102844 100%),url('../img/settings-sales.png')
}

/* Company profile logo upload */
.business-settings-editor .company-profile-form .company-logo-upload-control {
    position: relative;
    display: flex;
    align-items: stretch;
    width: 100%;
    min-width: 0;
    height: 42px;
    overflow: hidden;
    border: 1px dashed #cbd8e7;
    border-radius: 9px;
    background: #fff
}

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

.business-settings-editor .company-profile-form .company-logo-file-name {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 12px;
    overflow: hidden;
    color: #64748b;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap
}

.business-settings-editor .company-profile-form .company-logo-browse-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    flex: 0 0 auto;
    min-width: 92px;
    height: 42px;
    margin: -1px -1px -1px 0;
    padding: 0 14px;
    border: 1px solid #ff6b13;
    border-radius: 0 9px 9px 0;
    background: #ff6b13;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
    transition: background-color .18s ease,border-color .18s ease
}

    .business-settings-editor .company-profile-form .company-logo-browse-button:hover,
    .business-settings-editor .company-profile-form .company-logo-browse-button:focus {
        border-color: #e85a08;
        background: #e85a08;
        color: #fff
    }

    .business-settings-editor .company-profile-form .company-logo-browse-button svg {
        width: 15px;
        height: 15px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round
    }

body.relite-dark .business-settings-editor .company-profile-form .company-logo-upload-control {
    border-color: #38516c;
    background: #0b1f35
}

body.relite-dark .business-settings-editor .company-profile-form .company-logo-file-name {
    color: #b8c8d9
}

body.relite-dark .tax-inline-switch-track {
    border-color: #49627c;
    background: #29445f
}

body.relite-dark .tax-inline-switch-input:checked + .tax-inline-switch-track {
    border-color: #ff7a25;
    background: #ff7a25
}

/* Slim toggles for Products & Pricing settings */
.product-pricing-options [class*="icheckbox_square-"],
.product-pricing-native-check [class*="icheckbox_square-"] {
    position: relative;
    display: inline-block;
    flex: 0 0 30px;
    width: 30px !important;
    height: 16px !important;
    margin-left: auto;
    box-sizing: border-box !important;
    padding: 0 !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 999px !important;
    background: #e8edf3 !important;
    background-image: none !important;
    box-shadow: none !important;
    vertical-align: middle !important;
    transition: background-color .18s ease,border-color .18s ease
}

    .product-pricing-options [class*="icheckbox_square-"]:after,
    .product-pricing-native-check [class*="icheckbox_square-"]:after {
        content: "";
        position: absolute;
        top: 1px;
        left: 1px;
        width: 12px;
        height: 12px;
        box-sizing: border-box;
        border: 0 !important;
        border-radius: 50% !important;
        background: #fff;
        box-shadow: 0 1px 3px rgba(15,23,42,.25);
        transition: transform .18s ease
    }

    .product-pricing-options [class*="icheckbox_square-"].checked,
    .product-pricing-native-check [class*="icheckbox_square-"].checked {
        border-color: #ff6b13 !important;
        background: #ff6b13 !important
    }

        .product-pricing-options [class*="icheckbox_square-"].checked:after,
        .product-pricing-native-check [class*="icheckbox_square-"].checked:after {
            transform: translateX(14px)
        }

.product-pricing-native-check > input[type="checkbox"] {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 16px;
    margin: 0;
    border: 1px solid #cbd5e1;
    box-sizing: border-box;
    border-radius: 999px !important;
    appearance: none;
    -webkit-appearance: none;
    background-color: #e8edf3;
    background-image: radial-gradient(circle at 7px 50%,#fff 0 6px,transparent 6.5px);
    box-shadow: none;
    cursor: pointer;
    transition: background-color .18s ease,border-color .18s ease
}

    .product-pricing-native-check > input[type="checkbox"]:checked {
        border-color: #ff6b13;
        background-color: #ff6b13;
        background-image: radial-gradient(circle at 23px 50%,#fff 0 6px,transparent 6.5px)
    }

    .product-pricing-native-check > input[type="checkbox"]:after {
        display: none !important;
        content: none !important
    }

    .product-pricing-native-check > input[type="checkbox"]:focus-visible {
        outline: 0;
        box-shadow: 0 0 0 3px rgba(255,107,19,.2)
    }

body.relite-dark .product-pricing-options [class*="icheckbox_square-"]:not(.checked),
body.relite-dark .product-pricing-native-check [class*="icheckbox_square-"]:not(.checked),
body.relite-dark .product-pricing-native-check > input[type="checkbox"]:not(:checked) {
    border-color: #49627c;
    background-color: #29445f !important
}

/* Sales setting option rows and slim toggles */
.sales-settings-form .sales-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    margin: 19px 0 0 !important;
    padding: 7px 12px;
    border: 1px solid #d5e1ef;
    border-radius: 8px;
    background: #fff;
    font-weight: 600 !important;
    cursor: pointer
}

    .sales-settings-form .sales-toggle > i {
        flex: 0 0 24px;
        width: 24px;
        height: 24px;
        border: 0;
        background: transparent
    }

    .sales-settings-form .sales-toggle > span {
        order: 0;
        flex: 1 1 auto;
        min-width: 0
    }

    .sales-settings-form .sales-toggle > [class*="icheckbox_square-"] {
        position: relative;
        order: 3;
        display: inline-block;
        flex: 0 0 30px;
        width: 30px !important;
        height: 16px !important;
        margin: 0 0 0 auto !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 999px !important;
        background: #e8edf3 !important;
        background-image: none !important;
        box-shadow: none !important;
        vertical-align: middle !important;
        transition: background-color .18s ease,border-color .18s ease
    }

        .sales-settings-form .sales-toggle > [class*="icheckbox_square-"]:after {
            content: "";
            position: absolute;
            top: 1px;
            left: 1px;
            width: 12px;
            height: 12px;
            box-sizing: border-box;
            border: 0 !important;
            border-radius: 50% !important;
            background: #fff;
            box-shadow: 0 1px 3px rgba(15,23,42,.25);
            transition: transform .18s ease
        }

        .sales-settings-form .sales-toggle > [class*="icheckbox_square-"].checked {
            border-color: #ff6b13 !important;
            background: #ff6b13 !important
        }

            .sales-settings-form .sales-toggle > [class*="icheckbox_square-"].checked:after {
                transform: translateX(14px)
            }

    .sales-settings-form .sales-toggle:hover {
        border-color: #b9cce2
    }

.sales-settings-form .sales-payment-switch__track {
    flex-basis: 30px;
    width: 30px;
    height: 16px
}

    .sales-settings-form .sales-payment-switch__track:after {
        top: 1px;
        left: 1px;
        width: 12px;
        height: 12px
    }

.sales-settings-form .sales-payment-switch > input:checked + .sales-payment-switch__track:after,
.sales-settings-form .sales-payment-switch > .icheckbox_square-blue.checked + .sales-payment-switch__track:after {
    transform: translateX(14px)
}

body.relite-dark .sales-settings-form .sales-toggle {
    border-color: #38516c;
    background: #102844
}

    body.relite-dark .sales-settings-form .sales-toggle > [class*="icheckbox_square-"]:not(.checked) {
        border-color: #49627c !important;
        background: #29445f !important
    }

/* Vertically center text in every Select2 single-value dropdown */
.select2-container--default .select2-selection--single {
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box
}

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        display: flex !important;
        align-items: center !important;
        flex: 1 1 auto;
        min-width: 0;
        height: 100% !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        line-height: normal !important
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        top: 50% !important;
        right: 4px;
        height: 18px !important;
        transform: translateY(-50%)
    }

/* Cashier behavior option rows and slim toggles */
.cashier-behavior-card .col-sm-4 {
    padding: 5px 7px
}

.cashier-behavior-card .checkbox {
    width: 100%;
    min-height: 46px
}

    .cashier-behavior-card .checkbox label {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        min-height: 46px;
        padding: 7px 10px;
        border: 1px solid #d5e1ef;
        border-radius: 8px;
        background: #fff;
        font-weight: 600;
        cursor: pointer
    }

        .cashier-behavior-card .checkbox label:before {
            order: 0;
            flex: 0 0 24px;
            width: 24px;
            height: 24px;
            margin: 0;
            border: 0;
            background-color: transparent
        }

        .cashier-behavior-card .checkbox label.cashier-setting-option:before {
            display: none !important
        }

        .cashier-setting-option__icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            order: 0;
            flex: 0 0 24px;
            width: 24px;
            height: 24px
        }

            .cashier-setting-option__icon svg {
                width: 17px;
                height: 17px;
                fill: none;
                stroke: currentColor;
                stroke-width: 1.8;
                stroke-linecap: round;
                stroke-linejoin: round
            }

            .cashier-setting-option__icon.is-blue { color: #3b82f6 }
            .cashier-setting-option__icon.is-violet { color: #8b5cf6 }
            .cashier-setting-option__icon.is-orange { color: #ff6b1a }
            .cashier-setting-option__icon.is-green { color: #22b573 }

        .cashier-behavior-card .checkbox label > [class*="icheckbox_square-"] {
            position: relative;
            order: 3 !important;
            display: inline-block;
            flex: 0 0 30px;
            width: 30px !important;
            height: 16px !important;
            margin: 0 0 0 auto !important;
            padding: 0 !important;
            box-sizing: border-box !important;
            border: 1px solid #cbd5e1 !important;
            border-radius: 999px !important;
            background: #e8edf3 !important;
            background-image: none !important;
            box-shadow: none !important;
            vertical-align: middle !important;
            transition: background-color .18s ease,border-color .18s ease
        }

            .cashier-behavior-card .checkbox label > [class*="icheckbox_square-"]:after {
                content: "";
                position: absolute;
                top: 1px;
                left: 1px;
                width: 12px;
                height: 12px;
                box-sizing: border-box;
                border: 0 !important;
                border-radius: 50% !important;
                background: #fff;
                box-shadow: 0 1px 3px rgba(15,23,42,.25);
                transition: transform .18s ease
            }

            .cashier-behavior-card .checkbox label > [class*="icheckbox_square-"].checked {
                border-color: #ff6b13 !important;
                background: #ff6b13 !important
            }

                .cashier-behavior-card .checkbox label > [class*="icheckbox_square-"].checked:after {
                    transform: translateX(14px)
                }

        .cashier-behavior-card .checkbox label:hover {
            border-color: #b9cce2
        }

/* Restore the bordered Select2 controls in weighing-scale settings. */
.cashier-scale-card .select2-container--default .select2-selection--single {
    width: 100%;
    height: 38px !important;
    min-height: 38px;
    padding-left: 45px !important;
    border: 1px solid #d6e0eb !important;
    border-radius: 7px !important;
    background: #fff;
    box-shadow: none !important
}

    .cashier-scale-card .select2-container--default .select2-selection--single:hover,
    .cashier-scale-card .select2-container--default.select2-container--focus .select2-selection--single,
    .cashier-scale-card .select2-container--default.select2-container--open .select2-selection--single {
        border-color: #8b5cf6 !important
    }

body.relite-dark .cashier-behavior-card .checkbox label {
    border-color: #38516c;
    background: #102844;
    color: #e8f0f8
}

    body.relite-dark .cashier-behavior-card .checkbox label > [class*="icheckbox_square-"]:not(.checked) {
        border-color: #49627c !important;
        background: #29445f !important
    }

body.relite-dark .cashier-scale-card .select2-container--default .select2-selection--single {
    border-color: #38516c !important;
    background: #0b1f35
}

.cashier-settings-guide .cashier-guide-items > div {
    align-items: flex-start;
    margin-bottom: 16px
}

    .cashier-settings-guide .cashier-guide-items > div > span {
        display: block;
        min-width: 0;
        padding-top: 1px
    }

.cashier-settings-guide .cashier-guide-items b,
.cashier-settings-guide .cashier-guide-items small {
    display: block
}

.cashier-settings-guide .cashier-guide-items b {
    margin-bottom: 3px;
    line-height: 1.35
}

.cashier-settings-guide .cashier-guide-items small {
    color: #64748b;
    font-size: 10.5px;
    font-weight: 400;
    line-height: 1.45
}

body.relite-dark .cashier-settings-guide .cashier-guide-items small {
    color: #a9bdd1
}

/* Cashier shortcut rows: single-line, vertically centered content */
.cashier-shortcuts-card .table {
    width: 100%;
    table-layout: fixed
}

    .cashier-shortcuts-card .table th,
    .cashier-shortcuts-card .table td {
        height: 45px;
        vertical-align: middle !important
    }

        .cashier-shortcuts-card .table th:first-child,
        .cashier-shortcuts-card .table td:first-child {
            width: 55%;
            white-space: nowrap
        }

        .cashier-shortcuts-card .table th:last-child,
        .cashier-shortcuts-card .table td:last-child {
            width: 45%
        }

        .cashier-shortcuts-card .table td:first-child {
            display: table-cell !important;
            min-height: 45px;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 1.25
        }

    .cashier-shortcuts-card .table .form-control {
        width: 100%;
        height: 40px !important;
        padding-top: 0;
        padding-bottom: 0;
        line-height: 40px;
        white-space: nowrap
    }

    .cashier-shortcuts-card .table td:first-child:before {
        display: inline-block;
        margin-right: 8px;
        vertical-align: middle
    }

/* Business settings: customer Display Screen */
.business-settings-editor .pos-tab-content.display-screen-settings-tab {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important
}

.display-screen-settings-layout {
    display: grid;
    grid-template-columns: minmax(300px,.72fr) minmax(0,2fr);
    gap: 20px;
    align-items: stretch
}

.display-screen-settings-guide,
.display-screen-settings-form {
    min-width: 0;
    border: 1px solid #dbe4ef;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(15,23,42,.06)
}

.display-screen-settings-guide {
    display: flex;
    flex-direction: column;
    padding: 20px 22px;
    overflow: hidden
}

.display-screen-guide-visual {
    position: relative;
    width: 100%;
    min-height: 255px;
    margin: -8px 0 12px;
    border-radius: 12px;
    background-color: #fff;
    background-image: linear-gradient(to bottom,rgba(255,255,255,0) 78%,#fff 100%),url('../img/settings-display-screen.png');
    background-position: center;
    background-size: 100% 100%,contain;
    background-repeat: no-repeat
}

.display-screen-settings-guide h3 {
    margin: 0 0 17px;
    color: #15213a;
    font-size: 18px;
    font-weight: 700
}

.display-screen-guide-items {
    display: grid;
    gap: 16px
}

    .display-screen-guide-items > div {
        display: grid;
        grid-template-columns: 40px minmax(0,1fr);
        gap: 11px;
        align-items: start
    }

    .display-screen-guide-items i {
        display: grid;
        place-items: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        color: #7c3aed;
        background: #f1eafe;
        font-style: normal
    }

        .display-screen-guide-items i.blue {
            color: #1684ef;
            background: #e8f3ff
        }

        .display-screen-guide-items i.green {
            color: #16b768;
            background: #e9f9ef
        }

        .display-screen-guide-items i.orange {
            color: #ff6b13;
            background: #fff0e5
        }

    .display-screen-guide-items span {
        min-width: 0;
        padding-top: 1px
    }

    .display-screen-guide-items b, .display-screen-guide-items small {
        display: block
    }

    .display-screen-guide-items b {
        margin-bottom: 3px;
        color: #172033;
        font-size: 12px
    }

    .display-screen-guide-items small {
        color: #64748b;
        font-size: 10.5px;
        line-height: 1.45
    }

    .display-screen-guide-items svg, .display-screen-guide-tip svg {
        width: 19px;
        height: 19px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round
    }

.display-screen-guide-tip {
    display: grid;
    grid-template-columns: 28px minmax(0,1fr);
    gap: 9px;
    margin-top: auto;
    padding: 13px;
    border: 1px solid #ffd0ae;
    border-radius: 9px;
    background: #fff7ef;
    color: #ff6b13
}

    .display-screen-guide-tip > i {
        font-style: normal
    }

    .display-screen-guide-tip b, .display-screen-guide-tip small {
        display: block
    }

    .display-screen-guide-tip b {
        margin-bottom: 3px;
        font-size: 12px
    }

    .display-screen-guide-tip small {
        color: #9a5427;
        font-size: 10.5px;
        line-height: 1.45
    }

.display-screen-settings-form {
    padding: 22px 28px
}

.display-screen-enable-row {
    padding: 0 2px 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid #e1e8f0
}

    .display-screen-enable-row > label {
        display: flex;
        align-items: flex-start;
        gap: 11px;
        margin: 0;
        cursor: pointer
    }

        .display-screen-enable-row > label > span {
            min-width: 0
        }

    .display-screen-enable-row b, .display-screen-enable-row small {
        display: block
    }

    .display-screen-enable-row b {
        margin-bottom: 5px;
        color: #172033;
        font-size: 13px
    }

    .display-screen-enable-row small {
        color: #64748b;
        font-size: 11px;
        line-height: 1.45
    }

    .display-screen-enable-row [class*="icheckbox_square-"] {
        position: relative;
        display: inline-block;
        box-sizing: border-box !important;
        flex: 0 0 30px;
        width: 30px !important;
        height: 16px !important;
        margin-top: 1px;
        padding: 0 !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 999px !important;
        background: #e8edf3 !important;
        background-image: none !important;
        box-shadow: none !important;
        transition: background-color .18s ease,border-color .18s ease
    }

        .display-screen-enable-row [class*="icheckbox_square-"]:after {
            content: "";
            position: absolute;
            top: 1px;
            left: 1px;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #fff;
            box-shadow: 0 1px 3px rgba(15,23,42,.25);
            transition: transform .18s ease
        }

        .display-screen-enable-row [class*="icheckbox_square-"].checked {
            border-color: #ff6b13 !important;
            background: #ff6b13 !important
        }

            .display-screen-enable-row [class*="icheckbox_square-"].checked:after {
                transform: translateX(14px)
            }

.display-screen-heading-field > label,
.display-screen-upload-field > label {
    display: block;
    margin-bottom: 7px;
    color: #536784;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .055em
}

.display-screen-heading-field {
    margin-bottom: 18px
}

    .display-screen-heading-field .tox-tinymce {
        border: 1px solid #d4deea;
        border-radius: 8px;
        box-shadow: none
    }

.display-screen-carousel-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 14px 20px
}

.display-screen-upload-field {
    min-width: 0;
    margin: 0
}

.display-screen-upload-control {
    position: relative;
    display: flex;
    align-items: stretch;
    width: 100%;
    min-width: 0;
    height: 42px;
    overflow: hidden;
    border: 1px dashed #bfd0e3;
    border-radius: 8px;
    background: #fff
}

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

.display-screen-file-name {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 10px;
    overflow: hidden;
    color: #64748b;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap
}

.display-screen-browse-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 0 0 auto;
    min-width: 96px;
    height: 42px;
    margin: -1px -1px -1px 0 !important;
    padding: 0 13px;
    border: 1px solid #ff6b13;
    border-radius: 0 8px 8px 0;
    background: #ff6b13;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    cursor: pointer
}

    .display-screen-browse-button:hover {
        background: #e85a08;
        border-color: #e85a08
    }

    .display-screen-browse-button svg {
        width: 14px;
        height: 14px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round
    }

.display-screen-upload-field .help-block {
    margin: 5px 0 0;
    color: #7b8798;
    font-size: 9.5px;
    line-height: 1.35
}

body.relite-dark .display-screen-settings-guide,
body.relite-dark .display-screen-settings-form {
    border-color: #294563;
    background: #102844
}

body.relite-dark .display-screen-guide-visual {
    background-color: #102844;
    background-image: linear-gradient(to bottom,rgba(16,40,68,0) 78%,#102844 100%),url('../img/settings-display-screen.png')
}

body.relite-dark .display-screen-settings-guide h3,
body.relite-dark .display-screen-guide-items b,
body.relite-dark .display-screen-enable-row b {
    color: #f8fafc
}

body.relite-dark .display-screen-guide-items small,
body.relite-dark .display-screen-enable-row small {
    color: #a9bdd1
}

body.relite-dark .display-screen-enable-row {
    border-color: #294563
}

body.relite-dark .display-screen-upload-control {
    border-color: #49627c;
    background: #0b1f35
}

body.relite-dark .display-screen-file-name {
    color: #b8c8d9
}

@media(max-width:1180px) {
    .display-screen-settings-layout {
        grid-template-columns: minmax(260px,.75fr) minmax(0,1.7fr)
    }
}

@media(max-width:900px) {
    .display-screen-settings-layout {
        grid-template-columns: 1fr
    }

    .display-screen-settings-guide {
        order: 2
    }

    .display-screen-settings-form {
        order: 1
    }
}

@media(max-width:700px) {
    .display-screen-settings-guide, .display-screen-settings-form {
        padding: 16px 13px
    }

    .display-screen-carousel-grid {
        grid-template-columns: 1fr
    }
}

/* Business settings: Email & SMTP */
.email-settings-tab {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important
}

.email-settings-layout {
    display: grid;
    grid-template-columns: minmax(300px,.72fr) minmax(0,2fr);
    gap: 24px;
    align-items: stretch
}

.email-settings-guide, .email-settings-form {
    border: 1px solid #dbe4ef;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(15,23,42,.06)
}

.email-settings-guide {
    display: flex;
    flex-direction: column;
    padding: 18px 24px 20px;
    overflow: hidden
}

.email-settings-guide__visual {
    height: 238px;
    margin: -4px -5px 8px;
    background: linear-gradient(to bottom,rgba(255,255,255,0) 72%,#fff 100%),url('../img/settings-email.png') center/contain no-repeat
}

.email-settings-guide h3 {
    margin: 0 0 15px;
    font-size: 21px;
    font-weight: 700;
    color: #101d36
}

.email-settings-guide__items {
    display: grid;
    gap: 15px
}

    .email-settings-guide__items > div {
        display: flex;
        align-items: flex-start;
        gap: 13px
    }

    .email-settings-guide__items span {
        display: grid;
        place-items: center;
        flex: 0 0 42px;
        width: 42px;
        height: 42px;
        border-radius: 50%
    }

    .email-settings-guide__items svg {
        width: 22px;
        height: 22px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round
    }

    .email-settings-guide__items .is-blue {
        color: #1671e8;
        background: #e8f2ff
    }

    .email-settings-guide__items .is-green {
        color: #06a85f;
        background: #e8f8ef
    }

    .email-settings-guide__items .is-purple {
        color: #7847e8;
        background: #f1ecff
    }

    .email-settings-guide__items .is-orange {
        color: #ff6b17;
        background: #fff0e7
    }

    .email-settings-guide__items p {
        margin: 1px 0 0;
        line-height: 1.3
    }

    .email-settings-guide__items b {
        display: block;
        margin-bottom: 3px;
        font-size: 14px;
        color: #101d36
    }

    .email-settings-guide__items small {
        display: block;
        font-size: 12px;
        line-height: 1.45;
        color: #526987
    }

.email-settings-guide__tip {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 18px;
    padding: 14px 16px;
    border: 1px solid #ffb87e;
    border-radius: 10px;
    background: #fff8f1;
    color: #f36b14
}

    .email-settings-guide__tip > svg {
        flex: 0 0 25px;
        width: 25px;
        height: 25px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round
    }

    .email-settings-guide__tip p {
        display: flex;
        gap: 5px;
        margin: 0;
        line-height: 1.45
    }

    .email-settings-guide__tip b {
        font-size: 14px;
        color: #1b2a43
    }

    .email-settings-guide__tip span {
        font-size: 12px;
        color: #5f6e82
    }

.email-settings-form {
    position: relative;
    min-height: 650px;
    padding: 56px 34px 28px
}

.email-superadmin-setting {
    margin: -30px 0 25px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e5ebf2
}

    .email-superadmin-setting label {
        display: flex;
        align-items: center;
        gap: 9px;
        margin: 0;
        font-weight: 600;
        color: #14213a
    }

.email-settings-fields {
    display: grid;
    gap: 34px 32px
}

.email-settings-fields--connection {
    grid-template-columns: repeat(3,minmax(0,1fr))
}

.email-settings-fields--sender {
    grid-template-columns: repeat(2,minmax(0,1fr));
    margin-top: 42px
}

.email-settings-form .form-group {
    min-width: 0;
    margin: 0
}

    .email-settings-form .form-group > label {
        display: block;
        margin: 0 0 9px;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .055em;
        text-transform: uppercase;
        color: #596c89
    }

.email-settings-form .form-control {
    width: 100%;
    height: 34px;
    min-height: 34px;
    padding: 6px 12px;
    border: 1px solid #d4deea;
    border-radius: 7px;
    background: #fff;
    box-shadow: none;
    font-size: 14px;
    color: #24324a
}

    .email-settings-form .form-control:focus {
        border-color: #60a5fa;
        box-shadow: 0 0 0 3px rgba(59,130,246,.1)
    }

.email-settings-form .select2-container {
    width: 100% !important
}

    .email-settings-form .select2-container .select2-selection--single {
        height: 34px !important;
        min-height: 34px !important;
        border: 1px solid #d4deea !important;
        border-radius: 7px !important;
        background: #fff !important
    }

        .email-settings-form .select2-container .select2-selection--single .select2-selection__rendered {
            height: 32px !important;
            line-height: 32px !important;
            padding-left: 12px !important;
            color: #24324a !important
        }

        .email-settings-form .select2-container .select2-selection--single .select2-selection__arrow {
            height: 32px !important
        }

.email-settings-actions {
    position: absolute;
    right: 34px;
    bottom: 34px
}

.email-test-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 42px;
    padding: 10px 20px;
    border: 0;
    border-radius: 8px;
    background: #08a957;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 7px 18px rgba(8,169,87,.18);
    transition: background .18s ease,transform .18s ease
}

    .email-test-button:hover, .email-test-button:focus {
        background: #078f4b;
        color: #fff;
        transform: translateY(-1px)
    }

    .email-test-button svg {
        width: 19px;
        height: 19px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round
    }

body.relite-dark .email-settings-guide, body.relite-dark .email-settings-form {
    border-color: #294563;
    background: #102844
}

body.relite-dark .email-settings-guide__visual {
    background-image: linear-gradient(to bottom,rgba(16,40,68,0) 72%,#102844 100%),url('../img/settings-email.png')
}

body.relite-dark .email-settings-guide h3, body.relite-dark .email-settings-guide__items b, body.relite-dark .email-settings-guide__tip b {
    color: #f8fafc
}

body.relite-dark .email-settings-guide__items small, body.relite-dark .email-settings-guide__tip span {
    color: #afc1d4
}

body.relite-dark .email-settings-guide__tip {
    border-color: #8b5734;
    background: #2e241e
}

body.relite-dark .email-settings-form .form-control, body.relite-dark .email-settings-form .select2-container .select2-selection--single {
    border-color: #35516f !important;
    background: #0b1f35 !important;
    color: #e6edf5 !important
}

/* Sale customer selector: preserve the complete input border and provide quick add. */
.modern-sale-page .sale-overview-customer .input-group {
    display: flex;
    width: 100%;
}

    .modern-sale-page .sale-overview-customer .input-group > .input-group-addon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 42px;
        width: 42px;
        height: 34px;
        padding: 0;
        border: 1px solid #cfd9e7;
        border-right: 0;
        border-radius: 6px 0 0 6px;
    }

    .modern-sale-page .sale-overview-customer .input-group > .select2-container {
        display: block;
        flex: 1 1 auto;
        width: 1% !important;
    }

.modern-sale-page .sale-overview-customer .select2-selection--single {
    border: 1px solid #cfd9e7 !important;
    border-radius: 0 !important;
    background: #fff;
}

.modern-sale-page .sale-overview-customer .input-group-btn {
    display: flex;
    flex: 0 0 42px;
    width: 42px;
}

.modern-sale-page .sale-add-customer-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 34px;
    padding: 0;
    border: 1px solid #cfd9e7;
    border-left: 0;
    border-radius: 0 6px 6px 0;
    color: #2563eb;
    background: #fff;
    box-shadow: none;
}

    .modern-sale-page .sale-add-customer-btn svg {
        width: 18px;
        height: 18px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .modern-sale-page .sale-add-customer-btn:hover,
    .modern-sale-page .sale-add-customer-btn:focus {
        color: #f97316;
        background: #fff7ed;
        border-color: #fb923c;
        outline: 0;
    }

.modern-sale-page .sale-overview-status .select2-container,
.modern-sale-page .sale-overview-scheme .select2-container {
    width: 100% !important;
}

.modern-sale-page .sale-overview-status .select2-selection--single,
.modern-sale-page .sale-overview-scheme .select2-selection--single {
    border: 1px solid #cfd9e7 !important;
    border-radius: 6px !important;
    background: #fff !important;
    box-shadow: none !important;
}

.modern-sale-page .sale-overview-status .select2-container--focus .select2-selection--single,
.modern-sale-page .sale-overview-status .select2-container--open .select2-selection--single,
.modern-sale-page .sale-overview-scheme .select2-container--focus .select2-selection--single,
.modern-sale-page .sale-overview-scheme .select2-container--open .select2-selection--single {
    border-color: #fb923c !important;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, .1) !important;
}

body.relite-dark .email-settings-form .select2-selection__rendered {
    color: #e6edf5 !important
}

@media(max-width:1100px) {
    .email-settings-layout {
        grid-template-columns: minmax(270px,.72fr) minmax(0,1.7fr);
        gap: 18px
    }

    .email-settings-fields--connection {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }
}

@media(max-width:850px) {
    .email-settings-layout {
        grid-template-columns: 1fr
    }

    .email-settings-guide {
        order: 2
    }

    .email-settings-form {
        order: 1;
        min-height: 520px
    }
}

@media(max-width:620px) {
    .email-settings-guide, .email-settings-form {
        padding: 18px 14px
    }

    .email-settings-fields--connection, .email-settings-fields--sender {
        grid-template-columns: 1fr;
        gap: 18px
    }

    .email-settings-fields--sender {
        margin-top: 18px
    }

    .email-settings-form {
        min-height: 0;
        padding-bottom: 18px
    }

    .email-settings-actions {
        position: static;
        margin-top: 24px;
        text-align: right
    }

    .email-settings-guide__tip p {
        display: block
    }
}

/* Unified form controls across every Business Settings inner section */
.business-settings-editor {
    --settings-control-height: 42px;
    --settings-control-border: #d5dfeb;
    --settings-control-radius: 8px;
    --settings-control-bg: #fff;
    --settings-control-text: #24324a
}

    .business-settings-editor .pos-tab-content .form-control:not(textarea),
    .business-settings-editor .pos-tab-content input.form-control,
    .business-settings-editor .pos-tab-content select.form-control {
        box-sizing: border-box !important;
        width: 100%;
        height: var(--settings-control-height) !important;
        min-height: var(--settings-control-height) !important;
        padding: 8px 12px;
        border: 1px solid var(--settings-control-border) !important;
        border-radius: var(--settings-control-radius) !important;
        background-color: var(--settings-control-bg) !important;
        color: var(--settings-control-text) !important;
        line-height: 24px !important;
        box-shadow: none !important
    }

    .business-settings-editor .pos-tab-content .select2-container {
        width: 100% !important;
        height: var(--settings-control-height) !important;
        min-height: var(--settings-control-height) !important
    }

    .business-settings-editor .pos-tab-content .select2-container--default .select2-selection--single,
    .business-settings-editor .pos-tab-content .select2-selection.select2-selection--single {
        display: flex !important;
        align-items: center !important;
        box-sizing: border-box !important;
        width: 100% !important;
        height: var(--settings-control-height) !important;
        min-height: var(--settings-control-height) !important;
        border: 1px solid var(--settings-control-border) !important;
        border-radius: var(--settings-control-radius) !important;
        background: var(--settings-control-bg) !important;
        box-shadow: none !important
    }

        .business-settings-editor .pos-tab-content .select2-container--default .select2-selection--single .select2-selection__rendered {
            display: flex !important;
            align-items: center !important;
            flex: 1 1 auto;
            box-sizing: border-box !important;
            min-width: 0;
            height: 40px !important;
            padding: 0 34px 0 12px !important;
            color: var(--settings-control-text) !important;
            line-height: 40px !important
        }

        .business-settings-editor .pos-tab-content .select2-container--default .select2-selection--single .select2-selection__arrow {
            top: 50% !important;
            right: 8px !important;
            width: 20px !important;
            height: 20px !important;
            transform: translateY(-50%)
        }

    .business-settings-editor .pos-tab-content .input-group {
        display: flex;
        align-items: stretch;
        width: 100%
    }

    .business-settings-editor .pos-tab-content .input-group-addon {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        box-sizing: border-box !important;
        flex: 0 0 40px;
        width: 40px;
        height: var(--settings-control-height) !important;
        min-height: var(--settings-control-height) !important;
        padding: 0 !important;
        border: 1px solid var(--settings-control-border) !important;
        border-radius: var(--settings-control-radius) 0 0 var(--settings-control-radius) !important;
        background: #f8fafc !important;
        color: #5c708c
    }

    .business-settings-editor .pos-tab-content .input-group > .form-control,
    .business-settings-editor .pos-tab-content .input-group > .select2-container .select2-selection--single {
        border-left: 0 !important;
        border-radius: 0 var(--settings-control-radius) var(--settings-control-radius) 0 !important
    }

    .business-settings-editor .pos-tab-content .form-control:focus,
    .business-settings-editor .pos-tab-content .select2-container--focus .select2-selection--single,
    .business-settings-editor .pos-tab-content .select2-container--open .select2-selection--single {
        border-color: #60a5fa !important;
        box-shadow: 0 0 0 3px rgba(59,130,246,.1) !important;
        outline: 0
    }

    .business-settings-editor .pos-tab-content .input-group:focus-within .input-group-addon {
        border-color: #60a5fa !important
    }

    .business-settings-editor .pos-tab-content .form-control[disabled],
    .business-settings-editor .pos-tab-content .form-control[readonly],
    .business-settings-editor .pos-tab-content fieldset[disabled] .form-control,
    .business-settings-editor .pos-tab-content .select2-container--disabled .select2-selection--single {
        border-color: var(--settings-control-border) !important;
        background: #f1f3f5 !important;
        color: #667085 !important;
        cursor: not-allowed
    }

body.relite-dark .business-settings-editor {
    --settings-control-border: #35516f;
    --settings-control-bg: #0b1f35;
    --settings-control-text: #e6edf5
}

    body.relite-dark .business-settings-editor .pos-tab-content .input-group-addon {
        border-color: var(--settings-control-border) !important;
        background: #132d49 !important;
        color: #b7c8da
    }

    body.relite-dark .business-settings-editor .pos-tab-content .form-control[disabled],
    body.relite-dark .business-settings-editor .pos-tab-content .form-control[readonly],
    body.relite-dark .business-settings-editor .pos-tab-content fieldset[disabled] .form-control,
    body.relite-dark .business-settings-editor .pos-tab-content .select2-container--disabled .select2-selection--single {
        background: #18324e !important;
        color: #91a5ba !important
    }

/* Compound icon fields use one outer border, avoiding a rounded border nested inside it. */
.business-settings-editor .payment-icon-field {
    display: flex;
    align-items: stretch;
    box-sizing: border-box;
    width: 100%;
    height: var(--settings-control-height) !important;
    min-height: var(--settings-control-height) !important;
    overflow: hidden;
    border: 1px solid var(--settings-control-border) !important;
    border-radius: var(--settings-control-radius) !important;
    background: var(--settings-control-bg) !important;
    box-shadow: none
}

    .business-settings-editor .payment-icon-field > i {
        box-sizing: border-box;
        flex: 0 0 42px;
        width: 42px;
        height: 40px !important;
        border: 0 !important;
        border-right: 1px solid var(--settings-control-border) !important;
        border-radius: 0 !important
    }

    .business-settings-editor .payment-icon-field > .form-control,
    .business-settings-editor .payment-icon-field > .form-control:focus,
    .business-settings-editor .payment-icon-field > .select2-container {
        flex: 1 1 auto;
        width: 1% !important;
        min-width: 0 !important;
        height: 40px !important;
        min-height: 40px !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important
    }

    .business-settings-editor .payment-icon-field .select2-selection,
    .business-settings-editor .payment-icon-field .select2-selection:focus {
        height: 40px !important;
        min-height: 40px !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: transparent !important
    }

    .business-settings-editor .payment-icon-field:focus-within {
        border-color: #60a5fa !important;
        box-shadow: 0 0 0 3px rgba(59,130,246,.1)
    }

        .business-settings-editor .payment-icon-field:focus-within > i {
            border-right-color: #60a5fa !important
        }

.business-settings-editor .pos-tab-content .select2-selection--multiple {
    box-sizing: border-box !important;
    min-height: var(--settings-control-height) !important;
    border: 1px solid var(--settings-control-border) !important;
    border-radius: var(--settings-control-radius) !important;
    background: var(--settings-control-bg) !important;
    box-shadow: none !important
}

.business-settings-editor .payment-icon-field .select2-selection--multiple {
    border: 0 !important;
    border-radius: 0 !important
}

/* Dashboard expiry field: one standard outer border, no nested control border */
.business-settings-editor .dashboard-expiry-field {
    display: flex;
    align-items: stretch;
    box-sizing: border-box;
    width: 100%;
    height: var(--settings-control-height) !important;
    min-height: var(--settings-control-height) !important;
    overflow: hidden;
    border: 1px solid var(--settings-control-border) !important;
    border-radius: var(--settings-control-radius) !important;
    background: var(--settings-control-bg) !important;
    box-shadow: none
}

    .business-settings-editor .dashboard-expiry-field > i {
        display: grid;
        place-items: center;
        box-sizing: border-box;
        flex: 0 0 42px;
        width: 42px;
        height: 40px !important;
        border: 0 !important;
        border-right: 1px solid var(--settings-control-border) !important;
        background: #f8fafc
    }

    .business-settings-editor .dashboard-expiry-field > .form-control,
    .business-settings-editor .dashboard-expiry-field > .form-control:focus {
        flex: 1 1 auto;
        width: 1%;
        height: 40px !important;
        min-height: 40px !important;
        padding: 8px 12px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        outline: 0
    }

    .business-settings-editor .dashboard-expiry-field > span {
        display: grid;
        place-items: center;
        box-sizing: border-box;
        align-self: stretch;
        flex: 0 0 80px;
        height: 40px !important;
        border: 0 !important;
        border-left: 1px solid var(--settings-control-border) !important;
        background: var(--settings-control-bg) !important;
        color: var(--settings-control-text) !important
    }

    .business-settings-editor .dashboard-expiry-field:focus-within {
        border-color: #60a5fa !important;
        box-shadow: 0 0 0 3px rgba(59,130,246,.1)
    }

        .business-settings-editor .dashboard-expiry-field:focus-within > i,
        .business-settings-editor .dashboard-expiry-field:focus-within > span {
            border-color: #60a5fa !important
        }

body.relite-dark .business-settings-editor .dashboard-expiry-field > i {
    background: #132d49
}

/* Custom Labels compound fields: stable grid, one border, correctly sized suffix controls */
.business-settings-editor .custom-labels-settings-form > .row {
    width: auto;
    min-width: 0
}

    .business-settings-editor .custom-labels-settings-form > .row > [class*="col-sm-"] {
        min-width: 0
    }

.business-settings-editor .custom-labels-settings-form .form-group {
    min-width: 0
}

.business-settings-editor .custom-labels-settings-form .input-group {
    display: flex !important;
    align-items: stretch;
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0;
    height: var(--settings-control-height) !important;
    min-height: var(--settings-control-height) !important;
    overflow: hidden;
    border: 1px solid var(--settings-control-border) !important;
    border-radius: var(--settings-control-radius) !important;
    background: var(--settings-control-bg) !important
}

    .business-settings-editor .custom-labels-settings-form .input-group > .form-control,
    .business-settings-editor .custom-labels-settings-form .input-group > .form-control:focus {
        flex: 1 1 0;
        width: 1% !important;
        min-width: 0 !important;
        height: 40px !important;
        min-height: 40px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        outline: 0
    }

    .business-settings-editor .custom-labels-settings-form .input-group > .input-group-addon {
        display: flex !important;
        align-items: center;
        justify-content: center;
        box-sizing: border-box !important;
        flex: 0 0 auto;
        width: auto !important;
        min-width: 116px;
        max-width: 58%;
        height: 40px !important;
        min-height: 40px !important;
        padding: 0 10px !important;
        overflow: hidden;
        border: 0 !important;
        border-left: 1px solid var(--settings-control-border) !important;
        border-radius: 0 !important;
        background: #f8fafc !important;
        color: var(--settings-control-text) !important;
        white-space: nowrap
    }

.business-settings-editor .custom-labels-settings-form .custom_label_product_div > .input-group > .input-group-addon {
    flex-basis: 118px;
    width: 118px !important;
    min-width: 118px;
    padding: 0 !important
}

.business-settings-editor .custom-labels-settings-form .custom-field-type-select {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 40px;
    padding: 0 28px 0 10px;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0;
    background: transparent !important;
    color: var(--settings-control-text) !important;
    font-size: 12px;
    cursor: pointer
}

.business-settings-editor .custom-labels-settings-form .input-group-addon label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 !important;
    color: var(--settings-control-text) !important;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap
}

.business-settings-editor .custom-labels-settings-form .input-group-addon input[type="checkbox"] {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin: 0
}

.business-settings-editor .custom-labels-settings-form .input-group:focus-within {
    border-color: #8b5cf6 !important;
    box-shadow: 0 0 0 3px rgba(139,92,246,.11)
}

    .business-settings-editor .custom-labels-settings-form .input-group:focus-within > .input-group-addon {
        border-left-color: #8b5cf6 !important
    }

.business-settings-editor .custom-labels-settings-form .custom_label_product_dropdown {
    margin: 8px 0 0
}

    .business-settings-editor .custom-labels-settings-form .custom_label_product_dropdown textarea {
        box-sizing: border-box;
        width: 100%;
        min-height: 64px;
        padding: 9px 11px;
        resize: vertical;
        border: 1px solid var(--settings-control-border);
        border-radius: var(--settings-control-radius);
        background: var(--settings-control-bg);
        color: var(--settings-control-text)
    }

body.relite-dark .business-settings-editor .custom-labels-settings-form .input-group > .input-group-addon {
    background: #132d49 !important
}

body.relite-dark .business-settings-editor .custom-labels-settings-form .custom-field-type-select,
body.relite-dark .business-settings-editor .custom-labels-settings-form .custom-field-type-select:focus {
    background: #132d49 !important;
    color: #e6edf5 !important
}

@media(max-width:1180px) and (min-width:768px) {
    .business-settings-editor .custom-labels-settings-form .input-group > .input-group-addon {
        min-width: 104px;
        padding: 0 7px !important
    }

    .business-settings-editor .custom-labels-settings-form .custom_label_product_div > .input-group > .input-group-addon {
        flex-basis: 105px;
        width: 105px !important;
        min-width: 105px
    }
}

/* Icon fields use one outer border while standalone controls retain their own border */
.business-settings-editor .company-profile-form .input-group,
.business-settings-editor .tax-settings-fields .input-group {
    display: flex !important;
    align-items: stretch;
    box-sizing: border-box;
    width: 100%;
    height: var(--settings-control-height) !important;
    min-height: var(--settings-control-height) !important;
    overflow: hidden;
    border: 1px solid var(--settings-control-border) !important;
    border-radius: var(--settings-control-radius) !important;
    background: var(--settings-control-bg) !important;
    box-shadow: none
}

    .business-settings-editor .company-profile-form .input-group > .input-group-addon,
    .business-settings-editor .tax-settings-fields .input-group > .input-group-addon {
        flex: 0 0 40px;
        width: 40px;
        height: 40px !important;
        min-height: 40px !important;
        border: 0 !important;
        border-right: 1px solid var(--settings-control-border) !important;
        border-radius: 0 !important
    }

    .business-settings-editor .company-profile-form .input-group > .form-control,
    .business-settings-editor .company-profile-form .input-group > .form-control:focus,
    .business-settings-editor .tax-settings-fields .input-group > .form-control,
    .business-settings-editor .tax-settings-fields .input-group > .form-control:focus {
        flex: 1 1 auto;
        width: 1% !important;
        min-width: 0 !important;
        height: 40px !important;
        min-height: 40px !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        outline: 0
    }

    .business-settings-editor .company-profile-form .input-group > .select2-container,
    .business-settings-editor .tax-settings-fields .input-group > .select2-container {
        flex: 1 1 auto;
        width: 1% !important;
        min-width: 0 !important;
        height: 40px !important;
        min-height: 40px !important
    }

        .business-settings-editor .company-profile-form .input-group > .select2-container .select2-selection--single,
        .business-settings-editor .tax-settings-fields .input-group > .select2-container .select2-selection--single {
            height: 40px !important;
            min-height: 40px !important;
            border: 0 !important;
            border-radius: 0 !important;
            box-shadow: none !important
        }

    .business-settings-editor .company-profile-form .input-group:focus-within,
    .business-settings-editor .tax-settings-fields .input-group:focus-within {
        border-color: #60a5fa !important;
        box-shadow: 0 0 0 3px rgba(59,130,246,.1)
    }

        .business-settings-editor .company-profile-form .input-group:focus-within > .input-group-addon,
        .business-settings-editor .tax-settings-fields .input-group:focus-within > .input-group-addon {
            border-right-color: #60a5fa !important
        }

/* Keep help/info icons immediately beside their label text */
.business-settings-editor .pos-tab-content .form-group > label,
.business-settings-editor .pos-tab-content .form-group > .control-label {
    display: inline-flex !important;
    align-items: center;
    width: auto !important;
    min-height: 16px;
    vertical-align: middle
}

    .business-settings-editor .pos-tab-content .form-group > label + .hover-q,
    .business-settings-editor .pos-tab-content .form-group > .control-label + .hover-q,
    .business-settings-editor .pos-tab-content .form-group > label ~ .hover-q {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 15px;
        height: 15px;
        margin: 0 0 7px 5px !important;
        vertical-align: middle;
        font-size: 13px;
        line-height: 1
    }

/* Super-admin return action follows the compact top-bar control standard */
.header-user-switch-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-sizing: border-box;
    height: 34px;
    min-height: 34px;
    max-width: 230px;
    padding: 0 11px;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    color: #334155;
    background: #fff;
    box-shadow: 0 2px 7px rgba(15,23,42,.05);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none !important;
    white-space: nowrap;
    transition: border-color .18s ease,color .18s ease,background-color .18s ease,box-shadow .18s ease
}

    .header-user-switch-back svg {
        flex: 0 0 16px;
        width: 16px;
        height: 16px
    }

    .header-user-switch-back span {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .header-user-switch-back:hover,
    .header-user-switch-back:focus {
        border-color: #fdba74;
        color: #ea580c;
        background: #fff7ed;
        box-shadow: 0 2px 8px rgba(234,88,12,.1);
        outline: 0
    }

body.relite-dark .header-user-switch-back {
    border-color: #334155;
    color: #e2e8f0;
    background: #0f2035
}

    body.relite-dark .header-user-switch-back:hover,
    body.relite-dark .header-user-switch-back:focus {
        border-color: #f97316;
        color: #fdba74;
        background: #2a1a12
    }

@media(max-width:640px) {
    .business-settings-editor .sales-settings-tab,
    .business-settings-editor .sales-settings-tab * {
        min-width: 0
    }

        .business-settings-editor .sales-settings-tab .sales-icon-field > .select2-container,
        .business-settings-editor .sales-settings-tab .sales-icon-field > .form-control {
            flex: 1 1 0 !important;
            width: 1% !important;
            max-width: calc(100% - 40px) !important;
            min-width: 0 !important
        }

        .business-settings-editor .sales-settings-tab .select2-selection__rendered {
            display: block !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            white-space: nowrap !important
        }

    .business-settings-editor .display-screen-settings-form,
    .business-settings-editor .display-screen-heading-field,
    .business-settings-editor .display-screen-heading-field .tox-tinymce,
    .business-settings-editor .display-screen-carousel-grid {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        min-width: 0
    }
}

/* Final shared form-layout overrides (kept last so page-specific legacy CSS
   cannot collapse Select2 fields or remove joined-control borders). */
.content-wrapper .payment-account-field,
.modal .payment-account-field {
    width: 100% !important;
    max-width: 100% !important;
}

.content-wrapper .payment-account-field .input-group,
.modal .payment-account-field .input-group,
.content-wrapper .pos-joined-input,
.modal .pos-joined-input {
    display: flex !important;
    align-items: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
}

.content-wrapper .payment-account-field .select2-container,
.modal .payment-account-field .select2-container,
.content-wrapper .pos-joined-input > .select2-container,
.modal .pos-joined-input > .select2-container {
    display: block !important;
    flex: 1 1 0 !important;
    width: 1% !important;
    max-width: none !important;
    min-width: 0 !important;
}

.content-wrapper .input-group > .input-group-addon,
.modal .input-group > .input-group-addon,
.content-wrapper .input-group > .input-group-btn > .btn,
.modal .input-group > .input-group-btn > .btn {
    border: 1px solid #cfd9e7 !important;
}

.content-wrapper .input-group > .input-group-addon:first-child,
.modal .input-group > .input-group-addon:first-child {
    border-right: 0 !important;
}

.content-wrapper .input-group > .input-group-btn:first-child > .btn,
.modal .input-group > .input-group-btn:first-child > .btn {
    border-right: 0 !important;
}

.content-wrapper .input-group > .input-group-btn:last-child > .btn,
.modal .input-group > .input-group-btn:last-child > .btn {
    border-left: 0 !important;
}

.content-wrapper .input-group > .input-group-addon:first-child + .form-control,
.modal .input-group > .input-group-addon:first-child + .form-control,
.content-wrapper .input-group > .input-group-addon:first-child ~ .select2-container .select2-selection,
.modal .input-group > .input-group-addon:first-child ~ .select2-container .select2-selection {
    border-left: 1px solid #cfd9e7 !important;
}

/* POS top controls must stay inside the narrow mobile cart panel. */
@media (max-width: 767px) {
    body.lockscreen #add_pos_sell_form .box-body.pb-0 > .row:first-child,
    body.lockscreen #edit_pos_sell_form .box-body.pb-0 > .row:first-child {
        display: block !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        padding-right: 8px !important;
        padding-left: 8px !important;
        overflow: hidden;
    }

    body.lockscreen #add_pos_sell_form .box-body.pb-0 > .row:first-child > .col-md-6,
    body.lockscreen #edit_pos_sell_form .box-body.pb-0 > .row:first-child > .col-md-6 {
        float: none !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    body.lockscreen #add_pos_sell_form .pos-joined-input,
    body.lockscreen #edit_pos_sell_form .pos-joined-input {
        display: flex !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    body.lockscreen #add_pos_sell_form .pos-joined-input > .select2-container,
    body.lockscreen #edit_pos_sell_form .pos-joined-input > .select2-container {
        display: block !important;
        flex: 1 1 0 !important;
        width: 0 !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    body.lockscreen #add_pos_sell_form .pos-joined-input > .input-group-addon,
    body.lockscreen #edit_pos_sell_form .pos-joined-input > .input-group-addon,
    body.lockscreen #add_pos_sell_form .pos-joined-input > .input-group-btn,
    body.lockscreen #edit_pos_sell_form .pos-joined-input > .input-group-btn {
        flex: 0 0 auto !important;
        width: auto !important;
    }

    body.lockscreen #add_pos_sell_form .pos-joined-input > .input-group-addon,
    body.lockscreen #edit_pos_sell_form .pos-joined-input > .input-group-addon,
    body.lockscreen #add_pos_sell_form .pos-joined-input > .input-group-btn,
    body.lockscreen #edit_pos_sell_form .pos-joined-input > .input-group-btn,
    body.lockscreen #add_pos_sell_form .pos-joined-input > .input-group-btn > .btn,
    body.lockscreen #edit_pos_sell_form .pos-joined-input > .input-group-btn > .btn {
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
    }

    body.lockscreen #add_pos_sell_form .pos-joined-input i,
    body.lockscreen #edit_pos_sell_form .pos-joined-input i,
    body.lockscreen #add_pos_sell_form .pos-joined-input svg,
    body.lockscreen #edit_pos_sell_form .pos-joined-input svg {
        margin: 0 !important;
        vertical-align: middle !important;
    }

    body.lockscreen #add_pos_sell_form .pos-joined-input .select2-selection__rendered,
    body.lockscreen #edit_pos_sell_form .pos-joined-input .select2-selection__rendered {
        display: flex !important;
        align-items: center !important;
        box-sizing: border-box !important;
        height: 32px !important;
        min-height: 32px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        line-height: normal !important;
    }

    body.lockscreen #add_pos_sell_form .pos-joined-input > .input-group-addon,
    body.lockscreen #edit_pos_sell_form .pos-joined-input > .input-group-addon,
    body.lockscreen #add_pos_sell_form .pos-joined-input > .input-group-btn > .btn,
    body.lockscreen #edit_pos_sell_form .pos-joined-input > .input-group-btn > .btn {
        height: 32px !important;
        min-height: 32px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    body.lockscreen #add_pos_sell_form .pos-joined-input > .input-group-btn > .btn i,
    body.lockscreen #edit_pos_sell_form .pos-joined-input > .input-group-btn > .btn i,
    body.lockscreen #add_pos_sell_form .pos-joined-input > .input-group-addon i,
    body.lockscreen #edit_pos_sell_form .pos-joined-input > .input-group-addon i {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 16px;
        height: 16px;
        font-size: 14px !important;
        line-height: 1 !important;
    }
}

#add_pos_sell_form .pos-field-outline-icon,
#edit_pos_sell_form .pos-field-outline-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 16px;
    height: 16px;
    margin: 0;
    transform: translate(-50%,-50%);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    color: #2563eb;
}

#add_pos_sell_form .pos-joined-input > .input-group-addon,
#edit_pos_sell_form .pos-joined-input > .input-group-addon,
#add_pos_sell_form .pos-joined-input > .input-group-btn > .btn,
#edit_pos_sell_form .pos-joined-input > .input-group-btn > .btn {
    position: relative;
}

@media (max-width: 767px) {
    body.lockscreen #add_pos_sell_form .pos-joined-input > .input-group-addon,
    body.lockscreen #edit_pos_sell_form .pos-joined-input > .input-group-addon {
        flex: 0 0 34px !important;
        width: 34px !important;
        min-width: 34px !important;
        max-width: 34px !important;
        padding: 0 !important;
    }

    body.lockscreen #add_pos_sell_form .pos-joined-input > .input-group-btn,
    body.lockscreen #edit_pos_sell_form .pos-joined-input > .input-group-btn {
        display: inline-flex !important;
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 0 !important;
    }

    body.lockscreen #add_pos_sell_form .pos-joined-input > .input-group-btn > .btn,
    body.lockscreen #edit_pos_sell_form .pos-joined-input > .input-group-btn > .btn {
        flex: 0 0 34px !important;
        width: 34px !important;
        min-width: 34px !important;
        max-width: 34px !important;
        padding: 0 !important;
    }
}
/* GST tax rate library */
.gst-master-card { overflow:hidden; margin-bottom:20px; border-radius:12px; box-shadow:0 5px 18px rgba(15,39,74,.06); }
.gst-master-card .box-header { padding:18px 20px 12px; }
.gst-master-card .box-title { margin:0 0 6px; color:#10213e; font-size:17px; font-weight:600; }
.gst-master-card .box-header p { margin:0; }
.gst-master-card .text-right .btn { margin-left:6px; }
#gst-master-preview { margin:0; }
#gst-master-preview .table { margin-bottom:0; }
.gst-master-preview-table th { background:#f5f8fd; color:#243552; font-weight:600; }
@media(max-width:767px) {
    .gst-master-card .text-right { margin-top:12px; text-align:left; }
    .gst-master-card .text-right .btn { margin:0 6px 6px 0; }
}
/* Modern purchase create and edit */
.purchase-editor-modern {
    --purchase-accent: #f97316;
    --purchase-ink: #13213a;
    --purchase-muted: #6b7b95;
    --purchase-line: #d8e2ef;
    --purchase-surface: #fff;
    padding-top: 10px;
    background: #f5f8fc;
}

.purchase-editor-modern .purchase-editor-form {
    max-width: 100%;
}

.purchase-editor-modern .purchase-section-card {
    overflow: hidden;
    margin-bottom: 16px;
    border: 1px solid var(--purchase-line);
    border-top: 0;
    border-radius: 12px;
    background: var(--purchase-surface);
    box-shadow: 0 5px 16px rgba(32, 55, 88, .055);
}

.purchase-editor-modern .purchase-section-card::before {
    display: block;
    width: 100%;
    height: 3px;
    content: '';
    background: linear-gradient(90deg, var(--purchase-accent), #ffb36b 45%, transparent 82%);
}

.purchase-editor-modern .purchase-section-card .box-header {
    min-height: 48px;
    padding: 13px 18px 10px;
    border-bottom: 1px solid #e9eef5;
}

.purchase-editor-modern .purchase-section-card .box-header .box-title {
    color: var(--purchase-ink);
    font-size: 15px;
    font-weight: 600;
}

.purchase-editor-modern .purchase-section-card  .widget-slot {
    padding: 18px;
}

.purchase-editor-modern .form-group {
    margin-bottom: 15px;
}

.purchase-editor-modern label,
.purchase-editor-modern .form-group > strong {
    margin-bottom: 6px;
    color: var(--purchase-ink);
    font-size: 12px;
    font-weight: 600;
}

.purchase-editor-modern .form-control,
.purchase-editor-modern .select2-container .select2-selection,
.purchase-editor-modern .file-input .form-control {
    min-height: 35px;
    border-color: #cbd8e8;
    border-radius: 7px;
    box-shadow: none;
}

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

.purchase-editor-modern #supplier_address_div {
    min-height: 45px;
    margin-top: 6px;
    padding: 9px 11px;
    border: 1px solid #cbd8e8;
    border-radius: 7px;
    color: #526782;
    background: #fff;
    font-size: 11px;
}

.purchase-editor-modern #supplier_address_div:empty::before {
    color: #9aa9bc;
    content: 'Enter supplier address...';
}

.purchase-editor-modern .input-group {
    display: flex;
    width: 100%;
    align-items: stretch;
}

.purchase-editor-modern .input-group > .input-group-addon {
    display: inline-flex;
    flex: 0 0 40px;
    width: 40px;
    min-width: 40px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid #cbd8e8;
    border-right: 0;
    border-radius: 7px 0 0 7px;
    color: #607493;
    background: #f8fafc;
}

.purchase-editor-modern .input-group > .form-control,
.purchase-editor-modern .input-group > .select2-container {
    flex: 1 1 auto;
    width: 1% !important;
    min-width: 0;
    border-radius: 0 7px 7px 0;
}

.purchase-editor-modern .input-group > .input-group-addon + .form-control,
.purchase-editor-modern .input-group > .input-group-addon + .select2-container .select2-selection {
    border-left: 1px solid #cbd8e8;
    border-radius: 0 7px 7px 0;
}

.purchase-editor-modern .input-group > .input-group-btn {
    display: inline-flex;
    flex: 0 0 auto;
    width: auto;
}

.purchase-editor-modern .input-group > .input-group-btn > .btn {
    display: inline-flex;
    min-width: 42px;
    height: 35px;
    align-items: center;
    justify-content: center;
    border-color: #cbd8e8;
    border-left: 0;
    border-radius: 0 7px 7px 0;
    background: #fff;
}

.purchase-editor-modern .input-group > .form-control:nth-last-child(2),
.purchase-editor-modern .input-group > .select2-container:nth-last-child(2) .select2-selection {
    border-radius: 0;
}

.purchase-editor-modern .input-group > .input-group-btn ~ .form-control,
.purchase-editor-modern .input-group > .input-group-btn ~ .select2-container {
    border-radius: 0;
}

.purchase-editor-modern .multi-input {
    display: flex;
    flex-wrap: wrap;
}

.purchase-editor-modern .multi-input label,
.purchase-editor-modern .multi-input br {
    flex: 0 0 100%;
}

.purchase-editor-modern .multi-input .form-control {
    border-radius: 0;
}

.purchase-editor-modern .multi-input .form-control:first-of-type {
    border-radius: 7px 0 0 7px;
}

.purchase-editor-modern .multi-input .form-control:last-of-type {
    border-radius: 0 7px 7px 0;
}

.purchase-editor-modern .purchase-section-products .box-body {
    padding-top: 14px;
}

.purchase-editor-modern #purchase_entry_table {
    margin-bottom: 8px;
    border-color: #dbe5f0;
}

.purchase-editor-modern #purchase_entry_table > thead > tr > th {
    padding: 10px 8px;
    border-color: #dbe5f0;
    color: #253754;
    background: #edf3fa;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.purchase-editor-modern .purchase-section-adjustments .box-body > .row > .col-sm-12 > .table {
    margin-bottom: 0;
}

.purchase-editor-modern .purchase-section-adjustments .table > tbody > tr > td {
    padding: 13px 8px;
    border-top-color: #edf1f6;
    vertical-align: middle;
}

.purchase-editor-modern textarea.form-control {
    min-height: 76px;
    resize: vertical;
}

.purchase-editor-modern #toggle_additional_expense,
.purchase-editor-modern #submit_purchase_form {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 16px;
    border: 0;
    border-radius: 7px;
    background: var(--purchase-accent);
    box-shadow: 0 4px 10px rgba(249, 115, 22, .18);
    font-size: 12px;
    font-weight: 600;
}

.purchase-editor-modern #submit_purchase_form {
    min-width: 110px;
    margin: 4px 0 14px;
}

@media (max-width: 767px) {
    .purchase-editor-modern .purchase-section-card  .widget-slot { padding: 14px; }
    .purchase-editor-modern .purchase-section-card .box-header { padding-left: 14px; padding-right: 14px; }
    .purchase-editor-modern #submit_purchase_form { width: 100%; }
}

/* Purchase editor reference layout */
.purchase-editor-modern .purchase-section-card {
    --section-color: #f97316;
    --section-soft: #fff3e9;
    position: relative;
    border-top: 1px solid var(--purchase-line);
    background: linear-gradient(115deg, #fff 0%, #fff 78%, var(--section-soft) 145%);
}

.purchase-editor-modern .purchase-section-card::before {
    display: none;
}

.purchase-editor-modern .purchase-section-products { --section-color:#12ad69; --section-soft:#eafaf2; }
.purchase-editor-modern .purchase-section-adjustments { --section-color:#7c3aed; --section-soft:#f3edff; }
.purchase-editor-modern .purchase-section-shipping { --section-color:#2f8ef3; --section-soft:#eaf4ff; }
.purchase-editor-modern .purchase-section-payment { --section-color:#ef3d70; --section-soft:#fff0f5; }

.purchase-editor-modern .purchase-section-card .box-header {
    position: relative;
    display: flex;
    min-height: 68px;
    flex-direction: column;
    justify-content: center;
    padding: 12px 18px 11px 72px;
    border-bottom: 0;
}

.purchase-editor-modern .purchase-section-card .box-header::before {
    position: absolute;
    top: 13px;
    left: 18px;
    display: flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: var(--section-color);
    background-color: var(--section-soft);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f97316' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Cpath d='M3.5 18c.7-3 2.5-4.5 5.5-4.5s4.8 1.5 5.5 4.5M17 7v6M14 10h6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    content: '';
}

.purchase-editor-modern .purchase-section-products  .box-header::before { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2312ad69' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 7 8-4 8 4v10l-8 4-8-4zM4 7l8 4 8-4M12 11v10'/%3E%3C/svg%3E"); }
.purchase-editor-modern .purchase-section-adjustments  .box-header::before { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%237c3aed' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h9l3 3v15H6zM9 11h6M9 15h6M9 7h2'/%3E%3C/svg%3E"); }
.purchase-editor-modern .purchase-section-shipping  .box-header::before { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232f8ef3' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h11v10H3zM14 10h4l3 3v3h-7z'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3Ccircle cx='18' cy='18' r='2'/%3E%3C/svg%3E"); }
.purchase-editor-modern .purchase-section-payment  .box-header::before { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ef3d70' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 9h18M7 15h3'/%3E%3C/svg%3E"); }

.purchase-editor-modern .purchase-section-card .box-header::after {
    display: block;
    margin-top: 3px;
    color: var(--purchase-muted);
    content: 'Please enter the basic purchase details.';
    font-size: 11px;
    font-weight: 400;
}

.purchase-editor-modern .purchase-section-products  .box-header::after { content:'Add products to this purchase.'; }
.purchase-editor-modern .purchase-section-adjustments  .box-header::after { content:'Add any additional charges, discount or notes for this purchase.'; }
.purchase-editor-modern .purchase-section-shipping  .box-header::after { content:'Add shipping information if applicable.'; }
.purchase-editor-modern .purchase-section-payment  .box-header::after { content:'Enter payment information for this purchase.'; }

.purchase-editor-modern .purchase-section-card  .widget-slot {
    padding: 4px 18px 16px;
}

.purchase-editor-modern .purchase-section-details  .widget-slot > .row:first-child {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

.purchase-editor-modern .purchase-section-products  .widget-slot > .row:first-child {
    display: flex;
    align-items: center;
}

.purchase-editor-modern .purchase-section-products .missing-product-warning {
    position: absolute;
}

.purchase-editor-modern .purchase-section-products .table-responsive {
    border: 1px solid #dbe5f0;
    border-radius: 8px;
}

.purchase-editor-modern #purchase_entry_table > thead > tr > th {
    color: #1c2b46;
    background: #f7f9fc;
}

.purchase-editor-modern .purchase-section-adjustments .table,
.purchase-editor-modern .purchase-section-adjustments .table tbody,
.purchase-editor-modern .purchase-section-adjustments .table tr,
.purchase-editor-modern .purchase-section-adjustments .table td {
    background: transparent;
}

.purchase-editor-modern .purchase-section-shipping  .widget-slot > .row:first-child,
.purchase-editor-modern .purchase-section-payment .payment_row > .row {
    align-items: end;
}

.purchase-editor-modern .help-block {
    margin: 5px 0 0;
    color: #7890b3;
    font-size: 10px;
}

@media (max-width: 767px) {
    .purchase-editor-modern .purchase-section-card .box-header {
        min-height: 62px;
        padding: 10px 12px 9px 62px;
    }
    .purchase-editor-modern .purchase-section-card .box-header::before {
        top: 11px;
        left: 12px;
    }
    .purchase-editor-modern .purchase-section-products  .widget-slot > .row:first-child {
        display: block;
    }
}
/* Purchase create/edit workspace. Kept in the main theme stylesheet. */
.purchase-editor-modern{--p-orange:#f97316;--p-ink:#13213a;--p-muted:#6b7b95;--p-line:#d8e2ef;padding-top:10px;background:#f5f8fc}
.purchase-editor-modern .purchase-section-card{--section:#f97316;--soft:#fff3e9;position:relative;overflow:hidden;margin-bottom:16px;border:1px solid var(--p-line)!important;border-radius:12px!important;background:linear-gradient(115deg,#fff 0%,#fff 78%,var(--soft) 145%)!important;box-shadow:0 5px 16px rgba(32,55,88,.055)!important}
.purchase-editor-modern .purchase-section-products{--section:#12ad69;--soft:#eafaf2}.purchase-editor-modern .purchase-section-adjustments{--section:#7c3aed;--soft:#f3edff}.purchase-editor-modern .purchase-section-shipping{--section:#2f8ef3;--soft:#eaf4ff}.purchase-editor-modern .purchase-section-payment{--section:#ef3d70;--soft:#fff0f5}
.purchase-editor-modern .purchase-section-card:before{display:none!important}
.purchase-editor-modern .purchase-section-card .box-header{position:relative;display:flex;min-height:68px;flex-direction:column;justify-content:center;padding:12px 18px 11px 72px!important;border-bottom:0!important}
.purchase-editor-modern .purchase-section-card .box-header:before{position:absolute;top:13px;left:18px;width:40px;height:40px;border-radius:10px;background-color:var(--soft);background-repeat:no-repeat;background-position:center;content:''}
.purchase-editor-modern .purchase-section-details .box-header:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f97316' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Cpath d='M3.5 18c.7-3 2.5-4.5 5.5-4.5s4.8 1.5 5.5 4.5M17 7v6M14 10h6'/%3E%3C/svg%3E")}
.purchase-editor-modern .purchase-section-products .box-header:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2312ad69' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 7 8-4 8 4v10l-8 4-8-4zM4 7l8 4 8-4M12 11v10'/%3E%3C/svg%3E")}
.purchase-editor-modern .purchase-section-adjustments .box-header:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%237c3aed' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h9l3 3v15H6zM9 11h6M9 15h6M9 7h2'/%3E%3C/svg%3E")}
.purchase-editor-modern .purchase-section-shipping .box-header:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232f8ef3' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h11v10H3zM14 10h4l3 3v3h-7z'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3Ccircle cx='18' cy='18' r='2'/%3E%3C/svg%3E")}
.purchase-editor-modern .purchase-section-payment .box-header:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ef3d70' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 9h18M7 15h3'/%3E%3C/svg%3E")}
.purchase-editor-modern .purchase-section-card .box-header .box-title{color:var(--p-ink)!important;font-size:15px!important;font-weight:600!important}.purchase-editor-modern .purchase-section-card .box-header:after{display:block;margin-top:3px;color:var(--p-muted);content:'Please enter the basic purchase details.';font-size:11px}.purchase-editor-modern .purchase-section-products .box-header:after{content:'Add products to this purchase.'}.purchase-editor-modern .purchase-section-adjustments .box-header:after{content:'Add any additional charges, discount or notes for this purchase.'}.purchase-editor-modern .purchase-section-shipping .box-header:after{content:'Add shipping information if applicable.'}.purchase-editor-modern .purchase-section-payment .box-header:after{content:'Enter payment information for this purchase.'}
.purchase-editor-modern .purchase-section-card .widget-slot{padding:4px 18px 16px!important}.purchase-editor-modern .form-group{margin-bottom:15px}.purchase-editor-modern label{margin-bottom:6px;color:var(--p-ink);font-size:12px;font-weight:600}.purchase-editor-modern .form-control,.purchase-editor-modern .select2-selection{min-height:35px!important;border:1px solid #cbd8e8!important;border-radius:7px!important;box-shadow:none!important}
.purchase-editor-modern .input-group{display:flex!important;width:100%;align-items:stretch}.purchase-editor-modern .input-group>.input-group-addon{display:inline-flex!important;flex:0 0 40px;width:40px!important;min-width:40px;align-items:center;justify-content:center;padding:0!important;border:1px solid #cbd8e8!important;border-right:0!important;border-radius:7px 0 0 7px!important;color:#607493;background:#f8fafc}.purchase-editor-modern .input-group>.form-control,.purchase-editor-modern .input-group>.select2-container{flex:1 1 auto;width:1%!important;min-width:0}.purchase-editor-modern .input-group>.input-group-addon+.form-control,.purchase-editor-modern .input-group>.input-group-addon+.select2-container .select2-selection{border-left:1px solid #cbd8e8!important;border-radius:0 7px 7px 0!important}.purchase-editor-modern .input-group>.input-group-btn{display:inline-flex!important;width:auto!important}.purchase-editor-modern .input-group>.input-group-btn>.btn{display:inline-flex;min-width:42px;height:35px;align-items:center;justify-content:center;border:1px solid #cbd8e8;border-left:0;border-radius:0 7px 7px 0;background:#fff}.purchase-editor-modern .input-group>.form-control:nth-last-child(2),.purchase-editor-modern .input-group>.select2-container:nth-last-child(2) .select2-selection{border-radius:0!important}
.purchase-editor-modern #supplier_address_div{min-height:45px;margin-top:6px;padding:9px 11px;border:1px solid #cbd8e8;border-radius:7px;color:#526782;background:#fff;font-size:11px}.purchase-editor-modern #supplier_address_div:empty:before{color:#9aa9bc;content:'Enter supplier address...'}.purchase-editor-modern .purchase-section-products .table-responsive{border:1px solid #dbe5f0;border-radius:8px}.purchase-editor-modern #purchase_entry_table>thead>tr>th{padding:10px 8px!important;border-color:#dbe5f0!important;color:#1c2b46!important;background:#f7f9fc!important;font-size:11px;white-space:nowrap}.purchase-editor-modern textarea.form-control{min-height:76px}.purchase-editor-modern #toggle_additional_expense,.purchase-editor-modern #submit_purchase_form{min-height:38px;padding:8px 16px;border:0;border-radius:7px;background:#f97316;box-shadow:0 4px 10px rgba(249,115,22,.18);font-size:12px;font-weight:600}.purchase-editor-modern #submit_purchase_form{min-width:110px;margin:4px 0 14px}
@media(max-width:767px){.purchase-editor-modern .purchase-section-card .box-header{min-height:62px;padding:10px 12px 9px 62px!important}.purchase-editor-modern .purchase-section-card .box-header:before{top:11px;left:12px}.purchase-editor-modern .purchase-section-card .widget-slot{padding:8px 14px 14px!important}.purchase-editor-modern #submit_purchase_form{width:100%}}
/* Layout rules follow the shared widget's nested markup. */
.purchase-editor-modern .purchase-section-details .widget-slot > .row:first-child{display:flex;flex-wrap:wrap;align-items:start}
.purchase-editor-modern .purchase-section-details .widget-slot > .row:first-child > .clearfix{flex-basis:100%}
.purchase-editor-modern .purchase-section-details .widget-slot > .row:first-child > .col-md-3,
.purchase-editor-modern .purchase-section-details .widget-slot > .row:first-child > .col-sm-3:has(#upload_document){width:50%}
.purchase-editor-modern .purchase-section-products .widget-slot > .row:first-child{display:flex;flex-wrap:wrap;align-items:center}
.purchase-editor-modern .purchase-section-products .missing-product-warning{position:static;flex-basis:100%}
.purchase-editor-modern .purchase-section-products .missing-product-warning:empty{display:none}
.purchase-editor-modern .purchase-section-products .table-responsive:has(#purchase_entry_table tbody:empty)::after{content:'◇\A No products added yet\A Import products or search and add items to get started.';display:block;white-space:pre-line;text-align:center;padding:28px 12px;color:#7b8cac;line-height:25px;font-size:12px;background:#fff}
.purchase-editor-modern .purchase-section-products hr{display:none}
.purchase-editor-modern .purchase-section-products .pull-right.col-md-5{width:300px;margin-top:10px;padding:10px;border-radius:9px;background:#fff5e7}
.purchase-editor-modern .purchase-section-adjustments .widget-slot > .row > .col-sm-12 > .table > tbody > tr{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.purchase-editor-modern .purchase-section-adjustments .widget-slot > .row > .col-sm-12 > .table > tbody > tr > td{width:auto;padding:5px 0;border:0;min-width:0}
.purchase-editor-modern .purchase-section-adjustments .widget-slot > .row > .col-sm-12 > .table > tbody > tr:nth-child(1) > td:nth-child(3),
.purchase-editor-modern .purchase-section-adjustments .widget-slot > .row > .col-sm-12 > .table > tbody > tr:nth-child(2) > td:nth-child(3){display:none}
.purchase-editor-modern .purchase-section-adjustments td[colspan]{grid-column:1/-1}
.purchase-editor-modern .purchase-section-adjustments .widget-slot > .row > .col-sm-12 > .table > tbody > tr{grid-template-columns:1fr 1fr 1fr minmax(250px,.82fr)}
.purchase-editor-modern .purchase-section-adjustments .widget-slot > .row > .col-sm-12 > .table > tbody > tr:nth-child(1) > td:nth-child(3){display:block!important;grid-column:auto!important}
.purchase-editor-modern .purchase-section-adjustments .widget-slot > .row > .col-sm-12 > .table > tbody > tr:nth-child(2) > td:not(:nth-child(4)){display:none!important}
.purchase-editor-modern .purchase-section-adjustments .widget-slot > .row > .col-sm-12 > .table > tbody > tr > td:nth-child(4){grid-column:4!important}
.purchase-editor-modern .purchase-section-adjustments .widget-slot > .row > .col-sm-12 > .table > tbody > tr:first-child > td.purchase-tax-inline{display:block!important;visibility:visible!important;grid-column:3!important;grid-row:1!important}
.relite-sales-action-cell{white-space:nowrap;min-width:178px}.relite-sales-action-bar{display:inline-flex;align-items:center;gap:5px}.relite-sales-action-icon,.relite-sales-action-more{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:27px!important;height:27px!important;min-height:27px!important;padding:0!important;border:0!important;border-radius:6px!important;background:transparent!important;color:#6b7280!important;box-shadow:none!important;line-height:1!important}.relite-sales-action-icon svg{display:block!important;width:19px!important;height:19px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.relite-sales-action-icon:hover,.relite-sales-action-icon:focus,.relite-sales-action-more:hover,.relite-sales-action-more:focus,.relite-sales-action-menu.open>.relite-sales-action-more{color:#ff6b17!important;background:#fff2e9!important}.relite-sales-action-menu{display:inline-flex!important}.relite-sales-action-more-dots{display:block;min-width:17px;color:currentColor;font-size:17px;font-weight:700;line-height:1;letter-spacing:1px;transform:translateY(-2px)}.relite-sales-action-menu .dropdown-menu{left:auto;right:0;min-width:245px;max-height:420px;overflow-y:auto;padding:7px;border:1px solid #e5e7eb;border-radius:9px;background:#fff;box-shadow:0 10px 28px rgba(15,23,42,.14);z-index:110}.relite-sales-action-menu .dropdown-menu>li>a,.relite-sales-action-menu .dropdown-menu>li>button{display:flex!important;align-items:center!important;width:100%!important;gap:10px!important;padding:8px 10px!important;border:0!important;border-radius:6px!important;background:transparent!important;color:#111827!important;text-align:left!important;box-shadow:none!important;font-weight:400!important}.relite-sales-action-menu .dropdown-menu>li>a:hover,.relite-sales-action-menu .dropdown-menu>li>a:focus,.relite-sales-action-menu .dropdown-menu>li>button:hover,.relite-sales-action-menu .dropdown-menu>li>button:focus{color:#111827!important;background:#fff4ed!important}.relite-sales-action-menu .dropdown-menu i{display:none!important}.relite-menu-action-icon{display:inline-flex;flex:0 0 18px}.relite-menu-action-icon svg{width:18px!important;height:18px!important;fill:none!important;stroke:#6b7280!important;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.relite-sales-action-menu .dropdown-menu a:hover .relite-menu-action-icon svg,.relite-sales-action-menu .dropdown-menu button:hover .relite-menu-action-icon svg{stroke:#ff6b17!important}.relite-sales-action-delete .relite-menu-action-icon svg{stroke:#dc2626!important}.relite-sales-action-menu-positioned{position:fixed!important;right:auto!important;margin:0!important;z-index:9999!important}
.purchase-editor-modern .purchase-section-adjustments label{display:block}
.purchase-editor-modern .purchase-section-shipping .widget-slot > .row:first-child > .col-md-4{width:42%;margin-left:0}
.purchase-editor-modern .purchase-section-payment .payment_row{padding:0}
.purchase-editor-modern .purchase-section-card .box-header{background:linear-gradient(100deg,#fff 68%,var(--soft));border-radius:10px}
.purchase-editor-modern .purchase-section-details .box-header::after{content:'Please enter the basic purchase details.'}
.purchase-editor-modern .purchase-section-products .box-header::after{content:'Add products to this purchase.'}
.purchase-editor-modern .purchase-section-adjustments .box-header::after{content:'Add any additional charges, discount or notes for this purchase.'}
.purchase-editor-modern .purchase-section-shipping .box-header::after{content:'Add shipping information if applicable.'}
.purchase-editor-modern .purchase-section-payment .box-header::after{content:'Enter payment information for this purchase.'}
@media(max-width:767px){.purchase-editor-modern .purchase-section-details .widget-slot > .row:first-child > [class*='col-'],.purchase-editor-modern .purchase-section-shipping .widget-slot > .row:first-child > .col-md-4{width:100%}.purchase-editor-modern .purchase-section-adjustments .widget-slot > .row > .col-sm-12 > .table > tbody > tr{grid-template-columns:1fr}.purchase-editor-modern .purchase-section-products .pull-right.col-md-5{width:100%}}
/* Illustrated callouts from the purchase editor reference. */
.purchase-editor-modern .purchase-section-card::after{position:absolute;top:9px;right:9px;z-index:1;display:flex;width:205px;height:58px;align-items:center;padding:8px 12px 8px 72px;border-radius:9px;color:var(--section);background-color:var(--soft);background-repeat:no-repeat;background-position:15px center;background-size:46px 46px;font-size:10px;line-height:14px;pointer-events:none}
.purchase-editor-modern .purchase-section-details::after{content:'Keep your purchase records accurate and organized';background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48' fill='none' stroke='%23f97316' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='10' y='6' width='25' height='34' rx='2'/%3E%3Cpath d='M17 15h18M17 21h14M17 27h18M17 33h12'/%3E%3Cpath d='M15 3h25v34' opacity='.45'/%3E%3C/svg%3E")}
.purchase-editor-modern .purchase-section-adjustments::after{content:'Add discounts, taxes and notes for better tracking.';background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48' fill='none' stroke='%237c3aed' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='15' cy='15' r='5'/%3E%3Ccircle cx='33' cy='33' r='5'/%3E%3Cpath d='M35 12 13 36'/%3E%3C/svg%3E")}
.purchase-editor-modern .purchase-section-shipping::after{content:'Track your logistics costs easily.';background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48' fill='none' stroke='%232f8ef3' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h25v22H5zM30 20h7l6 7v7H30z'/%3E%3Ccircle cx='14' cy='37' r='4'/%3E%3Ccircle cx='37' cy='37' r='4'/%3E%3C/svg%3E")}
.purchase-editor-modern .purchase-section-payment::after{content:'Record payments securely and stay updated.';background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48' fill='none' stroke='%23ef3d70' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='12' width='34' height='25' rx='4' transform='rotate(-8 7 12)'/%3E%3Cpath d='m9 19 33-5M16 30h8'/%3E%3C/svg%3E")}
.purchase-editor-modern .purchase-section-products::after{display:none}
.purchase-editor-modern .purchase-section-card .box-header{padding-right:230px!important}
.purchase-editor-modern .purchase-section-products .box-header{padding-right:18px!important}
.purchase-editor-modern .purchase-section-card .widget-slot{position:relative;z-index:2}
@media(min-width:901px){.purchase-editor-modern .purchase-section-products .widget-slot>.row:first-child{min-height:50px;margin-top:-66px;margin-left:365px;padding-top:6px}.purchase-editor-modern .purchase-section-products .widget-slot>.row:nth-child(2){margin-top:10px}}
.purchase-action-btn{display:inline-flex;min-height:38px;align-items:center;justify-content:center;gap:7px;margin:4px;padding:8px 16px;border:1px solid #f97316;border-radius:7px;font-size:12px;font-weight:600;line-height:18px}.purchase-action-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.purchase-action-btn-primary{color:#fff;background:#f97316;box-shadow:0 4px 10px rgba(249,115,22,.2)}.purchase-action-btn-secondary{color:#f97316;background:#fff}.purchase-action-btn:hover,.purchase-action-btn:focus{border-color:#ea580c;color:#fff;background:#ea580c}
@media(max-width:900px){.purchase-editor-modern .purchase-section-card::after{display:none}.purchase-editor-modern .purchase-section-card .box-header{padding-right:18px!important}}
@media(max-width:767px){.purchase-action-btn{width:100%;margin:4px 0}}
/* Joined controls share one perimeter, including Select2 and file-input controls. */
.purchase-editor-modern .input-group{min-height:35px;border:1px solid #cbd8e8!important;border-radius:7px!important;background:#fff;box-shadow:none;overflow:visible}
.purchase-editor-modern .input-group:focus-within{border-color:#f97316!important;box-shadow:0 0 0 2px rgba(249,115,22,.1)}
.purchase-editor-modern .input-group>.input-group-addon{min-height:33px;border:0!important;border-right:1px solid #d8e2ef!important;border-radius:6px 0 0 6px!important}
.purchase-editor-modern .input-group>.form-control,.purchase-editor-modern .input-group>.input-group-addon+.form-control,.purchase-editor-modern .input-group .select2-container .select2-selection{height:33px!important;min-height:33px!important;border:0!important;border-radius:0 6px 6px 0!important;margin:0!important;box-shadow:none!important}
.purchase-editor-modern .input-group>.input-group-btn>.btn{height:33px!important;min-height:33px!important;margin:0!important;border:0!important;border-left:1px solid #d8e2ef!important;border-radius:0 6px 6px 0!important}
.purchase-editor-modern .input-group .select2-selection__rendered{line-height:33px!important}
.purchase-editor-modern .input-group .select2-selection__arrow{height:33px!important}
.purchase-editor-modern .purchase-inline-icon{display:inline-block;flex-shrink:0;vertical-align:middle}
.purchase-editor-modern .purchase-toolbar-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:35px;padding:0 12px;border:1px solid transparent;border-radius:6px;font-size:12px;font-weight:500;line-height:18px;white-space:nowrap}
.purchase-editor-modern .purchase-import-button{color:#fff;background:#ff7417;border-color:#ff7417}
.purchase-editor-modern .purchase-import-button:hover{background:#ea580c;border-color:#ea580c}
.purchase-editor-modern .purchase-add-button{color:#2475ff;background:#fff;border-color:#5796ff}
.purchase-editor-modern .purchase-add-button:hover{background:#eff6ff}
.purchase-editor-modern .purchase-toolbar-button:focus-visible{outline:2px solid #2475ff;outline-offset:2px}
.purchase-editor-modern .purchase-section-products .widget-slot>.row:first-child{gap:12px}
.purchase-editor-modern .purchase-section-products .widget-slot>.row:first-child>.col-sm-2{width:auto;flex:0 0 auto;padding:0}
.purchase-editor-modern .purchase-section-products .widget-slot>.row:first-child>.col-sm-8{width:auto;flex:1 1 220px;min-width:0;padding:0}
.purchase-editor-modern .purchase-section-products .widget-slot>.row:first-child .form-group{margin:0}
@media(min-width:768px){.purchase-editor-modern .purchase-section-details .widget-slot>.row:first-child>div:has(#supplier_id),.purchase-editor-modern .purchase-section-details .widget-slot>.row:first-child>div:has(#ref_no),.purchase-editor-modern .purchase-section-details .widget-slot>.row:first-child>div:has(#transaction_date){width:25%}}
@media(min-width:901px){.purchase-editor-modern .purchase-section-products .widget-slot>.row:first-child{margin-left:29%;margin-right:0}}
@media(max-width:900px){.purchase-editor-modern .purchase-section-products .widget-slot>.row:first-child{margin:0 0 14px}}
.purchase-editor-modern .purchase-help-icon{display:inline-flex!important;width:15px;height:15px;align-items:center;justify-content:center;margin:0 0 0 5px!important;padding:0;color:#f97316;vertical-align:-3px;cursor:help;outline:0}
.purchase-editor-modern .purchase-help-icon svg{display:block;width:15px;height:15px;fill:none;stroke:currentColor}
.purchase-modern-header .purchase-keyboard-shortcut{display:inline-block!important;width:18px!important;height:18px!important;margin-left:6px!important;color:#64748b;vertical-align:-3px;cursor:help;outline:0}
.purchase-editor-modern .purchase-remove-product{display:inline-flex;align-items:center;justify-content:center;padding:5px;border:0;background:transparent;cursor:pointer}
.purchase-editor-modern .file-input .btn-file{display:inline-flex;align-items:center;gap:6px}
.purchase-editor-modern .purchase-section-products .table-responsive:has(#purchase_entry_table tbody:empty)::after{content:'No products added yet\A Import products or search and add items to get started.';padding-top:76px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24' fill='none' stroke='%239aaaca' stroke-width='1' stroke-linejoin='round'%3E%3Cpath d='m3 7 9-4 9 4-9 4zM3 7v10l9 4 9-4V7M12 11v10M3 7 1 11l8 4 3-4 3 4 8-4-2-4'/%3E%3C/svg%3E") no-repeat center 20px}
/* Purchase cards now use the same internal heading composition as sell/create and sell/edit. */
.purchase-editor-modern .purchase-section-card{overflow:visible!important;padding:0!important;border-top:1px solid #dce5f0!important;background:#fff!important;box-shadow:0 4px 14px rgba(15,23,42,.045)!important}
.purchase-editor-modern .purchase-section-card::after{display:none!important;content:none!important}
.purchase-editor-modern .purchase-section-card>.tw-p-2,.purchase-editor-modern .purchase-section-card>.sm\:tw-p-3{padding:14px!important}
.purchase-editor-modern .purchase-section-card .widget-slot{padding:0!important}
.purchase-editor-modern .sale-reference-panel__head{display:flex!important;align-items:center!important;width:100%!important;min-height:52px!important;margin:0 0 14px!important;padding:0 0 12px!important;border-bottom:1px solid #e4eaf2!important;background:transparent!important;box-sizing:border-box}
.purchase-editor-modern .sale-reference-panel__copy h4{font-weight:600!important;}
.purchase-editor-modern .purchase-section-details .sale-reference-panel__head > .sale-overview-subscribe{margin-left:auto!important;padding-left:16px!important;}
.purchase-editor-modern .sale-reference-panel__icon{display:inline-flex;flex:0 0 38px;width:38px;height:38px;align-items:center;justify-content:center;margin-right:11px;border-radius:10px;background:#fff1e8;color:#f97316}
.purchase-editor-modern .purchase-section-products .sale-reference-panel__icon{background:#eafaf2;color:#12ad69}
.purchase-editor-modern .purchase-section-adjustments .sale-reference-panel__icon{background:#f3edff;color:#7c3aed}
.purchase-editor-modern .purchase-section-shipping .sale-reference-panel__icon{background:#eaf4ff;color:#2f8ef3}
.purchase-editor-modern .purchase-section-payment .sale-reference-panel__icon{background:#fff0f5;color:#ef3d70}
.purchase-editor-modern .sale-reference-panel__icon svg{width:20px;height:20px;fill:none;stroke:currentColor}
.purchase-editor-modern .sale-reference-panel__copy h4{margin:0 0 3px!important;color:#17233a;font-size:15px;font-weight:700;line-height:1.25}
.purchase-editor-modern .sale-reference-panel__copy p{display:block!important;margin:0!important;color:#64748b;font-size:10px;line-height:1.35}
.purchase-editor-modern .purchase-section-products .widget-slot>.row:first-of-type{min-height:35px!important;margin:0 0 14px!important;padding:0!important}
.purchase-editor-modern .purchase-section-products .widget-slot>.row:nth-of-type(2){margin-top:0!important}
.purchase-editor-modern .purchase-section-products .table-responsive{overflow-x:auto;background:#fff}
.purchase-editor-modern .purchase-section-payment .payment_row{padding:10px!important;border:1px solid #e2e8f0;border-radius:11px;background:#fff;box-shadow:0 4px 14px rgba(15,23,42,.035)}
@media(max-width:767px){.purchase-editor-modern .purchase-section-card>.tw-p-2,.purchase-editor-modern .purchase-section-card>.sm\:tw-p-3{padding:11px!important}.purchase-editor-modern .sale-reference-panel__head{margin-bottom:11px!important}}
/* Match the sell editor's aligned GST, terms and payment grids. */
.purchase-editor-modern .purchase-section-details .gst-pos-row--purchase{display:flex!important;flex-wrap:nowrap;gap:16px;width:100%;margin:0 0 14px!important;padding:0!important}
.purchase-editor-modern .purchase-section-details .gst-pos-row .gst-pos-field{float:none!important;width:auto!important;min-width:0;padding:0!important}
.purchase-editor-modern .purchase-section-details .gst-pos-row .form-group{margin:0!important}
.purchase-editor-modern .purchase-section-details .gst-pos-row>.gst-pos-field:nth-child(2){order:1}
.purchase-editor-modern .purchase-section-details .gst-pos-row>.gst-pos-field:nth-child(3){order:2}
.purchase-editor-modern .purchase-section-details .gst-pos-row>[id^="gst-panel-purchase-"]{order:3}
.purchase-editor-modern .purchase-section-details .gst-pos-row--purchase>.gst-pos-field.col-sm-3{flex:0 0 calc(33.333333% - 11px);width:calc(33.333333% - 11px)!important;max-width:calc(33.333333% - 11px)}
.purchase-editor-modern .purchase-section-details .widget-slot>.row:first-child>.col-md-3{width:25%!important}
.purchase-editor-modern .purchase-section-details .widget-slot>.row:first-child>.col-sm-3:has(#upload_document){width:25%!important}
.purchase-editor-modern .purchase-section-details .multi-input{display:flex;flex-wrap:wrap;width:100%}
.purchase-editor-modern .purchase-section-details .multi-input>label{flex:0 0 auto}
.purchase-editor-modern .purchase-section-details .multi-input>.purchase-help-icon{margin-top:1px}
.purchase-editor-modern .purchase-section-details .multi-input>br{display:none}
.purchase-editor-modern .purchase-section-details .multi-input>.width-40{width:40%!important;border-radius:7px 0 0 7px!important}
.purchase-editor-modern .purchase-section-details .multi-input>.width-60{width:60%!important;border-left:0!important;border-radius:0 7px 7px 0!important}
.purchase-editor-modern .purchase-section-payment>.tw-p-2,.purchase-editor-modern .purchase-section-payment>.sm\:tw-p-3{padding:14px!important}
.purchase-editor-modern .purchase-section-payment>.tw-p-2>.widget-slot>.box-body,.purchase-editor-modern .purchase-section-payment>.sm\:tw-p-3>.widget-slot>.box-body{margin:0!important;padding:0!important;border:0!important;box-shadow:none!important}
.purchase-editor-modern .purchase-section-payment .payment_row>.row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 16px}
.purchase-editor-modern .purchase-section-payment .payment_row>.row>[class*='col-']{float:none!important;width:auto!important;min-width:0;padding:0!important}
.purchase-editor-modern .purchase-section-payment .payment_row>.row>.col-md-12:first-of-type{grid-column:1/-1}
.purchase-editor-modern .purchase-section-payment .payment_details_div:not(.hide){display:contents!important}
.purchase-editor-modern .purchase-section-payment .payment_details_div>.clearfix{display:none}
.purchase-editor-modern .purchase-section-payment .payment_row>.row>.clearfix{display:none}
.purchase-editor-modern .purchase-section-payment .payment_row>.row>.col-md-12:last-child{grid-column:1/-1}
.purchase-editor-modern .purchase-section-payment .payment_row hr{grid-column:1/-1;width:100%}
.purchase-editor-modern .purchase-section-payment .payment_row+.row{margin-top:8px}
@media(max-width:991px){.purchase-editor-modern .purchase-section-payment .payment_row>.row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:767px){.purchase-editor-modern .purchase-section-details .gst-pos-row--purchase{flex-direction:column;gap:0}.purchase-editor-modern .purchase-section-details .gst-pos-row--purchase>.gst-pos-field.col-sm-3{flex:0 0 auto;width:100%!important;max-width:100%}.purchase-editor-modern .purchase-section-details .gst-pos-row,.purchase-editor-modern .purchase-section-payment .payment_row>.row{grid-template-columns:1fr}.purchase-editor-modern .purchase-section-details .widget-slot>.row:first-child>.col-md-3,.purchase-editor-modern .purchase-section-details .widget-slot>.row:first-child>.col-sm-3:has(#upload_document){width:100%!important}}
/* Sell-style layout sections and form action bar. */
.purchase-editor-modern .purchase-layout-workspace{display:grid;grid-template-columns:220px minmax(0,1fr);align-items:start;gap:18px}
.purchase-editor-modern .purchase-layout-main{min-width:0}
.purchase-editor-modern .purchase-layout-sections{position:sticky;top:76px;z-index:24;padding:12px;border:1px solid #dfe6ef;border-radius:14px;background:#fff;box-shadow:0 5px 18px rgba(30,51,79,.05)}
.purchase-editor-modern .sale-layout-sections__title{display:block;padding:7px 10px 10px;color:#8a97aa;font-size:10px;font-weight:600;letter-spacing:.9px;text-transform:uppercase}
.purchase-editor-modern .sale-layout-sections__nav{display:flex;flex-direction:column;gap:0}
.purchase-editor-modern .sale-layout-section-link{display:flex;align-items:center;gap:9px;padding:10px;border-radius:9px;color:#536176;font-size:12px;font-weight:500;line-height:1.3;transition:.18s}
.purchase-editor-modern .sale-layout-section-link:hover,.purchase-editor-modern .sale-layout-section-link:focus,.purchase-editor-modern .sale-layout-section-link.is-active{color:#ff6b17;background:#fff3eb;text-decoration:none}
.purchase-editor-modern .sale-layout-section-link svg{width:16px;height:16px;flex:0 0 16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.purchase-editor-modern .purchase-layout-main>.purchase-section-card[id]{scroll-margin-top:88px}
.purchase-editor-modern .purchase-modern-savebar{position:relative;z-index:20;display:flex;width:100%;max-width:100%;clear:both;box-sizing:border-box;align-items:center;justify-content:space-between!important;gap:14px;margin:2px 0 20px;padding:12px 14px;border:1px solid #d7e3f2;border-radius:12px;background:rgba(255,255,255,.97);box-shadow:0 8px 24px rgba(15,35,70,.09);backdrop-filter:blur(10px)}
.purchase-editor-modern .sale-modern-savebar__actions{display:flex;align-items:center;justify-content:flex-end;gap:9px;margin-left:auto}
.purchase-editor-modern .sale-modern-action{display:inline-flex!important;min-height:36px;align-items:center;justify-content:center;gap:7px;padding:8px 15px;border:1px solid transparent;border-radius:7px;font-size:12px;font-weight:600;line-height:1;white-space:nowrap;transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease}
.purchase-editor-modern .sale-modern-action:hover{transform:translateY(-1px)}
.purchase-editor-modern .sale-modern-action:focus{outline:2px solid rgba(249,115,22,.2);outline-offset:2px}
.purchase-editor-modern .sale-modern-action--cancel{min-width:135px;margin-right:auto;border-color:#b9c9e0;background:#fff;color:#102a63}
.purchase-editor-modern .sale-modern-action--cancel:hover{border-color:#7f9bc4;background:#f8fbff}
.purchase-editor-modern .sale-modern-action--draft{border-color:#86efac;background:#f0fdf4;color:#059669}
.purchase-editor-modern .sale-modern-action--draft:hover{background:#dcfce7;box-shadow:0 5px 12px rgba(5,150,105,.13)}
.purchase-editor-modern .sale-modern-action--new{border-color:#ff6b17;background:#ff6b17;color:#fff;box-shadow:0 5px 12px rgba(255,107,23,.18)}
.purchase-editor-modern .sale-modern-action--new:hover{border-color:#ea580c;background:#ea580c;color:#fff}
.purchase-editor-modern .sale-modern-action>svg{display:block!important;width:16px!important;height:16px!important;min-width:16px;fill:none!important;stroke:currentColor!important;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:991px){.purchase-editor-modern .purchase-layout-workspace{grid-template-columns:1fr;gap:12px}.purchase-editor-modern .purchase-layout-sections{position:static;display:flex;overflow-x:auto}.purchase-editor-modern .sale-layout-sections__title{display:none}.purchase-editor-modern .sale-layout-sections__nav{flex-direction:row}.purchase-editor-modern .sale-layout-section-link{flex:0 0 auto;white-space:nowrap}}
@media(max-width:700px){.purchase-editor-modern .purchase-modern-savebar{position:static;align-items:stretch;flex-direction:column}.purchase-editor-modern .sale-modern-savebar__actions{display:grid;width:100%;grid-template-columns:repeat(2,minmax(0,1fr));margin-left:0}.purchase-editor-modern .sale-modern-action{width:100%}}
@media(max-width:480px){.purchase-editor-modern .sale-modern-savebar__actions{grid-template-columns:1fr}}
/* Keep every purchase save-bar action on the same baseline and height. */
.purchase-editor-modern .purchase-modern-savebar{min-height:66px}
.purchase-editor-modern .purchase-modern-savebar .sale-modern-action,
.purchase-editor-modern .purchase-modern-savebar #submit_purchase_form,
.purchase-editor-modern .purchase-modern-savebar #submit_purchase_and_add_another{
    height:38px!important;
    min-height:38px!important;
    margin:0!important;
    padding:0 16px!important;
    line-height:36px!important;
    box-sizing:border-box!important;
}
.purchase-editor-modern .purchase-modern-savebar .sale-modern-action>svg{align-self:center}
.purchase-editor-modern .purchase-modern-savebar .sale-modern-savebar__actions{align-self:center}
/* Purchase payment details use the open sell-style surface without a nested outline. */
.purchase-editor-modern .purchase-section-payment .widget-slot>.box-body.payment_row{
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
}
.purchase-editor-modern .purchase-section-payment .widget-slot>.box-body.payment_row>.add_without_price_hide>hr{display:none!important}
.purchase-editor-modern #purchase_entry_table>thead>tr>th.purchase-heading-centered{text-align:center!important;vertical-align:middle!important}
.purchase-editor-modern #purchase_entry_table>tbody>tr>td.purchase-value-centered{text-align:center!important;vertical-align:middle!important}
.purchase-editor-modern #purchase_entry_table>tbody>tr>td.purchase-value-centered .row_subtotal_before_tax,
.purchase-editor-modern #purchase_entry_table>tbody>tr>td.purchase-value-centered .row_subtotal_after_tax{display:inline-flex;width:100%;min-height:30px;align-items:center;justify-content:center;text-align:center!important;line-height:1.42857143}
.purchase-editor-modern .purchase-summary-panel{clear:both;width:100%;margin:18px 0 0;padding:0;border:1px solid #dce8fb;border-radius:14px;overflow:hidden;background:linear-gradient(135deg,#fff 0%,#f7faff 58%,#eef5ff 100%);box-shadow:0 8px 24px rgba(47,111,237,.08)}
.purchase-editor-modern .purchase-summary-panel__header{display:flex;align-items:center;justify-content:space-between;min-height:52px;padding:0 24px;border-bottom:1px solid #e3ecfa;box-sizing:border-box}
.purchase-editor-modern .purchase-summary-panel__title{display:flex;align-items:center;gap:11px}.purchase-editor-modern .purchase-summary-panel__title h3{margin:0;color:#13234a;font-size:16px;font-weight:600}.purchase-editor-modern .purchase-summary-panel__title-icon,.purchase-editor-modern .purchase-summary-metric__icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;color:#f97316;background:#fff1e8;border-radius:10px}.purchase-editor-modern .purchase-summary-panel__title-icon{width:38px;height:38px}.purchase-editor-modern .purchase-summary-panel__title-icon svg{width:20px;height:20px}.purchase-editor-modern .purchase-summary-panel svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.purchase-editor-modern .purchase-summary-panel__currency{color:#61739a;font-size:14px;font-weight:600}
.purchase-editor-modern .purchase-summary-panel__metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(300px,1.65fr);align-items:stretch;padding:16px 24px 20px}.purchase-editor-modern .purchase-summary-metric{position:relative;display:flex;align-items:center;gap:14px;min-width:0;padding:12px 22px;border-right:1px solid #dbe5f5}.purchase-editor-modern .purchase-summary-metric__icon{width:46px;height:46px}.purchase-editor-modern .purchase-summary-metric__icon svg{width:25px;height:25px}.purchase-editor-modern .purchase-summary-metric__label{display:block;margin-bottom:3px;color:#66779d;font-size:13px;font-weight:600}.purchase-editor-modern .purchase-summary-metric strong{display:block;color:#10234e;font-size:22px;font-weight:800;line-height:1.15;white-space:nowrap}
.purchase-editor-modern .purchase-summary-metric--net{justify-content:flex-start;margin-left:22px;border:1px solid #ffd1b3;border-radius:14px;background:linear-gradient(135deg,#fffaf5,#fff0e4);box-shadow:0 7px 18px rgba(255,107,23,.1)}.purchase-editor-modern .purchase-summary-metric--net .purchase-summary-metric__icon{color:#fff;background:#ff791f}.purchase-editor-modern .purchase-summary-metric--net>div{display:flex;align-items:center;width:100%;gap:18px}.purchase-editor-modern .purchase-summary-metric--net .purchase-summary-metric__label{margin:0;color:#cf4d00;font-size:16px;font-weight:800}.purchase-editor-modern .purchase-summary-metric--net strong{margin-left:auto;color:#f2630b;font-size:28px}
@media(max-width:1199px){.purchase-editor-modern .purchase-summary-panel__metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.purchase-editor-modern .purchase-summary-metric{border-bottom:1px solid #dbe5f5}.purchase-editor-modern .purchase-summary-metric--net{margin:10px 0 0}}
@media(max-width:767px){.purchase-editor-modern .purchase-summary-panel__header{align-items:center;padding:0 15px;gap:10px}.purchase-editor-modern .purchase-summary-panel__title h3{font-size:16px}.purchase-editor-modern .purchase-summary-panel__currency{font-size:11px}.purchase-editor-modern .purchase-summary-panel__metrics{grid-template-columns:1fr;padding:10px 15px 15px}.purchase-editor-modern .purchase-summary-metric{border-right:0}.purchase-editor-modern .purchase-summary-metric--net strong{font-size:24px}}
/* Stable purchase-information placement; replaces the legacy floated columns. */
.purchase-editor-modern .purchase-section-details .purchase-information-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:30px;row-gap:14px;margin:0!important;align-items:start}
.purchase-editor-modern .purchase-section-details .purchase-information-grid>[class*='col-']{float:none!important;width:auto!important;min-width:0;margin:0!important;padding:0!important}
.purchase-editor-modern .purchase-section-details .purchase-information-grid>div:has(#supplier_id),.purchase-editor-modern .purchase-section-details .purchase-information-grid>div:has(#ref_no),.purchase-editor-modern .purchase-section-details .purchase-information-grid>div:has(#transaction_date),.purchase-editor-modern .purchase-section-details .purchase-information-grid>div:has(#status),.purchase-editor-modern .purchase-section-details .purchase-information-grid>div:has(#pay_term_number),.purchase-editor-modern .purchase-section-details .purchase-information-grid>div:has(#upload_document){width:auto!important}
.purchase-editor-modern .purchase-section-details .purchase-information-grid>.clearfix{display:none!important}
.purchase-editor-modern .purchase-section-details .purchase-information-grid>div:has(#supplier_id){grid-column:1;grid-row:1}
.purchase-editor-modern .purchase-section-details .purchase-information-grid>div:has(#ref_no){grid-column:2;grid-row:1}
.purchase-editor-modern .purchase-section-details .purchase-information-grid>div:has(#transaction_date){grid-column:3;grid-row:1}
.purchase-editor-modern .purchase-section-details .purchase-information-grid>div:has(#status){grid-column:4;grid-row:1}
.purchase-editor-modern .purchase-section-details .purchase-information-grid>.purchase-info-address{grid-column:1;grid-row:2}
.purchase-editor-modern .purchase-section-details .purchase-information-grid>.purchase-info-location{grid-column:2;grid-row:2}
.purchase-editor-modern .purchase-section-details .purchase-information-grid>.gst-pos-row{grid-column:1/4;grid-row:3;margin:0!important}
.purchase-editor-modern .purchase-section-details .purchase-information-grid>div:has(#pay_term_number){grid-column:3;grid-row:2}
.purchase-editor-modern .purchase-section-details .purchase-information-grid>.purchase-info-order{grid-column:4;grid-row:2}
.purchase-editor-modern .purchase-section-details .purchase-information-grid>div:has(#upload_document){grid-column:4;grid-row:3;width:auto!important}
.purchase-editor-modern .purchase-section-details .purchase-information-grid>div:has(#exchange_rate){grid-column:4;grid-row:4}
.purchase-editor-modern .purchase-section-details .purchase-information-grid .form-group{min-width:0;margin-bottom:0}
.purchase-editor-modern .purchase-section-details .purchase-information-grid>div:first-child>strong{display:block;margin-top:2px;margin-bottom:6px;color:var(--p-ink);font-size:12px}
.purchase-editor-modern .purchase-section-details .multi-input{position:relative;display:grid!important;grid-template-columns:40% 60%;align-items:end;width:100%;padding-top:24px}
.purchase-editor-modern .purchase-section-details .multi-input>.purchase-field-label{position:absolute;top:0;left:0;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.purchase-editor-modern .purchase-section-details .multi-input>.purchase-field-label label{margin:0!important}
.purchase-editor-modern .purchase-section-details .multi-input>.purchase-field-label .purchase-help-icon{position:static!important;margin:0!important;flex:0 0 auto}
.purchase-editor-modern .purchase-section-details .multi-input>br{display:none!important}
.purchase-editor-modern .purchase-section-details .multi-input>.width-40,.purchase-editor-modern .purchase-section-details .multi-input>.width-60{float:none!important;width:100%!important;margin:0!important}
.purchase-editor-modern .purchase-section-details .multi-input>.width-40{border-radius:7px 0 0 7px!important}
.purchase-editor-modern .purchase-section-details .multi-input>.width-60{border-left:0!important;border-radius:0 7px 7px 0!important}
.purchase-editor-modern .purchase-section-details .file-input,.purchase-editor-modern .purchase-section-details .file-input .file-caption-main{width:100%}
.purchase-editor-modern .purchase-section-details .purchase-order-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px;margin:14px 0 0!important}
.purchase-editor-modern .purchase-section-details .purchase-order-grid>[class*='col-']{float:none!important;width:auto!important;padding:0!important}
.purchase-editor-modern .purchase-section-details .purchase-order-grid>[class*='col-']:first-child{grid-column:1!important}
@media(max-width:1199px){.purchase-editor-modern .purchase-section-details .purchase-information-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px}.purchase-editor-modern .purchase-section-details .purchase-information-grid>div:has(#supplier_id){grid-column:1;grid-row:1}.purchase-editor-modern .purchase-section-details .purchase-information-grid>div:has(#ref_no){grid-column:2;grid-row:1}.purchase-editor-modern .purchase-section-details .purchase-information-grid>.purchase-info-address{grid-column:1;grid-row:2}.purchase-editor-modern .purchase-section-details .purchase-information-grid>.purchase-info-location{grid-column:2;grid-row:2}.purchase-editor-modern .purchase-section-details .purchase-information-grid>div:has(#transaction_date){grid-column:1;grid-row:3}.purchase-editor-modern .purchase-section-details .purchase-information-grid>div:has(#status){grid-column:2;grid-row:3}.purchase-editor-modern .purchase-section-details .purchase-information-grid>.gst-pos-row{grid-column:1/-1;grid-row:4}.purchase-editor-modern .purchase-section-details .purchase-information-grid>div:has(#pay_term_number){grid-column:1;grid-row:5}.purchase-editor-modern .purchase-section-details .purchase-information-grid>.purchase-info-order{grid-column:2;grid-row:5}.purchase-editor-modern .purchase-section-details .purchase-information-grid>div:has(#upload_document){grid-column:1/-1;grid-row:6}.purchase-editor-modern .purchase-section-details .purchase-information-grid>div:has(#exchange_rate){grid-column:1;grid-row:7}}
@media(max-width:767px){.purchase-editor-modern .purchase-section-details .purchase-information-grid,.purchase-editor-modern .purchase-section-details .purchase-order-grid{display:block!important}.purchase-editor-modern .purchase-section-details .purchase-information-grid>*{width:100%!important;margin-bottom:14px!important}.purchase-editor-modern .purchase-section-details .purchase-information-grid>.gst-pos-row{display:grid!important}.purchase-editor-modern .purchase-section-details .purchase-information-grid>div:has(#exchange_rate).hide{display:none!important}}
/* Purchase product import modal. */
.purchase-import-modal .modal-dialog{width:980px;max-width:calc(100% - 34px);margin:20px auto}.purchase-import-modal .modal-content{overflow:hidden;border:1px solid #dbe8fb;border-radius:14px;background:#fff;box-shadow:0 20px 55px rgba(13,35,76,.26)}.purchase-import-modal svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.purchase-import-modal__header{display:flex;align-items:center;justify-content:space-between;min-height:62px;padding:0 20px;border-bottom:1px solid #e7eef8}.purchase-import-modal__heading{display:flex;align-items:center;gap:11px}.purchase-import-modal__heading-icon{display:inline-flex;width:38px;height:38px;align-items:center;justify-content:center;color:#ff6b17;border:1px solid #ffc89f;border-radius:10px;background:#fff4ed}.purchase-import-modal__heading-icon svg{width:19px;height:19px}.purchase-import-modal__heading h4{margin:0;color:#13234a;font-size:17px;font-weight:700}.purchase-import-modal__close{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;color:#73819a;border:0;background:transparent}.purchase-import-modal__close:hover{color:#13234a;background:#f4f7fb;border-radius:8px}.purchase-import-modal__close svg{width:18px;height:18px}.purchase-import-modal__body{padding:16px 18px 12px;background:linear-gradient(180deg,#fbfdff,#f7fbff)}
.purchase-import-dropzone-wrap{position:relative;display:grid;grid-template-columns:260px minmax(0,1fr) 255px;align-items:stretch;min-height:210px;border:1.5px dashed #aecaff;border-radius:12px;background:linear-gradient(135deg,#fff 0%,#f8fbff 100%);overflow:hidden}.purchase-import-file-visual{position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 38% 50%,#eaf2ff,transparent 65%)}.purchase-import-file-visual__sheet{position:absolute;width:76px;height:92px;filter:drop-shadow(0 9px 12px rgba(32,88,160,.16))}.purchase-import-file-visual__sheet--xls{color:#0caf72;transform:translate(-27px,4px) rotate(-13deg)}.purchase-import-file-visual__sheet--csv{color:#fff;background:#fff;transform:translate(22px,2px) rotate(9deg)}.purchase-import-file-visual__sheet path{fill:#fff;stroke:currentColor;stroke-width:2}.purchase-import-file-visual__sheet--xls path:first-child{fill:#14b878}.purchase-import-file-visual__sheet text{fill:currentColor;stroke:none;font-size:14px;font-weight:800}.purchase-import-dropzone{position:relative;display:flex!important;align-items:center;justify-content:center;min-height:208px!important;margin:0!important;padding:12px!important;border:0!important;background:transparent!important}.purchase-import-dropzone .dz-message{display:none!important}.purchase-import-dropzone__content{position:relative;z-index:2;display:flex;align-items:center;flex-direction:column;color:#60729a;font-size:12px;text-align:center;pointer-events:none}.purchase-import-dropzone__content strong{margin:6px 0 2px;color:#12214a;font-size:17px;font-weight:800}.purchase-import-dropzone__cloud{display:inline-flex;width:49px;height:49px;align-items:center;justify-content:center;color:#2c6cf3}.purchase-import-dropzone__cloud svg{width:47px;height:47px;stroke-width:1.9}.purchase-import-dropzone__choose{display:inline-flex;align-items:center;gap:8px;margin:12px 0 9px;padding:11px 25px;color:#fff;border-radius:11px;background:linear-gradient(135deg,#ff7d24,#ff5b10);box-shadow:0 7px 12px rgba(255,105,23,.22);font-size:14px;font-weight:700}.purchase-import-dropzone__choose svg{width:17px;height:17px}.purchase-import-dropzone__content small{font-size:11px;color:#6e82a9}.purchase-import-benefits{display:flex;flex-direction:column;justify-content:center;gap:13px;margin:16px;padding:12px 16px;border-left:1px solid #e3ebf7;border-radius:12px;background:linear-gradient(135deg,#f1f7ff,#e7f1ff)}.purchase-import-benefits>div{display:flex;align-items:center;gap:11px}.purchase-import-benefits__icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 29px;width:29px;height:29px;color:#fff;border-radius:50%}.purchase-import-benefits__icon svg{width:17px;height:17px}.purchase-import-benefits__icon--green{background:#1fc879}.purchase-import-benefits__icon--blue{background:#2e6ff2}.purchase-import-benefits__icon--purple{background:#7556f4}.purchase-import-benefits p{margin:0}.purchase-import-benefits strong,.purchase-import-benefits p span{display:block}.purchase-import-benefits strong{color:#192858;font-size:12px;font-weight:800}.purchase-import-benefits p span{margin-top:1px;color:#6477a0;font-size:10px}
.purchase-import-support-row{display:grid;grid-template-columns:320px minmax(0,1fr);gap:16px;margin:14px 0}.purchase-import-template,.purchase-import-guidance{display:flex;align-items:center;gap:12px;min-height:62px;padding:10px 16px;border-radius:10px;text-decoration:none!important}.purchase-import-template{color:#fff!important;background:linear-gradient(135deg,#00a977,#00946c);box-shadow:0 6px 12px rgba(0,158,111,.16)}.purchase-import-template>span,.purchase-import-guidance>span{display:inline-flex;align-items:center;justify-content:center;flex:0 0 34px;width:34px;height:34px;border-radius:9px}.purchase-import-template>span{background:rgba(255,255,255,.18)}.purchase-import-template>span svg{width:21px;height:21px}.purchase-import-template p,.purchase-import-guidance p{margin:0}.purchase-import-template strong,.purchase-import-template small,.purchase-import-guidance strong,.purchase-import-guidance small{display:block}.purchase-import-template strong{font-size:13px;font-weight:800}.purchase-import-template small{font-size:10px}.purchase-import-template__chevron{width:17px;height:17px;margin-left:auto}.purchase-import-guidance{color:#2369e8;background:linear-gradient(135deg,#eaf4ff,#eff7ff)}.purchase-import-guidance>span{color:#fff;background:#2672f1}.purchase-import-guidance>span svg{width:21px;height:21px}.purchase-import-guidance strong{font-size:12px;font-weight:800}.purchase-import-guidance small{color:#6880aa;font-size:10px}
.purchase-import-instructions{padding:14px 16px 10px;border:1px solid #e1ebf8;border-radius:13px;background:#fff;box-shadow:0 5px 16px rgba(34,73,135,.04)}.purchase-import-instructions__head{display:flex;align-items:center;gap:12px;margin-bottom:10px}.purchase-import-instructions__icon{display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;width:38px;height:38px;color:#fff;border-radius:9px;background:#ff6b17}.purchase-import-instructions__icon svg{width:21px;height:21px}.purchase-import-instructions__head h4{margin:0 0 3px;color:#152752;font-size:16px;font-weight:800}.purchase-import-instructions__head p{margin:0;color:#65789d;font-size:11px;line-height:1.45}.purchase-import-tip{display:flex;align-items:center;gap:8px;margin-left:auto;max-width:320px;padding:10px 13px;border-radius:10px;background:linear-gradient(135deg,#fff6ef,#fff0e7)}.purchase-import-tip>span{display:inline-flex;color:#ff8a21}.purchase-import-tip svg{width:23px;height:23px}.purchase-import-tip p{margin:0}.purchase-import-tip strong,.purchase-import-tip small{display:block}.purchase-import-tip strong{color:#e7610f;font-size:12px}.purchase-import-tip small{color:#8b7c75;font-size:10px;line-height:1.3}.purchase-import-instructions__table{margin:0;border:1px solid #e0e8f2;border-radius:8px;overflow:hidden;font-size:11px}.purchase-import-instructions__table>thead>tr>th{padding:9px 13px!important;color:#25365f;background:#edf3fa;border:0!important;font-size:10px;font-weight:800}.purchase-import-instructions__table>tbody>tr>td{padding:7px 13px!important;color:#40547b;border:0!important;border-top:1px solid #e8eff7!important;vertical-align:middle}.purchase-import-instructions__table>tbody>tr:nth-child(even)>td{background:#f6f9fc}.purchase-import-instructions__table th:first-child,.purchase-import-instructions__table td:first-child{width:42px;text-align:center}.purchase-import-instructions__table th:nth-child(2){width:31%}.purchase-import-instructions__table th:nth-child(3){width:16%}.purchase-import-badge{display:inline-block;padding:3px 8px;color:#71819e;border-radius:7px;background:#e9eff7;font-size:10px;font-weight:700}.purchase-import-badge--required{color:#fa4f63;background:#ffe4e8}.purchase-import-modal__footer{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:12px 20px;border-top:1px solid #e3ebf5;background:#fff}.purchase-import-modal__footer button{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 15px;border-radius:8px;font-size:12px;font-weight:700}.purchase-import-modal__footer svg{width:16px;height:16px}.purchase-import-modal__close-button{color:#263a64;background:#fff;border:1px solid #dce6f3}.purchase-import-modal__submit{color:#fff;background:linear-gradient(135deg,#ff7c25,#ff5a10);border:1px solid #ff6717;box-shadow:0 6px 12px rgba(255,100,17,.18)}
@media(max-width:767px){.purchase-import-modal .modal-dialog{max-width:calc(100% - 18px);margin:9px auto}.purchase-import-modal__body{padding:12px}.purchase-import-dropzone-wrap{grid-template-columns:1fr;min-height:0}.purchase-import-file-visual{display:none}.purchase-import-benefits{margin:0 12px 12px;border-left:0}.purchase-import-support-row{grid-template-columns:1fr}.purchase-import-instructions__head{align-items:flex-start}.purchase-import-tip{display:none}.purchase-import-instructions{padding:12px}.purchase-import-instructions__table{min-width:670px}.purchase-import-modal__footer{padding:10px 12px}.purchase-import-modal__footer button{padding:0 11px}}
.purchase-import-modal__header{display:flex!important;justify-content:flex-start!important}.purchase-import-modal__heading{display:flex!important;flex:0 1 auto!important;align-items:center!important;margin:0!important}.purchase-import-modal__heading .modal-title{float:none!important;width:auto!important;margin:0!important;text-align:left!important;font-weight:600!important}.purchase-import-modal__close{float:none!important;margin:0 0 0 auto!important}.purchase-import-dropzone__content strong{font-weight:600}.purchase-import-instructions__head h4{font-weight:600}.purchase-import-file-visual__sheet--xls{color:#08ad70!important}.purchase-import-file-visual__sheet--xls text{fill:#fff!important;font-size:24px!important;font-weight:800!important}.purchase-import-file-visual__sheet--csv{color:#2c9b7b!important;background:transparent!important}.purchase-import-file-visual__sheet--csv path:first-child{fill:#fff!important;stroke:#e7edf7!important}.purchase-import-file-visual__sheet--csv text{fill:#16a779!important;font-size:12px!important;font-weight:800!important}
.relite-sales-action-bar .relite-sales-action-more svg { display:block!important; width:19px!important; height:19px!important; fill:currentColor!important; stroke:none!important; }
.relite-sales-action-bar .relite-sales-action-icon { min-width:27px!important; max-width:27px!important; gap:0!important; }
.relite-sales-action-menu .dropdown-menu > li > .hide,
.relite-sales-action-menu .dropdown-menu > li > .hidden,
.relite-sales-action-menu .dropdown-menu > li > [hidden] { display:none!important; }
.relite-sales-action-menu .dropdown-menu > li > .relite-sales-action-delete:hover .relite-menu-action-icon svg { stroke:#dc2626!important; }
.relite-sales-action-menu .dropdown-menu > li.divider { margin:5px 8px; }
.table th.relite-action-sticky, .table td.relite-action-sticky { position:sticky!important; right:0; z-index:4; border-left:1px solid #e5e7eb!important; box-shadow:-5px 0 9px -8px rgba(15,23,42,.55); background:#fff!important; }
.table thead th.relite-action-sticky { z-index:6; background:#f8fafc!important; }
.table-striped tbody tr:nth-of-type(odd) > td.relite-action-sticky { background:#f9f9f9!important; }
.table tbody tr:hover > td.relite-action-sticky { background:#fff7ed!important; }
.table td.relite-action-sticky:focus-within { z-index:100; }
.relite-sales-action-icon.relite-sales-action-delete { color:#dc2626!important; }
table.table th.relite-action-sticky, table.table td.relite-action-sticky,
table.table th.modern-action-column, table.table td.modern-action-column {
    width:1%!important;
    min-width:0!important;
    white-space:nowrap!important;
}
/* Action columns scroll normally with the table on phones. */
@media (max-width: 767px) {
    body table.table .relite-action-sticky,
    body .dataTables_wrapper table .modern-action-column,
    body #sell_table_wrapper .dataTables_scrollHead table thead th:last-child,
    body #sell_table_wrapper .dataTables_scrollBody table tbody td:last-child {
        position: static !important;
        right: auto !important;
        left: auto !important;
        z-index: auto !important;
        box-shadow: none !important;
    }
}
.app-main-footer { flex-wrap:wrap; flex-basis:auto; gap:6px 12px; padding:5px 12px 5px 0; }
.footer-plan-strip { display:inline-flex; align-items:center; gap:12px; margin-left:auto; padding:4px 12px 4px 8px; border:1px solid #e5ecf5; border-radius:9px; background:linear-gradient(110deg,#fff,#f6f8fb); color:#132b4f; font-size:11px; line-height:1.3; white-space:nowrap; box-shadow:0 2px 6px rgba(20,45,80,.04); }
.footer-plan-strip:hover,.footer-plan-strip:focus { color:#132b4f; border-color:#ffb98a; text-decoration:none; }
.footer-plan-strip__icon { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; flex-shrink:0; background:#0b2342; color:#fbbf24; border-radius:6px; }
.footer-plan-strip__icon svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.footer-plan-strip__name { font-weight:600; padding-right:14px; border-right:1px solid #cad5e4; }
.footer-plan-strip__expiry strong { color:#ff6514; font-weight:600; margin-left:4px; }
.footer-plan-strip__progress { width:80px; height:6px; overflow:hidden; border-radius:8px; background:#cad4e2; }
.footer-plan-strip__progress>span { display:block; height:100%; border-radius:inherit; background:#ff6514; }
.footer-plan-strip__days { font-weight:600; }
@media(max-width:767px) { .app-main-footer .footer-plan-strip { margin:0 8px 0 12px; max-width:calc(100% - 20px); gap:8px; flex-wrap:wrap; white-space:normal; } .footer-plan-strip__progress { width:55px; } }
/* Match the CRM dashboard hero's compact 128px baseline. */
.business-settings-editor-hero,
.content.business-settings-hero,
.fy-hero,
.content.bc-hero,
.content.bc-hero.bc-hero--crm-height {
    position:relative;
    height:auto!important;
    min-height:128px!important;
    box-sizing:border-box;
    padding:22px 26px!important;
}
body .business-settings-editor-hero .business-settings-editor-hero__art,
body .business-settings-hero .business-settings-page-header__art,
body .fy-hero .fy-hero-art,
body .bc-hero .bc-hero__art,
body .bc-hero--crm-height .bc-hero__art {
    position:absolute!important;
    top:50%!important;
    bottom:auto!important;
    height:112px!important;
    max-height:112px!important;
    transform:translateY(-50%)!important;
}
body .fy-hero .fy-hero-art { right:26px; width:350px; }
body .fy-hero .fy-hero-copy { position:relative; z-index:2; }
body .business-settings-hero .business-settings-page-header__art>svg { display:block; width:100%!important; height:100%!important; }
.content.business-settings-hero h2,.fy-hero h2,.content.bc-hero h2 { margin:5px 0!important; font-size:25px; line-height:1.2; }
.content.business-settings-hero p,.fy-hero p,.content.bc-hero p { font-size:12px; line-height:1.4; }
@media(min-width:901px) {
    .business-settings-hero h2 br,.fy-hero h2 br { display:none; }
}
@media(max-width:600px) {
    .business-settings-editor-hero,
    .content.business-settings-hero,
    .fy-hero,
    .content.bc-hero,
    .content.bc-hero.bc-hero--crm-height { padding:20px!important; }
}
.app-mobile-nav { display:none; }
@media screen and (max-width:767px) {
    .app-main-footer { display:none!important; }
    .app-mobile-nav { position:fixed; bottom:0; left:0; right:0; z-index:1040; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); min-height:60px; padding:5px 6px calc(5px + env(safe-area-inset-bottom,0px)); background:#fff; border-top:1px solid #e5eaf2; box-shadow:0 -3px 14px rgba(15,39,71,.06); }
    .app-mobile-nav>a,.app-mobile-nav>button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-height:50px; padding:4px 0; margin:0; border:0; border-radius:8px; background:transparent; color:#536783; font-family:inherit; font-size:10px; font-weight:600; line-height:1.2; text-decoration:none; }
    .app-mobile-nav svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
    .app-mobile-nav [aria-current="page"],.app-mobile-nav>a:hover,.app-mobile-nav>button:hover { color:#ff5a0a; }
    .app-mobile-nav>a:focus-visible,.app-mobile-nav>button:focus-visible { outline:2px solid #ff9d66; outline-offset:-2px; }
    main:has(.app-mobile-nav) #scrollable-container { padding-bottom:calc(72px + env(safe-area-inset-bottom,0px)); }
    main:has(.app-mobile-nav) .scrolltop { bottom:calc(76px + env(safe-area-inset-bottom,0px)); }
}
@media screen and (max-width:767px) {
    .relite-global-header .small-view-button,
    .relite-global-header .header-quick-add,
    .relite-global-header [data-header-pos-link] { display:none!important; }
}
@media screen and (max-width:767px) {
    body:has(.app-mobile-nav) .side-bar {
        min-height:0!important;
        height:calc(100vh - var(--app-mobile-nav-height))!important;
        max-height:calc(100vh - var(--app-mobile-nav-height))!important;
        height:calc(100dvh - var(--app-mobile-nav-height))!important;
        max-height:calc(100dvh - var(--app-mobile-nav-height))!important;
    }
    body:has(.app-mobile-nav) .side-bar.small-view-side-active { display:flex!important; flex-direction:column!important; }
    body:has(.app-mobile-nav) .side-bar #side-bar { flex:1 1 auto; min-height:0; overflow-y:auto; }
    body:has(.app-mobile-nav) .sidebar-account-area { flex:0 0 auto; padding:10px 12px; max-height:45dvh; overflow-y:auto; }
    body:has(.app-mobile-nav) .sidebar-collapse-footer { display:none; }
}
@media screen and (max-width:767px) {
    body { --app-mobile-nav-height:calc(61px + env(safe-area-inset-bottom,0px)); }
    .app-mobile-nav { box-sizing:border-box; height:var(--app-mobile-nav-height); min-height:var(--app-mobile-nav-height); }
}
.mobile-account-menu { display:none; }
@media screen and (max-width:767px) {
    .relite-global-header .header-logout { display:none!important; }
    .relite-global-header .mobile-account-menu { display:block; position:relative; }
    .mobile-account-menu>summary { display:flex; align-items:center; gap:6px; height:34px; box-sizing:border-box; padding:3px 8px 3px 4px; border-radius:20px; background:#fffaf7; box-shadow:0 2px 7px rgba(26,43,67,.05); cursor:pointer; list-style:none; }
    .mobile-account-menu>summary::-webkit-details-marker { display:none; }
    .mobile-account-avatar { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:linear-gradient(135deg,#ff9167,#ff6544); color:#fff; font-size:12px; font-weight:600; }
    .mobile-account-menu svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
    .mobile-account-menu>summary>svg { width:14px; height:14px; color:#102a50; }
    .mobile-account-menu__panel { position:absolute; top:calc(100% + 7px); right:0; width:175px; max-width:calc(100vw - 24px); padding:6px 8px; border:1px solid #e8edf4; border-radius:10px; background:#fff; box-shadow:0 6px 20px rgba(20,39,66,.12); z-index:1100; }
    .mobile-account-menu__panel>a { display:flex; align-items:center; gap:9px; min-height:38px; padding:6px 5px; color:#15294a; font-size:13px; text-decoration:none; }
    .mobile-account-menu__icon { display:grid; place-items:center; width:26px; height:26px; flex-shrink:0; border-radius:50%; background:#f0f4fa; color:#607494; }
    .mobile-account-menu__icon svg { width:17px; height:17px; }
    .mobile-account-menu__panel>a:hover { background:#fff8f3; border-radius:9px; }
    .mobile-account-menu__panel .mobile-account-menu__logout { margin-top:3px; padding-top:8px; border-top:1px solid #e7edf5; color:#ff5a0a; }
    .mobile-account-menu__logout .mobile-account-menu__icon { background:transparent; color:inherit; }
    .relite-global-header #show_unread_notifications { position:relative; width:34px; height:34px; border:0!important; border-radius:50%!important; color:#12294a!important; background:#fff!important; box-shadow:0 2px 7px rgba(26,43,67,.05)!important; }
    .relite-global-header #show_unread_notifications>svg { width:20px; height:20px; }
    .relite-global-header .notifications_count { position:absolute; top:-3px; right:-3px; min-width:20px; height:20px; display:grid; place-items:center; padding:2px 5px; border:2px solid #fff; border-radius:20px; background:#ff6a23; color:#fff; font-size:11px; }
    .relite-global-header .notifications_count:empty { display:none; }
}