/* SwayNC “midnight-ocean” theme */

@define-color cc-bg                 rgba(11,  27,  43,   0.85); /* bg_main */
@define-color noti-border-color     rgba(79, 132, 204,   0.5); /* border_main */
@define-color noti-bg               rgba(11,  27,  43,   0.85); /* bg_main */
@define-color noti-bg-opaque        #0B1B2B; /* background solid */
@define-color noti-bg-darker        rgba(11,  27,  43,   0.95); /* darker bg */
@define-color noti-bg-hover         rgba(79, 132, 204,   0.3); /* bg_hover */
@define-color noti-bg-hover-opaque  rgba(79, 132, 204,   0.5); /* hover opaque */
@define-color noti-bg-focus         rgba(53, 107, 171,   0.7); /* bg_active */
@define-color noti-close-bg         rgba(79, 132, 204,   0.3); /* lighter border_main */
@define-color noti-close-bg-hover   rgba(79, 132, 204,   0.5); /* border_main */
@define-color text-color            #CAD3E8; /* content_main */
@define-color text-color-disabled   rgba(202, 211, 232,  0.4); /* content_inactive */
@define-color bg-selected           #4F84CC; /* accent blue */

/* ⬇️ BELOW THIS LINE, none of your existing selectors need renaming ⬇️ */

.notification-row {
  outline: none;
}

.notification-row:focus,
.notification-row:hover {
  background: @noti-bg-focus;
}

.notification-row .notification-background {
  padding: 6px 12px;
}

.notification-row .notification-background .close-button {
  background: @noti-close-bg;
  color: @text-color;
  text-shadow: none;
  padding: 0;
  border-radius: 100%;
  margin-top: 5px;
  margin-right: 5px;
  box-shadow: none;
  border: none;
  min-width: 24px;
  min-height: 24px;
}

.notification-row .notification-background .close-button:hover {
  background: @noti-close-bg-hover;
  transition: background 0.15s ease-in-out;
}

.notification-row .notification-background .notification {
  border-radius: 12px;
  border: 1px solid @noti-border-color;
  padding: 0;
  transition: background 0.15s ease-in-out;
  background: @noti-bg;
}

.notification-row .notification-background .notification .notification-action,
.notification-row
  .notification-background
  .notification
  .notification-default-action {
  padding: 4px;
  margin: 0;
  box-shadow: none;
  background: transparent;
  border: none;
  color: @text-color;
  transition: background 0.15s ease-in-out;
}

.notification-row
  .notification-background
  .notification
  .notification-action:hover,
.notification-row
  .notification-background
  .notification
  .notification-default-action:hover {
  background: @noti-bg-hover;
}

/* …etc. keep the rest of your CSS exactly as it was… */

.control-center {
  background: @cc-bg;
  color: @text-color;
  border-radius: 12px;
}

/* And for any toggles or selected states: */
.widget-dnd > switch:checked {
  background: @bg-selected;
}
