/* ============================================================
   medwissen.ch — shared.css
   Loaded by every header.inc.php via absolute URL.
   Put ALL cross-site UI improvements here so any change
   automatically applies to every page on the site.
   ============================================================ */

/* ── Level selector (Student / Advanced / Expert) ───────────── */
.lvlBar {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 12px 0 14px 0 !important;
    align-items: center !important;
}
.lvlBtn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 9px 20px !important;
    border-radius: 24px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    font-family: 'Segoe UI', Arial, sans-serif !important;
    cursor: pointer !important;
    border: 2px solid transparent !important;
    text-decoration: none !important;
    line-height: 1 !important;
    float: none !important;
    width: auto !important;
    min-height: auto !important;
    margin-top: 0 !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}
.lvlBtn:hover  { opacity: 0.85 !important; }
.lvlStudent:hover    { background: #cce4f7 !important; color: #1a5a8a !important; }
.lvlAdvanced:hover   { background: #d4edda !important; color: #1e6e38 !important; }
.lvlExpert:hover     { background: #fdd9d7 !important; color: #9b1c1c !important; }
.lvlActive.lvlStudent:hover  { background: #267bb6 !important; color: #fff !important; }
.lvlActive.lvlAdvanced:hover { background: #1e6e38 !important; color: #fff !important; }
.lvlActive.lvlExpert:hover   { background: #c0392b !important; color: #fff !important; }
.lvlStudent    { background: #e8f4fd !important; color: #1a5a8a !important; border-color: #7ab8e0 !important; }
.lvlAdvanced   { background: #e6f4ea !important; color: #1e6e38 !important; border-color: #7ecb97 !important; }
.lvlExpert     { background: #fdf0ef !important; color: #9b1c1c !important; border-color: #e8a09a !important; }
.lvlActive.lvlStudent  { background: #267bb6 !important; color: #fff !important; border-color: #267bb6 !important; }
.lvlActive.lvlAdvanced { background: #1e6e38 !important; color: #fff !important; border-color: #1e6e38 !important; }
.lvlActive.lvlExpert   { background: #c0392b !important; color: #fff !important; border-color: #c0392b !important; }
.lvlActive { cursor: default !important; pointer-events: none !important; }

/* ── Profile action row (Add Friend / Send Message / Poke) ───── */
.profileActionRow {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 4px !important;
}
.pabBtn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 9px 18px !important;
    border-radius: 24px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    font-family: 'Segoe UI', Arial, sans-serif !important;
    cursor: pointer !important;
    text-decoration: none !important;
    border: none !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    float: none !important;
    width: auto !important;
    min-height: auto !important;
    margin-top: 0 !important;
    box-sizing: border-box !important;
    text-transform: none !important;
}
.pabBtn:hover { opacity: 0.88 !important; background-color: inherit !important; color: inherit !important; }
.pabAddFriend  { background: #2176ae !important; color: #fff !important; border: none !important; }
.pabAddFriend:hover  { background: #2176ae !important; color: #fff !important; }
.pabUnfriend   { background: #f4f5f6 !important; color: #556 !important; border: 1.5px solid #cdd0d4 !important; }
.pabUnfriend:hover   { background: #f4f5f6 !important; color: #556 !important; }
.pabReqSent    { background: #e8f0fb !important; color: #2176ae !important; border: 1.5px solid #b5cef0 !important; cursor: pointer !important; }
.pabReqSent:hover { background: #fce8e8 !important; color: #c0392b !important; border-color: #e07070 !important; }
.pabSendMsg    { background: #1a3a5c !important; color: #fff !important; border: none !important; }
.pabSendMsg:hover    { background: #1a3a5c !important; color: #fff !important; }
.pabPoke       { background: #fff8f0 !important; color: #b35e00 !important; border: 1.5px solid #e07b00 !important; }
.pabPoke:hover       { background: #fff8f0 !important; color: #b35e00 !important; }
.pabPokeBack   { background: #e07b00 !important; color: #fff !important; }
.pabPokeBack:hover   { background: #e07b00 !important; color: #fff !important; }
.pabPokeWait   { background: #f4f5f6 !important; color: #888 !important; border: 1.5px solid #cdd0d4 !important; cursor: default !important; pointer-events: none !important; }

/* ── Poke cards (my_pokes.php) ───────────────────────────────── */
#pokePage { max-width: 680px; margin: 24px auto 50px; font-family: 'Segoe UI', Arial, sans-serif; }
#pokePage h2 { font-size: 1.3rem !important; font-weight: 700 !important; color: #1a3a5c !important; margin: 0 0 4px !important; }
#pokePage .pkSub { font-size: 0.88rem; color: #778; margin-bottom: 20px; }
#pokePage .pkBanner { padding: 11px 16px; border-radius: 8px; font-size: 0.88rem; font-weight: 500; margin-bottom: 16px; }
#pokePage .pkBannerOk   { background: #e6f4ea; color: #2a6e3f; }
#pokePage .pkBannerInfo { background: #f4f8fc; color: #1a3a5c; }
#pokePage .pkEmpty { text-align: center; padding: 50px 20px; color: #889; font-size: 0.95rem; background: #f8fafc; border: 1px dashed #cdd8e4; border-radius: 12px; }
#pokePage .pkGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); gap: 14px; }
#pokePage .pkCard { background: #fff; border: 1px solid #d8e4f0; border-radius: 12px; padding: 20px 14px 14px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 9px; }
#pokePage .pkAvatar { width: 68px; height: 68px; border-radius: 50%; object-fit: cover; border: 3px solid #e0eaf5; }
#pokePage .pkInitials { width: 68px; height: 68px; border-radius: 50%; background: #e8f0fb; color: #0c447c; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; font-weight: 700; border: 3px solid #e0eaf5; }
#pokePage .pkEmoji { font-size: 1.6rem; line-height: 1; }
#pokePage .pkName { font-size: 0.97rem; font-weight: 700; color: #1a3a5c; }
#pokePage .pkMsg { font-size: 0.80rem; color: #778; }
#pokePage .pkProfileLink { font-size: 0.78rem; color: #2176ae; text-decoration: none; }
#pokePage .pkProfileLink:hover { text-decoration: underline; }
#pokePage .pkActions { display: flex; gap: 7px; width: 100%; }
#pokePage .pkBtnBack { flex: 1; background: #e07b00 !important; color: #fff !important; border: none !important; border-radius: 8px !important; padding: 9px 0 !important; font-size: 0.88rem !important; font-weight: 600 !important; cursor: pointer !important; float: none !important; width: auto !important; }
#pokePage .pkBtnBack:hover { background: #c06800 !important; color: #fff !important; }
#pokePage .pkBtnDismiss { flex: 1; background: #fff !important; color: #556 !important; border: 1.5px solid #c8d8e8 !important; border-radius: 8px !important; padding: 9px 0 !important; font-size: 0.88rem !important; font-weight: 600 !important; cursor: pointer !important; float: none !important; width: auto !important; }
#pokePage .pkBtnDismiss:hover { background: #f4f8fc !important; color: #556 !important; }

/* ── Friend request cards (friend_requests.php) ──────────────── */
#frPage { max-width: 720px; margin: 24px auto 50px; font-family: 'Segoe UI', Arial, sans-serif; }
/* ── Mobile: level buttons & action buttons stack nicely ──────── */
@media (max-width: 700px) {
    .lvlBtn { padding: 8px 14px !important; font-size: 13px !important; }
    .pabBtn { padding: 8px 14px !important; font-size: 13px !important; }
}


/* Brain-logo notification badge: red number for unread messages + pending
   friend requests + pending pokes, shown wherever the brain logo appears. */
.mwLogoWrap { position: relative; display: inline-block; }
.mwLogoBadge { position: absolute; top: -4px; right: -4px; background: #e02020; color: #fff; border-radius: 50%; font-size: 11px; font-weight: 700; min-width: 19px; height: 19px; padding: 0 4px; display: flex; align-items: center; justify-content: center; line-height: 1; box-shadow: 0 0 0 2px #fff; pointer-events: none; }


/* Menu-button notification badge: total count shown on the "Menu" button
   itself (without opening the dropdown), same red badge used on the logo. */
.mwMenuBtnWrap { position: relative; display: inline-block; }
.mwMenuBtnWrap .mwLogoBadge { top: -6px; right: -6px; }


/* Notification count shown as "(N)" in red, matching the plain-text style of
   the Messages menu entry - used for Messages/Pokes/Friend requests and the
   Menu button's own total, instead of a round badge. */
.mwCountRed { color: #e02020; font-weight: 700; }