/* ===== TablePress id=1 — UI skin like your reference ===== */
.tablepress-id-1{
  border: 1px solid #e9eef5;
  border-radius: 14px;
  overflow: hidden;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 16px;
  color: #0f172a; /* slate-900 */
}
.tablepress-id-1 th, .tablepress-id-1 td{
  padding: 16px 18px;
  vertical-align: middle;
}
.tablepress-id-1 thead th{
  background:#e8f2fb;            /* soft blue header */
  color:#0f172a;
  font-weight: 700;
  border-bottom: 1px solid #d7e3f1;
}
.tablepress-id-1 tbody tr{
  background:#fff;
}
.tablepress-id-1 tbody tr:nth-child(even){
  background:#f8fafc;            /* very light zebra */
}
.tablepress-id-1 tbody tr:hover{
  background:#f1f5f9;            /* row hover */
}

/* Pill badges (used for formations) */
.tp-badge{
  display:inline-block;
  padding:8px 14px;
  border-radius:999px;
  font-weight:700;
  line-height:1;
  font-size: 14px;
  white-space: nowrap;
}
.tp-badge.blue{ background:#e6efff; color:#1d4ed8; }   /* Defensive */
.tp-badge.red{  background:#ffe6e6; color:#dc2626; }   /* Attacking */

/* “General” tag style (if you add it later) */
.tp-chip{
  display:inline-block;
  padding:8px 14px;
  border:2px solid #111827;
  border-radius:999px;
  font-weight:700;
  line-height:1;
  font-size:14px;
}

/* Views with eye icon */
.tp-views{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:600;
  color:#334155;
}
.tp-views::before{
  content:"";
  width:18px; height:18px;
  display:inline-block;
  background-repeat:no-repeat;
  background-position:center;
  background-size:18px 18px;
  /* eye icon (SVG) */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23334155' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}

/* Copy pill button for Code column */
.tp-copy{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 16px;
  border:2px solid #111827;
  border-radius:999px;
  font-weight:800;
  background:#fff;
  cursor:pointer;
  user-select:none;
  transition:transform .06s ease, box-shadow .06s ease, background .2s;
}
.tp-copy:hover{ box-shadow:0 1px 0 0 #111827; }
.tp-copy:active{ transform:translateY(1px); }
.tp-copy .tp-icon{
  width:18px; height:18px; display:inline-block;
  background-repeat:no-repeat; background-position:center; background-size:18px 18px;
  /* copy icon */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23111827' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2' ry='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E");
}

/* Small success toast */
.tp-toast{
  position: fixed;
  left: 50%; transform: translateX(-50%);
  bottom: 24px;
  background:#0ea5e9;
  color:#fff;
  padding:10px 14px;
  border-radius:10px;
  font-weight:700;
  box-shadow:0 6px 18px rgba(2,132,199,.35);
  z-index: 9999;
  display:none;
}

/* Make the table horizontally scrollable on mobiles (your Option A) */
@media (max-width: 768px){
  .tablepress-id-1{ display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; white-space:nowrap; }
  .tablepress-id-1 th, .tablepress-id-1 td{ min-width:150px; }

.um input[type=submit].um-button, .um input[type=submit].um-button:focus {
    background:#25C05F !important;
}
}
}

/* ===== Shared styles for TablePress id=1 and id=2 ===== */
.tablepress-id-1,
.tablepress-id-2 {
  border: 1px solid #e9eef5;
  border-radius: 14px;
  overflow: hidden;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 16px;
  color: #0f172a;
}
.tablepress-id-1 th, .tablepress-id-1 td,
.tablepress-id-2 th, .tablepress-id-2 td {
  padding: 16px 18px;
  vertical-align: middle;
}
.tablepress-id-1 thead th,
.tablepress-id-2 thead th {
  background:#e8f2fb;
  color:#0f172a;
  font-weight: 700;
  border-bottom: 1px solid #d7e3f1;
}
.tablepress-id-1 tbody tr,
.tablepress-id-2 tbody tr {
  background:#fff;
}
.tablepress-id-1 tbody tr:nth-child(even),
.tablepress-id-2 tbody tr:nth-child(even) {
  background:#f8fafc;
}
.tablepress-id-1 tbody tr:hover,
.tablepress-id-2 tbody tr:hover {
  background:#f1f5f9;
}

/* Pill badges */
.tp-badge {
  display:inline-block;
  padding:8px 14px;
  border-radius:999px;
  font-weight:700;
  font-size: 14px;
  line-height:1;
  white-space: nowrap;
}
.tp-badge.blue { background:#e6efff; color:#1d4ed8; }
.tp-badge.red  { background:#ffe6e6; color:#dc2626; }

/* Views with eye icon */
.tp-views {
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:600;
  color:#334155;
}
.tp-views::before {
  content:"";
  width:18px; height:18px;
  display:inline-block;
  background-repeat:no-repeat;
  background-position:center;
  background-size:18px 18px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23334155' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}

/* Copy pill button */
.tp-copy {
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 16px;
  border:2px solid #111827;
  border-radius:999px;
  font-weight:800;
  background:#fff;
  cursor:pointer;
  user-select:none;
  transition:transform .06s ease, box-shadow .06s ease, background .2s;
}
.tp-copy:hover { box-shadow:0 1px 0 0 #111827; }
.tp-copy:active { transform:translateY(1px); }
.tp-copy .tp-icon {
  width:18px; height:18px;
  display:inline-block;
  background-repeat:no-repeat; background-position:center; background-size:18px 18px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23111827' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2' ry='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E");
}

/* Toast for copy confirmation */
.tp-toast {
  position: fixed;
  left: 50%; transform: translateX(-50%);
  bottom: 24px;
  background:#0ea5e9;
  color:#fff;
  padding:10px 14px;
  border-radius:10px;
  font-weight:700;
  box-shadow:0 6px 18px rgba(2,132,199,.35);
  z-index: 9999;
  display:none;
}

/* Mobile horizontal scroll */
@media (max-width: 768px){
  .tablepress-id-1,
  .tablepress-id-2 {
    display:block;
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    white-space:nowrap;
  }
  .tablepress-id-1 th, .tablepress-id-1 td,
  .tablepress-id-2 th, .tablepress-id-2 td {
    min-width:150px;
  }
}