/*
 * STAQ-Zulip Overlay — STAQER-V3-Light Theme für Zulip 11.x
 * Erstellt: 2026-05-04, TM-415-Folge / Aug.-Prien-Cockpit-Vorbereitung
 * Injection via nginx sub_filter im staq-refdata-nginx Container.
 *
 * Source-Tokens: 10_REPOS/staqer-shared/lib/staq-design-v3.css
 * Strategie: Konservativer Skin (Farben + Fonts + Spacing). Layout bleibt Zulip.
 * Ziel: Aug.-Prien-Mandant sieht im Cockpit-Iframe einen STAQER-V3-Light-Look,
 * nicht den Default-Zulip-Look.
 */

/* ============================================================================
   1. STAQER-V3-Tokens als CSS-Vars (für eigene Selektoren unten)
   ============================================================================ */
:root {
    --staq-gold: #c9a227;
    --staq-gold-light: #d4b44d;
    --staq-gold-dark: #9a7a1f;
    --staq-bg-page: #ffffff;
    --staq-bg-surface: #f9fafb;
    --staq-bg-elevated: #f3f4f6;
    --staq-bg-sidebar: #fafaf9;
    --staq-border-light: #e5e7eb;
    --staq-border-default: #d1d5db;
    --staq-text-primary: #1a1a1a;
    --staq-text-secondary: #4b5563;
    --staq-text-muted: #9ca3af;
    --staq-radius-sm: 4px;
    --staq-radius-md: 8px;
    --staq-radius-lg: 12px;
    --staq-shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
    --staq-shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --staq-font-sans: 'Aptos', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
    --staq-font-mono: 'JetBrains Mono', 'SF Mono', 'Monaco', monospace;
}

/* ============================================================================
   2. Globale Typografie + Farb-Override
   ============================================================================ */
html, body, .app, .app-main, #zulip {
    font-family: var(--staq-font-sans) !important;
    color: var(--staq-text-primary) !important;
    background-color: var(--staq-bg-page) !important;
}

code, pre, .message_content code, .codehilite, .markdown pre {
    font-family: var(--staq-font-mono) !important;
}

/* ============================================================================
   3. Linke Sidebar (Streams + Topics)
   ============================================================================ */
.left-sidebar,
#left-sidebar,
.app-main .column-left {
    background-color: var(--staq-bg-sidebar) !important;
    border-right: 1px solid var(--staq-border-light) !important;
}

.left-sidebar .stream-list,
.left-sidebar .stream-name,
.left-sidebar .topic-name {
    color: var(--staq-text-secondary) !important;
}

.left-sidebar .stream-name:hover,
.left-sidebar .topic-name:hover {
    color: var(--staq-text-primary) !important;
    background-color: rgba(201,162,39,0.05) !important;
}

.left-sidebar .stream-row.active-filter,
.left-sidebar .topic-row.active-filter,
.left-sidebar .narrow_filter_row.active_filter {
    background-color: rgba(201,162,39,0.1) !important;
    border-left: 3px solid var(--staq-gold) !important;
}

.unread_count, .count_holder .value {
    background-color: var(--staq-gold) !important;
    color: #fff !important;
    border-radius: var(--staq-radius-sm) !important;
    font-weight: 600 !important;
}

/* ============================================================================
   4. Rechte Sidebar (Users + Search)
   ============================================================================ */
.right-sidebar,
#right-sidebar,
.app-main .column-right {
    background-color: var(--staq-bg-sidebar) !important;
    border-left: 1px solid var(--staq-border-light) !important;
}

.right-sidebar .user-name {
    color: var(--staq-text-secondary) !important;
}

/* ============================================================================
   5. Top-Navbar
   ============================================================================ */
.header,
.app-main .navbar,
#top_navbar,
.top-navbar {
    background-color: var(--staq-bg-page) !important;
    border-bottom: 1px solid var(--staq-border-light) !important;
    box-shadow: var(--staq-shadow-sm) !important;
}

.navbar-search input,
#search_query,
.search-input {
    background-color: var(--staq-bg-elevated) !important;
    border: 1px solid var(--staq-border-default) !important;
    border-radius: var(--staq-radius-md) !important;
    color: var(--staq-text-primary) !important;
}

.navbar-search input:focus,
#search_query:focus,
.search-input:focus {
    border-color: var(--staq-gold) !important;
    box-shadow: 0 0 0 2px rgba(201,162,39,0.15) !important;
    outline: none !important;
}

/* ============================================================================
   6. Message-Feed (Hauptbereich)
   ============================================================================ */
.message-feed,
.message_list,
#message_view_header,
.app-main .column-middle {
    background-color: var(--staq-bg-page) !important;
}

.recipient_row,
.message_header,
.message_header_stream,
.message_header_private_message {
    background-color: var(--staq-bg-elevated) !important;
    border-bottom: 1px solid var(--staq-border-light) !important;
    color: var(--staq-text-primary) !important;
}

.recipient_row .stream_name,
.message_header .stream {
    color: var(--staq-gold-dark) !important;
    font-weight: 600 !important;
}

.message_row {
    border-bottom: 1px solid var(--staq-border-light) !important;
    padding: 0.75rem 1rem !important;
}

.message_row:hover {
    background-color: rgba(201,162,39,0.02) !important;
}

.message_row .sender_name,
.message_row .message_sender_name,
.sender_name_row {
    color: var(--staq-text-primary) !important;
    font-weight: 600 !important;
}

.message_row .message_time,
.message_time,
.message_edit_notice {
    color: var(--staq-text-muted) !important;
}

.message_row .message_content,
.message_content {
    color: var(--staq-text-primary) !important;
    line-height: 1.5 !important;
}

/* ============================================================================
   7. Composer (Eingabefeld)
   ============================================================================ */
.compose-content,
#compose,
.compose_table,
.message_comp,
#compose_textarea {
    background-color: var(--staq-bg-surface) !important;
    border-top: 1px solid var(--staq-border-default) !important;
}

textarea#compose-textarea,
.compose_textarea,
.compose_table textarea {
    background-color: var(--staq-bg-page) !important;
    border: 1px solid var(--staq-border-default) !important;
    border-radius: var(--staq-radius-md) !important;
    color: var(--staq-text-primary) !important;
    font-family: var(--staq-font-sans) !important;
}

textarea#compose-textarea:focus,
.compose_textarea:focus {
    border-color: var(--staq-gold) !important;
    box-shadow: 0 0 0 2px rgba(201,162,39,0.15) !important;
    outline: none !important;
}

/* ============================================================================
   8. Buttons — Gold-Accent
   ============================================================================ */
.button,
.zulip-button,
.send_button,
#compose-send-button,
button[type="submit"],
.button-style-default {
    background-color: var(--staq-gold) !important;
    border: 1px solid var(--staq-gold-dark) !important;
    color: #fff !important;
    border-radius: var(--staq-radius-md) !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

.button:hover,
.zulip-button:hover,
.send_button:hover,
#compose-send-button:hover,
button[type="submit"]:hover {
    background-color: var(--staq-gold-dark) !important;
    box-shadow: 0 2px 8px rgba(201,162,39,0.25) !important;
    transform: translateY(-1px) !important;
}

.button.no-style,
.button-secondary,
.btn-link {
    background-color: transparent !important;
    color: var(--staq-text-secondary) !important;
    border: 1px solid var(--staq-border-default) !important;
}

.button.no-style:hover,
.button-secondary:hover {
    background-color: var(--staq-bg-elevated) !important;
    color: var(--staq-text-primary) !important;
    border-color: var(--staq-gold) !important;
}

/* ============================================================================
   9. Links + Mentions + Tags
   ============================================================================ */
a,
.message_content a,
.rendered_markdown a {
    color: var(--staq-gold-dark) !important;
    text-decoration: none !important;
}

a:hover,
.message_content a:hover {
    color: var(--staq-gold) !important;
    text-decoration: underline !important;
}

.user-mention,
.user_mention,
.mention {
    background-color: rgba(201,162,39,0.12) !important;
    color: var(--staq-gold-dark) !important;
    border-radius: var(--staq-radius-sm) !important;
    padding: 0 4px !important;
    font-weight: 500 !important;
}

.stream {
    color: var(--staq-gold-dark) !important;
    font-weight: 500 !important;
}

/* ============================================================================
   10. Modals + Dropdowns
   ============================================================================ */
.modal,
.modal-content,
.popover,
.dropdown-menu,
.simplebar-content {
    background-color: var(--staq-bg-page) !important;
    border: 1px solid var(--staq-border-default) !important;
    border-radius: var(--staq-radius-lg) !important;
    box-shadow: var(--staq-shadow-md) !important;
}

.modal-header,
.popover-title {
    border-bottom: 1px solid var(--staq-border-light) !important;
    color: var(--staq-text-primary) !important;
    font-weight: 600 !important;
}

/* ============================================================================
   11. Scrollbars (Webkit)
   ============================================================================ */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--staq-border-default);
    border-radius: var(--staq-radius-sm);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--staq-gold);
}

/* ============================================================================
   12. Login-/Welcome-Page
   ============================================================================ */
.portico-page,
.login-page,
.register-page,
.app-main .login_page {
    background-color: var(--staq-bg-page) !important;
    color: var(--staq-text-primary) !important;
}

.portico-page input,
.login-page input,
.register-page input {
    border: 1px solid var(--staq-border-default) !important;
    border-radius: var(--staq-radius-md) !important;
}

.portico-page input:focus,
.login-page input:focus,
.register-page input:focus {
    border-color: var(--staq-gold) !important;
    box-shadow: 0 0 0 2px rgba(201,162,39,0.15) !important;
}

/* ============================================================================
   13. Dark-Mode-Override (wenn Zulip-User Dark wählt) — STAQER-Dark-Tokens
   ============================================================================ */
html.dark-theme, body.dark-theme,
html[data-theme="dark"], body[data-theme="dark"] {
    --staq-bg-page: #06060a !important;
    --staq-bg-surface: #0a0a0f !important;
    --staq-bg-elevated: #111118 !important;
    --staq-bg-sidebar: #0a0a0f !important;
    --staq-border-light: rgba(201,162,39,0.08) !important;
    --staq-border-default: rgba(201,162,39,0.12) !important;
    --staq-text-primary: #f0ece2 !important;
    --staq-text-secondary: rgba(240,236,226,0.6) !important;
    --staq-text-muted: rgba(240,236,226,0.45) !important;
}

/* ============================================================================
   14. Aug.-Prien-spezifisch (kann später per Realm-spezifischer Subdomain
   ausgesteuert werden — aktuell global)
   ============================================================================ */
.realm-icon img {
    border-radius: var(--staq-radius-md) !important;
    border: 1px solid var(--staq-border-light) !important;
}