/*
//=======================================================
// DATATRANS ÜGYVITEL MUNKA
// public/assets/css/app.css
// v2026.10.15
// ------------------------------------------------------
// (C) Datatrans Internet Kft.                       2026.
//=======================================================
// Feladat:
//   - Reszponzív Datatrans-megjelenés és fókuszjelölés.
// ------------------------------------------------------
// TODO:
//   - Az arculat és a böngészős megjelenés karbantartása.
//=======================================================
*/

:root {
    --dt-orange: #ef5809;
    --dt-ink: #273342;
    --bs-body-color: var(--dt-ink);
    --bs-body-bg: #f5f6f8;
    --bs-secondary-color: #586371;
}

body { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
.site-header { background: #fff; border-bottom: 4px solid var(--dt-orange); }
.brand { color: var(--dt-ink); display: inline-flex; flex-direction: column; }
.brand-name { color: #000; font-size: 1.65rem; font-weight: 800; letter-spacing: -.06em; line-height: 1.1; }
.brand-data { color: var(--dt-orange); }
.brand-dot { color: var(--dt-orange); }
.brand-caption { font-size: .65rem; letter-spacing: .3em; font-weight: 700; margin-top: .3rem; }
.welcome-card { background: #fff; border: 1px solid #dce1e7; border-radius: 1rem; box-shadow: 0 .5rem 2rem #27334208; }
.eyebrow { color: #a63b04; font-size: .7rem; font-weight: 750; letter-spacing: .12em; }
.welcome-aside { background: #fff3eb; border-top: 1px solid #f0d6c5; }
.status-notice { background: #f5f6f8; border-left: 3px solid var(--dt-orange); border-radius: .25rem; }
.day-states li { display: flex; align-items: center; gap: .75rem; padding: .6rem 0; }
.state-dot { width: .6rem; height: .6rem; border-radius: 50%; flex-shrink: 0; }
.state-work { background: #198754; }
.state-break { background: #087c92; }
.state-personal { background: #b56e00; }
.state-summary { display: flex; align-items: center; gap: .6rem; font-size: 1.2rem; }
.worktime-action { overflow-wrap: anywhere; }
.event-item + .event-item { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid #dce1e7; }
.event-times { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; margin-left: 1.1rem; overflow-wrap: anywhere; }
.event-duration { margin-left: .5rem; font-size: .9rem; }
.api-debug { min-width: 0; }
.api-debug-entry { max-height: 24rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
.site-footer { border-top: 1px solid #dce1e7; background: #fff; }
:focus-visible { outline: 3px solid #a63b04; outline-offset: 4px; }
.skip-link { position: absolute; top: .5rem; left: .5rem; padding: .75rem 1rem; background: #fff; color: var(--dt-ink); z-index: 10; transform: translateY(-200%); }
.skip-link:focus { transform: translateY(0); }

@media (min-width: 768px) {
    .welcome-aside { border-top: 0; border-left: 1px solid #f0d6c5; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}