/*
 * Notification-System – Frontend-Styles (Phase 1).
 *
 * Eigenstaendige, additive Datei (kein LESS-/Grunt-Build noetig). Bewusst
 * mit dem Prefix .notif- gescopt, damit nichts am Bestand kollidiert.
 */

/* In der rechten Header-Icon-Leiste (ul.navbar-nav.pull-right), direkt
   neben dem Lautstaerke-Icon. Groesse/Hoehe an .volume-control und
   .settings-wrapper angeglichen (line-height: 42px), damit alle drei
   Icons exakt auf einer Linie sitzen. */
.notif-bell-li {
    margin-right: 18px;
}

#notif-bell-container {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    line-height: 42px;
    /* Hausschrift explizit – deckt Glocke, Badge und das Center (alles im
       Container) ab, statt nur auf die body-Vererbung zu vertrauen. */
    font-family: 'Oswald', sans-serif;
}

#notif-bell-toggle {
    display: inline-block;
    color: #fff; /* keine neuen Inhalte -> weiss (wie die uebrigen Header-Icons) */
    text-decoration: none;
    line-height: 42px;
    background: transparent;
    /* Kein Navbar-Padding: ab @media(max-width:1645px) setzt layout.less
       `.navbar-nav li a { padding:6px }` (Descendant-Selector) und wuerde diesen
       verschachtelten <a> nach unten schieben (Glocke aus der Icon-Linie). Die
       ID-Specificity haelt die Glocke auf einer Hoehe mit Lautstaerke/Zahnrad;
       auf Desktop ohnehin 0 -> dort wirkungslos. */
    padding: 0;
}

/* Hover-Feedback (pink, wie .volume-control) + kein grauer Bootstrap-Fokus-/
   Active-Kasten hinter der Glocke (offenes Dropdown). */
#notif-bell-toggle:hover,
#notif-bell-toggle:focus,
#notif-bell-toggle:active {
    color: #E1409E;
    background: transparent;
    outline: none;
    text-decoration: none;
}

#notif-bell-toggle .fa-bell {
    display: inline-block;
    font-size: 28px; /* gleiche Groesse wie .volume-control / Zahnrad */
    /* Zentrierung kommt vom 42px-line-height des Links; die Glocke selbst
       bleibt kompakt (line-height:1), damit die Badge am Glyph klebt und
       nicht ueber die 42px-Box hinausschiesst. */
    line-height: 1;
    vertical-align: middle;
    position: relative;
}

/* Neue (ungelesene) Inhalte -> Glocke pink, dazu die gruene Badge-Zahl.
   Ohne Ungelesene bleibt die Glocke weiss. */
#notif-bell-container.has-unread #notif-bell-toggle,
#notif-bell-container.has-unread #notif-bell-toggle .fa-bell {
    color: #E1409E;
}

/* Eigener Tooltip (Template-Klasse, in notifications.js gesetzt). Bewusst
   gescopt + !important, damit seitenspezifisches CSS (z. B. meinbigseven)
   ihn nicht aufblaeht. Andere Tooltips bleiben unberuehrt. */
.notif-tooltip {
    z-index: 10600 !important;
    /* an <body> gehaengt -> Hausschrift explizit erzwingen. */
    font-family: 'Oswald', sans-serif !important;
}

.notif-tooltip .tooltip-inner {
    max-width: 220px !important;
    padding: 4px 9px !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
    color: #fff !important;
    background-color: #000 !important;
    border-radius: 4px !important;
    white-space: nowrap !important;
    text-align: center !important;
}

.notif-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: #71AD16; /* Big7-Gruen (wie Kontakt-Button) – weisse Zahl */
    color: #fff;
    font-family: 'Oswald', sans-serif;
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    /* Schmaler Ring in der dunklen Header-Farbe -> Badge wirkt sauber aus der
       Glocke ausgeschnitten statt mit matschigem Schatten ueberlagert. */
    box-shadow: 0 0 0 2px #3a3a3a;
}

/* ---- Notification-Center (Dropdown) ---- */
.notif-center {
    position: absolute;
    top: 100%;
    right: 0;
    width: 360px;
    max-width: 92vw;
    background: #fff;
    color: #333;
    border: 1px solid #d5d5d5;
    border-radius: 4px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
    z-index: 10500;
    overflow: hidden;
}

.notif-center-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: #f4f4f4;
    border-bottom: 1px solid #e2e2e2;
    font-weight: bold;
    font-size: 14px;
}

.notif-center-header a {
    font-weight: normal;
    font-size: 12px;
    color: #71AD16;
    text-decoration: none;
    cursor: pointer;
}

.notif-center-body {
    /* 52vh statt 60vh: seit die Fusszeile (Wege zur Vollseite) dazugekommen
       ist, brauchen Kopf + Filter + Liste + Fuss zusammen Platz, ohne dass
       das Dropdown auf niedrigen Fenstern unten hinauslaeuft. */
    max-height: 52vh;
    overflow-y: auto;
}

/* ---- Fusszeile des Dropdowns: Wege auf die Vollseite ----
   Steht bewusst ausserhalb des scrollenden Listenbereichs und bleibt damit
   auch bei leerer Liste sichtbar. */
.notif-center-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 14px;
    background: #f4f4f4;
    border-top: 1px solid #e2e2e2;
}

.notif-center-footer a {
    /* Dunkleres Big7-Gruen: auf der hellen Leiste erreicht #71AD16 keine
       4,5:1 (s. .notif-undo-row .notif-undo). */
    color: #4A760E;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
}

.notif-center-footer a:hover,
.notif-center-footer a:focus {
    color: #456E0D;
    text-decoration: underline;
}

.notif-empty {
    padding: 28px 14px;
    text-align: center;
    /* #6b6b6b statt #999: 5,33:1 auf Weiss (WCAG AA fuer normalen Text). */
    color: #6b6b6b;
    font-size: 13px;
}

.notif-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.notif-item {
    display: flex;
    align-items: flex-start;
    padding: 10px 12px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background 0.12s ease;
}

.notif-item:hover {
    background: #f7f9f2;
}

.notif-item.notif-unread {
    background: #f0f6e6;
}

.notif-item.notif-unread:hover {
    background: #e8f1d8;
}

.notif-item-icon {
    flex: 0 0 28px;
    width: 28px;
    text-align: center;
    color: #81C121;
    font-size: 16px;
    margin-top: 2px;
}

.notif-channel-system .notif-item-icon { color: #e3001b; }
.notif-channel-sales .notif-item-icon  { color: #f0a30a; }

.notif-item-main {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 6px;
}

.notif-item-title {
    font-weight: bold;
    font-size: 13px;
    margin-bottom: 1px;
}

.notif-item-body {
    font-size: 12px;
    color: #555;
    word-wrap: break-word;
    overflow-wrap: break-word;
    /* Zeilenumbrueche UND Leerzeilen des redaktionellen Textes (\n) als echte
       Umbrueche darstellen, mit kompakter Zeilenhoehe. Oswald hat reichlich
       vertikale Metrik -> bewusst eng.
       Bewusst pre-WRAP, nicht pre-line: pre-line fasst Leerraum-Folgen
       zusammen (Mehrfach-Leerzeichen, Einrueckungen; historisch nach CSS 2.1
       auch aufeinanderfolgende Umbrueche) und ist damit der laschere Wert.
       pre-wrap erhaelt den Text zeichengetreu und ist derselbe Wert, den die
       Admin-Vorschau nutzt -> Vorschau und Karte koennen nicht auseinander
       laufen. Grosse Luecken entstehen davon nicht, weil notifications.js die
       Leerzeilen vorher begrenzt:
       cleanParagraphs() laesst hoechstens EINE zusammenhaengende Leerzeile
       stehen und kappt fuehrende/abschliessende, cleanMultiline() (Admin-
       Begruendungen) schliesst Leerzeilen ganz.
       ACHTUNG, derselbe Wert steht in den Admin-Vorschauen — beim Aendern hier
       BEIDE mitziehen, sonst zeigt die Vorschau etwas, was der Amateur nie
       sieht: tmpl/admin/notification_postings.php (.np-card .bdy) und
       tmpl/admin/notification_auto_rules.php (.nar-card .bdy). */
    white-space: pre-wrap;
    line-height: 1.25;
    /* Lange Begruendungen im Dropdown auf ~6 Zeilen begrenzen (Rest beim
       Lesen sichtbar – Center-Body scrollt). */
    max-height: 8.1em;
    overflow: hidden;
}

.notif-item.notif-unread .notif-item-body,
.notif-item.notif-open .notif-item-body {
    /* Ungelesene komplett zeigen (frische, u. U. wichtige Info); geklemmte
       (gelesene) Eintraege lassen sich per Klick wieder aufklappen
       (.notif-open wird in notifications.js getoggelt). */
    max-height: none;
    overflow: visible;
}

/* Die Zeitzeile traegt jetzt zwei Dinge: links die Zeitangabe, rechts den
   Hinweis "ganze Nachricht lesen" (nur bei tatsaechlich abgeschnittenem Text,
   gemessen in notifications.js -> notifSyncMoreHint). Flex MIT Umbruch: im
   engen Glocken-Aufklapper und auf schmalen Fenstern rutscht der Hinweis in
   eine zweite Zeile, statt die Karte waagerecht zu sprengen. */
.notif-item-time {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    font-size: 11px;
    /* #6b6b6b statt #aaa: 5,33:1 auf der weissen Karte (vorher 2,32:1). */
    color: #6b6b6b;
    margin-top: 3px;
}

/* Hinweis auf abgeschnittenen Text. Bewusst KEIN Link und keine Schaltflaeche,
   sondern nur unterstrichener Text, der klickbar aussieht – aufgeklappt wird
   ueber die vorhandene Klick-Bindung der Karte, eine zweite gibt es nicht.
   (Die Unterstreichung haengt zusaetzlich inline am Element, s. dort: das
   Stylesheet wird mit festem ?v= ausgeliefert und ist lange gecacht.)
   Farbe: dasselbe dunklere Big7-Gruen wie Fusszeile und Rueckgaengig-Leiste,
   also kein neuer Farbwert – 5,40:1 auf der weissen Karte und 5,09:1 auf dem
   Ueberfahr-Ton #f7f9f2. Auf dem getoenten Ungelesen-Gruen erscheint er gar
   nicht (ungelesene Karten sind nicht geklemmt), dort waere er mit 4,89:1
   aber ebenfalls in Ordnung. */
.notif-item-more {
    margin-left: auto; /* rechtsbuendig, auch allein in der Umbruch-Zeile */
    padding-left: 10px;
    color: #4A760E;
}

.notif-item:hover .notif-item-more {
    color: #456E0D; /* 6,02:1 auf Weiss, 5,67:1 auf #f7f9f2 */
}

/* Optionaler CTA-Button (Tips-Postings mit Link). Eigener Klick-Target statt
   Ganz-Karten-Redirect -> kein ungewolltes Wegleiten; oeffnet im selben Tab
   (das "gelesen" geht vorher per sendBeacon raus, s. notifications.js). */
.notif-cta {
    display: inline-block;
    margin-top: 6px;
    padding: 4px 12px;
    background: #71AD16; /* Big7-Gruen (wie Kontakt-Button) */
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    line-height: 1.4;
    border-radius: 3px;
    text-decoration: none;
}

.notif-cta:hover,
.notif-cta:focus {
    background: #5f9512;
    color: #fff;
    text-decoration: none;
}

/* Aktions-Symbol rechts an der Karte. Es gibt nur noch zwei: Archiv-Symbol
   (Pflicht-Kanal im Posteingang) und Muelltonne (abschaltbarer Kanal bzw.
   Archiv). Das frueher genutzte Kreuz-Symbol ist ersatzlos entfallen, damit
   dasselbe Symbol nicht an zwei Stellen zwei Dinge bedeutet. Gilt fuer
   Glocke UND Seite. */
.notif-action {
    flex: 0 0 26px;
    width: 26px;
    text-align: center;
    /* #757575 statt #999: 4,61:1 auf der weissen Karte (vorher 2,85:1). */
    color: #757575;
    font-size: 15px;
    line-height: 1.5;
    text-decoration: none;
}

.notif-action:hover,
.notif-action:focus {
    color: #e3001b; /* Loeschen -> Warnfarbe */
    text-decoration: none;
}

/* Archivieren nimmt nichts weg -> gruen statt rot. */
.notif-action.notif-archive:hover,
.notif-action.notif-archive:focus {
    color: #71AD16;
}

/* Rueckgaengig-Leiste: steht fuer wenige Sekunden an der Stelle des
   geloeschten Eintrags (kein Bestaetigungsdialog davor). */
.notif-undo-row {
    display: flex;
    align-items: center;
    padding: 14px 12px;
    border-bottom: 1px solid #f0f0f0;
    background: #fafafa;
    /* #6b6b6b statt #777: 5,11:1 auf #fafafa (vorher 4,29:1). */
    color: #6b6b6b;
    font-size: 13px;
}

.notif-undo-row .notif-undo-text {
    margin-right: 6px;
}

.notif-undo-row .notif-undo {
    /* Dunkleres Big7-Gruen: 5,17:1 auf #fafafa. #71AD16 kam dort nur auf
       2,34:1 – auf hellem Grund ist das Standard-Gruen zu schwach. */
    color: #4A760E;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
}

.notif-undo-row .notif-undo:hover,
.notif-undo-row .notif-undo:focus {
    color: #456E0D;
    text-decoration: underline;
}

@media (max-width: 480px) {
    .notif-center {
        position: fixed;
        top: 56px;
        right: 4px;
        left: 4px;
        width: auto;
    }
}

/* ---- Zahnrad im Center-Header (Link zur Settings-Seite) ---- */
.notif-center-header .notif-settings-link {
    margin-left: 10px;
    color: #888;
    font-size: 14px;
}

.notif-center-header .notif-settings-link:hover {
    color: #71AD16;
}

/* ---- Settings-Seite (Phase 3): Kanal-x-Weg-Matrix ---- */
.portal-notif-intro {
    font-size: 13px;
    color: #555;
    margin: 4px 0 16px;
}

.portal-notif-loading,
.portal-notif-error {
    padding: 18px 0;
    color: #999;
    font-size: 13px;
}

.portal-notif-error {
    color: #e3001b;
}

.portal-notif-saved {
    display: inline-block;
    margin: 8px 0;
    padding: 4px 10px;
    border-radius: 3px;
    background: #f0f6e6;
    color: #5a8a00;
    font-size: 12px;
}

.portal-notif-channel {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    /* Falls die Zeile (z. B. durch ein Eltern-Layout) hoeher wird als noetig:
       gewrappte Flex-Zeilen oben sammeln statt vertikal auseinanderziehen
       (sonst grosse Luecke zwischen Kopf und Wegen). */
    align-content: flex-start;
    padding: 12px 0;
    border-bottom: 1px solid #eee;
}

.portal-notif-channel-head {
    flex: 1 1 220px;
    min-width: 180px;
    padding-right: 12px;
}

.portal-notif-channel-label {
    font-weight: bold;
    font-size: 14px;
}

.portal-notif-channel-desc {
    font-size: 12px;
    color: #888;
    margin-top: 2px;
}

.portal-notif-ways {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.portal-notif-toggle {
    display: inline-flex;
    align-items: center;
    margin: 4px 0 4px 18px;
    font-weight: normal;
    cursor: pointer;
}

.portal-notif-toggle input[type=checkbox] {
    margin: 0 6px 0 0;
}

.portal-notif-toggle.is-locked {
    cursor: default;
    color: #999;
}

.portal-notif-toggle-text {
    font-size: 13px;
}

.portal-notif-locked-hint {
    margin-left: 5px;
    font-size: 12px;
}

/* Mobil (Big7 setzt serverseitig die Klasse .mobile am <body>; daran koppeln
   statt an eine CSS-Breite, weil Mobil teils >600px breit rendert) ODER
   schmale Viewports: Kanal-Zeile als simpler Block -> Kopf + Wege gestapelt,
   kein Flex-Spreading. */
body.mobile .portal-notif-channel {
    display: block;
    padding: 12px 0;
}
body.mobile .portal-notif-channel-head {
    padding-right: 0;
}
body.mobile .portal-notif-ways {
    margin-top: 8px;
}
body.mobile .portal-notif-toggle {
    margin: 4px 18px 4px 0;
}

@media (max-width: 600px) {
    .portal-notif-channel {
        display: block;
        padding: 12px 0;
    }
    .portal-notif-channel-head {
        padding-right: 0;
    }
    .portal-notif-ways {
        margin-top: 8px;
    }
    .portal-notif-toggle {
        margin: 4px 18px 4px 0;
    }
}

/* Zaehler im Mobile-Menue: gleiches Gruen wie der NACHRICHTEN-Zaehler
   (mobile_menu.less: #messages-mobile-link > .badge -> #008E18).
   Vertikal exakt wie der NACHRICHTEN-Badge zentriert: absolut, top:14px
   ((45px Zeile - ~18px Badge)/2). Der umgebende <a> ist position:relative
   (mobile_menu.less). KEIN festes left wie beim NACHRICHTEN-Badge, da
   "BENACHRICHTIGUNGEN" laenger/variabel ist -> left:auto behaelt die
   horizontale Fliessposition (direkt hinter dem Text). margin-left schafft
   den Abstand zum Text: bei position:absolute kollabiert der HTML-Leerraum
   vor dem Badge, daher explizit (analog zum Gap, den der NACHRICHTEN-Badge
   ueber left:157px hat). (vertical-align:middle sass an der x-Hoehen-Mitte
   zu hoch -> verworfen.) */
#notif-mobile-nav-link > .badge {
    background-color: #008E18;
    position: absolute;
    top: 14px;
    margin-left: 8px;
}

/* ---- Notification-Inbox (Phase 1): Vollseiten-Liste (v. a. Mobil) ---- */
.portal-notif-inbox {
    font-family: 'Oswald', sans-serif;
}

.notif-inbox-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0 10px;
    border-bottom: 1px solid #e2e2e2;
    margin-bottom: 4px;
}

.notif-inbox-bar a {
    color: #71AD16;
    text-decoration: none;
    font-size: 13px;
}

.notif-inbox-bar a:hover {
    text-decoration: underline;
}

/* Liste auf der Inbox-Seite nutzt dieselben .notif-item-Styles wie das
   Dropdown; hier nur der Rahmen/Hintergrund der Seite. */
.portal-notif-inbox .notif-list {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 4px;
}

.portal-notif-inbox .notif-item:last-child {
    border-bottom: none;
}

.portal-notif-inbox .notif-empty {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 4px;
}

/* ---- Kanal-Filter (Dropdown) – Center + Inbox ---- */
.notif-center-filter {
    padding: 8px 14px;
    background: #fafafa;
    border-bottom: 1px solid #ececec;
}

.notif-inbox-filter {
    margin: 0 0 10px;
}

.notif-channel-filter {
    width: 100%;
    max-width: 100%;
    padding: 6px 8px;
    font-size: 13px;
    color: #333;
    background: #fff;
    border: 1px solid #d5d5d5;
    border-radius: 4px;
    cursor: pointer;
    -webkit-appearance: menulist;
       -moz-appearance: menulist;
            appearance: menulist;
}

.notif-channel-filter:focus {
    outline: none;
    border-color: #E1409E;
}