@import "bootstrap.css";

/* Language: css */
.bg-batteryos {
  background-color: transparent;
}

body {
  font-family: Inter, sans-serif !important;
}
a, a:hover, a:visited {
    text-decoration: inherit;
    color: inherit;
}

.font-imfell {
    font-family: "IM Fell English", sans-serif !important;
}
.nav-link {
  border: 1px solid transparent;
}
.ul-footer {
  list-style-type: none;
  padding-inline-start: 0;
}
.qux-card-with-icon {
  display: flex;
  flex-direction: row;
  align-items: center;
  border-radius: 4px;
  height: 100%;
  width: 100%;
  font-size: 1rem;
  min-height: 64px;
}
.split-splash {
   margin-top: 6rem;
}
@media screen and (max-width: 767px) {
  .split-splash {
    margin-top: 2rem;
  }
}
@media screen and (min-width: 768px) {
  .fs-md-5 {
    font-size: 1.25rem !important;
  }
}
h1, .h1 {
  font-size: 2em;
  font-weight: 700;
  margin-bottom: 1em;
}
footer {
  font-size: 0.875rem;
}

.cursor-pointer {
  cursor: pointer;
}

/* Spinner used by overlays (BatteryOS style) */
.spinner {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(0, 0, 0, 0.08);
  border-top-color: #198754; /* brand-accent (bootstrap success) */
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Overlay helper */
.overlay-fullscreen {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(138, 136, 136, 0.5);
  z-index: 1000;
}

.overlay-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Charts: shared utilities */
.legend-label {
  font-size: 0.625rem;
  text-transform: uppercase;
  padding: 1px 4px;
  color: #fff;
}

.chart-title {
  font-weight: 600;
}

.aspect-ratio-16-9 {
  position: relative;
  aspect-ratio: calc(16/9);
}

.aspect-ratio-16-9.cover {
  width: 100%;
}

.aspect-ratio-16-9.contain {
  flex-grow: 1;
}


.aspect-ratio-16-9 > canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}

.aspect-ratio-16-9 .subscription-message {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.7); /* semi-opaque white */
  backdrop-filter: blur(8px); /* blur background */
  -webkit-backdrop-filter: blur(8px); /* Safari support */
}

.custom-aspect-ratio {
  position: relative;
  width: 100%;
}

.custom-aspect-ratio > canvas {
  position: absolute;
  inset: 0;
}

.overlay-panel {
  position: absolute;
  inset: 0;
  display: none;
  background: rgba(138, 136, 136, 0.35);
  z-index: 10;
}

/* Fullscreen modals: remove excess padding/height and make content flex to avoid overflow */
.modal-fullscreen .modal-content { height: 100vh; display: flex; flex-direction: column; }
.modal-fullscreen .modal-body { flex: 1 1 auto; padding: 0; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.modal-fullscreen .modal-header, .modal-fullscreen .modal-footer { padding: .5rem .75rem; }
/* Ensure the 16:9 box scales to available space without overflowing */
.modal-fullscreen .modal-body .aspect-ratio-16-9 { width: 100%; max-height: 100%; }
.modal-fullscreen .modal-body .aspect-ratio-16-9 > canvas { width: 100% !important; height: 100% !important; }
/* If any charts still use this legacy class, let them fill the wrapper */
.modal-chart-container { width: 100%; height: 100%; }

/* Chart cards */
.chart-card .card-header { padding: .5rem .75rem; min-height: 44px; }
.chart-card .card-header .title { margin: 0; line-height: 1.25; }
.chart-card .card-header .btn { line-height: 1; }
.chart-card .legend-label { display: inline-flex; align-items: center; height: 1.25rem; line-height: 1; padding: 0 .375rem; border-radius: .25rem; }
.chart-card .custom-aspect-ratio { height: 320px; padding-top: 0; }
@media (min-width: 768px) {
  .chart-card .custom-aspect-ratio { height: 360px; }
}

/* Page header (owner name) aligned with chart headers */
.owner-title {
  margin: 0;
  font-weight: 600;
  line-height: 1.25;
}

/* Dropdowns */

.dropdown.bos-dropdown {
  width: max-content;
}

.scrollable-menu {
    height: auto;
    max-height: 201px;
    overflow-x: hidden;
    overflow-y: scroll;
}

/* Buttons */

.disabled {
  opacity: 0.5 !important;
  pointer-events: none;
}