/* =========================================================
   SEO PORTAL — GLOBAL RESPONSIVE OVERRIDES
   Load this file AFTER the main portal stylesheet.
========================================================= */

:root {
    --portal-sidebar-width: 258px;
    --portal-content-max: 1600px;
    --portal-page-gutter: 30px;
}


/* =========================================================
   GLOBAL SAFETY / WIDTH CONTROL
========================================================= */

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

body {
    min-width: 0;
}

.portal-shell,
.portal-main,
.portal-content,
.portal-header,
.portal-footer {
    min-width: 0;
    max-width: 100%;
}

.portal-main {
    width: calc(100% - var(--portal-sidebar-width));
    margin-left: var(--portal-sidebar-width);
    overflow-x: hidden;
}

.portal-content {
    width: 100%;
    max-width: var(--portal-content-max);
    margin: 0 auto;
    padding:
        28px
        var(--portal-page-gutter)
        40px;
}

.portal-content > * {
    min-width: 0;
    max-width: 100%;
}

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

input,
select,
textarea,
button {
    max-width: 100%;
}

.row > * {
    min-width: 0;
}


/* =========================================================
   HEADER
========================================================= */

.portal-header {
    width: 100%;
    min-width: 0;
    padding-left: var(--portal-page-gutter);
    padding-right: var(--portal-page-gutter);
}

.header-left {
    min-width: 0;
    flex: 1;
}

.header-actions {
    flex: 0 0 auto;
}

.breadcrumb-wrap {
    min-width: 0;
}

.breadcrumb-wrap strong,
.breadcrumb-muted {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-trigger {
    max-width: 100%;
}


/* =========================================================
   SIDEBAR
========================================================= */

.portal-sidebar {
    width: var(--portal-sidebar-width);
}

.portal-nav-link,
.workspace-switcher,
.upgrade-card {
    min-width: 0;
}

.portal-nav-link > span:last-child,
.workspace-copy,
.upgrade-card > div:not(.upgrade-icon) {
    min-width: 0;
}

.portal-nav-link > span:last-child,
.workspace-copy strong,
.upgrade-card strong,
.upgrade-card small {
    overflow: hidden;
    text-overflow: ellipsis;
}


/* =========================================================
   COMMON PAGE STRUCTURE
========================================================= */

.page-heading-row {
    min-width: 0;
}

.page-heading-row > div:first-child {
    min-width: 0;
}

.page-heading-row h1,
.page-heading-row p {
    max-width: 100%;
    overflow-wrap: anywhere;
}

.heading-actions {
    flex-wrap: wrap;
}

.panel-card,
.panel-header,
.stat-card,
.card {
    min-width: 0;
}


/* =========================================================
   TABLES / DATA GRIDS
========================================================= */

.table-responsive,
.rp-table-wrap,
[class*="table-wrap"],
[class*="table-responsive"] {
    width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

table {
    max-width: 100%;
}

.table-responsive table,
.rp-table-wrap table,
[class*="table-wrap"] table,
[class*="table-responsive"] table {
    margin-bottom: 0;
}

.table-responsive::-webkit-scrollbar,
.rp-table-wrap::-webkit-scrollbar,
[class*="table-wrap"]::-webkit-scrollbar {
    height: 8px;
}

.table-responsive::-webkit-scrollbar-thumb,
.rp-table-wrap::-webkit-scrollbar-thumb,
[class*="table-wrap"]::-webkit-scrollbar-thumb {
    background: #cbd3df;
    border-radius: 999px;
}


/* =========================================================
   FORMS / TOOLBARS
========================================================= */

.form-control,
.form-select,
.input-group,
.input-group > .form-control,
.input-group > .form-select {
    min-width: 0;
}

.d-flex {
    min-width: 0;
}

.flex-grow-1 {
    min-width: 0;
}


/* =========================================================
   CURRENT PORTAL MODULES — DESKTOP SAFETY
========================================================= */

#portal-dashboard,
#reports-page,
#global-search-page,
#monthly-workflow-page,
#website-qa-workspace {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

#reports-page .rp-panel,
#reports-page .rp-panel-body,
#reports-page .rp-filter-grid,
#reports-page .rp-stat-grid,
#portal-dashboard .pd-grid,
#portal-dashboard .pd-stat-grid,
#global-search-page .gs-grid,
#website-qa-workspace .wq-layout {
    min-width: 0;
}


/* =========================================================
   LARGE LAPTOPS — 1280px TO 1439px
========================================================= */

@media (max-width: 1439px) and (min-width: 1280px) {

    :root {
        --portal-sidebar-width: 220px;
        --portal-page-gutter: 22px;
    }

    .brand-wrap {
        padding-left: 16px;
        padding-right: 16px;
    }

    .portal-nav {
        padding-left: 9px;
        padding-right: 9px;
    }

    .portal-nav-link {
        gap: 9px;
        padding: 9px 10px;
        font-size: 12px;
    }

    .nav-label {
        padding-left: 10px;
        font-size: 9px;
    }

    .workspace-switcher {
        margin-left: 10px;
        margin-right: 10px;
    }

    .sidebar-bottom {
        padding-left: 10px;
        padding-right: 10px;
    }

    .page-heading-row h1 {
        font-size: 25px;
    }

    #portal-dashboard .pd-stat-grid,
    #reports-page .rp-stat-grid {
        gap: 12px;
    }

    #reports-page .rp-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #reports-page .rp-filter-wide {
        grid-column: span 2;
    }

    #website-qa-workspace .wq-layout {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(330px, .8fr);
    }
}


/* =========================================================
   SMALL LAPTOP / TABLET LANDSCAPE — <= 1279px
   Sidebar becomes off-canvas to give the portal full width.
========================================================= */

@media (max-width: 1279px) {

    :root {
        --portal-sidebar-width: 258px;
        --portal-page-gutter: 22px;
    }

    .portal-sidebar {
        width: min(280px, 86vw);
        transform: translateX(-100%);
        transition: transform .22s ease;
        box-shadow: 15px 0 40px rgba(15, 23, 42, .18);
    }

    .portal-sidebar.show {
        transform: translateX(0);
    }

    .portal-main {
        width: 100%;
        margin-left: 0;
    }

    .mobile-menu-btn {
        display: grid !important;
        flex: 0 0 38px;
    }

    .sidebar-overlay {
        position: fixed;
        inset: 0;
        z-index: 1030;
        display: none;
        background: rgba(15, 23, 42, .48);
        backdrop-filter: blur(1px);
    }

    .sidebar-overlay.show {
        display: block;
    }

    .profile-info {
        display: none !important;
    }

    .profile-chevron {
        display: none;
    }

    .portal-header {
        height: 68px;
    }

    .brand-wrap {
        height: 68px;
    }

    .portal-content {
        padding-top: 24px;
    }

    .page-heading-row {
        margin-bottom: 20px;
    }

    #portal-dashboard .pd-grid,
    #website-qa-workspace .wq-layout {
        grid-template-columns: 1fr;
    }

    #reports-page .rp-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #reports-page .rp-filter-wide {
        grid-column: span 2;
    }

    #global-search-page .gs-grid {
        grid-template-columns: 1fr;
    }

    #global-search-page .gs-card-full {
        grid-column: auto;
    }
}


/* =========================================================
   TABLET — <= 991px
========================================================= */

@media (max-width: 991px) {

    :root {
        --portal-page-gutter: 18px;
    }

    .portal-content {
        padding-top: 20px;
        padding-bottom: 30px;
    }

    .portal-header {
        padding-left: 14px;
        padding-right: 14px;
    }

    .breadcrumb-wrap {
        gap: 7px;
        font-size: 12px;
    }

    .breadcrumb-muted {
        display: none;
    }

    .breadcrumb-wrap i {
        display: none;
    }

    .page-heading-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
    }

    .heading-actions {
        width: 100%;
    }

    .heading-actions .btn {
        flex: 1 1 auto;
    }

    .stat-grid,
    #portal-dashboard .pd-stat-grid,
    #portal-dashboard .pd-my-work,
    #reports-page .rp-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #reports-page .rp-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #reports-page .rp-filter-actions,
    #reports-page .rp-pagination {
        align-items: flex-start;
    }

    #reports-page .rp-bulk-form {
        align-items: stretch;
    }

    #reports-page .rp-bulk-field,
    #reports-page .rp-bulk-field-wide {
        flex: 1 1 220px;
        min-width: 0;
    }

    .panel-header {
        align-items: flex-start;
    }

    .portal-footer {
        padding-left: 18px;
        padding-right: 18px;
    }
}


/* =========================================================
   MOBILE — <= 767px
========================================================= */

@media (max-width: 767px) {

    :root {
        --portal-page-gutter: 14px;
    }

    .portal-header {
        height: 62px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .brand-wrap {
        height: 62px;
    }

    .portal-content {
        padding-top: 16px;
        padding-bottom: 24px;
    }

    .header-actions {
        gap: 2px;
    }

    .header-icon-btn,
    .mobile-menu-btn,
    .icon-btn {
        width: 36px;
        height: 36px;
    }

    .profile-trigger {
        padding-left: 4px;
    }

    .profile-avatar {
        width: 34px;
        height: 34px;
    }

    .page-heading-row {
        margin-bottom: 16px;
    }

    .page-heading-row h1 {
        font-size: 23px;
        letter-spacing: -.4px;
    }

    .page-heading-row p {
        font-size: 12px;
    }

    .page-eyebrow,
    .auth-kicker {
        font-size: 9px;
    }

    .stat-grid,
    #portal-dashboard .pd-stat-grid,
    #portal-dashboard .pd-my-work,
    #reports-page .rp-stat-grid {
        grid-template-columns: 1fr;
    }

    #reports-page .rp-filter-grid {
        grid-template-columns: 1fr;
    }

    #reports-page .rp-filter-wide {
        grid-column: auto;
    }

    #reports-page .rp-panel-header,
    #reports-page .rp-filter-actions,
    #reports-page .rp-pagination {
        align-items: stretch;
        flex-direction: column;
    }

    #reports-page .rp-filter-actions-left,
    #reports-page .rp-filter-actions-right {
        width: 100%;
    }

    #reports-page .rp-filter-actions .btn,
    #reports-page .rp-heading-actions .btn {
        flex: 1 1 auto;
    }

    #reports-page .rp-heading-actions {
        width: 100%;
    }

    #reports-page .rp-bulk-form {
        flex-direction: column;
        align-items: stretch;
    }

    #reports-page .rp-bulk-field,
    #reports-page .rp-bulk-field-wide,
    #reports-page .rp-bulk-selected,
    #reports-page .rp-bulk-form .btn {
        width: 100%;
    }

    #global-search-page .gs-search-form {
        flex-direction: column;
        align-items: stretch;
    }

    #global-search-page .gs-search-btn {
        width: 100%;
    }

    #website-qa-workspace .wq-header {
        flex-direction: column;
        align-items: flex-start;
    }

    #website-qa-workspace .wq-info-grid {
        grid-template-columns: 1fr;
    }

    #website-qa-workspace .wq-info-wide {
        grid-column: auto;
    }

    .panel-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .portal-footer {
        flex-direction: column;
        gap: 5px;
        padding: 14px;
        text-align: center;
    }
}


/* =========================================================
   SMALL MOBILE — <= 575px
========================================================= */

@media (max-width: 575px) {

    .breadcrumb-wrap strong {
        max-width: 170px;
        font-size: 11px;
    }

    .page-heading-row h1 {
        font-size: 21px;
    }

    .heading-actions {
        flex-direction: column;
    }

    .heading-actions .btn {
        width: 100%;
    }

    .btn {
        white-space: normal;
    }

    .panel-header,
    .panel-card {
        max-width: 100%;
    }

    .modal-dialog {
        margin-left: 10px;
        margin-right: 10px;
    }
}


/* =========================================================
   VERY SMALL MOBILE — <= 390px
========================================================= */

@media (max-width: 390px) {

    :root {
        --portal-page-gutter: 10px;
    }

    .breadcrumb-wrap strong {
        max-width: 130px;
    }

    .header-icon-btn,
    .mobile-menu-btn,
    .icon-btn {
        width: 34px;
        height: 34px;
    }

    .profile-avatar {
        width: 32px;
        height: 32px;
    }
}