/* ═══════════════════════════════
   MAIN HOME PAGE
   KMK Munai Design System
   ═══════════════════════════════ */

* {
    user-select: none;
}

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

/* ── Page content wrapper ── */
.main-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    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);
}

/* ── Main form card ── */
.main-form {
    display: flex;
    width: 100%;
    max-width: 380px;
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-md, 16px);
    gap: var(--space-md, 16px);
    border-radius: var(--radius-control, 12px);
    background: var(--color-surface-card, #fff);
    box-shadow: var(--shadow-card);
    border: 1px solid var(--color-border, #E2E2E2);
}

/* ── Form heading row — plain text, not a decorative plaque. The
   submit button is meant to be the visually heaviest element on this
   screen, not the section title. ── */
.form-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.form-heading h2,
#info_text {
    font-size: var(--font-size-lg, 18px);
    font-weight: var(--fw-semibold, 600);
    color: var(--color-text-primary, #18181B);
    margin: 0;
}

.icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    background: transparent;
    border: none;
    border-radius: var(--radius-small, 8px);
    cursor: pointer;
    color: var(--color-text-secondary, #52525B);
    transition: background var(--dur-fast, 0.15s), color var(--dur-fast, 0.15s);
}

.icon-btn:hover   { background: var(--color-surface-page, #FAFAFA); color: var(--color-text-primary, #18181B); }
.icon-btn:active  { background: var(--color-border, #E4E4E7); }
.icon-btn:focus-visible { box-shadow: var(--focus-ring); }
.icon-btn img { width: 20px; height: 20px; display: block; opacity: 0.8; }

/* ── Field sections — labeled groups instead of one flat block ── */
.form-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm, 8px);
    padding-top: var(--space-sm, 8px);
    border-top: 1px solid var(--color-border, #E4E4E7);
}

.form-section:first-of-type { border-top: none; padding-top: 0; }

.section-label {
    font-size: var(--font-size-xs, 12px);
    font-weight: var(--fw-semibold, 600);
    color: var(--color-text-secondary, #52525B);
    margin: 0;
}

.section-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Clear-note button — same pill/bordered shape and 36px height as the
   .btn_action chips it sits next to, so it reads as part of the group
   instead of a stray icon; danger-tinted since it's a destructive
   (irreversible) action, unlike the neutral insert chips. */
.btn-icon-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    width: 36px;
    flex-shrink: 0;
    cursor: pointer;
    background: var(--color-surface-card, #fff);
    border: 1px solid var(--color-danger, #DC2626);
    border-radius: var(--radius-full, 999px);
    color: var(--color-danger, #DC2626);
    transition: background var(--dur-fast, 0.15s), color var(--dur-fast, 0.15s), transform var(--dur-fast, 0.1s);
}

.btn-icon-clear svg { width: 16px; height: 16px; display: block; }

.btn-icon-clear:hover {
    background: var(--color-danger-bg, #FEF2F2);
}

.btn-icon-clear:active {
    background: var(--color-danger, #DC2626);
    color: var(--color-brand-white, #fff);
    transform: scale(0.92);
}

.btn-icon-clear:focus-visible { box-shadow: var(--focus-ring, 0 0 0 3px rgba(204,32,32,0.18)); }

/* ── Task info message ── */
.tasks-info {
    text-align: center;
    font-size: var(--font-size-sm, 13px);
    font-weight: 600;
    color: var(--color-brand-red, #CC2020);
    background: var(--color-brand-red-light, #FFF0F0);
    padding: 8px var(--space-md, 16px);
    border-radius: var(--radius-small, 8px);
    display: none;
}

.tasks-info:not(:empty) { display: block; }

/* ── Info rows ── */
.info-frame {
    display: flex;
    width: 100%;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-sm, 8px);
}

/* ── Individual field block ── */
.data-frame {
    flex: 1 1 140px;
    min-width: 130px;
    max-width: 180px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Labels stay small/muted (see base/typography.css); values (inputs)
   are larger and dark so the data visually dominates over the
   caption, not the reverse. */

/* ── Text inputs ── */
.input-text {
    width: 100%;
    height: 40px;
    padding: 0 var(--space-sm, 8px);
    font-size: var(--font-size-md, 15px);
    font-family: var(--font, 'Montserrat', sans-serif);
    color: var(--color-text-primary, #111);
    background: var(--color-surface-page, #F4F4F4);
    border: 1.5px solid var(--color-border, #E2E2E2);
    border-radius: var(--radius-small, 8px);
    outline: none;
    transition: border-color var(--dur-fast, 0.15s), background var(--dur-fast, 0.15s), box-shadow var(--dur-fast, 0.15s);
    box-sizing: border-box;
}

.input-text:focus {
    border-color: var(--color-brand-red, #CC2020);
    background: var(--color-brand-white, #fff);
    box-shadow: var(--focus-ring, 0 0 0 3px rgba(204,32,32,0.18));
}

/* ── Well select wrapper ── */
.well-info {
    width: 100%;
    position: relative;
}

/* Decorative chevron for the well datalist-combobox, to match the
   custom-styled <select> next to it (status-select) */
.well-info::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 10px;
    width: 12px;
    height: 12px;
    transform: translateY(-50%);
    background-image: var(--icon-chevron-down);
    background-repeat: no-repeat;
    background-size: 12px;
    opacity: 0.55;
    pointer-events: none;
}

#well-selects {
    padding-right: 28px;
}

.well-title {
    width: 100%;
    padding: 0 var(--space-sm, 8px);
    padding-right: 28px;
    height: 40px;
    font-size: var(--font-size-md, 15px);
    font-family: var(--font, 'Montserrat', sans-serif);
    background: var(--color-surface-page, #F4F4F4);
    border: 1.5px solid var(--color-border, #E2E2E2);
    border-radius: var(--radius-small, 8px);
    color: var(--color-text-primary, #111);
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    cursor: pointer;
    transition: border-color var(--dur-fast, 0.15s), box-shadow var(--dur-fast, 0.15s);
    box-sizing: border-box;
    background-image: var(--icon-chevron-down);
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 12px;
}

.well-title:focus {
    border-color: var(--color-brand-red, #CC2020);
    box-shadow: var(--focus-ring, 0 0 0 3px rgba(204,32,32,0.18));
}

/* The status <select> is wrapped in a stray <div class="input-text">
   (markup leftover) — both classes independently draw a full 40px
   bordered box, so the select would overflow its own wrapper's
   border. Neutralize the wrapper div so only the select renders. */
div.input-text {
    height: auto;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

/* ── Notes section ── */
.sub-frame {
    width: 100%;
}

.history-frame {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs, 4px);
}

.sub-text {
    width: 100%;
    min-height: 90px;
    padding: var(--space-sm, 8px);
    font-size: var(--font-size-md, 15px);
    font-family: var(--font, 'Montserrat', sans-serif);
    color: var(--color-text-primary, #111);
    background: var(--color-surface-page, #F4F4F4);
    border: 1.5px solid var(--color-border, #E2E2E2);
    border-radius: var(--radius-small, 8px);
    resize: vertical;
    outline: none;
    transition: border-color var(--dur-fast, 0.15s), box-shadow var(--dur-fast, 0.15s);
    box-sizing: border-box;
    line-height: 1.5;
}

.sub-text:focus {
    border-color: var(--color-brand-red, #CC2020);
    box-shadow: var(--focus-ring, 0 0 0 3px rgba(204,32,32,0.18));
}

/* ── Local info / GPS status ── */
.local-info {
    font-size: var(--font-size-xs, 12px);
    color: var(--color-text-secondary, #777);
    text-align: center;
}

/* ── Copyright / contact link ── */
.copyright {
    color: var(--color-text-secondary, #777);
    text-align: center;
    font-size: var(--font-size-xs, 12px);
    cursor: pointer;
    padding: var(--space-sm, 8px);
    transition: color var(--dur-fast, 0.15s), opacity var(--dur-fast, 0.15s);
}

.copyright:hover  { color: var(--color-brand-red, #CC2020); }
.copyright:active { opacity: 0.6; }