:root{
  --mab-table-line:#dbe4ff;
  --mab-table-head:#f8fbff;
  --mab-table-zebra:#f8fbff;
  --mab-table-text:#0f172a;
  --mab-table-muted:#64748b;
}

.shared-table-wrap,
.table-wrap{
  width:100%;
  max-width:100%;
  max-height:560px;
  overflow-x:hidden;
  overflow-y:auto;
  border:1px solid var(--mab-table-line);
  border-radius:12px;
  -webkit-overflow-scrolling:touch;
  background:#fff;
}

.shared-panel,
.panel{
  border:1px solid #e5e7eb;
  border-radius:18px;
  padding:16px;
  background:#fff;
  min-width:0;
  max-width:100%;
  overflow:hidden;
  font-family:Arial,sans-serif;
}

.shared-panel h2,
.panel h2{
  margin:0 0 12px;
  font-size:20px;
  color:var(--mab-table-text);
}

.shared-panel-head,
.panel-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:12px;
}

.shared-panel-head .sub,
.panel-head .sub{
  color:var(--mab-table-muted);
  font-size:13px;
}

.shared-table-filters,
.finance-filters{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr)) auto;
  gap:10px;
  margin-bottom:12px;
}

.shared-table-filters input,
.shared-table-filters select,
.finance-filters input,
.finance-filters select{
  width:100%;
  padding:11px 12px;
  border:1px solid #cbd5e1;
  border-radius:12px;
  font-size:15px;
  font-family:Arial,sans-serif;
  background:#fff;
}

.shared-pagination,
.admin-pagination{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:12px;
}

.shared-pagination-info,
.admin-pagination-info{
  font-size:13px;
  color:var(--mab-table-muted);
}

.shared-table,
.table-wrap table{
  width:100%;
  min-width:0;
  border-collapse:separate;
  border-spacing:0;
  table-layout:fixed;
  font-family:Arial,sans-serif;
}

.shared-table th,
.shared-table td,
.table-wrap th,
.table-wrap td{
  padding:10px 12px;
  border-bottom:1px solid var(--mab-table-line);
  border-right:1px solid var(--mab-table-line);
  vertical-align:top;
  font-size:14px;
  color:var(--mab-table-text);
  background:#fff;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.shared-table th:first-child,
.shared-table td:first-child,
.table-wrap th:first-child,
.table-wrap td:first-child{
  border-left:1px solid var(--mab-table-line);
}

.shared-table th:last-child,
.shared-table td:last-child,
.table-wrap th:last-child,
.table-wrap td:last-child{
  border-right:0;
}

.shared-table tbody tr:last-child td,
.table-wrap tbody tr:last-child td{
  border-bottom:0;
}

.shared-table th,
.table-wrap th{
  position:sticky;
  top:0;
  background:var(--mab-table-head);
  z-index:1;
  text-align:center;
  font-weight:400;
  color:#111827;
}

.shared-table td,
.table-wrap td{
  text-align:left;
}

.shared-table tbody tr:nth-child(even) td,
.table-wrap tbody tr:nth-child(even) td{
  background:var(--mab-table-zebra);
}

.shared-table th[data-col-key],
.table-wrap th[data-col-key]{
  position:sticky;
}

.shared-table .th-inner,
.table-wrap .th-inner{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:22px;
  padding-right:8px;
}

.shared-table .th-label,
.table-wrap .th-label{
  display:block;
  width:100%;
  text-align:center;
}

.shared-table .col-resizer,
.table-wrap .col-resizer{
  position:absolute;
  top:-10px;
  right:-8px;
  width:16px;
  height:calc(100% + 20px);
  cursor:col-resize;
  touch-action:none;
  z-index:3;
}

.shared-table .col-resizer::before,
.table-wrap .col-resizer::before{
  content:"";
  position:absolute;
  left:7px;
  top:12px;
  bottom:12px;
  width:2px;
  border-radius:999px;
  background:rgba(59,94,219,.15);
}

.shared-table.is-dragging-col,
.shared-table th.is-dragging-col{
  opacity:.55;
}

.shared-table th.is-drop-target,
.table-wrap th.is-drop-target{
  box-shadow:inset 0 0 0 2px rgba(59,94,219,.28);
}

body.is-resizing{
  cursor:col-resize;
  user-select:none;
}

.shared-table td.amount-cell,
.table-wrap td.amount-cell{
  font-weight:700;
  white-space:nowrap;
}

.shared-table td.amount-cell.incoming,
.shared-table td.amount-positive,
.table-wrap td.amount-cell.incoming,
.table-wrap td.amount-positive{
  color:var(--ok,#117a37);
}

.shared-table td.amount-cell.outgoing,
.shared-table td.amount-negative,
.table-wrap td.amount-cell.outgoing,
.table-wrap td.amount-negative{
  color:var(--danger,#b42318);
}

.shared-table td.date-cell,
.table-wrap td.date-cell{
  font-size:11px;
  line-height:1.25;
}

.shared-table td.desc-cell,
.table-wrap td.desc-cell{
  font-size:11px;
}

.shared-table td.type-cell,
.shared-table td.status-cell,
.table-wrap td.type-cell,
.table-wrap td.status-cell{
  white-space:normal;
}

@media (hover:none),(pointer:coarse){
  .shared-table .col-resizer,
  .table-wrap .col-resizer{
    display:none;
  }
}

@media (max-width:980px){
  .shared-table-filters,
  .finance-filters{
    grid-template-columns:1fr;
  }

  .shared-table-wrap,
  .table-wrap{
    overflow-x:auto;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-x pan-y;
  }

  .shared-table,
  .table-wrap table{
    width:max-content;
    min-width:960px;
  }
}

/* Переименование столбцов: карандаш в заголовке (показ по ховеру) */
.shared-table .th-inner,
.table-wrap .th-inner{padding-right:26px}
.shared-table .th-rename,
.table-wrap .th-rename{
  position:absolute;
  top:50%;
  right:8px;
  transform:translateY(-50%);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  padding:0;
  border:0;
  border-radius:6px;
  background:rgba(59,94,219,.10);
  color:#3b5edb;
  cursor:pointer;
  opacity:0;
  transition:opacity .12s ease,background .12s ease;
  z-index:4;
}
.shared-table .th-rename svg,
.table-wrap .th-rename svg{width:13px;height:13px;display:block}
.shared-table th:hover .th-rename,
.table-wrap th:hover .th-rename,
.shared-table .th-rename:focus-visible,
.table-wrap .th-rename:focus-visible{opacity:1}
.shared-table .th-rename:hover,
.table-wrap .th-rename:hover{background:rgba(59,94,219,.22)}
@media (max-width:860px){
  .shared-table .th-rename,
  .table-wrap .th-rename{display:none}
  .shared-table .th-inner,
  .table-wrap .th-inner{padding-right:8px}
}
