/*
 * CHOP Service — final interface layer.
 * Loaded last. It normalizes shared surfaces, dark theme, focus states and
 * mobile safety without changing page structure or server-side behavior.
 */

:root {
    color-scheme: light;
    --ui-bg: #f4f7fb;
    --ui-surface: #ffffff;
    --ui-surface-soft: #f8fafc;
    --ui-surface-raised: #ffffff;
    --ui-text: #18212f;
    --ui-muted: #5f6f84;
    --ui-line: #d5deea;
    --ui-line-strong: #b9c6d8;
    --ui-accent: #1f6feb;
    --ui-accent-hover: #1d4ed8;
    --ui-accent-soft: #e8f0ff;
    --ui-danger: #dc2626;
    --ui-danger-hover: #b91c1c;
    --ui-shadow-sm: 0 3px 12px rgba(15, 23, 42, 0.07);
    --ui-shadow-md: 0 12px 32px rgba(15, 23, 42, 0.11);

    --bg: var(--ui-bg);
    --card: var(--ui-surface);
    --text: var(--ui-text);
    --muted: var(--ui-muted);
    --line: var(--ui-line);
    --accent: var(--ui-accent);
    --accent-soft: var(--ui-accent-soft);
    --shadow: var(--ui-shadow-md);
}

html[data-theme="dark"] {
    color-scheme: dark;
    --ui-bg: #0b1220;
    --ui-surface: #151e2d;
    --ui-surface-soft: #101827;
    --ui-surface-raised: #1b2638;
    --ui-text: #eef4ff;
    --ui-muted: #a7b4c8;
    --ui-line: #334155;
    --ui-line-strong: #475569;
    --ui-accent: #60a5fa;
    --ui-accent-hover: #93c5fd;
    --ui-accent-soft: #172554;
    --ui-danger: #f87171;
    --ui-danger-hover: #fca5a5;
    --ui-shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.28);
    --ui-shadow-md: 0 16px 38px rgba(0, 0, 0, 0.38);

    /* Accessible dark equivalents for the most frequently reused legacy vars. */
    --c-1: var(--ui-surface);
    --c-6: var(--ui-surface-soft);
    --c-8: #1f2937;
    --c-9: var(--ui-muted);
    --c-15: #d7e0ee;
    --c-23: var(--ui-text);
    --c-24: var(--ui-line);
    --c-25: var(--ui-surface);
    --c-27: var(--ui-text);
    --c-30: var(--ui-muted);
    --c-31: #111c2c;
    --c-35: var(--ui-text);
    --c-37: var(--ui-line);
    --c-39: var(--ui-muted);
    --c-43: var(--ui-line);
    --c-45: var(--ui-muted);
    --c-46: var(--ui-line);
    --c-53: var(--ui-line);
    --c-54: var(--ui-text);
    --c-56: #1e293b;
    --c-57: #101827;
    --c-59: var(--ui-bg);
    --c-68: rgba(0, 0, 0, 0.24);
    --c-71: rgba(21, 30, 45, 0.96);
    --c-73: rgba(0, 0, 0, 0.22);
    --c-75: rgba(0, 0, 0, 0.32);
}

html {
    min-width: 320px;
    background: var(--ui-bg);
    scrollbar-gutter: stable;
}

body {
    min-height: 100vh;
    background: var(--ui-bg);
    color: var(--ui-text);
}

body,
.card,
.object-card,
.detail-card,
input,
select,
textarea,
button,
.btn,
.nav-btn,
.flash {
    transition: background-color .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.page-content {
    min-width: 0;
}

.page-content :where(h1, h2, h3, p, dd, td, a, button, label, span) {
    overflow-wrap: anywhere;
}

/* Device serial numbers and district names must remain intact; other table cells keep global wrapping. */
.objects-table td[data-label="Прибор"],
.objects-table td[data-label="Район"] {
    overflow-wrap: normal;
    word-break: normal;
    white-space: nowrap;
}

.page-content :where(input, select, textarea) {
    border-color: var(--ui-line);
    background: var(--ui-surface);
    color: var(--ui-text);
    caret-color: var(--ui-accent);
}

.page-content :where(input, select, textarea):hover:not(:disabled):not([readonly]) {
    border-color: var(--ui-line-strong);
}

.page-content :where(input, select, textarea):disabled,
.page-content :where(input, textarea)[readonly] {
    background: color-mix(in srgb, var(--ui-surface-soft) 88%, var(--ui-line) 12%) !important;
    color: var(--ui-muted) !important;
    border-color: var(--ui-line) !important;
    opacity: 1;
}

.page-content select option {
    background: var(--ui-surface);
    color: var(--ui-text);
}

.page-content :where(button, .btn, [role="button"]):disabled,
.page-content :where(button, .btn, [role="button"])[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: .62;
    transform: none !important;
    filter: none !important;
}

/* Primary buttons need a stable white label in both themes. */
.btn:not(.secondary):not(.danger) {
    background: var(--ui-accent);
    border-color: var(--ui-accent);
    color: #fff;
}

.btn:not(.secondary):not(.danger):hover {
    background: var(--ui-accent-hover);
    border-color: var(--ui-accent-hover);
}

.btn.secondary {
    background: var(--ui-surface);
    color: var(--ui-text);
    border-color: var(--ui-line);
}

.btn.secondary:hover {
    background: var(--ui-surface-soft);
    border-color: var(--ui-line-strong);
}

.btn.danger {
    background: var(--ui-danger);
    border-color: var(--ui-danger);
    color: #fff;
}

.btn.danger:hover {
    background: var(--ui-danger-hover);
    border-color: var(--ui-danger-hover);
}

.card,
.object-card,
.detail-v2-page .detail-card,
.requests-filter-card,
.requests-list-card,
.operations-filter-card,
.operations-list-card,
.maintenance-district-card {
    border-color: var(--ui-line);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-sm);
}

.table-wrap {
    border-radius: 12px;
    scrollbar-color: var(--ui-line-strong) transparent;
}

:where(table, .ui-table) th {
    color: var(--ui-muted);
}

:where(table, .ui-table) td,
:where(table, .ui-table) th {
    border-color: var(--ui-line);
}

.ui-table thead th {
    background: var(--ui-surface-raised);
}

.ui-table tbody tr:hover {
    background: color-mix(in srgb, var(--ui-accent) 7%, var(--ui-surface));
}

.flash {
    border: 1px solid var(--ui-line);
    box-shadow: var(--ui-shadow-sm);
}

.empty,
.empty-state,
.empty-block,
.operations-empty-state {
    color: var(--ui-muted);
}

.title-link,
.request-link {
    color: var(--ui-accent);
}

.title-link:hover,
.request-link:hover {
    color: var(--ui-accent-hover);
}

.access-code-box {
    border-color: var(--ui-line);
    background: var(--ui-surface-soft);
    color: var(--ui-text);
}

/* Native dialog-like panels and custom modals. */
:where(
    .request-info-modal-panel,
    .request-phone-modal-panel,
    .smart-modal-panel,
    .coords-map-panel,
    .dallas-dump-modal
) {
    border-color: var(--ui-line) !important;
    background: var(--ui-surface) !important;
    color: var(--ui-text) !important;
    box-shadow: var(--ui-shadow-md) !important;
}

:where(
    .request-info-modal-backdrop,
    .request-phone-modal-backdrop,
    .smart-modal-backdrop,
    .coords-map-backdrop
) {
    background: rgba(2, 6, 23, .68) !important;
    backdrop-filter: blur(2px);
}

/* Dark-mode fixes for page-specific semantic badges and event rows. */
html[data-theme="dark"] .requests-page .request-quick-feedback { color: #86efac; }
html[data-theme="dark"] .requests-page .request-quick-feedback.error { color: #fca5a5; }
html[data-theme="dark"] .requests-page .request-reopen-button { color: #fdba74; }
html[data-theme="dark"] .requests-page .request-reopen-button:hover {
    border-color: #c2410c;
    background: #431407;
}
html[data-theme="dark"] .requests-page .schedule-overdue { background: #451a1a; color: #fecaca; }
html[data-theme="dark"] .requests-page .schedule-today { background: #052e16; color: #bbf7d0; }
html[data-theme="dark"] .requests-page .schedule-tomorrow { background: #422006; color: #fde68a; }
html[data-theme="dark"] .requests-page .schedule-planned { background: #172554; color: #bfdbfe; }
html[data-theme="dark"] .requests-page .schedule-muted { background: #1f2937; color: #cbd5e1; }
html[data-theme="dark"] .requests-page .planned-request-card {
    border-color: #7f1d1d;
    background: #2b151a;
}

html[data-theme="dark"] .detail-v2-page .sx-cmd-status.pending { background: #1f2937; color: #d1d5db; }
html[data-theme="dark"] .detail-v2-page .sx-cmd-status.ok { background: #052e16; color: #86efac; }
html[data-theme="dark"] .detail-v2-page .sx-cmd-status.err { background: #450a0a; color: #fca5a5; }
html[data-theme="dark"] .detail-v2-page .le-alarm { background: #3f151b; }
html[data-theme="dark"] .detail-v2-page .le-alarm .le-name { color: #fca5a5; }
html[data-theme="dark"] .detail-v2-page .le-fault { background: #3b1d0a; }
html[data-theme="dark"] .detail-v2-page .le-fault .le-name { color: #fdba74; }
html[data-theme="dark"] .detail-v2-page .le-disarm { background: #142449; }
html[data-theme="dark"] .detail-v2-page .le-disarm .le-name { color: #93c5fd; }
html[data-theme="dark"] .detail-v2-page .le-arm { background: #0b2d1a; }
html[data-theme="dark"] .detail-v2-page .le-arm .le-name,
html[data-theme="dark"] .detail-v2-page .le-restore .le-name { color: #86efac; }
html[data-theme="dark"] .detail-v2-page .le-service .le-name { color: #c4b5fd; }

/* Leaflet popup chrome follows the selected theme. */
html[data-theme="dark"] :where(.leaflet-popup-content-wrapper, .leaflet-popup-tip) {
    background: var(--ui-surface-raised);
    color: var(--ui-text);
}

html[data-theme="dark"] .leaflet-popup-content-wrapper {
    box-shadow: var(--ui-shadow-md);
}

html[data-theme="dark"] :where(.leaflet-control-layers, .leaflet-bar a) {
    border-color: var(--ui-line);
    background: var(--ui-surface-raised);
    color: var(--ui-text);
}

html[data-theme="dark"] .leaflet-bar a:hover {
    background: var(--ui-surface-soft);
}

/* Keep keyboard focus visible even on legacy screens. */
.page-content :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid color-mix(in srgb, var(--ui-accent) 55%, transparent);
    outline-offset: 2px;
}

@media (max-width: 720px) {
    .page-content {
        padding-bottom: max(28px, env(safe-area-inset-bottom));
    }

    .page-content :where(.btn, button, input, select) {
        min-height: 42px;
    }

    .page-head,
    .page-head-with-actions,
    .object-header,
    .detail-v2-page .detail-hero {
        min-width: 0;
    }

    .form-actions > :where(.btn, button, a),
    .detail-form__actions > :where(.btn, button, a) {
        max-width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    body,
    .card,
    .object-card,
    .detail-card,
    input,
    select,
    textarea,
    button,
    .btn,
    .nav-btn,
    .flash {
        transition: none !important;
    }
}
/* ==== 2026-08-11: request history + technician notifications ==== */

/* Modal base (available on every page; requests-v2.css keeps its own copy for the list page) */
.request-info-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.request-info-modal[hidden] { display: none; }
.request-info-modal-backdrop { position: absolute; inset: 0; background: rgba(17, 24, 39, .58); }
.request-info-modal-panel {
    position: relative;
    width: min(720px, calc(100vw - 20px));
    max-height: min(calc(100vh - 48px), 760px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: var(--c-1);
    box-shadow: 0 24px 70px rgba(17, 24, 39, .28);
}
.request-info-modal-head {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px 13px;
    border-bottom: 1px solid var(--line);
    background: var(--c-1);
}
.request-info-modal-title { margin: 0; font-size: 21px; line-height: 1.25; }
.request-info-modal-close {
    width: 36px;
    height: 36px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--c-1);
    color: var(--text);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}
.request-info-modal-body { padding: 15px 20px 20px; overflow: auto; }
.request-info-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 13px 20px 18px;
    border-top: 1px solid var(--line);
}
.request-info-actions .btn { flex: 0 0 auto; white-space: nowrap; overflow-wrap: normal; }
@media (max-width: 360px) {
    .request-info-actions { flex-wrap: wrap; }
    .request-info-actions .btn { flex: 1 1 100%; width: 100%; }
}

/* Action forms inside modals */
.request-action-form__label {
    display: block;
    margin-bottom: 7px;
    font-weight: 600;
}
.request-action-form textarea {
    width: 100%;
    min-height: 96px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--c-1);
    color: var(--text);
    font: inherit;
    resize: vertical;
}
.request-action-form__error {
    margin-top: 8px;
    color: #c62828;
    font-size: 13px;
    min-height: 0;
}
.required-star { color: #c62828; }

/* Request action history (card) */
.request-history {
    display: flex;
    flex-direction: column;
}
.request-history-item {
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
}
.request-history-item:last-child { border-bottom: none; }
.request-history-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}
.request-history-action {
    padding: 2px 9px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 12px;
    background: var(--line);
    color: var(--text);
}
.request-history-item--completed .request-history-action { background: #d9f2e1; color: #14532d; }
.request-history-item--reopened .request-history-action { background: #fde9d2; color: #92400e; }
.request-history-item--closed .request-history-action { background: #e3e6ea; color: #374151; }
.request-history-item--cancelled .request-history-action { background: #fbe2e2; color: #7f1d1d; }
.request-history-item--created .request-history-action { background: #e0edfb; color: #1e3a8a; }
.request-history-item--assigned .request-history-action { background: #e6e9ff; color: #3730a3; }
html[data-theme="dark"] .request-history-item--completed .request-history-action { background: #15392a; color: #86efac; }
html[data-theme="dark"] .request-history-item--reopened .request-history-action { background: #3b2a14; color: #fdba74; }
html[data-theme="dark"] .request-history-item--closed .request-history-action { background: #262b33; color: #cbd5e1; }
html[data-theme="dark"] .request-history-item--cancelled .request-history-action { background: #3b1a1a; color: #fca5a5; }
html[data-theme="dark"] .request-history-item--created .request-history-action { background: #16283f; color: #93c5fd; }
html[data-theme="dark"] .request-history-item--assigned .request-history-action { background: #1f1f3d; color: #c7d2fe; }
.request-history-comment {
    margin-top: 6px;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Unread badge in top nav */
.nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    margin-left: 6px;
    padding: 0 5px;
    border-radius: 999px;
    background: #dc2626;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

/* Notifications page */
.notifications-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.notification-card { padding: 16px 18px; }
.notification-card--unread { border-left: 3px solid #dc2626; }
.notification-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}
.notification-card__date { font-size: 13px; }
.notification-kind {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}
.notification-kind--reopened { background: #fde9d2; color: #92400e; }
.notification-kind--closed { background: #e3e6ea; color: #374151; }
html[data-theme="dark"] .notification-kind--reopened { background: #3b2a14; color: #fdba74; }
html[data-theme="dark"] .notification-kind--closed { background: #262b33; color: #cbd5e1; }
.notification-card__title { font-weight: 600; font-size: 15px; }
.notification-card__comment {
    margin-top: 6px;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--text);
}
.notification-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}