/**
 * Warm cream/yellow form surfaces (aligned with frontend order form).
 * Scoped to #app main from layouts.frontend — does not affect admin panel.
 */
:root {
    --form-surface: rgba(250, 245, 228, 0.97);
    --form-surface-inner: rgba(246, 240, 220, 0.94);
    --form-surface-soft: rgba(252, 248, 236, 0.92);
    --form-field: rgba(255, 250, 235, 0.98);
    --form-border: rgba(200, 165, 70, 0.28);
    --form-page-bg: linear-gradient(180deg, #ede8dc 0%, #faf5e8 40%, #f2ebdb 100%);
}

#app > main.py-4,
#app > main {
    background: var(--form-page-bg);
}

#app main .card:not(.text-white) {
    background-color: var(--form-surface);
    border-color: rgba(200, 165, 70, 0.22);
}

#app main .card-header {
    background-color: var(--form-surface-inner);
    border-bottom-color: var(--form-border);
    color: #2d2a24;
}

#app main .card-footer {
    background-color: var(--form-surface-inner);
    border-top-color: var(--form-border);
}

#app main .form-control,
#app main select.form-control,
#app main textarea.form-control {
    background-color: var(--form-field);
    border-color: rgba(200, 175, 120, 0.38);
    color: #2d2a24;
}

#app main .form-control:focus,
#app main select.form-control:focus,
#app main textarea.form-control:focus {
    background-color: var(--form-field);
    border-color: #c9a010;
    box-shadow: 0 0 0 0.2rem rgba(244, 196, 48, 0.22);
    color: #2d2a24;
}

#app main .form-control::placeholder {
    color: #7a7265;
}

#app main .input-group-text {
    background-color: var(--form-surface-inner);
    border-color: rgba(200, 175, 120, 0.35);
    color: #4a453d;
}

#app main .custom-select,
#app main .custom-file-label {
    background-color: var(--form-field);
    border-color: rgba(200, 175, 120, 0.38);
    color: #2d2a24;
}

#app main .table thead th {
    background-color: var(--form-surface-inner);
    border-color: rgba(200, 165, 70, 0.22);
    color: #2d2a24;
}

#app main .table td {
    border-color: rgba(200, 165, 70, 0.18);
}

#app main .table-bordered,
#app main .table-bordered th,
#app main .table-bordered td {
    border-color: rgba(200, 165, 70, 0.22);
}

#app main .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(252, 248, 236, 0.65);
}

#app main .table-hover tbody tr:hover {
    background-color: rgba(244, 196, 48, 0.12);
}

#app main .modal-content {
    background-color: var(--form-surface);
    border: 1px solid var(--form-border);
}

#app main .modal-header,
#app main .modal-footer {
    background-color: var(--form-surface-inner);
    border-color: rgba(200, 165, 70, 0.2);
}

#app main .list-group-item {
    background-color: var(--form-surface-soft);
    border-color: rgba(200, 165, 70, 0.18);
}

#app main .bg-light {
    background-color: var(--form-surface-inner) !important;
}

#app main .jumbotron {
    background-color: var(--form-surface);
}

#app main .select2-container--default .select2-selection--single {
    background-color: var(--form-field) !important;
    border-color: rgba(200, 175, 120, 0.4) !important;
}

#app main .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #2d2a24;
}

#app main .select2-dropdown {
    background-color: var(--form-surface);
    border-color: var(--form-border);
}

#app main .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: rgba(244, 196, 48, 0.4) !important;
    color: #1a160c;
}

#app main .select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: var(--form-field);
    border-color: rgba(200, 175, 120, 0.35);
}

#app main .dataTables_filter input {
    background-color: var(--form-field);
    border: 1px solid rgba(200, 175, 120, 0.35);
    border-radius: 0.25rem;
}

#app main .page-item.disabled .page-link {
    background-color: var(--form-surface-soft);
    border-color: rgba(200, 165, 70, 0.2);
}

#app main .page-link {
    background-color: var(--form-surface);
    border-color: rgba(200, 165, 70, 0.22);
    color: #6b5500;
}

#app main .page-item.active .page-link {
    background-color: #c9a010;
    border-color: #a8860d;
    color: #0f0f0f;
}