/* ==== Picker chip styles ========================================================
   Shared styles for the reusable filter-bar pickers under Components/Shared/:
     · CampaignPickerChip.razor — double-chip activator + mini-chip dropdown rows
     · DeptPickerChip.razor     — single-chip activator + MudTreeView dropdown
   Magic widths/paddings live in the custom properties below — tweak there, not in
   the per-selector rules, so one source of truth survives future edits.
   ============================================================================ */
:root {
    --camp-date-col: 130px;
    --camp-menu-min: 280px;
    --camp-menu-max: 420px;
    --dept-menu-min: 320px;
    --dept-menu-max: 480px;
    --dept-name-max: 180px;
}

/* Activators + option rows are native <button> elements (Enter/Space fire click
   without scroll) — reset the browser's built-in button chrome so our own rules win. */
.dept-activator, .camp-chip, .dept-my-scope-row, .camp-menu-row, .dept-tree-row-main {
    appearance: none; -webkit-appearance: none;
    font: inherit; color: inherit; text-align: left;
}

/* ── Department picker (single-chip activator + tree dropdown) ─────────── */
.dept-menu-wrap { position: relative; display: inline-flex; max-width: 100%; }
.dept-activator {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 4px 10px; border-radius: 4px; cursor: pointer; user-select: none;
    background: var(--mud-palette-surface);
    border: 1px solid color-mix(in srgb, var(--c, var(--mud-palette-primary)) 45%, transparent);
    box-shadow: 0 1px 2px rgba(15,23,42,.06);
    transition: box-shadow .12s ease, border-color .12s ease;
    font: inherit; max-width: 100%;
}
.dept-activator:hover { box-shadow: 0 3px 10px rgba(15,23,42,.12);
                        border-color: color-mix(in srgb, var(--c, var(--mud-palette-primary)) 70%, transparent); }
.dept-activator:focus-visible { outline: 2px solid color-mix(in srgb, var(--mud-palette-primary) 60%, transparent); outline-offset: 2px; }
.dept-activator-name { font-weight: 700; white-space: nowrap;
                       overflow: hidden; text-overflow: ellipsis; max-width: var(--dept-name-max); }

.dept-menu-backdrop { position: fixed; inset: 0; z-index: 1200; background: transparent; }
.dept-menu-pop {
    position: absolute !important; top: calc(100% + 6px); left: 0; z-index: 1201;
    min-width: var(--dept-menu-min); max-width: var(--dept-menu-max);
    background: var(--mud-palette-surface);
    border: 1px solid color-mix(in srgb, var(--mud-palette-text-secondary) 18%, transparent);
    border-radius: 6px;
}
.dept-menu-pop > .mud-paper {
    background: color-mix(in srgb, var(--mud-palette-primary) 4%, var(--mud-palette-surface)) !important;
}
@media (max-width: 560px) {
    .dept-menu-wrap { flex: 1 1 100%; display: block; width: 100%; }
    .dept-activator { display: flex; width: 100%; }
    .dept-activator-name { max-width: none; flex: 1 1 auto; min-width: 0; }
    .dept-menu-pop { left: 0; right: 0; width: auto; min-width: 0; max-width: none; }
}

.dept-my-scope-row { display: grid; grid-template-columns: 18px 20px 1fr auto;
                     gap: 10px; align-items: center;
                     padding: 6px 10px; border-radius: 4px; cursor: pointer; }
.dept-my-scope-row:hover { background: color-mix(in srgb, var(--mud-palette-text-primary) 6%, transparent); }
.dept-my-scope-row.is-active { background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent); }
.dept-my-scope-name { font-weight: 700; color: var(--mud-palette-text-primary); }

.dept-picker-active > .mud-treeview-item-content {
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
    border-radius: 4px;
}
.dept-menu-pop .dept-tree-row { padding: 2px 4px 2px 0; }
.dept-menu-pop .dept-tree-row-main { display: flex; align-items: center; gap: 8px; width: 100%; }
.dept-menu-pop .dept-tree-row-main .mud-typography { font-size: 13px; line-height: 1.3; }
@media (max-width: 560px) {
    .dept-menu-pop .dept-tree-row-main .mud-typography { font-size: 12px; }
}

/* ── Campaign double-chip activator ──────────────────────────────────────── */
.camp-chip-wrap { position: relative; display: inline-block; max-width: 100%; }
.camp-chip { display: inline-flex; align-items: stretch; flex-wrap: wrap; max-width: 100%;
             border: 0; padding: 0; background: transparent; cursor: pointer;
             font: inherit;
             box-shadow: 0 1px 2px rgba(15,23,42,.06);
             transition: box-shadow .12s ease; }
.camp-chip:hover  { box-shadow: 0 3px 10px rgba(15,23,42,.12); }
.camp-chip:focus-visible { outline: 2px solid color-mix(in srgb, var(--mud-palette-primary) 60%, transparent); outline-offset: 2px; }
.camp-chip .seg { display: inline-flex; align-items: center; gap: 6px;
                  padding: 6px 10px; font-size: 13px; font-weight: 600;
                  line-height: 1.2; min-width: 0; flex: 1 1 auto; }
.camp-chip .seg.right { white-space: nowrap; }
.camp-chip .seg.left  { color: #fff; border-radius: 4px 0 0 4px; }
.camp-chip .seg.right { background: var(--mud-palette-surface); border: 1px solid transparent;
                        border-radius: 0 4px 4px 0; }
.camp-chip .camp-chip-name { overflow-wrap: anywhere; min-width: 0; }
.camp-chip .camp-chip-badge { margin-left: 4px; padding: 1px 6px; border-radius: 3px;
                              background: rgba(255,255,255,.22); font-size: 11px;
                              letter-spacing: .3px; text-transform: uppercase; font-weight: 700; }
.camp-chip.primary .seg.left  { background: var(--mud-palette-primary); }
.camp-chip.primary .seg.right { color: var(--mud-palette-primary); border-color: var(--mud-palette-primary); }
.camp-chip.warning .seg.left  { background: var(--mud-palette-warning); }
.camp-chip.warning .seg.right { color: var(--mud-palette-warning); border-color: var(--mud-palette-warning); }
.camp-chip.closed  .seg.left  { background: var(--mud-palette-text-secondary); }
.camp-chip.closed  .seg.right { color: var(--mud-palette-text-secondary); border-color: var(--mud-palette-text-secondary); }
@media (max-width: 560px) {
    .camp-chip .seg { padding: 6px 8px; font-size: 12px; }
    .camp-chip-wrap > .camp-chip > .seg.left  { border-radius: 4px 4px 0 0; }
    .camp-chip-wrap > .camp-chip > .seg.right { border-radius: 0 0 4px 4px; }
}

.camp-menu-backdrop { position: fixed; inset: 0; z-index: 1200; background: transparent; }
.camp-menu-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 1201;
                 min-width: var(--camp-menu-min); max-width: var(--camp-menu-max);
                 background: var(--mud-palette-surface);
                 border: 1px solid color-mix(in srgb, var(--mud-palette-text-secondary) 18%, transparent);
                 border-radius: 6px; box-shadow: 0 8px 24px rgba(15,23,42,.16);
                 padding: 4px; }
.camp-menu-row { display: grid; grid-template-columns: 16px 1fr;
                 align-items: center; gap: 10px; min-width: 240px;
                 padding: 6px 10px; border-radius: 4px; cursor: pointer; }
.camp-menu-row:hover { background: color-mix(in srgb, var(--mud-palette-text-primary) 6%, transparent); }
.camp-menu-row:focus-visible { outline: 2px solid color-mix(in srgb, var(--mud-palette-primary) 60%, transparent); outline-offset: -2px; }
.camp-menu-row.is-active { background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent); }
.camp-menu-check { display: inline-flex; width: 16px; height: 16px;
                   align-items: center; justify-content: center; }

.camp-chip-sm { box-shadow: none; cursor: inherit; max-width: 100%;
                flex-wrap: nowrap; width: 100%; justify-self: stretch; }
.camp-chip-sm .seg { padding: 3px 8px; font-size: 12px; gap: 4px; }
.camp-chip-sm .seg.left  { flex: 1 1 auto; min-width: 0; }
.camp-chip-sm .seg.right { flex: 0 0 var(--camp-date-col); justify-content: center; }
.camp-chip-sm .camp-chip-badge { font-size: 9px; padding: 0 4px; }
.camp-chip-sm .camp-chip-name { overflow: hidden; text-overflow: ellipsis;
                                white-space: nowrap; max-width: none; }
@media (max-width: 560px) {
    .camp-chip-sm { width: auto; flex-direction: column; flex-wrap: nowrap; justify-self: stretch; }
    .camp-chip-sm .seg { flex: 0 0 auto; width: 100%; justify-content: flex-start; }
    .camp-chip-sm .camp-chip-name { max-width: none; }
    .camp-chip-sm .seg.left  { flex: 0 0 auto; border-radius: 4px 4px 0 0; }
    .camp-chip-sm .seg.right { flex: 0 0 auto; border-radius: 0 0 4px 4px; justify-content: flex-start; }
}