/* ============================================================
   Morgonkaffe Portal — designspråk 3.0 ("Clean SaaS")
   Ljust som standard, mörkt läge som komplement. Svart bas + indigo-accent.
   Typografi: Geist (allt) / JetBrains Mono (siffror).
   Byt --accent på ETT ställe för att ändra accentfärgen överallt.
   Alla selektorer från 2.x bevarade – bara värden och typsnitt ändras.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;600&display=swap');

/* LJUST (standard) */
:root, [data-theme="light"] {
  --bg: #fbfbfa;
  --bg-alt: #f4f4f2;
  --card: #ffffff;
  --hover: #f4f4f2;
  --border: #e4e4e7;
  --text: #18181b;
  --dim: #6b6b73;
  --accent: #18181b;
  --accent-ink: #ffffff;
  --accent-soft: #f4f4f2;
  --green: #16a34a;
  --green-ink: #ffffff;
  --red: #dc2626;
  --shadow: 0 6px 24px rgba(24,24,27,.08);
}
/* MÖRKT (komplement) */
[data-theme="dark"] {
  --bg: #0b0b0d;
  --bg-alt: #141416;
  --card: #1c1c20;
  --hover: #26262a;
  --border: #26262a;
  --text: #f0f0f2;
  --dim: #9a9aa4;
  --accent: #f0f0f2;
  --accent-ink: #18181b;
  --accent-soft: #26262a;
  --green: #22c55e;
  --green-ink: #052e16;
  --red: #ef4444;
  --shadow: 0 12px 34px rgba(0,0,0,.4);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  transition: background .2s, color .2s;
}
a { color: inherit; text-decoration: none; }
input, select, textarea {
  width: 100%; padding: 11px 14px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--card); color: var(--text); font-size: 15px; margin-bottom: 16px;
  font-family: 'Geist', sans-serif;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
label { font-size: 12.5px; color: var(--dim); display: block; margin-bottom: 6px;
        text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 12px;
  font-weight: 600; font-size: 14px; border: 1px solid var(--border); background: var(--card);
  color: var(--text); cursor: pointer; font-family: 'Geist', sans-serif;
}
.btn:hover { background: var(--hover); }
.btn-primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn-primary:hover { filter: brightness(1.06); background: var(--accent); }
.btn-sm { padding: 7px 14px; font-size: 13px; }
.dim { color: var(--dim); }
.error { color: var(--red); font-size: 13px; text-align: center; min-height: 18px; }

/* Siffror (vikter, reps, procent) linjerar alltid */
.num, .pb-in-sm { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; }

/* Login */
.login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; }
.login-card { background: var(--card); border: 1px solid var(--border); border-radius: 22px;
              padding: 40px 36px; width: 100%; max-width: 380px; box-shadow: var(--shadow); }
.login-brand { font-family: 'Geist', sans-serif; font-weight: 700; font-size: 26px;
               text-align: center; margin-bottom: 6px; letter-spacing: -.01em;
               display: flex; align-items: center; justify-content: center; gap: 10px; }

/* Dashboard shell */
.shell { display: flex; min-height: 100vh; }
.sidebar { width: 224px; background: var(--bg-alt); border-right: 1px solid var(--border);
           padding: 20px 14px; flex-shrink: 0; position: relative; min-height: 100vh; }
.sidebar-brand { font-family: 'Geist', sans-serif; font-weight: 700; font-size: 18px;
                 padding: 6px 10px 20px; letter-spacing: -.01em;
                 display: flex; align-items: center; gap: 9px; }
.mk-logo { width: 26px; height: 26px; flex: none; display: block; }
.sidebar-link {
  display: block; padding: 10px 12px; border-radius: 10px; font-size: 14px; font-weight: 500;
  color: var(--dim); margin-bottom: 2px; cursor: pointer;
}
.sidebar-link:hover { background: var(--card); color: var(--text); }
.sidebar-link.active { background: var(--card); color: var(--accent); font-weight: 600; }
.sidebar-foot { position: absolute; bottom: 20px; width: 196px; }
.theme-toggle { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px;
                font-size: 13px; font-weight: 500; color: var(--text); cursor: pointer; margin-bottom: 6px;
                border: 1px solid var(--border); background: var(--card); }

/* Fast flytande temaväxlare – alltid synlig, nere till vänster */
#themeFab {
  position: fixed; left: 16px; bottom: 16px; z-index: 900;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 24px;
  background: var(--card); color: var(--text);
  border: 1px solid var(--border); box-shadow: var(--shadow);
  font-family: 'Geist', sans-serif; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: transform .12s, background .2s;
}
#themeFab:hover { background: var(--hover); transform: translateY(-1px); }
@media (max-width: 760px) { #themeFab { left: 12px; bottom: 12px; padding: 9px 14px; font-size: 12.5px; } }
.theme-toggle:hover { background: var(--card); color: var(--text); }
.main { flex: 1; padding: 32px 40px; overflow-y: auto; min-width: 0; }
.page-title { font-family: 'Geist', sans-serif; font-size: 30px; font-weight: 700;
              margin-bottom: 4px; letter-spacing: -.015em; }
.page-sub { color: var(--dim); font-size: 14px; margin-bottom: 26px; }

.table-wrap { background: var(--card); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
.row {
  display: flex; align-items: center; justify-content: space-between; padding: 14px 18px;
  border-bottom: 1px solid var(--border); cursor: pointer;
}
.row:last-child { border-bottom: none; }
.row:hover { background: var(--hover); }
.row-name { font-weight: 600; font-size: 14.5px; }
.row-sub { color: var(--dim); font-size: 12.5px; margin-top: 2px; }
.badge { font-size: 11px; padding: 3px 9px; border-radius: 20px;
         background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--dim); }
.badge-green { background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green); }
.search-input { max-width: 320px; }
.empty { padding: 40px; text-align: center; color: var(--dim); }
.spinner { text-align: center; padding: 40px; color: var(--dim); }

/* Program-miniatyrer (fas 1: typ-gradienter; fas 3: riktiga omslagsbilder) */
.cover-mini { width: 72px; height: 48px; border-radius: 10px; flex: none; margin-right: 14px;
              border: 1px solid var(--border); position: relative; overflow: hidden; }
.cover-mini::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(10,6,4,.35)); }
.cov-oly        { background: radial-gradient(120% 100% at 80% 0%, rgba(168,85,247,.55), transparent 60%), linear-gradient(150deg,#3A2A4A,#1D1526); }
.cov-strength   { background: radial-gradient(120% 100% at 70% 100%, rgba(61,219,166,.4), transparent 55%), linear-gradient(150deg,#24352B,#131D17); }
.cov-hyrox      { background: radial-gradient(120% 100% at 20% 0%, rgba(255,176,32,.5), transparent 55%), linear-gradient(150deg,#453317,#221A0D); }
.cov-fri        { background: radial-gradient(120% 100% at 30% 100%, rgba(34,211,238,.4), transparent 55%), linear-gradient(150deg,#1E3A42,#101D22); }
.cov-funktionell{ background: radial-gradient(120% 100% at 80% 0%, rgba(59,130,246,.45), transparent 55%), linear-gradient(150deg,#26303F,#141922); }
.cov-baa        { background: radial-gradient(120% 100% at 80% 0%, rgba(214,163,92,.55), transparent 55%), linear-gradient(150deg,#4A3423,#241A13); }

/* ── Responsiv – portalen ska gå att använda på mobil ── */
@media (max-width: 760px) {
  .shell { flex-direction: column; }
  .sidebar {
    width: 100%; height: auto; padding: 12px 14px; display: flex; align-items: center;
    gap: 4px; overflow-x: auto; white-space: nowrap; border-right: none; border-bottom: 1px solid var(--border);
    min-height: 0;
  }
  .sidebar-brand { padding: 0 10px 0 0; font-size: 16px; flex-shrink: 0; }
  .sidebar-link { margin-bottom: 0; flex-shrink: 0; }
  .sidebar-foot { position: static; width: auto; margin-left: auto; flex-shrink: 0; display: flex; gap: 4px; }
  .theme-toggle { margin-bottom: 0; }
  .main { padding: 20px 16px; }
  .page-title { font-size: 22px; }
  .modal-box { max-width: 100%; }
  .row { flex-wrap: wrap; }
  .cover-mini { width: 54px; height: 38px; margin-right: 10px; }
}

/* Modals */
.modal-bg {
  position: fixed; inset: 0; background: rgba(12,8,6,.62); display: flex; align-items: center;
  justify-content: center; z-index: 100; padding: 20px;
}
.modal-box {
  background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 28px;
  width: 100%; max-width: 440px; max-height: 86vh; overflow-y: auto; box-shadow: var(--shadow);
}
.modal-box h3 { margin: 0 0 6px; font-size: 19px; font-family: 'Geist', sans-serif; font-weight: 700; }

.modal-box input[type="checkbox"] { width: 16px; height: 16px; }

/* Tabs (Programmera/Genomför etc) */
.tab-row { display: flex; gap: 6px; margin-bottom: 18px; }
.tab-btn {
  flex: 1; text-align: center; padding: 11px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--card); color: var(--dim); font-weight: 600; font-size: 13.5px; cursor: pointer;
  font-family: 'Geist', sans-serif;
}
.tab-btn.active-program { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.tab-btn.active-execute { background: var(--green); color: var(--green-ink); border-color: var(--green); }

.check-row { display: flex; align-items: flex-start; gap: 10px; }
.checkbox {
  width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--border); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; cursor: pointer; margin-top: 2px;
}
.checkbox.done { background: var(--green); border-color: var(--green); color: var(--green-ink); font-weight: 700; }

/* Små hjälpknappar, delade mellan flera sidor */
.b-mini { padding: 6px 10px; font-size: 12px; border-radius: 8px; border: 1px solid var(--border);
          background: var(--card); color: var(--dim); cursor: pointer; font-family: 'Geist', sans-serif; }
.b-mini:hover { color: var(--text); background: var(--hover); }
.b-row { display: flex; gap: 8px; align-items: center; }

/* Toast */
#mkToast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--card); border: 1px solid var(--border); color: var(--text);
  padding: 12px 22px; border-radius: 12px; font-size: 14px; z-index: 999;
  opacity: 0; transition: opacity .2s; box-shadow: var(--shadow); }