/* ============================================================
 * redesign-projectdetails.css — GMC project details, tab "Osnovno"
 * PBI 6426. Port of the `.pd-*` classes from the approved artboard
 * (design/ProjectDetailsBasic.html) — 1:1 on fonts, sizes, spacing
 * and states. `--is-*` tokens are already global (insync-tokens.css
 * + colors_and_type.css); :root is NOT redefined here.
 *
 * NOT ported on purpose:
 *   · .pd-header*        → header above the tab bar is out of scope
 *                          (built once every tab is redesigned)
 *   · .pd-tab*           → lives in redesign-tabs.css (.pd-tabs-shell)
 *   · .pd-legacy*        → New/Old compare toggle is a review aid
 *   · .pd-modal/.pd-mo/.pd-mx → plan popup is an existing component
 *   · .pd-vlink/.pd-vchip → header-only chrome
 * Added beyond the artboard:
 *   · .pd-rowms*         → real pill-overlay mechanics, 1:1 with
 *                          .er-rowms* on /employeeranking (the artboard
 *                          only drew the closed/open states statically)
 *   · Syncfusion control restyle, scoped under .pd-screen
 * ============================================================ */

.pd-screen {
    padding: 4px 0 100px;
    max-width: 1480px;
    font-family: var(--is-font-sans);
}

/* ── Load-duration chip ───────────────────────────────────────── */
.pd-loadchip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 22px;
    padding: 0 9px;
    border-radius: 999px;
    background: var(--is-bg-surface-3);
    border: 1px solid var(--is-border-1);
    font: 500 11px var(--is-font-mono);
    color: var(--is-fg-3);
    cursor: help;
    transition: background .15s, color .15s, border-color .15s;
}

.pd-loadchip:hover {
    background: #fff;
    color: var(--is-fg-1);
    border-color: var(--is-border-2);
}

.pd-loadchip i {
    font-size: 9px;
    color: var(--is-fg-3);
}

.pd-loadchip b {
    color: var(--is-fg-2);
    font-weight: 600;
}

.pd-loadchip:hover b {
    color: var(--is-fg-1);
}

.pd-loadchip__sep {
    color: var(--is-fg-muted);
    font-weight: 400;
    padding: 0 1px;
}

.pd-loadchip__info {
    background: transparent;
    border: 0;
    padding: 0 0 0 2px;
    line-height: 1;
    color: var(--is-fg-3);
    cursor: pointer;
}

.pd-loadchip__info:hover i {
    color: var(--is-action-blue);
}

/* ── Layout ───────────────────────────────────────────────────── */
/* 3:2 — proportional, not a fixed rail width. A fixed 380px rail stayed the same
   while the form column grew with the viewport, so on wide monitors it read closer
   to 4:1 and the plan/reserve cards had no room for their numbers.
   minmax(0, …) on both tracks keeps long values from forcing the grid wider. */
.pd-grid {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 18px;
    align-items: start;
}

/* New project (no PublicId yet) — no right rail, so one full column. */
.pd-grid--single {
    grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 1200px) {
    .pd-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.pd-section {
    background: var(--is-bg-surface);
    border: 1px solid var(--is-border-1);
    border-radius: var(--is-radius-md);
    box-shadow: var(--is-shadow-1);
    margin-bottom: 18px;
    overflow: hidden;
}

.pd-section__head {
    padding: 14px 22px 4px;
}

/* Title + load-duration chip on one row; the hint stays below as a sibling so it keeps
   its own indent. Only the Identification card uses this — the chip has exactly one
   home now, in the left column, which renders for every company (PBI 6429). */
.pd-section__headrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.pd-section__title {
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 0;
    font: 600 14px var(--is-font-sans);
    color: var(--is-fg-1);
    letter-spacing: .01em;
}

.pd-section__title i {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: var(--is-brand-blue-100);
    color: var(--is-brand-blue-700);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex: none;
}

.pd-section__hint {
    margin: 4px 0 0 36px;
    font: 500 12px var(--is-font-sans);
    color: var(--is-fg-3);
}

.pd-section__body {
    padding: 16px 22px 20px;
}

/* ── Field grid ───────────────────────────────────────────────── */
.pd-row {
    display: grid;
    gap: 14px 16px;
}

.pd-row--2 {
    grid-template-columns: 1fr 1fr;
}

.pd-row--3 {
    grid-template-columns: 1fr 1fr 1fr;
}

.pd-row--2-1 {
    grid-template-columns: 2fr 1fr;
}

.pd-row + .pd-row {
    margin-top: 14px;
}

@media (max-width: 900px) {
    .pd-row--2,
    .pd-row--3,
    .pd-row--2-1 {
        grid-template-columns: minmax(0, 1fr);
    }
}

.pd-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.pd-field__label {
    font: 500 12px var(--is-font-sans);
    color: var(--is-fg-2);
    display: flex;
    gap: 6px;
    align-items: center;
    margin: 0;
}

.pd-field__label .pd-req {
    color: var(--is-danger);
    font-weight: 700;
}

.pd-field__label .pd-info {
    color: var(--is-fg-muted);
    font-size: 11px;
    cursor: help;
}

.pd-field__hint {
    font: 500 11px var(--is-font-sans);
    color: var(--is-fg-3);
    margin-top: 2px;
}

/* ── Native inputs ────────────────────────────────────────────── */
.pd-input,
.pd-select {
    height: 38px;
    border: 1px solid var(--is-border-3);
    border-radius: var(--is-radius-sm);
    padding: 0 12px;
    font: 400 14px var(--is-font-sans);
    background: #fff;
    color: var(--is-fg-1);
    width: 100%;
    transition: border-color .15s, box-shadow .15s;
}

.pd-input:focus,
.pd-select:focus {
    outline: none;
    border-color: var(--is-action-blue);
    box-shadow: 0 0 0 3px rgba(0, 123, 255, .15);
}

.pd-textarea {
    min-height: 72px;
    padding: 10px 12px;
    resize: vertical;
    font: 400 14px var(--is-font-sans);
    color: var(--is-fg-1);
    background: #fff;
    border: 1px solid var(--is-border-3);
    border-radius: var(--is-radius-sm);
    width: 100%;
}

.pd-textarea:focus {
    outline: none;
    border-color: var(--is-action-blue);
    box-shadow: 0 0 0 3px rgba(0, 123, 255, .15);
}

.pd-input--num {
    font-variant-numeric: tabular-nums;
}

.pd-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.pd-input-wrap > i {
    position: absolute;
    left: 12px;
    color: var(--is-fg-3);
    font-size: 12px;
    pointer-events: none;
    z-index: 2;
}

.pd-input-wrap > .pd-input,
.pd-input-wrap > .pd-select {
    padding-left: 34px;
}

/* NOTE — the artboard also draws a leading affordance icon inside the Syncfusion
   dropdowns (Status / Country / Project scope / Client / Master project). Those are
   deliberately NOT implemented: overlaying an icon inside .e-input-group means fighting
   Syncfusion's internal input padding, and getting it wrong looks worse than no icon.
   Leading icons are used only where the padding is ours to control — native <select>
   and native text inputs. Visual detail, deferred; nothing functional depends on it. */

.pd-suffix {
    display: flex;
    align-items: stretch;
}

.pd-suffix .pd-input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.pd-suffix__add {
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    background: var(--is-bg-surface-3);
    border: 1px solid var(--is-border-3);
    border-left: 0;
    border-top-right-radius: var(--is-radius-sm);
    border-bottom-right-radius: var(--is-radius-sm);
    font: 500 12px var(--is-font-sans);
    color: var(--is-fg-2);
    white-space: nowrap;
}

/* ── Working-Saturday segmented control ───────────────────────── */
.pd-segments {
    display: inline-flex;
    padding: 3px;
    background: var(--is-bg-surface-3);
    border-radius: var(--is-radius-sm);
    border: 1px solid var(--is-border-1);
    align-self: flex-start;
}

.pd-segments button {
    background: transparent;
    border: 0;
    padding: 0 14px;
    height: 30px;
    font: 600 13px var(--is-font-sans);
    color: var(--is-fg-2);
    border-radius: 4px;
    cursor: pointer;
    min-width: 64px;
}

.pd-segments button.is-active {
    background: #fff;
    color: var(--is-fg-1);
    box-shadow: var(--is-shadow-1);
}

/* ── Integral checkbox card ───────────────────────────────────── */
.pd-check {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid var(--is-border-1);
    border-radius: var(--is-radius-sm);
    background: var(--is-bg-surface-3);
    cursor: pointer;
    margin: 0;
}

.pd-check input {
    width: 17px;
    height: 17px;
    accent-color: var(--is-brand-blue);
    flex: none;
}

.pd-check__main {
    font: 600 13px var(--is-font-sans);
    color: var(--is-fg-1);
}

.pd-check__sub {
    font: 500 12px var(--is-font-sans);
    color: var(--is-fg-3);
    margin-top: 1px;
}

/* ── Multiselect — PILL OVERLAY (app-wide standard) ────────────
   1:1 with .er-rowms* on /employeeranking. The real SfMultiSelect sits
   inside .pd-rowms-host at inset:0 / opacity:0 (invisible but clickable);
   the pill on top is pointer-events:none. On :focus-within the native
   field is revealed and the pill hidden, so the popup renders at <body>
   root and is never clipped by the card.
   Height is 38px here (not the 33px of report filter rows) so the pill
   lines up with the other form inputs in this screen. ────────────── */
.pd-rowms-host {
    position: relative;
    width: 100%;
    height: 38px;
}

.pd-rowms-host .e-multiselect.pd-rowms-native,
.pd-rowms-host .pd-rowms-native.e-input-group,
.pd-rowms-host .pd-rowms-native.e-input-group.e-control-wrapper,
.pd-rowms-host .e-ddl.pd-rowms-native {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 38px !important;
    min-height: 38px !important;
    opacity: 0 !important; /* invisible but still clickable */
}

.pd-rowms {
    position: absolute;
    inset: 0;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
    padding: 0 11px;
    border: 1px solid var(--is-border-2);
    border-radius: var(--is-radius-sm);
    background: #fff;
    pointer-events: none; /* click falls through to the control below */
    overflow: hidden;
    transition: background .12s, border-color .12s;
}

.pd-rowms-host:hover .pd-rowms {
    border-color: var(--is-brand-blue-300);
    background: var(--is-brand-blue-100);
}

.pd-rowms__txt {
    font: 500 13px var(--is-font-sans);
    color: var(--is-fg-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.pd-rowms__right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.pd-rowms__cnt {
    display: inline-flex;
    align-items: center;
    height: 17px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--is-brand-blue-100);
    color: var(--is-brand-blue-700);
    font: 700 10px var(--is-font-mono);
    flex-shrink: 0;
}

.pd-rowms i {
    font-size: 10px;
    color: var(--is-fg-3);
    flex-shrink: 0;
}

/* the overlay is pointer-events:none — re-enable clicks on the X only */
.pd-rowms__clear {
    pointer-events: auto;
    cursor: pointer;
    font-size: 12px !important;
    color: var(--is-fg-3);
    transition: color .12s;
}

.pd-rowms__clear:hover {
    color: var(--is-brand-blue-700);
}

.pd-rowms--sel {
    border-color: var(--is-brand-blue-300);
    background: var(--is-brand-blue-100);
}

.pd-rowms--sel .pd-rowms__txt {
    color: var(--is-brand-blue-700);
    font-weight: 700;
}

.pd-rowms-host:focus-within .e-multiselect.pd-rowms-native,
.pd-rowms-host:focus-within .e-ddl.pd-rowms-native {
    opacity: 1 !important;
    z-index: 2;
}

.pd-rowms-host:focus-within .pd-rowms {
    display: none !important;
}

/* ── Right rail ───────────────────────────────────────────────── */
/* The scroll container here is #main-content (site.css gives it flex:1 + overflow-x:auto
   inside .app-container{height:100vh}, and overflow-y:visible computes to auto), so the
   sticky `top` is measured from ITS top edge — not the viewport's.

   `top` MUST stay below the rail's natural offset inside that container, otherwise sticky
   pushes the rail DOWN by the difference even at scroll 0 and the two columns stop lining
   up. That natural offset is only ~66px here: nav-tabs padding 8 + nav-link 36 +
   nav-wrapper margin-bottom 18 + .pd-screen padding-top 4. The artboard's `top: 80px`
   assumed a page-header card above the rail; without it, 80 > 66 and the rail sat 14px
   too low. 12px leaves breathing room while it sticks and can never overshoot. */
.pd-rail {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: sticky;
    top: 12px;
}

/* ── Accepted personnel plan card ─────────────────────────────────
   Every number here comes from the same shape the plan modal stores:
   (division, dateFrom, dateTo, workers) bucketed into weeks. There is no
   position/role breakdown in that data — never render one. ────────── */
/* The plan card deliberately carries NO padding of its own: it uses the shared
   .pd-section__head / .pd-section__body geometry, exactly like the form cards in the
   left column and the Reserves card below it. That is what keeps the first content row
   of both columns on the same offset — the alignment falls out of one shared rule
   instead of hand-tuned per-card padding, so it survives future edits to __head.
   (It used to set `padding: 16px 18px 18px` and an `is-eyebrow` label, ported 1:1 from
   the artboard where the rail started below the page header and never had to line up
   with a form card.) */

/* Empty state already brings its own generous padding — don't stack it on the body's. */
.pd-section__body > .pd-empty {
    padding: 6px 0 2px;
}

.pd-plan__num {
    font: 700 34px/1 var(--is-font-sans);
    letter-spacing: -.02em;
    color: var(--is-fg-1);
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.pd-plan__num small {
    font: 500 12px var(--is-font-sans);
    color: var(--is-fg-3);
}

.pd-plan__sub {
    font: 500 11.5px var(--is-font-sans);
    color: var(--is-fg-3);
    margin-top: 4px;
}

.pd-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 14px 0 4px;
}

.pd-stat {
    background: var(--is-bg-surface-3);
    border: 1px solid var(--is-border-1);
    border-radius: var(--is-radius-sm);
    padding: 8px 10px;
}

.pd-stat__k {
    font: 600 10.5px var(--is-font-sans);
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--is-fg-3);
    display: flex;
    align-items: center;
    gap: 5px;
}

.pd-stat__k i {
    font-size: 10px;
    color: var(--is-fg-muted);
    cursor: help;
}

.pd-stat__v {
    font: 700 17px var(--is-font-sans);
    color: var(--is-fg-1);
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}

.pd-stat__n {
    font: 500 11px var(--is-font-sans);
    color: var(--is-fg-3);
}

.pd-stat.is-warn {
    background: rgba(206, 134, 0, .08);
    border-color: rgba(206, 134, 0, .28);
}

.pd-stat.is-warn .pd-stat__v {
    color: var(--is-warning);
}

/* Derived max-hours line inside the man-weeks tile — heavier than the plain .pd-stat__n
   caption above it, because it carries a number, not a label (PBI 6429). */
.pd-stat__n--hours {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
    font-weight: 600;
    color: var(--is-fg-2);
    font-variant-numeric: tabular-nums;
}

/* Clickable info (opens InformationPopup) — same shape as .pd-loadchip__info, NOT
   .pd-stat__k i, which is cursor:help for plain title tooltips. */
.pd-stat__info {
    background: transparent;
    border: 0;
    padding: 0;
    line-height: 1;
    color: var(--is-fg-muted);
    cursor: pointer;
}

.pd-stat__info i {
    font-size: 10px;
}

.pd-stat__info:hover i {
    color: var(--is-action-blue);
}

.pd-weeks {
    margin-top: 12px;
}

.pd-weeks__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font: 600 10.5px var(--is-font-sans);
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--is-fg-3);
    margin-bottom: 6px;
}

.pd-weeks__head .pd-weeks__hint {
    text-transform: none;
    font-weight: 500;
    letter-spacing: 0;
}

.pd-weeks__chart {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 78px;
    padding: 0 2px 3px;
    border-bottom: 1px solid var(--is-border-2);
}

.pd-week {
    flex: 1;
    min-width: 3px;
    height: 100%;
    display: flex;
    flex-direction: column-reverse;
    cursor: pointer;
    position: relative;
    border-radius: 2px 2px 0 0;
    background: transparent;
    border: 0;
    padding: 0;
}

.pd-week:hover {
    outline: 2px solid var(--is-brand-blue-300);
    outline-offset: 1px;
}

.pd-week.is-sel {
    outline: 2px solid var(--is-brand-blue);
    outline-offset: 1px;
}

.pd-week.is-empty::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: repeating-linear-gradient(45deg, #e6a700 0 3px, transparent 3px 6px);
}

.pd-week__seg {
    display: block;
}

.pd-week__seg--res {
    background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.55) 0 2px, transparent 2px 4px);
}

.pd-weeks__today {
    position: absolute;
    top: -3px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 4px solid var(--is-fg-1);
}

.pd-weeks__axis {
    display: flex;
    justify-content: space-between;
    font: 500 10px var(--is-font-mono);
    color: var(--is-fg-muted);
    margin-top: 4px;
}

.pd-weekdetail {
    margin-top: 10px;
    background: var(--is-bg-surface-3);
    border: 1px solid var(--is-border-1);
    border-radius: var(--is-radius-sm);
    padding: 10px 12px;
}

.pd-weekdetail__h {
    font: 600 12px var(--is-font-sans);
    color: var(--is-fg-1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.pd-weekdetail__r {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font: 500 12px var(--is-font-sans);
    color: var(--is-fg-2);
    margin-top: 6px;
    gap: 8px;
}

.pd-weekdetail__r b {
    font-variant-numeric: tabular-nums;
}

.pd-weekdetail__r--warn {
    color: var(--is-warning);
}

.pd-plan__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font: 500 12px var(--is-font-sans);
    color: var(--is-fg-2);
    margin-top: 12px;
}

.pd-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    display: inline-block;
    margin-right: 6px;
    vertical-align: middle;
}

.pd-dot--res {
    background: var(--is-border-3);
    background-image: repeating-linear-gradient(45deg, #fff 0 2px, transparent 2px 4px);
}

/* ── Reserves card ────────────────────────────────────────────── */
.pd-reserve {
    display: flex;
    flex-direction: column;
}

.pd-reserve__row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px;
    padding: 12px 18px;
    border-top: 1px solid var(--is-border-1);
}

.pd-reserve__row:hover {
    background: var(--is-bg-surface-3);
}

.pd-reserve__title {
    font: 600 13px var(--is-font-sans);
    color: var(--is-fg-1);
}

.pd-reserve__meta {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-top: 2px;
    font: 500 12px var(--is-font-sans);
    color: var(--is-fg-3);
}

.pd-reserve__dates {
    font-family: var(--is-font-mono);
    font-size: 12px;
    color: var(--is-fg-3);
    display: inline-flex;
    gap: 6px;
    align-items: center;
}

.pd-reserve__actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pd-reserve__workers {
    font: 700 16px var(--is-font-sans);
    color: var(--is-brand-blue-700);
    align-self: center;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pd-reserve__workers span {
    font: 500 11px var(--is-font-sans);
    color: var(--is-fg-3);
    margin-left: 2px;
}

.pd-reserve__addwrap {
    padding: 12px 18px 18px;
}

.pd-reserve__add {
    width: 100%;
    height: 40px;
    border: 1px dashed var(--is-border-3);
    background: var(--is-bg-surface-3);
    color: var(--is-fg-2);
    border-radius: var(--is-radius-sm);
    font: 600 13px var(--is-font-sans);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background .15s, color .15s, border-color .15s;
}

.pd-reserve__add:hover {
    background: var(--is-brand-blue-100);
    color: var(--is-brand-blue-700);
    border-color: var(--is-brand-blue-300);
    border-style: solid;
}

.pd-empty {
    padding: 22px;
    text-align: center;
    color: var(--is-fg-3);
    font: 500 13px var(--is-font-sans);
}

.pd-empty i {
    display: block;
    font-size: 22px;
    color: var(--is-fg-muted);
    margin-bottom: 8px;
}

/* ── Inline add/edit row (mirrors InlineGridRowMode Add/Edit) ──── */
.pd-inline {
    border-top: 1px solid var(--is-border-1);
    background: var(--is-brand-blue-100);
    padding: 12px 18px;
}

.pd-inline__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.pd-inline__grid--3 {
    grid-template-columns: 1fr 76px;
}

.pd-inline label {
    font: 600 10.5px var(--is-font-sans);
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--is-brand-blue-700);
    display: block;
    margin-bottom: 3px;
}

.pd-inline .pd-input,
.pd-inline .pd-select {
    height: 32px;
    font-size: 13px;
}

.pd-inline .e-input-group,
.pd-inline .e-input-group.e-control-wrapper {
    height: 32px !important;
    min-height: 32px !important;
}

.pd-inline__foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 10px;
}

/* ── Chips / icon buttons / small buttons ─────────────────────────
   The global kit ships .is-btn / .is-btn--primary / .is-btn--ghost only,
   so the remaining artboard chrome is namespaced locally rather than
   introducing new global class names. ─────────────────────────────── */
.pd-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 22px;
    padding: 0 9px;
    border-radius: 999px;
    background: var(--is-bg-surface-3);
    border: 1px solid var(--is-border-1);
    font: 600 11px var(--is-font-sans);
    color: var(--is-fg-2);
    white-space: nowrap;
}

.pd-iconbtn {
    width: 30px;
    height: 30px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--is-border-2);
    border-radius: var(--is-radius-sm);
    background: #fff;
    color: var(--is-fg-2);
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}

.pd-iconbtn i {
    font-size: 11px;
}

.pd-iconbtn:hover:not(:disabled) {
    background: var(--is-bg-surface-3);
    color: var(--is-fg-1);
    border-color: var(--is-border-3);
}

.pd-iconbtn--danger:hover:not(:disabled) {
    background: rgba(199, 59, 59, .08);
    border-color: rgba(199, 59, 59, .35);
    color: var(--is-danger);
}

/* Uniform action column: unavailable actions are shown disabled, never dropped —
   see HR101BL/CLAUDE.md "Uniformna kolona akcija". */
.pd-iconbtn:disabled {
    opacity: .32;
    cursor: not-allowed;
}

.pd-iconbtn:disabled:hover {
    background: #fff;
    color: var(--is-fg-2);
    border-color: var(--is-border-2);
}

.pd-screen .pd-btn--sm {
    height: 30px;
    padding: 0 12px;
    font-size: 12px;
}

.pd-screen .pd-btn--block {
    width: 100%;
    margin-top: 14px;
}

/* ── Sticky save bar ──────────────────────────────────────────────
   Positioned inside #main-content exactly like the block it replaces:
   left:0 / right:13px leaves room for the app's vertical scrollbar. ── */
.pd-footer {
    position: fixed;
    left: 0;
    right: 13px;
    bottom: 0;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: saturate(140%) blur(8px);
    border-top: 1px solid var(--is-border-1);
    padding: 12px 28px;
    z-index: 100;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    align-items: center;
}

.pd-footer__status {
    margin-right: auto;
    font: 500 13px var(--is-font-sans);
    color: var(--is-fg-3);
    display: inline-flex;
    gap: 8px;
    align-items: center;
}

.pd-footer .is-btn {
    min-width: 140px;
}

.pd-footer .is-btn--primary {
    min-width: 200px;
}

/* ============================================================
 * Syncfusion control restyle — scoped to .pd-screen so legacy
 * pages are untouched.
 * ============================================================ */
.pd-screen .e-input-group,
.pd-screen .e-input-group.e-control-wrapper,
.pd-screen .e-multiselect.e-input-group {
    border: 1px solid var(--is-border-3) !important;
    border-radius: var(--is-radius-sm) !important;
    background: #fff;
    height: 38px;
    min-height: 38px;
    font: 400 14px var(--is-font-sans);
    color: var(--is-fg-1);
    box-shadow: none !important;
}

.pd-screen .e-input-group.e-input-focus,
.pd-screen .e-input-group:focus-within {
    border-color: var(--is-action-blue) !important;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, .15) !important;
}

.pd-screen .e-input-group input.e-input,
.pd-screen .e-input-group .e-numerictextbox {
    font: 400 14px var(--is-font-sans);
    color: var(--is-fg-1);
}

/* Syncfusion draws its own ::before/::after underline on input groups —
   the 1px border above replaces it. */
.pd-screen .e-input-group:not(.e-float-icon-left)::before,
.pd-screen .e-input-group:not(.e-float-icon-left)::after {
    display: none;
}

.pd-screen .e-colorpicker-wrapper .e-split-btn-wrapper,
.pd-screen .e-colorpicker-wrapper .e-split-btn {
    border-radius: var(--is-radius-sm) !important;
    height: 38px;
}

/* Dropdown popups render at <body> root, so this one rule is global
   on purpose — it cannot be scoped under .pd-screen. */
.e-popup.e-ddl .e-list-item.e-active,
.e-popup.e-ddl .e-list-item.e-hover {
    background: var(--is-brand-blue-100) !important;
    color: var(--is-brand-blue-700) !important;
}