/* CRM Custom Styles */

/* Login-Seite Hintergrund-Gradient */
.login-bg {
  background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%);
}

/* Fokus-Ring für bessere Accessibility */
input:focus, select:focus, textarea:focus {
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

/* Sidebar Hover-Effekt */
.nav-link {
  transition: background-color 0.15s ease, color 0.15s ease;
}
.nav-link:hover {
  background-color: rgba(37, 99, 235, 0.1);
}
.nav-link.active {
  background-color: rgba(37, 99, 235, 0.15);
  color: #2563eb;
  font-weight: 600;
}

/* Tabellen-Styles */
thead th {
  font-weight: 800 !important;
}
.table-row:hover {
  background-color: #f9fafb;
}

/* Loading-Spinner */
.spinner {
  border: 3px solid #e5e7eb;
  border-top-color: #2563eb;
  border-radius: 50%;
  width: 1.5rem;
  height: 1.5rem;
  animation: spin 0.6s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Toast-Notifications */
.toast {
  animation: slide-in 0.3s ease-out;
}
@keyframes slide-in {
  from { transform: translateY(-1rem); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

/* Sidebar collapsed */
.sidebar {
  width: 260px !important;
  min-width: 260px !important;
  transition: width 0.2s ease, min-width 0.2s ease;
}

.sidebar-collapsed {
  width: 52px !important;
  min-width: 52px !important;
}
.sidebar-collapsed .nav-label,
.sidebar-collapsed .logo-text,
.sidebar-collapsed .avatar-info,
.sidebar-collapsed .nav-chevron { display: none !important; }
.sidebar-collapsed .sidebar-header { justify-content: center; }
.sidebar-collapsed .nav-submenu { display: none !important; }
.sidebar-collapsed .logo-icon { width: 32px !important; height: 32px !important; }
.sidebar-collapsed .logo-icon img { width: 28px !important; height: 28px !important; }
.sidebar-collapsed .sidebar-header { padding-left: 8px !important; padding-right: 8px !important; justify-content: center !important; }
.sidebar-collapsed .avatar-circle { margin: 0 auto !important; }
.sidebar-collapsed .sidebar-avatar { justify-content: center !important; padding-left: 8px !important; padding-right: 8px !important; }
.sidebar-collapsed .nav-item { justify-content: center !important; padding-left: 8px !important; padding-right: 8px !important; }
.sidebar-collapsed .nav-icon { margin: 0 auto !important; }

/* Content-Bereich: kein aeusseres Scrolling */
.app-content {
    overflow-y: auto !important;
    padding: 16px;
    box-sizing: border-box;
    height: 100%;
    display: flex;
    flex-direction: column;
}


/* Einheitlicher NEU-Button */
.btn-neu {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background-color: #16a34a;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  flex-shrink: 0;
}
.btn-neu:hover {
  background-color: #15803d;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.btn-neu svg {
  width: 16px;
  height: 16px;
}

/* Active sidebar nav item */
.nav-item.active {
  background-color: rgba(79, 70, 229, 0.2) !important;
  color: #fff !important;
  border-left: 3px solid #818cf8;
  font-weight: 600;
}
.nav-sub-item.active {
  background-color: rgba(79, 70, 229, 0.15) !important;
  color: #fff !important;
  font-weight: 600;
}
/* Chevron fuer offene Gruppen */
.nav-group-toggle.open .nav-chevron {
  transform: rotate(0deg) !important;
}
.nav-submenu.open {
  display: block !important;
}


/* Klickbare Tabellenzeilen */
tbody tr.cursor-pointer:hover {
  background-color: #eef2ff !important;
  box-shadow: inset 3px 0 0 #6366f1;
}

/* Seitentitel in Grossbuchstaben */
.header-title {
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Theme transition */
*, *::before, *::after {
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/* =====================================================
   DARK THEME
   ===================================================== */

[data-theme="dark"] body {
  background-color: #111827 !important;
  color: #f3f4f6 !important;
}

/* Header */
[data-theme="dark"] .app-header {
  background-color: #1f2937 !important;
  border-color: #374151 !important;
}
[data-theme="dark"] .header-title {
  color: #f9fafb !important;
}
[data-theme="dark"] .header-btn {
  color: #9ca3af !important;
}
[data-theme="dark"] .header-btn:hover {
  color: #f3f4f6 !important;
  background-color: #374151 !important;
}
[data-theme="dark"] .header-username {
  color: #d1d5db !important;
}
[data-theme="dark"] .header-right .w-px {
  background-color: #4b5563 !important;
}

/* Main content area */
[data-theme="dark"] .app-content {
  background-color: #111827 !important;
}

/* KPI Cards */
[data-theme="dark"] .kpi-card {
  background-color: #1f2937 !important;
  border-color: #374151 !important;
}
[data-theme="dark"] .kpi-value.text-gray-700 {
  color: #e5e7eb !important;
}
[data-theme="dark"] .kpi-label {
  color: #9ca3af !important;
}

/* Section titles */
[data-theme="dark"] .section-title {
  color: #f3f4f6 !important;
}

/* Generic white bg panels */
[data-theme="dark"] .bg-white {
  background-color: #1f2937 !important;
}
[data-theme="dark"] .border-gray-200 {
  border-color: #374151 !important;
}
[data-theme="dark"] .border-gray-100 {
  border-color: #2d3a4a !important;
}

/* Tables */
[data-theme="dark"] table {
  color: #e5e7eb !important;
}
[data-theme="dark"] thead {
  background-color: #1a2332 !important;
}
[data-theme="dark"] .bg-gray-50:not(thead) {
  background-color: #1a2332 !important;
}
[data-theme="dark"] th {
  color: #9ca3af !important;
}
[data-theme="dark"] td {
  color: #d1d5db !important;
}
/* Zebra-Striping: gerade Zeilen etwas heller als ungerade */
[data-theme="dark"] tbody tr {
  background-color: #1f2937 !important;
}
[data-theme="dark"] tbody tr:nth-child(even) {
  background-color: #192231 !important;
}
[data-theme="dark"] tbody tr:hover {
  background-color: #243044 !important;
}
[data-theme="dark"] .divide-gray-100 > * + * {
  border-color: #2d3a4a !important;
}

/* Pagination */
[data-theme="dark"] #pagination-info {
  color: #9ca3af !important;
}
[data-theme="dark"] #pagination-buttons button {
  color: #d1d5db !important;
}
[data-theme="dark"] #pagination-buttons button:hover {
  background-color: #374151 !important;
}

/* Inputs & Selects */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] input[type="url"],
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background-color: #374151 !important;
  border-color: #4b5563 !important;
  color: #f3f4f6 !important;
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: #6b7280 !important;
}

/* Modals */
[data-theme="dark"] .modal-container,
[data-theme="dark"] #cert-modal .bg-white,
[data-theme="dark"] #confirm-modal .bg-white,
[data-theme="dark"] #help-modal .bg-white {
  background-color: #1f2937 !important;
}
[data-theme="dark"] .modal-header,
[data-theme="dark"] #cert-modal .border-b {
  border-color: #374151 !important;
}
[data-theme="dark"] .modal-title,
[data-theme="dark"] #cert-modal h3 {
  color: #f3f4f6 !important;
}
[data-theme="dark"] label {
  color: #d1d5db !important;
}
[data-theme="dark"] legend {
  color: #f3f4f6 !important;
}

/* Buttons */
[data-theme="dark"] button.border-gray-300 {
  border-color: #4b5563 !important;
  color: #d1d5db !important;
}
[data-theme="dark"] button.border-gray-300:hover {
  background-color: #374151 !important;
}

/* Text color overrides */
[data-theme="dark"] .text-gray-900 { color: #f9fafb !important; }
[data-theme="dark"] .text-gray-800 { color: #f3f4f6 !important; }
[data-theme="dark"] .text-gray-700 { color: #e5e7eb !important; }
[data-theme="dark"] .text-gray-600 { color: #d1d5db !important; }
[data-theme="dark"] .text-gray-500 { color: #9ca3af !important; }
[data-theme="dark"] .text-gray-400 { color: #9ca3af !important; }

/* Bg color overrides */
[data-theme="dark"] .bg-gray-50 { background-color: #1a2332 !important; }
[data-theme="dark"] .bg-gray-100 { background-color: #1f2937 !important; }

/* Sidebar stays dark (already is) */
[data-theme="dark"] .sidebar {
  background-color: #0f172a !important;
}
[data-theme="dark"] .sidebar .border-gray-700\/50 {
  border-color: #1e293b !important;
}

/* Confirm modal */
[data-theme="dark"] #confirm-modal .relative {
  background-color: #1f2937 !important;
}
[data-theme="dark"] #confirm-modal h3 {
  color: #f3f4f6 !important;
}
[data-theme="dark"] #confirm-modal .text-gray-500 {
  color: #9ca3af !important;
}

/* Help modal */
[data-theme="dark"] #help-modal-body {
  color: #d1d5db !important;
}

/* Empty state text */
[data-theme="dark"] .text-center.text-gray-400 {
  color: #6b7280 !important;
}

/* Toast */
[data-theme="dark"] .toast {
  background-color: #1f2937 !important;
  border-color: #374151 !important;
  color: #f3f4f6 !important;
}


/* NEU-Button im Dark Theme */
[data-theme="dark"] .btn-neu {
  background-color: #16a34a;
  color: #fff;
}
[data-theme="dark"] .btn-neu:hover {
  background-color: #15803d;
}

/* Active sidebar in dark */
[data-theme="dark"] .nav-item.active {
  background-color: rgba(99, 102, 241, 0.25) !important;
  color: #fff !important;
  border-left-color: #818cf8 !important;
}
[data-theme="dark"] .nav-sub-item.active {
  background-color: rgba(99, 102, 241, 0.2) !important;
  color: #e0e7ff !important;
}

/* Klickbare Zeilen dark */
[data-theme="dark"] tbody tr.cursor-pointer:hover {
  background-color: #1e3a5f !important;
  box-shadow: inset 3px 0 0 #818cf8;
}

/* Scrollbar */
[data-theme="dark"] ::-webkit-scrollbar { width: 8px; }
[data-theme="dark"] ::-webkit-scrollbar-track { background: #1f2937; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #4b5563; border-radius: 4px; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #6b7280; }


/* =====================================================
   COLORFUL / BUNT THEME
   ===================================================== */

/* Header: auffaelliger Farbverlauf */
[data-theme="colorful"] .app-header {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #a855f7 100%) !important;
  border-color: transparent !important;
}
[data-theme="colorful"] .header-title {
  color: #fff !important;
}
[data-theme="colorful"] .header-btn {
  color: rgba(255,255,255,0.8) !important;
}
[data-theme="colorful"] .header-btn:hover {
  color: #fff !important;
  background-color: rgba(255,255,255,0.15) !important;
}
[data-theme="colorful"] .header-username {
  color: #fff !important;
}
[data-theme="colorful"] .header-logout {
  color: rgba(255,255,255,0.8) !important;
}
[data-theme="colorful"] .header-logout:hover {
  color: #fff !important;
  background-color: rgba(255,255,255,0.15) !important;
}
[data-theme="colorful"] .header-right .w-px {
  background-color: rgba(255,255,255,0.3) !important;
}

/* Sidebar: Gruppen bekommen verschiedene Akzentfarben */
[data-theme="colorful"] .sidebar {
  background: linear-gradient(180deg, #1e1b4e 0%, #1e293b 100%) !important;
}

[data-theme="colorful"] .nav-item[data-page="dashboard"] {
  border-left: 3px solid #f59e0b;
}
[data-theme="colorful"] .nav-item[data-page="dashboard"]:hover,
[data-theme="colorful"] .nav-item[data-page="dashboard"].active {
  background-color: rgba(245, 158, 11, 0.15) !important;
  color: #fbbf24 !important;
}

[data-theme="colorful"] .nav-item[data-page="kundenverwaltung"] {
  border-left: 3px solid #3b82f6;
}
[data-theme="colorful"] .nav-item[data-page="kundenverwaltung"]:hover,
[data-theme="colorful"] .nav-item[data-page="kundenverwaltung"].active {
  background-color: rgba(59, 130, 246, 0.15) !important;
  color: #60a5fa !important;
}

[data-theme="colorful"] .nav-item[data-page="certiport-examen"] {
  border-left: 3px solid #10b981;
}
[data-theme="colorful"] .nav-item[data-page="certiport-examen"]:hover,
[data-theme="colorful"] .nav-item[data-page="certiport-examen"].active {
  background-color: rgba(16, 185, 129, 0.15) !important;
  color: #34d399 !important;
}

/* Nav groups - various colors per group */
[data-theme="colorful"] .nav-group[data-color="green"] .nav-group-toggle {
  border-left: 3px solid #10b981;
}
[data-theme="colorful"] .nav-group[data-color="green"] .nav-group-toggle:hover {
  background-color: rgba(16, 185, 129, 0.15) !important;
  color: #34d399 !important;
}
[data-theme="colorful"] .nav-group[data-color="green"] .nav-sub-item:hover {
  color: #34d399 !important;
  background-color: rgba(16, 185, 129, 0.1) !important;
}
[data-theme="colorful"] .nav-group[data-color="green"] .nav-submenu {
  border-color: rgba(16, 185, 129, 0.3) !important;
}

[data-theme="colorful"] .nav-group[data-color="red"] .nav-group-toggle {
  border-left: 3px solid #ef4444;
}
[data-theme="colorful"] .nav-group[data-color="red"] .nav-group-toggle:hover {
  background-color: rgba(239, 68, 68, 0.15) !important;
  color: #f87171 !important;
}
[data-theme="colorful"] .nav-group[data-color="red"] .nav-sub-item:hover {
  color: #f87171 !important;
  background-color: rgba(239, 68, 68, 0.1) !important;
}
[data-theme="colorful"] .nav-group[data-color="red"] .nav-submenu {
  border-color: rgba(239, 68, 68, 0.3) !important;
}

[data-theme="colorful"] .nav-group[data-color="yellow"] .nav-group-toggle {
  border-left: 3px solid #f59e0b;
}
[data-theme="colorful"] .nav-group[data-color="yellow"] .nav-group-toggle:hover {
  background-color: rgba(245, 158, 11, 0.15) !important;
  color: #fbbf24 !important;
}
[data-theme="colorful"] .nav-group[data-color="yellow"] .nav-sub-item:hover {
  color: #fbbf24 !important;
  background-color: rgba(245, 158, 11, 0.1) !important;
}
[data-theme="colorful"] .nav-group[data-color="yellow"] .nav-submenu {
  border-color: rgba(245, 158, 11, 0.3) !important;
}

[data-theme="colorful"] .nav-group[data-color="purple"] .nav-group-toggle {
  border-left: 3px solid #a855f7;
}
[data-theme="colorful"] .nav-group[data-color="purple"] .nav-group-toggle:hover {
  background-color: rgba(168, 85, 247, 0.15) !important;
  color: #c084fc !important;
}
[data-theme="colorful"] .nav-group[data-color="purple"] .nav-sub-item:hover {
  color: #c084fc !important;
  background-color: rgba(168, 85, 247, 0.1) !important;
}
[data-theme="colorful"] .nav-group[data-color="purple"] .nav-submenu {
  border-color: rgba(168, 85, 247, 0.3) !important;
}

[data-theme="colorful"] .nav-group[data-color="blue"] .nav-group-toggle {
  border-left: 3px solid #3b82f6;
}
[data-theme="colorful"] .nav-group[data-color="blue"] .nav-group-toggle:hover {
  background-color: rgba(59, 130, 246, 0.15) !important;
  color: #60a5fa !important;
}
[data-theme="colorful"] .nav-group[data-color="blue"] .nav-sub-item:hover {
  color: #60a5fa !important;
  background-color: rgba(59, 130, 246, 0.1) !important;
}
[data-theme="colorful"] .nav-group[data-color="blue"] .nav-submenu {
  border-color: rgba(59, 130, 246, 0.3) !important;
}

/* Avatar */
[data-theme="colorful"] .avatar-circle {
  background: linear-gradient(135deg, #f59e0b, #ef4444) !important;
}

/* KPI Cards: jede Karte bekommt eine kraeftige Randfarbe */
[data-theme="colorful"] .kpi-card {
  border-left: 4px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
[data-theme="colorful"] .kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}
[data-theme="colorful"] .kpi-card:nth-child(1)  { border-left-color: #4f46e5; }
[data-theme="colorful"] .kpi-card:nth-child(2)  { border-left-color: #10b981; }
[data-theme="colorful"] .kpi-card:nth-child(3)  { border-left-color: #f59e0b; }
[data-theme="colorful"] .kpi-card:nth-child(4)  { border-left-color: #ef4444; }
[data-theme="colorful"] .kpi-card:nth-child(5)  { border-left-color: #8b5cf6; }
[data-theme="colorful"] .kpi-card:nth-child(6)  { border-left-color: #06b6d4; }
[data-theme="colorful"] .kpi-card:nth-child(7)  { border-left-color: #ec4899; }
[data-theme="colorful"] .kpi-card:nth-child(8)  { border-left-color: #14b8a6; }

/* Colorful KPI icons get vibrant backgrounds */
[data-theme="colorful"] .kpi-icon {
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* Tables: kraeftiger Header */
[data-theme="colorful"] thead {
  background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%) !important;
}
[data-theme="colorful"] thead th {
  color: #fff !important;
}
[data-theme="colorful"] tbody tr:hover {
  background-color: #eef2ff !important;
}

/* Buttons: Primary bekommt Gradient */
[data-theme="colorful"] .bg-primary-600,
[data-theme="colorful"] button.bg-primary-600 {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%) !important;
}
[data-theme="colorful"] .bg-primary-600:hover,
[data-theme="colorful"] button.bg-primary-600:hover {
  background: linear-gradient(135deg, #4338ca 0%, #6d28d9 100%) !important;
}

/* Delete buttons: kraeftiger */
[data-theme="colorful"] .text-red-500 {
  color: #ef4444 !important;
  font-weight: 600;
}

/* Content area: leichter Gradient-Hintergrund */
[data-theme="colorful"] .app-content {
  background: linear-gradient(180deg, #f5f3ff 0%, #eff6ff 50%, #f0fdf4 100%) !important;
}

/* Panels / White cards */
[data-theme="colorful"] .bg-white {
  border-left: 3px solid #6366f1 !important;
}

/* Pagination active button */
[data-theme="colorful"] #pagination-buttons .bg-primary-600 {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%) !important;
}

/* Sidebar border */
[data-theme="colorful"] .sidebar .border-gray-700\/50 {
  border-color: rgba(139, 92, 246, 0.2) !important;
}

/* Logo bg */
[data-theme="colorful"] .logo-icon {
  background: linear-gradient(135deg, #f59e0b, #ef4444) !important;
}

/* Section titles get color */
[data-theme="colorful"] .section-title {
  color: #4f46e5 !important;
  font-weight: 700;
}

/* Modal header gets gradient */
[data-theme="colorful"] .modal-header,
[data-theme="colorful"] #cert-modal .border-b.sticky {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%) !important;
  border-color: transparent !important;
}
[data-theme="colorful"] .modal-title,
[data-theme="colorful"] #cert-modal .sticky h3 {
  color: #fff !important;
}
[data-theme="colorful"] .modal-close,
[data-theme="colorful"] #cert-modal .sticky button {
  color: rgba(255,255,255,0.8) !important;
}
[data-theme="colorful"] .modal-close:hover,
[data-theme="colorful"] #cert-modal .sticky button:hover {
  color: #fff !important;
  background-color: rgba(255,255,255,0.15) !important;
}

/* Inputs in colorful get subtle purple border on focus */
[data-theme="colorful"] input:focus,
[data-theme="colorful"] select:focus,
[data-theme="colorful"] textarea:focus {
  border-color: #7c3aed !important;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2) !important;
}

/* Fieldset legends */

/* Active sidebar in colorful */
[data-theme="colorful"] .nav-item.active {
  background: linear-gradient(90deg, rgba(245,158,11,0.2), rgba(245,158,11,0.05)) !important;
  color: #fbbf24 !important;
  border-left: 3px solid #f59e0b !important;
}
[data-theme="colorful"] .nav-item[data-page="kundenverwaltung"].active {
  background: linear-gradient(90deg, rgba(59,130,246,0.2), rgba(59,130,246,0.05)) !important;
  color: #60a5fa !important;
  border-left-color: #3b82f6 !important;
}
[data-theme="colorful"] .nav-item[data-page="certiport-examen"].active {
  background: linear-gradient(90deg, rgba(16,185,129,0.2), rgba(16,185,129,0.05)) !important;
  color: #34d399 !important;
  border-left-color: #10b981 !important;
}
[data-theme="colorful"] .nav-sub-item.active {
  color: #c4b5fd !important;
  font-weight: 600;
}
[data-theme="colorful"] .nav-group[data-color="green"] .nav-sub-item.active {
  color: #34d399 !important;
  background-color: rgba(16, 185, 129, 0.15) !important;
}
[data-theme="colorful"] .nav-group[data-color="red"] .nav-sub-item.active {
  color: #f87171 !important;
  background-color: rgba(239, 68, 68, 0.15) !important;
}
[data-theme="colorful"] .nav-group[data-color="yellow"] .nav-sub-item.active {
  color: #fbbf24 !important;
  background-color: rgba(245, 158, 11, 0.15) !important;
}
[data-theme="colorful"] .nav-group[data-color="purple"] .nav-sub-item.active {
  color: #c084fc !important;
  background-color: rgba(168, 85, 247, 0.15) !important;
}
[data-theme="colorful"] .nav-group[data-color="blue"] .nav-sub-item.active {
  color: #60a5fa !important;
  background-color: rgba(59, 130, 246, 0.15) !important;
}

/* NEU-Button im colorful Theme */
[data-theme="colorful"] .btn-neu {
  background: linear-gradient(135deg, #16a34a 0%, #059669 100%);
}
[data-theme="colorful"] .btn-neu:hover {
  background: linear-gradient(135deg, #15803d 0%, #047857 100%);
}

/* Klickbare Zeilen colorful */
[data-theme="colorful"] tbody tr.cursor-pointer:hover {
  background-color: #ede9fe !important;
  box-shadow: inset 3px 0 0 #7c3aed;
}

[data-theme="colorful"] legend {
  color: #4f46e5 !important;
  font-weight: 700;
}