/* ============================================================
   ListAds — Eigenes CSS (Ergänzungen zu Tailwind)
   ============================================================ */

/* Alpine.js x-cloak */
[x-cloak] { display: none !important; }

/* Line-clamp Polyfill (falls Tailwind-Plugin fehlt) */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Sterne-Animationen */
.stars svg {
    transition: transform 0.1s ease;
}
.stars svg:hover {
    transform: scale(1.2);
}

/* Smooth Transitions für Cards */
article {
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Admin: w-4.5 fehlt in Tailwind CDN */
.w-4\.5 { width: 1.125rem; }
.h-4\.5 { height: 1.125rem; }

/* Toast-Animationen */
@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}
.toast {
    animation: slideIn 0.3s ease forwards;
}

/* Fokus-Ring überall konsistent */
:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

/* Scrollbar Styling */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ============================================================
   Dark Mode
   ============================================================ */

/* Übergang beim Umschalten */
*, *::before, *::after {
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.15s ease;
}

/* Seiten-Hintergrund + Basis-Text */
html.dark body          { background-color: #0f172a; color: #e2e8f0; }

/* Weiße + helle Flächen → dunkle Karten */
html.dark .bg-white     { background-color: #1e293b !important; }
html.dark .bg-gray-50   { background-color: #0f172a !important; }
html.dark .bg-gray-100  { background-color: #1a2740 !important; }

/* Rahmen */
html.dark .border-gray-100,
html.dark .border-gray-200 { border-color: #334155 !important; }

/* Texte */
html.dark .text-gray-900 { color: #f1f5f9 !important; }
html.dark .text-gray-800 { color: #e2e8f0 !important; }
html.dark .text-gray-700 { color: #cbd5e1 !important; }
html.dark .text-gray-600 { color: #94a3b8 !important; }
html.dark .text-gray-500 { color: #94a3b8 !important; }
html.dark .text-gray-400 { color: #64748b !important; }

/* Hover-Flächen */
html.dark .hover\:bg-gray-50:hover  { background-color: #263348 !important; }
html.dark .hover\:bg-gray-100:hover { background-color: #263348 !important; }

/* Header + Footer */
html.dark header { background-color: #1e293b !important; border-color: #334155 !important; }
html.dark footer { background-color: #1e293b !important; border-color: #334155 !important; }

/* Tabellen */
html.dark thead,
html.dark .bg-gray-50.thead { background-color: #1a2740 !important; }
html.dark tr:hover          { background-color: #263348 !important; }
html.dark .divide-gray-100 > * + * { border-color: #334155 !important; }

/* Inputs + Textareas + Selects */
html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
html.dark textarea,
html.dark select {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}
html.dark input::placeholder,
html.dark textarea::placeholder { color: #64748b !important; }

/* Dropdown / Autocomplete */
html.dark [x-show] .bg-white,
html.dark .shadow-lg.bg-white { background-color: #1e293b !important; }

/* Scrollbar */
html.dark ::-webkit-scrollbar-track { background: #1e293b; }
html.dark ::-webkit-scrollbar-thumb { background: #475569; }

/* Quill im Dark Mode */
html.dark .quill-editor .ql-toolbar  { background: #1a2740; border-color: #334155; }
html.dark .quill-editor .ql-container { border-color: #334155; }
html.dark .quill-editor .ql-editor    { background: #1e293b; color: #e2e8f0; }
html.dark .ql-toolbar .ql-stroke      { stroke: #94a3b8; }
html.dark .ql-toolbar .ql-fill        { fill: #94a3b8; }
html.dark .ql-toolbar button:hover .ql-stroke { stroke: #e2e8f0; }

/* Print: keine Navigation */
@media print {
    header, footer, aside, nav { display: none; }
    main { max-width: 100%; padding: 0; }
}

/* ============================================================
   Quill WYSIWYG Editor — Anpassungen ans Tailwind-Design
   ============================================================ */
.quill-editor .ql-toolbar {
    border-top-left-radius: 0.75rem;
    border-top-right-radius: 0.75rem;
    border-color: #e5e7eb;
    background: #f9fafb;
    font-family: inherit;
}
.quill-editor .ql-container {
    border-bottom-left-radius: 0.75rem;
    border-bottom-right-radius: 0.75rem;
    border-color: #e5e7eb;
    font-family: inherit;
    font-size: 0.875rem;
}
.quill-editor .ql-editor {
    padding: 0.75rem 1rem;
    line-height: 1.625;
    color: #374151;
    min-height: 14rem;
}
.quill-editor .ql-editor.ql-blank::before {
    color: #9ca3af;
    font-style: normal;
}
.quill-editor:focus-within .ql-toolbar,
.quill-editor:focus-within .ql-container {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59,130,246,0.25);
}

/* Quill-Output im Frontend */
.quill-content {
    overflow-wrap: break-word;
    word-break:    break-word;
    hyphens:       none;
}
.quill-content p   { margin-bottom: 0.75rem; }
.quill-content p:last-child { margin-bottom: 0; }
.quill-content ul,
.quill-content ol  { padding-left: 1.25rem; margin-bottom: 0.5rem; }
.quill-content li  { margin-bottom: 0.25rem; }
.quill-content ul  { list-style-type: disc; }
.quill-content ol  { list-style-type: decimal; }
.quill-content a   { color: #2563eb; text-decoration: underline; }
.quill-content a:hover { color: #1d4ed8; }