/*
 * Leftcoast Smart Links admin UI.
 * Scoped to plugin classes so YOURLS core styling remains untouched.
 */

.leftcoast-smart-links {
  display: grid;
  gap: 18px;
}

.leftcoast-smart-header p,
.leftcoast-smart-muted {
  color: var(--text-dim, #777);
}

.leftcoast-smart-panel {
  padding: 16px;
  background: var(--bg-soft, #181818);
  border: 1px solid var(--border, #333);
  border-radius: var(--radius, 8px);
}

.leftcoast-smart-panel h3 {
  margin: 0 0 12px;
}

.leftcoast-smart-grid,
.leftcoast-smart-mini-form,
.leftcoast-smart-reuse-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-end;
}

.leftcoast-smart-grid label,
.leftcoast-smart-mini-form label {
  display: grid;
  gap: 4px;
}

.leftcoast-smart-wide {
  flex: 1 1 100%;
}

.leftcoast-smart-check {
  display: inline-flex !important;
  grid-auto-flow: column;
  align-items: center;
  gap: 6px;
}

.leftcoast-smart-keyword {
  color: var(--accent-strong, #58c4a3) !important;
  font-family: var(--font-mono, monospace);
  font-weight: 700;
}

.leftcoast-smart-table {
  width: 100%;
  border-collapse: collapse;
}

.leftcoast-smart-table th,
.leftcoast-smart-table td {
  vertical-align: top;
  padding: 10px;
  border-bottom: 1px solid var(--border, #333);
}

.leftcoast-smart-table th {
  color: var(--text, #eee);
  background: var(--bg-header, #111);
  text-align: left;
}

.leftcoast-smart-table input[type="text"],
.leftcoast-smart-table input[type="url"],
.leftcoast-smart-table input[type="datetime-local"],
.leftcoast-smart-table select,
.leftcoast-smart-table textarea,
.leftcoast-smart-grid input,
.leftcoast-smart-grid select,
.leftcoast-smart-grid textarea {
  max-width: 100%;
  color: var(--text, #eee);
  background: var(--bg-header, #111);
  border: 1px solid var(--border, #333);
  border-radius: var(--radius-small, 4px);
}

.leftcoast-smart-mini-form {
  margin: 0 0 8px;
}

.leftcoast-smart-mini-form input[type="url"],
.leftcoast-smart-mini-form textarea {
  width: min(100%, 360px);
}

.leftcoast-smart-active {
  margin-bottom: 8px;
  padding: 8px;
  background: var(--accent-soft, rgba(68, 170, 153, 0.14));
  border: 1px solid var(--accent, #4a9);
  border-radius: var(--radius-small, 4px);
}

.leftcoast-smart-edit-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
  align-items: end;
  margin-top: 8px;
  padding: 10px;
  background: var(--bg-soft, #181818);
  border: 1px solid var(--border, #333);
  border-radius: var(--radius-small, 4px);
}

.leftcoast-smart-edit-controls > strong,
.leftcoast-smart-edit-status {
  align-self: center;
}

.leftcoast-smart-edit-status {
  color: var(--text-dim, #999);
}

.leftcoast-smart-edit-controls label {
  display: grid;
  gap: 4px;
}

.leftcoast-smart-edit-controls .leftcoast-smart-check {
  display: inline-flex !important;
  align-self: center;
}

.leftcoast-smart-edit-url {
  grid-column: span 2;
}

.leftcoast-smart-edit-controls input[type="url"],
.leftcoast-smart-edit-controls input[type="datetime-local"],
.leftcoast-smart-edit-controls select {
  width: 100%;
  max-width: 100%;
  color: var(--text, #eee);
  background: var(--bg-header, #111);
  border: 1px solid var(--border, #333);
  border-radius: var(--radius-small, 4px);
}

.leftcoast-smart-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  margin: 2px 4px 2px 0;
  padding: 2px 7px;
  color: var(--text, #eee);
  background: var(--bg-header, #111);
  border: 1px solid var(--border, #333);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.leftcoast-smart-badge.is-active {
  color: #071f18;
  background: var(--accent-strong, #58c4a3);
  border-color: var(--accent-strong, #58c4a3);
}

.leftcoast-smart-dashboard-badges {
  display: block;
  margin-top: 6px;
}

.leftcoast-smart-history {
  display: grid;
  gap: 8px;
  max-width: 260px;
}

.leftcoast-smart-history-row {
  padding: 8px;
  background: var(--bg-card, #222);
  border: 1px solid var(--border, #333);
  border-radius: var(--radius-small, 4px);
}

.leftcoast-smart-reuse-form {
  margin-top: 6px;
}

@media (max-width: 860px) {
  .leftcoast-smart-edit-url {
    grid-column: auto;
  }

  .leftcoast-smart-table,
  .leftcoast-smart-table thead,
  .leftcoast-smart-table tbody,
  .leftcoast-smart-table tr,
  .leftcoast-smart-table th,
  .leftcoast-smart-table td {
    display: block;
  }

  .leftcoast-smart-table thead {
    display: none;
  }

  .leftcoast-smart-table tr {
    margin-bottom: 12px;
    border: 1px solid var(--border, #333);
    border-radius: var(--radius-small, 4px);
  }
}