/* =========================================================
   SALIHIN SPS Portal Responsive Layer - Desktop Parity
   File: assets/drezoc/css/sps-responsive.css

   Load LAST after sps-theme.css and page/module CSS.

   Purpose:
   - Keep laptop desktop screens looking like large desktop layout.
   - Do not resize sidebar, do not touch .page-content margin.
   - Do not force container max-width.
   - Only compact spacing and override early grid breakpoints.
========================================================= */

:root {
    --sps-fluid-page-padding: clamp(14px, 1.1vw, 24px);
    --sps-fluid-card-padding: clamp(14px, 1vw, 22px);
    --sps-fluid-gap: clamp(10px, .95vw, 18px);
    --sps-fluid-radius-page: clamp(20px, 1.2vw, 30px);
    --sps-fluid-radius-card: clamp(14px, .95vw, 22px);
    --sps-fluid-title-xl: clamp(28px, 2vw, 40px);
    --sps-fluid-title-lg: clamp(22px, 1.45vw, 30px);
    --sps-fluid-title-md: clamp(18px, 1.1vw, 23px);
    --sps-fluid-text: clamp(12px, .82vw, 13.5px);
}

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

img,
svg,
canvas,
video {
    max-width: 100%;
}

.page-content {
    min-width: 0;
}

.page-content > .px-3 {
    padding-inline: clamp(10px, 1vw, 18px) !important;
}

.page-content .container-fluid {
    width: 100%;
    max-width: none !important;
    padding-inline: 0 !important;
}

/* =========================================================
   Common SPS spacing only
========================================================= */

.page-content :is(
    .sps-dashboard-page,
    .sps-admin-page,
    .sps-service-page,
    .sps-eatt-page,
    .sps-crm-page,
    .sps-hr-page,
    .sps-sop-page,
    .sps-mk-page,
    .sps-bi-page,
    .sps-report-page,
    .sps-staff-page,
    .sps-alumni-page,
    .sps-ai-page,
    .sps-account-page
) {
    padding: var(--sps-fluid-page-padding) !important;
    border-radius: var(--sps-fluid-radius-page) !important;
}

.page-content :is(
    .sps-dashboard-card,
    .sps-dashboard-hero,
    .sps-announcement-card,
    .sps-admin-card,
    .sps-service-card,
    .sps-service-header-card,
    .sps-eatt-card,
    .sps-crm-card,
    .sps-hr-card,
    .sps-sop-card,
    .sps-mk-card,
    .sps-bi-card,
    .sps-report-card,
    .sps-staff-card,
    .sps-alumni-card,
    .sps-ai-header-card,
    .sps-ai-filter-card,
    .sps-ai-side-card,
    .sps-ai-catalog-card,
    .sps-account-header-card,
    .sps-account-tabs,
    .sps-account-panel,
    .sps-account-profile-card
) {
    border-radius: var(--sps-fluid-radius-card) !important;
}

.page-content :is(
    .sps-ai-header-card,
    .sps-ai-filter-card,
    .sps-ai-side-card,
    .sps-ai-catalog-card,
    .sps-account-header-card,
    .sps-account-panel,
    .sps-account-profile-card
) {
    padding: var(--sps-fluid-card-padding) !important;
}

.page-content :is(
    .sps-ai-title-wrap h4,
    .sps-account-title-wrap h4,
    .sps-dashboard-title h1,
    .sps-page-title h4
) {
    font-size: var(--sps-fluid-title-xl) !important;
    line-height: 1.08 !important;
}

.page-content :is(
    .sps-ai-catalog-head h5,
    .sps-ai-side-card h5,
    .sps-account-section-head h5,
    .sps-panel-title,
    .sps-card-title
) {
    font-size: var(--sps-fluid-title-md) !important;
}

.page-content :is(
    .sps-ai-title-wrap p,
    .sps-account-title-wrap p,
    .sps-dashboard-subtitle,
    .sps-card-desc
) {
    font-size: var(--sps-fluid-text) !important;
}

.page-content :is(
    .sps-ai-stats-grid,
    .sps-dashboard-stats-grid,
    .sps-admin-stats-grid,
    .sps-service-stats-grid,
    .sps-eatt-stats-grid,
    .sps-crm-stats-grid,
    .sps-hr-stats-grid,
    .sps-sop-stats-grid,
    .sps-mk-stats-grid,
    .sps-bi-stats-grid,
    .sps-report-stats-grid,
    .sps-staff-stats-grid,
    .sps-alumni-stats-grid
) {
    gap: var(--sps-fluid-gap) !important;
}

.page-content :is(.form-control, .form-select, input, select, textarea) {
    max-width: 100%;
}

.table-responsive,
.sps-table-wrap,
.sps-datatable-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-responsive > table,
.sps-table-wrap > table,
.sps-datatable-wrap > table {
    min-width: 760px;
}

/* =========================================================
   Desktop parity for laptops
   This is the important part.
   Keep the same column layout as wide screen, then compact
   the card size instead of changing the number of columns.
========================================================= */

@media (min-width: 1200px) {
    /* AI Hub: page CSS previously changes this to 2 columns below 1500px. Override it. */
    .page-content .sps-ai-stats-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    .page-content .sps-ai-tool-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .page-content .sps-ai-layout {
        grid-template-columns: minmax(260px, 285px) minmax(0, 1fr) !important;
    }

    /* Dashboard Quick Access: keep 6 cards like big screen. */
    .page-content .sps-dashboard-page :is(
        .sps-module-grid,
        .sps-modules-grid,
        .sps-dashboard-module-grid,
        .sps-dashboard-modules-grid,
        .sps-portal-module-grid,
        .sps-portal-modules-grid,
        .sps-quick-access-grid,
        .sps-quickaccess-grid,
        .sps-feature-grid,
        .sps-dashboard-feature-grid,
        [class*="module-grid"],
        [class*="modules-grid"],
        [class*="quick-access-grid"],
        [class*="quickaccess-grid"]
    ) {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    }

    /* If Quick Access was built as a flex row, prevent it from wrapping into 3 + 3. */
    .page-content .sps-dashboard-page :is(
        .sps-module-track,
        .sps-modules-track,
        .sps-dashboard-module-track,
        .sps-dashboard-modules-track,
        .sps-quick-access-track,
        .sps-quickaccess-track,
        [class*="module-track"],
        [class*="modules-track"],
        [class*="quick-access-track"],
        [class*="quickaccess-track"]
    ) {
        display: grid !important;
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        gap: var(--sps-fluid-gap) !important;
    }

    .page-content .sps-dashboard-page :is(
        .sps-module-card,
        .sps-dashboard-module-card,
        .sps-quick-access-card,
        .sps-feature-card,
        [class*="module-card"],
        [class*="quick-access-card"]
    ) {
        min-width: 0 !important;
        width: auto !important;
    }
}

/* Compact laptop: same layout, smaller spacing/card text. */
@media (min-width: 1200px) and (max-width: 1499.98px) {
    :root {
        --sps-fluid-page-padding: 16px;
        --sps-fluid-card-padding: 16px;
        --sps-fluid-gap: 12px;
        --sps-fluid-title-xl: clamp(28px, 1.9vw, 34px);
        --sps-fluid-title-lg: clamp(21px, 1.45vw, 28px);
        --sps-fluid-title-md: clamp(17px, 1vw, 21px);
        --sps-fluid-text: 12.5px;
    }

    .main-menu .menu-link {
        border-radius: 10px !important;
    }

    .main-menu .menu-text {
        font-size: 12.5px !important;
    }

    .page-content .sps-ai-stat-card {
        min-height: 92px !important;
        padding: 14px !important;
    }

    .page-content .sps-ai-stat-icon {
        width: 42px !important;
        height: 42px !important;
        flex-basis: 42px !important;
    }

    .page-content .sps-ai-stat-card strong {
        font-size: 24px !important;
    }

    .page-content .sps-ai-header-card {
        min-height: 132px !important;
    }

    .page-content .sps-ai-title-icon {
        width: 60px !important;
        height: 60px !important;
        flex-basis: 60px !important;
        border-radius: 18px !important;
    }

    .page-content .sps-dashboard-page :is(
        .sps-module-card,
        .sps-dashboard-module-card,
        .sps-quick-access-card,
        .sps-feature-card,
        [class*="module-card"],
        [class*="quick-access-card"]
    ) {
        min-height: 92px !important;
        padding: 14px !important;
    }
}

/* =========================================================
   Tablet / below laptop
   Below 1200px, we allow responsive stacking because keeping
   six columns will be too cramped for real tablets.
========================================================= */

@media (min-width: 992px) and (max-width: 1199.98px) {
    :root {
        --sps-fluid-page-padding: 15px;
        --sps-fluid-card-padding: 15px;
        --sps-fluid-gap: 12px;
        --sps-fluid-title-xl: clamp(24px, 2.2vw, 32px);
    }

    .page-content :is(
        .sps-ai-layout,
        .sps-account-layout,
        .sps-dashboard-layout,
        .sps-admin-layout,
        .sps-service-layout,
        .sps-eatt-layout,
        .sps-crm-layout,
        .sps-hr-layout,
        .sps-sop-layout,
        .sps-mk-layout,
        .sps-bi-layout,
        .sps-report-layout,
        .sps-staff-layout,
        .sps-alumni-layout
    ) {
        grid-template-columns: 1fr !important;
    }

    .page-content .sps-ai-stats-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    .page-content :is(
        .sps-ai-tool-grid,
        .sps-dashboard-stats-grid,
        .sps-admin-stats-grid,
        .sps-service-stats-grid,
        .sps-eatt-stats-grid,
        .sps-crm-stats-grid,
        .sps-hr-stats-grid,
        .sps-sop-stats-grid,
        .sps-mk-stats-grid,
        .sps-bi-stats-grid,
        .sps-report-stats-grid,
        .sps-staff-stats-grid,
        .sps-alumni-stats-grid
    ) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .page-content :is(.sps-ai-side-card, .sps-account-profile-card) {
        position: relative !important;
        top: auto !important;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    :root {
        --sps-fluid-page-padding: 14px;
        --sps-fluid-card-padding: 14px;
        --sps-fluid-gap: 10px;
        --sps-fluid-title-xl: clamp(23px, 3vw, 30px);
    }

    .page-content :is(
        .sps-ai-layout,
        .sps-account-layout,
        .sps-dashboard-layout,
        .sps-admin-layout,
        .sps-service-layout,
        .sps-eatt-layout,
        .sps-crm-layout,
        .sps-hr-layout,
        .sps-sop-layout,
        .sps-mk-layout,
        .sps-bi-layout,
        .sps-report-layout,
        .sps-staff-layout,
        .sps-alumni-layout,
        .sps-account-form-grid.two,
        .sps-account-form-grid.three,
        .sps-account-form-grid.address
    ) {
        grid-template-columns: 1fr !important;
    }

    .page-content :is(.sps-ai-stats-grid, .sps-ai-tool-grid, .sps-account-tabs) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 767.98px) {
    :root {
        --sps-fluid-page-padding: 12px;
        --sps-fluid-card-padding: 14px;
        --sps-fluid-gap: 10px;
        --sps-fluid-title-xl: clamp(22px, 7vw, 28px);
        --sps-fluid-title-lg: clamp(19px, 5.5vw, 24px);
        --sps-fluid-title-md: clamp(17px, 4.8vw, 21px);
    }

    .page-content > .px-3 {
        padding-inline: 8px !important;
    }

    .page-content :is(
        .sps-ai-header-card,
        .sps-account-header-card,
        .sps-dashboard-hero,
        .sps-page-header-card
    ) {
        grid-template-columns: 1fr !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 14px !important;
    }

    .page-content :is(
        .sps-ai-layout,
        .sps-account-layout,
        .sps-dashboard-layout,
        .sps-admin-layout,
        .sps-service-layout,
        .sps-eatt-layout,
        .sps-crm-layout,
        .sps-hr-layout,
        .sps-sop-layout,
        .sps-mk-layout,
        .sps-bi-layout,
        .sps-report-layout,
        .sps-staff-layout,
        .sps-alumni-layout,
        .sps-ai-stats-grid,
        .sps-ai-tool-grid,
        .sps-ai-category-pills,
        .sps-account-tabs,
        .sps-account-form-grid.two,
        .sps-account-form-grid.three,
        .sps-account-form-grid.address,
        .sps-picture-uploader
    ) {
        grid-template-columns: 1fr !important;
    }

    .page-content :is(.sps-ai-title-wrap, .sps-account-title-wrap) {
        align-items: flex-start !important;
    }

    .page-content :is(.sps-ai-title-icon, .sps-account-title-icon) {
        width: 52px !important;
        height: 52px !important;
        flex-basis: 52px !important;
        border-radius: 16px !important;
    }

    .page-content :is(.sps-ai-header-actions, .sps-account-actions) {
        width: 100% !important;
        justify-content: stretch !important;
    }

    .page-content :is(.sps-ai-header-actions button, .sps-account-actions button) {
        flex: 1 1 auto !important;
    }

    .footer .row > div {
        text-align: center !important;
    }
}

@media (max-width: 420px) {
    .page-content :is(.sps-ai-title-wrap, .sps-account-title-wrap) {
        flex-direction: column !important;
    }

    .page-content :is(.sps-ai-tool-top, .sps-account-section-head, .sps-ai-catalog-head) {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .page-content :is(.sps-ai-status-pill, .sps-account-soft-badge, .sps-account-status-pill) {
        white-space: normal !important;
    }
}