/* ========================================= */
/* Modern General Application Styles         */
/* ========================================= */

/* Global Button Refinements (Overriding Bootstrap 3) */
.btn {
    padding: 10px 15px !important;
    font-weight: 500 !important;
    border-radius: 10px !important;
    transition: all 0.2s ease-in-out !important;
    background-image: none !important;
    text-shadow: none !important;
}

/* Hover Lift Effect */
.btn:not(.btn-link):hover,
.btn:not(.btn-link):focus {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Active/Click Effect */
.btn:not(.btn-link):active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}

/* Primary Button (Blue) */
.btn-primary {
    background-color: var(--royal_blue) !important;
    border-color: var(--royal_blue) !important;
    color: #ffffff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: #0b5ed7 !important;
    border-color: #0a58ca !important;
}

/* Success Button (Green) */
.btn-success {
    background-color: #198754 !important;
    border-color: #198754 !important;
    color: #ffffff !important;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active {
    background-color: #157347 !important;
    border-color: #146c43 !important;
}

/* Danger Button (Red) */
.btn-danger {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    color: #ffffff !important;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
    background-color: #bb2d3b !important;
    border-color: #b02a37 !important;
}

/* Warning Button (Yellow/Orange) */
.btn-warning {
    background-color: #ffc107 !important;
    border-color: #ffc107 !important;
    color: #000000 !important;
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active {
    background-color: #ffca2c !important;
    border-color: #ffc720 !important;
}

/* Default/Secondary Button (Grey) */
.btn-default {
    background-color: #ffffff !important;
    border-color: #e9ecef !important;
    color: #212529 !important;
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active {
    background-color: #ffffff !important;
    border-color: #e9ecef !important;
    color: #212529 !important;
}

/* Info Button (Cyan) */
.btn-info {
    background-color: #0dcaf0 !important;
    border-color: #0dcaf0 !important;
    color: #000000 !important;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active {
    background-color: #31d2f2 !important;
    border-color: #25cff2 !important;
}

/* ========================================= */
/* Button Group Edge Merging                 */
/* ========================================= */
.btn-group .btn {
    border-radius: 0 !important;
    margin-left: -1px;
}

.btn-group .btn:first-child {
    border-top-left-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    margin-left: 0;
}

.btn-group .btn:last-child {
    border-top-right-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* ========================================= */
/* Form Controls                             */
/* ========================================= */
.form-control {
    border-radius: 10px !important;
    border-color: #dce3ea;
    box-shadow: none !important;
    transition: border-color 0.2s ease;
}

.form-control:focus {
    border-color: var(--royal_blue);
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1) !important;
}

/* ========================================= */
/* Universal Modern Input / Select / Textarea */
/* ========================================= */

.modern-input,
.modern-input-select,
.modern-input-textarea {
    width: 100% !important;
    display: block !important;
    border-radius: 8px !important;
    border: 1px solid rgba(100, 116, 139, 0.3) !important;
    font-size: 1.1rem !important;
    color: var(--midnight_blue) !important;
    background: rgb(255, 255, 255) !important;
    padding: 10px 14px !important;
    box-sizing: border-box !important;
    transition: border-color 0.18s, box-shadow 0.18s !important;
    box-shadow: none !important;
    outline: none;
    max-width: 100% !important;
}

.modern-input-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748b' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    padding-right: 36px !important;
}

.modern-input:focus,
.modern-input-select:focus,
.modern-input-textarea:focus {
    border-color: var(--royal_blue) !important;
    box-shadow: 0 0 0 3px rgba(48, 79, 201, 0.12) !important;
    outline: none;
}

.modern-input-textarea {
    resize: vertical;
    min-height: 100px;
    line-height: 1.6;
}

@media (max-width: 895px) {
    .modern-input,
    .modern-input-select,
    .modern-input-textarea {
        font-size: 1rem !important;
        padding: 9px 12px !important;
    }
}

@media (max-width: 480px) {
    .modern-input,
    .modern-input-select,
    .modern-input-textarea {
        font-size: 0.97rem !important;
        padding: 8px 11px !important;
    }
}

/* ========================================= */
/* Date of Birth Dropdowns — renderDOB       */
/* ========================================= */

/* Desktop: keep selects inline but styled */
select[name*="fldDOB"],
select[id*="fldDOB"] {
    display: inline-block !important;
    border-radius: 8px !important;
    border: 1px solid rgba(100, 116, 139, 0.3) !important;
    font-size: 1.05rem !important;
    color: var(--midnight_blue) !important;
    background: rgb(255, 255, 255) !important;
    padding: 9px 10px !important;
    box-shadow: none !important;
    transition: border-color 0.18s, box-shadow 0.18s !important;
    vertical-align: middle;
    float: none !important;
    margin-left: 6px !important;
    margin-bottom: 6px !important;
}

select[name*="fldDOB"]:first-child,
select[id*="fldDOB"]:first-child {
    margin-left: 0 !important;
}

select[name*="fldDOB"]:focus,
select[id*="fldDOB"]:focus {
    border-color: var(--royal_blue) !important;
    box-shadow: 0 0 0 3px rgba(48, 79, 201, 0.12) !important;
    outline: none;
}

/* Mobile: wrap DOB selects in a flex row */
@media (max-width: 540px) {
    /* wrap the sibling selects in a flex row via their common parent */
    .profile-input:has(select[name*="fldDOB"]),
    .cmp-input:has(select[name*="fldDOB"]),
    td:has(select[name*="fldDOB"]),
    div:has(> select[name*="fldDOB"]) {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        align-items: center;
        width: 100%;
    }

    select[name*="fldDOB"],
    select[id*="fldDOB"] {
        display: block !important;
        flex: 1 1 0 !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-bottom: 0 !important;
        min-height: 44px !important;
    }
}

/* ========================================= */
/* Table Heading Size                        */
/* ========================================= */
.modern-table-list thead th {
    font-size: 1.3rem !important; 
}