/* =========================================================================
   Loop A.I.S — Dashboard-Design
   Modernes, ruhiges Admin-Layout mit weicher Tiefe, klarer Typografie und
   automatischem Dark Mode. Marke: Feuerrot.
   ========================================================================= */
:root{
  /* Marke */
  --fire:#e11d2a; --fire-strong:#b91420; --fire-tint:#fdecec;
  --fire-dark:#b91420; /* Kompatibilitäts-Alias (frühere Variable) */
  /* Flächen */
  --bg:#f5f6f8; --surface:#ffffff; --surface-2:#f8f9fb;
  --ink:#12151a; --ink-2:#3a4049; --muted:#6b7280;
  --line:#e7e9ee; --line-strong:#d6dae1;
  /* Status */
  --ok-bg:#e7f6ec; --ok-ink:#127a37;
  --warn-bg:#fff3e0; --warn-ink:#a85b00;
  --err-bg:#fdecec; --err-ink:#b3261e;
  /* Radien & Schatten */
  --r-sm:10px; --r-md:14px; --r-lg:18px;
  --shadow-1:0 1px 2px rgba(16,20,28,.05), 0 1px 3px rgba(16,20,28,.04);
  --shadow-2:0 2px 6px rgba(16,20,28,.06), 0 12px 28px -12px rgba(16,20,28,.18);
  --ring:0 0 0 3px rgba(225,29,42,.18);
  --sidebar-w:248px; --topbar-h:60px;
}
@media (prefers-color-scheme:dark){
  :root{
    --fire:#ff5a63; --fire-strong:#ff7a82; --fire-tint:#39191c; --fire-dark:#ff7a82;
    --bg:#0e1116; --surface:#161a21; --surface-2:#1c212a;
    --ink:#eef1f6; --ink-2:#c4cbd6; --muted:#8b93a1;
    --line:#252b35; --line-strong:#333b47;
    --ok-bg:#12301d; --ok-ink:#5fd08a;
    --warn-bg:#3a2a12; --warn-ink:#f0b464;
    --err-bg:#3a1a1c; --err-ink:#ff8a90;
    --shadow-1:0 1px 2px rgba(0,0,0,.4);
    --shadow-2:0 2px 8px rgba(0,0,0,.45), 0 18px 40px -16px rgba(0,0,0,.6);
    --ring:0 0 0 3px rgba(255,90,99,.28);
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--ink); background:var(--bg);
  letter-spacing:-.006em; -webkit-font-smoothing:antialiased;
}
a{color:var(--fire); text-decoration:none}
a:hover{text-decoration:underline}
h1{font-size:1.6rem; font-weight:750; letter-spacing:-.02em; margin:.2rem 0 .1rem}
h2{font-size:1.2rem; font-weight:700; letter-spacing:-.01em}
.muted{color:var(--muted)}
.small{font-size:.75rem}
.muted.small{text-align:center}

/* Marken-Logo */
.brand-logo{height:1.5em; width:1.5em; object-fit:cover; vertical-align:middle; border-radius:8px; margin-right:.45rem; box-shadow:var(--shadow-1)}
.login-card h1 .brand-logo{height:2.6rem; width:2.6rem; border-radius:12px; margin-right:.5rem}

/* -------------------------------------------------------------- Login -- */
.login-page{display:grid; place-items:center; min-height:100vh;
  background:radial-gradient(1200px 600px at 30% -10%, #e11d2a 0%, transparent 60%), linear-gradient(135deg,#8e0000,#c62828)}
.login-card{background:var(--surface); padding:2rem; border-radius:var(--r-lg); width:340px;
  box-shadow:0 24px 70px -20px rgba(0,0,0,.55); display:flex; flex-direction:column; gap:.85rem}
.login-card h1{margin:0; text-align:center}
.login-card>.muted{text-align:center}
.login-card label{display:flex; flex-direction:column; font-size:.85rem; gap:.3rem; color:var(--ink-2)}
.login-card input{padding:.65rem .7rem; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface-2); color:var(--ink)}
.login-card input:focus{outline:none; border-color:var(--fire); box-shadow:var(--ring)}
.login-remember{flex-direction:row; align-items:center; gap:.5rem; cursor:pointer; user-select:none}
.login-remember input{width:auto; padding:0; border:0; background:none; box-shadow:none; accent-color:var(--fire)}
.login-card button{padding:.75rem; background:var(--fire); color:#fff; border:0; border-radius:var(--r-sm); font-size:1rem; font-weight:650; cursor:pointer; transition:.15s}
.login-card button:hover{background:var(--fire-strong)}

.alert{background:var(--err-bg); color:var(--err-ink); padding:.55rem .8rem; border-radius:var(--r-sm); font-size:.85rem}

/* ------------------------------------------------------------- Topbar -- */
.topbar{position:sticky; top:0; z-index:20; height:var(--topbar-h);
  display:flex; align-items:center; gap:1rem; padding:0 1.25rem;
  background:color-mix(in srgb, var(--surface) 80%, transparent);
  backdrop-filter:saturate(1.6) blur(12px); -webkit-backdrop-filter:saturate(1.6) blur(12px);
  border-bottom:1px solid var(--line)}
.topbar .brand{display:flex; align-items:center; font-weight:750; letter-spacing:-.01em; font-size:1.02rem; color:var(--ink)}
.topbar .spacer{flex:1}
.topbar .user{display:flex; align-items:center; gap:.7rem; font-size:.9rem; color:var(--ink-2)}
.topbar .role{background:var(--fire-tint); color:var(--fire-strong); padding:.18rem .55rem; border-radius:999px; font-size:.72rem; font-weight:650}
.btn-link{color:var(--ink-2); font-weight:600; font-size:.85rem; padding:.4rem .7rem; border-radius:var(--r-sm);
  border:1px solid var(--line); background:var(--surface); transition:.16s}
.btn-link:hover{border-color:var(--line-strong); color:var(--ink); box-shadow:var(--shadow-1); text-decoration:none}

.license-warning{background:var(--warn-bg); color:var(--warn-ink); font-size:.85rem;
  padding:.5rem 1.25rem; text-align:center}

/* ------------------------------------------------- Shell / Sidebar -- */
.shell{display:grid; grid-template-columns:var(--sidebar-w) 1fr; min-height:calc(100vh - var(--topbar-h))}
.sidebar{background:var(--surface); border-right:1px solid var(--line); padding:1rem .75rem; overflow-y:auto;
  position:sticky; top:var(--topbar-h); max-height:calc(100vh - var(--topbar-h))}
.sidebar ul{list-style:none; margin:.1rem 0 .9rem; padding:0; display:flex; flex-direction:column; gap:2px}
.sidebar a{display:flex; align-items:center; gap:.5rem; padding:.5rem .7rem; border-radius:var(--r-sm);
  color:var(--ink-2); text-decoration:none; font-size:.92rem; font-weight:550; transition:background .14s, color .14s}
.sidebar a:hover{background:var(--surface-2); color:var(--ink); text-decoration:none}
.sidebar a.active{background:var(--fire-tint); color:var(--fire-strong); font-weight:680}
.sidebar li.nav-sub a{padding-left:1.6rem; font-size:.92em; color:var(--muted)}
.sidebar li.nav-sub a::before{content:"\21B3"; opacity:.65; margin-right:-.15rem}
.sidebar li.nav-sub a.active{color:var(--fire-strong)}
.nav-group{padding:.7rem .8rem .3rem; font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:700}
.nav-section{margin:0}
.nav-section>summary.nav-group{cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  list-style:none; -webkit-user-select:none; user-select:none; border-radius:var(--r-sm)}
.nav-section>summary.nav-group::-webkit-details-marker{display:none}
.nav-section>summary.nav-group::after{content:""; width:.42em; height:.42em;
  border-right:2px solid var(--muted); border-bottom:2px solid var(--muted);
  transform:rotate(-45deg); transition:transform .18s; flex:none; margin-left:.5rem}
.nav-section[open]>summary.nav-group::after{transform:rotate(45deg)}
.nav-section>summary.nav-group:hover{color:var(--ink-2)}
.btn-link-dark{display:inline-block; padding:.5rem .8rem; border:1px solid var(--line); border-radius:var(--r-sm);
  text-decoration:none; color:var(--ink); background:var(--surface); transition:.15s}
.btn-link-dark:hover{border-color:var(--line-strong); box-shadow:var(--shadow-1); text-decoration:none}

/* ------------------------------------------------------------ Content -- */
.content{padding:2rem 2.25rem; min-width:0}
.page-lead{display:flex; align-items:center; gap:.5rem; color:var(--muted); margin:.2rem 0 1.6rem}
.page-lead .brand-logo{height:22px; width:22px}

/* ------------------------------------------------------ Karten / Tiles -- */
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:1.1rem}
.dash-group{margin:1.7rem 0 .7rem; font-size:.82rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-2); font-weight:700}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:1.1rem; box-shadow:var(--shadow-1)}
.card.tile{position:relative; display:flex; flex-direction:column; gap:.15rem; padding:1.15rem 1.2rem 1.25rem;
  text-decoration:none; color:var(--ink); overflow:hidden;
  transition:transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s, border-color .18s}
.card.tile::before{content:""; position:absolute; inset:0 auto 0 0; width:3px;
  background:linear-gradient(var(--fire),var(--fire-strong)); opacity:0; transition:opacity .18s}
.card.tile:hover{transform:translateY(-3px); box-shadow:var(--shadow-2); border-color:transparent; text-decoration:none}
.card.tile:hover::before{opacity:1}
.tile-icon{width:44px; height:44px; display:grid; place-items:center; font-size:1.35rem; border-radius:12px; margin-bottom:.7rem;
  background:var(--fire-tint); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fire) 15%,transparent)}
.card.tile h3{margin:0; font-size:1.02rem; font-weight:680; letter-spacing:-.01em; display:flex; align-items:center; justify-content:space-between}
.card.tile h3 .arrow{color:var(--muted); font-weight:400; transition:transform .18s, color .18s}
.card.tile:hover h3 .arrow{transform:translateX(3px); color:var(--fire)}
.card.tile p{margin:.3rem 0 0; font-size:.88rem; line-height:1.45; color:var(--muted)}

/* -------------------------------------------------------- Seitenkopf -- */
.page-head{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; margin-bottom:1rem}
.actions{display:flex; gap:.6rem; align-items:center}
.inline{display:inline-flex; gap:.4rem; align-items:center}

/* ---------------------------------------------------------- Buttons -- */
button{cursor:pointer; padding:.5rem .85rem; border:1px solid var(--line); background:var(--surface); color:var(--ink);
  border-radius:var(--r-sm); font:inherit; font-weight:600; transition:.15s}
button:hover{border-color:var(--line-strong); box-shadow:var(--shadow-1)}
button:focus-visible{outline:none; box-shadow:var(--ring)}
button.primary,.login-card button{background:var(--fire); color:#fff; border:0}
button.primary:hover{background:var(--fire-strong); box-shadow:var(--shadow-2)}

/* ----------------------------------------------------------- Suche -- */
.search{width:100%; max-width:360px; padding:.6rem .8rem; margin:1rem 0; border:1px solid var(--line);
  border-radius:var(--r-sm); background:var(--surface); color:var(--ink); font:inherit}
.search:focus{outline:none; border-color:var(--fire); box-shadow:var(--ring)}

/* --------------------------------------------------------- Tabellen -- */
table.data{width:100%; border-collapse:separate; border-spacing:0; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; box-shadow:var(--shadow-1)}
table.data th,table.data td{text-align:left; padding:.7rem .8rem; border-bottom:1px solid var(--line); font-size:.9rem}
table.data th{background:var(--surface-2); font-weight:650; color:var(--ink-2); font-size:.78rem; text-transform:uppercase; letter-spacing:.04em}
table.data tbody tr{transition:background .12s}
table.data tbody tr:hover{background:var(--surface-2)}
table.data tbody tr:last-child td{border-bottom:0}
table.data tbody tr.row-highlight{background:var(--warn-bg)}

/* -------------------------------------------- Deep-Link Treffer/Match -- */
.eipla-link{color:inherit; text-decoration:underline; text-decoration-style:dotted; cursor:pointer}
.eipla-link:hover{text-decoration-style:solid}
.deeplink-hint{margin:0 0 .8rem}

/* ----------------------------------------------------------- Badges -- */
.badge{font-size:.72rem; padding:.15rem .55rem; border-radius:999px; font-weight:650; display:inline-flex; align-items:center; gap:.3rem}
.badge.synced{background:var(--ok-bg); color:var(--ok-ink)}
.badge.pending{background:var(--warn-bg); color:var(--warn-ink)}
.badge.error{background:var(--err-bg); color:var(--err-ink)}

/* ----------------------------------------------------------- Dialog -- */
dialog{border:0; border-radius:var(--r-lg); padding:0; width:min(720px,92vw); background:var(--surface); color:var(--ink); box-shadow:0 30px 90px -24px rgba(0,0,0,.6)}
dialog::backdrop{background:rgba(8,10,14,.5); backdrop-filter:blur(2px)}
#member-form{padding:1.3rem}
.grid{display:grid; grid-template-columns:1fr 1fr; gap:.8rem; margin:1rem 0}
.grid label{display:flex; flex-direction:column; font-size:.8rem; gap:.3rem; color:var(--ink-2)}
.grid label.full,.grid .full{grid-column:1 / -1}
.grid input,.grid select,.grid textarea{padding:.5rem .6rem; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface-2); color:var(--ink); font:inherit}
.grid input:focus,.grid select:focus,.grid textarea:focus{outline:none; border-color:var(--fire); box-shadow:var(--ring)}
.group-list-label{font-size:.8rem; color:var(--ink-2); margin-bottom:.3rem}
.group-list-rows{display:flex; flex-direction:column; gap:.4rem}
.group-list-row{display:grid; grid-template-columns:1fr 1fr auto; gap:.4rem; align-items:center}
.group-list-add{margin-top:.5rem}
menu{display:flex; justify-content:flex-end; gap:.6rem; padding:0; margin:0}

/* --------------------------------------- Empfänger-Vorschau-Dialog -- */
/* s. public/assets/js/report-recipients-dialog.js – Bestätigungs-Dialog vor dem Versenden
   eines Einsatzrapports/Journals/einer Materialbestellung, zeigt die konkrete Empfängerliste
   statt eines generischen confirm(). */
dialog.rr-dialog{width:min(480px,92vw)}
.rr-form{padding:1.25rem; display:grid; gap:.75rem}
.rr-title{margin:0; font-size:1.1rem}
.rr-msg{margin:0; color:var(--ink-2); font-size:.92rem}
.rr-body{max-height:320px; overflow:auto}
.rr-loading{margin:.5rem 0; font-size:.9rem; color:var(--muted)}
.rr-error{margin:.5rem 0; font-size:.9rem; color:var(--err-ink); background:var(--err-bg); padding:.6rem .8rem; border-radius:var(--r-sm)}
.rr-list{list-style:none; margin:0; padding:0; border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden}
.rr-list li{padding:.5rem .7rem; border-bottom:1px solid var(--line); display:flex; flex-wrap:wrap; gap:.4rem; align-items:baseline; font-size:.9rem}
.rr-list li:last-child{border-bottom:0}
.rr-list li:nth-child(even){background:var(--surface-2)}
.rr-name{font-weight:600}
.rr-role{font-size:.78rem; padding:.05rem .5rem; border-radius:999px; border:1px solid var(--line); color:var(--ink-2)}
.rr-contact{font-size:.82rem; color:var(--muted)}
.rr-actions{display:flex; justify-content:flex-end; gap:.6rem; margin-top:.3rem}
.rr-ok:disabled{opacity:.55; cursor:default}

/* ------------------------------------------------------------ Toast -- */
.toast{position:fixed; bottom:1.1rem; right:1.1rem; background:var(--ink); color:var(--surface); padding:.75rem 1.1rem;
  border-radius:var(--r-md); font-size:.9rem; box-shadow:var(--shadow-2)}
.toast.error{background:var(--fire-strong); color:#fff}

/* ---------------------------------------------------- Zeilen-Aktionen -- */
.row-actions button{padding:.3rem .55rem; font-size:.8rem}

/* ------------------------------------------------------- App-Status -- */
.app-cell{white-space:nowrap}
.app-yes{display:inline-flex; align-items:center; gap:.35rem; color:var(--ink-2)}
.app-yes .app-ico{width:17px; height:17px; line-height:1}
svg.app-ico{display:inline-block; vertical-align:middle}
.app-none{color:var(--err-ink); font-weight:700; font-size:1rem}

/* -------------------------------------------------- Mitglieder-Module -- */
.member-modules{grid-column:1 / -1; margin-top:.5rem}
.member-modules>summary{cursor:pointer; font-weight:650}
.member-modules .hint{margin:.4rem 0 .6rem; font-size:.85em; color:var(--muted)}
.member-modules .mod-group{border:1px solid var(--line); border-radius:var(--r-sm); margin:.5rem 0; padding:.4rem .8rem .6rem; background:var(--surface-2)}
.member-modules .mod-group legend{padding:0 .35rem; font-size:.75em; text-transform:uppercase; letter-spacing:.04em; color:var(--muted)}
.member-modules .mod-opt{display:inline-flex; align-items:center; gap:.35rem; width:47%; margin:.15rem 1% .15rem 0; font-weight:400}
.member-modules .mod-opt input{width:auto}
.member-password{margin-top:.6rem}
.member-password label{display:flex; flex-direction:column; gap:.3rem; font-size:.9em; color:var(--ink-2)}
.member-password input{padding:.5rem .6rem; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface-2); color:var(--ink)}
.member-password .hint{margin:.35rem 0 0; font-size:.85em; color:var(--muted)}

/* ------------------------------------------------------------- Tabs -- */
.tabs{display:flex; gap:.2rem; border-bottom:1px solid var(--line); margin:0 0 1rem}
.tabs .tab{background:none; border:none; border-bottom:2px solid transparent; padding:.55rem .9rem; cursor:pointer; color:var(--muted); font-size:.95rem; font-weight:600; border-radius:0}
.tabs .tab:hover{color:var(--ink-2); box-shadow:none}
.tabs .tab.is-active{color:var(--ink); border-bottom-color:var(--fire); font-weight:680}

/* --------------------------------------------------------- Responsive -- */
@media (max-width:820px){
  :root{--sidebar-w:0px}
  .shell{grid-template-columns:1fr}
  .sidebar{display:none}
  .content{padding:1.25rem}
}

/* Eingebetteter/„kopfloser" Modus (App-WebView, ?embed=1): ohne Topbar + Sidebar. */
body.embed .topbar{display:none}
body.embed .sidebar{display:none}
body.embed .shell{grid-template-columns:1fr; min-height:100vh}
body.embed .content{padding:1.25rem; min-width:0}
/* Guard: In der App-WebView darf die Seite nie breiter als der Bildschirm werden
   (manche WebViews weiten den Layout-Viewport auf das breiteste Element aus →
   Text/Felder rechts abgeschnitten). Breite Tabellen scrollen in ihrem eigenen
   .er-adf-wrap/overflow-x-Container weiter, bleiben also erreichbar. */
body.embed{overflow-x:hidden}
body.embed .er-form,
body.embed .jr-add,
body.embed .jr-meta{max-width:100%}