/* =============================================================================
   ACTIVITY & NOTIFICATIONS STYLES
   Notification bell badge, slide-out activity drawer, activity cards, and status tags.
   ============================================================================= */

/* ---------- Activity Drawer Slide-over & Tags ---------- */
    /* Activity Drawer Slide-over */
    .drawer-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: var(--overlay);
      z-index: 1100;
      display: none;
      opacity: 0;
      transition: opacity var(--duration-normal) var(--ease-out);
    }

    .drawer-overlay.active {
      display: block;
      opacity: 1;
    }

    .drawer-content {
      position: fixed;
      top: 0;
      right: -460px;
      width: 100%;
      max-width: 440px;
      height: 100vh;
      background: var(--card);
      box-shadow: -10px 0 30px rgb(var(--shadow-rgb) / 0.2);
      z-index: 1110;
      display: flex;
      flex-direction: column;
      visibility: hidden;
      pointer-events: none;
      transition: right var(--duration-normal) var(--ease-out), visibility var(--duration-normal);
    }

    .drawer-overlay.active+.drawer-content,
    .drawer-content.active {
      right: 0;
      visibility: visible;
      pointer-events: auto;
    }

    .drawer-header {
      padding: var(--space-5) var(--space-5);
      border-bottom: 1px solid var(--line);
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: var(--bg);
    }

    .drawer-header h3 {
      margin: 0;
      font-size: 1.1rem;
      color: var(--ink);
      font-weight: 700;
    }

    .drawer-body {
      flex: 1;
      overflow-y: auto;
      padding: var(--space-4) var(--space-5);
    }

    .activity-card {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      padding: var(--space-4) var(--space-4);
      margin-bottom: var(--space-3);
      transition: border-color 0.15s ease;
    }

    .activity-card.unread {
      border-left: 4px solid var(--accent);
      background: var(--bg);
    }

    .activity-card-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-3);
      margin-bottom: var(--space-1);
    }

    .activity-card-title {
      font-size: 0.88rem;
      font-weight: 600;
      color: var(--ink);
    }

    .activity-card-time {
      flex-shrink: 0;
      font-size: 0.72rem;
      color: var(--muted);
      white-space: nowrap;
      font-variant-numeric: tabular-nums;
    }

    /* Footer row: event tag on the left, actor (only when the message doesn't name them) on the right */
    .activity-card-foot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-2);
      margin-top: var(--space-1);
    }

    .activity-card-actor {
      font-size: 0.72rem;
      color: var(--muted);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    /* Loading and empty messages inside the drawer body */
    .activity-empty {
      text-align: center;
      color: var(--muted);
      padding: var(--space-6) 0;
      font-size: 0.88rem;
    }

    .activity-card-msg {
      font-size: 0.82rem;
      color: var(--ink);
      line-height: 1.4;
      margin: 0;
    }

    .activity-tag {
      font-size: 0.65rem;
      font-weight: 700;
      text-transform: uppercase;
      padding: var(--space-half) var(--space-2);
      border-radius: var(--radius-sm);
      display: inline-block;
      margin-top: var(--space-2);
    }

    .activity-tag.refresh_completed {
      background: var(--ok-soft);
      color: var(--ok);
    }

    .activity-tag.refresh_requested {
      background: var(--warn-soft);
      color: var(--warn);
    }

    .activity-tag.user_created,
    .activity-tag.table_created {
      background: var(--accent-soft);
      color: var(--accent);
    }

    .activity-tag.record_created {
      background: var(--ok-soft);
      color: var(--ok);
    }

    .activity-tag.record_updated {
      background: var(--accent-soft);
      color: var(--accent);
    }

    .activity-tag.record_deleted {
      background: var(--err-soft);
      color: var(--err);
    }

    .activity-tag.table_updated,
    .activity-tag.table_schema_updated {
      background: var(--violet-soft);
      color: var(--violet);
    }

    .activity-tag.table_imported {
      background: var(--info-soft);
      color: var(--info);
    }

    .activity-tag.table_assigned {
      background: var(--warn-soft);
      color: var(--warn);
    }

    .activity-tag.table_unassigned {
      background: var(--rose-soft);
      color: var(--rose);
    }

    .activity-tag.user_deactivated {
      background: var(--err-soft);
      color: var(--err);
    }

    .activity-tag.table_exported {
      background: var(--neutral-soft);
      color: var(--ink);
    }