html,
body {
    height: 100%;
    min-height: 100%;
}

:root {
    --purple-primary: #7c5cff;
    --purple-glow: #9b7cff;
    --dark-bg-start: #090b1a;
    --dark-bg-end: #131634;
    --dark-glow: rgba(121, 40, 202, 0.35);
    --dark-surface: rgba(19, 22, 48, 0.92);
    --dark-border: rgba(147, 89, 255, 0.28);
    --dark-text: #d8d5f4;
    --dark-muted: #9b97c3;
}

body {
    margin: 0;
    background:
        radial-gradient(circle at 90% 50%, rgba(124, 92, 255, 0.18) 0%, rgba(124, 92, 255, 0) 50%),
        linear-gradient(to bottom right, #ffffff, #f4f0ff);
    color: #000000;
    position: relative;
}

html:not(.dark-mode) .card,
body:not(.dark-mode) .card {
    background: #ffffff !important;
    border: 1px solid rgba(124, 92, 255, 0.2) !important;
    box-shadow: 0 12px 36px rgba(69, 44, 128, 0.12) !important;
}

html:not(.dark-mode) .card-header,
html:not(.dark-mode) .card-body,
html:not(.dark-mode) .card-footer,
body:not(.dark-mode) .card-header,
body:not(.dark-mode) .card-body,
body:not(.dark-mode) .card-footer {
    background: transparent !important;
    border-color: rgba(124, 92, 255, 0.16) !important;
}

html:not(.dark-mode) .btn,
html:not(.dark-mode) .btn-primary,
html:not(.dark-mode) .btn.bg-gradient-primary,
html:not(.dark-mode) .btn.bg-gradient-info,
body:not(.dark-mode) .btn,
body:not(.dark-mode) .btn-primary,
body:not(.dark-mode) .btn.bg-gradient-primary,
body:not(.dark-mode) .btn.bg-gradient-info {
    background: linear-gradient(135deg, #7c5cff 0%, #6f47ff 100%) !important;
    border: 1px solid #6b46f8 !important;
    color: #ffffff !important;
    box-shadow: 0 8px 20px rgba(124, 92, 255, 0.28) !important;
}

html:not(.dark-mode) .btn:hover,
html:not(.dark-mode) .btn-primary:hover,
html:not(.dark-mode) .btn.bg-gradient-primary:hover,
html:not(.dark-mode) .btn.bg-gradient-info:hover,
body:not(.dark-mode) .btn:hover,
body:not(.dark-mode) .btn-primary:hover,
body:not(.dark-mode) .btn.bg-gradient-primary:hover,
body:not(.dark-mode) .btn.bg-gradient-info:hover {
    background: linear-gradient(135deg, #6f47ff 0%, #5f36ef 100%) !important;
    border-color: #5f36ef !important;
    box-shadow: 0 12px 24px rgba(124, 92, 255, 0.34) !important;
}

html:not(.dark-mode) .btn-outline-dark,
html:not(.dark-mode) .btn-outline-secondary,
body:not(.dark-mode) .btn-outline-dark,
body:not(.dark-mode) .btn-outline-secondary {
    background: #ffffff !important;
    border: 1px solid rgba(124, 92, 255, 0.45) !important;
    color: #5e3ce3 !important;
}

html:not(.dark-mode) .btn-outline-dark:hover,
html:not(.dark-mode) .btn-outline-secondary:hover,
body:not(.dark-mode) .btn-outline-dark:hover,
body:not(.dark-mode) .btn-outline-secondary:hover {
    background: rgba(124, 92, 255, 0.08) !important;
    border-color: rgba(124, 92, 255, 0.6) !important;
    color: #4d2fd0 !important;
}

html:not(.dark-mode) .form-control,
html:not(.dark-mode) .form-select,
html:not(.dark-mode) .input-group-text,
body:not(.dark-mode) .form-control,
body:not(.dark-mode) .form-select,
body:not(.dark-mode) .input-group-text {
    background: #ffffff !important;
    border: 1px solid rgba(124, 92, 255, 0.26) !important;
    color: #2a214d !important;
}

html:not(.dark-mode) .form-control:focus,
html:not(.dark-mode) .form-select:focus,
body:not(.dark-mode) .form-control:focus,
body:not(.dark-mode) .form-select:focus {
    border-color: rgba(124, 92, 255, 0.55) !important;
    box-shadow: 0 0 0 0.2rem rgba(124, 92, 255, 0.16) !important;
}

html:not(.dark-mode) .auth-forgot-link,
html:not(.dark-mode) a,
body:not(.dark-mode) .auth-forgot-link,
body:not(.dark-mode) a {
    color: #5b38e5;
}

html:not(.dark-mode) .auth-forgot-link:hover,
html:not(.dark-mode) a:hover,
body:not(.dark-mode) .auth-forgot-link:hover,
body:not(.dark-mode) a:hover {
    color: #4427bd;
}

html.dark-mode body,
body.dark-mode {
    background:
        radial-gradient(circle at 82% 12%, var(--dark-glow) 0%, rgba(121, 40, 202, 0) 42%),
        linear-gradient(145deg, var(--dark-bg-start), var(--dark-bg-end));
    color: var(--dark-text);
}

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: url('/static/assets/img/hero_zarion.png') center top / cover no-repeat;
    opacity: 0.06;
    z-index: -1;
    pointer-events: none;
}

html.dark-mode body::before,
body.dark-mode::before {
    opacity: 0.07;
}

html.dark-mode .card,
html.dark-mode .navbar-main,
html.dark-mode .dropdown-menu,
html.dark-mode .table,
html.dark-mode .list-group-item,
html.dark-mode .modal-content,
body.dark-mode .card,
body.dark-mode .navbar-main,
body.dark-mode .dropdown-menu,
body.dark-mode .table,
body.dark-mode .list-group-item,
body.dark-mode .modal-content {
    background: var(--dark-surface) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

html.dark-mode .card-header,
html.dark-mode .card-body,
html.dark-mode .card-footer,
html.dark-mode .navbar,
html.dark-mode .input-group-text,
body.dark-mode .card-header,
body.dark-mode .card-body,
body.dark-mode .card-footer,
body.dark-mode .navbar,
body.dark-mode .input-group-text {
    background: transparent !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

html.dark-mode h1,
html.dark-mode h2,
html.dark-mode h3,
html.dark-mode h4,
html.dark-mode h5,
html.dark-mode h6,
html.dark-mode .text-dark,
html.dark-mode .text-body,
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode .text-dark,
body.dark-mode .text-body {
    color: var(--dark-text) !important;
}

html.dark-mode .text-secondary,
html.dark-mode .text-muted,
html.dark-mode p,
html.dark-mode small,
body.dark-mode .text-secondary,
body.dark-mode .text-muted,
body.dark-mode p,
body.dark-mode small {
    color: var(--dark-muted) !important;
}

html.dark-mode .btn,
html.dark-mode .btn-outline-primary,
html.dark-mode .btn-outline-info,
html.dark-mode .btn-primary,
html.dark-mode .btn.bg-gradient-primary,
html.dark-mode .btn.bg-gradient-info,
body.dark-mode .btn,
body.dark-mode .btn-outline-primary,
body.dark-mode .btn-outline-info,
body.dark-mode .btn-primary,
body.dark-mode .btn.bg-gradient-primary,
body.dark-mode .btn.bg-gradient-info {
    background:
        linear-gradient(180deg, rgba(124, 92, 255, 0.15), rgba(124, 92, 255, 0.03)),
        rgba(18, 23, 42, 0.8) !important;
    border: 1px solid rgba(124, 92, 255, 0.4) !important;
    color: #cbbdff !important;
    box-shadow: 0 0 15px rgba(124, 92, 255, 0.25);
}

html.dark-mode .btn:hover,
html.dark-mode .btn-outline-primary:hover,
html.dark-mode .btn-outline-info:hover,
html.dark-mode .btn-primary:hover,
html.dark-mode .btn.bg-gradient-primary:hover,
html.dark-mode .btn.bg-gradient-info:hover,
body.dark-mode .btn:hover,
body.dark-mode .btn-outline-primary:hover,
body.dark-mode .btn-outline-info:hover,
body.dark-mode .btn-primary:hover,
body.dark-mode .btn.bg-gradient-primary:hover,
body.dark-mode .btn.bg-gradient-info:hover {
    border-color: rgba(155, 124, 255, 0.7) !important;
    box-shadow: 0 0 20px rgba(124, 92, 255, 0.32);
    color: #e4d9ff !important;
}

html.dark-mode .form-control,
html.dark-mode .form-select,
html.dark-mode .input-group-text,
body.dark-mode .form-control,
body.dark-mode .form-select,
body.dark-mode .input-group-text {
    background: rgba(17, 20, 42, 0.9) !important;
    border-color: rgba(124, 92, 255, 0.35) !important;
    color: #e7e3ff !important;
}

html.dark-mode .form-control:focus,
html.dark-mode .form-select:focus,
body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus {
    background: rgba(17, 20, 42, 0.95) !important;
    border-color: rgba(155, 124, 255, 0.7) !important;
    color: #efeaff !important;
    box-shadow: 0 0 0 0.2rem rgba(124, 92, 255, 0.2) !important;
}

html.dark-mode input.form-control,
html.dark-mode textarea.form-control,
body.dark-mode input.form-control,
body.dark-mode textarea.form-control {
    caret-color: #e7e3ff;
}

html.dark-mode input.form-control:-webkit-autofill,
html.dark-mode input.form-control:-webkit-autofill:hover,
html.dark-mode input.form-control:-webkit-autofill:focus,
html.dark-mode textarea.form-control:-webkit-autofill,
html.dark-mode textarea.form-control:-webkit-autofill:hover,
html.dark-mode textarea.form-control:-webkit-autofill:focus,
body.dark-mode input.form-control:-webkit-autofill,
body.dark-mode input.form-control:-webkit-autofill:hover,
body.dark-mode input.form-control:-webkit-autofill:focus,
body.dark-mode textarea.form-control:-webkit-autofill,
body.dark-mode textarea.form-control:-webkit-autofill:hover,
body.dark-mode textarea.form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: #e7e3ff !important;
    -webkit-box-shadow: 0 0 0px 1000px rgba(17, 20, 42, 0.95) inset !important;
    box-shadow: 0 0 0px 1000px rgba(17, 20, 42, 0.95) inset !important;
    border: 1px solid rgba(124, 92, 255, 0.35) !important;
    transition: background-color 9999s ease-out 0s;
}

html.dark-mode input.form-control:-moz-autofill,
html.dark-mode textarea.form-control:-moz-autofill,
body.dark-mode input.form-control:-moz-autofill,
body.dark-mode textarea.form-control:-moz-autofill {
    box-shadow: 0 0 0px 1000px rgba(17, 20, 42, 0.95) inset !important;
    -moz-text-fill-color: #e7e3ff !important;
    color: #e7e3ff !important;
}

html.dark-mode .form-control::placeholder,
body.dark-mode .form-control::placeholder {
    color: #9f9ac7 !important;
}

.auth-page-bg {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.auth-page-bg-default {
    background-image: url('/static/assets/img/bg_white.png');
}

.auth-page-bg-curved6 {
    background-image: url('/static/assets/img/curved-images/curved6.jpg');
}

.auth-page-bg-curved9 {
    background-image: url('/static/assets/img/curved-images/curved9.jpg');
}

.auth-page-bg-legacy {
    background-image: url('/static/assets/images/background/gradient.jpg');
}

html.dark-mode .auth-page-bg,
body.dark-mode .auth-page-bg {
    background-image: none !important;
    background-color: transparent !important;
}

html.dark-mode .main-content,
html.dark-mode .page-header,
body.dark-mode .main-content,
body.dark-mode .page-header {
    background: transparent !important;
}

html.dark-mode .bg-gray-100,
body.dark-mode .bg-gray-100 {
    background-color: transparent !important;
}

.auth-forgot-link {
    font-size: 1rem;
}