/* 
 * AVA OLO UNIFIED DESIGN SYSTEM
 * Version: 4.0.0  
 * Created: 2025-08-26
 * 
 * THIS IS THE SINGLE SOURCE OF TRUTH FOR ALL DESIGN ELEMENTS
 * All templates should reference ONLY this CSS file
 * 
 * Design Philosophy:
 * - Minimalist two-color scheme: Vineyard Green (#2E5E3E) and White (#FFFFFF)
 * - ALL elements have rounded corners (no sharp edges anywhere) 
 * - Consistent spacing and typography
 * - Mobile-first responsive design
 * - Accessibility compliant (18px minimum font size)
 */

/* ========================================
   1. DESIGN TOKENS (Core Variables)
   ======================================== */

:root {
    /* === PRIMARY COLORS (Only 2 colors) === */
    --ava-primary: #2E5E3E;        /* Vineyard Green (main brand color) - TEST CHANGE */
    --ava-white: #FFFFFF;          /* Pure White */
    
    /* === DERIVED SHADES (Auto-generated from primary) === */
    --ava-primary-hover: #245031;  /* Darker shade for hover states */
    --ava-primary-light: rgba(46, 94, 62, 0.1);   /* Very light for backgrounds */
    --ava-primary-border: rgba(46, 94, 62, 0.2);  /* Light for borders */
    --ava-primary-shadow: rgba(46, 94, 62, 0.3);  /* For shadows */
    
    /* === TYPOGRAPHY === */
    --ava-font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Arial', sans-serif;
    --ava-font-family-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
    
    /* Font Sizes (18px minimum for accessibility) */
    --ava-font-size-xs: 14px;      /* Only for labels/hints */
    --ava-font-size-sm: 16px;      /* Small text */
    --ava-font-size-base: 18px;    /* Base/Body text (MINIMUM) */
    --ava-font-size-md: 20px;      /* Medium text */
    --ava-font-size-lg: 24px;      /* Large text */
    --ava-font-size-xl: 28px;      /* Extra large */
    --ava-font-size-2xl: 32px;     /* Headers */
    --ava-font-size-3xl: 40px;     /* Large headers */
    --ava-font-size-4xl: 48px;     /* Hero text */
    
    /* Font Weights */
    --ava-font-weight-light: 300;
    --ava-font-weight-normal: 400;
    --ava-font-weight-medium: 500;
    --ava-font-weight-semibold: 600;
    --ava-font-weight-bold: 700;
    
    /* Line Heights */
    --ava-line-height-tight: 1.2;
    --ava-line-height-normal: 1.5;
    --ava-line-height-relaxed: 1.6;
    --ava-line-height-loose: 1.8;
    
    /* === SPACING SYSTEM === */
    --ava-space-0: 0;
    --ava-space-1: 4px;
    --ava-space-2: 8px;
    --ava-space-3: 12px;
    --ava-space-4: 16px;
    --ava-space-5: 20px;
    --ava-space-6: 24px;
    --ava-space-7: 28px;
    --ava-space-8: 32px;
    --ava-space-9: 36px;
    --ava-space-10: 40px;
    --ava-space-12: 48px;
    --ava-space-16: 64px;
    --ava-space-20: 80px;
    --ava-space-24: 96px;
    
    /* === BORDER RADIUS (All Rounded) === */
    --ava-radius-sm: 6px;       /* Small elements */
    --ava-radius-md: 8px;       /* Default radius */
    --ava-radius-lg: 12px;      /* Buttons, inputs */
    --ava-radius-xl: 16px;      /* Cards */
    --ava-radius-2xl: 20px;     /* Large cards */
    --ava-radius-3xl: 24px;     /* Modals, major containers */
    --ava-radius-full: 9999px;  /* Pills, circles */
    
    /* === SHADOWS === */
    --ava-shadow-xs: 0 1px 2px rgba(74, 86, 50, 0.05);
    --ava-shadow-sm: 0 2px 4px rgba(74, 86, 50, 0.1);
    --ava-shadow-md: 0 4px 8px rgba(74, 86, 50, 0.15);
    --ava-shadow-lg: 0 8px 16px rgba(74, 86, 50, 0.2);
    --ava-shadow-xl: 0 12px 24px rgba(74, 86, 50, 0.25);
    --ava-shadow-2xl: 0 20px 40px rgba(74, 86, 50, 0.3);
    --ava-shadow-inner: inset 0 2px 4px rgba(74, 86, 50, 0.1);
    
    /* === TRANSITIONS === */
    --ava-transition-fast: 150ms ease;
    --ava-transition-base: 200ms ease;
    --ava-transition-slow: 300ms ease;
    --ava-transition-slower: 500ms ease;
    
    /* === Z-INDEX LAYERS === */
    --ava-z-base: 0;
    --ava-z-dropdown: 100;
    --ava-z-sticky: 200;
    --ava-z-fixed: 300;
    --ava-z-modal-backdrop: 400;
    --ava-z-modal: 500;
    --ava-z-popover: 600;
    --ava-z-tooltip: 700;
    --ava-z-notification: 800;
}

/* ========================================
   2. RESET & BASE STYLES
   ======================================== */

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

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--ava-font-family);
    font-size: var(--ava-font-size-base);
    font-weight: var(--ava-font-weight-normal);
    line-height: var(--ava-line-height-relaxed);
    color: var(--ava-primary);
    background-color: var(--ava-white);
    min-height: 100vh;
}

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

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

h1 { 
    font-size: var(--ava-font-size-3xl);
    margin-bottom: var(--ava-space-6);
}

h2 { 
    font-size: var(--ava-font-size-2xl);
    margin-bottom: var(--ava-space-5);
}

h3 { 
    font-size: var(--ava-font-size-xl);
    margin-bottom: var(--ava-space-4);
}

h4 { 
    font-size: var(--ava-font-size-lg);
    font-weight: var(--ava-font-weight-semibold);
}

h5 { 
    font-size: var(--ava-font-size-md);
    font-weight: var(--ava-font-weight-semibold);
}

h6 { 
    font-size: var(--ava-font-size-base);
    font-weight: var(--ava-font-weight-semibold);
}

p {
    margin-bottom: var(--ava-space-4);
    color: var(--ava-primary);
}

a {
    color: var(--ava-primary);
    text-decoration: none;
    transition: opacity var(--ava-transition-base);
}

a:hover {
    opacity: 0.8;
    text-decoration: underline;
}

strong, b {
    font-weight: var(--ava-font-weight-bold);
}

em, i {
    font-style: italic;
}

small {
    font-size: var(--ava-font-size-sm);
}

/* ========================================
   4. UNIFIED BUTTON SYSTEM
   All buttons: White with Olive Outline
   ======================================== */

/* Base button style - ALL buttons inherit this */
.btn,
button,
[type="button"],
[type="submit"],
[type="reset"],
.add-field-btn,
.chat-send-btn,
.logout-btn,
.tasks-btn,
.report-btn,
.export-btn,
.filter-btn,
.multi-select-button,
.track-btn,
.pwa-install-btn,
.task-action-btn,
.btn-small {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 16px !important;
    min-height: 32px !important;
    height: 32px !important;
    font-family: var(--ava-font-family) !important;
    font-size: var(--ava-font-size-base) !important;
    font-weight: var(--ava-font-weight-medium) !important;
    line-height: 1 !important;
    
    /* White with olive outline design */
    color: var(--ava-primary) !important;
    background-color: var(--ava-white) !important;
    border: 2px solid var(--ava-primary) !important;
    
    border-radius: var(--ava-radius-lg) !important;
    cursor: pointer !important;
    white-space: nowrap;
    text-decoration: none !important;
    transition: all var(--ava-transition-base) !important;
    user-select: none;
    box-shadow: 0 2px 4px rgba(74, 86, 50, 0.1) !important;
    gap: 8px;
}

/* Hover state - Filled with olive */
.btn:hover,
button:hover,
.add-field-btn:hover,
.chat-send-btn:hover:not(:disabled),
.logout-btn:hover,
.tasks-btn:hover,
.report-btn:hover,
.export-btn:hover,
.filter-btn:hover,
.multi-select-button:hover,
.track-btn:hover,
.pwa-install-btn:hover,
.task-action-btn:hover,
.btn-small:hover {
    background-color: var(--ava-primary) !important;
    color: var(--ava-white) !important;
    border-color: var(--ava-primary) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(74, 86, 50, 0.2) !important;
}

/* Active state */
.btn:active,
button:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(74, 86, 50, 0.1) !important;
}

/* Primary Button - Same as base (white with olive outline) */
.btn-primary,
button.primary,
.field-modal-btn-primary {
    /* Inherits from base button style */
}

.btn-primary:hover,
button.primary:hover,
.field-modal-btn-primary:hover {
    /* Inherits from base hover style */
}

/* Secondary/Cancel Button - Same as primary (white with olive) */
.btn-secondary,
.btn-outline,
button.secondary,
.field-modal-btn-cancel,
.field-modal-btn-secondary {
    /* Inherits from base button style */
}

.btn-secondary:hover,
.btn-outline:hover,
.field-modal-btn-cancel:hover,
.field-modal-btn-secondary:hover {
    /* Inherits from base hover style */
}

/* Button Sizes */
.btn-sm,
.btn-small,
.filter-btn {
    padding: var(--ava-space-2) var(--ava-space-4) !important;
    font-size: var(--ava-font-size-sm) !important;
    min-height: 36px !important;
}

.btn-lg {
    padding: var(--ava-space-4) var(--ava-space-8) !important;
    font-size: var(--ava-font-size-md) !important;
    min-height: 52px !important;
}

.btn-full {
    width: 100% !important;
}

/* Special button adjustments */
.chat-send-btn {
    border-radius: 8px !important;
    width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    line-height: 1 !important;
}

.logout-btn {
    border-radius: 20px !important;
    padding: 6px 16px !important;
    min-height: 28px !important;
    height: 28px !important;
}

.track-btn {
    border-radius: 50% !important;
    width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 !important;
}

/* Button States */
.btn:disabled,
button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn:disabled:hover,
button:disabled:hover {
    background-color: var(--ava-white);
    color: var(--ava-primary);
    transform: none;
}

/* ========================================
   5. UNIFIED DROPDOWN SYSTEM
   All dropdowns: White with Olive Outline
   ======================================== */

/* Native Select Elements */
select,
.form-select,
.field-form-select,
.dropdown,
.custom-select {
    display: block !important;
    width: 100% !important;
    padding: var(--ava-space-3) var(--ava-space-4) !important;
    font-family: var(--ava-font-family) !important;
    font-size: var(--ava-font-size-base) !important;
    font-weight: var(--ava-font-weight-normal) !important;
    line-height: 1.5 !important;
    color: var(--ava-primary) !important;
    background-color: var(--ava-white) !important;
    /* Triangle arrow pointing down at end of text */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='%234A5632'%3E%3Cpath d='M6 9L1 3h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right var(--ava-space-3) center !important;
    background-size: 12px 12px !important;
    padding-right: var(--ava-space-10) !important; /* Space for triangle arrow */
    border: 2px solid var(--ava-primary) !important;
    border-radius: var(--ava-radius-lg) !important;
    box-shadow: 0 2px 4px rgba(74, 86, 50, 0.1) !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    cursor: pointer !important;
    transition: all var(--ava-transition-base) !important;
}

select:hover,
.form-select:hover,
.field-form-select:hover,
.dropdown:hover,
.custom-select:hover {
    border-color: var(--ava-primary-hover) !important;
    box-shadow: 0 4px 8px rgba(74, 86, 50, 0.15) !important;
}

select:focus,
.form-select:focus,
.field-form-select:focus,
.dropdown:focus,
.custom-select:focus {
    outline: none !important;
    border-color: var(--ava-primary) !important;
    box-shadow: 0 0 0 3px rgba(74, 86, 50, 0.1) !important;
}

/* Option styles - Non-bold text in dropdown */
option {
    padding: var(--ava-space-2) !important;
    color: var(--ava-primary) !important;
    background: var(--ava-white) !important;
    font-weight: var(--ava-font-weight-normal) !important; /* Non-bold dropdown items */
}

/* Custom Multi-Select Dropdown Container */
.multi-select-container {
    position: relative !important;
    display: inline-block !important;
    min-width: 160px !important;
    z-index: auto !important;
}

.multi-select-button {
    /* Dropdown button with triangle arrow */
    text-align: left !important;
    padding-right: var(--ava-space-10) !important;
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* Style the dropdown arrow */
.dropdown-arrow,
.multi-select-button .dropdown-arrow {
    float: right !important;
    color: var(--ava-primary) !important;
    font-size: 12px !important;
    line-height: 1 !important;
    margin-left: auto !important;
}

/* Remove CSS triangle - using the HTML arrow span instead */

.multi-select-dropdown,
.filter-dropdown,
.dropdown-menu {
    position: absolute !important;
    top: calc(100% + 4px) !important;
    left: 0 !important;
    min-width: 100% !important;
    width: max-content !important;
    max-width: 300px !important;
    margin-top: 0 !important;
    background: var(--ava-white) !important;
    border: 2px solid var(--ava-primary) !important;
    border-radius: var(--ava-radius-lg) !important;
    box-shadow: 0 8px 24px rgba(74, 86, 50, 0.25) !important;
    max-height: 400px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 9999 !important; /* High z-index to overlay everything */
    display: none;
}

.multi-select-dropdown.show,
.filter-dropdown.show,
.dropdown-menu.show {
    display: block !important;
}

/* Override display when JavaScript shows the dropdown */
.multi-select-dropdown[style*="display: block"],
.multi-select-dropdown[style*="display: flex"],
.filter-dropdown[style*="display: block"],
.dropdown-menu[style*="display: block"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Dropdown items - Non-bold text with better visibility */
.dropdown-item,
.multi-select-dropdown label,
.filter-dropdown-item {
    display: flex !important;
    align-items: center !important;
    padding: var(--ava-space-3) var(--ava-space-4) !important;
    color: var(--ava-primary) !important;
    background: var(--ava-white) !important;
    cursor: pointer !important;
    transition: background var(--ava-transition-base) !important;
    border-radius: 0 !important;
    font-weight: var(--ava-font-weight-normal) !important;
    white-space: nowrap !important;
    min-height: 36px !important;
}

/* Dropdown options container - Clean scrollable area */
#field-filter-options,
#crop-filter-options,
#variety-filter-options {
    padding: var(--ava-space-2) !important;
    max-height: 300px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: var(--ava-white) !important;
}

.dropdown-item:hover,
.multi-select-dropdown label:hover,
.filter-dropdown-item:hover {
    background: var(--ava-primary-light) !important;
}

.dropdown-item.active,
.multi-select-dropdown label.active,
.filter-dropdown-item.active {
    background: var(--ava-primary) !important;
    color: var(--ava-white) !important;
}

/* Dropdown header - Clean white design */
.dropdown-header,
.multi-select-dropdown-header {
    padding: var(--ava-space-3) var(--ava-space-4) !important;
    background: var(--ava-white) !important;
    border-bottom: 1px solid var(--ava-primary-border) !important;
    font-weight: var(--ava-font-weight-medium) !important;
    color: var(--ava-primary) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1 !important;
}

/* Checkbox in dropdown - Better visibility */
.multi-select-dropdown input[type="checkbox"] {
    margin-right: var(--ava-space-2) !important;
    cursor: pointer !important;
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
}

/* Sorting buttons in dropdowns (A-Z, Z-A) */
.dropdown-sort-buttons {
    display: flex !important;
    gap: var(--ava-space-2) !important;
    padding: var(--ava-space-2) var(--ava-space-4) !important;
    background: var(--ava-primary-light) !important;
    border-bottom: 1px solid var(--ava-primary-border) !important;
}

.sort-btn {
    padding: var(--ava-space-1) var(--ava-space-2) !important;
    font-size: var(--ava-font-size-sm) !important;
    background: var(--ava-white) !important;
    color: var(--ava-primary) !important;
    border: 1px solid var(--ava-primary) !important;
    border-radius: var(--ava-radius-sm) !important;
    cursor: pointer !important;
    transition: all var(--ava-transition-base) !important;
}

.sort-btn:hover {
    background: var(--ava-primary) !important;
    color: var(--ava-white) !important;
}

.sort-btn.active {
    background: var(--ava-primary) !important;
    color: var(--ava-white) !important;
}

/* Field form inputs and selects - Consistent with field table */
.field-form-select,
.field-form-input select {
    /* Triangle arrow for consistency */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='%234A5632'%3E%3Cpath d='M6 9L1 3h10z'/%3E%3C/svg%3E") !important;
    padding-right: var(--ava-space-10) !important;
}

/* Small select */
select.select-sm,
.form-select-sm {
    padding: var(--ava-space-2) var(--ava-space-10) var(--ava-space-2) var(--ava-space-3) !important;
    font-size: var(--ava-font-size-sm) !important;
    min-height: 36px !important;
}

/* Large select */
select.select-lg,
.form-select-lg {
    padding: var(--ava-space-4) var(--ava-space-5) !important;
    font-size: var(--ava-font-size-md) !important;
    min-height: 52px !important;
}

/* Disabled state */
select:disabled,
.form-select:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    background-color: var(--ava-primary-light) !important;
}

/* ========================================
   6. FORMS & INPUTS (All Rounded)
   ======================================== */

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

label {
    display: block;
    margin-bottom: var(--ava-space-2);
    font-weight: var(--ava-font-weight-medium);
    color: var(--ava-primary);
    font-size: var(--ava-font-size-base);
}

input,
textarea,
select {
    width: 100%;
    padding: var(--ava-space-3) var(--ava-space-4);
    font-family: var(--ava-font-family);
    font-size: var(--ava-font-size-base);
    line-height: 1.5;
    color: var(--ava-primary);
    background-color: var(--ava-white);
    border: 2px solid var(--ava-primary-border);
    border-radius: var(--ava-radius-lg);
    transition: all var(--ava-transition-base);
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--ava-primary);
    box-shadow: 0 0 0 3px var(--ava-primary-light);
}

input::placeholder,
textarea::placeholder {
    color: var(--ava-primary);
    opacity: 0.5;
}

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

select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A5632' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right var(--ava-space-3) center;
    background-size: 20px;
    padding-right: var(--ava-space-10);
}

/* Checkboxes and Radio Buttons (Rounded) */
input[type="checkbox"],
input[type="radio"] {
    width: 20px;
    height: 20px;
    margin-right: var(--ava-space-2);
    vertical-align: middle;
    cursor: pointer;
}

input[type="checkbox"] {
    border-radius: var(--ava-radius-sm);
}

input[type="radio"] {
    border-radius: var(--ava-radius-full);
}

/* ========================================
   6. CARDS & CONTAINERS (All Rounded)
   ======================================== */

.card {
    background-color: var(--ava-white);
    border: 2px solid var(--ava-primary);
    border-radius: var(--ava-radius-xl);
    padding: var(--ava-space-6);
    margin-bottom: var(--ava-space-5);
    transition: all var(--ava-transition-base);
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: var(--ava-shadow-lg);
}

.card-header {
    padding-bottom: var(--ava-space-4);
    margin-bottom: var(--ava-space-4);
    border-bottom: 2px solid var(--ava-primary-border);
}

.card-body {
    padding: var(--ava-space-4) 0;
}

.card-footer {
    padding-top: var(--ava-space-4);
    margin-top: var(--ava-space-4);
    border-top: 2px solid var(--ava-primary-border);
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--ava-space-5);
}

/* ========================================
   7. NAVIGATION & MENUS (All Rounded)
   ======================================== */

.navbar,
nav {
    background-color: var(--ava-primary);
    color: var(--ava-white);
    padding: var(--ava-space-4) 0;
    border-radius: 0 0 var(--ava-radius-xl) var(--ava-radius-xl);
}

.navbar a,
nav a {
    color: var(--ava-white);
    padding: var(--ava-space-2) var(--ava-space-4);
    border-radius: var(--ava-radius-md);
    transition: background-color var(--ava-transition-base);
}

.navbar a:hover,
nav a:hover {
    background-color: var(--ava-primary-hover);
    text-decoration: none;
}

/* Dropdown Menus (Rounded) */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: var(--ava-z-dropdown);
    display: none;
    min-width: 200px;
    padding: var(--ava-space-2);
    background-color: var(--ava-white);
    border: 2px solid var(--ava-primary);
    border-radius: var(--ava-radius-lg);
    box-shadow: var(--ava-shadow-lg);
    margin-top: var(--ava-space-1);
}

.dropdown.open .dropdown-menu,
.dropdown:hover .dropdown-menu {
    display: block;
}

.dropdown-item {
    display: block;
    padding: var(--ava-space-2) var(--ava-space-3);
    color: var(--ava-primary);
    border-radius: var(--ava-radius-md);
    transition: background-color var(--ava-transition-base);
}

.dropdown-item:hover {
    background-color: var(--ava-primary-light);
    text-decoration: none;
}

/* ========================================
   8. TABLES (Rounded Corners)
   ======================================== */

table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background-color: var(--ava-white);
    border: 2px solid var(--ava-primary);
    border-radius: var(--ava-radius-lg);
    overflow: hidden;
}

thead {
    background-color: var(--ava-primary);
    color: var(--ava-white);
}

th, td {
    padding: var(--ava-space-3) var(--ava-space-4);
    text-align: left;
    border-bottom: 1px solid var(--ava-primary-border);
}

th {
    font-weight: var(--ava-font-weight-semibold);
    border-bottom: 2px solid var(--ava-primary-hover);
}

tbody tr:hover {
    background-color: var(--ava-primary-light);
}

tbody tr:last-child td {
    border-bottom: none;
}

/* ========================================
   9. MODALS & OVERLAYS (All Rounded)
   ======================================== */

.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(74, 86, 50, 0.5);
    z-index: var(--ava-z-modal-backdrop);
    display: none;
}

.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--ava-white);
    border: 2px solid var(--ava-primary);
    border-radius: var(--ava-radius-2xl);
    padding: var(--ava-space-8);
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    z-index: var(--ava-z-modal);
    display: none;
    box-shadow: var(--ava-shadow-2xl);
}

.modal.open,
.modal-backdrop.open {
    display: block;
}

.modal-header {
    padding-bottom: var(--ava-space-4);
    margin-bottom: var(--ava-space-4);
    border-bottom: 2px solid var(--ava-primary-border);
}

.modal-footer {
    padding-top: var(--ava-space-4);
    margin-top: var(--ava-space-4);
    border-top: 2px solid var(--ava-primary-border);
    display: flex;
    justify-content: flex-end;
    gap: var(--ava-space-3);
}

/* ========================================
   10. ALERTS & NOTIFICATIONS (All Rounded)
   ======================================== */

.alert {
    padding: var(--ava-space-4);
    margin-bottom: var(--ava-space-4);
    border: 2px solid var(--ava-primary);
    border-radius: var(--ava-radius-lg);
    background-color: var(--ava-primary-light);
    color: var(--ava-primary);
}

.notification,
.toast {
    position: fixed;
    top: var(--ava-space-5);
    right: var(--ava-space-5);
    padding: var(--ava-space-4);
    background-color: var(--ava-primary);
    color: var(--ava-white);
    border-radius: var(--ava-radius-lg);
    box-shadow: var(--ava-shadow-xl);
    z-index: var(--ava-z-notification);
    max-width: 400px;
}

/* ========================================
   11. UTILITY CLASSES
   ======================================== */

/* Text Colors */
.text-primary { color: var(--ava-primary) !important; }
.text-white { color: var(--ava-white) !important; }

/* Background Colors */
.bg-primary { background-color: var(--ava-primary) !important; }
.bg-white { background-color: var(--ava-white) !important; }
.bg-light { background-color: var(--ava-primary-light) !important; }

/* Borders */
.border { border: 2px solid var(--ava-primary-border) !important; }
.border-primary { border-color: var(--ava-primary) !important; }

/* Border Radius */
.rounded { border-radius: var(--ava-radius-md) !important; }
.rounded-lg { border-radius: var(--ava-radius-lg) !important; }
.rounded-xl { border-radius: var(--ava-radius-xl) !important; }
.rounded-full { border-radius: var(--ava-radius-full) !important; }

/* Spacing */
.m-0 { margin: 0 !important; }
.p-0 { padding: 0 !important; }
.m-1 { margin: var(--ava-space-1) !important; }
.p-1 { padding: var(--ava-space-1) !important; }
.m-2 { margin: var(--ava-space-2) !important; }
.p-2 { padding: var(--ava-space-2) !important; }
.m-3 { margin: var(--ava-space-3) !important; }
.p-3 { padding: var(--ava-space-3) !important; }
.m-4 { margin: var(--ava-space-4) !important; }
.p-4 { padding: var(--ava-space-4) !important; }
.m-5 { margin: var(--ava-space-5) !important; }
.p-5 { padding: var(--ava-space-5) !important; }

/* Display */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }

/* Text Alignment */
.text-center { text-align: center !important; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }

/* Width */
.w-100 { width: 100% !important; }

/* ========================================
   12. RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
    h1 { font-size: var(--ava-font-size-2xl); }
    h2 { font-size: var(--ava-font-size-xl); }
    h3 { font-size: var(--ava-font-size-lg); }
    
    .container {
        padding: 0 var(--ava-space-3);
    }
    
    .card {
        padding: var(--ava-space-4);
    }
}

/* ========================================
   13. FIELD INFO SECTION - CENTRALIZED DESIGN
   ======================================== */

/* Field Information Modal Styles */
.field-info {
    color: var(--ava-primary) !important;
    font-size: 0.9rem !important;
}

.field-info-item {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
}

/* Info Section Containers - Unified Design */
.info-section,
.info-section-basic {
    background: var(--ava-primary-light) !important;
    padding: var(--ava-space-4) !important;
    border-radius: var(--ava-radius-lg) !important;
    margin-bottom: var(--ava-space-5) !important;
    border: 2px solid var(--ava-primary) !important;
}

.info-section-crop {
    background: #fff3e0 !important;
    padding: var(--ava-space-4) !important;
    border-radius: var(--ava-radius-lg) !important;
    margin-bottom: var(--ava-space-5) !important;
    border: 2px solid var(--ava-primary) !important;
}

.info-section-location {
    background: #f0f7ff !important;
    padding: var(--ava-space-4) !important;
    border-radius: var(--ava-radius-lg) !important;
    border: 2px solid var(--ava-primary) !important;
}

.info-section-history {
    background: #e8f5e9 !important;
    padding: var(--ava-space-4) !important;
    border-radius: var(--ava-radius-lg) !important;
    margin-bottom: var(--ava-space-5) !important;
    border: 2px solid var(--ava-primary) !important;
}

.info-section-activity {
    background: #e3f2fd !important;
    padding: var(--ava-space-4) !important;
    border-radius: var(--ava-radius-lg) !important;
    border: 2px solid var(--ava-primary) !important;
}

/* Info Row Layout */
.info-row {
    display: flex !important;
    align-items: center !important;
    margin-bottom: var(--ava-space-3) !important;
    gap: var(--ava-space-3) !important;
}

.info-row label {
    min-width: 120px !important;
    color: var(--ava-primary) !important;
    font-weight: var(--ava-font-weight-medium) !important;
}

/* Info Section Headers */
.info-section h3,
.info-section-crop h3,
.info-section-location h3,
.info-section-history h3,
.info-section-activity h3 {
    margin-top: 0 !important;
    color: var(--ava-primary) !important;
    font-size: var(--ava-font-size-lg) !important;
    margin-bottom: var(--ava-space-3) !important;
    font-weight: var(--ava-font-weight-semibold) !important;
}

/* Info Lists */
.info-list,
#crop-history-list,
#activity-history-list {
    max-height: 250px !important;
    overflow-y: auto !important;
    border: 2px solid var(--ava-primary-border) !important;
    border-radius: var(--ava-radius-md) !important;
    background: var(--ava-white) !important;
    min-height: 80px !important;
    padding: var(--ava-space-2) !important;
}

/* Info Add Buttons - Unified Design */
.info-btn-add,
button[onclick*="addCropHistory"],
button[onclick*="addActivityManually"] {
    margin-top: var(--ava-space-3) !important;
    padding: var(--ava-space-2) var(--ava-space-4) !important;
    background: var(--ava-white) !important;
    color: var(--ava-primary) !important;
    border: 2px solid var(--ava-primary) !important;
    border-radius: var(--ava-radius-md) !important;
    cursor: pointer !important;
    font-weight: var(--ava-font-weight-medium) !important;
    transition: all var(--ava-transition-base) !important;
}

.info-btn-add:hover,
button[onclick*="addCropHistory"]:hover,
button[onclick*="addActivityManually"]:hover {
    background: var(--ava-primary) !important;
    color: var(--ava-white) !important;
}

/* Info Button in Fields Table - Unified Design */
.btn-info,
button[onclick*="openFieldInfoModal"] {
    background: var(--ava-white) !important;
    color: var(--ava-primary) !important;
    border: 2px solid var(--ava-primary) !important;
    padding: var(--ava-space-2) var(--ava-space-3) !important;
    border-radius: var(--ava-radius-md) !important;
    cursor: pointer !important;
    font-size: var(--ava-font-size-sm) !important;
    font-weight: var(--ava-font-weight-medium) !important;
    transition: all var(--ava-transition-base) !important;
}

.btn-info:hover,
button[onclick*="openFieldInfoModal"]:hover {
    background: var(--ava-primary) !important;
    color: var(--ava-white) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(74, 86, 50, 0.2) !important;
}

/* Edit Field Boundaries Button */
button[onclick*="openFieldBoundaryEditor"] {
    padding: var(--ava-space-2) var(--ava-space-4) !important;
    font-size: 14px !important;
    width: 100% !important;
    margin-bottom: var(--ava-space-3) !important;
    background: var(--ava-white) !important;
    color: var(--ava-primary) !important;
    border: 2px solid var(--ava-primary) !important;
    border-radius: var(--ava-radius-md) !important;
    cursor: pointer !important;
    transition: all var(--ava-transition-base) !important;
}

button[onclick*="openFieldBoundaryEditor"]:hover {
    background: var(--ava-primary) !important;
    color: var(--ava-white) !important;
}

/* Save All Changes Button */
button[onclick*="saveAllFieldChanges"] {
    padding: var(--ava-space-3) var(--ava-space-6) !important;
    background: var(--ava-white) !important;
    color: var(--ava-primary) !important;
    border: 2px solid var(--ava-primary) !important;
    border-radius: var(--ava-radius-md) !important;
    cursor: pointer !important;
    font-size: 16px !important;
    font-weight: var(--ava-font-weight-bold) !important;
    transition: all var(--ava-transition-base) !important;
}

button[onclick*="saveAllFieldChanges"]:hover {
    background: var(--ava-primary) !important;
    color: var(--ava-white) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 12px rgba(74, 86, 50, 0.25) !important;
}

/* Field Preview Map */
#field-preview-map {
    width: 100% !important;
    height: 280px !important;
    border: 2px solid var(--ava-primary-border) !important;
    border-radius: var(--ava-radius-lg) !important;
    background: var(--ava-white) !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Activity Filter Elements */
#activity-filter {
    padding: var(--ava-space-2) !important;
    border-radius: var(--ava-radius-md) !important;
    border: 2px solid var(--ava-primary) !important;
    background: var(--ava-white) !important;
    color: var(--ava-primary) !important;
    cursor: pointer !important;
}

#activity-search {
    flex: 1 !important;
    padding: var(--ava-space-2) !important;
    border-radius: var(--ava-radius-md) !important;
    border: 2px solid var(--ava-primary) !important;
    background: var(--ava-white) !important;
    color: var(--ava-primary) !important;
}

/* ========================================
   14. CUSTOM ELEMENTS TO ADD LATER
   ======================================== */

/* 
   TO ADD NEW DESIGN ELEMENTS:
   1. Add the new element section below
   2. Follow the existing naming convention
   3. Ensure all elements are rounded
   4. Use only the two colors defined
   5. Test across all breakpoints
   
   Example for adding date picker:
   
   .datepicker {
       background-color: var(--ava-white);
       border: 2px solid var(--ava-primary);
       border-radius: var(--ava-radius-lg);
       // ... rest of styles
   }
*/

/* ========================================
   15. MAP TAB FIXES - DROPDOWN OVERLAYS
   ======================================== */

/* Prevent panel header from expanding */
.panel-header {
    position: relative !important;
    z-index: 10 !important;
    overflow: visible !important; /* Allow dropdowns to overflow */
    min-height: auto !important;
    flex-shrink: 0 !important;
}

/* Map container should not move when dropdown opens */
#fieldsMapContainer,
.map-container {
    position: relative !important;
    z-index: 1 !important;
}

/* Ensure dropdowns in map tab overlay properly */
#map-content .multi-select-dropdown {
    position: absolute !important;
    background: var(--ava-white) !important;
    border: 2px solid var(--ava-primary) !important;
    border-radius: var(--ava-radius-lg) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
}

/* ========================================
   16. TAB NAVIGATION - FULL WIDTH TABS
   ======================================== */

/* Tab Navigation Container */
.tab-navigation {
    background: transparent !important; /* Transparent to avoid white bar */
    padding: 0 8px !important;
    display: flex !important;
    gap: 0 !important; /* Remove gaps between tabs */
    height: 45px !important;
    align-items: flex-end !important; /* Align tabs to bottom */
    width: 100% !important;
    margin-top: 10px !important; /* Add space ABOVE tabs */
    margin-bottom: -2px !important; /* Slight overlap with content */
    position: relative !important;
    z-index: 15 !important; /* Ensure tabs are above content */
}

/* Tab Buttons - Paper folder style with always visible rounded corners */
.tab-btn {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 2px solid var(--ava-primary) !important;
    border-bottom: 2px solid #ffffff !important; /* White bottom to cover the gap */
    color: var(--ava-primary) !important;
    margin-bottom: 0 !important; /* No margin needed */
    opacity: 1 !important;
    padding: 10px 16px !important;
    cursor: pointer !important;
    font-size: 14px !important;
    position: relative !important;
    z-index: 16 !important; /* Above the navigation container */
    font-weight: 600 !important;
    border-radius: 12px 12px 0 0 !important;
    transition: all 0.3s ease !important;
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    height: 36px !important;
    margin-bottom: -2px !important;
    position: relative !important;
}

/* Force white background for inactive tabs */
.tab-btn:not(.active) {
    background: #ffffff !important;
    background-color: #ffffff !important;
}

/* All tabs always have rounded top corners - enforced for each tab */
.tab-btn,
.tab-btn:first-child,
.tab-btn:last-child,
#weather-tab,
#fields-tab,
#map-tab,
#materials-tab,
#reports-tab {
    border-radius: 12px 12px 0 0 !important;
    border-top-left-radius: 12px !important;
    border-top-right-radius: 12px !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.tab-btn:hover:not(.active) {
    background: #f0f0f0 !important;
    color: var(--ava-primary) !important;
    border-radius: 12px 12px 0 0 !important;
}

.tab-btn.active,
.tab-btn.active:hover,
.tab-btn.active:focus,
#weather-tab.active,
#fields-tab.active,
#map-tab.active,
#materials-tab.active,
#reports-tab.active {
    background: #2E5E3E !important;
    background-color: #2E5E3E !important;
    color: #ffffff !important;
    border: 2px solid #2E5E3E !important;
    border-bottom: 2px solid #2E5E3E !important; /* Green bottom to connect with header */
    padding-bottom: 12px !important; /* Extend padding */
    border-radius: 12px 12px 0 0 !important;
    position: relative !important;
    z-index: 20 !important;
    margin-bottom: 0 !important; /* No margin */
}

/* Remove the ::before pseudo-element that might interfere with corners */
.tab-btn.active::before {
    display: none !important;
}

/* Content display container for all tabs */
.content-display {
    margin-top: 0 !important;
    position: relative !important;
    z-index: 10 !important;
    overflow: hidden !important;
    contain: layout !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

/* .tab-content styles removed - using inline CSS from HTML */

/* Tab header - removed duplicate, see main rule below */

/* Ensure active tab connects seamlessly with header */
.tab-btn.active {
    z-index: 20 !important; /* Higher than header to overlap properly */
}

/* Reports tab - uses same structure as other tabs */

/* Ensure content-display properly contains tabs - merged with rule above */

/* Ensure right-container doesn't let content escape */
.right-container {
    position: relative !important;
    overflow: hidden !important;
    z-index: 1 !important;
}

/* Tab headers - minimal override, most styles from HTML */
.tab-header {
    background: var(--ava-primary) !important;
    color: white !important;
}

/* Tab content areas use inline styles from HTML - no override needed */

/* Content area after header - applies to all tabs */
.tab-header + div {
    flex: 1 !important;
    overflow-y: auto !important;
    /* Padding handled by inline styles in HTML */
}

/* Reports tab now uses same structure as other tabs - no special CSS needed */

/* ========================================
   END OF UNIFIED DESIGN SYSTEM
   ======================================== */