@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@600;700;800;900&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500&display=swap');

:root {
	--red: #E30613;
	--red-dark: #A6040E;
	--ink: #121214;
	--ink-soft: #1D1E22;
	--paper: #F5F3EE;
	--paper-dim: #EAE7DF;
	--steel: #6B6E76;
	--steel-light: #9A9DA5;
	--line: rgba(18, 18, 20, 0.14);
	--line-on-dark: rgba(245, 243, 238, 0.16);
	--ok: #1B8A5A;

	--font-display: 'Big Shoulders Display', sans-serif;
	--font-body: 'IBM Plex Sans', sans-serif;
	--font-mono: 'IBM Plex Mono', monospace;

	--container: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

/* blueprint grid texture, used as a section background */
.grid-bg-dark {
	background-image:
		linear-gradient(var(--line-on-dark) 1px, transparent 1px),
		linear-gradient(90deg, var(--line-on-dark) 1px, transparent 1px);
	background-size: 40px 40px;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3, h4 {
	font-family: var(--font-display);
	text-transform: uppercase;
	letter-spacing: 0.01em;
	font-weight: 800;
	margin: 0;
	line-height: 0.95;
}

.eyebrow {
	font-family: var(--font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--red);
	display: flex;
	align-items: center;
	gap: 0.6em;
}
.eyebrow::before {
	content: '';
	width: 22px;
	height: 2px;
	background: var(--red);
	display: inline-block;
}

.wrap {
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 32px;
}

/* ---------- buttons ---------- */
.btn {
	font-family: var(--font-mono);
	font-size: 0.82rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	padding: 14px 26px;
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
	background: var(--red);
	color: var(--paper);
	border-color: var(--red);
}
.btn-primary:hover { background: var(--red-dark); border-color: var(--red-dark); }

.btn-ghost-dark {
	background: transparent;
	color: var(--ink);
	border-color: var(--ink);
}
.btn-ghost-dark:hover { background: var(--ink); color: var(--paper); }

.btn-ghost-light {
	background: transparent;
	color: var(--paper);
	border-color: var(--line-on-dark);
}
.btn-ghost-light:hover { background: var(--paper); color: var(--ink); }

.btn-arrow { transition: transform 0.15s ease; }
.btn:hover .btn-arrow { transform: translateX(3px); }

/* ---------- slim top header (login page) ---------- */
.site-header {
	background: var(--paper);
	border-bottom: 1px solid var(--line);
}
.site-header .wrap {
	display: flex;
	align-items: center;
	height: 72px;
}
.logo {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: var(--ink);
}
.logo-mark {
	width: 34px;
	height: 34px;
	background: var(--red);
	position: relative;
	flex: none;
}
.logo-mark::after {
	content: '';
	position: absolute;
	inset: 8px;
	border: 2px solid var(--paper);
}
.logo-word {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 1.5rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	line-height: 1;
}
.logo-word small {
	display: block;
	font-family: var(--font-mono);
	font-weight: 500;
	font-size: 0.62rem;
	letter-spacing: 0.16em;
	color: var(--steel);
	text-transform: uppercase;
	margin-top: 3px;
}

/* ================= LOGIN page ================= */
.login-shell {
	min-height: calc(100vh - 72px - 1px);
	display: grid;
	grid-template-columns: 1fr 1fr;
}
.login-visual {
	background: var(--ink);
	position: relative;
	overflow: hidden;
	padding: 64px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.login-visual .grid-bg-dark { position: absolute; inset: 0; }
.login-visual-content { position: relative; z-index: 2; }
.login-visual h2 { color: var(--paper); font-size: clamp(2rem, 4vw, 3rem); max-width: 12ch; }
.login-visual p { color: var(--steel-light); max-width: 34ch; margin-top: 20px; }
.login-badge {
	position: relative; z-index: 2;
	font-family: var(--font-mono);
	font-size: 0.72rem;
	color: var(--steel-light);
	letter-spacing: 0.08em;
	display: flex;
	justify-content: space-between;
	border-top: 1px solid var(--line-on-dark);
	padding-top: 20px;
}

.login-form-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 64px 48px;
}
.login-form { width: 100%; max-width: 380px; }
.login-form .eyebrow { margin-bottom: 18px; }
.login-form h1 { font-size: 2.2rem; margin-bottom: 8px; }
.login-form > p { color: var(--steel); margin: 0 0 40px; font-size: 0.95rem; }

.field-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; }
.checkbox { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--steel); }
.forgot { font-size: 0.85rem; text-decoration: none; color: var(--red); }
.forgot:hover { text-decoration: underline; }

.login-form .btn-primary { width: 100%; justify-content: center; padding: 16px; }
.login-note {
	margin-top: 28px;
	font-size: 0.82rem;
	color: var(--steel);
	padding-top: 22px;
	border-top: 1px solid var(--line);
}
.login-note a { color: var(--red); text-decoration: none; }

/* ================= form fields (login + panel forms) ================= */
.field { margin-bottom: 22px; }
.field label {
	display: block;
	font-family: var(--font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--steel);
	margin-bottom: 8px;
}
.field input {
	width: 100%;
	font-family: var(--font-body);
	font-size: 1rem;
	padding: 14px 4px;
	border: none;
	border-bottom: 1.5px solid var(--line);
	background: transparent;
	color: var(--ink);
}
.field input:focus { outline: none; border-bottom-color: var(--red); }

.field select, .field textarea {
	width: 100%;
	font-family: var(--font-body);
	font-size: 0.95rem;
	padding: 12px 10px;
	border: 1px solid var(--line);
	background: var(--paper);
	color: var(--ink);
}
.field textarea { resize: vertical; min-height: 76px; }
.field input[readonly], .field select[disabled], .field textarea[disabled] {
	background: var(--paper-dim);
	color: var(--steel);
}

.field-unit { display: flex; align-items: center; gap: 8px; }
.field-unit input, .field-unit select { flex: 1; }
.field-unit span { font-size: 0.85rem; color: var(--steel); white-space: nowrap; }

.field-inline { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.field-inline label { font-size: 0.88rem; color: var(--steel); font-family: var(--font-body); text-transform: none; letter-spacing: 0; margin-bottom: 0; }

/* ================= PANEL (post-login shell) ================= */
.panel-body { background: var(--paper-dim); min-height: 100vh; }
.panel-shell { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; }

.panel-nav {
	background: var(--ink);
	color: var(--paper);
	padding: 28px 20px;
	display: flex;
	flex-direction: column;
}
.panel-nav .logo { margin-bottom: 40px; padding: 0 8px; }
.panel-nav .logo-word { color: var(--paper); }

.role-indicator {
	font-family: var(--font-mono);
	font-size: 0.66rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-align: center;
	padding: 9px 4px;
	margin-bottom: 18px;
	border: 1px solid var(--red);
	color: var(--paper);
	background: var(--red);
}

.panel-nav-list { list-style: none; margin: 0; padding: 0; flex: 1; }
.panel-nav-list li + li { margin-top: 4px; }
.panel-nav-list a {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: var(--steel-light);
	font-family: var(--font-mono);
	font-size: 0.82rem;
	letter-spacing: 0.03em;
	padding: 13px 12px;
	border-left: 2px solid transparent;
}
.panel-nav-list a .dot { width: 6px; height: 6px; background: var(--steel-light); flex: none; }
.panel-nav-list a:hover { color: var(--paper); }
.panel-nav-list a.active {
	color: var(--paper);
	background: var(--ink-soft);
	border-left-color: var(--red);
}
.panel-nav-list a.active .dot { background: var(--red); }
.panel-nav-foot {
	border-top: 1px solid var(--line-on-dark);
	padding-top: 20px;
	font-family: var(--font-mono);
	font-size: 0.76rem;
	color: var(--steel-light);
}
.panel-nav-foot .who { color: var(--paper); font-weight: 600; margin-bottom: 4px; }
.panel-nav-foot a { color: var(--red); text-decoration: none; display: inline-block; margin-top: 10px; }

.panel-main { padding: 40px 48px 60px; }
.panel-topbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 36px;
}
.panel-topbar h1 { font-size: 2rem; font-family: var(--font-display); text-transform: uppercase; }
.panel-topbar .sub { font-family: var(--font-mono); font-size: 0.8rem; color: var(--steel); margin-top: 6px; }

.panel-crumb {
	font-family: var(--font-mono);
	font-size: 0.76rem;
	color: var(--steel);
	margin-bottom: 10px;
	display: flex;
	gap: 8px;
	align-items: center;
}
.panel-crumb a { color: var(--red); text-decoration: none; }
.panel-crumb a:hover { text-decoration: underline; }

.tag-flag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-mono);
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 5px 12px;
	background: #FCEBEC;
	color: var(--red-dark);
	margin-left: 14px;
}

.kpi-row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
	margin-bottom: 32px;
}
.kpi { background: var(--paper); padding: 26px 24px; }
.kpi-label { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--steel); }
.kpi-value { font-family: var(--font-display); font-weight: 800; font-size: 2.4rem; margin-top: 10px; }
.kpi-value.accent { color: var(--red); }
.kpi-delta { font-family: var(--font-mono); font-size: 0.72rem; margin-top: 8px; color: var(--ok); }
.kpi-delta.warn { color: var(--red); }

.panel-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 24px; }
.panel-card { background: var(--paper); border: 1px solid var(--line); padding: 28px; }
.panel-card h3 { text-transform: none; font-family: var(--font-body); font-weight: 700; font-size: 1.05rem; margin-bottom: 20px; }

.mock-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.mock-table th {
	text-align: left;
	font-family: var(--font-mono);
	font-size: 0.68rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--steel);
	padding: 0 16px 10px 0;
	border-bottom: 1px solid var(--line);
}
.mock-table td { padding: 14px 16px 14px 0; border-bottom: 1px solid var(--line); }
.mock-table tr:last-child td { border-bottom: none; }
.mock-table td.num { text-align: right; font-family: var(--font-mono); }
.mock-table.sortable th { cursor: pointer; user-select: none; }
.mock-table.sortable th:hover { color: var(--ink); }
.mock-table.sortable th .arrow { font-size: 0.6rem; margin-left: 4px; opacity: 0.45; }
.mock-table.sortable th.sorted .arrow { opacity: 1; color: var(--red); }

.status-pill {
	font-family: var(--font-mono);
	font-size: 0.68rem;
	text-transform: uppercase;
	padding: 3px 9px;
	display: inline-block;
}
.status-pill.open { background: #FCEBEC; color: var(--red-dark); }
.status-pill.done { background: #E7F3EC; color: var(--ok); }
.status-pill.wait { background: var(--paper-dim); color: var(--steel); }
.status-pill.own { background: var(--paper-dim); color: var(--steel); }

.quick-actions { display: flex; flex-direction: column; gap: 10px; }
.quick-actions .btn { justify-content: space-between; width: 100%; }

.placeholder-note {
	margin-top: 40px;
	border: 1px dashed var(--steel-light);
	padding: 18px 22px;
	font-family: var(--font-mono);
	font-size: 0.78rem;
	color: var(--steel);
	display: flex;
	gap: 12px;
	align-items: flex-start;
}
.placeholder-note strong { color: var(--ink); }

/* ---------- permission-gated UI elements (server-rendered) ---------- */
.badge-admin {
	font-family: var(--font-mono);
	font-size: 0.58rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--red);
	border: 1px solid var(--red);
	padding: 1px 5px;
	margin-left: 8px;
	white-space: nowrap;
}

.lock-tag {
	font-family: var(--font-mono);
	font-size: 0.6rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--red);
	border: 1px solid var(--red);
	padding: 0 5px;
	margin-left: 8px;
}

/* ---------- panel form sections (gwarancja / naprawa) ---------- */
.form-section {
	border: 1px solid var(--line);
	background: var(--paper);
	padding: 30px 32px;
	margin-bottom: 22px;
}
.form-section h3 {
	text-transform: none;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 1.02rem;
	margin-bottom: 22px;
	display: flex;
	align-items: center;
	gap: 10px;
}
.form-section .step-num { font-family: var(--font-mono); color: var(--red); font-size: 0.82rem; }

.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 32px; }
.form-grid .field.full { grid-column: 1 / -1; }

.form-actions { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 8px; }
.form-actions .btn-group { display: flex; gap: 12px; flex-wrap: wrap; }

/* cennik / line items */
.line-items { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 0.9rem; }
.line-items td { padding: 11px 4px; border-bottom: 1px solid var(--line); }
.line-items td.price { text-align: right; font-family: var(--font-mono); white-space: nowrap; }
.line-items td.del { text-align: right; width: 34px; }
.btn-del {
	background: none;
	border: 1px solid var(--line);
	width: 26px; height: 26px;
	cursor: pointer;
	color: var(--steel);
	font-family: var(--font-mono);
}
.btn-del:hover { border-color: var(--red); color: var(--red); }
.line-total { text-align: right; font-family: var(--font-mono); margin-top: 14px; font-size: 0.95rem; color: var(--steel); }
.line-total strong { color: var(--red); font-size: 1.3rem; font-family: var(--font-display); margin-left: 8px; }
.add-row { display: flex; gap: 10px; align-items: center; }
.add-row select { flex: 1; }
.add-row input { width: 100px; }
.add-row .btn { padding: 12px 18px; }

/* dashboard tiles */
.tile-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
	margin-bottom: 32px;
}
.tile { background: var(--paper); padding: 34px; }
.tile h3 { text-transform: none; font-family: var(--font-body); font-weight: 700; font-size: 1.2rem; margin-bottom: 10px; }
.tile p { color: var(--steel); font-size: 0.9rem; margin: 0 0 22px; }
.tile-search { display: flex; gap: 10px; }
.tile-search input {
	flex: 1;
	font-family: var(--font-mono);
	padding: 13px 12px;
	border: 1px solid var(--line);
	background: var(--paper-dim);
	color: var(--ink);
}
.tile-search input:focus { outline: 2px solid var(--red); outline-offset: -2px; }
.tile-search .btn { padding: 0 20px; }
.tile-error { margin-top: 12px; font-family: var(--font-mono); font-size: 0.76rem; color: var(--red-dark); }

/* date range filter (lista napraw) */
.filter-bar { background: var(--paper-dim); border: 1px solid var(--line); padding: 20px 24px; margin-bottom: 24px; }
.filter-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
.filter-row .field { margin-bottom: 0; }
.filter-row .field input { border: 1px solid var(--line); background: var(--paper); padding: 12px 10px; width: 140px; }

/* totals summary */
.totals-box { display: flex; justify-content: flex-end; margin-top: 8px; }
.totals-box table { border-collapse: collapse; font-family: var(--font-mono); font-size: 0.86rem; }
.totals-box td { padding: 9px 18px; text-align: right; color: var(--steel); }
.totals-box tr.total td { border-top: 1px solid var(--ink); color: var(--ink); font-weight: 700; font-size: 1rem; padding-top: 14px; }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
	.login-shell { grid-template-columns: 1fr; }
	.login-visual { display: none; }
	.panel-shell { grid-template-columns: 1fr; }
	.panel-nav { display: none; }
	.panel-grid { grid-template-columns: 1fr; }
	.kpi-row { grid-template-columns: 1fr 1fr; }
	.form-grid { grid-template-columns: 1fr; }
	.tile-grid { grid-template-columns: 1fr; }
}