/* ============================================================
   Quiz App BD — Dashboard-specific styles
   Builds on styles.css for the Material 3 emerald/blue theme.
   ============================================================ */

/* ---------- Header pill ---------- */
.dash-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  background: var(--emerald-50);
  color: var(--emerald-700);
  border: 1px solid var(--emerald-200);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.dash-pill.is-ok {
  background: var(--emerald-50);
  color: var(--emerald-700);
  border-color: var(--emerald-200);
}
.dash-pill.is-off {
  background: #FEE2E2;
  color: #991B1B;
  border-color: #FECACA;
}
.dash-pill .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--emerald-500);
  box-shadow: 0 0 0 3px rgba(16,185,129,0.18);
}
.dash-pill.is-off .dot {
  background: var(--red-500);
  box-shadow: 0 0 0 3px rgba(239,68,68,0.18);
}

/* ---------- Hero ---------- */
.dash-hero {
  position: relative;
  padding: clamp(56px, 8vw, 96px) 0 clamp(40px, 6vw, 72px);
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(16,185,129,0.16), transparent 60%),
    radial-gradient(900px 500px at -5% 30%, rgba(37,99,235,0.16), transparent 60%),
    var(--bg);
  overflow: hidden;
}
.dash-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}
.dash-hero-copy { max-width: 60ch; }
.dash-hero-title {
  margin: 14px 0 12px;
  font-size: clamp(30px, 4.6vw, 50px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.1;
}
.dash-hero-sub {
  font-size: clamp(15px, 1.5vw, 17px);
  color: var(--text-muted);
  line-height: 1.6;
}
.dash-hero-sub code {
  background: var(--slate-100);
  color: var(--slate-800);
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 13.5px;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
}

@media (max-width: 920px) {
  .dash-hero-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ---------- Premium hero card ---------- */
.premium-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 22px;
  padding: 28px 28px;
  border-radius: var(--radius-xl);
  background: var(--grad-primary);
  color: #fff;
  box-shadow: 0 30px 60px -10px rgba(16,185,129,0.45),
              0 18px 36px -12px rgba(37,99,235,0.30);
  overflow: hidden;
  isolation: isolate;
}
.premium-card::after {
  content: '';
  position: absolute;
  inset: -40% -10% auto auto;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(255,255,255,0.25), transparent 65%);
  filter: blur(20px);
  z-index: -1;
}
.premium-card-bg {
  position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(255,255,255,0.20), transparent 60%),
    var(--grad-primary);
}
.premium-card-icon {
  width: 64px; height: 64px;
  border-radius: 22px;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.30);
  display: flex; align-items: center; justify-content: center;
  font-size: 32px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.18);
}
.premium-card-meta h2 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-top: 8px;
}
.premium-card-sub {
  margin-top: 6px;
  font-size: 14.5px;
  color: rgba(255,255,255,0.92);
  font-weight: 600;
}

/* ---------- Badges ---------- */
.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
}
.badge-emerald {
  background: rgba(255,255,255,0.18);
  color: #fff;
  border-color: rgba(255,255,255,0.30);
}
.premium-card-meta .badge-emerald {
  background: rgba(255,255,255,0.20);
  color: #fff;
}
.badge-gold {
  background: linear-gradient(135deg, #FBBF24 0%, #F59E0B 100%);
  color: #1F2937;
  border-color: rgba(255,255,255,0.4);
  box-shadow: 0 4px 12px rgba(245,158,11,0.40);
}
.dash-card .badge-emerald {
  background: var(--emerald-50);
  color: var(--emerald-700);
  border-color: var(--emerald-200);
}

/* ---------- Dashboard grid ---------- */
.dash-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-areas:
    "profile apk"
    "actions actions";
  gap: 22px;
}
.dash-card:nth-child(1) { grid-area: profile; }
.dash-card:nth-child(2) { grid-area: apk; }
.dash-card:nth-child(3) { grid-area: actions; }

@media (max-width: 920px) {
  .dash-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "profile"
      "apk"
      "actions";
  }
}

.dash-card {
  padding: 26px 26px 24px;
  border-radius: var(--radius-xl);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.dash-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
}
.dash-card-head h3 {
  font-size: 18px;
  font-weight: 800;
  color: var(--slate-900);
}
.dash-card-head p {
  margin-top: 2px;
  font-size: 13.5px;
  color: var(--text-soft);
  font-weight: 600;
}
.dash-card-icon {
  width: 46px; height: 46px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.dash-card-icon svg { width: 22px; height: 22px; }
.dash-card-icon-profile { background: var(--emerald-50); color: var(--emerald-700); }
.dash-card-icon-apk     { background: var(--blue-50);    color: var(--blue-700); }
.dash-card-icon-actions { background: #FEF3C7; color: #B45309; }

/* ---------- Info list ----------
   The previous implementation laid label + value out side-by-side on
   a single row (`grid-template-columns: 1fr auto`). On mobile widths
   the label often collapsed to a single uppercase tag that read like
   a stray badge, and users reported they couldn't tell which row
   was "Verified On" vs "Source". We now stack the label above the
   value so the relationship is always unambiguous, regardless of
   viewport width.
*/
.info-list {
  display: grid;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.info-list li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(248,250,252,0.65), rgba(241,245,249,0.45));
  border: 1px solid var(--border);
  min-width: 0;
}
.info-label {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.2;
  white-space: normal;
  word-break: break-word;
}
.info-value {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--slate-900);
  text-align: left;
  line-height: 1.35;
  white-space: normal;
  word-break: break-word;
  max-width: 100%;
}
.info-value.mono {
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 13.5px;
}

/* ---------- APK metadata + note ---------- */
.apk-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.apk-meta-item {
  padding: 14px 12px;
  border-radius: 14px;
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  display: grid;
  gap: 4px;
}
.apk-meta-item .info-label { color: var(--blue-700); }
.apk-meta-item .info-value { color: var(--slate-900); text-align: left; font-size: 14.5px; }

@media (max-width: 480px) {
  .apk-meta { grid-template-columns: 1fr; }
}

.dash-note {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--text-soft);
  font-weight: 600;
  line-height: 1.55;
}

.btn-lg.is-disabled,
.btn.is-disabled {
  pointer-events: none;
  opacity: 0.55;
  filter: grayscale(0.4);
}

/* ---------- Actions stack ---------- */
.action-stack {
  display: grid;
  gap: 10px;
}

.dash-status {
  margin-top: 8px;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 600;
}
.dash-status-info  { background: var(--blue-50);    color: var(--blue-700);    border: 1px solid var(--blue-100); }
.dash-status-warn  { background: #FEF3C7;            color: #92400E;            border: 1px solid #FDE68A; }
.dash-status-error { background: #FEE2E2;            color: #991B1B;            border: 1px solid #FECACA; }
.dash-status-ok    { background: var(--emerald-50);  color: var(--emerald-700);  border: 1px solid var(--emerald-200); }

/* ---------- Confirm modal ---------- */
.dash-modal {
  border: 0;
  padding: 0;
  background: transparent;
}
.dash-modal::backdrop {
  background: rgba(15,23,42,0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.dash-modal-form {
  background: #fff;
  padding: 28px;
  border-radius: var(--radius-xl);
  max-width: 460px;
  width: calc(100vw - 40px);
  box-shadow: var(--shadow-lg);
  text-align: center;
}
.dash-modal-form h3 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.dash-modal-form p {
  font-size: 14.5px;
  color: var(--text-muted);
  margin-bottom: 22px;
}
.dash-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ---------- Misc ---------- */
@media (max-width: 760px) {
  .premium-card {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
  }
  .premium-card-icon { margin: 0 auto; }
}