@font-face {
    font-family: "Nunito";
    src: url("fonts-nunito/Nunito-VariableFont_wght.ttf") format("truetype");
    font-weight: 200 1000;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Nunito";
    src: url("fonts-nunito/Nunito-Italic-VariableFont_wght.ttf") format("truetype");
    font-weight: 200 1000;
    font-style: italic;
    font-display: swap;
}

:root {
    color-scheme: light;
    --ds-primary-50: #f7ecff;
    --ds-primary-100: #efd6ff;
    --ds-primary-200: #deb0ff;
    --ds-primary-300: #c779f6;
    --ds-primary-400: #ae43df;
    --ds-primary-500: #5d0b97;
    --ds-primary-600: #510884;
    --ds-primary-700: #43066d;
    --ds-primary-800: #350556;
    --ds-primary-900: #25033d;
    --ds-green-50: #f4ffe8;
    --ds-green-100: #e6ffc4;
    --ds-green-200: #cdf98e;
    --ds-green-300: #adef50;
    --ds-green-400: #91dd1c;
    --ds-green-500: #7bc100;
    --ds-green-600: #619900;
    --ds-green-700: #4a7500;
    --ds-green-800: #385900;
    --ds-green-900: #284000;
    --ds-yellow-50: #fff8e5;
    --ds-yellow-100: #ffedb8;
    --ds-yellow-200: #ffde7a;
    --ds-yellow-300: #ffcf3d;
    --ds-yellow-400: #ffc426;
    --ds-yellow-500: #ffbc15;
    --ds-yellow-600: #d99700;
    --ds-yellow-700: #a87500;
    --ds-yellow-800: #7a5500;
    --ds-yellow-900: #523900;
    --ds-pink-50: #fff0f7;
    --ds-pink-100: #ffd9eb;
    --ds-pink-200: #ffafd5;
    --ds-pink-300: #ff78ba;
    --ds-pink-400: #fb3f9b;
    --ds-pink-500: #f4117d;
    --ds-pink-600: #cf0062;
    --ds-pink-700: #a6004f;
    --ds-pink-800: #7d003c;
    --ds-pink-900: #57002a;
    --ds-bg: #f5f5f5;
    --ds-surface: #ffffff;
    --ds-surface-muted: #fafafa;
    --ds-text: #1d1b20;
    --ds-text-secondary: #5f5967;
    --ds-text-muted: #8c8496;
    --ds-text-disabled: #b8b0c2;
    --ds-border: #e6e1eb;
    --ds-divider: #eeeaf2;
    --ds-focus: rgba(93, 11, 151, 0.22);
    --ds-disabled: #eeeaf2;
    --ds-radius-sm: 8px;
    --ds-radius-md: 12px;
    --ds-radius-lg: 16px;
    --ds-radius-xl: 24px;
    --ds-shadow-sm: 0 2px 8px rgba(35, 18, 48, 0.06);
    --ds-shadow-md: 0 14px 34px rgba(35, 18, 48, 0.10);
    --ds-shadow-lg: 0 24px 60px rgba(35, 18, 48, 0.16);
    --ds-space-1: 4px;
    --ds-space-2: 8px;
    --ds-space-3: 12px;
    --ds-space-4: 16px;
    --ds-space-5: 20px;
    --ds-space-6: 24px;
    --ds-space-8: 32px;
    --ds-space-10: 40px;
    --ds-space-12: 48px;
}

.dark {
    --ds-bg: #17131d;
    --ds-surface: #221a2b;
    --ds-surface-muted: #2c2237;
    --ds-text: #fffafd;
    --ds-text-secondary: #d7cfdf;
    --ds-text-muted: #aaa1b5;
    --ds-border: #3b3048;
    --ds-divider: #31283c;
}

html,
body {
    font-family: "Nunito", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    background: var(--ds-bg);
    color: var(--ds-text);
    letter-spacing: 0;
}

body {
    font-size: 16px;
    line-height: 1.55;
}

h1,
.ds-display {
    font-size: clamp(2rem, 4vw, 3.75rem);
    line-height: 1.05;
    font-weight: 900;
}

h2,
.ds-heading-1 {
    font-size: clamp(1.65rem, 3vw, 2.5rem);
    line-height: 1.12;
    font-weight: 900;
}

h3,
.ds-heading-2 {
    font-size: 1.5rem;
    line-height: 1.2;
    font-weight: 850;
}

h4,
.ds-heading-3 {
    font-size: 1.125rem;
    line-height: 1.25;
    font-weight: 800;
}

.ds-title {
    font-size: 1rem;
    line-height: 1.35;
    font-weight: 800;
}

.ds-body-lg {
    font-size: 1.125rem;
    line-height: 1.65;
}

.ds-caption {
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--ds-text-secondary);
}

.ds-label,
label {
    font-weight: 800;
}

a {
    color: var(--ds-primary-500);
}

*:focus-visible {
    outline: 3px solid var(--ds-focus);
    outline-offset: 2px;
}

::selection {
    background: var(--ds-primary-100);
    color: var(--ds-primary-800);
}

.bg-vm-purple,
.bg-indigo-600,
.bg-purple-600 {
    background-color: var(--ds-primary-500) !important;
}

.text-vm-purple,
.text-indigo-600,
.text-purple-600 {
    color: var(--ds-primary-500) !important;
}

.border-vm-purple,
.border-indigo-500,
.border-indigo-600 {
    border-color: var(--ds-primary-500) !important;
}

.bg-vm-green {
    background-color: var(--ds-green-500) !important;
}

.bg-vm-yellow {
    background-color: var(--ds-yellow-500) !important;
}

.bg-vm-pink {
    background-color: var(--ds-pink-500) !important;
}

.text-vm-yellow {
    color: var(--ds-yellow-500) !important;
}

.text-vm-pink {
    color: var(--ds-pink-500) !important;
}

.bg-gray-50,
.bg-vm-light {
    background-color: var(--ds-bg) !important;
}

.bg-white,
.dark .dark\:bg-dark-card {
    background-color: var(--ds-surface) !important;
}

.border-gray-100,
.border-gray-200,
.border-gray-300,
.dark .dark\:border-gray-700,
.dark .dark\:border-dark-border {
    border-color: var(--ds-border) !important;
}

.text-gray-900,
.text-gray-800,
.text-gray-700 {
    color: var(--ds-text) !important;
}

.text-gray-600,
.text-gray-500 {
    color: var(--ds-text-secondary) !important;
}

.text-gray-400 {
    color: var(--ds-text-muted) !important;
}

button,
.ds-button {
    font-family: inherit;
    letter-spacing: 0;
    border-radius: var(--ds-radius-md);
}

button[class*="bg-vm-purple"],
button[class*="bg-indigo-600"],
.ds-button-primary {
    background: var(--ds-primary-500) !important;
    color: #fff !important;
    box-shadow: 0 10px 22px rgba(93, 11, 151, 0.20);
}

button[class*="bg-vm-purple"]:hover,
button[class*="bg-indigo-600"]:hover,
.ds-button-primary:hover {
    background: var(--ds-primary-700) !important;
}

button:disabled,
.ds-disabled {
    cursor: not-allowed !important;
    opacity: 0.58;
    box-shadow: none !important;
}

input,
select,
textarea {
    font-family: inherit !important;
    border-color: var(--ds-border) !important;
    border-radius: var(--ds-radius-md) !important;
    color: var(--ds-text) !important;
    background-color: var(--ds-surface) !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--ds-primary-500) !important;
    box-shadow: 0 0 0 4px var(--ds-focus) !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--ds-text-muted) !important;
}

.admin-shell {
    background: var(--ds-bg) !important;
}

.admin-sidebar {
    background:
        radial-gradient(circle at 0 0, rgba(244, 17, 125, 0.22), transparent 19rem),
        linear-gradient(180deg, var(--ds-primary-500) 0%, var(--ds-primary-700) 58%, var(--ds-primary-900) 100%) !important;
    box-shadow: 20px 0 46px rgba(93, 11, 151, 0.18) !important;
}

.admin-sidebar button {
    border-radius: var(--ds-radius-lg) !important;
}

.admin-sidebar button:hover,
.admin-sidebar .admin-nav-active {
    background: rgba(255, 255, 255, 0.14) !important;
}

.admin-card,
.admin-shell main section.bg-white,
.admin-shell main aside > div.bg-white,
.admin-shell main > div.bg-white,
.rounded-xl,
.rounded-2xl,
.rounded-\[24px\] {
    border-radius: var(--ds-radius-xl) !important;
}

.shadow-sm,
.shadow-md,
.shadow-lg,
.shadow-2xl,
[class*="shadow-"] {
    box-shadow: var(--ds-shadow-sm) !important;
}

.admin-shell main section.bg-white,
.admin-shell main aside > div.bg-white,
.admin-shell main > div.bg-white,
.bg-white.dark\:bg-dark-card,
.bg-white.dark\:bg-gray-800 {
    border: 1px solid var(--ds-border) !important;
    box-shadow: var(--ds-shadow-sm) !important;
}

.toast {
    border-radius: var(--ds-radius-lg) !important;
    box-shadow: var(--ds-shadow-md) !important;
}

.toast.success {
    background: var(--ds-green-600) !important;
}

.toast.error {
    background: #dc2626 !important;
}

.donut-chart {
    background: conic-gradient(var(--chart-color) var(--chart-percent), var(--ds-divider) 0) !important;
}

.donut-chart::after {
    background: var(--ds-surface) !important;
}

.candidate-photo-fallback {
    background: linear-gradient(135deg, var(--ds-primary-50), var(--ds-primary-200)) !important;
    color: var(--ds-primary-600) !important;
}

.glass-modal-overlay {
    background:
        radial-gradient(circle at 20% 10%, rgba(244, 17, 125, 0.25), transparent 24rem),
        linear-gradient(135deg, var(--ds-primary-900), var(--ds-primary-700)) !important;
}

.glass-input,
.glass-select {
    border-radius: var(--ds-radius-lg) !important;
}

.ql-container {
    font-family: "Nunito", ui-sans-serif, system-ui, sans-serif !important;
}

.welcome-card {
    animation: ds-pop-in 0.24s ease-out;
}

@keyframes ds-pop-in {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.96);
    }

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

.candidate-profile-menu {
    position: relative;
}

.candidate-profile-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 6px 10px 6px 6px;
    border: 1px solid var(--ds-border);
    background: var(--ds-surface);
    color: var(--ds-text);
    border-radius: 999px;
    box-shadow: var(--ds-shadow-sm);
    font-weight: 900;
}

.candidate-profile-trigger:hover,
.candidate-profile-trigger:focus-visible {
    border-color: var(--ds-primary-300);
    background: var(--ds-primary-50);
}

.candidate-profile-avatar {
    width: 30px;
    height: 30px;
    min-width: 30px;
    max-width: 30px;
    border-radius: 999px;
    object-fit: cover;
    flex: 0 0 30px;
    display: inline-block;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(35, 18, 48, 0.12);
    overflow: hidden;
}

.candidate-profile-initials {
    display: inline-grid;
    place-items: center;
    background: linear-gradient(135deg, var(--ds-primary-100), var(--ds-primary-200));
    color: var(--ds-primary-700);
    font-size: 13px;
    font-weight: 1000;
}

.candidate-profile-name {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
}

.candidate-profile-chevron {
    color: var(--ds-text-muted);
    font-size: 11px;
}

.candidate-profile-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    width: min(320px, calc(100vw - 24px));
    background: #fff;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    box-shadow: var(--ds-shadow-md);
    padding: 8px;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    z-index: 90;
}

.candidate-profile-dropdown.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.candidate-profile-dropdown-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: var(--ds-radius-md);
    background: var(--ds-bg);
    margin-bottom: 6px;
}

.candidate-profile-dropdown-header strong,
.candidate-profile-dropdown-header span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.candidate-profile-dropdown-header span {
    color: var(--ds-text-secondary);
    font-size: 13px;
}

.candidate-profile-menu-item {
    width: 100%;
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 0;
    border-radius: var(--ds-radius-md);
    background: transparent;
    color: var(--ds-text);
    text-decoration: none;
    font-size: 14px;
    font-weight: 800;
    text-align: left;
}

.candidate-profile-menu-item i {
    width: 18px;
    color: var(--ds-primary-500);
    text-align: center;
}

.candidate-profile-menu-item:hover,
.candidate-profile-menu-item:focus-visible {
    background: var(--ds-primary-50);
    color: var(--ds-primary-700);
}

.candidate-profile-divider {
    height: 1px;
    background: var(--ds-divider);
    margin: 6px 4px;
}

.candidate-profile-logout {
    color: #b42318;
}

.candidate-profile-logout i {
    color: #d92d20;
}

.candidate-profile-logout:hover,
.candidate-profile-logout:focus-visible {
    background: #fff1f0;
    color: #912018;
}

.upload-confirm-box.upload-confirmed {
    border-color: rgba(123, 193, 0, 0.85) !important;
    background: rgba(123, 193, 0, 0.16) !important;
    box-shadow: inset 0 0 0 1px rgba(123, 193, 0, 0.18);
}

.upload-confirm-box.upload-confirmed [id$="-icon"] {
    background: var(--ds-green-500) !important;
    color: #173000 !important;
    border-color: rgba(255, 255, 255, 0.34) !important;
}

.upload-confirm-box.upload-confirmed [id$="-title"] {
    color: #ffffff !important;
}

.upload-confirm-box.upload-confirmed [id$="-name"] {
    color: #dfffc2 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    max-width: 100%;
}

@media (max-width: 640px) {
    .candidate-profile-name {
        max-width: 82px;
    }

    .candidate-profile-dropdown {
        right: -4px;
    }
}

@media (max-width: 768px) {
    :root {
        --ds-radius-xl: 18px;
    }

    body {
        font-size: 15px;
    }
}