/* css/history_popup.css */
/* History pop-up (side panel → Ιστορικό): big centred box over everything, tabs, date form, result tables */
#history_popup{
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--c-surface-alt-1);
}
#history_popup[hidden]{
  display: none;
}
#history_box{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: min(1100px, 95vw);
  height: min(90dvh, 900px);
  padding: 24px;
  border-radius: var(--panel-card-radius);
  background: var(--c-surface-1);
  box-shadow: 0 8px 24px var(--c-shadow-17);
  color: var(--c-text-1);
}
#history_close{
  position: absolute;
  top: 24px;
  left: 24px;
  width: 22px;
  height: 22px;
  cursor: pointer;
}
#history_close::before{
  content: "";
  position: absolute;
  inset: 0;
  -webkit-mask: url(/icon/small/X1_black.svg) center / contain no-repeat;
  mask: url(/icon/small/X1_black.svg) center / contain no-repeat;
  background-color: var(--c-icon);
}
#history_title{
  margin: 0;
  text-align: center;
  color: var(--text-title-d_blue);
  font-size: 26px;
}
.history_tabs{
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--c-border-19);
}
.history_tab{
  padding: 8px 18px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--c-text-1);
  font-size: 16px;
  opacity: .6;
  cursor: pointer;
}
.history_tab.active{
  opacity: 1;
  font-weight: 700;
  border-bottom-color: var(--c-accent-strong-1);
}
/* form: From and To side by side (small labels above), square search button at the end, hint on its own line */
.history_form{
  display: none;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 6px 10px;
  max-width: 520px;
}
.history_form.active{
  display: flex;
}
.history_form label[hidden]{
  display: none;
}
.history_form label{
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  min-width: 0;
  font-size: 12px;
  opacity: .85;
}
.history_form input[type="date"]{
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 36px;
  min-height: 0;
  margin: 0;
  padding: 0 8px;
  border: 1px solid var(--c-border-19);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 400;
}
.history_submit{
  position: relative;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: var(--c-accent-strong-1);
  cursor: pointer;
}
.history_submit::before{
  content: "";
  position: absolute;
  inset: 0;
  /* magnifier */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L21 21'/%3E%3C/svg%3E") center / 55% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L21 21'/%3E%3C/svg%3E") center / 55% no-repeat;
  background-color: var(--c-text-on-accent-1);
}
/* Download: green pill next to the search button */
.history_download{
  flex: 0 0 auto;
  height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: 8px;
  background: var(--c-accent-strong-1); /* same blue as the search button */
  color: var(--c-text-on-accent-1);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.2s ease-in-out;
}
.history_download:hover{
  filter: brightness(1.08);
}
.history_download:disabled{
  opacity: .6;
  cursor: progress;
}
.history_hint{
  flex-basis: 100%;
  font-size: 12px;
  opacity: .6;
}
#history_result{
  flex: 1;
  min-height: 0;
  overflow: auto;
}
#history_result h3{
  margin: 18px 0 6px;
  color: var(--text-title-d_blue);
  font-size: 17px;
}
.history_meta{
  margin: 0 0 8px;
  font-size: 13px;
  opacity: .7;
}
.history_table{
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.history_table th,
.history_table td{
  padding: 5px 8px;
  text-align: left;
  vertical-align: top;
}
.history_table th{
  font-size: 12px;
  font-weight: 600;
  opacity: .7;
  white-space: nowrap;
}
/* Summary: "Playing Period" header may wrap (long in Greek) */
.history_table:not(.history_tracks) th:nth-child(2){
  white-space: normal;
}
.history_table tbody tr:nth-child(even){
  background: var(--c-surface-3);
}
.history_ips{
  font-size: 13px;
  opacity: .8;
}
.history_msg{
  padding: 20px 0;
  text-align: center;
  opacity: .7;
}
.history_err{
  color: var(--c-negative);
  opacity: 1;
}
#history_loading{
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 14px;
  border-radius: var(--panel-card-radius);
  background: var(--c-surface-4);
  font-size: 16px;
}
#history_loading[hidden]{
  display: none;
}
.history_spinner{
  width: 38px;
  height: 38px;
  border: 4px solid var(--c-border-19);
  border-top-color: var(--c-accent-strong-1);
  border-radius: 50%;
  animation: historySpin .9s linear infinite;
}
@keyframes historySpin{
  to { transform: rotate(360deg); }
}
@media (max-width: 940px){
  #history_box{ width: 95dvw; height: 95dvh; padding: 16px; border-radius: 10px; } /* same placement as the side panel on mobile */
  #history_close{ top: 16px; left: 16px; }
  .history_table{ font-size: 13px; }
}
/* device tabs (Summary, all devices): "Devices" title + pill buttons, the active one filled */
.history_dev_title{
  margin-top: 10px;
  color: var(--text-title-d_blue);
  font-size: 14px;
  font-weight: 700;
}
.history_dev_tabs{
  display: flex;
  gap: 8px;
  margin-top: 6px;
  padding-bottom: 10px;
  overflow-x: auto;
  border-bottom: 1px solid var(--c-border-19);
}
.history_dev_tab{
  flex-shrink: 0;
  padding: 7px 16px;
  border: 1px solid var(--c-accent-strong-1);
  border-radius: 999px;
  background: var(--c-surface-1);
  color: var(--c-accent-strong-1);
  font-size: 15px;
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.history_dev_tab:hover{
  background: rgba(5,102,141,.10);
}
.history_dev_tab.active{
  font-weight: 700;
  background: var(--c-accent-strong-1);
  color: var(--c-text-on-accent-1);
}
.history_dev_panel{
  display: none;
  padding-top: 10px;
}
.history_dev_panel.active{
  display: block;
}
/* Analytical: date rows (one per day) are for mobile only; desktop keeps the date column */
.history_tracks .history_date_row{
  display: none;
}
@media (max-width: 940px){
  .history_tracks .history_col_date{
    display: none;
  }
  .history_tracks .history_date_row{
    display: table-row;
  }
  /* bold date that stays at the top of the results while its tracks scroll; the next date pushes it away */
  .history_tracks .history_date_row td{
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 8px 8px 6px;
    background: var(--c-surface-1);
    border-bottom: 1px solid var(--c-border-19);
    font-size: 14px;
    font-weight: 700;
  }
}