@import url("../ui/t2b-index.css");

#s-history{
  --hist-green:var(--t2b-brand);
  --hist-red:var(--t2b-hot);
  --hist-amber:var(--t2b-warn);
  --hist-cyan:var(--t2b-good);
  color:var(--t2b-text);
  background:
    radial-gradient(circle at 100% 6%,color-mix(in srgb,var(--t2b-brand) 10%,transparent),transparent 36%),
    linear-gradient(105deg,var(--t2b-bg-a) 0%,var(--t2b-bg-b) 48%,var(--t2b-bg-c) 100%)!important;
  overflow:hidden!important;
}

#s-history,
#s-history button,
#s-history input,
#s-history select{
  font-family:var(--t2b-font)!important;
  letter-spacing:0!important;
}

#s-history,
#s-history *{
  box-sizing:border-box;
}

#s-history .history-feed{
  width:100%!important;
  max-width:none!important;
  min-height:0;
  height:100%;
  margin:0!important;
  display:flex!important;
  flex-direction:column!important;
  gap:9px!important;
  padding:6px 6px calc(88px + env(safe-area-inset-bottom))!important;
  background:transparent!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
}

#s-history .history-filter-card,
#s-history .history-summary-card,
#s-history .history-empty{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  border:1px solid var(--t2b-line)!important;
  border-radius:var(--t2b-radius-card)!important;
  background:var(--t2b-surface-card)!important;
  box-shadow:var(--t2b-shadow-card)!important;
  overflow:hidden!important;
}

#s-history .history-filter-card{
  flex:0 0 auto;
  display:grid;
  gap:8px;
  padding:10px!important;
  margin:0!important;
  contain:inline-size;
}

#s-history .history-search-row{
  min-width:0;
  width:100%;
  max-width:100%;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto auto!important;
  align-items:center;
  gap:7px!important;
  overflow:hidden;
}

#s-history #hist-search{
  font-size:calc(var(--t2b-font-control) * 1.04 * var(--t2b-font-scale,1))!important;
}

#s-history .history-search-ico{
  flex:0 0 auto;
  color:var(--t2b-muted);
  font-size:calc(var(--t2b-font-control) * .92 * var(--t2b-font-scale,1));
  line-height:1;
  font-weight:760;
}

#s-history #hist-search-clear{
  width:24px;
  min-width:24px;
  height:24px;
  min-height:24px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:999px;
  background:var(--t2b-surface-score);
  color:var(--t2b-muted);
  padding:0;
  font-size:calc(var(--t2b-font-control) * 1.05);
  line-height:1;
  font-weight:780;
  visibility:hidden;
}

#s-history .history-filter-btn,
#s-history .history-reset-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  max-width:min(104px,30vw);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

#s-history .history-filter-btn span{
  line-height:1;
}

#s-history .history-reset-btn{
  display:none;
}

#s-history .history-reset-btn.show{
  display:inline-flex;
}

#s-history .history-chip-row{
  min-width:0;
  width:100%!important;
  max-width:100%!important;
  display:flex!important;
  flex-wrap:nowrap!important;
  gap:7px!important;
  margin:0!important;
  padding:0 0 1px!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  contain:layout paint;
}

#s-history .history-chip-row::-webkit-scrollbar,
#s-history .history-active-filters::-webkit-scrollbar{
  display:none;
}

#s-history .history-chip{
  flex:0 0 auto!important;
  min-height:28px!important;
  height:28px!important;
  padding:0 10px!important;
  font-size:calc(var(--t2b-font-control) * .92 * var(--t2b-font-scale,1))!important;
  font-weight:650!important;
}

#s-history:not(.history-superadmin) .super-only{
  display:none!important;
}

#s-history .history-filter-tools{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:7px;
  min-height:20px;
  width:100%;
  max-width:100%;
  overflow:hidden;
  color:var(--t2b-muted);
  font-size:calc(var(--t2b-font-meta) * .86 * var(--t2b-font-scale,1));
  line-height:1.2;
  font-weight:620;
}

#s-history .history-sort-note{
  margin-left:auto!important;
  text-align:right;
  white-space:nowrap;
  min-width:0;
}

#s-history .history-active-filters{
  min-width:0;
  display:flex;
  gap:6px;
  width:100%;
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
}

#s-history .history-active-filters:empty{
  display:none;
}

#s-history .history-active-chip{
  flex:0 0 auto;
  max-width:min(180px,45vw);
  min-height:22px;
  display:inline-flex;
  align-items:center;
  gap:4px;
  border:1px solid color-mix(in srgb,var(--t2b-brand) 24%,transparent);
  border-radius:999px;
  background:var(--t2b-brand-soft);
  color:var(--t2b-brand-text-deep);
  padding:0 3px 0 8px;
  font-size:calc(var(--t2b-font-meta) * .80 * var(--t2b-font-scale,1));
  line-height:1;
  font-weight:720;
}

#s-history .history-active-chip em{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-style:normal;
}

#s-history .history-active-chip button{
  width:18px;
  min-width:18px;
  height:18px;
  min-height:18px;
  border:0;
  border-radius:999px;
  background:var(--t2b-surface);
  color:var(--t2b-muted);
  padding:0;
  font-size:12px;
  line-height:1;
  font-weight:780;
}

#s-history .history-summary-card{
  flex:0 0 auto;
  padding:10px!important;
}

#s-history .history-summary-head{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:8px;
}

#s-history .history-summary-head b{
  min-width:0;
  color:var(--t2b-text)!important;
  font-size:calc(var(--t2b-font-title) * var(--t2b-font-scale,1))!important;
  line-height:1.17!important;
  font-weight:780!important;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

#s-history .history-summary-head span{
  flex:0 0 auto;
  color:var(--t2b-meta)!important;
  font-size:calc(var(--t2b-font-meta) * .86 * var(--t2b-font-scale,1))!important;
  line-height:1.1!important;
  font-weight:760!important;
}

#s-history .history-summary-body{
  display:grid;
  grid-template-columns:60px minmax(0,1fr);
  gap:10px;
  align-items:center;
}

#s-history .history-donut{
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  border-radius:999px;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--t2b-line) 60%,transparent);
}

#s-history .history-donut div{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  align-content:center;
  border-radius:999px;
  background:var(--t2b-surface);
  box-shadow:var(--t2b-shadow-soft);
}

#s-history .history-donut b{
  color:var(--t2b-text);
  font-size:calc(var(--t2b-font-score) * 1.12 * var(--t2b-font-scale,1));
  line-height:1;
  font-weight:850;
}

#s-history .history-donut span{
  margin-top:2px;
  color:var(--t2b-meta);
  font-size:calc(var(--t2b-font-meta) * .72 * var(--t2b-font-scale,1));
  line-height:1;
  font-weight:720;
  text-transform:uppercase;
}

#s-history .history-summary-copy{
  min-width:0;
}

#s-history .history-summary-focus{
  min-width:0;
  color:var(--t2b-text-2);
  font-size:calc(var(--t2b-font-meta) * var(--t2b-font-scale,1));
  line-height:1.3;
  font-weight:540;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  margin-bottom:7px;
}

#s-history .history-legend{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:5px 9px;
}

#s-history .history-legend div{
  min-width:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:5px;
}

#s-history .history-legend span,
#s-history .history-legend b{
  min-width:0;
  color:var(--t2b-muted);
  font-size:calc(var(--t2b-font-meta) * .78 * var(--t2b-font-scale,1));
  line-height:1.15;
  font-weight:620;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

#s-history .history-legend b{
  color:var(--t2b-text-2);
  font-weight:720;
}

#s-history .history-legend i{
  width:7px;
  height:7px;
  display:inline-block;
  border-radius:999px;
  margin-right:4px;
}

#s-history .history-legend i.green{background:var(--t2b-brand);}
#s-history .history-legend i.red{background:var(--t2b-hot);}
#s-history .history-legend i.amber{background:var(--t2b-warn);}
#s-history .history-legend i.cyan{background:var(--t2b-good);}

#s-history .history-mini-metrics{
  margin-top:9px;
  border:1px solid var(--t2b-line-soft);
  border-radius:var(--t2b-radius-inner);
  overflow:hidden;
}

#s-history .history-mini-metrics .t2b-stat{
  background:var(--t2b-surface-soft);
  border-right:1px solid var(--t2b-line-soft);
  border-radius:0!important;
  box-shadow:none!important;
}

#s-history .history-mini-metrics .t2b-stat:last-child{
  border-right:0;
}

#s-history .history-section-title:not(.t2b-section-title){
  flex:0 0 auto;
  padding:0!important;
}

#s-history .history-section-title:not(.t2b-section-title) span{
  min-width:0;
  display:flex;
  align-items:center;
  gap:7px;
}

#s-history .history-section-title:not(.t2b-section-title) i{
  display:none;
}

#s-history .history-section-title:not(.t2b-section-title) b{
  min-width:0;
  color:var(--t2b-brand-text-deep)!important;
  font-size:calc(var(--t2b-font-title) * var(--t2b-font-scale,1))!important;
  line-height:1.15!important;
  font-weight:900!important;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

#s-history .history-section-title:not(.t2b-section-title) small{
  flex:0 0 auto;
  color:var(--t2b-meta)!important;
  font-size:calc(var(--t2b-font-meta) * .86 * var(--t2b-font-scale,1))!important;
  line-height:1.15!important;
  font-weight:780!important;
}

#s-history .history-list{
  flex:0 0 auto;
  display:block!important;
  min-width:0;
  padding:0!important;
  overflow:hidden!important;
  border:1px solid var(--t2b-line)!important;
  border-radius:var(--t2b-radius-card)!important;
  background:var(--t2b-surface-card)!important;
  box-shadow:var(--t2b-shadow-card)!important;
}

#s-history .history-month{
  min-height:25px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:8px 10px 5px;
  background:var(--t2b-surface-card);
  border-top:1px solid var(--t2b-line-soft);
  color:var(--t2b-muted);
  font-size:calc(var(--t2b-font-meta) * .86 * var(--t2b-font-scale,1));
  line-height:1.15;
  font-weight:780;
}

#s-history .history-list > .history-month:first-child{
  border-top:0;
}

#s-history .history-month span,
#s-history .history-month small{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

#s-history .history-month small{
  flex:0 0 auto;
  color:var(--t2b-meta);
  font-weight:650;
}

#s-history .history-match-card{
  cursor:pointer;
}

#s-history .history-match-card.t2b-match-row{
  min-height:96px;
}

#s-history .history-match-card .t2b-match-main{
  gap:6px;
}

#s-history .history-score-badge{
  min-height:20px!important;
  height:20px!important;
  padding:0 7px!important;
  max-width:100%;
  font-size:calc(var(--t2b-font-meta) * .76 * var(--t2b-font-scale,1))!important;
  font-weight:720!important;
  overflow:hidden;
  text-overflow:ellipsis;
}

#s-history .history-score-badge.mine{
  border-color:color-mix(in srgb,var(--t2b-brand) 28%,transparent)!important;
  background:var(--t2b-brand-soft)!important;
  color:var(--t2b-brand-text-deep)!important;
}

#s-history .history-score-badge.warn{
  border-color:color-mix(in srgb,var(--t2b-warn) 28%,transparent)!important;
  background:var(--t2b-warn-soft)!important;
  color:var(--t2b-warn-text-deep)!important;
}

#s-history .history-score-badge.danger{
  border-color:color-mix(in srgb,var(--t2b-hot) 28%,transparent)!important;
  background:var(--t2b-hot-soft)!important;
  color:var(--t2b-hot-text-deep)!important;
}


#s-history .history-bottom-space{
  height:14px;
}

#s-history .history-load-more{
  display:flex;
  justify-content:center;
  padding:10px 0 14px;
}

#s-history .history-empty{
  min-height:150px;
  margin:0!important;
}

#s-history .history-empty-icon{
  margin-bottom:9px!important;
}

#s-history .history-sheet-mask{
  position:fixed;
  inset:0;
  z-index:1200;
  display:none;
  align-items:flex-end;
  justify-content:center;
  background:rgba(15,23,42,.45);
}

#s-history .history-sheet-mask.open{
  display:flex;
}

#s-history .history-filter-sheet{
  width:100%;
  max-width:520px;
  max-height:84vh;
  display:flex;
  flex-direction:column;
  background:var(--t2b-surface-card)!important;
}

#s-history .history-sheet-head{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-bottom:1px solid var(--t2b-line-soft);
  background:linear-gradient(180deg,var(--t2b-surface),var(--t2b-surface-soft));
}

#s-history .history-sheet-head div{
  flex:1;
  min-width:0;
}

#s-history .history-sheet-head b{
  display:block;
  color:var(--t2b-text);
  font-size:calc(var(--t2b-font-title) * var(--t2b-font-scale,1));
  line-height:1.17;
  font-weight:780;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

#s-history .history-sheet-head span{
  display:block;
  margin-top:2px;
  color:var(--t2b-muted);
  font-size:calc(var(--t2b-font-meta) * var(--t2b-font-scale,1));
  line-height:1.2;
  font-weight:500;
}

#s-history .history-sheet-head button{
  width:34px;
  min-width:34px;
  height:34px;
  border:1px solid var(--t2b-line-control);
  border-radius:999px;
  background:var(--t2b-surface-control);
  color:var(--t2b-control-text);
  font-size:20px;
  line-height:1;
}

#s-history .history-sheet-body{
  min-height:0;
  overflow:auto;
  padding:12px;
}

#s-history .history-filter-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
}

#s-history .history-filter-grid label{
  min-width:0;
  min-height:40px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:8px;
  border:1px solid var(--t2b-line-control);
  border-radius:var(--t2b-radius-inner);
  background:var(--t2b-surface-control);
  padding:0 10px;
}

#s-history .history-filter-grid span{
  color:var(--t2b-muted);
  font-size:calc(var(--t2b-font-meta) * .86 * var(--t2b-font-scale,1));
  line-height:1;
  font-weight:720;
  white-space:nowrap;
}

#s-history .history-filter-grid select,
#s-history .history-filter-grid input{
  width:100%;
  min-width:0;
  border:0;
  outline:0;
  background:transparent;
  color:var(--t2b-text);
  font-size:calc(var(--t2b-font-control) * var(--t2b-font-scale,1));
  line-height:1.2;
  font-weight:620;
}

#s-history .history-sheet-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
  margin-top:12px;
}

@media(min-width:768px){
  #s-history{
    overflow-y:auto!important;
    overflow-x:hidden!important;
  }

  #s-history .history-feed{
    width:min(100%,860px);
    max-width:860px;
    height:auto;
    min-height:100%;
    padding:14px!important;
    overflow:visible!important;
  }

  #s-history .history-list{display:block!important;}

  #s-history .history-filter-card{
    gap:9px;
  }

  #s-history .history-search-row{
    grid-template-columns:minmax(0,1fr) 104px auto!important;
  }

  #s-history .history-filter-grid{
    grid-template-columns:1fr 1fr;
  }

  #s-history .history-sheet-mask{
    left:196px;
    align-items:center;
  }

  #s-history .history-filter-sheet{
    border-radius:var(--t2b-radius-card)!important;
  }
}

@media(max-width:520px){
  #s-history .history-search-row{
    grid-template-columns:minmax(0,1fr) auto!important;
  }

  #s-history .history-reset-btn.show{
    display:none!important;
  }
}

@media(max-width:380px){
  #s-history .history-summary-body{
    grid-template-columns:50px minmax(0,1fr);
    gap:8px;
  }

  #s-history .history-donut{
    width:48px;
    height:48px;
  }

  #s-history .history-donut div{
    width:36px;
    height:36px;
  }

}