/* Phase 4 — Editing-Locks (2026-05-27)
 *
 * Visualisierung gesperrter Eingabefelder: Graustufe, Schloss-Icon,
 * Tooltip mit Anzeigename + Startzeit + Geraet.
 *
 * Phase 5 (2026-05-27) — Tokens `--ctr-lock-*` pro [data-bs-theme] fuer
 * konsistente Light/Dark-Optik. Werte sind aus den Bootstrap-Tokens
 * abgeleitet, koennen aber pro Theme einzeln ueberschrieben werden.
 */

:root,
html[data-bs-theme="light"] {
    --ctr-lock-bg: var(--bs-secondary-bg, #e9ecef);
    --ctr-lock-fg: var(--bs-secondary-color, #6c757d);
    --ctr-lock-icon-bg: rgba(220, 53, 69, 0.12);
    --ctr-lock-icon-fg: #b02a37;
    --ctr-lock-icon-border: rgba(176, 42, 55, 0.25);
}

html[data-bs-theme="dark"],
html[data-theme="dark"] {
    --ctr-lock-bg: var(--bs-tertiary-bg, #2b3035);
    --ctr-lock-fg: var(--bs-tertiary-color, #adb5bd);
    --ctr-lock-icon-bg: rgba(248, 113, 113, 0.18);
    --ctr-lock-icon-fg: #f87171;
    --ctr-lock-icon-border: rgba(248, 113, 113, 0.3);
}

.ctr-field-locked {
    filter: grayscale(1) brightness(0.95);
    background-color: var(--ctr-lock-bg) !important;
    color: var(--ctr-lock-fg) !important;
    cursor: not-allowed !important;
    pointer-events: none;
    opacity: 0.85;
}

.ctr-field-locked::placeholder {
    color: var(--ctr-lock-fg) !important;
    opacity: 0.7;
}

.ctr-field-lock-icon {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--ctr-lock-icon-bg);
    color: var(--ctr-lock-icon-fg);
    font-size: 0.85rem;
    cursor: help;
    pointer-events: auto;
    box-shadow: 0 0 0 1px var(--ctr-lock-icon-border);
}

.ctr-field-lock-icon i {
    line-height: 1;
}

/* Etwas Luft, damit das Icon nicht ueber Bootstrap-Validation-Icons liegt */
.has-validation .ctr-field-lock-icon,
.input-group .ctr-field-lock-icon {
    right: 2.25rem;
}