/* dashboard.css - efektowny layout kokpitu. Style z tokens.css, zero inline styles. */

.shell {
  display: grid;
  grid-template-columns: 248px 1fr;
  grid-template-rows: 76px 1fr;
  min-height: 100vh;
}

/* ----- topbar ----- */
.topbar {
  grid-column: 1 / 3; grid-row: 1;
  display: flex; align-items: center; gap: var(--s6);
  padding: 0 var(--s6);
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 20;
}
.tb-left { display: flex; align-items: center; gap: var(--s4); min-width: 248px; }
.brand-logo { height: 48px; width: auto; display: block; }
.brand-divider { width: 1px; height: 26px; background: var(--border); }
.brand-name { font-weight: 600; font-size: 15px; letter-spacing: .2px; }
.brand-name b { color: var(--accent); }
.tb-search { flex: 1; display: flex; justify-content: center; }
.tb-search input {
  width: 100%; max-width: 460px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; color: var(--text); padding: 10px var(--s4);
  font-size: 14px; font-family: var(--font);
}
.tb-search input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.tb-refresh { display: flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: 12px; color: var(--text-muted); background: var(--surface);
  border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px; }
.tb-refresh b { color: var(--text); font-family: var(--mono); font-weight: 600; }
.tb-refresh .tbr-ico { color: var(--accent); font-size: 13px; }
.theme-switch { display: flex; align-items: center; gap: 4px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 999px; padding: 3px; }
.theme-switch button { width: 30px; height: 30px; border-radius: 999px; border: none; cursor: pointer;
  background: none; color: var(--text-muted); font-size: 14px; display: grid; place-items: center; }
.theme-switch button:hover { color: var(--text); }
.theme-switch button.active { background: var(--accent-soft); color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent); }
.tb-user { display: flex; align-items: center; gap: var(--s3); }
.tb-user-txt { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.tb-name { font-size: 13px; font-weight: 600; }
.tb-role { font-size: 11px; color: var(--text-muted); }
.tb-avatar {
  width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--accent), #7b5cff); color: #fff;
  font-size: 12px; font-weight: 700;
}

/* ----- sidebar ----- */
.sidebar {
  grid-column: 1; grid-row: 2;
  background: var(--sidebar-bg); border-right: 1px solid var(--border);
  padding: var(--s4) var(--s3); display: flex; flex-direction: column; gap: var(--s2);
}
.nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.nav-sec { font-size: 10px; letter-spacing: 1px; color: var(--text-muted);
  margin: var(--s4) var(--s3) var(--s2); text-transform: uppercase; }
.nav-item {
  display: flex; align-items: center; gap: var(--s3);
  padding: 10px var(--s3); border-radius: var(--r-el);
  color: var(--text-muted); font-size: 14px; cursor: pointer; text-decoration: none;
}
.nav-item:hover { background: var(--surface); color: var(--text); }
.nav-item.active { background: var(--accent-soft); color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(76,141,255,.35); }
.nav-ico { width: 18px; text-align: center; opacity: .8; }
.nav-dot { width: 9px; height: 9px; border-radius: 999px; margin: 0 4px; }
.nav-badge { margin-left: auto; font-family: var(--mono); font-size: 12px;
  color: var(--text-muted); min-width: 18px; text-align: right; }
.nav-logout { margin-top: var(--s4); background: var(--surface); color: var(--text-muted);
  border: 1px solid var(--border); border-radius: var(--r-el); padding: 10px;
  font-family: var(--font); font-size: 13px; cursor: pointer; }
.nav-logout:hover { color: var(--text); border-color: var(--accent); }

/* ----- content ----- */
.content { grid-column: 2; grid-row: 2; overflow-y: auto; padding: var(--s6) var(--s8); }

/* ----- hero ----- */
.hero { display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s4); margin-bottom: var(--s6); flex-wrap: wrap; }
.hero h1 { font-size: 26px; margin: 0 0 4px; letter-spacing: -.3px; }
.hero h1 b { color: var(--accent); font-weight: 700; }
.hero .sub { color: var(--text-muted); font-size: 14px; margin: 0; }
.hero-pill { display: inline-flex; align-items: center; gap: var(--s2);
  padding: 8px var(--s4); border-radius: 999px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--border); white-space: nowrap; }
.hero-pill .dot { width: 9px; height: 9px; border-radius: 999px; }

/* ----- KPI cards ----- */
.kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4); margin-bottom: var(--s6); }
.kpi { position: relative; overflow: hidden;
  background: var(--kpi-bg);
  border: 1px solid var(--border); border-radius: var(--r-card); padding: var(--s4) var(--s4) var(--s6); }
.kpi .label { color: var(--text-muted); font-size: 13px; display: flex; align-items: center; gap: var(--s2); }
.kpi .num { font-size: 38px; font-weight: 700; line-height: 1.1; margin: var(--s2) 0 2px; font-family: var(--mono); }
.kpi .note { color: var(--text-muted); font-size: 12px; }
.kpi .spark { position: absolute; bottom: 0; left: 0; right: 0; height: 38px; opacity: .55; }
.kpi.k-green .num { color: var(--green); }
.kpi.k-red .num { color: var(--red); }
.kpi.k-nodata .num { color: var(--nodata); }

/* ----- cockpit grid (main + rail) ----- */
.cockpit-grid { display: grid; grid-template-columns: 1fr 320px; gap: var(--s6); align-items: start; }
.cockpit-main { min-width: 0; }

/* tabs */
.tabs { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s4);
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 5px; flex-wrap: wrap; }
.tab { display: inline-flex; align-items: center; gap: var(--s2); padding: 7px var(--s4);
  border-radius: 999px; font-size: 13px; color: var(--text-muted); cursor: pointer; border: none; background: none; font-family: var(--font); }
.tab .dot { width: 8px; height: 8px; border-radius: 999px; }
.tab .c { font-family: var(--mono); opacity: .8; }
.tab.active { background: var(--accent-soft); color: var(--text); box-shadow: inset 0 0 0 1px rgba(76,141,255,.35); }
.dot-ALL { background: var(--accent); }
.self-badge { font-size: 10px; letter-spacing: .4px; text-transform: uppercase; color: var(--accent);
  border: 1px solid var(--accent); border-radius: 4px; padding: 2px 6px; }

/* ----- right rail ----- */
.rail { display: flex; flex-direction: column; gap: var(--s4); position: sticky; top: var(--s4); }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: var(--s4); }
.panel h3 { font-size: 14px; margin: 0 0 var(--s3); }
.panel .ptag { font-size: 10px; letter-spacing: .5px; color: var(--accent); border: 1px solid rgba(76,141,255,.4);
  border-radius: 4px; padding: 1px 5px; margin-left: var(--s2); }
.react-item { display: flex; gap: var(--s3); padding: var(--s3) 0; border-top: 1px solid var(--border); cursor: pointer; }
.react-item:first-of-type { border-top: none; }
.react-item .rdot { width: 10px; height: 10px; border-radius: 999px; margin-top: 4px; flex: none; }
.react-item .rname { font-weight: 600; font-size: 13px; }
.react-item .ract { color: var(--text-muted); font-size: 12px; }
.react-empty { color: var(--text-muted); font-size: 13px; }
.summary-bar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; margin-bottom: var(--s3); background: var(--surface-2); }
.summary-bar span { height: 100%; }
.seg-GREEN { background: var(--green); } .seg-YELLOW { background: var(--yellow); }
.seg-RED { background: var(--red); } .seg-NO_DATA { background: var(--nodata); }
.summary-row { display: flex; align-items: center; gap: var(--s2); font-size: 13px; padding: 4px 0; }
.summary-row .sc { margin-left: auto; font-family: var(--mono); }

/* ----- AI Pulse (lekki panel wnioskow, nie druga lista systemow) ----- */
.pulse { border-color: rgba(76,141,255,.35); }
.pulse-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s2); }
.pulse-head h3 { margin: 0; }
.pulse-ro { font-size: 10px; letter-spacing: .4px; text-transform: uppercase; color: var(--text-muted); }
.pulse-status { font-size: 13px; line-height: 1.45; margin: 0 0 var(--s3); color: var(--text); }
.pulse-list { display: flex; flex-direction: column; }
.pulse-rec { padding: var(--s3) 0; border-top: 1px solid var(--border); }
.pulse-rec:first-child { border-top: none; padding-top: 0; }
.pulse-rec p { margin: 0; font-size: 13px; line-height: 1.5; }
.pulse-eff { color: var(--text-muted); }
.pulse-meta { display: flex; align-items: center; gap: var(--s2); margin-top: 4px; }
.pulse-who { font-size: 10px; letter-spacing: .3px; text-transform: uppercase; color: var(--accent);
  border: 1px solid rgba(76,141,255,.4); border-radius: 4px; padding: 1px 5px; }
.pulse-src { font-size: 10px; color: var(--text-muted); }
.pulse-empty { font-size: 13px; color: var(--text-muted); margin: 0; }
.pulse-link { background: none; border: none; color: var(--accent); font-size: 12px; padding: var(--s2) 0; cursor: pointer; }
.pulse-decision { margin-top: var(--s3); padding: var(--s3); background: var(--surface-2);
  border-radius: var(--r-el); font-size: 13px; line-height: 1.45; }
.pulse-tag { display: block; font-size: 10px; letter-spacing: .5px; text-transform: uppercase;
  color: var(--accent); margin-bottom: 4px; }
.pulse-actions { display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--s3); }
.pulse-btn { font-size: 12px; padding: 8px 10px; border-radius: var(--r-el); border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text); cursor: pointer; text-align: left; }
.pulse-btn:hover { border-color: var(--accent); }
.pulse-out:empty { display: none; }
.pulse-report { margin-top: var(--s3); }
.pulse-area { width: 100%; min-height: 150px; background: var(--bg); color: var(--text); border: 1px solid var(--border);
  border-radius: var(--r-el); padding: var(--s2); font-family: var(--mono); font-size: 11px; resize: vertical; }
.pulse-note { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.pulse-explain { font-size: 12px; line-height: 1.5; margin: var(--s3) 0 0; }
.pulse-foot { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--border);
  font-size: 11px; color: var(--text-muted); line-height: 1.4; }

/* ----- footer ----- */
.foot { margin-top: var(--s8); padding-top: var(--s4); border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; color: var(--text-muted); font-size: 12px; flex-wrap: wrap; gap: var(--s2); }

/* ----- responsywnosc ----- */
@media (max-width: 1100px) {
  .cockpit-grid { grid-template-columns: 1fr; }
  .rail { position: static; flex-direction: column; }
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .shell { grid-template-columns: 1fr; grid-template-rows: 56px auto 1fr; }
  .topbar { grid-column: 1; }
  .tb-search { display: none; }
  .sidebar { grid-column: 1; grid-row: 2; flex-direction: row; overflow-x: auto; border-right: none; border-bottom: 1px solid var(--border); }
  .nav { flex-direction: row; }
  .nav-sec, .nav-badge, .nav-logout { display: none; }
  .content { grid-column: 1; grid-row: 3; padding: var(--s4); }
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
  .brand-name { display: none; }
}