/* ==================================================
   SKIP TO CONTENT
================================================== */
.skip-link {
    position: absolute;
    top: -40px;
    left: 10px;
    background: #000;
    color: #fff;
    padding: 6px 12px;
    z-index: 10000;
}
.skip-link:focus {
    top: 10px;
}

/* ==================================================
   ACCESSIBILITY TOOLBAR
================================================== */
.accessibility-toolbar {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    padding: 6px;
}
.accessibility-toolbar button {
    border: 1px solid #ccc;
    background: #fff;
    padding: 4px 8px;
    cursor: pointer;
}

/* ==================================================
   REQUIRED FIELD
================================================== */
.is-invalid {
    border: 2px solid #dc3545 !important;
}

/* RADIO / CHECKBOX GROUP */
.required-group {
    border: 2px solid #ccc;
    padding: 10px;
}
.required-group.border-danger {
    border-color: #dc3545 !important;
}

/* ==================================================
   BASE MODES
================================================== */
.dark-mode {
    background-color: #121212;
    color: #ffffff;
}
.dark-mode a {
    color: #9ecbff;
}

.contrast-mode {
    background-color: #000000 !important;
    color: #ffff00 !important;   /* Yellow text */
    border: 2px solid #ffff00;
}
.contrast-mode a {
    color: #00ffff !important;   /* Cyan links */
    text-decoration: underline;
}

.large-font {
    font-size: 120%;
}

/* ==================================================
   KEYBOARD TAB FOCUS (LIGHT MODE)
================================================== */
body.keyboard-nav input:focus,
body.keyboard-nav select:focus,
body.keyboard-nav textarea:focus,
body.keyboard-nav button:focus,
body.keyboard-nav a:focus {
    outline: none !important;
    border: 4px solid #dc3545 !important;
    box-shadow: none !important;
}

/* CHECKBOX / RADIO */
body.keyboard-nav input[type="checkbox"]:focus,
body.keyboard-nav input[type="radio"]:focus,
body.keyboard-nav .form-check-input:focus {
    outline: 4px solid #dc3545 !important;
    outline-offset: 4px;
    box-shadow: none !important;
}

/* ==================================================
   KEYBOARD TAB FOCUS (DARK MODE)  FIXED
================================================== */
body.dark-mode.keyboard-nav input:focus,
body.dark-mode.keyboard-nav select:focus,
body.dark-mode.keyboard-nav textarea:focus,
body.dark-mode.keyboard-nav button:focus,
body.dark-mode.keyboard-nav a:focus {
    border: 4px solid #ff6b6b !important;
}

body.dark-mode.keyboard-nav input[type="checkbox"]:focus,
body.dark-mode.keyboard-nav input[type="radio"]:focus,
body.dark-mode.keyboard-nav .form-check-input:focus {
    outline: 4px solid #ff6b6b !important;
}

/* ==================================================
   REMOVE MOUSE FOCUS
================================================== */
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible) {
    border-color: inherit;
    box-shadow: none;
}


/* ===============================
   DARK MODE FORM CONTROLS
================================ */
.dark-mode input,
.dark-mode textarea,
.dark-mode select {
    background-color: #1e1e1e !important;
    color: #ffffff !important;
    border: 1px solid #555 !important;
}

.dark-mode input::placeholder,
.dark-mode textarea::placeholder {
    color: #b5b5b5 !important;
}

/* Bootstrap form-control */
.dark-mode .form-control,
.dark-mode .form-select {
    background-color: #1e1e1e !important;
    color: #ffffff !important;
    border-color: #555 !important;
}

/* Disabled fields */
.dark-mode input:disabled,
.dark-mode textarea:disabled,
.dark-mode select:disabled {
    background-color: #2a2a2a !important;
    color: #999 !important;
}


.dark-mode .form-check-input {
    background-color: #1e1e1e;
    border-color: #777;
}

.dark-mode .form-check-input:checked {
    background-color: #0d6efd;
    border-color: #0d6efd;
}


.dark-mode label,
.dark-mode .form-label {
    color: #ffffff;
}


/* ===============================
   HIGH CONTRAST FORM CONTROLS
================================ */
.contrast-mode input,
.contrast-mode textarea,
.contrast-mode select {
    background-color: #000 !important;
    color: #fff !important;
    border: 2px solid #fff !important;
}

.contrast-mode input::placeholder {
    color: #ff0 !important;
}

.contrast-mode .form-check-input {
    border-color: #fff;
}