:root {
    --tblr-primary: #0171f7;
    --tblr-primary-rgb: 1, 113, 247;
    --tblr-secondary: #6782bd;
    --tblr-success: #2fb344;
    --tblr-success-dark: #0d8026;
    --tblr-info: #2ab2df;
    --tblr-warning: #f76707;
    --tblr-danger: #d63939;
    --tblr-light: #f6f8fb;
    --tblr-purple: #8b5cf6;
    --tblr-dark: #182433;
    --tblr-muted: #6c7a91;
    --adv-secondary: #699ad1;
    --adv-text-secondary: #699ad1;
    --tblr-body-font-size: clamp(17px, 0.85vw + 4px, 30px);
    --tblr-font-sans-serif:
        "Montserrat", -apple-system, BlinkMacSystemFont, San Francisco,
        Segoe UI, Roboto, Helvetica Neue, sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.text-success-dark {
    color: var(--tblr-success-dark) !important;
}

*,
html,
#sidebar-menu,
.navbar {
    scrollbar-width: thin;
    scrollbar-color: #0b75ba transparent;
}

body {
    font-feature-settings: "cv03", "cv04", "cv11";
    background-color: #f5f5f5;
}

html.lang-en body {
    font-family: "Montserrat", sans-serif;
    letter-spacing: 0;
}

html.lang-ar body {
    direction: rtl;
    font-family: "Noto Sans Arabic", "Tahoma", sans-serif;
    letter-spacing: 0;
    line-height: 1.75;
}

html.lang-ar .page-title,
html.lang-ar .card-title,
html.lang-ar .page-pretitle,
html.lang-ar .btn,
html.lang-ar .form-label,
html.lang-ar .nav-link,
html.lang-ar .dropdown-item {
    font-family: "Noto Sans Arabic", "Tahoma", sans-serif;
}

html.lang-ar .text-end {
    text-align: left !important;
}

html.lang-ar .text-start {
    text-align: right !important;
}

html.lang-ar .me-1 {
    margin-left: 0.25rem !important;
    margin-right: 0 !important;
}

html.lang-ar .me-2 {
    margin-left: 0.5rem !important;
    margin-right: 0 !important;
}

html.lang-ar .me-3 {
    margin-left: 1rem !important;
    margin-right: 0 !important;
}

html.lang-ar .me-4 {
    margin-left: 1.5rem !important;
    margin-right: 0 !important;
}

html.lang-ar .me-5 {
    margin-left: 3rem !important;
    margin-right: 0 !important;
}

html.lang-ar .ms-1 {
    margin-left: 0 !important;
    margin-right: 0.25rem !important;
}

html.lang-ar .ms-2 {
    margin-left: 0 !important;
    margin-right: 0.5rem !important;
}

html.lang-ar .ms-3 {
    margin-left: 0 !important;
    margin-right: 1rem !important;
}

html.lang-ar .ms-4 {
    margin-left: 0 !important;
    margin-right: 1.5rem !important;
}

html.lang-ar .ms-5 {
    margin-left: 0 !important;
    margin-right: 3rem !important;
}

html.lang-ar .dropdown-menu-end {
    left: 0 !important;
    right: auto !important;
}

html.lang-zh body {
    font-family: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif;
    letter-spacing: 0;
    line-height: 1.65;
}

html.lang-zh .page-title,
html.lang-zh .card-title,
html.lang-zh .page-pretitle,
html.lang-zh .btn,
html.lang-zh .form-label,
html.lang-zh .nav-link,
html.lang-zh .dropdown-item {
    font-family: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif;
}

html.lang-zh .table,
html.lang-zh .form-control,
html.lang-zh .form-select {
    line-height: 1.65;
}

body[data-bs-theme="dark"] {
    background-color: #182433;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
}

.form-label,
.col-form-label {
    color: #2c4276;
}

body[data-bs-theme="dark"] .form-label,
body[data-bs-theme="dark"] .col-form-label {
    color: #fff;
}

.navbar {
    --tblr-navbar-active-border-color: transparent;
}

header.navbar {
    background:
        linear-gradient(
            135deg,
            transparent 0%,
            transparent 32%,
            rgba(205, 232, 246, 0.35) 32%,
            rgba(205, 232, 246, 0.35) 50%,
            transparent 50%
        ),
        linear-gradient(
            135deg,
            transparent 0%,
            transparent 62%,
            rgba(220, 241, 250, 0.45) 52%,
            rgba(220, 241, 250, 0.45) 70%,
            transparent 80%
        ),
        linear-gradient(90deg, #f8fcff 0%, #eef8fc 45%, #eaf7fc 100%);
    min-height: 3.5rem;
    position: sticky;
    top: 0;
    z-index: 999;
}

.navbar-brand {
    justify-content: center;
    width: 100%;
    padding: 0.75rem 0;
}

[data-bs-theme="dark"] .navbar-brand {
    background: #182433;
}

aside .navbar-brand {
    background: #f2f2f2;
}

[data-bs-theme="dark"] aside .navbar-brand {
    background: #151f2c;
}

header .navbar-brand {
    display: inline-flex;
    width: unset;
    padding: 0.75rem 0;
}

.navbar-brand-image {
    /* height: 3.3rem; */
    height: 2rem;
    outline: transparent;
}

/* [data-bs-theme="dark"] .navbar-brand-image {
  filter: grayscale(1) brightness(10);
} */

[data-bs-theme="dark"] #sidebar-menu .navbar-nav .nav-item .nav-link,
[data-bs-theme="dark"] #sidebar-menu .navbar-nav .dropdown-menu .dropdown-item {
    color: #fff;
}

[data-bs-theme="dark"] .auth-footer {
    background: #151f2c;
    color: #fff;
    border-top: 2px dotted #25384f;
}

/* [data-bs-theme="dark"] .auth-footer img {
  filter: grayscale(1) brightness(10);
} */

.navbar .navbar-nav .nav-link {
    border-radius: 0 !important;
}

.navbar .navbar-nav .nav-link .badge {
    top: 0.45rem;
    right: 0.7rem;
}

.navbar-vertical.navbar-expand-lg {
    overflow-y: unset;
    display: flex;
    flex-direction: column;
}

.navbar-vertical.navbar-expand-lg
    .navbar-collapse
    .navbar-nav
    .nav-link
    i:before {
    vertical-align: sub;
}

.navbar-vertical.navbar-expand-lg #sidebar-menu .navbar-nav {
    padding-top: 0 !important;
}

#sidebar-menu {
    background: #fff;
    border-right: 1px solid #dce1e7;
    padding-bottom: 80px;
    font-size: 0.9rem;
    flex: 1 1 auto;
    overflow-y: auto;
}

[data-bs-theme="dark"] #sidebar-menu {
    background: inherit;
}

#sidebar-menu .navbar-nav .nav-item .nav-link {
    border-bottom: 1px solid #ddd;
    color: #282828;
    font-size: 0.85rem;
    font-weight: 500;
}

#sidebar-menu .navbar-nav .nav-item .nav-link i {
    display: flex;
    align-items: center;
}

[data-bs-theme="dark"] #sidebar-menu .navbar-nav .nav-item .nav-link {
    border-bottom: 1px solid var(--tblr-border-color);
}

[data-bs-theme="dark"]
    #sidebar-menu
    .navbar-nav
    .nav-item:first-child
    .nav-link {
    border-top: 1px solid var(--tblr-border-color);
}

#sidebar-menu .navbar-nav .dropdown-menu .dropdown-item {
    border-bottom: 1px solid #ddd;
    color: #282828;
    white-space: normal;
}

[data-bs-theme="dark"] #sidebar-menu .navbar-nav .dropdown-menu .dropdown-item {
    border-bottom: 1px solid var(--tblr-border-color);
}

#sidebar-menu .nav-link:focus,
#sidebar-menu .nav-link:hover,
#sidebar-menu .nav-link:active,
#sidebar-menu .nav-item.active > .nav-link {
    background: #71be43;
    color: #fff !important;
}

.navbar-vertical .nav-item.active > .nav-link .nav-link-icon {
    color: #f5f5f5 !important;
}

/* Sidebar Dropdown Fix */
.navbar-vertical .nav-item.dropdown {
    position: relative;
}

/* .navbar-vertical .nav-item.dropdown.show .dropdown-menu {
  display: block !important;
} */

.navbar-vertical .dropdown-menu {
    position: static;
    width: 100%;
    border: 0;
    box-shadow: none;
}

/* Highlight active dropdown parent */
.navbar-vertical .nav-item.dropdown.active > .nav-link,
.navbar-vertical .nav-item.dropdown.show > .nav-link {
    background-color: rgba(21, 55, 157, 0.1);
    color: var(--tblr-primary);
}

/* Ensure active parent menu is always highlighted */
.navbar-vertical .nav-item.dropdown.active {
    background-color: rgba(21, 55, 157, 0.05);
}

/* Active dropdown item styling */
.navbar-vertical .dropdown-item.active {
    background: linear-gradient(180deg, #0e4860, #17634f) !important;
    color: var(--tblr-white) !important;
    padding-left: calc(1rem - 3px);
}

.navbar-vertical .dropdown-item.active:hover,
.navbar-vertical .dropdown-item:hover {
    background: #71be43;
    color: var(--tblr-white) !important;
    padding-left: calc(1rem - 3px);
}

.notification-dropdown {
    height: 400px;
    overflow-y: auto;
}

.auth-footer {
    background: #f6f8fb;
    color: #222;
    border-top: 2px dotted #ddd;
    font-size: 0.85rem;
    max-width: 100% !important;
}

.auth-footer img {
    height: 15px;
    margin-left: 10px;
}

.theme-logo-dark {
    display: none;
}

[data-bs-theme="dark"] .theme-logo-light {
    display: none;
}

[data-bs-theme="dark"] .theme-logo-dark {
    display: inline-block;
}

.input-icon .form-control:not(:first-child),
.input-icon .form-select:not(:last-child) {
    padding-left: 3rem;
}

/* Backend Landing Starts */
.section-title {
    color: #0b75ba;
}

.feature-card,
.product-card {
    background: #ffffff;
    border: 1px solid #eee;
    border-radius: 12px;
    text-align: center;
    padding: 25px 10px;
    transition: 0.3s ease;
    height: 100%;
}

.feature-card:hover,
.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.feature-icon {
    font-size: 40px;
    color: #0d6efd;
    margin-bottom: 10px;
}

.feature-title {
    color: #0d6efd;
    font-weight: 500;
}

.product-card img {
    max-width: 100%;
    height: 60px;
    object-fit: contain;
}

.page-wrapper {
    background:
        linear-gradient(
            255deg,
            transparent 0%,
            transparent 32%,
            rgba(205, 232, 246, 0.35) 42%,
            rgba(205, 232, 246, 0.35) 20%,
            transparent 50%
        ),
        linear-gradient(
            193deg,
            transparent 0%,
            transparent 62%,
            rgba(220, 241, 250, 0.45) 52%,
            rgba(220, 241, 250, 0.45) 70%,
            transparent 80%
        ),
        linear-gradient(90deg, #f8fcff 0%, #eef8fc 45%, #eaf7fc 100%);
}

/* Backend Landing Ends */
div.dt-container .dt-paging .dt-paging-button.current,
div.dt-container .dt-paging .dt-paging-button.current:hover {
    background: #0d76bb;
    color: #fff !important;
}

/* Listing tables: readable headers (Status, not STATUS) */
.table.common-datatable thead th {
    text-transform: none;
    letter-spacing: normal;
}

/* Prevent unwanted wrapping of codes, phone numbers, and badges */
.table.common-datatable th,
.table.common-datatable td {
    white-space: nowrap;
}

/* Serial (#) column left aligned on all listing pages */
.table.common-datatable thead th:first-child,
.table.common-datatable tbody td:first-child {
    text-align: left !important;
}

/* Gap between page-length dropdown and "entries per page" */
div.dt-container .dt-length {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: medium;
}

div.dt-container .dt-length label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0;
    color: #000;
    font-weight: 500;
}

body[data-bs-theme="dark"] div.dt-container .dt-length label {
    color: #fff;
    font-weight: 500;
}

div.dt-container .dt-length select {
    margin-right: 0.1rem;
    display: inline-block;
    color: #000;
    font-weight: 500;
}

body[data-bs-theme="dark"] div.dt-container .dt-length select {
    background-color: #151f2c !important;
    color: #fff;
    font-weight: 500;
}

div.dt-container .dt-length,
div.dt-container .dt-search,
div.dt-container .dt-info,
div.dt-container .dt-processing,
div.dt-container .dt-paging {
    color: #000;
    font-size: medium;
}

body[data-bs-theme="dark"] div.dt-container .dt-length,
body[data-bs-theme="dark"] div.dt-container .dt-search,
body[data-bs-theme="dark"] div.dt-container .dt-info,
body[data-bs-theme="dark"] div.dt-container .dt-processing,
body[data-bs-theme="dark"] div.dt-container .dt-paging {
    color: #fff;
}

.table .table-empty-state {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 178px;
    padding: 1rem;
    text-align: center;
    white-space: normal;
}

.table .table-empty-state__icon {
    align-items: center;
    background: #e7f2ff;
    border-radius: 50%;
    color: #1b7ff8;
    display: flex;
    font-size: 2.5rem !important;
    height: 6.25rem;
    justify-content: center;
    margin-bottom: 0.75rem;
    width: 6.25rem;
}

.table .table-empty-state__title {
    font-weight: 500;
    font-size: var(--tblr-font-size-h2) !important;
    line-height: var(--tblr-line-height-h2);
}

body[data-bs-theme="dark"] .table .table-empty-state__title {
    color: #fff;
}

.table .table-empty-state__subtitle {
    color: rgba(var(--tblr-muted-rgb), var(--tblr-text-opacity)) !important;
    font-size: 0.8rem !important;
    line-height: 1.4;
    margin-top: 0.25rem;
}

.page-header > .row > .col-auto {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.page-header > .row > .col-auto > .d-flex {
    align-items: flex-end !important;
    flex-direction: column;
    width: 100%;
}

.page-header > .row > .col-auto > .d-flex > .breadcrumb {
    order: 1;
}

.page-header > .row > .col-auto > .d-flex > .btn,
.page-header > .row > .col-auto > .d-flex > .btn-group {
    order: 2;
}

.job-application-show {
    color: #17233f;
}

.job-application-show__header {
    border-bottom: 1px solid #e5edf7;
    padding-bottom: 1rem;
}

.job-application-show__header .page-pretitle {
    color: #5578bd;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.job-application-show__header .page-title {
    color: #10235e;
    font-weight: 700;
}

.job-application-show__metric {
    background: #fff;
    border: 1px solid #e1eaf5;
    border-radius: 0.45rem;
    box-shadow: 0 2px 8px rgba(29, 71, 125, 0.05);
    min-height: 92px;
    padding: 0.75rem 0.9rem;
}

.job-application-show__metric-label,
.job-application-show .datagrid-title {
    color: #6480ac;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.job-application-show__metric-value {
    color: #10235e;
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.25;
    margin-top: 0.25rem;
}

.job-application-show__metric-note {
    color: #8196b6;
    font-size: 0.7rem;
    margin-top: 0.2rem;
}

.job-application-show .card {
    border-color: #e1eaf5;
    border-radius: 0.45rem;
    box-shadow: 0 2px 8px rgba(29, 71, 125, 0.04);
}

.job-application-show .card-header {
    background: #fbfdff;
    border-bottom-color: #e7eef7;
    min-height: 3rem;
}

.job-application-show .card-title {
    color: #17336f;
    font-size: 0.9rem;
    font-weight: 700;
}

.job-application-show .datagrid-content {
    color: #1d2d4c;
    font-size: 0.82rem;
}

.job-application-show video {
    border: 1px solid #d8e4f1 !important;
    box-shadow: 0 4px 12px rgba(22, 55, 100, 0.08);
}

.test-review-page {
    color: #172d56;
}

.test-review-page__header {
    border-bottom: 1px solid #e1ebf6;
    padding-bottom: 0.75rem;
}

.test-review-page__header .page-title {
    color: #11295b;
    font-weight: 700;
}

.test-review-page__actions .btn {
    font-weight: 600;
}

.test-review-page__metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
}

@media (min-width: 768px) {
    .test-review-page__metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.test-review-page__metric,
.test-review-page__panel {
    background: #fff;
    border: 1px solid #e1ebf6;
    border-radius: 0.5rem;
    box-shadow: 0 2px 9px rgba(35, 83, 137, 0.05);
}

.test-review-page__metric {
    display: flex;
    flex-direction: column;
    min-height: 112px;
    height: 100%;
    padding: 0.9rem 1rem;
    overflow: hidden;
}

.test-review-page__metric-label,
.test-review-page__panel .datagrid-title,
.test-review-page__facts dt {
    color: #7890b1;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.test-review-page__metric-value {
    color: #152e62;
    font-size: 1.28rem;
    font-weight: 700;
    line-height: 1.2;
    margin-top: 0.35rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.test-review-page__metric-note {
    color: #7d93b2;
    font-size: 0.76rem;
    line-height: 1.3;
    margin-top: auto;
    padding-top: 0.35rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.test-review-page__panel .card-header {
    background: #fbfdff;
    border-bottom-color: #e8eff7;
    min-height: 3rem;
}

.test-review-page__panel .card-title {
    color: #17356e;
    font-size: 0.92rem;
    font-weight: 700;
}

.test-review-page__panel .datagrid-content {
    color: #20365d;
    font-size: 0.82rem;
}

.test-review-page__interview {
    align-items: center;
    border: 1px solid #e6eef7;
    border-radius: 0.45rem;
    display: flex;
    justify-content: space-between;
    padding: 0.75rem;
}

.test-review-page__progress {
    background: #e4eef8;
    border-radius: 999px;
    height: 0.7rem;
    margin-bottom: 0.75rem;
    overflow: hidden;
}

.test-review-page__progress span {
    background: #18a957;
    border-radius: inherit;
    display: block;
    height: 100%;
}

.test-review-page__video {
    background: #101827;
    border: 1px solid #d9e6f2;
    border-radius: 0.45rem;
    display: block;
    max-height: 480px;
}

.assessment-proctor-shot {
    display: block;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    background: #0f172a;
    text-decoration: none;
    color: inherit;
}

.assessment-proctor-shot img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    display: block;
}

.assessment-proctor-shot__label {
    display: block;
    padding: 0.4rem 0.55rem;
    font-size: 0.75rem;
    color: #334155;
    background: #fff;
}

.test-review-page__instructions {
    color: #617a9f;
    font-size: 0.82rem;
    line-height: 1.55;
}

.test-review-page__facts {
    display: grid;
    gap: 0.8rem;
}

.test-review-page__facts dd {
    color: #20365d;
    font-size: 0.82rem;
    font-weight: 600;
    margin: 0.15rem 0 0;
}

.test-review-page__breakdown {
    display: grid;
    gap: 0.65rem;
}

.test-review-page__breakdown li {
    align-items: center;
    color: #526b91;
    display: flex;
    font-size: 0.8rem;
    gap: 0.55rem;
}

.test-review-page__breakdown strong {
    color: #20365d;
    margin-left: auto;
}

.test-review-page__breakdown .dot {
    border-radius: 50%;
    display: inline-block;
    height: 0.55rem;
    width: 0.55rem;
}

.test-review-page__breakdown .dot-green {
    background: #18a957;
}

.test-review-page__breakdown .dot-blue {
    background: #1677d2;
}

.test-review-page__breakdown .dot-red {
    background: #ef4444;
}

.test-review-page__warning {
    color: #ef3f3f;
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.job-opening-activity-log__timeline {
    padding: 0.15rem 0 0.15rem 0.1rem;
}

.job-opening-activity-log__item {
    display: flex;
    gap: 0.7rem;
    min-height: 92px;
    position: relative;
}

html.lang-ar .job-opening-activity-log__item {
    display: flex;
    gap: 0.7rem;
    min-height: 92px;
    position: relative;
    direction: ltr;
}

.job-opening-activity-log__item:not(:last-child)::before {
    background: #dce7f3;
    bottom: 0;
    content: "";
    left: 0.85rem;
    position: absolute;
    top: 1.35rem;
    width: 2px;
}

.job-opening-activity-log__marker {
    align-items: center;
    background: #1677d2;
    border: 2px solid #fff;
    border-radius: 50%;
    color: #fff;
    display: flex;
    /* flex: 0 0 1.2rem; */
    height: 1.9rem;
    justify-content: center;
    position: relative;
    width: 1.9rem;
    z-index: 1;
}

.job-opening-activity-log__marker .ti {
    font-size: 0.7rem;
}

.job-opening-activity-log__item--opened .job-opening-activity-log__marker,
.job-opening-activity-log__item--reopened .job-opening-activity-log__marker {
    background: #71be43;
    color: #fff;
}

.job-opening-activity-log__item--closed .job-opening-activity-log__marker,
.job-opening-activity-log__item--cancelled .job-opening-activity-log__marker {
    background: #e54848;
    color: #fff;
}

.job-opening-activity-log__content {
    flex: 1;
    min-width: 0;
    padding: 0 0 0.9rem;
}

.job-opening-activity-log__title {
    color: #1d315b;
    font-size: 0.8rem;
    font-weight: 700;
}

.job-opening-activity-log__meta,
.job-opening-activity-log__status,
.job-opening-activity-log__comment,
.job-opening-activity-log__date {
    color: #7890b1;
    font-size: 0.7rem;
    line-height: 1.45;
}

.job-opening-activity-log__status {
    align-items: center;
    display: flex;
    gap: 0.25rem;
    margin-top: 0.15rem;
}

.job-opening-activity-log__status .ti {
    color: #9aabc0;
    font-size: 0.75rem;
}

html.lang-ar .job-opening-activity-log__comment {
    color: #5d7396;
    margin-top: 0.15rem;
    display: flex;
}

.job-opening-activity-log__comment {
    color: #5d7396;
    margin-top: 0.15rem;
}

.job-opening-activity-log__date {
    color: #9aabc0;
    margin-top: 0.15rem;
}

html.lang-ar .job-opening-activity-log__date {
    color: #9aabc0;
    margin-top: 0.15rem;
    display: flex;
}

.hiring-request-timeline {
    padding: 0.15rem 0 0.15rem 0.1rem;
}

.hiring-request-timeline__item {
    display: flex;
    gap: 0.7rem;
    min-height: 86px;
    position: relative;
}

html.lang-ar .hiring-request-timeline__item {
    display: flex;
    gap: 0.7rem;
    min-height: 86px;
    position: relative;
    direction: ltr;
}

.hiring-request-timeline__item:not(:last-child)::before {
    background: #d5e4f1;
    bottom: 0;
    content: "";
    left: 0.8rem;
    position: absolute;
    top: 1.3rem;
    width: 2px;
}

.hiring-request-timeline__marker {
    align-items: center;
    background: #fff;
    border: 2px solid #fff;
    border-radius: 50%;
    color: #1677d2;
    display: flex;
    /* flex: 0 0 1.2rem; */
    height: 1.9rem;
    justify-content: center;
    position: relative;
    width: 1.9rem;
    z-index: 1;
}

.hiring-request-timeline__marker .ti {
    font-size: 0.7rem;
}

.hiring-request-approval-timeline__item--approved
    .hiring-request-timeline__marker,
.hiring-request-activity-timeline__item--approved
    .hiring-request-timeline__marker,
.hiring-request-activity-timeline__item--auto_approved
    .hiring-request-timeline__marker {
    background: #12a150;
    color: #fff;
}

.hiring-request-approval-timeline__item--rejected
    .hiring-request-timeline__marker,
.hiring-request-activity-timeline__item--rejected
    .hiring-request-timeline__marker {
    background: #e54848;
    color: #fff;
}

.hiring-request-approval-timeline__item--pending
    .hiring-request-timeline__marker,
.hiring-request-activity-timeline__item--submitted
    .hiring-request-timeline__marker {
    background: #e59a00;
    color: #fff;
}

.hiring-request-timeline__content {
    flex: 1;
    min-width: 0;
    padding-bottom: 0.85rem;
}

.hiring-request-timeline__title {
    color: #172d5d;
    font-size: 0.8rem;
    font-weight: 700;
}

.hiring-request-timeline__meta,
.hiring-request-timeline__status,
.hiring-request-timeline__comment,
.hiring-request-timeline__date {
    color: #7890b1;
    font-size: 0.7rem;
    line-height: 1.45;
}

.hiring-request-timeline__status {
    margin-top: 0.15rem;
}

html.lang-ar .hiring-request-timeline__status {
    margin-top: 0.15rem;
    display: flex;
}

.hiring-request-timeline__comment {
    color: #5d7396;
    margin-top: 0.15rem;
}

html.lang-ar .hiring-request-timeline__comment {
    color: #5d7396;
    margin-top: 0.15rem;
    display: flex;
}

.hiring-request-timeline__date {
    color: #9aabc0;
    margin-top: 0.15rem;
}

html.lang-ar .hiring-request-timeline__date {
    color: #9aabc0;
    margin-top: 0.15rem;
    display: flex;
}

.hiring-request-timeline-card__body {
    padding: 1rem;
}

@media (max-width: 767.98px) {
    .test-review-page__interview {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.6rem;
    }
}

@media (max-width: 767.98px) {
    .job-application-show__header > .row > .col-auto {
        align-items: flex-start;
        margin-top: 0.5rem;
    }
}

@media (max-width: 768px) {
    header.navbar {
        position: relative;
    }
}

@media (max-width: 991px) {
    .navbar-brand {
        background: transparent;
    }

    [data-bs-theme="dark"] .navbar-brand {
        background: transparent;
    }

    .navbar-vertical {
        position: fixed !important;
        top: 0;
        left: -270px;
        width: 260px;
        height: 100vh;
        transition: left 0.3s ease;
        z-index: 9999;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .navbar-vertical.show {
        left: 0;
    }

    .sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.55);
        z-index: 9998;
    }

    .sidebar-overlay.show {
        display: block;
    }
}

.accountbg {
    background:
        radial-gradient(
            circle at 39% 47%,
            rgba(107, 107, 107, 0.08) 0%,
            rgba(107, 107, 107, 0.08) 33.333%,
            rgba(72, 72, 72, 0.08) 33.333%,
            rgba(72, 72, 72, 0.08) 66.666%,
            rgba(36, 36, 36, 0.08) 66.666%,
            rgba(36, 36, 36, 0.08) 99.999%
        ),
        radial-gradient(
            circle at 53% 74%,
            rgba(182, 182, 182, 0.08) 0%,
            rgba(182, 182, 182, 0.08) 33.333%,
            rgba(202, 202, 202, 0.08) 33.333%,
            rgba(202, 202, 202, 0.08) 66.666%,
            rgba(221, 221, 221, 0.08) 66.666%,
            rgba(221, 221, 221, 0.08) 99.999%
        ),
        radial-gradient(
            circle at 14% 98%,
            rgba(184, 184, 184, 0.08) 0%,
            rgba(184, 184, 184, 0.08) 33.333%,
            rgba(96, 96, 96, 0.08) 33.333%,
            rgba(96, 96, 96, 0.08) 66.666%,
            rgba(7, 7, 7, 0.08) 66.666%,
            rgba(7, 7, 7, 0.08) 99.999%
        ),
        linear-gradient(-45deg, #005f9c, #016233);
    width: 100%;
    min-height: 100vh;
    background-size: cover;
    background-repeat: no-repeat;
}

/* Nested in table-responsive / text-nowrap cells — keep dialog text wrapping */
.table .modal,
.table-responsive .modal {
    white-space: normal;
}

/* Scrollable modals: keep header/footer visible; only body scrolls */
.modal-dialog-scrollable .modal-content:has(> form) {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal-dialog-scrollable .modal-content > form,
.modal-dialog-scrollable .role-perm-modal-form {
    display: flex;
    flex-direction: column;
    max-height: 100%;
    min-height: 0;
    overflow: hidden;
    flex: 1 1 auto;
}

.modal-dialog-scrollable .modal-content > form .modal-header,
.modal-dialog-scrollable .modal-content > form .modal-footer,
.modal-dialog-scrollable .role-perm-modal-form .modal-header,
.modal-dialog-scrollable .role-perm-modal-form .modal-footer {
    flex-shrink: 0;
}

.modal-dialog-scrollable .modal-content > form .modal-body,
.modal-dialog-scrollable .role-perm-modal-form .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* Hide browser clear/reveal icons on password fields */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear,
input[type="text"]::-ms-reveal,
input[type="text"]::-ms-clear,
.password-toggle-group input[type="password"]::-ms-reveal,
.password-toggle-group input[type="password"]::-ms-clear,
.password-toggle-group input[type="text"]::-ms-reveal,
.password-toggle-group input[type="text"]::-ms-clear,
.password-toggle-group input::-webkit-credentials-auto-fill-button,
.password-toggle-group input::-webkit-clear-button {
    display: none !important;
    visibility: hidden;
    pointer-events: none;
}

.password-toggle-group {
    flex-wrap: nowrap;
}

.password-toggle-group .form-control {
    border-right: 0;
    box-shadow: none !important;
}

.password-toggle-group .input-group-text {
    background: #fff;
    cursor: pointer;
    border-left: 0;
}

.password-toggle-group.is-invalid .form-control,
.password-toggle-group:has(.form-control.is-invalid) .form-control {
    border-color: var(--tblr-danger) !important;
    background-image: none !important;
    padding-right: 0.75rem !important;
}

.password-toggle-group.is-invalid .input-group-text,
.password-toggle-group:has(.form-control.is-invalid) .input-group-text {
    border-color: var(--tblr-danger) !important;
    color: var(--tblr-danger);
}

.password-toggle-group .password-toggle,
.password-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    cursor: pointer;
    user-select: none;
}

.input-icon-addon.password-toggle-addon,
.input-icon-addon:has(.password-toggle) {
    pointer-events: auto !important;
    cursor: pointer;
    z-index: 5;
}

#appToastContainer .toast {
    min-width: 280px;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

#appToastContainer .toast.text-bg-danger,
#appToastContainer .toast.text-bg-success {
    color: #fff;
}

.user-profile-avatar {
    --tblr-avatar-size: 9rem;
    width: 8rem;
    height: 8rem;
    font-size: 9rem;
    background-size: cover;
    background-position: center;
    border-radius: 0.75rem;
}

/* Select2 — align with Tabler form controls */
.select2-container--default .select2-selection--single {
    height: 36px !important;
    padding: 5px 12px !important;
    border: 1px solid var(--tblr-border-color, #dadcde) !important;
    border-radius: 6px !important;
    background-color: #ffffff !important;
    position: relative !important;
}

.select2-container--default
    .select2-results__option--highlighted[aria-selected] {
    background-color: #0171f7 !important;
}

.select2-container--default
    .select2-selection--single
    .select2-selection__rendered {
    line-height: 26px !important;
    padding-left: 0 !important;
    padding-right: 20px !important;
    color: #1e293b !important;
    font-size: 0.875rem !important;
    display: block !important;
}

.select2-container--default
    .select2-selection--single
    .select2-selection__placeholder {
    color: #94a3b8 !important;
}

.select2-container--default
    .select2-selection--single
    .select2-selection__arrow {
    height: 36px !important;
    position: absolute !important;
    top: 0 !important;
    right: 8px !important;
    width: 20px !important;
}

.select2-container--default
    .select2-selection--single
    .select2-selection__arrow
    b {
    border-color: #64748b transparent transparent transparent !important;
    border-width: 5px 4px 0 4px !important;
    margin-left: -4px !important;
    margin-top: -2px !important;
}

.select2-container--default .select2-selection--multiple {
    min-height: 38px !important;
    height: auto !important;
    border: 1px solid var(--tblr-border-color, #dadcde) !important;
    border-radius: 6px !important;
    background-color: #ffffff !important;
    padding: 2px 6px !important;
    overflow: hidden !important;
}

.select2-container {
    max-width: 100% !important;
}

.select2-container--default
    .select2-selection--multiple
    .select2-selection__rendered {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 4px !important;
    float: none !important;
    max-width: 100% !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.select2-container--default
    .select2-selection--multiple
    .select2-selection__choice {
    float: none !important;
    margin: 0 !important;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.select2-container--default
    .select2-selection--multiple
    .select2-search--inline {
    float: none !important;
    flex: 1 1 4rem;
    min-width: 4rem;
    margin: 0 !important;
}

.select2-container--default
    .select2-selection--multiple
    .select2-search--inline
    .select2-search__field {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 0 !important;
    height: 28px !important;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus
    .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open
    .select2-selection--multiple {
    border-color: #0b75ba !important;
    box-shadow: 0 0 0 0.2rem rgba(11, 117, 186, 0.15) !important;
}

.select2-dropdown {
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1) !important;
    z-index: 2050 !important;
    overflow: hidden !important;
    margin-top: 2px !important;
}

.select2-search--dropdown {
    padding: 8px !important;
    background-color: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

.select2-search--dropdown .select2-search__field {
    padding: 6px 10px !important;
    border-radius: 4px !important;
    border: 1px solid #cbd5e1 !important;
    font-size: 0.85rem !important;
    outline: none !important;
    height: 34px !important;
    line-height: 20px !important;
}

.select2-search--dropdown .select2-search__field:focus {
    border-color: #0b75ba !important;
    box-shadow: 0 0 0 2px rgba(11, 117, 186, 0.15) !important;
}

.select2-container--default .select2-results__option {
    padding: 8px 12px !important;
    font-size: 0.875rem !important;
    color: #334155 !important;
    line-height: 1.4 !important;
}

.select2-container--default
    .select2-results__option--highlighted[aria-selected] {
    background-color: #0171f7 !important;
    color: #ffffff !important;
}

.select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
    font-weight: 600 !important;
}

.select2-container--default .select2-selection--single {
    background-image: none !important;
}

.select2-container .select2-selection--single .select2-selection__clear,
.select2-container--default
    .select2-selection--multiple
    .select2-selection__clear {
    margin-right: 1.25rem;
}

.is-invalid + .select2-container .select2-selection--single,
.is-invalid + .select2-container .select2-selection--multiple {
    border-color: var(--tblr-danger);
}

/* Select2 Checkbox Dropdown Enhancements */
.select2-checkbox-dropdown .select2-results__option {
    padding: 8px 12px !important;
    cursor: pointer !important;
}

.select2-checkbox-dropdown .select2-option-checkbox-wrap {
    display: flex;
    align-items: center;
    width: 100%;
}

.select2-checkbox-dropdown .select2-row-check {
    pointer-events: none !important;
    margin-right: 10px !important;
    width: 17px !important;
    height: 17px !important;
    border-radius: 4px !important;
    border: 1.5px solid #94a3b8 !important;
    background-color: #ffffff !important;
    flex-shrink: 0 !important;
    transition: all 0.15s ease-in-out !important;
}

.select2-checkbox-dropdown
    .select2-results__option[aria-selected="true"]
    .select2-row-check {
    background-color: #206bc4 !important;
    border-color: #206bc4 !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 11px !important;
}

.select2-checkbox-dropdown
    .select2-results__option--highlighted[aria-selected] {
    background-color: #eef4fc !important;
    color: #1e293b !important;
}

.select2-checkbox-dropdown
    .select2-results__option--highlighted[aria-selected]
    .select2-option-label {
    color: #1e293b !important;
    font-weight: 600 !important;
}

/* OKR Checkbox Dropdown (exact match to user screenshot) */
.okr-multiselect-dropdown {
    position: relative;
}

.okr-multiselect-btn {
    width: 100%;
    min-height: 40px;
    background-color: #ffffff;
    border: 1px solid var(--tblr-border-color, #dadcde);
    border-radius: 6px;
    padding: 7px 12px;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    font-size: 0.925rem;
}

.okr-multiselect-btn:hover {
    border-color: #94a3b8;
}

.okr-multiselect-btn:focus,
.okr-multiselect-dropdown.show .okr-multiselect-btn {
    border-color: #0b75ba;
    box-shadow: 0 0 0 0.2rem rgba(11, 117, 186, 0.15);
    outline: none;
}

.okr-multiselect-text {
    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 8px;
    font-weight: 500;
    color: #1e293b;
}

.okr-multiselect-menu {
    width: 100%;
    min-width: 280px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.12);
    padding: 6px;
    z-index: 1050;
    margin-top: 4px;
}

.okr-dropdown-search-wrap {
    padding: 4px 4px 8px 4px;
    border-bottom: 1px solid #f1f5f9;
    margin-bottom: 4px;
}

.okr-dropdown-list {
    max-height: 240px;
    overflow-y: auto;
}

.okr-dropdown-item-row {
    display: flex;
    align-items: center;
    padding: 7px 10px;
    border-radius: 4px;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.12s ease-in-out;
}

.okr-dropdown-item-row:hover {
    background-color: #f1f5f9;
}

/* Checkbox Box - Exact Match to User Image */
.okr-item-checkbox {
    width: 19px;
    height: 19px;
    min-width: 19px;
    min-height: 19px;
    border: 1.8px solid #475569;
    border-radius: 3px;
    background-color: #ffffff;
    margin-right: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-sizing: border-box;
    transition: all 0.15s ease-in-out;
    flex-shrink: 0;
}

/* Checked State */
.okr-dropdown-item-row.is-checked .okr-item-checkbox {
    border-color: #0171f7;
    background-color: #e7f2ff;
}

.okr-dropdown-item-row.is-checked .okr-item-checkbox::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 6px;
    height: 11px;
    border: solid #0171f7;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
    box-sizing: border-box;
}

.okr-item-label {
    color: #0369a1;
    /* Vibrant blue like user's screenshot */
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.3;
}

.okr-dropdown-item-row.is-checked .okr-item-label {
    color: #0c4a6e;
    font-weight: 600;
}

#appConfirmModal {
    z-index: 11050;
}

/* #appConfirmModal .modal-content {
    border: 0;
    border-radius: 0.75rem;
} */

#appConfirmModal .app-confirm-icon {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(11, 117, 186, 0.12);
    color: var(--tblr-primary);
    font-size: 1.5rem;
}

.modal-backdrop.app-confirm-backdrop {
    z-index: 11040;
}

.app-notify-stack {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 20000;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: min(24rem, calc(100vw - 2rem));
    pointer-events: none;
}

.app-notify {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 0.95rem;
    border-radius: 0.5rem;
    color: #fff;
    box-shadow: 0 10px 28px rgba(24, 36, 51, 0.22);
    border: 0;
    transform: translateX(1.25rem);
    opacity: 0;
    transition:
        transform 0.28s ease,
        opacity 0.28s ease;
}

.app-notify.is-in {
    transform: translateX(0);
    opacity: 1;
}

.app-notify.is-out {
    transform: translateX(1.25rem);
    opacity: 0;
}

.app-notify.is-success {
    background: #2fb344;
}

.app-notify.is-danger {
    background: #d63939;
}

.app-notify.is-warning {
    background: #f76707;
}

.app-notify.is-info {
    background: #0b75ba;
}

.app-notify-icon {
    width: 1.5rem;
    height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.15rem;
    color: #fff;
    margin-top: 0.1rem;
}

.app-notify-body {
    min-width: 0;
    flex: 1;
}

.app-notify-title {
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.2;
    margin-bottom: 0.12rem;
    color: #fff;
}

.app-notify-text {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.4;
    word-break: break-word;
}

.app-notify-close {
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.85);
    padding: 0;
    line-height: 1;
    font-size: 1rem;
    cursor: pointer;
}

.app-notify-close:hover {
    color: #fff;
}

body[data-bs-theme="dark"] .app-notify.is-success {
    background: #2fb344;
}

body[data-bs-theme="dark"] .app-notify.is-danger {
    background: #d63939;
}

.emailviewtemplate {
    max-width: 50%;
}

/* Job application decision audit timeline */
.decision-audit-scroll {
    max-height: 460px;
    overflow-y: auto;
    padding: 1rem 1rem 0.5rem;
}

.decision-audit-timeline {
    position: relative;
    margin: 0;
    padding: 0 0 0.25rem 0.25rem;
}

.decision-audit-item {
    position: relative;
    display: grid;
    grid-template-columns: 2rem 1fr;
    column-gap: 0.85rem;
    padding-bottom: 1.1rem;
}

.decision-audit-item:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 0.95rem;
    top: 2rem;
    bottom: 0;
    width: 2px;
    background: #e6e8ef;
}

.decision-audit-dot {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
    background: #edf0f7;
    color: #5b6480;
    border: 1px solid #d7dbe7;
    z-index: 1;
}

.decision-audit-item--success .decision-audit-dot {
    background: #e8f8ee;
    color: #2fb344;
    border-color: #b8e6c5;
}

.decision-audit-item--danger .decision-audit-dot {
    background: #fdecec;
    color: #d63939;
    border-color: #f2c0c0;
}

.decision-audit-item--info .decision-audit-dot {
    background: #e8f2ff;
    color: #206bc4;
    border-color: #bfd6f6;
}

.decision-audit-card {
    min-width: 0;
    background: #f8fafc;
    border: 1px solid #e8ecf3;
    border-radius: 0.75rem;
    padding: 0.75rem 0.85rem;
}

.decision-audit-title {
    font-weight: 700;
    color: #1f2937;
    font-size: 0.95rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.decision-audit-badge {
    flex-shrink: 0;
    white-space: nowrap;
    font-weight: 600;
}

.decision-audit-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.9rem;
    color: #6b7280;
    font-size: 0.78rem;
}

.decision-audit-meta .ti {
    font-size: 0.85rem;
    vertical-align: -1px;
}

.decision-audit-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.2rem;
    color: #64748b;
    font-size: 0.78rem;
}

.decision-audit-chip {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #e2e8f0;
    color: #475569;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.decision-audit-chip--to {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1d4ed8;
    font-weight: 600;
}

.decision-audit-note {
    font-size: 0.84rem;
    color: #334155;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

body[data-bs-theme="dark"] .decision-audit-item:not(:last-child)::before {
    background: #2c3344;
}

body[data-bs-theme="dark"] .decision-audit-card {
    background: #1b2232;
    border-color: #2c3344;
}

body[data-bs-theme="dark"] .decision-audit-title {
    color: #e5e7eb;
}

body[data-bs-theme="dark"] .decision-audit-chip {
    background: #151a25;
    border-color: #2c3344;
    color: #cbd5e1;
}

body[data-bs-theme="dark"] .decision-audit-chip--to {
    background: #10233f;
    border-color: #1e3a5f;
    color: #93c5fd;
}

body[data-bs-theme="dark"] .decision-audit-note {
    color: #cbd5e1;
}

/* Full-screen app loader (resume scan, transcript, long AI actions) */
.app-screen-loader {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(2px);
}

.app-screen-loader.d-none {
    display: none !important;
}

.app-screen-loader__box {
    background: #fff;
    border-radius: 12px;
    padding: 1.35rem 1.75rem;
    min-width: 260px;
    max-width: min(90vw, 360px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    box-shadow: 0 12px 36px rgba(15, 23, 42, 0.2);
}

.app-screen-loader__text {
    color: #3b4168;
    font-size: 0.95rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.4;
}

body[data-bs-theme="dark"] .app-screen-loader__box {
    background: #1a2234;
}

body[data-bs-theme="dark"] .app-screen-loader__text {
    color: #e5e7eb;
}

.coding-answer {
    display: block;
    min-height: 14rem;
    max-height: 32rem;
    overflow: auto;
    margin: 0 0 0.65rem;
    padding: 1.1rem 1.2rem;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.925rem;
    line-height: 1.6;
    color: #1d273b !important;
    background: #f4f7fb !important;
    border: 1px solid #d5e0ec;
    border-radius: 0.55rem;
}

body[data-bs-theme="dark"] .coding-answer {
    color: #e6edf5 !important;
    background: #1a2433 !important;
    border-color: #2c3a4d;
}

.test-answer-item {
    padding: 1rem 1.1rem;
    margin-bottom: 0.85rem;
    border: 1px solid #e4ebf3;
    border-radius: 0.7rem;
    background: #fff;
}

.test-answer-item:last-child {
    margin-bottom: 0;
}

.test-answer-item__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.85rem 1.25rem;
    margin-bottom: 0.8rem;
    flex-wrap: wrap;
}

.test-answer-item__question {
    flex: 1 1 16rem;
    color: #182433;
    font-weight: 600;
    line-height: 1.5;
}

.test-answer-item__num {
    color: #0b75ba;
    margin-right: 0.15rem;
}

.test-answer-item__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
    margin-left: auto;
}

.test-answer-item__type--mcq {
    background: #e8f1fb;
    color: #0b5f96;
}

.test-answer-item__type--coding {
    background: #e7f6fb;
    color: #0a7a8c;
}

.test-answer-item__skill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.28rem 0.75rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #0b5f96;
    background: #e8f3fb;
    border: 1px solid #c5dff2;
    white-space: nowrap;
}

.test-answer-item__skill .ti {
    font-size: 0.95rem;
}

.test-answer-item__mcq {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.55rem;
    padding: 0.75rem 0.95rem;
    color: #1d273b;
    background: #f7fafc;
    border: 1px solid #e4ebf3;
    border-radius: 0.55rem;
}

.test-answer-item__mcq-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #4b6280;
}

.test-answer-item__mcq-text {
    color: #334155;
}

.test-answer-item__correct {
    font-size: 0.82rem;
    color: #2f6b3a;
    font-weight: 600;
}

.test-answer-item__empty {
    color: #4b6280;
    font-size: 0.9rem;
}

body[data-bs-theme="dark"] .test-answer-item {
    background: #1a2230;
    border-color: #2c3a4d;
}

body[data-bs-theme="dark"] .test-answer-item__question {
    color: #e6edf5;
}

body[data-bs-theme="dark"] .test-answer-item__skill {
    color: #9fd0f0;
    background: #163044;
    border-color: #2a4d66;
}

body[data-bs-theme="dark"] .test-answer-item__mcq {
    color: #e6edf5;
    background: #16202c;
    border-color: #2c3a4d;
}

body[data-bs-theme="dark"] .test-answer-item__mcq-text,
body[data-bs-theme="dark"] .test-answer-item__mcq-label,
body[data-bs-theme="dark"] .test-answer-item__empty {
    color: #9fb0c3;
}

body[data-bs-theme="dark"] .test-answer-item__correct {
    color: #7dca8c;
}

/* dashboard css */
.service-banner {
    position: relative;
    height: 300px;
    color: #fff;
    border-radius: 20px;
    overflow: hidden;
    background: #123b64;
}

.service-banner .carousel-inner,
.service-banner .carousel-item {
    height: 100%;
}

.service-banner .carousel-item {
    position: relative;
    background: #123b64;
}

.service-banner .carousel-item::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(6, 30, 54, 0.86) 0%,
        rgba(6, 30, 54, 0.5) 48%,
        rgba(6, 30, 54, 0.12) 100%
    );
    z-index: 1;
}

.service-banner .carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.service-banner .carousel-caption {
    z-index: 2;
    right: auto;
    bottom: 4rem;
    left: 6rem;
    max-width: 480px;
    padding: 0;
    text-align: left;
}

.service-banner .carousel-indicators {
    z-index: 3;
    justify-content: flex-start;
    margin: 0 0 18px 60px;
}

.service-banner .carousel-indicators button {
    width: 28px;
    height: 4px;
    margin-right: 6px;
    border: 0;
    border-radius: 3px;
}

.service-banner .carousel-control-prev,
.service-banner .carousel-control-next {
    z-index: 3;
    width: 8%;
}

.service-text {
    /* max-width: 300px; */
    position: absolute;
    bottom: 20px;
}

.service-text h1 {
    font-size: 2.5rem;
    font-weight: bold;
    margin: 0;
}

.underline {
    margin: 10px 0;
    width: 50px;
    height: 6px;
    background-color: #ff9800;
    border-radius: 3px;
}

html.lang-ar .service-banner .carousel-caption {
    right: 6rem;
    left: auto;
    text-align: right;
}

html.lang-ar .service-banner .underline {
    margin-right: 0;
    margin-left: auto;
}

html.lang-ar .carousel-indicators {
    position: absolute;
    left: 1rem;
    bottom: 0;
    right: inherit;
    /* z-index: 2; */
    display: flex;
    /* justify-content: center; */
    padding: 0;
    /* margin-right: 15%; */
    /* margin-bottom: 1rem; */
    /* margin-left: 15%; */
}

.carousel-indicators {
    position: absolute;
    right: 1rem;
    bottom: 0;
    left: inherit;
    z-index: 2;
    display: flex;
    justify-content: center;
    padding: 0;
    margin-right: 15%;
    margin-bottom: 1rem;
    margin-left: 15%;
}

.datagrid-content {
    font-size: medium;
}

@media (max-width: 600px) {
    .tab-pane .row.py-3 {
        grid-template-columns: 1fr;
    }

    .image img {
        height: 260px;
        min-height: 0;
    }

    .service-banner {
        height: 260px;
    }

    .service-banner .carousel-caption {
        right: 28px;
        bottom: 28px;
        left: 28px;
    }

    html.lang-ar .service-banner .carousel-caption {
        right: 28px;
        left: 28px;
    }

    .service-banner .carousel-caption h1 {
        font-size: 2rem;
    }

    .service-banner .carousel-indicators {
        margin-left: 28px;
    }
}

.image {
    min-width: 0;
    height: 100%;
}

.image img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 300px;
    object-fit: cover;
    border-radius: 20px;
}

.tab-pane .row.py-3 {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr);
    gap: 18px;
    align-items: stretch;
}

.service-request {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 6px;
    font-weight: 600;
}

.service-request i {
    font-size: 0.85rem;
}

.features {
    flex: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    min-width: 0;
}

.feature > div {
    display: contents;
}

.feature i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin: 0;
    border-radius: 50%;
    font-size: 16px;
    color: #a89927;
    background: #fffbd0;
}

.feature:nth-child(4n + 2) > i {
    color: #1976d2;
    background: #e3f2fd;
}

.feature:nth-child(4n + 3) > i {
    color: #d02b3c;
    background: #ffd6d0;
}

.feature:nth-child(4n + 4) > i {
    color: #fbb03c;
    background: #ffe7bc;
}

.feature h3 {
    margin: 0;
    color: #282828;
    font-size: 0.9rem;
}

.feature p {
    grid-column: 1 / -1;
    margin: 0;
    color: #777777;
    font-size: 0.8rem;
    line-height: 1.55;
}

.feature p + p {
    margin-top: 4px;
}

.form-section h5 {
    margin: 0 0 0.25rem;
    color: #0073e6;
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

.form-section1 h5 {
    margin: 0 0 0.25rem;
    color: #0073e6;
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

.nav-linksigline.active {
    padding: 20px !important;
}

.service-center-nav {
    display: grid;
    grid-template-columns: repeat(8, minmax(90px, 1fr));
    gap: 8px;
    margin: 0 0 1.5rem;
    padding: 0;
}

.service-center-nav .nav-item {
    display: block !important;
    min-width: 0;
}

.service-center-nav .nav-link,
.service-center-nav .nav-linksigline.active {
    min-height: 66px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 15px 6px !important;
    border: 1px solid #e1e5ea;
    border-radius: 6px;
    box-shadow: 0 3px 10px rgba(24, 36, 51, 0.08);
    color: #4b4f54;
    font-size: 0.68rem;
    font-weight: 500;
    line-height: 1.15;
    text-align: center;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        color 0.2s ease,
        background 0.2s ease;
}

.service-center-nav .nav-link i {
    line-height: 1;
    font-size: 1.2rem;
}

.service-center-nav .nav-link:hover,
.service-center-nav .nav-link:focus {
    box-shadow: 0 5px 14px rgba(25, 118, 210, 0.16);
}

.service-center-nav .nav-link:hover i,
.service-center-nav .nav-link:focus i,
.service-center-nav .nav-link.active i {
    color: currentColor;
}

.service-center-nav .nav-link.active {
    font-weight: 700;
    box-shadow: 0 5px 14px rgba(25, 118, 210, 0.25);
}

.dashboard-mobile-page {
    --dashboard-mobile-bg: #f5f7fb;
}

body[data-bs-theme="dark"] .dashboard-mobile-page {
    --dashboard-mobile-bg: #101a26;
}

@media (max-width: 600px) {
    .dashboard-mobile-page > .col-md-12,
    .dashboard-mobile-page > .col-md-12 > .card,
    .dashboard-mobile-page > .col-md-12 > .card > .card-body {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    .dashboard-mobile-page > .col-md-12 > .card {
        border: 0;
        border-radius: 0;
        background: var(--dashboard-mobile-bg);
        box-shadow: none;
    }

    .dashboard-mobile-page > .col-md-12 > .card > .card-body {
        background: var(--dashboard-mobile-bg);
    }

    .dashboard-mobile-page #serviceBanner {
        height: 218px;
        margin-bottom: 0.85rem !important;
        border-radius: 0 0 18px 18px;
    }

    .dashboard-mobile-page .service-banner .carousel-caption {
        right: 1.5rem;
        bottom: 2.5rem;
        left: 1.5rem;
        max-width: none;
        text-align: left;
    }

    html.lang-ar .dashboard-mobile-page .service-banner .carousel-caption {
        right: 1.5rem;
        left: 1.5rem;
        text-align: right;
    }

    .dashboard-mobile-page .service-text h1 {
        font-size: 1.55rem;
        line-height: 1.15;
    }

    .dashboard-mobile-page .service-text b {
        display: block;
        font-size: 0.78rem;
    }

    .dashboard-mobile-page .service-text p {
        max-width: 290px;
        margin: 0.35rem 0 0;
        font-size: 0.7rem;
        line-height: 1.45;
    }

    .dashboard-mobile-page .service-banner .carousel-indicators {
        right: 1rem;
        bottom: 0.7rem;
        left: 1rem !important;
        justify-content: center;
        margin: 0;
    }

    .dashboard-mobile-page .service-banner .carousel-indicators button {
        width: 22px;
        height: 4px;
        margin: 0 3px;
    }

    .dashboard-mobile-page .service-center-nav {
        display: flex;
        flex-wrap: nowrap;
        gap: 0.55rem;
        margin: 0 -0.25rem 0.9rem;
        padding: 0.2rem 0.25rem 0.55rem;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .dashboard-mobile-page .service-center-nav::-webkit-scrollbar {
        display: none;
    }

    .dashboard-mobile-page .service-center-nav .nav-item {
        flex: 0 0 82px;
    }

    .dashboard-mobile-page .service-center-nav .nav-link {
        min-height: 64px;
        padding: 0.55rem 0.35rem !important;
        border-radius: 12px;
        font-size: 0.65rem;
        box-shadow: 0 2px 8px rgba(24, 36, 51, 0.08);
    }

    .dashboard-mobile-page .service-center-nav .nav-link i {
        font-size: 1.2rem;
    }

    .dashboard-mobile-page .service-center-nav .nav-link.active {
        border: 1px solid #0b6efd;
        border-bottom-width: 3px;
        box-shadow: 0 4px 10px rgba(25, 118, 210, 0.16);
    }

    .dashboard-mobile-page .tab-content {
        padding: 0 0.75rem 1rem;
    }

    .dashboard-mobile-page .tab-pane {
        padding: 0 !important;
    }

    .dashboard-mobile-page .btn,
    .dashboard-mobile-page button,
    .dashboard-mobile-page .nav-link {
        min-height: 44px;
    }

    .dashboard-mobile-page .letters-hero,
    .dashboard-mobile-page .loan-dashboard-header {
        border-radius: 14px;
    }
}

@media (max-width: 600px) and (prefers-reduced-motion: no-preference) {
    .dashboard-mobile-page .tab-pane.show.active {
        animation: dashboard-mobile-enter 180ms ease-out;
    }
}

@keyframes dashboard-mobile-enter {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 1100px) {
    .service-center-nav {
        grid-template-columns: repeat(5, minmax(100px, 1fr));
    }
}

@media (max-width: 600px) {
    .service-center-nav {
        grid-template-columns: repeat(3, minmax(84px, 1fr));
        gap: 10px;
    }

    .service-center-nav .nav-link {
        min-height: 72px;
    }
}

.footer {
    background-color: #f3f4f6;
    padding: 30px 20px;
    font-family: "Segoe UI", sans-serif;
    font-size: 14px;
    color: #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    position: relative;
    border-top: 1px solid #ccc;
}

.footer-section {
    display: flex;
    align-items: center;
    gap: 20px;
}

.footer-section.vertical-divider {
    border-left: 1px solid #ccc;
    padding-left: 20px;
}

.footer-column {
    display: flex;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
}

.footer-links {
    display: flex;
    gap: 20px;
    border-left: none;
    border-top: 1px solid #ccc !important;
}

.footer-links a {
    color: #333;
    text-decoration: none;
    padding: 0 10px;
    border-left: 1px solid #aaa;
}

.footer-links a:first-child {
    border-left: none;
    padding-left: 0;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-logo img {
    height: 25px;
}

.footer-contact {
    line-height: 1.5;
}

.footer-contact b {
    display: block;
    margin-bottom: 5px;
}

.social-icons {
    display: flex;
    gap: 15px;
}

.social-icons a {
    color: #333;
    font-size: 18px;
    text-decoration: none;
}

.footer .fa {
    transition: color 0.3s;
}

.footer .fa:hover {
    color: #007bff;
}

.footer-section.vertical-divider {
    border-left: none;
    padding-left: 0;
}

.btn-primary:hover {
    color: #fff;
    text-decoration: none;
    background-color: #71be43;
    border-color: #71be43;
}

.featured-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 6px;
    background: #fff7df;
    color: #a56a00;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    /* //border: 1px solid #f4df9f; */
}

.featured-badge i {
    font-size: 13px;
}

#latestUpdate .latest-update-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

#latestUpdate .latest-update-item {
    display: grid;
    grid-template-columns: minmax(220px, 1.15fr) minmax(0, 1.85fr);
    gap: 1.5rem;
    padding: 1.2rem 1.2rem 1.1rem;
    border: 1px solid #dfeaf3;
    border-radius: 0.8rem;
    background: rgb(255 255 255);
    box-shadow: inset 0 0 0 1px rgb(164 162 162 / 50%);
}

#latestUpdate .latest-update-media {
    overflow: hidden;
    border-radius: 1.1rem;
    min-height: 240px;
    background: #dfeaf7;
}

#latestUpdate .latest-update-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 1.1rem;
}

#latestUpdate .latest-update-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

#latestUpdate .latest-update-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0.8rem;
}

#latestUpdate .latest-update-pill,
#latestUpdate .featured-badge,
#latestUpdate .latest-update-date {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    padding: 0.35rem 0.75rem;
    border-radius: 0.7rem;
    font-size: 0.77rem;
    font-weight: 700;
    line-height: 1;
}

#latestUpdate .latest-update-pill--primary {
    background: #1f7be6;
    color: #fff;
    box-shadow: 0 8px 18px rgba(31, 123, 230, 0.2);
}

#latestUpdate .latest-update-date {
    background: transparent;
    color: #5a6472;
    padding-left: 0.15rem;
    font-weight: 600;
}

#latestUpdate .latest-update-date i {
    margin-right: 0.45rem;
    font-size: 1rem;
    color: #a56a00;
}

#latestUpdate .latest-update-content h3 {
    margin: 0 0 0.9rem;
    color: #1c2f45;
    font-size: clamp(1rem, 0.8vw, 1rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

#latestUpdate .latest-update-summary,
#latestUpdate .latest-update-body {
    margin: 0;
    color: #49607a;
    font-size: 0.95rem;
    line-height: 1.8;
    text-align: left;
}

#latestUpdate .latest-update-summary {
    font-weight: 600;
    color: #3a4c64;
}

#latestUpdate .latest-update-body {
    margin-top: 0.85rem;
}

@media (max-width: 991px) {
    #latestUpdate .latest-update-item {
        grid-template-columns: 1fr;
    }

    #latestUpdate .latest-update-media {
        min-height: 220px;
    }
}

@media (max-width: 575px) {
    #latestUpdate .latest-update-item {
        padding: 0.9rem;
        border-radius: 1.1rem;
    }

    #latestUpdate .latest-update-meta {
        gap: 0.5rem;
    }

    #latestUpdate .latest-update-content h3 {
        font-size: 1.45rem;
    }
}

/* ==========================================================================
   PROFILE UPDATE TAB CUSTOM STYLES (MATCHING USER SPECIFIED DESIGN)
   ========================================================================== */
#profileUpdate .profile-main-card {
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid #dfeaf3;
    box-shadow: inset 0 0 0 1px rgb(164 162 162 / 50%);
    overflow: hidden;
    margin-bottom: 1.75rem;
}

#profileUpdate .profile-sidebar-card {
    position: relative;
    background: linear-gradient(
        135deg,
        #07518a 0%,
        #075f78 25%,
        #087c77 52%,
        #09946f 75%,
        #08a86c 100%
    );
    padding: 2.1rem 1.55rem 1.5rem;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 18px 0 0 18px;
    min-height: 520px;
    isolation: isolate;
    overflow: hidden;
}

#profileUpdate .profile-sidebar-card::before {
    content: "";

    position: absolute;

    width: 430px;
    height: 430px;

    left: -285px;
    top: -205px;

    border-radius: 50%;
    background: rgba(4, 45, 91, 0.3);

    box-shadow:
        90px 70px 0 rgba(5, 64, 104, 0.18),
        170px 150px 0 rgba(4, 72, 105, 0.12);

    transform: rotate(-25deg);
}

#profileUpdate .profile-sidebar-card::after {
    content: "";
    position: absolute;

    width: 430px;
    height: 430px;

    right: -265px;
    bottom: -275px;

    border-radius: 50%;
    background: rgba(4, 177, 116, 0.25);

    box-shadow:
        -100px -70px 0 rgba(5, 156, 112, 0.18),
        -180px -140px 0 rgba(4, 137, 111, 0.12);

    transform: rotate(-25deg);
}

@media (max-width: 767.98px) {
    #profileUpdate .profile-sidebar-card {
        border-radius: 22px 22px 0 0;
    }
}

#profileUpdate .profile-avatar-wrapper {
    width: 122px;
    height: 122px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    overflow: hidden;
    margin-bottom: 1rem;
    box-shadow: 0 12px 18px rgba(0, 0, 0, 0.12);
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
}

#profileUpdate .profile-avatar-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#profileUpdate .profile-name {
    color: #ffffff;
    font-size: 2.05rem;
    font-weight: 700;
    margin-bottom: 0.4rem;
    text-align: center;
    letter-spacing: -0.03em;
}

#profileUpdate .profile-joining-dates {
    position: relative;
    z-index: 1;
    width: 100%;
    text-align: center;
    margin-bottom: 0.85rem;
}

#profileUpdate .profile-joining-dates .text-secondary {
    color: rgba(255, 255, 255, 0.72) !important;
}

#profileUpdate .profile-joining-dates .text-dark {
    color: #ffffff !important;
}

#profileUpdate .profile-role-badge {
    background: rgba(255, 255, 255, 0.11);
    color: #ffffff;
    border-radius: 999px;
    padding: 4px 14px;
    font-size: 0.74rem;
    font-weight: 500;
    margin-bottom: 0.55rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    display: inline-block;
}

#profileUpdate .profile-status-badge {
    background: #2ecc71;
    color: #ffffff;
    border-radius: 999px;
    padding: 5px 14px;
    font-size: 0.78rem;
    font-weight: 600;
    margin-bottom: 1.8rem;
    display: inline-block;
    box-shadow: 0 6px 12px rgba(46, 204, 113, 0.22);
}

.divider {
    width: 100%;

    height: 1px;

    margin: 5px 0 10px;

    background: rgba(255, 255, 255, 0.25);
}

#profileUpdate .profile-sidebar-details {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
    margin-top: 0.2rem;
    position: relative;
    z-index: 1;
}

#profileUpdate .profile-detail-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 40px;
}

#profileUpdate .profile-detail-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.09);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 0.85rem;
    flex-shrink: 0;
}

#profileUpdate .profile-detail-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 700;
    margin-bottom: 2px;
}

#profileUpdate .profile-detail-value {
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff;
}

#profileUpdate .profile-content-card {
    padding: 1.7rem 2rem 1.4rem;
    /* background: #ffffff; */
}

#profileUpdate .profile-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    gap: 1rem;
}

#profileUpdate .profile-section-title {
    color: #1f3148;
    font-weight: 700;
    font-size: 1.15rem;
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

#profileUpdate .profile-section-title i {
    font-size: 1.1rem;
    color: #1d3557;
}

#profileUpdate .profile-edit-btn {
    border: 0;
    color: #ffffff;
    background: linear-gradient(135deg, #1f7ae8 0%, #0b67d8 100%);
    border-radius: 10px;
    padding: 0.6rem 1.15rem;
    font-weight: 600;
    font-size: 0.88rem;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    box-shadow: 0 8px 18px rgba(31, 122, 232, 0.2);
}

#profileUpdate .profile-edit-btn:hover {
    background: linear-gradient(135deg, #0d67dc 0%, #0059c3 100%);
    color: #ffffff;
}

#profileUpdate .profile-info-grid {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

#profileUpdate .profile-info-row {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    gap: 0.75rem;
    align-items: center;
    font-size: 1rem;
    padding: 0.1rem 0;
}

#profileUpdate .profile-info-label {
    color: #52627a;
    font-weight: 600;
    line-height: 1.5;
}

#profileUpdate .profile-info-value {
    color: #1d2b3a;
    font-weight: 600;
    line-height: 1.5;
}

#profileUpdate .profile-divider {
    border-top: 1px solid #e7edf5;
    margin: 1.6rem 0 1.2rem;
}

#profileUpdate .profile-feature-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 1.25rem 1rem;
    text-align: center;
    box-shadow: inset 0 0 0 1px rgb(164 162 162 / 50%);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#profileUpdate .profile-feature-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.07);
}

#profileUpdate .profile-feature-icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    margin-bottom: 0.75rem;
}

#profileUpdate .icon-bg-yellow {
    background: #fffbeb;
    color: #d97706;
    border: 1px solid #fef3c7;
}

#profileUpdate .icon-bg-blue {
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #dbeafe;
}

#profileUpdate .icon-bg-red {
    background: #fff1f2;
    color: #e11d48;
    border: 1px solid #ffe4e6;
}

#profileUpdate .icon-bg-gold {
    background: #fefce8;
    color: #ca8a04;
    border: 1px solid #fef9c3;
}

#profileUpdate .icon-bg-olive {
    background: #f7fee7;
    color: #65a30d;
    border: 1px solid #ecfccb;
}

#profileUpdate .icon-bg-skyblue {
    background: #f0f9ff;
    color: #0284c7;
    border: 1px solid #e0f2fe;
}

#profileUpdate .icon-bg-pink {
    background: #fff1f2;
    color: #e11d48;
    border: 1px solid #ffe4e6;
}

#profileUpdate .profile-feature-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 0.6rem;
}

#profileUpdate .profile-feature-action {
    color: #123b64;
    font-weight: 600;
    font-size: 0.84rem;
    text-decoration: none;
    cursor: pointer;
}

#profileUpdate .profile-feature-action:hover {
    text-decoration: underline;
}

.feature {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    column-gap: 14px;
    row-gap: 0px;
    /* min-height: 134px; */
    border-radius: 12px;
    padding: 20px;
    border: 1px solid #eeeeee;
    background: #ffffff;
    box-shadow: inset 0 0 0 1px rgb(164 162 162 / 50%);
}

/* ==========================================================================
   MY LEAVE DASHBOARD CUSTOM STYLES (MATCHING DESIGN SPECIFICATION)
   ========================================================================== */
.myleave-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 1.25rem 0.75rem;
    text-align: center;
    box-shadow: inset 0 0 0 1px rgb(164 162 162 / 50%);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.myleave-card-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: #334155;
    margin-bottom: 0.75rem;
}

.myleave-circle-wrapper {
    position: relative;
    width: 96px;
    height: 96px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.myleave-circle-wrapper svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.myleave-circle-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.myleave-circle-center .val {
    font-size: 1.4rem;
    font-weight: 800;
    color: #1e293b;
    line-height: 1;
}

.myleave-circle-center .sub {
    font-size: 0.65rem;
    color: #64748b;
    display: block;
    margin-top: 2px;
}

.myleave-taken-text {
    font-size: 0.8rem;
    font-weight: 600;
    color: #64748b;
    margin-top: 0.75rem;
}

.myleave-table th {
    font-size: 0.82rem;
    font-weight: 600;
    color: #64748b;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 0.85rem;
}

.myleave-table td {
    font-size: 0.88rem;
    padding: 0.95rem 0.75rem;
    color: #1e293b;
    border-bottom: 1px solid #f1f5f9;
}

.myleave-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
}

/* ==========================================================================
   BUSINESS TRIP DASHBOARD STYLES
   ========================================================================== */
.bt-wrapper {
    background: transparent;
    padding: 0;
}

.bt-top-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.bt-page-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--tblr-dark, #182433);
    margin: 0;
}

.bt-controls-group {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.bt-search-box {
    position: relative;
    min-width: 280px;
}

.bt-search-box i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--tblr-muted, #6c7a91);
    font-size: 0.9rem;
}

.bt-search-input {
    width: 100%;
    padding: 9px 14px 9px 38px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    font-size: 0.88rem;
    color: var(--tblr-dark, #182433);
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.bt-search-input:focus {
    background: #ffffff;
    border-color: var(--tblr-primary, #0b75ba);
    box-shadow: 0 0 0 3px rgba(11, 117, 186, 0.15);
    outline: none;
}

.bt-select-sort {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 9px 14px;
    font-size: 0.88rem;
    color: var(--tblr-dark, #182433);
    font-weight: 500;
    cursor: pointer;
}

.bt-btn-filter {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 9px 16px;
    font-size: 0.88rem;
    font-weight: 600;
    color: #495057;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.bt-btn-filter:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: var(--tblr-dark, #182433);
}

.bt-new-trip-btn {
    width: 100%;
    background: var(--tblr-primary, #0b75ba);
    color: #ffffff;
    border: none;
    border-radius: 12px;
    padding: 12px 24px;
    font-size: 0.98rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(11, 117, 186, 0.2);
    transition: all 0.2s ease;
    margin-bottom: 20px;
}

.bt-new-trip-btn:hover {
    background: #09619b;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(11, 117, 186, 0.3);
}

.bt-trip-card {
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: all 0.2s ease;
    position: relative;
}

.bt-trip-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
    border-color: #cbd5e1;
}

.bt-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.bt-card-title-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bt-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--tblr-primary, #0b75ba);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.82rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.bt-trip-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--tblr-dark, #182433);
    margin: 0;
    line-height: 1.3;
}

.bt-badge {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.bt-badge-ongoing {
    background: #e6f4ea;
    color: #137333;
}

.bt-badge-upcoming {
    background: #e8f0fe;
    color: #1a73e8;
}

.bt-badge-cancelled {
    background: #fce8e6;
    color: #c5221f;
}

.bt-badge-pending {
    background: #fef7e0;
    color: #b06000;
}

.bt-card-body-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.bt-dates-block {
    min-width: 120px;
}

.bt-date-item {
    font-size: 0.86rem;
    font-weight: 600;
    color: #495057;
    margin-bottom: 3px;
}

.bt-route-block {
    flex: 1;
    min-width: 180px;
}

.bt-route-item {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--tblr-dark, #182433);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.bt-price-action-block {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.bt-price-tag {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--tblr-dark, #182433);
}

.bt-amenities-icons {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--tblr-muted, #6c7a91);
    font-size: 0.9rem;
}

.bt-info-btn {
    background: #f1f5f9;
    color: var(--tblr-dark, #182433);
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    padding: 6px 18px;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-block;
}

.bt-info-btn:hover {
    background: #e2e8f0;
    color: var(--tblr-primary, #0b75ba);
}

.bt-card-footer {
    border-top: 1px solid #f1f5f9;
    margin-top: 12px;
    padding-top: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--tblr-muted, #6c7a91);
}

/* BIG EXPANDED CALENDAR SIDEBAR */
.bt-calendar-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    height: 100%;
}

.bt-calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.bt-calendar-month-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--tblr-dark, #182433);
    margin: 0;
}

.bt-calendar-nav-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #495057;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bt-calendar-nav-btn:hover {
    background: #f8fafc;
    color: var(--tblr-primary, #0b75ba);
    border-color: #cbd5e1;
}

.bt-calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--tblr-muted, #6c7a91);
    margin-bottom: 10px;
}

.bt-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
    margin-bottom: 20px;
}

.bt-cal-day {
    min-height: 44px;
    padding: 3px 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
    user-select: none;
    overflow: hidden;
}

.bt-cal-day:hover {
    background: #f1f5f9;
}

.bt-cal-day.empty {
    opacity: 0.25;
    cursor: default;
}

.bt-cal-day.active-day {
    background: var(--tblr-primary, #0b75ba) !important;
    color: #ffffff !important;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(11, 117, 186, 0.3);
}

.bt-cal-day.has-ongoing {
    background: #e6f4ea;
    color: #137333;
    font-weight: 700;
}

.bt-cal-day.has-upcoming {
    background: #e8f0fe;
    color: #1a73e8;
    font-weight: 700;
}

.bt-cal-day.has-pending {
    background: #fef7e0;
    color: #b06000;
    font-weight: 700;
}

.bt-cal-event-pill {
    font-size: 0.58rem;
    line-height: 1.1;
    font-weight: 700;
    padding: 1px 3px;
    border-radius: 4px;
    margin-top: 1px;
    max-width: 95%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.bt-cal-day.active-day .bt-cal-event-pill {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

.bt-cal-day.has-ongoing .bt-cal-event-pill {
    background: #ceebd6;
    color: #0d5224;
}

.bt-cal-day.has-upcoming .bt-cal-event-pill {
    background: #d2e3fc;
    color: #174ea6;
}

.bt-cal-day.has-pending .bt-cal-event-pill {
    background: #feefc3;
    color: #804700;
}

.bt-cal-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    position: absolute;
    bottom: 2px;
}

.bt-cal-dot.green {
    background: #137333;
}

.bt-cal-dot.blue {
    background: #1a73e8;
}

.bt-cal-dot.yellow {
    background: #b06000;
}

.bt-cal-dot.red {
    background: #c5221f;
}

.bt-agenda-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px;
    margin-top: 14px;
}

.bt-agenda-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--tblr-muted, #6c7a91);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bt-agenda-item {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.84rem;
}

.bt-agenda-item:last-child {
    margin-bottom: 0;
}

.bt-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 14px;
}

.bt-stat-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 10px 8px;
    text-align: center;
}

.bt-stat-val {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--tblr-dark, #182433);
}

.bt-stat-lbl {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--tblr-muted, #6c7a91);
}

/*Enhancement CSS*/
.gradient-info {
    background: linear-gradient(180deg, #e8f7fc 0%, #c7e8f4 100%) !important;
    color: #087ea8 !important;
}

.gradient-info.active {
    border-color: #35a9e8 !important;
}

.gradient-info i {
    color: #087ea8 !important;
}

.gradient-blue {
    background: linear-gradient(180deg, #e0effd 0%, #c0defa 100%) !important;
    color: #1478d4 !important;
}

.gradient-blue.active {
    border-color: #339af0 !important;
}

.gradient-blue i {
    color: #1478d4 !important;
}

.gradient-danger {
    background: linear-gradient(180deg, #fef0ed 0%, #fad6d1 100%) !important;
    color: #df4141 !important;
}

.gradient-danger.active {
    border-color: #ef5350 !important;
}

.gradient-danger i {
    color: #df4141 !important;
}

.gradient-purple {
    background: linear-gradient(180deg, #f1eafe 0%, #ded1f7 100%) !important;
    color: #7040c4 !important;
}

.gradient-purple.active {
    border-color: #8b5cf6 !important;
}

.gradient-purple i {
    color: #7040c4 !important;
}

.gradient-success {
    background: linear-gradient(180deg, #e5fbf2 0%, #c5efdf 100%) !important;
    color: #008f68 !important;
}

.gradient-success.active {
    border-color: #20b486 !important;
}

.gradient-success i {
    color: #008f68 !important;
}

.gradient-pink {
    background: linear-gradient(180deg, #feeff4 0%, #f7d1e0 100%) !important;
    color: #d83272 !important;
}

.gradient-pink.active {
    border-color: #e83e8c !important;
}

.gradient-pink i {
    color: #d83272 !important;
}

.gradient-primary {
    background: linear-gradient(180deg, #e8f4fe 0%, #c7e3fa 100%) !important;
    color: #1976d2 !important;
}

.gradient-primary.active {
    border-color: #339af0 !important;
}

.gradient-primary i {
    color: #1976d2 !important;
}

.gradient-teal {
    background: linear-gradient(180deg, #e3fbf9 0%, #c2eeeb 100%) !important;
    color: #008f8c !important;
}

.gradient-teal.active {
    border-color: #20aaa5 !important;
}

.gradient-teal i {
    color: #008f8c !important;
}

.small,
small {
    font-size: 0.75em;
}

.fw-extrabold {
    font-weight: 800;
}

.bg-copilot-header {
    background: linear-gradient(
        90deg,
        #123e58 0%,
        #0d4c6a 45%,
        #07556d 75%,
        #07596d 100%
    );
}

.ai-chat-icon {
    width: 32px !important;
    height: 32px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.prompt-chip {
    padding: 0.35rem;
}

.f16-select-employee {
    scrollbar-color: #abdcb3 #eee;
}

.table,
.table div,
.table span:not(.badge),
.table p,
.table code {
    font-size: 0.9rem !important;
}

table small,
table .small {
    font-size: 0.8rem !important;
}

table .fw-light,
table .fw-lighter,
table .fw-normal,
table .fw-medium,
table .fw-semibold,
table .fw-bold,
table .fw-bolder {
    font-weight: 500 !important;
}

div.dt-container .dt-paging .dt-paging-button.current,
div.dt-container .dt-paging .dt-paging-button.current:hover {
    background: #0171f7;
    color: #fff !important;
}

#sidebar-menu .navbar-nav .dropdown-menu .dropdown-item:hover i,
#sidebar-menu .navbar-nav .dropdown-menu .dropdown-item.active i {
    color: #fff !important;
}

#sidebar-menu .navbar-nav .nav-item .nav-link:hover i {
    color: #fff !important;
}

.modal-header.bg-gradient {
    background:
        linear-gradient(
            135deg,
            transparent 0 38%,
            rgba(0, 80, 190, 0.12) 38% 55%,
            transparent 55% 100%
        ),
        linear-gradient(
            135deg,
            transparent 0 55%,
            rgba(255, 255, 255, 0.06) 55% 72%,
            transparent 72% 100%
        ),
        linear-gradient(
            135deg,
            transparent 0 72%,
            rgba(0, 100, 220, 0.1) 72% 89%,
            transparent 89% 100%
        ),
        linear-gradient(90deg, #0878ee 0%, #168ff5 55%, #29b4fa 100%) !important;
}

body[data-bs-theme="dark"] * {
    scrollbar-width: thin;
    scrollbar-color: #22364f transparent;
}

body[data-bs-theme="dark"] html,
body[data-bs-theme="dark"] #sidebar-menu,
body[data-bs-theme="dark"] .navbar {
    scrollbar-width: thin;
    scrollbar-color: #22364f transparent;
}

html:has(body[data-bs-theme="dark"]) {
    scrollbar-width: thin;
    scrollbar-color: #22364f transparent;
}

[data-bs-theme="dark"] .bg-white {
    background-color: #151f2c !important;
}

[data-bs-theme="dark"] .bg-light {
    background-color: #1d2938 !important;
}

[data-bs-theme="dark"] .border-light {
    border-color: #151f2c !important;
}

[data-bs-theme="dark"] .text-dark {
    color: #647a91 !important;
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection {
    background: #151f2c;
    border-color: #223348;
}

[data-bs-theme="dark"]
    .select2-container--bootstrap-5
    .select2-dropdown
    .select2-search,
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown,
[data-bs-theme="dark"]
    .select2-container--bootstrap-5
    .select2-dropdown
    .select2-search
    .select2-search__field {
    background: #182433 !important;
    color: #597491;
    border-color: #223348 !important;
}

[data-bs-theme="dark"]
    .select2-container--bootstrap-5
    .select2-dropdown
    .select2-results__options
    .select2-results__option.select2-results__option--highlighted {
    color: #597491;
    background-color: #151f2c;
}

[data-bs-theme="dark"] .btn-warning.text-dark,
[data-bs-theme="dark"] .bg-warning.text-dark {
    color: #151f2c !important;
}

[data-bs-theme="dark"] .btn-outline-warning:hover {
    color: #151f2c !important;
}

[data-bs-theme="dark"] .card {
    border: 1px solid #25384f !important;
}

[data-bs-theme="dark"] .apexcharts-datalabel,
[data-bs-theme="dark"] .apexcharts-datalabel-label,
[data-bs-theme="dark"] .apexcharts-datalabel-value,
[data-bs-theme="dark"] .apexcharts-pie-name-label,
[data-bs-theme="dark"] .apexcharts-pie-name-label-group,
[data-bs-theme="dark"] .apexcharts-pie-label-connector,
[data-bs-theme="dark"] .apexcharts-unit-outer-label,
[data-bs-theme="dark"] .apexcharts-unit-outer-label-group,
[data-bs-theme="dark"] .apexcharts-unit-label-connector,
[data-bs-theme="dark"] .apexcharts-legend-text,
[data-bs-theme="dark"] .apexcharts-text tspan {
    fill: #64748b !important;
    color: #64748b !important;
}

[data-bs-theme="dark"] .navbar-brand-image {
    filter: invert(1);
}

[data-bs-theme="dark"] #sidebar-menu .nav-link:focus,
[data-bs-theme="dark"] #sidebar-menu .nav-link:hover,
[data-bs-theme="dark"] #sidebar-menu .nav-link:active,
[data-bs-theme="dark"] #sidebar-menu .nav-item.active > .nav-link {
    background: #e34825;
    color: #fff !important;
}

[data-bs-theme="dark"] .navbar-vertical .dropdown-item.active:hover,
[data-bs-theme="dark"] .navbar-vertical .dropdown-item:hover {
    background: #e34825;
}

[data-bs-theme="dark"] .navbar-vertical .dropdown-item.active {
    background: #9f3118 !important;
}

[data-bs-theme="dark"] #sidebar-menu i.text-primary {
    color: #e34825 !important;
}

[data-bs-theme="dark"] #sidebar-menu .nav-item.active > .nav-link i {
    color: #fff !important;
}

[data-bs-theme="dark"] .job-portal-header {
    background: #182433;
    border-color: #25384f;
}

[data-bs-theme="dark"] .job-search-panel {
    background: #182433;
}

[data-bs-theme="dark"] .job-search-table-wrap {
    border: 1px solid #25384f;
    background: #182433;
    border-top: 3px solid #3caa3c;
}

[data-bs-theme="dark"] .job-search-table tbody td {
    border-color: #25384f;
    background: #182433;
}

[data-bs-theme="dark"] .job-search-table thead th {
    background: #151f2c !important;
    border-bottom: 1px solid #25384f;
}

[data-bs-theme="dark"] .job-search-select {
    border-color: #25384f;
    background-color: #182433;
}

[data-bs-theme="dark"] .job-search-entries__select {
    border-color: #25384f;
}

[data-bs-theme="dark"] #sidebar-menu {
    border-right: 1px solid #25384f;
}

[data-bs-theme="dark"] .dt-search input,
[data-bs-theme="dark"] .dt-length select {
    border: 1px solid #25384f !important;
}

[data-bs-theme="dark"] .dt-length select option {
    color: #6782bd !important;
}

body[data-bs-theme="dark"] #absence .card,
body[data-bs-theme="dark"] #absence .myleave-card {
    background: #172534 !important;
    border-color: #2d4055 !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22) !important;
}

body[data-bs-theme="dark"] #absence h3,
body[data-bs-theme="dark"] #absence .myleave-card-title,
body[data-bs-theme="dark"] #absence .fw-bold,
body[data-bs-theme="dark"] #absence .myleave-table th,
body[data-bs-theme="dark"] #absence .myleave-table td,
body[data-bs-theme="dark"] #absence .myleave-taken-text,
body[data-bs-theme="dark"] #absence .myleave-circle-center .val,
body[data-bs-theme="dark"] #absence .myleave-circle-center .sub {
    color: #edf5ff !important;
}

body[data-bs-theme="dark"] #absence .myleave-table th {
    background: #1a2735 !important;
    border-color: #2d4055 !important;
    color: #bfd1ea !important;
}

body[data-bs-theme="dark"] #absence .myleave-table td {
    background: #172534 !important;
    border-color: #2d4055 !important;
    color: #edf5ff !important;
}

body[data-bs-theme="dark"] #absence .text-secondary,
body[data-bs-theme="dark"] #absence .text-muted,
body[data-bs-theme="dark"] #absence .text-dark,
body[data-bs-theme="dark"] #absence .text-warning,
body[data-bs-theme="dark"] #absence .text-success,
body[data-bs-theme="dark"] #absence .text-danger,
body[data-bs-theme="dark"] #absence .text-primary {
    color: #dfeeff !important;
}

body[data-bs-theme="dark"] #absence .btn-primary {
    background: linear-gradient(135deg, #1f7ae8 0%, #0b67d8 100%);
    border-color: #1f7ae8;
}

body[data-bs-theme="dark"]
    #absence
    .myleave-circle-wrapper
    svg
    path[stroke="#e2e8f0"],
body[data-bs-theme="dark"]
    #absence
    .myleave-circle-wrapper
    svg
    path[stroke="#f1f5f9"] {
    stroke: #334968 !important;
}

body[data-bs-theme="dark"] #absence .myleave-legend-dot {
    opacity: 0.9;
}

body[data-bs-theme="dark"] #absence .card .table-responsive {
    background: transparent;
}

body[data-bs-theme="dark"] #latestUpdate .latest-update-item {
    background: rgba(18, 28, 38, 0.96);
    border-color: #2a3b4d;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

body[data-bs-theme="dark"] #latestUpdate .latest-update-content h3 {
    color: #edf5ff;
}

body[data-bs-theme="dark"] #latestUpdate .latest-update-summary,
body[data-bs-theme="dark"] #latestUpdate .latest-update-body {
    color: #d5e4f6;
}

body[data-bs-theme="dark"] #latestUpdate .latest-update-date {
    color: #dfeafc;
}

body[data-bs-theme="dark"] #latestUpdate .featured-badge {
    background: rgba(255, 203, 92, 0.12);
    color: #f9d77c;
    border: 1px solid rgba(255, 203, 92, 0.2);
}

body[data-bs-theme="dark"] #profileUpdate .profile-main-card {
    background: #172534;
    border-color: #2f4056;
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.22);
}

body[data-bs-theme="dark"] #profileUpdate .profile-content-card {
    background: #172534;
}

body[data-bs-theme="dark"] #profileUpdate .profile-section-title,
body[data-bs-theme="dark"] #profileUpdate .profile-section-title i,
body[data-bs-theme="dark"] #profileUpdate .profile-info-value,
body[data-bs-theme="dark"] #profileUpdate .profile-feature-title {
    color: #edf5ff;
}

body[data-bs-theme="dark"] #profileUpdate .profile-info-label {
    color: #a8bad0;
}

body[data-bs-theme="dark"] #profileUpdate .profile-divider {
    border-top-color: #2d4055;
}

body[data-bs-theme="dark"] #profileUpdate .profile-feature-card {
    background: #172534;
    border-color: #2d4055;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

body[data-bs-theme="dark"] #profileUpdate .profile-feature-action {
    color: #6fb1ff;
}

body[data-bs-theme="dark"] #profileUpdate .profile-status-badge {
    background: #24b15d;
}

body[data-bs-theme="dark"] .service-center-nav .nav-link {
    background: #151f2c !important;
    border-color: #2e4159;
    color: #eaf3ff !important;
}

body[data-bs-theme="dark"] .service-center-nav .nav-link i {
    color: #dfeaff;
}

body[data-bs-theme="dark"] .service-center-nav .nav-link.active {
    background: rgba(19, 47, 73, 0.9);
    color: #dfeeff;
}

body[data-bs-theme="dark"] #latestUpdate .latest-update-item {
    background: rgba(20, 31, 42, 0.94);
    border-color: #2c3d50;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

body[data-bs-theme="dark"] #latestUpdate .latest-update-content h3 {
    color: #edf4ff;
}

body[data-bs-theme="dark"] #latestUpdate .latest-update-summary {
    color: #dbe9fb;
}

body[data-bs-theme="dark"] #latestUpdate .latest-update-body {
    color: #bfd0e7;
}

body[data-bs-theme="dark"] #latestUpdate .latest-update-date {
    color: #d9eafc;
}

body[data-bs-theme="dark"] #latestUpdate .featured-badge {
    background: rgba(255, 194, 91, 0.14);
    color: #ffd98a;
    border: 1px solid rgba(255, 194, 91, 0.2);
}

body[data-bs-theme="dark"] #profileUpdate .profile-main-card {
    background: #172534;
    border-color: #2f4056;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

body[data-bs-theme="dark"] #profileUpdate .profile-content-card {
    background: #172534;
}

body[data-bs-theme="dark"] #profileUpdate .profile-section-title {
    color: #edf4ff;
}

body[data-bs-theme="dark"] #profileUpdate .profile-section-title i {
    color: #dfeeff;
}

body[data-bs-theme="dark"] #profileUpdate .profile-info-label {
    color: #a7bad1;
}

body[data-bs-theme="dark"] #profileUpdate .profile-info-value {
    color: #f0f6ff;
}

body[data-bs-theme="dark"] #profileUpdate .profile-divider {
    border-top-color: #2d4055;
}

body[data-bs-theme="dark"] #profileUpdate .profile-feature-card {
    background: #172534;
    border-color: #2d4055;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15);
}

body[data-bs-theme="dark"] .feature {
    background: #172534;
    border-color: #2d4055;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15);
}

body[data-bs-theme="dark"] .feature h3 {
    color: #bfd0e7;
}

body[data-bs-theme="dark"] .feature p {
    color: #ffffff;
}

body[data-bs-theme="dark"] .service-center-nav .nav-link.active {
    box-shadow: none;
    border-color: #064d8f !important;
}

body[data-bs-theme="dark"] .tooltip .tooltip-arrow::before {
    border-top-color: #394d67 !important;
}

body[data-bs-theme="dark"] .tooltip-inner {
    background-color: #394d67 !important;
}

/* Letters dashboard */
.letters-dashboard {
    --letters-ink: #172b4d;
    --letters-muted: #718096;
    --letters-border: #e5edf5;
    --letters-surface: #ffffff;
    --letters-soft: #f5f9fd;
    --letters-blue: #1769aa;
}

@media (min-width: 768px) {
    .master-suggestions {
        width: calc(200% + 1.5rem);
    }
}

.master-suggestions {
    align-content: flex-start;
}

.letters-hero {
    position: relative;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    min-height: 145px;
    margin: 0 0 2rem;
    overflow: hidden;
    border-radius: 16px;
    background: linear-gradient(112deg, #eaf5ff 0%, #f6fbff 55%, #fff5e7 100%);
}

.letters-hero::after {
    position: absolute;
    right: 29%;
    bottom: -70px;
    width: 190px;
    height: 190px;
    border: 28px solid rgba(23, 105, 170, 0.08);
    border-radius: 50%;
    content: "";
}

.letters-hero-copy {
    position: relative;
    z-index: 1;
    max-width: 55%;
    padding: 1.35rem 2.25rem;
}

.letters-eyebrow,
.letters-section-kicker {
    color: var(--letters-blue);
    font-size: 0.66rem;
    /* font-weight: 800; */
    letter-spacing: 0.12em;
}

.letters-hero h2 {
    margin: 0.45rem 0 0.4rem;
    color: var(--letters-ink);
    font-size: 1.65rem;
    /* font-weight: 800; */
}

.letters-hero p {
    margin: 0;
    color: var(--letters-muted);
    font-size: 0.86rem;
}

.letters-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.25rem;
    color: var(--letters-ink);
    font-size: 0.72rem;
    font-weight: 700;
}

.letters-hero-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.letters-hero-meta i {
    color: var(--letters-blue);
    font-size: 1rem;
}

.letters-hero-art {
    position: relative;
    z-index: 1;
    width: 45%;
    height: 250px;
    min-height: 145px;
}

.letters-hero-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    mix-blend-mode: multiply;
}

.letters-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--letters-border);
}

.letters-section-heading h3 {
    margin: 0.25rem 0 0;
    color: var(--letters-ink);
    font-size: 1.08rem;
    /* font-weight: 800; */
}

.letters-document-count {
    color: var(--letters-muted);
    font-size: 0.75rem;
    font-weight: 700;
}

.letters-document-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.letters-document-card {
    display: flex;
    gap: 1rem;
    min-height: 190px;
    padding: 1.15rem;
    border: 1px solid var(--letters-border);
    border-radius: 12px;
    background: var(--letters-surface);
    box-shadow: 0 6px 16px rgba(31, 52, 80, 0.06);
    transition:
        transform 160ms ease,
        box-shadow 160ms ease;
    box-shadow: rgba(164, 162, 162, 0.5) 0px 0px 0px 1px inset !important;
}

.letters-document-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(31, 52, 80, 0.11);
}

.letters-document-icon,
.letters-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: #d64545;
    background: #fff0f0;
}

.letters-document-icon {
    width: 2.7rem;
    height: 2.7rem;
    border-radius: 10px;
    font-size: 1.35rem;
}

.letters-document-content {
    min-width: 0;
}

.letters-document-type {
    color: var(--letters-muted);
    font-size: 0.62rem;
    /* font-weight: 800; */
    letter-spacing: 0.08em;
}

.letters-document-card h4 {
    margin: 0.4rem 0 0.45rem;
    color: var(--letters-ink);
    font-size: 1rem;
    /* font-weight: 800; */
    line-height: 1.35;
}

.letters-document-card p {
    min-height: 2.4em;
    margin: 0 0 1rem;
    color: var(--letters-muted);
    font-size: 0.75rem;
    line-height: 1.5;
}

.letters-download-button {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--letters-blue);
    font-size: 0.75rem;
    font-weight: 800;
    text-decoration: none;
}

.letters-download-button:hover {
    color: #0b4d80;
    text-decoration: underline;
}

.letters-empty-state {
    grid-column: 1 / -1;
    padding: 2.5rem 1rem;
    border: 1px dashed #cbd8e6;
    border-radius: 12px;
    background: var(--letters-soft);
    text-align: center;
}

.letters-empty-icon {
    width: 3.25rem;
    height: 3.25rem;
    margin: 0 auto 0.8rem;
    border-radius: 50%;
    font-size: 1.45rem;
}

.letters-empty-state h4 {
    margin: 0 0 0.35rem;
    color: var(--letters-ink);
    font-size: 1rem;
}

.letters-empty-state p {
    margin: 0;
    color: var(--letters-muted);
    font-size: 0.78rem;
}

@media (max-width: 767.98px) {
    .letters-hero-copy {
        max-width: 100%;
        padding: 1.5rem;
    }

    .letters-hero-art {
        display: none;
    }

    .letters-hero h2 {
        font-size: 1.35rem;
    }

    .letters-document-grid {
        grid-template-columns: 1fr;
    }
}

body[data-bs-theme="dark"] .letters-dashboard {
    --letters-ink: #edf4ff;
    --letters-muted: #a8bad0;
    --letters-border: #2d4055;
    --letters-surface: #172534;
    --letters-soft: #1c2d3e;
    --letters-blue: #74b7ff;
}

body[data-bs-theme="dark"] .letters-hero {
    background: linear-gradient(112deg, #172c40 0%, #1d3041 56%, #3b3024 100%);
}

body[data-bs-theme="dark"] .letters-hero-art img {
    mix-blend-mode: screen;
    opacity: 0.72;
}

body[data-bs-theme="dark"] .letters-document-icon,
body[data-bs-theme="dark"] .letters-empty-icon {
    color: #ff8b8b;
    background: #3a2830;
}

body[data-bs-theme="dark"] .letters-document-card {
    background: var(--letters-surface);
    border-color: var(--letters-border);
}

body[data-bs-theme="dark"] .letters-empty-state {
    background: var(--letters-soft);
    border-color: #48617c;
}

/* Loan dashboard */
.loan-dashboard {
    --loan-ink: #172b4d;
    --loan-muted: #718096;
    --loan-border: #e7edf5;
    --loan-surface: #ffffff;
    --loan-soft: #f6f9fc;
    color: var(--loan-ink);
}

.loan-dashboard-header {
    min-height: 92px;
    padding: 0.75rem 1.25rem;
    border: 1px solid var(--loan-border);
    border-radius: 14px;
    background: linear-gradient(115deg, #f8fbff 0%, #ffffff 62%, #fff8ed 100%);
}

.loan-eyebrow {
    margin-bottom: 0.3rem;
    color: #718096;
    font-size: 0.67rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.loan-dashboard-header h3 {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--loan-ink) !important;
    font-size: 1.25rem;
}

.loan-title-icon,
.loan-section-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 10px;
}

.loan-title-icon {
    width: 3.4rem;
    height: 3.4rem;
    margin-right: 0.15rem;
    color: #1769aa;
    background: #e6f2ff;
    font-size: 1.5rem;
}

.loan-statement-button {
    border: 0;
    border-radius: 8px;
    padding: 0.62rem 1rem;
    box-shadow: 0 5px 12px rgba(23, 105, 170, 0.18);
}

.loan-metric-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--loan-border) !important;
    border-top: 3px solid transparent !important;
    background: var(--loan-surface) !important;
    transition:
        transform 160ms ease,
        box-shadow 160ms ease;
    box-shadow: rgba(164, 162, 162, 0.5) 0px 0px 0px 1px inset !important;
}

.loan-metric-card:hover,
.loan-record-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(31, 52, 80, 0.1) !important;
}

.loan-metric-card--primary {
    border-top-color: #1769aa !important;
}

.loan-metric-card--warning {
    border-top-color: #e9a227 !important;
}

.loan-metric-card--danger {
    border-top-color: #d9535d !important;
}

.loan-metric-card--info {
    border-top-color: #18a6b8 !important;
}

.loan-metric-card .text-uppercase {
    color: var(--loan-muted) !important;
    letter-spacing: 0.04em;
    font-size: 0.65rem;
}

.loan-metric-card .h2 {
    color: var(--loan-ink) !important;
    font-size: 1.45rem;
    letter-spacing: -0.02em;
}

.loan-section > .d-flex {
    padding-bottom: 0.7rem;
    border-bottom: 1px solid var(--loan-border);
}

.loan-section h4 {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--loan-ink) !important;
    font-size: 1.05rem;
}

.loan-section-icon {
    width: 1.85rem;
    height: 1.85rem;
    font-size: 0.95rem;
}

.loan-section-icon--warning {
    color: #b87300;
    background: #fff3d8;
}

.loan-section-icon--info {
    color: #07869a;
    background: #def8fb;
}

.loan-count-badge {
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 0.32rem 0.7rem;
    font-size: 0.72rem;
    font-weight: 800;
}

.loan-count-badge--warning {
    color: #9a6500;
    background: #fff4da;
    border-color: #f5d58b;
}

.loan-count-badge--info {
    color: #087d8e;
    background: #e3f9fb;
    border-color: #a9e8ee;
}

.loan-record-card {
    border: 1px solid var(--loan-border) !important;
    border-left: 4px solid transparent !important;
    background: var(--loan-surface) !important;
    box-shadow: rgba(164, 162, 162, 0.5) 0px 0px 0px 1px inset !important;
}

.loan-record-card--loan {
    border-left-color: #e9a227 !important;
}

.loan-record-card--advance {
    border-left-color: #18a6b8 !important;
}

.loan-record-card .bg-light,
.loan-balance-panel {
    background: var(--loan-soft) !important;
    border: 1px solid #edf1f6;
}

.loan-record-card .h5,
.loan-record-card .text-dark,
.loan-record-card strong {
    color: var(--loan-ink) !important;
}

.loan-record-card .border-top {
    border-color: var(--loan-border) !important;
}

.loan-reason {
    background: #fffaf0;
    border: 1px solid #f8e6bd;
}

@media (max-width: 575.98px) {
    .loan-dashboard-header {
        align-items: stretch !important;
    }

    .loan-statement-button {
        width: 100%;
        justify-content: center;
    }

    .loan-dashboard-header .text-end {
        width: 100%;
        text-align: left !important;
    }
}

body[data-bs-theme="dark"] .loan-dashboard {
    --loan-ink: #edf4ff;
    --loan-muted: #a8bad0;
    --loan-border: #2d4055;
    --loan-surface: #172534;
    --loan-soft: #1c2d3e;
}

body[data-bs-theme="dark"] .loan-dashboard-header {
    background: linear-gradient(115deg, #172b3e 0%, #172534 65%, #3a3020 100%);
}

body[data-bs-theme="dark"] .loan-dashboard-header h3,
body[data-bs-theme="dark"] .loan-metric-card .h2,
body[data-bs-theme="dark"] .loan-section h4,
body[data-bs-theme="dark"] .loan-record-card .h5,
body[data-bs-theme="dark"] .loan-record-card .text-dark,
body[data-bs-theme="dark"] .loan-record-card strong {
    color: var(--loan-ink) !important;
}

body[data-bs-theme="dark"] .loan-metric-card,
body[data-bs-theme="dark"] .loan-record-card {
    background: var(--loan-surface) !important;
    border-color: var(--loan-border) !important;
}

body[data-bs-theme="dark"] .loan-metric-card--primary {
    border-top-color: #5aa8ef !important;
}

body[data-bs-theme="dark"] .loan-metric-card--warning {
    border-top-color: #f1b94b !important;
}

body[data-bs-theme="dark"] .loan-metric-card--danger {
    border-top-color: #ef7b84 !important;
}

body[data-bs-theme="dark"] .loan-metric-card--info {
    border-top-color: #44c8d5 !important;
}

body[data-bs-theme="dark"] .loan-record-card--loan {
    border-left-color: #f1b94b !important;
}

body[data-bs-theme="dark"] .loan-record-card--advance {
    border-left-color: #44c8d5 !important;
}

body[data-bs-theme="dark"] .loan-record-card .bg-light,
body[data-bs-theme="dark"] .loan-balance-panel {
    background: var(--loan-soft) !important;
    border-color: var(--loan-border);
}

body[data-bs-theme="dark"] .loan-reason {
    background: #302b20;
    border-color: #594a2c;
}

/* Volunteer KPI cards */
.volunteer-dashboard {
    --volunteer-ink: #172b4d;
    --volunteer-muted: #718096;
    --volunteer-border: #e7edf5;
    --volunteer-surface: #ffffff;
}

.volunteer-metric-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--volunteer-border) !important;
    border-top: 3px solid transparent !important;
    background: var(--volunteer-surface) !important;
    color: var(--volunteer-ink);
    transition:
        transform 160ms ease,
        box-shadow 160ms ease;
    box-shadow: rgba(164, 162, 162, 0.5) 0px 0px 0px 1px inset !important;
}

.volunteer-metric-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(31, 52, 80, 0.1) !important;
}

.volunteer-metric-card--primary {
    border-top-color: #1769aa !important;
}

.volunteer-metric-card--success {
    border-top-color: #2fb344 !important;
}

.volunteer-metric-card--warning {
    border-top-color: #e9a227 !important;
}

.volunteer-metric-card--info {
    border-top-color: #18a6b8 !important;
}

.volunteer-metric-card .small {
    color: var(--volunteer-muted);
    font-size: 0.65rem;
    letter-spacing: 0.04em;
}

.volunteer-metric-card h3 {
    color: var(--volunteer-ink);
    font-size: 1.35rem;
    letter-spacing: -0.02em;
}

.volunteer-metric-card h3 small {
    color: var(--volunteer-muted);
    font-weight: 700;
}

.volunteer-metric-icon {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 50%;
    font-size: 1rem;
}

.volunteer-metric-card--primary .volunteer-metric-icon {
    color: #1769aa;
    background: #e6f2ff;
}

.volunteer-metric-card--success .volunteer-metric-icon {
    color: #278d3a;
    background: #e5f7e9;
}

.volunteer-metric-card--warning .volunteer-metric-icon {
    color: #b87300;
    background: #fff3d8;
}

.volunteer-metric-card--info .volunteer-metric-icon {
    color: #07869a;
    background: #def8fb;
}

body[data-bs-theme="dark"] .volunteer-dashboard {
    --volunteer-ink: #edf4ff;
    --volunteer-muted: #a8bad0;
    --volunteer-border: #2d4055;
    --volunteer-surface: #172534;
}

body[data-bs-theme="dark"] .volunteer-metric-card {
    border-color: var(--volunteer-border) !important;
    background: var(--volunteer-surface) !important;
}

body[data-bs-theme="dark"] .volunteer-metric-card--primary {
    border-top-color: #5aa8ef !important;
}

body[data-bs-theme="dark"] .volunteer-metric-card--success {
    border-top-color: #65c978 !important;
}

body[data-bs-theme="dark"] .volunteer-metric-card--warning {
    border-top-color: #f1b94b !important;
}

body[data-bs-theme="dark"] .volunteer-metric-card--info {
    border-top-color: #44c8d5 !important;
}

body[data-bs-theme="dark"]
    .volunteer-metric-card--primary
    .volunteer-metric-icon {
    color: #74b7ff;
    background: #203b56;
}

body[data-bs-theme="dark"]
    .volunteer-metric-card--success
    .volunteer-metric-icon {
    color: #83d891;
    background: #1e4030;
}

body[data-bs-theme="dark"]
    .volunteer-metric-card--warning
    .volunteer-metric-icon {
    color: #f4c56b;
    background: #49391e;
}

body[data-bs-theme="dark"] .volunteer-metric-card--info .volunteer-metric-icon {
    color: #73d9e2;
    background: #1d4148;
}

body[data-bs-theme="dark"] #profileUpdate .profile-feature-title {
    color: #edf4ff;
}

body[data-bs-theme="dark"] #profileUpdate .profile-feature-action {
    color: #6fb1ff;
}

body[data-bs-theme="dark"] header.navbar {
    background:
        linear-gradient(
            135deg,
            transparent 0%,
            transparent 32%,
            rgba(24, 36, 51, 0.55) 32%,
            rgba(24, 36, 51, 0.55) 50%,
            transparent 50%
        ),
        linear-gradient(
            135deg,
            transparent 0%,
            transparent 62%,
            rgba(21, 31, 44, 0.65) 52%,
            rgba(21, 31, 44, 0.65) 70%,
            transparent 80%
        ),
        linear-gradient(90deg, #151f2c 0%, #182433 45%, #151f2c 100%);
}

body[data-bs-theme="dark"] .page-wrapper {
    background: linear-gradient(90deg, #151f2c 0%, #182433 45%, #151f2c 100%);
}

body[data-bs-theme="dark"] .modal-content {
    border-color: #223448;
}

body[data-bs-theme="dark"] .table-light {
    --tblr-table-color: #182433;
    --tblr-table-bg: #182433;
    --tblr-table-border-color: #25384f;
}

body[data-bs-theme="dark"] .card-header-tabs .nav-link.active {
    background-color: #151f2c;
    border-bottom-color: #151f2c;
}

body[data-bs-theme="dark"] .btn-outline-secondary {
    border-color: #25384f;
}

body[data-bs-theme="dark"] .select2-dropdown {
    border-color: #223448 !important;
}

body[data-bs-theme="dark"] .select2-selection {
    background: #172331 !important;
    border-color: #25384f !important;
}

body[data-bs-theme="dark"] .select2-results__options {
    background: #172331;
}

body[data-bs-theme="dark"] .select2-search {
    background: #182433 !important;
    border-color: #223448 !important;
}

body[data-bs-theme="dark"] .select2-search input {
    border-color: #223448 !important;
    background: #16212d !important;
}

body[data-bs-theme="dark"] .select2-container .select2-selection__rendered {
    color: #fff !important;
}

body[data-bs-theme="dark"]
    .select2-container--default
    .select2-results__option {
    color: #fff !important;
}

body[data-bs-theme="dark"] .page-title {
    color: #fff;
}

body[data-bs-theme="dark"] .dt-container .dt-paging .dt-paging-button.disabled {
    color: #5f7ab8 !important;
}

body[data-bs-theme="dark"] .password-toggle-group .input-group-text {
    background: #1d2c3f;
}

body[data-bs-theme="dark"] .input-group-flat:focus-within .form-control,
body[data-bs-theme="dark"] .input-group-flat:focus-within .input-group-text {
    border-color: #233345 !important;
}

body[data-bs-theme="dark"] .lang-drop .dropdown-header {
    background: #151f2c;
}

body[data-bs-theme="dark"] .auth-card .auth-logo img {
    filter: invert(1);
}

input#chatInput {
    font-size: 1rem;
}

label.form-check {
    display: flex;
    align-items: center;
    gap: 5px;
}

.page-body {
    margin-top: var(--tblr-page-padding-y) !important;
}

.dropdown-header {
    background: #d3eec3;
}

.lang-drop .dropdown-header {
    background: #fff;
}

.nav-link:focus,
.nav-link:hover {
    background-color: transparent;
}

.btn-sm,
.form-select-sm,
.input-group-sm {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

.card .rounded-circle:has(i) {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.employee-profile-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.35rem;
    overflow-x: auto;
    padding: 0.3rem;
    /* border: 1px solid #ececf6; */
    border-radius: 1rem;
    /* background: #f7f7fc;
    box-shadow: 0 0.35rem 1.25rem rgba(31, 35, 66, 0.06); */
    scrollbar-width: thin;
}

.employee-profile-tabs .nav-item {
    flex: 0 0 auto;
}

.employee-profile-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    width: 14.5rem;
    min-height: 2.65rem;
    padding: 0.6rem 0.85rem;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    color: #85869a;
    font-size: 0.82rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: #ffffff;
    box-shadow: 0px 0rem 0rem 1px rgba(31, 35, 66, 0.06);
    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease;
}

.employee-profile-tabs .nav-link i {
    flex: 0 0 auto;
    color: #a4a5b7 !important;
    font-size: 1rem;
}

.employee-profile-tab-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.employee-profile-tabs .nav-link .badge {
    flex: 0 0 auto;
}

.employee-profile-tabs .nav-link:hover {
    color: #71be43;
    background: rgba(255, 255, 255, 0.72);
}

.employee-profile-tabs .nav-link.active {
    color: #ffffff;
    border-color: #cbf5b2;
    background: #71be43;
    box-shadow: 0 0.2rem 0.65rem rgba(47, 61, 130, 0.1);
}

.employee-profile-tabs .nav-link.active i {
    color: #ffffff !important;
}

.employee-profile-tabs .badge {
    padding: 0.2rem 0.4rem;
    border-radius: 999px;
    font-size: 0.68rem;
}

@media (max-width: 767.98px) {
    .employee-profile-tabs {
        margin-right: -0.75rem;
        margin-left: -0.75rem;
        border-right: 0;
        border-left: 0;
        border-radius: 0;
    }
}

.alert.alert-dismissible {
    display: flex;
    align-items: center;
    gap: 5px;
}

.dash-banner {
    background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #3b82f6 100%);
}

body[data-bs-theme="dark"] .dash-banner {
    background: linear-gradient(135deg, #001735 0%, #1a3152 50%, #151f2c 100%);
}

.lifecycle-stepper span.badge {
    width: 32px;
    height: 32px;
}

@media only screen and (min-width: 1024px) and (max-width: 1198.98px) {
    .lifecycle-stepper span.badge {
        width: 36px;
        height: 30px;
    }
}

/*Arabic CSS Starts*/
.lang-ar .nav-link-icon {
    margin-right: 0;
    margin-left: 0.5rem;
}

.lang-ar .navbar-expand-lg .navbar-collapse .dropdown-toggle:after {
    margin-right: auto;
    margin-left: unset;
}

.lang-ar
    #sidebar-menu
    .navbar-nav
    .dropdown-menu
    .dropdown-item
    i.ti-arrow-badge-right {
    transform: rotate(180deg);
}

.lang-ar .dropdown-header {
    text-align: start;
}

.lang-ar .breadcrumb-item + .breadcrumb-item::before {
    float: right;
    padding-left: var(--tblr-breadcrumb-item-padding-x);
    padding-right: unset;
}

.lang-ar [aria-label="فتح قائمة المستخدم"] .ps-2 {
    padding-right: 0.5rem !important;
    padding-left: unset !important;
}

.lang-ar .card-actions {
    margin: -0.5rem auto -0.5rem -0.5rem;
    padding-left: 0.5rem;
    padding-right: unset;
}

.lang-ar div.dt-container div.dt-layout-row div.dt-layout-cell.dt-layout-start {
    justify-content: flex-end;
    margin-left: auto;
    margin-right: unset;
}

.lang-ar div.dt-container div.dt-layout-row div.dt-layout-cell.dt-layout-end {
    justify-content: flex-start;
    margin-right: auto;
    margin-left: unset;
}

.lang-ar .dropdown-menu-arrow.dropdown-menu-end:before {
    left: 0.75rem;
    right: auto;
}

.lang-ar .breadcrumb-item + .breadcrumb-item {
    padding-right: var(--tblr-breadcrumb-item-padding-x);
    padding-left: unset;
}

.lang-ar .ti-arrow-left,
.lang-ar .ti-arrow-right {
    transform: rotate(180deg);
}

.lang-ar #chatForm .ti-send {
    transform: rotate(270deg);
}

.lang-ar .form-check {
    display: inline-flex;
    align-items: center;
    gap: 50px;
}

.lang-ar .password-toggle-group .input-group-text {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: var(--tblr-border-radius) !important;
    border-bottom-left-radius: var(--tblr-border-radius) !important;
}

.lang-ar .password-toggle-group .form-control {
    border-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: var(--tblr-border-radius) !important;
    border-bottom-right-radius: var(--tblr-border-radius) !important;
}

.lang-ar .birthday-contact .me-1 {
    margin-right: 0.5rem !important;
    margin-left: 0 !important;
}

.lang-ar .text-lg-end {
    text-align: left !important;
}

.lang-ar .text-lg-start {
    text-align: right !important;
}

.lang-ar ul.dept-stats-list {
    padding-right: 0;
}

.lang-ar .nav-link-title {
    font-size: 0.75rem;
}

.lang-ar .start-0 {
    left: unset !important;
    right: 0;
}

@media (max-width: 991px) {
    .lang-ar .navbar-vertical.navbar-expand-lg {
        top: 0;
        left: unset;
        right: -270px;
        transition: right 0.3s ease;
    }

    .lang-ar .navbar-vertical.show {
        left: unset;
        right: 0;
    }
}

@media (min-width: 992px) {
    .lang-ar .navbar-expand-lg.navbar-vertical ~ .navbar,
    .lang-ar .navbar-expand-lg.navbar-vertical ~ .page-wrapper {
        margin-left: 0;
        margin-right: 15rem;
    }

    .lang-ar .navbar-vertical.navbar-expand-lg {
        top: 0;
        left: unset;
        right: 0;
        transition: right 0.3s ease;
    }

    .lang-ar .navbar-vertical.show {
        left: 0;
    }

    .lang-ar
        .navbar-vertical.navbar-expand-lg
        .navbar-collapse
        .dropdown-menu
        .dropdown-item {
        padding-left: unset;
        padding-right: calc(calc(calc(var(--tblr-page-padding) * 2) / 2));
    }

    .lang-ar .quick-action-btns .btn {
        font-size: 0.7rem;
    }

    .lang-ar .dash-banner .btn {
        font-size: 0.7rem;
    }

    .lang-ar .dash-banner .h2 {
        font-size: 1.1rem;
    }
}

/*Arabic CSS Ends*/

/* ==========================================================================
   Moving Icon & OKR-HR-Payroll Interactive Floating Widget Styles
   ========================================================================== */

/* 1. Sidebar Animated Moving Icon */
@keyframes okrIconFloat {
    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-2.5px) scale(1.12);
        color: #7c3aed !important;
    }
}

@keyframes okrRadarSweep {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes okrPulseDot {
    0% {
        transform: scale(0.85);
        opacity: 0.6;
        box-shadow: 0 0 0 0 rgba(46, 179, 68, 0.6);
    }

    50% {
        transform: scale(1.2);
        opacity: 1;
        box-shadow: 0 0 0 6px rgba(46, 179, 68, 0);
    }

    100% {
        transform: scale(0.85);
        opacity: 0.6;
        box-shadow: 0 0 0 0 rgba(46, 179, 68, 0);
    }
}

.okr-pulse-dot {
    width: 7px;
    height: 7px;
    background-color: #2fb344;
    border-radius: 50%;
    display: inline-block;
    animation: okrPulseDot 2s infinite ease-in-out;
    margin-left: 10px;
}

.active.okr-nav-item .okr-pulse-dot {
    background-color: #bbf16a !important;
}

/* 2. Global Floating Moving Icon Widget */
@keyframes floatMovingIcon {
    0%,
    100% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-8px) rotate(5deg);
    }
}

@keyframes movingAuraPulse {
    0% {
        box-shadow:
            0 6px 20px rgba(1, 113, 247, 0.35),
            0 0 0 0 rgba(1, 113, 247, 0.45);
    }

    70% {
        box-shadow:
            0 6px 20px rgba(1, 113, 247, 0.35),
            0 0 0 16px rgba(1, 113, 247, 0);
    }

    100% {
        box-shadow:
            0 6px 20px rgba(1, 113, 247, 0.35),
            0 0 0 0 rgba(1, 113, 247, 0);
    }
}

.floating-okr-widget {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1045;
}

html[dir="rtl"] .floating-okr-widget {
    right: unset !important;
    left: 24px !important;
}

.floating-okr-icon-btn {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0171f7 0%, #7c3aed 100%);
    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    animation:
        floatMovingIcon 4s ease-in-out infinite,
        movingAuraPulse 2.8s infinite;
    transition:
        transform 0.25s ease,
        background 0.3s ease;
    text-decoration: none;
    outline: none;
}

.floating-okr-icon-btn:hover {
    transform: scale(1.1) translateY(-4px);
    color: #ffffff;
    background: linear-gradient(135deg, #0056bd 0%, #6d28d9 100%);
}

.floating-okr-icon-btn i {
    font-size: 1.55rem;
    transition: transform 0.3s ease;
}

.floating-okr-icon-btn:hover i {
    transform: rotate(20deg);
}

.floating-okr-card {
    position: absolute;
    bottom: 68px;
    right: 0;
    width: 320px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.14);
    border: 1px solid rgba(1, 113, 247, 0.15);
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: bottom right;
}

html[dir="rtl"] .floating-okr-card {
    right: unset !important;
    left: 0 !important;
    transform-origin: bottom left;
}

.floating-okr-card.d-none {
    display: none !important;
}

.floating-okr-header {
    background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
    color: #ffffff;
    padding: 14px 16px;
}

/* Sticky / Fixed Action Column for Responsive Tables */
.sticky-action-col {
    position: sticky !important;
    right: 0 !important;
    background-color: #fff !important;
    z-index: 2;
    box-shadow: -3px 0 6px -2px rgba(0, 0, 0, 0.08) !important;
}

thead th.sticky-action-col {
    background-color: #f8fafc !important;
    z-index: 3;
}

/* tr:hover td.sticky-action-col {
    background-color: #f5f5f5 !important;
} */

html[dir="rtl"] .sticky-action-col {
    right: unset !important;
    left: 0 !important;
    box-shadow: 3px 0 6px -2px rgba(0, 0, 0, 0.08) !important;
}

/* ==========================================================================
   UNIFIED MODULE DATA SCOPE BADGE
   ========================================================================== */
.scope-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4375rem 1rem;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: var(--tblr-border-radius) !important;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.leave-nav-tabs {
    border-bottom: 2px solid #e2e8f0;
    gap: 0.5rem;
}

.leave-nav-tabs .nav-link {
    border: none;
    background: transparent;
    color: #64748b;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.65rem 1.25rem;
    border-radius: 8px 8px 0 0;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    cursor: pointer;
}

.leave-nav-tabs .nav-link:hover {
    color: #0b75ba;
    background: rgba(11, 117, 186, 0.05);
}

.leave-nav-tabs .nav-link.active {
    color: #0b75ba;
    font-weight: 700;
    background: transparent;
    border-bottom: 3px solid #0b75ba;
}

.leave-kpi-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 1.15rem 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    height: 100%;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
    border-left-width: 4px;
}

.leave-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}

.leave-kpi-title {
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #64748b;
    letter-spacing: 0.5px;
    margin-bottom: 0.35rem;
}

.leave-kpi-value {
    font-size: 1.65rem;
    font-weight: 800;
    color: #1e293b;
    line-height: 1.1;
}

.leave-flow-container {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.leave-flow-step {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #475569;
    text-decoration: none;
    padding: 0.35rem 0.65rem;
    border-radius: 6px;
    transition: all 0.15s ease;
}

.leave-flow-step:hover {
    color: #0b75ba;
    background: #f1f5f9;
}

.leave-flow-divider {
    color: #cbd5e1;
    font-size: 0.85rem;
}

.leave-calendar-widget {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 1.25rem;
}

.leave-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    text-align: center;
}

.leave-calendar-header {
    font-size: 0.72rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    padding: 4px 0;
}

.leave-calendar-cell {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #334155;
    background: #f8fafc;
    position: relative;
    transition: all 0.15s ease;
}

.leave-calendar-cell.weekend {
    color: #94a3b8;
    background: #f1f5f9;
    opacity: 0.75;
}

.leave-calendar-cell.today {
    border: 2px solid #0b75ba;
    font-weight: 800;
    color: #0b75ba;
}

.leave-calendar-cell.on-leave {
    background: #dbeafe;
    color: #1d4ed8;
    font-weight: 800;
}

.leave-calendar-cell.on-leave::after {
    content: "";
    position: absolute;
    bottom: 3px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #2563eb;
}

.compoff-summary-box {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 1px solid #bbf7d0;
    border-radius: 14px;
    padding: 1.15rem;
}

/* Probation Approvals Action Buttons */
.probation-action-group {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
    white-space: nowrap;
}

.probation-btn {
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.35rem 0.75rem !important;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    transition: all 0.15s ease-in-out;
    line-height: 1.35;
    border: 1px solid transparent;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    cursor: pointer;
}

.probation-btn-confirm {
    background-color: #10b981;
    border-color: #10b981;
    color: #ffffff !important;
}

.probation-btn-confirm:hover {
    background-color: #059669;
    border-color: #059669;
    color: #ffffff !important;
    box-shadow: 0 2px 5px rgba(16, 185, 129, 0.3);
    transform: translateY(-1px);
}

.probation-btn-extend {
    background-color: #fffbeb;
    border-color: #fcd34d;
    color: #b45309 !important;
}

.probation-btn-extend:hover {
    background-color: #fef3c7;
    border-color: #f59e0b;
    color: #92400e !important;
    box-shadow: 0 2px 5px rgba(245, 158, 11, 0.25);
    transform: translateY(-1px);
}

.probation-btn-view {
    background-color: #f8fafc;
    border-color: #e2e8f0;
    color: #475569 !important;
}

.probation-btn-view:hover {
    background-color: #f1f5f9;
    border-color: #cbd5e1;
    color: #0b75ba !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}

.probation-btn-icon {
    width: 32px;
    height: 32px;
    padding: 0 !important;
    border-radius: 6px;
}

/* Dark theme support */
body[data-bs-theme="dark"] .probation-btn-extend {
    background-color: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.35);
    color: #fbbf24 !important;
}

body[data-bs-theme="dark"] .probation-btn-extend:hover {
    background-color: rgba(245, 158, 11, 0.25);
    border-color: #f59e0b;
    color: #fde68a !important;
}

body[data-bs-theme="dark"] .probation-btn-view {
    background-color: #1e293b;
    border-color: #334155;
    color: #94a3b8 !important;
}

body[data-bs-theme="dark"] .probation-btn-view:hover {
    background-color: #334155;
    border-color: #475569;
    color: #38bdf8 !important;
}

.page-pretitle {
    font-size: 0.75em;
    color: #6c7a91;
    font-weight: normal;
    text-transform: capitalize;
}

.page-title {
    font-size: var(--tblr-font-size-h2);
    --tblr-text-opacity: 1;
    color: rgba(var(--tblr-primary-rgb), var(--tblr-text-opacity)) !important;
}

.card-title {
    text-transform: capitalize;
    font-weight: 500;
    font-size: 1.1rem !important;
    color: inherit;
}

table.table {
    white-space: nowrap;
}

.select2-container--default
    .select2-selection--multiple
    .select2-selection__choice {
    background-color: #d3e7ff !important;
    color: #006cee;
    border: 1px solid #9dc6f7 !important;
    font-size: 0.9rem;
    padding: 0 5px 0 20px !important;
    margin-left: 5px !important;
}

.select2-container--default
    .select2-selection--multiple
    .select2-selection__choice__remove {
    border-right: 1px solid #9dc6f7 !important;
    color: #ff0202 !important;
    font-size: 0.9rem !important;
    font-weight: normal !important;
}

.select2-container .select2-search--inline .select2-search__field {
    font-size: 1rem !important;
    font-family: inherit !important;
}

.select2-container--default
    .select2-selection--multiple
    .select2-selection__clear {
    background: #ff0000;
    color: #fff;
    border: 1px solid #ff0000;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1rem;
}
.modal .btn-close {
    filter: invert(1);
    opacity: 1;
    box-shadow: none;
}

.modal .bg-light .btn-close,
.modal .bg-light-subtle .btn-close {
    filter: none;
}