/*
 * ⚠ NIE `require_tree .` - to wciagalo TU CALY ARKUSZ MAKIETY. Panel AssetLife
 * kompilowal sie do 240 kB i wozil ze soba skorke dostawcy, a klasy o tych
 * samych nazwach zderzaly sie po cichu: `.icon-btn` z makiety (kwadrat 30x30
 * na sama ikone) wygrywala szerokoscia z nasza, wiec przycisk "Edytuj"
 * obcinal sie do ikony i wygladal jak ozdoba.
 *
 * Ten arkusz nalezy do /admin i wystarcza mu on sam.
 *

 */

/* Brand tokens sampled 1:1 from www.assetlife.pl (assets/css/style.css :root). */
:root {
  --blue: #3151A3;
  --blue-dark: #0C447C;
  --blue-deep: #061A38;
  --gold: #F0B139;
  --gold-deep: #8A5A08;
  --ice: #E9F1FA;
  --ice-mid: #9DBEE4;

  --ink: #16203a;
  --ink-soft: #4c5a70;
  --paper: #ffffff;
  --paper-soft: #f5f8fc;
  --line: #e1e9f4;

  --radius: 14px;
  --radius-lg: 22px;
  --shadow: 0 10px 30px rgba(6, 26, 56, .10);
  --shadow-lg: 0 22px 60px rgba(6, 26, 56, .16);

  --ok: #1d9e75;
  --ok-soft: rgba(29, 158, 117, .12);

  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Space Grotesk", system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper-soft);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--display); letter-spacing: -.02em; margin: 0; }
a { color: var(--blue); }

/* ---------- Landing ---------- */

.landing { min-height: 100vh; display: grid; place-content: center; text-align: center; gap: .5rem; }
.landing h1 { font-size: 2.5rem; }
.landing .muted { color: var(--ink-soft); }

/* ---------- Buttons ---------- */

.btn {
  font-family: var(--sans);
  font-weight: 600;
  font-size: .9rem;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: .7rem 1.4rem;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover { transform: translateY(-1px); }

.btn--primary {
  background: linear-gradient(180deg, var(--blue) 0%, var(--blue-dark) 100%);
  color: #fff;
  box-shadow: 0 8px 20px rgba(49, 81, 163, .28);
}
.btn--primary:hover { box-shadow: 0 12px 26px rgba(49, 81, 163, .34); }

.btn--block { width: 100%; margin-top: .4rem; }

.btn--ghost {
  background: transparent;
  border-color: rgba(233, 241, 250, .28);
  color: var(--ice);
}
.btn--ghost:hover { background: rgba(233, 241, 250, .10); }

/* ---------- Forms ---------- */

.form { display: grid; gap: 1rem; }

.field { display: grid; gap: .4rem; align-content: start; }
.field > input, .field > select, .field > textarea, .field > .filepick { align-self: start; width: 100%; }
.field .hint { align-self: start; }
.field label { font-size: .82rem; font-weight: 600; color: var(--ink-soft); }
.field input {
  font-family: var(--sans);
  font-size: .95rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .8rem .95rem;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.field input:focus {
  outline: none;
  border-color: var(--ice-mid);
  box-shadow: 0 0 0 4px rgba(157, 190, 228, .28);
}

.checkbox { display: flex; align-items: center; gap: .55rem; font-size: .85rem; color: var(--ink-soft); }

/* ---------- Flash ---------- */

.flash {
  margin: 0 0 1rem;
  padding: .75rem 1rem;
  border-radius: var(--radius);
  font-size: .88rem;
  border: 1px solid;
}
.flash--ok { background: rgba(29, 158, 117, .10); border-color: rgba(29, 158, 117, .40); color: #14614a; }
.flash--warn { background: rgba(192, 57, 43, .08); border-color: rgba(192, 57, 43, .35); color: #97291d; }

/* ---------- Auth screen ---------- */

body.auth {
  min-height: 100vh;
  display: grid;
  place-content: center;
  gap: 1.2rem;
  padding: 2rem 1rem;
  background:
    radial-gradient(900px 500px at 15% -10%, rgba(49, 81, 163, .55), transparent 60%),
    radial-gradient(700px 420px at 110% 15%, rgba(240, 177, 57, .18), transparent 60%),
    var(--blue-deep);
}

.auth__card {
  width: min(420px, 92vw);
  background: var(--paper);
  border-radius: var(--radius-lg);
  padding: 2.2rem;
  box-shadow: var(--shadow-lg);
}

.auth__brand { display: flex; align-items: center; gap: .7rem; margin-bottom: 1.6rem; }
.auth__mark, .sidebar__mark {
  display: grid;
  place-content: center;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: linear-gradient(140deg, var(--blue) 0%, var(--blue-deep) 100%);
  color: var(--gold);
  font-family: var(--display);
  font-weight: 700;
  font-size: .95rem;
}
.auth__name, .sidebar__name { font-family: var(--display); font-weight: 700; font-size: 1.05rem; }
.auth__name em, .sidebar__name em { display: block; font-style: normal; font-size: .72rem; font-weight: 500; color: var(--ink-soft); letter-spacing: .08em; text-transform: uppercase; }

.auth__title { font-size: 1.45rem; margin-bottom: .35rem; }
.auth__lead { margin: 0 0 1.6rem; color: var(--ink-soft); font-size: .9rem; }
.auth__link { margin: 1.3rem 0 0; text-align: center; font-size: .85rem; }
.auth__link a { color: var(--blue-dark); text-decoration: none; }
.auth__link a:hover { text-decoration: underline; }
.auth__foot { margin: 0; text-align: center; color: rgba(233, 241, 250, .55); font-size: .78rem; }

/* ---------- Admin shell ---------- */

body.admin { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; }

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 1.6rem 1.2rem;
  background: var(--blue-deep);
  color: var(--ice);
}
.sidebar__brand { display: flex; align-items: center; gap: .7rem; }
.sidebar__name { color: #fff; }
.sidebar__name em { color: var(--ice-mid); }

.sidebar__nav { display: grid; gap: .25rem; }
.nav-item {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .7rem .85rem;
  border-radius: var(--radius);
  font-size: .9rem;
  font-weight: 500;
  color: rgba(233, 241, 250, .78);
  text-decoration: none;
}
.nav-item:hover { background: rgba(233, 241, 250, .08); color: #fff; }
.nav-item--active { background: rgba(233, 241, 250, .12); color: #fff; box-shadow: inset 3px 0 0 var(--gold); }
.nav-item--active .icon { color: var(--gold); }

.nav-item .icon { flex: none; opacity: .9; }
.nav-item span:not(.nav-item__badge) { flex: 1; }

.nav-item__badge {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--gold-deep);
  font-size: .72rem;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}
.nav-item--soon { color: rgba(157, 190, 228, .55); display: flex; justify-content: space-between; align-items: center; cursor: default; }
.nav-item--soon em {
  font-style: normal;
  font-size: .62rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(240, 177, 57, .75);
  border: 1px solid rgba(240, 177, 57, .42);
  border-radius: 999px;
  padding: .1rem .45rem;
}

.sidebar__foot { margin-top: auto; font-size: .74rem; color: rgba(157, 190, 228, .6); }

.shell { display: flex; flex-direction: column; min-width: 0; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.3rem 2rem;
  background: linear-gradient(180deg, var(--blue-dark) 0%, var(--blue-deep) 100%);
  color: #fff;
}
.topbar__eyebrow { margin: 0; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ice-mid); }
.topbar__title { font-size: 1.5rem; margin-top: .15rem; }

.account { display: flex; align-items: center; gap: .8rem; }
.account form { margin: 0; }
.account__avatar {
  display: grid; place-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--gold-deep);
  font-family: var(--display);
  font-weight: 700;
  font-size: .85rem;
}
.account__meta { display: grid; line-height: 1.25; font-size: .85rem; }
.account__meta em { font-style: normal; font-size: .72rem; color: var(--ice-mid); }

/* ⚠ BEZ max-width. Dolozylem tu gorna szerokosc, zeby przycisk "Edytuj" nie
   stal metr od naglowka na szerokim monitorze - i przycialem tym panel
   AssetLife: tabela zamowien jest szersza niz ta kolumna, wiec przyciski
   "Odnotuj wplate" wyszly za jej krawedz. Proporcji nie dokladamy do klasy,
   ktorej uzywa kilka ekranow naraz. */
.content { padding: 2rem; display: grid; gap: 1.5rem; align-content: start; }

/* ---------- Tiles and panels ---------- */

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }

.tile {
  display: grid;
  align-content: start;
  gap: .35rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.3rem;
  box-shadow: var(--shadow);
}
.tile__label { margin: 0; font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.tile__value { margin: 0; font-family: var(--display); font-size: 1.9rem; line-height: 1.1; font-weight: 700; color: var(--blue-deep); }
.tile__hint { margin: 0; font-size: .78rem; color: var(--ink-soft); line-height: 1.4; }
.tile--accent { border-color: rgba(240, 177, 57, .55); box-shadow: 0 10px 30px rgba(240, 177, 57, .13); }
.tile--accent .tile__value { color: var(--blue); }

.panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow);
}
.panel--muted { background: var(--ice); border-color: rgba(157, 190, 228, .45); box-shadow: none; }
.panel--muted p { margin: 0; color: var(--ink-soft); font-size: .9rem; line-height: 1.6; }
.panel__title { font-size: 1.05rem; margin-bottom: 1rem; }

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin: 0; }
.facts dt { font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.facts dd { margin: .3rem 0 0; font-weight: 600; }

@media (max-width: 860px) {
  body.admin { grid-template-columns: 1fr; }
  .sidebar { flex-direction: row; align-items: center; gap: 1rem; overflow-x: auto; }
  .sidebar__nav { grid-auto-flow: column; }
  .sidebar__foot { display: none; }
}

/* ---------- Providers: toolbar, filters, rows ---------- */

.crumb { margin: 0; font-size: .84rem; color: var(--ink-soft); }
.crumb a { color: var(--blue-dark); text-decoration: none; }
.crumb a:hover { text-decoration: underline; }

.toolbar { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; }
.toolbar__search { display: flex; gap: .5rem; flex: 1 1 320px; }
.toolbar__search form { display: contents; }

.input {
  flex: 1;
  min-width: 0;
  font-family: var(--sans);
  font-size: .92rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .7rem .95rem;
}
.input:focus { outline: none; border-color: var(--ice-mid); box-shadow: 0 0 0 4px rgba(157, 190, 228, .28); }

.btn--soft { background: var(--ice); color: var(--blue-dark); border-color: rgba(157, 190, 228, .45); }
.btn--soft:hover { background: rgba(157, 190, 228, .28); }

.btn--plain { background: transparent; color: var(--ink-soft); }
.btn--plain:hover { color: var(--ink); }

.btn--danger { background: rgba(192, 57, 43, .08); color: #97291d; border-color: rgba(192, 57, 43, .35); }
.btn--danger:hover { background: rgba(192, 57, 43, .14); }

.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  font-size: .82rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink-soft);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .4rem .9rem;
}
.chip:hover { border-color: var(--ice-mid); }
.chip--on { background: var(--blue-deep); border-color: var(--blue-deep); color: #fff; }

.rows { display: grid; gap: .6rem; }
.rows--tight { gap: .4rem; }

.row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 1rem;
  padding: .95rem 1.2rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.row:hover { border-color: var(--ice-mid); box-shadow: var(--shadow); transform: translateY(-1px); }

.row__mark, .head__mark {
  display: grid; place-content: center;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--ice);
  color: var(--blue-dark);
  font-family: var(--display);
  font-weight: 700;
  font-size: .85rem;
}
.row__main { display: grid; line-height: 1.35; min-width: 0; }
.row__main em { font-style: normal; font-size: .8rem; color: var(--ink-soft); }
.row__side { font-size: .85rem; color: var(--ink-soft); }

.badge {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: .3rem .7rem;
  white-space: nowrap;
}
.badge--active { background: rgba(29, 158, 117, .10); color: #14614a; }
.badge--suspended { background: rgba(240, 177, 57, .18); color: var(--gold-deep); }

/* ---------- Empty state ---------- */

.empty {
  display: grid;
  justify-items: center;
  gap: .7rem;
  text-align: center;
  padding: 3.5rem 1.5rem;
  background: var(--paper);
  border: 1px dashed var(--ice-mid);
  border-radius: var(--radius-lg);
}
.empty__title { font-size: 1.2rem; }
.empty__lead { margin: 0; max-width: 46ch; color: var(--ink-soft); font-size: .9rem; line-height: 1.6; }
.empty .btn { margin-top: .5rem; }

/* ---------- Forms: wide layout, errors, hints ---------- */

.form--wide { gap: 1.3rem; }
.form--wide .panel { display: grid; gap: 1rem; }
/* Fields in a row line up on the label, the control and the hint, no matter
   which of them has a hint and which does not. */
.grid-2, .grid-3 {
  display: grid;
  gap: 1rem 1.25rem;
  align-items: start;
  grid-template-rows: auto auto auto;
}
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.grid-2 > .field, .grid-3 > .field {
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: .4rem;
}

@supports not (grid-template-rows: subgrid) {
  .grid-2 > .field, .grid-3 > .field { grid-row: auto; grid-template-rows: none; }
}

.field textarea {
  font-family: var(--sans);
  font-size: .95rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .8rem .95rem;
  resize: vertical;
}
.field textarea:focus { outline: none; border-color: var(--ice-mid); box-shadow: 0 0 0 4px rgba(157, 190, 228, .28); }

.hint { margin: 0; font-size: .78rem; color: var(--ink-soft); }

.errors {
  background: rgba(192, 57, 43, .08);
  border: 1px solid rgba(192, 57, 43, .35);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  color: #97291d;
}
.errors__title { margin: 0 0 .5rem; font-weight: 700; font-size: .9rem; }
.errors ul { margin: 0; padding-left: 1.1rem; font-size: .87rem; line-height: 1.6; }

.field_with_errors { display: contents; }
.field_with_errors input, .field_with_errors textarea { border-color: rgba(192, 57, 43, .55); }

.form__actions { display: flex; gap: .6rem; align-items: center; }

/* ---------- Provider card header and actions ---------- */

.head { display: flex; align-items: center; gap: 1rem; }
.head__mark { width: 52px; height: 52px; border-radius: 14px; font-size: 1rem; }
.head__main { flex: 1; min-width: 0; }
.head__name { font-size: 1.35rem; }
.head__meta { margin: .25rem 0 0; font-size: .84rem; color: var(--ink-soft); }

.actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-bottom: .8rem; }
.actions form { margin: 0; }

/* ---------- Clickable tiles ---------- */

.tile--link { display: grid; text-decoration: none; color: inherit; transition: transform .12s ease, box-shadow .12s ease; }
.tile--link:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.tile--link .tile__hint { color: var(--blue); font-weight: 600; }

/* ---------- People at a provider ---------- */

.panel__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.panel__head .panel__title { margin: 0; }

.row--static { grid-template-columns: auto 1fr auto auto auto; cursor: default; }
.row--static:hover { border-color: var(--line); box-shadow: none; transform: none; }
.row--static form { margin: 0; }

.btn--small { padding: .4rem .8rem; font-size: .8rem; }

.badge--state-draft { background: var(--ice); color: var(--ink-soft); }
.badge--state-invited { background: rgba(240, 177, 57, .18); color: var(--gold-deep); }
.badge--state-confirmed { background: rgba(29, 158, 117, .10); color: #14614a; }

/* ---------- Tabs (server-rendered, each tab is its own URL) ---------- */

.tabs { display: flex; gap: .35rem; border-bottom: 1px solid var(--line); padding-bottom: 0; }
.tab {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .7rem 1.1rem;
  font-size: .9rem;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
  margin-bottom: -1px;
}
.tab:hover { color: var(--ink); background: rgba(233, 241, 250, .55); }
.tab--on {
  background: var(--paper);
  border-color: var(--line);
  color: var(--blue-deep);
  box-shadow: inset 0 3px 0 var(--gold);
}
.tab__count {
  font-size: .74rem;
  font-weight: 700;
  background: var(--ice);
  color: var(--blue-dark);
  border-radius: 999px;
  padding: .1rem .45rem;
}
.tab--on .tab__count { background: var(--blue-deep); color: #fff; }

.empty--inline { padding: 2.2rem 1.5rem; border-style: dashed; }

/* ---------- Pencil edit affordance, listing note, danger panel ---------- */

/* Przycisk akcji w naglowku panelu. Byla to pastelowa pigulka o niskim
   kontrascie z typograficznym olowkiem w srodku - wygladala jak ozdoba, nie
   jak przycisk. Teraz: bialy przycisk z obwodka i ikona SVG, wysokosc rowna
   .btn--small, zeby staly w jednej linii. */
.icon-btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .4rem .8rem;
  font-size: .8rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  white-space: nowrap;
  transition: border-color .14s ease, background-color .14s ease, color .14s ease;
}

.icon-btn svg { flex: none; color: var(--blue); }
.icon-btn:hover { border-color: var(--blue); background: var(--ice); color: var(--blue-dark); }
.icon-btn:hover svg { color: var(--blue-dark); }
.icon-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.icon-btn__text { line-height: 1; }

/* Akcje trzymaja sie naglowka, do ktorego naleza. Przy szerokim panelu
   space-between odrzucalo je na sam skraj ekranu, metr od tytulu. */
.panel__head { flex-wrap: wrap; }
.panel__head > .panel__title { margin-right: auto; }
.panel__head .icon-btn { margin-left: .5rem; }

.listing-note { margin: 0; font-size: .84rem; color: var(--ink-soft); }

.row--three { grid-template-columns: auto 1fr auto; }

.panel--danger { border-color: rgba(192, 57, 43, .35); }
.panel--danger .panel__title { color: #97291d; }

/* ---------- Folded panel: the long blue bar that unfolds a form ---------- */
/* <details> instead of a modal: admin has no modal chrome, and a form that
   stays on the page keeps the server-rendered errors where the user left off. */

.fold > summary {
  display: flex;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
  padding: .95rem 1.4rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(140deg, var(--blue) 0%, var(--blue-deep) 100%);
  box-shadow: var(--shadow);
  transition: filter .15s ease;
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary:hover { filter: brightness(1.12); }
.fold > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.fold__label {
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--gold);
}
.fold__note { margin-left: auto; font-size: .82rem; color: rgba(240, 177, 57, .72); }

.fold > summary::after {
  content: "";
  width: .48rem;
  height: .48rem;
  flex: none;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: translateY(-2px) rotate(45deg);
  transition: transform .28s ease-out;
}
.fold[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.fold[open] > summary { border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: none; }

/* The same unfolding as the employee row in the panel (`rowopen`,
   cyberhabit/panel.css): the form height is unknown, so grid-template-rows
   animates 0fr -> 1fr. The DEFAULT state is unfolded and the animation runs
   FROM zero - with `forwards` the form stays at 0 px anywhere the animation
   does not run. The clipping happens on the inner element. */
.fold__body { display: grid; grid-template-rows: 1fr; animation: foldOpen .28s ease-out; }
.fold__body > * { overflow: hidden; animation: foldOpenIn .28s ease-out; }
@keyframes foldOpen { from { grid-template-rows: 0fr; } }
@keyframes foldOpenIn { from { opacity: 0; transform: translateY(-5px); } }
@media (prefers-reduced-motion: reduce) {
  .fold__body, .fold__body > * { animation: none; }
}

.fold__panel { border-radius: 0 0 var(--radius-lg) var(--radius-lg); border-top: 0; box-shadow: none; }

/* ---------- Audit log ---------- */

.events { display: grid; gap: .2rem; }

.event {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: .9rem;
  align-items: start;
  padding: .8rem 0;
  border-bottom: 1px solid var(--line);
}
.event:last-child { border-bottom: none; }

.event__dot { width: 9px; height: 9px; border-radius: 50%; margin-top: .45rem; background: var(--ice-mid); }
.event__dot--provider { background: var(--blue); }
.event__dot--user { background: var(--gold); }
.event__dot--session { background: var(--ice-mid); }

.event__line { margin: 0; font-size: .9rem; line-height: 1.5; }
.event__line em { font-style: normal; font-weight: 600; color: var(--blue-deep); }
.event__where { color: var(--ink-soft); }
.event__where a { color: var(--blue-dark); }

.event__changes { margin: .4rem 0 0; padding-left: 1.1rem; font-size: .82rem; color: var(--ink-soft); line-height: 1.7; }
.event__changes s { opacity: .7; }
.event__changes strong { color: var(--ink); }

.event__time { font-size: .78rem; color: var(--ink-soft); white-space: nowrap; }

.pager { display: flex; align-items: center; gap: .8rem; margin-top: 1.2rem; }

.row__actions { display: flex; gap: .4rem; align-items: center; }
.row__actions form { margin: 0; }
.row--static { grid-template-columns: auto 1fr auto auto auto; }

/* ---------- Settings: bottom of the sidebar, per-page picker ---------- */

.sidebar__nav--foot { margin-top: auto; border-top: 1px solid rgba(233, 241, 250, .14); padding-top: 1rem; }

.per-page { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; color: var(--ink-soft); }
.per-page__option {
  text-decoration: none;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: .15rem .5rem;
  font-weight: 600;
}
.per-page__option:hover { border-color: var(--ice-mid); }
.per-page__option--on { background: var(--blue-deep); border-color: var(--blue-deep); color: #fff; }

.row--four { grid-template-columns: auto 1fr auto auto; }

/* ---------- Filter bar ---------- */

.filters__form {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-end;
}

.field--inline { gap: .3rem; min-width: 150px; }
.field--inline label { font-size: .76rem; letter-spacing: .04em; text-transform: uppercase; }

/* Strzalka listy rozwijanej jest NASZA, nie przegladarki. Natywna siedzi
   przyklejona do samej krawedzi pola i w kazdej przegladarce ma inny rozmiar -
   dlatego appearance:none i wlasny znaczek z odstepem od brzegu. Prawy padding
   trzyma tekst tak, zeby nigdy nie wjechal pod strzalke. */
.select {
  font-family: var(--sans);
  font-size: .9rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .65rem 2.4rem .65rem .8rem;
  min-width: 150px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%234a5568' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
}
.select:focus { outline: none; border-color: var(--ice-mid); box-shadow: 0 0 0 4px rgba(157, 190, 228, .28); }
.select--narrow { min-width: 90px; }

.input--date { padding: .6rem .8rem; min-width: 150px; }

.filters__actions { display: flex; gap: .5rem; align-items: center; margin-left: auto; }

/* ---------- Contract document ---------- */

.doc__actions { display: flex; gap: .5rem; }

.doc__frame {
  width: 100%;
  height: 70vh;
  min-height: 420px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-soft);
}

.doc__image { width: 100%; border: 1px solid var(--line); border-radius: var(--radius); }

.tab__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  display: inline-block;
}

input[type="file"].input { padding: .55rem .7rem; background: var(--paper); cursor: pointer; }

/* ---------- File picker: our own label over a hidden native input ---------- */

.filepick {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .8rem;
  background: var(--paper-soft);
  border: 1px dashed var(--ice-mid);
  border-radius: var(--radius);
  transition: border-color .12s ease, background .12s ease;
}
.filepick:hover { background: var(--ice); border-color: var(--blue); }
.filepick--filled { border-style: solid; border-color: var(--blue); background: var(--paper); }

/* Kept reachable by keyboard and screen readers, just not shown. */
.filepick__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Selector kept above ".field label", which would otherwise grey out the text. */
.filepick .filepick__button {
  font-family: var(--sans);
  font-size: .85rem;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(180deg, var(--blue) 0%, var(--blue-dark) 100%);
  border-radius: 999px;
  padding: .55rem 1.2rem;
  cursor: pointer;
  white-space: nowrap;
  text-transform: none;
  letter-spacing: normal;
}
.filepick .filepick__button:hover { filter: brightness(1.08); }
.filepick .filepick__input:focus-visible + .filepick__button { box-shadow: 0 0 0 4px rgba(157, 190, 228, .45); }

.filepick__name { font-size: .88rem; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filepick--filled .filepick__name { color: var(--ink); font-weight: 600; }

.grid-3 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* ---------- Contract rows ---------- */

.row--contract { grid-template-columns: auto 1fr auto auto; align-items: center; }
.row--picked { border-color: var(--blue); box-shadow: inset 3px 0 0 var(--gold); }

.row__mark--doc {
  background: var(--blue-deep);
  color: var(--gold);
  font-size: .7rem;
  letter-spacing: .04em;
}

/* ---------- Sidebar brand ---------- */

.sidebar__brand { display: flex; align-items: center; gap: .7rem; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Notification severity dots ---------- */

.dot { width: 10px; height: 10px; border-radius: 50%; }
.dot--urgent { background: #c0392b; }
.dot--warning { background: var(--gold); }
.dot--info { background: var(--ice-mid); }

/* ---------- Notification rows and the "handled" tick ---------- */

.row--notification { grid-template-columns: auto 1fr auto auto; }
.row--done { opacity: .62; background: var(--paper-soft); }
.dot--done { background: #1d9e75; }

/* Checkbox ported from the cyber-v2 mockup (assets/admin.css .evchk), retuned
   to this palette: the tick draws itself, the row flashes and collapses. */
.evchk { position: relative; width: 26px; height: 26px; display: block; cursor: pointer; }
.evchk input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.evchk .frame {
  position: absolute; inset: 0;
  border: 2px solid var(--ice-mid);
  border-radius: 7px;
  background: var(--paper);
  transition: border-color .16s ease, background-color .16s ease, transform .12s ease;
}
.evchk:hover .frame { border-color: var(--ok); }
.evchk input:focus-visible + .frame { outline: 2px solid var(--ok); outline-offset: 2px; }
.evchk svg { position: absolute; inset: 0; width: 26px; height: 26px; pointer-events: none; }
.evchk svg path {
  fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 22; stroke-dashoffset: 22;
}

.row--notification.is-resolving .evchk .frame {
  background: var(--ok); border-color: var(--ok); transform: scale(1.06);
}
.row--notification.is-resolving .evchk svg path { animation: tick .22s ease-out .04s forwards; }
@keyframes tick { to { stroke-dashoffset: 0; } }

.row--notification.is-resolving { animation: evflash .34s ease-out .16s both; }
@keyframes evflash {
  0% { background: var(--paper); }
  35%, 100% { background: var(--ok-soft); }
}

.row--notification.is-collapsing {
  animation: evcollapse .3s cubic-bezier(.4, 0, .2, 1) forwards;
  overflow: hidden;
}
@keyframes evcollapse {
  0% { opacity: 1; max-height: 120px; padding-top: .95rem; padding-bottom: .95rem; }
  100% { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; border-color: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .row--notification.is-resolving .evchk svg path { animation: none; stroke-dashoffset: 0; }
  .row--notification.is-resolving, .row--notification.is-collapsing { animation: none; }
}

/* ---------- Assign chip and the go-there arrow ---------- */

.chip-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .75rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  white-space: nowrap;
}
.chip-btn:hover { border-color: var(--blue); color: var(--blue-dark); }
.chip-btn--on { background: var(--ice); border-color: var(--ice-mid); color: var(--blue-dark); }

.go {
  display: grid;
  place-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  background: var(--paper);
}
.go:hover { color: var(--blue-dark); border-color: var(--blue); background: var(--ice); }

.row--notification { grid-template-columns: auto 1fr auto auto; }
.row--notification .row__actions { gap: .45rem; }
.row--notification .row__actions form { margin: 0; display: flex; }

/* ---------- Mock data notice ---------- */

.mocknote {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  align-items: baseline;
  padding: .9rem 1.2rem;
  border: 1px dashed rgba(240, 177, 57, .7);
  border-radius: var(--radius);
  background: rgba(240, 177, 57, .1);
  font-size: .86rem;
  line-height: 1.55;
  color: var(--ink);
}
.mocknote strong {
  font-family: var(--display);
  font-size: .74rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.mocknote span { flex: 1; min-width: 260px; color: var(--ink-soft); }

/* ---------- Tables ---------- */

.table-wrap { overflow-x: auto; }

.table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.table th {
  text-align: left;
  font-size: .72rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 600;
  padding: 0 .8rem .7rem;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.table td { padding: .8rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: none; }
.table__num { text-align: right; font-variant-numeric: tabular-nums; }
.table__sub { display: block; font-size: .76rem; color: var(--ink-soft); }
.table tr.is-muted td { color: var(--ink-soft); }

/* Not .row__actions: display:flex on a <td> drops the cell out of the table
   grid and the whole row spills outside the panel. */
.table__actions { text-align: right; white-space: nowrap; width: 1%; }
.table__actions form { display: inline-block; margin: 0; }
.table__actions .btn + .btn, .table__actions form + form { margin-left: .4rem; }

.pill {
  font-size: .74rem;
  font-weight: 700;
  border-radius: 999px;
  padding: .2rem .6rem;
  white-space: nowrap;
}
.pill--yearly { background: rgba(49, 81, 163, .12); color: var(--blue-dark); }
.pill--monthly { background: var(--ice); color: var(--ink-soft); }

.badge--pay-paid { background: var(--ok-soft); color: #14614a; }
.badge--pay-pending { background: rgba(240, 177, 57, .18); color: var(--gold-deep); }
.badge--pay-overdue { background: rgba(192, 57, 43, .10); color: #97291d; }

.row--invoice { grid-template-columns: auto 1fr auto auto; }
.row--invoice .row__side { text-align: right; }

/* ---------- Status cell: badge over its date, never side by side ---------- */

.statuscell { display: grid; gap: .25rem; justify-items: start; }
.statuscell .badge { line-height: 1.3; }
.statuscell .table__sub { margin: 0; }

/* ---------- Subscription card ---------- */

.sub { display: grid; gap: 1rem; }
.sub__head { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; justify-content: space-between; }
.sub__eyebrow { margin: 0; font-size: .72rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-soft); }
.sub__name { font-size: 1.4rem; margin-top: .25rem; }
.sub__meta { margin: .3rem 0 0; font-size: .86rem; color: var(--ink-soft); }

.sub__prices { display: flex; gap: .6rem; flex-wrap: wrap; }

.sub__price {
  display: grid;
  justify-items: center;
  gap: .2rem;
  min-width: 132px;
  padding: .85rem 1.3rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(140deg, var(--blue) 0%, var(--blue-deep) 100%);
  color: #fff;
}
.sub__price--fee { background: linear-gradient(140deg, var(--blue-deep) 0%, #04101f 100%); }
.sub__price-value { font-family: var(--display); font-size: 1.7rem; font-weight: 700; color: var(--gold); line-height: 1.1; white-space: nowrap; }
.sub__price-label { font-size: .73rem; color: var(--ice-mid); text-align: center; }

.sub__deal {
  margin: 0;
  font-family: var(--display);
  font-size: 1rem;
  color: var(--blue-deep);
}

.row__mark--fee { background: var(--gold); color: var(--gold-deep); }

.sub__terms {
  margin: 0;
  padding: 1rem 1.2rem;
  background: var(--ice);
  border-radius: var(--radius);
  font-size: .9rem;
  line-height: 1.6;
  color: var(--ink);
}

.row--sub { grid-template-columns: auto 1fr auto auto; }
.row__mark--rate {
  width: auto;
  min-width: 52px;
  padding: 0 .6rem;
  background: var(--blue-deep);
  color: var(--gold);
  font-size: .82rem;
}

.tab__count--warn { background: rgba(192, 57, 43, .12); color: #97291d; }

/* ⚠ Markup pola pliku jest WSPOLNY dla obu paneli i uzywa nazw z makiety
   (.filepick > input + label.pick + span.chosen). Skorka AssetLife ma swoj
   komponent pod .filepick__*, wiec te same reguly powtarzamy na nazwach z
   makiety - w naszej palecie. Jeden markup, dwie skorki. */
.filepick input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.filepick .pick {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
  padding: .6rem 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--blue);
  background: var(--ice);
  color: var(--blue-ink, var(--ink));
  font-weight: 600;
  font-size: .89rem;
  white-space: nowrap;
}

.filepick .pick:hover { filter: brightness(1.04); }
.filepick input[type="file"]:focus-visible + .pick { box-shadow: 0 0 0 4px rgba(157, 190, 228, .45); }
.filepick .chosen { font-size: .88rem; color: var(--ink-soft); min-width: 0; }
.filepick.has-file .chosen { color: var(--ink); font-weight: 600; }

/* Logo dostawcy w miejscu inicjalow. Znacznik ma staly rozmiar, wiec obrazek
   wpisuje sie w niego bez rozciagania - `contain`, nie `cover`: logo obciete
   w polowie nie jest logiem. */
.row__mark--logo, .head__mark--logo {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: .25rem;
  overflow: hidden;
}

.row__mark--logo img, .head__mark--logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}


/* Nazwisko i awatar w gornym pasku prowadza do wlasnego konta - ale nie maja
   wygladac jak link w tresci: bez podkreslenia, z delikatnym tlem na hover. */
.account__link {
  display: flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  color: inherit;
  padding: .3rem .5rem;
  margin: -.3rem -.5rem;
  border-radius: var(--radius);
  transition: background-color .14s ease;
}

.account__link:hover { background: rgba(255, 255, 255, .1); }
.account__link:focus-visible { outline: 2px solid var(--gold, #f0b429); outline-offset: 2px; }

/* ---------- zaslepka bledu (403 / 404 / 422 / 500) ----------
   Numer jest duzy i cichy, bo nie on jest wiadomoscia - wiadomoscia jest
   zdanie pod nim. Ten sam uklad co w skorce dostawcy, wlasne zmienne. */
.err { text-align: center; }
.err__code {
  font: 700 3.4rem/1 var(--display);
  color: var(--ice-mid);
  margin: 0 0 4px;
  letter-spacing: -.02em;
}
.err__title { font: 700 1.35rem/1.3 var(--display); margin: 0 0 10px; }
.err__lead {
  margin: 0 auto 20px;
  max-width: 46ch;
  color: var(--ink-soft);
  font-size: .92rem;
  line-height: 1.55;
}

/* Ten sam znacznik co zolta ramka skrotow (.dev-panel::before) - jedno
   oznaczenie rzeczy, ktorej na produkcji nie ma. */
.localonly {
  display: inline-block;
  background: #ffd84d;
  color: #1c211e;
  font: 700 .66rem/1 var(--display);
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 5px 8px;
  border-radius: 4px;
  vertical-align: middle;
}