
/* Notifications page: all rules are scoped to avoid changing other dashboard pages. */
.user-notifications-page .dashboard__right{min-width:0;overflow-x:hidden}
.user-notifications-page .dashboard-body{width:100%;min-width:0}
.user-notifications-shell{width:100%;max-width:100%;padding:24px 20px 40px}
.user-notifications-card{width:100%;max-width:980px;margin:0 auto;background:#fff;color:#29313d;border:1px solid #e1e5ea;border-radius:12px;box-shadow:0 4px 18px rgba(25,35,50,.08);overflow:hidden}
.user-notifications-card__header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;background:#fff;border-bottom:1px solid #edf0f3}
.user-notifications-card__title{margin:0;color:#202733;font-size:18px;font-weight:700}
.user-notifications-card__actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.user-notifications-action{display:inline-flex;align-items:center;gap:6px;border:0;border-radius:6px;padding:8px 11px;font-size:12px;font-weight:600;cursor:pointer}
.user-notifications-action--read{background:#eaf2ff;color:#246bc7}.user-notifications-action--delete{background:#fff0f0;color:#d53d3d}
.user-notifications-list{padding:8px 22px;background:#fff}
.user-notification-card{display:flex;align-items:flex-start;gap:13px;min-width:0;padding:16px 0;border-bottom:1px solid #edf0f3;background:#fff;color:#29313d}
.user-notification-card:last-child{border-bottom:0}
.user-notification-card.is-unread{background:#f8fbff}
.user-notification-card__icon{flex:0 0 40px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#eaf2ff;color:#2f80ed}
.user-notification-card__body{flex:1;min-width:0}
.user-notification-card__link{display:block;text-decoration:none!important;color:inherit!important}
.user-notification-card__title{margin:0 0 4px;color:#202733;font-size:14px;line-height:1.45;font-weight:700}
.user-notification-card__message{display:-webkit-box;overflow:hidden;margin:0;color:#596575;font-size:12px;line-height:1.55;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.user-notification-card__time{display:block;margin-top:6px;color:#87919d;font-size:11px}
.user-notification-card__delete{flex:0 0 auto;margin-left:auto}
.user-notification-card__delete button{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border:1px solid #f0caca;border-radius:6px;background:#fff;color:#d53d3d;cursor:pointer}
.user-notification-card__delete button:hover{background:#d53d3d;color:#fff}
.user-notifications-empty{padding:55px 20px;text-align:center;color:#87919d}.user-notifications-empty i{font-size:36px;color:#aab4c0}.user-notifications-empty p{margin:12px 0 0}
.user-notifications-pagination{padding:0 22px 20px}
html[data-theme="dark"] .user-notifications-card,html[data-theme="dark"] .user-notifications-card__header,html[data-theme="dark"] .user-notifications-list,html[data-theme="dark"] .user-notification-card{background:#1d2633;color:#e8edf4;border-color:#344152}
html[data-theme="dark"] .user-notifications-card__title,html[data-theme="dark"] .user-notification-card__title{color:#f4f7fb}.user-notification-card__message{color:#596575}html[data-theme="dark"] .user-notification-card__message{color:#bdc8d5}
html[data-theme="dark"] .user-notification-card.is-unread{background:#233247}html[data-theme="dark"] .user-notification-card__delete button{background:#1d2633;border-color:#70434a}
@media(max-width:767px){.user-notifications-shell{padding:15px 10px 30px}.user-notifications-card__header{align-items:flex-start;flex-direction:column;padding:15px}.user-notifications-card__actions{width:100%;justify-content:flex-start}.user-notifications-list{padding:4px 15px}.user-notification-card{gap:10px}.user-notification-card__icon{flex-basis:34px;width:34px;height:34px}.user-notification-card__delete button{width:30px;height:30px}.user-notifications-action{padding:7px 9px}}
/* Header quick actions: scoped to the dashboard header only. */
.dashboard .dashboard-quick-actions {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
  z-index: 92;
}
.dashboard .dashboard-quick-actions-menu {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  min-width: max-content;
  white-space: nowrap;
}
.dashboard .dashboard-quick-actions-toggle {
  display: none;
  position: relative;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 9px;
  background: rgba(255,255,255,.12);
  color: inherit;
  font-size: 20px;
  cursor: pointer;
}
.dashboard .dashboard-quick-actions-toggle:hover,
.dashboard .dashboard-quick-actions-toggle[aria-expanded="true"] {
  background: #25d466;
  border-color: #25d466;
  color: #101213;
}
.dashboard .dashboard-quick-actions-toggle__badge {
  display: none;
  position: absolute;
  top: 5px;
  right: 5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff5964;
}
.dashboard .dashboard-quick-actions.is-collapsed .dashboard-quick-actions-toggle {
  display: inline-flex;
}
.dashboard .dashboard-quick-actions.is-collapsed .dashboard-quick-actions-menu,
.dashboard .dashboard-quick-actions.is-responsive .dashboard-quick-actions-menu {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  inset-inline-end: 0;
  min-width: 190px;
  max-width: min(320px, calc(100vw - 24px));
  padding: 10px;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  white-space: normal;
  background: #fff;
  border: 1px solid #dfe3e8;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(22,31,43,.2);
  z-index: 1200;
}
.dashboard .dashboard-quick-actions.is-collapsed.is-open .dashboard-quick-actions-menu,
.dashboard .dashboard-quick-actions.is-responsive.is-open .dashboard-quick-actions-menu {
  display: flex;
}
.dashboard .dashboard-quick-actions.is-collapsed .dashboard-quick-actions-menu > *,
.dashboard .dashboard-quick-actions.is-responsive .dashboard-quick-actions-menu > * {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
}
.dashboard .dashboard-quick-actions.is-collapsed .dashboard-quick-actions-menu > .notification-dropdown > .dashboard-control-link,
.dashboard .dashboard-quick-actions.is-collapsed .dashboard-quick-actions-menu > .dashboard-language-dropdown > .dashboard-control-link,
.dashboard .dashboard-quick-actions.is-collapsed .dashboard-quick-actions-menu > #switch-theme,
.dashboard .dashboard-quick-actions.is-responsive .dashboard-quick-actions-menu > .notification-dropdown > .dashboard-control-link,
.dashboard .dashboard-quick-actions.is-responsive .dashboard-quick-actions-menu > .dashboard-language-dropdown > .dashboard-control-link,
.dashboard .dashboard-quick-actions.is-responsive .dashboard-quick-actions-menu > #switch-theme {
  width: 100%;
  min-height: 38px;
  min-width: 0;
  justify-content: flex-start;
  gap: 10px;
  padding: 0 11px;
  border: 1px solid #e5e9ee;
  border-radius: 8px;
  background: #f8fafc;
  color: #29313d;
}
.dashboard .dashboard-quick-actions .dashboard-control-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: hsl(var(--body-color));
}
.dashboard .dashboard-quick-actions .notification-dropdown .dashboard-control-link::after {
  margin-inline-start: auto;
}
.dashboard .dashboard-quick-actions .dashboard-language-dropdown .dashboard-control-link .text {
  display: none;
}
.dashboard .dashboard-quick-actions .dashboard-language-dropdown .dropdown-list {
  background: #fff !important;
  border: 1px solid #dfe3e8;
  box-shadow: 0 12px 32px rgba(22,31,43,.2);
}
.dashboard .dashboard-quick-actions .dashboard-language-dropdown .dropdown-list .text {
  color: #29313d !important;
}
.dashboard .dashboard-quick-actions .dashboard-theme-toggle .dashboard-quick-actions-label {
  display: none;
}
.dashboard .dashboard-quick-actions.is-collapsed .dashboard-theme-toggle,
.dashboard .dashboard-quick-actions.is-responsive .dashboard-theme-toggle {
  width: 100%;
}
.dashboard .dashboard-quick-actions.is-collapsed .dashboard-theme-toggle .dashboard-quick-actions-label,
.dashboard .dashboard-quick-actions.is-responsive .dashboard-theme-toggle .dashboard-quick-actions-label {
  display: inline;
  font-size: 12px;
  font-weight: 700;
}
.dashboard .dashboard-quick-actions.is-collapsed .dashboard-language-dropdown .dashboard-control-link .text,
.dashboard .dashboard-quick-actions.is-responsive .dashboard-language-dropdown .dashboard-control-link .text {
  display: inline;
}
.dashboard .dashboard-quick-actions .notification-menu {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  inset-inline-start: auto;
  width: min(360px, calc(100vw - 24px));
  max-height: min(520px, calc(100vh - 90px));
  overflow: auto;
  padding: 0;
  display: block;
  visibility: hidden;
  opacity: 0;
  background: #fff !important;
  color: #29313d;
  border: 1px solid #dfe3e8;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(22,31,43,.2);
  z-index: 1300;
}
.dashboard .notification-dropdown.show > .notification-menu,
.dashboard .notification-dropdown .notification-menu.show {
  visibility: visible;
  opacity: 1;
}
.dashboard .dashboard-quick-actions.is-collapsed .notification-dropdown .notification-menu,
.dashboard .dashboard-quick-actions.is-responsive .notification-dropdown .notification-menu {
  position: fixed !important;
  top: 70px !important;
  inset-inline: 12px !important;
  width: auto;
  max-width: none;
  max-height: calc(100vh - 90px);
}
.dashboard .notification-menu__header,
.dashboard .notification-menu__footer,
.dashboard .notification-menu__body {
  background: #fff;
}
.dashboard .notification-menu__header,
.dashboard .notification-menu__footer {
  padding: 12px 14px;
}
.dashboard .notification-menu__body {
  color: #29313d;
}
.dashboard .notification-menu .user-notification-item {
  display: flex;
  gap: 10px;
  padding: 11px 14px;
  color: #29313d;
  background: #fff;
  text-decoration: none;
}
.dashboard .notification-menu .user-notification-item:hover,
.dashboard .notification-menu .user-notification-item.is-unread {
  background: #f4f8fc;
}
.dashboard .notification-menu .user-notification-item__title,
.dashboard .notification-menu .user-notification-item__message,
.dashboard .notification-menu .user-notification-item__time {
  color: inherit;
}
.dashboard .dashboard-quick-actions .dashboard-language-dropdown .dropdown-list {
  top: calc(100% + 4px);
  inset-inline-end: 0;
  inset-inline-start: auto;
  z-index: 1300;
}
html[data-theme="dark"] .dashboard .dashboard-quick-actions.is-collapsed .dashboard-quick-actions-menu,
html[data-theme="dark"] .dashboard .dashboard-quick-actions.is-responsive .dashboard-quick-actions-menu,
html[data-theme="dark"] .dashboard .notification-menu,
html[data-theme="dark"] .dashboard .notification-menu__header,
html[data-theme="dark"] .dashboard .notification-menu__footer,
html[data-theme="dark"] .dashboard .notification-menu__body,
html[data-theme="dark"] .dashboard .notification-menu .user-notification-item {
  background: #1d2633 !important;
  color: #e8edf4;
  border-color: #344152;
}
html[data-theme="dark"] .dashboard .dashboard-quick-actions .dashboard-language-dropdown .dropdown-list,
html[data-theme="dark"] .dashboard .dashboard-quick-actions .dashboard-language-dropdown .dropdown-list .text {
  background: #1d2633 !important;
  color: #e8edf4 !important;
}
html[data-theme="dark"] .dashboard .dashboard-quick-actions.is-collapsed .dashboard-quick-actions-menu > * > .dashboard-control-link,
html[data-theme="dark"] .dashboard .dashboard-quick-actions.is-responsive .dashboard-quick-actions-menu > * > .dashboard-control-link,
html[data-theme="dark"] .dashboard .dashboard-quick-actions.is-collapsed .dashboard-quick-actions-menu > #switch-theme,
html[data-theme="dark"] .dashboard .dashboard-quick-actions.is-responsive .dashboard-quick-actions-menu > #switch-theme {
  background: #263446;
  color: #e8edf4;
  border-color: #344152;
}
html[data-theme="dark"] .dashboard .notification-menu .user-notification-item:hover,
html[data-theme="dark"] .dashboard .notification-menu .user-notification-item.is-unread {
  background: #233247 !important;
}
[dir="rtl"] .dashboard .dashboard-quick-actions .notification-menu,
html[lang^="ar"] .dashboard .dashboard-quick-actions .notification-menu {
  text-align: right;
}
@media (max-width: 575px) {
  .dashboard .dashboard-quick-actions-toggle { width: 36px; height: 36px; flex-basis: 36px; }
  .dashboard .dashboard-quick-actions.is-collapsed .dashboard-quick-actions-menu,
  .dashboard .dashboard-quick-actions.is-responsive .dashboard-quick-actions-menu { min-width: 178px; }
}

/* Final header-dropdown override: this file is loaded by user-notifications.css. */
.dashboard .dashboard-quick-actions .notification-menu.dropdown-menu.show {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  background-color: #fff !important;
  color: #29313d !important;
  z-index: 1300 !important;
}
.dashboard .dashboard-quick-actions .notification-menu.dropdown-menu.show * {
  box-sizing: border-box;
}
.dashboard .dashboard-quick-actions .notification-menu.dropdown-menu.show .notification-menu__header,
.dashboard .dashboard-quick-actions .notification-menu.dropdown-menu.show .notification-menu__body,
.dashboard .dashboard-quick-actions .notification-menu.dropdown-menu.show .notification-menu__footer,
.dashboard .dashboard-quick-actions .notification-menu.dropdown-menu.show .user-notification-item {
  background-color: #fff !important;
  color: #29313d !important;
}
.dashboard .dashboard-quick-actions .notification-menu.dropdown-menu.show .user-notification-item:hover,
.dashboard .dashboard-quick-actions .notification-menu.dropdown-menu.show .user-notification-item.is-unread {
  background-color: #f4f8fc !important;
}
html[data-theme="dark"] .dashboard .dashboard-quick-actions .notification-menu.dropdown-menu.show,
html[data-theme="dark"] .dashboard .dashboard-quick-actions .notification-menu.dropdown-menu.show .notification-menu__header,
html[data-theme="dark"] .dashboard .dashboard-quick-actions .notification-menu.dropdown-menu.show .notification-menu__body,
html[data-theme="dark"] .dashboard .dashboard-quick-actions .notification-menu.dropdown-menu.show .notification-menu__footer,
html[data-theme="dark"] .dashboard .dashboard-quick-actions .notification-menu.dropdown-menu.show .user-notification-item {
  background-color: #1d2633 !important;
  color: #e8edf4 !important;
}
html[data-theme="dark"] .dashboard .dashboard-quick-actions .notification-menu.dropdown-menu.show .user-notification-item:hover,
html[data-theme="dark"] .dashboard .dashboard-quick-actions .notification-menu.dropdown-menu.show .user-notification-item.is-unread {
  background-color: #233247 !important;
}

/* ==========================================================
   Dashboard quick actions - append to user-notifications.css
   Scoped to the dashboard header; does not change the notifications page.
   ========================================================== */
.dashboard .dashboard-quick-actions {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
  z-index: 92;
}
.dashboard .dashboard-quick-actions-menu {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  min-width: max-content;
  white-space: nowrap;
}
.dashboard .dashboard-quick-actions-toggle {
  display: none;
  position: relative;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 9px;
  background: rgba(255,255,255,.12);
  color: inherit;
  font-size: 20px;
  cursor: pointer;
}
.dashboard .dashboard-quick-actions-toggle:hover,
.dashboard .dashboard-quick-actions-toggle[aria-expanded="true"] {
  background: #25d466;
  border-color: #25d466;
  color: #101213;
}
.dashboard .dashboard-quick-actions.is-collapsed .dashboard-quick-actions-toggle {
  display: inline-flex;
}
.dashboard .dashboard-quick-actions.is-collapsed .dashboard-quick-actions-menu,
.dashboard .dashboard-quick-actions.is-responsive .dashboard-quick-actions-menu {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  inset-inline-end: 0;
  min-width: 190px;
  max-width: min(320px, calc(100vw - 24px));
  padding: 10px;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  white-space: normal;
  background: #fff !important;
  border: 1px solid #dfe3e8;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(22,31,43,.2);
  z-index: 1200;
}
.dashboard .dashboard-quick-actions.is-collapsed.is-open .dashboard-quick-actions-menu,
.dashboard .dashboard-quick-actions.is-responsive.is-open .dashboard-quick-actions-menu,
.dashboard .dashboard-quick-actions-toggle[aria-expanded="true"] + .dashboard-quick-actions-menu {
  display: flex !important;
  visibility: visible;
  opacity: 1;
}
.dashboard .dashboard-quick-actions.is-collapsed .dashboard-quick-actions-menu > *,
.dashboard .dashboard-quick-actions.is-responsive .dashboard-quick-actions-menu > * {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
}
.dashboard .dashboard-quick-actions.is-collapsed .dashboard-quick-actions-menu > * > .dashboard-control-link,
.dashboard .dashboard-quick-actions.is-responsive .dashboard-quick-actions-menu > * > .dashboard-control-link,
.dashboard .dashboard-quick-actions.is-collapsed .dashboard-quick-actions-menu > #switch-theme,
.dashboard .dashboard-quick-actions.is-responsive .dashboard-quick-actions-menu > #switch-theme {
  width: 100%;
  min-height: 38px;
  justify-content: flex-start;
  gap: 10px;
  padding: 0 11px;
  border: 1px solid #e5e9ee;
  border-radius: 8px;
  background: #f8fafc;
  color: #29313d;
}
.dashboard .dashboard-quick-actions .dashboard-language-dropdown .dashboard-control-link .text {
  display: none;
}
.dashboard .dashboard-quick-actions.is-collapsed .dashboard-language-dropdown .dashboard-control-link .text,
.dashboard .dashboard-quick-actions.is-responsive .dashboard-language-dropdown .dashboard-control-link .text {
  display: inline;
}
.dashboard .dashboard-quick-actions .dashboard-language-dropdown .dropdown-list {
  top: calc(100% + 4px);
  inset-inline-end: 0;
  inset-inline-start: auto;
  background: #fff !important;
  border: 1px solid #dfe3e8;
  box-shadow: 0 12px 32px rgba(22,31,43,.2);
  z-index: 1300;
}
.dashboard .dashboard-quick-actions .dashboard-language-dropdown .dropdown-list .text {
  color: #29313d !important;
}
.dashboard .dashboard-quick-actions .notification-menu.dropdown-menu.show,
.dashboard .dashboard-quick-actions .notification-menu.dropdown-menu.show .notification-menu__header,
.dashboard .dashboard-quick-actions .notification-menu.dropdown-menu.show .notification-menu__body,
.dashboard .dashboard-quick-actions .notification-menu.dropdown-menu.show .notification-menu__footer,
.dashboard .dashboard-quick-actions .notification-menu.dropdown-menu.show .user-notification-item {
  background: #fff !important;
  color: #29313d !important;
}
.dashboard .dashboard-quick-actions .notification-menu.dropdown-menu.show {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  width: min(360px, calc(100vw - 24px));
  max-height: min(520px, calc(100vh - 90px));
  overflow: auto;
  padding: 0;
  border: 1px solid #dfe3e8;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(22,31,43,.2);
  z-index: 1300 !important;
}
.dashboard .dashboard-quick-actions.is-collapsed .notification-menu.dropdown-menu.show,
.dashboard .dashboard-quick-actions.is-responsive .notification-menu.dropdown-menu.show {
  position: fixed !important;
  top: 70px !important;
  inset-inline: 12px !important;
  width: auto;
  max-width: none;
  max-height: calc(100vh - 90px);
}
.dashboard .dashboard-quick-actions .notification-menu .user-notification-item:hover,
.dashboard .dashboard-quick-actions .notification-menu .user-notification-item.is-unread {
  background: #f4f8fc !important;
}

/* Prevent WhatsApp tables and wide tabs from making the whole page overflow. */
.dashboard .dashboard-header__inner,
.dashboard .dashboard-controls,
.dashboard .dashboard-body {
  min-width: 0;
}
.dashboard .dashboard-body {
  overflow-x: hidden;
}
.dashboard .dashboard-body .table-responsive {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.dashboard .dashboard-body .table-responsive > table {
  min-width: 680px;
}
.dashboard .dashboard-body .nav-tabs,
.dashboard .dashboard-body .profile-list {
  max-width: 100%;
  overflow-x: auto;
  flex-wrap: nowrap;
  -webkit-overflow-scrolling: touch;
}

html[data-theme="dark"] .dashboard .dashboard-quick-actions.is-collapsed .dashboard-quick-actions-menu,
html[data-theme="dark"] .dashboard .dashboard-quick-actions.is-responsive .dashboard-quick-actions-menu,
html[data-theme="dark"] .dashboard .dashboard-quick-actions .notification-menu.dropdown-menu.show,
html[data-theme="dark"] .dashboard .dashboard-quick-actions .notification-menu.dropdown-menu.show .notification-menu__header,
html[data-theme="dark"] .dashboard .dashboard-quick-actions .notification-menu.dropdown-menu.show .notification-menu__body,
html[data-theme="dark"] .dashboard .dashboard-quick-actions .notification-menu.dropdown-menu.show .notification-menu__footer,
html[data-theme="dark"] .dashboard .dashboard-quick-actions .notification-menu.dropdown-menu.show .user-notification-item {
  background: #1d2633 !important;
  color: #e8edf4 !important;
  border-color: #344152;
}
html[data-theme="dark"] .dashboard .dashboard-quick-actions.is-collapsed .dashboard-quick-actions-menu > * > .dashboard-control-link,
html[data-theme="dark"] .dashboard .dashboard-quick-actions.is-responsive .dashboard-quick-actions-menu > * > .dashboard-control-link,
html[data-theme="dark"] .dashboard .dashboard-quick-actions.is-collapsed .dashboard-quick-actions-menu > #switch-theme,
html[data-theme="dark"] .dashboard .dashboard-quick-actions.is-responsive .dashboard-quick-actions-menu > #switch-theme,
html[data-theme="dark"] .dashboard .dashboard-quick-actions .dashboard-language-dropdown .dropdown-list {
  background: #263446 !important;
  color: #e8edf4 !important;
  border-color: #344152;
}
html[data-theme="dark"] .dashboard .dashboard-quick-actions .notification-menu .user-notification-item:hover,
html[data-theme="dark"] .dashboard .dashboard-quick-actions .notification-menu .user-notification-item.is-unread {
  background: #233247 !important;
}

@media (max-width: 575px) {
  .dashboard .dashboard-quick-actions-toggle {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }
  .dashboard .dashboard-quick-actions.is-collapsed .dashboard-quick-actions-menu,
  .dashboard .dashboard-quick-actions.is-responsive .dashboard-quick-actions-menu {
    min-width: 178px;
    max-width: calc(100vw - 20px);
  }
  .dashboard .dashboard-header {
    padding-inline: 10px;
  }
  .dashboard .dashboard-header__inner {
    gap: 8px;
  }
}
[dir="rtl"] .dashboard .dashboard-quick-actions .notification-menu,
html[lang^="ar"] .dashboard .dashboard-quick-actions .notification-menu {
  text-align: right;
}




/* ==========================================================
   Dark theme text contrast fix
   Append to user-notifications.css or load after main.css.
   Scoped to dashboard pages; notification page-specific styles remain untouched.
   ========================================================== */
/* ==========================================================
   Dark theme text contrast fix
   Append to user-notifications.css or load after main.css.
   Scoped to dashboard pages; notification page-specific styles remain untouched.
   ========================================================== */
html[data-theme="dark"] .dashboard {
  --title-color: 210 40% 96%;
  --mute-color: 214 24% 78%;
  --body-color: 210 40% 96%;
  --heading-color: 210 40% 96%;
  --section-bg: 222 25% 12%;
  --white: 222 24% 16%;
  --border-color: 215 20% 28%;
  color: #b9f6c5;
}

html[data-theme="dark"] .dashboard .dashboard__right,
html[data-theme="dark"] .dashboard .dashboard-body,
html[data-theme="dark"] .dashboard .dashboard-body__content,
html[data-theme="dark"] .dashboard .container,
html[data-theme="dark"] .dashboard .container-fluid {
  color: #b9f6c5;
}

/* Headings, labels, table text and normal content. */
html[data-theme="dark"] .dashboard .dashboard__right h1,
html[data-theme="dark"] .dashboard .dashboard__right h2,
html[data-theme="dark"] .dashboard .dashboard__right h3,
html[data-theme="dark"] .dashboard .dashboard__right h4,
html[data-theme="dark"] .dashboard .dashboard__right h5,
html[data-theme="dark"] .dashboard .dashboard__right h6,
html[data-theme="dark"] .dashboard .dashboard-body .title,
html[data-theme="dark"] .dashboard .dashboard-body .heading,
html[data-theme="dark"] .dashboard .dashboard-body .table th,
html[data-theme="dark"] .dashboard .dashboard-body .table td,
html[data-theme="dark"] .dashboard .dashboard-body label,
html[data-theme="dark"] .dashboard .dashboard-body .form--label,
html[data-theme="dark"] .dashboard .dashboard-body .form-label,
html[data-theme="dark"] .dashboard .dashboard-body .form-check-label,
html[data-theme="dark"] .dashboard .dashboard-body .text,
html[data-theme="dark"] .dashboard .dashboard-body p,
html[data-theme="dark"] .dashboard .dashboard-body li,
html[data-theme="dark"] .dashboard .dashboard-body span,
html[data-theme="dark"] .dashboard .dashboard-body small,
html[data-theme="dark"] .dashboard .dashboard-body td div,
html[data-theme="dark"] .dashboard .dashboard-body td a {
  color: #b9f6c5 !important;
}

/* Secondary/help text remains muted but readable. */
html[data-theme="dark"] .dashboard .dashboard-body .text-muted,
html[data-theme="dark"] .dashboard .dashboard-body .text-secondary,
html[data-theme="dark"] .dashboard .dashboard-body .form-text,
html[data-theme="dark"] .dashboard .dashboard-body .description,
html[data-theme="dark"] .dashboard .dashboard-body .desc,
html[data-theme="dark"] .dashboard .dashboard-body .help-block,
html[data-theme="dark"] .dashboard .dashboard-body .hint {
  color: #8fd3a1 !important;
}

/* Cards and common content containers. */
html[data-theme="dark"] .dashboard .card,
html[data-theme="dark"] .dashboard .custom--card,
html[data-theme="dark"] .dashboard .dashboard-widget,
html[data-theme="dark"] .dashboard .table-responsive,
html[data-theme="dark"] .dashboard .table,
html[data-theme="dark"] .dashboard .modal-content,
html[data-theme="dark"] .dashboard .offcanvas,
html[data-theme="dark"] .dashboard .list-group-item,
html[data-theme="dark"] .dashboard .accordion-item {
  background-color: #1d2633 !important;
  color: #b9f6c5 !important;
  border-color: #344152 !important;
}

/* Inputs, selects and textareas. */
html[data-theme="dark"] .dashboard input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="dark"] .dashboard select,
html[data-theme="dark"] .dashboard textarea,
html[data-theme="dark"] .dashboard .form--control,
html[data-theme="dark"] .dashboard .form-control,
html[data-theme="dark"] .dashboard .form-select {
  background-color: #263446 !important;
  color: #d4ffdc !important;
  border-color: #46566b !important;
}
html[data-theme="dark"] .dashboard input::placeholder,
html[data-theme="dark"] .dashboard textarea::placeholder,
html[data-theme="dark"] .dashboard .form--control::placeholder,
html[data-theme="dark"] .dashboard .form-control::placeholder {
  color: #aebdcd !important;
  opacity: 1;
}
html[data-theme="dark"] .dashboard select option {
  background: #1d2633;
  color: #d4ffdc;
}

/* Tables and table controls, including WhatsApp accounts. */
html[data-theme="dark"] .dashboard .table thead th,
html[data-theme="dark"] .dashboard .table tbody td,
html[data-theme="dark"] .dashboard .table tbody th {
  color: #b9f6c5 !important;
  background-color: transparent !important;
  border-color: #344152 !important;
}
html[data-theme="dark"] .dashboard .table-striped > tbody > tr:nth-of-type(odd) > * {
  color: #b9f6c5 !important;
  background-color: rgba(255,255,255,.035) !important;
}

/* Dropdowns, tabs and navigation content. */
html[data-theme="dark"] .dashboard .dropdown-menu,
html[data-theme="dark"] .dashboard .custom--dropdown .dropdown-list,
html[data-theme="dark"] .dashboard .nav-tabs,
html[data-theme="dark"] .dashboard .tab-content,
html[data-theme="dark"] .dashboard .user-info-dropdown {
  background-color: #1d2633 !important;
  color: #b9f6c5 !important;
  border-color: #344152 !important;
}
html[data-theme="dark"] .dashboard .dropdown-menu a,
html[data-theme="dark"] .dashboard .dropdown-menu .dropdown-item,
html[data-theme="dark"] .dashboard .custom--dropdown .dropdown-list__item,
html[data-theme="dark"] .dashboard .custom--dropdown .dropdown-list__item .text,
html[data-theme="dark"] .dashboard .nav-tabs .nav-link,
html[data-theme="dark"] .dashboard .user-info-dropdown__link,
html[data-theme="dark"] .dashboard .user-info-dropdown__link .text {
  color: #b9f6c5 !important;
}
html[data-theme="dark"] .dashboard .dropdown-menu a:hover,
html[data-theme="dark"] .dashboard .dropdown-menu .dropdown-item:hover,
html[data-theme="dark"] .dashboard .custom--dropdown .dropdown-list__item:hover,
html[data-theme="dark"] .dashboard .nav-tabs .nav-link:hover,
html[data-theme="dark"] .dashboard .nav-tabs .nav-link.active {
  background-color: #2a3a4f !important;
  color: #d9ffe0 !important;
}

/* Preserve semantic colors for statuses and alerts. */
html[data-theme="dark"] .dashboard .text--success,
html[data-theme="dark"] .dashboard .text-success { color: #62e6a0 !important; }
html[data-theme="dark"] .dashboard .text--danger,
html[data-theme="dark"] .dashboard .text-danger { color: #ff8c96 !important; }
html[data-theme="dark"] .dashboard .text--warning,
html[data-theme="dark"] .dashboard .text-warning { color: #ffd166 !important; }
html[data-theme="dark"] .dashboard .text--info,
html[data-theme="dark"] .dashboard .text-info { color: #73c9ff !important; }

/* Keep icons and controls visible without turning branded buttons white. */
html[data-theme="dark"] .dashboard .dashboard-body i,
html[data-theme="dark"] .dashboard .dashboard-body svg {
  color: inherit;
}
html[data-theme="dark"] .dashboard .btn:not(.btn--base):not(.btn--primary) {
  color: #d4ffdc;
}

/* Final green text preference for the dark appearance. */
html[data-theme="dark"] .dashboard .dashboard-body,
html[data-theme="dark"] .dashboard .dashboard-body h1,
html[data-theme="dark"] .dashboard .dashboard-body h2,
html[data-theme="dark"] .dashboard .dashboard-body h3,
html[data-theme="dark"] .dashboard .dashboard-body h4,
html[data-theme="dark"] .dashboard .dashboard-body h5,
html[data-theme="dark"] .dashboard .dashboard-body h6,
html[data-theme="dark"] .dashboard .dashboard-body p,
html[data-theme="dark"] .dashboard .dashboard-body span,
html[data-theme="dark"] .dashboard .dashboard-body label,
html[data-theme="dark"] .dashboard .dashboard-body li,
html[data-theme="dark"] .dashboard .dashboard-body td,
html[data-theme="dark"] .dashboard .dashboard-body th,
html[data-theme="dark"] .dashboard .dashboard-body a:not(.btn),
html[data-theme="dark"] .dashboard .dashboard__right {
  color: #b9f6c5 !important;
}
html[data-theme="dark"] .dashboard .dashboard-body .text-muted,
html[data-theme="dark"] .dashboard .dashboard-body .text-secondary,
html[data-theme="dark"] .dashboard .dashboard-body small,
html[data-theme="dark"] .dashboard .dashboard-body .form-text {
  color: #8fd3a1 !important;
}



/* ==========================================================
   Dashboard dark cards fix
   Append after dark-theme-text-fix-green.css.
   Scoped only to dashboard summary cards.
   ========================================================== */
html[data-theme="dark"] .dashboard .dashboard-widget.widget-two,
html[data-theme="dark"] .dashboard .dashboard-widget.widget-blue,
html[data-theme="dark"] .dashboard .dashboard-widget.widget-purple,
html[data-theme="dark"] .dashboard .dashboard-widget.widget-red,
html[data-theme="dark"] .dashboard .dashboard-widget.widget-green,
html[data-theme="dark"] .dashboard .dashboard-widget.widget-yellow,
html[data-theme="dark"] .dashboard .dashboard-widget.widget-orange,
html[data-theme="dark"] .dashboard .dashboard-widget.widget-pink,
html[data-theme="dark"] .dashboard .dashboard-widget.widget-teal,
html[data-theme="dark"] .dashboard .dashboard-widget.widget-lime,
html[data-theme="dark"] .dashboard .dashboard-widget.widget-cyan,
html[data-theme="dark"] .dashboard .dashboard-widget.widget-indigo,
html[data-theme="dark"] .dashboard .dashboard-widget.widget-brown,
html[data-theme="dark"] .dashboard .dashboard-widget.widget-gray,
html[data-theme="dark"] .dashboard .dashboard-widget.widget-sky,
html[data-theme="dark"] .dashboard .dashboard-widget.widget-rose,
html[data-theme="dark"] .dashboard .dashboard-widget.widget-neon {
  background: #17241c !important;
  background-image: none !important;
  border: 1px solid #2f6040 !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.22) !important;
  color: #b9f6c5 !important;
}

/* Disable the bright overlay/shine used by the light cards. */
html[data-theme="dark"] .dashboard .dashboard-widget.widget-two::before,
html[data-theme="dark"] .dashboard .dashboard-widget.widget-two::after,
html[data-theme="dark"] .dashboard .dashboard-widget.widget-blue::before,
html[data-theme="dark"] .dashboard .dashboard-widget.widget-blue::after,
html[data-theme="dark"] .dashboard .dashboard-widget.widget-purple::before,
html[data-theme="dark"] .dashboard .dashboard-widget.widget-purple::after,
html[data-theme="dark"] .dashboard .dashboard-widget.widget-red::before,
html[data-theme="dark"] .dashboard .dashboard-widget.widget-red::after,
html[data-theme="dark"] .dashboard .dashboard-widget.widget-green::before,
html[data-theme="dark"] .dashboard .dashboard-widget.widget-green::after {
  display: none !important;
  opacity: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .dashboard .dashboard-widget.widget-two .dashboard-widget__text,
html[data-theme="dark"] .dashboard .dashboard-widget.widget-two .dashboard-widget__number,
html[data-theme="dark"] .dashboard .dashboard-widget.widget-two .dashboard-widget__number .text,
html[data-theme="dark"] .dashboard .dashboard-widget.widget-two .dashboard-widget__content,
html[data-theme="dark"] .dashboard .dashboard-widget.widget-two .dashboard-widget__content span {
  color: #b9f6c5 !important;
  text-shadow: none !important;
}

html[data-theme="dark"] .dashboard .dashboard-widget.widget-two .dashboard-widget__number {
  font-weight: 800;
}

html[data-theme="dark"] .dashboard .dashboard-widget.widget-two .dashboard-widget__number::after,
html[data-theme="dark"] .dashboard .dashboard-widget.widget-two .dashboard-widget__number .text::after {
  background-color: #5acb78 !important;
}

html[data-theme="dark"] .dashboard .dashboard-widget.widget-two .dashboard-widget__icon-box {
  background: #20352a !important;
  border: 1px solid #376b49 !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .dashboard .dashboard-widget.widget-two .dashboard-widget__icon {
  color: #ffffff !important;
}

html[data-theme="dark"] .dashboard .dashboard-widget.widget-two:hover,
html[data-theme="dark"] .dashboard .dashboard-widget.widget-two:focus-visible {
  background: #1c3023 !important;
  border-color: #4a9b63 !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.3) !important;
}

/* Keep the dashboard intro text readable above the cards. */
html[data-theme="dark"] .dashboard .dashboard-body__top .text {
  color: #8fd3a1 !important;
  text-shadow: none !important;
}




/* Fix notification dropdown placement when the quick-actions header is collapsed. */
.dashboard .user-info .dashboard-controls .dashboard-quick-actions.is-collapsed .dashboard-quick-actions-menu .notification-dropdown .notification-menu,
.dashboard .user-info .dashboard-controls .dashboard-quick-actions.is-responsive .dashboard-quick-actions-menu .notification-dropdown .notification-menu {
    position: absolute !important;
    inset-block-start: calc(100% + 8px) !important;
    inset-block-end: auto !important;
    inset-inline-start: auto !important;
    inset-inline-end: 0 !important;
    width: min(360px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: min(520px, calc(100vh - 90px)) !important;
    transform: none !important;
}



/* Keep the notification dropdown inside narrow phone viewports. */
@media (max-width: 575.98px) {
    .dashboard .user-info .dashboard-controls .dashboard-quick-actions.is-collapsed .dashboard-quick-actions-menu .notification-dropdown .notification-menu,
    .dashboard .user-info .dashboard-controls .dashboard-quick-actions.is-responsive .dashboard-quick-actions-menu .notification-dropdown .notification-menu {
        width: min(360px, calc(100vw - 90px)) !important;
        max-width: calc(100vw - 90px) !important;
        min-width: 0 !important;
    }
}

