: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('../img/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}

/* 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%}

label{display:block;font-size:0.9rem;margin-bottom:6px;color:var(--muted)}
.checkbox-row{display:flex;align-items:flex-start;gap:8px;margin:2px 0 12px 0;color:#cbd5e1;line-height:1.35}
.checkbox-row input{margin-top:3px;flex:0 0 auto}

/* 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}
.session-timer{font-size:0.95rem;color:var(--muted);white-space:nowrap}
.session-timer.warning{color:#fbbf24}
.session-timer.expired{color:#f87171}
.admin-auth-row{justify-content:flex-end}
.admin-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 12px 0;border-bottom:1px solid rgba(255,255,255,0.06);padding-bottom:8px}
.admin-tab{border:1px solid rgba(255,255,255,0.08);background:rgba(8,12,20,0.48);color:#cbd5e1;border-radius:8px;padding:8px 10px;cursor:pointer;font-size:0.9rem}
.admin-tab.active{background:rgba(96,165,250,0.18);border-color:rgba(96,165,250,0.42);color:#fff}
.admin-tab-panel{margin-top:12px}
.admin-tab-panel[hidden]{display:none}
.system-check-groups{display:flex;flex-direction:column;gap:12px}
.system-check-summary{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.system-check-summary-badge{display:inline-flex;align-items:center;border:1px solid rgba(255,255,255,0.08);border-radius:8px;padding:5px 8px;font-size:0.85rem;font-weight:700;background:rgba(8,12,20,0.45)}
.system-check-summary-badge.ok{color:#10b981}
.system-check-summary-badge.info{color:#60a5fa}
.system-check-summary-badge.warning{color:#f59e0b}
.system-check-summary-badge.error{color:#ef4444}
.system-check-group{border-top:1px solid rgba(255,255,255,0.06);padding-top:10px}
.system-check-group:first-child{border-top:none;padding-top:0}
.system-check-title{margin:0 0 8px 0;color:#93c5fd;font-size:1rem}
.system-check-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.system-check-item{display:grid;grid-template-columns:90px minmax(160px,1fr) 1.1fr 1.4fr;gap:10px;align-items:start;color:#cbd5e1}
.system-check-status{font-weight:700;text-transform:uppercase;font-size:0.78rem}
.system-check-status.ok{color:#10b981}
.system-check-status.info{color:#60a5fa}
.system-check-status.warning{color:#f59e0b}
.system-check-status.error{color:#ef4444}
.system-check-label{font-weight:600}
.system-check-message{color:#9aa6b2}
.system-check-action{color:#cbd5e1}
.audit-controls{display:flex;align-items:flex-end;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.audit-control-field{display:flex;flex-direction:column;gap:4px;min-width:210px}
.audit-control-limit{min-width:96px}
.audit-controls label{margin-bottom:0}
.audit-controls select{margin-bottom:0}
.audit-controls .btn{height:39px}
.audit-log-table{width:100%;border-collapse:collapse;min-width:900px}
.audit-log-table th,.audit-log-table td{padding:7px 8px;border-bottom:1px solid rgba(255,255,255,0.05);text-align:left;vertical-align:top}
.audit-log-table th{color:#9aa6b2;font-size:0.84rem}
.audit-level{font-weight:700;text-transform:uppercase;font-size:0.78rem}
.audit-level.info{color:#10b981}
.audit-level.warning{color:#f59e0b}
.audit-level.error{color:#ef4444}
.audit-success.ok{color:#10b981}
.audit-success.fail{color:#ef4444}
.audit-muted{color:#9aa6b2}
.webhook-diagnostics-controls{display:flex;align-items:center;gap:10px;margin-bottom:12px;max-width:390px}
.webhook-diagnostics-controls label{margin-bottom:0;white-space:nowrap}
.webhook-diagnostics-controls input{margin-bottom:0}
.webhook-diagnostics-controls .btn{height:39px;flex:0 0 auto}
.webhook-diagnostics-summary{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.webhook-diagnostics-summary-badge{display:inline-flex;align-items:center;border:1px solid rgba(255,255,255,0.08);border-radius:8px;padding:5px 8px;font-size:0.85rem;font-weight:700;background:rgba(8,12,20,0.45)}
.webhook-diagnostics-summary-badge.ok{color:#10b981}
.webhook-diagnostics-summary-badge.empty,.webhook-diagnostics-summary-badge.skipped{color:#f59e0b}
.webhook-diagnostics-summary-badge.error{color:#ef4444}
.webhook-diagnostics-table{width:100%;border-collapse:collapse;min-width:1080px}
.webhook-diagnostics-table th,.webhook-diagnostics-table td{padding:7px 8px;border-bottom:1px solid rgba(255,255,255,0.05);text-align:left;vertical-align:top}
.webhook-diagnostics-table th{color:#9aa6b2;font-size:0.84rem}
.webhook-status{font-weight:700;text-transform:uppercase;font-size:0.78rem}
.webhook-status.ok{color:#10b981}
.webhook-status.empty,.webhook-status.skipped{color:#f59e0b}
.webhook-status.error{color:#ef4444}
.webhook-muted{color:#9aa6b2}
.admin-credentials-list{margin-top:12px}
.admin-credentials-table{width:100%;border-collapse:collapse;min-width:760px}
.admin-credentials-table th,.admin-credentials-table td{padding:7px 8px;border-bottom:1px solid rgba(255,255,255,0.05);text-align:left;vertical-align:middle}
.admin-credentials-table th{color:#9aa6b2;font-size:0.84rem}
.credential-muted{color:#9aa6b2}
.credential-delete{background:linear-gradient(90deg,#ef4444,#8b5cf6)}
.security-status-groups{display:flex;flex-direction:column;gap:12px}
.security-status-group{border-top:1px solid rgba(255,255,255,0.06);padding-top:10px}
.security-status-group:first-child{border-top:none;padding-top:0}
.security-status-title{margin:0 0 8px 0;color:#93c5fd;font-size:1rem}
.security-status-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.security-status-item{display:grid;grid-template-columns:120px minmax(170px,1fr) 1.5fr;gap:10px;align-items:start;color:#cbd5e1}
.security-status-badge{font-weight:700;text-transform:uppercase;font-size:0.78rem}
.security-status-badge.ok{color:#10b981}
.security-status-badge.info{color:#60a5fa}
.security-status-badge.warning{color:#f59e0b}
.security-status-badge.error{color:#ef4444}
.security-status-label{font-weight:600}
.security-status-message{color:#9aa6b2}

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){
  .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}
  .system-check-item{grid-template-columns:1fr;gap:2px}
  .security-status-item{grid-template-columns:1fr;gap:2px}
  .audit-controls{align-items:stretch}
  .audit-control-field{min-width:100%;width:100%}
  .audit-controls .btn{width:100%;height:auto}
  .webhook-diagnostics-controls{max-width:none;flex-wrap:wrap}
  .webhook-diagnostics-controls input{min-width:0;flex:1 1 180px}
  .webhook-diagnostics-controls .btn{width:100%;height:auto}
}
.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; }
.monthly-price-note { margin-top: 2px; font-size: 0.82rem; color: #9ca3af; white-space: nowrap; }
.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; }