/* ====================================================================
   HRMS UI overrides — loads AFTER vendor styles.css so it wins.
   Focused on three things:
     1. Dark borders on every input / select / picker.
     2. Dark, readable form labels.
     3. Modernized create / update forms (cards, sections, sticky save).
   Dark-mode safe via [data-bs-theme="dark"] overrides at the bottom.
   ==================================================================== */

/* -------------------------------------------------- 1. INPUT BORDERS  */
:root {
    --hrms-input-border: #cbd5e1;          /* slate-300 — fallback (legacy GXON) */
    --hrms-input-border-strong: #1f2937;   /* slate-800 — what the user wanted */
    --hrms-input-bg: #ffffff;
    --hrms-input-focus-ring: rgba(49, 106, 255, 0.18);
    --hrms-label-color: #0f172a;           /* slate-900 — near black */
    --hrms-label-weight: 600;
    --hrms-section-divider: #e2e8f0;
}

.form-control,
.form-select,
input[type="text"].form-control,
input[type="email"].form-control,
input[type="password"].form-control,
input[type="number"].form-control,
input[type="search"].form-control,
input[type="tel"].form-control,
input[type="url"].form-control,
input[type="date"].form-control,
input[type="time"].form-control,
input[type="datetime-local"].form-control,
input[type="file"].form-control,
textarea.form-control,
.flatpickr-input.form-control {
    border: 1.5px solid var(--hrms-input-border-strong) !important;
    background-color: var(--hrms-input-bg);
    color: var(--hrms-label-color);
    border-radius: 8px;
    padding: 0.55rem 0.85rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control::placeholder,
.form-select::placeholder {
    color: #94a3b8;
    opacity: 1;
}

.form-control:focus,
.form-select:focus,
textarea.form-control:focus,
.flatpickr-input.form-control:focus {
    border-color: #1f2937 !important;
    box-shadow: 0 0 0 0.2rem var(--hrms-input-focus-ring) !important;
    outline: none;
}

.form-control.is-invalid,
.form-select.is-invalid {
    border-color: #dc3545 !important;
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.18) !important;
}

/* Bootstrap-Select rendered button (replaces selectpicker <select>) */
.bootstrap-select > .dropdown-toggle,
.bootstrap-select > .btn.dropdown-toggle {
    border: 1.5px solid var(--hrms-input-border-strong) !important;
    background-color: var(--hrms-input-bg) !important;
    color: var(--hrms-label-color) !important;
    border-radius: 8px !important;
    padding: 0.55rem 0.85rem !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-shadow: none !important;
}

.bootstrap-select > .dropdown-toggle:focus,
.bootstrap-select.show > .dropdown-toggle {
    border-color: #1f2937 !important;
    box-shadow: 0 0 0 0.2rem var(--hrms-input-focus-ring) !important;
}

.bootstrap-select .dropdown-menu {
    border: 1.5px solid var(--hrms-input-border-strong);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

.bootstrap-select .dropdown-menu li a.dropdown-item {
    padding: 0.5rem 0.85rem;
}

/* DataTables search + length filter inputs */
.dataTables_filter input,
.dataTables_length select {
    border: 1.5px solid var(--hrms-input-border-strong) !important;
    border-radius: 8px !important;
    padding: 0.4rem 0.7rem !important;
}

/* Flatpickr calendar pop-up (visual consistency with our inputs) */
.flatpickr-calendar {
    border: 1.5px solid var(--hrms-input-border-strong);
    border-radius: 10px;
    box-shadow: 0 12px 36px rgba(15, 23, 42, 0.12);
}

/* Native time / date inputs — pick up the same look */
input[type="time"],
input[type="date"],
input[type="datetime-local"] {
    border: 1.5px solid var(--hrms-input-border-strong) !important;
    border-radius: 8px;
    padding: 0.55rem 0.85rem;
    color: var(--hrms-label-color);
}

/* Input group + prefix span */
.input-group .form-control {
    border-radius: 0 8px 8px 0 !important;
}

.input-group > .input-group-text {
    border: 1.5px solid var(--hrms-input-border-strong);
    border-right: 0;
    background-color: #f8fafc;
    color: var(--hrms-label-color);
    border-radius: 8px 0 0 8px;
    font-weight: 600;
}

/* Checkbox + radio */
.form-check-input {
    border: 1.5px solid var(--hrms-input-border-strong);
    width: 1.1em;
    height: 1.1em;
    margin-top: 0.2em;
}

.form-check-input:focus {
    box-shadow: 0 0 0 0.2rem var(--hrms-input-focus-ring);
}

.form-check-input:checked {
    background-color: #316aff;
    border-color: #316aff;
}

/* -------------------------------------------------- 2. FORM LABELS    */
.form-label,
label.form-label,
label.form-check-label {
    color: var(--hrms-label-color) !important;
    font-weight: var(--hrms-label-weight);
    font-size: 0.875rem;
    margin-bottom: 0.45rem;
    letter-spacing: 0.005em;
}

label.form-check-label {
    font-weight: 500;       /* checkbox labels feel heavy at 600 */
}

.form-label .text-danger {
    font-weight: 700;
}

/* -------------------------------------------------- 3. MODERNIZED FORMS */

/* Card containers used by create / edit views */
.card.border-0.shadow-sm {
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04),
                0 6px 18px rgba(15, 23, 42, 0.05) !important;
    overflow: hidden;
}

.card.border-0.shadow-sm > .card-header {
    background: linear-gradient(180deg, #fafbfc 0%, #ffffff 100%);
    border-bottom: 1px solid var(--hrms-section-divider);
    padding: 1.1rem 1.4rem 0.85rem;
}

.card.border-0.shadow-sm > .card-header h5 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--hrms-label-color);
    margin-bottom: 0.15rem;
}

.card.border-0.shadow-sm > .card-header h5 i {
    font-size: 1.05rem;
    background: rgba(49, 106, 255, 0.1);
    padding: 0.45rem;
    border-radius: 8px;
    margin-right: 0.6rem !important;
    color: #316aff !important;
}

.card.border-0.shadow-sm > .card-header > small {
    color: #64748b;
    font-size: 0.825rem;
}

.card.border-0.shadow-sm > .card-body {
    padding: 1.4rem;
}

/* Sticky-feeling action row at the bottom of forms */
form > .d-flex.gap-2:last-child {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--hrms-section-divider);
}

form > .d-flex.gap-2:last-child .btn-primary {
    padding: 0.6rem 1.4rem;
    font-weight: 600;
    border-radius: 8px;
}

form > .d-flex.gap-2:last-child .btn-light {
    padding: 0.6rem 1.4rem;
    font-weight: 500;
    border-radius: 8px;
    border: 1.5px solid var(--hrms-input-border-strong);
    background: #ffffff;
    color: var(--hrms-label-color);
}

form > .d-flex.gap-2:last-child .btn-light:hover {
    background: #f1f5f9;
}

/* Help text under inputs — slightly larger + better color */
.form-control + small.text-muted,
.form-select + small.text-muted,
small.text-muted {
    font-size: 0.79rem;
    color: #64748b !important;
}

/* Invalid feedback — clearer */
.invalid-feedback,
.invalid-feedback.d-block {
    color: #dc3545;
    font-weight: 500;
    font-size: 0.8rem;
    margin-top: 0.3rem;
}

/* Make the weekend-day checkbox tiles in Company Settings feel like cards */
.form-check.border.rounded {
    border: 1.5px solid var(--hrms-input-border-strong) !important;
    border-radius: 10px !important;
    transition: background 0.15s ease, border-color 0.15s ease;
    cursor: pointer;
}

.form-check.border.rounded:has(input:checked) {
    background: rgba(49, 106, 255, 0.08);
    border-color: #316aff !important;
}

.form-check.border.rounded:has(input:checked) label {
    color: #316aff;
}

/* -------------------------------------------------- DARK MODE         */
[data-bs-theme="dark"] {
    --hrms-input-border-strong: #cbd5e1;   /* invert to a light border */
    --hrms-input-bg: #1f2937;
    --hrms-label-color: #e2e8f0;
    --hrms-section-divider: #334155;
    --hrms-input-focus-ring: rgba(99, 152, 255, 0.25);
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] textarea.form-control,
[data-bs-theme="dark"] .flatpickr-input.form-control,
[data-bs-theme="dark"] input[type="time"],
[data-bs-theme="dark"] input[type="date"],
[data-bs-theme="dark"] input[type="datetime-local"],
[data-bs-theme="dark"] .bootstrap-select > .dropdown-toggle {
    background-color: var(--hrms-input-bg) !important;
    color: var(--hrms-label-color) !important;
}

[data-bs-theme="dark"] .form-control::placeholder {
    color: #94a3b8;
}

[data-bs-theme="dark"] .input-group > .input-group-text {
    background-color: #334155;
    color: var(--hrms-label-color);
}

[data-bs-theme="dark"] .card.border-0.shadow-sm > .card-header {
    background: linear-gradient(180deg, #1f2937 0%, #111827 100%);
}

[data-bs-theme="dark"] form > .d-flex.gap-2:last-child .btn-light {
    background: #1f2937;
    color: var(--hrms-label-color);
    border-color: var(--hrms-input-border-strong);
}

[data-bs-theme="dark"] form > .d-flex.gap-2:last-child .btn-light:hover {
    background: #334155;
}