:root{
  /* Palette (RM Factory logo-derived) */
  --slate: #4A5D74;   /* neutral medium slate (keep for backgrounds) */
  --brand-blue: #0B5483;
  --brand-blue-2: #07507A;
  --sun:   #F5951F;   /* brand orange */
  --peach: #FFB37A;
  --coral: #FF7A6A;

  /* Header base: match board bg family (remove green tint) */
  --sage:  #4A5D74;

  /* Semantic theme */
  /* Page background behind boards */
  --bg: var(--brand-blue);
  --bg-2: color-mix(in srgb, var(--brand-blue) 82%, black 18%); /* slightly darker blue for gradients */

  /* Per-board theme overrides via html[data-theme] */

  --surface: #fbfcfd;
  --surface-2: rgba(255,255,255,.72);
  --surface-3: rgba(255,255,255,.58);

  /* Header tint: slightly more opaque for readability / alignment with controls */
  --header: var(--surface-2);

  --text: #101828;
  /* Muted text tuned for slate header readability */
  --muted: color-mix(in srgb, var(--brand-blue) 70%, white 30%);

  --border: rgba(16,24,40,.14);
  --border-2: rgba(16,24,40,.10);

  --focus: color-mix(in srgb, var(--sun) 70%, white 30%);
  --focus-ring: color-mix(in srgb, var(--sun) 26%, transparent);

  --primary-1: var(--sun);
  --primary-2: var(--peach);

  /* Legacy alias used by some UI bits */
  --orange: var(--sun);
  --danger: var(--coral);

  --shadow: 0 10px 26px rgba(16,24,40,.16);
  --radius: 14px;
  --radius-sm: 10px;
  --gap: 14px;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

/* ===== Per-board themes =====
   Constraints:
   - Cards stay white (surface)
   - Buttons stay orange (primary)
   - Only background + header tint + minor accents change per board
*/
html[data-theme="iQueueRM"]{
  --bg: #7a1d5a; /* pink/purple */
  --bg-2: color-mix(in srgb, #7a1d5a 72%, black 28%);
  --muted: color-mix(in srgb, #7a1d5a 70%, white 30%);
}

/* iQueueRM Lead Tracker (orange) */
html[data-theme="iQueueRMOrange"]{
  --bg: #c2410c; /* orange-700 */
  --bg-2: color-mix(in srgb, #c2410c 72%, black 28%);
  --muted: color-mix(in srgb, #c2410c 70%, white 30%);
}

html[data-theme="ProtocolBuilder"]{
  --bg: #145a32; /* green */
  --bg-2: color-mix(in srgb, #145a32 72%, black 28%);
  --muted: color-mix(in srgb, #145a32 65%, white 35%);
}

html[data-theme="UnitedInsured"]{
  --bg: #0a2f6b; /* blue */
  --bg-2: color-mix(in srgb, #0a2f6b 72%, black 28%);
  --muted: color-mix(in srgb, #0a2f6b 70%, white 30%);
}

html[data-theme="UIAdminRed"]{
  --bg: #6b0a0a; /* red */
  --bg-2: color-mix(in srgb, #6b0a0a 72%, black 28%);
  --muted: color-mix(in srgb, #6b0a0a 70%, white 30%);
}

/* Anubis board: experimental dark-mode inversion (v0)
   Goal: invert page background vs column surfaces while keeping cards readable.
*/
/* Anubis board: experimental dark palette (v1)
   Palette provided by Rich:
   #DAFDBA #9AEBA3 #45C4B0 #13678A #012030
   Goal: NOTHING white (cards included) and ensure readable text on each surface.
*/
html[data-theme="AnubisPaletteDark"]{
  --bg: #012030;
  --bg-2: color-mix(in srgb, #012030 72%, #13678A 28%);

  --header: rgba(1,32,48,.88);

  /* Surfaces */
  --surface: #45C4B0;          /* cards */
  --surface-2: rgba(19,103,138,.72);
  --surface-3: rgba(19,103,138,.92);  /* columns */

  /* Text */
  --text: #012030;  /* text on cards */
  --muted: rgba(1,32,48,.72);

  --border: rgba(218,253,186,.28);
  --border-2: rgba(218,253,186,.18);

  /* Primary buttons: use dark blue like the dropdown background for readability */
  --primary-1: #13678A;
  --primary-2: #012030;
}

/* Header + controls */
html[data-theme="AnubisPaletteDark"] .topbar,
html[data-theme="AnubisPaletteDark"] .topbar a,
html[data-theme="AnubisPaletteDark"] .topbar button,
html[data-theme="AnubisPaletteDark"] .topbar .pill{
  color: #DAFDBA !important;
}


html[data-theme="AnubisPaletteDark"] input,
html[data-theme="AnubisPaletteDark"] select,
html[data-theme="AnubisPaletteDark"] textarea{
  background: rgba(19,103,138,.85) !important;
  color: #DAFDBA !important;
  border-color: rgba(218,253,186,.25) !important;
}

html[data-theme="AnubisPaletteDark"] ::placeholder{ color: rgba(218,253,186,.70) !important; }

/* Columns */
html[data-theme="AnubisPaletteDark"] .col{
  background: rgba(19,103,138,.92);
  border-color: rgba(218,253,186,.18);
}
html[data-theme="AnubisPaletteDark"] .colHeader{ background: rgba(19,103,138,.92); }
html[data-theme="AnubisPaletteDark"] .colName{ color: #DAFDBA; }
html[data-theme="AnubisPaletteDark"] .colMeta{ color: rgba(218,253,186,.80); }

/* Cards (NO white) */
html[data-theme="AnubisPaletteDark"] .card{
  background: #45C4B0;
  border-color: rgba(1,32,48,.18);
  box-shadow: 0 10px 18px rgba(1,32,48,.22);
}
html[data-theme="AnubisPaletteDark"] .cardTitle{ color: #012030; }
html[data-theme="AnubisPaletteDark"] .cardDesc{ color: rgba(1,32,48,.78); }

/* Badges/chips */
html[data-theme="AnubisPaletteDark"] .badge,
html[data-theme="AnubisPaletteDark"] .tag{
  background: rgba(19,103,138,.85);
  border-color: rgba(218,253,186,.18);
  color: #DAFDBA;
}

*{box-sizing:border-box}

/* Ensure the HTML `hidden` attribute always wins over layout styles */
[hidden]{display:none !important;}

body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background:
    radial-gradient(1200px 800px at 10% -10%, color-mix(in srgb, var(--sage) 30%, transparent) 0%, transparent 60%),
    radial-gradient(1200px 800px at 95% 0%, color-mix(in srgb, var(--sun) 22%, transparent) 0%, transparent 58%),
    radial-gradient(1200px 900px at 70% 110%, color-mix(in srgb, var(--coral) 18%, transparent) 0%, transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);

  /* Normal page scrolling (demo-friendly). */
  min-height:100vh;
}

.topbar{
  /* Not sticky: Rich prefers the main Athena header to scroll away. */
  position: relative;
  z-index:10;
  width:100%;
  display:flex;
  gap:16px;
  align-items:center;
  justify-content:space-between;

  /* iOS/iPad Safari: respect safe areas and ensure background reaches edges */
  padding:16px calc(18px + env(safe-area-inset-right)) 16px calc(18px + env(safe-area-inset-left));

  background: var(--header);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid color-mix(in srgb, var(--sage) 32%, transparent);
}

html, body{ width:100%; overflow-x:hidden; }

/* Allow horizontal scroll, and center the board when there's extra room */
.boardWrap, .treeWrap{ overflow-x:auto; -webkit-overflow-scrolling: touch; }
.boardWrap{ display:block; }
.treeWrap{ display:block; }

.boardStamp{
  font-size: 10px;
  font-weight: 800;
  opacity: .7;
  background: rgba(16,24,40,.06);
  border: 1px solid rgba(16,24,40,.10);
  height: 22px;
  display: inline-flex;
  align-items: center;
}

.brand{display:flex; gap:12px; align-items:flex-start}
.brandActions{display:flex; gap:10px; align-items:center; margin-left:10px; margin-top:4px; flex-wrap:wrap; justify-content:flex-start}
/* Keep brand action buttons aligned with the primary control row */
.brandActions .btn{height:36px; border-radius:999px;}

.brandStack{display:flex; flex-direction:column; gap:14px; align-items:center}
.brandLine{display:flex; flex-direction:row; align-items:baseline; justify-content:center; gap:10px; text-align:center}
.title,.subtitle{display:flex; align-items:baseline; justify-content:center; text-align:center;}

.logoImg{
  height:46px;
  width:auto;
  object-fit:contain;
  border-radius:10px;
  background: rgba(255,255,255,.65);
  padding:6px 10px;
  border:1px solid rgba(16,24,40,.10);
  box-shadow: 0 10px 18px rgba(16,24,40,.16);
}

.title{font-weight:950; letter-spacing:.2px; font-size:36px; color: var(--brand-blue); line-height:1}
.subtitle{font-size:18px; font-weight:850; color: var(--brand-blue); line-height:1; white-space:nowrap}
.regmark{font-size:.62em; position:relative; top:-.55em; margin-left:0}

.controls{display:flex; flex-direction:column; align-items:flex-end; gap:14px}
.controlsRow{display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; justify-content:flex-end; width:100%}
/* When the header wraps (long board names), keep labels/controls aligned */
.controlsRow.filters{align-items:flex-start; row-gap:6px;}
.controlsRow.actions{align-items:center}

/* Phone-specific tightening */
@media (max-width: 720px){
  .topbar{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px 12px;
  }

  /* Brand area: tighter + cleaner */
  .brand{ justify-content: space-between; align-items:flex-start; }
  .brandStack{ align-items:flex-start; gap:10px; }
  .title{ font-size:30px; }
  .subtitle{ font-size:14px; opacity:.95; }
  .logoImg{ height:38px; padding:5px 8px; }

  /* Put Helpdesk/Dashboard/Admin in one tight row */
  .brandActions{ margin-left:0; margin-top:6px; }
  .brandActions .btn{ height:32px; padding:0 12px; font-size:13px; }

  /* Controls: full width, reduced gaps */
  .controls{ align-items: stretch; gap:10px; }
  .controlsRow{ justify-content: flex-start; gap:10px; }
  .controlsRow.actions{ gap:10px; }

  .control{ width: 100%; max-width: 100%; }
  .control > span{ text-align:left; }
  .control input, .control select{ width: 100%; min-width: 0; }

  /* Make action buttons less chunky on mobile */
  .btn{ height:34px; padding:0 12px; font-size:13px; }
  .pill{ height:26px; }

  /* Board view: single column stack */
  .board{ grid-template-columns: repeat(1, minmax(260px, 1fr)); }
}

/* Tablet (iPad) layout: keep it comfortable + full-bleed */
@media (max-width: 1024px){
  .topbar{
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 14px calc(14px + env(safe-area-inset-right)) 14px calc(14px + env(safe-area-inset-left));
  }

  .brand{ justify-content: space-between; }
  .brandStack{ align-items:flex-start; }
  .controls{ align-items: stretch; }
  .controlsRow{ justify-content:flex-start; }
  .control > span{ text-align:left; }
}
.control{display:flex; flex-direction:column; gap:7px; font-size:15px; font-weight:850; color: var(--brand-blue)}
.control > span{ display:block; width:100%; text-align:center; }
.control input, .control select{
  height:36px; min-width:180px;
  padding:8px 12px;
  border-radius:999px; /* pill */
  border:1px solid var(--border);
  background: var(--surface);
  outline:none;
  background-clip: padding-box;
  -webkit-appearance: none;
  appearance: none;
}

/* Make native <select> controls consistently pill-shaped (Safari/Chrome sometimes ignore radius). */
.control select{
  padding-right: 34px;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(16,24,40,.55) 50%),
    linear-gradient(135deg, rgba(16,24,40,.55) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.control input:focus, .control select:focus{border-color: var(--focus); box-shadow: 0 0 0 4px var(--focus-ring)}

.controlToggle .toggleRow{
  height:36px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 10px;
  border-radius:12px;
  border:1px solid var(--border);
  background: var(--surface);
}
.controlToggle input[type="checkbox"]{
  width:16px;
  height:16px;
  margin:0;
  accent-color: var(--sun);
}

.btn{
  height:36px;
  padding:0 14px;
  border-radius:999px; /* pill */
  border:1px solid var(--border);
  background: var(--surface);
  cursor:pointer;
  font-weight:650;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}

/* OmniHub button (topbar): match Projects progress gradient */
#omniHubBtn,
#adminBtn{
  border-color: rgba(255,255,255,.16);
  background: var(--sun);
  color: #0b1220;
  font-weight: 1000;
}
#omniHubBtn:hover,
#adminBtn:hover{ filter: brightness(1.02); }
.btn.primary{
  border-color: color-mix(in srgb, var(--primary-2) 44%, transparent);
  /* default theme uses gradient */
  background: linear-gradient(135deg, var(--primary-1), var(--primary-2));
  color:#1b120b;
}

/* AnubisPaletteDark: primary buttons should match the ticket/card surface (no gradient) */
html[data-theme="AnubisPaletteDark"] .btn.primary{
  background: #45C4B0;
  border-color: rgba(1,32,48,.22);
  color: #012030;
}

/* View tabs (Board/Tree): use theme color instead of orange */
#viewBoard.primary,
#viewTree.primary{
  background: color-mix(in srgb, var(--bg) 88%, black 12%);
  border-color: color-mix(in srgb, var(--bg) 55%, black 45%);
  color: rgba(255,255,255,.94);
}
.btn.danger{
  border-color: color-mix(in srgb, var(--danger) 44%, transparent);
  color: color-mix(in srgb, var(--danger) 70%, #7a0b00 30%);
}
.btn:hover{filter:brightness(.985)}
.btn:active{transform: translateY(1px)}

.btn.small{
  height:30px;
  padding:0 10px;
  font-size:12px;
}

.iconBtn{
  border:none;
  background:transparent;
  cursor:pointer;
  font-size:16px;
  padding:6px 8px;
  border-radius:10px;
  color: color-mix(in srgb, var(--bg) 88%, black 12%);
  font-weight: 900;
}
.iconBtn:hover{background: rgba(16,24,40,.06)}

.board{
  /* iOS/iPad Safari: respect safe areas so the right edge never gets clipped */
  padding: 18px calc(18px + env(safe-area-inset-right)) 18px calc(18px + env(safe-area-inset-left));
  /* Let the grid expand wider than the viewport so horizontal scrolling works reliably (iPad) */
  width: max-content;
  min-width: 100%;
  display:grid;
  justify-content: start;
  /* Keep columns a sane width on desktop */
  grid-template-columns: repeat(6, minmax(260px, 320px));
  gap: var(--gap);

  /* Use a fixed viewport-height board so columns can scroll internally (reliable sticky headers) */
  height: calc(100vh - 210px);
  align-items: stretch;
}

.tree{
  padding: 18px calc(18px + env(safe-area-inset-right)) 18px calc(18px + env(safe-area-inset-left));

  /* Let the page scroll normally. */
}

.tree .treeHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom: 10px;
}

.tree .treeHeader .hint{ color: color-mix(in srgb, white 78%, var(--sage) 22%); font-size: 12px; }

.treeList{list-style:none; padding-left:0; margin:0; display:flex; flex-direction:column; gap:8px;}
.treeItem{
  background: var(--surface-2);
  border:1px solid color-mix(in srgb, var(--sage) 30%, var(--border));
  border-radius: 12px;
  padding:10px;
  position: relative;
}

/* Parent group hint (subtle left stripe) */
.treeItem.treeParent{
  box-shadow: inset 4px 0 0 color-mix(in srgb, var(--sage) 42%, transparent);
}

/* Top-level parent groups get a slightly stronger stripe */
.treeItem.treeTopParent{
  box-shadow: inset 5px 0 0 color-mix(in srgb, var(--sage) 62%, transparent);
}

/* Epics: same color as other rows (no special highlight) */
.treeItem.treeEpic{
  border-color: color-mix(in srgb, var(--sage) 30%, var(--border));
  background: var(--surface-2);
  box-shadow: none;
}

.treeRow{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.treeLeft{display:flex; align-items:center; gap:10px; min-width:0;}
.treeToggle{width:28px; height:28px; border-radius:10px; border:1px solid var(--border); background: var(--surface); cursor:pointer; font-weight:900;}
.treeKey{font-weight:900; color: color-mix(in srgb, var(--brand-blue) 88%, black 12%); font-size: 12px; white-space:nowrap;}
.treeSummary{font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.treeMeta{display:flex; align-items:center; gap:8px;}
.treeType{font-size:11px; color: var(--muted); border:1px solid var(--border-2); background: rgba(255,255,255,.50); border-radius:999px; padding:3px 7px; font-weight:800; white-space:nowrap;}
.treeType.epic{
  border-color: var(--border-2);
  background: rgba(255,255,255,.50);
  color: var(--muted);
}
.treeStatus{height:30px; border-radius:10px; border:1px solid var(--border); padding:0 8px; font-weight:700; background: var(--surface);}
.treeChildren{
  margin: 8px 0 0 0;
  padding-left: 22px;
  list-style: none;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.col{
  background: var(--surface-3);
  border: 1px solid color-mix(in srgb, var(--sage) 28%, var(--border));
  border-radius: var(--radius);
  box-shadow: 0 1px 0 rgba(16,24,40,.05);
  display:flex;
  flex-direction:column;

  position: relative;

  /* Per-column scrolling (preferred): keep cards clipped within each column. */
  min-height: 65vh;
  max-height: calc(100dvh - 240px);
  overflow: hidden;
}

.colHeader{
  padding: 12px 12px 10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom: 1px dashed color-mix(in srgb, var(--sage) 35%, transparent);

  /* Ensure the top of each column matches the global rounded style */
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);

  /* Keep column headers visible while scrolling */
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--surface-3);
  backdrop-filter: blur(6px);
}
.colName{font-weight:800; color: color-mix(in srgb, var(--brand-blue) 86%, black 14%)}

/* Commission board: highlight Deadlines column header + ticket titles */
.col[data-status="deadlines"] .colName{ color: var(--sun) !important; }
.col[data-status="deadlines"] .cardTitle{ color: var(--sun) !important; font-weight: 950; }

/* Lead Tracker boards: distinct palette so they don't look like regular boards */
body.leadFlow{
  /* Default lead-flow palette (kept neutral-ish). Specific trackers override below. */
  --surface: #fbfcfd;
  --surface-2: rgba(255,255,255,.78);
  --surface-3: rgba(255,255,255,.62);
}

/* United Insured Lead Tracker: purple + lavender */
body.leadFlow.uiLeadTracker{
  --brand-blue: #4c1d95;   /* deep purple */
  --brand-blue-2: #3b0764; /* deeper purple */
  --sage: #a78bfa;         /* lavender accent */

  --bg: #5b21b6;           /* purple background */
  --bg-2: color-mix(in srgb, #5b21b6 72%, black 28%);

  --surface: #fbf7ff;      /* very light lavender */
  --surface-2: rgba(250,245,255,.78);
  --surface-3: rgba(250,245,255,.62);

  --muted: color-mix(in srgb, var(--brand-blue) 52%, white 48%);
}

/* iQueueRM Lead Tracker: orange */
body.leadFlow.iqLeadTracker{
  --brand-blue: #9a3412;   /* deep orange */
  --brand-blue-2: #7c2d12; /* deeper orange */
  --sage: #fdba74;         /* soft orange accent */

  --bg: #c2410c;           /* orange-700 */
  --bg-2: color-mix(in srgb, #c2410c 72%, black 28%);

  --surface: #fff7ed;      /* warm paper */
  --surface-2: rgba(255,247,237,.80);
  --surface-3: rgba(255,247,237,.64);

  --muted: color-mix(in srgb, #9a3412 45%, white 55%);
}

/* Center column headers on lead-flow boards */
body.leadFlow .colHeader{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  justify-content:unset !important;
}
body.leadFlow .colName{
  grid-column: 2;
  justify-self:center;
  text-align:center !important;
  width:auto;
}
body.leadFlow .colMeta{
  grid-column: 3;
  justify-self:end;
  position:static;
}

/* Center the whole columns grid on lead-flow boards (4-column layout) */
body.leadFlow .board{
  grid-template-columns: repeat(4, minmax(260px, 320px));
  justify-content: center;
}
.colMeta{display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12px}
.count{
  padding:4px 8px;
  border-radius:999px;
  background: color-mix(in srgb, var(--sun) 22%, transparent);
  color: color-mix(in srgb, var(--slate) 72%, black 28%);
  font-weight:800;
}

.colBody{
  padding: 10px;
  display:flex;
  flex-direction:column;
  gap:10px;
  flex: 1;
  min-height: 140px;
  overflow: auto;
}

.card{
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  padding: 10px 10px 9px 10px;
  box-shadow: 0 10px 18px rgba(16,24,40,.08);
}

/* Project accent stripes (scannable, low-risk UI cue) */
.card.projectWfm{
  border-left: 6px solid #2fb344; /* green */
  padding-left: 8px; /* compensate for stripe */
}

.card.projectWeb{
  border-left: 6px solid #2f7dff; /* blue */
  padding-left: 8px;
}

.card.projectPredictive{
  border-left: 6px solid #7c3aed; /* purple */
  padding-left: 8px;
}
.card:hover{border-color: color-mix(in srgb, var(--primary-2) 30%, var(--border))}
.card.dragging{opacity:.55}

.cardTop{display:flex; justify-content:space-between; gap:8px; align-items:flex-start}
.cardTitle{font-weight:800; line-height:1.2; flex:1; min-width:0}
.subBadges{display:flex; gap:6px; flex-wrap:wrap; margin-top:8px;}
.cardDesc{color:var(--muted); font-size:12.5px; margin-top:6px; white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word}
.cardBottom{display:flex; justify-content:space-between; align-items:flex-end; gap:8px; margin-top:10px}

.badges{display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; width:84px; flex:0 0 84px;}
.cardTop{min-width:0;}
.cardTitle{min-width:0; overflow:hidden; text-overflow:ellipsis; overflow-wrap:anywhere; word-break:break-word}
.badge{max-width:100%; overflow:hidden; text-overflow:ellipsis;}
.tag{max-width:100%; overflow:hidden; text-overflow:ellipsis;}
.badge{
  font-size:11px;
  font-weight:800;
  padding: 3px 7px;
  border-radius: 999px;
  border: 1px solid var(--border-2);
  background: rgba(239,242,246,.6);
}
.badge.archived{
  background: rgba(102,112,133,.10);
  border-color: rgba(102,112,133,.18);
  color: rgba(102,112,133,1);
}

.card.archived{
  opacity: .72;
}
.badge.p0{background: color-mix(in srgb, var(--danger) 18%, transparent); border-color: color-mix(in srgb, var(--danger) 30%, transparent); color: #8a1f14}
.badge.p1{background: color-mix(in srgb, var(--peach) 26%, transparent); border-color: color-mix(in srgb, var(--peach) 36%, transparent); color:#8a3b16}
.badge.p2{background: color-mix(in srgb, var(--sage) 22%, transparent); border-color: color-mix(in srgb, var(--sage) 34%, transparent); color: color-mix(in srgb, var(--slate) 78%, black 22%)}
.badge.p3{background: rgba(102,112,133,.10); border-color: rgba(102,112,133,.18); color: rgba(102,112,133,1)}

.meta{font-size:11.5px; color: color-mix(in srgb, var(--slate) 80%, black 20%); font-weight:750; display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.assigneePill{
  font-size:11px;
  padding:2px 8px;
  border-radius:999px;
  background: color-mix(in srgb, var(--sun) 30%, transparent);
  border: 1px solid color-mix(in srgb, var(--sun) 55%, transparent);
  color: color-mix(in srgb, var(--brand-blue) 88%, black 12%);
  font-weight:900;
  white-space:nowrap;
}
.tags{display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end}
.tag{
  font-size:11px;
  padding:2px 7px;
  border-radius:999px;
  background: color-mix(in srgb, var(--sun) 78%, black 22%);
  color: rgba(255,255,255,.95);
  border: 1px solid color-mix(in srgb, var(--sun) 55%, black 45%);
}

/* -------- Ticket editor: Tags redesign -------- */
.tagEditor{ display:flex; flex-direction:column; gap:10px; }
.tagChips{ display:flex; flex-wrap:wrap; gap:8px; }
.tagChip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid color-mix(in srgb, var(--sun) 55%, black 45%);
  background: color-mix(in srgb, var(--sun) 78%, black 22%);
  font-weight:750;
  color: rgba(255,255,255,.95);
  user-select:none;
}
.tagChip button{ color: rgba(255,255,255,.92); }
.tagChip button{
  border:none;
  background:transparent;
  cursor:pointer;
  font-weight:900;
  opacity:.75;
}
.tagChip button:hover{ opacity:1; }

.tagAddRow{ display:flex; gap:10px; align-items:center; }
.tagAddRow input{
  flex: 1;
  height: 38px;
  border-radius: 12px;
}

.tagCloud{ display:flex; flex-wrap:wrap; gap:8px; }
.tagCloud .tagPick{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid var(--border-2);
  background: rgba(239,242,246,.6);
  cursor:pointer;
  font-weight:800;
  color: color-mix(in srgb, var(--slate) 80%, black 20%);
}
.tagCloud .tagPick:hover{ border-color: color-mix(in srgb, var(--primary-2) 30%, var(--border)); }
.tagCloud .tagPick .n{ font-size:11px; opacity:.8; }

/* -------- Ticket editor: Attachments -------- */
.attachBox{ display:flex; flex-direction:column; gap:10px; }
.attachTop{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
#commentBody{border-radius:12px; border:1px solid var(--border-2); padding:10px 12px; font: inherit; resize: vertical; min-width: 260px;}
.attachTop input[type="file"]{ flex:1; }
.attachList{ display:flex; flex-direction:column; gap:8px; }
.attachItem{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 10px; border:1px solid rgba(255,255,255,.14); border-radius:12px; background: rgba(255,255,255,.10); }
.attachItem a{ color: var(--brand-blue); font-weight:850; text-decoration:none; }
.attachItem a:hover{ text-decoration:underline; }
.attachMeta{ font-size:12px; color: rgba(255,255,255,.72); white-space:nowrap; }

/* -------- Ticket editor: History -------- */
.historyBox{ display:flex; flex-direction:column; gap:10px; }
.historyList{ display:flex; flex-direction:column; gap:8px; }
.historyList{ max-height: 240px; overflow-y: auto; padding-right: 6px; }
.historyList::-webkit-scrollbar{ width: 10px; }
.historyList::-webkit-scrollbar-thumb{ background: rgba(15,23,42,.22); border-radius: 999px; }
.historyList::-webkit-scrollbar-track{ background: rgba(255,255,255,.18); border-radius: 999px; }
.historyItem{ display:flex; flex-direction:column; gap:4px; padding:10px 12px; border:1px solid color-mix(in srgb, var(--sun) 55%, black 45%); border-radius:12px; background: color-mix(in srgb, var(--sun) 72%, white 28%); }
.historyTop{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.historyAction{ font-weight:900; color: rgba(17,24,39,.92); }
.historyWhen{ font-size:12px; color: rgba(17,24,39,.78); white-space:nowrap; }
.historyWho{ font-size:12px; color: rgba(17,24,39,.78); }
.historyDetail{ font-size:14px; color: rgba(17,24,39,.92); white-space:pre-wrap; line-height:1.35; }

/* Comments list uses the same card container class; ensure comment meta/body are readable too */
.historyMeta{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; font-size:12px; color: rgba(17,24,39,.78); }
#commentsList .historyItem{ color: rgba(17,24,39,.92); }
#commentsList .historyItem *{ color: inherit; }
#commentsList .commentBody{ font-size:14px; line-height:1.35; }
#commentsList .historyMeta{ font-size:12px; }

/* -------- Notifications -------- */
.notifyTopRow{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px;}
.notifyList{display:flex; flex-direction:column; gap:10px;}
.notifyItem{display:flex; flex-direction:column; gap:6px; padding:10px 12px; border:1px solid var(--border-2); border-radius:14px; background: #fff;}

/* Global announcement banner (pinned notification) */
.globalAnnouncement{max-width:1100px; margin:10px auto 0 auto; padding:10px 12px; border-radius:14px; border:1px solid rgba(255,255,255,.18); background:linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.06)); box-shadow:0 16px 50px rgba(0,0,0,.22); display:flex; gap:12px; align-items:flex-start; justify-content:space-between; backdrop-filter: blur(10px);
  /* iPad Safari: avoid subtle right-edge clipping by keeping a small gutter */
  width: min(1100px, calc(100vw - 24px));
}
.globalAnnouncement .gaInner{min-width:0; display:flex; flex-direction:column; gap:4px;}
.globalAnnouncement .gaTitle{font-weight:900; letter-spacing:.2px;}
.globalAnnouncement .gaBody{opacity:.95; overflow-wrap:anywhere; word-break:break-word;}
.globalAnnouncement .gaDismiss{white-space:nowrap;}

/* Checklist (Steps) */
.checklistAdd{display:flex; gap:10px; align-items:center;}
.checklistAdd input{flex:1;}
.checklistList{display:flex; flex-direction:column; gap:8px;}
.checklistItem{display:flex; align-items:flex-start; gap:10px; padding:8px 10px; border-radius:14px; border:1px solid var(--border-2); background: rgba(255,255,255,.62);}
.checklistItem:hover{background: rgba(255,255,255,.70);}
.checklistItem input[type="checkbox"]{margin-top:2px; transform: scale(1.05);}
.checklistText{flex:1; font-size:13px; color: color-mix(in srgb, var(--slate) 84%, black 16%); line-height:1.25;}
.checklistItem.done .checklistText{opacity:.72; text-decoration: line-through;}
.checklistDel{width:30px; height:30px; border-radius:10px; border:1px solid rgba(16,24,40,.12); background: rgba(255,255,255,.75); cursor:pointer; font-weight:900;}
.checklistDel:hover{filter:brightness(1.03);}

/* Multi-select dropdown (Lead Tracker carriers) */
.multiSelect{position:relative; display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:36px; padding:8px 12px; border-radius:12px; border:1px solid var(--border-2); background: rgba(255,255,255,.82); color: var(--slate); font-weight:800; cursor:pointer;}
.multiSelect:focus{outline:2px solid rgba(245,149,31,.45); outline-offset:2px;}
.msValue{display:flex; flex-wrap:wrap; gap:6px; align-items:center; min-width:0;}
.msPill{display:inline-flex; align-items:center; padding:3px 10px; border-radius:999px; border:1px solid rgba(16,24,40,.10); background: rgba(245,149,31,.12); font-size:12px; font-weight:900; white-space:nowrap;}
.msPlaceholder{opacity:.7; font-weight:800;}
.msChevron{opacity:.7; font-weight:900;}
.msMenu{position:absolute; top: calc(100% + 8px); left:0; right:0; z-index:50; border-radius:14px; border:1px solid rgba(16,24,40,.12); background: rgba(255,255,255,.96); box-shadow: 0 24px 60px rgba(16,24,40,.18); padding:8px; max-height:240px; overflow:auto;}
.msItem{display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:12px; cursor:pointer; user-select:none;}
.msItem:hover{background: rgba(16,24,40,.06);}
.msCheck{width:16px; height:16px; border-radius:4px; border:1px solid rgba(16,24,40,.20); display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:900;}
.msItem.on .msCheck{background: rgba(245,149,31,.22); border-color: rgba(245,149,31,.35);}
.notifyItem.unread{border-color: color-mix(in srgb, var(--sun) 45%, var(--border)); background: color-mix(in srgb, var(--sun) 10%, #fff);}
.notifyTitle{font-weight:900;}
.notifyMeta{display:flex; justify-content:space-between; gap:10px; font-size:12px; color: var(--muted);}
.notifyBody{font-size:12.5px; color: color-mix(in srgb, var(--slate) 82%, black 18%); white-space:pre-wrap;}
.notifyActions{display:flex; gap:10px; justify-content:flex-end;}
.notifyBtn{
  background: color-mix(in srgb, var(--bg) 86%, black 14%);
  border-color: color-mix(in srgb, var(--bg) 52%, transparent);
  color: #fff;
}
.notifyBtn:hover{ filter: brightness(1.03); }
.notifyBtn:disabled{ background: rgba(148,163,184,.55); border-color: rgba(148,163,184,.35); color: rgba(17,24,39,.55); }

.modal::backdrop{background: rgba(11,18,32,.62)}
.modal{border:none; padding:0; background:transparent}
.modalCard{
  width: min(860px, calc(100vw - 24px));
  border-radius: 18px;
  /* Tint modals to match the active board theme, while keeping content readable */
  background: color-mix(in srgb, var(--bg) 8%, var(--surface) 92%);
  border:1px solid color-mix(in srgb, var(--bg) 18%, var(--border) 82%);
  box-shadow: var(--shadow);
  overflow:hidden;
}
/* Default-theme boards: use a darker blue modal shell */
html:not([data-theme]) .modalCard{
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--brand-blue) 75%, black 25%) 0%,
    color-mix(in srgb, var(--brand-blue-2) 72%, black 28%) 100%);
  border: 1px solid rgba(255,255,255,.16);
}
html:not([data-theme]) .modal::backdrop{ background: rgba(0,0,0,.66); }
html:not([data-theme]) .modalTitle{ color: rgba(255,255,255,.92); }
html:not([data-theme]) .modalHeader,
html:not([data-theme]) .modalFooter{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
}
html:not([data-theme]) .modal label{ color: rgba(255,255,255,.78); }
html:not([data-theme]) .modal .hint{ color: rgba(255,255,255,.72) !important; }
html:not([data-theme]) .modal .iconBtn{ color: rgba(255,255,255,.92); }

.modalHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 12px;
  border-bottom: 1px solid rgba(16,24,40,.08);
  background: color-mix(in srgb, var(--bg) 10%, var(--surface) 90%);
}
.modalTitle{font-weight:900; color: color-mix(in srgb, var(--brand-blue) 86%, black 14%)}

.grid{display:grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px}
label{display:flex; flex-direction:column; gap:6px; font-size:12px; color: var(--muted)}
label input, label select, label textarea{
  border-radius: 12px;
  border:1px solid var(--border);
  padding: 9px 10px;
  font-family:var(--font);
  font-size: 14px;
  outline:none;
  background: var(--surface);
}
label textarea{resize:vertical}
label input:focus, label select:focus, label textarea:focus{border-color: var(--focus); box-shadow: 0 0 0 4px var(--focus-ring)}

.span2{grid-column: 1 / span 2}

.modalFooter{display:flex; align-items:center; justify-content:space-between; padding: 12px; border-top: 1px solid rgba(16,24,40,.08)}
.modalFooter .left,
.modalFooter .right{
  display:flex;
  align-items:center;
  gap:10px;
}
.modalFooter .right{ justify-content:flex-end; }
.modalFooter .left{ align-items:center; }

@media (max-width: 1100px){
  .board{grid-template-columns: repeat(3, minmax(260px, 1fr))}
}
@media (max-width: 760px){
  /* Mobile: hard clip columns/cards to viewport */
  .board{ width: 100% !important; min-width: 0 !important; max-width: 100% !important; justify-content: stretch; padding: 14px 12px; }
  .col{ max-width: 100%; }
  .colBody{ overflow-x: hidden; }
  .card{ max-width: 100%; }
  .cardTop, .cardBottom{ max-width: 100%; }

  /* Mobile: prevent horizontal overflow + keep controls from forcing min widths */
  html, body{ overflow-x:hidden; }
  .boardWrap, .treeWrap{ overflow-x:hidden !important; }

  .board{grid-template-columns: repeat(1, minmax(0, 1fr))}
  .grid{grid-template-columns: 1fr}
  .span2{grid-column:auto}
  .controls{align-items:flex-start}
  .controlsRow{justify-content:flex-start}
  .control input, .control select{min-width: 0; width: 100%;}
  .boardPicker select{ min-width: 0; width: 100%; max-width: 100%; }
}

/* boardPicker layout */
.boardPicker{
  display:grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap:6px 8px;
  align-items:center;
}
.boardPicker .boardLabel{
  grid-column:1;
  grid-row:1;
  display:block;
  width:100%;
  text-align:center;
  color: var(--brand-blue);
  font-size: 15px;
  font-weight: 850;
}
.boardPicker .pillLabel{
  grid-column:2;
  grid-row:1;
}
.boardPicker select{ grid-column:1; grid-row:2; min-width: 220px; max-width: 360px; }
.boardPicker .pill{ grid-column:2; grid-row:2; }

.pill{
  display:inline-flex;
  align-items:center;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  border: 1px solid rgba(16,24,40,.18);
  color: var(--muted);
  background: rgba(16,24,40,.04);
}
.pill.on{
  color: rgba(255,255,255,.92);
  border-color: color-mix(in srgb, var(--bg) 60%, black 40%);
  background: color-mix(in srgb, var(--bg) 88%, black 12%);
}
.pill.on.saving{
  color: color-mix(in srgb, var(--gold) 78%, black 22%);
  border-color: color-mix(in srgb, var(--gold) 50%, transparent);
  background: color-mix(in srgb, var(--gold) 20%, transparent);
}
.pill.on.error{
  color: color-mix(in srgb, var(--danger) 82%, black 18%);
  border-color: color-mix(in srgb, var(--danger) 55%, transparent);
  background: color-mix(in srgb, var(--danger) 18%, transparent);
}

/* Notification unread counter */
#notifyCount{
  min-width: 28px;
  justify-content: center;
}
#notifyCount.hot{
  background: #b42318;
  border-color: rgba(180,35,24,.75);
  color: rgba(255,255,255,.98);
  box-shadow: 0 6px 14px rgba(180,35,24,.22);
}

/* -------- Guardrails (server/local reliability) -------- */
.readonlyOverlay{
  position:fixed;
  inset:0;
  background:rgba(10,14,18,.55);
  backdrop-filter: blur(2px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  z-index: 1000;
}
.readonlyCard{
  width:min(560px, calc(100vw - 24px));
  background:rgba(239,242,246,.98);
  border:1px solid rgba(0,0,0,.12);
  border-radius:16px;
  padding:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.18);
}
.readonlyTitle{
  font-weight:800;
  font-size:16px;
  color:var(--ink);
  margin-bottom:6px;
}
.readonlyBody{
  color:var(--muted);
  line-height:1.35;
  margin-bottom:12px;
}
.readonlyActions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
}



/* Helpdesk portal: My tickets list */
.hdTicketItem{ display:flex; align-items:flex-start; gap:10px; padding:10px 12px; border:1px solid rgba(255,255,255,.18); border-radius:14px; background: rgba(255,255,255,.10); cursor:pointer; }
.hdTicketItem:hover{ background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.26); }
.hdTicketTitle{ font-weight:900; color: rgba(255,255,255,.96); }
.hdTicketMeta{ font-size:12px; color: rgba(255,255,255,.78); }

#hdMineList{ padding: 6px 12px; display:flex; flex-direction:column; gap:12px; }

#hdPaneMine{ padding-top: 6px; }

#hdTabNew,#hdTabMine{ margin-left: 6px; }


/* Helpdesk portal: Mine pane */
#hdPaneMine .panel{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16) !important; }
#hdTicketTitle{ color: rgba(255,255,255,.96); font-size:16px; }
#hdTicketMeta{ color: rgba(255,255,255,.78) !important; font-size:12px; }
#hdTicketDesc{ color: rgba(255,255,255,.88) !important; font-size:13px; line-height:1.4; }
#hdPaneMine label span{ color: rgba(255,255,255,.86) !important; }
#hdReplyBody{ background: rgba(255,255,255,.94); }
#hdComments .muted{ color: rgba(255,255,255,.78) !important; }

/* Align Helpdesk tabs with section content */
#hdTabNew,#hdTabMine{ margin-left: 0; }

.hdMineMode #helpdeskSubmit{ display:none !important; }

#hdTabNew,#hdTabMine{ margin-bottom: 12px; }



/* UI_LEADTRACKER_ATTACHMENTS_DARKTEXT_V1 */
body.leadFlow.uiLeadTracker .attachItem, body.uiLeadTracker .attachItem{border:1px solid rgba(76,29,149,.18); background: rgba(255,255,255,.75);}
body.leadFlow.uiLeadTracker .attachItem a, body.uiLeadTracker .attachItem a{color: rgba(59,7,100,.92) !important;}
body.leadFlow.uiLeadTracker .attachMeta, body.uiLeadTracker .attachMeta{color: rgba(59,7,100,.72) !important;}
/* Helpdesk portal: uiLeadTracker overrides */
body.leadFlow.uiLeadTracker #helpdeskModal .panel{
  background: var(--surface-2) !important;
  border-color: rgba(76,29,149,.18) !important;
}
body.leadFlow.uiLeadTracker .hdTicketItem{
  background: var(--surface-3) !important;
  border-color: rgba(76,29,149,.18) !important;
}
body.leadFlow.uiLeadTracker .hdTicketTitle{ color: var(--brand-blue) !important; }
body.leadFlow.uiLeadTracker .hdTicketMeta{ color: color-mix(in srgb, var(--brand-blue) 65%, white 35%) !important; }
body.leadFlow.uiLeadTracker #hdTicketTitle{ color: var(--brand-blue) !important; }
body.leadFlow.uiLeadTracker #hdTicketMeta{ color: color-mix(in srgb, var(--brand-blue) 70%, white 30%) !important; }
body.leadFlow.uiLeadTracker #hdTicketDesc{ color: rgba(59,7,100,.92) !important; }
body.leadFlow.uiLeadTracker #hdPaneMine label span{ color: rgba(59,7,100,.86) !important; }
body.leadFlow.uiLeadTracker #hdComments .historyItem{
  background: rgba(255,255,255,.75) !important;
  border-color: rgba(76,29,149,.18) !important;
}
body.leadFlow.uiLeadTracker #hdComments .historyMeta{ color: rgba(59,7,100,.72) !important; }
body.leadFlow.uiLeadTracker #hdComments .commentBody{ color: rgba(59,7,100,.92) !important; }

/* Helpdesk tabs padding */
#helpdeskForm .row{ padding-left: 12px; padding-right: 12px; }


/* Helpdesk portal: iqLeadTracker overrides */
body.leadFlow.iqLeadTracker #helpdeskModal .panel{
  background: var(--surface-2) !important;
  border-color: rgba(154,52,18,.18) !important;
}
body.leadFlow.iqLeadTracker .hdTicketItem{
  background: var(--surface-3) !important;
  border-color: rgba(154,52,18,.18) !important;
}
body.leadFlow.iqLeadTracker .hdTicketTitle{ color: var(--brand-blue) !important; }
body.leadFlow.iqLeadTracker .hdTicketMeta{ color: color-mix(in srgb, var(--brand-blue) 65%, white 35%) !important; }
body.leadFlow.iqLeadTracker #hdTicketTitle{ color: var(--brand-blue) !important; }
body.leadFlow.iqLeadTracker #hdTicketMeta{ color: color-mix(in srgb, var(--brand-blue) 70%, white 30%) !important; }
body.leadFlow.iqLeadTracker #hdTicketDesc{ color: rgba(124,45,18,.92) !important; }
body.leadFlow.iqLeadTracker #hdPaneMine label span{ color: rgba(124,45,18,.86) !important; }
body.leadFlow.iqLeadTracker #hdComments .historyItem{
  background: rgba(255,255,255,.78) !important;
  border-color: rgba(154,52,18,.18) !important;
}
body.leadFlow.iqLeadTracker #hdComments .historyMeta{ color: rgba(124,45,18,.72) !important; }
body.leadFlow.iqLeadTracker #hdComments .commentBody{ color: rgba(124,45,18,.92) !important; }


/* Helpdesk modal: field alignment */
#helpdeskModal .grid label{ width:100%; }
#helpdeskModal .grid input,#helpdeskModal .grid select,#helpdeskModal .grid textarea{ width:100%; box-sizing:border-box; }
#helpdeskModal .row label{ margin:0; }


/* Helpdesk portal: Lead Tracker overrides (no leadFlow dependency) */
body.uiLeadTracker #helpdeskModal .panel{
  background: var(--surface-2) !important;
  border-color: rgba(76,29,149,.18) !important;
}
body.uiLeadTracker .hdTicketItem{
  background: var(--surface-3) !important;
  border-color: rgba(76,29,149,.18) !important;
}
body.uiLeadTracker .hdTicketTitle, body.uiLeadTracker #hdTicketTitle{ color: var(--brand-blue) !important; }
body.uiLeadTracker .hdTicketMeta, body.uiLeadTracker #hdTicketMeta{ color: color-mix(in srgb, var(--brand-blue) 70%, white 30%) !important; }
body.uiLeadTracker #hdTicketDesc{ color: rgba(59,7,100,.92) !important; }
body.uiLeadTracker #hdPaneMine label span{ color: rgba(59,7,100,.86) !important; }
body.uiLeadTracker #hdComments .historyItem{ background: rgba(255,255,255,.75) !important; border-color: rgba(76,29,149,.18) !important; }
body.uiLeadTracker #hdComments .historyMeta{ color: rgba(59,7,100,.72) !important; }
body.uiLeadTracker #hdComments .commentBody{ color: rgba(59,7,100,.92) !important; }

body.iqLeadTracker #helpdeskModal .panel{
  background: var(--surface-2) !important;
  border-color: rgba(154,52,18,.18) !important;
}
body.iqLeadTracker .hdTicketItem{
  background: var(--surface-3) !important;
  border-color: rgba(154,52,18,.18) !important;
}
body.iqLeadTracker .hdTicketTitle, body.iqLeadTracker #hdTicketTitle{ color: var(--brand-blue) !important; }
body.iqLeadTracker .hdTicketMeta, body.iqLeadTracker #hdTicketMeta{ color: color-mix(in srgb, var(--brand-blue) 70%, white 30%) !important; }
body.iqLeadTracker #hdTicketDesc{ color: rgba(124,45,18,.92) !important; }
body.iqLeadTracker #hdPaneMine label span{ color: rgba(124,45,18,.86) !important; }
body.iqLeadTracker #hdComments .historyItem{ background: rgba(255,255,255,.78) !important; border-color: rgba(154,52,18,.18) !important; }
body.iqLeadTracker #hdComments .historyMeta{ color: rgba(124,45,18,.72) !important; }
body.iqLeadTracker #hdComments .commentBody{ color: rgba(124,45,18,.92) !important; }


/* Helpdesk portal: iQueueRM theme overrides */
html[data-theme="iQueueRM"] #helpdeskModal .panel{
  background: rgba(255,255,255,.55) !important;
  border-color: rgba(122,29,90,.18) !important;
}
html[data-theme="iQueueRM"] .hdTicketItem{
  background: rgba(255,255,255,.45) !important;
  border-color: rgba(122,29,90,.18) !important;
}
html[data-theme="iQueueRM"] .hdTicketTitle,
html[data-theme="iQueueRM"] #hdTicketTitle{
  color: #7a1d5a !important;
}
html[data-theme="iQueueRM"] .hdTicketMeta,
html[data-theme="iQueueRM"] #hdTicketMeta{
  color: color-mix(in srgb, #7a1d5a 65%, white 35%) !important;
}
html[data-theme="iQueueRM"] #hdTicketDesc{
  color: rgba(33,12,24,.88) !important;
}
html[data-theme="iQueueRM"] #hdPaneMine label span{
  color: rgba(33,12,24,.75) !important;
}
html[data-theme="iQueueRM"] #hdComments .historyItem{
  background: rgba(255,255,255,.70) !important;
  border-color: rgba(122,29,90,.18) !important;
}
html[data-theme="iQueueRM"] #hdComments .historyMeta{ color: rgba(33,12,24,.62) !important; }
html[data-theme="iQueueRM"] #hdComments .commentBody{ color: rgba(33,12,24,.88) !important; }


/* MD_PREVIEW_MODULE_V1 */
.mdWrap{display:flex; flex-direction:column; gap:8px;}
.mdToolbar{display:flex; gap:8px; flex-wrap:wrap; align-items:center;}
.mdBtn{padding:6px 10px; border-radius:12px; font-weight:900;}
.mdPreview{border:1px solid var(--border-2); background: rgba(255,255,255,.82); border-radius:12px; padding:10px 12px; min-height: 120px; color: color-mix(in srgb, var(--slate) 86%, black 14%);}
.mdPreview .mdP{margin:0 0 8px 0; white-space:pre-wrap; line-height:1.35;}
.mdPreview ul, .mdPreview ol{margin:0 0 10px 18px; padding:0;}
.mdPreview li{margin:4px 0;}
.mdPreview a{color: var(--brand-blue); font-weight:900; text-decoration:underline;}




/* QUILL_RTE_PILOT_V1 */
.rteWrap .ql-toolbar{border-radius:12px 12px 0 0;}
.rteWrap .ql-container{border-radius:0 0 12px 12px; background: rgba(255,255,255,.92);}
.rteWrap .ql-editor{min-height:140px;}


/* QUILL_RTE_PILOT_V2 */
.rteWrap{width:100%;}
.rteWrap.rteComment{flex:1; min-width:260px;}
.rteWrap .ql-container{height:auto !important;}
.rteWrap .ql-editor{height:auto !important;}
.rteWrap.rteDesc .ql-editor{min-height:180px;}
.rteWrap.rteComment .ql-editor{min-height:120px;}

.rteWrap .ql-toolbar{background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.18);}
.rteWrap .ql-toolbar button, .rteWrap .ql-toolbar .ql-picker{color: rgba(255,255,255,.92) !important;}
.rteWrap .ql-toolbar .ql-stroke{stroke: rgba(255,255,255,.92) !important;}
.rteWrap .ql-toolbar .ql-fill{fill: rgba(255,255,255,.92) !important;}
.rteWrap .ql-toolbar .ql-picker-label{color: rgba(255,255,255,.92) !important;}
.rteWrap .ql-toolbar .ql-picker-options{color: rgba(17,24,39,.92) !important;}


/* QUILL_RTE_PILOT_V3 */
/* Ensure editor text is readable (dark) while keeping toolbar icons white */
.rteWrap .ql-container, .rteWrap .ql-editor{ color: rgba(17,24,39,.92) !important; }
.rteWrap .ql-editor::placeholder{ color: rgba(71,85,105,.72) !important; }
.rteWrap .ql-editor p, .rteWrap .ql-editor li, .rteWrap .ql-editor span, .rteWrap .ql-editor div{ color: inherit !important; }


/* ATTACH_FILENAME_CONTRAST_DEFAULT_THEME_V1 */
html:not([data-theme]) .attachItem a{ color: rgba(255,255,255,.92) !important; }
html:not([data-theme]) .attachItem a:hover{ text-decoration: underline; }


/* UI_GLOBAL_ANNOUNCEMENT_DEFAULT_THEME_TWEAK_V1 */
html:not([data-theme]) .globalAnnouncement{ margin-top:18px; }
html:not([data-theme]) .globalAnnouncement .gaTitle{ color: rgba(255,255,255,.95); }
html:not([data-theme]) .globalAnnouncement .gaBody{ color: rgba(255,255,255,.88); }
html:not([data-theme]) .globalAnnouncement .gaDismiss{ color: rgba(255,255,255,.92); }


/* UI_GLOBAL_ANNOUNCEMENT_DEFAULT_THEME_TWEAK_V2 */
html:not([data-theme]) .globalAnnouncement{ margin-top:18px; margin-bottom:14px; }
html:not([data-theme]) .globalAnnouncement .gaTitle{ color: var(--sun); }
html:not([data-theme]) .globalAnnouncement .gaDismiss{ background: var(--sun); color:#fff; border:1px solid color-mix(in srgb, var(--sun) 70%, black 30%); padding:6px 12px; border-radius:999px; font-weight:900; cursor:pointer; }
html:not([data-theme]) .globalAnnouncement .gaDismiss:hover{ filter: brightness(1.03); }


/* DISABLE_TAG_CLOUD_SUGGESTIONS_V1 */
.tagCloud{ display:none !important; }