/* ============================================================
   Document Type List V2 (Vrste dokumenata) — page-scoped dt-*
   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/
       DocumentTypeList/DocumentTypeList.html
   Structure copy-with-swap from
     redesign-vacation-distribution-item-list.css (primary template
     for the inline-edit registry pattern).

   What lives here (page-specific only):
     · Order index # badge (View / Add-Edit / Delete variants)
     · Name cell — 30×30 brand-blue tinted square + fa-file-lines
     · Kreirano date cell — MONO + tabular-nums (project rule)
       + "Automatski" italic chip for the Add row
     · Inline row state modifiers (dt-tr--edit / dt-tr--delete /
       dt-tr--locked) — dashed plavi/crveni row treatment
     · dt-input + dt-input--err (inline text input)
     · dt-row__hint / dt-row__msg (validation hint / delete msg)
     · Specialized dt-iconbtn--save / --cancel / --confirm
     · dt-foot bar (purpose / keyboard / delete-cascade hints)
       + dt-kbd keyboard chip
     · Tablet/mobile card modifiers (dt-card--edit / --delete /
       --locked) on top of the shared dl-card chrome
   ============================================================ */

/* ── Pagehead sub-meta ─────────────────────────────────────── */
.dt-pagehead__sub-text {
    font: 500 13px var(--is-font-sans, "Plus Jakarta Sans", system-ui, sans-serif);
    color: var(--is-fg-3, #76767E);
    margin-top: 4px;
}
.dt-pagehead__sub-text b { color: var(--is-fg-1, #1A1A1F); font-weight: 700; }
.dt-pagehead__status { color: var(--is-brand-blue, #007BFF); font-weight: 600; margin-left: 4px; }

/* ── Order index # badge (mono, tabular — reading aid, not data) */
.dt-idx {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px; 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;
}
.dt-idx--edit {
    background: var(--is-brand-blue, #007BFF);
    border-color: var(--is-brand-blue, #007BFF);
    color: #fff;
}
.dt-idx--edit i { font-size: 10px; }
.dt-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;
   higher specificity needed to center the # column. */
.cc-table thead th.dt-th-idx,
.cc-table tbody td.dt-td-idx { text-align: center; }
.cc-table tbody td.dt-td-idx .dt-idx { margin: 0 auto; }

/* ── Name cell (View state) — decorative glyph + name ─────── */
.dt-name {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    max-width: 100%;
}
.dt-name__ico {
    width: 30px; height: 30px;
    border-radius: 7px;
    background: var(--is-brand-blue-100, #E6F2FF);
    color: var(--is-brand-blue, #007BFF);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
}
.dt-name__title {
    font: 600 13.5px var(--is-font-sans, "Plus Jakarta Sans", system-ui, sans-serif);
    color: var(--is-fg-1, #1A1A1F);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* ── Kreirano date cell — MONO + tabular-nums (project rule) ── */
.dt-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;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.dt-date i { font-size: 11px; color: var(--is-fg-3, #76767E); }
.dt-date--auto {
    color: var(--is-fg-muted, #9A9AA2);
    font-style: italic;
    font-family: var(--is-font-sans, "Plus Jakarta Sans", system-ui, sans-serif);
    font-weight: 500;
}

/* ── Locking modifier — non-active rows go grey while another
      row is in Add/Edit/Delete ─────────────────────────────── */
.dt-tr--locked > td { opacity: .45; }
.dt-tr--locked .dl-iconbtn { pointer-events: none; opacity: .35; }
.dt-tr--locked:hover { background: rgba(0,0,0,.015); }

/* Sort header lock while a row is in transition */
.dt-th--locked { pointer-events: none; opacity: .55; }

/* ── Add / Edit row state — dashed plavi outline + tinted bg ── */
.dt-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;
}
.dt-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);
}
.dt-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);
}
.dt-tr--edit:hover > td { background: var(--is-brand-blue-100, #E6F2FF); }

/* ── Delete state — dashed crveni outline + danger-bg tint ─── */
.dt-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;
}
.dt-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);
}
.dt-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);
}
.dt-tr--delete:hover > td { background: var(--is-danger-bg, #FBEAEA); }

/* ── Inline text input (Name) ──────────────────────────────── */
.dt-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, "Plus Jakarta Sans", system-ui, sans-serif);
    color: var(--is-fg-1, #1A1A1F);
    box-sizing: border-box;
}
.dt-input:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0,123,255,.20);
}
.dt-input--err {
    border-color: var(--is-danger, #C73B3B);
    box-shadow: 0 0 0 3px rgba(199,59,59,.12);
}

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

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

/* ── Specialized iconbtns — green Save / red Confirm / ghost
      Cancel. Extend dl-iconbtn so sizing matches pencil/trash. ─ */
.dt-iconbtn--save {
    background: var(--is-success, #1F8A5B);
    color: #fff;
    border-color: var(--is-success, #1F8A5B);
}
.dt-iconbtn--save:hover {
    background: #1c9744;
    color: #fff;
    border-color: #1c9744;
}
.dt-iconbtn--confirm {
    background: var(--is-danger, #C73B3B);
    color: #fff;
    border-color: var(--is-danger, #C73B3B);
}
.dt-iconbtn--confirm:hover {
    background: #b51e1e;
    color: #fff;
    border-color: #b51e1e;
}
.dt-iconbtn--cancel {
    background: #fff;
    color: var(--is-fg-2, #404048);
    border-color: var(--is-border-2, #D1D1D6);
}
.dt-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 ──────────────────────────────────── */
.dt-toolbar-hint {
    color: var(--is-fg-3, #76767E);
    font: 500 11.5px var(--is-font-sans, "Plus Jakarta Sans", system-ui, sans-serif);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.dt-toolbar-hint i { font-size: 10px; color: var(--is-brand-blue, #007BFF); }

/* ── Empty-state icon tint (folder on brand-blue-100 circle) ── */
.dt-empty__icon {
    background: var(--is-brand-blue-100, #E6F2FF) !important;
    color: var(--is-brand-blue, #007BFF) !important;
}

/* ── Keyboard chip (Enter / Esc in the bottom pager info) ──── */
.dt-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 (≤1199px) — page-specific modifiers
   on top of the shared dl-card chrome from
   redesign-departments-list.css. The cc-table-wrap / cc-cards-wrap
   visibility toggle is provided app-wide by redesign-competences.css.
   ============================================================= */
@media (max-width: 1199px) {
    .dt-card--edit {
        background: var(--is-brand-blue-100, #E6F2FF);
        border-color: var(--is-brand-blue, #007BFF);
        border-style: dashed;
    }
    .dt-card--edit:hover { border-color: var(--is-brand-blue, #007BFF); }
    .dt-card--edit .dl-card__head { border-bottom-color: var(--is-brand-blue, #007BFF); }
    .dt-card--edit .dl-card__foot { background: rgba(255,255,255,.55); border-top-color: var(--is-brand-blue, #007BFF); }

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

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

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

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

/* ── Mobile ≤600px per MobileLayoutStandards.md — values never
      wrap (§10); the shared cc-* mobile rules (pagehead column,
      full-width CTA, filterbar grid) come from
      redesign-competences.css and apply automatically. ──────── */
@media (max-width: 600px) {
    .dt-date { white-space: nowrap; }
    .dt-pagehead__sub-text { display: block; }
}