:root {
  --bg:     #e9edf1;
  --text:   #0f172a;
  --muted:  #64748b;
  --brand1: #2b6a7a;
  --brand2: #5ab0a6;
  --accent-soft: #e7f7f5;
  --card:   #ffffff;
  --shadow: 0 10px 28px rgba(0,0,0,.12);
  /* CV */
  --cv-gap: 28px;
  --meter1: #1e90ff;
  --meter2: #22c55e;
}

body.dark {
  --bg:     #0b0b0d;
  --text:   #f3f4f6;
  --muted:  #9ca3af;
  --brand1: #7a1140;
  --brand2: #a31555;
  --accent-soft: #ffd1e8;
  --card:   #141417;
  --shadow: 0 14px 34px rgba(0,0,0,.55);
  /* CV meters in dark */
  --meter1: #ff2d87;
  --meter2: #ff82c3;
}

/* CV – Skill bars (gradient i både light och dark) */
#view-cv .meter-fill{
  background-color: var(--brand1); /* fallback om gradient av någon anledning inte ritas */
  background-image: linear-gradient(90deg, var(--brand1), var(--brand2));
}

/* Om du har någon dark-regel som skriver "background: ..." på .meter-fill så slår den ihjäl gradienten.
   Den här vinner i dark-mode. */
body.dark #view-cv .meter-fill{
  background-color: var(--brand1);
  background-image: linear-gradient(90deg, var(--brand1), var(--brand2));
}


/* Base */
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,Apple Color Emoji,Segoe UI Emoji;color:var(--text);background:var(--bg);line-height:1.55}
a{color:inherit}
ul{padding-left:1.1rem;margin:0}

/* Header — GRADIENT ON CONTAINER ONLY */
header{background:linear-gradient(90deg,var(--brand1),var(--brand2));padding:18px 16px 16px;color:#e7f7f5;box-shadow:var(--shadow)}
.brand{max-width:1100px;margin:0 auto;display:flex;justify-content:center;align-items:center;position:relative}
.brand h1{background:none !important;color:#e7f7f5 !important;margin:0;font-size:clamp(26px,4vw,46px);letter-spacing:.04em;font-weight:800}
.brand h1::after{content:none !important}

/* Theme toggle */
.theme-toggle{position:absolute;right:0;top:50%;transform:translateY(-50%);border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.15);color:#fff;padding:10px 12px;border-radius:12px;font-weight:700;cursor:pointer;line-height:1;display:inline-flex;align-items:center;gap:8px}
.theme-toggle:hover{background:rgba(0,0,0,.22)}
.theme-toggle:active{transform:translateY(-50%) scale(.98)}
body:not(.dark) .theme-toggle{border-color:rgba(255,255,255,.45)}
body.dark .theme-toggle{border-color: color-mix(in srgb, var(--brand2) 55%, transparent)}


/* Accent color picker – FIXED */
.color-picker{
  appearance:none;
  -webkit-appearance:none;

  width:42px;
  height:42px;
  padding:0;

  border-radius:50%;
  overflow:hidden;

  background:none;
  border:2px solid rgba(255,255,255,0.4);
  cursor:pointer;
}

/* Chrome / Edge */
.color-picker::-webkit-color-swatch-wrapper{
  padding:0;
}
.color-picker::-webkit-color-swatch{
  border:none;
  border-radius:50%;
}

/* Firefox */
.color-picker::-moz-color-swatch{
  border:none;
  border-radius:50%;
}


/* Shared cards & wrappers */
.wrap{max-width:1100px;margin:32px auto 64px;padding:0 16px;border-top:1px solid rgba(0,0,0,.05)}
.card{background:var(--card);padding:18px 20px;border-radius:18px;box-shadow:var(--shadow);border:1px solid rgba(0,0,0,.05);display:flex;flex-direction:column}
.card h2{margin:.1rem 0 .6rem 0;font-size:clamp(18px,2.3vw,28px)}
.muted{color:var(--muted)}

/* Home (unchanged) */
.intro{display:grid;grid-template-columns:1.05fr 1fr 1.35fr;gap:36px;align-items:stretch}
.card.projects{padding-top:12px}
.card.projects h2{margin:.05rem 0 .35rem 0}
.card.projects ul{margin-top:.2rem}
a.link{color:var(--brand1);text-decoration:none;font-weight:600;border-bottom:1px solid transparent;transition:color .15s,border-color .15s}
a.link:hover{color:var(--brand2);border-bottom-color:var(--brand2)}
.card ul a{color:var(--brand1);text-decoration:none;font-weight:600;border-bottom:1px solid transparent;padding:0;transition:color .15s,border-color .15s}
.card ul a:hover{color:var(--brand2);border-bottom-color:var(--brand2)}
.img-card{display:flex;justify-content:center;align-items:center}
.profile-photo{width:100%;max-width:520px;aspect-ratio:1/1;border-radius:50%;object-fit:cover;box-shadow:var(--shadow);border:10px solid #fff;background:#ddd}
.social{margin-top:42px;padding-top:28px;border-top:none solid #e5e7eb}
.social h3{text-align:center;font-size:clamp(22px,3vw,32px);margin:0 0 22px 0}
.social-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:24px;align-items:stretch}
.sbtn{background:var(--card);box-shadow:var(--shadow);border:1px solid rgba(0,0,0,.05);border-radius:22px;padding:22px 12px 16px;text-align:center;text-decoration:none;transition:transform .08s;color:inherit}
.sbtn:hover{transform:translateY(-3px)}
.social-img{width:140px;height:140px;object-fit:cover;border-radius:50%;display:block;margin:0 auto 10px}
.slabel{font-size:14px;color:var(--muted)}
.contact{margin-top:42px;padding-top:28px;border-top:none solid #e5e7eb;text-align:center}
.contact h3{font-size:clamp(22px,3vw,32px);margin:0 0 22px 0}
.contact-card{min-height:100px;width:100%;margin:0 auto;padding:24px 20px}
.contact-list{display:flex;justify-content:center;flex-wrap:wrap;gap:18px;padding:14px 0}
.cbtn,.donate-btn{display:inline-flex;align-items:center;gap:12px;padding:14px 24px;border-radius:14px;font-size:17px;min-width:160px;justify-content:center;transition:background .15s,transform .1s}
.cbtn{background:var(--brand1);color:#fff;border:none;cursor:pointer}
.cbtn:hover{background:var(--brand2);transform:translateY(-2px)}
.donate-btn{text-decoration:none;background:#ffd54f;color:#000;font-weight:600}
.donate-btn:hover{background:#ffcd32;transform:translateY(-2px)}

/* Responsive */
@media (max-width:1100px){.intro{grid-template-columns:1fr}.social-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){.social-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.social-img{width:120px;height:120px}.contact-card{max-width:100%}}

/* Mini-stats */
.mini-stats{display:flex;flex-wrap:wrap;gap:8px 10px;margin-top:auto}
.stat{display:inline-flex;align-items:center;gap:8px;background:#f3f6f8;border:1px solid rgba(0,0,0,.06);padding:6px 10px;border-radius:999px;font-size:13px;color:#334155}
.stat b{font-weight:800}

/* ===== CV PAGE STYLES ===== */
.cv-wrap{max-width:1000px;margin:32px auto 64px;padding:0 16px;display:grid;grid-auto-rows:min-content;row-gap:var(--cv-gap)}
.cv-header{display:flex;align-items:center;justify-content:space-between;gap:16px}
.cv-title{display:flex;align-items:center;gap:18px}
.cv-header h1{font-size:clamp(26px,4vw,42px);margin:0}
.cv-meta{color:var(--muted);font-size:14px}
.avatar{width:84px;height:84px;border-radius:50%;object-fit:cover;box-shadow:var(--shadow);cursor:zoom-in}
.cv-section{display:flex;flex-direction:column;gap:10px;margin:0}

/* Skills */
.skills-grid{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:900px){.skills-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.skill{display:flex;flex-direction:column;gap:6px}
.skill-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.skill-name{font-weight:700}
.skill-val{font-variant-numeric:tabular-nums;color:var(--muted)}
.meter{height:9px;border-radius:999px;background:#eef2f7;overflow:hidden;border:1px solid #e6e9ef}
.meter-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--meter1),var(--meter2));transition:width .4s ease}

/* Timeline */
.timeline{list-style:none;padding:0;margin:0}
.timeline li{position:relative;padding:12px;margin:0;background:var(--card);border-radius:0;border-bottom:1px solid #e5e7eb}
.timeline li:first-child{border-top:1px solid #e5e7eb;border-top-left-radius:12px;border-top-right-radius:12px}
.timeline li:last-child{border-bottom:none;border-bottom-left-radius:12px;border-bottom-right-radius:12px}
.timeline time{font-weight:700;margin-right:10px;white-space:nowrap}
.timeline li + li{margin-top:6px}

/* Table */
.table-wrap{overflow:auto}
table.cv{width:100%;border-collapse:collapse;background:var(--card);box-shadow:var(--shadow);border-radius:12px;overflow:hidden;border:1px solid #e6e9ef}
table.cv thead th{background:#f8fafc;font-weight:800;border-bottom:1px solid #e5e7eb}
table.cv tbody tr{border-bottom:1px solid #e5e7eb}
table.cv tbody tr:last-child{border-bottom:none}
table.cv th,table.cv td{text-align:left;padding:12px 14px;vertical-align:top}

/* Lightbox */
.img-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:60}
.img-modal.is-open{display:flex}
.img-modal__backdrop{position:absolute;inset:0;background:rgba(15,23,42,.7);backdrop-filter:blur(2px)}
.img-modal__content{position:relative;max-width:min(92vw,720px);max-height:80vh;border-radius:16px;box-shadow:var(--shadow);z-index:61}
.img-modal__close{position:absolute;top:16px;right:20px;z-index:62;border:0;background:rgba(255,255,255,.9);padding:6px 10px;border-radius:10px;font-weight:700;cursor:pointer}

/* ---------- Mobile (≤ 640px) ---------- */
@media (max-width:640px){
  /* Basregler för media och rytm */
  img,video,svg{max-width:100%;height:auto}
  body{line-height:1.6}
  .wrap{margin:20px auto 40px;padding:0 12px}

  /* Header/brand */
  header{padding:14px 12px}
  .brand{padding:0 4px}
  .brand h1{letter-spacing:.02em}

  /* Grid och kort */
  .intro{gap:18px}
  .card{padding:16px;border-radius:16px}
  .card.projects{padding-top:10px}

  /* Social-sektion */
  .social{margin-top:28px;padding-top:20px}
  .social-grid{gap:16px}
  .sbtn{padding:16px 10px;border-radius:18px}
  .social-img{width:100px;height:100px}
  .slabel{font-size:13px}

  /* Kontaktknappar – full bredd på mobil */
  .contact{margin-top:28px;padding-top:20px}
  .contact-list{gap:10px}
  .cbtn,.donate-btn{width:100%;min-width:auto}

  /* CV-header staplas */
  .cv-header{flex-direction:column;align-items:flex-start;gap:12px}
  .cv-title{gap:12px;flex-wrap:wrap}
  .avatar{width:72px;height:72px}
  .cv-meta{font-size:13px}

  /* Skills: en kolumn är redan default; bara tajtare spacing */
  .skills-grid{gap:10px}
  .skill{gap:6px}
  .meter{height:8px}

  /* Timeline kompaktare på mobil */
  .timeline li{padding:10px}
  .timeline time{margin-right:8px}

  /* Tabeller: horisontell scroll med min-bredd så layouten inte spräcks */
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .table-wrap table{min-width:600px}
  table.cv th,table.cv td{padding:10px 12px}
}

/* ---------- Very small (≤ 360px) ---------- */
@media (max-width:360px){
  .avatar{width:64px;height:64px}
  .card{padding:14px}
  .sbtn{padding:14px 10px}
  .social-img{width:88px;height:88px}
}

/* Print PDF */
@media print{
  @page{size:A4;margin:12mm}
  body{background:#fff !important;color:#111827 !important}
  header{display:none !important}
  .cv-wrap{max-width:100% !important;margin:0 !important;padding:0 !important;row-gap:12px !important}
  .card{box-shadow:none !important;border:1px solid #cfd8e3 !important;border-radius:8px !important}
  .contact-card,.backlink{display:none !important}
  .meter{background:#e5e7eb !important;border-color:#e5e7eb !important}
  .meter-fill{background:#111827 !important}
  a{text-decoration:underline !important;color:#111827 !important}
  table.cv th,table.cv td{padding:8px 10px !important}
  .timeline li{page-break-inside:avoid}
}

/* --- Hotfix: Mobil overflow & läsbarhet --- */

/* 1) Döda tvingad min-bredd som orsakar horisontell scroll */
@media (max-width: 640px) {
  .table-wrap table,
  table.cv {
    min-width: 0 !important;   /* ta bort min-width 600px */
    width: 100% !important;     /* lås till viewportbredd */
    table-layout: fixed;        /* jämn kolumnbredd på små skärmar */
    word-wrap: break-word;
  }
}

/* 2) Förhindra att något sticker ut i sidled (säkerhetsbälte) */
html, body {
  overflow-x: hidden;           /* lås sidled */
}

/* 3) Se till att alla block följer med in i viewporten */
img, video, svg, canvas {
  max-width: 100%;
  height: auto;
}

/* 4) Låsa in header/brand så skugga/gradient inte orsakar spill */
@media (max-width: 640px) {
  header,
  .brand,
  .wrap,
  .cv-wrap {
    max-width: 100%;
    overflow: hidden;
  }
}

/* 5) H1 och kort tajtare på små skärmar */
@media (max-width: 640px) {
  .cv-header h1,
  .brand h1 {
    font-size: clamp(22px, 6vw, 28px) !important;
  }
  .card {
    margin-left: 0;
    margin-right: 0;
    border-radius: 14px;
  }
}

/* 6) Långa ord/rader bryts istället för att trycka ut layouten */
.card, .cv-wrap, .wrap, table.cv td, table.cv th, p, li {
  overflow-wrap: anywhere;
  word-break: break-word;
}

#image-overlay {
    display: none;              /* gömd som standard */
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.8);
    justify-content: center;
    align-items: center;
    z-index: 9999;
    cursor: zoom-out;
}

#image-overlay img {
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 8px;
}


/* =========================================================
   Extra cards (ported from prome.ddns.net)
   Stats | Weather | Mediatracker | News
   ========================================================= */

.cards{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap:26px;
  align-items: stretch;
  margin-top: 28px;
}

/* Dashboard grid on prome.org (Stats | Weather | Mediatracker | News) */
.dashboard{margin-top:28px;}
/*
  IMPORTANT:
  Do NOT force equal heights.
  When one card (e.g. Mediatracker) is tall, equal-height rows make all cards
  huge and ruins the layout.
*/
.dash-grid{display:grid;grid-template-columns:1fr;gap:26px;align-items:stretch;}

/* shared helpers used by partials */
.kv{display:grid;grid-template-columns:1fr auto;gap:10px 14px;align-items:baseline;margin-top:10px;}
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums;}
.subhead{font-size:18px;font-weight:700;margin:18px 0 8px;}

/* generic bars used by stats */
.bar{height:10px;border-radius:999px;overflow:hidden;border:1px solid rgba(0,0,0,.16);background:rgba(0,0,0,.14);}
.bar-inn{display:block;height:100%;background:linear-gradient(90deg,var(--brand1),var(--brand2));width:0;}
body.dark .bar{border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.06);}

/* Stats layout */
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start;}
@media (max-width: 820px){ .stats-grid{grid-template-columns:1fr;} }

.stats-left,.stats-right{min-width:0;}
.stats-grid svg path,
.stats-grid svg polyline,
.stats-grid svg line {
  stroke:var(--brand1) !important;
  stroke-width: 1.2 !important;   /* testa 1–1.5 */
  vector-effect: non-scaling-stroke;
}

body.dark .stats-grid svg text{fill:rgba(255,255,255,.75) !important;}
.stats-disk{margin-top:24px;}
.temp-ok{color:#16a34a}.temp-warn{color:#f59e0b}.temp-hot{color:#ef4444}

/* News */
.news-list{list-style:none;padding-left:0;margin:0;}
.news-list li{margin:10px 0;}
.news-src{opacity:.75;font-size:12px;margin-left:6px;}

/* Weather (SMHI) — keep original compact row layout (no wrapping) */
.weather-table{display:block;}
.wx-row{
  display:grid;
  grid-template-columns: max-content 28px 84px max-content max-content max-content;
  justify-content:start;
  width:fit-content;
  max-width:100%;
  gap:6px 10px;
  align-items:center;
  padding:6px 0;
  border-bottom:1px dashed rgba(0,0,0,.10);
}
.wx-day{display:flex;flex-direction:row;gap:6px;align-items:baseline;font-weight:700;}
.wx-date{opacity:.85;}
.wx-ico{font-size:18px;line-height:1;}
.wx-temp{display:flex;gap:10px;align-items:center;min-width:0;}
.wx-wind{opacity:.9;white-space:nowrap;}
.wx-precip,.wx-sun{white-space:nowrap;}
.wx-footer{padding-top:8px;font-size:12px;opacity:.8;}

/* Prevent long middle text from breaking the grid */
.wx-temp, .wx-wind, .wx-precip, .wx-sun{ min-width:0; }

.weather-card .wx-wind,.weather-card .wx-sun{white-space:nowrap;}
.weather-card .wx-sun::before,
.weather-card .wx-sun::after{content:none !important;}

@media (max-width: 980px){
  #wx .wx-row{
    grid-template-columns: max-content 26px max-content minmax(140px,1fr) max-content max-content;
    column-gap:10px;
  }
}

/* Mediatracker */
.media-card h2{ margin-bottom: 8px; }
.media-grid{ display:grid; row-gap: 10px; }
.media-row{
  display:grid;
  grid-template-columns: 2fr 0.8fr 0.8fr 0.75fr 0.75fr;
  align-items:center;
  column-gap: 14px;
}

.media-row .mono{ font-variant-numeric: tabular-nums; }
.m-title a{ text-decoration:none; }
.m-title a:hover{ text-decoration:underline; }
.media-head{ opacity:.9; font-weight:700; }
.media-head button.sort{ background: transparent; border:0; padding:0; color: inherit; font: inherit; }
.media-head button.sort:hover{ text-decoration: underline; cursor:pointer; }
.media-filters{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin: 8px 0 12px; }
.media-filters a{ text-decoration:none; }
.media-filters a.active{ font-weight:700; text-decoration:underline; }
.chip{ display:inline-block; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(0,0,0,.14); }
body.dark .chip{ border-color: rgba(255,255,255,.18); }

@media (max-width: 900px){
  .media-row{
    grid-template-columns: 1.5fr 0.8fr 0.8fr;
  }

  .media-row .m-added{
    display:none;
  }
}

.media-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  margin: 8px 0 14px;
}

.media-tools{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  min-width:0;
}

.media-search,
.media-select,
.media-reset{
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  color:inherit;
}

.media-search{
  width:220px;
  max-width:46vw;
}

.media-select,
.media-select option{
  background:var(--card);
  color:var(--text);
}

.media-reset{
  cursor:pointer;
}

.media-reset:hover{
  background:rgba(255,255,255,.08);
}

@media (max-width: 640px){
  .media-toolbar{
    align-items:stretch;
  }

  .media-tools{
    width:100%;
    align-items:stretch;
  }

  .media-search{
    width:100%;
    max-width:none;
    flex:1 1 100%;
  }

  .media-select{
    flex:1 1 140px;
    min-width:140px;
  }

  .media-reset{
    flex:0 0 auto;
  }
}


body.dark .profile-photo{border-color:#0f0f11;background:#0f0f11}
body.dark .card{border-color:rgba(255,255,255,.08)}
body.dark a.link, body.dark .card ul a{color:var(--brand2)}
body.dark a.link:hover, body.dark .card ul a:hover{color:var(--accent-soft);border-bottom-color:var(--accent-soft)}

/* Weather – two cities side by side */

.wx-columns{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.wx-city{
  min-width: 0;
}

@media (max-width: 900px){
  .wx-columns{
    grid-template-columns: 1fr;
  }
}

/* Flytta nederbörd + sol åt vänster: vind får INTE vara 1fr */
#wx .wx-row{
  width: 100%;
  grid-template-columns:
    110px   /* dag + datum */
    34px    /* ikon */
    90px    /* temp */
    190px   /* vind (fast bredd) */
    90px    /* nederbörd */
    170px;  /* sol */
  justify-content: start; /* kvarvarande utrymme hamnar till höger, inte i mitten */
}

/* Visa hela tiderna */
#wx .wx-sun,
#wx .wx-precip,
#wx .wx-wind{
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

#wx .wx-precip,
#wx .wx-sun{
  text-align: right;
}
/* Align hourly rows to the same columns as the daily row */
#wx .wx-hour-row{
  display:grid;
  grid-template-columns: 110px 34px 90px 190px 90px 170px !important; /* samma som dagsraden */
  column-gap: 10px !important;
  align-items: baseline;
}

/* Placera tim-innehållet i "rätt" kolumner */
#wx .wx-hour-time{ grid-column: 1; }
#wx .wx-hour-temp{ grid-column: 2 / span 2; } /* ikon+temp över ikon+temp-kolumner */
#wx .wx-hour-wind{ grid-column: 4; }
#wx .wx-hour-prec{ grid-column: 5; text-align:right; }

/* Ingen radbrytning som förstör alignment */
#wx .wx-hour-time,
#wx .wx-hour-temp,
#wx .wx-hour-wind,
#wx .wx-hour-prec{
  white-space: nowrap;
  min-width: 0;
}

/* Card links: konsekvent utseende även utanför <ul> */
.weather-card a,
.media-card a,
.calendar-card a,
.news-card a {
  color: var(--brand1);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid transparent;
  transition: color .15s, border-color .15s;
}
.weather-card a:hover,
.media-card a:hover,
.calendar-card a:hover,
.news-card a:hover {
  color: var(--brand2);
  border-bottom-color: var(--brand2);
}

/* Dark-mode: följ din befintliga länklogik */
body.dark .weather-card a,
body.dark .media-card a,
body.dark .calendar-card a,
body.dark .news-card a {
  color: var(--brand2);
}
body.dark .weather-card a:hover,
body.dark .media-card a:hover,
body.dark .calendar-card a:hover,
body.dark .news-card a:hover {
  color: #ffd1e8;
  border-bottom-color: #ffd1e8;
}

#wx .wx-precip{ text-align:right; }
#wx .wx-sun{ text-align:right; white-space:nowrap; }
#wx .wx-wind .gust{ opacity:.7; font-size:.85em; margin-left:3px; }
#wx .wx-ico{ margin-left:-2px; }

/* expanders */
#wx .wx-row{ cursor:pointer; }
#wx .wx-details{
  display:none;
  font-size:12px;
  padding:4px 0 8px 4px;
  border-bottom:1px dashed var(--border);
}
#wx .wx-details.open{ display:block; }

.wx-details-inner{
  display:grid;
  row-gap:2px;
}
.wx-hour-row{
  display:grid;
  grid-template-columns:46px 60px 1fr 70px; /* tid | temp | vind | nederb */
  column-gap:8px;
  align-items:baseline;
}
.wx-hour-time,
.wx-hour-temp,
.wx-hour-wind,
.wx-hour-prec{
  font-variant-numeric:tabular-nums;
}

/* header + actions */
.calendar-card .cal-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
}
.calendar-card .cal-actions{display:flex;gap:12px;align-items:center;}
.calendar-card .cal-clear{font-size:12px;opacity:.85}
.calendar-card .cal-clear:hover{opacity:1}

/* toggle */
.calendar-card .cal-more{
  display:inline-flex;
  gap:8px;
  align-items:center;
  margin-top: 12px;
  font-size: 13px;
  cursor:pointer;
  user-select:none;
  opacity:.9;
}
.calendar-card .cal-more:hover{opacity:1}
.calendar-card .cal-more .when-open{display:none;}
.calendar-card .cal-more-toggle:checked ~ .cal-more .when-closed{display:none;}
.calendar-card .cal-more-toggle:checked ~ .cal-more .when-open{display:inline;}

/* list layout: två kolumner på desktop */
.calendar-card .cal-list{
  margin-top: 12px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 22px;
}
@media (max-width: 900px){
  .calendar-card .cal-list{ grid-template-columns: 1fr; }
}

/* row item (tajt, tre rader) */
.calendar-card .cal-row{
  display:grid;
  grid-template-columns: 130px 120px 1fr;
  gap: 10px 14px;
  align-items: baseline;
}
.calendar-card .cal-date{font-weight:800;}
.calendar-card .cal-time{opacity:.9;}
.calendar-card .cal-title{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
@media (max-width: 640px){
  .calendar-card .cal-row{grid-template-columns: 1fr; gap:4px;}
  .calendar-card .cal-title{white-space:normal;}
}

/* hide/show using checkbox sibling selectors */
.calendar-card .cal-row.is-hidden{ display:none; }
.calendar-card .cal-more-toggle:checked ~ .cal-list .cal-row.is-hidden{ display:grid; }

.calendar-card .cal-foot{margin-top:10px;font-size:12px;opacity:.8;}

.calendar-card .cal-row{
  border-left: 4px solid transparent;
  padding-left: 10px;
}

.calendar-card .cal-apl      { border-left-color:#a855f7; } /* lila */
.calendar-card .cal-profil   { border-left-color:#ef4444; } /* röd */
.calendar-card .cal-komn     { border-left-color:#7c3aed; } /* mörklila / violett */
.calendar-card .cal-energi   { border-left-color:#22c55e; } /* grön */
.calendar-card .cal-event    { border-left-color:#06b6d4; } /* cyan / turkos */
.calendar-card .cal-ledig    { border-left-color:#64748b; } /* grå */
.calendar-card .cal-datorsam { border-left-color:#f97316; }   /* orange */
.calendar-card .cal-gyaree   { border-left-color:#b91c1c; }   /* mörkröd */
.calendar-card .cal-karaktar { border-left-color:#f59e0b; }   /* amber */
.calendar-card .cal-oppethus { border-left-color:#0ea5e9; }   /* blå */
.calendar-card .cal-lanreal  { border-left-color:#14b8a6; }   /* teal */
.calendar-card .cal-bok      { border-left-color:#94a3b8; }   /* grå */
.calendar-card .cal-sportlov { border-left-color:#64748b; }   /* samma som ledig */
.calendar-card .cal-default  { border-left-color:#475569; }   /* fallback för allt annat */



/* Tooltip på titel */
.calendar-card .cal-title{
  position: relative;
}

/* Själva bubblan */
.calendar-card .cal-title::after{
  content: attr(data-tip);
  position: absolute;
  left: 0;
  bottom: calc(100% + 10px);
  max-width: min(520px, 70vw);
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(0,0,0,.92);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.95);
  font-size: 12px;
  line-height: 1.35;
  white-space: normal;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);

  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity .12s ease, transform .12s ease;
  z-index: 50;
}

/* Liten pil */
.calendar-card .cal-title::before{
  content: "";
  position: absolute;
  left: 16px;
  bottom: calc(100% + 4px);
  width: 10px;
  height: 10px;
  background: rgba(0,0,0,.92);
  border-left: 1px solid rgba(255,255,255,.12);
  border-top: 1px solid rgba(255,255,255,.12);
  transform: rotate(45deg);

  opacity: 0;
  transform-origin: center;
  pointer-events: none;
  transition: opacity .12s ease;
  z-index: 51;
}

/* Visa vid hover */
.calendar-card .cal-row:hover .cal-title::after,
.calendar-card .cal-row:hover .cal-title::before{
  opacity: 1;
}

.calendar-card .cal-row:hover .cal-title::after{
  transform: translateY(0);
}

/* På touch-enheter: stäng av hover-tooltip så det inte blir konstigt */
@media (hover: none){
  .calendar-card .cal-title::after,
  .calendar-card .cal-title::before{ display:none; }
}

.calendar-card .cal-title{
  position: relative;
  overflow: visible !important;   /* viktigt: tooltip får inte klippas */
  display: inline-block;
  min-width: 0;
  max-width: 100%;
}

.calendar-card .cal-title-text{
  display:block;
  overflow:hidden;                /* ellipsis här */
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:100%;
}

.calendar-card .cal-title::after{
  content: attr(data-tip);
  position: absolute;
  left: 0;
  bottom: calc(100% + 10px);
  max-width: min(520px, 70vw);
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(0,0,0,.92);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.95);
  font-size: 12px;
  line-height: 1.35;
  white-space: normal;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity .12s ease, transform .12s ease;
  z-index: 9999;
}
.calendar-card .cal-title::before{
  content:"";
  position:absolute;
  left:16px;
  bottom: calc(100% + 4px);
  width:10px;height:10px;
  background: rgba(0,0,0,.92);
  border-left: 1px solid rgba(255,255,255,.12);
  border-top: 1px solid rgba(255,255,255,.12);
  transform: rotate(45deg);
  opacity:0;
  transition: opacity .12s ease;
  pointer-events:none;
  z-index: 10000;
}
.calendar-card .cal-row:hover .cal-title::after,
.calendar-card .cal-row:hover .cal-title::before{
  opacity:1;
}
.calendar-card .cal-row:hover .cal-title::after{
  transform: translateY(0);
}
@media (hover:none){
  .calendar-card .cal-title::after,
  .calendar-card .cal-title::before{ display:none; }
}

/* Mini-stats: theme-safe */
.stat{
  background: color-mix(in srgb, var(--card) 82%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  color: color-mix(in srgb, var(--text) 88%, var(--muted));
}

body.dark .stat{
  background: color-mix(in srgb, var(--card) 92%, #000);
  border-color: rgba(255,255,255,.10);
  color: rgba(255,255,255,.86);
}

/* NEWS: Tvinga 2x2 grid (lägg sist i style.css) */
.news-card .news-grid-2x2{
  display: grid !important;
  grid-template-columns: 1.15fr 1fr;
  grid-template-rows: auto auto;
  gap: 16px 22px;
  margin-top: 10px;
}

.news-card .news-pane{ min-width:0; }

.news-card .news-pane--tc{ grid-column:1; grid-row:1; }
.news-card .news-pane--ab{ grid-column:2; grid-row:1; }
.news-card .news-pane--arb{ grid-column:1; grid-row:2; }
.news-card .news-pane--dn{ grid-column:2; grid-row:2; }

/* Mobil */
@media (max-width: 900px){
  .news-card .news-grid-2x2{
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 14px;
  }
  .news-card .news-pane--tc,
  .news-card .news-pane--ab,
  .news-card .news-pane--arb,
  .news-card .news-pane--dn{
    grid-column: 1;
    grid-row: auto;
  }
}

/* NEWS: 1 rad per rubrik + datum höger */
.news-card .news-list li{
  display:flex;
  align-items: baseline;
  gap: 10px;
  margin: 6px 0;
  line-height: 1.25;
}

.news-card .news-list a{
  flex: 1 1 auto;
  min-width: 0;
  display:block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.news-card .news-src{
  flex: 0 0 auto;
  white-space: nowrap;
  margin-left: 0;
  opacity: .70;
  font-size: 11px;
}

/* Auto-grid för feeds: 2 kolumner, växer med antal feeds */
.news-card .news-grid-auto{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 22px;
  margin-top: 10px;
}

@media (max-width: 900px){
  .news-card .news-grid-auto{
    grid-template-columns: 1fr;
    gap: 14px;
  }
}


/* Om vissa rader fortfarande känns för luftiga */
.weather-card br,
.mediatracker-card br{
  content: "";
  display: block;
  margin: 4px 0;   /* justera 2–6px vid behov */
}

.calendar-card{
  line-height: 1.3;
}

.calendar-card br{
  content: "";
  display: block;
  margin: 3px 0;
}

/* =========================================================
   LINE BREAK (BR) SPACING — Weather + Mediatracker + Calendar
   Goal: keep <br> but make it tighter and consistent
   ========================================================= */

/* Reduce overall line height inside these cards */
.weather-card,
.media-card,
.calendar-card{
  line-height: 1.25;
}

/*
  <br> spacing control:
  - margin on <br> is unreliable across browsers
  - line-height on <br> is reliable and acts like "gap"
*/
.weather-card br,
.media-card br,
.calendar-card br{
  display: block;       /* makes <br> behave like a block separator */
  line-height: 4px;     /* vertical gap size (try 4px–8px) */
  content: "";          /* harmless; keeps intent clear */
}


/* =========================================================
   CALENDAR — Row alignment (fix column 3 sitting higher)
   Goal: all 3 columns start at the same vertical top
   ========================================================= */

/*
  IMPORTANT:
  Use the scoped selector (.calendar-card .cal-row) only.
  Do NOT style .cal-row globally, it breaks other layouts and overrides this.
*/
.calendar-card .cal-row{
  display: grid;
  grid-template-columns: 130px 120px 1fr; /* date | time | title/meta */
  gap: 10px 14px;
  align-items: start;                 /* key fix: align columns by top, not baseline */
}

/* Ensure consistent block flow inside columns */
.calendar-card .cal-date,
.calendar-card .cal-time{
  display: block;
}

/* Title wrapper must allow tooltip to overflow */
.calendar-card .cal-title{
  position: relative;
  overflow: visible !important;       /* tooltip must not be clipped */
  min-width: 0;
}

/* The visible title text (ellipsis) */
.calendar-card .cal-title-text{
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}


/* =========================================================
   CALENDAR — Tooltip (single source of truth, no duplicates)
   Tooltip reads from data-tip="..."
   ========================================================= */

.calendar-card .cal-title::after{
  content: attr(data-tip);
  position: absolute;
  left: 0;
  bottom: calc(100% + 10px);

  max-width: min(520px, 70vw);
  padding: 8px 10px;
  border-radius: 10px;

  background: rgba(0,0,0,.92);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.95);

  font-size: 12px;
  line-height: 1.35;
  white-space: normal;

  box-shadow: 0 10px 30px rgba(0,0,0,.45);

  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity .12s ease, transform .12s ease;

  z-index: 9999;
}

.calendar-card .cal-title::before{
  content:"";
  position:absolute;
  left:16px;
  bottom: calc(100% + 4px);
  width:10px;
  height:10px;

  background: rgba(0,0,0,.92);
  border-left: 1px solid rgba(255,255,255,.12);
  border-top: 1px solid rgba(255,255,255,.12);
  transform: rotate(45deg);

  opacity:0;
  transition: opacity .12s ease;
  pointer-events:none;

  z-index: 10000;
}

/* Show tooltip when hovering a row */
.calendar-card .cal-row:hover .cal-title::after,
.calendar-card .cal-row:hover .cal-title::before{
  opacity: 1;
}

.calendar-card .cal-row:hover .cal-title::after{
  transform: translateY(0);
}

/* Disable hover-tooltips on touch devices */
@media (hover:none){
  .calendar-card .cal-title::after,
  .calendar-card .cal-title::before{ display:none; }
}

/* =========================================================
   CARD HEADER + CLEAR CACHE LINK (shared pattern)
   ========================================================= */

.card-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
}

.card-head h2{
  margin:0;
}

.card-clear{
  font-size:12px;
  opacity:.75;
  white-space:nowrap;
}

.card-clear:hover{
  opacity:1;
}

/* =========================================================
   Header layout
   ========================================================= */

.site-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

/* Header menu (between title and actions) */
.header-nav{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.nav-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:34px;
  padding:0 14px;
  font-size:13px;
  font-weight:600;
  border-radius:999px;
  background: var(--btn-bg);
  color: var(--btn-text);
  text-decoration:none;
  transition: background .15s ease, opacity .15s ease;
}

.nav-btn:hover{ opacity:.9; }

.nav-btn.is-active{
  background: rgba(255,255,255,.26);
}

/* View switching (Start/Stats/Weather/...) */
.view{ display:none; }
.view.is-active{ display:block; }

/* Single-card views: keep the card nicely centered */
.dash-grid.dash-single{
  max-width: 980px;
  margin: 0 auto;
}

/* Group buttons on the right */
.header-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

/* =========================================================
   Header buttons (Clear cache + Theme toggle)
   ========================================================= */

.header-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  height:34px;
  padding:0 16px;

  font-size:13px;
  font-weight:600;

  border-radius:999px;
  border:none;
  cursor:pointer;

  background: var(--btn-bg);
  color: var(--btn-text);

  transition: background .15s ease, opacity .15s ease;
  text-decoration:none;
}

/* Hover */
.header-btn:hover{
  opacity:.9;
}

/* Theme variables (match your existing toggle) */
:root{
  --btn-bg: rgba(255,255,255,.14);
  --btn-text: #fff;
}

:root.light{
  --btn-bg: rgba(0,0,0,.08);
  --btn-text: #000;
}

/* Header layout: title left, actions right */
.site-header,
header .brand{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
}

/* Buttons grouped on the right */
.header-actions{
  display:flex;
  align-items:center;
  gap:10px;
}
#themeToggle{
  display:inline-flex !important;
}

/* ===========================
   Header layout fix
   =========================== */

/* Make header a proper flex row: title left, actions right */
.site-header{
  display:flex;
  align-items:center;          /* vertical centering */
  justify-content:space-between;
  gap:16px;
  position:relative;           /* safe, even if old CSS uses absolute somewhere */
}

/* Title: remove weird vertical offsets */
.site-header h1{
  margin:0;
  line-height:1;               /* keeps it visually centered */
}

/* Actions container always on the right */
.header-actions{
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:auto;            /* forces right alignment even if title grows */
}

/* CRITICAL: stop the theme button from being absolute-positioned */
.header-actions .theme-toggle{
  position:static !important;
  top:auto !important;
  right:auto !important;
  transform:none !important;
}

/* Old rule probably had translateY on active; keep active effect but without shifting */
.header-actions .theme-toggle:active{
  transform:scale(.98) !important;
}

/* =========================
   Header: mobile fix (place at VERY end)
   ========================= */

header .brand{
  justify-content: space-between !important; /* sluta centrera på mobil/överlag */
  flex-wrap: wrap;
  gap: 10px 12px;
}

header .brand h1{
  margin: 0;
  line-height: 1.05;
}

/* Se till att knappar aldrig är absolute i headern */
header .theme-toggle{
  position: static !important;
  top: auto !important;
  right: auto !important;
  transform: none !important;
}

/* Om du använder .site-header/.header-actions/.header-nav */
.site-header{
  flex-wrap: wrap;
  gap: 10px 12px;
}

.header-actions{
  margin-left: auto;
  flex: 0 0 auto;
}

/* Menyn får egen rad på mobil och kan scrolla horisontellt istället för att spräcka layouten */
@media (max-width: 640px){
  .header-nav{
    order: 3;
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
    padding-bottom: 2px;
  }
  .header-nav::-webkit-scrollbar{ height: 0; }
}

.stat-box {
  background: color-mix(in srgb, var(--card) 92%, var(--bg));
  border-radius: 14px;
  padding: 14px;
}

.stat-box .label {
  font-size: 12px;
  opacity: 0.7;
}

.stat-box .value {
  font-size: 14px;
  margin-top: 4px;
}

.kv {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.row {
  display: grid;
  grid-template-columns: 80px 1fr;
  align-items: start;
}

.k {
  font-weight: 600;
  white-space: nowrap;
}

.v {
  word-break: break-word;
  min-width: 0;
}

.now-playing {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;        /* tillåt radbrytning */
  overflow-wrap: anywhere;    /* bryt även långa titlar */
  line-height: 1.35;
}

.net-up {
  color: #4caf50; /* grön */
  font-weight: 600;
}

.net-down {
  color: #f44336; /* röd */
  font-weight: 600;
}

.kv .row {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  column-gap: 20px; /* ÖKA DENNA */
}

/* HTPC stats: vänster panel bredare */
.stats-grid{
  grid-template-columns: minmax(360px, 460px) 1fr !important;
}

/* Alla värden i stats: en rad med ellipsis – UTOM now-playing */
.stats-grid .kv .v:not(.now-playing){
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Now playing: ska få radbryta */
.stats-grid .kv .v.now-playing{
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  word-break: normal;
  overflow-wrap: anywhere; /* bryt bara “hårt” om det behövs */
  line-height: 1.35;
}

/* =========================
   MediaLibrary
========================= */

.ml-wrap{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 12px;
}

/* Viktigt i CSS grid: tillåt kolumnerna att krympa även om det finns lång text.
   Utan detta kan en lång titel "tvinga" grid att ge en kolumn för stor bredd. */
.ml-col{ min-width: 0; }

@media (max-width: 980px){
  .ml-wrap{ grid-template-columns: 1fr; }
}

.ml-head{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.ml-head h3{
  margin: 0;
  font-size: 1.05rem;
}

.ml-controls{
  display: flex;
  gap: 8px;
  align-items: center;
}

.ml-search{
  width: 200px;
  max-width: 46vw;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: inherit;
}

.ml-sort{
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: inherit;
}

/* Make the dropdown readable in both light + dark (browser defaults can be nasty) */
.ml-sort, .ml-sort option{
  background: var(--card);
  color: var(--text);
}

.ml-reset{
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: inherit;
  cursor: pointer;
}
.ml-reset:hover{ background: rgba(255,255,255,.08); }

.ml-list{
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  overflow: hidden;
}

.ml-item{ border-top: 1px solid rgba(255,255,255,.08); }
.ml-item:first-child{ border-top: 0; }

.ml-row{
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  cursor: pointer;
}

.ml-row::-webkit-details-marker{ display:none; }

.ml-title{
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ml-meta{
  flex: 0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:2px;
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
  white-space: nowrap;
  line-height:1.15;
}

.ml-added{
  font-size:11px;
  color:var(--muted);
}

.ml-details{
  padding: 0 12px 12px 12px;
}

.ml-kv{
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  margin: 4px 0 10px 0;
}

.ml-plot{
  margin: 0 0 10px 0;
  line-height: 1.35;
}

.ml-links{
  margin: 0;
}

.ml-item[open] .ml-row{
  background: rgba(255,255,255,.03);
}

.ml-head h3{
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
}

@media (max-width: 480px){
  .ml-head h3{
    font-size: 0.95rem;
  }
}

.header-nav {
  display: flex;
  align-items: center;
}

.nav-btn {
  padding: 0.4rem 0.8rem;
}

.nav-divider {
  width: 1px;
  height: 1.2em;
  background: #999;
  margin: 0 0.4rem;
}

@media (max-width: 640px){
  .ml-added{
    display:none;
  }

  .ml-meta{
    flex-direction:row;
    align-items:center;
  }
}

/* =========================================================
   CALENDAR — Week view (Outlook-ish)
   ========================================================= */
.calendar-card .cal-weeks{
  margin-top: 12px;
  display: grid;
  gap: 16px;
}

.calendar-card .cal-week{
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  overflow: hidden;
}

.calendar-card .cal-week-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  padding: 12px 14px;
  background: rgba(255,255,255,.03);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.calendar-card .cal-week-title{
  font-weight: 800;
}

.calendar-card .cal-week-grid{
  display:grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.calendar-card .cal-day{
  min-width: 0;
  border-right: 1px solid rgba(255,255,255,.06);
}

.calendar-card .cal-day:last-child{
  border-right: 0;
}

.calendar-card .cal-day-head{
  padding: 10px 12px 8px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  display:flex;
  justify-content:space-between;
  gap: 10px;
}

.calendar-card .cal-day-name{
  font-weight: 800;
}

.calendar-card .cal-day-body{
  padding: 10px 10px 12px;
  display:flex;
  flex-direction:column;
  gap: 8px;
  min-height: 92px; /* keeps empty days from collapsing too much */
}

.calendar-card .cal-empty{
  opacity: .55;
}

/* Event chip */
.calendar-card .cal-item{
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  min-width: 0;
  border-left-width: 4px;
  border-left-style: solid;
  border-left-color: transparent;
}

.calendar-card .cal-item-time{
  opacity: .85;
  display:block;
  font-size: 12px;
  margin-bottom: 2px;
}

.calendar-card .cal-item-title{
  display:block;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Multi-day items (rendered inside each day) */
.calendar-card .cal-item.is-multi{
  background: rgba(255,255,255,.05);
}

.calendar-card .cal-item.is-multi-start::after{
  content: "→";
  float: right;
  opacity: .6;
  margin-left: 8px;
}

.calendar-card .cal-item.is-multi-end::before{
  content: "←";
  opacity: .6;
  margin-right: 8px;
}

/* Mobile: stack days vertically */
@media (max-width: 900px){
  .calendar-card .cal-week-grid{
    grid-template-columns: 1fr;
  }
  .calendar-card .cal-day{
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.06);
  }
  .calendar-card .cal-day:last-child{
    border-bottom: 0;
  }
}

/* ===== Calendar week-view: toggle + color safety (appended) ===== */
.calendar-card .cal-week.is-hidden{ display:none; }
.calendar-card .cal-more-toggle:checked ~ .cal-weeks .cal-week.is-hidden{ display:block; }

/* Ensure items show the left color stripe */
.calendar-card .cal-item{
  border-left-width: 4px;
  border-left-style: solid;
  border-left-color: transparent;
}

/* Apply your existing color classes to the new .cal-item cards */
.calendar-card .cal-item.cal-apl      { border-left-color:#a855f7 !important; }
.calendar-card .cal-item.cal-profil   { border-left-color:#ef4444 !important; }
.calendar-card .cal-item.cal-komn     { border-left-color:#7c3aed !important; }
.calendar-card .cal-item.cal-energi   { border-left-color:#22c55e !important; }
.calendar-card .cal-item.cal-event    { border-left-color:#06b6d4 !important; }
.calendar-card .cal-item.cal-ledig    { border-left-color:#64748b !important; }
.calendar-card .cal-item.cal-datorsam { border-left-color:#f97316 !important; }
.calendar-card .cal-item.cal-gyaree   { border-left-color:#b91c1c !important; }
.calendar-card .cal-item.cal-karaktar { border-left-color:#f59e0b !important; }
.calendar-card .cal-item.cal-oppethus { border-left-color:#0ea5e9 !important; }
.calendar-card .cal-item.cal-lanreal  { border-left-color:#14b8a6 !important; }
.calendar-card .cal-item.cal-bok      { border-left-color:#94a3b8 !important; }
.calendar-card .cal-item.cal-sportlov { border-left-color:#64748b !important; }
.calendar-card .cal-item.cal-default  { border-left-color:#475569 !important; }


/* Calendar: place Show more at bottom */
.calendar-card .cal-more.cal-more-bottom{
  margin-top: 12px;
  display: inline-flex;
}

/* HTPC: Now playing – får radbryta när texten är för lång */
.now-playing{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:10px;
  min-width:0; /* viktigt i grid/flex så texten får krympa */
}

.now-playing .now-playing-text{
  min-width:0;
  flex:1 1 auto;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  overflow-wrap:anywhere;
  word-break:break-word;
  display:block;
}

.now-playing a{
  flex:0 0 auto;
  white-space:nowrap;
}

/* =========================================================
   HTPC — Recently added (Movies | TV)
   - Two columns
   - Tight row spacing
   - Tooltip like calendar.php (native title="...")
   ========================================================= */

.htpc-medialog .ml-cols{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
  margin-top: 8px;
}

@media (max-width: 720px){
  .htpc-medialog .ml-cols{ grid-template-columns: 1fr; }
}

.htpc-medialog .ml-head{
  margin: 0 0 6px 0;
}

.htpc-medialog .ml-list{ min-width: 0; }

.htpc-medialog .ml-row{ margin: 2px 0; }

/* tighter, cleaner list */
.htpc-medialog .ml-row{
  margin: 0;
  padding: 2px 0;
  line-height: 1.25;
}

.htpc-medialog .ml-title{
  position: relative;
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: clip; /* we truncate with ".." in JS */
}

.htpc-medialog .ml-title{ cursor: help; }

/* Log card layout */
.log-grid{
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 24px;
  width: 100%;
}

.log-left{
  font-style: italic;
  white-space: nowrap; /* viktigt: datumet får inte brytas */
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  opacity: 0.85;
}

.log-right{
  font-style: normal;
}


/* Mobil: stapla */
@media (max-width: 700px){
  .log-grid{
    grid-template-columns: 1fr;
  }
}

/* Log card – same size as Stats */
.log-card{
  width: 100%;
  max-width: 980px;   /* exakt samma visuella storlek som Stats */
  margin: 0 auto;
}

/* Mindre variant av vanliga länkar */
a.link--small{
  font-size: 0.85em;
}

/* =========================================================
   ADMIN – Add tracking (isolated, safe)
   ========================================================= */

.admin-added{
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted);
}

.admin-wrap{
  max-width: 900px;
  margin: 24px auto;
  padding: 0 16px;
}

/* Form */
.admin-form input[type="text"],
.admin-form input[type="url"]{
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.18);
  background: var(--card);
  color: var(--text);
}

body.dark .admin-form input[type="text"],
body.dark .admin-form input[type="url"]{
  border-color: rgba(255,255,255,.18);
}

/* Buttons – reuse your visual language */
.admin-form button,
.admin-list button{
  padding: 8px 14px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid rgba(0,0,0,.18);
  background: var(--card);
  cursor: pointer;
}

body.dark .admin-form button,
body.dark .admin-list button{
  border-color: rgba(255,255,255,.18);
}

.admin-form button:hover,
.admin-list button:hover{
  opacity: .85;
}

/* Success / error */
.admin-ok{
  background: rgba(46, 125, 50, 0.18);
  border: 1px solid rgba(76, 175, 80, 0.5);
  color: #8cffb0;
  padding: 10px 12px;
  border-radius: 12px;
  margin: 10px 0;
}

.admin-err{
  background: #fdeeee;
  border: 1px solid #f2bcbc;
  padding: 10px 12px;
  border-radius: 12px;
  margin: 10px 0;
}

/* List */
.admin-list{
  margin-top: 16px;
}

.admin-row{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 4px 0;
  border-bottom: 1px dashed rgba(0,0,0,.12);
}

.admin-row form{
  margin: 0;
}


.admin-title{
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Mobil */
@media (max-width: 640px){
  .admin-row{
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

/* ===== Admin: buttons ===== */
.admin-btn{
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.18);
  background: color-mix(in srgb, var(--card) 92%, var(--bg));
  color: var(--text);
  cursor:pointer;
  line-height:1;
  font-size: 13px;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .05s ease;
}

body.dark .admin-btn{
  border-color: rgba(255,255,255,.14);
}

.admin-btn:active{ transform: scale(.99); }

/* Delete: röd först vid hover */
.admin-btn-danger:hover{
  background: rgba(239,68,68,.12);
  border-color: rgba(239,68,68,.65);
  color: rgb(239,68,68);
}

/* Add: grön först vid hover */
.admin-btn-success:hover{
  background: rgba(34,197,94,.12);
  border-color: rgba(34,197,94,.65);
  color: rgb(34,197,94);
}

body.dark .admin-btn-success:hover{
  background: rgba(34,197,94,.18);
}

body.dark .admin-btn-danger:hover{
  background: rgba(239,68,68,.18);
}


/* =========================================================
   Mobile fix pack v3c
   - restore right-side stats blocks on small screens
   - fix MediaLibrary controls overflow and stacked layout
   ========================================================= */

/* The earlier !important desktop rule forced two columns even on phones.
   Override it explicitly on smaller screens for both HTPC and Webstats. */
@media (max-width: 820px){
  .stats-grid{
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .stats-left,
  .stats-right{
    width: 100%;
    min-width: 0;
  }

  .stats-right{
    display: block;
  }

  .stats-right .load-graph,
  .stats-right svg{
    width: 100%;
    max-width: 100%;
    overflow: visible;
  }
}

/* MediaLibrary: allow controls to wrap and shrink correctly on mobile */
.ml-head,
.ml-controls,
.ml-search,
.ml-sort,
.ml-reset,
.ml-col,
.ml-list,
.ml-item,
.ml-row,
.ml-title,
.ml-meta{
  min-width: 0;
}

.ml-controls{
  flex-wrap: wrap;
}

@media (max-width: 900px){
  .ml-head{
    flex-direction: column;
    align-items: stretch;
  }

  .ml-controls{
    width: 100%;
    justify-content: stretch;
    gap: 8px;
  }

  .ml-search{
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
  }

  .ml-sort{
    flex: 1 1 0;
    width: auto;
    max-width: 100%;
  }

  .ml-reset{
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

@media (max-width: 640px){
  .ml-wrap{
    grid-template-columns: 1fr !important;
    gap: 18px;
  }

  .ml-col{
    width: 100%;
  }

  .ml-row{
    grid-template-columns: minmax(0,1fr) auto;
    column-gap: 10px;
  }

  .ml-title{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ml-meta{
    white-space: nowrap;
    text-align: right;
  }
}


/* =========================================================
   Mobile polish fixes v3d
   ========================================================= */

@media (max-width: 640px){
  .card-head{
    align-items:flex-start;
    flex-wrap:wrap;
  }

  .card-head h2{
    flex:0 0 100%;
    width:100%;
    line-height:1.1;
    overflow-wrap:normal;
    word-break:normal;
    hyphens:none;
  }

  .card-head > :not(h2){
    flex:1 1 100%;
    min-width:0;
  }

  .stats-grid{
    grid-template-columns:1fr !important;
  }

  .stats-left .row,
  .kv .row{
    grid-template-columns:90px minmax(0,1fr) !important;
    column-gap:12px !important;
  }

  #wx .weather-head{
    gap:8px;
  }

  #wx .wx-row{
    width:100%;
    grid-template-columns: minmax(74px, 84px) 28px minmax(72px, 88px) minmax(120px, 1fr) !important;
    column-gap:8px !important;
    row-gap:4px;
    align-items:start;
  }

  #wx .wx-wind{
    grid-column:4;
    white-space:normal;
    overflow-wrap:anywhere;
  }

  #wx .wx-precip{
    grid-column:1 / span 2;
    text-align:left;
    white-space:nowrap;
  }

  #wx .wx-sun{
    grid-column:3 / span 2;
    text-align:left;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  #wx .wx-hour-row{
    grid-template-columns: 56px minmax(92px, 1fr) minmax(120px, 1fr) 70px !important;
    column-gap:8px !important;
  }

  .ml-head{
    align-items:flex-start;
    flex-direction:column;
  }

  .ml-controls{
    width:100%;
    flex-wrap:wrap;
    align-items:stretch;
  }

  .ml-search{
    flex:1 1 100%;
    width:100%;
    max-width:none;
  }

  .ml-sort{
    flex:1 1 140px;
    min-width:140px;
  }

  .ml-reset{
    flex:0 0 auto;
  }
}

/* =========================
   NEWS / STEAM DISCOUNTED GAMES
   ========================= */
.news-card .news-pane--steam-wide{
  grid-column: 1 / -1;
}

.news-card .steam-discount-item{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  margin: 6px 0;
}

.news-card .steam-discount-item a{
  min-width: 0;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.news-card .steam-price-wrap{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-size: 12px;
}

.news-card .steam-price-old{
  text-decoration: line-through;
  opacity: .65;
}

.news-card .steam-price-new{
  font-weight: 700;
}

.news-card .steam-discount-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 62px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  color: #fff;

  --discount-hue: 0;
  background: hsl(var(--discount-hue), 72%, 42%);
}

@media (max-width: 900px){
  .news-card .news-pane--steam-wide{
    grid-column: 1;
  }

  .news-card .steam-discount-item{
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    align-items: start;
  }

  .news-card .steam-price-wrap{
    justify-content: flex-start;
  }
}

body.dark table.cv thead th{
  background: #1b1b20;
  color: #f3f4f6;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* Admin status messages – force readable in both themes */
.admin-ok{
  background: #eef9f0 !important;
  border: 1px solid #bfe6c7 !important;
  color: #14532d !important;
}

body.dark .admin-ok{
  background: rgba(34, 197, 94, 0.16) !important;
  border: 1px solid rgba(34, 197, 94, 0.55) !important;
  color: #bbf7d0 !important;
}

.admin-err{
  background: #fdeeee !important;
  border: 1px solid #f2bcbc !important;
  color: #7f1d1d !important;
}

body.dark .admin-err{
  background: rgba(239, 68, 68, 0.16) !important;
  border: 1px solid rgba(239, 68, 68, 0.55) !important;
  color: #fecaca !important;
}
/* Private media login and disclaimer */
.media-login-card{max-width:440px;margin:24px auto 18px;padding:25px;background:#171c25;border:1px solid #354154;border-radius:9px;color:#e2e8f0}
.media-login-card h2{font-size:19px;margin:0 0 10px}.media-login-card p{color:#aab6c8;font-size:14px}
.media-login-form{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.media-login-form label{font-size:13px;color:#c9d5e5}
.media-login-form input{width:100%;box-sizing:border-box;border:1px solid #46546a;background:#0e131c;color:#fff;padding:11px;border-radius:5px}
.media-login-form button{border:1px solid #465e7d;border-radius:5px;background:#273b54;color:#e2e8f0;padding:11px;cursor:pointer}
.media-login-form button:disabled{opacity:.6}.media-login-error{color:#ff9a9a;font-size:13px;min-height:15px}
.media-disclaimer{display:flex;gap:13px;background:#171c25;border:1px solid #354154;border-radius:7px;color:#aab6c8;padding:16px 15px;max-width:640px;margin:20px auto;font-size:13px;line-height:1.65;box-sizing:border-box}
.media-disclaimer strong{display:block;color:#e2e8f0;font-size:14px;margin-bottom:4px}
.media-disclaimer p{margin:0}.media-disclaimer-icon{color:#91a9c8;font-size:19px;line-height:1.2}
.media-floating-disclaimer{display:none;position:fixed;bottom:12px;left:50%;transform:translateX(-50%);width:min(660px,calc(100% - 24px));z-index:999;pointer-events:none}
.media-floating-disclaimer .media-disclaimer{margin:0;max-width:none;box-shadow:0 5px 24px #0009;background:#171c25ed}
body.media-authenticated.media-view-active .media-floating-disclaimer{display:block}
body.media-authenticated.media-view-active main{padding-bottom:145px}
@media(max-width:650px){.media-floating-disclaimer{bottom:6px}.media-floating-disclaimer .media-disclaimer{font-size:11px;padding:10px}.media-floating-disclaimer .media-disclaimer strong{font-size:12px}}


/* ===== PROME / unified dark design 2026 ===== */
:root, body, body.dark {
  color-scheme: dark;
  --bg:#0c1016;--text:#e8edf5;--muted:#98a6ba;
  --brand1:#17202c;--brand2:#17202c;--accent-soft:#223246;
  --card:#171d27;--shadow:0 10px 35px rgba(0,0,0,.22);
  --btn-bg:#222c3a;--btn-text:#cbd6e5;
}
body, body.dark {background:#0c1016!important;color:#e8edf5!important;font-family:Inter,system-ui,-apple-system,Segoe UI,Arial,sans-serif;line-height:1.55}
.site-header, header.site-header {
  background:#151b24!important;box-shadow:none!important;border-bottom:1px solid #303a49!important;
  color:#e8edf5!important;min-height:76px;padding:15px clamp(18px,3vw,48px)!important;
  display:flex;align-items:center;gap:26px;flex-wrap:wrap;
}
.site-header h1 {color:#f3f6fa!important;font-size:clamp(20px,2vw,27px)!important;letter-spacing:-.035em!important;font-weight:680!important;white-space:nowrap}
.header-nav{gap:4px!important;flex:1;justify-content:flex-start}
.nav-btn,.header-btn{background:transparent!important;color:#aebbcf!important;border:1px solid transparent!important;border-radius:8px!important;font-size:13px!important;font-weight:550!important;min-height:38px!important;padding:8px 13px!important;white-space:nowrap}
.nav-btn:hover,.header-btn:hover{background:#222c39!important;color:#f3f6fa!important}
.nav-btn.is-active{background:#29384a!important;border-color:#3a4d65!important;color:#fff!important}
.nav-divider{background:#334153!important;opacity:.8}
.header-actions{margin-left:auto;gap:8px}
.site-logout{background:#222e3e;color:#e0e9f5;border:1px solid #41536a;border-radius:8px;padding:9px 17px;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
.site-logout:hover{background:#304258;border-color:#7188a3}
.site-logout:disabled{opacity:.5;cursor:wait}
main,.dash-grid,.view{color:#e8edf5}
.card,.news-card,.media-login-card,.media-disclaimer{background:#171d27!important;border:1px solid #303b4b!important;border-radius:12px!important;box-shadow:0 8px 28px rgba(0,0,0,.12)!important;color:#e8edf5!important}
.card{padding:clamp(18px,2.1vw,28px)}
.card h2,.card h3,.card-head h2{color:#f0f4fa!important;letter-spacing:-.025em;font-weight:650}
.muted,.card .muted{color:#9baac0!important}
input:not([type=checkbox]):not([type=radio]),select,textarea{background:#111822!important;border:1px solid #374558!important;color:#e7edf7!important;border-radius:8px!important;outline-offset:2px}
input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid #91b2da!important;outline-offset:2px}
button,.admin-btn{transition:background .15s,border-color .15s,transform .15s}
button:not(.nav-btn):not(.site-logout):not(.header-btn):not(.theme-toggle){border-radius:8px}
button:hover{filter:brightness(1.09)}
table{border-collapse:collapse}th{color:#c2d0e1}td,th{border-color:#303a49}
a.link,.card a.link{color:#a9c7ef!important}
.media-login-card{max-width:460px;padding:28px!important}
.media-login-form button{background:#344a64!important;border:1px solid #506a8b!important;color:#f3f6fb!important}
.media-disclaimer{color:#afbdd0!important}
.media-disclaimer strong{color:#eef3f9!important}
.media-floating-disclaimer .media-disclaimer{background:rgba(23,29,39,.95)!important;backdrop-filter:blur(10px)}
@media(max-width:920px){.site-header{gap:12px!important}.header-nav{order:3;flex-basis:100%;overflow-x:auto;flex-wrap:nowrap!important}.header-actions{margin-left:auto}}
@media(max-width:600px){.site-header h1{font-size:21px!important}.site-logout{padding:8px 11px}.card{padding:16px}}


/* ===== Unified typography, contrast and spacing — 2026-10-10 ===== */
:root,body,body.dark{
  --brand1:#a9c7ef;--brand2:#b8d4f7;--accent-soft:#263b53;
  --text:#e7edf5;--muted:#a8b7cb;--bg:#0c1016;--card:#171d27;
}
html{font-size:15px}
body,body.dark{font-size:15px!important;line-height:1.5;color:#e7edf5!important}
main,main .card,main .view,main p,main li,main td,main th,main label,
main input,main select,main button,main textarea{font-size:1rem;line-height:1.5}
main .mono,main .mono *,main code,main pre{font-size:.93rem;line-height:1.5}
main h1{font-size:1.85rem;line-height:1.25}
main h2,main .card h2,main .media-card h2{font-size:1.4rem!important;line-height:1.3}
main h3,main .subhead{font-size:1.13rem!important;line-height:1.35}
main .muted,main .card .muted,main .cv-meta{color:#a8b7cb!important}
main a,main a:visited,main .card a,main .card ul a,
main .weather-card a,main .media-card a,main .calendar-card a,
main .news-card a,main .m-title a,main .ml-title a,
main .media-filters a,body.dark main a.link{color:#b6d5ff!important}
main a:hover,main .card a:hover,main .m-title a:hover,
main .ml-title a:hover{color:#e3efff!important;text-decoration:underline}
main a:focus-visible{outline-color:#b6d5ff!important}
main .media-row,main .ml-row,main .news-card,main .weather-card,
main .media-card,main .calendar-card{font-size:1rem!important;line-height:1.5!important}
main .media-row{min-height:34px;column-gap:12px;row-gap:5px}
main .media-grid{row-gap:3px}
main .media-head{font-size:.92rem!important;color:#cbd6e5!important}
main .media-toolbar,main .media-filters{font-size:1rem}
main .media-search,main .media-select,main .media-reset{font-size:.93rem!important}
main .chip{font-size:.8rem!important;line-height:1.3;padding:3px 7px}
main .stats-grid .kv,main .stats-disk,main .stats-net{font-size:1rem;line-height:1.5}
main .stats-grid .kv .v,main .stats-grid .mono{color:#e7edf5}
main .stats-disk .muted,main .stats-net .muted{color:#a8b7cb!important}
main .card ul a{font-weight:500}
main .media-login-card h2{font-size:1.35rem!important}
main .media-login-card p,main .media-login-form label,
main .media-login-form input,main .media-login-form button{font-size:1rem!important}
main .media-disclaimer,main .media-disclaimer p{font-size:.9rem!important;line-height:1.55}
main .media-disclaimer strong{font-size:.95rem!important}
/* Keep a single disclaimer even if older cached markup injects duplicates. */
.view .media-disclaimer:not(:first-of-type){color:#afbdd0}
@media(max-width:700px){html{font-size:14px}main .media-row{column-gap:8px}}

/* MediaLibrary: compact text matching MediaTracker rows. */
#view-medialibrary .ml-list .ml-row,
#view-medialibrary .ml-list .ml-title,
#view-medialibrary .ml-list .ml-meta {
  font-family: inherit !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
}
#view-medialibrary .ml-list .ml-row {
  padding: 6px 10px !important;
}
#view-medialibrary .ml-list .ml-added {
  font-size: 11px !important;
  line-height: 1.2 !important;
}

/* MediaTracker titles: same 13px as MediaLibrary titles. */
#view-mediatracker .media-row .m-title,
#view-mediatracker .media-row .m-title a,
#view-mediatracker .media-row .m-title a:visited {
  font-size: 13px !important;
  line-height: 1.35 !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
}