/* =============================================================================
   notifications.css — Batch N2, 2026-09-13.
   Χτισμένο πάνω στα ΠΡΑΓΜΑΤΙΚΑ CSS variables του site (variables.css) και
   στο ήδη υπάρχον .site-header .dropdown-menu/.dropdown-item θέμα
   (header.css) — ΔΕΝ ξαναορίζει border-radius/box-shadow/hover χρώματα του
   ίδιου του dropdown, μόνο ό,τι είναι ΕΙΔΙΚΟ στο notifications UI (icon
   bubbles, badge, τυπογραφία μέσα στη γραμμή). Το ίδιο το dropdown
   ($#notifDropdownMenu) είναι στάνταρ Bootstrap .dropdown-menu, άρα κληρονομεί
   αυτόματα το ήδη θεματοποιημένο site-header στυλ.
   ============================================================================= */

.notif-bell-toggle {
    position: relative;
}

/* Ρητό αίτημα Μάκη (2026-09-13): χωρίς caret-βέλος στο κουδούνι — Bootstrap
   προσθέτει αυτόματα ::after σε κάθε .dropdown-toggle. */
.notif-bell-toggle::after {
    display: none !important;
}

.notif-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background-color: var(--primary-dark-blue);
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    display: none;
}

#notifDropdownMenu {
    width: 340px;
    max-width: 90vw;
    padding: 0 !important;
    overflow: hidden;
    /* ΚΡΙΣΙΜΟ FIX (2026-09-13, live-confirmed bug): header.css ορίζει
       `.site-header .dropdown-menu { left: 0 !important; }` για ΟΛΑ τα
       dropdown του header (σωστό για το #languageDropdown, που είναι
       αριστερά-ευθυγραμμισμένο). Το δικό μας menu χρησιμοποιεί
       .dropdown-menu-end (θέλει δεξιά-ευθυγράμμιση), αλλά το site-wide
       `left:0 !important` το ακύρωνε — αποτέλεσμα: το popup ξεχείλιζε έξω
       από τη δεξιά άκρη της οθόνης. ID selector (#notifDropdownMenu) έχει
       μεγαλύτερη specificity από το class selector (.site-header
       .dropdown-menu) — κερδίζει ακόμα και με !important και στις δύο
       πλευρές. */
    left: auto !important;
    right: 0 !important;
}

.notif-dropdown-header {
    background: var(--gradient-blue-dark);
    color: #ffffff;
    padding: 16px 18px;
}

.notif-dropdown-header .notif-dropdown-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
}

.notif-dropdown-header .notif-dropdown-subtitle {
    font-size: 0.8rem;
    opacity: 0.85;
    margin: 2px 0 0;
}

.notif-dropdown-body {
    max-height: 360px;
    overflow-y: auto;
}

.notif-item {
    display: flex !important;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px !important;
    white-space: normal !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

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

.notif-item-icon {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background-color: var(--light-blue);
    font-size: 0.95rem;
}

/* Χρωματισμός icon bubble ανά notification type (icon field του
   arise_notification_types) — ίδιο σκεπτικό-χρωμάτων με τα ήδη υπάρχοντα
   badge variables, όχι νέες, τυχαίες αποχρώσεις. */
.notif-item-icon.notif-icon-check-circle  { background-color: var(--teal); }
.notif-item-icon.notif-icon-user-plus     { background-color: var(--light-blue); }
.notif-item-icon.notif-icon-mail          { background-color: var(--primary-dark-blue); }

.notif-item-content {
    flex: 1 1 auto;
    min-width: 0;
}

.notif-item-title {
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--text-dark);
}

.notif-item.notif-unread .notif-item-title::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--primary-dark-blue);
    margin-right: 6px;
    vertical-align: middle;
}

.notif-item-message {
    font-size: 0.8rem;
    color: rgba(50, 50, 50, 0.75); /* --text-dark στο 75% — ίδιο νόημα με "subtitle" gray του project */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.notif-item-time {
    flex: 0 0 auto;
    max-width: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.7rem;
    color: rgba(50, 50, 50, 0.55);
    background-color: var(--bg-light);
    padding: 2px 8px;
    border-radius: 999px;
}

.notif-dropdown-empty {
    padding: 32px 16px;
    text-align: center;
    color: rgba(50, 50, 50, 0.6);
    font-size: 0.85rem;
}

.notif-dropdown-footer {
    padding: 10px 16px;
    text-align: center;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.notif-dropdown-footer a {
    color: var(--primary-dark-blue);
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
}

.notif-dropdown-footer a:hover {
    text-decoration: underline;
}

/* ── "Προβολή όλων" full page (notifications/index.php) ─────────────────── */

#notifications-table td {
    vertical-align: middle;
}

#notifications-table th.notif-checkbox-col,
#notifications-table td.notif-checkbox-col,
#notifications-table th.notif-icon-col,
#notifications-table td.notif-icon-col {
    width: 32px;
    text-align: center;
}

#notifications-table tr.notif-row-unread {
    background-color: rgba(26, 71, 155, 0.04);
    font-weight: 600;
}