/* Original Fahrtenbuch styles. Additions below the marked line replace the inline styles of the
   original markup (blocked by the Content Security Policy) and style the native <dialog>. */
:root{--bg:#f3f2ee;--card:#fff;--ink:#14231f;--mute:#667570;--line:#d9d8d0;--acc:#0f5c4d;--accfg:#fff;--warn:#b3402a;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
:root[data-theme="dark"]{--bg:#101a17;--card:#172420;--ink:#e8eee9;--mute:#8da39b;--line:#2a3b36;--acc:#5fd0b2;--accfg:#08201a;--warn:#ff8f77}
*{box-sizing:border-box}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.4 "Avenir Next","Segoe UI",system-ui,sans-serif}
main{max-width:520px;margin:0 auto;padding:20px 16px 48px}
h1{font:700 26px/1.1 Georgia,"Times New Roman",serif;margin:4px 0 2px}
.sub{color:var(--mute);margin:0 0 18px;font-size:14px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:16px}
h2{font-size:16px;margin:0 0 12px}
label{display:block;font-size:13px;color:var(--mute);margin:12px 0 4px}
input{width:100%;font:inherit;color:var(--ink);background:transparent;border:1px solid var(--line);border-radius:10px;padding:12px}
input:focus,button:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
.row{display:flex;gap:10px}.row>*{flex:1}
button{font:inherit;font-weight:600;border:0;border-radius:10px;padding:13px 16px;background:var(--acc);color:var(--accfg);width:100%;margin-top:16px;cursor:pointer}
button.ghost{background:transparent;color:var(--mute);border:1px solid var(--line);margin-top:8px}
button.x{width:auto;margin:0;padding:6px 10px;background:transparent;color:var(--mute);font-weight:400}
.live{margin-top:14px;padding:12px;border-radius:10px;border:1px dashed var(--line);color:var(--mute)}.live b{color:var(--ink)}
.err{color:var(--warn);font-size:13px;min-height:18px;margin-top:8px}
.month{font-weight:700;margin:20px 0 6px;display:flex;justify-content:space-between;font-size:15px}
.trip{display:flex;gap:10px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.trip .m{flex:1;min-width:0}.trip .n{color:var(--mute);font-size:13px;overflow-wrap:anywhere}.trip .r{text-align:right;font-variant-numeric:tabular-nums}
.empty{color:var(--mute);text-align:center;padding:12px 0}
.seg{display:flex;gap:8px}.seg label{flex:1;margin:0;position:relative}.seg input{position:absolute;opacity:0;width:0;height:0}
.seg span{display:block;text-align:center;padding:10px 2px;border:1px solid var(--line);border-radius:10px;color:var(--ink);cursor:pointer;font-size:14px}
.seg input:checked+span{background:var(--acc);color:var(--accfg);border-color:var(--acc);font-weight:600}.seg input:focus-visible+span{outline:2px solid var(--acc);outline-offset:1px}
.top{display:flex;justify-content:space-between;align-items:center;gap:12px}.menuwrap{position:relative}
.menubtn{width:auto;margin:0;padding:9px 14px;background:transparent;color:var(--ink);border:1px solid var(--line);font-size:14px}
.menu{position:absolute;right:0;top:calc(100% + 6px);min-width:190px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:6px;z-index:5;box-shadow:0 8px 24px rgba(0,0,0,.18)}
.menu[hidden]{display:none}.menu button{width:100%;margin:0;padding:12px;background:transparent;color:var(--ink);text-align:left;font-weight:500}.menu button.on{background:var(--acc);color:var(--accfg)}
.sub.fsum{margin:12px 0 0}
.nav{display:flex;align-items:center;gap:8px;margin-top:10px}.nav button{width:44px;margin:0;padding:8px;background:transparent;color:var(--ink);border:1px solid var(--line)}.nav span{flex:1;text-align:center;font-weight:600}
.dds{gap:10px}.ddw{position:relative;flex:1}.ddb{display:flex;justify-content:space-between;align-items:center;width:100%;margin:0;padding:12px;background:var(--card);color:var(--ink);border:1px solid var(--line);font-weight:600;font-size:15px}.ddm{left:0;right:0;min-width:0}
.acc{display:flex;justify-content:space-between;align-items:center;width:100%;margin:0;padding:2px 0;background:transparent;color:var(--ink);font-size:16px;font-weight:700;text-align:left}
.dlg{background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:14px;padding:20px;max-width:360px;width:100%}.dlg p{margin:0 0 4px}.dlg .row button{margin-top:16px}
.dlg #mNo{background:transparent;color:var(--ink);border:1px solid var(--line)}.dlg #mYes.danger{background:var(--warn);color:var(--accfg)}
.mo{display:flex!important;align-items:center;gap:10px;margin:10px 0 0!important;color:var(--ink)!important;font-size:15px!important}.mo input{width:20px;height:20px;padding:0;accent-color:var(--acc)}
.arch{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:8px 0;border-top:1px solid var(--line);font-size:14px}.arch small{color:var(--mute);display:block}
.achk{margin:0!important;padding-top:2px;display:block}.achk input{width:20px;height:20px;padding:0;accent-color:var(--acc)}
.lnk{width:auto;margin:0;padding:0;background:transparent;color:var(--ink);font-weight:700;text-decoration:underline;font-size:15px;text-align:left}
.pw{display:flex;gap:8px;align-items:center}.pw button{width:auto;margin:0}

/* ---- Additions ------------------------------------------------------------------------------ */
[hidden]{display:none!important}
.authwrap{max-width:420px;margin:8vh auto 0}
button.ghost.runbanner{margin:0 0 14px;color:var(--acc);border-color:var(--acc)}
button.ghost.back{margin:0 0 14px}
button.ghost.warn{color:var(--warn);border-color:var(--warn)}
.ddw.block{margin-bottom:10px;flex:none}
.nav.archnav{margin:0 0 10px}
.arch .grow{flex:1;min-width:0}
.arch .grow .lnk{max-width:100%;overflow-wrap:anywhere}
.sync{margin:-6px 0 14px}
/* Native modal dialog in place of the original overlay (keeps keyboard focus inside). */
dialog.dlg{width:calc(100% - 40px);max-width:360px;margin:auto;max-height:calc(100dvh - 40px);overflow:auto;overscroll-behavior:contain}
dialog.dlg::backdrop{background:rgba(0,0,0,.5)}
/* Forms inside the dialog: two reserved lines for the message, so the buttons never move. */
.dlg #mOpts label:first-child{margin-top:8px}
.dlg #mOpts .err{min-height:calc(2 * 1.4em);margin-top:6px}

/* ---- Stability: nothing moves when messages, scrollbars or loaded data appear --------------- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scrollbar-gutter:stable}
/* Page does not scroll behind an open dialog (the gutter keeps the width). */
html:has(dialog[open]){overflow:hidden}
/* Messages above a button have room for two lines, so a message never pushes the button down.
   The total gap matches the original single-line slot plus button margin. */
.err:has(+ button){min-height:calc(2 * 1.4em);margin-top:6px}
.err:has(+ button) + button{margin-top:4px}
.err.msg-in,.sub.msg-in{animation:msgin .2s ease-out}
/* Native pickers (date wheel, calendar) follow the app theme. */
:root{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}
/* All text-like inputs get one fixed line height, so a date field is exactly as tall as the rest. */
input{line-height:22px}
/* Date fields: same width as the other inputs (Safari otherwise gives them their own, wider size),
   no native icon (inconsistent, especially in the home-screen app), the app's own icon instead.
   The icon is a mask, so it takes the theme color. */
.date{position:relative;display:block}
.date input[type=date]{position:relative;-webkit-appearance:none;appearance:none;display:block;width:100%;min-width:0;max-width:100%;height:48px;padding-right:44px;text-align:left;cursor:pointer}
.date input[type=date]::-webkit-date-and-time-value{text-align:left;margin:0;min-height:22px}
.date input[type=date]::-webkit-inner-spin-button,.date input[type=date]::-webkit-clear-button{display:none}
/* The native indicator stays clickable but invisible and covers the whole field, so a click
   anywhere opens the picker on desktop browsers (phones open it on tap anyway). */
.date input[type=date]::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:auto;height:auto;margin:0;padding:0;opacity:0;cursor:pointer}
.date::after{content:"";position:absolute;right:13px;top:50%;width:20px;height:20px;margin-top:-10px;pointer-events:none;background-color:var(--mute);-webkit-mask:url(/assets/calendar.svg) center/contain no-repeat;mask:url(/assets/calendar.svg) center/contain no-repeat;transition:background-color .15s ease}
.date:focus-within::after{background-color:var(--acc)}
/* Firefox draws its own calendar button that cannot be hidden: keep that one only. */
@supports (-moz-appearance:none){.date::after{display:none}.date input[type=date]{padding-right:12px}}
/* The menu button has one width for every view name, so the header never changes size. */
.menubtn{flex:none;width:9.75em;max-width:42vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Period navigation keeps its row when "Alle" is selected; only the arrows disappear. */
.nav button.off{visibility:hidden}
/* Collapsible section ("Persönliche Daten") opens smoothly instead of jumping. */
.collapse{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease}
.collapse.open{grid-template-rows:1fr}
.collapse>div{min-height:0;overflow:hidden;padding:0 3px;margin:0 -3px}
.collapse.open>div{padding-bottom:3px}
.acc .arrow{display:inline-block;transition:transform .25s ease}
.acc[aria-expanded="true"] .arrow{transform:rotate(90deg)}
/* Rows that are removed collapse instead of disappearing. */
.leaving{overflow:hidden;transition:height .22s ease,opacity .18s ease,padding .22s ease,border-color .22s ease;opacity:0;padding-top:0!important;padding-bottom:0!important;border-top-color:transparent!important}

/* ---- Scrollbars: thin and in the theme colors ----------------------------------------------- */
html{scrollbar-width:thin;scrollbar-color:var(--line) var(--bg)}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--mute)}
dialog.dlg{scrollbar-color:var(--line) var(--card)}

/* ---- Touch feedback: instant pressed, busy and focus states ---------------------------------- */
button,.seg span,.achk input,input[type=checkbox],input[type=radio]{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button{position:relative;--spin:var(--accfg);transition:transform .12s ease,background-color .15s ease,color .15s ease,border-color .15s ease,opacity .15s ease,filter .15s ease}
button:active{transform:scale(.97)}
button:not(.ghost):not(.x):not(.lnk):not(.menubtn):not(.ddb):not(.acc):active{filter:brightness(.9)}
button.ghost,button.x,button.lnk,.menubtn,.ddb,.nav button,.menu button,.dlg #mNo{--spin:var(--ink)}
button.ghost:active,button.x:active,.menubtn:active,.ddb:active,.nav button:active,.dlg #mNo:active{background-color:var(--line)}
.menu button:not(.on):active{background-color:var(--line)}
button.x{border-radius:8px}
button.lnk:active,button.acc:active{transform:none;opacity:.6}
button:disabled{opacity:.55;cursor:default}
@media (hover:hover){
  button.ghost:hover,button.x:hover,.menubtn:hover,.ddb:hover,.nav button:hover,.dlg #mNo:hover{border-color:var(--mute)}
  .menu button:not(.on):hover{background-color:var(--bg)}
  button:not(.ghost):not(.x):not(.lnk):not(.menubtn):not(.ddb):not(.acc):hover{filter:brightness(1.06)}
}
/* Busy: the label fades out and a small spinner turns in its place; the button keeps its size. */
button.is-busy{color:transparent!important;pointer-events:none}
button.is-busy::after{content:"";position:absolute;inset:0;margin:auto;width:1.1em;height:1.1em;border:2px solid var(--spin);border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite,fadein .15s ease-out}
.seg span{transition:background-color .15s ease,color .15s ease,border-color .15s ease,transform .12s ease}
.seg label:active span{transform:scale(.97)}
input{transition:border-color .15s ease}

/* ---- Smooth appearance of views, cards, menus and the dialog --------------------------------- */
#views>div:not([hidden]),#authView>div{animation:viewin .18s ease-out}
#vE>.card:not([hidden]){animation:viewin .18s ease-out}
.menu:not([hidden]){animation:menuin .14s ease-out;transform-origin:top right}
.ddm:not([hidden]){transform-origin:top center}
dialog.dlg[open]{animation:dlgin .18s ease-out}
dialog.dlg[open]::backdrop{animation:fadein .18s ease-out}
body,.card,.menu,dialog.dlg{transition:background-color .25s ease,color .25s ease,border-color .25s ease}

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fadein{from{opacity:0}}
@keyframes viewin{from{opacity:0;transform:translateY(4px)}}
@keyframes menuin{from{opacity:0;transform:scale(.97) translateY(-4px)}}
@keyframes dlgin{from{opacity:0;transform:scale(.96)}}
@keyframes msgin{from{opacity:0;transform:translateY(-2px)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after,::backdrop{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important}
  button.is-busy::after{animation:none;border-right-color:var(--spin);opacity:.5}
}