/*
  publish.css — Obsidian Publish site-wide stylesheet.

  Obsidian Publish auto-loads a file named exactly "publish.css" at the
  vault root and applies it to every published page.

  The published site's actual reading-column width is controlled by the
  --page-width custom property, set on .published-container and consumed
  by .markdown-preview-sizer's max-width (it also sizes the left/right
  sidebar columns). It is NOT the same as the local-app --line-width /
  --file-line-width variables, which the live Publish site ignores.

  USAGE: opt individual pages into a wider (or full-width) reading column
  by adding a cssclasses entry to that page's frontmatter, e.g.:

    ---
    cssclass:
      - wide-page
    ---

  or for edge-to-edge content (tables, dashboards, wide images):

    ---
    cssclass:
      - full-width-page
    ---

  Everything not tagged keeps Obsidian's normal readable line length.
*/

/* Wider reading column — good for pages with wide tables/code blocks
   that still benefit from some margin. Adjust the px value to taste. */
.published-container:has(.wide-page) {
  --page-width: 1400px;
}

/* Very wide reading column — pushes right up against the sidebars. */
.published-container:has(.full-width-page) {
  --page-width: 1800px;
}

---

.theme-dark {
    --background-primary: #202020;
    --background-primary-alt: #1a1a1a;
    --background-secondary: #161616;
    --background-secondary-alt: #080808;
    --background-accent: #000;
    --background-modifier-border: #333;
    --background-modifier-form-field: rgba(0, 0, 0, 0.3);
    --background-modifier-form-field-highlighted: rgba(0, 0, 0, 0.22);
    --background-modifier-box-shadow: rgba(0, 0, 0, 0.3);
    --background-modifier-success: #197300;
    --background-modifier-error: #3d0000;
    --background-modifier-error-rgb: 61, 0, 0;
    --background-modifier-error-hover: #470000;
    --background-modifier-cover: rgba(0, 0, 0, 0.6);
    --text-accent: #5B8C9C;
    --text-accent-hover: #5B8C9C;
    --text-normal: #dcddde;
    --text-muted: #888;
    --text-faint: #555;
    --text-error: #ff3333;
    --text-error-hover: #990000;
    --text-highlight-bg: #5cd6f296;
    --text-selection: rgba(0, 122, 255, 0.2);
    --text-on-accent: #dcddde;
    --interactive-normal: #2a2a2a;
    --interactive-hover: #303030;
    --interactive-accent: #5B8C9C;
    --interactive-accent-rgb: 72, 54, 153;
    --interactive-accent-hover: #5B8C9C;
    --scrollbar-active-thumb-bg: rgba(255, 255, 255, 0.2);
    --scrollbar-bg: rgba(255, 255, 255, 0.05);
    --scrollbar-thumb-bg: rgba(255, 255, 255, 0.1);
}


.theme-light {
    --background-primary: #ffffff;
    --background-primary-alt: #f5f6f8;
    --background-secondary: #f2f3f5;
    --background-secondary-alt: #e3e5e8;
    --background-accent: #5B8C9C;
    --background-modifier-border: #ddd;
    --background-modifier-form-field: #fff;
    --background-modifier-form-field-highlighted: #fff;
    --background-modifier-box-shadow: rgba(0, 0, 0, 0.1);
    --background-modifier-success: #A4E7C3;
    --background-modifier-error: #e68787;
    --background-modifier-error-rgb: 230, 135, 135;
    --background-modifier-error-hover: #FF9494;
    --background-modifier-cover: rgba(0, 0, 0, 0.8);
    --text-accent: #5B8C9C;
    --text-accent-hover: #5B8C9C;
    --text-normal: #2e3338;
    --text-muted: #888888;
    --text-faint: #999999;
    --text-error: #800000;
    --text-error-hover: #990000;
    --text-highlight-bg: #5cd6f296;
    --text-selection: rgba(0, 122, 255, 0.15);
    --text-on-accent: #f2f2f2;
    --interactive-normal: #f2f3f5;
    --interactive-hover: #e9e9e9;
    --interactive-accent: #5B8C9C;
    --interactive-accent-rgb: 123, 108, 217;
    --interactive-accent-hover: #5B8C9C;
    --scrollbar-active-thumb-bg: rgba(0, 0, 0, 0.2);
    --scrollbar-bg: rgba(0, 0, 0, 0.05);
    --scrollbar-thumb-bg: rgba(0, 0, 0, 0.1);
}

::selection {
    background-color: #5B8C9C;
    color: white;
}



/* Current main pane */
.workspace-leaf.mod-active .workspace-leaf-header-title {
    color: #5B8C9C;
    text-align: center;
}

/* Other pane */
.workspace-leaf-header-title-container {
    text-align:center;
}

/* Headers */
span.cm-formatting.cm-formatting-header.cm-formatting-header-1.cm-header.cm-header-1 {
    color: #5B8C9C;;
}

span.cm-formatting.cm-formatting-header.cm-formatting-header-2.cm-header.cm-header-2 {
    color: #5B8C9C;
}

span.cm-formatting.cm-formatting-header.cm-formatting-header-3.cm-header.cm-header-3 {
    color: #5B8C9C;
}

span.cm-formatting.cm-formatting-header.cm-formatting-header-4.cm-header.cm-header-4 {
    color: #5B8C9C;
}

span.cm-formatting.cm-formatting-header.cm-formatting-header-5.cm-header.cm-header-5 {
    color: #5B8C9C;
}

span.cm-formatting.cm-formatting-header.cm-formatting-header-6.cm-header.cm-header-6 {
    color: #5B8C9C;
}

/* Header folder icon */
.CodeMirror-foldgutter-open, .CodeMirror-foldgutter-folded {
    color: #5B8C9C;
}

.CodeMirror-foldgutter-open, .CodeMirror-foldgutter-folded {
    color: #5B8C9C;
}

/* Cursor */
.cm-fat-cursor .CodeMirror-cursor {
    background: #5B8C9C;
}

.cm-animate-fat-cursor {
    background-color: #5B8C9C;
}

/* Selection in popup ([[]] autocomplete)*/
.suggestion-item.is-selected {
    background-color: #5B8C9C;
    color: white;
}

.theme-light .suggestion-shortcut {
    color: var(--text-normal);
}

/* Inner and Outer links */
.cm-url {
    color: #5B8C9C!important;
    text-decoration: none;
}

.cm-url:hover {
    color: #5B8C9C!important;
    text-decoration: underline;
}

.markdown-highlighting .internal-link .cl-underlined-text {
    color: #5B8C9C!important;
    text-decoration: none;
}

.markdown-highlighting .internal-link .cl-underlined-text:hover {
    color: #5B8C9C!important;
    text-decoration: underline;
}

.markdown-highlighting .link .cl-underlined-text {
    color: #5B8C9C!important;
    text-decoration: none;
}

.markdown-highlighting .link .cl-underlined-text:hover {
    color: #5B8C9C!important;
    text-decoration: underline;
}

/* Blockquote */
.preview blockquote {
    background-color: var(--background-modifier-border);
    border: 1px solid var(--text-muted);
}

mark {
    background-color: darkgoldenrod;
}

.markdown-highlighting .tag {
    color: #5B8C9C!important;
}

/* Tables */
.markdown-preview-view th {
    background-color: white;
    color: white
}

.cm-s-obsidian pre.HyperMD-table-row span.cm-hmd-table-sep {
    color: unset;
}

.cm-s-obsidian pre.HyperMD-table-row-1 > span {
    color: unset;
}

:root {
  --table-column-alt-background: unset;
}

/* Remove alternating column backgrounds in tables */
.theme-dark tr td {
  background-color: #202020 !important;
  color: white !important;
  vertical-align: middle;
  border: 1px solid white !important;
}
.theme-light tr td {
  background-color: white !important;
  color: black !important;
  vertical-align: middle;
  border: 1px solid black !important;
}

.theme-dark thead th {
  background-color: #05325B !important;
  color: white !important;
  vertical-align: middle;
  border: 1px solid white !important;
}
.theme-light thead th {
  background-color: #5B8C9C !important;
  color: black !important;
  vertical-align: middle;
  border: 1px solid black !important;
}


/* Status bar */
.theme-dark .status-bar-item {
    color: white;
}

.theme-light .status-bar-item {
    color: black;
}

/**/
/* Preview section */
/**/
/* Centered preview */
.markdown-preview-view
{
    padding-left: 10% !important;
    padding-right: 10% !important;
}

.markdown-embed-title {
    color: white;
}

.markdown-preview-view .markdown-embed {
    background-color: var(--background-primary-alt);
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.markdown-preview-view .internal-link {
    color: #5B8C9C;
    text-decoration: none;
}

.markdown-preview-view .internal-link:hover {
    color: #5B8C9C;
    text-decoration: underline;
}

.markdown-preview-view a {
    color: #5B8C9C;
    text-decoration: none;
}

.markdown-preview-view a:hover {
    color: #5B8C9C;
    text-decoration: underline;
}

/**/
/* Side panel section */
/**/
/* Plugin Title and Description */
.plugin-name {
    color: var(--text-normal);
}

.plugin-description {
    color: var(--text-normal)
}

/* Files title and Buttons */
.nav-file-title-content, .nav-folder-title-content {
    color: var(--text-normal);
}

.nav-action-button {
    color: var(--text-normal);
}

/* File explorer navigation selection */
.nav-file.is-active > .nav-file-title, .nav-file.is-active > .nav-folder-title, .nav-file.is-active > .nav-folder-collapse-indicator, .nav-folder.is-active > .nav-file-title, .nav-folder.is-active > .nav-folder-title, .nav-folder.is-active > .nav-folder-collapse-indicator {
    background-color: #5B8C9C;
    color: white;
}

body:not(.is-grabbing) .nav-file-title:hover, body:not(.is-grabbing) .nav-folder-title:hover {
    background-color: #5B8C9C;
    color: white;
}

.nav-file-title-content, .nav-folder-title-content {
    color:unset;
}

.nav-folder.mod-root > .nav-file-title:hover, .nav-folder.mod-root > .nav-folder-title:hover {
    color: var(--text-normal);
}

body:not(.is-grabbing) .nav-file-title:hover .nav-folder-collapse-indicator, body:not(.is-grabbing) .nav-folder-title:hover .nav-folder-collapse-indicator {
    background-color: #5B8C9C;
    color: white;
}

.nav-file-title, .nav-folder-title, .nav-folder-collapse-indicator {
    color: var(--text-normal);
}

/* File explorer menu*/
.menu-item:hover {
    background-color: #5B8C9C;
    color: white;
}

/* Backlinks Color and Text */
.search-result-file-matched-text {
    background-color: #5B8C9C;
    color: white;
}

.search-result-file-title {
    color: #5B8C9C;
}

.search-result-file-matches {
    color: var(--text-normal);
}

.search-result-file-title:hover {
    background-color: #5B8C9C;
    color: white;
}

.search-result-file-match:hover {
    background-color: #5B8C9C;
    color: white;
}

/* Folder arrow */
.nav-folder.is-collapsed .nav-folder-collapse-indicator {
    color: #5B8C9C;
}

.nav-folder-collapse-indicator {
    color: #5B8C9C;
}

/* Tag Selection */
.tag-pane-tag:hover {
    background-color: #5B8C9C;
    color: white;
}

.theme-light .tag-pane-tag-count {
    color: var(--text-normal)
}

/* Title */
.side-dock-title {
    color: #5B8C9C;
}

/* Ribon */
.side-dock-ribbon {
    background-color: #5B8C9C!important;
    color: var(--text-muted)
}

.side-dock-ribbon-tab, .side-dock-ribbon-action {
    color: white;
}

.theme-dark .side-dock-ribbon-tab.is-active {
    color: white;
}

.theme-dark .side-dock-ribbon-tab.is-before-active {
    color: white;
}

.theme-light .side-dock-ribbon-tab.is-active {
    color: var(--text-normal);
}

.theme-light .side-dock-ribbon-tab.is-before-active {
    color: white;
}

.side-dock-ribbon-tab-inner {
    color: unset;
}

.side-dock-ribbon-before.is-before-active .side-dock-ribbon-tab-inner, .side-dock-ribbon-after.is-after-active .side-dock-ribbon-tab-inner, .side-dock-ribbon-tab.is-before-active .side-dock-ribbon-tab-inner, .side-dock-ribbon-tab.is-after-active .side-dock-ribbon-tab-inner {
    background-color: #5B8C9C;
}

.side-dock-ribbon-tab, .side-dock-ribbon-before, .side-dock-ribbon-after, .side-dock-ribbon-tab-inner {
    transition: none;
}

/**/
/* Settings panel Section */
/**/
.vertical-tab-nav-item.is-active {
    background-color: #5B8C9C;
    color:white;
}

.horizontal-tab-nav-item:hover, .vertical-tab-nav-item:hover {
    background-color: #5B8C9C;
    color: white;
}

.vertical-tab-nav-item.is-active {
    background-color: #5B8C9C;
}

.vertical-tab-nav-item.is-active {
    border-left-color: #5B8C9C;
}

.theme-light .published-container a.site-body-left-column-site-logo {
  filter: invert(1) hue-rotate(180deg) !important;
}

.site-header-logo {
	display: none;
}

/* Collapsible headers and outline enhancements */
.heading-collapse-indicator:hover {
    opacity: 0.7;
}

.heading-collapse-indicator:focus {
    outline: 2px solid var(--text-accent, #5B8C9C);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Custom collapse indicators (our UTF-8 triangles) */
.obsidian-custom-collapse {
    color: var(--text-muted, #666) !important;
    transition: color 0.2s ease !important;
    user-select: none !important;
    cursor: pointer !important;
    margin-right: 6px !important;
    font-size: 12px !important;
    display: inline-block !important;
    width: 16px !important;
    text-align: center !important;
    flex-shrink: 0 !important; /* Prevent shrinking */
    vertical-align: middle !important; /* Center with text line */
    line-height: 1 !important; /* Prevent extra height */
    height: 1em !important; /* Match text line height exactly */
}

.obsidian-custom-collapse:hover {
    color: var(--text-accent, #5B8C9C) !important;
}

.obsidian-custom-collapse:focus {
    outline: 2px solid var(--text-accent, #5B8C9C) !important;
    outline-offset: 2px !important;
    border-radius: 2px !important;
}

/* Dark theme specific colors */
.theme-dark .obsidian-custom-collapse {
    color: #888 !important;
}

.theme-dark .obsidian-custom-collapse:hover {
    color: #5B8C9C !important;
}

/* Light theme specific colors */
.theme-light .obsidian-custom-collapse {
    color: #666 !important;
}

.theme-light .obsidian-custom-collapse:hover {
    color: #5B8C9C !important;
}

/* Hide content when header is collapsed - this will be handled by JavaScript instead */

/* Ensure collapsible wrappers add zero visual impact */
.obsidian-collapsible-content {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

/* Outline tree items that are made collapsible */
.outline-view .tree-item-icon.collapse-icon {
    color: var(--text-muted, #888);
    transition: transform 0.2s ease;
}

.outline-view .tree-item-icon.collapse-icon:hover {
    color: var(--text-accent, #5B8C9C);
}

.outline-view .tree-item-icon.collapse-icon.is-collapsed svg {
    transform: rotate(-90deg);
}

/* Smooth transitions for collapsible content */
.obsidian-collapsible-content {
    transition: all 0.25s ease;
}

/* Ensure outline tree items have proper spacing when collapse icons are added */
.outline-view .tree-item-self.mod-collapsible {
    display: flex;
    align-items: center;
    cursor: pointer;
    overflow: visible;
    white-space: nowrap;
}

.outline-view .tree-item-self.mod-collapsible:hover {
    background-color: var(--background-modifier-hover, rgba(91, 140, 156, 0.1));
    border-radius: 4px;
}

/* Fix outline view layout to accommodate triangles */
.outline-view-outer .outline-view {
    padding-left: 10px !important;
}

/* Ensure outline triangles don't cause horizontal overflow */
.outline-view .obsidian-custom-collapse {
    margin-left: -10px !important; /* Pull triangle back further to prevent cutoff */
    margin-right: 4px !important; /* Slightly more spacing to compensate */
    flex-shrink: 0 !important;
    width: 10px !important; /* Even smaller width */
}