/* Complete unified dark theme for SR Dashboard (updated: stronger header styling)
   Replace your existing styles.css with this file.
   After uploading: clear browser cache (Ctrl+F5) or open an Incognito window.
*/

/* ========== Tokens ========== */
:root{
  --bg:#020304;
  --panel-grad: linear-gradient(180deg,#0f1315,#08090a);
  --card-bg:#0c0f11;
  --muted:#9fbfd6;
  --text:#e6eef6;
  --text-dim:#98b5c0;
  --accent:#66fff0;
  --accent2:#ff9a55;
  --danger:#ff6b6b;
  --success:#2fb66d;
  --border: rgba(255,255,255,0.04);
  --glass: rgba(255,255,255,0.02);
  --radius:10px;
  --shadow-lg: 0 18px 50px rgba(0,0,0,0.75);
  --shadow-sm: 0 8px 22px rgba(0,0,0,0.55);
}

/* ========== Global reset & background ========== */
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:linear-gradient(180deg,var(--bg),#020203) fixed !important;color:var(--text) !important;font-family:Inter, Rajdhani, Arial, sans-serif;-webkit-font-smoothing:antialiased}

/* Ensure main structural elements are dark */
#sidebar,#main-panel,.content-header,.content-body,.card,.login-container,
.preview-frame-large,.preview-frame,.overlay-card-full,.overlay-card-half,
.overlay-links-container,.user-table,.table,.leaderboard-table-compact {
  background: var(--panel-grad) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* ========== Sidebar ========== */
.dashboard-wrapper{display:flex;min-height:100vh}
#sidebar{width:240px;padding:14px;background:linear-gradient(180deg,#0d1112,#071013) !important;border-right:1px solid rgba(255,255,255,0.02) !important;color:var(--muted)}
.sidebar-header h2{color:var(--accent);margin:0 0 12px 0;font-weight:900}

/* Sidebar links */
#sidebar ul li a{display:flex;align-items:center;gap:10px;padding:10px;border-radius:8px;color:var(--text-dim) !important;text-decoration:none}
#sidebar ul li a:hover{background:rgba(102,255,240,0.03) !important;color:var(--accent) !important}
#sidebar ul li.active a{background:linear-gradient(90deg,rgba(102,255,240,0.06),rgba(255,255,255,0.01)) !important;color:var(--accent) !important;font-weight:800}

/* ========== Main panel & header ========== */
#main-panel{flex:1;padding:18px;overflow:auto;background:transparent !important}
.content-header{
  padding:14px 18px;
  border-bottom:1px solid rgba(255,255,255,0.02);
  position:sticky;
  top:0;
  z-index:6;
  background: linear-gradient(180deg,#0c1a1a,#071012) !important;
  color: var(--text) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.45) !important;
}
.content-header h1{margin:0;color:var(--accent)!important;font-weight:900;letter-spacing:0.6px}

/* ========== Cards ========== */
/* Card base */
.card{
  border-radius:var(--radius) !important;
  overflow:visible;
  margin-bottom:16px !important;
  background: linear-gradient(180deg,#0f1315,#08090a) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* Stronger, more readable card headers */
.card-header{
  padding: 12px 16px !important;
  font-weight:900 !important;
  color: var(--text) !important; /* use bright text */
  background: linear-gradient(180deg,#071214,#0b1416) !important; /* slightly darker header */
  border-bottom: 1px solid rgba(255,255,255,0.03) !important;
  display:flex;
  align-items:center;
  gap:12px;
  font-size: 1rem !important;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,0.01) !important;
}

/* If you prefer accented titles, you can use: color: var(--accent) !important; */

/* Card body */
.card-body{padding:14px;color:var(--text-dim)!important}

/* ========== Forms / Inputs ==========
   (ensure placeholders and readonly inputs are readable) */
label{color:var(--muted)!important;font-weight:700;display:block;margin-bottom:6px}
input,textarea,select,.overlay-link-input,.overlay-links-container input{
  background: rgba(255,255,255,0.02) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  padding: 10px !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}
input::placeholder,textarea::placeholder{color:rgba(230,245,246,0.28) !important;-webkit-text-fill-color:rgba(230,245,246,0.28) !important}

/* readonly/disabled inputs (API tokens, links) */
input[readonly],input[disabled],.overlay-link-input[readonly]{
  background: rgba(12,14,15,0.98) !important;
  color: var(--text) !important;
  border: 1px solid rgba(255,255,255,0.03) !important;
}

/* input groups */
.input-group{display:flex;gap:8px;align-items:center}
.input-group input{border-top-right-radius:0 !important;border-bottom-right-radius:0 !important}
.input-group button{border-top-left-radius:0 !important;border-bottom-left-radius:0 !important}

/* ========== Buttons ========== */
button,.btn,.copy-btn,.copy-btn-small{
  background: linear-gradient(180deg,#0f2422,#071615) !important;
  color: var(--text) !important;
  border: 1px solid rgba(255,255,255,0.03) !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  font-weight:700 !important;
}
button:hover,.btn:hover{transform:translateY(-1px) !important;filter:brightness(1.04) !important}

/* accents */
.btn-primary{background:linear-gradient(180deg,var(--accent),#0aa7b3) !important;color:#071217 !important;border:none}
.btn-secondary{background:linear-gradient(180deg,var(--accent2),#ff7b3a) !important;color:#071217 !important;border:none}
.btn-success{background:linear-gradient(180deg,#4fd07f,#2fb66d) !important;color:#071217 !important;border:none}
.btn-danger{background:linear-gradient(180deg,#ff7b7b,#ff4d4d) !important;color:#071217 !important;border:none}
.copy-btn,.copy-btn-small{background:linear-gradient(180deg,var(--accent),#0fb8c8) !important;color:#071217 !important;border:none;font-weight:900}

/* ========== Iframes preview ========== */
.preview-frame-large,.preview-frame{background:#030405 !important;border-radius:8px !important;border:1px solid rgba(255,255,255,0.03) !important;color:var(--text) !important;height:160px !important;display:block !important}

/* ========== Tables ========== */
.user-table,.leaderboard-table-compact,table{width:100% !important;border-collapse:collapse !important;color:var(--text) !important;background:transparent !important}
.user-table th,.user-table td,.leaderboard-table-compact th,.leaderboard-table-compact td{padding:10px !important;border-bottom:1px solid rgba(255,255,255,0.02) !important;text-align:center;color:var(--text) !important}
.user-table th,.leaderboard-table-compact th{color:var(--muted) !important}

/* ========== Feedback boxes ========== */
.feedback,.pw-feedback{display:block !important;padding:10px !important;border-radius:8px !important;background:rgba(255,255,255,0.02) !important;color:var(--text) !important;border:1px solid rgba(255,255,255,0.02) !important}
.pw-feedback.success{background:rgba(90,255,200,0.08) !important;color:#043a32 !important;border-color:rgba(102,255,240,0.12) !important}
.pw-feedback.error{background:rgba(255,120,120,0.06) !important;color:#4a0a0a !important;border-color:rgba(255,154,85,0.08) !important}

/* ========== API/StreamElements specific ========== */
#api-token-field,#streamelements-url-rebirth,#streamelements-url-verdansk,#streamelements-anleitung-box input,#streamelements-anleitung-box textarea,#streamelements-anleitung-box,.overlay-link-input,input[readonly],input[disabled]{
  background: rgba(12,14,15,0.98) !important;
  color: var(--text) !important;
  border: 1px solid rgba(255,255,255,0.03) !important;
}
#streamelements-anleitung-box input::placeholder,input[readonly]::placeholder{color:rgba(230,245,246,0.28) !important}
#api-token-field + button,#streamelements-anleitung-box .copy-btn-small,#lbRefresh,#lbExport{
  background: linear-gradient(180deg,var(--accent),#0fb8c8) !important;color:#071217 !important;border:none !important;font-weight:900 !important;box-shadow:0 6px 18px rgba(11,167,180,0.12) !important;
}

/* ========== Hard overrides for pale panels ========== */
/* target elements with inline white-ish backgrounds */
#main-panel *[style*="rgba(244"],#main-panel *[style*="rgba(250"],#main-panel *[style*="background: white"],#main-panel *[style*="#fafafa"],#main-panel *[style*="#f7f7f7"],#main-panel *[style*="#fff"]{
  background: transparent !important;
  color: var(--text) !important;
}

/* Force Daily SR reset section dark */
.daily-sr-reset-section,.card-body > .daily-sr-reset-section,.content-body .daily-sr-reset-section{
  background: linear-gradient(180deg,#0d1112,#080909) !important;
  color: var(--text-dim) !important;
  border: 1px solid rgba(255,255,255,0.03) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.45) !important;
  padding: 12px !important;
  border-radius: 8px !important;
}
.daily-sr-reset-section .btn,.daily-sr-reset-section button{background:linear-gradient(180deg,var(--accent),#0fb8c8) !important;color:#071217 !important;border:none !important;font-weight:800}

/* ========== Final fallback: streamelements box ========== */
:root{--fix-panel-bg:linear-gradient(180deg,#0d1112,#080909);--fix-panel-border:rgba(255,255,255,0.04)}
#streamelements-anleitung-box,#streamelements-anleitung-box *{background:transparent !important;color:var(--text) !important;border-color:var(--fix-panel-border) !important;box-shadow:none !important}
#streamelements-anleitung-box,#streamelements-anleitung-box > div{background:var(--fix-panel-bg) !important;color:var(--text) !important;border:1px solid var(--fix-panel-border) !important;padding:12px !important;border-radius:8px !important}
#streamelements-anleitung-box code,#streamelements-anleitung-box pre{background:rgba(0,0,0,0.6) !important;color:var(--text) !important;padding:6px 10px !important;border-radius:6px !important}

/* ========== Responsive ========== */
@media(max-width:1100px){#sidebar{display:none !important}.preview-frame-large,.preview-frame{height:140px !important}}
/* ========== End ========== */