/* ==============
   QR Admin – fælles CSS
   ============== */

/* Basalt */
:root {
  color-scheme: light dark;
  /* Chart color variables */
  --chart-bg: #fafafa;
  --chart-border: #e6e6e6;
  --chart-line: #60a5fa;   /* blue-400 */
  --chart-accent: #10b981; /* emerald-500 */
  --chart-text: #4b5563;   /* gray-600 */
  /* Tooltip */
  --tip-bg: #111827;       /* gray-900 */
  --tip-text: #f9fafb;     /* gray-50 */
}
html, body { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; }
body { margin: 80px; }
* { box-sizing: border-box; }

/* Header / nav */
header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
nav a { margin-right: 12px; text-decoration: none; color: inherit; }
nav a:hover { text-decoration: underline; }

/* Sørg for at kontroller arver fonten */
input, select, textarea, button, a { font-family: inherit; }

/* Kort / Cards */
.card {
  border: 1px solid #ddd; border-radius: 12px; padding: 16px; background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}
.card h3 { margin: 0 0 12px 0; font-size: 16px; }

/* Generelle helpers */
.help { font-size: 12px; color: #777; margin-top: 4px; }
.muted { color: #777; font-size: 12px; }

/* Formular-layout (redigér-siden) */
.form-wrap { display: grid; grid-template-columns: 1fr 360px; gap: 24px; align-items: start; }
@media (max-width: 1100px) { .form-wrap { grid-template-columns: 1fr; } }

.row   { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.row + .row, .row-3 + .row-3 { margin-top: 8px; }

label { font-size: 13px; color: #555; display:block; margin-top: 8px; margin-bottom: 4px; }
input:not(.btn), select:not(.btn), textarea:not(.btn) {
  width: 100%;
  padding: 8px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background: linear-gradient(#fafafa,#f2f2f2);
  color: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}

@media (prefers-color-scheme: dark) {
  input:not(.btn), select:not(.btn), textarea:not(.btn) {
    background: linear-gradient(#2a2a2a,#242424);
    color: #f9fafb;
    border-color: #444;
  }
  input:not(.btn)::placeholder,
  textarea:not(.btn)::placeholder {
    color: #9ca3af;
  }
}

input:not(.btn):focus,
select:not(.btn):focus,
textarea:not(.btn):focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37,99,235,0.25);
  outline: none;
}

/* Farvevælgere + hex-felter */
.input-inline { display:flex; align-items:center; gap:8px; }
.input-inline .flex1 { flex:1; }

.input-inline input[type="color"]{
  width: 36px; height: 32px; padding: 0;
  border: 1px solid #ccc; border-radius: 6px; background: transparent;
}

#fg, #bg {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .3px;
  border: 1px solid #ccc; border-radius: 6px;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

/* chip ved siden af felterne */
.color-chip { width: 28px; height: 28px; border-radius: 6px; border: 1px solid #ccc; display: inline-block; }

/* Tabel – fælles */
table { border-collapse: collapse; width: 100%; table-layout: fixed; }
th, td {
  border-bottom: 1px solid #ddd; padding: 8px; font-size: 14px; vertical-align: middle; text-align: left;
}
th { font-weight: 600; background: #222; color: #fff; }

/* Liste-siden: kolonne-bredder */
.table-links td:nth-child(1), .table-links th:nth-child(1) { width: 110px; }  /* Slug */
.table-links td:nth-child(3), .table-links th:nth-child(3) { width: 420px; }  /* Destination */
.table-links td:nth-child(4), .table-links th:nth-child(4) {
  max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.table-links td:nth-child(5), .table-links th:nth-child(5) { width: 100px; white-space: nowrap; } /* Status */
.table-links td:nth-child(6), .table-links th:nth-child(6) { width: 70px; text-align: right; }     /* Scans */
.table-links td:nth-child(7), .table-links th:nth-child(7) { width: 140px; white-space: nowrap; }  /* QR */
.table-links td:nth-child(8), .table-links th:nth-child(8) { width: 200px; white-space: nowrap; }  /* Actions */

.tenant-row-inactive td {
  background: #fef2f2;
}

/* Stats-siden: kolonnebredder (inkl. dine justeringer) */
.table-stats th.time,  .table-stats td.time  { width: 100px; }
.table-stats th.ip,    .table-stats td.ip    { width: 160px; white-space: nowrap; }
.table-stats th.ref,   .table-stats td.ref   { width: 320px; }
.table-stats th.redir, .table-stats td.redir { width: 360px; }
.table-stats th.ua,    .table-stats td.ua    { width: 240px; }

/* Klip/ellipsis i celler */
.cell-clip { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cell-clip > a, .cell-clip > span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Meta-linjer (QR URL / Redirect) */
.meta { margin-top: 10px; display: grid; gap: 6px; }
.meta-row {
  display: grid; grid-template-columns: 90px 1fr auto; align-items: center; gap: 8px;
  background: rgba(0,0,0,.03); border: 1px solid #e6e6e6; border-radius: 8px; padding: 6px 8px;
}
.meta-label { font-size: 12px; color:#666; }
.meta-code {
  display:block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px; color: inherit; text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.meta a.meta-code:hover { text-decoration: underline; }

.actions-bar { display:flex; gap:12px; margin-top: 12px; align-items: center; flex-wrap: wrap; }

/* Knapper */
.btn {
  font-size: 12px; padding: 5px 10px; border: 1px solid #ccc; border-radius: 8px;
  background: linear-gradient(#fafafa,#f2f2f2); color: inherit; text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px; line-height: 1; height: 32px;
}
.btn:hover { background:#eaeaea; text-decoration: none; }

.btn-icon {
  width: 32px; height: 32px; padding: 0; border: 1px solid #ccc; border-radius: 8px;
  background: linear-gradient(#fafafa,#f2f2f2); display: inline-flex; align-items: center; text-decoration: none;
  justify-content: center; font-size: 16px; line-height: 1;
}
.btn-icon:hover { background:#eaeaea; text-decoration: none; }

/* Knapgrupper i tabeller */
.qr-links, .actions { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.actions form, .qr-links form { display: inline; margin: 0; }
.actions button { cursor: pointer; }

/* QR preview (redigér/stats) */
.qr-preview {
  display:flex; align-items:center; justify-content:center;
  background: #fafafa; border:1px dashed #ddd; border-radius: 12px; padding: 16px; min-height: 260px;
}
.qr-preview img { max-width: 300px; height: auto; }

/* Stats-sidens summary */
.summary { display:grid; grid-template-columns: 1fr 1fr; gap:16px; margin-bottom:16px; }
@media (max-width: 900px) { .summary { grid-template-columns: 1fr; } }

.kv {
  display:grid; grid-template-columns: 140px 1fr auto; gap:8px; align-items:center;
  padding:6px 8px; border:1px solid #eee; border-radius:8px; background: rgba(0,0,0,.03);
}
.kv + .kv { margin-top:6px; }
.kv label { font-size:12px; color:#666; }
.kv a, .kv code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:inherit; text-decoration:none;
}
.kv a:hover { text-decoration:underline; }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 8px;
  align-items: stretch;
}

.stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 12px 16px;
  background: #f6f6f6;       /* lidt lysere end før for bedre kontrast */
}

.stat .num {
  display: block;
  font-size: 22px;
  font-weight: 700;
  color: #111;               /* eksplicit farve = ingen “udvasket” tekst */
  line-height: 1.2;
}

.stat .lbl {
  display: block;
  font-size: 12px;
  color: #666;
}

/* Badges */
.badge { padding:2px 6px; border-radius:999px; font-size:12px; color:#fff; }
.badge-active  { background:#28a745; }
.badge-inactive{ background:#dc3545; }

/* Flash messages */
.flash-wrap {
  margin: 16px 0;
  display: grid;
  gap: 10px;
}
.flash {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  background: #f3f4f6;
  font-size: 13px;
}
.flash-error {
  border-color: #fca5a5;
  background: #fee2e2;
}
.flash-success {
  border-color: #86efac;
  background: #dcfce7;
}
.flash-info {
  border-color: #bfdbfe;
  background: #dbeafe;
}

/* Footer + fieldset */
footer { margin-top: 24px; color: #666; font-size: 12px; }
fieldset { border:1px solid #ddd; padding:12px; margin-top:8px }
legend { padding: 0 6px; color:#666; }
.link-form-fields { border:0; margin:0; padding:0; }
.link-form-fields[disabled] { opacity:0.6; }

/* Dark mode */
@media (prefers-color-scheme: dark) {
  .card { border-color:#333; background:#1f1f1f; box-shadow: 0 2px 10px rgba(0,0,0,.3); }
  label { color:#bbb; }
  .help, .muted { color:#999; }
  .qr-preview { background:#161616; border-color:#333; }
  .btn, .btn-icon { border-color:#444; background: linear-gradient(#2a2a2a,#242424); color:#eaeaea; }
  .btn:hover, .btn-icon:hover { background:#2f2f2f; }
  table th, table td { border-color:#333; }
  table th { background:#111; color:#eee; }
  fieldset { border-color:#333; }
  legend { color:#999; }

  .meta-row { background: rgba(255,255,255,.04); border-color:#333; }
  .kv { border-color:#333; background: rgba(255,255,255,.04); }
  .color-chip { border-color:#444; }
  #fg, #bg { border-color:#444; }
  .input-inline input[type="color"]{ border-color:#444; background:#2a2a2a; }
  .stat { border-color: #333; background: #202020; }
  .stat .num { color: #fafafa; }
  .stat .lbl { color: #aaa; }
  .tenant-row-inactive td { background: #4c1d1d; }
  .flash { border-color:#3f3f46; background:#27272a; color:#e4e4e7; }
  .flash-error { border-color:#f87171; background:#7f1d1d; color:#fee2e2; }
  .flash-success { border-color:#4ade80; background:#064e3b; color:#bbf7d0; }
  .flash-info { border-color:#60a5fa; background:#1e3a8a; color:#dbeafe; }
  /* Chart variables dark */
  :root {
    --chart-bg: #161616;
    --chart-border: #333;
    --chart-line: #93c5fd;   /* blue-300 */
    --chart-accent: #34d399; /* emerald-400 */
    --chart-text: #bbb;
    --tip-bg: #111;
    --tip-text: #f5f5f5;
  }
}

/* Chart tooltip */
.chart-tip {
  position: absolute;
  pointer-events: none;
  background: var(--tip-bg);
  color: var(--tip-text);
  font-size: 12px;
  padding: 6px 8px;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
  transform: translate(-50%, -120%);
  white-space: nowrap;
  z-index: 10;
  opacity: 0;
  transition: opacity .08s ease;
}