/* Modern UI patch (readability + mobile) */
:root{
  --accent: #00915a;
  --accent-dark: #007a4c;
  --accent-soft: rgba(0,145,90,.12);
  --bg: #f6f7fb;
  --card-bg: #ffffff;
  --text: #0f172a;
  --muted: rgba(15,23,42,.65);
  --border: rgba(15,23,42,.14);
  --shadow: 0 12px 30px rgba(15,23,42,.10);
  --shadow-soft: 0 6px 18px rgba(15,23,42,.08);
  --radius: 16px;
  --control-bg: #ffffff;
  --control-bg-hover: #f8fafc;
  --pill-bg: rgba(255,255,255,.78);
  --surface-glass: rgba(255,255,255,.78);
  --code-bg: rgba(15,23,42,.06);
  --drawer-gradient-end: rgba(255,255,255,.85);
}

html[data-vrah-theme="dark"]{
  --bg: #0b1120;
  --card-bg: #111827;
  --text: #e5edf8;
  --muted: rgba(226,232,240,.72);
  --border: rgba(148,163,184,.28);
  --shadow: 0 18px 40px rgba(0,0,0,.42);
  --shadow-soft: 0 10px 24px rgba(0,0,0,.34);
  --control-bg: #0f172a;
  --control-bg-hover: #172033;
  --pill-bg: rgba(30,41,59,.88);
  --surface-glass: rgba(15,23,42,.88);
  --code-bg: rgba(148,163,184,.16);
  --drawer-gradient-end: rgba(17,24,39,.94);
}

html[data-vrah-theme="dark"],
html[data-vrah-theme="dark"] body{
  color-scheme: dark;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: var(--text);
  background: var(--bg);
}

.app-shell{
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  width:100%;
}

a{ color: inherit; }
code{ background: var(--code-bg); padding:2px 6px; border-radius:10px; }

/* 2.741: max-width 1100 -> 1600 fuer bessere Ausnutzung von Laptop- und
   Full-HD-Monitoren. Laesst auf >=1920 noch etwas Luft am Rand, aber
   nutzt deutlich mehr als die alten 1100px (die auf heutigen Displays
   grosse graue Seitenbalken hinterliessen). */
.wrap{ width:100%; max-width: 1600px; margin: 0 auto; padding: 16px; }
.app-main{
  flex:1 1 auto;
  width:100%;
  min-width:0;
  min-height:0;
  display:flex;
  flex-direction:column;
}
.app-main-wrap{
  flex:1 1 auto;
  width:100%;
  min-width:0;
  min-height:0;
}
.app-header,
.app-footer{
  flex:0 0 auto;
}
.small{ font-size: 13px; color: var(--muted); line-height: 1.35; }

.grid{ display:grid; grid-template-columns: repeat(12, 1fr); gap: 12px; }
.row{ display:flex; align-items:center; gap:12px; }

.card{
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 14px;
}
.card h2{ margin:0 0 6px 0; font-size: 18px; }
.card h1{ margin:0; }

.hero{
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
}
.hero h2{ font-size: 20px; letter-spacing:.2px; }
.hero .small{ margin-top:4px; }

.label{ font-size: 12px; color: var(--muted); margin-bottom:6px; }
.form{ display:grid; gap:12px; }

.input, select.input{
  width:100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--control-bg);
  font-size: 14px;
  outline: none;
}
.input:focus{ border-color: rgba(0,145,90,.55); box-shadow: 0 0 0 4px var(--accent-soft); }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--control-bg);
  color: var(--text);
  cursor:pointer;
  text-decoration:none;
  font-weight: 600;
  font-size: 14px;
}
.btn:hover{ box-shadow: var(--shadow-soft); background: var(--control-bg-hover); }
.btn.primary{
  background: var(--accent);
  border-color: rgba(0,145,90,.35);
  color: #fff;
}
.btn.primary:hover{ box-shadow: var(--shadow); }
.btn.danger{ background:#fff; border-color: rgba(239,68,68,.45); color:#991b1b; }

/* Small loading indicator (used next to buttons, e.g. "Zähler laden") */
.hsm-spinner{
  width:16px;
  height:16px;
  border-radius:50%;
  border:2px solid rgba(0,0,0,.15);
  border-top-color: rgba(0,0,0,.65);
  animation: hsmSpin .8s linear infinite;
  display:none;
  margin-left:10px;
  vertical-align: middle;
}
@keyframes hsmSpin{ to{ transform:rotate(360deg) } }

.btn.is-busy{ opacity:.85; }

.pill{
  display:inline-flex;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--pill-bg);
  text-decoration:none;
  font-size: 13px;
  color: var(--text);
}
.pill:hover{ background: var(--control-bg-hover); }

.tableWrap{ width:100%; overflow:auto; border-radius: 14px; border: 1px solid var(--border); }
.table{ width:100%; border-collapse: collapse; background:var(--card-bg); }
.table th, .table td{ padding: 10px 12px; border-bottom: 1px solid rgba(15,23,42,.10); font-size: 14px; }
.table th{ font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.table tr:last-child td{ border-bottom:none; }
.right{ text-align:right; }

.footer{
  width:100%;
  border-top: 1px solid var(--border);
  background: var(--surface-glass);
  backdrop-filter: blur(10px);
}

/* Footer: app-shell-kompakt, aber nicht künstlich hoch */
.footer .wrap{
  display:flex;
  align-items:center;
  width:100%;
  min-height:34px;
  padding-top: 6px;
  padding-bottom: 6px;
}
.footer .small{ font-size: 12px; line-height: 1.2; }

/* Topbar */
.topbar{
  position: sticky; top: 0; z-index: 50;
  background: var(--surface-glass);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.topbar-inner{
  max-width: 1600px; margin: 0 auto; padding: 10px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.brand{
  font-weight: 900; letter-spacing:.3px;
  text-decoration:none; color:var(--text);
  padding: 8px 10px; border-radius: 12px;
}
.brand:hover{ background: rgba(15,23,42,.04); }
.theme-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-width:96px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--border);
  background: var(--control-bg);
  color: var(--text);
  font-size:13px; font-weight:700;
  cursor:pointer;
}
.theme-btn:hover{ background: var(--control-bg-hover); box-shadow: var(--shadow-soft); }
.theme-btn .theme-btn-label{ white-space:nowrap; }
.topnav{ display:flex; gap:8px; flex-wrap:wrap; }
.nav-link{
  text-decoration:none; color:var(--text);
  font-size: 13px; font-weight: 700;
  padding: 8px 10px; border-radius: 999px;
  border: 1px solid transparent;
}
.nav-link:hover{ border-color: var(--border); background: rgba(15,23,42,.04); }

@media (max-width: 720px){
  .topbar-inner{ align-items:flex-start; flex-direction:column; }
  .topnav{ width:100%; overflow:auto; padding-bottom:2px; }
  .wrap{ padding: 12px; }
  .hero{ flex-direction:column; align-items:flex-start; }
  .grid{ grid-template-columns: repeat(6, 1fr); }
}


/* --- Filter modal (mobile) --- */
.vrahFilterBtn{
  margin-left:auto;
  border:1px solid rgba(0,0,0,0.12);
  background:rgba(255,255,255,0.9);
  border-radius:14px;
  height:44px;
  width:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 20px rgba(0,0,0,0.10);
}
.vrahFilterIcon{
  width:22px; height:22px; display:block;
  background:currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M3 5h18v2H3V5zm4 6h10v2H7v-2zm3 6h4v2h-4v-2z"/></svg>') center/contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M3 5h18v2H3V5zm4 6h10v2H7v-2zm3 6h4v2h-4v-2z"/></svg>') center/contain no-repeat;
}
.vrahFilterBackdrop{display:none;}

.vrahFiltersActions{display:none; width:100%; gap:10px; justify-content:flex-end; align-items:center;}

/* Mobile: hide inline filters, show as modal via class on body */
@media (max-width:980px){
  .vrahFiltersPanel{ display:none; }
  body.vrahFiltersOpen .vrahFilterBackdrop{
    display:block; position:fixed; inset:0; z-index:9998; background:rgba(0,0,0,0.35);
  }
  body.vrahFiltersOpen .vrahFiltersPanel{
    display:flex;
    position:fixed;
    z-index:9999;
    left:12px; right:12px;
    top:72px;
    max-height: calc(100vh - 96px);
    overflow:auto;
    padding:12px;
    border-radius:18px;
    background:rgba(255,255,255,0.98);
    border:1px solid rgba(0,0,0,0.12);
    box-shadow:0 18px 50px rgba(0,0,0,0.18);
  }
  body.vrahFiltersOpen .vrahFiltersActions{display:flex;}
}


/* Auth shell lockdown: hide app chrome when logged out */
body.auth-off .topbar,
body.auth-off .footer{
  display:none;
}
body.auth-off .app-shell{
  min-height: 100vh;
  min-height: 100dvh;
}
body.auth-off .app-main{
  min-height: 100vh;
  min-height: 100dvh;
  align-items:center;
  justify-content:center;
}
body.auth-off .app-main-wrap{
  flex:0 1 auto;
  width:min(520px, 100%);
  padding: 24px;
}
body.auth-off .app-main-wrap > #app{
  width: 100%;
}


/* Accent / active states */
.nav-link.active, .pill.active{ background: var(--accent-soft); border-color: rgba(0,145,90,.25); color: var(--accent-dark); }
.nav-link:active{ background: rgba(0,145,90,.10); }
.brand{ color: var(--accent-dark); }

/* Mobile refinements */
@media (max-width: 768px){
  body{ font-size: 14px; }
  .container{ padding: 10px 10px; }
  .card{ padding: 12px; border-radius: 14px; }
  .topbar .container{ padding: 10px 10px; }
  .topnav{ gap: 6px; }
  .nav-link{ font-size: 12px; padding: 7px 9px; }
  .pill{ font-size: 12px; padding: 7px 9px; }
  .btn{ padding: 10px 12px; }
  /* Make wide tables usable */
  .table, table{ display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  table{ border-collapse:separate; border-spacing:0; }
  /* Prevent long labels from breaking layout */
  .row{ flex-wrap:wrap; }
  .right{ text-align:left; }
  /* Reduce top padding under hamburger */
  .topbar { padding-right: 64px; }
}

@media (max-width: 768px){ .actions, .toolbar, .admin-actions, .page-actions{ display:flex; flex-wrap:wrap; gap:8px; } }


/* --- Mobile: Häuser Tiles (responsive) --- */
/* On small screens the house tile must not use absolute positioning (breaks when buttons exist). */
@media (max-width: 520px){
  html, body{ overflow-x:hidden; }

  a.houseTile{
    padding-right:18px !important;   /* no reserved QM space */
    display:flex !important;
    flex-wrap:wrap;
    gap:12px;
  }

  /* right block (QM + buttons) should flow normally and be fully visible */
  a.houseTile > div:last-child{
    position:static !important;
    width:100% !important;
    min-width:0 !important;
    text-align:left !important;
    align-items:flex-start !important;
    gap:10px !important;
  }

  /* keep buttons usable on mobile */
  a.houseTile > div:last-child button.btn{
    width:100%;
  }

  /* shrink very large inline fonts a bit for mobile */
  a.houseTile > div:first-child > div:first-child{
    font-size:22px !important;
    line-height:1.15;
    word-break:break-word;
  }
  a.houseTile > div:first-child .small{
    font-size:14px !important;
  }

  a.houseTile > div:last-child .small{
    font-size:13px !important;
    line-height:1.1;
  }
  a.houseTile > div:last-child div{
    font-size:18px !important;
    font-weight:900;
    line-height:1.1;
  }
}


/* ------------------------------
   Module Host (mobile friendly)
   - single scroll area inside iframe
   - avoids frame-in-frame scrolling issues on iOS
------------------------------- */
body.vrah-module-mode{
  overflow: hidden;
}
body.vrah-module-mode .app-main,
body.vrah-module-mode .app-main-wrap,
body.vrah-module-mode .wrap{
  max-width: none;
  width: 100%;
}
body.vrah-module-mode .app-main-wrap{
  padding: 0 !important;
}
body.vrah-module-mode .app-main-wrap > #app{
  width: 100%;
  height: 100%;
}
.vrah-module-host{
  width: 100%;
}
.vrah-module-host-inner{
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.vrah-module-iframe{
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* When a module is open, also allow header/footer content to span full width */
body.vrah-module-mode .topbar-inner,
body.vrah-module-mode .footer .wrap{
  max-width: none;
}

/* Host-side modals (used by module_host RPC ui_confirm/ui_prompt) */
.vrah-ui-modal-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 99999;
}
.vrah-ui-modal{
  width: min(520px, 100%);
  background: #fff;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.22);
  border: 1px solid rgba(0,0,0,0.10);
}
.vrah-ui-modal-title{
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 10px;
}
.vrah-ui-modal-body{
  color: rgba(0,0,0,0.80);
  font-size: 14px;
  line-height: 1.4;
  margin-bottom: 12px;
}
.vrah-ui-modal-field input{
  width: 100%;
  min-height: 44px;
}
.vrah-ui-modal-actions{
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
@media (max-width: 520px){
  .vrah-ui-modal{ border-radius: 18px; }
  .vrah-ui-modal-actions .btn{ min-height: 44px; }
}


/* --- Mobile: Häuser Schriftgröße reduzieren --- */
@media (max-width: 520px){
  /* overall tile text smaller */
  a.houseTile{
    padding-right:112px !important; /* keep space for QM */
  }

  /* Title block (first big line) – force smaller even if inline styles exist */
  a.houseTile span,
  a.houseTile div,
  a.houseTile b,
  a.houseTile strong{
    max-width:100%;
  }

  /* If the title is a <div> with big font-size inline, override via !important on the first strong/big text */
  a.houseTile .houseName,
  a.houseTile .title,
  a.houseTile .houseTitle{
    font-size:24px !important;
    line-height:1.12 !important;
    font-weight:900;
  }

  /* Generic: first text element inside left column */
  a.houseTile > div:first-child > div:first-child{
    font-size:26px !important;
    line-height:1.10 !important;
  }

  /* Address lines */
  a.houseTile > div:first-child > div:nth-child(2),
  a.houseTile > div:first-child > div:nth-child(3){
    font-size:16px !important;
    line-height:1.25 !important;
  }

  /* QM block smaller */
  a.houseTile > div:last-child{
    top:12px;
    right:12px;
  }
  a.houseTile > div:last-child .small{
    font-size:12px !important;
  }
  a.houseTile > div:last-child div{
    font-size:16px !important;
  }
}

/* --- Mobile Feinjustierung: Titel noch kompakter --- */
@media (max-width: 520px){
  a.houseTile > div:first-child > div:first-child{
    font-size:23px !important;
    line-height:1.08 !important;
    letter-spacing:-0.2px;
  }
  a.houseTile > div:last-child div{
    font-size:15px !important;
  }
}

/* --- Mobile Fix: Straße + Hausnummer in EINER Zeile (iPhone) --- */
@media (max-width: 520px){
  /* Left column: first two blocks (Straße, Nummer) inline */
  a.houseTile > div:first-child > div:first-child,
  a.houseTile > div:first-child > div:nth-child(2){
    display:inline !important;
    font-size:21px !important;
    line-height:1.08 !important;
    font-weight:900;
  }

  /* spacing before number */
  a.houseTile > div:first-child > div:nth-child(2){
    margin-left:6px;
  }

  /* keep both on one line; if too long, cut with … */
  a.houseTile > div:first-child{
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  /* address lines below should still wrap normally */
  a.houseTile > div:first-child > div:nth-child(n+3){
    display:block !important;
    white-space:normal !important;
  }
}


/* Details/summary: used for collapsible sections (e.g., QR/Guest card) */
.vrah-details-summary{ list-style: none; }
.vrah-details-summary::-webkit-details-marker{ display:none; }
.vrah-details-summary{ cursor: pointer; }


/* Dark mode refinements */
html[data-vrah-theme="dark"] body{
  background: var(--bg);
  color: var(--text);
}
html[data-vrah-theme="dark"] a{ color: inherit; }
html[data-vrah-theme="dark"] .topbar,
html[data-vrah-theme="dark"] .footer{
  background: var(--surface-glass);
}
html[data-vrah-theme="dark"] .brand:hover,
html[data-vrah-theme="dark"] .nav-link:hover,
html[data-vrah-theme="dark"] .vrahFilterBtn{
  background: rgba(148,163,184,.08);
}
html[data-vrah-theme="dark"] .nav-link.active,
html[data-vrah-theme="dark"] .pill.active{
  color: #9ae6c7;
  border-color: rgba(0,145,90,.32);
}
html[data-vrah-theme="dark"] .brand{ color: #34d399; }
html[data-vrah-theme="dark"] .table th,
html[data-vrah-theme="dark"] .table td{ border-bottom-color: rgba(148,163,184,.16); }
html[data-vrah-theme="dark"] .vrahFilterBackdrop{ background: rgba(2,6,23,.62); }
html[data-vrah-theme="dark"] body.vrahFiltersOpen .vrahFiltersPanel{
  background: rgba(15,23,42,.98);
  border-color: var(--border);
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  color: var(--text);
}
html[data-vrah-theme="dark"] .notif-overlay{ background: rgba(2,6,23,.62) !important; }
html[data-vrah-theme="dark"] .notif-panel,
html[data-vrah-theme="dark"] .notif-send,
html[data-vrah-theme="dark"] .notif-item,
html[data-vrah-theme="dark"] .notif-head,
html[data-vrah-theme="dark"] .notif-actions{
  background: var(--card-bg) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
html[data-vrah-theme="dark"] .notif-head,
html[data-vrah-theme="dark"] .notif-actions,
html[data-vrah-theme="dark"] .notif-send{ border-bottom-color: rgba(148,163,184,.16) !important; }
html[data-vrah-theme="dark"] .notif-send-input,
html[data-vrah-theme="dark"] .notif-head button,
html[data-vrah-theme="dark"] .notif-actions button,
html[data-vrah-theme="dark"] .notif-send-actions button{
  background: var(--control-bg) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
html[data-vrah-theme="dark"] .notif-head button:hover,
html[data-vrah-theme="dark"] .notif-actions button:hover,
html[data-vrah-theme="dark"] .notif-send-actions button:hover{ background: var(--control-bg-hover) !important; }
html[data-vrah-theme="dark"] .notif-muted,
html[data-vrah-theme="dark"] .notif-item-meta,
html[data-vrah-theme="dark"] .notif-send-label{ color: var(--muted) !important; }
html[data-vrah-theme="dark"] .notif-item.unread{ box-shadow: 0 0 0 3px rgba(37,99,235,.18) !important; }
html[data-vrah-theme="dark"] .notif-error{ background: rgba(127,29,29,.28) !important; color: #fecaca !important; border-color: rgba(248,113,113,.25) !important; }

@media (max-width: 768px){
  .theme-btn{ min-width:0; padding:8px 10px; }
  .theme-btn .theme-btn-label{ display:none; }
}


/* .749 footer compact */
@media (max-width: 640px){
  .footer .wrap{ padding-top: 4px; padding-bottom: 4px; }
  .footer .small{ font-size: 11px; line-height: 1.15; }
  .footer{ padding-top: 4px; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 4px); }
}


/* 2.478 mobile overflow hotfix: no horizontal drift, header/menu stays reachable */
html, body{ max-width:100%; overflow-x:hidden; }
main.wrap, main.wrap > #app, .app-main, .app-main-wrap, .app-main-wrap > #app, .vrah-module-host, .vrah-module-host-inner{ max-width:100%; }
body.vrah-module-mode{ overflow-x:hidden; }
body.vrah-module-mode .app-main-wrap{ overflow-x:hidden; }
.vrah-module-host-inner{ overflow-x:hidden; }
.vrah-module-iframe{ max-width:100%; }
@media (max-width: 768px){
  .topbar{ z-index: 200; }
  .topbar-inner{ position:relative; z-index:201; }
  .footer .wrap{ padding-top:6px; padding-bottom:6px; }
}


/* .749: Dokumente (Einheit) – echte Uploader-Spalte + mobile Umbruchlogik */
.vrah-docs-list{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}
.vrah-docs-head,
.vrah-doc-row{
  display:grid;
  grid-template-columns: 22px minmax(0,1fr) minmax(120px,160px) 118px auto;
  gap:10px;
  align-items:center;
  min-width:0;
}
.vrah-docs-head{
  font-size:11px;
  padding:0 0 4px 0;
}
.vrah-doc-row{
  padding:6px 0;
  border-top:1px solid rgba(0,0,0,.06);
}
.vrah-doc-row:first-of-type{
  border-top:none;
}
.vrah-doc-check,
.vrah-doc-main,
.vrah-doc-uploader,
.vrah-doc-date,
.vrah-doc-actions{
  min-width:0;
}
.vrah-doc-main a{
  min-width:0;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.vrah-doc-uploader,
.vrah-doc-date{
  text-align:right;
  font-size:11px;
  white-space:nowrap;
}
.vrah-doc-actions{
  justify-self:end;
}
@media (max-width: 760px){
  .vrah-docs-head{
    display:none;
  }
  .vrah-doc-row{
    grid-template-columns: 22px minmax(0,1fr) auto;
    grid-template-areas:
      "check main action"
      ". uploader action"
      ". date action";
    align-items:start;
  }
  .vrah-doc-check{ grid-area:check; padding-top:2px; }
  .vrah-doc-main{ grid-area:main; }
  .vrah-doc-actions{ grid-area:action; align-self:start; }
  .vrah-doc-uploader,
  .vrah-doc-date{
    text-align:left;
    white-space:normal;
  }
  .vrah-doc-uploader{ grid-area:uploader; }
  .vrah-doc-date{ grid-area:date; }
}

/* 2.845: OPOS-Tab-Reorganisation
   ============================================================
   Tab-Bar wird in workspace_layout.js injiziert (.vrah-tab-*).
   Hier nur die OPOS-spezifischen KPI-Header- und Pane-Styles. */
.opos-kpi-header{
  display:block;
  margin-bottom:14px;
}
.opos-kpis{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap:10px;
}
.opos-kpi{
  background: rgba(15,23,42,.03);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
  user-select: none;
}
.opos-kpi:hover{
  background: var(--accent-soft);
  border-color: var(--accent);
}
.opos-kpi-label{
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 2px;
}
.opos-kpi-value{
  font-weight: 900;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}
.opos-tab-pane{
  display:block;
}
.opos-tab-pane > *:first-child{
  margin-top: 0;
}

/* 2.847: Soll/Haben-KPI-Toggle + aufklappbare Ledger-Drawer
   ============================================================ */
.opos-dot{
  display:inline-block;
  width:10px; height:10px;
  border-radius:50%;
  vertical-align:middle;
}
.opos-dot-soll{ background:#dc2626; box-shadow: 0 0 0 3px rgba(220,38,38,.15); }
.opos-dot-haben{ background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.opos-kpi-toggle{ position:relative; cursor:pointer; }
.opos-kpi-chev{
  font-size:10px;
  color: var(--muted);
  margin-left:4px;
  transition: transform .15s ease;
  display:inline-block;
}
.opos-kpi-toggle.opos-kpi-active{
  background: var(--card-bg);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.opos-kpi-toggle.opos-kpi-active .opos-kpi-chev{ transform: rotate(180deg); }
#oposKpiSoll.opos-kpi-active{ border-color: #dc2626; box-shadow: 0 0 0 3px rgba(220,38,38,.12); }

.opos-ledger-drawers{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}
@media (max-width: 760px){
  .opos-ledger-drawers{ grid-template-columns: 1fr; }
}
/* Wenn nur EINE Drawer-Card sichtbar ist, soll sie volle Breite nutzen */
.opos-ledger-drawers:has(.opos-ledger-card[style*="display:none"]) .opos-ledger-card:not([style*="display:none"]){
  grid-column: 1 / -1;
}
.opos-ledger-card{
  padding: 12px;
  animation: opos-ledger-slide .18s ease-out;
}
.opos-ledger-soll{ border-left: 4px solid #dc2626; }
.opos-ledger-haben{ border-left: 4px solid var(--accent); }
.opos-ledger-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
  gap:10px;
}
.opos-ledger-close{
  padding:4px 10px;
  line-height:1;
  font-size:14px;
}
.opos-ledger-table-wrap{
  max-height: 320px;
  overflow-y: auto;
}
@keyframes opos-ledger-slide{
  from{ opacity: 0; transform: translateY(-6px); }
  to  { opacity: 1; transform: translateY(0); }
}