/* Clopoțelul de notificări — foaia de stil, scrisă de la zero.
 *
 * Componenta trăiește în ȘASE aplicații, fiecare cu tema ei. Vechea foaie completa
 * doar ce lipsea și se sprijinea pe clasele temei pentru rest — deci arăta altfel în
 * fiecare, iar o corecție într-una nu se vedea în celelalte.
 *
 * Aici totul e declarat explicit, pe clasele componentei. Ce vine din temă se rescrie
 * deliberat, nu se moștenește din întâmplare.
 *
 * MARCAJUL NU SE SCHIMBĂ: `clopotel.js` construiește rândurile cu exact aceste clase
 * (`notification-item`, `__link`, `__title`, `__kind--succes`, `__dismiss`), iar
 * `clopotel.html` păstrează atributele `data-` pe care le citește. Frontend, atât.
 */

/* ── Butonul ─────────────────────────────────────────────────────────────────
 * Centrarea o face butonul, nu o translație în desen. Selectorul repetă ancestorii
 * temei fiindcă regula ei — care pune `justify-content: flex-start` pentru linkurile
 * cu etichetă — are specificitate (0,3,2); una simplă pe clasa componentei n-ar avea
 * niciun efect, iar iconița rămânea lipită de marginea stângă a cercului.
 */
.pasaport-notification-dropdown { position: relative; }

.pasaport-notification-dropdown > .pasaport-icon-button,
html.pasaport-nav-open body.pasaport-shell--signed-in .pasaport-notification-dropdown > .pasaport-icon-button,
body.pasaport-shell--signed-in.pasaport-nav-open .pasaport-notification-dropdown > .pasaport-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0;
  line-height: 0;
  position: relative;
}

.pasaport-notification-dropdown > .pasaport-icon-button > svg {
  display: block;
  width: 1.35rem;
  height: 1.35rem;
  margin: 0;
  transform-origin: 50% 15%;
}

/* ── Clopoțelul care sună ────────────────────────────────────────────────────
 * Când sunt notificări necitite, clopoțelul se clatină scurt la fiecare câteva
 * secunde. Animația e o pauză lungă cu o mișcare scurtă la început: una continuă
 * ar deveni zgomot pe care ochiul îl ignoră în două minute, exact opusul scopului.
 *
 * Pornită de clasa `.are-necitite`, pusă de JS pe rădăcină. Nimic inline, deci nimic
 * de care să se lege CSP — foaia e un fișier static, ca oricare altul.
 */
@keyframes clopotel-suna {
   0%   { transform: rotate(0deg); }
   2%   { transform: rotate(13deg); }
   5%   { transform: rotate(-11deg); }
   8%   { transform: rotate(9deg); }
  11%   { transform: rotate(-7deg); }
  14%   { transform: rotate(4deg); }
  17%   { transform: rotate(-2deg); }
  20%   { transform: rotate(0deg); }
 100%   { transform: rotate(0deg); }
}

.pasaport-notification-dropdown.are-necitite > .pasaport-icon-button > svg {
  animation: clopotel-suna 4.5s ease-in-out infinite;
}

/* Cât timp meniul e deschis, notificările sunt deja sub ochi: mișcarea n-ar mai
 * anunța nimic, ar doar distrage. */
.pasaport-notification-dropdown.are-necitite > .pasaport-icon-button[aria-expanded="true"] > svg {
  animation: none;
}

/* ── Pastila cu numărul ──────────────────────────────────────────────────────
 * Ancorată de colțul butonului, nu în fluxul lui: în flux, împingea iconița din
 * centru exact cât era ea de lată, deci clopoțelul se muta după câte notificări ai.
 */
.pasaport-notification-dropdown .pasaport-rail-badge {
  position: absolute;
  top: 0.15rem;
  right: 0.15rem;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 0.28rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #d9541f;
  color: #fff;
  font-size: 0.66rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px #fff;
  pointer-events: none;
}

.pasaport-notification-dropdown .pasaport-rail-badge.d-none { display: none !important; }

/* Un puls slab în jurul pastilei, la unison cu clopoțelul. */
@keyframes clopotel-puls {
   0%   { box-shadow: 0 0 0 2px #fff, 0 0 0 0 rgba(217, 84, 31, 0.5); }
  12%   { box-shadow: 0 0 0 2px #fff, 0 0 0 0.5rem rgba(217, 84, 31, 0); }
 100%   { box-shadow: 0 0 0 2px #fff, 0 0 0 0 rgba(217, 84, 31, 0); }
}

.pasaport-notification-dropdown.are-necitite .pasaport-rail-badge {
  animation: clopotel-puls 4.5s ease-out infinite;
}

/* ── Panoul ──────────────────────────────────────────────────────────────────
 * Lățime fixă, ca titlurile lungi să se rupă previzibil, și înălțime plafonată cu
 * derulare doar pe listă: antetul și subsolul rămân la vedere când derulezi.
 */
.pasaport-notification-dropdown .notification-menu {
  width: min(23rem, calc(100vw - 2rem));
  padding: 0;
  border: 1px solid #e4ebf4;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06), 0 18px 44px rgba(15, 23, 42, 0.16);
  overflow: hidden;
}

.notification-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.85rem 1rem 0.7rem;
  border-bottom: 1px solid #eef2f7;
}

.notification-menu__header > strong {
  font-size: 0.9rem;
  font-weight: 800;
  color: #16324f;
}

.notification-menu__header > a {
  font-size: 0.78rem;
  font-weight: 700;
  color: #0f67be;
  text-decoration: none;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  transition: background-color 0.13s ease;
}

.notification-menu__header > a:hover,
.notification-menu__header > a:focus-visible {
  background: rgba(15, 103, 190, 0.09);
  color: #0f67be;
}

.notification-menu__header > a.d-none { display: none !important; }

.notification-menu__list {
  max-height: min(24rem, 60vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.4rem;
  display: grid;
  gap: 0.3rem;
}

/* Bara de derulare, discretă: cea implicită taie din lățimea rândurilor și se vede
 * mai tare decât conținutul. */
.notification-menu__list::-webkit-scrollbar { width: 8px; }
.notification-menu__list::-webkit-scrollbar-thumb {
  background: #d9e2ec;
  border-radius: 999px;
  border: 2px solid #fff;
}
.notification-menu__list::-webkit-scrollbar-track { background: transparent; }

/* ── Un rând ─────────────────────────────────────────────────────────────────
 * Banda colorată din stânga spune felul notificării fără cuvinte în plus; eticheta
 * (SUCCES/EROARE) rămâne, fiindcă la daltonism sau tipărit alb-negru culoarea singură
 * nu spune nimic.
 */
.notification-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.6rem 0.6rem 0.6rem 0.85rem;
  border-radius: 11px;
  background: #f8fbfe;
  transition: background-color 0.13s ease;
}

.notification-item::before {
  content: "";
  position: absolute;
  left: 0.32rem;
  top: 0.6rem;
  bottom: 0.6rem;
  width: 3px;
  border-radius: 3px;
  background: #b8c6d6;
}

.notification-item:hover { background: #eef5fd; }

.notification-item:has(.notification-item__kind--succes)::before { background: #1f7a4d; }
.notification-item:has(.notification-item__kind--eroare)::before { background: #b3261e; }
.notification-item:has(.notification-item__kind--avertisment)::before { background: #8a5a00; }

.notification-item__link {
  flex: 1;
  min-width: 0;
  display: block;
  text-decoration: none;
  color: inherit;
}

.notification-item__title {
  font-size: 0.84rem;
  font-weight: 700;
  color: #16324f;
  line-height: 1.35;
  /* Titlurile sunt de forma „Încărcare <tip> nr. <uuid>": pe trei rânduri, un singur
   * element umple tot panoul. Două rânduri, apoi tăiat. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.notification-item__link:hover .notification-item__title { color: #0f67be; }

.notification-item__link > small {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 0.15rem;
  font-size: 0.78rem;
  line-height: 1.4;
  color: rgba(22, 50, 79, 0.62);
  overflow-wrap: anywhere;
}

.notification-item__link > span {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.4rem;
  font-size: 0.72rem;
  color: rgba(22, 50, 79, 0.48);
}

/* ── Eticheta de fel ─────────────────────────────────────────────────────────
 * `!important` deliberat: temele aplicațiilor au reguli mai specifice pe pastile și
 * răsturnau culoarea textului, scoțând verde-închis pe verde-deschis. O componentă
 * comună nu poate ști ce temă o găzduiește.
 */
.notification-item__kind {
  display: inline-flex;
  align-items: center;
  padding: 0.08rem 0.42rem;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #fff !important;
  background: #46617f !important;
}

.notification-item__kind--succes { background: #1f7a4d !important; }
.notification-item__kind--eroare { background: #b3261e !important; }
.notification-item__kind--avertisment { background: #8a5a00 !important; }

/* ── Butonul de închidere ────────────────────────────────────────────────────
 * Apare la hover pe rând, dar rămâne mereu vizibil pe atingere: fără hover, un buton
 * ascuns e un buton inexistent.
 */
.notification-item__dismiss {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: rgba(179, 38, 30, 0.1);
  color: #b3261e;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.13s ease, background-color 0.13s ease, color 0.13s ease;
}

.notification-item:hover .notification-item__dismiss,
.notification-item__dismiss:focus-visible { opacity: 1; }

.notification-item__dismiss:hover,
.notification-item__dismiss:focus-visible {
  background: #b3261e;
  color: #fff;
}

@media (hover: none) {
  .notification-item__dismiss { opacity: 1; }
}


/* ── Ce trebuie neutralizat din temă ─────────────────────────────────────────
 * `clopotel.css` se încarcă DUPĂ `theme.css`, deci la specificitate egală câștigă.
 * Rămân două reguli ale temei care NU se pierd așa, fiindcă sunt mai specifice sau
 * ating proprietăți pe care noi nu le declarăm:
 *
 *   .notification-item.is-unread { background: … }  → (0,2,0), bate fundalul nostru,
 *     iar JS pune `is-unread` pe FIECARE rând (feedul aduce doar necitite), deci
 *     regula se aplica mereu și rândurile ieșeau albastre-transparente.
 *
 *   .notification-item { border-bottom: … }  → o proprietate pe care n-o declarăm,
 *     deci se moștenea peste rândurile noastre rotunjite: o linie tăiată sub fiecare.
 *
 * Se rescriu aici, explicit, cu aceeași specificitate sau mai mare. Fără asta,
 * componenta arată altfel în fiecare aplicație, după tema care o găzduiește.
 */
.pasaport-notification-dropdown .notification-item,
.pasaport-notification-dropdown .notification-item.is-unread {
  background: #f8fbfe;
  border-bottom: 0;
  margin-top: 0;
}

.pasaport-notification-dropdown .notification-item:hover,
.pasaport-notification-dropdown .notification-item.is-unread:hover {
  background: #eef5fd;
}

/* Textul secundar: tema îl prinde cu `.notification-item small, .notification-item span`,
 * la aceeași specificitate ca a noastră. Se declară aici, mai specific, ca ordinea
 * fișierelor să nu mai fie singurul lucru care ne salvează. */
.pasaport-notification-dropdown .notification-item__link > small {
  color: rgba(22, 50, 79, 0.62);
  font-size: 0.78rem;
}

.pasaport-notification-dropdown .notification-item__link > span {
  color: rgba(22, 50, 79, 0.48);
  font-size: 0.72rem;
}

/* ── Gol / se încarcă ────────────────────────────────────────────────────────*/
.notification-empty {
  padding: 2rem 1rem;
  text-align: center;
  font-size: 0.83rem;
  color: rgba(22, 50, 79, 0.5);
}

/* ── Subsolul ────────────────────────────────────────────────────────────────*/
.notification-menu__footer {
  padding: 0.55rem 0.6rem 0.65rem;
  border-top: 1px solid #eef2f7;
  background: #fbfdff;
}

.notification-menu__all {
  display: block;
  padding: 0.55rem 0.75rem;
  border-radius: 10px;
  background: #0f67be;
  color: #fff;
  font-size: 0.83rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition: filter 0.13s ease;
}

.notification-menu__all:hover,
.notification-menu__all:focus-visible {
  color: #fff;
  filter: brightness(1.08);
}

/* Cine a cerut mai puțină mișcare o primește: clopoțelul nu mai dansează, pastila
 * rămâne pe loc. Informația e aceeași, doar anunțul e tăcut. */
@media (prefers-reduced-motion: reduce) {
  .pasaport-notification-dropdown.are-necitite > .pasaport-icon-button > svg,
  .pasaport-notification-dropdown.are-necitite .pasaport-rail-badge { animation: none; }
  .notification-item,
  .notification-item__dismiss,
  .notification-menu__all,
  .notification-menu__header > a { transition: none; }
}