/* ═══════════════════════════════
   HISTORY PAGE
   KMK Munai Design System
   ═══════════════════════════════ */

* {
    user-select: none;
    font-family: var(--font, 'Montserrat', sans-serif);
}

body.center-screen {
    display: flex;
    width: 100vw;
    min-height: 100vh;
    flex-direction: column;
    align-items: center;
    background: var(--color-surface-page, #F4F4F4);
    overflow-x: hidden;
}

.main-container {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    padding: 0 var(--space-md, 16px);
    padding-top: calc(var(--nav-top, 64px) + var(--space-md, 16px));
    padding-bottom: calc(var(--nav-bottom, 70px) + var(--space-md, 16px));
    gap: var(--space-md, 16px);
}

/* ── Filter bar ── */
.data-frame {
    display: flex;
    width: 100%;
    max-width: 400px;
    flex-direction: column;
    gap: var(--space-sm, 8px);
}

.well_frame {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

/* Filter row now hosts the .segmented control (button.css) instead of
   two separate floating buttons */
.history-filter-row {
    display: flex;
    width: 100%;
}

.input-text {
    height: 40px;
    padding: 0 var(--space-sm, 8px);
    font-size: var(--font-size-md, 16px);
    font-family: var(--font, 'Montserrat', sans-serif);
    background: var(--color-brand-white, #fff);
    border: 1.5px solid var(--color-border, #E2E2E2);
    border-radius: var(--radius-small, 8px);
    color: var(--color-text-primary, #18181B);
    outline: none;
    transition: border-color var(--dur-fast, 0.15s), box-shadow var(--dur-fast, 0.15s);
    box-sizing: border-box;
    width: 100%;
}

.input-text:focus {
    border-color: var(--color-brand-red, #CC2020);
    box-shadow: var(--focus-ring);
}

@keyframes cardIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Cards grid ── */
.history-cards {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm, 8px);
    width: 100%;
    max-width: 460px;
}

/* Empty state ("Нет данных") injected as a bare <p> by history.js */
.history-cards > p {
    width: 100%;
    text-align: center;
    color: var(--color-text-secondary, #777);
    font-size: var(--font-size-sm, 13px);
    font-weight: 600;
    padding: var(--space-xl, 32px) 0;
}

/* ── Individual history card ──
   Thin border + soft shadow instead of a thick solid-color left bar —
   the left bar read as a decorative "tag stripe" with no real meaning
   attached to its color, competing with the actual status badge below. */
.history-card {
    background: var(--color-brand-white, #fff);
    border: 1px solid var(--color-border, #E4E4E7);
    border-radius: var(--radius-control, 12px);
    padding: var(--space-md, 16px);
    box-shadow: var(--shadow-card);
    animation: cardIn 0.32s ease both;
}

.history-cards .history-card:nth-child(2) { animation-delay: 0.04s; }
.history-cards .history-card:nth-child(3) { animation-delay: 0.08s; }
.history-cards .history-card:nth-child(4) { animation-delay: 0.12s; }
.history-cards .history-card:nth-child(5) { animation-delay: 0.16s; }
.history-cards .history-card:nth-child(n+6) { animation-delay: 0.2s; }

/* ── Header: well number (large, left) + date (small, muted, right),
   operator name on its own second line. A fixed two-row structure so a
   long operator name never fights the date for space on the first row. ── */
.history-header {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: var(--space-sm, 8px);
}

.history-header-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-sm, 8px);
}

.well-info {
    font-size: var(--font-size-lg, 18px);
    font-weight: var(--fw-semibold, 600);
    color: var(--color-text-primary, #18181B);
    min-width: 0;
    overflow-wrap: anywhere;
}

.well-number {
    color: var(--color-brand-red, #CC2020);
    margin: 0 3px;
}

.date-value {
    flex-shrink: 0;
    font-size: var(--font-size-xs, 12px);
    font-weight: var(--fw-medium, 500);
    color: var(--color-text-secondary, #52525B);
    white-space: nowrap;
}

/* Operator name — its own row, so it never collides with the date */
.operator-info {
    font-size: var(--font-size-xs, 12px);
    font-weight: var(--fw-medium, 500);
    color: var(--color-text-secondary, #52525B);
    overflow-wrap: anywhere;
}

.operator-name {
    color: var(--color-text-primary, #18181B);
    font-weight: var(--fw-medium, 500);
}

/* ── Status badge — dot + text, colored by semantic meaning (set via
   a status-* class added by history.js based on status_name, not by
   the brand red used elsewhere for CTAs/nav) ── */
.status-info { margin-bottom: var(--space-sm, 8px); }

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 8px;
    border-radius: var(--radius-full, 999px);
    font-size: var(--font-size-xs, 12px);
    font-weight: var(--fw-semibold, 600);
}

.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.status-badge.status-success { background: var(--color-success-bg); color: var(--color-success-text); }
.status-badge.status-warning { background: var(--color-warning-bg); color: var(--color-warning-text); }
.status-badge.status-danger  { background: var(--color-danger-bg);  color: var(--color-danger-text); }
.status-badge.status-neutral { background: var(--color-gray-100);     color: var(--color-text-secondary); }

/* ── Metrics — 2-column grid, label small/muted above, value large/
   dark below. Replaces the old fake-input pill chips.
   history.js wraps 3 metrics per side in .history-data-one (Qj, Qn,
   Ptr) / .history-data-two (Obv, Temp, Pztr) — each wrapper's children
   are promoted into this grid via `display: contents`, and
   grid-auto-flow: column fills column-by-column (3 rows, then the
   next 3), so the two wrappers land as the grid's two columns and
   each row pairs up the same two metrics that used to sit side by
   side as chips (Qj|Obv, Qn|Temp, Ptr|Pztr) — just as a real label-
   over-value grid cell instead of a pill. ── */
.history-data {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    gap: var(--space-md, 16px) var(--space-sm, 8px);
    margin-bottom: var(--space-sm, 8px);
    padding: var(--space-md, 16px) 0;
    border-top: 1px solid var(--color-border, #E4E4E7);
    border-bottom: 1px solid var(--color-border, #E4E4E7);
}

.history-data-one,
.history-data-two {
    display: contents;
}

.history-data-one p,
.history-data-two p {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: var(--font-size-xs, 12px);
    font-weight: var(--fw-medium, 500);
    color: var(--color-text-secondary, #52525B);
}

.qj-value,
.qn-value,
.obv-value,
.temp-value,
.ptr-value,
.pztr-value {
    font-size: var(--font-size-md, 16px);
    color: var(--color-text-primary, #18181B);
    font-weight: var(--fw-semibold, 600);
}

/* ── Notes / task ── */
.history-info,
.task-info,
.history-footer {
    font-size: var(--font-size-sm, 14px);
    color: var(--color-text-primary, #18181B);
    margin-bottom: var(--space-sm, 8px);
    line-height: var(--lh-normal, 1.5);
}

.history-info-label {
    display: block;
    font-size: var(--font-size-xs, 12px);
    color: var(--color-text-secondary, #52525B);
    font-weight: var(--fw-medium, 500);
    margin-bottom: 2px;
}

.task-value,
.note-value {
    display: block;
    color: var(--color-text-primary, #18181B);
}

/* Empty/undefined-safe values render through this class instead of
   the literal string "Нет" or a leaked "undefined"/"null" */
.value-empty { color: var(--color-text-muted, #A1A1AA); font-weight: var(--fw-regular, 400) !important; }

/* ── Card action row ── */
.history_btn_frame {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-sm, 8px);
    margin-top: var(--space-sm, 8px);
    padding-top: var(--space-sm, 8px);
    border-top: 1px solid var(--color-border, #E4E4E7);
}

.history_btn_frame .edit-btn:active { transform: scale(0.95); }

/* ── Pagination — symmetric "‹ 1 / 12 ›" ── */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm, 8px);
    margin-bottom: var(--space-lg, 24px);
    padding: var(--space-xs, 4px);
    background: var(--color-surface-card, #fff);
    border: 1px solid var(--color-border, #E4E4E7);
    border-radius: var(--radius-full, 999px);
    box-shadow: var(--shadow-card);
}

.pagination .history_btn {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full, 999px);
    font-size: var(--font-size-lg, 18px);
    transition: color var(--dur-fast, 0.15s), background var(--dur-fast, 0.15s), transform var(--dur-fast, 0.1s);
}

.pagination .history_btn:active {
    transform: scale(0.92);
    background: var(--color-surface-page, #FAFAFA);
}

.pagination .history_btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    transform: none;
}

.pagination #currentPage {
    min-width: 64px;
    white-space: nowrap;
    color: var(--color-text-primary, #18181B);
    font-weight: var(--fw-semibold, 600);
    font-variant-numeric: tabular-nums;
    cursor: default;
}

.pagination #currentPage:active { transform: none; background: none; }

/* ── Preloader ──
   Sits in-flow where the history cards list will appear (it's the sibling
   right before .history-cards), not a fixed full-viewport overlay — an
   overlay would visually sit on top of the filter row and pagination
   instead of the list they belong to. */
#preloader {
    padding: 40px 0;
    text-align: center;
    font-size: var(--font-size-lg, 17px);
    font-weight: 600;
    color: var(--color-brand-red, #CC2020);
}

/* ── Edit modal ──
   Opened/closed purely via inline style (history.js sets
   $('#editModal').css('display','flex') / .hide()) — there is no class
   toggle to hook a transition to, but a CSS animation on an element still
   (re)plays every time its computed display flips from none to a rendered
   value, so this replays on every open with no JS changes needed. */
@keyframes modalOverlayIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes modalPopIn {
    from { opacity: 0; transform: scale(0.94) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    inset: 0;
    background: rgba(0,0,0,0.55);
    align-items: center;
    justify-content: center;
}

.modal[style*="flex"] {
    display: flex !important;
    animation: modalOverlayIn 0.18s ease;
}

.modal-content {
    background: var(--color-brand-white, #fff);
    border-radius: var(--radius-card, 16px);
    width: 90%;
    max-width: 360px;
    max-height: 85vh;
    overflow-y: auto;
    padding: var(--space-lg, 24px);
    box-shadow: var(--shadow-modal);
    position: relative;
    color: var(--color-text-primary, #18181B);
    font-family: var(--font, 'Montserrat', sans-serif);
    font-size: var(--font-size-md, 16px);
    text-align: left;
    animation: modalPopIn 0.22s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.modal-content .close {
    position: absolute;
    top: var(--space-md, 16px);
    right: var(--space-md, 16px);
    font-size: 26px;
    font-weight: 600;
    color: var(--color-text-secondary, #777);
    cursor: pointer;
    line-height: 1;
    transition: color 0.15s, transform 0.1s;
}

.modal-content .close:hover { color: var(--color-brand-black, #111); }
.modal-content .close:active { transform: scale(0.85); }

/* h2 title had no dedicated rule — fell back to the browser's oversized
   default heading size instead of the app's type scale */
.modal-content h2 {
    font-size: var(--font-size-lg, 17px);
    font-weight: 600;
    color: var(--color-brand-black, #111);
    letter-spacing: 0.02em;
    margin-bottom: var(--space-sm, 8px);
}

.modal-content form label {
    display: block;
    margin-bottom: 4px;
    text-align: left;
    font-size: var(--font-size-xs, 12px);
    color: var(--color-text-secondary, #52525B);
    font-weight: var(--fw-medium, 500);
}

.modal-content form .row {
    display: flex;
    gap: var(--space-sm, 8px);
    margin-bottom: var(--space-md, 16px);
}

.modal-content form .row.full { flex-direction: column; }

.modal-content form .row .col { flex: 1; }

.modal-content form input[type="text"],
.modal-content form textarea {
    width: 100%;
    min-height: 42px;
    padding: 8px var(--space-sm, 8px);
    border: 1.5px solid var(--color-border, #E2E2E2);
    border-radius: var(--radius-small, 8px);
    font-size: var(--font-size-sm, 13px);
    font-family: var(--font, 'Montserrat', sans-serif);
    background: var(--color-surface-page, #F4F4F4);
    color: var(--color-text-primary, #111);
    outline: none;
    transition: border-color 0.15s;
    box-sizing: border-box;
}

.modal-content form input[type="text"]:focus,
.modal-content form textarea:focus { border-color: var(--color-brand-red, #CC2020); }

.modal-content form textarea {
    resize: vertical;
    min-height: 80px;
}

#editForm { margin-top: var(--space-md, 16px); }

.modal-content form button[type="submit"] {
    width: 100%;
    padding: 12px;
    background: var(--color-brand-red, #CC2020);
    color: var(--color-brand-white, #fff);
    border: none;
    border-radius: var(--radius-control, 12px);
    font-size: var(--font-size-md, 15px);
    font-family: var(--font, 'Montserrat', sans-serif);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}

.modal-content form button[type="submit"]:hover { background: var(--color-brand-red-dark, #A81818); }
.modal-content form button[type="submit"]:active { transform: scale(0.98); }

@media (prefers-reduced-motion: reduce) {
    .history-card,
    .modal[style*="flex"],
    .modal-content { animation: none; }
}