/**
 * SEOFUXX - App CSS
 * Basiert auf seo-aura-builder/src/index.css
 * Konvertiert für PHP-Projekt (ohne @apply Direktiven)
 * 
 * @version 1.0.0
 * @last-modified 03.02.2026
 */

/* ============================================
   CSS VARIABLES (Dark Purple/Magenta SEO theme)
   ============================================ */
:root {
      /* Core Colors */
      --background: 230 25% 10%;
      --foreground: 0 0% 95%;

      --card: 230 25% 13%;
      --card-foreground: 0 0% 95%;

      --popover: 230 25% 13%;
      --popover-foreground: 0 0% 95%;

      --primary: 280 70% 55%;
      --primary-foreground: 0 0% 100%;

      --secondary: 280 50% 40%;
      --secondary-foreground: 0 0% 95%;

      --muted: 230 20% 18%;
      --muted-foreground: 230 10% 55%;

      --accent: 280 60% 45%;
      --accent-foreground: 0 0% 95%;

      --destructive: 0 72% 51%;
      --destructive-foreground: 0 0% 98%;

      --border: 230 20% 20%;
      --input: 230 20% 18%;
      --ring: 280 70% 55%;

      --radius: 0.5rem;

      /* Glass effect tokens */
      --glass-bg: 230 25% 15% / 0.7;
      --glass-bg-input: 230 25% 12% / 0.8;
      --glass-border: 280 70% 55% / 0.25;
      --glass-glow: 280 70% 55% / 0.15;

      /* Gradient tokens */
      --gradient-primary: linear-gradient(135deg, hsl(280 70% 55%), hsl(300 70% 45%));
      --gradient-glass: linear-gradient(135deg, hsl(230 25% 18% / 0.8), hsl(230 25% 12% / 0.6));
      --gradient-hero: radial-gradient(ellipse at top, hsl(280 70% 55% / 0.15), transparent 50%);
      --gradient-glow: radial-gradient(circle, hsl(280 70% 55% / 0.3), transparent 70%);

      /* Shadow tokens */
      --shadow-glass: 0 8px 32px hsl(0 0% 0% / 0.4), inset 0 1px 0 hsl(280 70% 55% / 0.1);
      --shadow-glow: 0 0 40px hsl(280 70% 55% / 0.25);
      --shadow-card: 0 4px 24px hsl(0 0% 0% / 0.5);

      /* Sidebar tokens */
      --sidebar-background: 230 25% 8%;
      --sidebar-foreground: 0 0% 95%;
      --sidebar-primary: 280 70% 55%;
      --sidebar-primary-foreground: 0 0% 100%;
      --sidebar-accent: 230 20% 18%;
      --sidebar-accent-foreground: 0 0% 95%;
      --sidebar-border: 230 20% 20%;
      --sidebar-ring: 280 70% 55%;

      /* Sidebar dimensions */
      --sidebar-width: 240px;
      --sidebar-width-icon: 72px;
}

/* Light Mode Variables */
html[data-theme="light"] {
      /* Core Colors */
      --background: 0 0% 100%;
      --foreground: 230 25% 10%;

      --card: 0 0% 98%;
      --card-foreground: 230 25% 10%;

      --popover: 0 0% 98%;
      --popover-foreground: 230 25% 10%;

      --primary: 280 70% 55%;
      --primary-foreground: 0 0% 100%;

      --secondary: 280 50% 70%;
      --secondary-foreground: 230 25% 10%;

      --muted: 230 10% 95%;
      --muted-foreground: 230 10% 40%;

      --accent: 280 60% 90%;
      --accent-foreground: 230 25% 10%;

      --destructive: 0 72% 51%;
      --destructive-foreground: 0 0% 98%;

      --border: 230 15% 85%;
      --input: 230 10% 95%;
      --ring: 280 70% 55%;

      /* Glass effect tokens */
      --glass-bg: 0 0% 100% / 0.7;
      --glass-bg-input: 0 0% 98% / 0.9;
      --glass-border: 280 70% 55% / 0.2;
      --glass-glow: 280 70% 55% / 0.1;

      /* Gradient tokens */
      --gradient-primary: linear-gradient(135deg, hsl(280 70% 55%), hsl(300 70% 45%));
      --gradient-glass: linear-gradient(135deg, hsl(0 0% 100% / 0.9), hsl(0 0% 98% / 0.7));
      --gradient-hero: radial-gradient(ellipse at top, hsl(280 70% 55% / 0.08), transparent 50%);
      --gradient-glow: radial-gradient(circle, hsl(280 70% 55% / 0.15), transparent 70%);

      /* Shadow tokens */
      --shadow-glass: 0 8px 32px hsl(0 0% 0% / 0.1), inset 0 1px 0 hsl(280 70% 55% / 0.05);
      --shadow-glow: 0 0 40px hsl(280 70% 55% / 0.15);
      --shadow-card: 0 4px 24px hsl(0 0% 0% / 0.1);

      /* Sidebar tokens */
      --sidebar-background: 230 10% 92%;
      --sidebar-foreground: 230 25% 15%;
      --sidebar-primary: 280 70% 55%;
      --sidebar-primary-foreground: 0 0% 100%;
      --sidebar-accent: 230 15% 95%;
      --sidebar-accent-foreground: 230 25% 15%;
      --sidebar-border: 230 15% 85%;
      --sidebar-ring: 280 70% 55%;
}

/* ============================================
   BASE STYLES
   ============================================ */
* {
      border-color: hsl(var(--border));
}

body {
      background-color: hsl(var(--background));
      color: hsl(var(--foreground));
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      font-family: 'Inter', 'Outfit', sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
      font-family: 'Outfit', 'Space Grotesk', sans-serif;
}

/* ============================================
   COMPONENT STYLES
   ============================================ */

/* --- Glass Card --- */
.glass-card {
      position: relative;
      overflow: hidden;
      border-radius: 0.75rem;
      border-width: 1px;
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      background: var(--gradient-glass);
      border-color: hsl(var(--glass-border));
      box-shadow: var(--shadow-glass);
}

.glass-card::before {
      content: '';
      position: absolute;
      inset: 0;
      opacity: 0.3;
      background: var(--gradient-hero);
      pointer-events: none;
}

/* --- Glass Input --- */
.glass-input {
      position: relative;
      border-radius: 0.5rem;
      border-width: 1px;
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      padding: 0.75rem 1rem;
      transition: all 0.3s ease;
      background: hsl(var(--glass-bg-input));
      border-color: hsl(var(--glass-border));
      color: hsl(var(--foreground));
}

.glass-input:focus {
      outline: none;
      box-shadow:
            0 0 0 2px hsl(var(--ring)),
            var(--shadow-glow);
      border-color: hsl(var(--primary));
}

/* --- Remove number input arrows/spinners --- */
/* Chrome, Safari, Edge, Opera */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
}

/* Firefox */
input[type=number] {
      -moz-appearance: textfield;
}

/* --- Gradient Text --- */
.gradient-text {
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
      background-image: var(--gradient-primary);
}

/* --- Gradient Primary Modern (Card Headers) --- */
.bg-gradient-primary-modern {
      background: var(--gradient-primary) !important;
      box-shadow: var(--shadow-glow);
}

/* --- Glow Effect --- */
.glow-effect {
      position: relative;
}

.glow-effect::after {
      content: '';
      position: absolute;
      inset: -4px;
      z-index: -10;
      border-radius: 0.75rem;
      opacity: 0.4;
      filter: blur(24px);
      background: var(--gradient-primary);
}

/* --- Hero Glow --- */
.hero-glow {
      position: absolute;
      z-index: -10;
      opacity: 0.2;
      filter: blur(48px);
      background: var(--gradient-glow);
}

/* --- Stat Card --- */
.stat-card {
      position: relative;
      overflow: hidden;
      border-radius: 0.75rem;
      border-width: 1px;
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      background: linear-gradient(135deg, hsl(var(--glass-bg)), hsl(230 25% 10% / 0.5));
      border-color: hsl(var(--glass-border));
      box-shadow: var(--shadow-glass);
      padding: 1.5rem;
      text-align: center;
      transition: all 0.3s ease;
}

.stat-card:hover {
      /* transform: scale(1.05); */
      box-shadow: var(--shadow-glow), var(--shadow-glass);
}

/* --- Feature Icon --- */
.feature-icon {
      display: flex;
      height: 3rem;
      width: 3rem;
      align-items: center;
      justify-content: center;
      border-radius: 0.5rem;
      background: var(--gradient-primary);
      box-shadow: var(--shadow-glow);
}

/* --- Navigation Link --- */
.nav-link {
      position: relative;
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding: 0.75rem 1rem;
      border-radius: 0.5rem;
      color: hsl(var(--muted-foreground));
      transition: all 0.2s ease;
}

.nav-link:hover {
      color: hsl(var(--foreground));
      background-color: hsl(var(--muted) / 0.5);
}

.nav-link.active {
      color: hsl(var(--primary));
      background-color: hsl(var(--primary) / 0.1);
}

/* --- Primary Button --- */
.primary-button {
      position: relative;
      overflow: hidden;
      border-radius: 0.5rem;
      padding: 0.75rem 1.5rem;
      font-weight: 600;
      color: hsl(var(--primary-foreground));
      transition: all 0.3s ease;
      background: var(--gradient-primary);
      box-shadow: var(--shadow-glow);
      border: none;
      cursor: pointer;
}

.primary-button:hover {
      /* transform: scale(1.05); */
      box-shadow: 0 0 50px hsl(280 70% 55% / 0.4);
}

/* --- Secondary Button --- */
.secondary-button {
      border-radius: 0.5rem;
      border-width: 1px;
      padding: 0.75rem 1.5rem;
      font-weight: 600;
      transition: all 0.3s ease;
      border-color: hsl(var(--primary));
      color: hsl(var(--primary));
      background: transparent;
      cursor: pointer;
}

.secondary-button:hover {
      background-color: hsl(var(--primary));
      color: hsl(var(--primary-foreground));
}

/* ============================================
   SIDEBAR STYLES (nach seo-aura-builder)
   ============================================ */
.sidebar-nav {
      position: fixed;
      left: 0;
      top: 0;
      z-index: 40;
      height: 100vh;
      border-right: 1px solid hsl(var(--border));
      background-color: hsl(var(--sidebar-background));
      transition: all 0.3s ease;
      width: var(--sidebar-width);
      display: flex;
      flex-direction: column;
}

/* Collapsed State */
body.sidebar-collapsed .sidebar-nav {
      width: var(--sidebar-width-icon);
}

/* --- Sidebar Header --- */
.sidebar-header {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding: 1rem;
      border-bottom: 1px solid hsl(var(--border));
}

.sidebar-logo {
      display: flex;
      height: 2.5rem;
      width: 2.5rem;
      flex-shrink: 0;
      align-items: center;
      justify-content: center;
      border-radius: 0.5rem;
      background: var(--gradient-primary);
      box-shadow: var(--shadow-glow);
}

.sidebar-brand {
      font-family: 'Outfit', 'Space Grotesk', sans-serif;
      font-size: 1.25rem;
      font-weight: 700;
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
      background-image: var(--gradient-primary);
      white-space: nowrap;
      overflow: hidden;
      transition:
            opacity 0.3s ease,
            width 0.3s ease;
}

body.sidebar-collapsed .sidebar-brand {
      opacity: 0;
      width: 0;
}

/* --- Sidebar Navigation --- */
.sidebar-menu {
      flex: 1;
      padding: 0.75rem;
      overflow-y: auto;
}

/* .sidebar-menu-item {
      margin-bottom: 0.25rem;
} */

.sidebar-menu-link {
      position: relative;
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding: 0.75rem 1rem;
      border-radius: 0.5rem;
      color: hsl(var(--muted-foreground));
      transition: all 0.2s ease;
      text-decoration: none;
}

.sidebar-menu-link:hover {
      color: hsl(var(--foreground));
      background-color: hsl(var(--muted) / 0.5);
}

.sidebar-menu-link.active {
      color: hsl(var(--primary));
      background-color: hsl(var(--primary) / 0.1);
}

.sidebar-menu-link i,
.sidebar-menu-link .sidebar-icon {
      width: 1.25rem;
      height: 1.25rem;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: color 0.2s ease;
}

.sidebar-menu-link:hover i,
.sidebar-menu-link:hover .sidebar-icon {
      color: hsl(var(--primary));
}

.sidebar-menu-text {
      white-space: nowrap;
      overflow: hidden;
      transition:
            opacity 0.3s ease,
            width 0.3s ease;
}

body.sidebar-collapsed .sidebar-menu-text {
      opacity: 0;
      width: 0;
}

body.sidebar-collapsed .sidebar-menu-link {
      justify-content: center;
      padding: 0.75rem;
}

/* --- Sidebar Footer --- */
.sidebar-footer {
      padding: 0.75rem;
      border-top: 1px solid hsl(var(--border));
}

/* --- Sidebar User Area --- */
.sidebar-user {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding: 0.75rem;
      border-radius: 0.5rem;
      cursor: pointer;
      transition: background-color 0.2s ease;
}

.sidebar-user:hover {
      background-color: hsl(var(--muted) / 0.5);
}

.sidebar-user-avatar {
      width: 2.5rem;
      height: 2.5rem;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: var(--gradient-primary);
      color: hsl(var(--primary-foreground));
      font-weight: 600;
}

.sidebar-user-info {
      overflow: hidden;
      transition:
            opacity 0.3s ease,
            width 0.3s ease;
}

body.sidebar-collapsed .sidebar-user-info {
      opacity: 0;
      width: 0;
}

body.sidebar-collapsed .sidebar-user {
      justify-content: center;
}

.sidebar-user-name {
      font-weight: 500;
      color: hsl(var(--foreground));
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
}

.sidebar-user-email {
      font-size: 0.75rem;
      color: hsl(var(--muted-foreground));
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
}

/* --- Sidebar Toggle Button --- */
.sidebar-toggle {
      position: absolute;
      right: -12px;
      top: 5rem;
      z-index: 50;
      display: flex;
      height: 1.5rem;
      width: 1.5rem;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      border: 1px solid hsl(var(--border));
      background-color: hsl(var(--card));
      color: hsl(var(--muted-foreground));
      cursor: pointer;
      transition:
            background-color 0.2s ease,
            color 0.2s ease;
}

.sidebar-toggle:hover {
      background-color: hsl(var(--muted));
      color: hsl(var(--foreground));
}

/* --- Sidebar Badge --- */
.sidebar-badge {
      position: absolute;
      top: 0.5rem;
      right: 0.5rem;
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 1.25rem;
      height: 1.25rem;
      padding: 0 0.25rem;
      font-size: 0.625rem;
      font-weight: 600;
      border-radius: 9999px;
      background: var(--gradient-primary);
      color: hsl(var(--primary-foreground));
}

body.sidebar-collapsed .sidebar-badge {
      top: 0.25rem;
      right: 0.25rem;
}

/* ============================================
   MAIN CONTENT LAYOUT
   ============================================ */
.main-content {
      margin-left: var(--sidebar-width);
      min-height: 100vh;
      transition: margin-left 0.3s ease;
}

body.sidebar-collapsed .main-content {
      margin-left: var(--sidebar-width-icon);
}

/* ============================================
   PAGE FOOTER
   ============================================ */
#footer {
      margin-left: var(--sidebar-width);
      transition: margin-left 0.3s ease;
}

body.sidebar-collapsed #footer {
      margin-left: var(--sidebar-width-icon);
}

/* ============================================
   MOBILE STYLES
   ============================================ */
@media (max-width: 768px) {
      .sidebar-nav {
            transform: translateX(-100%);
            width: var(--sidebar-width);
      }

      .sidebar-nav.mobile-open {
            transform: translateX(0);
      }

      .main-content {
            margin-left: 0;
      }

      body.sidebar-collapsed .main-content {
            margin-left: 0;
      }

      #footer {
            margin-left: 0;
      }

      body.sidebar-collapsed #footer {
            margin-left: 0;
      }

      .sidebar-mobile-trigger {
            display: flex;
            position: fixed;
            top: 1rem;
            left: 1rem;
            z-index: 30;
            height: 2.5rem;
            width: 2.5rem;
            align-items: center;
            justify-content: center;
            border-radius: 0.5rem;
            background-color: hsl(var(--card));
            border: 1px solid hsl(var(--border));
            color: hsl(var(--foreground));
            cursor: pointer;
      }

      .sidebar-mobile-overlay {
            display: none;
            position: fixed;
            inset: 0;
            z-index: 35;
            background-color: hsl(0 0% 0% / 0.5);
      }

      .sidebar-mobile-overlay.show {
            display: block;
      }
}

@media (min-width: 769px) {
      .sidebar-mobile-trigger {
            display: none;
      }

      .sidebar-mobile-overlay {
            display: none;
      }
}

/* ============================================
   HEADLINE STYLES
   ============================================ */
.bw-headline {
      font-family: 'Outfit', 'Space Grotesk', sans-serif;
      font-size: 1.5rem;
      font-weight: 700;
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
      background-image: var(--gradient-primary);
}

h1.gradient-text,
h2.gradient-text {
      font-family: 'Outfit', 'Space Grotesk', sans-serif;
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
      background-image: var(--gradient-primary);
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.bg-background {
      background-color: hsl(var(--background));
}

.bg-card {
      background-color: hsl(var(--card));
}

.bg-muted {
      background-color: hsl(var(--muted));
}

.bg-primary {
      background-color: hsl(var(--primary));
}

.text-foreground {
      color: hsl(var(--foreground));
}

.text-muted-foreground {
      color: hsl(var(--muted-foreground));
}

.text-primary {
      color: hsl(var(--primary));
}

.border-border {
      border-color: hsl(var(--border));
}

.border-glass-border {
      border-color: hsl(var(--glass-border));
}

.bg-sidebar {
      background-color: hsl(var(--sidebar-background));
}

.text-foreground-muted {
      color: hsl(var(--muted-foreground));
}

/* Social Icons */
.social-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 2.5rem;
      height: 2.5rem;
      border-radius: 0.5rem;
      background-color: hsl(var(--muted));
      color: hsl(var(--muted-foreground));
      transition: all 0.2s ease;
}

.social-icon:hover {
      background-color: hsl(var(--primary));
      color: hsl(var(--primary-foreground));
}

/* Pulse Badge für Hero */
.pulse-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem 1rem;
      border-radius: 9999px;
      background-color: hsl(var(--primary) / 0.1);
      border: 1px solid hsl(var(--primary) / 0.3);
}

.pulse-dot {
      width: 0.5rem;
      height: 0.5rem;
      border-radius: 50%;
      background-color: hsl(var(--primary));
      animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
      0%,
      100% {
            opacity: 1;
            transform: scale(1);
      }
      50% {
            opacity: 0.5;
            transform: scale(1.2);
      }
}

/* Fade-in Animations */
.fade-in-up {
      opacity: 0;
      transform: translateY(20px);
      animation: fadeInUp 0.6s ease forwards;
}

.fade-in-up.delay-100 {
      animation-delay: 0.1s;
}
.fade-in-up.delay-200 {
      animation-delay: 0.2s;
}
.fade-in-up.delay-300 {
      animation-delay: 0.3s;
}
.fade-in-up.delay-400 {
      animation-delay: 0.4s;
}

@keyframes fadeInUp {
      to {
            opacity: 1;
            transform: translateY(0);
      }
}

/* ============================================
   USER MODAL STYLES
   ============================================ */
.sidebar-user-modal {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 99998;
      display: none;
      align-items: center;
      justify-content: center;
      animation: modalFadeIn 0.2s ease-out;
}

.sidebar-user-modal.show {
      display: flex;
}

@keyframes modalFadeIn {
      from {
            opacity: 0;
      }
      to {
            opacity: 1;
      }
}

@keyframes modalSlideUp {
      from {
            opacity: 0;
            transform: translateY(20px) scale(0.95);
      }
      to {
            opacity: 1;
            transform: translateY(0) scale(1);
      }
}

.sidebar-user-modal-content {
      background: hsl(var(--card));
      border: 1px solid hsl(var(--border));
      border-radius: 1rem;
      width: 480px;
      max-width: 95vw;
      min-height: 500px;
      box-shadow:
            0 20px 60px rgba(0, 0, 0, 0.4),
            0 8px 32px rgba(0, 0, 0, 0.3);
      overflow: hidden;
      animation: modalSlideUp 0.3s ease-out;
      max-height: 90vh;
      overflow-y: auto;
      z-index: 99999;
}

.sidebar-user-modal-header {
      background: linear-gradient(135deg, hsl(var(--sidebar-accent)) 0%, hsl(230 25% 18%) 100%);
      border-bottom: 1px solid hsl(var(--border));
      display: flex;
      align-items: center;
      gap: 1.25rem;
      position: relative;
      overflow: hidden;
}

.sidebar-user-modal-avatar {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: transparent;
      color: hsl(var(--primary-foreground));
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 20px;
      border: 2px solid hsl(var(--border));
      flex-shrink: 0;
      overflow: hidden;
}

.sidebar-user-modal-info {
      flex: 1;
      min-width: 0;
}

.sidebar-user-modal-info h3 {
      margin: 0 0 0.5rem 0;
      font-size: 18px;
      font-weight: 600;
      color: hsl(var(--foreground));
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
}

.sidebar-user-modal-info p {
      margin: 0;
      font-size: 14px;
      color: hsl(var(--muted-foreground));
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
}

.sidebar-user-modal-form {
      border-bottom: 1px solid hsl(var(--border));
}

.sidebar-form-submit {
      width: 100%;
      padding: 1rem 1.25rem;
      background: var(--gradient-primary);
      border: none;
      border-radius: 0.75rem;
      color: hsl(var(--primary-foreground));
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.75rem;
      margin-top: 2rem;
}

.sidebar-form-submit:hover {
      /* transform: translateY(-2px); */
      box-shadow: var(--shadow-glow);
}

.sidebar-user-modal-menu {
}

.sidebar-user-modal-item {
      display: flex;
      align-items: center;
      gap: 1rem;
      padding: 1rem 1.25rem;
      color: hsl(var(--foreground));
      text-decoration: none;
      transition: all 0.2s ease;
      cursor: pointer;
      border: none;
      background: none;
      width: 100%;
      text-align: left;
      font-size: 15px;
      font-weight: 500;
      border-radius: 0.75rem;
      margin-bottom: 0.5rem;
      position: relative;
      overflow: hidden;
}

.sidebar-user-modal-item:hover {
      background: hsl(var(--muted));
      text-decoration: none;
}

.sidebar-user-modal-item i {
      width: 20px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      flex-shrink: 0;
      opacity: 0.8;
}

.sidebar-user-modal-item:hover i {
      opacity: 1;
}

.sidebar-user-modal-divider {
      height: 1px;
      background: hsl(var(--border));
}

.sidebar-user-modal .social-icons {
      margin: 20px 0;
      text-align: center;
}

.sidebar-user-modal .social-icons a.icon {
      border: 1px solid #ccc;
      border-radius: 20%;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      margin: 0 3px;
      width: 40px;
      height: 40px;
      text-decoration: none;
      color: inherit;
}

.sidebar-user-modal .social-icons a.icon:hover {
      background-color: rgba(225, 93, 16, 0.1);
      border-color: var(--color_orange);
      color: var(--color_orange);
}

@media (max-width: 768px) {
      .sidebar-user-modal-content {
            width: 95vw;
            min-height: auto;
      }
}

/* ============================================
   PIE CHART / PROGRESS CIRCLE STYLES
   Migriert aus _obsolete/css/style.css
   ============================================ */
@property --p {
      syntax: '<number>';
      inherits: true;
      initial-value: 0;
}

.pie {
      --p: 20;
      --b: 22px;
      --c: hsl(var(--primary));
      --w: 110px;

      width: var(--w);
      aspect-ratio: 1;
      position: relative;
      display: inline-grid;
      margin: 5px;
      place-content: center;
      font-size: 25px;
      font-weight: bold;
      font-family: 'Outfit', sans-serif;
      color: hsl(var(--foreground));
}

.pie:before,
.pie:after {
      content: '';
      position: absolute;
      border-radius: 50%;
}

.pie:before {
      inset: 0;
      background:
            radial-gradient(farthest-side, var(--c) 98%, #0000) top/var(--b) var(--b) no-repeat,
            conic-gradient(var(--c) calc(var(--p) * 1%), #0000 0);
      -webkit-mask: radial-gradient(farthest-side, #0000 calc(99% - var(--b)), #000 calc(100% - var(--b)));
      mask: radial-gradient(farthest-side, #0000 calc(99% - var(--b)), #000 calc(100% - var(--b)));
}

.pie:after {
      inset: calc(50% - var(--b) / 2);
      background: var(--c);
      transform: rotate(calc(var(--p) * 3.6deg)) translateY(calc(50% - var(--w) / 2));
}

.pie.animate {
      animation: pie-animation 1s 0.5s both;
}

@keyframes pie-animation {
      from {
            --p: 0;
      }
}

/* Pie Chart Farb-Varianten */
.pie.pie-success {
      --c: hsl(142 71% 45%);
}

.pie.pie-warning {
      --c: hsl(45 93% 47%);
}

.pie.pie-danger {
      --c: hsl(0 72% 51%);
}

/* Pie Chart für gecachte/vorherige Werte (grau) */
.pie.pie-cached {
      --c: hsl(var(--muted-foreground));
      opacity: 0.1;
}

.pie.pie-cached:not(.animate) {
      animation: none;
}

/* ============================================
   BADGE STYLES für Analyse-Ausgaben
   ============================================ */
.badge {
      display: inline-flex;
      align-items: center;
      gap: 0.375rem;
      padding: 0.25rem 0.75rem;
      border-radius: 9999px;
      font-size: 0.75rem;
      font-weight: 500;
      line-height: 1.25;
      white-space: nowrap;
      transition: all 0.2s ease;
}

/* Badge Varianten */
.badge-primary {
      background: hsl(var(--primary) / 0.15);
      color: hsl(var(--primary));
      border: 1px solid hsl(var(--primary) / 0.3);
}

.badge-success {
      background: hsl(142 71% 45% / 0.15);
      color: hsl(142 71% 45%);
      border: 1px solid hsl(142 71% 45% / 0.3);
}

.badge-warning {
      background: hsl(45 93% 47% / 0.15);
      color: hsl(45 93% 47%);
      border: 1px solid hsl(45 93% 47% / 0.3);
}

.badge-danger {
      background: hsl(0 72% 51% / 0.15);
      color: hsl(0 72% 51%);
      border: 1px solid hsl(0 72% 51% / 0.3);
}

.badge-muted {
      background: hsl(var(--muted) / 0.5);
      color: hsl(var(--muted-foreground));
      border: 1px solid hsl(var(--border));
}

.badge-outline {
      background: transparent;
      color: hsl(var(--foreground));
      border: 1px solid hsl(var(--border));
}

/* Badge mit Icon */
.badge i,
.badge svg {
      width: 0.875rem;
      height: 0.875rem;
      flex-shrink: 0;
}

/* ============================================
   ANALYSIS RESULT ROW STYLES
   ============================================ */
.result-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0;
      cursor: default;
}

.result-row:last-child {
      border-bottom: none;
}

.result-label {
      font-size: 0.875rem;
      color: hsl(var(--muted-foreground));
      font-weight: 500;
}

.result-value {
      font-size: 0.875rem;
      color: hsl(var(--foreground));
      font-weight: 600;
}

/* Result Row mit Status-Indikator */
.result-row.success .result-value {
      color: hsl(142 71% 45%);
}

.result-row.warning .result-value {
      color: hsl(45 93% 47%);
}

.result-row.danger .result-value {
      color: hsl(0 72% 51%);
}

/* ============================================
   CODE / INLINE CODE STYLES
   ============================================ */
.inline-code {
      display: inline-block;
      padding: 0.125rem 0.5rem;
      border-radius: 0.375rem;
      font-family: 'JetBrains Mono', 'Fira Code', monospace;
      font-size: 0.8125rem;
      background: hsl(var(--muted));
      color: hsl(var(--primary));
      border: 1px solid hsl(var(--border));
}

/* Code Block */
.code-block {
      display: block;
      padding: 0.75rem 1rem;
      border-radius: 0.5rem;
      font-family: 'JetBrains Mono', 'Fira Code', monospace;
      font-size: 0.8125rem;
      background: hsl(230 25% 8%);
      color: hsl(var(--foreground));
      border: 1px solid hsl(var(--border));
      overflow-x: auto;
      white-space: pre-wrap;
      word-break: break-all;
}

/* ============================================
   HEADING TAGS DISPLAY (H1-H6 Badges)
   ============================================ */
.heading-tag {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 2rem;
      height: 1.5rem;
      padding: 0 0.5rem;
      border-radius: 0.375rem;
      font-family: 'JetBrains Mono', 'Fira Code', monospace;
      font-size: 0.75rem;
      font-weight: 700;
      background: var(--gradient-primary);
      color: hsl(var(--primary-foreground));
      box-shadow: 0 2px 8px hsl(var(--primary) / 0.25);
      cursor: default;
}

.heading-tag.muted {
      background: hsl(var(--muted));
      color: hsl(var(--muted-foreground));
      box-shadow: none;
}

/* ============================================
   CARD TITLE STYLES
   ============================================ */
.card-title {
      display: block;
      width: 100%;
      font-size: 1.125rem;
      font-weight: 600;
      color: hsl(var(--primary));
      padding-bottom: 0.375rem;
      margin-bottom: 0.375rem;
      border-bottom: 1px solid hsl(var(--primary) / 0.4);
      cursor: default;
}

/* Variante für größere Titel */
.card-title-lg {
      display: block;
      width: 100%;
      font-size: 1.25rem;
      font-weight: 700;
      color: hsl(var(--primary));
      padding-bottom: 0.5rem;
      margin-bottom: 0.5rem;
      border-bottom: 1px solid hsl(var(--primary) / 0.4);
      cursor: default;
}

/* Variante mit Gradient */
.card-title-gradient {
      font-size: 1.125rem;
      font-weight: 600;
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
      background-image: var(--gradient-primary);
      padding-bottom: 0.375rem;
      margin-bottom: 0.375rem;
      border-bottom: 1px solid hsl(var(--primary) / 0.3);
      cursor: default;
}

/* Card Content */
.card-content {
      cursor: default;
}

/* ============================================
   VIEW TOGGLE STYLES
   ============================================ */
/* Card View: 3 Cards pro Reihe auf großen Bildschirmen */
.view-container.card-view .analysis-grid {
      grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 768px) {
      .view-container.card-view .analysis-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
      }
}

@media (min-width: 1024px) {
      .view-container.card-view .analysis-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
      }
}

/* List View: 1 Card pro Reihe auf allen Bildschirmen */
.view-container.list-view .analysis-grid {
      grid-template-columns: repeat(1, minmax(0, 1fr));
}

/* List View: Card-Items volle Breite */
.view-container.list-view .card-item {
      width: 100%;
}

/* Card-View: Detail-Elemente ausblenden */
.view-container.card-view #tag_h1_against_keyword,
.view-container.card-view #details_ueberschriften {
      display: none;
}

/* List-View: Detail-Elemente einblenden */
.view-container.list-view #tag_h1_against_keyword,
.view-container.list-view #details_ueberschriften {
      display: block;
}

/* Active state für View Toggle Buttons */
.view-toggle-btn.active {
      background: linear-gradient(135deg, hsl(280 70% 55% / 0.2), hsl(300 70% 45% / 0.2));
      border-color: hsl(var(--primary) / 0.5);
      color: hsl(var(--primary));
}

/* ============================================
   PAGE: HOMEPAGE
   ============================================ */

/* Progress bar für URL-Input */
#homepage .url-input-container {
      position: relative;
      width: 100%;
}

#homepage .url-progress-bar {
      position: absolute;
      bottom: 0;
      left: 0;
      height: 100%;
      width: 0%;
      background-color: rgba(29, 210, 68, 0.5);
      transition: width 0.1s linear;
      z-index: 0;
      border-radius: 0.5rem;
}

#homepage #url {
      position: relative;
      z-index: 2;
      background-color: transparent !important;
}

/* Hero Section */
#homepage .hero-section {
      position: relative;
      /* min-height: 80vh; */
      overflow: hidden;
      padding: 4rem 0;
}

/* @media (min-width: 768px) {
      #homepage .hero-section {
            min-height: 85vh;
      }
} */

#homepage .hero-section h1 {
      background: none;
      -webkit-background-clip: unset;
      background-clip: unset;
      color: hsl(var(--foreground));
      font-style: normal;
      text-transform: none;
}

/* Hero Title */
.hero-title {
      font-size: clamp(2rem, 5vw, 4rem);
      line-height: 1.1;
}

/* Card Items */
#homepage .card-item {
      display: flex;
      min-height: 300px;
}

#homepage .card-item > .glass-card {
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      min-height: 300px;
}

/* Pie Container zentrieren */
#homepage .card-item .pie-container001,
#homepage .card-item .pie-container002,
#homepage .card-item .pie-container003 {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-grow: 1;
}

/* Hero Glow Position Classes */
.hero-glow-left {
      left: 25%;
      top: 25%;
      height: 500px;
      width: 500px;
      border-radius: 50%;
}

.hero-glow-right {
      right: 25%;
      bottom: 25%;
      height: 300px;
      width: 300px;
      border-radius: 50%;
}

.hero-glow-center {
      left: 50%;
      top: 0;
      transform: translateX(-50%);
      height: 400px;
      width: 400px;
      border-radius: 50%;
}

.hero-glow-side {
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      height: 400px;
      width: 400px;
      border-radius: 50%;
}

/* ============================================
   PAGE: ANALYSEN
   ============================================ */
#analysen .device-mobile {
      color: #0d6efd;
}

#analysen .device-desktop {
      color: #198754;
}

#analysen .score-high {
      background-color: #d1e7dd;
      color: #0f5132;
}

#analysen .score-medium {
      background-color: #fff3cd;
      color: #664d03;
}

#analysen .score-low {
      background-color: #f8d7da;
      color: #842029;
}

#analysen .table-responsive {
      overflow-x: auto;
}

#analysen .badge-device {
      font-size: 0.8rem;
      padding: 0.35em 0.65em;
}

#analysen .table th {
      position: relative;
}

/* Entfernen der Datatable-Komponenten */
#analysen .dataTables_length,
#analysen .dataTables_paginate,
#analysen .dataTables_info {
      display: none !important;
}

/* Trend-Pfeil Stile */
#analysen .trend-up {
      color: #198754;
}

#analysen .trend-down {
      color: #dc3545;
}

#analysen .trend-same {
      color: #6c757d;
}

/* ============================================
   PAGE: BLOG
   ============================================ */
.blog_item_img .blog_item_date {
      bottom: -30px;
      display: block;
      border: 3px solid white;
}

.single_sidebar_widget ul.list {
      list-style: none;
      padding-left: 0;
}

.tag_cloud_widget .list {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
}

.tag_cloud_widget .list li a {
      display: inline-block;
      padding: 0.35em 0.65em;
      font-size: 0.85em;
      font-weight: 600;
      text-decoration: none;
}

.blog-weiter-lnk {
      list-style: none;
      padding-left: 0;
}

/* ============================================
   ANALYSE AUSGABE - Markdown Rendering
   ============================================ */
#analyseAusgabe {
      line-height: 1.8;
}

#analyseAusgabe h2 {
      color: hsl(var(--primary));
      font-size: 1.5rem;
      font-weight: 600;
      margin-top: 2rem;
      margin-bottom: 1rem;
      padding-bottom: 0.5rem;
      border-bottom: 1px solid hsl(var(--border));
}

#analyseAusgabe h2:first-child {
      margin-top: 0;
}

#analyseAusgabe h3 {
      color: hsl(var(--foreground));
      font-size: 1.25rem;
      font-weight: 600;
      margin-top: 1.5rem;
      margin-bottom: 0.75rem;
}

#analyseAusgabe p {
      margin-bottom: 1rem;
      color: hsl(var(--foreground));
}

#analyseAusgabe ul,
#analyseAusgabe ol {
      margin-bottom: 1rem;
      padding-left: 1.5rem;
}

#analyseAusgabe li {
      margin-bottom: 0.5rem;
      color: hsl(var(--foreground));
}

#analyseAusgabe strong {
      color: hsl(var(--primary));
      font-weight: 600;
}

#analyseAusgabe pre {
      background: hsl(230 25% 8%);
      border: 1px solid hsl(var(--border));
      border-radius: 0.5rem;
      padding: 1rem;
      margin: 1rem 0;
      overflow-x: auto;
}

#analyseAusgabe code {
      font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
      font-size: 0.875rem;
      background: hsl(230 25% 15%);
      padding: 0.2rem 0.4rem;
      border-radius: 0.25rem;
      color: hsl(280 70% 70%);
}

#analyseAusgabe pre code {
      background: transparent;
      padding: 0;
      color: hsl(var(--foreground));
}

#analyseAusgabe blockquote {
      border-left: 4px solid hsl(var(--primary));
      padding-left: 1rem;
      margin: 1rem 0;
      color: hsl(var(--muted-foreground));
      font-style: italic;
}

#analyseAusgabe a {
      color: hsl(var(--primary));
      text-decoration: underline;
}

#analyseAusgabe a:hover {
      color: hsl(280 70% 65%);
}

#analyseAusgabe hr {
      border: none;
      border-top: 1px solid hsl(var(--border));
      margin: 2rem 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
      #analyseAusgabe h2 {
            font-size: 1.25rem;
      }

      #analyseAusgabe h3 {
            font-size: 1.1rem;
      }

      #analyseAusgabe pre {
            padding: 0.75rem;
            font-size: 0.8rem;
      }
}

/* ======================================================
   SEO Action Plan — Recommendations
   ====================================================== */

.rec-severity-dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      display: inline-block;
      flex-shrink: 0;
}

.rec-severity-dot.rec-critical {
      background-color: hsl(0 72% 51%);
}

.rec-severity-dot.rec-warning {
      background-color: hsl(var(--warning, 45 100% 51%));
}

.rec-severity-dot.rec-passed {
      background-color: hsl(142 71% 45%);
}

.rec-item {
      background: hsl(var(--card) / 0.5);
      transition: background-color 0.2s ease;
      margin-bottom: 1.25rem;
}

.rec-item:hover {
      background: hsl(var(--card) / 0.8);
}

.rec-item-critical {
      border-left: 3px solid hsl(0 72% 51%);
}

.rec-item-warning {
      border-left: 3px solid hsl(var(--warning, 45 100% 51%));
}

/* Recommendation Checklist: Checkbox */
.rec-checkbox {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      flex-shrink: 0;
}

.rec-checkbox .rec-check-input {
      position: absolute;
      opacity: 0;
      width: 0;
      height: 0;
}

.rec-checkbox .rec-checkmark {
      width: 22px;
      height: 22px;
      border: 2px solid hsl(var(--foreground) / 0.3);
      border-radius: 4px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
      background: transparent;
}

.rec-checkbox .rec-checkmark i {
      font-size: 0.7rem;
      color: transparent;
      transition: color 0.2s ease;
}

.rec-checkbox:hover .rec-checkmark {
      border-color: hsl(var(--primary));
}

.rec-checkbox .rec-check-input:checked + .rec-checkmark {
      background: hsl(142 71% 45%);
      border-color: hsl(142 71% 45%);
}

.rec-checkbox .rec-check-input:checked + .rec-checkmark i {
      color: #fff;
}

/* Recommendation Checklist: Completed State */
.rec-item.rec-completed {
      opacity: 0.5;
      border-left-color: hsl(142 71% 45%) !important;
}

.rec-item.rec-completed .rec-title {
      text-decoration: line-through;
}

.rec-item.rec-completed .rec-fix {
      opacity: 0.6;
}

/* Recommendation Checklist: Progress Bar */
.rec-progress-bar {
      width: 100%;
      height: 8px;
      background: hsl(var(--muted) / 0.3);
      border-radius: 9999px;
      overflow: hidden;
}

.rec-progress-fill {
      height: 100%;
      background: linear-gradient(90deg, hsl(280 70% 55%), hsl(142 71% 45%));
      border-radius: 9999px;
      transition: width 0.4s ease;
}

.rec-progress-wrapper {
      padding: 0.75rem 1rem;
      background: hsl(var(--card) / 0.5);
      border-radius: 0.5rem;
      border: 1px solid hsl(var(--glass-border, 0 0% 100% / 0.1));
}

.rec-fix {
      background: hsl(var(--muted) / 0.15);
      border-radius: 0.375rem;
      padding: 0.5rem 0.75rem;
      color: hsl(var(--foreground));
}

/* Recheck Button */
.rec-recheck-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      border: 1px solid hsl(var(--foreground) / 0.2);
      border-radius: 6px;
      background: transparent;
      color: hsl(var(--foreground) / 0.6);
      cursor: pointer;
      transition: all 0.2s ease;
      font-size: 0.75rem;
      flex-shrink: 0;
}

.rec-recheck-btn:hover {
      border-color: hsl(var(--primary));
      color: hsl(var(--primary));
      background: hsl(var(--primary) / 0.1);
}

.rec-recheck-btn.rec-recheck-loading {
      pointer-events: none;
      opacity: 0.6;
}

.rec-recheck-feedback {
      border-radius: 0.375rem;
      padding: 0.4rem 0.75rem;
      margin-top: 0.5rem;
}

.rec-recheck-passed {
      background: hsl(142 71% 45% / 0.15);
      color: hsl(142 71% 45%);
}

.rec-recheck-failed {
      background: hsl(0 72% 51% / 0.15);
      color: hsl(0 72% 51%);
}

.rec-completed .rec-recheck-btn {
      opacity: 0.4;
}

.badge-warning-custom {
      background: hsl(var(--warning, 45 100% 51%) / 0.15);
      color: hsl(var(--warning, 45 100% 51%));
      border: 1px solid hsl(var(--warning, 45 100% 51%) / 0.3);
}

#seo-action-plan details > summary {
      list-style: none;
}

#seo-action-plan details > summary::-webkit-details-marker {
      display: none;
}

/* Smooth open/close animation via ::details-content */
#seo-action-plan details {
      interpolate-size: allow-keywords;
}

#seo-action-plan details::details-content {
      block-size: 0;
      overflow: hidden;
      opacity: 0;
      transition: block-size 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                  opacity 0.3s ease,
                  content-visibility 0.4s allow-discrete;
}

#seo-action-plan details[open]::details-content {
      block-size: auto;
      opacity: 1;
}

#seo-action-plan details > summary::before {
      content: '\f054';
      font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Free';
      font-weight: 900;
      font-size: 0.75rem;
      transition: transform 0.2s ease;
      display: inline-block;
      margin-right: 0.5rem;
}

#seo-action-plan details[open] > summary::before {
      transform: rotate(90deg);
}

/* ============================================
   ANALYSEN DETAIL: Rohdaten-Cards einheitliche Höhe
   ============================================ */
#analysen-detail .analysis-grid .card-item {
      display: flex;
}

#analysen-detail .analysis-grid .card-item > .glass-card {
      width: 100%;
      display: flex;
      flex-direction: column;
}

#analysen-detail .analysis-grid .card-item > .glass-card .card-content {
      flex: 1;
}

/* Rohdaten toggle */
details > summary {
      list-style: none;
}

details > summary::-webkit-details-marker {
      display: none;
}