/* =====================================================================
   molnet-mana.css  —  Mana-inspirerat ljust tema (överlagringslager)
   Laddas EFTER molnet.css. Ändrar bara utseende, inte funktion.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --mana-ink:#16181d;
  --mana-ink-2:#5b6472;
  --mana-muted:#9aa2af;
  --mana-line:#ececf0;
  --mana-line-2:#f2f3f5;
  --mana-sidebar:#fcfcfd;
  --mana-hover:#f3f4f6;
  --mana-active:#eef0f3;
  --mana-bg:#ffffff;
  --mana-card:#ffffff;
  --mana-radius:14px;
}

/* ---- grundfärger (ljust, lugnt) ---- */
html, body{
  background:#f6f7f9 !important;
  color:var(--mana-ink) !important;
  font-family:'Inter','Segoe UI',system-ui,-apple-system,sans-serif !important;
}
body{ background-image:none !important; }

/* ---- layout ---- */
.app-shell{ background:#f6f7f9; }

/* ---- SIDOMENY: ljus ---- */
.sidebar{
  background:var(--mana-sidebar) !important;
  border-right:1px solid var(--mana-line) !important;
  padding:0 !important;
}
.sidebar__header{
  padding:16px 16px 14px !important;
  margin:0 !important;
  border-bottom:1px solid var(--mana-line);
}
.brand{ gap:11px !important; width:100%; }
.brand__icon{
  width:34px !important; height:34px !important;
  border-radius:9px !important;
  background:linear-gradient(135deg,#1b2a4a,#38508a) !important;
  color:#fff !important; font-size:1rem !important; font-weight:800;
}
.brand__text strong{ color:var(--mana-ink) !important; font-size:.98rem !important; font-weight:700 !important; }
.brand__text small{ color:var(--mana-muted) !important; font-size:.72rem !important; }

.navigation{ padding:10px 10px 14px !important; }

/* ---- GRUPP-ETIKETTER: visa dem (Mana-stil) ---- */
.navigation__label{
  display:block !important;
  margin:15px 8px 5px !important;
  color:var(--mana-muted) !important;
  font-size:10.5px !important;
  font-weight:700 !important;
  letter-spacing:.07em !important;
  text-transform:uppercase !important;
}
.navigation__label:first-child{ margin-top:4px !important; }

/* ---- NAV-ITEMS: ljusa, kompakta ---- */
.nav-item{
  min-height:0 !important;
  gap:11px !important;
  margin:1px 0 !important;
  padding:8px 10px !important;
  border:0 !important;
  border-radius:9px !important;
  color:var(--mana-ink-2) !important;
  background:transparent !important;
  font-size:13.5px !important; font-weight:500 !important;
}
.nav-item:hover{ background:var(--mana-hover) !important; color:var(--mana-ink) !important; }
.nav-item.active{
  background:var(--mana-active) !important;
  color:var(--mana-ink) !important; font-weight:600 !important;
}
.nav-item__icon{
  width:18px !important; height:18px !important;
  color:currentColor !important; font-size:1rem !important;
}
.nav-item__icon svg{ width:18px; height:18px; stroke:currentColor; stroke-width:1.8; fill:none; display:block; }
.nav-item.active .nav-item__icon{ color:var(--mana-ink) !important; }
.nav-item__status{ margin-left:auto !important; }

/* räknare/badge till höger i menyn (sätts av mana-js) */
.nav-item__count{ margin-left:auto; font-size:11px; font-weight:700; color:var(--mana-muted); }
.nav-item__pill{ margin-left:auto; font-size:10.5px; font-weight:700; background:var(--mana-ink); color:#fff; border-radius:20px; padding:1px 7px; }

.sidebar__footer{
  padding:8px 10px 12px !important;
  border-top:1px solid var(--mana-line) !important;
  background:var(--mana-sidebar);
}
.sidebar__footer .nav-item{ min-height:0 !important; }

/* ---- TOPPBAR: ljus ---- */
.topbar{
  min-height:0 !important;
  padding:22px 32px 14px !important;
  background:#f6f7f9 !important;
  backdrop-filter:none !important;
  border-bottom:1px solid transparent !important;
}
.topbar h1, #pageTitle{
  font-size:28px !important; font-weight:800 !important; letter-spacing:-.02em !important;
  color:var(--mana-ink) !important;
}
.eyebrow{ color:var(--mana-muted) !important; }
.system-pill{
  background:#111317 !important; color:#fff !important; border:0 !important;
  border-radius:10px !important; min-height:0 !important; padding:7px 12px !important;
  font-size:.74rem !important;
}
.system-pill .status-dot{ box-shadow:none !important; }
.avatar{
  background:#20232a !important; color:#fff !important; border:0 !important;
  width:36px !important; height:36px !important;
}
.icon-button{ border-color:var(--mana-line) !important; color:var(--mana-ink-2) !important; background:#fff !important; }

/* ---- INNEHÅLL ---- */
.content{ padding:4px 32px 40px !important; }
.hero h2{ color:var(--mana-ink) !important; }
.hero__date{ color:var(--mana-muted) !important; }

/* ---- KORT: vita, tunn kant, rundade ---- */
.metric-card,
.panel,
.project-card,
.settings-row,
.empty-state,
.detail-card,
.history-chart,
.work-column,
.apps-project-card,
.flow-row{
  background:var(--mana-card) !important;
  border:1px solid var(--mana-line) !important;
  border-radius:var(--mana-radius) !important;
  box-shadow:0 1px 2px rgba(16,24,40,.04) !important;
}
.panel__header{ border-bottom:1px solid var(--mana-line) !important; }
.panel__header h3, .card h3, h3{ color:var(--mana-ink) !important; }
.metric-card strong{ color:var(--mana-ink) !important; font-weight:700 !important; }
.badge{ border-radius:7px !important; }

/* status-prickar: lugnare */
.status-dot{ box-shadow:none !important; }

/* text-länkar / sekundärknappar */
.text-link, .secondary-button{
  border-color:var(--mana-line) !important; color:var(--mana-ink-2) !important;
  border-radius:8px !important; background:#fff !important;
}
.text-link:hover, .secondary-button:hover{ background:var(--mana-hover) !important; color:var(--mana-ink) !important; }

/* scrollbar lite diskretare i menyn */
.navigation::-webkit-scrollbar{ width:8px; }
.navigation::-webkit-scrollbar-thumb{ background:var(--mana-line); border-radius:8px; }