/* ==========================================================================
   MingleExtra - final UI consolidation layer
   --------------------------------------------------------------------------
   This file is intentionally small and last-loaded. The active theme has two
   generations of markup: the newer SME public/auth/discovery components and
   the older Materialize application shell. These rules align visible
   surfaces without changing form actions, matching logic, payment state, or
   backend-owned content.
   ========================================================================== */

html {
    background: var(--sme-bg);
    scroll-behavior: smooth;
}

body {
    color: var(--sme-text);
    background: var(--sme-bg);
    font-family: var(--sme-font-sans);
    line-height: var(--sme-leading-normal);
}

body a {
    transition: color var(--sme-duration-fast) var(--sme-ease),
                background-color var(--sme-duration-fast) var(--sme-ease),
                border-color var(--sme-duration-fast) var(--sme-ease),
                box-shadow var(--sme-duration-fast) var(--sme-ease);
}

body :where(a, button, input, select, textarea):focus-visible {
    outline: 3px solid rgba(var(--sme-brand-rgb), .32);
    outline-offset: 2px;
}

::selection {
    color: var(--sme-on-brand);
    background: var(--sme-brand);
}

/* --------------------------------------------------------------------------
   Public header and homepage controls
   -------------------------------------------------------------------------- */

.sme-home-header {
    border-bottom-color: var(--sme-border);
    box-shadow: 0 1px 0 rgba(22, 27, 37, .03);
}

.sme-home-header__logo {
    flex: 0 1 auto;
    max-width: min(220px, 42vw);
}

.sme-home-header__logo img {
    max-height: 40px;
}

.sme-brand-lockup {
    display: inline-flex;
    align-items: center;
    gap: var(--sme-space-2);
    color: var(--sme-text);
    text-decoration: none;
}

.sme-brand-lockup img {
    display: block;
    width: 32px;
    height: 36px;
    max-width: none;
    object-fit: contain;
}

.sme-brand-wordmark {
    font-family: var(--sme-font-display);
    font-size: var(--sme-text-lg);
    font-weight: var(--sme-weight-bold);
    letter-spacing: var(--sme-tracking-tight);
    white-space: nowrap;
}

.sme-home-footer .sme-brand-lockup {
    color: var(--sme-text-inverse);
}

.sme-home-footer .sme-brand-lockup img {
    width: 34px;
    height: 38px;
}

.sme-auth-card .sme-brand-lockup {
    justify-content: center;
    color: var(--sme-text);
}

.sme-auth-card .sme-brand-lockup img {
    width: 34px;
    height: 40px;
}

.sme-auth-card .sme-brand-wordmark {
    font-size: var(--sme-text-xl);
}

.sme-onb-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--sme-space-2);
    color: var(--sme-text);
}

.sme-onb-brand .sme-onb-logo {
    width: 26px;
    height: 30px;
    object-fit: contain;
}

.to_auth_page .singl_auth_pg > .sme-brand-lockup {
    justify-content: center;
    margin: 0 auto var(--sme-space-5);
}

/* style.css reserves 55px for the authenticated top nav. Anonymous public
   chrome sits in normal document flow, so lift only that wrapper into the
   reserved band. The signed-in homepage uses .sme-home--app and keeps the
   application shell's original spacing. */
.sme-home--chrome,
.sme-home:not(.sme-home--app) {
    margin-top: -55px;
}

.sme-home-header .sme-home-nav {
    position: static;
    inset: auto;
    width: auto;
    height: auto;
    z-index: auto;
}

.sme-home-header .sme-home-nav > ul {
    width: auto;
    height: auto;
}

.sme-home-nav .sme-nav-trigger,
.sme-home-nav .sme-nav-link {
    min-height: var(--sme-tap-target);
}

.sme-home-header__auth .sme-home-btn,
.sme-home-burger {
    min-height: var(--sme-tap-target);
}

.sme-home-quick,
.sme-home-card,
.sme-home-feature-card {
    box-shadow: var(--sme-shadow-md);
}

/* --------------------------------------------------------------------------
   Auth surfaces
   -------------------------------------------------------------------------- */

.to_auth_page {
    background: var(--sme-bg);
}

.to_auth_page .sme-auth-card {
    border-color: var(--sme-border);
    box-shadow: var(--sme-shadow-lg);
}

/* A flex item defaults to min-width:auto, so the auth column could grow to
   the card's intrinsic width at 390px and depend on body clipping. Let the
   card honor the viewport and its own horizontal padding instead. */
.sme-auth-left,
.sme-auth-card {
    min-width: 0;
}

.sme-auth-card .sme-btn-cta,
.sme-auth-card .sme-google-btn,
.sme-auth-card .sme-auth-ghost {
    min-height: 50px;
}

.sme-auth-card .alert {
    border-radius: var(--sme-radius-sm);
}

.sme-auth-card :where(input[type="text"], input[type="email"], input[type="password"], input[type="tel"], select, textarea) {
    min-height: 48px;
}

/* --------------------------------------------------------------------------
   Authenticated application shell
   -------------------------------------------------------------------------- */

#nav-logged-in {
    min-height: var(--sme-topbar-height);
    background: var(--sme-surface-nav);
    border-bottom: 1px solid var(--sme-border);
    box-shadow: var(--sme-shadow-xs);
}

#nav-logged-in .nav-wrapper {
    min-height: var(--sme-topbar-height);
    padding-inline: clamp(12px, 2.4vw, 28px);
}

#nav-logged-in .dt_slide_menu,
#nav-logged-in .header_home_link a,
#nav-logged-in .to_prem_btn,
#nav-logged-in .to_hdr_finance_btn,
#nav-logged-in .header_user > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--sme-tap-target);
    min-height: var(--sme-tap-target);
    border-radius: var(--sme-radius-sm);
}

#nav-logged-in .dt_slide_menu {
    color: var(--sme-text-secondary);
    cursor: pointer;
}

#nav-logged-in .dt_slide_menu:hover,
#nav-logged-in .header_home_link a:hover,
#nav-logged-in .to_prem_btn:hover,
#nav-logged-in .to_hdr_finance_btn:hover {
    color: var(--sme-brand);
    background: var(--sme-brand-soft);
}

#nav-logged-in .header_logo {
    display: inline-flex;
    align-items: center;
    width: auto;
    max-width: 190px;
    min-height: 44px;
    margin-inline: 12px 26px;
}

#nav-logged-in .header_logo img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 38px;
    object-fit: contain;
}

#nav-logged-in .header_home_link a,
#nav-logged-in .to_prem_btn,
#nav-logged-in .to_hdr_finance_btn {
    gap: 7px;
    padding: 6px 10px;
    color: var(--sme-text-secondary);
    font-size: var(--sme-text-sm);
    font-weight: var(--sme-weight-semibold);
}

#nav-logged-in .header_home_link svg,
#nav-logged-in .to_prem_btn svg,
#nav-logged-in .to_hdr_finance_btn svg,
#nav-logged-in .header_user svg {
    width: var(--sme-icon-lg);
    height: var(--sme-icon-lg);
}

#nav-logged-in .header_user > a {
    padding: 4px;
    border: 1px solid var(--sme-border);
    background: var(--sme-surface);
}

#nav-logged-in .header_user > a img {
    width: 36px;
    height: 36px;
    object-fit: cover;
    border-radius: 50%;
}

#nav-logged-in .dropdown-content {
    overflow: hidden;
    border: 1px solid var(--sme-border);
    border-radius: var(--sme-radius-md);
    background: var(--sme-surface-raised);
    box-shadow: var(--sme-shadow-lg);
}

#nav-logged-in .dropdown-content li > a {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--sme-text-secondary);
}

#nav-logged-in .dropdown-content li > a:hover {
    color: var(--sme-brand);
    background: var(--sme-brand-soft);
}

/* --------------------------------------------------------------------------
   Consolidated authenticated shell
   -------------------------------------------------------------------------- */

#nav-logged-in.sme-app-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: var(--sme-z-sticky);
}

#nav-logged-in .sme-app-header__inner {
    display: flex;
    align-items: center;
    gap: var(--sme-space-3);
}

#nav-logged-in .sme-app-header__start,
#nav-logged-in .sme-app-header__primary,
#nav-logged-in .sme-app-header__tools {
    display: flex;
    align-items: center;
}

#nav-logged-in .sme-app-header__start {
    flex: 0 0 auto;
    gap: var(--sme-space-2);
}

#nav-logged-in .sme-app-header__primary {
    flex: 1 1 auto;
    justify-content: center;
    gap: var(--sme-space-1);
    min-width: 0;
}

#nav-logged-in .sme-app-header__tools {
    flex: 0 0 auto;
    justify-content: flex-end;
    gap: var(--sme-space-1);
}

#nav-logged-in .sme-app-icon-button,
#nav-logged-in .sme-app-avatar-button {
    border: 0;
    background: transparent;
    color: var(--sme-text-secondary);
    cursor: pointer;
}

#nav-logged-in .sme-app-icon-button:hover,
#nav-logged-in .sme-app-avatar-button:hover {
    color: var(--sme-brand);
    background: var(--sme-brand-soft);
}

#nav-logged-in .sme-app-icon-button i {
    font-size: var(--sme-icon-lg);
}

#nav-logged-in .sme-brand-lockup {
    display: inline-flex;
    align-items: center;
    gap: var(--sme-space-2);
    max-width: 190px;
    margin: 0;
    color: var(--sme-text);
    text-decoration: none;
}

#nav-logged-in .sme-brand-lockup img {
    width: 32px;
    height: 36px;
    max-width: none;
    object-fit: contain;
}

#nav-logged-in .sme-brand-wordmark {
    font-family: var(--sme-font-display);
    font-size: var(--sme-text-lg);
    font-weight: var(--sme-weight-bold);
    letter-spacing: var(--sme-tracking-tight);
    white-space: nowrap;
}

#nav-logged-in .sme-app-nav__link,
#nav-logged-in .sme-app-tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sme-space-2);
    min-height: var(--sme-tap-target);
    padding: 6px 12px;
    border: 1px solid transparent;
    border-radius: var(--sme-radius-sm);
    color: var(--sme-text-secondary);
    font-size: var(--sme-text-sm);
    font-weight: var(--sme-weight-semibold);
    line-height: 1.2;
    white-space: nowrap;
}

#nav-logged-in .sme-app-nav__link i,
#nav-logged-in .sme-app-tool i {
    flex: 0 0 auto;
    font-size: var(--sme-icon-lg);
}

#nav-logged-in .sme-app-nav__link:hover,
#nav-logged-in .sme-app-nav__link.is-active,
#nav-logged-in .sme-app-tool:hover {
    color: var(--sme-brand);
    background: var(--sme-brand-soft);
}

#nav-logged-in .sme-app-nav__link.is-active {
    border-color: rgba(var(--sme-brand-rgb), .12);
}

#nav-logged-in .sme-app-nav__link .badge {
    position: absolute;
    top: 4px;
    right: 4px;
    margin: 0;
}

#nav-logged-in .header_notifications {
    position: relative;
}

#nav-logged-in .header_notifications > .sme-app-nav__link {
    position: relative;
}

#nav-logged-in .sme-app-tool--premium {
    color: var(--sme-gold-600);
}

#nav-logged-in .sme-app-tool--premium:hover {
    color: var(--sme-gold-600);
    background: var(--sme-warning-soft);
}

#nav-logged-in .sme-app-tool-group {
    display: flex;
    align-items: center;
}

#nav-logged-in .sme-app-tool-group > .to_hdr_finance_btn,
#nav-logged-in .sme-app-credits {
    border: 1px solid var(--sme-border);
    background: var(--sme-surface);
}

#nav-logged-in .sme-app-tool-group > .to_hdr_finance_btn:hover,
#nav-logged-in .sme-app-credits:hover {
    border-color: var(--sme-brand);
}

#nav-logged-in .sme-app-avatar-button {
    padding: 3px;
    border: 1px solid var(--sme-border);
    background: var(--sme-surface);
}

#nav-logged-in .sme-app-avatar-button img {
    display: block;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

#nav-logged-in #user_dropdown,
#nav-logged-in #notif_dropdown {
    border: 1px solid var(--sme-border);
    border-radius: var(--sme-radius-md);
    background: var(--sme-surface-raised);
    box-shadow: var(--sme-shadow-lg);
}

#nav-logged-in #user_dropdown {
    min-width: 230px;
    padding: var(--sme-space-2);
}

#nav-logged-in #notif_dropdown {
    width: min(360px, calc(100vw - 24px));
    max-height: min(480px, calc(100vh - 88px));
    overflow-y: auto;
}

#nav-logged-in .dropdown-content li > a i {
    flex: 0 0 auto;
    width: var(--sme-icon-lg);
    color: var(--sme-brand);
    font-size: var(--sme-icon-lg);
    text-align: center;
}

/* --------------------------------------------------------------------------
   Shared legacy page surfaces: settings, account, lists, and empty states
   -------------------------------------------------------------------------- */

body:not(.index-page):not(.home-page) .page-margin {
    width: min(100% - 32px, var(--sme-container-max));
    margin-inline: auto;
    padding-block: clamp(24px, 4vw, 48px);
}

body:not(.index-page):not(.home-page) .to_page_title {
    min-height: 48px;
    margin-bottom: var(--sme-space-5);
    padding-bottom: var(--sme-space-3);
    border-bottom: 1px solid var(--sme-border);
}

body:not(.index-page):not(.home-page) .to_page_title h3,
body:not(.index-page):not(.home-page) .user_sttng_panel_hd {
    color: var(--sme-text);
    font-family: var(--sme-font-display);
    font-weight: var(--sme-weight-bold);
    letter-spacing: var(--sme-tracking-tight);
}

body:not(.index-page):not(.home-page) .dt_settings,
body:not(.index-page):not(.home-page) .dt_home_rand_user,
body:not(.index-page):not(.home-page) .sett_navbar {
    border: 1px solid var(--sme-border);
    border-radius: var(--sme-radius-md);
    background: var(--sme-surface);
    box-shadow: var(--sme-shadow-sm);
}

body:not(.index-page):not(.home-page) .dt_settings {
    padding: clamp(20px, 3vw, 32px);
}

body:not(.index-page):not(.home-page) .to_mat_input > input,
body:not(.index-page):not(.home-page) .to_mat_input > textarea,
body:not(.index-page):not(.home-page) .to_mat_input > select,
body:not(.index-page):not(.home-page) .dt_settings .chips {
    min-height: 48px;
    border: 1px solid var(--sme-border);
    border-radius: var(--sme-radius-sm);
    background: var(--sme-surface-input);
    color: var(--sme-text);
    box-shadow: none;
}

body:not(.index-page):not(.home-page) .to_mat_input > input:focus,
body:not(.index-page):not(.home-page) .to_mat_input > textarea:focus,
body:not(.index-page):not(.home-page) .to_mat_input > select:focus,
body:not(.index-page):not(.home-page) .dt_settings .chips.focus {
    border-color: var(--sme-brand);
    background: var(--sme-surface);
    box-shadow: var(--sme-ring);
}

body:not(.index-page):not(.home-page) .to_mat_input > label {
    color: var(--sme-text-muted);
}

body:not(.index-page):not(.home-page) .empty_state {
    min-height: 180px;
    margin: 0;
    padding: 40px 20px;
    border: 1px dashed var(--sme-border-strong);
    border-radius: var(--sme-radius-md);
    background: var(--sme-surface);
    color: var(--sme-text-secondary);
}

body:not(.index-page):not(.home-page) .empty_state > svg:not(.to_spin) {
    width: var(--sme-icon-xl);
    height: var(--sme-icon-xl);
    padding: 7px;
    margin-bottom: 14px;
    color: var(--sme-brand);
    background: var(--sme-brand-soft);
}

body:not(.index-page):not(.home-page) .empty_state .sme-empty-cta {
    min-height: 44px;
    margin-top: 20px;
    border-radius: var(--sme-radius-full);
}

/* --------------------------------------------------------------------------
   Mobile: keep the app usable at the narrow widths in the rebuild brief
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
    #nav-logged-in .sme-app-header__inner {
        gap: var(--sme-space-1);
    }

    #nav-logged-in .sme-app-header__primary {
        justify-content: flex-end;
    }

    #nav-logged-in .sme-app-header__primary > .sme-app-nav__link {
        display: none;
    }

    #nav-logged-in .header_notifications,
    #nav-logged-in .header_notifications > .sme-app-nav__link {
        display: inline-flex;
    }

    #nav-logged-in .sme-app-tool--premium,
    #nav-logged-in .sme-app-tool-group,
    #nav-logged-in .sme-app-credits {
        display: none;
    }

    #nav-logged-in .sme-app-nav__link {
        width: var(--sme-tap-target);
        padding: 5px;
        font-size: 0;
    }

    #nav-logged-in .sme-brand-wordmark {
        display: none;
    }

    #nav-logged-in .sme-brand-lockup img {
        width: 30px;
        height: 34px;
    }

    body:not(.index-page):not(.home-page) .page-margin {
        width: min(100% - 24px, var(--sme-container-max));
        padding-block: 20px 32px;
    }

    #nav-logged-in .nav-wrapper {
        padding-inline: 8px;
    }

    #nav-logged-in .header_logo {
        max-width: 130px;
        margin-inline: 6px auto;
    }

    #nav-logged-in .header_home_link a,
    #nav-logged-in .to_prem_btn,
    #nav-logged-in .to_hdr_finance_btn {
        width: var(--sme-tap-target);
        padding: 5px;
        font-size: 0;
    }

    #nav-logged-in .header_home_link a svg,
    #nav-logged-in .to_prem_btn svg,
    #nav-logged-in .to_hdr_finance_btn svg {
        margin: 0;
    }

    body:not(.index-page):not(.home-page) .dt_settings {
        padding: 18px 14px 8px;
    }

    body:not(.index-page):not(.home-page) .to_page_title {
        margin-bottom: 14px;
    }
}

@media (max-width: 414px) {
    .sme-home-header__logo {
        max-width: 150px;
    }

    .sme-home-header__logo img {
        max-height: 34px;
    }

    body:not(.index-page):not(.home-page) .page-margin {
        width: min(100% - 16px, var(--sme-container-max));
    }

    body:not(.index-page):not(.home-page) .empty_state {
        padding-inline: 12px;
    }
}

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