/* DS Dashboard global theme */
:root{
  --bg1:#07111a; --bg2:#0b1f2c; --card:rgba(255,255,255,.045); --card2:rgba(255,255,255,.065);
  --stroke:rgba(255,255,255,.09); --stroke-strong:rgba(255,255,255,.12);
  --text:rgba(255,255,255,.88); --muted:rgba(255,255,255,.62);
  --brand:#5aa9ff; --brand2:#2b7bff; --good:#35d07f; --warn:#ffb020; --bad:#ff4d4d;
  --shadow:0 18px 50px rgba(0,0,0,.28); --radius:16px; --radius2:22px;
}
*{box-sizing:border-box} html,body{height:100%}
body{
  margin:0;
  background:
    radial-gradient(900px 600px at 35% 45%, rgba(80,140,190,.10) 0%, rgba(20,40,60,.04) 28%, rgba(7,17,26,0) 55%),
    linear-gradient(180deg, #07111a 0%, #06101a 100%);
  color:var(--text);
  font:14px/1.35 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
code{font-family:ui-monospace,SFMono-Regular,Consolas,Monaco,monospace}
/* Senkrecht scrollt die Seite selbst (eine Scrollleiste ganz rechts), waagerecht
   nur #content. Dadurch bekommt das Dokument nie eine Querscrollleiste und die
   Sidebar bleibt beim Scrollen breiter Tabellen stehen. */
.shell{display:flex;min-height:100vh}
.sidebar{width:232px;flex:0 0 232px;position:sticky;top:0;height:100vh;padding:16px 10px 18px;background:linear-gradient(180deg, rgba(10,20,40,.72) 0%, rgba(6,12,22,.78) 100%);border-right:1px solid rgba(255,255,255,.07);backdrop-filter:blur(6px);overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column}
.sidebar::-webkit-scrollbar,#content::-webkit-scrollbar{width:10px;height:10px}
.sidebar::-webkit-scrollbar-thumb,#content::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:99px}
.sidebar::-webkit-scrollbar-thumb:hover,#content::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.2)}
.sidebar::-webkit-scrollbar-track,#content::-webkit-scrollbar-track{background:transparent}
.sidebar,#content{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.2px;font-size:18px;margin:6px 10px 14px}.dot{width:10px;height:10px;border-radius:99px;background:var(--good);box-shadow:0 0 0 3px rgba(53,208,127,.15)}
.search{margin:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:999px;padding:10px 12px;color:var(--muted)} .search input{width:100%;border:0;outline:0;background:transparent;color:var(--text)}
.panel{margin:12px 10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);padding:12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.02)} .panel h4{margin:0 0 10px;color:var(--muted);font-weight:700;font-size:13px;letter-spacing:.2px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.btn{cursor:pointer;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.055);color:var(--text);padding:10px 12px;border-radius:12px;transition:transform .05s ease,background .15s ease,border-color .15s ease;user-select:none}
.btn:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.2)} .btn:active{transform:translateY(1px)} .btn.primary{background:rgba(90,169,255,.14);border-color:rgba(90,169,255,.32)} .btn.danger{background:rgba(255,77,77,.12);border-color:rgba(255,77,77,.32)}
.small{font-size:12px;color:var(--muted)} .badge{margin-left:auto;font-size:12px;padding:6px 10px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);border-radius:999px;color:var(--muted)}
.main{flex:1 1 auto;min-width:0;padding:22px}
/* Der Reiter-Inhalt nimmt den Rest der Breite ein und faengt das Querscrollen ab.
   overflow-y:hidden schneidet nichts ab (die Hoehe ist auto, der Kasten waechst
   mit dem Inhalt) - es verhindert nur die zweite, senkrechte Scrollleiste, die
   overflow-x:auto sonst mitbringt. Nicht auf .card verallgemeinern: die Seiten
   nutzen .card auch fuer eigene Bloecke. */
#content{margin-top:0;overflow-x:auto;overflow-y:hidden}
/* Ohne das presst der Kasten seinen Inhalt unter dessen min-content-Breite. Innen
   liegende Wrapper mit overflow:hidden (z.B. .fr-vrow-wrap der Farmen/RZ-Live-
   Uebersicht) schneiden ihre Spalten dann ab, statt dass hier gescrollt wird. */
#content > *{min-width:min-content}
.header{display:flex;align-items:center;gap:12px;margin:6px 0 14px}.header h1{margin:0;font-size:26px}.header .sub{color:var(--muted);margin-top:2px}
/* Applikationsleiste ueber dem Seitentitel: Welt, Aktualisieren, Status, Commit */
.appbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);box-shadow:0 8px 26px rgba(0,0,0,.18) inset;margin-bottom:14px}
.appbar .badge{margin-left:0}
.appbar .btn{padding:6px 11px;border-radius:999px;font-size:12px}
.appbar-group{display:flex;align-items:center;gap:7px;min-width:0;flex-wrap:wrap}
.appbar-label{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}
.appbar-sep{width:1px;align-self:stretch;min-height:22px;margin:0 3px;background:rgba(255,255,255,.1)}
.appbar-spacer{flex:1 1 auto}
.appbar-input{width:80px;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.06);color:inherit;font-size:12px;outline:0}
.appbar-input:focus{border-color:rgba(90,169,255,.5)}
.appbar .mono{font-family:ui-monospace,SFMono-Regular,Consolas,Monaco,monospace;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidenav{display:flex;flex-direction:column;gap:3px;margin-top:4px;flex:0 0 auto}
.tab{display:block;cursor:pointer;padding:8px 11px;border-radius:10px;border:1px solid transparent;background:transparent;color:var(--muted);font-weight:650;font-size:13px;letter-spacing:.15px;transition:background .15s ease,border-color .15s ease,color .15s ease;user-select:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tab:hover{background:rgba(255,255,255,.07);color:var(--text)} .tab.active{background:rgba(90,169,255,.18);border-color:rgba(90,169,255,.34);color:var(--text)}
@media (max-width:820px){
  .appbar{border-radius:var(--radius)}
  .appbar-sep,.appbar-spacer{display:none}
  .shell{flex-direction:column}
  .sidebar{width:auto;flex:0 0 auto;position:static;height:auto;max-height:38vh;border-right:0;border-bottom:1px solid rgba(255,255,255,.07)}
  .main{padding:14px}
  .sidenav{flex-direction:row;flex-wrap:wrap}
  .tab{border-radius:999px;border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.045)}
}
.card{
  margin-top:16px;
  border-radius:var(--radius2);
  background:transparent;
  border:1px solid rgba(255,255,255,.025);
  box-shadow:none;
  padding:18px 18px 20px;
  min-height:auto;
}
.kicker{color:var(--muted);margin:0}
.ds-toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:0 0 12px 0}
.ds-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border-radius:999px;border:1px solid var(--stroke);background:rgba(255,255,255,.04);color:rgba(255,255,255,.75);font-size:12px;user-select:none}
.ds-select{width:auto;min-width:220px;padding:8px 10px;border-radius:12px;border:1px solid var(--stroke);background:#0b1f2c;color:rgba(255,255,255,.88);outline:none;color-scheme:dark}
.ds-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(440px,1fr));
  gap:14px;
  align-items:start;
}
.ds-card{
  align-self:start;
  border:1px solid rgba(255,255,255,.075);
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.022), rgba(255,255,255,.012));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.012);
  padding:14px;
}

.ds-top{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:10px}.ds-title{font-weight:850}.ds-sub{color:rgba(255,255,255,.62);font-size:12px;margin-top:2px}
.ds-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;border:1px solid var(--stroke);background:rgba(0,0,0,.12);color:rgba(255,255,255,.68);font-size:12px;white-space:nowrap}
.ds-two-col{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start} @media (max-width:980px){.ds-two-col{grid-template-columns:1fr}}
.ds-box{min-height:96px;padding:10px 12px;border:1px solid var(--stroke);border-radius:14px;background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01))}
.ds-box-title{font-weight:850;margin-bottom:6px}.ds-lines{display:grid;gap:8px}.ds-line{padding:10px 10px;border:1px solid var(--stroke-strong);border-radius:14px;background:rgba(0,0,0,.12)}
.ds-res-grid{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}.ds-res-unit{display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:12px;border:1px solid var(--stroke);background:rgba(0,0,0,.10);font-weight:900;font-size:13px}
.ds-res-unit img{width:18px;height:18px;vertical-align:middle}.ds-empty{border:1px dashed rgba(255,255,255,.12);border-radius:18px;padding:16px;color:rgba(255,255,255,.62);background:rgba(255,255,255,.02)}