.user-image,
.user-image-xs,
.user-image-sm,
.user-image-md,
.user-image-lg,
.user-image-xl,
.user-image-xxl {
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: Arial, sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    line-height: 1;
}

/* Extra Small (<576px) */
.user-image-xs {
    width: 32px;
    height: 32px;
    font-size: 12px;
}

/* Small (≥576px) */
.user-image-sm {
    width: 48px;
    height: 48px;
    font-size: 16px;
}

/* Medium (≥768px) */
.user-image,
.user-image-md {
    width: 64px;
    height: 64px;
    font-size: 22px;
}

/* Large (≥992px) */
.user-image-lg {
    width: 96px;
    height: 96px;
    font-size: 32px;
}

/* Extra Large (≥1200px) */
.user-image-xl {
    width: 128px;
    height: 128px;
    font-size: 42px;
}

/* Extra Extra Large (≥1400px) */
.user-image-xxl {
    width: 160px;
    height: 160px;
    font-size: 56px;
}

.upload-box {
    /* background: #fff; */
    /* border: 2px solid #e5e7eb; */
    /* border-radius: 24px; */
    /* min-height: 260px; */
    /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); */
    transition: 0.3s ease;
    cursor: pointer;
}

.upload-box:hover {
    border-color: #3b82f6;
    /* box-shadow: 0 8px 20px rgba(59, 130, 246, 0.15); */
}

.upload-icon {
    width: 80px;
    height: 80px;
    background: #eef2ff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
}

.upload-icon i {
    font-size: 50px;
    /* color: #2563eb; */
}

/* .upload-title {
    font-size: 3rem;
    font-weight: 700;
    color: #1f2937;
} */

/* .upload-subtitle {
    font-size: 2rem;
    color: #6b7280;
    font-weight: 500;
} */

/* .upload-footer {
    font-size: 1.4rem;
    color: #6b7280;
    font-weight: 500;
} */

/* input[type="file"] {
    display: none;
} */

/* ===== Landing page (teal) theme override ===== */
:root,
[data-bs-theme="light"] {
    --ds-primary-lighter: #c4f4f6;
    --ds-primary-light: #7be2e8;
    --ds-primary-dark: #259aa4;
    --ds-primary-darker: #15747c;
    --ds-primary: #37c2cc;
    --ds-primary-rgb: 55, 194, 204;
    --ds-primary-text-emphasis: #15747c;
    --ds-primary-bg-subtle: #c4f4f6;
    --ds-primary-border-subtle: #7be2e8;
    --ds-link-color: #37c2cc;
    --ds-link-color-rgb: 55, 194, 204;
    --ds-link-hover-color: #259aa4;
    --ds-link-hover-color-rgb: 37, 154, 164;
    --ds-focus-ring-color: rgba(55, 194, 204, 0.25);
    --ds-box-shadow-primary: rgba(55, 194, 204, 0.24) 0px 8px 16px 0px;
}

[data-bs-theme="dark"] {
    --ds-primary-text-emphasis: #7be2e8;
    --ds-primary-bg-subtle: #022a2d;
    --ds-primary-border-subtle: #15747c;
    --ds-link-color: #7be2e8;
    --ds-link-color-rgb: 123, 226, 232;
    --ds-link-hover-color: #a1edf1;
    --ds-link-hover-color-rgb: 161, 237, 241;
}

/* ===== Hardcoded green -> teal overrides ===== */
.btn-primary {
    --ds-btn-bg: #37c2cc;
    --ds-btn-border-color: #37c2cc;
    --ds-btn-hover-bg: #2cb1bb;
    --ds-btn-hover-border-color: #259aa4;
    --ds-btn-focus-shadow-rgb: 55, 194, 204;
    --ds-btn-active-bg: #259aa4;
    --ds-btn-active-border-color: #218d96;
    --ds-btn-disabled-bg: #37c2cc;
    --ds-btn-disabled-border-color: #37c2cc;
}

.btn-outline-primary {
    --ds-btn-color: #37c2cc;
    --ds-btn-border-color: #37c2cc;
    --ds-btn-hover-bg: #37c2cc;
    --ds-btn-hover-border-color: #37c2cc;
    --ds-btn-focus-shadow-rgb: 55, 194, 204;
    --ds-btn-active-bg: #37c2cc;
    --ds-btn-active-border-color: #37c2cc;
    --ds-btn-disabled-color: #37c2cc;
    --ds-btn-disabled-border-color: #37c2cc;
}

.form-check-input:focus {
    border-color: #7be2e8;
    box-shadow: 0 0 0 0.25rem rgba(55, 194, 204, 0.25);
}

.form-check-input:checked,
.form-check-input[type="checkbox"]:indeterminate {
    background-color: #37c2cc;
    border-color: #37c2cc;
}

.form-range::-webkit-slider-thumb,
.form-range::-moz-range-thumb {
    background-color: #37c2cc;
}

.form-range::-webkit-slider-thumb:active,
.form-range::-moz-range-thumb:active {
    background-color: #7be2e8;
}

.dropdown-menu {
    --ds-dropdown-link-active-bg: #37c2cc;
}

.nav-pills {
    --ds-nav-pills-link-active-bg: #37c2cc;
}

.navbar {
    --ds-navbar-hover-color: #37c2cc;
}

.pagination {
    --ds-pagination-hover-bg: #37c2cc;
    --ds-pagination-hover-border-color: #37c2cc;
    --ds-pagination-focus-bg: #37c2cc;
    --ds-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(55, 194, 204, 0.25);
    --ds-pagination-active-bg: #37c2cc;
    --ds-pagination-active-border-color: #37c2cc;
}