/* StoneFlow UI V2 · Navigation, Ladeanzeige und vorhandene mobile Tabellen. */
:root { --sf-app-bg:var(--sf-app-background,var(--sf-bg)); --sf-app-line:var(--sf-app-border,var(--sf-border)); --sf-app-danger:var(--sf-danger); --sf-app-success:var(--sf-success); --sf-app-radius:var(--sf-radius); --sf-app-shadow:var(--sf-shadow); }
html[data-sf-ui="v2"] { scrollbar-gutter:stable; }
/* Reserve the authenticated app-shell geometry from the server-rendered body marker.
   Navigation contents still arrive from /api/navigation, but may no longer move the page. */
html[data-sf-ui="v2"] body.sf-ui-v2[data-sf-shell="app"] { padding:calc(var(--sf-v2-topbar) + 26px) 30px 42px calc(var(--sf-v2-sidebar) + 30px)!important; }
.sf-app-icon { width:20px; height:20px; flex:0 0 20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.sf-app-topbar { position:fixed; z-index:8700; top:0; left:var(--sf-v2-sidebar); right:0; height:var(--sf-v2-topbar); display:flex; justify-content:space-between; align-items:center; gap:18px; padding:12px 30px!important; margin:0!important; background:var(--sf-bg)!important; border:0!important; border-bottom:1px solid var(--sf-border)!important; border-radius:0!important; }
.sf-app-page-context { min-width:0; display:flex; align-items:center; gap:12px; color:var(--sf-muted); font-size:.875rem; }
.sf-app-page-context strong { color:var(--sf-text); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:52vw; }
.sf-app-page-context > span { white-space:nowrap; }
.sf-app-top-actions { display:flex; gap:9px; align-items:center; }
html[data-sf-ui="v2"] .sf-ui-v2 .sf-app-display-button { min-height:40px; border:1px solid var(--sf-border)!important; border-radius:10px; background:var(--sf-card-bg)!important; color:var(--sf-text)!important; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:9px 12px; font:600 .8125rem var(--sf-v2-font)!important; cursor:pointer; }
.sf-app-avatar { display:grid; place-items:center; width:36px; height:36px; border:1px solid #ccd5c4; border-radius:50%; background:#e7ede1; color:#4b5e41; font-size:.8125rem; font-weight:600; }
.sf-app-drawer { position:fixed; top:0; left:0; bottom:0; z-index:8900; width:var(--sf-v2-sidebar); padding:25px 16px 20px; display:flex; flex-direction:column; overflow-y:auto; background:var(--sf-app-soft); color:var(--sf-text); border-right:1px solid var(--sf-border); font-family:var(--sf-v2-font); transition:transform 220ms ease-out; }
.sf-app-brand { display:flex; align-items:center; gap:10px; padding:0 9px 24px; }
.sf-app-brand img { width:34px; height:34px; border-radius:10px; object-fit:contain; }
.sf-app-brand strong { display:block; font-size:1.02rem; letter-spacing:.02em; font-weight:700; }
.sf-app-brand small { display:block; font-size:.7rem; color:var(--sf-muted); margin-top:1px; }
.sf-app-nav-search { margin:0 2px 16px; }
.sf-app-nav-search label { display:block; margin:0 0 6px; font-size:.7rem!important; font-weight:600; color:var(--sf-muted); }
html[data-sf-ui="v2"] .sf-ui-v2 .sf-app-nav-search input { min-height:40px; padding:9px 10px; font-size:.8125rem!important; background:color-mix(in srgb,var(--sf-card-bg) 70%,transparent)!important; border-color:var(--sf-border)!important; }
.sf-app-nav-section { color:var(--sf-muted); padding:12px 11px 6px; text-transform:uppercase; letter-spacing:.1em; font-size:.65rem; font-weight:700; }
.sf-app-nav-list { display:block; }
html[data-sf-ui="v2"] .sf-ui-v2 .sf-app-nav-link { display:flex; align-items:center; gap:11px; min-height:44px; padding:10px 12px; margin:3px 0; border:1px solid transparent; border-radius:10px; color:var(--sf-muted)!important; text-decoration:none!important; font-size:.85rem; font-weight:550; line-height:1.4; background:transparent; transition:background 180ms,border-color 180ms; }
html[data-sf-ui="v2"] .sf-ui-v2 .sf-app-nav-link > .sf-app-nav-label { min-width:0; overflow-wrap:anywhere; }
html[data-sf-ui="v2"] .sf-ui-v2 .sf-app-nav-link:hover { background:color-mix(in srgb,var(--sf-card-bg) 65%,transparent); color:var(--sf-text)!important; }
html[data-sf-ui="v2"] .sf-ui-v2 .sf-app-nav-link.active { background:var(--sf-card-bg); border-color:var(--sf-border); color:var(--sf-primary)!important; font-weight:650; box-shadow:0 2px 5px #252c2706; }
.sf-app-nav-count { margin-left:auto; flex:0 0 auto; border-radius:6px; padding:2px 6px; background:var(--sf-bg-soft); color:var(--sf-muted); font-size:.7rem; min-width:20px; text-align:center; }
.sf-app-nav-link.active .sf-app-nav-count { background:var(--sf-success-bg); color:var(--sf-success); }
.sf-app-nav-empty { font-size:.8rem; color:var(--sf-muted); padding:12px; }
.sf-app-drawer-footer { margin-top:auto; padding-top:22px; }
.sf-app-drawer-footer::before { content:""; display:block; height:1px; background:var(--sf-border); margin:10px 5px 12px; }
html[data-sf-ui="v2"] .sf-ui-v2 .sf-app-mini-btn { background:transparent!important; color:var(--sf-muted)!important; border:1px solid var(--sf-border)!important; border-radius:9px; font:400 .75rem/1.5 var(--sf-v2-font); padding:10px 11px; margin-bottom:9px; cursor:pointer; width:100%; text-align:left; }
.sf-app-drawer-close { display:none!important; }
.sf-app-hamburger { display:none!important; }
.sf-app-drawer-backdrop { display:none; position:fixed; inset:0; z-index:8890; background:#20272066; }
.sf-app-bottom { display:none; }
/* This only signals pending navigation. It never claims storage/upload success. */
.sf-app-loading { position:fixed; inset:0; z-index:12000; display:none; align-items:center; justify-content:center; padding:20px; background:#20272066; }
.sf-app-loading.open { display:flex; }
.sf-app-loading-card { width:min(390px,100%); padding:28px; background:var(--sf-card-bg); color:var(--sf-text); border:1px solid var(--sf-border); border-radius:20px; box-shadow:0 20px 70px #252c2730; text-align:center; }
.sf-app-loading-spinner { width:34px; height:34px; margin:0 auto 17px; border-radius:50%; border:3px solid var(--sf-bg-soft); border-top-color:var(--sf-primary); animation:sf-app-spin .9s linear infinite; }
.sf-app-loading-title { font-weight:650; font-size:1rem; }
.sf-app-loading-text { font-size:.875rem; color:var(--sf-muted); margin-top:8px; }
@keyframes sf-app-spin { to { transform:rotate(360deg); } }
.sf-app-nav-error { font-size:.875rem; padding:14px 16px; margin:0 auto 18px; max-width:var(--sf-v2-content); border:1px solid var(--sf-badge-progress-border); background:var(--sf-badge-progress-bg); color:var(--sf-badge-progress-text); border-radius:12px; }
/* Shared display dialog. Does not replace business confirmation dialogs. */
.sf-v2-display-dialog { width:min(510px,calc(100vw - 28px)); padding:26px; border-radius:20px; max-height:calc(100dvh - 40px); }
.sf-v2-display-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }
.sf-v2-display-dialog p { color:var(--sf-muted); font-size:.875rem; line-height:1.6; }
.sf-v2-display-dialog fieldset { margin:22px 0; padding:0; border:0; }
.sf-v2-display-dialog legend { font-weight:600; font-size:.875rem; margin-bottom:12px; }
.sf-v2-display-option { display:flex!important; align-items:center; gap:9px; padding:12px; border:1px solid var(--sf-border); border-radius:10px; margin-top:8px; cursor:pointer; }
.sf-v2-display-option:has(input:checked) { border-color:var(--sf-primary); background:var(--sf-success-bg); }
.sf-v2-display-foot { display:flex; justify-content:flex-end; margin-top:22px; }
/* Existing autocomplete and token API classes, kept compatible. */
.sf-search-wrap { position:relative; }
.sf-suggestions { position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:60; background:var(--sf-card-bg); border:1px solid var(--sf-border); border-radius:12px; box-shadow:0 14px 35px #252c2720; max-height:260px; overflow:auto; display:none; }
.sf-suggestions.open { display:block; }
.sf-suggestion { display:block; width:100%; border:0; border-bottom:1px solid var(--sf-border); background:transparent; text-align:left; padding:12px; color:var(--sf-text); cursor:pointer; }
.sf-suggestion:last-child { border-bottom:0; }
.sf-suggestion:hover { background:var(--sf-bg-soft); }
.sf-suggestion strong,.sf-suggestion small { display:block; }
.sf-suggestion small { color:var(--sf-muted); margin-top:2px; }
.sf-token-row { display:flex; gap:7px; flex-wrap:wrap; margin-top:8px; }
.sf-chip { display:inline-flex; align-items:center; gap:7px; padding:7px 10px; border-radius:9px; border:1px solid var(--sf-border); background:var(--sf-bg-soft); font-size:.8125rem; }
.sf-chip button { border:0; background:transparent; color:var(--sf-muted); cursor:pointer; padding:1px 3px; }
@media(max-width:1100px) {
 html[data-sf-ui="v2"] body.sf-ui-v2[data-sf-shell="app"] { padding:calc(var(--sf-v2-topbar) + 20px) 22px 32px!important; }
 .sf-app-topbar { left:0; padding:12px 22px 12px 72px!important; }
 .sf-app-hamburger { position:fixed; top:15px; left:16px; z-index:8800; display:flex!important; flex-direction:column; justify-content:center; align-items:center; gap:4px; width:42px; height:42px; padding:10px; border:1px solid var(--sf-border); border-radius:10px; background:var(--sf-card-bg)!important; color:var(--sf-text)!important; cursor:pointer; }
 .sf-menu-line { width:18px; height:2px; background:currentColor; border-radius:1px; display:block; }
 .sf-app-drawer { width:min(310px,88vw); transform:translateX(-101%); }
 .sf-app-drawer.open { transform:translateX(0); box-shadow:18px 0 50px #252c2730; }
 .sf-app-drawer-backdrop.open { display:block; }
 html[data-sf-ui="v2"] .sf-ui-v2 .sf-app-drawer-close { display:flex!important; align-items:center; justify-content:center; position:absolute; top:19px; right:12px; width:auto; min-width:84px; min-height:44px; padding:8px 12px; border:1px solid var(--sf-border); border-radius:9px; background:var(--sf-card-bg)!important; color:var(--sf-text)!important; }
 .sf-app-brand { padding-right:96px; }
 .sf-app-drawer-footer { margin-top:20px; }
 .sf-v2-skip { left:16px; }
 body.sf-v2-nav-open { overflow:hidden; }
}
@media(max-width:760px) {
 html[data-sf-ui="v2"] body.sf-ui-v2[data-sf-shell="app"] { padding:calc(var(--sf-v2-topbar) + 14px) 14px calc(90px + env(safe-area-inset-bottom))!important; }
 .sf-app-topbar { padding-right:14px!important; gap:8px; }
 .sf-app-page-context>span { display:none; }
 .sf-app-page-context strong { font-size:.875rem; max-width:43vw; }
 .sf-app-top-actions { gap:6px; }
 .sf-app-display-button .sf-app-display-label { display:none; }
 .sf-app-avatar { width:31px; height:31px; }
 html[data-sf-ui="v2"] .sf-ui-v2 .sf-app-display-button { min-width:40px; padding:8px; }
 .sf-app-bottom { position:fixed; z-index:8750; left:10px; right:10px; bottom:calc(9px + env(safe-area-inset-bottom)); height:62px; display:flex; align-items:stretch; padding:5px; border:1px solid var(--sf-border); border-radius:16px; background:var(--sf-card-bg); box-shadow:0 7px 25px #252c2714; }
 html[data-sf-ui="v2"] .sf-ui-v2 .sf-app-bottom :is(a,button) { position:relative; flex:1 1 0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-width:0; padding:5px; border:0; border-radius:11px; background:transparent!important; color:var(--sf-muted)!important; font:500 .65rem/1.2 var(--sf-v2-font); text-decoration:none!important; cursor:pointer; }
 html[data-sf-ui="v2"] .sf-ui-v2 .sf-app-bottom .active { color:var(--sf-primary)!important; background:var(--sf-bg-soft)!important; font-weight:650; }
 .sf-app-bottom .sf-app-icon { width:18px; height:18px; flex-basis:18px; }
 .sf-app-bottom .nav-badge { position:absolute; top:0; right:calc(50% - 24px); min-width:16px; height:16px; padding:0 4px; border-radius:10px; background:var(--sf-danger); color:#fff; font:600 10px/16px var(--sf-v2-font); }
 .sf-v2-display-dialog { padding:22px; }
}
@media print {
 .sf-app-topbar,.sf-app-drawer,.sf-app-hamburger,.sf-app-bottom,.sf-app-drawer-backdrop,.sf-app-loading,.sf-app-nav-error { display:none!important; }
 html[data-sf-ui="v2"] body.sf-ui-v2[data-sf-shell="app"] { padding:0!important; }
}

/* Smart Responsive Tables
   Desktop: normale Tabelle. Smartphone: jede Tabellenzeile wird zu einer Karte.
   Aktivierung pro Tabelle mit .sf-responsive-table und .sf-responsive-table-wrap. */
.sf-responsive-table-wrap{max-width:100%}

@media(max-width:760px), (max-device-width:760px){
  .sf-responsive-table-wrap{
    overflow:visible!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
  }
  table.sf-responsive-table{
    display:block;
    width:100%!important;
    min-width:0!important;
    background:transparent!important;
    border:0!important;
  }
  .sf-responsive-table thead{
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    padding:0!important;
    margin:-1px!important;
    overflow:hidden!important;
    clip:rect(0,0,0,0)!important;
    white-space:nowrap!important;
    border:0!important;
  }
  .sf-responsive-table tbody{
    display:block;
    width:100%;
  }
  .sf-responsive-table tbody tr{
    display:block;
    width:100%;
    margin:0 0 12px;
    overflow:hidden;
    background:var(--sf-app-card,#fff);
    border:1px solid var(--sf-app-line,#e5e7eb);
    border-left:4px solid var(--sf-app-accent,#D96F32);
    border-radius:15px;
    box-shadow:0 5px 16px rgba(31,41,55,.06);
  }
  .sf-responsive-table tbody tr:last-child{margin-bottom:0}
  .sf-responsive-table tbody td{
    display:block;
    width:100%!important;
    min-width:0!important;
    padding:10px 12px!important;
    border:0!important;
    border-bottom:1px solid var(--sf-app-line,#ececec)!important;
    background:transparent!important;
    text-align:left!important;
    overflow-wrap:anywhere;
  }
  .sf-responsive-table tbody td:last-child{border-bottom:0!important}
  .sf-responsive-table tbody td[data-label]::before{
    content:attr(data-label);
    display:block;
    margin:0 0 5px;
    color:var(--sf-app-muted,#6b7280);
    font-size:12px;
    line-height:1.2;
    font-weight:600;
    letter-spacing:.07em;
    text-transform:uppercase;
  }
  .sf-responsive-table tbody td[colspan]{
    padding:14px!important;
  }
  .sf-responsive-table tbody td[colspan]::before{display:none!important}
  .sf-responsive-table .actions,
  .sf-responsive-table .row-actions{
    width:100%;
  }
  .sf-responsive-table .actions{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:7px!important;
  }
  .sf-responsive-table .actions .btn,
  .sf-responsive-table .actions .sf-btn{
    width:100%;
    justify-content:center;
    text-align:center;
  }
  .sf-responsive-table tbody tr.tr-ok{border-left-color:var(--sf-success)}
  .sf-responsive-table tbody tr.tr-soon{border-left-color:var(--sf-warning)}
  .sf-responsive-table tbody tr.tr-overdue{border-left-color:var(--sf-danger)}
}


/* iOS/Safari Fallback:
   Wenn Safari die Webapp als Desktop-Seite mit breitem Layout-Viewport behandelt,
   setzt stoneflow_app.js auf echten Smartphones html.sf-phone-device. */
html.sf-phone-device .sf-responsive-table-wrap{
  overflow:visible!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
}
html.sf-phone-device table.sf-responsive-table{
  display:block;
  width:100%!important;
  min-width:0!important;
  background:transparent!important;
  border:0!important;
}
html.sf-phone-device .sf-responsive-table thead{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}
html.sf-phone-device .sf-responsive-table tbody{display:block;width:100%}
html.sf-phone-device .sf-responsive-table tbody tr{
  display:block;
  width:100%;
  margin:0 0 12px;
  overflow:hidden;
  background:var(--sf-app-card,#fff);
  border:1px solid var(--sf-app-line,#e5e7eb);
  border-left:4px solid var(--sf-app-accent,#D96F32);
  border-radius:15px;
  box-shadow:0 5px 16px rgba(31,41,55,.06);
}
html.sf-phone-device .sf-responsive-table tbody tr:last-child{margin-bottom:0}
html.sf-phone-device .sf-responsive-table tbody td{
  display:block;
  width:100%!important;
  min-width:0!important;
  padding:10px 12px!important;
  border:0!important;
  border-bottom:1px solid var(--sf-app-line,#ececec)!important;
  background:transparent!important;
  text-align:left!important;
  overflow-wrap:anywhere;
}
html.sf-phone-device .sf-responsive-table tbody td:last-child{border-bottom:0!important}
html.sf-phone-device .sf-responsive-table tbody td[data-label]::before{
  content:attr(data-label);
  display:block;
  margin:0 0 5px;
  color:var(--sf-app-muted,#6b7280);
  font-size:12px;
  line-height:1.2;
  font-weight:600;
  letter-spacing:.07em;
  text-transform:uppercase;
}
html.sf-phone-device .sf-responsive-table tbody td[colspan]{padding:14px!important}
html.sf-phone-device .sf-responsive-table tbody td[colspan]::before{display:none!important}
html.sf-phone-device .sf-responsive-table .actions,
html.sf-phone-device .sf-responsive-table .row-actions{width:100%}
html.sf-phone-device .sf-responsive-table .actions{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:7px!important;
}
html.sf-phone-device .sf-responsive-table .actions .btn,
html.sf-phone-device .sf-responsive-table .actions .sf-btn{
  width:100%;
  justify-content:center;
  text-align:center;
}
html.sf-phone-device .sf-responsive-table tbody tr.tr-ok{border-left-color:var(--sf-success)}
html.sf-phone-device .sf-responsive-table tbody tr.tr-soon{border-left-color:var(--sf-warning)}
html.sf-phone-device .sf-responsive-table tbody tr.tr-overdue{border-left-color:var(--sf-danger)}

/* V2.2: quiet sidebar + global search, matching the approved prototype. */
.sf-app-brand{padding:4px 10px 36px;gap:12px;}.sf-app-brand img{width:35px;height:44px;border-radius:5px;object-fit:contain;mix-blend-mode:multiply;}.sf-app-brand strong{font-size:1.4rem;letter-spacing:-.035em;font-weight:650;}.sf-app-brand small{font-size:.64rem;letter-spacing:.16em;margin-top:3px;}
.sf-app-nav-section{padding:0 12px 12px;font-size:.68rem;letter-spacing:.1em;}
html[data-sf-ui="v2"] .sf-ui-v2 .sf-app-nav-link{font-size:.92rem;min-height:47px;}
html[data-sf-ui="v2"] .sf-ui-v2 .sf-app-nav-link.active{border-color:transparent;box-shadow:0 1px 3px #373f3507;}
.sf-app-profile{display:flex;align-items:center;gap:10px;padding:20px 10px 0;margin-top:14px;border-top:1px solid var(--sf-border);}.sf-app-profile strong{font-size:.87rem;font-weight:600;}.sf-app-profile small{display:block;font-size:.74rem;color:var(--sf-muted);}
.sf-app-secondary-options>summary{cursor:pointer;color:var(--sf-muted);font-size:.8rem;padding:10px;min-height:40px;}.sf-app-secondary-options[open]>summary{margin-bottom:10px;}
.sf-app-preview-label{font-size:.75rem;white-space:nowrap;padding:6px 10px;background:#edeade;border:1px solid #ded8c4;border-radius:7px;color:#6b623d;}
@media(min-width:1101px){.sf-app-topbar{padding:15px 36px!important;}html[data-sf-ui="v2"] body.sf-ui-v2[data-sf-shell="app"]{padding:calc(var(--sf-v2-topbar) + 32px) 36px 40px calc(var(--sf-v2-sidebar) + 36px)!important;}}
@media(max-width:600px){.sf-app-top-actions>.sf-app-avatar,.sf-app-preview-label{display:none;}.sf-app-topbar{gap:10px;height:72px;}html[data-sf-ui="v2"] body.sf-ui-v2[data-sf-shell="app"]{padding-top:94px!important;}.sf-app-hamburger{top:14px;}.sf-app-bottom{left:0;right:0;bottom:0;border-radius:0;border-width:1px 0 0;height:calc(66px + env(safe-area-inset-bottom));padding-bottom:calc(5px + env(safe-area-inset-bottom));box-shadow:none;}.sf-app-profile{padding-bottom:12px;}}