/* Auth / admin stránky (login, registrace, správa uživatelů/firem, log).
   Samostatný, nenáročný styl – editor puku má vlastní puck-editor.css. */

:root {
	--bg: #0f1218;
	--panel: #1a1f2b;
	--panel-2: #232a39;
	--text: #e7ebf3;
	--muted: #9aa4b8;
	--border: #303a4d;
	/* Brand Got Authentic – zlatá jako akcent na tmavém pozadí */
	--primary: #ccaf6e;
	--primary-strong: #bf9a48;
	--primary-soft: #ddc48a;
	--primary-ink: #20242c;     /* tmavý text na zlatém tlačítku (kontrast) */
	--accent-soft: rgba(204,175,110,.12);
	--danger: #ff5d6c;
	--ok: #2ec27e;
	--warn: #ffb020;
}

* { box-sizing: border-box; }

/* Formulářové prvky nedědí font-family automaticky – vynutit stejný font (Outfit) */
button, input, select, textarea { font-family: inherit; }

body {
	margin: 0;
	font-family: 'Outfit', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	background: var(--bg);
	color: var(--text);
	line-height: 1.5;
}

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

/* Topbar styly jsou ve sdíleném www/css/topbar.css (používá je i editor). */

/* ── Layout ── */
.container { max-width: 960px; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.page-head h1 { margin: 0; font-size: 1.5rem; }
h1 { font-size: 1.8rem; font-weight: 700; letter-spacing: -.01em; }
h2 { font-weight: 700; letter-spacing: -.01em; }

/* ── Card ── */
.card {
	background: var(--panel);
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 1.5rem 1.75rem;
	max-width: 460px;
	margin: 1.5rem auto;
}
.card h1 { margin-top: 0; }

/* ── Forms ── */
.form-group { margin-bottom: 1rem; }
label { display: inline-block; margin-bottom: .3rem; color: var(--muted); font-size: .92rem; }
.form-control, input[type=text], input[type=email], input[type=password], select, textarea {
	width: 100%;
	padding: .55rem .7rem;
	background: var(--panel-2);
	color: var(--text);
	border: 1px solid var(--border);
	border-radius: 8px;
	font-size: 1rem;
}
input[type=checkbox] { width: auto; margin-right: .4rem; transform: translateY(1px); accent-color: var(--primary); }
/* BootstrapForm si u checkboxu renderuje vlastní <label> s popiskem uvnitř (šablony
   proto kolem {input} žádný label nepřidávají – vznikl by 2×). Třídy jsou z Bootstrapu 4
   (custom-control), .form-check je varianta pro BootstrapVersion::V5. */
.custom-control, .form-check { display: inline-flex; align-items: center; margin-bottom: 0; cursor: pointer; }
.custom-control-label, .form-check-label { margin-bottom: 0; cursor: pointer; }
input[type=range] { accent-color: var(--primary); }
.form-control:focus, input:focus, select:focus { outline: none; border-color: var(--primary); }
/* Chyba u konkrétního pole – šablony ji vypisují přes {inputError} (netteForms.js
   se nenačítá, takže validace i hlášky jsou čistě serverové). */
.error { display: block; margin-top: .3rem; color: var(--danger); font-size: .85rem; }
.error:empty { display: none; }
/* Pole s chybou (klientská validace, www/js/form-validation.js) */
.is-invalid { border-color: var(--danger) !important; }
/* Chyby, které nemají viditelné pole (skrytý pickup_code z PPL widgetu). */
.form-errors:empty { display: none; }
.form-errors { margin-bottom: 1rem; }

/* ── Buttons ── */
.btn, button, input[type=submit] {
	display: inline-block;
	padding: .55rem 1rem;
	border: 1px solid var(--border);
	border-radius: 8px;
	background: var(--panel-2);
	color: var(--text);
	font-size: .95rem;
	font-weight: 600;
	cursor: pointer;
}
.btn:hover, button:hover { text-decoration: none; filter: brightness(1.1); }
.btn-primary, input[type=submit] { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.btn-secondary { background: var(--panel-2); }
.btn-ghost { background: transparent; }
.btn-sm { padding: .3rem .6rem; font-size: .85rem; }

/* ── Table ── */
table { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
th, td { padding: .6rem .75rem; text-align: left; border-bottom: 1px solid var(--border); }
th { background: var(--panel-2); color: var(--muted); font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; }
tbody tr:last-child td { border-bottom: none; }
td.actions { text-align: right; white-space: nowrap; }

/* ── Flashes / banners ── */
.flashes { margin-bottom: 1rem; }
.flash { padding: .7rem 1rem; border-radius: 8px; margin-bottom: .5rem; border: 1px solid transparent; }
.flash-success { background: rgba(46,194,126,.12); border-color: var(--ok); color: #a6f0cf; }
.flash-error   { background: rgba(255,93,108,.12); border-color: var(--danger); color: #ffc2c8; }
.flash-info    { background: var(--accent-soft); border-color: var(--primary); color: var(--primary-soft); }
.flash-warning { background: rgba(255,176,32,.12); border-color: var(--warn); color: #ffe0a6; }
.ctx-banner { background: rgba(255,176,32,.15); border: 1px solid var(--warn); color: #ffe0a6; padding: .7rem 1rem; border-radius: 8px; margin-bottom: 1rem; }

/* ── Utility ── */
.muted { color: var(--muted); }
.link { word-break: break-all; }
.active { color: var(--text); font-weight: 700; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 1rem; margin-top: 1.5rem; }
.tile { display: block; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 1.25rem; color: var(--text); transition: border-color .15s; }
.tile:hover { border-color: var(--primary); text-decoration: none; }
.tile h3 { margin: 0 0 .35rem; display: flex; align-items: center; gap: .45rem; }
.tile h3 svg { color: var(--primary); }
.h1-ico { color: var(--primary); }
h1 { display: inline-flex; align-items: center; gap: .5rem; }
.tile p { margin: 0; color: var(--muted); font-size: .9rem; }