/* Cases Plugin - Responsive Styles */

/* ==========================================================================
   Cases List Table - Desktop (default)
   ========================================================================== */

.cases-table {
    width: 100%;
    border-collapse: collapse;
}

.cases-table thead th {
    text-align: left;
    border-bottom: 1px solid #ddd;
    padding: 6px;
}

/* Specific column widths */
.cases-table .col-case-id {
    width: 150px;
}

.cases-table .col-created-date {
    width: 150px;
}

.cases-table .col-region {
    width: 150px;
}

.cases-table .col-decision-date {
    width: 150px;
    text-align: center;
}

.cases-table tbody td {
    border-bottom: 1px solid #f0f0f0;
    padding: 6px;
}

/* Hide mobile labels on desktop */
.cases-table .mobile-label {
    display: none;
}

/* ==========================================================================
   Cases Filters Form
   ========================================================================== */

.cases-filters {
    margin-bottom: 1em;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: baseline;
}

.cases-filters label {
    margin-right: 8px;
}

.cases-filters select {
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.cases-filters button {
    padding: 8px 16px;
}

.cases-reset {
    margin-left: 8px;
    text-decoration: underline;
}

/* ==========================================================================
   Cases Form
   ========================================================================== */

.cases-form .elementor-form-fields-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.cases-form .elementor-field-group {
    margin-bottom: 12px;
}

.cases-form .elementor-field-label {
    display: block;
    margin-bottom: 4px;
    font-weight: 500;
}

.cases-form .elementor-field {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.cases-form textarea.elementor-field {
    resize: vertical;
}

/* Field error messages */
.field-error {
    color: #d32f2f;
    font-size: 0.875rem;
    margin-top: 4px;
}

.cases-form .elementor-field[aria-invalid="true"] {
    border-color: #d32f2f;
}

/* Success/Error messages */
.case.elementor-message {
    padding: 12px 16px;
    border-radius: 4px;
    margin-bottom: 16px;
}

.case.elementor-message-success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.case.elementor-message-danger {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* ==========================================================================
   Responsive Styles - Tablet (768px - 1024px)
   ========================================================================== */

@media screen and (max-width: 1024px) {
    .cases-table thead th,
    .cases-table tbody td {
        padding: 8px;
        font-size: 0.95rem;
    }
}

/* ==========================================================================
   Responsive Styles - Mobile (< 768px)
   ========================================================================== */

@media screen and (max-width: 767px) {
    
    /* Filter Form - Stack vertically */
    .cases-filters {
        flex-direction: column;
        align-items: stretch;
    }
    
    .cases-filters label {
        display: flex;
        flex-direction: column;
        margin-right: 0;
        width: 100%;
    }
    
    .cases-filters select {
        width: 100%;
        margin-top: 4px;
    }
    
    .cases-filters button {
        width: 100%;
    }
    
    .cases-reset {
        margin-left: 0;
        text-align: center;
        display: block;
        margin-top: 8px;
    }
    
    /* Table - Stack vertically as cards */
    .cases-table {
        border: 0;
    }
    
    .cases-table thead {
        display: none;
    }
    
    .cases-table tbody {
        display: block;
    }
    
    .cases-table tbody tr {
        display: block;
        margin-bottom: 20px;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 12px;
        background: #fff;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }
    
    .cases-table tbody td {
        display: block;
        text-align: left;
        border-top: none;
        padding: 10px 0;
        word-wrap: break-word;
        width: 100% !important;
    }
    
    .cases-table tbody td:last-child {
        border-bottom: 0;
    }
    
    /* Show mobile labels on mobile */
    .cases-table .mobile-label {
        display: inline-block;
        font-weight: 600;
        margin-right: 4px;
    }
    
    /* Left-align decision date column on mobile */
    .cases-table .col-decision-date {
        text-align: left;
    }
    
    /* Pagination adjustments */
    .cases-pagination ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding: 0;
        list-style: none;
    }
    
    .cases-pagination li {
        margin: 2px;
    }
    
    /* Form adjustments for mobile */
    .cases-form .elementor-form-fields-wrapper {
        gap: 8px;
    }
    
    .cases-form .elementor-field-group {
        width: 100% !important;
        flex: 0 0 100%;
    }
    
    .cases-form .elementor-col-25,
    .cases-form .elementor-col-50,
    .cases-form .elementor-col-100 {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ==========================================================================
   Responsive Styles - Small Mobile (< 480px)
   ========================================================================== */

@media screen and (max-width: 480px) {
    .cases-table tbody td {
        font-size: 0.9rem;
    }
    
    .cases-table .mobile-label {
        font-size: 0.85rem;
    }
    
    .cases-form .elementor-field {
        font-size: 16px; /* Prevents zoom on iOS */
    }
}