/**
 * Form Unified Styles - Kampung Argomulyo
 * Stylesheet tunggal untuk konsistensi form di semua halaman
 * @version 2.0.0
 */

/* ===== FORM COLOR VARIABLES ===== */
:root {
    /* Text Colors - High Contrast */
    --form-label: #1e293b;
    --form-text: #1e293b;
    --form-placeholder: #94a3b8;
    --form-hint: #64748b;
    --form-error: #dc2626;
    --form-success: #059669;

    /* Background Colors */
    --form-bg: #ffffff;
    --form-bg-subtle: #f8fafc;
    --form-bg-disabled: #f1f5f9;

    /* Border Colors */
    --form-border: #e2e8f0;
    --form-border-focus: #6366f1;
    --form-border-error: #ef4444;
    --form-border-success: #10b981;

    /* Button Colors */
    --btn-primary-bg: linear-gradient(135deg, #6366f1, #7c3aed);
    --btn-primary-text: #ffffff;
    --btn-secondary-bg: #f1f5f9;
    --btn-secondary-text: #475569;
    --btn-danger-bg: linear-gradient(135deg, #ef4444, #dc2626);
    --btn-danger-text: #ffffff;
    --btn-success-bg: linear-gradient(135deg, #10b981, #059669);
    --btn-success-text: #ffffff;
}

/* ===== FORM LABELS ===== */
.form-label,
label:not(.custom-checkbox):not(.file-upload):not(.upload-box) {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--form-label) !important;
    margin-bottom: 8px;
}

.form-label .required,
.form-label.required::after {
    color: var(--form-error);
}

/* ===== FORM INPUTS ===== */
.form-control,
.form-select,
.form-input,
.form-textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="search"],
textarea,
select {
    width: 100%;
    padding: 12px 16px;
    font-size: 15px;
    font-family: inherit;
    color: var(--form-text) !important;
    background: var(--form-bg) !important;
    border: 2px solid var(--form-border);
    border-radius: 12px;
    transition: all 0.2s ease;
    outline: none;
}

/* Focus State */
.form-control:focus,
.form-select:focus,
.form-input:focus,
.form-textarea:focus,
input:focus,
textarea:focus,
select:focus {
    border-color: var(--form-border-focus) !important;
    background: var(--form-bg) !important;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}

/* Placeholder */
.form-control::placeholder,
.form-input::placeholder,
.form-textarea::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--form-placeholder) !important;
    opacity: 1 !important;
}

/* Disabled State */
.form-control:disabled,
.form-select:disabled,
input:disabled,
textarea:disabled,
select:disabled {
    background: var(--form-bg-disabled) !important;
    color: var(--form-hint) !important;
    cursor: not-allowed;
}

/* Error State */
.form-control.is-invalid,
.form-control.error,
input.error,
textarea.error {
    border-color: var(--form-border-error) !important;
    background: #fef2f2 !important;
}

/* Success State */
.form-control.is-valid,
.form-control.success,
input.success,
textarea.success {
    border-color: var(--form-border-success) !important;
    background: #f0fdf4 !important;
}

/* ===== SELECT DROPDOWN ===== */
select.form-control,
select.form-select,
.form-select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    background-color: var(--form-bg) !important;
    padding-right: 40px;
}

select option {
    color: var(--form-text);
    background: var(--form-bg);
}

/* ===== TEXTAREA ===== */
textarea.form-control,
textarea.form-textarea,
textarea {
    min-height: 100px;
    resize: vertical;
    line-height: 1.5;
}

/* ===== FORM HINT / HELPER TEXT ===== */
.form-hint,
.form-text,
.help-text,
small.text-muted {
    display: block;
    font-size: 12px;
    color: var(--form-hint) !important;
    margin-top: 6px;
}

/* ===== VALIDATION MESSAGES ===== */
.invalid-feedback,
.field-error,
.error-message {
    display: block;
    font-size: 13px;
    color: var(--form-error) !important;
    margin-top: 6px;
}

.valid-feedback,
.field-success,
.success-message {
    display: block;
    font-size: 13px;
    color: var(--form-success) !important;
    margin-top: 6px;
}

/* ===== FORM GROUP ===== */
.form-group {
    margin-bottom: 20px;
}

.form-group:last-child {
    margin-bottom: 0;
}

/* ===== BUTTONS ===== */
.btn,
button[type="submit"],
.btn-submit,
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    text-decoration: none;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    outline: none;
}

.btn-primary,
button[type="submit"]:not(.btn-secondary):not(.btn-danger):not(.btn-light) {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text) !important;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.btn-primary:hover,
button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.4);
}

.btn-secondary,
.btn-light {
    background: var(--btn-secondary-bg);
    color: var(--btn-secondary-text) !important;
}

.btn-secondary:hover,
.btn-light:hover {
    background: #e2e8f0;
}

.btn-danger {
    background: var(--btn-danger-bg);
    color: var(--btn-danger-text) !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.btn-success {
    background: var(--btn-success-bg);
    color: var(--btn-success-text) !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.btn:disabled,
button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

/* ===== FILE UPLOAD ===== */
.file-upload,
.upload-box,
.file-upload-container {
    border: 2px dashed var(--form-border);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    background: var(--form-bg-subtle);
    cursor: pointer;
    transition: all 0.2s ease;
}

.file-upload:hover,
.upload-box:hover,
.file-upload-container:hover {
    border-color: var(--form-border-focus);
    background: rgba(99, 102, 241, 0.05);
}

.file-upload i,
.upload-box i {
    color: var(--form-border-focus);
}

.file-upload p,
.upload-box p,
.file-upload-text {
    color: var(--form-hint) !important;
    font-size: 14px;
    margin: 8px 0 0 0;
}

.file-upload small,
.upload-box small,
.file-upload-hint {
    color: var(--form-placeholder) !important;
    font-size: 12px;
}

/* ===== CHECKBOX & RADIO ===== */
.form-check {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.form-check-input {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: var(--form-border-focus);
}

.form-check-label {
    font-size: 14px;
    color: var(--form-text) !important;
    cursor: pointer;
    user-select: none;
    margin: 0;
}

/* ===== MODAL FORMS ===== */
.modal-body .form-label,
.modal-body label {
    color: var(--form-label) !important;
}

.modal-body .form-control,
.modal-body input,
.modal-body textarea,
.modal-body select {
    color: var(--form-text) !important;
    background: var(--form-bg) !important;
}

/* ===== CARD FORM SECTIONS ===== */
.form-card,
.form-section,
.card-body form {
    background: var(--form-bg);
}

.form-card .form-label,
.form-section .form-label,
.card-body .form-label {
    color: var(--form-label) !important;
}

/* ===== SECTION TITLES ===== */
.section-title,
.form-section-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--form-label) !important;
    margin-bottom: 16px;
}

.section-title i {
    color: var(--form-border-focus);
}

/* ===== INFO ROWS (Settings Pages) ===== */
.info-row .info-label {
    color: var(--form-hint) !important;
}

.info-row .info-value {
    color: var(--form-label) !important;
    font-weight: 600;
}

/* ===== SETTING ITEMS ===== */
.setting-item .setting-text h4 {
    color: var(--form-label) !important;
}

.setting-item .setting-text p {
    color: var(--form-hint) !important;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {

    .form-control,
    .form-select,
    .form-input,
    input,
    textarea,
    select {
        font-size: 16px;
        /* Prevent zoom on iOS */
        padding: 14px 16px;
    }

    .btn,
    button[type="submit"] {
        padding: 14px 24px;
        font-size: 15px;
        min-height: 48px;
    }
}

/* ===== AUTOFILL FIX ===== */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill {
    -webkit-text-fill-color: var(--form-text) !important;
    -webkit-box-shadow: 0 0 0px 1000px var(--form-bg) inset !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* ===== PAGE HEADER - Gradient Style ===== */
.page-header {
    background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 24px;
    color: white;
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.3);
    position: relative;
    overflow: hidden;
}

.page-header::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -30%;
    width: 60%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 60%);
    pointer-events: none;
}

.page-header-content {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    z-index: 1;
}

.page-header-icon {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

.page-header-text h1,
.page-header-text .page-title {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 4px 0;
    color: white !important;
}

.page-header-text p,
.page-header-text .page-subtitle {
    font-size: 13px;
    margin: 0;
    opacity: 0.9;
    color: white !important;
}

/* Page header actions */
.page-header-actions {
    margin-left: auto;
    display: flex;
    gap: 8px;
}

.page-header-actions .btn {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white !important;
    padding: 10px 16px;
    font-size: 13px;
}

.page-header-actions .btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Responsive */
@media (max-width: 768px) {
    .page-header {
        padding: 20px;
        border-radius: 16px;
    }

    .page-header-content {
        flex-wrap: wrap;
    }

    .page-header-icon {
        width: 44px;
        height: 44px;
        font-size: 20px;
    }

    .page-header-text h1,
    .page-header-text .page-title {
        font-size: 18px;
    }

    .page-header-actions {
        width: 100%;
        margin-left: 0;
        margin-top: 12px;
    }
}