/* ============================================================
   PE Skills List V2 (Vještine) — page-scoped pk-* 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/PESkills/PESkillsList.html
   Structure copy-with-swap from project-statuses-list-v2.css
   (closest inline-edit registry template, 3 row states + dialog delete).

   What lives here (page-specific only):
     · Order index # badge (View / Add-Edit variants) — mono, tabular
     · Name cell — 30×30 brand-blue tinted square + fa-star-half-stroke
     · Description cell (ellipsis)
     · Min / Max grade view cells (pk-grade) — MONO + tabular (project rule)
     · Color swatch (View) + native color picker (Add/Edit) + hex
     · Inline row state modifier (pk-tr--edit) — dashed plavi treatment
     · pk-input + pk-input--num + pk-input--err
     · pk-row__hint / pk-row__hint--err (inline validation, full-width row)
     · pk-iconbtn--save / --cancel
     · Foot bar (purpose + keyboard hints) + pk-kbd chip
     · Tablet/mobile card modifiers (pk-card--edit / --locked)

   Delete is NOT inline here — it uses the shared ConfirmDeleteDialog.
   ============================================================ */

/* ── Screen alignment ──────────────────────────────────────────
   The shared .cc-screen centres content (max-width:1680px; margin:0 auto),
   which on wide monitors pushes the page toward the middle. Match the
   left-aligned, full-width treatment of employeeslist-v2 (.el-screen) so
   the page hugs the nav. Page-scoped — the shared .cc-screen is untouched. */
.cc-screen.pk-screen { max-width: none; margin: 0; }

/* ── Pagehead sub-meta ─────────────────────────────────────── */
.pk-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;
}
.pk-pagehead__sub-text b { color: var(--is-fg-1, #1A1A1F); font-weight: 700; }
.pk-pagehead__status { color: var(--is-brand-blue, #007BFF); font-weight: 600; margin-left: 4px; }

/* ── Order index # badge (mono, tabular — reading aid, not data) */
.pk-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;
}
.pk-idx--edit {
    background: var(--is-brand-blue, #007BFF);
    border-color: var(--is-brand-blue, #007BFF);
    color: #fff;
}
.pk-idx--edit i { font-size: 10px; }

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

/* Center the Min / Max grade column headers + cells. */
.cc-table thead th.pk-th-num,
.cc-table tbody td.pk-td-num { text-align: center; }

/* ── Name cell (View state) — decorative glyph + name ─────── */
.pk-name {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    max-width: 100%;
}
.pk-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;
}
.pk-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;
}

/* ── Description cell (View) — lighter, ellipsis ───────────── */
.pk-desc {
    font: 500 13px var(--is-font-sans, "Plus Jakarta Sans", system-ui, sans-serif);
    color: var(--is-fg-2, #404048);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    max-width: 100%;
}

/* ── Min / Max grade view cell — MONO + tabular (project rule) ─ */
.pk-grade {
    font: 600 13px var(--is-font-mono, "JetBrains Mono", monospace);
    color: var(--is-fg-1, #1A1A1F);
    font-variant-numeric: tabular-nums;
}

/* ── Color swatch (View) — chip + uppercase mono hex ───────── */
.pk-swatch {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}
.pk-swatch__chip {
    width: 22px; height: 22px;
    border-radius: 6px;
    border: 1px solid var(--is-border-2, #D1D1D6);
    flex-shrink: 0;
}
.pk-swatch__hex {
    font: 500 12px var(--is-font-mono, "JetBrains Mono", monospace);
    color: var(--is-fg-3, #76767E);
    font-variant-numeric: tabular-nums;
    text-transform: uppercase;
    white-space: nowrap;
}

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

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

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

/* ── Inline text input (Name / Description) ───────────────────── */
.pk-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;
}
/* Description input is lighter weight than the name input (MD §5). */
.pk-input--desc { font-weight: 400; }
.pk-input:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0,123,255,.20);
}
.pk-input--err {
    border-color: var(--is-danger, #C73B3B);
    box-shadow: 0 0 0 3px rgba(199,59,59,.12);
}

/* ── Numeric input (Min / Max grade) — mono, right-aligned, tabular */
.pk-input--num {
    font: 600 13.5px var(--is-font-mono, "JetBrains Mono", monospace);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* ── Native color picker (Add/Edit) + hex ──────────────────── */
.pk-coloredit {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}
.pk-colorpick {
    width: 44px;
    height: 34px;
    padding: 2px;
    border: 1px solid var(--is-border-2, #D1D1D6);
    border-radius: var(--is-radius-sm, 6px);
    background: #fff;
    cursor: pointer;
    box-sizing: border-box;
    flex-shrink: 0;
}
.pk-colorpick::-webkit-color-swatch-wrapper { padding: 0; }
.pk-colorpick::-webkit-color-swatch { border: none; border-radius: 4px; }
.pk-colorpick::-moz-color-swatch { border: none; border-radius: 4px; }

/* ── Inline field hint (under the row on validation error) ──── */
.pk-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;
}
.pk-row__hint i { font-size: 10px; }
.pk-row__hint--err { color: var(--is-danger, #C73B3B); }

/* ── Specialized iconbtns — green Save / ghost Cancel.
      Extend dl-iconbtn so sizing matches pencil/trash. ──────── */
.pk-iconbtn--save {
    background: var(--is-success, #1F8A5B);
    color: #fff;
    border-color: var(--is-success, #1F8A5B);
}
.pk-iconbtn--save:hover {
    background: #1c9744;
    color: #fff;
    border-color: #1c9744;
}
.pk-iconbtn--cancel {
    background: #fff;
    color: var(--is-fg-2, #404048);
    border-color: var(--is-border-2, #D1D1D6);
}
.pk-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 ──────────────────────────────────── */
.pk-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;
}
.pk-toolbar-hint i { font-size: 10px; color: var(--is-brand-blue, #007BFF); }

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

/* ── Foot bar — purpose hint (left) + keyboard hint (right) ─── */
.pk-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding: 12px 16px;
    border-top: 1px dashed var(--is-border-1, #E5E5EA);
}
.pk-foot__hint {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font: 500 12px var(--is-font-sans, "Plus Jakarta Sans", system-ui, sans-serif);
    color: var(--is-fg-3, #76767E);
}
.pk-foot__hint i { font-size: 11px; color: var(--is-brand-blue, #007BFF); }
.pk-foot__kbd {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font: 500 12px var(--is-font-sans, "Plus Jakarta Sans", system-ui, sans-serif);
    color: var(--is-fg-3, #76767E);
}
.pk-foot__kbd > i { font-size: 11px; color: var(--is-brand-blue, #007BFF); margin-right: 2px; }
.pk-foot__dot { margin: 0 4px; }

/* ── Keyboard chip (Enter / Esc) ───────────────────────────── */
.pk-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) {
    .pk-card--edit {
        background: var(--is-brand-blue-100, #E6F2FF);
        border-color: var(--is-brand-blue, #007BFF);
        border-style: dashed;
    }
    .pk-card--edit:hover { border-color: var(--is-brand-blue, #007BFF); }
    .pk-card--edit .dl-card__head { border-bottom-color: var(--is-brand-blue, #007BFF); }
    .pk-card--edit .dl-card__foot { background: rgba(255,255,255,.55); border-top-color: var(--is-brand-blue, #007BFF); }

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

    .pk-card__body {
        padding: 12px;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .pk-card__body .pk-input { width: 100%; }

    /* Min + Max sit side by side in the card (both small). */
    .pk-card__pair {
        display: flex;
        gap: 12px;
    }
    .pk-card__pair > div { flex: 1; min-width: 0; }

    .pk-card__field-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }
    .pk-card__field-col {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }
    .pk-card__field-label {
        font: 500 11px var(--is-font-sans, "Plus Jakarta Sans", system-ui, sans-serif);
        color: var(--is-fg-3, #76767E);
        text-transform: uppercase;
        letter-spacing: .05em;
    }
    .pk-card__field-row .pk-coloredit { flex-shrink: 0; }
}

/* ── 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) {
    .pk-grade,
    .pk-swatch__hex { white-space: nowrap; }
    .pk-pagehead__sub-text { display: block; }
    .pk-foot { flex-direction: column; align-items: flex-start; }
}