/* ═══════════════════════════════════════════════════════════════════════════
   oblozenie.css — widok „Obłożenie wizyt" (#view-oblozenie).
   Scoped do #view-oblozenie → wygrywa specyficznością BEZ !important.
   WYŁĄCZNIE tokeny --nh-*/--space/--radius/--icon; zero literałów, zero !important.
   Sidebar granatowy dziedziczony globalnie; tu tylko kremowa treść + kafle/tabele.
   ═══════════════════════════════════════════════════════════════════════════ */

#view-oblozenie{
  background:linear-gradient(165deg,var(--nh-bg-top) 0%,var(--nh-bg-mid) 42%,var(--nh-bg-bot) 100%);
  color:var(--nh-text);
  font-family:var(--nh-font-body);
  min-height:100%;
}
#view-oblozenie .ob-wrap{ max-width:1240px; margin:0 auto; padding:var(--space-5) var(--space-6) var(--space-6); }

/* ── nagłówek + filtry ── */
#view-oblozenie .ob-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-5); flex-wrap:wrap; margin-bottom:var(--space-5); }
#view-oblozenie .ob-eyebrow{ font-family:var(--nh-font-mono); font-size:11px; letter-spacing:var(--nh-ls-head); text-transform:uppercase; color:var(--nh-accent); display:flex; align-items:center; gap:var(--space-2); margin:0 0 var(--space-2); }
#view-oblozenie .ob-eyebrow::before{ content:""; width:6px; height:6px; border-radius:var(--nh-r-pill); background:var(--nh-accent-warm); }
#view-oblozenie h1.ob-title{ font-family:var(--nh-font-head); font-size:28px; font-weight:700; letter-spacing:-.01em; line-height:1.18; margin:0; color:var(--nh-text); }
#view-oblozenie .ob-sub{ font-size:13px; color:var(--nh-text-2); margin:var(--space-1) 0 0; }

#view-oblozenie .ob-filters{ display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap; }
#view-oblozenie .ob-pills{ display:inline-flex; background:var(--nh-field); border:1px solid var(--nh-line); border-radius:var(--nh-r-pill); padding:2px; }
#view-oblozenie .ob-pills button{ font-family:var(--nh-font-btn); font-size:12.5px; color:var(--nh-text-2); background:transparent; border:0; border-radius:var(--nh-r-pill); padding:6px 12px; cursor:pointer; }
#view-oblozenie .ob-pills button.on{ background:var(--nh-surface); color:var(--nh-text); box-shadow:var(--nh-sh-card); }
#view-oblozenie .ob-custom{ display:inline-flex; align-items:center; gap:var(--space-1); }
#view-oblozenie .ob-custom[hidden]{ display:none; }
#view-oblozenie input[type=date], #view-oblozenie select.ob-sel{
  font-family:var(--nh-font-body); font-size:12.5px; color:var(--nh-text);
  background:var(--nh-surface); border:1px solid var(--nh-line); border-radius:var(--radius-sm); padding:7px 10px;
}
#view-oblozenie select.ob-sel{ cursor:pointer; }

/* ── KPI ── */
#view-oblozenie .ob-kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-4); margin-bottom:var(--space-4); }
#view-oblozenie .ob-card{ background:var(--nh-surface); border:1px solid var(--nh-line); border-radius:var(--nh-r-card); box-shadow:var(--nh-sh-card); padding:var(--nh-pad-card); min-width:0; }
#view-oblozenie .ob-lbl{ font-family:var(--nh-font-head); font-size:10px; font-weight:700; letter-spacing:var(--nh-ls-head); text-transform:uppercase; color:var(--nh-text-2); margin-bottom:var(--space-3); display:flex; align-items:center; gap:6px; }
#view-oblozenie .ob-val{ font-family:var(--nh-font-head); font-size:30px; font-weight:300; line-height:1; color:var(--nh-text); font-variant-numeric:tabular-nums; }
#view-oblozenie .ob-val .u{ font-size:14px; color:var(--nh-text-2); font-weight:400; margin-left:2px; }
#view-oblozenie .ob-hint{ font-size:11.5px; color:var(--nh-text-2); margin-top:var(--space-2); }
#view-oblozenie .ob-hint b{ color:var(--nh-accent); font-weight:600; }
#view-oblozenie .ob-card.ob-warm .ob-hint b{ color:var(--nh-accent-warm); }

/* ── siatka sekcji ── */
#view-oblozenie .ob-2col{ display:grid; grid-template-columns:1.12fr .88fr; gap:var(--space-4); margin-bottom:var(--space-4); }
#view-oblozenie .ob-sec-head{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); margin-bottom:var(--space-4); }
#view-oblozenie h2.ob-h2{ font-family:var(--nh-font-head); font-size:15px; font-weight:600; letter-spacing:-.01em; margin:0; color:var(--nh-text); }
#view-oblozenie .ob-note{ font-family:var(--nh-font-mono); font-size:11px; color:var(--nh-text-muted); }

/* ── tabele + paski ── */
#view-oblozenie table.ob-tb{ width:100%; border-collapse:collapse; font-size:13px; font-variant-numeric:tabular-nums; }
#view-oblozenie .ob-tb thead th{ font-family:var(--nh-font-head); font-size:10px; letter-spacing:var(--nh-ls-section); text-transform:uppercase; color:var(--nh-text-muted); text-align:right; padding:var(--space-2) var(--space-3) var(--space-3) 0; border-bottom:1px solid var(--nh-line); font-weight:700; }
#view-oblozenie .ob-tb thead th:first-child{ text-align:left; }
#view-oblozenie .ob-tb tbody td{ padding:var(--space-3) var(--space-3) var(--space-3) 0; border-bottom:1px solid var(--nh-line-soft); text-align:right; color:var(--nh-text); }
#view-oblozenie .ob-tb tbody td:first-child{ text-align:left; font-weight:600; }
#view-oblozenie .ob-tb tbody td.num{ font-family:var(--nh-font-mono); font-size:12px; color:var(--nh-text-2); }
#view-oblozenie .ob-occ{ display:flex; align-items:center; gap:var(--space-3); min-width:160px; }
#view-oblozenie .ob-track{ flex:1; height:8px; background:var(--nh-field); border-radius:var(--radius-sm); overflow:hidden; }
#view-oblozenie .ob-fill{ height:100%; background:var(--nh-accent); border-radius:var(--radius-sm); }
#view-oblozenie .ob-fill.lo{ background:var(--nh-accent-warm); }
#view-oblozenie .ob-pct{ min-width:52px; text-align:right; font-weight:600; font-variant-numeric:tabular-nums; color:var(--nh-text); }
#view-oblozenie .ob-pct.na{ color:var(--nh-text-muted); font-weight:400; }
#view-oblozenie .ob-av{ width:30px; height:30px; border-radius:var(--nh-r-pill); background:var(--nh-group-blue); color:var(--nh-accent); display:inline-grid; place-items:center; font-size:11px; font-weight:700; margin-right:var(--space-2); vertical-align:middle; }

/* ── grafik note / cookie ── */
#view-oblozenie .ob-graf{ display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap; padding:var(--space-3) var(--space-4); border-radius:var(--nh-r-card); border:1px solid var(--nh-warn-br); background:var(--nh-warn-bg); color:var(--nh-warn-text); font-size:12.5px; margin-bottom:var(--space-4); }
#view-oblozenie .ob-graf.ok{ border-color:var(--nh-line); background:var(--nh-group-neutral); color:var(--nh-text-2); }
#view-oblozenie .ob-graf .grow{ flex:1; }
#view-oblozenie .ob-graf input{ font-family:var(--nh-font-mono); font-size:12px; min-width:220px; flex:1; background:var(--nh-surface); border:1px solid var(--nh-line); border-radius:var(--radius-sm); padding:7px 10px; color:var(--nh-text); }
#view-oblozenie .ob-btn{ font-family:var(--nh-font-btn); font-size:12.5px; font-weight:600; border-radius:var(--nh-r-btn); padding:8px 14px; cursor:pointer; border:1px solid var(--btn-primary-bg); background:var(--btn-primary-bg); color:var(--btn-primary-fg); }
#view-oblozenie .ob-btn.ghost{ background:var(--btn-ghost-bg); color:var(--btn-ghost-fg); border-color:var(--btn-ghost-border); }

/* ── rozbicie strat (stacked) ── */
#view-oblozenie .ob-stack{ height:16px; border-radius:var(--radius-sm); overflow:hidden; display:flex; margin:var(--space-2) 0 var(--space-4); background:var(--nh-field); }
#view-oblozenie .ob-stack i{ height:100%; display:block; }
#view-oblozenie .ob-stack .s-idle{ background:var(--nh-group-neutral); }
#view-oblozenie .ob-stack .s-canc{ background:var(--nh-accent-warm); }
#view-oblozenie .ob-stack .s-noshow{ background:var(--nh-miss-text); }
#view-oblozenie .ob-leg{ display:flex; flex-direction:column; gap:var(--space-2); }
#view-oblozenie .ob-leg-row{ display:flex; align-items:center; gap:var(--space-2); font-size:12.5px; }
#view-oblozenie .ob-leg-row .sw{ width:10px; height:10px; border-radius:3px; flex:0 0 auto; }
#view-oblozenie .ob-leg-row .lb{ flex:1; color:var(--nh-text-2); }
#view-oblozenie .ob-leg-row .ac{ color:var(--nh-text-muted); font-size:11px; }
#view-oblozenie .ob-leg-row .vv{ font-family:var(--nh-font-mono); font-weight:600; color:var(--nh-text); }

/* ── wolne okna ── */
#view-oblozenie .ob-slot{ display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3) 0; border-bottom:1px solid var(--nh-line-soft); }
#view-oblozenie .ob-slot:last-child{ border-bottom:0; }
#view-oblozenie .ob-slot .when{ font-family:var(--nh-font-mono); font-size:12.5px; font-weight:600; color:var(--nh-text); min-width:118px; }
#view-oblozenie .ob-slot .when .d{ display:block; font-weight:400; color:var(--nh-text-2); font-size:11px; }
#view-oblozenie .ob-slot .meta{ flex:1; font-size:13px; color:var(--nh-text); }
#view-oblozenie .ob-slot .meta .g{ color:var(--nh-text-2); font-size:11.5px; }
#view-oblozenie .ob-slot .len{ font-family:var(--nh-font-mono); font-size:11.5px; font-weight:600; color:var(--nh-accent-warm); }
#view-oblozenie .ob-empty{ padding:var(--space-4); color:var(--nh-text-muted); font-size:12.5px; text-align:center; }

/* ── revenue ── */
#view-oblozenie .ob-rev{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-4); }

#view-oblozenie .ob-loading{ grid-column:1/-1; padding:var(--space-5); color:var(--nh-text-muted); font-size:12.5px; text-align:center; }
#view-oblozenie .ob-err{ grid-column:1/-1; padding:var(--space-4); color:var(--nh-miss-text); background:var(--nh-miss-bg); border-radius:var(--nh-r-card); font-size:12.5px; }

@media (max-width:1000px){
  #view-oblozenie .ob-kpis{ grid-template-columns:repeat(2,1fr); }
  #view-oblozenie .ob-2col{ grid-template-columns:1fr; }
  #view-oblozenie .ob-rev{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  #view-oblozenie .ob-wrap{ padding:var(--space-4) var(--space-4) var(--space-5); }
  #view-oblozenie .ob-head{ flex-direction:column; align-items:stretch; gap:var(--space-3); }
  #view-oblozenie h1.ob-title{ font-size:23px; }
  #view-oblozenie .ob-filters{ width:100%; }
  #view-oblozenie .ob-pills{ width:100%; justify-content:space-between; }
  #view-oblozenie .ob-pills button{ padding:6px 8px; }
  #view-oblozenie select.ob-sel{ flex:1; min-width:0; }
  #view-oblozenie .ob-custom{ width:100%; }
  #view-oblozenie .ob-custom input[type=date]{ flex:1; }
  #view-oblozenie .ob-kpis{ gap:var(--space-3); }
  #view-oblozenie .ob-val{ font-size:26px; }
  /* tabele: przewijaj poziomo WEWNĄTRZ karty, nie łam layoutu */
  #view-oblozenie #ob-gab, #view-oblozenie #ob-lek{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  #view-oblozenie table.ob-tb{ min-width:520px; }
  /* iOS: 16px, żeby nie zoomował przy focusie inputa */
  #view-oblozenie input[type=date], #view-oblozenie select.ob-sel, #view-oblozenie .ob-graf input{ font-size:16px; }
  #view-oblozenie .ob-graf{ flex-direction:column; align-items:stretch; }
  #view-oblozenie .ob-graf input{ min-width:0; width:100%; }
  #view-oblozenie .ob-btn{ width:100%; }
}
@media (max-width:420px){
  #view-oblozenie .ob-kpis{ grid-template-columns:1fr; }
}