/**
 * Sales Portal — responsive layer
 * Breakpoints (mobile-first):
 *   Mobile      < 576px   — base
 *   Mobile LG   ≥ 576px  — large phones / small tablets portrait
 *   Tablet      ≥ 768px  — tablets, small laptops
 *   Laptop      ≥ 992px  — laptops, small desktops
 *   Desktop     ≥ 1200px — standard desktops
 *   Wide        ≥ 1400px — large desktops / small ultrawide
 *   Big screen  ≥ 1920px — full HD+ / 4K layouts
 *
 * Use utility classes (rsp-*) or CSS variables (--rsp-*) on your markup.
 */

/* -------------------------------------------------------------------------- */
/* Design tokens — spacing & type scale (mobile defaults)                     */
/* -------------------------------------------------------------------------- */

:root {
    --rsp-font-scale: 0.9375;
    --rsp-fs-xs: calc(0.6875rem * var(--rsp-font-scale));
    --rsp-fs-sm: calc(0.75rem * var(--rsp-font-scale));
    --rsp-fs-body: calc(0.8125rem * var(--rsp-font-scale));
    --rsp-fs-md: calc(0.875rem * var(--rsp-font-scale));
    --rsp-fs-lg: calc(1rem * var(--rsp-font-scale));
    --rsp-fs-xl: calc(1.125rem * var(--rsp-font-scale));
    --rsp-fs-2xl: calc(1.25rem * var(--rsp-font-scale));
    --rsp-fs-3xl: calc(1.5rem * var(--rsp-font-scale));
    --rsp-fs-display: calc(1.75rem * var(--rsp-font-scale));

    --rsp-space-0: 0;
    --rsp-space-1: 0.25rem;
    --rsp-space-2: 0.5rem;
    --rsp-space-3: 0.75rem;
    --rsp-space-4: 1rem;
    --rsp-space-5: 1.25rem;
    --rsp-space-6: 1.5rem;
    --rsp-space-7: 2rem;
    --rsp-space-8: 2.5rem;
    --rsp-space-9: 3rem;

    --rsp-container-pad-x: 0.75rem;
    --rsp-container-pad-y: 0.75rem;
    --rsp-card-pad: 1rem;
    --rsp-table-cell-pad-y: 0.45rem;
    --rsp-table-cell-pad-x: 0.5rem;
    --rsp-gap: 0.75rem;
    --rsp-section-gap: 1rem;
}

/* Mobile large — 576px+ */
@media (min-width: 576px) {
    :root {
        --rsp-font-scale: 0.95;
        --rsp-space-4: 1.0625rem;
        --rsp-space-5: 1.375rem;
        --rsp-space-6: 1.625rem;
        --rsp-space-7: 2.125rem;
        --rsp-container-pad-x: 1rem;
        --rsp-container-pad-y: 1rem;
        --rsp-card-pad: 1.125rem;
        --rsp-gap: 0.875rem;
        --rsp-section-gap: 1.125rem;
    }
}

/* Tablet — 768px+ */
@media (min-width: 768px) {
    :root {
        --rsp-font-scale: 1;
        --rsp-fs-body: 0.875rem;
        --rsp-fs-md: 0.9375rem;
        --rsp-fs-lg: 1.0625rem;
        --rsp-fs-xl: 1.1875rem;
        --rsp-fs-2xl: 1.375rem;
        --rsp-fs-3xl: 1.625rem;
        --rsp-fs-display: 1.875rem;
        --rsp-space-5: 1.5rem;
        --rsp-space-6: 1.75rem;
        --rsp-space-7: 2.25rem;
        --rsp-space-8: 2.75rem;
        --rsp-space-9: 3.25rem;
        --rsp-container-pad-x: 1.25rem;
        --rsp-container-pad-y: 1.25rem;
        --rsp-card-pad: 1.25rem;
        --rsp-table-cell-pad-y: 0.5rem;
        --rsp-table-cell-pad-x: 0.65rem;
        --rsp-gap: 1rem;
        --rsp-section-gap: 1.375rem;
    }
}

/* Laptop — 992px+ */
@media (min-width: 992px) {
    :root {
        --rsp-font-scale: 1;
        --rsp-fs-body: 0.875rem;
        --rsp-fs-lg: 1.0625rem;
        --rsp-fs-xl: 1.25rem;
        --rsp-fs-2xl: 1.4375rem;
        --rsp-fs-3xl: 1.6875rem;
        --rsp-fs-display: 2rem;
        --rsp-space-6: 1.875rem;
        --rsp-space-7: 2.5rem;
        --rsp-space-8: 3rem;
        --rsp-space-9: 3.5rem;
        --rsp-container-pad-x: 1.5rem;
        --rsp-container-pad-y: 1.5rem;
        --rsp-card-pad: 1.375rem;
        --rsp-gap: 1.125rem;
        --rsp-section-gap: 1.5rem;
    }
}

/* Desktop — 1200px+ */
@media (min-width: 1200px) {
    :root {
        --rsp-fs-body: 0.9375rem;
        --rsp-fs-md: 1rem;
        --rsp-fs-lg: 1.125rem;
        --rsp-fs-xl: 1.3125rem;
        --rsp-fs-2xl: 1.5rem;
        --rsp-fs-3xl: 1.75rem;
        --rsp-fs-display: 2.125rem;
        --rsp-space-7: 2.75rem;
        --rsp-space-8: 3.25rem;
        --rsp-space-9: 4rem;
        --rsp-container-pad-x: 1.75rem;
        --rsp-container-pad-y: 1.75rem;
        --rsp-card-pad: 1.5rem;
        --rsp-table-cell-pad-y: 0.55rem;
        --rsp-table-cell-pad-x: 0.75rem;
        --rsp-gap: 1.25rem;
        --rsp-section-gap: 1.75rem;
    }
}

/* Wide desktop — 1400px+ */
@media (min-width: 1400px) {
    :root {
        --rsp-fs-body: 1rem;
        --rsp-fs-lg: 1.125rem;
        --rsp-fs-xl: 1.375rem;
        --rsp-fs-2xl: 1.5625rem;
        --rsp-fs-3xl: 1.875rem;
        --rsp-fs-display: 2.25rem;
        --rsp-space-8: 3.5rem;
        --rsp-space-9: 4.25rem;
        --rsp-container-pad-x: 2rem;
        --rsp-container-pad-y: 2rem;
        --rsp-card-pad: 1.625rem;
        --rsp-gap: 1.375rem;
        --rsp-section-gap: 2rem;
    }
}

/* Big screen — 1920px+ */
@media (min-width: 1920px) {
    :root {
        --rsp-fs-body: 1.0625rem;
        --rsp-fs-md: 1.0625rem;
        --rsp-fs-lg: 1.1875rem;
        --rsp-fs-xl: 1.4375rem;
        --rsp-fs-2xl: 1.625rem;
        --rsp-fs-3xl: 2rem;
        --rsp-fs-display: 2.5rem;
        --rsp-space-7: 3rem;
        --rsp-space-8: 3.75rem;
        --rsp-space-9: 4.5rem;
        --rsp-container-pad-x: 2.25rem;
        --rsp-container-pad-y: 2.25rem;
        --rsp-card-pad: 1.75rem;
        --rsp-table-cell-pad-y: 0.65rem;
        --rsp-table-cell-pad-x: 0.85rem;
        --rsp-gap: 1.5rem;
        --rsp-section-gap: 2.25rem;
    }
}

/* -------------------------------------------------------------------------- */
/* Fluid typography (optional — stacks with variables)                       */
/* -------------------------------------------------------------------------- */

.rsp-text-fluid-body {
    font-size: clamp(0.8125rem, 0.75rem + 0.35vw, 1.0625rem);
}

.rsp-text-fluid-title {
    font-size: clamp(1.125rem, 1rem + 0.65vw, 2rem);
}

.rsp-text-fluid-display {
    font-size: clamp(1.375rem, 1.1rem + 1.1vw, 2.625rem);
}

/* -------------------------------------------------------------------------- */
/* Typography utilities                                                       */
/* -------------------------------------------------------------------------- */

.rsp-text-xs { font-size: var(--rsp-fs-xs) !important; }
.rsp-text-sm { font-size: var(--rsp-fs-sm) !important; }
.rsp-text-body { font-size: var(--rsp-fs-body) !important; }
.rsp-text-md { font-size: var(--rsp-fs-md) !important; }
.rsp-text-lg { font-size: var(--rsp-fs-lg) !important; }
.rsp-text-xl { font-size: var(--rsp-fs-xl) !important; }
.rsp-text-2xl { font-size: var(--rsp-fs-2xl) !important; }
.rsp-text-3xl { font-size: var(--rsp-fs-3xl) !important; }
.rsp-text-display { font-size: var(--rsp-fs-display) !important; }

.rsp-leading-tight { line-height: 1.25 !important; }
.rsp-leading-normal { line-height: 1.5 !important; }
.rsp-leading-relaxed { line-height: 1.65 !important; }

/* -------------------------------------------------------------------------- */
/* Spacing utilities — padding                                                */
/* -------------------------------------------------------------------------- */

.rsp-p-0 { padding: var(--rsp-space-0) !important; }
.rsp-p-1 { padding: var(--rsp-space-1) !important; }
.rsp-p-2 { padding: var(--rsp-space-2) !important; }
.rsp-p-3 { padding: var(--rsp-space-3) !important; }
.rsp-p-4 { padding: var(--rsp-space-4) !important; }
.rsp-p-5 { padding: var(--rsp-space-5) !important; }
.rsp-p-6 { padding: var(--rsp-space-6) !important; }
.rsp-p-7 { padding: var(--rsp-space-7) !important; }
.rsp-p-8 { padding: var(--rsp-space-8) !important; }

.rsp-px-0 { padding-left: var(--rsp-space-0) !important; padding-right: var(--rsp-space-0) !important; }
.rsp-px-1 { padding-left: var(--rsp-space-1) !important; padding-right: var(--rsp-space-1) !important; }
.rsp-px-2 { padding-left: var(--rsp-space-2) !important; padding-right: var(--rsp-space-2) !important; }
.rsp-px-3 { padding-left: var(--rsp-space-3) !important; padding-right: var(--rsp-space-3) !important; }
.rsp-px-4 { padding-left: var(--rsp-space-4) !important; padding-right: var(--rsp-space-4) !important; }
.rsp-px-5 { padding-left: var(--rsp-space-5) !important; padding-right: var(--rsp-space-5) !important; }
.rsp-px-6 { padding-left: var(--rsp-space-6) !important; padding-right: var(--rsp-space-6) !important; }

.rsp-py-0 { padding-top: var(--rsp-space-0) !important; padding-bottom: var(--rsp-space-0) !important; }
.rsp-py-1 { padding-top: var(--rsp-space-1) !important; padding-bottom: var(--rsp-space-1) !important; }
.rsp-py-2 { padding-top: var(--rsp-space-2) !important; padding-bottom: var(--rsp-space-2) !important; }
.rsp-py-3 { padding-top: var(--rsp-space-3) !important; padding-bottom: var(--rsp-space-3) !important; }
.rsp-py-4 { padding-top: var(--rsp-space-4) !important; padding-bottom: var(--rsp-space-4) !important; }
.rsp-py-5 { padding-top: var(--rsp-space-5) !important; padding-bottom: var(--rsp-space-5) !important; }
.rsp-py-6 { padding-top: var(--rsp-space-6) !important; padding-bottom: var(--rsp-space-6) !important; }
.rsp-py-7 { padding-top: var(--rsp-space-7) !important; padding-bottom: var(--rsp-space-7) !important; }

.rsp-pt-0 { padding-top: var(--rsp-space-0) !important; }
.rsp-pt-2 { padding-top: var(--rsp-space-2) !important; }
.rsp-pt-4 { padding-top: var(--rsp-space-4) !important; }
.rsp-pt-6 { padding-top: var(--rsp-space-6) !important; }
.rsp-pb-0 { padding-bottom: var(--rsp-space-0) !important; }
.rsp-pb-2 { padding-bottom: var(--rsp-space-2) !important; }
.rsp-pb-4 { padding-bottom: var(--rsp-space-4) !important; }
.rsp-pb-6 { padding-bottom: var(--rsp-space-6) !important; }

/* -------------------------------------------------------------------------- */
/* Spacing utilities — margin                                                 */
/* -------------------------------------------------------------------------- */

.rsp-m-0 { margin: var(--rsp-space-0) !important; }
.rsp-m-1 { margin: var(--rsp-space-1) !important; }
.rsp-m-2 { margin: var(--rsp-space-2) !important; }
.rsp-m-3 { margin: var(--rsp-space-3) !important; }
.rsp-m-4 { margin: var(--rsp-space-4) !important; }
.rsp-m-5 { margin: var(--rsp-space-5) !important; }
.rsp-m-6 { margin: var(--rsp-space-6) !important; }
.rsp-m-auto { margin: auto !important; }

.rsp-mx-auto { margin-left: auto !important; margin-right: auto !important; }

.rsp-my-2 { margin-top: var(--rsp-space-2) !important; margin-bottom: var(--rsp-space-2) !important; }
.rsp-my-3 { margin-top: var(--rsp-space-3) !important; margin-bottom: var(--rsp-space-3) !important; }
.rsp-my-4 { margin-top: var(--rsp-space-4) !important; margin-bottom: var(--rsp-space-4) !important; }
.rsp-my-5 { margin-top: var(--rsp-space-5) !important; margin-bottom: var(--rsp-space-5) !important; }
.rsp-my-6 { margin-top: var(--rsp-space-6) !important; margin-bottom: var(--rsp-space-6) !important; }
.rsp-my-7 { margin-top: var(--rsp-space-7) !important; margin-bottom: var(--rsp-space-7) !important; }

.rsp-mt-0 { margin-top: var(--rsp-space-0) !important; }
.rsp-mt-2 { margin-top: var(--rsp-space-2) !important; }
.rsp-mt-3 { margin-top: var(--rsp-space-3) !important; }
.rsp-mt-4 { margin-top: var(--rsp-space-4) !important; }
.rsp-mt-5 { margin-top: var(--rsp-space-5) !important; }
.rsp-mt-6 { margin-top: var(--rsp-space-6) !important; }
.rsp-mt-7 { margin-top: var(--rsp-space-7) !important; }

.rsp-mb-0 { margin-bottom: var(--rsp-space-0) !important; }
.rsp-mb-2 { margin-bottom: var(--rsp-space-2) !important; }
.rsp-mb-3 { margin-bottom: var(--rsp-space-3) !important; }
.rsp-mb-4 { margin-bottom: var(--rsp-space-4) !important; }
.rsp-mb-5 { margin-bottom: var(--rsp-space-5) !important; }
.rsp-mb-6 { margin-bottom: var(--rsp-space-6) !important; }
.rsp-mb-7 { margin-bottom: var(--rsp-space-7) !important; }

.rsp-ms-2 { margin-inline-start: var(--rsp-space-2) !important; }
.rsp-ms-3 { margin-inline-start: var(--rsp-space-3) !important; }
.rsp-me-2 { margin-inline-end: var(--rsp-space-2) !important; }
.rsp-me-3 { margin-inline-end: var(--rsp-space-3) !important; }

/* -------------------------------------------------------------------------- */
/* Layout helpers                                                             */
/* -------------------------------------------------------------------------- */

.rsp-gap {
    gap: var(--rsp-gap) !important;
}

.rsp-gap-2 {
    gap: var(--rsp-space-2) !important;
}

.rsp-gap-4 {
    gap: var(--rsp-space-4) !important;
}

.rsp-section-y {
    margin-top: var(--rsp-section-gap) !important;
    margin-bottom: var(--rsp-section-gap) !important;
}

.rsp-section-pt {
    padding-top: var(--rsp-section-gap) !important;
}

.rsp-section-pb {
    padding-bottom: var(--rsp-section-gap) !important;
}

/* Stack on small screens, row from laptop up */
.rsp-stack {
    display: flex;
    flex-direction: column;
    gap: var(--rsp-gap);
}

@media (min-width: 992px) {
    .rsp-stack {
        flex-direction: row;
        align-items: flex-start;
    }
}

/* -------------------------------------------------------------------------- */
/* Global shell — Metronic admin                                              */
/* -------------------------------------------------------------------------- */

#kt_app_body,
body.app-default {
    font-size: var(--rsp-fs-body);
}

#kt_app_content_container.app-container,
#kt_app_header_container.app-container,
#kt_app_footer .app-container {
    padding-left: var(--rsp-container-pad-x);
    padding-right: var(--rsp-container-pad-x);
}

#kt_app_content {
    padding-top: var(--rsp-container-pad-y);
    padding-bottom: var(--rsp-container-pad-y);
}

#kt_app_header .page-heading,
#kt_app_content .page-heading {
    font-size: var(--rsp-fs-display);
    line-height: 1.2;
}

@media (max-width: 767.98px) {
    #kt_app_header .page-heading,
    #kt_app_content .page-heading {
        font-size: var(--rsp-fs-2xl);
    }
}

#kt_app_content .card .card-body {
    /* padding: var(--rsp-card-pad); */
}

#kt_app_content .card .card-header {
    /* padding: var(--rsp-space-3) var(--rsp-card-pad); */
    font-size: var(--rsp-fs-md);
}

@media (min-width: 992px) {
    #kt_app_content .card .card-header {
        padding: var(--rsp-space-4) var(--rsp-card-pad);
    }
}

#kt_app_content .table:not(.table-bordered) th,
#kt_app_content .table:not(.table-bordered) td {
    padding: var(--rsp-table-cell-pad-y) var(--rsp-table-cell-pad-x);
    font-size: var(--rsp-fs-sm);
}

@media (min-width: 768px) {
    #kt_app_content .table:not(.table-bordered) th,
    #kt_app_content .table:not(.table-bordered) td {
        font-size: var(--rsp-fs-body);
    }
}

#kt_app_content .btn:not(.btn-sm):not(.btn-lg) {
    padding: var(--rsp-space-2) var(--rsp-space-4);
    font-size: var(--rsp-fs-sm);
}

@media (min-width: 768px) {
    #kt_app_content .btn:not(.btn-sm):not(.btn-lg) {
        font-size: var(--rsp-fs-body);
        padding: var(--rsp-space-2) var(--rsp-space-5);
    }
}

#kt_app_content .form-control,
#kt_app_content .form-select {
    font-size: var(--rsp-fs-body);
    padding: var(--rsp-space-2) var(--rsp-space-3);
}

#kt_app_content .form-label,
#kt_app_content label.col-form-label {
    font-size: var(--rsp-fs-sm);
    margin-bottom: var(--rsp-space-2);
}

@media (min-width: 768px) {
    #kt_app_content .form-label,
    #kt_app_content label.col-form-label {
        font-size: var(--rsp-fs-body);
    }
}

/* Toolbar / breadcrumb density */
#kt_app_toolbar .breadcrumb {
    font-size: var(--rsp-fs-sm);
    margin-bottom: var(--rsp-space-2);
}

@media (min-width: 768px) {
    #kt_app_toolbar .breadcrumb {
        font-size: var(--rsp-fs-body);
    }
}

/* Sidebar menu text scales slightly */
#kt_app_sidebar .menu-title {
    font-size: var(--rsp-fs-sm);
}

@media (min-width: 992px) {
    #kt_app_sidebar .menu-title {
        font-size: var(--rsp-fs-body);
    }
}

/* -------------------------------------------------------------------------- */
/* Auth / CoreUI layout (layouts.app)                                         */
/* -------------------------------------------------------------------------- */

body.login-page .container {
    padding-left: var(--rsp-container-pad-x);
    padding-right: var(--rsp-container-pad-x);
}

body.login-page {
    font-size: var(--rsp-fs-body);
}

body.login-page h1,
body.login-page h2,
body.login-page h3,
body.login-page .card-header {
    font-size: var(--rsp-fs-xl);
}

body.login-page .card-body {
    padding: var(--rsp-card-pad);
}

body.login-page .form-control {
    font-size: var(--rsp-fs-body);
    padding: var(--rsp-space-2) var(--rsp-space-3);
}

body.login-page .btn {
    font-size: var(--rsp-fs-body);
    padding: var(--rsp-space-2) var(--rsp-space-5);
}

/* -------------------------------------------------------------------------- */
/* Visibility by breakpoint                                                   */
/* -------------------------------------------------------------------------- */

/* Hidden below tablet; use on block-level wrappers */
.rsp-d-none-mobile {
    display: none !important;
}

@media (min-width: 768px) {
    .rsp-d-none-mobile {
        display: block !important;
    }
}

@media (min-width: 768px) {
    .rsp-d-none-mobile.rsp-d-md-inline {
        display: inline !important;
    }

    .rsp-d-none-mobile.rsp-d-md-flex {
        display: flex !important;
    }
}

/* Visible only on mobile (< 768px) */
.rsp-d-mobile-only {
    display: block !important;
}

@media (min-width: 768px) {
    .rsp-d-mobile-only {
        display: none !important;
    }
}

/* -------------------------------------------------------------------------- */
/* Tables — horizontal scroll on narrow viewports                             */
/* -------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
    .rsp-table-responsive-wrap {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin-bottom: var(--rsp-space-4);
    }
}