/**
 * ==========================================================================
 * The Flock - Consolidated Design System
 * ==========================================================================
 *
 * A unified, deduplicated CSS file that standardizes the design system
 * across the entire application. This file loads AFTER existing CSS files
 * to override and harmonize inconsistencies.
 *
 * Version: 1.0.0
 * Last Updated: 2026-02-11
 *
 * Table of Contents:
 *   1. CSS Custom Properties (Design Tokens)
 *   2. Base / Reset Styles
 *   3. Layout (Containers, Grids, Spacing)
 *   4. Typography
 *   5. Components
 *      5a. Buttons
 *      5b. Cards
 *      5c. Badges
 *      5d. Modals
 *      5e. Alerts
 *      5f. Tables
 *      5g. Avatars
 *      5h. Empty States
 *      5i. Toasts / Flash Messages
 *   6. Navigation
 *   7. Forms
 *   8. Utilities
 *   9. Responsive Overrides
 *  10. Print Styles
 * ==========================================================================
 */


/* ==========================================================================
   1. CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ==========================================================================
   Canonical design tokens for The Flock. These consolidate and standardize
   values from design-tokens.css, variables.css, and inline overrides.
   ========================================================================== */

:root {
    /* Allow both light and dark colour schemes */
    color-scheme: light dark;

    /* ----- Brand Colors ----- */
    --flock-purple: #9333ea;
    --flock-purple-light: #a855f7;
    --flock-purple-dark: #7c22ce;
    --flock-purple-50: #faf5ff;
    --flock-purple-100: #f3e8ff;

    /* ----- Primary Palette (Purple) ----- */
    --primary: var(--brand-600);
    --primary-light: var(--brand-500);
    --primary-dark: var(--brand-700);
    --primary-50: #faf5ff;
    --primary-100: #f3e8ff;
    --primary-200: #e9d5ff;
    --primary-300: #d8b4fe;
    --primary-400: #c084fc;
    --primary-500: #a855f7;
    --primary-600: #9333ea;
    --primary-700: #7c3aed;
    --primary-800: #6b21a8;
    --primary-900: #581c87;
    --primary-soft: rgba(147, 51, 234, 0.1);

    /* ----- Accent / Secondary (Blue) ----- */
    --secondary: #3b82f6;
    --secondary-light: #60a5fa;
    --secondary-dark: #2563eb;
    --accent: var(--brand-accent);
    --accent-soft: rgba(59, 130, 246, 0.1);

    /* ----- Pastoral State Colors ----- */
    --state-thriving: #10B981;
    --state-connected: #3b82f6;
    --state-needs-connection: #f59e0b;
    --state-needs-care: #f97316;
    --state-missed: #6b7280;

    /* ----- Semantic / Status Colors ----- */
    --success: var(--brand-success);
    --success-light: #34d399;
    --success-dark: #059669;
    --success-50: #ecfdf5;
    --success-soft: rgba(16, 185, 129, 0.1);

    --warning: var(--brand-warning);
    --warning-light: #fbbf24;
    --warning-dark: #d97706;
    --warning-50: #fffbeb;
    --warning-soft: rgba(245, 158, 11, 0.1);

    --danger: var(--brand-danger);
    --danger-light: #f87171;
    --danger-dark: #dc2626;
    --danger-50: #fef2f2;
    --danger-soft: rgba(239, 68, 68, 0.1);

    --info: #3b82f6;
    --info-light: #60a5fa;
    --info-dark: #2563eb;
    --info-50: #eff6ff;
    --info-soft: rgba(59, 130, 246, 0.1);

    /* ----- Neutral / Gray Scale ----- */
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;

    /* ----- Text Colors (WCAG AA Compliant) ----- */
    --text-primary: #1f2937;
    --text-secondary: #374151;
    --text-muted: #4b5563;
    --text-inverse: #ffffff;
    --text-link: #7c3aed;
    --text-link-hover: #9333ea;

    /* ----- Background Colors ----- */
    --background: #ffffff;
    --background-secondary: #f8fafc;
    --background-tertiary: #f1f5f9;
    --background-overlay: rgba(0, 0, 0, 0.5);
    --surface: #ffffff;
    --surface-hover: #f8fafc;

    /* ----- Border Colors ----- */
    --border: #e2e8f0;
    --border-light: #f1f5f9;
    --border-dark: #cbd5e1;
    --border-subtle: rgba(0, 0, 0, 0.04);
    --border-strong: rgba(0, 0, 0, 0.12);
    --border-focus: #a855f7;

    /* ----- Gradients ----- */
    --gradient-primary: linear-gradient(135deg, #9333ea 0%, #3b82f6 100%);
    --gradient-primary-hover: linear-gradient(135deg, #7c3aed 0%, #2563eb 100%);
    --gradient-accent: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    --gradient-success: linear-gradient(135deg, #10B981 0%, #059669 100%);
    --gradient-warning: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    --gradient-danger: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    --gradient-info: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    --gradient-dark: linear-gradient(135deg, #374151 0%, #1f2937 100%);

    /* ----- Typography ----- */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display: var(--brand-font-display), 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;

    --text-xs: 0.6875rem;     /* 11px */
    --text-sm: 0.8125rem;     /* 13px */
    --text-base: 0.875rem;    /* 14px — CRM body text */
    --text-lg: 1rem;          /* 16px */
    --text-xl: 1.125rem;      /* 18px */
    --text-2xl: 1.25rem;      /* 20px */
    --text-3xl: 1.5rem;       /* 24px */
    --text-4xl: 1.875rem;     /* 30px */
    --text-5xl: 2.25rem;      /* 36px */

    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

    --leading-none: 1;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;

    /* ----- Spacing Scale ----- */
    --space-0: 0;
    --space-1: 0.25rem;       /* 4px */
    --space-2: 0.5rem;        /* 8px */
    --space-3: 0.75rem;       /* 12px */
    --space-4: 1rem;          /* 16px */
    --space-5: 1.25rem;       /* 20px */
    --space-6: 1.5rem;        /* 24px */
    --space-8: 2rem;          /* 32px */
    --space-10: 2.5rem;       /* 40px */
    --space-12: 3rem;         /* 48px */
    --space-16: 4rem;         /* 64px */
    --space-20: 5rem;         /* 80px */
    --space-24: 6rem;         /* 96px */

    /* ----- Border Radius ----- */
    --radius-sm: 0.25rem;     /* 4px */
    --radius: 0.375rem;       /* 6px */
    --radius-md: 0.5rem;      /* 8px */
    --radius-lg: 0.75rem;     /* 12px */
    --radius-xl: 1rem;        /* 16px */
    --radius-2xl: 1.25rem;    /* 20px */
    --radius-full: 9999px;

    /* ----- Shadows ----- */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);

    /* Colored Shadows */
    --shadow-primary: 0 4px 12px rgba(147, 51, 234, 0.3);
    --shadow-accent: 0 4px 12px rgba(59, 130, 246, 0.3);
    --shadow-success: 0 4px 12px rgba(16, 185, 129, 0.3);
    --shadow-warning: 0 4px 12px rgba(245, 158, 11, 0.3);
    --shadow-danger: 0 4px 12px rgba(239, 68, 68, 0.3);

    /* ----- Transitions ----- */
    --transition-fast: 150ms ease;
    --transition: 200ms ease;
    --transition-slow: 300ms ease;

    /* ----- Z-Index Scale ----- */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-overlay: 400;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-popover: 600;
    --z-toast: 700;
    --z-tooltip: 800;
    --z-max: 9999;

    /* ----- Layout ----- */
    --sidebar-width: 240px;
    --sidebar-collapsed-width: 80px;
    --header-height: 64px;
    --mobile-header-height: 60px;
    --container-max-width: 1280px;

    /* ----- Component Tokens ----- */

    /* Buttons */
    --btn-padding-x: var(--space-5);
    --btn-padding-y: var(--space-3);
    --btn-padding-x-sm: var(--space-3);
    --btn-padding-y-sm: var(--space-2);
    --btn-padding-x-lg: var(--space-6);
    --btn-padding-y-lg: var(--space-4);
    --btn-border-radius: var(--radius);
    --btn-font-size: var(--text-sm);
    --btn-font-weight: var(--font-medium);

    /* Cards */
    --card-padding: var(--space-6);
    --card-border-radius: var(--radius-lg);
    --card-shadow: var(--shadow-sm);
    --card-shadow-hover: var(--shadow-md);

    /* Forms */
    --input-padding-x: var(--space-4);
    --input-padding-y: var(--space-3);
    --input-border-radius: var(--radius);
    --input-border-color: var(--border);
    --input-focus-ring: 0 0 0 3px rgba(147, 51, 234, 0.15);

    /* Badges */
    --badge-padding-x: var(--space-3);
    --badge-padding-y: var(--space-1);
    --badge-border-radius: var(--radius-sm);
    --badge-font-size: var(--text-xs);
    --badge-font-weight: var(--font-medium);

    /* Avatars */
    --avatar-sm: 32px;
    --avatar-md: 40px;
    --avatar-lg: 56px;
    --avatar-xl: 80px;

    /* Modals */
    --modal-padding: var(--space-6);
    --modal-border-radius: var(--radius-xl);
    --modal-max-width: 600px;
    --modal-backdrop-bg: rgba(0, 0, 0, 0.5);

    /* Banners */
    --banner-margin-top: 0;
    --banner-margin-bottom: 1rem;
    --banner-padding: 1rem 1.25rem;
    --banner-border-radius: var(--radius-xl);
    --banner-shadow: 0 8px 32px rgba(124, 58, 237, 0.2);
}


/* ==========================================================================
   2. BASE / RESET STYLES
   ==========================================================================
   Standardizes browser defaults and sets global styles.
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    line-height: var(--leading-normal);
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    font-size: var(--text-base); /* 14px — tighter than Bootstrap default 16px for CRM */
    font-weight: var(--font-normal);
    line-height: 1.6;
    color: var(--text-primary);
    background-color: var(--background);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    min-height: 100vh;
}

a {
    color: var(--text-link);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--text-link-hover);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Focus styles */
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Screen reader only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Skip link for accessibility */
.skip-link {
    position: absolute;
    top: -100%;
    left: var(--space-4);
    z-index: var(--z-max);
    padding: var(--space-3) var(--space-5);
    background: var(--primary);
    color: white;
    border-radius: 0 0 var(--radius) var(--radius);
    font-weight: var(--font-semibold);
    transition: top var(--transition-fast);
}

.skip-link:focus {
    top: 0;
    color: white;
}

/* Scrollbar styles */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--gray-100);
}

::-webkit-scrollbar-thumb {
    background: var(--gray-300);
    border-radius: var(--radius);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gray-400);
}

/* Reduced motion */
@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;
    }
}

/* High contrast */
@media (prefers-contrast: high) {
    :root {
        --border: #000000;
        --text-muted: var(--text-secondary);
        --border-subtle: var(--gray-700);
    }
}


/* ==========================================================================
   3. LAYOUT
   ==========================================================================
   Containers, grid system, main content area, and page structure.
   ========================================================================== */

/* Main content area - consistent with sidebar */
#main-content {
    min-height: 100vh;
    width: 100%;
    overflow-x: hidden;
    padding: var(--space-4);
}

@media (min-width: 769px) {
    #main-content {
        margin-left: var(--sidebar-width);
        padding: var(--space-8) var(--space-10);
        width: calc(100vw - var(--sidebar-width));
    }
}

@media (max-width: 768px) {
    #main-content {
        margin-left: 0;
        padding: var(--space-3);
        padding-top: calc(var(--mobile-header-height) + var(--space-3));
        width: 100%;
    }
}

/* Container system */
.container {
    width: 100%;
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--space-4);
}

.container-fluid {
    width: 100%;
    padding: 0 var(--space-4);
    max-width: 100%;
    overflow-x: hidden;
}

/* Page header */
.page-header {
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--border);
}

.page-header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.page-title {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    margin: 0;
    color: var(--text-primary);
    line-height: var(--leading-tight);
}

.page-subtitle {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    margin: var(--space-1) 0 0 0;
    line-height: 1.4;
}

.page-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* Modern page header */
.modern-page-header {
    margin-top: var(--space-8);
    margin-bottom: var(--space-8);
}

.modern-page-header .header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    flex-wrap: wrap;
}

.modern-page-header .page-title {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    margin: 0 0 var(--space-2) 0;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.modern-page-header .page-subtitle {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin: 0;
}

/* Page icon */
.page-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    background: var(--gradient-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Organization banner */
.organization-banner,
.org-banner,
.super-admin-banner,
.app-banner {
    background: var(--gradient-primary);
    color: var(--text-inverse);
    padding: var(--banner-padding);
    border-radius: var(--banner-border-radius);
    margin: var(--banner-margin-top) 0 var(--banner-margin-bottom) 0;
    box-shadow: var(--banner-shadow);
    position: relative;
    overflow: hidden;
}

/* Banner gradient overlay */
.org-banner::before,
.super-admin-banner::before,
.app-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
    pointer-events: none;
    z-index: 1;
}

/* Banner content above overlay */
.org-banner-content,
.super-admin-banner-content,
.app-banner-content {
    position: relative;
    z-index: 2;
    padding: var(--banner-padding);
}

/* Banner titles */
.org-banner-title,
.super-admin-title,
.app-banner-title {
    font-size: 1.25rem;
    font-weight: var(--font-bold);
    color: white;
    margin: 0 0 var(--space-1) 0;
    line-height: var(--leading-tight);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.org-banner-subtitle,
.super-admin-subtitle,
.app-banner-subtitle {
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    font-weight: var(--font-medium);
}

/* Banner icons */
.org-banner-icon,
.super-admin-logo,
.app-banner-icon {
    width: 38px;
    height: 38px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
}

/* Banner actions */
.org-banner-actions,
.super-admin-actions,
.app-banner-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.btn-banner-action,
.org-settings-btn,
.app-banner-btn {
    background: rgba(255, 255, 255, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-radius: 10px;
    color: white;
    padding: 0.625rem 1.25rem;
    font-weight: var(--font-semibold);
    font-size: var(--text-sm);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    text-decoration: none;
    transition: all var(--transition);
    backdrop-filter: blur(10px);
}

.btn-banner-action:hover,
.org-settings-btn:hover,
.app-banner-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.4);
    color: white;
    text-decoration: none;
    transform: translateY(-1px);
}

/* Quick actions */
.quick-actions {
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
    flex-wrap: wrap;
}

.quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-4);
}

/* Dashboard widgets grid */
.dashboard-widgets {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

/* Grids */
.members-grid,
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--space-4);
    width: 100%;
}


/* ==========================================================================
   4. TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
    font-weight: var(--font-semibold);
    line-height: var(--leading-tight);
    color: var(--text-primary);
    margin-bottom: var(--space-4);
}

h1 { font-size: var(--text-2xl); }   /* 20px */
h2 { font-size: var(--text-xl); }    /* 18px */
h3 { font-size: var(--text-lg); }    /* 16px */
h4 { font-size: var(--text-base); }  /* 14px */
h5 { font-size: var(--text-sm); }    /* 13px */
h6 { font-size: var(--text-xs); }    /* 11px */

p {
    margin-bottom: var(--space-4);
    color: var(--text-muted);
}

/* Text color classes (WCAG AA compliant) */
.text-primary-heading { color: var(--text-primary); }
.text-secondary-heading { color: var(--text-secondary); }
.text-body { color: var(--text-muted); }

/* Card content text */
.card-body h1, .card-body h2, .card-body h3,
.card-body h4, .card-body h5, .card-body h6 {
    color: var(--text-primary);
}

.card-body p,
.card-body .text-muted {
    color: var(--text-muted);
}

/* Preserve white text on colored backgrounds */
.text-white { color: var(--text-inverse) !important; }
.bg-primary h1, .bg-primary h2, .bg-primary h3,
.bg-primary h4, .bg-primary h5, .bg-primary h6,
.bg-success h1, .bg-success h2, .bg-success h3,
.bg-danger h1, .bg-danger h2, .bg-danger h3,
.bg-info h1, .bg-info h2, .bg-info h3 {
    color: var(--text-inverse) !important;
}

/* Warning bg needs dark text */
.bg-warning h1, .bg-warning h2, .bg-warning h3,
.bg-warning h4, .bg-warning h5, .bg-warning h6 {
    color: var(--text-primary) !important;
}

/* Table text */
.table th {
    color: var(--text-primary);
    font-weight: var(--font-semibold);
}

.table td {
    color: var(--text-muted);
}

/* Form labels */
.form-label,
label {
    color: var(--text-primary);
    font-weight: var(--font-medium);
}

/* Modal headers */
.modal-header h1, .modal-header h2, .modal-header h3,
.modal-header h4, .modal-header h5, .modal-header .modal-title {
    color: var(--text-primary);
}

/* Colored modal headers */
.modal .modal-header[style*="background"] .modal-title,
.modal-header.bg-primary .modal-title,
.modal-header.bg-purple .modal-title,
.custom-modal .modal-header .modal-title,
.modern-modal-header .modal-title {
    color: white !important;
}

/* Name capitalization */
.member-name,
.user-name,
.member-info h3 {
    text-transform: capitalize;
}


/* ==========================================================================
   5. COMPONENTS
   ========================================================================== */


/* ---------- 5a. Buttons ---------- */

/* ===== BUTTONS — Flat Solid, Standardized Heights ===== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: var(--btn-height);
    padding: var(--btn-padding-y) var(--btn-padding-x);
    font-size: var(--btn-font-size);
    font-weight: var(--btn-font-weight);
    line-height: 1;
    border-radius: var(--btn-border-radius);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
    text-decoration: none;
    white-space: nowrap;
}

.btn:hover {
    text-decoration: none;
    /* No transform, no box-shadow — flat style */
}

.btn:active {
    /* No transform */
}

/* Primary — brand color solid fill */
.btn-primary {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
.btn-primary:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    color: #fff;
}

/* Success — flat solid */
.btn-success {
    background: var(--success);
    color: #fff;
    border-color: var(--success);
}
.btn-success:hover {
    background: var(--success-dark);
    border-color: var(--success-dark);
    color: #fff;
}

/* Warning — flat solid */
.btn-warning {
    background: var(--warning);
    color: #fff;
    border-color: var(--warning);
}
.btn-warning:hover {
    background: var(--warning-dark);
    border-color: var(--warning-dark);
    color: #fff;
}

/* Info — flat solid */
.btn-info {
    background: var(--info);
    color: #fff;
    border-color: var(--info);
}
.btn-info:hover {
    background: var(--info-dark);
    border-color: var(--info-dark);
    color: #fff;
}

/* Danger — flat solid, reserved for destructive actions */
.btn-danger {
    background: var(--danger);
    color: #fff;
    border-color: var(--danger);
}
.btn-danger:hover {
    background: var(--danger-dark);
    border-color: var(--danger-dark);
    color: #fff;
}

/* Outline Primary — brand-tinted */
.btn-outline-primary {
    background: var(--background);
    color: var(--primary-700, var(--primary-dark));
    border-color: var(--primary-200, var(--primary-light));
}
.btn-outline-primary:hover {
    background: var(--primary-50, #faf5ff);
    border-color: var(--primary-300, var(--primary));
    color: var(--primary-700, var(--primary-dark));
}

/* Outline Secondary — neutral gray */
.btn-outline-secondary {
    background: var(--background);
    color: var(--gray-700);
    border-color: var(--gray-300);
}
.btn-outline-secondary:hover {
    background: var(--gray-50);
    color: var(--gray-800);
}

/* Outline Danger */
.btn-outline-danger {
    background: var(--background);
    color: var(--danger-dark);
    border-color: var(--danger);
}
.btn-outline-danger:hover {
    background: var(--danger-50);
    border-color: var(--danger-dark);
    color: var(--danger-dark);
}

/* Outline Success */
.btn-outline-success {
    background: var(--background);
    color: var(--success-dark);
    border-color: var(--success);
}
.btn-outline-success:hover {
    background: var(--success-50);
    border-color: var(--success-dark);
    color: var(--success-dark);
}

/* Ghost — no background, no border */
.btn-ghost {
    background: transparent;
    color: var(--gray-700);
    border: none;
}
.btn-ghost:hover {
    background: var(--gray-100);
}

/* Size variants */
.btn-sm {
    height: var(--btn-height-sm);
    padding: var(--btn-padding-y-sm) var(--btn-padding-x-sm);
    font-size: 13px;
}

.btn-lg {
    height: var(--btn-height-lg);
    padding: var(--btn-padding-y-lg) var(--btn-padding-x-lg);
    font-size: 15px;
}

/* Quick action buttons */
.quick-action-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border: none;
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    text-decoration: none;
    transition: all var(--transition);
    cursor: pointer;
    min-height: 40px;
}

.quick-action-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    text-decoration: none;
}

.quick-action-btn.primary {
    background: var(--gradient-primary);
    color: var(--text-inverse);
}

.quick-action-btn.secondary {
    background: var(--gradient-success);
    color: var(--text-inverse);
}

.quick-action-btn.outline {
    background: var(--background);
    border: 1px solid var(--border);
    color: var(--text-primary);
}

.quick-action-btn.outline:hover {
    background: var(--gray-50);
    border-color: var(--primary);
}


/* ---------- 5b. Cards ---------- */

/* ===== CARDS — Simplified, No Transforms ===== */

.card,
.modern-card,
.grid-card,
.list-card,
.widget-card,
.dashboard-widget {
    background: var(--background);
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: box-shadow 200ms ease;
}

.card:hover,
.modern-card:hover,
.grid-card:hover,
.list-card:hover,
.widget-card:hover,
.dashboard-widget:hover {
    box-shadow: var(--shadow-md);
    /* No transform — flat, stable */
}

.card-header {
    padding: 16px 24px;
    border-bottom: 1px solid var(--gray-200);
    background: var(--gray-50);
}

.card-body {
    padding: 24px;
}

.card-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--gray-200);
    background: var(--gray-50);
}

/* Flush card — no border, no shadow */
.card-flush {
    background: var(--background);
    border: none;
    border-radius: 12px;
    box-shadow: none;
    overflow: hidden;
}

/* Legacy card variants — extra spacing for standalone cards */
.grid-card,
.list-card,
.widget-card,
.dashboard-widget {
    padding: 24px;
}
.list-card {
    margin-bottom: 16px;
}

.widget-card:hover,
.dashboard-widget:hover {
    transform: translateY(-2px);
    box-shadow: var(--card-shadow-hover);
}

/* Widget elements */
.widget-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: white;
}

.widget-icon.primary { background: var(--gradient-primary); }
.widget-icon.success { background: var(--gradient-success); }
.widget-icon.warning { background: var(--gradient-warning); }
.widget-icon.danger { background: var(--gradient-danger); }
.widget-icon.info { background: var(--gradient-info); }

.widget-title {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
}

.widget-value {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    line-height: 1;
    margin-bottom: var(--space-1);
}

.widget-subtitle {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.3;
}

/* Member cards */
.member-card,
.service-card {
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: var(--card-border-radius);
    overflow: hidden;
    transition: all var(--transition);
}

.member-card:hover,
.service-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--card-shadow-hover);
}


/* ---------- 5c. Badges ---------- */

.badge {
    display: inline-flex;
    align-items: center;
    padding: var(--badge-padding-y) var(--badge-padding-x);
    font-size: var(--badge-font-size);
    font-weight: var(--badge-font-weight);
    border-radius: var(--badge-border-radius);
    white-space: nowrap;
}

.badge-primary { background: var(--primary-soft); color: var(--primary); }
.badge-success { background: var(--success-soft); color: var(--success); }
.badge-warning { background: var(--warning-soft); color: var(--warning); }
.badge-danger { background: var(--danger-soft); color: var(--danger); }
.badge-info { background: var(--info-soft); color: var(--info); }
.badge-secondary { background: var(--gray-100); color: var(--gray-600); }

/* Status badges */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.875rem;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid transparent;
}

.status-badge.active {
    background: var(--success-soft);
    color: var(--success-dark);
    border-color: rgba(16, 185, 129, 0.2);
}

.status-badge.inactive {
    background: rgba(107, 114, 128, 0.1);
    color: var(--text-muted);
    border-color: rgba(107, 114, 128, 0.2);
}

.status-badge.pending {
    background: var(--warning-soft);
    color: var(--warning-dark);
    border-color: rgba(245, 158, 11, 0.2);
}

.status-badge.high {
    background: var(--danger-soft);
    color: var(--danger-dark);
    border-color: rgba(239, 68, 68, 0.2);
}

/* Department badge */
.department-badge {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    background: var(--primary-soft);
    color: var(--primary-dark);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
}


/* ---------- 5d. Modals ---------- */

.custom-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--modal-backdrop-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal);
    padding: var(--space-4);
}

.custom-modal-content {
    background: var(--background);
    border-radius: var(--modal-border-radius);
    max-width: var(--modal-max-width);
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-xl);
}

.custom-modal-header {
    padding: var(--modal-padding);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.custom-modal-header h2 {
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    margin: 0;
    color: var(--text-primary);
}

.custom-modal-close {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: var(--space-2);
    border-radius: var(--radius);
    transition: all var(--transition-fast);
}

.custom-modal-close:hover {
    background: var(--gray-100);
    color: var(--text-primary);
}

.custom-modal-body {
    padding: var(--modal-padding);
}

/* Bootstrap modal overrides */
.modal-content {
    border-radius: var(--modal-border-radius);
    border: none;
    box-shadow: var(--shadow-xl);
}

.modal-header {
    border-bottom: 1px solid var(--border);
    padding: var(--space-5) var(--modal-padding);
}

.modal-body {
    padding: var(--modal-padding);
}

.modal-footer {
    border-top: 1px solid var(--border);
    padding: var(--space-4) var(--modal-padding);
}


/* ---------- 5e. Alerts ---------- */

.alert {
    padding: var(--space-4);
    border-radius: var(--radius);
    border: 1px solid transparent;
    margin-bottom: var(--space-4);
    color: var(--text-primary);
}

.alert-primary {
    background: var(--primary-soft);
    border-color: rgba(147, 51, 234, 0.2);
    color: var(--primary-dark);
}

.alert-success {
    background: var(--success-soft);
    border-color: rgba(16, 185, 129, 0.2);
    color: var(--success-dark);
}

.alert-warning {
    background: var(--warning-soft);
    border-color: rgba(245, 158, 11, 0.2);
    color: var(--warning-dark);
}

.alert-danger {
    background: var(--danger-soft);
    border-color: rgba(239, 68, 68, 0.2);
    color: var(--danger-dark);
}

.alert-info {
    background: var(--info-soft);
    border-color: rgba(59, 130, 246, 0.2);
    color: var(--info-dark);
}

/* Flash messages */
.flash-messages {
    margin-bottom: var(--space-4);
}

.flash-message {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius);
    margin-bottom: var(--space-2);
    border: 1px solid transparent;
}

.flash-content {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.flash-close {
    background: none;
    border: none;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity var(--transition-fast);
}

.flash-close:hover {
    opacity: 1;
}

.flash-success {
    background: var(--success-soft);
    border-color: rgba(16, 185, 129, 0.2);
    color: var(--success-dark);
}

.flash-error {
    background: var(--danger-soft);
    border-color: rgba(239, 68, 68, 0.2);
    color: var(--danger-dark);
}

.flash-warning {
    background: var(--warning-soft);
    border-color: rgba(245, 158, 11, 0.2);
    color: var(--warning-dark);
}

.flash-info {
    background: var(--info-soft);
    border-color: rgba(59, 130, 246, 0.2);
    color: var(--info-dark);
}


/* ---------- 5f. Tables — Unified Comfortable Style ---------- */

.table,
.modern-table,
.data-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0;
}

.table th,
.table td,
.modern-table th,
.modern-table td,
.data-table th,
.data-table td {
    padding: var(--table-cell-padding-y) var(--table-cell-padding-x);
    text-align: left;
    vertical-align: middle;
}

.table thead th,
.modern-table thead th,
.data-table thead th {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    background: var(--gray-50);
    border-bottom: 2px solid var(--gray-200);
    white-space: nowrap;
}

.table tbody td,
.modern-table tbody td,
.data-table tbody td {
    font-size: 14px;
    color: var(--text-primary);
    border-bottom: 1px solid var(--gray-100);
    line-height: var(--leading-normal);
}

.table tbody tr:last-child td,
.modern-table tbody tr:last-child td,
.data-table tbody tr:last-child td {
    border-bottom: none;
}

.table tbody tr:hover,
.modern-table tbody tr:hover,
.data-table tbody tr:hover {
    background: var(--gray-50);
}

.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Remove old bordered table styles */
.table-bordered { border: none; }
.table-bordered th,
.table-bordered td { border: none; border-bottom: 1px solid var(--gray-100); }
.table-bordered thead th { border-bottom: 2px solid var(--gray-200); }


/* ---------- 5g. Avatars ---------- */

.avatar {
    width: var(--avatar-md);
    height: var(--avatar-md);
    border-radius: 50%;
    background: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: var(--font-semibold);
    font-size: var(--text-sm);
    flex-shrink: 0;
}

.avatar-sm {
    width: var(--avatar-sm);
    height: var(--avatar-sm);
    font-size: var(--text-xs);
}

.avatar-lg {
    width: var(--avatar-lg);
    height: var(--avatar-lg);
    font-size: var(--text-lg);
}

.avatar-xl {
    width: var(--avatar-xl);
    height: var(--avatar-xl);
    font-size: var(--text-2xl);
}

.avatar-initials {
    width: 100%;
    height: 100%;
    background: var(--gradient-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-semibold);
    font-size: inherit;
    border-radius: inherit;
}

.member-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--gradient-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-semibold);
    font-size: var(--text-lg);
    flex-shrink: 0;
}


/* ---------- 5h. Empty States ---------- */

.empty-state {
    text-align: center;
    padding: var(--space-12) var(--space-4);
    background: var(--background);
    border: 2px dashed var(--gray-300);
    border-radius: var(--radius-lg);
    color: var(--text-secondary);
}

.empty-state-icon {
    margin-bottom: var(--space-4);
    color: var(--gray-300);
}

.empty-state h3 {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    margin: 0 0 var(--space-2) 0;
    color: var(--text-primary);
}

.empty-state p {
    font-size: var(--text-sm);
    margin: 0 0 var(--space-6) 0;
    line-height: 1.6;
}


/* ---------- 5i. Toasts ---------- */

.toast-container {
    position: fixed;
    top: var(--space-4);
    right: var(--space-4);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.toast {
    min-width: 300px;
    max-width: 400px;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    animation: toastSlideIn 0.3s ease-out;
    color: white;
}

.toast-success { background: var(--success-dark); }
.toast-error { background: var(--danger-dark); }
.toast-warning { background: var(--warning-dark); }
.toast-info { background: var(--info-dark); }

@keyframes toastSlideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes toastSlideOut {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(100%); opacity: 0; }
}

/* Loading spinner */
.loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid var(--primary-soft);
    border-radius: var(--radius-full);
    border-top-color: var(--primary);
    animation: spin 1s ease-in-out infinite;
}

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

/* Breadcrumbs */
.breadcrumb {
    background: transparent;
    padding: 0;
    margin-bottom: 0;
    font-size: var(--text-sm);
}

.breadcrumb-item a {
    color: var(--primary);
    text-decoration: none;
}

.breadcrumb-item a:hover {
    color: var(--flock-purple-dark);
    text-decoration: underline;
}

.breadcrumb-item.active {
    color: var(--gray-500);
}

.breadcrumb-item + .breadcrumb-item::before {
    content: "\203A";
    color: var(--gray-300);
}

/* Dropdown */
.dropdown-content {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    z-index: var(--z-dropdown);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all var(--transition-fast);
}

.dropdown:hover .dropdown-content,
.dropdown.active .dropdown-content {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-item {
    display: block;
    padding: var(--space-3) var(--space-4);
    color: var(--text-primary);
    text-decoration: none;
    transition: background-color var(--transition-fast);
}

.dropdown-item:hover {
    background: var(--gray-50);
    color: var(--text-primary);
}


/* ==========================================================================
   6. NAVIGATION
   ==========================================================================
   Enhanced sidebar navigation and mobile top bar.
   All nav styles here use design tokens for consistency.
   ========================================================================== */

/* Sidebar */
.sidebar-enhanced {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: var(--sidebar-width);
    background: var(--surface);
    border-right: 1px solid var(--border);
    z-index: 1000;
    transition: transform var(--transition-slow);
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: var(--shadow-sm);
}

/* Nav group headers */
.nav-group {
    margin-bottom: 1.25rem;
}

.nav-group-header {
    color: var(--text-muted);
    font-size: 0.6875rem;
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0 0.875rem 0.5rem 0.875rem;
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: var(--space-3);
}

/* Nav items */
.nav-item {
    display: block;
    position: relative;
    text-decoration: none;
    margin: 0.125rem 0.5rem;
    border-radius: var(--radius-lg);
    transition: all var(--transition);
    overflow: hidden;
}

.nav-item-content {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.75rem;
    color: var(--text-secondary);
    font-weight: var(--font-medium);
    font-size: 0.8125rem;  /* 13px — dense CRM nav */
    position: relative;
    z-index: 1;
}

/* Nav item hover */
.nav-item:hover {
    background: var(--primary-soft);
}

.nav-item:hover .nav-item-content,
.nav-item:hover .nav-item-content i {
    color: var(--primary);
}

/* Nav item active */
.nav-item.active {
    background: var(--primary-soft);
}

.nav-item.active .nav-accent {
    transform: scaleY(1);
}

.nav-item.active .nav-item-content,
.nav-item.active .nav-item-content i {
    color: var(--primary);
    font-weight: var(--font-semibold);
}

/* Purple accent strip */
.nav-accent {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--primary);
    border-radius: 0 2px 2px 0;
    transform: scaleY(0);
    transition: transform var(--transition);
}

/* Mobile top bar */
.mobile-topbar {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--mobile-header-height);
    background: var(--background);
    border-bottom: 1px solid var(--gray-200);
    z-index: 1001;
    align-items: center;
    padding: 0 var(--space-4);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
}

.mobile-sidebar-toggle {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: var(--space-2);
    margin-right: var(--space-4);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-brand {
    flex: 1;
    font-weight: var(--font-semibold);
    font-size: var(--text-lg);
    color: var(--text-primary);
}

.mobile-user {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: var(--font-semibold);
    font-size: var(--text-sm);
}

/* Sidebar overlay */
.sidebar-overlay {
    pointer-events: none !important;
    display: none !important;
}

/* Notification bell */
.notification-bell {
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-500);
    transition: color var(--transition);
    min-width: 44px;
    min-height: 44px;
}

.notification-bell:hover {
    color: var(--primary-dark);
}

.notification-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--danger);
    color: white;
    font-size: 0.625rem;
    font-weight: var(--font-semibold);
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-full);
    min-width: 1.125rem;
    text-align: center;
    line-height: 1;
}

/* Notification dropdown */
.notification-dropdown {
    position: fixed;
    top: var(--mobile-header-height);
    right: var(--space-4);
    width: 380px;
    max-width: calc(100vw - 2rem);
    background: var(--background);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    z-index: var(--z-max);
    max-height: 500px;
    display: flex;
    flex-direction: column;
}

.notification-dropdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--gray-200);
}

.notification-item {
    display: flex;
    align-items: flex-start;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--gray-100);
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.notification-item:hover {
    background-color: var(--gray-50);
}

.notification-item.unread {
    background-color: var(--info-50);
}


/* ==========================================================================
   7. FORMS
   ========================================================================== */

.form-group {
    margin-bottom: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.form-label {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

/* ===== FORM CONTROLS — Standardized ===== */

.form-control {
    width: 100%;
    /* min-height (not a fixed height): keeps the standard 40px field but lets
       it GROW instead of shearing the glyphs when a page overrides padding or
       font-size (e.g. a local <style> bumping padding to 0.75rem / font to 1rem
       on a border-box field would otherwise crush the text box to ~12px). */
    min-height: var(--input-height);
    padding: var(--input-padding-y) var(--input-padding-x);
    font-size: 14px;
    line-height: 1.5;
    border: 1px solid var(--input-border-color);
    border-radius: var(--input-border-radius);
    background: var(--background);
    color: var(--text-primary);
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

textarea.form-control {
    height: auto;
    min-height: 80px;
    resize: vertical;
}

.form-control:focus {
    border-color: var(--primary);
    box-shadow: var(--input-focus-ring);
    outline: none;
}

.form-control:disabled {
    background: var(--gray-50);
    color: var(--text-muted);
    cursor: not-allowed;
}

.form-input,
.form-select,
.form-textarea {
    /* min-height, not height — see .form-control note above. Fixes selects
       (Country/Church Type etc.) clipping their text when a page overrides
       padding/font-size on top of a border-box fixed height. */
    min-height: var(--input-height);
    padding: var(--input-padding-y) var(--input-padding-x);
    font-size: 14px;
    line-height: 1.5;
    border: 1px solid var(--input-border-color);
    border-radius: var(--input-border-radius);
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

textarea.form-textarea {
    height: auto;
    min-height: 80px;
    resize: vertical;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: var(--input-focus-ring);
}

/* Checkboxes — 18px visual, 44px touch target via label */
.form-check-input[type="checkbox"],
.form-check-input[type="radio"] {
    width: 18px;
    height: 18px;
    border: 2px solid var(--gray-300);
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 150ms ease, border-color 150ms ease;
}

.form-check-input[type="radio"] {
    border-radius: 50%;
}

.form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}

.form-check-input:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.form-check {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Form grid */
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}

.form-group.span-2 {
    grid-column: span 2;
}

.form-actions {
    display: flex;
    gap: var(--space-3);
    justify-content: flex-end;
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
}

/* Search inputs */
.search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.search-input-wrapper i {
    position: absolute;
    left: var(--space-3);
    color: var(--text-muted);
    z-index: 1;
}

.search-input {
    width: 100%;
    padding: var(--space-3) var(--space-3) var(--space-3) var(--space-10);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: var(--text-sm);
    transition: all var(--transition-fast);
}

.search-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: var(--input-focus-ring);
}

/* Filter bar */
.filter-bar {
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-bottom: var(--space-6);
}

.filter-bar-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.filter-tabs {
    display: flex;
    gap: var(--space-1);
}

.filter-tab {
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--background);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.filter-tab:hover {
    background: var(--gray-50);
}

.filter-tab.active {
    background: var(--gradient-primary);
    color: white;
    border-color: var(--primary);
}

/* Filter select */
.filter-select {
    padding: 0.625rem 0.875rem;
    border: 1.5px solid var(--gray-300);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    background: var(--background);
    color: var(--text-secondary);
    min-width: 120px;
    transition: all var(--transition);
}

.filter-select:focus {
    border-color: var(--primary-dark);
    box-shadow: var(--input-focus-ring);
    outline: none;
}

/* View toggle */
.view-toggle-buttons {
    display: flex;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    padding: var(--space-1);
    gap: var(--space-1);
}

.view-toggle-btn {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: none;
    background: transparent;
    border-radius: var(--radius);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition);
}

.view-toggle-btn:hover {
    color: var(--text-secondary);
    background: var(--primary-soft);
}

.view-toggle-btn.active {
    background: linear-gradient(135deg, var(--primary-300, #c084fc), var(--primary-700, #7c3aed));
    color: white;
    box-shadow: 0 2px 4px rgba(139, 92, 246, 0.2);
}

/* Table controls */
.table-controls {
    background: var(--background);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin-bottom: var(--space-6);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-4);
    align-items: center;
}

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-8);
    padding-top: var(--space-8);
    border-top: 1px solid var(--gray-200);
}

.pagination-btn {
    padding: var(--space-2) var(--space-3);
    border: 1.5px solid var(--gray-300);
    border-radius: var(--radius-md);
    background: var(--background);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    text-decoration: none;
    transition: all var(--transition);
    cursor: pointer;
}

.pagination-btn:hover {
    border-color: var(--primary-dark);
    color: var(--primary-dark);
    text-decoration: none;
}

.pagination-btn.active {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    color: white;
}

.pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}


/* ==========================================================================
   8. UTILITIES
   ========================================================================== */

/* Truncate text */
.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Animation utilities */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideIn {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

.animate-fade-in {
    animation: fadeIn 0.3s ease-out;
}

.animate-slide-in {
    animation: slideIn 0.3s ease-out;
}

/* Feather icons compatibility */
[data-feather] {
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

/* Pointer events fix for icon buttons */
.mobile-sidebar-toggle svg,
.notification-bell svg,
.mobile-topbar-actions button svg {
    pointer-events: none;
}


/* ==========================================================================
   9. RESPONSIVE OVERRIDES
   ========================================================================== */

@media (max-width: 768px) {
    :root {
        --banner-margin-bottom: 1rem;
        --banner-padding: 1.25rem 1rem;
        --banner-border-radius: var(--radius-lg);
    }

    .sidebar-enhanced {
        transform: translateX(-100%);
        width: 100%;
        max-width: 320px;
    }

    .sidebar-enhanced.open {
        transform: translateX(0);
    }

    body.sidebar-open {
        overflow: hidden;
    }

    .mobile-topbar {
        display: flex;
    }

    .sidebar-overlay {
        position: fixed !important;
        display: none !important;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        pointer-events: none !important;
    }

    .sidebar-overlay.active {
        display: block !important;
        opacity: 1;
        visibility: visible;
        pointer-events: auto !important;
    }

    /* Page header responsive */
    .page-header-content,
    .modern-page-header .header-content {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }

    .modern-page-header {
        margin-top: var(--space-6);
        margin-bottom: var(--space-6);
    }

    .modern-page-header .page-title {
        font-size: var(--text-2xl);
    }

    /* Form grid responsive */
    .form-grid {
        grid-template-columns: 1fr;
    }

    .form-group.span-2 {
        grid-column: span 1;
    }

    /* Grids responsive */
    .members-grid,
    .services-grid,
    .quick-actions-grid {
        grid-template-columns: 1fr;
    }

    /* Filter responsive */
    .filter-bar-content {
        flex-direction: column;
        gap: var(--space-3);
    }

    .filter-tabs {
        overflow-x: auto;
        padding-bottom: var(--space-2);
    }

    /* Table controls responsive */
    .table-controls {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    /* Modern table mobile */
    .modern-table {
        border: none;
        box-shadow: none;
        background: transparent;
    }

    .modern-table thead {
        display: none;
    }

    .modern-table tbody {
        display: block;
    }

    .modern-table tbody tr {
        display: block;
        background: var(--background);
        border: 1px solid var(--gray-200);
        border-radius: var(--radius-lg);
        margin-bottom: var(--space-4);
        padding: var(--space-5);
        box-shadow: var(--shadow-sm);
    }

    .modern-table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: var(--space-3) 0;
        border-bottom: 1px solid var(--gray-100);
    }

    .modern-table tbody td:last-child {
        border-bottom: none;
    }

    .modern-table tbody td::before {
        content: attr(data-label);
        font-weight: var(--font-semibold);
        color: var(--text-secondary);
        font-size: var(--text-xs);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        flex-shrink: 0;
        min-width: 100px;
    }

    /* Quick actions responsive */
    .quick-actions {
        flex-direction: column;
        gap: var(--space-2);
    }

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

    /* Button group responsive */
    .btn-group {
        flex-direction: column;
        gap: 0.375rem;
        width: 100%;
    }

    /* Notification dropdown responsive */
    .notification-dropdown {
        width: calc(100vw - 2rem);
        right: var(--space-4);
    }

    /* Pagination responsive */
    .pagination {
        flex-wrap: wrap;
        gap: 0.375rem;
    }

    .pagination-info {
        width: 100%;
        text-align: center;
        margin: var(--space-2) 0;
    }

    /* Banner mobile adjustments */
    .org-banner-title,
    .super-admin-title,
    .app-banner-title {
        font-size: 1.375rem;
    }

    .org-banner-icon,
    .super-admin-logo,
    .app-banner-icon {
        width: 40px;
        height: 40px;
    }
}

@media (min-width: 769px) {
    /* Desktop sidebar */
    .mobile-topbar {
        display: none !important;
    }

    /* Ensure overlay never blocks desktop */
    .sidebar-overlay {
        display: none !important;
        pointer-events: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
}

@media (min-width: 1200px) {
    .org-banner-title,
    .super-admin-title,
    .app-banner-title {
        font-size: 2rem;
    }
}

@media (min-width: 1400px) {
    .members-grid,
    .services-grid {
        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    }
}


/* ==========================================================================
   10. PRINT STYLES
   ========================================================================== */

@media print {
    .sidebar,
    .sidebar-enhanced,
    .mobile-topbar,
    .quick-actions,
    .floating-action-button,
    .toast-container,
    .flash-messages,
    .notification-dropdown {
        display: none !important;
    }

    #main-content {
        margin-left: 0 !important;
        padding: 0 !important;
    }

    .container,
    .container-fluid {
        max-width: none !important;
        padding: 0 !important;
    }

    .card {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }

    a[href]::after {
        content: " (" attr(href) ")";
        font-size: var(--text-xs);
        color: var(--gray-500);
    }
}


/* ==========================================================================
   11. DARK MODE SUPPORT
   ==========================================================================
   Dark mode is now handled by crm-dark-mode.css via data-theme attribute.
   The anti-dark-mode defence has been removed in favour of proper theming.
   ========================================================================== */