/* =============================================================================
   COMPREHENSIVE LANDSCAPE RESPONSIVE STYLES - mobile-landscape.css
   Site-wide landscape-specific optimizations for JobJay
   Designed to work alongside mobile-responsive.css
   ============================================================================= */

/* =============================================================================
   BASE LANDSCAPE OPTIMIZATIONS (small screens only - limited height)
   ============================================================================= */

@media (orientation: landscape) and (max-height: 600px) and (max-width: 1247px) {
    /* Compress header significantly for landscape */
    .header-content {
        height: 45px;
        padding: 0 0.75rem;
    }
    
    #main-logo {
        width: 100px;
        height: auto;
        max-height: 25px;
        object-fit: contain;
    }
    
    .menu-toggle {
        width: 32px;
        height: 32px;
        font-size: 18px;
    }
    
    /* Compact mobile menu */
    #mobile-menu {
        padding: 0.5rem;
    }
    
    #mobile-menu ul li a {
        padding: 0.5rem 0;
        font-size: 0.9rem;
    }
    
    /* Dashboard optimizations */
    .dashboard-container {
        padding: 0.5rem;
    }
    
    .dashboard-header {
        padding: 0.75rem;
        margin-bottom: 0.75rem;
    }
    
    .dashboard-header h1 {
        font-size: 1.2rem;
        margin-bottom: 0.25rem;
    }
    
    .dashboard-subtitle {
        font-size: 0.9rem;
    }
    
    /* Compact dashboard cards */
    .dashboard-card {
        padding: 0.75rem;
        border-radius: 6px;
    }
    
    .dashboard-card h3 {
        font-size: 1rem;
        margin-bottom: 0.75rem;
    }
    
    /* Action buttons more compact */
    .action-btn {
        min-height: 36px;
        padding: 0.5rem 0.75rem;
        font-size: 0.85rem;
        gap: 0.375rem;
    }
    
    /* Stats grid adjustments */
    .stat-item {
        padding: 0.5rem;
        border-radius: 4px;
    }
    
    .stat-number {
        font-size: 1.2rem;
    }
    
    .stat-label {
        font-size: 0.75rem;
    }
    
    /* Welcome section compact */
    .welcome {
        padding: 1rem 0.75rem;
    }
    
    .welcome h1 {
        font-size: 1.3rem;
        margin-bottom: 0.5rem;
    }
    
    /* Profile stats compact */
    .profile-stat-item {
        padding: 0.5rem 0;
        min-height: 36px;
    }
    
    .profile-stat-label,
    .profile-stat-value {
        font-size: 0.8rem;
    }
    
    .profile-edit-btn {
        min-height: 36px;
        padding: 0.5rem 0.75rem;
        font-size: 0.9rem;
    }
    
    /* Form elements more compact */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="time"],
    textarea,
    select {
        min-height: 36px;
        padding: 0.5rem;
        font-size: 14px;
    }
    
    /* CTA buttons compact */
    .cta-btn {
        min-height: 36px;
        font-size: 0.9rem;
        padding: 0.5rem 1rem;
    }
    
    /* Footer compact */
    footer {
        padding: 0.75rem 0;
    }
    
    .extra-menu ul li a {
        padding: 0.375rem 0.5rem;
        font-size: 0.8rem;
    }
    
    .footer-bottom p {
        font-size: 0.75rem;
        padding: 0 0.5rem;
    }
    
    /* Announcement banner compact */
    .announcement-banner {
        padding: 0.5rem 2rem 0.5rem 0.75rem;
    }
    
    .announcement-text {
        font-size: 0.8rem;
    }
    
    .announcement-button {
        min-height: 28px;
        padding: 0.375rem 0.75rem;
        font-size: 0.75rem;
    }
}

/* =============================================================================
   TABLET LANDSCAPE (768px to 1247px width) - More space available
   ============================================================================= */

@media (orientation: landscape) and (min-width: 768px) and (max-width: 1247px) and (max-height: 600px) {
    .header-content {
        height: 50px;
        padding: 0 1rem;
    }
    
    #main-logo {
        width: 120px;
        max-height: 30px;
    }
    
    .menu-toggle {
        width: 36px;
        height: 36px;
        font-size: 20px;
    }
    
    /* Better use of horizontal space in dashboard */
    .dashboard-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem;
    }
    
    .dashboard-container {
        padding: 0.75rem;
    }
    
    .dashboard-header {
        padding: 1rem;
        margin-bottom: 1rem;
    }
    
    .dashboard-header h1 {
        font-size: 1.4rem;
    }
    
    .dashboard-subtitle {
        font-size: 1rem;
    }
    
    /* Stats can use more columns on tablet landscape */
    .stats-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 0.75rem;
    }
    
    /* Welcome section can be more generous */
    .welcome {
        padding: 1.5rem 1rem;
    }
    
    .welcome h1 {
        font-size: 1.6rem;
    }
    
    /* CTA buttons can be horizontal */
    .cta-buttons {
        flex-direction: row;
        gap: 1rem;
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .cta-btn {
        width: auto;
        min-width: 150px;
        max-width: 250px;
    }
    
    /* Action buttons can be horizontal in pairs */
    .action-buttons {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    
    /* Profile stats can be in a grid */
    .profile-stats {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    
    .profile-stat-item {
        flex-direction: column;
        text-align: center;
        padding: 0.75rem;
        background: #f8f9fa;
        border-radius: 6px;
        border-bottom: none;
    }
    
    .profile-edit-btn {
        grid-column: 1 / -1;
        margin-top: 0.75rem;
    }
}

/* =============================================================================
   PHONE LANDSCAPE (480px to 767px width) - Moderate space
   ============================================================================= */

@media (orientation: landscape) and (min-width: 480px) and (max-width: 767px) and (max-height: 500px) {
    .header-content {
        height: 40px;
        padding: 0 0.5rem;
    }
    
    #main-logo {
        width: 90px;
        max-height: 22px;
    }
    
    .menu-toggle {
        width: 28px;
        height: 28px;
        font-size: 16px;
    }
    
    /* Ultra-compact mobile menu */
    #mobile-menu {
        padding: 0.375rem;
    }
    
    #mobile-menu ul li a {
        padding: 0.375rem 0;
        font-size: 0.8rem;
    }
    
    /* Dashboard remains single column but more compact */
    .dashboard-container {
        padding: 0.375rem;
    }
    
    .dashboard-header {
        padding: 0.5rem;
        margin-bottom: 0.5rem;
    }
    
    .dashboard-header h1 {
        font-size: 1.1rem;
        margin-bottom: 0.25rem;
    }
    
    .dashboard-subtitle {
        font-size: 0.8rem;
    }
    
    .dashboard-card {
        padding: 0.5rem;
        margin-bottom: 0.5rem;
    }
    
    .dashboard-card h3 {
        font-size: 0.9rem;
        margin-bottom: 0.5rem;
    }
    
    /* Try to fit stats in 3 columns */
    .stats-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
    }
    
    /* Action buttons try horizontal on wider phones */
    .action-buttons {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
    
    .action-btn {
        min-height: 32px;
        padding: 0.375rem 0.5rem;
        font-size: 0.75rem;
    }
    
    /* Welcome section very compact */
    .welcome {
        padding: 0.75rem 0.5rem;
    }
    
    .welcome h1 {
        font-size: 1.2rem;
        margin-bottom: 0.375rem;
    }
    
    /* CTA buttons try horizontal */
    .cta-buttons {
        flex-direction: row;
        gap: 0.75rem;
        flex-wrap: wrap;
    }
    
    .cta-btn {
        flex: 1;
        min-width: 120px;
        max-width: 180px;
        min-height: 32px;
        font-size: 0.8rem;
        padding: 0.375rem 0.75rem;
    }
    
    /* Profile stats more compact */
    .profile-stat-item {
        padding: 0.375rem 0;
        min-height: 32px;
    }
    
    .profile-stat-label,
    .profile-stat-value {
        font-size: 0.75rem;
    }
    
    .profile-edit-btn {
        min-height: 32px;
        padding: 0.375rem 0.5rem;
        font-size: 0.8rem;
    }
    
    /* Form elements very compact */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="time"],
    textarea,
    select {
        min-height: 32px;
        padding: 0.375rem;
        font-size: 13px;
    }
}

/* =============================================================================
   SMALL PHONE LANDSCAPE (320px to 479px width) - Very limited space
   ============================================================================= */

@media (orientation: landscape) and (min-width: 320px) and (max-width: 479px) and (max-height: 400px) {
    .header-content {
        height: 35px;
        padding: 0 0.375rem;
    }
    
    #main-logo {
        width: 80px;
        max-height: 18px;
    }
    
    .menu-toggle {
        width: 24px;
        height: 24px;
        font-size: 14px;
    }
    
    /* Minimal mobile menu */
    #mobile-menu {
        padding: 0.25rem;
    }
    
    #mobile-menu ul li a {
        padding: 0.25rem 0;
        font-size: 0.75rem;
    }
    
    /* Ultra-compact dashboard */
    .dashboard-container {
        padding: 0.25rem;
    }
    
    .dashboard-header {
        padding: 0.375rem;
        margin-bottom: 0.375rem;
    }
    
    .dashboard-header h1 {
        font-size: 1rem;
        margin-bottom: 0.125rem;
    }
    
    .dashboard-subtitle {
        font-size: 0.75rem;
    }
    
    .dashboard-card {
        padding: 0.375rem;
        margin-bottom: 0.375rem;
    }
    
    .dashboard-card h3 {
        font-size: 0.8rem;
        margin-bottom: 0.375rem;
    }
    
    /* Stats in 2 columns for small phones */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.375rem;
    }
    
    .stat-item {
        padding: 0.375rem;
    }
    
    .stat-number {
        font-size: 1rem;
    }
    
    .stat-label {
        font-size: 0.65rem;
    }
    
    /* Action buttons vertical again due to space constraints */
    .action-buttons {
        display: flex;
        flex-direction: column;
        gap: 0.375rem;
    }
    
    .action-btn {
        min-height: 28px;
        padding: 0.25rem 0.375rem;
        font-size: 0.7rem;
    }
    
    /* Welcome minimal */
    .welcome {
        padding: 0.5rem 0.375rem;
    }
    
    .welcome h1 {
        font-size: 1rem;
        margin-bottom: 0.25rem;
    }
    
    /* CTA buttons back to vertical */
    .cta-buttons {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .cta-btn {
        width: 100%;
        min-height: 28px;
        font-size: 0.75rem;
        padding: 0.25rem 0.75rem;
    }
    
    /* Profile stats minimal */
    .profile-stats {
        gap: 0.5rem;
    }
    
    .profile-stat-item {
        padding: 0.25rem 0;
        min-height: 28px;
    }
    
    .profile-stat-label,
    .profile-stat-value {
        font-size: 0.7rem;
    }
    
    .profile-edit-btn {
        min-height: 28px;
        padding: 0.25rem 0.375rem;
        font-size: 0.75rem;
        margin-top: 0.5rem;
    }
    
    /* Form elements minimal */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="time"],
    textarea,
    select {
        min-height: 28px;
        padding: 0.25rem;
        font-size: 12px;
    }
    
    /* Footer minimal */
    .extra-menu ul li a {
        padding: 0.25rem 0.375rem;
        font-size: 0.7rem;
    }
    
    .footer-bottom p {
        font-size: 0.7rem;
        padding: 0 0.375rem;
    }
}

/* =============================================================================
   VERY SMALL PHONE LANDSCAPE (under 320px width) - Extreme constraints
   ============================================================================= */

@media (orientation: landscape) and (max-width: 319px) and (max-height: 350px) {
    .header-content {
        height: 30px;
        padding: 0 0.25rem;
    }
    
    #main-logo {
        width: 70px;
        max-height: 15px;
    }
    
    .menu-toggle {
        width: 20px;
        height: 20px;
        font-size: 12px;
    }
    
    /* Absolute minimal spacing */
    .dashboard-container {
        padding: 0.125rem;
    }
    
    .dashboard-header {
        padding: 0.25rem;
        margin-bottom: 0.25rem;
    }
    
    .dashboard-header h1 {
        font-size: 0.9rem;
        margin-bottom: 0.125rem;
    }
    
    .dashboard-subtitle {
        font-size: 0.7rem;
    }
    
    .dashboard-card {
        padding: 0.25rem;
        margin-bottom: 0.25rem;
    }
    
    .dashboard-card h3 {
        font-size: 0.75rem;
        margin-bottom: 0.25rem;
    }
    
    /* Single column stats for extreme small */
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }
    
    .stat-item {
        padding: 0.25rem;
    }
    
    .stat-number {
        font-size: 0.9rem;
    }
    
    .stat-label {
        font-size: 0.6rem;
    }
    
    .action-btn {
        min-height: 24px;
        padding: 0.125rem 0.25rem;
        font-size: 0.65rem;
    }
    
    .welcome {
        padding: 0.375rem 0.25rem;
    }
    
    .welcome h1 {
        font-size: 0.9rem;
        margin-bottom: 0.125rem;
    }
    
    .cta-btn {
        min-height: 24px;
        font-size: 0.7rem;
        padding: 0.125rem 0.5rem;
    }
    
    .profile-stat-item {
        min-height: 24px;
        padding: 0.125rem 0;
    }
    
    .profile-stat-label,
    .profile-stat-value {
        font-size: 0.65rem;
    }
    
    .profile-edit-btn {
        min-height: 24px;
        padding: 0.125rem 0.25rem;
        font-size: 0.7rem;
    }
    
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="time"],
    textarea,
    select {
        min-height: 24px;
        padding: 0.125rem;
        font-size: 11px;
    }
}

/* =============================================================================
   HOMEPAGE LANDSCAPE OPTIMIZATIONS
   ============================================================================= */

@media (orientation: landscape) and (max-height: 600px) and (max-width: 1247px) {
    /* Compact home toggle section */
    .home-toggle-section {
        gap: 0.75rem;
        margin: 1rem 0;
        padding: 0 0.5rem;
    }
    
    .bird-container {
        width: 50px;
        height: 50px;
    }
    
    .speech-bubble {
        top: -30px;
        padding: 0.375rem 0.5rem;
        font-size: 0.7rem;
        border-radius: 8px;
    }
    
    .speech-bubble.left {
        right: -80px;
    }
    
    .speech-bubble.right {
        left: -80px;
    }
    
    .speech-bubble::after {
        width: 8px;
        height: 8px;
        bottom: -5px;
    }
    
    .home-toggle-container {
        max-width: 250px;
        padding: 0.125rem;
    }
    
    .home-toggle-label {
        padding: 0.5rem 0.25rem;
        font-size: 0.7rem;
    }
    
    /* Compact text sections */
    .home-text-section {
        width: calc(100% - 1rem);
        max-width: 350px;
        padding: 0.75rem;
        border-radius: 6px;
        position: static !important;
        transform: none !important;
        margin: 0.75rem auto;
    }
    
    .home-text {
        line-height: 1.4;
        font-size: 0.8rem;
    }
    
    /* Compact bird buttons */
    .home-bird-button {
        margin: 0.5rem auto;
        width: 100px !important;
    }
    
    .home-bird-button .cta-btn {
        width: 100%;
        max-width: 150px;
        height: 32px;
        font-size: 0.75rem;
        padding: 0.5rem 0.75rem;
    }
    
    /* Adjust content container for landscape */
    .home-content-container {
        margin: 1rem auto;
        padding: 0 0.5rem;
        min-height: 250px;
    }
}

/* =============================================================================
   PHONE LANDSCAPE HOMEPAGE ADJUSTMENTS
   ============================================================================= */

@media (orientation: landscape) and (max-width: 767px) and (max-height: 500px) {
    .bird-container {
        width: 40px;
        height: 40px;
    }
    
    .speech-bubble {
        top: -25px;
        padding: 0.25rem 0.375rem;
        font-size: 0.65rem;
    }
    
    .speech-bubble.left {
        right: -60px;
    }
    
    .speech-bubble.right {
        left: -60px;
    }
    
    .home-toggle-container {
        max-width: 200px;
    }
    
    .home-toggle-label {
        padding: 0.375rem 0.25rem;
        font-size: 0.65rem;
    }
    
    .home-text-section {
        max-width: 300px;
        padding: 0.5rem;
    }
    
    .home-text {
        font-size: 0.75rem;
    }
    
    .home-bird-button .cta-btn {
        height: 28px;
        font-size: 0.7rem;
        padding: 0.375rem 0.5rem;
    }
    
    .home-content-container {
        min-height: 200px;
    }
}

/* =============================================================================
   SMALL PHONE LANDSCAPE HOMEPAGE
   ============================================================================= */

@media (orientation: landscape) and (max-width: 479px) and (max-height: 400px) {
    .home-toggle-section {
        gap: 0.5rem;
        margin: 0.75rem 0;
    }
    
    .bird-container {
        width: 35px;
        height: 35px;
    }
    
    .speech-bubble {
        top: -20px;
        padding: 0.125rem 0.25rem;
        font-size: 0.6rem;
    }
    
    .speech-bubble.left {
        right: -50px;
    }
    
    .speech-bubble.right {
        left: -50px;
    }
    
    .speech-bubble::after {
        width: 6px;
        height: 6px;
        bottom: -4px;
    }
    
    .home-toggle-container {
        max-width: 180px;
    }
    
    .home-toggle-label {
        padding: 0.25rem 0.125rem;
        font-size: 0.6rem;
    }
    
    .home-text-section {
        max-width: 250px;
        padding: 0.375rem;
    }
    
    .home-text {
        font-size: 0.7rem;
        line-height: 1.3;
    }
    
    .home-bird-button .cta-btn {
        height: 24px;
        font-size: 0.65rem;
        padding: 0.25rem 0.375rem;
    }
    
    .home-content-container {
        min-height: 150px;
        margin: 0.5rem auto;
    }
}

/* =============================================================================
   ACCESSIBILITY IMPROVEMENTS FOR LANDSCAPE
   ============================================================================= */

@media (orientation: landscape) and (max-height: 500px) and (max-width: 1247px) {
    /* Maintain focus visibility with smaller elements */
    input:focus,
    textarea:focus,
    select:focus,
    .action-btn:focus,
    .cta-btn:focus,
    .profile-edit-btn:focus {
        box-shadow: 0 0 0 2px rgba(67, 141, 154, 0.4);
        outline: none;
    }
    
    /* Ensure minimum touch targets */
    .action-btn,
    .cta-btn,
    input,
    select,
    .menu-toggle {
        min-height: 28px;
        min-width: 28px;
    }
    
    /* Smooth scrolling for constrained height */
    .dashboard-container {
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Custom scrollbars for landscape */
    .dashboard-container::-webkit-scrollbar {
        width: 3px;
    }
    
    .dashboard-container::-webkit-scrollbar-track {
        background: #f1f5f9;
    }
    
    .dashboard-container::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 1px;
    }
}

/* =============================================================================
   PREVENT HORIZONTAL OVERFLOW IN LANDSCAPE
   ============================================================================= */

@media (orientation: landscape) and (max-width: 1247px) {
    .dashboard-container,
    .dashboard-grid,
    .dashboard-card,
    .stats-grid,
    .action-buttons,
    .cta-buttons,
    .profile-stats,
    .welcome,
    .home-toggle-section,
    .home-content-container {
        max-width: 100%;
        box-sizing: border-box;
    }
    
    .dashboard-card h3,
    .welcome h1,
    .dashboard-subtitle {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    /* Ensure buttons don't overflow */
    .action-btn,
    .cta-btn {
        min-width: 0;
        word-wrap: break-word;
        text-overflow: ellipsis;
    }
}

/* =============================================================================
   SAFE AREA ADJUSTMENTS FOR LANDSCAPE NOTCHED DEVICES
   ============================================================================= */

@supports (padding: max(0px)) {
    @media (orientation: landscape) and (max-width: 1247px) {
        .header-content {
            padding-left: max(0.5rem, env(safe-area-inset-left));
            padding-right: max(0.5rem, env(safe-area-inset-right));
        }
        
        .dashboard-container {
            padding-left: max(0.5rem, env(safe-area-inset-left));
            padding-right: max(0.5rem, env(safe-area-inset-right));
        }
        
        #mobile-menu {
            padding-left: max(1rem, env(safe-area-inset-left));
            padding-right: max(1rem, env(safe-area-inset-right));
        }
        
        .home-content-container {
            padding-left: max(0.5rem, env(safe-area-inset-left));
            padding-right: max(0.5rem, env(safe-area-inset-right));
        }
    }
}

/* =============================================================================
   LANDSCAPE TOUCH OPTIMIZATIONS
   ============================================================================= */

@media (orientation: landscape) and (hover: none) and (max-width: 1247px) {
    /* Remove hover effects that don't work on touch */
    .action-btn:hover,
    .cta-btn:hover,
    .dashboard-card:hover {
        transform: none;
        background-color: initial;
    }
    
    /* Enhanced active states for touch */
    .action-btn:active,
    .cta-btn:active {
        transform: scale(0.98);
        opacity: 0.8;
    }
    
    input:active,
    textarea:active,
    select:active {
        border-color: var(--primary-color, #438d9a);
    }
}

/* =============================================================================
   LANDSCAPE ANIMATION OPTIMIZATIONS
   ============================================================================= */

@media (orientation: landscape) and (max-width: 1247px) {
    /* Faster transitions for better perceived performance */
    .action-btn,
    .cta-btn,
    input,
    textarea,
    select,
    .dashboard-card {
        transition-duration: 0.15s;
    }
    
    /* Smooth dashboard interactions */
    .dashboard-grid {
        transition: opacity 0.2s ease;
    }
    
    /* Home toggle animations */
    .home-toggle-label {
        transition: all 0.2s ease;
    }
    
    .speech-bubble {
        animation: landscapeBubbleFadeIn 0.3s ease;
    }
    
    @keyframes landscapeBubbleFadeIn {
        from {
            opacity: 0;
            transform: translateY(-5px) scale(0.95);
        }
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }
}

/* =============================================================================
   HIGH DPI DISPLAY OPTIMIZATIONS FOR LANDSCAPE
   ============================================================================= */

@media (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1247px), 
       (orientation: landscape) and (min-resolution: 192dpi) and (max-width: 1247px) {
    #main-logo {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
    
    .dashboard-card {
        box-shadow: 0 0.5px 2px rgba(0, 0, 0, 0.1);
        border-width: 0.5px;
    }
    
    .stat-item,
    .action-btn,
    .cta-btn {
        border-width: 1px;
    }
}

/* =============================================================================
   LANDSCAPE PRINT OPTIMIZATIONS
   ============================================================================= */

@media print and (orientation: landscape) and (max-width: 1247px) {
    .dashboard-container {
        max-width: none;
        padding: 1rem;
        margin: 0;
    }
    
    .header-content,
    #mobile-menu,
    .menu-toggle,
    .action-btn,
    .cta-btn,
    .announcement-banner,
    footer {
        display: none !important;
    }
    
    .dashboard-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem;
    }
    
    .dashboard-card {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
        margin-bottom: 1rem;
    }
    
    .dashboard-card h3 {
        color: #000;
        font-size: 1rem;
    }
    
    .stats-grid {
        break-inside: avoid;
        grid-template-columns: repeat(4, 1fr);
    }
    
    .stat-item {
        border: 1px solid #ccc;
        break-inside: avoid;
    }
    
    .welcome {
        break-inside: avoid;
        border: 1px solid #ddd;
        margin-bottom: 1rem;
    }
    
    .welcome h1 {
        color: #000;
    }
}