/* === Color System (Adjust here) ========================================= */
:root { --color-bg: #f5f7fa; --color-bg-alt: #eef2f7; --color-surface: #ffffff; --color-surface-alt: #f0f4f9; --color-surface-elevated: #ffffff; --color-border: #d9e2ec; --color-border-strong: #b6c2d1; --color-primary: #1e3a8a; --color-primary-accent: #2563eb; --color-primary-rgb: 30,58,138; --color-secondary: #0f766e; --color-secondary-accent: #14b8a6; --color-danger: #dc2626; --color-warning: #d97706; --color-success: #15803d; --color-info: #0369a1; --color-text: #1e293b; --color-text-soft: #465367; --color-text-muted: #64748b; --color-link: var(--color-primary-accent); --color-link-hover: #1d4ed8; --color-link-decoration: none; --radius-sm: .35rem; --radius: .65rem; --radius-lg: 1rem; --focus-ring: 0 0 0 .18rem rgba(var(--color-primary-rgb), .35); /* Code block design tokens (light) */ --code-bg: #f0f4f9; --code-fg: #312f2f; /* CHANGED from #1e293b */ --code-border: #d5dee8; --code-inline-bg: #e2e8f0; --code-inline-fg: #312f2f; /* Match block text for consistency */ --code-line-highlight: #e9f2ff; --code-scrollbar-track: transparent; --code-scrollbar-thumb: #c3ced9; }

@media (prefers-color-scheme: dark) {
    :root { --color-bg: #0f172a; --color-bg-alt: #162239; --color-surface: #1e293b; --color-surface-alt: #243654; --color-surface-elevated: #253449; --color-border: #314158; --color-border-strong: #465876; --color-text: #f1f5f9; --color-text-soft: #d0d7e2; --color-text-muted: #94a3b8; --color-link: #3b82f6; --color-link-hover: #60a5fa; /* Dark code tokens */ --code-bg: #182334; /* slightly lighter than previous #0f172a for contrast */ --code-fg: #312f2f; /* OVERRIDE to requested color */ --code-border: #273347; --code-inline-bg: #1e2a3b; --code-inline-fg: #312f2f; /* inline code color */ --code-line-highlight: #223850; --code-scrollbar-thumb: #415369; }

    .app-navbar { background: linear-gradient(to right,#1e3a8a,#1e40af); }
    .app-footer { background: #1e293b; }
}

/* === Base ================================================================ */
html, body { height: 100%; }
    body.app-body { background: var(--color-bg); color: var(--color-text); font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; line-height: 1.5; }
a { color: var(--color-link); text-decoration: var(--color-link-decoration); }
    a:hover { color: var(--color-link-hover); text-decoration: underline; }
.main-container { background: transparent; }

/* === Navbar ============================================================= */
.app-navbar { background: linear-gradient(145deg,#1e3a8a,#27479e 55%,#2563eb); border: 0; padding-top: .55rem; padding-bottom: .55rem; }
    .app-navbar .navbar-brand .brand-logo { max-height: 42px; transition: transform .25s ease; }
    .app-navbar .navbar-brand:hover .brand-logo { transform: scale(1.04); }
    .app-navbar .nav-link { font-weight: 500; color: rgba(255,255,255,.82) !important; position: relative; padding: .55rem .9rem; border-radius: var(--radius-sm); transition: background .18s ease, color .18s ease; }
        .app-navbar .nav-link:hover,
        .app-navbar .nav-link:focus { background: rgba(255,255,255,.12); color: #fff !important; }
        .app-navbar .nav-link.active { background: rgba(255,255,255,.18); color: #fff !important; font-weight: 600; }
.user-toggle { font-weight: 500; }

/* Dropdown */
.dropdown-menu { --bs-dropdown-link-hover-bg: var(--color-surface-alt); border: 1px solid var(--color-border); background: var(--color-surface-elevated); box-shadow: 0 .75rem 1.5rem -0.5rem rgba(0,0,0,.18); border-radius: var(--radius); overflow: hidden; color: var(--color-text); }
.dropdown-item { font-size: .875rem; display: flex; align-items: center; gap: .35rem; padding: .55rem .9rem; color: inherit; }
    .dropdown-item:hover,
    .dropdown-item:focus { background: var(--color-bg-alt); }

/* === Buttons ============================================================ */
.btn { border-radius: var(--radius-sm); font-weight: 500; letter-spacing: .25px; }
.btn-primary { --bs-btn-bg: var(--color-primary); --bs-btn-border-color: var(--color-primary); --bs-btn-hover-bg: var(--color-primary-accent); --bs-btn-hover-border-color: var(--color-primary-accent); --bs-btn-active-bg: #1d4ed8; --bs-btn-active-border-color: #1d4ed8; --bs-btn-disabled-bg: #8da2cf; --bs-btn-disabled-border-color: #8da2cf; }
.btn-outline-primary { --bs-btn-color: var(--color-primary); --bs-btn-border-color: var(--color-primary); --bs-btn-hover-bg: var(--color-primary); --bs-btn-hover-border-color: var(--color-primary); --bs-btn-hover-color: #fff; }
.btn-secondary { --bs-btn-bg: var(--color-secondary); --bs-btn-border-color: var(--color-secondary); --bs-btn-hover-bg: var(--color-secondary-accent); --bs-btn-hover-border-color: var(--color-secondary-accent); }

/* === Cards / Surfaces =================================================== */
.card { border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); box-shadow: 0 .25rem .9rem -.35rem rgba(0,0,0,.12); }
.card-header { background: linear-gradient(145deg,var(--color-surface-alt),var(--color-surface)); border-bottom: 1px solid var(--color-border); font-weight: 600; }

/* === Forms =============================================================== */
.form-control, .form-select { border-radius: var(--radius-sm); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); }
    .form-control:focus, .form-select:focus { box-shadow: var(--focus-ring); border-color: var(--color-primary-accent); }

/* === Badges ============================================================= */
.badge { font-weight: 500; border-radius: 1.25rem; letter-spacing: .25px; }
    .badge.bg-primary { background: var(--color-primary) !important; }

/* === Footer ============================================================= */
.app-footer { background: linear-gradient(135deg,#1e3a8a,#1f4498 55%,#2563eb); color: #fff; padding: 1.25rem 0; margin-top: 2rem; border-top: 2px solid #153061; }
    .app-footer a { color: #ffffffcc; text-decoration: none; }
        .app-footer a:hover { color: #fff; text-decoration: underline; }
    .app-footer .sep { margin: 0 .5rem; opacity: .6; }

/* === Utilities ========================================================== */
.text-muted { color: var(--color-text-muted) !important; }
.border-bottom { border-color: var(--color-border) !important; }
:focus-visible { outline: 2px solid var(--color-primary-accent); outline-offset: 2px; }
.btn, .nav-link, .card, .form-control, .dropdown-item { transition: background .2s ease, color .2s ease, box-shadow .25s ease, border-color .25s ease; }

/* === Content styling (blog excerpts, etc.) ============================== */
.excerpt a { color: var(--color-link); }

/* === Post / Article Content ============================================ */
.post-content { color: var(--color-text); line-height: 1.6; font-size: 0.97rem; }
    .post-content p { margin-bottom: 1rem; }
    .post-content h1,
    .post-content h2,
    .post-content h3,
    .post-content h4,
    .post-content h5,
    .post-content h6 { color: var(--color-text); font-weight: 600; line-height: 1.25; margin-top: 1.6rem; margin-bottom: .75rem; }
    .post-content a { color: var(--color-link); text-decoration: underline; }
        .post-content a:hover { color: var(--color-link-hover); }
    .post-content blockquote { border-left: 4px solid var(--color-primary-accent); padding: .75rem 1rem; background: var(--color-surface-alt); font-style: italic; border-radius: var(--radius-sm); margin: 1rem 0; }

@media (prefers-color-scheme: dark) {
    .post-content blockquote { background: #1d2a3b; }
}

/* === Code Blocks (Revised) ============================================== */
/* Remove previous conflicting code styles. */
.post-content pre,
.post-content pre code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size: .85rem; tab-size: 4; }

.post-content pre { background: var(--code-bg); color: var(--code-fg); border: 1px solid var(--code-border); padding: 1rem 1.1rem; border-radius: .75rem; line-height: 1.45; overflow: auto; position: relative; -webkit-font-smoothing: antialiased; }

    /* Ensure the inner code element does not reintroduce a different background */
    .post-content pre code { background: transparent; color: inherit; padding: 0; display: block; white-space: pre; }

/* Inline code (NOT in pre) */
.post-content :not(pre) > code { color: var(--inline-code-fg) !important; background: var(--code-inline-bg); border: 1px solid rgba(0,0,0,.06); }

@media (prefers-color-scheme: dark) {
    .post-content :not(pre) > code { border: 1px solid #314158; }
}

/* Scrollbar styling (WebKit) */
.post-content pre::-webkit-scrollbar { height: 10px; width: 10px; }
.post-content pre::-webkit-scrollbar-track { background: var(--code-scrollbar-track); }
.post-content pre::-webkit-scrollbar-thumb { background: var(--code-scrollbar-thumb); border-radius: 6px; }

/* Optional subtle line highlight (if you want to apply manually with <mark>) */
.post-content pre mark { background: var(--code-line-highlight); color: inherit; display: block; margin: 0 -1.1rem; padding: 0 1.1rem; }

/* Improve contrast of small metadata */
.small, small { color: var(--color-text-soft); }

@media (prefers-color-scheme: dark) {
    .small, small { color: #c5d1dd; }
}

/* Muted adjustments in dark mode */
@media (prefers-color-scheme: dark) {
    .text-muted { color: #b3bdca !important; }
}

/* HR contrast (dark) */
@media (prefers-color-scheme: dark) {
    hr { border-color: #3a4f69; opacity: .9; }
}

/* Button variant for light on dark surfaces */
.btn-light { color: var(--color-text); }

@media (prefers-color-scheme: dark) {
    .btn-light { background: #e2e8f0; color: #1e293b; border-color: #e2e8f0; }
        .btn-light:hover { background: #f1f5f9; color: #1e293b; }
}

/* Keep dropdown toggle text readable on dark navbar */
.app-navbar .dropdown-toggle,
.app-navbar .dropdown-toggle span { color: rgba(255,255,255,.9) !important; }

/* === Inline code coral override (add near end of file) ================== */
:root { --inline-code-fg: #ff7f50; /* coral */ }

@media (prefers-color-scheme: dark) {
    :root { --inline-code-fg: #ff7f50; /* keep coral in dark mode */ }
}

/* Only affect inline code (NOT code blocks) */
.post-content :not(pre) > code { color: var(--inline-code-fg) !important; background: var(--code-inline-bg); border: 1px solid rgba(0,0,0,.06); }

@media (prefers-color-scheme: dark) {
    .post-content :not(pre) > code { border: 1px solid #314158; }
}

/* === Code Readability Fix =============================================== */
/* High contrast defaults */
:root { --code-fg: #1f2933; /* light mode foreground (slightly darker than body text) */ --code-fg-dark: #e6edf3; /* dark mode high contrast */ }

/* Force dark mode code foreground override */
@media (prefers-color-scheme: dark) {
    .post-content pre,
    .post-content pre code { color: var(--code-fg-dark) !important; }
}

/* Ensure light mode still uses readable color */
@media (prefers-color-scheme: light) {
    .post-content pre,
    .post-content pre code { color: var(--code-fg) !important; }
}

/* Remove earlier accidental dark foreground (in case of caching) */
@media (prefers-color-scheme: dark) {
    :root { /* DO NOT reassign --code-fg to a dark color; keep only the dedicated dark token */ }
}

/* Optional: class to always enforce accessible scheme regardless of prefers-color-scheme */
.code-theme-accessible pre,
.code-theme-accessible pre code { color: var(--code-fg-dark) !important; background: #0f1b2a !important; border-color: #2b3d52 !important; }

/* Cleanup: keep only one inline code rule (override previous duplicates) */
.post-content :not(pre) > code { background: var(--code-inline-bg); color: var(--inline-code-fg) !important; padding: .15rem .35rem; border-radius: .35rem; font-size: .85em; border: 1px solid rgba(0,0,0,.06); }

@media (prefers-color-scheme: dark) {
    .post-content :not(pre) > code { border: 1px solid #314158; }
}

/* Optional subtle syntax baseline (without JS library):
   You can later replace with Prism.js/highlight.js. */
.post-content pre code .k, /* keyword */
.post-content pre code .keyword { color: #c792ea; }
.post-content pre code .s,
.post-content pre code .string { color: #a3e635; }
.post-content pre code .c,
.post-content pre code .comment { color: #6b7280; font-style: italic; }
.post-content pre code .n,
.post-content pre code .identifier { color: inherit; }
.post-content pre code .f,
.post-content pre code .function { color: #7dd3fc; }

@media (prefers-color-scheme: dark) {
    .post-content pre code .comment { color: #7a8696; }
}


/* === Admin Data Table (shared with Ads style) ========================= */
.admin-table-wrapper { border: 1px solid rgba(255,255,255,.14); border-radius: .85rem; background: rgba(15,23,42,.55); overflow: hidden; backdrop-filter: blur(4px); }

/* Table base */
.admin-table { width: 100%; margin: 0; border-collapse: collapse; font-size: .92rem; color: #d9e2ef; }

    .admin-table thead th { background: #162332; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; padding: .65rem .9rem; border-bottom: 1px solid rgba(255,255,255,.18); color: #b9c8d8; }

    .admin-table tbody td { padding: .65rem .9rem; border-bottom: 1px solid rgba(255,255,255,.07); }

    .admin-table tbody tr:last-child td { border-bottom: 0; }

/* Zebra (soft) + selection */
.cc-row { background: rgba(255,255,255,0); transition: background .18s ease, color .18s ease; }

    .cc-row:nth-child(even) { background: rgba(255,255,255,.02); }

    .cc-row:hover { background: rgba(59,130,246,.10); }

    .cc-row.selected { background: linear-gradient(90deg, rgba(59,130,246,.28), rgba(59,130,246,.08)); }

        .cc-row.selected td { color: #f5f9ff; }

/* Checkbox */
.cc-check { width: 1.05rem; height: 1.05rem; margin: 0; cursor: pointer; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.4); }

    .cc-check:checked { background-color: #2563eb; border-color: #2563eb; }

/* Name + pill */
.cc-name { font-weight: 500; letter-spacing: .2px; }

.cc-row.selected .cc-name { font-weight: 600; }

.badge.cc-pill { background: rgba(56,189,248,.15); color: #8bdcff; border: 1px solid rgba(56,189,248,.35); font-size: .55rem; padding: .28rem .5rem; letter-spacing: .06em; text-transform: uppercase; border-radius: .75rem; font-weight: 600; }

/* Post count badge */
.cc-count { background: rgba(255,255,255,.08) !important; border: 1px solid rgba(255,255,255,.18); font-size: .65rem; padding: .4rem .55rem; font-weight: 600; border-radius: 1rem; }

/* Order input */
.cc-order { width: 80px; text-align: center; font-variant-numeric: tabular-nums; font-size: .8rem; padding: .38rem .4rem; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18); border-radius: .5rem; color: #e2eefb; transition: background .2s, border-color .2s, box-shadow .2s; }

    .cc-order:focus { outline: none; background: rgba(59,130,246,.20); border-color: #3b82f6; box-shadow: 0 0 0 .15rem rgba(59,130,246,.35); }

    .cc-order:disabled { opacity: .45; background: rgba(255,255,255,.03); color: #8894a3; cursor: not-allowed; }

/* Adaptive small screens */
@media (max-width: 640px) {
    .admin-table thead th { font-size: .58rem; padding: .55rem .55rem; }
    .admin-table tbody td { padding: .55rem .55rem; font-size: .8rem; }
    .cc-order { width: 60px; }
}

/* Hide desktop nav on mobile, show offcanvas toggler */
@media (max-width: 991.98px) {
    .desktop-nav { display: none !important; }
    .mobile-nav-toggler { display: inline-flex !important; }
}

@media (min-width: 992px) {
    .desktop-nav { display: flex !important; }
    .mobile-nav-toggler { display: none !important; }
}

@media (min-width: 576px) {
    .navbar-expand-sm .offcanvas { visibility: hidden !important; background-color: transparent; border-right: 0; border-left: 0; transition: none; transform: none; }
        .navbar-expand-sm .offcanvas.show { visibility: visible !important; background-color: var(--color-surface-elevated, #fff); }
}

@media (min-width: 576px) {
    .navbar-expand-sm .offcanvas { position: fixed !important; /* Take it out of the flow */ flex-grow: 0 !important; /* Prevent it from growing */ width: 0 !important; /* Prevent it from taking width */ height: 0 !important; /* Prevent it from taking height */ padding: 0 !important; /* Remove padding */ border: 0 !important; /* Remove border */ background: transparent !important; }
        .navbar-expand-sm .offcanvas.show { width: 400px !important; /* Or your desired width when open */ height: auto !important; position: fixed !important; padding: 1rem !important; background: var(--color-surface-elevated, #fff) !important; z-index: 1050 !important; }
}

.mobile-menu-background { background: var(--color-surface-elevated); }
    /* Mobile menu background and hover effect */
    .mobile-menu-background .dropdown-item,
    .mobile-menu-background .nav-link { color: var(--color-text) !important; background: var(--color-surface-elevated) !important; transition: background .18s, color .18s; }

        .mobile-menu-background .dropdown-item:hover,
        .mobile-menu-background .dropdown-item:focus,
        .mobile-menu-background .nav-link:hover,
        .mobile-menu-background .nav-link:focus { background: var(--color-bg-alt) !important; color: var(--color-primary-accent) !important; }