/* #region ROOT VARIABLES */
:root {
  /* Font Settings */
  --ls-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-content: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-content-size: 18px; /* Size of content text */
  --ct-line-height: 1.2; /* Line height multiplier for content */
  --font-ui: "OS System default", sans-serif; /* Font for UI elements */
  --font-ui-size: 17px; /* Size of UI text */

  /* General Colors */
  --color-title-text: #000000; /* Page title text color */
  --color-content-text: #1A1A1A; /* Main content text color */
  --color-content-text-bold: #0C0D14; /* Bold text color */
  --color-content-text-italic: #282A36; /* Italic text color */
  --color-link: #3996A3; /* Internal link color */
  --color-link-ext: #B88726; /* External link color */
  --color-tag-text: #FDFDFD; /* Tag text color */
  --color-tag: #406E84; /* Tag background color */
  --color-tag-text-hover: #B88726; /* Tag text hover color */
  --ls-accent-color: #3996A3; /* Main accent color (Cyan) */
  --ct-accent-color: #406E84; /* Secondary accent color (Cyan) */

  /* UI Colors */
  --color-ui-rsidebar-bg: #FEFEFE; /* Right sidebar background */
  --color-ui-lsidebar-bg: #E7E7E7; /* Left sidebar background */
  --color-ui-lsidebar-bg-accent: #479FAD; /* Left sidebar accent color */
  --color-ui-lsidebar-bg-accent-hover: #d1d1d1; /* Left sidebar hover accent */
  --color-leftsidebar-navigation-text: #ffffff; /* rightsidebar-navigation-text */
  --color-rightsidebar-navigation-text: #000000; /* rightsidebar-navigation-text */
  --color-ui-lsidebar-text: #010101; /* Left sidebar text color */
  --color-ui-body-bg: #FFFFFF; /* Main body background color */

  /* icon colors */
  --icon-color-light: #ffffff; /* Light mode color */

  /* Content Backgrounds */
  --color-content-bg: #FFFFFF; /* Background for main content */
  --color-content-props-bg: #f1f1ec; /* Block properties background */
  --color-content-alt-bg: #dadad9; /* Alternative content background */
  --color-bullet-closed: #266f7a;
  --color-bullet-numbered: #68C3D0;

  /* Headings */
  --color-h1: #030303; /* H1 heading color */
  --color-h2: #030303; /* H2 heading color */
  --color-h3: #030303; /* H3 heading color */
  --color-h4: #030303; /* H4 heading color */
  --color-h5: #030303; /* H5 heading color */
  --color-h6: #030303; /* H6 heading color */
  --h1-size: 18px; /* H1 font size */
  --h2-size: 18px; /* H2 font size */
  --h3-size: 18px; /* H3 font size */
  --h4-size: 16px; /* H4 font size */
  --h5-size: 17px; /* H5 font size */

  /* Highlighting */
  --color-mark-bg: #3996A3; /* Highlight background color */
  --color-mark-text: #F4F4F4; /* Highlighted text color */
  --ls-highlight-color: var(--color-mark-bg) !important; /* Logseq highlight color */

  /* Quotes */
  --color-quote-bg: #EAEAE5 !important; /* Quote background color */
  --color-quote-text: #000000 !important; /* Quote text color */

  /* Flashcards */
  --color-flashcard-bg: #FEFEFE; /* Flashcard background color */
  --color-flashcard-text: #282A36; /* Flashcard text color */

  /* Inline Code */
  --color-inline-code-bg: #e5e7f1; /* Inline code background color */
  --color-inline-code-text: #000000; /* Inline code text color */
  --color-inline-singlecode-text: #000000; /* Inline code text color */

  /* Content Sizes */
    --ls-main-content-max-width: 1000px; /* Fixed max width for main content */
    --ls-right-sidebar-width: 40%; /* Proportional sidebar width */
    --content-max-width: 100%; /* Flexible width for .content */
}
/* #endregion */

/* #region DARK MODE ROOT VARIABLES */
.dark-theme {
  /* General Colors */
  --color-title-text: #FFFFFF; /* Title text color */
  --color-content-text: #F0F0F0; /* Main content text color */
  --color-content-text-bold: #FFFFFF; /* Bold text color */
  --color-content-text-italic: #D0D0D0; /* Italic text color */
  --color-link: #68D4E3; /* Internal link color */
  --color-link-ext: #E0B54C; /* External link color */
  --color-tag-text: #FDFDFD; /* Tag text color */
  --color-tag: #5A89A3; /* Tag background color */
  --color-tag-text-hover: #E0B54C; /* Tag hover text color */
  --ls-accent-color: #57C8D6; /* Accent color */
  --ct-accent-color: #57C8D6; /* Secondary accent color */

  /* UI Colors */
  --color-ui-rsidebar-bg: #1E1E1E; /* Right sidebar background */
  --color-ui-lsidebar-bg: #282828; /* Left sidebar background */
  --color-ui-lsidebar-bg-accent: #57C8D6; /* Left sidebar accent */
  --color-ui-lsidebar-bg-accent-hover: #264653; /* Left sidebar hover accent */
  --color-ui-lsidebar-text: #E0E0E0; /* Left sidebar text color */
  --color-ui-body-bg: #1A1A1A; /* Main body background */
  --color-rightsidebar-navigation-text: #ffffff; /* Adjust for dark mode contrast */
  --color-leftsidebar-navigation-text: #ffffff; /* rightsidebar-navigation-text */

  /* icon colors */
  --icon-color-dark: #ffffff;  /* Dark mode color */

  /* Content Backgrounds */
  --color-content-bg: #121212; /* Main content background */
  --color-content-props-bg: #2A2A2A; /* Block properties background */
  --color-content-alt-bg: #2A2A2A; /* Alternative content background */
  --color-bullet-closed: #57C8D6; /* Adjusted for dark mode */
  --color-bullet-numbered: #57C8D6;

  /* Headings */
  --color-h1: #FFFFFF; /* H1 color */
  --color-h2: #FFFFFF; /* H2 color */
  --color-h3: #FFFFFF; /* H3 color */
  --color-h4: #FFFFFF; /* H4 color */
  --color-h5: #FFFFFF; /* H5 color */
  --color-h6: #FFFFFF; /* H6 color */

  /* Highlighting */
  --color-mark-bg: #054e4f; /* Highlight background */
  --color-mark-text: #E0E0E0; /* Highlight text (changed for visibility) */

  /* Quotes */
  --color-quote-bg: #2A2A2A !important; /* Quote background */
  --color-quote-text: #E0E0E0 !important; /* Quote text */

  /* Flashcards */
  --color-flashcard-bg: #282828; /* Flashcard background */
  --color-flashcard-text: #E0E0E0; /* Flashcard text */

  /* Inline Code */
  --color-inline-code-bg: #434242; /* Inline code background */
  --color-inline-code-text: #E0E0E0; /* Inline code text */
  --color-inline-singlecode-text: #E0E0E0; /* Inline code text color */
}
/* #endregion */

/* #region BASE FONT STYLES */
body {
  font-family: var(--font-content); /* Sets the font for the entire body */
  font-size: var(--font-content-size); /* Sets the font size for content */
  background-color: var(--color-ui-body-bg); /* Sets the body background color */
  color: var(--color-content-text); /* Sets the default text color */
  line-height: var(--ct-line-height) !important; /* Applies custom line height */
}
/* #endregion */

/* #region GENERAL UI ELEMENT STYLES and COLORS */
.cp__left-sidebar {
  background-color: var(--color-ui-lsidebar-bg)
}

.cp__right-sidebar {
  background-color: var(--color-ui-rsidebar-bg)
}

.cp__header, .sidebar-header, .nav-link, .nav-link.help, .nav-link:hover {
  font-size: var(--font-ui-size);
  background-color: var(--color-ui-lsidebar-bg-accent-hover);
  color: var(--color-rightsidebar-navigation-text);
}

.button, .btn {
  font-size: var(--font-ui-size);
  background-color: var(--color-ui-lsidebar-bg-accent-hover);
  color: var(--color-rightsidebar-navigation-text);
}

.sidebar-item.content {
  font-size: 17px;
}




/* Sidebar Accent */
.sidebar-accent {
  background-color: var(--color-ui-lsidebar-bg-accent) !important; /* Sets accent background for sidebar */
}

/* Sidebar Text */
.sidebar-text {
  color: var(--color-ui-lsidebar-text); /* Sets text color for sidebar */
}

/* Content Background */
.content {
  background-color: var(--color-content-bg); /* Sets background for main content */
}

/* Content Alternative Background */
.alt-bg {
    background-color: var(--color-content-alt-bg); /* Sets alternative background */
}


/* #endregion */

/* #region PAGE TITLE */
.title {
  font-size: 22px !important; /* Sets font size for page titles */
  color: var(--color-title-text) !important; /* Sets title color using variable */
  font-weight: bold !important; /* Makes title bold */
  text-align: left !important; /* Aligns title to the left */
  margin-top: 5px !important; /* Adds top margin */
  margin-bottom: 5px !important; /* Adds bottom margin */
  padding: 0px 0 !important; /* Sets padding */
}
/* #endregion */

/* #region HEADINGS */
h1, .block-content h1, .ls-block h1 { /* Styles headings for both reading and editing modes. */
  font-size: var(--h1-size) !important; /* Sets h1 size */
  color: var(--color-h1) !important; /* Sets h1 color */
  font-weight: bold !important; /* Makes h1 bold */
  margin-top: 9px !important; /* Adds top margin */
  margin-bottom: 0px !important; /* Removes bottom margin */
}

h2, .block-content h2, .ls-block h2 {
  font-size: var(--h2-size) !important; /* Sets h2 size */
  color: var(--color-h2) !important; /* Sets h2 color */
  font-weight: bold !important; /* Makes h2 bold */
  margin-top: 9px !important; /* Adds top margin */
  margin-bottom: 0px !important; /* Removes bottom margin */
}

h3, .block-content h3, .ls-block h3 {
  font-size: var(--h3-size) !important; /* Sets h3 size */
  color: var(--color-h3) !important; /* Sets h3 color */
  font-weight: bold !important; /* Makes h3 bold */
  margin-top: 9px !important; /* Adds top margin */
  margin-bottom: 0px !important; /* Removes bottom margin */
}

h4, .block-content h4, .ls-block h4 {
  font-size: var(--h4-size) !important; /* Sets h4 size */
  color: var(--color-h4) !important; /* Sets h4 color */
  font-weight: bold !important; /* Makes h4 bold */
  margin-top: 8px !important; /* Adds top margin */
  margin-bottom: 0px !important; /* Removes bottom margin */
}

h5, .block-content h5, .ls-block h5 {
  font-size: var(--h5-size) !important; /* Sets h5 size */
  color: var(--color-h5) !important; /* Sets h5 color */
  font-weight: bold !important; /* Makes h5 bold */
  margin-top: 8px !important; /* Adds top margin */
  margin-bottom: 0px !important; /* Removes bottom margin */
}

h6, .block-content h6, .ls-block h6 {
  font-size: 15px !important; /* Sets h6 size */
  color: var(--color-h6) !important; /* Sets h6 color */
  font-weight: bold !important; /* Makes h6 bold */
  margin-top: 7px !important; /* Adds top margin */
  margin-bottom: 0px !important; /* Removes bottom margin */
}

.ls-block h1, .ls-block h2, .ls-block h3, .ls-block h4, .ls-block h5, .ls-block h6 {
  border-bottom: 1px solid #ccc; /* Adds a line */
}
/* #endregion */

/* #region SPACING */
/* Reduce line spacing within the same block in view mode */
.ls-block {
  margin-bottom: 1px !important;  /* Adjust as needed */
  padding-bottom: 1px !important;
}

/* Apply custom line height to block content and paragraphs */
/* Ensure block content looks the same in view and edit mode */
.block-content, .editor-inner, .block-properties {
  color: var(--color-content-text) !important;
  line-height: var(--ct-line-height, 1.4) !important;
  padding: 4px !important;
}

/* Ensure inline text appearance is consistent */
.editor-inner {
  box-shadow: none !important;
  border: none !important;
}

/* Ensure paragraphs inside editor and view mode look the same */
.block-content p, .editor-inner p {
  line-height: var(--ct-line-height, 1.4) !important;
  margin-bottom: 4px !important;
}
/* #endregion */

/* #region TAGS */
.tag {
  background-color: var(--color-tag) !important; /* Keeps the original background */
  color: var(--color-tag-text) !important; /* Sets tag text color */
  padding: 2px 2px !important;
  border-radius: 3px !important;
  font-weight: normal !important;
  line-height: 1 !important; /* Reduce line spacing */
  font-size: var(--font-content-size);
  display: inline-block !important;
  text-decoration: none !important;
  transition: color 0.2s ease-in-out; /* Smooth transition for color change */
  }
  
  /* Apply the hover effect */
  .tag:hover {
    color: var(--color-tag-text-hover) !important;
  }
/* #endregion */

/* #region todo, logbook, time tracking */
/* Style the checkbox as a light pink square */
.form-checkbox {
  appearance: none; /* Remove default checkbox styling */
  width: 17px; /* Size of the square */
  height: 17px; /* Size of the square */
  background-color: #F5C6CB; /* Light pink background */
  border-radius: 4px; /* Rounded corners */
  margin-right: 4px; /* Space between checkbox and TODO text */
}

/* Change the square color when the task is checked */
.form-checkbox:checked {
  background-color: #509e47; /* Darker pink when checked */
}

/* Style the TODO marker text */
.marker-switch.block-marker.TODO {
  color: #d13444; /* Light pink text */
  font-weight: bold; /* Bold text */
  text-transform: uppercase; /* Uppercase TODO */
  border: 1px solid #d13444; /* Light pink border */
  padding: 2px 3px; /* Space inside the border */
  border-radius: 3px; /* Rounded corners */
}

/* Increase the distance between different tasks */
div[data-refs-self*="todo"] + div[data-refs-self*="todo"],
div[data-refs-self*="done"] + div[data-refs-self*="done"] {
  margin-top: 0px !important; /* Removes top margin between consecutive tasks */
}

/* Only target LOGBOOK */
.logbook,
.block-properties .property-key[data-ref="logbook"] {
  font-size: 11px;  /* Smaller size for LOGBOOK */
}

/* Style for Time Tracking (Clocked Tasks) */
.time-spent {
  padding-left: 1px;
  text-wrap: nowrap;
  font-weight: bold;
}
/* #endregion */

/* #region PAGE & BLOCK EMBEDDING, page block property SETTINGS */
/* Hides properties in references */
.embed-block {
  margin-top: -10px; /* Moves the embedded block up by 10px to reduce spacing. */
  margin-left: -50px; /* Shifts the embedded block left by 50px to align with parent bullets. */
  margin-right: -10px; /* Adjusts right margin for better spacing. */
}


/* Ensures embedded blocks with specific background class have a transparent background. */
div.color-level.embed-block.bg-base-2 {
  background-color: transparent; /* Removes any background color, making it transparent. */
}

/* Adjusts the positioning of embedded pages to align them properly within the parent page. */
.embed-page {
  margin-top: -16px; /* Moves the embedded page up by 16px to reduce spacing. */
  margin-left: -39px; /* Shifts the embedded page left by 39px for alignment. */
  margin-bottom: -16px; /* Adjusts bottom margin for better spacing. */
}

/* Ensures embedded pages with specific background class have a transparent background. */
div.color-level.embed-page.bg-base-2 {
  background-color: transparent; /* Removes background color, making it transparent. */
}

/* Hides the bullet for the parent block that contains an embedded page with a specific background class. */
div.block-main-container:has(div.color-level.embed-page.bg-base-2) > div.block-control-wrap.flex.flex-row.items-center > a.bullet-link-wrap {
  display: none; /* Removes the bullet to avoid double bullets in embedded content. */
}

/* Hides the bullet for embedded blocks. */
.embed-block .bullet-link-wrap {
  display: none; /* Ensures no bullet is shown for embedded blocks. */
}


/* Hides the bullet for embedded blocks. */
.embed-page .bullet-link-wrap {
  display: none; /* Ensures no bullet is shown for embedded blocks. */
} */

/* Adjusts the left margin of the embedded page header for better alignment. */
.embed-page > .embed-header {
  margin-left: 8px; /* Adds 8px left margin to the header of embedded pages. */
}

/* Add this to hide the embedded page title */
.embed-page .page-title {
  display: none;
}

/* Hides the header of embedded blocks. */
.embed-block .embed-header {
  display: none; /* Removes the header from embedded blocks. */
}

/* Hides the header of embedded pages. */
.embed-page .embed-header {
  display: none; /* Ensures the embedded page header is not visible. */
}

/* Ensures the block control (e.g., bullet, toggle) is displayed inline and doesn’t shift. */
.block-control {
  display: inline-block !important; /* Forces inline-block display for consistent layout. */
  vertical-align: top !important; /* Aligns the control to the top. */
  margin: 0 !important; /* Removes any margins. */
  padding: 0 !important; /* Removes any padding. */
  transition: none !important; /* Disables transitions for stability. */
}

 /* 
 /* Add an "E" indicator with a hover tooltip
 .block-content-inner:has(.embed-block)::after,
 .block-content-inner:has(.embed-page)::after {
   padding-left: 10px; /* Space before the "E" */
   color: hsl(var(--ct-accent-color)); /* Logseq’s accent color */
   font-family: var(--ls-font-family-code); /* Code font */
   font-weight: bold; /* Bold "E" */
   content: "E"; /* Embed indicator */
   cursor: pointer; /* Indicate interactivity */
   position: relative; /* For popup positioning */
 }    
 */

 /* Hides all block properties across the app. */
.block-properties {
  display: none!important;  /* Removes block properties from view. */
}

/* Hides all page properties across the app with high priority. */
.page-properties {
  display: none !important; /* Ensures page properties are not visible. */
}


/* Hides page and block properties in the "Linked References" section. */
.references .page-properties,
.references .block-properties {
  display: none !important; /* Removes properties from references for cleaner display. */
}

/* Disables animations for page references to prevent visual glitches. */
.page-reference {
  transform: none !important; /* Prevents transformations (e.g., scaling). */
  transition: none !important; /* Disables transitions (e.g., hover effects). */
}

/* Ensures all embedded pages have a transparent background. */
div.color-level.embed-page {
  background-color: transparent !important; /* Overrides any background color. */
}

/* Ensures all embedded blocks have a transparent background. */
div.color-level.embed-block {
  background-color: transparent !important; /* Overrides any background color. */
}

/* Hides the prefix area (e.g., timestamps, IDs) before block content. */
.content .ls-block .pre-block {
  display: none; /* Removes metadata or prefix elements for cleaner blocks. */
}

/* Hides properties in specific page blocks. */
div.ls-page-block .properties {
  display: none !important; /* Ensures properties are hidden in certain layouts. */
}

/* Hides page properties in specific page blocks. */
div.ls-page-block .page-props {
  display: none !important; /* Ensures page properties are hidden in certain layouts. */
}

/* Hides block properties in the "Linked References" section. */
.references-blocks .block-content .block-properties {
  display: none !important; /* Ensures block properties are hidden in references. */
}

/* Hides page properties in "Linked References" items. */
div.references-blocks-item .page-properties {
  display: none !important; /* Ensures page properties are hidden in references. */
}

/* Styles internal links (page and block references). */
.page-ref, .block-ref {
  color: var(--color-link) !important; /* Sets link color. */
  text-decoration: none !important; /* Removes underline from links. */
}

/* #endregion */

/* #region TEXT HIGHLIGHTING */
::selection {
  background-color: var(--color-mark-bg) !important; /* Sets selection background */
  color: var(--color-mark-text) !important; /* Sets selection text color */
}

/* Applies the highlight color to marked text */
mark {
  background-color: var(--ls-highlight-color); /* Sets background color for highlighted text */
  color: var(--color-mark-text); /* Sets text color for highlighted text */
}

/* Highlight entire block when in editor mode */
.ls-block .editor-wrapper:focus-within {
  background-color: #eaeaea !important;
  border-radius: 5px !important;
  padding: 2px !important;
  margin: -2px !important;
  outline: 2px solid #ccc !important;
}

.dark-theme .ls-block .editor-wrapper:focus-within {
  background-color: #5a5858 !important;
  border-radius: 5px !important;
  padding: 2px !important;
  margin: -2px !important;
  outline: 2px solid #ccc !important;
}
/* #endregion */

/* #region MOBILE TABLET */
@media (max-width: 768px) {
:root {
  --font-content-size: 16px; /* Slightly smaller for mobile */
  --font-ui-size: 15px; /* Smaller UI text on mobile */
}

.embed-block {
  margin-left: -20px; /* Reduce negative margins on mobile */
  margin-right: -20px;
}

.tag {
  padding: 4px 6px !important; /* Larger touch target on mobile */
}
}

/* Add tablet-specific optimizations */
@media (min-width: 769px) and (max-width: 1200px) {
:root {
  --ls-main-content-max-width: 90%; /* Proportional content width */
  --ls-right-sidebar-width: 35%; /* Slightly narrower sidebar */
}
}
/* #endregion */

/* #region GRAPH */

.graph {
  transform: scale(0.9); /* Slightly enlarges the div */
}


/* #endregion */

/* #region styles for bold and italic text */
  strong, b {
    color: var(--color-content-text-bold); /* Sets color for bold text */
  }
  
em, i {
    color: var(--color-content-text-italic); /* Sets color for italic text */
  }
/* #endregion */

/* #region LINKS: internal, external, wikilinks  */
.external-link {
  color: var(--color-link-ext) !important; /* Sets color for external links */
  text-decoration: none !important; /* Removes underline from external links */
}

.external-link:hover {
  color: #A06F1A !important; /* Darkens external link color on hover */
  text-decoration: none !important; /* Optional: Add underline on hover */
}

.internal-link {
  color: var(--color-link);
  text-decoration: none;
}
/* #endregion */

/* #region code blocks  */
  /* `code`  */
  code {
  font-size: 16px !important;  /* Smaller font */
  padding: 1px 1px !important; /* Reduce padding */
  border-radius: 5px !important; /* Smaller rounded corners */
  line-height: 1 !important; /* Reduce line height */
  color: var(--color-inline-singlecode-text) !important; /* Sets text color for code blocks */
  background-color: var(--color-inline-code-bg) !important;
}

/* r, css, html box  */
.CodeMirror pre.CodeMirror-line, .custom-query-title + .custom-query-results pre,
pre.CodeMirror-line{
  font-size: 16px; /* Sets font size for code blocks */
  line-height: 1.5; /* Sets line height for code blocks */
  color: var(--color-inline-code-text); /* Sets text color for code blocks */
  border-radius: 4px;
}

/* #+BEGIN_EXAMPLE */
  /* #+BEGIN_EXAMPLE */
  .block-content pre {
    font-family: Arial, sans-serif; /* Sets font for code blocks */
    font-size: 18px; /* Sets font size for code blocks */
    line-height: 1.2; /* Sets line height for code blocks */
    color: var(--color-quote-text); /* Sets text color for code blocks */
    background-color: var(--color-quote-bg);
    border-radius: 4px;
  }
  /* #endregion */

/* #region toggle arrow */
/* shape of the toggling arrow */
.rotating-arrow svg {
  fill: #000000;
  height: 22px;
}

.dark-theme .rotating-arrow svg {
  fill: #ffffff;
  height: 22px;
}

.block-control .control-hide:has(.rotating-arrow.collapsed) {
  display: inline;
  }
/* #endregion */

/* #region hide specific reference blocks */
div.my-2.references-blocks-item:has(.page-ref[data-ref="contents"]),
div.my-2.references-blocks-item:has(.page-ref[data-ref="modules"]),
div.my-2.references-blocks-item:has(.page-ref[data-ref="lab resources"]),
div.my-2.references-blocks-item:has(.page-ref[data-ref="faculty resources"]),
div.my-2.references-blocks-item:has(.page-ref[data-ref="definition"]),
div.my-2.references-blocks-item:has(.page-ref[data-ref="flashcards"]),
div.my-2.references-blocks-item:has(.page-ref[data-ref="variables in gss moc"]),
div.my-2.references-blocks-item:has(.page-ref[data-ref="homepage"]) {
  display: none;
}
/* #endregion */