:root {
    --bs-blue: #0d6efd;
    --bs-indigo: #6610f2;
    --bs-purple: #6f42c1;
    --bs-pink: #d63384;
    --bs-red: #dc3545;
    --bs-orange: #fd7e14;
    --bs-yellow: #ffc107;
    --bs-green: #198754;
    --bs-teal: #20c997;
    --bs-cyan: #0dcaf0;
    --bs-white: #fff;
    --bs-gray: #6c757d;
    --bs-gray-dark: #343a40;
    --bs-primary: #198754;/*#0d6efd;*/
    --bs-secondary: #6c757d;
    --bs-success: #198754;
    --bs-info: #0dcaf0;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;
    --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));

    --bs-link-color: #198754;
    --bs-link-color-rgb: 25,135,84;
    /*--bs-link-decoration: underline;*/
    --bs-link-hover-color: #007700;
    --bs-link-hover-color-rgb: 0,119,0;


    --input-invalid-message-en: "Please give the correct input";
    --input-invalid-message-bn: "সঠিক তথ্য দিন";
    --input-invalid-message: var(--input-invalid-message-en);
}
html[lang] {
    --bs-primary: #198754;
    --bs-primary-rgb: 25,135,84;
}

/*html[lang='bn'] {*/
/*    --input-invalid-message: var(--input-invalid-message-bn);*/
/*}*/

.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active,
.btn:hover {
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-bg: transparent;
    --bs-btn-active-border-color: transparent;
}
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #198754;
    --bs-btn-border-color: #198754;
    --bs-btn-disabled-bg: #198754;
    --bs-btn-disabled-border-color: #198754;
    --bs-btn-hover-bg: #007700;
    --bs-btn-hover-border-color: #007700;
    --bs-btn-active-bg: #007700;
    --bs-btn-active-border-color: #007700;
}
.btn-check:checked+.btn-primary, .btn-primary.active, .btn-primary.show, .btn-primary:first-child:active, :not(.btn-check)+.btn-primary:active,
.btn-primary:hover {
    /*--bs-btn-hover-bg: var(--bs-primary);*/
    /*--bs-btn-hover-border-color: var(--bs-primary);*/
    /*--bs-btn-active-bg: var(--bs-primary);*/
    /*--bs-btn-active-border-color: var(--bs-primary);*/
    --bs-btn-hover-bg: #007700;
    --bs-btn-hover-border-color: #007700;
    --bs-btn-active-bg: #007700;
    --bs-btn-active-border-color: #007700;
}
.btn-check:checked+.btn-outline-primary, .btn-outline-primary.active, .btn-outline-primary.show, .btn-outline-primary:first-child:active, :not(.btn-check)+.btn-outline-primary:active,
.btn-outline-primary:hover, .btn-outline-primary {
    --bs-btn-color: #198754;
    /*--bs-btn-bg: #198754;*/
    --bs-btn-border-color: #198754;
    --bs-btn-disabled-bg: #198754;
    --bs-btn-disabled-border-color: #198754;
    --bs-btn-hover-bg: #007700;
    --bs-btn-hover-border-color: #007700;
    --bs-btn-active-bg: #007700;
    --bs-btn-active-border-color: #007700;
    --bs-btn-bg: transparent;
}
.btn-check:checked+.btn-outline-dark, .btn-outline-dark.active, .btn-outline-dark.show, .btn-outline-dark:first-child:active, :not(.btn-check)+.btn-outline-dark:active,
.btn-outline-dark:hover, .btn-outline-dark {
    --bs-btn-color: #000;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #4440;
    --bs-btn-hover-border-color: #000;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #4440;
    --bs-btn-active-border-color: #000;
}
.pagination {
    --bs-pagination-color: #000;
    --bs-pagination-active-bg: #19875488;
    --bs-pagination-active-border-color: #198754;
    --bs-pagination-hover-color: #198754;
}
.dropdown-item {
    --bs-dropdown-item-padding-y: 12px;
    --bs-dropdown-item-padding-x: 16px;
    --bs-dropdown-link-hover-color: #fff;
    --bs-dropdown-link-hover-bg: var(--bs-primary);
    --bs-dropdown-link-active-color: #fff;
    --bs-dropdown-link-active-bg: var(--bs-primary);
}
body {
    min-height: 100vh;
}
.form-check-input:checked {
    background-color: var(--bs-primary)
}
footer {
    background: #1987540D;
}
.btn-fixed-width {
    width: 102px;
    height: 34px;
    font-weight: 500;
}
.shut-off {
    pointer-events: none;
}
.label-icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 5px;
    vertical-align: text-top;
}
span:has(.label-icon) {
    display: inline-block;
    margin-right: 20px;
    font-size: 0.875rem;
    line-height: 1.25rem;
}
.video-card {
    height: 180px;
    background: url('../images/placeholder.png') no-repeat center center #f0f0f0;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    margin-bottom: 20px;
    filter: brightness(0.97);
}
form .form-control {
    /*height: 64px;*/
    min-height: calc(1.5em + 1rem + calc(var(--bs-border-width) * 2));
    padding: 1rem 1rem;
    font-size: 1rem;
    --bs-border-color: #198754;
}
form .form-control input,
form .form-control input:focus,
form .form-control input:hover
{
    outline: none;
    box-shadow: none;
    border: none;
}
form .otp-fake-input {
    width: 64px;
    height: 70px;
}
form .otp-fake-input.otpdesigner__focus__ {
    border: 2px solid var(--bs-border-color);
}
.cover-image {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 165px;
    background: url('../images/placeholder.png') repeat-x center center #f0f0f0;
    /*background-size: cover;*/
    /*object-fit: cover;*/
}
.sidebar-parent {
    display: flex;
    flex-wrap: nowrap;
    height: 100vh;
    /*height: -webkit-fill-available;*/
    max-height: 100vh;
    overflow-x: auto;
    overflow-y: hidden;
}
.sidebar-menu {
    color: var(--bs-white);
    overflow-y: auto;
    flex-wrap: nowrap;
}
.sidebar-menu li a {
    height: 64px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    color: var(--bs-white);
}
.sidebar-menu li a svg,
.sidebar-menu li a img {
    margin-right: 15px;
}
.sidebar-menu li a.nav-link.active {
    background-color: var(--bs-white);
    color: var(--bs-primary);
}
.sidebar-menu li a.nav-link:not(.active):hover {
    background-color: var(--bs-primary);
    color: var(--bs-white);
    text-decoration: underline;
}
.sidebar-menu li a.nav-link.active img {
    background-color: var(--bs-white);
    color: var(--bs-primary);
}
.h-64 {
    height: 64px;
}
.round {
    border-radius: 1000px;
}
.filter-white {
    filter: brightness(100%);
}
.filter-black {
    filter: brightness(0%);
}
.step {
    width: 96px;
    height: 96px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 1000px;
    background-color: var(--bs-primary);
    color: #fff;
}
.step.active~.step {
    background-color: var(--bs-light);
    color: #000;
}
.step~hr {
    border-top: 3px solid var(--bs-primary);
    opacity: 1;
}
.step.active~hr {
    border-top: 3px solid var(--bs-gray);
    opacity: 0.35;
}
.user-form .form-control {
    --bs-border-color: #2222224D;
    height: 64px;
    margin-top: 10px;
    margin-bottom: 20px;
}
.user-form label {
    font-weight: 500;
}
.user-form label .info {
    font-weight: 400;
}
.user-form label .asterisk {
    color: #D7185C;
    /* Keep the required marker on the same line as its label. Long labels
       such as "Class / CGPA / Grade / Division" can fill the column exactly,
       and an ordinary inline asterisk then wraps onto a line by itself.
       Occupying no layout width (position:relative shifts the glyph without
       advancing the line box) means it can never trigger that wrap; the
       glyph is painted into the column gutter instead. */
    display: inline-block;
    width: 0;
    overflow: visible;
    position: relative;
    left: 3px;
    white-space: nowrap;
}
.user-form hr {
    border-color: #8882;
    opacity: 1;
    margin: 10px 12px 20px;
    max-width: calc(100% - 24px);
}
.field-value {
    padding: 0;
    margin: 6px 0 12px;
    /*font-weight: 500;*/
}
 .form-plus {
    flex-grow: 0;
    width: auto;
}
.form-plus::after {
    content: '';
    background: url('../icons/plus_rect.svg') no-repeat center center #fff0;
    background-size: contain;
    width: 48px;
    height: 48px;
    display: block;
    position: relative;
    margin-top: 40px;
    cursor: pointer;
}
.form-plus.cross::after {
    background: url('../icons/cross_circle_red.svg') no-repeat center center #fff0;
    background-size: contain;
}
.file-upload {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}
.file-upload .file-label {
    font-weight: 500;
    white-space: nowrap;
    text-overflow: ellipsis;
    /* flex-grow: 0; */
    max-width: calc(100% - 30px);
    overflow: hidden;
}
.file-upload .file-label img {
    display: inline-block;
    margin: 0 0 2px 10px;
    height: 20px;
    width: 20px;
}
.file-upload:has([disabled]) {
    background-color: var(--bs-secondary-bg);
}
/* A picture field is a small dashed thumbnail drop-zone, deliberately the same
   dashed border, tint and radius as `label.file-upload` so the two upload controls
   read as one family. Empty: a muted glyph over a one-line caption. Filled: the
   preview fills the frame and the caption becomes a strip that fades in on hover,
   so it never covers the image while the user is looking at it. */
.image-upload {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    max-width: 250px;
    height: 104px;
    padding: 10px;
    border: 1px dashed #cbd5e1;
    border-radius: 6px;   /* the same frame as label.file-upload */
    background-color: #f8fafc;
    overflow: hidden;
    margin-top: 10px;
    margin-bottom: 20px;
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.image-upload:hover {
    border-color: var(--bs-primary);
    background-color: #fff;
    box-shadow: 0 4px 12px rgba(25, 135, 84, .08);
}
.image-upload.square {
    max-width: 250px;
}

/* empty state - the camera placeholder is a glyph, not a picture */
.image-upload img {
    object-fit: contain;
    display: block;
    width: 34px;
    height: 34px;
    opacity: .45;
}

/* filled state - `title` is set by the blade for a stored file and by form-logic.js
   the moment a new one is picked, so it marks "there is a real image here" */
.image-upload img[title] {
    width: 100%;
    height: 100%;
    opacity: 1;
    border-radius: 5px;
}
.image-upload .image-label {
    display: block;
    padding: 0;
    text-align: center;
    font-size: .72rem;
    line-height: 1.25;
    font-weight: 500;
    color: #64748b;
    width: 100%;
    user-select: none;
    pointer-events: none;
}

/* once there is a preview the caption stops taking room in the column and becomes
   an overlay strip, revealed on hover so the image stays unobstructed */
.image-upload:has(img[title]) {
    padding: 0;
    border-style: solid;
    background-color: #fff;
}
.image-upload:has(img[title]) .image-label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    padding: 5px 6px;
    background-color: rgba(15, 23, 42, .72);
    color: #fff;
    opacity: 0;
    transition: opacity .2s ease;
}
.image-upload:has(img[title]):hover .image-label {
    opacity: 1;
}
[disabled] ~ .image-label,
.disabled ~ .image-label {
    color: transparent;
}
.form-query {
    margin-top: 10px;
    margin-bottom: 20px;
}
.form-query label {
    display: inline-flex;
    align-items: center;
    margin-right: 50px;
}
.form-query label input {
    width: 32px;
    height: 32px;
    border-radius: 32px;
    appearance: none;
    box-sizing: border-box;
    border: 3px solid #bbb;
    background-color: #eee;
}
.form-query label input:checked {
    border: 5px solid var(--bs-primary);
    background-color: #fff;
}
.user-form .user-datepicker,
.user-form .user-verify {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}
.user-form .user-datepicker img,
.user-form .user-verify svg {
    position: absolute;
    top: 27px;
    width: 24px;
    height: 24px;
    right: 15px;
}
.user-form .user-verify svg {
    top: 30px;
}
.user-form .user-verify .disabled {
    /*filter: brightness(0.9);*/
    background-color: var(--bs-secondary-bg);
}
.user-form .field-value {
    display: none;
}
.user-form.user-read-only .user-verify,
.user-form.user-read-only .user-datepicker,
.user-form.user-read-only .form-plus,
.user-form.user-read-only .asterisk,
.user-form.user-read-only .info,
.user-form.user-read-only .file-upload,
.user-form.user-read-only .image-upload,
.user-form.user-read-only .input-group,
.user-form.user-read-only .form-radio-group,
.user-form.user-read-only .form-control {
    display: none !important;
}
.user-form.user-read-only .field-value {
    display: block !important;
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    min-height: 52px !important;
    padding: 12px 16px !important;
    font-size: 0.95rem !important;
    color: #1e293b !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    word-break: break-word !important;
}

.user-form.user-read-only .field-value.file-upload {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.user-form.user-read-only .field-value.file-upload a.file-label {
    color: var(--bs-primary) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

.user-form.user-read-only .field-value.file-upload a.file-label:hover {
    text-decoration: underline !important;
}

.user-form.user-read-only .field-value.image-upload {
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    min-height: auto !important;
    display: block !important;
}

.user-form.user-read-only .field-value.image-upload img {
    max-width: 150px !important;
    max-height: 150px !important;
    border-radius: 6px !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05) !important;
}

.user-form.user-read-only label.file-upload,
.user-form.user-read-only label.image-upload {
    display: none !important;
}
.user-form.user-read-only .read-only-hidden {
    visibility: hidden;
}

.table thead th {
    border: none;
    box-shadow: none;
    padding: 15px 5px;
    font-size: 18px;
    background-color: var(--bs-primary);
    color: #fff;
}
.table thead th:first-of-type {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}
.table thead th:last-of-type {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}
.table thead th:first-child {
    padding: 15px 5px 15px 30px;
}
.table tbody th,
.table tbody td {
    border: none;
    padding: 15px 5px;
    vertical-align: middle;
}
.table tbody th:first-child,
.table tbody td:first-child {
    padding: 15px 5px 15px 30px;
}
/* ==========================================================================
   Buttons
   --------------------------------------------------------------------------
   One system for the whole admin area. These were flat, fully saturated
   fills - a row of three of them shouted louder than the content, and the
   blue and red owed nothing to the green everything else is built on.

   The shape is: quiet at rest, colour on the way to clicking. Meaning lives
   in the label and a tinted border; the solid fill is the confirmation you
   are about to act.

     .btn-success / .btn-blue   the action someone came for      (green)
     .btn-neutral               ordinary, non-committal          (grey)
     .btn-warning               reversible but worth a pause     (amber)
     .btn-danger / .btn-red     destructive                      (red)

   .btn-blue and .btn-red keep their names because ~20 blades use them; they
   are aliases now rather than colours. New markup should use the semantic
   names.
   ========================================================================== */

:root {
    --ui-btn-radius: .5rem;
    /* Strong enough to read as a control on a tinted surface - a card header
       or a striped table row - not just on white. A quiet button that nobody
       recognises as a button is worse than a loud one. */
    --ui-btn-border: #bcc4d2;
    --ui-btn-ink: #3b4657;
    --ui-btn-ink-strong: #1f2937;
    --ui-btn-surface-hover: #eef1f6;

    --ui-success: #198754;
    --ui-success-ink: #0f5132;
    --ui-warning: #b45309;
    --ui-warning-ink: #92400e;
    --ui-danger: #b42318;
}

/* The solid primary keeps its fill and its own padding - ten edit screens set
   that with utilities - but shares the shape, so it does not sit next to the
   others with a different corner radius. */
.btn-primary {
    border-radius: var(--ui-btn-radius);
    font-weight: 500;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.btn-neutral,
.btn-blue,
.btn-red,
.btn-warning,
.btn-success,
.btn-danger {
    --bs-btn-padding-y: .4rem;
    --bs-btn-padding-x: .9rem;
    font-size: .8875rem;
    font-weight: 500;
    line-height: 1.45;
    border-radius: var(--ui-btn-radius);
    border: 1px solid var(--ui-btn-border);
    /* Explicit white, so the control lifts off whatever sits behind it. */
    background-color: #fff;
    color: var(--ui-btn-ink);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.btn-neutral:not(:disabled),
.btn-blue:not(:disabled),
.btn-red:not(:disabled),
.btn-warning:not(:disabled),
.btn-success:not(:disabled),
.btn-danger:not(:disabled) {
    cursor: pointer;
}

.btn-neutral:hover,
.btn-neutral:focus-visible,
.btn-neutral:active {
    background-color: var(--ui-btn-surface-hover);
    border-color: #98a3b5;
    color: var(--ui-btn-ink-strong);
    box-shadow: 0 1px 3px rgba(16, 24, 40, .12);
}

/* Success / primary action. .btn-blue is an alias: it was never about blue,
   it was about "this is the main thing in the row". */
.btn-success,
.btn-blue,
.btn-success:visited,
.btn-blue:visited {
    color: var(--ui-success-ink);
    border-color: rgba(25, 135, 84, .32);
    background-color: rgba(25, 135, 84, .07);
}

.btn-success:hover,
.btn-success:focus-visible,
.btn-success:active,
.btn-success.active,
.btn-blue:hover,
.btn-blue:focus-visible,
.btn-blue:active,
.btn-blue.active {
    color: #fff;
    background-color: var(--ui-success);
    border-color: var(--ui-success);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .1);
}

/* Reversible, but worth reading twice before clicking. */
.btn-warning,
.btn-warning:visited {
    color: var(--ui-warning-ink);
    border-color: rgba(180, 83, 9, .3);
    background-color: rgba(180, 83, 9, .07);
}

.btn-warning:hover,
.btn-warning:focus-visible,
.btn-warning:active,
.btn-warning.active {
    color: #fff;
    background-color: var(--ui-warning);
    border-color: var(--ui-warning);
}

/* Destructive: readable at rest, unmistakable under the cursor. */
.btn-danger,
.btn-red,
.btn-danger:visited,
.btn-red:visited {
    color: var(--ui-danger);
    border-color: rgba(180, 35, 24, .28);
    background-color: #fff;
}

.btn-danger:hover,
.btn-danger:focus-visible,
.btn-danger:active,
.btn-danger.active,
.btn-red:hover,
.btn-red:focus-visible,
.btn-red:active,
.btn-red.active {
    color: #fff;
    background-color: var(--ui-danger);
    border-color: var(--ui-danger);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .1);
}

.btn-neutral:focus-visible,
.btn-blue:focus-visible,
.btn-red:focus-visible,
.btn-warning:focus-visible,
.btn-success:focus-visible,
.btn-danger:focus-visible {
    outline: 2px solid rgba(25, 135, 84, .35);
    outline-offset: 1px;
}

.table tbody td .btn~.btn {
    margin-left: .4rem;
}

.table tbody td form.d-inline ~ .btn,
.table tbody td .btn ~ form.d-inline {
    margin-left: .4rem;
}

/* A label, not a button: states a fact about the row. */
.ui-badge {
    font-weight: 500;
    background-color: #eef1f6;
    color: #44506a;
}

.user-verify .form-check-input + svg > path + path {
    scale: 0;
}

.user-verify .form-check-input:checked + svg > path + path{
    scale: 1;
}

.user-input-wrapper:has(.input-checkbox) > label {
    opacity: 0;
    pointer-events: none;
    user-select: none;
}

.submitted-form .user-input-wrapper:has(input:invalid)::after {
    content: var(--input-invalid-message);
    color: var(--bs-red);
    display: block;
    transform: translateY(-10px);
    margin-bottom: 10px;
}
.submitted-form .user-input-wrapper:has(input:invalid):has(input[type="file"]:not(input[value=""])):not([error-message])::after {
    display: none;
}

.user-input-wrapper[error-message]::after {
    content: attr(error-message);
    color: var(--bs-red);
    display: block;
    transform: translateY(-10px);
    margin-bottom: 10px;
}
.user-input-wrapper[error-message] .form-control {
    display: block;
    border-color: var(--bs-red);
}

.admin-search .form-control {
    max-width: 300px;
    min-width: 200px;
    font-family: sans-serif;
    padding: 6px 12px !important;
    --bs-border-color: #2222224D;
}

/* Custom Input Group styling for unified text prefix inputs */
.user-form .input-group {
    margin-top: 10px;
    margin-bottom: 20px;
    height: 64px;
    border: 1px solid #2222224D;
    border-radius: 0.375rem;
    overflow: hidden;
    background-color: #fff;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.user-form .input-group:focus-within {
    border-color: #198754;
    box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
}

.user-form .input-group .input-group-text {
    background-color: #f8f9fa;
    border: none;
    border-right: 1px solid #2222224D;
    padding: 0 1rem;
    color: #6c757d;
    font-weight: 500;
    height: 100%;
}

.user-form .input-group .form-control {
    border: none !important;
    height: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 1rem 1rem;
    box-shadow: none !important;
    outline: none !important;
}

@media (min-width: 768px) {
    .user-form .form-plus.col-md-1 {
        width: 8.333333% !important;
        margin-top: 10px;
        margin-bottom: 20px;
        height: 64px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .user-form .form-plus.col-md-1::after {
        margin-top: 0 !important;
    }
}

/* Ensure select2 containers and form-plus buttons are completely hidden in read-only form mode */
.user-form.user-read-only .select2-container,
.user-form.user-read-only .form-plus {
    display: none !important;
}

/* Custom Add Section Buttons */
.add-section-btn {
    border-color: var(--bs-primary) !important;
    color: var(--bs-primary) !important;
    font-weight: 500 !important;
    border-radius: 4px !important;
    padding: 0.375rem 0.75rem !important;
    transition: all 0.25s ease-in-out !important;
    background-color: transparent !important;
}

.add-section-btn:hover {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 6px rgba(25, 135, 84, 0.15) !important;
}

.add-section-btn:active {
    transform: translateY(0) !important;
}

.user-form.user-read-only .add-section-btn {
    display: none !important;
}

.position-relative {
    position: relative !important;
}

/* World Class Section Header Styling */
.user-form h4 {
    color: #2b303a !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding-bottom: 6px !important;
    border-bottom: 2px solid #e9ecef !important;
    margin-bottom: 0.75rem !important;
    margin-top: 1rem !important;
    display: flex !important;
    align-items: center !important;
    position: relative !important;
}

.user-form h4::before {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 60px;
    height: 2px;
    background-color: var(--bs-primary);
    transition: width 0.3s ease;
}

.user-form h4:hover::before {
    width: 100px;
}

/* Modern Card layout for repeatable & grouped sections */
.user-form [data-group] {
    background: #fafafa !important;
    border: 1px solid #e9ecef !important;
    border-radius: 8px !important;
    padding: 40px 20px 0px 20px !important; /* top padding kept at 40px — the absolutely-positioned .form-plus.cross icon overlaps content if reduced, see line below */
    margin-bottom: 14px !important;
    transition: all 0.25s ease-in-out !important;
    position: relative !important;
}

.user-form [data-group]:hover {
    border-color: var(--bs-primary) !important;
    background: #ffffff !important;
    box-shadow: 0 8px 16px rgba(25, 135, 84, 0.06) !important;
}

/* Position cross buttons beautifully in the top-right corner of the cards */
.user-form [data-group] .form-plus.cross {
    position: absolute !important;
    top: 12px !important;
    right: 15px !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
    z-index: 10 !important;
}

.user-form [data-group] .form-plus.cross::after {
    margin-top: 0 !important;
    width: 26px !important;
    height: 26px !important;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.user-form [data-group] .form-plus.cross:hover::after {
    transform: scale(1.15) rotate(90deg) !important;
}

/* Hover effects for normal form-plus buttons */
.form-plus::after {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.form-plus:hover::after {
    transform: scale(1.12) !important;
}

/* Input elements premium styling */
.user-form .form-control,
.user-form .form-select {
    background-color: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    padding: 0.75rem 1rem !important;
    font-size: 0.95rem !important;
    color: #334155 !important;
    height: 52px !important;
    min-height: 52px !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: none !important;
}

.user-form .form-control::placeholder {
    color: #94a3b8 !important;
    opacity: 1 !important;
}

.user-form .form-control:focus,
.user-form .form-select:focus {
    background-color: #ffffff !important;
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 4px rgba(25, 135, 84, 0.12) !important;
    color: #0f172a !important;
    outline: 0 !important;
}

/* Premium styling for file uploads to match inputs */
.user-form label.file-upload {
    background-color: #f8fafc !important;
    border: 1px dashed #cbd5e1 !important;
    border-radius: 6px !important;
    height: 52px !important;
    padding: 0 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    transition: all 0.2s ease-in-out !important;
    cursor: pointer !important;
}

.user-form label.file-upload:hover {
    border-color: var(--bs-primary) !important;
    background-color: #ffffff !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02) !important;
}

/* Label design updates */
.user-form .user-input-wrapper > label {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: #475569 !important;
    margin-bottom: 6px !important;
    display: inline-block !important;
    letter-spacing: 0.2px !important;
}

.user-form .user-input-wrapper > label .asterisk {
    color: var(--bs-red) !important;
    margin-left: 3px !important;
    font-weight: bold !important;
}

.user-form .user-input-wrapper > label .info {
    font-size: 0.75rem !important;
    color: #64748b !important;
    font-weight: normal !important;
    margin-left: 4px !important;
}

/* Select2 enhancements to match custom input designs */
.user-form .select2-container {
    width: 100% !important;
    margin-top: 0px !important;
    margin-bottom: 20px !important;
}

.select2-container--default .select2-selection--single {
    background-color: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    height: 52px !important;
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    transition: all 0.2s ease-in-out !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 50px !important;
    color: #334155 !important;
    padding-left: 16px !important;
    font-size: 0.95rem !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 50px !important;
    display: flex !important;
    align-items: center !important;
    right: 12px !important;
}

.select2-container--default .select2-selection--single .select2-selection__clear {
    position: absolute !important;
    right: 36px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-weight: bold !important;
    color: #94a3b8 !important;
    font-size: 1.15rem !important;
    cursor: pointer !important;
    margin-right: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    transition: color 0.15s ease-in-out !important;
}

.select2-container--default .select2-selection--single .select2-selection__clear:hover {
    color: var(--bs-red) !important;
}

.select2-container--default.select2-container--focus .select2-selection--single {
    background-color: #ffffff !important;
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 4px rgba(25, 135, 84, 0.12) !important;
}

/* Radio group styling */
.user-form .form-radio-group {
    height: 52px !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    display: flex !important;
    align-items: center !important;
}

.user-form .form-check-input:checked {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

.user-form .form-check-input:focus {
    box-shadow: 0 0 0 4px rgba(25, 135, 84, 0.12) !important;
    border-color: var(--bs-primary) !important;
}

.user-form .form-check-label {
    font-size: 0.95rem !important;
    color: #334155 !important;
    font-weight: 500 !important;
}

/* ==========================================================================
   Premium Actions Dropdown & Menu (High-end SaaS styling)
   ========================================================================== */
.btn-action-premium {
    background-color: #ffffff;
    color: var(--bs-primary);
    border: 1.5px solid var(--bs-primary);
    padding: 0.5rem 1.2rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(25, 135, 84, 0.08);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.btn-action-premium:hover, 
.btn-action-premium:focus, 
.btn-action-premium[aria-expanded="true"] {
    background-color: var(--bs-primary);
    color: #ffffff;
    border-color: var(--bs-primary);
    box-shadow: 0 4px 12px rgba(25, 135, 84, 0.2);
}

.btn-action-premium i.action-icon {
    font-size: 0.95rem;
    transition: transform 0.3s ease;
}

.btn-action-premium:hover i.action-icon,
.btn-action-premium[aria-expanded="true"] i.action-icon {
    transform: rotate(45deg);
}

.btn-action-premium::after {
    display: inline-block;
    margin-left: 0.4em;
    vertical-align: 0.255em;
    content: "";
    border-top: 0.35em solid;
    border-right: 0.35em solid transparent;
    border-bottom: 0;
    border-left: 0.35em solid transparent;
    transition: transform 0.25s ease;
}

.btn-action-premium[aria-expanded="true"]::after {
    transform: rotate(180deg);
}

/* Modern floating dropdown menu with static display (forces downward positioning) */
.dropdown-menu-premium {
    display: block !important;
    visibility: hidden;
    opacity: 0;
    transform: translateY(15px) scale(0.95) !important;
    top: 100% !important;
    bottom: auto !important;
    left: auto !important;
    right: 0 !important;
    margin-top: 8px !important;
    pointer-events: none;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 5px 15px rgba(0, 0, 0, 0.05) !important;
    padding: 10px !important;
    min-width: 210px;
    transition: opacity 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    background-color: #ffffff !important;
    z-index: 1050;
}

.dropdown-menu-premium.show {
    visibility: visible;
    opacity: 1;
    transform: translateY(0) scale(1) !important;
    pointer-events: auto;
}

.dropdown-menu-premium .dropdown-item {
    border-radius: 5px !important;
    padding: 10px 14px !important;
    color: #475569 !important;
    font-weight: 500 !important;
    font-size: 0.9rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    transition: all 0.15s ease !important;
}

.dropdown-menu-premium .dropdown-item i {
    font-size: 1.15rem !important;
    transition: transform 0.15s ease !important;
    width: 1.25rem;
    text-align: center;
}

.dropdown-menu-premium .dropdown-item:hover {
    background-color: #f1f5f9 !important;
    color: var(--bs-primary) !important;
}

.dropdown-menu-premium .dropdown-item:hover i {
    transform: scale(1.15);
}

/* Hover color adjustments for approval/rejection items */
.dropdown-menu-premium .item-approve:hover {
    background-color: #f0fdf4 !important;
    color: #16a34a !important;
}

.dropdown-menu-premium .item-reject:hover {
    background-color: #fef2f2 !important;
    color: #dc2626 !important;
}

/* SweetAlert2 Custom Theme Overrides */
.swal2-custom-popup {
    border-radius: 8px !important;
    font-family: inherit !important;
    padding: 1.5rem !important;
}
.swal2-custom-title {
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    padding-top: 10px !important;
}
.swal2-custom-html {
    color: #64748b !important;
    font-size: 0.95rem !important;
}
.swal2-custom-confirm-btn {
    background-color: var(--bs-primary) !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    padding: 10px 24px !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}
.swal2-custom-confirm-btn:hover {
    background-color: #157347 !important; /* darker green */
}
.swal2-custom-cancel-btn {
    background-color: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    padding: 10px 24px !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}
.swal2-custom-cancel-btn:hover {
    background-color: #e2e8f0 !important;
    color: #1e293b !important;
}

/* ==========================================================================
   Premium Actions Toolbar (High-end SaaS design)
   ========================================================================== */
.actions-toolbar-container {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 1rem 1.25rem !important;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.04) !important;
}

.btn-premium-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.55rem 1.25rem;
    border-radius: 6px;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    text-decoration: none !important;
}

/* Back button style */
.btn-premium-back {
    background-color: #ffffff !important;
    color: #475569 !important;
    border-color: #cbd5e1 !important;
}
.btn-premium-back:hover {
    background-color: #f8fafc !important;
    color: #0f172a !important;
    border-color: #94a3b8 !important;
}

/* File Details button style */
.btn-premium-files {
    background-color: #f1f5f9 !important;
    color: #334155 !important;
    border-color: #cbd5e1 !important;
}
.btn-premium-files:hover {
    background-color: #e2e8f0 !important;
    color: #0f172a !important;
    border-color: #94a3b8 !important;
}

/* Admit Card button style */
.btn-premium-admit {
    background-color: #1e293b !important;
    color: #ffffff !important;
}
.btn-premium-admit:hover {
    background-color: #0f172a !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15) !important;
}

/* Approve button style */
.btn-premium-approve {
    background-color: #10b981 !important;
    color: #ffffff !important;
}
.btn-premium-approve:hover {
    background-color: #059669 !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2) !important;
}

/* Reject button style */
.btn-premium-reject {
    background-color: #f43f5e !important;
    color: #ffffff !important;
}
.btn-premium-reject:hover {
    background-color: #e11d48 !important;
    box-shadow: 0 4px 12px rgba(244, 63, 94, 0.2) !important;
}

.sidebar-overlay {
    display: none;
}

/* Responsive Sidebar Styling */
@media (max-width: 991.98px) {
    .sidebar-parent {
        overflow-x: hidden !important;
    }
    #sidebar {
        position: fixed;
        top: 0;
        left: -100%;
        max-width: 100%;
        height: 100vh;
        z-index: 1040;
        transition: left 0.3s ease-in-out;
        box-shadow: 4px 0 15px rgba(0, 0, 0, 0.15);
    }
    #sidebar.show {
        left: 0;
    }
    .sidebar-overlay {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.4);
        z-index: 1030;
        backdrop-filter: blur(2px);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    }
    .sidebar-overlay.show {
        opacity: 1;
        visibility: visible;
    }
}

/* Premium Dashboard CV Button Styles */
.btn-premium-cv {
    background-color: #0d6efd !important;
    color: #ffffff !important;
}
.btn-premium-cv:hover {
    background-color: #0b5ed7 !important;
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.2) !important;
}

/* Home Page Transition Hover Styles */
.transition-hover {
    transition: all 0.3s ease-in-out;
}
.transition-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(25, 135, 84, 0.08) !important;
    border-color: rgba(25, 135, 84, 0.2) !important;
}
.btn-hero-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25) !important;
    background-color: #f1f5f9 !important;
    color: #198754 !important;
}

/* Footer Link Hover Accent Styles */
.footer-link:hover {
    color: #a3e635 !important;
    text-decoration: underline !important;
}

/* Global Navigation Menu Style */
.home-menu a {
    font-weight: 600 !important;
}

/* Premium User Dropdown Badge Trigger Style */
.btn-user-profile {
    display: inline-flex;
    align-items: center;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 6px;
    padding: 6px 16px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #334155;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
    transition: all 0.2s ease-in-out;
}
.btn-user-profile:hover, .btn-user-profile:focus {
    background: #f8fafc;
    border-color: rgba(25, 135, 84, 0.3);
    box-shadow: 0 4px 12px rgba(25, 135, 84, 0.08);
    color: var(--bs-primary);
}

/* Premium Animated User Dropdown Menu Styles */
.dropdown-menu-custom {
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
    padding: 8px 0 !important;
    margin-top: 8px !important;
    display: block !important;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    pointer-events: none;
    transition: all 0.25s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
}

.dropdown-menu-custom.show {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
}

.dropdown-item-custom {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px !important;
    font-size: 0.9rem;
    font-weight: 500;
    color: #475569 !important;
    transition: all 0.2s ease-in-out;
}

.dropdown-item-custom:hover {
    background-color: rgba(25, 135, 84, 0.08) !important;
    color: var(--bs-primary) !important;
}

.dropdown-item-custom svg {
    fill: currentColor;
    width: 18px;
    height: 18px;
    transition: transform 0.2s ease-in-out;
}

.dropdown-item-custom:hover svg {
    transform: scale(1.15);
}

.dropdown-divider-custom {
    height: 1px;
    background-color: rgba(0, 0, 0, 0.06);
    margin: 6px 0;
}

/* Navbar Mobile Responsive Collapsible Overrides */
.navbar-toggler:focus {
    box-shadow: none !important;
}

@media (max-width: 991.98px) {
    .navbar-collapse {
        margin-top: 15px;
        border-top: 1px solid rgba(0, 0, 0, 0.05);
        padding-top: 15px;
    }
    .navbar-nav {
        text-align: center;
        width: 100%;
    }
    .navbar-nav .nav-link {
        padding: 10px 0 !important;
    }
    .navbar-collapse .d-flex.flex-column {
        align-items: center !important;
    }
    .dropdown.me-4 {
        margin-right: 0 !important;
        margin-bottom: 10px;
    }
}

/* Premium Language Toggle Switch Styles */
.lang-toggle-container {
    display: inline-flex;
    background: #f1f5f9;
    padding: 3px;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.lang-toggle-btn {
    padding: 4px 10px;
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none !important;
    border-radius: 4px;
    transition: all 0.2s ease-in-out;
}

.lang-toggle-btn.active {
    background: var(--bs-primary);
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(25, 135, 84, 0.25);
}

.lang-toggle-btn.inactive {
    color: #64748b !important;
}

.lang-toggle-btn.inactive:hover {
    color: var(--bs-primary) !important;
    background: rgba(25, 135, 84, 0.05);
}




/* ==========================================================================
   Profile edit experience  -  /profile/edit/personal  and  /profile/edit/work
   --------------------------------------------------------------------------
   Everything below is scoped to `body:has(.step)`. The `.step` indicator is
   rendered only by components/editprofile.blade.php, which only those two
   pages use, so no other screen (profile view, job application, admin) is
   affected. Presentation only: nothing the JS depends on is removed, and the
   input height / datepicker / verify icon offsets are left untouched.
   ========================================================================== */

/* ---------- motion primitives ---------- */
@keyframes profileSectionIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

@keyframes profileFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes profileStepPulse {
    0%   { box-shadow: 0 0 0 0 rgba(25, 135, 84, .35); }
    70%  { box-shadow: 0 0 0 14px rgba(25, 135, 84, 0); }
    100% { box-shadow: 0 0 0 0 rgba(25, 135, 84, 0); }
}

@keyframes profileFieldShake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-4px); }
    75%      { transform: translateX(4px); }
}

/* ---------- page shell ---------- */
body:has(.step) .row.min-vh-100 > .col-md-9 {
    /* the inline border rule on the markup needs !important to be neutralised */
    border-left: 0 !important;
    padding: 4px 0 40px 28px !important;
}

body:has(.step) .row.min-vh-100 > .col-md-3 {
    padding: 4px 8px 40px 0 !important;
}

/* ---------- side navigation ---------- */
body:has(.step) .col-md-3 > .h3 {
    background-color: var(--bs-primary) !important;
    color: #fff;
    border-radius: 16px !important;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: .01em;
    padding: 22px 18px !important;
    box-shadow: 0 10px 22px rgba(25, 135, 84, .18);
    animation: profileSectionIn .45s cubic-bezier(.22, .61, .36, 1) both;
}

body:has(.step) .col-md-3 > .fw-medium {
    background: #fff;
    border: 1px solid rgba(16, 24, 40, .06);
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(16, 24, 40, .05);
    padding: 10px !important;
    animation: profileSectionIn .45s cubic-bezier(.22, .61, .36, 1) .06s both;
}

body:has(.step) .col-md-3 > .fw-medium a {
    border-radius: 12px;
    margin-bottom: 6px;
    transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}

body:has(.step) .col-md-3 > .fw-medium a:last-child {
    margin-bottom: 0;
}

body:has(.step) .col-md-3 > .fw-medium a:not(.bg-primary):hover {
    background-color: rgba(25, 135, 84, .08);
    opacity: 1;
    transform: translateX(4px);
}

body:has(.step) .col-md-3 > .fw-medium a.bg-primary {
    box-shadow: 0 8px 18px rgba(25, 135, 84, .24);
}

body:has(.step) .col-md-3 > .fw-medium a svg,
body:has(.step) .col-md-3 > .fw-medium a img {
    transition: transform .2s ease;
}

body:has(.step) .col-md-3 > .fw-medium a:hover svg:last-child,
body:has(.step) .col-md-3 > .fw-medium a:hover img:last-child {
    transform: translateX(3px);
}

/* ---------- step indicator ---------- */
body:has(.step) .step {
    width: 78px;
    height: 78px;
    font-weight: 600;
    font-size: .92rem;
    letter-spacing: .01em;
    box-shadow: 0 8px 18px rgba(25, 135, 84, .22);
    transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
    animation: profileSectionIn .45s cubic-bezier(.22, .61, .36, 1) both;
}

body:has(.step) .step.active {
    animation: profileSectionIn .45s cubic-bezier(.22, .61, .36, 1) both,
               profileStepPulse 2.4s ease-out 1s infinite;
}

/* steps after the active one stay muted, exactly as the base theme defines */
body:has(.step) .step.active ~ .step {
    box-shadow: inset 0 0 0 2px rgba(16, 24, 40, .08);
}

body:has(.step) .step:hover {
    transform: translateY(-2px);
}

body:has(.step) .step ~ hr {
    border-radius: 4px;
    transition: border-color .3s ease;
}

/* ---------- page title ---------- */
body:has(.step) .col-md-9 > .row > .col-md-12 > h3 {
    font-weight: 700;
    letter-spacing: -.01em;
    color: #1d2939;
    animation: profileSectionIn .45s cubic-bezier(.22, .61, .36, 1) .08s both;
}

/* ---------- section headings ---------- */
body:has(.step) .user-form > .col-md-12:has(h4) {
    margin-top: 22px;
    margin-bottom: 6px;
}

body:has(.step) .user-form > .col-md-12:first-child:has(h4) {
    margin-top: 0;
}

body:has(.step) .user-form h4 {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0;
    padding-left: 15px;
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: .01em;
    color: #14532d;
}

body:has(.step) .user-form h4::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 22px;
    border-radius: 4px;
    background-color: var(--bs-primary);
}

/* separators are redundant once every section is a card */
body:has(.step) .user-form > hr {
    border: 0;
    height: 0;
    margin: 14px 0 0;
    opacity: 0;
}

/* ---------- section cards ---------- */
body:has(.step) .user-form [data-group] > .row {
    margin: 0 0 14px;
    padding: 20px 12px 4px;
    background: #fff;
    border: 1px solid rgba(16, 24, 40, .07);
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .04);
    transition: border-color .2s ease, box-shadow .2s ease;
    animation: profileSectionIn .4s cubic-bezier(.22, .61, .36, 1) both;
}

body:has(.step) .user-form [data-group] > .row:hover {
    border-color: rgba(25, 135, 84, .26);
    box-shadow: 0 6px 18px rgba(25, 135, 84, .07);
}

body:has(.step) .user-form [data-group] > .row:focus-within {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 3px rgba(25, 135, 84, .10), 0 8px 20px rgba(16, 24, 40, .06);
}

/* a locked default qualification reads as fixed scaffolding, not a removable row */
body:has(.step) .user-form [data-group][data-locked] > .row {
    background-color: #fbfdfc;
    border-left: 3px solid rgba(25, 135, 84, .35);
}

/* ---------- staggered entrance ---------- */
body:has(.step) .user-form > .col-md-12 {
    animation: profileSectionIn .4s cubic-bezier(.22, .61, .36, 1) both;
}

body:has(.step) .user-form > .col-md-12:nth-child(-n+3) { animation-delay: .04s; }
body:has(.step) .user-form > .col-md-12:nth-child(n+4)  { animation-delay: .09s; }
body:has(.step) .user-form > .col-md-12:nth-child(n+8)  { animation-delay: .14s; }
body:has(.step) .user-form > .col-md-12:nth-child(n+12) { animation-delay: .18s; }

/* ---------- labels ---------- */
body:has(.step) .user-form label {
    font-size: .855rem;
    font-weight: 600;
    letter-spacing: .01em;
    color: #475467;
    transition: color .18s ease;
}

body:has(.step) .user-form .user-input-wrapper:focus-within > label {
    color: var(--bs-primary);
}

body:has(.step) .user-form label .info {
    color: #98a2b3;
    font-size: .78rem;
}

/* ---------- inputs ---------- */
body:has(.step) .user-form .form-control,
body:has(.step) .user-form .form-select {
    border-radius: 10px;
    border-color: rgba(34, 34, 34, .18);
    color: #1d2939;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

body:has(.step) .user-form .form-control:hover:not(:disabled):not([readonly]),
body:has(.step) .user-form .form-select:hover:not(:disabled) {
    border-color: rgba(25, 135, 84, .45);
}

body:has(.step) .user-form .form-control:focus,
body:has(.step) .user-form .form-select:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 .2rem rgba(25, 135, 84, .12);
}

body:has(.step) .user-form .form-control::placeholder {
    color: #b7c0cd;
}

/* select2 (language proficiency) lines up with the surrounding fields */
body:has(.step) .select2-container--default .select2-selection--single {
    height: 64px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    border-radius: 10px;
    border-color: rgba(34, 34, 34, .18);
    transition: border-color .18s ease, box-shadow .18s ease;
}

body:has(.step) .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 1.5;
    padding: 0;
}

body:has(.step) .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 62px;
    right: 8px;
}

body:has(.step) .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 .2rem rgba(25, 135, 84, .12);
}

/* ---------- file upload control ----------
   `.user-form label.file-upload` further up this file is written entirely with
   !important, so the overrides below have to match that weight. Only the <label>
   control is targeted here; the sibling `.field-value.file-upload` (the saved-file
   link) is styled separately below. */
body:has(.step) .user-form label.file-upload {
    border: 1.5px dashed rgba(25, 135, 84, .28) !important;
    background-color: #fbfdfc !important;
    /* room for the "saved" tick plus the trailing upload icon */
    padding: 0 16px 0 14px !important;
    gap: 8px;
    transition: border-color .2s ease, background-color .2s ease, transform .2s ease, box-shadow .2s ease !important;
}

body:has(.step) .user-form label.file-upload:hover {
    border-color: var(--bs-primary) !important;
    background-color: #f4faf7 !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(25, 135, 84, .10) !important;
}

/* A flex item defaults to min-width:auto, which beats max-width and lets a long
   stored path push straight out of the control. min-width:0 restores clipping so
   the filename ellipsises instead of overflowing. */
body:has(.step) .user-form label.file-upload .file-label {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    padding-right: 26px;
    font-size: .82rem;
    font-weight: 500;
    color: #475467;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* the green "already uploaded" tick is pinned so the truncated text cannot clip it */
body:has(.step) .user-form label.file-upload .file-label img {
    position: absolute;
    right: 46px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    transition: transform .22s ease;
}

body:has(.step) .user-form label.file-upload > img {
    flex: 0 0 auto;
    transition: transform .22s ease;
}

body:has(.step) .user-form label.file-upload:hover > img {
    transform: translateY(-2px);
}

/* ---------- saved file: view / download ----------
   x-userinput already renders `<div class="field-value file-upload"><a href=...>`
   next to the control whenever a file is stored; `.user-form .field-value` hides it
   in edit mode. Reveal just that one and present it as a download chip. */
body:has(.step) .user-form .field-value.file-upload {
    display: inline-flex;
    align-items: center;
    width: auto;
    max-width: 100%;
    margin: -12px 0 18px;
    padding: 6px 12px;
    background-color: rgba(25, 135, 84, .07);
    border: 1px solid rgba(25, 135, 84, .22);
    border-radius: 8px;
    transition: background-color .2s ease, border-color .2s ease, transform .18s ease;
}

body:has(.step) .user-form .field-value.file-upload:hover {
    background-color: rgba(25, 135, 84, .12);
    border-color: var(--bs-primary);
    transform: translateY(-1px);
}

body:has(.step) .user-form .field-value.file-upload a.file-label {
    max-width: 100%;
    font-size: .82rem;
    font-weight: 600;
    color: #146c43;
    text-decoration: none;
    white-space: nowrap;
}

body:has(.step) .user-form .field-value.file-upload a.file-label::after {
    content: ' \2193';
    font-weight: 700;
}

body:has(.step) .user-form .field-value.file-upload:hover a.file-label {
    text-decoration: underline;
}

/* the sibling icon is an upload arrow - redundant on a download chip */
body:has(.step) .user-form .field-value.file-upload > img {
    display: none;
}

/* ---------- image upload ----------
   The frame itself is styled with the rest of the upload controls further up this
   file; only the profile form's greener tint and hover lift are added here. */
body:has(.step) .user-form .image-upload {
    border-width: 1.5px;
    border-color: rgba(25, 135, 84, .28);
    background-color: #fbfdfc;
}

body:has(.step) .user-form .image-upload:hover {
    border-color: var(--bs-primary);
    background-color: #f4faf7;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(25, 135, 84, .10);
}

body:has(.step) .user-form .image-upload:has(img[title]) {
    background-color: #fff;
}

/* ---------- yes / no and radio groups ---------- */
body:has(.step) .user-form .form-query label input,
body:has(.step) .user-form .form-check-input {
    transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
    cursor: pointer;
}

body:has(.step) .user-form .form-query label:hover input:not(:checked) {
    border-color: rgba(25, 135, 84, .55);
}

body:has(.step) .user-form .form-check-input:focus-visible,
body:has(.step) .user-form .form-query label input:focus-visible {
    box-shadow: 0 0 0 .2rem rgba(25, 135, 84, .18);
    outline: none;
}

/* ---------- add / remove row control ---------- */
body:has(.step) .form-plus::after {
    border-radius: 50%;
    transition: transform .22s cubic-bezier(.22, .61, .36, 1), filter .2s ease;
}

body:has(.step) .form-plus:hover::after {
    transform: scale(1.12) rotate(90deg);
    filter: drop-shadow(0 4px 8px rgba(25, 135, 84, .28));
}

body:has(.step) .form-plus.cross:hover::after {
    filter: drop-shadow(0 4px 8px rgba(220, 53, 69, .28));
}

body:has(.step) .form-plus:active::after {
    transform: scale(.96);
}

/* ---------- "add section" buttons ---------- */
body:has(.step) .add-section-btn {
    border-radius: 999px;
    font-weight: 600;
    padding: .38rem .95rem;
    transition: transform .18s ease, box-shadow .2s ease, background-color .2s ease;
}

body:has(.step) .add-section-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(25, 135, 84, .18);
}

body:has(.step) .add-section-btn:active {
    transform: translateY(0);
}

/* ---------- action bar ---------- */
body:has(.step) .user-form > .d-flex.justify-content-end {
    margin-top: 28px !important;
    padding: 18px;
    background: #fff;
    border: 1px solid rgba(16, 24, 40, .07);
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .04);
    animation: profileFadeIn .5s ease .2s both;
}

body:has(.step) .user-form > .d-flex.justify-content-end .btn,
body:has(.step) .user-form > .d-flex.justify-content-end input[type="submit"] {
    border-radius: 10px;
    font-weight: 600;
    transition: transform .16s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
}

body:has(.step) .user-form > .d-flex.justify-content-end .btn:hover,
body:has(.step) .user-form > .d-flex.justify-content-end input[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(16, 24, 40, .14);
}

body:has(.step) .user-form > .d-flex.justify-content-end .btn:active,
body:has(.step) .user-form > .d-flex.justify-content-end input[type="submit"]:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(16, 24, 40, .12);
}

/* ---------- validation feedback ---------- */
body:has(.step) .user-input-wrapper[error-message]::after,
body:has(.step) .submitted-form .user-input-wrapper:has(input:invalid)::after {
    font-size: .8rem;
    font-weight: 500;
    line-height: 1.35;
}

body:has(.step) .user-input-wrapper[error-message] .form-control,
body:has(.step) .user-input-wrapper[error-message] .form-select {
    box-shadow: 0 0 0 .2rem rgba(220, 53, 69, .10);
    animation: profileFieldShake .3s ease both;
}

/* ---------- focus visibility ---------- */
body:has(.step) a:focus-visible,
body:has(.step) .btn:focus-visible,
body:has(.step) input[type="submit"]:focus-visible,
body:has(.step) .file-upload:focus-within,
body:has(.step) .image-upload:focus-within {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

/* ---------- tablet ---------- */
@media (max-width: 991.98px) {
    body:has(.step) .row.min-vh-100 > .col-md-9 {
        padding: 4px 0 32px !important;
    }

    body:has(.step) .row.min-vh-100 > .col-md-3 {
        padding: 4px 0 20px !important;
    }

    body:has(.step) .step {
        width: 66px;
        height: 66px;
        font-size: .84rem;
    }
}

/* ---------- mobile ---------- */
@media (max-width: 575.98px) {
    body:has(.step) .col-md-3 > .h3 {
        font-size: 1rem;
        padding: 16px 14px !important;
    }

    body:has(.step) .step {
        width: 56px;
        height: 56px;
        font-size: .72rem;
        text-align: center;
        line-height: 1.1;
    }

    body:has(.step) .user-form h4 {
        font-size: .95rem;
    }

    body:has(.step) .user-form [data-group] > .row {
        padding: 16px 8px 2px;
        border-radius: 12px;
    }

    body:has(.step) .user-form > .d-flex.justify-content-end {
        flex-direction: column-reverse;
        gap: 10px;
        padding: 14px;
    }

    body:has(.step) .user-form > .d-flex.justify-content-end .btn,
    body:has(.step) .user-form > .d-flex.justify-content-end input[type="submit"] {
        width: 100%;
        margin-right: 0 !important;
    }
}

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
    body:has(.step) *,
    body:has(.step) *::before,
    body:has(.step) *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

/* ============================================================
   Repeater rows: one baseline per row, compact upload controls
   ------------------------------------------------------------
   The blocks further up this file are written with !important and
   `body:has(.step)` specificity, so the overrides here have to match that
   weight. Everything below is scoped to `.user-form`, so admin screens and the
   rest of the site are untouched.
   ============================================================ */

/* ---------- one baseline per row ----------
   Captions are inline-block, so a long one ("Class / CGPA / Grade / Division",
   "Photo (Please upload passport size photo (2mb))") wraps to a second line and
   used to push its own control below its neighbours'. Reserving two lines for
   every caption in a repeater row keeps the controls on a single baseline
   whether the caption needs one line or two. */
.user-form [data-group] > .row {
    --caption-h: 42px;  /* two lines of the caption's 21px line-height */
    --control-gap: 10px; /* the gap every control keeps below its caption */
}

.user-form [data-group] > .row > .user-input-wrapper > label:first-child {
    /* block, not the inherited inline-block: an inline-block caption is baseline
       aligned inside its line box, which shifted one- and two-line captions
       relative to each other by a couple of pixels */
    display: block !important;
    min-height: var(--caption-h);
    /* the caption's own bottom margin is dropped so the gap under it comes from a
       single source - the control's margin-top below. Margins collapse against a
       plain <input> but not against the flex `label.file-upload`, which is what
       left the certificate upload sitting 6px lower than its neighbours. */
    margin-bottom: 0 !important;
}

.user-form [data-group] > .row > .user-input-wrapper > .form-control,
.user-form [data-group] > .row > .user-input-wrapper > .form-select,
.user-form [data-group] > .row > .user-input-wrapper > label.image-upload,
.user-form [data-group] > .row > .user-input-wrapper > .select2-container {
    margin-top: var(--control-gap) !important;
}

/* ---------- the "add row" control ----------
   `.form-plus::after` floats the icon on a bare 40px top margin, which does not
   line up with the control band now that captions reserve two lines - it sat above
   the fields it belongs next to. Skipping the caption height puts the icon in the
   same 52px band as the inputs, and centring it there keeps it there whatever the
   band contains. `.cross` is excluded: it is absolutely positioned in the card's
   top-right corner by the rules further up. */
.user-form [data-group] > .row > .form-plus:not(.cross) {
    height: 52px;
    margin-top: calc(var(--caption-h) + var(--control-gap));
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* the language rows set `align-items-end` on the row itself */
    align-self: flex-start;
}

.user-form [data-group] > .row > .form-plus:not(.cross)::after {
    margin-top: 0 !important;
}

/* `.user-form .user-input-wrapper > label` forces `display: inline-block !important`
   to style the field caption, but it also matches the `label.image-upload` control
   next to it. As an inline-block the tall picture frame shared a line box with the
   caption, baseline aligning them so the caption dropped to the bottom of the frame
   (and the two frames in a row started at different heights). `label.file-upload`
   already re-declares flex further up; the picture frame needs the same. */
.user-form:not(.user-read-only) .user-input-wrapper > label.image-upload {
    /* `:not(.user-read-only)` matters: without it this rule outweighs
       `.user-form.user-read-only label.image-upload { display: none }` and the
       upload frames reappear next to the previews on the profile view page. */
    display: flex !important;
}

/* ---------- an oversized pick shows on the control, not just in a toast ----------
   `.user-input-wrapper[error-message]` already prints the message underneath (see
   the rule further up), and form-logic.js sets that attribute the moment a too-large
   file is picked. The upload frames declare their border with !important, so the red
   state has to be restated - and the `body:has(.step)` copy is needed because that
   prefix outweighs a plain `.user-form ...` selector on the profile form. */
.user-form .user-input-wrapper[error-message] > label.file-upload,
.user-form .user-input-wrapper[error-message] > label.image-upload,
body:has(.step) .user-form .user-input-wrapper[error-message] > label.file-upload,
body:has(.step) .user-form .user-input-wrapper[error-message] > label.image-upload {
    border-color: var(--bs-red) !important;
    background-color: #fff5f6 !important;
}

/* upload frames have no bottom margin to absorb the -10px lift text inputs use */
.user-input-wrapper[error-message]:has(> label.file-upload)::after,
.user-input-wrapper[error-message]:has(> label.image-upload)::after {
    transform: none;
    margin-top: 6px;
}

/* the read-only preview matches the frame the edit form uses */
.user-form.user-read-only .field-value.image-upload img {
    max-width: 250px !important;
    max-height: 104px !important;
}

/* Footer institute name.
   The full name must sit on one line. Its column is col-lg-5, whose pixel
   width jumps at Bootstrap's fixed container widths rather than scaling
   smoothly, so a vw-based size overflows at the low end of each range.
   Sizes below are picked per breakpoint from the measured text width
   (~29.4px per 1px of font-size, plus 18px of letter-spacing).
   Under 992px the column is half-width or full-width, where one line would
   be unreadably small, so the name is allowed to wrap there as before. */
.footer-institute-name {
    color: #ffffff;
    letter-spacing: 0.4px;
    line-height: 1.4;
    font-size: 1.25rem;
}

@media (min-width: 992px) {
    .footer-institute-name {
        white-space: nowrap;
        font-size: 0.72rem;   /* col-lg-5 inner ~376px */
    }
}

@media (min-width: 1200px) {
    .footer-institute-name {
        font-size: 0.875rem;  /* col-lg-5 inner ~451px */
    }
}

@media (min-width: 1400px) {
    .footer-institute-name {
        font-size: 1.05rem;   /* col-lg-5 inner ~526px */
    }
}

/* ---------- select2 wrapper vs. Bootstrap's .form-select ----------
   Select2 copies the original <select>'s class list onto the container it
   generates, so `form-select form-control` end up on the WRAPPER. Bootstrap
   then paints its own padding, border and dropdown chevron around the real
   control: a second box, with the selection pushed 16px right and 12px down
   and 32px narrower than its column. Strip that decoration from the wrapper -
   `.select2-selection` inside it already draws the field. Height is left
   alone so the wrapper keeps the 52px control height of its neighbours. */
.user-form .select2-container.form-select,
.user-form .select2-container.form-control {
    padding: 0 !important;
    border: 0 !important;
    background-image: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* ---------- applications toolbar ----------
   Replaces a flat row of identically-weighted buttons. Two bands: a header
   carrying identity + filters + a single primary "Export" menu, and a
   contextual bulk bar that is only rendered once rows are selected. */
.app-toolbar {
    background: #ffffff;
    border: 1px solid rgba(34, 34, 34, .10);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    /* No overflow:hidden here. It would clip any popup that leaves the card -
       that is what truncated the old export menu to its first item. The bulk
       bar rounds its own bottom corners instead. */
}

.app-toolbar__head {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    flex-wrap: wrap;
}

.app-toolbar__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    flex: 0 0 auto;
    border: 1px solid rgba(34, 34, 34, .12);
    border-radius: 9px;
    color: #475467;
    cursor: pointer;
}

.app-toolbar__back:hover {
    background: #f2f4f7;
    color: #101828;
}

.app-toolbar__title {
    min-width: 0;
    margin-right: auto;
}

.app-toolbar__title h4 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #101828;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-toolbar__title span {
    display: block;
    font-size: .8rem;
    color: #667085;
    margin-top: 2px;
}

.app-toolbar__filters {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* The form-wide 64px/52px control height is far too tall for a toolbar. */
.app-toolbar__gender,
.app-toolbar__search {
    height: 38px !important;
    margin: 0 !important;
    font-size: .9rem;
    border-radius: 9px;
}

.app-toolbar__gender { width: 140px; }
.app-toolbar__search { width: 240px; max-width: 240px; }

.app-toolbar__filters .btn {
    height: 38px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    font-size: .9rem;
    white-space: nowrap;
}

/* ---- contextual bulk bar ---- */
.app-toolbar__bulk {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 11px 16px;
    background: #f0f7f3;
    border-top: 1px solid rgba(25, 135, 84, .18);
}

.app-toolbar__count {
    font-size: .875rem;
    color: #1b4332;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.app-toolbar__count strong { font-weight: 700; }

.app-toolbar__bulk-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.app-toolbar__bulk-actions .btn {
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.app-toolbar__clear {
    margin-left: auto;
    text-decoration: none;
    color: #667085;
}

.app-toolbar__clear:hover { color: #101828; text-decoration: underline; }

@media (max-width: 767.98px) {
    .app-toolbar__title { margin-right: 0; width: 100%; order: -1; }
    .app-toolbar__filters { width: 100%; }
    .app-toolbar__search { width: 100%; max-width: none; flex: 1 1 160px; }
    .app-toolbar__clear { margin-left: 0; }
}

/* ---------- toolbar button hover states ----------
   `.btn:hover` near the top of this file forces --bs-btn-hover-bg to
   transparent for EVERY button, and the app only restores it for
   btn-primary / btn-outline-primary / btn-outline-dark / btn-danger.
   Anything else - btn-success and btn-outline-secondary here - hovers to a
   transparent background while keeping white text, so the button vanishes.
   These rules give the toolbar's buttons their own hover palette. Scoped to
   .app-toolbar so no other page's buttons change. */
.app-toolbar .btn-success,
.app-toolbar .btn-success:hover,
.app-toolbar .btn-success:active,
.app-toolbar .btn-success:focus {
    --bs-btn-color: #fff;
    --bs-btn-bg: #157347;
    --bs-btn-border-color: #157347;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #11603a;
    --bs-btn-hover-border-color: #11603a;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0e5231;
    --bs-btn-active-border-color: #0e5231;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #157347;
    --bs-btn-disabled-border-color: #157347;
}

.app-toolbar .btn-outline-secondary,
.app-toolbar .btn-outline-secondary:hover,
.app-toolbar .btn-outline-secondary:active,
.app-toolbar .btn-outline-secondary:focus {
    --bs-btn-color: #475467;
    --bs-btn-border-color: #c6ccd5;
    --bs-btn-hover-color: #101828;
    --bs-btn-hover-bg: #eaecf0;
    --bs-btn-hover-border-color: #98a2b3;
    --bs-btn-active-color: #101828;
    --bs-btn-active-bg: #dfe3e8;
    --bs-btn-active-border-color: #98a2b3;
    --bs-btn-disabled-color: #98a2b3;
    --bs-btn-disabled-border-color: #dfe3e8;
}

.app-toolbar .btn-primary,
.app-toolbar .btn-primary:hover,
.app-toolbar .btn-primary:active,
.app-toolbar .btn-primary:focus {
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #007700;
    --bs-btn-hover-border-color: #007700;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #006a00;
    --bs-btn-active-border-color: #006a00;
}

/* A disabled bulk action must still read as disabled rather than simply
   looking like an enabled button that ignores clicks. */
.app-toolbar .btn:disabled,
.app-toolbar .btn.disabled {
    opacity: .45;
    cursor: not-allowed;
}

/* Downloads band: always-visible report/export actions. Outline styling so
   they read as secondary to the bulk actions without being hidden away. */
.app-toolbar__downloads {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 0 16px 14px;
}

.app-toolbar__downloads .btn {
    height: 38px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .875rem;
    white-space: nowrap;
}

.app-toolbar__downloads .btn i { font-size: .95rem; }

@media (max-width: 575.98px) {
    .app-toolbar__downloads .btn { width: 100%; justify-content: center; }
}

/* Downloads band: always-visible report/export actions. These are used on
   nearly every visit, so they stay on the page rather than behind a menu.
   Outline styling keeps them from competing with the bulk actions below. */
.app-toolbar__downloads {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 0 16px 14px;
}

.app-toolbar__downloads .btn {
    height: 38px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .875rem;
    white-space: nowrap;
}

.app-toolbar__downloads .btn i { font-size: .95rem; }

/* Keeps the tinted bulk bar inside the card's rounded corners now that the
   card no longer clips its children. */
.app-toolbar__bulk {
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

@media (max-width: 575.98px) {
    .app-toolbar__downloads .btn { width: 100%; justify-content: center; }
}

/* Auth forms: phone country-code badge, password strength hint, eye toggle */
.phone-prefix {
    color: rgba(0, 0, 0, .5);
    border-right: 1px solid rgba(0, 0, 0, .1);
    padding-right: 8px;
    margin-right: 4px;
}

.password-hint {
    font-size: .8rem;
    margin: 4px 0 4px 4px;
}

.toggle-password-visibility {
    cursor: pointer;
    color: rgba(0, 0, 0, .4);
    margin-left: auto;
    display: inline-flex;
    align-items: center;
}

.toggle-password-visibility .eye-closed { display: none; }
.toggle-password-visibility.is-visible .eye-open { display: none; }
.toggle-password-visibility.is-visible .eye-closed { display: inline-block; }