/*
 * LOUDmusic User Private Files bridge — Fluent Community portal only.
 * Scoped to .fcom_wrap #upfp_container; maps UPF CSS vars to --fcom-* palette.
 */

/* Light mode tokens */
html:not(.dark) .fcom_wrap #upfp_container {
    --primary-color: #1E73BD;
    --secondary-color: #475569;
    --hover-color: #185fa0;
    --upfp-container-width: 100%;
    --upfp-container-left: auto;
    --upfp-container-right: auto;
    --upfp-container-lm: 0;
    --upfp-container-rm: 0;
}

/* Dark mode tokens — brand blue on actions; muted accents elsewhere */
html.dark .fcom_wrap #upfp_container {
    --primary-color: #1E73BD;
    --secondary-color: #99A0AE;
    --hover-color: #99A0AE;
    --upfp-container-width: 100%;
    --upfp-container-left: auto;
    --upfp-container-right: auto;
    --upfp-container-lm: 0;
    --upfp-container-rm: 0;
}

/* Contain layout inside portal content (override UPF full-viewport breakout) */
.fcom_wrap #upfp_container {
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
}

.fcom_wrap #upfp_container.upfp_row {
    border-radius: 0;
    overflow: hidden;
}

/* Light surfaces */
html:not(.dark) .fcom_wrap #upfp_nav.upfp_col {
    background-color: var(--fcom-secondary-bg, #f5f6f8);
    border-color: var(--fcom-primary-border, #e5e7eb);
}

html:not(.dark) .fcom_wrap #upfp_file.upfp_col {
    background-color: var(--fcom-primary-bg, #fff);
    border-color: var(--fcom-primary-border, #e5e7eb);
}

html:not(.dark) .fcom_wrap #upfp_info.upfp_col {
    background-color: var(--fcom-secondary-bg, #f5f6f8);
    border-color: var(--fcom-primary-border, #e5e7eb);
}

html:not(.dark) .fcom_wrap #upfp_container .upfp_banner,
html:not(.dark) .fcom_wrap #upfp_container .upfp_folder_banner {
    background: var(--fcom-secondary-bg, #f5f6f8);
    border-color: var(--fcom-primary-border, #e5e7eb);
}

html:not(.dark) .fcom_wrap #upfp_nav ul li:hover,
html:not(.dark) .fcom_wrap #upfp_nav ul li.upfp_li_active a {
    background: var(--fcom-active-bg, #eef2f7);
}

html:not(.dark) .fcom_wrap #upfp_nav ul {
    border-color: var(--fcom-primary-border, #e5e7eb);
}

html:not(.dark) .fcom_wrap #upfp_container .upfp_row h4,
html:not(.dark) .fcom_wrap #upfp_container .upfp_parmalink,
html:not(.dark) .fcom_wrap #upfp_container .upfp_parmalink a {
    color: var(--fcom-primary-text, #0f172a);
}

/* Dark surfaces */
html.dark .fcom_wrap #upfp_nav.upfp_col {
    background-color: var(--fcom-secondary-bg, #111423);
    border-color: var(--fcom-primary-border, #1a2332);
}

html.dark .fcom_wrap #upfp_file.upfp_col {
    background-color: var(--fcom-primary-bg, #0B0D1B);
    border-color: var(--fcom-primary-border, #1a2332);
}

html.dark .fcom_wrap #upfp_info.upfp_col {
    background-color: var(--fcom-secondary-bg, #111423);
    border-color: var(--fcom-primary-border, #1a2332);
}

html.dark .fcom_wrap #upfp_container .upfp_banner,
html.dark .fcom_wrap #upfp_container .upfp_folder_banner {
    background: var(--fcom-secondary-bg, #111423);
    border-color: var(--fcom-primary-border, #1a2332);
}

html.dark .fcom_wrap #upfp_nav ul li:hover,
html.dark .fcom_wrap #upfp_nav ul li.upfp_li_active a {
    background: var(--fcom-active-bg, #0f1629);
}

html.dark .fcom_wrap #upfp_nav ul {
    border-color: var(--fcom-primary-border, #1a2332);
}

html.dark .fcom_wrap #upfp_container .upfp_row h4,
html.dark .fcom_wrap #upfp_container .upfp_parmalink,
html.dark .fcom_wrap #upfp_container .upfp_parmalink a {
    color: var(--fcom-primary-text, #fff);
}

html.dark .fcom_wrap #upfp_nav ul li.upfp_li_active a {
    border-left-color: var(--fcom-primary-button, #1E73BD);
}

html.dark .fcom_wrap #upfp_nav ul li.upfp_li_active a span,
html.dark .fcom_wrap #upfp_nav ul li.upfp_li_active a i,
html.dark .fcom_wrap #upfp_nav ul li:hover a span,
html.dark .fcom_wrap #upfp_nav ul li:hover a i {
    color: var(--fcom-menu-text-hover, #fff);
}

/* Dropdowns & inputs */
html:not(.dark) .fcom_wrap #upfp_container .new-btns-dropdown {
    background-color: var(--fcom-secondary-content-bg, #fff);
    border: 1px solid var(--fcom-primary-border, #e5e7eb);
}

html.dark .fcom_wrap #upfp_container .new-btns-dropdown {
    background-color: var(--fcom-secondary-content-bg, #191B2E);
    border: 1px solid var(--fcom-primary-border, #1a2332);
}

html.dark .fcom_wrap #upfp_container .new-btn-dropdown-item i {
    color: var(--fcom-secondary-text, #99A0AE);
}

html:not(.dark) .fcom_wrap #upfp_container #upfp_search_box,
html:not(.dark) .fcom_wrap #upfp_container .upfp_search_bar input[type="text"],
html:not(.dark) .fcom_wrap #upfp_container #swm_fltr_frm input[type="text"] {
    background: var(--fcom-primary-bg, #fff);
    border-color: var(--fcom-primary-border, #e5e7eb);
    color: var(--fcom-primary-text, #0f172a);
}

html.dark .fcom_wrap #upfp_container #upfp_search_box,
html.dark .fcom_wrap #upfp_container .upfp_search_bar input[type="text"],
html.dark .fcom_wrap #upfp_container #swm_fltr_frm input[type="text"] {
    background: var(--fcom-secondary-content-bg, #191B2E);
    border-color: var(--fcom-primary-border, #1a2332);
    color: var(--fcom-primary-text, #fff);
}

html.dark .fcom_wrap #upfp_container #drop-area {
    background-color: var(--fcom-active-bg, #0f1629);
    border-color: var(--fcom-primary-border, #1a2332);
}

html.dark .fcom_wrap #upfp_container #drop-area span {
    color: var(--fcom-text-off, #6B7280);
}

/* File rows / list header */
html.dark .fcom_wrap #upfp_container .upfp_single-file {
    background: var(--fcom-secondary-content-bg, #191B2E);
    border-color: var(--fcom-primary-border, #1a2332);
    color: var(--fcom-primary-text, #fff);
}

html.dark .fcom_wrap #upfp_container #upfp_main_list_view,
html.dark .fcom_wrap #upfp_container #upfp_main_list_view .upfp_list_cols {
    background-color: var(--fcom-secondary-bg, #111423);
    color: var(--fcom-primary-text, #fff);
}

/* Popups inside portal */
html.dark .fcom_wrap .upfp-popup {
    background: var(--fcom-secondary-content-bg, #191B2E);
    color: var(--fcom-primary-text, #fff);
    border: 1px solid var(--fcom-primary-border, #1a2332);
}

html.dark .fcom_wrap .upfp-popup h4 {
    color: var(--fcom-primary-text, #fff);
}

/* Info sidebar — labels, paths, metadata */
html.dark .fcom_wrap #upfp_container .upfp_file_info h4,
html.dark .fcom_wrap #upfp_container .upfp_folder_info h4,
html.dark .fcom_wrap #upfp_container .upfp_file_info p,
html.dark .fcom_wrap #upfp_container .upfp_folder_info p,
html.dark .fcom_wrap #upfp_container .upfp_file_info .upfp_parmalink,
html.dark .fcom_wrap #upfp_container .upfp_file_info .upfp_parmalink a {
    color: var(--fcom-primary-text, #fff);
}

html.dark .fcom_wrap #upfp_container .upfp_file_info h4 a i,
html.dark .fcom_wrap #upfp_container .upfp_folder_info h4 a i {
    color: var(--fcom-secondary-text, #99A0AE);
}

/* Who has access — usernames and role names */
html.dark .fcom_wrap #upfp_container .upfp_file_access_list,
html.dark .fcom_wrap #upfp_container .upfp_folder_access_list {
    border-bottom-color: var(--fcom-primary-border, #1a2332);
}

html.dark .fcom_wrap #upfp_container .upfp_file_access_list li,
html.dark .fcom_wrap #upfp_container .upfp_folder_access_list li,
html.dark .fcom_wrap #upfp_container .upfp_file_access_list li span,
html.dark .fcom_wrap #upfp_container .upfp_folder_access_list li span,
html.dark .fcom_wrap #upfp_container #upfp_info ul li span {
    color: var(--fcom-primary-text, #fff);
}

/* Comments — match search field surfaces */
html.dark .fcom_wrap #upfp_container textarea#upfp_file_new_cmnt {
    background: var(--fcom-secondary-content-bg, #191B2E);
    border-color: var(--fcom-primary-border, #1a2332);
    color: var(--fcom-primary-text, #fff);
}

html.dark .fcom_wrap #upfp_container textarea#upfp_file_new_cmnt::placeholder {
    color: var(--fcom-text-off, #6B7280);
}

html.dark .fcom_wrap #upfp_container .upfp_file_comments .upfp_comment_block {
    background: var(--fcom-secondary-content-bg, #191B2E);
    border: 1px solid var(--fcom-primary-border, #1a2332);
    color: var(--fcom-primary-text, #fff);
}

html.dark .fcom_wrap #upfp_container span.cmnt_usr_email,
html.dark .fcom_wrap #upfp_container span.cmnt_usr_cmnt {
    color: var(--fcom-primary-text, #fff);
}

html.dark .fcom_wrap #upfp_container span.cmnt_date {
    color: var(--fcom-secondary-text, #99A0AE);
}

html.dark .fcom_wrap #upfp_container .upfp_file_comments img.avatar {
    border-color: var(--fcom-primary-border, #1a2332);
}

/* File grid / list type icons (PDF, audio, video, etc.) — not real image previews */
html.dark .fcom_wrap #upfp_container .upfp_content .doc-item img:not([data-type="img"]),
html.dark .fcom_wrap #upfp_container .upfp_content .upfp_list_thumb img:not([data-type="img"]) {
    filter: brightness(0) invert(1);
}

/* File / folder titles in grid */
html.dark .fcom_wrap #upfp_container .upfp_content .doc_ttl,
html.dark .fcom_wrap #upfp_container .upfp_content .folder-item p {
    color: var(--fcom-primary-text, #fff);
}

/* Hide account chrome only — Fluent portal already has profile, settings, logout */
.fcom_wrap #upfp_container .upfp_user_info,
.fcom_wrap #upfp_container .upfp_storage_info {
    display: none !important;
}

/* Info panel opens/closes automatically — hide manual width resizer */
.fcom_wrap #upfp_container .upfp_resizer {
    display: none !important;
}

/* Default: info sidebar collapsed until file/folder details are shown (JS opens it) */
.fcom_wrap #upfp_container #upfp_info.upfp_col {
    max-width: 0 !important;
    opacity: 0;
    overflow: hidden;
}

.fcom_wrap #upfp_container #upfp_info.upfp_col.lm-upf-info-open {
    max-width: 290px !important;
    opacity: 1;
}

/* BuddyBoss / WP button focus rings */
.fcom_wrap #upfp_container button:focus,
.fcom_wrap #upfp_container button:active,
.fcom_wrap #upfp_container button:focus:not(:focus-visible),
.fcom_wrap #upfp_container input[type="submit"]:focus,
.fcom_wrap #upfp_container input[type="submit"]:active {
    outline: none !important;
    box-shadow: none !important;
}

.fcom_wrap #upfp_container button:focus-visible,
.fcom_wrap #upfp_container input[type="submit"]:focus-visible {
    outline: 2px solid var(--fcom-primary-button, #1E73BD) !important;
    outline-offset: 2px;
}