/* ==========================================================================
   Discuz X5 Modern Theme - Overlay CSS
   Transforms existing Discuz X5 template markup to modern Flarum-style UI
   ========================================================================== */

/* ---- Global Layout ---- */
body.discuzx5 { min-width: 0 !important; }
#wp { width: 100% !important; max-width: var(--modern-content-max-width) !important; margin: 0 auto !important; padding: 0 var(--modern-space-5) !important; }

/* ---- Modern Header Overlay ---- */
#dz_btm_layer { background: var(--modern-surface) !important; border-bottom: 1px solid var(--modern-border-light) !important; }
#dz_btm_layer .dz_layer_top { background: var(--modern-surface) !important; }
.dz_btm_layer { width: 100% !important; max-width: var(--modern-content-max-width) !important; padding: 0 var(--modern-space-5) !important; }
.dz_btm_layer .dz_layer_nav { width: auto !important; }
.dz_nav_logo .dzlogo img { height: 30px !important; }

/* Nav Links */
.dz_layer_nav ul li a {
    font-family: var(--modern-font-family) !important;
    font-size: var(--modern-font-size-sm) !important;
    font-weight: 500 !important;
    padding: 8px 14px !important;
    border-radius: var(--modern-radius-sm) !important;
    transition: all var(--modern-transition-fast) !important;
    color: var(--modern-text-secondary) !important;
}
.dz_layer_nav ul li.a a,
.dz_layer_nav ul li a:hover {
    color: var(--modern-primary) !important;
    background: var(--modern-primary-light) !important;
}
.dz_layer_nav ul li a::before,
.dz_layer_nav ul li a::after {
    display: none !important;
}

/* Header User Status Area */
.header-right {
    display: flex !important;
    align-items: center !important;
    gap: var(--modern-space-2) !important;
}
.header-searcher .search-input {
    font-family: var(--modern-font-family) !important;
    font-size: var(--modern-font-size-sm) !important;
    height: 38px !important;
    padding: 8px 38px 8px 14px !important;
    background: var(--modern-surface-secondary) !important;
    border: 1px solid var(--modern-border-light) !important;
    border-radius: var(--modern-radius-full) !important;
    color: var(--modern-text-primary) !important;
    transition: all var(--modern-transition-fast) !important;
    width: 200px !important;
}
.header-searcher .search-input:focus {
    width: 260px !important;
    border-color: var(--modern-primary) !important;
    background: var(--modern-surface) !important;
    box-shadow: 0 0 0 3px var(--modern-primary-light) !important;
}
.header-searcher .search-input::placeholder {
    color: var(--modern-text-quaternary) !important;
}
.header-searcher .search-icon {
    transform: translateY(-50%) !important;
    right: 4px !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: var(--modern-radius-full) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all var(--modern-transition-fast) !important;
}
.header-searcher .search-icon:hover {
    background: var(--modern-primary-light) !important;
}
.header-notice .notice-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: var(--modern-radius-full) !important;
    transition: all var(--modern-transition-fast) !important;
}
.header-notice .notice-icon:hover,
.header-notice.open .notice-icon {
    background: var(--modern-surface-hover) !important;
}
.header-notice .notice-icon .dot {
    font-family: var(--modern-font-family) !important;
    font-size: 11px !important;
    min-width: 18px !important;
    height: 18px !important;
    line-height: 18px !important;
    background: var(--modern-danger) !important;
    border-radius: var(--modern-radius-full) !important;
    top: 2px !important;
    right: 2px !important;
    padding: 0 4px !important;
}
.header-user .header-user-info .header-user-avatar {
    border-radius: var(--modern-radius-avatar) !important;
    overflow: hidden !important;
}
.header-user .header-user-info .header-user-avatar img {
    border-radius: var(--modern-radius-avatar) !important;
    width: 34px !important;
    height: 34px !important;
    object-fit: cover !important;
}
.login_btn a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 18px !important;
    font-family: var(--modern-font-family) !important;
    font-size: var(--modern-font-size-sm) !important;
    font-weight: 500 !important;
    background: var(--modern-primary) !important;
    color: var(--modern-text-on-primary) !important;
    border-radius: var(--modern-radius-sm) !important;
    text-decoration: none !important;
    transition: all var(--modern-transition-fast) !important;
}
.login_btn a:hover {
    background: var(--modern-primary-hover) !important;
    color: var(--modern-text-on-primary) !important;
}

/* Dropdown Menus */
.notice-dropdown, .header-user-dropdown {
    background: var(--modern-surface) !important;
    border: 1px solid var(--modern-border) !important;
    border-radius: var(--modern-radius-md) !important;
    box-shadow: var(--modern-shadow-lg) !important;
}
.notice-dropdown .notice-item a {
    font-family: var(--modern-font-family) !important;
    font-size: var(--modern-font-size-sm) !important;
    color: var(--modern-text-primary) !important;
    padding: 8px 16px !important;
    border-radius: var(--modern-radius-sm) !important;
    transition: all var(--modern-transition-fast) !important;
}
.notice-dropdown .notice-item a:hover {
    background: var(--modern-surface-hover) !important;
    color: var(--modern-primary) !important;
}
.notice-dropdown .poptip-arrow {
    border-bottom-color: var(--modern-border) !important;
}
.user-card {
    border-radius: var(--modern-radius-md) !important;
    padding: var(--modern-space-4) !important;
}
.user-card .block_avatar img {
    border-radius: var(--modern-radius-avatar) !important;
}
.user-card .block_name a {
    font-family: var(--modern-font-family) !important;
    color: var(--modern-text-primary) !important;
}
.user-card .user-card-area a {
    font-family: var(--modern-font-family) !important;
    font-size: var(--modern-font-size-sm) !important;
    color: var(--modern-text-secondary) !important;
    padding: 6px 10px !important;
    border-radius: var(--modern-radius-sm) !important;
    transition: all var(--modern-transition-fast) !important;
}
.user-card .user-card-area a:hover {
    background: var(--modern-surface-hover) !important;
    color: var(--modern-primary) !important;
}
.user-card .user-logout-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 8px !important;
    font-family: var(--modern-font-family) !important;
    font-size: var(--modern-font-size-sm) !important;
    font-weight: 500 !important;
    background: var(--modern-surface-secondary) !important;
    color: var(--modern-text-secondary) !important;
    border: 1px solid var(--modern-border-light) !important;
    border-radius: var(--modern-radius-sm) !important;
    text-decoration: none !important;
    text-align: center !important;
    transition: all var(--modern-transition-fast) !important;
}
.user-card .user-logout-btn:hover {
    background: var(--modern-danger-light) !important;
    color: var(--modern-danger) !important;
    border-color: rgba(239,68,68,0.2) !important;
}

/* ---- Breadcrumb ---- */
#pt { border: none !important; background: transparent !important; margin-bottom: 0 !important; padding: 12px 0 !important; box-shadow: none !important; }
#pt a, #pt .z { font-family: var(--modern-font-family) !important; font-size: var(--modern-font-size-sm) !important; color: var(--modern-text-tertiary) !important; }
#pt a:hover { color: var(--modern-primary) !important; }
#pt em { font-family: var(--modern-font-family) !important; color: var(--modern-text-quaternary) !important; }
#pt .nvhm { display: none !important; }

/* ---- Content Area ---- */
#ct { }
#ct .mn { overflow: visible !important; }

/* ---- Cards & Boxes ---- */
.bm {
    background: var(--modern-surface) !important;
    border: 1px solid var(--modern-border-light) !important;
    border-radius: var(--modern-radius-md) !important;
    box-shadow: var(--modern-shadow-sm) !important;
    margin-bottom: var(--modern-space-4) !important;
}
.bm.bw0 { background: transparent !important; border: none !important; box-shadow: none !important; }
.bm .bm_h {
    padding: var(--modern-space-4) var(--modern-space-5) !important;
    font-family: var(--modern-font-family) !important;
    border-bottom: 1px solid var(--modern-border-light) !important;
    background: transparent !important;
    border-radius: var(--modern-radius-md) var(--modern-radius-md) 0 0 !important;
}
.bm .bm_h h1, .bm .bm_h h2, .bm .bm_h strong {
    font-family: var(--modern-font-family) !important;
    font-size: var(--modern-font-size-lg) !important;
    font-weight: 600 !important;
    color: var(--modern-text-primary) !important;
}
.bm .bm_c {
    padding: var(--modern-space-5) !important;
    border-radius: 0 0 var(--modern-radius-md) var(--modern-radius-md) !important;
}
.bm .bm_h .y a,
.bm .bm_h .o a {
    font-family: var(--modern-font-family) !important;
    font-size: var(--modern-font-size-sm) !important;
    color: var(--modern-text-secondary) !important;
    transition: color var(--modern-transition-fast) !important;
}
.bm .bm_h .y a:hover {
    color: var(--modern-primary) !important;
}

/* ---- Forum Display (Thread List) ---- */
#threadlist {
    background: var(--modern-surface) !important;
    border: 1px solid var(--modern-border-light) !important;
    border-radius: var(--modern-radius-md) !important;
    box-shadow: var(--modern-shadow-sm) !important;
    overflow: hidden !important;
}
#threadlist .bm_c {
    padding: 0 !important;
}
.dz_list_top {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: var(--modern-space-2) !important;
    padding: var(--modern-space-3) var(--modern-space-4) !important;
    background: var(--modern-surface) !important;
    border-bottom: 1px solid var(--modern-border-light) !important;
    font-family: var(--modern-font-family) !important;
    font-size: var(--modern-font-size-sm) !important;
    margin-bottom: 0 !important;
    border-radius: var(--modern-radius-md) var(--modern-radius-md) 0 0 !important;
}
.dz_list_top a {
    color: var(--modern-text-secondary) !important;
    padding: 5px 12px !important;
    border-radius: var(--modern-radius-sm) !important;
    transition: all var(--modern-transition-fast) !important;
}
.dz_list_top a:hover,
.dz_list_top a.kmon {
    color: var(--modern-primary) !important;
    background: var(--modern-primary-light) !important;
}
.dz_list_top .pipe { display: none !important; }

/* Thread List Items (kmlist) */
.forumportal_listc { padding: 0 !important; }
.forumportal_listc li.kmlist {
    padding: var(--modern-space-4) var(--modern-space-5) !important;
    border-bottom: 1px solid var(--modern-border-light) !important;
    transition: all var(--modern-transition-fast) !important;
    display: flex !important;
    align-items: center !important;
    gap: var(--modern-space-4) !important;
    background: var(--modern-surface) !important;
}
.forumportal_listc li.kmlist:hover {
    background: var(--modern-surface-hover) !important;
}
.forumportal_listc li.kmlist:last-child {
    border-bottom: none !important;
    border-radius: 0 0 var(--modern-radius-md) var(--modern-radius-md) !important;
}
.forumportal_listc li.kmlist .kmtit {
    font-family: var(--modern-font-family) !important;
    font-size: var(--modern-font-size-md) !important;
    font-weight: 600 !important;
    color: var(--modern-text-primary) !important;
    line-height: var(--modern-line-height-tight) !important;
    flex: 1 !important;
    min-width: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-decoration: none !important;
}
.forumportal_listc li.kmlist .kmtit:hover {
    color: var(--modern-primary) !important;
}
.forumportal_listc li.kmlist .kmimgico {
    width: 20px !important;
    height: 20px !important;
    margin-right: 8px !important;
    vertical-align: middle !important;
}

/* Thread Card Meta */
.forumportal_listc li.kmlist .kminfos {
    display: flex !important;
    align-items: center !important;
    gap: var(--modern-space-3) !important;
    font-size: var(--modern-font-size-xs) !important;
    color: var(--modern-text-tertiary) !important;
    font-family: var(--modern-font-family) !important;
    margin-top: 4px !important;
}
.forumportal_listc li.kmlist .kmimg img {
    width: 24px !important;
    height: 24px !important;
    border-radius: var(--modern-radius-avatar) !important;
}
.forumportal_listc li.kmlist .kmimg a {
    display: inline-flex !important;
}
.forumportal_listc li.kmlist .kmbg {
    font-size: var(--modern-font-size-xs) !important;
    padding: 2px 8px !important;
    background: var(--modern-primary-light) !important;
    color: var(--modern-primary) !important;
    border-radius: var(--modern-radius-full) !important;
    font-family: var(--modern-font-family) !important;
}

/* Thread Stats Column */
.forumportal_listc li.kmlist .kmnum {
    display: flex !important;
    align-items: center !important;
    gap: var(--modern-space-1) !important;
    font-family: var(--modern-font-family) !important;
    font-size: var(--modern-font-size-sm) !important;
    font-weight: 600 !important;
    color: var(--modern-text-primary) !important;
    flex-shrink: 0 !important;
    min-width: 50px !important;
    text-align: right !important;
}
.forumportal_listc li.kmlist .kmnum em {
    font-size: var(--modern-font-size-xs) !important;
    color: var(--modern-text-tertiary) !important;
    font-weight: 400 !important;
    font-style: normal !important;
}

/* Last post column */
.forumportal_listc li.kmlist .kmby {
    font-size: var(--modern-font-size-xs) !important;
    font-family: var(--modern-font-family) !important;
    color: var(--modern-text-tertiary) !important;
    flex-shrink: 0 !important;
    text-align: right !important;
    min-width: 120px !important;
}
.forumportal_listc li.kmlist .kmby a {
    color: var(--modern-text-secondary) !important;
}
.forumportal_listc li.kmlist .kmby a:hover {
    color: var(--modern-primary) !important;
}
.forumportal_listc li.kmlist .kmby cite {
    display: block !important;
}
.forumportal_listc li.kmlist .kmby cite a {
    color: var(--modern-text-secondary) !important;
    font-style: normal !important;
}

/* ---- Viewthread ---- */
#postlist .pl {
    display: flex !important;
    gap: var(--modern-space-4) !important;
    padding: var(--modern-space-5) !important;
    border-bottom: 1px solid var(--modern-border-light) !important;
}
#postlist .pl .pls {
    flex-shrink: 0 !important;
    width: 56px !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
}
#postlist .pl .pls .avatar img {
    border-radius: var(--modern-radius-avatar) !important;
    width: 48px !important;
    height: 48px !important;
}
#postlist .pl .plc {
    flex: 1 !important;
    min-width: 0 !important;
}
#postlist .pl .pi {
    padding: 0 0 var(--modern-space-3) 0 !important;
    border: none !important;
    margin-bottom: var(--modern-space-3) !important;
    border-bottom: 1px solid var(--modern-border-light) !important;
}
#postlist .pl .pi strong a {
    font-family: var(--modern-font-family) !important;
    font-size: var(--modern-font-size-sm) !important;
    font-weight: 600 !important;
    color: var(--modern-text-primary) !important;
}
#postlist .pl .pti {
    font-family: var(--modern-font-family) !important;
}

/* ---- Buttons ---- */
.pn, .pnc {
    font-family: var(--modern-font-family) !important;
    font-size: var(--modern-font-size-sm) !important;
    font-weight: 500 !important;
    border-radius: var(--modern-radius-sm) !important;
    border: 1px solid var(--modern-border) !important;
    padding: 8px 16px !important;
    transition: all var(--modern-transition-fast) !important;
    cursor: pointer !important;
}
.pnc {
    background: var(--modern-primary) !important;
    color: var(--modern-text-on-primary) !important;
    border-color: var(--modern-primary) !important;
}
.pnc:hover {
    background: var(--modern-primary-hover) !important;
    border-color: var(--modern-primary-hover) !important;
}
.pn:hover {
    background: var(--modern-surface-hover) !important;
}
.pgsbtn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 18px !important;
    font-family: var(--modern-font-family) !important;
    font-size: var(--modern-font-size-sm) !important;
    font-weight: 500 !important;
    background: var(--modern-primary) !important;
    color: var(--modern-text-on-primary) !important;
    border-radius: var(--modern-radius-sm) !important;
    text-decoration: none !important;
    transition: all var(--modern-transition-fast) !important;
    border: none !important;
}
.pgsbtn:hover {
    background: var(--modern-primary-hover) !important;
    color: var(--modern-text-on-primary) !important;
}

/* ---- Pagination ---- */
.pgs {
    padding: var(--modern-space-4) 0 !important;
}
.pgs a, .pgs strong, .pgs label, .pgs .pcb {
    font-family: var(--modern-font-family) !important;
}
.pgs .pg a,
.pgs .pg strong {
    min-width: 34px !important;
    height: 34px !important;
    padding: 0 8px !important;
    font-size: var(--modern-font-size-sm) !important;
    border-radius: var(--modern-radius-sm) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid var(--modern-border-light) !important;
    transition: all var(--modern-transition-fast) !important;
}
.pgs .pg a {
    background: var(--modern-surface) !important;
    color: var(--modern-text-secondary) !important;
}
.pgs .pg a:hover {
    background: var(--modern-primary-light) !important;
    color: var(--modern-primary) !important;
    border-color: var(--modern-primary) !important;
}
.pgs .pg strong {
    background: var(--modern-primary) !important;
    color: var(--modern-text-on-primary) !important;
    border-color: var(--modern-primary) !important;
}

/* ---- Sidebar ---- */
#sd { margin-bottom: var(--modern-space-4) !important; }
.sd .bm {
    border-radius: var(--modern-radius-md) !important;
    overflow: hidden !important;
}

/* ---- Forms ---- */
.px, .pt {
    font-family: var(--modern-font-family) !important;
    font-size: var(--modern-font-size-sm) !important;
    border: 1px solid var(--modern-border) !important;
    border-radius: var(--modern-radius-sm) !important;
    padding: 8px 12px !important;
    color: var(--modern-text-primary) !important;
    background: var(--modern-surface) !important;
    transition: border-color var(--modern-transition-fast), box-shadow var(--modern-transition-fast) !important;
}
.px:focus, .pt:focus {
    border-color: var(--modern-primary) !important;
    box-shadow: 0 0 0 3px var(--modern-primary-light) !important;
    outline: none !important;
}

/* ---- Footer ---- */
.dz_footc {
    margin-top: var(--modern-space-10) !important;
    padding: var(--modern-space-8) 0 !important;
    background: var(--modern-surface-tertiary) !important;
    border-top: 1px solid var(--modern-border-light) !important;
}
.dz_footc a {
    font-family: var(--modern-font-family) !important;
    font-size: var(--modern-font-size-sm) !important;
    color: var(--modern-text-secondary) !important;
    transition: color var(--modern-transition-fast) !important;
}
.dz_footc a:hover { color: var(--modern-primary) !important; }
.dz_footc_copy { font-family: var(--modern-font-family) !important; font-size: var(--modern-font-size-xs) !important; color: var(--modern-text-tertiary) !important; }
.dz_footc_nav .pipe { color: var(--modern-text-quaternary) !important; }

/* ---- Right side tools ---- */
.dz_rnav { z-index: var(--modern-z-fixed) !important; }
.dz_rnav a {
    width: 40px !important;
    height: 40px !important;
    border-radius: var(--modern-radius-full) !important;
    background: var(--modern-surface) !important;
    border: 1px solid var(--modern-border) !important;
    box-shadow: var(--modern-shadow-md) !important;
    transition: all var(--modern-transition-fast) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 8px !important;
}
.dz_rnav a:hover {
    background: var(--modern-primary) !important;
    border-color: var(--modern-primary) !important;
    transform: scale(1.05) !important;
}

/* ---- Tabs ---- */
.tb .a a {
    font-family: var(--modern-font-family) !important;
    font-size: var(--modern-font-size-sm) !important;
    font-weight: 600 !important;
    color: var(--modern-primary) !important;
    border-bottom: 2px solid var(--modern-primary) !important;
}
.tb a {
    font-family: var(--modern-font-family) !important;
    font-size: var(--modern-font-size-sm) !important;
    color: var(--modern-text-secondary) !important;
    padding: 10px 0 !important;
    transition: color var(--modern-transition-fast) !important;
}
.tb a:hover { color: var(--modern-primary) !important; }

/* ---- Misc: Pop menus ---- */
.p_pop {
    background: var(--modern-surface) !important;
    border: 1px solid var(--modern-border) !important;
    border-radius: var(--modern-radius-md) !important;
    box-shadow: var(--modern-shadow-lg) !important;
}
.p_pop li a {
    font-family: var(--modern-font-family) !important;
    font-size: var(--modern-font-size-sm) !important;
    color: var(--modern-text-primary) !important;
    padding: 8px 16px !important;
    transition: all var(--modern-transition-fast) !important;
}
.p_pop li a:hover {
    background: var(--modern-surface-hover) !important;
    color: var(--modern-primary) !important;
}

/* ---- Text Colors ---- */
body.discuzx5 {
    font-family: var(--modern-font-family) !important;
    font-size: var(--modern-font-size-base) !important;
    line-height: var(--modern-line-height) !important;
    color: var(--modern-text-primary) !important;
    background: var(--modern-surface-secondary) !important;
    -webkit-font-smoothing: antialiased !important;
}
body.discuzx5 a { color: var(--modern-text-link) !important; transition: color var(--modern-transition-fast) !important; }
body.discuzx5 a:hover { color: var(--modern-primary-hover) !important; }
body.discuzx5 .xg1, body.discuzx5 .xg1 a { color: var(--modern-text-tertiary) !important; }
body.discuzx5 .xi2, body.discuzx5 .xi2 a { color: var(--modern-text-secondary) !important; }
body.discuzx5 .xi1 { color: var(--modern-danger) !important; }
body.discuzx5 .xs1 { font-family: var(--modern-font-family) !important; font-size: var(--modern-font-size-xs) !important; }
body.discuzx5 .xs2 { font-family: var(--modern-font-family) !important; font-size: var(--modern-font-size-md) !important; }

/* ---- Tables (ranklist, search results, etc.) ---- */
.tl th, .tl td {
    font-family: var(--modern-font-family) !important;
    padding: var(--modern-space-3) var(--modern-space-4) !important;
    font-size: var(--modern-font-size-sm) !important;
    border-color: var(--modern-border-light) !important;
}
.tl .th {
    background: var(--modern-surface-secondary) !important;
}
.tl .th th, .tl .th td {
    font-weight: 600 !important;
    font-size: var(--modern-font-size-xs) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: var(--modern-text-tertiary) !important;
}
.tl tr:hover td {
    background: var(--modern-surface-hover) !important;
}

/* ---- Horizontal Rule / Divider ---- */
.xs0, hr.da, .bbda { border-color: var(--modern-border-light) !important; }

/* ---- Input fields ---- */
input, select, textarea, button {
    font-family: var(--modern-font-family) !important;
}

/* ---- Sticky thread highlight ---- */
li.kmlist.common {
    background: var(--modern-success-light) !important;
    border-left: 3px solid var(--modern-success) !important;
}