/* ═══════════════════════════════════════════════════════════════════════════
   tags.css — customer tags for the admin panel (Run 36, feature B; E5).

   THE PALETTE IS TEN CLASS NAMES. `routes/tags.js` refuses any `color` that is
   not one of grey / blue / green / amber / red / purple / teal / pink / brown /
   navy, the panel renders `tag-<color>` as a CLASS and never writes a colour
   value into a `style` attribute, and run36-tags.test.js pins that every
   palette id has exactly its `.tag-chip.tag-<id>` rule here. An unknown stored
   value (a hand-edited backup) falls back to `tag-grey` in tags.js.

   Every tint is the panel's own badge recipe — a translucent wash of the hue
   on the dark card with a light text tint of the same hue (admin.css:1094 ff.)
   — so a tag reads as a sibling of the status badges beside it.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── The chip ── */
.tag-chip {
    display: inline-flex;
    align-items: center;
    max-width: 160px;
    padding: 2px 8px;
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    border: 1px solid transparent;
}
.tag-chip.tag-grey   { background: rgba(148, 163, 194, 0.16); color: #C3CAE0; }
.tag-chip.tag-blue   { background: rgba(59, 130, 246, 0.20);  color: #93C5FD; }
.tag-chip.tag-green  { background: rgba(34, 197, 94, 0.16);   color: #4ADE80; }
.tag-chip.tag-amber  { background: rgba(245, 158, 11, 0.16);  color: #FBBF24; }
.tag-chip.tag-red    { background: rgba(239, 68, 68, 0.16);   color: #F87171; }
.tag-chip.tag-purple { background: rgba(168, 85, 247, 0.20);  color: #D8B4FE; }
.tag-chip.tag-teal   { background: rgba(20, 184, 166, 0.18);  color: #5EEAD4; }
.tag-chip.tag-pink   { background: rgba(236, 72, 153, 0.18);  color: #F9A8D4; }
.tag-chip.tag-brown  { background: rgba(161, 98, 7, 0.26);    color: #E0B07C; }
.tag-chip.tag-navy   { background: rgba(30, 64, 175, 0.38);   color: #BFDBFE; }
/* A disabled tag still shows on the customers who carry it (rule 6), struck
   through so nobody reads it as current. */
.tag-chip.tag-disabled { opacity: 0.6; text-decoration: line-through; border-style: dashed; border-color: rgba(155, 163, 194, 0.35); }

/* ── Chip groups ── */
.tag-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
/* Inside a CRM row: `td.td-name` is nowrap + overflow:hidden + text-overflow:
   ellipsis + max-width 180px (admin.css:370/393). Chips appended INLINE there
   are REPLACED by the ellipsis and paint zero pixels (Run 33's Source-cell
   defect). A BLOCK child wraps within the cell's width instead, so every chip
   paints; a single over-long chip truncates by its own rule above. */
.tag-chips-row { display: flex; margin-top: 4px; white-space: normal; line-height: 1; }
.tag-chips-inline { display: inline-flex; margin-left: 6px; vertical-align: middle; }
.tag-none { color: var(--text-muted); font-size: 0.8rem; }

/* ── The three slots ── */
.tag-slot-block { margin: 2px 0 var(--space-md); }
.tag-slot-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-bottom: 6px; }
.tag-slot-head .detail-label { width: auto; }
.tag-slot-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 22px; }
.tag-slot-label { font-size: 0.78rem; color: var(--text-muted); }
.cust-tags-slot:empty { display: none; }

/* ── Toolbar (in #view-customers .filters-bar) ── */
.tags-toolbar { display: inline-flex; gap: var(--space-sm); flex-wrap: wrap; }
.tags-select-btn.active { border-color: var(--accent-light); color: var(--accent-light); background: rgba(46, 49, 146, 0.12); }

/* ── Bulk bar: sticky under the top of the window, never where toasts live
   (bottom-right, admin.css:1783) — a toast can sit over a fixed bottom bar and
   swallow its tap (the Run 15 modal-footer defect). `top` is set at runtime to
   the sticky phone header's height. ── */
.tags-bulkbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
    margin: calc(-1 * var(--space-sm)) 0 var(--space-md);
    padding: 10px 14px;
    background: rgba(16, 20, 40, 0.96);
    border: 1px solid rgba(123, 128, 212, 0.35);
    border-radius: var(--radius-sm);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.tags-bulkbar[hidden] { display: none; }
.tags-bulk-count { font-family: var(--font-display); font-weight: 600; color: var(--text-primary); font-size: 0.9rem; }
.tags-bulkbar .filter-select { min-width: 150px; max-width: 220px; }
.tags-bulk-status { flex-basis: 100%; font-size: 0.8rem; color: var(--text-secondary); min-height: 1em; }
.tags-bulk-status.error { color: var(--error-color); }
.tags-bulk-all { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--text-secondary); cursor: pointer; }
.tags-bulk-all input, .tag-sel input { width: 16px; height: 16px; accent-color: var(--accent-primary); cursor: pointer; }

/* Row selection (select mode) — the checkbox lives in a span at the start of
   td.td-name; the row highlight is a class on the <tr>. */
.tag-sel { display: inline-flex; align-items: center; margin-right: 8px; vertical-align: middle; }
tr.tags-selected td { background: rgba(46, 49, 146, 0.12); }
#custTableBody.tags-selecting tr { cursor: default; }

/* ── The modal (Manage tags / Edit tags). Reuses the panel's own modal shell;
   this file adds the rows inside it. ── */
.tags-modal-content { max-width: 620px; }
.tag-mrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
    padding: 10px 0;
    border-bottom: 1px solid rgba(148, 163, 194, 0.06);
}
.tag-mrow .tag-chip { flex: 0 0 auto; }
.tag-mrow .filter-input { flex: 1 1 160px; min-width: 120px; }
.tag-mrow .tag-order { flex: 0 0 72px; min-width: 72px; }
.tag-mrow .tag-mrow-actions { display: inline-flex; gap: 6px; margin-left: auto; }
.tag-mrow.tag-mrow-disabled .filter-input { color: var(--text-secondary); }
.tag-add-row { padding-bottom: var(--space-md); margin-bottom: var(--space-sm); border-bottom: 1px solid var(--border-default); }
.tags-modal-hint { font-size: 0.8rem; color: var(--text-muted); margin: 0 0 var(--space-md); }
.tags-modal-error { color: var(--error-color); font-size: 0.85rem; margin-top: var(--space-sm); min-height: 1em; }

/* Swatch picker: ten buttons, one per palette id, coloured BY CLASS. */
.tag-swatches { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.tag-swatch {
    width: 22px; height: 22px; border-radius: 50%;
    border: 2px solid transparent; cursor: pointer; padding: 0;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
    transition: transform var(--duration-fast);
}
.tag-swatch:hover { transform: scale(1.12); }
.tag-swatch.sel { border-color: #fff; box-shadow: 0 0 0 2px var(--accent-light); }
.tag-swatch.tag-grey   { background: #9BA3C2; }
.tag-swatch.tag-blue   { background: #3B82F6; }
.tag-swatch.tag-green  { background: #22C55E; }
.tag-swatch.tag-amber  { background: #F59E0B; }
.tag-swatch.tag-red    { background: #EF4444; }
.tag-swatch.tag-purple { background: #A855F7; }
.tag-swatch.tag-teal   { background: #14B8A6; }
.tag-swatch.tag-pink   { background: #EC4899; }
.tag-swatch.tag-brown  { background: #A16207; }
.tag-swatch.tag-navy   { background: #1E40AF; }

/* Edit-tags picker (one customer) */
.tag-pick-list { display: flex; flex-direction: column; gap: 2px; }
.tag-pick-list .check-row { padding: 8px 0; }
.tag-pick-kept { font-size: 0.8rem; color: var(--text-muted); margin-top: var(--space-sm); }

@media (max-width: 900px) {
    .tags-modal-content { max-width: 100%; }
    .tag-mrow .tag-mrow-actions { margin-left: 0; }
    .tags-bulkbar .filter-select { min-width: 120px; }
}