/* ==========================================================================
   Raddad - dashboard shell and components.

   Loaded ONLY by templates/dashboard.html, after app.css. Every rule is scoped
   to `body.dashboard-page` or `.raddad-dashboard`, so nothing here can reach
   the campaigns list, the campaign form, connection, webhook, logs or login -
   those keep rendering exactly as before through base.html + app.css alone.

   Shared primitives from app.css (.btn, .pill, .empty, table, .toast) are
   reused and re-skinned through scoped overrides rather than being replaced.

   Visual language: one flat near-black canvas with moderately translucent
   blue-grey glass panels floating on it. The background carries no light of
   its own - all of the depth comes from the panels being lighter and bluer
   than the field they sit on, and the only colour on the page is in charts,
   statuses and icons.
   ========================================================================== */

.raddad-dashboard {
  /* ---- Canvas ----
     Two near-black tones that differ in hue, not brightness: a deep navy at
     the top easing into a neutral charcoal below. Both sit within three points
     of luminance of each other, so the gradient reads as a shift in colour
     temperature rather than as light - no glow, no aurora, nothing to compete
     with the panels. */
  --d-bg: #101218;
  /* Blue only. The green channel is deliberately left where it was: green
     carries 71% of perceived luminance and blue just 7%, so pushing blue alone
     roughly doubles the colour separation while barely moving the brightness -
     the gradient gets bluer without starting to look like a light source. */
  --d-bg-navy: #08153E;
  --d-bg-deep: #101218;

  /* ---- Glass ----
     One translucent blue-grey material, applied at three weights:

       --d-glass        main panels (cards, brand card, rail)
       --d-glass-raised top bar - a touch lighter, it sits above everything
       --d-nested       rows inside a panel - ~10% darker than their parent

     Nested rows must stay darker than the panel that contains them, otherwise
     two translucent layers stack into a milky grey and the hierarchy inverts. */
  /* The +.04 on both stops is compensation, not a brightening: the canvas was
     taken down ~40%, and a 46-56% translucent fill samples what is behind it,
     so the panels lost ~8% of their composited brightness at the old alphas.
     This returns them to where they were without touching colour or blur. */
  --d-glass: linear-gradient(145deg, rgba(54, 75, 113, .6), rgba(20, 38, 70, .5));
  /* Carries the same +.04. Without it the raised weight would land exactly on
     --d-glass and the top bar would stop reading as a step above the cards. */
  --d-glass-raised: linear-gradient(145deg, rgba(61, 84, 125, .64), rgba(24, 43, 78, .54));
  /* The no-backdrop-filter fallback for --d-glass: same +.04 so it keeps
     approximating the same surface. */
  --d-panel: rgba(35, 55, 88, .56);
  --d-panel-2: rgba(38, 60, 96, .82);
  --d-nested: rgba(57, 78, 114, .28);
  --d-nested-border: rgba(175, 205, 245, .08);
  --d-inset: rgba(12, 26, 50, .46);
  --d-fill: rgba(175, 205, 245, .1);
  --d-fill-hover: rgba(185, 215, 255, .16);

  --d-border: rgba(185, 215, 255, .22);
  --d-border-soft: rgba(185, 215, 255, .15);
  --d-hairline: rgba(175, 205, 245, .12);
  --d-inner-top: rgba(255, 255, 255, .08);
  /* A faint cool bloom inside the panel, and a darkened bottom lip. Together
     they keep the border from reading as an even outline on all four sides. */
  --d-inner-bloom: inset 0 0 24px rgba(90, 155, 255, .035);
  --d-inner-base: inset 0 -1px 0 rgba(3, 12, 30, .3);
  --d-blur: 18px;

  --d-text: rgba(245, 248, 255, .95);
  --d-text-2: rgba(196, 207, 231, .76);
  --d-muted: rgba(176, 190, 218, .68);
  --d-dim: rgba(154, 170, 203, .62);

  /* ---- Accents ----
     Reserved for charts, statuses, icons and active indicators. Never a panel
     fill: a neon surface is what tips this design into looking synthetic. */
  --d-blue: #3D91FF;
  --d-cyan: #32D8FF;
  --d-violet: #8B5CFF;
  --d-teal: #23E3BE;
  --d-green: #32E6A1;
  --d-amber: #fbbf24;
  --d-red: #f87171;
  --d-grad: linear-gradient(120deg, #3D91FF 0%, #6366f1 48%, #8B5CFF 100%);
  --d-ig-grad: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  --d-fb-color: #1877F2;

  --d-radius-xl: 22px;
  --d-radius-lg: 20px;
  --d-radius: 16px;
  --d-radius-sm: 14px;
  --d-shadow: 0 22px 52px rgba(0, 7, 28, .5);
  --d-shadow-soft: 0 18px 42px rgba(0, 7, 28, .38);

  /* ---- Motion (Phase 6) ----
     Three durations, one easing curve. A calm ease-out, not a spring: the
     brief for this pass is "the UI should feel responsive, not animated." */
  --d-ease: cubic-bezier(.2, .7, .2, 1);
  --d-motion-fast: 120ms;
  --d-motion: 160ms;
  --d-motion-slow: 220ms;
  /* Tactile press: a small scale, not a translate, so it reads as material
     compressing under the cursor rather than the control moving. */
  --d-press: .97;

  /* ---- Material levels (Phase 6) ----
     Three densities, not one glass recipe reused everywhere:

       Level 1  structural  --d-glass-raised   rail, top bar, dropdowns, toasts
       Level 2  content     --d-glass          cards, panels, the page's own surfaces
       Level 3  nested      --d-nested         rows and option cards inside a Level 2 panel

     Structural chrome sits a step lighter/more translucent than the content
     it frames, which is why the rail and brand card - previously plain
     --d-glass, the same weight as any card - now match the top bar. */
  --d-rail-w: 78px;
  --d-brand-w: 244px;
  --d-pad: 20px;
  --d-gap: 18px;
  --d-rail-gap: 56px;
  /* Vertical space the fixed mobile bottom rail (below, in the <=900px
     block) needs reserved beneath it. `.shell`'s own padding-bottom uses
     this so normal page scrolling clears the rail; any page with its own
     viewport-height-based scroll surface (the Inbox thread pane) must
     subtract the same token rather than a second, driftable number. */
  --d-mobile-rail-reserve: 96px;

  color: var(--d-text);
}

body.dashboard-page {
  background: var(--d-bg-deep, #061225);
  min-height: 100vh;
}

/* --------------------------------------------------------------------------
   Canvas backdrop. One fixed layer, never scrolled, never interactive: a quiet
   navy-to-charcoal gradient and nothing else - no aurora, no drift. The
   .aurora element still ships in the template; it is switched off here rather
   than removed so the background stays a pure CSS decision.
   -------------------------------------------------------------------------- */

.raddad-dashboard .page-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* Slightly off-vertical so the corners are not identical, and carrying an
     explicit midpoint: two stops this close in luminance band visibly on
     8-bit panels, three do not. Settled by 62% - the lower half is flat. */
  background: linear-gradient(
    172deg,
    var(--d-bg-navy) 0%,
    #0C132A 32%,
    var(--d-bg) 62%
  );
}

.raddad-dashboard .aurora {
  display: none;
}

/* --------------------------------------------------------------------------
   Glass material. One definition; every panel opts in.
   -------------------------------------------------------------------------- */

.raddad-dashboard .glass,
.raddad-dashboard .card {
  background: var(--d-glass);
  border: 1px solid var(--d-border);
  /* Outer shadow for separation, a light line along the top and upper-left for
     the reflection, a faint cool bloom inside, and a darkened bottom lip. The
     two directional insets are what stop the border reading as a uniform
     outline on all four sides. */
  box-shadow:
    var(--d-shadow-soft),
    inset 1px 1px 0 var(--d-inner-top),
    var(--d-inner-bloom),
    var(--d-inner-base);
  -webkit-backdrop-filter: blur(var(--d-blur)) saturate(125%);
  backdrop-filter: blur(var(--d-blur)) saturate(125%);
}

/* Browsers without backdrop-filter get a solid navy that reads at the same
   weight, rather than a transparent hole over the aurora. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .raddad-dashboard .glass,
  .raddad-dashboard .card { background: var(--d-panel); }
}

/* .stat tiles (app.css) predate this glass system and never opted in, so a
   status/summary row built from them - Webhook's four status tiles,
   Comments' Total/Replied/Pending/Failed row - rendered as flat app.css
   surface instead of the approved material. Opt them in at the same weight
   as .card when they stand directly on a page. A .stat nested inside a
   .card (Analytics' Automation Health) gets the level-3 nested-row weight
   instead: stacking full glass on glass would flatten the panel's own
   depth, the same reasoning --d-nested exists for elsewhere. */
.raddad-dashboard .grid > .stat {
  /* app.css's .stat still supplies the old 12px --radius underneath this -
     never overridden before the Phase 1 closeout, so it silently won for
     radius alone while background/border/shadow/blur were already this
     approved surface. */
  border-radius: var(--d-radius-sm);
  background: var(--d-glass);
  border: 1px solid var(--d-border);
  box-shadow:
    var(--d-shadow-soft),
    inset 1px 1px 0 var(--d-inner-top),
    var(--d-inner-bloom),
    var(--d-inner-base);
  -webkit-backdrop-filter: blur(var(--d-blur)) saturate(125%);
  backdrop-filter: blur(var(--d-blur)) saturate(125%);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .raddad-dashboard .grid > .stat { background: var(--d-panel); }
}
.raddad-dashboard .card .grid > .stat {
  background: var(--d-nested);
  border: 1px solid var(--d-nested-border);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .04);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* --------------------------------------------------------------------------
   Shell
   -------------------------------------------------------------------------- */

.raddad-dashboard .shell {
  position: relative;
  z-index: 1;
  max-width: 1800px;
  margin: 0 auto;
  padding: var(--d-pad) var(--d-pad) 30px;
}

.raddad-dashboard .shell-top {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-bottom: 20px;
}

.raddad-dashboard .shell-body {
  display: flex;
  align-items: flex-start;
  gap: var(--d-rail-gap);
}

.raddad-dashboard .main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* --------------------------------------------------------------------------
   Brand card. Logo, wordmark and byline are three independent elements: the
   mark is the supplied transparent PNG, the other two are live text.
   -------------------------------------------------------------------------- */

.raddad-dashboard .brand-card {
  display: flex;
  align-items: center;
  gap: 13px;
  flex: none;
  width: var(--d-brand-w);
  padding: 12px 16px;
  border-radius: var(--d-radius-lg);
  /* Structural chrome (Level 1), same weight as the top bar beside it -
     previously plain --d-glass, the same density as a content card. */
  background: var(--d-glass-raised);
  transition: border-color var(--d-motion) var(--d-ease), transform var(--d-motion) var(--d-ease);
}
.raddad-dashboard .brand-card:hover { border-color: var(--d-border); transform: translateY(-1px); }

.raddad-dashboard .brand-logo {
  width: 46px;
  height: 46px;
  flex: none;
  object-fit: contain;
  /* The asset is already white on transparent. This is a soft reflection off
     the glass beneath it, not a halo - it must not bleed past the mark. */
  filter: drop-shadow(0 2px 9px rgba(61, 145, 255, .38));
}

.raddad-dashboard .brand-text { min-width: 0; display: flex; flex-direction: column; }
.raddad-dashboard .brand-name {
  font-size: 17.5px;
  font-weight: 750;
  letter-spacing: -.015em;
  line-height: 1.2;
  color: #fff;
  white-space: nowrap;
  /* app.css paints .brand-name with a gradient text clip for the old sidebar. */
  background: none;
  -webkit-text-fill-color: #fff;
}
.raddad-dashboard .brand-name-ar { font-weight: 700; }
.raddad-dashboard .brand-by {
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--d-dim);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Top bar: search, connection status, notifications, profile.
   -------------------------------------------------------------------------- */

.raddad-dashboard .topbar {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  /* Search left, status/user-menu right. Moved from app.css's bare .topbar
     during the Phase 1 closeout - it was the one layout property that rule
     still supplied; background/border/backdrop-filter there were already
     dead, shadowed by .glass at higher specificity. */
  justify-content: space-between;
  gap: 14px;
  height: 62px;
  padding: 0 8px 0 7px;
  border-radius: var(--d-radius-lg);
  /* A step lighter than a card: the bar sits above the page, so it catches a
     little more of the light. No extra outer glow - only the surface lifts. */
  background: var(--d-glass-raised);
  /* Also moved from app.css's bare .topbar: keeps the bar pinned while the
     page scrolls underneath it. */
  position: sticky;
  top: 0;
  z-index: 20;
}

.raddad-dashboard .searchbar {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 580px;
  display: flex;
  align-items: center;
  gap: 11px;
  height: 46px;
  padding: 0 14px;
  border-radius: 15px;
  /* A well cut into the bar, so it has to be darker than its parent. */
  background: var(--d-inset);
  border: 1px solid var(--d-nested-border);
  box-shadow: inset 0 1px 2px rgba(3, 12, 30, .28);
}
.raddad-dashboard .searchbar:focus-within { border-color: rgba(61, 145, 255, .5); }
.raddad-dashboard .searchbar:focus-within .search-icon { color: var(--d-text-2); }
.raddad-dashboard .search-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--d-muted);
  transition: color .14s;
}
.raddad-dashboard .search-icon svg { width: 18px; height: 18px; }
.raddad-dashboard .searchbar input[type="search"] {
  flex: 1;
  min-width: 0;
  width: auto;
  border: 0;
  background: none;
  padding: 0;
  color: var(--d-text);
  font-size: 14px;
  font-family: inherit;
}
.raddad-dashboard .searchbar input[type="search"]:focus {
  outline: none;
  box-shadow: none;
  border: 0;
}
.raddad-dashboard .searchbar input::placeholder { color: var(--d-dim); }
.raddad-dashboard .searchbar input::-webkit-search-cancel-button { -webkit-appearance: none; }

.raddad-dashboard .topbar-status {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-left: auto;
  padding-left: 4px;
}
.raddad-dashboard .status-block { display: flex; align-items: center; gap: 10px; min-width: 0; }
.raddad-dashboard .status-glyph {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: var(--d-fill);
  border: 1px solid var(--d-hairline);
  color: var(--d-text-2);
}
.raddad-dashboard .status-glyph svg { width: 19px; height: 19px; }
.raddad-dashboard .status-glyph.tone-ig { color: #f0879c; }
.raddad-dashboard .status-text { min-width: 0; font-size: 12.5px; line-height: 1.35; }
.raddad-dashboard .status-line-1 { color: var(--d-text-2); white-space: nowrap; }
.raddad-dashboard .status-line-2 {
  color: var(--d-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 190px;
}
.raddad-dashboard .is-ok { color: var(--d-green); font-weight: 600; }
.raddad-dashboard .is-warn { color: var(--d-amber); font-weight: 600; }
.raddad-dashboard .is-err { color: var(--d-red); font-weight: 600; }

.raddad-dashboard .icon-btn {
  position: relative;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--d-fill);
  border: 1px solid var(--d-hairline);
  color: var(--d-text-2);
  cursor: pointer;
  transition: background .14s, color .14s;
}
.raddad-dashboard .icon-btn:hover { background: var(--d-fill-hover); color: #fff; }
.raddad-dashboard .icon-btn svg { width: 18px; height: 18px; }
.raddad-dashboard .badge-dot {
  position: absolute;
  top: 8px;
  right: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--d-red);
  box-shadow: 0 0 0 2px rgba(9, 14, 30, .95);
}

.raddad-dashboard .user-area { position: relative; flex: none; }
.raddad-dashboard .user-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 12px 0 6px;
  border-radius: 15px;
  background: var(--d-fill);
  border: 1px solid var(--d-hairline);
  color: var(--d-text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.raddad-dashboard .user-chip:hover { background: var(--d-fill-hover); }
.raddad-dashboard .user-chip .chevron { width: 14px; height: 14px; color: var(--d-dim); }

.raddad-dashboard .user-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  min-width: 200px;
  padding: 6px;
  border-radius: var(--d-radius);
  /* Opaquer than a panel on purpose - a dropdown must not let the card behind
     it read through. */
  background: var(--d-panel-2);
  border: 1px solid var(--d-border);
  box-shadow: var(--d-shadow), inset 1px 1px 0 var(--d-inner-top);
  -webkit-backdrop-filter: blur(var(--d-blur)) saturate(125%);
  backdrop-filter: blur(var(--d-blur)) saturate(125%);
}
.raddad-dashboard .user-menu[hidden] { display: none; }
.raddad-dashboard .user-menu a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 11px;
  border-radius: 9px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--d-text-2);
}
.raddad-dashboard .user-menu a:hover { background: var(--d-fill); color: #fff; }
.raddad-dashboard .user-menu svg { width: 16px; height: 16px; opacity: .75; }

/* --------------------------------------------------------------------------
   Rail - the slim vertical sidebar.
   -------------------------------------------------------------------------- */

.raddad-dashboard .rail {
  width: var(--d-rail-w);
  flex: none;
  margin-left: 6px;
  padding: 10px 7px;
  border-radius: var(--d-radius-xl);
  /* Structural chrome (Level 1), same weight as the top bar - a floating
     translucent material, not a content panel. */
  background: var(--d-glass-raised);
  display: flex;
  flex-direction: column;
  /* Five product-area destinations, not ten routes - the extra gap is space
     the old ten-item rail never had room to spend. */
  gap: 8px;
  position: sticky;
  top: var(--d-pad);
}
.raddad-dashboard .rail-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 16px 5px;
  border-radius: 18px;
  color: var(--d-dim);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  transition: background var(--d-motion) var(--d-ease), color var(--d-motion) var(--d-ease), transform var(--d-motion-fast) var(--d-ease);
}
.raddad-dashboard .rail-item:hover { background: var(--d-fill); color: var(--d-text-2); }
.raddad-dashboard .rail-item:active { transform: scale(var(--d-press)); }
/* The active destination is a brighter frosted square inside the rail, with a
   white glyph against the muted blue-white of the rest. Two directional
   insets (top and left) rather than one uniform ring - a corner catching
   light, not an outline. */
.raddad-dashboard .rail-item.active {
  background: linear-gradient(155deg, rgba(185, 215, 255, .2), rgba(120, 160, 220, .1));
  border: 1px solid rgba(185, 215, 255, .16);
  padding: 15px 4px;
  color: #fff;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .1), inset -1px -1px 0 rgba(3, 12, 30, .18);
}
.raddad-dashboard .rail-item.active .rail-icon { opacity: 1; }
.raddad-dashboard .rail-icon { width: 24px; height: 24px; opacity: .72; flex: none; }

/* --------------------------------------------------------------------------
   Greeting row
   -------------------------------------------------------------------------- */

.raddad-dashboard .page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding: 4px 2px 22px;
}
.raddad-dashboard .page-head h1 {
  font-size: 27px;
  font-weight: 650;
  letter-spacing: -.02em;
  line-height: 1.2;
}
.raddad-dashboard .page-sub {
  margin-top: 5px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--d-muted);
}
.raddad-dashboard .page-sub .accent { color: var(--d-violet); font-weight: 600; }
.raddad-dashboard .page-sub .healthy { display: block; color: var(--d-green); font-weight: 600; }
.raddad-dashboard .page-sub .unhealthy { display: block; color: var(--d-amber); font-weight: 600; }
.raddad-dashboard .page-actions { flex: none; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   Scoped overrides for shared app.css primitives.
   -------------------------------------------------------------------------- */

.raddad-dashboard .card {
  border-radius: var(--d-radius-lg);
  padding: 18px 20px;
}
.raddad-dashboard .card + .card { margin-top: var(--d-gap); }
.raddad-dashboard .card-header { margin-bottom: 14px; align-items: center; }
.raddad-dashboard .card-title { font-size: 15px; font-weight: 650; letter-spacing: -.005em; }
/* Used both for short static dashboard links ("View Comments") and, on
   Comments/Comment Detail, a dynamic campaign name that can run long. Stays
   single-line by design (nowrap); grown too wide for its row, it truncates
   instead of pushing the page wider. `min-width: 0` opts out of a flex
   item's default `min-width: auto`, which would otherwise refuse to let it
   shrink below its own text at all. */
.raddad-dashboard .card-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--d-blue);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  min-width: 0;
}
.raddad-dashboard .card-link:hover { color: #8ab4ff; }

/* ---- Button hierarchy (Phase 6) ----
   Primary   .btn-primary  the one luminous action per view - the accent
                            gradient, reserved for the single most important
                            commit action on the page.
   Secondary .btn          quiet glass fill - the default weight, for any
                            ordinary action that isn't the page's headline one.
   Tertiary  .btn-ghost     minimal, text-forward - no fill, no border, until
                            the cursor is on it.
   Destructive .btn-danger  visually destructive only when it actually is -
                            a soft red glass, not a persistent loud fill. */
.raddad-dashboard .btn {
  border-radius: var(--d-radius-sm);
  border: 1px solid var(--d-border);
  background: var(--d-fill);
  color: var(--d-text);
  padding: 9px 15px;
  transition: background var(--d-motion) var(--d-ease), border-color var(--d-motion) var(--d-ease), filter var(--d-motion) var(--d-ease), transform var(--d-motion-fast) var(--d-ease), opacity var(--d-motion) var(--d-ease);
}
.raddad-dashboard .btn:hover { filter: none; background: var(--d-fill-hover); }
.raddad-dashboard .btn:active:not(:disabled) { transform: scale(var(--d-press)); }
.raddad-dashboard .btn-primary {
  background: var(--d-grad);
  border-color: rgba(255, 255, 255, .14);
  color: #fff;
  box-shadow: 0 10px 26px -14px rgba(94, 108, 245, .9);
}
.raddad-dashboard .btn-primary:hover { background: var(--d-grad); filter: brightness(1.09); }
.raddad-dashboard .btn-lg { height: 47px; padding: 0 22px; border-radius: 16px; font-size: 14.5px; }

/* Tertiary: no resting fill or border, so it reads lighter than .btn at a
   glance - the same glass fill appears only once the cursor lands on it. */
.raddad-dashboard .btn-ghost {
  background: transparent;
  border-color: transparent;
}
.raddad-dashboard .btn-ghost:hover { background: var(--d-fill); border-color: transparent; }

/* Destructive: a quiet red glass at rest, not app.css's flat solid fill -
   it sits in a row of routine actions (Edit/Duplicate/Delete) and must not
   be the loudest thing there. Previously only defined for the campaign row
   (campaigns.css); this is the general case every other page's delete/remove
   button was falling back to app.css's older, unrelated red for. */
.raddad-dashboard .btn-danger {
  background: rgba(248, 113, 113, .1);
  border-color: rgba(248, 113, 113, .26);
  color: #f2a0a0;
}
.raddad-dashboard .btn-danger:hover {
  background: rgba(248, 113, 113, .18);
  border-color: rgba(248, 113, 113, .42);
  color: #fca5a5;
}

.raddad-dashboard .pill-muted { background: var(--d-nested); color: var(--d-muted); }

.raddad-dashboard table { font-size: 13.5px; }
.raddad-dashboard th {
  border-bottom: 1px solid var(--d-border-soft);
  color: var(--d-dim);
  padding: 8px 10px;
}
.raddad-dashboard td { border-bottom: 1px solid var(--d-border-soft); padding: 10px; }
.raddad-dashboard tbody tr:hover { background: rgba(175, 205, 245, .05); }
.raddad-dashboard .table-wrap { margin: 0 -20px -18px; padding: 0 20px 4px; }
.raddad-dashboard .keyword-tag {
  /* Same gap as .stat above: app.css's 5px radius was never overridden here. */
  border-radius: var(--d-radius-sm);
  background: var(--d-nested);
  border: 1px solid var(--d-border);
  color: var(--d-muted);
}
.raddad-dashboard .empty { padding: 34px 18px; color: var(--d-dim); }
.raddad-dashboard .empty-sm { padding: 26px 14px; }
.raddad-dashboard .empty-title { color: var(--d-muted); }
.raddad-dashboard .empty p { font-size: 13px; }
.raddad-dashboard .empty-sm p { margin-bottom: 0; }
.raddad-dashboard .app-footer { padding: 26px 24px 6px; color: var(--d-dim); }

/* --------------------------------------------------------------------------
   KPI cards (hero row)
   -------------------------------------------------------------------------- */

.raddad-dashboard .kpi {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 126px;
  padding: 17px 20px 18px;
}
.raddad-dashboard .kpi-title { font-size: 14.5px; font-weight: 600; color: var(--d-text-2); }
/* The four tiles are grid siblings, so they already share a height. These two
   rules make the contents line up inside that shared height: headings first,
   the figure at the top of the body (a common baseline across all four,
   whether or not the tile has a third line), and any trailing detail pushed to
   the bottom. The graphic beside it stays vertically centred. */
.raddad-dashboard .kpi-body { display: flex; align-items: center; gap: 15px; flex: 1; min-width: 0; }
.raddad-dashboard .kpi-main {
  flex: 1;
  min-width: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.raddad-dashboard .kpi-value {
  font-size: 33px;
  font-weight: 700;
  letter-spacing: -.025em;
  /* 1.05 cropped the line box tighter than the glyphs at this size, which
     clips the gradient fill on `.live` in Chromium. 1.14 contains ascender and
     descender with no visible change to the tile's rhythm. */
  line-height: 1.14;
  font-variant-numeric: tabular-nums;
}
.raddad-dashboard .kpi-value.live {
  background: linear-gradient(100deg, var(--d-cyan), var(--d-blue) 52%, var(--d-violet));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Two classes deep on purpose: the responsive rules further down restyle
   `.kpi-value` at the same specificity, and a figure's size must not be applied
   to these two, which are words rather than numbers. */
.raddad-dashboard .kpi-value.muted { color: var(--d-muted); font-size: 26px; }
/* An @handle is text of unbounded length, not a figure - it gets its own size
   and has to stay inside the card however long it is. */
.raddad-dashboard .kpi-value.kpi-handle-value {
  font-size: 21px;
  line-height: 1.2;
  letter-spacing: -.01em;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.raddad-dashboard .kpi-unavailable { color: var(--d-dim); font-style: italic; }
.raddad-dashboard .kpi-sub { margin-top: 5px; font-size: 12.5px; color: var(--d-dim); }
.raddad-dashboard .kpi-foot { font-size: 12.5px; color: var(--d-dim); }
.raddad-dashboard .kpi-aside { flex: none; display: grid; place-items: center; }

.raddad-dashboard .kpi-handle {
  /* auto, not a fixed offset: this is the tile's trailing detail and it sits at
     the bottom of the shared card height. */
  margin-top: auto;
  padding-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--d-muted);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Performance row (L2). Reuses the .kpi/.kpi-row primitives Analytics'
   own KPI row already defines - same component, so a number here can never
   read differently from the identical tile on Analytics.
   -------------------------------------------------------------------------- */

.raddad-dashboard .kpi-row {
  display: grid;
  /* minmax(0, 1fr) rather than 1fr: a long @handle must not widen its column. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--d-gap);
  align-items: stretch;
}
/* The shared `.card + .card` margin is meant for stacked cards. Left in place
   here it lands on tiles 2-4 as a top margin, which in a grid shortens them by
   exactly that much and bottom-aligns them instead of stretching - the tiles
   end up unequal heights with their headings out of line. */
.raddad-dashboard .kpi-row > .card + .card { margin-top: 0; }
.raddad-dashboard .perf-row { margin-bottom: 16px; }
.raddad-dashboard .perf-row .kpi { min-height: 0; padding: 14px 16px 15px; }

/* --------------------------------------------------------------------------
   Avatars
   -------------------------------------------------------------------------- */

.raddad-dashboard .avatar {
  position: relative;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(140deg, #3b82f6, #8b5cf6);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}
.raddad-dashboard .avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.raddad-dashboard .avatar-sm { width: 30px; height: 30px; font-size: 12px; }
.raddad-dashboard .avatar-lg { width: 58px; height: 58px; font-size: 21px; }
.raddad-dashboard .avatar-wrap { position: relative; flex: none; }
.raddad-dashboard .avatar-badge {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 17px;
  height: 17px;
  border-radius: 5px;
  display: grid;
  place-items: center;
  background: var(--d-ig-grad);
  box-shadow: 0 0 0 2px rgba(9, 14, 30, .95);
}
.raddad-dashboard .avatar-badge svg { width: 10px; height: 10px; color: #fff; }
.raddad-dashboard .avatar-badge-facebook { background: var(--d-fb-color); }

/* --------------------------------------------------------------------------
   Shared chart legend/wrap/select - also used by templates/analytics.html's
   own Activity Over Time chart (data-analytics-chart). Do not scope this to
   one page.
   -------------------------------------------------------------------------- */

.raddad-dashboard .chart-legend {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 6px;
  font-size: 12.5px;
  color: var(--d-muted);
}
.raddad-dashboard .chart-legend span { display: inline-flex; align-items: center; gap: 7px; }
.raddad-dashboard .chart-legend i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
}
.raddad-dashboard .legend-comments { color: var(--d-blue); }
.raddad-dashboard .legend-replies { color: var(--d-violet); }
.raddad-dashboard .legend-dms { color: var(--d-teal); }

.raddad-dashboard .chart-wrap { width: 100%; overflow: hidden; }
.raddad-dashboard .chart-wrap svg { display: block; width: 100%; height: auto; }

.raddad-dashboard .chart-select {
  flex: none;
  width: auto;
  min-width: 118px;
  height: 32px;
  padding: 0 30px 0 12px;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: 12px;
  background-color: var(--d-fill);
  border: 1px solid var(--d-hairline);
  color: var(--d-text-2);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2398a4c4' stroke-width='2.2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 13px;
}
.raddad-dashboard .chart-select:focus { box-shadow: none; border-color: rgba(91, 141, 239, .5); }

/* --------------------------------------------------------------------------
   Campaign context row (L2) - a compact preview, not the Campaigns table.
   -------------------------------------------------------------------------- */

.raddad-dashboard .table-thumb {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 9px;
  object-fit: cover;
  background: var(--d-nested);
  border: 1px solid var(--d-hairline);
}
.raddad-dashboard .table-thumb-empty {
  display: grid;
  place-items: center;
  color: var(--d-dim);
}
.raddad-dashboard .table-thumb-empty svg { width: 16px; height: 16px; }
.raddad-dashboard .status-cell {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.raddad-dashboard .status-cell.running { color: var(--d-green); }
.raddad-dashboard .status-cell.paused { color: var(--d-amber); }

.raddad-dashboard .campaign-context { display: flex; flex-direction: column; gap: 8px; }
.raddad-dashboard .campaign-context-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--d-radius-sm);
  background: var(--d-nested);
  border: 1px solid var(--d-nested-border);
  color: inherit;
  transition: background .14s, border-color .14s;
}
.raddad-dashboard .campaign-context-row:hover {
  background: var(--d-fill-hover);
  border-color: var(--d-border-soft);
}
.raddad-dashboard .campaign-context-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.raddad-dashboard .campaign-context-count {
  flex: none;
  font-size: 12.5px;
  color: var(--d-dim);
  font-variant-numeric: tabular-nums;
}
.raddad-dashboard .campaign-context-foot { display: inline-block; margin-top: 12px; }

.raddad-dashboard .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Home hierarchy (Phase 5). Weight comes from spacing/typography/surface
   size, never from colour - the palette everywhere below is the same
   restrained set (--d-text/--d-muted/--d-dim, --d-green/--d-amber/--d-red
   for status only) app.css and every other page already use.
   -------------------------------------------------------------------------- */

/* L1 - the visually dominant section: the biggest heading and the most
   generous padding on the page. */
.raddad-dashboard .l1-card {
  margin-bottom: var(--d-gap);
  padding: 26px 28px 24px;
}
.raddad-dashboard .l1-heading {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--d-text);
}
.raddad-dashboard .l1-sub {
  margin-top: 6px;
  font-size: 14px;
  color: var(--d-muted);
}
/* The calm/zero state carries less visual weight than the attention-present
   state: no preview list, no CTA, tighter padding. Zero is success, not a
   missing feature. */
.raddad-dashboard .l1-card.l1-calm { padding: 20px 28px; }
.raddad-dashboard .l1-card.l1-calm .l1-heading { color: var(--d-green); font-size: 18px; }

.raddad-dashboard .attn-preview {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.raddad-dashboard .attn-item {
  display: block;
  padding: 12px 14px;
  border-radius: var(--d-radius-sm);
  background: var(--d-nested);
  border: 1px solid var(--d-nested-border);
  color: inherit;
  transition: background .14s, border-color .14s;
}
.raddad-dashboard .attn-item:hover {
  background: var(--d-fill-hover);
  border-color: var(--d-border-soft);
}
.raddad-dashboard .attn-item-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.raddad-dashboard .attn-item-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.raddad-dashboard .attn-item-time { flex: none; font-size: 11.5px; color: var(--d-dim); white-space: nowrap; }
.raddad-dashboard .attn-item-text {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--d-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.raddad-dashboard .attn-item-campaign {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--d-dim);
}
.raddad-dashboard .l1-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--d-blue);
}
.raddad-dashboard .l1-cta svg { width: 16px; height: 16px; opacity: .85; }

.raddad-dashboard .setup-steps { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }

/* L2 - substantial but secondary: default .card weight (15px title), the
   same as every other panel in the app. No new rule needed for the card
   itself; .kpi-row/.campaign-context above carry L2's own density. */

/* L3 - quiet and compact: smaller heading, tighter padding, a single slim
   row rather than a grid of tiles. Reuses the topbar's own .status-block/
   .status-glyph/.status-text/.status-line-*/.is-ok/.is-warn/.is-err (this
   file, "Top bar" section) so a connection/webhook reading here can never
   describe itself differently from the topbar or from Settings, which read
   the same booleans. */
.raddad-dashboard .l3-card { padding: 16px 20px; }
.raddad-dashboard .l3-heading {
  font-size: 13px;
  font-weight: 650;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--d-dim);
}
.raddad-dashboard .health-row {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}
.raddad-dashboard .health-row .status-block { min-width: 170px; }
.raddad-dashboard .health-row .status-line-2 { min-height: 15px; }

/* --------------------------------------------------------------------------
   Responsive.
   >=1440px is the reference layout. Below that the shell tightens before
   anything reflows, then the grid folds column by column, and under 900px the
   rail becomes a compact bottom navigation bar rather than a squeezed sidebar.
   -------------------------------------------------------------------------- */

@media (max-width: 1620px) {
  .raddad-dashboard { --d-rail-gap: 34px; }
  .raddad-dashboard .topbar-status { gap: 14px; }
}

@media (max-width: 1440px) {
  .raddad-dashboard { --d-gap: 16px; --d-brand-w: 228px; --d-rail-gap: 26px; }
  .raddad-dashboard .kpi-value { font-size: 30px; }
  .raddad-dashboard .page-head h1 { font-size: 25px; }
}

@media (max-width: 1340px) {
  /* The webhook block goes first: the same state is on the Webhook Status card
     directly below it. */
  .raddad-dashboard .status-optional { display: none; }
  .raddad-dashboard .searchbar { max-width: none; }
}

@media (max-width: 1280px) {
  .raddad-dashboard { --d-pad: 16px; --d-rail-gap: 20px; }
  /* L2's four performance tiles: two columns rather than four once a tile
     would otherwise drop under ~200px wide. */
  .raddad-dashboard .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1080px) {
  .raddad-dashboard .status-text { display: none; }
  .raddad-dashboard .user-chip .user-name { display: none; }
  .raddad-dashboard .user-chip { padding: 0 8px; }
}

@media (max-width: 900px) {
  .raddad-dashboard { --d-pad: 14px; }
  .raddad-dashboard .shell { padding-bottom: var(--d-mobile-rail-reserve); }
  .raddad-dashboard .shell-top { flex-wrap: wrap; gap: 12px; }
  .raddad-dashboard .brand-card { width: 100%; }
  .raddad-dashboard .topbar {
    flex: 1 1 100%;
    width: 100%;
    height: auto;
    padding: 8px;
    flex-wrap: wrap;
  }
  .raddad-dashboard .searchbar { flex: 1 1 210px; }
  .raddad-dashboard .topbar-status { margin-left: 0; }
  .raddad-dashboard .shell-body { gap: 0; }

  /* Compact bottom navigation replaces the vertical rail.
     `width: auto` alongside `left`/`right` should be enough to size this to
     the viewport minus its insets, but is unreliable here, so the width is
     stated explicitly against the viewport instead - the same 10px+10px the
     left/right insets above already declare. */
  .raddad-dashboard .rail {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: 10px;
    top: auto;
    z-index: 70;
    width: calc(100vw - 20px);
    margin: 0;
    padding: 6px;
    flex-direction: row;
    gap: 4px;
    border-radius: 20px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .raddad-dashboard .rail::-webkit-scrollbar { display: none; }
  .raddad-dashboard .rail-item {
    flex: 1 0 auto;
    min-width: 68px;
    padding: 10px 6px;
    gap: 6px;
    border-radius: 14px;
  }
  .raddad-dashboard .rail-icon { width: 21px; height: 21px; }
  .raddad-dashboard .page-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding-bottom: 18px;
  }
}

@media (max-width: 620px) {
  .raddad-dashboard .kpi-row { grid-template-columns: minmax(0, 1fr); }
  .raddad-dashboard .card { padding: 16px; }
  .raddad-dashboard .table-wrap { margin: 0 -16px -16px; padding: 0 16px 4px; }
  .raddad-dashboard .kpi-value { font-size: 27px; }
  .raddad-dashboard .page-head h1 { font-size: 22px; }
  .raddad-dashboard .brand-card { padding: 10px 13px; }
  .raddad-dashboard .brand-logo { width: 40px; height: 40px; }
  .raddad-dashboard .topbar-status { flex-wrap: wrap; gap: 10px; }

  /* Five destinations now share this row instead of ten, so each gets
     roughly double the width the old rail could ever give it - no more
     cramped labels at this width. */
  .raddad-dashboard .rail-item {
    min-width: 0;
    flex: 1 1 0;
    padding: 9px 4px;
    font-size: 11px;
  }

  /* L1: full-width hero padding is too generous at phone width. */
  .raddad-dashboard .l1-card { padding: 18px 16px; }
  .raddad-dashboard .l1-card.l1-calm { padding: 16px; }
  .raddad-dashboard .l1-heading { font-size: 18px; }

  /* A truncated attention excerpt is unreadable on a phone; wrap instead. */
  .raddad-dashboard .attn-item-head { flex-wrap: wrap; }
  .raddad-dashboard .attn-item-text { white-space: normal; overflow: visible; }

  /* L2: campaign context rows wrap their count under the name rather than
     compressing the name to nothing. */
  .raddad-dashboard .campaign-context-row { flex-wrap: wrap; }
  .raddad-dashboard .campaign-context-name { flex-basis: 100%; }

  /* L3: one status item per line instead of a cramped multi-column wrap. */
  .raddad-dashboard .health-row { flex-direction: column; gap: 14px; }
}

/* --------------------------------------------------------------------------
   Reduced motion (Phase 6). Every transform added for tactile press/hover
   feedback collapses to instant; colour/background transitions (which carry
   no motion of their own) are left alone. No functionality depends on any
   of this - it is feedback, never the only way a state is communicated.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .raddad-dashboard .btn,
  .raddad-dashboard .rail-item,
  .raddad-dashboard .brand-card,
  .raddad-dashboard .icon-btn,
  .raddad-dashboard .user-chip,
  .rd-app .subnav-item,
  .rd-ui .switch-thumb {
    transition-duration: 1ms;
  }
  .raddad-dashboard .btn:active:not(:disabled),
  .raddad-dashboard .rail-item:active,
  .raddad-dashboard .brand-card:hover,
  .rd-app .subnav-item:active {
    transform: none;
  }
}