/* ============================================================
   PidChecker Kundenportal – Dark SAP Komponenten
   Nutzt die --sap-* Variablen aus pc.net.css
   ============================================================ */

/* Badges im Top-Nav */
.pc-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 14px;
  border: 1px solid var(--sap-border);
  background: var(--sap-surface);
  color: var(--sap-text);
  white-space: nowrap;
}
.pc-badge .material-icons { font-size: 15px; }
.pc-badge-free      { border-color: var(--sap-info);    color: var(--sap-info); }
.pc-badge-credits   { border-color: var(--sap-primary); color: var(--sap-primary); }
.pc-badge-unlimited { border-color: var(--sap-success); color: var(--sap-success); }

.pc-btn-sm { padding: 5px 12px !important; font-size: 12px !important; }

/* Schmaler, zentrierter Auth-Bereich */
.pc-auth-wrap {
  max-width: 420px;
  margin: 40px auto;
}
.pc-auth-card {
  background: var(--sap-surface);
  border: 1px solid var(--sap-border);
  border-radius: 8px;
  box-shadow: var(--sap-shadow-elevated);
  overflow: hidden;
}
.pc-auth-head {
  padding: 22px 24px 6px;
  text-align: center;
}
.pc-auth-head h2 {
  margin: 0 0 4px;
  font-size: 20px;
  color: var(--sap-text);
}
.pc-auth-head p {
  margin: 0;
  font-size: 13px;
  color: var(--sap-text-secondary);
}
.pc-auth-body { padding: 18px 24px 24px; }

.pc-field { margin-bottom: 14px; }
.pc-field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--sap-text-secondary);
  margin-bottom: 6px;
}
.pc-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  font-size: 14px;
  color: var(--sap-text);
  background: var(--sap-background);
  border: 1px solid var(--sap-border);
  border-radius: 6px;
  transition: border-color .15s, box-shadow .15s;
}
.pc-input:focus {
  outline: none;
  border-color: var(--sap-primary);
  box-shadow: 0 0 0 2px rgba(255,193,7,.18);
}
.pc-btn-block { width: 100%; justify-content: center; margin-top: 4px; }

.pc-auth-foot {
  padding: 14px 24px;
  border-top: 1px solid var(--sap-border);
  text-align: center;
  font-size: 13px;
  color: var(--sap-text-secondary);
  background: var(--sap-surface-hover);
}
.pc-auth-foot a { color: var(--sap-primary); text-decoration: none; font-weight: 600; }
.pc-auth-foot a:hover { text-decoration: underline; }

/* Hinweise / Alerts */
.pc-alert {
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 13px;
  margin-bottom: 14px;
  border: 1px solid transparent;
}
.pc-alert-error   { background: rgba(244,67,54,.12);  border-color: var(--sap-error);   color: var(--sap-error); }
.pc-alert-success { background: rgba(76,175,80,.12);  border-color: var(--sap-success); color: var(--sap-success); }
.pc-alert-info    { background: rgba(33,150,243,.12); border-color: var(--sap-info);    color: var(--sap-info); }

/* Free-Tier-Banner über dem Checker */
.pc-tier-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  margin-bottom: 16px;
  border-radius: 8px;
  border: 1px solid var(--sap-border);
  background: var(--sap-surface);
}
.pc-tier-banner .pc-tier-info { font-size: 13px; color: var(--sap-text-secondary); }
.pc-tier-banner .pc-tier-info strong { color: var(--sap-text); }
.pc-tier-banner .pc-tier-actions { display: flex; gap: 8px; align-items: center; }

/* Dashboard */
.pc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}
.pc-stat {
  background: var(--sap-surface);
  border: 1px solid var(--sap-border);
  border-left: 4px solid var(--sap-primary);
  border-radius: 8px;
  padding: 16px 18px;
}
.pc-stat .pc-stat-label { font-size: 12px; color: var(--sap-text-secondary); text-transform: uppercase; letter-spacing: .04em; }
.pc-stat .pc-stat-value { font-size: 26px; font-weight: 700; color: var(--sap-text); margin-top: 4px; }
.pc-stat .pc-stat-sub   { font-size: 12px; color: var(--sap-text-secondary); margin-top: 2px; }
.pc-stat.is-success { border-left-color: var(--sap-success); }
.pc-stat.is-info    { border-left-color: var(--sap-info); }

/* API-Key-Box */
.pc-keybox {
  display: flex; gap: 8px; align-items: center;
  background: var(--sap-background);
  border: 1px solid var(--sap-border);
  border-radius: 6px;
  padding: 8px 10px;
}
.pc-keybox code {
  flex: 1; font-family: 'Courier New', monospace; font-size: 13px;
  color: var(--sap-primary); word-break: break-all;
}

/* Pricing-Karten */
.pc-pricing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}
.pc-price-card {
  position: relative;
  background: var(--sap-surface);
  border: 1px solid var(--sap-border);
  border-radius: 10px;
  padding: 18px;
  display: flex; flex-direction: column;
}
.pc-price-card.is-featured { border-color: var(--sap-primary); box-shadow: 0 0 0 1px var(--sap-primary) inset; }
.pc-price-card .pc-price-name { font-size: 14px; font-weight: 700; color: var(--sap-text); }
.pc-price-card .pc-price-amount { font-size: 28px; font-weight: 800; color: var(--sap-primary); margin: 8px 0 2px; }
.pc-price-card .pc-price-meta { font-size: 12px; color: var(--sap-text-secondary); flex: 1; }
.pc-price-card .pc-price-badge {
  position: absolute; top: 12px; right: 12px;
  font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 10px;
  background: var(--sap-success); color: #fff;
}
.pc-price-card ul { list-style: none; padding: 0; margin: 10px 0; }
.pc-price-card li { font-size: 12px; color: var(--sap-text-secondary); padding: 3px 0; }
.pc-price-card li .material-icons { font-size: 14px; vertical-align: middle; color: var(--sap-success); }

.pc-muted { color: var(--sap-text-secondary); font-size: 12px; }
.pc-section-title { font-size: 15px; font-weight: 700; color: var(--sap-text); margin: 6px 0 12px; }

/* Code-Blöcke (API-Portal & API-Hilfe) */
.pc-code {
  position: relative;
  background: var(--sap-background);
  border: 1px solid var(--sap-border);
  border-radius: 6px;
  padding: 12px 14px;
  margin: 6px 0;
  overflow-x: auto;
}
.pc-code pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--sap-text);
}
.pc-code .pc-copy {
  position: absolute; top: 8px; right: 8px;
  background: var(--sap-primary); color: #000; border: none;
  border-radius: 4px; font-size: 11px; font-weight: 600;
  padding: 3px 8px; cursor: pointer;
}
.pc-doc-table { width: 100%; border-collapse: collapse; margin: 6px 0; }
.pc-doc-table th, .pc-doc-table td {
  text-align: left; padding: 7px 10px; font-size: 12.5px;
  border-bottom: 1px solid var(--sap-border); color: var(--sap-text);
}
.pc-doc-table th { color: var(--sap-text-secondary); font-weight: 600; }
.pc-doc-table code { color: var(--sap-primary); font-family: 'Consolas','Monaco',monospace; }
.pc-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.pc-tab {
  padding: 6px 12px; font-size: 12px; font-weight: 600; cursor: pointer;
  border: 1px solid var(--sap-border); border-radius: 6px;
  background: var(--sap-surface); color: var(--sap-text-secondary);
}
.pc-tab.active { border-color: var(--sap-primary); color: var(--sap-primary); }

/* ============================================================
   PidChecker Design v2 – tieferes Dark, Hero, polierte Komponenten
   (gilt für alle Seiten, die pidaccount.css laden)
   ============================================================ */
body:not(.light-mode) {
  --sap-background: #0d0f14;
  --sap-surface: #15181f;
  --sap-surface-hover: #1b1f28;
  --sap-border: #262a33;
  --sap-text: #e6e8ee;
  --sap-text-primary: #e6e8ee;
  --sap-text-secondary: #9aa1ad;
}
:root { --pc-teal: #1fc8db; --pc-green: #2ecc71; }

body { background: var(--sap-background); color: var(--sap-text); -webkit-font-smoothing: antialiased; }

/* Header sticky + blur (themenbewusst) */
.header { position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--sap-border); }
body:not(.light-mode) .header { background: rgba(13,15,20,.85); }
body.light-mode .header { background: rgba(255,255,255,.9); }
.logo { display: inline-flex; align-items: center; gap: 8px; }
.logo::before { content: ''; width: 14px; height: 14px; border-radius: 4px;
  background: linear-gradient(135deg, var(--sap-primary), #ff7a18); box-shadow: 0 0 10px rgba(255,179,0,.5); }
.top-nav-link-active { color: var(--sap-primary) !important; }

/* Buttons abgerundet */
.btn { border-radius: 8px; font-weight: 600; }
.btn-primary { background: var(--sap-primary); color: #1a1200; border: 1px solid var(--sap-primary); font-weight: 700; }
.btn-primary:hover { background: var(--sap-primary-hover); }
.btn-secondary { background: transparent; color: var(--sap-text); border: 1px solid var(--sap-border); }
.btn-secondary:hover { background: var(--sap-surface-hover); }

/* Karten */
.card { background: var(--sap-surface); border: 1px solid var(--sap-border); border-radius: 14px;
  box-shadow: 0 1px 0 rgba(255,255,255,.02), 0 10px 30px rgba(0,0,0,.25); }

/* Hero */
.pc-hero { position: relative; overflow: hidden; border-radius: 16px; border: 1px solid var(--sap-border);
  background: linear-gradient(135deg, #14161d 0%, #161a26 55%, #11202b 100%); padding: 28px 30px; margin-bottom: 16px; }
.pc-hero::after { content: ''; position: absolute; right: -30px; top: 50%; transform: translateY(-50%);
  width: 240px; height: 240px; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(31,200,219,.30), rgba(31,200,219,0) 70%); pointer-events: none; }
.pc-hero h1 { margin: 0 0 8px; font-size: 30px; color: #fff; letter-spacing: -.01em; }
.pc-hero h1 .accent { color: var(--sap-primary); }
.pc-hero p { margin: 0; max-width: 680px; color: var(--sap-text-secondary); font-size: 14px; position: relative; z-index: 1; }
.pc-hero-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; position: relative; z-index: 1; }
.pc-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
  padding: 5px 11px; border-radius: 20px; border: 1px solid var(--sap-border);
  background: rgba(255,255,255,.03); color: var(--sap-text-secondary); text-decoration: none; }
.pc-chip .material-icons { font-size: 15px; }
.pc-chip.is-green { color: var(--pc-green); border-color: rgba(46,204,113,.4); }
.pc-chip.is-teal  { color: var(--pc-teal);  border-color: rgba(31,200,219,.4); }
.pc-hero-emblem { position: absolute; right: 34px; top: 50%; transform: translateY(-50%);
  width: 84px; height: 84px; border-radius: 22px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #16323a, #0e2730); border: 1px solid rgba(31,200,219,.4);
  box-shadow: 0 0 30px rgba(31,200,219,.35); z-index: 1; }
.pc-hero-emblem .material-icons { font-size: 42px; color: var(--pc-teal); }
@media (max-width: 680px) { .pc-hero-emblem { display: none; } .pc-hero h1 { font-size: 24px; } }

/* Pricing v2 */
.pc-price-card { border-radius: 14px; transition: transform .15s, border-color .15s, box-shadow .15s; }
.pc-price-card:hover { transform: translateY(-3px); border-color: var(--sap-primary); box-shadow: 0 12px 30px rgba(0,0,0,.35); }
.pc-price-card.is-featured { border-color: var(--pc-green); box-shadow: 0 0 0 1px var(--pc-green) inset, 0 0 30px rgba(46,204,113,.15); }
.pc-price-card .pc-price-amount { color: var(--sap-primary); }
.pc-price-badge { background: var(--pc-green); }
.pc-price-card li .material-icons { color: var(--pc-green); }

/* Badges */
.pc-badge-free      { border-color: rgba(31,200,219,.5); color: var(--pc-teal); }
.pc-badge-unlimited { border-color: rgba(46,204,113,.5); color: var(--pc-green); }

/* Schnellstart 2-spaltig */
.pc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
@media (max-width: 760px) { .pc-cols { grid-template-columns: 1fr; } }

/* Code v2 */
.pc-code { background: #0b0d12; border-color: #23262f; }
.pc-code pre { color: #cdd3df; }

/* Footer */
.pc-footer { text-align: center; color: var(--sap-text-secondary); font-size: 12.5px;
  padding: 22px 12px 30px; margin-top: 14px; border-top: 1px solid var(--sap-border); }
.pc-footer a { color: var(--sap-primary); text-decoration: none; }
.pc-footer a:hover { text-decoration: underline; }

/* ---- Fixes (Buttons/Nav) ---- */
/* Aktiver Menüpunkt: nur amber Text statt gefülltem Block */
.top-nav-link { text-decoration: none; }
.top-nav-link-active {
  background: transparent !important;
  color: var(--sap-primary) !important;
  text-decoration: none !important;
  box-shadow: none !important;
  border: none !important;
  font-weight: 700;
}
/* Button-Links nicht unterstreichen + sauber zentrieren */
.btn, a.btn { text-decoration: none !important; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
a.btn:hover { text-decoration: none !important; }