/* Reset & Basics */
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');
@font-face { font-family: 'Mona Sans'; src: url('../fonts/mona-sans/WOFF-2/MonaSans-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Mona Sans'; src: url('../fonts/mona-sans/WOFF-2/MonaSans-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
* { margin:0; padding:0; box-sizing:border-box; }
body, html { height: 100%; font-family: 'Mona Sans','Work Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; letter-spacing:.2px }

.layout { display:flex; color:var(--text); background:var(--bg) }
.layout.light{ color:#111827; background:#f3f4f6 }

/* Sidebar */
.sidebar { width:260px; background:var(--bg); flex-shrink:0; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; overflow-y:auto; border-right:1px solid #0B1739; box-shadow: rgba(1, 5, 17, 0.3) 0px 8px 28px 0px }
.layout.light .sidebar{ background:#ffffff; color:#111827; border-right:1px solid #e5e7eb }
.sidebar-brand { padding:22px; font-size:18px; color:var(--text); text-align:left; border-bottom:1px solid #0b1220 }
.layout.light .sidebar-brand{ color:var(--accent-2); border-bottom:1px solid #e5e7eb }
.logo{ display:inline-block; font-weight:700; letter-spacing:.4px; font-size:20px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent }
.nav.nav--sidebar { }
.nav.nav--sidebar .nav__list{ list-style:none; margin-top:20px; padding:0 }
.nav.nav--sidebar .nav__item{ }
.nav.nav--sidebar .nav__link{ display:block; color:var(--text); opacity:.9; text-decoration:none; padding:12px 16px; border-radius:12px; margin:4px 12px; position:relative; transition:background .2s ease,color .2s ease,transform .1s ease }
.nav.nav--sidebar .nav__link:hover{ background:var(--hover); color:var(--text); transform:translateX(2px) }
.nav.nav--sidebar .nav__link.nav__link--active{ background:var(--hover); color:var(--text) }
.nav.nav--sidebar .nav__link.nav__link--active::before{ content:""; position:absolute; left:8px; top:50%; transform:translateY(-50%); width:4px; height:60%; border-radius:999px; background:var(--accent) }
.nav.nav--sidebar .nav__link:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
.sidebar-account { margin-top:auto; padding:20px 18px; border-top:1px solid #0b1220; position:sticky; bottom:0; background:#0f172a }
.sidebar-account a { display:block; color:#cbd5e1; text-decoration:none; padding:12px 14px; border-radius:10px; border:1px solid #1f2937 }
.sidebar-account a:hover { background:#1f2937; color:#fff }
.sidebar-account a:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }


/* Main Content */
.main-content { flex-grow:1; padding:28px; max-height:100vh; overflow-y:auto }
.main-content.with-topbar{ margin-top:56px }
.main-content .header{ display:flex; align-items:center; justify-content:space-between }
.title{ font-size:22px; font-weight:600; color:var(--text) }
.subtitle{ font-size:13px; color:var(--muted) }
.header h1 { margin-bottom:20px; color:var(--accent) }
.layout.light .header h1{ color:#0ea5e9 }

/* Cards */
.cards { display:flex; gap:20px; flex-wrap:wrap }
.card { background:var(--panel); border:1px solid var(--panel-border); border-radius:var(--radius); padding:18px; flex:1; min-width:260px; box-shadow: rgba(1, 5, 17, 0.3) 0px 8px 28px 0px }
.layout.light .card{ background:#ffffff; border:1px solid #e5e7eb }
.card-title { font-size:16px; color:var(--muted); margin-bottom:10px }
.layout.light .card-title{ color:#6b7280 }
.card-value { font-size:26px; font-weight:600; color:var(--text) }
.layout.light .card-value{ color:#111827 }

/* Badges */
.badge{ display:inline-block; padding:4px 10px; font-size:12px; border-radius:999px; border:1px solid var(--panel-border); color:var(--text); background:transparent }
.badge-success{ border-color:#14CA74; color:#14CA74 }
.badge-warning{ border-color:#FDB52A; color:#FDB52A }
.badge-danger{ border-color:#FF5A65; color:#FF5A65 }
.badge-muted{ border-color:var(--panel-border); color:var(--muted) }

/* Progress */
.progress{ width:100%; height:8px; background:var(--panel-border); border-radius:999px; overflow:hidden }
.progress-bar{ height:100%; background:var(--accent); border-radius:999px; width:0; transition: width .3s ease }
.bar-green{ background:#14CA74 }
.bar-yellow{ background:#FDB52A }
.bar-red{ background:#FF5A65 }

/* KPI */
.kpi{ display:flex; align-items:center; justify-content:space-between }
.kpi .value{ font-size:24px; font-weight:600; color:var(--text) }
.sys-card .kpi .value{ font-size:16px }
.sys-card .card-title{ font-size:14px }
.kpi .meta{ font-size:12px; color:var(--muted) }

/* Status list (Dashboard server chips) */
.status-list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px; margin-top:8px }
.status-item{ display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--panel-border); border-radius:12px; background:var(--panel); box-shadow: rgba(1, 5, 17, 0.3) 0px 8px 28px 0px }
.dot{ width:10px; height:10px; border-radius:50%; box-shadow:0 0 0 3px rgba(34,197,94,.15) }
.green{ background:#14CA74 }
.yellow{ background:#FDB52A }
.red{ background:#FF5A65 }

/* Inputs & buttons */
input[type="text"], input[type="password"], input[type="number"], select, textarea { width:100%; padding:10px 12px; background:#141a22; border:1px solid #252c36; border-radius:10px; color:var(--text) }
input[type="text"], input[type="password"], input[type="number"], select, textarea { background: var(--panel); border:1px solid var(--panel-border); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); border-color: var(--accent); box-shadow: 0 0 0 3px rgba(203,60,255,.15) }
button { background:#1b2430; color:var(--text); border:1px solid #28313d; border-radius:10px; padding:8px 12px; cursor:pointer; transition: background .2s ease, box-shadow .2s ease, transform .08s ease }
button:hover { background:#222c39; box-shadow: rgba(1,5,17,.3) 0 6px 18px }
button:active{ transform: translateY(1px) }
button[disabled]{ opacity:.6; cursor:not-allowed; }
.btn-primary{ background: var(--accent); color:#0b1028; border-color: var(--accent) }
.btn-primary:hover{ background:#d062ff; box-shadow: 0 0 0 2px rgba(203,60,255,.25) inset }
.btn-secondary{ background:#1b2430; color:#e5e7eb; border-color:#28313d }
.btn-secondary:hover{ background:#222c39 }

/* Settings layout */
.settings-section{ margin-top:16px; }
.settings-form{ display:flex; flex-direction:column; gap:10px; max-width:720px }
.settings-form label{ color:#cbd5e1; font-size:14px }
.settings-form button{ align-self:flex-start }
.form-inline{ display:flex; gap:8px; align-items:center }

/* Table row hover */
table tr:hover td { background:#19212b }
.table-wrap{ overflow-x:auto }
table{ width:100%; border-collapse:separate; border-spacing:0 8px }
table thead th{ background:#0f172a; color:#cbd5e1; padding:12px; border-radius:8px 8px 0 0; text-align:left; font-weight:600 }
table tbody td{ background:var(--panel); color:#e5e7eb; padding:12px; border-bottom:1px solid var(--panel-border); vertical-align:middle }
table tr{ box-shadow: 0 4px 12px rgba(0,0,0,.25) }
table tbody tr:nth-child(even) td{ background:#0e1a3a }
th.sortable{ cursor:pointer }
th.sort-asc::after{ content:"\25B2"; margin-left:6px; opacity:.7 }
th.sort-desc::after{ content:"\25BC"; margin-left:6px; opacity:.7 }
.pager{ display:flex; gap:8px; align-items:center; margin-top:12px }
.pager .button{ padding:6px 10px }
.sys-table th, .sys-table td{ font-size:13px }
.sys-table td:nth-child(1){ width:120px }
.sys-table td:nth-child(2){ width:160px }
.sys-card .progress{ height:8px }
.button{ display:inline-flex; align-items:center; gap:6px; background:#1b2430; color:var(--text); border:1px solid #28313d; border-radius:10px; padding:8px 12px; text-decoration:none }
.button:hover{ background:#222c39; color:#fff }
.button--sm{ padding:6px 10px; font-size:12px; border-radius:8px }
.actions{ display:flex; gap:8px; align-items:center }

/* Global links */
a{ color:#e5e7eb; }
a:hover{ color:#fff; }
.layout.light a{ color:#111827 }
.layout.light a:hover{ color:var(--accent-2) }

/* Spinner gear and consistent row height */
.gear{display:inline-block;font-size:14px;line-height:16px;animation:spin 1s linear infinite;margin-left:6px;color:#cbd5e1}
@keyframes spin{to{transform:rotate(360deg)}}
table tr td{height:52px}

.topbar{position:fixed;top:0;right:0;left:260px;height:56px;display:flex;justify-content:flex-end;align-items:center;gap:10px;padding:0 16px;background:var(--bg);border-bottom:1px solid #0B1739; box-shadow: rgba(1, 5, 17, 0.3) 0px 8px 28px 0px }
.layout.light .topbar{background:#ffffff;border-bottom:1px solid #e5e7eb}
.topbar__select{display:none}
.topbar__btn{display:inline-flex;align-items:center;gap:8px;background:#1b2430;color:#e5e7eb;border:1px solid #28313d;border-radius:18px;padding:8px 12px;cursor:pointer}
.topbar__btn:hover{background:#222c39;color:#fff}
.topbar__btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.topbar__dropdown{position:absolute;top:56px;right:16px;background:var(--panel);border:1px solid var(--panel-border);border-radius:12px;min-width:180px;box-shadow:0 10px 24px rgba(0,0,0,.35)}
.topbar__item{display:block;padding:10px 12px;color:var(--text);text-decoration:none}
.topbar__item:hover{background:var(--hover)}
.topbar__lang{display:flex;align-items:center;gap:8px}
.topbar__lang .lang-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:16px;background:#1b2430;border:1px solid #28313d;color:#e5e7eb;cursor:pointer}
.topbar__lang .lang-btn.active{box-shadow:0 0 0 2px var(--accent) inset}
.layout.light .topbar__btn{background:#f3f4f6;color:#111827}
.layout.light .topbar__btn:hover{background:#e5e7eb;color:#111827}
@media (max-width: 768px){
  .sidebar{position:fixed;left:0;top:0;height:100vh;transform:translateX(-100%);transition:transform .25s ease;width:240px;z-index:1000}
  .layout.sidebar-open .sidebar{transform:translateX(0)}
  .topbar{left:0}
  .main-content{padding:16px}
}
@media (prefers-reduced-motion: reduce){
  .nav.nav--sidebar .nav__link{ transition:none }
  .sidebar{ transition:none }
}
/* Light theme overrides */
.layout.light .sidebar-account{ background:#ffffff; border-top:1px solid #e5e7eb }
.layout.light .sidebar-nav li a:hover, .layout.light .sidebar-nav li a.active { background:#f3f4f6; color:#111827 }
.layout.light input[type="text"], .layout.light input[type="password"], .layout.light input[type="number"], .layout.light select, .layout.light textarea{ background:#ffffff; border:1px solid #e5e7eb; color:#111827 }
.layout.light input:focus, .layout.light select:focus, .layout.light textarea:focus{ outline:2px solid var(--accent); border-color:var(--accent) }
.layout.light button{ background:#f3f4f6; color:#111827 }
.layout.light button:hover{ background:#e5e7eb; color:#111827 }
.layout.light table tr:hover td{ background:#f3f4f6 }
.layout.light .button{ background:#f3f4f6; color:#111827 }
.layout.light .button:hover{ background:#e5e7eb; color:#111827 }
/* Design-System Variablen */
:root{ --bg:#081028; --panel:#0B1739; --panel-border:#1f2937; --text:#ffffff; --muted:#AEB9E1; --accent:#CB3CFF; --accent-2:#00C2FF; --hover:#0B1739; --radius:16px }
.layout.light:root, .layout.light { --bg:#F7FAFC; --panel:#ffffff; --panel-border:#e5e7eb; --text:#111827; --muted:#7E89AC; --accent:#CB3CFF; --accent-2:#00C2FF; --hover:#e5e7eb; --radius:16px }

/* Accessibility */
.skip-link{position:absolute;left:-999px;top:-999px;background:#1b2430;color:#fff;padding:8px 12px;border-radius:12px;border:1px solid #28313d}
.skip-link:focus{left:12px;top:12px;z-index:2000}

/* Boxes & Utilities */
.api-box{ background:var(--panel); border:1px solid var(--panel-border); border-radius:var(--radius); box-shadow: rgba(1, 5, 17, 0.3) 0px 8px 28px 0px }
.box{ background:var(--panel); border:1px solid var(--panel-border); border-radius:var(--radius); box-shadow: rgba(1, 5, 17, 0.3) 0px 8px 28px 0px }
.shadow-lg{ box-shadow: rgba(1, 5, 17, 0.3) 0px 8px 28px 0px !important }
.api-box code{ background:#0f172a; padding:2px 6px; border-radius:4px }