@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=DM+Sans:wght@300;400;500&display=swap');

.llgm-dashboard {
    --ok:#10b981; --low:#f59e0b; --high:#ef4444; --accent:#3b82f6;
    --bg:#fff; --surf:#f9fafb; --brd:rgba(0,0,0,.08); --txt:#111827; --muted:#6b7280;
    --mono:'DM Sans','Space Mono',system-ui,sans-serif; --ui:'DM Sans',system-ui,sans-serif; --r:12px;
    font-family:var(--ui); color:var(--txt); width:100%; box-sizing:border-box;
}
@media(prefers-color-scheme:dark){
    .llgm-dashboard{ --bg:#0f1117; --surf:#161b27; --brd:rgba(255,255,255,.07); --txt:#e8eaf0; }
}
.llgm-dashboard *,.llgm-dashboard *::before,.llgm-dashboard *::after{ box-sizing:border-box; }

/* Hero */
.llgm-hero { display:grid; grid-template-columns:2fr 1fr 1fr; gap:1px; background:var(--brd); border:1px solid var(--brd); border-radius:var(--r); overflow:hidden; margin-bottom:14px; }
@media(max-width:700px){ .llgm-hero{ grid-template-columns:1fr; } }
.llgm-hero-cell { background:var(--bg); padding:26px 30px; }
.llgm-stat-cell { display:flex; flex-direction:column; justify-content:center; }
@media(max-width:480px){ .llgm-hero-cell{ padding:18px; } }

/* Type */
.llgm-label { font-size:11px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; display:block; }
.llgm-bignum { font-family:var(--ui,'DM Sans',system-ui,sans-serif); font-size:clamp(48px,8vw,76px); font-weight:700; line-height:1; letter-spacing:-2px; font-variant-numeric:tabular-nums; transition:color .4s; }
.llgm-unit-sm { font-family:var(--ui); font-size:16px; color:var(--muted); margin-left:6px; vertical-align:middle; font-variant-numeric:tabular-nums; }
.llgm-stat-num { font-family:var(--ui); font-size:32px; font-weight:700; margin:4px 0; line-height:1; font-variant-numeric:tabular-nums; letter-spacing:0; }
.llgm-stat-desc { font-size:12px; color:var(--muted); }

/* Colors */
.llgm-ok,.llgm-normal,.llgm-tir { color:var(--ok); }
.llgm-low,.llgm-min,.llgm-tbr    { color:var(--low); }
.llgm-high,.llgm-max,.llgm-tar   { color:var(--high); }

/* Trend */
.llgm-trend-row { display:flex; align-items:center; gap:10px; margin-top:14px; }
.llgm-trend-arrow {
    display:inline-flex; align-items:center; justify-content:center;
    width:36px; height:36px; border-radius:9px;
    background: #3b82f6;
    flex-shrink:0; transition:background .3s;
}
.llgm-trend-arrow svg { width:20px; height:20px; fill:none; stroke:#fff; stroke-width:3.5; stroke-linecap:round; stroke-linejoin:round; }
/* Barvy pozadí podle třídy trendu – nastavuje JS přes data-trend */
.llgm-trend-arrow[data-trend="trend-fast-up"]   { background:#ef4444; }
.llgm-trend-arrow[data-trend="trend-up"]        { background:#ef4444; }
.llgm-trend-arrow[data-trend="trend-slow-up"]   { background:#ef4444; }
.llgm-trend-arrow[data-trend="trend-stable"]    { background:#f97316; }
.llgm-trend-arrow[data-trend="trend-slow-down"] { background:#10b981; }
.llgm-trend-arrow[data-trend="trend-down"]      { background:#10b981; }
.llgm-trend-arrow[data-trend="trend-fast-down"] { background:#10b981; }
.llgm-trend-label { font-size:14px; font-weight:500; }

/* Live dot */
.llgm-live-badge { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); margin-top:16px; }
.llgm-dot { width:7px; height:7px; border-radius:50%; background:var(--ok); flex-shrink:0; animation:llgm-pulse 2s ease-in-out infinite; }
.llgm-dot.stale{ background:var(--low); animation:none; }
@keyframes llgm-pulse{ 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.7)} }

/* Alarm */
.llgm-alarm { display:flex; align-items:center; gap:10px; padding:10px 16px; border-radius:8px; font-size:14px; font-weight:500; margin-bottom:14px; }
.llgm-alarm-low  { background:rgba(245,158,11,.1); color:#b45309; border:1px solid rgba(245,158,11,.25); }
.llgm-alarm-high { background:rgba(239,68,68,.1);  color:#b91c1c; border:1px solid rgba(239,68,68,.25); }
@media(prefers-color-scheme:dark){ .llgm-alarm-low{color:#fcd34d} .llgm-alarm-high{color:#fca5a5} }

/* Stats row */
.llgm-stats-row { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:14px; }
@media(max-width:600px){ .llgm-stats-row{ grid-template-columns:repeat(2,1fr); } }
.llgm-stat-card { background:var(--surf); border-radius:10px; padding:16px; border:1px solid var(--brd); }
.llgm-stat-card .llgm-stat-num{ font-size:22px; }

/* Graph */
.llgm-graph-card { background:var(--bg); border:1px solid var(--brd); border-radius:var(--r); padding:22px; }
.llgm-graph-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.llgm-graph-header h3 { margin:0; font-size:14px; font-weight:500; }
.llgm-pills { display:flex; gap:4px; }
.llgm-pill { font-size:12px; padding:4px 12px; border-radius:20px; border:1px solid var(--brd); background:var(--surf); color:var(--muted); cursor:pointer; font-family:var(--ui); }
.llgm-pill.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.llgm-graph-footer { display:flex; justify-content:space-between; margin-top:10px; padding-top:10px; border-top:1px solid var(--brd); font-size:11px; color:var(--muted); }
.llgm-legend { display:flex; gap:14px; }
.llgm-legend span { display:flex; align-items:center; gap:4px; }
.llgm-legend i { width:18px; height:3px; border-radius:2px; display:inline-block; }

/* Error */
.llgm-error-bar { display:flex; align-items:center; gap:8px; background:rgba(239,68,68,.08); border:1px solid rgba(239,68,68,.2); border-radius:8px; padding:12px 16px; font-size:13px; color:#ef4444; margin-bottom:14px; }

/* Compact */
.llgm-compact { display:inline-flex; align-items:center; gap:10px; padding:10px 18px; background:var(--surf); border:1px solid var(--brd); border-radius:40px; width:auto; }
.llgm-compact .llgm-bignum{ font-size:24px; letter-spacing:-1px; }
.llgm-compact .llgm-trend-arrow{ width:28px; height:28px; border-radius:7px; }
.llgm-compact .llgm-trend-arrow svg { width:16px; height:16px; }

/* ── History ─────────────────────────────────────────── */
.llgm-history {
    font-family: var(--ui, 'DM Sans', sans-serif);
    color: var(--txt, #111827);
    width: 100%;
    box-sizing: border-box;
}

.llgm-history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.llgm-history .llgm-history-header h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 500;
    color: #111827 !important;
}

@media (prefers-color-scheme: dark) {
    .llgm-history-header h2 { color: #e8eaf0; }
}

.llgm-history-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.llgm-history-status {
    font-size: 13px;
    color: var(--muted, #6b7280);
    white-space: nowrap;
}

.llgm-history-range {
    font-size: 13px;
    padding: 5px 10px;
    border: 1px solid var(--brd, rgba(0,0,0,.12));
    border-radius: 8px;
    background: var(--surf, #f9fafb);
    color: var(--txt, #111827);
    cursor: pointer;
}

.llgm-history-error {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(239,68,68,.08);
    border: 1px solid rgba(239,68,68,.2);
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 13px;
    color: #ef4444;
    margin-bottom: 14px;
}

/* Den */
.llgm-day {
    border: 1px solid var(--brd, rgba(0,0,0,.08));
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 12px;
    background: var(--bg, #fff);
}

.llgm-day-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    cursor: pointer;
    user-select: none;
    transition: background .15s;
}

.llgm-day-header:hover {
    background: var(--surf, #f9fafb);
}

.llgm-day-date {
    font-weight: 500;
    font-size: 15px;
    min-width: 110px;
}

.llgm-day-stats {
    display: flex;
    gap: 20px;
    flex: 1;
    flex-wrap: wrap;
}

.llgm-day-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.llgm-day-stat-label {
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted, #6b7280);
}

.llgm-day-stat-val {
    font-family: var(--ui, 'DM Sans', system-ui, sans-serif); font-variant-numeric: tabular-nums;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
}

.llgm-day-tir-bar {
    flex: 1;
    height: 6px;
    background: var(--surf, #f3f4f6);
    border-radius: 3px;
    overflow: hidden;
    min-width: 60px;
    max-width: 120px;
    align-self: center;
}

.llgm-day-tir-fill {
    height: 100%;
    background: var(--ok, #10b981);
    border-radius: 3px;
    transition: width .4s;
}

.llgm-day-chevron {
    font-size: 12px;
    color: var(--muted, #6b7280);
    transition: transform .25s;
    margin-left: auto;
}

.llgm-day.open .llgm-day-chevron {
    transform: rotate(180deg);
}

/* Detail */
.llgm-day-detail {
    display: none;
    border-top: 1px solid var(--brd, rgba(0,0,0,.08));
}

.llgm-day.open .llgm-day-detail {
    display: block;
}

.llgm-day-chart-wrap {
    padding: 16px 20px 8px;
    position: relative;
    height: 180px;
}

.llgm-day-readings {
    padding: 0 20px 16px;
    max-height: 260px;
    overflow-y: auto;
}

.llgm-reading-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid var(--brd, rgba(0,0,0,.05));
    font-size: 13px;
}

.llgm-reading-row:last-child { border-bottom: none; }

.llgm-reading-time {
    font-family: var(--ui, 'DM Sans', system-ui, sans-serif); font-variant-numeric: tabular-nums;
    font-size: 12px;
    color: var(--muted, #6b7280);
    min-width: 50px;
}

.llgm-reading-val {
    font-family: var(--ui, 'DM Sans', system-ui, sans-serif); font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 14px;
    min-width: 48px;
}

.llgm-reading-arrow {
    font-size: 16px;
}

.llgm-reading-ok   { color: var(--ok,  #10b981); }
.llgm-reading-low  { color: var(--low, #f59e0b); }
.llgm-reading-high { color: var(--high,#ef4444); }

/* ── Zone chart ──────────────────────────────────────── */
.llgm-zones {
    background: var(--bg, #fff);
    border: 1px solid var(--brd, rgba(0,0,0,.08));
    border-radius: var(--r, 12px);
    padding: 24px;
    margin-bottom: 20px;
}

.llgm-zones-title {
    font-size: 14px;
    font-weight: 500;
    margin: 0 0 20px;
    color: var(--txt, #111827);
}

.llgm-zones-chart {
    display: flex;
    gap: 0;
    align-items: stretch;
}

.llgm-zones-axis {
    width: 52px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding-right: 10px;
    flex-shrink: 0;
}

.llgm-zones-axis-lbl {
    font-family: var(--ui, 'DM Sans', system-ui, sans-serif); font-variant-numeric: tabular-nums;
    font-size: 10px;
    color: var(--muted, #6b7280);
    line-height: 1;
}

.llgm-zones-bar-col {
    width: 56px;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.llgm-zones-seg {
    flex-shrink: 0;
    border-left: 3px solid transparent;
    transition: opacity .2s;
}

.llgm-zones-seg:hover { opacity: .85; }

.llgm-zones-divider {
    height: 2px;
    background: var(--bg, #fff);
    flex-shrink: 0;
}

.llgm-zones-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.llgm-zones-info-row {
    display: flex;
    align-items: center;
    padding: 0 0 0 16px;
    flex-shrink: 0;
}

.llgm-zones-info-row + .llgm-zones-divider-info {
    height: 2px;
}

.llgm-zone-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--txt, #111827);
    margin-bottom: 2px;
}

.llgm-zone-range {
    font-size: 11px;
    color: var(--muted, #6b7280);
}

.llgm-zone-right {
    margin-left: auto;
    text-align: right;
    padding-right: 4px;
}

.llgm-zone-pct {
    font-family: var(--ui, 'DM Sans', system-ui, sans-serif); font-variant-numeric: tabular-nums;
    font-size: 15px;
    font-weight: 700;
    color: var(--txt, #111827);
}

.llgm-zone-time {
    font-size: 11px;
    color: var(--muted, #6b7280);
}

/* ── Animated background ─────────────────────────────── */
body.llgm-bg-active {
    background: transparent !important;
}

body.llgm-bg-active .llgm-dashboard,
body.llgm-bg-active .llgm-history,
body.llgm-bg-active .llgm-day,
body.llgm-bg-active .llgm-zones,
body.llgm-bg-active .llgm-hero-cell,
body.llgm-bg-active .llgm-stat-card,
body.llgm-bg-active .llgm-graph-card {
    background: rgba(255,255,255,0.08) !important;
    border-color: rgba(255,255,255,0.15) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #fff !important;
}

body.llgm-bg-active .llgm-bignum,
body.llgm-bg-active .llgm-stat-num,
body.llgm-bg-active .llgm-label,
body.llgm-bg-active .llgm-unit-sm,
body.llgm-bg-active .llgm-stat-desc,
body.llgm-bg-active .llgm-update-time,
body.llgm-bg-active .llgm-trend-label,
body.llgm-bg-active .llgm-day-date,
body.llgm-bg-active .llgm-day-stat-label,
body.llgm-bg-active .llgm-day-stat-val,
body.llgm-bg-active .llgm-zone-name,
body.llgm-bg-active .llgm-zone-range,
body.llgm-bg-active .llgm-zone-pct,
body.llgm-bg-active .llgm-zone-time,
body.llgm-bg-active .llgm-reading-time,
body.llgm-bg-active .llgm-reading-val,
body.llgm-bg-active .llgm-history-header h2,
body.llgm-bg-active .llgm-zones-title {
    color: #fff !important;
}

body.llgm-bg-active .llgm-label,
body.llgm-bg-active .llgm-stat-desc,
body.llgm-bg-active .llgm-update-time,
body.llgm-bg-active .llgm-day-stat-label,
body.llgm-bg-active .llgm-zone-range,
body.llgm-bg-active .llgm-zone-time,
body.llgm-bg-active .llgm-reading-time {
    color: rgba(255,255,255,0.65) !important;
}

body.llgm-bg-active .llgm-day-header:hover {
    background: rgba(255,255,255,0.05) !important;
}

body.llgm-bg-active .llgm-hero {
    background: rgba(255,255,255,0.06) !important;
}

body.llgm-bg-active .llgm-pills .llgm-pill {
    background: rgba(255,255,255,0.1) !important;
    border-color: rgba(255,255,255,0.2) !important;
    color: rgba(255,255,255,0.8) !important;
}

body.llgm-bg-active .llgm-pill.active {
    background: #3b82f6 !important;
    color: #fff !important;
}

body.llgm-bg-active .llgm-day-tir-bar {
    background: rgba(255,255,255,0.15) !important;
}

body.llgm-bg-active .llgm-history-range {
    background: rgba(255,255,255,0.1) !important;
    border-color: rgba(255,255,255,0.2) !important;
    color: #fff !important;
}

body.llgm-bg-active .llgm-reading-row {
    border-color: rgba(255,255,255,0.08) !important;
}

/* ── Background active — page body ──────────────────── */
body.llgm-bg-active {
    background: transparent !important;
    min-height: 100vh;
}

body.llgm-bg-active #page,
body.llgm-bg-active #wrapper,
body.llgm-bg-active .site,
body.llgm-bg-active main,
body.llgm-bg-active #main,
body.llgm-bg-active .site-content,
body.llgm-bg-active #content {
    background: transparent !important;
}

/* ── Override theme backgrounds when bg is active ───── */
body.llgm-bg-active .container-wrap,
body.llgm-bg-active .project-title,
body.llgm-bg-active #page-header-wrap,
body.llgm-bg-active #page,
body.llgm-bg-active #wrapper,
body.llgm-bg-active .site,
body.llgm-bg-active main,
body.llgm-bg-active #main,
body.llgm-bg-active .site-content,
body.llgm-bg-active #content,
body.llgm-bg-active .entry-content,
body.llgm-bg-active .hentry,
body.llgm-bg-active article {
    background-color: transparent !important;
    background: transparent !important;
}

body.llgm-bg-active #llgm-bg-canvas {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

body.llgm-bg-active .container-wrap {
    position: relative !important;
    z-index: 1 !important;
}

/* ── Split row: glykémie 30% + graf 70% ─────────────── */
.llgm-row-split {
    display: grid;
    grid-template-columns: 35fr 65fr;
    gap: 14px;
    margin-bottom: 14px;
    align-items: stretch;
}

.llgm-split-left {
    display: flex;
    flex-direction: column;
    padding: 16px 14px;
}

/* Honeycomb grid v levém panelu */
.llgm-split-left.llgm-zones-wrap {
    display: none; /* přepíše JS na flex */
}

.llgm-zones-hex-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    align-items: start;
}

.llgm-split-right {
    min-width: 0;
}

@media (max-width: 700px) {
    .llgm-row-split {
        grid-template-columns: 1fr;
    }
}