body {
  margin: 0;
  font-family: "Rubik", sans-serif;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%) no-repeat fixed;
}

/* ── report card wrapper ─────────────────────────────── */
.report-wrapper {
  display: flex;
  justify-content: center;
  padding: 1rem;
}

.report-wrapper .card {
  width: 100%;
  max-width: 860px;
}

/* ── table scroll box ────────────────────────────────── */
.table-responsive {
  max-height: 400px;
  overflow-y: auto;
}

.small-table {
  font-size: .82rem;
}

/* ── tag dropdown stays open while clicking checkboxes ─ */
.tag-dropdown {
  min-width: 200px;
}


.small-table {
  table-layout: fixed;
  width: 100%;
}


.form-check-input {
  margin-left: auto;
  margin-right: 0;
}

.tag-dropdown .dropdown-item{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ── hide AM/PM from datetime-local (webkit) ──── */
input[type="datetime-local"]::-webkit-datetime-edit-ampm-field {
  display: none;
}

/* ── tag group sub-buttons ──────────────────────── */
.tag-group-bar .btn {
  font-size: 0.75rem;
}

/* ── download buttons ──────────────────────────── */
.btn-dl {
  font-size: 0.72rem;
  padding: 0.2rem 0.55rem;
  line-height: 1.3;
}

/* ── totals row highlight ──────────────────────── */
/* ── modal embed (dashboard light modal) ─────────────── */
#lightModal .light-report-panel {
  padding: 0;
}

#lightModal .light-report-table-wrap {
  max-height: 340px;
  overflow-y: auto;
}

#lightModal .light-report-chart-wrap {
  position: relative;
  min-height: 320px;
}

#lightModal .light-report-section-tabs .btn.active,
#lightModal .light-report-section-tabs .btn:focus {
  box-shadow: none;
}

.light-report-panel [data-lr="historyTable"] tbody tr.fw-bold td {
  border-top: 2px solid #ffc107;
}

@media (max-width: 768px) {
  #lightModal .light-report-chart-wrap {
    min-height: 280px;
  }
}


/* ── mobile overrides ─────────────────────────────── */
@media (max-width: 768px) {

  /* reduce card outer padding */
  .report-wrapper {
    padding: 0.4rem;
  }
  .report-wrapper .card-header {
    padding: 0.3rem 0.6rem !important;
    font-size: 0.8rem;
  }
  .report-wrapper .card-body {
    padding: 0.5rem !important;
  }

  /* ── date-filter row: ALL 3 items on ONE line ── */
  .report-wrapper .row.g-2.mb-3 {
    margin-bottom: 0.3rem !important;
    row-gap: 0 !important;
    flex-wrap: nowrap !important;
    align-items: flex-end;
  }
  /* מתאריך + עד תאריך each ~42% */
  .report-wrapper .row.g-2.mb-3 > div:nth-child(1),
  .report-wrapper .row.g-2.mb-3 > div:nth-child(2) {
    flex: 0 0 auto !important;
    width: 42% !important;
  }
  /* הצג button ~16% */
  .report-wrapper .row.g-2.mb-3 > div:nth-child(3) {
    flex: 0 0 auto !important;
    width: 16% !important;
  }
  #btnLoadHistory {
    width: 100% !important;
    font-size: 0.62rem !important;
    padding: 0.28rem 0.1rem !important;
    white-space: nowrap;
  }
  .report-wrapper .form-label.small {
    font-size: 0.6rem;
    margin-bottom: 0.08rem;
  }
  .report-wrapper .form-control-sm {
    font-size: 0.62rem;
    padding: 0.15rem 0.25rem;
    height: auto;
  }

  /* ── section-toggle buttons: single tight row ── */
  .report-wrapper .text-center.mb-3 {
    margin-bottom: 0.3rem !important;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 0.25rem;
  }
  .report-wrapper .text-center.mb-3 .btn {
    font-size: 0.6rem;
    padding: 0.18rem 0.45rem;
    margin: 0 !important;
    white-space: nowrap;
  }

  /* ── chart containers same behaviour for both sections ── */
  #sec5min,
  #secState {
    position: relative;
  }
  #sec5min canvas,
  #secState canvas {
    min-height: 300px;
  }
}


@media (max-width: 768px) {
  #sec5min,
  #secState {
    min-height: 78vh;
  }

  #chart5min,
  #chartState {
    height: 100% !important;
    max-height: none !important;
  }
}