body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}
/* Unified portal action button style */
.pss-portal-action-btn {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 5px;
    background: var(--pss-primary, #38445a);
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s;
}
.pss-portal-action-btn:hover {
    background: var(--pss-primary-dark, #2b323d);
    color: #fff;
}
.pss-portal-action-btn--pulse {
    animation: pss-portal-pulse 1.2s infinite alternate;
}
@keyframes pss-portal-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(56, 68, 90, 0.5);
    }
    100% {
        box-shadow: 0 0 0 8px rgba(56, 68, 90, 0.0);
    }
}
/* Customer Hub CSS - Extracted from templates/customer-hub.php */

.pss-customer-hub { 
    width: 100%;
    max-width: 100%;
    padding: 0 20px 20px 20px;
    box-sizing: border-box;
    display: block;
}

body {
    overflow-x: hidden;
}

/* WordPress Grid Block Support */
.wp-block-group.wp-block-group {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
    width: 100% !important;
}

.wp-block-group.has-child-selected {
    grid-template-columns: repeat(3, 1fr) !important;
}

/* Ensure blocks in grid respect their grid-column styling */
.wp-block-group > * {
    box-sizing: border-box;
    min-width: 0;
}

.pss-hub-header { padding: 28px; border-radius: 12px; background: linear-gradient(135deg, #2b323d 0%, #3a4454 100%); color: #fff; margin-bottom: 24px; }
.pss-hub-header h1 { margin: 0 0 8px 0; font-size: 28px; }
.pss-hub-header p { margin: 0; opacity: 0.8; }
.pss-hub-tier { margin-top: 10px; display: inline-block; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,0.15); font-size: 12px; letter-spacing: 0.5px; text-transform: uppercase; }
.pss-hub-statistics { margin-bottom: 32px; grid-column: 1 / -1; }

/* Grid system */
.pss-hub-grid { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 24px; 
    width: 100%;
    grid-auto-flow: dense;
}

/* Column span classes - for blocks with inline styles */
.pss-block-module-spending-lists {
    grid-column: span 2 !important;
}

.pss-span-full,
.pss-module.pss-span-full {
    grid-column: 1 / -1 !important;
    width: 100% !important;
}

.pss-span-1,
.pss-module.pss-span-1,
.pss-customer-hub.pss-span-1 {
    grid-column: span 1 !important;
}

.pss-span-2,
.pss-module.pss-span-2,
.pss-customer-hub.pss-span-2 {
    grid-column: span 2 !important;
}

.pss-span-3,
.pss-module.pss-span-3,
.pss-customer-hub.pss-span-3 {
    grid-column: span 3 !important;
}
}
.pss-customer-hub.pss-span-full,
.pss-span-full { 
    grid-column: 1 / -1 !important; 
    width: 100% !important; /* For non-grid layouts */
    display: block !important;
}

/* Grid-specific overrides */
.is-layout-grid > .pss-span-1,
.pss-hub-grid > .pss-span-1 { width: auto !important; }
.is-layout-grid > .pss-span-2,
.pss-hub-grid > .pss-span-2 { width: auto !important; }
.is-layout-grid > .pss-span-3,
.pss-hub-grid > .pss-span-3 { width: auto !important; }
.is-layout-grid > .pss-span-full,
.pss-hub-grid > .pss-span-full { width: auto !important; }

/* Mobile: 1 column */
@media (max-width: 768px) {
    .pss-hub-grid { 
        grid-template-columns: 1fr; 
    }
    /* Mobile: all blocks full width */
    .pss-customer-hub.pss-span-1,
    .pss-customer-hub.pss-span-2,
    .pss-customer-hub.pss-span-3,
    .pss-customer-hub.pss-span-full,
    .pss-span-1,
    .pss-span-2,
    .pss-span-3,
    .pss-span-full {
        width: 100% !important;
    }
}

/* Tablet: 2 columns */
@media (min-width: 769px) and (max-width: 1024px) {
    .pss-hub-grid { 
        grid-template-columns: repeat(2, 1fr); 
    }
}

.pss-hub-empty { background: #fff; border: 1px solid #e0e3e7; padding: 24px; border-radius: 10px; text-align: center; color: #2b323d; }
.pss-module { background: #fff; border: 1px solid #e0e3e7; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 6px rgba(0,0,0,0.06); color: #2b323d; }

.pss-module-header { padding: 14px 18px; background: #f6f7f7; border-bottom: 1px solid #e0e3e7; display: flex; justify-content: space-between; align-items: center; color: #2b323d; }
.pss-module-header h2 { margin: 0; font-size: 16px; color: #2b323d; }
.pss-module-body { padding: 18px; color: #4a5568; }
.pss-module-table { width: 100%; border-collapse: collapse; color: #2b323d; }
.pss-module-table th, .pss-module-table td { text-align: left; padding: 8px 6px; border-bottom: 1px solid #eef0f2; font-size: 13px; color: #2b323d; }
.pss-module-table th { color: #55606f; font-weight: 600; }
.pss-module-empty { color: #6b7280; font-size: 14px; }
.pss-module-link { display: inline-block; margin-top: 10px; color: #3a4454; text-decoration: none; font-weight: 600; }
.pss-module-link:hover { text-decoration: underline; }

/* Modern Template Overrides (Applied globally for consistency) */
.pss-customer-hub .pss-hub-header { background: rgba(30,35,45,0.95); backdrop-filter: blur(10px); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }
.pss-customer-hub .pss-module { border: none !important; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important; }

/* Forces Dark Headers with !important */
.pss-customer-hub .pss-module-header { 
    background-color: #2b323d !important; 
    border-bottom: none !important; 
    padding-top: 18px; 
    padding-bottom: 18px; 
    color: #fff !important; 
}

/* FIX: Force white text for header title specifically */
.pss-customer-hub .pss-module-header h2 { 
    font-weight: 700; 
    letter-spacing: -0.025em; 
    font-size: 18px; 
    color: #fff !important; 
    margin: 0; 
}
.pss-customer-hub .pss-module-header span { color: rgba(255,255,255,0.9) !important; background: rgba(255,255,255,0.15) !important; padding: 2px 10px; border-radius: 99px; font-size: 12px; }

.pss-customer-hub .pss-stat-card { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); border: 1px solid #f0f0f0; }

/* Gutenberg Block Alignment & Width Controls */
.pss-customer-hub.alignleft {
    float: left;
    margin-right: 2em;
    margin-bottom: 1em;
}

.pss-customer-hub.alignright {
    float: right;
    margin-left: 2em;
    margin-bottom: 1em;
}

.pss-customer-hub.aligncenter {
    margin-left: auto;
    margin-right: auto;
    clear: both;
}

.pss-customer-hub.alignwide {
    max-width: var(--wp--style--global--wide-size, 1200px);
    margin-left: auto;
    margin-right: auto;
}

.pss-customer-hub.alignfull {
    max-width: 100%;
    width: 100%;
}

/* Clear floats for aligned elements */
.pss-customer-hub.alignleft::after,
.pss-customer-hub.alignright::after {
    content: "";
    display: table;
    clear: both;
}

/* Responsive alignment */
@media (max-width: 768px) {
    .pss-customer-hub.alignleft,
    .pss-customer-hub.alignright {
        float: none;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ===== Portal Gutenberg Grid — Mobile & Tablet ===== */
/* Override the forced 3-column grid for customer portal on small screens */
@media (max-width: 768px) {
    body.pss-portal-active .wp-block-group.wp-block-group {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    /* Reset span overrides — all blocks go full-width on mobile */
    body.pss-portal-active .pss-block-module-spending-lists,
    body.pss-portal-active .pss-span-2,
    body.pss-portal-active .pss-span-3,
    body.pss-portal-active .pss-span-full {
        grid-column: auto !important;
    }
    /* Tighten main content padding */
    body.pss-portal-active main.wp-block-group {
        padding-bottom: 24px !important;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    body.pss-portal-active .wp-block-group.wp-block-group {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    body.pss-portal-active .pss-block-module-spending-lists,
    body.pss-portal-active .pss-span-3,
    body.pss-portal-active .pss-span-full {
        grid-column: auto !important;
    }
}