/**
 * notrubberduck - Red Team Theme
 * Offensive Security | Pentesting | Red Team Operations
 * Professional hacker aesthetic with clean organization
 */

/* =============================================================================
   CSS VARIABLES - Red Team Color Palette
   ============================================================================= */

:root {
    /* ========================================================================
       UNIFIED COLOR PALETTE - Red Team Theme
       ======================================================================== */
    
    /* Dark Backgrounds - Consistent Dark Theme */
    --bg-primary: #0d0d0d;
    --bg-secondary: #151515;
    --bg-tertiary: #1a1a1a;
    --bg-card: #171717;
    --bg-hover: #202020;
    
    /* Primary Accent - Red (Main Theme Color) */
    --accent-primary: #ff2e4c;
    --accent-primary-dark: #cc1f3a;
    --accent-primary-light: rgba(255, 46, 76, 0.1);
    --accent-primary-glow: rgba(255, 46, 76, 0.3);
    
    /* Secondary Accent - Cyan (For Tools/Success) */
    --accent-secondary: #00d9ff;
    --accent-secondary-dark: #00a8cc;
    --accent-secondary-light: rgba(0, 217, 255, 0.1);
    --accent-secondary-glow: rgba(0, 217, 255, 0.3);
    
    /* Legacy Support - Map old names to new unified names */
    --red-primary: var(--accent-primary);
    --red-dark: var(--accent-primary-dark);
    --red-light: var(--accent-primary-light);
    --red-glow: var(--accent-primary-glow);
    
    --matrix-green: var(--accent-secondary);
    --matrix-green-dim: var(--accent-secondary-dark);
    --matrix-light: var(--accent-secondary-light);
    --matrix-glow: var(--accent-secondary-glow);
    
    /* Status Colors - Unified */
    --color-success: var(--accent-secondary);
    --color-warning: #ff9500;
    --color-danger: var(--accent-primary);
    --color-info: var(--accent-secondary);
    
    /* Legacy Support */
    --warning: var(--color-warning);
    --danger: var(--color-danger);
    --success: var(--color-success);
    --info: var(--color-info);
    
    /* Text Colors - Unified Hierarchy */
    --text-primary: #e8e8e8;
    --text-secondary: #999999;
    --text-muted: #666666;
    --text-bright: #ffffff;
    --text-inverse: #0d0d0d;
    
    /* Border Colors - Unified */
    --border-color: #2a2a2a;
    --border-light: #333333;
    --border-primary: var(--accent-primary);
    --border-secondary: var(--accent-secondary);
    --divider: #1f1f1f;
    
    /* Legacy Support */
    --border-red: var(--border-primary);
    --border-green: var(--border-secondary);
    
    /* Shadows & Glows - Unified */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
    --shadow-primary: 0 0 20px var(--accent-primary-glow);
    --shadow-secondary: 0 0 20px var(--accent-secondary-glow);
    --shadow-card: var(--shadow-md);
    
    /* Legacy Support */
    --shadow-red: var(--shadow-primary);
    --shadow-green: var(--shadow-secondary);
    
    /* Typography - Professional & Unified */
    --font-mono: 'Fira Code', 'JetBrains Mono', 'SF Mono', 'Consolas', monospace;
    --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    
    /* Font Sizes - Professional Scale */
    --text-xs: 0.75rem;      /* 12px */
    --text-sm: 0.875rem;     /* 14px */
    --text-base: 1rem;        /* 16px */
    --text-lg: 1.125rem;     /* 18px */
    --text-xl: 1.25rem;      /* 20px */
    --text-2xl: 1.5rem;      /* 24px */
    --text-3xl: 1.875rem;    /* 30px */
    --text-4xl: 2.25rem;     /* 36px */
    
    /* Line Heights - Professional Readability */
    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.75;
    
    /* Font Weights */
    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    
    /* Spacing - 8px Grid System */
    --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 */
    
    /* Border Radius - Professional & Consistent */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    
    /* Transitions - Smooth & Professional */
    --transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition: var(--transition-base);
    
    /* Z-Index Scale */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-modal: 300;
    --z-tooltip: 400;
}

/* =============================================================================
   BASE STYLES
   ============================================================================= */

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

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-ui);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--text-primary);
    background-color: var(--bg-primary);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Subtle professional texture - optional, can be disabled */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 20% 50%, rgba(255, 46, 76, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(0, 217, 255, 0.03) 0%, transparent 50%);
    pointer-events: none;
    z-index: var(--z-base);
    opacity: 1;
}

::selection {
    background-color: var(--red-primary);
    color: white;
}

/* Links */
a {
    color: var(--accent-primary);
    text-decoration: none;
    transition: var(--transition-base);
    font-weight: var(--weight-medium);
}

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

*:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
    box-shadow: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--accent-primary);
}

/* =============================================================================
   NAVIGATION - Command Bar Style
   ============================================================================= */

.navbar {
    background-color: rgba(21, 21, 21, 0.95);
    border-bottom: 2px solid var(--border-primary);
    padding: var(--space-4) var(--space-6);
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    backdrop-filter: blur(12px) saturate(180%);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    transition: var(--transition-base);
}

.nav-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 700;
    font-size: var(--text-lg);
    color: var(--red-primary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.brand-icon {
    color: var(--red-primary);
    font-size: var(--text-xl);
    animation: pulse 3s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-2);
}

.toggle-bar {
    width: 24px;
    height: 2px;
    background-color: var(--red-primary);
    transition: var(--transition);
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: var(--space-1);
    align-items: center;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    color: var(--text-secondary);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    font-size: var(--text-sm);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.nav-link::before {
    content: '>';
    color: var(--red-primary);
    opacity: 0;
    margin-left: -10px;
    transition: var(--transition);
}

.nav-link:hover::before,
.nav-link.active::before {
    opacity: 1;
    margin-left: 0;
}

.nav-link:hover {
    color: var(--text-bright);
    border-color: var(--border-red);
    background-color: rgba(255, 46, 76, 0.05);
}

.nav-link.active {
    color: var(--red-primary);
    border-color: var(--border-red);
    background-color: var(--red-light);
    box-shadow: 0 0 10px var(--red-glow);
}

/* Mobile Navigation - Initial styles (will be overridden by more specific media query) */
@media (max-width: 768px) {
    .nav-toggle {
        display: flex;
    }
    
    .nav-container {
        position: relative;
    }
}

/* =============================================================================
   LAYOUT
   ============================================================================= */

.main-content {
    flex: 1;
    padding: var(--space-8) var(--space-6);
    width: 100%;
    overflow-x: visible;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding: 0 var(--space-4);
    overflow-x: visible;
}

/* =============================================================================
   PAGE HEADER - Terminal Style
   ============================================================================= */

.page-header {
    margin-bottom: var(--space-10);
    padding-bottom: var(--space-6);
    border-bottom: 2px solid var(--border-color);
    position: relative;
}

.page-header::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 120px;
    height: 2px;
    background: linear-gradient(90deg, var(--accent-primary), transparent);
    box-shadow: var(--shadow-primary);
}

.page-header.centered {
    text-align: center;
}

.page-header.centered::after {
    left: 50%;
    transform: translateX(-50%);
}

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

.page-header.flex-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.page-title {
    font-size: var(--text-3xl);
    font-weight: var(--weight-bold);
    color: var(--text-bright);
    margin: 0 0 var(--space-2) 0;
    line-height: var(--leading-tight);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    position: relative;
    font-family: var(--font-mono);
}

.page-title::before {
    content: '# ';
    color: var(--accent-primary);
    font-weight: var(--weight-bold);
}

.page-subtitle {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    margin-top: var(--space-2);
    font-family: var(--font-ui);
}

.quote-text {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-style: italic;
    margin-top: var(--space-3);
    padding-left: var(--space-4);
    border-left: 2px solid var(--red-primary);
}

@media (max-width: 768px) {
    .page-header-content {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .page-title {
        font-size: var(--text-2xl);
    }
}

/* =============================================================================
   PANELS - Terminal Windows
   ============================================================================= */

.panel {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-top: 2px solid var(--accent-primary);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-8);
    overflow: visible;
    box-shadow: var(--shadow-card);
    transition: var(--transition-base);
    position: relative;
}

/* Ensure panels allow content to overflow for scrolling tables */
/* Note: Using direct child selector for better browser compatibility */
.panel > .panel-body > .admin-table {
    /* Table will extend beyond padding on mobile via media queries */
}

.panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent-primary), transparent);
    opacity: 0.8;
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-5) var(--space-6);
    background-color: rgba(26, 26, 26, 0.5);
    border-bottom: 1px solid var(--border-color);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.panel-title {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--text-bright);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: var(--font-mono);
    margin: 0;
    position: relative;
}

.panel-title::before {
    content: '## ';
    color: var(--accent-primary);
    font-weight: var(--weight-bold);
}

.panel-icon {
    color: var(--accent-primary);
    font-size: var(--text-lg);
    margin-right: var(--space-1);
}

.panel-count {
    font-size: var(--text-sm);
    color: var(--text-muted);
    white-space: nowrap;
}

.panel-link {
    font-size: var(--text-sm);
    color: var(--accent-primary);
    transition: var(--transition-base);
}

.panel-link:hover {
    color: var(--text-bright);
}

.panel-header-right {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.panel-body {
    padding: var(--space-6);
    background-color: var(--bg-card);
    overflow: visible;
}

/* =============================================================================
   GRIDS
   ============================================================================= */

.projects-grid,
.blog-posts-grid,
.blog-posts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-6);
}

.projects-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-6);
}

@media (max-width: 1024px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-6);
    }
}

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

/* =============================================================================
   PROJECT CARDS - Target Cards
   ============================================================================= */

/* Project Cards (for grid layout) */
.project-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-top: 2px solid var(--red-primary);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: var(--space-3);
    position: relative;
    overflow: hidden;
}

/* Unified color theme - both targets and tools use secondary accent (cyan) */
.project-card[data-type="tool"] {
    border-top-color: var(--accent-secondary);
}

.project-card:hover {
    border-color: var(--border-red);
    box-shadow: var(--shadow-red);
    transform: translateY(-2px);
}

/* Project Items (for list layout - like reports) */
.project-item {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-top: 2px solid var(--accent-secondary);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    transition: var(--transition-base);
    position: relative;
    overflow: hidden;
}

.project-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent-secondary), transparent);
    opacity: 0.8;
}

/* Unified color theme - both targets and tools use secondary accent (cyan) */
.project-item[data-type="tool"] {
    border-top-color: var(--accent-secondary);
}

.project-item[data-type="tool"]::before {
    background: linear-gradient(90deg, var(--accent-secondary), transparent);
}

.project-item:hover {
    border-color: var(--border-secondary);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
    background-color: var(--bg-hover);
}

.project-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-4);
    gap: var(--space-4);
    flex-wrap: wrap;
}

.project-name {
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--text-bright);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 1;
    min-width: 0;
    line-height: 1.3;
}

.project-item .project-name {
    font-family: var(--font-ui);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.project-prefix {
    color: var(--accent-secondary);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: 1.5px;
    font-family: var(--font-mono);
    flex-shrink: 0;
}

/* Unified prefix color - both use secondary accent (cyan) */
.project-item[data-type="tool"] .project-prefix {
    color: var(--accent-secondary);
}

.project-type-icon {
    font-size: var(--text-lg);
    flex-shrink: 0;
}

.project-type-badge {
    display: inline-block;
    font-size: var(--text-xs);
    color: var(--red-primary);
    background-color: transparent;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    border: 1px solid var(--red-primary);
    margin: 0;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* Unified badge styling - both targets and tools use secondary accent (cyan) */
.project-card[data-type="tool"] .project-type-badge {
    color: var(--accent-secondary);
    border-color: var(--accent-secondary);
}

.project-status {
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    white-space: nowrap;
    border: 1px solid;
}

.project-status.active {
    background-color: var(--matrix-light);
    color: var(--matrix-green);
    border-color: var(--matrix-green);
    box-shadow: 0 0 10px var(--matrix-glow);
}

.project-status.completed {
    background-color: rgba(0, 217, 255, 0.1);
    color: var(--info);
    border-color: var(--info);
}

.project-status.on-hold {
    background-color: rgba(255, 149, 0, 0.1);
    color: var(--warning);
    border-color: var(--warning);
}

.project-content {
    flex: 1;
    margin: 0;
}

.project-description {
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
    font-size: var(--text-base);
    font-family: var(--font-ui);
    margin: 0;
}

/* Ensure project-content spacing is consistent */
.project-content {
    margin-top: 0;
}

.project-item .project-description {
    margin-top: var(--space-3);
}

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

.project-item .project-footer {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-color);
}


.project-link {
    color: var(--accent-secondary);
    font-weight: var(--weight-semibold);
    font-size: var(--text-sm);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--accent-secondary);
    background-color: transparent;
    border-radius: var(--radius-md);
    transition: var(--transition-base);
    letter-spacing: 0.3px;
    font-family: var(--font-ui);
    position: relative;
    overflow: hidden;
}

.project-link::before {
    content: '→';
    font-weight: var(--weight-bold);
    transition: var(--transition-base);
}

.project-link:hover {
    background-color: var(--accent-secondary);
    color: var(--bg-primary);
    box-shadow: var(--shadow-secondary);
    transform: translateX(2px);
    border-color: var(--accent-secondary);
}

.project-link:hover::before {
    transform: translateX(2px);
}

/* Unified link styling - both targets and tools use primary accent */

/* =============================================================================
   BLOG CARDS - Intel Reports
   ============================================================================= */

.blog-card,
.blog-post-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-top: 2px solid var(--red-primary);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.blog-card:hover,
.blog-post-card:hover {
    border-color: var(--border-red);
    box-shadow: var(--shadow-red);
    transform: translateY(-2px);
}

.blog-card-header,
.post-header {
    margin: 0;
}

.blog-card-header::before,
.post-header::before {
    content: '';
    display: none;
}

.blog-card-title,
.post-title {
    font-size: var(--text-lg);
    font-weight: 600;
    margin: 0 0 4px 0;
    line-height: 1.2;
}

.blog-card-title a,
.post-title a {
    color: var(--text-bright);
}

.blog-card-title a:hover,
.post-title a:hover {
    color: var(--red-primary);
}

.blog-card-date,
.post-date {
    color: var(--text-muted);
    font-size: var(--text-xs);
    display: block;
    margin: 0 0 6px 0;
}

/* Override for blog post meta - ensure inline alignment */
.blog-post-meta .post-date {
    display: inline;
    margin: 0;
    vertical-align: baseline;
    font-size: inherit;
}

.post-meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-muted);
    font-size: var(--text-xs);
    margin: 0 0 6px 0;
}

.blog-card-excerpt,
.post-excerpt {
    flex: 1;
    color: var(--text-secondary);
    line-height: 1.4;
    font-size: var(--text-sm);
    font-family: var(--font-ui);
    margin: 0 0 8px 0;
}

.blog-card-excerpt p,
.post-excerpt p {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.blog-card-footer,
.post-footer {
    margin-top: auto;
    padding-top: 0;
    display: flex;
    justify-content: flex-start;
}

.blog-card-link,
.read-more-btn {
    color: var(--red-primary);
    font-weight: 600;
    font-size: var(--text-xs);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--red-primary);
    background-color: transparent;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.blog-card-link::before,
.read-more-btn::before {
    content: '>';
    font-weight: 700;
}

.blog-card-link:hover,
.read-more-btn:hover {
    background-color: var(--red-primary);
    color: white;
    box-shadow: 0 0 10px var(--red-glow);
}

/* =============================================================================
   REPORTS LIST - Report Items (for blog_list.html)
   ============================================================================= */

.reports-list,
.projects-list,
.notes-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

/* Compact view for many items - better scanning */
@media (min-width: 1024px) {
    .reports-list,
    .projects-list,
    .notes-list {
        gap: var(--space-5);
    }
}

.report-item {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-top: 2px solid var(--accent-secondary);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    transition: var(--transition-base);
    position: relative;
    overflow: hidden;
}

.report-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent-secondary), transparent);
    opacity: 0.8;
}

.report-item:hover {
    border-color: var(--border-secondary);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
    background-color: var(--bg-hover);
}

/* Unified header styles for all item types */
.report-header,
.note-header,
.project-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-4);
    gap: var(--space-4);
    flex-wrap: wrap;
}

.report-title,
.note-title,
.project-name {
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    margin: 0;
    line-height: var(--leading-tight);
    flex: 1;
    min-width: 0;
    font-family: var(--font-ui);
}

.report-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.report-title::before {
    content: '';
}

.report-prefix {
    color: var(--accent-secondary);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: 1.5px;
    font-family: var(--font-mono);
    flex-shrink: 0;
}

.report-title a {
    color: var(--text-bright);
    text-decoration: none;
    transition: var(--transition-base);
}

.report-title a:hover {
    color: var(--accent-secondary);
}

.report-date,
.note-date,
.project-date {
    color: var(--text-muted);
    font-size: var(--text-sm);
    white-space: nowrap;
}

.project-meta {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
    flex-wrap: nowrap;
}

.project-status-badge {
    font-size: var(--text-xs);
    color: var(--text-muted);
    white-space: nowrap;
}

.report-content,
.note-content,
.project-content {
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
    font-size: var(--text-base);
    margin-top: 0;
    font-family: var(--font-ui);
}

.report-description {
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
    font-size: var(--text-base);
    font-family: var(--font-ui);
    margin: 0;
}

.report-item .report-description {
    margin-top: var(--space-3);
}

/* Limit content height for better scanning - show first 3 lines */
.report-description,
.note-content p:first-child,
.project-description {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: calc(var(--leading-relaxed) * var(--text-base) * 3);
}

.report-footer {
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-start;
}

.report-link {
    color: var(--accent-secondary);
    font-weight: var(--weight-semibold);
    font-size: var(--text-sm);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--accent-secondary);
    background-color: transparent;
    border-radius: var(--radius-md);
    transition: var(--transition-base);
    letter-spacing: 0.3px;
    font-family: var(--font-ui);
    position: relative;
    overflow: hidden;
    text-decoration: none;
}

.report-link::before {
    content: '→';
    font-weight: var(--weight-bold);
    transition: var(--transition-base);
}

.report-link:hover {
    background-color: var(--accent-secondary);
    color: var(--bg-primary);
    box-shadow: var(--shadow-secondary);
    transform: translateX(2px);
    border-color: var(--accent-secondary);
}

.report-link:hover::before {
    transform: translateX(2px);
}

/* =============================================================================
   NOTES - Field Notes
   ============================================================================= */

.notes-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.note-item {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-top: 2px solid var(--accent-secondary);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    transition: var(--transition-base);
    position: relative;
    overflow: hidden;
}

.note-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent-secondary), transparent);
    opacity: 0.8;
}

.note-item:hover {
    border-color: var(--border-secondary);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
    background-color: var(--bg-hover);
}

.note-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
    gap: var(--space-4);
}

.note-title {
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    color: var(--text-bright);
    margin: 0;
    line-height: var(--leading-tight);
    flex: 1;
    min-width: 0;
    font-family: var(--font-ui);
}

.note-title::before {
    content: '[ NOTE ] ';
    color: var(--accent-secondary);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: 1.5px;
    font-family: var(--font-mono);
    margin-right: var(--space-2);
}



/* =============================================================================
   BUTTONS - Command Buttons
   ============================================================================= */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-weight: var(--weight-medium);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: var(--transition-base);
    text-decoration: none;
    font-family: var(--font-ui);
    letter-spacing: 0.3px;
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: var(--transition-base);
}

.btn:hover::before {
    left: 100%;
}

.btn:hover {
    background-color: var(--bg-hover);
    border-color: var(--border-primary);
    color: var(--text-bright);
    box-shadow: var(--shadow-primary);
    transform: translateY(-1px);
}

.btn-primary {
    background-color: var(--accent-primary);
    border-color: var(--accent-primary);
    color: white;
    font-weight: var(--weight-semibold);
}

.btn-primary:hover {
    background-color: var(--accent-primary-dark);
    border-color: var(--accent-primary-dark);
    box-shadow: var(--shadow-primary);
    transform: translateY(-1px);
}

.btn-danger {
    background-color: transparent;
    border-color: var(--danger);
    color: var(--danger);
}

.btn-danger:hover {
    background-color: rgba(255, 46, 76, 0.1);
}

.btn-sm {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
}

.btn-block {
    width: 100%;
}

/* =============================================================================
   FORMS - Command Input
   ============================================================================= */

/* File Upload Drag & Drop Styles */
.file-upload-container {
    margin-bottom: var(--space-4);
}

.file-drop-zone {
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    text-align: center;
    background-color: var(--bg-tertiary);
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: var(--space-3);
}

.file-drop-zone:hover {
    border-color: var(--accent-primary);
    background-color: var(--bg-hover);
}

.file-drop-zone.drag-over {
    border-color: var(--accent-primary);
    background-color: var(--accent-primary-light);
    transform: scale(1.02);
}

.file-drop-content {
    pointer-events: none;
}

.file-drop-content p {
    margin: var(--space-2) 0;
    color: var(--text-primary);
    font-size: var(--text-base);
}

.file-drop-content small {
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.upload-status {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    margin-top: var(--space-2);
    font-size: var(--text-sm);
}

.upload-status.success {
    background-color: var(--accent-secondary-light);
    color: var(--accent-secondary);
    border: 1px solid var(--accent-secondary);
}

.upload-status.error {
    background-color: var(--accent-primary-light);
    color: var(--accent-primary);
    border: 1px solid var(--accent-primary);
}

.upload-status.loading {
    background-color: var(--bg-hover);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.form-group {
    margin-bottom: var(--space-5);
}

.form-label {
    display: block;
    color: var(--text-primary);
    font-weight: 500;
    margin-bottom: var(--space-2);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-label::before {
    content: '> ';
    color: var(--red-primary);
}

.form-input,
.form-select,
textarea.form-input {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: var(--text-base);
    transition: var(--transition);
}

.form-input:focus,
.form-select:focus,
textarea.form-input:focus {
    outline: none;
    border-color: var(--red-primary);
    background-color: var(--bg-secondary);
    box-shadow: 0 0 10px var(--red-glow);
}

.form-input::placeholder {
    color: var(--text-muted);
}

.form-error {
    color: var(--danger);
    font-size: var(--text-sm);
    margin-top: var(--space-2);
}

.form-error::before {
    content: '[ERROR] ';
}

.form-help {
    color: var(--text-muted);
    font-size: var(--text-sm);
    margin-top: var(--space-2);
    font-family: var(--font-ui);
}

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

.form-actions {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-6);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

/* Form inline flex containers (for buttons next to inputs) */
.form-inline-group {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    flex-wrap: wrap;
}

.form-inline-group > .form-input {
    flex: 1;
    min-width: 200px;
}

.form-inline-group > .btn {
    flex-shrink: 0;
    white-space: nowrap;
}

/* Legacy support for inline style divs */
.form-group > div[style*="display: flex"] {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    flex-wrap: wrap;
}

.form-group > div[style*="display: flex"] > .form-input {
    flex: 1;
    min-width: 200px;
}

.form-group > div[style*="display: flex"] > .btn {
    flex-shrink: 0;
    white-space: nowrap;
}

/* Markdown editor container */
.markdown-editor-container {
    width: 100%;
}

.markdown-help {
    margin-top: var(--space-3);
    padding: var(--space-3);
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    color: var(--text-secondary);
    font-family: var(--font-ui);
    line-height: 1.5;
}

.markdown-help code {
    background-color: var(--bg-secondary);
    padding: 2px 4px;
    border-radius: 2px;
    font-family: var(--font-mono);
    font-size: 0.9em;
}

/* Page header with flex layout */
.page-header.flex-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-4);
}

.page-header.flex-header .page-title {
    margin: 0;
    flex: 1;
    min-width: 0;
}

.page-header.flex-header .btn {
    flex-shrink: 0;
}

/* =============================================================================
   ALERTS - System Messages
   ============================================================================= */

.alert {
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-4);
    border-left: 3px solid;
    font-size: var(--text-sm);
    font-family: var(--font-mono);
}

.alert::before {
    font-weight: 700;
    margin-right: var(--space-2);
}

.alert-success {
    background-color: var(--matrix-light);
    border-color: var(--matrix-green);
    color: var(--matrix-green);
}

.alert-success::before {
    content: '[SUCCESS]';
}

.alert-error {
    background-color: var(--red-light);
    border-color: var(--red-primary);
    color: var(--red-primary);
}

.alert-error::before {
    content: '[ERROR]';
}

.alert-info {
    background-color: rgba(0, 217, 255, 0.1);
    border-color: var(--info);
    color: var(--info);
}

.alert-info::before {
    content: '[INFO]';
}

.alert-warning {
    background-color: rgba(255, 149, 0, 0.1);
    border-color: var(--warning);
    color: var(--warning);
}

.alert-warning::before {
    content: '[WARNING]';
}

/* =============================================================================
   TABLES - Data Tables
   ============================================================================= */

.admin-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
}

/* Ensure table wrapper doesn't break layout */
.admin-table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
    margin: 0;
}


.data-table th,
.data-table td {
    padding: var(--space-4);
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.data-table th {
    background-color: var(--bg-tertiary);
    color: var(--red-primary);
    font-weight: 600;
    text-transform: uppercase;
    font-size: var(--text-xs);
    letter-spacing: 1px;
}

.data-table tbody tr {
    transition: var(--transition);
}

.data-table tbody tr:hover {
    background-color: var(--bg-hover);
    border-left: 2px solid var(--red-primary);
}

.type-icon {
    font-size: var(--text-base);
    margin-right: var(--space-2);
}

.type-label {
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-transform: uppercase;
}

/* =============================================================================
   STATUS BADGES
   ============================================================================= */

.status-badge {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    border: 1px solid;
}

.status-badge.published,
.status-badge.active {
    background-color: var(--matrix-light);
    color: var(--matrix-green);
    border-color: var(--matrix-green);
}

.status-badge.draft {
    background-color: rgba(255, 149, 0, 0.1);
    color: var(--warning);
    border-color: var(--warning);
}

.status-badge.locked,
.status-badge.disabled {
    background-color: rgba(102, 102, 102, 0.1);
    color: var(--text-muted);
    border-color: var(--text-muted);
}

/* =============================================================================
   STATS CARDS - System Stats
   ============================================================================= */

.stat-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-top: 2px solid var(--accent-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    transition: var(--transition-base);
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent-primary), transparent);
    opacity: 0.8;
}

.stat-card:hover {
    border-color: var(--border-primary);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
    background-color: var(--bg-hover);
}

.stat-card a {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    text-decoration: none;
}

.stat-icon {
    font-size: var(--text-3xl);
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border: none;
    flex-shrink: 0;
    margin-bottom: var(--space-4);
    opacity: 0.9;
}

.stat-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
    text-align: left;
}

.stat-value {
    font-size: var(--text-4xl);
    font-weight: var(--weight-bold);
    color: var(--text-bright);
    line-height: var(--leading-tight);
    font-family: var(--font-ui);
}

.stat-label {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: var(--weight-semibold);
    font-family: var(--font-mono);
}

.stat-sublabel {
    font-size: var(--text-xs);
    color: var(--accent-secondary);
    font-weight: var(--weight-semibold);
    margin-top: var(--space-2);
    font-family: var(--font-mono);
    padding: var(--space-1) var(--space-2);
    background-color: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    display: inline-block;
}

/* =============================================================================
   ACTION BUTTONS
   ============================================================================= */

.action-btn {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--accent-primary);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: var(--text-primary);
    transition: var(--transition-base);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    font-family: var(--font-ui);
}

.action-btn:hover {
    border-color: var(--border-primary);
    background-color: var(--bg-hover);
    box-shadow: var(--shadow-primary);
    transform: translateX(4px);
}

.action-btn .btn-icon {
    font-size: var(--text-lg);
    color: var(--accent-primary);
}

/* =============================================================================
   ADMIN LIST
   ============================================================================= */

.admin-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.admin-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-6);
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-top: 2px solid var(--accent-primary);
    border-radius: var(--radius-lg);
    gap: var(--space-4);
    transition: var(--transition-base);
    position: relative;
    overflow: hidden;
}

.admin-list-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent-primary), transparent);
    opacity: 0.8;
}

.admin-list-item:hover {
    border-color: var(--border-primary);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
    background-color: var(--bg-hover);
}

.list-item-content h3 {
    margin: 0 0 var(--space-2) 0;
    color: var(--text-bright);
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    font-family: var(--font-ui);
}

.list-item-meta {
    color: var(--text-muted);
    font-size: var(--text-sm);
    font-family: var(--font-mono);
    letter-spacing: 0.5px;
}

.list-item-actions {
    display: flex;
    gap: var(--space-2);
    flex-shrink: 0;
}

/* =============================================================================
   AUTHENTICATION
   ============================================================================= */

.auth-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 70vh;
    padding: var(--space-8);
}

.auth-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-top: 3px solid var(--red-primary);
    border-radius: var(--radius-md);
    padding: var(--space-8);
    width: 100%;
    max-width: 420px;
    box-shadow: var(--shadow-card);
}

.auth-header {
    text-align: center;
    margin-bottom: var(--space-6);
}

.auth-title {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--red-primary);
    margin-bottom: var(--space-2);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.auth-title::before {
    content: '> ';
}

.auth-subtitle {
    color: var(--text-secondary);
    font-size: var(--text-base);
    font-family: var(--font-ui);
}

.auth-footer {
    margin-top: var(--space-6);
    text-align: center;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-family: var(--font-ui);
}

/* =============================================================================
   BLOG POST PAGE
   ============================================================================= */

.blog-post-page {
    max-width: 900px;
    margin: 0 auto;
}

.blog-post-header {
    margin-bottom: var(--space-4);
    padding-bottom: 0;
}

.blog-post-title {
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--text-bright);
    margin: 0 0 var(--space-4) 0;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.blog-post-title::before {
    content: '';
}

.blog-post-meta {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    color: var(--text-muted);
    font-size: var(--text-sm);
    line-height: 1.5;
}

.blog-post-meta .post-date,
.blog-post-meta .reading-time {
    display: inline;
    vertical-align: baseline;
    line-height: 1.5;
    margin: 0;
    padding: 0;
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.blog-post-header-image {
    margin: var(--space-4) 0 0 0;
    width: 100%;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: none;
    background-color: transparent;
    min-height: 300px;
    display: block;
    position: relative;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.blog-post-header-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    max-height: 500px;
    min-height: 300px;
    background-color: transparent;
    border-radius: var(--radius-lg);
}

.blog-post-description {
    margin: var(--space-4) 0 var(--space-6) 0;
    padding: 0;
    width: 100%;
    text-align: left;
}

.blog-post-excerpt {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--text-primary);
    margin: 0;
    padding: 0;
    font-family: var(--font-ui);
    font-weight: var(--weight-normal);
    max-width: none;
}

.blog-post-content {
    margin: var(--space-8) 0;
}

.blog-post-footer {
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid var(--border-color);
}

.back-to-blog-btn {
    color: var(--red-primary);
    font-weight: 600;
    font-size: var(--text-sm);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--red-primary);
    background-color: var(--red-light);
    border-radius: var(--radius-sm);
    transition: var(--transition);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.back-to-blog-btn::before {
    content: '<';
    font-weight: 700;
}

.back-to-blog-btn:hover {
    background-color: var(--red-primary);
    color: white;
    box-shadow: var(--shadow-red);
    transform: translateX(-4px);
}

/* =============================================================================
   BLOG TAGS
   ============================================================================= */

.blog-post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.blog-tag {
    font-size: var(--text-xs, 0.75rem);
    color: var(--accent-primary, #ff2e4c);
    padding: var(--space-1, 0.25rem) var(--space-3, 0.75rem);
    border: 1px solid var(--accent-primary, #ff2e4c);
    border-radius: var(--radius-sm, 4px);
    text-decoration: none;
    transition: var(--transition-base, all 0.2s ease);
    display: inline-block;
    white-space: nowrap;
    font-weight: var(--weight-medium, 500);
    line-height: 1.4;
}

.blog-tag:hover {
    background-color: var(--accent-primary, #ff2e4c);
    color: var(--text-bright, #ffffff);
    box-shadow: 0 0 10px var(--accent-primary-glow, rgba(255, 46, 76, 0.3));
    transform: translateY(-1px);
}

.blog-tag.active {
    background-color: var(--accent-primary-light, rgba(255, 46, 76, 0.1));
    color: var(--accent-primary, #ff2e4c);
    border-color: var(--accent-primary, #ff2e4c);
    border-width: 2px;
    font-weight: var(--weight-semibold, 600);
    box-shadow: 0 0 8px var(--accent-primary-glow, rgba(255, 46, 76, 0.2));
}

.tags-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2, 0.5rem);
    align-items: center;
}

.tag-count {
    color: var(--text-muted, #666666);
    font-size: 0.9em;
    margin-left: 2px;
}

.related-reports {
    margin-top: var(--space-8);
}

/* =============================================================================
   MARKDOWN CONTENT
   ============================================================================= */

.markdown-content {
    line-height: var(--leading-relaxed);
    color: var(--text-primary);
    font-family: var(--font-ui);
    font-size: var(--text-base);
}

.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4 {
    margin-top: var(--space-8);
    margin-bottom: var(--space-4);
    font-weight: 600;
    color: var(--text-bright);
    line-height: 1.3;
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.markdown-content h1 { 
    font-size: var(--text-2xl); 
    color: var(--accent-primary); 
    font-weight: var(--weight-bold);
    font-family: var(--font-mono);
    line-height: var(--leading-tight);
}
.markdown-content h2 { 
    font-size: var(--text-xl); 
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
    color: var(--accent-primary);
}
.markdown-content h3 { 
    font-size: var(--text-lg); 
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
    color: var(--text-bright);
}
.markdown-content h4 { 
    font-size: var(--text-base); 
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
}

/* Professional heading styles - clean and modern */
.markdown-content h1::before { 
    content: ''; 
}
.markdown-content h1 {
    border-bottom: 2px solid var(--accent-primary);
    padding-bottom: var(--space-2);
    margin-bottom: var(--space-4);
}
.markdown-content h2::before { 
    content: ''; 
}
.markdown-content h2 {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: var(--space-1);
    margin-bottom: var(--space-3);
}
.markdown-content h3::before { 
    content: ''; 
}
.markdown-content h3 {
    color: var(--text-bright);
}

.markdown-content p {
    margin-bottom: var(--space-4);
}

.markdown-content a {
    color: var(--red-primary);
    text-decoration: underline;
}

.markdown-content code {
    background: var(--bg-tertiary);
    color: var(--matrix-green);
    padding: 0.2em 0.4em;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.9em;
    border: 1px solid var(--border-color);
}

.markdown-content pre {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--matrix-green);
    border-radius: var(--radius-sm);
    padding: var(--space-5);
    overflow-x: auto;
    margin: var(--space-5) 0;
}

.markdown-content pre code {
    background: none;
    padding: 0;
    border: none;
}

.markdown-content blockquote {
    border-left: 3px solid var(--red-primary);
    padding-left: var(--space-5);
    margin: var(--space-5) 0;
    color: var(--text-secondary);
    font-style: italic;
    background-color: rgba(255, 46, 76, 0.05);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-sm);
}

.markdown-content ul,
.markdown-content ol {
    margin: var(--space-4) 0;
    padding-left: var(--space-8);
}

.markdown-content li {
    margin: var(--space-2) 0;
}

.markdown-content li::marker {
    color: var(--red-primary);
}

.markdown-content table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-5) 0;
}

.markdown-content table th,
.markdown-content table td {
    border: 1px solid var(--border-color);
    padding: var(--space-3);
    text-align: left;
}

.markdown-content table th {
    background: var(--bg-tertiary);
    font-weight: 600;
    color: var(--red-primary);
    text-transform: uppercase;
}

.markdown-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
    margin: var(--space-5) 0;
    border: 1px solid var(--border-color);
    display: block;
}

/* Figures with captions (GitBook/GitHub-style) */
.markdown-content figure {
    /* Tighter spacing than normal images to look more like GitBook */
    margin: var(--space-3) 0;
    text-align: center;
}

.markdown-content figure img {
    margin-top: 0;
    margin-bottom: var(--space-1);
    margin-left: auto;
    margin-right: auto;
}

.markdown-content figure figcaption {
    margin-top: 0;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    text-align: center;
}

.markdown-content figure figcaption p {
    margin: 0;
}

/* Ensure all images are responsive */
img {
    max-width: 100%;
    height: auto;
}

/* Prevent images from overflowing containers */
.container img,
.panel-body img,
.markdown-content img,
.blog-post-content img {
    max-width: 100%;
    height: auto;
}

.markdown-content hr {
    border: none;
    border-top: 1px solid var(--border-red);
    margin: var(--space-8) 0;
}

.markdown-content strong {
    font-weight: 600;
    color: var(--text-bright);
}

/* =============================================================================
   FOOTER
   ============================================================================= */

.footer {
    background-color: var(--bg-secondary);
    border-top: 2px solid var(--border-primary);
    padding: var(--space-6) var(--space-8);
    margin-top: auto;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.footer-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-4);
}

.footer-left {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.footer-text {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.footer-separator {
    color: var(--text-muted);
}

.footer-right {
    color: var(--text-muted);
    font-size: var(--text-sm);
}

/* =============================================================================
   EMPTY STATES
   ============================================================================= */

.empty-state {
    text-align: center;
    padding: var(--space-12);
    color: var(--text-secondary);
    font-family: var(--font-ui);
}

.empty-state::before {
    content: '[ NO DATA ]';
    display: block;
    color: var(--accent-secondary);
    font-size: var(--text-sm);
    margin-bottom: var(--space-4);
    font-family: var(--font-mono);
    font-weight: var(--weight-bold);
    letter-spacing: 1.5px;
}

/* =============================================================================
   PAGINATION
   ============================================================================= */

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid var(--border-color);
}

.pagination-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    font-family: var(--font-ui);
    transition: var(--transition-base);
}

.pagination-btn:hover:not(.disabled) {
    background-color: var(--bg-hover);
    border-color: var(--border-secondary);
    color: var(--accent-secondary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.pagination-btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.pagination-info {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    padding: var(--space-2) var(--space-4);
    background-color: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
}

/* =============================================================================
   FILTER FORM
   ============================================================================= */

.filter-form {
    margin-bottom: var(--space-6);
    padding: var(--space-5);
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: flex-end;
}

.filter-group {
    flex: 1;
    min-width: 150px;
}

.filter-group label {
    display: block;
    margin-bottom: var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-weight: var(--weight-medium);
}

.filter-input {
    width: 100%;
    transition: var(--transition-base);
}

.filter-input:focus {
    border-color: var(--accent-secondary);
    box-shadow: 0 0 0 2px var(--accent-secondary-light);
}

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

.filter-info {
    margin-top: var(--space-4);
    padding: var(--space-3);
    background-color: var(--accent-secondary-light);
    border: 1px solid var(--accent-secondary);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    color: var(--accent-secondary);
    font-family: var(--font-mono);
}

.filter-info #filter-count {
    font-weight: var(--weight-bold);
    color: var(--accent-secondary);
}

/* Highlight matching text */
mark {
    background-color: var(--accent-secondary-light);
    color: var(--accent-secondary);
    padding: 2px 4px;
    border-radius: 2px;
    font-weight: var(--weight-semibold);
}

/* Filtered row animation */
tbody tr {
    transition: opacity 0.2s ease, transform 0.2s ease;
}

tbody tr[style*="display: none"] {
    opacity: 0;
    transform: translateX(-10px);
}

/* =============================================================================
   QUICK LINKS
   ============================================================================= */

.quick-links {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.quick-link-card {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-6);
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-top: 2px solid var(--accent-secondary);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: var(--text-primary);
    transition: var(--transition-base);
    position: relative;
    overflow: hidden;
}

.quick-link-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent-secondary), transparent);
    opacity: 0.8;
}

.quick-link-card:hover {
    border-color: var(--border-secondary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
    background-color: var(--bg-hover);
}

.link-icon {
    color: var(--accent-secondary);
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    flex-shrink: 0;
}

.link-text {
    font-weight: var(--weight-semibold);
    font-size: var(--text-lg);
    color: var(--text-bright);
    font-family: var(--font-ui);
}

/* =============================================================================
   SCROLLBAR
   ============================================================================= */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--red-primary);
}

/* =============================================================================
   CENTER CONTENT
   ============================================================================= */

.center-content {
    color: var(--text-primary);
    line-height: 1.8;
    font-family: var(--font-ui);
}

/* =============================================================================
   RESPONSIVE - Mobile First Design
   ============================================================================= */

/* =============================================================================
   TABLET & SMALL DESKTOP (1024px and below)
   ============================================================================= */

@media (max-width: 1024px) {
    .main-content {
        padding: var(--space-6) var(--space-4);
    }
    
    .container {
        padding: 0 var(--space-3);
    }
    
    .navbar {
        padding: var(--space-3) var(--space-4);
    }
    
    .nav-container {
        padding: 0;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-5);
    }
    
    .projects-grid,
    .blog-posts-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: var(--space-5);
    }
    
    .panel-header {
        padding: var(--space-4) var(--space-5);
        flex-wrap: wrap;
        gap: var(--space-3);
    }
    
    .panel-body {
        padding: var(--space-5);
    }
    
    .page-header-content {
        flex-wrap: wrap;
    }
}

/* =============================================================================
   MOBILE & TABLET (768px and below)
   ============================================================================= */

@media (max-width: 768px) {
    /* Base Layout */
    html {
        font-size: 15px;
    }
    
    .main-content {
        padding: var(--space-4) var(--space-3);
    }
    
    .container {
        padding: 0 var(--space-2);
        max-width: 100%;
        overflow-x: visible;
    }
    
    .main-content {
        overflow-x: visible;
    }
    
    /* Navigation */
    .navbar {
        padding: var(--space-3) var(--space-3);
        position: relative;
    }
    
    .nav-container {
        position: relative;
    }
    
    .nav-brand {
        font-size: var(--text-base);
    }
    
    .brand-icon {
        font-size: var(--text-lg);
    }
    
    .nav-toggle {
        display: flex;
        z-index: 101;
    }
    
    .nav-menu {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100vh;
        background-color: rgba(21, 21, 21, 0.98);
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
        flex-direction: column;
        padding: var(--space-8) var(--space-4);
        padding-top: calc(var(--space-8) + 60px); /* Add space for navbar */
        border: none;
        display: none;
        z-index: 100;
        overflow-y: auto;
        gap: var(--space-2);
        justify-content: flex-start;
        align-items: stretch;
        margin: 0;
    }
    
    .nav-menu.active {
        display: flex !important;
    }
    
    .nav-link {
        width: 100%;
        padding: var(--space-4) var(--space-5);
        justify-content: flex-start;
        font-size: var(--text-base);
        border-radius: var(--radius-md);
        border: 1px solid var(--border-color);
    }
    
    .nav-link:hover {
        background-color: var(--bg-hover);
    }
    
    /* Typography */
    .page-title {
        font-size: var(--text-2xl);
        letter-spacing: 1px;
    }
    
    .page-title::before {
        content: '';
    }
    
    .blog-post-title {
        font-size: var(--text-2xl);
        line-height: 1.3;
    }
    
    .blog-post-title::before {
        font-size: var(--text-sm);
    }
    
    .page-subtitle {
        font-size: var(--text-sm);
    }
    
    /* Panels & Cards */
    .panel {
        margin-bottom: var(--space-5);
        border-radius: var(--radius-md);
    }
    
    .panel-header {
        padding: var(--space-4);
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }
    
    .panel-title {
        font-size: var(--text-base);
        width: 100%;
    }
    
    .panel-body {
        padding: var(--space-4);
    }
    
    /* Grids */
    .projects-grid,
    .blog-posts-grid,
    .blog-posts {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
    
    .quick-actions {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }
    
    /* Cards */
    .project-card,
    .blog-card,
    .blog-post-card,
    .note-item,
    .report-item,
    .project-item {
        padding: var(--space-4);
    }
    
    /* Fix project name wrapping on mobile */
    .project-name {
        flex-wrap: wrap;
        word-break: break-word;
    }
    
    .project-prefix,
    .report-prefix {
        display: block;
        margin-bottom: var(--space-1);
        width: 100%;
    }
    
    /* Ensure project content spacing */
    .project-content,
    .report-content {
        margin-top: var(--space-3);
    }
    
    .project-description,
    .report-description {
        font-size: var(--text-sm);
        line-height: 1.6;
    }
    
    /* Fix project prefix on mobile */
    .project-prefix,
    .report-prefix {
        display: inline-block;
        margin-right: var(--space-2);
        margin-bottom: 0;
        width: auto;
    }
    
    /* Ensure project footer links are full width on mobile */
    .project-footer {
        margin-top: var(--space-3);
    }
    
    .project-link {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
    
    .project-header,
    .report-header,
    .note-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
        width: 100%;
    }
    
    .project-name,
    .report-title,
    .note-title {
        font-size: var(--text-lg);
        width: 100%;
        margin-bottom: 0;
    }
    
    /* Fix project-meta layout on mobile - keep on same line */
    .project-meta {
        width: 100%;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: var(--space-3);
        flex-wrap: nowrap;
        margin-top: var(--space-2);
    }
    
    .project-date,
    .project-status-badge {
        margin: 0;
        flex-shrink: 0;
    }
    
    .project-status,
    .project-date,
    .report-date,
    .note-date {
        align-self: flex-start;
        margin: 0;
    }
    
    /* Ensure status badge displays properly */
    .project-status-badge {
        display: inline-block;
        white-space: nowrap;
    }
    
    /* Forms */
    .form-row {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }
    
    .form-group {
        margin-bottom: var(--space-4);
    }
    
    .form-input,
    .form-select,
    textarea.form-input {
        font-size: 16px; /* Prevents zoom on iOS */
        padding: var(--space-3) var(--space-4);
        width: 100%;
        box-sizing: border-box;
    }
    
    /* Form inline flex containers - stack on mobile */
    .form-inline-group {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-2);
    }
    
    .form-inline-group > .form-input {
        min-width: 100%;
        width: 100%;
    }
    
    .form-inline-group > .btn {
        width: 100%;
        min-height: 44px;
    }
    
    /* Legacy support */
    .form-group > div[style*="display: flex"] {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-2);
    }
    
    .form-group > div[style*="display: flex"] > .form-input {
        min-width: 100%;
        width: 100%;
    }
    
    .form-group > div[style*="display: flex"] > .btn {
        width: 100%;
        min-height: 44px;
    }
    
    .form-actions {
        flex-direction: column;
        gap: var(--space-2);
    }
    
    .form-actions .btn {
        width: 100%;
        min-height: 44px;
    }
    
    /* Page header flex layout on mobile */
    .page-header.flex-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }
    
    .page-header.flex-header .btn {
        width: 100%;
        justify-content: center;
    }
    
    /* Markdown editor mobile optimization */
    .markdown-editor-container {
        width: 100%;
        overflow-x: auto;
    }
    
    .CodeMirror {
        font-size: 16px !important; /* Prevents zoom on iOS */
        min-height: 300px !important;
    }
    
    .editor-toolbar {
        flex-wrap: wrap;
        gap: var(--space-1);
    }
    
    .editor-toolbar a {
        min-width: 36px;
        min-height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    .markdown-help {
        font-size: var(--text-xs);
        padding: var(--space-2);
        overflow-x: auto;
    }
    
    .markdown-help code {
        font-size: 0.85em;
        word-break: break-all;
    }
    
    /* File upload zone mobile */
    .file-drop-zone {
        padding: var(--space-4);
        min-height: 120px;
    }
    
    .file-drop-content {
        padding: var(--space-2);
    }
    
    .file-drop-content i {
        font-size: 1.5em !important;
    }
    
    .file-drop-content p {
        font-size: var(--text-sm);
        margin: var(--space-2) 0;
    }
    
    .file-drop-content small {
        font-size: var(--text-xs);
        display: block;
        margin-top: var(--space-1);
    }
    
    /* Form help text on mobile */
    .form-help {
        font-size: var(--text-xs);
        line-height: 1.5;
    }
    
    /* Panel header on mobile */
    .panel-header-right {
        width: 100%;
        justify-content: flex-start;
        margin-top: var(--space-2);
    }
    
    /* Buttons */
    .btn {
        padding: var(--space-3) var(--space-5);
        min-height: 44px; /* Minimum touch target size */
        font-size: var(--text-base);
    }
    
    .btn-sm {
        min-height: 36px;
        padding: var(--space-2) var(--space-4);
    }
    
    .action-btn {
        padding: var(--space-4);
        min-height: 44px;
    }
    
    /* Tables */
    .panel {
        overflow: visible !important;
    }
    
    .panel-body {
        overflow: visible !important;
        padding: var(--space-4);
    }
    
    /* Adjust admin-table margins for mobile panel-body padding */
    .panel-body .admin-table {
        margin-left: calc(-1 * var(--space-4));
        margin-right: calc(-1 * var(--space-4));
        padding-left: var(--space-4);
        padding-right: var(--space-4);
        width: calc(100% + 2 * var(--space-4));
    }
    
    .admin-table {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        display: block;
        width: 100%;
        position: relative;
        max-width: 100vw;
    }
    
    .data-table {
        min-width: 600px;
        font-size: var(--text-sm);
        width: 100%;
        margin: 0;
    }
    
    .data-table th,
    .data-table td {
        padding: var(--space-3);
        white-space: nowrap;
    }
    
    .data-table th:first-child,
    .data-table td:first-child {
        position: sticky;
        left: var(--space-4);
        background-color: var(--bg-tertiary);
        z-index: 1;
    }
    
    /* Admin Lists */
    .admin-list-item {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
        padding: var(--space-4);
    }
    
    .list-item-content {
        width: 100%;
    }
    
    .list-item-content h3 {
        font-size: var(--text-base);
        margin-bottom: var(--space-1);
    }
    
    .list-item-meta {
        font-size: var(--text-xs);
    }
    
    .list-item-actions {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: var(--space-2);
    }
    
    .list-item-actions .btn {
        flex: 1;
        min-width: 100px;
        min-height: 44px;
    }
    
    /* Admin table actions column */
    .data-table td:last-child {
        white-space: normal;
    }
    
    .data-table td:last-child .btn {
        display: inline-block;
        margin: 2px 0;
        min-width: 80px;
        min-height: 36px;
    }
    
    .data-table td:last-child form {
        display: inline-block;
        margin: 2px 0;
    }
    
    /* Footer */
    .footer {
        padding: var(--space-4) var(--space-3);
    }
    
    .footer-container {
        flex-direction: column;
        text-align: center;
        gap: var(--space-3);
    }
    
    .footer-left {
        flex-direction: column;
        gap: var(--space-2);
    }
    
    .footer-separator {
        display: none;
    }
    
    /* Stats */
    .stat-card {
        padding: var(--space-4);
    }
    
    .stat-card a {
        flex-direction: row;
        align-items: center;
        text-align: left;
        width: 100%;
    }
    
    .stat-icon {
        width: 48px;
        height: 48px;
        font-size: 1.5rem;
        margin-bottom: 0;
        margin-right: var(--space-3);
        flex-shrink: 0;
    }
    
    .stat-content {
        flex: 1;
        min-width: 0;
    }
    
    .stat-value {
        font-size: var(--text-2xl);
        line-height: 1.2;
    }
    
    .stat-label {
        font-size: var(--text-xs);
        word-break: break-word;
    }
    
    .stat-sublabel {
        font-size: var(--text-xs);
        margin-top: var(--space-1);
    }
    
    /* Quick actions on mobile */
    .quick-actions {
        gap: var(--space-3);
    }
    
    .action-btn {
        padding: var(--space-4);
        min-height: 56px;
        font-size: var(--text-sm);
    }
    
    .action-btn .btn-icon {
        font-size: var(--text-base);
    }
    
    /* Auth */
    .auth-container {
        padding: var(--space-4);
        min-height: auto;
    }
    
    .auth-card {
        padding: var(--space-6);
        max-width: 100%;
    }
    
    /* Blog Post */
    .blog-post-page {
        max-width: 100%;
    }
    
    .blog-post-header {
        margin-bottom: var(--space-6);
        padding-bottom: var(--space-4);
    }
    
    .blog-post-meta {
        flex-wrap: wrap;
        gap: var(--space-2);
    }
    
    /* Markdown Content */
    .markdown-content {
        font-size: var(--text-base);
        line-height: 1.7;
    }
    
    .markdown-content h1 {
        font-size: var(--text-2xl);
        margin-top: var(--space-6);
    }
    
    .markdown-content h2 {
        font-size: var(--text-xl);
        margin-top: var(--space-5);
    }
    
    .markdown-content h3 {
        font-size: var(--text-lg);
    }
    
    .markdown-content h4 {
        font-size: var(--text-base);
    }
    
    .markdown-content pre {
        padding: var(--space-3);
        overflow-x: auto;
        font-size: var(--text-sm);
    }
    
    .markdown-content table {
        font-size: var(--text-sm);
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .markdown-content img {
        max-width: 100%;
        height: auto;
    }
    
    /* Quick Links */
    .quick-link-card {
        min-width: 100%;
        padding: var(--space-4);
    }
    
    /* Pagination */
    .pagination {
        flex-wrap: wrap;
        gap: var(--space-2);
    }
    
    .pagination-btn {
        padding: var(--space-2) var(--space-4);
        min-height: 44px;
    }
}

/* =============================================================================
   SMALL MOBILE (480px and below)
   ============================================================================= */

@media (max-width: 480px) {
    html {
        font-size: 14px;
    }
    
    .main-content {
        padding: var(--space-3) var(--space-2);
    }
    
    .container {
        padding: 0 var(--space-2);
    }
    
    .navbar {
        padding: var(--space-2) var(--space-2);
    }
    
    .nav-brand {
        font-size: var(--text-sm);
    }
    
    .page-title {
        font-size: var(--text-xl);
    }
    
    .blog-post-title {
        font-size: var(--text-xl);
    }
    
    .panel-header {
        padding: var(--space-3);
    }
    
    .panel-body {
        padding: var(--space-3);
    }
    
    .project-card,
    .blog-card,
    .note-item,
    .report-item,
    .project-item {
        padding: var(--space-3);
    }
    
    /* Ensure project meta displays properly on small screens - keep on same line */
    .project-meta {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: var(--space-2);
        flex-wrap: nowrap;
    }
    
    /* Ensure date and status don't wrap on small screens */
    .project-date,
    .project-status-badge {
        white-space: nowrap;
        flex-shrink: 0;
    }
    
    .project-date,
    .project-status-badge {
        width: auto;
    }
    
    .project-name {
        font-size: var(--text-base);
    }
    
    .project-prefix,
    .report-prefix {
        font-size: 0.65rem;
        margin-right: var(--space-1);
    }
    
    .stat-card {
        padding: var(--space-3);
    }
    
    .stat-icon {
        width: 40px;
        height: 40px;
        font-size: 1.25rem;
    }
    
    .stat-value {
        font-size: var(--text-xl);
    }
    
    .btn {
        padding: var(--space-3) var(--space-4);
        font-size: var(--text-sm);
    }
    
    .markdown-content {
        font-size: var(--text-sm);
    }
    
    .markdown-content h1 {
        font-size: var(--text-xl);
    }
    
    .markdown-content h2 {
        font-size: var(--text-lg);
    }
    
    .markdown-content pre {
        font-size: var(--text-xs);
        padding: var(--space-2);
    }
    
    .panel-body .admin-table {
        margin-left: calc(-1 * var(--space-3));
        margin-right: calc(-1 * var(--space-3));
        padding-left: var(--space-3);
        padding-right: var(--space-3);
        width: calc(100% + 2 * var(--space-3));
    }
    
    .data-table th:first-child,
    .data-table td:first-child {
        left: var(--space-3);
    }
    
    .data-table {
        font-size: var(--text-xs);
        min-width: 500px;
    }
    
    .data-table th,
    .data-table td {
        padding: var(--space-2);
    }
    
    /* SimpleMDE editor on small mobile */
    .CodeMirror {
        font-size: 14px !important;
        min-height: 250px !important;
    }
    
    .editor-toolbar a {
        min-width: 32px;
        min-height: 32px;
        font-size: 12px;
    }
    
    /* Form inputs on small mobile */
    .form-input,
    .form-select,
    textarea.form-input {
        font-size: 16px; /* Keep 16px to prevent iOS zoom */
        padding: var(--space-2) var(--space-3);
    }
    
    /* Page header on small mobile */
    .page-header.flex-header .btn {
        font-size: var(--text-sm);
        padding: var(--space-2) var(--space-3);
    }
}

/* =============================================================================
   LARGE MOBILE LANDSCAPE & SMALL TABLET (640px - 768px)
   ============================================================================= */

@media (min-width: 481px) and (max-width: 768px) {
    .projects-grid,
    .blog-posts-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* =============================================================================
   LANDSCAPE ORIENTATION
   ============================================================================= */

@media (max-width: 768px) and (orientation: landscape) {
    .nav-menu {
        padding: var(--space-4);
    }
    
    .main-content {
        padding: var(--space-3) var(--space-2);
    }
    
    .auth-container {
        min-height: auto;
        padding: var(--space-4);
    }
}

/* =============================================================================
   TOUCH DEVICE OPTIMIZATIONS
   ============================================================================= */

@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    .nav-link,
    .btn,
    .action-btn {
        min-height: 44px;
    }
    
    /* Remove hover effects on touch devices */
    .project-card:hover,
    .blog-card:hover,
    .note-item:hover {
        transform: none;
    }
    
    /* Better focus states for touch */
    *:focus-visible {
        outline-width: 3px;
    }
}

/* =============================================================================
   HIGH DPI DISPLAYS
   ============================================================================= */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .markdown-content img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: pixelated;
    }
}

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

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

/* =============================================================================
   PRINT
   ============================================================================= */

@media print {
    .navbar,
    .footer,
    .btn,
    .panel-header {
        display: none;
    }
    
    body {
        background: white;
        color: black;
    }
    
    body::before {
        display: none;
    }
}