/*
 * ORAGO — state & behaviour components (UI_HANDOVER §8)
 * Lock bar · Simulation ribbon · Terminal watermark · Recalc strip · Dirty indicator · Cheat-sheet overlay
 */

/* ===== Lock bar ===== */
.lockbar {
    margin: var(--sp-3) 0;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 36px;
    padding: var(--sp-2) var(--sp-3);
    border-radius: 4px;
    font-size: var(--fs-small);
    font-weight: 500;
    border: 1px solid;
}
.lockbar .dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: currentColor; flex-shrink: 0;
}
.lockbar .sep { color: var(--orago-text-soft); }
.lockbar .hb {
    margin-left: auto;
    font-family: var(--ds-font-mono);
    font-size: var(--fs-micro);
    opacity: 0.85;
}
.lockbar button {
    border: 1px solid currentColor;
    background: transparent;
    color: inherit;
    padding: var(--sp-1) var(--sp-2);
    border-radius: 3px;
    font-size: var(--fs-small);
    cursor: pointer;
    font-weight: 600;
    font-family: inherit;
    flex-shrink: 0;
}
.lockbar button:hover { background: rgba(255, 255, 255, 0.15); }

.lockbar.unlocked  { background: var(--state-ok-bg);       color: var(--state-ok-fg);       border-color: var(--state-ok-fg); }
.lockbar.locked-me { background: var(--state-locked-bg);   color: var(--state-locked-fg);   border-color: var(--state-locked-fg); }
.lockbar.locked-other { background: var(--state-warn-bg);  color: var(--state-warn-fg);     border-color: var(--state-warn-fg); }
.lockbar.blocked   { background: var(--state-terminal-bg); color: var(--state-terminal-fg); border-color: var(--state-terminal-fg); cursor: help; }
.lockbar.acquiring { background: var(--orago-bg);          color: var(--orago-text-muted);  border-color: var(--orago-border-strong); }
.lockbar.acquiring .dot { animation: lockbar-pulse 1s ease-in-out infinite; }
@keyframes lockbar-pulse {
    0%, 100% { opacity: 0.3; }
    50%      { opacity: 1; }
}

/* Compact variant — for use inside table cells (e.g. BOM grid lock column).
   Hides verbose labels; full text moves to the title tooltip. */
.lockbar.compact {
    margin: 0;
    min-height: 26px;
    padding: 2px var(--sp-2);
    gap: 6px;
    font-size: var(--fs-micro);
    border-radius: 3px;
}
.lockbar.compact button {
    padding: 1px 6px;
    font-size: var(--fs-micro);
}
.lockbar.compact .hb {
    margin-left: 0;
    font-size: var(--fs-micro);
}
.lockbar.compact .lockbar-compact-holder {
    font-size: var(--fs-micro);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 80px;
}

/* ===== Simulation ribbon ===== */
.sim-ribbon {
    background: var(--state-sim-bg);
    color: var(--state-sim-fg);
    padding: 8px 16px;
    font-size: var(--fs-small);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--state-sim-fg);
}
.sim-ribbon .exp { font-weight: 400; opacity: 0.9; }
.sim-ribbon .actions { margin-left: auto; display: flex; gap: 6px; }
.sim-ribbon button {
    border: 1px solid var(--state-sim-fg);
    background: transparent;
    color: var(--state-sim-fg);
    padding: 3px 10px;
    border-radius: 3px;
    font-size: var(--fs-small);
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}
.sim-ribbon button.primary {
    background: var(--state-sim-fg);
    color: var(--neutral-0);
}

/* ===== Maintenance ribbon (admin §07-1) ===== */
/* Reuses the simulation-ribbon shape with the danger tone so users see it at
   a glance. Lives above the topbar; rendered only when SystemConfig.MaintenanceMode is true. */
.maintenance-ribbon {
    background: var(--state-warn-bg);
    color: var(--state-warn-fg);
    padding: 6px 16px;
    font-size: var(--fs-small);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--state-warn-fg);
}
.maintenance-ribbon .msg { font-weight: 400; opacity: 0.95; }

/* Purple body tint when in simulation mode — ~5% opacity per §8.2 */
.workspace.sim-mode {
    background-image: linear-gradient(var(--state-sim-bg), var(--state-sim-bg));
    background-blend-mode: multiply;
    background-color: var(--orago-bg);
}

/* ===== Terminal watermark ===== */
.terminal-scope { position: relative; }
.terminal-watermark {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}
.terminal-watermark span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-22deg);
    font-size: 92px;
    font-weight: 700;
    letter-spacing: 12px;
    color: var(--state-terminal-fg);
    opacity: 0.08;
    text-transform: uppercase;
    white-space: nowrap;
    user-select: none;
}

.terminal-scope input,
.terminal-scope select,
.terminal-scope textarea {
    border-color: transparent !important;
    background: var(--state-terminal-bg) !important;
    color: var(--state-terminal-fg) !important;
}

/* ===== Recalc strip ===== */
.recalc-strip {
    padding: 6px 16px;
    background: var(--orago-primary-soft);
    color: var(--orago-primary);
    font-size: var(--fs-small);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--orago-primary);
    position: relative;
    overflow: hidden;
}
.recalc-strip .recalc-detail { font-weight: 400; margin-left: 8px; }
.recalc-strip::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--orago-primary) 50%,
        transparent 100%);
    background-size: 50% 100%;
    background-repeat: no-repeat;
    animation: recalc-shimmer 1.2s linear infinite;
}
@keyframes recalc-shimmer {
    0%   { background-position: -50% 0; }
    100% { background-position: 150% 0; }
}
.recalc-inline {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--orago-primary);
    font-size: var(--fs-micro);
}
.recalc-inline .spinner { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== Dirty indicator ===== */
.dirty-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px 4px 10px;
    background: var(--state-warn-bg);
    color: var(--state-warn-fg);
    border: 1px solid var(--state-warn-fg);
    border-radius: 3px;
    font-size: var(--fs-small);
    font-weight: 600;
}
.dirty-pill .count { font-variant-numeric: tabular-nums; }
.dirty-pill .actions { display: flex; gap: 4px; margin-left: 4px; }
.dirty-pill button {
    border: 1px solid currentColor;
    background: transparent;
    color: inherit;
    padding: 1px 6px;
    border-radius: 2px;
    font-size: var(--fs-micro);
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}

.field-dirty { border-left: 2px solid var(--state-warn-fg); padding-left: 8px; }

.autosave-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--fs-micro);
    color: var(--orago-text-muted);
}
.autosave-indicator.saving svg { animation: spin 1s linear infinite; }
.autosave-indicator.saved { color: var(--state-ok-fg); }

/* ===== Form primitives ===== */
.form-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.form-field > label {
    font-size: var(--fs-small);
    font-weight: 500;
    color: var(--orago-text);
}
.form-field > label .required { color: var(--state-danger-fg); margin-left: 2px; }
.form-field .helper {
    font-size: var(--fs-micro);
    color: var(--orago-text-muted);
}
.form-field .error {
    font-size: var(--fs-micro);
    color: var(--state-danger-fg);
    font-weight: 500;
}
.form-field.has-error > input,
.form-field.has-error > select,
.form-field.has-error > textarea,
.form-field.has-error .input-wrap { border-color: var(--state-danger-fg); }

.input-base,
.input-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
    border: 1px solid var(--orago-border-strong);
    background: var(--orago-surface);
    border-radius: 3px;
    padding: 4px 8px;
    font-size: var(--fs-small);
    min-height: 30px;
}
.input-wrap input {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--orago-text);
    font-family: var(--ds-font-mono);
    font-feature-settings: "tnum";
    min-width: 0;
    padding: 0;
    font-size: var(--fs-small);
}
.input-wrap input:disabled { color: var(--orago-text-soft); cursor: not-allowed; }
.input-wrap .suffix {
    color: var(--orago-text-muted);
    font-family: var(--ds-font-mono);
    font-size: var(--fs-small);
    user-select: none;
}
.input-wrap:focus-within {
    outline: 2px solid var(--orago-primary);
    outline-offset: 1px;
}

/* ===== Cheat-sheet overlay ===== */
.cheatsheet-backdrop {
    position: fixed; inset: 0;
    background: rgba(15, 20, 27, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.cheatsheet {
    background: var(--orago-surface);
    border: 1px solid var(--orago-border-strong);
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    width: min(640px, calc(100vw - 48px));
    max-height: 80vh;
    overflow-y: auto;
    padding: 18px 22px;
}
.cheatsheet h2 {
    margin: 0 0 12px;
    font-size: var(--fs-h1);
    display: flex;
    align-items: center;
    gap: 8px;
}
.cheatsheet-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 16px;
    font-size: var(--fs-small);
}
.cheatsheet-grid dt {
    font-family: var(--ds-font-mono);
    background: var(--orago-bg);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: var(--fs-micro);
    border: 1px solid var(--orago-border);
    white-space: nowrap;
}
.cheatsheet-grid .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0;
    border-bottom: 1px solid var(--orago-border);
}