/* =========================================================================
   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;
  box-shadow: var(--sh-3d-badge);
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-instant);
}
.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: linear-gradient(180deg, rgba(251, 191, 36, 0.28) 0%, rgba(245, 158, 11, 0.16) 100%) !important;
  border: 1px solid rgba(251, 191, 36, 0.65) !important;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
  font-weight: 700;
}
.chip.role-member,
.chip.role.role-member,
.chip.level-member {
  color: #38BDF8 !important;
  background: linear-gradient(180deg, rgba(56, 189, 248, 0.28) 0%, rgba(14, 165, 233, 0.16) 100%) !important;
  border: 1px solid rgba(56, 189, 248, 0.65) !important;
  box-shadow: 0 2px 8px rgba(14, 165, 233, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
  font-weight: 700;
}
.chip.role-intern,
.chip.role.role-intern,
.chip.level-intern {
  color: #C084FC !important;
  background: linear-gradient(180deg, rgba(192, 132, 252, 0.28) 0%, rgba(168, 85, 247, 0.16) 100%) !important;
  border: 1px solid rgba(192, 132, 252, 0.65) !important;
  box-shadow: 0 2px 8px rgba(168, 85, 247, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
  font-weight: 700;
}
.chip.role-lead,
.chip.role.role-lead,
.chip.level-lead {
  color: #818CF8 !important;
  background: linear-gradient(180deg, rgba(129, 140, 248, 0.28) 0%, rgba(99, 102, 241, 0.16) 100%) !important;
  border: 1px solid rgba(129, 140, 248, 0.65) !important;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
  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: #1f4d78;
  background: rgba(31, 77, 120, 0.15);
  border-color: rgba(31, 77, 120, 0.35);
}
.chip.state-progress {
  color: #854F0B;
  background: rgba(133, 79, 11, 0.15);
  border-color: rgba(133, 79, 11, 0.35);
}
.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: var(--blueprint);
}
.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: var(--grad-primary);
  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;
  box-shadow: var(--sh-3d-sunken);
  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, var(--grad-primary)) !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(--sh-3d-btn-primary) !important;
}

/* ---- Management Main Sub-Navigation Bar (Top, Prominent & Larger) ---- */
.activities-tabs {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px;
  background: var(--segmented-bg, var(--card-bg-alt));
  border: 1px solid var(--segmented-border, var(--rule-strong));
  border-radius: 12px;
  box-shadow: var(--sh-3d-sunken);
  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), box-shadow var(--t-fast), transform var(--t-instant);
}
.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:active {
  transform: translateY(1px);
}
.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(--sh-3d-btn) !important;
}

/* Dashboard Active / Completed sub-buttons */
.dashboard-sub-buttons {
  display: inline-flex;
  align-items: center;
}
.dashboard-sub-buttons .dashboard-sub-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  transition: all var(--t-fast);
}
.dashboard-sub-buttons .dashboard-sub-btn.is-active,
.dashboard-sub-buttons .dashboard-sub-btn[aria-pressed="true"] {
  font-weight: 700;
}
.dashboard-sub-buttons .dashboard-sub-btn .sub-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  line-height: 1;
}

/* ---- cards -------------------------------------------------------------- */
.card {
  border: 1px solid var(--rule);
  border-radius: var(--r2);
  background: var(--card-bg);
  box-shadow: var(--sh-3d-card);
  padding: var(--s5) var(--s4) var(--s4);
  transition: box-shadow var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.card:hover {
  border-color: var(--rule-strong);
  box-shadow: var(--sh-3d-card-hover);
  transform: translateY(-2px);
}
.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(--sh-3d-card);
  padding: var(--s4) var(--s4) var(--s4) var(--s5);
  overflow: hidden;
  transition: box-shadow var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.stat:hover {
  border-color: var(--rule-strong);
  box-shadow: var(--sh-3d-card-hover);
  transform: translateY(-3px);
}
.stat::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--slate);
  box-shadow: 1px 0 6px rgba(0, 0, 0, 0.15);
}
.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 (1-line horizontal strip) --------------------------- */
.item {
  position: relative;
  border: 1px solid var(--rule);
  border-radius: var(--r2);
  background: var(--card-bg);
  padding: 6px 14px 6px 18px;
  box-shadow: var(--sh-3d-card);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  margin-bottom: 8px;
  content-visibility: auto;
  contain-intrinsic-size: auto 48px;
}
.item-main {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
  flex-wrap: nowrap !important;
  cursor: pointer;
}
.item:not(:has(.item-main)) {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
}
/* the state rail: one flat 3.5px 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: 3.5px;
  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(--sh-3d-card-hover);
  border-color: var(--rule-strong);
  transform: translateY(-2px);
}
.item:active {
  box-shadow: var(--sh-3d-card);
  transform: translateY(0);
}
.item-head {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex: 1 1 0% !important;
  min-width: 0 !important;
  flex-wrap: nowrap !important;
  overflow: hidden !important;
}
.item .title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
  flex: 1 1 auto;
  min-width: 40px;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.item.is-done .title {
  text-decoration: line-through;
  color: var(--text-secondary);
}
.item .desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  white-space: pre-wrap;
}
.item .meta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  white-space: nowrap !important;
  /* Lock meta area width so it never shifts between rows */
  flex-wrap: nowrap !important;
}
/* Every chip inside meta keeps its width stable */
.item .meta > * {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}
/* Client chip — fixed width column */
.item .meta .chip.client,
.item .meta [class*="chip"] {
  flex-shrink: 0 !important;
}
/* Due date chip — widest possible label ("2 days overdue", "29 SEP | 05:30 PM") sets locked column space */
.item .meta .chip.due,
.item .meta .due {
  width: 156px !important;
  min-width: 156px !important;
  max-width: 156px !important;
  box-sizing: border-box !important;
  text-align: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
.item .actions {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  white-space: nowrap !important;
  /* Fixed width so Undo/state-select never shift other columns */
  min-width: 160px !important;
}
.item .todo-avatar-end {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  /* Fixed slot for 1–3 avatars — prevents row jumps when count differs */
  min-width: 28px;
}
.item .todo-avatar-end .mark-tint,
.todo-row-avatar.mark-tint {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  cursor: default;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
}
.item .actions select {
  width: auto;
  min-width: 82px;
  height: 28px;
  padding: 2px 24px 2px 8px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  background-position: right 8px center;
  border: 1px solid var(--rule-strong);
  background-color: var(--card-bg-alt);
  color: var(--text);
  cursor: pointer;
}
.item .actions .btn {
  height: 28px;
  padding: 2px 8px;
  font-size: 11.5px;
  font-weight: 600;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.item .blocked-note,
.item .escalation {
  width: 100%;
  flex-basis: 100%;
  margin-top: 4px;
}

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

/* the completion control: a circular checkbox shape, empty inside */
.todo-check-btn {
  width: 22px;
  height: 22px;
  min-width: 22px;
  border-radius: 50%;
  border: 1.8px solid rgba(148, 163, 184, 0.45);
  background: var(--card-bg);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 0 rgba(255, 255, 255, 0.8);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  transition: all var(--t-instant);
}

.todo-check-btn:hover {
  border-color: var(--blueprint);
  background: rgba(76, 141, 224, 0.12);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.10), 0 0 8px rgba(76, 141, 224, 0.35);
  transform: scale(1.1);
}

.todo-check-btn:active {
  transform: scale(0.94);
}

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

/* Checkbox ring outline matches priority subtly while interior remains transparent */
.todo-check-btn.prio-low:not(.checked) {
  border-color: var(--slate);
}
.todo-check-btn.prio-normal:not(.checked) {
  border-color: var(--blueprint);
}
.todo-check-btn.prio-high:not(.checked) {
  border-color: var(--signal);
}

.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.2);
  transform: scale(1.1);
  background: rgba(255, 255, 255, 0.12);
}

.todo-check-btn.checked {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  border-color: #047857;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(5, 150, 105, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.40);
}

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

/* Dashboard Todo Priority Flag (rendered before the date) */
.dashboard-todo-prio-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 18px;
  height: 18px;
  line-height: 1;
}

.dashboard-todo-prio-flag .prio-flag-icon,
.dashboard-todo-prio-flag svg {
  width: 14px;
  height: 14px;
}

.dashboard-todo-prio-flag .prio-flag-icon path:nth-child(2),
.dashboard-todo-prio-flag svg path:nth-child(2) {
  fill: currentColor;
}

.dashboard-todo-prio-flag.prio-low {
  color: var(--slate);
}

.dashboard-todo-prio-flag.prio-normal {
  color: var(--blueprint);
}

.dashboard-todo-prio-flag.prio-high {
  color: var(--signal);
}

.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(--sh-3d-card);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
  content-visibility: auto;
  contain-intrinsic-size: auto 140px;
}
.note::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3.5px;
  border-radius: var(--r2) 0 0 var(--r2);
  background: var(--purple);
  opacity: 0.55;
  box-shadow: 1px 0 6px rgba(139, 92, 246, 0.35);
}
.note:hover {
  border-color: var(--rule-strong);
  box-shadow: var(--sh-3d-card-hover);
  transform: translateY(-2px);
}
.note:active {
  box-shadow: var(--sh-3d-card);
  transform: translateY(0);
}
/* 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 .byline .instruction-author-photo.mark-tint,
.instruction-author-photo.mark-tint,
.person-photo-only.mark-tint {
  width: 25px;
  height: 25px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 700;
  vertical-align: middle;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
}
.note .byline .instruction-author-photo.mark-tint:hover,
.instruction-author-photo.mark-tint:hover,
.person-photo-only.mark-tint:hover {
  transform: translateY(-1px) scale(1.06);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.32);
}
.chip.for-targets {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 7px;
  font-size: 12px;
}
.chip.for-targets .mark-tint {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  font-size: 9.5px;
  cursor: pointer;
}
.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: start;
}
.filters .field {
  margin: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.filters .field .chip {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-sizing: border-box;
}
/* 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(--sh-3d-modal);
  padding: 0;
  width: min(560px, 94vw);
  max-height: min(88vh, 780px);
  display: flex;
  flex-direction: column;
  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(8px);
  -webkit-backdrop-filter: blur(8px);
}
.modal-head {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 16px 20px;
  border-bottom: 1px solid var(--rule);
  background: var(--card-bg-alt);
  flex-shrink: 0;
}
.modal-head h2 {
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.modal-body {
  padding: 20px;
  flex: 1 1 auto;
  min-height: 0;
  max-height: calc(88vh - 130px);
  overflow-y: auto;
  overflow-x: hidden !important;
  overscroll-behavior-y: contain;
  scroll-behavior: smooth;
  box-sizing: border-box !important;
}
.modal-body > .field:last-child {
  margin-bottom: 0;
}
.modal-foot {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
  padding: 14px 20px;
  border-top: 1px solid var(--rule);
  background: var(--card-bg-alt);
  flex-shrink: 0;
  position: sticky;
  bottom: 0;
  z-index: 10;
}

@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);
}

/* ---- wide modal (standard wide dialogs) ---------------------------------- */
dialog.modal.modal-wide {
  width: min(820px, 95vw);
  max-height: min(88vh, 800px);
}
dialog.modal.modal-wide .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: calc(88vh - 130px);
}

/* ---- 1-Page 3-Column New & Edit Todo Modal (No Scroll) ------------------------- */
dialog.modal.modal-new-todo,
dialog.modal.modal-edit-todo {
  width: min(1200px, 96vw) !important;
  max-width: 1200px !important;
  max-height: min(92vh, 760px) !important;
  display: flex !important;
  flex-direction: column !important;
}
dialog.modal.modal-new-todo .modal-head,
dialog.modal.modal-edit-todo .modal-head {
  padding: 8px 18px !important;
  min-height: 40px !important;
  border-bottom: 1px solid var(--rule);
  background: var(--card-bg-alt);
}
dialog.modal.modal-new-todo .modal-head h2,
dialog.modal.modal-edit-todo .modal-head h2 {
  font-size: 15px !important;
  font-weight: 700 !important;
  margin: 0 !important;
  letter-spacing: -0.01em;
}
dialog.modal.modal-new-todo .modal-body,
dialog.modal.modal-edit-todo .modal-body {
  padding: 14px 18px !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: calc(92vh - 95px) !important;
  overflow-y: auto !important;
}
.new-todo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}
@media (max-width: 960px) {
  .new-todo-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}
.new-todo-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  height: 500px !important;
  min-height: 500px !important;
  max-height: 500px !important;
  overflow: hidden !important;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--rule, rgba(255, 255, 255, 0.07));
  border-radius: var(--r2, 10px);
  padding: 12px;
}
.new-todo-col .field {
  margin-bottom: 0 !important;
}
.new-todo-col .field > .label,
.new-todo-col .field > label {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: var(--text-secondary) !important;
  margin-bottom: 5px !important;
}
.new-todo-col .multi-picker-list {
  max-height: 260px !important;
  overflow-y: auto !important;
  margin-bottom: 0 !important;
}
.new-todo-tab-panel {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.new-todo-tab-panel.is-hidden {
  display: none !important;
}
.new-todo-tab-panel .field {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  margin-bottom: 0 !important;
}
.new-todo-tab-panel .assignee-picker {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
}
.new-todo-tab-panel .assignee-list {
  flex: 1 1 auto !important;
  max-height: 330px !important;
  overflow-y: auto !important;
  margin-bottom: 0 !important;
}
.new-todo-tab-panel .field-hint {
  margin-top: auto !important;
  padding-top: 6px !important;
}

.new-todo-col:nth-child(2) {
  padding-bottom: 20px !important;
}

/* Column 3: Exact 10px Gap After Each Field Item */
.new-todo-col:nth-child(3),
.new-todo-col:last-child {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  padding: 12px !important;
}

.new-todo-col:nth-child(3) .field,
.new-todo-col:last-child .field,
.new-todo-col:nth-child(3) .todo-visibility-control-wrap,
.new-todo-col:last-child .todo-visibility-control-wrap {
  margin: 0 0 10px 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.new-todo-col:nth-child(3) .field:last-child,
.new-todo-col:last-child .field:last-child {
  margin-bottom: 0 !important;
}

.new-todo-col:nth-child(3) .field > .label,
.new-todo-col:nth-child(3) .field > label,
.new-todo-col:last-child .field > .label,
.new-todo-col:last-child .field > label {
  margin: 0 0 4px 0 !important;
  padding: 0 !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: var(--text-secondary) !important;
}

.todo-visibility-control-wrap {
  width: 100%;
}
.todo-visibility-control-wrap button {
  width: 100% !important;
  box-sizing: border-box !important;
}

.new-todo-col:nth-child(3) input,
.new-todo-col:nth-child(3) select,
.new-todo-col:nth-child(3) button,
.new-todo-col:last-child input,
.new-todo-col:last-child select,
.new-todo-col:last-child button {
  margin: 0 !important;
  height: 38px !important;
  padding: 0 12px !important;
  font-size: 13px !important;
  border-radius: 8px !important;
}
.new-todo-assign-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--card-bg-alt, rgba(0, 0, 0, 0.25));
  padding: 4px;
  border-radius: var(--r2, 8px);
  border: 1px solid var(--rule, rgba(255, 255, 255, 0.08));
}
.new-todo-tab-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}
.new-todo-tab-btn.is-active {
  background: var(--accent, #38bdf8);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.new-todo-tab-btn.is-forward.is-active {
  background: #f59e0b;
  color: #0f172a;
}
.new-todo-tab-badge {
  font-size: 10.5px;
  padding: 1px 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  font-weight: 800;
}
dialog.modal.modal-new-todo .modal-foot,
dialog.modal.modal-edit-todo .modal-foot {
  padding: 8px 18px !important;
  min-height: 44px !important;
}

/* Dashboard Todo Role Indicators: A (Assigned) & F (Forward) */
.todo-role-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  font-size: 11px;
  font-weight: 800;
  border-radius: 4px;
  flex: none;
  line-height: 1;
  letter-spacing: 0.02em;
}
.todo-role-chip.role-a {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.35);
}
.todo-role-chip.role-f {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.35);
}


/* ---- Full Page Real Text Editor (Foundation Rules) ----------------------- */
dialog.modal.modal-policy-editor {
  width: min(1280px, 96vw) !important;
  height: min(94vh, 980px) !important;
  max-height: 96vh !important;
  display: flex !important;
  flex-direction: column !important;
  border-radius: 14px !important;
  background: var(--surface) !important;
  box-shadow: 0 28px 80px rgba(0,0,0,0.7), 0 0 0 1px var(--rule) !important;
}

dialog.modal.modal-policy-editor .modal-head {
  padding: 14px 24px !important;
  background: var(--surface) !important;
  border-bottom: 1px solid var(--rule) !important;
  flex-shrink: 0 !important;
}

dialog.modal.modal-policy-editor .modal-body {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  padding: 16px 24px !important;
  background: var(--surface) !important;
}

dialog.modal.modal-policy-editor .modal-foot {
  padding: 12px 24px !important;
  background: var(--surface) !important;
  border-top: 1px solid var(--rule) !important;
  flex-shrink: 0 !important;
}

/* Full document layout container */
.policy-full-editor-container {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  gap: 12px;
}

/* Top meta row: Title on left, Department, Document Access */
.policy-editor-top-meta {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(160px, 1fr) minmax(180px, 1.1fr);
  gap: 14px;
  align-items: end;
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .policy-editor-top-meta {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

.policy-editor-top-meta .field {
  margin: 0;
}

/* Real Document Card */
.policy-document-card {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  background: var(--card-bg);
  border: 1px solid var(--rule);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.18);
}

/* Real Text Editor Toolbar */
.policy-document-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  padding: 8px 14px;
  background: var(--card-bg-alt);
  border-bottom: 1px solid var(--rule);
  user-select: none;
  flex-shrink: 0;
}
.policy-document-toolbar .client-editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  width: 100%;
  border-bottom: none;
  padding: 0;
}

/* Real Document Sheet / Canvas */
.policy-document-canvas {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  height: 100% !important;
  overflow-y: auto !important;
  padding: 24px 36px !important;
  font-size: 15px !important;
  line-height: 1.8 !important;
  color: var(--ink) !important;
  background: var(--card-bg) !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  cursor: text !important;
  word-break: break-word !important;
}

.policy-document-canvas:focus {
  border: none !important;
  box-shadow: none !important;
}

.policy-document-canvas:empty:before {
  content: attr(data-placeholder);
  color: var(--text-secondary);
  pointer-events: none;
  font-style: italic;
}

/* Real Document Statusbar */
.policy-document-statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 16px;
  background: var(--card-bg-alt);
  border-top: 1px solid var(--rule);
  font-size: 11.5px;
  color: var(--text-secondary);
  flex-shrink: 0;
  user-select: none;
}

.policy-document-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--signal);
}
.policy-document-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 6px var(--signal);
}

/* Real Document typography & elements inside canvas */
.policy-document-canvas h2 {
  font-size: 1.45rem;
  font-weight: 700;
  margin: 1.1em 0 0.4em 0;
  color: var(--ink);
  line-height: 1.3;
}
.policy-document-canvas h3 {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0.9em 0 0.3em 0;
  color: var(--ink);
  line-height: 1.35;
}
.policy-document-canvas p {
  margin: 0 0 0.9em 0;
}
.policy-document-canvas blockquote {
  margin: 14px 0;
  padding: 10px 18px;
  border-left: 3px solid var(--signal, #3b82f6);
  background: rgba(59, 130, 246, 0.06);
  border-radius: 0 6px 6px 0;
  font-style: italic;
  color: var(--ink);
}
.policy-document-canvas code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 13px;
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
}
.policy-document-canvas a {
  color: #60a5fa;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.policy-document-canvas ul,
.policy-document-canvas ol {
  margin: 8px 0 12px 24px;
  padding: 0;
}
.policy-document-canvas li {
  margin: 4px 0;
}
.policy-document-canvas label {
  user-select: none;
}
.policy-document-canvas input[type="checkbox"] {
  accent-color: var(--signal, #3b82f6);
  cursor: pointer;
  width: 15px;
  height: 15px;
}
.policy-document-title-input {
  font-size: 15px !important;
  font-weight: 500 !important;
}

.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 sit strictly on a single line with badge aligned at the end of the item */
.client-field-row--pick {
  cursor: pointer;
  padding: 5px 8px;
  border-radius: var(--r1);
  border: 1px solid transparent;
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  gap: 8px !important;
  min-width: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  user-select: none;
}
.client-field-row--pick:hover {
  background: var(--card-bg-alt);
  border-color: var(--rule);
}
.client-field-row--pick .client-field-row-check {
  display: inline-flex !important;
  align-items: center !important;
  flex: none !important;
}
.client-field-row--pick .client-field-row-label {
  flex: 0 1 auto !important;
  width: auto !important;
  max-width: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  color: var(--text-secondary);
}
.client-field-row--pick:hover .client-field-row-label {
  color: var(--ink);
}
.client-card-preview-badge,
.client-portal-preview-badge {
  font-size: 10.5px !important;
  padding: 2px 7px !important;
  border-radius: 9999px !important;
  background: var(--brand-orange, #EC6047) !important;
  color: #fff !important;
  font-weight: 700 !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
  vertical-align: middle !important;
}
.client-field-rows:has(.client-field-row--pick) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 4px 16px;
}

/* 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;
}
.client-field-row input[readonly] {
  background: var(--card-bg-alt, rgba(255, 255, 255, 0.03));
  color: var(--ink);
  cursor: default;
  user-select: text;
  border-color: var(--rule);
}
.client-field-row input[readonly]:focus {
  outline: none;
  border-color: var(--rule);
  box-shadow: none;
}
@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(220px, 1fr));
  gap: 14px 24px;
}
@media (max-width: 900px) {
  .client-extended-info-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px 18px;
  }
}
.client-extended-info-item {
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.client-extended-info-item .k {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 0;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.25;
}
:root[data-theme="dark"] .client-extended-info-item .k {
  color: #f1a899;
  opacity: 0.9;
}
.client-extended-info-item .v {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block;
  line-height: 1.4;
}
.client-extended-info-item.is-empty .v {
  color: var(--text-secondary, #94a3b8);
  font-weight: 500;
  opacity: 0.85;
}
.client-extended-info-item .v a.client-ext-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--accent, #EC6047);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap !important;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
:root[data-theme="dark"] .client-extended-info-item .v a.client-ext-link {
  color: #FF735C;
}
.client-extended-info-item .v a.client-ext-link:hover {
  opacity: 0.8;
  text-decoration: underline;
}
.client-extended-info-item .v a.client-ext-link svg,
.client-extended-info-item .v a.client-ext-link .icon {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

/* ---- 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 10px 28px -4px rgba(5, 150, 105, 0.35), var(--sh-3d-card);
  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 10px 28px -4px rgba(225, 29, 72, 0.35), var(--sh-3d-card);
}
.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: var(--grad-orange);
  box-shadow: 0 0 10px rgba(236, 96, 71, 0.75);
}
.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;
}

/* ---- Facebook Style Notifications Right Flyout / Dropdown --------------- */
.notif-dropdown-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.notif-drawer-backdrop {
  position: fixed;
  inset: 0;
  top: var(--topbar-h, 56px);
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 180;
  animation: notifBackdropIn 0.2s ease;
}

@keyframes notifBackdropIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.notif-dropdown-panel {
  position: fixed;
  top: var(--topbar-h, 56px);
  right: 0;
  bottom: 0;
  width: 440px;
  max-width: 100vw;
  height: calc(100vh - var(--topbar-h, 56px));
  max-height: calc(100vh - var(--topbar-h, 56px));
  background: var(--card-bg);
  border-left: 1px solid var(--rule-strong);
  border-top: none;
  border-right: none;
  border-bottom: none;
  border-radius: 0;
  box-shadow: -10px 0 36px rgba(0, 0, 0, 0.48);
  display: flex;
  flex-direction: column;
  z-index: 200;
  overflow: hidden;
  transform: none;
  will-change: auto;
  contain: paint;
}

.notif-dropdown-panel.is-opening {
  animation: notifDrawerIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

@keyframes notifDrawerIn {
  from {
    opacity: 0.6;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.notif-panel-header {
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--card-bg);
  flex: none;
}

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

.notif-panel-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.02em;
}

.notif-unread-chip {
  font-size: 11px;
  padding: 2px 8px;
  font-weight: 700;
  border-radius: var(--r-pill);
  background: rgba(236, 96, 71, 0.16);
  color: var(--brand-orange, #ec6047);
  border: 1px solid rgba(236, 96, 71, 0.3);
}

.notif-mark-all-btn {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  color: var(--blueprint, #60a5fa);
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: none;
  transition: all 0.15s ease;
}

.notif-mark-all-btn:hover {
  background: var(--card-bg-alt);
  color: var(--ink);
}

.notif-close-btn {
  padding: 6px;
  color: var(--text-secondary);
  border-radius: 6px;
}

.notif-close-btn:hover {
  color: var(--ink);
  background: var(--card-bg-alt);
}

.notif-tabs-bar {
  display: flex;
  align-items: center;
  gap: 6px;
}

.notif-tab-btn {
  padding: 5px 12px;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: var(--r-pill, 20px);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.notif-tab-btn.active {
  background: var(--tint, rgba(24, 66, 114, 0.22));
  color: var(--blueprint, #60a5fa);
  border-color: rgba(37, 99, 235, 0.3);
  font-weight: 700;
}

.notif-tab-btn:hover:not(.active) {
  background: var(--card-bg-alt);
  color: var(--ink);
}

.notif-tab-count {
  font-size: 10.5px;
  padding: 1px 6px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.08);
  font-weight: 700;
}

.notif-tab-count.unread {
  background: var(--brand-orange, #ec6047);
  color: #ffffff;
}

.notif-push-wrap {
  padding: 8px 14px;
  background: var(--card-bg-alt);
  border-bottom: 1px solid var(--rule);
  font-size: 12px;
  flex: none;
}
.notif-push-wrap .pushrow {
  margin: 0;
  padding: 0;
  font-size: 12px;
}

.notif-list-scroll {
  flex: 1;
  overflow-y: auto;
  scrollbar-gutter: stable;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overscroll-behavior-y: contain;
}

/* Individual notification item */
.notif-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  position: relative;
  transition: background 0.15s ease, transform 0.1s ease, border-color 0.15s ease;
  border: 1px solid transparent;
  border-left: 4px solid transparent;
  user-select: none;
}

.notif-item:hover {
  background: var(--card-bg-alt);
}

/* Facebook-style UNREAD notification state (prominent color) */
.notif-item.unread {
  background: rgba(24, 66, 114, 0.24);
  border-color: rgba(59, 130, 246, 0.22);
  border-left-color: var(--brand-orange, #ec6047);
}
.notif-item.unread:hover {
  background: rgba(24, 66, 114, 0.35);
}

:root[data-theme="light"] .notif-item.unread {
  background: #eef5fc;
  border-color: rgba(24, 66, 114, 0.18);
  border-left-color: #184272;
}
:root[data-theme="light"] .notif-item.unread:hover {
  background: #e2effd;
}

/* Facebook-style READ notification state (color gone, clean standard look) */
.notif-item.read,
.notif-item:not(.unread) {
  background: transparent;
  border-color: transparent;
  border-left-color: transparent;
}
.notif-item.read:hover,
.notif-item:not(.unread):hover {
  background: var(--card-bg-alt);
}

/* Text formatting */
.notif-item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.notif-item-text {
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink);
  word-break: break-word;
}
.notif-item.read .notif-item-text,
.notif-item:not(.unread) .notif-item-text {
  color: var(--text-secondary);
  font-weight: 500;
}
.notif-item.unread .notif-item-text {
  color: var(--ink);
  font-weight: 700;
}

.notif-item-time {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text-dim, #94a3b8);
}
.notif-item-time .icon {
  width: 12px;
  height: 12px;
}

/* Facebook-style unread blue dot */
.fb-notif-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--blueprint, #2563eb);
  box-shadow: 0 0 10px rgba(37, 99, 235, 0.7);
  flex: none;
  margin-left: auto;
}
:root[data-theme="light"] .fb-notif-dot {
  background: #184272;
  box-shadow: 0 0 8px rgba(24, 66, 114, 0.5);
}

.notif-icon-badge {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.notif-icon-badge .icon {
  width: 16px;
  height: 16px;
}
.notif-icon-badge.color-blueprint {
  background: rgba(37, 99, 235, 0.16);
  color: #60a5fa;
}
.notif-icon-badge.color-danger {
  background: rgba(239, 68, 68, 0.16);
  color: #f87171;
}
.notif-icon-badge.color-orange {
  background: rgba(236, 96, 71, 0.16);
  color: #ec6047;
}
.notif-icon-badge.color-purple {
  background: rgba(168, 85, 247, 0.16);
  color: #c084fc;
}

.notif-panel-footer {
  padding: 10px 16px;
  border-top: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-dim, #94a3b8);
  background: var(--card-bg-alt);
  flex: none;
}

.notif-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 42px 20px;
  color: var(--text-dim, #94a3b8);
  gap: 8px;
}
.notif-empty-state .icon {
  width: 32px;
  height: 32px;
  color: var(--blueprint, #60a5fa);
  opacity: 0.8;
  margin-bottom: 4px;
}
.notif-empty-title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
}
.notif-empty-desc {
  font-size: 12.5px;
  line-height: 1.5;
  max-width: 280px;
}

/* Mobile full-width right drawer */
@media (max-width: 600px) {
  .notif-dropdown-panel {
    top: var(--topbar-h, 56px);
    left: 0;
    right: 0;
    width: 100vw;
    height: calc(100vh - var(--topbar-h, 56px));
    max-height: calc(100vh - var(--topbar-h, 56px));
    border-left: none;
    border-radius: 0;
  }
}

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

/* ---- document footer ---------------------------------------------------- */
.appfoot {
  width: 100% !important;
  max-width: 100% !important;
  margin: auto 0 0 auto !important;
  padding: 32px 32px 20px !important;
  box-sizing: border-box !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
}
.appfoot-inner,
.appfoot p {
  width: 100% !important;
  max-width: 100% !important;
  border-top: 1px solid var(--rule, rgba(255, 255, 255, 0.08)) !important;
  padding-top: 14px !important;
  font-family: var(--font-sans, 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: var(--text-secondary, #94a3b8) !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  text-align: right !important;
  box-sizing: border-box !important;
  margin-left: auto !important;
}
.appfoot .appfoot-copy {
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  color: var(--text-secondary, #94a3b8) !important;
  font-size: 13px !important;
  text-align: right !important;
  white-space: nowrap !important;
  margin-left: auto !important;
}
.appfoot .appfoot-sep {
  opacity: 0.35;
  font-size: 14px;
}
.appfoot .owner-badge,
.appfoot .owner-tag,
.appfoot .developer-badge,
.developer-login-badge {
  display: inline-flex;
  align-items: center;
  gap: 6.5px;
  padding: 4px 12px;
  border-radius: 9999px;
  background: var(--blueprint-soft, rgba(24, 66, 114, 0.08));
  border: 1px solid rgba(24, 66, 114, 0.18);
  font-size: 13px;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(24, 66, 114, 0.04);
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.appfoot .owner-badge:hover,
.appfoot .developer-badge:hover,
.developer-login-badge:hover {
  background: rgba(236, 96, 71, 0.09);
  border-color: rgba(236, 96, 71, 0.45);
  box-shadow: 0 2px 8px -2px rgba(236, 96, 71, 0.25);
  transform: translateY(-1px);
}
.appfoot .owner-badge .owner-label,
.appfoot .developer-badge .owner-label,
.developer-login-badge .owner-label {
  color: var(--text-secondary);
  font-weight: 500;
}
.appfoot .owner-badge .owner-name,
.appfoot .developer-badge .owner-name,
.developer-login-badge .owner-name {
  color: var(--primary, #184272);
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: color 0.2s ease;
}
.appfoot .owner-badge:hover .owner-name,
.appfoot .developer-badge:hover .owner-name,
.developer-login-badge:hover .owner-name {
  color: var(--brand-orange, #EC6047);
}

.developer-linkedin-icon {
  width: 14px;
  height: 14px;
  fill: #0A66C2 !important;
  stroke: none !important;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
  transition: transform 0.2s ease, fill 0.2s ease;
}
.appfoot .developer-badge:hover .developer-linkedin-icon,
.developer-login-badge:hover .developer-linkedin-icon {
  transform: scale(1.15);
  fill: #004182 !important;
}

:root[data-theme="dark"] .appfoot .owner-badge,
:root[data-theme="dark"] .appfoot .owner-tag,
:root[data-theme="dark"] .appfoot .developer-badge,
:root[data-theme="dark"] .developer-login-badge {
  background: rgba(58, 129, 206, 0.14);
  border-color: rgba(58, 129, 206, 0.32);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .appfoot .owner-badge,
  :root:not([data-theme="light"]) .appfoot .owner-tag,
  :root:not([data-theme="light"]) .appfoot .developer-badge,
  :root:not([data-theme="light"]) .developer-login-badge {
    background: rgba(58, 129, 206, 0.14);
    border-color: rgba(58, 129, 206, 0.32);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  }
  :root:not([data-theme="light"]) .appfoot .owner-badge:hover,
  :root:not([data-theme="light"]) .appfoot .developer-badge:hover,
  :root:not([data-theme="light"]) .developer-login-badge:hover {
    background: rgba(236, 96, 71, 0.16);
    border-color: #EC6047;
    box-shadow: 0 0 14px rgba(236, 96, 71, 0.22);
  }
  :root:not([data-theme="light"]) .appfoot .owner-badge .owner-name,
  :root:not([data-theme="light"]) .appfoot .developer-badge .owner-name,
  :root:not([data-theme="light"]) .developer-login-badge .owner-name {
    color: #96C4F3;
  }
  :root:not([data-theme="light"]) .appfoot .owner-badge:hover .owner-name,
  :root:not([data-theme="light"]) .appfoot .developer-badge:hover .owner-name,
  :root:not([data-theme="light"]) .developer-login-badge:hover .owner-name {
    color: #FF9B85;
  }
  :root:not([data-theme="light"]) .developer-linkedin-icon {
    fill: #70B5F9 !important;
  }
  :root:not([data-theme="light"]) .developer-badge:hover .developer-linkedin-icon,
  :root:not([data-theme="light"]) .developer-login-badge:hover .developer-linkedin-icon {
    fill: #A8D1FF !important;
  }
}
.appfoot .appfoot-right {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  justify-content: flex-end;
}
.appfoot .backend-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  border-radius: 9999px;
  background: var(--surface-alt, #F1F5F9);
  border: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--text-secondary);
  font-weight: 500;
}
.appfoot .status-dot-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--success, #10B981);
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6);
  animation: footerDotPulse 2s infinite cubic-bezier(0.45, 0, 0.55, 1);
  flex-shrink: 0;
}
@keyframes footerDotPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}
@media (max-width: 768px) {
  .appfoot {
    margin-top: 36px;
    padding-bottom: 24px;
  }
  .appfoot-inner,
  .appfoot p {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 12px;
  }
  .appfoot .appfoot-left,
  .appfoot .appfoot-right {
    justify-content: center;
    width: 100%;
  }
}

/* ---- 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-line.is-excluded {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
  background: transparent !important;
}
.assignee-item-line.is-excluded:hover {
  background: rgba(255, 255, 255, 0.03) !important;
}
.assignee-item-line.is-excluded input[type="checkbox"] {
  cursor: not-allowed !important;
  pointer-events: none !important;
}
.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: var(--blueprint) !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: var(--blueprint) !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 var(--blueprint);
  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 var(--blueprint);
    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);
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
.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;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}
.comment-by {
  display: flex;
  gap: var(--s2);
  align-items: center;
  flex-wrap: nowrap;
  font-family: var(--font-sans, 'Plus Jakarta Sans', sans-serif);
  font-size: 10.5px;
  color: var(--text-secondary);
  margin-bottom: 2px;
  min-width: 0;
  overflow: hidden;
}
.comment-by > strong,
.comment-by > .person {
  flex-shrink: 0;
}
.comment-by > span:not(.comment-edited-tag) {
  flex-shrink: 0;
  white-space: nowrap;
}
.comment-tools {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}
/* Name inside comment header stays bold and dark */
.comment-by strong,
.comment-by .person .name {
  color: var(--ink);
  font-weight: 700;
}
.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.5;
  white-space: pre-wrap !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
.comment-body-text .todo-title-link,
.comment-body-text a {
  color: #EC6047 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  word-break: break-all !important;
  overflow-wrap: anywhere !important;
  cursor: pointer !important;
  transition: color 0.15s ease !important;
}
.comment-body-text .todo-title-link:hover,
.comment-body-text a:hover {
  color: #FF7B60 !important;
  text-decoration-thickness: 2px !important;
}
.comment-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
.comment-form-row {
  display: flex !important;
  gap: var(--s2);
  align-items: flex-end !important;
  position: relative;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
.comment-form-row input,
.comment-form-row textarea {
  flex: 1 1 0% !important;
  min-width: 0 !important;
}
.comment-form-row > button,
.comment-form-row > .btn {
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
}

/* Comment input wrap with link button (Photo 4 style) */
.comment-input-wrap {
  display: flex !important;
  align-items: flex-end !important;
  flex: 1 1 0% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  position: relative !important;
  background: var(--input-bg, var(--card-bg)) !important;
  border: 1px solid var(--input-border, var(--rule-strong)) !important;
  border-radius: var(--r1, 6px) !important;
  padding: 0 4px 0 0 !important;
  box-sizing: border-box !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
  overflow: visible !important;
}
.comment-input-wrap:focus-within {
  border-color: var(--blueprint, #38bdf8) !important;
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.20) !important;
}
.comment-input-wrap input,
.comment-input-wrap textarea,
.comment-input-wrap .comment-textarea {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 8px 12px !important;
  font-family: inherit !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  color: var(--input-text, var(--text)) !important;
  box-sizing: border-box !important;
  white-space: pre-wrap !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}
.comment-input-wrap textarea,
.comment-input-wrap .comment-textarea {
  resize: none !important;
  height: 36px;
  min-height: 36px;
  max-height: 180px;
  overflow-y: hidden;
  overflow-x: hidden !important;
  white-space: pre-wrap !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}
.comment-rich-editor {
  cursor: text !important;
  scrollbar-width: thin !important;
  white-space: pre-wrap !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  overflow-x: hidden !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
.comment-rich-editor:empty:before {
  content: attr(data-placeholder);
  color: var(--muted, #64748b) !important;
  pointer-events: none;
  display: inline-block;
}
.comment-rich-editor a,
.comment-rich-editor .todo-title-link,
.comment-rich-editor .md-link,
.edit-comment-rich-editor a,
.edit-comment-rich-editor .todo-title-link,
.edit-comment-rich-editor .md-link {
  color: var(--signal, #fb7185) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  text-decoration-thickness: 1px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}
.comment-rich-editor a:hover,
.comment-rich-editor .todo-title-link:hover,
.comment-rich-editor .md-link:hover,
.edit-comment-rich-editor a:hover,
.edit-comment-rich-editor .todo-title-link:hover,
.edit-comment-rich-editor .md-link:hover {
  color: var(--signal, #fb7185) !important;
  opacity: 0.85 !important;
  text-decoration-thickness: 2px !important;
}
.comment-link-btn {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  margin-right: 4px !important;
  margin-bottom: 4px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  color: #EC6047 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}
.comment-link-btn:hover {
  background: rgba(236, 96, 71, 0.14) !important;
  border-color: rgba(236, 96, 71, 0.35) !important;
  color: #FF6F57 !important;
}
.comment-link-btn:active {
  background: rgba(236, 96, 71, 0.25) !important;
  transform: scale(0.92) !important;
}
.comment-link-btn .icon,
.comment-link-btn svg {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
  color: #EC6047 !important;
  stroke: #EC6047 !important;
  fill: none !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  transition: stroke 0.15s ease, color 0.15s ease !important;
}
.comment-link-btn:hover .icon,
.comment-link-btn:hover svg {
  color: #FF6F57 !important;
  stroke: #FF6F57 !important;
}


/* ---- 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 var(--blueprint);
  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: var(--blueprint);
  border-color: var(--blueprint);
  background: rgba(37, 99, 235, 0.05);
}

/* ---- 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: 8px;
  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 > .dashboard-client-name,
.dashboard-todo-main-row > .dashboard-client-placeholder,
.dashboard-todo-main-row > .dashboard-todo-prio-flag,
.dashboard-todo-main-row > .todo-role-chip,
.dashboard-todo-main-row > .dashboard-role-placeholder,
.dashboard-todo-main-row > .dashboard-due-wrap,
.dashboard-todo-main-row > .due,
.dashboard-todo-main-row > .dashboard-due-placeholder,
.dashboard-todo-main-row > .dashboard-assignee-mark,
.dashboard-todo-main-row > .dashboard-assignee-text,
.dashboard-todo-main-row > .dashboard-assignee-placeholder,
.dashboard-todo-main-row > .comment-chip,
.dashboard-todo-main-row > .dashboard-comment-placeholder,
.dashboard-todo-main-row > .actions {
  flex: none;
  flex-shrink: 0;
}

/* Fixed column widths — keeps every row perfectly aligned across all states */
.dashboard-todo-main-row > .comment-chip,
.dashboard-todo-main-row > .dashboard-comment-placeholder {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 28px !important;
  width: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  height: 22px !important;
  box-sizing: border-box !important;
  text-align: center !important;
}
.dashboard-todo-main-row > .dashboard-todo-prio-flag {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 24px !important;
  width: 24px !important;
  min-width: 24px !important;
  max-width: 24px !important;
  height: 22px !important;
  box-sizing: border-box !important;
}
.dashboard-todo-main-row > .todo-role-chip,
.dashboard-todo-main-row > .dashboard-role-placeholder {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 24px !important;
  width: 24px !important;
  min-width: 24px !important;
  max-width: 24px !important;
  height: 22px !important;
  box-sizing: border-box !important;
  text-align: center !important;
}
.dashboard-todo-main-row > .dashboard-client-name,
.dashboard-todo-main-row > .dashboard-client-placeholder {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 54px !important;
  width: 54px !important;
  min-width: 54px !important;
  max-width: 54px !important;
  height: 22px !important;
  box-sizing: border-box !important;
  text-align: center !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.dashboard-todo-main-row > .actions {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 102px !important;
  width: 102px !important;
  min-width: 102px !important;
  max-width: 102px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
}
.dashboard-todo-main-row > .dashboard-due-wrap,
.dashboard-todo-main-row > .due,
.dashboard-todo-main-row > .dashboard-due-placeholder {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 140px !important;
  width: 140px !important;
  min-width: 140px !important;
  max-width: 140px !important;
  box-sizing: border-box !important;
  text-align: center !important;
}
.dashboard-due-wrap > .due,
.dashboard-todo-main-row > .due {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  max-width: 140px;
  padding: 2px 8px !important;
  text-align: center;
  justify-content: center;
  box-sizing: border-box;
  white-space: nowrap;
  text-transform: capitalize;
}
.dashboard-due-wrap > .dashboard-due-placeholder,
.dashboard-todo-main-row > .dashboard-due-placeholder {
  visibility: hidden !important;
  pointer-events: none !important;
  width: 140px !important;
  height: 22px !important;
}
.dashboard-todo-main-row > .dashboard-assignee-mark,
.dashboard-todo-main-row > .dashboard-assignee-text,
.dashboard-todo-main-row > .dashboard-assignee-placeholder {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 32px !important;
  width: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  box-sizing: border-box !important;
}

.dashboard-client-placeholder,
.dashboard-due-placeholder,
.dashboard-assignee-placeholder,
.dashboard-comment-placeholder,
.dashboard-role-placeholder {
  display: inline-flex !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* User Formatted Order: Checkbox(1) -> Title(2) -> Private Tag(3) -> Comment Count(4) -> Priority Flag(5) -> Role A/F(6) -> Client Code(7) -> Status Dropdown(8) -> Due Date/Overdue(9) -> Avatar(10) -> Undo(11) */
.dashboard-todo-main-row > .checkbox-label,
.dashboard-todo-main-row > .todo-check-btn {
  order: 1;
}
.dashboard-todo-main-row > .dashboard-todo-title {
  order: 2;
}
.dashboard-todo-main-row > .dashboard-todo-private-tag {
  order: 3;
}
.dashboard-todo-main-row > .comment-chip,
.dashboard-todo-main-row > .dashboard-comment-placeholder {
  order: 4;
}
.dashboard-todo-main-row > .dashboard-todo-prio-flag {
  order: 5;
}
.dashboard-todo-main-row > .todo-role-chip,
.dashboard-todo-main-row > .dashboard-role-placeholder {
  order: 6;
}
.dashboard-todo-main-row > .dashboard-client-name,
.dashboard-todo-main-row > .dashboard-client-placeholder {
  order: 7;
}
.dashboard-todo-main-row > .actions {
  order: 8;
}
.dashboard-todo-main-row > .dashboard-due-wrap,
.dashboard-todo-main-row > .due,
.dashboard-todo-main-row > .dashboard-due-placeholder {
  order: 9;
}
.dashboard-todo-main-row > .dashboard-assignee-mark,
.dashboard-todo-main-row > .dashboard-assignee-text,
.dashboard-todo-main-row > .dashboard-assignee-placeholder {
  order: 10;
}
.dashboard-todo-main-row > .undo-btn {
  order: 11;
}

.dashboard-todo-main-row .actions {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  white-space: nowrap !important;
}
.dashboard-todo-main-row .actions select,
select.state-select {
  width: 102px !important;
  min-width: 102px !important;
  max-width: 102px !important;
  height: 26px;
  padding: 2px 18px 2px 8px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  background-position: right 6px center;
  border: 1px solid var(--rule-strong);
  background-color: var(--card-bg-alt);
  color: var(--text);
  cursor: pointer;
  text-align: center;
  text-align-last: center;
  -moz-text-align-last: center;
  transition: color var(--t-fast), border-color var(--t-fast);
  box-sizing: border-box !important;
}

/* State-specific text colors (ONLY text has color, background stays clean dark theme) */
.dashboard-todo-main-row .actions select[data-state="open"],
select.state-select.state-select-open,
select.state-select[data-state="open"] {
  color: #1f4d78 !important; /* deep steel blue for Open */
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%231f4d78' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
}

.dashboard-todo-main-row .actions select[data-state="progress"],
select.state-select.state-select-progress,
select.state-select[data-state="progress"] {
  color: #854F0B !important; /* amber bronze for In progress */
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23854F0B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
}

.dashboard-todo-main-row .actions select[data-state="done"],
select.state-select.state-select-done,
select.state-select[data-state="done"] {
  color: #34d399 !important; /* emerald green for Done */
}

.dashboard-todo-main-row .actions select[data-state="blocked"],
select.state-select.state-select-blocked,
select.state-select[data-state="blocked"] {
  color: #f87171 !important; /* rose red for Blocked */
}

/* Option elements text colors and alignment */
.dashboard-todo-main-row .actions select option,
select.state-select option {
  text-align: center;
  text-align-last: center;
  background-color: var(--card-bg-alt, #131d2e);
  font-weight: 600;
}

.dashboard-todo-main-row .actions select option[value="open"],
select.state-select option[value="open"],
option.state-opt-open {
  color: #1f4d78 !important;
}

.dashboard-todo-main-row .actions select option[value="progress"],
select.state-select option[value="progress"],
option.state-opt-progress {
  color: #854F0B !important;
}

.dashboard-todo-main-row .actions select option[value="done"],
select.state-select option[value="done"],
option.state-opt-done {
  color: #34d399 !important;
}

.dashboard-todo-main-row .actions select option[value="blocked"],
select.state-select option[value="blocked"],
option.state-opt-blocked {
  color: #f87171 !important;
}

.dashboard-todo-main-row .comment-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-width: 24px;
  height: 20px;
  padding: 0 6px;
  font-family: var(--font-sans, 'Plus Jakarta Sans', sans-serif);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  color: var(--text-secondary, #94a3b8);
  background: var(--card-bg-alt);
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  white-space: nowrap;
  box-shadow: var(--sh-3d-badge);
  cursor: pointer;
  box-sizing: border-box;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}

.dashboard-todo-main-row .comment-chip:hover {
  background: var(--card-bg);
  border-color: var(--rule-strong);
  color: var(--ink);
}

.dashboard-todo-main-row .comment-chip .comment-chip-count,
.dashboard-todo-main-row .comment-chip > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1;
  margin: 0;
  padding: 0;
}


/* ---- 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 {
  width: min(780px, 94vw);
  max-width: 780px;
  max-height: min(90vh, 880px);
  overflow-x: hidden !important;
}
dialog.modal.todo-detail-modal .modal-body {
  max-height: calc(90vh - 120px);
  overflow-y: auto;
  overflow-x: hidden !important;
  padding: 18px 22px 22px;
  box-sizing: border-box !important;
  max-width: 100% !important;
}
.todo-detail {
  display: flex;
  flex-direction: column;
  gap: 13px;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
.todo-detail-comments-wrap {
  margin-top: 10px;
  border-top: 1px solid var(--rule, rgba(255, 255, 255, 0.08));
  padding-top: 14px;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
.todo-detail-comments {
  margin-top: 6px;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
.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;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.todo-detail-chips-left {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.todo-detail-status-wrap {
  display: inline-flex;
  align-items: center;
}
.todo-detail-status-wrap select.state-select,
.todo-detail-status-wrap .chip {
  margin: 0;
}

/* Inline interactive status dropdown inside Task Details modal header */
.todo-detail-chips select.state-select,
select.state-select.todo-detail-inline-state-select {
  width: auto !important;
  min-width: 86px !important;
  max-width: 125px !important;
  height: 22px !important;
  min-height: 22px !important;
  line-height: 20px !important;
  padding: 0 22px 0 10px !important;
  font-family: var(--font-sans, 'Plus Jakarta Sans', sans-serif) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  border-radius: var(--r-pill, 9999px) !important;
  display: inline-flex !important;
  align-items: center !important;
  vertical-align: middle !important;
  margin: 0 !important;
  cursor: pointer !important;
  box-shadow: var(--sh-3d-badge) !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-repeat: no-repeat !important;
  background-position: right 7px center !important;
  background-size: 9px 9px !important;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast) !important;
}

.todo-detail-chips select.state-select.state-select-open,
.todo-detail-chips select.state-select[data-state="open"],
select.state-select.todo-detail-inline-state-select.state-select-open,
select.state-select.todo-detail-inline-state-select[data-state="open"] {
  color: #1f4d78 !important;
  background-color: rgba(31, 77, 120, 0.12) !important;
  border: 1px solid rgba(31, 77, 120, 0.35) !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%231f4d78' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
}

.todo-detail-chips select.state-select.state-select-progress,
.todo-detail-chips select.state-select[data-state="progress"],
select.state-select.todo-detail-inline-state-select.state-select-progress,
select.state-select.todo-detail-inline-state-select[data-state="progress"] {
  color: #854F0B !important;
  background-color: rgba(133, 79, 11, 0.12) !important;
  border: 1px solid rgba(133, 79, 11, 0.35) !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23854F0B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
}

.todo-detail-chips select.state-select.state-select-done,
.todo-detail-chips select.state-select[data-state="done"],
select.state-select.todo-detail-inline-state-select.state-select-done,
select.state-select.todo-detail-inline-state-select[data-state="done"] {
  color: #34d399 !important;
  background-color: rgba(52, 211, 153, 0.12) !important;
  border: 1px solid rgba(52, 211, 153, 0.35) !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2334d399' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
}

.todo-detail-chips select.state-select.state-select-blocked,
.todo-detail-chips select.state-select[data-state="blocked"],
select.state-select.todo-detail-inline-state-select.state-select-blocked,
select.state-select.todo-detail-inline-state-select[data-state="blocked"] {
  color: #f87171 !important;
  background-color: rgba(248, 113, 113, 0.12) !important;
  border: 1px solid rgba(248, 113, 113, 0.35) !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23f87171' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
}

.todo-detail-chips select.state-select:hover,
select.state-select.todo-detail-inline-state-select:hover {
  filter: brightness(1.1);
}

.todo-detail-chips select.state-select:focus,
select.state-select.todo-detail-inline-state-select:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(31, 77, 120, 0.35) !important;
}

/* Light mode overrides for modal inline state select */
:root[data-theme="light"] .todo-detail-chips select.state-select.state-select-open,
:root[data-theme="light"] .todo-detail-chips select.state-select[data-state="open"],
:root[data-theme="light"] select.state-select.todo-detail-inline-state-select.state-select-open,
:root[data-theme="light"] select.state-select.todo-detail-inline-state-select[data-state="open"] {
  color: #1f4d78 !important;
  background-color: rgba(31, 77, 120, 0.08) !important;
  border-color: rgba(31, 77, 120, 0.28) !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%231f4d78' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
}

:root[data-theme="light"] .todo-detail-chips select.state-select.state-select-progress,
:root[data-theme="light"] .todo-detail-chips select.state-select[data-state="progress"],
:root[data-theme="light"] select.state-select.todo-detail-inline-state-select.state-select-progress,
:root[data-theme="light"] select.state-select.todo-detail-inline-state-select[data-state="progress"] {
  color: #854F0B !important;
  background-color: rgba(133, 79, 11, 0.08) !important;
  border-color: rgba(133, 79, 11, 0.30) !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23854F0B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
}

:root[data-theme="light"] .todo-detail-chips select.state-select.state-select-done,
:root[data-theme="light"] .todo-detail-chips select.state-select[data-state="done"],
:root[data-theme="light"] select.state-select.todo-detail-inline-state-select.state-select-done,
:root[data-theme="light"] select.state-select.todo-detail-inline-state-select[data-state="done"] {
  color: #059669 !important;
  background-color: rgba(5, 150, 105, 0.08) !important;
  border-color: rgba(5, 150, 105, 0.30) !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23059669' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
}

:root[data-theme="light"] .todo-detail-chips select.state-select.state-select-blocked,
:root[data-theme="light"] .todo-detail-chips select.state-select[data-state="blocked"],
:root[data-theme="light"] select.state-select.todo-detail-inline-state-select.state-select-blocked,
:root[data-theme="light"] select.state-select.todo-detail-inline-state-select[data-state="blocked"] {
  color: #e11d48 !important;
  background-color: rgba(225, 29, 72, 0.08) !important;
  border-color: rgba(225, 29, 72, 0.32) !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23e11d48' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
}

.todo-detail-chips .chip-time {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

/* Submit Deadline Chip (Green capsule pill) */
.chip.chip-submit,
.chip.custom.chip-submit,
.chip-submit,
.todo-detail-chips .chip-submit {
  background: linear-gradient(180deg, #ECFDF5 0%, #D1FAE5 100%) !important;
  border: 1px solid rgba(5, 150, 105, 0.40) !important;
  color: #047857 !important;
  box-shadow: 0 1px 2px rgba(5, 150, 105, 0.12), inset 0 1px 0 #FFFFFF !important;
  font-weight: 700 !important;
}

:root[data-theme="dark"] .chip.chip-submit,
:root[data-theme="dark"] .chip.custom.chip-submit,
:root[data-theme="dark"] .chip-submit,
:root[data-theme="dark"] .todo-detail-chips .chip-submit,
:root:not([data-theme="light"]) .chip.chip-submit,
:root:not([data-theme="light"]) .chip.custom.chip-submit,
:root:not([data-theme="light"]) .chip-submit,
:root:not([data-theme="light"]) .todo-detail-chips .chip-submit {
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.22) 0%, rgba(5, 150, 105, 0.28) 100%) !important;
  border-color: rgba(52, 211, 153, 0.45) !important;
  color: #34D399 !important;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.60), 0 4px 12px rgba(16, 185, 129, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.20) !important;
}

.todo-detail-line {
  display: flex !important;
  gap: 10px !important;
  align-items: baseline !important;
  font-size: 13px !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.todo-detail-label {
  flex: none !important;
  width: 130px !important;
  min-width: 130px !important;
  max-width: 130px !important;
  color: var(--text-secondary) !important;
  font-size: 11px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.todo-detail-value {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  color: var(--ink) !important;
  overflow: hidden !important;
}
.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 {
  display: block;
  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;
}
.dashboard-todo-title * {
  white-space: nowrap;
}
.dashboard-todo-title .todo-title-link,
.dashboard-todo-title a {
  display: inline;
  white-space: nowrap;
  text-decoration: underline;
}
.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: var(--blueprint);
  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: var(--grad-primary) !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(--sh-3d-card);
  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) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 6px !important;
  padding: 4px 10px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  cursor: pointer;
  box-shadow: var(--sh-3d-btn-primary) !important;
  transition: all 0.15s ease;
}
.discord-sidebar-new-btn:hover {
  background: var(--brand-orange) !important;
  box-shadow: var(--sh-3d-btn-hover) !important;
  transform: translateY(-1px);
}
.discord-sidebar-new-btn:active {
  transform: translateY(1px);
  box-shadow: var(--sh-3d-btn-active) !important;
}
.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;
  box-shadow: var(--sh-3d-sunken) !important;
  transition: box-shadow var(--t-fast), border-color var(--t-fast);
}
.discord-sidebar-search:focus {
  box-shadow: var(--sh-3d-sunken-focus) !important;
  border-color: var(--blueprint) !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), var(--sh-3d-bevel);
}

.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(--brand-orange);
}
.discord-channel-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.discord-channel-badge {
  background: var(--brand-orange);
  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;
  box-shadow: var(--sh-3d-badge);
}
.discord-tab-badge {
  background: var(--brand-orange, #f97316);
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 9999px;
  line-height: 14px;
  margin-left: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(249, 115, 22, 0.4);
  animation: badgePopIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes badgePopIn {
  0% { transform: scale(0.5); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.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(--sh-3d-card) !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(--sh-3d-card-hover) !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: var(--grad-primary) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 8px !important;
  box-shadow: var(--sh-3d-btn-primary) !important;
  transition: all 0.16s ease !important;
}
.group-card-discord .group-chat-open-btn:hover {
  background: linear-gradient(135deg, #255b99 0%, #184272 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--sh-3d-btn-hover) !important;
}
.group-card-discord .group-chat-open-btn:active {
  transform: translateY(1px) !important;
  box-shadow: var(--sh-3d-btn-active) !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(--sh-3d-card) !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;
  box-shadow: var(--sh-3d-btn) !important;
  transition: all 0.15s ease !important;
}
.full-page-chat-back-btn:hover {
  background: var(--blueprint) !important;
  color: #FFFFFF !important;
  border-color: var(--blueprint) !important;
  transform: translateX(-2px) !important;
  box-shadow: var(--sh-3d-btn-hover) !important;
}
.full-page-chat-back-btn:active {
  transform: translateY(1px) !important;
  box-shadow: var(--sh-3d-btn-active) !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;
}

/* Channel Header Members Toggle & Dropdown */
.channel-members-toggle-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  cursor: pointer !important;
  padding: 3px 10px !important;
  background: var(--discord-input-bg, rgba(255, 255, 255, 0.05)) !important;
  color: var(--text-secondary, #94a3b8) !important;
  border: 1px solid var(--rule, rgba(255, 255, 255, 0.1)) !important;
  border-radius: 9999px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  transition: all 0.15s ease !important;
  user-select: none !important;
}
.channel-members-toggle-btn:hover {
  background: rgba(96, 165, 250, 0.12) !important;
  border-color: rgba(96, 165, 250, 0.35) !important;
  color: var(--primary, #60a5fa) !important;
}
.channel-members-toggle-btn.is-open {
  background: rgba(96, 165, 250, 0.18) !important;
  border-color: var(--primary, #60a5fa) !important;
  color: var(--primary, #60a5fa) !important;
  box-shadow: 0 0 8px rgba(96, 165, 250, 0.25) !important;
}
.channel-members-toggle-btn .dept-card-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: transparent;
  border: none;
  color: inherit;
  transition: transform 0.2s ease;
}
.channel-members-toggle-btn.is-open .dept-card-chevron {
  color: var(--primary, #60a5fa);
}

.channel-members-dropdown-wrapper {
  background: var(--card-bg, rgba(17, 27, 46, 0.95));
  border: 1px solid var(--rule-strong, rgba(255, 255, 255, 0.12));
  border-radius: var(--r2, 10px);
  padding: 12px 14px;
  margin-top: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  animation: slideDownMembers 0.18s ease-out forwards;
}
@keyframes slideDownMembers {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.channel-members-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule, rgba(255, 255, 255, 0.08));
}

.channel-members-search {
  background: var(--discord-input-bg, rgba(255, 255, 255, 0.06)) !important;
  border: 1px solid var(--rule, rgba(255, 255, 255, 0.1)) !important;
  border-radius: 6px !important;
  padding: 4px 10px !important;
  font-size: 12px !important;
  color: var(--ink, #fff) !important;
  outline: none !important;
  width: 100% !important;
  max-width: 240px !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
.channel-members-search:focus {
  border-color: var(--primary, #60a5fa) !important;
  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.2) !important;
}

.channel-member-row {
  transition: background 0.12s ease, border-color 0.12s ease;
}
.channel-member-row:hover {
  background: var(--card-bg-alt, rgba(255, 255, 255, 0.06));
}
.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: var(--sh-3d-floating) !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: var(--sh-3d-sunken) !important;
}
.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;
  box-shadow: var(--sh-3d-btn) !important;
  transition: all 0.15s ease;
}
.full-page-chat-input-bar .mention-btn-trigger:hover {
  background: var(--blueprint) !important;
  color: #FFFFFF !important;
  transform: translateY(-1px);
  box-shadow: var(--sh-3d-btn-hover) !important;
}
.full-page-chat-input-bar .mention-btn-trigger:active {
  transform: translateY(1px);
  box-shadow: var(--sh-3d-btn-active) !important;
}
.full-page-chat-input-bar .btn.primary {
  background: linear-gradient(135deg, #FF6F57 0%, #EC6047 55%, #D84B32 100%) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  padding: 6px 16px !important;
  border: 1px solid rgba(255, 155, 133, 0.45) !important;
  box-shadow: var(--sh-3d-btn-primary) !important;
  transition: all 0.15s ease !important;
}
.full-page-chat-input-bar .btn.primary:hover {
  background: linear-gradient(135deg, #FF8069 0%, #FF6F57 55%, #E04D33 100%) !important;
  box-shadow: var(--sh-3d-btn-hover) !important;
  transform: translateY(-1px);
}
.full-page-chat-input-bar .btn.primary:active {
  transform: translateY(1px);
  box-shadow: var(--sh-3d-btn-active) !important;
}
.group-msg-item {
  background: transparent !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 4px 10px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  max-width: 82% !important;
  position: relative !important;
  transform: translateZ(0);
  animation: msgPopIn 0.16s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transform-origin: bottom center;
}
@keyframes msgPopIn {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.group-msg-item:hover {
  background: transparent !important;
  box-shadow: none !important;
}

/* Incoming messages (Colleagues) — Discord-style: avatar left, content right */
.group-msg-item.is-other {
  align-self: flex-start !important;
  align-items: flex-start !important;
  flex-direction: row !important;  /* row: avatar | content */
  gap: 10px !important;
  max-width: 82% !important;
}
/* Avatar column — fixed 38px, stays top-aligned */
.group-msg-avatar-col {
  flex-shrink: 0;
  width: 38px;
  display: flex;
  align-items: flex-start;
  padding-top: 2px;
}
/* Content column — name+time header + bubble + meta */
.group-msg-content-col {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

.group-msg-item.is-other .group-msg-bubble {
  background: var(--card-bg-alt, #1e293b);
  border: 1px solid var(--rule, rgba(255, 255, 255, 0.08));
  border-radius: 18px 18px 18px 4px;
  padding: 8px 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  color: var(--ink);
  position: relative;
  display: inline-block;
  word-break: break-word;
}
[data-theme="light"] .group-msg-item.is-other .group-msg-bubble {
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: #0f172a;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* Outgoing messages (Logged-in user) — Right-aligned vibrant gradient bubble */
.group-msg-item.is-me {
  align-self: flex-end !important;
  align-items: flex-end !important;
}
.group-msg-item.is-me .group-msg-bubble {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
  color: #ffffff !important;
  border-radius: 18px 18px 4px 18px !important;
  padding: 8px 14px !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.28) !important;
  border: none !important;
  position: relative;
  display: inline-block;
  word-break: break-word;
}
.group-msg-item.is-me .group-msg-text {
  color: #ffffff !important;
}
.group-msg-item.is-me .group-msg-text a {
  color: #dbeafe !important;
  text-decoration: underline !important;
  font-weight: 500 !important;
}
.group-msg-item.is-me .group-msg-head {
  display: none !important; /* Hide author name for own messages like Messenger */
}

/* Message Meta & Status Indicator */
.group-msg-meta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  margin-top: 3px;
  opacity: 0.75;
  color: var(--text-secondary);
}
.group-msg-item.is-me .group-msg-meta {
  justify-content: flex-end;
}
.msg-status-tick {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  color: #3b82f6;
  margin-left: 2px;
}
.msg-status-tick.sending {
  opacity: 0.6;
  animation: pulseTick 1s infinite;
}
@keyframes pulseTick {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

/* Floating tool buttons - Only shows when SMS/message is clicked */
.group-msg-hover-tools,
.msg-action-toolbar {
  position: absolute;
  top: -10px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--card-bg, #111b2e);
  border: 1px solid var(--rule, rgba(255, 255, 255, 0.16));
  border-radius: 12px;
  padding: 3px 7px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  user-select: none;

  /* Default hidden state for smooth transitions */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.2s ease;
}

[data-theme="light"] .group-msg-hover-tools,
[data-theme="light"] .msg-action-toolbar {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14), 0 2px 6px rgba(0, 0, 0, 0.08);
}

.group-msg-item.is-me .group-msg-hover-tools,
.group-msg-item.is-me .msg-action-toolbar {
  right: 12px;
  transform: translateY(6px) scale(0.92);
  transform-origin: bottom right;
}

.group-msg-item.is-other .group-msg-hover-tools,
.group-msg-item.is-other .msg-action-toolbar {
  left: 12px;
  transform: translateY(6px) scale(0.92);
  transform-origin: bottom left;
}

/* Show on Mouse Hover (Cursor) OR Active Click/Touch */
.group-msg-item:hover .group-msg-hover-tools,
.group-msg-item:hover .msg-action-toolbar,
.group-msg-item.active-toolbar .group-msg-hover-tools,
.group-msg-item.active-toolbar .msg-action-toolbar {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(-100%) scale(1);
}

/* Messenger-Grade Action Popover & Quick Reactions */
.messenger-trigger-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  font-weight: 600 !important;
  font-size: 11.5px !important;
  color: var(--ink, #f1f5f9) !important;
  border-radius: 12px !important;
}
.messenger-action-popover {
  position: absolute;
  z-index: 100;
  min-width: 220px;
  background: var(--card-bg, #111b2e);
  border: 1px solid var(--rule, rgba(255, 255, 255, 0.15));
  border-radius: 16px;
  padding: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(12px);
  animation: messengerPopIn 0.18s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
[data-theme="light"] .messenger-action-popover {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
}
.messenger-action-popover.is-me {
  right: 6px;
  top: -8px;
  transform: translateY(-100%);
  transform-origin: bottom right;
}
.messenger-action-popover.is-other {
  left: 6px;
  top: -8px;
  transform: translateY(-100%);
  transform-origin: bottom left;
}
@keyframes messengerPopIn {
  from {
    opacity: 0;
    transform: translateY(-100%) scale(0.92);
  }
  to {
    opacity: 1;
    transform: translateY(-100%) scale(1);
  }
}
.messenger-reactions-row {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 4px;
  padding: 4px 6px 8px;
  border-bottom: 1px solid var(--rule, rgba(255, 255, 255, 0.1));
}
[data-theme="light"] .messenger-reactions-row {
  border-color: #f1f5f9;
}
.messenger-rx-btn {
  background: transparent;
  border: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.15s;
}
.messenger-rx-btn:hover {
  transform: scale(1.35) translateY(-3px);
  background: rgba(255, 255, 255, 0.12);
}
[data-theme="light"] .messenger-rx-btn:hover {
  background: rgba(0, 0, 0, 0.06);
}
.messenger-rx-btn:active {
  transform: scale(1.1);
}
.messenger-actions-menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 6px;
}
.messenger-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink, #f1f5f9);
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease, transform 0.1s;
}
[data-theme="light"] .messenger-menu-item {
  color: #1e293b;
}
.messenger-menu-item:hover {
  background: var(--paper, rgba(255, 255, 255, 0.08));
}
[data-theme="light"] .messenger-menu-item:hover {
  background: #f8fafc;
}
.messenger-menu-item.danger {
  color: #ef4444;
}
.messenger-menu-item.danger:hover {
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
}

/* Compact Bubble Reaction Badge Strip */
.msg-reactions-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.group-msg-item.is-me .msg-reactions-strip {
  justify-content: flex-end;
}
.group-msg-item.is-other .msg-reactions-strip {
  justify-content: flex-start;
}
.msg-rx-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 12px;
  font-size: 11px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.12);
  cursor: pointer;
  color: var(--ink, #f1f5f9);
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.15s ease, border-color 0.15s ease;
  animation: rxPillPop 0.18s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes rxPillPop {
  from {
    opacity: 0;
    transform: scale(0.7);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
[data-theme="light"] .msg-rx-pill {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #1e293b;
}
.msg-rx-pill.active {
  background: rgba(59, 130, 246, 0.2);
  border-color: #3b82f6;
  color: #60a5fa;
  font-weight: 600;
}
.msg-rx-pill:hover {
  transform: scale(1.05);
}

/* Horizontal Message Action Toolbar Button Styles */
.msg-toolbar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  color: var(--ink, #f1f5f9);
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.12s ease;
}
.msg-toolbar-btn:hover {
  transform: scale(1.22);
  background: rgba(255, 255, 255, 0.14);
}
.msg-toolbar-icon.monochrome {
  filter: grayscale(100%) opacity(0.8);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: filter 0.15s ease, transform 0.15s ease;
}
.msg-toolbar-btn:hover .msg-toolbar-icon.monochrome {
  filter: grayscale(0%) opacity(1);
}
.dots-icon {
  font-weight: 800;
  letter-spacing: 1.5px;
  font-size: 13px;
  color: var(--ink, #f1f5f9);
}
[data-theme="light"] .msg-toolbar-btn:hover {
  background: rgba(0, 0, 0, 0.08);
}
.msg-toolbar-btn:active {
  transform: scale(0.95);
}
.msg-toolbar-divider {
  width: 1px;
  height: 16px;
  background: var(--rule, rgba(255, 255, 255, 0.2));
  margin: 0 3px;
}
[data-theme="light"] .msg-toolbar-divider {
  background: #cbd5e1;
}
.msg-toolbar-popover {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 6px;
  z-index: 100;
  background: var(--card-bg, #161b22);
  border: 1px solid var(--rule, rgba(255, 255, 255, 0.16));
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(12px);
  animation: messengerPopIn 0.15s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
[data-theme="light"] .msg-toolbar-popover {
  background: #ffffff;
  border-color: #cbd5e1;
}
.msg-toolbar-more-menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 130px;
}

/* Floating "New Messages" Jump Pill */
.chat-new-msg-pill {
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  background: #2563eb;
  color: #ffffff !important;
  padding: 7px 16px;
  border-radius: 24px;
  font-size: 12.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.4), 0 2px 6px rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  animation: pillBounce 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}
.chat-new-msg-pill:hover {
  transform: translateX(-50%) translateY(-2px);
  background: #1d4ed8;
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.5);
}
@keyframes pillBounce {
  from { opacity: 0; transform: translateX(-50%) translateY(12px) scale(0.94); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.group-msg-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-secondary) !important;
  margin-bottom: 2px;
  cursor: pointer;
  flex-wrap: nowrap;
}
.group-msg-head .author-name {
  color: var(--ink) !important;
  font-weight: 700 !important;
  font-size: 13px;
  white-space: nowrap;
}
.group-msg-head strong,
.group-msg-head .person,
.group-msg-author-info {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  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;
}
/* Time label shown inline next to sender name in header row */
.msg-time-tag {
  font-size: 10.5px;
  font-weight: 400;
  color: var(--text-secondary);
  opacity: 0.75;
  white-space: nowrap;
  flex-shrink: 0;
}
.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: var(--blueprint) !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: var(--sh-3d-card);
}
.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;
  box-shadow: var(--sh-3d-bevel);
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.group-msg-poll-opt:hover {
  transform: translateY(-1px);
  box-shadow: var(--sh-3d-btn-hover);
}
.group-msg-poll-opt.voted {
  border-color: var(--blueprint);
  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;
  box-shadow: var(--sh-3d-btn);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.group-msg-poll-opt-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--sh-3d-btn-hover);
}
.group-msg-poll-opt-btn:active {
  transform: translateY(1px);
  box-shadow: var(--sh-3d-btn-active);
}
.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;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 2px 5px rgba(0, 0, 0, 0.18);
}
.tint-blueprint {
  background: var(--grad-primary);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 2px 6px rgba(24, 66, 114, 0.35);
}
.tint-brass {
  background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 2px 6px rgba(217, 119, 6, 0.35);
}
.tint-success {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 2px 6px rgba(5, 150, 105, 0.35);
}
.tint-signal {
  background: linear-gradient(135deg, #F43F5E 0%, #E11D48 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 2px 6px rgba(225, 29, 72, 0.35);
}
.tint-slate {
  background: linear-gradient(135deg, #64748B 0%, #475569 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 2px 6px rgba(100, 116, 139, 0.35);
}

.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(--sh-3d-modal);
  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(--sh-3d-modal);
  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: 56px;
  height: 56px;
  border-radius: 0;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  padding: 0;
  overflow: visible;
}

.portal-logo-icon img,
.portal-logo-icon .portal-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.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: var(--grad-primary) !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: 1;
  margin-top: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.developer-login-badge {
  font-size: 12.5px;
  padding: 4px 12px;
}
.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: var(--blueprint);
  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, profile portal & client hero banner) --------------
   Harmonious Warm Translucent Orange Glass: Base default is Day Mode (Light theme),
   and Night Mode (Dark theme) is applied via @media (prefers-color-scheme: dark) and :root[data-theme="dark"].
   ------------------------------------------------------------------------- */
/* Base default: DAY MODE (Light Theme) */
.user-profile-banner {
  background: var(--banner-orange-bg, linear-gradient(135deg, #FFF0EB 0%, #FFE4DC 100%)) !important;
  border: 1px solid var(--banner-orange-border, rgba(236, 96, 71, 0.35)) !important;
  border-radius: var(--r2, 12px);
  padding: 14px 18px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  cursor: pointer;
  box-shadow: 0 4px 16px -2px rgba(236, 96, 71, 0.20), 0 10px 28px -6px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast), background var(--t-fast);
  position: relative;
  overflow: hidden;
}
.user-profile-banner:hover {
  background: linear-gradient(135deg, #FFE8E0 0%, #FFDDD1 100%) !important;
  border-color: #EC6047 !important;
  box-shadow: 0 8px 26px -2px rgba(236, 96, 71, 0.32), 0 16px 36px -8px rgba(15, 23, 42, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  transform: translateY(-2px);
}
.user-profile-banner:active {
  transform: translateY(0);
}
.user-profile-banner.is-hidden {
  display: none !important;
}

/* Night Mode Container Overrides */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .user-profile-banner {
    background: var(--banner-orange-bg, linear-gradient(135deg, rgba(234, 99, 64, 0.33) 0%, rgba(234, 99, 64, 0.29) 100%)) !important;
    border: 1px solid var(--banner-orange-border, rgba(236, 96, 71, 0.45)) !important;
    box-shadow: var(--banner-orange-shadow, 0 4px 20px -2px rgba(234, 99, 64, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.10)) !important;
  }
  :root:not([data-theme="light"]) .user-profile-banner:hover {
    background: linear-gradient(135deg, rgba(234, 99, 64, 0.42) 0%, rgba(234, 99, 64, 0.38) 100%) !important;
    border-color: #FF735C !important;
    box-shadow: 0 6px 24px -2px rgba(236, 96, 71, 0.32), 0 2px 8px rgba(0, 0, 0, 0.20) !important;
  }
}

:root[data-theme="dark"] .user-profile-banner {
  background: var(--banner-orange-bg, linear-gradient(135deg, rgba(234, 99, 64, 0.33) 0%, rgba(234, 99, 64, 0.29) 100%)) !important;
  border: 1px solid var(--banner-orange-border, rgba(236, 96, 71, 0.45)) !important;
  box-shadow: var(--banner-orange-shadow, 0 4px 20px -2px rgba(234, 99, 64, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.10)) !important;
}
:root[data-theme="dark"] .user-profile-banner:hover {
  background: linear-gradient(135deg, rgba(234, 99, 64, 0.42) 0%, rgba(234, 99, 64, 0.38) 100%) !important;
  border-color: #FF735C !important;
  box-shadow: 0 6px 24px -2px rgba(236, 96, 71, 0.32), 0 2px 8px rgba(0, 0, 0, 0.20) !important;
}
.user-profile-banner-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  position: relative;
  z-index: 2;
}
.user-profile-avatar-wrap {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  background: linear-gradient(135deg, #FF6F57 0%, #EC6047 100%);
  border: 2px solid rgba(255, 255, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 2px 8px rgba(236, 96, 71, 0.35);
}
.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: 800;
  letter-spacing: 0.02em;
  color: #FFFFFF !important;
  background: transparent !important;
  border: none !important;
  text-transform: uppercase;
  border-radius: inherit;
}
.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;
}
/* Base default: DAY MODE (Light Theme) Text & Badges */
.user-profile-name,
.user-profile-banner h2.user-profile-name {
  font-size: 1.15rem;
  font-weight: 700;
  color: #0F172A !important;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0;
  padding: 0;
  text-shadow: none !important;
}
.user-profile-badge {
  background: rgba(236, 96, 71, 0.14) !important;
  border: 1px solid rgba(236, 96, 71, 0.35) !important;
  color: #C2410C !important;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  letter-spacing: 0.05em;
  line-height: 1.4;
}
.user-profile-role-line {
  font-size: 12.5px;
  font-weight: 600;
  color: #475569 !important;
  line-height: 1.3;
  margin-top: 2px;
}
.user-profile-meta-line {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: #64748B !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;
  stroke: #EA6340 !important;
}
.user-profile-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}
.user-profile-status-badge {
  background: rgba(236, 96, 71, 0.10) !important;
  border: 1px solid rgba(236, 96, 71, 0.28) !important;
  border-radius: var(--r1);
  padding: 5px 10px;
  text-align: right;
  box-shadow: none !important;
}
.user-profile-status-label {
  font-size: 9px;
  font-weight: 700;
  color: #64748B !important;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-bottom: 1px;
}
.user-profile-status-val {
  font-size: 11px;
  font-weight: 700;
  color: #0F172A !important;
  letter-spacing: 0.2px;
}

/* Base default: DAY MODE (Light Theme) Action Buttons (Matching Quick Punch vibrant coral gradient) */
.user-profile-edit-hint,
.user-profile-action-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  height: 32px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  background: #EC6047 !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  z-index: 2 !important;
  box-shadow: none !important;
  transition: background var(--t-fast), opacity var(--t-fast) !important;
  white-space: nowrap !important;
}
.user-profile-edit-hint .icon,
.user-profile-action-btn .icon {
  width: 13px !important;
  height: 13px !important;
  stroke: #FFFFFF !important;
}
.user-profile-action-btn:hover,
.user-profile-banner:hover .user-profile-edit-hint,
.user-profile-edit-hint:hover {
  background: #FF6F57 !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
}
.user-profile-action-btn:hover .icon,
.user-profile-banner:hover .user-profile-edit-hint:hover .icon,
.user-profile-edit-hint:hover .icon {
  stroke: #FFFFFF !important;
}
.user-profile-action-btn:active,
.user-profile-edit-hint:active {
  background: #D84B32 !important;
  opacity: 0.9;
  box-shadow: none !important;
}

.user-profile-banner .btn.secondary {
  background: #FFFFFF !important;
  border: 1px solid rgba(236, 96, 71, 0.45) !important;
  color: #9A3412 !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 0 #FDBA74, 0 4px 10px rgba(0, 0, 0, 0.08), inset 0 1px 0 #FFFFFF !important;
  transition: all var(--t-instant) !important;
}
.user-profile-banner .btn.secondary .icon {
  stroke: #C2410C !important;
}
.user-profile-banner .btn.secondary:hover {
  background: #FFF5F2 !important;
  border-color: #EC6047 !important;
  color: #7C2D12 !important;
  box-shadow: 0 3px 0 #FDBA74, 0 6px 14px rgba(236, 96, 71, 0.20), inset 0 1px 0 #FFFFFF !important;
  transform: translateY(-1px) !important;
}
.user-profile-banner .btn.secondary:hover .icon {
  stroke: #7C2D12 !important;
}
.user-profile-banner .btn.secondary:active {
  transform: translateY(2px) !important;
  box-shadow: 0 0 0 transparent, inset 0 2px 4px rgba(0, 0, 0, 0.15) !important;
}

/* =========================================================================
   NIGHT MODE OVERRIDES (Dark Theme - applies automatically when OS is dark or data-theme="dark")
   ========================================================================= */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .user-profile-name,
  :root:not([data-theme="light"]) .user-profile-banner h2.user-profile-name {
    color: #FFFFFF !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.20) !important;
  }
  :root:not([data-theme="light"]) .user-profile-badge {
    background: rgba(236, 96, 71, 0.22) !important;
    border: 1px solid rgba(236, 96, 71, 0.45) !important;
    color: #FFFFFF !important;
  }
  :root:not([data-theme="light"]) .user-profile-role-line {
    color: rgba(255, 215, 205, 0.90) !important;
  }
  :root:not([data-theme="light"]) .user-profile-meta-line {
    color: rgba(255, 195, 180, 0.85) !important;
  }
  :root:not([data-theme="light"]) .user-profile-meta-line .icon {
    stroke: #FF735C !important;
  }
  :root:not([data-theme="light"]) .user-profile-status-badge {
    background: rgba(236, 96, 71, 0.16) !important;
    border: 1px solid rgba(236, 96, 71, 0.38) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.20) !important;
  }
  :root:not([data-theme="light"]) .user-profile-status-label {
    color: rgba(255, 195, 180, 0.85) !important;
  }
  :root:not([data-theme="light"]) .user-profile-status-val {
    color: #FFFFFF !important;
  }
  :root:not([data-theme="light"]) .user-profile-edit-hint,
  :root:not([data-theme="light"]) .user-profile-action-btn {
    color: #FFFFFF !important;
    background: #EC6047 !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }
  :root:not([data-theme="light"]) .user-profile-edit-hint .icon,
  :root:not([data-theme="light"]) .user-profile-action-btn .icon {
    stroke: #FFFFFF !important;
  }
  :root:not([data-theme="light"]) .user-profile-action-btn:hover,
  :root:not([data-theme="light"]) .user-profile-banner:hover .user-profile-edit-hint,
  :root:not([data-theme="light"]) .user-profile-edit-hint:hover {
    background: #FF6F57 !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
    color: #FFFFFF !important;
    box-shadow: none !important;
  }
  :root:not([data-theme="light"]) .user-profile-action-btn:hover .icon,
  :root:not([data-theme="light"]) .user-profile-banner:hover .user-profile-edit-hint:hover .icon,
  :root:not([data-theme="light"]) .user-profile-edit-hint:hover .icon {
    stroke: #FFFFFF !important;
  }
  :root:not([data-theme="light"]) .user-profile-banner .btn.secondary {
    background: rgba(236, 96, 71, 0.24) !important;
    border: 1px solid rgba(236, 96, 71, 0.50) !important;
    color: #FFFFFF !important;
  }
  :root:not([data-theme="light"]) .user-profile-banner .btn.secondary .icon {
    stroke: #FFFFFF !important;
  }
  :root:not([data-theme="light"]) .user-profile-banner .btn.secondary:hover {
    background: rgba(236, 96, 71, 0.40) !important;
    border-color: #FF735C !important;
    color: #FFFFFF !important;
  }
  :root:not([data-theme="light"]) .user-profile-banner .btn.secondary:hover .icon {
    stroke: #FFFFFF !important;
  }
}

:root[data-theme="dark"] .user-profile-name,
:root[data-theme="dark"] .user-profile-banner h2.user-profile-name {
  color: #FFFFFF !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.20) !important;
}
:root[data-theme="dark"] .user-profile-badge {
  background: rgba(236, 96, 71, 0.22) !important;
  border: 1px solid rgba(236, 96, 71, 0.45) !important;
  color: #FFFFFF !important;
}
:root[data-theme="dark"] .user-profile-role-line {
  color: rgba(255, 215, 205, 0.90) !important;
}
:root[data-theme="dark"] .user-profile-meta-line {
  color: rgba(255, 195, 180, 0.85) !important;
}
:root[data-theme="dark"] .user-profile-meta-line .icon {
  stroke: #FF735C !important;
}
:root[data-theme="dark"] .user-profile-status-badge {
  background: rgba(236, 96, 71, 0.16) !important;
  border: 1px solid rgba(236, 96, 71, 0.38) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.20) !important;
}
:root[data-theme="dark"] .user-profile-status-label {
  color: rgba(255, 195, 180, 0.85) !important;
}
:root[data-theme="dark"] .user-profile-status-val {
  color: #FFFFFF !important;
}
:root[data-theme="dark"] .user-profile-edit-hint,
:root[data-theme="dark"] .user-profile-action-btn {
  color: #FFFFFF !important;
  background: #EC6047 !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
:root[data-theme="dark"] .user-profile-edit-hint .icon,
:root[data-theme="dark"] .user-profile-action-btn .icon {
  stroke: #FFFFFF !important;
}
:root[data-theme="dark"] .user-profile-action-btn:hover,
:root[data-theme="dark"] .user-profile-banner:hover .user-profile-edit-hint,
:root[data-theme="dark"] .user-profile-edit-hint:hover {
  background: #FF6F57 !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
}
:root[data-theme="dark"] .user-profile-action-btn:hover .icon,
:root[data-theme="dark"] .user-profile-banner:hover .user-profile-edit-hint:hover .icon,
:root[data-theme="dark"] .user-profile-edit-hint:hover .icon {
  stroke: #FFFFFF !important;
}

:root[data-theme="dark"] .user-profile-banner .btn.secondary {
  background: rgba(236, 96, 71, 0.24) !important;
  border: 1px solid rgba(236, 96, 71, 0.50) !important;
  color: #FFFFFF !important;
}
:root[data-theme="dark"] .user-profile-banner .btn.secondary .icon {
  stroke: #FFFFFF !important;
}
:root[data-theme="dark"] .user-profile-banner .btn.secondary:hover {
  background: rgba(236, 96, 71, 0.40) !important;
  border-color: #FF735C !important;
  color: #FFFFFF !important;
}
:root[data-theme="dark"] .user-profile-banner .btn.secondary:hover .icon {
  stroke: #FFFFFF !important;
}

/* Primary CTA button inside banner */
.user-profile-banner .btn.primary,
.user-profile-banner #dashboard-attendance-punch-btn:not(.completed-punch) {
  background: #EC6047 !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: none !important;
  font-weight: 700 !important;
  transition: background var(--t-fast), opacity var(--t-fast) !important;
}
.user-profile-banner .btn.primary .icon,
.user-profile-banner #dashboard-attendance-punch-btn:not(.completed-punch) .icon {
  stroke: #FFFFFF !important;
}
.user-profile-banner .btn.primary:hover,
.user-profile-banner #dashboard-attendance-punch-btn:not(.completed-punch):hover {
  background: #FF6F57 !important;
  box-shadow: none !important;
}
.user-profile-banner .btn.primary:active,
.user-profile-banner #dashboard-attendance-punch-btn:not(.completed-punch):active {
  background: #D84B32 !important;
  opacity: 0.9;
  box-shadow: none !important;
}
.user-profile-banner .btn.primary:hover .icon,
.user-profile-banner #dashboard-attendance-punch-btn:not(.completed-punch):hover .icon {
  stroke: #FFFFFF !important;
}

.user-profile-banner #dashboard-attendance-punch-btn.completed-punch,
.btn.completed-punch {
  background: linear-gradient(180deg, #EFF6FF 0%, #DBEAFE 100%) !important;
  border: 1px solid #93C5FD !important;
  color: #1E40AF !important;
  opacity: 1 !important;
  cursor: default !important;
  box-shadow: 0 2px 0 #93C5FD, 0 4px 10px rgba(30, 64, 175, 0.12), inset 0 1px 0 #FFFFFF !important;
}
.user-profile-banner #dashboard-attendance-punch-btn.completed-punch .icon,
.btn.completed-punch .icon {
  stroke: #1E40AF !important;
  color: #1E40AF !important;
}
.user-profile-banner #dashboard-attendance-punch-btn.completed-punch:hover,
.btn.completed-punch:hover {
  background: #EFF6FF !important;
  border-color: #93C5FD !important;
  color: #1E40AF !important;
}

:root[data-theme="dark"] .user-profile-banner #dashboard-attendance-punch-btn.completed-punch,
:root[data-theme="dark"] .btn.completed-punch,
:root:not([data-theme="light"]) .user-profile-banner #dashboard-attendance-punch-btn.completed-punch,
:root:not([data-theme="light"]) .btn.completed-punch {
  background: rgba(30, 58, 138, 0.45) !important;
  border: 1px solid rgba(147, 197, 253, 0.50) !important;
  color: #BFDBFE !important;
  opacity: 1 !important;
  cursor: default !important;
}
:root[data-theme="dark"] .user-profile-banner #dashboard-attendance-punch-btn.completed-punch .icon,
:root[data-theme="dark"] .btn.completed-punch .icon,
:root:not([data-theme="light"]) .user-profile-banner #dashboard-attendance-punch-btn.completed-punch .icon,
:root:not([data-theme="light"]) .btn.completed-punch .icon {
  stroke: #BFDBFE !important;
  color: #BFDBFE !important;
}
:root[data-theme="dark"] .user-profile-banner #dashboard-attendance-punch-btn.completed-punch:hover,
:root[data-theme="dark"] .btn.completed-punch:hover,
:root:not([data-theme="light"]) .user-profile-banner #dashboard-attendance-punch-btn.completed-punch:hover,
:root:not([data-theme="light"]) .btn.completed-punch:hover {
  background: rgba(30, 58, 138, 0.45) !important;
  border-color: rgba(147, 197, 253, 0.50) !important;
  color: #BFDBFE !important;
}

@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 !important;
  gap: 14px !important;
  align-items: flex-start !important;
  width: 100% !important;
  margin-top: 0 !important;
}

/* ---- Portal Sidebar (Sub-Menus across all portals - fixed like main sidebar, 250px width) ---- */
.portal-sidebar {
  width: 250px !important;
  min-width: 250px !important;
  max-width: 250px !important;
  flex-shrink: 0 !important;
  background: var(--card-bg, #0B132B) !important;
  border: 1px solid var(--rule, rgba(255, 255, 255, 0.08)) !important;
  border-radius: 14px !important;
  padding: 0 0 14px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
  position: fixed !important;
  top: calc(var(--topbar-h, 64px) + 14px) !important;
  left: calc(var(--sidebar-w-expanded, 200px) + 14px) !important;
  max-height: calc(100vh - var(--topbar-h, 64px) - 28px) !important;
  overflow-y: auto !important;
  scrollbar-width: thin !important;
  z-index: 25 !important;
  transition: left 0.22s cubic-bezier(0.16, 1, 0.3, 1), background var(--t), border-color var(--t) !important;
  box-sizing: border-box !important;
}

.app-sidebar.is-collapsed ~ .app-main-content .portal-sidebar,
.app-layout.sidebar-collapsed .portal-sidebar {
  left: calc(var(--sidebar-w-collapsed, 64px) + 14px) !important;
}

.portal-sidebar-brand {
  height: 60px !important;
  min-height: 60px !important;
  max-height: 60px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 16px !important;
  border-bottom: 1px solid var(--rule, rgba(255, 255, 255, 0.08)) !important;
  background: var(--card-bg-alt, rgba(255, 255, 255, 0.02)) !important;
  border-top-left-radius: 13px !important;
  border-top-right-radius: 13px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}
.portal-sidebar-tag {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}
.portal-sidebar-title {
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif) !important;
  font-size: 16px !important;
  font-weight: 750 !important;
  color: var(--ink, #ffffff) !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.portal-sidebar-nav {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  width: 100% !important;
  padding: 12px 10px !important;
  box-sizing: border-box !important;
}

.portal-sidebar .portal-nav-btn,
.portal-nav-btn {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
  width: 100% !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  padding: 0 10px 0 10px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--text-secondary, #94a3b8) !important;
  background: transparent !important;
  border: 1px solid var(--rule, rgba(255, 255, 255, 0.08)) !important;
  box-shadow: none !important;
  cursor: pointer !important;
  text-align: left !important;
  white-space: nowrap !important;
  min-width: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  transition: all 0.15s ease !important;
  position: relative !important;
  margin: 0 !important;
}

.portal-sidebar .portal-nav-btn::before,
.portal-nav-btn::before {
  content: "" !important;
  position: absolute !important;
  inset: 6px auto 6px 0 !important;
  width: 3.5px !important;
  background: var(--slate, #64748b) !important;
  border-radius: 0 2px 2px 0 !important;
  box-shadow: 1px 0 3px rgba(0, 0, 0, 0.15) !important;
  transition: all 0.15s ease !important;
  opacity: 0.85 !important;
}

.portal-sidebar .portal-nav-btn:hover,
.portal-nav-btn:hover {
  transform: translateX(2px) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  box-shadow: none !important;
}

.portal-sidebar .portal-nav-btn.active,
.portal-nav-btn.active {
  background: #18529e !important;
  background: linear-gradient(135deg, #18529e 0%, #1d68bd 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(56, 189, 248, 0.55) !important;
  box-shadow: 0 3px 12px rgba(29, 104, 189, 0.45), 0 0 0 1px rgba(56, 189, 248, 0.35) !important;
  transform: none !important;
}
.portal-sidebar .portal-nav-btn.active:hover,
.portal-nav-btn.active:hover {
  background: linear-gradient(135deg, #1d68bd 0%, #2575cf 100%) !important;
  border-color: rgba(56, 189, 248, 0.8) !important;
  transform: none !important;
}

.portal-sidebar .portal-nav-btn.active::before,
.portal-nav-btn.active::before {
  display: none !important;
  content: none !important;
}
.portal-sidebar .portal-nav-btn.active::after,
.portal-nav-btn.active::after {
  display: none !important;
  content: none !important;
}

.portal-sidebar .portal-nav-icon,
.portal-nav-btn .portal-nav-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.portal-sidebar .portal-nav-icon svg,
.portal-nav-btn .portal-nav-icon svg {
  width: 16px !important;
  height: 16px !important;
  stroke: #94a3b8 !important;
  stroke-width: 2 !important;
  display: block !important;
  transition: stroke 0.15s ease !important;
}

.portal-sidebar .portal-nav-btn:hover .portal-nav-icon svg,
.portal-nav-btn:hover .portal-nav-icon svg,
.portal-sidebar .portal-nav-btn.active .portal-nav-icon svg,
.portal-nav-btn.active .portal-nav-icon svg {
  stroke: #ffffff !important;
}

.portal-sidebar .portal-nav-label,
.portal-nav-btn .portal-nav-label {
  display: inline-block !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.portal-sidebar .portal-nav-badge,
.portal-sidebar .chip.count,
.portal-sidebar .chip.alert,
.portal-sidebar .v.tabular {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 22px !important;
  height: 20px !important;
  padding: 0 7px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #94a3b8 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  transition: all 0.15s ease !important;
}

.portal-sidebar .portal-nav-btn.active .portal-nav-badge,
.portal-sidebar .portal-nav-btn.active .chip.count,
.portal-sidebar .portal-nav-btn.active .chip.alert,
.portal-sidebar .portal-nav-btn.active .v.tabular {
  background: rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
  border: 1px solid transparent !important;
}

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

.portal-sidebar-footer:has(.portal-back-btn),
.portal-sidebar .portal-back-btn,
.portal-back-btn,
.portal-sidebar-footer:empty {
  display: none !important;
}

.portal-sidebar .portal-sidebar-footer .btn {
  width: 100% !important;
  height: 38px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  border-radius: 8px !important;
  background: rgba(236, 96, 71, 0.10) !important;
  border: 1px solid rgba(236, 96, 71, 0.35) !important;
  color: #ffffff !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  transition: all 0.18s ease !important;
  cursor: pointer !important;
}

.portal-sidebar .portal-sidebar-footer .btn:hover {
  background: rgba(236, 96, 71, 0.20) !important;
  border-color: #EC6047 !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}

/* Light theme for all portal sidebars */
:root[data-theme="light"] .portal-sidebar,
[data-theme="light"] .portal-sidebar {
  background: var(--card-bg, #ffffff) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
}
:root[data-theme="light"] .portal-sidebar .portal-sidebar-brand,
[data-theme="light"] .portal-sidebar .portal-sidebar-brand {
  border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}
:root[data-theme="light"] .portal-sidebar .portal-sidebar-tag,
[data-theme="light"] .portal-sidebar .portal-sidebar-tag {
  color: #64748b !important;
}
:root[data-theme="light"] .portal-sidebar .portal-sidebar-title,
[data-theme="light"] .portal-sidebar .portal-sidebar-title {
  color: #0f172a !important;
}
:root[data-theme="light"] .portal-sidebar .portal-nav-btn,
[data-theme="light"] .portal-sidebar .portal-nav-btn {
  color: #334155 !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}
:root[data-theme="light"] .portal-sidebar .portal-nav-btn:hover,
[data-theme="light"] .portal-sidebar .portal-nav-btn:hover {
  background: rgba(0, 0, 0, 0.04) !important;
  color: #0f172a !important;
  border-color: rgba(0, 0, 0, 0.16) !important;
}
:root[data-theme="light"] .portal-sidebar .portal-nav-btn.active,
[data-theme="light"] .portal-sidebar .portal-nav-btn.active {
  background: #0284c7 !important;
  background: linear-gradient(135deg, #0369a1 0%, #0284c7 100%) !important;
  color: #ffffff !important;
  border: 1px solid #0284c7 !important;
  box-shadow: 0 3px 10px rgba(2, 132, 199, 0.35) !important;
}
:root[data-theme="light"] .portal-sidebar .portal-nav-badge,
:root[data-theme="light"] .portal-sidebar .chip.count,
:root[data-theme="light"] .portal-sidebar .chip.alert,
:root[data-theme="light"] .portal-sidebar .v.tabular,
[data-theme="light"] .portal-sidebar .portal-nav-badge,
[data-theme="light"] .portal-sidebar .chip.count,
[data-theme="light"] .portal-sidebar .chip.alert,
[data-theme="light"] .portal-sidebar .v.tabular {
  background: rgba(0, 0, 0, 0.05) !important;
  color: #475569 !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}
:root[data-theme="light"] .portal-sidebar .portal-nav-btn.active .portal-nav-badge,
:root[data-theme="light"] .portal-sidebar .portal-nav-btn.active .chip.count,
:root[data-theme="light"] .portal-sidebar .portal-nav-btn.active .chip.alert,
:root[data-theme="light"] .portal-sidebar .portal-nav-btn.active .v.tabular,
[data-theme="light"] .portal-sidebar .portal-nav-btn.active .portal-nav-badge,
[data-theme="light"] .portal-sidebar .portal-nav-btn.active .chip.count,
[data-theme="light"] .portal-sidebar .portal-nav-btn.active .chip.alert,
[data-theme="light"] .portal-sidebar .portal-nav-btn.active .v.tabular {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}
:root[data-theme="light"] .portal-sidebar .portal-sidebar-footer .btn,
[data-theme="light"] .portal-sidebar .portal-sidebar-footer .btn {
  background: rgba(234, 88, 12, 0.08) !important;
  border-color: rgba(234, 88, 12, 0.30) !important;
  color: #0f172a !important;
}

/* ---- Portal Main Area (paired with fixed 250px portal sidebar) ---- */
.portal-main-area {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  margin-left: 264px !important;
  width: calc(100% - 264px) !important;
  box-sizing: border-box !important;
}

/* ---- Portal & Foundation Main Panel (Unified border, curvature & card background) ---- */
.foundation-main-panel,
.portal-main-panel {
  border: 1px solid var(--rule, rgba(255, 255, 255, 0.08)) !important;
  border-radius: 14px !important;
  background: var(--card-bg, #0B132B) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
  overflow: hidden !important;
  position: relative !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

:root[data-theme="light"] .foundation-main-panel,
:root[data-theme="light"] .portal-main-panel,
[data-theme="light"] .foundation-main-panel,
[data-theme="light"] .portal-main-panel {
  background: var(--card-bg, #ffffff) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
}

.foundation-main-panel .panel-head,
.portal-main-panel .panel-head {
  height: 60px !important;
  min-height: 60px !important;
  max-height: 60px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 20px !important;
  margin: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  border-bottom: 1px solid var(--rule, rgba(255, 255, 255, 0.08)) !important;
  background: var(--card-bg-alt, rgba(255, 255, 255, 0.02)) !important;
  border-top-left-radius: 13px !important;
  border-top-right-radius: 13px !important;
  box-sizing: border-box !important;
}

:root[data-theme="light"] .foundation-main-panel .panel-head,
:root[data-theme="light"] .portal-main-panel .panel-head,
[data-theme="light"] .foundation-main-panel .panel-head,
[data-theme="light"] .portal-main-panel .panel-head {
  border-bottom-color: rgba(0, 0, 0, 0.08) !important;
  background: #f8fafc !important;
}

.foundation-main-panel .panel-head h2,
.foundation-main-panel .page-head-title {
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif) !important;
  font-size: 16px !important;
  font-weight: 750 !important;
  color: var(--ink, #ffffff) !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

:root[data-theme="light"] .foundation-main-panel .panel-head h2,
:root[data-theme="light"] .foundation-main-panel .page-head-title,
[data-theme="light"] .foundation-main-panel .panel-head h2,
[data-theme="light"] .foundation-main-panel .page-head-title {
  color: #0f172a !important;
}

.foundation-main-panel .panel-body {
  padding: 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  box-sizing: border-box !important;
}

.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(--sh-3d-card);
}
.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;
}
/* ---- Dedicated Documentation Links Bar (3 lines, 4 links per line, 12 total) ---- */
.portal-doc-links-bar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--card-bg);
  border: 1px solid var(--rule);
  border-radius: var(--r2);
  padding: 14px 20px;
  box-shadow: var(--sh-3d-card);
  width: 100%;
}
.portal-doc-links-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule);
}
.portal-doc-links-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 7px;
}
.portal-doc-links-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px 12px;
  align-items: center;
}
@media (max-width: 1100px) {
  .portal-doc-links-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .portal-doc-links-grid {
    grid-template-columns: 1fr;
  }
}
/* ---- Documentation Link Pills (capsule style) ---- */
.portal-doc-link-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  padding: 6px 12px;
  border-radius: 999px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  transition: background 0.15s ease, opacity 0.15s ease, transform 0.1s ease;
  text-decoration: none;
}
.portal-doc-link-pill--active {
  background: var(--btn-bg, var(--card-bg));
  border: 1px solid var(--btn-border, rgba(236, 96, 71, 0.28));
  color: var(--btn-text, var(--ink));
  box-shadow: var(--sh-3d-btn);
  cursor: pointer;
}
.portal-doc-link-pill--active:hover {
  background: var(--btn-hover-bg, rgba(236, 96, 71, 0.10));
  border-color: var(--btn-hover-border, var(--brand-orange, #EC6047));
  color: var(--btn-hover-text, var(--brand-orange, #EC6047));
  box-shadow: none;
  transform: translateY(-1px);
}
.portal-doc-link-pill--active:active {
  opacity: 0.85;
  box-shadow: none;
  transform: translateY(0);
}
.portal-doc-link-pill--empty {
  border: 1.5px dashed var(--rule);
  color: var(--text-secondary);
  opacity: 0.55;
  cursor: default;
}
.portal-doc-link-pill--empty[title="Click to add link"] {
  cursor: pointer;
}
.portal-doc-link-pill--empty[title="Click to add link"]:hover {
  opacity: 0.85;
  border-color: var(--text-secondary);
}

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

.portal-cards-col {
  display: flex;
  flex-direction: column;
  gap: var(--s5);
  min-width: 0;
}

.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(--sh-3d-card);
  transition: box-shadow var(--t-fast), border-color var(--t-fast);
  min-width: 0;
  overflow: hidden;
  box-sizing: border-box;
  transform: none !important;
}
.portal-credential-card:hover {
  border-color: var(--rule-strong);
  box-shadow: var(--sh-3d-card-hover);
  transform: none !important;
}

.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: repeat(2, minmax(0, 1fr));
  gap: var(--s4) var(--s5);
  min-width: 0;
}

.portal-info-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  overflow: hidden;
}
.portal-info-label {
  font-size: 11.5px;
  color: var(--text-secondary);
  font-weight: 500;
  line-height: 1.3;
  overflow-wrap: break-word;
  word-break: break-word;
}
.portal-info-val {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
  overflow-wrap: break-word;
  word-break: break-word;
  text-align: left;
}

.portal-emergency-highlight {
  grid-column: 1 / -1;
  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;
  min-width: 0;
  box-sizing: border-box;
}
.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(--sh-3d-card);
  transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}
.portal-stat-card:hover {
  border-color: var(--rule-strong);
  transform: translateY(-2px);
  box-shadow: var(--sh-3d-card-hover);
}
.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: 960px) {
  .portal-cards-2x2 {
    grid-template-columns: 1fr !important;
  }
}

@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% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    position: static !important;
    left: auto !important;
    top: auto !important;
    max-height: none !important;
    overflow-y: visible !important;
  }
  .portal-main-area {
    margin-left: 0 !important;
    width: 100% !important;
  }
  .portal-sidebar-nav {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .portal-nav-btn {
    width: auto;
    flex: 1;
    min-width: 130px;
  }
  .portal-cards-2x2 {
    grid-template-columns: 1fr !important;
  }
  .portal-card-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .portal-card-grid {
    grid-template-columns: 1fr !important;
    gap: var(--s3) !important;
  }
  .portal-credential-card {
    padding: var(--s3) var(--s4) var(--s4) !important;
  }
}

/* ---- 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 !important;
  flex-direction: column !important;
  gap: var(--s4) !important;
  width: 100% !important;
  animation: fadeIn 0.12s ease-out !important;
}
.client-portal-container .portal-layout-container {
  display: flex !important;
  flex-direction: row !important;
  gap: 14px !important;
  align-items: flex-start !important;
  width: 100% !important;
  margin-top: 4px !important;
  position: relative !important;
}
.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, #ec6047);
  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-wysiwyg-editor hr,
.client-details-text-view hr,
.foundation-rule-full-body hr,
.policy-document-canvas hr,
.client-rich-preview hr,
hr.editor-divider {
  width: 100% !important;
  max-width: 100% !important;
  border: none !important;
  height: 3px !important;
  background: #000000 !important;
  background-color: #000000 !important;
  border-radius: 3px !important;
  margin: 18px auto !important;
  display: block !important;
  clear: both !important;
  opacity: 1 !important;
  cursor: pointer !important;
  transition: opacity 0.15s ease !important;
}
.client-wysiwyg-editor hr:hover,
.policy-document-canvas hr:hover,
hr.editor-divider:hover {
  opacity: 0.75 !important;
}
.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, #ec6047);
  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, #ec6047);
  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;
  max-height: 200px;
  height: auto;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
  background: var(--card-bg, #111b2e);
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45), 0 0 12px rgba(37, 99, 235, 0.16);
  z-index: 10005 !important;
  display: flex;
  flex-direction: column;
  padding: 4px;
  width: max-content;
  min-width: 180px;
  max-width: 320px;
  box-sizing: border-box;
  backdrop-filter: blur(12px);
  gap: 2px;
  touch-action: manipulation;
  scrollbar-width: thin;
}

.comments-list-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--s2, 8px);
  width: 100%;
  min-height: 20px;
  contain: layout;
}
.mention-pop-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s ease;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  user-select: none;
}
.mention-pop-item:hover,
.mention-pop-item.active {
  background: var(--tint-strong, rgba(37, 99, 235, 0.22));
}
.mention-pop-item.is-everyone {
  border-bottom: 1px solid var(--rule, rgba(255, 255, 255, 0.08));
  margin-bottom: 2px;
  padding-bottom: 5px;
}
.mention-pop-item .mark-tint,
.mention-pop-item .mark-avatar,
.mention-pop-item .mention-everyone-badge {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  font-size: 8.5px !important;
  border-radius: 5px !important;
  pointer-events: none;
  flex-shrink: 0;
}
.mention-pop-item .mention-everyone-badge .icon {
  width: 12px !important;
  height: 12px !important;
}
.mention-pop-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink, #ffffff);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
}

/* =========================================================================
   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,
.portal-sidebar .portal-nav-label,
.portal-sidebar-nav .portal-nav-label,
.portal-sidebar-nav .k,
.portal-sidebar-nav .stat .k {
  display: block !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.2 !important;
}

.portal-nav-btn .chip.count,
.portal-nav-btn .portal-nav-badge,
.portal-sidebar .chip.count,
.portal-sidebar .portal-nav-badge,
.portal-sidebar .sub-badge,
.portal-sidebar-nav .chip.count,
.portal-sidebar-nav .portal-nav-badge,
.portal-sidebar-nav .sub-badge,
.portal-sidebar-nav .v {
  flex-shrink: 0 !important;
  margin-left: auto !important;
  white-space: nowrap !important;
}

/* ---- 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;
  user-select: text !important;
  -webkit-user-select: text !important;
  cursor: text;
  transform: none !important;
}
.client-details-text-view * {
  user-select: text !important;
  -webkit-user-select: text !important;
}
.client-details-text-view ::selection,
.client-details-text-view::selection {
  background: rgba(59, 130, 246, 0.35);
  color: inherit;
}
.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 > *:first-child,
.client-details-text-view p:first-child,
.client-details-text-view div:first-child,
.client-details-text-view h2:first-child,
.client-details-text-view h3:first-child {
  margin-top: 0 !important;
}
.client-details-text-view p {
  margin: 4px 0 8px;
}
.client-details-text-view p:last-child {
  margin-bottom: 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;
}

/* ---- Collapsible Details & Documentation View ---- */
.client-details-expandable-wrap {
  position: relative;
  width: 100%;
}

.client-details-expandable-wrap.is-collapsed .client-details-text-view,
.client-details-text-view.client-details-collapsed {
  max-height: 245px;
  overflow: hidden;
  position: relative;
}

.client-details-expandable-wrap.is-expanded .client-details-text-view {
  overflow: visible;
}

.client-details-expandable-wrap.is-animating .client-details-text-view {
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.client-details-fade-overlay {
  position: absolute;
  bottom: 24px;
  left: 0;
  right: 0;
  height: 90px;
  background: linear-gradient(180deg, rgba(11, 19, 41, 0) 0%, rgba(11, 19, 41, 0.6) 40%, var(--card-bg, #0b1329) 100%);
  pointer-events: auto;
  cursor: pointer;
  transition: opacity 0.25s ease;
  z-index: 2;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

[data-theme="light"] .client-details-fade-overlay {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.75) 40%, var(--card-bg, #ffffff) 100%);
}

.client-details-expandable-wrap.is-expanded .client-details-fade-overlay {
  opacity: 0;
  pointer-events: none;
  display: none !important;
}

.client-details-expandable-wrap.is-not-overflowing .client-details-fade-overlay,
.client-details-expandable-wrap.is-not-overflowing .client-details-toggle-bar {
  display: none !important;
}

.client-details-toggle-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 3;
  padding-top: 6px;
  margin-top: 2px;
}

.client-details-expandable-wrap.is-collapsed .client-details-toggle-bar {
  margin-top: -14px;
}

.client-details-expandable-wrap.is-expanded .client-details-toggle-bar {
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid var(--rule, rgba(255, 255, 255, 0.08));
}

.client-details-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 18px;
  border-radius: 9999px;
  background: var(--card-bg-alt, rgba(255, 255, 255, 0.05));
  border: 1px solid var(--rule, rgba(255, 255, 255, 0.12));
  color: var(--text, #f1f5f9);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}

.client-details-toggle-btn:hover {
  background: var(--primary-trans, rgba(59, 130, 246, 0.15));
  border-color: var(--primary, #3b82f6);
  color: var(--primary, #60a5fa);
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.28);
  transform: translateY(-1px);
}

.client-details-toggle-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.client-details-toggle-chevron.is-open {
  transform: rotate(180deg);
}

.client-details-toggle-chevron svg {
  width: 14px;
  height: 14px;
}

/* ---- Extra Documentation Blocks & Add Button ---- */
.client-details-add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: var(--r-md, 8px);
  background: rgba(249, 115, 22, 0.12);
  border: 1px solid rgba(249, 115, 22, 0.35);
  color: var(--brand-orange, #f97316);
  font-weight: 700;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease;
}
.client-details-add-btn:hover {
  background: rgba(249, 115, 22, 0.22);
  border-color: var(--brand-orange, #f97316);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.25);
}
.client-details-add-btn svg {
  width: 16px;
  height: 16px;
}

.client-details-block {
  margin-top: 18px;
  padding: 16px 22px 14px !important;
  position: relative;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
/* Tone A: Color 1 (Brand Orange theme) */
.client-details-block.tone-a {
  border-left: 4px solid var(--brand-orange, #f97316) !important;
  background: linear-gradient(180deg, rgba(249, 115, 22, 0.04) 0%, var(--card-bg, #0b1329) 100%);
}
.client-details-block.tone-a .client-details-block-badge {
  background: rgba(249, 115, 22, 0.15);
  color: var(--brand-orange, #f97316);
  border: 1px solid rgba(249, 115, 22, 0.35);
}
.client-details-block.tone-a:hover {
  border-color: rgba(249, 115, 22, 0.5) !important;
}

/* Tone B: Color 2 (Blueprint Blue theme) */
.client-details-block.tone-b {
  border-left: 4px solid var(--blueprint, #38bdf8) !important;
  background: linear-gradient(180deg, rgba(56, 189, 248, 0.04) 0%, var(--card-bg, #0b1329) 100%);
}
.client-details-block.tone-b .client-details-block-badge {
  background: rgba(56, 189, 248, 0.15);
  color: var(--blueprint, #38bdf8);
  border: 1px solid rgba(56, 189, 248, 0.35);
}
.client-details-block.tone-b:hover {
  border-color: rgba(56, 189, 248, 0.5) !important;
}

.client-details-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule, rgba(255, 255, 255, 0.08));
}
.client-details-block-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink, #fff);
  flex-wrap: wrap;
}
.client-details-block-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 9999px;
  font-size: 11.5px;
  font-weight: 800;
  flex: none;
}
.client-details-creator-photo {
  width: 24px !important;
  height: 24px !important;
  font-size: 11px !important;
  flex: none;
  cursor: pointer;
}
.client-details-creator-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text, #f1f5f9);
  letter-spacing: -0.2px;
}
.client-details-block-when {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary, #94a3b8);
  display: inline-flex;
  align-items: center;
}
.client-details-block-when::before {
  content: "•";
  margin-right: 6px;
  margin-left: 2px;
  opacity: 0.55;
  display: inline-block;
}
.client-details-block-edit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 12px;
  padding: 4px 10px;
}



/* 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,
.client-item-card {
  content-visibility: auto;
}
.panel--todos .item {
  contain-intrinsic-size: auto 48px;
}
.panel--instructions .note {
  contain-intrinsic-size: auto 220px;
}
.dashboard-todo-row {
  content-visibility: visible !important;
  contain: none !important;
}
.client-item-card {
  contain-intrinsic-size: auto 60px;
}

/* 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;
  flex: 1 1 0%;
  min-height: 0;
  overflow: hidden;
}
.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: 2px;
  flex: 1 1 0%;
  min-height: 0;
}
.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: 16px 20px;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.dept-card.is-collapsed {
  padding: 14px 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.is-collapsed .dept-card-head {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}
.dept-card-head.is-accordion {
  cursor: pointer;
  user-select: none;
  border-radius: var(--r2, 10px);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.dept-card-head.is-accordion:hover .dept-card-name {
  color: var(--primary, #60a5fa);
}
.dept-card-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--card-bg-alt, rgba(255, 255, 255, 0.05));
  border: 1px solid var(--rule, rgba(255, 255, 255, 0.08));
  color: var(--muted, #94a3b8);
  transition: transform 0.2s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  flex-shrink: 0;
}
.dept-card-head.is-accordion:hover .dept-card-chevron {
  color: var(--ink, #fff);
  border-color: var(--rule-strong, rgba(255, 255, 255, 0.2));
  background: rgba(255, 255, 255, 0.1);
}
.dept-card-chevron.is-open {
  color: var(--primary, #60a5fa);
  border-color: rgba(96, 165, 250, 0.35);
  background: rgba(96, 165, 250, 0.1);
}
.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;
  font-weight: 600;
  transition: color 0.15s ease;
}
.dept-card-levels {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
/* Stack members vertically top-to-bottom instead of horizontally side-by-side */
.dept-card-members {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.dept-member-pill,
.dept-member-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
  padding: 8px 14px;
  background: var(--card-bg-alt, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--rule, rgba(255, 255, 255, 0.08));
  border-radius: var(--r2, 10px);
  font-size: 13.5px;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.dept-member-pill:hover,
.dept-member-row:hover {
  border-color: var(--rule-strong, rgba(255, 255, 255, 0.2));
  background: var(--card-bg, rgba(255, 255, 255, 0.06));
}
.dept-member-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}
.dept-member-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.dept-member-pill .chip.role,
.dept-member-row .chip.role {
  margin: 0;
}
.dept-member-pill .person,
.dept-member-row .person {
  white-space: normal;
  min-width: 0;
}
.dept-member-pill .person .name,
.dept-member-row .person .name {
  overflow-wrap: anywhere;
}

/* the Colour, Font Style, and Font Size toolbar pickers */
.md-color-picker,
.md-font-picker,
.md-size-picker {
  position: relative;
  display: inline-flex;
}
.md-color-caret {
  font-size: 9px;
  line-height: 1;
  opacity: 0.65;
}
.md-font-menu,
.md-size-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 45;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 180px;
  max-height: 280px;
  overflow-y: auto;
  padding: 6px;
  background: var(--card-bg);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r2);
  box-shadow: var(--sh3);
  scrollbar-width: thin;
}
.md-font-menu[hidden],
.md-size-menu[hidden] {
  display: none;
}
.md-font-option,
.md-size-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 6px 10px;
  font-size: 12.5px;
  font-weight: 500;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: var(--r1);
  color: var(--ink);
  cursor: pointer;
  transition: background 0.1s ease;
}
.md-font-option:hover,
.md-font-option:focus-visible,
.md-size-option:hover,
.md-size-option:focus-visible {
  background: var(--card-bg-alt);
  color: var(--ink-strong);
}
.md-font-option .font-preview-tag,
.md-size-option .size-preview-tag {
  font-size: 10.5px;
  font-weight: 600;
  opacity: 0.65;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  font-family: inherit;
}
.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;
  }
}

/* ---- Client item card in Client Directory (Harmonious Warm Translucent Orange Glass) ---- */
/* Base default: DAY MODE (Light Theme) */
.card.client-item-card,
.client-item-card {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  height: 60px !important;
  min-height: 60px !important;
  max-height: 60px !important;
  box-sizing: border-box !important;
  background: var(--banner-orange-bg, linear-gradient(135deg, #FFF0EB 0%, #FFE4DC 100%)) !important;
  border: 1px solid var(--banner-orange-border, rgba(236, 96, 71, 0.35)) !important;
  border-radius: var(--r2, 12px) !important;
  padding: 0 18px !important;
  cursor: pointer !important;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 4px 16px -2px rgba(236, 96, 71, 0.20), 0 8px 24px -4px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
}
.card.client-item-card *,
.client-item-card * {
  pointer-events: none !important;
}
/* remove the light-mode left border stripe so the entire card has uniform 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;
  background: linear-gradient(135deg, #FFE8E0 0%, #FFDDD1 100%) !important;
  border-color: #EC6047 !important;
  box-shadow: 0 8px 26px -2px rgba(236, 96, 71, 0.32), 0 16px 36px -8px rgba(15, 23, 42, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}
.client-card-head {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
.client-item-card .client-avatar-badge,
.client-avatar-badge {
  width: 38px !important;
  height: 38px !important;
  border-radius: 9px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  letter-spacing: 0.5px !important;
  color: #FFFFFF !important;
  background: linear-gradient(135deg, #FF6F57 0%, #EC6047 100%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 2px 8px rgba(236, 96, 71, 0.35) !important;
  flex-shrink: 0 !important;
}
.client-head-info {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}
.client-card-ext-pills {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px 8px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin: 0 12px 0 auto !important;
  flex-wrap: nowrap !important;
  overflow: hidden !important;
}
.client-card-ext-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 2px 8px !important;
  border-radius: 9999px !important;
  font-size: 11.5px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(236, 96, 71, 0.40) !important;
  color: #0F172A !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), inset 0 1px 0 #FFFFFF !important;
  max-width: 170px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  flex-shrink: 0 !important;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !important;
}
.client-card-ext-pill.is-filled {
  background: #FFFFFF !important;
  border-color: rgba(236, 96, 71, 0.55) !important;
  box-shadow: 0 1.5px 4px rgba(236, 96, 71, 0.14), inset 0 1px 0 #FFFFFF !important;
}
.client-card-ext-pill.is-empty {
  display: none !important;
}
.client-card-ext-pill-key {
  display: none !important;
}
.client-card-ext-pill-val {
  font-weight: 700 !important;
  color: #0F172A !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .client-card-ext-pill {
    background: rgba(15, 23, 42, 0.70) !important;
    border: 1px solid rgba(236, 96, 71, 0.45) !important;
    color: #F8FAFC !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
  }
  :root:not([data-theme="light"]) .client-card-ext-pill.is-filled {
    background: rgba(15, 23, 42, 0.80) !important;
    border-color: rgba(255, 115, 92, 0.65) !important;
  }
  :root:not([data-theme="light"]) .client-card-ext-pill.is-empty {
    display: none !important;
  }
  :root:not([data-theme="light"]) .client-card-ext-pill-key {
    display: none !important;
  }
  :root:not([data-theme="light"]) .client-card-ext-pill-val {
    color: #FFFFFF !important;
  }
}
:root[data-theme="dark"] .client-card-ext-pill {
  background: rgba(15, 23, 42, 0.70) !important;
  border: 1px solid rgba(236, 96, 71, 0.45) !important;
  color: #F8FAFC !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}
:root[data-theme="dark"] .client-card-ext-pill.is-filled {
  background: rgba(15, 23, 42, 0.80) !important;
  border-color: rgba(255, 115, 92, 0.65) !important;
}
:root[data-theme="dark"] .client-card-ext-pill.is-empty {
  display: none !important;
}
:root[data-theme="dark"] .client-card-ext-pill-key {
  display: none !important;
}
:root[data-theme="dark"] .client-card-ext-pill-val {
  color: #FFFFFF !important;
}
@media (max-width: 900px) {
  .client-card-head {
    flex-wrap: nowrap !important;
  }
  .client-card-ext-pills {
    order: 3 !important;
    width: auto !important;
    margin: 0 8px 0 auto !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    justify-content: flex-end !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: #0F172A !important;
  line-height: 1.3 !important;
  text-shadow: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
}
.client-item-card .client-sub-badge,
.client-sub-badge {
  display: inline-block;
  margin-top: 3px;
  font-size: 11.5px;
  font-family: var(--font-mono, monospace);
  color: #C2410C !important;
  background: rgba(236, 96, 71, 0.12) !important;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid rgba(236, 96, 71, 0.30) !important;
}
.client-item-card .client-status-indicator {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  padding: 3px 10px !important;
  border-radius: 20px !important;
  flex-shrink: 0 !important;
  color: #FFFFFF !important;
  background: linear-gradient(135deg, #FF6F57 0%, #EC6047 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  box-shadow: 0 2px 8px rgba(236, 96, 71, 0.35) !important;
  transition: all var(--t-fast) !important;
}
.client-item-card .client-status-indicator.is-paused {
  background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.35) !important;
}
.card.client-item-card:hover .client-status-indicator:not(.is-paused),
.client-item-card:hover .client-status-indicator:not(.is-paused) {
  background: linear-gradient(135deg, #FF826C 0%, #F06E56 100%) !important;
  box-shadow: 0 3px 12px rgba(236, 96, 71, 0.45) !important;
}

/* Night Mode Client Card Overrides */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .card.client-item-card,
  :root:not([data-theme="light"]) .client-item-card {
    background: var(--banner-orange-bg, linear-gradient(135deg, rgba(234, 99, 64, 0.33) 0%, rgba(234, 99, 64, 0.29) 100%)) !important;
    border: 1px solid var(--banner-orange-border, rgba(236, 96, 71, 0.45)) !important;
    box-shadow: var(--banner-orange-shadow, 0 4px 20px -2px rgba(234, 99, 64, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.10)) !important;
  }
  :root:not([data-theme="light"]) .card.client-item-card:hover,
  :root:not([data-theme="light"]) .client-item-card:hover {
    background: linear-gradient(135deg, rgba(234, 99, 64, 0.42) 0%, rgba(234, 99, 64, 0.38) 100%) !important;
    border-color: #FF735C !important;
    box-shadow: 0 6px 24px -2px rgba(236, 96, 71, 0.32), 0 2px 8px rgba(0, 0, 0, 0.20) !important;
  }
  :root:not([data-theme="light"]) .card.client-item-card .client-card-title,
  :root:not([data-theme="light"]) .client-item-card .client-card-title {
    color: #FFFFFF !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) !important;
  }
  :root:not([data-theme="light"]) .client-item-card .client-sub-badge {
    color: #FFFFFF !important;
    background: rgba(236, 96, 71, 0.22) !important;
    border: 1px solid rgba(236, 96, 71, 0.45) !important;
  }
  :root:not([data-theme="light"]) .client-item-card .client-status-indicator {
    color: #FFFFFF !important;
    background: linear-gradient(135deg, #FF6F57 0%, #EC6047 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    box-shadow: 0 2px 10px rgba(236, 96, 71, 0.40) !important;
  }
  :root:not([data-theme="light"]) .client-item-card .client-status-indicator.is-paused {
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    box-shadow: 0 2px 10px rgba(245, 158, 11, 0.40) !important;
  }
}

:root[data-theme="dark"] .card.client-item-card,
:root[data-theme="dark"] .client-item-card {
  background: var(--banner-orange-bg, linear-gradient(135deg, rgba(234, 99, 64, 0.33) 0%, rgba(234, 99, 64, 0.29) 100%)) !important;
  border: 1px solid var(--banner-orange-border, rgba(236, 96, 71, 0.45)) !important;
  box-shadow: var(--banner-orange-shadow, 0 4px 20px -2px rgba(234, 99, 64, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.10)) !important;
}
:root[data-theme="dark"] .card.client-item-card:hover,
:root[data-theme="dark"] .client-item-card:hover {
  background: linear-gradient(135deg, rgba(234, 99, 64, 0.42) 0%, rgba(234, 99, 64, 0.38) 100%) !important;
  border-color: #FF735C !important;
  box-shadow: 0 6px 24px -2px rgba(236, 96, 71, 0.32), 0 2px 8px rgba(0, 0, 0, 0.20) !important;
}
:root[data-theme="dark"] .card.client-item-card .client-card-title,
:root[data-theme="dark"] .client-item-card .client-card-title {
  color: #FFFFFF !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) !important;
}
:root[data-theme="dark"] .client-item-card .client-sub-badge {
  color: #FFFFFF !important;
  background: rgba(236, 96, 71, 0.22) !important;
  border: 1px solid rgba(236, 96, 71, 0.45) !important;
}
:root[data-theme="dark"] .client-item-card .client-status-indicator {
  color: #FFFFFF !important;
  background: linear-gradient(135deg, #FF6F57 0%, #EC6047 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  box-shadow: 0 2px 10px rgba(236, 96, 71, 0.40) !important;
}
:root[data-theme="dark"] .client-item-card .client-status-indicator.is-paused {
  background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  box-shadow: 0 2px 10px rgba(245, 158, 11, 0.40) !important;
}
.client-item-card .client-status-indicator .client-status-dot,
:root[data-theme="light"] .client-item-card .client-status-indicator .client-status-dot,
:root[data-theme="dark"] .client-item-card .client-status-indicator .client-status-dot {
  background: #10B981 !important;
  box-shadow: 0 0 6px #10B981 !important;
}
.client-item-card .client-status-indicator.is-paused .client-status-dot,
:root[data-theme="light"] .client-item-card .client-status-indicator.is-paused .client-status-dot,
:root[data-theme="dark"] .client-item-card .client-status-indicator.is-paused .client-status-dot {
  background: #FBBF24 !important;
  box-shadow: 0 0 6px #FBBF24 !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(24, 66, 114, 0.45), 0 0 26px rgba(236, 96, 71, 0.35);
  }
  50% {
    box-shadow: 0 0 22px rgba(236, 96, 71, 0.55), 0 0 34px rgba(24, 66, 114, 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' / 'invisible') */
html[data-install-button="unvisible"] .topbar-center-wrap,
html[data-install-button="unvisible"] .btn-install-app,
html[data-install-button="invisible"] .topbar-center-wrap,
html[data-install-button="invisible"] .btn-install-app,
body[data-install-button="unvisible"] .topbar-center-wrap,
body[data-install-button="unvisible"] .btn-install-app,
body[data-install-button="invisible"] .topbar-center-wrap,
body[data-install-button="invisible"] .btn-install-app,
.topbar-center-wrap.hidden,
.btn-install-app.hidden {
  display: none !important;
}

/* Visibility toggle for Floating SMS / Messages button ('visible' vs 'unvisible' / 'invisible') */
html[data-sms-button="unvisible"] #oc-msg-fab,
html[data-sms-button="invisible"] #oc-msg-fab,
html[data-sms-button="unvisible"] .oc-msg-fab,
html[data-sms-button="invisible"] .oc-msg-fab,
body[data-sms-button="unvisible"] #oc-msg-fab,
body[data-sms-button="invisible"] #oc-msg-fab,
body[data-sms-button="unvisible"] .oc-msg-fab,
body[data-sms-button="invisible"] .oc-msg-fab,
html[data-messages-button="unvisible"] #oc-msg-fab,
html[data-messages-button="invisible"] #oc-msg-fab,
html[data-messages-button="unvisible"] .oc-msg-fab,
html[data-messages-button="invisible"] .oc-msg-fab,
body[data-messages-button="unvisible"] #oc-msg-fab,
body[data-messages-button="invisible"] #oc-msg-fab,
body[data-messages-button="unvisible"] .oc-msg-fab,
body[data-messages-button="invisible"] .oc-msg-fab,
#oc-msg-fab.hidden,
.oc-msg-fab.hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: 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,
    #184272 0deg,
    #3A82CE 90deg,
    #EC6047 180deg,
    #FF735C 270deg,
    #184272 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, #c8422a 0%, #ec6047 45%, #184272 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, #ec6047);
  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, #184272 0%, #EC6047 100%);
  box-shadow:
    0 4px 18px rgba(24, 66, 114, 0.45),
    0 2px 8px rgba(236, 96, 71, 0.35);
  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(24, 66, 114, 0.45),
      0 2px 8px rgba(236, 96, 71, 0.35),
      0 0 0 0 rgba(236, 96, 71, 0.40);
  }
  50% {
    box-shadow:
      0 6px 24px rgba(24, 66, 114, 0.60),
      0 2px 8px rgba(236, 96, 71, 0.45),
      0 0 0 10px rgba(236, 96, 71, 0.0);
  }
}

.oc-msg-fab:hover {
  transform: scale(1.10);
  background: linear-gradient(135deg, #20548F 0%, #FF735C 100%);
  box-shadow:
    0 8px 28px rgba(24, 66, 114, 0.60),
    0 4px 14px rgba(236, 96, 71, 0.50);
  animation: none;
  cursor: pointer;
}

.oc-msg-fab:active,
.oc-msg-fab.dragging {
  transform: scale(1.05);
  cursor: grabbing;
  box-shadow:
    0 10px 32px rgba(24, 66, 114, 0.55),
    0 2px 8px rgba(236, 96, 71, 0.40);
  animation: none;
}

/* Pulsing outer ring on hover */
.oc-msg-fab::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2.5px solid rgba(236, 96, 71, 0.45);
  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: #EC6047;
  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(236, 96, 71, 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(24, 66, 114, 0.35),
    0 2px 8px rgba(236, 96, 71, 0.25);
}

[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, #184272 0%, #EC6047 100%);
  box-shadow:
    0 4px 20px rgba(24, 66, 114, 0.60),
    0 1px 4px rgba(0,0,0,0.25);
  animation: none;
}
.oc-msg-fab.is-open:hover {
  background: linear-gradient(135deg, #20548F 0%, #FF735C 100%);
  box-shadow:
    0 8px 28px rgba(24, 66, 114, 0.70),
    0 2px 6px rgba(0,0,0,0.25);
}
.oc-msg-fab.is-open::before {
  border-color: rgba(236, 96, 71, 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);
}

/* =========================================================================
   Dashboard Assignee Filter Pills & Interactive Popover Dropdown
   Originate Command · personal dashboard
   ========================================================================= */
.dashboard-filter-pills {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  margin-left: auto;
  position: relative;
}

.panel-head .tools .dashboard-filter-pills,
.tools .dashboard-filter-pills {
  margin-left: 0;
}

.panel:has(.dashboard-assignee-popover),
.panel.has-assignee-popover {
  overflow: visible !important;
}

.dashboard-assignee-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px 2px 4px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border, #cbd5e1);
  background: var(--surface-alt, #f1f5f9);
  color: var(--text-secondary, #475569);
  transition: all 0.15s ease;
  user-select: none;
}

:root[data-theme="dark"] .dashboard-assignee-filter-btn,
:root:not([data-theme="light"]) .dashboard-assignee-filter-btn {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: #94a3b8;
}

.dashboard-assignee-filter-btn:hover {
  border-color: var(--blueprint, #0284c7);
  color: var(--blueprint, #0284c7);
  background: var(--blueprint-soft, #e0f2fe);
}

:root[data-theme="dark"] .dashboard-assignee-filter-btn:hover,
:root:not([data-theme="light"]) .dashboard-assignee-filter-btn:hover {
  border-color: rgba(56, 189, 248, 0.4);
  color: #fff;
  background: rgba(56, 189, 248, 0.08);
}

.dashboard-assignee-filter-btn.active {
  border-color: var(--blueprint, #0284c7);
  background: var(--blueprint-soft, #e0f2fe);
  color: var(--blueprint, #0284c7);
  box-shadow: 0 0 10px rgba(2, 132, 199, 0.15);
}

:root[data-theme="dark"] .dashboard-assignee-filter-btn.active,
:root:not([data-theme="light"]) .dashboard-assignee-filter-btn.active {
  border-color: var(--accent, #0284c7);
  background: rgba(2, 132, 199, 0.18);
  color: var(--accent-light, #38bdf8);
  box-shadow: 0 0 10px rgba(2, 132, 199, 0.2);
}

.dashboard-assignee-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 4px 12px;
  border-radius: 20px;
  cursor: pointer;
  border: 1px solid var(--border, #cbd5e1);
  background: var(--surface-alt, #f1f5f9);
  color: var(--text-secondary, #475569);
  transition: all 0.15s ease;
  user-select: none;
  height: 28px;
}

:root[data-theme="dark"] .dashboard-assignee-more-btn,
:root:not([data-theme="light"]) .dashboard-assignee-more-btn {
  border-color: rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
  color: #94a3b8;
}

.dashboard-assignee-more-btn svg {
  width: 15px;
  height: 15px;
}

.dashboard-assignee-caret {
  font-size: 8px;
  opacity: 0.75;
  transition: transform 0.15s ease;
  line-height: 1;
}

.dashboard-assignee-more-btn:hover,
.dashboard-assignee-more-btn.is-open {
  border-color: var(--blueprint, #0284c7);
  background: var(--blueprint-soft, #e0f2fe);
  color: var(--blueprint, #0284c7);
}

:root[data-theme="dark"] .dashboard-assignee-more-btn:hover,
:root[data-theme="dark"] .dashboard-assignee-more-btn.is-open,
:root:not([data-theme="light"]) .dashboard-assignee-more-btn:hover,
:root:not([data-theme="light"]) .dashboard-assignee-more-btn.is-open {
  border-color: var(--accent, #0284c7);
  background: rgba(2, 132, 199, 0.18);
  color: var(--accent-light, #38bdf8);
}

.dashboard-assignee-more-btn.is-open .dashboard-assignee-caret {
  transform: rotate(180deg);
}

.dashboard-assignee-more-btn.active {
  border-color: var(--blueprint, #0284c7);
  background: var(--blueprint-soft, #e0f2fe);
  color: var(--blueprint, #0284c7);
  box-shadow: 0 0 10px rgba(2, 132, 199, 0.15);
}

:root[data-theme="dark"] .dashboard-assignee-more-btn.active,
:root:not([data-theme="light"]) .dashboard-assignee-more-btn.active {
  border-color: var(--accent, #0284c7);
  background: rgba(2, 132, 199, 0.22);
  color: var(--accent-light, #38bdf8);
  box-shadow: 0 0 10px rgba(2, 132, 199, 0.25);
}

.dashboard-assignee-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 290px;
  max-width: calc(100vw - 32px);
  background: var(--surface, #ffffff);
  border: 1px solid var(--border, #cbd5e1);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15), 0 0 16px rgba(2, 132, 199, 0.08);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  backdrop-filter: blur(16px);
  animation: ocAssigneePopIn 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

:root[data-theme="dark"] .dashboard-assignee-popover,
:root:not([data-theme="light"]) .dashboard-assignee-popover {
  background: #0f172a;
  background: linear-gradient(180deg, #131d33 0%, #0c1424 100%);
  border-color: rgba(56, 189, 248, 0.28);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 24px rgba(2, 132, 199, 0.18);
}

.dashboard-assignee-all-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--blueprint-soft, #edf3f9);
  color: var(--blueprint, #184272);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}

:root[data-theme="dark"] .dashboard-assignee-all-icon,
:root:not([data-theme="light"]) .dashboard-assignee-all-icon {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
}

@keyframes ocAssigneePopIn {
  from {
    opacity: 0;
    transform: none;
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.dashboard-assignee-popover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border, #e2e8f0);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink, #0f172a);
  line-height: 1;
}

:root[data-theme="dark"] .dashboard-assignee-popover-head,
:root:not([data-theme="light"]) .dashboard-assignee-popover-head {
  border-bottom-color: rgba(255, 255, 255, 0.08);
  color: #f1f5f9;
}

.dashboard-assignee-popover-head > span,
.dashboard-assignee-popover-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  white-space: nowrap;
  line-height: 1.2;
}

.dashboard-assignee-popover-head > span svg,
.dashboard-assignee-popover-head > span .icon,
.dashboard-assignee-popover-title svg,
.dashboard-assignee-popover-title .icon {
  width: 14px;
  height: 14px;
  display: inline-block;
  flex-shrink: 0;
  color: var(--blueprint, #0284c7);
  position: relative;
  top: 1.5px;
}

.dashboard-assignee-popover-title .icon-send {
  top: 2px;
}

:root[data-theme="dark"] .dashboard-assignee-popover-head > span svg,
:root[data-theme="dark"] .dashboard-assignee-popover-head > span .icon,
:root[data-theme="dark"] .dashboard-assignee-popover-title svg,
:root[data-theme="dark"] .dashboard-assignee-popover-title .icon,
:root:not([data-theme="light"]) .dashboard-assignee-popover-head > span svg,
:root:not([data-theme="light"]) .dashboard-assignee-popover-head > span .icon,
:root:not([data-theme="light"]) .dashboard-assignee-popover-title svg,
:root:not([data-theme="light"]) .dashboard-assignee-popover-title .icon {
  color: var(--accent-light, #38bdf8);
}

.dashboard-assignee-popover-title-text {
  display: inline-block;
  line-height: 1.2;
  vertical-align: middle;
}

.dashboard-assignee-popover-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  margin: 0;
  border-radius: 6px;
  background: transparent;
  border: none;
  color: var(--text-secondary, #64748b);
  cursor: pointer;
  transition: all 0.12s;
  flex-shrink: 0;
}

.dashboard-assignee-popover-close svg,
.dashboard-assignee-popover-close .icon {
  width: 13px;
  height: 13px;
  display: block;
  flex-shrink: 0;
  position: static !important;
  top: auto !important;
  color: inherit !important;
}

.dashboard-assignee-popover-close:hover {
  background: var(--surface-alt, #e2e8f0);
  color: var(--ink, #0f172a);
}

:root[data-theme="dark"] .dashboard-assignee-popover-close:hover,
:root:not([data-theme="light"]) .dashboard-assignee-popover-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.dashboard-assignee-search-wrap {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border, #f1f5f9);
  position: relative;
  display: flex;
  align-items: center;
}

:root[data-theme="dark"] .dashboard-assignee-search-wrap,
:root:not([data-theme="light"]) .dashboard-assignee-search-wrap {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

.dashboard-assignee-search-wrap svg {
  position: absolute;
  left: 20px;
  width: 14px;
  height: 14px;
  color: var(--text-secondary, #64748b);
  pointer-events: none;
}

.dashboard-assignee-search-input {
  width: 100%;
  height: 30px;
  padding: 4px 10px 4px 28px;
  border-radius: 6px;
  background: var(--surface-alt, #f8fafc);
  border: 1px solid var(--border, #cbd5e1);
  color: var(--ink, #0f172a);
  font-size: 11.5px;
  outline: none;
  transition: all 0.15s;
}

:root[data-theme="dark"] .dashboard-assignee-search-input,
:root:not([data-theme="light"]) .dashboard-assignee-search-input {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.dashboard-assignee-search-input:focus {
  border-color: var(--blueprint, #0284c7);
  box-shadow: 0 0 8px rgba(2, 132, 199, 0.2);
  background: #ffffff;
}

:root[data-theme="dark"] .dashboard-assignee-search-input:focus,
:root:not([data-theme="light"]) .dashboard-assignee-search-input:focus {
  border-color: var(--accent, #0284c7);
  box-shadow: 0 0 8px rgba(2, 132, 199, 0.25);
  background: rgba(255, 255, 255, 0.09);
}

.dashboard-assignee-list {
  max-height: 240px;
  overflow-y: auto;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dashboard-assignee-list::-webkit-scrollbar {
  width: 5px;
}
.dashboard-assignee-list::-webkit-scrollbar-thumb {
  background: var(--border, #cbd5e1);
  border-radius: 4px;
}

:root[data-theme="dark"] .dashboard-assignee-list::-webkit-scrollbar-thumb,
:root:not([data-theme="light"]) .dashboard-assignee-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
}

.dashboard-assignee-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  background: transparent;
  border: 1px solid transparent;
  transition: all 0.12s ease;
  user-select: none;
  text-align: left;
  width: 100%;
}

.dashboard-assignee-item .mark-tint,
.dashboard-assignee-item .mark-avatar,
.dashboard-assignee-item .dashboard-assignee-avatar,
.dashboard-assignee-item .dashboard-assignee-all-icon,
.dashboard-assignee-item .todo-role-chip {
  flex: none !important;
  flex-shrink: 0 !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  max-width: 28px !important;
  max-height: 28px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.dashboard-assignee-item .todo-role-chip {
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

#dashboard-role-popover .dashboard-assignee-all-icon {
  border-radius: 8px !important;
}

.dashboard-assignee-item .mark-avatar img,
.dashboard-assignee-item .mark-avatar-img,
.dashboard-assignee-item .mark-tint img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  display: block !important;
}

.dashboard-assignee-item:hover {
  background: var(--surface-alt, #f1f5f9);
  border-color: var(--border, #e2e8f0);
}

:root[data-theme="dark"] .dashboard-assignee-item:hover,
:root:not([data-theme="light"]) .dashboard-assignee-item:hover {
  background: rgba(2, 132, 199, 0.12);
  border-color: rgba(56, 189, 248, 0.2);
}

.dashboard-assignee-item.active {
  background: var(--blueprint-soft, #e0f2fe);
  border-color: rgba(2, 132, 199, 0.35);
}

:root[data-theme="dark"] .dashboard-assignee-item.active,
:root:not([data-theme="light"]) .dashboard-assignee-item.active {
  background: rgba(2, 132, 199, 0.22);
  border-color: rgba(56, 189, 248, 0.4);
}

.dashboard-assignee-item-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
  gap: 2px;
}

.dashboard-assignee-item-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink, #0f172a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

:root[data-theme="dark"] .dashboard-assignee-item-name,
:root:not([data-theme="light"]) .dashboard-assignee-item-name {
  color: #f8fafc;
}

.dashboard-assignee-item-role {
  font-size: 10.5px;
  color: var(--text-secondary, #64748b);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

:root[data-theme="dark"] .dashboard-assignee-item-role,
:root:not([data-theme="light"]) .dashboard-assignee-item-role {
  color: #94a3b8;
}

:root[data-theme="dark"] .dashboard-assignee-item.active .dashboard-assignee-item-name,
:root:not([data-theme="light"]) .dashboard-assignee-item.active .dashboard-assignee-item-name {
  color: #ffffff;
}

:root[data-theme="dark"] .dashboard-assignee-item.active .dashboard-assignee-item-role,
:root:not([data-theme="light"]) .dashboard-assignee-item.active .dashboard-assignee-item-role {
  color: rgba(255, 255, 255, 0.75);
}

.dashboard-assignee-item-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex-shrink: 0;
}

.dashboard-assignee-item-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 10px;
  background: var(--surface-alt, #f1f5f9);
  color: var(--text-secondary, #64748b);
}

:root[data-theme="dark"] .dashboard-assignee-item-badge,
:root:not([data-theme="light"]) .dashboard-assignee-item-badge {
  background: rgba(255, 255, 255, 0.07);
  color: #94a3b8;
}

.dashboard-assignee-item.active .dashboard-assignee-item-badge {
  background: #bae6fd;
  color: #0369a1;
}

:root[data-theme="dark"] .dashboard-assignee-item.active .dashboard-assignee-item-badge,
:root:not([data-theme="light"]) .dashboard-assignee-item.active .dashboard-assignee-item-badge {
  background: rgba(56, 189, 248, 0.2);
  color: #38bdf8;
}

.dashboard-assignee-item-check {
  color: var(--blueprint, #0284c7);
  display: inline-flex;
  align-items: center;
}

:root[data-theme="dark"] .dashboard-assignee-item-check,
:root:not([data-theme="light"]) .dashboard-assignee-item-check {
  color: #38bdf8;
}

.dashboard-assignee-empty {
  padding: 18px 12px;
  text-align: center;
  font-size: 11.5px;
  color: var(--text-secondary, #64748b);
}

/* =========================================================================
   MASTER 3D SPATIAL ELEVATION & TACTILE DEPTH SUITE (OM SRS 001)
   Infuses a state-of-the-art 3D aesthetic across every page and component:
   - Ambient occlusion & volumetric perspective shadows
   - Specular top edge highlights & bottom extrusion bevels
   - Physical tactile button mechanics with mechanical :active depression
   - Recessed input & filter wells with illuminated glow wells
   - Multi-faceted jewel luster badges for roles and statuses
   - Floating 3D modals, toasts, cards, and popovers
   ========================================================================= */

/* 1. Global Slabs, Panels & Cards (3D Elevation & Specular Highlights) */
.card,
.stat,
.panel,
.dept-card,
.people-card,
.foundation-card,
.portal-credential-card,
.portal-stat-card,
.policy-card,
.poll-card {
  box-shadow: var(--sh-3d-card) !important;
  transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast) !important;
  position: relative !important;
}

.card:hover,
.stat:hover,
.dept-card:hover,
.people-card:hover,
.portal-stat-card:hover,
.poll-card:hover {
  transform: translateY(-2.5px) translateZ(0) !important;
  box-shadow: var(--sh-3d-card-hover) !important;
}

.portal-credential-card,
.portal-credential-card:hover,
.portal-credential-card:active,
.client-details-card,
.client-details-card:hover,
.client-details-card:active,
.client-details-block,
.client-details-block:hover,
.client-details-block:active,
.client-details-block.tone-a,
.client-details-block.tone-a:hover,
.client-details-block.tone-b,
.client-details-block.tone-b:hover {
  transform: none !important;
}

/* 2. Notice Board Daily Todos & Instruction Strips */
.item {
  box-shadow: var(--sh-3d-card) !important;
  transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast) !important;
}

.item:hover {
  transform: translateY(-2px) translateZ(0) !important;
  box-shadow: var(--sh-3d-card-hover) !important;
}

.item:active {
  transform: translateY(0) !important;
  box-shadow: var(--sh-3d-card) !important;
}

/* Dashboard Todo Rows: rock-solid stable, no transform jitter or jumping on hover/click */
.dashboard-todo-row {
  box-shadow: var(--sh-3d-card) !important;
  transition: box-shadow var(--t-fast), border-color var(--t-fast) !important;
  transform: none !important;
}

.dashboard-todo-row:hover {
  box-shadow: var(--sh-3d-card-hover) !important;
  transform: none !important;
}

.dashboard-todo-row:active {
  box-shadow: var(--sh-3d-card) !important;
  transform: none !important;
}

.dashboard-todo-main-row,
.dashboard-todo-main-row .actions,
.dashboard-todo-main-row .actions select,
select.state-select {
  transform: none !important;
}

/* 3. Tactile 3D Checkbox Controls */
.todo-check-btn {
  box-shadow: inset 0 1.5px 3px rgba(0, 0, 0, 0.15), 0 1px 0 rgba(255, 255, 255, 0.85) !important;
  transition: transform var(--t-instant), background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast) !important;
}

.todo-check-btn:hover {
  transform: scale(1.08) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), 0 0 10px rgba(76, 141, 224, 0.35) !important;
}

.todo-check-btn:active {
  transform: scale(0.92) translateY(1px) !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25) !important;
}

.todo-check-btn.checked {
  background: linear-gradient(180deg, #10B981 0%, #059669 100%) !important;
  border-color: #047857 !important;
  box-shadow: 0 2px 0 #047857, 0 4px 10px rgba(5, 150, 105, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
}

/* 4. Recessed Wells for Form Controls & Filter Bars */
.filterbar,
.search-box input,
.dashboard-assignee-search-input,
.chat-input-bar input,
.chat-input-bar textarea {
  box-shadow: var(--sh-3d-sunken) !important;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast) !important;
}

.filterbar:focus-within,
.search-box input:focus,
.dashboard-assignee-search-input:focus,
.chat-input-bar input:focus,
.chat-input-bar textarea:focus {
  box-shadow: var(--sh-3d-sunken-focus) !important;
}

/* 5. 3D Floating Modals, Toasts & Dropdowns */
dialog.modal,
.modal-card,
.dashboard-assignee-popover,
.user-menu-dropdown,
.notification-flyout {
  box-shadow: var(--sh-3d-modal) !important;
  backdrop-filter: blur(16px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
}

.toast {
  box-shadow: var(--sh-3d-floating) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  backdrop-filter: blur(12px) !important;
}

/* 6. Employee Portal & Management Timeline Depth */
.portal-header-box {
  box-shadow: var(--sh-3d-card) !important;
  position: relative !important;
}

.my-work-timeline {
  position: relative !important;
}

.my-work-timeline::before {
  box-shadow: 0 0 8px rgba(76, 141, 224, 0.40) !important;
}

.timeline-node {
  box-shadow: 0 0 0 3px var(--card-bg), 0 2px 8px rgba(24, 66, 114, 0.35) !important;
}

/* 7. Discord & Messages Hub 3D Dock */
.discord-sidebar {
  box-shadow: inset -1px 0 0 var(--rule), inset -2px 0 6px rgba(0, 0, 0, 0.04) !important;
}

.chat-input-dock,
.chat-input-bar {
  box-shadow: var(--sh-3d-floating) !important;
  border-radius: var(--r2) !important;
}

/* =========================================================================
   SPECIALIZED 3D SUITE: ITEMS 1, 4, 5, 6, 7 (OM SRS 001)
   ========================================================================= */

/* ---- Item 1: Hardware 3D Punch Clock & Live Timer Display ---- */
#dashboard-attendance-punch-btn:not(.completed-punch) {
  background: #EC6047 !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: none !important;
  letter-spacing: 0.02em !important;
  position: relative !important;
}
#dashboard-attendance-punch-btn:not(.completed-punch):hover {
  background: #FF6F57 !important;
  box-shadow: none !important;
}
#dashboard-attendance-punch-btn:not(.completed-punch):active {
  background: #D84B32 !important;
  opacity: 0.9;
  box-shadow: none !important;
}
#dashboard-attendance-punch-btn.completed-punch,
.btn.completed-punch {
  background: linear-gradient(180deg, #F0FDF4 0%, #DCFCE7 100%) !important;
  border: 1.5px solid #86EFAC !important;
  color: #166534 !important;
  box-shadow: 0 2.5px 0 #86EFAC, 0 4px 12px rgba(22, 101, 52, 0.12), inset 0 1px 0 #FFFFFF !important;
}
:root[data-theme="dark"] #dashboard-attendance-punch-btn.completed-punch,
:root:not([data-theme="light"]) #dashboard-attendance-punch-btn.completed-punch {
  background: linear-gradient(180deg, rgba(34, 197, 94, 0.22) 0%, rgba(22, 101, 52, 0.28) 100%) !important;
  border-color: rgba(74, 222, 128, 0.45) !important;
  color: #86EFAC !important;
  box-shadow: 0 2.5px 0 rgba(0, 0, 0, 0.60), 0 4px 14px rgba(34, 197, 94, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.20) !important;
}

/* ---- Item 4: Sunken 3D Data Table Tray & Floating Rows ---- */
.table-wrap,
.page table {
  box-shadow: var(--sh-3d-card) !important;
  border-radius: var(--r2) !important;
  overflow: hidden !important;
  position: relative !important;
}
.page table thead th {
  background: var(--card-bg-alt) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -1.5px 0 var(--rule-strong) !important;
  border-bottom: none !important;
}
:root[data-theme="dark"] .page table thead th,
:root:not([data-theme="light"]) .page table thead th {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -1.5px 0 rgba(255, 255, 255, 0.08) !important;
}
.page table tbody tr {
  transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast) !important;
}
.page table tbody tr:hover {
  background: var(--row-hover-bg, rgba(76, 141, 224, 0.08)) !important;
  transform: translateY(-1.5px) scale(1.002) translateZ(0) !important;
  box-shadow: 0 4px 12px -2px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.80) !important;
  position: relative !important;
  z-index: 2 !important;
}
:root[data-theme="dark"] .page table tbody tr:hover,
:root:not([data-theme="light"]) .page table tbody tr:hover {
  box-shadow: 0 4px 14px -2px rgba(0, 0, 0, 0.50), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

/* ---- Item 5: 3D Embossed Status Chips & Priority Tokens ---- */
.chip {
  box-shadow: 0 1.5px 0 rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.70) !important;
  transition: transform var(--t-instant), box-shadow var(--t-fast), background var(--t-fast), border-color var(--t-fast) !important;
}
.chip:hover {
  transform: translateY(-1px) scale(1.03) !important;
  box-shadow: 0 2.5px 0 rgba(0, 0, 0, 0.10), 0 4px 10px rgba(0, 0, 0, 0.08), inset 0 1px 0 #FFFFFF !important;
}
.chip:active {
  transform: translateY(1px) scale(0.97) !important;
  box-shadow: 0 0 0 transparent, inset 0 1.5px 3px rgba(0, 0, 0, 0.15) !important;
}
.chip.overdue,
.badge-urgent {
  background: linear-gradient(180deg, #FFE4E6 0%, #FECDD3 100%) !important;
  border: 1px solid rgba(225, 29, 72, 0.45) !important;
  color: var(--signal) !important;
  box-shadow: 0 2px 0 #FDA4AF, 0 4px 10px rgba(225, 29, 72, 0.22), inset 0 1px 0 #FFFFFF !important;
  font-weight: 700 !important;
}
:root[data-theme="dark"] .chip.overdue,
:root:not([data-theme="light"]) .chip.overdue,
:root[data-theme="dark"] .badge-urgent,
:root:not([data-theme="light"]) .badge-urgent {
  background: linear-gradient(180deg, rgba(225, 29, 72, 0.28) 0%, rgba(190, 18, 60, 0.35) 100%) !important;
  border-color: rgba(251, 113, 133, 0.50) !important;
  color: #FECDD3 !important;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.60), 0 4px 12px rgba(225, 29, 72, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.20) !important;
}
.dashboard-todo-prio-flag {
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.14));
  transition: transform var(--t-fast);
}
.dashboard-todo-prio-flag:hover {
  transform: scale(1.18) translateY(-1px);
}

/* ---- Item 6: 3D Speech Bubbles, Reaction Capsules & Floating FAB ---- */
.group-msg-reply-quote {
  background: var(--surface-alt) !important;
  border-left: 3.5px solid var(--blueprint) !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 0 rgba(255, 255, 255, 0.85) !important;
  border-radius: 6px !important;
}
:root[data-theme="dark"] .group-msg-reply-quote,
:root:not([data-theme="light"]) .group-msg-reply-quote {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.40), 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}
.reaction-picker-pop {
  border-radius: 9999px !important;
  background: rgba(15, 23, 42, 0.95) !important;
  border: 1.5px solid rgba(59, 130, 246, 0.70) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45), 0 0 16px rgba(59, 130, 246, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}
:root[data-theme="light"] .reaction-picker-pop,
:root:not([data-theme="dark"]) .reaction-picker-pop {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1.5px solid rgba(37, 99, 235, 0.45) !important;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16), 0 0 16px rgba(37, 99, 235, 0.18), inset 0 1px 0 #FFFFFF !important;
}
.reaction-emoji-btn:hover {
  transform: translateY(-3px) scale(1.22) !important;
}
.oc-msg-fab {
  border: 2px solid rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 3px 0 #0E294A, 0 8px 24px rgba(24, 66, 114, 0.45), 0 2px 8px rgba(236, 96, 71, 0.35), inset 0 1.5px 0 rgba(255, 255, 255, 0.60) !important;
}
.oc-msg-fab:hover {
  transform: scale(1.10) translateY(-2px) !important;
  box-shadow: 0 4px 0 #0E294A, 0 12px 32px rgba(24, 66, 114, 0.55), 0 4px 14px rgba(236, 96, 71, 0.45), inset 0 1.5px 0 #FFFFFF !important;
}
.oc-msg-fab:active {
  transform: translateY(2px) scale(1.02) !important;
  box-shadow: 0 1px 0 #0E294A, inset 0 2px 6px rgba(0, 0, 0, 0.40) !important;
}

/* ---- Item 7: 3D Sunken Dish & Floating Icon Discs for Empty States ---- */
.empty {
  box-shadow: inset 0 2px 8px rgba(15, 23, 42, 0.07), 0 1px 0 rgba(255, 255, 255, 0.90) !important;
  background: var(--card-bg-alt) !important;
  border: 1.5px dashed var(--rule-strong) !important;
}
:root[data-theme="dark"] .empty,
:root:not([data-theme="light"]) .empty {
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}
.empty .icon {
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.09), 0 1px 3px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
  transition: transform var(--t-fast), box-shadow var(--t-fast) !important;
}
.empty:hover .icon {
  transform: translateY(-2px) scale(1.06) !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.14), inset 0 1px 0 #FFFFFF !important;
}

/* =========================================================================
   OMNIPRESENT 3D SUITE: ALL PAGES COMPREHENSIVE REFINEMENT (OM SRS 001)
   1. Header: Tactile Rocker Switch, Coin Avatars, Dropdown Pills
   2. Notice Board: Recessed Selects, Acknowledge Push Buttons, Date Wells
   3. Clients Portal: 3D Drawer Depth, Action Menus, KPI Badges
   4. Management: Extruded Accordion Slabs, Chevron Depth, People Frames
   5. Foundation: 3D Document Binder & Bookmark Nav Tabs
   6. Messages Hub: Tactile Channel Keycaps & 3D Media Frames
   7. Reports: Executive CSV Data Buttons & Floating Analytics Rows
   ========================================================================= */

/* ---- 1. Top Bar: Tactile Rocker Keys, Coin Avatars & Dropdown Pills ---- */
.topbar .toggle-theme,
.topbar .topbar-alerts-btn,
.iconbtn {
  box-shadow: 0 2px 0 var(--rule-strong), 0 3px 8px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.90) !important;
  transition: transform var(--t-instant), box-shadow var(--t-fast), background var(--t-fast), border-color var(--t-fast) !important;
}
.topbar .toggle-theme:hover,
.topbar .topbar-alerts-btn:hover,
.iconbtn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 0 var(--rule-strong), 0 6px 14px rgba(15, 23, 42, 0.12), inset 0 1px 0 #FFFFFF !important;
}
.topbar .toggle-theme:active,
.topbar .topbar-alerts-btn:active,
.iconbtn:active {
  transform: translateY(2px) !important;
  box-shadow: 0 0 0 transparent, inset 0 2px 4px rgba(0, 0, 0, 0.18) !important;
}
:root[data-theme="dark"] .topbar .toggle-theme,
:root:not([data-theme="light"]) .topbar .toggle-theme,
:root[data-theme="dark"] .topbar .topbar-alerts-btn,
:root:not([data-theme="light"]) .topbar .topbar-alerts-btn,
:root[data-theme="dark"] .iconbtn,
:root:not([data-theme="light"]) .iconbtn {
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.65), 0 3px 10px rgba(0, 0, 0, 0.50), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}
:root[data-theme="dark"] .topbar .toggle-theme:hover,
:root:not([data-theme="light"]) .topbar .toggle-theme:hover,
:root[data-theme="dark"] .topbar .topbar-alerts-btn:hover,
:root:not([data-theme="light"]) .topbar .topbar-alerts-btn:hover,
:root[data-theme="dark"] .iconbtn:hover,
:root:not([data-theme="light"]) .iconbtn:hover {
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.65), 0 6px 16px rgba(76, 141, 224, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

/* 3D Coin & Medallion Avatars */
.user-menu-avatar,
.user-menu-dropdown-avatar,
.client-avatar-badge,
.todo-avatar-end .mark-tint,
.user-profile-avatar-wrap {
  box-shadow: 0 0 0 1.5px var(--card-bg), 0 2px 8px rgba(15, 23, 42, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
}
:root[data-theme="dark"] .user-menu-avatar,
:root:not([data-theme="light"]) .user-menu-avatar,
:root[data-theme="dark"] .user-menu-dropdown-avatar,
:root:not([data-theme="light"]) .user-menu-dropdown-avatar,
:root[data-theme="dark"] .todo-avatar-end .mark-tint,
:root:not([data-theme="light"]) .todo-avatar-end .mark-tint,
:root[data-theme="dark"] .user-profile-avatar-wrap,
:root:not([data-theme="light"]) .user-profile-avatar-wrap {
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.12), 0 3px 10px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

/* 3D Dropdown Hover Pills */
.user-menu-item {
  transition: transform var(--t-fast), background var(--t-fast), box-shadow var(--t-fast) !important;
}
.user-menu-item:hover {
  transform: translateX(2px) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.80) !important;
}
:root[data-theme="dark"] .user-menu-item:hover,
:root:not([data-theme="light"]) .user-menu-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}

/* ---- 2. Notice Board: Recessed Selects, Acknowledge Push Buttons & Date Wells ---- */
.filters select,
.item .actions select,
.dashboard-todo-main-row .actions select,
.boardbar select,
input[type=date] {
  box-shadow: var(--sh-3d-sunken) !important;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast) !important;
}
.filters select:hover,
.item .actions select:hover,
.dashboard-todo-main-row .actions select:hover,
.boardbar select:hover,
input[type=date]:hover {
  border-color: var(--rule-strong) !important;
}
.filters select:focus,
.item .actions select:focus,
.dashboard-todo-main-row .actions select:focus,
.boardbar select:focus,
input[type=date]:focus {
  box-shadow: var(--sh-3d-sunken-focus) !important;
}

/* Acknowledge Action Buttons ("Mark as Read") */
.instruction-item .btn,
.note .btn,
.mark-read-btn {
  box-shadow: 0 2.5px 0 rgba(24, 66, 114, 0.35), 0 4px 12px rgba(24, 66, 114, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
  transition: transform var(--t-instant), box-shadow var(--t-fast), background var(--t-fast) !important;
}
.instruction-item .btn:hover,
.note .btn:hover,
.mark-read-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 3.5px 0 rgba(24, 66, 114, 0.45), 0 6px 16px rgba(24, 66, 114, 0.22), inset 0 1px 0 #FFFFFF !important;
}
.instruction-item .btn:active,
.note .btn:active,
.mark-read-btn:active {
  transform: translateY(2px) !important;
  box-shadow: 0 0 0 transparent, inset 0 2px 4px rgba(0, 0, 0, 0.20) !important;
}

/* ---- 3. Clients Portal: 3D Drawer Depth, Action Menus & KPI Badges ---- */
.client-drawer,
.drawer-content {
  box-shadow: -14px 0 42px rgba(15, 23, 42, 0.22), inset 1px 0 0 rgba(255, 255, 255, 0.25) !important;
  backdrop-filter: blur(18px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
}
.client-drawer-head {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.70), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}
.client-item-card .client-sub-badge,
.client-card-stats span {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.65) !important;
}

/* ---- 4. Management: Extruded Accordion Slabs & People Directory ---- */
.dept-accordion,
.dept-card {
  box-shadow: var(--sh-3d-card) !important;
  overflow: hidden !important;
}
.dept-accordion-head,
.dept-card-header {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.80), inset 0 -1.5px 0 var(--rule) !important;
  transition: background var(--t-fast) !important;
}
:root[data-theme="dark"] .dept-accordion-head,
:root:not([data-theme="light"]) .dept-accordion-head,
:root[data-theme="dark"] .dept-card-header,
:root:not([data-theme="light"]) .dept-card-header {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), inset 0 -1.5px 0 rgba(0, 0, 0, 0.40) !important;
}
.people-card {
  box-shadow: var(--sh-3d-card) !important;
  transition: transform var(--t-fast), box-shadow var(--t-fast) !important;
}
.people-card:hover {
  transform: translateY(-3px) translateZ(0) !important;
  box-shadow: var(--sh-3d-card-hover) !important;
}

/* ---- 5. Foundation: 3D Document Binder & Bookmark Nav Tabs ---- */
.policy-reader,
.policy-card,
.policy-reader-body {
  box-shadow: var(--sh-3d-card) !important;
  border-radius: var(--r2) !important;
  position: relative !important;
}
.policy-nav button {
  transition: transform var(--t-fast), background var(--t-fast), box-shadow var(--t-fast) !important;
  border-radius: var(--r1) !important;
}
.policy-nav button:hover {
  transform: translateX(3px) !important;
  background: var(--tint) !important;
}
.policy-nav button[aria-selected="true"],
.policy-nav button.active {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 2px 8px rgba(24, 66, 114, 0.25) !important;
}

/* ---- 6. Messages Hub: Tactile Channel Keycaps & 3D Media Frames ---- */
.discord-sidebar .channel-item,
.discord-sidebar .group-item {
  transition: transform var(--t-fast), background var(--t-fast), box-shadow var(--t-fast) !important;
  border-radius: 6px !important;
}
.discord-sidebar .channel-item:hover,
.discord-sidebar .group-item:hover {
  transform: translateX(2px) !important;
  box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}
.discord-sidebar .channel-item.active,
.discord-sidebar .group-item.active {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.20) !important;
}
.group-msg-media-img img,
.group-msg-media-video video {
  border-radius: 10px !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.25) !important;
  transition: transform var(--t-fast), box-shadow var(--t-fast) !important;
}
.group-msg-media-img img:hover,
.group-msg-media-video video:hover {
  transform: scale(1.02) !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.22) !important;
}

/* ---- 7. Reports: Executive CSV Data Buttons & Floating Analytics Rows ---- */
.tablewrap {
  box-shadow: var(--sh-3d-card) !important;
  border-radius: var(--r2) !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
}
.tablewrap table {
  min-width: 840px;
}
.tablewrap::-webkit-scrollbar {
  height: 6px;
}
.tablewrap::-webkit-scrollbar-track {
  background: var(--card-bg-alt, rgba(15, 23, 42, 0.4));
  border-radius: 999px;
}
.tablewrap::-webkit-scrollbar-thumb {
  background: var(--rule-strong, rgba(148, 163, 184, 0.4));
  border-radius: 999px;
}
.tablewrap::-webkit-scrollbar-thumb:hover {
  background: var(--brand, #4c8de0);
}
.tablewrap caption {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.80) !important;
}
:root[data-theme="dark"] .tablewrap caption,
:root:not([data-theme="light"]) .tablewrap caption {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}
.tablewrap table tbody tr {
  transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast) !important;
}
.tablewrap table tbody tr:hover {
  background: var(--row-hover-bg, rgba(76, 141, 224, 0.08)) !important;
  transform: translateY(-1.5px) scale(1.002) translateZ(0) !important;
  box-shadow: 0 4px 12px -2px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.80) !important;
  position: relative !important;
  z-index: 2 !important;
}
:root[data-theme="dark"] .tablewrap table tbody tr:hover,
:root:not([data-theme="light"]) .tablewrap table tbody tr:hover {
  box-shadow: 0 4px 14px -2px rgba(0, 0, 0, 0.50), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

/* ---- 8. Todo Title: Link insertion button & Clickable Title Links ---- */
.todo-title-header {
  display: flex !important;
  align-items: center !important;
  margin-bottom: 6px !important;
}
.todo-title-header .label {
  margin-bottom: 0 !important;
}
.todo-title-input-wrap {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 38px !important;
  background: var(--input-bg, var(--card-bg)) !important;
  border: 1px solid var(--input-border, var(--rule-strong)) !important;
  border-radius: var(--r1, 6px) !important;
  box-shadow: var(--sh-3d-sunken) !important;
  padding: 4px 6px 4px 12px !important;
  box-sizing: border-box !important;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s !important;
  cursor: text !important;
}
.todo-title-input-wrap:hover {
  border-color: var(--rule-strong) !important;
}
.todo-title-input-wrap:focus-within {
  outline: none !important;
  border-color: var(--blueprint, #38bdf8) !important;
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.20), var(--sh-3d-sunken) !important;
}
.todo-title-editor {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: 0 !important;
  min-height: 28px !important;
  line-height: 28px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  margin-right: 6px !important;
  font-size: 13.5px !important;
  color: var(--input-text, var(--text)) !important;
  box-shadow: none !important;
  outline: none !important;
  cursor: text !important;
  white-space: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  box-sizing: border-box !important;
  scrollbar-width: thin !important;
}
.todo-title-editor:hover,
.todo-title-editor:focus {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}
.todo-title-link-btn {
  flex: 0 0 auto !important;
  position: static !important;
  transform: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  font-size: 12px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  color: #EC6047 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  box-shadow: none !important;
  z-index: 2 !important;
}
.todo-title-link-btn:hover {
  background: rgba(236, 96, 71, 0.14) !important;
  border-color: rgba(236, 96, 71, 0.35) !important;
  color: #FF6F57 !important;
}
.todo-title-link-btn:active {
  background: rgba(236, 96, 71, 0.25) !important;
  transform: scale(0.92) !important;
}
.todo-title-link-btn .icon,
.todo-title-link-btn svg {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
  color: #EC6047 !important;
  stroke: #EC6047 !important;
  fill: none !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  transition: stroke 0.15s ease, color 0.15s ease !important;
}
.todo-title-link-btn:hover .icon,
.todo-title-link-btn:hover svg {
  color: #FF6F57 !important;
  stroke: #FF6F57 !important;
}
.todo-title-link {
  display: inline !important;
  color: var(--signal, #fb7185) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  text-decoration-thickness: 1px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  vertical-align: baseline !important;
  transition: opacity 0.15s ease, color 0.15s ease !important;
}
.todo-title-link:hover {
  opacity: 0.85 !important;
  color: var(--signal, #fb7185) !important;
  text-decoration-thickness: 2px !important;
}
.todo-title-link .icon,
.todo-title-link svg {
  display: none !important;
}
.todo-title-editor:empty:before {
  content: attr(data-placeholder);
  color: var(--muted, #64748b) !important;
  pointer-events: none;
  display: inline-block;
}
.todo-title-editor a,
.todo-title-editor .todo-title-link,
.todo-title-editor .md-link {
  color: var(--signal, #fb7185) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  text-decoration-thickness: 1px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}
.todo-title-editor a:hover,
.todo-title-editor .todo-title-link:hover,
.todo-title-editor .md-link:hover {
  color: var(--signal, #fb7185) !important;
  opacity: 0.85 !important;
  text-decoration-thickness: 2px !important;
}

/* ==========================================================================
   UNIVERSAL INTERACTIVE LINK ACTION POPOVER & EDIT/UNLINK MODAL ACTIONS
   ========================================================================== */
.oc-link-popover {
  position: absolute;
  z-index: 10050;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--card-bg, #1e293b);
  border: 1px solid var(--rule, rgba(255, 255, 255, 0.15));
  border-radius: 8px;
  padding: 5px 8px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.45), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
  font-size: 12px;
  color: var(--ink, #f8fafc);
  pointer-events: auto;
  white-space: nowrap;
  animation: oc-popover-in 0.14s ease-out;
}
@keyframes oc-popover-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.oc-link-popover-url {
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--signal, #fb7185);
  font-weight: 600;
  padding: 0 4px;
}
.oc-link-popover-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 5px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink, #e2e8f0);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  line-height: 1.3;
  transition: all 0.15s ease;
}
.oc-link-popover-btn:hover {
  background: rgba(255, 255, 255, 0.18);
}
.oc-link-popover-btn.warning {
  color: #f59e0b;
}
.oc-link-popover-btn.warning:hover {
  background: rgba(245, 158, 11, 0.18);
  border-color: rgba(245, 158, 11, 0.35);
}
.oc-link-popover-btn.danger {
  color: #ef4444;
}
.oc-link-popover-btn.danger:hover {
  background: rgba(239, 68, 68, 0.18);
  border-color: rgba(239, 68, 68, 0.35);
}
.btn.danger, .modal-actions .btn.danger {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #ef4444 !important;
  border: 1px solid rgba(239, 68, 68, 0.4) !important;
}
.btn.danger:hover, .modal-actions .btn.danger:hover {
  background: #ef4444 !important;
  color: #ffffff !important;
}
.btn.warning, .modal-actions .btn.warning {
  background: rgba(245, 158, 11, 0.15) !important;
  color: #f59e0b !important;
  border: 1px solid rgba(245, 158, 11, 0.4) !important;
}
.btn.warning:hover, .modal-actions .btn.warning:hover {
  background: #f59e0b !important;
  color: #ffffff !important;
}

/* ==========================================================================
   ATTENDANCE DUTY MODE BADGES & PUSH PERMISSION PILL (PHASE 9)
   ========================================================================== */
.badge-att-office {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #10b981 !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 2px 8px !important;
  border-radius: 9999px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  line-height: 1.4 !important;
}

.badge-att-remote {
  background: rgba(59, 130, 246, 0.15) !important;
  color: #60a5fa !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 2px 8px !important;
  border-radius: 9999px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  line-height: 1.4 !important;
}

.push-permission-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12px !important;
  padding: 4px 12px !important;
  border-radius: 9999px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--border-color, rgba(255,255,255,0.1)) !important;
  color: var(--text-muted, #94a3b8) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}
.push-permission-pill:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}
.push-permission-pill.granted {
  background: rgba(16, 185, 129, 0.1) !important;
  border-color: rgba(16, 185, 129, 0.3) !important;
  color: #10b981 !important;
  cursor: default !important;
}

/* ==========================================================================
   GLOBAL ROW COLUMN LOCK  (full project — every list row stays aligned)
   All trailing-metadata columns get flex:none + min-width so no row ever
   shifts its siblings regardless of content length.
   ========================================================================== */

/* ── 1. DEPT / PEOPLE member rows (People page) ─────────────────────────── */
.dept-member-row,
.dept-member-pill {
  flex-wrap: nowrap !important;
}
.dept-member-left {
  flex: 1 1 0% !important;
  min-width: 0 !important;
}
.dept-member-right {
  flex: none !important;
  flex-shrink: 0 !important;
  min-width: 120px !important;
  justify-content: flex-end;
  display: flex;
  align-items: center;
  gap: 8px;
}
.dept-member-row .chip.role,
.dept-member-pill .chip.role {
  flex-shrink: 0 !important;
  min-width: 64px !important;
  text-align: center;
  justify-content: center;
}

/* ── 2. NOTIFICATION items ──────────────────────────────────────────────── */
.notif-item {
  flex-wrap: nowrap !important;
}
.notif-icon-badge {
  flex: none !important;
  width: 36px !important;
  min-width: 36px !important;
}
.notif-item-body {
  flex: 1 1 0% !important;
  min-width: 0 !important;
}
.notif-item-time {
  flex: none !important;
  white-space: nowrap !important;
  min-width: 48px !important;
  text-align: right;
}
.fb-notif-dot {
  flex: none !important;
  width: 10px !important;
  min-width: 10px !important;
}

/* ── 3. CLIENT TODO rows (Client workspace) ─────────────────────────────── */
.client-todo-item-row {
  flex-wrap: nowrap !important;
}
.client-todo-left {
  flex: 1 1 0% !important;
  min-width: 0 !important;
}
.client-todo-right,
.client-todo-actions {
  flex: none !important;
  flex-shrink: 0 !important;
  min-width: 100px !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}
.client-todo-meta {
  flex-wrap: nowrap !important;
}
.client-todo-meta > * {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

/* ── 4. CHANNEL / GROUP member rows (Messages sidebar) ─────────────────── */
.channel-member-row {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
}
.channel-member-row > *:first-child {
  flex: 1 1 0% !important;
  min-width: 0 !important;
}
.channel-member-row > *:not(:first-child) {
  flex: none !important;
  flex-shrink: 0 !important;
}

/* ── 5. ASSIGNEE picker items ───────────────────────────────────────────── */
.assignee-item-line,
.multi-picker-item-line {
  flex-wrap: nowrap !important;
}
.assignee-item-line > *,
.multi-picker-item-line > * {
  flex-shrink: 0 !important;
}
.assignee-item-line .person,
.multi-picker-item-line .person {
  flex: 1 1 0% !important;
  min-width: 0 !important;
}

/* ── 6. PORTAL stat rows / info items ──────────────────────────────────── */
.portal-stats-row {
  flex-wrap: nowrap !important;
}
.portal-stat-card {
  flex: 1 1 0% !important;
  min-width: 80px !important;
}
.portal-info-item {
  min-width: 0 !important;
}
.portal-info-item > *:last-child {
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
  text-align: left !important;
}

/* ── 7. CLIENT card meta rows ───────────────────────────────────────────── */
.client-card-meta-row {
  flex-wrap: nowrap !important;
  overflow: hidden !important;
}
.client-card-meta-row > * {
  flex-shrink: 0 !important;
}

/* ── 8. PEOPLE cards grid ───────────────────────────────────────────────── */
.people-card {
  display: flex !important;
  flex-direction: column !important;
}

/* ── 9. DASHBOARD assignee items (Filter by assignee popover) ────────────── */
.dashboard-assignee-item {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
}
.dashboard-assignee-item > .mark-tint,
.dashboard-assignee-item > .mark-avatar,
.dashboard-assignee-item > .dashboard-assignee-avatar,
.dashboard-assignee-item > .dashboard-assignee-all-icon {
  flex: none !important;
  flex-shrink: 0 !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  max-width: 28px !important;
  max-height: 28px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
}
.dashboard-assignee-item > .mark-tint img,
.dashboard-assignee-item > .mark-avatar img,
.dashboard-assignee-item .mark-avatar-img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  display: block !important;
}
.dashboard-assignee-item > .dashboard-assignee-item-info {
  flex: 1 1 0% !important;
  min-width: 0 !important;
}
.dashboard-assignee-item > .dashboard-assignee-item-meta {
  flex: none !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;
}

/* ── 10. INSTRUCTION card rows (Client workspace) ───────────────────────── */
.client-instruction-item-card {
  flex-wrap: nowrap !important;
}

/* ── 11. ACTIVITY timeline entries ─────────────────────────────────────── */
.tl-entry {
  flex-wrap: nowrap !important;
}

/* ── 12. Prevent ALL chip types from causing column shift ───────────────── */
.chip {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

/* ── 13. USER profile rows ──────────────────────────────────────────────── */
.user-profile-title-row,
.user-profile-role-line,
.user-profile-meta-line {
  flex-wrap: nowrap !important;
}
.user-profile-title-row > *,
.user-profile-role-line > *,
.user-profile-meta-line > * {
  flex-shrink: 0 !important;
}

/* ── 14. COMMENT / FORM rows ────────────────────────────────────────────── */
.comment-form-row {
  flex-wrap: nowrap !important;
}
.comment-form-row > * {
  flex-shrink: 0 !important;
}
.comment-form-row input,
.comment-form-row textarea {
  flex: 1 1 0% !important;
  min-width: 0 !important;
}

/* ── 15. TODO detail lines ──────────────────────────────────────────────── */
.todo-detail-line {
  flex-wrap: nowrap !important;
}
.todo-detail-line > *:first-child {
  flex: none !important;
  width: 130px !important;
  min-width: 130px !important;
  max-width: 130px !important;
}
.todo-detail-line > *:last-child {
  flex: 1 1 0% !important;
  min-width: 0 !important;
}

/* =========================================================================
   16. DASHBOARD SCHEDULE SECTIONS (Overdue, Today, Tomorrow, This Week, Upcoming)
   ========================================================================= */
.dashboard-schedule-sections {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dashboard-schedule-section {
  display: flex;
  flex-direction: column;
  border-radius: var(--r2, 8px);
  transition: background var(--t-fast, 0.15s ease);
}

.dashboard-schedule-header {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  background: transparent;
  border: none;
  padding: 3px 0 6px 0;
  cursor: pointer;
  user-select: none;
  transition: transform var(--t-fast, 0.15s ease), opacity var(--t-fast, 0.15s ease);
}

.dashboard-schedule-header:hover {
  transform: translateY(-1px);
}

.dashboard-schedule-header:focus-visible {
  outline: 2px solid var(--accent, #3b82f6);
  outline-offset: 2px;
  border-radius: 6px;
}

/* The small capsule pill matching [◎ DANIELA] - Uniform Equal Sizing */
.dashboard-schedule-capsule {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  width: 114px;
  min-width: 114px;
  height: 25px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #ffffff;
  white-space: nowrap;
  box-sizing: border-box;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: filter var(--t-fast, 0.15s ease), box-shadow var(--t-fast, 0.15s ease);
}

.dashboard-schedule-header:hover .dashboard-schedule-capsule {
  filter: brightness(1.1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* Category capsule solid colors */
.dashboard-schedule-capsule.is-overdue {
  background: #dc2626;
  color: #ffffff;
}

.dashboard-schedule-capsule.is-today {
  background: #d97706;
  color: #ffffff;
}

.dashboard-schedule-capsule.is-tomorrow {
  background: #0284c7;
  color: #ffffff;
}

.dashboard-schedule-capsule.is-this-week {
  background: #7c3aed;
  color: #ffffff;
}

.dashboard-schedule-capsule.is-upcoming {
  background: #475569;
  color: #ffffff;
}

/* The concentric circle icon inside the capsule (white outer ring + white centered dot) */
.dashboard-schedule-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  min-width: 12px;
  min-height: 12px;
  border-radius: 50%;
  border: 1.8px solid currentColor;
  box-sizing: border-box;
  flex-shrink: 0;
  position: relative;
}

.dashboard-schedule-circle-dot {
  display: block;
  width: 3.5px;
  height: 3.5px;
  min-width: 3.5px;
  min-height: 3.5px;
  border-radius: 50%;
  background-color: currentColor;
  flex-shrink: 0;
}

.dashboard-schedule-label {
  font-size: 11.5px;
  font-weight: 700;
  color: inherit;
  line-height: 1.2;
}

/* The count number right next to the capsule matching "65" in Daniela */
.dashboard-schedule-count {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary, #94a3b8);
  margin-left: 2px;
  transition: color var(--t-fast, 0.15s ease);
}

.dashboard-schedule-header:hover .dashboard-schedule-count {
  color: var(--text, #f1f5f9);
}

/* Collapsed state styling */
.dashboard-schedule-section.is-collapsed .dashboard-schedule-header {
  opacity: 0.75;
}

.dashboard-schedule-section.is-collapsed .dashboard-schedule-header:hover {
  opacity: 1;
}

.dashboard-schedule-header-right {
  display: inline-flex;
  align-items: center;
}

.dashboard-schedule-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted, #64748b);
  transition: transform var(--t-fast, 0.15s ease), color var(--t-fast, 0.15s ease);
}

.dashboard-schedule-header:hover .dashboard-schedule-toggle {
  color: var(--text, #f1f5f9);
}

.dashboard-schedule-body {
  display: flex;
  flex-direction: column;
  padding-left: 2px;
  margin-bottom: 4px;
}

.dashboard-schedule-body > .dashboard-todo-row:last-child {
  margin-bottom: 2px;
}

.dashboard-schedule-empty {
  font-size: 12px;
  font-style: italic;
  color: var(--text-muted, #64748b);
  padding: 6px 12px 10px 28px;
}

/* ---- Foundation: Inline Expandable Accordion Rule Cards ------------------ */
.foundation-card,
.foundation-card:hover,
.foundation-card:active,
.foundation-card:focus,
.foundation-card.is-expanded,
.foundation-card.is-expanded:hover,
.foundation-card.is-expanded:active,
.policy-card,
.policy-card:hover,
.policy-card:active {
  transform: none !important;
  content-visibility: visible !important;
}

.foundation-card {
  position: relative;
  transition: border-color var(--t-fast, 0.15s ease), box-shadow var(--t-fast, 0.15s ease), background var(--t-fast, 0.15s ease);
}

.foundation-card:hover {
  border-color: var(--primary, #3b82f6);
}

.foundation-card.is-expanded,
.foundation-card.is-expanded:hover {
  border-color: rgba(59, 130, 246, 0.45);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(59, 130, 246, 0.2);
  background: var(--card-bg, #0f172a);
}

.foundation-card-chevron {
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), color 0.15s ease;
}

.foundation-card:hover .foundation-card-chevron {
  color: var(--primary, #60a5fa);
}

.foundation-card-chevron svg {
  width: 14px;
  height: 14px;
}

.foundation-card-expanded-body {
  animation: foundationExpandSlide 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes foundationExpandSlide {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* =========================================================================
   Foundation Rule Full Body — System Color Auto Engine (Rule 97)
   Full theme responsiveness across Dark, Light, and System Auto modes.
   Prevents white-on-white text, neutralizes leaked container styles, and
   harmonizes embedded HTML with high-contrast, premium typography.
   ========================================================================= */

.foundation-rule-full-body {
  font-family: var(--font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  font-size: 14.5px;
  line-height: 1.68;
  color: var(--ink, #f8fafc);
  background: transparent;
  word-break: break-word;
}

.foundation-rule-full-body * {
  box-sizing: border-box;
}

.foundation-card-body-content,
.foundation-modal-body-wrapper {
  color: var(--ink, #f8fafc);
  background: transparent;
}

/* Base typography */
.foundation-rule-full-body h1,
.foundation-rule-full-body h2,
.foundation-rule-full-body h3,
.foundation-rule-full-body h4,
.foundation-rule-full-body h5,
.foundation-rule-full-body h6 {
  margin-top: 1.25em;
  margin-bottom: 0.5em;
  font-weight: 700;
  line-height: 1.3;
}

.foundation-rule-full-body p {
  margin: 0.75em 0;
  line-height: 1.68;
}

.foundation-rule-full-body ul,
.foundation-rule-full-body ol {
  padding-left: 1.6em;
  margin: 0.85em 0;
}

.foundation-rule-full-body li {
  margin: 0.4em 0;
}

.foundation-rule-full-body a {
  color: var(--primary, #4c8de0);
  text-decoration: underline;
}

.foundation-rule-full-body hr,
.policy-document-canvas hr,
hr.editor-divider {
  width: 100% !important;
  max-width: 100% !important;
  border: none !important;
  height: 3px !important;
  background: #000000 !important;
  background-color: #000000 !important;
  border-radius: 3px !important;
  margin: 18px auto !important;
  display: block !important;
  clear: both !important;
  opacity: 1 !important;
  cursor: pointer !important;
}

/* -------------------------------------------------------------------------
   A. DARK THEME / SYSTEM AUTO DARK
   Active when :root[data-theme="dark"] OR :root:not([data-theme="light"])
   ------------------------------------------------------------------------- */
:root[data-theme="dark"] .foundation-card,
:root:not([data-theme="light"]) .foundation-card {
  background: var(--card-bg, #0f172a) !important;
  border: 1px solid var(--rule, rgba(255, 255, 255, 0.1)) !important;
}

:root[data-theme="dark"] .foundation-card-expanded-body,
:root[data-theme="dark"] .foundation-card-body-content,
:root[data-theme="dark"] .foundation-rule-full-body,
:root[data-theme="dark"] .foundation-modal-body-wrapper,
:root:not([data-theme="light"]) .foundation-card-expanded-body,
:root:not([data-theme="light"]) .foundation-card-body-content,
:root:not([data-theme="light"]) .foundation-rule-full-body,
:root:not([data-theme="light"]) .foundation-modal-body-wrapper {
  background: var(--card-bg, #0f172a) !important;
  color: var(--ink, #f8fafc) !important;
}

/* Container / Sections in Dark Mode */
:root[data-theme="dark"] .foundation-rule-full-body .section,
:root[data-theme="dark"] .foundation-rule-full-body section,
:root[data-theme="dark"] .foundation-rule-full-body article,
:root[data-theme="dark"] .foundation-rule-full-body .card,
:root[data-theme="dark"] .foundation-rule-full-body div[class*="section"],
:root[data-theme="dark"] .foundation-rule-full-body main,
:root:not([data-theme="light"]) .foundation-rule-full-body .section,
:root:not([data-theme="light"]) .foundation-rule-full-body section,
:root:not([data-theme="light"]) .foundation-rule-full-body article,
:root:not([data-theme="light"]) .foundation-rule-full-body .card,
:root:not([data-theme="light"]) .foundation-rule-full-body div[class*="section"],
:root:not([data-theme="light"]) .foundation-rule-full-body main {
  background: var(--card-bg, #111c2e) !important;
  border: 1px solid var(--rule, rgba(255, 255, 255, 0.12)) !important;
  border-radius: 14px !important;
  color: var(--ink, #f8fafc) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
  padding: 24px !important;
  margin-bottom: 22px !important;
}

/* Headings in Dark Mode — Crisp High-Contrast */
:root[data-theme="dark"] .foundation-rule-full-body h1,
:root:not([data-theme="light"]) .foundation-rule-full-body h1 {
  color: #ffffff !important;
  font-weight: 800 !important;
}

:root[data-theme="dark"] .foundation-rule-full-body h2,
:root[data-theme="dark"] .foundation-rule-full-body h3,
:root[data-theme="dark"] .foundation-rule-full-body [role="heading"],
:root[data-theme="dark"] .foundation-rule-full-body [aria-level],
:root[data-theme="dark"] .foundation-rule-full-body .otQkpb,
:root:not([data-theme="light"]) .foundation-rule-full-body h2,
:root:not([data-theme="light"]) .foundation-rule-full-body h3,
:root:not([data-theme="light"]) .foundation-rule-full-body [role="heading"],
:root:not([data-theme="light"]) .foundation-rule-full-body [aria-level],
:root:not([data-theme="light"]) .foundation-rule-full-body .otQkpb {
  color: #60a5fa !important; /* Luminous crisp sky-blue */
  font-weight: 700 !important;
}

:root[data-theme="dark"] .foundation-rule-full-body h4,
:root:not([data-theme="light"]) .foundation-rule-full-body h4 {
  color: #93c5fd !important;
  font-weight: 600 !important;
}

:root[data-theme="dark"] .foundation-rule-full-body h5,
:root:not([data-theme="light"]) .foundation-rule-full-body h5,
:root[data-theme="dark"] .foundation-rule-full-body h6,
:root:not([data-theme="light"]) .foundation-rule-full-body h6 {
  color: #cbd5e1 !important;
  font-weight: 600 !important;
}

/* Paragraphs, List Items & Text in Dark Mode */
:root[data-theme="dark"] .foundation-rule-full-body p,
:root:not([data-theme="light"]) .foundation-rule-full-body p {
  color: var(--ink, #f8fafc) !important;
}

:root[data-theme="dark"] .foundation-rule-full-body li,
:root:not([data-theme="light"]) .foundation-rule-full-body li {
  color: var(--ink, #f8fafc) !important;
}

:root[data-theme="dark"] .foundation-rule-full-body div,
:root[data-theme="dark"] .foundation-rule-full-body span,
:root:not([data-theme="light"]) .foundation-rule-full-body div,
:root:not([data-theme="light"]) .foundation-rule-full-body span {
  color: inherit;
}

:root[data-theme="dark"] .foundation-rule-full-body strong,
:root[data-theme="dark"] .foundation-rule-full-body b,
:root[data-theme="dark"] .foundation-rule-full-body .rQesXe,
:root:not([data-theme="light"]) .foundation-rule-full-body strong,
:root:not([data-theme="light"]) .foundation-rule-full-body b,
:root:not([data-theme="light"]) .foundation-rule-full-body .rQesXe {
  color: #ffffff !important;
  font-weight: 700 !important;
}

:root[data-theme="dark"] .foundation-rule-full-body a,
:root[data-theme="dark"] .foundation-rule-full-body .md-link,
:root[data-theme="dark"] .foundation-rule-full-body .H23r4e,
:root:not([data-theme="light"]) .foundation-rule-full-body a,
:root:not([data-theme="light"]) .foundation-rule-full-body .md-link,
:root:not([data-theme="light"]) .foundation-rule-full-body .H23r4e {
  color: #38bdf8 !important;
  text-decoration: underline !important;
}

:root[data-theme="dark"] .foundation-rule-full-body .small,
:root:not([data-theme="light"]) .foundation-rule-full-body .small {
  color: var(--text-dim, #94a3b8) !important;
}

:root[data-theme="dark"] .foundation-rule-full-body .page-title,
:root[data-theme="dark"] .foundation-rule-full-body .label,
:root:not([data-theme="light"]) .foundation-rule-full-body .page-title,
:root:not([data-theme="light"]) .foundation-rule-full-body .label {
  color: var(--brand-orange, #ec6047) !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Callouts / Highlights / Goals in Dark Mode */
:root[data-theme="dark"] .foundation-rule-full-body .callout,
:root[data-theme="dark"] .foundation-rule-full-body blockquote,
:root[data-theme="dark"] .foundation-rule-full-body .note,
:root[data-theme="dark"] .foundation-rule-full-body .alert,
:root:not([data-theme="light"]) .foundation-rule-full-body .callout,
:root:not([data-theme="light"]) .foundation-rule-full-body blockquote,
:root:not([data-theme="light"]) .foundation-rule-full-body .note,
:root:not([data-theme="light"]) .foundation-rule-full-body .alert {
  background: rgba(236, 96, 71, 0.12) !important;
  border-left: 4px solid var(--brand-orange, #ec6047) !important;
  border-radius: 6px 12px 12px 6px !important;
  padding: 16px 20px !important;
  margin: 18px 0 !important;
  color: #f8fafc !important;
}

:root[data-theme="dark"] .foundation-rule-full-body .callout strong,
:root[data-theme="dark"] .foundation-rule-full-body .callout b,
:root:not([data-theme="light"]) .foundation-rule-full-body .callout strong,
:root:not([data-theme="light"]) .foundation-rule-full-body .callout b {
  color: #ff9d80 !important;
  font-weight: 700 !important;
}

/* Hero Banners in Dark Mode */
:root[data-theme="dark"] .foundation-rule-full-body .hero,
:root:not([data-theme="light"]) .foundation-rule-full-body .hero {
  background: linear-gradient(135deg, #0d2138 0%, #163659 60%, #1c4573 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 14px !important;
  color: #ffffff !important;
  padding: 30px 24px !important;
  margin-bottom: 22px !important;
}

:root[data-theme="dark"] .foundation-rule-full-body .hero h1,
:root:not([data-theme="light"]) .foundation-rule-full-body .hero h1 {
  color: #ffffff !important;
}

:root[data-theme="dark"] .foundation-rule-full-body .hero p,
:root:not([data-theme="light"]) .foundation-rule-full-body .hero p {
  color: #e2e8f0 !important;
}

:root[data-theme="dark"] .foundation-rule-full-body .hero .chip,
:root:not([data-theme="light"]) .foundation-rule-full-body .hero .chip {
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
}

/* Nav Bars inside Rule in Dark Mode */
:root[data-theme="dark"] .foundation-rule-full-body nav,
:root:not([data-theme="light"]) .foundation-rule-full-body nav {
  background: var(--card-bg-alt, #162740) !important;
  border: 1px solid var(--rule, rgba(255, 255, 255, 0.1)) !important;
  border-radius: 8px !important;
  position: static !important;
  padding: 10px 16px !important;
  margin-bottom: 18px !important;
}

:root[data-theme="dark"] .foundation-rule-full-body nav a,
:root:not([data-theme="light"]) .foundation-rule-full-body nav a {
  color: var(--primary, #4c8de0) !important;
  text-decoration: none !important;
}

:root[data-theme="dark"] .foundation-rule-full-body nav a:hover,
:root:not([data-theme="light"]) .foundation-rule-full-body nav a:hover {
  color: #93c5fd !important;
  text-decoration: underline !important;
}

/* Tables in Dark Mode */
:root[data-theme="dark"] .foundation-rule-full-body .table-wrap,
:root:not([data-theme="light"]) .foundation-rule-full-body .table-wrap {
  border: 1px solid var(--rule, rgba(255, 255, 255, 0.12)) !important;
  border-radius: 12px !important;
  background: var(--card-bg, #111c2e) !important;
  overflow-x: auto !important;
  margin: 18px 0 22px !important;
}

:root[data-theme="dark"] .foundation-rule-full-body table,
:root:not([data-theme="light"]) .foundation-rule-full-body table {
  background: transparent !important;
  border-collapse: collapse !important;
  width: 100% !important;
  color: var(--ink, #f8fafc) !important;
}

:root[data-theme="dark"] .foundation-rule-full-body th,
:root:not([data-theme="light"]) .foundation-rule-full-body th {
  background: #173b61 !important;
  color: #ffffff !important;
  border-bottom: 2px solid rgba(255, 255, 255, 0.12) !important;
  padding: 12px 16px !important;
  font-weight: 600 !important;
}

:root[data-theme="dark"] .foundation-rule-full-body td,
:root:not([data-theme="light"]) .foundation-rule-full-body td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #e2e8f0 !important;
  padding: 12px 16px !important;
}

:root[data-theme="dark"] .foundation-rule-full-body tr:nth-child(even) td,
:root:not([data-theme="light"]) .foundation-rule-full-body tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.03) !important;
}

:root[data-theme="dark"] .foundation-rule-full-body footer,
:root:not([data-theme="light"]) .foundation-rule-full-body footer {
  color: var(--text-dim, #94a3b8) !important;
  border-top: 1px solid var(--rule, rgba(255, 255, 255, 0.08)) !important;
  padding: 20px 0 !important;
}

/* -------------------------------------------------------------------------
   B. LIGHT THEME (data-theme="light")
   ------------------------------------------------------------------------- */
:root[data-theme="light"] .foundation-card {
  background: #ffffff !important;
  border: 1px solid #dbe5ec !important;
}

:root[data-theme="light"] .foundation-card-expanded-body,
:root[data-theme="light"] .foundation-card-body-content,
:root[data-theme="light"] .foundation-rule-full-body,
:root[data-theme="light"] .foundation-modal-body-wrapper {
  background: #ffffff !important;
  color: var(--ink, #0f172a) !important;
}

:root[data-theme="light"] .foundation-rule-full-body .section,
:root[data-theme="light"] .foundation-rule-full-body section,
:root[data-theme="light"] .foundation-rule-full-body article,
:root[data-theme="light"] .foundation-rule-full-body .card,
:root[data-theme="light"] .foundation-rule-full-body div[class*="section"],
:root[data-theme="light"] .foundation-rule-full-body main {
  background: #ffffff !important;
  border: 1px solid #dbe5ec !important;
  border-radius: 14px !important;
  color: #1f2937 !important;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06) !important;
  padding: 24px !important;
  margin-bottom: 22px !important;
}

:root[data-theme="light"] .foundation-rule-full-body h1 {
  color: #0f172a !important;
  font-weight: 800 !important;
}

:root[data-theme="light"] .foundation-rule-full-body h2,
:root[data-theme="light"] .foundation-rule-full-body h3,
:root[data-theme="light"] .foundation-rule-full-body [role="heading"],
:root[data-theme="light"] .foundation-rule-full-body [aria-level],
:root[data-theme="light"] .foundation-rule-full-body .otQkpb {
  color: #174A78 !important;
  font-weight: 700 !important;
}

:root[data-theme="light"] .foundation-rule-full-body h4 {
  color: #174A78 !important;
  font-weight: 600 !important;
}

:root[data-theme="light"] .foundation-rule-full-body h5,
:root[data-theme="light"] .foundation-rule-full-body h6 {
  color: #334155 !important;
  font-weight: 600 !important;
}

:root[data-theme="light"] .foundation-rule-full-body p,
:root[data-theme="light"] .foundation-rule-full-body li {
  color: #334155 !important;
}

:root[data-theme="light"] .foundation-rule-full-body div,
:root[data-theme="light"] .foundation-rule-full-body span {
  color: inherit;
}

:root[data-theme="light"] .foundation-rule-full-body strong,
:root[data-theme="light"] .foundation-rule-full-body b,
:root[data-theme="light"] .foundation-rule-full-body .rQesXe {
  color: #0f172a !important;
  font-weight: 700 !important;
}

:root[data-theme="light"] .foundation-rule-full-body a,
:root[data-theme="light"] .foundation-rule-full-body .md-link,
:root[data-theme="light"] .foundation-rule-full-body .H23r4e {
  color: #1d4ed8 !important;
  text-decoration: underline !important;
}

:root[data-theme="light"] .foundation-rule-full-body .callout,
:root[data-theme="light"] .foundation-rule-full-body blockquote,
:root[data-theme="light"] .foundation-rule-full-body .note,
:root[data-theme="light"] .foundation-rule-full-body .alert {
  background: #fff8f4 !important;
  border-left: 5px solid #F06440 !important;
  border-radius: 6px 12px 12px 6px !important;
  padding: 16px 20px !important;
  margin: 18px 0 !important;
  color: #1f2937 !important;
}

:root[data-theme="light"] .foundation-rule-full-body .callout strong,
:root[data-theme="light"] .foundation-rule-full-body .callout b {
  color: #174A78 !important;
}

:root[data-theme="light"] .foundation-rule-full-body .hero {
  background: linear-gradient(125deg, #123d64, #174A78 70%, #103653) !important;
  border-radius: 14px !important;
  color: #ffffff !important;
  padding: 30px 24px !important;
  margin-bottom: 22px !important;
}

:root[data-theme="light"] .foundation-rule-full-body .hero h1 {
  color: #ffffff !important;
}

:root[data-theme="light"] .foundation-rule-full-body .hero p {
  color: #e4edf4 !important;
}

:root[data-theme="light"] .foundation-rule-full-body nav {
  background: #ffffffef !important;
  border: 1px solid #dbe5ec !important;
  border-radius: 8px !important;
  position: static !important;
  padding: 10px 16px !important;
  margin-bottom: 18px !important;
}

:root[data-theme="light"] .foundation-rule-full-body nav a {
  color: #174A78 !important;
}

:root[data-theme="light"] .foundation-rule-full-body .table-wrap {
  border: 1px solid #dbe5ec !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  overflow-x: auto !important;
  margin: 18px 0 22px !important;
}

:root[data-theme="light"] .foundation-rule-full-body table {
  background: #ffffff !important;
  border-collapse: collapse !important;
  width: 100% !important;
  color: #1f2937 !important;
}

:root[data-theme="light"] .foundation-rule-full-body th {
  background: #174A78 !important;
  color: #ffffff !important;
  padding: 12px 16px !important;
}

:root[data-theme="light"] .foundation-rule-full-body td {
  border-bottom: 1px solid #e8eef3 !important;
  color: #334155 !important;
  padding: 12px 16px !important;
}

:root[data-theme="light"] .foundation-rule-full-body tr:nth-child(even) td {
  background: #f9fbfd !important;
}

:root[data-theme="light"] .foundation-rule-full-body footer {
  color: #718191 !important;
  border-top: 1px solid #e2e8f0 !important;
  padding: 20px 0 !important;
}

/* ---- Dashboard Single Panel Board & Instructions Tab --------------------- */
.board.is-single-panel,
.board:has(> .panel:only-child) {
  grid-template-columns: 1fr !important;
}

#dashboard-stat-instructions-btn.active {
  border-color: var(--accent, #0284c7) !important;
  box-shadow: 0 0 12px rgba(2, 132, 199, 0.25) !important;
}

#dashboard-back-todos-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 4px 12px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  transition: background var(--t-fast, 0.15s ease), border-color var(--t-fast, 0.15s ease);
}

/* ---- Foundation Document Access & Permissions (Rule 50) ------------------- */
.foundation-access-chip {
  cursor: default;
  user-select: none;
  font-family: var(--font-body, system-ui, sans-serif);
  line-height: 1.2;
}

.foundation-access-chip.foundation-access-public {
  background: rgba(16, 185, 129, 0.14) !important;
  color: #34d399 !important;
  border: 1px solid rgba(16, 185, 129, 0.35) !important;
}

.foundation-access-chip.foundation-access-restricted {
  background: rgba(245, 158, 11, 0.14) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(245, 158, 11, 0.35) !important;
}

.foundation-access-chip.foundation-access-specific {
  background: rgba(168, 85, 247, 0.14) !important;
  color: #c084fc !important;
  border: 1px solid rgba(168, 85, 247, 0.35) !important;
}

.foundation-access-btn {
  color: var(--text-dim, #94a3b8);
  transition: color 0.15s ease, background 0.15s ease;
}

.foundation-access-btn:hover {
  color: var(--primary, #60a5fa) !important;
  background: rgba(96, 165, 250, 0.12) !important;
}

.foundation-access-option-card {
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.foundation-access-option-card:hover {
  border-color: rgba(96, 165, 250, 0.45) !important;
}

.foundation-user-checklist::-webkit-scrollbar {
  width: 6px;
}

.foundation-user-checklist::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
}

/* ---- Topbar Capsule Quick Links (Prospect Insight & Originate Marketing) ---- */
.topbar-capsules {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: 6px;
}

.topbar-capsule-btn {
  display: inline-flex;
  align-items: center;
  gap: 6.5px;
  height: 30px;
  padding: 0 12px;
  font-family: var(--font-sans, 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1;
  color: var(--text-secondary, #94a3b8);
  background: var(--card-bg-alt, rgba(255, 255, 255, 0.05));
  border: 1px solid var(--rule, rgba(255, 255, 255, 0.12));
  border-radius: var(--r-pill, 9999px);
  text-decoration: none;
  white-space: nowrap;
  box-shadow: var(--sh-3d-badge, 0 1px 3px rgba(0, 0, 0, 0.25));
  transition: all var(--t-fast, 0.15s) ease;
  cursor: pointer;
}

.topbar-capsule-btn:hover {
  background: var(--card-bg, rgba(255, 255, 255, 0.10));
  border-color: var(--rule-strong, rgba(255, 255, 255, 0.25));
  color: var(--ink, #ffffff);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.32);
}

.topbar-capsule-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.topbar-capsule-btn .capsule-dot {
  width: 6.5px;
  height: 6.5px;
  border-radius: 50%;
  flex-shrink: 0;
}

.topbar-capsule-btn .dot-prospect {
  background-color: #38bdf8;
  box-shadow: 0 0 7px rgba(56, 189, 248, 0.65);
}

.topbar-capsule-btn .dot-originate {
  background-color: #f97316;
  box-shadow: 0 0 7px rgba(249, 115, 22, 0.65);
}

.topbar-capsule-btn .capsule-label {
  letter-spacing: -0.01em;
}

.topbar-capsule-btn .capsule-icon {
  width: 11px;
  height: 11px;
  opacity: 0.65;
  stroke-width: 1.8;
  transition: opacity var(--t-fast, 0.15s) ease;
}

.topbar-capsule-btn:hover .capsule-icon {
  opacity: 1;
}

@media (max-width: 900px) {
  .topbar-capsule-btn .capsule-label {
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (max-width: 700px) {
  .topbar-capsules {
    display: none;
  }
}

/* =========================================================================
   Universal Search Bar & Command Palette (Linear / Chrome style)
   ========================================================================= */
.topbar-universal-search {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 16px;
  min-width: 0;
  z-index: 105;
}

.topbar-search-container {
  position: relative;
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
}

.topbar-search-box {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  background: var(--card-bg-alt, rgba(255, 255, 255, 0.05));
  border: 1px solid var(--rule, rgba(255, 255, 255, 0.12));
  border-radius: var(--r-pill, 9999px);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.22);
  transition: all var(--t-fast, 0.15s) ease;
}

.topbar-universal-search:hover .topbar-search-box {
  background: var(--card-bg, rgba(255, 255, 255, 0.08));
  border-color: var(--rule-strong, rgba(255, 255, 255, 0.22));
}

.topbar-universal-search.is-open .topbar-search-box,
.topbar-search-box:focus-within {
  background: var(--card-bg, rgba(255, 255, 255, 0.10));
  border-color: var(--accent, #0284c7);
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.25), 0 4px 16px rgba(0, 0, 0, 0.35);
}

.topbar-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary, #94a3b8);
  pointer-events: none;
  z-index: 2;
}

.topbar-search-icon svg {
  width: 15px;
  height: 15px;
  display: block;
}

/* Specificity override: prevents 02-base.css input[type=text] padding: 0 12px from overlapping the icon */
input[type="text"].topbar-search-input,
.topbar-search-box input.topbar-search-input,
.topbar-search-input {
  width: 100% !important;
  height: 34px !important;
  padding: 0 68px 0 38px !important;
  padding-left: 38px !important;
  padding-right: 68px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  font-family: var(--font-sans, 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--ink, #ffffff) !important;
  line-height: 34px !important;
}

.topbar-search-input::placeholder {
  color: var(--text-muted, #64748b) !important;
  opacity: 0.9 !important;
}

.topbar-search-kbd {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary, #94a3b8);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 4px;
  pointer-events: none;
  line-height: 1.1;
  transition: opacity var(--t-fast, 0.15s) ease;
}

.topbar-search-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.12);
  border: none;
  border-radius: 50%;
  color: var(--text-secondary, #94a3b8);
  cursor: pointer;
  padding: 0;
  transition: all var(--t-fast, 0.15s) ease;
}

.topbar-search-clear:hover {
  background: rgba(239, 68, 68, 0.25);
  color: #ef4444;
}

.topbar-search-clear svg {
  width: 11px;
  height: 11px;
}

.topbar-universal-search.has-value .topbar-search-clear {
  display: inline-flex;
}

.topbar-universal-search.has-value .topbar-search-kbd {
  display: none;
}

/* Dropdown popover */
.topbar-search-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 100%;
  min-width: 440px;
  max-height: 480px;
  overflow-y: auto;
  background: var(--bg-surface, #0f172a);
  border: 1px solid var(--rule-strong, rgba(255, 255, 255, 0.15));
  border-radius: 12px;
  box-shadow: 0 20px 48px -4px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.05);
  z-index: 1000;
  padding: 6px 0;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-sizing: border-box;
}

.topbar-search-group-header {
  padding: 8px 14px 4px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted, #64748b);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.topbar-search-group-header .group-count {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--text-secondary, #94a3b8);
}

.topbar-search-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  cursor: pointer;
  transition: background 0.12s ease;
  user-select: none;
}

.topbar-search-item:hover,
.topbar-search-item.is-selected {
  background: var(--hover-bg, rgba(2, 132, 199, 0.16));
}

.topbar-search-item-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  color: var(--accent, #38bdf8);
  flex-shrink: 0;
}

.topbar-search-item-icon svg {
  width: 14px;
  height: 14px;
}

.topbar-search-item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.topbar-search-item-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink, #ffffff);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar-search-item-subtitle {
  font-size: 11px;
  color: var(--text-secondary, #94a3b8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

mark.search-highlight {
  background: rgba(249, 115, 22, 0.28);
  color: #fb923c;
  font-weight: 700;
  border-radius: 2px;
  padding: 0 1px;
}

.topbar-search-empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--text-secondary, #94a3b8);
}

.topbar-search-empty .search-empty-icon svg {
  width: 32px;
  height: 32px;
  opacity: 0.4;
}

.topbar-search-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 14px;
  border-top: 1px solid var(--rule, rgba(255, 255, 255, 0.08));
  font-size: 10.5px;
  color: var(--text-muted, #64748b);
  background: rgba(0, 0, 0, 0.18);
  margin-top: 4px;
}

.topbar-search-footer kbd {
  font-family: inherit;
  font-weight: 600;
  padding: 1px 4px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-secondary, #94a3b8);
}

@media (max-width: 1024px) {
  .topbar-universal-search {
    margin: 0 10px;
  }
  .topbar-search-container {
    max-width: 360px;
  }
}

@media (max-width: 768px) {
  .topbar-universal-search {
    margin: 0 8px;
  }
  .topbar-search-container {
    max-width: 280px;
  }
  .topbar-search-dropdown {
    position: fixed !important;
    top: calc(var(--topbar-h, 64px) + 6px) !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    min-width: 0 !important;
  }
}

@media (max-width: 540px) {
  .topbar-universal-search {
    margin: 0 4px;
  }
  .topbar-search-container {
    max-width: 220px;
  }
  .topbar-search-kbd {
    display: none;
  }
  .topbar-search-input {
    padding-right: 28px !important;
    font-size: 12px !important;
  }
}

/* ---- Universal Search Bar Light / Day Theme Adaptations ---- */
:root[data-theme="light"] .topbar-search-box,
[data-theme="light"] .topbar-search-box {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), inset 0 1px 1px rgba(0, 0, 0, 0.02) !important;
}

:root[data-theme="light"] .topbar-universal-search:hover .topbar-search-box,
[data-theme="light"] .topbar-universal-search:hover .topbar-search-box {
  background: #ffffff !important;
  border-color: #94a3b8 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
}

:root[data-theme="light"] .topbar-universal-search.is-open .topbar-search-box,
:root[data-theme="light"] .topbar-search-box:focus-within,
[data-theme="light"] .topbar-universal-search.is-open .topbar-search-box,
[data-theme="light"] .topbar-search-box:focus-within {
  background: #ffffff !important;
  border-color: #0284c7 !important;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.18), 0 4px 14px rgba(0, 0, 0, 0.08) !important;
}

:root[data-theme="light"] input[type="text"].topbar-search-input,
:root[data-theme="light"] .topbar-search-box input.topbar-search-input,
:root[data-theme="light"] .topbar-search-input,
[data-theme="light"] input[type="text"].topbar-search-input,
[data-theme="light"] .topbar-search-box input.topbar-search-input,
[data-theme="light"] .topbar-search-input {
  color: #0f172a !important;
}

:root[data-theme="light"] .topbar-search-input::placeholder,
[data-theme="light"] .topbar-search-input::placeholder {
  color: #64748b !important;
}

:root[data-theme="light"] .topbar-search-icon,
[data-theme="light"] .topbar-search-icon {
  color: #64748b !important;
}

:root[data-theme="light"] .topbar-search-kbd,
[data-theme="light"] .topbar-search-kbd {
  color: #475569 !important;
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}

:root[data-theme="light"] .topbar-search-clear,
[data-theme="light"] .topbar-search-clear {
  background: rgba(0, 0, 0, 0.06) !important;
  color: #64748b !important;
}

:root[data-theme="light"] .topbar-search-clear:hover,
[data-theme="light"] .topbar-search-clear:hover {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #ef4444 !important;
}

:root[data-theme="light"] .topbar-search-dropdown,
[data-theme="light"] .topbar-search-dropdown {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 16px 40px -4px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
}

:root[data-theme="light"] .topbar-search-group-header,
[data-theme="light"] .topbar-search-group-header {
  color: #64748b !important;
  background: #f8fafc !important;
}

:root[data-theme="light"] .topbar-search-group-header .group-count,
[data-theme="light"] .topbar-search-group-header .group-count {
  background: rgba(0, 0, 0, 0.05) !important;
  color: #475569 !important;
}

:root[data-theme="light"] .topbar-search-item,
[data-theme="light"] .topbar-search-item {
  color: #0f172a !important;
}

:root[data-theme="light"] .topbar-search-item:hover,
:root[data-theme="light"] .topbar-search-item.is-selected,
[data-theme="light"] .topbar-search-item:hover,
[data-theme="light"] .topbar-search-item.is-selected {
  background: rgba(2, 132, 199, 0.08) !important;
}

:root[data-theme="light"] .topbar-search-item-icon,
[data-theme="light"] .topbar-search-item-icon {
  background: #f1f5f9 !important;
  color: #0284c7 !important;
}

:root[data-theme="light"] .topbar-search-item-title,
[data-theme="light"] .topbar-search-item-title {
  color: #0f172a !important;
}

:root[data-theme="light"] .topbar-search-item-subtitle,
[data-theme="light"] .topbar-search-item-subtitle {
  color: #64748b !important;
}

:root[data-theme="light"] mark.search-highlight,
[data-theme="light"] mark.search-highlight {
  background: rgba(249, 115, 22, 0.18) !important;
  color: #c2410c !important;
}

:root[data-theme="light"] .topbar-search-empty,
[data-theme="light"] .topbar-search-empty {
  color: #64748b !important;
}

:root[data-theme="light"] .topbar-search-footer,
[data-theme="light"] .topbar-search-footer {
  background: #f8fafc !important;
  border-top: 1px solid #e2e8f0 !important;
  color: #64748b !important;
}

:root[data-theme="light"] .topbar-search-footer kbd,
[data-theme="light"] .topbar-search-footer kbd {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #475569 !important;
}

/* ==========================================================================
   Executive Dashboard Workspace Grid & Vertical Left Stats Column
   ========================================================================== */
.dashboard-workspace-grid {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 14px !important;
  width: 100% !important;
  min-width: 0 !important;
  margin-top: 0 !important;
  box-sizing: border-box !important;
  position: relative !important;
}

/* Vertical Stats Column on the Left ("সাব মেনু") - Full Portal Sidebar Card (250px Width) */
.dashboard-stats-sidebar {
  position: fixed !important;
  top: calc(var(--topbar-h, 64px) + 14px) !important;
  left: calc(var(--sidebar-w-expanded, 200px) + 14px) !important;
  align-self: flex-start !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  width: 250px !important;
  min-width: 250px !important;
  max-width: 250px !important;
  max-height: calc(100vh - var(--topbar-h, 64px) - 28px) !important;
  overflow-y: auto !important;
  scrollbar-width: thin !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding: 0 0 14px 0 !important;
  background: var(--card-bg, #0B132B) !important;
  border: 1px solid var(--rule, rgba(255, 255, 255, 0.08)) !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
  box-sizing: border-box !important;
  transition: left 0.22s cubic-bezier(0.16, 1, 0.3, 1), margin-top 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
  z-index: 25 !important;
}

.app-sidebar.is-collapsed ~ .app-main-content .dashboard-stats-sidebar,
.app-layout.sidebar-collapsed .dashboard-stats-sidebar {
  left: calc(var(--sidebar-w-collapsed, 64px) + 14px) !important;
}

/* Brand header at the top of the portal sub-menu card */
.dashboard-stats-sidebar .portal-sidebar-brand {
  height: 60px !important;
  min-height: 60px !important;
  max-height: 60px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 16px !important;
  border-bottom: 1px solid var(--rule, rgba(255, 255, 255, 0.08)) !important;
  background: var(--card-bg-alt, rgba(255, 255, 255, 0.02)) !important;
  border-top-left-radius: 13px !important;
  border-top-right-radius: 13px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}

.dashboard-stats-sidebar .portal-sidebar-tag {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

.dashboard-stats-sidebar .portal-sidebar-title {
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif) !important;
  font-size: 16px !important;
  font-weight: 750 !important;
  color: var(--ink, #ffffff) !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Nav links list inside portal sub-menu card */
.dashboard-stats-sidebar .portal-sidebar-nav {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  width: 100% !important;
  padding: 12px 10px !important;
  box-sizing: border-box !important;
}

/* Luminous Vertical Rail completely removed as requested ("ahi rosi rakhar kono dorkar nai ar") */
.dashboard-stats-sidebar::before {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  position: absolute !important;
  left: 2px !important;
  top: 2px !important;
  bottom: 2px !important;
  width: 2px !important;
  background: linear-gradient(180deg, rgba(236, 96, 71, 0.25) 0%, #EC6047 50%, rgba(236, 96, 71, 0.25) 100%) !important;
  box-shadow: 0 0 6px rgba(236, 96, 71, 0.6), 0 0 12px rgba(236, 96, 71, 0.3) !important;
  border-radius: 999px !important;
  pointer-events: none !important;
}

/* Incoming horizontal ray bridge completely removed as requested ("ahi rosi rakhar kono dorkar nai ar") */
.dashboard-stats-sidebar::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  position: absolute !important;
  left: -16px !important;
  top: 32px !important;
  transform: translateY(-50%) !important;
  width: 18px !important;
  height: 3px !important;
  background: linear-gradient(90deg, rgba(236, 96, 71, 0.95) 0%, #FF8A3D 50%, #FFFFFF 100%) !important;
  box-shadow: 0 0 8px #FF8A3D, 0 0 14px rgba(236, 96, 71, 0.8) !important;
  border-radius: 999px !important;
  pointer-events: none !important;
  animation: subMenuRayPulse 2.4s ease-in-out infinite alternate !important;
}

@keyframes subMenuRayPulse {
  0% {
    opacity: 0.75;
    box-shadow: 0 0 6px #FF8A3D, 0 0 10px rgba(236, 96, 71, 0.5);
  }
  100% {
    opacity: 1;
    box-shadow: 0 0 10px #FF8A3D, 0 0 16px rgba(236, 96, 71, 0.9);
  }
}

/* Navigation items inside Portal Sub-Menu Card (.portal-nav-btn & .stat) */
.portal-nav-sub-btn {
  padding-left: 28px !important;
  font-size: 13.5px !important;
  opacity: 0.95;
}
.dashboard-stats-sidebar .portal-sidebar-nav .portal-nav-sub-btn,
.dashboard-stats-sidebar .portal-nav-sub-btn {
  padding-left: 28px !important;
  font-size: 13.5px !important;
}
.portal-nav-sub-btn .portal-nav-icon {
  margin-right: 6px !important;
  transform: scale(0.9);
  opacity: 0.85;
}
.dashboard-stats-sidebar .portal-sidebar-nav .portal-nav-btn,
.dashboard-stats-sidebar .portal-sidebar-nav .stat,
.dashboard-stats-sidebar .portal-sidebar-nav button.stat,
.dashboard-stats-sidebar .portal-nav-btn,
.dashboard-stats-sidebar .stat,
.dashboard-stats-sidebar button.stat {
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  padding: 0 10px 0 10px !important;
  border-radius: 8px !important;
  background: transparent !important;
  border: 1px solid var(--rule, rgba(255, 255, 255, 0.08)) !important;
  box-shadow: none !important;
  cursor: pointer !important;
  text-align: left !important;
  transition: all 0.15s ease !important;
  box-sizing: border-box !important;
  position: relative !important;
  overflow: hidden !important;
  gap: 10px !important;
  margin: 0 !important;
}

.dashboard-stats-sidebar .portal-nav-btn:hover,
.dashboard-stats-sidebar .stat:hover,
.dashboard-stats-sidebar button.stat:hover {
  transform: translateX(2px) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  box-shadow: none !important;
}

/* Left accent stripe on card button */
.dashboard-stats-sidebar .stat::before,
.dashboard-stats-sidebar .portal-nav-btn::before {
  content: "" !important;
  position: absolute !important;
  inset: 6px auto 6px 0 !important;
  width: 3.5px !important;
  background: var(--slate, #64748b) !important;
  border-radius: 0 2px 2px 0 !important;
  box-shadow: 1px 0 3px rgba(0, 0, 0, 0.15) !important;
  transition: all 0.15s ease !important;
  opacity: 0.85 !important;
}

/* Per-item indicator accents */
.dashboard-stats-sidebar .stat#dashboard-stat-open-btn::before {
  background: #0284c7 !important;
}
.dashboard-stats-sidebar .stat#dashboard-stat-overdue-btn::before {
  background: #ef4444 !important;
}
.dashboard-stats-sidebar .stat#dashboard-stat-assigned-btn::before {
  background: #f97316 !important;
}
.dashboard-stats-sidebar .stat#dashboard-stat-done-btn::before {
  background: #10b981 !important;
}
.dashboard-stats-sidebar .stat#dashboard-stat-instructions-btn::before {
  background: #6366f1 !important;
}
.dashboard-stats-sidebar .stat#dashboard-stat-clients-btn::before {
  background: #a855f7 !important;
}

/* Active Selected Navigation Item: Solid vibrant blue button matching Photo 1 */
.dashboard-stats-sidebar .portal-sidebar-nav .portal-nav-btn.active,
.dashboard-stats-sidebar .portal-sidebar-nav .stat.active,
.dashboard-stats-sidebar .portal-sidebar-nav button.stat.active,
.dashboard-stats-sidebar .portal-nav-btn.active,
.dashboard-stats-sidebar .stat.active,
.dashboard-stats-sidebar button.stat.active {
  background: #18529e !important;
  background: linear-gradient(135deg, #18529e 0%, #1d68bd 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(56, 189, 248, 0.55) !important;
  box-shadow: 0 3px 12px rgba(29, 104, 189, 0.45), 0 0 0 1px rgba(56, 189, 248, 0.35) !important;
  transform: none !important;
}

.dashboard-stats-sidebar .portal-nav-btn.active:hover,
.dashboard-stats-sidebar .stat.active:hover,
.dashboard-stats-sidebar button.stat.active:hover {
  background: linear-gradient(135deg, #1d68bd 0%, #2575cf 100%) !important;
  border-color: rgba(56, 189, 248, 0.8) !important;
  transform: none !important;
}

/* In active state, hide the left stripe so the card is clean solid blue matching Photo 1 */
.dashboard-stats-sidebar .portal-nav-btn.active::before,
.dashboard-stats-sidebar .stat.active::before {
  display: none !important;
  content: none !important;
}

/* CANCEL the bulky round dot completely */
.dashboard-stats-sidebar .portal-nav-btn.active::after,
.dashboard-stats-sidebar .stat.active::after {
  display: none !important;
  content: none !important;
}

/* Icon inside portal nav button */
.dashboard-stats-sidebar .portal-nav-btn .portal-nav-icon,
.dashboard-stats-sidebar .stat .portal-nav-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.dashboard-stats-sidebar .portal-nav-btn .portal-nav-icon svg,
.dashboard-stats-sidebar .stat .portal-nav-icon svg {
  width: 16px !important;
  height: 16px !important;
  stroke: #94a3b8 !important;
  stroke-width: 2 !important;
  display: block !important;
  transition: stroke 0.15s ease !important;
}

.dashboard-stats-sidebar .portal-nav-btn:hover .portal-nav-icon svg,
.dashboard-stats-sidebar .stat:hover .portal-nav-icon svg,
.dashboard-stats-sidebar .portal-nav-btn.active .portal-nav-icon svg,
.dashboard-stats-sidebar .stat.active .portal-nav-icon svg {
  stroke: #ffffff !important;
}

/* Label text inside portal nav button - OVERRIDES .stat .k COMPLETELY */
.dashboard-stats-sidebar .portal-sidebar-nav .portal-nav-btn .portal-nav-label,
.dashboard-stats-sidebar .portal-sidebar-nav .portal-nav-btn .k,
.dashboard-stats-sidebar .portal-sidebar-nav .stat .portal-nav-label,
.dashboard-stats-sidebar .portal-sidebar-nav .stat .k,
.dashboard-stats-sidebar .portal-nav-btn .portal-nav-label,
.dashboard-stats-sidebar .portal-nav-btn .k,
.dashboard-stats-sidebar .stat .portal-nav-label,
.dashboard-stats-sidebar .stat .k {
  display: inline-block !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-family: var(--font-sans, 'Plus Jakarta Sans', sans-serif) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  line-height: 1.2 !important;
  color: #cbd5e1 !important;
  text-align: left !important;
  margin: 0 !important;
  padding: 0 !important;
}

.dashboard-stats-sidebar .portal-nav-btn:hover .portal-nav-label,
.dashboard-stats-sidebar .portal-nav-btn:hover .k,
.dashboard-stats-sidebar .stat:hover .portal-nav-label,
.dashboard-stats-sidebar .stat:hover .k {
  color: #ffffff !important;
}

.dashboard-stats-sidebar .portal-sidebar-nav .portal-nav-btn.active .portal-nav-label,
.dashboard-stats-sidebar .portal-sidebar-nav .portal-nav-btn.active .k,
.dashboard-stats-sidebar .portal-sidebar-nav .stat.active .portal-nav-label,
.dashboard-stats-sidebar .portal-sidebar-nav .stat.active .k,
.dashboard-stats-sidebar .portal-nav-btn.active .portal-nav-label,
.dashboard-stats-sidebar .portal-nav-btn.active .k,
.dashboard-stats-sidebar .stat.active .portal-nav-label,
.dashboard-stats-sidebar .stat.active .k {
  color: #ffffff !important;
  font-weight: 700 !important;
  text-transform: none !important;
}

/* Badge count inside portal nav button - OVERRIDES .stat .v COMPLETELY */
.dashboard-stats-sidebar .portal-sidebar-nav .portal-nav-btn .portal-nav-badge,
.dashboard-stats-sidebar .portal-sidebar-nav .portal-nav-btn .v,
.dashboard-stats-sidebar .portal-sidebar-nav .stat .portal-nav-badge,
.dashboard-stats-sidebar .portal-sidebar-nav .stat .v,
.dashboard-stats-sidebar .portal-nav-btn .portal-nav-badge,
.dashboard-stats-sidebar .portal-nav-btn .v,
.dashboard-stats-sidebar .stat .portal-nav-badge,
.dashboard-stats-sidebar .stat .v {
  margin-left: auto !important;
  font-family: var(--font-sans, 'Plus Jakarta Sans', sans-serif) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  padding: 2px 7px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #cbd5e1 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  line-height: 1 !important;
  letter-spacing: normal !important;
  flex-shrink: 0 !important;
  font-variant-numeric: tabular-nums !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 18px !important;
  height: 20px !important;
  box-sizing: border-box !important;
}

.dashboard-stats-sidebar .portal-sidebar-nav .portal-nav-btn.active .portal-nav-badge,
.dashboard-stats-sidebar .portal-sidebar-nav .portal-nav-btn.active .v,
.dashboard-stats-sidebar .portal-sidebar-nav .stat.active .portal-nav-badge,
.dashboard-stats-sidebar .portal-sidebar-nav .stat.active .v,
.dashboard-stats-sidebar .portal-nav-btn.active .portal-nav-badge,
.dashboard-stats-sidebar .portal-nav-btn.active .v,
.dashboard-stats-sidebar .stat.active .portal-nav-badge,
.dashboard-stats-sidebar .stat.active .v {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
}

/* Sub-menu card footer with Back button (Photo 1 Style) */
.dashboard-stats-sidebar .portal-sidebar-footer {
  margin-top: auto !important;
  padding-top: 12px !important;
  border-top: 1px solid var(--rule, rgba(255, 255, 255, 0.08)) !important;
}

.dashboard-stats-sidebar .portal-sidebar-footer .btn.portal-back-btn {
  background: rgba(236, 96, 71, 0.12) !important;
  border: 1px solid rgba(236, 96, 71, 0.35) !important;
  border-radius: 8px !important;
  color: #ffffff !important;
  font-size: 12.5px !important;
  font-weight: 650 !important;
  height: 36px !important;
  padding: 0 12px !important;
  transition: all 0.15s ease !important;
  cursor: pointer !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}

.dashboard-stats-sidebar .portal-sidebar-footer .btn.portal-back-btn:hover {
  background: rgba(236, 96, 71, 0.22) !important;
  border-color: rgba(236, 96, 71, 0.55) !important;
}

.dashboard-stats-sidebar .portal-sidebar-footer .btn.portal-back-btn svg {
  width: 14px !important;
  height: 14px !important;
  stroke: var(--brand-orange, #EC6047) !important;
}

/* Light / Day Theme Adaptations for Portal Sub-Menu Card */
:root[data-theme="light"] .dashboard-stats-sidebar,
[data-theme="light"] .dashboard-stats-sidebar {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
}

:root[data-theme="light"] .dashboard-stats-sidebar .portal-sidebar-title,
[data-theme="light"] .dashboard-stats-sidebar .portal-sidebar-title {
  color: #0f172a !important;
}

:root[data-theme="light"] .dashboard-stats-sidebar .portal-sidebar-nav .portal-nav-btn .portal-nav-label,
:root[data-theme="light"] .dashboard-stats-sidebar .portal-sidebar-nav .portal-nav-btn .k,
:root[data-theme="light"] .dashboard-stats-sidebar .portal-nav-btn .portal-nav-label,
:root[data-theme="light"] .dashboard-stats-sidebar .portal-nav-btn .k,
[data-theme="light"] .dashboard-stats-sidebar .portal-sidebar-nav .portal-nav-btn .portal-nav-label,
[data-theme="light"] .dashboard-stats-sidebar .portal-sidebar-nav .portal-nav-btn .k,
[data-theme="light"] .dashboard-stats-sidebar .portal-nav-btn .portal-nav-label,
[data-theme="light"] .dashboard-stats-sidebar .portal-nav-btn .k {
  color: #334155 !important;
}

:root[data-theme="light"] .dashboard-stats-sidebar .portal-sidebar-nav .portal-nav-btn.active .portal-nav-label,
:root[data-theme="light"] .dashboard-stats-sidebar .portal-sidebar-nav .portal-nav-btn.active .k,
:root[data-theme="light"] .dashboard-stats-sidebar .portal-nav-btn.active .portal-nav-label,
:root[data-theme="light"] .dashboard-stats-sidebar .portal-nav-btn.active .k,
[data-theme="light"] .dashboard-stats-sidebar .portal-sidebar-nav .portal-nav-btn.active .portal-nav-label,
[data-theme="light"] .dashboard-stats-sidebar .portal-sidebar-nav .portal-nav-btn.active .k,
[data-theme="light"] .dashboard-stats-sidebar .portal-nav-btn.active .portal-nav-label,
[data-theme="light"] .dashboard-stats-sidebar .portal-nav-btn.active .k {
  color: #ffffff !important;
}

:root[data-theme="light"] .dashboard-stats-sidebar .portal-sidebar-nav .portal-nav-btn .portal-nav-badge,
:root[data-theme="light"] .dashboard-stats-sidebar .portal-sidebar-nav .portal-nav-btn .v,
:root[data-theme="light"] .dashboard-stats-sidebar .portal-nav-btn .portal-nav-badge,
:root[data-theme="light"] .dashboard-stats-sidebar .portal-nav-btn .v,
[data-theme="light"] .dashboard-stats-sidebar .portal-sidebar-nav .portal-nav-btn .portal-nav-badge,
[data-theme="light"] .dashboard-stats-sidebar .portal-sidebar-nav .portal-nav-btn .v,
[data-theme="light"] .dashboard-stats-sidebar .portal-nav-btn .portal-nav-badge,
[data-theme="light"] .dashboard-stats-sidebar .portal-nav-btn .v {
  background: rgba(0, 0, 0, 0.05) !important;
  color: #475569 !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}

:root[data-theme="light"] .dashboard-stats-sidebar .portal-nav-btn,
[data-theme="light"] .dashboard-stats-sidebar .portal-nav-btn {
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

:root[data-theme="light"] .dashboard-stats-sidebar .portal-nav-btn:hover,
[data-theme="light"] .dashboard-stats-sidebar .portal-nav-btn:hover {
  background: rgba(0, 0, 0, 0.04) !important;
  color: #0f172a !important;
  border-color: rgba(0, 0, 0, 0.16) !important;
}

:root[data-theme="light"] .dashboard-stats-sidebar .portal-nav-btn.active,
[data-theme="light"] .dashboard-stats-sidebar .portal-nav-btn.active {
  background: #0284c7 !important;
  background: linear-gradient(135deg, #0369a1 0%, #0284c7 100%) !important;
  color: #ffffff !important;
  border: 1px solid #0284c7 !important;
  box-shadow: 0 3px 10px rgba(2, 132, 199, 0.35) !important;
}

:root[data-theme="light"] .dashboard-stats-sidebar .portal-nav-btn.active .portal-nav-badge,
[data-theme="light"] .dashboard-stats-sidebar .portal-nav-btn.active .portal-nav-badge {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
}

:root[data-theme="light"] .dashboard-stats-sidebar .portal-sidebar-footer .btn.portal-back-btn,
[data-theme="light"] .dashboard-stats-sidebar .portal-sidebar-footer .btn.portal-back-btn {
  background: rgba(234, 88, 12, 0.08) !important;
  border-color: rgba(234, 88, 12, 0.30) !important;
  color: #0f172a !important;
}

/* Main Board Column on Right */
.dashboard-main-board-col {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  margin-left: 264px !important;
  width: calc(100% - 264px) !important;
  box-sizing: border-box !important;
}

.dashboard-main-board-col .board.is-single-panel {
  width: 100% !important;
  margin: 0 !important;
}

/* Responsive Breakpoints for Tablet & Mobile */
@media (max-width: 960px) {
  .dashboard-workspace-grid,
  .portal-layout-container {
    flex-direction: column !important;
    gap: 16px !important;
    align-items: stretch !important;
  }
  .dashboard-stats-sidebar,
  .portal-sidebar {
    position: static !important;
    left: auto !important;
    top: auto !important;
    margin-top: 0 !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    overflow-y: visible !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 12px !important;
  }
  .dashboard-main-board-col,
  .portal-main-area {
    margin-left: 0 !important;
    width: 100% !important;
  }
  .dashboard-stats-sidebar::before,
  .dashboard-stats-sidebar::after {
    display: none !important;
  }
  .dashboard-stats-sidebar .stat:hover {
    transform: none !important;
  }
}

/* ---- Foundation Segment Embedded HTML View Component Styles ------------------ */
.policy-html-mode-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-weight: 700 !important;
  border: 1px solid var(--brand-orange, #ff6b00) !important;
  color: var(--brand-orange, #ff6b00) !important;
  background: transparent !important;
  transition: all 0.15s ease !important;
}

.policy-html-mode-btn:hover,
.policy-html-mode-btn.is-active {
  background: rgba(255, 107, 0, 0.2) !important;
  color: #fff !important;
  border-color: var(--brand-orange, #ff6b00) !important;
}

.policy-document-html-textarea {
  width: 100% !important;
  min-height: 280px !important;
  font-family: 'JetBrains Mono', Consolas, monospace !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  padding: 12px !important;
  background: var(--bg-alt, #0b1120) !important;
  color: var(--ink, #f8fafc) !important;
  border: 1px solid var(--rule, rgba(255, 255, 255, 0.12)) !important;
  border-radius: 8px !important;
  resize: vertical !important;
  box-sizing: border-box !important;
}

.foundation-embedded-html-container {
  margin-top: 8px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.foundation-embedded-html-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 12px !important;
  background: rgba(255, 107, 0, 0.08) !important;
  border: 1px solid rgba(255, 107, 0, 0.25) !important;
  border-radius: 6px !important;
  margin-bottom: 10px !important;
}

.foundation-embedded-html-code {
  margin: 0 !important;
  padding: 12px !important;
  background: var(--bg-alt, #0b1120) !important;
  border: 1px solid var(--rule, rgba(255, 255, 255, 0.1)) !important;
  border-radius: 6px !important;
  font-family: 'JetBrains Mono', Consolas, monospace !important;
  font-size: 12.5px !important;
  line-height: 1.5 !important;
  color: #f8fafc !important;
  overflow-x: auto !important;
  white-space: pre-wrap !important;
  word-break: break-all !important;
  max-height: 360px !important;
}

.foundation-html-view-toggle {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

#foundation-html-view-btn.is-active {
  background: var(--brand-orange, #ff6b00) !important;
  color: #fff !important;
  border-color: var(--brand-orange, #ff6b00) !important;
}

/* Foundation + New Foundation Rule Button (Branded Orange Gradient) */
#foundation-new-rule-btn,
.foundation-new-rule-btn,
.portal-primary-cta {
  background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 12.5px !important;
  border: 1px solid rgba(255, 255, 255, 0.20) !important;
  box-shadow: 0 4px 14px rgba(234, 88, 12, 0.35) !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

#foundation-new-rule-btn:hover,
.foundation-new-rule-btn:hover,
.portal-primary-cta:hover {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important;
  box-shadow: 0 6px 20px rgba(234, 88, 12, 0.50) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}

:root[data-theme="light"] #foundation-new-rule-btn,
[data-theme="light"] #foundation-new-rule-btn,
:root[data-theme="light"] .foundation-new-rule-btn,
[data-theme="light"] .foundation-new-rule-btn,
:root[data-theme="light"] .portal-primary-cta,
[data-theme="light"] .portal-primary-cta {
  background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.20) !important;
  box-shadow: 0 4px 14px rgba(234, 88, 12, 0.30) !important;
}

/* Foundation Page Anti-Jumping & Scroll Stabilization */
.foundation-grid,
.foundation-card,
.foundation-card-expanded-body,
.foundation-rule-full-body {
  overflow-anchor: none !important;
}

/* =========================================================================
   Non-Disruptive Update Banner (#oc-update-banner) — Photo 2 Geometry
   ========================================================================= */
#oc-update-banner {
  position: fixed !important;
  bottom: 24px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 999999 !important;
  background: var(--card-bg, #0d1527) !important;
  color: var(--ink, #ffffff) !important;
  border: 1px solid var(--rule, rgba(255, 255, 255, 0.14)) !important;
  border-radius: 12px !important;
  padding: 10px 18px !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.50), 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
  font-size: 13.5px !important;
  font-family: inherit !important;
  max-width: 92vw !important;
  animation: oc-banner-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

[data-theme="light"] #oc-update-banner,
:root[data-theme="light"] #oc-update-banner {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14) !important;
}

#oc-update-banner .oc-banner-msg {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
}

#oc-update-banner .oc-banner-icon {
  width: 20px !important;
  height: 20px !important;
  background: #2563eb !important;
  border-radius: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  font-size: 11px !important;
  flex-shrink: 0 !important;
}

#oc-update-banner .oc-banner-refresh-btn {
  background: #2563eb !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 7px 18px !important;
  cursor: pointer !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35) !important;
  transition: all 0.15s ease !important;
}

#oc-update-banner .oc-banner-refresh-btn:hover {
  background: #1d4ed8 !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.50) !important;
}

#oc-update-banner .oc-banner-dismiss-btn {
  background: transparent !important;
  color: inherit !important;
  border: none !important;
  font-size: 20px !important;
  cursor: pointer !important;
  padding: 0 4px !important;
  opacity: 0.70 !important;
  line-height: 1 !important;
  margin-left: 2px !important;
  transition: opacity 0.15s ease !important;
}

#oc-update-banner .oc-banner-dismiss-btn:hover {
  opacity: 1 !important;
}

@keyframes oc-banner-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* =========================================================================
   Menu Hide & Global Navigation Control Styles (v2.11.258)
   ========================================================================= */
.menu-hide-btn {
  background: rgba(239, 68, 68, 0.12) !important;
  color: #f87171 !important;
  border: 1px solid rgba(239, 68, 68, 0.32) !important;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.15) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.menu-hide-btn:hover {
  background: rgba(239, 68, 68, 0.22) !important;
  color: #ffffff !important;
  border-color: rgba(239, 68, 68, 0.55) !important;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.30) !important;
  transform: translateY(-1px) !important;
}

.menu-hide-btn:active {
  transform: translateY(0) !important;
  background: rgba(239, 68, 68, 0.28) !important;
}

.menu-hide-item-card {
  position: relative;
  user-select: none;
}

.menu-hide-item-card:hover {
  background: var(--surface-hover, rgba(255, 255, 255, 0.04)) !important;
  border-color: rgba(56, 189, 248, 0.35) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
}

.menu-hide-item-card.is-hidden {
  background: rgba(239, 68, 68, 0.05) !important;
  border-color: rgba(239, 68, 68, 0.32) !important;
}

.menu-hide-item-card.is-hidden:hover {
  background: rgba(239, 68, 68, 0.09) !important;
  border-color: rgba(239, 68, 68, 0.48) !important;
}

.menu-hide-toggle-pill {
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.menu-hide-toggle-pill:hover {
  transform: scale(1.03) !important;
  filter: brightness(1.1) !important;
}

.menu-hide-toggle-pill:active {
  transform: scale(0.97) !important;
}