/* Nord Tickets V2 — content-sized history cards, not viewport-height tiles. */
#page-tickets.active{
  display:block;
  min-height:0;
}
#page-tickets .ticket-history-card{
  display:flex;
  flex-direction:column;
  flex:0 0 auto;
  min-height:0;
  height:auto;
  overflow:hidden;
}
#page-tickets .ticket-history-head{
  align-items:center;
  flex-wrap:wrap;
  margin-bottom:16px;
  gap:10px 16px;
}
#page-tickets .ticket-history-head > div:first-child{min-width:0;flex:1 1 250px}
#page-tickets .ticket-history-actions{min-width:0}
#page-tickets #ticketsTable{
  display:block;
  flex:0 0 auto;
  min-width:0;
  min-height:0;
  height:auto;
  overflow:visible;
}
#page-tickets #ticketsTable>.ticket-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,285px),1fr));
  grid-auto-rows:max-content;
  align-content:start;
  align-items:start;
  gap:13px;
  width:100%;
  max-height:min(66dvh,710px);
  padding:2px 3px 10px;
  overflow-x:hidden;
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:var(--border) transparent;
}
#page-tickets #ticketsTable .ticket-card{
  display:flex;
  flex-direction:column;
  height:auto;
  min-height:0;
  align-self:start;
  justify-content:flex-start;
  gap:12px;
  padding:16px;
  overflow:hidden;
}
#page-tickets .ticket-card-top{min-width:0}
#page-tickets .ticket-card-icon{flex:0 0 34px;width:34px;height:34px}
#page-tickets .ticket-card-id{font-size:12px}
#page-tickets .ticket-status{
  min-width:0;
  max-width:58%;
  font-size:10px;
  padding:5px 9px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#page-tickets .ticket-card-subject{
  min-height:0;
  line-height:1.45;
  font-size:15px;
  overflow-wrap:anywhere;
  white-space:normal;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
#page-tickets .ticket-card-meta{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
}
#page-tickets .ticket-card-meta>span{
  min-width:0;
  padding:11px 9px;
  gap:4px 7px;
  align-items:center;
}
#page-tickets .ticket-card-meta i{font-size:12px}
#page-tickets .ticket-card-meta b{
  font-size:9px;
  line-height:1.2;
}
#page-tickets .ticket-card-meta em{
  font-size:11px;
  line-height:1.4;
}
#page-tickets .ticket-card-footer{
  padding-top:11px;
  margin-top:2px;
  font-size:11px;
  line-height:1.4;
}
#page-tickets .ticket-card-footer>span:first-child{min-width:0;overflow:hidden}
#page-tickets .ticket-card-open{flex:0 0 auto}
#page-tickets #ticketsTable>.ticket-empty{
  min-height:190px;
  height:auto;
  flex:0 0 auto;
}
#page-tickets .ticket-created-lifetime{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 10px;
  border:1px solid var(--border);
  border-radius:999px;
  font-size:11px;
  color:var(--text-2);
  white-space:nowrap;
}
#page-tickets .ticket-created-lifetime strong{color:var(--accent);font-variant-numeric:tabular-nums}
#page-tickets .ticket-created-lifetime[hidden]{display:none!important}
@media(max-width:760px){
  #page-tickets .ticket-history-card{min-height:0}
  #page-tickets #ticketsTable>.ticket-grid{
    grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));
    max-height:65dvh;
  }
}
@media(max-width:440px){
  #page-tickets .ticket-history-head{align-items:flex-start}
  #page-tickets .ticket-history-actions{width:100%;justify-content:flex-start}
  #page-tickets #ticketsTable>.ticket-grid{grid-template-columns:minmax(0,1fr)}
}


/* Nord Tickets V3 — viewport-filling panel, intrinsically sized cards.
   The PANEL consumes unused page height; the GRID/CARDS never stretch. */
#page-tickets.active{
  display:flex;
  flex-direction:column;
  min-height:max(400px,calc(100dvh - 115px));
  min-width:0;
}
#page-tickets .page-head{
  flex:0 0 auto;
}
#page-tickets .ticket-history-card{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:0;
  height:auto;
  overflow:hidden;
}
#page-tickets .ticket-history-head{
  flex:0 0 auto;
}
#page-tickets #ticketsTable{
  display:block;
  flex:1 1 auto;
  min-width:0;
  min-height:0;
  height:auto;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:var(--border) transparent;
}
#page-tickets #ticketsTable>.ticket-grid{
  display:grid;
  flex:0 0 auto;
  width:100%;
  max-height:none;
  height:auto;
  grid-auto-rows:max-content;
  align-content:start;
  align-items:start;
  overflow:visible;
}
#page-tickets #ticketsTable .ticket-card{
  height:auto;
  min-height:0;
  align-self:start;
  justify-self:stretch;
}
#page-tickets #ticketsTable>.ticket-empty{
  min-height:190px;
  height:auto;
  flex:0 0 auto;
}
@media(max-width:760px){
  #page-tickets.active{
    min-height:max(330px,calc(100dvh - 90px));
  }
  #page-tickets .ticket-history-card{min-height:0}
  #page-tickets #ticketsTable>.ticket-grid{
    max-height:none;
  }
}
@media(max-height:550px) and (min-width:761px){
  #page-tickets.active{min-height:calc(100dvh - 80px)}
}