/* ──────────────────────────────────────────────────────────
   Kiosk Devices V2
   · Grid  (KioskDevicesV2.razor) — page-scoped kdv-* cell atoms on top of the
     shared cc-* chrome (redesign-competences.css) + dl-* atoms
     (redesign-departments-list.css). Same shell as ProjectStatusesV2.
   · Popup (EditKioskDevicePopupV2.razor) — self-contained kd-* 2-tab dialog
     (device fields + kiosk-option toggles + geofence map), matching the mock
     Claude Documentation/projects/app-redesign/KioskDevices/KioskDevices.html
   Shared tokens come from insync-tokens.css (--is-*).
   ────────────────────────────────────────────────────────── */

/* ============================================================
   A · GRID (page-scoped, on top of shared cc-/dl- chrome)
   ============================================================ */

/* Full-width, left-aligned (hug the nav) — mirrors .el-screen / .ps-screen.
   The shared .cc-screen centres at max-width:1680px; this page opts out. */
.cc-screen.kdv-screen { max-width: none; margin: 0; }

/* Sub-meta line under the title */
.kdv-subtext {
    font: 500 13px var(--is-font-sans, "Plus Jakarta Sans", system-ui, sans-serif);
    color: var(--is-fg-3, #76767E);
    margin-top: 4px;
}
.kdv-subtext b { color: var(--is-fg-1, #1A1A1F); font-weight: 700; }

/* Device identity cell (tablet avatar + name) */
.kdv-device { display: flex; align-items: center; gap: 11px; min-width: 0; cursor: pointer; }
.kdv-device__ava {
    width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center; font-size: 15px;
    background: var(--is-brand-blue-100, #E6F2FF); color: var(--is-brand-blue-700, #0056B3);
}
.kdv-device__ava.is-off { background: var(--is-bg-surface-3, #F2F3F5); color: var(--is-fg-3, #76767E); }
.kdv-device__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;
}
.kdv-device:hover .kdv-device__title { color: var(--is-brand-blue-700, #0056B3); }

/* Public identifier — mono chip + copy */
.kdv-pid { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.kdv-pid__val {
    font: 600 11.5px var(--is-font-mono, "JetBrains Mono", monospace);
    color: var(--is-fg-2, #404048); background: var(--is-bg-surface-3, #F2F3F5);
    border: 1px solid var(--is-border-1, #E5E5EA); border-radius: 4px; padding: 2px 7px;
    font-variant-numeric: tabular-nums; letter-spacing: .02em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px;
}
.kdv-pid__copy {
    width: 24px; height: 24px; border-radius: 5px; border: 1px solid transparent;
    background: transparent; color: var(--is-fg-3, #76767E); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; font-size: 11px; flex-shrink: 0;
}
.kdv-pid__copy:hover { background: var(--is-bg-surface-3, #F2F3F5); color: var(--is-brand-blue, #007BFF); border-color: var(--is-border-2, #D1D1D6); }

/* Address cell */
.kdv-addr {
    display: inline-flex; align-items: center; gap: 7px;
    font: 500 12.5px var(--is-font-sans, "Plus Jakarta Sans", system-ui, sans-serif);
    color: var(--is-fg-2, #404048); min-width: 0;
}
.kdv-addr i { font-size: 11px; color: var(--is-fg-3, #76767E); flex-shrink: 0; }
.kdv-addr span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kdv-addr.is-empty { color: var(--is-fg-muted, #AAB1BA); font-style: italic; }

/* Created date — mono */
.kdv-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;
}

/* Status chip */
.kdv-chip {
    display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px;
    border-radius: 999px; font: 600 11.5px var(--is-font-sans, "Plus Jakarta Sans", system-ui, sans-serif); white-space: nowrap;
}
.kdv-chip::before { content: ''; width: 7px; height: 7px; border-radius: 999px; background: currentColor; flex-shrink: 0; }
.kdv-chip.is-active { background: var(--is-success-bg, #E6F4EC); color: var(--is-success, #1F8A5B); }
.kdv-chip.is-disabled { background: var(--is-danger-bg, #FBEAEA); color: var(--is-danger, #C73B3B); }

/* Geolocation cell */
.kdv-geo { display: inline-flex; align-items: center; gap: 6px; font: 600 12px var(--is-font-sans, "Plus Jakarta Sans", system-ui, sans-serif); }
.kdv-geo.is-on, .kdv-geo.is-on i { color: var(--is-brand-orange-600, #D17D14); }
.kdv-geo.is-off { color: var(--is-fg-3, #76767E); font-weight: 500; }
.kdv-geo.is-off i { color: var(--is-border-2, #D1D1D6); }

/* Open-kiosk action — info-blue hover on the shared dl-iconbtn */
.dl-iconbtn.kdv-iconbtn--open:hover {
    background: rgba(13,143,217,.10);
    color: var(--is-info, #0D8FD9);
    border-color: rgba(13,143,217,.25);
}

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

/* Filter-bar action group (Traži + Poništi) — inline on desktop */
.kdv-actionrow { display: inline-flex; gap: 8px; align-items: center; }

/* Mobile: the shared filter bar becomes a 2-col grid; make the action group
   span the full width and stack its buttons so each is 100% wide, like the
   search box and filter pills above it. */
@media (max-width: 600px) {
    .cc-filterbar__row > .kdv-actionrow {
        grid-column: 1 / -1;
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }
    .cc-filterbar__row > .kdv-actionrow .cc-btn {
        width: 100%;
        justify-content: center;
        height: 40px;
    }
}

/* ============================================================
   B · POPUP (self-contained kd-* dialog — add/edit + restriction)
   ============================================================ */

.kd-btn { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: var(--is-radius-sm); border: 1px solid transparent; font: 600 13px var(--is-font-sans); cursor: pointer; white-space: nowrap; transition: background .12s, color .12s, border-color .12s; }
.kd-btn i { font-size: 12px; }
.kd-btn--primary { background: var(--is-brand-blue); color: #fff; border-color: var(--is-brand-blue); }
.kd-btn--primary:hover { background: var(--is-brand-blue-700); border-color: var(--is-brand-blue-700); }
.kd-btn--ghost { background: #fff; color: var(--is-fg-2); border-color: var(--is-border-3); }
.kd-btn--ghost:hover { background: var(--is-bg-surface-3); color: var(--is-fg-1); }
.kd-btn--danger { background: var(--is-danger); color: #fff; border-color: var(--is-danger); }
.kd-btn--danger:hover { background: #b51e1e; border-color: #b51e1e; }

/* Popup chrome */
.kd-modal-overlay { position: fixed; inset: 0; z-index: 1060; display: flex; align-items: center; justify-content: center; overflow-y: auto; padding: 24px 16px; }
.kd-pop-scrim { position: fixed; inset: 0; background: rgba(20,28,50,.50); backdrop-filter: blur(2px); }
.kd-pop { position: relative; z-index: 1; background: #fff; border-radius: var(--is-radius-lg); box-shadow: 0 20px 60px rgba(8,12,36,.30); display: flex; flex-direction: column; max-height: 92vh; overflow: hidden; max-width: 95vw; margin: 0 auto; }
.kd-pop--xl { width: 1000px; }
.kd-pop--sm { width: 480px; }
.kd-pop__head { display: flex; align-items: center; gap: 14px; padding: 16px 22px; border-bottom: 1px solid var(--is-border-1); background: var(--is-bg-surface); flex-shrink: 0; }
.kd-pop__head-icon { width: 36px; height: 36px; border-radius: var(--is-radius-sm); background: var(--is-brand-blue-100); color: var(--is-brand-blue); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.kd-pop__head-icon--danger { background: var(--is-danger-bg); color: var(--is-danger); }
.kd-pop__head-title { flex: 1; min-width: 0; }
.kd-pop__head-title h2 { font: 700 17px var(--is-font-sans); margin: 0; letter-spacing: -.01em; }
.kd-pop__head-title p { font: 500 12.5px var(--is-font-sans); color: var(--is-fg-3); margin: 2px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kd-pop__head-title p b { color: var(--is-fg-1); font-weight: 700; }
.kd-pop__head-close { width: 32px; height: 32px; border-radius: var(--is-radius-sm); border: 1px solid transparent; background: transparent; color: var(--is-fg-3); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.kd-pop__head-close:hover { background: var(--is-bg-surface-3); color: var(--is-fg-1); }
.kd-pop__body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 24px 20px; }
.kd-pop__foot { display: flex; align-items: center; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--is-border-1); background: var(--is-bg-surface); flex-shrink: 0; }
.kd-pop__foot-left { flex: 1; min-width: 0; font: 500 12px var(--is-font-sans); color: var(--is-fg-3); display: flex; align-items: center; gap: 6px; }
.kd-pop__foot-left i { color: var(--is-brand-blue); }
.kd-pop__foot-left b { color: var(--is-fg-1); }
.kd-pop__foot-right { display: flex; gap: 10px; flex-shrink: 0; }

/* Tabs */
.kd-tabs { display: flex; gap: 4px; padding: 4px 0 0; border-bottom: 1px solid var(--is-border-1); position: sticky; top: 0; background: #fff; z-index: 2; }
.kd-tab { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border: 0; background: transparent; font: 600 13.5px var(--is-font-sans); color: var(--is-fg-3); cursor: pointer; position: relative; }
.kd-tab i { font-size: 13px; }
.kd-tab:hover { color: var(--is-fg-1); }
.kd-tab.is-active { color: var(--is-brand-blue-700); }
.kd-tab.is-active::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; background: var(--is-brand-blue); border-radius: 2px 2px 0 0; }

/* Form atoms */
.kd-section-label { font: 600 11px var(--is-font-sans); color: var(--is-fg-3); text-transform: uppercase; letter-spacing: .06em; margin: 22px 0 12px; display: flex; align-items: center; gap: 8px; }
.kd-section-label i { font-size: 10px; color: var(--is-fg-3); }
.kd-section-label::after { content: ''; flex: 1; height: 1px; background: var(--is-border-1); margin-left: 4px; }
.kd-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.kd-field__label { font: 600 11.5px var(--is-font-sans); color: var(--is-fg-2); display: flex; align-items: center; gap: 4px; }
.kd-field__label .req { color: var(--is-danger); }
.kd-input { height: 36px; padding: 0 12px; border: 1px solid var(--is-border-3); border-radius: var(--is-radius-sm); background: #fff; font: 500 13.5px var(--is-font-sans); color: var(--is-fg-1); width: 100%; }
.kd-input::placeholder { color: var(--is-fg-muted); }
.kd-input:focus { outline: none; border-color: var(--is-action-blue); box-shadow: 0 0 0 3px rgba(0,123,255,.15); }
.kd-input--search { padding-left: 34px; }
.kd-inwrap { position: relative; }
.kd-inwrap > i.lead { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--is-fg-3); font-size: 12px; pointer-events: none; }
.kd-pid-readonly { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 6px 0 12px; border: 1px solid var(--is-border-2); border-radius: var(--is-radius-sm); background: var(--is-bg-surface-3); }
.kd-pid-readonly span { flex: 1; font: 600 12.5px var(--is-font-mono); color: var(--is-fg-2); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kd-pid-readonly button { width: 28px; height: 28px; border-radius: 5px; border: 1px solid var(--is-border-2); background: #fff; color: var(--is-fg-3); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; flex-shrink: 0; }
.kd-pid-readonly button:hover { color: var(--is-brand-blue); }

.kd-grid { display: grid; gap: 14px 18px; }
.kd-grid--2 { grid-template-columns: 1fr 1fr; }

.kd-note { display: flex; gap: 8px; align-items: flex-start; font: 500 12px var(--is-font-sans); color: var(--is-fg-3); margin-top: 8px; }
.kd-note i { color: var(--is-info); margin-top: 2px; }

/* Toggle rows */
.kd-toggle-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--is-border-2); border-radius: var(--is-radius-sm); background: var(--is-bg-surface); }
.kd-toggle-row + .kd-toggle-row { margin-top: 8px; }
.kd-toggle-row__lbl { font: 600 13px var(--is-font-sans); color: var(--is-fg-1); display: flex; align-items: center; gap: 7px; }
.kd-toggle-row__lbl i { color: var(--is-fg-3); font-size: 12px; }
.kd-toggle-row__sub { font: 500 11.5px/1.45 var(--is-font-sans); color: var(--is-fg-3); margin-top: 3px; display: block; max-width: 620px; }
.kd-switch { position: relative; width: 38px; height: 22px; background: var(--is-border-2); border-radius: 999px; cursor: pointer; transition: background .15s; flex-shrink: 0; border: 0; padding: 0; }
.kd-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background: #fff; border-radius: 999px; transition: transform .15s; box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.kd-switch.is-on { background: var(--is-brand-blue); }
.kd-switch.is-on::after { transform: translateX(16px); }
.kd-switch.is-warn.is-on { background: var(--is-brand-orange); }
.kd-switch.is-danger.is-on { background: var(--is-danger); }

/* Disabled (status) toggle — emphasized */
.kd-toggle-row--status { background: var(--is-danger-bg); border-color: #f3c2c2; }
.kd-toggle-row--status .kd-toggle-row__lbl i { color: var(--is-danger); }

/* Restriction tab */
.kd-restrict-head { display: flex; align-items: flex-start; gap: 14px; justify-content: space-between; margin: 18px 0 14px; flex-wrap: wrap; }
.kd-restrict-head p { font: 500 12.5px/1.55 var(--is-font-sans); color: var(--is-fg-3); margin: 0; flex: 1 1 420px; max-width: 640px; }
.kd-restrict-toggle { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--is-border-2); border-radius: var(--is-radius-sm); background: var(--is-bg-surface); flex-shrink: 0; }
.kd-restrict-toggle__lbl { font: 600 12.5px var(--is-font-sans); color: var(--is-fg-1); display: inline-flex; align-items: center; gap: 6px; }
.kd-restrict-toggle__lbl i { color: var(--is-brand-blue); font-size: 11px; }
.kd-restrict-validation { font: 600 12px var(--is-font-sans); color: var(--is-danger); margin-bottom: 10px; }
.kd-mapsearch { position: relative; margin-bottom: 10px; }
.kd-mapsearch > i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--is-fg-3); font-size: 12px; z-index: 1; }
.kd-mapsearch input { width: 100%; height: 38px; padding: 0 12px 0 34px; border: 1px solid var(--is-border-3); border-radius: var(--is-radius-sm); background: #fff; font: 500 13px var(--is-font-sans); }
.kd-mapsearch input:focus { outline: none; border-color: var(--is-action-blue); box-shadow: 0 0 0 3px rgba(0,123,255,.15); }

/* Real Google Maps host — sized to fill the popup height so the dialog itself
   never scrolls. Height tracks the viewport (popup is max 92vh) minus the fixed
   chrome above/below the map (header + tabs + restriction head + search + footer
   ≈ 340px); shrinks on short laptop screens, capped on large monitors. */
.kd-map { position: relative; height: calc(92vh - 340px); min-height: 240px; max-height: 600px; border-radius: var(--is-radius-md); overflow: hidden; border: 1px solid var(--is-border-2); background: var(--is-bg-surface-3); }
.kd-map.is-disabled { filter: grayscale(.6) opacity(.55); pointer-events: none; }
.kd-map__badge { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px; border-radius: 999px; background: rgba(255,255,255,.95); border: 1px solid var(--is-border-2); font: 600 11.5px var(--is-font-sans); color: var(--is-success); box-shadow: var(--is-shadow-1); z-index: 1; }

/* Delete confirm (kd-pop--sm) — centered danger icon + question + body */
.kd-confirm { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 8px 14px 6px; }
.kd-confirm__icon { width: 56px; height: 56px; border-radius: 50%; background: var(--is-danger-bg); color: var(--is-danger); display: inline-flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 14px; }
.kd-confirm h3 { font: 700 17px var(--is-font-sans); color: var(--is-fg-1); margin: 0 0 6px; }
.kd-confirm p { font: 500 13px/1.5 var(--is-font-sans); color: var(--is-fg-2); margin: 0; max-width: 400px; }
.kd-confirm p b { color: var(--is-fg-1); font-weight: 700; }

/* Google Places autocomplete dropdown above the modal */
.pac-container { z-index: 100000 !important; }

@media (max-width: 640px) {
    .kd-grid--2 { grid-template-columns: 1fr; }
    .kd-pop--xl, .kd-pop--sm { width: 100%; }
}