/* Witchy Purple Rose - A mystical theme for Gitea */

  @import url('https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Creepster&family=Griffy&family=Henny+Penny&display=swap');
  
  :root {
    --is-dark-theme: false;
    --fonts-regular: "Kalam", cursive !important;
    --fonts-proportional: "Griffy", cursive !important;
    --fonts-monospace: "Courier New", monospace !important;
    --fonts-emoji: "Apple Color Emoji", "Segoe UI Emoji" !important;
  
    /* Witchy Purple Rose Palette */
    --witch-purple: #2B1B3D;
    --witch-plum: #44275A;
    --witch-rose: #A8577E;
    --witch-mauve: #D4A5C7;
    --witch-lavender: #E8D5E8;
    --witch-black: #0A0009;
    --witch-silver: #C0C0C0;
    --witch-moon: #F5F5F5;
    --witch-shadow: rgba(10, 0, 9, 0.7);
  
    /* Primary (roses) */
    --color-primary: #A8577E;
    --color-primary-dark: #8B4567;
    --color-primary-light: #D4A5C7;
    --color-primary-very-light: #F0E0EC;
  
    /* Main Text & Background */
    --color-text: #2B1B3D;
    --color-text-light: #44275A;
    --color-text-dark: #0A0009;
    --color-body: #F5F5F5;
  
    /* UI (mystical purples) */
    --color-secondary: #44275A;
    --color-secondary-dark: #2B1B3D;
    --color-secondary-light: #6B4C7A;
  
    /* State Colors */
    --color-success: #5D7A5C;
    --color-success-dark: #4A614A;
    --color-success-light: #7A9779;
    --color-danger: #8B3A3A;
    --color-danger-dark: #6B2C2C;
    --color-danger-light: #A85555;
    --color-warning: #8B6914;
    --color-warning-dark: #6B5010;
    --color-warning-light: #B8902B;
    --color-info: #4C5B8B;
    --color-info-dark: #3A4669;
    --color-info-light: #6B7AA8;
  
    /* Other UI Elements */
    --color-menu: #FBF9FC;
    --color-card: #FFFFFF;
    --color-markup-table-row: #F8F5FA;
    --color-markup-code-block: #FCF8FB;
    --color-button: #A8577E;
    --color-border: #E8D5E8;
    --color-input-border: #D4A5C7;
    --color-input-background: #FFFFFF;
    --color-small-accent: #D4A5C7;
  
    /* Diff Colors (rose/plum tints) */
    --color-diff-add-line: #E8F0E8;
    --color-diff-add-word: #D0E0D0;
    --color-diff-del-line: #F8E8F0;
    --color-diff-del-word: #F0D0E0;
    --color-diff-section: #F0E8F8;
  
    /* Code Syntax Highlighting */
    --color-code-keyword: #44275A;
    --color-code-function: #A8577E;
    --color-code-string: #8B4567;
    --color-code-number: #6B4C7A;
    --color-code-comment: #8A6B78;
    --color-code-type: #5B4A6B;
  
    --vscode-editor-background: #FCF9FB;
    --color-footer: #2B1B3D;
    --color-nav-bg: #44275A;
  
    /* Editor selection colors - this is what Gitea uses */
    --color-editor-line-highlight: var(--witch-lavender);
    --color-code-bg: #FDF9FC;
  }
  
  /* Custom Cursors */
  html {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><g transform="translate(12 12) rotate(-45 12 12)"><circle cx="12" cy="6" r="5" fill="%232B1B3D"/><circle cx="6" cy="12" r="5" fill="%232B1B3D"/><circle cx="18" cy="12" r="5" fill="%232B1B3D"/><circle cx="12" cy="18" r="5" fill="%232B1B3D"/><circle cx="12" cy="12" r="3.5" fill="%23A8577E"/><path d="M12 18 L12 36" stroke="%232B1B3D" stroke-width="2.5"/><path d="M10 34 L8 38" stroke="%232B1B3D" stroke-width="2"/><path d="M14 34 L16 38" stroke="%232B1B3D" stroke-width="2"/></g><circle cx="3" cy="3" r="1.5" fill="%23D4A5C7" opacity="0.8"/></svg>') 0 0, auto;
    font-family: "Kalam", cursive;
  }
  
  a, button, .button, .dropdown, .ui.button, .ui.dropdown {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><defs><filter id="glow"><feGaussianBlur stdDeviation="3" result="coloredBlur"/><feMerge><feMergeNode in="coloredBlur"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><g transform="translate(12 12) rotate(-45 12 12)" filter="url(%23glow)"><circle cx="12" cy="6" r="5.5" fill="%23A8577E"/><circle cx="6" cy="12" r="5.5" fill="%23A8577E"/><circle cx="18" cy="12" r="5.5" fill="%23A8577E"/><circle cx="12" cy="18" r="5.5" fill="%23A8577E"/><circle cx="12" cy="12" r="4" fill="%23D4A5C7"/><path d="M12 18 L12 36" stroke="%232B1B3D" stroke-width="2.5"/><path d="M10 34 L8 38" stroke="%232B1B3D" stroke-width="2"/><path d="M14 34 L16 38" stroke="%232B1B3D" stroke-width="2"/></g><circle cx="3" cy="3" r="2" fill="%23D4A5C7" opacity="0.9"/></svg>') 0 0, pointer !important;
  }
  
  input[type="text"], input[type="email"], input[type="password"], textarea {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><line x1="12" y1="6" x2="12" y2="42" stroke="%232B1B3D" stroke-width="2"/><line x1="8" y1="6" x2="16" y2="6" stroke="%232B1B3D" stroke-width="2"/><line x1="8" y1="42" x2="16" y2="42" stroke="%232B1B3D" stroke-width="2"/><circle cx="12" cy="24" r="3" fill="%23A8577E" opacity="0.5"/></svg>') 12 24, text !important;
  }
  
  /* Body base styling - color NOT set here to preserve syntax highlighting */
  body {
    font-family: "Kalam", cursive !important;
    font-size: 16px;
    line-height: 1.6;
  }
  
  /* Set default text color on specific containers, not body/code */
  .ui.container:not(.file-view):not(.code-view),
  .ui.segment:not(.file-view):not(.code-view),
  .ui.card,
  .ui.message,
  .repository-summary,
  .activity-container,
  .home,
  .dashboard,
  .user.dashboard,
  .user.home,
  .dashboard-navbar,
  .feeds,
  .feed,
  .news,
  .activity,
  .heatmap {
    color: var(--witch-purple);
  }
  
  /* Typography */
  h1, h2, h3, h4, h5, h6, .ui.header {
    font-family: "Griffy", cursive !important;
    font-weight: 400 !important;
    letter-spacing: 1px !important;
    color: var(--witch-plum) !important;
  }
  
  /* Ensure all text is readable - but NOT code syntax highlighting */
  p, li, label {
    color: var(--witch-purple);
  }

  /* Dashboard and Home specific elements */
  .dashboard .ui.header,
  .home .ui.header,
  .dashboard .description,
  .home .description,
  .dashboard-repos .name,
  .dashboard-orgs .name,
  .feeds .title,
  .feeds .content,
  .activity-bar-graph,
  .activity-bar-graph text,
  .activity-bar-graph .activity-bar-graph-label,
  .contribution-calendar text,
  .heatmap-day,
  .milestone-list .content,
  .issue-list .title,
  .issue-list .desc {
    color: var(--witch-purple) !important;
  }
  
  /* Table cells - but not in code views */
  td:not(.lines-code td):not(.lines-num td),
  th:not(.lines-code th) {
    color: var(--witch-purple);
  }
  
  a {
    color: var(--witch-rose) !important;
    transition: all 0.3s ease;
  }
  
  a:hover {
    color: var(--witch-plum) !important;
    text-decoration: underline;
  }
  
  h1, .ui.huge.header {
    text-shadow: 2px 2px 0px var(--witch-rose),
                 3px 3px 6px rgba(168, 87, 126, 0.3);
  }
  
  /* Background Effects */
  body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url(https://cdn.nhcarrigan.com/background.png);
    background-size: cover;
    background-position: center;
    z-index: -2;
    pointer-events: none;
  }
  
  body::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
      radial-gradient(circle at 20% 50%, rgba(168, 87, 126, 0.15) 0%, transparent 60%),
      radial-gradient(circle at 80% 80%, rgba(68, 39, 90, 0.15) 0%, transparent 60%),
      linear-gradient(180deg,
        rgba(10, 0, 9, 0.3) 0%,
        rgba(43, 27, 61, 0.1) 50%,
        rgba(43, 27, 61, 0.2) 100%
      );
    z-index: -1;
    pointer-events: none;
  }
  
  /* Main Content - with margins for fixed nav/footer */
  body {
    padding-top: 52px !important;
    padding-bottom: 120px !important; /* Extra padding for footer clearance */
  }
  
  .page-content, .full.height {
    background: transparent !important;
    padding-top: 10px !important;
    margin-bottom: 150px !important; /* Clear the footer with extra space */
    min-height: calc(100vh - 127px) !important; /* 52px top + 75px footer */
  }

  /* Home page with custom hero section */
  .page-content.home {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 15px !important;
    margin: 20px 20px 150px 20px !important; /* Large bottom margin to clear footer */
    padding: 30px 30px 30px 30px !important; /* No bottom padding extension */
    box-shadow: 0 0 50px rgba(168, 87, 126, 0.15) !important;
  }

  /* Home page inner content wrapper */
  .page-content.home .tw-mb-8,
  .page-content.home > div:first-child {
    background: transparent !important;
    margin-bottom: 30px !important;
  }

  /* Ensure last element in home page has spacing */
  .page-content.home > div:last-child,
  .page-content.home .tw-px-8:last-child {
    margin-bottom: 60px !important;
  }

  /* Dashboard page wrapper */
  .page-content.dashboard,
  .page-content.user.dashboard {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 15px !important;
    margin: 20px 20px 150px 20px !important; /* Large bottom margin to clear footer */
    padding: 30px 30px 30px 30px !important; /* No bottom padding extension */
    box-shadow: 0 0 50px rgba(168, 87, 126, 0.15) !important;
  }
  
  /* Main container backgrounds - TRANSLUCENT so background shows */
  .ui.container {
    background: rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: blur(8px) !important;
    border-radius: 10px !important;
    padding: 20px !important;
    margin-top: 10px !important;
    margin-bottom: 30px !important; /* Increased bottom margin */
    box-shadow: 0 0 40px rgba(168, 87, 126, 0.15) !important;
  }

  /* Last container on page needs extra space */
  .ui.container:last-child {
    margin-bottom: 50px !important;
  }
  
  /* Grid columns should be transparent */
  .ui.grid > .column, .ui.grid > .row > .column {
    background: transparent !important;
  }

  /* Dashboard and Home specific background fixes */
  .dashboard .ui.container,
  .home .ui.container,
  .user.dashboard .ui.container {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(10px) !important;
  }

  /* Dashboard main content area */
  .user.dashboard .ui.container,
  .user.dashboard > .ui.container > .ui.stackable.grid {
    background: transparent !important;
  }

  /* Dashboard content wrapper that needs background */
  .user.dashboard .ui.container .column {
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(8px) !important;
    border-radius: 10px !important;
    padding: 20px !important;
    margin: 5px !important;
  }

  /* Dashboard feed and activity sections */
  .dashboard .feeds,
  .home .news,
  .dashboard .ui.segment,
  .home .ui.segment,
  .activity-feed-box {
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(8px) !important;
    border-radius: 10px !important;
    padding: 15px !important;
    margin: 10px 0 !important;
    box-shadow: 0 0 20px rgba(168, 87, 126, 0.1) !important;
  }
  
  /* Repository/user pages */
  .repository, .user {
    background: transparent !important;
  }

  /* Dashboard and Home main wrappers need backgrounds */
  .dashboard, .home,
  .user.dashboard > .ui.container,
  .dashboard > .ui.container {
    position: relative;
  }

  /* Create background containers for dashboard/home */
  .dashboard > .ui.container > .ui.grid,
  .home > .ui.container > .ui.grid,
  .dashboard .column.fluid,
  .home .column.fluid {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 10px !important;
    padding: 20px !important;
    box-shadow: 0 0 30px rgba(168, 87, 126, 0.12) !important;
  }
  
  /* Header/Navigation - FIXED at top */
  #navbar, .ui.top.secondary.menu.navbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
    height: 52px !important;
    background: linear-gradient(135deg, var(--witch-plum) 0%, var(--witch-purple) 100%) !important;
    box-shadow: 0 5px 20px var(--witch-shadow) !important;
    border: none !important;
  }
  
  /* Nav items - LIGHT text on dark background */
  #navbar .item, #navbar a.item, .ui.secondary.menu .item, .navbar .item {
    color: var(--witch-moon) !important;
    transition: all 0.3s ease;
  }
  
  #navbar .item:hover, #navbar a.item:hover, .ui.secondary.menu .item:hover {
    background-color: rgba(212, 165, 199, 0.3) !important;
    color: white !important;
  }
  
  #navbar .active.item, .ui.secondary.menu .active.item {
    background-color: rgba(212, 165, 199, 0.4) !important;
    color: white !important;
  }
  
  /* Icons in navbar should also be light */
  #navbar .item i, #navbar .item svg, #navbar .item .icon {
    color: var(--witch-moon) !important;
  }

  /* Special styling for Discord link in nav */
  #navbar .discord-link,
  #navbar a[href*="discord"],
  #navbar a[href*="chat.nhcarrigan.com"] {
    background: rgba(212, 165, 199, 0.2) !important;
    border-radius: 8px !important;
    padding: 8px 16px !important;
    margin: 0 5px !important;
    transition: all 0.3s ease !important;
  }

  #navbar .discord-link:hover,
  #navbar a[href*="discord"]:hover,
  #navbar a[href*="chat.nhcarrigan.com"]:hover {
    background: rgba(212, 165, 199, 0.5) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 10px rgba(168, 87, 126, 0.3) !important;
  }

  /* Discord icon if you use one */
  #navbar .discord-link i,
  #navbar a[href*="discord"] i,
  #navbar a[href*="chat.nhcarrigan.com"] i {
    color: var(--witch-lavender) !important;
    margin-right: 5px !important;
  }
  
  /* Repository header */
  .repository.header {
    background: linear-gradient(to right,
      var(--color-menu) 0%,
      rgba(232, 213, 232, 0.5) 100%);
    border-bottom: 2px solid var(--witch-mauve);
  }
  
  /* Buttons */
  .ui.primary.button, .ui.green.button {
    background: linear-gradient(135deg,
      var(--witch-plum) 0%,
      var(--witch-purple) 100%) !important;
    color: var(--witch-moon) !important;
    border: none !important;
    font-family: "Griffy", cursive !important;
    letter-spacing: 1px;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(68, 39, 90, 0.3);
  }
  
  .ui.primary.button:hover, .ui.green.button:hover {
    transform: translateY(-2px) scale(1.05) !important;
    box-shadow: 0 6px 20px rgba(68, 39, 90, 0.4),
                0 0 25px rgba(168, 87, 126, 0.3) !important;
  }
  
  .ui.basic.button {
    border: 2px solid var(--witch-plum) !important;
    color: var(--witch-plum) !important;
    background: transparent !important;
    transition: all 0.3s ease !important;
  }
  
  .ui.basic.button:hover {
    background: var(--witch-lavender) !important;
    color: var(--witch-purple) !important;
    border-color: var(--witch-rose) !important;
    transform: translateY(-1px);
  }
  
  /* Cards & Panels */
  .ui.card, .ui.segment, .dashboard-card {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid var(--witch-mauve) !important;
    box-shadow: 0 4px 20px rgba(168, 87, 126, 0.1),
                0 0 40px rgba(68, 39, 90, 0.05) !important;
    transition: all 0.3s ease;
  }

  /* Dashboard specific cards and boxes */
  .dashboard .ui.repository.list,
  .dashboard .ui.user.list,
  .dashboard .box,
  .home .ui.repository.list,
  .activity.tab,
  .repositories.tab {
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(8px) !important;
    border-radius: 8px !important;
    padding: 15px !important;
    margin: 10px 0 !important;
  }
  
  .ui.card:hover, .dashboard-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(168, 87, 126, 0.15),
                0 0 50px rgba(68, 39, 90, 0.08) !important;
  }
  
  /* Tabs - NOT the main nav styling */
  .ui.tabular.menu {
    background: transparent !important;
    box-shadow: none !important;
  }
  
  .ui.tabular.menu .item {
    color: var(--witch-plum) !important;
    background: transparent !important;
    font-family: "Kalam", cursive !important;
    font-weight: 700;
    transition: all 0.3s ease;
  }
  
  .ui.tabular.menu .item:hover {
    background: rgba(232, 213, 232, 0.3) !important;
    color: var(--witch-purple) !important;
  }
  
  .ui.tabular.menu .active.item {
    background: rgba(255, 255, 255, 0.8) !important;
    color: var(--witch-purple) !important;
    border-color: var(--witch-rose) !important;
    border-bottom: 3px solid var(--witch-rose) !important;
  }
  
  /* Vertical menu should not be dark either */
  .ui.vertical.menu {
    background: rgba(255, 255, 255, 0.85) !important;
  }
  
  .ui.vertical.menu .item {
    color: var(--witch-purple) !important;
  }
  
  /* Forms */
  .ui.input input, .ui.form input, .ui.form textarea {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 2px solid var(--witch-mauve) !important;
    color: var(--witch-purple) !important;
    font-family: "Kalam", cursive !important;
    border-radius: 10px !important;
    transition: all 0.3s ease !important;
  }
  
  .ui.input input:focus, .ui.form input:focus, .ui.form textarea:focus {
    border-color: var(--witch-rose) !important;
    box-shadow: 0 0 0 3px rgba(168, 87, 126, 0.2) !important;
    background: white !important;
  }
  
  /* Labels & Tags */
  .ui.label {
    background: linear-gradient(135deg,
      var(--witch-mauve) 0%,
      var(--witch-lavender) 100%) !important;
    color: var(--witch-purple) !important;
    font-family: "Kalam", cursive !important;
    font-weight: 700;
    border: 1px solid var(--witch-rose);
  }
  
  /* Status Colors */
  .ui.green.label {
    background: linear-gradient(135deg, #7A9779 0%, #5D7A5C 100%) !important;
    color: white !important;
    border: 1px solid #5D7A5C;
  }
  
  .ui.red.label {
    background: linear-gradient(135deg, #A85555 0%, #8B3A3A 100%) !important;
    color: white !important;
    border: 1px solid #8B3A3A;
  }
  
  /* Code Blocks - preserve syntax highlighting */
  
  /* IMPORTANT: Do NOT set color on code elements - let Chroma/Monaco handle it */
  .code-view, .file-view, .lines-code, .code-inner {
    color: unset !important;
  }
  
  /* Gitea's code syntax CSS variables */
  :root {
    /* Code highlighting colors (witchy theme) */
    --color-code-bg: #FDF9FC;
    --color-code-fg: #2B1B3D;
    --color-code-keyword: #44275A;
    --color-code-constant: #4C5B8B;
    --color-code-string: #5D7A5C;
    --color-code-comment: #8A6B78;
    --color-code-number: #4C5B8B;
    --color-code-tag: #A8577E;
    --color-code-attribute: #6B4C7A;
    --color-code-symbol: #8B4567;
    --color-code-class: #8B4567;
    --color-code-function: #A8577E;
    --color-code-variable: #6B4C7A;
    --color-code-operator: #44275A;
    --color-code-builtin: #A8577E;
    --color-code-inserted: #5D7A5C;
    --color-code-deleted: #8B3A3A;
  }
  
  /* Monaco editor (code editing) - light background */
  .monaco-editor,
  .monaco-diff-editor,
  .monaco-component,
  .monaco-editor .monaco-editor-background,
  .monaco-editor .margin,
  .monaco-editor .inputarea.ime-input,
  .monaco-editor .overflow-guard,
  .monaco-editor .lines-content,
  .monaco-editor .view-lines,
  .monaco-editor .minimap,
  .monaco-editor .minimap-slider {
    background: #FDF9FC !important;
    background-color: #FDF9FC !important;
  }
  
  /* Monaco editor text - do NOT set color, let Monaco handle syntax */
  .monaco-editor .view-line {
    background: transparent !important;
  }
  
  /* Monaco editor CSS variables for syntax highlighting */
  .monaco-editor {
    --vscode-editor-background: #FDF9FC !important;
    --vscode-editor-foreground: #2B1B3D !important;
    --vscode-editorLineNumber-foreground: #8A6B78 !important;
    --vscode-editorLineNumber-activeForeground: #44275A !important;
    --vscode-editor-selectionBackground: rgba(168, 87, 126, 0.5) !important;
    --vscode-editor-inactiveSelectionBackground: rgba(168, 87, 126, 0.3) !important;
    --vscode-editor-lineHighlightBackground: rgba(232, 213, 232, 0.4) !important;
    --vscode-editorGutter-background: #FDF9FC !important;
  }
  
  /* ========================================
     CODE EDITOR SELECTION STYLES
     Gitea uses CodeMirror, not Monaco!
     ======================================== */
  
  /* CodeMirror selection - this is what Gitea actually uses */
  .CodeMirror-selected,
  .CodeMirror-focused .CodeMirror-selected,
  .CodeMirror-line::selection,
  .CodeMirror-line > span::selection,
  .CodeMirror-line > span > span::selection {
    background: #A8577E !important;
    color: #FFFFFF !important;
  }
  
  /* CodeMirror cursor */
  .CodeMirror-cursor {
    border-left-color: var(--witch-purple) !important;
  }
  
  /* CodeMirror active line */
  .CodeMirror-activeline-background {
    background: var(--witch-lavender) !important;
  }
  
  /* CodeMirror gutter */
  .CodeMirror-gutters {
    background: #FDF9FC !important;
    border-right-color: var(--witch-mauve) !important;
  }
  
  .CodeMirror-linenumber {
    color: var(--witch-rose) !important;
  }
  
  /* Monaco editor fallback (in case some views use it) */
  .monaco-editor {
    --vscode-editor-selectionBackground: #A8577E !important;
    --vscode-editor-inactiveSelectionBackground: rgba(168, 87, 126, 0.5) !important;
    --vscode-editor-selectionForeground: #FFFFFF !important;
    --vscode-editor-selectionHighlightBackground: rgba(168, 87, 126, 0.4) !important;
  }
  
  /* Monaco selection overlay */
  .monaco-editor .view-overlays .selected-text,
  .monaco-editor .selected-text {
    background-color: #A8577E !important;
    background: #A8577E !important;
    opacity: 1 !important;
  }
  
  /* Native selection fallback for all editors */
  .monaco-editor *::selection,
  .CodeMirror *::selection,
  .code-editor *::selection {
    background-color: #A8577E !important;
    color: #FFFFFF !important;
  }
  
  /* Fix current line highlight in the main content area */
  .monaco-editor .view-overlays .current-line,
  .monaco-editor .current-line {
    background-color: rgba(232, 213, 232, 0.4) !important;
    border: none !important;
  }
  
  /* Fix margin/gutter area - prevent black background on selected line */
  .monaco-editor .margin,
  .monaco-editor .margin-view-overlays {
    background-color: #FDF9FC !important;
  }
  
  .monaco-editor .margin-view-overlays .current-line-margin,
  .monaco-editor .current-line-margin {
    background-color: rgba(232, 213, 232, 0.4) !important;
    border: none !important;
  }
  
  /* Active line number row background */
  .monaco-editor .margin-view-overlays .line-numbers.active-line-number {
    background-color: rgba(232, 213, 232, 0.4) !important;
  }
  
  /* Monaco syntax token colors */
  .monaco-editor .mtk1 { color: #2B1B3D !important; } /* Default text */
  .monaco-editor .mtk2 { color: #8A6B78 !important; } /* Comments */
  .monaco-editor .mtk3 { color: #5D7A5C !important; } /* Strings */
  .monaco-editor .mtk4 { color: #4C5B8B !important; } /* Numbers */
  .monaco-editor .mtk5 { color: #44275A !important; } /* Keywords */
  .monaco-editor .mtk6 { color: #A8577E !important; } /* Functions */
  .monaco-editor .mtk7 { color: #6B4C7A !important; } /* Variables */
  .monaco-editor .mtk8 { color: #8B4567 !important; } /* Types/Classes */
  .monaco-editor .mtk9 { color: #44275A !important; } /* Operators */
  .monaco-editor .mtk10 { color: #A8577E !important; } /* Built-ins */
  .monaco-editor .mtk11 { color: #6B4C7A !important; } /* Attributes */
  .monaco-editor .mtk12 { color: #5D7A5C !important; } /* String escape */
  
  /* Monaco editor gutter/margin */
  .monaco-editor .margin-view-overlays .line-numbers {
    color: #8A6B78 !important;
  }
  
  .monaco-editor .current-line ~ .line-numbers {
    color: #44275A !important;
  }
  
  /* Only style inline code in markdown, not code blocks */
  .markup code,
  .markdown code {
    background: rgba(232, 213, 232, 0.3) !important;
    color: var(--witch-purple) !important;
    font-family: 'Courier New', monospace !important;
    border: 1px solid var(--witch-lavender);
    border-radius: 5px;
    padding: 2px 6px;
  }
  
  /* Code view container - add bottom margin for fixed footer */
  .code-view, .file-view {
    background: rgba(255, 255, 255, 0.95) !important;
    margin-bottom: 80px !important;
    padding-bottom: 20px !important;
  }
  
  /* File content wrapper needs space too */
  .file-content, .view-raw {
    padding-bottom: 100px !important;
  }
  
  /* ========================================
     CHROMA SYNTAX HIGHLIGHTING (Gitea uses this)
     Witchy purple/rose theme
     ======================================== */
  
  /* Code block container - let child elements have their own colors */
  .chroma {
    background: rgba(252, 248, 251, 0.95) !important;
  }
  
  /* Lines of code container */
  .lines-code, .lines-num, .code-inner, .file-view .code {
    background: transparent !important;
  }
  
  /* Individual code cells */
  .lines-code td, .code-inner code {
    color: inherit !important;
  }
  
  /* Error */
  .chroma .err { color: #8B3A3A !important; }
  
  /* Line link, line highlight, line numbers, line table */
  .chroma .lnlinks { outline: none; text-decoration: none; color: inherit; }
  .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
  .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
  .chroma .hl { background-color: rgba(212, 165, 199, 0.3) !important; }
  .chroma .ln, .chroma .lnt { color: #8A6B78 !important; padding: 0 8px; }
  
  /* Keyword */
  .chroma .k { color: #44275A !important; font-weight: bold; }
  .chroma .kc { color: #44275A !important; font-weight: bold; } /* Keyword.Constant */
  .chroma .kd { color: #44275A !important; font-weight: bold; } /* Keyword.Declaration */
  .chroma .kn { color: #44275A !important; font-weight: bold; } /* Keyword.Namespace */
  .chroma .kp { color: #44275A !important; } /* Keyword.Pseudo */
  .chroma .kr { color: #44275A !important; font-weight: bold; } /* Keyword.Reserved */
  .chroma .kt { color: #5B4A6B !important; } /* Keyword.Type */
  
  /* Name */
  .chroma .n { color: var(--witch-purple) !important; }
  .chroma .na { color: #6B4C7A !important; } /* Name.Attribute */
  .chroma .nb { color: #A8577E !important; } /* Name.Builtin */
  .chroma .nc { color: #8B4567 !important; font-weight: bold; } /* Name.Class */
  .chroma .no { color: #6B4C7A !important; } /* Name.Constant */
  .chroma .nd { color: #A8577E !important; } /* Name.Decorator */
  .chroma .ni { color: var(--witch-purple) !important; font-weight: bold; } /* Name.Entity */
  .chroma .ne { color: #8B3A3A !important; font-weight: bold; } /* Name.Exception */
  .chroma .nf { color: #A8577E !important; } /* Name.Function */
  .chroma .nl { color: var(--witch-purple) !important; } /* Name.Label */
  .chroma .nn { color: #44275A !important; } /* Name.Namespace */
  .chroma .nt { color: #44275A !important; font-weight: bold; } /* Name.Tag */
  .chroma .nv { color: #6B4C7A !important; } /* Name.Variable */
  .chroma .bp { color: #A8577E !important; } /* Name.Builtin.Pseudo */
  .chroma .vc { color: #6B4C7A !important; } /* Name.Variable.Class */
  .chroma .vg { color: #6B4C7A !important; } /* Name.Variable.Global */
  .chroma .vi { color: #6B4C7A !important; } /* Name.Variable.Instance */
  .chroma .vm { color: #6B4C7A !important; } /* Name.Variable.Magic */
  
  /* Literal */
  .chroma .l { color: #8B4567 !important; }
  .chroma .ld { color: #5D7A5C !important; } /* Literal.Date */
  .chroma .s { color: #5D7A5C !important; } /* String */
  .chroma .sa { color: #5D7A5C !important; } /* String.Affix */
  .chroma .sb { color: #5D7A5C !important; } /* String.Backtick */
  .chroma .sc { color: #5D7A5C !important; } /* String.Char */
  .chroma .dl { color: #5D7A5C !important; } /* String.Delimiter */
  .chroma .sd { color: #5D7A5C !important; font-style: italic; } /* String.Doc */
  .chroma .s2 { color: #5D7A5C !important; } /* String.Double */
  .chroma .se { color: #8B4567 !important; font-weight: bold; } /* String.Escape */
  .chroma .sh { color: #5D7A5C !important; } /* String.Heredoc */
  .chroma .si { color: #8B4567 !important; } /* String.Interpol */
  .chroma .sx { color: #5D7A5C !important; } /* String.Other */
  .chroma .sr { color: #A8577E !important; } /* String.Regex */
  .chroma .s1 { color: #5D7A5C !important; } /* String.Single */
  .chroma .ss { color: #A8577E !important; } /* String.Symbol */
  
  /* Number */
  .chroma .m { color: #4C5B8B !important; } /* Number */
  .chroma .mb { color: #4C5B8B !important; } /* Number.Bin */
  .chroma .mf { color: #4C5B8B !important; } /* Number.Float */
  .chroma .mh { color: #4C5B8B !important; } /* Number.Hex */
  .chroma .mi { color: #4C5B8B !important; } /* Number.Integer */
  .chroma .il { color: #4C5B8B !important; } /* Number.Integer.Long */
  .chroma .mo { color: #4C5B8B !important; } /* Number.Oct */
  
  /* Operator */
  .chroma .o { color: #44275A !important; } /* Operator */
  .chroma .ow { color: #44275A !important; font-weight: bold; } /* Operator.Word */
  
  /* Punctuation */
  .chroma .p { color: var(--witch-purple) !important; }
  
  /* Comment */
  .chroma .c { color: #8A6B78 !important; font-style: italic; }
  .chroma .ch { color: #8A6B78 !important; font-style: italic; } /* Comment.Hashbang */
  .chroma .cm { color: #8A6B78 !important; font-style: italic; } /* Comment.Multiline */
  .chroma .cp { color: #6B4C7A !important; } /* Comment.Preproc */
  .chroma .cpf { color: #8A6B78 !important; font-style: italic; } /* Comment.PreprocFile */
  .chroma .c1 { color: #8A6B78 !important; font-style: italic; } /* Comment.Single */
  .chroma .cs { color: #8A6B78 !important; font-style: italic; font-weight: bold; } /* Comment.Special */
  
  /* Generic */
  .chroma .gd { color: #8B3A3A !important; background-color: rgba(255, 200, 200, 0.3); } /* Generic.Deleted */
  .chroma .ge { font-style: italic; } /* Generic.Emph */
  .chroma .gr { color: #8B3A3A !important; } /* Generic.Error */
  .chroma .gh { color: #44275A !important; font-weight: bold; } /* Generic.Heading */
  .chroma .gi { color: #5D7A5C !important; background-color: rgba(200, 255, 200, 0.3); } /* Generic.Inserted */
  .chroma .go { color: #8A6B78 !important; } /* Generic.Output */
  .chroma .gp { color: #A8577E !important; font-weight: bold; } /* Generic.Prompt */
  .chroma .gs { font-weight: bold; } /* Generic.Strong */
  .chroma .gu { color: #6B4C7A !important; font-weight: bold; } /* Generic.Subheading */
  .chroma .gt { color: #8B3A3A !important; } /* Generic.Traceback */
  .chroma .gl { text-decoration: underline; } /* Generic.Underline */
  
  /* Also style highlight.js classes in case Gitea uses those */
  .hljs { background: rgba(252, 248, 251, 0.95) !important; }
  .hljs-keyword, .hljs-selector-tag, .hljs-literal { color: #44275A !important; font-weight: bold; }
  .hljs-string, .hljs-doctag { color: #5D7A5C !important; }
  .hljs-number, .hljs-literal { color: #4C5B8B !important; }
  .hljs-comment { color: #8A6B78 !important; font-style: italic; }
  .hljs-function, .hljs-title { color: #A8577E !important; }
  .hljs-class, .hljs-type { color: #8B4567 !important; font-weight: bold; }
  .hljs-variable, .hljs-attr { color: #6B4C7A !important; }
  .hljs-built_in, .hljs-builtin-name { color: #A8577E !important; }
  
  /* Gitea's code-lines styling */
  .code-line {
    background: transparent !important;
  }
  
  /* Make sure span elements INSIDE code views inherit color from parent */
  .code-view span,
  .file-view span,
  .lines-code span,
  .chroma span,
  .hljs span {
    color: inherit;
  }
  
  /* Tables */
  .ui.table {
    border: 1px solid var(--witch-mauve) !important;
  }
  
  .ui.table thead th {
    background: linear-gradient(to right,
      var(--witch-lavender) 0%,
      rgba(232, 213, 232, 0.7) 100%) !important;
    color: var(--witch-purple) !important;
    font-family: "Griffy", cursive !important;
    font-weight: 400;
    letter-spacing: 1px;
  }
  
  .ui.table tbody tr:hover {
    background: rgba(212, 165, 199, 0.1) !important;
  }
  
  /* Scrollbars */
  ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
  }
  
  ::-webkit-scrollbar-track {
    background: var(--witch-lavender);
    border-radius: 6px;
  }
  
  ::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom,
      var(--witch-rose) 0%,
      var(--witch-plum) 100%);
    border-radius: 6px;
    border: 2px solid var(--witch-lavender);
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background: var(--witch-purple);
  }
  
  /* Selection */
  ::selection {
    background: var(--witch-rose) !important;
    color: var(--witch-moon) !important;
  }
  
  /* Footer - FIXED at bottom */
  footer, .page-footer {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
    height: 75px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 20px !important;
    background: linear-gradient(135deg, var(--witch-purple) 0%, var(--witch-plum) 100%) !important;
    color: var(--witch-moon) !important;
    border-top: 2px solid var(--witch-mauve) !important;
    box-shadow: 0 -5px 20px rgba(168, 87, 126, 0.3) !important;
  }
  
  footer *, .page-footer * {
    color: var(--witch-moon) !important;
  }

  
  footer a, .page-footer a {
    color: var(--witch-mauve) !important;
    transition: all 0.3s ease;
  }
  
  footer a:hover, .page-footer a:hover {
    color: white !important;
    text-shadow: 0 0 10px rgba(212, 165, 199, 0.5);
  }
  
  /* Footer links container */
  footer .ui.container, .page-footer .ui.container {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Fun animations */
  @keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
  }
  
  .repository .icon {
    animation: float 6s ease-in-out infinite;
  }
  
  /* Special hover effects */
  .ui.menu .item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--witch-rose);
    transition: all 0.3s ease;
    transform: translateX(-50%);
  }
  
  .ui.menu .item:hover::after {
    width: 80%;
  }
  
  /* Modal overlays */
  .ui.modal {
    background: rgba(255, 255, 255, 0.98) !important;
    border: 2px solid var(--witch-mauve) !important;
    box-shadow: 0 0 60px rgba(168, 87, 126, 0.4),
                0 20px 40px rgba(68, 39, 90, 0.3) !important;
  }
  
  .ui.dimmer {
    background: rgba(10, 0, 9, 0.8) !important;
    backdrop-filter: blur(5px);
  }
  
  /* Sidebar/Vertical Menu - already styled above, just active state */
  .ui.vertical.menu .active.item {
    background: var(--witch-lavender) !important;
    color: var(--witch-plum) !important;
    border-left: 3px solid var(--witch-rose) !important;
  }
  
  /* Dropdown menus - INCLUDING navbar dropdowns */
  .ui.dropdown .menu,
  #navbar .ui.dropdown .menu,
  .ui.top.secondary.menu .ui.dropdown .menu {
    background: rgba(255, 255, 255, 0.98) !important;
    border: 1px solid var(--witch-mauve) !important;
    box-shadow: 0 4px 20px rgba(168, 87, 126, 0.2) !important;
  }
  
  .ui.dropdown .menu .item,
  #navbar .ui.dropdown .menu .item,
  .ui.top.secondary.menu .ui.dropdown .menu .item {
    color: var(--witch-purple) !important;
    background: transparent !important;
  }
  
  .ui.dropdown .menu .item:hover,
  #navbar .ui.dropdown .menu .item:hover,
  .ui.top.secondary.menu .ui.dropdown .menu .item:hover {
    background: var(--witch-lavender) !important;
    color: var(--witch-plum) !important;
  }
  
  /* Dropdown menu text must be dark */
  .ui.dropdown .menu .item *,
  #navbar .ui.dropdown .menu .item * {
    color: var(--witch-purple) !important;
  }
  
  .ui.dropdown .menu .item:hover *,
  #navbar .ui.dropdown .menu .item:hover * {
    color: var(--witch-plum) !important;
  }
  
  /* Message/alert boxes */
  .ui.message {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid var(--witch-mauve) !important;
    color: var(--witch-purple) !important;
  }
  
  .ui.info.message {
    background: rgba(232, 213, 232, 0.5) !important;
    border-color: var(--witch-rose) !important;
  }
  
  .ui.warning.message {
    background: rgba(255, 243, 205, 0.8) !important;
    border-color: var(--color-warning) !important;
  }
  
  .ui.error.message, .ui.negative.message {
    background: rgba(255, 230, 230, 0.8) !important;
    border-color: var(--color-danger) !important;
  }
  
  .ui.success.message, .ui.positive.message {
    background: rgba(230, 255, 230, 0.8) !important;
    border-color: var(--color-success) !important;
  }
  
  /* List items */
  .ui.list .item, .ui.list .item .content {
    color: var(--witch-purple) !important;
  }
  
  /* Breadcrumbs */
  .ui.breadcrumb {
    color: var(--witch-plum) !important;
  }
  
  .ui.breadcrumb a {
    color: var(--witch-rose) !important;
  }
  
  .ui.breadcrumb .divider {
    color: var(--witch-mauve) !important;
  }

  /* Home page hero section */
  .page-content.home .center,
  .page-content.home .hero {
    color: var(--witch-purple) !important;
  }

  .page-content.home .hero h1,
  .page-content.home .hero h2 {
    color: var(--witch-plum) !important;
  }

  .page-content.home .hero p,
  .page-content.home .hero li {
    color: var(--witch-purple) !important;
  }

  /* Ensure all home page text is visible */
  .page-content.home p,
  .page-content.home ul,
  .page-content.home li,
  .page-content.home h1,
  .page-content.home h2 {
    color: var(--witch-purple) !important;
  }

  /* Home page content wrapper needs bottom spacing */
  .page-content.home .tw-mb-8 {
    margin-bottom: 60px !important;
  }

  .page-content.home .center {
    margin-bottom: 40px !important;
  }

  .page-content.home .hero {
    margin-bottom: 40px !important;
  }

  /* Ensure home page has minimum height and proper spacing */
  .page-content.home {
    min-height: calc(100vh - 127px) !important;
    margin-bottom: 150px !important; /* Clear footer without internal padding */
  }

  /* Universal bottom spacing for all page content */
  .page-content > *:last-child {
    margin-bottom: 40px !important;
  }

  /* Ensure no content is hidden behind footer */
  .page-content {
    margin-bottom: 150px !important;
  }

  /* Home page specific list spacing */
  .page-content.home ul {
    margin-bottom: 30px !important;
  }

  .page-content.home ul:last-child {
    margin-bottom: 60px !important;
  }

  /* Force bottom clearance with pseudo-element */
  .page-content::after {
    content: "";
    display: block;
    height: 100px;
    clear: both;
  }

  .page-content.home::after,
  .page-content.dashboard::after {
    height: 120px;
  }

  /* Tooltips and Hover Text */
  .tooltip, .ui.tooltip, .ui.popup,
  [data-tooltip]::after,
  [data-tooltip]::before,
  .tippy-box {
    background: rgba(43, 27, 61, 0.95) !important;
    color: var(--witch-moon) !important;
    border: 1px solid var(--witch-mauve) !important;
    box-shadow: 0 4px 20px rgba(168, 87, 126, 0.3) !important;
  }

  /* Tooltip arrows */
  .tooltip::before, .ui.tooltip::before,
  .ui.popup::before,
  .tippy-arrow {
    background: rgba(43, 27, 61, 0.95) !important;
    border-color: var(--witch-mauve) !important;
  }

  /* Ensure tooltip text is visible */
  .tooltip *, .ui.tooltip *,
  .ui.popup *, .tippy-content,
  [data-tooltip]::after {
    color: var(--witch-moon) !important;
  }

  /* Hover states for elements with tooltips */
  [data-tooltip]:hover::after,
  [data-tooltip]:hover::before {
    background: rgba(43, 27, 61, 0.95) !important;
    color: var(--witch-moon) !important;
  }

  /* Title attributes on hover */
  [title]:hover::after {
    background: rgba(43, 27, 61, 0.95) !important;
    color: var(--witch-moon) !important;
    padding: 6px 10px !important;
    border-radius: 6px !important;
    border: 1px solid var(--witch-mauve) !important;
  }

  /* Semantic UI specific tooltip */
  .ui.inverted.popup,
  .ui.inverted.tooltip {
    background: rgba(43, 27, 61, 0.98) !important;
    color: var(--witch-moon) !important;
    box-shadow: 0 6px 25px rgba(168, 87, 126, 0.4) !important;
  }

  .ui.inverted.popup::before {
    background: rgba(43, 27, 61, 0.98) !important;
  }

  /* Dropdown hover items should also be readable */
  .ui.dropdown .menu .item:hover {
    background: var(--witch-lavender) !important;
    color: var(--witch-purple) !important;
  }

  /* Hover cards and info boxes */
  .hover-card, .hover-box,
  .user-card, .repo-card,
  .hover-info, .info-popup {
    background: rgba(255, 255, 255, 0.98) !important;
    color: var(--witch-purple) !important;
    border: 2px solid var(--witch-mauve) !important;
    box-shadow: 0 8px 30px rgba(168, 87, 126, 0.3) !important;
  }

  .hover-card *, .hover-box *,
  .user-card *, .repo-card * {
    color: var(--witch-purple) !important;
  }

  .hover-card a, .hover-box a,
  .user-card a, .repo-card a {
    color: var(--witch-rose) !important;
  }

  /* Gitea specific tooltips */
  .tippy-box[data-theme="tooltip"] {
    background: rgba(43, 27, 61, 0.95) !important;
    color: var(--witch-moon) !important;
  }

  .tippy-box[data-theme="tooltip"] .tippy-content {
    color: var(--witch-moon) !important;
  }

  /* Activity heatmap tooltips */
  .activity-heatmap .tooltip,
  .heatmap .tooltip,
  .contribution-tooltip {
    background: rgba(43, 27, 61, 0.95) !important;
    color: var(--witch-moon) !important;
    border: 1px solid var(--witch-rose) !important;
    padding: 8px 12px !important;
    border-radius: 6px !important;
  }

  /* Footer dropdown styling removed - no longer needed */