/*
 * WCAG 2.1 AA Compliance - Non-text Contrast Requirements (1.4.11)
 * Ensures all key interactive elements have a compliant 3:1 contrast border against the white background
 * Using #545454 (Black) for maximum clarity (21:1 ratio)
 */

/* 1. Form Fields (Inputs, Textareas, Selects) */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"],
textarea,
select,
.form-control,
.custom-select {
   border: 1px solid #545454 !important;  /* Sets a 1-pixel solid black border */
}

/* 2. Checkboxes and Radio Buttons (Custom/Default Styles) */
/* This targets the base element and may need slight adjustments if you use complex custom styles */
input[type="checkbox"],
input[type="radio"] {
    border-color: #545454 !important; 
}

/* Custom radio buttons used in the application */
.radio:not(.ui):before {
    border: 1px solid #545454 !important;
}

/* Semantic UI checkbox overrides */
.ui.checkbox input:checked ~ .box:before, 
.ui.checkbox input:checked ~ label:before,
.ui.radio.checkbox .box:before,
.ui.radio.checkbox label:before {
    border-color: #545454 !important;
}

/* 3. Buttons (Primary and Secondary Borders) */
button,
.ui.button,
.btn,
input[type="button"],
input[type="submit"],
input[type="reset"] {
    border: 1px solid #545454 !important; 
}

/* 4. CRITICAL: Focus States for Keyboard Navigation (Also falls under 1.4.11) */
/* This ensures that when a user tabs to any interactive element, the visible focus indicator has high contrast. */
input:focus,
textarea:focus,
select:focus,
button:focus,
.ui.button:focus,
.btn:focus,
.form-control:focus,
.custom-select:focus,
a:focus {
    /* Remove default, often thin, outline for consistency */
    outline: none !important; 
    /* Apply a clear, high-contrast focus ring that is compliant */
    box-shadow: 0 0 0 2px #545454 !important; /* Creates a thick black ring outside the element */
}

/* 5. Dropdown and Select Elements */
.ui.dropdown,
.ui.selection.dropdown,
.dropdown-toggle {
    border: 1px solid #545454 !important;
    border: none !important; /* Removes default border */
}

.ui.dropdown:focus,
.ui.selection.dropdown:focus,
.dropdown-toggle:focus {
    outline: none !important;
    box-shadow: 0 0 0 2px #545454 !important;
}

/* 6. Input Groups and Form Controls */
.input-group .form-control,
.input-group .custom-select,
.input-group-prepend .input-group-text,
.input-group-append .input-group-text {
    border-color: #545454 !important;
}

/* 7. Custom Form Elements */
.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 2px #545454 !important;
}

/* 8. Semantic UI Form Fields */
.ui.form .field > input,
.ui.form .field > select,
.ui.form .field > textarea {
    border: 1px solid #545454 !important;
}

.ui.form .field > input:focus,
.ui.form .field > select:focus,
.ui.form .field > textarea:focus {
    outline: none !important;
    box-shadow: 0 0 0 2px #545454 !important;
}

/* 9. Override any existing focus styles that might conflict */
.ui.form .field.warning input:focus,
.ui.form .field.success input:focus,
.ui.form .field.error input:focus {
    box-shadow: 0 0 0 2px #545454 !important;
}

/* 10. Ensure compatibility with existing validation states */
.form-control.is-valid,
.form-control.is-invalid,
.custom-select.is-valid,
.custom-select.is-invalid {
    border-color: #545454 !important;
}

.form-control.is-valid:focus,
.form-control.is-invalid:focus,
.custom-select.is-valid:focus,
.custom-select.is-invalid:focus {
    box-shadow: 0 0 0 2px #545454 !important;
}

.border-none {
    border: none !important;
}

.ui.form input:not([type]),
.ui.form input[type="date"],
.ui.form input[type="datetime-local"],
.ui.form input[type="email"],
.ui.form input[type="number"],
.ui.form input[type="password"],
.ui.form input[type="search"],
.ui.form input[type="tel"],
.ui.form input[type="time"],
.ui.form input[type="text"],
.ui.form input[type="file"],
.ui.form input[type="url"],
.ui.form textarea {
    border: 1px solid #545454 !important;
}

.tickbox {
    /* 1. Remove default browser styling */
    appearance: none;
    -webkit-appearance: none;
    
    /* 2. Apply your specific color and dimensions */
    border: 2px solid #545454 !important; /* The requested color */
    border-radius: 50%; /* Makes it a circle */
    width: 18px;
    height: 18px;
    background-color: #ffffff;
    
    /* 3. Alignment */
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    position: relative;
    outline: none;
}

/* 4. Style for the "dot" when selected */
.tickbox:checked::after{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #545454; /* Inner dot color */
}

/* Targets the radio buttons specifically within the Format group */
.form-check-inline .form-check-input[type="radio"] {
    /* 1. Reset default browser appearance to allow custom borders */
    appearance: none;
    -webkit-appearance: none;
    
    /* 2. Apply the requested #545454 border */
    border: 2px solid #545454 !important;
    border-radius: 50%;
    
    /* 3. Match the size to your 18px font-size for better alignment */
    height: 18px !important;
    width: 18px !important;
    background-color: #ffffff;
    
    /* 4. Positioning adjustments */
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    margin-top: 0;
}

/* 5. Style for the inner dot when selected (checked) */
.form-check-inline .form-check-input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #545454; /* Inner dot matches the border */
}

/* 6. Optional: Focus state to maintain accessibility */
.form-check-inline .form-check-input[type="radio"]:focus {
    box-shadow: 0 0 0 0.2rem rgba(84, 84, 84, 0.25);
    outline: none;
}

.table td, .table th {
    border-color: #545454 !important;
    border-top: 1px solid #545454 !important;
}