/* Custom styles */
/* ============================================================
   My Blog — Custom Styles
   ============================================================ */

/* ── Globals ─────────────────────────────────── */
body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ── Hero Section ────────────────────────────── */
.hero-section {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

body { overflow-x: hidden; }

/* ── Post Cards (public) ─────────────────────── */
.post-card {
    transition: transform .2s ease, box-shadow .2s ease;
}
.post-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0,0,0,.12) !important;
}

.post-cover {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.post-cover-show {
    max-height: 420px;
    object-fit: cover;
}

.post-cover-placeholder {
    width: 100%;
    height: 200px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* ── Post Content ────────────────────────────── */
.post-content {
    line-height: 1.85;
    font-size: 1.05rem;
    color: #333;
}

/* ── Text utilities ──────────────────────────── */
.text-xs { font-size: .7rem; letter-spacing: .05rem; }
.text-gray-800 { color: #3a3b45; }

/* ============================================================
   DASHBOARD — SB Admin 2 Style (Bootstrap 5)
   ============================================================ */

/* ── Wrapper ─────────────────────────────────── */
#wrapper {
    display: flex;
    min-height: 100vh;
}

/* ── Sidebar ─────────────────────────────────── */
.admin-sidebar {
    width: 225px;
    min-height: 100vh;
    background: linear-gradient(180deg, #4e73df 10%, #224abe 100%);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    padding: 0;
    list-style: none;
    margin: 0;
    z-index: 1000;
    transition: width .25s ease;
}

.admin-sidebar .sidebar-brand {
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,.15);
}
.admin-sidebar .sidebar-brand:hover { color: rgba(255,255,255,.85); }

.admin-sidebar .sidebar-divider {
    border-top: 1px solid rgba(255,255,255,.15);
    margin: .5rem 1rem;
}

.admin-sidebar .sidebar-heading {
    color: rgba(255,255,255,.4);
    font-size: .65rem;
    letter-spacing: .1rem;
}

.admin-sidebar .nav-item .nav-link {
    color: rgba(255,255,255,.8);
    padding: .75rem 1rem;
    font-size: .85rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    transition: color .15s;
    text-decoration: none;
}
.admin-sidebar .nav-item .nav-link:hover,
.admin-sidebar .nav-item.active .nav-link {
    color: #fff;
    background: rgba(255,255,255,.1);
    border-radius: .35rem;
}

/* ── Sidebar submenu ─────────────────────────── */
.sidebar-submenu {
    background: rgba(0,0,0,.1);
    border-radius: .35rem;
    margin: 0 .5rem .25rem;
}
.sidebar-submenu-item {
    display: block;
    padding: .4rem 1rem .4rem 2rem;
    color: rgba(255,255,255,.7);
    text-decoration: none;
    font-size: .8rem;
    transition: color .15s;
}
.sidebar-submenu-item:hover { color: #fff; }

/* ── Content wrapper ─────────────────────────── */
#content-wrapper {
    flex: 1;
    background: #f8f9fc;
    min-width: 0;
}

/* ── Topbar ──────────────────────────────────── */
.admin-topbar {
    height: 60px;
    padding: 0 1.5rem;
}
.admin-topbar .navbar-search input {
    width: 200px;
    font-size: .85rem;
    transition: width .3s;
}
.admin-topbar .navbar-search input:focus { width: 260px; }

/* ── Avatar ──────────────────────────────────── */
.admin-avatar {
    width: 36px;
    height: 36px;
    font-size: .9rem;
    font-weight: 700;
    flex-shrink: 0;
}
.admin-avatar-lg {
    width: 56px;
    height: 56px;
    font-size: 1.4rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* ── Stat cards ──────────────────────────────── */
.stat-card { border-left: 4px solid transparent !important; }
.stat-card-primary  { border-left-color: #4e73df !important; }
.stat-card-success  { border-left-color: #1cc88a !important; }
.stat-card-info     { border-left-color: #36b9cc !important; }
.stat-card-warning  { border-left-color: #f6c23e !important; }
.stat-card-danger   { border-left-color: #e74a3b !important; }

/* ── Charts ──────────────────────────────────── */
.chart-area  { position: relative; height: 280px; }
.chart-pie   { position: relative; height: 200px; width: 200px; }

/* ── Footer ──────────────────────────────────── */
.admin-footer {
    border-top: 1px solid #e3e6f0;
    font-size: .8rem;
}

/* ── Mobile sidebar ──────────────────────────── */
@media (max-width: 767.98px) {
    .admin-sidebar {
        width: 100%;
        min-height: auto;
        max-height: 0;
        overflow: hidden;
        transition: max-height .3s ease;
    }
    .admin-sidebar.toggled {
        max-height: 100vh;
    }
    #wrapper {
        flex-direction: column;
    }
}