/* MY.POWER Control Room — shared application foundation */

*, *::before, *::after { box-sizing: border-box; }
html { line-height: 1.2; -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; }

:root {
  --mp-bg: #050505;
  --mp-bg-soft: #0b0b0a;
  --mp-panel: #0b0b0a;
  --mp-surface: #0b0b0a;
  --mp-panel-raised: #11110f;
  --mp-surface-raised: #11110f;
  --mp-surface-hover: #171611;
  --mp-text: #f4f1e8;
  --mp-ivory: #f4f1e8;
  --mp-text-soft: #d5d0c4;
  --mp-muted: #a5a096;
  --mp-muted-subtle: #77736b;
  --mp-gold: #c5a03b;
  --mp-gold-soft: #ead582;
  --mp-bronze: #7f6726;
  --mp-border: rgba(244,241,232,.08);
  --mp-border-strong: rgba(197,160,59,.18);
  --mp-status-positive: #b59a45;
  --mp-status-warning: #d8a83c;
  --mp-status-danger: #9b3f36;
  --mp-status-neutral: #77736b;
  --mp-success: var(--mp-status-positive);
  --mp-warning: var(--mp-status-warning);
  --mp-danger: var(--mp-status-danger);
  --mp-info: var(--mp-bronze);
  --mp-radius-sm: 6px;
  --mp-radius-md: 10px;
  --mp-radius-lg: 14px;
  --mp-shadow-sm: 0 4px 14px rgba(0,0,0,.22);
  --mp-shadow: 0 12px 32px rgba(0,0,0,.30);
  --mp-font: Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --mp-space-1: 4px;
  --mp-space-2: 8px;
  --mp-space-3: 12px;
  --mp-space-4: 16px;
  --mp-space-5: 20px;
  --mp-space-6: 24px;
  --mp-space-8: 32px;

  /* Temporary compatibility aliases for legacy templates. */
  --bg: var(--mp-bg);
  --bg-gradient: linear-gradient(180deg, var(--mp-bg) 0%, var(--mp-bg-soft) 100%);
  --card: var(--mp-surface);
  --surface: var(--mp-surface);
  --surface-2: var(--mp-surface-raised);
  --text: var(--mp-text);
  --muted: var(--mp-muted);
  --accent: var(--mp-gold);
  --accent2: var(--mp-gold-soft);
  --danger: var(--mp-danger);
  --radius: var(--mp-radius-lg);
  --shadow: var(--mp-shadow);
  --shadow-sm: var(--mp-shadow-sm);
  --font: var(--mp-font);
  --pad: var(--mp-space-6);
}

body {
  min-height: 100vh;
  color: var(--mp-text);
  background:
    linear-gradient(180deg, rgba(197,160,59,.04) 0%, transparent 260px),
    var(--mp-bg);
  font-family: var(--mp-font);
}

body.mp-auth {
  display: grid;
  min-height: 100vh;
  background:
    radial-gradient(circle at 50% 0%, rgba(197,160,59,.10), transparent 32%),
    linear-gradient(180deg, #070707 0%, #050505 100%);
}

h1, h2, h3, h4 { margin: 0 0 var(--mp-space-3); color: var(--mp-text); font-weight: 650; letter-spacing: -.01em; }
h1 { font-size: clamp(1.75rem, 2.2vw, 2.35rem); line-height: 1.08; }
h2 { font-size: clamp(1.35rem, 1.8vw, 1.75rem); line-height: 1.15; }
h3 { font-size: 1.1rem; line-height: 1.2; }
h4 { font-size: .95rem; line-height: 1.25; }
p { margin: 0 0 var(--mp-space-3); color: var(--mp-text-soft); line-height: 1.55; }
a { color: var(--mp-gold-soft); text-decoration: none; }
a:hover { color: var(--mp-text); }
:focus-visible { outline: 2px solid var(--mp-gold-soft); outline-offset: 2px; }

.container, .mp-container { width: min(1200px, calc(100% - 32px)); margin: 0 auto; padding: var(--mp-space-5) 0; }
.grid, .mp-grid { display: grid; gap: var(--mp-space-4); }
.grid.auto, .mp-grid-auto { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.mp-brand-wordmark, .brand-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--mp-text);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.mp-brand-wordmark::before, .brand-wordmark::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--mp-gold);
  box-shadow: 0 0 0 4px rgba(197,160,59,.12);
}
.mp-brand-logo {
  display: block;
  width: auto;
  max-width: min(260px, 80vw);
  max-height: 92px;
  object-fit: contain;
}
.mp-brand-logo-auth {
  margin: 0 auto 18px;
  max-width: min(220px, 72vw);
  max-height: 82px;
}
.mp-brand-logo-shell {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.card, .mp-card {
  background: linear-gradient(180deg, var(--mp-surface-raised) 0%, var(--mp-surface) 100%);
  border: 1px solid var(--mp-border);
  border-radius: var(--mp-radius-lg);
  padding: var(--mp-space-6);
  box-shadow: var(--mp-shadow-sm);
}
.card.flat, .mp-card-flat { background: var(--mp-surface); box-shadow: none; }
.mp-metric { display: grid; gap: var(--mp-space-2); min-width: 0; }
.mp-metric-label { color: var(--mp-muted); font-size: .75rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.mp-metric-value { color: var(--mp-text); font-size: clamp(1.55rem, 2.5vw, 2.15rem); font-weight: 750; line-height: 1; font-variant-numeric: tabular-nums; }

.btn, .mp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mp-space-2);
  min-height: 40px;
  padding: 9px 15px;
  border: 1px solid var(--mp-border-strong);
  border-radius: var(--mp-radius-sm);
  background: var(--mp-surface-raised);
  color: var(--mp-text);
  cursor: pointer;
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}
.btn:hover, .mp-btn:hover { background: var(--mp-surface-hover); color: var(--mp-text); }
.btn:active, .mp-btn:active { transform: translateY(1px); }
.btn.primary, .btn.cta, .mp-btn-primary { background: var(--mp-gold); border-color: var(--mp-gold); color: #080806; }
.btn.primary:hover, .btn.cta:hover, .mp-btn-primary:hover { background: var(--mp-gold-soft); border-color: var(--mp-gold-soft); color: #080806; }
.btn.secondary, .mp-btn-secondary { background: transparent; border-color: var(--mp-border-strong); color: var(--mp-text-soft); }
.btn.danger, .mp-btn-danger { background: rgba(225,93,79,.12); border-color: rgba(225,93,79,.38); color: #ffd8d3; }

label { display: block; margin-bottom: var(--mp-space-1); color: var(--mp-muted); font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], select, textarea,
.mp-input, .mp-select {
  width: 100%;
  min-height: 40px;
  padding: 9px 11px;
  border: 1px solid var(--mp-border-strong);
  border-radius: var(--mp-radius-sm);
  background: #0a0a0a;
  color: var(--mp-text);
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
input::placeholder, textarea::placeholder { color: rgba(213,208,196,.48); }
input:focus, select:focus, textarea:focus, .mp-input:focus, .mp-select:focus { border-color: rgba(234,213,130,.72); box-shadow: 0 0 0 3px rgba(197,160,59,.14); }
textarea { resize: vertical; }

.mp-table-wrap { overflow-x: auto; border: 1px solid var(--mp-border); border-radius: var(--mp-radius-lg); background: var(--mp-surface); }
table { width: 100%; border-collapse: collapse; color: var(--mp-text-soft); }
th, td { padding: 11px 13px; border-bottom: 1px solid var(--mp-border); text-align: left; }
th { background: #111; color: var(--mp-text); font-size: .75rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
tbody tr:hover td { background: rgba(255,255,255,.025); }
tbody tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

.mp-badge, .pill, .tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 3px 9px;
  border: 1px solid var(--mp-border);
  border-radius: 999px;
  background: rgba(255,255,255,.035);
  color: var(--mp-text-soft);
  font-size: .78rem;
  font-weight: 700;
}
.mp-badge-success { border-color: rgba(197,160,59,.38); background: rgba(127,103,38,.22); color: var(--mp-gold-soft); }
.mp-badge-warning { border-color: rgba(216,168,60,.40); background: rgba(216,168,60,.12); color: #f1d78f; }
.mp-badge-danger { border-color: rgba(155,63,54,.46); background: rgba(155,63,54,.18); color: #f0c3bc; }
.mp-badge-info { border-color: rgba(127,103,38,.42); background: rgba(127,103,38,.16); color: #e5cf8c; }

.mp-alert { padding: var(--mp-space-3) var(--mp-space-4); border: 1px solid var(--mp-border); border-radius: var(--mp-radius-md); background: rgba(255,255,255,.035); color: var(--mp-text-soft); line-height: 1.45; }
.mp-alert-success { border-color: rgba(197,160,59,.38); background: rgba(127,103,38,.20); color: var(--mp-gold-soft); }
.mp-alert-warning { border-color: rgba(224,184,77,.38); background: rgba(224,184,77,.10); color: #f5e7bd; }
.mp-alert-danger { border-color: rgba(155,63,54,.46); background: rgba(155,63,54,.16); color: #f0c3bc; }
.mp-divider { height: 1px; border: 0; background: var(--mp-border); margin: var(--mp-space-5) 0; }
.mp-empty, .empty-state { padding: var(--mp-space-6); border: 1px dashed var(--mp-border-strong); border-radius: var(--mp-radius-lg); color: var(--mp-muted); text-align: center; }
.muted { color: var(--mp-muted); }
.right { text-align: right; }
.center { text-align: center; }
.mb-0 { margin-bottom: 0; }
.mt-10 { margin-top: 10px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }

.topbar { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; background: var(--mp-surface); border-bottom: 1px solid var(--mp-border); box-shadow: var(--mp-shadow-sm); }
.topbar h1 { margin: 0; font-size: 1.05rem; color: var(--mp-text); }

@media (max-width: 640px) {
  .container, .mp-container { width: min(100% - 24px, 1200px); padding: var(--mp-space-4) 0; }
  .card, .mp-card { padding: var(--mp-space-5); }
  th, td { padding: 9px 10px; }
}