@import "lightdark.css";

h1 {
    /* font-size: 3em; */
    text-align: center;
    font-family: 'MB Corpo S Title';
    color: whitesmoke;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #40407A;
    vertical-align: middle;
    display: table-cell;
}

h2 {
    font-family: 'MB Corpo S Title';
    text-align: left;
    font-size: 2em;
    color: whitesmoke;
    justify-self: center;
}

main h2 {
    justify-self: center;
}

h3 {
    font-size: 1.10em;
    text-align: center;
    font-family: 'MB Corpo S Text Office';
    color: white;
}

h4 {
    font-size: 1.5em;
    font-style: italic;
    text-align: center;
    font-family: 'MB Corpo S Text Office';
}

.frequentReport {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    display: grid;
    /* flex-direction: column; */
    gap: 5px;
    min-width: 98vw;
    /* min-height: ; */
    margin: auto;
    /* margin: 18px; */
}

.report {
    display: grid;
    grid-template-rows: minmax(0, 20px) minmax(0, 15fr);
    background-color: gray;
    border-radius: 5px;
    text-align: center;
    gap: 5px;
    height: 42vh;
}

.pbi-frame {
    width: 100%;
    position: relative;
    overflow: hidden;
}

/* Iframe is initially invisible */
.pbi-frame iframe {
    opacity: 0;
    transition: opacity 0.75s ease-in;
}

/* When loaded: fade-in */
.pbi-loaded iframe {
    opacity: 1;
}

.pbi-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 48px;
    height: 48px;
    margin: -24px 0 0 -24px;
    border: 4px solid rgba(255,255,255,0.2);
    border-top: 4px solid white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    z-index: 5;
    pointer-events: none;
}

/* Fade out the spinner */
.pbi-frame.pbi-loaded .pbi-spinner {
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Keyframes for spinning animation */
@keyframes spin {
    0%   { transform: rotate(0deg);   }
    100% { transform: rotate(360deg); }
}

iframe {
    width: 100%;
    height: 100%;
    border: 0;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.reportsDiv {
    display: flex;
    text-align: center;
    align-items: center;
    align-content: center;
    /* width: 100%; */
}

.mainContent {
    display: grid;
    grid-template-rows: auto auto;
    gap: 5px;
    text-align: center;
}

.mainMTContent {
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    justify-self: center;
    gap: 5px;
    min-width: 98vw;
    height: 84vh;
}

.mainMTColumns {
    display: grid;
    grid-template-columns: 9vw 90vw;
    column-gap: 1vw;
}

.MTNav {
    display: grid;
    /* background-color: gray; */
    text-align: center;
    /* padding-left: .5rem; */
    /* padding-right: .5rem; */
}

.mainMTReport {
    display: grid;
    grid-template-rows: minmax(0, 1fr) minmax(0, 30fr);
    background-color: gray;
    justify-self: center;
    height: 84vh;
    width: 100%;
}

.MTNav li {
  list-style: none;
  display: block;
}

.MTNav li button {
  appearance: none;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 4px;
  color: white;
  font: inherit;
  font-size: .75em;
  cursor: pointer;
  width: 7vw;
  height: 40px;
  padding: .6rem;
  margin-bottom: 10px;
  text-align: center;      /* aligns with your current MTNav text-center */
}

.MTNav li.active button {
  background-color: rgb(204, 185, 149);  
  border-color: rgb(137, 148, 148);
  border-width: 3px;
  color: white;
}

.pagination {
    display: flex;
    justify-content: center;
    font-size: .8em;
}

.pagination a {
    padding: 2px 6px;
    text-decoration: none;
    background-color: slategray;
    color: white;
    border: 1px solid darkslategrey;
    border-radius: 4px;
}

.pagination a:hover {
    background-color: darkblue;
    color: white;
}

.pagination .active {
    background-color: darkblue;
    color: white;
}

#page-numbers {
    font-size: .6em;
    color: white;
    padding-bottom: .25em;
}

#paginationContainer {
    display: grid;
    grid-template-rows: auto auto;
}

/* Ensure hidden reports don't affect the grid layout */
#data-container .frequentReport .report[hidden] {
  display: none !important;
}

/* ---------- Last page: 1 item (full-width, 84vh) ---------- */
#data-container .frequentReport.last-1 {
  grid-template-columns: 1fr;   /* single column */
}
#data-container .frequentReport.last-1 .report {
  height: 84vh; /* grow the single tile */
}

/* ---------- Last page: 2 items (two columns, each 84vh) --- */
#data-container .frequentReport.last-2 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
#data-container .frequentReport.last-2 .report {
  height: 84vh; /* both tiles are tall */
}

/* ---------- Last page: 3 items -----------------------------
   Left column: slot-1 (top, 42vh) + slot-2 (bottom, 42vh)
   Right column: slot-3 spans both rows (84vh)
------------------------------------------------------------ */
#data-container .frequentReport.last-3 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: 42vh 42vh; /* make two explicit rows for the left column */
}
#data-container .frequentReport.last-3 .report {
  height: 42vh; /* default 42vh; we’ll override slot-3 below */
}

/* Explicit placement for the three tiles */
#data-container .frequentReport.last-3 .slot-1 {
  grid-column: 1;
  grid-row: 1;
}
#data-container .frequentReport.last-3 .slot-2 {
  grid-column: 1;
  grid-row: 2;
}
#data-container .frequentReport.last-3 .slot-3 {
  grid-column: 2;
  grid-row: 1 / span 2; /* make it tall on the right */
  height: 84.5vh;         /* override base 42vh for the tall tile */
}