.tl-wrap { max-width: 100%; margin: 0 auto; padding: 0 8px; }
.tl-controls { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 10px; align-items: center; }
.tl-controls input, .tl-controls select, .tl-controls button { padding: 8px; font-size: 14px; width: 100%; }
.tl-pin-filter { display: flex; gap: 6px; align-items: center; }
.tl-pin-label { font-size: 12px; opacity: 0.8; }
#tl-map { height: 420px; border: 1px solid #ddd; border-radius: 8px; margin: 12px 0; }
.tl-help { font-size: 13px; opacity: 0.85; margin: 6px 0 10px; }

.tl-form { border: 1px solid #ddd; border-radius: 8px; padding: 12px; margin: 12px 0; }
.tl-form .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tl-form textarea { width: 100%; min-height: 90px; margin-top: 8px; padding: 8px; }
.tl-form-actions { display: flex; gap: 8px; margin-top: 8px; }

.tl-table-wrap { overflow-x: auto; }
.tl-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.tl-table th, .tl-table td { border: 1px solid #eee; padding: 8px; vertical-align: top; word-break: break-word; white-space: normal; }
.tl-table th { background: #f7f7f7; text-align: left; }

.tl-pin-swatch { width: 14px; height: 14px; display: inline-block; border: 1px solid #333; vertical-align: middle; margin-right: 6px; }

.tl-actions button { margin-right: 6px; padding: 6px 8px; font-size: 12px; }
button.danger { background: #b00020; color: #fff; border: none; }
button.secondary { background: #eee; border: 1px solid #ddd; }

/* Import panel */
.tl-import-panel { border: 1px solid #ddd; border-radius: 8px; padding: 12px; margin: 10px 0 12px; background: #fff; }
.tl-import-header { display:flex; justify-content: space-between; align-items:center; gap: 10px; }
.tl-import-panel textarea { width:100%; min-height: 160px; padding: 10px; margin: 8px 0; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 12px; }
.tl-import-actions { display:flex; justify-content: space-between; align-items:center; gap: 10px; flex-wrap: wrap; }
.tl-import-result { margin-top: 10px; padding: 10px; background: #f7f7f7; border: 1px solid #eee; border-radius: 6px; overflow:auto; max-height: 240px; }


@media (max-width: 1024px){
  .tl-table th, .tl-table td { font-size: 13px; padding: 6px; }
  .tl-controls input, .tl-controls select, .tl-controls button { font-size: 13px; padding: 7px; }
}
@media (max-width: 768px){
  .tl-controls { grid-template-columns: repeat(2, 1fr); }
  #tl-map { height: 320px; }
  .tl-table th, .tl-table td { font-size: 12px; padding: 5px; }
}
@media (max-width: 480px){
  .tl-controls { grid-template-columns: 1fr; }
  .tl-table th, .tl-table td { font-size: 11px; padding: 4px; }
}

/* Sortable table headers */

.tl-table thead th.sortable {
  cursor: pointer;
  user-select: none;
  white-space: normal; /* allow wrap on small screens */
  position: relative;
  padding-right: 18px; /* room for sort icon */
}
.tl-table thead th.sortable::after{
  content: "↕";
  font-size: 0.8em;
  opacity: 0.5;
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
}
.tl-table thead th.sortable.asc::after{ content: "↑"; opacity: 0.85; }
.tl-table thead th.sortable.desc::after{ content: "↓"; opacity: 0.85; }