/* Mobile Field Details Optimization */

/* Large consolidated info cards for both mobile and desktop */
.field-info-card-large {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border-left: 4px solid var(--mantine-color-blue-5);
    transition: all 0.3s ease;
}

.field-info-card-large:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    transform: translateY(-2px);
}

.field-info-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--mantine-color-gray-8);
}

.field-info-card-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.field-info-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.field-info-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--mantine-color-gray-6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.field-info-value {
    font-size: 1rem;
    font-weight: 500;
    color: var(--mantine-color-gray-8);
    min-height: 1.5rem;
}

/* DAF Unit Cards Styling */
.daf-unit-card {
    background: linear-gradient(135deg, #f8fffe 0%, #f0fdf4 100%);
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid #d1fae5;
    transition: all 0.3s ease;
    cursor: pointer;
}

.daf-unit-card:hover {
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.15);
    border-color: #10b981;
    transform: translateY(-2px);
}

.daf-unit-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #d1fae5;
}

.daf-unit-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #065f46;
}

.daf-unit-code {
    font-family: 'SF Mono', Monaco, monospace;
    font-size: 0.875rem;
    font-weight: 600;
    color: #059669;
    background: rgba(16, 185, 129, 0.1);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

.daf-unit-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
}

.daf-unit-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.daf-unit-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: #065f46;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.daf-unit-value {
    font-size: 0.875rem;
    font-weight: 500;
    color: #047857;
}

/* Species Cards Styling */
.species-card {
    background: linear-gradient(135deg, #fefefe 0%, #f9fafb 100%);
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
    cursor: pointer;
}

.species-card:hover {
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.15);
    border-color: #3b82f6;
    transform: translateY(-2px);
}

.species-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e5e7eb;
}

.species-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1f2937;
}

.species-id {
    font-family: 'SF Mono', Monaco, monospace;
    font-size: 0.875rem;
    font-weight: 600;
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.1);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

.species-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
}

.species-detail-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.species-detail-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.species-detail-value {
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
}

/* Mobile-first responsive breakpoints */
@media (max-width: 768px) {
    /* Show mobile cards, hide desktop tables */
    .field-desktop-table {
        display: none !important;
    }
    
    .species-mobile-container {
        display: block !important;
    }
    
    /* Field Details Header */
    .field-header {
        padding: 1rem 0.5rem;
        text-align: center;
    }
    
    .field-header .mantine-Group-root {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .field-back-button {
        align-self: flex-start;
        margin-bottom: 0.5rem;
    }
    
    /* Field Details Tabs */
    .field-tabs {
        margin: 0 -0.5rem;
    }
    
    .mantine-Tabs-tabsList {
        flex-wrap: wrap;
        justify-content: center;
        padding: 0 0.5rem;
    }
    
    .mantine-Tabs-tab {
        flex: 1;
        min-width: 120px;
        font-size: 0.875rem;
        padding: 0.5rem 0.25rem;
    }
    
    /* Optimize info cards for mobile */
    .field-info-card-large {
        padding: 1rem;
        margin-bottom: 1rem;
    }
    
    .field-info-card-content {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    /* DAF Unit Cards mobile optimization */
    .daf-unit-details {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
    
    /* Species Cards mobile optimization */
    .species-details {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
    
    /* Search container mobile optimization */
    .field-search-container {
        margin: 0 -0.5rem 1rem;
        padding: 0.5rem;
    }
    
    .field-search-container .mantine-Group-root {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .field-search-container .mantine-Select-root,
    .field-search-container .mantine-TextInput-root {
        width: 100% !important;
    }
}

/* Desktop view */
@media (min-width: 769px) {
    /* Hide mobile cards, show desktop tables */
    .species-mobile-container {
        display: none !important;
    }
    
    .field-desktop-table {
        display: block !important;
    }
    
    /* Larger info cards for desktop */
    .field-info-card-large {
        padding: 2rem;
    }
    
    .field-info-card-content {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1.5rem;
    }
    
    /* DAF Unit Cards desktop layout */
    .daf-unit-details {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    }
    
    /* Species Cards desktop layout */
    .species-details {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    }
}
    
    .field-info-item {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }
    
    .field-info-label {
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--mantine-color-gray-6);
        text-transform: uppercase;
        letter-spacing: 0.025em;
    }
    
    .field-info-value {
        font-size: 1rem;
        font-weight: 400;
        color: var(--mantine-color-gray-8);
        word-break: break-word;
    }
    
    /* Species Cards */
    .species-mobile-container {
        display: block;
        padding: 0 0.5rem;
    }
    
    .species-card {
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        padding: 1rem;
        margin-bottom: 1rem;
        border-left: 4px solid var(--mantine-color-green-5);
    }
    
    .species-card-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 0.75rem;
    }
    
    .species-name {
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--mantine-color-gray-8);
        flex: 1;
    }
    
    .species-id {
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--mantine-color-blue-6);
        background: var(--mantine-color-blue-0);
        padding: 0.25rem 0.5rem;
        border-radius: 4px;
    }
    
    .species-details {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    
    .species-detail-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.25rem 0;
        border-bottom: 1px solid var(--mantine-color-gray-2);
    }
    
    .species-detail-item:last-child {
        border-bottom: none;
    }
    
    .species-detail-label {
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--mantine-color-gray-6);
    }
    
    .species-detail-value {
        font-size: 0.875rem;
        font-weight: 400;
        color: var(--mantine-color-gray-8);
        text-align: right;
    }
    
    /* DAF Units Mobile Cards */
    .daf-mobile-container {
        display: block;
        padding: 0 0.5rem;
    }
    
    .daf-unit-card {
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        padding: 1rem;
        margin-bottom: 1rem;
        border-left: 4px solid var(--mantine-color-orange-5);
    }
    
    .daf-unit-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 0.75rem;
    }
    
    .daf-unit-title {
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--mantine-color-gray-8);
        flex: 1;
    }
    
    .daf-unit-code {
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--mantine-color-orange-6);
        background: var(--mantine-color-orange-0);
        padding: 0.25rem 0.5rem;
        border-radius: 4px;
    }
    
    .daf-unit-details {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    
    .daf-unit-field {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.25rem 0;
        border-bottom: 1px solid var(--mantine-color-gray-2);
    }
    
    .daf-unit-field:last-child {
        border-bottom: none;
    }
    
    .daf-unit-label {
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--mantine-color-gray-6);
    }
    
    .daf-unit-value {
        font-size: 0.875rem;
        font-weight: 400;
        color: var(--mantine-color-gray-8);
        text-align: right;
    }
    
    /* Management Section */
    .management-mobile-container {
        padding: 0 0.5rem;
    }
    
    .management-card {
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        padding: 1rem;
        margin-bottom: 1rem;
        border-left: 4px solid #6c757d;
    }
    
    .management-actions {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .management-button {
        width: 100%;
        padding: 0.75rem;
        font-size: 0.875rem;
        border-radius: 6px;
        border: none;
        cursor: pointer;
        transition: all 0.2s ease;
    }
    
    .management-button-primary {
        background: var(--mantine-color-blue-5);
        color: white;
    }
    
    .management-button-secondary {
        background: var(--mantine-color-gray-1);
        color: var(--mantine-color-gray-7);
        border: 1px solid var(--mantine-color-gray-3);
    }
    
    /* Hide desktop tables */
    .field-desktop-table {
        display: none !important;
    }
    
    /* Loading and error states */
    .field-loading, .field-error {
        text-align: center;
        padding: 2rem 1rem;
    }
    
    .field-empty-state {
        text-align: center;
        padding: 3rem 1rem;
        color: var(--mantine-color-gray-5);
    }
    
    /* Search and filters */
    .field-search-container {
        padding: 0 0.5rem 1rem 0.5rem;
    }
    
    .field-search-input {
        margin-bottom: 0.75rem;
    }
    
    .field-filters {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
    
    /* Map container */
    .field-map-container {
        height: 300px;
        margin: 1rem 0.5rem;
        border-radius: 8px;
        overflow: hidden;
    }
    
    /* Status indicators */
    .field-status-active {
        color: var(--mantine-color-green-6);
        background: var(--mantine-color-green-0);
        padding: 0.25rem 0.5rem;
        border-radius: 4px;
        font-size: 0.875rem;
        font-weight: 500;
    }
    
    .field-status-inactive {
        color: var(--mantine-color-red-6);
        background: var(--mantine-color-red-0);
        padding: 0.25rem 0.5rem;
        border-radius: 4px;
        font-size: 0.875rem;
        font-weight: 500;
    }
}

/* Tablet optimization */
@media (min-width: 769px) and (max-width: 1024px) {
    .field-info-grid {
        grid-template-columns: 1fr 1fr;
    }
    
    .species-details,
    .daf-unit-details {
        grid-template-columns: 1fr 1fr;
    }
    
    .mantine-Tabs-tab {
        min-width: 140px;
    }
}

/* Desktop optimization */
@media (min-width: 1025px) {
    .species-mobile-container,
    .daf-mobile-container {
        display: none !important;
    }
    
    .field-desktop-table {
        display: block !important;
    }
}