@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  color-scheme: light;
  --bg: #e2e6ec;
  --bg-secondary: #ffffff;
  --sidebar: #f7f8fb;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-hover: #e9edf2;
  --border: rgba(20,28,42,0.16);
  --border-strong: rgba(20,28,42,0.28);
  --text: #12161d;
  --text-secondary: #3f4854;
  --text-muted: #646d79;
  --accent: #2f6bd8;
  --accent-strong: #1f57c0;
  --accent-soft: rgba(47,107,216,0.10);
  --purple: #6d54d6;
  --purple-soft: rgba(109,84,214,0.10);
  --yellow: #c9871a;
  --yellow-soft: rgba(201,135,26,0.12);
  --danger: #d1443c;
  --danger-soft: rgba(209,68,60,0.10);
  --wch: 20,28,42;
  --bch: 16,24,40;
  --sidebar-bg: #f7f8fb;
  --topbar-bg: rgba(247,248,251,0.88);
  --body-bg: #e2e6ec;
  --shadow: 0 1px 2px rgba(16,24,40,0.06), 0 3px 10px -3px rgba(16,24,40,0.12);
  --sidebar-width: 252px;
  --radius-large: 14px;
  --radius-medium: 10px;
  --radius-small: 7px;
  --transition: 160ms ease;
  --c06210f: #dbeee2;
  --c111316: #e3e7ed;
  --c121417: #e3e7ed;
  --c123528: #dbeee2;
  --c131518: #e3e7ed;
  --c15171b: #ffffff;
  --c16140c: #f7efdd;
  --c16181c: #ffffff;
  --c16302a: #dbeee2;
  --c181b1f: #ffffff;
  --c1a1d22: #f6f8fb;
  --c1c1f24: #f6f8fb;
  --c1e2127: #edf0f5;
  --c1e7d4f: #0f7a46;
  --c201a12: #f7efdd;
  --c202329: #f1f4f8;
  --c22262d: #edf0f5;
  --c23262c: #f1f4f8;
  --c23935d: #128a50;
  --c23b365: #128a50;
  --c24272d: #edf0f5;
  --c262a31: #edf0f5;
  --c2a1a1a: #fbe4e2;
  --c2a2a2a: #e8ecf1;
  --c2a2e35: #e2e7ee;
  --c2b2f36: #e2e7ee;
  --c2d64c4: #245bc0;
  --c2e323a: #dbe1ea;
  --c2f5f4c: #1e7d4f;
  --c2f6b4c: #1e7d4f;
  --c2f6df6: #2f6bd8;
  --c2fa76a: #12a05c;
  --c2fd07f: #12a05c;
  --c333842: #d3dae4;
  --c34c759: #12a05c;
  --c39424f: #c7cfdb;
  --c3a1a1a: #fbe4e2;
  --c3a3116: #f7efdd;
  --c3a414c: #c7cfdb;
  --c3a4150: #c7cfdb;
  --c3b6df6: #2f6bd8;
  --c3f454f: #c7cfdb;
  --c3f7fd6: #2f6bd8;
  --c3f8f5f: #128a50;
  --c454b55: #b7c1cf;
  --c454f5e: #b7c1cf;
  --c46d18a: #12a05c;
  --c4a9a4a: #3f8f3f;
  --c4ade80: #12a05c;
  --c4bb3e8: #2b9fd6;
  --c4c5666: #a6b2c2;
  --c4fc2b0: #12a594;
  --c5a3030: #fbe4e2;
  --c5a4a2c: #f7efdd;
  --c5aa8d8: #2b9fd6;
  --c5b8fd1: #3f72d6;
  --c5fa8ff: #3b6fe0;
  --c5fb98e: #3fa878;
  --c60a5fa: #3b6fe0;
  --c6a7078: #79828e;
  --c6b2f2f: #fbe4e2;
  --c6b3df6: #5b46d6;
  --c6bc2c9: #12a594;
  --c6f7a84: #7a838f;
  --c6f7f97: #2f6bd8;
  --c6f9fd8: #3f72d6;
  --c7a8088: #69727e;
  --c7c828c: #69727e;
  --c7cc86a: #5aa84f;
  --c7d2626: #fbe4e2;
  --c7dc994: #4fb388;
  --c7fc8f0: #2b9fd6;
  --c7fd6a8: #4fb388;
  --c7fd6ff: #4f97cf;
  --c7fdcaf: #4fb388;
  --c8a8f99: #616b78;
  --c8b9fe8: #5f73c4;
  --c8d999f: #616b78;
  --c8f959f: #616b78;
  --c8fe0a8: #4fb388;
  --c9aa0a6: #4c5563;
  --c9aa0ab: #4c5563;
  --c9fdcff: #4f97cf;
  --ca2a8b1: #54606d;
  --ca579c9: #7d4fc0;
  --ca9c3ff: #8aa6e6;
  --cb0b5bd: #4f5966;
  --cb39cff: #6d54d6;
  --cb48ad6: #7d4fc0;
  --cb6bec6: #4f5966;
  --cc5ccd2: #414b57;
  --cc9cdd4: #414b57;
  --cc9d0d6: #414b57;
  --ccbd2d8: #3a4450;
  --ccccfd5: #414b57;
  --ccfe6fb: #d3e3f7;
  --cd2d8dd: #3a4450;
  --cd6dce1: #2f3742;
  --cd8dbe1: #2f3742;
  --cd8dde2: #2f3742;
  --cd99a2b: #c9871a;
  --cd9ccff: #e7e0fb;
  --ce05555: #d1443c;
  --ce0796e: #d1443c;
  --ce0885a: #c9871a;
  --ce08a8a: #cf5750;
  --ce0985a: #c9871a;
  --ce0a060: #c9871a;
  --ce0a0a0: #cf5750;
  --ce0a37a: #c9871a;
  --ce0c48a: #b6841f;
  --ce38fb4: #d84f7b;
  --ce79b8f: #cf5750;
  --ce7b24c: #c9871a;
  --ce7c34c: #c9871a;
  --ce7e9ee: #12161d;
  --ce8cf6b: #c9871a;
  --ce8eaed: #12161d;
  --ce8eaee: #12161d;
  --ce9edf0: #12161d;
  --ceafff3: #e2f3e9;
  --ceef0f4: #181d25;
  --cf87171: #d1443c;
  --cfbbf24: #c9871a;
  --cff8f85: #d1443c;
  --cffb672: #d98a1f;
  --cffce54: #c9871a;
  --cffcf6b: #c9871a;
  --cffdede: #fbe4e2;
  --cffe6e6: #fbe4e2;
  --c444: #c7cfdb;
  --c333: #d3dae4;
  --c555: #b7c1cf;
  --c222: #edf0f5;
  --c666: #79828e;
  --c888: #69727e;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #101113;
  --bg-secondary: #17181a;
  --sidebar: #141517;
  --surface: #17181a;
  --surface-raised: #1d1e21;
  --surface-hover: #232427;
  --border: rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.16);
  --text: #e6e8ec;
  --text-secondary: #a0a7b1;
  --text-muted: #6b7480;
  --accent: #6f93e6;
  --accent-strong: #85a4ec;
  --accent-soft: rgba(111,147,230,0.16);
  --purple: #a08ff0;
  --purple-soft: rgba(160,143,240,0.16);
  --yellow: #e0b24c;
  --yellow-soft: rgba(224,178,76,0.16);
  --danger: #e06b63;
  --danger-soft: rgba(224,107,99,0.16);
  --wch: 255,255,255;
  --bch: 0,0,0;
  --sidebar-bg: #141517;
  --topbar-bg: rgba(20,21,23,0.85);
  --body-bg: #101113;
  --shadow: 0 1px 2px rgba(0,0,0,0.5);
  --c06210f: #06210f;
  --c111316: #111316;
  --c121417: #121417;
  --c123528: #123528;
  --c131518: #131518;
  --c15171b: #15171b;
  --c16140c: #16140c;
  --c16181c: #16181c;
  --c16302a: #16302a;
  --c181b1f: #181b1f;
  --c1a1d22: #1a1d22;
  --c1c1f24: #1c1f24;
  --c1e2127: #1e2127;
  --c1e7d4f: #1e7d4f;
  --c201a12: #201a12;
  --c202329: #202329;
  --c22262d: #22262d;
  --c23262c: #23262c;
  --c23935d: #23935d;
  --c23b365: #379c6c;
  --c24272d: #24272d;
  --c262a31: #262a31;
  --c2a1a1a: #2a1a1a;
  --c2a2a2a: #2a2a2a;
  --c2a2e35: #2a2e35;
  --c2b2f36: #2b2f36;
  --c2d64c4: #4775ca;
  --c2e323a: #2e323a;
  --c2f5f4c: #2f5f4c;
  --c2f6b4c: #2f6b4c;
  --c2f6df6: #5082de;
  --c2fa76a: #37af76;
  --c2fd07f: #37af76;
  --c333842: #333842;
  --c34c759: #37af76;
  --c39424f: #39424f;
  --c3a1a1a: #3a1a1a;
  --c3a3116: #3a3116;
  --c3a414c: #3a414c;
  --c3a4150: #3a4150;
  --c3b6df6: #5082de;
  --c3f454f: #3f454f;
  --c3f7fd6: #5082de;
  --c3f8f5f: #379c6c;
  --c454b55: #454b55;
  --c454f5e: #454f5e;
  --c46d18a: #37af76;
  --c4a9a4a: #5da05d;
  --c4ade80: #37af76;
  --c4bb3e8: #4caedc;
  --c4c5666: #4c5666;
  --c4fc2b0: #37b3a5;
  --c5a3030: #5a3030;
  --c5a4a2c: #5a4a2c;
  --c5aa8d8: #4caedc;
  --c5b8fd1: #5d88dc;
  --c5fa8ff: #5a86e4;
  --c5fb98e: #5db58d;
  --c60a5fa: #5a86e4;
  --c6a7078: #6a7078;
  --c6b2f2f: #6b2f2f;
  --c6b3df6: #7563dc;
  --c6bc2c9: #37b3a5;
  --c6f7a84: #6f7a84;
  --c6f7f97: #5082de;
  --c6f9fd8: #5d88dc;
  --c7a8088: #7a8088;
  --c7c828c: #7c828c;
  --c7cc86a: #74b56b;
  --c7d2626: #7d2626;
  --c7dc994: #6bbf9b;
  --c7fc8f0: #4caedc;
  --c7fd6a8: #7fd6a8;
  --c7fd6ff: #7fd6ff;
  --c7fdcaf: #7fdcaf;
  --c8a8f99: #8a8f99;
  --c8b9fe8: #7889cd;
  --c8d999f: #8d999f;
  --c8f959f: #8f959f;
  --c8fe0a8: #8fe0a8;
  --c9aa0a6: #9aa0a6;
  --c9aa0ab: #9aa0ab;
  --c9fdcff: #9fdcff;
  --ca2a8b1: #a2a8b1;
  --ca579c9: #916bca;
  --ca9c3ff: #a9c3ff;
  --cb0b5bd: #b0b5bd;
  --cb39cff: #846fdc;
  --cb48ad6: #916bca;
  --cb6bec6: #b6bec6;
  --cc5ccd2: #c5ccd2;
  --cc9cdd4: #c9cdd4;
  --cc9d0d6: #c9d0d6;
  --ccbd2d8: #cbd2d8;
  --ccccfd5: #cccfd5;
  --ccfe6fb: #cfe6fb;
  --cd2d8dd: #d2d8dd;
  --cd6dce1: #d6dce1;
  --cd8dbe1: #d8dbe1;
  --cd8dde2: #d8dde2;
  --cd99a2b: #d19a3e;
  --cd9ccff: #d9ccff;
  --ce05555: #d8615b;
  --ce0796e: #d8615b;
  --ce0885a: #d19a3e;
  --ce08a8a: #d6716c;
  --ce0985a: #d19a3e;
  --ce0a060: #d19a3e;
  --ce0a0a0: #d6716c;
  --ce0a37a: #d19a3e;
  --ce0c48a: #c19742;
  --ce38fb4: #de6b90;
  --ce79b8f: #d6716c;
  --ce7b24c: #d19a3e;
  --ce7c34c: #d19a3e;
  --ce7e9ee: #e7e9ee;
  --ce8cf6b: #e8cf6b;
  --ce8eaed: #e8eaed;
  --ce8eaee: #e8eaee;
  --ce9edf0: #e9edf0;
  --ceafff3: #eafff3;
  --ceef0f4: #eef0f4;
  --cf87171: #d8615b;
  --cfbbf24: #d19a3e;
  --cff8f85: #d8615b;
  --cffb672: #df9c42;
  --cffce54: #d19a3e;
  --cffcf6b: #d19a3e;
  --cffdede: #ffdede;
  --cffe6e6: #ffe6e6;
  --c444: #444;
  --c333: #333;
  --c555: #555;
  --c222: #222;
  --c666: #666;
  --c888: #888;
}


* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--bg);
}

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;

  color: var(--text);

  background:
    radial-gradient(
      circle at 65% -10%,
      rgba(var(--wch), 0.03),
      transparent 30%
    ),
    linear-gradient(135deg, var(--c111316), var(--c111316) 60%, var(--c111316));

  font-family:
    Inter,
    "Segoe UI",
    system-ui,
    -apple-system,
    sans-serif;

  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

button,
input,
a {
  font: inherit;
}

button {
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0;
  font-size: 1.35rem;
  font-weight: 620;
  letter-spacing: -0.025em;
}

h2 {
  margin-bottom: 8px;
  font-size: clamp(1.65rem, 3vw, 2.15rem);
  font-weight: 620;
  letter-spacing: -0.04em;
}

h3 {
  margin-bottom: 8px;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}

p {
  color: var(--text-secondary);
  line-height: 1.55;
}

.app-shell {
  min-height: 100vh;
}

/* Sidebar */

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 50;

  display: flex;
  width: var(--sidebar-width);
  flex-direction: column;

  padding: 22px 16px;

  border-right: 1px solid var(--border);
  background:
    linear-gradient(
      180deg,
      rgba(12, 19, 27, 0.99),
      rgba(8, 14, 20, 0.99)
    );
}

.sidebar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 9px 27px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand__icon {
  display: grid;
  width: 43px;
  height: 43px;
  place-items: center;

  border: 0;
  border-radius: 0;

  color: var(--text);
  background: transparent;
  box-shadow: none;

  font-size: 2rem;
}

.brand__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.brand__text strong {
  font-size: 1.18rem;
  font-weight: 650;
  letter-spacing: -0.025em;
}

.brand__text small {
  color: var(--text-secondary);
  font-size: 0.68rem;
  letter-spacing: 0;
  text-transform: none;
}

.navigation {
  flex: 1;
  overflow-y: auto;
}

.navigation__label {
  display: none;
}

.nav-item {
  position: relative;

  display: flex;
  width: 100%;
  min-height: 48px;
  align-items: center;
  gap: 13px;

  margin: 4px 0;
  padding: 0 14px;

  border: 1px solid transparent;
  border-radius: var(--radius-small);

  color: var(--cb6bec6);
  background: transparent;

  cursor: pointer;
  transition:
    background var(--transition),
    border-color var(--transition),
    color var(--transition);
}

.nav-item:hover {
  color: var(--text);
  background: rgba(var(--wch), 0.035);
}

.nav-item.active {
  color: var(--text);
  border-color: rgba(var(--wch), 0.035);
  background:
    linear-gradient(
      90deg,
      rgba(var(--wch), 0.13),
      rgba(var(--wch), 0.09)
    );
}

.nav-item.active::before {
  display: none;
}

.nav-item__icon {
  display: grid;
  width: 24px;
  place-items: center;

  color: var(--cc9d0d6);
  font-size: 1.08rem;
}

.nav-item.active .nav-item__icon {
  color: var(--text);
}

.nav-item__status {
  width: 7px;
  height: 7px;
  margin-left: auto;

  border-radius: 50%;
  background: var(--text-muted);
}

.nav-item__status.online {
  background: var(--accent);
  box-shadow: 0 0 8px rgba(120, 217, 139, 0.5);
}

.nav-item--button {
  border: 0;
  text-align: left;
}

.sidebar__footer {
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.sidebar__close {
  display: none;
}

/* Main */

.main {
  min-height: 100vh;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;

  display: flex;
  min-height: 86px;
  align-items: center;
  justify-content: space-between;

  padding: 17px 30px;

  border-bottom: 0;
  background: rgba(8, 13, 18, 0.91);
  backdrop-filter: blur(16px);
}

.topbar__left,
.topbar__right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.eyebrow {
  margin-bottom: 4px;

  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.icon-button {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;

  border: 1px solid var(--border);
  border-radius: var(--radius-medium);

  color: var(--ccbd2d8);
  background: transparent;

  cursor: pointer;
}

.icon-button:hover {
  border-color: var(--border-strong);
  background: rgba(var(--wch), 0.035);
}

.menu-button {
  display: none;
}

.system-pill {
  display: flex;
  min-height: 42px;
  align-items: center;
  gap: 9px;

  padding: 0 15px;

  border: 1px solid var(--border);
  border-radius: var(--radius-medium);

  color: var(--cc5ccd2);
  background: rgba(var(--wch), 0.012);

  font-size: 0.77rem;
}

.avatar {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;

  border: 1px solid var(--border);
  border-radius: 50%;

  color: var(--text);
  background: var(--c202329);

  font-size: 0.77rem;
  font-weight: 650;
}

.status-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  flex: 0 0 auto;

  border-radius: 50%;
  background: var(--accent);

  box-shadow:
    0 0 0 4px rgba(111,127,151,0.08),
    0 0 8px rgba(120, 217, 139, 0.45);
}

.status-dot.warning {
  background: var(--yellow);
}

.status-dot.danger {
  background: var(--danger);
}

.content {
  width: min(1540px, 100%);
  margin: 0 auto;
  padding: 8px 30px 38px;
}

.page {
  display: none;
  animation: page-in 180ms ease;
}

.page.active {
  display: block;
}

@keyframes page-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Hero becomes compact greeting */

.hero {
  position: relative;

  display: flex;
  min-height: 0;
  align-items: center;
  justify-content: space-between;
  overflow: visible;

  margin-bottom: 26px;
  padding: 0;

  border: 0;
  border-radius: 0;

  background: transparent;
  box-shadow: none;
}

.hero::after {
  display: none;
}

.hero h2 {
  margin-bottom: 4px;
  font-size: 1.55rem;
}

.hero p {
  display: none;
}

.hero__date {
  margin-bottom: 5px;

  color: var(--text-secondary);
  font-size: 0.77rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: capitalize;
}

.hero__cloud {
  display: none;
}

/* Cards */

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;

  margin-bottom: 20px;
}

  box-shadow: none;
  backdrop-filter: none;
}

.metric-card {
  position: relative;
  min-height: 138px;
  overflow: hidden;
  padding: 20px;
}

.metric-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 13px;

  color: var(--text);
  font-size: 0.82rem;
  font-weight: 520;
}

.metric-card__icon {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;

  border: 0;
  border-radius: 0;

  color: var(--cd2d8dd);
  background: transparent;
}

.metric-card strong {
  display: block;

  margin-bottom: 5px;

  font-size: 1.8rem;
  font-weight: 430;
  letter-spacing: -0.045em;
}

.metric-card small {
  color: var(--text-secondary);
  font-size: 0.73rem;
}

.progress {
  position: absolute;
  right: 17px;
  bottom: 31px;

  width: 37%;
  height: 40px;
  overflow: visible;

  margin: 0;

  border-radius: 0;
  background: transparent;
}

.progress::before {
  position: absolute;
  inset: auto 0 0;

  height: 65%;

  background:
    linear-gradient(
      to top,
      rgba(111,127,151,0.13),
      transparent
    );

  clip-path: polygon(
    0 82%,
    11% 62%,
    21% 71%,
    31% 38%,
    43% 53%,
    53% 28%,
    65% 47%,
    78% 17%,
    89% 31%,
    100% 4%,
    100% 100%,
    0 100%
  );

  content: "";
}

.progress span {
  position: absolute;
  inset: auto 0 16px;

  width: 100% !important;
  height: 2px;

  border-radius: 0;

  background: var(--accent);

  clip-path: polygon(
    0 70%,
    11% 45%,
    21% 59%,
    31% 23%,
    43% 45%,
    53% 12%,
    65% 37%,
    78% 0,
    89% 21%,
    100% 0,
    100% 75%,
    89% 43%,
    78% 24%,
    65% 61%,
    53% 36%,
    43% 69%,
    31% 48%,
    21% 83%,
    11% 69%,
    0 95%
  );

  transition: none;
}

.metric-status {
  display: flex;
  min-height: 18px;
  align-items: center;
  gap: 8px;

  margin-bottom: 7px;

  color: var(--text-secondary);
  font-size: 0.75rem;
}

/* Dashboard content */

.dashboard-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr 1.25fr;
  gap: 18px;
}

.panel {
  padding: 20px;
}

.panel--wide {
  grid-column: auto;
}

.dashboard-grid > .panel:nth-child(1) {
  grid-column: 1;
  grid-row: 1;
}

.dashboard-grid > .panel:nth-child(2) {
  grid-column: 3;
  grid-row: 1;
}

.dashboard-grid > .panel:nth-child(3) {
  grid-column: 2;
  grid-row: 1;
}

.dashboard-grid > .panel:nth-child(4) {
  grid-column: 1 / span 2;
  grid-row: 2;
}

.panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  margin: -20px -20px 18px;
  padding: 16px 20px;

  border-bottom: 1px solid var(--border);
}

.panel__header .eyebrow {
  display: none;
}

.panel__header h3 {
  margin: 0;
}

.text-link,
.secondary-button {
  min-height: 34px;
  padding: 0 12px;

  border: 1px solid var(--border);
  border-radius: var(--radius-small);

  color: var(--text-secondary);
  background: transparent;

  font-size: 0.7rem;
}

.text-link {
  display: inline-flex;
  align-items: center;
}

.text-link:hover,
.secondary-button:hover {
  color: var(--text);
  border-color: var(--border-strong);
  background: rgba(var(--wch), 0.025);
}

.empty-state {
  display: grid;
  min-height: 280px;
  place-items: center;

  padding: 38px;

  text-align: center;
}

.empty-state--compact {
  display: flex;
  min-height: 310px;
  align-items: flex-start;
  gap: 15px;

  padding: 18px;

  border: 0;
  border-radius: 0;

  background: transparent;
  box-shadow: none;
  text-align: left;
}

.empty-state--compact .empty-state__icon {
  margin-top: 3px;
}

.empty-state--compact p {
  margin: 5px 0 0;
}

.empty-state__icon,
.placeholder-visual {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;

  border: 1px solid var(--border);
  border-radius: var(--radius-medium);

  color: var(--cd6dce1);
  background: rgba(var(--wch), 0.02);

  font-size: 1rem;
}

.container-list,
.containers-table {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.container-row {
  display: flex;
  min-height: 47px;
  align-items: center;
  justify-content: space-between;
  gap: 15px;

  padding: 0 4px;

  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;

  background: transparent;
}

.container-row:last-child {
  border-bottom: 0;
}

.container-row__name {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}

.container-row__name strong {
  overflow: hidden;

  color: var(--ce9edf0);
  font-size: 0.76rem;
  font-weight: 500;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.container-row__status {
  color: var(--text-secondary);
  font-size: 0.7rem;
  text-transform: capitalize;
}

.skeleton {
  height: 47px;

  border-bottom: 1px solid var(--border);
  border-radius: 0;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(var(--wch), 0.035),
      transparent
    );

  background-size: 200% 100%;
  animation: skeleton 1.3s infinite linear;
}

@keyframes skeleton {
  to {
    background-position: -200% 0;
  }
}

.briefing-preview {
  display: flex;
  min-height: 270px;
  align-items: flex-start;
  gap: 13px;
}

.briefing-preview__icon {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  place-items: center;

  border: 1px solid var(--border);
  border-radius: var(--radius-medium);

  color: var(--cd8dde2);
  background: transparent;

  font-size: 1rem;
}

.briefing-preview p {
  margin-bottom: 0;
}

.project-preview {
  display: flex;
  min-height: 128px;
  align-items: center;
  gap: 16px;
}

.project-preview__icon,
.project-card__icon {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  place-items: center;

  border: 1px solid var(--border);
  border-radius: var(--radius-medium);

  background: rgba(var(--wch), 0.025);
}

.project-preview__body {
  flex: 1;
  min-width: 0;
}

.project-preview__title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.project-preview__body p {
  margin: 5px 0 14px;
}

.project-preview__percent {
  color: var(--text);
  font-size: 0.75rem;
  font-weight: 600;
}

.project-progress {
  width: 100%;
  height: 5px;
  overflow: hidden;

  margin-bottom: 0;

  border-radius: 999px;
  background: rgba(var(--wch), 0.07);
}

.project-progress span {
  display: block;
  height: 100%;

  border-radius: inherit;
  background: var(--accent);
}

/* Generic pages */

.page-intro {
  margin-bottom: 25px;
}

.page-intro > p:last-child {
  max-width: 650px;
  margin-bottom: 0;
}

.page-intro--row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.placeholder-grid,
.project-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.placeholder-grid .panel {
  min-height: 230px;
}

.placeholder-grid .placeholder-visual {
  margin-bottom: 25px;
}

.project-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.project-card {
  min-height: 235px;
  padding: 20px;
}

.project-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 24px;
}

.project-card p {
  min-height: 50px;
}

.project-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;

  color: var(--text-muted);
  font-size: 0.7rem;
}

.project-card__meta strong {
  color: var(--text);
}

.project-card--new {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;

  border-style: dashed;
  color: var(--text-secondary);
  cursor: pointer;
}

.project-card--new:hover {
  color: var(--text);
  border-color: var(--border-strong);
  background: var(--surface-hover);
}

.badge {
  display: inline-flex;
  min-height: 24px;
  align-items: center;

  padding: 0 9px;

  border: 1px solid rgba(111,127,151,0.13);
  border-radius: 5px;

  color: var(--accent);
  background: var(--accent-soft);

  font-size: 0.64rem;
  font-weight: 600;
}

.badge--muted {
  color: var(--text-secondary);
  border-color: var(--border);
  background: rgba(var(--wch), 0.025);
}

.briefing-card {
  display: flex;
  min-height: 250px;
  align-items: center;
  gap: 28px;
}

.briefing-card__orb {
  display: grid;
  width: 80px;
  height: 80px;
  flex: 0 0 auto;
  place-items: center;

  border: 1px solid var(--border);
  border-radius: 18px;

  color: var(--accent);
  background: var(--accent-soft);

  box-shadow: none;
  font-size: 1.7rem;
}

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

.settings-row {
  display: flex;
  min-height: 94px;
  align-items: center;
  justify-content: space-between;
  gap: 25px;

  padding: 20px 22px;
}

.settings-row p {
  margin: 6px 0 0;
}

.sidebar-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;

  visibility: hidden;
  opacity: 0;

  background: rgba(var(--bch), 0.72);

  transition:
    opacity var(--transition),
    visibility var(--transition);
}

/* Responsive */

@media (max-width: 1180px) {
  .metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-grid > .panel:nth-child(n) {
    grid-column: auto;
    grid-row: auto;
  }

  .dashboard-grid > .panel:nth-child(4) {
    grid-column: span 2;
  }

  .project-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform var(--transition);
  }

  body.sidebar-open .sidebar {
    transform: translateX(0);
  }

  body.sidebar-open .sidebar-overlay {
    visibility: visible;
    opacity: 1;
  }

  .sidebar__close,
  .menu-button {
    display: grid;
  }

  .main {
    margin-left: 0;
  }

  .topbar {
    min-height: 74px;
    padding: 14px 18px;
  }

  .system-pill {
    display: none;
  }

  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-grid > .panel:nth-child(4) {
    grid-column: auto;
  }

  .project-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 590px) {
  .content {
    padding: 8px 14px 30px;
  }

  .metrics-grid,
  .placeholder-grid {
    grid-template-columns: 1fr;
  }

  .metric-card {
    min-height: 130px;
  }

  .panel,
  .project-card {
    padding: 18px;
  }

  .panel__header {
    margin: -18px -18px 17px;
    padding: 15px 18px;
  }

  .page-intro--row {
    align-items: flex-start;
    flex-direction: column;
  }

  .briefing-card,
  .settings-row {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}


/* Infrastructure v3 */

.infrastructure-details {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.detail-card {
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(var(--wch), 0.07);
  border-radius: 14px;
  background: rgba(var(--wch), 0.025);
}

.detail-card span {
  display: block;
  margin-bottom: 8px;
  color: var(--muted, var(--c8d999f));
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.detail-card strong {
  display: block;
  overflow: hidden;
  font-size: 1rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-panel {
  margin-bottom: 18px;
}

.history-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.history-chart {
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(var(--wch), 0.07);
  border-radius: 14px;
  background:
    linear-gradient(
      180deg,
      rgba(120, 217, 139, 0.035),
      rgba(var(--wch), 0.012)
    );
}

.history-chart__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.history-chart__header div > span {
  display: block;
  margin-bottom: 5px;
  color: var(--muted, var(--c8d999f));
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.history-chart__header strong {
  font-size: 1.35rem;
}

.history-chart__header > span {
  color: var(--muted, var(--c8d999f));
  font-size: 0.75rem;
  white-space: nowrap;
}

.history-chart svg {
  display: block;
  width: 100%;
  height: 180px;
  overflow: hidden;
}

.history-chart svg text {
  fill: var(--muted, var(--c8d999f));
  font-size: 20px;
}

.chart-grid-line {
  stroke: rgba(var(--wch), 0.055);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.chart-area {
  fill: rgba(111,127,151,0.08);
}

.chart-line {
  fill: none;
  stroke: var(--c6f7f97);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.history-footer {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  margin-top: 14px;
  color: var(--muted, var(--c8d999f));
  font-size: 0.78rem;
}

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

  .infrastructure-details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .infrastructure-details {
    grid-template-columns: 1fr;
  }

  .history-chart svg {
    height: 150px;
  }
}

/* Arbete - tre kolumner */
.work-category-toggle { display: flex; gap: 0.5rem; }
.work-cat-btn {
  padding: 0.4rem 1rem; border-radius: 999px; border: 1px solid var(--c555);
  background: transparent; color: inherit; cursor: pointer; font-size: 0.85rem;
}
.work-cat-btn.active { background: rgba(var(--wch),0.15); border-color: var(--c888); }

.work-columns {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem; margin-top: 1rem;
}
.work-column {
  border: 1px solid var(--c2a2a2a); border-radius: 10px; padding: 1rem;
  display: flex; flex-direction: column; gap: 0.75rem; min-height: 200px;
}
.work-column__header {
  display: flex; justify-content: space-between; align-items: center;
}
.work-column__body { display: flex; flex-direction: column; gap: 0.6rem; }
.work-empty { opacity: 0.6; font-size: 0.85rem; }

.work-card {
  border: 1px solid var(--c333); border-radius: 8px; padding: 0.75rem;
  display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.9rem;
}
.work-card.confirm { border-color: var(--cd99a2b); background: rgba(217,154,43,0.08); }
.work-card__title { font-weight: 600; }
.work-card__meta { font-size: 0.75rem; opacity: 0.65; display: flex; gap: 0.5rem; flex-wrap: wrap; }
.work-card__actions { display: flex; gap: 0.5rem; margin-top: 0.25rem; }
.work-card__actions button {
  font-size: 0.75rem; padding: 0.25rem 0.6rem; border-radius: 6px;
  border: 1px solid var(--c555); background: transparent; color: inherit; cursor: pointer;
}
.work-card__actions button:hover { background: rgba(var(--wch),0.08); }
.work-badge-priority { font-size: 0.7rem; padding: 0.05rem 0.45rem; border-radius: 999px; border: 1px solid currentColor; }
.work-badge-priority.high { color: var(--ce05555); }
.work-badge-priority.medium { color: var(--cd99a2b); }
.work-badge-priority.low { color: var(--c4a9a4a); }

.work-card__sender {
  font-size: 0.78rem;
  opacity: 0.6;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.work-card__desc {
  opacity: 0.75;
}

.work-card__context {
  font-size: 0.82rem;
  background: rgba(120,132,152,0.12);
  border-left: 2px solid rgba(120,132,152,0.4);
  padding: 0.4rem 0.6rem;
  border-radius: 4px;
}
.work-card__suggestion {
  font-size: 0.82rem;
  background: rgba(217,154,43,0.1);
  border-left: 2px solid rgba(217,154,43,0.5);
  padding: 0.4rem 0.6rem;
  border-radius: 4px;
}

/* Slutfört arbete - kalendervy */
.cw-calendar-header {
  display: flex; align-items: center; justify-content: center; gap: 1.5rem;
  margin: 1.5rem 0 1rem;
}
.cw-calendar-header h3 { min-width: 180px; text-align: center; margin: 0; }

.cw-calendar-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.4rem;
}
.cw-day-label {
  text-align: center; font-size: 0.75rem; opacity: 0.6; padding-bottom: 0.3rem;
}
.cw-day-cell {
  aspect-ratio: 1; border: 1px solid var(--c2a2a2a); border-radius: 8px;
  padding: 0.4rem; cursor: pointer; display: flex; flex-direction: column;
  justify-content: space-between; transition: background 0.15s;
}
.cw-day-cell:hover { background: rgba(var(--wch),0.06); }
.cw-day-cell.empty { border: none; cursor: default; }
.cw-day-cell.empty:hover { background: none; }
.cw-day-cell.has-activity { border-color: rgba(150,158,170,0.30); background: rgba(150,158,170,0.06); }
.cw-day-number { font-size: 0.85rem; opacity: 0.8; }
.cw-day-counts { display: flex; gap: 0.3rem; flex-wrap: wrap; font-size: 0.65rem; }
.cw-count-badge {
  padding: 0.05rem 0.35rem; border-radius: 999px; background: rgba(var(--wch),0.1);
}
.cw-count-badge.sent { color: var(--c5aa8d8); }
.cw-count-badge.tasks { color: var(--c4a9a4a); }

.cw-detail-panel {
  margin-top: 1.5rem; border: 1px solid var(--c333); border-radius: 10px; padding: 1.25rem;
}
.cw-detail-header {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;
}
.cw-detail-section { margin-bottom: 1.25rem; }
.cw-detail-section h4 { font-size: 0.9rem; opacity: 0.7; margin-bottom: 0.5rem; }
.cw-detail-item {
  border-left: 2px solid var(--c444); padding: 0.4rem 0.7rem; margin-bottom: 0.5rem; font-size: 0.9rem;
}
.cw-detail-item.sent { border-left-color: var(--c5aa8d8); }
.cw-detail-item.task { border-left-color: var(--c4a9a4a); }
.cw-detail-item__meta { font-size: 0.75rem; opacity: 0.6; margin-top: 0.2rem; }
.cw-empty-detail { opacity: 0.6; font-size: 0.9rem; }

.cw-stats-row {
  display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem;
}
.cw-stat {
  font-size: 0.8rem; padding: 0.3rem 0.7rem; border-radius: 999px;
  background: rgba(var(--wch),0.06); border: 1px solid var(--c333);
}
.cw-ai-summary {
  font-size: 0.9rem; background: rgba(140,110,220,0.1); border-left: 2px solid rgba(140,110,220,0.5);
  padding: 0.7rem 0.9rem; border-radius: 6px; margin-bottom: 1.25rem;
}

.cw-view-toggle { display: flex; gap: 0.5rem; margin-top: 1rem; }
.cw-view-btn {
  padding: 0.35rem 0.9rem; border-radius: 999px; border: 1px solid var(--c555);
  background: transparent; color: inherit; cursor: pointer; font-size: 0.85rem;
}
.cw-view-btn.active { background: rgba(var(--wch),0.15); border-color: var(--c888); }

.cw-week-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.6rem;
}
.cw-week-cell {
  border: 1px solid var(--c2a2a2a); border-radius: 10px; padding: 0.9rem;
  min-height: 220px; cursor: pointer; display: flex; flex-direction: column; gap: 0.6rem;
  transition: background 0.15s;
}
.cw-week-cell:hover { background: rgba(var(--wch),0.05); }
.cw-week-cell.has-activity { border-color: rgba(150,158,170,0.30); background: rgba(150,158,170,0.05); }
.cw-week-cell__header {
  display: flex; flex-direction: column; gap: 0.1rem; font-size: 0.85rem;
}
.cw-week-cell__header span { opacity: 0.6; font-size: 0.75rem; }
.cw-week-summary {
  font-size: 0.82rem; opacity: 0.85; margin-top: auto;
  border-top: 1px solid var(--c2a2a2a); padding-top: 0.5rem;
}

/* Applikationer */
.apps-project-list { display: flex; flex-direction: column; gap: 1rem; }
.apps-project-card {
  border: 1px solid var(--c2a2a2a); border-radius: 10px; padding: 1rem;
}
.apps-project-card__title {
  font-size: 0.9rem; opacity: 0.7; margin-bottom: 0.75rem; text-transform: uppercase; letter-spacing: 0.02em;
}
.apps-container-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.5rem 0; border-bottom: 1px solid var(--c222);
}
.apps-container-row:last-child { border-bottom: none; }
.apps-container-row__name { display: flex; align-items: center; gap: 0.6rem; }
.apps-container-row__image { font-size: 0.75rem; opacity: 0.55; }
.apps-container-row__ports { font-size: 0.75rem; opacity: 0.6; }

.apps-domain-list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.apps-domain-chip {
  padding: 0.3rem 0.8rem; border-radius: 999px; border: 1px solid var(--c333);
  font-size: 0.82rem; background: rgba(var(--wch),0.04);
}

/* Flöden */
.flows-list { display: flex; flex-direction: column; gap: 0.6rem; }
.flow-row {
  display: flex; justify-content: space-between; align-items: center;
  border: 1px solid var(--c2a2a2a); border-radius: 10px; padding: 0.85rem 1.1rem;
}
.flow-row__left { display: flex; align-items: center; gap: 0.75rem; }
.flow-row__meta { font-size: 0.78rem; opacity: 0.6; margin-top: 0.15rem; }
.flow-health-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.flow-health-dot.healthy, .flow-health-dot.active { background: var(--c4a9a4a); }
.flow-health-dot.stale { background: var(--cd99a2b); }
.flow-health-dot.never-run, .flow-health-dot.unknown { background: var(--c666); }
.flow-badge {
  font-size: 0.72rem; padding: 0.15rem 0.6rem; border-radius: 999px;
  border: 1px solid var(--c444); opacity: 0.75;
}

/* Fix: sidebar/content overlap */
@media (min-width: 640px) {
  .app-shell { display: flex; align-items: stretch; }
  .sidebar { position: relative; flex-shrink: 0; }
  .main { flex: 1 1 auto; min-width: 0; }
}
.content { max-width: 100%; overflow-x: hidden; box-sizing: border-box; }

/* Server-info-panel */
.server-info-body { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.75rem; }
.server-info-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.5rem 0; border-bottom: 1px solid var(--c222);
}
.server-info-row span { opacity: 0.6; font-size: 0.85rem; }
.server-info-row code {
  background: rgba(var(--wch),0.06); padding: 0.2rem 0.6rem; border-radius: 6px;
  font-family: monospace; font-size: 0.85rem; user-select: all;
}
.server-info-notes {
  font-size: 0.85rem; opacity: 0.75; margin-top: 0.5rem;
  border-left: 2px solid var(--c444); padding-left: 0.8rem;
}

/* Chart X-axis labels */
.chart-x-labels {
  display: flex; justify-content: space-between; font-size: 0.7rem; opacity: 0.55; margin-top: 0.3rem;
}


.server-badge {
  font-size: 0.7rem; padding: 0.15rem 0.6rem; border-radius: 999px;
  background: rgba(150,158,170,0.10); border: 1px solid rgba(150,158,170,0.30);
  color: var(--c7dc994); font-weight: 500; vertical-align: middle; margin-left: 0.5rem;
}

/* SLUTGILTIG LAYOUT-FIX - ersätter alla tidigare lappar */
.metric-card,
.panel,
.project-card,
.settings-row,
.empty-state {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-large) !important;
  background: var(--bg) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

@media (min-width: 821px) {
  .app-shell { display: flex; }
  .sidebar { position: relative !important; transform: none !important; flex-shrink: 0; }
  .main { margin-left: 0 !important; flex: 1 1 auto; min-width: 0; }
}

.nav-item__status.danger {
  background: var(--danger);
  box-shadow: 0 0 8px rgba(240, 111, 111, 0.5);
}

.wc-bulk-btn {
  font-size: 0.7rem; padding: 0.2rem 0.55rem; border-radius: 6px;
  border: 1px solid var(--c444); background: transparent; color: inherit; cursor: pointer;
}
.wc-bulk-btn:hover { background: rgba(var(--wch),0.08); }
.work-card__chatname {
  font-size: 0.72rem; opacity: 0.55; cursor: pointer; display: inline-flex; align-items: center; gap: 0.3rem;
}
.work-card__chatname:hover { opacity: 0.9; }

.ai-cost-bar {
  width: 100%; height: 8px; margin-top: 0.5rem;
  background: rgba(var(--wch),0.06); border-radius: 999px; overflow: hidden;
}
.ai-cost-bar span {
  display: block; height: 100%; background: var(--accent); border-radius: 999px;
}
/*
  LAGG TILL DETTA SIST i /root/molnet/app/css/molnet.css
*/

.trading-pos-filter-btn {
  border: 1px solid rgba(var(--wch), 0.15);
  background: transparent;
  color: inherit;
  border-radius: 999px;
  padding: 0.3rem 0.9rem;
  font-size: 0.8rem;
  cursor: pointer;
}
.trading-pos-filter-btn.active {
  background: rgba(var(--wch), 0.15);
}

.trading-feed-row.ignored {
  opacity: 0.55;
}

.trading-pnl.positive {
  color: var(--c4ade80);
  font-weight: 600;
}
.trading-pnl.negative {
  color: var(--cf87171);
  font-weight: 600;
}
/*
  LAGG TILL DETTA SIST i /root/molnet/app/css/molnet.css
  (ERSATTER en eventuell tidigare Trading-CSS)
*/

.trading-pos-filter-btn {
  border: 1px solid rgba(var(--wch), 0.15);
  background: transparent;
  color: inherit;
  border-radius: 999px;
  padding: 0.3rem 0.9rem;
  font-size: 0.8rem;
  cursor: pointer;
}
.trading-pos-filter-btn.active {
  background: rgba(var(--wch), 0.15);
}

.trading-feed-row.ignored {
  opacity: 0.55;
}

.trading-pnl-row {
  margin-top: 0.4rem;
  font-weight: 700;
  font-size: 1.05rem;
}
.trading-pnl-row.positive {
  color: var(--c4ade80);
}
.trading-pnl-row.negative {
  color: var(--cf87171);
}

.trading-exit-rule {
  margin-top: 0.5rem;
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
  background: rgba(var(--wch), 0.05);
  font-size: 0.8rem;
  opacity: 0.85;
  line-height: 1.4;
}

.trading-description-panel {
  margin-top: 1rem;
}
.trading-short-desc {
  margin: 0;
  opacity: 0.9;
}
.trading-long-desc {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(var(--wch), 0.1);
  font-size: 0.9rem;
  line-height: 1.6;
  opacity: 0.85;
}
.trading-long-desc p {
  margin: 0 0 0.75rem 0;
}

#tradingTimeRangeSelector {
  margin-bottom: 0.75rem;
}

.trading-chart-legend {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.75rem;
  opacity: 0.8;
  margin-bottom: 0.5rem;
}
.legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 0.3rem;
}
.legend-dot.buy { background: var(--c60a5fa); }
.legend-dot.sell-win { background: var(--c4ade80); }
.legend-dot.sell-loss { background: var(--cf87171); }
.legend-dot.deposit { background: var(--cfbbf24); }

.chart-marker {
  stroke: rgba(var(--bch), 0.4);
  stroke-width: 1;
  cursor: pointer;
}
.chart-marker.buy { fill: var(--c60a5fa); }
.chart-marker.sell-win { fill: var(--c4ade80); }
.chart-marker.sell-loss { fill: var(--cf87171); }
.chart-marker.deposit { fill: var(--cfbbf24); }


/* --- SKR-flöden: gruppering + historiktabell (tillagt av patch_molnet_skr.py) --- */
.flow-group { margin-bottom: 1.5rem; }
.flow-group__header {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.6;
  margin: 1rem 0 0.5rem;
}
.kontaktregister-history { margin-top: 1.5rem; }
.kontaktregister-history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.kontaktregister-history-table th,
.kontaktregister-history-table td {
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid rgba(var(--wch), 0.08);
}
.kontaktregister-history-table th {
  font-weight: 600;
  opacity: 0.7;
}
/*
  LAGG TILL DETTA SIST i /root/molnet/app/css/molnet.css
  (ERSATTER en eventuell tidigare Trading-CSS)
*/

.trading-pos-filter-btn {
  border: 1px solid rgba(var(--wch), 0.15);
  background: transparent;
  color: inherit;
  border-radius: 999px;
  padding: 0.3rem 0.9rem;
  font-size: 0.8rem;
  cursor: pointer;
}
.trading-pos-filter-btn.active {
  background: rgba(var(--wch), 0.15);
}

.trading-feed-row.ignored {
  opacity: 0.55;
}

.trading-pnl-row {
  margin-top: 0.4rem;
  font-weight: 700;
  font-size: 1.05rem;
}
.trading-pnl-row.positive {
  color: var(--c4ade80);
}
.trading-pnl-row.negative {
  color: var(--cf87171);
}

.trading-exit-rule {
  margin-top: 0.5rem;
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
  background: rgba(var(--wch), 0.05);
  font-size: 0.8rem;
  opacity: 0.85;
  line-height: 1.4;
}

.trading-description-panel {
  margin-top: 1rem;
}
.trading-short-desc {
  margin: 0;
  opacity: 0.9;
}
.trading-long-desc {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(var(--wch), 0.1);
  font-size: 0.9rem;
  line-height: 1.6;
  opacity: 0.85;
}
.trading-long-desc p {
  margin: 0 0 0.75rem 0;
}

#tradingTimeRangeSelector {
  margin-bottom: 0.75rem;
}

.trading-chart-legend {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.75rem;
  opacity: 0.8;
  margin-bottom: 0.5rem;
}
.legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 0.3rem;
}
.legend-dot.buy { background: var(--c60a5fa); }
.legend-dot.sell-win { background: var(--c4ade80); }
.legend-dot.sell-loss { background: var(--cf87171); }
.legend-dot.deposit { background: var(--cfbbf24); }

.chart-marker {
  stroke: rgba(var(--bch), 0.4);
  stroke-width: 1;
  cursor: pointer;
}
.chart-marker.buy { fill: var(--c60a5fa); }
.chart-marker.sell-win { fill: var(--c4ade80); }
.chart-marker.sell-loss { fill: var(--cf87171); }
.chart-marker.deposit { fill: var(--cfbbf24); }
/*
  LAGG TILL DETTA SIST i /root/molnet/app/css/molnet.css
  (ERSATTER en eventuell tidigare Trading-CSS helt)
*/

/* ---- Globalt tema: gront -> ljusblatt for staplar/enkla grafer ----
   OBS: paverkar INTE Trading-grafens flerfargade linjer (de anvander
   inline style per serie, vilket alltid vinner over dessa klass-regler) */
.progress span {
  background: var(--c60a5fa);
}
.chart-line {
  stroke: var(--c60a5fa);
}
.chart-area {
  fill: rgba(96, 165, 250, 0.15);
}

/* ---- Fix: SVG-diagram som "lackte" utanfor sin box in i grannlador ---- */
.history-chart,
.trading-chart-wrapper {
  overflow: hidden;
  position: relative;
}
.history-chart svg,
.trading-chart-wrapper svg {
  display: block;
  overflow: hidden;
}

/* ---- Fix: text i metric-card/detail-card som gick in i marginalen ---- */
.metric-card,
.detail-card {
  box-sizing: border-box;
  overflow: hidden;
}
.metric-card strong,
.metric-card small,
.detail-card strong,
.detail-card span {
  display: block;
  max-width: 100%;
  overflow-wrap: break-word;
}

/* ---- Trading: 5-kolumners metrics-grid ---- */
.trading-metrics-grid {
  grid-template-columns: repeat(5, 1fr);
}
@media (max-width: 1200px) {
  .trading-metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---- Trading: 3-kolumners layout (Signalflode / Positioner / Historik) ---- */
.trading-columns {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1.2fr;
  gap: 1rem;
  margin-top: 1rem;
  align-items: start;
}
@media (max-width: 1100px) {
  .trading-columns {
    grid-template-columns: 1fr;
  }
}
.trading-column--positions .work-card {
  padding: 1rem 1.1rem;
}

.trading-pos-filter-btn,
.trading-series-btn {
  border: 1px solid rgba(var(--wch), 0.15);
  background: transparent;
  color: inherit;
  border-radius: 999px;
  padding: 0.3rem 0.9rem;
  font-size: 0.8rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.trading-pos-filter-btn.active,
.trading-series-btn.active {
  background: rgba(var(--wch), 0.15);
}
.trading-series-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.trading-feed-row.ignored {
  opacity: 0.55;
}

.trading-pnl-row {
  margin-top: 0.4rem;
  font-weight: 700;
  font-size: 1.05rem;
}
.trading-pnl-row.positive,
.trading-top-performer-row .positive,
.trading-live-gain.positive {
  color: var(--c4ade80);
}
.trading-pnl-row.negative,
.trading-top-performer-row .negative,
.trading-live-gain.negative {
  color: var(--cf87171);
}

.trading-live-gain {
  margin-top: 0.5rem;
  font-weight: 600;
  font-size: 0.95rem;
}

.trading-exit-rule {
  margin-top: 0.5rem;
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
  background: rgba(var(--wch), 0.05);
  font-size: 0.8rem;
  opacity: 0.85;
  line-height: 1.4;
}

.trading-description-panel {
  margin-top: 1rem;
}
.trading-short-desc {
  margin: 0;
  opacity: 0.9;
}
.trading-long-desc {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(var(--wch), 0.1);
  font-size: 0.9rem;
  line-height: 1.6;
  opacity: 0.85;
}
.trading-long-desc p {
  margin: 0 0 0.75rem 0;
}

#tradingTimeRangeSelector,
#tradingSeriesFilter {
  margin-bottom: 0.75rem;
}

.trading-chart-legend {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.75rem;
  opacity: 0.8;
  margin-bottom: 0.5rem;
}
.legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 0.3rem;
}
.legend-dot.buy { background: var(--c60a5fa); }
.legend-dot.sell-win { background: var(--c4ade80); }
.legend-dot.sell-loss { background: var(--cf87171); }
.legend-dot.deposit { background: var(--cfbbf24); }

.chart-marker {
  stroke: rgba(var(--bch), 0.4);
  stroke-width: 1;
  cursor: pointer;
}
.chart-marker.buy { fill: var(--c60a5fa); }
.chart-marker.sell-win { fill: var(--c4ade80); }
.chart-marker.sell-loss { fill: var(--cf87171); }
.chart-marker.deposit { fill: var(--cfbbf24); }

.chart-axis-label {
  font-size: 9px;
  fill: currentColor;
  opacity: 0.55;
}

.trading-top-performers__list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.5rem;
}
.trading-top-performer-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
}

.trading-ai-summary {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(var(--wch), 0.1);
}
.trading-ai-summary__header {
  margin-bottom: 0.4rem;
}
.trading-ai-summary p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  opacity: 0.9;
}
/*
  LAGG TILL DETTA SIST i /root/molnet/app/css/molnet.css
  (ERSATTER en eventuell tidigare Trading-CSS helt)
*/

/* ---- Globalt tema: gront -> ljusblatt for staplar/enkla grafer ----
   OBS: paverkar INTE Trading-grafens flerfargade linjer (de anvander
   inline style per serie, vilket alltid vinner over dessa klass-regler) */
.progress span {
  background: var(--c60a5fa);
}
.chart-line {
  stroke: var(--c60a5fa);
}
.chart-area {
  fill: rgba(96, 165, 250, 0.15);
}

/* ---- Fix: SVG-diagram som "lackte" utanfor sin box in i grannlador ---- */
.history-chart,
.trading-chart-wrapper {
  overflow: hidden;
  position: relative;
}
.history-chart svg,
.trading-chart-wrapper svg {
  display: block;
  overflow: hidden;
}

/* ---- Fix: text i metric-card/detail-card som gick in i marginalen ---- */
.metric-card,
.detail-card {
  box-sizing: border-box;
  overflow: hidden;
}
.metric-card strong,
.metric-card small,
.detail-card strong,
.detail-card span {
  display: block;
  max-width: 100%;
  overflow-wrap: break-word;
}

/* ---- Trading: 5-kolumners metrics-grid ---- */
.trading-metrics-grid {
  grid-template-columns: repeat(5, 1fr);
}
@media (max-width: 1200px) {
  .trading-metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---- Trading: 3-kolumners layout (Signalflode / Positioner / Historik) ---- */
.trading-columns {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1.2fr;
  gap: 1rem;
  margin-top: 1rem;
  align-items: start;
}
@media (max-width: 1100px) {
  .trading-columns {
    grid-template-columns: 1fr;
  }
}
.trading-column--positions .work-card {
  padding: 1rem 1.1rem;
}

.trading-pos-filter-btn,
.trading-series-btn {
  border: 1px solid rgba(var(--wch), 0.15);
  background: transparent;
  color: inherit;
  border-radius: 999px;
  padding: 0.3rem 0.9rem;
  font-size: 0.8rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.trading-pos-filter-btn.active,
.trading-series-btn.active {
  background: rgba(var(--wch), 0.15);
}
.trading-series-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.trading-feed-row.ignored {
  opacity: 0.55;
}

.trading-pnl-row {
  margin-top: 0.4rem;
  font-weight: 700;
  font-size: 1.05rem;
}
.trading-pnl-row.positive,
.trading-top-performer-row .positive,
.trading-live-gain.positive {
  color: var(--c4ade80);
}
.trading-pnl-row.negative,
.trading-top-performer-row .negative,
.trading-live-gain.negative {
  color: var(--cf87171);
}

.trading-live-gain {
  margin-top: 0.5rem;
  font-weight: 600;
  font-size: 0.95rem;
}

.trading-exit-rule {
  margin-top: 0.5rem;
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
  background: rgba(var(--wch), 0.05);
  font-size: 0.8rem;
  opacity: 0.85;
  line-height: 1.4;
}

.trading-description-panel {
  margin-top: 1rem;
}
.trading-short-desc {
  margin: 0;
  opacity: 0.9;
}
.trading-long-desc {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(var(--wch), 0.1);
  font-size: 0.9rem;
  line-height: 1.6;
  opacity: 0.85;
}
.trading-long-desc p {
  margin: 0 0 0.75rem 0;
}

#tradingTimeRangeSelector,
#tradingSeriesFilter {
  margin-bottom: 0.75rem;
}

.trading-chart-legend {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.75rem;
  opacity: 0.8;
  margin-bottom: 0.5rem;
}
.legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 0.3rem;
}
.legend-dot.buy { background: var(--c60a5fa); }
.legend-dot.sell-win { background: var(--c4ade80); }
.legend-dot.sell-loss { background: var(--cf87171); }
.legend-dot.deposit { background: var(--cfbbf24); }

.chart-marker {
  stroke: rgba(var(--bch), 0.4);
  stroke-width: 1;
  cursor: pointer;
}
.chart-marker.buy { fill: var(--c60a5fa); }
.chart-marker.sell-win { fill: var(--c4ade80); }
.chart-marker.sell-loss { fill: var(--cf87171); }
.chart-marker.deposit { fill: var(--cfbbf24); }

.chart-axis-label {
  font-size: 9px;
  fill: currentColor;
  opacity: 0.55;
}

.trading-top-performers__list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.5rem;
}
.trading-top-performer-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
}

.trading-ai-summary {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(var(--wch), 0.1);
}
.trading-ai-summary__header {
  margin-bottom: 0.4rem;
}
.trading-ai-summary p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  opacity: 0.9;
}
/*
  LAGG TILL DETTA SIST i /root/molnet/app/css/molnet.css
  (ERSATTER en eventuell tidigare Trading-CSS helt)
*/

/* ---- Globalt tema: gront -> ljusblatt for staplar/enkla grafer ----
   OBS: paverkar INTE Trading-grafens flerfargade linjer (de anvander
   inline style per serie, vilket alltid vinner over dessa klass-regler) */
.progress span {
  background: var(--c60a5fa);
}
.chart-line {
  stroke: var(--c60a5fa);
}
.chart-area {
  fill: rgba(96, 165, 250, 0.15);
}

/* ---- Fix: SVG-diagram som "lackte" utanfor sin box in i grannlador ---- */
.history-chart,
.trading-chart-wrapper {
  overflow: hidden;
  position: relative;
}
.history-chart svg,
.trading-chart-wrapper svg {
  width: 100%;
  height: 180px;
  display: block;
  overflow: hidden;
}

/* ---- Fix: text i metric-card/detail-card som gick in i marginalen ---- */
.metric-card,
.detail-card {
  box-sizing: border-box;
  overflow: hidden;
}
.metric-card strong,
.metric-card small,
.detail-card strong,
.detail-card span {
  display: block;
  max-width: 100%;
  overflow-wrap: break-word;
}

/* ---- Fix: boxar som klipptes av vid skarmkanten -----
   Klassisk CSS Grid-bugg: "1fr" krymper INTE under innehallets
   naturliga bredd (t.ex. stora procentsiffror), vilket tryckte ut
   sista kolumnen utanfor synligt omrade. "minmax(0, 1fr)" later
   kolumnerna krympa korrekt. !important anvands har medvetet for
   att garanterat vinna over grundstilen, oavsett dess specificitet. */
.metrics-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
.metric-card {
  min-width: 0;
}

/* ---- Trading: 5-kolumners metrics-grid (samma fix) ---- */
.trading-metrics-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
@media (max-width: 1200px) {
  .trading-metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  .metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ---- Trading: 3-kolumners layout (Signalflode / Positioner / Historik) ---- */
.trading-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1.2fr);
  gap: 1rem;
  margin-top: 1rem;
  align-items: start;
}
@media (max-width: 1100px) {
  .trading-columns {
    grid-template-columns: 1fr;
  }
}
.trading-column--positions .work-card {
  padding: 1rem 1.1rem;
}

.trading-pos-filter-btn,
.trading-series-btn {
  border: 1px solid rgba(var(--wch), 0.15);
  background: transparent;
  color: inherit;
  border-radius: 999px;
  padding: 0.3rem 0.9rem;
  font-size: 0.8rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.trading-pos-filter-btn.active,
.trading-series-btn.active {
  background: rgba(var(--wch), 0.15);
}
.trading-series-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.trading-feed-row.ignored {
  opacity: 0.55;
}

.trading-pnl-row {
  margin-top: 0.4rem;
  font-weight: 700;
  font-size: 1.05rem;
}
.trading-pnl-row.positive,
.trading-top-performer-row .positive,
.trading-live-gain.positive {
  color: var(--c4ade80);
}
.trading-pnl-row.negative,
.trading-top-performer-row .negative,
.trading-live-gain.negative {
  color: var(--cf87171);
}

.trading-live-gain {
  margin-top: 0.5rem;
  font-weight: 600;
  font-size: 0.95rem;
}

.trading-exit-rule {
  margin-top: 0.5rem;
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
  background: rgba(var(--wch), 0.05);
  font-size: 0.8rem;
  opacity: 0.85;
  line-height: 1.4;
}

.trading-description-panel {
  margin-top: 1rem;
}
.trading-short-desc {
  margin: 0;
  opacity: 0.9;
}
.trading-long-desc {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(var(--wch), 0.1);
  font-size: 0.9rem;
  line-height: 1.6;
  opacity: 0.85;
}
.trading-long-desc p {
  margin: 0 0 0.75rem 0;
}

#tradingTimeRangeSelector,
#tradingSeriesFilter {
  margin-bottom: 0.75rem;
}

.trading-chart-legend {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.75rem;
  opacity: 0.8;
  margin-bottom: 0.5rem;
}
.legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 0.3rem;
}
.legend-dot.buy { background: var(--c60a5fa); }
.legend-dot.sell-win { background: var(--c4ade80); }
.legend-dot.sell-loss { background: var(--cf87171); }
.legend-dot.deposit { background: var(--cfbbf24); }

.chart-marker {
  stroke: rgba(var(--bch), 0.4);
  stroke-width: 1;
  cursor: pointer;
}
.chart-marker.buy { fill: var(--c60a5fa); }
.chart-marker.sell-win { fill: var(--c4ade80); }
.chart-marker.sell-loss line { stroke: var(--cf87171); stroke-width: 2; }
.chart-marker.deposit { fill: var(--cfbbf24); }

.chart-axis-label {
  font-size: 9px;
  fill: currentColor;
  opacity: 0.55;
}

.trading-top-performers__list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.5rem;
}
.trading-top-performer-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
}

.trading-ai-summary {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(var(--wch), 0.1);
}
.trading-ai-summary__header {
  margin-bottom: 0.4rem;
}
.trading-ai-summary p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  opacity: 0.9;
}
/*
  LAGG TILL DETTA SIST i /root/molnet/app/css/molnet.css
  (ERSATTER en eventuell tidigare Trading-CSS helt)
*/

/* ---- Globalt tema: gront -> ljusblatt for staplar/enkla grafer ----
   OBS: paverkar INTE Trading-grafens flerfargade linjer (de anvander
   inline style per serie, vilket alltid vinner over dessa klass-regler) */
.progress span {
  background: var(--c60a5fa);
}
.chart-line {
  stroke: var(--c60a5fa);
}
.chart-area {
  fill: rgba(96, 165, 250, 0.15);
}

/* ---- Fix: SVG-diagram som "lackte" utanfor sin box in i grannlador ---- */
.history-chart,
.trading-chart-wrapper {
  overflow: hidden;
  position: relative;
}
.history-chart svg,
.trading-chart-wrapper svg {
  width: 100%;
  height: 180px;
  display: block;
  overflow: hidden;
}

/* ---- Fix: text i metric-card/detail-card som gick in i marginalen ---- */
.metric-card,
.detail-card {
  box-sizing: border-box;
  overflow: hidden;
  padding: 1.25rem 1.5rem !important;
}
.metric-card strong,
.metric-card small,
.detail-card strong,
.detail-card span {
  display: block;
  max-width: 100%;
  overflow-wrap: break-word;
}

/* ---- Fix: boxar som klipptes av vid skarmkanten -----
   Klassisk CSS Grid-bugg: "1fr" krymper INTE under innehallets
   naturliga bredd (t.ex. stora procentsiffror), vilket tryckte ut
   sista kolumnen utanfor synligt omrade. "minmax(0, 1fr)" later
   kolumnerna krympa korrekt. !important anvands har medvetet for
   att garanterat vinna over grundstilen, oavsett dess specificitet. */
.metrics-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
.metric-card {
  min-width: 0;
}

/* ---- Trading: 5-kolumners metrics-grid (samma fix) ---- */
.trading-metrics-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
@media (max-width: 1200px) {
  .trading-metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  .metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ---- Trading: 3-kolumners layout (Signalflode / Positioner / Historik) ---- */
.trading-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1.2fr);
  gap: 1rem;
  margin-top: 1rem;
  align-items: start;
}
@media (max-width: 1100px) {
  .trading-columns {
    grid-template-columns: 1fr;
  }
}
.trading-column--positions .work-card {
  padding: 1rem 1.1rem;
}

.trading-pos-filter-btn,
.trading-series-btn {
  border: 1px solid rgba(var(--wch), 0.15);
  background: transparent;
  color: inherit;
  border-radius: 999px;
  padding: 0.3rem 0.9rem;
  font-size: 0.8rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.trading-pos-filter-btn.active,
.trading-series-btn.active {
  background: rgba(var(--wch), 0.15);
}
.trading-series-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.trading-feed-row.ignored {
  opacity: 0.55;
}

.trading-pnl-row {
  margin-top: 0.4rem;
  font-weight: 700;
  font-size: 1.05rem;
}
.trading-pnl-row.positive,
.trading-top-performer-row .positive,
.trading-live-gain.positive {
  color: var(--c4ade80);
}
.trading-pnl-row.negative,
.trading-top-performer-row .negative,
.trading-live-gain.negative {
  color: var(--cf87171);
}

.trading-live-gain {
  margin-top: 0.5rem;
  font-weight: 600;
  font-size: 0.95rem;
}

.trading-exit-rule {
  margin-top: 0.5rem;
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
  background: rgba(var(--wch), 0.05);
  font-size: 0.8rem;
  opacity: 0.85;
  line-height: 1.4;
}

.trading-description-panel {
  margin-top: 1rem;
}
.trading-short-desc {
  margin: 0;
  opacity: 0.9;
}
.trading-long-desc {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(var(--wch), 0.1);
  font-size: 0.9rem;
  line-height: 1.6;
  opacity: 0.85;
}
.trading-long-desc p {
  margin: 0 0 0.75rem 0;
}

#tradingTimeRangeSelector,
#tradingSeriesFilter {
  margin-bottom: 0.75rem;
}

.trading-chart-legend {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.75rem;
  opacity: 0.8;
  margin-bottom: 0.5rem;
}
.legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 0.3rem;
}
.legend-dot.buy { background: var(--c60a5fa); }
.legend-dot.sell-win { background: var(--c4ade80); }
.legend-dot.sell-loss { background: var(--cf87171); }
.legend-dot.deposit { background: var(--cfbbf24); }

.chart-marker {
  stroke: rgba(var(--bch), 0.4);
  stroke-width: 1;
  cursor: pointer;
}
.chart-marker.buy { fill: var(--c60a5fa); }
.chart-marker.sell-win { fill: var(--c4ade80); }
.chart-marker.sell-loss line { stroke: var(--cf87171); stroke-width: 2; }
.chart-marker.deposit { fill: var(--cfbbf24); }

.chart-axis-label {
  font-size: 9px;
  fill: currentColor;
  opacity: 0.55;
}

.trading-top-performers__list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.5rem;
}
.trading-top-performer-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
}

.trading-ai-summary {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(var(--wch), 0.1);
}
.trading-ai-summary__header {
  margin-bottom: 0.4rem;
}
.trading-ai-summary p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  opacity: 0.9;
}
/*
  LAGG TILL DETTA SIST i /root/molnet/app/css/molnet.css
  (ERSATTER en eventuell tidigare Trading-CSS helt)
*/

/* ---- Globalt tema: gront -> ljusblatt for staplar/enkla grafer ----
   OBS: paverkar INTE Trading-grafens flerfargade linjer (de anvander
   inline style per serie, vilket alltid vinner over dessa klass-regler) */
.progress span {
  background: var(--c60a5fa);
}
.chart-line {
  stroke: var(--c60a5fa);
}
.chart-area {
  fill: rgba(96, 165, 250, 0.15);
}

/* ---- Fix: SVG-diagram som "lackte" utanfor sin box in i grannlador ---- */
.history-chart,
.trading-chart-wrapper {
  overflow: hidden;
  position: relative;
}
.history-chart svg,
.trading-chart-wrapper svg {
  width: 100%;
  height: 180px;
  display: block;
  overflow: hidden;
}

/* ---- Fix: text i metric-card/detail-card som gick in i marginalen ---- */
.metric-card,
.detail-card {
  box-sizing: border-box;
  overflow: hidden;
  padding: 1.25rem 1.5rem !important;
}
.metric-card strong,
.metric-card small,
.detail-card strong,
.detail-card span {
  display: block;
  max-width: 100%;
  overflow-wrap: break-word;
}

/* ---- Fix: boxar som klipptes av vid skarmkanten -----
   Klassisk CSS Grid-bugg: "1fr" krymper INTE under innehallets
   naturliga bredd (t.ex. stora procentsiffror), vilket tryckte ut
   sista kolumnen utanfor synligt omrade. "minmax(0, 1fr)" later
   kolumnerna krympa korrekt. !important anvands har medvetet for
   att garanterat vinna over grundstilen, oavsett dess specificitet. */
.metrics-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
.metric-card {
  min-width: 0;
}

/* ---- Trading: 5-kolumners metrics-grid (samma fix) ---- */
.trading-metrics-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
@media (max-width: 1200px) {
  .trading-metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  .metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ---- Trading: 3-kolumners layout (Signalflode / Positioner / Historik) ---- */
.trading-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1.2fr);
  gap: 1rem;
  margin-top: 1rem;
  align-items: start;
}
@media (max-width: 1100px) {
  .trading-columns {
    grid-template-columns: 1fr;
  }
}
.trading-column--positions .work-card {
  padding: 1rem 1.1rem;
}

.trading-pos-filter-btn,
.trading-series-btn {
  border: 1px solid rgba(var(--wch), 0.15);
  background: transparent;
  color: inherit;
  border-radius: 999px;
  padding: 0.3rem 0.9rem;
  font-size: 0.8rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.trading-pos-filter-btn.active,
.trading-series-btn.active {
  background: rgba(var(--wch), 0.15);
}
.trading-series-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.trading-feed-row.ignored {
  opacity: 0.55;
}

.trading-pnl-row {
  margin-top: 0.4rem;
  font-weight: 700;
  font-size: 1.05rem;
}
.trading-pnl-row.positive,
.trading-top-performer-row .positive,
.trading-live-gain.positive {
  color: var(--c4ade80);
}
.trading-pnl-row.negative,
.trading-top-performer-row .negative,
.trading-live-gain.negative {
  color: var(--cf87171);
}

.trading-live-gain {
  margin-top: 0.5rem;
  font-weight: 600;
  font-size: 0.95rem;
}

.trading-exit-rule {
  margin-top: 0.5rem;
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
  background: rgba(var(--wch), 0.05);
  font-size: 0.8rem;
  opacity: 0.85;
  line-height: 1.4;
}

.trading-description-panel {
  margin-top: 1rem;
}
.trading-short-desc {
  margin: 0;
  opacity: 0.9;
}
.trading-long-desc {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(var(--wch), 0.1);
  font-size: 0.9rem;
  line-height: 1.6;
  opacity: 0.85;
}
.trading-long-desc p {
  margin: 0 0 0.75rem 0;
}

#tradingTimeRangeSelector,
#tradingSeriesFilter {
  margin-bottom: 0.75rem;
}

.trading-chart-legend {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.75rem;
  opacity: 0.8;
  margin-bottom: 0.5rem;
}
.legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 0.3rem;
}
.legend-dot.buy { background: var(--c60a5fa); }
.legend-dot.sell-win { background: var(--c4ade80); }
.legend-dot.sell-loss { background: var(--cf87171); }
.legend-dot.deposit { background: var(--cfbbf24); }

.chart-marker {
  stroke: rgba(var(--bch), 0.4);
  stroke-width: 1;
  cursor: pointer;
}
.chart-marker.buy { fill: var(--c60a5fa); }
.chart-marker.sell-win { fill: var(--c4ade80); }
.chart-marker.sell-loss line { stroke: var(--cf87171); stroke-width: 2; }
.chart-marker.deposit { fill: var(--cfbbf24); }

.chart-axis-label {
  font-size: 7px !important;
  font-family: inherit !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  fill: currentColor;
  opacity: 0.45;
}

.trading-top-performers__list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.5rem;
}
.trading-top-performer-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
}

.trading-ai-summary {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(var(--wch), 0.1);
}
.trading-ai-summary__header {
  margin-bottom: 0.4rem;
}
.trading-ai-summary p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  opacity: 0.9;
}
/*
  LAGG TILL DETTA SIST i /root/molnet/app/css/molnet.css
  (ERSATTER en eventuell tidigare Trading-CSS helt)
*/

/* ---- Globalt tema: gront -> ljusblatt for staplar/enkla grafer ----
   OBS: paverkar INTE Trading-grafens flerfargade linjer (de anvander
   inline style per serie, vilket alltid vinner over dessa klass-regler) */
.progress span {
  background: var(--c60a5fa);
}
.chart-line {
  stroke: var(--c60a5fa);
}
.chart-area {
  fill: rgba(96, 165, 250, 0.15);
}

/* ---- Fix: SVG-diagram som "lackte" utanfor sin box in i grannlador ---- */
.history-chart,
.trading-chart-wrapper {
  overflow: hidden;
  position: relative;
}
.history-chart svg,
.trading-chart-wrapper svg {
  width: 100%;
  height: 180px;
  display: block;
  overflow: hidden;
}

/* ---- Fix: text i metric-card/detail-card som gick in i marginalen ---- */
.metric-card,
.detail-card {
  box-sizing: border-box;
  overflow: hidden;
  padding: 1.25rem 1.5rem !important;
}
.metric-card strong,
.metric-card small,
.detail-card strong,
.detail-card span {
  display: block;
  max-width: 100%;
  overflow-wrap: break-word;
}

/* ---- Fix: boxar som klipptes av vid skarmkanten -----
   Klassisk CSS Grid-bugg: "1fr" krymper INTE under innehallets
   naturliga bredd (t.ex. stora procentsiffror), vilket tryckte ut
   sista kolumnen utanfor synligt omrade. "minmax(0, 1fr)" later
   kolumnerna krympa korrekt. !important anvands har medvetet for
   att garanterat vinna over grundstilen, oavsett dess specificitet. */
.metrics-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
.metric-card {
  min-width: 0;
}

/* ---- Trading: 5-kolumners metrics-grid (samma fix) ---- */
.trading-metrics-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
@media (max-width: 1200px) {
  .trading-metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  .metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ---- Trading: 3-kolumners layout (Signalflode / Positioner / Historik) ---- */
.trading-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1.2fr);
  gap: 1rem;
  margin-top: 1rem;
  align-items: start;
}
@media (max-width: 1100px) {
  .trading-columns {
    grid-template-columns: 1fr;
  }
}
.trading-column--positions .work-card {
  padding: 1rem 1.1rem;
}

.trading-pos-filter-btn,
.trading-series-btn {
  border: 1px solid rgba(var(--wch), 0.15);
  background: transparent;
  color: inherit;
  border-radius: 999px;
  padding: 0.3rem 0.9rem;
  font-size: 0.8rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.trading-pos-filter-btn.active,
.trading-series-btn.active {
  background: rgba(var(--wch), 0.15);
}
.trading-series-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.trading-feed-row.ignored {
  opacity: 0.55;
}

.trading-pnl-row {
  margin-top: 0.4rem;
  font-weight: 700;
  font-size: 1.05rem;
}
.trading-pnl-row.positive,
.trading-top-performer-row .positive,
.trading-live-gain.positive {
  color: var(--c4ade80);
}
.trading-pnl-row.negative,
.trading-top-performer-row .negative,
.trading-live-gain.negative {
  color: var(--cf87171);
}

.trading-live-gain {
  margin-top: 0.5rem;
  font-weight: 600;
  font-size: 0.95rem;
}

.trading-exit-rule {
  margin-top: 0.5rem;
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
  background: rgba(var(--wch), 0.05);
  font-size: 0.8rem;
  opacity: 0.85;
  line-height: 1.4;
}

.trading-description-panel {
  margin-top: 1rem;
}
.trading-short-desc {
  margin: 0;
  opacity: 0.9;
}
.trading-long-desc {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(var(--wch), 0.1);
  font-size: 0.9rem;
  line-height: 1.6;
  opacity: 0.85;
}
.trading-long-desc p {
  margin: 0 0 0.75rem 0;
}

#tradingTimeRangeSelector,
#tradingSeriesFilter {
  margin-bottom: 0.75rem;
}

.trading-chart-legend {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.75rem;
  opacity: 0.8;
  margin-bottom: 0.5rem;
}
.legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 0.3rem;
}
.legend-dot.buy { background: var(--c60a5fa); }
.legend-dot.sell-win { background: var(--c4ade80); }
.legend-dot.sell-loss { background: var(--cf87171); }
.legend-dot.deposit { background: var(--cfbbf24); }

.chart-marker {
  stroke: rgba(var(--bch), 0.4);
  stroke-width: 1;
  cursor: pointer;
}
.chart-marker.buy { fill: var(--c60a5fa); }
.chart-marker.sell-win { fill: var(--c4ade80); }
.chart-marker.sell-loss line { stroke: var(--cf87171); stroke-width: 2; }
.chart-marker.deposit { fill: var(--cfbbf24); }

.chart-axis-label {
  font-size: 7px !important;
  font-family: inherit !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  fill: currentColor;
  opacity: 0.45;
}

.trading-top-performers__list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.5rem;
}
.trading-top-performer-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
}

.trading-ai-summary {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(var(--wch), 0.1);
}
.trading-ai-summary__header {
  margin-bottom: 0.4rem;
}
.trading-ai-summary p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  opacity: 0.9;
}

/* ---- Fix: spokgraf som lackte igenom fran icke-aktiva flikar -----
   Vi forladdar nu alla flikars data direkt vid uppstart (for snabbare
   flikbyten), men det avslojade att inaktiva ".page"-sektioner inte
   doldes helt av grundstilen - deras SVG-grafer "lackte" igenom pa
   andra flikar. Detta tvingar garanterat fullstandig dolning. */
.page {
  display: none !important;
}
.page.active {
  display: block !important;
}
/*
  LAGG TILL DETTA SIST i /root/molnet/app/css/molnet.css
  (ERSATTER en eventuell tidigare Trading-CSS helt)
*/

/* ---- Globalt tema: gront -> ljusblatt for staplar/enkla grafer ----
   OBS: paverkar INTE Trading-grafens flerfargade linjer (de anvander
   inline style per serie, vilket alltid vinner over dessa klass-regler) */
.progress span {
  background: var(--c60a5fa);
}
.chart-line {
  stroke: var(--c60a5fa);
}
.chart-area {
  fill: rgba(96, 165, 250, 0.15);
}

/* ---- Fix: SVG-diagram som "lackte" utanfor sin box in i grannlador ---- */
.history-chart,
.trading-chart-wrapper {
  overflow: hidden;
  position: relative;
}
.history-chart svg,
.trading-chart-wrapper svg {
  width: 100%;
  height: 180px;
  display: block;
  overflow: hidden;
}

/* ---- Fix: text i metric-card/detail-card som gick in i marginalen ---- */
.metric-card,
.detail-card {
  box-sizing: border-box;
  overflow: hidden;
  padding: 1.25rem 1.5rem !important;
}
.metric-card strong,
.metric-card small,
.detail-card strong,
.detail-card span {
  display: block;
  max-width: 100%;
  overflow-wrap: break-word;
}

/* ---- Fix: boxar som klipptes av vid skarmkanten -----
   Klassisk CSS Grid-bugg: "1fr" krymper INTE under innehallets
   naturliga bredd (t.ex. stora procentsiffror), vilket tryckte ut
   sista kolumnen utanfor synligt omrade. "minmax(0, 1fr)" later
   kolumnerna krympa korrekt. !important anvands har medvetet for
   att garanterat vinna over grundstilen, oavsett dess specificitet. */
.metrics-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
.metric-card {
  min-width: 0;
}

/* ---- Trading: 5-kolumners metrics-grid (samma fix) ---- */
.trading-metrics-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
@media (max-width: 1200px) {
  .trading-metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  .metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ---- Trading: 3-kolumners layout (Signalflode / Positioner / Historik) ---- */
.trading-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1.2fr);
  gap: 1rem;
  margin-top: 1rem;
  align-items: start;
}
@media (max-width: 1100px) {
  .trading-columns {
    grid-template-columns: 1fr;
  }
}
.trading-column--positions .work-card {
  padding: 1rem 1.1rem;
}

.trading-pos-filter-btn,
.trading-series-btn {
  border: 1px solid rgba(var(--wch), 0.15);
  background: transparent;
  color: inherit;
  border-radius: 999px;
  padding: 0.3rem 0.9rem;
  font-size: 0.8rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.trading-pos-filter-btn.active,
.trading-series-btn.active {
  background: rgba(var(--wch), 0.15);
}
.trading-series-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.trading-feed-row.ignored {
  opacity: 0.55;
}

.trading-pnl-row {
  margin-top: 0.4rem;
  font-weight: 700;
  font-size: 1.05rem;
}
.trading-pnl-row.positive,
.trading-top-performer-row .positive,
.trading-live-gain.positive {
  color: var(--c4ade80);
}
.trading-pnl-row.negative,
.trading-top-performer-row .negative,
.trading-live-gain.negative {
  color: var(--cf87171);
}

.trading-live-gain {
  margin-top: 0.5rem;
  font-weight: 600;
  font-size: 0.95rem;
}

.trading-exit-rule {
  margin-top: 0.5rem;
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
  background: rgba(var(--wch), 0.05);
  font-size: 0.8rem;
  opacity: 0.85;
  line-height: 1.4;
}

.trading-description-panel {
  margin-top: 1rem;
}
.trading-short-desc {
  margin: 0;
  opacity: 0.9;
}
.trading-long-desc {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(var(--wch), 0.1);
  font-size: 0.9rem;
  line-height: 1.6;
  opacity: 0.85;
}
.trading-long-desc p {
  margin: 0 0 0.75rem 0;
}

#tradingTimeRangeSelector,
#tradingSeriesFilter {
  margin-bottom: 0.75rem;
}

.trading-chart-legend {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.75rem;
  opacity: 0.8;
  margin-bottom: 0.5rem;
}
.legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 0.3rem;
}
.legend-dot.buy { background: var(--c60a5fa); }
.legend-dot.sell-win { background: var(--c4ade80); }
.legend-dot.sell-loss { background: var(--cf87171); }
.legend-dot.deposit { background: var(--cfbbf24); }

.chart-marker {
  stroke: rgba(var(--bch), 0.4);
  stroke-width: 1;
  cursor: pointer;
}
.chart-marker.buy { fill: var(--c60a5fa); }
.chart-marker.sell-win { fill: var(--c4ade80); }
.chart-marker.sell-loss line { stroke: var(--cf87171); stroke-width: 2; }
.chart-marker.deposit { fill: var(--cfbbf24); }

.chart-axis-label {
  font-size: 7px !important;
  font-family: inherit !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  fill: currentColor;
  opacity: 0.45;
}

.trading-top-performers__list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.5rem;
}
.trading-top-performer-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
}

.trading-ai-summary {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(var(--wch), 0.1);
}
.trading-ai-summary__header {
  margin-bottom: 0.4rem;
}
.trading-ai-summary p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  opacity: 0.9;
}

/* ---- Fix: spokgraf som lackte igenom fran icke-aktiva flikar -----
   Vi forladdar nu alla flikars data direkt vid uppstart (for snabbare
   flikbyten), men det avslojade att inaktiva ".page"-sektioner inte
   doldes helt av grundstilen - deras SVG-grafer "lackte" igenom pa
   andra flikar. Detta tvingar garanterat fullstandig dolning. */
.page {
  display: none !important;
}
.page.active {
  display: block !important;
}

/* ---- Fix: den "fastlasta" dekorativa bakgrunden pa .progress-baren -----
   Grundstilens .progress::before (en dekorativ kurv-silhuett, molnet.css:564)
   anvander position:absolute men .progress sjalv saknade position:relative,
   vilket fick mönstret att positionera sig mot en helt annan, mycket storre
   forfader langre upp i sidan - darav "spoklinjen" som verkade fastlast. */
.progress {
  position: relative !important;
  overflow: hidden !important;
}
/*
  LAGG TILL DETTA SIST i /root/molnet/app/css/molnet.css
  (ERSATTER en eventuell tidigare Trading-CSS helt)
*/

/* ---- Globalt tema: gront -> ljusblatt for staplar/enkla grafer ----
   OBS: paverkar INTE Trading-grafens flerfargade linjer (de anvander
   inline style per serie, vilket alltid vinner over dessa klass-regler) */
.progress span {
  background: var(--c60a5fa);
}
.chart-line {
  stroke: var(--c60a5fa);
}
.chart-area {
  fill: rgba(96, 165, 250, 0.15);
}

/* ---- Fix: SVG-diagram som "lackte" utanfor sin box in i grannlador ---- */
.history-chart,
.trading-chart-wrapper {
  overflow: hidden;
  position: relative;
}
.history-chart svg,
.trading-chart-wrapper svg {
  width: 100%;
  height: 180px;
  display: block;
  overflow: hidden;
}

/* ---- Fix: text i metric-card/detail-card som gick in i marginalen ---- */
.metric-card,
.detail-card {
  box-sizing: border-box;
  overflow: hidden;
  padding: 1.25rem 1.5rem !important;
}
.metric-card strong,
.metric-card small,
.detail-card strong,
.detail-card span {
  display: block;
  max-width: 100%;
  overflow-wrap: break-word;
}

/* ---- Fix: boxar som klipptes av vid skarmkanten -----
   Klassisk CSS Grid-bugg: "1fr" krymper INTE under innehallets
   naturliga bredd (t.ex. stora procentsiffror), vilket tryckte ut
   sista kolumnen utanfor synligt omrade. "minmax(0, 1fr)" later
   kolumnerna krympa korrekt. !important anvands har medvetet for
   att garanterat vinna over grundstilen, oavsett dess specificitet. */
.metrics-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
.metric-card {
  min-width: 0;
}

/* ---- Trading: 5-kolumners metrics-grid (samma fix) ---- */
.trading-metrics-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
@media (max-width: 1200px) {
  .trading-metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  .metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ---- Trading: 3-kolumners layout (Signalflode / Positioner / Historik) ---- */
.trading-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1.2fr);
  gap: 1rem;
  margin-top: 1rem;
  align-items: start;
}
@media (max-width: 1100px) {
  .trading-columns {
    grid-template-columns: 1fr;
  }
}
.trading-column--positions .work-card {
  padding: 1rem 1.1rem;
}

.trading-pos-filter-btn,
.trading-series-btn {
  border: 1px solid rgba(var(--wch), 0.15);
  background: transparent;
  color: inherit;
  border-radius: 999px;
  padding: 0.3rem 0.9rem;
  font-size: 0.8rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.trading-pos-filter-btn.active,
.trading-series-btn.active {
  background: rgba(var(--wch), 0.15);
}
.trading-series-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.trading-feed-row.ignored {
  opacity: 0.55;
}

.trading-pnl-row {
  margin-top: 0.4rem;
  font-weight: 700;
  font-size: 1.05rem;
}
.trading-pnl-row.positive,
.trading-top-performer-row .positive,
.trading-live-gain.positive {
  color: var(--c4ade80);
}
.trading-pnl-row.negative,
.trading-top-performer-row .negative,
.trading-live-gain.negative {
  color: var(--cf87171);
}

.trading-live-gain {
  margin-top: 0.5rem;
  font-weight: 600;
  font-size: 0.95rem;
}

.trading-exit-rule {
  margin-top: 0.5rem;
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
  background: rgba(var(--wch), 0.05);
  font-size: 0.8rem;
  opacity: 0.85;
  line-height: 1.4;
}

.trading-description-panel {
  margin-top: 1rem;
}
.trading-short-desc {
  margin: 0;
  opacity: 0.9;
}
.trading-long-desc {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(var(--wch), 0.1);
  font-size: 0.9rem;
  line-height: 1.6;
  opacity: 0.85;
}
.trading-long-desc p {
  margin: 0 0 0.75rem 0;
}

#tradingTimeRangeSelector,
#tradingSeriesFilter {
  margin-bottom: 0.75rem;
}

.trading-chart-legend {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.75rem;
  opacity: 0.8;
  margin-bottom: 0.5rem;
}
.legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 0.3rem;
}
.legend-dot.buy { background: var(--c60a5fa); }
.legend-dot.sell-win { background: var(--c4ade80); }
.legend-dot.sell-loss { background: var(--cf87171); }
.legend-dot.deposit { background: var(--cfbbf24); }

.chart-marker {
  stroke: rgba(var(--bch), 0.4);
  stroke-width: 1;
  cursor: pointer;
}
.chart-marker.buy { fill: var(--c60a5fa); }
.chart-marker.sell-win { fill: var(--c4ade80); }
.chart-marker.sell-loss line { stroke: var(--cf87171); stroke-width: 2; }
.chart-marker.deposit { fill: var(--cfbbf24); }

.chart-axis-label {
  font-size: 7px !important;
  font-family: inherit !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  fill: currentColor;
  opacity: 0.45;
}

.trading-top-performers__list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.5rem;
}
.trading-top-performer-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
}

.trading-ai-summary {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(var(--wch), 0.1);
}
.trading-ai-summary__header {
  margin-bottom: 0.4rem;
}
.trading-ai-summary p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  opacity: 0.9;
}

/* ---- Fix: spokgraf som lackte igenom fran icke-aktiva flikar -----
   Vi forladdar nu alla flikars data direkt vid uppstart (for snabbare
   flikbyten), men det avslojade att inaktiva ".page"-sektioner inte
   doldes helt av grundstilen - deras SVG-grafer "lackte" igenom pa
   andra flikar. Detta tvingar garanterat fullstandig dolning. */
.page {
  display: none !important;
}
.page.active {
  display: block !important;
}

/* ---- Fix: den "fastlasta" dekorativa bakgrunden pa .progress-baren -----
   Grundstilens .progress::before (en dekorativ kurv-silhuett, molnet.css:564)
   anvander position:absolute men .progress sjalv saknade position:relative,
   vilket fick mönstret att positionera sig mot en helt annan, mycket storre
   forfader langre upp i sidan - darav "spoklinjen" som verkade fastlast. */
.progress {
  position: relative !important;
  overflow: hidden !important;
}

/* Valfritt: ta helt bort den dekorativa kurv-silhuetten bakom progress-barerna */
/* .progress::before { display: none !important; } */

/* ---- Storre dekorativ kurv-bakgrund pa hela metric-card (inte bara stapeln) ---- */
.metric-card {
  position: relative;
  overflow: hidden;
}
.metric-card > * {
  position: relative;
  z-index: 1;
}
.metric-card::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 60%;
  background: linear-gradient(to top, rgba(96, 165, 250, 0.16), transparent);
  clip-path: polygon(0 82%, 11% 62%, 21% 71%, 31% 38%, 43% 53%, 53% 28%, 65% 47%, 78% 17%, 89% 31%, 100% 4%, 100% 100%, 0 100%);
  pointer-events: none;
  z-index: 0;
}

/* ---- Samma dekor pa de tre forsta korten i Trading (Insatt kapital / Totalt varde / Vinst) ---- */
.trading-metrics-grid > .metric-card:nth-child(-n+3)::before {
  height: 65%;
  background: linear-gradient(to top, rgba(56, 189, 248, 0.18), transparent);
}
/*
  LAGG TILL DETTA SIST i /root/molnet/app/css/molnet.css
  (ERSATTER en eventuell tidigare Trading-CSS helt)
*/

/* ---- Globalt tema: gront -> ljusblatt for staplar/enkla grafer ----
   OBS: paverkar INTE Trading-grafens flerfargade linjer (de anvander
   inline style per serie, vilket alltid vinner over dessa klass-regler) */
.progress span {
  background: var(--c60a5fa);
}
.chart-line {
  stroke: var(--c60a5fa);
}
.chart-area {
  fill: rgba(96, 165, 250, 0.15);
}

/* ---- Fix: SVG-diagram som "lackte" utanfor sin box in i grannlador ---- */
.history-chart,
.trading-chart-wrapper {
  overflow: hidden;
  position: relative;
  padding: 0 !important;
  margin: 0;
}
.history-chart svg,
.trading-chart-wrapper svg {
  width: 100%;
  height: 180px;
  display: block;
  overflow: hidden;
}

/* ---- Fix: text i metric-card/detail-card som gick in i marginalen ---- */
.metric-card,
.detail-card {
  box-sizing: border-box;
  overflow: hidden;
  padding: 1.25rem 1.5rem !important;
}
.metric-card strong,
.metric-card small,
.detail-card strong,
.detail-card span {
  display: block;
  max-width: 100%;
  overflow-wrap: break-word;
}

/* ---- Fix: boxar som klipptes av vid skarmkanten -----
   Klassisk CSS Grid-bugg: "1fr" krymper INTE under innehallets
   naturliga bredd (t.ex. stora procentsiffror), vilket tryckte ut
   sista kolumnen utanfor synligt omrade. "minmax(0, 1fr)" later
   kolumnerna krympa korrekt. !important anvands har medvetet for
   att garanterat vinna over grundstilen, oavsett dess specificitet. */
.metrics-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
.metric-card {
  min-width: 0;
}

/* ---- Trading: 5-kolumners metrics-grid (samma fix) ---- */
.trading-metrics-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
@media (max-width: 1200px) {
  .trading-metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  .metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ---- Trading: 3-kolumners layout (Signalflode / Positioner / Historik) ---- */
.trading-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1.2fr);
  gap: 1rem;
  margin-top: 1rem;
  align-items: start;
}
@media (max-width: 1100px) {
  .trading-columns {
    grid-template-columns: 1fr;
  }
}
.trading-column--positions .work-card {
  padding: 1rem 1.1rem;
}

.trading-pos-filter-btn,
.trading-series-btn {
  border: 1px solid rgba(var(--wch), 0.15);
  background: transparent;
  color: inherit;
  border-radius: 999px;
  padding: 0.3rem 0.9rem;
  font-size: 0.8rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.trading-pos-filter-btn.active,
.trading-series-btn.active {
  background: rgba(var(--wch), 0.15);
}
.trading-series-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.trading-feed-row.ignored {
  opacity: 0.55;
}

.trading-pnl-row {
  margin-top: 0.4rem;
  font-weight: 700;
  font-size: 1.05rem;
}
.trading-pnl-row.positive,
.trading-top-performer-row .positive,
.trading-live-gain.positive {
  color: var(--c4ade80);
}
.trading-pnl-row.negative,
.trading-top-performer-row .negative,
.trading-live-gain.negative {
  color: var(--cf87171);
}

.trading-live-gain {
  margin-top: 0.5rem;
  font-weight: 600;
  font-size: 0.95rem;
}

.trading-exit-rule {
  margin-top: 0.5rem;
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
  background: rgba(var(--wch), 0.05);
  font-size: 0.8rem;
  opacity: 0.85;
  line-height: 1.4;
}

.trading-description-panel {
  margin-top: 1rem;
}
.trading-short-desc {
  margin: 0;
  opacity: 0.9;
}
.trading-long-desc {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(var(--wch), 0.1);
  font-size: 0.9rem;
  line-height: 1.6;
  opacity: 0.85;
}
.trading-long-desc p {
  margin: 0 0 0.75rem 0;
}

#tradingTimeRangeSelector,
#tradingSeriesFilter {
  margin-bottom: 0.75rem;
}

.trading-chart-legend {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.75rem;
  opacity: 0.8;
  margin-bottom: 0.5rem;
}
.legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 0.3rem;
}
.legend-dot.buy { background: var(--c60a5fa); }
.legend-dot.sell-win { background: var(--c4ade80); }
.legend-dot.sell-loss { background: var(--cf87171); }
.legend-dot.deposit { background: var(--cfbbf24); }

.chart-marker {
  stroke: rgba(var(--bch), 0.4);
  stroke-width: 1;
  cursor: pointer;
}
.chart-marker.buy { fill: var(--c60a5fa); }
.chart-marker.sell-win { fill: var(--c4ade80); }
.chart-marker.sell-loss line { stroke: var(--cf87171); stroke-width: 2; }
.chart-marker.deposit { fill: var(--cfbbf24); }

.chart-axis-label {
  font-size: 10px !important;
  font-family: inherit !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  fill: currentColor;
  opacity: 0.45;
}

.trading-top-performers__list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.5rem;
}
.trading-top-performer-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
}

.trading-ai-summary {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(var(--wch), 0.1);
}
.trading-ai-summary__header {
  margin-bottom: 0.4rem;
}
.trading-ai-summary p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  opacity: 0.9;
}

/* ---- Fix: spokgraf som lackte igenom fran icke-aktiva flikar -----
   Vi forladdar nu alla flikars data direkt vid uppstart (for snabbare
   flikbyten), men det avslojade att inaktiva ".page"-sektioner inte
   doldes helt av grundstilen - deras SVG-grafer "lackte" igenom pa
   andra flikar. Detta tvingar garanterat fullstandig dolning. */
.page {
  display: none !important;
}
.page.active {
  display: block !important;
}

/* ---- Fix: den "fastlasta" dekorativa bakgrunden pa .progress-baren -----
   Grundstilens .progress::before (en dekorativ kurv-silhuett, molnet.css:564)
   anvander position:absolute men .progress sjalv saknade position:relative,
   vilket fick mönstret att positionera sig mot en helt annan, mycket storre
   forfader langre upp i sidan - darav "spoklinjen" som verkade fastlast. */
.progress {
  position: relative !important;
  overflow: hidden !important;
}

/* Valfritt: ta helt bort den dekorativa kurv-silhuetten bakom progress-barerna */
/* .progress::before { display: none !important; } */

/* ---- Storre dekorativ kurv-bakgrund pa hela metric-card (inte bara stapeln) ---- */
.metric-card {
  position: relative;
  overflow: hidden;
}
.metric-card > * {
  position: relative;
  z-index: 1;
}
.metric-card::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 60%;
  background: linear-gradient(to top, rgba(96, 165, 250, 0.16), transparent);
  clip-path: polygon(0 82%, 11% 62%, 21% 71%, 31% 38%, 43% 53%, 53% 28%, 65% 47%, 78% 17%, 89% 31%, 100% 4%, 100% 100%, 0 100%);
  pointer-events: none;
  z-index: 0;
}

/* ---- Samma dekor pa de tre forsta korten i Trading (Insatt kapital / Totalt varde / Vinst) ---- */
.trading-metrics-grid > .metric-card:nth-child(-n+3)::before {
  height: 65%;
  background: linear-gradient(to top, rgba(56, 189, 248, 0.18), transparent);
}
/*
  LAGG TILL DETTA SIST i /root/molnet/app/css/molnet.css
  (ERSATTER en eventuell tidigare Trading-CSS helt)
*/

/* ---- Globalt tema: gront -> ljusblatt for staplar/enkla grafer ----
   OBS: paverkar INTE Trading-grafens flerfargade linjer (de anvander
   inline style per serie, vilket alltid vinner over dessa klass-regler) */
.progress span {
  background: var(--c60a5fa);
}
.chart-line {
  stroke: var(--c60a5fa);
}
.chart-area {
  fill: rgba(96, 165, 250, 0.15);
}

/* ---- Fix: SVG-diagram som "lackte" utanfor sin box in i grannlador ---- */
.history-chart,
.trading-chart-wrapper {
  overflow: hidden;
  position: relative;
  padding: 0 !important;
  margin: 0;
}
.history-chart svg,
.trading-chart-wrapper svg {
  width: 100%;
  height: 180px;
  display: block;
  overflow: hidden;
}

/* ---- Fix: text i metric-card/detail-card som gick in i marginalen ---- */
.metric-card,
.detail-card {
  box-sizing: border-box;
  overflow: hidden;
  padding: 1.25rem 1.5rem !important;
}
.metric-card strong,
.metric-card small,
.detail-card strong,
.detail-card span {
  display: block;
  max-width: 100%;
  overflow-wrap: break-word;
}

/* ---- Fix: boxar som klipptes av vid skarmkanten -----
   Klassisk CSS Grid-bugg: "1fr" krymper INTE under innehallets
   naturliga bredd (t.ex. stora procentsiffror), vilket tryckte ut
   sista kolumnen utanfor synligt omrade. "minmax(0, 1fr)" later
   kolumnerna krympa korrekt. !important anvands har medvetet for
   att garanterat vinna over grundstilen, oavsett dess specificitet. */
.metrics-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
.metric-card {
  min-width: 0;
}

/* ---- Trading: 5-kolumners metrics-grid (samma fix) ---- */
.trading-metrics-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
@media (max-width: 1200px) {
  .trading-metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  .metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ---- Trading: 3-kolumners layout (Signalflode / Positioner / Historik) ---- */
.trading-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1.2fr);
  gap: 1rem;
  margin-top: 1rem;
  align-items: start;
}
@media (max-width: 1100px) {
  .trading-columns {
    grid-template-columns: 1fr;
  }
}
.trading-column--positions .work-card {
  padding: 1rem 1.1rem;
}

.trading-pos-filter-btn,
.trading-series-btn {
  border: 1px solid rgba(var(--wch), 0.15);
  background: transparent;
  color: inherit;
  border-radius: 999px;
  padding: 0.3rem 0.9rem;
  font-size: 0.8rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.trading-pos-filter-btn.active,
.trading-series-btn.active {
  background: rgba(var(--wch), 0.15);
}
.trading-series-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.trading-feed-row.ignored {
  opacity: 0.55;
}

.trading-pnl-row {
  margin-top: 0.4rem;
  font-weight: 700;
  font-size: 1.05rem;
}
.trading-pnl-row.positive,
.trading-top-performer-row .positive,
.trading-live-gain.positive {
  color: var(--c4ade80);
}
.trading-pnl-row.negative,
.trading-top-performer-row .negative,
.trading-live-gain.negative {
  color: var(--cf87171);
}

.trading-live-gain {
  margin-top: 0.5rem;
  font-weight: 600;
  font-size: 0.95rem;
}

.trading-exit-rule {
  margin-top: 0.5rem;
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
  background: rgba(var(--wch), 0.05);
  font-size: 0.8rem;
  opacity: 0.85;
  line-height: 1.4;
}

.trading-description-panel {
  margin-top: 1rem;
}
.trading-short-desc {
  margin: 0;
  opacity: 0.9;
}
.trading-long-desc {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(var(--wch), 0.1);
  font-size: 0.9rem;
  line-height: 1.6;
  opacity: 0.85;
}
.trading-long-desc p {
  margin: 0 0 0.75rem 0;
}

#tradingTimeRangeSelector,
#tradingSeriesFilter {
  margin-bottom: 0.75rem;
}

.trading-chart-legend {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.75rem;
  opacity: 0.8;
  margin-bottom: 0.5rem;
}
.legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 0.3rem;
}
.legend-dot.buy { background: var(--c60a5fa); }
.legend-dot.sell-win { background: var(--c4ade80); }
.legend-dot.sell-loss { background: var(--cf87171); }
.legend-dot.deposit { background: var(--cfbbf24); }

.chart-marker {
  stroke: rgba(var(--bch), 0.4);
  stroke-width: 1;
  cursor: pointer;
}
.chart-marker-symbol {
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  paint-order: stroke;
  stroke: rgba(var(--bch), 0.55);
  stroke-width: 2px;
}
.chart-marker-symbol.buy { fill: var(--c4ade80); }
.chart-marker-symbol.sell-win { fill: var(--c4ade80); }
.chart-marker-symbol.sell-loss { fill: var(--cf87171); }
.chart-marker-symbol.deposit { fill: var(--cfbbf24); font-size: 9px; }

.chart-axis-label {
  font-size: 10px !important;
  font-family: inherit !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  fill: currentColor;
  opacity: 0.45;
}

.trading-top-performers__list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.5rem;
}
.trading-top-performer-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
}

.trading-ai-summary {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(var(--wch), 0.1);
}
.trading-ai-summary__header {
  margin-bottom: 0.4rem;
}
.trading-ai-summary p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  opacity: 0.9;
}

/* ---- Fix: spokgraf som lackte igenom fran icke-aktiva flikar -----
   Vi forladdar nu alla flikars data direkt vid uppstart (for snabbare
   flikbyten), men det avslojade att inaktiva ".page"-sektioner inte
   doldes helt av grundstilen - deras SVG-grafer "lackte" igenom pa
   andra flikar. Detta tvingar garanterat fullstandig dolning. */
.page {
  display: none !important;
}
.page.active {
  display: block !important;
}

/* ---- Fix: den "fastlasta" dekorativa bakgrunden pa .progress-baren -----
   Grundstilens .progress::before (en dekorativ kurv-silhuett, molnet.css:564)
   anvander position:absolute men .progress sjalv saknade position:relative,
   vilket fick mönstret att positionera sig mot en helt annan, mycket storre
   forfader langre upp i sidan - darav "spoklinjen" som verkade fastlast. */
.progress {
  position: relative !important;
  overflow: hidden !important;
}

/* Valfritt: ta helt bort den dekorativa kurv-silhuetten bakom progress-barerna */
/* .progress::before { display: none !important; } */

/* ---- Storre dekorativ kurv-bakgrund pa hela metric-card (inte bara stapeln) ---- */
.metric-card {
  position: relative;
  overflow: hidden;
}
.metric-card > * {
  position: relative;
  z-index: 1;
}
.metric-card::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 60%;
  background: linear-gradient(to top, rgba(96, 165, 250, 0.16), transparent);
  clip-path: polygon(0 82%, 11% 62%, 21% 71%, 31% 38%, 43% 53%, 53% 28%, 65% 47%, 78% 17%, 89% 31%, 100% 4%, 100% 100%, 0 100%);
  pointer-events: none;
  z-index: 0;
}

/* ---- Samma dekor pa de tre forsta korten i Trading (Insatt kapital / Totalt varde / Vinst) ---- */
.trading-metrics-grid > .metric-card:nth-child(-n+3)::before {
  height: 65%;
  background: linear-gradient(to top, rgba(56, 189, 248, 0.18), transparent);
}


/* ---- Trading-graf v2: rena linjer + markorer ---- */
.chart-line-series { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart-grid-line--zero { stroke: rgba(var(--wch), 0.16); stroke-width: 1; }
.history-chart svg text.chart-axis-label { fill: var(--muted, var(--c8d999f)); font-size: 10px; }
.chart-mk { stroke: rgba(9, 12, 18, 0.55); stroke-width: 1; cursor: pointer; }
.chart-mk--buy { fill: var(--c60a5fa); }
.chart-mk--win { fill: var(--c4ade80); }
.chart-mk--loss { fill: var(--cf87171); }
.chart-mk--dep { fill: var(--cfbbf24); }

/* ---- #work info: gruppchatt-sammanstallning ---- */
.work-info-subhead { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.5; margin: 0.75rem 0 0.4rem; }
.work-info-subhead:first-child { margin-top: 0; }
.work-card__unread { margin: 0.35rem 0; display: flex; flex-direction: column; gap: 0.25rem; }
.work-unread-line { font-size: 0.85rem; line-height: 1.35; opacity: 0.9; }
.work-unread-who { font-weight: 600; opacity: 0.85; }
.work-unread-more { font-size: 0.78rem; opacity: 0.55; }
.work-card__ai:not(:empty) { margin: 0.4rem 0; padding: 0.5rem 0.7rem; border-radius: 8px; background: rgba(96,165,250,0.10); border: 1px solid rgba(96,165,250,0.22); font-size: 0.85rem; line-height: 1.4; }

/* ---- Uppgift: bockruta + klar-animation ---- */
.work-card__actions { align-items: center; }
.work-check { margin-left: auto; display: inline-flex; align-items: center; cursor: pointer; }
.work-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.work-check__box { width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid rgba(var(--wch),0.28); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; color: transparent; line-height: 1; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
.work-check:hover .work-check__box { border-color: rgba(var(--wch),0.5); }
.work-check input:checked + .work-check__box, .work-card--done .work-check__box { background: var(--c34c759); border-color: var(--c34c759); color: #fff; }
#workTaskList .work-card { max-height: 1000px; transition: opacity 0.4s ease, transform 0.4s ease, max-height 0.5s ease, margin 0.4s ease, padding 0.4s ease; }
#workTaskList .work-card.work-card--vanish { opacity: 0; transform: translateY(-6px) scale(0.98); max-height: 0; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; overflow: hidden; pointer-events: none; }

/* ---- #work info: auto-AI laddning ---- */
.work-card__ai--loading { opacity: 0.72; font-style: italic; }

.chart-session-divider { stroke: rgba(var(--wch),0.14); stroke-width: 1; stroke-dasharray: 2 3; }

/* ---------- Fit4Life-flik ---------- */
.fit4life-view { display:flex; flex-direction:column; gap:1.4rem; }
.f4l-cat__head { display:flex; align-items:center; gap:.5rem; margin:.2rem 0 .7rem; }
.f4l-cat__head h3 { margin:0; font-size:.95rem; letter-spacing:.01em; }
.f4l-cat__dot { width:10px; height:10px; border-radius:50%; display:inline-block; flex:0 0 auto; }
.f4l-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:.75rem; }
.f4l-card { background:rgba(var(--wch),.03); border:1px solid rgba(var(--wch),.08); border-radius:12px; padding:.75rem .85rem; display:flex; flex-direction:column; gap:.35rem; transition:opacity .35s ease, transform .35s ease; }
.f4l-card.is-vanishing { opacity:0; transform:translateY(-8px) scale(.98); }
.f4l-card__sender { font-weight:600; font-size:.8rem; }
.f4l-card__subject { font-size:.9rem; line-height:1.3; }
.f4l-card__snippet { font-size:.77rem; opacity:.55; line-height:1.4; }
.f4l-card__hint { font-size:.75rem; opacity:.85; }
.f4l-card__actions { display:flex; align-items:center; gap:.4rem; margin-top:.35rem; flex-wrap:wrap; }
.f4l-card__actions button { font-size:.74rem; padding:.28rem .6rem; border-radius:8px; border:1px solid rgba(var(--wch),.14); background:rgba(var(--wch),.04); color:inherit; cursor:pointer; }
.f4l-card__actions button:hover { background:rgba(var(--wch),.1); }
.f4l-card__actions .f4l-link { border:none; background:none; opacity:.6; padding:.28rem .3rem; }
.f4l-card__actions .f4l-link:hover { opacity:1; text-decoration:underline; }
.f4l-card__actions .work-check { margin-left:auto; }

/* ---------- Fit4Life: expand + bulk ---------- */
.f4l-cat__head .f4l-cat__bulk { margin-left:auto; display:flex; gap:.4rem; }
.f4l-card__more { margin-top:.4rem; padding-top:.4rem; border-top:1px dashed rgba(var(--wch),.12); display:flex; flex-direction:column; gap:.4rem; }
.f4l-card__body { font-size:.78rem; opacity:.75; white-space:pre-wrap; max-height:260px; overflow:auto; line-height:1.45; }
.f4l-card__ai { font-size:.78rem; opacity:.9; }
.f4l-ai-loading { opacity:.6; font-style:italic; }

/* ---------- Fit4Life: compose (svar / VB:a) ---------- */
.f4l-compose { margin-top:.5rem; padding:.6rem; border:1px solid rgba(var(--wch),.14); border-radius:10px; background:rgba(var(--wch),.03); display:flex; flex-direction:column; gap:.45rem; }
.f4l-compose__label { font-size:.78rem; font-weight:600; opacity:.85; }
.f4l-compose__body, .f4l-compose__input, .f4l-compose__select { width:100%; box-sizing:border-box; background:rgba(var(--bch),.25); color:inherit; border:1px solid rgba(var(--wch),.16); border-radius:8px; padding:.45rem .55rem; font:inherit; font-size:.82rem; }
.f4l-compose__body { resize:vertical; min-height:80px; line-height:1.45; }
.f4l-compose__row { display:flex; gap:.5rem; align-items:center; }
.f4l-compose__row button:first-child { background:var(--c2f6df6); border-color:var(--c2f6df6); color:#fff; padding:.35rem .8rem; border-radius:8px; cursor:pointer; }

/* ---------- Fit4Life: tydligare kort + mörk dropdown ---------- */
.f4l-card__hint { background:rgba(232,176,75,.12); border-left:3px solid rgba(232,176,75,.6); padding:.42rem .55rem; border-radius:6px; opacity:1; }
.f4l-card__hint:empty { display:none; }
.f4l-card__snippet { margin-bottom:.1rem; }
.f4l-card__actions { margin-top:.55rem; padding-top:.55rem; border-top:1px solid rgba(var(--wch),.1); }
.f4l-compose__select { background:var(--c1c1f24); color:var(--ce8eaee); }
.f4l-compose__select option { background:var(--c1c1f24); color:var(--ce8eaee); }

/* ---------- Fit4Life: mörk dropdown + fakturarad ---------- */
.f4l-dd { position:relative; }
.f4l-dd__toggle { width:100%; text-align:left; background:var(--c1c1f24); color:var(--ce8eaee); border:1px solid rgba(var(--wch),.16); border-radius:8px; padding:.45rem .55rem; font:inherit; font-size:.82rem; cursor:pointer; }
.f4l-dd__menu { position:absolute; z-index:30; left:0; right:0; margin-top:2px; background:var(--c181b1f); border:1px solid rgba(var(--wch),.16); border-radius:8px; overflow:hidden; box-shadow:0 8px 24px rgba(var(--bch),.5); }
.f4l-dd__item { padding:.5rem .6rem; font-size:.82rem; color:var(--ce8eaee); cursor:pointer; }
.f4l-dd__item:hover { background:var(--c2f6df6); color:#fff; }
.f4l-card__invoice { font-size:.78rem; background:rgba(226,87,76,.12); border-left:3px solid rgba(226,87,76,.6); padding:.42rem .55rem; border-radius:6px; }
.f4l-route { font-weight:600; }
.f4l-route--pay { color:var(--cffcf6b); }
.f4l-route--arch { color:var(--c7fd6ff); }

/* ---------- Rave-flik ---------- */
.rave-tab-btn { padding:.4rem .8rem; border-radius:8px; border:1px solid rgba(var(--wch),.14); background:rgba(var(--wch),.04); color:inherit; cursor:pointer; font-size:.82rem; }
.rave-tab-btn.active { background:var(--c6b3df6); border-color:var(--c6b3df6); color:#fff; }
.rave-filters { display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 1rem; }
.rave-filter { background:var(--c1c1f24); color:var(--ce8eaee); border:1px solid rgba(var(--wch),.16); border-radius:8px; padding:.4rem .55rem; font-size:.8rem; }
.rave-filter--q { min-width:180px; }
.rave-year { font-size:1.1rem; font-weight:700; opacity:.85; margin:1.2rem 0 .6rem; letter-spacing:.02em; }
.rave-flow { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:.9rem; }
.rave-card { position:relative; background:linear-gradient(160deg, rgba(107,61,246,.10), rgba(var(--wch),.03)); border:1px solid rgba(var(--wch),.09); border-radius:14px; padding:.9rem 1rem; display:flex; flex-direction:column; gap:.5rem; }
.rave-edit { position:absolute; top:.55rem; right:.55rem; background:none; border:none; color:inherit; opacity:.5; cursor:pointer; font-size:.95rem; }
.rave-edit:hover { opacity:1; }
.rave-card__name { font-size:1.02rem; font-weight:700; padding-right:1.5rem; line-height:1.25; }
.rave-card__meta { display:flex; flex-wrap:wrap; gap:.4rem .9rem; font-size:.78rem; opacity:.7; }
.rave-genres { display:flex; flex-wrap:wrap; gap:.35rem; }
.rave-genre { font-size:.68rem; text-transform:uppercase; letter-spacing:.04em; padding:.15rem .45rem; border-radius:999px; background:rgba(107,61,246,.22); color:var(--cd9ccff); }
.rave-card__desc { font-size:.8rem; opacity:.7; line-height:1.4; }
.rave-stars { display:flex; gap:.15rem; font-size:1.15rem; }
.rave-star { color:rgba(var(--wch),.22); cursor:pointer; transition:transform .1s; }
.rave-star.on { color:var(--cffce54); }
.rave-star:hover { transform:scale(1.2); }
.rave-note { font-size:.8rem; display:flex; flex-direction:column; gap:.3rem; }
.rave-note__text { opacity:.8; }
.rave-note__input { width:100%; box-sizing:border-box; background:rgba(var(--bch),.25); color:inherit; border:1px solid rgba(var(--wch),.16); border-radius:8px; padding:.4rem; font:inherit; font-size:.8rem; }
.rave-link { border:none; background:none; color:inherit; opacity:.6; cursor:pointer; font-size:.76rem; padding:.1rem 0; text-align:left; }
.rave-link:hover { opacity:1; text-decoration:underline; }
.rave-modal { position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; }
.rave-modal__backdrop { position:absolute; inset:0; background:rgba(var(--bch),.6); }
.rave-modal__box { position:relative; z-index:1; width:min(520px,92vw); max-height:88vh; overflow:auto; background:var(--c181b1f); border:1px solid rgba(var(--wch),.12); border-radius:14px; padding:1.2rem 1.3rem; display:flex; flex-direction:column; gap:.55rem; }
.rave-modal__box h3 { margin:0 0 .3rem; }
.rave-modal__box label { display:flex; flex-direction:column; gap:.2rem; font-size:.76rem; opacity:.85; }
.rave-modal__box input, .rave-modal__box textarea { background:rgba(var(--bch),.28); color:var(--ce8eaee); border:1px solid rgba(var(--wch),.16); border-radius:8px; padding:.4rem .5rem; font:inherit; font-size:.85rem; }
.rave-modal__row { display:flex; gap:.5rem; }
.rave-modal__row label { flex:1; }
.rave-chips { display:flex; flex-wrap:wrap; gap:.35rem; }
.rave-chip { display:inline-flex; align-items:center; gap:.3rem; background:rgba(107,61,246,.22); color:var(--cd9ccff); border-radius:999px; padding:.15rem .5rem; font-size:.74rem; }
.rave-chip__x { cursor:pointer; opacity:.7; }
.rave-chip__x:hover { opacity:1; }
.rave-addchip { display:flex; gap:.4rem; }
.rave-addchip input { flex:1; }
.rave-modal__actions { display:flex; gap:.5rem; margin-top:.4rem; }
.rave-modal__box button:not(.rave-link), .rave-addchip button, .rave-note button:not(.rave-link) { background:var(--c6b3df6); border:1px solid var(--c6b3df6); color:#fff; border-radius:8px; padding:.35rem .8rem; cursor:pointer; font-size:.8rem; }

.rave-year--upcoming { color:var(--cb39cff); }

/* ---------- Rave: rekommendationer ---------- */
.rave-card--reco { padding-top:0; overflow:hidden; }
.rave-card__flyer { width:calc(100% + 2rem); margin:0 -1rem .55rem; height:140px; background-size:cover; background-position:center; }
.rave-rec__actions { display:flex; align-items:center; gap:.5rem; margin-top:.3rem; }
.rave-fb { border:1px solid rgba(var(--wch),.16); background:rgba(var(--wch),.05); color:inherit; border-radius:8px; padding:.3rem .6rem; cursor:pointer; font-size:.78rem; }
.rave-fb--yes:hover { background:rgba(150,158,170,.22); border-color:rgba(150,158,170,.4); }
.rave-fb--no:hover { background:rgba(226,87,76,.22); border-color:rgba(226,87,76,.5); }
.rave-prefs { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .7rem; }
.rave-prefs__label { font-size:.8rem; opacity:.7; }
.rave-prefs__city { font-size:.8rem; display:inline-flex; align-items:center; gap:.25rem; cursor:pointer; }
.rave-prefs select { background:var(--c1c1f24); color:var(--ce8eaee); border:1px solid rgba(var(--wch),.16); border-radius:8px; padding:.3rem .45rem; font-size:.8rem; }
.rave-prefs button { background:var(--c6b3df6); border:1px solid var(--c6b3df6); color:#fff; border-radius:8px; padding:.35rem .8rem; cursor:pointer; font-size:.8rem; }

.rave-prefs__sep { flex-basis:100%; height:0; }
.rave-reco-date, #rave-reco-date, #rave-reco-week { background:var(--c1c1f24); color:var(--ce8eaee); border:1px solid rgba(var(--wch),.16); border-radius:8px; padding:.3rem .45rem; font-size:.8rem; }

/* ---------- Infrastruktur: bort med dekorativa moln-grafer + resurspanel ---------- */
.metric-card::before { display: none !important; }
.metric-card .progress { display: none !important; }
.res-title { margin: 0 0 .9rem; font-size: .95rem; }
.res-row { margin-bottom: .55rem; }
.res-row__top { display: flex; justify-content: space-between; gap: 1rem; font-size: .8rem; margin-bottom: .25rem; }
.res-row__val { opacity: .6; white-space: nowrap; }
.res-bar { height: 8px; background: rgba(var(--wch),.06); border-radius: 6px; overflow: hidden; }
.res-bar span { display: block; height: 100%; background: linear-gradient(90deg,var(--c60a5fa),var(--c6b3df6)); border-radius: 6px; }

/* ---------- Agenda / Kalender ---------- */
.agenda-tab-btn { padding:.4rem .8rem; border-radius:8px; border:1px solid rgba(var(--wch),.14); background:rgba(var(--wch),.04); color:inherit; cursor:pointer; font-size:.82rem; }
.agenda-tab-btn.active { background:var(--c3b6df6); border-color:var(--c3b6df6); color:#fff; }
.agenda-day-head { display:flex; align-items:center; gap:1rem; margin:.2rem 0 1rem; }
.agenda-day-head h3 { margin:0; text-transform:capitalize; }
.agenda-heat { font-size:.72rem; padding:.2rem .55rem; border-radius:999px; font-weight:600; white-space:nowrap; }
.agenda-heat--0, .agenda-heat--1 { background:rgba(120,200,140,.18); color:var(--c8fe0a8); }
.agenda-heat--2 { background:rgba(232,200,90,.18); color:var(--ce8cf6b); }
.agenda-heat--3 { background:rgba(240,150,70,.20); color:var(--cffb672); }
.agenda-heat--4 { background:rgba(226,87,76,.22); color:var(--cff8f85); }
.agenda-allday-row { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.8rem; }
.agenda-allday { background:rgba(59,109,246,.18); color:var(--ca9c3ff); border-radius:8px; padding:.25rem .55rem; font-size:.78rem; }
.agenda-ev { display:flex; gap:.9rem; padding:.6rem 0; border-top:1px solid rgba(var(--wch),.07); }
.agenda-ev__time { min-width:96px; font-variant-numeric:tabular-nums; font-size:.82rem; opacity:.8; }
.agenda-ev__title { font-weight:600; font-size:.9rem; }
.agenda-ev__meta { font-size:.76rem; opacity:.6; margin-top:.15rem; }
.agenda-ev__desc { font-size:.78rem; opacity:.55; margin-top:.25rem; line-height:1.4; }
.agenda-week { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:.6rem; }
.agenda-week--7 { grid-template-columns:repeat(7,minmax(0,1fr)); }
.agenda-col { background:rgba(var(--wch),.03); border:1px solid rgba(var(--wch),.08); border-radius:12px; padding:.55rem; min-height:120px; }
.agenda-col__head { display:flex; flex-direction:column; gap:.3rem; margin-bottom:.5rem; font-size:.76rem; text-transform:capitalize; }
.agenda-col__head .agenda-heat { align-self:flex-start; }
.agenda-mini { font-size:.75rem; padding:.3rem .4rem; border-radius:6px; background:rgba(var(--wch),.04); margin-bottom:.3rem; line-height:1.3; }
.agenda-mini__t { opacity:.6; font-variant-numeric:tabular-nums; }
.agenda-col__empty { opacity:.3; font-size:.8rem; text-align:center; padding:.4rem 0; }
@media (max-width:1100px){ .agenda-week, .agenda-week--7 { grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* ---------- Agenda: rymligare dagvy + telefon/PT ---------- */
.agenda-ev { border-top: none !important; background: rgba(var(--wch),.035); border: 1px solid rgba(var(--wch),.08); border-radius: 12px; padding: 1.05rem 1.2rem !important; margin-bottom: .75rem; gap: 1.15rem !important; align-items: flex-start; }
.agenda-ev__time { min-width: 112px !important; font-size: .9rem !important; padding-top: .1rem; }
.agenda-ev__title { font-size: 1rem !important; line-height: 1.3; }
.agenda-ev__meta { font-size: .8rem !important; margin-top: .3rem !important; }
.agenda-ev__desc { font-size: .82rem !important; margin-top: .4rem !important; }
.agenda-ev--chill { opacity: .72; }
.agenda-mini--chill { opacity: .62; }


/* ===================== Bevakning ===================== */
section[data-page="bevakning"] { padding: 4px 2px; }
.bev-head { margin-bottom: 14px; }
.bev-persons { display: flex; gap: 8px; flex-wrap: wrap; }
.bev-person {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 999px; cursor: pointer;
  background: var(--c16181c); border: 1px solid var(--c262a31); color: var(--cc9cdd4);
  font-size: 14px; font-weight: 600; transition: .15s;
}
.bev-person:hover { border-color: var(--c3a414c); }
.bev-person.is-active { background: var(--c1e2127); border-color: var(--c6f7f97); color: #fff; }
.bev-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.bev-dot--on { background: var(--c46d18a); box-shadow: 0 0 6px var(--c46d18a)88; }
.bev-dot--off { background: var(--c454b55); }

.bev-controls {
  background: var(--c16181c); border: 1px solid var(--c24272d); border-radius: 14px;
  padding: 16px 18px; margin-bottom: 16px;
}
.bev-ctl-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.bev-role { color: var(--c8f959f); font-size: 13px; margin: 10px 0 4px; }

.bev-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.bev-switch input { display: none; }
.bev-switch__track {
  width: 42px; height: 24px; border-radius: 999px; background: var(--c2b2f36);
  position: relative; transition: .2s;
}
.bev-switch__track::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; transition: .2s;
}
.bev-switch input:checked + .bev-switch__track { background: var(--c3f8f5f); }
.bev-switch input:checked + .bev-switch__track::after { left: 21px; }
.bev-switch__label { font-size: 13px; font-weight: 600; color: var(--cc9cdd4); }

.bev-freqgroup { display: inline-flex; border: 1px solid var(--c2e323a); border-radius: 10px; overflow: hidden; }
.bev-freq {
  padding: 7px 14px; background: var(--c16181c); border: none; color: var(--ca2a8b1);
  cursor: pointer; font-size: 13px; border-right: 1px solid var(--c2e323a);
}
.bev-freq:last-child { border-right: none; }
.bev-freq.is-active { background: var(--c2d64c4); color: #fff; }
.bev-meta { color: var(--c6a7078); font-size: 12px; margin-left: auto; }

.bev-lanes { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.bev-lane { display: flex; align-items: center; gap: 10px; }
.bev-lane__label {
  min-width: 150px; font-size: 12px; font-weight: 600; color: var(--ca2a8b1);
}
.bev-lane__input {
  flex: 1; background: var(--c121417); border: 1px solid var(--c2a2e35); border-radius: 8px;
  padding: 7px 10px; color: var(--ce7e9ee); font-size: 13px;
}
.bev-lane__input:focus { outline: none; border-color: var(--c6f7f97); }
.bev-save {
  align-self: flex-start; margin-top: 4px; padding: 7px 16px; border-radius: 8px;
  background: var(--c39424f); border: 1px solid var(--c4c5666); color: var(--cd8dbe1); cursor: pointer; font-size: 13px;
}
.bev-save:hover { background: var(--c454f5e); }

.bev-locs { margin-top: 12px; font-size: 12px; color: var(--c8f959f); }
.bev-locs__label { color: var(--c6a7078); margin-right: 4px; }
.bev-chip {
  display: inline-block; padding: 3px 9px; margin: 2px; border-radius: 999px;
  background: var(--c1a1d22); border: 1px solid var(--c2a2e35);
  color: var(--cb0b5bd); font-size: 12px;
}
.bev-chip--remote { background: var(--c16302a); border-color: var(--c2f5f4c); color: var(--c7fdcaf); }

.bev-feedhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.bev-lanefilters { display: flex; gap: 6px; flex-wrap: wrap; }
.bev-lanefilter {
  padding: 5px 12px; border-radius: 999px; background: var(--c16181c); border: 1px solid var(--c2a2e35);
  color: var(--ca2a8b1); cursor: pointer; font-size: 12px;
}
.bev-lanefilter.is-active { background: var(--c1e2127); border-color: var(--c6f7f97); color: #fff; }
.bev-toggle-arch {
  padding: 5px 12px; border-radius: 8px; background: transparent; border: 1px solid var(--c2e323a);
  color: var(--c8f959f); cursor: pointer; font-size: 12px;
}
.bev-toggle-arch.is-active { background: var(--c201a12); border-color: var(--c5a4a2c); color: var(--ce0c48a); }

.bev-feed { display: flex; flex-direction: column; gap: 10px; }
.bev-hit {
  background: var(--c16181c); border: 1px solid var(--c24272d); border-left: 3px solid var(--c2d64c4);
  border-radius: 12px; padding: 14px 16px;
}
.bev-hit.is-rel { border-left-color: var(--c46d18a); }
.bev-hit.is-dism { opacity: .55; border-left-color: var(--c3f454f); }
.bev-hit__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.bev-hit__title { color: var(--ceef0f4); font-weight: 600; font-size: 15px; text-decoration: none; }
.bev-hit__title:hover { text-decoration: underline; }
.bev-hit__score {
  flex-shrink: 0; font-size: 12px; font-weight: 700; color: var(--c9aa0ab);
  background: var(--c1a1d22); border-radius: 8px; padding: 2px 9px;
}
.bev-hit__meta { margin-top: 6px; font-size: 12px; color: var(--c8f959f); display: flex; gap: 12px; flex-wrap: wrap; }
.bev-hit__emp { color: var(--cb0b5bd); font-weight: 600; }
.bev-hit__dl { color: var(--ce0a37a); }
.bev-hit__badges { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.bev-badge {
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
  background: var(--c1e2127); color: var(--c9aa0ab); border: 1px solid var(--c333842);
}
.bev-hit__desc { margin-top: 8px; font-size: 12px; color: var(--c9aa0ab); line-height: 1.5; }
.bev-hit__acts { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.bev-act {
  padding: 6px 13px; border-radius: 8px; font-size: 12px; cursor: pointer;
  background: var(--c1a1d22); border: 1px solid var(--c2a2e35); color: var(--cc9cdd4); text-decoration: none;
}
.bev-act:hover { border-color: var(--c3a414c); }
.bev-act--rel { background: var(--c123528); border-color: var(--c2f6b4c); color: var(--c7fdcaf); }
.bev-act--dism { background: var(--c2a1a1a); border-color: var(--c5a3030); color: var(--ce0a0a0); }
.bev-act--open { background: transparent; }
.bev-empty { color: var(--c6a7078); text-align: center; padding: 28px; font-size: 14px; }


/* ===================== Anslutning-kort (Infrastruktur) ===================== */
#connCard .conn-grid { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; }
.conn-row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; padding: 7px 0; border-bottom: 1px solid rgba(var(--wch),0.06); }
.conn-row:last-child { border-bottom: none; }
.conn-k { color: var(--c8f959f); }
.conn-v { color: var(--ce7e9ee); font-weight: 600; text-align: right; }
.conn-cmd { display: flex; align-items: center; gap: 10px; background: var(--c121417); border: 1px solid var(--c2a2e35); border-radius: 10px; padding: 10px 12px; margin-bottom: 14px; }
.conn-cmd code { flex: 1; color: var(--c9fdcff); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; }
.conn-copy { padding: 6px 13px; border-radius: 8px; border: 1px solid var(--c4c5666); background: var(--c39424f); color: var(--cd8dbe1); cursor: pointer; font-size: 12px; }
.conn-copy:hover { background: var(--c454f5e); }
.conn-keys { margin-bottom: 12px; }
.conn-keys .conn-k { margin-bottom: 6px; }
.conn-chip { display: inline-block; padding: 5px 11px; border-radius: 999px; background: var(--c1a1d22); border: 1px solid var(--c2a2e35); color: var(--cb0b5bd); font-size: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.conn-note { font-size: 12px; color: var(--c9aa0ab); line-height: 1.5; background: var(--c16140c); border: 1px solid var(--c3a3116); border-radius: 10px; padding: 10px 12px; }
.conn-note strong { color: var(--ce0c48a); }


/* ===================== Dashboard-hem ===================== */
.dash-body { min-height: 40px; }
.dash-empty { color: var(--c6a7078); font-size: 13px; padding: 6px 0; }
.dash-sub { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--c7c828c); margin-bottom: 6px; }
.dash-tag { display: inline-block; font-size: 12px; padding: 3px 10px; border-radius: 999px; background: var(--c1e2127); border: 1px solid var(--c333842); color: var(--c9aa0ab); margin-bottom: 6px; }

.dash-agenda { display: flex; flex-direction: column; gap: 2px; }
.dash-ev { display: grid; grid-template-columns: 92px 1fr; align-items: baseline; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(var(--wch),0.06); }
.dash-ev:last-child { border-bottom: none; }
.dash-ev__t { color: var(--c9aa0ab); font-size: 13px; font-variant-numeric: tabular-nums; }
.dash-ev__title { color: var(--ce7e9ee); font-weight: 600; font-size: 14px; }
.dash-ev__loc { grid-column: 2; color: var(--c8f959f); font-size: 12px; }

.dash-list { display: flex; flex-direction: column; gap: 1px; }
.dash-row { padding: 7px 0; border-bottom: 1px solid rgba(var(--wch),0.05); }
.dash-row:last-child { border-bottom: none; }
.dash-row__t { display: block; color: var(--cd8dbe1); font-size: 13px; font-weight: 500; }
.dash-row__s { display: block; color: var(--c8a8f99); font-size: 12px; margin-top: 1px; }

.dash-stats { display: flex; gap: 18px; flex-wrap: wrap; }
.dash-stats--col { flex-direction: column; gap: 4px; }
.dash-stats > div { display: flex; flex-direction: column; }
.dash-stats--col > div { flex-direction: row; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid rgba(var(--wch),0.05); }
.dash-k { color: var(--c8f959f); font-size: 12px; }
.dash-v { color: var(--ce7e9ee); font-weight: 700; font-size: 15px; }
.dash-stats--col .dash-v { font-size: 13px; }
.dash-v.pos { color: var(--c46d18a); }
.dash-v.neg { color: var(--ce08a8a); }

.dash-newsmeta { color: var(--c6a7078); font-size: 12px; }
.dash-news { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; }
.dash-news__item { display: flex; align-items: baseline; gap: 8px; padding: 7px 0; text-decoration: none; border-bottom: 1px solid rgba(var(--wch),0.05); }
.dash-news__item:hover .dash-news__title { text-decoration: underline; }
.dash-news__src { flex-shrink: 0; color: var(--c7c828c); font-size: 11px; min-width: 62px; }
.dash-news__title { color: var(--cd8dbe1); font-size: 13px; line-height: 1.35; }
.dash-news__badge { flex-shrink: 0; font-size: 10px; padding: 1px 7px; border-radius: 999px; background: var(--c123528); border: 1px solid var(--c2f6b4c); color: var(--c7fdcaf); }
.dash-news__item.is-rel .dash-news__title { color: var(--ce7e9ee); }
@media (max-width: 720px) { .dash-news { grid-template-columns: 1fr; } }


/* ===================== Projekt: underflikar + Nodpunkt/Coach ===================== */
.proj-subtabs { display: flex; gap: 8px; margin: 28px 0 4px; }
.proj-subtab { padding: 9px 18px; border-radius: 999px; cursor: pointer; font-size: 14px; font-weight: 600;
  background: var(--c16181c); border: 1px solid var(--c262a31); color: var(--cc9cdd4); transition: .15s; }
.proj-subtab:hover { border-color: var(--c3a414c); }
.proj-subtab.is-active { background: var(--c1e2127); border-color: var(--c6f7f97); color: #fff; }

.proj-details { margin-top: 8px; border: 1px solid var(--c24272d); border-radius: 12px; background: var(--c16181c); padding: 0 16px; }
.proj-details > summary { cursor: pointer; padding: 14px 0; font-weight: 600; color: var(--cc9cdd4); list-style: none; }
.proj-details > summary::-webkit-details-marker { display: none; }
.proj-details > summary::before { content: "▸ "; color: var(--c7c828c); }
.proj-details[open] > summary::before { content: "▾ "; }
.proj-details > summary:hover { color: #fff; }

.np-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 8px; }
.np-tile { background: var(--c121417); border: 1px solid var(--c24272d); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.np-tile__k { color: var(--c8f959f); font-size: 12px; }
.np-tile__v { color: var(--ceef0f4); font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.np-insight { color: var(--c9aa0ab); font-size: 13px; line-height: 1.5; margin-top: 12px;
  background: var(--c16181c); border: 1px solid var(--c262a31); border-radius: 10px; padding: 10px 12px; }

.coach-block { margin-top: 20px; }
.coach-block h4 { margin: 0 0 10px; font-size: 13px; color: var(--ca2a8b1); font-weight: 600; }
.coach-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.coach-bars { display: flex; align-items: flex-end; gap: 4px; height: 110px; }
.coach-bars--h { gap: 2px; }
.coach-bar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.coach-bar > span { width: 100%; max-width: 26px; background: var(--c3f7fd6); border-radius: 4px 4px 0 0; transition: height .3s; }
.coach-bar.is-peak > span { background: var(--c5fa8ff); }
.coach-bar > em { margin-top: 5px; font-size: 10px; color: var(--c7c828c); font-style: normal; white-space: nowrap; }
.coach-bars--h .coach-bar > span { border-radius: 2px 2px 0 0; }

.coach-pages { display: flex; flex-direction: column; gap: 1px; }
.coach-page { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid rgba(var(--wch),0.05); }
.coach-page:last-child { border-bottom: none; }
.coach-page__p { color: var(--cd8dbe1); font-size: 13px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; }
.coach-page__c { color: var(--c9aa0ab); font-weight: 700; font-variant-numeric: tabular-nums; flex-shrink: 0; }
@media (max-width: 720px) { .np-stats { grid-template-columns: 1fr 1fr; } .coach-2col { grid-template-columns: 1fr; } }


/* ===================== Infrastruktur Start: bokmärken ===================== */
#bookmarksBody { margin-top: 4px; }
.bm-add { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.bm-in { flex: 1; min-width: 120px; background: var(--c121417); border: 1px solid var(--c2a2e35); border-radius: 8px;
  padding: 9px 11px; color: var(--ce7e9ee); font-size: 13px; }
.bm-in--url { flex: 2; min-width: 180px; }
.bm-in:focus { outline: none; border-color: var(--c6f7f97); }
.bm-addbtn { padding: 9px 16px; border-radius: 8px; border: 1px solid var(--c4c5666); background: var(--c39424f);
  color: var(--cd8dbe1); cursor: pointer; font-size: 13px; font-weight: 600; }
.bm-addbtn:hover { background: var(--c454f5e); }

.bm-cat { margin-bottom: 20px; }
.bm-cat__h { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--c7c828c);
  margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid rgba(var(--wch),0.08); }
.bm-link { background: var(--c16181c); border: 1px solid var(--c24272d); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; }
.bm-link__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bm-link__title { color: var(--ceef0f4); font-weight: 600; font-size: 14px; text-decoration: none; }
.bm-link__title:hover { text-decoration: underline; }
.bm-del { background: transparent; border: none; color: var(--c6a7078); cursor: pointer; font-size: 14px; padding: 2px 6px; border-radius: 6px; }
.bm-del:hover { color: var(--ce08a8a); background: var(--c2a1a1a); }
.bm-link__url { color: var(--c7c828c); font-size: 12px; margin: 2px 0 8px; word-break: break-all;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.bm-note { width: 100%; min-height: 38px; resize: vertical; background: var(--c121417); border: 1px solid var(--c2a2e35);
  border-radius: 8px; padding: 8px 10px; color: var(--cc9cdd4); font: inherit; font-size: 13px; }
.bm-note:focus { outline: none; border-color: var(--c6f7f97); }
.bm-note.bm-saved { border-color: var(--c2f6b4c); box-shadow: 0 0 0 2px rgba(70,209,138,0.15); }

/* ===================== Bokföring (Wexla) ===================== */
.bok-wrap { max-width: 1240px; margin: 0; padding: 4px 0 40px; }
.bok-layout { display: grid; grid-template-columns: 210px 1fr; gap: 20px; align-items: start; }
@media (max-width: 780px) { .bok-layout { grid-template-columns: 1fr; } }

.bok-menu { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 12px; }
.bok-menu__item { text-align: left; background: transparent; border: 1px solid transparent; border-radius: 10px;
  padding: 11px 14px; color: var(--ca2a8b1); cursor: pointer; font-size: 14px; font-weight: 500; }
.bok-menu__item:hover { background: var(--c16181c); color: var(--ce7e9ee); }
.bok-menu__item.is-active { background: var(--c22262d); color: var(--ceef0f4); border-color: var(--c333842); font-weight: 600; }

.bok-content { min-width: 0; }
.bok-h { font-size: 20px; color: var(--ceef0f4); margin: 0 0 4px; }
.bok-h3 { font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--c9aa0ab); margin: 0 0 10px; }
.bok-sub { color: var(--c9aa0ab); font-size: 13px; margin: 0 0 16px; }
.bok-empty { color: var(--c6a7078); font-size: 13px; padding: 14px 0; }
.bok-warn { color: var(--ce0a060); font-size: 12px; }

/* inputs / knappar */
.bok-in { background: var(--c121417); border: 1px solid var(--c2a2e35); border-radius: 8px; padding: 9px 11px;
  color: var(--ce7e9ee); font-size: 13px; font-family: inherit; }
.bok-in:focus { outline: none; border-color: var(--c6f7f97); }
.bok-in--s { max-width: 120px; } .bok-in--xs { max-width: 70px; } .bok-in--vat { max-width: 84px; }
select.bok-in { cursor: pointer; }
.bok-btn { padding: 9px 15px; border-radius: 8px; border: 1px solid var(--c4c5666); background: var(--c39424f);
  color: var(--cd8dbe1); cursor: pointer; font-size: 13px; font-weight: 600; }
.bok-btn:hover { background: var(--c454f5e); }
.bok-btn:disabled { opacity: .5; cursor: default; }
.bok-btn--pri { background: var(--c39424f); border-color: var(--c4c5666); }
.bok-btn--ghost { background: transparent; border-color: var(--c2e323a); color: var(--ca2a8b1); }
.bok-btn--ghost:hover { background: var(--c16181c); color: var(--ce7e9ee); }
.bok-btn--send { background: var(--c1e7d4f); border-color: var(--c2fa76a); color: var(--ceafff3); }
.bok-btn--send:hover { background: var(--c23935d); }
.bok-icon { background: transparent; border: none; color: var(--c6a7078); cursor: pointer; font-size: 14px; padding: 4px 7px; border-radius: 6px; }
.bok-icon:hover { color: var(--ccccfd5); background: var(--c22262d); }
.bok-icon--del:hover { color: var(--ce08a8a); background: var(--c2a1a1a); }
.bok-lbl { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--c9aa0ab); margin-bottom: 12px; }
.bok-lbl--inline { flex-direction: row; align-items: center; gap: 10px; }
.bok-lbl--x { flex-direction: column; }

/* fakturaposter */
.bok-postadd { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.bok-postadd .bok-in:first-child { flex: 1; min-width: 200px; }
.bok-list { display: flex; flex-direction: column; gap: 8px; }
.bok-row { display: flex; align-items: center; gap: 8px; background: var(--c16181c); border: 1px solid var(--c24272d); border-radius: 10px; padding: 8px 10px; }
.bok-cell-grow { flex: 1; min-width: 120px; }
.bok-tot { min-width: 110px; text-align: right; color: var(--ccccfd5); font-size: 13px; font-variant-numeric: tabular-nums; }

/* kontakter */
.bok-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-top: 14px; }
.bok-card { background: var(--c16181c); border: 1px solid var(--c24272d); border-radius: 12px; padding: 12px 14px; }
.bok-card__h { display: flex; justify-content: space-between; align-items: center; color: var(--ceef0f4); margin-bottom: 6px; }
.bok-card__b { color: var(--ca2a8b1); font-size: 12.5px; line-height: 1.6; }

/* sub-tabs */
.bok-subtabs { display: flex; gap: 6px; border-bottom: 1px solid var(--c24272d); margin-bottom: 18px; }
.bok-subtab { background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--c9aa0ab);
  padding: 10px 14px; cursor: pointer; font-size: 14px; font-weight: 500; }
.bok-subtab:hover { color: var(--ce7e9ee); }
.bok-subtab.is-active { color: var(--ceef0f4); border-bottom-color: var(--c6f7f97); font-weight: 600; }

/* ny faktura */
.bok-nf { display: grid; grid-template-columns: 300px 1fr; gap: 22px; align-items: start; }
@media (max-width: 820px) { .bok-nf { grid-template-columns: 1fr; } }
.bok-nf__cat { background: var(--c131518); border: 1px solid var(--c23262c); border-radius: 12px; padding: 14px; }
.bok-nf__cat .bok-in { width: 100%; box-sizing: border-box; margin-bottom: 10px; }
.bok-catlist { display: flex; flex-direction: column; gap: 6px; max-height: 360px; overflow-y: auto; margin-bottom: 10px; }
.bok-chip { display: flex; justify-content: space-between; align-items: center; gap: 8px; text-align: left;
  background: var(--c16181c); border: 1px solid var(--c24272d); border-radius: 8px; padding: 8px 10px; cursor: pointer; color: var(--cd8dbe1); font-size: 12.5px; }
.bok-chip:hover { background: var(--c22262d); border-color: var(--c333842); }
.bok-chip em { color: var(--c7c828c); font-style: normal; font-size: 11px; white-space: nowrap; }

.bok-rows { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.bok-rowhead, .bok-erow { display: grid; grid-template-columns: 1fr 70px 110px 84px 120px 32px; gap: 8px; align-items: center; }
.bok-rowhead { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--c6a7078); padding: 0 4px; }
.bok-erow { background: var(--c16181c); border: 1px solid var(--c24272d); border-radius: 8px; padding: 6px 4px 6px 10px; }
.bok-erow__name { color: var(--ce7e9ee); font-size: 13px; }
.bok-erow__pris, .bok-erow__moms, .bok-erow__tot { font-size: 13px; color: var(--ccccfd5); font-variant-numeric: tabular-nums; }
.bok-erow__tot { font-weight: 600; }
.bok-erow .bok-in { width: 100%; box-sizing: border-box; }

.bok-totbox { background: var(--c131518); border: 1px solid var(--c23262c); border-radius: 12px; padding: 12px 16px; margin: 6px 0 16px; }
.bok-totbox > div { display: flex; justify-content: space-between; font-size: 13px; color: var(--ca2a8b1); padding: 3px 0; font-variant-numeric: tabular-nums; }
.bok-totbox__sum { border-top: 1px solid var(--c2a2e35); margin-top: 6px; padding-top: 8px !important; color: var(--ceef0f4) !important; font-weight: 700; font-size: 15px !important; }
.bok-nf__main .bok-lbl .bok-in, .bok-nf__main textarea.bok-in { width: 100%; box-sizing: border-box; }
.bok-periodrow { margin-bottom: 12px; }
.bok-periodsel { display: flex; gap: 8px; }
.bok-nf__actions { display: flex; gap: 10px; justify-content: flex-end; }
.bok-editbar { background: var(--c22262d); border: 1px solid var(--c333842); border-radius: 8px; padding: 8px 12px; margin-bottom: 14px; color: var(--ccccfd5); font-size: 13px; display: flex; justify-content: space-between; align-items: center; }

/* faktura-listor */
.bok-listhead { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.bok-fakturor { display: flex; flex-direction: column; gap: 10px; }
.bok-fak { background: var(--c16181c); border: 1px solid var(--c24272d); border-radius: 12px; padding: 12px 16px; }
.bok-fak__row { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.bok-fak__t { color: var(--ceef0f4); font-weight: 600; font-size: 14px; margin-bottom: 3px; }
.bok-fak__meta { color: var(--c9aa0ab); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.bok-fak__act { display: flex; gap: 8px; align-items: center; }
.bok-fak__note { width: 100%; box-sizing: border-box; margin-top: 10px; min-height: 34px; resize: vertical;
  background: var(--c121417); border: 1px solid var(--c2a2e35); border-radius: 8px; padding: 7px 10px; color: var(--cc9cdd4); font: inherit; font-size: 12.5px; }
.bok-fak__note:focus { outline: none; border-color: var(--c6f7f97); }
.bok-fak__note.bok-saved { border-color: var(--c2f6b4c); box-shadow: 0 0 0 2px rgba(70,209,138,0.15); }

/* badge på utkast-fliken */
.bok-badge { display: inline-block; margin-left: 7px; background: var(--c1e7d4f); color: var(--ceafff3);
  font-size: 11px; font-weight: 700; min-width: 18px; text-align: center; padding: 1px 6px; border-radius: 10px; }

/* modal */
.bok-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; }
.bok-modal__bg { position: absolute; inset: 0; background: rgba(4, 8, 16, 0.72); }
.bok-modal__box { position: relative; background: var(--c15171b); border: 1px solid var(--c2a2e35); border-radius: 16px;
  padding: 22px; width: min(640px, 92vw); max-height: 90vh; overflow-y: auto; box-shadow: 0 24px 70px rgba(var(--bch),.5); }
.bok-modal__foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.bok-sendgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .bok-sendgrid { grid-template-columns: 1fr; } }
.bok-sendgrid .bok-in, .bok-freq .bok-in { width: 100%; box-sizing: border-box; }
.bok-freq { display: grid; grid-template-columns: 1fr 160px; gap: 12px; align-items: end; }
.bok-note { color: var(--c9aa0ab); font-size: 12.5px; background: var(--c131518); border: 1px solid var(--c23262c); border-radius: 8px; padding: 8px 12px; }
.bok-pdfhead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; color: var(--ceef0f4); }
.bok-pdf { width: 100%; height: 74vh; border: 1px solid var(--c2a2e35); border-radius: 8px; background: #fff; }

/* send-status: spinner + check */
.bok-sendstatus { display: flex; align-items: center; gap: 12px; margin-top: 14px; min-height: 30px; color: var(--ccccfd5); font-size: 14px; }
.bok-spinner { width: 22px; height: 22px; border: 3px solid var(--c2a2e35); border-top-color: var(--c6f7f97); border-radius: 50%; animation: bokspin .8s linear infinite; }
@keyframes bokspin { to { transform: rotate(360deg); } }
.bok-check { width: 26px; height: 26px; border-radius: 50%; background: var(--c1e7d4f); color: var(--ceafff3); display: flex; align-items: center; justify-content: center; font-weight: 700; animation: bokpop .3s ease; }
.bok-x { width: 26px; height: 26px; border-radius: 50%; background: var(--c7d2626); color: var(--cffe6e6); display: flex; align-items: center; justify-content: center; font-weight: 700; }
@keyframes bokpop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* toast */
.bok-toast { position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 20px); opacity: 0;
  background: var(--c22262d); border: 1px solid var(--c333842); color: var(--ceef0f4); padding: 11px 18px; border-radius: 10px;
  font-size: 13px; z-index: 1100; transition: all .25s ease; box-shadow: 0 10px 30px rgba(var(--bch),.4); }
.bok-toast.show { opacity: 1; transform: translate(-50%, 0); }
.bok-toast--err { background: var(--c3a1a1a); border-color: var(--c6b2f2f); color: var(--cffdede); }

/* ===================== Molnet användarstyrning ===================== */
/* Dölj Alberts data i personliga flikar för Ellinor tills de kopplas till hennes konton */
body[data-user="ellinor"] section[data-page="dashboard"] > :not(.ellinor-ph),
body[data-user="ellinor"] section[data-page="agenda"] > :not(.ellinor-ph),
body[data-user="ellinor"] section[data-page="work"] > :not(.ellinor-ph),
body[data-user="ellinor"] section[data-page="projects"] > :not(.ellinor-ph),
body[data-user="ellinor"] section[data-page="rave"] > :not(.ellinor-ph) { display: none !important; }

.ellinor-ph { display: flex; align-items: center; justify-content: center; min-height: 46vh; padding: 30px 16px; }
.ellinor-ph__box { text-align: center; color: var(--c9aa0ab); max-width: 440px; }
.ellinor-ph__icon { font-size: 34px; color: var(--c6f7f97); margin-bottom: 14px; }
.ellinor-ph__box p { font-size: 15px; line-height: 1.6; margin: 0; }

/* ===================== Molnet nav-ikoner (färgglada neoninslag) ===================== */
/* Varje symbol behålls men får en egen färg + subtil neon-glöd. Fungerar för både
   text-glyfer och SVG-ikoner (stroke="currentColor" ärver färgen). */
.nav-item .nav-item__icon { transition: color 160ms ease, filter 160ms ease; }

.nav-item[data-route="dashboard"]      .nav-item__icon { color: var(--c5b8fd1); filter: drop-shadow(0 0 3px var(--c5b8fd1)66); }
.nav-item[data-route="agenda"]         .nav-item__icon { color: var(--ca579c9); filter: drop-shadow(0 0 3px var(--ca579c9)66); }
.nav-item[data-route="work"]           .nav-item__icon { color: var(--ce7b24c); filter: drop-shadow(0 0 3px var(--ce7b24c)66); }
.nav-item[data-route="completed-work"] .nav-item__icon { color: var(--c5fb98e); filter: drop-shadow(0 0 3px var(--c5fb98e)66); }
.nav-item[data-route="projects"]       .nav-item__icon { color: var(--c6bc2c9); filter: drop-shadow(0 0 3px var(--c6bc2c9)66); }
.nav-item[data-route="bokforing"]      .nav-item__icon { color: var(--ce0885a); filter: drop-shadow(0 0 3px var(--ce0885a)66); }
.nav-item[data-route="trading"]        .nav-item__icon { color: var(--c7cc86a); filter: drop-shadow(0 0 3px var(--c7cc86a)66); }
.nav-item[data-route="rave"]           .nav-item__icon { color: var(--ce38fb4); filter: drop-shadow(0 0 3px var(--ce38fb4)66); }
.nav-item[data-route="bevakning"]      .nav-item__icon { color: var(--c6f9fd8); filter: drop-shadow(0 0 3px var(--c6f9fd8)66); }
.nav-item[data-route="knowledge"]      .nav-item__icon { color: var(--cb48ad6); filter: drop-shadow(0 0 3px var(--cb48ad6)66); }
.nav-item[data-route="infrastructure"] .nav-item__icon { color: var(--c4fc2b0); filter: drop-shadow(0 0 3px var(--c4fc2b0)66); }
.nav-item[data-route="briefing"]       .nav-item__icon { color: var(--ce7c34c); filter: drop-shadow(0 0 3px var(--ce7c34c)66); }
.nav-item[data-route="applications"]   .nav-item__icon { color: var(--c8b9fe8); filter: drop-shadow(0 0 3px var(--c8b9fe8)66); }
.nav-item[data-route="flows"]          .nav-item__icon { color: var(--ce0985a); filter: drop-shadow(0 0 3px var(--ce0985a)66); }
.nav-item[data-route="settings"]       .nav-item__icon { color: var(--c9aa0ab); }

/* något klarare glöd när man hovrar / är på fliken */
.nav-item:hover .nav-item__icon,
.nav-item.active .nav-item__icon { filter: drop-shadow(0 0 5px currentColor); }

/* ===================== Översikt (trading-strategier) ===================== */
.ov-wrap { max-width: 1180px; margin: 0; }
.ov-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.ov-tabs { display: flex; align-items: center; gap: 6px; }
.ov-tabs__lbl { color: var(--text-muted, var(--c8a8f99)); font-size: 13px; margin-right: 4px; }
.ov-tab { background: transparent; border: 1px solid var(--border-strong, var(--c2a2e35)); border-radius: 8px; padding: 7px 14px;
  color: var(--text-secondary, var(--c9aa0ab)); cursor: pointer; font-size: 13px; font-weight: 600; }
.ov-tab:hover { color: var(--text, var(--ce7e9ee)); }
.ov-tab.is-active { background: var(--surface-hover, var(--c22262d)); color: var(--text, var(--ceef0f4)); border-color: var(--c3a4150); }
.ov-refresh { background: transparent; border: 1px solid var(--border-strong, var(--c2a2e35)); border-radius: 8px; width: 34px; height: 34px;
  color: var(--text-secondary, var(--c9aa0ab)); cursor: pointer; font-size: 16px; }
.ov-refresh:hover { color: var(--text, var(--ce7e9ee)); background: var(--surface, var(--c16181c)); }
.ov-empty { color: var(--text-muted, var(--c6f7a84)); padding: 20px 0; }
.ov-h { font-size: 15px; color: var(--text, var(--ceef0f4)); margin: 0 0 12px; }

/* topplista */
.ov-lead { background: var(--surface, var(--c16181c)); border: 1px solid var(--border, rgba(var(--wch),.08)); border-radius: 14px; padding: 16px 18px; margin-bottom: 20px; }
.ov-ranktable { display: flex; flex-direction: column; gap: 2px; }
.ov-rankrow { display: grid; grid-template-columns: 34px 1fr 96px 110px 90px; gap: 10px; align-items: center;
  padding: 9px 10px; border-radius: 9px; font-size: 13.5px; color: var(--text, var(--ce7e9ee)); font-variant-numeric: tabular-nums; }
.ov-rankrow--head { color: var(--text-muted, var(--c8a8f99)); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; padding: 2px 10px; }
.ov-rankrow--win { background: rgba(120,180,120,0.10); border: 1px solid rgba(120,180,120,0.25); }
.ov-rank { color: var(--text-muted, var(--c8a8f99)); font-weight: 700; }
.ov-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* kort */
.ov-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.ov-card { background: var(--surface, var(--c16181c)); border: 1px solid var(--border, rgba(var(--wch),.08)); border-radius: 14px; padding: 15px 16px; }
.ov-card__h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; color: var(--text, var(--ceef0f4)); font-size: 14px; }
.ov-chip { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted, var(--c8a8f99));
  border: 1px solid var(--border-strong, var(--c2a2e35)); border-radius: 20px; padding: 2px 9px; }
.ov-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-bottom: 14px; }
.ov-metric { display: flex; flex-direction: column; gap: 2px; }
.ov-metric__l { font-size: 11px; color: var(--text-muted, var(--c8a8f99)); }
.ov-metric__v { font-size: 15px; font-weight: 700; color: var(--text, var(--ce7e9ee)); font-variant-numeric: tabular-nums; }

.ov-buys { border-top: 1px solid var(--border, rgba(var(--wch),.07)); padding-top: 10px; }
.ov-buys__h { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted, var(--c8a8f99)); margin-bottom: 8px; }
.ov-buy { display: grid; grid-template-columns: 54px 60px 1fr auto; gap: 8px; align-items: center; font-size: 12.5px; padding: 3px 0; color: var(--text-secondary, var(--cb0b5bd)); font-variant-numeric: tabular-nums; }
.ov-buy b { color: var(--text, var(--ce7e9ee)); }
.ov-badge { font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; text-align: center; }
.ov-badge--lo { background: rgba(95,185,142,0.16); color: var(--c7fd6a8); }
.ov-badge--sh { background: rgba(224,120,110,0.16); color: var(--ce79b8f); }

.ov-pos { color: var(--c5fb98e); } .ov-neg { color: var(--ce0796e); } .ov-muted { color: var(--text-muted, var(--c8a8f99)); }
#tradingOvPanel { margin-top: 6px; }
#tradingOvPanel .ov-tabs { flex-wrap: wrap; }
@media (max-width: 620px) { .ov-rankrow { grid-template-columns: 28px 1fr 80px; } .ov-rankrow span:nth-child(4), .ov-rankrow span:nth-child(5) { display: none; } }
/* ===== Bokföring: ny-faktura-knapp + intern utkast-titel ===== */
.bok-newbar { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; flex-wrap: wrap; }
.bok-newbar__hint { font-size: 12px; color: var(--muted, var(--c9aa0a6)); }
.bok-btn--new { background: var(--c23b365); border: 1px solid var(--c23b365); color: var(--c06210f); font-weight: 700; box-shadow: 0 0 0 rgba(35,179,101,0); transition: box-shadow .15s ease, background .15s ease; }
.bok-btn--new:hover { background: var(--c2fd07f); border-color: var(--c2fd07f); box-shadow: 0 0 14px rgba(47,208,127,.35); }
.bok-fak__titel { display: inline-block; background: rgba(75,179,232,.16); color: var(--c7fc8f0); border-radius: 6px; padding: 1px 8px; margin-right: 6px; font-weight: 600; font-size: .92em; }
/* ===== Bokföring: företagsväljare (Wexla / Nodverk AB) ===== */
.bok-foretag { display: flex; gap: 8px; margin: 0 0 16px; flex-wrap: wrap; border-bottom: 1px solid rgba(var(--wch),.06); padding-bottom: 12px; }
.bok-foretag__tab { background: transparent; border: 1px solid rgba(var(--wch),.12); color: var(--muted, var(--c9aa0a6)); border-radius: 8px; padding: 7px 15px; font-weight: 600; cursor: pointer; transition: color .15s ease, border-color .15s ease, background .15s ease; }
.bok-foretag__tab:hover { color: var(--ce8eaed); border-color: rgba(var(--wch),.25); }
.bok-foretag__tab.is-active { background: rgba(75,179,232,.14); border-color: var(--c4bb3e8); color: var(--ccfe6fb); box-shadow: 0 0 12px rgba(75,179,232,.18); }
/* ===== Bokföring: utkast – titel-input + auto-växande anteckning ===== */
.bok-fak__titel-in { width:100%; box-sizing:border-box; background:rgba(var(--wch),.04); border:1px solid rgba(var(--wch),.12); color:var(--ce8eaed); border-radius:8px; padding:7px 11px; margin:0 0 8px; font-weight:600; }
.bok-fak__titel-in::placeholder { color:var(--c7a8088); font-weight:500; }
.bok-fak__note { min-height:76px; resize:vertical; overflow:hidden; box-sizing:border-box; }
/* ===== Infrastruktur: server-flikar (Anna / Beata) ===== */
.infra-tabs { display:flex; gap:8px; margin:2px 0 18px; flex-wrap:wrap; }
.infra-tab { background:transparent; border:1px solid rgba(var(--wch),.12); color:var(--muted,var(--c9aa0a6)); border-radius:8px; padding:7px 16px; font-weight:600; cursor:pointer; transition:color .15s ease, border-color .15s ease, background .15s ease; }
.infra-tab:hover { color:var(--ce8eaed); border-color:rgba(var(--wch),.25); }
.infra-tab.is-active { background:rgba(75,179,232,.14); border-color:var(--c4bb3e8); color:var(--ccfe6fb); box-shadow:0 0 12px rgba(75,179,232,.18); }


/* ===================== PROTOTYP-ANPASSNING ===================== */
html, body { font-family: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; background: var(--body-bg); }
html { background: var(--body-bg); }
.topbar { background: var(--topbar-bg); border-bottom: 1px solid var(--border); }
.brand__icon { color: var(--accent); }

/* KORT: elevera mot ytan (inte samma som bakgrunden) — ger kontrast */
.metric-card, .panel, .project-card, .settings-row, .empty-state, .card,
.containers-table, .history-panel, .server-info-body {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  box-shadow: var(--shadow) !important;
  backdrop-filter: none !important;
}

/* SIDOMENY: fast/statisk (stannar kvar vid scroll) */
@media (min-width: 640px) {
  .app-shell { display: flex; align-items: stretch; }
  .sidebar {
    position: sticky !important;
    top: 0;
    height: 100vh;
    align-self: flex-start;
    flex-shrink: 0;
    transform: none !important;
    background: var(--sidebar-bg) !important;
    border-right: 1px solid var(--border);
  }
  .main { flex: 1 1 auto; min-width: 0; margin-left: 0 !important; }
}

/* NAV aktivt läge — accent-tonat, inte tungt */
.nav-item.active { background: var(--accent-soft) !important; color: var(--accent-strong) !important; }
.nav-item.active .nav-item__icon { color: var(--accent-strong) !important; }

/* AKTIV FLIK/SEGMENT — alltid läsbar i båda teman (fixar osynlig text) */
.work-cat-btn.active, .cw-cat-btn.active, .cw-view-btn.active,
.rave-tab-btn.active, .agenda-tab-btn.active,
.bev-person.is-active, .bev-freq.is-active, .bev-lanefilter.is-active,
.bev-toggle-arch.is-active, .proj-subtab.is-active, .bok-foretag__tab.is-active {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.bok-menu__item.is-active, .bok-subtab.is-active { color: var(--text) !important; background: var(--surface-hover) !important; }
.bok-subtab.is-active { background: transparent !important; border-bottom-color: var(--accent) !important; }