/* ===== COMPREHENSIVE UI/UX DESIGN FIXES ===== */

/* ===== SIDEBAR OVERLAY FIX ===== */
/* JavaScript now checks viewport width before manipulating overlay */
/* No CSS override needed - JS won't set inline styles on desktop */

/* ===== PART 1: FIX SPACING AND ALIGNMENT ISSUES ===== */

/* Main Content Container - Add proper padding to prevent cards from hitting edges */
#main-content {
    padding: 1.5rem !important;
    min-height: 100vh;
    box-sizing: border-box;
    pointer-events: auto !important; /* CRITICAL: Ensure clicks work */
    /* Layout handled by app-consolidated.css via --sidebar-width variable.
       Do NOT set margin-left or width here — it conflicts with the sidebar width
       defined in navigation-enhanced.css and app-consolidated.css. */
}

/* Banners and Cards - Ensure proper spacing from viewport edges */
.super-admin-banner,
.key-metrics-section,
.dashboard-widgets,
.modern-card,
.gradient-card,
.page-container {
    margin-left: 1rem !important;
    margin-right: 1rem !important;
    border-radius: 16px !important; /* Maintain rounded corners */
}

.super-admin-banner {
    margin-bottom: 2rem !important;
    padding: 2rem !important;
}

.metrics-container {
    padding: 0 1rem !important;
    gap: 1.5rem !important;
}

/* Card spacing improvements */
.modern-card,
.gradient-card,
.dashboard-widget {
    margin-bottom: 1.5rem !important;
    padding: 1.5rem !important;
    border-radius: 16px !important;
}

/* Ensure cards in grid maintain proper spacing */
.dashboard-widgets .dashboard-widget,
.metrics-container .metric-card {
    margin: 0 !important; /* Reset margin, let grid handle spacing */
}

/* Content spacing within cards */
.service-details,
.widget-content,
.card-body {
    padding: 1.5rem !important;
}

.service-details .detail-item + .detail-item {
    margin-top: 1rem !important;
}

/* Metadata spacing improvements */
.widget-title,
.service-name,
.card-header h2,
.card-header h3 {
    margin-bottom: 0.75rem !important;
}

.widget-subtitle,
.service-time,
.created-by,
.created-time {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
}

/* ===== PART 2: FIX ICON SPACING IN NAVIGATION ===== */

/* Standardized navigation icon spacing - removes conflicting rules */
.nav-item-content {
    display: flex !important;
    align-items: center !important;
    /* gap handled by navigation-enhanced.css / app-consolidated.css */
}

/* Uniform icon sizing for all navigation icons (including Feather SVGs) */
.nav-item-content i,
.nav-item-content [data-feather],
.nav-item-content svg.feather {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
    color: #6b7280 !important;
}

/* Active state icon colors */
.nav-item.active .nav-item-content i,
.nav-item.active .nav-item-content [data-feather],
.nav-item.active .nav-item-content svg.feather {
    color: #7c3aed !important;
}

/* Menu items spacing */
.menu-item {
    gap: 1rem !important;
    padding: 0.875rem 1.25rem !important;
}

.menu-item i {
    margin-right: 0.25rem !important;
    flex-shrink: 0;
}

/* Icon spacing in other UI elements */
.btn i,
.badge i,
.widget-header i {
    margin-right: 0.5rem !important;
}

.detail-item i {
    margin-right: 0.75rem !important;
}

/* ===== PART 3: MOBILE RESPONSIVE FIXES ===== */

@media (max-width: 767px) {
    /* Reset main content for mobile */
    #main-content {
        margin-left: 0 !important;
        width: 100% !important;
        padding: 1rem !important;
        /* Mobile topbar is 60px tall (fixed). Add 60px + 1rem padding so content
           starts below the topbar with a small gap. Single source of truth. */
        padding-top: calc(60px + 1rem) !important;
    }

    /* Banner fixes for mobile - maintain curved sides */
    .super-admin-banner,
    .key-metrics-section,
    .modern-card,
    .gradient-card {
        margin-left: 0.75rem !important;
        margin-right: 0.75rem !important;
        border-radius: 20px !important; /* More pronounced curves on mobile */
        padding: 1.5rem !important;
    }

    /* Fix banner aspect ratio on mobile */
    .super-admin-banner {
        min-height: auto !important;
        padding: 1.5rem !important;
    }

    .super-admin-banner-content {
        flex-direction: column !important;
        gap: 1rem !important;
        text-align: center !important;
    }

    /* Metrics grid responsive fix */
    .metrics-container {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
        padding: 0 0.75rem !important;
    }

    /* Fix mobile font colors */
    .super-admin-title,
    .widget-title,
    .nav-item-content span,
    .card-header h2,
    .card-header h3 {
        color: #1e293b !important; /* Ensure dark text on light background */
    }

    /* Mobile scrolling fixes */
    body {
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    #main-content {
        min-height: calc(100vh - 60px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

/* ===== PART 4: NAVIGATION ICON STANDARDIZATION ===== */

/* All navigation icons should use the standardized spacing above */
/* Removed specific announcements icon overrides to ensure consistency */

/* ===== PART 5: FIX DASHBOARD CARD CLICK BEHAVIOR ===== */

/* Ensure metric cards and ALL buttons/links behave correctly */
.metric-card.clickable,
.btn-banner-action,
.quick-action-btn,
a.metric-card,
a.btn,
.super-admin-banner a,
.key-metrics-section a,
.quick-actions-section a {
    pointer-events: auto !important; /* CRITICAL: Ensure clicks work */
    cursor: pointer !important;
    /* NOTE: Do NOT set position: relative + z-index here. These elements live inside
       #main-content. Setting a high z-index only applies within that context and does NOT
       lift them above the sidebar. It also creates sub-stacking-contexts that can interfere
       with modals opened from within the same container. */
}

/* Maintain other styling for cards */
.metric-card.clickable {
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
    color: inherit !important;
    border: 2px solid transparent !important;
    transition: all 0.2s ease !important;
}

.metric-card.clickable:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(124, 58, 237, 0.15) !important;
    border-color: rgba(124, 58, 237, 0.2) !important;
    text-decoration: none !important;
}

/* ===== PART 6: ADDITIONAL MOBILE FIXES ===== */

@media (max-width: 768px) {
    /* Fix Add Organization button on mobile */
    .btn[href*="create_organization"],
    .btn-banner-action {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0.75rem 1.5rem !important;
        border-radius: 12px !important;
        font-weight: 600 !important;
        gap: 0.5rem !important;
        min-height: 44px !important; /* Touch-friendly height */
        width: 100% !important;
        margin-top: 1rem !important;
    }
    
    /* Ensure navigation scrolling works properly */
    .sidebar-enhanced {
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }
}

/* ===== PART 7: TYPOGRAPHY AND COLOR CONSISTENCY ===== */

/* Ensure consistent text colors across all devices */
/* REMOVED .super-admin-title from this rule - it needs to be white on purple banner */
/* NOTE: .metric-label / .metric-value are intentionally NOT here — they carry
   semantic tone colours (green = positive, amber = needs attention) and a muted
   label, owned by the dashboard + crm-v2.css. A blanket `!important` slate here
   silently killed those tones. */
.widget-title,
.widget-value,
.card-header h1,
.card-header h2,
.card-header h3,
.card-header h4,
.page-title {
    color: #1e293b !important;
    font-weight: 600 !important;
}

/* Super Admin Banner Title - Must be white on purple background */
.super-admin-banner .super-admin-title,
.super-admin-header .super-admin-title {
    color: #ffffff !important;
    font-weight: 700 !important;
}

.super-admin-subtitle,
.widget-subtitle,
.metric-subtitle,
.text-muted {
    color: #4b5563 !important;
}

/* Icon colors consistency */
.metric-icon i,
.widget-icon i,
.detail-item i {
    color: #7c3aed !important;
}

/* ===== PART 8: CONTAINER AND LAYOUT IMPROVEMENTS ===== */

/* Page container improvements */
.page-container {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 1.5rem !important;
}

/* Grid improvements */
.dashboard-widgets,
.metrics-container {
    display: grid !important;
    gap: 1.5rem !important;
    margin-bottom: 2rem !important;
}

.metrics-container {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
}

.dashboard-widgets {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
}

/* ===== PART 9: BUTTON AND INTERACTION FIXES ===== */

/* Clean button styling without aggressive overrides */
.btn-banner-action {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 12px;
    transition: all 0.2s ease;
}

.btn:hover,
.btn-primary:hover,
.btn-secondary:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.25) !important;
}

/* ===== PART 10: FINAL OVERRIDES AND ACCESSIBILITY ===== */

/* Ensure proper contrast and accessibility.
   Keyboard-only: `:focus-visible` (not `:focus`) so a mouse click — e.g. on a
   tab — doesn't leave a lingering purple outline box, while keyboard users
   still get a visible focus ring. */
*:focus-visible {
    outline: 2px solid #7c3aed !important;
    outline-offset: 2px !important;
}

/* Prevent layout shift */
* {
    box-sizing: border-box !important;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth !important;
}

/* High contrast mode compatibility */
@media (prefers-contrast: high) {
    .metric-card,
    .dashboard-widget,
    .modern-card {
        border: 2px solid #1e293b !important;
    }
}

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

/* ===== DARK MODE OVERRIDES ===== */

/* Dark mode: explicit theme selection */
[data-theme="dark"] .card-header h2,
[data-theme="dark"] .card-header h3 {
    color: var(--text-primary, #f1f5f9) !important;
}

[data-theme="dark"] .metric-label,
[data-theme="dark"] .metric-value,
[data-theme="dark"] .widget-title,
[data-theme="dark"] .widget-value,
[data-theme="dark"] .card-header h1,
[data-theme="dark"] .card-header h2,
[data-theme="dark"] .card-header h3,
[data-theme="dark"] .card-header h4,
[data-theme="dark"] .page-title {
    color: var(--text-primary, #f1f5f9) !important;
}

[data-theme="dark"] .super-admin-subtitle,
[data-theme="dark"] .widget-subtitle,
[data-theme="dark"] .metric-subtitle,
[data-theme="dark"] .text-muted {
    color: var(--text-secondary, #cbd5e1) !important;
}

/* Dark mode: auto theme via system preference */
@media (prefers-color-scheme: dark) {
    [data-theme="auto"] .card-header h2,
    [data-theme="auto"] .card-header h3 {
        color: var(--text-primary, #f1f5f9) !important;
    }

    [data-theme="auto"] .metric-label,
    [data-theme="auto"] .metric-value,
    [data-theme="auto"] .widget-title,
    [data-theme="auto"] .widget-value,
    [data-theme="auto"] .card-header h1,
    [data-theme="auto"] .card-header h2,
    [data-theme="auto"] .card-header h3,
    [data-theme="auto"] .card-header h4,
    [data-theme="auto"] .page-title {
        color: var(--text-primary, #f1f5f9) !important;
    }

    [data-theme="auto"] .super-admin-subtitle,
    [data-theme="auto"] .widget-subtitle,
    [data-theme="auto"] .metric-subtitle,
    [data-theme="auto"] .text-muted {
        color: var(--text-secondary, #cbd5e1) !important;
    }
}