@import "./_periodic-check-timing.css";
@import "./_periodic-check-layer.css";

/**
 * Periodic Check (kontrollimõõt) — badge + modal styles.
 *
 * Theme-aware via the KIOSK dash tokens (--color-dash-*, defined in
 * _dash-tokens.css: dark by default, light via .light-theme on <html>).
 * NB: the main app's --color-* variables do NOT exist in the kiosks — using
 * them here silently falls back to light values on the dark theme (the
 * white-modal-on-dark bug fixed 2026-07-13). Loaded by both kiosks.
 */

/* Badge in entry view header */
.periodic-check-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.7rem;
    border-radius: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid var(--color-dash-border, #334155);
    background: var(--color-dash-card-hover, #334155);
    color: var(--color-dash-text-primary, #f8fafc);
    cursor: pointer;
    transition: background 120ms;
}
.periodic-check-badge:hover {
    filter: brightness(1.1);
}
.periodic-check-badge--overdue {
    background: color-mix(in srgb, var(--color-dash-danger, #ef4444) 18%, transparent);
    color: var(--periodic-check-danger-text);
    border-color: color-mix(in srgb, var(--color-dash-danger, #ef4444) 45%, transparent);
    animation: periodic-check-pulse 1.6s infinite;
}
.periodic-check-badge--ok {
    background: color-mix(in srgb, var(--color-dash-success, #10b981) 15%, transparent);
    color: var(--color-dash-success, #10b981);
    border-color: color-mix(in srgb, var(--color-dash-success, #10b981) 40%, transparent);
}
.periodic-check-badge--warning {
    background: color-mix(in srgb, var(--color-dash-warning, #f59e0b) 18%, transparent);
    color: var(--periodic-check-warning-text);
    border-color: color-mix(in srgb, var(--color-dash-warning, #f59e0b) 45%, transparent);
}
.periodic-check-badge:disabled {
    cursor: not-allowed;
}

@keyframes periodic-check-pulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-dash-danger, #ef4444) 60%, transparent); }
    50% { box-shadow: 0 0 0 6px transparent; }
}

/* Modal */
.periodic-check-modal {
    background: var(--color-dash-card, #1e293b);
    color: var(--color-dash-text-primary, #f8fafc);
    border: 1px solid var(--color-dash-border, #334155);
}
.periodic-check-modal__header,
.periodic-check-modal__footer {
    border-color: var(--color-dash-border, #334155);
}
.periodic-check-modal__hint {
    color: var(--color-dash-text-secondary, #94a3b8);
}
.periodic-check-modal__warning {
    color: var(--periodic-check-warning-text);
    border-left: 3px solid var(--color-dash-warning, #f59e0b);
    padding-left: 0.6rem;
}
.periodic-check-modal__label {
    color: var(--color-dash-text-muted, #64748b);
}
.periodic-check-modal__minmax {
    color: var(--color-dash-text-muted, #64748b);
    margin-left: 0.25rem;
}
.periodic-check-modal__unit {
    background: var(--color-dash-card-hover, #334155);
    color: var(--color-dash-text-secondary, #94a3b8);
    border-color: var(--color-dash-border, #334155);
}
.periodic-check-input {
    /* !important: the main app's _dark-overrides.css (imported via theme.css)
       styles ALL inputs under prefers-color-scheme:dark with a high-specificity
       html:not([data-theme=...]) selector that ignores the KIOSK theme toggle
       (.light-theme). These must win so the field follows the kiosk theme. */
    background: var(--color-dash-bg, #0f172a) !important;
    color: var(--color-dash-text-primary, #f8fafc) !important;
    border-color: var(--color-dash-border, #334155) !important;
}
.periodic-check-input:focus {
    outline: 2px solid var(--color-dash-success, #10b981);
    outline-offset: -1px;
}
.periodic-check-btn-cancel {
    background: var(--color-dash-card-hover, #334155);
    color: var(--color-dash-text-primary, #f8fafc);
}
.periodic-check-btn-cancel:hover {
    filter: brightness(1.1);
}
.periodic-check-btn-save {
    background: var(--color-dash-success, #10b981);
    color: #052e1b;
}
.periodic-check-btn-save:hover {
    filter: brightness(1.1);
}

/* Min/Max range toggle (per-row in modal) */
.periodic-check-range-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2rem;
    padding: 0 0.6rem;
    border-radius: 0.375rem;
    border: 1px solid var(--color-dash-border, #334155);
    background: var(--color-dash-card-hover, #334155);
    color: var(--color-dash-text-secondary, #94a3b8);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.periodic-check-range-toggle:hover {
    filter: brightness(1.1);
}
.periodic-check-range-toggle--active {
    background: color-mix(in srgb, var(--color-dash-success, #10b981) 18%, transparent);
    color: var(--color-dash-success, #10b981);
    border-color: color-mix(in srgb, var(--color-dash-success, #10b981) 45%, transparent);
}
.periodic-check-range-toggle--active:hover {
    filter: brightness(1.1);
}

/* Timeline row in scrap log */
.periodic-check-event {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    background: color-mix(in srgb, var(--color-dash-success, #10b981) 8%, transparent);
    color: var(--color-dash-text-primary, #f8fafc);
    border-left: 3px solid var(--color-dash-success, #10b981);
    margin: 0.25rem 0;
    font-size: 0.875rem;
}

.periodic-check-event--neutral {
    background: color-mix(in srgb, var(--color-dash-text-secondary) 8%, transparent);
    color: var(--color-dash-text-secondary);
    border-left-color: var(--color-dash-text-secondary);
}

.periodic-check-event--overdue {
    background: var(--color-danger-bg);
    color: var(--color-danger-text);
    border-left-color: var(--color-danger);
}

[x-cloak] { display: none !important; }

/* Plan mode (Mõõtmisplaan Phase 2) — section headers, pass/fail, tolerance warn */
.periodic-check-section {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--color-dash-text-secondary, #94a3b8);
    border-bottom: 1px solid var(--color-dash-border, #334155);
    padding-bottom: 0.2rem;
    margin-top: 0.5rem;
}
.periodic-check-section--overdue {
    color: var(--periodic-check-danger-text);
    border-bottom-color: color-mix(in srgb, var(--color-dash-danger, #ef4444) 45%, transparent);
}
.periodic-check-section--warning {
    color: var(--periodic-check-warning-text);
    border-bottom-color: color-mix(in srgb, var(--color-dash-warning, #f59e0b) 45%, transparent);
}
.periodic-check-row--overdue {
    border-left: 3px solid var(--color-dash-danger, #ef4444);
    background: color-mix(in srgb, var(--color-dash-danger, #ef4444) 7%, transparent);
    border-radius: 0.375rem;
    padding: 0.25rem 0.25rem 0.25rem 0.5rem;
}
.periodic-check-row--overdue .periodic-check-input {
    border-color: color-mix(in srgb, var(--color-dash-danger, #ef4444) 45%, transparent);
}
.periodic-check-passfail {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2rem;
    min-width: 3.2rem;
    padding: 0 0.6rem;
    border-radius: 0.375rem;
    border: 1px solid var(--color-dash-border, #334155);
    background: var(--color-dash-card-hover, #334155);
    color: var(--color-dash-text-secondary, #94a3b8);
    font-size: 0.8rem;
    font-weight: 700;
}
.periodic-check-passfail--ok {
    background: color-mix(in srgb, var(--color-dash-success, #10b981) 18%, transparent);
    color: var(--color-dash-success, #10b981);
    border-color: color-mix(in srgb, var(--color-dash-success, #10b981) 50%, transparent);
}
.periodic-check-passfail--nok {
    background: color-mix(in srgb, var(--color-dash-danger, #ef4444) 18%, transparent);
    color: var(--color-dash-danger, #ef4444);
    border-color: color-mix(in srgb, var(--color-dash-danger, #ef4444) 50%, transparent);
}
.periodic-check-input--warn {
    border-color: var(--color-dash-danger, #ef4444) !important;
    color: var(--color-dash-danger, #ef4444);
}
.periodic-check-guidance {
    font-size: 0.7rem;
    color: var(--color-dash-text-muted, #64748b);
    padding-left: 0.25rem;
}

/* ===================================================================
   Out-of-tolerance measurement alert banner (measurement-alert-banner.js).
   Fixed under the top bar; stays until the operator acknowledges.
   Theme-aware via dash tokens — no hardcoded colors (DARK_MODE_RULES).
   =================================================================== */
.malert-banner {
    position: fixed;
    top: calc(3.5rem + env(safe-area-inset-top));
    left: 0.5rem;
    right: 0.5rem;
    z-index: 90;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.malert-banner__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    border: 2px solid var(--color-dash-danger, #ef4444);
    background: color-mix(in srgb, var(--color-dash-danger, #ef4444) 16%, var(--color-dash-bg, #0f172a));
    color: var(--color-dash-text, #e2e8f0);
    box-shadow: 0 6px 18px rgb(0 0 0 / 0.35);
}
.malert-banner__text { flex: 1; min-width: 0; }
.malert-banner__title {
    font-weight: 800;
    color: var(--color-dash-danger, #ef4444);
    margin-bottom: 0.15rem;
}
.malert-banner__summary {
    font-size: 0.85rem;
    white-space: pre-line;
    color: var(--color-dash-text-secondary, #94a3b8);
}
.malert-banner__btn {
    flex-shrink: 0;
    min-height: 2.75rem;
    padding: 0 1rem;
    border-radius: 0.6rem;
    border: 1px solid var(--color-dash-danger, #ef4444);
    background: var(--color-dash-danger, #ef4444);
    color: #fff;
    font-weight: 800;
}
.malert-banner__btn:disabled { opacity: 0.6; }