/**
 * Theme styles for ScheduMaker
 * Custom styles and utility classes
 */

/* Theme toggle button styles */
.theme-toggle-btn {
    width: 3rem;
    height: 3rem;
    transition: transform 0.2s ease;
}

.theme-toggle-btn:hover {
    transform: scale(1.05);
}

/* Guest auth: theme toggle should match dashboard control style */
.guest-theme-toggle .theme-toggle-btn {
    width: 40px;
    height: 40px;
    box-shadow: none;
}

body[data-theme="light"] .theme-toggle-btn {
    background-color: #ffffff;
    border: 1px solid #dee2e6;
    color: #495057;
}

body[data-theme="dark"] .theme-toggle-btn {
    background-color: #272757;
    border: 1px solid #505081;
    color: #edeef7;
}

/* Guest layout theme toggle position */
.guest-theme-toggle {
    position: fixed;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 1050;
}

/* Guest auth page background per theme */
body.guest-auth-page[data-theme="light"] {
    --bs-body-bg-rgb: 246, 246, 248;
    background-color: #f6f6f8 !important;
}

body.guest-auth-page[data-theme="dark"] {
    --bs-body-bg-rgb: 15, 14, 71;
    background-color: #0f0e47 !important;
}

/* Guest auth card and form controls */
body[data-theme="light"] .guest-auth-card {
    background-color: #ffffff;
    border: 1px solid #e5e7eb !important;
}

body[data-theme="dark"] .guest-auth-card {
    background-color: #272757;
    border: 1px solid #505081 !important;
    color: #edeef7;
}

body[data-theme="dark"] .guest-auth-card .form-label,
body[data-theme="dark"] .guest-auth-card .form-check-label {
    color: #bfc2df;
}

body[data-theme="dark"] .guest-auth-card .form-control {
    background-color: #1c1b4d;
    border-color: #505081;
    color: #edeef7;
}

body[data-theme="dark"] .guest-auth-card .form-control::placeholder {
    color: #8f93b9;
}

body[data-theme="dark"] .guest-auth-card .form-control:focus {
    border-color: #6d74c8;
    box-shadow: 0 0 0 0.25rem rgba(109, 116, 200, 0.25);
}

body[data-theme="dark"] .guest-auth-card .text-body-secondary {
    color: #bfc2df !important;
}

.guest-brand-lockup {
    margin-bottom: 1.35rem;
}

.guest-auth-card--compact .card-body {
    padding: 1.25rem !important;
}

.guest-brand-lockup .brand-wordmark-name {
    font-size: 1.75rem;
}

.guest-brand-lockup .brand-wordmark-tagline {
    font-size: 0.74rem;
}

.guest-auth-shell {
    position: relative;
    overflow: hidden;
}

.guest-auth-shell::before,
.guest-auth-shell::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
    filter: blur(72px);
    opacity: 0.55;
}

.guest-auth-shell::before {
    width: 16rem;
    height: 16rem;
    top: 8rem;
    left: -5rem;
}

.guest-auth-shell::after {
    width: 18rem;
    height: 18rem;
    right: -6rem;
    bottom: 3rem;
}

body[data-theme="light"] .guest-auth-shell::before {
    background: rgba(45, 123, 255, 0.14);
}

body[data-theme="light"] .guest-auth-shell::after {
    background: rgba(255, 159, 90, 0.12);
}

body[data-theme="dark"] .guest-auth-shell::before {
    background: rgba(121, 155, 255, 0.24);
}

body[data-theme="dark"] .guest-auth-shell::after {
    background: rgba(255, 166, 98, 0.18);
}

.registration-flow {
    position: relative;
}

.registration-flow--compact {
    max-width: 100%;
}

.registration-flow--scrollable {
    scrollbar-width: thin;
    scrollbar-color: rgba(105, 118, 171, 0.34) transparent;
}

.registration-flow--scrollable::-webkit-scrollbar {
    width: 8px;
}

.registration-flow--scrollable::-webkit-scrollbar-track {
    background: transparent;
}

.registration-flow--scrollable::-webkit-scrollbar-thumb {
    background-color: rgba(105, 118, 171, 0.34);
    border-radius: 999px;
}

.registration-flow--scrollable::-webkit-scrollbar-thumb:hover {
    background-color: rgba(105, 118, 171, 0.52);
}

.registration-flow__header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.registration-flow__eyebrow {
    display: inline-block;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.registration-flow__title {
    font-family: "Lexend", sans-serif;
    font-weight: 700;
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.registration-flow__subtitle {
    font-size: 0.95rem;
    margin: 0 auto;
    max-width: 30rem;
}

.registration-flow__progress {
    display: flex;
    justify-content: center;
    gap: 0.65rem;
    margin-top: 1rem;
}

.registration-flow__progress span {
    display: block;
    width: 3.25rem;
    height: 0.35rem;
    border-radius: 999px;
    opacity: 0.35;
}

.registration-flow__progress .is-active {
    opacity: 1;
}

.registration-shell {
    position: relative;
    border-radius: 1.25rem;
    padding: 1.65rem;
    overflow: visible;
}

.registration-shell--accent {
    padding-top: 1.85rem;
}

.registration-shell__glow {
    position: absolute;
    width: 11rem;
    height: 11rem;
    top: -3.5rem;
    right: -2.5rem;
    border-radius: 999px;
    filter: blur(56px);
    pointer-events: none;
}

.registration-flow__form {
    position: relative;
    z-index: 1;
}

.registration-flow .dropdown-select-wrapper {
    position: relative;
}

.registration-flow .dropdown-select-button.show {
    position: relative;
    z-index: 1081;
}

.registration-flow .dropdown-select-button.show + .dropdown-select-menu {
    z-index: 1082;
}

.password-input-group .password-toggle-btn {
    min-width: 2.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.password-input-group .password-toggle-icon {
    font-size: 1.2rem;
    line-height: 1;
}

body[data-theme="light"] .password-input-group .password-toggle-btn {
    background-color: #f3f6fc;
    border-color: #e0dedf;
    color: #2f436e;
}

body[data-theme="dark"] .password-input-group .password-toggle-btn {
    background-color: rgba(15, 19, 55, 0.78);
    border-color: #5c577f;
    color: #cbd5ff;
}

.registration-flow__label {
    display: flex;
    align-items: flex-start;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 0.55rem;
    min-height: 2.2rem;
}

.registration-flow__control {
    min-height: 3.35rem;
    border-radius: 0.9rem;
    padding: 0.9rem 1rem;
    font-size: 1rem;
    box-shadow: none;
}

.registration-flow__control:focus {
    box-shadow: none;
}

.registration-flow__submit {
    border: 0;
    border-radius: 999px;
    padding: 0.85rem 1.4rem;
    font-weight: 700;
    min-width: 9.5rem;
}

.registration-flow__link {
    font-weight: 600;
}

.registration-flow__field-group {
    display: flex;
    flex-direction: column;
}

.registration-flow .alert {
    border-radius: 1rem;
    font-size: 0.95rem;
    line-height: 1.5;
}

.registration-flow .text-danger {
    font-size: 0.82rem;
    font-weight: 600;
}

.registration-flow--compact .registration-flow__header {
    margin-bottom: 1rem;
}

.registration-flow--compact .registration-flow__eyebrow {
    margin-bottom: 0.45rem;
}

.registration-flow--compact .registration-flow__title {
    font-size: 1.7rem;
    margin-bottom: 0.35rem;
}

.registration-flow--compact .registration-flow__subtitle {
    font-size: 0.88rem;
    max-width: 24rem;
}

.registration-flow--compact .registration-flow__progress {
    margin-top: 0.7rem;
}

.registration-flow--compact .registration-shell {
    padding: 1.2rem;
}

.registration-flow--compact .registration-shell--accent {
    padding-top: 1.3rem;
}

.registration-flow--compact .registration-flow__label {
    font-size: 0.72rem;
    min-height: 2.35rem;
    margin-bottom: 0.38rem;
}

@media (min-width: 768px) {
    .registration-flow--compact
        .registration-flow__password-row
        .registration-flow__label {
        min-height: 2.2rem;
    }
}

.registration-flow--compact .registration-flow__control,
.registration-flow--compact .dropdown-select-button {
    min-height: 3rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    font-size: 0.95rem;
}

.registration-flow--compact .mb-3 {
    margin-bottom: 0.9rem !important;
}

.registration-flow--compact .mt-4.pt-2 {
    margin-top: 0.85rem !important;
    padding-top: 0 !important;
}

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

.registration-summary__item {
    border-radius: 0.95rem;
    padding: 0.9rem 1rem;
}

.registration-summary__label {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.35rem;
}

body[data-theme="light"] .registration-flow__eyebrow,
body[data-theme="light"] .registration-flow__subtitle,
body[data-theme="light"] .registration-summary__label {
    color: #5b6477;
}

body[data-theme="light"] .registration-flow__progress span {
    background: rgba(64, 99, 173, 0.18);
}

body[data-theme="light"] .registration-flow__progress .is-active,
body[data-theme="light"] .registration-flow__submit {
    background: linear-gradient(135deg, #245cff 0%, #4f8dff 100%);
    color: #f7faff;
}

body[data-theme="light"] .registration-shell {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(84, 97, 126, 0.12);
    box-shadow: 0 28px 60px rgba(44, 56, 92, 0.12);
}

body[data-theme="light"] .registration-shell__glow {
    background: rgba(86, 137, 255, 0.18);
}

body[data-theme="light"] .registration-flow__control,
body[data-theme="light"] .registration-summary__item {
    background: #f3f6fc;
    border: 1px solid rgba(90, 103, 137, 0.15);
    color: #1c2842;
}

body[data-theme="light"] .registration-flow__control:focus {
    border-color: rgba(62, 111, 232, 0.45);
}

body[data-theme="light"] .registration-flow__link {
    color: #3356af;
}

body[data-theme="dark"] .registration-flow__eyebrow,
body[data-theme="dark"] .registration-flow__subtitle,
body[data-theme="dark"] .registration-summary__label {
    color: #b8bddf;
}

body[data-theme="dark"] .registration-flow__progress span {
    background: rgba(173, 198, 255, 0.14);
}

body[data-theme="dark"] .registration-flow__progress .is-active,
body[data-theme="dark"] .registration-flow__submit {
    background: linear-gradient(135deg, #9dbdff 0%, #5f88ff 100%);
    color: #10264e;
}

body[data-theme="dark"] .registration-shell {
    background: linear-gradient(180deg, rgba(39, 39, 87, 0.98) 0%, rgba(25, 24, 68, 0.98) 100%);
    border: 1px solid rgba(118, 128, 189, 0.24);
    box-shadow: 0 30px 70px rgba(4, 6, 28, 0.48);
}

body[data-theme="dark"] .registration-shell__glow {
    background: rgba(125, 158, 255, 0.26);
}

body[data-theme="dark"] .registration-flow__control,
body[data-theme="dark"] .registration-summary__item {
    background: rgba(15, 19, 55, 0.78);
    border: 1px solid rgba(94, 102, 161, 0.36);
    color: #eef1ff;
}

body[data-theme="dark"] .registration-flow__control:focus {
    border-color: rgba(157, 189, 255, 0.56);
}

body[data-theme="dark"] .registration-flow__link {
    color: #c9d6ff;
}

body[data-theme="dark"] .registration-flow .alert-warning {
    background: rgba(255, 193, 7, 0.14);
    border: 1px solid rgba(255, 193, 7, 0.28) !important;
    color: #ffe7a3;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

body[data-theme="dark"] .registration-flow .text-danger {
    color: #ffb8c2 !important;
}

@media (max-width: 575.98px) {
    .registration-flow__title {
        font-size: 1.6rem;
    }

    .registration-shell {
        padding: 1.15rem;
        border-radius: 1rem;
    }

    .registration-summary {
        grid-template-columns: 1fr;
    }

    .registration-flow__submit {
        min-width: 0;
    }

    .guest-auth-card--compact .card-body {
        padding: 1rem !important;
    }

    .registration-flow--compact .registration-flow__title {
        font-size: 1.45rem;
    }

    .registration-flow--compact .registration-flow__subtitle {
        font-size: 0.84rem;
    }

    .registration-flow--compact .registration-shell {
        padding: 1rem;
    }
}

/* Custom scrollbar for dark theme */
body[data-theme="dark"] ::-webkit-scrollbar {
    width: 10px;
}

body[data-theme="dark"] ::-webkit-scrollbar-track {
    background: #212529;
}

body[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #495057;
    border-radius: 5px;
}

body[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #6c757d;
}

/* Smooth transitions for theme changes */
html,
body {
    transition:
        background-color 0.3s ease,
        color 0.3s ease;
}