/* =========================================================================
   04-components.css — Modern Reusable Interface Pieces (OM SRS 001)
   Chips, segmented controls, stat cards, interactive items, filters,
   tables, modal dialogs, toasts, and dedicated Login Screen.
   Originate Command · application
   ========================================================================= */

/* ---- chips ---------------------------------------------------------------
   Chips are labels, so they read in the UI face rather than the mono face, and
   they take their colours from the theme tokens — which means one definition
   covers day, night and system-follows-OS instead of three.
   ------------------------------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 9px;
  font-family: var(--font-sans, 'Plus Jakarta Sans', sans-serif);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1;
  color: var(--text-secondary);
  background: var(--card-bg-alt);
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  white-space: nowrap;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.chip .icon {
  width: 12px;
  height: 12px;
}
.chip.client {
  color: var(--blueprint);
  background: var(--blueprint-soft);
  border-color: rgba(37, 99, 235, 0.28);
}
.chip.dept {
  color: var(--brass);
  background: var(--brass-soft);
  border-color: rgba(217, 119, 6, 0.30);
}
.chip.custom {
  color: var(--text-secondary);
  background: var(--card-bg-alt);
  border-color: var(--rule-strong);
}
.chip.group {
  color: var(--success);
  background: var(--success-soft);
  border-color: rgba(5, 150, 105, 0.30);
}
.chip.role {
  color: var(--text-secondary);
  background: var(--card-bg-alt);
  border-color: var(--rule-strong);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: var(--r-pill, 9999px);
  letter-spacing: 0.02em;
  text-transform: capitalize;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.chip.role-head,
.chip.role.role-head,
.chip.level-head {
  color: #FBBF24 !important;
  background: rgba(245, 158, 11, 0.20) !important;
  border: 1px solid rgba(251, 191, 36, 0.55) !important;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.20);
  font-weight: 700;
}
.chip.role-member,
.chip.role.role-member,
.chip.level-member {
  color: #38BDF8 !important;
  background: rgba(14, 165, 233, 0.20) !important;
  border: 1px solid rgba(56, 189, 248, 0.55) !important;
  box-shadow: 0 0 10px rgba(14, 165, 233, 0.20);
  font-weight: 700;
}
.chip.role-intern,
.chip.role.role-intern,
.chip.level-intern {
  color: #C084FC !important;
  background: rgba(168, 85, 247, 0.20) !important;
  border: 1px solid rgba(192, 132, 252, 0.55) !important;
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.20);
  font-weight: 700;
}
.chip.role-lead,
.chip.role.role-lead,
.chip.level-lead {
  color: #818CF8 !important;
  background: rgba(99, 102, 241, 0.20) !important;
  border: 1px solid rgba(129, 140, 248, 0.55) !important;
  box-shadow: 0 0 10px rgba(99, 102, 241, 0.20);
  font-weight: 700;
}
.chip.role-admin,
.chip.role.role-admin,
.chip.level-admin {
  color: #FB923C !important;
  background: rgba(249, 115, 22, 0.20) !important;
  border: 1px solid rgba(251, 146, 60, 0.55) !important;
  box-shadow: 0 0 10px rgba(249, 115, 22, 0.20);
  font-weight: 700;
}

/* Day Mode High-Contrast Role Chips */
:root[data-theme="light"] .chip.role-head,
:root[data-theme="light"] .chip.role.role-head,
:root[data-theme="light"] .chip.level-head {
  color: #B45309 !important;
  background: #FEF3C7 !important;
  border: 1px solid rgba(180, 83, 9, 0.40) !important;
  box-shadow: none !important;
}
:root[data-theme="light"] .chip.role-member,
:root[data-theme="light"] .chip.role.role-member,
:root[data-theme="light"] .chip.level-member {
  color: #0284C7 !important;
  background: #E0F2FE !important;
  border: 1px solid rgba(2, 132, 199, 0.40) !important;
  box-shadow: none !important;
}
:root[data-theme="light"] .chip.role-intern,
:root[data-theme="light"] .chip.role.role-intern,
:root[data-theme="light"] .chip.level-intern {
  color: #7E22CE !important;
  background: #F3E8FF !important;
  border: 1px solid rgba(126, 34, 206, 0.40) !important;
  box-shadow: none !important;
}
:root[data-theme="light"] .chip.role-lead,
:root[data-theme="light"] .chip.role.role-lead,
:root[data-theme="light"] .chip.level-lead {
  color: #4338CA !important;
  background: #EEF2FF !important;
  border: 1px solid rgba(67, 56, 202, 0.40) !important;
  box-shadow: none !important;
}
:root[data-theme="light"] .chip.role-admin,
:root[data-theme="light"] .chip.role.role-admin,
:root[data-theme="light"] .chip.level-admin {
  color: #C2410C !important;
  background: #FFEDD5 !important;
  border: 1px solid rgba(194, 65, 12, 0.40) !important;
  box-shadow: none !important;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .chip.role-head,
  :root:not([data-theme="dark"]) .chip.role.role-head,
  :root:not([data-theme="dark"]) .chip.level-head {
    color: #B45309 !important;
    background: #FEF3C7 !important;
    border: 1px solid rgba(180, 83, 9, 0.40) !important;
    box-shadow: none !important;
  }
  :root:not([data-theme="dark"]) .chip.role-member,
  :root:not([data-theme="dark"]) .chip.role.role-member,
  :root:not([data-theme="dark"]) .chip.level-member {
    color: #0284C7 !important;
    background: #E0F2FE !important;
    border: 1px solid rgba(2, 132, 199, 0.40) !important;
    box-shadow: none !important;
  }
  :root:not([data-theme="dark"]) .chip.role-intern,
  :root:not([data-theme="dark"]) .chip.role.role-intern,
  :root:not([data-theme="dark"]) .chip.level-intern {
    color: #7E22CE !important;
    background: #F3E8FF !important;
    border: 1px solid rgba(126, 34, 206, 0.40) !important;
    box-shadow: none !important;
  }
  :root:not([data-theme="dark"]) .chip.role-lead,
  :root:not([data-theme="dark"]) .chip.role.role-lead,
  :root:not([data-theme="dark"]) .chip.level-lead {
    color: #4338CA !important;
    background: #EEF2FF !important;
    border: 1px solid rgba(67, 56, 202, 0.40) !important;
    box-shadow: none !important;
  }
  :root:not([data-theme="dark"]) .chip.role-admin,
  :root:not([data-theme="dark"]) .chip.role.role-admin,
  :root:not([data-theme="dark"]) .chip.level-admin {
    color: #C2410C !important;
    background: #FFEDD5 !important;
    border: 1px solid rgba(194, 65, 12, 0.40) !important;
    box-shadow: none !important;
  }
}

.chip.overdue {
  color: var(--signal);
  background: var(--signal-soft);
  border-color: rgba(225, 29, 72, 0.32);
  font-weight: 700;
}
.chip.recurring {
  color: var(--text-secondary);
  border-style: dashed;
}
.chip.state {
  gap: 6px;
  font-weight: 600;
}
.chip.state-open {
  color: var(--blueprint);
  background: var(--blueprint-soft);
  border-color: rgba(37, 99, 235, 0.28);
}
.chip.state-progress {
  color: var(--brass);
  background: var(--brass-soft);
  border-color: rgba(217, 119, 6, 0.30);
}
.chip.state-done {
  color: var(--success);
  background: var(--success-soft);
  border-color: rgba(5, 150, 105, 0.30);
}
.chip.state-blocked {
  color: var(--signal);
  background: var(--signal-soft);
  border-color: rgba(225, 29, 72, 0.32);
}
/* counters stay in the mono face so digits line up column to column */
.chip.count {
  font-family: var(--font-sans, 'Plus Jakarta Sans', sans-serif);
  font-size: 11px;
  color: var(--text-secondary);
  background: var(--card-bg-alt);
  border-color: var(--rule-strong);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

/* ---- person mark & avatar ---------------------------------------------- */
.mark-tint.tint-blueprint {
  background: #2563EB;
}
.mark-tint.tint-brass {
  background: #D97706;
}
.mark-tint.tint-success {
  background: #059669;
}
.mark-tint.tint-signal {
  background: #E11D48;
}
.mark-tint.tint-slate {
  background: #475569;
}
.mark-tint.mark-avatar {
  background: transparent !important;
  padding: 0 !important;
  overflow: hidden !important;
}
.mark-tint.mark-avatar img,
.mark-avatar-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: inherit !important;
  display: block !important;
}

/* ---- Photo Uploader Component ---- */
.photo-uploader {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--r2);
}
.photo-uploader-preview {
  width: 54px;
  height: 54px;
  min-width: 54px;
  border-radius: 10px;
  background: linear-gradient(135deg, #2563EB, #1D4ED8);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-weight: 700;
  font-size: 17px;
  overflow: hidden;
  box-shadow: var(--sh1);
}
.photo-uploader-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.photo-uploader-controls {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.photo-uploader-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ---- segmented control / modern pill tabs -------------------------------- */
.segmented {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  background: var(--segmented-bg, #111B2E);
  border: 1px solid var(--segmented-border, rgba(148, 163, 184, 0.20));
  border-radius: 10px;
  max-width: 100%;
  /* as a flex item, its automatic minimum width defaults to its unwrapped
     content size, which wins over max-width:100% and forces any flex
     ancestor wider than the viewport instead of letting this scroll
     internally the way overflow-x:auto below intends */
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.segmented::-webkit-scrollbar {
  display: none;
}
.segmented button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  padding: 0 14px;
  height: 32px;
  border-radius: 7px;
  font-family: var(--font-sans, 'Plus Jakarta Sans', sans-serif);
  font-size: 13px;
  font-weight: 600;
  color: var(--segmented-btn-color, #94A3B8);
  user-select: none;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
}
.segmented button .icon {
  width: 14px;
  height: 14px;
}
.segmented button + button {
  border-left: none;
}
.segmented button:hover {
  background: var(--segmented-btn-hover-bg, rgba(255, 255, 255, 0.06));
  color: var(--segmented-btn-hover-color, #F8FAFC);
}
.segmented button:active {
  transform: translateY(1px);
}
.segmented button:focus-visible {
  outline: 2px solid var(--blueprint);
  outline-offset: -1px;
}
.segmented button[aria-pressed="true"] {
  background: var(--segmented-active-bg, linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%)) !important;
  color: var(--segmented-active-color, #FFFFFF) !important;
  border: 1px solid var(--segmented-active-border, rgba(147, 197, 253, 0.35)) !important;
  font-weight: 700 !important;
  box-shadow: var(--segmented-active-shadow, 0 2px 8px rgba(37, 99, 235, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.25)) !important;
}

/* ---- Management Main Sub-Navigation Bar (Top, Prominent & Larger) ---- */
.activities-tabs {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  background: var(--segmented-bg, var(--card-bg-alt));
  border: 1px solid var(--segmented-border, var(--rule-strong));
  border-radius: 11px;
  margin-bottom: var(--s5) !important;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.activities-tabs::-webkit-scrollbar {
  display: none;
}
.activities-tabs button {
  height: 36px;
  padding: 0 16px;
  font-size: 13.5px;
  font-weight: 600;
  border-radius: 8px;
  transition: background var(--t-fast), color var(--t-fast);
}
.activities-tabs button:hover {
  background: var(--segmented-btn-hover-bg, rgba(15, 23, 42, 0.06));
  color: var(--segmented-btn-hover-color, var(--ink));
}
.activities-tabs button[aria-pressed="true"] {
  background: var(--segmented-active-bg, #FFFFFF) !important;
  color: var(--segmented-active-color, var(--blueprint)) !important;
  font-weight: 700 !important;
  border: 1px solid var(--segmented-active-border, var(--rule-strong)) !important;
  box-shadow: var(--segmented-active-shadow, var(--sh1)) !important;
}

/* ---- cards -------------------------------------------------------------- */
.card {
  border: 1px solid var(--rule);
  border-radius: var(--r2);
  background: var(--card-bg);
  box-shadow: var(--sh1);
  padding: var(--s5) var(--s4) var(--s4);
  transition: box-shadow var(--t-fast), border-color var(--t-fast);
}
.card:hover {
  border-color: var(--rule-strong);
  box-shadow: var(--sh2);
}
.card h3 {
  font-size: 15.5px;
  margin-bottom: var(--s3);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* ---- stat / metric cards -------------------------------------------------
   One metric card, used by the dashboard, the clients portal and the reports
   view. Each position keeps its accent colour, but the accent now lives in a
   3px rule and the value rather than in a full-bleed pastel wash — four
   saturated blocks side by side out-shouted the content underneath them.
   ------------------------------------------------------------------------- */
.stat {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  min-height: 92px;
  border: 1px solid var(--rule);
  border-radius: var(--r2);
  background: var(--card-bg);
  box-shadow: var(--sh1);
  padding: var(--s4) var(--s4) var(--s4) var(--s5);
  overflow: hidden;
  transition: box-shadow var(--t-fast), border-color var(--t-fast);
}
.stat:hover {
  border-color: var(--rule-strong);
  box-shadow: var(--sh2);
}
.stat::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--slate);
}
.stat .k {
  display: block;
  font-family: var(--font-sans, 'Plus Jakarta Sans', sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  line-height: 1.3;
}
.stat .v {
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* per-position accents ---------------------------------------------------- */
.stats > .stat:nth-child(1)::before,
.grid-4 > .stat:nth-child(1)::before,
.grid-3 > .stat:nth-child(1)::before,
.grid-2 > .stat:nth-child(1)::before {
  background: var(--cyan);
}
.stats > .stat:nth-child(1) .v,
.grid-4 > .stat:nth-child(1) .v,
.grid-3 > .stat:nth-child(1) .v,
.grid-2 > .stat:nth-child(1) .v {
  color: var(--cyan);
}

.stats > .stat:nth-child(2)::before,
.grid-4 > .stat:nth-child(2)::before,
.grid-3 > .stat:nth-child(2)::before,
.grid-2 > .stat:nth-child(2)::before {
  background: var(--indigo);
}
.stats > .stat:nth-child(2) .v,
.grid-4 > .stat:nth-child(2) .v,
.grid-3 > .stat:nth-child(2) .v,
.grid-2 > .stat:nth-child(2) .v {
  color: var(--indigo);
}

.stats > .stat:nth-child(3)::before,
.grid-4 > .stat:nth-child(3)::before,
.grid-3 > .stat:nth-child(3)::before,
.grid-2 > .stat:nth-child(3)::before {
  background: var(--brass);
}
.stats > .stat:nth-child(3) .v,
.grid-4 > .stat:nth-child(3) .v,
.grid-3 > .stat:nth-child(3) .v,
.grid-2 > .stat:nth-child(3) .v {
  color: var(--brass);
}

.stats > .stat:nth-child(4)::before,
.grid-4 > .stat:nth-child(4)::before,
.grid-3 > .stat:nth-child(4)::before,
.grid-2 > .stat:nth-child(4)::before {
  background: var(--success);
}
.stats > .stat:nth-child(4) .v,
.grid-4 > .stat:nth-child(4) .v,
.grid-3 > .stat:nth-child(4) .v,
.grid-2 > .stat:nth-child(4) .v {
  color: var(--success);
}

/* an alert metric keeps the strongest treatment: tinted surface and red rule */
.stat.alert,
.stats > .stat.alert,
.grid-4 > .stat.alert,
.grid-3 > .stat.alert,
.grid-2 > .stat.alert,
.grid-3 > .stat:nth-child(5) {
  background: var(--signal-soft) !important;
  border-color: rgba(225, 29, 72, 0.28) !important;
}
.stat.alert::before,
.stats > .stat.alert::before,
.grid-4 > .stat.alert::before,
.grid-3 > .stat.alert::before,
.grid-2 > .stat.alert::before,
.grid-3 > .stat:nth-child(5)::before {
  background: var(--signal) !important;
}
.stat.alert .k,
.stats > .stat.alert .k,
.grid-4 > .stat.alert .k,
.grid-3 > .stat.alert .k,
.grid-3 > .stat:nth-child(5) .k {
  color: var(--signal) !important;
  opacity: 0.85;
}
.stat.alert .v,
.stats > .stat.alert .v,
.grid-4 > .stat.alert .v,
.grid-3 > .stat.alert .v,
.grid-3 > .stat:nth-child(5) .v {
  color: var(--signal) !important;
}

.blocked-note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-top: 10px;
  padding: 8px 12px;
  background: var(--signal-soft);
  color: var(--signal);
  border: 1px solid rgba(225, 29, 72, 0.25);
  border-radius: var(--r1);
  font-size: 12.5px;
  line-height: 1.45;
  font-weight: 600;
}
.escalation {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-top: 10px;
  padding: 8px 12px;
  background: var(--brass-soft);
  border-left: 3.5px solid var(--brass);
  border-radius: 0 var(--r1) var(--r1) 0;
  font-size: 12px;
  color: #B45309;
  font-weight: 500;
  line-height: 1.45;
}
:root[data-theme="dark"] .escalation {
  color: #FDE68A;
}

/* ---- todo item card ----------------------------------------------------- */
.item {
  position: relative;
  border: 1px solid var(--rule);
  border-radius: var(--r2);
  background: var(--card-bg);
  padding: var(--s4) var(--s4) var(--s4) calc(var(--s4) + 4px);
  box-shadow: var(--sh1);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  display: flex;
  flex-direction: column;
  gap: 8px;
  content-visibility: auto;
  contain-intrinsic-size: auto 120px;
}
/* the state rail: one flat 3px stripe, coloured from the state tokens so it
   tracks the theme instead of five hard-coded gradients */
.item::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  border-radius: var(--r2) 0 0 var(--r2);
  background: var(--state-open);
}
.item.is-open::before {
  background: var(--state-open);
}
.item.is-progress::before {
  background: var(--state-progress);
}
.item.is-done::before {
  background: var(--state-done);
}
.item.is-done {
  opacity: 0.68;
}
.item.is-blocked::before {
  background: var(--state-blocked);
}
.item.is-overdue {
  border-color: rgba(225, 29, 72, 0.35);
  background: var(--card-bg);
}
.item.is-overdue::before {
  background: var(--state-blocked);
}
.item:hover {
  box-shadow: var(--sh2);
  border-color: var(--rule-strong);
}
.item:active {
  box-shadow: var(--sh1);
}
.item .title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.4;
}
.item .desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  white-space: pre-wrap;
}
.item .meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.item .actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
}

/* ---- Dashboard Modern Todo Row (Horizontal Strip) ---------------------- */

/* the completion control: a real checkbox shape, themed from tokens */
.todo-check-btn {
  width: 20px;
  height: 20px;
  min-width: 20px;
  border-radius: 5px;
  border: 1.5px solid var(--blueprint);
  background: var(--blueprint-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}

.todo-check-btn:hover {
  border-color: var(--blueprint);
  background: var(--tint-strong);
}

.todo-check-btn:focus-visible {
  outline: 2px solid var(--blueprint);
  outline-offset: 2px;
}

/* Priority is carried by the checkbox colour instead of another chip on the
   row: grey for low, blue for normal, red for high, each filling the whole
   box so it reads at a glance down a long list. Colour is never the only cue
   — the button's title and aria-label name the priority too, and a completed
   task turns green with a tick whatever its priority. */
.todo-check-btn.prio-low:not(.checked) {
  border-color: var(--slate);
  background: var(--slate);
}
.todo-check-btn.prio-normal:not(.checked) {
  border-color: var(--blueprint);
  background: var(--blueprint);
}
.todo-check-btn.prio-high:not(.checked) {
  border-color: var(--signal);
  background: var(--signal);
}
/* the filled box beats the generic hover tint on specificity, so the hover
   feedback has to be restated here or it is lost */
.todo-check-btn.prio-low:not(.checked):hover,
.todo-check-btn.prio-normal:not(.checked):hover,
.todo-check-btn.prio-high:not(.checked):hover {
  filter: brightness(1.18);
  transform: scale(1.08);
}

.todo-check-btn.checked {
  background: var(--success);
  border-color: var(--success);
  color: #ffffff;
}

.todo-check-btn .check-icon {
  width: 13px;
  height: 13px;
  stroke-width: 3;
  stroke: #ffffff;
}

.channel-badge .channel-icon,
.channel-badge svg {
  width: 12px;
  height: 12px;
}

/* Channel badges take their hue from the theme tokens, so one rule covers day,
   night and system-follows-OS. */
.badge-urgent {
  background: var(--signal-soft);
  color: var(--signal);
  border: 1px solid rgba(225, 29, 72, 0.32);
  font-weight: 700;
}
.badge-email {
  background: var(--brand-orange-soft);
  color: var(--brand-orange);
  border: 1px solid rgba(249, 115, 22, 0.30);
}
.badge-linkedin {
  background: var(--cyan-soft);
  color: var(--cyan);
  border: 1px solid rgba(2, 132, 199, 0.30);
}
.badge-web {
  background: var(--indigo-soft);
  color: var(--indigo);
  border: 1px solid rgba(99, 102, 241, 0.30);
}

.badge-default {
  background: var(--card-bg-alt);
  color: var(--text-secondary);
  border: 1px solid var(--rule);
}

/* ---- instruction item --------------------------------------------------- */
.note {
  position: relative;
  border: 1px solid var(--rule);
  border-radius: var(--r2);
  background: var(--card-bg);
  padding: var(--s4) var(--s4) var(--s4) calc(var(--s4) + 4px);
  box-shadow: var(--sh1);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  content-visibility: auto;
  contain-intrinsic-size: auto 140px;
}
.note::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  border-radius: var(--r2) 0 0 var(--r2);
  background: var(--purple);
  opacity: 0.45;
}
.note:hover {
  border-color: var(--rule-strong);
  box-shadow: var(--sh2);
}
.note:active {
  box-shadow: var(--sh1);
}
/* unread is carried by the rail's weight, not by tinting the whole card */
.note.unread::before {
  opacity: 1;
}
.note.unread {
  border-color: rgba(139, 92, 246, 0.28);
}
.note.archived {
  opacity: 0.62;
}
.note.archived::before {
  background: var(--text-secondary);
}
.note .byline {
  display: flex;
  gap: var(--s2);
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 9px;
  font-size: 12px;
  color: var(--text-secondary);
}
.note .byline strong {
  color: var(--ink);
  font-weight: 650;
}
.note .body {
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-wrap;
}
.note .tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.note .actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: var(--s3);
}
.readers {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
  font-family: var(--font-sans, 'Plus Jakarta Sans', sans-serif);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* ---- board grouping header ----------------------------------------------
   The Person / Client / Department views bucket todos under a heading that
   carries the bucket name and its count. It had no styles at all, so the
   count's `.push` (margin-left:auto) had no flex parent to push against and
   rendered flush against the name — "Shohag Munshe3".
   ------------------------------------------------------------------------- */
.group-head {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin: var(--s3) 0 2px;
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--rule);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.stack:first-child > .group-head {
  margin-top: 0;
}
.group-head .n {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 7px;
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  background: var(--card-bg-alt);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* ---- filter toolbar ----------------------------------------------------- */
.filterbar {
  border: 1px solid var(--rule);
  border-radius: var(--r2);
  background: var(--card-bg);
  box-shadow: var(--sh1);
  margin-bottom: var(--s3);
  overflow: hidden;
}
.filterbar-head {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) var(--s4);
  background: var(--card-bg-alt);
  border-bottom: 1px solid var(--rule);
  min-height: 50px;
}
.filterbar-head h2 {
  font-size: 14.5px;
  font-weight: 700;
}
.filterbar-head .icon {
  color: var(--blueprint);
}
.filterbar-head .tools {
  display: flex;
  gap: var(--s2);
  margin-left: auto;
}
.filters {
  padding: var(--s4);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(152px, 1fr));
  gap: var(--s3) var(--s4);
  align-items: end;
}
.filters .field {
  margin: 0;
  min-width: 0;
}
/* free-text search earns two tracks once the row is wide enough to spare them */
@media (min-width: 1180px) {
  .filters > .field:first-child {
    grid-column: span 2;
  }
}

.savedbar {
  display: flex;
  gap: var(--s2);
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: var(--s3);
}
.savedbar .chip {
  cursor: pointer;
  height: 25px;
  background: var(--blueprint-soft);
  color: var(--blueprint);
  border-color: rgba(37, 99, 235, 0.25);
  transition: background var(--t), transform var(--t), box-shadow var(--t);
}
.savedbar .chip:hover {
  background: var(--tint-strong);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.15);
}
.savedbar .chip button {
  border: none;
  background: none;
  cursor: pointer;
  padding: 0 0 0 5px;
  color: inherit;
  font-size: 13px;
  line-height: 1;
  opacity: 0.7;
}
.savedbar .chip button:hover {
  opacity: 1;
}

.boardbar {
  display: flex;
  gap: var(--s4);
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: var(--s4);
}
.boardbar .checkline {
  margin: 0;
  font-size: 13px;
  color: var(--text-secondary);
}

/* ---- tables ------------------------------------------------------------- */
.tablewrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--rule);
  border-radius: var(--r2);
  background: var(--card-bg);
  box-shadow: var(--sh1);
}
table {
  border-collapse: collapse;
  width: 100%;
  min-width: 520px;
  font-size: 13.5px;
}
caption {
  caption-side: top;
  text-align: left;
  font-family: var(--font-sans, 'Plus Jakarta Sans', sans-serif);
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--card-bg-alt);
  padding: 14px var(--s4);
  border-bottom: 1px solid var(--rule);
  font-weight: 700;
}
thead th {
  position: sticky;
  top: 0;
  font-family: var(--font-sans, 'Plus Jakarta Sans', sans-serif);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  color: var(--text-secondary);
  background: var(--card-bg-alt);
  padding: 11px var(--s4);
  border-bottom: 1.5px solid var(--rule-strong);
  white-space: nowrap;
  font-weight: 700;
}
tbody td, tbody th {
  padding: 12px var(--s4);
  border-bottom: 1px solid var(--rule);
  vertical-align: middle;
  text-align: left;
}
tbody th {
  font-weight: 600;
  color: var(--ink);
}
tbody tr:last-child td, tbody tr:last-child th {
  border-bottom: none;
}
tbody tr {
  transition: background var(--t-fast);
  content-visibility: auto;
  contain-intrinsic-size: auto 44px;
}
tbody tr:hover {
  background: var(--card-bg-alt);
}

/* ---- modal -------------------------------------------------------------- */
dialog.modal {
  border: 1px solid var(--rule-strong);
  border-radius: var(--r3, 16px);
  background: var(--card-bg);
  color: var(--text);
  box-shadow: var(--sh3);
  padding: 0;
  width: min(560px, 94vw);
  overflow: hidden;
  animation: modal-in 110ms cubic-bezier(0.16, 1, 0.3, 1);
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform, opacity;
}
@keyframes modal-in {
  from {
    opacity: 0;
    transform: scale(0.97) translateY(6px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
dialog.modal::backdrop {
  background: var(--modal-overlay, rgba(8, 12, 22, 0.72));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.modal-head {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 16px 20px;
  border-bottom: 1px solid var(--rule);
  background: var(--card-bg-alt);
}
.modal-head h2 {
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.modal-body {
  padding: 20px;
  max-height: min(70vh, 620px);
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scroll-behavior: smooth;
}
.modal-body > .field:last-child {
  margin-bottom: 0;
}
.modal-foot {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 14px 20px;
  border-top: 1px solid var(--rule);
  background: var(--card-bg-alt);
}

@media (max-width: 600px) {
  dialog.modal {
    width: 95vw;
    max-height: 94vh;
    border-radius: var(--r2);
  }
  .modal-head {
    padding: 10px 14px;
  }
  .modal-body {
    padding: 12px 14px;
    max-height: min(72vh, 480px);
  }
  .modal-foot {
    padding: 10px 14px;
    flex-wrap: wrap-reverse;
  }
  .modal-foot .btn {
    flex: 1 1 auto;
    text-align: center;
    justify-content: center;
  }
}

/* ---- extended client info (CRM intake fields) modal --------------------- */
dialog.modal.client-fields-modal {
  width: min(640px, 94vw);
}
.client-field-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.client-field-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
/* the field-picker rows carry no value input, so they read as a plain
   checkbox list and can sit two-up instead of one per line */
.client-field-row--pick {
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--r1);
  border: 1px solid transparent;
}
.client-field-row--pick:hover {
  background: var(--card-bg-alt);
  border-color: var(--rule);
}
.client-field-rows:has(.client-field-row--pick) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 2px 12px;
}

/* a field the workspace is not showing: still editable, visibly parked */
.client-field-row.is-hidden-field .client-field-row-label {
  color: var(--text-secondary);
}
.client-field-row-off {
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: var(--card-bg-alt);
  border: 1px solid var(--rule);
}

.client-field-row-check {
  display: inline-flex;
  flex: none;
  cursor: pointer;
}
.client-field-row-check input[type="checkbox"] {
  cursor: pointer;
  margin: 0;
  width: 15px;
  height: 15px;
}
.client-field-row-label {
  flex: 0 0 130px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
}
.client-field-row input[type="text"],
.client-field-row input[type="date"] {
  flex: 1 1 180px;
  min-width: 0;
}
@media (max-width: 480px) {
  .client-field-row input[type="text"],
  .client-field-row input[type="date"] {
    flex-basis: 100%;
  }
}

/* ---- client Details tab: extended info summary card ---------------------- */
.client-extended-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px 24px;
}
.client-extended-info-item {
  min-width: 0;
}
.client-extended-info-item .k {
  display: block;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 3px;
}
.client-extended-info-item .v {
  font-size: 13.5px;
  color: var(--ink);
  word-break: break-word;
}

/* ---- responsive table wrapper ------------------------------------------- */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--r1);
}

/* ---- toasts ------------------------------------------------------------- */
.toasts {
  position: fixed;
  bottom: var(--s4);
  left: var(--s4);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}
.toast {
  display: flex;
  gap: var(--s2);
  align-items: flex-start;
  border: 1px solid var(--rule-strong);
  border-left: 4.5px solid var(--success);
  border-radius: var(--r1);
  background: var(--card-bg);
  box-shadow: 0 6px 20px -2px rgba(5, 150, 105, 0.25);
  padding: 12px var(--s3);
  font-size: 13.5px;
  font-weight: 600;
  max-width: 380px;
  animation: toast-in 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.toast.warn {
  border-left-color: var(--signal);
  box-shadow: 0 6px 20px -2px rgba(225, 29, 72, 0.25);
}
.toast .icon {
  color: var(--success);
  margin-top: 1px;
}
.toast.warn .icon {
  color: var(--signal);
}
@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---- notification list -------------------------------------------------- */
.notif {
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
  border-bottom: 1px solid var(--rule);
  padding: 12px 0;
  font-size: 13.5px;
}
.notif:last-child {
  border-bottom: none;
}
.notif .marker {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: transparent;
  margin-top: 6px;
  flex: none;
}
.notif.unread .marker {
  background: linear-gradient(135deg, #3B82F6, #1D4ED8);
  box-shadow: 0 0 10px rgba(37, 99, 235, 0.8);
}
.notif.unread .what {
  font-weight: 700;
  color: var(--ink);
}
.notif .when {
  font-family: var(--font-sans, 'Plus Jakarta Sans', sans-serif);
  font-size: 11.5px;
  color: var(--text-secondary);
  margin-top: 3px;
}

/* .toggle-theme shares the top-bar control style defined in 03-layout.css. */

/* ---- document footer ---------------------------------------------------- */
.appfoot {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--s5) var(--s6);
}
.appfoot p {
  border-top: 1px solid var(--rule);
  padding-top: var(--s4);
  font-family: var(--font-sans, 'Plus Jakarta Sans', sans-serif);
  font-size: 11px;
  color: var(--text-secondary);
  display: flex;
  gap: var(--s2);
  flex-wrap: wrap;
  align-items: center;
}

/* ---- tag field: searchable, and a tick list (6.4) ------------------------ */
.tagfield {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}
.ticklist {
  max-height: 172px;
  overflow-y: auto;
  border: 1px solid var(--rule);
  border-radius: var(--r1);
  padding: var(--s2) var(--s3);
  background: var(--card-bg-alt);
}
.ticklist .checkline {
  margin-bottom: 5px;
  font-size: 13.5px;
}
.ticklist .checkline:last-child {
  margin-bottom: 0;
}
.ticklist .checkline .chip {
  margin-left: auto;
}
.ticklist-empty {
  font-size: 13px;
  color: var(--text-secondary);
  margin: var(--s1) 0;
}

/* ---- assignee multi-select picker --------------------------------------- */
.assignee-picker {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.assignee-selected-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 28px;
  align-items: center;
}
.assignee-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px 3px 6px;
  background: var(--blueprint-soft);
  border: 1px solid rgba(37, 99, 235, 0.35);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}
.assignee-chip .chip-remove {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0 2px;
  font-size: 13px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  transition: color 0.15s;
}
.assignee-chip .chip-remove:hover {
  color: #EF4444;
}
.assignee-list {
  max-height: 180px;
  overflow-y: auto;
  border: 1px solid var(--rule);
  border-radius: var(--r1);
  padding: 6px 10px;
  background: var(--card-bg-alt);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.assignee-item-line {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s;
  font-size: 13px;
  user-select: none;
}
.assignee-item-line:hover {
  background: var(--btn-hover-bg, var(--card-bg));
}
/* a picked member: tinted with the same soft-blue token the rest of the app
   uses for a selected state, so it reads as selected in both themes rather
   than through one fixed cyan that only suited the dark one */
.assignee-item-line.is-selected {
  background: var(--blueprint-soft);
  border: 1px solid var(--blueprint);
}
.assignee-item-line:not(.is-selected) {
  border: 1px solid transparent;
}
.assignee-item-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}
.assignee-item-name {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.assignee-item-line input[type="checkbox"] {
  cursor: pointer;
  margin: 0;
  width: 15px;
  height: 15px;
}

/* ---- pick-list wells (department checkboxes, assignable members) --------
   The inset surface those checkbox grids sit in. This was inline on each
   of the four call sites as a 3% white tint, which lifts off the dark
   card but is invisible white-on-white in the light theme, leaving the
   well as a bare outline with no surface. --card-bg-alt is the token for
   exactly this "sub-container" role and carries both themes. */
.dept-checkbox-list,
.client-assignee-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 6px;
  padding: 8px 10px;
  background: var(--card-bg-alt);
  border: 1px solid var(--rule);
  border-radius: var(--r1);
}
.client-assignee-list {
  max-height: 170px;
  overflow-y: auto;
  overscroll-behavior-y: contain;
}

/* ---- multi-select picker components (Client & Department) --------------- */
.multi-picker {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.multi-picker-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.multi-picker-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 28px;
  align-items: center;
}
.multi-picker-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px 3px 6px;
  background: var(--blueprint-soft);
  border: 1px solid rgba(37, 99, 235, 0.35);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}
.multi-picker-chip.client-chip {
  border-color: rgba(37, 99, 235, 0.40);
  background: var(--blueprint-soft);
}
.multi-picker-chip.dept-chip {
  border-color: rgba(217, 119, 6, 0.40);
  background: var(--brass-soft);
}
.multi-picker-chip .chip-remove {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0 2px;
  font-size: 13px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  transition: color 0.15s;
}
.multi-picker-chip .chip-remove:hover {
  color: #EF4444;
}
.multi-picker-list {
  max-height: 170px;
  overflow-y: auto;
  border: 1px solid var(--rule);
  border-radius: var(--r1);
  padding: 6px 10px;
  background: var(--card-bg-alt);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
/* sits under a capped picker list, saying how much of the book is on screen
   and offering the rest */
.multi-picker-count {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--text-secondary);
}
.multi-picker-count:empty {
  display: none;
}
.multi-picker-count .btn {
  margin-left: auto;
}

.multi-picker-item-line {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s;
  font-size: 13px;
  user-select: none;
}
.multi-picker-item-line:hover {
  background: var(--btn-hover-bg, var(--card-bg));
}
.multi-picker-item-line input[type="checkbox"] {
  cursor: pointer;
  margin: 0;
  width: 15px;
  height: 15px;
}

/* ---- reactions bar & picker --------------------------------------------- */
.reactions-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  position: relative;
}

.emoji,
.reaction-emoji-btn,
.reaction-pill .emoji,

.reaction-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  background: var(--card-bg-alt, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--rule-strong, rgba(255, 255, 255, 0.12));
  border-radius: 9999px;
  font-size: 12px;
  color: var(--text, #cbd5e1);
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

:root[data-theme="light"] .reaction-pill {
  background: #ffffff;
  color: #334155;
  border: 1px solid #cbd5e1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .reaction-pill {
    background: #ffffff;
    color: #334155;
    border: 1px solid #cbd5e1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  }
}

.reaction-pill:hover {
  background: var(--btn-hover-bg, rgba(255, 255, 255, 0.08));
  border-color: var(--blueprint, #3b82f6);
  color: var(--blueprint, #3b82f6);
  transform: translateY(-1px);
}

.reaction-pill.active {
  background: rgba(59, 130, 246, 0.18) !important;
  border-color: #3b82f6 !important;
  color: #60a5fa !important;
  font-weight: 700;
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.3) !important;
}

:root[data-theme="light"] .reaction-pill.active {
  background: #eff6ff !important;
  border-color: #2563eb !important;
  color: #1d4ed8 !important;
  box-shadow: 0 1px 4px rgba(37, 99, 235, 0.25) !important;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .reaction-pill.active {
    background: #eff6ff !important;
    border-color: #2563eb !important;
    color: #1d4ed8 !important;
    box-shadow: 0 1px 4px rgba(37, 99, 235, 0.25) !important;
  }
}

.reaction-pill .emoji {
  font-size: 15px;
  line-height: 1;
  transform: scale(1.05);
}

.reaction-pill .count {
  font-family: var(--font-sans, 'Plus Jakarta Sans', sans-serif);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.reaction-picker-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed var(--rule-strong, rgba(255, 255, 255, 0.18));
  border-radius: 9999px;
  font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-secondary, #94a3b8);
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

:root[data-theme="light"] .reaction-picker-btn {
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  color: #64748b;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .reaction-picker-btn {
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    color: #64748b;
  }
}

.reaction-picker-btn .icon-smile {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols", sans-serif !important;
  font-style: normal;
  font-variant-emoji: emoji;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
}

.reaction-picker-btn:hover {
  background: rgba(59, 130, 246, 0.12) !important;
  border: 1px solid #3b82f6 !important;
  color: #3b82f6 !important;
  transform: translateY(-1px);
}

.reaction-picker-pop {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: rgba(15, 23, 42, 0.98);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1.5px solid #3b82f6;
  border-radius: 28px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0 16px rgba(59, 130, 246, 0.25);
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  top: auto;
  z-index: 1000;
  animation: popIn 0.16s cubic-bezier(0.16, 1, 0.3, 1);
}

:root[data-theme="light"] .reaction-picker-pop {
  background: rgba(255, 255, 255, 0.98);
  border: 1.5px solid #2563eb;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.15), 0 0 12px rgba(37, 99, 235, 0.2);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .reaction-picker-pop {
    background: rgba(255, 255, 255, 0.98);
    border: 1.5px solid #2563eb;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.15), 0 0 12px rgba(37, 99, 235, 0.2);
  }
}

.reaction-emoji-btn {
  background: transparent;
  border: none;
  font-size: 21px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 8px;
  line-height: 1;
  transition: transform 0.14s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.14s ease;
}

.reaction-emoji-btn:hover {
  transform: scale(1.38);
  background: rgba(59, 130, 246, 0.2);
}

.reaction-emoji-btn:active {
  transform: scale(1.15);
}

@keyframes popIn {
  from { opacity: 0; transform: translateY(6px) scale(0.92); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---- comment thread (5.0) ----------------------------------------------- */
.thread {
  margin-top: 10px;
  border-top: 1px dashed var(--rule);
  padding-top: 8px;
}
.thread summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--font-sans, 'Plus Jakarta Sans', sans-serif);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-secondary);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}
.thread summary::-webkit-details-marker {
  display: none;
}
.thread summary::before {
  content: "+ ";
  color: var(--blueprint);
}
.thread[open] summary::before {
  content: "– ";
}
.thread summary:hover {
  color: var(--blueprint);
}
.dept-visibility-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--blueprint);
  background: var(--blueprint-soft);
  padding: 2px 7px;
  border-radius: 9999px;
  border: 1px solid rgba(37, 99, 235, 0.25);
}
.dept-visibility-notice {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--blueprint);
  background: var(--blueprint-soft);
  border: 1px solid rgba(37, 99, 235, 0.2);
  border-radius: 6px;
  padding: 6px 10px;
  margin-bottom: 4px;
}
.dept-visibility-notice .icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.thread-body {
  padding-top: var(--s2);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}
.comment {
  border-left: 2.5px solid var(--blueprint);
  padding: 3px 0 3px var(--s2);
  font-size: 13px;
  line-height: 1.45;
  background: var(--card-bg-alt);
  border-radius: 0 var(--r1) var(--r1) 0;
  padding: 6px 10px;
}
.comment-by {
  display: flex;
  gap: var(--s2);
  align-items: baseline;
  font-family: var(--font-sans, 'Plus Jakarta Sans', sans-serif);
  font-size: 10.5px;
  color: var(--text-secondary);
  margin-bottom: 2px;
}
.comment-by strong {
  color: var(--ink);
  font-weight: 700;
}
.comment-tools {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.btn-inline {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-sans, 'Plus Jakarta Sans', sans-serif);
  font-size: 10px;
  font-weight: 600;
  color: var(--blueprint);
  cursor: pointer;
  opacity: 0.8;
  transition: opacity var(--t), color var(--t);
  text-decoration: underline;
}
.btn-inline:hover {
  opacity: 1;
}
.btn-inline.danger {
  color: var(--signal);
}
.comment-edited-tag {
  font-family: var(--font-sans, 'Plus Jakarta Sans', sans-serif);
  font-size: 9.5px;
  color: var(--text-secondary);
  opacity: 0.7;
}
.comment-body-text {
  font-size: 13px;
  color: var(--ink);
  line-height: 1.45;
}
.comment-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}
.comment-form-row {
  display: flex;
  gap: var(--s2);
  align-items: center;
  position: relative;
}
.comment-form-row input,
.comment-form-row textarea {
  flex: 1;
}

/* ---- Mentions & Reply Badges ---- */
:root[data-theme="dark"] .mention-tag {
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.15);
  border-color: rgba(56, 189, 248, 0.3);
}
.mention-tag:hover {
  background: rgba(37, 99, 235, 0.2);
}

/* ---- Social App Style Quoted Replies ---- */
:root[data-theme="dark"] .reply-draft-header {
  color: #38bdf8;
}

.msg-reply-quote {
  background: rgba(37, 99, 235, 0.06);
  border-left: 3px solid #2563eb;
  border-radius: 4px;
  padding: 4px 10px;
  margin-bottom: 5px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11.5px;
  cursor: pointer;
  transition: background 0.15s ease;
  user-select: none;
}
:root[data-theme="dark"] .msg-reply-quote {
  background: rgba(56, 189, 248, 0.1);
  border-left-color: #38bdf8;
}
.msg-reply-quote:hover {
  background: rgba(37, 99, 235, 0.12);
}
:root[data-theme="dark"] .msg-reply-quote-author {
  color: #38bdf8;
}

.mention-btn-trigger {
  background: none;
  border: 1px solid var(--rule);
  border-radius: var(--r1);
  padding: 4px 8px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  transition: all 0.15s ease;
}
.mention-btn-trigger:hover {
  color: #2563eb;
  border-color: #2563eb;
  background: rgba(37, 99, 235, 0.05);
}

.mention-pop-item:hover,

/* ---- dedicated group chat modal & workspace (fitted, zero outer scroll) ---- */
dialog.modal.modal-chat {
  width: min(720px, 95vw);
  height: min(85vh, 700px);
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
dialog.modal.modal-chat .modal-body.chat-modal-body {
  padding: 0;
  max-height: none;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.group-chat-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}
.group-chat-header {
  padding: 10px 16px;
  background: var(--card-bg-alt);
  border: none;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.group-chat-messages {
  flex: 1;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  transform: translateZ(0);
  will-change: scroll-position;
  contain: content;
}
.group-chat-input-bar {
  flex-shrink: 0;
  padding: 10px 16px;
  background: var(--card-bg-alt);
  border-top: 1px solid var(--rule);
  margin-top: 0;
  border-radius: 0;
}

/* =========================================================================
   DASHBOARD MODERN TODO ROW & EXECUTIVE CARDS
   ========================================================================= */
.dashboard-todo-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  background: var(--card-bg);
  border: 1px solid var(--rule);
  border-radius: var(--r2);
  padding: var(--s3) var(--s4);
  margin-bottom: 10px;
  box-shadow: var(--sh1);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  cursor: pointer;
  position: relative;
}
.dashboard-todo-row:hover {
  border-color: var(--rule-strong);
  box-shadow: var(--sh2);
}
.dashboard-todo-row.is-done {
  opacity: 0.68;
}
.dashboard-todo-row.is-overdue {
  border-color: rgba(225, 29, 72, 0.35);
  border-left: 3.5px solid var(--signal);
}

.dashboard-todo-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 8px;
  flex-wrap: wrap;
}

.dashboard-todo-main-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  flex-wrap: nowrap;
}

/* everything after the title is trailing metadata: it keeps its own size and
   the title absorbs whatever is left, so the row never wraps to two lines */
.dashboard-todo-main-row > .due,
.dashboard-todo-main-row > .dashboard-assignee-mark {
  flex: none;
}

/* ---- task detail popup ------------------------------------------------- */
/* Opened from a dashboard row, whose one-line layout has to ellipsise long
   titles; here the title wraps in full, which is the reason the popup exists. */
dialog.modal.todo-detail-modal {
  max-width: 560px;
}
.todo-detail {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.todo-detail-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink);
  white-space: normal;
  overflow-wrap: anywhere;
}
.todo-detail-title.strikethrough {
  text-decoration: line-through;
  color: var(--text-secondary);
}
.todo-detail-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.todo-detail-line {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-size: 13px;
}
.todo-detail-label {
  flex: none;
  width: 96px;
  color: var(--text-secondary);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 700;
}
.todo-detail-value {
  flex: 1;
  min-width: 0;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.todo-detail-desc {
  margin: 0;
  line-height: 1.55;
  white-space: pre-wrap;
}
.todo-detail-person {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

/* the priority chip mirrors the filled box on the row it was opened from */
.chip.prio-chip {
  color: #ffffff;
  border-color: transparent;
}
.chip.prio-chip.prio-low {
  background: var(--slate);
}
.chip.prio-chip.prio-normal {
  background: var(--blueprint);
}
.chip.prio-chip.prio-high {
  background: var(--signal);
}

/* the title is the row's accessible control, so it needs a visible focus ring */
.dashboard-todo-title[role="button"] {
  cursor: pointer;
  border-radius: 4px;
}
.dashboard-todo-title[role="button"]:focus-visible {
  outline: 2px solid var(--blueprint);
  outline-offset: 2px;
}

/* the avatar stands in for the assignee; the name is in its tooltip */
.dashboard-assignee-mark {
  display: inline-flex;
  align-items: center;
  flex: none;
}
.dashboard-assignee-mark .mark-tint {
  width: 25px;
  height: 25px;
  font-size: 10.5px;
}

.dashboard-checkbox {
  width: 19px;
  height: 19px;
  min-width: 19px;
  border-radius: 6px;
  border: 1.5px solid var(--rule-strong);
  background: var(--card-bg-alt);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 700;
  transition: all 0.14s ease;
  padding: 0;
}
.dashboard-checkbox:hover {
  border-color: var(--blueprint);
  transform: scale(1.08);
}
.dashboard-checkbox.is-checked {
  background: var(--grad-primary);
  border-color: var(--blueprint);
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.35);
}

.dashboard-client-name {
  font-weight: 700;
  color: var(--blueprint);
  font-size: 12.5px;
  white-space: nowrap;
  font-family: var(--font-sans, 'Plus Jakarta Sans', sans-serif);
  padding: 2px 7px;
  background: var(--blueprint-soft);
  border: 1px solid rgba(37, 99, 235, 0.25);
  border-radius: 5px;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.dashboard-todo-title {
  font-size: 15px;
  color: var(--ink);
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  line-height: 1.4;
  word-break: break-word;
}
.dashboard-todo-title.strikethrough {
  text-decoration: line-through;
  opacity: 0.65;
  color: var(--text-secondary);
}

.dashboard-assignee-text {
  margin-left: auto;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  padding-left: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.channel-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 0 10px;
  border-radius: var(--r-pill);
  white-space: nowrap;
  line-height: 1;
}
.channel-badge.badge-urgent {
  background: rgba(225, 29, 72, 0.12);
  color: #E11D48;
  border: 1px solid rgba(225, 29, 72, 0.35);
}
.channel-badge.badge-overdue {
  background: rgba(217, 119, 6, 0.12);
  color: #D97706;
  border: 1px solid rgba(217, 119, 6, 0.35);
}
.channel-badge.badge-channel {
  background: rgba(37, 99, 235, 0.10);
  color: #2563EB;
  border: 1px solid rgba(37, 99, 235, 0.25);
}

/* ---- Sub-nav Row with Separated Groups & Discussions Button ---- */
.activities-subnav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

/* the workspace call to action sits on the same 36px control rhythm as the
   tab rail beside it, and on the app's own primary blue */
.groups-discord-open-btn {
  background: var(--grad-primary) !important;
  color: #FFFFFF !important;
  font-size: 13px;
  font-weight: 650 !important;
  border-radius: var(--r1) !important;
  height: 36px;
  padding: 0 15px !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.14) !important;
  border: 1px solid transparent !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--t-fast), box-shadow var(--t-fast);
}
.groups-discord-open-btn:hover {
  background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%) !important;
  box-shadow: 0 2px 8px -2px rgba(37, 99, 235, 0.45) !important;
}
.groups-discord-open-btn:active {
  transform: translateY(1px);
}
.groups-discord-open-btn:focus-visible {
  outline: 2px solid var(--blueprint);
  outline-offset: 2px;
}

.groups-fullscreen-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding: 2px 0;
}
.groups-back-btn {
  background: var(--card-bg, #2B2D31) !important;
  color: var(--ink, #DBDEE1) !important;
  border: 1px solid var(--rule, #4E5058) !important;
  border-radius: 8px !important;
  padding: 6px 14px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.groups-back-btn:hover {
  background: var(--blueprint, #5865F2) !important;
  color: #FFFFFF !important;
  border-color: var(--blueprint, #5865F2) !important;
  transform: translateX(-2px);
}

/* ---- Discord Two-Column Workspace Layout (Day/Night Adaptive) ---- */
/* Height budget: top bar + section rail + page padding + the workspace's own
   header row, plus a little air at the foot. The old 130px ignored the rail and
   the header, so the panel ran off the bottom of the window and lost its
   rounded foot. */
.discord-hub-container {
  display: flex;
  background: var(--discord-main-bg);
  border: 1px solid var(--rule);
  border-radius: var(--r2);
  box-shadow: var(--sh1);
  overflow: hidden;
  height: calc(100vh - 240px);
  min-height: 460px;
  max-height: calc(100vh - 240px);
}

/* Left Sidebar Channels */
.discord-channels-sidebar {
  width: 290px;
  min-width: 260px;
  max-width: 320px;
  background: var(--discord-sidebar-bg);
  border-right: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  height: 100%;
  overflow: hidden;
}

.discord-sidebar-top {
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
}
.discord-sidebar-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.discord-sidebar-title {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-secondary, #949BA4);
  text-transform: uppercase;
  font-family: var(--font-sans, 'Plus Jakarta Sans', sans-serif);
  display: flex;
  align-items: center;
  gap: 6px;
}
.discord-sidebar-new-btn {
  background: var(--blueprint, #5865F2) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 4px 10px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  cursor: pointer;
  transition: all 0.15s ease;
}
.discord-sidebar-new-btn:hover {
  filter: brightness(1.08);
}
.discord-sidebar-search {
  background: var(--discord-input-bg) !important;
  border: 1px solid var(--rule) !important;
  border-radius: 6px !important;
  color: var(--ink) !important;
  font-size: 13px !important;
  padding: 6px 10px !important;
  width: 100% !important;
  outline: none !important;
}
.discord-sidebar-search::placeholder {
  color: var(--text-secondary) !important;
}
.discord-channels-list {
  flex: 1 1 0%;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.discord-channel-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 600;
  transition: all 0.12s ease;
  user-select: none;
  text-decoration: none;
}
.discord-channel-pill:hover {
  background: var(--discord-item-hover);
  color: var(--ink);
}
.discord-channel-pill.active {
  background: var(--discord-item-active) !important;
  color: var(--ink) !important;
  font-weight: 700 !important;
  box-shadow: inset 3px 0 0 var(--blueprint);
}

.discord-channel-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}
.discord-channel-hash {
  color: var(--text-secondary, #80848E);
  font-size: 16px;
  font-weight: 700;
}
.discord-channel-pill.active .discord-channel-hash {
  color: var(--blueprint, #5865F2);
}
.discord-channel-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.discord-channel-badge {
  background: var(--blueprint, #5865F2);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 9999px;
  font-family: var(--font-sans, 'Plus Jakarta Sans', sans-serif);
  font-variant-numeric: tabular-nums;
}
.discord-channel-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.discord-channel-pill:hover .discord-channel-actions {
  opacity: 1;
}
.discord-channel-tool-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: transparent;
  border: none;
  color: var(--text-secondary, #949BA4);
  cursor: pointer;
  padding: 0;
  font-size: 12px;
  line-height: 1;
  border-radius: 4px;
}
.discord-channel-tool-btn .icon {
  width: 13px;
  height: 13px;
}
.discord-channel-tool-btn:hover {
  color: var(--ink, #FFFFFF);
  background: var(--tint, rgba(255, 255, 255, 0.1));
}
.discord-sidebar-user-bar {
  padding: 10px 14px;
  background: var(--discord-header-bg);
  border-top: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

/* Right Chat Main Pane */
.discord-chat-main {
  flex: 1 1 0%;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--discord-main-bg);
}

.discord-chat-main .full-page-chat-container {
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

/* ---- Dedicated Full-Page Chat Room View (Discord Look & Feel) ---- */
.group-card-discord {
  background: var(--discord-sidebar-bg) !important;
  border: 1px solid var(--rule) !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative;
  overflow: hidden;
}
.group-card-discord:hover {
  background: var(--discord-main-bg) !important;
  border-color: var(--blueprint) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--sh2) !important;
}
.group-card-discord .group-channel-hash {
  color: var(--text-secondary);
  font-size: 18px;
  font-weight: 700;
  margin-right: 2px;
}
.group-card-discord .group-card-title {
  color: var(--ink) !important;
  font-weight: 700 !important;
}
.group-card-discord .group-card-purpose {
  color: var(--text-secondary) !important;
  font-size: 13.5px !important;
}
.group-card-discord .chip.group {
  background: rgba(35, 165, 90, 0.16) !important;
  color: #23A55A !important;
  border: 1px solid rgba(35, 165, 90, 0.35) !important;
  font-weight: 700 !important;
}
.group-card-discord .chip.client {
  background: rgba(88, 101, 242, 0.18) !important;
  color: #8096FF !important;
  border: 1px solid rgba(88, 101, 242, 0.35) !important;
  font-weight: 700 !important;
}
.group-card-discord .group-chat-open-btn {
  background: linear-gradient(135deg, #5865F2 0%, #4752C4 100%) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  border: 1px solid rgba(147, 197, 253, 0.35) !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(88, 101, 242, 0.4) !important;
  transition: all 0.16s ease !important;
}
.group-card-discord .group-chat-open-btn:hover {
  background: linear-gradient(135deg, #4752C4 0%, #3C45A5 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px rgba(88, 101, 242, 0.55) !important;
}

.full-page-chat-container {
  display: flex;
  flex-direction: column;
  background: var(--discord-main-bg) !important;
  border: 1px solid var(--rule) !important;
  border-radius: 14px !important;
  box-shadow: var(--sh2) !important;
  overflow: hidden;
  height: calc(100vh - 250px);
  min-height: 400px;
  max-height: calc(100vh - 250px);
  animation: fadeIn 0.12s ease-out;
}
.full-page-chat-header {
  padding: 12px 20px !important;
  background: var(--discord-header-bg) !important;
  border-bottom: 1px solid var(--rule) !important;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.full-page-chat-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.full-page-chat-title-group {
  display: flex;
  align-items: center;
  gap: 12px;
}
.full-page-chat-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  background: var(--discord-input-bg) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--rule) !important;
  border-radius: 6px !important;
  padding: 5px 12px !important;
  cursor: pointer;
  transition: all 0.15s ease !important;
}
.full-page-chat-back-btn:hover {
  background: #5865F2 !important;
  color: #FFFFFF !important;
  border-color: #5865F2 !important;
  transform: translateX(-2px) !important;
}
.full-page-chat-header .group-channel-hash {
  color: var(--text-secondary);
  font-size: 20px;
  font-weight: 700;
}
.full-page-chat-header .group-channel-topic {
  color: var(--text-secondary) !important;
  font-size: 13px !important;
}
.full-page-chat-messages {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overscroll-behavior-y: auto !important;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: auto !important;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 18px;
  background: var(--discord-main-bg) !important;
  contain: content;
}
.full-page-chat-input-bar {
  flex-shrink: 0 !important;
  position: relative !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 10 !important;
  padding: 10px 16px 12px !important;
  background: var(--discord-header-bg) !important;
  border-top: 1px solid var(--rule) !important;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.15) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
.full-page-chat-input-bar .comment-form-row {
  background: var(--discord-input-bg) !important;
  border: 1px solid var(--rule) !important;
  border-radius: 8px !important;
  padding: 4px 10px !important;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}
.full-page-chat-input-bar input {
  background: transparent !important;
  border: none !important;
  color: var(--ink) !important;
  font-size: 14px !important;
  padding: 8px 6px !important;
  outline: none !important;
  box-shadow: none !important;
  flex: 1 1 0% !important;
  min-width: 0 !important;
}
.full-page-chat-input-bar input::placeholder {
  color: var(--text-secondary) !important;
}
.full-page-chat-input-bar .mention-btn-trigger {
  background: var(--surface-alt) !important;
  border: 1px solid var(--rule) !important;
  color: var(--text-secondary) !important;
  border-radius: 6px !important;
  padding: 4px 8px !important;
  font-size: 14px !important;
  cursor: pointer;
  transition: all 0.15s ease;
}
.full-page-chat-input-bar .mention-btn-trigger:hover {
  background: #5865F2 !important;
  color: #FFFFFF !important;
  transform: translateY(-1px);
}
.full-page-chat-input-bar .btn.primary {
  background: #5865F2 !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  padding: 6px 16px !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(88, 101, 242, 0.4) !important;
}
.full-page-chat-input-bar .btn.primary:hover {
  background: #4752C4 !important;
  box-shadow: 0 4px 12px rgba(88, 101, 242, 0.55) !important;
}
.group-msg-item {
  background: transparent !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 8px 14px !important;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transform: translateZ(0);
  content-visibility: auto;
  contain-intrinsic-size: 55px;
  transition: background 0.1s ease !important;
  position: relative;
}
.group-msg-item:hover {
  background: var(--discord-item-hover) !important;
  box-shadow: none !important;
}
.group-msg-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13.5px;
  color: var(--text-secondary) !important;
}
.group-msg-head strong,
.group-msg-head .person {
  color: var(--ink) !important;
  font-weight: 700 !important;
}
.group-msg-text {
  font-size: 14.5px !important;
  color: var(--ink) !important;
  line-height: 1.45 !important;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.group-msg-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.group-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-family: var(--font-sans, 'Plus Jakarta Sans', sans-serif);
  color: #5865F2 !important;
}
.reaction-btn {
  background: var(--discord-header-bg) !important;
  border: 1px solid var(--rule) !important;
  color: var(--text-secondary) !important;
  border-radius: 8px !important;
  padding: 3px 8px !important;
  font-size: 12px !important;
}
.reaction-btn.active {
  background: var(--blueprint-soft) !important;
  border-color: var(--blueprint) !important;
  color: var(--blueprint) !important;
}
.group-msg-reply-quote .msg-reply-quote-author {
  color: var(--blueprint) !important;
  font-weight: 600 !important;
  font-size: 11.5px !important;
}
.group-msg-reply-quote .msg-reply-quote-snippet {
  color: var(--text-secondary) !important;
  font-size: 12px !important;
}

/* ---- chat media attachments & interactive polls ---- */
.chat-media-preview-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--card-bg-alt);
  border: 1px solid var(--rule);
  padding: 6px 10px;
  border-radius: var(--r1);
  font-size: 12px;
}
.chat-media-preview-thumb {
  width: 42px;
  height: 42px;
  border-radius: 4px;
  object-fit: cover;
  border: 1px solid var(--rule);
}
.chat-media-preview-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.chat-media-preview-name {
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-media-preview-size {
  font-size: 10.5px;
  color: var(--blueprint);
  font-family: var(--font-mono, monospace);
}

.group-msg-media-img {
  margin-top: 6px;
  max-width: min(100%, 380px);
  border-radius: var(--r1);
  overflow: hidden;
  border: 1px solid var(--rule);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.group-msg-media-img:hover {
  transform: scale(1.015);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
.group-msg-media-img img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 280px;
  object-fit: contain;
  background: rgba(0, 0, 0, 0.03);
}

.group-msg-media-video {
  margin-top: 6px;
  max-width: min(100%, 420px);
  border-radius: var(--r1);
  overflow: hidden;
  border: 1px solid var(--rule);
  background: #000;
}
.group-msg-media-video video {
  display: block;
  width: 100%;
  max-height: 260px;
}

/* ---- Polls in Chat ---- */
.group-msg-poll {
  margin-top: 8px;
  background: var(--card-bg);
  border: 1px solid var(--rule);
  border-radius: var(--r2);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.group-msg-poll-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.group-msg-poll-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 6px;
}
.group-msg-poll-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.group-msg-poll-opt {
  position: relative;
  border: 1px solid var(--rule);
  border-radius: var(--r1);
  padding: 8px 12px;
  background: var(--card-bg-alt);
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.15s ease, background 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.group-msg-poll-opt.voted {
  border-color: #2563eb;
  background: rgba(37, 99, 235, 0.04);
}
.group-msg-poll-opt-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(90deg, rgba(37, 99, 235, 0.18), rgba(37, 99, 235, 0.28));
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 1;
}
:root[data-theme="dark"] .group-msg-poll-opt-bar {
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.22), rgba(56, 189, 248, 0.35));
}
.group-msg-poll-opt-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.group-msg-poll-opt-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.group-msg-poll-opt-stats {
  font-size: 11px;
  color: var(--text-secondary);
  font-family: var(--font-sans, 'Plus Jakarta Sans', sans-serif);
  font-variant-numeric: tabular-nums;
}
.group-msg-poll-opt-btn {
  position: relative;
  z-index: 2;
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 4px;
}
.group-msg-poll-voters {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 4px;
  font-size: 10.5px;
  color: var(--text-secondary);
}

.poll-option-input-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.poll-option-input-row input {
  flex: 1;
}

/* ---- client timeline (6.4) ---------------------------------------------- */
.timeline {
  position: relative;
  padding-left: var(--s5);
}
.timeline::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: linear-gradient(180deg, var(--blueprint), var(--brand-orange));
}
.tl-entry {
  position: relative;
  margin-bottom: var(--s4);
  content-visibility: auto;
  contain-intrinsic-size: auto 120px;
}
.tl-entry::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--s5) + 4px);
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blueprint);
  box-shadow: 0 0 0 3px var(--bg);
}
.tl-entry.is-todo::before {
  background: var(--brass);
}
.tl-day {
  font-family: var(--font-sans, 'Plus Jakarta Sans', sans-serif);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  font-weight: 700;
  margin: var(--s5) 0 var(--s3);
  position: relative;
}
.tl-day:first-child {
  margin-top: 0;
}
.tl-kind {
  font-family: var(--font-sans, 'Plus Jakarta Sans', sans-serif);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 3px;
  font-weight: 700;
}

/* ---- browser push status row (9.1) -------------------------------------- */
.pushrow {
  display: flex;
  align-items: center;
  gap: var(--s2);
  border: 1px solid rgba(217, 119, 6, 0.3);
  border-left: 4px solid var(--brass);
  border-radius: var(--r1);
  background: var(--brass-soft);
  padding: 10px var(--s3);
  margin-bottom: var(--s3);
  font-size: 12.5px;
  color: var(--text);
  line-height: 1.4;
}
.pushrow.on {
  border-color: rgba(5, 150, 105, 0.3);
  border-left-color: var(--success);
  background: var(--success-soft);
}
.pushrow .icon {
  flex: none;
  color: var(--brass);
}
.pushrow.on .icon {
  color: var(--success);
}

/* ---- section heading within a page --------------------------------------- */
.section-head {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: 18px;
  font-weight: 700;
  margin: var(--s5) 0 var(--s3);
}
.section-head:first-of-type {
  margin-top: 0;
}

.invite-card {
  border-left: 4px solid var(--brand-orange);
}

/* ---- modal fallback for browsers without <dialog> ------------------------ */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(8, 12, 22, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
dialog.modal.fallback {
  display: block;
  position: fixed;
  z-index: 71;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}

/* ---- person mark (vivid distinct avatar badges) -------------------------- */
.mark-tint {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  font-family: var(--font-sans, 'Plus Jakarta Sans', sans-serif);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  color: #FFFFFF;
  line-height: 1;
  user-select: none;
  flex: none;
  font-variant-numeric: tabular-nums;
}
.tint-blueprint {
  background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%);
  box-shadow: 0 2px 5px rgba(37, 99, 235, 0.28);
}
.tint-brass {
  background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
  box-shadow: 0 2px 5px rgba(217, 119, 6, 0.28);
}
.tint-success {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  box-shadow: 0 2px 5px rgba(5, 150, 105, 0.28);
}
.tint-signal {
  background: linear-gradient(135deg, #F43F5E 0%, #E11D48 100%);
  box-shadow: 0 2px 5px rgba(225, 29, 72, 0.28);
}
.tint-slate {
  background: linear-gradient(135deg, #64748B 0%, #475569 100%);
  box-shadow: 0 2px 5px rgba(100, 116, 139, 0.28);
}

.person {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.person.strong {
  color: var(--ink);
  font-weight: 700;
}
.person .mark-tint {
  width: 21px;
  height: 21px;
  font-size: 9.5px;
}
.chip.person {
  padding-left: 3px;
  gap: 5px;
}
.chip.person .mark-tint {
  width: 17px;
  height: 17px;
  font-size: 8.5px;
  border-radius: 4px;
}

/* ---- Login Screen (Initial Direct Screen) -------------------------------- */
/* ---- Login screen -------------------------------------------------------
   A single centred card on a quiet field. The card carries the identity once —
   the badge, the wordmark and the h1 all used to repeat "Originate Command".
   ------------------------------------------------------------------------- */
.login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s5) var(--s4);
  background: var(--bg);
  position: relative;
  overflow: hidden;
}
.login-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(720px 420px at 50% -6%, rgba(37, 99, 235, 0.16) 0%, transparent 70%),
    radial-gradient(560px 360px at 12% 104%, rgba(249, 115, 22, 0.10) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.login-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
  background: var(--card-bg);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r3);
  box-shadow: var(--sh3);
  padding: 36px 32px;
  animation: login-in 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes login-in {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.login-portal-card {
  position: relative;
  z-index: 1;
  background: var(--card-bg);
  border: 1px solid var(--rule);
  border-radius: var(--r3);
  padding: 40px 36px 28px;
  width: 100%;
  max-width: 420px;
  box-shadow: var(--sh3);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-sizing: border-box;
  animation: login-in 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.portal-brand-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 24px;
}

/* the badge is the mark alone; the wordmark below it says the name once */
.portal-logo-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  margin-bottom: 18px;
  box-shadow: none;
}
.portal-logo-text {
  display: none;
}

.portal-logo-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, #1E293B, #0F172A);
  border: 1px solid rgba(249, 115, 22, 0.7);
  color: #FFFFFF;
  display: grid;
  place-items: center;
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.02em;
  box-shadow: var(--sh2);
}

.portal-title {
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin-bottom: 7px;
}

.portal-tagline {
  font-family: var(--font-sans, 'Plus Jakarta Sans', sans-serif);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--text-secondary);
  text-transform: uppercase;
  margin: 0;
}

.authorized-notice-box {
  width: 100%;
  background: var(--card-bg-alt);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--blueprint);
  border-radius: var(--r1);
  padding: 13px 15px;
  margin-bottom: 22px;
  text-align: left;
  box-sizing: border-box;
}

.authorized-notice-head {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 700;
  margin-bottom: 5px;
}

.authorized-notice-head .icon {
  width: 16px;
  height: 16px;
  color: var(--blueprint);
}

.authorized-notice-text {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-secondary);
  margin: 0;
}

.portal-google-btn {
  width: 100%;
  height: 48px;
  background: #0F172A;
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--t);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.portal-google-btn:hover {
  background: #1E293B;
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}

.portal-google-btn .icon {
  width: 20px;
  height: 20px;
}

.portal-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 6px;
}

.portal-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}

.portal-field label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}

.portal-field input {
  height: 44px;
  font-size: 13.5px;
  padding: 0 14px;
  border-radius: var(--r1);
  border: 1px solid var(--input-border, var(--rule-strong));
  background: var(--input-bg, var(--card-bg));
  color: var(--input-text, var(--text));
  box-sizing: border-box;
  width: 100%;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.portal-field input:focus {
  border-color: var(--blueprint);
  outline: none;
  box-shadow: var(--focus-ring);
}

.portal-submit-btn {
  height: 44px;
  background: var(--grad-primary) !important;
  color: #FFFFFF !important;
  border: 1px solid transparent;
  border-radius: var(--r1);
  font-family: var(--font-sans, 'Plus Jakarta Sans', sans-serif);
  font-size: 14px;
  font-weight: 650 !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background var(--t-fast), box-shadow var(--t-fast);
  margin-top: 6px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.14);
}

.portal-submit-btn:hover {
  background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%) !important;
  box-shadow: 0 2px 10px -2px rgba(37, 99, 235, 0.5);
  color: #FFFFFF !important;
}
.portal-submit-btn:active {
  transform: translateY(1px);
  box-shadow: none;
}
.portal-submit-btn:disabled {
  opacity: 0.75;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}
@keyframes btn-spinner {
  to { transform: rotate(360deg); }
}
.btn-spinner {
  width: 15px;
  height: 15px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: btn-spinner 0.6s linear infinite;
  display: inline-block;
  vertical-align: middle;
}
.portal-submit-btn:focus-visible {
  outline: 2px solid var(--blueprint);
  outline-offset: 2px;
}

.portal-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 10px 0 14px;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  width: 100%;
}

.portal-divider::before, .portal-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}

.portal-footer-notice {
  width: 100%;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.6;
  text-align: center;
}

.portal-footer-notice p {
  margin: 2px 0;
}

.portal-owner {
  opacity: 0.8;
}
.connect-btn .icon {
  width: 18px;
  height: 18px;
}
.admin-quick-connect .btn {
  background: var(--card-bg-alt) !important;
  border: 1px dashed var(--blueprint) !important;
  color: var(--ink) !important;
  font-weight: 700 !important;
  transition: all var(--t);
}
.admin-quick-connect .btn:hover {
  background: var(--tint) !important;
  border-color: var(--blueprint) !important;
  color: var(--blueprint) !important;
  transform: translateY(-1px);
}
.login-divider {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin: var(--s4) 0 var(--s3);
  color: var(--text-secondary);
  font-family: var(--font-sans, 'Plus Jakarta Sans', sans-serif);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.login-divider::before, .login-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}
.login-accounts {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 190px;
  overflow-y: auto;
  padding-right: 4px;
}
.login-account-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--card-bg-alt);
  border: 1px solid var(--rule);
  border-radius: var(--r1);
  color: var(--text);
  font-size: 12.5px;
  cursor: pointer;
  text-align: left;
  transition: all var(--t);
  width: 100%;
}
.login-account-btn:hover {
  background: var(--tint);
  border-color: var(--blueprint);
  transform: translateY(-1px);
}
.login-account-btn .acc-name {
  font-weight: 600;
  color: var(--ink);
}
.login-account-btn .acc-email {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  color: var(--text-secondary);
  margin-left: auto;
}

/* ---- google account chooser modal styles -------------------------------- */
.google-account-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  max-height: 280px;
  overflow-y: auto;
}
.google-account-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--card-bg-alt);
  border: 1px solid var(--rule);
  border-radius: var(--r1);
  cursor: pointer;
  transition: all var(--t);
  user-select: none;
}
.google-account-item:hover, .google-account-item:focus {
  background: var(--tint);
  border-color: var(--blueprint);
  transform: translateY(-1px);
}
.google-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #2563EB;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}
.google-avatar.other {
  background: var(--rule);
  color: var(--text);
  font-size: 18px;
}
.google-account-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.google-account-name {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--ink);
}
.google-account-email {
  font-size: 12px;
  color: var(--text-secondary);
}

/* ---- client picker inline row ------------------------------------------ */
.client-picker-row {
  display: flex;
  gap: var(--s2);
  align-items: center;
  width: 100%;
}
.client-picker-row select {
  flex: 1;
  min-width: 0;
}
.client-picker-row .btn {
  white-space: nowrap;
  flex-shrink: 0;
  height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ---- user profile badge banner (dashboard & portal header) --------------
   A single deep-navy identity band. It reads the same in day and night mode by
   design — it is a fixed dark surface, so the per-theme repaints it used to
   carry only changed how hard its glow was.
   ------------------------------------------------------------------------- */
.user-profile-banner {
  background: linear-gradient(135deg, #16305A 0%, #0D1D33 100%);
  border: 1px solid rgba(148, 163, 184, 0.20);
  border-radius: var(--r2);
  padding: 11px 16px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  cursor: pointer;
  box-shadow: var(--sh2);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  position: relative;
  overflow: hidden;
}
.user-profile-banner:hover {
  border-color: rgba(148, 163, 184, 0.40);
  box-shadow: var(--sh3);
}
.user-profile-banner:active {
  box-shadow: var(--sh1);
}
.user-profile-banner-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.user-profile-avatar-wrap {
  width: 44px;
  height: 44px;
  border-radius: 9px;
  overflow: hidden;
  flex-shrink: 0;
  background: #1e293b;
  border: 1px solid rgba(255, 255, 255, 0.20);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.user-profile-avatar-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.user-profile-avatar-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #ffffff;
  background: #0369A1;
  text-transform: uppercase;
}
.user-profile-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.user-profile-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.user-profile-name {
  font-size: 1.125rem;
  font-weight: 700;
  color: #ffffff !important;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.user-profile-badge {
  background: rgba(249, 115, 22, 0.18);
  border: 1px solid rgba(249, 115, 22, 0.55);
  color: #FDBA74 !important;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: var(--r-pill);
  letter-spacing: 0.05em;
  line-height: 1.5;
}
.user-profile-role-line {
  font-size: 12.5px;
  font-weight: 600;
  color: #cbd5e1 !important;
  line-height: 1.3;
  margin-top: 1px;
}
.user-profile-meta-line {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: #94a3b8 !important;
  line-height: 1.3;
  margin-top: 2px;
  font-family: var(--font-sans, 'Plus Jakarta Sans', sans-serif);
}
.user-profile-meta-line .icon {
  width: 12px;
  height: 12px;
  flex: none;
}
.user-profile-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.user-profile-status-badge {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r1);
  padding: 5px 10px;
  text-align: right;
}
.user-profile-status-label {
  font-size: 9px;
  font-weight: 700;
  color: #94a3b8 !important;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-bottom: 1px;
}
.user-profile-status-val {
  font-size: 11px;
  font-weight: 700;
  color: #7DD3FC !important;
  letter-spacing: 0.2px;
}
.user-profile-edit-hint {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 32px;
  font-size: 12px;
  font-weight: 600;
  color: #E2E8F0 !important;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 0 11px;
  border-radius: 8px;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.user-profile-banner:hover .user-profile-edit-hint {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.34);
  color: #FFFFFF !important;
}
.user-profile-edit-hint .icon {
  width: 13px;
  height: 13px;
}

.user-profile-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  font-size: 12px;
  font-weight: 600;
  color: #E2E8F0 !important;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 0 12px;
  border-radius: 8px;
  cursor: pointer;
  z-index: 2;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
  white-space: nowrap;
}
.user-profile-action-btn:hover {
  background: rgba(56, 189, 248, 0.18);
  border-color: rgba(56, 189, 248, 0.42);
  color: #FFFFFF !important;
  transform: translateY(-1px);
}
.user-profile-action-btn .icon {
  width: 13px;
  height: 13px;
}

@media (max-width: 680px) {
  .user-profile-banner {
    flex-direction: column;
    align-items: flex-start;
    padding: 14px 16px;
  }
  .user-profile-right {
    width: 100%;
    justify-content: space-between;
    margin-top: 6px;
  }
  .user-profile-status-badge {
    text-align: left;
    flex: 1;
  }
}

/* =========================================================================
   EMPLOYEE & HR SERVICES PORTAL STYLES (Photo 2, 3, 4)
   ========================================================================= */

.portal-layout-container {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  width: 100%;
  margin-top: 10px;
}

/* ---- Portal Sidebar ---- */
.portal-sidebar {
  width: 236px;
  flex-shrink: 0;
  background: var(--card-bg);
  border: 1px solid var(--rule);
  border-radius: var(--r2);
  padding: var(--s4) var(--s3);
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  box-shadow: var(--sh1);
  position: sticky;
  top: calc(var(--topbar-h) + var(--nav-h) + var(--s4));
}

.portal-sidebar-brand {
  padding: 6px 10px 12px;
  border-bottom: 1px solid var(--rule, rgba(255, 255, 255, 0.08));
}
.portal-sidebar-tag {
  font-family: var(--font-sans, 'Plus Jakarta Sans', sans-serif);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-secondary);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.portal-sidebar-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink, #ffffff);
  margin-top: 2px;
}

.portal-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.portal-nav-btn {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-secondary, #94a3b8);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
}
.portal-nav-btn:hover {
  background: var(--card-bg-alt);
  color: var(--ink);
}
.portal-nav-btn.active:hover {
  background: var(--grad-primary);
  color: #ffffff;
}
.portal-nav-btn:focus-visible {
  outline: 2px solid var(--blueprint);
  outline-offset: 2px;
}
.portal-nav-btn.active {
  background: var(--grad-primary);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.14);
}

.portal-sidebar-footer {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--rule, rgba(255, 255, 255, 0.08));
}

/* ---- Portal Main Area ---- */
.portal-main-area {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.portal-view-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.portal-header-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
  background: var(--card-bg);
  border: 1px solid var(--rule);
  border-radius: var(--r2);
  padding: var(--s4) var(--s5);
  box-shadow: var(--sh1);
}
.portal-view-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}
.portal-view-title .icon {
  width: 17px;
  height: 17px;
  color: var(--text-secondary);
}

/* ---- 4 Credential Cards 2x2 Grid (Photo 3) ---- */
.portal-cards-2x2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: var(--s5);
  align-items: start;
}

.portal-credential-card {
  background: var(--card-bg);
  border: 1px solid var(--rule);
  border-radius: var(--r2);
  padding: var(--s4) var(--s5) var(--s5);
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  box-shadow: var(--sh1);
}

.portal-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}
.portal-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.portal-card-icon {
  display: inline-flex;
  align-items: center;
  font-size: 16px;
}
.portal-card-icon .icon {
  width: 15px;
  height: 15px;
  color: var(--text-secondary);
}
.portal-card-heading-text {
  font-family: var(--font-sans, 'Plus Jakarta Sans', sans-serif);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.portal-card-edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  color: var(--btn-text);
  font-size: 11.5px;
  font-weight: 600;
  padding: 0 10px;
  border-radius: 7px;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.portal-card-edit-btn:hover {
  background: var(--btn-hover-bg);
  border-color: var(--btn-hover-border);
  color: var(--btn-hover-text);
}
.portal-card-edit-btn:focus-visible {
  outline: 2px solid var(--blueprint);
  outline-offset: 2px;
}
.portal-card-edit-btn .icon {
  width: 12px;
  height: 12px;
}

.portal-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s4) var(--s5);
}

.portal-info-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.portal-info-label {
  font-size: 11.5px;
  color: var(--text-secondary);
  font-weight: 500;
}
.portal-info-val {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  word-break: break-word;
}

.portal-emergency-highlight {
  grid-column: span 2;
  background: var(--brand-orange-soft);
  border: 1px solid rgba(249, 115, 22, 0.25);
  border-left: 3px solid var(--brand-orange);
  border-radius: var(--r1);
  padding: 11px 14px;
}
.portal-emergency-tag {
  font-family: var(--font-sans, 'Plus Jakarta Sans', sans-serif);
  font-size: 10.5px;
  font-weight: 700;
  /* 10.5px uppercase on a warm wash: the brand orange only reached 2.6:1
     against it in the light theme, so this label takes the text-weight
     orange. Dark theme resolves to the same brand orange as before. */
  color: var(--brand-orange-strong);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.portal-emergency-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  margin-top: 3px;
}
.portal-emergency-phone {
  font-size: 12.5px;
  color: var(--text-secondary);
  font-family: var(--font-mono, monospace);
  font-weight: 600;
}

/* ---- Stat Metrics Row (Photos 2 & 4) ---- */
.portal-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s4);
  align-items: stretch;
}

/* The employee portal's metrics now read as the same object as the dashboard's
   .stat cards: neutral surface, 3px accent rail, micro-caps label, tabular
   value. Only the markup differs, so the treatment lives here. */
.portal-stat-card {
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--rule);
  border-radius: var(--r2);
  padding: var(--s4) var(--s4) var(--s4) var(--s5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  min-height: 92px;
  overflow: hidden;
  box-shadow: var(--sh1);
  transition: box-shadow var(--t-fast), border-color var(--t-fast);
}
.portal-stat-card:hover {
  border-color: var(--rule-strong);
  box-shadow: var(--sh2);
}
.portal-stat-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--slate);
}
.portal-stats-row > .portal-stat-card:nth-child(1)::before { background: var(--cyan); }
.portal-stats-row > .portal-stat-card:nth-child(2)::before { background: var(--indigo); }
.portal-stats-row > .portal-stat-card:nth-child(3)::before { background: var(--brass); }
.portal-stats-row > .portal-stat-card:nth-child(4)::before { background: var(--success); }
.portal-stat-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.portal-stat-value {
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-size: 26px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.035em;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.portal-stat-value.success { color: var(--success); }
.portal-stat-value.info { color: var(--cyan); }
.portal-stat-value.warn { color: var(--brass); }
.portal-stat-value.alert { color: var(--signal); }

.portal-stat-sub {
  font-size: 12px;
  color: var(--text-secondary);
  font-family: var(--font-sans, 'Plus Jakarta Sans', sans-serif);
  font-variant-numeric: tabular-nums;
}

/* ---- Leave Application Form (Photo 2) ---- */
.portal-form-container {
  background: var(--card-bg);
  border: 1px solid var(--rule);
  border-radius: var(--r2);
  padding: var(--s5);
  box-shadow: var(--sh1);
}
.portal-form-heading {
  font-size: 14px;
  font-weight: 700;
  color: var(--brand-orange, #ea580c);
  margin: 0 0 16px;
  letter-spacing: 0.4px;
}
.portal-form-grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.portal-form-grid-4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
}

.portal-spec-title {
  font-size: 11.5px;
  font-weight: 700;
  color: #ea580c;
  margin-right: 8px;
}
.portal-spec-hint {
  font-size: 11px;
  color: var(--cyan, #38bdf8);
}

.portal-leave-alloc-box {
  background: var(--card-bg-alt, rgba(15, 23, 42, 0.6));
  border: 1px solid var(--rule, rgba(255, 255, 255, 0.08));
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.portal-leave-alloc-box label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink, #ffffff);
}
.portal-leave-alloc-box input {
  text-align: center;
  font-size: 16px;
}

.portal-quick-chips {
  display: flex;
  gap: 4px;
  justify-content: center;
}
.portal-quick-btn {
  background: var(--card-bg-alt, rgba(15, 23, 42, 0.06));
  border: 1px solid var(--border, rgba(148, 163, 184, 0.2));
  color: var(--ink, #0f172a);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.1s ease;
}
.portal-quick-btn:hover {
  background: var(--blueprint);
  border-color: var(--blueprint);
  color: #ffffff;
}
.portal-quick-btn.clear {
  color: var(--signal);
}

/* ---- Table Container ---- */
.portal-table-container {
  background: var(--card-bg);
  border: 1px solid var(--rule);
  border-radius: var(--r2);
  padding: var(--s4) var(--s5) var(--s5);
  box-shadow: var(--sh1);
}
.portal-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  flex-wrap: wrap;
  margin-bottom: var(--s4);
}
.portal-table-head h3 {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}

@media (max-width: 820px) {
  .portal-layout-container {
    flex-direction: column;
    /* the base rule uses flex-start so the side-by-side sidebar and main
       area don't stretch to match each other's height on desktop; once
       this stacks into a single column that same flex-start instead sizes
       each block to its own content width, letting KPI grids and other
       wide content push the block (and the page) past the viewport edge */
    align-items: stretch;
  }
  .portal-sidebar {
    width: 100%;
  }
  .portal-sidebar-nav {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .portal-nav-btn {
    width: auto;
    flex: 1;
    min-width: 130px;
  }
  .portal-card-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Dedicated Client Portal & Rich Workspace ---- */
.client-item-card {
  cursor: pointer;
  transition: box-shadow var(--t-fast), border-color var(--t-fast);
  position: relative;
}
.client-item-card:hover {
  box-shadow: var(--sh2);
  border-color: var(--rule-strong);
}
.client-portal-container {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  width: 100%;
  animation: fadeIn 0.12s ease-out;
}
.client-portal-header {
  background: var(--card-bg);
  border: 1px solid var(--rule);
  border-radius: var(--r2);
  padding: var(--s4) var(--s5);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  box-shadow: var(--sh1);
}
.client-portal-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.client-portal-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.client-portal-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--blueprint);
  background: var(--tint);
  border: 1px solid rgba(37, 99, 235, 0.2);
  border-radius: var(--r1);
  padding: 5px 12px;
  cursor: pointer;
  transition: all 0.12s ease;
}
.client-portal-back-btn:hover {
  background: var(--blueprint);
  color: #ffffff;
  border-color: var(--blueprint);
}
.client-portal-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: var(--s3);
}
.client-portal-tab-btn {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--r1);
  border: 1px solid var(--rule);
  background: var(--card-bg-alt);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.12s ease;
}
.client-portal-tab-btn:hover {
  color: var(--ink);
  background: var(--tint);
}
.client-portal-tab-btn.active {
  background: var(--blueprint);
  color: #ffffff;
  border-color: var(--blueprint);
}

/* Client Todo Item Rows (Clean Horizontal Layout) */
.client-todo-item-row {
  background: var(--card-bg, #101c2e);
  border: 1px solid var(--border, rgba(56, 189, 248, 0.18));
  border-left: 3.5px solid var(--blueprint, #3b82f6);
  border-radius: 10px;
  padding: 14px 18px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  text-align: left;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}
.client-todo-item-row:hover {
  border-color: rgba(56, 189, 248, 0.45);
  border-left-color: var(--brand-orange, #f97316);
  background: var(--card-bg-alt, #13233a);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28), 0 0 14px rgba(56, 189, 248, 0.12);
  transform: translateY(-1px);
}
.client-todo-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
  text-align: left;
}
.client-todo-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}
.client-todo-title {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink, #ffffff);
  line-height: 1.35;
  text-align: left;
  letter-spacing: -0.01em;
}
.client-todo-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  text-align: left;
}

/* Client Instruction Item Card */
.client-instruction-item-card {
  background: var(--card-bg, #101c2e);
  border: 1px solid var(--border, rgba(56, 189, 248, 0.18));
  border-left: 3.5px solid var(--purple, #8b5cf6);
  border-radius: 10px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}
.client-instruction-item-card:hover {
  border-color: rgba(139, 92, 246, 0.45);
  background: var(--card-bg-alt, #13233a);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28), 0 0 14px rgba(139, 92, 246, 0.15);
  transform: translateY(-1px);
}

/* Client Analytics & Graphics */
/* A single rounded track with hairline separators, rather than four saturated
   blocks butted together. The translucent-white ground only read correctly on
   a dark surface. */
.client-velocity-bar-wrap {
  display: flex;
  height: 12px;
  width: 100%;
  border-radius: var(--r-pill);
  overflow: hidden;
  background: var(--card-bg-alt);
  border: 1px solid var(--rule);
  margin: 16px 0 14px;
}
.client-velocity-segment {
  height: 100%;
  transition: width var(--t);
}
.client-velocity-segment + .client-velocity-segment {
  box-shadow: inset 1px 0 0 var(--card-bg);
}
.client-graphic-legend {
  display: flex;
  gap: var(--s3) var(--s5);
  flex-wrap: wrap;
  align-items: center;
  font-size: 12.5px;
  color: var(--text-secondary);
}
.client-graphic-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.client-legend-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 3px;
  flex: none;
}

/* Rich Markdown / Workspace Text Editor */
.client-rich-editor-wrap {
  background: var(--card-bg);
  border: 1px solid var(--rule);
  border-radius: var(--r2);
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.client-editor-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
}
.client-editor-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
  background: var(--card-bg-alt);
  border: 1px solid var(--rule);
  border-radius: var(--r1);
  color: var(--ink);
  cursor: pointer;
  transition: all 0.1s ease;
}
.client-editor-tool-btn:hover {
  background: var(--blueprint);
  color: #ffffff;
}
.client-rich-textarea {
  width: 100%;
  min-height: 280px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.6;
  padding: 12px;
  border-radius: var(--r1);
  border: 1px solid var(--rule);
  background: var(--card-bg-alt);
  color: var(--ink);
  resize: vertical;
}

/* WYSIWYG contenteditable editor */
.client-wysiwyg-editor {
  width: 100%;
  min-height: 300px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.7;
  padding: 16px 18px;
  border-radius: var(--r1);
  border: 1px solid var(--rule);
  background: var(--card-bg-alt);
  color: var(--ink);
  outline: none;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.25);
  overflow-y: auto;
  word-break: break-word;
  cursor: text;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.client-wysiwyg-editor:focus {
  border-color: var(--blueprint);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.25), 0 0 0 2px rgba(37,99,235,0.18);
}
.client-wysiwyg-editor:empty:before {
  content: attr(data-placeholder);
  color: var(--text-secondary);
  pointer-events: none;
}
.client-wysiwyg-editor h2 {
  font-size: 17px; font-weight: 700;
  color: var(--blueprint); margin: 14px 0 6px;
}
.client-wysiwyg-editor h3 {
  font-size: 15px; font-weight: 700;
  color: var(--blueprint); margin: 12px 0 5px;
}
.client-wysiwyg-editor h2:first-child,
.client-wysiwyg-editor h3:first-child { margin-top: 0; }
.client-wysiwyg-editor ul,
.client-wysiwyg-editor ol { padding-left: 22px; margin: 6px 0; }
.client-wysiwyg-editor li { margin: 3px 0; }
.client-wysiwyg-editor blockquote {
  border-left: 3px solid var(--rule-strong);
  padding: 4px 14px; margin: 8px 0;
  color: var(--text-secondary); font-style: italic;
}
.client-wysiwyg-editor code {
  font-family: var(--font-mono, monospace);
  font-size: 0.92em; padding: 1px 5px;
  border-radius: 5px;
  background: var(--card-bg);
  border: 1px solid var(--rule);
}
.client-wysiwyg-editor a { color: var(--signal); text-decoration: underline; }
.client-rich-preview {
  padding: 14px;
  background: var(--card-bg-alt);
  border: 1px solid var(--rule);
  border-radius: var(--r1);
  min-height: 140px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink);
}
.client-rich-preview h2, .client-rich-preview h3 {
  margin: 12px 0 6px;
  color: var(--blueprint);
}
.client-rich-preview ul, .client-rich-preview ol {
  padding-left: 20px;
  margin: 6px 0;
}
.client-rich-preview li {
  margin-bottom: 4px;
}
.client-rich-preview blockquote {
  border-left: 3px solid var(--blueprint);
  padding-left: 10px;
  margin: 8px 0;
  color: var(--text-secondary);
  font-style: italic;
}

/* =========================================================================
   CHAT REPLIES & SOCIAL @ MENTIONS (Photo/Message Quotations & @everyone)
   ========================================================================= */

/* Quoted Reply Header on Messages */
.msg-reply-quote,
.group-msg-reply-quote {
  background: var(--surface-alt) !important;
  border-left: 3px solid var(--blueprint) !important;
  border-radius: 4px !important;
  padding: 4px 10px !important;
  margin-bottom: 4px !important;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 4px 0 6px;
  font-size: 12px;
  cursor: pointer;
  user-select: none;
  transition: all 0.15s ease;
}
.msg-reply-quote:hover,
.group-msg-reply-quote:hover {
  background: var(--tint-strong, rgba(37, 99, 235, 0.14));
  border-left-color: var(--brand-orange, #f97316);
  transform: translateX(2px);
}
.msg-reply-quote-author {
  font-weight: 600;
  color: var(--blueprint, #38bdf8);
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.msg-reply-quote-snippet {
  color: var(--text-secondary, #94a3b8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  font-style: italic;
}

/* Highlight flash when scrolling to target replied message */
.highlight-target-msg {
  animation: highlight-pulse 1.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes highlight-pulse {
  0% {
    background-color: rgba(249, 115, 22, 0.25);
    box-shadow: 0 0 16px rgba(249, 115, 22, 0.4);
  }
  100% {
    background-color: transparent;
    box-shadow: none;
  }
}

/* Active Reply Draft Banner above Input Bar */
.reply-draft-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--card-bg, #111b2e);
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-left: 4px solid var(--blueprint, #3b82f6);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  animation: fadeIn 0.15s ease-out;
  margin-bottom: 6px;
}
.reply-draft-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}
.reply-draft-header {
  font-weight: 700;
  color: var(--blueprint, #38bdf8);
  font-size: 11.5px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.reply-draft-snippet {
  font-size: 11.5px;
  color: var(--text-secondary, #94a3b8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.replying-cancel-btn {
  background: transparent;
  border: none;
  padding: 4px;
  font-size: 14px;
  color: var(--text-secondary, #94a3b8);
  cursor: pointer;
  border-radius: 4px;
  line-height: 1;
  transition: all 0.12s ease;
}
.replying-cancel-btn:hover {
  color: var(--signal, #ef4444);
  background: rgba(239, 68, 68, 0.12);
}

/* Mention Badges & Pills */
.mention-tag {
  display: inline-flex;
  align-items: center;
  color: var(--blueprint, #38bdf8);
  background: rgba(37, 99, 235, 0.18);
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 12.5px;
  margin: 0 2px;
  border: 1px solid rgba(37, 99, 235, 0.2);
  user-select: none;
  transition: background 0.15s ease;
  gap: 2px;
  letter-spacing: -0.01em;
}
.mention-tag.everyone {
  background: rgba(249, 115, 22, 0.22);
  color: var(--brand-orange, #f97316);
  border: 1px solid rgba(249, 115, 22, 0.35);
  box-shadow: 0 0 8px rgba(249, 115, 22, 0.2);
}

/* Floating Autocomplete Popover */
.mention-autocomplete-pop {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  right: 0;
  max-height: 240px;
  overflow-y: auto;
  background: var(--card-bg, #111b2e);
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), 0 0 16px rgba(37, 99, 235, 0.18);
  z-index: 50;
  display: flex;
  flex-direction: column;
  padding: 6px;
  width: 280px;
  backdrop-filter: blur(12px);
  gap: 2px;
}
.mention-pop-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.12s ease;
}
.mention-pop-item:hover,
.mention-pop-item.active {
  background: var(--tint-strong, rgba(37, 99, 235, 0.18));
}
.mention-pop-item.is-everyone {
  border-bottom: 1px solid var(--rule, rgba(255, 255, 255, 0.08));
  margin-bottom: 3px;
  padding-bottom: 8px;
}
.mention-pop-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.mention-pop-name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink, #ffffff);
}
.mention-pop-role {
  font-size: 10.5px;
  color: var(--text-secondary, #94a3b8);
}

/* =========================================================================
   System-theme night parity
   The rules above bind night styling to an explicit data-theme="dark".
   "System" is the default theme and sets no attribute, so on a dark OS
   those components kept their day colours. Same declarations, matched
   through prefers-color-scheme instead.
   ========================================================================= */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .escalation {
    color: #FDE68A;
  }
  :root:not([data-theme="light"]) .mention-tag {
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.15);
    border-color: rgba(56, 189, 248, 0.3);
  }
  :root:not([data-theme="light"]) .reply-draft-header {
    color: #38bdf8;
  }
  :root:not([data-theme="light"]) .msg-reply-quote {
    background: rgba(56, 189, 248, 0.1);
    border-left-color: #38bdf8;
  }
  :root:not([data-theme="light"]) .msg-reply-quote-author {
    color: #38bdf8;
  }
  :root:not([data-theme="light"]) .group-msg-poll-opt-bar {
    background: linear-gradient(90deg, rgba(56, 189, 248, 0.22), rgba(56, 189, 248, 0.35));
  }
}

/* the @everyone entry in the mention list uses the shared avatar chip shape */
.mention-everyone-badge .icon {
  width: 14px;
  height: 14px;
  color: #FFFFFF;
}

/* ---- portal menu icons --------------------------------------------------
   The nav slot held an emoji glyph; it now carries an SVG that inherits the
   row's colour, so the active row's icon turns white with its label.
   ------------------------------------------------------------------------- */
.portal-nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  flex: none;
}
.portal-nav-icon .icon {
  width: 16px;
  height: 16px;
}
.portal-nav-btn .portal-nav-label {
  flex: 1;
  min-width: 0;
}

/* ---- markdown editor toolbar -------------------------------------------- */
.client-editor-tool-btn .icon {
  width: 13px;
  height: 13px;
}

/* the media preview thumb shows an icon when there is no image to show */
.chat-media-preview-thumb .icon {
  width: 22px;
  height: 22px;
  color: var(--text-secondary);
}
.mention-btn-trigger .icon {
  width: 17px;
  height: 17px;
}

/* ---- rendered client notes ----------------------------------------------
   The details view used to print the raw text, so nothing the editor toolbar
   inserted ever showed. It renders now, and these are the marks it can produce.
   ------------------------------------------------------------------------- */
.client-details-text-view {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink);
  word-break: break-word;
}
.client-details-text-view h2 {
  font-size: 17px;
  margin: 18px 0 8px;
}
.client-details-text-view h3 {
  font-size: 15px;
  margin: 16px 0 6px;
}
.client-details-text-view h2:first-child,
.client-details-text-view h3:first-child {
  margin-top: 0;
}
.client-details-text-view ul {
  margin: 6px 0;
  padding-left: 22px;
}
.client-details-text-view li {
  margin: 3px 0;
}
.client-details-text-view blockquote {
  margin: 8px 0;
  padding: 6px 14px;
  border-left: 3px solid var(--rule-strong);
  color: var(--text-secondary);
}
.client-details-text-view code {
  font-family: var(--font-mono, monospace);
  font-size: 0.92em;
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--card-bg-alt);
  border: 1px solid var(--rule);
}
.client-details-text-view br {
  line-height: 0.6;
}

/* a hidden link: the address never shows, only the words, and they read red
   so a reader can tell at a glance that the text carries a target */
.md-link {
  color: var(--signal);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.md-link:hover {
  color: var(--signal);
  text-decoration-thickness: 2px;
}
.md-link:focus-visible {
  outline: 2px solid var(--blueprint);
  outline-offset: 2px;
  border-radius: 3px;
}

/* the swatch on the Colour toolbar button */
.md-color-swatch {
  display: inline-block;
  width: 11px;
  height: 11px;
  flex: none;
  border-radius: 3px;
  background: var(--blueprint);
  box-shadow: 0 0 0 1px var(--rule-strong) inset;
}

/* Rows below the fold cost nothing until they are scrolled to. The browser
   skips style, layout and paint for anything outside the viewport, which is
   most of a long board; contain-intrinsic-size gives it a placeholder height
   in the meantime (and "auto" makes it remember the real one once measured)
   so the scrollbar does not jump about. */
.panel--todos .item,
.panel--instructions .note,
.dashboard-todo-row,
.client-item-card {
  content-visibility: auto;
}
.panel--todos .item {
  contain-intrinsic-size: auto 150px;
}
.panel--instructions .note {
  contain-intrinsic-size: auto 220px;
}
.dashboard-todo-row {
  contain-intrinsic-size: auto 64px;
}
.client-item-card {
  contain-intrinsic-size: auto 170px;
}

/* a panel's internals cannot affect anything outside it, so the browser can
   lay each one out on its own instead of reflowing the page */
.panel--todos,
.panel--instructions {
  contain: layout paint style;
}

/* Direct messages: the people list under the channels in the chat sidebar */
.discord-dm-section {
  border-top: 1px solid var(--rule);
  padding-top: 6px;
  margin-top: 2px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.discord-dm-section .discord-sidebar-title-row {
  padding: 6px 12px 4px;
}
.discord-dm-list {
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  padding: 0 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-height: 34vh;
}
.discord-dm-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.discord-dm-pill:hover,
.discord-dm-pill:focus-visible {
  background: var(--discord-item-hover, var(--card-bg-alt));
  color: var(--ink);
}
.discord-dm-pill.active {
  background: var(--discord-item-active, var(--blueprint));
  color: #ffffff;
}
.discord-dm-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.discord-dm-pill .mark-tint {
  width: 20px;
  height: 20px;
  font-size: 9px;
  flex: none;
}

/* a group member whose account is not loaded on this device */
.chip.person.is-unresolved {
  opacity: 0.65;
  font-style: italic;
}

/* the "Show more" row that ends a capped list */
.list-more {
  display: flex;
  justify-content: center;
  padding: 10px 0 4px;
}

/* the live preview under the client notes editor: a caption, then the same
   rendered look as the saved view, so a bold word actually looks bold the
   moment the tool is clicked, not just after Save */
.client-editor-preview-label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px dashed var(--rule);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.client-editor-preview-label .icon {
  width: 13px;
  height: 13px;
  color: var(--success);
}
.client-details-live-preview {
  padding: 14px 16px;
  background: var(--card-bg-alt);
  border: 1px solid var(--rule);
  border-radius: var(--r1);
  min-height: 64px;
}

/* One department per full-width row instead of a cramped multi-column grid —
   a department card holds a variable, often long list of members, and a
   narrow column forced that list into a tall, awkward stack. Full width
   gives the header room to sit on one line and the member list room to wrap
   as a shelf of pills rather than one-per-line. */
.dept-cards-list {
  display: flex;
  flex-direction: column;
  gap: var(--s4, 14px);
  margin-top: 12px;
}
.dept-card {
  padding: 18px 20px;
}
.dept-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}
.dept-card-head-left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}
.dept-card-name {
  margin: 0;
  font-size: 17px;
}
.dept-card-levels {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.dept-card-members {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.dept-member-pill {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 100%;
  padding: 7px 10px 7px 8px;
  background: var(--card-bg-alt);
  border: 1px solid var(--rule);
  border-radius: var(--r2, 10px);
  font-size: 13.5px;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.dept-member-pill:hover {
  border-color: var(--rule-strong);
  background: var(--card-bg);
}
.dept-member-pill .chip.role {
  margin: 0;
}
/* the pill's own text can be long (name + title) — let it wrap instead of
   forcing the whole pill past a narrow viewport's edge */
.dept-member-pill .person {
  white-space: normal;
  min-width: 0;
}
.dept-member-pill .person .name {
  overflow-wrap: anywhere;
}

/* the Colour toolbar button and the swatch strip it drops down */
.md-color-picker {
  position: relative;
  display: inline-flex;
}
.md-color-caret {
  font-size: 9px;
  line-height: 1;
  opacity: 0.65;
}
.md-color-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 132px;
  padding: 6px;
  background: var(--card-bg);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r2);
  box-shadow: var(--sh3);
}
.md-color-menu[hidden] {
  display: none;
}
.md-color-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 9px;
  font-size: 12.5px;
  font-weight: 600;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: var(--r1);
  color: var(--ink);
  cursor: pointer;
  transition: background 0.1s ease;
}
.md-color-option:hover,
.md-color-option:focus-visible {
  background: var(--card-bg-alt);
}
.md-color-option .md-color-swatch {
  width: 13px;
  height: 13px;
}

/* the toolbar button fills with blue on hover, which would swallow a blue
   swatch — a light ring keeps whichever colour is showing readable on it */
.client-editor-tool-btn:hover .md-color-swatch {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9) inset, 0 0 0 1px rgba(255, 255, 255, 0.5);
}

/* the same notice box, in the affirmative, when an invite link has just been
   opened and the person only has to sign in */
.authorized-notice-box.is-invite {
  border-left-color: var(--success);
  background: var(--success-soft);
}
.authorized-notice-box.is-invite .authorized-notice-head .icon {
  color: var(--success);
}

/* =========================================================================
   1-Column Clean Client Cards (1 line a 1 ta only)
   ========================================================================= */
.clients-grid-two,
.clients-grid-single {
  display: grid;
  grid-template-columns: 1fr !important;
  gap: 14px;
  margin: 14px 0 24px;
}
@media (max-width: 768px) {
  .clients-grid-two,
  .clients-grid-single {
    grid-template-columns: 1fr !important;
  }
}

.card.client-item-card,
.client-item-card {
  display: flex !important;
  flex-direction: column !important;
  /* Deep-navy identity surface matching user profile banner (Photo 1) */
  background: linear-gradient(135deg, #16305A 0%, #0D1D33 100%) !important;
  border: 1px solid rgba(148, 163, 184, 0.20) !important;
  border-radius: 10px !important;
  padding: 14px 18px !important;
  cursor: pointer !important;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28) !important;
}
/* remove the light-mode left border stripe so the entire card has uniform deep-navy aesthetic */
.card.client-item-card::before,
.client-item-card::before {
  display: none !important;
}
.card.client-item-card:hover,
.client-item-card:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(148, 163, 184, 0.45) !important;
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.45) !important;
}
.client-card-head {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
.client-avatar-badge {
  width: 42px !important;
  height: 42px !important;
  border-radius: 9px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: 0.5px !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #0284c7 0%, #0c2a45 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.20) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35) !important;
  flex-shrink: 0 !important;
}
.client-head-info {
  flex: 1 !important;
  min-width: 0 !important;
}
.card.client-item-card .client-card-title,
.client-item-card .client-card-title,
.client-card-title {
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  line-height: 1.3 !important;
}
.client-sub-badge {
  display: inline-block;
  margin-top: 3px;
  font-size: 11.5px;
  font-family: var(--font-mono, monospace);
  color: rgba(255, 255, 255, 0.75) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}
.client-item-card .client-status-indicator.is-active {
  color: #34D399 !important;
  background: rgba(16, 185, 129, 0.14) !important;
  border: 1px solid rgba(16, 185, 129, 0.30) !important;
}
.client-item-card .client-status-indicator.is-paused {
  color: #FBBF24 !important;
  background: rgba(245, 158, 11, 0.14) !important;
  border: 1px solid rgba(245, 158, 11, 0.30) !important;
}
.client-status-indicator {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 20px;
  flex-shrink: 0;
}
/* The chip text was picked against a dark card. On the light theme's pale
   blue wash the same mint and amber measured 1.99:1 and 1.72:1, so each
   theme now takes the weight it needs — the deeper pair on light, the bright
   pair on dark, both against the same faint tint. */
.client-status-indicator.is-active {
  background: rgba(16, 185, 129, 0.12);
  color: var(--success);
  border: 1px solid rgba(16, 185, 129, 0.25);
}
.client-status-indicator.is-paused {
  background: rgba(245, 158, 11, 0.12);
  color: var(--brass);
  border: 1px solid rgba(245, 158, 11, 0.25);
}
:root:not([data-theme="dark"]) .client-status-indicator.is-active {
  color: #047857;
  background: rgba(4, 120, 87, 0.10);
  border-color: rgba(4, 120, 87, 0.28);
}
:root:not([data-theme="dark"]) .client-status-indicator.is-paused {
  color: #B45309;
  background: rgba(180, 83, 9, 0.10);
  border-color: rgba(180, 83, 9, 0.28);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .client-status-indicator.is-active {
    color: #34D399;
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.25);
  }
  :root:not([data-theme="light"]) .client-status-indicator.is-paused {
    color: #FBBF24;
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.25);
  }
}
:root[data-theme="dark"] .client-status-indicator.is-active {
  color: #34D399;
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.25);
}
:root[data-theme="dark"] .client-status-indicator.is-paused {
  color: #FBBF24;
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.25);
}
.client-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.client-card-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 14px 0 10px;
}
.client-card-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.client-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--blueprint, #60a5fa);
  transition: color 0.15s ease, transform 0.15s ease;
}
.client-item-card:hover .client-card-cta {
  color: #93c5fd;
  transform: translateX(3px);
}

/* =========================================================================
   PWA Install App Button & Device Modal (Middle Topbar)
   Colorful animated circulating gradient ring, glow pulse, device detection
   ========================================================================= */

@keyframes spin-gradient {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 14px rgba(249, 115, 22, 0.45), 0 0 26px rgba(14, 165, 233, 0.35);
  }
  50% {
    box-shadow: 0 0 22px rgba(168, 85, 247, 0.55), 0 0 34px rgba(16, 185, 129, 0.45);
  }
}

@keyframes text-rainbow {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

.topbar-center-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 16px;
  z-index: 5;
}

/* Visibility toggle for Install App button ('visible' vs 'unvisible') */
html[data-install-button="unvisible"] .topbar-center-wrap,
html[data-install-button="unvisible"] .btn-install-app,
body[data-install-button="unvisible"] .topbar-center-wrap,
body[data-install-button="unvisible"] .btn-install-app,
.topbar-center-wrap.hidden,
.btn-install-app.hidden {
  display: none !important;
}

.topbar .who {
  margin-left: 0 !important;
}

.btn-install-app {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 2.5px;
  border-radius: 9999px;
  overflow: hidden;
  border: none;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
  animation: pulse-glow 3.5s ease-in-out infinite;
}

.btn-install-app:hover {
  transform: translateY(-1px) scale(1.04);
}

.btn-install-app:active {
  transform: translateY(1px) scale(0.97);
}

.btn-install-app .install-btn-spinner {
  position: absolute;
  top: -75%;
  left: -75%;
  width: 250%;
  height: 250%;
  background: conic-gradient(
    from 0deg,
    #f97316 0deg,
    #ef4444 60deg,
    #ec4899 120deg,
    #8b5cf6 180deg,
    #06b6d4 240deg,
    #10b981 300deg,
    #f97316 360deg
  );
  animation: spin-gradient 2.8s linear infinite;
  z-index: 0;
}

.btn-install-app .install-btn-content {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 15px;
  border-radius: 9999px;
  background: #090e1a;
  color: #ffffff;
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  z-index: 1;
  white-space: nowrap;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background 0.2s ease;
}

[data-theme="light"] .btn-install-app .install-btn-content {
  background: #0f172a;
  color: #ffffff;
}

.btn-install-app:hover .install-btn-content {
  background: rgba(15, 23, 42, 0.92);
}

.btn-install-app .install-icon {
  display: inline-flex;
  font-size: 14px;
  animation: text-rainbow 4s linear infinite;
}

.btn-install-app .install-text {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 45%, #fed7aa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.btn-install-app .install-device-badge {
  font-size: 9.5px;
  padding: 2px 7px;
  border-radius: 9999px;
  background: rgba(249, 115, 22, 0.22);
  color: #fb923c;
  border: 1px solid rgba(249, 115, 22, 0.45);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Modal styling for PWA Device and Install/Uninstall */
:root,
:root[data-theme="light"] {
  --install-card-bg: linear-gradient(135deg, #FFF7ED 0%, #F1F5F9 100%);
  --install-card-border: rgba(249, 115, 22, 0.35);
  --install-card-shadow: 0 4px 16px rgba(249, 115, 22, 0.08);
  --install-card-title: #0F172A;
  --install-card-subtitle: #64748B;
  --install-guide-bg: #F1F5F9;
  --install-guide-border: rgba(30, 41, 59, 0.12);
  --install-step-text: #0F172A;
  --install-un-bg: #FFF1F2;
  --install-un-border: rgba(244, 63, 94, 0.28);
  --install-un-title: #E11D48;
  --install-un-text: #475569;
  --install-un-btn-bg: #FFE4E6;
  --install-un-btn-border: rgba(225, 29, 72, 0.32);
  --install-un-btn-text: #BE123C;
}

:root[data-theme="dark"] {
  --install-card-bg: linear-gradient(135deg, rgba(30, 41, 59, 0.7) 0%, rgba(15, 23, 42, 0.85) 100%);
  --install-card-border: rgba(249, 115, 22, 0.30);
  --install-card-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  --install-card-title: #F8FAFC;
  --install-card-subtitle: #94A3B8;
  --install-guide-bg: rgba(15, 23, 42, 0.5);
  --install-guide-border: rgba(148, 163, 184, 0.15);
  --install-step-text: #E2E8F0;
  --install-un-bg: rgba(239, 68, 68, 0.08);
  --install-un-border: rgba(239, 68, 68, 0.25);
  --install-un-title: #F87171;
  --install-un-text: #CBD5E1;
  --install-un-btn-bg: rgba(239, 68, 68, 0.15);
  --install-un-btn-border: rgba(239, 68, 68, 0.35);
  --install-un-btn-text: #FCA5A5;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --install-card-bg: linear-gradient(135deg, rgba(30, 41, 59, 0.7) 0%, rgba(15, 23, 42, 0.85) 100%);
    --install-card-border: rgba(249, 115, 22, 0.30);
    --install-card-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    --install-card-title: #F8FAFC;
    --install-card-subtitle: #94A3B8;
    --install-guide-bg: rgba(15, 23, 42, 0.5);
    --install-guide-border: rgba(148, 163, 184, 0.15);
    --install-step-text: #E2E8F0;
    --install-un-bg: rgba(239, 68, 68, 0.08);
    --install-un-border: rgba(239, 68, 68, 0.25);
    --install-un-title: #F87171;
    --install-un-text: #CBD5E1;
    --install-un-btn-bg: rgba(239, 68, 68, 0.15);
    --install-un-btn-border: rgba(239, 68, 68, 0.35);
    --install-un-btn-text: #FCA5A5;
  }
}

.install-modal-device-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-radius: 14px;
  background: var(--install-card-bg);
  border: 1px solid var(--install-card-border);
  box-shadow: var(--install-card-shadow);
  margin-bottom: 18px;
}

.install-modal-device-icon {
  font-size: 38px;
  line-height: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 4px 12px rgba(249, 115, 22, 0.35));
}

.install-modal-device-info {
  flex-grow: 1;
}

.install-modal-device-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--install-card-title);
  margin: 0 0 3px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.install-modal-device-subtitle {
  font-size: 12.5px;
  color: var(--install-card-subtitle);
  margin: 0;
}

.install-modal-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 9999px;
  margin-top: 6px;
}

.install-modal-status-badge.standalone {
  background: rgba(16, 185, 129, 0.18);
  border: 1px solid rgba(16, 185, 129, 0.45);
  color: #34d399;
}

.install-modal-status-badge.browser {
  background: rgba(14, 165, 233, 0.18);
  border: 1px solid rgba(14, 165, 233, 0.45);
  color: #38bdf8;
}

.install-modal-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 13px 20px;
  border-radius: 12px;
  font-size: 14.5px;
  font-weight: 800;
  cursor: pointer;
  border: none;
  background: linear-gradient(135deg, #ea580c 0%, #f97316 40%, #0284c7 100%);
  color: #ffffff;
  box-shadow: 0 4px 18px rgba(234, 88, 12, 0.4);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
  margin-bottom: 16px;
}

.install-modal-action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(234, 88, 12, 0.55);
  filter: brightness(1.08);
}

.install-modal-action-btn:active {
  transform: translateY(1px);
}

.install-modal-guide-box {
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--install-guide-bg);
  border: 1px solid var(--install-guide-border);
  margin-bottom: 16px;
}

.install-modal-step-item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13px;
  color: var(--install-step-text);
  margin-bottom: 8px;
  line-height: 1.4;
}

.install-modal-step-num {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--brand-orange, #f97316);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
  margin-top: 1px;
}

.install-modal-uninstall-section {
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--install-un-bg);
  border: 1px solid var(--install-un-border);
}

.install-modal-uninstall-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--install-un-title);
  margin: 0 0 8px;
}

.install-modal-uninstall-text {
  font-size: 12px;
  color: var(--install-un-text);
  margin: 0 0 10px;
  line-height: 1.45;
}

.install-modal-reset-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  background: var(--install-un-btn-bg);
  border: 1px solid var(--install-un-btn-border);
  color: var(--install-un-btn-text);
  cursor: pointer;
  transition: all 0.15s ease;
}

.install-modal-reset-btn:hover {
  filter: brightness(1.1);
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.35);
  color: #ffffff;
}

/* =========================================================================
   COMPREHENSIVE RESPONSIVE BREAKPOINTS (Mobile, Tablet, Desktop)
   ========================================================================= */

@media (max-width: 900px) {
  .btn-install-app .install-text {
    display: none;
  }
  .btn-install-app .install-btn-content {
    padding: 5px 9px;
  }
  .topbar-center-wrap {
    padding: 0 6px;
  }
}

/* Group Chat Mobile Adaptive View */
@media (max-width: 768px) {
  .discord-hub-container {
    height: calc(100vh - 160px);
    min-height: 460px;
    max-height: none;
  }
  .discord-hub-container.has-active-chat .discord-channels-sidebar {
    display: none !important;
  }
  .discord-hub-container.has-active-chat .discord-chat-main {
    width: 100% !important;
    display: flex !important;
  }
  .discord-hub-container.no-active-chat .discord-channels-sidebar {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    display: flex !important;
    border-right: none !important;
  }
  .discord-hub-container.no-active-chat .discord-chat-main {
    display: none !important;
  }
  .discord-channels-sidebar .discord-channel-pill {
    padding: 12px 14px !important;
    font-size: 15px !important;
    min-height: 46px !important;
    border-radius: 8px !important;
  }
  .discord-channels-sidebar .discord-channel-actions {
    opacity: 1 !important;
  }
  .discord-channels-sidebar .discord-channel-tool-btn {
    padding: 6px !important;
    font-size: 14px !important;
  }
  .discord-channels-sidebar .discord-dm-pill {
    padding: 10px 12px !important;
    font-size: 14.5px !important;
    min-height: 46px !important;
    gap: 10px !important;
    border-radius: 8px !important;
  }
  .discord-channels-sidebar .discord-dm-pill .mark-tint {
    width: 26px !important;
    height: 26px !important;
    font-size: 11px !important;
  }
  .full-page-chat-back-btn {
    padding: 8px 14px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
  }
  .full-page-chat-header {
    padding: 8px 12px !important;
  }
  .full-page-chat-messages {
    padding: 10px 10px !important;
  }
  .full-page-chat-input-bar {
    padding: 8px 10px !important;
  }
  .full-page-chat-input-bar .comment-form-row {
    padding: 4px 8px !important;
    gap: 6px !important;
  }
}

/* Login Card Narrow Viewport Refinements */
@media (max-width: 480px) {
  .login-card {
    padding: 24px 18px !important;
    border-radius: var(--r2) !important;
  }
  .login-portal-card {
    padding: 28px 18px 22px !important;
    border-radius: var(--r2) !important;
  }
}

/* Employee Portal & Credential Cards 2x2 on Mobile */
@media (max-width: 820px) {
  .portal-cards-2x2 {
    grid-template-columns: 1fr !important;
  }
}

/* Forms and Inputs on Mobile */
@media (max-width: 600px) {
  .portal-form-grid-3,
  .portal-form-grid-4 {
    grid-template-columns: 1fr !important;
  }
  .portal-form-container {
    padding: var(--s4);
  }
  .portal-header-box {
    padding: var(--s3) var(--s4);
  }
  .portal-table-container {
    padding: var(--s3) var(--s4);
  }
}

/* Client Workspace Item Rows on Mobile */
@media (max-width: 560px) {
  .client-todo-item-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
  .client-todo-left {
    width: 100% !important;
  }
}

/* ---- record cards share one wash ---------------------------------------- */
/* A client, a foundation rule, a todo, an instruction, a department: each is
   one record, so each sits on the same blue wash rather than the flat card
   surface. Written as one block, after the rules it overrides, because this
   stylesheet styles several of these in more than one place and the last
   declaration is the one that lands. Accent bars these cards already carry
   (todo state, instruction purple) are left alone — the wash sits behind them. */
.foundation-card,
.dept-card,
.item,
.note,
.dashboard-todo-row {
  background: var(--card-wash-bg);
  border-color: var(--card-wash-border);
}
.foundation-card:hover,
.dept-card:hover,
.item:hover,
.note:hover,
.dashboard-todo-row:hover {
  border-color: var(--card-wash-border-hover);
}
/* an overdue row keeps its red edge: the warning outranks the wash */
.dashboard-todo-row.is-overdue {
  border-color: rgba(225, 29, 72, 0.35);
  border-left: 3.5px solid var(--signal);
}

/* This tag sits on a washed card at 9.5px, where --blueprint measured under a
   3:1 floor — the wash cost it the margin it had. Scoped to .item and .note at
   first, which missed the same tag on the client portal's instruction card; it
   now applies wherever the tag appears, since every surface under it is washed. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .dept-visibility-tag {
    color: #60A5FA;
  }
}
:root[data-theme="dark"] .dept-visibility-tag {
  color: #60A5FA;
}

/* ---- icons in headings and tabs ----------------------------------------- */
/* An icon inherits the text colour it sits beside, so it follows Day/Night
   without a rule of its own; these only handle size and alignment. Slightly
   dimmed so the icon reads as a marker rather than competing with the word. */
.panel-head h2 svg,
.page-head h1 svg,
.section-head svg,
.portal-view-title svg {
  width: 1em;
  height: 1em;
  flex: none;
  opacity: 0.75;
}
.panel-head h2,
.page-head h1,
.section-head,
.portal-view-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.segmented button svg,
.activities-tabs button svg {
  width: 14px;
  height: 14px;
  flex: none;
  opacity: 0.85;
}
.segmented button,
.activities-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
/* a selected tab carries its icon at full strength */
.segmented button[aria-pressed="true"] svg,
.activities-tabs button[aria-pressed="true"] svg {
  opacity: 1;
}
/* small action buttons: the icon sizes with the label rather than the 16px default */
.btn.small svg {
  width: 13px;
  height: 13px;
  flex: none;
}

/* ---- the wash reaches the remaining record surfaces ---------------------- */
/* The client portal's cards and the whole employee portal were still on the
   flat surface while every list around them had moved, which read as two
   different applications. Same wash, same tokens, appended for the same
   reason as the block above: these are styled earlier in this file and the
   last declaration is the one that lands. */
.portal-credential-card,
.client-instruction-item-card {
  background: var(--card-wash-bg);
  border-color: var(--card-wash-border);
}
/* the instruction card keeps its purple edge; only the fill changes */
.client-instruction-item-card {
  border-left-color: var(--purple);
}
.portal-credential-card:hover,
.client-instruction-item-card:hover {
  border-color: var(--card-wash-border-hover);
}
.client-instruction-item-card:hover {
  border-left-color: var(--purple);
}

/* Metric tiles read as a row of figures, so they take a lighter version of the
   same wash — enough to belong to the cards below them without competing with
   the number they carry, and their accent edge stays the thing that colours them. */
.stat {
  background: var(--stat-wash-bg);
  border-color: var(--card-wash-border);
}

/* Table rows are the one record surface a wash would fight — a gradient under
   columns of figures makes them harder to line up, not easier. They get the
   same blue at a hover instead, so a row still lifts under the pointer while
   the numbers stay on an even ground. */
.page table tbody tr {
  transition: background var(--t-fast);
}
.page table tbody tr:hover {
  background: var(--row-hover-bg);
}

/* ---- the wash reaches the sign-in screen and the modals ------------------ */
/* The sign-in card is the first surface anyone sees and was the last one still
   on the flat fill, so the app opened looking unlike itself. The modals are the
   other: every list behind them had moved while the dialog over the top had not. */
.login-portal-card,
dialog.modal {
  background: var(--card-wash-bg);
  border-color: var(--card-wash-border);
}
/* head and foot keep a touch more weight than the body, so the dialog still
   reads as three bands rather than one flat sheet */
dialog.modal .modal-head,
dialog.modal .modal-foot {
  background: var(--modal-band-bg);
}

/* =========================================================================
   Floating Messages FAB — draggable circular button (WhatsApp-style)
   ========================================================================= */
.oc-msg-fab {
  position: fixed;
  right: 24px;
  bottom: 32px;
  z-index: 9999;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: none;
  outline: none;
  cursor: grab;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
  box-shadow:
    0 4px 18px rgba(18, 140, 126, 0.55),
    0 1px 4px rgba(0,0,0,0.22),
    0 0 0 0 rgba(37, 211, 102, 0.50);
  transition:
    box-shadow 0.25s ease,
    transform 0.18s ease,
    background 0.2s ease;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  animation: oc-fab-pulse 3s ease-in-out infinite;
}

@keyframes oc-fab-pulse {
  0%, 100% {
    box-shadow:
      0 4px 18px rgba(18, 140, 126, 0.55),
      0 1px 4px rgba(0,0,0,0.22),
      0 0 0 0 rgba(37, 211, 102, 0.50);
  }
  50% {
    box-shadow:
      0 6px 24px rgba(18, 140, 126, 0.65),
      0 1px 4px rgba(0,0,0,0.22),
      0 0 0 10px rgba(37, 211, 102, 0.0);
  }
}

.oc-msg-fab:hover {
  transform: scale(1.10);
  background: linear-gradient(135deg, #2de673 0%, #16a189 100%);
  box-shadow:
    0 8px 28px rgba(18, 140, 126, 0.70),
    0 2px 6px rgba(0,0,0,0.25);
  animation: none;
  cursor: pointer;
}

.oc-msg-fab:active,
.oc-msg-fab.dragging {
  transform: scale(1.05);
  cursor: grabbing;
  box-shadow:
    0 10px 32px rgba(18, 140, 126, 0.60),
    0 2px 8px rgba(0,0,0,0.30);
  animation: none;
}

/* Pulsing outer ring on hover */
.oc-msg-fab::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2.5px solid rgba(37, 211, 102, 0.35);
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}
.oc-msg-fab:hover::before {
  opacity: 1;
  transform: scale(1);
}

/* SVG icon inside */
.oc-msg-fab svg {
  pointer-events: none;
  display: block;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.20));
  transition: transform 0.18s ease;
}
.oc-msg-fab:hover svg {
  transform: scale(1.08);
}

/* Unread badge */
.oc-msg-fab-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: #ef4444;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-sans, 'Plus Jakarta Sans', sans-serif);
  line-height: 20px;
  text-align: center;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.45);
  pointer-events: none;
  animation: oc-badge-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes oc-badge-pop {
  from { transform: scale(0.4); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

/* Light theme adjustments */
[data-theme="light"] .oc-msg-fab {
  box-shadow:
    0 4px 18px rgba(18, 140, 126, 0.40),
    0 1px 4px rgba(0,0,0,0.15);
}

[data-theme="light"] .oc-msg-fab-badge {
  border-color: #f8fafc;
}

/* Mobile adjustments */
@media (max-width: 600px) {
  .oc-msg-fab {
    width: 52px;
    height: 52px;
    right: 16px;
    bottom: 24px;
  }
}

/* Open state — user is on Messages page, button becomes close/back button */
.oc-msg-fab.is-open {
  background: linear-gradient(135deg, #6366f1 0%, #4338ca 100%);
  box-shadow:
    0 4px 20px rgba(99, 102, 241, 0.60),
    0 1px 4px rgba(0,0,0,0.25);
  animation: none;
}
.oc-msg-fab.is-open:hover {
  background: linear-gradient(135deg, #818cf8 0%, #4f46e5 100%);
  box-shadow:
    0 8px 28px rgba(99, 102, 241, 0.70),
    0 2px 6px rgba(0,0,0,0.25);
}
.oc-msg-fab.is-open::before {
  border-color: rgba(99, 102, 241, 0.35);
}

/* Icon transition */
.oc-msg-fab-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.oc-msg-fab.is-open .oc-msg-fab-icon {
  transform: rotate(90deg);
}