/**
 * Quote Dashboard - Enhanced Design Token Styles
 *
 * This file contains design token-based enhancements to the quote dashboard.
 * These styles work in combination with the existing dashboard.css and provide
 * a more polished, professional B2B appearance using the Goya design system.
 *
 * Updated to match Goya parent theme design tokens v2.0.0
 *
 * @package Goya_Child
 * @subpackage Quote_Messaging
 * @version 2.0.0
 */

/* ========================================
 * TYPOGRAPHY & CONTENT HIERARCHY
 * ======================================== */

/* Dashboard container typography */
.qms-dashboard-container {
    font-family: var(--zeawin-font-family-base, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
    font-size: var(--zeawin-font-size-base, 16px);
    line-height: var(--zeawin-line-height-goya, 1.7);
    color: var(--zeawin-color-text-body, #212529);
}

/* Headings */
.qms-dashboard h1,
.qms-dashboard h2,
.qms-dashboard h3,
.qms-dashboard h4 {
    font-weight: var(--zeawin-font-weight-normal, 400);
    color: var(--zeawin-color-text-heading, #282828);
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.qms-dashboard h1 { font-size: 2rem; }
.qms-dashboard h2 { font-size: 1.75rem; }
.qms-dashboard h3 { font-size: 1.5rem; }
.qms-dashboard h4 { font-size: 1.25rem; }

/* Section headers */
.qms-section-title {
    font-size: var(--zeawin-font-size-xl, 20px);
    font-weight: var(--zeawin-font-weight-semibold, 600);
    color: var(--zeawin-color-text-heading, #282828);
    margin-bottom: var(--zeawin-spacing-4, 16px);
    padding-bottom: var(--zeawin-spacing-3, 12px);
    border-bottom: 2px solid var(--zeawin-color-gray-200, #e9ecef);
}

/* Body text */
.qms-dashboard p {
    margin-bottom: 1rem;
    line-height: var(--zeawin-line-height-goya, 1.7);
}

/* Small text */
.qms-text-small {
    font-size: var(--zeawin-font-size-sm, 14px);
    color: var(--zeawin-color-text-secondary, #6c757d);
    line-height: var(--zeawin-line-height-goya, 1.7);
}

/* Muted text */
.qms-text-muted {
    color: var(--zeawin-color-text-muted, #999999);
    font-size: var(--zeawin-font-size-sm, 14px);
}

/* ========================================
 * END TYPOGRAPHY & CONTENT HIERARCHY
 * ======================================== */

/* Full-width dashboard container */
.qms-dashboard-container {
    width: 100%;
    max-width: 100%;
    margin-top: var(--zeawin-spacing-6, 24px);
    margin-bottom: var(--zeawin-spacing-8, 32px);
    padding-left: var(--zeawin-layout-container-padding, 20px);
    padding-right: var(--zeawin-layout-container-padding, 20px);
}

/* Enhanced Statistics Grid - Full Width */
.zeawin-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--zeawin-spacing-5, 20px);
    margin-bottom: var(--zeawin-spacing-8, 32px);
    width: 100%;
    max-width: 100%;
}

/* Enhanced Stat Cards */
.qms-stat-card.zeawin-card {
    background: var(--zeawin-color-white, #ffffff);
    border: 1px solid var(--zeawin-color-gray-200, #e9ecef);
    border-radius: var(--zeawin-radius-lg, 12px);
    padding: var(--zeawin-spacing-5, 20px);
    box-shadow: var(--zeawin-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.05));
    transition: all var(--zeawin-transition-interaction, 0.2s ease-out);
    display: flex;
    align-items: center;
    gap: var(--zeawin-spacing-4, 16px);
    position: relative;
    overflow: hidden;
}

/* Subtle gradient overlay */
.qms-stat-card.zeawin-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg,
        var(--zeawin-color-primary, #282828) 0%,
        var(--zeawin-color-primary-dark, #1a1a1a) 100%);
    opacity: 0;
    transition: opacity var(--zeawin-transition-duration, 200ms) ease;
}

.qms-stat-card.zeawin-card:hover::before {
    opacity: 1;
}

.qms-stat-card.zeawin-card:hover {
    box-shadow: var(--zeawin-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.08));
    transform: translateY(-2px);
    border-color: var(--zeawin-color-primary-light, #f8f9fa);
}

/* Stat Card Color Variants - refined palette */
.qms-stat-card.qms-stat-pending {
    border-left: 4px solid var(--zeawin-color-pending, #ffc107);
    background: linear-gradient(135deg,
        var(--zeawin-color-pending-bg, #fff8e1) 0%,
        var(--zeawin-color-white, #ffffff) 100%);
}

.qms-stat-card.qms-stat-approved {
    border-left: 4px solid var(--zeawin-color-approved, #28a745);
    background: linear-gradient(135deg,
        var(--zeawin-color-approved-bg, #e8f5e9) 0%,
        var(--zeawin-color-white, #ffffff) 100%);
}

.qms-stat-card.qms-stat-active {
    border-left: 4px solid var(--zeawin-color-active, #17a2b8);
    background: linear-gradient(135deg,
        var(--zeawin-color-active-bg, #e1f5fe) 0%,
        var(--zeawin-color-white, #ffffff) 100%);
}

.qms-stat-card.qms-stat-total {
    border-left: 4px solid var(--zeawin-color-text-heading, #282828);
    background: linear-gradient(135deg,
        var(--zeawin-color-gray-100, #f8f9fa) 0%,
        var(--zeawin-color-white, #ffffff) 100%);
}

/* Stat Icon - improved styling */
.qms-stat-icon {
    font-size: var(--zeawin-font-size-3xl, 28px);
    line-height: 1;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--zeawin-color-white, #ffffff);
    border-radius: var(--zeawin-radius-lg, 12px);
    flex-shrink: 0;
    box-shadow: var(--zeawin-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.08));
    border: 1px solid var(--zeawin-color-gray-100, #f8f9fa);
    position: relative;
    z-index: 1;
}

/* Stat Content */
.qms-stat-content {
    flex: 1;
    min-width: 0;
}

.qms-stat-value {
    font-size: var(--zeawin-font-size-3xl, 28px);
    font-weight: var(--zeawin-font-weight-bold, 700);
    line-height: 1.2;
    color: var(--zeawin-color-text-heading, #282828);
    margin-bottom: var(--zeawin-spacing-1, 4px);
    font-feature-settings: 'tnum';
    font-variant-numeric: tabular-nums;
}

.qms-stat-label {
    font-size: var(--zeawin-font-size-sm, 14px);
    color: var(--zeawin-color-text-secondary, #6c757d);
    font-weight: var(--zeawin-font-weight-medium, 500);
    line-height: var(--zeawin-line-height-goya, 1.7);
    text-transform: none;
    letter-spacing: normal;
}

/* Quick Actions */
.zeawin-quick-actions {
    display: flex;
    gap: var(--zeawin-spacing-4, 16px);
    margin-bottom: var(--zeawin-spacing-6, 24px);
    flex-wrap: wrap;
}

/* Enhanced Buttons - Goya Style */
.zeawin-btn,
.woocommerce-button.button,
.qms-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--zeawin-spacing-2, 8px);
    padding: 12px 28px;
    background: var(--zeawin-color-primary, #282828);
    color: var(--zeawin-color-white, #ffffff);
    border: none;
    border-radius: 0; /* Goya uses sharp corners */
    font-size: var(--zeawin-font-size-base, 16px);
    font-weight: var(--zeawin-font-weight-normal, 400);
    line-height: var(--zeawin-line-height-goya, 1.7);
    text-decoration: none;
    cursor: pointer;
    transition: all var(--zeawin-transition-interaction, 0.2s ease-out);
    box-shadow: none;
    text-transform: none;
    letter-spacing: normal;
}

.zeawin-btn:hover,
.woocommerce-button.button:hover,
.qms-btn-primary:hover {
    background: var(--zeawin-color-primary-dark, #1a1a1a);
    opacity: 0.82; /* Goya's hover opacity */
    transform: translateY(-1px);
    box-shadow: var(--zeawin-shadow-sm, 0 2px 8px rgba(40, 40, 40, 0.15));
}

.zeawin-btn:active,
.woocommerce-button.button:active,
.qms-btn-primary:active {
    transform: translateY(0);
    box-shadow: none;
}

/* Focus state for accessibility */
.zeawin-btn:focus,
.woocommerce-button.button:focus,
.qms-btn-primary:focus {
    outline: none;
    box-shadow: var(--zeawin-focus-ring, 0 0 0 3px rgba(40, 40, 40, 0.3));
}

/* Secondary Button */
.zeawin-btn-secondary,
.qms-btn-secondary {
    background: transparent;
    color: var(--zeawin-color-text-heading, #282828);
    border: 1px solid var(--zeawin-color-border, #dee2e6);
    border-radius: 0;
}

.zeawin-btn-secondary:hover,
.qms-btn-secondary:hover {
    background: var(--zeawin-color-gray-100, #f8f9fa);
    border-color: var(--zeawin-color-text-heading, #282828);
    opacity: 1;
}

/* Small button variant */
.qms-btn-small,
.zeawin-btn-sm {
    padding: 8px 16px;
    font-size: var(--zeawin-font-size-sm, 14px);
}

/* Disabled state */
.zeawin-btn:disabled,
.woocommerce-button.button:disabled,
.qms-btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* Enhanced Tabs */
.qms-tabs.zeawin-tabs {
    display: flex;
    gap: var(--zeawin-spacing-2, 8px);
    margin-bottom: var(--zeawin-spacing-5, 20px);
    border-bottom: 2px solid var(--zeawin-color-gray-200, #e9ecef);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.qms-tab-button {
    padding: var(--zeawin-spacing-3, 12px) var(--zeawin-spacing-4, 16px);
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--zeawin-color-text-secondary, #666666);
    font-size: var(--zeawin-text-base, 16px);
    font-weight: var(--zeawin-font-weight-medium, 500);
    cursor: pointer;
    transition: all var(--zeawin-transition-base, 0.2s ease);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: var(--zeawin-spacing-2, 8px);
    margin-bottom: -2px;
}

.qms-tab-button:hover {
    color: var(--zeawin-color-accent, #282828);
    background: var(--zeawin-color-gray-100, #f8f9fa);
}

.qms-tab-button.active {
    color: var(--zeawin-color-accent, #282828);
    border-bottom-color: var(--zeawin-color-accent, #282828);
    font-weight: var(--zeawin-font-weight-semibold, 600);
}

.qms-tab-count {
    background: var(--zeawin-color-gray-200, #e9ecef);
    color: var(--zeawin-color-text-heading, #282828);
    padding: 2px 8px;
    border-radius: var(--zeawin-border-radius-pill, 50px);
    font-size: var(--zeawin-font-size-xs, 12px);
    font-weight: var(--zeawin-font-weight-semibold, 600);
}

.qms-tab-button.active .qms-tab-count {
    background: var(--zeawin-color-accent, #282828);
    color: var(--zeawin-color-white, #ffffff);
}

/* Enhanced Quote Cards */
.qms-quote-list .qms-quote-card.zeawin-card {
    background: var(--zeawin-color-white, #ffffff);
    border: 1px solid var(--zeawin-color-gray-200, #e9ecef);
    border-radius: var(--zeawin-radius-md, 8px);
    padding: var(--zeawin-spacing-5, 20px);
    margin-bottom: var(--zeawin-spacing-4, 16px);
    box-shadow: var(--zeawin-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
    transition: all var(--zeawin-transition-interaction, 0.2s ease-out);
    position: relative;
}

.qms-quote-list .qms-quote-card.zeawin-card:hover {
    box-shadow: var(--zeawin-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.08));
    border-color: var(--zeawin-color-primary-light, #f8f9fa);
    transform: translateY(-1px);
}

/* Unread quote indicator */
.qms-quote-list .qms-quote-card.zeawin-card.unread {
    border-left: 4px solid var(--zeawin-color-primary, #282828);
    background: linear-gradient(135deg,
        var(--zeawin-color-primary-light, #f8f9fa) 0%,
        var(--zeawin-color-white, #ffffff) 20%);
}

/* Quote Card Header */
.qms-quote-card.zeawin-card .qms-quote-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--zeawin-spacing-4, 16px);
    gap: var(--zeawin-spacing-3, 12px);
}

.qms-quote-card.zeawin-card .qms-quote-number {
    font-size: var(--zeawin-font-size-lg, 18px);
    font-weight: var(--zeawin-font-weight-semibold, 600);
    color: var(--zeawin-color-text-heading, #282828);
    margin-bottom: var(--zeawin-spacing-1, 4px);
    line-height: var(--zeawin-line-height-goya, 1.7);
}

.qms-quote-card.zeawin-card .qms-quote-date {
    font-size: var(--zeawin-font-size-sm, 14px);
    color: var(--zeawin-color-text-muted, #999999);
    line-height: var(--zeawin-line-height-goya, 1.7);
}

/* Quote Card Actions */
.qms-quote-card.zeawin-card .qms-quote-actions {
    display: flex;
    gap: var(--zeawin-spacing-2, 8px);
}

.qms-quote-card.zeawin-card .qms-btn-small {
    padding: 8px 16px;
    font-size: var(--zeawin-font-size-sm, 14px);
    border-radius: 0;
    background: var(--zeawin-color-gray-100, #f8f9fa);
    color: var(--zeawin-color-text-heading, #282828);
    text-decoration: none;
    transition: all var(--zeawin-transition-interaction, 0.2s ease-out);
    border: 1px solid var(--zeawin-color-gray-200, #e9ecef);
}

.qms-quote-card.zeawin-card .qms-btn-small:hover {
    background: var(--zeawin-color-gray-200, #e9ecef);
    border-color: var(--zeawin-color-gray-300, #dee2e6);
}

.qms-quote-card.zeawin-card .qms-btn-primary {
    background: var(--zeawin-color-primary, #282828);
    color: var(--zeawin-color-white, #ffffff);
    border-color: var(--zeawin-color-primary, #282828);
}

.qms-quote-card.zeawin-card .qms-btn-primary:hover {
    opacity: 0.82;
}

/* Status badges - refined */
.qms-quote-card.zeawin-card .qms-quote-status {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: var(--zeawin-radius-full, 999px);
    font-size: var(--zeawin-font-size-xs, 12px);
    font-weight: var(--zeawin-font-weight-semibold, 600);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1;
}

.qms-quote-card.zeawin-card .qms-quote-status.pending {
    background: var(--zeawin-color-pending-bg, #fff8e1);
    color: var(--zeawin-color-pending, #ffc107);
    border: 1px solid var(--zeawin-color-pending, #ffc107);
}

.qms-quote-card.zeawin-card .qms-quote-status.approved {
    background: var(--zeawin-color-approved-bg, #e8f5e9);
    color: var(--zeawin-color-approved, #28a745);
    border: 1px solid var(--zeawin-color-approved, #28a745);
}

.qms-quote-card.zeawin-card .qms-quote-status.active {
    background: var(--zeawin-color-active-bg, #e1f5fe);
    color: var(--zeawin-color-active, #17a2b8);
    border: 1px solid var(--zeawin-color-active, #17a2b8);
}

.qms-quote-card.zeawin-card .qms-quote-status.declined {
    background: var(--zeawin-color-declined-bg, #ffebee);
    color: var(--zeawin-color-declined, #dc3545);
    border: 1px solid var(--zeawin-color-declined, #dc3545);
}

/* Quote Card Body */
.qms-quote-card.zeawin-card .qms-quote-body {
    padding-top: var(--zeawin-spacing-4, 16px);
    border-top: 1px solid var(--zeawin-color-gray-100, #f8f9fa);
}

.qms-quote-card.zeawin-card .qms-quote-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--zeawin-spacing-3, 12px);
    margin-bottom: var(--zeawin-spacing-3, 12px);
}

.qms-quote-card.zeawin-card .qms-quote-items {
    font-size: var(--zeawin-font-size-sm, 14px);
    color: var(--zeawin-color-text-secondary, #6c757d);
    line-height: var(--zeawin-line-height-goya, 1.7);
}

.qms-quote-card.zeawin-card .qms-quote-total {
    font-size: var(--zeawin-font-size-lg, 18px);
    font-weight: var(--zeawin-font-weight-bold, 700);
    color: var(--zeawin-color-primary, #282828);
    font-feature-settings: 'tnum';
    font-variant-numeric: tabular-nums;
}

/* Quote Card Messages */
.qms-quote-card.zeawin-card .qms-quote-messages {
    margin-top: var(--zeawin-spacing-3, 12px);
}

.qms-quote-card.zeawin-card .qms-message-preview {
    font-size: var(--zeawin-font-size-sm, 14px);
    color: var(--zeawin-color-text-secondary, #777777);
    line-height: var(--zeawin-line-height-relaxed, 1.7);
}

.qms-quote-card.zeawin-card .qms-unread-indicator {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--zeawin-color-primary, #282828);
    border-radius: 50%;
    margin-left: var(--zeawin-spacing-2, 8px);
    animation: qms-pulse 2s infinite;
}

@keyframes qms-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* Empty State */
.qms-empty-state {
    text-align: center;
    padding: var(--zeawin-spacing-10, 40px) var(--zeawin-spacing-5, 20px);
    background: var(--zeawin-color-gray-50, #f8f9fa);
    border-radius: var(--zeawin-radius-lg, 12px);
    border: 2px dashed var(--zeawin-color-gray-200, #e9ecef);
}

.qms-empty-state .qms-empty-icon {
    font-size: 48px;
    margin-bottom: var(--zeawin-spacing-4, 16px);
    opacity: 0.4;
    display: block;
}

.qms-empty-state .qms-empty-title {
    font-size: var(--zeawin-font-size-xl, 20px);
    font-weight: var(--zeawin-font-weight-semibold, 600);
    color: var(--zeawin-color-text-heading, #282828);
    margin-bottom: var(--zeawin-spacing-2, 8px);
}

.qms-empty-state .qms-empty-message {
    font-size: var(--zeawin-font-size-base, 16px);
    color: var(--zeawin-color-text-secondary, #6c757d);
    margin-bottom: var(--zeawin-spacing-5, 20px);
    line-height: var(--zeawin-line-height-goya, 1.7);
}

/* Form inputs */
.woocommerce-Input,
.woocommerce-form__input,
input[type="text"],
input[type="email"],
input[type="number"],
select,
textarea {
    width: 100%;
    padding: 10px 16px;
    background: var(--zeawin-color-white, #ffffff);
    border: 1px solid var(--zeawin-color-border, #dee2e6);
    border-radius: 0;
    font-size: var(--zeawin-font-size-base, 16px);
    line-height: var(--zeawin-line-height-goya, 1.7);
    color: var(--zeawin-color-text-body, #212529);
    transition: border-color var(--zeawin-transition-interaction, 0.2s ease-out);
}

.woocommerce-Input:hover,
input[type="text"]:hover,
select:hover,
textarea:hover {
    border-color: var(--zeawin-color-gray-400, #ced4da);
}

.woocommerce-Input:focus,
input[type="text"]:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--zeawin-color-primary, #282828);
    box-shadow: var(--zeawin-focus-ring, 0 0 0 3px rgba(40, 40, 40, 0.1));
}

/* Form labels */
.woocommerce-form__label,
label {
    display: block;
    margin-bottom: var(--zeawin-spacing-2, 8px);
    font-size: var(--zeawin-font-size-sm, 14px);
    font-weight: var(--zeawin-font-weight-medium, 500);
    color: var(--zeawin-color-text-heading, #282828);
    line-height: var(--zeawin-line-height-goya, 1.7);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .qms-dashboard-container {
        padding-left: var(--zeawin-layout-container-padding-mobile, 15px);
        padding-right: var(--zeawin-layout-container-padding-mobile, 15px);
    }

    .zeawin-stats-grid {
        grid-template-columns: 1fr;
    }

    .zeawin-quick-actions {
        flex-direction: column;
    }

    .zeawin-btn {
        width: 100%;
        justify-content: center;
    }

    .qms-quote-card.zeawin-card .qms-quote-header {
        flex-direction: column;
    }

    .qms-quote-card.zeawin-card .qms-quote-actions {
        width: 100%;
        justify-content: flex-start;
    }
}

/* Loading State */
.qms-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--zeawin-spacing-8, 32px);
}

.qms-loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--zeawin-color-gray-200, #e9ecef);
    border-top-color: var(--zeawin-color-primary, #282828);
    border-radius: 50%;
    animation: qms-spin 1s linear infinite;
}

@keyframes qms-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Loading spinner (small variant) */
.qms-loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid var(--zeawin-color-gray-200, #e9ecef);
    border-top-color: var(--zeawin-color-primary, #282828);
    border-radius: 50%;
    animation: qms-spin 0.6s linear infinite;
}

/* Loading button state */
.zeawin-btn.loading,
.qms-btn-loading {
    position: relative;
    color: transparent;
    pointer-events: none;
}

.zeawin-btn.loading::after,
.qms-btn-loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    border: 2px solid var(--zeawin-color-white, #ffffff);
    border-top-color: transparent;
    border-radius: 50%;
    animation: qms-spin 0.6s linear infinite;
}

/* Welcome Banner Enhancement */
.qms-welcome-banner {
    background: linear-gradient(135deg, var(--zeawin-color-accent, #282828) 0%, #1a1a1a 100%);
    color: var(--zeawin-color-white, #ffffff);
    padding: var(--zeawin-spacing-6, 24px) var(--zeawin-spacing-8, 32px);
    border-radius: var(--zeawin-border-radius-lg, 12px);
    margin-bottom: var(--zeawin-spacing-6, 24px);
    box-shadow: 0 4px 12px rgba(40, 40, 40, 0.2);
}

.qms-welcome-banner h2 {
    margin: 0 0 var(--zeawin-spacing-2, 8px) 0;
    font-size: var(--zeawin-font-size-2xl, 24px);
    font-weight: var(--zeawin-font-weight-bold, 700);
}

.qms-welcome-banner p {
    margin: 0;
    opacity: 0.9;
    font-size: var(--zeawin-font-size-base, 16px);
    line-height: var(--zeawin-line-height-relaxed, 1.7);
}



/* Dashboard (logged-in) full-width layout */
body.logged-in.woocommerce-account .container,
body.logged-in.woocommerce-account div.container,
body.logged-in.woocommerce-account .site-content > .container,
body.logged-in.woocommerce-account .post-content > .container {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
}

body.logged-in.woocommerce-account .post-content,
body.logged-in.woocommerce-account .site-content {
    max-width: 100% !important;
    width: 100% !important;
}

/* Prevent navigation from becoming unusably wide */
.woocommerce-account .woocommerce-MyAccount-navigation {
    max-width: 280px !important;
    flex-shrink: 0;
    width: 280px;
}

/* Two-column layout for WooCommerce account pages */
.woocommerce-account-layout-grid {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    width: 100%;
    max-width: 100%;
    position: relative;
}

/* Navigation container - refined styling with FIXED POSITION */
.woocommerce-account .woocommerce-MyAccount-navigation {
    position: fixed !important; /* Fixed = truly stationary, doesn't move at all */
    left: calc(20px + var(--container-padding-offset, 0px));
    top: 120px; /* Initial value, JavaScript will calculate proper header offset */
    align-self: flex-start;
    max-height: calc(100vh - 160px); /* Initial value, will be adjusted */
    overflow-y: auto;
    z-index: 1000;
    width: 280px;
    transition: top 0.3s ease, max-height 0.3s ease; /* Smooth positioning transitions */

    /* Custom scrollbar */
    scrollbar-width: thin;
    scrollbar-color: var(--zeawin-color-gray-300, #dee2e6) transparent;
}

/* Smooth scrolling for navigation */
.woocommerce-account .woocommerce-MyAccount-navigation::-webkit-scrollbar {
    width: 6px;
}

.woocommerce-account .woocommerce-MyAccount-navigation::-webkit-scrollbar-track {
    background: var(--zeawin-color-gray-100, #f8f9fa);
    border-radius: 3px;
}

.woocommerce-account .woocommerce-MyAccount-navigation::-webkit-scrollbar-thumb {
    background: var(--zeawin-color-gray-300, #dee2e6);
    border-radius: 3px;
}

.woocommerce-account .woocommerce-MyAccount-navigation::-webkit-scrollbar-thumb:hover {
    background: var(--zeawin-color-gray-400, #ced4da);
}

.woocommerce-account .woocommerce-MyAccount-navigation a:focus {
    outline: none;
    box-shadow: var(--zeawin-focus-ring, 0 0 0 3px rgba(40, 40, 40, 0.3));
}


}


@media (max-width: 768px) {

    /* Stack vertically on mobile */
    .woocommerce-account-layout-grid {
        flex-direction: column;
        gap: 30px;
    }

    .woocommerce-account .woocommerce-MyAccount-navigation {
        max-width: 100% !important;
        width: 100%;
        margin-bottom: var(--zeawin-spacing-4, 16px);
        position: static !important; /* Not fixed on mobile */
        left: auto !important;
        margin-left: 0 !important;
        max-height: none;
        overflow-y: visible;
        padding: var(--zeawin-spacing-3, 12px);
    }

    .woocommerce-account .woocommerce-MyAccount-navigation a {
        padding: 10px 12px;
    }

    .woocommerce-MyAccount-content {
        margin-left: 0 !important;
    }
}



/* ========================================
 * ACCESSIBILITY IMPROVEMENTS
 * ======================================== */

/* Skip to content link for keyboard users */
.qms-skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--zeawin-color-primary, #282828);
    color: var(--zeawin-color-white, #ffffff);
    padding: 8px 16px;
    text-decoration: none;
    z-index: 10000;
}

.qms-skip-link:focus {
    top: 0;
}

/* Focus visible for keyboard navigation */
*:focus-visible {
    outline: 2px solid var(--zeawin-color-primary, #282828);
    outline-offset: 2px;
}

/* Ensure focus states on interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--zeawin-color-primary, #282828);
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .qms-stat-card.zeawin-card {
        border-width: 2px;
    }

    .zeawin-btn,
    .woocommerce-button.button {
        border: 2px solid currentColor;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ========================================
 * END ACCESSIBILITY IMPROVEMENTS
 * ======================================== */

/* Navigation container - minimal Goya My Account style */
.woocommerce-account .woocommerce-MyAccount-navigation {
    position: fixed !important;
    left: calc(20px + var(--container-padding-offset, 0px));
    top: 120px;
    align-self: flex-start;
    max-height: calc(100vh - 160px);
    overflow-y: auto;
    z-index: 1000;
    width: 280px;
    transition: top 0.3s ease, max-height 0.3s ease;
    scrollbar-width: thin;
    scrollbar-color: var(--zeawin-color-gray-300, #dee2e6) transparent;
}

.woocommerce-account .woocommerce-MyAccount-navigation a {
    display: inline-flex;
    padding: 0.1em 0;
    color: var(--zeawin-color-text-secondary, #6c757d);
    font-size: 1.1em;
    font-weight: 400;
    line-height: 1.7;
    text-decoration: none;
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
}

.woocommerce-account .woocommerce-MyAccount-navigation a:hover {
    color: var(--zeawin-color-text-heading, #282828);
    text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
    color: var(--zeawin-color-text-heading, #282828);
    font-weight: 400;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: var(--zeawin-color-text-heading, #282828);
}

.woocommerce-account .woocommerce-MyAccount-navigation a:focus {
    outline: 2px solid var(--zeawin-color-text-heading, #282828);
    outline-offset: 2px;
}


/* Dashboard (logged-in) — hide footer */
body.logged-in.woocommerce-account #colophon,
body.logged-in.woocommerce-account .zeawin-footer,
body.logged-in.woocommerce-account .site-footer,
body.logged-in.woocommerce-account footer {
    display: none !important;
}
