/* =========================================================
   OnlineBanters — App Layout & Components
   Complements assets/css/style.css (base/reset/buttons)
   ========================================================= */

/* ---------- Layout shell ---------- */
.topnav {
    position: sticky; top: 0; z-index: 1000;
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; padding: 10px 14px;
    background: #0d0d0d; border-bottom: 1px solid #1b1b1b;
}
.topnav .left { display: flex; align-items: center; gap: 12px; }
.topnav .right { display: flex; align-items: center; gap: 10px; }
.topnav .brand { display: inline-flex; align-items: center; gap: 8px; }
.topnav .nav-link { color: #ccc; margin-right: 10px; }
.topnav .nav-link:hover { color: #00ffd5; }
.notif { color: #ddd; }

.hamburger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 8px;
    border: 1px solid #222; background: #141414; color: #eaeaea;
    cursor: pointer;
}
.hamburger:hover { background: #1a1a1a; }

/* sidebars + content columns */
.sidebar-left {
    position: fixed; top: 52px; left: 0; bottom: 0;
    width: 260px; padding: 14px; overflow: auto;
    background: #0f0f10; border-right: 1px solid #171717;
    transform: translateX(-100%); transition: transform .25s ease;
}
.sidebar-left.open { transform: translateX(0); }
.sidebar-right {
    position: fixed; top: 52px; right: 0; bottom: 0;
    width: 320px; padding: 14px; overflow: auto;
    background: #0f0f10; border-left: 1px solid #171717;
}
.content {
    min-height: 100vh; padding: 16px;
    margin: 0 320px 0 260px;   /* gutters for sidebars */
}

/* desktop behavior: show left by default */
@media (min-width: 992px) {
    .sidebar-left { transform: none; }
}

/* mobile: drawers; right sidebar goes to bottom */
@media (max-width: 991px) {
    .sidebar-right {
        position: static; width: auto; border-left: 0; background: transparent;
        padding: 12px 14px; margin-top: 10px;
    }
    .content { margin: 0; padding: 12px; }
}

/* ---------- Sidebar internals ---------- */
.side-nav { display: grid; gap: 8px; }
.side-link {
    display: block; padding: 10px 12px; border-radius: 10px;
    color: #e6e6e6; background: #121212; border: 1px solid #1a1a1a;
}
.side-link:hover, .side-link.active { background: #171717; border-color: #242424; color: #00ffd5; }
.side-divider { height: 1px; background: #1a1a1a; margin: 12px 0; }
.side-footer { margin-top: 12px; color: #9aa3af; }

/* ---------- Cards & common blocks ---------- */
.card {
    background: #141414; border: 1px solid #222; border-radius: 12px;
    padding: 14px; margin-bottom: 14px; box-shadow: 0 0 20px rgba(0,0,0,.15);
}
.card-title { color: #00ffd5; margin-bottom: 8px; }

/* ---------- Breadcrumbs ---------- */
.breadcrumbs { margin: 6px 0 14px; color: #9aa3af; font-size: .95rem; }
.breadcrumbs ol { display: flex; gap: 8px; flex-wrap: wrap; list-style: none; }
.breadcrumbs li::after { content: "›"; margin: 0 6px; color: #555; }
.breadcrumbs li:last-child::after { content: none; }
.breadcrumbs a { color: #00ffd5; }
.breadcrumbs a:hover { text-decoration: underline; }

/* ---------- Feed composer ---------- */
.composer textarea {
    width: 100%; min-height: 110px; padding: 12px;
    background: #111; color: #fff; border: 1px solid #2a2a2a; border-radius: 10px;
}
.composer .composer-row {
    display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px;
}
.composer .inline-input {
    padding: 10px 12px; border-radius: 8px; border: 1px solid #2a2a2a;
    background: #111; color: #eaeaea; width: 220px;
}
.composer .inline-check { color: #ddd; display: inline-flex; align-items: center; gap: 6px; }
.composer .btn { padding: 10px 14px; }

/* ---------- Feed list ---------- */
.feed-list { display: grid; gap: 12px; }
.feed-item .feed-head { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.feed-item .avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: #1a1a1a; object-fit: cover; border: 1px solid #222;
}
.feed-item .meta { color: #9aa3af; font-size: .85rem; }
.feed-body p { margin: 8px 0 10px; }
.feed-body .thumb {
    width: 100%; max-height: 420px; object-fit: cover;
    border-radius: 10px; border: 1px solid #222; margin-top: 6px;
}
.blog-attach {
    display: grid; grid-template-columns: 56px 1fr; gap: 10px;
    align-items: center; padding: 8px; margin-top: 8px;
    background: #101214; border: 1px solid #1d1f26; border-radius: 10px;
}
.blog-attach img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; }

.feed-actions {
    display: flex; align-items: center; gap: 8px; margin-top: 10px;
    color: #cfcfcf;
}
.feed-actions a { color: #cfcfcf; }
.feed-actions a:hover { color: #00ffd5; }

/* ---------- Comments ---------- */
.comments h3 { margin-top: 0; }
.comment { padding: 10px 0; border-top: 1px dashed #202020; }
.comment:first-child { border-top: 0; }
.comment-head { display: flex; gap: 8px; align-items: center; }
.comment .avatar { width: 28px; height: 28px; border-radius: 50%; background: #1a1a1a; border: 1px solid #222; }
.comment-body { margin: 6px 0 6px 36px; }
.comment-actions { display: flex; align-items: center; gap: 10px; margin-left: 36px; }
.reply-form { margin: 8px 0 0 36px; display: none; }
.reply .comment-body, .reply .comment-actions { margin-left: 36px; }

/* ---------- Right sidebar: Stats + Ads ---------- */
.stats-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.stats-list li { display: flex; align-items: center; justify-content: space-between; }
.ad-slot { margin-top: 12px; padding: 0; }
.ad-slot .ad-label { font-size: .8rem; color: #9aa3af; padding: 8px 12px; border-bottom: 1px solid #1e1e1e; }
.ad-placeholder {
    display: block; background: #101010; border-radius: 8px; border: 1px dashed #2a2a2a;
    height: 250px; margin: 10px; /* default 300x250 box feel */
}

/* ---------- Alerts ---------- */
.alert { padding: 12px 14px; border-radius: 10px; margin: 10px 0; }
.alert.info  { background: #0b2830; color: #8ef6ff; border: 1px solid #0b2830; }
.alert.error { background: #3a0b0b; color: #ffdada; border: 1px solid #5c1c1c; }

/* ---------- Utilities ---------- */
.muted { color: #9aa3af; }
.hidden { display: none !important; }