/* Earth Tone Theme for Verstas - Permaculture Tracking */

:root {
    /* Earth tone palette */
    --earth-cream: #f5f1e8;
    --earth-sand: #e8dcc4;
    --earth-terracotta: #c97064;
    --earth-clay: #a85751;
    --earth-forest: #4a6741;
    --earth-moss: #6b8e63;
    --earth-soil: #5d4e37;
    --earth-stone: #8b8680;
    
    /* Semantic colors */
    --primary: var(--earth-forest);
    --primary-light: var(--earth-moss);
    --accent: var(--earth-terracotta);
    --background: var(--earth-cream);
    --surface: white;
    --text: #2c2c2c;
    --text-light: #666;
    --border: var(--earth-sand);
}

/* Global styles */
body {
    background-color: var(--background);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Heading spacing - ensure proper vertical rhythm */
h1, h2, h3, h4, h5, h6,
.title, .subtitle {
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}

h1, .title.is-1 {
    margin-top: 0;
    margin-bottom: 1.5rem;
}

h2, .title.is-2 {
    margin-top: 2rem;
    margin-bottom: 1rem;
}

/* First heading in a section should not have top margin */
section > h1:first-child,
section > h2:first-child,
section > h3:first-child,
.section > h1:first-child,
.section > h2:first-child,
.section > h3:first-child {
    margin-top: 0;
}

/* Navbar */
.navbar,
.navbar.is-primary,
.hero.is-primary .navbar,
.hero .navbar,
section.hero .navbar {
    background-color: var(--earth-forest) !important;
    border-bottom: 3px solid var(--earth-moss);
}

.navbar-item,
.navbar.is-primary .navbar-item,
.hero.is-primary .navbar-item,
.hero .navbar-item,
section.hero .navbar-item {
    color: #ffffff !important;
    font-weight: 500;
}

.navbar-item:hover,
.navbar.is-primary .navbar-item:hover,
.hero.is-primary .navbar-item:hover,
.hero .navbar-item:hover,
section.hero .navbar-item:hover {
    background-color: var(--earth-moss) !important;
    color: white !important;
}

.navbar-brand .navbar-item {
    font-size: 1.25rem;
    font-weight: 700;
}

/* Fix dropdown menu text visibility */
.navbar-dropdown .navbar-item {
    color: #363636 !important; /* Dark text for dropdown items */
}

.navbar-dropdown .navbar-item:hover {
    background-color: #f5f5f5 !important;
    color: #363636 !important;
}

/* Accessibility - WCAG AA compliance for text colors */
.has-text-grey {
    color: #707070 !important; /* Darker grey with 5.05:1 contrast ratio on white background */
}

[data-theme="dark"] .has-text-grey {
    color: #b0b0b0 !important; /* Lighter grey for dark mode */
}

/* Boxes and Cards */
.box, .card {
    background-color: var(--surface);
    border: 1px solid var(--border);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.card-header {
    background-color: var(--earth-sand);
    border-bottom: 2px solid var(--border);
}

.card-header-title {
    color: var(--text);
    font-weight: 600;
}

/* Site Header Box */
.site-header-box {
    background: linear-gradient(135deg, white 0%, var(--earth-cream) 100%);
    border-left: 4px solid var(--earth-forest);
}

.stat-card {
    padding: 1rem;
    background-color: rgba(255,255,255,0.7);
    border-radius: 8px;
    text-align: center;
}

.stat-card .heading {
    color: var(--text-light);
    text-transform: uppercase;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
}

/* Hub Cards */
.hub-grid {
    margin-top: 2rem;
}

.hub-card {
    transition: all 0.3s ease;
    height: 100%;
    border-left: 4px solid transparent;
}

.hub-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.12);
    border-left-color: var(--earth-forest);
}

.hub-card .icon.has-text-success {
    color: var(--earth-forest) !important;
}

.hub-card .icon.has-text-info {
    color: var(--earth-stone) !important;
}

.hub-card .icon.has-text-warning {
    color: var(--earth-terracotta) !important;
}

.hub-stats {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    font-size: 0.9rem;
    color: var(--text-light);
}

.hub-stats p {
    margin-bottom: 0.25rem;
}

/* Links in cards */
a .card {
    color: inherit;
}

a:hover .card {
    text-decoration: none;
}

/* Buttons */
/* Ensure all button elements have visible backgrounds for accessibility */
/* Override Bulma defaults where needed while respecting component buttons */

/* Base styles for all buttons */
button:not(.delete):not(.modal-close):not(.navbar-burger), 
.button {
    background-color: var(--earth-forest);
    border-color: var(--earth-forest);
    color: white;
    padding: 0.5em 1em;
    border-radius: 4px;
    cursor: pointer;
    border-width: 1px;
}

button:not(.delete):not(.modal-close):not(.navbar-burger):hover,
.button:hover {
    background-color: var(--earth-moss);
    border-color: var(--earth-moss);
}

button.is-primary, .button.is-primary {
    background-color: var(--earth-forest);
    border-color: var(--earth-forest);
    color: white;
}

button.is-primary:hover, .button.is-primary:hover {
    background-color: var(--earth-moss);
    border-color: var(--earth-moss);
}

button.is-danger, .button.is-danger {
    background-color: var(--earth-terracotta);
    border-color: var(--earth-terracotta);
}

button.is-danger:hover, .button.is-danger:hover {
    background-color: var(--earth-clay);
    border-color: var(--earth-clay);
}

/* Forms */
.label {
    color: var(--text);
    font-weight: 600;
}

.input, .textarea, .select select {
    border-color: var(--border);
    background-color: white;
}

.input:focus, .textarea:focus, .select select:focus {
    border-color: var(--earth-forest);
    box-shadow: 0 0 0 0.125em rgba(74, 103, 65, 0.25);
}

/* Tables */
.table {
    background-color: white;
}

.table thead {
    background-color: var(--earth-sand);
}

.table thead th {
    color: var(--text);
    font-weight: 600;
    border-bottom: 2px solid var(--border);
}

.table tbody tr:hover {
    background-color: var(--earth-cream);
}

/* Tabs */
.tabs {
    margin-bottom: 1.5rem;
}

.tabs li.is-active a {
    border-bottom-color: var(--earth-forest);
    color: var(--earth-forest);
}

.tabs a:hover {
    border-bottom-color: var(--earth-moss);
    color: var(--earth-moss);
}

/* Notifications */
.notification.is-info {
    background-color: var(--earth-cream);
    color: var(--text);
}

.notification.is-success {
    background-color: var(--earth-moss);
    color: white;
}

.notification.is-warning {
    background-color: var(--earth-terracotta);
    color: white;
}

.notification.is-danger {
    background-color: var(--earth-clay);
    color: white;
}

/* Breadcrumb */
.breadcrumb {
    background-color: transparent;
}

.breadcrumb a {
    color: var(--earth-forest);
}

.breadcrumb a:hover {
    color: var(--earth-moss);
}

.breadcrumb li.is-active a {
    color: var(--text);
}

/* Tags */
.tag {
    border-radius: 4px;
}

.tag.is-primary {
    background-color: var(--earth-forest);
    color: white;
}

.tag.is-info {
    background-color: var(--earth-stone);
    color: white;
}

/* Progress bars */
.progress.is-primary::-webkit-progress-value {
    background-color: var(--earth-forest);
}

.progress.is-primary::-moz-progress-bar {
    background-color: var(--earth-forest);
}

/* Map containers */
.map-container {
    height: 500px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid var(--border);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Charts */
.chart-container {
    position: relative;
    height: 400px;
    padding: 20px;
    background-color: white;
    border-radius: 8px;
    border: 1px solid var(--border);
}

/* Footer */
.footer {
    background-color: var(--earth-forest);
    color: var(--earth-cream);
}

.footer strong {
    color: white;
}

/* Modals */
.modal-card-head {
    background-color: var(--earth-forest);
    border-bottom: none;
}

.modal-card-title {
    color: white;
}

.modal-card-foot {
    border-top: 1px solid var(--border);
    background-color: var(--earth-cream);
}

/* Loading spinner */
.fa-spinner {
    color: var(--earth-forest);
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
    .hub-grid .column {
        padding: 0.5rem;
    }
    
    .stat-card {
        margin-bottom: 0.5rem;
    }
    
    /* Make cards stack on mobile */
    .columns.is-multiline .column {
        flex-basis: 100%;
    }
    
    /* Ensure proper mobile spacing */
    .container {
        padding: 0.75rem;
    }
    
    /* Make tables scrollable on mobile */
    .table-container {
        overflow-x: auto;
    }
    
    /* Adjust font sizes for readability on mobile */
    body {
        font-size: 14px;
    }
    
    h1 {
        font-size: 1.75rem !important;
    }
    
    h2 {
        font-size: 1.5rem !important;
    }
}

/* Touch targets for mobile accessibility (WCAG 2.1 AA) */
@media (pointer: coarse) {
    .button, .navbar-burger, button, a.button {
        min-height: 44px;
        min-width: 44px;
        padding: 0.5rem 1rem;
    }
    
    input, select, textarea {
        min-height: 44px;
        font-size: 16px; /* Prevents zoom on iOS */
    }
    
    .navbar-item {
        min-height: 44px;
    }
}

/* Dark Mode Theme */
[data-theme="dark"] {
    /* Dark palette */
    --earth-cream: #1a1a1a;
    --earth-sand: #2a2a2a;
    --earth-terracotta: #d87e72;
    --earth-clay: #b86861;
    --earth-forest: #6b9e63;
    --earth-moss: #8fbc86;
    --earth-soil: #3a3a3a;
    --earth-stone: #6a6a6a;
    
    /* Semantic colors for dark mode */
    --primary: var(--earth-forest);
    --primary-light: var(--earth-moss);
    --accent: var(--earth-terracotta);
    --background: #121212;
    --surface: #1e1e1e;
    --text: #e0e0e0;
    --text-light: #b0b0b0;
    --border: #333333;
}

[data-theme="dark"] body {
    background-color: var(--background);
    color: var(--text);
}

[data-theme="dark"] .navbar {
    background-color: #1a1a1a;
    border-bottom-color: var(--earth-forest);
}

[data-theme="dark"] .navbar-item {
    color: var(--text) !important;
}

[data-theme="dark"] .navbar-item:hover {
    background-color: var(--earth-forest) !important;
    color: white !important;
}

[data-theme="dark"] .box,
[data-theme="dark"] .card {
    background-color: var(--surface);
    border-color: var(--border);
    color: var(--text);
}

[data-theme="dark"] .card-header {
    background-color: var(--earth-sand);
}

[data-theme="dark"] .table {
    background-color: var(--surface);
    color: var(--text);
}

[data-theme="dark"] .table thead {
    background-color: var(--earth-sand);
}

[data-theme="dark"] .table thead th {
    color: var(--text);
}

[data-theme="dark"] .table tbody tr:hover {
    background-color: var(--earth-soil);
}

[data-theme="dark"] .input,
[data-theme="dark"] .textarea,
[data-theme="dark"] .select select {
    background-color: var(--earth-sand);
    border-color: var(--border);
    color: var(--text);
}

[data-theme="dark"] .modal-card-foot {
    background-color: var(--earth-sand);
}

[data-theme="dark"] .notification.is-info {
    background-color: var(--earth-soil);
    color: var(--text);
}

[data-theme="dark"] .site-header-box {
    background: linear-gradient(135deg, var(--surface) 0%, var(--earth-sand) 100%);
}

[data-theme="dark"] .chart-container {
    background-color: var(--surface);
}

/* Improved focus indicators for accessibility */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
.navbar-burger:focus {
    outline: 2px solid var(--earth-moss);
    outline-offset: 2px;
}

[data-theme="dark"] a:focus,
[data-theme="dark"] button:focus,
[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] .navbar-burger:focus {
    outline-color: var(--earth-moss);
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --text: #000000;
        --background: #ffffff;
        --border: #000000;
    }
    
    [data-theme="dark"] {
        --text: #ffffff;
        --background: #000000;
        --border: #ffffff;
    }
}

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

/* Modal active states - support multiple activation patterns */
.modal.active,
.modal.is-active,
.modal[style*="display: block"] {
    display: flex !important;
}

.modal-content {
    background-color: white !important;
    margin: 0 auto;
    padding: 30px;
    border-radius: 10px;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
    position: relative;
}

.modal-content.modal-large {
    max-width: 800px;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}