/*
 * Rass Baalbeck Notifications — desktop civic alert desk
 * Page-scoped and deliberately leaves the existing mobile experience intact.
 */

.rbsv-notifications-desktop {
  --nd-ink: #082a58;
  --nd-navy: #07366d;
  --nd-blue: #1269cf;
  --nd-gold: #efbd45;
  --nd-slate: #5f728b;
  --nd-line: #dbe5f0;
  --nd-mist: #f4f8fc;
  --nd-danger: #bd2c2c;
}

@media (min-width: 901px) {
  body.rbsv-notifications-desktop {
    background: var(--nd-mist) !important;
  }

  .rbsv-notifications-desktop .rbsv-page-hero {
    padding-block: 34px 38px !important;
    background: #082d5d !important;
  }

  .rbsv-notifications-desktop .rbsv-page-hero .rbsv-shell {
    display: grid !important;
    grid-template-columns: 62px minmax(0, 1fr) !important;
    grid-template-areas:
      "crumb crumb"
      "icon title"
      "icon copy" !important;
    gap: 4px 18px !important;
    align-items: center !important;
  }

  .rbsv-notifications-desktop .rbsv-page-hero .rbsv-breadcrumb {
    grid-area: crumb !important;
    margin-bottom: 14px !important;
    color: #bed9f6 !important;
  }

  .rbsv-notifications-desktop .rbsv-page-hero .rbsv-page-icon {
    grid-area: icon !important;
    display: grid !important;
    width: 62px !important;
    height: 62px !important;
    margin: 0 !important;
    place-items: center !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    border-radius: 17px !important;
    background: rgba(255,255,255,.09) !important;
    color: var(--nd-gold) !important;
  }

  .rbsv-notifications-desktop .rbsv-page-hero h1 {
    grid-area: title !important;
    margin: 0 !important;
    color: #fff !important;
    font-size: clamp(38px, 4vw, 52px) !important;
    line-height: 1 !important;
    letter-spacing: -.035em !important;
  }

  .rbsv-notifications-desktop .rbsv-page-hero p {
    grid-area: copy !important;
    max-width: 680px !important;
    margin: 4px 0 0 !important;
    color: #c7daf0 !important;
    font-size: 14px !important;
  }

  .rbsv-notifications-desktop .rbsv-section {
    padding-block: 38px 82px !important;
  }

  .rbsv-notifications-desktop .rbsv-browser-alert-card {
    display: grid !important;
    grid-template-columns: 50px minmax(0, 1fr) auto !important;
    gap: 16px !important;
    align-items: center !important;
    margin: 0 0 18px !important;
    padding: 17px 18px !important;
    border: 1px solid var(--nd-line) !important;
    border-inline-start: 4px solid var(--nd-blue) !important;
    border-radius: 16px !important;
    background: #fff !important;
    color: var(--nd-ink) !important;
    box-shadow: 0 8px 22px rgba(7,38,78,.055) !important;
  }

  .rbsv-notifications-desktop .rbsv-browser-alert-card > i {
    display: grid !important;
    width: 50px !important;
    height: 50px !important;
    place-items: center !important;
    border: 1px solid #d8e7f7 !important;
    border-radius: 14px !important;
    background: #eaf3fd !important;
    color: var(--nd-blue) !important;
  }

  .rbsv-notifications-desktop .rbsv-browser-alert-card span {
    color: var(--nd-blue) !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    letter-spacing: .13em !important;
  }

  .rbsv-notifications-desktop .rbsv-browser-alert-card h2 {
    margin: 2px 0 3px !important;
    color: var(--nd-ink) !important;
    font-size: 20px !important;
    line-height: 1.2 !important;
  }

  .rbsv-notifications-desktop .rbsv-browser-alert-card p {
    margin: 0 !important;
    color: var(--nd-slate) !important;
    font-size: 11px !important;
  }

  .rbsv-notifications-desktop .rbsv-browser-alert-signin,
  .rbsv-notifications-desktop .rbsv-browser-alert-card button {
    display: inline-flex !important;
    min-width: 112px !important;
    min-height: 44px !important;
    padding: 0 18px !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: 11px !important;
    background: var(--nd-blue) !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    text-decoration: none !important;
    box-shadow: none !important;
  }

  .rbsv-notifications-desktop .rbsv-alerts-hub {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 286px !important;
    grid-template-areas:
      "intro summary"
      "filter filter"
      "feed feed" !important;
    gap: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .rbsv-notifications-desktop .rbsv-alerts-intro {
    position: relative !important;
    grid-area: intro !important;
    display: grid !important;
    grid-template-columns: 66px minmax(0, 1fr) auto !important;
    gap: 18px !important;
    align-items: center !important;
    min-height: 198px !important;
    padding: 30px !important;
    overflow: hidden !important;
    border: 1px solid #154b81 !important;
    border-radius: 20px !important;
    background: var(--nd-navy) !important;
    color: #fff !important;
    box-shadow: 0 16px 38px rgba(7,42,88,.13) !important;
  }

  .rbsv-notifications-desktop .rbsv-alerts-intro::before {
    position: absolute !important;
    inset-block: 0 !important;
    inset-inline-start: 0 !important;
    width: 5px !important;
    background: var(--nd-gold) !important;
    content: "" !important;
  }

  .rbsv-notifications-desktop .rbsv-alerts-intro::after {
    display: none !important;
  }

  .rbsv-notifications-desktop .rbsv-alerts-intro > i {
    display: grid !important;
    width: 66px !important;
    height: 66px !important;
    place-items: center !important;
    border: 1px solid rgba(255,255,255,.15) !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.08) !important;
    color: var(--nd-gold) !important;
  }

  .rbsv-notifications-desktop .rbsv-alerts-intro > div > span {
    color: #aecdEF !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    letter-spacing: .16em !important;
  }

  .rbsv-notifications-desktop .rbsv-alerts-intro h2 {
    margin: 7px 0 8px !important;
    color: #fff !important;
    font-size: clamp(30px, 3.1vw, 43px) !important;
    line-height: 1.04 !important;
    letter-spacing: -.035em !important;
  }

  .rbsv-notifications-desktop .rbsv-alerts-intro p {
    max-width: 680px !important;
    margin: 0 !important;
    color: #c4d7ed !important;
    font-size: 12px !important;
    line-height: 1.6 !important;
  }

  .rbsv-notifications-desktop .rbsv-alerts-intro > a {
    display: inline-flex !important;
    min-height: 44px !important;
    padding: 0 15px !important;
    align-items: center !important;
    gap: 10px !important;
    border: 1px solid rgba(255,255,255,.22) !important;
    border-radius: 11px !important;
    background: #fff !important;
    color: var(--nd-danger) !important;
    font-size: 11px !important;
    font-weight: 850 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
  }

  .rbsv-notifications-desktop .rbsv-alert-summary {
    grid-area: summary !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 10px !important;
    border: 1px solid var(--nd-line) !important;
    border-radius: 20px !important;
    background: #fff !important;
    box-shadow: 0 10px 28px rgba(7,38,78,.06) !important;
  }

  .rbsv-notifications-desktop .rbsv-alert-summary > span {
    display: grid !important;
    grid-template-columns: 9px minmax(0, 1fr) auto !important;
    grid-template-areas: "dot label value" "dot meta value" !important;
    gap: 2px 10px !important;
    align-items: center !important;
    min-height: 53px !important;
    padding: 10px 12px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: var(--nd-mist) !important;
    box-shadow: none !important;
  }

  .rbsv-notifications-desktop .rbsv-alert-summary i {
    grid-area: dot !important;
    width: 8px !important;
    height: 8px !important;
  }

  .rbsv-notifications-desktop .rbsv-alert-summary small {
    grid-area: label !important;
    color: var(--nd-slate) !important;
    font-size: 7.5px !important;
    font-weight: 900 !important;
    letter-spacing: .09em !important;
  }

  .rbsv-notifications-desktop .rbsv-alert-summary strong {
    grid-area: value !important;
    color: var(--nd-ink) !important;
    font-size: 21px !important;
  }

  .rbsv-notifications-desktop .rbsv-alert-summary b {
    grid-area: meta !important;
    color: var(--nd-slate) !important;
    font-size: 8px !important;
  }

  .rbsv-notifications-desktop .rbsv-alert-summary .is-urgent {
    background: #fff4f4 !important;
  }

  .rbsv-notifications-desktop .rbsv-alert-summary .is-urgent strong {
    color: var(--nd-danger) !important;
  }

  .rbsv-notifications-desktop .rbsv-alert-filter {
    grid-area: filter !important;
    display: grid !important;
    gap: 15px !important;
    margin: 0 !important;
    padding: 20px !important;
    border: 1px solid var(--nd-line) !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: 0 8px 24px rgba(7,38,78,.045) !important;
  }

  .rbsv-notifications-desktop .rbsv-alert-filter > header {
    display: flex !important;
    align-items: end !important;
    justify-content: space-between !important;
    gap: 20px !important;
  }

  .rbsv-notifications-desktop .rbsv-alert-filter > header span {
    color: var(--nd-blue) !important;
    font-size: 8px !important;
    font-weight: 900 !important;
    letter-spacing: .14em !important;
  }

  .rbsv-notifications-desktop .rbsv-alert-filter > header h3 {
    margin: 3px 0 0 !important;
    color: var(--nd-ink) !important;
    font-size: 22px !important;
  }

  .rbsv-notifications-desktop .rbsv-alert-filter > header p {
    margin: 0 !important;
    color: var(--nd-slate) !important;
    font-size: 11px !important;
  }

  .rbsv-notifications-desktop .rbsv-alert-type-nav {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 6px !important;
    overflow: visible !important;
    border: 1px solid #e0e8f1 !important;
    border-radius: 15px !important;
    background: var(--nd-mist) !important;
  }

  .rbsv-notifications-desktop .rbsv-alert-type-nav a {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    gap: 8px !important;
    align-items: center !important;
    min-width: 0 !important;
    min-height: 62px !important;
    padding: 8px !important;
    border: 1px solid transparent !important;
    border-radius: 11px !important;
    background: transparent !important;
    color: #39546f !important;
    box-shadow: none !important;
    text-decoration: none !important;
  }

  .rbsv-notifications-desktop .rbsv-alert-type-nav a:hover {
    border-color: #d7e2ee !important;
    background: #fff !important;
  }

  .rbsv-notifications-desktop .rbsv-alert-type-nav a > i {
    display: grid !important;
    width: 34px !important;
    height: 34px !important;
    place-items: center !important;
    border-radius: 10px !important;
    background: #e7f1fc !important;
    color: var(--nd-blue) !important;
  }

  .rbsv-notifications-desktop .rbsv-alert-type-nav a > span {
    display: grid !important;
    min-width: 0 !important;
    text-align: start !important;
  }

  .rbsv-notifications-desktop .rbsv-alert-type-nav strong {
    overflow: hidden !important;
    color: inherit !important;
    font-size: 9px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .rbsv-notifications-desktop .rbsv-alert-type-nav small,
  .rbsv-notifications-desktop .rbsv-alert-type-nav a > b {
    display: none !important;
  }

  .rbsv-notifications-desktop .rbsv-alert-type-nav a.is-active {
    border-color: var(--nd-navy) !important;
    background: var(--nd-navy) !important;
    color: #fff !important;
    box-shadow: 0 7px 16px rgba(7,54,109,.17) !important;
  }

  .rbsv-notifications-desktop .rbsv-alert-type-nav a.is-active > i {
    background: rgba(255,255,255,.12) !important;
    color: var(--nd-gold) !important;
  }

  .rbsv-notifications-desktop .rbsv-notification-list {
    grid-area: feed !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin: 0 !important;
  }

  .rbsv-notifications-desktop .rbsv-notification-list article {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
    gap: 15px !important;
    min-height: 116px !important;
    padding: 18px !important;
    border: 1px solid var(--nd-line) !important;
    border-radius: 16px !important;
    background: #fff !important;
    color: var(--nd-ink) !important;
    box-shadow: 0 7px 22px rgba(7,38,78,.045) !important;
  }

  .rbsv-notifications-desktop .rbsv-notification-list article::before {
    display: none !important;
  }

  .rbsv-notifications-desktop .rbsv-notification-list .rbsv-empty {
    display: grid !important;
    min-height: 190px !important;
    padding: 34px !important;
    place-content: center !important;
    border: 1px dashed #cbd9e8 !important;
    border-radius: 18px !important;
    background: #fff !important;
    text-align: center !important;
  }

  .rbsv-notifications-desktop .rbsv-notification-list .rbsv-empty h3 {
    margin: 0 0 7px !important;
    color: var(--nd-ink) !important;
    font-size: 23px !important;
  }

  .rbsv-notifications-desktop .rbsv-notification-list .rbsv-empty p {
    margin: 0 !important;
    color: var(--nd-slate) !important;
  }

  .rbsv-notifications-desktop .rbsv-section > .rbsv-shell > .rbsv-child-grid {
    display: none !important;
  }

  .rbsv-notifications-desktop :where(.rbsv-browser-alert-signin, .rbsv-browser-alert-card button, .rbsv-alerts-intro a, .rbsv-alert-type-nav a):focus-visible {
    outline: 3px solid #f2c553 !important;
    outline-offset: 3px !important;
  }
}

@media (min-width: 901px) and (max-width: 1180px) {
  .rbsv-notifications-desktop .rbsv-alerts-hub {
    grid-template-columns: minmax(0, 1fr) 250px !important;
  }

  .rbsv-notifications-desktop .rbsv-alerts-intro {
    grid-template-columns: 58px minmax(0, 1fr) !important;
  }

  .rbsv-notifications-desktop .rbsv-alerts-intro > a {
    grid-column: 1 / -1 !important;
    width: max-content !important;
  }

  .rbsv-notifications-desktop .rbsv-alert-type-nav {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rbsv-notifications-desktop * {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}