/* assignments.css — styles for the Raid Assignments page (assignments.html).
   Reuses the CSS variables defined in style.css (loaded first):
   --bg --surface --line --line-soft --text --text-soft --muted --accent */

#asg-host { max-width: none; margin: 0; padding: 0 20px; box-sizing: border-box; }

/* Boss tab bar — pill buttons like the SR page's boss filters. */
/* Boss tabs sit inline in the single toolbar row now (no own margin/border). */
#asg-bosses {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}
/* Boss tabs share the unified toolbar-button look (see .asg-btn below). The only
   difference is the active tab, which gets the single accent highlight. */
.boss-btn.active,
.boss-btn.active:hover {
  background: var(--accent);
  color: #1a1a1a;
  border-color: var(--accent);
}

/* Strat selector (e.g. Karathress Dad/Nuke) — lives in the action bar, inline
   with Save/Clear, so it shares that row instead of sitting above the diagram. */
.asg-strat-slot { display: inline-flex; align-items: center; }
.asg-strat-slot:empty { display: none; }
.asg-setup {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}
.asg-setup-label {
  color: var(--muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.asg-setup-select {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.35rem 0.6rem;
  font: inherit;
  font-size: 0.9rem;
  color-scheme: dark;
}
.asg-setup-select option { background: var(--surface); color: var(--text); }

/* Diagram + boxes share ONE masonry grid: the diagram is a grid item spanning
   several columns and as many fine (1px) rows as its height needs; the boxes
   fill every remaining cell — beside the diagram, then under it — with no dead
   space (each box is a full 1fr column). Row gaps come from the JS row-span
   (+gap). Scoped via .asg-grid-masonry so the Group Maker grid is unaffected. */
/* .asg-grid.asg-grid-masonry (two classes) so these win over the base .asg-grid
   rule that's defined later in the file — especially row-gap, which must be 0
   here (1px rows + a 16px row-gap would blow the spacing apart). */
.asg-grid.asg-grid-masonry {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-auto-rows: 1px;
  grid-auto-flow: row dense;
  column-gap: 16px;
  row-gap: 0;
  align-items: start;
  margin-bottom: 1.25rem;
}
.asg-diagram-cell {
  position: relative;
  overflow: hidden;            /* grid-column span is set by JS */
}
.asg-diagram-cell .asg-diagram { margin: 0; }
.asg-diagram {
  margin: 0;
  text-align: center;
}
.asg-diagram img {
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: block;
}
/* Right-edge resize handle for the diagram (drag to change how many columns it
   spans). Editors only. */
.asg-diag-resize {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 12px;
  cursor: ew-resize;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.05));
  z-index: 3;
}
.asg-diag-resize:hover { background: linear-gradient(to right, transparent, var(--accent)); }
body.asg-readonly .asg-diag-resize { display: none; }

/* Drag the divider between two column headers to resize columns (editors). A
   faint line shows on box hover; the accent shows when grabbing the divider. */
.asg-col-resize {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 8px;
  cursor: col-resize;
  z-index: 4;
}
.asg-col-resize::after {
  content: '';
  position: absolute;
  top: 5px;
  bottom: 5px;
  right: 0;
  width: 2px;
  background: transparent;
}
.asg-block:hover .asg-col-resize::after { background: var(--line-soft); }
.asg-col-resize:hover::after { top: 0; bottom: 0; background: var(--accent); }
body.asg-readonly .asg-col-resize { display: none; }

.asg-page-head {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin: 0.5rem 0 1.25rem;
  flex-wrap: wrap;
}
.asg-page-head h2 { margin: 0; font-size: 1.6rem; }
.asg-raid { color: var(--muted); font-size: 0.95rem; }

/* Row 1: Group Builder + boss tabs span their own row. */
.asg-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--line);
}

/* Action bar above the diagram: spans the full width. Edit actions sit left;
   copy/download/gear are pushed right (see #asg-copy { margin-left:auto }). */
.asg-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 1rem;
}
/* Unified toolbar buttons — Group Builder, boss tabs, actions, icon buttons and
   the gear ALL share one size, shape and color. Only the active boss tab (accent
   fill, above) and hover differ. */
.asg-btn,
.boss-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  background: var(--surface);
  color: var(--text-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}
.asg-btn:hover,
.boss-btn:hover {
  background: var(--surface);
  border-color: var(--accent);
  color: var(--text);
  filter: none;
}
/* Clear used to be a ghost button; keep it identical to the rest now. */
.asg-btn-ghost { background: var(--surface); color: var(--text-soft); border-color: var(--line); }
.asg-btn-ghost:hover { color: var(--text); border-color: var(--accent); }

/* Login bar — pushed to the right of the toolbar row. Shows login state plus
   Login / Logout / Claim. Links inside reuse .asg-btn but must not be underlined. */
.asg-login { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.asg-login a.asg-btn { text-decoration: none; }
.asg-login-msg { color: var(--text-soft); font-size: 13px; }

/* Hamburger dropdown menu (logged-in: Add Delegate / Add Guild / Logout). */
.asg-menu-wrap { position: relative; display: inline-flex; }
.asg-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 160px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  z-index: 900;
}
.asg-menu.open { display: block; }
/* Box hamburger menus open as fixed elements (positioned in JS) so the box's
   overflow:hidden can't clip them. */
/* right:auto clears the .asg-menu `right:0` — otherwise left (set in JS) + right
   together stretch the fixed menu to the window edge (e.g. the Hydross resist
   popup spanning full width). With only left set it shrink-wraps its content. */
.asg-boxmenu { position: fixed; top: auto; right: auto; }
.asg-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  background: none;
  border: 0;
  border-radius: 6px;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
}
.asg-menu-item:hover { background: var(--bg); color: var(--text); }

/* ───── editable Debuffs block (Group Maker) ───── */
.asg-dbf-cell { display: flex; align-items: center; gap: 6px; }
.asg-dbf-cell .asg-spec-icon { flex: none; }
.asg-dbf-type { flex: 1 1 auto; min-width: 0; }
/* Marker column: only as wide as the marker glyph. */
.asg-dbf-table th:nth-child(2), .asg-dbf-mcell { width: 1%; white-space: nowrap; text-align: center; padding-left: 2px; padding-right: 2px; }
.asg-dbf-marker { font-size: 15px; cursor: pointer; }
.asg-mark-wrap { position: relative; display: inline-block; }
/* Fixed so it opens OVER the box instead of being clipped by overflow:hidden.
   Position is set in JS on open. */
.asg-mark-menu {
  display: none;
  position: fixed;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  z-index: 950;
}
.asg-mark-menu.open { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.asg-mark-opt {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
  padding: 4px 7px;
  border-radius: 4px;
}
.asg-mark-opt:hover { background: var(--bg); }
.asg-dbf-table th:last-child, .asg-dbf-rmcell { width: 1%; white-space: nowrap; }
/* Hamburger in the maroon header bar. */
.asg-dbf-menuwrap { margin-left: auto; }
.asg-dbf-burger {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
  padding: 0 6px;
  font-size: 13px;
  line-height: 1.5;
}
.asg-dbf-burger:hover { border-color: #fff; }
.asg-dbf-rm {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
  padding: 0 4px;
}
.asg-dbf-rm:hover { color: var(--warn); }
/* The "×" remove column is hidden until "− Remove debuff" is chosen. */
.asg-dbf-rmcol, .asg-dbf-rmcell { display: none; }
.asg-dbf-removing .asg-dbf-rmcol, .asg-dbf-removing .asg-dbf-rmcell { display: table-cell; text-align: center; width: 1%; }
.asg-dbf-rmcancel {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 0 2px;
}
.asg-dbf-rmcancel:hover { color: #fff; }

/* Read-only mode (non-editors): hide every editing control and lock all inputs,
   labels, notes, markers and assist checkboxes so the plan can be viewed but not
   changed. Copy/download/Group-Builder/boss-tabs stay usable. */
.asg-readonly .asg-edit-only { display: none !important; }
.asg-readonly .asg-input,
.asg-readonly .asg-resist-trig,
.asg-readonly .asg-elabel,
.asg-readonly .asg-xlabel,
.asg-readonly .asg-xnote,
.asg-readonly .asg-note-title,
.asg-readonly .asg-note-body,
.asg-readonly .asg-marker-click,
.asg-readonly .asg-assist-table input,
.asg-readonly .asg-assist-table select {
  pointer-events: none;
  opacity: 0.92;
}

/* Delegate management panel (Phase 2c) — a modal listing a guild's editors with
   add/remove, opened from the login bar's "Delegates" button. */
.asg-del-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 64px 16px;
  z-index: 1000;
}
.asg-del-panel {
  width: 100%;
  max-width: 520px;
  background: var(--surface, #171a20);
  border: 1px solid var(--line, #232730);
  border-radius: 10px;
  padding: 16px 18px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
.asg-del-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.asg-del-head strong { font-size: 15px; }
.asg-del-hint { margin: 8px 0 14px; color: var(--text-soft, #b6bac3); font-size: 12px; line-height: 1.5; }
.asg-del-subhead { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-soft, #b6bac3); margin: 4px 0 6px; }
.asg-del-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; max-height: 260px; overflow-y: auto; }
.asg-del-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 10px;
  background: var(--bg, #0f1115);
  border: 1px solid var(--line, #232730);
  border-radius: 6px;
}
.asg-del-name { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asg-del-super .asg-del-name { color: var(--accent, #d4b274); }
.asg-del-x { height: 26px; padding: 0 10px; }
.asg-del-empty { color: var(--text-soft, #b6bac3); font-size: 13px; padding: 4px 2px; }
.asg-ag-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.asg-ag-field .asg-del-subhead { margin: 0; }
.asg-del-add { display: flex; gap: 8px; }
.asg-del-input {
  flex: 1;
  height: 32px;
  padding: 0 10px;
  background: var(--bg, #0f1115);
  color: var(--text, #e8eaee);
  border: 1px solid var(--line, #232730);
  border-radius: 6px;
  font: inherit;
  font-size: 13px;
}

.asg-source {
  margin: 0 0 1rem;
  padding: 0.55rem 0.8rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text-soft);
  font-size: 0.85rem;
}
.asg-source-empty { border-color: var(--accent); color: var(--text); }
.asg-source a { color: var(--accent); }

.asg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  align-items: start;
}
/* Wide blocks (e.g. the two-group Priest Add Interrupts table) span two grid
   columns so their extra columns don't clip — leaving room for the next block
   (Misdirects) to sit beside them on the same row. */
.asg-block-wide { grid-column: span 2; }

/* Source-sheet look: dark card, maroon icon header bar, tight bordered table. */
.asg-block {
  background: #14171c;
  border: 1px solid #000;
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}

/* Drag-to-reorder: grip handle (editors only), shown on box hover. */
.asg-drag {
  position: absolute;
  top: 0;
  left: 0;
  padding: 2px 6px;
  font-size: 13px;
  line-height: 1;
  color: var(--muted);
  background: var(--bg);
  border-bottom-right-radius: 4px;
  cursor: grab;
  opacity: 0;
  transition: opacity 0.12s;
  user-select: none;
  z-index: 2;
}
.asg-block:hover .asg-drag { opacity: 0.85; }
.asg-drag:hover { opacity: 1; color: var(--accent); }
.asg-drag:active { cursor: grabbing; }
.asg-block.asg-dragging { opacity: 0.5; outline: 2px dashed var(--accent); }
body.asg-readonly .asg-drag { display: none; }
.asg-order-reset {
  margin-top: 12px;
  font-size: 12px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
  border-radius: 4px;
  padding: 5px 10px;
  cursor: pointer;
}
.asg-order-reset:hover { color: var(--accent); border-color: var(--accent); }

/* Maroon header bar with a per-block icon (matches the T5 sheet). */
.asg-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  background: #7a1f2b;            /* maroon */
  background: linear-gradient(#8c2531, #6f1c27);
  padding: 4px 8px;
  border-bottom: 1px solid #000;
}
.asg-bar-icon {
  width: 18px;
  height: 18px;
  border-radius: 2px;
  border: 1px solid #000;
  flex: none;
}
.asg-bar-title {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #f3e6c8;                 /* warm parchment text */
}
/* Right-aligned X in a block bar (Group Planner Assist) that hides the box. */
.asg-assist-close {
  margin-left: auto;
  flex: none;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: rgba(0, 0, 0, 0.18);
  color: #f3e6c8;
  border: 1px solid rgba(0, 0, 0, 0.35);
  border-radius: 4px;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
.asg-assist-close:hover { background: rgba(0, 0, 0, 0.4); color: #fff; }

/* Right-aligned icon button on a block title bar (e.g. Copy-for-MRT). */
.asg-bar-btn {
  margin-left: auto;
  flex: none;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: rgba(0, 0, 0, 0.18);
  color: #f3e6c8;
  border: 1px solid rgba(0, 0, 0, 0.35);
  border-radius: 4px;
  cursor: pointer;
}
.asg-bar-btn:hover { background: rgba(0, 0, 0, 0.4); color: #fff; }

.asg-note {
  margin: 0;
  padding: 0.5rem 0.6rem;
  color: var(--text-soft);
  font-size: 0.82rem;
  line-height: 1.35;
}

.asg-table { width: 100%; border-collapse: collapse; }

/* "Assignment | Player" style sub-header row */
.asg-table th {
  text-align: left;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-weight: 600;
  background: #1b1f26;
  padding: 4px 8px;
  border: 1px solid #000;
}

.asg-table td {
  padding: 3px 8px;
  border: 1px solid #000;
  vertical-align: middle;
  background: #14171c;
}

/* Platform-coded row (Lurker Outer Platform CC): every cell gets a faint wash of
   the platform color (85% dark overlay over the solid color = a subtle tint),
   plus a solid color bar down the left edge. Identifies the platform with no
   Platform column. */
.asg-rowbar > td {
  background: linear-gradient(rgba(20, 23, 28, 0.86), rgba(20, 23, 28, 0.86)), var(--rowbar, transparent);
}
.asg-rowbar > td:first-child {
  border-left: 5px solid var(--rowbar, transparent);
}

.asg-label {
  color: var(--text-soft);
  font-size: 0.84rem;
  white-space: nowrap;
}
/* Plain target label (cells: { text }) — sizes to content, never wraps. */
.asg-target {
  color: var(--text-soft);
  font-size: 0.84rem;
  white-space: nowrap;
}
/* Shrink the first column to its content (the rest goes to the dropdown column). */
.asg-tight1 th:first-child,
.asg-tight1 td:first-child { width: 1%; white-space: nowrap; }

/* Editable assignment label — looks like plain label text until focused. */
.asg-elabel, .asg-xlabel {
  width: 100%;
  min-width: 80px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-soft);
  font: inherit;
  font-size: 0.84rem;
  padding: 2px 4px;
  border-radius: 3px;
}
.asg-elabel:hover, .asg-xlabel:hover { border-color: var(--line); }
.asg-elabel:focus, .asg-xlabel:focus {
  outline: none;
  background: #0d0f13;
  border-color: var(--accent);
  color: var(--text);
}
/* User-added rows: the × sits at the right of the player cell (inside it, so it
   never adds a column that would clip), shown only in "Remove rows" mode. */
.asg-xrow-pcell { display: flex; align-items: center; gap: 4px; }
.asg-xrow-pcell .asg-input { flex: 1 1 auto; min-width: 0; }
/* Equal-width columns (Healer Assignments). */
.asg-eqcols { table-layout: fixed; }
.asg-eqcols th, .asg-eqcols td { width: 50%; }
.asg-xrow-rm {
  display: none;
  flex: none;
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0 2px;
}
.asg-xremoving-rows .asg-xrow-rm { display: inline-block; }
.asg-xrow-rm:hover { color: var(--warn); }
/* Per-box note (added via the hamburger), shown above the rows. */
.asg-xnote-wrap { display: flex; align-items: flex-start; gap: 4px; padding: 6px 8px 0; }
.asg-xnote {
  flex: 1;
  resize: none;
  overflow: hidden;
  background: #0d0f13;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--text-soft);
  font: inherit;
  font-size: 0.82rem;
  line-height: 1.4;
  padding: 4px 6px;
}
.asg-xnote:focus { outline: none; border-color: var(--accent); color: var(--text); }
.asg-xnote-rm {
  display: none;
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 2px 4px;
}
.asg-xremoving-notes .asg-xnote-rm { display: inline-block; }
.asg-xnote-rm:hover { color: var(--warn); }
/* Cancel (done removing) icon in the box header — only while in remove mode. */
.asg-xremove-cancel {
  display: none;
  background: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 15px;
  line-height: 1.4;
  padding: 0 4px;
}
.asg-xremoving-rows .asg-xremove-cancel,
.asg-xremoving-notes .asg-xremove-cancel { display: inline-block; }
.asg-xremove-cancel:hover { color: var(--accent); }

/* Multi-line editable note (e.g. Void Reaver misdirect target / orb baiters). */
.asg-enote {
  display: block;
  margin: 6px 8px 8px;
  width: calc(100% - 16px);
  resize: none;          /* auto-sized in JS to fit content — no scrollbar */
  overflow: hidden;
  white-space: pre-wrap;
  line-height: 1.35;
  border-color: var(--line);
}
.asg-marker {
  font-size: 0.95rem;
  line-height: 1;
  text-shadow: 0 0 1px #000, 0 0 2px #000;  /* outline so light markers read */
  vertical-align: -1px;
}
/* Opt-in (.asg-bigmark, set by the block): blow the Skull/X markers up ~4x to
   balance a wide two-group table (the Priest Add Interrupts block). Other wide
   blocks keep normal-size markers. */
.asg-bigmark .asg-marker { font-size: 3.8rem; vertical-align: middle; }
.asg-bigmark .asg-cc .asg-marker { font-size: 0.95rem; vertical-align: -1px; }
/* Click-to-change markers: signal interactivity and give a hover/active cue. */
.asg-marker-click {
  cursor: pointer;
  border-radius: 3px;
  padding: 0 1px;
  transition: background 0.1s ease, transform 0.05s ease;
  user-select: none;
}
.asg-marker-click:hover { background: rgba(255, 255, 255, 0.12); }
.asg-marker-click:active { transform: scale(0.85); }
/* marker + dropdown side by side (Outer Platform CC) */
.asg-cc { display: flex; align-items: center; gap: 5px; }
.asg-cc .asg-input { flex: 1; min-width: 70px; }

/* spec-icon + dropdown side by side (Misdirects: hunter / tank) */
.asg-named { display: flex; align-items: center; gap: 5px; }
.asg-named .asg-input { flex: 1; min-width: 70px; }
/* A pile's players (Melee Positioning) share one cell on the same row; they
   shrink to share the width, wrapping only if the column gets very tight. */
.asg-fieldrow { display: flex; flex-wrap: wrap; gap: 5px; }
.asg-fieldrow .asg-input { flex: 1 1 80px; min-width: 0; }
.asg-spec-icon {
  width: 18px;
  height: 18px;
  border-radius: 2px;
  border: 1px solid #000;
  flex: none;
}
/* small centered order number between hunter and tank */
.asg-num {
  text-align: center;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  width: 1.5rem;
}
/* Static role/ability icon in a cell (e.g. Phase 3 Kill Order). */
.asg-roleicon { width: 22px; height: 22px; border-radius: 4px; border: 1px solid #000; vertical-align: middle; display: inline-block; }

/* Group Builder: group-local beneficial buffs under each column. */
/* td.* beats the `.asg-table td { vertical-align: middle }` rule so the strip
   stays pinned to the top when a sibling column's buffs wrap to a second row. */
.asg-table td.asg-grp-buff-cell { padding: 5px 4px 6px; vertical-align: top; border-top: 1px solid #2a2f38; }
/* min-width fits 5 icons (5×25px + 4×3px gap) so they sit on one row, no gap. */
.asg-grp-buffs { display: flex; flex-wrap: wrap; gap: 3px; min-width: 137px; align-items: flex-start; align-content: flex-start; }
.asg-grp-buff-wrap { position: relative; display: inline-block; line-height: 0; flex: none; }
.asg-grp-buff { width: 23px; height: 23px; border-radius: 2px; border: 1px solid #000; display: block; }
/* Stack count (more than one provider) over the icon's bottom-right corner. */
.asg-grp-buff-count {
  position: absolute; right: -3px; bottom: -3px;
  min-width: 13px; height: 13px; padding: 0 2px; box-sizing: border-box;
  font-size: 10px; line-height: 11px; font-weight: 700; text-align: center;
  color: #fff; background: rgba(0, 0, 0, 0.85);
  border: 1px solid #000; border-radius: 3px;
}
/* Outline each buff by the class color of the provider. */
.asg-grp-buff.class-warrior { border-color: var(--warrior); }
.asg-grp-buff.class-paladin { border-color: var(--paladin); }
.asg-grp-buff.class-hunter  { border-color: var(--hunter); }
.asg-grp-buff.class-rogue   { border-color: var(--rogue); }
.asg-grp-buff.class-priest  { border-color: var(--priest); }
.asg-grp-buff.class-shaman  { border-color: var(--shaman); }
.asg-grp-buff.class-mage    { border-color: var(--mage); }
.asg-grp-buff.class-warlock { border-color: var(--warlock); }
.asg-grp-buff.class-druid   { border-color: var(--druid); }

/* Raid Plans — raidplan.io / image links shown inline per page. */
.asg-raidplan-url {
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 6px;
  padding: 5px 7px;
  background: #0d0f13;
  border: 1px solid #2a2f38;
  border-radius: 4px;
  color: var(--text, #d7dbe0);
  font-size: 0.82rem;
}
.asg-raidplan-host { display: block; }
.asg-raidplan-img { display: block; width: 100%; height: auto; border-radius: 4px; border: 1px solid #2a2f38; }
.asg-raidplan-frame { display: block; width: 100%; height: 540px; border-radius: 4px; border: 1px solid #2a2f38; background: #0d0f13; }
.asg-raidplan-empty { color: var(--muted); font-size: 0.85rem; padding: 10px; text-align: center; border: 1px dashed #2a2f38; border-radius: 4px; }
.asg-raidplan-link { display: inline-block; padding: 8px 12px; color: #7ec0ee; text-decoration: none; }
.asg-raidplan-link:hover { text-decoration: underline; }

.asg-input {
  width: 100%;
  min-width: 84px;
  background: #0d0f13;
  border: 1px solid #2a2f38;
  color: var(--text);
  padding: 3px 6px;
  border-radius: 2px;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 600;
}
.asg-input:focus {
  outline: none;
  border-color: var(--accent);
}
/* Hydross resistance picker: a custom icon dropdown (native <option>s can't hold
   images). Trigger shows the chosen resist-set icon(s); the popup lists them. */
/* Center the resist icon(s) in their column. */
.asg-resist-cell { text-align: center; }
.asg-resist-wrap { display: inline-flex; }
.asg-resist-trig {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 24px;
  padding: 2px 4px;
  background: #0d0f13;
  border: 1px solid #2a2f38;
  border-radius: 2px;
  cursor: pointer;
}
.asg-resist-trig:hover { border-color: var(--accent); }
.asg-resist-ic { width: 16px; height: 16px; border-radius: 2px; display: block; }
.asg-resist-caret { font-size: 9px; color: var(--muted); margin-left: 1px; }
.asg-resist-dash { color: var(--muted); font-weight: 600; padding: 0 5px; }
.asg-resist-menu { min-width: 0; }
.asg-resist-item { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 6px 9px; }
/* Hydross Role column: ~60% of the default label width (it only holds MT/OT/Adds).
   The cell shrinks to its content min (width:1%) and the input fills it; the 48px
   min-width is ~60% of the default 80px. */
.asg-resist-rolecell { width: 1%; }
.asg-resist-role { width: 100%; min-width: 48px; }
/* dropdown option list stays readable on dark systems */
.asg-input option { background: #14171c; color: var(--text); font-weight: 600; }

/* Class colors for dropdown values + options (WoW class palette from style.css) */
.asg-input.class-warrior, .asg-input option.class-warrior { color: var(--warrior); }
.asg-input.class-paladin, .asg-input option.class-paladin { color: var(--paladin); }
.asg-input.class-hunter,  .asg-input option.class-hunter  { color: var(--hunter); }
.asg-input.class-rogue,   .asg-input option.class-rogue   { color: var(--rogue); }
.asg-input.class-priest,  .asg-input option.class-priest  { color: var(--priest); }
.asg-input.class-shaman,  .asg-input option.class-shaman  { color: var(--shaman); }
.asg-input.class-mage,    .asg-input option.class-mage    { color: var(--mage); }
.asg-input.class-warlock, .asg-input option.class-warlock { color: var(--warlock); }
.asg-input.class-druid,   .asg-input option.class-druid   { color: var(--druid); }

/* Benched players list (Group Builder) — same class palette as the dropdowns. */
.asg-bench-name { font-weight: 600; }
.asg-bench-name.class-warrior { color: var(--warrior); }
.asg-bench-name.class-paladin { color: var(--paladin); }
.asg-bench-name.class-hunter  { color: var(--hunter); }
.asg-bench-name.class-rogue   { color: var(--rogue); }
.asg-bench-name.class-priest  { color: var(--priest); }
.asg-bench-name.class-shaman  { color: var(--shaman); }
.asg-bench-name.class-mage    { color: var(--mage); }
.asg-bench-name.class-warlock { color: var(--warlock); }
.asg-bench-name.class-druid   { color: var(--druid); }

/* Bench / Tentative list rows: icon + class-colored name, optional +/− button. */
.asg-roster-chip { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.asg-roster-row { display: flex; align-items: center; gap: 6px; }
.asg-roster-row .asg-roster-chip { flex: 1 1 auto; min-width: 0; }
.asg-roster-row.is-active .asg-bench-name { opacity: 0.6; }   /* promoted = on active roster */
.asg-roster-empty { color: var(--muted); font-style: italic; }
.asg-roster-add { margin-left: auto; }                        /* "+" to the right of "Benched" */
.asg-roster-btn {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  line-height: 1;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.asg-roster-btn:hover { border-color: var(--accent); color: #fff; }
.asg-roster-btn.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
/* Modal picker rows ("Bench a player"). */
.asg-modal-pick {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 6px 8px;
  margin: 0;
  background: none;
  border: 0;
  border-radius: 6px;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.asg-modal-pick:hover { background: var(--bg); }

.asg-block-note { }

.asg-macro {
  margin: 0;
  background: #0d0f13;
  padding: 0.6rem 0.7rem;
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--text-soft);
  white-space: pre-wrap;
  word-break: break-word;
}

/* Settings modal — the gear opens a centered popup floating over a dimmed
   backdrop (NOT inline in the page flow). */
.asg-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(2px);
}
.asg-modal {
  background: #14171c;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.65);
  padding: 1rem 1.1rem 1.1rem;
  min-width: 260px;
  max-width: 360px;
  max-height: 80vh;
  overflow-y: auto;
}
.asg-modal-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--line);
}
.asg-settings-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.35rem 0.25rem;
  color: var(--text-soft);
  font-size: 0.88rem;
  cursor: pointer;
  border-radius: 5px;
}
.asg-settings-row:hover { background: rgba(255, 255, 255, 0.05); color: var(--text); }
.asg-settings-row input[type="checkbox"] {
  cursor: pointer;
  accent-color: var(--accent);
  width: 15px;
  height: 15px;
  flex: none;
}
.asg-modal-add { margin-top: 0.9rem; width: 100%; }
.asg-modal-close { margin-top: 0.5rem; width: 100%; }

/* User notes — editable title/body boxes the lead adds from the gear. Laid out
   like the assignment blocks (same card grid) and captured in the snip image. */
.asg-usernotes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  align-items: start;
  margin-top: 1rem;
}
.asg-note-bar { gap: 6px; }
.asg-note-title {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 1px solid transparent;
  color: #f3e6c8;
  font: inherit;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  padding: 2px 4px;
  border-radius: 3px;
}
.asg-note-title:hover { border-color: rgba(0, 0, 0, 0.45); }
.asg-note-title:focus { outline: none; background: rgba(0, 0, 0, 0.35); }
.asg-note-del {
  background: transparent;
  border: none;
  color: #f3e6c8;
  cursor: pointer;
  font-size: 1.05rem;
  line-height: 1;
  padding: 0 4px;
  flex: none;
}
.asg-note-del:hover { color: #fff; }
.asg-note-body {
  display: block;
  width: 100%;
  box-sizing: border-box;
  resize: none;
  overflow: hidden;
  background: #0d0f13;
  border: none;
  color: var(--text-soft);
  font: inherit;
  font-size: 0.84rem;
  line-height: 1.4;
  padding: 0.6rem 0.7rem;
  white-space: pre-wrap;
}
.asg-note-body:focus { outline: none; }

/* Gear is icon-only: keep the SAME box as the other toolbar buttons (inherited
   .asg-btn padding/height) and just scale the glyph to fit neatly inside, rather
   than forcing a separate fixed size. */
/* Gear glyph is a touch larger than the SVG icons so it reads at the same size. */
#asg-gear { font-size: 1.05rem; }

/* Row 1 header: title + link icon on the left, SRP link pushed to the right. */
.asg-head {
  max-width: none;
  margin: 0;
  padding: 0 20px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.asg-head h1 { margin: 0; }
/* Link-icon button next to the title — copies a deep link to this raid planner. */
.asg-iconlink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--accent);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  line-height: 0;
}
.asg-iconlink:hover { background: rgba(255, 255, 255, 0.06); filter: brightness(1.15); }
.asg-srp {
  margin-left: auto;
  color: var(--accent);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  white-space: nowrap;
}
.asg-srp:hover { text-decoration: underline; }

/* Inline boss-tab group inside the toolbar. */
.asg-tabs { display: flex; flex-wrap: wrap; gap: 8px; }

/* Icon-only buttons (copy / download / gear): same 32px height, square. */
.asg-btn-icon { width: 32px; padding: 0; }
.asg-btn-icon svg { display: block; }
.asg-btn-flash { filter: brightness(1.25); }

/* A flex spacer pushes the right-side cluster (guide/copy/download/gear) to the
   right edge as one group, regardless of which buttons are visible. */
.asg-actions .asg-spacer { flex: 1 1 auto; }

/* ───── Group Planner Assist box ───── */
.asg-assist-sub { font-weight: 600; margin: 10px 4px 4px; opacity: .85; }
.asg-assist-table th, .asg-assist-table td { text-align: center; padding: 3px 5px; }
.asg-assist-table th.asg-assist-col { font-size: 11px; font-weight: 600; white-space: nowrap; }
.asg-assist-name { text-align: left !important; white-space: nowrap; font-weight: 600; }
.asg-assist-col { width: 1px; white-space: nowrap; }
.asg-assist-table input[type="checkbox"] { cursor: pointer; }
.asg-assist-empty { text-align: center; opacity: .6; font-style: italic; }
.asg-assist-scroll { overflow-x: auto; }
/* Size to content, not 100% of the (wide) block — otherwise the leftover width
   pools into the name cell and pushes the checkboxes far to the right. */
.asg-assist-table { width: auto; }
.asg-assist-na { background: rgba(255,255,255,.03); }
.asg-assist-set { margin-bottom: 10px; }
.asg-assist-class { font-weight: 600; font-size: 13px; margin: 8px 4px 2px; opacity: .9; }
/* The assist box spans the whole grid (all columns), not just two. */
#asg-assist { grid-column: 1 / -1; }
.asg-assist-icon { width: 18px; height: 18px; vertical-align: middle; border-radius: 2px; }