/* billentyű themes over the Életút base (invoicer.css): data-skin="szines" (default, yellow keys) or "alap" (graphite
   keys) on <html>; data-skin="eletut" leaves invoicer.css alone. Light / dark follows data-bs-theme as before.
   Tokens from the "Billentyu App" design (bv4): every control is a key cap, a face over a darker skirt. */

/* ---------- Tokens: light */
:root:not([data-skin=eletut]) {
    --iv-app: oklch(0.975 0.003 95);
    --iv-surface: oklch(0.975 0.003 95);
    --iv-raised: oklch(0.993 0.002 95);
    --iv-field: oklch(0.995 0.002 95);
    --iv-line: oklch(0.88 0.005 90);
    --iv-line-soft: oklch(0.92 0.004 90);
    --iv-line2: oklch(0.83 0.006 90);
    --iv-timeline: oklch(0.80 0.006 90);
    --iv-track: oklch(0.90 0.005 90);
    --iv-ink: oklch(0.2 0.01 80);
    --iv-ink-rgb: 33, 30, 25;
    --iv-ink2: oklch(0.30 0.008 90);
    --iv-ink3: oklch(0.36 0.008 90);
    --iv-ink4: oklch(0.47 0.008 90);
    --iv-link: oklch(0.2 0.01 80);
    --iv-link-rgb: 33, 30, 25;
    --iv-inverse-bg: oklch(0.2 0.01 80);
    --iv-inverse-ink: oklch(0.975 0.003 95);
    --iv-watermark: rgba(33, 30, 25, .05);

    --iv-ok-fg: oklch(0.45 0.11 150); --iv-ok-bg: oklch(0.96 0.03 150); --iv-ok-bd: oklch(0.80 0.07 150);
    --iv-warn-fg: oklch(0.50 0.11 70); --iv-warn-bg: oklch(0.96 0.04 85); --iv-warn-bd: oklch(0.82 0.09 80);
    --iv-info-fg: oklch(0.45 0.10 240); --iv-info-bg: oklch(0.96 0.02 240); --iv-info-bd: oklch(0.80 0.05 240);
    --iv-bad-fg: oklch(0.48 0.17 22); --iv-bad-bg: oklch(0.95 0.025 25); --iv-bad-bd: oklch(0.80 0.08 25);
    --iv-mute-bg: oklch(0.96 0.003 90); --iv-mute-fg: oklch(0.36 0.008 90); --iv-mute-bd: oklch(0.85 0.005 90);
    --iv-ok-solid: oklch(0.45 0.11 150); --iv-ok-solid-ink: #ffffff;
    --iv-bad-solid: oklch(0.48 0.17 22); --iv-bad-solid-ink: #ffffff;
    --iv-bad-dash: oklch(0.60 0.14 22);
    --iv-bad-sub: oklch(0.36 0.06 22);

    /* Neutral keys (secondary buttons, toggles) */
    --key-face: oklch(0.995 0.002 95);
    --key-skirt: oklch(0.82 0.006 90);
    --key-ink: oklch(0.2 0.01 80);

    --iv-serif: 'Familjen Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --bs-font-sans-serif: 'Familjen Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
/* Színes: yellow (Memphis) primary keys with dark lettering. */
:root[data-skin=szines] {
    --iv-accent: oklch(0.89 0.15 95);
    --iv-accent-skirt: oklch(0.68 0.14 85);
    --iv-accent-ink: oklch(0.2 0.01 80);
    --iv-ring: oklch(0.89 0.15 95 / .7);
}
/* Alap: graphite primary keys. */
:root[data-skin=alap] {
    --iv-accent: oklch(0.36 0.01 260);
    --iv-accent-skirt: oklch(0.22 0.008 260);
    --iv-accent-ink: oklch(0.96 0.004 90);
    --iv-ring: oklch(0.80 0.02 260);
}

/* ---------- Tokens: dark */
:root:not([data-skin=eletut])[data-bs-theme=dark] {
    --iv-app: oklch(0.19 0.006 80);
    --iv-surface: oklch(0.19 0.006 80);
    --iv-raised: oklch(0.225 0.006 80);
    --iv-field: oklch(0.165 0.006 80);
    --iv-line: oklch(0.32 0.006 80);
    --iv-line-soft: oklch(0.26 0.006 80);
    --iv-line2: oklch(0.36 0.006 80);
    --iv-timeline: oklch(0.40 0.006 80);
    --iv-track: oklch(0.28 0.006 80);
    --iv-ink: oklch(0.94 0.004 90);
    --iv-ink-rgb: 236, 235, 232;
    --iv-ink2: oklch(0.86 0.005 90);
    --iv-ink3: oklch(0.80 0.006 90);
    --iv-ink4: oklch(0.68 0.006 90);
    --iv-link: oklch(0.94 0.004 90);
    --iv-link-rgb: 236, 235, 232;
    --iv-inverse-bg: oklch(0.94 0.004 90);
    --iv-inverse-ink: oklch(0.19 0.006 80);
    --iv-watermark: rgba(236, 235, 232, .05);

    --iv-ok-fg: oklch(0.78 0.13 150); --iv-ok-bg: oklch(0.26 0.04 150); --iv-ok-bd: oklch(0.40 0.07 150);
    --iv-warn-fg: oklch(0.83 0.12 82); --iv-warn-bg: oklch(0.27 0.04 82); --iv-warn-bd: oklch(0.45 0.08 82);
    --iv-info-fg: oklch(0.78 0.10 240); --iv-info-bg: oklch(0.26 0.04 240); --iv-info-bd: oklch(0.42 0.07 240);
    --iv-bad-fg: oklch(0.75 0.15 25); --iv-bad-bg: oklch(0.27 0.06 25); --iv-bad-bd: oklch(0.45 0.10 25);
    --iv-mute-bg: oklch(0.225 0.006 80); --iv-mute-fg: oklch(0.80 0.006 90); --iv-mute-bd: oklch(0.36 0.006 80);
    --iv-ok-solid: oklch(0.78 0.13 150); --iv-ok-solid-ink: oklch(0.19 0.006 80);
    --iv-bad-solid: oklch(0.70 0.16 25); --iv-bad-solid-ink: oklch(0.19 0.006 80);
    --iv-bad-dash: oklch(0.75 0.15 25);
    --iv-bad-sub: oklch(0.82 0.04 25);

    --key-face: oklch(0.30 0.008 260);
    --key-skirt: oklch(0.12 0.006 260);
    --key-ink: oklch(0.94 0.004 90);
}
:root[data-skin=szines][data-bs-theme=dark] {
    --iv-accent: oklch(0.86 0.15 92);
    --iv-accent-skirt: oklch(0.58 0.12 85);
    --iv-accent-ink: oklch(0.2 0.01 80);
    --iv-ring: oklch(0.86 0.15 92 / .55);
}
:root[data-skin=alap][data-bs-theme=dark] {
    --iv-accent: oklch(0.92 0.004 90);
    --iv-accent-skirt: oklch(0.68 0.006 90);
    --iv-accent-ink: oklch(0.2 0.01 80);
    --iv-ring: oklch(0.60 0.01 260);
}

/* ---------- Type */
:root:not([data-skin=eletut]) body { letter-spacing: -0.005em; }
:root:not([data-skin=eletut]) .page-head h1 { font-weight: 700; letter-spacing: -0.03em; font-size: 34px; line-height: 1.05; }
:root:not([data-skin=eletut]) .page-head h1.lg { font-size: 38px; }
:root:not([data-skin=eletut]) .section-title,
:root:not([data-skin=eletut]) h2 { font-weight: 700; letter-spacing: -0.02em; }
:root:not([data-skin=eletut]) .label { letter-spacing: .04em; }
@media (max-width: 767.98px) {
    :root:not([data-skin=eletut]) .page-head h1, :root:not([data-skin=eletut]) .page-head h1.lg { font-size: 28px; }
}

/* ---------- Brand mark: a key cap with two slanted strokes (the billentyu.hu logo), then bill + entyű */
.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--iv-ink); text-decoration: none; }
.brand:hover { color: var(--iv-ink); }
.brand-key {
    width: 30px; height: 30px; flex: none; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center;
    gap: 3px; background: var(--iv-accent); color: var(--iv-accent-ink);
    box-shadow: 0 0 0 2px var(--iv-accent-skirt, var(--iv-accent)), 0 3px 0 2px var(--iv-accent-skirt, var(--iv-accent));
    margin-bottom: 3px;
}
.brand-key i { width: 3.5px; height: 11px; border-radius: 2px; background: currentColor; transform: skewX(-24deg); }
.brand-name { font: 400 22px/1 var(--bs-font-sans-serif); letter-spacing: -0.035em; }
.brand-name b { font-weight: 700; }
.login-card .brand-name { font-size: 30px; }
.login-card .brand-key { width: 36px; height: 36px; gap: 4px; }
.login-card .brand-key i { width: 4px; height: 13px; }
:root[data-skin=eletut] .brand-name { font-family: var(--iv-serif); letter-spacing: 0; font-weight: 600; }
:root[data-skin=eletut] .brand-name b { font-weight: 600; }
:root[data-skin=eletut] .brand-key { box-shadow: none; margin-bottom: 0; border-radius: 6px; }

/* ---------- Surfaces */
:root:not([data-skin=eletut]) .box,
:root:not([data-skin=eletut]) .table-wrap,
:root:not([data-skin=eletut]) .summary,
:root:not([data-skin=eletut]) .login-card,
:root:not([data-skin=eletut]) .tab-box { border-radius: 12px; }
:root:not([data-skin=eletut]) .card { --bs-card-border-radius: 12px; }
:root:not([data-skin=eletut]) .login-card { padding: 36px; }
:root:not([data-skin=eletut]) .alert { --bs-alert-border-radius: 10px; }
:root:not([data-skin=eletut]) .dropdown-menu { --bs-dropdown-border-radius: 10px; }
:root:not([data-skin=eletut]) .modal { --bs-modal-border-radius: 12px; }

/* ---------- Forms */
:root:not([data-skin=eletut]) .form-control,
:root:not([data-skin=eletut]) .form-select { background-color: var(--iv-field); border-radius: 8px; }
:root:not([data-skin=eletut]) .form-control:focus,
:root:not([data-skin=eletut]) .form-select:focus { background-color: var(--iv-field); }
:root:not([data-skin=eletut]) .uline,
:root:not([data-skin=eletut]) .uline.form-control,
:root:not([data-skin=eletut]) .uline.form-select { background-color: transparent; border-radius: 0; }
/* A ticked box is ink, not accent: a white tick on yellow would vanish. */
:root:not([data-skin=eletut]) .form-check-input:checked { background-color: var(--iv-inverse-bg); border-color: var(--iv-inverse-bg); }
:root:not([data-skin=eletut])[data-bs-theme=dark] .form-check-input:checked[type=checkbox] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23302d27' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
:root:not([data-skin=eletut]) .seg { border-radius: 10px; }

/* ---------- Keys: buttons press down onto their skirt */
:root:not([data-skin=eletut]) .btn {
    --skirt: var(--key-skirt);
    --bs-btn-border-radius: 10px; --bs-btn-font-weight: 600;
    --bs-btn-color: var(--key-ink); --bs-btn-bg: var(--key-face); --bs-btn-border-color: var(--skirt);
    --bs-btn-hover-color: var(--key-ink); --bs-btn-hover-bg: color-mix(in oklch, var(--key-face) 94%, var(--key-ink));
    --bs-btn-hover-border-color: var(--skirt);
    --bs-btn-active-color: var(--key-ink); --bs-btn-active-bg: var(--key-face); --bs-btn-active-border-color: var(--skirt);
    --bs-btn-disabled-color: var(--key-ink); --bs-btn-disabled-bg: var(--key-face); --bs-btn-disabled-border-color: var(--skirt);
    box-shadow: 0 3px 0 0 var(--skirt);
    margin-bottom: 3px;
    transition: transform 70ms ease, box-shadow 70ms ease, background-color 70ms ease;
}
:root:not([data-skin=eletut]) .btn:active,
:root:not([data-skin=eletut]) .btn.active { transform: translateY(2px); box-shadow: 0 1px 0 0 var(--skirt); }
:root:not([data-skin=eletut]) .btn:focus-visible { box-shadow: 0 3px 0 0 var(--skirt), 0 0 0 3px var(--iv-surface), 0 0 0 6px var(--iv-ring); }
:root:not([data-skin=eletut]) .btn:disabled,
:root:not([data-skin=eletut]) .btn.disabled { transform: none; }
:root:not([data-skin=eletut]) .btn-primary {
    --skirt: var(--iv-accent-skirt);
    --bs-btn-color: var(--iv-accent-ink); --bs-btn-bg: var(--iv-accent);
    --bs-btn-hover-color: var(--iv-accent-ink); --bs-btn-hover-bg: color-mix(in oklch, var(--iv-accent) 92%, var(--iv-accent-skirt));
    --bs-btn-active-color: var(--iv-accent-ink); --bs-btn-active-bg: var(--iv-accent);
    --bs-btn-disabled-color: var(--iv-accent-ink); --bs-btn-disabled-bg: var(--iv-accent);
}
:root:not([data-skin=eletut]) .btn-outline-primary {
    --bs-btn-hover-bg: var(--iv-accent); --bs-btn-hover-color: var(--iv-accent-ink); --bs-btn-hover-border-color: var(--iv-accent-skirt);
}
:root:not([data-skin=eletut]) .btn-danger,
:root:not([data-skin=eletut]) .btn-outline-danger {
    --skirt: var(--iv-bad-solid);
    --bs-btn-color: var(--iv-bad-fg);
    --bs-btn-hover-color: var(--iv-bad-solid-ink); --bs-btn-hover-bg: var(--iv-bad-solid);
    --bs-btn-active-color: var(--iv-bad-solid-ink); --bs-btn-active-bg: var(--iv-bad-solid);
}
:root:not([data-skin=eletut]) .btn-link,
:root:not([data-skin=eletut]) .btn-close { box-shadow: none; margin-bottom: 0; border-color: transparent; background-color: transparent; transform: none; }
:root:not([data-skin=eletut]) .btn-link { --bs-btn-color: var(--iv-link); --bs-btn-hover-color: var(--iv-ink); --bs-btn-hover-bg: transparent; --bs-btn-active-bg: transparent; }
:root:not([data-skin=eletut]) .theme-toggle {
    border-radius: 8px; border-color: var(--key-skirt); background: var(--key-face); color: var(--key-ink);
    box-shadow: 0 2px 0 0 var(--key-skirt); margin-bottom: 2px; font-weight: 600;
}
:root:not([data-skin=eletut]) .theme-toggle:active { transform: translateY(2px); box-shadow: none; }

/* ---------- Top bar */
:root:not([data-skin=eletut]) .topbar { height: 62px; }
:root:not([data-skin=eletut]) .topnav a { color: var(--iv-ink3); }
:root:not([data-skin=eletut]) .topnav a.active { color: var(--iv-ink); border-bottom-color: var(--iv-ink); }

/* ---------- Pagination, chips */
:root:not([data-skin=eletut]) .pagination { --bs-pagination-border-radius: 8px; }
:root:not([data-skin=eletut]) .chip { border-radius: 6px; }

/* ---------- Theme picker (Fiókom) */
.skin-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.skin-pick input { position: absolute; opacity: 0; pointer-events: none; }
.skin-pick label {
    display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--iv-line); border-radius: 12px;
    background: var(--iv-raised); cursor: pointer;
}
.skin-pick input:checked + label { border-color: var(--iv-ink); box-shadow: 0 0 0 1px var(--iv-ink); }
.skin-pick input:focus-visible + label { box-shadow: 0 0 0 3px var(--iv-ring); }
.skin-pick .swatch { display: flex; gap: 6px; align-items: center; height: 40px; border-radius: 8px; padding: 0 10px; }
.skin-pick .swatch i { width: 46px; height: 22px; border-radius: 6px; display: inline-block; }
.skin-pick .swatch i + i { width: 18px; }