/* ============================================
   PapaRupert Farm - Global App Stylesheet
   WAVE 3 ENFORCEMENT - Component & Density Normalization
   Sections 3 & 4 Compliant - Industrial Instrument UI
   ============================================ */

/* ============================================
   PR_DARK_MODE_UNIFICATION_GOVERNANCE_V1
   ============================================
   Rules:
   1) UI grayscale only in dark mode - NO green/color accents on buttons, pills, headers, cards, borders, inputs, nav
   2) Color reserved for charts ONLY (chart series/legend colors remain unchanged)
   3) No layout or behavioral changes - presentation only
   4) Accessibility contrast first - all text must be readable on dark backgrounds
   5) No timers, automation, or scheduling UI additions
   
   ENFORCEMENT: Dark mode UI must be 100% grayscale. Chart data colors are untouched.
   ============================================ */

/* SEMANTIC COLOR SYSTEM - Section 2 Compliant */
:root {
    /* ===== NEUTRAL / STRUCTURAL (Role 1) ===== */
    --color-neutral-bg: #F6F8F5;
    --color-neutral-surface: #FFFFFF;
    --color-neutral-surface-2: #F0F3EF;
    --color-neutral-border: rgba(0, 0, 0, 0.06);
    --color-neutral-text: #1F2A24;
    --color-neutral-text-2: #4A5A52;
    --color-neutral-text-3: #7A8B82;
    
    /* ===== INFORMATIONAL (Role 2) ===== */
    --color-info: #5FA8D3;
    
    /* ===== ACTIVE / FOCUS (Role 3) ===== */
    --color-focus: #5FA8D3;
    --color-focus-ring: rgba(95, 168, 211, 0.3);
    
    /* ===== POSITIVE OUTCOME (Role 4 - RARE) ===== */
    --color-positive: #4A8A4E;
    
    /* ===== CAUTION / ATTENTION (Role 5) ===== */
    --color-caution: #F4B266;
    
    /* ===== RISK / ERROR (Role 6) ===== */
    --color-risk: #E5533D;
    
    /* ===== HISTORICAL / INACTIVE (Role 7) ===== */
    --color-historical: #808080;
    
    /* ===== DARK MODE - NEUTRAL GRAYSCALE ONLY ===== */
    /* GOVERNANCE: See docs/architecture/DARK_MODE_GOVERNANCE.md for token authority & change discipline */
    --dm-bg-0: #1a1a1a;
    --dm-bg-1: #2a2a2a;
    --dm-bg-2: #353535;
    --dm-bg-3: #404040;
    --dm-bg-4: #4a4a4a;
    
    --dm-text-1: #eeeeee;
    --dm-text-2: #b0b0b0;
    --dm-text-3: #808080;
    --dm-text-4: #606060;
    
    --dm-border: #404040;
    --dm-border-strong: #505050;
    --dm-border-light: #383838;
    
    /* Dark Mode Interaction (Grayscale Only - NO GREEN) */
    --dm-accent: #505050;
    --dm-accent-hover: #5a5a5a;
    --dm-accent-contrast: #ffffff;
    --dm-btn: #454545;
    --dm-btn-hover: #505050;
    --dm-focus: rgba(255, 255, 255, 0.15);
    --dm-link: #b0b0b0;
    --dm-link-hover: #d0d0d0;
    
    /* Dark Mode Semantic (For status/alerts and CHART DATA only, NOT UI chrome) */
    --dm-success: #5A9A5E;
    --dm-warning: #fbbf24;
    --dm-danger: #f87171;
    --dm-info: #60a5fa;
    
    /* ===== LEGACY COMPATIBILITY LAYER ===== */
    /* Maps old variables to semantic equivalents */
    --bg-0: var(--color-neutral-bg);
    --bg-1: var(--color-neutral-surface);
    --bg-2: var(--color-neutral-surface-2);
    --border: var(--color-neutral-border);
    --text-1: var(--color-neutral-text);
    --text-2: var(--color-neutral-text-2);
    --text-3: var(--color-neutral-text-3);
    
    --success: var(--color-positive);
    --warning: var(--color-caution);
    --danger: var(--color-risk);
    --info: var(--color-info);
    
    --primary-color: var(--dm-accent);
    --secondary-color: var(--dm-accent);
    --bg-primary: var(--color-neutral-bg);
    --bg-secondary: var(--color-neutral-surface-2);
    --accent-light: var(--color-neutral-surface-2);
    --accent-dark: var(--color-neutral-text);
    --alert-success: var(--color-positive);
    --alert-warning: var(--color-caution);
    --alert-error: var(--color-risk);
    --accent-color: var(--color-caution);
    --light-bg: var(--color-neutral-surface-2);
    --card-bg: var(--color-neutral-surface);
    --border-color: var(--color-neutral-border);
    --text-dark: var(--color-neutral-text);
    --text-light: var(--color-neutral-text-2);
    --text-on-primary: #ffffff;
    --danger-color: var(--color-risk);
    --info-color: var(--color-info);
    --success-color: var(--color-positive);
    
    --primary-hover: #7FA188;
    --secondary-hover: #7FA188;
    --accent-hover: var(--color-caution);
    
    --transition-speed: 150ms;
    --transition-fast: 100ms;
    --ease-smooth: linear;
    
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 0.75rem;
    --spacing-lg: 1rem;
    
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.15);
    --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.2);
/* Global Reset & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-dark);
    background: var(--bg-0);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background var(--transition-speed) var(--ease-smooth);
}

/* Typography - Systematic Scale */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
    transition: color var(--transition-fast) var(--ease-smooth);
}

h1 {
    font-size: 18px;
    letter-spacing: 0;
}

h2 {
    font-size: 17px;
    letter-spacing: 0;
}

h3 {
    font-size: 15px;
}

h4 {
    font-size: 14px;
}

h5 {
    font-size: 14px;
}

h6 {
    font-size: 13px;
}

p {
    margin-bottom: var(--spacing-sm);
    font-size: 15px;
    line-height: 1.6;
}

/* Metric Display - Functional Only */
.stat-card h3,
.metric-value {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0;
}

/* Container & Layout */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

main {
    padding: var(--spacing-lg) 0;
    min-height: calc(100vh - 200px);
}

/* User Bar */
.user-bar {
    background-color: var(--accent-light);
    padding: 0.5rem 0;
    box-shadow: var(--shadow-sm);
    transition: background-color var(--transition-fast) var(--ease-smooth);
}

.user-menu {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--spacing-md);
}

.user-menu-item {
    color: var(--text-dark);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all var(--transition-fast) var(--ease-smooth);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.6rem;
    border-radius: 3px;
}

.user-menu a.user-menu-item:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.user-menu .admin-item {
    font-weight: 700;
    color: var(--accent-dark);
}

/* Dark Mode User Bar - Neutral Background */
body.dark-mode .user-bar {
    background-color: var(--dm-bg-2);
}

body.dark-mode .user-menu-item {
    color: var(--dm-text-2);
}

body.dark-mode .user-menu a.user-menu-item:hover {
    background-color: var(--dm-bg-3);
}

body.dark-mode .user-menu .admin-item {
    color: var(--dm-accent);
}

/* Navigation */
.nav-menu {
    display: flex;
    list-style: none;
    gap: var(--spacing-sm);
    align-items: center;
}

.nav-menu a {
    color: white;
    text-decoration: none;
    transition: all var(--transition-fast) var(--ease-smooth);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 14px;
    font-weight: 500;
    padding: 0.6rem 1rem;
    border-radius: 4px;
}

.nav-menu a:hover {
    background-color: rgba(255, 255, 255, 0.15);
    /* removed decorative transform */
}

.nav-icon {
    width: 24px;
    height: 24px;
    transition: opacity var(--transition-fast) var(--ease-smooth);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nav-menu a:hover .nav-icon {
    opacity: 0.85;
}

/* Icons - Consistent Sizing */
i.fas, i.far, i.fab {
    font-size: 24px;
    transition: all var(--transition-fast) var(--ease-smooth);
}

.icon-sm {
    font-size: 20px;
}

.icon-lg {
    font-size: 28px;
}

.icon-xl {
    font-size: 32px;
}

/* Alerts & Flash Messages */
.flash-messages {
    margin-bottom: var(--spacing-md);
}

.alert {
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
    border-radius: 2px;
    border-left: 2px solid;
    font-weight: 500;
}

.alert-success {
    background-color: rgba(34, 197, 94, 0.1);
    color: #166534;
    border-color: var(--alert-success);
}

.alert-danger {
    background-color: rgba(239, 68, 68, 0.1);
    color: #991B1B;
    border-color: var(--alert-error);
}

.alert-warning {
    background-color: rgba(245, 158, 11, 0.1);
    color: #92400E;
    border-color: var(--alert-warning);
}

.alert-info {
    background-color: rgba(59, 130, 246, 0.1);
    color: #1E40AF;
    border-color: #3B82F6;
}

/* Cards - Flat Data Containers */
.card {
    background-color: var(--card-bg);
    border-radius: 3px;
    box-shadow: none;
    padding: 0.75rem;
    margin-bottom: 0.75rem;
    border: 1px solid var(--border-color);
    transition: border-color var(--transition-fast) var(--ease-smooth);
}

.card:hover {
    border-color: var(--color-neutral-text-3);
}

.card-header {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text-dark);
}

/* Dashboard Grid - Dense Layout */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

/* Stat Cards - Functional Metrics */
.stat-card {
    background: var(--card-bg);
    color: var(--text-dark);
    padding: 0.75rem;
    border-radius: 3px;
    text-align: left;
    box-shadow: none;
    border: 1px solid var(--border-color);
    transition: border-color var(--transition-fast) var(--ease-smooth);
}

.stat-card:hover {
    border-color: var(--color-neutral-text-3);
}

.stat-card h3 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: var(--text-dark);
}

.stat-card p {
    font-size: 13px;
    opacity: 1;
    font-weight: 400;
    color: var(--text-light);
}

/* Dark Mode Stat Cards */
body.dark-mode .stat-card {
    background: var(--card-bg);
    border: 1px solid var(--primary-color);
}

body.dark-mode .stat-card h3 {
    color: var(--primary-color);
}

body.dark-mode .stat-card p {
    color: var(--text-light);
}

body.dark-mode .stat-card i {
    color: var(--primary-color);
    filter: drop-shadow(0 0 8px var(--primary-color));
}

/* Plant Grid */
.plant-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 0.75rem;
}

.plant-card {
    background-color: var(--card-bg);
    border-radius: 3px;
    overflow: hidden;
    box-shadow: none;
    transition: border-color var(--transition-fast) var(--ease-smooth);
    border: 1px solid var(--border-color);
}

.plant-card:hover {
    border-color: var(--color-neutral-text-3);
}

.plant-card-header {
    background: var(--bg-2);
    color: var(--text-dark);
    padding: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

.plant-card-header h3 {
    margin-bottom: 0;
    color: var(--text-dark);
    font-size: 15px;
}

.plant-card-body {
    padding: 0.75rem;
}

/* Plant Status Badges */
.plant-status {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 2px;
    font-size: 12px;
    font-weight: 600;
    min-width: 100px;
    text-align: center;
    color: white;
    transition: opacity var(--transition-fast) var(--ease-smooth);
}

.plant-status:hover {
    opacity: 0.9;
}

.status-seedling {
    background: var(--primary-color);
}

.status-vegetative {
    background: #3B82F6;
}

.status-flowering {
    background: #F59E0B;
}

.status-harvested {
    background: #6B7280;
}

/* Dark Mode Plant Status Badges - Grayscale Borders */
body.dark-mode .plant-status {
    background: transparent;
    border: 2px solid var(--dm-border-strong);
    color: var(--dm-text-1);
}

body.dark-mode .status-seedling {
    border-color: var(--dm-text-2);
}

body.dark-mode .status-vegetative {
    border-color: var(--dm-text-2);
}

body.dark-mode .status-flowering {
    border-color: var(--dm-text-2);
}

body.dark-mode .status-harvested {
    border-color: var(--dm-text-3);
}

/* Buttons - Functional Only */
.btn {
    display: inline-block;
    padding: 0.5rem 1rem;
    border: 1px solid transparent;
    border-radius: 2px;
    cursor: pointer;
    text-decoration: none;
    transition: opacity var(--transition-fast) var(--ease-smooth);
    font-size: 14px;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
}

.btn:hover {
    opacity: 0.9;
}

.btn:active {
    /* removed decorative translateY */
}

.btn-primary {
    background: var(--primary-color);
    color: white;
}

.btn-primary:hover {
    opacity: 0.9;
}

.btn-success {
    background: var(--success-color);
    color: white;
}

.btn-success:hover {
    opacity: 0.9;
}

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

.btn-danger:hover {
    opacity: 0.9;
}

.btn-secondary {
    background: #6B7280;
    color: white;
}

.btn-secondary:hover {
    opacity: 0.9;
}

.btn-group {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

/* Forms - Compact & Functional */
.form-group {
    margin-bottom: 0.75rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--text-dark);
    font-size: 14px;
}

.form-control {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 15px;
    font-family: 'Inter', sans-serif;
    transition: all var(--transition-fast) var(--ease-smooth);
    background-color: white;
}

.form-control:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-color-20);
}

.form-control:hover {
    border-color: var(--primary-color);
}

.form-control.disabled-input,
.form-control:disabled {
    background-color: var(--light-bg);
    opacity: 0.7;
    cursor: not-allowed;
}

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

/* Tables - Enhanced */
.table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background-color: white;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

body.dark-mode .table {
    background-color: var(--dm-bg-1) !important;
}

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

.table th {
    background: var(--bg-2);
    font-weight: 700;
    color: var(--accent-dark);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.table tbody tr {
    transition: all var(--transition-fast) var(--ease-smooth);
}

.table tbody tr:hover {
    background-color: var(--primary-color-10);
}

/* Vitals Grid */
.vitals-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.5rem;
}

.vital-item {
    background: var(--bg-2);
    padding: 0.5rem 0.75rem;
    border-radius: 2px;
    border-left: 2px solid var(--primary-color);
    transition: border-color var(--transition-fast) var(--ease-smooth);
}

.vital-item:hover {
    border-color: var(--color-neutral-text);
}

.vital-item strong {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--text-light);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.vital-item span {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-dark);
}

/* Journal Entries */
.journal-entry {
    background-color: var(--card-bg);
    border-left: 2px solid var(--border-color);
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    border-radius: 2px;
    box-shadow: none;
    border: 1px solid var(--border-color);
    transition: border-color var(--transition-fast) var(--ease-smooth);
}

.journal-entry:hover {
    border-left-color: var(--text-light);
}

.journal-entry-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.journal-entry-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark);
}

.journal-entry-date {
    color: var(--text-light);
    font-size: 12px;
}

.journal-entry-type {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border-radius: 2px;
    font-size: 11px;
    font-weight: 500;
    margin-left: 0.5rem;
}

.type-general {
    background: #DBEAFE;
    color: #1E40AF;
}

.type-feeding {
    background: #FFEDD5;
    color: #9A3412;
}

.type-training {
    background: #E8F5E9;
    color: #166534;
}

.type-issue {
    background: #FEE2E2;
    color: #991B1B;
}

/* Footer */
footer {
    background: var(--primary-color);
    color: white;
    text-align: center;
    padding: var(--spacing-lg) 0;
    margin-top: var(--spacing-xl);
    box-shadow: var(--shadow-lg);
}

footer p {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    justify-content: center;
    line-height: 1.6;
    font-weight: 500;
}

/* Page Header */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.page-header h1 {
    color: var(--text-dark);
    font-size: 20px;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.page-header h1 i {
    font-size: 20px;
}

/* ========================================
   DARK MODE - NEUTRAL FIRST REBUILD
   Notion/GitHub Style - Sage for Interaction Only
   ======================================== */

body.dark-mode {
    background: var(--dm-bg-0) !important;
    background-color: var(--dm-bg-0) !important;
    color: var(--dm-text-2) !important;
    
    /* ========================================
       PHASE 3 TOKEN PATCH - Foundation Leak Seal
       Maps template variables to authoritative dark tokens
       Fixes: invisible text, undefined variables, light-mode variable bleeding
       Evidence: DARK_MODE_PHASE2_AUDIT_REPORT.md
       ======================================== */
    
    /* Stage 3.1: Define missing template variables (used in today.html, recovery.html, native_charts_v1.css) */
    --text-primary: var(--dm-text-1);
    --text-secondary: var(--dm-text-2);
    
    /* Stage 3.2: Seal light-mode variable leaks (used in 100+ inline styles) */
    --text-dark: var(--dm-text-1);
    --text-light: var(--dm-text-2);
    
    /* Fix undefined --dm-surface-* references (used in enforcement layers below) */
    --dm-surface-1: var(--dm-bg-1);
    --dm-surface-2: var(--dm-bg-2);
    --dm-surface-3: var(--dm-bg-3);
}

/* Force neutral backgrounds on main content area */
body.dark-mode main {
    background: var(--dm-bg-0) !important;
}

/* Base Typography */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
    color: var(--dm-text-1);
}

body.dark-mode p {
    color: var(--dm-text-2);
}

body.dark-mode small {
    color: var(--dm-text-3);
}

body.dark-mode strong {
    color: var(--dm-text-1);
}

body.dark-mode label {
    color: var(--dm-text-1);
}

/* Cards - Clearly Lighter Than Background with Depth */
body.dark-mode .card {
    background-color: var(--dm-bg-1);
    border: 1px solid var(--dm-border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.3);
}

body.dark-mode .card:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6), 0 2px 4px rgba(0, 0, 0, 0.4);
    border-color: var(--dm-border-strong);
}

body.dark-mode .card-header {
    color: var(--dm-text-1);
}

body.dark-mode .card p {
    color: var(--dm-text-2);
}

/* Stat Cards - Neutral Cards with Sage Border for CTAs */
body.dark-mode .stat-card {
    background: var(--dm-bg-1);
    border: 1px solid var(--dm-border-strong);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

body.dark-mode .stat-card:hover {
    border-color: var(--dm-accent);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6);
}

body.dark-mode .stat-card h3 {
    color: var(--dm-text-1);
    font-size: 20px;
}

body.dark-mode .stat-card p {
    color: var(--dm-text-2);
}

body.dark-mode .stat-card i {
    color: var(--dm-accent);
    filter: none;
}

/* Plant Cards */
body.dark-mode .plant-card {
    background-color: var(--dm-bg-1);
    border: 1px solid var(--dm-border);
}

body.dark-mode .plant-card-body {
    color: var(--dm-text-2);
}

/* Tables - Neutral with Clear Contrast */
body.dark-mode .table {
    background-color: var(--dm-bg-1);
    border: 1px solid var(--dm-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

body.dark-mode .table th {
    background: var(--dm-bg-2);
    color: var(--dm-text-1);
    border-bottom: 2px solid var(--dm-border-strong);
}

body.dark-mode .table td {
    color: var(--dm-text-2);
    border-bottom: 1px solid var(--dm-border);
}

body.dark-mode .table tbody tr:hover {
    background-color: var(--dm-bg-2);
}

/* Vitals - Neutral Cards with Clear Readability */
body.dark-mode .vital-item {
    background: var(--dm-bg-2);
    border-left: 3px solid var(--dm-accent);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

body.dark-mode .vital-item:hover {
    background: var(--dm-bg-3);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

body.dark-mode .vital-item strong {
    color: var(--dm-text-2);
}

body.dark-mode .vital-item span {
    color: var(--dm-text-1);
    font-weight: 700;
}

/* Forms & Inputs - Neutral with Sage Focus */
body.dark-mode .form-control {
    background: var(--dm-bg-2);
    border: 1px solid var(--dm-border);
    color: var(--dm-text-1);
}

body.dark-mode .form-control:focus {
    background: var(--dm-bg-2);
    border-color: var(--dm-accent);
    box-shadow: 0 0 0 3px var(--dm-focus);
}

body.dark-mode .form-control:hover {
    border-color: var(--dm-border-strong);
}

body.dark-mode .form-control::placeholder {
    color: var(--dm-text-3);
}

/* Buttons - Sage Primary, Neutral Secondary */
body.dark-mode .btn-primary {
    background: var(--dm-accent);
    color: var(--dm-accent-contrast);
    border: none;
}

body.dark-mode .btn-primary:hover {
    background: var(--dm-accent-hover);
}

body.dark-mode .btn-secondary {
    background: var(--dm-bg-2);
    color: var(--dm-text-1);
    border: 1px solid var(--dm-border);
}

body.dark-mode .btn-secondary:hover {
    background: var(--dm-bg-3);
    border-color: var(--dm-border-strong);
}

/* Alerts - Neutral Cards with Left Border Only */
body.dark-mode .alert {
    background-color: var(--dm-bg-1);
    color: var(--dm-text-1);
    border: 1px solid var(--dm-border);
}

body.dark-mode .alert-success {
    border-left: 3px solid var(--dm-success);
}

body.dark-mode .alert-warning {
    border-left: 3px solid var(--dm-warning);
}

body.dark-mode .alert-danger {
    border-left: 3px solid var(--dm-danger);
}

body.dark-mode .alert-info {
    border-left: 3px solid var(--dm-info);
}

/* Links - Sage Color */
body.dark-mode a {
    color: var(--dm-link);
}

body.dark-mode a:hover {
    color: var(--dm-link-hover);
}

/* Journal - Neutral Cards */
body.dark-mode .journal-entry {
    background-color: var(--dm-bg-1);
    border-left-color: var(--dm-accent);
}

body.dark-mode .journal-entry-title {
    color: var(--dm-text-1);
}

body.dark-mode .journal-entry-date {
    color: var(--dm-text-3);
}

/* ROI Section - Neutral Background */
body.dark-mode .roi-section {
    background: var(--dm-bg-1);
    border: 1px solid var(--dm-accent);
}

body.dark-mode .roi-card {
    background: var(--dm-bg-2);
}

body.dark-mode .roi-highlight {
    background: var(--dm-bg-3);
    border: 1px solid var(--dm-accent);
}

body.dark-mode .roi-details {
    background: var(--dm-bg-2);
}

/* Growing Setup Box - Neutral */
body.dark-mode .growing-setup-box {
    background: var(--dm-bg-2);
}

body.dark-mode .growing-setup-box h3 {
    color: var(--dm-text-1);
}

/* Environment Banner - Neutral */
body.dark-mode .env-banner {
    background: var(--dm-bg-1);
    border: 1px solid var(--dm-accent);
}

/* Footer & Navbar - Subtle Shadows */
body.dark-mode .navbar,
body.dark-mode footer {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* Page Header */
body.dark-mode .page-header h1 {
    color: var(--dm-text-1);
}

/* Dark Mode Toggle */
.dark-mode-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dark-mode-icon {
    transition: opacity var(--transition-fast) var(--ease-smooth);
    cursor: pointer;
}

.dark-mode-icon:hover {
    opacity: 0.8;
}

/* Logo Glow Animation */
body.dark-mode .nav-brand img {
}


    50% {
    }
}

/* Brand Link */
.nav-brand a {
    color: white;
    text-decoration: none;
    font-size: 28px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}

/* ROI Section */
.roi-section {
    margin-top: 0.75rem;
    padding: 0.75rem;
    background: var(--bg-2);
    border-radius: 2px;
    color: var(--text-dark);
    box-shadow: none;
    border: 1px solid var(--border-color);
    transition: border-color var(--transition-fast) var(--ease-smooth);
}

.roi-section:hover {
    border-color: var(--color-neutral-text-3);
}

.roi-card {
    background: var(--bg-1);
    padding: 0.75rem;
    border-radius: 2px;
    border: 1px solid var(--border-color);
}

.roi-highlight {
    background: var(--bg-2);
    border: 1px solid var(--border-color);
}

.roi-details {
    background: var(--bg-2);
    padding: 0.75rem;
    border-radius: 2px;
    margin-top: 0.5rem;
    border: 1px solid var(--border-color);
}

body.dark-mode .roi-section {
    background: var(--card-bg);
    border: 1px solid var(--primary-color);
}

body.dark-mode .roi-card {
    background: rgba(0, 0, 0, 0.2);
}

body.dark-mode .roi-highlight {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--primary-color);
}

body.dark-mode .roi-details {
    background: rgba(0, 0, 0, 0.3);
}

/* Growing Setup Box */
.growing-setup-box {
    background: var(--bg-2);
    padding: 0.75rem;
    border-radius: 2px;
    border-left: 2px solid var(--border-color);
    border: 1px solid var(--border-color);
}

.growing-setup-box h3 {
    color: var(--text-dark);
}

body.dark-mode .growing-setup-box {
    background: var(--bg-1);
}

/* Environment Banner */
.env-banner {
    background: var(--bg-2);
    padding: 0.75rem;
    border-radius: 2px;
    color: var(--text-dark);
    border: 1px solid var(--border-color);
}

body.dark-mode .env-banner {
    background: var(--card-bg);
    border: 1px solid var(--primary-color);
}

/* Hamburger Menu */
.hamburger {
    display: none;
    flex-direction: column;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    z-index: 1000;
}

.hamburger span {
    width: 25px;
    height: 3px;
    background-color: white;
    margin: 3px 0;
    transition: all var(--transition-fast) var(--ease-smooth);
    border-radius: 3px;
}

.hamburger.active span:nth-child(1) {
    transform: rotate(-45deg) translate(-5px, 6px);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: rotate(45deg) translate(-5px, -6px);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .container {
        padding: 0 var(--spacing-sm);
    }

    .dashboard-grid,
    .plant-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: var(--spacing-sm);
    }
}

@media (max-width: 768px) {
    body {
        font-size: 14px;
    }

    h1 {
        font-size: 28px;
    }

    h2 {
        font-size: 24px;
    }

    h3 {
        font-size: 20px;
    }

    .stat-card h3,
    .metric-value {
        font-size: 28px;
    }

    .hamburger {
        display: flex;
    }

    .dashboard-grid,
    .plant-grid {
        grid-template-columns: 1fr;
    }

    .page-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .btn-group {
        flex-direction: column;
        width: 100%;
    }

    .btn {
        width: 100%;
        text-align: center;
    }

    .card {
        padding: var(--spacing-sm);
    }

    .reminder-item,
    .journal-entry {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-xs);
    }

    main {
        padding: var(--spacing-sm) 0;
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: 24px;
    }

    .page-header h1 {
        font-size: 24px;
    }

    .stat-card h3 {
        font-size: 24px;
    }

    .card {
        padding: 0.75rem;
        margin-bottom: var(--spacing-sm);
    }

    .dashboard-grid {
        gap: 0.75rem;
    }
}

/* ============================================
   REMINDERS PAGE - Calendar & Modal Styles
   ============================================ */

/* Reminders Page Background - Neutral Only */
.reminders-page-wrapper {
    background: var(--bg-0);
    padding: 40px 32px;
    min-height: 100vh;
}

/* Calendar Card */
.calendar-card {
    background-color: var(--card-bg);
    border-radius: 2px;
    box-shadow: var(--shadow-lg);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    border: 1px solid var(--border-color);
}

/* Calendar Header */
.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.calendar-nav-btn {
    font-size: 24px;
    padding: 0.5rem 1rem;
    min-width: 50px;
}

.view-selector-dropdown {
    padding: 0.6rem 1.2rem;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    font-size: 15px;
    font-weight: 600;
    background: white;
    cursor: pointer;
    transition: all var(--transition-fast) var(--ease-smooth);
}

.view-selector-dropdown:hover,
.view-selector-dropdown:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--color-neutral-border);
}

/* Calendar Layout - Main Grid with Sidebar */
.calendar-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.calendar-grid-container {
    background: white;
    border-radius: 4px;
    padding: var(--spacing-md);
    box-shadow: var(--shadow-sm);
}

/* Month View Calendar Grid */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background-color: var(--border-color);
    border-radius: 4px;
    overflow: hidden;
}

.calendar-day-header {
    background: var(--primary-color);
    color: white;
    padding: 0.75rem;
    text-align: center;
    font-weight: 700;
    font-size: 14px;
}

.calendar-day {
    background: white;
    padding: 0.5rem;
    min-height: 90px;
    cursor: pointer;
    transition: background-color var(--transition-fast) var(--ease-smooth);
    position: relative;
}

.calendar-day:hover {
    background-color: var(--bg-2);
}

.calendar-day.empty {
    background-color: #f5f5f5;
    cursor: default;
}

.calendar-day.empty:hover {
    background-color: #f5f5f5;
}

.calendar-day.today {
    background: var(--bg-1);
    border: 1px solid var(--primary-color);
}

.day-number {
    font-weight: 700;
    font-size: 16px;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

.day-reminders {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.calendar-reminder {
    padding: 0.2rem 0.4rem;
    border-radius: 2px;
    font-size: 11px;
    font-weight: 500;
    color: white;
    cursor: pointer;
    transition: opacity var(--transition-fast) var(--ease-smooth);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendar-reminder:hover {
    opacity: 0.9;
}

.calendar-reminder.overdue {
    opacity: 0.7;
    border: 1px solid var(--danger-color);
}

/* Week View & Day View Time Grid */
.time-grid-container {
    display: grid;
    grid-template-rows: auto 1fr;
    background: white;
    border-radius: 4px;
    overflow: hidden;
}

.time-grid-container.week-view {
    min-height: 600px;
}

.time-grid-container.day-view {
    min-height: 600px;
}

.time-grid-header {
    display: grid;
    background: var(--primary-color);
    color: white;
    position: sticky;
    top: 0;
    z-index: 10;
}

.week-view .time-grid-header {
    grid-template-columns: 80px repeat(7, 1fr);
}

.day-view .time-grid-header {
    grid-template-columns: 1fr;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-md);
}

.time-grid-corner {
    background: transparent;
}

.time-grid-day-header {
    padding: var(--spacing-md);
    text-align: center;
    font-weight: 700;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.time-grid-day-header.today {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid white;
}

.day-header-name {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.day-header-number {
    font-size: 24px;
    font-weight: 700;
}

.time-grid-body {
    display: grid;
    position: relative;
}

.week-view .time-grid-body {
    grid-template-columns: 80px 1fr;
}

.day-view .time-grid-body {
    grid-template-columns: 80px 1fr;
}

.time-labels {
    display: flex;
    flex-direction: column;
    background: var(--light-bg);
    border-right: 2px solid var(--border-color);
}

.time-label {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-light);
    border-bottom: 1px solid var(--border-color);
}

.week-columns {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    position: relative;
}

.day-column,
.time-slots {
    position: relative;
    border-left: 1px solid var(--border-color);
}

.time-slot {
    height: 60px;
    border-bottom: 1px solid var(--border-color);
    transition: background-color var(--transition-fast) var(--ease-smooth);
}

.time-slot:hover {
    background-color: var(--color-neutral-border);
}

.time-grid-event {
    position: absolute;
    left: 2px;
    right: 2px;
    padding: 0.4rem;
    border-radius: 2px;
    font-size: 12px;
    font-weight: 500;
    color: white;
    cursor: pointer;
    transition: opacity var(--transition-fast) var(--ease-smooth);
    z-index: 5;
    box-shadow: none;
    border: 1px solid rgba(0,0,0,0.1);
    height: 58px;
    overflow: hidden;
}

.time-grid-event:hover {
    opacity: 0.9;
    z-index: 10;
}

.time-grid-event.overdue {
    opacity: 0.7;
    border: 1px solid var(--danger-color);
}

.event-time {
    font-size: 11px;
    opacity: 0.9;
    margin-bottom: 0.25rem;
}

.event-title {
    font-size: 13px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Calendar Legend Sidebar */
.calendar-legend {
    background: var(--card-bg);
    border-radius: 4px;
    padding: var(--spacing-md);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
}

.calendar-legend h4 {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: var(--spacing-sm);
}

.legend-section {
    margin-bottom: var(--spacing-md);
}

.legend-section h5 {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-light);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.legend-items {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem;
    border-radius: 2px;
    cursor: pointer;
    transition: background-color var(--transition-fast) var(--ease-smooth);
}

.legend-item:hover {
    background-color: var(--bg-2);
}

.legend-color {
    width: 16px;
    height: 16px;
    border-radius: 2px;
    box-shadow: none;
    border: 1px solid rgba(0,0,0,0.1);
}

/* Active/Completed Reminders Sections */
.reminders-section {
    background-color: var(--card-bg);
    border-radius: 2px;
    box-shadow: var(--shadow-md);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
    border: 1px solid var(--border-color);
}

.reminders-section-header {
    font-size: 28px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.reminder-accordion {
    background: white;
    border-radius: 2px;
    margin-bottom: 0.5rem;
    border: 1px solid var(--border-color);
    overflow: hidden;
    transition: border-color var(--transition-fast) var(--ease-smooth);
}

.reminder-accordion:hover {
    border-color: var(--color-neutral-text-3);
}

.reminder-accordion-header {
    padding: var(--spacing-md);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--light-bg);
}

.reminder-accordion-header:hover {
    background: var(--accent-light);
}

.reminder-accordion-body {
    padding: var(--spacing-md);
    border-top: 1px solid var(--border-color);
}

/* Reminder Plant Name Link */
.reminder-plant-name {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.reminder-plant-name a {
    color: var(--primary-color);
    text-decoration: none;
    transition: all var(--transition-fast) var(--ease-smooth);
}

.reminder-plant-name a:hover {
    color: var(--secondary-color);
    text-decoration: underline;
}

/* Reminder Modal */
.reminder-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.reminder-modal-content {
    background-color: var(--card-bg);
    border-radius: 3px;
    padding: 1rem;
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    border: 1px solid var(--border-color);
    position: relative;
}

.reminder-modal-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    font-size: 24px;
    font-weight: 700;
    color: var(--text-dark);
    cursor: pointer;
    transition: opacity var(--transition-fast) var(--ease-smooth);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
}

.reminder-modal-close:hover {
    opacity: 0.6;
}

.modal-plant-link {
    margin: var(--spacing-sm) 0;
}

/* Reminder Form Enhancements */
.form-group-inline {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-sm);
}

.form-label-required::after {
    content: " *";
    color: var(--danger-color);
    font-weight: 700;
}

.category-select-wrapper {
    position: relative;
}

.category-color-preview {
    position: absolute;
    right: 12px;
    top: 50%;
    /* removed centering transform */
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid white;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-fast) var(--ease-smooth);
    opacity: 0;
}

.category-color-preview.active {
    opacity: 1;
}

.validation-feedback {
    font-size: 13px;
    margin-top: 0.25rem;
    font-weight: 600;
    transition: all var(--transition-fast) var(--ease-smooth);
}

.validation-feedback.valid {
    color: var(--success-color);
}

.validation-feedback.invalid {
    color: var(--danger-color);
}

.form-control.valid {
    border-color: var(--success-color);
}

.form-control.invalid {
    border-color: var(--danger-color);
}

/* Repeat Preview */
.repeat-preview-container {
    background: var(--light-bg);
    border-radius: 4px;
    padding: var(--spacing-md);
    margin-top: var(--spacing-sm);
    border-left: 3px solid var(--primary-color);
    display: none;
}

.repeat-preview-container h6 {
    font-size: 14px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.preview-date-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: white;
    border-radius: 2px;
    margin-bottom: 0.25rem;
    font-size: 13px;
}

/* File Upload Area */
.file-upload-area {
    border: 1px dashed var(--border-color);
    border-radius: 2px;
    padding: 0.75rem;
    text-align: center;
    cursor: pointer;
    transition: border-color var(--transition-fast) var(--ease-smooth);
    background: white;
}

.file-upload-area:hover,
.file-upload-area.drag-over {
    border-color: var(--text-light);
    background: var(--bg-2);
}

.file-upload-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.file-preview-container {
    display: none;
    background: white;
    border-radius: 4px;
    padding: var(--spacing-sm);
    margin-top: var(--spacing-sm);
    border: 1px solid var(--border-color);
    position: relative;
}

.file-preview-icon {
    font-size: 48px;
    color: var(--primary-color);
}

.file-preview-info {
    text-align: center;
}

.file-preview-name {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 0.25rem;
}

.file-preview-size {
    font-size: 12px;
    color: var(--text-light);
}

.file-preview-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--danger-color);
    color: white;
    border: none;
    border-radius: 2px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity var(--transition-fast) var(--ease-smooth);
}

.file-preview-remove:hover {
    opacity: 0.8;
}

/* AI Suggestions Box */
.ai-suggestions-box {
    background: var(--bg-1);
    color: white;
    border-radius: 4px;
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    display: none;
}

.ai-suggestion-item {
    background: rgba(255, 255, 255, 0.2);
    padding: var(--spacing-sm);
    border-radius: 4px;
    border-left: 3px solid white;
    
}

/* Voice Input Buttons */
.btn-voice-inline {
    background: var(--bg-1);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 2px;
    cursor: pointer;
    transition: opacity var(--transition-fast) var(--ease-smooth);
    font-size: 14px;
}

.btn-voice-inline:hover {
    opacity: 0.9;
}

.btn-primary-enhanced {
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 2px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity var(--transition-fast) var(--ease-smooth);
}

.btn-primary-enhanced:hover {
    opacity: 0.9;
}

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

/* AI Suggestions Banner */
.ai-suggestions-banner {
    background: var(--bg-1);
    color: white;
    padding: var(--spacing-md);
    border-radius: 4px;
    margin-bottom: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    box-shadow: var(--shadow-lg);
}

.ai-suggestions-banner i {
    font-size: 24px;
}

.btn-ai-accept {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid white;
    color: white;
    padding: 0.4rem 0.8rem;
    border-radius: 2px;
    cursor: pointer;
    font-weight: 500;
    transition: opacity var(--transition-fast) var(--ease-smooth);
    margin-left: auto;
}

.btn-ai-accept:hover {
    opacity: 0.9;
}

.btn-ai-dismiss {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 28px;
    height: 28px;
    border-radius: 2px;
    cursor: pointer;
    font-size: 18px;
    font-weight: 700;
    transition: opacity var(--transition-fast) var(--ease-smooth);
}

.btn-ai-dismiss:hover {
    opacity: 0.8;
}

/* Calendar Controls */
.calendar-controls {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-color);
}

/* Reminder Count Badge */
.reminder-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--text-light);
    color: white;
    font-size: 12px;
    font-weight: 600;
    min-width: 24px;
    height: 24px;
    border-radius: 2px;
    padding: 0.2rem;
}

/* Toggle Section Button */
.btn-toggle-section {
    background: transparent;
    border: none;
    color: var(--text-dark);
    cursor: pointer;
    font-size: 18px;
    padding: 0.4rem;
    transition: opacity var(--transition-fast) var(--ease-smooth);
    border-radius: 2px;
}

.btn-toggle-section:hover {
    opacity: 0.7;
}

/* Reminders List */
.reminders-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    transition: all var(--transition-speed) var(--ease-smooth);
    overflow: hidden;
}

/* Reminder Category Badge */
.reminder-category-badge {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border-radius: 2px;
    font-size: 10px;
    font-weight: 600;
    color: white;
    margin-bottom: 0.25rem;
}

/* Reminder Description */
.reminder-description {
    margin-top: 0.5rem;
    color: var(--text-light);
    font-size: 14px;
    font-style: italic;
}

.reminder-repeat {
    margin-top: 0.5rem;
}

/* Button Small */
.btn-sm {
    padding: 0.5rem 0.75rem;
    font-size: 13px;
}

/* Hover Effects Removed - No Tooltips */

/* Legend Item Active State */
.legend-item.active {
    background-color: var(--accent-light);
    border-left: 3px solid var(--primary-color);
}


/* Enhanced Form Modal Styling */
#reminder-modal .reminder-modal-content {
    max-height: 90vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--primary-color) var(--light-bg);
}

#reminder-modal .reminder-modal-content::-webkit-scrollbar {
    width: 8px;
}

#reminder-modal .reminder-modal-content::-webkit-scrollbar-track {
    background: var(--light-bg);
    border-radius: 4px;
}

#reminder-modal .reminder-modal-content::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 4px;
}


/* Loading State for Submit Button */
.btn-primary-enhanced.loading {
    position: relative;
    color: transparent;
    pointer-events: none;
}

.btn-primary-enhanced.loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* Responsive Adjustments */
@media (max-width: 1024px) {
    .calendar-layout {
        grid-template-columns: 1fr;
    }
    
    .calendar-legend {
        order: -1;
    }
}

@media (max-width: 768px) {
    .reminders-page-wrapper {
        padding: var(--spacing-md);
    }
    
    .calendar-header {
        flex-direction: column;
        align-items: stretch;
    }
    
    .calendar-day {
        min-height: 80px;
        padding: 0.5rem;
    }
    
    .day-number {
        font-size: 14px;
    }
    
    .calendar-reminder {
        font-size: 11px;
        padding: 0.2rem 0.4rem;
    }
    
    .week-view .time-grid-header {
        grid-template-columns: 60px repeat(7, 1fr);
    }
    
    .week-view .time-grid-body {
        grid-template-columns: 60px 1fr;
    }
    
    .time-label {
        font-size: 11px;
        padding: 0.25rem;
    }
    
    .reminder-modal-content {
        max-width: 95%;
        padding: var(--spacing-md);
    }
    
    .form-group-inline {
        grid-template-columns: 1fr;
    }
}

/* Dark Mode - Reminders Calendar - Neutral */
body.dark-mode .calendar-card,
body.dark-mode .reminders-section {
    background-color: var(--dm-bg-1);
    border: 1px solid var(--dm-border);
}

body.dark-mode .calendar-grid-container {
    background-color: var(--dm-bg-1);
}

body.dark-mode .calendar-day {
    background-color: var(--dm-bg-1);
    border-color: var(--dm-border);
}

body.dark-mode .calendar-day:hover {
    background-color: var(--dm-bg-2);
    border-color: var(--dm-border-strong);
}

body.dark-mode .calendar-day.today {
    background: var(--dm-bg-2);
    border: 1px solid var(--dm-accent);
    box-shadow: none;
}

body.dark-mode .view-selector-dropdown {
    background-color: var(--dm-bg-2);
    border-color: var(--dm-border);
    color: var(--dm-text-1);
}

body.dark-mode .view-selector-dropdown:hover,
body.dark-mode .view-selector-dropdown:focus {
    border-color: var(--dm-accent);
    box-shadow: 0 0 0 3px var(--dm-focus);
}

body.dark-mode .file-upload-area {
    background-color: var(--dm-bg-1);
    border-color: var(--dm-border);
    color: var(--dm-text-2);
}

body.dark-mode .file-upload-area:hover {
    background-color: var(--dm-bg-2);
    border-color: var(--dm-accent);
}

body.dark-mode .reminder-modal-content {
    background-color: var(--dm-bg-1);
    border-color: var(--dm-accent);
}

body.dark-mode .time-slot {
    background-color: var(--dm-bg-1);
    border-color: var(--dm-border);
}

body.dark-mode .time-slot:hover {
    background-color: var(--dm-bg-2);
}

body.dark-mode .preview-date-item,
body.dark-mode .file-preview-container {
    background-color: var(--dm-bg-2);
    border-color: var(--dm-border);
}

body.dark-mode .calendar-legend {
    background: var(--dm-bg-2);
}

body.dark-mode .legend-item {
    background: var(--dm-bg-1);
}

body.dark-mode .legend-item:hover {
    background: var(--dm-bg-3);
    border-color: var(--dm-accent);
}

body.dark-mode .legend-item.active {
    background: var(--dm-bg-3);
    border-color: var(--dm-accent);
}

body.dark-mode .reminder-modal-close {
    color: var(--dm-text-2);
}

body.dark-mode .reminder-modal-close:hover {
    background-color: var(--dm-danger);
}

body.dark-mode #reminder-modal .reminder-modal-content::-webkit-scrollbar-thumb {
    background: var(--dm-accent);
}

body.dark-mode #reminder-modal .reminder-modal-content::-webkit-scrollbar-track {
    background: var(--dm-bg-2);
}

/* Print Styles */
@media print {
    .hamburger,
    .nav-menu,
    .user-bar,
    footer,
    .btn {
        display: none;
    }

    body {
        background: white;
    }

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

/* Dark Mode - Environment Alert Cards - Override Inline Styles */
body.dark-mode .metric-card,
body.dark-mode .alert-card {
    background: var(--dm-bg-1) !important;
    color: var(--dm-text-1) !important;
}

body.dark-mode .metric-icon-box {
    background: var(--dm-bg-2) !important;
}

body.dark-mode .metric-header {
    background: var(--dm-bg-1) !important;
}

body.dark-mode .alert-card {
    border-left: 3px solid;
}

body.dark-mode .alert-card.danger,
body.dark-mode .metric-card.danger {
    border-left-color: var(--dm-danger) !important;
}

body.dark-mode .alert-card.warning,
body.dark-mode .metric-card.warning {
    border-left-color: var(--dm-warning) !important;
}

body.dark-mode .alert-card.success,
body.dark-mode .metric-card.success {
    border-left-color: var(--dm-success) !important;
}

body.dark-mode .alert-card.info,
body.dark-mode .metric-card.info {
    border-left-color: var(--dm-info) !important;
}

/* Dark Mode - Logo Glow - Subtle */
body.dark-mode .nav-brand img {
}


    50% {
    }
}

/* Dark Mode - User Bar */
body.dark-mode .user-bar {
    background-color: var(--dm-bg-2);
}

/* Dark Mode - Environment Alert Cards - Force Neutral with Left Border Only */
body.dark-mode .alert-card,
body.dark-mode .env-alert,
body.dark-mode [class*="alert-"],
body.dark-mode [style*="background"] {
    background: var(--dm-bg-1) !important;
    color: var(--dm-text-1) !important;
}

body.dark-mode .alert-card h3,
body.dark-mode .alert-card h4,
body.dark-mode .env-alert h3,
body.dark-mode .env-alert h4 {
    color: var(--dm-text-1) !important;
}

body.dark-mode .alert-card p,
body.dark-mode .env-alert p {
    color: var(--dm-text-2) !important;
}

body.dark-mode .alert-card i,
body.dark-mode .env-alert i {
    opacity: 1 !important;
}

/* ========================================
   DARK MODE FINAL OVERRIDES - MAXIMUM SPECIFICITY
   Force all elements to neutral grayscale
   ======================================== */

/* Override ALL inline styles and backgrounds in dark mode */
body.dark-mode div[style*="background"],
body.dark-mode section[style*="background"],
body.dark-mode .stat-card[style*="background"],
body.dark-mode *[style*="linear-gradient"] {
    background: var(--dm-bg-1) !important;
    background-color: var(--dm-bg-1) !important;
    background-image: none !important;
}

/* Force stat cards to neutral gray */
body.dark-mode .stat-card,
body.dark-mode .stat-card[style] {
    background: var(--dm-bg-1) !important;
    background-color: var(--dm-bg-1) !important;
    background-image: none !important;
    border: 1px solid var(--dm-border-strong) !important;
}

/* Make stat card numbers functional */
body.dark-mode .stat-card h3,
body.dark-mode .stat-card .metric-value {
    color: var(--dm-text-1) !important;
    font-size: 20px !important;
    font-weight: 600 !important;
}

/* Override dashboard sections */
body.dark-mode .dashboard-section[style],
body.dark-mode .card[style*="background"] {
    background: var(--dm-bg-1) !important;
    background-color: var(--dm-bg-1) !important;
    background-image: none !important;
}

/* Fix circular nav buttons - keep sage accent */
body.dark-mode .nav-circle,
body.dark-mode .circular-nav-btn {
    background: var(--dm-bg-2) !important;
    border: 3px solid var(--dm-accent) !important;
}

/* ========================================
   SEMANTIC CLASSES FOR DARK MODE FIX
   Replaces inline background styles
   ======================================== */

/* Info Cards */
.info-card {
    background: var(--light-bg);
}

body.dark-mode .info-card {
    background: var(--dm-bg-1) !important;
}

/* Success Cards */
.success-card {
    background: var(--light-bg);
}

body.dark-mode .success-card {
    background: var(--dm-bg-1) !important;
}

/* Warning Cards */
.warning-card {
    background: var(--light-bg);
}

body.dark-mode .warning-card {
    background: var(--dm-bg-1) !important;
}

/* Primary Summary Card (for batch harvest form) */
.primary-summary-card {
    background: var(--primary-color);
}

body.dark-mode .primary-summary-card {
    background: var(--dm-bg-1) !important;
    border: 1px solid var(--dm-accent) !important;
}

/* ROI Preview Container */
.roi-preview-container {
    background: var(--light-bg);
}

body.dark-mode .roi-preview-container {
    background: var(--dm-bg-2) !important;
}

/* Metric Icons with Semantic Colors */
.metric-icon-success {
    background: var(--primary-color-15);
}

.metric-icon-success i {
    color: var(--success);
}

.metric-icon-warning {
    background: rgba(255, 167, 38, 0.15);
}

.metric-icon-warning i {
    color: var(--warning);
}

.metric-icon-neutral {
    background: rgba(158, 158, 158, 0.15);
}

.metric-icon-neutral i {
    color: var(--text-3);
}

body.dark-mode .metric-icon-success,
body.dark-mode .metric-icon-warning,
body.dark-mode .metric-icon-neutral {
    background: var(--dm-bg-2) !important;
}

body.dark-mode .metric-icon-success i {
    color: var(--dm-success) !important;
}

body.dark-mode .metric-icon-warning i {
    color: var(--dm-warning) !important;
}

body.dark-mode .metric-icon-neutral i {
    color: var(--dm-text-3) !important;
}

/* ROI Status Data Attributes */
[data-roi-status="positive"] .roi-icon {
    color: var(--success-color);
}

[data-roi-status="negative"] .roi-icon {
    color: var(--warning);
}

[data-roi-status="positive"].savings-amount {
    color: var(--success-color);
}

[data-roi-status="negative"].savings-amount {
    color: var(--warning);
}

[data-roi-status="positive"].roi-value {
    color: var(--success-color);
}

[data-roi-status="negative"].roi-value {
    color: var(--warning);
}

[data-roi-status="positive"].roi-header {
    background: rgba(56, 142, 60, 0.08);
}

[data-roi-status="negative"].roi-header {
    background: rgba(255, 152, 0, 0.08);
}

[data-roi-status="positive"].roi-stat.highlight {
    background: rgba(56, 142, 60, 0.1);
}

[data-roi-status="negative"].roi-stat.highlight {
    background: rgba(255, 152, 0, 0.1);
}

body.dark-mode [data-roi-status="positive"].roi-header,
body.dark-mode [data-roi-status="negative"].roi-header {
    background: var(--dm-bg-1) !important;
}

body.dark-mode [data-roi-status="positive"].roi-stat.highlight,
body.dark-mode [data-roi-status="negative"].roi-stat.highlight {
    background: var(--dm-bg-2) !important;
}

body.dark-mode [data-roi-status="positive"] .roi-icon {
    color: var(--dm-success) !important;
}

body.dark-mode [data-roi-status="negative"] .roi-icon {
    color: var(--dm-warning) !important;
}

body.dark-mode [data-roi-status="positive"].savings-amount,
body.dark-mode [data-roi-status="positive"] .roi-value {
    color: var(--dm-success) !important;
}

body.dark-mode [data-roi-status="negative"].savings-amount,
body.dark-mode [data-roi-status="negative"] .roi-value {
    color: var(--dm-warning) !important;
}

/* ROI Gauge Status Colors */
.roi-gauge-fill[data-roi-status="excellent"] {
    stroke: var(--success-color);
}

.roi-gauge-fill[data-roi-status="good"] {
    stroke: var(--warning);
}

.roi-gauge-fill[data-roi-status="poor"] {
    stroke: var(--danger);
}

body.dark-mode .roi-gauge-fill[data-roi-status="excellent"] {
    stroke: var(--dm-success);
}

body.dark-mode .roi-gauge-fill[data-roi-status="good"] {
    stroke: var(--dm-warning);
}

body.dark-mode .roi-gauge-fill[data-roi-status="poor"] {
    stroke: var(--dm-danger);
}

/* ROI Summary Header */
.roi-summary-header {
    background: var(--light-bg);
}

body.dark-mode .roi-summary-header {
    background: var(--dm-bg-2) !important;
}

/* Verified/Estimated ROI Badges */
.verified-roi-badge[data-roi-status="positive"] {
    background: #c8e6c9;
    color: var(--text-dark);
}

.verified-roi-badge[data-roi-status="negative"] {
    background: #ffccbc;
    color: var(--text-dark);
}

.estimated-roi-badge {
    background: #e0e0e0;
    color: var(--text-dark);
}

body.dark-mode .verified-roi-badge[data-roi-status="positive"] {
    background: var(--dm-success) !important;
    color: var(--dm-accent-contrast) !important;
}

body.dark-mode .verified-roi-badge[data-roi-status="negative"] {
    background: var(--dm-warning) !important;
    color: var(--dm-accent-contrast) !important;
}

body.dark-mode .estimated-roi-badge {
    background: var(--dm-bg-3) !important;
    color: var(--dm-text-1) !important;
}

/* Batch Toggle Header */
.batch-toggle-header {
    background: var(--light-bg);
}

body.dark-mode .batch-toggle-header {
    background: var(--dm-bg-2) !important;
}

/* Stats Cards */
.stats-card {
    background: var(--light-bg);
}

.stats-card.neutral-card {
    background: var(--light-bg);
}

body.dark-mode .stats-card,
body.dark-mode .stats-card.neutral-card {
    background: var(--dm-bg-1) !important;
}

/* Recommendation Header */
.recommendation-header {
    background: var(--primary-color);
}

body.dark-mode .recommendation-header {
    background: var(--dm-bg-2) !important;
    border-bottom: 2px solid var(--dm-accent) !important;
}

/* Confidence Indicator */
.confidence-indicator {
    background: var(--light-bg);
}

body.dark-mode .confidence-indicator {
    background: var(--dm-bg-2) !important;
}

/* Success/Warning Messages */
.success-note,
.success-message {
    background: rgba(56, 142, 60, 0.1);
}

.warning-message {
    background: rgba(255, 152, 0, 0.1);
}

body.dark-mode .success-note,
body.dark-mode .success-message {
    background: var(--dm-bg-2) !important;
}

body.dark-mode .warning-message {
    background: var(--dm-bg-2) !important;
}

/* ROI Stat Aggregate */
.roi-stat-aggregate[data-roi-status="positive"] {
    background: rgba(56, 142, 60, 0.1);
}

.roi-stat-aggregate[data-roi-status="negative"] {
    background: rgba(255, 152, 0, 0.1);
}

.roi-stat-aggregate[data-roi-status="positive"] .roi-value-aggregate {
    color: var(--success-color);
}

.roi-stat-aggregate[data-roi-status="negative"] .roi-value-aggregate {
    color: var(--warning);
}

body.dark-mode .roi-stat-aggregate[data-roi-status="positive"],
body.dark-mode .roi-stat-aggregate[data-roi-status="negative"] {
    background: var(--dm-bg-2) !important;
}

body.dark-mode .roi-stat-aggregate[data-roi-status="positive"] .roi-value-aggregate {
    color: var(--dm-success) !important;
}

body.dark-mode .roi-stat-aggregate[data-roi-status="negative"] .roi-value-aggregate {
    color: var(--dm-warning) !important;
}

/* Warning Tip */
.warning-tip {
    background: rgba(255, 193, 7, 0.15);
}

body.dark-mode .warning-tip {
    background: var(--dm-bg-2) !important;
}

/* ROI Value Color Override */
body.dark-mode .roi-value {
    color: var(--dm-text-1);
}

body.dark-mode [data-roi-status="positive"] .roi-value {
    color: var(--dm-success) !important;
}

body.dark-mode [data-roi-status="negative"] .roi-value {
    color: var(--dm-warning) !important;
}

/* Force neutral backgrounds on all var(--light-bg) and var(--card-bg) inline styles in dark mode */
body.dark-mode [style*="background: var(--light-bg)"] {
    background: var(--dm-bg-2) !important;
}

body.dark-mode [style*="background: var(--card-bg)"] {
    background: var(--dm-bg-1) !important;
}

/* Warning Tip */
.warning-tip {
    background: rgba(255, 193, 7, 0.15);
}

body.dark-mode .warning-tip {
    background: var(--dm-bg-2) !important;
}

/* ROI Value Color Override */
body.dark-mode .roi-value {
    color: var(--dm-text-1);
}

body.dark-mode [data-roi-status="positive"] .roi-value {
    color: var(--dm-success) !important;
}

body.dark-mode [data-roi-status="negative"] .roi-value {
    color: var(--dm-warning) !important;
}

/* Force neutral backgrounds on all var(--light-bg) and var(--card-bg) inline styles in dark mode */
body.dark-mode [style*="background: var(--light-bg)"] {
    background: var(--dm-bg-2) !important;
}

body.dark-mode [style*="background: var(--card-bg)"] {
    background: var(--dm-bg-1) !important;
}

body.dark-mode .roi-stat-aggregate[data-roi-status="negative"] .roi-value-aggregate {
    color: var(--dm-warning) !important;
}

/* ========================================
   DARK MODE COMPREHENSIVE WHITE-BLOCK KILLER
   Fixes: Expenses, Admin, Reminders white backgrounds
   All pages with tables, calendars, forms
   ======================================== */

/* Kill ALL hardcoded white backgrounds */
body.dark-mode .calendar-day,
body.dark-mode .calendar-grid-container,
body.dark-mode .time-grid-container,
body.dark-mode .reminder-accordion,
body.dark-mode .preview-date-item,
body.dark-mode .file-preview-container,
body.dark-mode .file-upload-area,
body.dark-mode .view-selector-dropdown {
    background: var(--dm-bg-1) !important;
    color: var(--dm-text-1) !important;
}

/* Bootstrap/generic utility class overrides */
body.dark-mode .bg-white,
body.dark-mode [class*="bg-white"],
body.dark-mode .table-light,
body.dark-mode .text-dark {
    background: var(--dm-bg-1) !important;
    color: var(--dm-text-1) !important;
}

/* Page-level fixes */
body.dark-mode .reminders-page-wrapper {
    background: var(--dm-bg-0) !important;
}

/* Chart title/label text visibility (UI chrome only, not series) */
body.dark-mode .chart-title,
body.dark-mode .chart-legend,
body.dark-mode .section-title,
body.dark-mode .section-subtitle,
body.dark-mode .analyze-title,
body.dark-mode .analyze-subtitle,
body.dark-mode .metric-name,
body.dark-mode .metric-label,
body.dark-mode .filter-label,
body.dark-mode .now-label,
body.dark-mode .now-timestamp,
body.dark-mode .dropzone-text,
body.dark-mode .empty-state-title,
body.dark-mode .empty-state-text {
    color: var(--dm-text-1) !important;
}

/* All input/select elements readability */
body.dark-mode input[type="text"],
body.dark-mode input[type="date"],
body.dark-mode input[type="time"],
body.dark-mode input[type="datetime-local"],
body.dark-mode input[type="number"],
body.dark-mode input[type="email"],
body.dark-mode input[type="password"],
body.dark-mode input[type="file"],
body.dark-mode select,
body.dark-mode textarea,
body.dark-mode .filter-input,
body.dark-mode .filter-select {
    background: var(--dm-bg-2) !important;
    color: var(--dm-text-1) !important;
    border-color: var(--dm-border) !important;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
    color: var(--dm-text-3) !important;
}

/* Plant card header fix */
body.dark-mode .plant-card-header {
    background: var(--dm-bg-2) !important;
    color: var(--dm-text-1) !important;
    border-bottom-color: var(--dm-border);
}

body.dark-mode .plant-card-header h3 {
    color: var(--dm-text-1) !important;
}

/* Calendar legend text */
body.dark-mode .calendar-legend h4,
body.dark-mode .legend-section h5 {
    color: var(--dm-text-1) !important;
}

/* Reminder accordion header */
body.dark-mode .reminder-accordion-header {
    background: var(--dm-bg-2) !important;
}

body.dark-mode .reminder-accordion-header:hover {
    background: var(--dm-bg-3) !important;
}

/* Time labels */
body.dark-mode .time-labels,
body.dark-mode .time-label {
    background: var(--dm-bg-2) !important;
    color: var(--dm-text-2) !important;
    border-color: var(--dm-border) !important;
}

/* Fix Today page title */
body.dark-mode .page-header h1,
body.dark-mode .page-header h1 i {
    color: var(--dm-text-1) !important;
}

/* Reminders section headers */
body.dark-mode .reminders-section-header {
    color: var(--dm-text-1) !important;
}

/* Fix file preview icon colors */
body.dark-mode .file-preview-icon {
    color: var(--dm-text-2) !important;
}

body.dark-mode .file-preview-name {
    color: var(--dm-text-1) !important;
}

body.dark-mode .file-preview-size {
    color: var(--dm-text-3) !important;
}

/* Calendar empty days */
body.dark-mode .calendar-day.empty {
    background: var(--dm-bg-0) !important;
    opacity: 0.5;
}

body.dark-mode .calendar-day.empty:hover {
    background: var(--dm-bg-0) !important;
}


/* ========================================
   PR_DARK_MODE_ENFORCEMENT_LAYER_V1
   PASS 3: White block + invisible text extermination
   Targets: Admin tables, Expenses tables, Environment banner/upload, ALL remaining white surfaces
   Scope: body.dark-mode ONLY - light mode unchanged
   Chart series colors: UNTOUCHED
   ======================================== */

/* === 1) UNIVERSAL TEXT VISIBILITY === */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode .page-title,
body.dark-mode .section-title {
    color: var(--dm-text-1) !important;
}

body.dark-mode .text-muted,
body.dark-mode .muted,
body.dark-mode small,
body.dark-mode label,
body.dark-mode .form-label {
    color: var(--dm-text-2) !important;
}

body.dark-mode .info-notice,
body.dark-mode .info-notice-text {
    background: var(--dm-surface-2) !important;
    color: var(--dm-text-2) !important;
    border-color: var(--dm-border) !important;
}

/* === 2) WHITE BLOCK KILLER - Common Bootstrap/Utility Classes === */
body.dark-mode .card,
body.dark-mode .panel,
body.dark-mode .container .card,
body.dark-mode .container-fluid .card {
    background: var(--dm-surface-1) !important;
    color: var(--dm-text-1) !important;
}

/* === 3) TABLES EVERYWHERE (Admin, Expenses, Plant lists, etc.) === */
body.dark-mode table {
    background: var(--dm-surface-1) !important;
    color: var(--dm-text-1) !important;
    border-color: var(--dm-border) !important;
}

body.dark-mode thead,
body.dark-mode thead th {
    background: var(--dm-surface-2) !important;
    color: var(--dm-text-1) !important;
    border-color: var(--dm-border) !important;
}

body.dark-mode tbody,
body.dark-mode tbody tr,
body.dark-mode tbody td {
    background: var(--dm-surface-1) !important;
    color: var(--dm-text-1) !important;
    border-color: var(--dm-border) !important;
}

body.dark-mode th,
body.dark-mode td {
    color: var(--dm-text-1) !important;
    border-color: var(--dm-border) !important;
}

body.dark-mode .table-striped tbody tr:nth-of-type(odd) {
    background: var(--dm-surface-2) !important;
}

body.dark-mode .table-hover tbody tr:hover {
    background: var(--dm-surface-3) !important;
}

/* === 4) INPUTS/SELECTS/TEXTAREAS === */
body.dark-mode input[type="text"],
body.dark-mode input[type="email"],
body.dark-mode input[type="password"],
body.dark-mode input[type="number"],
body.dark-mode input[type="date"],
body.dark-mode input[type="time"],
body.dark-mode input[type="datetime-local"],
body.dark-mode input[type="search"],
body.dark-mode input[type="url"],
body.dark-mode input[type="tel"],
body.dark-mode select,
body.dark-mode textarea {
    background: var(--dm-surface-2) !important;
    color: var(--dm-text-1) !important;
    border-color: var(--dm-border) !important;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
    color: var(--dm-text-3) !important;
    opacity: 0.7;
}

body.dark-mode input:focus,
body.dark-mode select:focus,
body.dark-mode textarea:focus {
    border-color: var(--dm-accent) !important;
    outline: none;
}

/* === 5) ENVIRONMENT PAGE - Banner + Upload Zone === */
body.dark-mode .csv-dropzone {
    background: var(--dm-surface-2) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-1) !important;
}

body.dark-mode .csv-dropzone:hover,
body.dark-mode .csv-dropzone.dragover {
    background: var(--dm-surface-3) !important;
    border-color: var(--dm-accent) !important;
}

body.dark-mode .dropzone-icon {
    color: var(--dm-text-2) !important;
}

body.dark-mode .upload-history {
    background: var(--dm-surface-2) !important;
    border-color: var(--dm-border) !important;
}

/* === 6) ALERTS & NOTIFICATIONS === */
body.dark-mode .alert,
body.dark-mode .alert-info,
body.dark-mode .alert-warning,
body.dark-mode .alert-success,
body.dark-mode .alert-danger {
    background: var(--dm-surface-2) !important;
    color: var(--dm-text-1) !important;
    border-color: var(--dm-border) !important;
}

/* === 7) MODALS & OVERLAYS === */
body.dark-mode .modal-content,
body.dark-mode .modal-header,
body.dark-mode .modal-body,
body.dark-mode .modal-footer {
    background: var(--dm-surface-1) !important;
    color: var(--dm-text-1) !important;
    border-color: var(--dm-border) !important;
}

/* === 8) ADMIN PAGE SPECIFICS === */
body.dark-mode .admin-container,
body.dark-mode .admin-card,
body.dark-mode .user-row,
body.dark-mode .backup-row {
    background: var(--dm-surface-1) !important;
    color: var(--dm-text-1) !important;
}

/* === 9) EXPENSES PAGE SPECIFICS === */
body.dark-mode .expense-row,
body.dark-mode .expense-card,
body.dark-mode .expense-item,
body.dark-mode .expense-summary {
    background: var(--dm-surface-1) !important;
    color: var(--dm-text-1) !important;
}

body.dark-mode .expense-category,
body.dark-mode .expense-batch {
    color: var(--dm-text-2) !important;
}

/* === 10) BADGES & PILLS === */
body.dark-mode .badge,
body.dark-mode .pill,
body.dark-mode .tag {
    background: var(--dm-surface-3) !important;
    color: var(--dm-text-1) !important;
}

/* === 11) BUTTONS - Ensure secondary/default buttons are visible === */
body.dark-mode .btn-secondary,
body.dark-mode .btn-default,
body.dark-mode .btn-outline {
    background: var(--dm-surface-2) !important;
    color: var(--dm-text-1) !important;
    border-color: var(--dm-border) !important;
}

body.dark-mode .btn-secondary:hover,
body.dark-mode .btn-default:hover,
body.dark-mode .btn-outline:hover {
    background: var(--dm-surface-3) !important;
}

/* === 12) LIST GROUPS === */
body.dark-mode .list-group,
body.dark-mode .list-group-item {
    background: var(--dm-surface-1) !important;
    color: var(--dm-text-1) !important;
    border-color: var(--dm-border) !important;
}

body.dark-mode .list-group-item:hover {
    background: var(--dm-surface-2) !important;
}

/* === 13) DROPDOWNS & SELECTS === */
body.dark-mode .dropdown-menu {
    background: var(--dm-surface-1) !important;
    border-color: var(--dm-border) !important;
}

body.dark-mode .dropdown-item {
    color: var(--dm-text-1) !important;
}

body.dark-mode .dropdown-item:hover {
    background: var(--dm-surface-3) !important;
}

/* === 14) PAGINATION === */
body.dark-mode .pagination,
body.dark-mode .page-item,
body.dark-mode .page-link {
    background: var(--dm-surface-2) !important;
    color: var(--dm-text-1) !important;
    border-color: var(--dm-border) !important;
}

body.dark-mode .page-link:hover {
    background: var(--dm-surface-3) !important;
}

/* === 15) NAVS & TABS === */
body.dark-mode .nav-tabs,
body.dark-mode .nav-link {
    background: var(--dm-surface-2) !important;
    color: var(--dm-text-1) !important;
    border-color: var(--dm-border) !important;
}

body.dark-mode .nav-link.active {
    background: var(--dm-surface-1) !important;
}

/* === 16) BREADCRUMBS === */
body.dark-mode .breadcrumb {
    background: var(--dm-surface-2) !important;
}

body.dark-mode .breadcrumb-item {
    color: var(--dm-text-2) !important;
}

body.dark-mode .breadcrumb-item.active {
    color: var(--dm-text-1) !important;
}

/* === 17) PROGRESS BARS === */
body.dark-mode .progress {
    background: var(--dm-surface-2) !important;
}

/* === 18) TOOLTIP & POPOVER (if visible) === */
body.dark-mode .tooltip-inner {
    background: var(--dm-surface-3) !important;
    color: var(--dm-text-1) !important;
}

body.dark-mode .popover {
    background: var(--dm-surface-1) !important;
    border-color: var(--dm-border) !important;
}

body.dark-mode .popover-body {
    color: var(--dm-text-1) !important;
}

/* === 19) CODE & PRE BLOCKS === */
body.dark-mode code,
body.dark-mode pre {
    background: var(--dm-surface-3) !important;
    color: var(--dm-text-1) !important;
    border-color: var(--dm-border) !important;
}

/* === 20) HR DIVIDERS === */
body.dark-mode hr {
    border-color: var(--dm-border) !important;
    opacity: 0.3;
}

/* === 21) CHART WRAPPER TEXT (UI Chrome Only - NOT series colors) === */
body.dark-mode .chart-wrapper,
body.dark-mode .chart-container {
    color: var(--dm-text-1) !important;
}

body.dark-mode .chart-wrapper svg text,
body.dark-mode .chart-container svg text {
    fill: var(--dm-text-2) !important;
}

/* Ensure chart legends/axes are readable (NOT series paths) */
body.dark-mode .chart-legend-item,
body.dark-mode .chart-axis-label,
body.dark-mode .chart-tooltip {
    color: var(--dm-text-1) !important;
    background: var(--dm-surface-2) !important;
}

/* === 22) SPECIFIC TEMPLATE INLINE STYLE OVERRIDES === */
body.dark-mode [style*="background: white"],
body.dark-mode [style*="background:white"],
body.dark-mode [style*="background: #fff"],
body.dark-mode [style*="background:#fff"],
body.dark-mode [style*="background: #ffffff"],
body.dark-mode [style*="background:#ffffff"] {
    background: var(--dm-surface-1) !important;
}

body.dark-mode [style*="color: var(--text-dark)"] {
    color: var(--dm-text-1) !important;
}

/* === 23) ENSURE LINKS ARE VISIBLE === */
body.dark-mode a {
    color: var(--dm-accent);
}

body.dark-mode a:hover {
    opacity: 0.8;
}

/* === 24) FORM GROUPS & FIELD WRAPPERS === */
body.dark-mode .form-group,
body.dark-mode .form-field,
body.dark-mode .input-group {
    color: var(--dm-text-1) !important;
}

body.dark-mode .input-group-text {
    background: var(--dm-surface-2) !important;
    color: var(--dm-text-2) !important;
    border-color: var(--dm-border) !important;
}

/* === END PR_DARK_MODE_ENFORCEMENT_LAYER_V1 === */

/* ========================================
   PR_DARK_MODE_SURGICAL_FIXES_V1
   Dark mode grayscale only
   Fix leftover invisible text + button labels
   No chart series color changes
   No layout/behavior changes
   ======================================== */

/* === BUTTONS & LINKS TEXT VISIBILITY === */
body.dark-mode .btn,
body.dark-mode button,
body.dark-mode a.btn,
body.dark-mode .btn-primary,
body.dark-mode .btn-secondary,
body.dark-mode .btn-outline,
body.dark-mode .btn-outline-primary,
body.dark-mode .btn-outline-secondary,
body.dark-mode .subnav-pill-primary,
body.dark-mode .subnav-pill {
    color: var(--dm-text-1) !important;
}

/* Primary buttons need white text over colored backgrounds */
body.dark-mode .btn-primary,
body.dark-mode .subnav-pill-primary,
body.dark-mode button[type="submit"] {
    color: white !important;
}

/* Button icons inherit text color */
body.dark-mode .btn svg,
body.dark-mode .btn i,
body.dark-mode button svg,
body.dark-mode button i {
    color: currentColor !important;
    fill: currentColor !important;
    stroke: currentColor !important;
}

/* === MUTED TEXT / SUBTITLES === */
body.dark-mode .text-muted,
body.dark-mode .muted,
body.dark-mode .subtitle,
body.dark-mode .page-subtitle,
body.dark-mode .help-text,
body.dark-mode small,
body.dark-mode .small,
body.dark-mode .plants-page-description {
    color: var(--dm-text-2) !important;
    opacity: 1 !important;
}

/* === PAGE DESCRIPTION / SECONDARY TEXT === */
body.dark-mode p.plants-page-description,
body.dark-mode .section-description,
body.dark-mode .page-description {
    color: var(--dm-text-2) !important;
}

/* === CATCH INLINE BLACK TEXT === */
body.dark-mode [style*="color: #000"],
body.dark-mode [style*="color:#000"],
body.dark-mode [style*="color: rgb(0, 0, 0)"],
body.dark-mode [style*="color:rgba(0,0,0"] {
    color: var(--dm-text-1) !important;
}

/* === ACCENT BUTTONS (Edit, View, etc.) === */
body.dark-mode .btn-accent,
body.dark-mode a.btn-accent {
    background: var(--dm-surface-3) !important;
    color: var(--dm-text-1) !important;
    border-color: var(--dm-border) !important;
}

body.dark-mode .btn-accent:hover {
    background: var(--dm-accent) !important;
    color: var(--dm-text-1) !important;
}

/* === END PR_DARK_MODE_SURGICAL_FIXES_V1 === */

/* ========================================
   PHASE 3 FOUNDATION FIXES - Token Patch Completion
   Stages 3.3-3.5: CTA readability + white-block seal + opacity policy
   Evidence: DARK_MODE_PHASE2_AUDIT_REPORT.md
   ======================================== */

/* Stage 3.3: Primary CTA Readability Normalization */
/* Fix "Add Plant" button and similar primary action buttons with explicit white text */
body.dark-mode .subnav-pill-primary,
body.dark-mode a.subnav-pill-primary,
body.dark-mode .btn-primary,
body.dark-mode a.btn-primary,
body.dark-mode button[type="submit"],
body.dark-mode .btn-primary-enhanced {
    background: var(--dm-accent) !important;
    color: white !important;
    border-color: var(--dm-accent) !important;
}

body.dark-mode .subnav-pill-primary:hover,
body.dark-mode .btn-primary:hover,
body.dark-mode button[type="submit"]:hover {
    background: var(--dm-accent-hover) !important;
}

/* Stage 3.4: White-Block Normalization - Strengthen Overrides */
/* Catch all hardcoded white backgrounds in forms, cards, and inline styles */
body.dark-mode [style*="background: white"],
body.dark-mode [style*="background:white"],
body.dark-mode [style*="background: #fff"],
body.dark-mode [style*="background:#fff"],
body.dark-mode [style*="background: #ffffff"],
body.dark-mode [style*="background:#ffffff"],
body.dark-mode input[type="text"][style],
body.dark-mode input[type="email"][style],
body.dark-mode input[type="password"][style],
body.dark-mode input[type="number"][style],
body.dark-mode select[style],
body.dark-mode textarea[style] {
    background: var(--dm-bg-2) !important;
}

/* Bootstrap white background utilities */
body.dark-mode .bg-white,
body.dark-mode .table-light,
body.dark-mode [class*="bg-light"] {
    background: var(--dm-bg-1) !important;
}

/* Stage 3.5: Opacity Policy - Ensure Readability for User-Facing Text */
/* Remove opacity on text that must be readable (not disabled states) */
body.dark-mode .plants-page-description,
body.dark-mode .analyze-subtitle,
body.dark-mode .reminder-header-helper,
body.dark-mode [class*="-header"] p,
body.dark-mode [class*="-header"] small,
body.dark-mode .page-header p,
body.dark-mode .overview-header p,
body.dark-mode .recovery-header p {
    opacity: 1 !important;
}

/* Fix page header subtitle pattern visibility */
body.dark-mode .page-header p,
body.dark-mode .overview-header p,
body.dark-mode .recovery-header p,
body.dark-mode .plants-header p,
body.dark-mode .analyze-header p,
body.dark-mode [class*="-header"] > p {
    color: var(--dm-text-2) !important;
    opacity: 1 !important;
}

/* Ensure helper text remains visible but secondary */
body.dark-mode .reminder-header-helper,
body.dark-mode .empty-state-text,
body.dark-mode .info-notice-text {
    color: var(--dm-text-2) !important;
    opacity: 1 !important;
}

/* === END PHASE 3 FOUNDATION FIXES === */

/* ========================================
   PHASE 4.1 - LAYOUT & GLOBAL CHROME NORMALIZATION
   Complete the shared frame: headers, typography, cards, buttons, links, forms
   Ensure global defaults are deterministic and use authoritative dm tokens
   Scope: GLOBAL ONLY - no per-section fixes (those are Phase 4.2+)
   Evidence: DARK_MODE_GOVERNANCE.md + DARK_MODE_PHASE2_AUDIT_REPORT.md
   ======================================== */

/* GLOBAL TYPOGRAPHY FRAME - Ensure cascade correctness */
body.dark-mode {
    /* Body text inherits proper dark mode color */
    color: var(--dm-text-2) !important;
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
    color: var(--dm-text-1) !important;
}

body.dark-mode p,
body.dark-mode span,
body.dark-mode div {
    /* Let these inherit from context, but ensure minimum readability */
    color: inherit;
}

/* GLOBAL HEADER PATTERN - Page headers with subtitles */
body.dark-mode .page-header,
body.dark-mode .overview-header,
body.dark-mode .recovery-header,
body.dark-mode .plants-header,
body.dark-mode .analyze-header,
body.dark-mode .reminders-header {
    /* Headers use dm-text-1 by default via h1 rule above */
}

body.dark-mode .page-header h1,
body.dark-mode .overview-header h1,
body.dark-mode .plants-header h1,
body.dark-mode .analyze-header h1,
body.dark-mode .recovery-header h1 {
    color: var(--dm-text-1) !important;
}

body.dark-mode .page-header p,
body.dark-mode .overview-header p,
body.dark-mode .plants-header p,
body.dark-mode .analyze-header p,
body.dark-mode .recovery-header p {
    color: var(--dm-text-2) !important;
    opacity: 1 !important;
}

/* GLOBAL CARD/PANEL FRAME */
body.dark-mode .card,
body.dark-mode .panel,
body.dark-mode .section,
body.dark-mode .overview-section,
body.dark-mode .recovery-section {
    background: var(--dm-bg-1) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-1) !important;
}

body.dark-mode .card-header,
body.dark-mode .section-header,
body.dark-mode .panel-header {
    background: var(--dm-bg-2) !important;
    color: var(--dm-text-1) !important;
    border-color: var(--dm-border) !important;
}

body.dark-mode .card-body,
body.dark-mode .section-content,
body.dark-mode .panel-body {
    color: var(--dm-text-2) !important;
}

/* GLOBAL BUTTON FRAME - Ensure all button variants are readable */
body.dark-mode .btn,
body.dark-mode button {
    color: var(--dm-text-1) !important;
    border-color: var(--dm-border) !important;
}

body.dark-mode .btn-primary,
body.dark-mode .subnav-pill-primary,
body.dark-mode button[type="submit"],
body.dark-mode a.btn-primary {
    background: var(--dm-accent) !important;
    color: white !important;
    border-color: var(--dm-accent) !important;
}

body.dark-mode .btn-secondary,
body.dark-mode .subnav-pill,
body.dark-mode a.btn-secondary {
    background: var(--dm-bg-2) !important;
    color: var(--dm-text-1) !important;
    border-color: var(--dm-border) !important;
}

/* GLOBAL LINK FRAME - Grayscale only, no green */
body.dark-mode a {
    color: var(--dm-link) !important;
    text-decoration: none;
}

body.dark-mode a:hover {
    color: var(--dm-link-hover) !important;
}

/* Exceptions: buttons styled as links should use button colors */
body.dark-mode a.btn,
body.dark-mode a.btn-primary,
body.dark-mode a.btn-secondary,
body.dark-mode a.subnav-pill,
body.dark-mode a.subnav-pill-primary {
    /* Use button rules above */
}

/* GLOBAL FORM FRAME - Inputs, selects, textareas */
body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea,
body.dark-mode .form-control {
    background: var(--dm-bg-2) !important;
    color: var(--dm-text-1) !important;
    border-color: var(--dm-border) !important;
}

body.dark-mode input:focus,
body.dark-mode select:focus,
body.dark-mode textarea:focus,
body.dark-mode .form-control:focus {
    border-color: var(--dm-accent) !important;
    box-shadow: 0 0 0 3px var(--dm-focus) !important;
}

body.dark-mode label,
body.dark-mode .form-label {
    color: var(--dm-text-1) !important;
}

body.dark-mode ::placeholder {
    color: var(--dm-text-3) !important;
    opacity: 1 !important;
}

/* GLOBAL HELP/MUTED TEXT FRAME */
body.dark-mode small,
body.dark-mode .small,
body.dark-mode .text-muted,
body.dark-mode .muted,
body.dark-mode .help-text,
body.dark-mode .subtitle {
    color: var(--dm-text-2) !important;
    opacity: 1 !important;
}

/* GLOBAL TABLE FRAME (already exists but ensure completeness) */
body.dark-mode table,
body.dark-mode .table {
    background: var(--dm-bg-1) !important;
    border-color: var(--dm-border) !important;
}

body.dark-mode th,
body.dark-mode thead th {
    background: var(--dm-bg-2) !important;
    color: var(--dm-text-1) !important;
}

body.dark-mode td,
body.dark-mode tbody td {
    color: var(--dm-text-2) !important;
}

/* === END PHASE 4.1 GLOBAL CHROME NORMALIZATION === */

/* ========================================
   PR_DARK_MODE_PHASE4_3_PLANTS_BATCHES_V1
   Scoped fixes for Plants + Batches pages only
   Evidence: Forensic scan found white blocks, green tokens, opacity issues
   Scope: .plants-page-wrapper, plant/batch detail and form contexts
   ======================================== */

/* PLANTS PAGE - Eliminate green card headers, ensure all text readable */
body.dark-mode .plants-page-wrapper .plant-card-header-modern {
    background: var(--dm-bg-2) !important;
    color: var(--dm-text-1) !important;
}

/* Ensure plant info text is white (on dark header background) */
body.dark-mode .plants-page-wrapper .plant-primary-info h3,
body.dark-mode .plants-page-wrapper .plant-strain {
    color: white !important;
    opacity: 1 !important;
}

/* Plant status badges to grayscale */
body.dark-mode .plants-page-wrapper .plant-stage-badge,
body.dark-mode .plants-page-wrapper .plant-status-badge-quiet {
    background: rgba(255, 255, 255, 0.15) !important;
    color: white !important;
}

/* Ensure description and helper text readable */
body.dark-mode .plants-page-wrapper .plants-page-description {
    color: var(--dm-text-2) !important;
    opacity: 1 !important;
}

/* Fix empty state icon opacity */
body.dark-mode .plants-page-wrapper .empty-icon {
    opacity: 1 !important;
    color: var(--dm-text-3) !important;
}

/* BATCHES PAGE - Grayscale status badges, no green */
body.dark-mode .status-active,
body.dark-mode .status-completed {
    background: var(--dm-bg-3) !important;
    border: 1px solid var(--dm-border-strong) !important;
    color: var(--dm-text-1) !important;
}

body.dark-mode .batches-page .empty-icon {
    opacity: 1 !important;
}

/* PLANT/BATCH FORMS - Eliminate white input blocks from inline styles */
/* Forms use inline style="background: white" - must override with !important */
body.dark-mode form input[style*="background"],
body.dark-mode form select[style*="background"],
body.dark-mode form textarea[style*="background"] {
    background: var(--dm-bg-2) !important;
}

/* BATCH HARVEST FORM - Remove opacity from help text, ensure readability */
body.dark-mode form small[style*="opacity"],
body.dark-mode form span[style*="opacity: 0"] {
    opacity: 1 !important;
    color: var(--dm-text-2) !important;
}

/* PLANT/BATCH DETAIL - Remove green from headers, use grayscale */
body.dark-mode h3[style*="color: var(--primary-color)"] {
    color: var(--dm-text-1) !important;
}

/* Remove green from borders in plant/batch contexts */
body.dark-mode [style*="border-color: var(--primary-color)"],
body.dark-mode [style*="border-bottom-color: var(--primary-color)"],
body.dark-mode [style*="border-left: 4px solid var(--primary-color)"],
body.dark-mode [style*="border: 2px solid var(--primary-color)"] {
    border-color: var(--dm-border-strong) !important;
}

/* Plant count badges to grayscale */
body.dark-mode .plant-count-badge {
    background: var(--dm-bg-3) !important;
    color: var(--dm-text-1) !important;
}

body.dark-mode .harvested-badge {
    background: var(--dm-bg-3) !important;
}

/* === END PR_DARK_MODE_PHASE4_3_PLANTS_BATCHES_V1 === */

/* ========================================
   PR_DARK_MODE_PHASE4_4_ANALYZE_V1
   Analyze pages chart chrome + controls completion
   Scope: /analyze, /analyze/environment, /analyze/vitals, /analyze/compare
   Chart chrome ONLY (titles, axes, legends) - series colors preserved
   Evidence: Phase 3 mapped --text-primary/secondary; this ensures full coverage
   ======================================== */

/* Ensure chart section headers and titles use proper dark tokens */
/* These already partially covered by line 2963-2978 but ensure completeness */
body.dark-mode .chart-section,
body.dark-mode .chart-card,
body.dark-mode .filter-card {
    background: var(--dm-bg-1) !important;
    border-color: var(--dm-border) !important;
}

body.dark-mode .section-header {
    background: var(--dm-bg-2) !important;
    color: var(--dm-text-1) !important;
}

body.dark-mode .section-toggle {
    color: var(--dm-text-2) !important;
}

/* Ensure filter controls within analyze pages are readable */
body.dark-mode .filter-row input,
body.dark-mode .filter-row select,
body.dark-mode .filter-input,
body.dark-mode .filter-select,
body.dark-mode .time-preset-btn {
    background: var(--dm-bg-2) !important;
    color: var(--dm-text-1) !important;
    border-color: var(--dm-border) !important;
}

body.dark-mode .time-preset-btn.is-active {
    background: var(--dm-accent) !important;
    color: white !important;
}

body.dark-mode .time-range-indicator {
    color: var(--dm-text-3) !important;
}

/* Upload zone readability */
body.dark-mode .csv-dropzone,
body.dark-mode .upload-zone-wrap,
body.dark-mode .upload-history {
    background: var(--dm-bg-2) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-2) !important;
}

body.dark-mode .dropzone-icon {
    color: var(--dm-text-3) !important;
}

body.dark-mode .dropzone-filename,
body.dark-mode .upload-history-text {
    color: var(--dm-text-1) !important;
}

/* Batch chooser controls */
body.dark-mode .batch-compact-row,
body.dark-mode .batch-select-wrap {
    color: var(--dm-text-2) !important;
}

body.dark-mode .batch-choose-btn,
body.dark-mode .filter-btn {
    background: var(--dm-accent) !important;
    color: white !important;
    border-color: var(--dm-accent) !important;
}

/* Info notice banners */
body.dark-mode .info-notice {
    background: var(--dm-bg-2) !important;
    border-color: var(--dm-border) !important;
}

body.dark-mode .info-notice-text {
    color: var(--dm-text-2) !important;
}

/* Chart containers ensure proper text inheritance */
body.dark-mode .chart-container,
body.dark-mode .chart-wrapper {
    color: var(--dm-text-2) !important;
}

/* Now summary row (Environment page) */
body.dark-mode .now-summary-row {
    background: var(--dm-bg-1) !important;
    border-color: var(--dm-border) !important;
}

body.dark-mode .now-header {
    color: var(--dm-text-1) !important;
}

body.dark-mode .metric-chip {
    background: var(--dm-bg-2) !important;
    border-color: var(--dm-border) !important;
}

body.dark-mode .metric-value {
    color: var(--dm-text-1) !important;
}

/* === END PR_DARK_MODE_PHASE4_4_ANALYZE_V1 === */

/* ========================================
   PR_DARK_MODE_PHASE4_6_ADMIN_V1
   Admin pages minimal completion - most coverage via global chrome (Phase 4.1)
   Evidence: Admin mini-audit found 3 minor issues (undefined var, opacity)
   Scope: Admin pages only (/admin/users, /admin/backups)
   ======================================== */

/* Fix admin badge with undefined var(--text-muted) */
body.dark-mode [style*="color: var(--text-muted)"] {
    color: var(--dm-text-2) !important;
}

/* Fix admin badge backgrounds using var(--light-bg) */
body.dark-mode [style*="background: var(--light-bg)"] {
    background: var(--dm-bg-3) !important;
}

/* Normalize opacity on admin metadata text for readability */
body.dark-mode td[style*="opacity"],
body.dark-mode span[style*="opacity: 0.7"],
body.dark-mode span[style*="opacity: 0.8"],
body.dark-mode p[style*="opacity: 0.7"] {
    opacity: 1 !important;
}

/* === END PR_DARK_MODE_PHASE4_6_ADMIN_V1 === */

/* ========================================
   PR_DARK_MODE_PHASE4_7_BLOG_V1
   Blog pages minimal completion - most coverage via Phase 3.2 + global chrome
   Evidence: Blog mini-audit found var(--text-dark) leaks (sealed by Phase 3.2)
   Scope: Blog list, entry, editor pages
   ======================================== */

/* Ensure blog post cards and content panels use dark surfaces */
body.dark-mode .blog-post-card,
body.dark-mode .post-header,
body.dark-mode .post-content,
body.dark-mode .post-meta {
    background: var(--dm-bg-1) !important;
    color: var(--dm-text-2) !important;
}

body.dark-mode .blog-post-card h2,
body.dark-mode .blog-post-card h3,
body.dark-mode .post-title {
    color: var(--dm-text-1) !important;
}

/* Blog editor panels */
body.dark-mode .editor-panel,
body.dark-mode .preview-panel,
body.dark-mode .preview-content {
    background: var(--dm-bg-1) !important;
    color: var(--dm-text-2) !important;
}

/* Ensure blog form inputs are dark */
body.dark-mode .blog-form textarea,
body.dark-mode .blog-form input {
    background: var(--dm-bg-2) !important;
    color: var(--dm-text-1) !important;
}

/* === END PR_DARK_MODE_PHASE4_7_BLOG_V1 === */

/* ============================================
   PR-5: MOBILE RESPONSIVE LAYOUT PASS
   Target: iPhone-sized screens (~390px)
   Scope: Header, tables, forms, tap targets
   ============================================ */

@media (max-width: 640px) {
    /* ============================================
       PR-6.4: MOBILE NAV & ACTION BAR POLISH
       Target: iPhone-sized screens (≤640px)
       Scope: Header tap targets, action button toolbars
       ============================================ */
    
    /* === HEADER RESPONSIVE === */
    .app-header {
        padding: 0.5rem 0.75rem;
        min-height: 60px;
        overflow: hidden;
    }
    
    .header-left {
        gap: 0.5rem;
        flex-shrink: 0;
        overflow: hidden;
    }
    
    /* Hamburger - 44px tap target minimum */
    .sidebar-toggle {
        padding: 0.5rem;
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    
    .sidebar-toggle svg {
        width: 24px;
        height: 24px;
    }
    
    /* Brand - hide text, show icon only */
    .header-brand span {
        display: none;
    }
    
    .header-brand {
        font-size: 0;
        flex-shrink: 0;
    }
    
    .header-brand img {
        width: 36px;
        height: 36px;
    }
    
    /* Version badge - smaller, don't wrap */
    .app-version {
        font-size: 0.55rem !important;
        padding: 0.2rem 0.4rem !important;
        white-space: nowrap;
        flex-shrink: 0;
    }
    
    /* Header right - compact spacing */
    .header-right {
        gap: 0.25rem;
        flex-shrink: 0;
        overflow: hidden;
    }
    
    /* User menu - icon only */
    .user-menu {
        gap: 0.25rem;
        flex-shrink: 0;
    }
    
    .user-menu-item .menu-text {
        display: none;
    }
    
    /* User menu items - 44px tap targets */
    .user-menu-item {
        padding: 0.5rem;
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    
    .user-menu-item svg {
        width: 20px;
        height: 20px;
    }
    
    /* Dark mode toggle - 44px tap target */
    .dark-mode-btn {
        padding: 0.5rem;
        min-width: 44px;
        min-height: 44px;
        flex-shrink: 0;
    }
    
    .dark-mode-btn svg {
        width: 20px;
        height: 20px;
    }
    
    /* === MAIN CONTENT RESPONSIVE === */
    .app-main .container {
        padding: 0 0.75rem;
    }
    
    main {
        padding: 0.75rem 0;
    }
    
    /* === BUTTONS & TAP TARGETS === */
    .btn,
    button,
    a.btn {
        min-height: 44px;
        padding: 0.75rem 1rem;
        font-size: 15px;
    }
    
    .btn-group {
        flex-direction: column;
        width: 100%;
    }
    
    .btn-group .btn {
        width: 100%;
        justify-content: center;
    }
    
    /* === PAGE HEADERS === */
    .page-header {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }
    
    .page-header h1 {
        font-size: 20px;
    }
    
    /* === TABLES - SCROLL CONTAINER === */
    .table-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -0.75rem;
        padding: 0 0.75rem;
    }
    
    .table {
        min-width: 600px;
    }
    
    .table th,
    .table td {
        padding: 0.75rem 0.5rem;
        font-size: 14px;
    }
    
    /* === FORMS === */
    .form-control,
    input,
    select,
    textarea {
        font-size: 16px !important;
        padding: 0.75rem;
        min-height: 44px;
    }
    
    .form-group {
        margin-bottom: 1.25rem;
    }
    
    .form-group label {
        font-size: 15px;
        margin-bottom: 0.5rem;
    }
    
    /* === CARDS === */
    .card {
        padding: 1rem;
        margin-bottom: 1rem;
    }
    
    .dashboard-grid,
    .plant-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    /* === STAT CARDS === */
    .stat-card {
        padding: 1rem;
    }
    
    .stat-card h3 {
        font-size: 24px;
    }
    
    /* === FILTER FORMS (Expenses, Analyze pages) === */
    .card form[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
    
    /* === NAVIGATION ITEMS === */
    .nav-link {
        min-height: 44px;
        padding: 0.75rem 1rem;
    }
    
    /* === VITALS GRID === */
    .vitals-grid {
        grid-template-columns: 1fr;
    }
    
    /* === FOOTER === */
    footer {
        padding: 1rem 0;
        font-size: 13px;
    }
    
    /* ============================================
       PR-5.3: MOBILE DENSITY & READABILITY POLISH
       Metric tiles and expenses table improvements
       ============================================ */
    
    /* === METRIC TILES (Environment + Plant Vitals) === */
    /* Create clean 2-column grid for "NOW" metric tiles on mobile */
    .now-summary-row {
        padding: 0.75rem;
    }
    
    .now-header {
        margin-bottom: 0.75rem;
        padding-bottom: 0.5rem;
    }
    
    .now-label {
        font-size: 14px;
    }
    
    .now-timestamp {
        font-size: 13px;
    }
    
    .now-summary-row .now-metrics {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    
    .metric-chip {
        padding: 0.75rem 0.5rem;
        min-height: auto;
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }
    
    .metric-name {
        font-size: 12px;
        font-weight: 600;
        opacity: 0.85;
    }
    
    .metric-value {
        font-size: 16px;
        font-weight: 700;
        line-height: 1.2;
        word-break: break-word;
    }
    
    /* Last logged text on vitals page */
    div[style*="font-size: 11px"] {
        font-size: 12px !important;
    }
    
    /* === FILTER/FORM SECTIONS === */
    /* Make filter controls more spacious and readable */
    .filter-card {
        padding: 1rem;
    }
    
    .filter-row {
        grid-template-columns: 1fr !important;
        gap: 1rem;
    }
    
    .filter-group {
        width: 100%;
    }
    
    .filter-label {
        font-size: 15px;
        font-weight: 600;
        margin-bottom: 0.5rem;
    }
    
    .filter-input,
    .filter-select,
    .filter-btn {
        width: 100%;
        font-size: 16px;
        padding: 0.75rem;
        min-height: 44px;
    }
    
    /* Time preset buttons */
    .time-preset-btn {
        font-size: 15px;
        padding: 0.75rem 1rem;
        min-height: 44px;
    }
    
    /* === EXPENSES TABLE READABILITY === */
    /* Improve density and text wrapping in expense table */
    .table th,
    .table td {
        padding: 1rem 0.75rem;
        line-height: 1.5;
        vertical-align: top;
    }
    
    /* Make item names wrap nicely with more breathing room */
    .table td:nth-child(2) {
        max-width: 200px;
    }
    
    .table td:nth-child(2) strong {
        display: block;
        margin-bottom: 0.5rem;
        line-height: 1.4;
        word-wrap: break-word;
    }
    
    .table td:nth-child(2) small {
        display: block;
        line-height: 1.4;
        margin-top: 0.25rem;
    }
    
    /* Category pills with better spacing */
    .table td:nth-child(3) span {
        display: inline-block;
        margin: 0.25rem 0;
        white-space: normal;
        line-height: 1.3;
    }
    
    /* Batch select dropdowns more spacious */
    .table select.form-control {
        font-size: 15px;
        padding: 0.5rem;
        min-height: 40px;
    }
    
    /* Action buttons larger tap targets */
    .table .btn-sm {
        padding: 0.5rem 0.75rem;
        min-width: 40px;
        min-height: 40px;
    }
    
    /* === CHART SECTIONS === */
    /* Improve chart section headers on mobile */
    .section-header {
        padding: 1rem;
    }
    
    .section-title {
        font-size: 16px;
    }
    
    .section-subtitle {
        font-size: 13px;
        line-height: 1.4;
    }
    
    .chart-card {
        padding: 1rem;
    }
    
    .chart-title {
        font-size: 15px;
    }
    
    .chart-legend {
        font-size: 13px;
    }
    
    /* === UPLOAD ZONE === */
    .csv-dropzone {
        padding: 1.5rem 1rem;
        min-height: auto;
    }
    
    .dropzone-text {
        font-size: 14px;
    }
    
    .upload-history-text {
        font-size: 13px;
    }
}

/* ============================================
   PR-6.2: MOBILE STICKY ACTION BAR FOR FORMS
   Target: iPhone-sized screens (≤640px)
   Scope: Save/Cancel buttons on form pages
   ============================================ */

/* Mobile action bar - sticky at bottom on small screens */
@media (max-width: 640px) {
    .mobile-actionbar {
        position: sticky;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--card-bg);
        border-top: 1px solid var(--border-color);
        padding: 0.75rem;
        margin: 0 -1rem -1rem -1rem;
        z-index: 50;
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
    }
    
    /* Dark mode styling */
    body.dark-mode .mobile-actionbar {
        background: var(--dm-bg-1);
        border-top-color: var(--dm-border);
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.3);
    }
    
    /* Ensure buttons in action bar meet 44px tap target requirement */
    .mobile-actionbar .btn,
    .mobile-actionbar button,
    .mobile-actionbar a.btn {
        min-height: 44px;
        padding: 0.75rem 1rem;
        font-size: 15px;
    }
    
    /* Button container styling */
    .mobile-actionbar .form-actions,
    .mobile-actionbar .compose-actions {
        margin: 0;
        gap: 0.75rem;
        flex-direction: row;
    }
    
    /* Ensure full-width buttons stack properly */
    .mobile-actionbar .btn {
        flex: 1;
        justify-content: center;
    }
    
    /* Add bottom padding to form containers to prevent content from being hidden under sticky bar */
    .form-container,
    .form-card,
    .event-log-wrapper,
    .blog-compose-container {
        padding-bottom: 5rem;
    }
}

/* === MOBILE LANDSCAPE (small screens, landscape) === */
@media (max-width: 896px) and (orientation: landscape) {
    .app-header {
        position: sticky;
        top: 0;
        z-index: 100;
    }
}

/* === VERY NARROW SCREENS (single column fallback) === */
@media (max-width: 374px) {
    /* Switch metric tiles to single column on very narrow screens */
    .now-summary-row .now-metrics {
        grid-template-columns: 1fr;
    }
}