/* ======================================================
   Friendbook - FACEBOOK-FLAT THEME (Phase 7)
   ======================================================
   Flat Facebook look: light gray page (#f0f2f5), solid
   white cards, 8px radius, soft 1px shadow, no blur,
   no wallpaper, no glass sheen. Applied on every page.
   Loaded LAST so it wins over the old liquid-glass and
   base styles. Variable names kept (--glass-*) so other
   files that reference them keep working.
   ====================================================== */


/* ---------- FACEBOOK-FLAT COLORS ---------- */

:root {
    --glass-bg: #ffffff;
    --glass-bg-strong: #ffffff;
    --glass-bg-soft: #f0f2f5;
    --glass-border: #ced0d4;
    --glass-border-soft: #e4e6eb;
    --glass-edge: rgba(0, 0, 0, 0.03);
    --glass-sheen: none;
    --glass-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    --glass-shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.05);
    --glass-blur: 0px;
    --glass-radius: 8px;
    --glass-radius-sm: 8px;
}


body.dark-mode {
    --glass-bg: #242526;
    --glass-bg-strong: #3a3b3c;
    --glass-bg-soft: #3a3b3c;
    --glass-border: #3e4042;
    --glass-border-soft: rgba(255, 255, 255, 0.08);
    --glass-edge: rgba(255, 255, 255, 0.05);
    --glass-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    --glass-shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.35);
}


/* ---------- FLAT PAGE BACKGROUND (no wallpaper) ---------- */

html {
    background: #f0f2f5;
}


body {
    background: #f0f2f5;
}


body.dark-mode {
    background: #18191a;
}


/* ---------- PAGE WRAPPERS GO TRANSPARENT ---------- */

.dash-app,
.main-container,
.feed,
.sidebar,
.socialhub-msg-page-wrap,
.search-container {
    background: transparent;
}


/* ---------- TOPBAR (flat white shelf) ---------- */

.topbar {
    background-color: #ffffff;

    background-image: none;

    -webkit-backdrop-filter: none;

    backdrop-filter: none;

    border-bottom: 1px solid #ced0d4;

    box-shadow: none;
}


body.dark-mode .topbar {
    background-color: #242526;

    border-bottom-color: #3e4042;
}


/* ---------- CORE PANELS (flat cards) ---------- */

.sidebar-profile,
.sidebar-menu,
.create-post,
.post,
.profile-card:not(#profilePostsSection),
.friend-mini,
.socialhub-friends-widget,
.socialhub-chats-widget,
.socialhub-bot-card,
.socialhub-chat-popup,
.socialhub-msg-page,
.socialhub-msg-conv,
.socialhub-chat-card,
.socialhub-search-dropdown,
.socialhub-user-row,
.welcome-card,
.side-card,
.post-lightbox-box,
.edit-profile-box,
.auth-card,
.settings-sidebar,
.settings-panel {
    background-color: var(--glass-bg);

    background-image: none;

    -webkit-backdrop-filter: none;

    backdrop-filter: none;

    border: 1px solid var(--glass-border-soft);

    border-radius: var(--glass-radius);

    box-shadow: var(--glass-shadow-soft);
}


.sidebar-profile,
.sidebar-menu {
    background-color: transparent;

    background-image: none;

    -webkit-backdrop-filter: none;

    backdrop-filter: none;

    border: none;

    border-radius: 0;

    box-shadow: none;
}


/* ---------- STORY BAR ---------- */

.socialhub-stories {
    background-color: var(--glass-bg);

    background-image: none;

    -webkit-backdrop-filter: none;

    backdrop-filter: none;

    border: none;

    border-radius: var(--glass-radius);

    box-shadow: var(--glass-shadow-soft);
}


.socialhub-story-avatar {
    background: var(--glass-bg-soft);

    border-color: var(--glass-border-soft);
}


.feed > .socialhub-stories .socialhub-story-ring {
    background: #ffffff !important;
}


.feed > .socialhub-stories .socialhub-story-ring::after {
    background: #ffffff;

    -webkit-backdrop-filter: none;

    backdrop-filter: none;
}


body.dark-mode .feed > .socialhub-stories .socialhub-story-ring {
    background: #242526 !important;
}


body.dark-mode .feed > .socialhub-stories .socialhub-story-ring::after {
    background: #242526;
}


/* ---------- FLAT SUB-ELEMENTS ---------- */

.search-box,
.top-icons button,
.fb-nav-btn:hover,
.profile-tabs button:hover {
    background: var(--glass-bg-soft);

    -webkit-backdrop-filter: none;

    backdrop-filter: none;

    border: none;

    box-shadow: none;
}


.profile-buttons button:not(.primary-btn) {
    background: var(--glass-bg-soft);

    -webkit-backdrop-filter: none;

    backdrop-filter: none;

    border: 1px solid var(--glass-border-soft);

    box-shadow: none;
}


.profile-photo-item,
.profile-post-tile,
.about-card .about-row,
.friend-mini-avatar {
    background: var(--glass-bg-soft);

    box-shadow: none;
}


.profile-photo > * {
    border-color: #ffffff;
}


.profile-tabs {
    border-top-color: var(--glass-border-soft);
}


/* ---------- INPUTS ---------- */

#postInput,
.create-post-top input,
.comment-input,
#editProfileForm input,
#editProfileForm textarea,
.auth-card input,
.socialhub-msg-inputbar input,
.settings-field input,
.settings-field textarea {
    background: var(--glass-bg-soft);

    -webkit-backdrop-filter: none;

    backdrop-filter: none;

    border: none;

    box-shadow: none;
}


/* ---------- OVERLAYS ---------- */

.edit-profile-modal,
.post-lightbox {
    background: #ffffff;

    -webkit-backdrop-filter: none;

    backdrop-filter: none;
}


.premium-emoji-picker {
    background: #ffffff;

    -webkit-backdrop-filter: none;

    backdrop-filter: none;

    border-color: var(--glass-border-soft);
}


body.dark-mode .edit-profile-modal,
body.dark-mode .post-lightbox {
    background: #242526;
}


/* ---------- HOVER ---------- */

.post:hover {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}


/* ---------- DARK MODE RE-ASSERTS ---------- */

body.dark-mode .sidebar-profile,
body.dark-mode .sidebar-menu {
    background-color: transparent;

    background-image: none;

    border: none;

    box-shadow: none;
}


body.dark-mode .create-post,
body.dark-mode .post,
body.dark-mode .profile-card:not(#profilePostsSection),
body.dark-mode .friend-mini,
body.dark-mode .socialhub-friends-widget,
body.dark-mode .socialhub-chats-widget,
body.dark-mode .socialhub-bot-card,
body.dark-mode .socialhub-chat-popup,
body.dark-mode .socialhub-msg-page,
body.dark-mode .socialhub-msg-conv,
body.dark-mode .socialhub-chat-card,
body.dark-mode .socialhub-search-dropdown,
body.dark-mode .socialhub-user-row,
body.dark-mode .welcome-card,
body.dark-mode .side-card,
body.dark-mode .post-lightbox-box,
body.dark-mode .edit-profile-box,
body.dark-mode .auth-card,
body.dark-mode .settings-sidebar,
body.dark-mode .settings-panel {
    background-color: var(--glass-bg);

    background-image: none;

    border-color: var(--glass-border-soft);

    box-shadow: var(--glass-shadow-soft);
}


body.dark-mode .search-box,
body.dark-mode .top-icons button,
body.dark-mode .fb-nav-btn:hover,
body.dark-mode .profile-tabs button:hover {
    background: var(--glass-bg-soft);

    border: none;

    box-shadow: none;
}


body.dark-mode .settings-field input,
body.dark-mode .settings-field textarea {
    background: var(--glass-bg-soft);

    border: none;

    box-shadow: none;
}


body.dark-mode .profile-buttons button:not(.primary-btn) {
    background: var(--glass-bg-soft);
}


body.dark-mode .profile-photo-item,
body.dark-mode .profile-post-tile,
body.dark-mode .about-card .about-row,
body.dark-mode .friend-mini-avatar,
body.dark-mode .socialhub-story-avatar {
    background: var(--glass-bg-soft);

    box-shadow: none;
}


body.dark-mode .profile-photo > * {
    border-color: #3e4042;
}


body.dark-mode .profile-tabs {
    border-top-color: var(--glass-border-soft);
}


/* ---------- REDUCED MOTION ---------- */

@media (prefers-reduced-motion: reduce) {

    body::before,
    body::after {
        display: none;
    }

}


/* ======================================================
   FACEBOOK-STYLE FEED CARDS (Phase 7)
   Flat white cards, no border, soft shadow - like FB.
   ====================================================== */

.create-post,
.post,
.socialhub-stories {
    background-color: #ffffff;

    background-image: none;

    -webkit-backdrop-filter: none;

    backdrop-filter: none;

    border: none;

    border-radius: 8px;

    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}


.post:hover {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);

    transform: none;
}


.post .socialhub-post-image,
.post .socialhub-post-video {
    margin-left: -16px;

    margin-right: -16px;

    width: calc(100% + 32px);

    border-radius: 0;
}


#posts,
#upPosts {
    gap: 16px;
}


#posts .post,
#upPosts .post {
    margin-bottom: 0;
}


.socialhub-story-ring {
    border-color: rgba(0, 0, 0, 0.08);
}


body.dark-mode .create-post,
body.dark-mode .post,
body.dark-mode .socialhub-stories {
    background-color: #242526;

    background-image: none;

    -webkit-backdrop-filter: none;

    backdrop-filter: none;

    border: none;

    border-radius: 8px;

    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}


body.dark-mode .post:hover {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);

    transform: none;
}