/* Modern Wiki CSS - Premium Theme System */
/* Self-hosted webfonts. Previously pulled from fonts.googleapis.com at runtime,
   which made every page view report the visitor's IP to a third party and broke
   the typography whenever the browser had no internet access. These are the
   unmodified variable-font files from Google Fonts, covering weight 300-700 in
   one file per subset — the non-standard weights 550 and 650 used below only
   render exactly because the fonts are variable. The unicode-range rules are
   kept as served, so a browser still downloads only the subset it needs. */

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/static/vendor/fonts/outfit-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/static/vendor/fonts/outfit-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/static/vendor/fonts/plus-jakarta-sans-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/static/vendor/fonts/plus-jakarta-sans-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/static/vendor/fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/static/vendor/fonts/plus-jakarta-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Light Mode default variables */
  --bg-primary: #f8fafc;
  --bg-secondary: #ffffff;
  --bg-tertiary: #f1f5f9;
  --card-bg: rgba(255, 255, 255, 0.85);
  --card-border: rgba(0, 0, 0, 0.08);
  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-muted: #64748b;
  
  --accent-color: #006C66;
  --accent-gradient: linear-gradient(135deg, #006C66 0%, #00938b 100%);
  --accent-glow: rgba(0, 108, 102, 0.12);
  
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --info: #3b82f6;
  
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.04), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
  --shadow-glow: 0 10px 30px rgba(0, 108, 102, 0.08);
  
  --font-title: 'Outfit', 'Plus Jakarta Sans', -apple-system, sans-serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, sans-serif;
}

html {
  font-size: 14.5px; /* Base font size reduced to scale down all rem/em font sizes systematically */
  background-color: #006C66; /* Guide Safari's automatic tab bar color sampler */
  scrollbar-color: rgba(100, 116, 139, 0.2) transparent;
  scrollbar-width: thin;
}

/* Reset & Basics */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

body {
  font-family: var(--font-body);
  background-color: #006C66; /* Set body background to match header for Safari tab bar coloring */
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  line-height: 1.6;
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.2);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 116, 139, 0.4);
}

a {
  color: var(--accent-color);
  text-decoration: none;
  transition: opacity 0.2s, color 0.2s;
}
a:hover {
  opacity: 0.9;
}

/* App Layout */
.app-container {
  display: flex;
  width: 100%;
  position: relative;
}

/* Sidebar Styling */
.sidebar {
  width: 300px;
  background-color: var(--bg-secondary);
  border-right: 1px solid var(--card-border);
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: sticky;
  top: 0;
  z-index: 10;
  flex-shrink: 0;
  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s ease;
}

.sidebar.collapsed {
  width: 0 !important;
  min-width: 0 !important;
  border-right: none !important;
  overflow: hidden !important;
}

.sidebar-header {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--card-border);
}

.logo-container {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-container-image {
  display: flex;
  align-items: center;
  max-width: 180px;
}

.sidebar-logo-img {
  width: 100%;
  max-height: 54px;
  object-fit: contain;
  object-position: left center;
}

.sidebar-search {
  padding: 16px 24px 8px 24px;
}

.search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.search-input {
  width: 100%;
  /* Same height as .btn, so the search field and the toggle-all button next to
     it line up with the buttons in the sidebar footer. */
  height: 35px;
  padding: 8px 14px 8px 38px;
  border-radius: 8px;
  background-color: var(--bg-tertiary);
  border: 1px solid var(--card-border);
  color: var(--text-primary);
  font-size: 0.9rem;
  outline: none;
}

.search-input:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

.search-icon {
  position: absolute;
  left: 12px;
  color: var(--text-muted);
  width: 16px;
  height: 16px;
  pointer-events: none;
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 16px 24px;
}

.sidebar-divider {
  height: 0;
  border-top: 1px solid var(--card-border) !important;
  margin: 12px 16px !important;
  display: block !important;
  opacity: 1 !important;
}

.category-chevron-icon {
  width: 12px;
  height: 12px;
  transition: transform 0.2s ease;
  flex-shrink: 0;
  color: var(--text-muted);
}

.pages-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.page-link-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: 0.95rem;
  font-weight: 500;
  transition: all 0.2s ease;
}

.page-link-item:hover, .page-link-item.active {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
}

.page-link-item.active {
  border-left: 3px solid var(--accent-color);
  padding-left: 9px;
}

.page-link-content {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.badge {
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.badge-internal {
  background-color: rgba(245, 158, 11, 0.15);
  color: var(--warning);
  border: 1px solid rgba(245, 158, 11, 0.25);
}

.badge-external {
  background-color: rgba(16, 185, 129, 0.15);
  color: var(--success);
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.sidebar-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--card-border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Main Content Area */
.main-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--bg-primary); /* Keep content area background light grey */
}

.main-wrapper.wrapper-edit-mode {
  background-color: #faf0d8 !important; /* Slightly stronger warm golden-cream background for editing */
  position: relative;
  z-index: 11; /* Elevate the edit pane above the sidebar so tooltips don't hide under it */
}

.main-wrapper.wrapper-settings-mode {
  background-color: #fde2e2 !important; /* Slightly stronger soft rose background for settings */
}

/* Top Bar - Custom Green Header (30px Height) */
.top-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 20px;
  height: 30px;
  background-color: var(--accent-color);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
  box-sizing: border-box;
  position: sticky;
  top: 0;
  z-index: 9;
  width: 100%;
}

.top-header .header-meta span, 
.top-header .header-meta a {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 0.8rem !important; /* Smaller text for narrow header */
  line-height: 1;
}

.top-header .header-meta code {
  background-color: rgba(255, 255, 255, 0.15) !important;
  color: white !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  font-size: 0.75rem !important;
  padding: 1px 4px !important;
}

.top-header .lang-toggle {
  background-color: rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 1px;
}

.top-header .lang-btn {
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.7);
}

.top-header .lang-btn:hover {
  color: white;
}

.top-header .lang-btn.active {
  background: white;
  color: #006C66;
}

/* Department Links Navigation */
.top-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: auto;
  margin-left: -8px;
}

.top-nav-link {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: all 0.2s ease;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 6px;
}

.top-nav-link:hover {
  color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.1);
}

.top-nav-divider {
  width: 1px;
  height: 14px;
  background-color: rgba(255, 255, 255, 0.3);
  margin: 0 4px;
}

.top-header .mobile-menu-toggle {
  background-color: transparent;
  border: none;
  color: white;
  width: 24px;
  height: 24px;
  margin-right: 12px;
  padding: 0;
  display: none; /* Hidden when sidebar is expanded; shown via collapsed/open rules below */
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* Desktop: show hamburger only when sidebar is collapsed */
@media (min-width: 769px) {
  .sidebar.collapsed ~ .main-wrapper .top-header .mobile-menu-toggle {
    display: flex;
  }
}

.top-header .mobile-menu-toggle svg {
  width: 18px;
  height: 18px;
}

.header-meta {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-meta:empty {
  display: none;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* Pinned, because a <button> does not inherit the body's line-height the way
     an <a> does (the UA stylesheet's font shorthand resets it to normal), which
     would otherwise leave submit buttons a few pixels shorter than link
     buttons sitting right next to them. Everything here is centered flex
     content, so the vertical padding below no longer drives the height. */
  height: 35px;
  padding: 8px 14px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: var(--font-body);
}

.btn-primary {
  background: var(--accent-gradient);
  color: white;
  box-shadow: var(--shadow-glow);
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 25px var(--accent-glow);
  opacity: 0.95;
}

.btn-secondary {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--card-border);
}

.btn-secondary:hover {
  background-color: var(--card-border);
}

.btn-danger {
  background-color: rgba(239, 68, 68, 0.15);
  color: var(--danger);
  border: 1px solid rgba(239, 68, 68, 0.25);
}

.btn-danger:hover {
  background-color: var(--danger);
  color: white;
}

.btn-icon {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
}

/* Compact variant, used in the version history and the user list. The class was
   already on those buttons but had no rule behind it, so they were sized like
   regular buttons. */
.btn-sm {
  height: 28px;
  padding: 4px 8px;
  font-size: 0.8rem;
}

/* Language Toggle Styling */
.lang-toggle {
  display: flex;
  background-color: var(--bg-tertiary);
  border: 1px solid var(--card-border);
  border-radius: 20px;
  padding: 3px;
}

.lang-btn {
  padding: 6px 14px;
  border-radius: 17px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-weight: 700;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s;
  text-transform: uppercase;
}

.lang-btn.active {
  background: var(--accent-gradient);
  color: white;
  box-shadow: var(--shadow-sm);
}

/* Content Body */
.content-body {
  padding: 16px;
  width: 100%;
  flex: 1;
}

/* Card Styling */
.card {
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  padding: 20px;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(10px);
}

.wiki-content {
  font-family: var(--font-body);
  color: var(--text-secondary);
  font-size: 1.05rem;
  line-height: 1.8;
}

.wiki-content h1, .wiki-content h2, .wiki-content h3, .wiki-content h4 {
  color: var(--text-primary);
  font-family: var(--font-title);
  margin-top: 1.8em;
  margin-bottom: 0.6em;
  font-weight: 700;
  letter-spacing: -0.5px;
}

.wiki-content h1 {
  font-size: 2.2rem;
  margin-top: 0;
  border-bottom: 1px solid var(--card-border);
  padding-bottom: 12px;
}

.wiki-content h2 {
  font-size: 1.6rem;
  border-bottom: 1px solid var(--card-border);
  padding-bottom: 8px;
}

.wiki-content h3 {
  font-size: 1.25rem;
}

.wiki-content p {
  margin-bottom: 0;
}

/* Links inside page content are underlined, matching how they already look in
   the editor (.ql-editor a) — the global `a` rule above deliberately stays
   underline-free, since sidebar navigation, buttons and header links are
   anchors too. */
.wiki-content a {
  text-decoration: underline;
}

.wiki-content p:empty,
.wiki-content p:has(br:only-child) {
  margin-bottom: 0 !important;
}

.wiki-content ul, .wiki-content ol {
  margin-bottom: 1.2em;
  padding-left: 24px;
}

.wiki-content li {
  margin-bottom: 0.4em;
}

.wiki-content li::marker,
.ql-editor li::marker,
.ql-editor li > .ql-ui {
  color: #000 !important;
}

.wiki-content code {
  font-family: 'Courier New', Courier, monospace;
  background-color: var(--bg-tertiary);
  padding: 3px 6px;
  border-radius: 4px;
  font-size: 0.9em;
  color: var(--text-primary);
}

/* Inline code styling in Quill editor */
.ql-editor code {
  font-family: 'Courier New', Courier, monospace;
  background-color: var(--bg-tertiary);
  padding: 2px 5px;
  border-radius: 4px;
  font-size: 0.9em;
  color: var(--text-primary);
}

.wiki-content pre {
  background-color: var(--bg-secondary);
  border: 1px solid var(--card-border);
  padding: 8px 12px;
  border-radius: 10px;
  overflow-x: auto;
  margin-bottom: 1.5em;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.9em;
  line-height: 1.5;
  color: var(--text-primary);
}

.wiki-content pre code {
  color: inherit;
  background: transparent;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
}

/* Quill v2 Code Block Container styling */
.wiki-content .ql-code-block-container {
  background-color: var(--bg-tertiary);
  border: 1px solid var(--card-border);
  padding: 8px 12px;
  border-radius: 10px;
  overflow-x: auto;
  margin-bottom: 1.5em;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.9em;
  line-height: 1.5;
  color: var(--text-primary);
}

.wiki-content .ql-code-block {
  font-family: 'Courier New', Courier, monospace;
  margin: 0;
  padding: 0;
}

/* Editor: override Quill's default black code block background */
.ql-editor .ql-code-block-container {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 8px 12px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.9em;
  line-height: 1.5;
}

.ql-editor .ql-code-block {
  background-color: transparent !important;
  color: var(--text-primary) !important;
  font-family: 'Courier New', Courier, monospace;
  margin: 0;
  padding: 0;
}

.wiki-content blockquote {
  border-left: 4px solid var(--accent-color);
  padding: 4px 8px;
  margin: 0 0 0.8em 0;
  background-color: var(--bg-secondary);
  color: var(--text-secondary);
  font-style: italic;
  border-radius: 0 6px 6px 0;
}

.wiki-content blockquote p {
  margin: 0 !important;
  padding: 0 !important;
}

/* Quill List Rendering using CSS counters */
.wiki-content ol,
.ql-editor ol {
  list-style-type: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

.wiki-content ol > li,
.ql-editor ol > li {
  list-style-type: none !important;
  position: relative;
  padding-left: 2em !important;
  margin-left: 0 !important;
}

/* Base counter increment for ordered lists only */
.wiki-content ol > li {
  counter-reset: list-1 list-2 list-3 list-4 list-5;
}
.wiki-content ol > li[data-list="ordered"] {
  counter-increment: list-0;
}
.wiki-content ol > li[data-list="ordered"]::before {
  content: counter(list-0) ". " !important;
  position: absolute;
  left: 0;
  width: 1.5em;
  text-align: right;
  color: var(--text-primary);
}

/* Indent level 1: ql-indent-1 */
.wiki-content ol > li.ql-indent-1 {
  padding-left: 5em !important; /* 3.5em indent + 1.5em padding */
  counter-reset: list-2 list-3 list-4 list-5;
}
.wiki-content ol > li.ql-indent-1[data-list="ordered"] {
  counter-increment: list-1;
}
.wiki-content ol > li.ql-indent-1[data-list="ordered"]::before {
  content: counter(list-1, lower-alpha) ". " !important;
  position: absolute;
  left: 3.5em;
  width: 1.2em;
  text-align: right;
}

/* Bullets override within the same ol tag */
.wiki-content ol > li[data-list="bullet"]::before {
  content: "•" !important;
  position: absolute;
  left: 0.8em;
  width: 1em;
  text-align: center;
  font-weight: bold;
  color: var(--text-primary);
}
.wiki-content ol > li.ql-indent-1[data-list="bullet"]::before {
  content: "•" !important;
  position: absolute;
  left: 4.1em;
  width: 1em;
  text-align: center;
  font-weight: bold;
  color: var(--text-primary);
}

/* Quill indentation levels for fallback non-list elements */
.wiki-content .ql-indent-1:not(li) { padding-left: 3em !important; }
.wiki-content .ql-indent-2:not(li) { padding-left: 6em !important; }
.wiki-content .ql-indent-3:not(li) { padding-left: 9em !important; }
.wiki-content .ql-indent-4:not(li) { padding-left: 12em !important; }
.wiki-content .ql-indent-5:not(li) { padding-left: 15em !important; }
.wiki-content .ql-indent-6:not(li) { padding-left: 18em !important; }
.wiki-content .ql-indent-7:not(li) { padding-left: 21em !important; }
.wiki-content .ql-indent-8:not(li) { padding-left: 24em !important; }

/* Quill alignment classes */
.wiki-content .ql-align-center { text-align: center !important; }
.wiki-content .ql-align-right { text-align: right !important; }
.wiki-content .ql-align-justify { text-align: justify !important; }

.wiki-content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5em;
  border-radius: 8px;
  overflow: hidden;
}

.wiki-content th, .wiki-content td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--card-border);
  text-align: left;
}

.wiki-content th {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  font-weight: 600;
}

.wiki-content tr:last-child td {
  border-bottom: none;
}

.wiki-content img {
  max-width: 100%;
  border-radius: 12px;
  margin: 1.5em 0;
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow-md);
}

/* Email screenshots style: no borders, no shadows, flat, left-aligned */
.wiki-content img[src*="/images/email/"] {
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  display: block !important;
  margin: 1.5em auto 1.5em 0 !important;
}

/* Specific sizing rules for macOS screenshots */
.wiki-content img[src*="/images/email/configuration/mac/"] {
  max-width: 600px !important;
  height: auto !important;
}

/* Keep the Apple menu and Mail preferences dropdown screenshots smaller */
.wiki-content img[src*="/images/email/configuration/mac/0m.png"],
.wiki-content img[src*="/images/email/configuration/mac/6a.png"] {
  max-width: 320px !important;
}

.wiki-content hr {
  border: 0;
  height: 1px;
  background: var(--card-border);
  margin: 2em 0;
}

/* Alert blocks inside markdown */
.alert {
  padding: 16px 20px;
  border-radius: 10px;
  margin-bottom: 1.5em;
  border-left: 4px solid;
  background-color: var(--bg-tertiary);
}

.alert-title {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
}

.alert-body {
  font-size: 0.95rem;
}

.alert-note, .alert-important {
  border-left-color: var(--info);
  background-color: rgba(59, 130, 246, 0.08);
}
.alert-note .alert-title, .alert-important .alert-title {
  color: var(--info);
}

.alert-warning {
  border-left-color: var(--warning);
  background-color: rgba(245, 158, 11, 0.08);
}
.alert-warning .alert-title {
  color: var(--warning);
}

.alert-caution {
  border-left-color: var(--danger);
  background-color: rgba(239, 110, 110, 0.08);
}
.alert-caution .alert-title {
  color: var(--danger);
}

.alert-tip {
  border-left-color: var(--success);
  background-color: rgba(16, 185, 129, 0.08);
}
.alert-tip .alert-title {
  color: var(--success);
}

/* Editor Specific CSS */
.editor-layout {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.editor-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 768px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-label {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-primary);
}

.form-input, .form-textarea, .form-select {
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  background-color: var(--bg-tertiary);
  border: 1px solid var(--card-border);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.95rem;
  outline: none;
}

input[type="password"] {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

.form-input:focus, .form-textarea:focus, .form-select:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

.form-select {
  width: fit-content;
  min-width: 280px;
  max-width: 100%;
}

.editor-tabs {
  display: flex;
  border-bottom: 1px solid var(--card-border);
  gap: 8px;
  margin-top: 10px;
}

.tab-btn {
  padding: 10px 20px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}

.tab-btn.active {
  color: var(--accent-color);
  border-bottom-color: var(--accent-color);
}

/* Image Upload Widget inside editor */
.upload-widget {
  background-color: var(--bg-secondary);
  border: 1px dashed var(--card-border);
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.upload-widget:hover {
  border-color: var(--accent-color);
}

.upload-widget input[type="file"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.upload-widget-text {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.upload-widget-subtext {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* Footer info */
.footer-text {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-align: center;
  margin-top: 40px;
}

/* Alert Notification classes (for flash messages) */
.flash-message {
  padding: 12px 18px;
  border-radius: 8px;
  margin-bottom: 20px;
  font-size: 0.95rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flash-success {
  background-color: rgba(16, 185, 129, 0.15);
  color: var(--success);
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.flash-danger {
  background-color: rgba(239, 68, 68, 0.15);
  color: var(--danger);
  border: 1px solid rgba(239, 68, 68, 0.25);
}

.flash-warning {
  background-color: #fffbeb;
  color: #854d0e;
  border: 1px solid #f5d98b;
}

/* Login box specific styling */
.login-card {
  max-width: 450px;
  width: 100%;
  margin: 100px auto;
  padding: 30px;
}

.settings-card {
  padding: 30px;
}

.meta-info-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 32px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--card-border);
  font-size: 0.85rem;
  color: var(--text-muted);
}

.meta-info-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.meta-info-label {
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.meta-info-val {
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}

@media (max-width: 768px) {
  .meta-info-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* Page Header Classes */
.page-header-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--card-border);
  padding-bottom: 20px;
  gap: 20px;
}

.page-header-title-wrapper {
  flex: 1;
  min-width: 0;
}

.page-header-title {
  font-family: var(--font-title);
  font-size: 2.5rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.2;
}

.page-header-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-shrink: 0;
}

/* The status badge is a <span> with its own font size, so it needs the same
   height as the .btn elements it sits next to. */
.page-header-actions .badge {
  height: 35px;
}

.settings-section {
  border-top: 1px solid var(--card-border);
  padding-top: 12px;
  margin-top: 12px;
  margin-bottom: 12px;
}

.settings-section-title {
  font-family: var(--font-title);
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--text-primary);
}

.settings-section-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 12px;
}

/* Mobile Interactivity elements */
.mobile-menu-toggle {
  display: none; /* Hidden on desktop when sidebar is expanded */
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background-color: var(--bg-tertiary);
  border: 1px solid var(--card-border);
  color: var(--text-secondary);
  cursor: pointer;
  margin-right: 12px;
  transition: all 0.2s ease;
}

.mobile-menu-toggle:hover {
  background-color: var(--card-border);
  color: var(--text-primary);
}

.sidebar-close-btn {
  display: flex; /* Always visible on desktop when sidebar is open */
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background-color: var(--bg-tertiary);
  border: 1px solid var(--card-border);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.sidebar-close-btn:hover {
  background-color: var(--card-border);
  color: var(--text-primary);
}

.sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(15, 23, 42, 0.4);
  backdrop-filter: blur(4px);
  z-index: 998;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.sidebar-overlay.visible {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

/* Responsive styles for mobile */
@media (max-width: 768px) {
  html, body {
    background-color: var(--bg-primary) !important; /* Set mobile body background to light grey for bottom Safari tab bar */
    overflow-x: hidden;
    max-width: 100%;
  }

  .app-container, .main-wrapper, .content-body, .card {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .main-wrapper {
    min-width: 0 !important;
    overflow-x: hidden !important;
    padding-top: 30px !important;
  }

  /* Prevent iOS automatic zoom on focus by enforcing 16px font-size */
  .form-input, .form-textarea, .form-select, .ql-container.ql-snow, .ql-editor {
    font-size: 16px !important;
  }

  body {
    flex-direction: column;
  }
  


  .sidebar-close-btn {
    display: flex;
  }
  
  .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    height: auto;
    width: 300px;
    z-index: 999;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s ease;
    box-shadow: none;
  }
  
  .sidebar.open {
    transform: translateX(0);
    visibility: visible;
    box-shadow: var(--shadow-lg);
  }

  .sidebar-footer {
    padding-bottom: calc(32px + env(safe-area-inset-bottom));
  }

  .sidebar-header {
    padding: 16px 8px 16px 20px; /* Pull the close button closer to the right edge */
  }

  .logo-container-image {
    max-width: 160px; /* Tick larger than 140px, but still prevents overlap on mobile */
  }
  
  .top-header {
    height: 30px;
    padding: 0 16px;
    justify-content: flex-start;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 100 !important;
  }

  /* Mobile: show hamburger only when sidebar is closed */
  .top-header .mobile-menu-toggle {
    display: flex;
  }
  /* Hide hamburger when sidebar is open on mobile */
  .sidebar.open ~ .main-wrapper .top-header .mobile-menu-toggle {
    display: none;
  }
  
  .header-meta {
    flex: 1;
  }

  .header-actions {
    margin-left: auto;
  }
  
  .top-nav {
    display: none;
  }
  
  .content-body {
    padding: 12px;
  }
  
  .card {
    padding: 16px;
  }
  
  .page-header-container {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding-bottom: 16px;
  }
  
  .page-header-title {
    font-size: 1.8rem;
  }
  
  .page-header-actions {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
  }

  .page-header-actions .badge,
  .page-header-actions .btn,
  .page-header-actions form,
  .page-header-actions form button {
    width: 100%;
  }

  .wiki-content table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* login page card spacing on mobile */
  .login-card {
    margin: 40px auto;
    padding: 20px;
  }

}

/* Upload section spacing & divider */
.upload-section-container {
  margin-top: 16px;
  border-top: 1px solid var(--card-border);
  padding-top: 16px;
}

/* Media Gallery */
.gallery-container {
  margin-top: 12px;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 16px;
  max-height: 420px;
  overflow-y: auto;
  padding: 12px;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  background-color: var(--bg-tertiary);
}

.gallery-item {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--card-border);
  background-color: var(--bg-secondary);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s, box-shadow 0.2s;
}

.gallery-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.gallery-thumb-wrapper {
  height: 110px;
  position: relative;
  overflow: hidden;
  background-color: var(--bg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--card-border);
}

.gallery-thumb {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
}

.gallery-actions {
  display: flex;
  padding: 6px;
  gap: 6px;
  background-color: var(--bg-secondary);
  border-bottom: 1px solid var(--card-border);
  justify-content: space-between;
}

.gallery-btn-action {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 5px;
  border-radius: 4px;
  border: 1px solid var(--card-border);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: all 0.2s;
}

.gallery-btn-action:hover {
  background-color: var(--bg-tertiary);
}

.gallery-btn-action-insert:hover {
  background-color: var(--accent-color);
  color: white;
  border-color: var(--accent-color);
}

.gallery-btn-action-insert:hover svg {
  color: white !important;
}

.gallery-btn-action-delete:hover {
  background-color: var(--danger);
  color: white;
  border-color: var(--danger);
}

.gallery-btn-action-delete:hover svg {
  color: white !important;
}

.gallery-meta {
  padding: 6px 8px;
  background-color: var(--bg-secondary);
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
}

.gallery-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* Quill Custom Styles to match Theme */
.ql-toolbar.ql-snow {
  background-color: var(--bg-tertiary) !important;
  border-color: var(--card-border) !important;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  position: relative;
  z-index: 12;
}

.ql-container.ql-snow {
  background-color: var(--bg-secondary) !important;
  border-color: var(--card-border) !important;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  font-family: var(--font-body) !important;
  font-size: 0.95rem !important;
  color: var(--text-primary) !important;
  position: relative;
  z-index: 11;
}

.ql-editor {
  min-height: 250px;
}

/* Ensure editor content is fully visible with correct contrast and matches light background */
.ql-editor p,
.ql-editor span,
.ql-editor ul,
.ql-editor ol,
.ql-editor li,
.ql-editor strong,
.ql-editor em,
.ql-editor a,
.ql-editor blockquote,
.ql-editor pre,
.ql-editor code {
  color: var(--text-primary) !important;
}

.ql-editor a {
  color: var(--accent-color) !important;
  text-decoration: underline !important;
}

.ql-editor li::before {
  color: var(--text-primary) !important;
}


.ql-snow .ql-stroke {
  stroke: var(--text-secondary) !important;
}

.ql-snow .ql-fill {
  fill: var(--text-secondary) !important;
}

.ql-snow .ql-picker {
  color: var(--text-secondary) !important;
}

.ql-snow .ql-picker-options {
  background-color: var(--bg-tertiary) !important;
  border-color: var(--card-border) !important;
  z-index: 20 !important;
}

/* Ensure Quill tooltips (like link editor) overlay above the sidebar */
.ql-tooltip {
  z-index: 50 !important;
}

/* Collapsible Media Gallery styles */
.gallery-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  background: transparent;
  border: none;
  padding: 6px 0;
  cursor: pointer;
  color: var(--text-primary);
  text-align: left;
  outline: none;
  transition: opacity 0.2s ease;
}

.gallery-toggle-btn:hover {
  opacity: 0.8;
}

.gallery-toggle-btn[aria-expanded="true"] .gallery-chevron-icon {
  transform: rotate(180deg);
}

/* Callout Box Styling (Info, Warning, Success, Danger) */
/* Apply base layout styles to paragraphs with callout classes and to list containers containing callout list items */
.wiki-content p.callout-info,
.wiki-content p.callout-warning,
.wiki-content p.callout-success,
.wiki-content p.callout-danger,
.ql-editor p.callout-info,
.ql-editor p.callout-warning,
.ql-editor p.callout-success,
.ql-editor p.callout-danger,
.wiki-content ul:has(> li.callout-info),
.wiki-content ol:has(> li.callout-info),
.wiki-content ul:has(> li.callout-warning),
.wiki-content ol:has(> li.callout-warning),
.wiki-content ul:has(> li.callout-success),
.wiki-content ol:has(> li.callout-success),
.wiki-content ul:has(> li.callout-danger),
.wiki-content ol:has(> li.callout-danger),
.ql-editor ul:has(> li.callout-info),
.ql-editor ol:has(> li.callout-info),
.ql-editor ul:has(> li.callout-warning),
.ql-editor ol:has(> li.callout-warning),
.ql-editor ul:has(> li.callout-success),
.ql-editor ol:has(> li.callout-success),
.ql-editor ul:has(> li.callout-danger),
.ql-editor ol:has(> li.callout-danger) {
  padding: 12px 16px !important;
  border-radius: 6px !important;
  border-left: 4px solid #d1d5db !important;
  color: var(--text-primary) !important;
  font-family: var(--font-body) !important;
  font-size: 0.95rem !important;
  line-height: 1.5 !important;
  margin-top: 16px !important;
  margin-bottom: 16px !important;
}

/* Extra left padding for lists to keep bullets/numbers inside the box */
.wiki-content ul:has(> li.callout-info),
.wiki-content ol:has(> li.callout-info),
.wiki-content ul:has(> li.callout-warning),
.wiki-content ol:has(> li.callout-warning),
.wiki-content ul:has(> li.callout-success),
.wiki-content ol:has(> li.callout-success),
.wiki-content ul:has(> li.callout-danger),
.wiki-content ol:has(> li.callout-danger),
.ql-editor ul:has(> li.callout-info),
.ql-editor ol:has(> li.callout-info),
.ql-editor ul:has(> li.callout-warning),
.ql-editor ol:has(> li.callout-warning),
.ql-editor ul:has(> li.callout-success),
.ql-editor ol:has(> li.callout-success),
.ql-editor ul:has(> li.callout-danger),
.ql-editor ol:has(> li.callout-danger) {
  padding-left: 36px !important;
}

.wiki-content li.callout-info,
.wiki-content li.callout-warning,
.wiki-content li.callout-success,
.wiki-content li.callout-danger,
.ql-editor li.callout-info,
.ql-editor li.callout-warning,
.ql-editor li.callout-success,
.ql-editor li.callout-danger {
  background: transparent !important;
  border: none !important;
  padding-top: 2px !important;
  padding-bottom: 2px !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

/* Per-type text color for list items inside callout boxes */
.wiki-content li.callout-info,
.ql-editor li.callout-info { color: #1e40af !important; }

.wiki-content li.callout-warning,
.ql-editor li.callout-warning { color: #854d0e !important; }

.wiki-content li.callout-success,
.ql-editor li.callout-success { color: #166534 !important; }

.wiki-content li.callout-danger,
.ql-editor li.callout-danger { color: #991b1b !important; }

/* Color theme mappings */
.wiki-content p.callout-info,
.wiki-content ul:has(> li.callout-info),
.wiki-content ol:has(> li.callout-info),
.ql-editor p.callout-info,
.ql-editor ul:has(> li.callout-info),
.ql-editor ol:has(> li.callout-info) {
  background-color: #eff6ff !important;
  border-left-color: #3b82f6 !important;
  color: #1e40af !important;
}

.wiki-content p.callout-warning,
.wiki-content ul:has(> li.callout-warning),
.wiki-content ol:has(> li.callout-warning),
.ql-editor p.callout-warning,
.ql-editor ul:has(> li.callout-warning),
.ql-editor ol:has(> li.callout-warning) {
  background-color: #fffbeb !important;
  border-left-color: #f59f00 !important;
  color: #854d0e !important;
}

.wiki-content p.callout-success,
.wiki-content ul:has(> li.callout-success),
.wiki-content ol:has(> li.callout-success),
.ql-editor p.callout-success,
.ql-editor ul:has(> li.callout-success),
.ql-editor ol:has(> li.callout-success) {
  background-color: #f0fdf4 !important;
  border-left-color: #22c55e !important;
  color: #166534 !important;
}

.wiki-content p.callout-danger,
.wiki-content ul:has(> li.callout-danger),
.wiki-content ol:has(> li.callout-danger),
.ql-editor p.callout-danger,
.ql-editor ul:has(> li.callout-danger),
.ql-editor ol:has(> li.callout-danger) {
  background-color: #fef2f2 !important;
  border-left-color: #ef4444 !important;
  color: #991b1b !important;
}

/* Consecutive same-type Callout Blocks: Visual Merging (Info) */
.wiki-content p.callout-info:has(+ p.callout-info),
.wiki-content p.callout-info:has(+ ul > li.callout-info),
.wiki-content p.callout-info:has(+ ol > li.callout-info),
.wiki-content ul:has(> li.callout-info):has(+ p.callout-info),
.wiki-content ul:has(> li.callout-info):has(+ ul > li.callout-info),
.wiki-content ul:has(> li.callout-info):has(+ ol > li.callout-info),
.wiki-content ol:has(> li.callout-info):has(+ p.callout-info),
.wiki-content ol:has(> li.callout-info):has(+ ul > li.callout-info),
.wiki-content ol:has(> li.callout-info):has(+ ol > li.callout-info),
.ql-editor p.callout-info:has(+ p.callout-info),
.ql-editor p.callout-info:has(+ ul > li.callout-info),
.ql-editor p.callout-info:has(+ ol > li.callout-info),
.ql-editor ul:has(> li.callout-info):has(+ p.callout-info),
.ql-editor ul:has(> li.callout-info):has(+ ul > li.callout-info),
.ql-editor ul:has(> li.callout-info):has(+ ol > li.callout-info),
.ql-editor ol:has(> li.callout-info):has(+ p.callout-info),
.ql-editor ol:has(> li.callout-info):has(+ ul > li.callout-info),
.ql-editor ol:has(> li.callout-info):has(+ ol > li.callout-info) {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 6px !important;
}
.wiki-content p.callout-info + p.callout-info,
.wiki-content p.callout-info + ul:has(> li.callout-info),
.wiki-content p.callout-info + ol:has(> li.callout-info),
.wiki-content ul:has(> li.callout-info) + p.callout-info,
.wiki-content ul:has(> li.callout-info) + ul:has(> li.callout-info),
.wiki-content ul:has(> li.callout-info) + ol:has(> li.callout-info),
.wiki-content ol:has(> li.callout-info) + p.callout-info,
.wiki-content ol:has(> li.callout-info) + ul:has(> li.callout-info),
.wiki-content ol:has(> li.callout-info) + ol:has(> li.callout-info),
.ql-editor p.callout-info + p.callout-info,
.ql-editor p.callout-info + ul:has(> li.callout-info),
.ql-editor p.callout-info + ol:has(> li.callout-info),
.ql-editor ul:has(> li.callout-info) + p.callout-info,
.ql-editor ul:has(> li.callout-info) + ul:has(> li.callout-info),
.ql-editor ul:has(> li.callout-info) + ol:has(> li.callout-info),
.ql-editor ol:has(> li.callout-info) + p.callout-info,
.ql-editor ol:has(> li.callout-info) + ul:has(> li.callout-info),
.ql-editor ol:has(> li.callout-info) + ol:has(> li.callout-info) {
  margin-top: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-top: none !important;
  padding-top: 6px !important;
}

/* Consecutive same-type Callout Blocks: Visual Merging (Warning) */
.wiki-content p.callout-warning:has(+ p.callout-warning),
.wiki-content p.callout-warning:has(+ ul > li.callout-warning),
.wiki-content p.callout-warning:has(+ ol > li.callout-warning),
.wiki-content ul:has(> li.callout-warning):has(+ p.callout-warning),
.wiki-content ul:has(> li.callout-warning):has(+ ul > li.callout-warning),
.wiki-content ul:has(> li.callout-warning):has(+ ol > li.callout-warning),
.wiki-content ol:has(> li.callout-warning):has(+ p.callout-warning),
.wiki-content ol:has(> li.callout-warning):has(+ ul > li.callout-warning),
.wiki-content ol:has(> li.callout-warning):has(+ ol > li.callout-warning),
.ql-editor p.callout-warning:has(+ p.callout-warning),
.ql-editor p.callout-warning:has(+ ul > li.callout-warning),
.ql-editor p.callout-warning:has(+ ol > li.callout-warning),
.ql-editor ul:has(> li.callout-warning):has(+ p.callout-warning),
.ql-editor ul:has(> li.callout-warning):has(+ ul > li.callout-warning),
.ql-editor ul:has(> li.callout-warning):has(+ ol > li.callout-warning),
.ql-editor ol:has(> li.callout-warning):has(+ p.callout-warning),
.ql-editor ol:has(> li.callout-warning):has(+ ul > li.callout-warning),
.ql-editor ol:has(> li.callout-warning):has(+ ol > li.callout-warning) {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 6px !important;
}
.wiki-content p.callout-warning + p.callout-warning,
.wiki-content p.callout-warning + ul:has(> li.callout-warning),
.wiki-content p.callout-warning + ol:has(> li.callout-warning),
.wiki-content ul:has(> li.callout-warning) + p.callout-warning,
.wiki-content ul:has(> li.callout-warning) + ul:has(> li.callout-warning),
.wiki-content ul:has(> li.callout-warning) + ol:has(> li.callout-warning),
.wiki-content ol:has(> li.callout-warning) + p.callout-warning,
.wiki-content ol:has(> li.callout-warning) + ul:has(> li.callout-warning),
.wiki-content ol:has(> li.callout-warning) + ol:has(> li.callout-warning),
.ql-editor p.callout-warning + p.callout-warning,
.ql-editor p.callout-warning + ul:has(> li.callout-warning),
.ql-editor p.callout-warning + ol:has(> li.callout-warning),
.ql-editor ul:has(> li.callout-warning) + p.callout-warning,
.ql-editor ul:has(> li.callout-warning) + ul:has(> li.callout-warning),
.ql-editor ul:has(> li.callout-warning) + ol:has(> li.callout-warning),
.ql-editor ol:has(> li.callout-warning) + p.callout-warning,
.ql-editor ol:has(> li.callout-warning) + ul:has(> li.callout-warning),
.ql-editor ol:has(> li.callout-warning) + ol:has(> li.callout-warning) {
  margin-top: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-top: none !important;
  padding-top: 6px !important;
}

/* Consecutive same-type Callout Blocks: Visual Merging (Success) */
.wiki-content p.callout-success:has(+ p.callout-success),
.wiki-content p.callout-success:has(+ ul > li.callout-success),
.wiki-content p.callout-success:has(+ ol > li.callout-success),
.wiki-content ul:has(> li.callout-success):has(+ p.callout-success),
.wiki-content ul:has(> li.callout-success):has(+ ul > li.callout-success),
.wiki-content ul:has(> li.callout-success):has(+ ol > li.callout-success),
.wiki-content ol:has(> li.callout-success):has(+ p.callout-success),
.wiki-content ol:has(> li.callout-success):has(+ ul > li.callout-success),
.wiki-content ol:has(> li.callout-success):has(+ ol > li.callout-success),
.ql-editor p.callout-success:has(+ p.callout-success),
.ql-editor p.callout-success:has(+ ul > li.callout-success),
.ql-editor p.callout-success:has(+ ol > li.callout-success),
.ql-editor ul:has(> li.callout-success):has(+ p.callout-success),
.ql-editor ul:has(> li.callout-success):has(+ ul > li.callout-success),
.ql-editor ul:has(> li.callout-success):has(+ ol > li.callout-success),
.ql-editor ol:has(> li.callout-success):has(+ p.callout-success),
.ql-editor ol:has(> li.callout-success):has(+ ul > li.callout-success),
.ql-editor ol:has(> li.callout-success):has(+ ol > li.callout-success) {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 6px !important;
}
.wiki-content p.callout-success + p.callout-success,
.wiki-content p.callout-success + ul:has(> li.callout-success),
.wiki-content p.callout-success + ol:has(> li.callout-success),
.wiki-content ul:has(> li.callout-success) + p.callout-success,
.wiki-content ul:has(> li.callout-success) + ul:has(> li.callout-success),
.wiki-content ul:has(> li.callout-success) + ol:has(> li.callout-success),
.wiki-content ol:has(> li.callout-success) + p.callout-success,
.wiki-content ol:has(> li.callout-success) + ul:has(> li.callout-success),
.wiki-content ol:has(> li.callout-success) + ol:has(> li.callout-success),
.ql-editor p.callout-success + p.callout-success,
.ql-editor p.callout-success + ul:has(> li.callout-success),
.ql-editor p.callout-success + ol:has(> li.callout-success),
.ql-editor ul:has(> li.callout-success) + p.callout-success,
.ql-editor ul:has(> li.callout-success) + ul:has(> li.callout-success),
.ql-editor ul:has(> li.callout-success) + ol:has(> li.callout-success),
.ql-editor ol:has(> li.callout-success) + p.callout-success,
.ql-editor ol:has(> li.callout-success) + ul:has(> li.callout-success),
.ql-editor ol:has(> li.callout-success) + ol:has(> li.callout-success) {
  margin-top: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-top: none !important;
  padding-top: 6px !important;
}

/* Consecutive same-type Callout Blocks: Visual Merging (Danger) */
.wiki-content p.callout-danger:has(+ p.callout-danger),
.wiki-content p.callout-danger:has(+ ul > li.callout-danger),
.wiki-content p.callout-danger:has(+ ol > li.callout-danger),
.wiki-content ul:has(> li.callout-danger):has(+ p.callout-danger),
.wiki-content ul:has(> li.callout-danger):has(+ ul > li.callout-danger),
.wiki-content ul:has(> li.callout-danger):has(+ ol > li.callout-danger),
.wiki-content ol:has(> li.callout-danger):has(+ p.callout-danger),
.wiki-content ol:has(> li.callout-danger):has(+ ul > li.callout-danger),
.wiki-content ol:has(> li.callout-danger):has(+ ol > li.callout-danger),
.ql-editor p.callout-danger:has(+ p.callout-danger),
.ql-editor p.callout-danger:has(+ ul > li.callout-danger),
.ql-editor p.callout-danger:has(+ ol > li.callout-danger),
.ql-editor ul:has(> li.callout-danger):has(+ p.callout-danger),
.ql-editor ul:has(> li.callout-danger):has(+ ul > li.callout-danger),
.ql-editor ul:has(> li.callout-danger):has(+ ol > li.callout-danger),
.ql-editor ol:has(> li.callout-danger):has(+ p.callout-danger),
.ql-editor ol:has(> li.callout-danger):has(+ ul > li.callout-danger),
.ql-editor ol:has(> li.callout-danger):has(+ ol > li.callout-danger) {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 6px !important;
}
.wiki-content p.callout-danger + p.callout-danger,
.wiki-content p.callout-danger + ul:has(> li.callout-danger),
.wiki-content p.callout-danger + ol:has(> li.callout-danger),
.wiki-content ul:has(> li.callout-danger) + p.callout-danger,
.wiki-content ul:has(> li.callout-danger) + ul:has(> li.callout-danger),
.wiki-content ul:has(> li.callout-danger) + ol:has(> li.callout-danger),
.wiki-content ol:has(> li.callout-danger) + p.callout-danger,
.wiki-content ol:has(> li.callout-danger) + ul:has(> li.callout-danger),
.wiki-content ol:has(> li.callout-danger) + ol:has(> li.callout-danger),
.ql-editor p.callout-danger + p.callout-danger,
.ql-editor p.callout-danger + ul:has(> li.callout-danger),
.ql-editor p.callout-danger + ol:has(> li.callout-danger),
.ql-editor ul:has(> li.callout-danger) + p.callout-danger,
.ql-editor ul:has(> li.callout-danger) + ul:has(> li.callout-danger),
.ql-editor ul:has(> li.callout-danger) + ol:has(> li.callout-danger),
.ql-editor ol:has(> li.callout-danger) + p.callout-danger,
.ql-editor ol:has(> li.callout-danger) + ul:has(> li.callout-danger),
.ql-editor ol:has(> li.callout-danger) + ol:has(> li.callout-danger) {
  margin-top: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-top: none !important;
  padding-top: 6px !important;
}

/* JS-controlled merge classes for adjacent same-type callout blocks in the Quill editor */
.ql-editor .ql-callout-merge-bottom {
  margin-bottom: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding-bottom: 6px !important;
}
.ql-editor .ql-callout-merge-top {
  margin-top: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-top: none !important;
  padding-top: 6px !important;
}

/* Quill toolbar picker styling for Callout dropdown */
.ql-snow .ql-picker.ql-callout {
  width: 95px !important;
}
.ql-snow .ql-picker.ql-callout .ql-picker-label::before {
  content: 'Box' !important;
}
.ql-snow .ql-picker.ql-callout .ql-picker-item::before {
  content: 'Normal' !important;
}
.ql-snow .ql-picker.ql-callout .ql-picker-label[data-value="info"]::before,
.ql-snow .ql-picker.ql-callout .ql-picker-item[data-value="info"]::before {
  content: 'Info' !important;
}
.ql-snow .ql-picker.ql-callout .ql-picker-label[data-value="warning"]::before,
.ql-snow .ql-picker.ql-callout .ql-picker-item[data-value="warning"]::before {
  content: 'Warning' !important;
}
.ql-snow .ql-picker.ql-callout .ql-picker-label[data-value="success"]::before,
.ql-snow .ql-picker.ql-callout .ql-picker-item[data-value="success"]::before {
  content: 'Success' !important;
}
.ql-snow .ql-picker.ql-callout .ql-picker-label[data-value="danger"]::before,
.ql-snow .ql-picker.ql-callout .ql-picker-item[data-value="danger"]::before {
  content: 'Danger' !important;
}

/* Toolbar button tooltips for inline code vs code block */
.ql-snow .ql-toolbar .ql-code::after {
  content: 'Inline-Code';
  position: absolute;
  bottom: -28px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15, 23, 42, 0.85);
  color: #fff;
  font-size: 11px;
  padding: 3px 7px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 100;
}
.ql-snow .ql-toolbar .ql-code:hover::after {
  opacity: 1;
}
.ql-snow .ql-toolbar .ql-code {
  position: relative;
}

.ql-snow .ql-toolbar .ql-code-block::after {
  content: 'Code-Block';
  position: absolute;
  bottom: -28px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15, 23, 42, 0.85);
  color: #fff;
  font-size: 11px;
  padding: 3px 7px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 100;
}
.ql-snow .ql-toolbar .ql-code-block:hover::after {
  opacity: 1;
}
.ql-snow .ql-toolbar .ql-code-block {
  position: relative;
}