/* ============================================================
   Departments List V2 — page-scoped dl-* atoms on top of the
   shared cc-* chrome (declared in redesign-competences.css /
   redesign-contract-type-list.css). Mirrors the visual contract
   from Claude documentation/projects/app-redesign/departmentslist/
   DepartmentsList.html. Tokens from insync-tokens.css — no new
   tokens introduced.

   What lives here:
     · Department-name cell + 8 categorical icon variants
     · Manager cell (avatar+name+role) + is-empty fallback
     · Count, team-chips, editor avatar stack, date cells
     · Empty state card (cc-emptyrow + dl-empty)
     · Pattern §7B inline list (View · Inline-edit · Inline-delete)
     · Popup chrome variants (dl-pop__head-icon--orange/--danger,
       dl-pop__body--tight, dl-pop__foot-* aliases)
     · dl-btn--warn (orange CTA for mass-manager-change confirm)
     · dl-banner --info/--warn/--danger/--success
     · dl-confirm body for the confirm popups (delete + mass-mgr)
     · Field atoms unique to this page (dl-input, dl-field, etc.)
   ============================================================ */

/* ── Table layout: align cells, ellipsize, prevent overflow ──── */
.dl-table { table-layout: fixed; width: 100%; }
.dl-table tbody td { vertical-align: middle; overflow: hidden; }
.dl-table tbody td > * { min-width: 0; max-width: 100%; }

/* ── Department name cell (icon + title + meta) ──────────────── */
.dl-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dl-name__icon {
    width: 34px; height: 34px; border-radius: 8px;
    background: var(--is-brand-blue-100, #E6F2FF);
    color: var(--is-brand-blue, #007BFF);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px; flex-shrink: 0;
}
.dl-name__body { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.dl-name__title {
    font: 600 13.5px var(--is-font-sans, "Inter", system-ui, sans-serif);
    color: var(--is-fg-1, #1A1A1F);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dl-name__meta {
    font: 500 11.5px var(--is-font-sans, "Inter", system-ui, sans-serif);
    color: var(--is-fg-3, #76767E);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    display: flex; align-items: center; gap: 4px;
}
.dl-name__meta i { font-size: 9px; opacity: .7; }

/* Categorical icon variants — match the keyword fuzzy-match in
   DepartmentsListV2Base.GetDepartmentIconInfo. Background uses a
   low-opacity tint of the foreground color so the icon "pops". */
.dl-name__icon--success { background: rgba(31, 138, 91, .12);  color: var(--is-success, #1F8A5B); }
.dl-name__icon--purple  { background: rgba(111, 62, 176, .12); color: #6F3EB0; }
.dl-name__icon--warning { background: rgba(206, 134, 0, .16);  color: var(--is-warning, #CE8600); }
.dl-name__icon--danger  { background: rgba(199, 59, 59, .10);  color: var(--is-danger, #C73B3B); }
.dl-name__icon--brand   { background: rgba(0, 123, 255, .10);  color: var(--is-brand-blue, #007BFF); }
.dl-name__icon--neutral { background: rgba(143, 150, 160, .18); color: var(--is-fg-2, #404048); }

/* ── Manager cell (avatar + name + role) ─────────────────────── */
.dl-mgr { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dl-mgr__avatar {
    width: 28px; height: 28px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff;
    font: 700 10.5px var(--is-font-sans, "Inter", system-ui, sans-serif);
    flex-shrink: 0;
}
.dl-mgr__body { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.dl-mgr__name {
    font: 600 13px var(--is-font-sans, "Inter", system-ui, sans-serif);
    color: var(--is-fg-1, #1A1A1F);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dl-mgr__role {
    font: 500 11px var(--is-font-sans, "Inter", system-ui, sans-serif);
    color: var(--is-fg-3, #76767E);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dl-mgr.is-empty {
    color: var(--is-fg-3, #76767E);
    font: 500 12.5px var(--is-font-sans, "Inter", system-ui, sans-serif);
    display: inline-flex; align-items: center; gap: 6px;
}
.dl-mgr.is-empty i { font-size: 11px; }

/* ── Count cell (mono number + sans unit) ────────────────────── */
.dl-count {
    display: inline-flex; align-items: center; gap: 6px;
    font: 600 13px var(--is-font-sans, "Inter", system-ui, sans-serif);
    color: var(--is-fg-1, #1A1A1F);
}
.dl-count__num {
    font: 700 13px var(--is-font-mono, "JetBrains Mono", monospace);
    font-variant-numeric: tabular-nums;
}
.dl-count__unit {
    font: 500 11.5px var(--is-font-sans, "Inter", system-ui, sans-serif);
    color: var(--is-fg-3, #76767E);
}
.dl-count.is-zero { color: var(--is-fg-3, #76767E); }
.dl-count.is-zero .dl-count__num { color: var(--is-fg-3, #76767E); font-weight: 500; }

/* ── Team chips preview (max 3 + overflow pill) ──────────────── */
.dl-teamchips {
    display: flex; align-items: center; gap: 5px;
    flex-wrap: nowrap; overflow: hidden;
}
.dl-teamchip {
    display: inline-flex; align-items: center;
    height: 22px; padding: 0 9px; border-radius: 999px;
    background: var(--is-bg-surface-3, #F2F3F5);
    color: var(--is-fg-2, #404048);
    border: 1px solid var(--is-border-2, #D1D1D6);
    font: 600 11px var(--is-font-sans, "Inter", system-ui, sans-serif);
    white-space: nowrap; max-width: 130px;
    overflow: hidden; text-overflow: ellipsis; flex-shrink: 0;
}
.dl-teamchip--more {
    background: transparent; color: var(--is-fg-3, #76767E);
    border-style: dashed;
}
.dl-teamchips.is-empty {
    color: var(--is-fg-3, #76767E);
    font: 500 12px var(--is-font-sans, "Inter", system-ui, sans-serif);
}

/* ── Editors avatar stack ────────────────────────────────────── */
.dl-editors { display: inline-flex; align-items: center; gap: 8px; }
.dl-editors__stack { display: inline-flex; }
.dl-editors__a {
    width: 22px; height: 22px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff;
    font: 700 9.5px var(--is-font-sans, "Inter", system-ui, sans-serif);
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--is-border-1, #E5E5EA);
}
.dl-editors__a + .dl-editors__a { margin-left: -7px; }
.dl-editors__count {
    font: 600 12px var(--is-font-sans, "Inter", system-ui, sans-serif);
    color: var(--is-fg-2, #404048);
}
.dl-editors.is-empty {
    color: var(--is-fg-3, #76767E);
    font: 500 12px var(--is-font-sans, "Inter", system-ui, sans-serif);
}

/* ── Date cell (mono, tabular nums) ──────────────────────────── */
.dl-date {
    font: 500 12.5px var(--is-font-mono, "JetBrains Mono", monospace);
    color: var(--is-fg-2, #404048);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ── Row actions (edit + delete icon buttons) ────────────────── */
.dl-actions { display: inline-flex; align-items: center; gap: 2px; justify-content: flex-end; }
.dl-iconbtn {
    width: 30px; height: 30px;
    border-radius: var(--is-radius-sm, 6px);
    border: 1px solid transparent;
    background: transparent; color: var(--is-fg-2, #404048);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px;
    transition: background .12s, color .12s, border-color .12s;
}
.dl-iconbtn:hover {
    background: var(--is-bg-surface-3, #F2F3F5);
    color: var(--is-fg-1, #1A1A1F);
    border-color: var(--is-border-1, #E5E5EA);
}
.dl-iconbtn.is-edit:hover {
    background: rgba(0, 123, 255, .10);
    color: var(--is-brand-blue, #007BFF);
    border-color: rgba(0, 123, 255, .25);
}
.dl-iconbtn.is-danger:hover {
    background: rgba(199, 59, 59, .08);
    color: var(--is-danger, #C73B3B);
    border-color: rgba(199, 59, 59, .20);
}

/* ── Empty-state card (rendered inside cc-emptyrow) ──────────── */
.dl-empty { text-align: center; padding: 56px 24px; }
.dl-empty__icon {
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--is-brand-blue-100, #E6F2FF);
    color: var(--is-brand-blue, #007BFF);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 22px;
    margin-bottom: 12px;
}
.dl-empty h3 {
    font: 700 16px var(--is-font-sans, "Inter", system-ui, sans-serif);
    margin: 0 0 6px;
    color: var(--is-fg-1, #1A1A1F);
}
.dl-empty p {
    font: 500 13px var(--is-font-sans, "Inter", system-ui, sans-serif);
    color: var(--is-fg-3, #76767E);
    margin: 0 auto 16px auto;
    max-width: 480px;
    text-align: center;
}

/* =============================================================
   Popup chrome variants (layered on top of cc-pop chrome)
   ============================================================= */

.dl-pop { /* no overrides; cc-pop handles structure */ }

/* ── Popup head + footer — force white background per HTML mock.
   Overrides .cc-pop__head's white→gray gradient and .cc-pop__foot's
   solid gray from redesign-competences.css so the dialog reads as
   a clean white surface end-to-end. Two-class selector wins over
   .cc-pop__head / .cc-pop__foot by specificity. */
.dl-pop__head.cc-pop__head {
    background: #fff;
    padding: 16px 22px;
}
.dl-pop__foot.cc-pop__foot { background: #fff; }

/* Width variants */
.dl-pop--md { width: 720px; max-width: 95vw; }
.dl-pop--sm { width: 480px; max-width: 95vw; }
/* Stacked-over-another-popup variant. Lifts both the scrim and the
   popup ABOVE the Edit popup (which sits at z-index 1801) so the
   underlying Edit popup gets darkened and focus is on the confirm. */
.dl-pop--stack {
    box-shadow: 0 28px 80px rgba(8, 12, 36, .40), 0 4px 12px rgba(8, 12, 36, .20);
    z-index: 1901;
}
/* Companion scrim class for the stack popup — must be placed on the
   same <div> as cc-pop-scrim so it overrides the default z-index. */
.dl-pop-scrim--stack {
    z-index: 1900;
    background: rgba(20, 28, 50, .55);
}

/* Head icon color variants. Default is the brand-blue palette per
   mockup §2 (Add) / §3 (Edit) — fa-sitemap / fa-pen-to-square on
   a blue-tinted square. Two-class selector wins over the shared
   cc-pop__head-icon (which only gives size + flex layout, no color). */
.dl-pop__head-icon.cc-pop__head-icon {
    background: var(--is-brand-blue-100, #E6F2FF);
    color: var(--is-brand-blue, #007BFF);
}
.dl-pop__head-icon--warn.cc-pop__head-icon   { background: rgba(206, 134, 0, .16);  color: #8A5A00; }
.dl-pop__head-icon--danger.cc-pop__head-icon { background: var(--is-danger-bg, #FBEAEA); color: var(--is-danger, #C73B3B); }
.dl-pop__head-icon--orange.cc-pop__head-icon {
    background: var(--is-brand-orange-100, oklch(95% .04 50));
    color: var(--is-brand-orange-600, #D17D14);
}

/* Title aliases (mockup uses dl-pop__head-title — keep working
   alongside cc-pop__head-text) */
.dl-pop__head-title { flex: 1; min-width: 0; }
.dl-pop__head-title h2 {
    font: 700 17px var(--is-font-sans, "Inter", system-ui, sans-serif);
    margin: 0; letter-spacing: -.01em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dl-pop__head-title p {
    font: 500 12.5px var(--is-font-sans, "Inter", system-ui, sans-serif);
    color: var(--is-fg-3, #76767E);
    margin: 2px 0 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dl-pop__head-title p b {
    color: var(--is-fg-1, #1A1A1F);
    font-weight: 700;
}

/* Body padding variant for the confirm dialogs */
.dl-pop__body { padding: 20px 24px; }
.dl-pop__body--tight { padding: 18px 22px; }

/* Footer layout helpers */
.dl-pop__foot {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 22px;
    border-top: 1px solid var(--is-border-1, #E5E5EA);
    background: var(--is-bg-surface, #FFFFFF);
    flex-shrink: 0;
}
.dl-pop__foot-left {
    flex: 1; min-width: 0;
    font: 500 12px var(--is-font-sans, "Inter", system-ui, sans-serif);
    color: var(--is-fg-3, #76767E);
    display: flex; align-items: center; gap: 6px;
}
.dl-pop__foot-left b { color: var(--is-fg-1, #1A1A1F); font-weight: 700; }
.dl-pop__foot-right { display: flex; gap: 10px; flex-shrink: 0; }

/* Warn CTA — mass-manager-change confirm uses this to signal a
   side-effecting action (different from a destructive Delete) */
.dl-btn--warn {
    background: var(--is-warning, #CE8600);
    color: #fff;
    border-color: var(--is-warning, #CE8600);
}
.dl-btn--warn:hover {
    background: #A86E00;
    border-color: #A86E00;
    color: #fff;
}

/* =============================================================
   Form atoms inside dl-pop__body
   ============================================================= */

.dl-section-label {
    font: 600 11px var(--is-font-sans, "Inter", system-ui, sans-serif);
    color: var(--is-fg-3, #76767E);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin: 0 !important;
    display: flex; align-items: center; gap: 8px;
}
.dl-section-label i { font-size: 10px; color: var(--is-fg-3, #76767E); }
.dl-section-label::after {
    content: '';
    flex: 1; height: 1px;
    background: var(--is-border-1, #E5E5EA);
    margin-left: 4px;
}
.dl-section-label__counter {
    font: 600 10.5px var(--is-font-sans, "Inter", system-ui, sans-serif);
    color: var(--is-fg-3, #76767E);
    background: var(--is-bg-surface-3, #F2F3F5);
    padding: 2px 8px; border-radius: 999px;
    text-transform: none; letter-spacing: 0;
}

.dl-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.dl-field__label {
    font: 600 11.5px var(--is-font-sans, "Inter", system-ui, sans-serif);
    color: var(--is-fg-2, #404048);
    display: flex; align-items: center; gap: 4px;
}
.dl-field__label .req { color: var(--is-danger, #C73B3B); }
.dl-field__label i.help {
    font-size: 11px;
    color: var(--is-fg-3, #76767E);
    margin-left: 2px;
    cursor: default;
}
.dl-field__hint {
    font: 500 11.5px var(--is-font-sans, "Inter", system-ui, sans-serif);
    color: var(--is-fg-3, #76767E);
    margin-top: 2px;
    display: flex; align-items: center; gap: 5px;
}
.dl-field__hint i { font-size: 10px; }
.dl-field__hint--err { color: var(--is-danger, #C73B3B); }

.dl-input {
    height: 36px; padding: 0 12px;
    border: 1px solid var(--is-border-3, #B8B8C0);
    border-radius: var(--is-radius-sm, 6px);
    background: #fff;
    font: 500 13.5px var(--is-font-sans, "Inter", system-ui, sans-serif);
    color: var(--is-fg-1, #1A1A1F);
    width: 100%;
}
.dl-input:focus {
    outline: none;
    border-color: var(--is-action-blue, #007BFF);
    box-shadow: 0 0 0 3px rgba(0, 123, 255, .15);
}
.dl-input--err {
    border-color: var(--is-danger, #C73B3B);
    box-shadow: 0 0 0 3px rgba(199, 59, 59, .12);
}

/* Override the Syncfusion dropdown chrome inside the popup so it
   picks up dl-input styling (border / focus ring) */
.dl-sf-dropdown {
    width: 100%;
}

/* =============================================================
   Custom shift-editors picker — mirrors ContractTypeDetailsV2's
   ct-multiselect but with suggestions opening DOWNWARD (top:100%
   anchored to the input's bottom edge, instead of upward). The
   chip/box pattern is identical: white box with wrapping blue
   pill chips + a free-text search input, suggestions list opens
   below as the user types.
   ============================================================= */
.dl-empicker-field { position: static; }
.dl-multiselect-wrap { position: relative; }

.dl-multiselect {
    padding: 6px 8px;
    border: 1px solid var(--is-border-3, #B8B8C0);
    border-radius: var(--is-radius-sm, 6px);
    background: #fff;
    display: flex; flex-wrap: wrap;
    gap: 5px;
    min-height: 38px;
    align-items: center;
}
.dl-multiselect:focus-within {
    border-color: var(--is-action-blue, #007BFF);
    box-shadow: 0 0 0 3px rgba(0, 123, 255, .15);
}

.dl-empchip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 4px 3px 9px;
    border-radius: 999px;
    background: var(--is-brand-blue-100, #E6F2FF);
    color: var(--is-brand-blue-700, #0056B3);
    border: 1px solid #B9DCEF;
    font: 600 11.5px var(--is-font-sans, "Inter", system-ui, sans-serif);
}
.dl-empchip__x {
    width: 16px; height: 16px;
    border-radius: 999px;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 9px;
    padding: 0;
}
.dl-empchip__x:hover { background: rgba(0, 123, 255, .20); }

.dl-multiselect__input {
    flex: 1;
    min-width: 140px;
    border: 0;
    padding: 4px 6px;
    background: transparent;
    font: 500 12.5px var(--is-font-sans, "Inter", system-ui, sans-serif);
    color: var(--is-fg-1, #1A1A1F);
    outline: none;
}
.dl-multiselect__input::placeholder { color: var(--is-fg-3, #76767E); }

/* Suggestions open DOWNWARD: `top: 100%` anchors the list's upper
   edge to the input box's lower edge, so the list grows toward
   the bottom of the dialog. Shadow points down to match. */
.dl-multiselect__suggestions {
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    margin-top: 4px;
    background: #fff;
    border: 1px solid var(--is-border-2, #D1D1D6);
    border-radius: var(--is-radius-sm, 6px);
    box-shadow: 0 6px 18px rgba(8, 12, 36, .10);
    max-height: 320px;
    overflow-y: auto;
    z-index: 10;
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.dl-multiselect__suggestion {
    display: block;
    width: 100%;
    text-align: left;
    padding: 7px 10px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--is-fg-1, #1A1A1F);
    font: 500 12.5px var(--is-font-sans, "Inter", system-ui, sans-serif);
    cursor: pointer;
}
.dl-multiselect__suggestion:hover {
    background: var(--is-brand-blue-100, #E6F2FF);
    color: var(--is-brand-blue-700, #0056B3);
}

/* =============================================================
   Inline banner (info / warn / danger / success)
   ============================================================= */

.dl-banner {
    display: flex; gap: 10px;
    padding: 10px 12px;
    border-radius: var(--is-radius-sm, 6px);
    margin-top: 10px;
    font: 500 12.5px/1.5 var(--is-font-sans, "Inter", system-ui, sans-serif);
}
.dl-banner i { margin-top: 1px; flex-shrink: 0; font-size: 13px; }
.dl-banner b { font-weight: 700; }
.dl-banner--info {
    background: var(--is-info-bg, #E6F2FF);
    border: 1px solid #C2DEF0;
    color: #0A5E8A;
}
.dl-banner--info i { color: var(--is-info, #007BFF); }
.dl-banner--warn {
    background: rgba(206, 134, 0, .10);
    border: 1px solid rgba(206, 134, 0, .30);
    color: #7A5800;
}
.dl-banner--warn i { color: var(--is-warning, #CE8600); }
.dl-banner--danger {
    background: var(--is-danger-bg, #FBEAEA);
    border: 1px solid #F3C2C2;
    color: #7A1818;
}
.dl-banner--danger i { color: var(--is-danger, #C73B3B); }
.dl-banner--success {
    background: var(--is-success-bg, #E6F4EC);
    border: 1px solid #BCE3C8;
    color: #155A2A;
}
.dl-banner--success i { color: var(--is-success, #1F8A5B); }

/* =============================================================
   Pattern §7B — Inline list (Teams) — View / Edit / Delete states
   ============================================================= */

.dl-inline-list__add {
    display: flex; gap: 8px; align-items: stretch;
    margin-bottom: 10px;
    margin-top: 10px;
}
.dl-inline-list__add input {
    flex: 1; height: 36px; padding: 0 12px;
    border: 1px solid var(--is-border-3, #B8B8C0);
    border-radius: var(--is-radius-sm, 6px);
    background: #fff;
    font: 500 13.5px var(--is-font-sans, "Inter", system-ui, sans-serif);
}
.dl-inline-list__add input:disabled {
    background: var(--is-bg-surface-3, #F2F3F5);
    color: var(--is-fg-3, #76767E);
    cursor: not-allowed;
}
.dl-inline-list__add input:focus {
    outline: none;
    border-color: var(--is-action-blue, #007BFF);
    box-shadow: 0 0 0 3px rgba(0, 123, 255, .15);
}
.dl-inline-list__add button {
    height: 36px; padding: 0 14px;
    border-radius: var(--is-radius-sm, 6px);
    border: 1px solid var(--is-brand-blue, #007BFF);
    background: var(--is-brand-blue, #007BFF);
    color: #fff;
    font: 600 12.5px var(--is-font-sans, "Inter", system-ui, sans-serif);
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    white-space: nowrap;
    transition: background .12s, border-color .12s;
}
.dl-inline-list__add button:hover:not(:disabled) {
    background: var(--is-brand-blue-700, #0056B3);
    border-color: var(--is-brand-blue-700, #0056B3);
}
.dl-inline-list__add button:disabled { opacity: .5; cursor: not-allowed; }
.dl-inline-list__add button i { font-size: 11px; }

.dl-inline-list { display: flex; flex-direction: column; gap: 6px; }

.dl-inline-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center; gap: 10px;
    padding: 9px 12px;
    background: #fff;
    border: 1px solid var(--is-border-2, #D1D1D6);
    border-radius: var(--is-radius-sm, 6px);
    transition: border-color .12s, background .12s;
    min-height: 42px;
}
.dl-inline-row:hover { border-color: var(--is-border-3, #B8B8C0); }
.dl-inline-row__name {
    font: 600 13px var(--is-font-sans, "Inter", system-ui, sans-serif);
    color: var(--is-fg-1, #1A1A1F);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    min-width: 0;
    display: flex; align-items: center; gap: 8px;
}
.dl-inline-row__name i { color: var(--is-fg-3, #76767E); font-size: 11px; }

.dl-inline-row__actions { display: inline-flex; gap: 4px; flex-shrink: 0; }
.dl-inline-row__actions button {
    width: 28px; height: 28px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent; color: var(--is-fg-3, #76767E);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px;
    transition: background .12s, color .12s, border-color .12s;
}
.dl-inline-row__actions button:hover {
    background: var(--is-bg-surface-3, #F2F3F5);
    color: var(--is-fg-1, #1A1A1F);
    border-color: var(--is-border-1, #E5E5EA);
}
.dl-inline-row__actions button.is-edit:hover {
    background: rgba(0, 123, 255, .10);
    color: var(--is-brand-blue, #007BFF);
    border-color: rgba(0, 123, 255, .25);
}
.dl-inline-row__actions button.is-danger:hover {
    background: rgba(199, 59, 59, .08);
    color: var(--is-danger, #C73B3B);
    border-color: rgba(199, 59, 59, .20);
}

/* Edit state — blue dashed border + tinted bg, save = success green */
.dl-inline-row--edit {
    background: var(--is-brand-blue-100, #E6F2FF);
    border-color: var(--is-brand-blue, #007BFF);
    border-style: dashed;
    padding: 6px 8px 6px 12px;
}
.dl-inline-row--edit input {
    height: 30px; padding: 0 10px;
    border: 1px solid var(--is-brand-blue, #007BFF);
    border-radius: var(--is-radius-sm, 6px);
    background: #fff;
    font: 600 13px var(--is-font-sans, "Inter", system-ui, sans-serif);
    color: var(--is-fg-1, #1A1A1F);
    width: 100%;
}
.dl-inline-row--edit input:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, .15);
}
.dl-inline-row--edit .dl-inline-row__actions button { width: 30px; height: 30px; }
.dl-inline-row--edit .dl-inline-row__actions button.is-save {
    background: var(--is-success, #1F8A5B);
    color: #fff;
    border-color: var(--is-success, #1F8A5B);
}
.dl-inline-row--edit .dl-inline-row__actions button.is-save:hover:not(:disabled) {
    background: #176D48; border-color: #176D48;
}
.dl-inline-row--edit .dl-inline-row__actions button.is-save:disabled {
    opacity: .5; cursor: not-allowed;
}
.dl-inline-row--edit .dl-inline-row__actions button.is-cancel {
    background: #fff;
    color: var(--is-fg-2, #404048);
    border-color: var(--is-border-2, #D1D1D6);
}

/* Delete-confirm state — danger tinted bg + dashed border, confirm = red */
.dl-inline-row--delete {
    background: var(--is-danger-bg, #FBEAEA);
    border-color: #F3C2C2;
    border-style: dashed;
}
.dl-inline-row--delete .dl-inline-row__name {
    color: #7A1818;
    font-weight: 600;
}
.dl-inline-row--delete .dl-inline-row__name i { color: var(--is-danger, #C73B3B); }
.dl-inline-row--delete .dl-inline-row__actions button.is-confirm {
    background: var(--is-danger, #C73B3B);
    color: #fff;
    border-color: var(--is-danger, #C73B3B);
}
.dl-inline-row--delete .dl-inline-row__actions button.is-confirm:hover {
    background: #9E2E2E; border-color: #9E2E2E;
}
.dl-inline-row--delete .dl-inline-row__actions button.is-cancel {
    background: #fff;
    color: var(--is-fg-2, #404048);
    border-color: var(--is-border-2, #D1D1D6);
}

.dl-inline-empty {
    padding: 14px 12px;
    border: 1px dashed var(--is-border-3, #B8B8C0);
    border-radius: var(--is-radius-sm, 6px);
    background: var(--is-bg-surface-3, #F2F3F5);
    text-align: center;
    font: 500 12.5px var(--is-font-sans, "Inter", system-ui, sans-serif);
    color: var(--is-fg-3, #76767E);
}
.dl-inline-empty i {
    color: var(--is-fg-3, #76767E);
    font-size: 12px;
    margin-right: 4px;
}

/* =============================================================
   Confirm popup body (delete + mass-manager-change)
   ============================================================= */

.dl-confirm {
    display: flex; flex-direction: column; align-items: center;
    text-align: center;
    padding: 8px 14px 6px;
}
.dl-confirm__icon {
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--is-danger-bg, #FBEAEA);
    color: var(--is-danger, #C73B3B);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 22px;
    margin-bottom: 14px;
}
.dl-confirm__icon--warn {
    background: rgba(206, 134, 0, .16);
    color: #8A5A00;
}
.dl-confirm h3 {
    font: 700 17px var(--is-font-sans, "Inter", system-ui, sans-serif);
    color: var(--is-fg-1, #1A1A1F);
    margin: 0 0 6px;
}
.dl-confirm p {
    font: 500 13px/1.5 var(--is-font-sans, "Inter", system-ui, sans-serif);
    color: var(--is-fg-2, #404048);
    margin: 0;
    max-width: 400px;
}
.dl-confirm .dl-banner {
    width: 100%;
    text-align: left;
    margin-top: 16px;
}
.dl-confirm__cascade {
    display: block;
    margin-top: 6px;
    font-size: 12px;
}
.dl-confirm__hint {
    color: var(--is-fg-3, #76767E);
    font-size: 11.5px;
}

/* =============================================================
   Tablet (≤ 1199px) — swap desktop table → card stack. The shared
   .cc-table-wrap / .cc-cards-wrap visibility toggle is provided
   by redesign-competences.css; we only need to style the dl-card*
   atoms here. Mirrors the ContractTypeListV2 pattern verbatim.
   ============================================================= */
@media (max-width: 1199px) {
    .dl-cards { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
    .dl-card {
        background: #fff;
        border: 1px solid var(--is-border-1, #E5E5EA);
        border-radius: var(--is-radius-md, 10px);
        padding: 0;
        display: flex; flex-direction: column;
        overflow: hidden;
        transition: border-color .12s, box-shadow .12s;
    }
    .dl-card:hover {
        border-color: var(--is-border-2, #D1D1D6);
        box-shadow: var(--is-shadow-1, 0 1px 2px rgba(20, 28, 50, .05));
    }
    .dl-card__head {
        display: flex; align-items: center; justify-content: space-between;
        gap: 10px;
        padding: 12px;
        border-bottom: 1px dashed var(--is-border-1, #E5E5EA);
    }
    .dl-card__meta {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px 16px;
        padding: 12px;
    }
    .dl-card__field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
    .dl-card__field-label {
        font: 600 10px var(--is-font-sans, "Inter", system-ui, sans-serif);
        color: var(--is-fg-3, #76767E);
        text-transform: uppercase;
        letter-spacing: .04em;
        white-space: nowrap;
    }
    .dl-card__field-value {
        font: 500 12.5px var(--is-font-sans, "Inter", system-ui, sans-serif);
        color: var(--is-fg-1, #1A1A1F);
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        min-width: 0;
    }
    .dl-card__foot {
        display: flex; justify-content: flex-end; gap: 6px;
        padding: 10px 12px;
        border-top: 1px dashed var(--is-border-1, #E5E5EA);
        background: var(--is-bg-surface-3, #F2F3F5);
    }
}

/* =============================================================
   Mobile (≤ 600px) — per MobileLayoutStandards.md. Pagehead
   stacks to a column with full-width primary action; filter bar
   collapses to a single column; top mini-pager hides (only the
   bottom .cc-pager is shown). Mirrors ContractTypeListV2 1:1.
   ============================================================= */
@media (max-width: 600px) {
    /* §2 header buttons — Excel + Add stack full-width */
    .dl-pagehead__actions,
    .cc-pagehead__actions {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 8px;
        width: 100%;
    }
    .dl-pagehead__actions .cc-btn,
    .dl-pagehead__actions button,
    .cc-pagehead__actions .cc-btn,
    .cc-pagehead__actions button {
        width: 100%;
        justify-content: center;
    }

    /* §3 §4 Filter bar — single column. Each control 100% wide. */
    .cc-filterbar__row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px;
    }
    .cc-filterbar__row > .cc-search,
    .cc-filterbar__row > .cc-pill,
    .cc-filterbar__row > .cc-sf-pill,
    .cc-filterbar__row > .ct-actionrow {
        grid-column: 1 / -1 !important;
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
    /* Inline desktop spacer div has no purpose on mobile */
    .cc-filterbar__row > div[style*="flex: 1"] { display: none; }

    /* Pills fill full row at 40px, label centered */
    .cc-filterbar__row > .cc-pill,
    .cc-filterbar__row > .cc-sf-pill {
        display: flex;
        height: 40px;
        padding: 0 10px;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }
    .cc-filterbar__row > .cc-sf-pill .e-ddl,
    .cc-filterbar__row > .cc-sf-pill .e-input-group {
        min-height: 40px !important;
        height: 40px !important;
    }

    /* Action row: Search-only = 100%; Search + Clear = 50/50 */
    .ct-actionrow { display: grid; grid-template-columns: 1fr; gap: 8px; }
    .ct-actionrow:has(.cc-iconbtn + .cc-iconbtn) { grid-template-columns: 1fr 1fr; }
    .ct-actionrow .cc-iconbtn,
    .ct-actionrow button {
        width: 100%;
        height: 40px;
    }

    /* Card meta keeps 2-col but with tighter gap; long values clip */
    .dl-card__meta {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px 12px;
    }
    .dl-card__field-value {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
        max-width: 100%;
    }
    /* Inner inline-flex carriers (count, chips, manager, editors stack)
       must clip too — they don't honour parent overflow without explicit
       max-width on inline-flex. */
    .dl-card__field-value .dl-count,
    .dl-card__field-value .dl-mgr,
    .dl-card__field-value .dl-teamchips,
    .dl-card__field-value .dl-editors,
    .dl-card__field-value .dl-date {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Hide the top-toolbar mini pager — bottom .cc-pager already
       provides a full-width pager on mobile */
    .cc-pager__pages--mini { display: none !important; }

    /* §7 popups full-viewport on mobile */
    .dl-pop {
        width: 100vw !important;
        height: 100vh !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
        inset: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }
    .dl-pop--sm.cc-pop { max-width: 100vw !important; width: 100vw !important; }

    /* Popup field grids collapse to single column */
    .dl-grid--2, .dl-grid--3, .dl-grid--2-1 {
        grid-template-columns: 1fr !important;
    }
}

/* Very narrow phones — collapse card meta to a single column */
@media (max-width: 420px) {
    .dl-card__meta { grid-template-columns: 1fr !important; }
}

/* ── SfMultiSelect chip color override (shift-editors picker) ─────
   Scoped under .dl-pop so it applies inside DepartmentDetailsV2 and
   OfficeDetailsV2 popups (both use .dl-pop chrome) but NOT to other
   SfMultiSelect instances elsewhere. Mirrors the brand-blue pill
   style from ContractTypeDetailsV2's visibility picker (see
   redesign-contract-type-list.css §SfMultiSelect chip color override).
   Specificity ladder + -webkit-text-fill-color reset are required to
   beat Syncfusion's internal theme rules. */
html body div.dl-pop div.e-multi-select-wrapper span.e-chips-collection span.e-chips {
    background: rgba(4,148,218,.16) !important;
    border: 1px solid #0273a8 !important;
    border-radius: 999px !important;
    color: #0273a8 !important;
    -webkit-text-fill-color: #0273a8 !important;
    text-shadow: none !important;
    opacity: 1 !important;
}
html body div.dl-pop div.e-multi-select-wrapper span.e-chips-collection span.e-chips span.e-chipcontent {
    color: #0273a8 !important;
    -webkit-text-fill-color: #0273a8 !important;
    text-shadow: none !important;
    font: 600 12px var(--is-font-sans, "Plus Jakarta Sans", system-ui, sans-serif) !important;
}
html body div.dl-pop div.e-multi-select-wrapper span.e-chips-collection span.e-chips span.e-chips-close,
html body div.dl-pop div.e-multi-select-wrapper span.e-chips-collection span.e-chips span.e-chips-close::before {
    color: #0273a8 !important;
    -webkit-text-fill-color: #0273a8 !important;
    text-shadow: none !important;
    opacity: 1 !important;
}
html body div.dl-pop div.e-multi-select-wrapper span.e-chips-collection span.e-chips span.e-chips-close:hover,
html body div.dl-pop div.e-multi-select-wrapper span.e-chips-collection span.e-chips span.e-chips-close:hover::before {
    background: rgba(4,148,218,.20) !important;
    color: #0273a8 !important;
    -webkit-text-fill-color: #0273a8 !important;
}