:root{
  --bg-1:#071028;
  --bg-2:#071b33;
  --glass-weak:rgba(255,255,255,0.04);
  --glass-strong:rgba(255,255,255,0.06);
  --muted:#9aa6b2;
  --accent-1:#60a5fa;
  --accent-2:#8b5cf6;
  --success:#10b981;
}
html,body{height:100%;}
body{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
  background-color:var(--bg-1);
  background-image:url('../bg.webp');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-attachment:fixed;
  color:#e6eef8;
  margin:0;
  padding:28px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
h1{margin-bottom:0.5rem;font-weight:600}
.container{max-width:980px;margin:0 auto}
.flex{display:flex;gap:20px;align-items:flex-start}

/* Glass panels (darker overlay for colorful backgrounds) */
.panel{background:linear-gradient(180deg,rgba(6,10,18,0.82),rgba(6,10,18,0.68));border:1px solid rgba(255,255,255,0.03);border-radius:14px;padding:18px;box-sizing:border-box;backdrop-filter:blur(10px) saturate(110%);-webkit-backdrop-filter:blur(10px) saturate(110%);box-shadow:0 14px 36px rgba(2,6,12,0.72);} 
.panel.form{flex:1 1 55%}
.panel.auth{max-width:640px;margin:0 auto}

label{display:block;font-size:0.9rem;margin-bottom:6px;color:var(--muted)}

/* auth row: status left, logout button right */
.auth-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.auth-row .small{margin:0}

input[type="text"],input[type="password"],textarea,select,input[type="color"]{width:100%;box-sizing:border-box;padding:10px 12px;border-radius:10px;border:1px solid rgba(255,255,255,0.04);background:rgba(10,14,20,0.35);color:#e6eef8;font-size:0.95rem;margin-bottom:12px;outline:none;transition:box-shadow .15s ease,border-color .15s ease,transform .08s ease}
input[type="text"]:focus,input[type="password"]:focus,textarea:focus,select:focus{border-color:rgba(99,102,241,0.9);box-shadow:0 6px 20px rgba(99,102,241,0.08);transform:translateY(-1px)}
textarea{resize:vertical;min-height:72px}
input[type="color"]{height:44px;padding:4px;cursor:pointer}

.small{font-size:0.98rem;color:var(--muted)}

/* Tables inside panels */
.panel-box table,.panel-box table th,.panel-box table td{font-size:0.98rem}
.panel-box{margin-top:12px;background:rgba(8,12,20,0.66);padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,0.02);box-shadow:0 8px 20px rgba(3,6,12,0.6)}
.panel-box table th{color:var(--muted);font-weight:600}

.form-actions{margin-top:12px;display:flex;gap:8px;align-items:center}
.no-bullets{list-style:none;padding-left:0;margin:0}
.mb6{margin-bottom:6px}
.logo-img{max-height:75px;display:block;margin-bottom:12px}
.loading-panel{display:flex;align-items:center;justify-content:center;width:100%;padding:10px 0;box-sizing:border-box}
/* Inner wrapper to left-align label + badge while outer keeps centering behaviour */
.loading-panel-inner{width:100%;display:flex;align-items:center;justify-content:flex-start;gap:12px;box-sizing:border-box;padding:0 8px}
.loading-panel-text{display:flex;align-items:center;gap:8px}
.admin-loading-label{font-size:1.05rem;font-weight:600;color:#cbd5e1}
#admin-overview-loading-badge{font-size:1.05rem;margin-left:6px}
#admin-overview-refresh{margin-left:12px}
/* Size and color for refresh icon button in loading area */
#admin-overview-refresh svg{width:16px;height:16px;display:inline-block;vertical-align:middle;color:inherit}
#admin-overview-refresh{padding:6px 8px}
.hidden{display:none}
.error-text{color:#fca5a5}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 14px;
  border-radius:10px;
  border:none;
  cursor:pointer;
  color:#fff;
  font-size:0.95rem;
  background:linear-gradient(90deg,var(--accent-1),var(--accent-2));
  box-shadow:0 6px 18px rgba(99,102,241,0.14);
  transition:transform .08s ease,opacity .12s ease;
  text-decoration:none;
  box-sizing:border-box;
  line-height:1;
  vertical-align:middle;
}
.btn:active{transform:translateY(1px);opacity:0.95}

.error{color:#fca5a5;margin-bottom:10px}
.spinner{width:36px;height:36px;border:4px solid rgba(255,255,255,0.06);border-top-color:rgba(99,102,241,0.9);border-radius:50%;animation:spin 1s linear infinite;margin-right:10px;display:inline-block;vertical-align:middle}
@keyframes spin{to{transform:rotate(360deg)}}

/* details/summary subtle style */
summary{list-style:none}
details>summary::-webkit-details-marker{display:none}
details summary{padding:6px 0}
.table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-responsive table{min-width:720px}

@media (max-width:720px){
  .flex{flex-direction:column;gap:12px}
  .panel.form{flex:1 1 100%}
  .panel{padding:14px;border-radius:12px}
  .panel-box{padding:10px}
  .panel-box table th,.panel-box table td{white-space:normal}
  .rmm-btn{min-width:64px;flex:1 1 auto}
  .auth-row{flex-direction:column;align-items:flex-start;gap:8px}
}
.rmm-btn{min-width:92px;display:inline-flex;align-items:center;justify-content:center}

/* small admin-specific utilities (from prior inline admin styles) */
summary::-webkit-details-marker{display:none}
summary::marker{display:none}
summary{display:flex;align-items:center;gap:8px}
#admin-overview-toggle{display:inline-block;transition:transform 0.18s ease;transform-origin:center;margin-left:8px;color:#cbd5e1;font-weight:600}

/* Admin-specific layout helpers */
.admin-output { color: #800; margin-top: 12px; }
.section-sep { margin-top: 18px; padding-top: 12px; border-top: 1px dashed rgba(255,255,255,0.03); }
.admin-overview-root summary { cursor: pointer; list-style: none; outline: none; margin: 0; padding: 6px 0; }
.admin-overview-panels { display: flex; flex-direction:column; gap: 20px; margin-top: 8px; }
.admin-panel { flex: 0 0 100%; display: flex; flex-direction:column; max-width: 100%; margin-top: 0px;}
.admin-panel h3 { margin-top: 0; color: #93c5fd; }
.admin-heading {
  margin-top: 0;
  color: #93c5fd;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
}

/* Keep the main title truncated if too long, badge stays fixed */
.admin-heading > span:first-child{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;display:block}
.admin-heading > .admin-badge{flex:0 0 auto}
.admin-badge { margin-left: 8px; color: #cbd5e1; font-weight: 600; }
.admin-info { color: #cbd5e1; }
.admin-progress-label { font-size: 0.9rem; color: #cbd5e1; margin-bottom: 6px; }
.progress-outer { background: rgba(255,255,255,0.03); border-radius: 8px; height: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,0.03); width: 100%; }
.progress-inner { height: 100%; transition: width 0.3s ease; border-radius: 6px; }
.progress-outer-narrow { height: 8px; border-radius: 6px; width: 100%; }
/* smaller styling for the 'davon Programmierung' summary line */
.coding-summary-line { font-size: 0.85rem; }
.coding-summary-line strong { font-weight: 600; }

/* Admin-specific visual tweaks to match customer view spacing and sizes */
.admin-progress-label { font-size: 0.95rem; color: #cbd5e1; margin-bottom: 6px; }
.admin-info .progress-outer { margin-top: 6px; }
.admin-info .progress-outer.progress-outer-narrow { height: 8px; border-radius: 6px; margin-top: 6px; }
.coding-summary-line { color: #cbd5e1; margin-top: 6px; }
.admin-summary-left strong { font-weight: 700; margin-right: 6px; }
.admin-summary { margin-top: 8px; display: flex; align-items: center; justify-content: flex-start; gap: 8px; }
.admin-summary { color: #cbd5e1; margin-top: 6px; }
/* align summary text and inline sum to opposite ends */
.admin-summary { display:flex; justify-content:space-between; align-items:center; gap:0.5rem; }
.admin-summary-sum { margin-left: 0; white-space:nowrap; }
/* left part should keep its content left-aligned and allow wrapping */
.admin-summary-left { flex: 1 1 auto; text-align: left; min-width: 0; }
.admin-summary-left strong { margin-right: 0.25rem; }

/* Ensure admin-info (status + progress) sits at the bottom of admin panels */
.panel-box.admin-panel .admin-info{margin-top:auto}

/* End of aggregated styles */

/* Utility helpers added to replace inline JS styles */
.ml-6 { margin-left: 6px; }
.h3-heading { margin-top: 0; color: #93c5fd; }
.label-muted { font-size: 1rem; color: #cbd5e1; margin-bottom: 6px; }
.bar-wrap { margin: 8px 0 6px 0; }
.btn-small { padding: 4px 8px; font-size: 0.85rem; }
.td-padding { padding: 8px; }
.th-style { text-align: left; padding: 6px 8px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.tr-sep { border-bottom: 1px solid rgba(255,255,255,0.03); }
.pass-mask { margin-right: 8px; font-family: monospace; }
.summary-reset { cursor: pointer; list-style: none; outline: none; margin: 0 0 8px 0; display: flex; align-items: center; gap: 8px; }
.details-reset { margin-top: 6px; background: transparent; }
.badge-green { color: #10b981; }
.badge-yellow { color: #f59e0b; }
.badge-red { color: #ef4444; }
.text-success { color: #080; }
.text-error { color: #800; }
.rotated { transform: rotate(90deg); }

/* Table and layout utilities used by JS renderers */
.table-wrap { padding: 6px 0 0 0; }
.table-full { width: 100%; border-collapse: collapse; }
.wrap-pt-6 { padding-top: 6px; }

/* Table foot / summary */
.tr-sum { border-top: 2px solid rgba(255,255,255,0.06); }
.font-bold { font-weight: 700; }

/* Progress width utility classes (5% increments) */
.progress-inner.w-0  { width: 0%; }
.progress-inner.w-5  { width: 5%; }
.progress-inner.w-10 { width: 10%; }
.progress-inner.w-15 { width: 15%; }
.progress-inner.w-20 { width: 20%; }
.progress-inner.w-25 { width: 25%; }
.progress-inner.w-30 { width: 30%; }
.progress-inner.w-35 { width: 35%; }
.progress-inner.w-40 { width: 40%; }
.progress-inner.w-45 { width: 45%; }
.progress-inner.w-50 { width: 50%; }
.progress-inner.w-55 { width: 55%; }
.progress-inner.w-60 { width: 60%; }
.progress-inner.w-65 { width: 65%; }
.progress-inner.w-70 { width: 70%; }
.progress-inner.w-75 { width: 75%; }
.progress-inner.w-80 { width: 80%; }
.progress-inner.w-85 { width: 85%; }
.progress-inner.w-90 { width: 90%; }
.progress-inner.w-95 { width: 95%; }
.progress-inner.w-100{ width: 100%; }

/* Progress color utility classes */
.progress-inner.bg-green  { background: #10b981; }
.progress-inner.bg-yellow { background: #f59e0b; }
.progress-inner.bg-red    { background: #ef4444; }