/* ============================================================
   Dexcom Readings Chart — Consolidated Stylesheet
   ============================================================ */

/* ---------- CSS Custom Properties (theme tokens) ---------- */
:root {
    --logo-bg-start: #ffffff;
    --logo-bg-end: #f8fafc;
    --logo-stroke: #e2e8f0;
    --hull-start: #b45309;
    --hull-end: #92400e;
    --house-fill: #78350f;
    --roof-fill: #451a03;
    --window-fill: #bae6fd;
    --wave-stroke: #059669;
    --wave-stroke-width: 3.5;
    --wave-fill: rgba(186, 230, 253, 0.6);
}

.dark {
    --logo-bg-start: #1a3550;
    --logo-bg-end: #0d1f33;
    --logo-stroke: #2a4a6b;
    --hull-start: #78350f;
    --hull-end: #451a03;
    --house-fill: #5c240a;
    --roof-fill: #3d1806;
    --window-fill: #0ea5e9;
    --wave-stroke: #34d399;
    --wave-stroke-width: 2.5;
    --wave-fill: rgba(10, 22, 40, 0.75);
}

/* ---------- Base ---------- */
html,
body {
    height: 100%;
    overflow: hidden;
    touch-action: none;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

/* ---------- Highcharts tooltip fine-tune ---------- */
.highcharts-tooltip span {
    border-radius: 6px !important;
    padding: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Help users with Chrome's Force Dark Mode: pin tooltip colors */
.force-dark-tooltip {
    color-scheme: only dark;
    color: #e5e7eb !important;
    background: rgba(15, 23, 42, 0.96) !important;
    border-color: #0b1220 !important;
}

@media (prefers-color-scheme: light) {
    .force-dark-tooltip {
        color-scheme: only light;
        color: #111827 !important;
        background: rgba(255, 255, 255, 0.98) !important;
        border-color: #e5e7eb !important;
    }
}

/* ---------- Landscape compact mode (small devices) ---------- */
@media (max-width: 950px) and (min-width: 600px) and (max-height: 600px) and (min-height: 400px) and (orientation: landscape) {
    #statCard {
        display: none;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    #statCardContainer {
        display: none;
    }

    .latest-label {
        font-size: 0.9rem;
    }

    .latest-value {
        font-size: 1.75rem;
    }

    .latest-time {
        font-size: 0.85rem;
        margin-top: 0.25rem;
    }

    /* Adjust mobile buttons spacing */
    #statCard .grid.grid-cols-5 button {
        padding-top: 0.4rem;
        padding-bottom: 0.4rem;
        font-size: 0.8rem;
    }

    /* Reduce overall section margin */
    #statCard+.rounded-2xl {
        margin-top: 0.25rem;
    }

    /* Hide title/description, show header latest value */
    .hide-ml {
        display: none;
    }

    #headerLatestValue {
        display: block;
    }

    /* Hide trail in ultra-compact landscape */
    #readingTrail {
        display: none !important;
    }
}