/* ============================================================
   ChiefOps WoS - Haupt-Stylesheet
   WOS-Stil: Frost/Eis-Thema mit dunklem Standard
   ============================================================ */

/* Safe Area für iOS */
.safe-area-bottom {
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Touch Targets */
.tap-target {
    min-width: 44px;
    min-height: 44px;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #1B3A5C;
    border-radius: 3px;
}
.dark ::-webkit-scrollbar-thumb {
    background: #2E86C1;
}

/* WOS Panel Style */
.wos-panel {
    background: rgba(27, 58, 92, 0.15);
    border: 1px solid rgba(46, 134, 193, 0.2);
    border-radius: 12px;
    backdrop-filter: blur(4px);
}
.dark .wos-panel {
    background: rgba(27, 58, 92, 0.3);
    border-color: rgba(46, 134, 193, 0.3);
}

/* Glow Effect für Icons */
.glow-icon {
    filter: drop-shadow(0 0 6px rgba(46, 134, 193, 0.4));
}

/* Inaktivitäts-Ampel */
.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}
.status-gruen { background: #27AE60; box-shadow: 0 0 6px rgba(39, 174, 96, 0.4); }
.status-gelb { background: #E67E22; box-shadow: 0 0 6px rgba(230, 126, 34, 0.4); }
.status-rot { background: #E74C3C; box-shadow: 0 0 6px rgba(231, 76, 60, 0.4); }

/* Loading Spinner */
.spinner {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(46, 134, 193, 0.2);
    border-top-color: #2E86C1;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Transitions */
.slide-up {
    animation: slideUp 0.3s ease-out;
}
@keyframes slideUp {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Mobile Menu Animations */
#mobile-menu .absolute:last-child {
    transition: transform 0.3s ease-out;
}

/* Embed Preview */
.embed-preview {
    border-left: 4px solid #2E86C1;
    background: rgba(27, 58, 92, 0.1);
    padding: 12px 16px;
    border-radius: 0 8px 8px 0;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    main {
        padding-left: 12px;
        padding-right: 12px;
    }
}