/* ebr-studio — shell (Jasny SaaS, wzorzec Bootstrap Dashboard).
   Bez buildu: ręczny CSS nad Bootstrap 5.3. Tryb ciemny = data-bs-theme. */

:root {
  --app-sidebar-w: 248px;
  --app-bg: #f6f7f9;
  --app-sidebar-bg: #ffffff;
  --app-radius: .75rem;
}
[data-bs-theme="dark"] {
  --app-bg: #15171c;
  --app-sidebar-bg: #1b1e24;
}

body { background: var(--app-bg); }

/* Layout ------------------------------------------------------------------ */
.app-shell { display: flex; min-height: 100vh; }
.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app-content { flex: 1; }

/* Sidebar ----------------------------------------------------------------- */
.app-sidebar {
  width: var(--app-sidebar-w);
  background: var(--app-sidebar-bg);
  border-right: 1px solid var(--bs-border-color);
  padding: 0;
}
@media (min-width: 992px) {
  .app-sidebar {
    position: sticky; top: 0; height: 100vh;
    overflow-y: auto; flex: 0 0 var(--app-sidebar-w);
  }
}
.app-sidebar-head {
  height: 60px; padding: 0 1.1rem;
  border-bottom: 1px solid var(--bs-border-color);
}
.app-brand {
  font-weight: 700; font-size: 1.1rem; letter-spacing: -.02em;
  color: var(--bs-emphasis-color); text-decoration: none;
}
.app-nav { padding: .75rem .6rem; gap: .1rem; }
.app-nav-label {
  font-size: .7rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; color: var(--bs-secondary-color);
  padding: .75rem .65rem .25rem;
}
.app-nav .nav-link {
  display: flex; align-items: center; gap: .65rem;
  padding: .5rem .65rem; border-radius: .5rem;
  color: var(--bs-body-color); font-size: .925rem;
}
.app-nav .nav-link i { font-size: 1.05rem; opacity: .8; }
.app-nav .nav-link:hover { background: var(--bs-tertiary-bg); }
.app-nav .nav-link.active {
  background: rgba(13,110,253,.1); color: var(--bs-primary); font-weight: 600;
}
.app-nav .nav-link.active i { opacity: 1; }

/* Topbar ------------------------------------------------------------------ */
.app-topbar {
  position: sticky; top: 0; z-index: 1020;
  display: flex; align-items: center; gap: .75rem;
  height: 60px; padding: 0 1.25rem;
  background: var(--app-sidebar-bg);
  border-bottom: 1px solid var(--bs-border-color);
}
.app-topbar-title { letter-spacing: -.01em; }

/* Karty / treść ----------------------------------------------------------- */
.app-content .card {
  border: 1px solid var(--bs-border-color);
  border-radius: var(--app-radius);
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
}
.stat-card .stat-icon {
  width: 42px; height: 42px; border-radius: .6rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; background: rgba(13,110,253,.1); color: var(--bs-primary);
}
.stat-card .stat-value { font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
.stat-card .stat-label {
  font-size: .8rem; color: var(--bs-secondary-color);
  text-transform: uppercase; letter-spacing: .04em;
}

/* Opis kalkulatora — czytelny panel ze streszczeniem + hinty + źródło ----- */
.calc-opis {
  background: var(--bs-tertiary-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: .6rem;
  padding: 1rem 1.1rem;
  font-size: .92rem;
}
.calc-lead { margin: 0 0 .65rem; }
.calc-hints { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
.calc-hints li { display: flex; gap: .55rem; align-items: flex-start; }
.calc-hints li::before {
  content: "✓"; color: var(--bs-primary); font-weight: 700; line-height: 1.4;
}

.opis-src { margin-top: .75rem; }
.opis-src > summary {
  cursor: pointer; color: var(--bs-primary); font-weight: 500;
  list-style: none; display: inline-flex; align-items: center; gap: .3rem;
}
.opis-src > summary::-webkit-details-marker { display: none; }
.opis-src > summary::before { content: "▸"; font-size: .8em; }
.opis-src[open] > summary::before { content: "▾"; }
.opis-src .opis-body {
  margin-top: .6rem; padding: .8rem .95rem;
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: .5rem; font-size: .86rem;
}
.opis-src .opis-body ul { margin: .4rem 0 0; padding-left: 1.1rem; }
.opis-src .opis-body li { margin-bottom: .2rem; }

/* Wynik kalkulatora — czytelne wiersze etykieta/wartość ------------------- */
.calc-result .calc-headline { font-size: 1.9rem; font-weight: 700; line-height: 1.1; }
.calc-result .calc-rows { font-size: .9rem; }
.calc-result .calc-rows .row-line {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .3rem 0; border-bottom: 1px solid var(--bs-border-color);
}
.calc-result .calc-rows .row-line:last-child { border-bottom: 0; }
.calc-result .calc-rows .row-total {
  font-weight: 700; border-bottom: 0; padding-top: .5rem;
}
.calc-result .calc-foot { font-size: .8rem; opacity: .85; margin-top: .6rem; }

/* Dostępność -------------------------------------------------------------- */
.skip-link {
  position: absolute; left: .75rem; top: -3rem; z-index: 2000;
  padding: .5rem .9rem; border-radius: .5rem;
  background: var(--bs-primary); color: #fff; text-decoration: none;
  transition: top .15s;
}
.skip-link:focus { top: .75rem; }

.app-nav .nav-link:focus-visible,
.app-brand:focus-visible,
a.card:focus-visible,
.skip-link:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  a.card, .skip-link { transition: none; }
  a.card:hover { transform: none; }
}

/* Karta-link (np. kafelki kalkulatorów) ----------------------------------- */
a.card { transition: border-color .15s, box-shadow .15s, transform .15s; }
a.card:hover {
  border-color: var(--bs-primary);
  box-shadow: 0 4px 12px rgba(16,24,40,.08);
  transform: translateY(-2px);
}

/* Lepki panel boczny (np. podsumowanie wyceny) ---------------------------- */
@media (min-width: 992px) {
  .sticky-side { position: sticky; top: 76px; }
}

/* Login (pre-auth) -------------------------------------------------------- */
.auth-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
}
.auth-card { width: 100%; max-width: 380px; }

/* Pulpit — czytelne kwoty / alert niezapłaconych ------------------------- */
.stat-card .stat-icon.danger {
  background: rgba(220, 53, 69, .12);
  color: var(--bs-danger);
}
.stat-card.alert-card {
  border-color: rgba(220, 53, 69, .45);
  background: rgba(220, 53, 69, .04);
}
.sum-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: .5rem 0; border-bottom: 1px solid var(--bs-border-color);
}
.sum-row:last-child { border-bottom: 0; }
.sum-row .lbl { color: var(--bs-secondary-color); }
.sum-row .val { font-size: 1.1rem; font-weight: 600; }
.sum-row.total { padding-top: .65rem; }
.sum-row.total .val { font-size: 1.45rem; font-weight: 700; }

.unpaid-total {
  font-size: 1.6rem; font-weight: 700; color: var(--bs-danger);
  line-height: 1.1;
}
.unpaid-list .amt { font-weight: 700; }
.unpaid-list .overdue { color: var(--bs-danger); font-weight: 600; }

/* Kafelek grafiku — kompaktowa siatka dni (najbliższe 2 tyg.) */
.sched-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
  gap: .4rem;
}
.sched-cell {
  display: flex; flex-direction: column; align-items: center;
  min-height: 80px; padding: .45rem .3rem .5rem;
  border: 1px solid var(--bs-border-color);
  border-radius: .6rem; background: var(--bs-body-bg);
}
.sched-cell .sched-dow {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--bs-secondary-color);
}
.sched-cell .sched-dom {
  font-size: 1.05rem; font-weight: 700; line-height: 1.1;
}
.sched-cell .sched-who { margin-top: auto; padding-top: .35rem; min-height: 26px; }
.sched-cell.is-weekend { background: var(--bs-tertiary-bg); }
.sched-cell.is-today {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 1px var(--bs-primary) inset;
}
.sched-cell.is-today .sched-dom { color: var(--bs-primary); }
.sched-cell.is-closed { opacity: .55; }
.sched-avas { display: flex; justify-content: center; flex-wrap: wrap; gap: 3px; }
.sched-ava {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  font-size: .62rem; font-weight: 700; color: #fff;
  background: var(--ava, var(--bs-secondary));
}
.sched-ava-legend {
  --ava: var(--bs-secondary-color);
  width: 18px; height: 18px; font-size: .55rem; vertical-align: middle;
}
.sched-dot { color: var(--bs-secondary-color); font-weight: 700; font-size: 1.1rem; }
.sched-tag { color: var(--bs-secondary-color); font-size: .9rem; }