/* TH Sarabun Font */
@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;500;600;700&display=swap');

* {
    font-family: 'Sarabun', sans-serif;
}

html {
    min-height: 100%;
    background-color: #f0fdf4; /* bg-green-50 */
}

body {
    font-family: 'Sarabun', sans-serif;
    min-height: 100vh;
    background-color: #f0fdf4; /* bg-green-50 */
}

/* Form Styles */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="number"],
input[type="password"],
textarea,
select {
    padding: 0.625rem 0.875rem;
    font-size: 1rem;
    line-height: 1.5;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    transition: all 0.15s ease-in-out;
    background-color: white;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: #16a34a;
    ring: 2px;
    ring-color: rgba(22, 163, 74, 0.5);
}

label {
    font-weight: 500;
    font-size: 0.875rem;
    color: #374151;
    display: block;
    margin-bottom: 0.25rem;
}

.form-section {
    background: #f9fafb;
    padding: 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
}

.form-section-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #16a34a;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #16a34a;
}

/* Mobile Responsive */
@media (max-width: 640px) {
    body {
        font-size: 14px;
    }
    
    .form-section {
        padding: 0.75rem;
        margin-bottom: 0.75rem;
    }
    
    .form-section-title {
        font-size: 1rem;
        margin-bottom: 0.75rem;
    }
    
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="date"],
    input[type="number"],
    input[type="password"],
    textarea,
    select {
        padding: 0.625rem 0.875rem;
        font-size: 16px; /* Prevent zoom on iOS */
    }
    
    /* Mobile table */
    .mobile-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Mobile cards for table data */
    .mobile-card {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid #e5e7eb;
        border-radius: 0.5rem;
        padding: 1rem;
        background: white;
    }
    
    .mobile-card-row {
        display: flex;
        justify-content: space-between;
        padding: 0.5rem 0;
        border-bottom: 1px solid #f3f4f6;
    }
    
    .mobile-card-row:last-child {
        border-bottom: none;
    }
    
    .mobile-card-label {
        font-weight: 600;
        color: #374151;
        flex-shrink: 0;
        margin-right: 1rem;
    }
    
    .mobile-card-value {
        text-align: right;
        color: #6b7280;
    }
    
    /* Hide desktop table on mobile */
    .desktop-table {
        display: none;
    }
}

@media (min-width: 641px) {
    .mobile-card {
        display: none;
    }
    
    .desktop-table {
        display: table;
    }
}

/* Button improvements for mobile */
button, .btn {
    min-height: 44px; /* iOS touch target */
    touch-action: manipulation;
}

/* Navbar mobile */
@media (max-width: 640px) {
    .nav-mobile-menu {
        display: none;
    }
    
    .nav-mobile-menu.active {
        display: block;
    }
}