/* Notifications: bell, inbox, settings */

.notif-bell-wrap {
 position: relative;
}

.notif-bell-btn {
 position: relative;
}

.notif-bell-badges {
 position: absolute;
 top: -4px;
 right: -4px;
 display: flex;
 gap: 2px;
 pointer-events: none;
}

.notif-bell-badge {
 min-width: 19px;
 height: 19px;
 padding: 0 4px;
 border-radius: 999px;
 font-size: 11px;
 font-weight: 700;
 line-height: 18px;
 text-align: center;
 color: #fff;
 box-shadow: 0 0 0 2px var(--card);
}

.notif-bell-badge-global {
 background: var(
  --muted-foreground,
  #64748b
 );
 color: #fff;
}

.notif-bell-badge-client {
 background: var(--primary, #0f172a);
 color: var(--primary-foreground, #fff);
}

.notif-bell-badge-single {
 background: var(--primary, #0f172a);
 color: var(--primary-foreground, #fff);
}

.notif-popover {
 position: absolute;
 top: calc(100% + 8px);
 right: 0;
 width: min(380px, calc(100vw - 24px));
 max-height: min(
  720px,
  calc(100vh - 80px)
 );
 overflow: auto;
 background: var(--card);
 border: 1px solid var(--border);
 border-radius: var(--radius-md);
 box-shadow: 0 16px 40px
  rgba(16, 23, 41, 0.16);
 z-index: 60;
 padding: 12px;
 display: flex;
 flex-direction: column;
 gap: 10px;
}

.notif-scope-toggle {
 display: flex;
 flex-shrink: 0;
 gap: 0;
 border: 1px solid var(--border);
 border-radius: var(--radius-md);
 overflow: hidden;
}

.notif-scope-toggle button {
 flex: 1 0 auto;
 border: 0;
 background: transparent;
 padding: 8px 10px;
 font: inherit;
 font-size: 13px;
 white-space: nowrap;
 cursor: pointer;
 color: var(--foreground);
}

.notif-scope-toggle button.active {
 background: var(--accent);
 color: var(--accent-foreground);
}

.notif-popover-list {
 display: flex;
 flex-direction: column;
 gap: 8px;
}

.notif-popover-actions {
 display: flex;
 flex-shrink: 0;
 gap: 8px;
 align-items: stretch;
}

.notif-popover-actions .btn {
 flex: 1 1 0;
}

.notif-popover-item {
 display: flex;
 flex-direction: column;
 gap: 4px;
 padding: 10px;
 border-radius: var(--radius-md);
 border: 1px solid var(--border);
 text-align: left;
 background: var(
  --background,
  var(--card)
 );
 cursor: pointer;
 color: inherit;
 font: inherit;
}

.notif-popover-item .notif-client-chip {
 margin-bottom: 2px;
}

.notif-popover-item.unread {
 border-color: color-mix(
  in srgb,
  var(--primary, var(--accent)) 45%,
  var(--border)
 );
 background: color-mix(
  in srgb,
  var(--primary, var(--accent)) 8%,
  var(--card)
 );
}

.notif-popover-from {
 font-size: 12px;
 color: var(
  --muted-foreground,
  #64748b
 );
}

.notif-popover-title {
 font-size: 14px;
 font-weight: 600;
}

.notif-popover-body {
 font-size: 12px;
 color: var(
  --muted-foreground,
  #64748b
 );
 line-height: 1.35;
 white-space: pre-wrap;
}

.notif-popover-meta {
 font-size: 12px;
 color: var(
  --muted-foreground,
  #64748b
 );
 display: flex;
 align-items: center;
 gap: 6px;
}

.notif-popover-empty {
 padding: 16px 8px;
 text-align: center;
 color: var(
  --muted-foreground,
  #64748b
 );
 font-size: 13px;
}

.notif-inbox-toolbar {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 align-items: center;
 margin-bottom: 16px;
}

.notif-inbox-list {
 display: flex;
 flex-direction: column;
 gap: 10px;
}

.notif-inbox-item {
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
 align-items: flex-start;
 gap: 12px;
 padding: 16px;
 border: 1px solid var(--border);
 border-radius: var(--radius-md);
 background: var(--card);
}

.notif-inbox-item.unread {
 border-color: color-mix(
  in srgb,
  var(--primary, var(--accent)) 40%,
  var(--border)
 );
 box-shadow: inset 3px 0 0
  var(--primary, var(--accent));
}

.notif-client-chip {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 min-width: 0;
}

.notif-client-chip-name {
 font-size: 13px;
 font-weight: 600;
 color: var(--foreground);
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

.notif-inbox-client {
 display: flex;
 align-items: center;
 margin-bottom: 2px;
}

.notif-inbox-from {
 font-size: 13px;
 color: var(
  --muted-foreground,
  #64748b
 );
}

.notif-inbox-pager {
 margin-top: 16px;
 padding-top: 12px;
 border-top: 1px solid var(--border);
}

.notif-inbox-error {
 display: flex;
 flex-direction: column;
 gap: 8px;
 padding: 20px 12px;
 border: 1px solid var(--border);
 border-radius: var(--radius-md);
 background: var(--card);
}

.notif-inbox-from strong {
 color: var(--foreground);
 font-weight: 600;
}

.notif-inbox-title {
 font-size: 16px;
 font-weight: 600;
}

.notif-inbox-body {
 font-size: 13px;
 color: var(
  --muted-foreground,
  #64748b
 );
 line-height: 1.35;
 white-space: pre-wrap;
}

.notif-inbox-meta {
 display: flex;
 flex-wrap: wrap;
 gap: 10px;
 align-items: center;
 font-size: 12px;
 color: var(
  --muted-foreground,
  #64748b
 );
}

.notif-inbox-actions {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 margin-top: 0;
 margin-left: auto;
 justify-content: flex-end;
 align-items: center;
 flex: 0 0 auto;
}

.notif-email-flag {
 display: inline-flex;
 align-items: center;
 gap: 4px;
}

.notif-settings-group {
 margin-bottom: 28px;
}

.notif-settings-group h2 {
 margin: 0 0 4px;
 font-size: 16px;
}

.notif-settings-group > .muted {
 margin-bottom: 12px;
}

.notif-set-all {
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
 gap: 10px;
 align-items: center;
 margin: 0 0 8px;
 padding: 10px 0;
 border-bottom: 1px solid var(--border);
}

.notif-set-all-label {
 font-size: 13px;
 font-weight: 600;
 white-space: nowrap;
}

.notif-set-all .notif-channel-select {
 width: auto;
 min-width: 180px;
 flex: 0 1 auto;
}

.notif-topic-row {
 display: grid;
 grid-template-columns:
  minmax(0, 1.4fr)
  minmax(180px, 1fr);
 gap: 12px 16px;
 align-items: start;
 padding: 12px 0;
 border-top: 1px solid var(--border);
}

.notif-topic-row:first-of-type {
 border-top: 0;
}

.notif-topic-label {
 font-weight: 600;
 font-size: 14px;
}

.notif-topic-desc {
 font-size: 12px;
 color: var(
  --muted-foreground,
  #64748b
 );
 margin-top: 2px;
}

.notif-topic-controls {
 display: flex;
 flex-direction: column;
 gap: 8px;
}

.notif-topic-controls
 > .notif-channel-select {
 width: 100%;
}

.notif-default-readonly {
 font-size: 12px;
 color: var(
  --muted-foreground,
  #64748b
 );
}

.notif-override-list {
 display: flex;
 flex-direction: column;
 gap: 6px;
 margin-top: 4px;
}

.notif-override-row {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 align-items: center;
 font-size: 13px;
}

.notif-override-row
 .notif-channel-select {
 width: auto;
 min-width: 120px;
 flex: 1 1 140px;
}

.notif-override-add {
 flex-direction: column;
 align-items: flex-start;
 gap: 8px;
}

.notif-override-add-link {
 border: 0;
 background: transparent;
 padding: 0;
 font: inherit;
 font-size: 13px;
 color: var(--primary, #0f172a);
 text-decoration: underline;
 text-underline-offset: 2px;
 cursor: pointer;
 white-space: nowrap;
}

.notif-override-add-form {
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
 gap: 8px;
 align-items: center;
 width: 100%;
}

.notif-override-add-form
 .notif-channel-select {
 width: auto;
 flex: 1 1 120px;
 min-width: 120px;
}

.notif-channel-select {
 font: inherit;
 font-size: 13px;
 padding: 6px 8px;
 border: 1px solid var(--border);
 border-radius: var(--radius-md);
 background: var(--card);
 color: var(--foreground);
}

.notif-inbox-main {
 display: flex;
 flex-direction: column;
 gap: 6px;
 flex: 1 1 220px;
 min-width: 0;
 width: auto;
 border: 0;
 background: transparent;
 padding: 0;
 margin: 0;
 text-align: left;
 color: inherit;
 font: inherit;
 cursor: pointer;
}

.notif-detail-page .page-header {
 display: flex;
 flex-direction: column;
 gap: 6px;
 align-items: flex-start;
}

.notif-detail-thread {
 display: flex;
 flex-direction: column;
 gap: 10px;
 padding: 20px;
 border: 1px solid var(--border);
 border-radius: var(--radius-md);
 background: var(--card);
 margin-bottom: 16px;
}

.notif-detail-thread.archived {
 opacity: 0.85;
}

.notif-detail-client {
 display: flex;
 align-items: center;
 margin-bottom: 8px;
}

.notif-detail-from {
 font-size: 14px;
 color: var(
  --muted-foreground,
  #64748b
 );
}

.notif-detail-actor-link {
 border: 0;
 background: transparent;
 padding: 0;
 font: inherit;
 color: inherit;
 cursor: pointer;
 text-align: left;
}

.notif-detail-actor-link strong {
 color: var(--foreground);
 text-decoration: underline;
 text-underline-offset: 2px;
}

.notif-detail-when {
 font-size: 12px;
 color: var(
  --muted-foreground,
  #64748b
 );
}

.notif-detail-summary {
 font-size: 14px;
 color: var(
  --muted-foreground,
  #64748b
 );
 line-height: 1.4;
 margin-bottom: 8px;
 white-space: pre-wrap;
}

.notif-detail-body {
 font-size: 15px;
 line-height: 1.5;
 white-space: pre-wrap;
}

.notif-detail-links,
.notif-detail-actions {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 margin-bottom: 16px;
}

.notif-detail-subscription {
 display: flex;
 flex-direction: column;
 gap: 8px;
 padding: 16px;
 border: 1px solid var(--border);
 border-radius: var(--radius-md);
 background: var(--card);
 margin-bottom: 20px;
}

.notif-detail-sub-title {
 font-weight: 600;
 font-size: 14px;
}

.notif-detail-related h2 {
 margin: 0 0 10px;
 font-size: 16px;
}

.notif-detail-related-list {
 display: flex;
 flex-direction: column;
 gap: 8px;
}

.user-profile-hero {
 display: flex;
 gap: 16px;
 align-items: center;
 margin-bottom: 24px;
}

.user-profile-identity h1 {
 margin: 0 0 4px;
 font-size: 22px;
}

.user-profile-role {
 margin-top: 6px;
 font-size: 13px;
 color: var(
  --muted-foreground,
  #64748b
 );
}

.user-profile-customers h2 {
 margin: 0 0 10px;
 font-size: 16px;
}

.user-profile-customer-list {
 list-style: none;
 margin: 0;
 padding: 0;
 display: flex;
 flex-direction: column;
 gap: 6px;
}

.user-profile-customer-link {
 border: 0;
 background: transparent;
 padding: 0;
 font: inherit;
 color: var(--primary, #0f172a);
 text-decoration: underline;
 text-underline-offset: 2px;
 cursor: pointer;
 text-align: left;
}

.notif-settings-title-row {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 justify-content: space-between;
 gap: 12px;
}

.notif-settings-title-row h1 {
 margin: 0;
}

.notif-quick-setup-dialog {
 max-width: 32rem;
}

.notif-quick-setup-body {
 display: flex;
 flex-direction: column;
 gap: 12px;
}

.notif-quick-setup-progress {
 margin: 0;
 font-size: 13px;
 font-weight: 600;
}

.notif-quick-setup-list {
 margin: 0;
 padding-left: 1.2em;
 display: flex;
 flex-direction: column;
 gap: 4px;
 font-size: 14px;
}

.notif-quick-setup-actions {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 width: 100%;
}

.notif-quick-setup-back {
 margin-right: auto;
}

@media (max-width: 720px) {
 .notif-topic-row {
  grid-template-columns: 1fr;
 }

 .notif-override-add-form {
  flex-wrap: wrap;
 }

 .user-profile-hero {
  flex-direction: column;
  align-items: flex-start;
 }
}