/* ===== PETEX47 — FULL DARK MATCH (SIDEBAR = MAIN) ===== */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* =========================
   DEFAULT = FULL DARK
========================= */
:root {
  --bg: #0d0d0f;
  --bg-sidebar: #0d0d0f;
  --bg-main: #0d0d0f;
  --bg-panel: #0d0d0f;
  --bg-hover: rgba(255,255,255,0.06);

  --text: #e9e6df;
  --text-muted: #a6a19a;
  --heading: #f5f1e8;

  --border: rgba(255,255,255,0.08);

  --link: #ECA204;
  --link-hover: #F7C428;

  --search-bg: rgba(255,255,255,0.04);
  --code-bg: rgba(255,255,255,0.06);

  --content-width: 760px;
  --radius: 10px;

  --font-main: 'JetBrains Mono', monospace;
}

/* =========================
   LIGHT MODE (OPTIONAL)
========================= */
html.theme-light,
body.theme-light,
.theme-light {
  --bg: #F2EEE3;
  --bg-sidebar: #e8e1d3;
  --bg-main: #F2EEE3;
  --bg-panel: #e8e1d3;
  --bg-hover: rgba(0,0,0,0.05);

  --text: #111111;
  --text-muted: #5f584d;
  --heading: #111111;

  --border: rgba(17,17,17,0.08);

  --link: #ECA204;
  --link-hover: #c88900;

  --search-bg: rgba(255,255,255,0.65);
  --code-bg: rgba(0,0,0,0.05);
}

/* =========================
   GLOBAL BACKGROUND FIX
========================= */
html,
body {
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: var(--font-main) !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
}

/* FORCE EVERYTHING SAME BG */
.webpage-container,
.site-body,
.published-container,
.workspace-leaf-content,
.view-content,
.site-body-center-column,
.markdown-preview-view,
.markdown-rendered {
  background: var(--bg-sidebar) !important;
  color: var(--text) !important;
}

/* REMOVE "CARD" LOOK */
.site-body-center-column .markdown-preview-view,
.site-body-center-column .markdown-rendered {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* =========================
   LEFT SIDEBAR
========================= */
.site-body-left-column,
.nav-view-outer,
.tree-item-children {
  background: var(--bg-sidebar) !important;
  border-right: 1px solid var(--border) !important;
}

.tree-item-self,
.nav-file-title,
.nav-folder-title,
.site-body-left-column a {
  color: var(--text) !important;
  font-family: var(--font-main) !important;
  font-size: 13px !important;
  border-radius: 6px !important;
  text-decoration: none !important;
}

.tree-item-self:hover,
.nav-file-title:hover,
.nav-folder-title:hover,
.site-body-left-column a:hover {
  background: var(--bg-hover) !important;
  color: var(--heading) !important;
}

/* ACTIVE ITEM */
.tree-item-self.is-active,
.is-active .tree-item-self,
.nav-file-title.is-active {
  background: rgba(255,255,255,0.08) !important;
  color: var(--heading) !important;
  font-weight: 700 !important;
}

/* =========================
   SITE TITLE
========================= */
.site-body-left-column .title,
.site-body-left-column .site-title,
.site-body-left-column strong {
  color: var(--link) !important;
}

/* =========================
   SEARCH
========================= */
input,
input[type="text"],
.search-input {
  background: var(--search-bg) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  font-family: var(--font-main) !important;
}

input::placeholder {
  color: var(--text-muted) !important;
}

/* =========================
   MAIN CONTENT
========================= */
.markdown-preview-view,
.markdown-rendered {
  max-width: var(--content-width) !important;
  margin: 0 auto !important;
  padding: 40px 48px !important;
}

/* =========================
   TYPOGRAPHY
========================= */
h1, h2, h3, h4, h5, h6 {
  color: var(--heading) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

h1 {
  font-size: 32px !important;
}

p,
li,
span,
div {
  color: var(--text) !important;
  font-family: var(--font-main) !important;
}

p,
li {
  font-size: 14px !important;
  line-height: 1.8 !important;
}

/* MUTED TEXT */
small,
.metadata,
.graph-view-header,
.site-header {
  color: var(--text-muted) !important;
  font-size: 12px !important;
}

/* =========================
   LINKS
========================= */
a,
.internal-link,
.external-link {
  color: var(--link) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}

a:hover {
  color: var(--link-hover) !important;
  text-decoration: underline !important;
}

/* =========================
   RIGHT SIDEBAR
========================= */
.site-body-right-column,
.graph-view-wrapper {
  background: var(--bg-panel) !important;
  border-left: 1px solid var(--border) !important;
}

.site-body-right-column * {
  color: var(--text-muted) !important;
}

/* =========================
   HEADER
========================= */
.site-header,
.navbar,
header {
  background: var(--bg-sidebar) !important;
  border-bottom: 1px solid var(--border) !important;
}

/* =========================
   CODE / BLOCKS
========================= */
code,
pre {
  background: var(--code-bg) !important;
  border-radius: 6px !important;
}

blockquote {
  border-left: 3px solid var(--link) !important;
  padding-left: 14px !important;
  color: var(--text-muted) !important;
}

/* =========================
   TABLES
========================= */
table {
  border-collapse: collapse !important;
}

th,
td {
  border: 1px solid var(--border) !important;
}

/* =========================
   IMAGES
========================= */
img {
  border-radius: 0 !important;
  max-width: 100% !important;
}

/* =========================
   MOBILE
========================= */
@media (max-width: 900px) {
  .markdown-preview-view {
    padding: 24px 20px !important;
  }
}