/* Shared module: notifications-ui — auto-split from the old single styles.css, 89 rule block(s). Do not duplicate class names across files. */

.badge-wrap{position:relative}

.badge{position:absolute;left:-4px;top:-5px;background:#d6444b;color:#fff;min-width:19px;height:19px;border-radius:10px;font-size:10px;display:grid;place-items:center;border:2px solid #0b2840}

.dropdown{position:fixed;top:66px;z-index:1400;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 50px rgba(7,34,53,.22);overflow:hidden}

.notif-menu{left:165px;width:340px}

.user-menu{left:18px;width:220px;padding:7px}

.user-menu button{display:block;width:100%;border:0;background:none;text-align:right;padding:10px;border-radius:9px;cursor:pointer}

.user-menu button:hover{background:#f1f7fb}

.user-menu hr{border:0;border-top:1px solid var(--line)}

.dropdown-head{padding:12px 14px;display:flex;justify-content:space-between;border-bottom:1px solid var(--line)}

.notification{display:flex;gap:10px;padding:11px 13px;border-bottom:1px solid #edf2f5}

.notification>span{width:28px;height:28px;border-radius:9px;background:#eaf5fb;display:grid;place-items:center}

.notification div{display:flex;flex-direction:column}

.notification small{color:var(--muted)}

.notification.critical{background:#fff4f4}

.notification.warn{background:#fff9ee}

.toast-root{position:fixed;left:18px;bottom:18px;z-index:3000;display:flex;flex-direction:column;gap:8px}

.toast{background:#0d314b;color:#fff;border-radius:11px;padding:10px 13px;box-shadow:0 10px 30px rgba(0,0,0,.18);animation:toastIn .25s ease}

.toast.danger{background:#a62d34}

.toast.good{background:#176c4c}

.badge-wrap{position:relative}

.badge{position:absolute;left:-4px;top:-5px;background:#e64049;color:#fff;min-width:19px;height:19px;border-radius:10px;font-size:10px;display:grid;place-items:center;border:2px solid #061a2b}

.dropdown{top:64px!important;z-index:1800!important}

.notif-menu{left:132px!important}

.user-menu{left:18px!important}

.user-menu{left:18px!important;right:auto!important;width:235px!important;padding:8px!important;direction:rtl}

.user-menu button{display:flex!important;align-items:center;gap:9px;width:100%;border:0;background:transparent;color:#173042;text-align:right;padding:11px 12px;border-radius:9px;cursor:pointer;font-weight:600;}

.user-menu button:hover{background:#eef7fb;color:#075f91}

.user-menu .logout-action{color:#ae2f38}

.user-menu .logout-action:hover{background:#fff0f1;color:#9c242d}

.user-menu hr{margin:6px 4px;border:0;border-top:1px solid #dbe7ee}

body[data-theme="dark"] .user-menu button{color:#dcebf3}

body[data-theme="dark"] .user-menu hr{border-color:#27475a}

body[data-theme="dark"] .notification{border-color:#203b4d;background:#0b2132}

body[data-theme="dark"] .notification.critical{background:#321b22}

.notification.warn{background:#332916}

body[data-theme="dark"] .notification>span{background:#123147}

.lang-en .user-menu{direction:ltr}

.lang-en .user-menu button{text-align:left;direction:ltr}

.lang-en .notification{direction:ltr}

.notification>span,
.role-icon,
.table-avatar,
.avatar{
  font-weight:600;
}

.notification:hover>span,
.role-card:hover .role-icon{
  transform:translateY(-2px) scale(1.05);
}

body[data-theme="light"] .dropdown,
body.secura-light .dropdown,
body.theme-light .dropdown{background:#ffffff!important;color:#18384e!important;border-color:#d6e3ec!important;}

body[data-theme="light"] .user-menu button,
body.secura-light .user-menu button,
body.theme-light .user-menu button{color:#18384e!important;}

body[data-theme="light"] .user-menu button:hover,
body.secura-light .user-menu button:hover,
body.theme-light .user-menu button:hover{background:#eef7fb!important;color:#0b6ea8!important;}

.notification>span{width:20px !important;height:20px !important;padding:0 !important}

.notification-channel-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}

.notification-channel-chips span{padding:4px 8px;border-radius:99px;background:rgba(14,165,233,.10);border:1px solid rgba(14,165,233,.18);font-size:10px;font-weight:700;color:#0b719a}

.notification-channel-chips .is-off{background:rgba(148,163,184,.12);border-color:rgba(148,163,184,.20);color:var(--muted,#738796)}

body[data-theme="dark"] .user-contact-summary>div,body[data-theme="dark"] .user-notification-summary,body[data-theme="dark"] .notification-method-card,body[data-theme="dark"] .notification-topic-grid label,body[data-theme="dark"] .quiet-hours-row label,body[data-theme="dark"] .reminder-channel-options label{background:#102f43!important;border-color:#274c61!important;color:#e8f3f8!important}

body[data-theme="dark"] .user-contact-summary b,body[data-theme="dark"] .user-notification-summary-head,body[data-theme="dark"] .profile-section-title,body[data-theme="dark"] .notification-method-card b{color:#e8f3f8!important}

body[data-theme="dark"] .user-contact-summary small,body[data-theme="dark"] .notification-method-card small{color:#9db6c5!important}

body[data-theme="dark"] .notification-channel-chips span{background:rgba(23,180,225,.13);border-color:rgba(23,180,225,.25);color:#7cdcf4}

.notif-menu{
  width:min(390px,calc(100vw - 24px))!important;
  max-height:min(560px,calc(100vh - 86px))!important;
  overflow:auto!important;
  border-radius:16px!important;
  border:1px solid var(--line)!important;
  background:var(--card)!important;
  color:var(--ink)!important;
  box-shadow:0 18px 50px rgba(7,34,53,.22)!important;
  direction:rtl!important;
}

.notif-menu .dropdown-head{
  position:sticky!important;top:0!important;z-index:2!important;
  min-height:48px!important;padding:10px 14px!important;
  display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;
  background:var(--card)!important;border-bottom:1px solid var(--line)!important;
}

.notif-menu .dropdown-head b{font-size:16px!important;font-weight:800!important;color:var(--ink)!important}

.notif-menu .dropdown-head .link-btn{font-size:12px!important;font-weight:700!important;white-space:nowrap!important}

.notif-menu .notification{
  position:relative!important;
  min-height:66px!important;
  display:grid!important;
  grid-template-columns:38px minmax(0,1fr)!important;
  align-items:center!important;
  column-gap:11px!important;
  padding:10px 14px!important;
  margin:0!important;
  border:0!important;
  border-bottom:1px solid var(--line)!important;
  background:var(--card)!important;
  color:var(--ink)!important;
  direction:rtl!important;
  text-align:right!important;
  transition:background .18s ease,transform .18s ease!important;
}

.notif-menu .notification:last-child{border-bottom:0!important}

.notif-menu .notification:hover{background:color-mix(in srgb,var(--primary) 7%,var(--card))!important}

.notif-menu .notification>span{
  width:36px!important;height:36px!important;min-width:36px!important;
  display:grid!important;place-items:center!important;
  border-radius:11px!important;
  background:#eef7fb!important;border:1px solid #d6e9f2!important;
  color:#168fb9!important;font-size:0!important;
  box-shadow:none!important;padding:0!important;
}

.notif-menu .notification>span .app-ui-icon{--ui-icon-size:21px!important;width:21px!important;height:21px!important}

.notif-menu .notification>div{min-width:0!important;display:flex!important;flex-direction:column!important;gap:3px!important;align-items:flex-start!important}

.notif-menu .notification b{display:block!important;width:100%!important;font-size:14px!important;line-height:1.35!important;font-weight:800!important;color:var(--ink)!important;white-space:normal!important}

.notif-menu .notification small{display:block!important;width:100%!important;font-size:11px!important;line-height:1.4!important;color:var(--muted)!important;white-space:normal!important;overflow-wrap:anywhere!important}

.notif-menu .notification:before{
  content:"";position:absolute;inset-block:9px;inset-inline-start:0;width:3px;border-radius:0 4px 4px 0;background:#62a9c6;opacity:.75
}

.notif-menu .notification.critical{background:rgba(220,53,69,.065)!important}

.notif-menu .notification.critical:before{background:#e54855!important;opacity:1}

.notif-menu .notification.critical>span{background:#fff0f1!important;border-color:#f4c9cd!important;color:#d93645!important}

.notif-menu .notification.warn{background:rgba(229,163,28,.075)!important}

.notif-menu .notification.warn:before{background:#e3a11b!important;opacity:1}

.notif-menu .notification.warn>span{background:#fff7df!important;border-color:#f4df9d!important;color:#bb7a00!important}

.notif-menu .notification.info:before{background:#16a8da!important;opacity:1}

.notif-menu .notification.info>span{background:#eaf8fe!important;border-color:#c5eafa!important;color:#0c8fbe!important}

.notif-menu .notification.success{background:rgba(34,168,108,.055)!important}

.notif-menu .notification.success:before{background:#22a86c!important;opacity:1}

.notif-menu .notification.success>span{background:#ebfaf3!important;border-color:#c8eedc!important;color:#168a56!important}

.notif-menu .notification.personal-reminder:before{background:#7c5ce7!important;opacity:1}

.notif-menu .notification.personal-reminder>span{background:#f2efff!important;border-color:#ddd5ff!important;color:#7055d8!important}

body[data-theme="dark"] .notif-menu,body.theme-dark .notif-menu,
body[data-theme="dark"] .notif-menu .dropdown-head,body.theme-dark .notif-menu .dropdown-head,
body[data-theme="dark"] .notif-menu .notification,body.theme-dark .notif-menu .notification{background:#0b2233!important;color:#eef7fb!important;border-color:#24465a!important}

body[data-theme="dark"] .notif-menu .notification:hover,body.theme-dark .notif-menu .notification:hover{background:#103047!important}

body[data-theme="dark"] .notif-menu .notification b,body.theme-dark .notif-menu .notification b{color:#eef7fb!important}

body[data-theme="dark"] .notif-menu .notification small,body.theme-dark .notif-menu .notification small{color:#9fc0d2!important}

body[data-theme="dark"] .notif-menu .notification.critical,body.theme-dark .notif-menu .notification.critical{background:#2b1b24!important}

body[data-theme="dark"] .notif-menu .notification.warn,body.theme-dark .notif-menu .notification.warn{background:#2c281a!important}

body[data-theme="dark"] .notif-menu .notification.success,body.theme-dark .notif-menu .notification.success{background:#122b28!important}

body[data-theme="dark"] .notif-menu .notification.info,body.theme-dark .notif-menu .notification.info{background:#10293a!important}

body[data-theme="dark"] .notif-menu .notification>span,body.theme-dark .notif-menu .notification>span{background:#123247!important;border-color:#28546d!important}

@media (max-width:640px){
.notif-menu{left:12px!important;right:12px!important;width:auto!important;top:62px!important}
}

@media (max-width:640px){
.notif-menu .notification{min-height:62px!important;padding:9px 12px!important}
}