/* ============================================================
   PBI-6940 · Tablet Kiosk — "Poveži tablet" popup (/kioskdevices-v2)
   Port 1:1 iz design/tablet-kiosk.css (artboard 01, .tk-pop*).
   Tokeni --is-* su globalni (wwwroot/css/colors_and_type.css).
   NE koriste se inline stilovi (HR101BL/CLAUDE.md).
   ============================================================ */

/* fixed overlay backdrop (artboard chrome .tk-web je preview-only; u realnoj
   app-i popup je fiksni overlay preko cijelog ekrana) */
.tk-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(20, 28, 50, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.tk-pop {
    width: 520px;
    max-width: 100%;
    background: var(--is-bg-surface);
    border-radius: 12px;
    box-shadow: var(--is-shadow-pop);
    overflow: hidden;
    font-family: var(--is-font-sans);
    color: var(--is-fg-1);
}

.tk-pop__head {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 15px 20px;
    border-bottom: 1px solid var(--is-border-1);
}

.tk-pop__badge {
    width: 34px;
    height: 34px;
    border-radius: var(--is-radius-sm);
    background: var(--is-brand-blue-100);
    color: var(--is-brand-blue-700);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tk-pop__title { font: 700 15px var(--is-font-sans); }
.tk-pop__sub { font: 500 11px var(--is-font-sans); color: var(--is-fg-3); margin-top: 1px; }
.tk-pop__x { margin-left: auto; color: var(--is-fg-muted); cursor: pointer; }

.tk-pop__body {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tk-bigcode {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--is-bg-surface-3);
    border: 1.5px dashed var(--is-border-3);
    border-radius: var(--is-radius-md);
    padding: 16px;
    font: 700 30px var(--is-font-mono);
    letter-spacing: 0.06em;
    color: var(--is-fg-1);
}

.tk-bigcode__dash { color: var(--is-fg-muted); }

.tk-pop__meta {
    display: flex;
    gap: 9px;
    align-items: center;
    justify-content: center;
    font: 500 12px var(--is-font-sans);
    color: var(--is-fg-2);
    flex-wrap: wrap;
}

.tk-chip {
    background: var(--is-warning-bg);
    color: #7a5b00;
    border-radius: var(--is-radius-pill);
    padding: 3px 10px;
    font: 700 10px var(--is-font-sans);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tk-chip--ok { background: var(--is-success-bg); color: #176a35; }

.tk-i { color: currentColor; opacity: 0.65; font-size: 11px; }

.tk-pop__row { display: flex; gap: 10px; justify-content: center; }

.tk-btn-sm {
    height: 40px;
    padding: 0 16px;
    border-radius: var(--is-radius-sm);
    font: 600 13px var(--is-font-sans);
    border: 1px solid var(--is-border-2);
    background: var(--is-bg-surface);
    color: var(--is-fg-2);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    cursor: pointer;
}

.tk-btn-sm--primary { background: var(--is-brand-blue); border-color: var(--is-brand-blue); color: #fff; }
.tk-btn-sm--danger { background: var(--is-danger); border-color: var(--is-danger); color: #fff; }

.tk-note {
    background: var(--is-bg-surface-3);
    border: 1px solid var(--is-border-1);
    border-radius: var(--is-radius-md);
    padding: 10px 14px;
    font: 400 12px/1.55 var(--is-font-sans);
    color: var(--is-fg-2);
    text-align: left;
    width: 100%;
    box-sizing: border-box;
}

.tk-steps {
    margin: 6px 0 0;
    padding-left: 18px;
    text-align: left;
    font: 400 12px/1.6 var(--is-font-sans);
    color: var(--is-fg-2);
}

.tk-steps li { margin-bottom: 4px; }
.tk-steps b { color: var(--is-fg-1); }

.tk-pop__foot {
    padding: 13px 20px;
    border-top: 1px solid var(--is-border-1);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    background: var(--is-bg-surface-3);
}

/* ============================================================
   PBI 6940 · admin sekcija u popupu: master izlazna lozinka + odparivanje
   (hand-off §03-web-admin). Klase su namespace-ovane tk-* i koriste
   globalne --is-* tokene; nesigurni tokeni imaju fallback vrijednost.
   ============================================================ */

.tk-admin {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.tk-admin__sectitle {
    display: flex;
    align-items: center;
    gap: 10px;
    font: 700 11px var(--is-font-sans);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--is-fg-3);
    margin-top: 2px;
}

    .tk-admin__sectitle::before,
    .tk-admin__sectitle::after {
        content: "";
        flex: 1;
        height: 1px;
        background: var(--is-border-1);
    }

.tk-admin__card {
    border: 1px solid var(--is-border-2);
    border-radius: var(--is-radius-md);
    background: var(--is-bg-surface);
    padding: 13px 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tk-admin__card--danger {
    border-color: var(--is-err-border, #f0c5c5);
    background: var(--is-danger-bg, #fdf3f3);
}

.tk-admin__head {
    display: flex;
    align-items: flex-start;
    gap: 11px;
}

/* Odpari uređaj: ikona + tekst + dugme u jednom redu (dugme desno, ne prelama u novi red) */
.tk-admin__head--inline {
    align-items: center;
}

.tk-admin__inlinebtn {
    flex-shrink: 0;
}

.tk-admin__ico {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: var(--is-radius-sm);
    background: var(--is-brand-blue-100);
    color: var(--is-brand-blue-700);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

.tk-admin__ico--danger {
    background: #f7dcdc;
    color: var(--is-danger);
}

.tk-admin__meta {
    flex: 1;
    min-width: 0;
}

.tk-admin__title {
    font: 700 13px var(--is-font-sans);
    color: var(--is-fg-1);
    display: flex;
    align-items: center;
    gap: 6px;
}

.tk-admin__desc {
    font: 400 11.5px/1.45 var(--is-font-sans);
    color: var(--is-fg-3);
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 7px;
}

.tk-statuschip {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 22px;
    padding: 0 9px;
    border-radius: var(--is-radius-pill);
    font: 700 10px var(--is-font-sans);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

    .tk-statuschip.is-on {
        background: var(--is-success-bg);
        color: #176a35;
    }

    .tk-statuschip.is-off {
        background: var(--is-bg-surface-3);
        color: var(--is-fg-3);
    }

.tk-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    flex-shrink: 0;
}

    .tk-dot.is-on {
        background: #23a35a;
    }

    .tk-dot.is-off {
        background: var(--is-fg-muted);
    }

.tk-admin__form {
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
}

.tk-field {
    flex: 1 1 190px;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--is-border-2);
    border-radius: var(--is-radius-sm);
    background: var(--is-bg-surface);
}

    .tk-field:focus-within {
        border-color: var(--is-brand-blue-300, #7fc3e8);
        box-shadow: 0 0 0 2px rgba(4, 148, 218, 0.10);
    }

.tk-field__ico {
    color: var(--is-fg-muted);
    font-size: 13px;
    flex-shrink: 0;
}

.tk-input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font: 500 13px var(--is-font-sans);
    color: var(--is-fg-1);
}

.tk-inline-err {
    display: flex;
    align-items: center;
    gap: 7px;
    font: 500 12px var(--is-font-sans);
    color: var(--is-danger);
}

.tk-admin__action {
    display: flex;
    justify-content: flex-end;
}

.tk-btn-sm[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

.tk-btn-sm--danger-outline {
    background: var(--is-bg-surface);
    border-color: var(--is-danger);
    color: var(--is-danger);
}

/* Potvrda odparivanja — moderni in-app confirm iznad "Poveži tablet" popupa */
.tk-confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 10010;
    background: rgba(20, 28, 50, 0.50);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.tk-confirm {
    width: 400px;
    max-width: 100%;
    background: var(--is-bg-surface);
    border-radius: 12px;
    box-shadow: var(--is-shadow-pop);
    padding: 24px;
    text-align: center;
    font-family: var(--is-font-sans);
    color: var(--is-fg-1);
}

.tk-confirm__icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 12px;
    border-radius: 999px;
    background: #f7dcdc;
    color: var(--is-danger);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.tk-confirm__title {
    font: 700 16px var(--is-font-sans);
    color: var(--is-fg-1);
}

.tk-confirm__body {
    font: 400 13px/1.55 var(--is-font-sans);
    color: var(--is-fg-2);
    margin-top: 8px;
}

    .tk-confirm__body b {
        color: var(--is-fg-1);
    }

.tk-confirm__foot {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}