/**
 * Media Inventory Forge - Professional Admin Interface Stylesheet
 * JIMRFORGE DESIGN SYSTEM v4.1
 *
 * Comprehensive styling system for the media inventory management interface.
 * Implements unified Jim R Forge brand design system with Inter font family,
 * enhanced typography scale, and professional design patterns.
 *
 * @package MediaInventoryForge
 * @version 4.1.0
 * @author Jim R Forge
 * @link https://jimrforge.com
 * @since 1.0.0
 *
 * Architecture Overview:
 * 0. Inter Font Loading (Local)
 * 1. Enhanced Design System Tokens (CSS Custom Properties)
 * 2. Global Resets & WordPress Integration
 * 3. Typography System (16px base, Inter font)
 * 4. Layout & Container Components
 * 5. Interactive Components (Enhanced Buttons, Toggles)
 * 6. Data Display Components
 * 7. Media Display Components
 * 8. Animation & State Management
 * 9. Responsive Design System
 *
 * Key Features:
 * - Inter font family for modern, professional UI
 * - 16px base font size (upgraded from 14px)
 * - Enhanced color palette with deeper browns and burnt orange links
 * - Professional collapsible panel system with dynamic height calculation
 * - Media asset visualization with thumbnails and metadata
 * - Enhanced button styles with dramatic hover effects
 * - 1280px max-width constraint
 * - 36px panel padding with double margins for notices
 *
 * Enhanced Color Palette:
 * - Primary: #3d2f1f (Enhanced Dark Brown)
 * - Secondary: #6d4c2f (Enhanced Medium Brown)
 * - Accent: #f4c542 (Brighter Gold)
 * - Links: #c97b3c (Burnt Orange for accessibility)
 * - Background: #faf6f0 (Warmer Cream)
 *
 * Typography:
 * - Font Family: Inter (locally loaded WOFF2)
 * - Base Size: 16px (enhanced from 14px)
 * - Scale: 12px, 14px, 16px, 18px, 20px, 24px, 32px
 *
 * Dependencies: Inter font files (WOFF2 format)
 * Browser Support: Modern browsers with CSS Grid, Flexbox, and Custom Properties
 */

/* ==========================================================================
   0. INTER FONT LOADING (LOCAL)
   ========================================================================== */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/Inter-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/Inter-Medium.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/Inter-SemiBold.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/Inter-Bold.woff2') format('woff2');
}

/* ==========================================================================
   1. DESIGN SYSTEM TOKENS
   ========================================================================== */

/**
 * CSS Custom Properties - Design System Foundation
 *
 * Centralized design tokens that define the visual language of the media
 * inventory application. These variables ensure consistency across all
 * components and enable easy theme modifications.
 *
 * Styleguide 1.0
 */
:root {
    /* ==========================================================================
       ENHANCED FONT FAMILIES
       ========================================================================== */
    --mif-font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --mif-font-heading: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --mif-font-mono: Consolas, Monaco, 'Courier New', monospace;

    /* ==========================================================================
       ENHANCED TYPOGRAPHY SCALE - 16PX BASE (JIMRFORGE STANDARD)
       ========================================================================== */
    --fs-xs: 12px;       /* Footnotes, fine print */
    --fs-sm: 14px;       /* Labels, secondary text, button text */
    --fs-md: 16px;       /* Body text - BASE */
    --fs-lg: 18px;       /* Emphasized text */
    --fs-xl: 20px;       /* H3 headings */
    --fs-xxl: 24px;      /* H2 headings */
    --fs-xxxl: 32px;     /* H1 headings, page titles */

    /* ==========================================================================
       LAYOUT CONSTRAINTS
       ========================================================================== */
    --mif-container-max: 1280px;    /* Max width constraint */
    --mif-content-max: 65ch;        /* Max text width */

    /* Core Brand Colors
       ========================================================================== */

    /**
     * ENHANCED Primary Brand Color Palette
     *
     * Enhanced deeper, richer colors for better visual hierarchy and
     * professional appearance. Upgraded from previous lighter variants.
     *
     * Styleguide 1.1
     */
    --clr-primary: #3d2f1f;         /* Deep Brown - headings, button text */
    --clr-secondary: #6d4c2f;       /* Medium Brown - body text, panel headers */
    --clr-secondary-hover: #5d3f26; /* Secondary hover - 15% darker */
    --clr-accent: #f4c542;          /* Gold - buttons, highlights */
    --clr-btn-hover: #dda824;       /* Gold hover - JIMRFORGE standard */
    --clr-accent-hover: #dda824;    /* Alias for backward compatibility */

    /**
     * Typography Color System (JIMRFORGE Standard)
     *
     * Updated to match JIMRFORGE-UI-STANDARDS.md v1.2.5
     *
     * Styleguide 1.2
     */
    --clr-txt: #6d4c2f;             /* Main body text */
    --clr-txt-dark: #3d2f1f;        /* Headings */
    --clr-txt-light: #ffffff;       /* Light text on dark backgrounds - white */
    --clr-txt-muted: #64748b;       /* Muted/disabled text (slate gray) */
    --clr-link: #ce6565;            /* Coral red - JIMRFORGE standard */
    --clr-link-hover: #b54545;      /* Darker coral - hover state */

    /**
     * ENHANCED Background & Surface Colors
     *
     * Warmer, refined background colors for better visual appeal.
     *
     * Styleguide 1.3
     */
    --clr-page-bg: #faf6f0;         /* Warmer cream (was #E8D8C3) */
    --clr-card-bg: #F0E6DA;
    --clr-light: #F5F1EC;
    --clr-tan: #e8dcc4;             /* Tan for secondary backgrounds */
    --clr-border: #c9b89a;          /* Slightly darker borders */

    /**
     * ENHANCED Interactive Element Colors
     *
     * Updated button and form control colors for enhanced design system.
     *
     * Styleguide 1.4
     */
    --clr-btn-hover: #dda824;       /* 15-20% darker gold */
    --clr-btn-active: #c99315;      /* Even darker for active state */
    --clr-btn-txt: #9C0202;
    --clr-btn-bdr: #DE0B0B;

    /**
     * ENHANCED Utility & Shadow Colors
     *
     * Updated shadow colors to match darker brown palette.
     *
     * Styleguide 1.5
     */
    --clr-shadow: rgba(61, 47, 31, 0.12);
    --clr-overlay: rgba(232, 216, 195, 0.95);
    --clr-secondary-hover: #dcc7a8;

    /**
     * Semantic State Colors
     *
     * Status and feedback colors for user interface states including
     * success, error, warning, and informational messages with hover variants.
     *
     * Styleguide 1.6
     */
    --clr-success: #10b981;
    --clr-success-dark: #059669;
    --clr-danger: #ef4444;
    --clr-danger-dark: #dc2626;
    --clr-info: #3b82f6;
    --clr-info-dark: #1d4ed8;
    --clr-warning: #f59e0b;
    --clr-warning-dark: #d97706;

    /**
     * Grayscale Palette System
     *
     * Neutral gray tones for backgrounds, borders, and subtle UI elements
     * following a consistent 50-900 scale from light to dark.
     *
     * Styleguide 1.7
     */
    --jimr-gray-50: #f8fafc;
    --jimr-gray-100: #f1f5f9;
    --jimr-gray-200: #e2e8f0;
    --jimr-gray-300: #cbd5e1;
    --jimr-gray-400: #94a3b8;
    --jimr-gray-500: #64748b;
    --jimr-gray-600: #475569;
    --jimr-gray-700: #334155;
    --jimr-gray-800: #1e293b;
    --jimr-gray-900: #0f172a;

    /**
     * Design System Measurements
     *
     * Consistent measurement values for creating cohesive spacing, sizing,
     * and proportional relationships throughout the interface.
     *
     * Styleguide 1.8
     */
    --jimr-border-radius: 3px;
    --jimr-border-radius-lg: 5px;
    --jimr-transition: all 0.2s ease;
    --jimr-transition-slow: all 0.3s ease;

    /**
     * ENHANCED Shadow Elevation System - 4 Tiers
     *
     * Upgraded shadow system using darker brown tones for consistency
     * with enhanced color palette.
     *
     * Styleguide 1.9
     */
    --clr-shadow-sm: 0 1px 2px rgba(61, 47, 31, 0.08);
    --clr-shadow: 0 4px 6px rgba(61, 47, 31, 0.12);
    --clr-shadow-lg: 0 10px 20px rgba(61, 47, 31, 0.15);
    --clr-shadow-xl: 0 20px 30px rgba(61, 47, 31, 0.18);

    /**
     * Spacing Scale System
     *
     * Consistent spacing values for margins, padding, and gaps following
     * a mathematical scale for visual harmony and consistent layouts.
     *
     * Styleguide 1.11
     */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;        /* New spacing value */
    --sp-9: 36px;        /* Panel padding */
    --sp-18: 72px;       /* Double panel padding for notices */

    /**
     * Border Radius Scale
     *
     * Styleguide 1.10
     */
    --jimr-border-radius-sm: 4px;   /* Thumbnails, small badges */

    /**
     * Table & Placeholder Colors
     *
     * Neutral grays used in expanded detail rows and thumbnail placeholders.
     * These are structural neutrals, not brand colors.
     *
     * Styleguide 1.12
     */
    --clr-table-details-bg: #f9f9f9;   /* Expanded details panel background */
    --clr-table-header-bg: #e0e0e0;    /* Detail table header row background */
    --clr-placeholder-bg: #f0f0f0;     /* Thumbnail/media placeholder background */
}

/* ==========================================================================
   2. GLOBAL RESETS & WORDPRESS INTEGRATION
   ========================================================================== */

/**
 * WordPress Admin Integration Overrides
 *
 * Override default WordPress admin styling to integrate seamlessly with
 * the JimRWeb brand design system for media inventory pages.
 *
 * Styleguide 2.0
 */

/**
 * Global Background System - SCOPED TO MIF PAGES ONLY
 *
 * Apply brand background and text colors ONLY to MIF plugin pages to avoid
 * affecting other WordPress admin areas (like the dashboard and menu).
 *
 * Styleguide 2.1
 */

/* Scope to MIF plugin pages only - target the .wrap container inside MIF pages */
.toplevel_page_media-inventory body,
.toplevel_page_media-inventory .wp-admin,
.toplevel_page_media-inventory #wpbody-content {
    background: var(--clr-page-bg) !important;
}

.toplevel_page_media-inventory .wrap {
    background: var(--clr-page-bg) !important;
    color: var(--clr-txt) !important;
    font-family: var(--mif-font-body) !important;
    font-size: var(--fs-md) !important;  /* 16px base */
}

/* ==========================================================================
   ENHANCED GLOBAL TYPOGRAPHY - SCOPED TO MIF PAGES ONLY
   ========================================================================== */

/* Force Inter font family ONLY on MIF pages */
.toplevel_page_media-inventory * {
    font-family: var(--mif-font-body) !important;
}

/* Force 16px base on all text elements ONLY on MIF pages */
.toplevel_page_media-inventory p,
.toplevel_page_media-inventory li,
.toplevel_page_media-inventory td,
.toplevel_page_media-inventory th,
.toplevel_page_media-inventory div,
.toplevel_page_media-inventory span,
.toplevel_page_media-inventory label,
.toplevel_page_media-inventory input,
.toplevel_page_media-inventory select,
.toplevel_page_media-inventory textarea,
.toplevel_page_media-inventory button {
    font-size: var(--fs-md) !important;  /* 16px */
    line-height: 1.6 !important;
}

/* Paragraphs with enhanced styling - SCOPED */
.toplevel_page_media-inventory p {
    color: var(--clr-txt) !important;
    font-weight: 500 !important;
    margin-bottom: var(--sp-4) !important;
}

/* Global Link Styling - Burnt Orange - SCOPED */
.toplevel_page_media-inventory a {
    color: var(--clr-link) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
    border-bottom: 1px solid transparent !important;
}

.toplevel_page_media-inventory a:hover {
    color: var(--clr-link-hover) !important;
    border-bottom-color: var(--clr-link-hover) !important;
}

.toplevel_page_media-inventory a:focus {
    outline: 2px solid var(--clr-link) !important;
    outline-offset: 2px !important;
    border-radius: 2px !important;
}

/* H3 Enhanced - SCOPED */
.toplevel_page_media-inventory h3 {
    font-family: var(--mif-font-heading) !important;
    font-size: var(--fs-xl) !important;  /* 20px */
    font-weight: 600 !important;
    line-height: 1.4 !important;
    color: var(--clr-txt-dark) !important;
    letter-spacing: -0.2px !important;
}

/* ==========================================================================
   ENHANCED BUTTON STYLES
   ========================================================================== */

/* All buttons - enhanced with lowercase and dramatic hover */
button, .button, input[type="submit"], input[type="button"] {
    font-family: var(--mif-font-body) !important;
    font-size: var(--fs-md) !important;  /* 16px */
    font-weight: 700 !important;
    text-transform: lowercase !important;
    padding: 12px 24px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    box-shadow: var(--clr-shadow-sm) !important;
    border: none !important;
}

/* Category headers - CAPITALIZE (override lowercase) */
.mif-info-toggle, .category-header, button.mif-info-toggle {
    text-transform: capitalize !important;
    /* border-radius removed - handled by .mif-info-toggle rule below */
}

/* Primary button (WordPress default blue buttons become gold) */
button.button-primary, .button-primary, input[type="submit"] {
    background: var(--clr-accent) !important;
    color: var(--clr-txt-dark) !important;
}

button.button-primary:hover, .button-primary:hover, input[type="submit"]:hover {
    background: var(--clr-btn-hover) !important;  /* 15-20% darker */
    transform: translate(-2px, -2px) !important;  /* Up and left */
    box-shadow: var(--clr-shadow-lg) !important;
}

button.button-primary:active, .button-primary:active, input[type="submit"]:active {
    background: var(--clr-btn-active) !important;  /* Even darker */
    transform: translate(-1px, -1px) !important;
    box-shadow: var(--clr-shadow) !important;
}

/* Secondary/default buttons */
button.button-secondary, .button-secondary, button:not(.button-primary) {
    background: var(--clr-secondary) !important;
    color: white !important;
}

button.button-secondary:hover, .button-secondary:hover {
    background: #5a3a20 !important;
    transform: translate(-2px, -2px) !important;
    box-shadow: var(--clr-shadow-lg) !important;
}

/* Disabled buttons */
button:disabled, .button:disabled, input:disabled {
    background: #9e9e9e !important;
    color: #fafafa !important;
    cursor: not-allowed !important;
    opacity: 0.7 !important;
    transform: none !important;
    box-shadow: none !important;
}

/* ==========================================================================
   ENHANCED LAYOUT & CONTAINERS
   ========================================================================== */

/* Main container padding upgrade */
.wrap, #wpbody-content > .wrap {
    padding: var(--sp-9) !important;  /* 36px */
    max-width: var(--mif-container-max) !important;  /* 1280px */
}

/* Notices and alerts - double margins */
.notice, .updated, .error, .warning {
    margin-left: var(--sp-18) !important;  /* 72px */
    margin-right: var(--sp-18) !important;
    font-size: var(--fs-md) !important;  /* 16px */
    padding: var(--sp-5) !important;
}

/* ==========================================================================
   3. TYPOGRAPHY SYSTEM
   ========================================================================== */

/**
 * Professional Typography Hierarchy
 *
 * Consistent typography system using serif fonts for headings and
 * maintaining proper visual hierarchy throughout the media inventory interface.
 *
 * Styleguide 3.0
 */

/**
 * ENHANCED Primary Heading Typography (H1)
 *
 * Main page titles with Inter font, enhanced sizing, and subtle text shadow.
 *
 * Styleguide 3.1
 */
h1 {
    color: var(--clr-txt-dark) !important;
    font-family: var(--mif-font-heading) !important;
    font-size: var(--fs-xxxl) !important;  /* 32px */
    font-weight: 700 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.3px !important;
    text-shadow: 0 1px 2px rgba(61, 47, 31, 0.1);
}

/**
 * ENHANCED Secondary Heading Typography (H2)
 *
 * Section headings with Inter font, bolder weight (700), enhanced sizing.
 *
 * Styleguide 3.2
 */
h2 {
    color: var(--clr-txt-dark) !important;
    font-family: var(--mif-font-heading) !important;
    font-size: var(--fs-xxl) !important;  /* 24px - upgraded */
    font-weight: 700 !important;  /* Bolder */
    line-height: 1.3 !important;
    letter-spacing: -0.3px !important;
    border-bottom-color: var(--clr-tan) !important;
    text-shadow: 0 1px 2px rgba(61, 47, 31, 0.1);
    margin: 0 0 var(--sp-5) 0;
    border-bottom: 2px solid var(--clr-tan);
    padding-bottom: var(--sp-3);
}

/* ==========================================================================
   4. LAYOUT & CONTAINER COMPONENTS
   ========================================================================== */

/**
 * Panel & Container System
 *
 * Content container components that provide consistent card-style
 * layout for media inventory sections with professional elevation.
 *
 * Styleguide 4.0
 */

/**
 * Base Panel Component
 *
 * Standard content panel with elevated card styling, brand colors,
 * and smooth transitions for interactive feedback and visual hierarchy.
 *
 * Styleguide 4.1
 */
.mif-panel {
    background: var(--clr-light);
    padding: var(--sp-5);
    border-radius: var(--jimr-border-radius-lg);
    border: 2px solid var(--clr-secondary);
    box-shadow: var(--clr-shadow-lg);
    transition: var(--jimr-transition);
}

/* ==========================================================================
   5. INTERACTIVE COMPONENTS (BUTTONS, TOGGLES)
   ========================================================================== */

/**
 * Button Component System
 *
 * Comprehensive button components with consistent styling, interactive
 * states, and specialized variants for different use cases in media management.
 *
 * Styleguide 5.0
 */

/**
 * Base Button Component
 *
 * Standard button with brand styling, accent colors, and
 * professional typography treatment with interactive feedback.
 *
 * Styleguide 5.1
 */
.mif-btn-legacy {
    background: var(--clr-accent);
    color: var(--clr-btn-txt);
    border: 2px solid var(--clr-btn-bdr);
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--jimr-border-radius);
    font-size: var(--fs-sm);
    font-weight: 600;
    font-style: italic;
    text-transform: lowercase;
    letter-spacing: 0.5px;
    transition: var(--jimr-transition-slow);
    cursor: pointer;
    box-shadow: var(--clr-shadow);
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    text-decoration: none;
}

/**
 * Button Interactive States
 *
 * Hover and focus states providing elevation and color feedback
 * for enhanced user experience and accessibility.
 *
 * Styleguide 5.1.1
 */
.mif-btn-legacy:hover {
    background: var(--clr-btn-hover);
    transform: translateY(-2px);
    box-shadow: var(--clr-shadow-lg);
}

/**
 * Button Variant System
 *
 * Specialized button variants for different semantic meanings
 * and interaction contexts throughout the interface.
 *
 * Styleguide 5.2
 */
.mif-btn-legacy-primary {
    background: var(--clr-info);
    color: white;
    border-color: var(--clr-info);
    font-style: normal;
    text-transform: none;
    letter-spacing: normal;
}

.mif-btn-legacy-danger {
    background: var(--clr-danger);
    color: white;
    border-color: var(--clr-danger-dark);
    font-style: normal;
    text-transform: none;
    letter-spacing: normal;
}

.mif-btn-legacy-ghost {
    background: var(--jimr-gray-500);
    color: white;
    border-color: var(--jimr-gray-600);
    font-style: normal;
    text-transform: none;
    letter-spacing: normal;
}

/* ==========================================================================
   JIMRFORGE BUTTON SYSTEM (v4.1.0)
   ========================================================================== */

/**
 * JIMRFORGE Standard Button System
 *
 * Primary button styling following JIMRFORGE-UI-STANDARDS.md v1.2.5
 * Gold background with brown text, dramatic hover effects, lowercase HTML text.
 *
 * Styleguide 5.2 (JIMRFORGE)
 */

/**
 * Primary Button (Gold)
 *
 * Standard JIMRFORGE button with gold background, brown text, and
 * up-and-left hover transform for dramatic interaction feedback.
 *
 * IMPORTANT: Using !important to override WordPress default button styles
 */
button.mif-btn,
.mif-btn {
    display: inline-flex !important;
    align-items: center !important;
    background: var(--clr-accent) !important;          /* Gold #f4c542 */
    color: var(--clr-primary) !important;              /* Brown text #3d2f1f */
    border: none !important;
    border-radius: 8px !important;                     /* JIMRFORGE standard */
    padding: 8px 16px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    font-style: normal !important;
    text-transform: none !important;                   /* Use lowercase in HTML */
    letter-spacing: 0.5px !important;
    cursor: pointer !important;
    position: relative !important;
    gap: 8px !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 4px 6px rgba(61, 47, 31, 0.12) !important;
}

button.mif-btn:hover,
.mif-btn:hover {
    background: var(--clr-btn-hover) !important;       /* Darker gold #dda824 */
    color: var(--clr-primary) !important;              /* Keep brown text on hover */
    transform: translate(-2px, -2px) !important;       /* UP and LEFT */
    box-shadow: 0 10px 20px rgba(61, 47, 31, 0.15) !important;
}

button.mif-btn:active,
.mif-btn:active {
    background: var(--clr-btn-hover) !important;
    color: var(--clr-primary) !important;
    transform: translate(-1px, -1px) !important;       /* Less lift when pressed */
    box-shadow: 0 4px 6px rgba(61, 47, 31, 0.12) !important;
}

button.mif-btn:disabled,
.mif-btn:disabled {
    background: #9e9e9e !important;                    /* Gray */
    color: #fafafa !important;
    opacity: 0.7 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

/**
 * Secondary Button (Cancel/Dismiss)
 *
 * Use for cancel buttons, dismiss actions, secondary choices in modals.
 * Slate gray background with white text.
 */
button.mif-btn-secondary,
.mif-btn-secondary {
    background: var(--clr-txt-muted) !important;       /* Slate gray #64748b */
    color: #fff !important;
    border: none !important;
    font-style: normal !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

button.mif-btn-secondary:hover,
.mif-btn-secondary:hover {
    background: #475569 !important;                    /* Darker slate */
    color: #fff !important;
}

/**
 * Danger Button (Destructive Actions)
 *
 * Use for delete confirmations, destructive actions.
 * Red background with white text.
 */
button.mif-btn-danger,
.mif-btn-danger {
    background: #dc2626 !important;                    /* Red */
    color: white !important;
}

button.mif-btn-danger:hover,
.mif-btn-danger:hover {
    background: #b91c1c !important;                    /* Darker red */
    color: white !important;
    transform: translate(-2px, -2px) !important;
    box-shadow: 0 10px 20px rgba(220, 38, 38, 0.15) !important;
}

/* ==========================================================================
   JIMRFORGE LAYOUT SYSTEM (v4.1.0)
   ========================================================================== */

/**
 * MIF Layout Classes
 *
 * Replaces inline styles with reusable CSS classes following
 * JIMRFORGE standards (1280px max-width, 36px panel padding).
 */

.mif-wrap {
    background: var(--clr-page-bg);
    padding: 20px;
    min-height: 100vh;
}

.mif-header-section {
    width: 1280px;
    max-width: 100%;
    margin: 0 auto 40px auto;           /* Add bottom margin for spacing */
}

.mif-header-section h1 {
    font-size: 32px;                    /* Large heading */
    font-weight: 700;
    color: var(--clr-primary);
    margin: 0 0 8px 0;
}

.mif-version-info {
    font-size: 11px;                    /* Slightly larger for readability */
    color: rgba(109, 76, 47, 0.5);
    font-style: italic;
    font-weight: 400;
    margin: 0 0 28px 0;                 /* Positive margin - space below version */
    width: 1280px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.mif-container {
    margin: 0 auto;
    max-width: 1280px;
    background: var(--clr-card-bg);
    border-radius: var(--jimr-border-radius-lg);
    box-shadow: 0 20px 30px rgba(61, 47, 31, 0.18);
    overflow: hidden;
    border: 2px solid var(--clr-primary);
}

.mif-panel {
    padding: 36px;                          /* JIMRFORGE standard */
}

.mif-panel-compact {
    padding: 20px;
}

.mif-grid-2col {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
}

.mif-grid-2col > * {
    flex: 1 1 400px;
    min-width: 0; /* allow shrinking below content's intrinsic width instead of forcing overflow */
}

/* MIF-specific toggle classes (aliases for .fcc- classes) */
.mif-info-toggle-section {
    margin-bottom: var(--sp-4);
    border: 2px solid var(--clr-secondary);
    border-radius: var(--jimr-border-radius-lg) !important;
    overflow: hidden;
    background: linear-gradient(135deg, var(--clr-light), var(--clr-card-bg));
    box-shadow: var(--clr-shadow);
}

.mif-info-toggle {
    width: 100%;
    background: var(--clr-secondary);
    color: var(--clr-txt-light) !important;
    border: none;
    padding: var(--sp-4) var(--sp-5);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--fs-lg);
    border-radius: var(--jimr-border-radius) var(--jimr-border-radius) 0 0 !important;
    font-weight: 600;
    transition: var(--jimr-transition-slow);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    text-align: left;
    text-transform: none;                   /* lowercase text in HTML */
}

.mif-info-toggle:hover {
    background: var(--clr-secondary-hover);  /* 15% darker brown */
    color: var(--clr-txt-light) !important;  /* Keep high contrast light text */
    transform: translateY(-1px);
}

.mif-toggle-icon {
    transition: transform 0.3s ease;
    font-size: var(--fs-md);
    color: var(--clr-txt-light) !important;
    flex-shrink: 0;
    margin-left: var(--sp-2);
}

.mif-info-toggle.expanded .mif-toggle-icon {
    transform: rotate(180deg);
}

.mif-info-content {
    padding: 0;
    background: var(--clr-light);
    color: var(--clr-txt);
    font-size: var(--fs-sm);
    line-height: 1.7;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s ease;
}

.mif-info-content.expanded {
    max-height: 2000px;
    padding: var(--sp-5);
}

/**
 * Professional Toggle System
 *
 * Advanced collapsible section components with smooth animations,
 * dynamic height calculation, and consistent visual feedback for
 * organizing media inventory content into manageable sections.
 *
 * Styleguide 5.3
 */

/**
 * Toggle Section Container
 *
 * Universal container for all collapsible sections with consistent
 * styling, gradient backgrounds, and professional elevation effects.
 *
 * Styleguide 5.3.1
 */
.mif-info-toggle-section {
    margin-bottom: var(--sp-4);  /* 16px - reduced from 24px for tighter spacing */
    border: 2px solid var(--clr-secondary);
    border-radius: var(--jimr-border-radius-lg) !important;  /* 5px - matches all corners */
    overflow: hidden;
    background: linear-gradient(135deg, var(--clr-light), var(--clr-card-bg));
    box-shadow: var(--clr-shadow);
}

/**
 * Toggle Button Header
 *
 * Clickable header with consistent styling across all toggle sections,
 * featuring proper spacing, typography, and interactive feedback.
 *
 * Styleguide 5.3.2
 */
.mif-info-toggle {
    width: 100%;
    background: var(--clr-secondary);
    color: var(--clr-txt-light) !important;
    border: none;
    padding: var(--sp-4) var(--sp-5);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--fs-lg);
    border-radius: var(--jimr-border-radius) var(--jimr-border-radius) 0 0 !important;  /* Round top corners only */
    /* 3px top corners to perfectly align with 5px panel corners (prevents "ears") */
    font-weight: 600;
    transition: var(--jimr-transition-slow);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    text-align: left;
}

/**
 * Toggle Button Interactive States
 *
 * Hover and active states providing visual feedback and
 * professional elevation effects for user interactions.
 *
 * Styleguide 5.3.3
 */
.mif-info-toggle:hover {
    background: var(--clr-secondary-hover);  /* 15% darker brown */
    color: var(--clr-txt-light) !important;  /* Keep high contrast light text */
    transform: translateY(-1px);
}

/**
 * Toggle Icon Animation System
 *
 * Chevron icon with smooth rotation animation for visual state feedback
 * and clear indication of expanded/collapsed content state.
 *
 * Styleguide 5.3.4
 */
.mif-toggle-icon {
    transition: transform 0.3s ease;
    font-size: var(--fs-md);
    color: var(--clr-txt-light) !important;
    flex-shrink: 0;
    margin-left: var(--sp-2);
}

.mif-info-toggle.expanded .mif-toggle-icon {
    transform: rotate(180deg);
}

/**
 * Dynamic Content Panel System
 *
 * Collapsible content area with dynamic height calculation,
 * smooth animations, and professional content presentation.
 *
 * Styleguide 5.3.5
 */
.mif-info-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
    background: var(--clr-light);
    color: var(--clr-txt);
}

.mif-info-content.expanded {
    max-height: none;
    padding: var(--sp-5);
}

/**
 * Horizontal scroll wrapper for category content. .mif-info-content's
 * overflow:hidden is load-bearing for the collapse/expand animation above,
 * but it also clips anything wider than the container - this wrapper gives
 * wide tables (Fonts, SVG, Default) their own scrollbar on narrow admin
 * columns instead of silently chopping off their right-hand columns.
 */
.mif-info-content-scroll {
    overflow-x: auto;
    max-width: 100%;
}

/* ==========================================================================
   6. DATA DISPLAY COMPONENTS
   ========================================================================== */

/**
 * Professional Data Display System
 *
 * Components for displaying structured media data including inventory tables,
 * category sections, and summary statistics with consistent professional styling.
 *
 * Styleguide 6.0
 */

/**
 * Inventory Table System
 *
 * Data tables specifically designed for media inventory with responsive
 * design, interactive hover states, and optimized typography for data display.
 *
 * Styleguide 6.1
 */

/**
 * Base Inventory Table Structure
 *
 * Main inventory table with rounded corners, shadow elevation,
 * and professional styling optimized for media data presentation.
 *
 * Styleguide 6.1.1
 */
.inventory-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 16px;
    background: white;
    border-radius: var(--jimr-border-radius);
    overflow: hidden;
    box-shadow: var(--clr-shadow);
}

/**
 * Table Cell Typography & Spacing
 *
 * Universal cell styling with consistent padding and typography
 * optimized for media metadata display and readability.
 *
 * Styleguide 6.1.2
 */
.inventory-table th,
.inventory-table td {
    padding: 12px;
    text-align: left;
    border-bottom: none; /* Remove divider lines between rows */
    font-size: var(--fs-sm);
}

/**
 * Table Header Styling
 *
 * Header cells with uppercase labels, neutral background, and professional
 * typography for clear data column identification and hierarchy.
 *
 * Styleguide 6.1.3
 */
.inventory-table th {
    background-color: var(--jimr-gray-100) !important;
    color: var(--jimr-gray-700);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: var(--fs-xs);
}

/**
 * Table Interactive States
 *
 * Hover effect disabled - not needed for inventory tables
 *
 * Styleguide 6.1.4
 */
/* .inventory-table tbody tr:hover {
    background-color: rgba(59, 130, 246, 0.05);
} */

/**
 * Alternating Row Colors for Font Table
 *
 * Zebra striping to delineate font families in the Fonts table
 *
 * Styleguide 6.1.5
 */
.inventory-table tbody tr:nth-child(odd) {
    background-color: rgba(0, 0, 0, 0.02);
}

.inventory-table tbody tr:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.05);
}

/**
 * Category Organization System
 *
 * Visual grouping components for organizing media by categories
 * with clear headers, professional separation, and consistent theming.
 *
 * Styleguide 6.2
 */

/**
 * Category Section Container
 *
 * Section wrapper with rounded corners and shadow elevation
 * for professional grouping of related media content items.
 *
 * Styleguide 6.2.1
 */
.category-section {
    margin-bottom: 32px;
    border-radius: var(--jimr-border-radius-lg);
    overflow: hidden;
    box-shadow: var(--clr-shadow);
}

/**
 * Category Header Typography
 *
 * Section header with brand background and professional typography
 * for clear category identification and visual hierarchy.
 *
 * Styleguide 6.2.2
 */
.category-header {
    background: var(--clr-secondary);
    color: var(--clr-txt-light);
    padding: 16px 20px;
    margin: 0;
    font-size: var(--fs-lg);
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/**
 * Summary Statistics Display
 *
 * Components for displaying aggregate data and file information
 * with clear visual hierarchy and consistent formatting for analysis.
 *
 * Styleguide 6.3
 */

/**
 * Summary Item Component
 *
 * Individual summary row with key-value layout, visual separation,
 * and consistent typography for statistical data presentation.
 *
 * Styleguide 6.3.1
 */
.summary-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--jimr-gray-200);
    font-size: var(--fs-sm);
}

/**
 * Summary Total Item
 *
 * Final summary item with emphasized styling and visual separation
 * for highlighting total values and key statistics.
 *
 * Styleguide 6.3.2
 */
.summary-item:last-child {
    border-bottom: none;
    font-weight: bold;
    border-top: 2px solid var(--clr-secondary);
    margin-top: 12px;
    padding-top: 12px;
    color: var(--clr-primary);
}

/**
 * File Details Typography
 *
 * Detailed file information display with constrained width
 * and optimized typography for technical metadata readability.
 *
 * Styleguide 6.3.3
 */
.file-details {
    font-size: var(--fs-xs);
    color: var(--jimr-gray-600);
    max-width: 300px;
    line-height: 1.4;
}

/* ==========================================================================
   7. MEDIA DISPLAY COMPONENTS
   ========================================================================== */

/**
 * Specialized Media Display System
 *
 * Components specifically designed for displaying media assets including
 * thumbnails, image galleries, and detailed media information with loading states.
 *
 * Styleguide 7.0
 */

/**
 * Thumbnail Display System
 *
 * Small image previews for tables and compact displays with
 * consistent sizing, styling, and professional presentation.
 *
 * Styleguide 7.1
 */

/**
 * Sample Images Container
 *
 * Horizontal layout container for displaying multiple sample thumbnails
 * in table cells and compact areas with proper spacing.
 *
 * Styleguide 7.1.1
 */
.sample-images {
    display: flex;
    gap: 4px;
    align-items: center;
}

/**
 * Sample Thumbnail Component
 *
 * Small thumbnail image with consistent sizing, rounded corners,
 * and brand border styling for professional appearance.
 *
 * Styleguide 7.1.2
 */
.sample-thumbnail {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: var(--jimr-border-radius);
    border: 1px solid var(--clr-secondary);
}

/**
 * Professional Image Gallery System
 *
 * Detailed image display components for comprehensive media viewing
 * with metadata, thumbnails, file information, and interactive elements.
 *
 * Styleguide 7.2
 */

/**
 * Images List Container
 *
 * Main container for image gallery with consistent spacing
 * and professional layout structure for content organization.
 *
 * Styleguide 7.2.1
 */
.images-list {
    margin-top: 16px;
}

/**
 * Image Item Card Component
 *
 * Individual image display card with elevation, borders,
 * structured layout, and professional styling for media presentation.
 *
 * Styleguide 7.2.2
 */
.image-item {
    flex: 1 1 280px;
    min-width: 0;
    margin-bottom: 20px;
    border: 2px solid var(--clr-secondary);
    border-radius: var(--jimr-border-radius-lg);
    overflow: hidden;
    background: white;
    box-shadow: var(--clr-shadow);
}

/**
 * Image Header Layout
 *
 * Header section containing thumbnail and primary image information
 * with flexible layout, consistent spacing, and responsive design.
 *
 * Styleguide 7.2.3
 */
.image-header {
    background: var(--clr-light);
    padding: 12px 16px;
    border-bottom: 1px solid var(--clr-secondary);
    font-size: var(--fs-md);
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

/**
 * Interactive Thumbnail System
 *
 * Large thumbnail display with hover effects, loading states,
 * error handling, and professional visual feedback for media preview.
 *
 * Styleguide 7.2.4
 */
.image-thumbnail {
    flex-shrink: 0;
    flex-grow: 0;
    width: 80px;
    min-width: 80px;
    max-width: 80px;
    height: 80px;
    min-height: 80px;
    max-height: 80px;
    border-radius: var(--jimr-border-radius);
    overflow: hidden;
    border: 2px solid var(--clr-secondary);
    background: var(--clr-light);
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.2s ease;
    background: var(--clr-light);
}

.image-thumbnail:hover img {
    transform: scale(1.05);
}

/**
 * Thumbnail State Management
 *
 * Visual feedback states for thumbnail loading, error conditions,
 * and content unavailability with consistent styling.
 *
 * Styleguide 7.2.5
 */
.image-thumbnail.loading {
    background: var(--clr-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--clr-txt);
    font-size: var(--fs-xs);
}

/* .image-thumbnail.error styles removed - no longer used
   No preview now uses base .image-thumbnail class with inline flex styling */

/**
 * Source Badge Styling
 *
 * Displays the source of media files (Media Library vs Theme)
 * with distinct visual styling for each type.
 */
.source-badge {
    display: inline-block;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-top: 4px;
}

.source-badge.source-media-library {
    background: rgba(76, 175, 80, 0.15);
    color: #2E7D32;
    border: 1px solid rgba(76, 175, 80, 0.3);
}

.source-badge.source-theme {
    background: rgba(33, 150, 243, 0.15);
    color: #1565C0;
    border: 1px solid rgba(33, 150, 243, 0.3);
}

.usage-badge {
    display: inline-block;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: 600;
    letter-spacing: 0.3px;
    margin-top: 4px;
    margin-left: 4px;
    background: rgb(from var(--clr-success) r g b / 15%);
    color: var(--clr-success-dark);
    border: 1px solid rgb(from var(--clr-success) r g b / 30%);
}

.usage-badge.unused {
    background: rgb(from var(--clr-danger) r g b / 12%);
    color: var(--clr-danger-dark);
    border: 1px solid rgb(from var(--clr-danger) r g b / 30%);
}

/**
 * Table-view Uses column - a plain number rather than a pill badge, with
 * the zero-count cell's whole background highlighted (not just a small
 * inline badge) since the column is narrow and the number alone is easy
 * to miss otherwise. Same --clr-danger token as .usage-badge.unused.
 */
.usage-count-cell {
    text-align: center;
    font-weight: 600;
}

.usage-count-cell.unused {
    background: rgb(from var(--clr-danger) r g b / 15%) !important;
    color: var(--clr-danger-dark);
}

.usage-locations-panel {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
}

.usage-location-item {
    background: white;
    border-radius: var(--jimr-border-radius);
    padding: 10px 12px;
    box-shadow: var(--clr-shadow);
    border: 1px solid var(--jimr-gray-200);
    font-size: var(--fs-sm);
}

.usage-location-list {
    margin: 6px 0 0 0;
    padding-left: 18px;
    list-style: disc;
}

.usage-location-list li {
    margin-bottom: 2px;
}

.usage-location-list a {
    color: var(--clr-link, var(--clr-secondary));
    text-decoration: none;
}

.usage-location-list a:hover {
    text-decoration: underline;
}

.usage-location-empty {
    margin: 6px 0 0 0;
    color: #C62828;
    font-style: italic;
}

/**
 * Image Information Display
 *
 * Text content and metadata display for image details
 * with responsive layout and clear typography hierarchy.
 *
 * Styleguide 7.2.6
 */
.image-info {
    flex-grow: 1;
    min-width: 0;
}

.main-dimensions {
    color: var(--jimr-gray-600);
    font-size: var(--fs-xs);
    font-style: italic;
}

.image-stats {
    color: var(--clr-txt);
    font-weight: normal;
    font-size: var(--fs-sm);
}

/**
 * Technical File Information System
 *
 * Detailed file information display with monospace typography
 * and consistent formatting for technical specifications.
 *
 * Styleguide 7.3
 */

/**
 * Image Files Container
 *
 * Container for file listing with consistent padding,
 * spacing, and professional layout structure.
 *
 * Styleguide 7.3.1
 */
.image-files {
    padding: 12px 16px;
}

/**
 * File Item Component
 *
 * Individual file entry with monospace typography and structured
 * layout for technical file information and metadata display.
 *
 * Styleguide 7.3.2
 */
.file-item {
    padding: 6px 0;
    border-bottom: 1px solid var(--jimr-gray-100);
    font-family: monospace;
    font-size: var(--fs-sm);
    line-height: 1.4;
}

.file-item:last-child {
    border-bottom: none;
}

/**
 * Semantic File Information Typography
 *
 * Specialized typography classes for different types of file information
 * with semantic color coding and emphasis for technical data.
 *
 * Styleguide 7.3.3
 */
.filename {
    font-weight: bold;
    color: var(--clr-secondary);
}

.file-type {
    color: var(--jimr-gray-600);
    font-style: italic;
}

.file-dimensions {
    color: var(--clr-txt);
}

.file-size {
    color: var(--clr-danger);
    font-weight: bold;
}

/* ==========================================================================
   TEMPLATE-SPECIFIC STYLES (Replaces Inline Styles)
   ========================================================================== */

/**
 * About Section Styles
 */
.mif-about-wrapper {
    color: var(--clr-txt);
    font-size: 14px;
    line-height: 1.6;
}

.mif-about-intro {
    margin: 0 0 16px 0;
    color: var(--clr-txt);
}

.mif-features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 20px;
}

.mif-feature-heading {
    color: var(--clr-secondary);
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 8px 0;
}

.mif-feature-text {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
}

.mif-about-notice {
    background: rgba(60, 32, 23, 0.1);
    padding: 12px 16px;
    border-radius: 6px;
    border-left: 4px solid var(--clr-accent);
    margin-top: 20px;
}

.mif-about-notice p {
    margin: 0;
    font-size: 13px;
    opacity: 0.95;
    line-height: 1.5;
    color: var(--clr-txt);
}

/**
 * Community Panel Styles
 */
.mif-community-section {
    margin-top: 40px;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
}

.mif-community-header {
    width: 100%;
    padding: 16px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--clr-secondary);
    cursor: default;
    font-weight: 600;
    font-size: 18px;
    border-radius: var(--jimr-border-radius-lg) var(--jimr-border-radius-lg) 0 0;
}

.mif-community-title {
    color: #FAF9F6;
    font-size: 24px;
    font-weight: 600;
}

.mif-community-content {
    background: #faf9f6;
    padding: 32px;
    border-radius: 0 0 var(--jimr-border-radius-lg) var(--jimr-border-radius-lg);
}

.mif-community-intro {
    margin: 0 0 20px 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--clr-txt);
}

.mif-community-heading {
    color: var(--clr-primary);
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 12px 0;
}

.mif-community-list {
    margin: 0 0 20px 0;
    padding-left: 20px;
    font-size: 16px;
    line-height: 1.8;
    color: var(--clr-txt);
}

.mif-community-text {
    margin: 0 0 16px 0;
    padding-left: 20px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--clr-txt);
}

.mif-community-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    padding-left: 20px;
}

/**
 * Community panel buttons - outlined style (transparent background, blue
 * border, coral text) matching how these same three buttons render on
 * Fluid Space Forge's Community & Tools panel, per Jim's request.
 */
.mif-community-link {
    background: transparent !important;
    border: 1px solid var(--clr-info) !important;
    color: var(--clr-link) !important;
}

.mif-community-link:hover {
    background: rgb(from var(--clr-info) r g b / 8%) !important;
    color: var(--clr-link-hover) !important;
}

/**
 * Toggle Header Text Styles
 */
.mif-toggle-text {
    color: #FAF9F6 !important;
}

/**
 * Scan Controls Styles
 */
.mif-section-heading {
    margin-bottom: 16px;
}

.mif-control-group {
    margin-bottom: 16px;
    padding: 12px;
    background: var(--clr-light);
    border-radius: var(--jimr-border-radius);
    border: 1px solid var(--clr-secondary);
}

.mif-control-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    cursor: pointer;
}

.mif-control-label-text {
    font-weight: 600;
    color: var(--clr-primary);
}

.mif-display-mode-group {
    display: flex;
    gap: 16px;
    align-items: center;
}

.mif-mode-option {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    color: var(--clr-txt);
}

.mif-mode-icon {
    font-size: 16px;
}

.mif-source-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
}

.mif-source-option {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    color: var(--clr-txt);
}

.mif-source-meta {
    font-size: 11px;
    color: #666;
}

.mif-button-group {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.mif-progress-wrapper {
    margin-bottom: 12px;
}

.mif-progress-label {
    color: var(--clr-primary);
}

.mif-progress-bar-container {
    background: #e0e0e0;
    height: 24px;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    margin-bottom: 8px;
}

.mif-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--clr-accent), var(--clr-btn-hover));
    transition: width 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mif-progress-text {
    font-size: 12px;
    font-weight: 600;
    color: var(--clr-primary);
}

.mif-progress-status {
    font-size: 13px;
    color: var(--clr-txt);
}

.mif-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.mif-summary-card {
    background: white;
    padding: 16px;
    border-radius: var(--jimr-border-radius);
    border-left: 4px solid var(--clr-accent);
    box-shadow: var(--clr-shadow-sm);
}

.mif-summary-label {
    font-size: 12px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.mif-summary-value {
    font-size: 24px;
    font-weight: 600;
    color: var(--clr-primary);
}

/**
 * File Distribution Chart Styles
 */
.mif-chart-container {
    padding: 16px;
}

.mif-chart-header {
    margin-bottom: 16px;
}

.mif-chart-wrapper {
    width: 100%;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mif-chart-canvas {
    max-width: 100%;
    max-height: 100%;
}

.mif-empty-state {
    padding: 40px;
    text-align: center;
    color: var(--clr-txt);
    font-style: italic;
}

.mif-empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.3;
}

.mif-empty-message {
    font-size: 16px;
    color: #666;
    margin-bottom: 8px;
}

.mif-empty-instruction {
    font-size: 14px;
    color: #999;
}

.mif-results-placeholder {
    min-height: 120px;
}

/* ==========================================================================
   8. ANIMATION & STATE MANAGEMENT
   ========================================================================== */

/**
 * Animation Library System
 *
 * Keyframe animations for loading indicators, visual feedback elements,
 * and enhanced user experience throughout the interface.
 *
 * Styleguide 8.0
 */

/**
 * Shimmer Loading Animation
 *
 * Loading animation that creates a shimmer effect for content placeholders
 * and progress indicators with smooth, professional movement.
 *
 * Styleguide 8.1
 */
@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

/* ==========================================================================
   9. RESPONSIVE DESIGN SYSTEM
   ========================================================================== */

/**
 * Professional Responsive Design System
 *
 * Breakpoint-specific styling adjustments for optimal media inventory
 * viewing experience across different device sizes with focus on usability.
 *
 * Styleguide 9.0
 */

/**
 * Mobile Optimization (768px and below)
 *
 * Comprehensive mobile optimizations for improved usability on small screens
 * with enhanced touch targets and readable content presentation.
 *
 * Styleguide 9.1
 */
@media (max-width: 768px) {

    /**
     * Mobile Container Adjustments
     *
     * Layout optimizations for main containers and wrappers
     * ensuring proper spacing and usability on mobile devices.
     *
     * Styleguide 9.1.1
     */
    .mif-header-section {
        width: 100% !important;
        padding: 0 16px;
    }

    .media-inventory-container {
        margin: 0 !important;
    }

    /**
     * Mobile Table Optimizations
     *
     * Table styling adjustments for improved readability and
     * usability on small screens with condensed layouts.
     *
     * Styleguide 9.1.2
     */
    .inventory-table th,
    .inventory-table td {
        padding: 8px 6px;
        font-size: var(--fs-xs);
    }

    /**
     * Mobile Image Display Adjustments
     *
     * Responsive layout adjustments for image headers and thumbnail
     * displays optimized for touch interaction and readability.
     *
     * Styleguide 9.1.3
     */
    .image-header {
        flex-direction: column;
        gap: 12px;
        align-items: center;
        text-align: center;
    }

    .image-thumbnail {
        width: 100px;
        height: 100px;
    }

    .image-info {
        text-align: center;
    }
}

/* ==========================================================================
   TRI-STATE CHECKBOX STYLES
   ========================================================================== */

/**
 * Tri-State Checkbox for Scan Sources Toggle
 *
 * Ensures indeterminate state is visually distinct with proper styling.
 * The indeterminate state shows as a horizontal dash/line to indicate
 * partial selection.
 *
 * States:
 * - Unchecked: empty box
 * - Indeterminate: box with horizontal dash
 * - Checked: box with checkmark
 *
 * @since 4.0.0
 */
#mif-toggle-all-sources {
    /* Ensure checkbox is visible and properly sized */
    appearance: auto;
    -webkit-appearance: checkbox;
    -moz-appearance: checkbox;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

#mif-toggle-all-sources:indeterminate {
    /* Browser default indeterminate styling should apply */
    /* This ensures the dash/line is visible */
    opacity: 1;
}

/* ==========================================================================
   UTILITY & COMPONENT STYLES (moved from inline)
   ========================================================================== */

/* Hidden initial state — jQuery .show()/.hide() overrides this via style.display */
.mif-hidden {
    display: none;
}

.mif-control-label {
    display: block;
}

#progress-bar {
    width: 0%;
}

.mif-progress-shimmer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: shimmer 2s infinite;
}

.mif-summary-stats {
    margin-top: 20px;
}

/* ==========================================================================
   END OF MEDIA INVENTORY FORGE ADMIN STYLESHEET
   ========================================================================== */