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

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

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

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

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

/* 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:800;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: 800 !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 > .box-body { 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: 800;
}
.modern-expense-form-page #recur_expense_div > .box-body,
.modern-expense-form-page #payment_rows_div > .box-body { 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 > .box-body,
    .modern-expense-form-page #recur_expense_div > .box-body,
    .modern-expense-form-page #payment_rows_div > .box-body { 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:800}.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:800;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: 800
    }

.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: 800
        }

.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: 800
    }

    .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: 800
    }

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

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

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

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

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

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

    .psd-filter-grid .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: 800;
        }

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

.psd-status--paid {
    color: #10813b;
    background: #e8f8ed;
}

.psd-status--partial {
    color: #b96000;
    background: #fff2df;
}

.psd-status--due {
    color: #d9243a;
    background: #ffe8ec;
}

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

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

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

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

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

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

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

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

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

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

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

.psd-dot--0 {
    background: #16833c;
}

.psd-dot--1 {
    background: #ff7300;
}

.psd-dot--2 {
    background: #126ce5;
}

.psd-dot--3 {
    background: #e62b3b;
}

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

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

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

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

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

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

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

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

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

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

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

    .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: 800
    }

    .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: 800
    }

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

/* 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: 800;
    }

        .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: 800
}

    .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: 800
}

.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:22px;font-weight:750}.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 {
        min-height: 58px;
        padding: 13px 20px !important;
        background: #fffaf5;
        border-bottom: 1px solid #e2e8f0;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.f-right {
    float: right;
}

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

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

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

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

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

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

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

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

.m-4 {
    margin: 4px;
}

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

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

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

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

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

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

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

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

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

.p-4 {
    padding: 4px;
}

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

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

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

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

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

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

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

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

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

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

.f-left {
    float: left;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.text-white {
    color: #fff;
}

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.m-8 {
    margin: 8px;
}

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

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

.m-5 {
    margin: 5px;
}

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

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

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

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

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

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

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

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

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

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

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

/* Custom scroll bar start*/

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

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

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

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

/* Custom scroll bar end*/

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

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

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

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

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

    #toast-container {
        display: none;
    }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

table.ajax_view tbody tr {
    cursor: pointer;
}

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

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

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

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

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

#calendar table tbody td {
    cursor: pointer;
}

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

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

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

.text-link {
    cursor: pointer;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    #pos_sidebar_wrap {
        display: none !important;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .compact-delete-alert__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;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.nav-tabs-custom > .nav-tabs > li.active {
    border-top-color: #f97316 !important;
}

    .nav-tabs-custom > .nav-tabs > li.active > a {
        color: #f97316 !important;
    }

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

@media(max-width:767px) {
    .content-header:has(> .project-header-actions) {
        padding-right: 10px;
        min-height: auto
    }
}

/* Shared orange side accent for primary content sections.
   Filters and solid status widgets are intentionally excluded. */
.content .box:not(.box-solid),
.content .box.project-accent-card,
.project-modal-modern .modal-body > .box:not(.box-solid),
.contact-modal-modern .modal-body > .box:not(.box-solid) {
    border: 1px solid #e2e8f0 !important;
    border-left: 3px solid #f97316 !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .04) !important;
}

    .content .box:not(.box-solid) > .box-header,
    .content .box.project-accent-card > .box-header,
    .project-modal-modern .modal-body > .box:not(.box-solid) > .box-header,
    .contact-modal-modern .modal-body > .box:not(.box-solid) > .box-header {
        border-bottom: 1px solid #eef2f6 !important;
    }

    /* Keep nested tables aligned after adding the accent rail. */
    .content .box:not(.box-solid) .table-responsive,
    .content .box.project-accent-card .table-responsive {
        max-width: 100%;
    }

@media (max-width: 767px) {
    .content .box:not(.box-solid),
    .content .box.project-accent-card,
    .project-modal-modern .modal-body > .box:not(.box-solid),
    .contact-modal-modern .modal-body > .box:not(.box-solid) {
        border-left-width: 2px !important;
    }
}

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

.modal-footer > button[type="submit"]:hover,
.modal-footer > button[type="submit"]:focus {
    color: #ffffff !important;
    background: #ea580c !important;
    border-color: #ea580c !important;
}

.modal-footer .project-button-icon,
.modal-footer .contact-button-icon {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
}

    .modal-footer .project-button-icon svg,
    .modal-footer .contact-button-icon svg {
        width: 15px !important;
        height: 15px !important;
        display: block;
    }

/* Compact modern Update Price workflow. */
.update-price-modern .update-price-card > .tw-p-2 {
    padding: 0 !important;
}

.update-price-modern .update-price-card .box-header {
    padding: 12px 18px 9px;
}

.update-price-modern .update-price-card .box-body {
    padding: 16px 24px 18px;
}

.update-price-upload {
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: 72px;
}

.update-price-file {
    min-width: 340px;
}

    .update-price-file label {
        display: block;
        margin-bottom: 7px;
    }

.update-price-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.update-price-btn {
    min-height: 36px;
    padding: 8px 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid #f97316;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    text-decoration: none !important;
}

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

.update-price-submit {
    color: #fff !important;
    background: #f97316;
}

    .update-price-submit:hover, .update-price-submit:focus {
        color: #fff !important;
        border-color: #ea580c;
        background: #ea580c;
    }

.update-price-export {
    color: #f97316 !important;
    background: #fff;
}

    .update-price-export:hover, .update-price-export:focus {
        color: #fff !important;
        background: #f97316;
    }

.update-price-instructions {
    margin-top: 14px;
    padding: 16px 0 0;
    border-top: 1px solid #eef2f6;
}

    .update-price-instructions h4 {
        margin: 0 0 8px;
        color: #172554;
        font-size: 15px;
        font-weight: 650;
    }

    .update-price-instructions ol {
        margin: 0;
        padding-left: 20px;
        color: #475569;
        line-height: 1.65;
    }

/* Wide, clean Opening Stock editor. */
.opening-stock-modal-modern .modal-body {
    padding: 12px !important;
}

    .opening-stock-modal-modern .modal-body > .row {
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

.opening-stock-modal-modern .box.box-solid {
    margin: 0;
    border: 1px solid #e2e8f0;
    border-radius: 11px;
    background: #fff;
    box-shadow: none;
}

.opening-stock-modal-modern .box-header {
    padding: 14px 18px 9px;
    border-bottom: 0;
}

.opening-stock-modal-modern .box-title {
    color: #172554;
    font-size: 16px;
}

.opening-stock-modal-modern .box-body {
    padding: 8px 18px 16px;
}

.opening-stock-modal-modern .tw-overflow-scroll {
    overflow: auto !important;
}

.opening-stock-modal-modern .add_opening_stock_table {
    width: 100% !important;
    min-width: 900px !important;
    margin: 0;
}

    .opening-stock-modal-modern .add_opening_stock_table thead th {
        color: #fff !important;
        border-color: #fb923c !important;
        background: #f97316 !important;
        vertical-align: middle;
    }

    .opening-stock-modal-modern .add_opening_stock_table td {
        vertical-align: top;
    }

.opening-stock-modal-modern .modal-footer {
    padding: 10px 16px;
}

@media (max-width: 767px) {
    .update-price-upload {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
    }

    .update-price-file {
        min-width: 0;
        width: 100%;
    }

    .update-price-actions {
        flex-wrap: wrap;
    }

    .opening-stock-modal-modern .box-body {
        padding: 8px 10px 12px;
    }
}

/* Modern Add/Edit Contact modal. */
.modal-dialog:has(.contact-modal-modern) {
    width: min(1120px, calc(100vw - 32px));
    max-width: 1120px;
    margin: 24px auto;
}

.contact-modal-modern {
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.18);
}

    .contact-modal-modern .modal-header {
        min-height: 68px;
        padding: 15px 22px;
        display: flex;
        align-items: center;
        gap: 12px;
        border-bottom: 1px solid #e8edf3;
        background: linear-gradient(135deg, #ffffff 0%, #fff8f3 100%);
    }

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

    .contact-modal-modern .modal-title {
        margin: 0;
        color: #111827;
        font-size: 18px;
        font-weight: 600;
        letter-spacing: -0.01em;
    }

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

        .contact-modal-modern .modal-header .close:hover {
            color: #0f172a;
            border-color: #e2e8f0;
            background: #ffffff;
        }

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

        .contact-modal-modern .modal-body > .row {
            margin: 0;
            padding: 18px 14px 4px;
            border: 1px solid #e5eaf0;
            border-radius: 12px;
            background: #ffffff;
        }

    .contact-modal-modern .form-group {
        margin-bottom: 16px;
    }

        .contact-modal-modern .form-group > label,
        .contact-modal-modern .modal-body label:not(.radio-inline) {
            margin-bottom: 6px;
            color: #263244;
            font-size: 12px;
            font-weight: 600;
        }

    .contact-modal-modern .form-control,
    .contact-modal-modern .select2-selection {
        min-height: 38px;
        border-color: #d8e0e9 !important;
        background-color: #ffffff;
        box-shadow: none !important;
        transition: border-color 150ms ease, box-shadow 150ms ease;
    }

        .contact-modal-modern .form-control:focus,
        .contact-modal-modern .select2-container--focus .select2-selection {
            border-color: #fb923c !important;
            box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.12) !important;
        }

    .contact-modal-modern .input-group-addon {
        width: 38px;
        min-width: 38px;
        padding: 0;
        color: #718096;
        border-color: #d8e0e9;
        border-radius: 8px 0 0 8px;
        background: #f8fafc;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }

    .contact-modal-modern .input-group {
        width: 100%;
        display: flex;
        align-items: stretch;
    }

        .contact-modal-modern .input-group > .input-group-addon {
            flex: 0 0 38px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

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

        .contact-modal-modern .input-group > .select2-container {
            display: block;
        }

    .contact-modal-modern .select2-container .select2-selection--single,
    .contact-modal-modern .select2-container .select2-selection--multiple {
        width: 100%;
        min-height: 38px;
        display: flex;
        align-items: center;
    }

    .contact-modal-modern .select2-selection--multiple .select2-selection__rendered {
        width: 100%;
        padding: 2px 8px;
    }

    .contact-modal-modern .select2-selection--multiple .select2-search,
    .contact-modal-modern .select2-selection--multiple .select2-search__field {
        width: 100% !important;
        min-width: 120px;
    }

    .contact-modal-modern .input-group-addon .contact-outline-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        vertical-align: middle;
    }

    .contact-modal-modern .help-block {
        margin: 5px 0 0;
        color: #8490a0;
        font-size: 11px;
    }

    .contact-modal-modern .radio-inline {
        margin-top: 7px;
        color: #334155;
        font-size: 12px;
    }

    .contact-modal-modern hr {
        margin: 14px 0 18px;
        border: 0;
        border-top: 1px solid #e8edf3;
    }

    .contact-modal-modern .more_btn {
        min-height: 34px !important;
        padding: 7px 13px !important;
        color: #ea580c !important;
        border: 1px solid #fed7aa !important;
        border-radius: 8px !important;
        background: #fff7ed !important;
        box-shadow: none !important;
        width: max-content;
        margin: 2px auto 4px !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }

        .contact-modal-modern .more_btn:hover {
            color: #c2410c !important;
            background: #ffedd5 !important;
        }

        .contact-modal-modern .more_btn .contact-outline-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

    .contact-modal-modern .contact-action-strip {
        min-height: 64px;
        padding: 10px 12px !important;
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
    }

    .contact-modal-modern .contact-action-copy {
        min-width: 0;
        text-align: left;
    }

        .contact-modal-modern .contact-action-copy strong {
            display: block;
            color: #263244;
            font-size: 12px;
            font-weight: 600;
            line-height: 1.35;
        }

        .contact-modal-modern .contact-action-copy span {
            display: block;
            margin-top: 3px;
            color: #8490a0;
            font-size: 11px;
            line-height: 1.4;
        }

    .contact-modal-modern .contact-action-strip .more_btn {
        flex: 0 0 auto;
        margin: 0 0 0 auto !important;
    }

    .contact-modal-modern .modal-body > .row + .row {
        margin-top: 16px;
    }

    .contact-modal-modern #more_div:not(.hide) {
        padding-top: 18px;
    }

    .contact-modal-modern .contact-person-modal-body {
        width: 100%;
        margin: 12px 0 4px;
        padding: 11px !important;
        border: 1px solid #e5eaf0;
        border-radius: 12px;
        background: linear-gradient(135deg, #ffffff 0%, #fffaf6 100%);
        box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
    }

        .contact-modal-modern .contact-person-modal-body::before,
        .contact-modal-modern .contact-person-modal-body::after {
            content: '';
            display: table;
            clear: both;
        }

        .contact-modal-modern .contact-person-modal-body > hr,
        .contact-modal-modern .contact-person-modal-body > .col-md-12 > hr:first-child {
            display: none;
        }

        .contact-modal-modern .contact-person-modal-body .form-group {
            margin-bottom: 12px;
        }

    .contact-modal-modern input[type="number"] {
        appearance: textfield;
        -moz-appearance: textfield;
    }

        .contact-modal-modern input[type="number"]::-webkit-inner-spin-button,
        .contact-modal-modern input[type="number"]::-webkit-outer-spin-button {
            margin: 0;
            -webkit-appearance: none;
        }

    .contact-modal-modern .modal-footer {
        min-height: 62px;
        padding: 13px 22px;
        border-top: 1px solid #e8edf3;
        background: #ffffff;
    }

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

        .contact-modal-modern .modal-footer .contact-button-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

    .contact-modal-modern svg {
        display: block;
    }

    .contact-modal-modern .modal-body,
    .contact-modal-modern .select2-results__options {
        scrollbar-width: thin;
        scrollbar-color: #94a3b8 transparent;
    }

        .contact-modal-modern .modal-body::-webkit-scrollbar,
        .contact-modal-modern .select2-results__options::-webkit-scrollbar {
            width: 5px;
            height: 5px;
        }

        .contact-modal-modern .modal-body::-webkit-scrollbar-track,
        .contact-modal-modern .select2-results__options::-webkit-scrollbar-track {
            background: transparent;
        }

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

            .contact-modal-modern .modal-body::-webkit-scrollbar-thumb:hover,
            .contact-modal-modern .select2-results__options::-webkit-scrollbar-thumb:hover {
                background: #64748b;
            }

.select2-container--open {
    z-index: 10600;
}

    .select2-container--open .select2-results__options {
        scrollbar-width: thin;
        scrollbar-color: #94a3b8 transparent;
    }

        .select2-container--open .select2-results__options::-webkit-scrollbar {
            width: 5px;
        }

        .select2-container--open .select2-results__options::-webkit-scrollbar-track {
            background: transparent;
        }

        .select2-container--open .select2-results__options::-webkit-scrollbar-thumb {
            border-radius: 999px;
            background: #94a3b8;
        }

/* Orange Select2 accent and readable search fields across the application. */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--classic .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option[aria-selected="true"] {
    color: #ffffff !important;
    background: #f97316 !important;
}

.select2-dropdown .select2-search__field,
.select2-search--inline .select2-search__field,
.select2-container--default .select2-search--dropdown .select2-search__field {
    color: #111827 !important;
    caret-color: #f97316 !important;
    background: #ffffff !important;
    -webkit-text-fill-color: #111827 !important;
}

    .select2-dropdown .select2-search__field::placeholder,
    .select2-search--inline .select2-search__field::placeholder {
        color: #9ca3af !important;
        opacity: 1;
    }

    .select2-container--default .select2-search--dropdown .select2-search__field:focus,
    .select2-container--default.select2-container--focus .select2-selection--multiple {
        border-color: #f97316 !important;
        outline: 0;
        box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.12) !important;
    }

.select2-container--default .select2-selection--multiple .select2-selection__choice,
.select2-container--classic .select2-selection--multiple .select2-selection__choice {
    color: #ffffff !important;
    border-color: #f97316 !important;
    background: #f97316 !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove,
.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove {
    color: #ffffff !important;
    border-right-color: rgba(255, 255, 255, 0.28) !important;
}

    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover,
    .select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover {
        color: #ffffff !important;
        background: #ea580c !important;
    }

.modal-dialog:has(.commission-agent-modal-modern) {
    width: min(720px, calc(100vw - 32px));
    max-width: 720px;
}

.commission-agent-modal-modern .modal-body > .row {
    padding-bottom: 8px;
}

.commission-agent-modal-modern textarea.form-control {
    min-height: 90px;
    resize: vertical;
}

.ledger-discount-modal-modern .modal-body > .row {
    padding: 18px 18px 4px !important;
}

.ledger-discount-modal-modern .modal-body .row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

.ledger-discount-modal-modern textarea.form-control {
    min-height: 88px;
}

@media(max-width:767px) {
    .ledger-discount-modal-modern .modal-body .row {
        display: block
    }
}

@media (max-width: 767px) {
    .modal-dialog:has(.contact-modal-modern) {
        width: calc(100vw - 16px);
        margin: 8px auto;
    }

    .contact-modal-modern .modal-header,
    .contact-modal-modern .modal-footer {
        padding-left: 14px;
        padding-right: 14px;
    }


    .contact-modal-modern .modal-body {
        padding: 11px;
    }

    .contact-modal-modern .contact-action-strip {
        align-items: flex-start;
    }

    .contact-modal-modern .modal-body {
        max-height: calc(100vh - 150px);
    }
}

/* Actions dropdowns use DaisyUI's info token. This final override prevents
   the generated blue component color from overriding the application theme. */
button.tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-info.dropdown-toggle,
a.tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-info.dropdown-toggle,
.tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-info.dropdown-toggle {
    --btn-color: #de421a !important;
    color: #de421a !important;
    -webkit-text-fill-color: #de421a !important;
    background-color: #ffffff !important;
    background-image: none !important;
    border: 1px solid #de421a !important;
    box-shadow: none !important;
}

    button.tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-info.dropdown-toggle:hover,
    button.tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-info.dropdown-toggle:focus,
    button.tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-info.dropdown-toggle:active,
    button.tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-info.dropdown-toggle[aria-expanded="true"],
    a.tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-info.dropdown-toggle:hover,
    a.tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-info.dropdown-toggle:focus,
    a.tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-info.dropdown-toggle:active,
    a.tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-info.dropdown-toggle[aria-expanded="true"],
    .open > .tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-info.dropdown-toggle {
        --btn-color: #e85d18 !important;
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
        background-color: #e85d18 !important;
        background-image: none !important;
        border-color: #e85d18 !important;
    }

.location-settings-update {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 34px;
    min-height: 34px;
    padding: 7px 13px;
    border-radius: 8px;
    font-size: 12px;
    line-height: 1;
}

    .location-settings-update svg {
        width: 14px;
        height: 14px;
        flex: 0 0 14px;
    }

.barcode-setting-page {
    background: #f8fafc;
}

.barcode-setting-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

    .barcode-setting-header h1 {
        margin: 0 0 7px;
        color: #111827;
        font-size: 20px;
        font-weight: 600;
        line-height: 1.3;
    }

    .barcode-setting-header p {
        margin: 0;
        color: #475569;
        font-size: 13px;
        line-height: 1.5;
    }

.barcode-setting-save {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 34px;
    padding: 7px 13px;
    border: 0;
    border-radius: 8px;
    color: #fff;
    background: var(--theme-700, #f97316);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .12);
    transition: background-color .2s ease, box-shadow .2s ease, transform .1s ease;
}

    .barcode-setting-save:hover,
    .barcode-setting-save:focus {
        color: #fff;
        background: var(--theme-800, #ea580c);
        box-shadow: 0 4px 12px color-mix(in srgb, var(--theme-700, #f97316) 28%, transparent);
        outline: none;
    }

    .barcode-setting-save:active {
        transform: translateY(1px);
    }

    .barcode-setting-save svg {
        width: 14px;
        height: 14px;
    }

.barcode-setting-card {
    padding: 22px 18px 12px;
    border: 1px solid #dfe5ec;
    border-radius: 11px;
    background: #fff;
}

    .barcode-setting-card .form-group {
        margin-bottom: 18px;
    }

        .barcode-setting-card .form-group > label {
            margin-bottom: 7px;
            color: #111827;
            font-size: 13px;
            font-weight: 600;
        }

    .barcode-setting-card .input-group {
        width: 100%;
    }

    .barcode-setting-card .form-control,
    .barcode-setting-card .input-group-addon {
        min-height: 42px;
        border-color: #d4dce6;
    }

.barcode-setting-measurement .form-group {
    margin-bottom: 11px;
}

    .barcode-setting-measurement .form-group > label {
        margin-bottom: 4px;
        font-size: 11px;
        line-height: 1.25;
    }

.barcode-setting-measurement .form-control,
.barcode-setting-measurement .input-group-addon {
    height: 40px;
    min-height: 28px;
    font-size: 13px;
}

.barcode-setting-measurement input[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
}

    .barcode-setting-measurement input[type="number"]::-webkit-inner-spin-button,
    .barcode-setting-measurement input[type="number"]::-webkit-outer-spin-button {
        margin: 0;
        -webkit-appearance: none;
        appearance: none;
    }

.barcode-setting-card .form-control {
    border-radius: 8px;
    box-shadow: none;
}

.barcode-setting-card textarea.form-control {
    min-height: 76px;
    resize: vertical;
}

.barcode-setting-card .input-group .form-control {
    border-radius: 0 8px 8px 0;
}

.barcode-setting-card .form-control:focus {
    border-color: var(--theme-700, #f97316);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-700, #f97316) 12%, transparent);
}

.barcode-setting-field-icon {
    width: 30px;
    padding: 0;
    border-radius: 8px 0 0 8px;
    color: #64748b;
    background: #fff;
    text-align: center;
    vertical-align: middle;
}

    .barcode-setting-field-icon svg {
        display: block;
        width: 13px;
        height: 13px;
        margin: 0 auto;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.5;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.barcode-setting-checkbox {
    padding-top: 4px;
}

    .barcode-setting-checkbox label {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin: 0;
        color: #334155;
        font-size: 13px;
        font-weight: 400;
        cursor: pointer;
    }

    .barcode-setting-checkbox input {
        margin: 0;
    }

.barcode-setting-default {
    padding-top: 21px;
}

@media (max-width: 640px) {
    .barcode-setting-header {
        flex-direction: column;
    }

    .barcode-setting-save {
        width: 100%;
    }

    .barcode-setting-card {
        padding: 16px 12px 6px;
    }
}

.business-settings-hub {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

    .business-settings-hub.tw-hidden {
        display: none;
    }

.business-settings-card {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 116px;
    padding: 18px;
    border: 1px solid #e5e7eb;
    border-radius: 11px;
    background: #fff;
    text-align: left;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

    .business-settings-card:hover,
    .business-settings-card:focus {
        border-color: #fdba74;
        box-shadow: 0 8px 22px rgba(15, 23, 42, .07);
        outline: none;
        transform: translateY(-1px);
    }

.business-settings-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-right: 14px;
    flex: 0 0 44px;
    border-radius: 11px;
    color: #f97316;
    background: #fff0e6;
}

    .business-settings-card__icon svg {
        width: 21px;
        height: 21px;
    }

.business-settings-card__copy {
    min-width: 0;
    flex: 1;
}

.business-settings-card__title,
.business-settings-card__description {
    display: block;
}

.business-settings-card__title {
    margin: 0 0 4px;
    color: #111827;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
}

.business-settings-card__description {
    margin: 0;
    color: #8b95a7;
    font-size: 12px;
    line-height: 1.45;
}

.business-settings-card__arrow {
    width: 16px;
    height: 16px;
    margin-left: 10px;
    flex: 0 0 16px;
    color: #9ca3af;
}

@media (max-width: 1199px) {
    .business-settings-hub {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .business-settings-hub {
        grid-template-columns: 1fr;
    }

    .business-settings-card {
        min-height: 104px;
    }
}

.business-settings-page {
    background: #f8fafc;
}

.business-settings-page-header {
    padding: 18px 10px 12px;
    background: #f8fafc;
}

    .business-settings-page-header.tw-hidden {
        display: none;
    }

    .business-settings-page-header h1 {
        margin: 0 0 7px;
        color: #111827;
        font-size: 20px;
        font-weight: 600;
        line-height: 1.25;
    }

    .business-settings-page-header p {
        margin: 0;
        color: #475569;
        font-size: 13px;
        line-height: 1.5;
    }

.business-settings-page-header__search {
    margin-top: 17px;
}

.business-settings-editor.tw-hidden {
    display: none;
}

.business-settings-editor__header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 22px;
    padding: 2px 4px;
}

.business-settings-back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-top: 1px;
    border: 0;
    border-radius: 8px;
    color: #64748b;
    background: transparent;
}

    .business-settings-back:hover {
        color: #f97316;
        background: #fff0e6;
    }

    .business-settings-back svg {
        width: 19px;
        height: 19px;
    }

.business-settings-editor__heading {
    min-width: 0;
    flex: 1;
}

    .business-settings-editor__heading h1 {
        margin: 0 0 6px;
        color: #0f172a;
        font-size: 20px;
        font-weight: 600;
        line-height: 1.25;
    }

    .business-settings-editor__heading p {
        margin: 0;
        color: #64748b;
        font-size: 13px;
        line-height: 1.5;
    }

.business-settings-save {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 8px 15px;
    border: 0;
    border-radius: 7px;
    color: #fff;
    background: var(--theme-700, #f97316);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .12);
    transition: background-color .2s ease, box-shadow .2s ease, transform .1s ease;
}

    .business-settings-save:hover,
    .business-settings-save:focus {
        color: #fff;
        background: var(--theme-800, #ea580c);
        box-shadow: 0 4px 12px color-mix(in srgb, var(--theme-700, #f97316) 28%, transparent);
        outline: none;
    }

    .business-settings-save:active {
        background: var(--theme-900, #c2410c);
        transform: translateY(1px);
    }

    .business-settings-save:disabled {
        cursor: not-allowed;
        opacity: .6;
    }

    .business-settings-save svg {
        width: 16px;
        height: 16px;
    }

.business-settings-editor .pos-tab-menu {
    display: none;
}

.business-settings-editor .pos-tab {
    width: 100%;
    padding: 0;
}

.business-settings-editor .pos-tab-container {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.business-settings-editor .pos-tab-content {
    padding: 22px 18px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    box-shadow: none;
}

    .business-settings-editor .pos-tab-content h3,
    .business-settings-editor .pos-tab-content h4 {
        color: #0f172a;
        font-weight: 600;
    }

.business-settings-editor .form-group {
    margin-bottom: 19px;
}

    .business-settings-editor .form-group > label,
    .business-settings-editor .control-label {
        margin-bottom: 7px;
        color: #64748b;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

.business-settings-editor .form-control,
.business-settings-editor .select2-selection,
.business-settings-editor .input-group-addon,
.business-settings-editor .btn-file {
    min-height: 42px;
    border-color: #dbe1e8;
}

.business-settings-editor .form-control,
.business-settings-editor .select2-selection {
    border-radius: 8px;
    box-shadow: none;
}

    .business-settings-editor .form-control:focus {
        border-color: #fb923c;
        box-shadow: 0 0 0 3px rgba(251, 146, 60, .12);
    }

@media (max-width: 640px) {
    .business-settings-page-header {
        padding-top: 14px;
    }

    .business-settings-editor__header {
        flex-wrap: wrap;
    }

    .business-settings-save {
        width: 100%;
        justify-content: center;
    }

    .business-settings-editor .pos-tab-content {
        padding: 16px 12px;
    }
}

.relite-package-column {
    display: flex;
    padding-top: 18px;
}

.relite-package-card {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 560px;
    padding: 32px;
    border: 1px solid #e1e5ea;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

    .relite-package-card:hover,
    .relite-package-card.is-popular {
        border-color: rgba(255, 107, 23, 0.55);
        box-shadow: 0 14px 34px rgba(255, 107, 23, 0.12);
        transform: translateY(-3px);
    }

.relite-package-ribbon {
    position: absolute;
    top: -15px;
    left: 50%;
    min-width: 166px;
    padding: 7px 22px;
    transform: translateX(-50%);
    background: #ff6b17;
    color: #fff;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
}

    .relite-package-ribbon::before,
    .relite-package-ribbon::after {
        content: '';
        position: absolute;
        top: 0;
        border-top: 15px solid transparent;
    }

    .relite-package-ribbon::before {
        right: 100%;
        border-right: 15px solid #d94f00;
    }

    .relite-package-ribbon::after {
        left: 100%;
        border-left: 15px solid #d94f00;
    }

.relite-package-summary {
    min-height: 140px;
    padding: 26px 20px;
    border: 1px solid #e1e5ea;
    border-radius: 8px;
    background: #fff;
}

.relite-package-card.is-popular .relite-package-summary {
    background: #fafafa;
}

.relite-package-summary h2 {
    margin: 0 0 12px;
    color: #073b70;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.25;
}

.relite-package-summary p {
    margin: 0;
    color: #7b8190;
    font-size: 15px;
    line-height: 1.55;
}

.relite-package-price {
    display: flex;
    align-items: baseline;
    gap: 7px;
    min-height: 86px;
    padding: 27px 10px 20px;
    border-bottom: 1px dashed #dfe3e8;
    color: #111827;
}

    .relite-package-price strong {
        color: #ff6b17;
        font-size: 30px;
        font-weight: 700;
        line-height: 1.2;
    }

    .relite-package-price span {
        color: #111827;
        font-size: 13px;
    }

.relite-package-features {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 0;
    padding: 22px 10px 30px;
    list-style: none;
}

    .relite-package-features li {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        color: #737b89;
        font-size: 14px;
        line-height: 1.45;
    }

    .relite-package-features svg {
        width: 16px;
        height: 16px;
        flex: 0 0 16px;
        margin-top: 2px;
        fill: none;
        stroke: #07548c;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.relite-package-action {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    margin-top: auto;
    padding: 11px 20px;
    border: 1px solid #ff6b17;
    border-radius: 6px;
    background: #ff6b17;
    color: #fff !important;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none !important;
    transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

    .relite-package-action:hover,
    .relite-package-action:focus {
        border-color: #e85b0a;
        background: #e85b0a;
        box-shadow: 0 8px 18px rgba(255, 107, 23, 0.22);
    }

@media (max-width: 991px) {
    .relite-package-card {
        min-height: auto;
    }
}

@media (max-width: 767px) {
    .relite-package-card {
        padding: 24px;
    }

    .relite-package-summary h2 {
        font-size: 22px;
    }
}

/* Sales representative item-wise report layout */
.srir {
    padding: 18px 20px 30px;
    color: #101a33;
    background: #f8fafc;
    font-family: 'Inter',sans-serif !important
}

    .srir * {
        box-sizing: border-box
    }

.srir-head h1 {
    margin: 0;
    font-size: 22px;
    font-weight: 800
}

.srir-head p {
    margin: 3px 0 13px;
    color: #667085;
    font-size: 12px
}

.srir-card {
    background: #fff;
    border: 1px solid #e4e9f1;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(15,23,42,.035)
}

.srir-filter {
    padding: 13px 16px;
    border-color: #ff5a0a
}

    .srir-filter h3 {
        margin: 0 0 11px;
        font-size: 12px
    }

.srir-filter-grid {
    display: grid;
    grid-template-columns: 1.25fr repeat(4,1fr);
    gap: 12px 18px
}

.srir-field label {
    display: block;
    margin-bottom: 5px;
    font-size: 13px;
    font-weight: 700
}

.srir-field input, .srir-field select {
    width: 100%;
    height: 36px;
    padding: 7px 10px;
    color: #172033;
    background: #fff;
    border: 1px solid #dfe5ed;
    border-radius: 7px;
    font-size: 13px
}

.srir-actions {
    display: flex;
    align-items: end;
    justify-content: flex-end;
    gap: 8px
}

.srir-btn {
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 14px;
    border: 1px solid #dfe5ed;
    border-radius: 7px;
    background: #fff;
    color: #344054;
    font-size: 12px;
    font-weight: 700
}

    .srir-btn.primary {
        color: #fff;
        background: #095bd8;
        border-color: #095bd8
    }

    .srir-btn svg {
        width: 16px;
        height: 16px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8
    }

.srir-kpis {
    display: grid;
    grid-template-columns: repeat(7,1fr);
    gap: 12px;
    margin: 14px 0
}

.srir-kpi {
    min-height: 88px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px
}

    .srir-kpi i {
        width: 44px;
        height: 44px;
        display: grid;
        place-items: center;
        flex: 0 0 44px;
        border-radius: 50%;
        background: #e9f1ff;
        color: #1260df
    }

    .srir-kpi:nth-child(2) i {
        color: #15a05a;
        background: #eafaf0
    }

    .srir-kpi:nth-child(3) i {
        color: #ff5a0a;
        background: #fff0e9
    }

    .srir-kpi:nth-child(4) i {
        color: #8a32e8;
        background: #f5eaff
    }

    .srir-kpi:nth-child(5) i {
        color: #13a6b9;
        background: #e8f9fb
    }

    .srir-kpi:nth-child(6) i {
        color: #e93562;
        background: #ffedf2
    }

    .srir-kpi:nth-child(7) i {
        color: #e09000;
        background: #fff7dc
    }

    .srir-kpi svg {
        width: 23px;
        height: 23px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round
    }

    .srir-kpi small {
        display: block;
        color: #061a35;
        font-size: 15px
    }

    .srir-kpi strong {
        display: block;
        margin-top: 3px;
        font-size: 15px
    }

    .srir-kpi em {
        display: block;
        margin-top: 5px;
        color: #667085;
        font-size: 10px;
        font-style: normal
    }

.srir-charts {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 13px;
    margin-bottom: 13px
}

.srir-panel {
    padding: 14px 16px
}

.srir-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 13px
}

    .srir-title h3 {
        margin: 0;
        font-size: 14px
    }

.srir-bars {
    height: 190px;
    display: flex;
    align-items: end;
    gap: 18px;
    padding: 14px 10px 0;
    border-bottom: 1px solid #dfe5ed;
    background: repeating-linear-gradient(to top,transparent 0,transparent 44px,#edf1f5 45px)
}

.srir-vbar {
    height: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 5px
}

    .srir-vbar i {
        width: 34px;
        max-width: 80%;
        min-height: 3px;
        background: #1164e8;
        border-radius: 4px 4px 0 0
    }

    .srir-vbar:nth-child(2) i {
        background: #ff5a0a
    }

    .srir-vbar:nth-child(3) i {
        background: #0b9b4b
    }

    .srir-vbar:nth-child(4) i {
        background: #6d22d6
    }

    .srir-vbar:nth-child(5) i {
        background: #18a6b4
    }

    .srir-vbar b, .srir-vbar small {
        font-size: 9px;
        text-align: center
    }

.srir-hbars {
    display: grid;
    gap: 13px;
    padding: 8px 0
}

.srir-hbar {
    display: grid;
    grid-template-columns: 220px 1fr 42px;
    align-items: center;
    gap: 10px;
    font-size: 11px
}

    .srir-hbar span {
        height: 13px;
        background: #1264e8;
        border-radius: 0 3px 3px 0
    }

    .srir-hbar:nth-child(2) span {
        background: #ff5a0a
    }

    .srir-hbar:nth-child(3) span {
        background: #0b9b4b
    }

    .srir-hbar:nth-child(4) span {
        background: #7223d7
    }

    .srir-hbar:nth-child(5) span {
        background: #13a8b6
    }

.srir-table-card {
    padding: 13px 16px
}

.srir-table-wrap {
    overflow: auto
}

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

    .srir-table th, .srir-table td {
        padding: 10px 8px;
        border-bottom: 1px solid #e8edf3;
        white-space: nowrap;
        text-align: right;
        font-size: 11px
    }

    .srir-table th {
        color: #344054;
        background: #fbfcfe;
        font-weight: 700
    }

        .srir-table th:nth-child(-n+5), .srir-table td:nth-child(-n+5) {
            text-align: left
        }

    .srir-table tfoot td {
        font-weight: 800;
        background: #f7f9fc
    }

.srir-empty {
    text-align: center !important;
    color: #667085;
    padding: 28px !important
}

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

    .srir-kpis {
        grid-template-columns: repeat(4,1fr)
    }
}

@media(max-width:800px) {
    .srir-filter-grid, .srir-kpis, .srir-charts {
        grid-template-columns: 1fr
    }

    .srir {
        padding: 12px
    }
}
/* Standard application filter and table presentation */
.srir-filter {
    padding: 0 !important;
    border-color: #dfe5ed !important;
    overflow: visible
}

.srir-filter-details > summary {
    height: 52px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    background: #f8fafc;
    border-left: 3px solid #ff5a0a;
    border-radius: 12px 12px 0 0;
    cursor: pointer;
    list-style: none;
    color: #101828
}

    .srir-filter-details > summary::-webkit-details-marker {
        display: none
    }

.srir-filter-mark {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: #fff0e7;
    color: #ff5a0a;
    display: grid;
    place-items: center
}

    .srir-filter-mark svg {
        width: 17px;
        height: 17px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round
    }

.srir-filter-chevron {
    width: 18px;
    height: 18px;
    margin-left: auto;
    fill: none;
    stroke: #ff5a0a;
    stroke-width: 2;
    transition: transform .2s
}

.srir-filter-details:not([open]) .srir-filter-chevron {
    transform: rotate(180deg)
}

.srir-filter-body {
    padding: 15px 28px 14px;
    border-top: 1px solid #e5e9f0
}

.srir-filter-grid {
    grid-template-columns: repeat(4,minmax(0,1fr)) !important;
    column-gap: 28px !important;
    row-gap: 14px !important
}

.srir-field label {
    font-size: 13px !important;
    font-weight: 600 !important;
    margin-bottom: 6px !important
}

.srir-field input, .srir-field select {
    height: 36px !important;
    border: 1px solid #ccd3dd !important;
    border-radius: 7px !important;
    background: #fff !important
}

.srir-actions {
    grid-column: auto !important;
    align-self: end !important;
    justify-content: flex-end !important
}
/* The shared filter component owns the card and adds pf-body--open only on click. */
.srir-filter {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important
}

    .srir-filter .pf-inner {
        overflow: hidden
    }

    .srir-filter .pf-body:not(.pf-body--open) {
        visibility: hidden
    }

    .srir-filter .pf-body--open {
        visibility: visible
    }

    .srir-filter .pf-open {
        overflow: visible !important
    }

        .srir-filter .pf-open .pf-inner {
            overflow: visible
        }

.srir-date-picker {
    position: relative
}

.srir-date-trigger {
    width: 100%;
    height: 36px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 11px;
    color: #344054;
    background: #f3f4f6;
    border: 1px solid #ff9b65;
    border-radius: 8px;
    box-shadow: 0 0 0 3px rgba(255,90,10,.08);
    font-size: 14px;
    text-align: left
}

    .srir-date-trigger > svg {
        width: 16px;
        height: 16px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round
    }

    .srir-date-trigger span {
        flex: 1
    }

    .srir-date-trigger .srir-date-caret {
        width: 14px
    }

.srir-date-menu {
    position: absolute;
    z-index: 100;
    width: max-content;
    min-width: 180px;
    top: calc(100% + 5px);
    left: 0;
    padding: 4px 0;
    background: #fff;
    border: 1px solid #d8dee8;
    border-radius: 5px;
    box-shadow: 0 8px 22px rgba(15,23,42,.16)
}

    .srir-date-menu button {
        display: block;
        width: 100%;
        padding: 8px 12px;
        color: #101828;
        background: #fff;
        border: 0;
        font-size: 12px;
        text-align: left
    }

        .srir-date-menu button:hover, .srir-date-menu button:focus {
            color: #fff;
            background: #f85b11;
            outline: 0
        }
/* Match the standard application DataTable typography and clean total rows. */
.srir-table th, .srir-table td, .srir-table-wrap .dataTables_wrapper {
    font-size: 13px !important
}

.srir-table tfoot {
    visibility: hidden
}

.srir-table.dataTable tfoot {
    visibility: visible
}

.srir-table tfoot th, .srir-table tfoot td {
    padding: 10px 8px !important;
    background: #fff !important;
    color: #172033 !important;
    font-weight: 800 !important;
    border-top: 1px solid #dfe5ed !important;
    border-bottom: 1px solid #dfe5ed !important
}

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

@media(max-width:700px) {
    .srir-filter-grid {
        grid-template-columns: 1fr !important
    }

    .srir-filter-body {
        padding: 14px
    }
}

/* Keep numeric fields readable in tables and forms in every theme. */
input[type='number'],
table input[type='number'],
.dataTable input[type='number'],
body.relite-dark input[type='number'],
body.relite-dark table input[type='number'] {
    color: #172033 !important;
    background-color: #fff !important;
    border-color: #cfd7e3 !important;
    caret-color: #172033 !important;
    color-scheme: light !important;
    -webkit-text-fill-color: #172033 !important;
    opacity: 1 !important;
    font-family: 'Inter', sans-serif !important;
}

    input[type='number']:focus,
    table input[type='number']:focus,
    body.relite-dark input[type='number']:focus {
        color: #101828 !important;
        background-color: #fff !important;
        border-color: #ff7a32 !important;
        box-shadow: 0 0 0 3px rgba(255, 90, 10, 0.1) !important;
        outline: 0 !important;
    }

    input[type='number']::placeholder {
        color: #98a2b3 !important;
        -webkit-text-fill-color: #98a2b3 !important;
    }

/* Shared collapsible filter component. */
.pf-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.pf-body--open {
    grid-template-rows: 1fr;
}

.pf-inner {
    overflow: hidden;
}

.pf-btn {
    position: relative;
}

    .pf-btn::before {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 3px;
        background: var(--theme-700, #004eeb);
        content: '';
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }

.pf-open .pf-btn::before {
    transform: scaleX(1);
}

.pf-open .pf-btn {
    border-bottom-color: #e5e7eb !important;
}

/* Shared date-range inputs and calendar picker. */
input[readonly][id*="date_range"], input[readonly][id*="date_filter"], input[readonly][id*="date-range"] {
    height: 36px !important;
    padding-left: 36px !important;
    border: 1px solid #ff9b65 !important;
    border-radius: 8px !important;
    background-color: #f8fafc !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='%23344054' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M3 10h18'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: 11px center !important;
    box-shadow: 0 0 0 3px rgba(255,90,10,.08) !important
}

.daterangepicker {
    font-family: 'Inter',sans-serif !important;
    border-color: #d8dee8 !important;
    border-radius: 7px !important;
    box-shadow: 0 10px 28px rgba(15,23,42,.16) !important
}

    .daterangepicker .ranges li {
        padding: 9px 12px !important;
        font-size: 12px !important;
        color: #101828 !important
    }

        .daterangepicker .ranges li:hover, .daterangepicker .ranges li.active {
            color: #fff !important;
            background: #ff5a0a !important
        }

    .daterangepicker td.active, .daterangepicker td.active:hover {
        background: #ff5a0a !important
    }

    .daterangepicker td.in-range {
        background: #fff0e8
    }

    .daterangepicker .drp-buttons .applyBtn {
        background: #ff5a0a !important;
        border-color: #ff5a0a !important
    }

    .daterangepicker .drp-buttons .cancelBtn {
        color: #344054 !important;
        background: #fff !important;
        border-color: #d8dee8 !important
    }

/* Bulk Operations uses the shared application stylesheet so its layout stays
   consistent with the rest of the sales screens. */
.bulk-operations-page,
.bulk-operations-page button,
.bulk-operations-page input,
.bulk-operations-page select,
.bulk-operations-page table {
    font-family: 'Inter', sans-serif !important;
}

.bulk-operations-page {
    padding-top: 8px !important;
}

.bulk-operation-grid {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 14px !important;
    margin-bottom: 14px !important;
}

.bulk-operation-card {
    min-width: 0;
    min-height: 96px !important;
    padding: 15px !important;
    border: 1px solid #e5eaf1 !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .04) !important;
    align-items: flex-start;
}

    .bulk-operation-card:hover {
        border-color: #cfd8e6 !important;
        box-shadow: 0 5px 14px rgba(16, 24, 40, .08) !important;
        transform: translateY(-1px);
    }

    .bulk-operation-card > span:first-child {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 48px !important;
        height: 48px !important;
        border-radius: 10px !important;
        padding: 10px;
    }

        .bulk-operation-card > span:first-child svg {
            display: block !important;
            margin: 0 !important;
            width: 27px !important;
            height: 27px !important;
            stroke-width: 1.9;
        }

    .bulk-operation-card strong {
        margin-top: 2px;
        color: #111827 !important;
        font-size: 13px !important;
        line-height: 18px !important;
        white-space: nowrap;
    }

    .bulk-operation-card small {
        color: #526174 !important;
        font-size: 12px !important;
        line-height: 18px !important;
    }

.bulk-operation-filter {
    margin-bottom: 0 !important;
    padding: 11px 14px !important;
    border: 1px solid #e5eaf1 !important;
    border-radius: 10px 10px 0 0 !important;
    box-shadow: none !important;
}

    .bulk-operation-filter > .tw-grid:first-child {
        display: grid !important;
        grid-template-columns: 1.45fr .85fr .85fr 1fr 1fr !important;
        gap: 14px !important;
        align-items: end !important;
    }

        .bulk-operation-filter > .tw-grid:first-child > div:last-child {
            grid-column: 5 !important;
        }

.bulk-advanced-filter-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

.bulk-operation-filter label {
    display: block;
    margin-bottom: 5px;
    color: #344054;
    font-size: 12px;
}

.bulk-operation-filter > .tw-grid:first-child > div > label {
    display: none;
}

.bulk-operation-filter .form-control,
.bulk-operation-filter .select2-selection {
    height: 36px !important;
    min-height: 36px !important;
    border-color: #dbe2ea !important;
    border-radius: 6px !important;
    font-size: 12px !important;
}

.bulk-operation-filter .btn {
    height: 36px;
    border-radius: 6px !important;
    font-size: 12px;
}

.bulk-operation-filter .btn-primary {
    background: #0866e8 !important;
    border-color: #0866e8 !important;
}

.bulk-operation-workspace {
    display: block;
    margin: 0 !important;
}

.bulk-panels-row {
    display: flex !important;
    gap: 14px !important;
    padding: 14px 0 0 !important;
}

.bulk-sales-column,
.bulk-items-column {
    display: flex;
    padding: 0 !important;
}

.bulk-sales-column {
    width: calc(66.666667% - 7px) !important;
}

.bulk-items-column {
    width: calc(33.333333% - 7px) !important;
}

.bulk-sales-panel,
.bulk-items-panel {
    width: 100%;
    margin: 0 !important;
    border: 1px solid #e5eaf1 !important;
    border: 1px solid #e5eaf1 !important;
    border-left: 1px solid #e5eaf1 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}

.bulk-sales-panel {
    border: 1px solid #e5eaf1 !important;
    border-left-color: #e5eaf1 !important;
}

.bulk-items-panel {
    border: 1px solid #e5eaf1 !important;
    border-left-color: #e5eaf1 !important;
}

.bulk-operations-page .box.box-primary.bulk-sales-panel,
.bulk-operations-page .box.box-primary.bulk-items-panel {
    border: 1px solid #e5eaf1 !important;
    border-left: 1px solid #e5eaf1 !important;
}

.bulk-sales-panel .box-header,
.bulk-items-panel .box-header {
    min-height: 43px;
    padding: 12px 14px !important;
    border-bottom: 1px solid #e5eaf1 !important;
}

.bulk-sales-panel .box-title,
.bulk-items-panel .box-title {
    font-size: 13px !important;
    font-weight: 600 !important;
}

.bulk-selected-badge {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    margin: 0 3px;
    color: #0b6df2;
    background: #eaf3ff;
    border-radius: 6px;
    font-weight: 700;
}

.bulk-sales-panel .table,
.bulk-items-panel .table {
    margin-bottom: 0 !important;
    font-size: 12px !important;
}

    .bulk-sales-panel .table > thead > tr > th,
    .bulk-sales-panel .table > tbody > tr > td,
    .bulk-items-panel .table > thead > tr > th,
    .bulk-items-panel .table > tbody > tr > td {
        padding: 10px 9px !important;
        border-color: #edf0f4 !important;
        vertical-align: middle !important;
        white-space: nowrap;
    }

.bulk-sales-panel .box-footer {
    min-height: 42px;
    padding: 7px 10px !important;
    border-top: 1px solid #edf0f4 !important;
}

.bulk-sales-panel .dataTables_wrapper > .tw-mb-3:first-child {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 10px 12px !important;
}

    .bulk-sales-panel .dataTables_wrapper > .tw-mb-3:first-child > .col-sm-2 {
        width: 16.666667% !important;
        max-width: 16.666667% !important;
        padding: 0 7px !important;
        float: none !important;
    }

    .bulk-sales-panel .dataTables_wrapper > .tw-mb-3:first-child > .col-sm-8 {
        width: 66.666667% !important;
        max-width: 66.666667% !important;
        padding: 0 7px !important;
        float: none !important;
    }

.bulk-sales-panel .dataTables_length,
.bulk-sales-panel .dataTables_filter {
    margin: 0 !important;
}

.bulk-sales-panel .dataTables_filter {
    text-align: right !important;
}

    .bulk-sales-panel .dataTables_filter input {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

.bulk-sales-panel .dt-buttons {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    gap: 7px !important;
    margin: 0 !important;
}

    .bulk-sales-panel .dt-buttons .btn {
        margin: 0 !important;
    }

    .bulk-sales-panel .dt-buttons a,
    .bulk-sales-panel .dt-buttons button {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }

.bulk-items-panel .box-body {
    padding: 13px !important;
}

.bulk-item-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: -6px;
}

.bulk-item-action-btn {
    min-height: 34px !important;
    padding: 7px 12px !important;
    color: #f97316 !important;
    background: #fff !important;
    border: 1px solid #f97316 !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    line-height: 18px !important;
}

    .bulk-item-action-btn:hover,
    .bulk-item-action-btn:focus {
        color: #fff !important;
        background: #f97316 !important;
    }

#print-bulk-item-list {
    color: #fff !important;
    background: #f97316 !important;
    border-color: #f97316 !important;
}

    #print-bulk-item-list:hover,
    #print-bulk-item-list:focus {
        color: #fff !important;
        background: #ea580c !important;
        border-color: #ea580c !important;
    }

.bulk-operation-actions {
    position: sticky;
    bottom: 10px;
    margin-top: 14px;
    padding: 10px 14px !important;
    border: 1px solid #e5eaf1 !important;
    border-radius: 9px !important;
    box-shadow: 0 5px 18px rgba(16, 24, 40, .08) !important;
}

    .bulk-operation-actions .btn {
        min-height: 35px;
        padding: 7px 12px;
        border-color: #dbe2ea;
        border-radius: 6px !important;
        color: #344054;
        font-size: 12px;
    }

.bulk-operations-page input[type="checkbox"] {
    accent-color: #0b6df2;
}

.bulk-sales-panel a {
    color: #0878d1 !important;
}

.bulk-sales-panel .label-success {
    color: #087a3d !important;
    background: #dff7e8 !important;
}

.bulk-sales-panel .label-warning {
    color: #d36a00 !important;
    background: #fff1db !important;
}

.bulk-sales-panel .label-danger {
    color: #e11d48 !important;
    background: #ffe6eb !important;
}

.bulk-sales-panel .label-default {
    color: #475467 !important;
    background: #e7ebf0 !important;
}

#bulk-operation-modal .modal-content {
    border: 0;
    border-radius: 11px;
    box-shadow: 0 18px 48px rgba(16, 24, 40, .22);
    overflow: hidden;
}

#bulk-operation-modal .modal-header,
#bulk-operation-modal .modal-footer {
    padding: 14px 18px;
    border-color: #e5e7eb;
}

#bulk-operation-modal .modal-body {
    padding: 13px;
}

#bulk-operation-modal .modal-title {
    font-size: 16px;
    font-weight: 600;
}

.compact-delete-alert__icon svg {
    width: 19px;
    height: 19px;
}

/* 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: 7px;
    margin: 12px 0;
    padding: 12px;
    color: #53627a;
    border-bottom: 1px solid #dfe5ed;
    font-size: 10px;
}

    .gstr1-note svg {
        width: 15px;
        height: 15px;
    }

.gstr1-footer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
    padding: 4px 12px 14px;
}

.gstr1-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 7px 14px;
    background: #fff;
    border: 1px solid currentColor;
    border-radius: 4px;
    font-size: 12px;
    text-decoration: none !important;
}

    .gstr1-action svg {
        width: 16px;
        height: 16px;
    }

.gstr1-action--green {
    color: #06a64f;
}

.gstr1-action--red {
    color: #ff3155;
}

.gstr1-action--blue {
    color: #087be7;
}

.gstr1-action--purple {
    color: #7945dc;
}

.gstr1-action--orange {
    color: #ff5a0a;
}

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

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

    .gstr1-lower-grid {
        grid-template-columns: 1fr;
    }
}

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

    .gstr1-tax-layout {
        grid-template-columns: 1fr;
    }

    .gstr1-donut-wrap {
        margin: auto;
    }
}

@media print {
    .gstr1-page-header, .gstr1-report-page {
        display: block !important;
    }

    .gstr1-filter-card, .gstr1-footer-actions {
        display: none !important;
    }

    .gstr1-main-card, .gstr1-summary-card, .gstr1-kpi {
        box-shadow: none !important;
    }
}

/* Shared responsive-table behavior. Wide data tables remain readable and
   scroll inside their own card instead of widening the whole application. */
.table-responsive {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

    .table-responsive > table {
        width: 100%;
        min-width: max-content;
        margin-bottom: 0;
    }

.dataTables_wrapper,
.dataTables_scroll,
.dataTables_scrollBody {
    max-width: 100%;
}

.dataTables_scrollBody {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

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

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

    .bulk-operation-filter > .tw-grid:first-child {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

        .bulk-operation-filter > .tw-grid:first-child > div:last-child {
            grid-column: auto !important;
        }

    .bulk-panels-row {
        display: block !important;
    }

    .bulk-sales-column,
    .bulk-items-column {
        width: 100% !important;
    }

    .bulk-operation-workspace {
        display: block;
    }

    .bulk-sales-panel,
    .bulk-items-panel {
        border: 1px solid #e5eaf1 !important;
        border-radius: 10px !important;
        margin-bottom: 14px !important;
    }
}

@media (max-width: 991px) {
    .bulk-sales-panel .dataTables_wrapper > .tw-mb-3:first-child {
        display: block !important;
    }

        .bulk-sales-panel .dataTables_wrapper > .tw-mb-3:first-child > .col-sm-2,
        .bulk-sales-panel .dataTables_wrapper > .tw-mb-3:first-child > .col-sm-8 {
            width: 100% !important;
            max-width: 100% !important;
            margin-bottom: 10px !important;
        }

    .bulk-sales-panel .dataTables_filter,
    .bulk-sales-panel .dataTables_length {
        text-align: center !important;
    }

        .bulk-sales-panel .dataTables_filter input {
            max-width: 320px !important;
        }
}

@media (max-width: 767px) {
    .bulk-operation-grid,
    .bulk-operation-filter > .tw-grid:first-child {
        grid-template-columns: 1fr !important;
    }

    .bulk-advanced-filter-grid {
        grid-template-columns: 1fr !important;
    }

    .bulk-operation-card strong {
        white-space: normal;
    }

    .bulk-operation-actions {
        position: static;
    }

        .bulk-operation-actions .btn,
        .bulk-operation-actions .btn-group {
            width: 100%;
        }
}

/* 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: 800
    }

        .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: 800
    }

    .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: 800
}

.modern-sale-page .sale-section-card > .box-body > .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: 800;
        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: 800;
    }

    .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: 800;
        letter-spacing: .12em;
        text-transform: uppercase
    }

    .sale-workspace-banner__copy strong {
        margin-top: 2px;
        font-size: 17px;
        font-weight: 800
    }

    .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 > .box-body {
        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: 800;
        letter-spacing: .025em;
        text-transform: uppercase
    }

.modern-sale-page .sale-section-card--overview > .box-body > .col-sm-4, .modern-sale-page .sale-section-card--overview > .box-body > .col-md-4 {
    grid-column: span 4;
    width: auto;
    padding-left: 7px;
    padding-right: 7px
}

.modern-sale-page .sale-section-card--overview > .box-body > .col-sm-3, .modern-sale-page .sale-section-card--overview > .box-body > .col-md-3 {
    grid-column: span 3;
    width: auto;
    padding-left: 7px;
    padding-right: 7px
}

.modern-sale-page .sale-section-card--overview > .box-body > .col-sm-6, .modern-sale-page .sale-section-card--overview > .box-body > .col-md-6 {
    grid-column: span 6;
    width: auto
}

.modern-sale-page .sale-section-card--overview > .box-body > .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 > .box-body {
        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 > .box-body > .col-sm-4, .modern-sale-page .sale-section-card--overview > .box-body > .col-md-4 {
        grid-column: span 3
    }

    .modern-sale-page .sale-section-card--overview > .box-body > .col-sm-3, .modern-sale-page .sale-section-card--overview > .box-body > .col-md-3 {
        grid-column: span 3
    }
}

@media(max-width:600px) {
    .modern-sale-page .sale-section-card--overview > .box-body {
        display: block
    }

    .sale-overview-headings {
        display: none
    }

    .modern-sale-page .sale-section-card--overview > .box-body > [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 form > .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 form > .row:first-of-type > .col-md-12 > .sale-section-card--overview {
            grid-column: 1/span 8;
            grid-row: 1;
            margin: 0
        }

        .modern-sale-page form > .row:first-of-type > .col-md-12 > .sale-section-card--other {
            grid-column: 9/span 4;
            grid-row: 1;
            margin: 0
        }

        .modern-sale-page form > .row:first-of-type > .col-md-12 > .sale-section-card--products {
            grid-column: 1/span 10;
            grid-row: 2;
            margin: 0
        }

        .modern-sale-page form > .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 form > .row:first-of-type > .col-md-12 > .sale-section-card--totals > .box-body {
                height: calc(100% - 37px);
                padding: 10px
            }

        .modern-sale-page form > .row:first-of-type > .col-md-12 > .sale-section-card--other > .box-body {
            display: grid;
            grid-template-columns: repeat(2,minmax(0,1fr));
            gap: 0 9px;
            padding: 10px
        }

            .modern-sale-page form > .row:first-of-type > .col-md-12 > .sale-section-card--other > .box-body > .col-md-4, .modern-sale-page form > .row:first-of-type > .col-md-12 > .sale-section-card--other > .box-body > .col-md-12 {
                width: auto;
                padding: 0;
                float: none
            }

            .modern-sale-page form > .row:first-of-type > .col-md-12 > .sale-section-card--other > .box-body > .col-md-4 {
                grid-column: span 1
            }

            .modern-sale-page form > .row:first-of-type > .col-md-12 > .sale-section-card--other > .box-body > .col-md-12 {
                grid-column: 1/-1
            }

            .modern-sale-page form > .row:first-of-type > .col-md-12 > .sale-section-card--other > .box-body > .clearfix {
                display: none
            }

    .modern-sale-page .sale-section-card--overview > .box-body {
        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 > .box-body > .col-sm-4, .modern-sale-page .sale-section-card--overview > .box-body > .col-md-4 {
        grid-column: span 2
    }

    .modern-sale-page .sale-section-card--overview > .box-body > .col-sm-3, .modern-sale-page .sale-section-card--overview > .box-body > .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: 800;
    text-align: right
}

@media(max-width:1099px) {
    .modern-sale-page form > .row:first-of-type > .col-md-12 {
        display: block
    }

    .modern-sale-page .sale-section-card--other > .box-body {
        display: flex;
        flex-wrap: wrap
    }

        .modern-sale-page .sale-section-card--other > .box-body > .col-md-4 {
            width: 50%
        }
}

@media(max-width:600px) {
    .modern-sale-page .sale-section-card--other > .box-body > .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 > .box-body {
        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: 800
}

.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 > .box-body {
    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 > .box-body {
    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 > .box-body > .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 form > .row:first-of-type > .col-md-12 {
        display: grid;
        grid-template-columns: minmax(0,1fr);
        gap: 12px
    }

        .modern-sale-page form > .row:first-of-type > .col-md-12 > .sale-section-card--overview, .modern-sale-page form > .row:first-of-type > .col-md-12 > .sale-section-card--other, .modern-sale-page form > .row:first-of-type > .col-md-12 > .sale-section-card--products, .modern-sale-page form > .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 form > .row:first-of-type > .col-md-12 > .sale-section-card--other > .box-body {
                grid-template-columns: repeat(4,minmax(0,1fr));
                gap: 0 12px;
                padding: 12px
            }

                .modern-sale-page form > .row:first-of-type > .col-md-12 > .sale-section-card--other > .box-body > .col-md-4 {
                    grid-column: span 1
                }

                .modern-sale-page form > .row:first-of-type > .col-md-12 > .sale-section-card--other > .box-body > .col-md-12 {
                    grid-column: 1/-1
                }

            .modern-sale-page form > .row:first-of-type > .col-md-12 > .sale-section-card--totals > .box-body {
                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
    }
}

/* 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: 800
}

    .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: 800;
    letter-spacing: .13em;
    text-transform: uppercase
}

.modern-profile-hero h1 {
    margin: 5px 0 6px;
    font-size: 28px;
    font-weight: 800
}

.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: 800
    }

    .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: 800
}

    .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: 800
}

.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: 800
}

.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: 800
}

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

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

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

.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: 800
        }

.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: 800
    }

    .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:4px!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:800;letter-spacing:1.7px}.sa-dashboard-hero h1{margin:0 0 7px;color:#fff;font-size:28px;font-weight:800;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:800}.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:800}.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:800}.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:800;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: 800; }
.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: 800;
}

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