/* ========================================
   CAELIS FORM FIELD ENHANCEMENTS
   ======================================== */

/* 
 * This file contains specific styling for form field differentiation
 * between editable and readonly states in the Caelis ITIL Management System.
 * 
 * Key Features:
 * - Visual distinction between editable and readonly fields
 * - Enhanced accessibility and user experience
 * - Consistent styling across all forms
 * - Icon indicators for field states
 * - Responsive design support
 * 
 * Usage:
 * - Include this file in your layout after Bootstrap CSS
 * - Apply .form-control-readonly class for readonly fields
 * - Use .readonly-field-wrapper for enhanced readonly styling
 * - Add .readonly class to form groups for complete styling
 */

/* ========================================
   EDITABLE FIELD ENHANCEMENTS
   ======================================== */

/* Enhanced editable form controls */
.form-control-editable,
.form-control:not([readonly]):not(.form-control-readonly):not([disabled]),
.form-select:not([readonly]):not(.form-control-readonly):not([disabled]) {
    background-color: #ffffff;
    border: 2px solid #dee2e6;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 0 0.075rem rgba(13, 110, 253, 0.1);
    transition: all 0.15s ease-in-out;
    position: relative;
}

/* Editable field focus states */
.form-control-editable:focus,
.form-control:not([readonly]):not(.form-control-readonly):not([disabled]):focus,
.form-select:not([readonly]):not(.form-control-readonly):not([disabled]):focus {
    background-color: #ffffff;
    border-color: #86b7fe;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
    outline: 0;
    transform: translateY(-1px);
}

/* Editable field hover states */
.form-control-editable:hover,
.form-control:not([readonly]):not(.form-control-readonly):not([disabled]):hover,
.form-select:not([readonly]):not(.form-control-readonly):not([disabled]):hover {
    border-color: #b6d7ff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 0 0.075rem rgba(13, 110, 253, 0.15);
}

/* Editable field active states */
.form-control-editable:active,
.form-control:not([readonly]):not(.form-control-readonly):not([disabled]):active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 0 0.1rem rgba(13, 110, 253, 0.2);
}

/* ========================================
   READONLY FIELD ENHANCEMENTS
   ======================================== */

/* Base readonly styling */
.form-control-readonly,
.form-control[readonly],
.form-select[readonly] {
    background-color: #f8f9fa;
    background-image: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 2px solid #e9ecef;
    color: #6c757d;
    cursor: not-allowed;
    opacity: 0.9;
    font-style: italic;
    position: relative;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
}

/* Readonly field focus states */
.form-control-readonly:focus,
.form-control[readonly]:focus,
.form-select[readonly]:focus {
    background-color: #f8f9fa;
    background-image: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-color: #e9ecef;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075), 0 0 0 0.1rem rgba(108, 117, 125, 0.25);
    outline: 0;
}

/* ========================================
   READONLY FIELD INDICATORS
   ======================================== */

/* Lock icon for readonly fields */
.readonly-field-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}

.readonly-field-wrapper::after {
    content: "\f023";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
    font-size: 0.875rem;
    pointer-events: none;
    opacity: 0.7;
    z-index: 10;
}

/* Eye icon alternative for readonly fields */
.readonly-field-wrapper.view-only::after {
    content: "\f06e";
    font-family: "Font Awesome 6 Free";
    font-weight: 400;
}

/* Adjust padding for readonly fields with icons */
.readonly-field-wrapper .form-control-readonly,
.readonly-field-wrapper .form-control[readonly] {
    padding-right: 2.5rem;
}

/* ========================================
   PLAINTEXT READONLY STYLING
   ======================================== */

/* Enhanced plaintext styling */
.form-control-plaintext-enhanced,
.form-control-plaintext {
    background-color: transparent;
    border: none;
    border-bottom: 2px dotted #dee2e6;
    color: #495057;
    font-weight: 500;
    padding: 0.5rem 0;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    min-height: calc(1.5em + 1rem);
}

.form-control-plaintext-enhanced:focus,
.form-control-plaintext:focus {
    border-color: transparent;
    border-bottom-color: #86b7fe;
    box-shadow: none;
    outline: 0;
}

/* ========================================
   DISABLED FIELD STYLING
   ======================================== */

/* Enhanced disabled field styling */
.form-control:disabled,
.form-select:disabled {
    background-color: #e9ecef;
    background-image: repeating-linear-gradient(45deg,
            transparent,
            transparent 2px,
            rgba(255, 255, 255, 0.5) 2px,
            rgba(255, 255, 255, 0.5) 4px);
    border-color: #ced4da;
    color: #6c757d;
    cursor: not-allowed;
    opacity: 0.6;
}

/* ========================================
   FORM GROUP ENHANCEMENTS
   ======================================== */

/* Readonly form group styling */
.form-group.readonly,
.mb-3.readonly {
    position: relative;
}

.form-group.readonly .form-label,
.mb-3.readonly .form-label {
    color: #6c757d;
    font-weight: 400;
    opacity: 0.9;
    position: relative;
}

.form-group.readonly .form-label::after,
.mb-3.readonly .form-label::after {
    content: " (Read-only)";
    font-size: 0.75rem;
    font-weight: 300;
    color: #868e96;
    font-style: italic;
    margin-left: 0.25rem;
}

/* Editable form group styling */
.form-group.editable .form-label,
.mb-3.editable .form-label {
    color: #212529;
    font-weight: 500;
    position: relative;
}

.form-group.editable .form-label::before,
.mb-3.editable .form-label::before {
    content: "\f044";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-right: 0.5rem;
    color: #0d6efd;
    font-size: 0.75rem;
    opacity: 0.7;
}

/* ========================================
   VALIDATION ENHANCEMENTS
   ======================================== */

/* Validation styling for readonly fields */
.form-control-readonly.is-invalid,
.form-control[readonly].is-invalid {
    border-color: #dc3545;
    background-color: #f8d7da;
    background-image: linear-gradient(135deg, #f8d7da 0%, #f5c2c7 100%);
}

.form-control-readonly.is-valid,
.form-control[readonly].is-valid {
    border-color: #198754;
    background-color: #d1e7dd;
    background-image: linear-gradient(135deg, #d1e7dd 0%, #badbcc 100%);
}

/* Enhanced validation icons for readonly fields */
.was-validated .form-control-readonly:invalid,
.form-control-readonly.is-invalid {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath d='m5.8 3.6-.6.6-2.6 2.6-.6.6-.6-.6L1.4 6l-.6-.6.6-.6L5.8 2.4l.6.6 2.6 2.6.6.6-.6.6-2.6 2.6z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.was-validated .form-control-readonly:valid,
.form-control-readonly.is-valid {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='m2.3 6.73.4.27.99-.99 1.09-1.09.59-.59-1.09-1.09L3.92 3 2.94 3.99l-.6.6-.61-.61L.64 2.89l-.6.6 1.09 1.09.79.79z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

/* Form text enhancements */
.form-text.readonly-note {
    color: #6c757d;
    font-style: italic;
    font-size: 0.8rem;
    margin-top: 0.25rem;
}

.form-text.readonly-note::before {
    content: "\f05a";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-right: 0.5rem;
    color: #6c757d;
    opacity: 0.7;
}

.form-text.editable-note {
    color: #495057;
    font-size: 0.8rem;
    margin-top: 0.25rem;
}

.form-text.editable-note::before {
    content: "\f044";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-right: 0.5rem;
    color: #0d6efd;
    opacity: 0.7;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

/* Mobile adjustments */
@media (max-width: 576px) {
    .readonly-field-wrapper::after {
        right: 8px;
        font-size: 0.75rem;
    }

    .readonly-field-wrapper .form-control-readonly,
    .readonly-field-wrapper .form-control[readonly] {
        padding-right: 2rem;
    }

    .form-group.readonly .form-label::after,
    .mb-3.readonly .form-label::after,
    .form-group.editable .form-label::before,
    .mb-3.editable .form-label::before {
        display: none;
    }
}

/* Tablet adjustments */
@media (min-width: 577px) and (max-width: 991px) {

    .form-control-editable:hover,
    .form-control:not([readonly]):not(.form-control-readonly):not([disabled]):hover {
        transform: translateY(-0.5px);
    }
}

/* ========================================
   DARK MODE SUPPORT
   ======================================== */

@media (prefers-color-scheme: dark) {

    /* Editable fields in dark mode */
    .form-control-editable,
    .form-control:not([readonly]):not(.form-control-readonly):not([disabled]) {
        background-color: #212529;
        border-color: #495057;
        color: #fff;
    }

    .form-control-editable:focus,
    .form-control:not([readonly]):not(.form-control-readonly):not([disabled]):focus {
        background-color: #212529;
        border-color: #86b7fe;
        color: #fff;
    }

    /* Readonly fields in dark mode */
    .form-control-readonly,
    .form-control[readonly] {
        background-color: #343a40;
        background-image: linear-gradient(135deg, #343a40 0%, #2d3748 100%);
        border-color: #495057;
        color: #adb5bd;
    }

    .form-control-plaintext-enhanced,
    .form-control-plaintext {
        color: #e2e8f0;
        border-bottom-color: #495057;
    }

    /* Label colors in dark mode */
    .form-group.readonly .form-label,
    .mb-3.readonly .form-label {
        color: #adb5bd;
    }

    .form-group.editable .form-label,
    .mb-3.editable .form-label {
        color: #fff;
    }
}

/* ========================================
   ACCESSIBILITY ENHANCEMENTS
   ======================================== */

/* High contrast mode support */
@media (prefers-contrast: high) {

    .form-control-readonly,
    .form-control[readonly] {
        border-width: 3px;
        border-style: dashed;
    }

    .form-control-editable,
    .form-control:not([readonly]):not(.form-control-readonly):not([disabled]) {
        border-width: 3px;
        border-style: solid;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {

    .form-control-editable,
    .form-control:not([readonly]):not(.form-control-readonly):not([disabled]),
    .form-select:not([readonly]):not(.form-control-readonly):not([disabled]) {
        transition: none;
    }

    .form-control-editable:focus,
    .form-control:not([readonly]):not(.form-control-readonly):not([disabled]):focus {
        transform: none;
    }

    .form-control-editable:hover,
    .form-control:not([readonly]):not(.form-control-readonly):not([disabled]):hover {
        transform: none;
    }
}

/* Focus-visible support for better keyboard navigation */
.form-control-editable:focus-visible,
.form-control:not([readonly]):not(.form-control-readonly):not([disabled]):focus-visible {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}

.form-control-readonly:focus-visible,
.form-control[readonly]:focus-visible {
    outline: 2px solid #6c757d;
    outline-offset: 2px;
}