/* ===== Layout ===== */
.history-wrap{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 14px 40px;
}

.history-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin: 16px 0 12px;
  flex-wrap: wrap;
}

.h-title{
  margin: 0;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 900;

  color: rgba(255,255,255,0.92);            /* светлый текст */
  text-shadow: 0 2px 16px rgba(0,0,0,0.45);  /* читаемость на тёмном фоне */
}
.history-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* ===== Card ===== */
.card{
  border: 1px solid rgba(15,23,42,0.14);
  border-radius: 14px;
  padding: 12px;

  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  box-shadow:
    0 10px 30px rgba(2,6,23,0.10),
    0 1px 0 rgba(255,255,255,0.6) inset;
}

/* ===== Toolbar ===== */
.history-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin: 4px 2px 12px;
}

.history-search{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

/* ✅ Лейбл "Search" — делаем читабельным */
.history-search label,
.history-search .label{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(15,23,42,0.70);
}

/* ===== Search input ===== */
.history-search .input{
  min-width: 320px;
  max-width: 520px;

  font-size: 14px;
  font-weight: 700;
  color: rgba(15,23,42,0.95);

  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(15,23,42,0.18);
  caret-color: rgba(15,23,42,0.95);
}

.history-search .input::placeholder{
  color: rgba(15,23,42,0.62); /* темнее, чтобы не "терялись слова" */
  opacity: 1;                 /* важно для Safari */
  font-weight: 600;
}

.history-search .input:focus{
  outline: none;
  border-color: rgba(56,189,248,0.55);
  box-shadow: 0 0 0 3px rgba(56,189,248,0.18);
  background: rgba(255,255,255,0.95);
}

/* Safari/Chromium autofill */
.history-search .input:-webkit-autofill{
  -webkit-text-fill-color: rgba(15,23,42,0.95);
  box-shadow: 0 0 0px 1000px rgba(255,255,255,0.95) inset;
  transition: background-color 9999s ease-in-out 0s;
}

/* ===== Pager ===== */
.history-pager{
  display:flex;
  align-items:center;
  gap:10px;
}

@media (max-width: 520px){
  .history-search .input{ min-width: 220px; }
}

/* ===== Table ===== */
.table-wrap{ overflow:auto; }

.hist-table{
  width:100%;
  border-collapse: collapse;
  min-width: 720px;
}

.hist-table th,
.hist-table td{
  padding: 10px 10px;
  border-bottom: 1px solid rgba(15,23,42,0.08);
  text-align: left;
  vertical-align: top;
}

.hist-table thead th{
  position: sticky;
  top: 0;
  z-index: 1;
}

.hist-table th{
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(15,23,42,0.72);
  background: rgba(2,6,23,0.04);
  border-bottom: 1px solid rgba(15,23,42,0.12);
}

.hist-table td{
  color: rgba(15,23,42,0.90);
  font-size: 14px;
  line-height: 1.35;
}

.hist-table tbody tr:hover td{
  background: rgba(2,6,23,0.02);
}

/* TOTAL */
.hist-table td:nth-child(3){
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

/* UPDATED */
.hist-table td:nth-child(4){
  color: rgba(15,23,42,0.62);
  font-size: 13px;
}

.col-actions{ width: 240px; }

.row-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.row-actions .btn{
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.row-actions .btn.ghost{
  background: rgba(2,6,23,0.04);
  border: 1px solid rgba(15,23,42,0.14);
}

.row-actions .btn.ghost:hover{
  background: rgba(2,6,23,0.07);
}

/* ===== Pills ===== */
.pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,0.18);
  background: rgba(2,6,23,0.03);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: rgba(15,23,42,0.92);
}

.pill .tpl-tag{
  display:inline-flex;
  align-items:center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  border: 1px solid rgba(56,189,248,0.30);
  background: rgba(56,189,248,0.12);
  color: rgba(2,6,23,0.92);
}

/* ===== Muted text ===== */
.muted{
  color: rgba(15,23,42,0.60);
  font-size: 13px;
}

/* ===== Mobile: table -> cards ===== */
@media (max-width: 700px){

  /* убираем горизонтальный скролл */
  .table-wrap{ overflow: visible; }
  .hist-table{ min-width: 0; }

  /* прячем заголовки таблицы */
  .hist-table thead{ display:none; }

  /* каждая строка = карточка */
  .hist-table,
  .hist-table tbody,
  .hist-table tr,
  .hist-table td{
    display:block;
    width:100%;
  }

  .hist-table tbody tr{
    border: 1px solid rgba(15,23,42,0.14);
    border-radius: 14px;
    padding: 10px 12px;
    margin: 10px 0;
    background: rgba(255,255,255,0.92);
    box-shadow: 0 10px 30px rgba(2,6,23,0.10);
  }

  .hist-table td{
    border: 0;
    padding: 8px 0;
  }

  /* подпись слева из data-label */
  .hist-table td::before{
    content: attr(data-label);
    display:block;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(15,23,42,0.55);
    margin-bottom: 3px;
  }

  /* Actions без подписи */
  .hist-table td[data-label="Actions"]::before{
    display:none;
  }

  .row-actions{
    gap:10px;
  }

  .row-actions .btn{
    width:100%;
    justify-content:center;
  }
}