.sideBarLink {
    display: flex; /* ✅ Makes the icon and text align in a row */
    align-items: center; /* ✅ Ensures vertical alignment */
    padding: 0.5rem 1rem;
    color: #ffffff !important;
    text-decoration: none;
    background-color: #343a40 !important;
    border-radius: 0.25rem;
}

    .sideBarLink:active, .sideBarLink:focus {
        color: #ffffff !important;
        font-weight: bold;
        background-color: #495057 !important;
        text-decoration: none;
    }

    .sideBarLink:hover, .sideBarLink:focus {
        color: #ffffff;
        text-decoration: underline;
    }

    .sideBarLink i {
        margin-right: 8px; /* ✅ Adds space between icon and text */
    }

/*bootstrap css translations*/
/*    Label => .col-form-label */
.wid-label {
    padding-top: calc(0.375rem + 1px); /* Aligns label with input */
    padding-bottom: calc(0.375rem + 1px);
    margin-bottom: 0; /* Removes extra spacing */
    /* font-size: var(--bs-body-font-size);  Matches default text size */
    font-size: 0.75rem !important;
    line-height: var(--bs-body-line-height);
}

/*Input => form-control-sm 6/5/26*/
.wid-input {
    height: 28px !important;
    padding: 0.25rem 0.5rem !important; /* Left & Right padding added */
    font-size: 0.75rem !important;
    line-height: var(--bs-body-line-height-sm);
    border: 1px solid var(--bs-border-color, #ced4da);
    border-radius: var(--bs-border-radius-sm, 0.2rem) !important;
}

/*Select => .form-select-sm */
.wid-select {
    height: var(--bs-form-select-height-sm, calc(1.5rem + 2px)); /* Smaller height */
    padding: var(--bs-form-select-padding-y-sm) var(--bs-form-select-padding-x-sm); /* Adjusted padding */
    font-size: var(--bs-body-font-size-sm); /* Smaller font size */
    line-height: var(--bs-body-line-height-sm);
    border-radius: var(--bs-border-radius-sm); /* Rounded corners */
}

/* Checkbox => .wid-checkBox */
.wid-checkBox {
    width: 1.1em;
    height: 1.1em;
    margin-top: 0.25em;
    vertical-align: middle;
    flex-shrink: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-color: green !important;
    border-radius: 0.25em;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 0%;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}

    .wid-checkBox:checked {
        background-color: var(--bs-primary, #0d6efd);
        border-color: var(--bs-primary, #0d6efd);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M4 10l4.5 4.5L16 7'/%3E%3C/svg%3E");
        background-size: 80%;
    }

    .wid-checkBox:focus {
        outline: 0;
        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    }

    .wid-checkBox:disabled {
        opacity: 0.5;
        pointer-events: none;
    }

.wid-textarea {
    width: 100%; /* Ensures full width */
    height: auto; /* Adjusts height dynamically */
    padding: 0.375rem 0.75rem; /* Matches Bootstrap's default padding */
    font-size: 1rem; /* Standard font size */
    line-height: 1.5;
    /* Border and Border Radius */
    border: 1px solid var(--bs-border-color, #ced4da);
    border-radius: var(--bs-border-radius, 0.25rem);
    /* Background and Focus */
    background-color: var(--bs-body-bg, #fff);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

    .wid-textarea:focus {
        border-color: var(--bs-primary, #0d6efd);
        box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb, 13, 110, 253), 0.25);
    }

/*button*/
.btn-grey {
    color: #fff;
    background-color:gray ;
    border-color: #212529;
    border-radius: var(--bs-border-radius, 0.25rem);
}

    .btn-grey:hover {
        color: #fff;
        background-color: #1c1f23;
        border-color: #1a1e21;
    }



/* ---- Subtables: one colour per kind, on the subtable's bar and on the row button that opened it ----
   (wwwroot/js/subtableColors.js). doc = Documents (blue), cred = Credentials (amber), ben = Beneficiaries (green). */
.subtable-doc  { --st-strong: #0d6efd; --st-tint: #dbe8ff; }
.subtable-cred { --st-strong: #d39e00; --st-tint: #fff0b3; }
.subtable-ben  { --st-strong: #198754; --st-tint: #d4edda; }

/* the subtable: coloured border, and the bar that holds its "Add New ..." button */
.subtable-doc, .subtable-cred, .subtable-ben { border: 1px solid var(--st-strong) !important; border-left-width: 4px !important; }
.subtable-doc > [id^="btnHolder_"],
.subtable-cred > .cred-subtable-toolbar,
.subtable-ben > .ben-subtable-toolbar { background: var(--st-tint); border-radius: 3px; padding: 2px 4px; margin-bottom: 2px; }

/* the row button's cell while its subtable is open */
.tabulator-cell.subtable-open-doc  { background: #dbe8ff !important; box-shadow: inset 0 -3px 0 #0d6efd; }
.tabulator-cell.subtable-open-cred { background: #fff0b3 !important; box-shadow: inset 0 -3px 0 #d39e00; }
.tabulator-cell.subtable-open-ben  { background: #d4edda !important; box-shadow: inset 0 -3px 0 #198754; }