/* ============================================================
 * redesign-projectroles.css — GMC project details, tab "Prava pristupa"
 * PBI 6427. Port of the `.pr-*` classes from the approved artboard
 * (projects/PBI-6427-project-roles-redesign/design/ProjectRoles.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.
 *
 * Layout is master-detail: left is a single card holding nine ~60px
 * rows (one per role) so all nine fit in one screen height; right is
 * a sticky panel with the selected role's "Može / Ne može" lists.
 *
 * NOT ported on purpose:
 *   · body { }            → artboard chrome, not page chrome
 *   · .pr-modeswitch*     → Edit/Read-only toggle is a review aid
 * Added beyond the artboard:
 *   · Syncfusion restyle scoped under .pr-screen (mirrors the block
 *     in redesign-projectdetails.css) — the pill overlay depends on
 *     the native control being sized and hidden predictably.
 * ============================================================ */

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

/* ── Top strip ────────────────────────────────────────────────── */
.pr-toprow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.pr-toprow__spacer {
    flex: 1;
}

/* ── Load-duration chip ───────────────────────────────────────── */
.pr-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;
}

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

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

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

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

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

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

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

/* ── Layout ───────────────────────────────────────────────────── */
.pr-grid {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 18px;
    align-items: start;
}

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

.pr-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: 16px;
    overflow: hidden;
}

.pr-section__head {
    padding: 13px 20px 12px;
    border-bottom: 1px solid var(--is-border-1);
}

.pr-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;
}

.pr-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;
}

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

.pr-section__body {
    padding: 14px 20px 16px;
}

/* ── Read-only banner ─────────────────────────────────────────── */
.pr-ro {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 11px 15px;
    margin-bottom: 14px;
    background: var(--is-warning-bg);
    border: 1px solid rgba(206, 134, 0, .35);
    border-radius: var(--is-radius-md);
}

.pr-ro > i {
    color: var(--is-warning);
    font-size: 14px;
    margin-top: 1px;
    flex: none;
}

.pr-ro__t {
    font: 600 13px var(--is-font-sans);
    color: var(--is-fg-1);
    margin: 0 0 2px;
}

.pr-ro__b {
    font: 500 12px var(--is-font-sans);
    color: var(--is-fg-2);
    margin: 0;
    line-height: 1.5;
}

/* ── Roles list (master) — one ~60px row per role ─────────────────
   Whole row selects the role; the multiselect stops propagation so
   clicking the control does not change what the panel shows. ────── */
.pr-list {
    display: block;
}

.pr-row {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 250px auto;
    gap: 12px;
    align-items: center;
    padding: 8px 18px;
    min-height: 60px;
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: background .12s, border-color .12s;
}

.pr-row + .pr-row {
    border-top: 1px solid var(--is-border-1);
}

.pr-row:hover {
    background: var(--is-bg-surface-2);
}

.pr-row.is-active {
    background: var(--is-brand-blue-100);
    border-left-color: var(--is-brand-blue-700);
}

.pr-row__ico {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    background: var(--is-brand-blue-100);
    color: var(--is-brand-blue-700);
}

.pr-row.is-active .pr-row__ico {
    background: var(--is-brand-blue-700);
    color: #fff;
}

.pr-row__name {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    font: 600 13px var(--is-font-sans);
    color: var(--is-fg-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pr-row__code {
    font: 700 9px var(--is-font-mono);
    color: var(--is-fg-3);
    background: var(--is-bg-surface-3);
    border: 1px solid var(--is-border-1);
    border-radius: 999px;
    padding: 1px 6px;
    flex: none;
}

.pr-row.is-active .pr-row__code {
    background: #fff;
}

.pr-row__people {
    margin: 2px 0 0;
    font: 500 11.5px var(--is-font-sans);
    color: var(--is-fg-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pr-row__people--none {
    color: var(--is-danger);
}

.pr-row__people--none i {
    font-size: 10px;
    margin-right: 4px;
}

/* Permission summary + arrow */
.pr-row__perm {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
}

.pr-b {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 20px;
    padding: 0 8px;
    border-radius: 999px;
    font: 700 10px var(--is-font-mono);
}

.pr-b i {
    font-size: 9px;
}

.pr-b--can {
    background: var(--is-success-bg);
    color: var(--is-success);
}

.pr-b--cant {
    background: var(--is-danger-bg);
    color: var(--is-danger);
}

.pr-row__arrow {
    font-size: 11px;
    color: var(--is-fg-muted);
    margin-left: 2px;
}

.pr-row.is-active .pr-row__arrow {
    color: var(--is-brand-blue-700);
}

/* ── Pill-overlay multiselect ─────────────────────────────────────
   Mandatory app-wide standard — see HR101BL/CLAUDE.md
   "SfMultiSelect — OBAVEZAN „pill overlay" izgled". 1:1 with
   .pd-rowms* except the height: 34px here, to fit the compact row. */
.pr-rowms-host {
    position: relative;
    width: 100%;
    height: 34px;
}

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

.pr-rowms {
    position: absolute;
    inset: 0;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
    padding: 0 10px;
    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;
}

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

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

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

.pr-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;
}

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

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

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

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

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

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

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

/* Read-only: the control is not rendered at all, the pill is the whole story. */
.pr-rowms--ro {
    background: var(--is-bg-surface-3);
}

.pr-rowms--ro .fa-chevron-down {
    visibility: hidden;
}

@media (max-width: 1400px) {
    .pr-row {
        grid-template-columns: 30px minmax(0, 1fr) 200px auto;
    }
}

@media (max-width: 1200px) {
    .pr-row {
        grid-template-columns: 30px minmax(0, 1fr) 230px auto;
    }
}

@media (max-width: 860px) {
    .pr-row {
        grid-template-columns: 30px minmax(0, 1fr) auto;
        row-gap: 8px;
    }

    .pr-rowms-host {
        grid-column: 1 / -1;
    }
}

/* ── Right panel (detail) ─────────────────────────────────────── */
.pr-rail {
    position: sticky;
    top: 16px;
}

.pr-detail__head {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--is-border-1);
    background: var(--is-bg-surface-2);
}

.pr-detail__ico {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    background: var(--is-brand-blue-700);
    color: #fff;
}

.pr-detail__name {
    font: 600 15px var(--is-font-sans);
    color: var(--is-fg-1);
    margin: 0;
}

.pr-detail__sub {
    font: 500 11px var(--is-font-sans);
    color: var(--is-fg-3);
    margin: 2px 0 0;
}

.pr-detail__intro {
    padding: 11px 20px;
    border-bottom: 1px solid var(--is-border-1);
    font: 500 12px var(--is-font-sans);
    color: var(--is-fg-3);
    line-height: 1.5;
    margin: 0;
}

.pr-detail__body {
    padding: 14px 20px 16px;
    max-height: calc(100vh - 250px);
    overflow: auto;
}

.pr-perm__col {
    border: 1px solid var(--is-border-1);
    border-radius: var(--is-radius-sm);
    padding: 11px 13px 12px;
}

.pr-perm__col + .pr-perm__col {
    margin-top: 11px;
}

.pr-perm__col--can {
    border-color: rgba(31, 138, 91, .28);
    background: rgba(31, 138, 91, .045);
}

.pr-perm__col--cant {
    border-color: rgba(199, 59, 59, .24);
    background: rgba(199, 59, 59, .035);
}

.pr-perm__h {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 8px;
    font: 700 11px var(--is-font-sans);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.pr-perm__col--can .pr-perm__h {
    color: var(--is-success);
}

.pr-perm__col--cant .pr-perm__h {
    color: var(--is-danger);
}

.pr-perm__h span {
    font: 700 10px var(--is-font-mono);
    letter-spacing: 0;
    text-transform: none;
    color: var(--is-fg-3);
    margin-left: auto;
}

.pr-perm__col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.pr-perm__col li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font: 500 12.5px var(--is-font-sans);
    color: var(--is-fg-2);
    line-height: 1.42;
}

.pr-perm__col li > i {
    font-size: 9px;
    margin-top: 4px;
    flex: none;
}

.pr-perm__col--can li > i {
    color: var(--is-success);
}

.pr-perm__col--cant li > i {
    color: var(--is-danger);
}

.pr-tagm {
    font: 600 9px var(--is-font-mono);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--is-fg-3);
    background: var(--is-bg-surface-3);
    border: 1px solid var(--is-border-1);
    border-radius: 4px;
    padding: 1px 4px;
    margin-left: 4px;
    white-space: nowrap;
}

.pr-detail__legend {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 20px;
    border-top: 1px solid var(--is-border-1);
    background: var(--is-bg-surface-2);
}

.pr-lg {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font: 500 11px var(--is-font-sans);
    color: var(--is-fg-3);
}

.pr-st {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
}

.pr-st--ok {
    background: var(--is-success-bg);
    color: var(--is-success);
}

.pr-st--view {
    background: var(--is-bg-surface-3);
    color: var(--is-fg-3);
}

.pr-st--no {
    background: var(--is-danger-bg);
    color: var(--is-danger);
}

/* ── Coverage check ───────────────────────────────────────────── */
.pr-warn__list {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.pr-warn__i {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 8px 11px;
    border-radius: var(--is-radius-sm);
    background: var(--is-danger-bg);
    border: 1px solid rgba(199, 59, 59, .22);
}

.pr-warn__i > i {
    color: var(--is-danger);
    font-size: 12px;
    margin-top: 2px;
    flex: none;
}

.pr-warn__t {
    font: 600 12px var(--is-font-sans);
    color: var(--is-fg-1);
    margin: 0 0 2px;
}

.pr-warn__d {
    font: 500 11px var(--is-font-sans);
    color: var(--is-fg-2);
    margin: 0;
    line-height: 1.45;
}

.pr-warn__ok {
    display: flex;
    align-items: center;
    gap: 8px;
    font: 500 12px var(--is-font-sans);
    color: var(--is-success);
}

/* ── Sticky save bar ──────────────────────────────────────────────
   Same geometry as .pd-footer: left:0 / right:13px leaves room for
   the app's vertical scrollbar. ─────────────────────────────────── */
.pr-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: 11px 28px;
    z-index: 100;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    align-items: center;
}

.pr-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;
}

.pr-footer__status--ro i {
    color: var(--is-warning);
}

.pr-btn {
    height: 36px;
    padding: 0 18px;
    border-radius: var(--is-radius-sm);
    border: 1px solid var(--is-border-2);
    background: #fff;
    color: var(--is-fg-1);
    font: 600 13px var(--is-font-sans);
    cursor: pointer;
    min-width: 130px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
    overflow: hidden;
    max-width: 100%;
}

.pr-btn i {
    flex-shrink: 0;
}

.pr-btn__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.pr-btn:hover {
    background: var(--is-bg-surface-3);
}

.pr-btn--primary {
    background: var(--is-action-blue);
    border-color: var(--is-action-blue);
    color: #fff;
    min-width: 190px;
}

.pr-btn--primary:hover {
    background: var(--is-brand-blue-600);
}

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

.pr-screen .e-input-group.e-input-focus,
.pr-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;
}

.pr-screen .e-input-group input.e-input {
    font: 400 13px 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. */
.pr-screen .e-input-group:not(.e-float-icon-left)::before,
.pr-screen .e-input-group:not(.e-float-icon-left)::after {
    display: none;
}