/* Base shared styles for TextParsingTools - simple light/dark theme */
:root {
  /* Light theme defaults */
  --bg: #ffffff;
  --fg: #111827; /* gray-900 */
  --muted: #6b7280; /* gray-500 */
  --accent: #3a86ff;
  --border: #e5e7eb; /* gray-200 */
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0c10;
    --fg: #e5e7eb;
    --muted: #9ca3af;
    --accent: #3a86ff;
    --border: #2a2a2a;
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.45;
  padding: 16px;
}

header { margin-bottom: 12px; }
h1 { font-size: 1.25rem; margin: 0 0 4px; font-weight: 600; color: var(--fg); }
p.desc { margin: 0; color: var(--muted); font-size: 0.95rem; }

.controls { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; align-items: center; }
button {
  appearance: none;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--fg);
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
}
button:hover { filter: brightness(0.98); }
button.primary { background: var(--accent); color: white; border-color: transparent; }

.row { display: grid; gap: 8px; }
textarea, pre {
  width: 100%;
  min-height: 160px;
  background: transparent;
  color: var(--fg);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 13px;
  border-radius: 8px;
  padding: 10px;
  border: 1px solid var(--border);
}
textarea { resize: vertical; tab-size: 4; white-space: pre; }
pre { white-space: pre-wrap; }

/* Inputs: sane default height and font; allow pages to opt into monospace via a .mono class */
input[type="text"], input[type="search"] {
  width: 100%;
  min-height: 36px;
  height: 36px;
  background: transparent;
  color: var(--fg);
  font-family: inherit;
  font-size: 14px;
  border-radius: 8px;
  padding: 6px 10px;
  border: 1px solid var(--border);
}

.meta { display: flex; gap: 12px; align-items: center; color: var(--muted); font-size: 0.9rem; }
.spacer { flex: 1 1 auto; }
.note { color: var(--muted); font-size: 0.85rem; }
.badge { font-size: 0.8rem; padding: 2px 6px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); }

label { display: inline-flex; align-items: center; gap: 6px; color: var(--fg); }
input[type="checkbox"] { accent-color: var(--accent); }

/* Larger title on tool pages only */
.tool h1 { font-size: 1.6rem; }

/* Explicit theme override using data-theme attribute */
:root[data-theme="light"] {
  --bg: #ffffff;
  --fg: #111827;
  --muted: #6b7280;
  --accent: #3a86ff;
  --border: #e5e7eb;
}

:root[data-theme="dark"] {
  --bg: #0b0c10;
  --fg: #e5e7eb;
  --muted: #9ca3af;
  --accent: #3a86ff;
  --border: #2a2a2a;
}

/* Sort arrows UI for tables made sortable via TPT.tables */
table[data-sortable] th .tpt-sort-arrows { display: inline-flex; gap: 2px; margin-left: 6px; opacity: 0.6; vertical-align: middle; }
table[data-sortable] th .tpt-sort-arrows .tpt-arrow { font-size: 10px; line-height: 1; cursor: pointer; user-select: none; color: var(--muted); }
table[data-sortable] th .tpt-sort-arrows .tpt-arrow.active { color: var(--accent); opacity: 1; }
table[data-sortable] th[aria-sort="ascending"] .tpt-sort-arrows,
table[data-sortable] th[aria-sort="descending"] .tpt-sort-arrows { opacity: 1; }