.tickets-toolbar{
  display:grid;
  grid-template-columns:minmax(180px,240px) 1fr;
  gap:12px;
  margin:18px 0;
}

.tickets-toolbar select,
.tickets-toolbar input{
  min-height:52px;
  padding:0 14px;
  border:1px solid #dce5e2;
  border-radius:14px;
  background:#fff;
  font:inherit;
}

.ticket-summary{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-bottom:18px;
}

.ticket-summary-card{
  padding:18px;
  border:1px solid #dde6e3;
  border-radius:17px;
  background:#fff;
}

.ticket-summary-card span{
  display:block;
  color:#6c7b77;
  font-size:13px;
}

.ticket-summary-card strong{
  display:block;
  margin-top:7px;
  color:#163c36;
  font-size:27px;
}

.ticket-list{
  display:grid;
  gap:14px;
}

.ticket-card{
  padding:20px;
  background:#fff;
  border:1px solid #dce5e2;
  border-radius:18px;
}

.ticket-card-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:15px;
  margin-bottom:16px;
}

.ticket-title{
  display:flex;
  flex-direction:column;
  gap:5px;
}

.ticket-title strong{
  font-size:18px;
}

.ticket-title small{
  color:#74827e;
}

.ticket-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 11px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}

.ticket-status.open{
  background:#fff1df;
  color:#94570d;
}

.ticket-status.in_progress{
  background:#e9f1ff;
  color:#285899;
}

.ticket-status.resolved{
  background:#e8f7ef;
  color:#176148;
}

.ticket-status.closed{
  background:#eef1f0;
  color:#5f6b68;
}

.ticket-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px 22px;
}

.ticket-field{
  padding:10px 0;
  border-bottom:1px solid #eef2f0;
}

.ticket-field span{
  display:block;
  margin-bottom:4px;
  color:#74827e;
  font-size:12px;
}

.ticket-field strong,
.ticket-field div{
  word-break:break-word;
}

.ticket-message-box{
  margin-top:14px;
  padding:14px;
  border-radius:13px;
  background:#f5f8f7;
  line-height:1.9;
}

.ticket-match{
  margin-top:14px;
  padding:13px 14px;
  border-radius:13px;
}

.ticket-match.found{
  background:#edf7f3;
  color:#176148;
}

.ticket-match.not-found{
  background:#fff3ef;
  color:#a04a35;
}

.ticket-actions{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:16px;
}

.ticket-actions button{
  min-height:42px;
  padding:0 14px;
  border:1px solid #d7e1de;
  border-radius:12px;
  background:#f6f9f8;
  color:#183f39;
  font:inherit;
  font-weight:700;
  cursor:pointer;
}

.ticket-actions button.primary-ticket{
  border-color:#214c45;
  background:#214c45;
  color:#fff;
}

.ticket-resolution{
  margin-top:14px;
}

.ticket-resolution textarea{
  box-sizing:border-box;
  width:100%;
  min-height:90px;
  padding:12px 14px;
  border:1px solid #d9e3e0;
  border-radius:13px;
  resize:vertical;
  font:inherit;
}

.ticket-empty{
  padding:35px;
  text-align:center;
  border:1px dashed #ccd8d4;
  border-radius:18px;
  background:#fff;
  color:#74827e;
}

.ticket-count-badge{
  display:inline-flex;
  min-width:23px;
  height:23px;
  padding:0 6px;
  margin-inline-start:7px;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:#a33b30;
  color:white;
  font-size:11px;
  font-weight:800;
}

.ticket-count-badge.hidden{
  display:none;
}

@media(max-width:800px){
  .tickets-toolbar,
  .ticket-summary,
  .ticket-grid{
    grid-template-columns:1fr;
  }
}