/* ============================================================
   Vacation Distribution Item List V2 — page-scoped vd-* atoms
   on top of the shared cc-* chrome (redesign-competences.css)
   and dl-* atoms (redesign-departments-list.css). Mirrors the
   visual contract from
     Claude documentation/projects/app-redesign/
       vacation-distribution-item-list/VacationDistributionItemList.html

   What lives here (page-specific only):
     · Order index # badge (View / Add / Edit / Delete variants)
     · Transfer chip (Da, prenosi se / Ne, ne prenosi se)
     · Inline row state modifiers (vd-tr--edit / vd-tr--delete /
       vd-tr--locked) — give the cc-row a dashed plavi/crveni look
     · vd-input + vd-input--err (inline text input)
     · vd-seg (segmented Y/N pill control)
     · vd-row__hint / vd-row__msg (validation hint / delete msg)
     · Specialized vd-iconbtn--save / --cancel / --confirm
       (override base dl-iconbtn for green / red / ghost variants)
     · Tablet/mobile card modifiers (vd-card--edit / --delete /
       --locked) on top of the shared dl-card chrome
     · Misc: vd-toolbar-hint, vd-kbd, vd-th-idx / vd-td-idx,
       vd-card__body, vd-card__delete-msg
   ============================================================ */

/* ── Order index # badge ───────────────────────────────────── */
.vd-idx {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 24px;
    border-radius: 6px;
    background: var(--is-bg-surface-3, #F2F3F5);
    border: 1px solid var(--is-border-1, #E5E5EA);
    color: var(--is-fg-3, #76767E);
    font: 700 11px var(--is-font-mono, "JetBrains Mono", monospace);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.vd-idx--edit {
    background: var(--is-brand-blue, #007BFF);
    border-color: var(--is-brand-blue, #007BFF);
    color: #fff;
}
.vd-idx--edit i { font-size: 10px; }
.vd-idx--delete {
    background: var(--is-danger, #C73B3B);
    border-color: var(--is-danger, #C73B3B);
    color: #fff;
}

/* cc-table sets text-align: left on every thead th and tbody td;
   need higher specificity to override for the # column. */
.cc-table thead th.vd-th-idx,
.cc-table tbody td.vd-td-idx { text-align: center; }
.cc-table tbody td.vd-td-idx .vd-idx { margin: 0 auto; }

/* ── Transfer chip (View state — Da/Ne with icon) ─────────── */
.vd-transfer {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font: 600 12.5px var(--is-font-sans, "Inter", system-ui, sans-serif);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.vd-transfer i { font-size: 12px; width: 16px; text-align: center; flex-shrink: 0; }
.vd-transfer--yes { color: var(--is-success, #1F8A5B); }
.vd-transfer--yes i { color: var(--is-success, #1F8A5B); }
.vd-transfer--no { color: var(--is-fg-3, #76767E); font-weight: 500; }
.vd-transfer--no i { color: var(--is-border-2, #D1D1D6); }

/* ── Locking modifier — non-active rows go grey while another
      row is in Add/Edit/Delete. The shared dl-iconbtn already
      respects [disabled]; vd-tr--locked just adds a low-opacity
      veil so the user knows it's read-only. ───────────────── */
.vd-tr--locked > td { opacity: .45; }
.vd-tr--locked .dl-iconbtn { pointer-events: none; opacity: .35; }
.vd-tr--locked:hover { background: rgba(0,0,0,.015); }

/* ── Add / Edit row state — dashed plavi outline + tinted bg.
      Applied on top of cc-row so the row keeps standard tbody
      td padding but acquires the editable-row treatment. ──── */
.vd-tr--edit > td {
    background: var(--is-brand-blue-100, #E6F2FF);
    border-top: 1px dashed var(--is-brand-blue, #007BFF) !important;
    border-bottom: 1px dashed var(--is-brand-blue, #007BFF);
    padding-top: 12px;
    padding-bottom: 12px;
}
.vd-tr--edit > td:first-child {
    border-left: 1px dashed var(--is-brand-blue, #007BFF);
    border-top-left-radius: var(--is-radius-sm, 6px);
    border-bottom-left-radius: var(--is-radius-sm, 6px);
}
.vd-tr--edit > td:last-child {
    border-right: 1px dashed var(--is-brand-blue, #007BFF);
    border-top-right-radius: var(--is-radius-sm, 6px);
    border-bottom-right-radius: var(--is-radius-sm, 6px);
}
.vd-tr--edit:hover > td { background: var(--is-brand-blue-100, #E6F2FF); }

/* ── Delete state — dashed crveni outline + danger-bg tint. */
.vd-tr--delete > td {
    background: var(--is-danger-bg, #FBEAEA);
    border-top: 1px dashed #f3c2c2 !important;
    border-bottom: 1px dashed #f3c2c2;
    padding-top: 12px;
    padding-bottom: 12px;
}
.vd-tr--delete > td:first-child {
    border-left: 1px dashed #f3c2c2;
    border-top-left-radius: var(--is-radius-sm, 6px);
    border-bottom-left-radius: var(--is-radius-sm, 6px);
}
.vd-tr--delete > td:last-child {
    border-right: 1px dashed #f3c2c2;
    border-top-right-radius: var(--is-radius-sm, 6px);
    border-bottom-right-radius: var(--is-radius-sm, 6px);
}
.vd-tr--delete:hover > td { background: var(--is-danger-bg, #FBEAEA); }

/* ── Inline text input (Item name) ─────────────────────────── */
.vd-input {
    height: 34px;
    width: 100%;
    padding: 0 12px;
    border: 1px solid var(--is-brand-blue, #007BFF);
    border-radius: var(--is-radius-sm, 6px);
    background: #fff;
    font: 600 13.5px var(--is-font-sans, "Inter", system-ui, sans-serif);
    color: var(--is-fg-1, #1A1A1F);
    box-sizing: border-box;
}
.vd-input:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0,123,255,.20);
}
.vd-input--err {
    border-color: var(--is-danger, #C73B3B);
    box-shadow: 0 0 0 3px rgba(199,59,59,.12);
}

/* ── Segmented Y/N pill control (Add/Edit Transfer cell) ──── */
.vd-seg {
    display: inline-flex;
    padding: 3px;
    background: #fff;
    border: 1px solid var(--is-border-3, #C7C7CC);
    border-radius: 999px;
    gap: 0;
    height: 32px;
    align-items: center;
    box-sizing: border-box;
}
.vd-seg button {
    background: transparent;
    border: 0;
    padding: 0 12px;
    height: 100%;
    border-radius: 999px;
    font: 600 12px var(--is-font-sans, "Inter", system-ui, sans-serif);
    color: var(--is-fg-3, #76767E);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: background .12s, color .12s;
    min-width: 64px;
    justify-content: center;
}
.vd-seg button i { font-size: 10px; }
.vd-seg button.is-on {
    background: var(--is-brand-blue, #007BFF);
    color: #fff;
    font-weight: 700;
}
.vd-seg button.is-on i { color: #fff; }
.vd-seg button:not(.is-on):hover {
    background: var(--is-bg-surface-3, #F2F3F5);
    color: var(--is-fg-1, #1A1A1F);
}

/* ── Inline field hint (under the input on error) ──────────── */
.vd-row__hint {
    font: 500 11.5px var(--is-font-sans, "Inter", system-ui, sans-serif);
    color: var(--is-fg-3, #76767E);
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
}
.vd-row__hint i { font-size: 10px; }
.vd-row__hint--err { color: var(--is-danger, #C73B3B); }

/* ── Delete confirm message (inline in the row, spans cols 2-3) */
.vd-row__msg {
    display: flex;
    align-items: center;
    gap: 8px;
    font: 600 13px var(--is-font-sans, "Inter", system-ui, sans-serif);
    color: #7a1818;
    min-width: 0;
    overflow: hidden;
}
.vd-row__msg i {
    color: var(--is-danger, #C73B3B);
    font-size: 13px;
    flex-shrink: 0;
}
.vd-row__msg b {
    color: #5a0f0f;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.vd-row__msg span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* ── Specialized iconbtns — green Save / red Confirm / ghost
      Cancel. Extends dl-iconbtn so size/border behaviour matches
      View-state pencil/trash exactly. ─────────────────────── */
.vd-iconbtn--save {
    background: var(--is-success, #1F8A5B);
    color: #fff;
    border-color: var(--is-success, #1F8A5B);
}
.vd-iconbtn--save:hover {
    background: #1c9744;
    color: #fff;
    border-color: #1c9744;
}
.vd-iconbtn--confirm {
    background: var(--is-danger, #C73B3B);
    color: #fff;
    border-color: var(--is-danger, #C73B3B);
}
.vd-iconbtn--confirm:hover {
    background: #b51e1e;
    color: #fff;
    border-color: #b51e1e;
}
.vd-iconbtn--cancel {
    background: #fff;
    color: var(--is-fg-2, #404048);
    border-color: var(--is-border-2, #D1D1D6);
}
.vd-iconbtn--cancel:hover {
    background: var(--is-bg-surface-3, #F2F3F5);
    color: var(--is-fg-1, #1A1A1F);
    border-color: var(--is-border-3, #C7C7CC);
}

/* ── Toolbar locking hint (inline next to "X stavki") ─────── */
.vd-toolbar-hint {
    color: var(--is-fg-3, #76767E);
    font: 500 11.5px var(--is-font-sans, "Inter", system-ui, sans-serif);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.vd-toolbar-hint i { font-size: 10px; color: var(--is-brand-blue, #007BFF); }

/* ── Keyboard chip (Enter / Esc shown in pager info while editing) */
.vd-kbd {
    font: 600 10.5px var(--is-font-mono, "JetBrains Mono", monospace);
    background: #fff;
    border: 1px solid var(--is-border-2, #D1D1D6);
    border-bottom-width: 2px;
    border-radius: 4px;
    padding: 1px 5px;
    color: var(--is-fg-2, #404048);
    font-variant-numeric: tabular-nums;
}

/* =============================================================
   Tablet / mobile card stack — page-specific modifiers on top
   of the shared dl-card chrome from redesign-departments-list.css.
   The card chrome (.dl-cards, .dl-card, .dl-card__head, .dl-card__meta,
   .dl-card__field, .dl-card__foot) is already defined there;
   we only add vd-card--edit / --delete / --locked + vd-card__body
   for the inline-edit body.
   ============================================================= */
@media (max-width: 1199px) {
    .vd-card--edit {
        background: var(--is-brand-blue-100, #E6F2FF);
        border-color: var(--is-brand-blue, #007BFF);
        border-style: dashed;
    }
    .vd-card--edit:hover { border-color: var(--is-brand-blue, #007BFF); }
    .vd-card--edit .dl-card__head { border-bottom-color: var(--is-brand-blue, #007BFF); }
    .vd-card--edit .dl-card__foot { background: rgba(255,255,255,.55); border-top-color: var(--is-brand-blue, #007BFF); }

    .vd-card--delete {
        background: var(--is-danger-bg, #FBEAEA);
        border-color: #f3c2c2;
        border-style: dashed;
    }
    .vd-card--delete:hover { border-color: #f3c2c2; }
    .vd-card--delete .dl-card__head { border-bottom-color: #f3c2c2; }
    .vd-card--delete .dl-card__head .dl-name__title { color: #7a1818; }
    .vd-card--delete .dl-card__foot { background: rgba(255,255,255,.55); border-top-color: #f3c2c2; }

    .vd-card--locked { opacity: .55; pointer-events: none; }

    .vd-card__body {
        padding: 12px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .vd-card__body .vd-input { width: 100%; }
    .vd-card__body .vd-seg { align-self: flex-start; }

    .vd-card__delete-msg {
        padding: 12px;
        font: 600 13px var(--is-font-sans, "Inter", system-ui, sans-serif);
        color: #7a1818;
        display: flex;
        align-items: flex-start;
        gap: 7px;
    }
    .vd-card__delete-msg i {
        color: var(--is-danger, #C73B3B);
        font-size: 13px;
        margin-top: 2px;
        flex-shrink: 0;
    }
    .vd-card__delete-msg b {
        color: #5a0f0f;
        font-weight: 700;
    }
}