/* Website Custom Stylesheet for Active Directory Hardening Guidebook */

/* Import Outfit, Inter, and JetBrains Mono from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* Define Theme Variables across Light, Sepia, and Night Modes */
.book {
  /* Default: Light Mode */
  --bg-primary: #ffffff;
  --bg-secondary: #f8fafc;
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-headings: #1e3a8a;
  --link-color: #0f766e;
  --border-color: #e2e8f0;
  --code-bg: #f8fafc;
  --code-text: #0f172a;
  --sidebar-bg: #f8fafc;
  --sidebar-text: #334155;
  --sidebar-hover-bg: #f1f5f9;
  --sidebar-active-bg: #ccfbf1;
  --sidebar-active-text: #0f766e;
  --scrollbar-thumb: #cbd5e1;
  
  --alert-note-bg: #eff6ff;
  --alert-note-border: #3b82f6;
  --alert-tip-bg: #ecfdf5;
  --alert-tip-border: #10b981;
  --alert-warning-bg: #fffbeb;
  --alert-warning-border: #f59e0b;
  --alert-danger-bg: #fef2f2;
  --alert-danger-border: #ef4444;
}

/* Light Mode Overrides */
.book.color-theme-0 {
  --bg-primary: #ffffff;
  --bg-secondary: #f8fafc;
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-headings: #1e3a8a;
  --link-color: #0f766e;
  --border-color: #e2e8f0;
  --code-bg: #f8fafc;
  --code-text: #0f172a;
  --sidebar-bg: #f8fafc;
  --sidebar-text: #334155;
  --sidebar-hover-bg: #f1f5f9;
  --sidebar-active-bg: #ccfbf1;
  --sidebar-active-text: #0f766e;
  --scrollbar-thumb: #cbd5e1;
}

/* Sepia Mode Overrides */
.book.color-theme-1 {
  --bg-primary: #fbf6ec;
  --bg-secondary: #f4eedc;
  --text-primary: #2d1f10;
  --text-secondary: #5c4d3c;
  --text-headings: #4e3629;
  --link-color: #8c6239;
  --border-color: #e6d6bc;
  --code-bg: #f4eedc;
  --code-text: #2d1f10;
  --sidebar-bg: #f4eedc;
  --sidebar-text: #5c4d3c;
  --sidebar-hover-bg: #ede3cf;
  --sidebar-active-bg: #dfd0b5;
  --sidebar-active-text: #4e3629;
  --scrollbar-thumb: #d1c2a5;
  
  --alert-note-bg: #fcfaf2;
  --alert-note-border: #8c6239;
  --alert-tip-bg: #f5f9f0;
  --alert-tip-border: #6b8e23;
  --alert-warning-bg: #faf5e6;
  --alert-warning-border: #d2b48c;
  --alert-danger-bg: #fdf5f5;
  --alert-danger-border: #cd5c5c;
}

/* Night Mode Overrides */
.book.color-theme-2 {
  --bg-primary: #0b0f19;
  --bg-secondary: #0f172a;
  --text-primary: #e2e8f0;
  --text-secondary: #94a3b8;
  --text-headings: #2dd4bf;
  --link-color: #38bdf8;
  --border-color: #1e293b;
  --code-bg: #0f172a;
  --code-text: #e2e8f0;
  --sidebar-bg: #0f172a;
  --sidebar-text: #94a3b8;
  --sidebar-hover-bg: #1e293b;
  --sidebar-active-bg: #134e4a;
  --sidebar-active-text: #2dd4bf;
  --scrollbar-thumb: #334155;
  
  --alert-note-bg: #0d1b2a;
  --alert-note-border: #3b82f6;
  --alert-tip-bg: #062016;
  --alert-tip-border: #10b981;
  --alert-warning-bg: #231806;
  --alert-warning-border: #f59e0b;
  --alert-danger-bg: #2a080c;
  --alert-danger-border: #ef4444;
}

/* Global Typography & Font Rules */
.book.font-family-1,
.book:not(.font-family-0),
.book:not(.font-family-0) .book-summary,
.book:not(.font-family-0) .book-body,
.book:not(.font-family-0) .book-header,
.book:not(.font-family-0) .markdown-section,
.book:not(.font-family-0) .navigation {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

.book.font-family-0,
.book.font-family-0 .book-summary,
.book.font-family-0 .book-body,
.book.font-family-0 .book-header,
.book.font-family-0 .markdown-section,
.book.font-family-0 .navigation {
  font-family: Georgia, serif !important;
}

/* Keep code blocks always monospace */
.book.font-family-0 code, 
.book.font-family-0 pre,
.book.font-family-0 pre code,
.book.font-family-0 kbd,
.book.font-family-0 samp {
  font-family: 'JetBrains Mono', 'Fira Code', monospace !important;
}

/* Basic Layout Styles */
.book {
  background: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

.book-body {
  background: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

.body-inner {
  background: var(--bg-primary) !important;
}

.page-wrapper {
  background: var(--bg-primary) !important;
}

/* Sidebar Styling (Premium Layout) */
.book-summary {
  background: var(--sidebar-bg) !important;
  border-right: 1px solid var(--border-color) !important;
  box-shadow: 4px 0 10px rgba(0, 0, 0, 0.02) !important;
  transition: all 0.3s ease !important;
}

.book-summary ul.summary {
  background: var(--sidebar-bg) !important;
  padding: 10px 0 !important;
}

.book-summary ul.summary li.divider {
  background-color: var(--border-color) !important;
  height: 1px !important;
  margin: 10px 15px !important;
}

.book-summary ul.summary li.header {
  font-family: 'Outfit', sans-serif !important;
  color: var(--text-headings) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  font-size: 0.8em !important;
  letter-spacing: 1px !important;
  padding: 15px 20px 5px 20px !important;
}

/* Sidebar Chapter Links */
.book-summary ul.summary li a,
.book-summary ul.summary li.chapter a {
  padding: 8px 15px 8px 20px !important;
  margin: 3px 10px !important;
  border-radius: 6px !important;
  color: var(--sidebar-text) !important;
  font-weight: 500 !important;
  font-size: 0.9em !important;
  display: block !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  text-decoration: none !important;
  border-left: 3px solid transparent !important;
  white-space: normal !important;
  text-overflow: clip !important;
  overflow: visible !important;
  word-wrap: break-word !important;
  line-height: 1.4 !important;
}

.book-summary ul.summary li.chapter a:hover {
  background: var(--sidebar-hover-bg) !important;
  color: var(--link-color) !important;
  padding-left: 24px !important;
  border-left: 3px solid var(--link-color) !important;
}

.book-summary ul.summary li.chapter.active > a {
  background: var(--sidebar-active-bg) !important;
  color: var(--sidebar-active-text) !important;
  font-weight: 600 !important;
  border-left: 3px solid var(--link-color) !important;
}

/* Sidebar Search Box */
#book-search-input {
  padding: 10px 15px !important;
  background: var(--sidebar-bg) !important;
  border-bottom: 1px solid var(--border-color) !important;
}

#book-search-input input {
  font-family: 'Inter', sans-serif !important;
  background: var(--bg-primary) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 6px !important;
  padding: 6px 12px 6px 30px !important;
  width: 100% !important;
  font-size: 0.85em !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05) !important;
  transition: all 0.2s ease !important;
}

#book-search-input input:focus {
  border-color: var(--link-color) !important;
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15) !important;
  outline: none !important;
}

/* Header Navbar Styling */
.book-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  background: var(--bg-primary) !important;
  border-bottom: 1px solid var(--border-color) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.01) !important;
  height: 50px !important;
}

.book-header h1 {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 600 !important;
  font-size: 1.1em !important;
  color: var(--text-primary) !important;
  line-height: 50px !important;
}

.book-header h1 a {
  color: var(--text-primary) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

.book-header h1 a:hover {
  color: var(--link-color) !important;
}

.book-header .btn {
  color: var(--text-secondary) !important;
  line-height: 50px !important;
  height: 50px !important;
  padding: 0 12px !important;
  transition: color 0.2s ease !important;
}

.book-header .btn:hover {
  color: var(--link-color) !important;
  background: transparent !important;
}

/* Markdown Reading Panel Content */
.page-inner {
  max-width: 1050px !important;
}

.markdown-section {
  padding: 30px 15px !important;
  max-width: 1050px !important;
  margin: 0 auto !important;
  color: var(--text-primary) !important;
  line-height: 1.7 !important;
}

/* Headings System */
.book.font-family-1 .markdown-section h1,
.book.font-family-1 .markdown-section h2,
.book.font-family-1 .markdown-section h3,
.book.font-family-1 .markdown-section h4,
.book.font-family-1 .markdown-section h5,
.book.font-family-1 .markdown-section h6,
.book:not(.font-family-0) .markdown-section h1,
.book:not(.font-family-0) .markdown-section h2,
.book:not(.font-family-0) .markdown-section h3,
.book:not(.font-family-0) .markdown-section h4,
.book:not(.font-family-0) .markdown-section h5,
.book:not(.font-family-0) .markdown-section h6 {
  font-family: 'Outfit', sans-serif !important;
  color: var(--text-headings) !important;
  font-weight: 700 !important;
  margin-top: 1.5em !important;
  margin-bottom: 0.5em !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
}

.markdown-section h1 {
  font-size: 2.1em !important;
  border-bottom: 2px solid var(--border-color) !important;
  padding-bottom: 0.3em !important;
  margin-top: 0.5em !important;
}

.markdown-section h2 {
  font-size: 1.55em !important;
  border-bottom: 1px solid var(--border-color) !important;
  padding-bottom: 0.3em !important;
}

.markdown-section h3 {
  font-size: 1.25em !important;
}

.markdown-section h4 {
  font-size: 1.1em !important;
}

/* Paragraphs & Text Elements */
.markdown-section p {
  margin-top: 0 !important;
  margin-bottom: 1.2em !important;
  color: var(--text-primary) !important;
  text-align: justify !important;
}

.markdown-section a {
  color: var(--link-color) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  border-bottom: 1px solid transparent !important;
  transition: all 0.2s ease !important;
}

.markdown-section a:hover {
  border-bottom: 1px solid var(--link-color) !important;
  text-decoration: none !important;
}

/* Lists and Items */
.markdown-section ul,
.markdown-section ol {
  margin-top: 0 !important;
  margin-bottom: 1.2em !important;
  padding-left: 2em !important;
}

.markdown-section li {
  margin-bottom: 0.4em !important;
  color: var(--text-primary) !important;
}

/* Inline Code Elements */
.markdown-section code {
  font-family: 'JetBrains Mono', 'Fira Code', monospace !important;
  font-size: 0.85em !important;
  background-color: var(--code-bg) !important;
  color: var(--link-color) !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  border: 1px solid var(--border-color) !important;
  word-break: break-word !important;
}

/* Block Code Snippets (Prism Wrapper) */
.markdown-section pre {
  background-color: var(--code-bg) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
  padding: 16px !important;
  margin: 1.5em 0 !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.01) !important;
  position: relative !important;
  overflow-x: auto !important;
}

.markdown-section pre code {
  font-family: 'JetBrains Mono', 'Fira Code', monospace !important;
  font-size: 0.88em !important;
  color: var(--code-text) !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  word-break: normal !important;
  display: block !important;
  white-space: pre !important;
}

/* Remove default Prism text shadow to ensure crisp, readable code text on all backgrounds */
code[class*="language-"],
pre[class*="language-"],
.token {
  text-shadow: none !important;
}

/* Pre scrollbar custom styling */
.markdown-section pre::-webkit-scrollbar {
  height: 6px !important;
  width: 6px !important;
}

.markdown-section pre::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb) !important;
  border-radius: 10px !important;
}

.markdown-section pre::-webkit-scrollbar-track {
  background: transparent !important;
}

/* Blockquotes & Alerts Styling (Callout Override) */
.markdown-section blockquote {
  margin: 1.5em 0 !important;
  padding: 12px 18px !important;
  background-color: var(--bg-secondary) !important;
  border-left: 4px solid var(--link-color) !important;
  border-radius: 0 8px 8px 0 !important;
  color: var(--text-secondary) !important;
}

.markdown-section blockquote p {
  margin: 0 !important;
  color: var(--text-secondary) !important;
  font-style: italic !important;
  text-align: left !important;
}

/* Custom styling for flexible-alerts classes */
.alert.callout, .alert.flat {
  padding: 15px 20px !important;
  margin: 1.5em 0 !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02) !important;
  color: var(--text-primary) !important;
}

.alert.callout {
  border: 1px solid var(--border-color) !important;
  border-left-width: 5px !important;
}

.alert.flat {
  border: 1px solid var(--border-color) !important;
}

.alert p {
  margin-top: 0.5em !important;
  margin-bottom: 0.5em !important;
  color: var(--text-primary) !important;
  text-align: left !important;
}

.alert .title {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.9em !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin: 0 !important;
}

/* Specific Alerts */
.alert.info {
  background-color: var(--alert-note-bg) !important;
  border-left-color: var(--alert-note-border) !important;
}
.alert.info .title {
  color: var(--alert-note-border) !important;
}

.alert.tip {
  background-color: var(--alert-tip-bg) !important;
  border-left-color: var(--alert-tip-border) !important;
}
.alert.tip .title {
  color: var(--alert-tip-border) !important;
}

.alert.warning {
  background-color: var(--alert-warning-bg) !important;
  border-left-color: var(--alert-warning-border) !important;
}
.alert.warning .title {
  color: var(--alert-warning-border) !important;
}

.alert.danger, .alert.caution {
  background-color: var(--alert-danger-bg) !important;
  border-left-color: var(--alert-danger-border) !important;
}
.alert.danger .title, .alert.caution .title {
  color: var(--alert-danger-border) !important;
}

/* Premium Table Styling */
.markdown-section table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 1.5em 0 !important;
  font-size: 0.95em !important;
  overflow: hidden !important;
  border-radius: 8px !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.01) !important;
}

.markdown-section th,
.markdown-section td {
  padding: 10px 15px !important;
  border: 1px solid var(--border-color) !important;
  text-align: left !important;
  vertical-align: top !important;
}

.markdown-section th {
  background-color: var(--bg-secondary) !important;
  color: var(--text-headings) !important;
  font-weight: 600 !important;
  font-family: 'Outfit', sans-serif !important;
}

.markdown-section tr:nth-child(even) {
  background-color: var(--bg-secondary) !important;
}

/* Next / Previous Pagination arrows */
.navigation {
  background: var(--bg-primary) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border-color) !important;
  transition: all 0.2s ease !important;
}

.navigation:hover {
  background: var(--bg-secondary) !important;
  color: var(--link-color) !important;
}

/* Custom UI refinements for light/sepia/night colors in specific elements */
.book.color-theme-2 .markdown-section pre {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

.book.color-theme-2 .book-summary ul.summary li.chapter.active > a {
  box-shadow: 0 0 10px rgba(45, 212, 191, 0.1) !important;
}

/* Prism Syntax Highlighting Overrides for Night Mode */
.book.color-theme-2 pre[class*="language-"] {
  background-color: var(--code-bg) !important;
  color: var(--code-text) !important;
}

.book.color-theme-2 .token.comment,
.book.color-theme-2 .token.prolog,
.book.color-theme-2 .token.doctype,
.book.color-theme-2 .token.cdata {
  color: #6a9955 !important;
  font-style: italic !important;
}

.book.color-theme-2 .token.punctuation {
  color: #d4d4d4 !important;
}

.book.color-theme-2 .token.property,
.book.color-theme-2 .token.tag,
.book.color-theme-2 .token.boolean,
.book.color-theme-2 .token.number,
.book.color-theme-2 .token.constant,
.book.color-theme-2 .token.symbol,
.book.color-theme-2 .token.deleted {
  color: #b5cea8 !important;
}

.book.color-theme-2 .token.selector,
.book.color-theme-2 .token.attr-name,
.book.color-theme-2 .token.string,
.book.color-theme-2 .token.char,
.book.color-theme-2 .token.builtin,
.book.color-theme-2 .token.inserted {
  color: #ce9178 !important;
}

.book.color-theme-2 .token.operator,
.book.color-theme-2 .token.entity,
.book.color-theme-2 .token.url,
.book.color-theme-2 .language-css .token.string,
.book.color-theme-2 .style .token.string {
  color: #d4d4d4 !important;
  background: transparent !important;
}

.book.color-theme-2 .token.atrule,
.book.color-theme-2 .token.attr-value,
.book.color-theme-2 .token.keyword {
  color: #569cd6 !important;
}

.book.color-theme-2 .token.function,
.book.color-theme-2 .token.class-name {
  color: #dcdcaa !important;
}

.book.color-theme-2 .token.regex,
.book.color-theme-2 .token.important,
.book.color-theme-2 .token.variable {
  color: #9cdcfe !important;
}

/* Tiering Model Visualizer */
.tiering-model-container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
  margin: 2em 0;
  font-family: 'Inter', sans-serif;
}

.tier-card {
  display: flex;
  background-color: var(--bg-secondary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.01) !important;
  transition: all 0.2s ease !important;
}

.tier-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.02) !important;
}

.tier-badge {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.2em !important;
  width: 100px !important;
  min-width: 100px !important;
  color: #ffffff !important;
  text-transform: uppercase !important;
}

.tier-0 .tier-badge {
  background-color: #3b82f6 !important;
}
.tier-1 .tier-badge {
  background-color: #f59e0b !important;
}
.tier-2 .tier-badge {
  background-color: #10b981 !important;
}

.tier-card.tier-0 {
  border-left: 4px solid #3b82f6 !important;
}
.tier-card.tier-1 {
  border-left: 4px solid #f59e0b !important;
}
.tier-card.tier-2 {
  border-left: 4px solid #10b981 !important;
}

.tier-content {
  padding: 20px !important;
  flex-grow: 1 !important;
}

.tier-content h3 {
  margin-top: 0 !important;
  margin-bottom: 8px !important;
  font-family: 'Outfit', sans-serif !important;
  color: var(--text-headings) !important;
  font-weight: 600 !important;
}

.tier-desc {
  font-size: 0.9em !important;
  color: var(--text-secondary) !important;
  margin-bottom: 15px !important;
  line-height: 1.5 !important;
  text-align: left !important;
}

.tier-elements {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.element-tag {
  background-color: var(--bg-primary) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
  font-size: 0.82em !important;
  font-weight: 500 !important;
}

/* Connectors & Rules between Tiers */
.tier-connector {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 5px 0 !important;
}

.connector-line {
  width: 2px !important;
  height: 20px !important;
  background-color: var(--border-color) !important;
}

.connector-rule {
  font-size: 0.8em !important;
  font-weight: 600 !important;
  padding: 4px 12px !important;
  border-radius: 20px !important;
  border: 1px solid transparent !important;
}

.connector-rule.block-logon {
  background-color: #fef2f2 !important;
  border-color: #fca5a5 !important;
  color: #b91c1c !important;
}

.book.color-theme-2 .connector-rule.block-logon {
  background-color: #2a080c !important;
  border-color: #7f1d1d !important;
  color: #f87171 !important;
}

.connector-rule.secure-mgmt {
  background-color: #eff6ff !important;
  border-color: #bfdbfe !important;
  color: #1d4ed8 !important;
}

.book.color-theme-2 .connector-rule.secure-mgmt {
  background-color: #0d1b2a !important;
  border-color: #1e3a8a !important;
  color: #60a5fa !important;
}

@media (max-width: 600px) {
  .tier-card {
    flex-direction: column !important;
  }
  .tier-badge {
    width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
  }
}

/* WSUS Flow Visualizer */
.wsus-flow-container {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 15px;
  margin: 2em 0;
  font-family: 'Inter', sans-serif;
}

.wsus-step-card {
  display: flex;
  flex-direction: column;
  flex: 1;
  background-color: var(--bg-secondary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.01) !important;
  transition: all 0.2s ease !important;
}

.wsus-step-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.02) !important;
}

.wsus-step-badge {
  padding: 8px 12px !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.9em !important;
  color: #ffffff !important;
  text-transform: uppercase !important;
  text-align: center !important;
}

.online-wsus .wsus-step-badge {
  background-color: #3b82f6 !important;
}
.media-transfer .wsus-step-badge {
  background-color: #f59e0b !important;
}
.offline-wsus .wsus-step-badge {
  background-color: #10b981 !important;
}

.wsus-step-card.online-wsus {
  border-top: 4px solid #3b82f6 !important;
}
.wsus-step-card.media-transfer {
  border-top: 4px solid #f59e0b !important;
}
.wsus-step-card.offline-wsus {
  border-top: 4px solid #10b981 !important;
}

.wsus-step-content {
  padding: 15px !important;
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
}

.wsus-step-content h4 {
  margin-top: 0 !important;
  margin-bottom: 6px !important;
  font-family: 'Outfit', sans-serif !important;
  color: var(--text-headings) !important;
  font-weight: 600 !important;
  font-size: 1.05em !important;
}

.wsus-step-desc {
  font-size: 0.85em !important;
  color: var(--text-secondary) !important;
  margin-bottom: 12px !important;
  line-height: 1.4 !important;
  text-align: left !important;
  flex-grow: 1 !important;
}

.wsus-action-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

.wsus-action-tag {
  background-color: var(--bg-primary) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  font-size: 0.78em !important;
  font-weight: 500 !important;
}

/* Connectors */
.wsus-flow-arrow {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-width: 80px !important;
}

.arrow-line {
  height: 2px !important;
  width: 40px !important;
  background-color: var(--border-color) !important;
  position: relative !important;
}

.arrow-line::after {
  content: '' !important;
  position: absolute !important;
  right: 0 !important;
  top: -3px !important;
  width: 0 !important;
  height: 0 !important;
  border-top: 4px solid transparent !important;
  border-bottom: 4px solid transparent !important;
  border-left: 6px solid var(--border-color) !important;
}

.arrow-label {
  font-size: 0.75em !important;
  font-weight: 600 !important;
  color: var(--text-secondary) !important;
  text-align: center !important;
}

@media (max-width: 800px) {
  .wsus-flow-container {
    flex-direction: column !important;
  }
  .wsus-flow-arrow {
    flex-direction: row !important;
    min-height: 45px !important;
    width: 100% !important;
  }
  .arrow-line {
    width: 2px !important;
    height: 25px !important;
  }
  .arrow-line::after {
    right: -3px !important;
    top: auto !important;
    bottom: 0 !important;
    border-left: 4px solid transparent !important;
    border-right: 4px solid transparent !important;
    border-top: 6px solid var(--border-color) !important;
  }
}