:root {
    --wm-primary: #2563eb;
    --wm-primary-dark: #1d4ed8;
    --wm-cold: #2563eb;
    --wm-hot: #ea580c;

    --wm-bg: #eaf1fb;
    --wm-card: rgba(255, 255, 255, 0.92);
    --wm-card-border: rgba(15, 23, 42, 0.06);
    --wm-text: #1c2333;
    --wm-muted: #667085;
    --wm-border: #dde3ea;
    --wm-shadow: rgba(15, 23, 42, 0.14);

    --wm-meter-bg: rgba(248, 250, 252, 0.85);
    --wm-input-bg: #ffffff;

    --wm-cold-section-bg: rgba(37, 99, 235, 0.055);
    --wm-hot-section-bg: rgba(234, 88, 12, 0.055);

    --wm-success-bg: #ecfdf3;
    --wm-success-border: #a6e9c5;
    --wm-success-text: #0f6b3e;

    --wm-danger-bg: #fff5f5;
    --wm-danger-border: #f1b7b7;
    --wm-danger-text: #842029;
    --wm-danger-icon-bg: #f8d7da;
    --wm-danger-icon-text: #b02a37;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    overflow-x: hidden;
}

body {
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
    color: var(--wm-text);
    background:
        linear-gradient(
            135deg,
            rgba(37, 99, 235, 0.10),
            rgba(14, 165, 165, 0.06)
        ),
        url("../images/udens-bg01.jpg") center / cover fixed no-repeat,
        var(--wm-bg);

    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    -webkit-font-smoothing: antialiased;
}

/*
 * Lapas ietvars - centrē saturu un ierobežo platumu lielos ekrānos.
 * Apzināti UNIKĀLS klases nosaukums (nevis Bootstrap "container"),
 * jo vietnes tēmai var būt SAVA ".container" klase ar fiksētu
 * platumu, kas neskaitāmi labi nestrādā mobilajos ekrānos - tas bija
 * iemesls, kāpēc forma mobilajā portreta režīmā neietilpa ekrānā.
 */
.udens-page {
    box-sizing: border-box;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    padding: 3rem 1.5rem;
}

/*
 * Galvenā forma
 */
.water-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--wm-card-border);
    border-radius: 24px;
    background: var(--wm-card);
    box-shadow: 0 24px 64px var(--wm-shadow);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    animation: wm-rise 0.5s ease-out both;
}

.water-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--wm-cold), var(--wm-primary), var(--wm-hot));
}

@keyframes wm-rise {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/*
 * Logo
 */
.water-logo {
    display: inline-block;
    max-width: 100%;
    height: auto;
    max-height: 100px;
    filter: drop-shadow(0 2px 6px rgba(15, 23, 42, 0.12));
}

/*
 * Virsraksts
 */
.page-title {
    margin-bottom: 0.4rem;
    font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.75rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--wm-text);
}

.page-subtitle {
    margin-bottom: 0;
    font-size: 0.95rem;
}

/*
 * Formas lauki
 */
.water-card .form-label {
    margin-bottom: 0.4rem;
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--wm-text);
}

.water-card .form-control,
.water-card .form-select {
    min-height: 48px;
    font-size: 1rem;
    color: var(--wm-text);
    background-color: var(--wm-input-bg);
    border: 1.5px solid var(--wm-border);
    border-radius: 12px;
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        background-color 0.15s ease;
}

.water-card textarea.form-control {
    min-height: 120px;
}

.water-card .form-control::placeholder {
    color: var(--wm-muted);
    opacity: 0.85;
}

/*
 * Skaitītāju lauku piemēra teksts ("piem. 24.832") ir tikai formāta
 * norāde, tāpēc tam jābūt vēl blāvākam, lai lietotājam netraucētu
 * ievadīt reālo rādījumu (nesajaucas ar to, kas jau ierakstīts).
 */
.water-card .meter-input::placeholder {
    opacity: 0.4;
}

.water-card .form-control:hover,
.water-card .form-select:hover {
    border-color: var(--wm-primary);
}

.water-card .form-control:focus,
.water-card .form-select:focus {
    border-color: var(--wm-primary);
    box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.18);
}

.water-card .form-text {
    color: var(--wm-muted);
    font-size: 0.85rem;
}

/*
 * Nederīgi lauki
 */
.water-card .form-control.is-invalid,
.water-card .form-select.is-invalid,
.water-card .was-validated .form-control:invalid,
.water-card .was-validated .form-select:invalid {
    border-color: var(--wm-danger-text);
    background-image: none;
}

.water-card .form-control.is-invalid:focus,
.water-card .form-select.is-invalid:focus,
.water-card .was-validated .form-control:invalid:focus,
.water-card .was-validated .form-select:invalid:focus {
    border-color: var(--wm-danger-text);
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.2);
}

/*
 * Rādījumu lauki nav obligāti - tukšs lauks pēc HTML5 noteikumiem ir
 * "derīgs" (nav "required"), tāpēc Bootstrap pēc jebkura iesniegšanas
 * mēģinājuma (.was-validated) tiem rādītu zaļu ķeksīti, kaut arī
 * lietotājs tur vēl neko nav ievadījis. Tas maldina, tāpēc tukšam
 * (placeholder redzams) laukam atceļam šo "derīgs" izskatu.
 */
.water-card .was-validated .meter-input:placeholder-shown:valid {
    border-color: var(--wm-border);
    background-image: none;
    padding-right: 0.75rem;
}

.water-card .was-validated .meter-input:placeholder-shown:valid:focus {
    border-color: var(--wm-primary);
    box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.18);
}

.water-card .invalid-feedback {
    margin-top: 0.35rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--wm-danger-text);
}

/*
 * Skaitītāju grupas
 */
.meter-section {
    padding: 1.25rem 1.25rem 1.25rem 1.4rem;
    border-radius: 16px;
    background: var(--wm-meter-bg);
    border: 1px solid var(--wm-card-border);
    border-left: 4px solid var(--wm-border);
    transition: border-color 0.2s ease;
}

/*
 * Šaurāks rindas atkāpums tieši šeit - lauki paši jau iezīmēti ar
 * krāsainu malu/fonu (.meter-field-cold/.meter-field-hot), tāpēc
 * Bootstrap noklusējuma platais atkāpums (1.5rem) ir lieks un uz
 * šauriem (mobilā portreta) ekrāniem sacenšas par vietu ar tiem.
 */
.meter-section .row {
    --bs-gutter-x: 0.75rem;
}

.meter-section-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1rem;
    font-weight: 700;
    font-size: clamp(0.92rem, 0.8rem + 0.6vw, 1.02rem);
}

.meter-section-title i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.meter-cold {
    color: var(--wm-cold);
}

.meter-cold i {
    background: rgba(37, 99, 235, 0.14);
}

.meter-section:has(.meter-cold) {
    background: var(--wm-cold-section-bg);
    border-left-color: rgba(37, 99, 235, 0.35);
}

.meter-hot {
    color: var(--wm-hot);
}

.meter-hot i {
    background: rgba(234, 88, 12, 0.14);
}

.meter-section:has(.meter-hot) {
    background: var(--wm-hot-section-bg);
    border-left-color: rgba(234, 88, 12, 0.35);
}

/*
 * Telpu (vannas istaba / virtuve) sadaļu virsraksts - neitrāls, jo katrā
 * telpas sadaļā tagad ir gan aukstā, gan karstā ūdens lauks kopā.
 */
.meter-room {
    color: var(--wm-primary);
}

.meter-room i {
    background: rgba(37, 99, 235, 0.14);
}

/*
 * Atsevišķu lauku (auksts/karsts) krāsu akcenti telpas sadaļas iekšienē -
 * atšķiras no .meter-cold/.meter-hot ar nolūku, lai neaktivizētu
 * .meter-section:has(...) fona iekrāsošanu visai sadaļai.
 */
.meter-label-cold {
    color: var(--wm-cold);
}

.meter-label-hot {
    color: var(--wm-hot);
}

/*
 * Katra lauka (nevis visas sadaļas) viegls fona/malas akcents -
 * auksts nedaudz zils, karsts nedaudz sarkans/oranžs.
 */
.meter-field-cold,
.meter-field-hot {
    border-radius: 10px;
    padding: 0.9rem 0.9rem 1rem;
}

.meter-field-cold {
    background: var(--wm-cold-section-bg);
    border-left: 3px solid rgba(37, 99, 235, 0.35);
}

.meter-field-hot {
    background: var(--wm-hot-section-bg);
    border-left: 3px solid rgba(234, 88, 12, 0.35);
}

/*
 * Sadalītājs starp skaitītāju blokiem
 */
.section-divider {
    margin: 1.5rem 0;
    border: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--wm-border) 20%,
        var(--wm-border) 80%,
        transparent
    );
}

/*
 * Poga
 */
.submit-button {
    min-height: 52px;
    border: 0;
    border-radius: 14px;
    font-weight: 600;
    letter-spacing: 0.01em;
    background: linear-gradient(135deg, var(--wm-primary), var(--wm-primary-dark));
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.28);
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        filter 0.15s ease;
}

.submit-button:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(37, 99, 235, 0.34);
    filter: brightness(1.03);
}

.submit-button:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.28);
}

.submit-button:focus-visible {
    outline: 2px solid var(--wm-primary);
    outline-offset: 3px;
}

.submit-button:disabled {
    cursor: wait;
    opacity: 0.75;
    box-shadow: none;
}

/*
 * Paziņojumi
 */
.water-card .alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border-radius: 14px;
    padding: 14px 18px;
    font-size: 0.95rem;
}

.water-card .alert-success {
    background: var(--wm-success-bg);
    border: 1px solid var(--wm-success-border);
    color: var(--wm-success-text);
}

.water-card .alert-success i {
    margin-top: 0.15rem;
}

/*
 * Formas kļūdu kopsavilkums
 */
.form-error-summary {
    display: flex;
    align-items: flex-start;
    gap: 14px;

    margin-bottom: 24px;
    padding: 16px 18px;

    border: 1px solid var(--wm-danger-border);
    border-radius: 14px;

    background: var(--wm-danger-bg);

    color: var(--wm-danger-text);
}

.form-error-icon {
    flex: 0 0 38px;

    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: var(--wm-danger-icon-bg);

    color: var(--wm-danger-icon-text);

    font-size: 18px;
}

.form-error-title {
    font-weight: 600;
    font-size: 15px;

    margin-bottom: 3px;
}

.form-error-text {
    font-size: 14px;
    line-height: 1.5;

    color: var(--wm-danger-text);
    opacity: 0.85;
}

.form-error-list {
    margin: 4px 0 0;
    padding-left: 18px;

    font-size: 14px;
    line-height: 1.6;

    color: var(--wm-danger-text);
}

.form-error-list li {
    margin-bottom: 2px;
}

.form-error-list li::marker {
    color: var(--wm-danger-icon-text);
}

/*
 * Iesniegšanas apstiprinājuma logs - pašpietiekams komponents (nevis
 * Bootstrap .modal), lai izvairītos no iespējamiem CSS konfliktiem ar
 * vietnes tēmas pašas stiliem, kas var izmantot to pašu klases vārdu.
 * !important uz izšķirošajām īpašībām (novietojums/redzamība),
 * lai tēmas plašāki/vēlāk ielādēti stili to nepārrakstītu.
 */
.udens-popup-overlay {
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 999999 !important;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.55);
    box-sizing: border-box;
}

.udens-popup-overlay.is-visible {
    display: flex !important;
}

.udens-popup-overlay,
.udens-popup-overlay * {
    box-sizing: border-box;
}

.udens-popup-box {
    position: relative;
    background: #fff;
    color: var(--wm-text);
    width: 100%;
    max-width: 380px;
    max-height: 88vh;
    overflow-y: auto;
    overflow-x: hidden;
    border-radius: 20px;
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.35);
    animation: udens-popup-rise 0.2s ease-out both;
    text-align: center;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 1rem;
    line-height: 1.45;
}

.udens-popup-box::before {
    content: "";
    display: block;
    height: 4px;
    background: linear-gradient(90deg, var(--wm-cold), var(--wm-success-text), var(--wm-hot));
}

@keyframes udens-popup-rise {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

body.udens-popup-open {
    overflow: hidden;
}

.udens-popup-close {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.05);
    border: 0;
    font-size: 1.35rem;
    line-height: 1;
    color: var(--wm-muted);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.udens-popup-close:hover {
    background: rgba(15, 23, 42, 0.1);
    color: var(--wm-text);
}

.udens-popup-header {
    padding: 1.5rem 1.5rem 0.9rem;
}

.udens-popup-header-icon {
    width: 46px;
    height: 46px;
    margin: 0 auto 0.7rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    background: var(--wm-success-bg);
    color: var(--wm-success-text);
}

.udens-popup-title {
    margin: 0 0 0.2rem;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--wm-text);
}

.udens-popup-subtitle {
    margin: 0;
    font-size: 0.85rem;
    color: var(--wm-muted);
}

.udens-popup-body {
    padding: 0 1.25rem 1.25rem;
}

/*
 * Kompaktas "čipsu" formas rindiņas adresei/dzīvoklim/īpašniekam -
 * ikona ietver nozīmi, tāpēc atsevišķs uzraksts virs vērtības nav
 * vajadzīgs (kompaktāk nekā iepriekšējais saraksta izkārtojums).
 */
.udens-info-line {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
    margin-bottom: 1rem;
}

.udens-info-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    background: var(--wm-meter-bg);
    border: 1px solid var(--wm-card-border);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--wm-text);
    max-width: 100%;
}

.udens-info-chip i {
    color: var(--wm-primary);
    font-size: 0.85rem;
    flex-shrink: 0;
}

/*
 * Rādījumu "statistikas kartītes" - kompakts 2 kolonnu režģis ar
 * lielu, izceltu vērtību un mazu telpas/tipa apzīmējumu apakšā.
 */
.udens-reading-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
}

.udens-reading-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.85rem 0.5rem;
    border-radius: 14px;
    background: var(--wm-meter-bg);
}

.udens-reading-card i {
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
}

.udens-reading-value {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--wm-text);
    word-break: break-word;
}

.udens-reading-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--wm-muted);
    margin-top: 0.15rem;
}

.udens-reading-cold {
    background: var(--wm-cold-section-bg);
}

.udens-reading-cold i {
    color: var(--wm-cold);
}

.udens-reading-hot {
    background: var(--wm-hot-section-bg);
}

.udens-reading-hot i {
    color: var(--wm-hot);
}

.udens-notes {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 0.85rem;
    padding: 0.75rem 0.85rem;
    border-radius: 12px;
    background: var(--wm-meter-bg);
    text-align: left;
    font-size: 0.85rem;
    color: var(--wm-text);
}

.udens-notes i {
    color: var(--wm-muted);
    font-size: 0.9rem;
    margin-top: 0.15rem;
    flex-shrink: 0;
}

.udens-popup-footer {
    padding: 0 1.25rem 1.25rem;
}

.udens-popup-ok-button {
    width: 100%;
    background: var(--wm-primary);
    color: #fff;
    border: 0;
    border-radius: 12px;
    padding: 0.65rem 1.5rem;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.udens-popup-ok-button:hover {
    background: var(--wm-primary-dark);
}

/*
 * Mobilās ierīces
 */
@media (max-width: 767.98px) {

    body {
        background-attachment: scroll;
    }

    .udens-page {
        padding-right: 10px;
        padding-left: 10px;
    }

    .water-card {
        border-radius: 18px;
    }

    .card-body {
        padding: 1rem !important;
    }

    .meter-section {
        padding: 0.85rem 0.85rem 0.85rem 0.95rem;
    }

    .meter-section .row {
        --bs-gutter-x: 0.6rem;
    }

    .meter-field-cold,
    .meter-field-hot {
        padding: 0.75rem 0.6rem 0.85rem;
    }

    .meter-section-title i {
        width: 34px;
        height: 34px;
        font-size: 1.05rem;
    }

    .submit-button {
        min-height: 50px;
    }

    .udens-popup-header {
        padding: 1.25rem 1rem 0.75rem;
    }

    .udens-popup-header-icon {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }

    .udens-popup-body {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .udens-popup-footer {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .udens-reading-card {
        padding: 0.7rem 0.4rem;
    }

    .udens-reading-value {
        font-size: 1.05rem;
    }
}

/*
 * Augstāks kontrasts
 */
@media (prefers-contrast: more) {

    .water-card,
    .water-card .form-control,
    .water-card .form-select {
        border-width: 2px;
    }
}

/*
 * Samazinātas animācijas lietotājiem,
 * kuri tās ir atslēguši sistēmā.
 */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

    .water-card {
        animation: none;
    }
}

/*
 * Tumšais režīms
 */
@media (prefers-color-scheme: dark) {

    :root {
        --wm-bg: #0b1220;
        --wm-card: rgba(17, 24, 39, 0.92);
        --wm-card-border: rgba(255, 255, 255, 0.06);
        --wm-text: #e8eaed;
        --wm-muted: #98a2b3;
        --wm-border: #33404f;
        --wm-shadow: rgba(0, 0, 0, 0.55);

        --wm-meter-bg: rgba(15, 21, 32, 0.75);
        --wm-input-bg: #141b28;

        --wm-cold-section-bg: rgba(96, 165, 250, 0.09);
        --wm-hot-section-bg: rgba(251, 146, 60, 0.09);

        --wm-cold: #60a5fa;
        --wm-hot: #fb923c;
        --wm-primary: #3b82f6;
        --wm-primary-dark: #2563eb;

        --wm-success-bg: rgba(34, 197, 94, 0.12);
        --wm-success-border: rgba(34, 197, 94, 0.35);
        --wm-success-text: #86efac;

        --wm-danger-bg: rgba(220, 53, 69, 0.12);
        --wm-danger-border: rgba(220, 53, 69, 0.4);
        --wm-danger-text: #f3a4ac;
        --wm-danger-icon-bg: rgba(220, 53, 69, 0.22);
        --wm-danger-icon-text: #f3a4ac;
    }

    body {
        background:
            linear-gradient(
                135deg,
                rgba(59, 130, 246, 0.14),
                rgba(14, 165, 165, 0.08)
            ),
            var(--wm-bg);
    }

    .water-logo {
        filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45));
    }

    .text-muted {
        color: var(--wm-muted) !important;
    }

    .water-card .form-select option {
        color: var(--wm-text);
        background: var(--wm-input-bg);
    }

    .form-error-text {
        opacity: 1;
    }
}