/* ── HERO (shared with obszar_details) — reuse hero classes from base ── */
.hero { background:#fff; border-bottom:1px solid var(--border); padding:20px 40px 24px; box-shadow:0 2px 12px rgba(0,0,0,0.06); }
.hero-inner { max-width:960px; margin:0 auto; display:flex; align-items:center; gap:28px; }
.ring-wrap { position:relative; width:72px; height:72px; flex-shrink:0; }
.ring-wrap svg { width:72px; height:72px; }
.ring-num { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:19px; font-weight:700; color:var(--teal-dark); }
.score-info .lbl  { font-size:10px; color:var(--text3); text-transform:uppercase; letter-spacing:1px; margin-bottom:3px; font-weight:600; }
.score-info .desc { font-size:13.5px; color:var(--text); font-weight:500; }
.score-trend { display:inline-flex; align-items:center; font-size:11px; font-weight:600; background:var(--teal-light); color:var(--teal-dark); border-radius:20px; padding:2px 10px; margin-top:5px; }
.vdiv { width:1px; height:42px; background:var(--border); flex-shrink:0; }
.levels { display:flex; gap:20px; }
.lv { text-align:center; }
.lv-num  { font-size:24px; font-weight:700; line-height:1; }
.lv-name { font-size:10px; color:var(--text3); margin-top:2px; font-weight:500; }
.lv.ok .lv-num    { color:var(--green); }
.lv.watch .lv-num { color:var(--blue);  }
.lv.alert .lv-num { color:var(--amber); }
.hero-right { margin-left:auto; text-align:right; }
.hero-right .name { font-size:17px; font-weight:700; color:var(--text); }
.hero-right .sub  { font-size:11.5px; color:var(--text3); margin-top:3px; }

.main { max-width:960px; margin:0 auto; padding:28px 40px 60px; }

/* VIEW SWITCHER */
.view-bar { display:flex; align-items:center; justify-content:center; margin-bottom:28px; }
.view-tabs { display:flex; background:#ffffff; border:1px solid var(--border); border-radius:10px; padding:4px; gap:2px; box-shadow:var(--shadow); }
.vtab { display:flex; align-items:center; gap:7px; padding:7px 20px; border-radius:7px; font-size:13px; font-weight:600; color:var(--text3); cursor:pointer; transition:all .15s; border:none; background:transparent; font-family:'Inter',sans-serif; }
.vtab:hover { color:var(--text2); background:var(--bg); }
.vtab.active { background:var(--teal-dark); color:#fff; box-shadow:0 1px 4px rgba(7,107,107,0.25); }
.vtab svg { width:15px; height:15px; flex-shrink:0; }

.view { display:none; }
.view.active { display:block; animation:fadeUp .25s ease both; }

/* ── AREAS VIEW ── */
.area-card { background:#fff; border:1px solid var(--border); border-radius:14px; overflow:hidden; margin-bottom:14px; box-shadow:var(--shadow); transition:box-shadow .18s; display:grid; grid-template-columns:200px 1fr; }
.area-card:hover { box-shadow:var(--shadow-md); }
.area-left { display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:12px; padding:28px 20px; border-right:1px solid var(--border); background:var(--bg); cursor:pointer; user-select:none; }
.area-left-top { display:flex; flex-direction:column; align-items:center; gap:6px; }
.area-icon { font-size:22px; line-height:1; margin-bottom:2px; }
.area-date { font-size:10px; color:var(--text3); font-weight:500; }
.area-name { font-size:13px; font-weight:700; color:var(--text); text-align:center; line-height:1.3; }

.area-score-ring { position:relative; width:90px; height:90px; }
.area-score-ring svg { width:90px; height:90px; }
.area-score-num { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; }
.area-score-val { font-size:20px; font-weight:700; line-height:1; }
.area-score-lbl { font-size:9px; color:var(--text3); font-weight:500; }

.chip { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; padding:4px 10px; border-radius:6px; flex-shrink:0; }
.chip.ok    { background:var(--green-bg);  color:var(--green); }
.chip.watch { background:var(--blue-bg);   color:var(--blue);  }
.chip.alert { background:var(--amber-bg);  color:var(--amber); }
.chip-dot { width:6px; height:6px; border-radius:50%; }
.ok    .chip-dot { background:var(--green); }
.watch .chip-dot { background:var(--blue);  }
.alert .chip-dot { background:var(--amber); }

.area-right { display:flex; flex-direction:column; }
.area-header { display:flex; align-items:center; padding:16px 20px; gap:12px; border-bottom:1px solid var(--border); }
.area-header-title { flex:1; }
.area-header-name { font-size:14px; font-weight:700; color:var(--text); }
.area-header-desc { font-size:11.5px; color:var(--text3); margin-top:2px; }
.area-recs-count { display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:600; color:var(--teal-dark); background:var(--teal-light); border-radius:6px; padding:3px 10px; flex-shrink:0; text-decoration:none; transition:background .15s; }
.area-recs-count:hover { background:#b2e0e0; }
.area-toggle { color:var(--text3); font-size:13px; transition:transform .2s; flex-shrink:0; }
.area-card.expanded .area-toggle { transform:rotate(180deg); }

.area-params { display:none; padding:16px 20px 18px; flex:1; }
.area-card.expanded .area-params { display:block; }
.params-intro { font-size:12.5px; color:var(--text2); margin-bottom:14px; line-height:1.6; }
.params-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.param-row { background:var(--bg); border-radius:9px; padding:11px 13px; display:flex; align-items:center; gap:10px; border-left:3px solid transparent; }
.param-row.ok     { border-left-color:var(--green); }
.param-row.high   { border-left-color:var(--amber); }
.param-row.urgent { border-left-color:var(--red);   }
.param-row.nodata { border-left-color:#d1d5db; opacity:0.6; }
.param-row.old    { border-left-color:#d1d5db; opacity:0.55; background:#fafafa; }
.param-info { flex:1; }
.param-name { font-size:12px; font-weight:600; color:var(--text); }
.param-sub  { font-size:10.5px; color:var(--text3); margin-top:1px; }
.param-age  { font-size:9.5px; color:var(--text3); margin-top:2px; }
.param-val-wrap { text-align:right; flex-shrink:0; }
.param-badge { display:inline-block; font-size:10px; font-weight:700; padding:2px 7px; border-radius:5px; margin-bottom:3px; }
.param-badge.ok     { background:var(--green-bg);  color:var(--green); }
.param-badge.high   { background:var(--amber-bg);  color:var(--amber); }
.param-badge.urgent { background:var(--red-bg);    color:var(--red);   }
.param-badge.nodata { background:#f3f4f6;           color:var(--text2); }
.param-badge.normal { background:#f3f4f6;           color:var(--text2); }
.param-val  { font-size:13px; font-weight:700; }
.param-val.ok     { color:var(--green); }
.param-val.high   { color:var(--amber); }
.param-val.urgent { color:var(--red); }
.param-val.nodata { color:var(--text3); font-size:12px; font-weight:500; }
.param-ref  { font-size:10px; color:var(--text3); margin-top:1px; }
.area-recs { display:flex; align-items:center; gap:8px; padding:12px 14px; background:var(--teal-light); border-radius:8px; margin-top:12px; font-size:12.5px; font-weight:600; color:var(--teal-dark); cursor:pointer; transition:background .15s; text-decoration:none; }
.area-recs:hover { background:#b2e0e0; }

.old-params-section { margin-top:18px; }
.old-params-label { display:flex; align-items:center; gap:8px; font-size:10.5px; font-weight:700; color:var(--text3); text-transform:uppercase; letter-spacing:0.8px; margin-bottom:10px; padding-top:14px; border-top:1px dashed var(--border); }
.old-params-label span { background:#f3f4f6; color:var(--text3); font-size:9.5px; font-weight:600; padding:2px 8px; border-radius:4px; text-transform:none; letter-spacing:0; }
.old-params-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; }

.area-details-link { display:inline-flex; align-items:center; justify-content:center; margin-top:12px; font-size:12px; font-weight:600; color:rgba(7,107,107,1); background:rgba(230,247,247,1); padding:8px 16px; border-radius:8px; border:none; text-decoration:none; transition:background .15s, transform .1s; width:100%; }
.area-details-link:hover { background:var(--teal); color:#fff; }

/* ── LIST VIEW ── */
.list-table { display:flex; flex-direction:column; gap:14px; }
.param-card { display:grid; grid-template-columns:280px 1fr; background:#fff; border:1px solid var(--border); border-radius:14px; overflow:hidden; box-shadow:var(--shadow); transition:box-shadow .18s; }
.param-card:hover { box-shadow:var(--shadow-md); }
.param-card-left { padding:20px 18px; border-left:4px solid var(--border); display:flex; flex-direction:column; gap:14px; background:var(--bg); }
.param-card-left.ok     { border-left-color:var(--green); }
.param-card-left.high   { border-left-color:var(--amber); }
.param-card-left.urgent { border-left-color:var(--red); }
.param-card-left.normal { border-left-color:var(--border); }
.param-card-title { font-size:16px; font-weight:700; color:var(--text); line-height:1.25; }
.param-card-subtitle { font-size:11.5px; color:var(--text3); margin-top:2px; }
.param-card-status-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.param-card-status-pill { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; padding:4px 10px; border-radius:20px; }
.param-card-status-pill.ok     { background:var(--green-bg);  color:var(--green); }
.param-card-status-pill.high   { background:var(--amber-bg);  color:var(--amber); }
.param-card-status-pill.urgent { background:var(--red-bg);    color:var(--red); }
.param-card-status-pill.normal { background:#f3f4f6; color:var(--text2); }
.param-card-value { font-size:14px; font-weight:700; }
.param-card-value.ok     { color:var(--green); }
.param-card-value.high   { color:var(--amber); }
.param-card-value.urgent { color:var(--red); }
.param-card-chart-wrap { position:relative; display:flex; align-items:flex-end; gap:10px; margin-top:4px; }
.param-card-chart { width:28px; height:88px; border-radius:6px; overflow:hidden; display:flex; flex-direction:column-reverse; background:var(--border); flex-shrink:0; }
.param-card-chart-seg { min-height:4px; }
.param-card-chart-seg.green { background:var(--green); }
.param-card-chart-seg.amber { background:rgba(249,189,185,1); }
.param-card-chart-seg.red   { background:var(--red); }
.param-card-chart-marker { position:absolute; left:34px; width:10px; height:10px; border-radius:50%; border:2px solid #fff; box-shadow:0 1px 3px rgba(0,0,0,0.2); transform:translateY(-50%); }
.param-card-chart-marker.ok     { background:var(--green); }
.param-card-chart-marker.high   { background:var(--amber); }
.param-card-chart-marker.urgent { background:var(--red); }
.param-card-chart-marker.normal { background:var(--text2); }
.param-card-chart-labels { display:flex; flex-direction:column; justify-content:space-between; font-size:10px; color:var(--text3); font-weight:600; height:88px; padding:2px 0; }
.param-card-trend-chart { width:180px; height:88px; flex-shrink:0; display:block; }
.param-card-trend-chart svg { width:100%; height:100%; display:block; }
.param-card-trend-chart .trend-line { fill:none; stroke:var(--text3); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.param-card-trend-chart .trend-point.in-range  { fill:var(--green); }
.param-card-trend-chart .trend-point.out-range { fill:var(--red); }
.param-card-trend-chart .trend-band { fill:var(--green-bg); }
.param-card-date   { font-size:10px; color:var(--text3); margin-top:6px; }
.param-card-right  { padding:20px 24px; display:flex; flex-direction:column; gap:10px; }
.param-card-recs   { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--teal-dark); text-decoration:none; }
.param-card-recs:hover { text-decoration:underline; }
.param-card-desc-title { font-size:13px; font-weight:700; color:var(--text); line-height:1.35; }
.param-card-desc       { font-size:12px; color:var(--text2); line-height:1.55; }
.param-card-tags  { display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
.param-card-tag   { display:inline-flex; align-items:center; gap:5px; font-size:11px; color:var(--text2); background:var(--bg); padding:4px 10px; border-radius:6px; }
.param-card-footer { display:flex; justify-content:flex-end; margin-top:auto; padding-top:8px; }
.param-card-btn { display:inline-flex; align-items:center; padding:8px 18px; font-size:12px; font-weight:600; color:#fff; background:var(--green); border:none; border-radius:8px; cursor:pointer; font-family:'Inter',sans-serif; text-decoration:none; }
.param-card-btn:hover { background:#15803d; }

/* ── TABLE VIEW ── */
.tbl { width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--border); border-radius:14px; overflow:hidden; box-shadow:var(--shadow); font-size:13px; }
.tbl thead tr { background:var(--bg); }
.tbl th { padding:11px 16px; text-align:left; font-size:10.5px; font-weight:700; color:var(--text3); text-transform:uppercase; letter-spacing:0.8px; border-bottom:1px solid var(--border); }
.tbl td { padding:12px 16px; border-bottom:1px solid var(--border); }
.tbl tr:last-child td { border-bottom:none; }
.tbl tr:hover td { background:#fafafa; }
.tbl tr:hover td.td-result.ok     { background:var(--green); }
.tbl tr:hover td.td-result.high   { background:rgba(255,201,107,1); }
.tbl tr:hover td.td-result.urgent { background:rgba(220,38,38,0.74); }
.tbl tr:hover td.td-result.empty  { background:var(--bg); }
.tbl .td-name { font-weight:600; }
.tbl .td-val  { font-weight:700; }
.tbl .td-val.high   { color:var(--amber); }
.tbl .td-val.urgent { color:var(--red);   }
.tbl .td-val.ok     { color:var(--green); }
.tbl .td-ref { color:var(--text3); font-size:12px; }
.tbl .td-result { font-weight:600; text-align:center; color:#fff; min-width:72px; }
.tbl .td-result.ok     { background:var(--green); }
.tbl .td-result.high   { background:rgba(255,201,107,1); }
.tbl .td-result.urgent { background:rgba(220,38,38,0.74); }
.tbl .td-result.empty  { background:var(--bg); color:var(--text3); font-weight:400; }
.tbl .td-trend { width:100px; padding:6px 10px; vertical-align:middle; }
#view-table .param-card-trend-chart { width:80px; height:36px; }
#view-table .param-card-trend-chart svg { width:100%; height:100%; }