/* ------------------------------------------------------
   GLOBAL BASE
------------------------------------------------------ */
body {
  font-family: "Calibri", "Segoe UI", "Roboto", "Open Sans", sans-serif;
  margin: 0;
  padding: 0;
  height: 100%;
}

/* Icons */
.bi {
  width: 1.2rem;
  height: 1.2rem;
  vertical-align: -0.125em;
  fill: currentColor;
  opacity: 1 !important;
}

/* ------------------------------------------------------
   THEME VARIABLES
------------------------------------------------------ */

/* Light Theme */
[data-bs-theme="light"] {
  --panel-border-color: #dee2e6;
  --panel-bg-color: #ffffff;
  --heading-color: #cd2929;
  --menu-color: #cd2928;
  --bg-color: #ffffff;
  --text-color: #000000;
}

/* Dark Theme */
[data-bs-theme="dark"] {
  --panel-border-color: #2e2e2e;
  --panel-bg-color: #1a1a1a;
  --heading-color: #ff4d4d;
  --menu-color: #cd2928;
  --bg-color: #121212;
  --text-color: #ffffff;
}

/* Page background/text */
body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

[data-bs-theme="light"] .header-border,
[data-bs-theme="dark"] .header-border,
[data-bs-theme="owo"] .header-border {
  border-bottom: 2px solid var(--panel-border-color);
}

/* ------------------------------------------------------
   OWO THEME  (EASTER EGG THEME)
------------------------------------------------------ */
[data-bs-theme="owo"] {
  --panel-border-color: rgba(255, 182, 193, 0.5); /* soft pink */
  --panel-bg-color: #fff0fa; /* cotton candy background */
  --heading-color: #ff66aa; /* bright pink accent */
  --menu-color: #ff66aa; /* button color */

  --bg-color: #fff0fa; /* page background */
  --text-color: #4a0035; /* readable dark-pink */
}

[data-bs-theme="owo"] .grafana-iframe {
  border: 2px solid rgba(255, 182, 193, 0.5); /* soft pink */
  border-radius: 12px;
}

/* show butterfly icon on portrait */
.portrait {
  position: relative;
}

/* Hidden by default */
.cute-butterfly {
  display: none;
  position: absolute;
  top: 0;
  right: 0;

  width: 22px;
  height: 22px;

  --tx: -30%;
  --ty: 2%;

  transform: translate(var(--tx), var(--ty));
  transform-origin: 50% 50%;

  fill: currentColor;
  color: var(--heading-color);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25));
}

/* Show only in owo theme */
[data-bs-theme="owo"] .portrait.cute .cute-butterfly {
  display: block;
  animation: flutter 1.6s ease-in-out infinite;
}

/* IMPORTANT: include the same translate() in the animation, then add rotate/scale */
@keyframes flutter {
  0%, 100% { transform: translate(var(--tx), var(--ty)) rotate(-8deg) scale(1); }
  50%      { transform: translate(var(--tx), var(--ty)) rotate(10deg)  scale(1.05); }
}

/* ------------------------------------------------------
   TYPOGRAPHY
------------------------------------------------------ */
h1,
.header-title {
  color: var(--heading-color);
}

.header-title {
  font-size: 2rem;
  font-weight: 600;
}

h2.h5 {
  font-weight: 400;
  opacity: 0.85;
}

/* Reusable theme-colored elements */
.theme-color {
  color: var(--heading-color) !important;
}

/* ------------------------------------------------------
   BUTTONS
------------------------------------------------------ */
[data-bs-theme="dark"] .btn-bd-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #ff4d4d;
  --bs-btn-border-color: #ff4d4d;
}

[data-bs-theme="light"] .btn-bd-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #cd2929;
  --bs-btn-border-color: #cd2929;
}

[data-bs-theme="owo"] .btn-bd-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #ff66aa;
  --bs-btn-border-color: #ff66aa;
}

/* Danger button override */
.btn-danger {
  background-color: var(--menu-color);
}

.bd-mode-toggle {
  z-index: 1500;
}

/* ------------------------------------------------------
   PANELS
------------------------------------------------------ */
.panel {
  padding: 1.5rem;
  border-radius: 12px;
  border: 1px solid var(--panel-border-color);
  background-color: var(--panel-bg-color);
  transition:
    background-color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s;
}

/* Shadows per theme */
[data-bs-theme="light"] .panel {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

[data-bs-theme="dark"] .panel {
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.06);
}

.panel-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.panel-grid .panel {
  min-width: 0;
}

/* Row 1 */
.panel-grid .panel:nth-child(2) {
  grid-column: 2 / span 2; /* columns 2-3 */
}

/* Row 2 */
.panel-grid .panel:nth-child(3) {
  grid-column: 1 / span 2; /* columns 1-2 */
}

.panel-grid .panel:nth-child(4) {
  grid-column: 3 / span 1; /* column 3 */
}

/* Mobile: stack everything */
@media (max-width: 992px) {
  .panel-grid {
    grid-template-columns: 1fr;
  }

  .panel-grid .panel:nth-child(2),
  .panel-grid .panel:nth-child(3),
  .panel-grid .panel:nth-child(4) {
    grid-column: auto;
  }
}

/* Charts are too cramped in mobile view and need to be hidden */
/* Default: show charts */
.panel-charts {
  display: block;
}

/* Hide charts on small-ish screens that are wide (landscape-ish) */
@media (max-aspect-ratio: 3/4) and (max-width: 800px) {
  .panel-charts {
    display: none;
  }
}

/* ------------------------------------------------------
   TABLE STYLING
------------------------------------------------------ */
.table,
.table th,
.table td,
.table tr {
  background-color: transparent !important;
}

.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 0.03);
}

[data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.05);
}

.table-group-divider {
  color: var(--heading-color);
  border-top: 2px solid var(--heading-color);
  padding-top: 0.75rem;
  font-weight: bold;
}

/* ------------------------------------------------------
   IFRAME (Grafana)
------------------------------------------------------ */
.grafana-iframe {
  width: 100%;
  min-height: 300px;
  border: 0;
  border-radius: 8px;
  aspect-ratio: 16 / 9;
}

/* ------------------------------------------------------
   PORTRAITS (circular images)
------------------------------------------------------ */
.images {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
  width: 100%;
}

.portrait {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
  width: fit-content;
}

.images img {
  width: clamp(60px, 20vw, 90px);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid var(--panel-border-color);
}

.portrait span {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  opacity: 0.8;
  text-align: center;
}

@media (max-width: 768px) {
  .modal-dialog {
    margin: 0;
    max-width: 100%;
    height: 100%;
  }
  .modal-content {
    height: 100%;
    border-radius: 0;
  }
}

/* ------------------------------------------------------
   Additional Styling
------------------------------------------------------ */
/* Limit images inside the info modal */
#infoModal .modal-body img {
  max-height: 50vh;
  max-width: 100%;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Allow larger image height on phone screens */
/*
@media (max-width: 576px) and (orientation: portrait) {
  #infoModal .modal-body img {
    max-height: 55vh;
  }
}
*/

#infoModal .modal-body .modal-img {
  max-height: 30vh;
  object-fit: contain;
}

#infoModal .modal-dialog {
  max-height: 90vh;
}

#infoModal .modal-body {
  overflow: auto;
  max-height: calc(90vh - 120px); /* header/footer space */
}

/* Reduce paddings in narrow mobile view */
@media (max-width: 576px) {
  .panel {
    padding: 10px;
    border-radius: 10px; /* slightly tighter look */
  }

  .panel-grid {
    gap: 10px; /* reduce spacing between panels */
  }

  .main {
    padding: 5px;
  }
}

@media (max-width: 576px) {
  #main-content > .container {
    padding-left: 6px;
    padding-right: 6px;
  }
}

/* Styling for socials icons */
.social-icon {
  width: 30px !important;
  height: 30px !important;
  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}

/* hover effect */
.icon-link:hover .social-icon {
  transform: scale(1.15);
  opacity: 0.8;
}

/* enlargen on desktop */
/*
@media (min-width: 768px) {
  .social-icon {
    width: 40px !important;
    height: 40px !important;
  }
}
*/

.img-small {
  max-height: 30vh !important;
}

h6 {
  font-weight: bold;
}