/* garbage.css
   Bygger vidare på assets/home.css
   och håller sig så nära huvudsidans uttryck som möjligt.
*/

:root{
  --gc-page-max: 1100px;

  /* Mer lika huvudsidan */
  --gc-bg: #0b0f14;
  --gc-border: #2a2a2a;
  --gc-border-soft: #242424;
  --gc-text: #edf3f8;
  --gc-muted: #b7b7b7;
  --gc-accent: #9fd4ff;

  --gc-good-bg: rgba(159,212,255,.14);
  --gc-good-border: rgba(159,212,255,.28);
}

html, body{
  background: var(--gc-bg);
  color: var(--gc-text);
}

.gc-page{
  max-width: var(--gc-page-max);
  margin: 0 auto;
  padding: 24px;
}

.gc-page,
.gc-page p,
.gc-page span,
.gc-page div,
.gc-page td,
.gc-page th,
.gc-page strong,
.gc-page h1,
.gc-page h2,
.gc-page h3{
  color: var(--gc-text);
}

.gc-page a{
  color: var(--gc-accent);
}

.hero{
  margin-bottom: 12px;
}

/* Låt hero följa huvudsidans tile-stil mycket närmare */
.hero.tile{
  border-color: var(--gc-border);
  background: linear-gradient(180deg, rgba(16,16,16,1), rgba(12,12,12,1));
  padding: 20px 20px 18px;
}

.hero h1{
  margin: 0;
  font-size: clamp(2rem, 3vw, 2.8rem);
  line-height: 1.05;
  letter-spacing: -.02em;
}

.gc-subtitle{
  margin: 10px 0 0;
  color: var(--gc-muted);
  font-size: 1.02rem;
}

.gc-links{
  margin-top: 14px;
}

.gc-links a{
  text-decoration: none;
}

.gc-links a:hover{
  text-decoration: underline;
}

.gc-top-grid{
  margin-top: 0;
}

/* Samma grundkänsla som på huvudsidan */
.tile{
  border-color: var(--gc-border);
  background: linear-gradient(180deg, rgba(16,16,16,1), rgba(12,12,12,1));
}

.tile:hover{
  border-color: #6b6b6b;
  background: linear-gradient(180deg, rgba(20,20,20,1), rgba(12,12,12,1));
}

.tile-title{
  color: var(--gc-muted);
  font-size: .88rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.gc-value{
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  font-weight: 800;
  line-height: 1.15;
  color: #fff;
  min-height: 2.3em;
}

.gc-status-tile,
.gc-table-tile{
  margin-top: 12px;
}

.kv{
  margin-top: 10px;
}

.kv-row{
  border-top-color: var(--gc-border-soft);
  padding-top: 8px;
}

.kv-row span{
  color: var(--gc-muted);
}

.kv-row strong{
  color: #fff;
  text-align: right;
}

.gc-table-header{
  margin-bottom: 10px;
}

.gc-note{
  margin: 0 0 12px;
  color: var(--gc-muted);
}

/* Tabellen får vara specialanpassad, men fortfarande i samma stilfamilj */
.gc-table-wrap{
  overflow-x: auto;
  border: 1px solid var(--gc-border);
  border-radius: 14px;
  background: #0f0f0f;
}

.gc-table{
  width: 100%;
  border-collapse: collapse;
  background: transparent;
}

.gc-table thead th{
  padding: 12px 14px;
  text-align: left;
  font-weight: 700;
  color: #fff;
  background: rgba(255,255,255,.03);
  border-bottom: 1px solid var(--gc-border);
}

.gc-table tbody td{
  padding: 12px 14px;
  text-align: left;
  color: #dfe7ee;
  border-top: 1px solid var(--gc-border-soft);
}

.gc-table tbody tr:nth-child(even) td{
  background: rgba(255,255,255,.01);
}

.gc-table tbody tr:hover td{
  background: rgba(255,255,255,.03);
}

.gc-message{
  margin-top: 12px;
  color: var(--gc-muted);
}

.gc-badge{
  display: inline-block;
  margin-left: 8px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--gc-good-border);
  background: var(--gc-good-bg);
  color: #dff3ff;
  font-size: .78rem;
  font-weight: 700;
  vertical-align: middle;
}

@media (max-width: 900px){
  .gc-value{
    font-size: 1.5rem;
  }
}

@media (max-width: 520px){
  .gc-page{
    padding: 16px;
  }

  .hero.tile,
  .tile{
    padding: 14px;
  }

  .gc-table thead th,
  .gc-table tbody td{
    padding: 10px 12px;
  }
}