:root{
  --primary:#000537;
  --primary-2:#00106f;
  --primary-soft:rgba(0,5,55,.08);
  --accent:#0ea5e9;
  --text:#0f172a;
  --muted:#475569;
  --muted-2:#64748b;
  --border:rgba(15,23,42,.11);
  --border-strong:rgba(15,23,42,.16);
  --surface:#ffffff;
  --surface-soft:rgba(248,250,252,.9);
  --bg:#f3f6fb;
  --bg-2:#eef3fa;
  --shadow:0 22px 48px -30px rgba(15,23,42,.30);
  --shadow-soft:0 8px 24px rgba(15,23,42,.08);
  --radius-xl:22px;
  --radius-lg:18px;
  --radius-md:14px;
  --radius-sm:10px;
  /* Einheitlicher Seitenabstand wie in der Termin-App */
  --page-pad:32px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  font-family:"Plus Jakarta Sans",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1000px 680px at 8% -10%, rgba(0,5,55,.07), transparent 60%),
    radial-gradient(980px 680px at 100% 4%, rgba(14,165,233,.07), transparent 62%),
    linear-gradient(180deg, #ffffff 0%, var(--bg) 58%, var(--bg-2) 100%);
  padding-top:var(--header-h, 76px);
}
a{color:inherit;text-decoration:none}
.hidden{display:none!important}

.container{
  width:100%;
  max-width:1160px;
  margin:0 auto;
  /* Safe-Area Insets (iPhone Notch) + konsistenter Abstand links/rechts */
  padding-left:calc(var(--page-pad) + env(safe-area-inset-left));
  padding-right:calc(var(--page-pad) + env(safe-area-inset-right));
}

@media (max-width:760px){
  :root{ --page-pad:22px; }
}

.header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:50;
  border-bottom:1px solid var(--border);
  background:rgba(255,255,255,.84);
  backdrop-filter:blur(10px);
}
.topbarInner{
  min-height:72px;
  display:flex;
  align-items:center;
  gap:12px;
  padding-left:0;
  padding-right:0;
}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brandMark{display:flex;align-items:center;justify-content:flex-start;background:transparent;border:0;padding:0;width:auto;height:auto;border-radius:4px;box-shadow:none;flex:0 0 auto;}
.brandMark img,.brandLogo{width:auto;height:24px;max-width:min(150px,32vw);display:block;border-radius:4px;object-fit:contain}
.brandText{display:flex;flex-direction:column;line-height:1.05;min-width:0}
.brandText strong{font-size:15px;letter-spacing:-.02em;white-space:nowrap}
.brandText span{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.nav{display:flex;align-items:center;gap:6px;margin-left:8px;min-width:0}
.nav a{
  font-size:13px;font-weight:700;color:var(--muted);
  padding:9px 12px;border-radius:11px;
  border:1px solid transparent;
}
.nav a:hover{background:rgba(15,23,42,.04);color:var(--text)}
.nav a.active{
  color:var(--primary);
  background:rgba(0,5,55,.07);
  border-color:rgba(0,5,55,.12);
}

.navToggle{
  display:none;
  margin-left:auto;
  width:40px;height:40px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
  cursor:pointer;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:4px;
}
.navToggle span{display:block;width:18px;height:2px;background:#334155;border-radius:3px}

.toolbar{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.userPill{
  max-width:220px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-size:12px;font-weight:600;color:var(--muted);
  border:1px solid var(--border);
  background:rgba(255,255,255,.85);
  padding:8px 10px;border-radius:999px;
}
.guestTools{margin-left:auto}
.topbarInner > .toolbar{margin-left:auto;justify-content:flex-end}

@media (max-width:900px){
  .topbarInner{flex-wrap:wrap;min-height:auto;padding:10px 0 12px;row-gap:10px}
  .brand{flex:1 1 auto;min-width:0}
  .brandText span{display:none}
  .navToggle{display:inline-flex}
  .toolbar{order:3;width:100%;margin-left:0}
  .guestTools{justify-content:flex-start}
  .userPill{max-width:100%;flex:1 1 auto}
  .nav{
    order:4;
    width:100%;
    margin:0;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
    padding:4px 0 2px;
  }
  .nav.navOpen{display:flex}
  .nav a{
    background:#fff;
    border:1px solid var(--border);
    padding:10px 12px;
  }
}

main.container{padding-top:18px;padding-bottom:28px;flex:1 0 auto}
.pageStack{display:grid;gap:14px}
.grid{display:grid;gap:14px}
.grid.cols-1{grid-template-columns:1fr}
.grid.cols-2{grid-template-columns:1.05fr .95fr}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1100px){ .grid.cols-2{grid-template-columns:1fr} }
@media (max-width:900px){ .grid.cols-3{grid-template-columns:1fr} }

.card{
  background:rgba(255,255,255,.88);
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-soft);
  padding:14px;
}
.card h2{margin:0 0 8px;font-size:19px;letter-spacing:-.02em}
.card h3{margin:0 0 6px;font-size:15px;letter-spacing:-.01em}
.sectionHead{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.sectionHead .sub{color:var(--muted);font-size:13px;margin:2px 0 0}

.heroGrid{display:grid;grid-template-columns:1.25fr .75fr;gap:14px}
.heroGrid.single{grid-template-columns:1fr}
@media (max-width:980px){ .heroGrid{grid-template-columns:1fr} }
.heroCard{
  padding:16px;
  background:
    radial-gradient(560px 260px at 0% 0%, rgba(0,5,55,.07), transparent 70%),
    radial-gradient(420px 200px at 100% 0%, rgba(14,165,233,.08), transparent 72%),
    rgba(255,255,255,.92);
}
.heroKicker{font-size:12px;font-weight:800;color:var(--primary);text-transform:uppercase;letter-spacing:.08em}
.heroTitle{margin:4px 0 6px;font-size:28px;line-height:1.05;letter-spacing:-.03em}
.heroLead{margin:0;color:var(--muted);font-size:14px;line-height:1.45}
.heroButtons{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap}
.heroAside{padding:16px}
.heroAside .panel{border:1px solid var(--border);border-radius:14px;background:#fff;padding:10px 12px}
.heroAside .panel + .panel{margin-top:8px}
.heroAside .panel strong{display:block;margin-bottom:2px;font-size:13px}
.heroAside .panel .small{line-height:1.35}

#kpiGrid,.statsRow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:900px){ #kpiGrid,.statsRow{grid-template-columns:1fr} }
.kpi{
  border-radius:16px;
  border:1px solid var(--border);
  background:linear-gradient(180deg,#fff,#f8fbff);
  padding:12px;
  box-shadow:none;
}
.kpi .muted{margin:0;font-size:12px;font-weight:700}
.kpi .val{font-size:26px;font-weight:800;letter-spacing:-.03em;margin-top:3px}

.btn{
  border:1px solid var(--border);
  background:linear-gradient(180deg,#fff,#f7fafc);
  color:var(--text);
  border-radius:999px;
  padding:10px 14px;
  min-height:40px;
  font-weight:700;
  font-size:14px;
  cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
}
.btn:hover{border-color:var(--border-strong)}
.btn.primary{
  background:linear-gradient(180deg,var(--primary),var(--primary-2));
  color:#fff;
  border-color:rgba(0,5,55,.28);
}
.btn.sm{padding:7px 10px;min-height:32px;font-size:12px}
.btn.icon{padding:7px 10px;min-height:32px}
.btn.ghost{background:rgba(255,255,255,.92)}
#logoutBtn{transition:color .15s ease,border-color .15s ease,background .15s ease}
#logoutBtn:hover{
  color:#991b1b;
  border-color:rgba(220,38,38,.24);
  background:linear-gradient(180deg,#fef2f2,#fff);
}
.btn.danger{
  color:#991b1b;
  border-color:rgba(220,38,38,.24);
  background:linear-gradient(180deg,#fef2f2,#fff);
}
.btn.block{width:100%}

label{display:block;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:4px}
input,textarea,select{
  width:100%;
  border:1px solid var(--border);
  background:#fff;
  color:var(--text);
  border-radius:12px;
  padding:10px 12px;
  font:inherit;
  font-size:14px;
}
input:focus,textarea:focus,select:focus{outline:3px solid rgba(0,5,55,.12);border-color:rgba(0,5,55,.32)}
textarea{min-height:92px;resize:vertical}
input[type="checkbox"]{width:auto;accent-color:var(--primary)}

.form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:740px){ .form-row{grid-template-columns:1fr} }

/* Select/Input + Add Button (Kategorie etc.) */
.fieldWithAdd{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fieldWithAdd > select,
.fieldWithAdd > input{flex:1 1 auto}
.fieldWithAdd > .btn{flex:0 0 auto;min-width:44px;justify-content:center}

.toolbar{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.toolbar .spacer{flex:1}
.toolbar input{min-width:220px;flex:1 1 240px}
.toolbar select{max-width:220px}
@media (max-width:680px){ .toolbar input,.toolbar select{max-width:none;min-width:0;width:100%;flex:1 1 100%} }

.message{
  border:1px solid var(--border);
  background:#fff;
  border-radius:12px;
  padding:10px 12px;
  font-size:14px;
  color:var(--text);
  white-space:pre-wrap;
}
.message.ok{border-color:rgba(22,163,74,.28);background:rgba(22,163,74,.05);color:#166534}
.message.err{border-color:rgba(220,38,38,.25);background:rgba(220,38,38,.04);color:#991b1b}
.message.warnbox{border-color:rgba(217,119,6,.24);background:rgba(217,119,6,.05);color:#92400e}

.table-wrap{
  overflow:auto;
  border:1px solid rgba(15,23,42,.09);
  border-radius:14px;
  background:rgba(248,250,252,.75);
}
.table-wrap.scroll-y{max-height:460px}
.table-wrap.scroll-y thead th{
  position:sticky;top:0;z-index:2;
  background:#f8fafc;
}

table{width:100%;min-width:760px;border-collapse:collapse;font-size:13px}
th,td{padding:10px 8px;border-bottom:1px solid rgba(15,23,42,.08);text-align:left;vertical-align:top}
th{font-size:12px;color:var(--muted);font-weight:700}
tr:hover td{background:rgba(0,5,55,.025)}
tr.warn td{background:rgba(217,119,6,.05)}
tr.expired td{background:rgba(220,38,38,.04)}

.actionsCell{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}

@media (max-width:760px){
  .table-wrap{overflow:visible;border:none;background:transparent}
  .table-wrap.scroll-y{max-height:none}
  table{min-width:0;width:100%}
  thead{display:none}
  tbody{display:grid;gap:10px}
  tr{display:block;background:#fff;border:1px solid rgba(15,23,42,.10);border-radius:14px;padding:8px 10px;box-shadow:var(--shadow-soft)}
  td{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;border-bottom:none;padding:6px 2px}
  td::before{content:attr(data-label);color:var(--muted);font-weight:700;font-size:12px;min-width:86px;flex:0 0 86px}
  td > *{text-align:right}
}

.badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;border-radius:999px;
  border:1px solid var(--border);
  background:#fff;
  color:var(--muted);
  font-size:12px;font-weight:700;
  white-space:nowrap;
}
.badge.lead{color:#92400e;border-color:rgba(217,119,6,.25);background:rgba(217,119,6,.06)}
.badge.active,.badge.ok2{color:#166534;border-color:rgba(22,163,74,.25);background:rgba(22,163,74,.06)}
.badge.inactive{color:#475569;border-color:rgba(100,116,139,.22);background:rgba(148,163,184,.08)}
.badge.warn{color:#92400e;border-color:rgba(217,119,6,.25);background:rgba(217,119,6,.06)}
.badge.danger{color:#991b1b;border-color:rgba(220,38,38,.25);background:rgba(220,38,38,.05)}

.list,.inline-list{display:grid;gap:10px}
.item,.note{
  border:1px solid var(--border);
  border-radius:14px;
  background:#fff;
  padding:10px 12px;
}
.note.compact{padding:8px 10px}
.empty{
  border:1px dashed var(--border);
  border-radius:14px;
  padding:12px 14px;
  color:var(--muted);
  background:rgba(255,255,255,.66);
  font-size:14px;
}
.muted{color:var(--muted);font-size:14px}
.small{font-size:12px;color:var(--muted)}
.code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.link-btn,.linkInline,.table-wrap a,.list a,.inline-list a,#detailInfo a,.heroAside a{color:var(--primary);font-weight:600}
.link-btn{text-decoration:underline}

.workspaceGrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:1100px){ .workspaceGrid{grid-template-columns:1fr} }
.stack{display:grid;gap:14px}
.stickyCard{position:sticky;top:88px}
@media (max-width:1100px){ .stickyCard{position:static} }

.detailWrap{display:grid;gap:12px}
.detailControls{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.detailControls select{min-width:260px;flex:1 1 260px}
.detailGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:980px){ .detailGrid{grid-template-columns:1fr} }

#detailInfo{display:grid;gap:8px}
#detailInfo > div{
  border:1px solid rgba(15,23,42,.08);
  border-radius:12px;
  padding:7px 10px;
  background:rgba(248,250,252,.65);
  font-size:13px;
}
#detailInfo > div strong{display:inline-block;margin-right:4px;font-size:12.5px}
#notesList,#filesList{max-height:360px;overflow:auto;padding-right:2px}
@media (max-width:760px){ #notesList,#filesList{max-height:none;overflow:visible;padding-right:0} }

.authShell{display:flex;justify-content:center;align-items:flex-start}
.authIntro{padding:16px}
.authCard{padding:16px;max-width:520px;width:100%}
.authCard .btnRow{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.authCard .btnRow .btn{flex:1 1 180px}
.passwordRow{display:flex;gap:8px;align-items:center}
.passwordRow input{flex:1 1 auto}
.passwordRow .btn{flex:0 0 auto;white-space:nowrap}


.customer-list-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:8px}
.customer-list-footer .small{margin:0}
@media (max-width:760px){ .customer-list-footer .btn{width:100%} }

.footer{
  border-top:1px solid var(--border);
  background:rgba(255,255,255,.78);
  margin-top:auto;
}
.footerInner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0 18px}
.footerBrand{display:flex;align-items:center;gap:10px;min-width:0}
.brandMarkSmall{
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  border:1px solid rgba(0,5,55,.15);background:rgba(0,5,55,.05)
}
.brandLogoSmall{width:24px;height:24px;display:block;border-radius:6px}
.footerSub{font-size:12px;color:var(--muted)}
.footerMeta{font-size:12px;color:var(--muted-2)}
@media (max-width:760px){ .footerInner{flex-direction:column;align-items:flex-start} }

/* Login Seite: Formular zentriert */
.page-login main.container{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:calc(100vh - var(--header-h, 76px) - 120px);
  padding-top:26px;
  padding-bottom:26px;
}


/* Team & Rollen */
.teamCreateTop{grid-template-columns:1.2fr 1fr 1fr}
.teamCreateBottom{grid-template-columns:1.2fr .7fr auto;align-items:end}
.teamCreateBottom .teamCreateAction{display:flex;align-items:flex-end}
.teamCreateBottom .teamCreateAction .btn{width:100%}
.teamToolbar input{min-width:280px}
.teamUsersTable{min-width:840px}
.teamPersonCell strong{display:block;line-height:1.2}
.teamPersonCell .small{margin-top:4px}
.teamLoginCell .badge{margin-top:6px}
.teamRoleControl{display:flex;gap:8px;align-items:center;justify-content:flex-start}
.teamRoleControl select{min-width:150px;max-width:170px}
.teamActions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.roleSelfTag{color:var(--muted);font-size:12px;margin-left:6px}
.teamDisabledNotice{margin-top:10px}
@media (max-width:1100px){
  .teamCreateTop,.teamCreateBottom{grid-template-columns:1fr}
}


@media (max-width:760px){
  .teamToolbar input{min-width:0 !important;width:100%}
  .teamUsersTable{min-width:0 !important;width:100%}
  .teamRoleControl{width:100%}
  .teamRoleControl select{min-width:0;max-width:none;width:100%}
  .teamActions{width:100%;justify-content:flex-end}
  .teamActions .btn{width:auto}
}



/* Mobile: Header/Footer nicht am Rand kleben */
@media (max-width:760px){
  body{padding-top:calc(var(--header-h, 76px) + 12px)}
  .header{
    top:8px;
    left:8px;
    right:8px;
    border:1px solid var(--border);
    border-radius:16px;
    box-shadow:var(--shadow-soft);
    background:rgba(255,255,255,.92);
  }
  .header .container{
    padding-left:14px;
    padding-right:14px;
  }
  .footer{
    margin:12px 8px 8px;
    border:1px solid var(--border);
    border-radius:16px;
    overflow:hidden;
  }
  .footer .container{
    padding-left:14px;
    padding-right:14px;
  }
  .footerInner{padding:12px 0 14px}
}
@media (max-width:420px){
  .brand{gap:8px}
  .brandMark{width:38px;height:38px;border-radius:10px}
  .brandMark img{width:26px;height:26px}
  .brandText strong{font-size:13px}
  .navToggle{width:38px;height:38px}
}


/* === AFANDI Liquid-Glass / Frosted-Glass Design Override (cards/chips glass, primary buttons keep #000537, navbar tuned) === */
:root{
  --glassStroke: rgba(255,255,255,.40);
  --glassStrokeSoft: rgba(255,255,255,.28);
  --glassBg: linear-gradient(135deg, rgba(255,255,255,.42), rgba(255,255,255,.16));
  --glassBgSoft: linear-gradient(135deg, rgba(255,255,255,.34), rgba(255,255,255,.12));
  --glassBgPanel: linear-gradient(135deg, rgba(255,255,255,.48), rgba(255,255,255,.20));
  --glassShadow: 0 14px 34px rgba(15,23,42,.12), inset 0 1px 0 rgba(255,255,255,.72), inset 0 -1px 0 rgba(255,255,255,.14);
  --glassShadowSoft: 0 8px 20px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.65);
  --glassShadowInset: inset 0 1px 0 rgba(255,255,255,.70), inset 0 -1px 0 rgba(255,255,255,.10), 0 6px 14px rgba(15,23,42,.06);
}

/* Base surfaces (cards / panels) */
.card,
.item,
.note,
.message,
.empty,
.authCard,
.heroAside .panel,
.kpi,
.table-wrap,
#detailInfo > div,
.footer,
.hintCard,
.checkItem,
.findingCard,
tr,
tbody tr{
  border-color: var(--glassStroke) !important;
  background: var(--glassBg) !important;
  box-shadow: var(--glassShadowSoft) !important;
  backdrop-filter: blur(10px) saturate(145%);
  -webkit-backdrop-filter: blur(10px) saturate(145%);
}

.heroCard{
  border: 1px solid var(--glassStroke) !important;
  background:
    radial-gradient(560px 260px at 0% 0%, rgba(0,5,55,.07), transparent 70%),
    radial-gradient(420px 200px at 100% 0%, rgba(14,165,233,.09), transparent 72%),
    linear-gradient(135deg, rgba(255,255,255,.46), rgba(255,255,255,.16)) !important;
  box-shadow: var(--glassShadow) !important;
  backdrop-filter: blur(12px) saturate(145%);
  -webkit-backdrop-filter: blur(12px) saturate(145%);
}

/* Pills / chips */
.badge,
.userPill,
.roleSelfTag{
  border-color: rgba(255,255,255,.42) !important;
  background: var(--glassBgPanel) !important;
  box-shadow: var(--glassShadowInset) !important;
  backdrop-filter: blur(8px) saturate(145%);
  -webkit-backdrop-filter: blur(8px) saturate(145%);
}
.roleSelfTag{padding:4px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.36) !important;color:#475569 !important;}

/* Keep status badges colored but glassy */
.badge.active,.badge.ok2{background:linear-gradient(135deg, rgba(22,163,74,.10), rgba(255,255,255,.24)) !important;border-color:rgba(22,163,74,.24) !important;}
.badge.warn,.badge.lead{background:linear-gradient(135deg, rgba(217,119,6,.10), rgba(255,255,255,.24)) !important;border-color:rgba(217,119,6,.26) !important;}
.badge.danger{background:linear-gradient(135deg, rgba(220,38,38,.08), rgba(255,255,255,.22)) !important;border-color:rgba(220,38,38,.22) !important;}
.badge.inactive{background:linear-gradient(135deg, rgba(148,163,184,.12), rgba(255,255,255,.22)) !important;border-color:rgba(148,163,184,.24) !important;}

/* Buttons: glass for secondary, solid primary stays #000537 */
.btn{
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.btn:not(.primary):not(.danger){
  border-color: rgba(255,255,255,.42) !important;
  background: var(--glassBgPanel) !important;
  box-shadow: var(--glassShadowInset) !important;
  backdrop-filter: blur(8px) saturate(145%);
  -webkit-backdrop-filter: blur(8px) saturate(145%);
}
.btn:not(.primary):not(.danger):hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.56) !important;
  box-shadow: 0 10px 22px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.75) !important;
}
.btn.primary{
  background: #000537 !important;
  color: #fff !important;
  border-color: rgba(0,5,55,.28) !important;
  box-shadow: 0 10px 22px rgba(0,5,55,.24), inset 0 1px 0 rgba(255,255,255,.14) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.btn.primary:hover{
  background: #000537 !important;
  border-color: rgba(0,5,55,.36) !important;
  box-shadow: 0 12px 24px rgba(0,5,55,.28), inset 0 1px 0 rgba(255,255,255,.18) !important;
}
.btn.danger{
  box-shadow: 0 6px 16px rgba(220,38,38,.08), inset 0 1px 0 rgba(255,255,255,.65) !important;
}

/* Inputs & selects */
input, textarea, select{
  border-color: rgba(255,255,255,.44) !important;
  background: linear-gradient(135deg, rgba(255,255,255,.56), rgba(255,255,255,.22)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.70), 0 6px 14px rgba(15,23,42,.05) !important;
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
}
input:focus, textarea:focus, select:focus{
  border-color: rgba(147,197,253,.72) !important;
  box-shadow: 0 0 0 3px rgba(147,197,253,.22), inset 0 1px 0 rgba(255,255,255,.75), 0 8px 16px rgba(15,23,42,.07) !important;
}

/* Table polish */
.table-wrap{background: linear-gradient(135deg, rgba(255,255,255,.34), rgba(255,255,255,.10)) !important;}
.table-wrap.scroll-y thead th{background: rgba(248,250,252,.78) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);} 
th,td{border-bottom-color: rgba(255,255,255,.28) !important;}
tr:hover td{background: rgba(255,255,255,.20) !important;}

/* Navbar tune: desktop calmer (less glassy), keep fixed header */
.header{
  position: fixed !important;
  background: rgba(255,255,255,.86) !important;
  border-bottom: 1px solid rgba(15,23,42,.10) !important;
  box-shadow: none !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}
.brandMark,
.brandMarkSmall{
  background: rgba(0,5,55,.06) !important;
  border-color: rgba(0,5,55,.14) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.navToggle{
  background: rgba(255,255,255,.88) !important;
  border-color: rgba(15,23,42,.10) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.nav a{
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.nav a:hover{background: rgba(15,23,42,.05) !important;color: var(--text) !important;}
.nav a.active{
  color: #000537 !important;
  background: rgba(0,5,55,.08) !important;
  border-color: rgba(0,5,55,.12) !important;
}

/* Footer glass (readable, not too strong) */
.footer{
  background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(248,250,252,.70)) !important;
  border-top-color: rgba(255,255,255,.42) !important;
}

/* Mobile: keep inset/fixed behavior but darken dropdown menu so it's not too bright */
@media (max-width:900px){
  .nav.navOpen,
  .nav{
    border: 1px solid rgba(15,23,42,.12) !important;
    border-radius: 14px;
    padding: 8px !important;
    background: linear-gradient(180deg, rgba(241,245,249,.94), rgba(226,232,240,.88)) !important;
    box-shadow: 0 16px 34px rgba(15,23,42,.14), inset 0 1px 0 rgba(255,255,255,.55) !important;
    backdrop-filter: blur(12px) saturate(135%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(135%) !important;
  }
  .nav a{
    border: 1px solid rgba(255,255,255,.34) !important;
    background: linear-gradient(135deg, rgba(255,255,255,.40), rgba(255,255,255,.14)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.62), 0 5px 12px rgba(15,23,42,.07) !important;
  }
  .nav a.active{
    background: linear-gradient(135deg, rgba(0,5,55,.10), rgba(255,255,255,.22)) !important;
    border-color: rgba(0,5,55,.16) !important;
  }
  .userPill{max-width:100%;}
}

/* Mobile list cards keep glass instead of plain white */
@media (max-width:760px){
  tr{
    border-color: rgba(255,255,255,.36) !important;
    background: linear-gradient(135deg, rgba(255,255,255,.42), rgba(255,255,255,.14)) !important;
    box-shadow: var(--glassShadowSoft) !important;
  }
  .header{
    /* keep previous inset/fixed placement from existing CSS, just tune tone */
    background: rgba(248,250,252,.92) !important;
    border-color: rgba(15,23,42,.10) !important;
  }
  .footer{
    border-color: rgba(255,255,255,.40) !important;
  }
}



/* ---------- In-App Modals (statt Browser alert/confirm/prompt) ---------- */
.uiOverlay{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(15,23,42,.45);backdrop-filter:blur(6px)}
.uiOverlay.hidden{display:none}
.uiModal{width:min(560px,100%);border-radius:var(--radius-xl);background:rgba(255,255,255,.92);border:1px solid rgba(15,23,42,.10);box-shadow:var(--shadow);overflow:hidden}
.uiModalHead{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:16px 16px 0}
.uiModalTitle{margin:0;font-size:16px;letter-spacing:-.01em}
.uiModalBody{padding:12px 16px;color:var(--muted);line-height:1.5}
.uiModalBody p{margin:0 0 10px}
.uiModalActions{display:flex;justify-content:flex-end;gap:8px;padding:0 16px 16px;flex-wrap:wrap}
.uiModalClose{border:none;background:transparent;color:var(--muted);font-size:22px;line-height:1;cursor:pointer;padding:0 6px}
.uiModalClose:hover{color:var(--text)}
.uiModalField{margin-top:10px}
.uiModalField input,.uiModalField textarea{width:100%}
.uiCheckRow{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--border);border-radius:14px;background:rgba(255,255,255,.9)}
.uiCheckRow input{margin:0}

/* ---------- Custom Select (Dropdown im App-Style, nicht Browser-UI) ---------- */
.uiSelectNative{display:none!important}
.uiSelect{position:relative;width:100%}
.uiSelectBtn{
  width:100%;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 10px;min-height:40px;line-height:1.2;
  border:1px solid var(--border);border-radius:12px;
  background:rgba(255,255,255,.92);color:var(--text);font:inherit;font-size:13px;
  cursor:pointer
}
.uiSelectBtn:focus{outline:3px solid rgba(0,5,55,.12);border-color:rgba(0,5,55,.32)}
.uiSelectCaret{opacity:.7;flex:0 0 auto}
.uiSelectMenu{
  position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:2000;
  background:rgba(255,255,255,.96);border:1px solid var(--border);
  border-radius:16px;box-shadow:var(--shadow-soft);padding:8px;
  max-height:min(280px, 50vh);overflow:auto;overscroll-behavior:contain
}
.uiSelectMenu.hidden{display:none}
.uiSelectSearch{width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:12px;margin:0 0 8px 0;font:inherit;font-size:13px}
.uiSelectOption{padding:8px 10px;border-radius:12px;cursor:pointer;user-select:none;font-size:13px}
.uiSelectOption:hover{background:var(--primary-soft)}
.uiSelectOption.active{background:rgba(0,5,55,.12)}
.fieldWithAdd > .uiSelect{flex:1 1 auto}


/* Overlay for mobile dropdown portal (prevents tap issues in iOS/Safari inside glass/blur cards) */
.uiSelectOverlay{position:fixed;inset:0;z-index:3005;background:rgba(10,18,35,.22);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
body.uiNoScroll{overflow:hidden}

@media (max-width:520px){
  .uiSelectBtn{font-size:12px;padding:7px 9px;min-height:38px}
  .uiSelectSearch{font-size:12px;padding:7px 9px}
  .uiSelectOption{font-size:12px;padding:7px 9px}
  /* Menü bleibt im Viewport (besser für Mobile, keine abgeschnittenen Listen) */
  .uiSelectMenu{
    position:fixed;left:max(12px, env(safe-area-inset-left));right:max(12px, env(safe-area-inset-right));
    bottom:max(12px, env(safe-area-inset-bottom));top:auto;
    max-height:55vh;border-radius:18px
  }
}


/* ---- Unified background (kein Verlauf) + stabileres Scrollen (Mobile) ---- */
html, body { background: #F5F5F7 !important; }
body { background-image: none !important; }
.header { -webkit-transform: translateZ(0); transform: translateZ(0); will-change: transform; }
hr{border:none !important; background:transparent !important; height:0 !important;}


/* AFANDI full logo navbar fix */
.brand--logoonly{gap:0 !important;}
.brand--logoonly .brandMark{margin-right:0 !important;}
.header .brandMark{display:flex;align-items:center;justify-content:flex-start;background:transparent;border:0;padding:0;width:auto;height:auto;border-radius:4px;box-shadow:none;}
.header .brandMark img,.header .brandLogo,.header .brandLogoFull{width:auto;height:24px;max-width:min(150px,32vw);border-radius:4px;object-fit:contain;display:block;}
.header .brandText{display:none !important;}
@media (max-width:760px){.header .brandMark img,.header .brandLogo,.header .brandLogoFull{height:24px;max-width:min(150px,40vw);}}

/* Final footer/icon fix */
.footerBrand{display:flex;align-items:center;gap:10px;min-width:0}.brandMarkSmall{width:34px;height:34px;border-radius:10px;background:rgba(0,5,55,.06);border:1px solid rgba(0,5,55,.14);display:grid;place-items:center;padding:4px;flex:0 0 auto}.brandLogoSmall{width:24px;height:24px;display:block;border-radius:4px;object-fit:contain}.footerMeta{font-size:12px;color:var(--muted-2)}


.brand.brand--logoonly{gap:0 !important;}
.brand.brand--logoonly .brandMark{margin-right:0 !important;}
@media (max-width:640px){.brandMark img,.brandLogo{height:22px;max-width:min(145px,52vw);}}