/* ═══════════════════════════════════════════
   MYLS Dashboard — Dashboard Layout & Components
   ═══════════════════════════════════════════ */

/* ── App shell ── */
.app-shell {
  display: flex;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

/* ── Sidebar ── */
.sidebar {
     width: var(--sidebar-w);
    /* background: var(--white); */
    /* border-right: 1px solid var(--brd); */
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    height: 100vh;
    position: relative;
    z-index: 10;
    padding-right: 2rem;
}

.sidebar-logo {
     text-align: center;
    padding: 16px 20px;
    /* border-bottom: 1px solid var(--brd); */
    flex-shrink: 0;
}
.sidebar-logo img.logo-light {
    height: 63px;
}
.sidebar-nav {
  flex: 1;
  padding: 10px 0;
  overflow-y: auto;
}

.nav-item {
      display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    font-weight: bold;
    cursor: pointer;
    color: var(--mid);
    border-left: 5px solid transparent;
    transition: background .15s, color .15s;
    text-decoration: none;
    font-size: 16px;
    border-radius: 0px 10px 10px 0;
    margin-bottom: 12px;
}

.nav-item:hover {
  background: #F3F4F6;
  color: var(--dark);
  text-decoration: none;
}

.nav-item.active {
  background: var(--acc2);
  color: var(--acc);
  border-left-color: var(--acc);
  font-weight: bold;
}
.nav-item.active svg{
  color: white;
}
.nav-item svg{
  color: white;
}
.nav-item svg {
  flex-shrink: 0;
}

.sidebar-footer {
  padding: 14px 16px;
  border-top: 1px solid var(--brd);
  flex-shrink: 0;
}

.sidebar-footer-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .6px;
  margin-bottom: 8px;
}

.theme-switcher {
  display: flex;
  align-items: center;
  gap: 8px;
}

.theme-name {
  font-size: 11px;
  color: var(--muted);
  margin-left: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Main area ── */
.main-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

/* ── Topbar ── */
.topbar {
  height: var(--topbar-h);
  /* background: var(--white);
  border-bottom: 1px solid var(--brd); */
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 20px;
  flex-shrink: 0;
  gap: 10px;
}

.topbar-user {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--mid);
  margin-right: auto;
}

.topbar-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--acc2);
  color: var(--acc);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
}

/* ── Content area ── */
.content-area {
      flex: 1;
    padding: 0px 0px;
    background: white;
    border-radius: 50px 0px 0 0;
    /* Bezugsrahmen fuer den Ladeplatzhalter, der ueber dem Dashboard liegt. */
    position: relative;
}
.dashboard-component-chart-holder{margin-top: 0!important;}
/* ── Stats row ── */
.stats-row {
      display: flex;
    gap: 25px;
    margin-bottom: 16px;
    align-items: stretch;
}

/* Hero (large left) cards */
.stat-card--hero {
  flex: 1.2;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Right column — stacked pair */
.stat-stack {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Compact stacked cards */
.stat-card--compact {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}


/* ── Filter panel ── */
.filter-panel-header {
 padding: 8px 15px;
    /* border-bottom: 1px solid var(--brd); */
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.filter-panel-header button {
  cursor: pointer;
    border: 2px solid black;
    width: 18px;
    height: 18px;
    border-radius: 5px;
    background: white;
    font-size: 14px;
    line-height: 15px;
}
.filter-panel-header h3 {
 font-size: 24px;
    font-weight: 400;
    color: #333333;
}

.filter-close {
  cursor: pointer;
  color: var(--muted);
  font-size: 22px;
  line-height: 1;
  background: none;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
}

.filter-body {
  padding: 16px 18px;
}
.filter-body label{    font-size: 19px;
    font-weight: 100;}

    .filter-body select{margin-top: 8px;}
.filter-actions {
     display: grid;
    margin-top: 22px;
    grid-template-columns: 138px 120px;
    gap: 8px;
    justify-content: end;
}

.filter-actions .btn {
         flex: 1;
    padding: 10px;
    font-size: 16px;
    border-radius: 40px;
    border: 2px solid var(--brand-primary);
    color: var(--brand-primary);
    font-weight: 400;
}

.date-range-display {
  border: 1px solid var(--brd);
  border-radius: 40px;
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--mid);
  margin-bottom: 16px;
  cursor: pointer;
}

.date-range-display:hover {
  border-color: var(--acc);
}

/* ── Page title ── */
.page-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--dark);
  margin-bottom: 16px;
}

/* ── Empty / placeholder ── */
.iframe-placeholder {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  color: var(--muted);
  background: var(--white);
  border: 2px dashed var(--brd);
  border-radius: var(--radius-lg);
  margin: 20px;
  min-height: 300px;
  text-align: center;
  padding: 40px;
}

.iframe-placeholder h2 {
  font-size: 18px;
  font-weight: 500;
  color: var(--dark);
}

.iframe-placeholder p {
  font-size: 13px;
  max-width: 420px;
  line-height: 1.6;
}

/* ── Table page header ── */
.table-search {
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-input {
  padding: 6px 10px;
  border: 1px solid var(--brd);
  border-radius: var(--radius-md);
  font-size: 13px;
  width: 160px;
  outline: none;
}

.search-input:focus {
  border-color: var(--acc);
}

.pagination {
  font-size: 12px;
  color: var(--muted);
  margin-top: 8px;
  text-align: right;
  padding: 0 12px 8px;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .stats-row {
    flex-wrap: wrap;
  }
  .stat-card {
    flex: 0 0 calc(50% - 6px);
  }
}

/* ── 8-stat grid — 4 cols × 2 rows ── */
.stats-grid-8 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}

.stat-card--grid {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 150px;
  padding: 18px 20px 20px;
  border-radius: 16px;
  background: var(--white);
  border: 1px solid var(--brd);
  /* box-shadow: 0 2px 8px rgba(0,0,0,.06); */
}

/* Header row: label + 3-dot menu */
.stat-card--grid-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.stat-grid-label {
     font-size: 14px;
    font-weight: 400;
    color: #525252;
    line-height: 1.3;
}

.stat-grid-menu {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  padding: 0 2px;
  flex-shrink: 0;
  margin-top: -2px;
}

.stat-grid-menu:hover {
  color: var(--dark);
}

/* Big number */
.stat-num--grid {
  font-size: 36px;
  font-weight: 400;
  color: var(--dark);
  margin: 16px 0 6px;
  letter-spacing: -1.5px;
  text-align: left;
  line-height: 1;
}

/* Subtitle below number */
.stat-grid-sub {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
  margin-top: 2px;
}

@media (max-width: 900px) {
  .stats-grid-8 {
    grid-template-columns: repeat(2, 1fr);
  }
}

#dashboard iframe {
  border: none;
  border-radius: 10px;
  width:100%;
  height:100%;
      padding-bottom: 55px;

}


#dashboard iframe .right-button-panel
 {
    display: none !important;
}

/* ── Leerer Tab-Bereich in der Seitenleiste (B7a) ── */
.sidebar-empty {
  padding: 12px 16px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}

/* ── Tabs aus GET api/dashboards (B7b-2): nicht verfuegbare Dashboards ── */
.nav-item.disabled {
  cursor: not-allowed;
  opacity: .55;
}
.nav-item.disabled:hover {
  background: transparent;
  color: var(--mid);
}
.nav-item-reason {
  display: block;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  opacity: .9;
}
.dashboard-loading {
  padding: 24px 32px;
  font-size: 14px;
  color: var(--mid);
}

/* Kundenwahl (nur superadmin/agency_admin) */
.sidebar-client {
  padding: 8px 16px 14px;
  border-bottom: 1px solid var(--brd);
  margin-bottom: 6px;
}
.sidebar-client-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--muted);
  margin-bottom: 6px;
}
.sidebar-client-row {
  display: flex;
  gap: 6px;
}
.sidebar-client-row input {
  width: 80px;
  min-width: 0;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid var(--brd);
  font-size: 13px;
}
.sidebar-client-row .btn {
  padding: 6px 10px;
  font-size: 12px;
}


/* ── Eingebettete Dashboards ──────────────────────────────────────────────
   Je geoeffnetem Tab eine Flaeche. Sie bleibt bestehen, wenn der Kunde den Tab
   wechselt (nur display:none), damit das Dashboard beim Zurueckwechseln sofort
   da ist statt neu aufgebaut zu werden. Angelegt werden sie in
   Dashboard.layout.jsx, nicht von React. */
.dashboard-pane {
  height: 100%;
  width: 100%;
}
.dashboard-pane iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* Ladeplatzhalter in der groben Form eines Dashboards. Liegt ueber der
   Dashboard-Flaeche, damit diese schon die volle Hoehe hat, waehrend Superset
   im Hintergrund startet. */
.dashboard-skeleton {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: white;
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  overflow: hidden;
}
.skeleton-row {
  display: flex;
  gap: 22px;
}
.skeleton-box {
  flex: 1;
  height: 120px;
  border-radius: 24px;
  border: 1.5px solid var(--brd);
  background: linear-gradient(90deg, #f4f5f7 25%, #eceef1 37%, #f4f5f7 63%);
  background-size: 400% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
.skeleton-box-tall { height: 260px; }
.skeleton-box-wide { height: 220px; }

@keyframes skeleton-shimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton-box { animation: none; }
}

/* Nur fuer Screenreader (Text "Dashboard wird geladen ..."). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── Kontenfilter (M5) ────────────────────────────────────────────────────
   Auswahl, welche Konten (Properties, Standorte, Werbekonten) das Dashboard
   zeigt. Liegt als Klappmenue unter dem Knopf im Kopfbereich. */
.account-filter {
  position: relative;
}
.account-filter .chip-open {
  box-shadow: 0 0 0 2px var(--acc2);
}
.account-filter-menu {
  position: absolute;
  top: calc(100% + 8px);
  /* Rechtsbuendig: der Knopf sitzt am rechten Rand des Kopfbereichs, links
     angeschlagen wuerde das Menue aus dem Fenster laufen. */
  right: 0;
  z-index: 30;
  min-width: 260px;
  max-width: 340px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 12px 14px 14px;
  background: #fff;
  border: 1px solid var(--brd);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(14, 30, 37, .14);
}
.account-filter-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .6px;
  margin-bottom: 10px;
}
.account-filter-reset {
  border: 0;
  background: none;
  padding: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--acc);
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
}
.account-filter-reset:disabled {
  color: var(--muted);
  cursor: default;
}
.account-filter-group + .account-filter-group {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--brd);
}
.account-filter-group-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--mid);
  margin-bottom: 6px;
}
.account-filter-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  font-size: 13px;
  color: var(--dark);
  cursor: pointer;
}
.account-filter-item input {
  flex-shrink: 0;
  accent-color: var(--acc);
  cursor: pointer;
}
.account-filter-item input:disabled {
  cursor: default;
}
.account-filter-item span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Zeitraumfilter (Klappmenü unter dem Knopf) ───────────────────────────────
   Ein Filter statt der früheren Trennung "Schnellwahl" und "eigenes Fenster in
   der Bildschirmmitte": oben die häufigen Zeiträume, darunter der Kalender. Die
   Gestaltung folgt dem Datumsfilter des Chatbots (runde Ecken, Verlauf auf den
   gewählten Tagen, zarte Tönung dazwischen) mit den Farben dieses Projekts. */
.range-filter {
  position: relative;
}
.range-filter .chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.range-filter .chip svg {
  flex-shrink: 0;
  opacity: .7;
}
.range-filter .chip-open {
  box-shadow: 0 0 0 2px var(--acc2);
}

.range-filter-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  width: 320px;
  padding: 14px 16px 16px;
  background: #fff;
  border: 1px solid var(--brd);
  border-radius: var(--radius-lg, 25px);
  box-shadow: 0 12px 32px rgba(14, 30, 37, .16);
}

.range-filter-head {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .6px;
  margin-bottom: 10px;
}
.range-filter-head-custom {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--brd);
}

/* Zwei Spalten: vier Zeiträume passen so ohne Scrollen in die Breite. */
.range-filter-presets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.range-filter-preset {
  padding: 9px 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--mid);
  background: var(--bg);
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.range-filter-preset:hover {
  border-color: var(--brd);
  color: var(--dark);
}
.range-filter-preset.active {
  background: var(--acc);
  border-color: transparent;
  color: #fff;
}

.range-filter-calendar {
  display: flex;
  justify-content: center;
}

.range-filter-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--brd);
}
.range-filter-hint {
  margin-right: auto;
  font-size: 11px;
  color: var(--muted);
}

/* .btn-primary ist global auf volle Breite gesetzt (fuer Anmeldeformulare). Hier sollen
   beide Knoepfe gleich gross und rechtsbuendig stehen - deshalb der Zuschnitt. */
.range-filter-footer .btn {
  width: auto;
  flex: 0 0 auto;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 999px;
  /* Der eine Knopf hat einen Rahmen, der andere nicht - ohne diese Zeile waeren
     sie unterschiedlich hoch. */
  border: 1px solid transparent;
}

/* ── Kalender: react-datepicker auf das Aussehen dieses Projekts bringen ── */
.range-filter .react-datepicker {
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 12px;
}
.range-filter .react-datepicker__header {
  background: transparent;
  border-bottom: 0;
  padding-top: 0;
}
.range-filter .react-datepicker__current-month {
  font-size: 13px;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 6px;
  text-transform: capitalize;
}
.range-filter .react-datepicker__day-name {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  width: 32px;
  line-height: 24px;
  margin: 1px;
}
.range-filter .react-datepicker__day {
  width: 32px;
  line-height: 30px;
  margin: 1px;
  border-radius: 999px;
  color: var(--mid);
  border: 1px solid transparent;
}
.range-filter .react-datepicker__day:hover {
  background: var(--acc2);
  border-radius: 999px;
}
.range-filter .react-datepicker__navigation {
  top: 4px;
}

/* Die eigenen Klassen aus dayClassName haben Vorrang vor den Standardfarben. */
.range-filter .react-datepicker__day.dp-day-selected,
.range-filter .react-datepicker__day.dp-day-selected:hover {
  background: var(--acc);
  color: #fff;
  font-weight: 700;
  border-color: transparent;
}
.range-filter .react-datepicker__day.dp-day-in-range {
  background: var(--acc2);
  color: var(--dark);
  border-radius: 0;
}
.range-filter .react-datepicker__day.dp-day-today {
  border-color: var(--brd);
  font-weight: 700;
}
.range-filter .react-datepicker__day.dp-day-disabled,
.range-filter .react-datepicker__day.dp-day-disabled:hover {
  color: var(--brd);
  background: transparent;
  cursor: not-allowed;
}

/* Tage des Nachbarmonats bleiben immer neutral - auch wenn sie in den gewaehlten
   Zeitraum fallen. Sonst erscheint derselbe Tag zweimal markiert (einmal in seinem
   Monat, einmal als Randtag des anderen), was wie ein Fehler aussieht.
   Anklickbar sind sie ebenfalls nicht: gewaehlt wird im Monat, zu dem der Tag gehoert. */
.range-filter .react-datepicker__day--outside-month,
.range-filter .react-datepicker__day--outside-month:hover,
.range-filter .react-datepicker__day--outside-month.dp-day-in-range,
.range-filter .react-datepicker__day--outside-month.dp-day-selected,
.range-filter .react-datepicker__day--outside-month.dp-day-today {
  background: transparent;
  color: var(--brd);
  border-color: transparent;
  font-weight: 400;
  pointer-events: none;
}

/* Die eingebauten Auswahlfarben ausschalten - gefärbt wird über dayClassName. */
.range-filter .react-datepicker__day--selected,
.range-filter .react-datepicker__day--in-range,
.range-filter .react-datepicker__day--in-selecting-range,
.range-filter .react-datepicker__day--keyboard-selected {
  background: transparent;
  color: inherit;
}

/* Zwei Monate nebeneinander brauchen mehr Platz. */
.range-filter-menu-wide {
  width: 580px;
}
.range-filter-menu-wide .range-filter-presets {
  grid-template-columns: repeat(4, 1fr);
}
.range-filter .react-datepicker__month-container + .react-datepicker__month-container {
  margin-left: 16px;
}

/* Der Zeitraum steht auf einer Zeile - umgebrochen sieht der Knopf aus wie zwei. */
.range-filter .chip {
  white-space: nowrap;
}