/* ========================== Global Form Override - Complete & Proportional ========================== */

/* Base form control adjustments */
.form-control {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.9rem !important;
    min-height: 36px !important;
    border-radius: 0.375rem !important;
    line-height: 1.5 !important;
}

/* Form floating adjustments */
.form-floating > .form-control {
    height: calc(3rem + 2px) !important;
    padding: 0.75rem 0.75rem !important;
    font-size: 0.9rem !important;
}

.form-floating > label {
    padding: 0.75rem 0.75rem !important;
    font-size: 0.85rem !important;
}

/* Form select adjustments */
.form-select {
    padding: 0.5rem 2.25rem 0.5rem 0.75rem !important;
    font-size: 0.9rem !important;
    min-height: 36px !important;
    border-radius: 0.375rem !important;
    line-height: 1.5 !important;
    background-size: 16px 12px !important;
    background-position: right 0.75rem center !important;
}

.form-floating > .form-select {
    height: calc(3rem + 2px) !important;
    padding: 0.75rem 2.25rem 0.75rem 0.75rem !important;
}

/* Textarea adjustments */
textarea.form-control {
    min-height: 80px !important;
    resize: vertical;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
}

/* Input group adjustments */
.input-group-text {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.9rem !important;
    min-height: 36px !important;
    display: flex !important;
    align-items: center !important;
    border-radius: 0.375rem !important;
}

.input-group > .form-control,
.input-group > .form-select {
    min-height: 36px !important;
}

/* Form check adjustments (checkbox & radio) */
.form-check {
    padding-left: 1.25em !important;
    margin-bottom: 0.5rem !important;
}

.form-check-input {
    width: 1em !important;
    height: 1em !important;
    margin-top: 0.25em !important;
    margin-left: -1.25em !important;
    border-radius: 0.25em !important;
}

.form-check-input[type="radio"] {
    border-radius: 50% !important;
}

.form-check-label {
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
    margin-left: 0.25rem !important;
}

/* Form switch adjustments */
.form-switch .form-check-input {
    width: 2em !important;
    height: 1em !important;
    margin-left: -2.25em !important;
    border-radius: 2em !important;
}

/* Form range adjustments */
.form-range {
    height: 1.25rem !important;
    padding: 0 !important;
    background-color: transparent !important;
}

/* File input adjustments */
.form-control[type="file"] {
    padding: 0.375rem 0.75rem !important;
    height: auto !important;
}

/* Color input adjustments */
.form-control[type="color"] {
    width: 3rem !important;
    height: 36px !important;
    padding: 0.125rem !important;
}

/* Date/time input adjustments */
.form-control[type="date"],
.form-control[type="datetime-local"],
.form-control[type="month"],
.form-control[type="time"],
.form-control[type="week"] {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.9rem !important;
}

/* Button size adjustments */
.btn {
    padding: 0.5rem 1rem !important;
    font-size: 0.9rem !important;
    border-radius: 0.375rem !important;
    line-height: 1.5 !important;
    min-height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.btn-sm {
    padding: 0.375rem 0.75rem !important;
    font-size: 0.8rem !important;
    min-height: 32px !important;
}

.btn-lg {
    padding: 0.75rem 1.5rem !important;
    font-size: 1rem !important;
    min-height: 44px !important;
}

/* Button group adjustments */
.btn-group .btn,
.btn-group-vertical .btn {
    margin: 0 !important;
}

/* Dropdown adjustments */
.dropdown-toggle::after {
    margin-left: 0.5em !important;
}

.dropdown-menu {
    font-size: 0.9rem !important;
    border-radius: 0.375rem !important;
    padding: 0.25rem 0 !important;
}

.dropdown-item {
    padding: 0.375rem 1rem !important;
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
}

.dropdown-header {
    padding: 0.5rem 1rem !important;
    font-size: 0.8rem !important;
}

.dropdown-divider {
    margin: 0.25rem 0 !important;
}

/* Modal adjustments */
.modal-body {
    padding: 1rem !important;
}

.modal-header {
    padding: 0.75rem 1rem !important;
    min-height: 3.5rem !important;
}

.modal-footer {
    padding: 0.75rem 1rem !important;
    min-height: 3.5rem !important;
}

.modal-title {
    font-size: 1.1rem !important;
    line-height: 1.5 !important;
}

/* Card adjustments */
.card {
    border-radius: 0.5rem !important;
}

.card-body {
    padding: 1rem !important;
}

.card-header {
    padding: 0.75rem 1rem !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
}

.card-footer {
    padding: 0.75rem 1rem !important;
    font-size: 0.9rem !important;
}

.card-title {
    font-size: 1.1rem !important;
    margin-bottom: 0.75rem !important;
}

.card-subtitle {
    font-size: 0.9rem !important;
    margin-bottom: 0.5rem !important;
}

/* Table adjustments */
.table {
    font-size: 0.9rem !important;
}

.table th,
.table td {
    padding: 0.5rem !important;
    font-size: 0.9rem !important;
    vertical-align: middle !important;
}

.table-sm th,
.table-sm td {
    padding: 0.375rem !important;
    font-size: 0.85rem !important;
}

/* Alert adjustments */
.alert {
    padding: 0.75rem 1rem !important;
    font-size: 0.9rem !important;
    border-radius: 0.375rem !important;
    margin-bottom: 1rem !important;
}

.alert-heading {
    font-size: 1rem !important;
}

/* Badge adjustments */
.badge {
    padding: 0.35em 0.65em !important;
    font-size: 0.75em !important;
    border-radius: 0.25rem !important;
}

/* Breadcrumb adjustments */
.breadcrumb {
    padding: 0.5rem 1rem !important;
    margin-bottom: 1rem !important;
    font-size: 0.9rem !important;
    border-radius: 0.375rem !important;
}

.breadcrumb-item {
    font-size: 0.9rem !important;
}

/* Pagination adjustments */
.pagination {
    margin-bottom: 1rem !important;
}

.page-link {
    padding: 0.375rem 0.75rem !important;
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
    border-radius: 0.375rem !important;
}

.page-item:first-child .page-link,
.page-item:last-child .page-link {
    border-radius: 0.375rem !important;
}

/* Nav adjustments */
.nav-link {
    padding: 0.5rem 1rem !important;
    font-size: 0.9rem !important;
    border-radius: 0.375rem !important;
}

.nav-tabs .nav-link {
    border-radius: 0.375rem 0.375rem 0 0 !important;
}

.nav-pills .nav-link {
    border-radius: 0.375rem !important;
}

/* List group adjustments */
.list-group-item {
    padding: 0.5rem 1rem !important;
    font-size: 0.9rem !important;
    border-radius: 0 !important;
}

.list-group-item:first-child {
    border-top-left-radius: 0.375rem !important;
    border-top-right-radius: 0.375rem !important;
}

.list-group-item:last-child {
    border-bottom-left-radius: 0.375rem !important;
    border-bottom-right-radius: 0.375rem !important;
}

/* Progress adjustments */
.progress {
    height: 1rem !important;
    border-radius: 0.375rem !important;
}

.progress-bar {
    font-size: 0.75rem !important;
}

/* Tooltip adjustments */
.tooltip {
    font-size: 0.8rem !important;
}

.tooltip-inner {
    padding: 0.375rem 0.75rem !important;
    border-radius: 0.375rem !important;
}

/* Popover adjustments */
.popover {
    font-size: 0.9rem !important;
    border-radius: 0.5rem !important;
}

.popover-header {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.9rem !important;
}

.popover-body {
    padding: 0.5rem 0.75rem !important;
}

/* Accordion adjustments */
.accordion-button {
    padding: 0.75rem 1rem !important;
    font-size: 0.9rem !important;
}

.accordion-body {
    padding: 1rem !important;
    font-size: 0.9rem !important;
}

/* Offcanvas adjustments */
.offcanvas-header {
    padding: 0.75rem 1rem !important;
}

.offcanvas-body {
    padding: 1rem !important;
    font-size: 0.9rem !important;
}

.offcanvas-title {
    font-size: 1.1rem !important;
}

/* ========================== Mobile Responsive Overrides ========================== */

@media (max-width: 767.98px) {
    .form-control {
        font-size: 16px !important; /* Prevent zoom on iOS */
        padding: 0.5rem 0.75rem !important;
        min-height: 44px !important; /* Touch-friendly */
    }
    
    .form-floating > .form-control {
        height: calc(3.25rem + 2px) !important;
        padding: 0.875rem 0.75rem !important;
        font-size: 16px !important;
    }
    
    .form-floating > label {
        padding: 0.875rem 0.75rem !important;
        font-size: 0.85rem !important;
    }
    
    .form-select {
        font-size: 16px !important;
        padding: 0.5rem 2.25rem 0.5rem 0.75rem !important;
        min-height: 44px !important;
    }
    
    .btn {
        padding: 0.625rem 1.25rem !important;
        font-size: 0.95rem !important;
        min-height: 44px !important;
    }
    
    .btn-sm {
        padding: 0.5rem 1rem !important;
        font-size: 0.85rem !important;
        min-height: 40px !important;
    }
    
    .btn-lg {
        padding: 0.75rem 1.5rem !important;
        font-size: 1rem !important;
        min-height: 48px !important;
    }
}

@media (max-width: 575.98px) {
    .form-control {
        padding: 0.5rem 0.625rem !important;
    }
    
    .form-floating > .form-control {
        padding: 0.75rem 0.625rem !important;
    }
    
    .form-floating > label {
        padding: 0.75rem 0.625rem !important;
        font-size: 0.8rem !important;
    }
    
    .modal-body,
    .card-body {
        padding: 0.75rem !important;
    }
    
    .table th,
    .table td {
        padding: 0.375rem !important;
        font-size: 0.85rem !important;
    }
}

/* ========================== Third-party Plugin Overrides ========================== */

/* DataTables adjustments */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    padding: 0.375rem 0.5rem !important;
    font-size: 0.85rem !important;
    min-height: 32px !important;
}

/* Select2 adjustments */
.select2-container--default .select2-selection--single {
    height: 36px !important;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.9rem !important;
}

.select2-container--default .select2-selection--multiple {
    min-height: 36px !important;
    padding: 0.25rem 0.5rem !important;
}

/* Summernote adjustments */
.note-editor .note-toolbar {
    padding: 0.5rem !important;
}

.note-editor .note-editing-area {
    min-height: 150px !important;
}

/* DatePicker adjustments */
.datepicker input {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.9rem !important;
    min-height: 36px !important;
}

/* File upload adjustments */
.custom-file-input {
    height: 36px !important;
}

.custom-file-label {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.9rem !important;
    height: 36px !important;
    line-height: 1.5 !important;
}

/* ========================== Print Styles ========================== */

@media print {
    .form-control,
    .form-select,
    .btn {
        font-size: 12pt !important;
        padding: 0.25rem 0.5rem !important;
    }
    
    .table th,
    .table td {
        padding: 0.25rem !important;
        font-size: 10pt !important;
    }
}

/* ========================== High Contrast Mode ========================== */

@media (prefers-contrast: high) {
    .form-control,
    .form-select {
        border-width: 2px !important;
    }
    
    .btn {
        border-width: 2px !important;
        font-weight: 600 !important;
    }
}

/* ========================== Reduced Motion ========================== */

@media (prefers-reduced-motion: reduce) {
    .form-control,
    .form-select,
    .btn {
        transition: none !important;
    }
}

/* ========================== Admin Specific Components ========================== */

/* Search input styling */
.search-input {
    padding: 0.5rem 2.5rem 0.5rem 0.75rem !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%236c757d' d='m11.742 10.344 6.814 6.814a1 1 0 0 1-1.414 1.414l-6.814-6.814a6 6 0 1 1 1.414-1.414zM12 6a6 6 0 1 1-12 0 6 6 0 0 1 12 0z'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 16px 16px !important;
}

/* Filter select styling */
.filter-select {
    padding: 0.5rem 2.25rem 0.5rem 0.75rem !important;
    font-size: 0.85rem !important;
    min-height: 34px !important;
}

/* Action buttons in tables */
.action-btn {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.75rem !important;
    min-height: 28px !important;
    margin: 0 0.125rem !important;
}

/* Status badges */
.status-badge {
    padding: 0.25em 0.5em !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    border-radius: 0.25rem !important;
}

/* Form group spacing */
.form-group {
    margin-bottom: 1rem !important;
}

.form-group-sm {
    margin-bottom: 0.75rem !important;
}

/* Required field indicator */
.required::after {
    content: " *" !important;
    color: #dc3545 !important;
}

/* Form validation styling */
.is-invalid {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

.is-valid {
    border-color: #198754 !important;
    box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.25) !important;
}

.invalid-feedback {
    display: block !important;
    font-size: 0.8rem !important;
    color: #dc3545 !important;
    margin-top: 0.25rem !important;
}

.valid-feedback {
    display: block !important;
    font-size: 0.8rem !important;
    color: #198754 !important;
    margin-top: 0.25rem !important;
}

/* Loading states */
.loading-overlay {
    position: relative !important;
}

.loading-overlay::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(255, 255, 255, 0.8) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10 !important;
}

/* Data table responsive */
.table-responsive {
    border-radius: 0.375rem !important;
    border: 1px solid #dee2e6 !important;
}

.table-responsive .table {
    margin-bottom: 0 !important;
}

/* Compact form layout */
.form-compact .form-control,
.form-compact .form-select {
    padding: 0.375rem 0.5rem !important;
    font-size: 0.85rem !important;
    min-height: 32px !important;
}

.form-compact .form-floating > .form-control {
    height: calc(2.5rem + 2px) !important;
    padding: 0.5rem 0.5rem !important;
}

.form-compact .form-floating > label {
    padding: 0.5rem 0.5rem !important;
    font-size: 0.75rem !important;
}

.form-compact .btn {
    padding: 0.375rem 0.75rem !important;
    font-size: 0.85rem !important;
    min-height: 32px !important;
}

/* Quick action buttons */
.quick-actions {
    display: flex !important;
    gap: 0.25rem !important;
    flex-wrap: wrap !important;
}

.quick-actions .btn {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.75rem !important;
    min-height: 28px !important;
}

/* Sidebar form styling */
.sidebar-form .form-control,
.sidebar-form .form-select {
    padding: 0.375rem 0.5rem !important;
    font-size: 0.8rem !important;
    min-height: 32px !important;
}

.sidebar-form .btn {
    padding: 0.375rem 0.75rem !important;
    font-size: 0.8rem !important;
    min-height: 32px !important;
}

/* Mobile table adjustments */
@media (max-width: 767.98px) {
    .table-responsive {
        border: none !important;
    }
    
    .table th,
    .table td {
        padding: 0.375rem 0.25rem !important;
        font-size: 0.8rem !important;
    }
    
    .action-btn {
        padding: 0.25rem 0.375rem !important;
        font-size: 0.7rem !important;
        min-height: 26px !important;
    }
    
    .quick-actions {
        justify-content: center !important;
    }
    
    .status-badge {
        font-size: 0.65rem !important;
        padding: 0.2em 0.4em !important;
    }
}

/* Print optimizations */
@media print {
    .action-btn,
    .quick-actions,
    .btn {
        display: none !important;
    }
    
    .table th,
    .table td {
        padding: 0.2rem !important;
        font-size: 9pt !important;
        border: 1px solid #000 !important;
    }
    
    .status-badge {
        border: 1px solid #000 !important;
        background: transparent !important;
        color: #000 !important;
    }
}

/* ========================== Form Validation Fix ========================== */

/* Hide validation feedback by default */
.invalid-feedback {
    display: none !important;
}

.valid-feedback {
    display: none !important;
}

/* Only show validation feedback when form has was-validated class */
.was-validated .form-control:invalid ~ .invalid-feedback,
.was-validated .form-select:invalid ~ .invalid-feedback,
.form-control.is-invalid ~ .invalid-feedback,
.form-select.is-invalid ~ .invalid-feedback {
    display: block !important;
}

.was-validated .form-control:valid ~ .valid-feedback,
.was-validated .form-select:valid ~ .valid-feedback,
.form-control.is-valid ~ .valid-feedback,
.form-select.is-valid ~ .valid-feedback {
    display: block !important;
}

/* Remove invalid styling until validation is triggered */
.form-control:invalid,
.form-select:invalid {
    border-color: #ced4da !important;
    box-shadow: none !important;
}

.form-control:valid,
.form-select:valid {
    border-color: #ced4da !important;
    box-shadow: none !important;
}

/* Only apply invalid/valid styling when form is validated */
.was-validated .form-control:invalid,
.form-control.is-invalid {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

.was-validated .form-control:valid,
.form-control.is-valid {
    border-color: #198754 !important;
    box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.25) !important;
}

.was-validated .form-select:invalid,
.form-select.is-invalid {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

.was-validated .form-select:valid,
.form-select.is-valid {
    border-color: #198754 !important;
    box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.25) !important;
}