/* Custom Styles für Tenant und Seller Layouts */

/* CSS Variablen für zusätzliche Primärfarben (base.php) */
:root {
    --primary-blue: #6495ED;
    --primary-cyan: #87CEEB;
    --primary-purple: #8A2BE2;
    --primary-pink: #FFC0CB;
    --primary-peach: #FFDAB9;
    --primary-orange: #FFA07A;
    --primary-yellow: #FFD700;
}

/* Button Styles */
.btn-primary {
    background-color: var(--primary-color);
}
.btn-primary:hover {
    opacity: 0.9;
}

/* Text Styles */
.text-primary {
    color: var(--primary-color);
}

/* Border Styles */
.border-primary {
    border-color: var(--primary-color);
}

/* Menu Item Active */
.menu-item-active {
    background-color: var(--primary-color);
    color: white;
}
.menu-item-active:hover {
    opacity: 0.9;
}

/* Toggle Switch - Überschreibt peer-checked:bg-blue-600 */
.peer:checked ~ .toggle-primary-active {
    background-color: var(--primary-color) !important;
}

/* Toggle Focus Ring - Überschreibt peer-focus:ring-blue-300 */
.peer:focus ~ .toggle-primary-focus {
    --tw-ring-color: var(--primary-color) !important;
    --tw-ring-opacity: 0.5;
}

/* Alternative: Direkte Überschreibung für alle Toggle-Elemente */
input.peer:checked ~ div.toggle-primary-active {
    background-color: var(--primary-color) !important;
}

/* Link Styles */
.link-primary {
    color: var(--primary-color) !important;
}
.link-primary:hover {
    color: var(--primary-color) !important;
    opacity: 0.8;
}

/* Link Styles für Tenant-Farbe mit Hover */
a.text-primary,
.text-primary-link {
    color: var(--primary-color) !important;
}
a.text-primary:hover,
.text-primary-link:hover {
    color: var(--primary-color) !important;
    opacity: 0.8;
}

/* Hover Background */
.hover-bg-primary-light:hover {
    background-color: color-mix(in srgb, var(--primary-color) 10%, white) !important;
}

/* Selection/Tag Styles */
.tag-primary {
    background-color: color-mix(in srgb, var(--primary-color) 15%, white) !important;
    color: var(--primary-color) !important;
}

/* Focus Ring */
.focus-ring-primary:focus {
    --tw-ring-color: var(--primary-color) !important;
}

/* Selection Background */
.bg-selection-primary {
    background-color: color-mix(in srgb, var(--primary-color) 5%, white) !important;
}

/* Button Link Styles */
.btn-primary-link {
    background-color: var(--primary-color) !important;
}
.btn-primary-link:hover {
    background-color: var(--primary-color) !important;
    opacity: 0.9;
}

/* Tooltip Styles - Tailwind-basiert */
.tooltip-container {
    position: relative;
    display: inline-flex;
}

.tooltip {
    position: absolute;
    z-index: 99999;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease-in-out;
    overflow: visible;
    will-change: top, left;
}

.tooltip-container:hover .tooltip,
.tooltip-container:focus .tooltip {
    opacity: 1;
}

.tooltip-top {
    transform: none !important;
}

.tooltip-bottom {
    transform: none !important;
}

.tooltip-left {
    transform: none !important;
}

.tooltip-right {
    transform: none !important;
}

.tooltip-content {
    background-color: rgba(var(--primary-r, 31), var(--primary-g, 41), var(--primary-b, 55), 0.85);
    color: white;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    word-wrap: break-word;
    white-space: normal;
    line-height: 1.4;
    text-align: left;
    overflow-wrap: break-word;
    hyphens: auto;
    max-width: min(250px, calc(100vw - 32px));
    width: max-content;
    min-width: 0;
    overflow: visible;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Gradient Primary (base.php) */
.gradient-primary {
    background: linear-gradient(135deg, #6495ED 0%, #87CEEB 20%, #8A2BE2 40%, #BA55D3 60%, #FFC0CB 80%, #FFA07A 100%);
}

/* Pull-to-Refresh Styles */
#pull-to-refresh-indicator {
    will-change: transform;
}

#pull-to-refresh-indicator div {
    transition: background-color 0.2s ease, color 0.2s ease;
}

#pull-to-refresh-indicator svg {
    transition: transform 0.2s ease;
}

/* Überschreibe Standard-Blau durch Violett für öffentliche Seiten */
/* Diese Regeln gelten für alle Seiten, die base.php verwenden */
.focus\:ring-blue-500:focus,
.focus\:ring-blue-600:focus {
    --tw-ring-color: #7c3aed !important; /* Violett-600 */
}

.text-blue-600 {
    color: #7c3aed !important; /* Violett-600 */
}

.text-blue-800 {
    color: #5b21b6 !important; /* Violett-800 */
}

.hover\:text-blue-800:hover {
    color: #5b21b6 !important; /* Violett-800 */
}

.bg-blue-600 {
    background-color: #7c3aed !important; /* Violett-600 */
}

.bg-blue-700 {
    background-color: #6d28d9 !important; /* Violett-700 */
}

.hover\:bg-blue-700:hover {
    background-color: #6d28d9 !important; /* Violett-700 */
}

.border-blue-500 {
    border-color: #7c3aed !important; /* Violett-600 */
}

.focus\:border-blue-500:focus {
    border-color: #7c3aed !important; /* Violett-600 */
}