/* ===========================================================================
   PROFOIL zakaznicky portal - samostatny design system
   Nezavisly na app.css (interni system) - zadne sdilene tridy.
   Zelena #8ab532 = stavajici brand barva PROFOIL formulare.
   =========================================================================== */

:root {
	--p-font: 'Inter', 'Roboto', -apple-system, 'Segoe UI', sans-serif;
	--p-accent: #8ab532;
	--p-accent-dark: #74992a;
	--p-accent-light: #f1f7e4;
	--p-bg: #f4f6f0;
	--p-card: #ffffff;
	--p-text: #1e2717;
	--p-text-muted: #6b7563;
	--p-border: #e2e6da;
	--p-radius: 12px;
	--p-radius-sm: 8px;
	--p-shadow: 0 1px 3px rgba(30, 39, 23, 0.06), 0 4px 14px rgba(30, 39, 23, 0.05);
	--p-shadow-lg: 0 6px 28px rgba(30, 39, 23, 0.12);
	--p-red: #d64545;
	--p-red-bg: #fdeeee;
	--p-yellow: #c99a06;
	--p-yellow-bg: #fdf6dd;
	--p-blue: #2f7fd1;
	--p-blue-bg: #e9f2fc;
	--p-green: #4d9a3f;
	--p-green-bg: #e8f5e5;
	--p-gray-bg: #eef0ea;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
	font-family: var(--p-font);
	font-size: 15px;
	line-height: 1.5;
	color: var(--p-text);
	background: var(--p-bg);
	-webkit-font-smoothing: antialiased;
}

a { color: var(--p-accent-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------------
   Topbar + navigace (prihlasena cast)
   --------------------------------------------------------------------------- */

.p-topbar {
	position: sticky;
	top: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	gap: 24px;
	background: var(--p-card);
	border-bottom: 1px solid var(--p-border);
	padding: 0 28px;
	height: 64px;
}

.p-topbar-logo { display: flex; align-items: center; gap: 12px; }
.p-topbar-logo img { height: 36px; width: auto; display: block; }
.p-topbar-logo span {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--p-text-muted);
}

.p-nav { display: flex; gap: 6px; flex: 1; }

.p-nav a {
	padding: 8px 16px;
	border-radius: 999px;
	font-weight: 500;
	color: var(--p-text-muted);
	transition: background 0.15s, color 0.15s;
}
.p-nav a:hover { background: var(--p-gray-bg); color: var(--p-text); text-decoration: none; }
.p-nav a.active { background: var(--p-accent); color: #fff; }
.p-nav a.soon { opacity: 0.45; cursor: default; pointer-events: none; }

.p-user { display: flex; align-items: center; gap: 14px; }
.p-user-info { text-align: right; line-height: 1.25; }
.p-user-info strong { display: block; font-size: 14px; font-weight: 600; }
.p-user-info span { font-size: 12px; color: var(--p-text-muted); }
.p-user-avatar {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--p-accent);
	color: #fff;
	font-weight: 600;
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.p-logout {
	color: var(--p-text-muted);
	font-size: 18px;
	padding: 8px;
	border-radius: var(--p-radius-sm);
}
.p-logout:hover { background: var(--p-gray-bg); color: var(--p-red); text-decoration: none; }

/* ---------------------------------------------------------------------------
   Layout
   --------------------------------------------------------------------------- */

.p-container { max-width: 1160px; margin: 0 auto; padding: 32px 28px 64px; }

.p-page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.p-page-head h1 { font-size: 24px; font-weight: 700; }
.p-page-head p { color: var(--p-text-muted); margin-top: 2px; }

.p-card {
	background: var(--p-card);
	border: 1px solid var(--p-border);
	border-radius: var(--p-radius);
	box-shadow: var(--p-shadow);
	padding: 24px;
	margin-bottom: 24px;
}
.p-card h2 { font-size: 17px; font-weight: 600; margin-bottom: 16px; }

/* ---------------------------------------------------------------------------
   Dlazdice (dashboard)
   --------------------------------------------------------------------------- */

.p-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 18px;
	margin-bottom: 28px;
}

.p-tile {
	display: block;
	background: var(--p-card);
	border: 1px solid var(--p-border);
	border-radius: var(--p-radius);
	box-shadow: var(--p-shadow);
	padding: 22px;
	color: var(--p-text);
	transition: box-shadow 0.15s, transform 0.15s, border-color 0.15s;
}
a.p-tile:hover { text-decoration: none; box-shadow: var(--p-shadow-lg); transform: translateY(-2px); border-color: var(--p-accent); }
.p-tile.soon { opacity: 0.55; }

.p-tile-icon {
	width: 46px;
	height: 46px;
	border-radius: var(--p-radius-sm);
	background: var(--p-accent-light);
	color: var(--p-accent-dark);
	font-size: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 14px;
}
.p-tile strong { display: block; font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.p-tile span { font-size: 13px; color: var(--p-text-muted); }

/* ---------------------------------------------------------------------------
   Tlacitka
   --------------------------------------------------------------------------- */

.p-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	border: 1px solid var(--p-border);
	border-radius: var(--p-radius-sm);
	background: var(--p-card);
	color: var(--p-text);
	font-family: var(--p-font);
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s;
}
.p-btn:hover { background: var(--p-gray-bg); text-decoration: none; }

.p-btn-primary { background: var(--p-accent); border-color: var(--p-accent); color: #fff; }
.p-btn-primary:hover { background: var(--p-accent-dark); border-color: var(--p-accent-dark); }

.p-btn-danger { color: var(--p-red); }
.p-btn-danger:hover { background: var(--p-red-bg); border-color: var(--p-red); }

.p-btn-sm { padding: 6px 12px; font-size: 13px; }

/* ---------------------------------------------------------------------------
   Formulare
   --------------------------------------------------------------------------- */

.p-field { margin-bottom: 16px; }
.p-field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }

.p-field input,
.p-field select {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--p-border);
	border-radius: var(--p-radius-sm);
	background: var(--p-card);
	font-family: var(--p-font);
	font-size: 15px;
	color: var(--p-text);
	transition: border-color 0.15s, box-shadow 0.15s;
}
.p-field input:focus,
.p-field select:focus {
	outline: none;
	border-color: var(--p-accent);
	box-shadow: 0 0 0 3px rgba(138, 181, 50, 0.18);
}
.p-field small { display: block; margin-top: 5px; font-size: 12px; color: var(--p-text-muted); }

.p-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.p-form-grid .full { grid-column: 1 / -1; }

.p-checkbox { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.p-checkbox input { width: auto; }

/* ---------------------------------------------------------------------------
   Hlasky
   --------------------------------------------------------------------------- */

.p-alert {
	padding: 12px 16px;
	border-radius: var(--p-radius-sm);
	margin-bottom: 18px;
	font-size: 14px;
}
.p-alert-error { background: var(--p-red-bg); color: var(--p-red); border: 1px solid #f3c9c9; }
.p-alert-success { background: var(--p-green-bg); color: var(--p-green); border: 1px solid #c4e3bd; }
.p-alert-info { background: var(--p-blue-bg); color: var(--p-blue); border: 1px solid #c3daf2; }

.p-password-box {
	font-family: 'SF Mono', 'Consolas', monospace;
	font-size: 18px;
	font-weight: 600;
	letter-spacing: 0.05em;
	background: var(--p-accent-light);
	border: 1px dashed var(--p-accent);
	border-radius: var(--p-radius-sm);
	padding: 12px 18px;
	display: inline-block;
	margin: 6px 0;
	user-select: all;
}

/* ---------------------------------------------------------------------------
   Tabulky
   --------------------------------------------------------------------------- */

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

.p-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.p-table th {
	text-align: left;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--p-text-muted);
	padding: 10px 12px;
	border-bottom: 2px solid var(--p-border);
	white-space: nowrap;
}
.p-table td { padding: 12px; border-bottom: 1px solid var(--p-border); vertical-align: middle; }
.p-table tr:hover td { background: #fafbf7; }
.p-table .muted { color: var(--p-text-muted); }
.p-table .akce { text-align: right; white-space: nowrap; }
.p-table .akce a { margin-left: 10px; }

/* ---------------------------------------------------------------------------
   Badge (stavy uctu + pozdeji stavy objednavek 10-70)
   --------------------------------------------------------------------------- */

.p-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}
.p-badge-green { background: var(--p-green-bg); color: var(--p-green); }
.p-badge-red { background: var(--p-red-bg); color: var(--p-red); }
.p-badge-yellow { background: var(--p-yellow-bg); color: var(--p-yellow); }
.p-badge-blue { background: var(--p-blue-bg); color: var(--p-blue); }
.p-badge-gray { background: var(--p-gray-bg); color: var(--p-text-muted); }
.p-badge-purple { background: #f0e9fb; color: #7a4fc9; }

/* ---------------------------------------------------------------------------
   Timeline stavu objednavky (detail)
   --------------------------------------------------------------------------- */

.p-timeline { display: flex; margin: 8px 0 4px; }

.p-timeline-step { flex: 1; text-align: center; position: relative; }

.p-timeline-step::before {
	content: '';
	position: absolute;
	top: 15px;
	left: -50%;
	width: 100%;
	height: 3px;
	background: var(--p-border);
}
.p-timeline-step:first-child::before { display: none; }
.p-timeline-step.done::before,
.p-timeline-step.current::before { background: var(--p-accent); }

.p-timeline-dot {
	position: relative;
	z-index: 1;
	width: 32px;
	height: 32px;
	margin: 0 auto 8px;
	border-radius: 50%;
	background: var(--p-card);
	border: 3px solid var(--p-border);
	color: var(--p-text-muted);
	font-size: 13px;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
}
.p-timeline-step.done .p-timeline-dot { background: var(--p-accent); border-color: var(--p-accent); color: #fff; }
.p-timeline-step.current .p-timeline-dot { border-color: var(--p-accent); color: var(--p-accent-dark); box-shadow: 0 0 0 4px rgba(138, 181, 50, 0.2); }

.p-timeline-step strong { display: block; font-size: 13px; font-weight: 600; }
.p-timeline-step span { font-size: 12px; color: var(--p-text-muted); }
.p-timeline-step:not(.done):not(.current) strong { color: var(--p-text-muted); font-weight: 500; }

.p-storno-banner {
	background: var(--p-red-bg);
	border: 1px solid #f3c9c9;
	color: var(--p-red);
	border-radius: var(--p-radius);
	padding: 16px 20px;
	font-weight: 600;
	margin-bottom: 24px;
}

/* detail - souhrnna cena */
.p-total-highlight { font-size: 22px; font-weight: 700; color: var(--p-accent-dark); }

.p-detail-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; align-items: start; }
@media (max-width: 1000px) { .p-detail-grid { grid-template-columns: 1fr; } }

.p-info-radek { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--p-border); font-size: 14px; }
.p-info-radek:last-child { border-bottom: none; }
.p-info-radek .muted { color: var(--p-text-muted); }

/* ---------------------------------------------------------------------------
   Prihlasovaci obrazovka
   --------------------------------------------------------------------------- */

.p-login-page {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: linear-gradient(160deg, var(--p-bg) 0%, #e9efdd 100%);
}

.p-login-card {
	width: 100%;
	max-width: 420px;
	background: var(--p-card);
	border: 1px solid var(--p-border);
	border-radius: 16px;
	box-shadow: var(--p-shadow-lg);
	padding: 40px 36px 32px;
	text-align: center;
}
.p-login-card .p-field,
.p-login-card form { text-align: left; }

.p-login-logo { height: 52px; width: auto; margin-bottom: 14px; }
.p-login-title { font-size: 21px; font-weight: 700; margin-bottom: 4px; }
.p-login-subtitle { font-size: 14px; color: var(--p-text-muted); margin-bottom: 26px; }

.p-login-btn {
	width: 100%;
	padding: 12px;
	border: none;
	border-radius: var(--p-radius-sm);
	background: var(--p-accent);
	color: #fff;
	font-family: var(--p-font);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s;
	margin-top: 6px;
}
.p-login-btn:hover { background: var(--p-accent-dark); }

.p-login-links { margin-top: 20px; font-size: 13px; display: flex; flex-direction: column; gap: 8px; }
.p-login-footer { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--p-border); font-size: 12px; color: var(--p-text-muted); }

/* ---------------------------------------------------------------------------
   Paticka
   --------------------------------------------------------------------------- */

.p-footer {
	max-width: 1160px;
	margin: 0 auto;
	padding: 0 28px 32px;
	font-size: 12px;
	color: var(--p-text-muted);
	display: flex;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

/* ---------------------------------------------------------------------------
   Responsivita
   --------------------------------------------------------------------------- */

@media (max-width: 820px) {
	.p-topbar { flex-wrap: wrap; height: auto; padding: 12px 16px; gap: 10px; }
	.p-nav { order: 3; width: 100%; overflow-x: auto; padding-bottom: 4px; }
	.p-user { margin-left: auto; }
	.p-user-info { display: none; }
	.p-container { padding: 20px 16px 48px; }
	.p-form-grid { grid-template-columns: 1fr; }
	.p-page-head h1 { font-size: 20px; }
}