:root {
    --app-bg: #f3f7fb;
    --app-text: #0f172a;
    --app-muted: #64748b;
    --app-line: rgba(15, 23, 42, 0.10);
    --app-surface: #ffffff;
    --app-surface-soft: #f8fbff;
    --app-accent: #0d9488;
    --app-radius-sm: 8px;
    --app-radius-md: 12px;
    --app-radius-lg: 18px;
    --app-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --app-focus-ring: 0 0 0 3px rgba(13, 148, 136, 0.16);
}

html[data-theme="dark"] {
    --app-bg: #0b1220;
    --app-text: #e5edf7;
    --app-muted: #93a4bd;
    --app-line: rgba(148, 163, 184, 0.18);
    --app-surface: #111b2e;
    --app-surface-soft: #162338;
    --app-accent: #2dd4bf;
    --app-focus-ring: 0 0 0 3px rgba(45, 212, 191, 0.18);
}

body,
.ui.segment,
.ui.card,
.ui.form input,
.ui.form textarea,
.ui.selection.dropdown,
.ui.button,
.ui.message {
    transition:
        background-color 0.24s ease,
        border-color 0.24s ease,
        box-shadow 0.24s ease,
        color 0.24s ease,
        transform 0.24s var(--app-ease);
}

.ui.button:focus,
.ui.button:focus-visible,
.ui.input > input:focus,
.ui.form input:focus,
.ui.form textarea:focus,
.ui.selection.dropdown:focus {
    box-shadow: var(--app-focus-ring) !important;
    outline: 0 !important;
}

.ui.form input,
.ui.form textarea,
.ui.selection.dropdown,
.ui.input > input {
    border-radius: var(--app-radius-sm) !important;
}

.ui.message,
.ui.segment,
.ui.modal {
    border-radius: var(--app-radius-md) !important;
}

html[data-theme="dark"] .ui.form .field > label,
html[data-theme="dark"] .ui.checkbox label,
html[data-theme="dark"] .ui.radio.checkbox label,
html[data-theme="dark"] .ui.toggle.checkbox label {
    color: #dce8f7 !important;
}

html[data-theme="dark"] .ui.form input,
html[data-theme="dark"] .ui.form textarea,
html[data-theme="dark"] .ui.input > input,
html[data-theme="dark"] .ui.selection.dropdown {
    background: var(--app-surface-soft) !important;
    border-color: var(--app-line) !important;
    color: var(--app-text) !important;
}

html[data-theme="dark"] .ui.message {
    background: var(--app-surface-soft) !important;
    border-color: var(--app-line) !important;
    color: var(--app-text) !important;
}

@media (max-width: 767px) {
    .ui.button {
        min-height: 36px;
        touch-action: manipulation;
    }

    .ui.modal.recovery-email-modal,
    .recovery-email-modal {
        width: calc(100% - 24px) !important;
        max-width: calc(100% - 24px) !important;
        margin: 0 auto !important;
        left: 12px !important;
        right: 12px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        box-sizing: border-box !important;
    }

    .recovery-email-modal .header {
        padding: 14px 16px !important;
        font-size: 1.1rem !important;
        box-sizing: border-box !important;
    }

    .recovery-email-modal .content {
        padding: 16px !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }

    .recovery-email-modal .actions {
        display: flex !important;
        flex-direction: column-reverse !important;
        gap: 8px !important;
        padding: 12px 16px !important;
        margin-top: 12px !important;
        margin-bottom: 12px !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }

    .recovery-email-modal .actions .button {
        margin: 0 !important;
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        box-sizing: border-box !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}


/* Fluid Page Transitions */
@media (prefers-reduced-motion: no-preference) {
    @view-transition {
        navigation: auto;
    }

    /* Target the view transition root */
    ::view-transition-group(root) {
        animation-duration: 0.35s;
        animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); /* easeOutExponential */
    }

    /* Forward transition (default) */
    html:active-view-transition-type(forward)::view-transition-old(root) {
        animation-name: slide-out-to-left;
    }
    html:active-view-transition-type(forward)::view-transition-new(root) {
        animation-name: slide-in-from-right;
    }

    /* Backward transition */
    html:active-view-transition-type(back)::view-transition-old(root) {
        animation-name: slide-out-to-right;
    }
    html:active-view-transition-type(back)::view-transition-new(root) {
        animation-name: slide-in-from-left;
    }
}

@keyframes slide-out-to-left {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(-30px); opacity: 0; }
}

@keyframes slide-in-from-right {
    from { transform: translateX(30px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes slide-out-to-right {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(30px); opacity: 0; }
}

@keyframes slide-in-from-left {
    from { transform: translateX(-30px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* Title Bar Back Button */
#titleBarBackButton {
    color: var(--app-text) !important;
    opacity: 0.7;
    transition: opacity 0.2s var(--app-ease), transform 0.2s var(--app-ease) !important;
}

#titleBarBackButton:hover {
    opacity: 1 !important;
    background: rgba(15, 23, 42, 0.05) !important;
    transform: translateX(-2px);
    border-radius: var(--app-radius-sm);
}

html[data-theme="dark"] #titleBarBackButton:hover {
    background: rgba(229, 237, 247, 0.08) !important;
}

/* Title bar floating tooltip - matches collapsed sidebar tooltip styling */
.title-tooltip-floating {
    position: fixed;
    pointer-events: none;
    background: rgba(15, 23, 42, 0.96);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #ffffff;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    z-index: 99999;
    box-shadow: 
        0 10px 25px -5px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transform: translateX(-50%) translateY(4px) scale(0.9);
    opacity: 0;
    transition: 
        opacity 0.15s ease, 
        transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-origin: center top;
}

.title-tooltip-floating.is-active {
    opacity: 1;
    transform: translateX(-50%) translateY(8px) scale(1);
}

.title-tooltip-floating::before {
    content: "";
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 0 5px 6px 5px;
    border-style: solid;
    border-color: transparent transparent rgba(15, 23, 42, 0.96) transparent;
    pointer-events: none;
}

/* Light Theme Adapt */
html:not([data-theme="dark"]) .title-tooltip-floating {
    background: rgba(255, 255, 255, 0.96);
    color: #0f172a;
    box-shadow: 
        0 10px 25px -5px rgba(15, 23, 42, 0.15),
        0 0 0 1px rgba(15, 23, 42, 0.08);
}

html:not([data-theme="dark"]) .title-tooltip-floating::before {
    border-color: transparent transparent rgba(255, 255, 255, 0.96) transparent;
}