/* ============================================================
   Domänpanelen — sidspecifik stil
   ------------------------------------------------------------
   Bygger på tokens.css + components.css. De äldre klassnamnen
   (.row, .dest, .prop …) finns kvar eftersom sidornas JS använder
   dem; de är nu bara tunna lager ovanpå designsystemet.
   ============================================================ */

.wrap { max-width: var(--max-bredd); margin: 0 auto; padding: var(--steg-6) var(--steg-5) var(--steg-7); }

header { display: flex; align-items: baseline; gap: var(--steg-3); margin-bottom: var(--steg-5); flex-wrap: wrap; }
h1 { font-size: var(--text-2xl); font-weight: var(--vikt-fet); letter-spacing: -.02em; margin: 0; }
.sub { color: var(--text-svag); font-size: var(--text-sm); }
.actions { margin-left: auto; display: flex; gap: var(--steg-2); align-items: center; }
.progress { font-size: var(--text-sm); color: var(--text-dämpad); }

button {
  font: var(--vikt-normal) var(--text-md)/1 var(--font);
  padding: var(--steg-2) var(--steg-3);
  border: 1px solid var(--kant); border-radius: var(--rund);
  background: var(--yta); color: var(--text); cursor: pointer;
  transition: border-color var(--snabbt), color var(--snabbt), background var(--snabbt);
}
button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button:disabled { opacity: .5; cursor: default; }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: var(--vikt-medium); }
button.primary:hover:not(:disabled) { background: var(--accent-mörk); border-color: var(--accent-mörk); color: #fff; }
.btn-liten { padding: var(--steg-1) var(--steg-2); font-size: var(--text-sm); }

/* --- nyckeltal --- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--steg-3); margin-bottom: var(--steg-4); }
.stat { background: var(--yta); border: 1px solid var(--kant); border-radius: var(--rund-lg); padding: var(--steg-3) var(--steg-4); }
.stat b { display: block; font-size: var(--text-3xl); font-weight: var(--vikt-fet); letter-spacing: -.02em; line-height: 1.15; }
.stat span { color: var(--text-dämpad); font-size: var(--text-sm); }
.stat.alert b { color: var(--fel-text); }
.stat.warn b { color: var(--warn-text); }

/* --- flikar --- */
.tabs { display: flex; gap: var(--steg-1); margin-bottom: var(--steg-4); border-bottom: 1px solid var(--kant); flex-wrap: wrap; }
.tab { padding: var(--steg-2) var(--steg-3); font-size: var(--text-md); color: var(--text-dämpad); cursor: pointer;
       border-bottom: 2px solid transparent; margin-bottom: -1px; border-radius: var(--rund-sm) var(--rund-sm) 0 0;
       transition: color var(--snabbt), background var(--snabbt); user-select: none; }
.tab:hover { color: var(--text); background: var(--yta-hover); }
.tab.on { color: var(--accent); border-bottom-color: var(--accent); font-weight: var(--vikt-medium); }
.tab .pill { background: var(--accent); color: #fff; border-radius: var(--rund-rund); padding: 1px var(--steg-2); font-size: var(--text-xs); margin-left: var(--steg-1); }
.tab .pill:empty { display: none; }

/* --- sökrad --- */
.toolbar { display: flex; gap: var(--steg-2); margin-bottom: var(--steg-3); align-items: center; flex-wrap: wrap; }
.search { flex: 1; min-width: 220px; background: var(--yta); border: 1px solid var(--kant);
          border-radius: var(--rund); padding: var(--steg-2) var(--steg-3); font: var(--vikt-normal) var(--text-md) var(--font); color: var(--text); }
.search:focus { outline: none; border-color: var(--accent); }
.chip { background: var(--yta); border: 1px solid var(--kant); border-radius: var(--rund-rund);
        padding: var(--steg-1) var(--steg-3); font-size: var(--text-sm); color: var(--text-dämpad); cursor: pointer; white-space: nowrap;
        transition: all var(--snabbt); user-select: none; }
.chip:hover { border-color: var(--kant-stark); color: var(--text); }
.chip.on { background: var(--accent-yta); border-color: var(--accent-kant); color: var(--accent); font-weight: var(--vikt-medium); }

/* --- domänlista --- */
.split { display: grid; grid-template-columns: 1fr var(--sidopanel); gap: var(--steg-4); align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.list { background: var(--yta); border: 1px solid var(--kant); border-radius: var(--rund-lg); overflow: hidden; }
.hdr, .row { display: grid; grid-template-columns: 12px 1.3fr 1fr 1fr; gap: var(--steg-3); padding: var(--steg-3) var(--steg-4); align-items: center; }
.hdr { background: var(--yta-dämpad); border-bottom: 1px solid var(--kant); font-size: var(--text-2xs);
       color: var(--text-svag); text-transform: uppercase; letter-spacing: var(--etikett-spacing); font-weight: var(--vikt-medium); }
.row { border-bottom: 1px solid var(--kant); cursor: pointer; transition: background var(--snabbt); }
.row:last-child { border-bottom: none; }
.row:hover { background: var(--yta-dämpad); }
.row.sel { background: var(--accent-yta); }
.dot { width: 8px; height: 8px; border-radius: 50%; justify-self: center; background: var(--grå-400); }
.dot.ok { background: var(--ok-text); } .dot.warn { background: #e8890c; }
.dot.bad { background: var(--fel-text); } .dot.idle, .dot.okänd { background: var(--grå-400); }
.k { font-size: var(--text-md); font-weight: var(--vikt-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v { font-size: var(--text-xs); color: var(--text-svag); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell.empty .k { color: var(--text-svag); font-weight: var(--vikt-normal); font-style: italic; }
.note { grid-column: 2 / -1; font-size: var(--text-sm); margin-top: 2px; }
.note.bad { color: var(--fel-text); } .note.warn { color: var(--warn-text); }

/* --- sidopanel --- */
.panel { background: var(--yta); border: 1px solid var(--kant); border-radius: var(--rund-lg); padding: var(--steg-4); position: sticky; top: var(--steg-4); }
.panel h2 { font-size: var(--text-xl); font-weight: var(--vikt-fet); margin: 0; }
.panel .host { color: var(--text-svag); font-size: var(--text-sm); margin-bottom: var(--steg-3); }
.banner { border-radius: var(--rund); padding: var(--steg-3); font-size: var(--text-sm); margin-bottom: var(--steg-3);
          line-height: var(--radhöjd-tät); border: 1px solid transparent; }
.banner.bad { background: var(--fel-yta); border-color: var(--fel-kant); color: var(--fel-text); }
.banner.warn { background: var(--warn-yta); border-color: var(--warn-kant); color: var(--warn-text); }
.banner.ok { background: var(--ok-yta); border-color: var(--ok-kant); color: var(--ok-text); }
.lbl { font-size: var(--text-2xs); color: var(--text-svag); text-transform: uppercase;
       letter-spacing: var(--etikett-spacing); font-weight: var(--vikt-medium); margin: var(--steg-4) 0 var(--steg-2); }
.meta { font-size: var(--text-sm); color: var(--text-dämpad); display: flex; justify-content: space-between; gap: var(--steg-3); padding: 3px 0; }
.meta span:last-child { color: var(--text); text-align: right; }
.ns { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-dämpad); }
.koppla { margin-top: var(--steg-3); padding-top: var(--steg-3); border-top: 1px solid var(--kant); }
select { font: var(--vikt-normal) var(--text-md) var(--font); padding: var(--steg-2) var(--steg-3);
         border: 1px solid var(--kant); border-radius: var(--rund); background: var(--yta); color: var(--text); width: 100%; }

.tom { padding: var(--steg-7) var(--steg-5); text-align: center; color: var(--text-svag); line-height: var(--radhöjd-luftig); }
.felruta { background: var(--fel-yta); border: 1px solid var(--fel-kant); color: var(--fel-text);
           border-radius: var(--rund); padding: var(--steg-3); font-size: var(--text-sm); margin-bottom: var(--steg-3); }

/* --- destinationer och förslag --- */
.dest { background: var(--yta); border: 1px solid var(--kant); border-radius: var(--rund-lg); padding: var(--steg-4); margin-bottom: var(--steg-3); }
.dest-top { display: flex; align-items: center; gap: var(--steg-2); margin-bottom: var(--steg-1); flex-wrap: wrap; }
.dest-top b { font-size: var(--text-lg); font-weight: var(--vikt-fet); }
.dest-top .antal { color: var(--text-svag); font-size: var(--text-sm); }
.dest .mal { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-dämpad); margin-bottom: var(--steg-2); }
.dest .doms { font-size: var(--text-sm); color: var(--text-svag); line-height: var(--radhöjd-luftig); }
.onamngiven { border-color: var(--warn-kant); background: var(--warn-yta); }
.namnform { display: flex; gap: var(--steg-2); margin-top: var(--steg-3); }
.namnform input { flex: 1; border: 1px solid var(--kant); border-radius: var(--rund); padding: var(--steg-2) var(--steg-3);
                  font: var(--vikt-normal) var(--text-md) var(--font); background: var(--yta); color: var(--text); }

.prop { background: var(--yta); border: 1px solid var(--kant); border-radius: var(--rund-lg); padding: var(--steg-4); margin-bottom: var(--steg-3); }
.prop.klar { opacity: .6; }
.prop-top { display: flex; align-items: center; gap: var(--steg-2); margin-bottom: var(--steg-1); flex-wrap: wrap; }
.prop-top b { font-size: var(--text-md); font-weight: var(--vikt-fet); }
.who { background: var(--vilar-yta); color: var(--vilar-text); border-radius: var(--rund-sm); padding: 2px var(--steg-2); font-size: var(--text-xs); font-weight: var(--vikt-medium); }
.who.klar { background: var(--ok-yta); color: var(--ok-text); }
.who.nej { background: var(--fel-yta); color: var(--fel-text); }
.prop .when { color: var(--text-svag); font-size: var(--text-xs); margin-left: auto; }
.prop p { color: var(--text-dämpad); font-size: var(--text-sm); margin: 0 0 var(--steg-3); }
.diff { background: var(--yta-dämpad); border: 1px solid var(--kant); border-radius: var(--rund);
        padding: var(--steg-2) var(--steg-3); font-family: var(--font-mono); font-size: var(--text-xs);
        line-height: var(--radhöjd-luftig); margin-bottom: var(--steg-3); white-space: pre-wrap; overflow-x: auto; }
.acts { display: flex; gap: var(--steg-2); flex-wrap: wrap; }

/* --- domänsida --- */
.poster { background: var(--yta); border: 1px solid var(--kant); border-radius: var(--rund-lg); overflow: hidden; margin-bottom: var(--steg-4); }
table.dns { width: 100%; border-collapse: collapse; }
table.dns th { text-align: left; font-size: var(--text-2xs); color: var(--text-svag); text-transform: uppercase;
               letter-spacing: var(--etikett-spacing); padding: var(--steg-3) var(--steg-4);
               background: var(--yta-dämpad); border-bottom: 1px solid var(--kant); font-weight: var(--vikt-medium); }
table.dns td { padding: var(--steg-2) var(--steg-4); border-bottom: 1px solid var(--kant); font-size: var(--text-md); vertical-align: middle; }
table.dns tr:last-child td { border-bottom: none; }
table.dns tr.skyddad td { color: var(--text-svag); background: var(--yta-dämpad); }
table.dns .mono { font-family: var(--font-mono); font-size: var(--text-xs); }
table.dns input { width: 100%; border: 1px solid var(--kant); border-radius: var(--rund-sm);
                  padding: var(--steg-1) var(--steg-2); font: var(--vikt-normal) var(--text-sm) var(--font); background: var(--yta); color: var(--text); }
table.dns input:focus { outline: none; border-color: var(--accent); }
table.dns input:disabled { border-color: transparent; background: transparent; color: var(--text-svag); }
table.dns td.smal { width: 1%; white-space: nowrap; }
.typ { display: inline-block; background: var(--vilar-yta); color: var(--vilar-text); border-radius: var(--rund-sm);
       padding: 2px var(--steg-2); font-size: var(--text-xs); font-weight: var(--vikt-medium); }
.rad-andrad { background: var(--warn-yta); }
.laggtill { background: var(--yta); border: 1px solid var(--kant); border-radius: var(--rund-lg); padding: var(--steg-4); margin-bottom: var(--steg-4); }
.laggtill-rad { display: grid; grid-template-columns: 1.2fr .8fr 2.5fr .7fr auto; gap: var(--steg-2); align-items: end; }
@media (max-width: 760px) { .laggtill-rad { grid-template-columns: 1fr 1fr; } }
.falt label { display: block; font-size: var(--text-2xs); color: var(--text-svag); text-transform: uppercase;
              letter-spacing: var(--etikett-spacing); margin-bottom: var(--steg-1); font-weight: var(--vikt-medium); }
.falt input, .falt select { width: 100%; border: 1px solid var(--kant); border-radius: var(--rund);
                            padding: var(--steg-2) var(--steg-3); font: var(--vikt-normal) var(--text-md) var(--font);
                            background: var(--yta); color: var(--text); }
.falt input:focus, .falt select:focus { outline: none; border-color: var(--accent); }
.andringar { position: sticky; bottom: 0; background: var(--yta); border: 1px solid var(--accent);
             border-radius: var(--rund-lg); padding: var(--steg-3) var(--steg-4); margin-top: var(--steg-3);
             display: flex; align-items: center; gap: var(--steg-3); box-shadow: var(--skugga-lg); flex-wrap: wrap; }
.andringar b { font-size: var(--text-md); }
.andringar .txt { flex: 1; font-size: var(--text-sm); color: var(--text-dämpad); }
.bild { background: var(--yta); border: 1px solid var(--kant); border-radius: var(--rund-lg);
        padding: var(--steg-3) var(--steg-4); margin-bottom: var(--steg-2); display: flex; align-items: center; gap: var(--steg-3); flex-wrap: wrap; }
.bild .tid { font-size: var(--text-md); font-weight: var(--vikt-medium); }
.bild .orsak { font-size: var(--text-xs); background: var(--vilar-yta); color: var(--vilar-text); border-radius: var(--rund-sm); padding: 2px var(--steg-2); }
.bild .orsak.fore { background: var(--warn-yta); color: var(--warn-text); }
.bild .orsak.efter { background: var(--ok-yta); color: var(--ok-text); }
.bild .antal { font-size: var(--text-sm); color: var(--text-svag); }
.bild .hoger { margin-left: auto; display: flex; gap: var(--steg-2); align-items: center; }

/* --- inloggning --- */
body.login-sida { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: var(--steg-5); }
.login-ruta { background: var(--yta); border: 1px solid var(--kant); border-radius: var(--rund-xl);
              padding: var(--steg-6) var(--steg-6); width: 100%; max-width: 380px; box-shadow: var(--skugga); }
.login-ruta h1 { font-size: var(--text-xl); margin-bottom: 3px; }
.login-sub { color: var(--text-svag); font-size: var(--text-sm); margin: 0 0 var(--steg-5); }
.login-ruta .falt { margin-bottom: var(--steg-3); }
.login-ruta input { width: 100%; border: 1px solid var(--kant); border-radius: var(--rund);
                    padding: var(--steg-2) var(--steg-3); font-size: var(--text-lg); background: var(--yta); color: var(--text); }
.login-ruta button { width: 100%; padding: var(--steg-3); font-size: var(--text-lg); margin-top: var(--steg-1); }
.hjalp { font-size: var(--text-xs); color: var(--text-svag); margin-top: var(--steg-1); line-height: var(--radhöjd); }
.utloggning { display: flex; align-items: center; gap: var(--steg-2); font-size: var(--text-sm); color: var(--text-svag); }

/* GitHub-listan har egna kolumner — staplas på smal skärm. */
.gh-rad { grid-template-columns: var(--kolumner); }
@media (max-width: 720px) {
  .gh-rad { grid-template-columns: 1fr; row-gap: 2px; }
  .hdr.gh-rad { display: none; }
}

/* ------------------------------------------------------------
   Domänlistan på liten skärm.
   Ligger här och inte i components.css eftersom app.css laddas
   sist — annars skulle grundreglerna ovan vinna över dessa.
   ------------------------------------------------------------ */
@media (max-width: 720px) {
  .list .hdr { display: none; }

  .list .row {
    display: grid;
    grid-template-columns: 12px 1fr;
    row-gap: 3px;
    padding: var(--steg-3);
  }
  .list .row > .dot { align-self: start; margin-top: 6px; }
  .list .row > .cell,
  .list .row > .note { grid-column: 2; }

  .list .row .k,
  .list .row .v { white-space: normal; overflow: visible; }
  .list .row .cell-doman .k { font-size: var(--text-lg); }
  .list .row .cell-mal,
  .list .row .cell-dns { display: flex; gap: 5px; align-items: baseline; flex-wrap: wrap; }
  .list .row .cell-mal .k,
  .list .row .cell-dns .k { font-size: var(--text-sm); font-weight: var(--vikt-normal); color: var(--text-dämpad); }
  .list .row .cell-mal .v,
  .list .row .cell-dns .v { flex-basis: 100%; }
  .list .row .cell-mal::before { content: "→"; color: var(--text-svag); }
  .list .row .cell-dns::before { content: "DNS ·"; color: var(--text-svag); font-size: var(--text-xs); }
}

/* --- ändringskö på domänsidan --- */
tr.ny-rad { background: var(--ok-yta); }
tr.ny-rad td:first-child::before { content: "ny "; color: var(--ok-text); font-size: var(--text-xs); font-weight: var(--vikt-medium); }
tr.bort-rad { background: var(--fel-yta); opacity: .75; }
tr.bort-rad .mono { text-decoration: line-through; }
tr.andrad-rad { background: var(--warn-yta); }

.problem { display: flex; gap: var(--steg-3); align-items: flex-start; padding: var(--steg-3) 0; border-bottom: 1px solid var(--kant); }
.problem:last-child { border-bottom: none; }
.problem .ikon { width: 22px; height: 22px; border-radius: var(--rund-rund); display: grid; place-items: center;
                 font-size: var(--text-sm); font-weight: var(--vikt-fet); flex: none; }
.problem.fel .ikon { background: var(--fel-yta); color: var(--fel-text); }
.problem.varning .ikon { background: var(--warn-yta); color: var(--warn-text); }
.problem .text { flex: 1; font-size: var(--text-md); line-height: var(--radhöjd); }
.problem .atgard { margin-top: var(--steg-2); }

.kallinfo { position: relative; cursor: help; border-bottom: 1px dotted var(--kant-stark); }
.kallinfo .beskrivning {
  position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 30;
  background: var(--yta); border: 1px solid var(--kant); border-radius: var(--rund);
  box-shadow: var(--skugga-lg); padding: var(--steg-3); width: 290px;
  font-size: var(--text-sm); line-height: var(--radhöjd); color: var(--text);
  opacity: 0; pointer-events: none; transition: opacity var(--snabbt); font-weight: var(--vikt-normal);
}
.kallinfo:hover .beskrivning { opacity: 1; }
.kallinfo .beskrivning .rad-info { display: flex; justify-content: space-between; gap: var(--steg-3); padding: 2px 0; }
.kallinfo .beskrivning .rad-info span:last-child { color: var(--text-dämpad); }

.mal-etikett { margin-top: 3px; min-height: 14px; }
.mal-etikett:empty { display: none; }

/* Nyckeltal som är genvägar till filter. */
.stat.klickbar { cursor: pointer; transition: border-color var(--snabbt), background var(--snabbt); }
.stat.klickbar:hover { border-color: var(--accent); background: var(--yta-dämpad); }
.stat.klickbar:active { transform: translateY(1px); }

/* ------------------------------------------------------------
   GitHub-fliken.
   Ligger sist i app.css, som laddas sist — annars skulle
   grundreglerna för .row och .chip vinna över dessa.
   ------------------------------------------------------------ */

.gh-sprak { display: flex; flex-wrap: wrap; gap: var(--steg-2); margin-bottom: var(--steg-3); }
.gh-sprak .chip b { font-weight: var(--vikt-fet); opacity: .65; margin-left: 2px; }

.gh-verktyg {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--steg-2);
  margin-bottom: var(--steg-3);
}
.gh-verktyg input[type="search"], .gh-verktyg select {
  border: 1px solid var(--kant); border-radius: var(--rund);
  padding: var(--steg-2) var(--steg-3);
  font: var(--vikt-normal) var(--text-md) var(--font);
  background: var(--yta); color: var(--text);
}
.gh-verktyg input[type="search"] { flex: 1; min-width: 140px; }
.gh-verktyg input[type="search"]:focus, .gh-verktyg select:focus {
  outline: none; border-color: var(--accent);
}
.gh-alder {
  margin-left: auto; display: flex; align-items: center; gap: var(--steg-2);
  font-size: var(--text-xs); color: var(--text-svag);
}

/* Aktivitetsstapeln i listan. Visar commits senaste 30 dagarna i förhållande
   till det mest aktiva projektet. */
.gh-stapel {
  display: block; height: 4px; width: 100%; max-width: 120px;
  background: var(--kant); border-radius: var(--rund-rund); overflow: hidden; margin-top: 5px;
}
.gh-stapel > span { display: block; height: 100%; background: var(--accent); border-radius: inherit; }

/* Veckografen i lådan. currentColor gör att den följer temat. */
.gh-graf { display: block; color: var(--accent); }
.gh-graf rect { fill: currentColor; }

@media (max-width: 720px) {
  /* Verktygsraden staplas: sökfältet får en egen rad, resten flyter under. */
  .gh-verktyg input[type="search"] { flex-basis: 100%; }
  .gh-alder { margin-left: 0; flex-basis: 100%; justify-content: space-between; }
  /* Stapeln får hela bredden när raden blivit enkolumnig. */
  .gh-stapel { max-width: none; }
}

/* ------------------------------------------------------------
   Hemskärmsläge på iPhone och iPad.
   Med viewport-fit=cover når sidan ut i skärmens hörn — utan
   kompensation hamnar rubriken under kameran och knappar bakom
   hemindikatorn. Reglerna gäller även i vanlig Safari, där
   env() är noll och ingenting ändras.
   ------------------------------------------------------------ */

.wrap {
  padding-top: max(var(--steg-6), env(safe-area-inset-top));
  padding-left: max(var(--steg-5), env(safe-area-inset-left));
  padding-right: max(var(--steg-5), env(safe-area-inset-right));
  padding-bottom: max(var(--steg-7), env(safe-area-inset-bottom));
}

body.login-sida { padding: max(var(--steg-5), env(safe-area-inset-top))
                           max(var(--steg-5), env(safe-area-inset-right))
                           max(var(--steg-5), env(safe-area-inset-bottom))
                           max(var(--steg-5), env(safe-area-inset-left)); }

/* Lådan glider upp underifrån och slutar annars precis under hemindikatorn. */
.drawer { padding-bottom: env(safe-area-inset-bottom); }

/* Den klibbiga "Applicera ändringar"-raden är det som drabbas värst:
   knappen hamnar exakt där hemindikatorn ligger och går inte att träffa. */
.andringar { margin-bottom: env(safe-area-inset-bottom); }

.avisering-lager {
  right: max(var(--steg-4), env(safe-area-inset-right));
  bottom: max(var(--steg-4), env(safe-area-inset-bottom));
}

/* I hemskärmsläge finns ingen adressrad att dra ner — ett eget andrum
   upptill gör att rubriken inte klistrar mot statusfältet. */
@media (display-mode: standalone) {
  .wrap { padding-top: max(var(--steg-4), calc(env(safe-area-inset-top) + var(--steg-2))); }
  /* Gummibandseffekten vid scrollens slut visar annars en vit remsa
     som inte matchar temat. */
  html { background: var(--yta-botten); overscroll-behavior-y: none; }
}