/* =============================================================================
 * Campmoney design language ? the SINGLE source of the family's frontend design
 * tokens (fonts, type scale, spacing, radius, shadows) and base principles.
 *
 * Lives once in saas-common; every app/landing loads it (served at
 * /campmoney-ui.css by each Java app, copied into each *-web/ landing at deploy).
 * BRAND-specific values (accent colour, gradient) do NOT live here ? they come
 * from /brand.css, generated from the Java Brand, so there is still ONE source
 * of truth per concern: design = this file, brand = the Brand.
 *
 * PRINCIPLES (elvek)
 *  - Type: one family (Inter). Use the --fs-* scale, not ad-hoc px.
 *  - Spacing: 4px base; use the --sp-* scale for paddings/margins/gaps.
 *  - Radius: --radius-sm controls (8), --radius cards (10), --radius-lg panels (14),
 *    --radius-pill chips/badges.
 *  - Colour: one accent (from /brand.css). Light backgrounds/borders are tints of
 *    it (--accent-soft); neutrals (--ink/--muted/--line) are brandless greys here.
 *  - Components: primary button = filled accent; ghost = outline; modals centre on a
 *    scrim; toasts bottom; badges = pill. Keep these consistent across apps.
 *  - Tables & actions: EVERY list entity has a detail view (részletez?) ? the row is
 *    clickable (.rowlink) and opens it; the full set of function buttons lives THERE
 *    (modal/panel footer or header). The row itself stays clean: data + status badges.
 *    Inline action buttons in the last cell are allowed only as shortcuts and MAX 2
 *    (right-aligned .mini / .mini.danger). Need a 3rd action? It belongs in the detail
 *    view, not the row.
 *  - Button style by context (the SAME action must look the SAME in the same context):
 *    in a popup/detail (felugró) it is a FULL filled button (.act; destructive = .act.danger
 *    red-filled) ? same size as every other modal's buttons, never .mini. In a table row the
 *    shortcut is the SMALL OUTLINE variant (.mini / .mini.danger). E.g. Delete = red filled
 *    .act.danger in the detail modal, outline .mini.danger in the row.
 * ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
	/* ---- type ---- */
	--font-sans: "Inter", "Helvetica Neue", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--fs-2xs: 11px;
	--fs-xs: 12px;
	--fs-sm: 13px;
	--fs-base: 14px;
	--fs-md: 15px;
	--fs-lg: 17px;
	--fs-xl: 19px;
	--fs-2xl: 24px;
	--fs-3xl: 28px;
	--lh-tight: 1.2;
	--lh-normal: 1.55;

	/* ---- spacing (4px base) ---- */
	--sp-1: 4px;
	--sp-2: 8px;
	--sp-3: 12px;
	--sp-4: 16px;
	--sp-5: 20px;
	--sp-6: 24px;
	--sp-8: 32px;

	/* ---- radius ---- */
	--radius-sm: 8px;
	--radius: 10px;
	--radius-lg: 14px;
	--radius-pill: 999px;

	/* ---- elevation ---- */
	--shadow-sm: 0 1px 2px rgba(20, 16, 40, .06);
	--shadow: 0 4px 16px rgba(20, 16, 40, .10);

	/* ---- neutral palette (brandless; accent + accent-soft come from /brand.css) ---- */
	--ink: #1b1626;
	--muted: #6b6377;
	--line: #ece7f3;
	--card: #ffffff;
	--ok: #16a34a;
	--err: #dc2626;

	/* ---- layout ---- */
	--sidebar-w: 224px;
}

/* =============================================================================
 * Shared LOGIN/AUTH component (family rule) ? every app's sign-in looks the same:
 * icon + app name on top, a one-line tagline, then a clean WHITE card with the
 * email/password fields, a full-width pill primary ("Bejelentkezés"), and the
 * Google button below. All scoped under .login-shell so it never collides with
 * app-body styles. Accent/accent-soft come from /brand.css.
 * ========================================================================== */
.login-shell { max-width: 420px; margin: 7vh auto; padding: 0 16px; }
.login-shell .brand-lg { display: flex; align-items: center; justify-content: center; gap: 11px;
	color: var(--ink); font-size: 26px; font-weight: 700; margin: 0 0 6px; }
.login-shell .brand-logo-svg { display: block; box-sizing: border-box; padding: 9px;
	background: var(--accent-soft); border-radius: 11px; fill: none; stroke: var(--accent);
	stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.login-shell .tagline { text-align: center; color: var(--muted); font-size: var(--fs-sm, 13px); margin: 0 0 18px; }
.login-shell .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg, 14px);
	padding: 18px; box-shadow: var(--shadow-sm); }
.login-shell label { display: block; font-size: 13px; color: var(--muted); margin: 10px 0 4px; font-weight: 500; }
.login-shell input { width: 100%; padding: 9px 11px; border-radius: 8px; border: 1px solid var(--line);
	background: #fff; color: var(--ink); font-size: 15px; line-height: 1.2; font-family: var(--font-sans); }
.login-shell input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.login-shell .act { width: 100%; margin-top: 16px; padding: 12px; border: 0; border-radius: 9px;
	background: var(--accent); color: #fff; font-weight: 600; font-size: 15px; line-height: 1.2; cursor: pointer;
	font-family: var(--font-sans); }
.login-shell .act:hover { background: var(--accent-dark, var(--accent)); }
.login-shell .g-or { display: flex; align-items: center; gap: 10px; margin: 14px 0 10px;
	color: var(--muted); font-size: var(--fs-xs, 12px); }
.login-shell .g-or::before, .login-shell .g-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.login-shell .msg { font-size: var(--fs-sm, 13px); margin-top: 8px; min-height: 16px; }
.login-shell .msg.err { color: var(--err); }
.login-shell .msg.ok { color: var(--ok); }
.login-shell small { display: block; margin-top: 22px; text-align: center; color: var(--muted); font-size: .85rem; }
.login-shell small a { color: var(--accent); text-decoration: none; }
.login-shell small a:hover { text-decoration: underline; }
.login-shell .hint { display: block; text-align: center; color: var(--muted); font-size: var(--fs-xs, 12px);
	margin-top: 14px; line-height: 1.5; }
.login-shell .hint a { color: var(--accent); }