/*
|--------------------------------------------------------------------------
| User Area No Topbar Standardization v1.0
|--------------------------------------------------------------------------
| Menghapus topbar/toolbar atas di user area agar konten langsung mulai dari
| hero. Khusus vocabulary: search tetap ada, tetapi dipindah ke bawah hero.
| CSS terpisah dari Blade sesuai coding standard project.
*/

:root {
    --pm-user-page-top-gap: clamp(14px, 1.8vw, 24px);
    --pm-user-hero-compact-padding: clamp(16px, 1.8vw, 24px);
    --pm-user-hero-title-size: clamp(1.65rem, 2.4vw, 2.45rem);
    --pm-user-hero-text-size: clamp(.92rem, 1vw, 1rem);
}

/*
| Hide user-page topbars/toolbars.
| Search, language switcher, script toggles, profile pill, and notification
| controls belong in profile/settings, not at the top of every user page.
*/
.pm-dashboard-topbar,
.pm-flash-topbar,
.pm-practice-topbar,
.pm-quiz-topbar,
.pm-library-topbar,
.pm-profile-topbar,
.pm-subscription-topbar,
.pm-cloze-topbar,
.pm-sentence-shell > .pm-dashboard-main > .pm-dashboard-topbar,
.pm-sentence-shell .pm-dashboard-topbar,
.vocab-study-topbar {
    display: none !important;
}

/*
| User content starts directly with the hero/section content.
*/
.pm-dashboard-main,
.pm-flash-main,
.pm-practice-main,
.pm-quiz-main,
.pm-library-main,
.pm-profile-main,
.pm-subscription-main,
.pm-cloze-main,
.pm-sentence-shell .pm-dashboard-main,
.pm-vocab-main,
.vocab-study-main {
    padding-top: var(--pm-user-page-top-gap) !important;
}

/*
| Some pages keep their content wrapper separate from .pm-dashboard-main.
| Normalize the first content block spacing after the sidebar.
*/
.pm-sentence-content,
.pm-cloze-content,
.pm-profile-content,
.pm-library-content,
.pm-quiz-content,
.pm-flash-content,
.pm-subscription-content {
    padding-top: var(--pm-user-page-top-gap) !important;
}

/*
| Vocabulary exception:
| The search bar must remain, but it should sit below the hero instead of
| being the first/top UI element.
*/
.pm-vocab-main {
    display: flex !important;
    flex-direction: column !important;
    gap: clamp(14px, 1.6vw, 22px) !important;
}

.pm-vocab-main > .pm-vocab-hero {
    order: 1 !important;
}

.pm-vocab-main > .pm-vocab-topbar {
    order: 2 !important;
    display: block !important;
    position: static !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.pm-vocab-main > .pm-vocab-handwriting-panel {
    order: 3 !important;
}

.pm-vocab-main > .pm-vocab-filters {
    order: 4 !important;
}

.pm-vocab-main > .pm-vocab-summary {
    order: 5 !important;
}

.pm-vocab-main > .pm-vocab-result-head {
    order: 6 !important;
}

.pm-vocab-main > .pm-vocab-list,
.pm-vocab-main > .pm-vocab-grid {
    order: 7 !important;
}

.pm-vocab-main > .pm-vocab-pagination,
.pm-vocab-main > nav[role="navigation"],
.pm-vocab-main > .pagination {
    order: 8 !important;
}

.pm-vocab-mobile-menu,
.pm-vocab-top-actions,
.pm-vocab-script-toggle,
.pm-vocab-language,
.pm-vocab-notification {
    display: none !important;
}

.pm-vocab-top-search {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    min-height: 58px !important;
    display: flex !important;
    align-items: center !important;
    gap: .85rem !important;
    padding: .75rem .9rem !important;
    background: rgba(255, 252, 246, .94) !important;
    border: 1px solid rgba(13, 91, 90, .16) !important;
    border-radius: 20px !important;
    box-shadow: 0 14px 32px rgba(31, 41, 55, .06) !important;
}

.pm-vocab-top-search input[type="search"] {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    font-size: clamp(.95rem, 1.1vw, 1.08rem) !important;
}

.pm-vocab-search-actions {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    gap: .45rem !important;
}

.pm-vocab-mode-button,
.pm-vocab-submit {
    min-height: 38px !important;
}

/*
| Make all user heroes visibly consistent and compact.
*/
.pm-dashboard-hero,
.pm-vocab-hero,
.pm-flash-hero,
.pm-flashcard-hero,
.pm-quiz-hero,
.pm-library-hero,
.pm-profile-hero,
.pm-profile-hub-hero,
.pm-subscription-hero,
.pm-cloze-user-hero,
.pm-cloze-exercise-head,
.pm-sentence-hero,
.pm-sentence-practice-head {
    min-height: auto !important;
    padding: var(--pm-user-hero-compact-padding) !important;
    border-radius: 24px !important;
    margin-top: 0 !important;
    margin-bottom: clamp(14px, 1.6vw, 22px) !important;
}

.pm-dashboard-hero h1,
.pm-vocab-hero h1,
.pm-flash-hero h1,
.pm-flashcard-hero h1,
.pm-quiz-hero h1,
.pm-library-hero h1,
.pm-profile-hero h1,
.pm-profile-hub-hero h1,
.pm-subscription-hero h1,
.pm-cloze-user-hero h1,
.pm-cloze-exercise-head h1,
.pm-sentence-hero h1,
.pm-sentence-practice-head h1 {
    font-size: var(--pm-user-hero-title-size) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.04em !important;
    margin-bottom: .45rem !important;
}

.pm-dashboard-hero p,
.pm-vocab-hero p,
.pm-flash-hero p,
.pm-flashcard-hero p,
.pm-quiz-hero p,
.pm-library-hero p,
.pm-profile-hero p,
.pm-profile-hub-hero p,
.pm-subscription-hero p,
.pm-cloze-user-hero p,
.pm-cloze-exercise-head p,
.pm-sentence-hero p,
.pm-sentence-practice-head p {
    font-size: var(--pm-user-hero-text-size) !important;
    line-height: 1.55 !important;
    max-width: 60rem !important;
}

/*
| Decorative art in heroes should not make the hero too tall.
*/
.pm-dashboard-hero-art,
.pm-vocab-hero-art,
.pm-flash-hero-art,
.pm-quiz-hero-art,
.pm-library-hero-art,
.pm-profile-hero-art,
.pm-subscription-hero-art,
.pm-cloze-hero-art,
.pm-sentence-hero-art {
    max-height: 150px !important;
    transform: scale(.9) !important;
    transform-origin: center !important;
}

/*
| Sentence Builder specific: after removing the topbar, the page should start
| with compact hero and deck cards.
*/
.pm-sentence-hero {
    grid-template-columns: minmax(0, 1.35fr) minmax(220px, .65fr) !important;
}

.pm-sentence-hero h1 {
    max-width: 720px !important;
}

.pm-sentence-stat-grid {
    gap: .75rem !important;
}

.pm-sentence-stat-grid article {
    padding: .95rem 1rem !important;
    min-width: 150px !important;
}

/*
| Profile hub and other card-heavy pages: keep first section aligned after hero.
*/
.pm-profile-hub-tabs,
.pm-profile-folder-nav,
.pm-profile-tabs {
    margin-top: 0 !important;
}

/*
| Mobile: sidebar remains accessible through its own component; do not recreate
| a top toolbar. Keep vocabulary search compact and stacked.
*/
@media (max-width: 900px) {
    .pm-dashboard-main,
    .pm-flash-main,
    .pm-practice-main,
    .pm-quiz-main,
    .pm-library-main,
    .pm-profile-main,
    .pm-subscription-main,
    .pm-cloze-main,
    .pm-sentence-shell .pm-dashboard-main,
    .pm-vocab-main,
    .vocab-study-main {
        padding-top: 12px !important;
    }

    .pm-vocab-top-search {
        align-items: stretch !important;
        flex-wrap: wrap !important;
        border-radius: 18px !important;
    }

    .pm-vocab-search-actions {
        width: 100% !important;
        justify-content: flex-start !important;
        overflow-x: auto !important;
        padding-bottom: .1rem !important;
    }

    .pm-sentence-hero {
        grid-template-columns: 1fr !important;
    }

    .pm-sentence-stat-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 640px) {
    :root {
        --pm-user-hero-title-size: clamp(1.45rem, 7vw, 2rem);
    }

    .pm-sentence-stat-grid,
    .pm-dashboard-card-grid,
    .pm-vocab-summary {
        grid-template-columns: 1fr !important;
    }

    .pm-vocab-top-search input[type="search"] {
        width: 100% !important;
    }
}