/* ==========================================================================
   Catalyst Commercial · RPA management
   Design tokens and components lifted from "makieta wzór.html".
   ========================================================================== */

:root {
  /* Neutrals */
  --ink:        #111827;
  --text:       #374151;
  --muted:      #6b7280;
  --faint:      #9ca3af;
  --line:       #e5e7eb;
  --line-soft:  #eef0f2;
  --line-hair:  #f7f8f9;
  --line-thin:  #f1f5f9;
  --border-in:  #d1d5db;
  --border-dsh: #cbd5e1;
  --bg:         #ffffff;
  --bg-alt:     #fafafa;
  --bg-head:    #f9fafb;
  --bg-hover:   #f1f2f4;

  /* Brand (indigo) */
  --brand:      #3730a3;
  --brand-dark: #2c2782;
  --brand-tint: #eef2ff;
  --brand-soft: #f7f8ff;
  --brand-line: #c7d2fe;

  /* Semantic */
  --ok:         #1f7a4d;
  --ok-dot:     #2f9e6b;
  --ok-text:    #2f7a55;
  --ok-bg:      #f1faf4;
  --ok-line:    #c9e8d6;

  --warn:       #9a7212;
  --warn-dot:   #d9a528;
  --warn-text:  #8a6f2e;
  --warn-bg:    #fdf9ef;
  --warn-line:  #f0e2c2;

  --bad:        #b4341f;
  --bad-text:   #9a4a3d;
  --bad-bg:     #fdf3f3;
  --bad-line:   #f3d3d3;

  --r-sm: 4px;
  --r:    7px;
  --r-lg: 9px;

  --font: 'Helvetica Neue', Helvetica, system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; height: 100%; }

body {
  font-family: var(--font);
  font-size: 12px;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: #d8dbe0; border-radius: 5px; }

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ============================================================ app shell */

.app { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }

.topbar {
  display: flex; align-items: center; gap: 12px;
  height: 54px; padding: 0 18px; flex: none; z-index: 5;
  background: #fff; color: var(--text);
  border-bottom: 1px solid var(--line);
}
.topbar .brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.topbar .brand:hover { text-decoration: none; }
.topbar .brand img { height: 36px; width: 36px; object-fit: contain; display: block; }
.topbar .brand .sub {
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink); white-space: nowrap;
  padding-left: 11px; border-left: 1px solid var(--line);
}
.topbar .spacer { margin-left: auto; }
.topbar .whoami { display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: var(--muted); }
.topbar .whoami .who-name { font-weight: 600; color: var(--text); }
.topbar .avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--brand-tint); color: var(--brand-dark);
  display: flex; align-items: center; justify-content: center;
  font: 700 11px var(--font); flex: none;
}

.searchbar {
  flex: 1; max-width: 360px; margin-left: 8px;
  display: flex; align-items: center; gap: 6px;
}
.searchbar input {
  width: 100%; height: 30px;
  border: 1px solid var(--border-in); border-radius: var(--r);
  background: #fff; color: var(--text);
  padding: 0 11px; font-size: 12px; font-family: var(--font); outline: none;
}
.searchbar input::placeholder { color: var(--faint); }
.searchbar input:focus { border-color: var(--brand); }

/* ============================================================ login page */

body.login-page { background: var(--bg-alt); }
.login-wrap {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; padding: 24px;
}
.login-card {
  width: 100%; max-width: 372px; background: #fff;
  border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .06);
  padding: 24px 24px 26px;
  display: flex; flex-direction: column; gap: 15px;
}
.login-brand { display: flex; align-items: center; gap: 12px; }
.login-brand img { height: 52px; width: 52px; object-fit: contain; flex: none; }
.login-name { font: 700 15px var(--font); color: var(--ink); line-height: 1.25; }
.login-sub {
  font-size: 10.5px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); margin-top: 2px;
}
.login-submit { width: 100%; justify-content: center; height: 36px; font-size: 12px; }
.login-foot { font-size: 10.5px; color: var(--faint); }
.login-lede { margin: 0; font-size: 11.5px; line-height: 1.6; color: var(--muted); }
.login-links { text-align: center; font-size: 11.5px; color: var(--muted); }
.login-links a { color: var(--brand); }

/* "Created by <evobot>" credit under the authentication cards */
.created-by {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding-top: 2px;
}
.created-by-text {
  font-size: 10.5px; color: var(--faint); letter-spacing: .02em; white-space: nowrap;
}
.created-by img { height: 22px; width: auto; display: block; opacity: .95; }

.body { display: flex; flex: 1; min-height: 0; }

.sidebar {
  width: 200px; flex: none; background: var(--bg-alt);
  border-right: 1px solid var(--line);
  padding: 13px 11px; display: flex; flex-direction: column; gap: 3px;
  overflow: auto;
}
.sidebar .group {
  font-size: 9px; font-weight: 600; letter-spacing: .06em;
  color: var(--faint); text-transform: uppercase;
  padding: 12px 9px 5px;
}
.sidebar a.nav {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 9px; border-radius: var(--r);
  font-size: 11.5px; color: var(--text); text-decoration: none;
}
.sidebar a.nav:hover { background: #f0f1f3; text-decoration: none; }
.sidebar a.nav.is-active {
  background: var(--brand-tint); color: var(--brand-dark); font-weight: 600;
}
.sidebar a.nav .count {
  margin-left: auto; font-size: 10px; color: var(--faint); font-weight: 400;
}
.sidebar .foot { margin-top: auto; font-size: 10px; color: var(--border-dsh); padding: 8px 9px; }

.main { flex: 1; min-height: 0; display: flex; flex-direction: column; }

.crumbs {
  padding: 12px 22px; border-bottom: 1px solid var(--line-thin); flex: none;
  display: flex; align-items: center; gap: 7px;
  font-size: 11px; color: var(--faint);
}
.crumbs a { color: var(--faint); }
.crumbs a:hover { color: var(--brand); }
.crumbs .sep { color: var(--border-dsh); }

.content { padding: 20px 22px; flex: 1; min-height: 0; overflow: auto; }
.wrap { display: flex; flex-direction: column; gap: 16px; max-width: 1180px; }

/* ================================================================ header */

.page-head { display: flex; align-items: flex-end; gap: 12px; }
.page-head h1 { margin: 0; font-size: 18px; font-weight: 700; color: var(--ink); }
.page-head .lede { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.page-head .actions { margin-left: auto; display: flex; gap: 7px; }

/* =============================================================== buttons */

.btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 31px; padding: 0 13px;
  border: 1px solid var(--border-in); border-radius: var(--r);
  background: #fff; color: var(--text);
  font: 600 11.5px var(--font); cursor: pointer; text-decoration: none;
  white-space: nowrap;
}
.btn:hover { background: var(--bg-hover); text-decoration: none; }
.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.btn-danger { color: var(--bad); border-color: var(--bad-line); }
.btn-danger:hover { background: var(--bad-bg); }
.btn-sm { height: 26px; padding: 0 9px; font-size: 11px; font-weight: 400; }
.btn[disabled], .btn.is-disabled {
  opacity: .5; pointer-events: none;
}

/* ================================================================ toolbar */

.toolbar { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.toolbar .right { margin-left: auto; display: flex; gap: 7px; }

.field-inline {
  height: 31px; border: 1px solid var(--border-in); border-radius: var(--r);
  display: flex; align-items: center; padding: 0 10px;
  font-size: 11.5px; color: var(--text); background: #fff;
}
.field-inline input, .field-inline select {
  border: 0; outline: none; background: transparent;
  font: 11.5px var(--font); color: var(--text); min-width: 150px;
}

/* ================================================================= cards */

.card { border: 1px solid var(--line-soft); border-radius: var(--r-lg); overflow: hidden; background: #fff; }
.card > .card-head {
  padding: 11px 14px; border-bottom: 1px solid var(--line-thin);
  font: 600 12.5px var(--font); color: var(--text);
  display: flex; align-items: center; gap: 8px;
}
.card > .card-head .more { margin-left: auto; font-size: 11px; color: var(--brand); font-weight: 400; }
.card > .card-body { padding: 14px; }
.card-empty { padding: 26px 14px; text-align: center; font-size: 11.5px; color: var(--faint); }

/* ================================================================= stats */

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 11px; }
.stat {
  border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  padding: 13px 14px; background: #fff; text-decoration: none; display: block;
}
a.stat:hover { background: var(--bg-head); text-decoration: none; }
.stat .num { font: 700 24px var(--font); color: var(--ink); line-height: 1.15; }
.stat .lbl { font-size: 11px; color: var(--muted); line-height: 1.3; margin-top: 2px; }
.stat.ok   { border-color: var(--ok-line);   background: var(--ok-bg); }
.stat.ok .num { color: var(--ok); } .stat.ok .lbl { color: var(--ok-text); }
.stat.warn { border-color: var(--warn-line); background: var(--warn-bg); }
.stat.warn .num { color: var(--warn); } .stat.warn .lbl { color: var(--warn-text); }
.stat.bad  { border-color: var(--bad-line);  background: var(--bad-bg); }
.stat.bad .num { color: var(--bad); } .stat.bad .lbl { color: var(--bad-text); }

.cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .cols-2 { grid-template-columns: 1fr; } }

/* ================================================================ tables */

.table-scroll { overflow-x: auto; }
table.grid { width: 100%; border-collapse: collapse; }
table.grid th {
  text-align: left; padding: 10px 12px;
  background: var(--bg-head); border-bottom: 1px solid var(--line-soft);
  font: 600 9.5px var(--font); letter-spacing: .04em; color: var(--faint);
  text-transform: uppercase; white-space: nowrap;
}
table.grid th a { color: inherit; }
table.grid th a:hover { color: var(--brand); }
table.grid td {
  padding: 10px 12px; font-size: 11.5px; color: var(--text);
  border-bottom: 1px solid var(--line-hair); vertical-align: middle;
}
table.grid tbody tr:last-child td { border-bottom: 0; }
table.grid tbody tr:hover { background: var(--bg-head); }
table.grid td.num, table.grid th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.grid td.key { color: var(--brand); font-weight: 600; font-variant-numeric: tabular-nums; }
table.grid td.dim { color: var(--muted); }
table.grid td.row-actions { text-align: right; white-space: nowrap; }
table.grid td.row-actions form { display: inline; }
.cell-sub { font-size: 10.5px; color: var(--muted); margin-top: 2px; }
.truncate { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ================================================================ badges */

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 2px 6px; font-size: 10px; line-height: 1.4; color: var(--muted);
  background: #fff; white-space: nowrap;
}
.badge.ok   { background: var(--ok-bg);   border-color: var(--ok-line);   color: var(--ok); }
.badge.warn { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn); }
.badge.bad  { background: var(--bad-bg);  border-color: var(--bad-line);  color: var(--bad); }
.badge.info { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand); }

.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: none; }
.dot.ok { background: var(--ok-dot); }
.dot.warn { background: var(--warn-dot); }
.dot.bad { background: var(--bad); }
.dot.off { background: var(--border-dsh); }
.dot.info { background: var(--brand); }

/* ================================================================= forms */

form.stack { display: flex; flex-direction: column; gap: 14px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid .span-2 { grid-column: 1 / -1; }
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }

.field label {
  display: block; font: 600 10.5px var(--font); letter-spacing: .03em;
  color: var(--muted); text-transform: uppercase; margin-bottom: 5px;
}
.field .hint { font-size: 10.5px; color: var(--faint); margin-top: 5px; line-height: 1.4; }
.field input[type=text], .field input[type=number], .field input[type=email],
.field input[type=password], .field input[type=search], .field input[type=tel],
.field input[type=url], .field input[type=date], .field input[type=time],
.field input[type=datetime-local], .field select, .field textarea {
  width: 100%; border: 1px solid var(--border-in); border-radius: var(--r);
  padding: 0 10px; height: 33px;
  font: 12px var(--font); color: var(--text); background: #fff; outline: none;
}
.field textarea { height: auto; min-height: 92px; padding: 9px 10px; line-height: 1.5; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--brand); }
.field input[readonly] { background: var(--bg-head); color: var(--muted); }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--bad); }
.field .err { font-size: 10.5px; color: var(--bad); margin-top: 5px; }
.field .check { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text); }
.field .check input { width: 15px; height: 15px; accent-color: var(--brand); }

.form-foot { display: flex; align-items: center; gap: 8px; padding-top: 2px; }
.form-foot .right { margin-left: auto; display: flex; gap: 7px; }

/* ================================================================ alerts */

.alert {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 10px 13px; font-size: 11.5px; line-height: 1.5;
  display: flex; align-items: flex-start; gap: 9px;
}
.alert.success { background: var(--ok-bg);   border-color: var(--ok-line);   color: var(--ok); }
.alert.error   { background: var(--bad-bg);  border-color: var(--bad-line);  color: var(--bad-text); }
.alert.warning { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn-text); }
.alert.info    { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand-dark); }
.alert .dot { margin-top: 5px; }
.alert strong { font-weight: 700; }

/* ============================================================ definition */

.dl { display: grid; grid-template-columns: 150px 1fr; gap: 0; }
.dl dt {
  font: 600 9.5px var(--font); letter-spacing: .04em; text-transform: uppercase;
  color: var(--faint); padding: 9px 0; border-bottom: 1px solid var(--line-hair);
}
.dl dd {
  margin: 0; font-size: 11.5px; color: var(--text);
  padding: 9px 0; border-bottom: 1px solid var(--line-hair);
}
.dl dt:last-of-type, .dl dd:last-of-type { border-bottom: 0; }

/* ============================================================ pagination */

.pager { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--muted); }
.pager .right { margin-left: auto; display: flex; gap: 5px; }
.pager a, .pager span.pg {
  border: 1px solid var(--border-in); border-radius: 6px;
  padding: 4px 9px; color: var(--text); text-decoration: none; font-size: 11px;
}
.pager a:hover { background: var(--bg-hover); text-decoration: none; }
.pager span.pg { color: var(--faint); border-color: var(--line); }
.pager .current { background: var(--brand); border-color: var(--brand); color: #fff; }

/* ================================================================ charts */

.chart-head {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.legend { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.legend-item {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--text);
}
.legend-swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.legend-value { color: var(--muted); font-variant-numeric: tabular-nums; }
.chart-note { margin-left: auto; font-size: 10.5px; color: var(--faint); }

.chart-scroll { overflow-x: auto; }
.chart { width: 100%; min-width: 620px; height: auto; display: block; }
.chart-axis {
  font: 9px var(--font); fill: var(--faint);
  font-variant-numeric: tabular-nums;
}
.chart-year { font-weight: 700; fill: var(--muted); }

/* Hover: the whole column is the target, the fills lift slightly. */
.bar-hit { fill: transparent; }
.bar:hover .bar-hit { fill: rgba(55, 65, 81, .045); }
.bar .seg { transition: opacity .12s ease; }
.chart:hover .bar:not(:hover) .seg { opacity: .55; }

.chart-data { margin-top: 12px; }
.chart-data > summary {
  font-size: 11px; color: var(--brand); cursor: pointer; width: max-content;
}
.chart-data > summary:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .bar .seg { transition: none; }
}

/* ================================================================= misc */

.mono { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.center { text-align: center; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.tiny { font-size: 10.5px; }
.section-title {
  font: 600 12.5px var(--font); color: var(--text);
  display: flex; align-items: center; gap: 8px;
}