/* ============================================================
   1. DESIGN TOKENS (Variabler för färger, radier, m.m.)
   ============================================================ */
:root {
  /* Färger */
  --c-bg-page: #f5f5f5;
  --c-bg-card: #ffffff;
  --c-bg-box: #fafafa;
  --c-bg-box-hover: #f2f2f2;
  --c-border: #e5e5e5;
  --c-border-dark: #dcdcdc;
  --c-text-main: #111111;
  --c-text-muted: rgba(17, 17, 17, 0.7);
  
  /* Statusfärger */
  --c-pos: #0a7a2f;
  --c-neg: #b31919;
  --c-neutral: #444444;

  /* Radier & Avstånd */
  --r-card: 16px;
  --r-box: 14px;
  --r-input: 8px;
  --r-pill: 999px;
  --shadow-card: 0 4px 18px rgba(0,0,0,0.08);
}

/* ============================================================
   2. BAS & TYPOGRAFI
   ============================================================ */
body {
  font-family: "Inter", sans-serif;
  margin: 0;
  padding: 60px 0 0 0; /* Plats för fixed header */
  background: var(--c-bg-page);
  color: var(--c-text-main);
}

/* Gemensamma textklasser */
.state-message, .analysis-state, .dashboard-state, .amb-empty, .orders-empty {
  margin-top: 10px;
  font-size: 13px;
  opacity: 0.7;
}
.meta { font-size: 13px; opacity: 0.7; text-align: right; white-space: nowrap; }
.muted, .small-muted { opacity: 0.75; }
.small-muted { font-size: 12px; }

/* Status-badges (Positiv/Negativ Diff) */
.badge-positive { color: var(--c-pos); font-weight: 600; }
.badge-negative { color: var(--c-neg); font-weight: 600; }
.badge-neutral  { color: var(--c-neutral); font-weight: 600; }

/* Diff-subtext under värden i tabeller */
.cell-sub, .stat-sub, .summary-sub {
  display: block;
  font-size: 11px;
  opacity: 0.75;
  margin-top: 4px;
  line-height: 1.2;
}

/* ============================================================
   3. HEADER, NAV & FOOTER (Exakt din gamla kod)
   ============================================================ */
.mkrs-header { background: #ffffff; border-bottom: 1px solid var(--c-border); position: fixed; top: 0; left: 0; right: 0; z-index: 1000; }
.mkrs-header-inner { max-width: 1100px; margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mkrs-header-left, .mkrs-header-center, .mkrs-header-right { display: flex; align-items: center; }
.mkrs-header-left { flex: 0 0 auto; }
.mkrs-header-center { flex: 1 1 auto; justify-content: center; text-align: center; }
.mkrs-header-right { flex: 0 0 auto; justify-content: flex-end; position: relative; }
.mkrs-header-logo { height: 34px; object-fit: contain; }
.mkrs-header-current { font-size: 16px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; }

.mkrs-header-menu-btn { padding: 14px 6px; border-radius: var(--r-pill); border: 2px solid #000; background: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all 0.15s ease; }
.mkrs-header-menu-btn:hover { background: #000; }
.mkrs-header-menu-btn:hover .mkrs-menu-icon, .mkrs-header-menu-btn:hover .mkrs-menu-icon::before, .mkrs-header-menu-btn:hover .mkrs-menu-icon::after { background: #fff; }
.mkrs-menu-icon, .mkrs-menu-icon::before, .mkrs-menu-icon::after { width: 18px; height: 2px; background: #000; border-radius: var(--r-pill); transition: all 0.15s ease; }
.mkrs-menu-icon { position: relative; }
.mkrs-menu-icon::before, .mkrs-menu-icon::after { content: ""; position: absolute; left: 0; }
.mkrs-menu-icon::before { top: -5px; } .mkrs-menu-icon::after { bottom: -5px; }
.mkrs-header-menu-btn.is-open .mkrs-menu-icon { background: transparent; }
.mkrs-header-menu-btn.is-open .mkrs-menu-icon::before { top: 0; transform: rotate(45deg); }
.mkrs-header-menu-btn.is-open .mkrs-menu-icon::after { bottom: 0; transform: rotate(-45deg); }

.mkrs-nav-panel { position: absolute; top: calc(100% + 8px); right: 0; width: 260px; background: rgba(255,255,255,0.5); backdrop-filter: blur(6px); padding: 10px 14px; border-radius: var(--r-box); border: 1px solid var(--c-border); max-height: 0; overflow: hidden; opacity: 0; pointer-events: none; transform: translateY(-6px); transition: all 0.18s ease; }
.mkrs-nav-panel.open { max-height: 520px; opacity: 1; pointer-events: auto; transform: translateY(0); }
.mkrs-nav-item { display: block; margin-top: 8px; padding: 8px 14px; border-radius: var(--r-pill); border: 2px solid #000; font-size: 13px; font-weight: 600; color: #000; background: #fff; text-decoration: none; text-transform: uppercase; transition: all 0.15s ease; }
.mkrs-nav-item:hover, .mkrs-nav-item.active { background: #000; color: #fff; }

.mkrs-footer { max-width: 1100px; margin: 40px auto; text-align: center; font-size: 13px; opacity: 0.7; padding: 20px; }
.mkrs-footer hr { border: none; border-top: 1px solid var(--c-border); margin-bottom: 12px; }

/* ============================================================
   4. LAYOUT & HUVUDKORT (Cards)
   ============================================================ */
.page-container {
  max-width: 1100px;
  margin: 20px auto 40px;
  padding: 0 20px;
}

.card {
  background: var(--c-bg-card);
  border-radius: var(--r-card);
  border: 1px solid var(--c-border);
  box-shadow: var(--shadow-card);
  padding: 24px;
}

.header-block, .top-bar, .section-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  align-items: flex-end;
}

/* Generiska sektionsrubriker */
.section-title { font-size: 15px; font-weight: 600; text-transform: uppercase; opacity: 0.7; margin-top: 24px; }

/* ============================================================
   5. GRIDS OCH INRE BOXAR
   ============================================================ */
/* Samlingsklass för alla liknande grids (Analys, Historik, Försäljning) */
.dash-grid, .analysis-grid, .events-grid, .grid, .summary-grid {
  display: grid;
  gap: 16px;
  margin-top: 10px;
  grid-template-columns: minmax(0, 1fr);
}

/* Innerboxar i grids */
.dash-box, .analysis-box, .stat-box, .sum-card, .event-card, .detail-box, .account-card {
  border-radius: var(--r-box);
  border: 1px solid var(--c-border);
  background: var(--c-bg-box);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
}

/* Rubriker i innerboxar */
.dash-subtitle, .analysis-subtitle, .stat-label, .sum-card-title, .detail-title, .summary-title, .account-card-title, .event-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  opacity: 0.7;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

/* Stora värden i boxar */
.stat-value, .summary-value { font-size: 22px; font-weight: 800; letter-spacing: 0.01em; line-height: 1.1; }

@media (min-width: 900px) {
  .dash-grid, .analysis-grid, .summary-grid, .detail-grid, .account-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .events-grid { grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); }
  .grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .span-2 { grid-column: span 2; }
}

/* ============================================================
   6. FORMLÄNkar, FILTER & KNAPPAR
   ============================================================ */
.filters, .geo-tabs, .mode-switch {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.select-wrap, .range-select, .search-box { min-width: 220px; flex: 1; position: relative; }
.select-wrap label, .range-select label, .custom-range-row label {
  font-size: 12px; text-transform: uppercase; font-weight: 600; opacity: 0.6; display: block; margin-bottom: 4px;
}
.select-wrap select, .range-select select, .search-box input, .custom-range-row input[type="date"] {
  width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: var(--r-input); border: 1px solid var(--c-border);
  font-size: 14px; font-family: inherit; background: #fff;
}

/* Analys: Från/Till visas bara för "Anpassat intervall" (analys sätter display: flex) */
.custom-range-row { display: none; gap: 12px; flex-wrap: wrap; margin: -6px 0 18px; }
.custom-range-row > div { flex: 1 1 160px; max-width: 220px; }

.mode-switch label, .geo-tabs label { display: flex; align-items: center; cursor: pointer; font-size: 12px; font-weight: 700; }
.mode-switch input[type="radio"], .geo-tabs input[type="radio"] { margin-right: 6px; transform: scale(1.1); accent-color: #000; }

/* Knappar */
.btn, .link-btn, .refresh-btn, .timeseries-toggle-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 12px; border-radius: var(--r-pill); border: 1px solid #000;
  background: #fff; color: #111; font-size: 10px; font-weight: 700; cursor: pointer; text-decoration: none; white-space: nowrap; transition: all 0.15s ease;
}
.btn:hover, .link-btn:hover, .timeseries-toggle-btn:hover { background: #000; color: #fff; }
.refresh-btn { border-color: var(--c-border); }
.refresh-btn:hover { background: var(--c-bg-box); }

.toggle-btn { background: #e8e8e8; border: 1px solid var(--c-border-dark); padding: 5px 12px; border-radius: 6px; font-size: 10px; cursor: pointer; font-weight: 700; text-transform: uppercase; color: #333; transition: all 0.2s; }
.toggle-btn:hover { background: #dcdcdc; }

/* Badges / Pills */
.code-pill, .badge {
  display: inline-flex; align-items: center; padding: 4px 10px; border-radius: var(--r-pill); border: 1px solid var(--c-border); background: #fff; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap;
}

/* ============================================================
   7. TABELLER (All gemensam logik)
   ============================================================ */
.table-wrapper { margin-top: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Grupperar alla tabeller */
.cmp, .geo-table, .amb-table, .orders-table, table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  background: #fff;
}

/* Vissa tabeller har box-look */
.cmp, .geo-table {
  border: 1px solid var(--c-border);
  border-radius: 12px;
  overflow: hidden;
}

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

th, td { padding: 8px 10px; text-align: left; vertical-align: middle; }
th { font-size: 11px; text-transform: uppercase; opacity: 0.7; white-space: nowrap; }

/* Zebra-ränder */
tbody tr:nth-child(even) { background: var(--c-bg-box); }

/* Högerjustering för siffror */
.num, td.num, th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; }
.rank { width: 34px; text-align: right; opacity: 0.8; font-variant-numeric: tabular-nums; font-weight: 800; }

/* Särskilda tabell-rader */
.group-row { background: #e9e9e9; font-weight: 700; }
.group-row td { border-top: 2px solid #d0d0d0; border-bottom: 1px solid #d0d0d0; }
.total-row td { background: #fff; border-top: 2px solid var(--c-border); font-weight: 700; }
tr.amb-row, tr.order-row { cursor: pointer; }
tr.amb-row:hover, tr.order-row:hover { background: var(--c-bg-box-hover) !important; }

/* ============================================================
   8. SPECIFIKA MIKRO-KOMPONENTER (Bevarade från dina filer)
   ============================================================ */

/* Dashboard: Collapsible */
.collapsible-section { margin-top: 4px; border-top: 1px solid #eaeaea; padding-top: 12px; }
.collapsible-header { display: flex; justify-content: space-between; align-items: center; }
.section-content { display: none; margin-top: 12px; }
.section-content.is-visible { display: block; }
.orders-chev-col { width: 18px; }
.orders-chev { display: inline-block; font-size: 16px; opacity: 0.55; transition: transform 0.2s ease; }
tr[aria-expanded="true"] .orders-chev { transform: rotate(90deg); opacity: 0.85; }

/* Dashboard & Ambassadör Details */
.order-detail-card { background: #fff; border: 1px solid var(--c-border-dark); border-radius: 8px; padding: 10px 12px; display: flex; justify-content: space-between; gap: 12px; font-size: 12px; }
tr.detail-row td { background: #fff; border-top: 1px solid var(--c-border); padding: 12px 10px; }
.detail-wrap { display: grid; grid-template-columns: 1fr; gap: 12px; }

/* Analys: diagrammet ritas med maintainAspectRatio: false och behöver en höjd att fylla */
.timeseries-chart-container { position: relative; height: 260px; margin-bottom: 10px; }

/* Ambassadörer: sammanställningen och geografin bredvid varandra */
.summary-row { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); margin-bottom: 18px; }
@media (min-width: 900px) { .summary-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Analys: Age Chart */
.age-chart { margin-top: 10px; border-radius: 12px; border: 1px solid var(--c-border); padding: 10px 12px; background: #fff; }
.age-header-row, .age-row { display: grid; grid-template-columns: 70px 1fr 60px 60px 60px; gap: 8px; font-size: 12px; }
.age-header-row { font-size: 11px; font-weight: 600; opacity: 0.6; margin-bottom: 6px; }
.age-header-row div:nth-child(n+3) { text-align: right; }
.age-label { font-weight: 600; opacity: 0.8; }
.age-bar-outer { height: 12px; border-radius: var(--r-pill); background: #e8e8e8; overflow: hidden; }
.age-bar-inner { height: 100%; border-radius: inherit; background: #111; }
.age-count { text-align: right; font-variant-numeric: tabular-nums; opacity: 0.8; }

/* ============================================================
   9. GLOBAL RESPONSIVITET
   ============================================================ */
@media (max-width: 700px) {
  body { padding-top: 74px; }
  .mkrs-header-inner { padding: 10px 14px; }
  .mkrs-header-logo { height: 30px; }
  .mkrs-header-current { font-size: 15px; }
  
  .page-container { padding: 0 12px; }
  .card { padding: 16px; }
  
  .section-header { flex-direction: column; align-items: flex-start; }
  .select-wrap, .search-box { min-width: 100%; }

  .table-wrapper table, .cmp, .geo-table, .amb-table, .orders-table { font-size: 12px; }
  th, td { padding: 6px 4px; }
  
  /* Mobila specialare för specifika grid */
  /* Åldersstapeln får en egen rad under siffrorna, annars blir den bara en prick */
  .age-row, .age-header-row { grid-template-columns: 1fr 44px 56px 56px; grid-template-areas: "label count ret new"; }
  .age-row { grid-template-areas: "label count ret new" "bar bar bar bar"; row-gap: 3px; margin-bottom: 6px; }
  .age-row > :nth-child(1) { grid-area: label; }
  .age-row > :nth-child(2) { grid-area: bar; height: 8px; }
  .age-row > :nth-child(3) { grid-area: count; }
  .age-row > :nth-child(4) { grid-area: ret; }
  .age-row > :nth-child(5) { grid-area: new; }
  .age-header-row > :nth-child(2) { display: none; }
  .custom-range-row > div { max-width: none; }
  .timeseries-chart-container { height: 220px; }
  .geo-tabs { flex-wrap: nowrap; gap: 12px; font-size: 12px; }
  
  /* Historik/Geo tight tabeller på mobil */
  .cmp { table-layout: fixed; font-size: 11px; }
  .cmp td.num, .cmp th.num { white-space: normal; }
  .cmp td:first-child, .cmp th:first-child { width: 52px; white-space: nowrap; }
  #geoBody td:nth-child(1) { white-space: normal; word-break: break-word; }
}

@media (min-width: 1101px) {
  .mkrs-header-inner { padding-left: 0; padding-right: 0; }
}

/* ============================================================
   10. DASHBOARD-SPECIFIKA KLASSER
   ============================================================ */
.event-header {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--c-border);
}
.event-name { font-size: 18px; font-weight: 700; }
.event-key { font-size: 12px; opacity: 0.6; text-transform: uppercase; letter-spacing: 0.04em; }
.event-metrics { font-size: 13px; line-height: 1.5; }
.metric-value { font-weight: 700; }
.orders-summary {
  margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--c-border-dark);
  font-size: 12px; display: flex; justify-content: space-between; gap: 12px;
}
.orders-hide-mobile { display: table-cell; }

@media (max-width: 600px) {
  .event-name { font-size: 16px; }
  .orders-hide-mobile { display: none; }
}
/* ============================================================
   11. INLOGGNING (auth.js)
   ============================================================ */
/* Sidan visas först när en admin är inloggad */
html.mkrs-locked body > :not(.mkrs-auth-view) { display: none !important; }
html.mkrs-locked body { padding-top: 0; }

.login-page { min-height: 80vh; display: flex; align-items: center; justify-content: center; }
.login-card { width: 100%; max-width: 380px; padding: 30px; text-align: center; margin: 0 auto; box-sizing: border-box; }
.login-logo { height: 40px; object-fit: contain; margin-bottom: 18px; }
.login-title { font-weight: 600; font-size: 18px; color: var(--c-text-main); margin-bottom: 24px; text-transform: uppercase; }
.login-text { font-size: 14px; line-height: 1.5; margin: 0 0 20px; word-break: break-word; }
.login-button {
  width: 100%; padding: 14px; background: #111; color: #fff; border: none; border-radius: var(--r-input);
  font-size: 14px; font-weight: 600; cursor: pointer; text-transform: uppercase; transition: background 0.2s; font-family: inherit;
}
.login-button:hover { background: #333; }
.login-button:disabled { opacity: 0.6; cursor: default; }
.login-error { color: var(--c-neg); background: #ffebee; padding: 10px; border-radius: 4px; margin-bottom: 20px; font-size: 13px; }

/* Inloggad användare längst ner i menyn */
.mkrs-nav-user { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--c-border); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mkrs-nav-email { font-size: 11px; opacity: 0.7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.mkrs-nav-logout { flex: 0 0 auto; padding: 6px 12px; border-radius: var(--r-pill); border: 1px solid #000; background: #fff; font-size: 11px; font-weight: 700; text-transform: uppercase; cursor: pointer; font-family: inherit; }
.mkrs-nav-logout:hover { background: #000; color: #fff; }