/*
 * Shared design system for metamug.com/util/ developer tools.
 * One file, linked (not inlined) so every tool looks and feels the same
 * and updates in one place. Pairs with /assets/js/tools.js.
 */

:root {
  --tool-accent: #3755be;
  --tool-accent-dark: #2a4399;
  --tool-accent-soft: #eef1fb;

  --tool-ink: #212529;
  --tool-muted: #6c757d;
  --tool-border: #dde1e7;
  --tool-bg: #ffffff;
  --tool-bg-subtle: #f7f8fa;

  --tool-panel-bg: #1e1e1e;
  --tool-panel-bg-alt: #252526;
  --tool-panel-text: #d4d4d4;
  --tool-panel-border: #333844;

  --tool-success-bg: #e7f5ec;
  --tool-success-text: #146c43;
  --tool-success-border: #bfe3cd;

  --tool-error-bg: #fdecea;
  --tool-error-text: #a52019;
  --tool-error-border: #f5c2c0;

  --tool-warn-bg: #fff8e6;
  --tool-warn-text: #8a6100;
  --tool-warn-border: #f5e2a0;

  --tool-radius: 8px;
  --tool-radius-sm: 5px;

  --tool-font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

  /* JSON / code token colors, tuned for --tool-panel-bg (VS Code Dark+ inspired) */
  --tok-key: #9cdcfe;
  --tok-string: #ce9178;
  --tok-number: #b5cea8;
  --tok-boolean: #569cd6;
  --tok-null: #808080;
  --tok-punct: #d4d4d4;
}

/* ---------- layout ---------- */

.tool-page-header {
  margin-bottom: 2rem;
}

.tool-page-header h1 {
  margin-bottom: .4rem;
}

.tool-page-header p {
  color: var(--tool-muted);
  font-size: 1.02rem;
  max-width: 60ch;
}

.tool-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: .6rem;
}

.tool-field-label {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--tool-muted);
  margin-bottom: .4rem;
}

/* ---------- inputs ---------- */

.tool-input,
.tool-textarea,
textarea.tool-textarea,
input.tool-input {
  width: 100%;
  padding: 0.6em 0.8em;
  border: 1px solid var(--tool-border);
  border-radius: var(--tool-radius-sm);
  font-family: var(--tool-font-mono);
  font-size: 0.95rem;
  color: var(--tool-ink);
  background-color: var(--tool-bg);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.tool-textarea {
  min-height: 220px;
  line-height: 1.55;
  resize: vertical;
}

.tool-input:focus,
.tool-textarea:focus {
  outline: none;
  border-color: var(--tool-accent);
  box-shadow: 0 0 0 3px var(--tool-accent-soft);
}

/* ---------- panels ---------- */

.tool-panel {
  border: 1px solid var(--tool-border);
  border-radius: var(--tool-radius);
  background: var(--tool-bg);
  padding: 18px 20px;
  margin-bottom: 20px;
}

.tool-panel-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: .75rem;
}

/* dark code / output surface, used for JSON, generated code, hashes, etc. */
.tool-code-panel {
  width: 100%;
  min-height: 220px;
  margin: 0;
  padding: 0.9em 1em;
  border: 1px solid var(--tool-panel-border);
  border-radius: var(--tool-radius);
  background-color: var(--tool-panel-bg);
  color: var(--tool-panel-text);
  font-family: var(--tool-font-mono);
  font-size: 0.88rem;
  line-height: 1.6;
  overflow: auto;
  white-space: pre;
  word-break: normal;
}

.tool-code-panel.wrap {
  white-space: pre-wrap;
  word-break: normal;
  overflow-wrap: anywhere;
}

/* JSON syntax token colors, used by ToolsCommon.highlightJson() output */
.tok-key { color: var(--tok-key); }
.tok-string { color: var(--tok-string); }
.tok-number { color: var(--tok-number); }
.tok-boolean { color: var(--tok-boolean); }
.tok-null { color: var(--tok-null); }
.tok-punct { color: var(--tok-punct); }

/* ---------- status banners ---------- */

.status-banner {
  border-radius: var(--tool-radius-sm);
  padding: 10px 14px;
  margin: 10px 0;
  font-size: .9rem;
  border: 1px solid transparent;
}

.status-error {
  background-color: var(--tool-error-bg);
  color: var(--tool-error-text);
  border-color: var(--tool-error-border);
}

.status-ok {
  background-color: var(--tool-success-bg);
  color: var(--tool-success-text);
  border-color: var(--tool-success-border);
}

.status-warn {
  background-color: var(--tool-warn-bg);
  color: var(--tool-warn-text);
  border-color: var(--tool-warn-border);
}

/* ---------- badges ---------- */

.tool-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.5;
}

.tool-badge-success { background-color: var(--tool-success-bg); color: var(--tool-success-text); }
.tool-badge-error   { background-color: var(--tool-error-bg);   color: var(--tool-error-text); }
.tool-badge-warn    { background-color: var(--tool-warn-bg);    color: var(--tool-warn-text); }
.tool-badge-neutral { background-color: var(--tool-bg-subtle);  color: var(--tool-muted); border: 1px solid var(--tool-border); }
.tool-badge-accent  { background-color: var(--tool-accent-soft); color: var(--tool-accent-dark); }

/* ---------- buttons ---------- */

.tool-page .btn-outline-secondary {
  border-color: var(--tool-border);
  color: var(--tool-ink);
}

.tool-page .btn-outline-secondary:hover {
  background-color: var(--tool-bg-subtle);
  border-color: var(--tool-border);
  color: var(--tool-ink);
}

.tool-page .btn-outline-secondary.active,
.tool-page .btn-group .btn.active,
.tool-page button.btn.active {
  background-color: var(--tool-accent) !important;
  border-color: var(--tool-accent) !important;
  color: #fff !important;
}

.tool-page .btn-primary {
  background-color: var(--tool-accent);
  border-color: var(--tool-accent);
}

.tool-page .btn-primary:hover {
  background-color: var(--tool-accent-dark);
  border-color: var(--tool-accent-dark);
}

.tool-copy-btn {
  flex: 0 0 auto;
}

/* ---------- tables ---------- */

.tool-table {
  width: 100%;
  table-layout: auto;
  border-collapse: collapse;
}

/* Opt in explicitly (e.g. when <th> cells declare their own widths) */
.tool-table.fixed {
  table-layout: fixed;
}

.tool-table th,
.tool-table td {
  padding: 10px 12px;
  vertical-align: top;
  border: 1px solid var(--tool-border);
  word-break: break-word;
  overflow-wrap: anywhere;
}

.tool-table th {
  background-color: var(--tool-bg-subtle);
  text-align: left;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--tool-muted);
}

.tool-table td.mono,
.tool-table td.field-value {
  font-family: var(--tool-font-mono);
  font-size: .88rem;
}

.tool-table td.label,
.tool-table td.field-label {
  font-weight: 600;
  white-space: nowrap;
  width: 1%;
}

/* ---------- misc ---------- */

.tool-card {
  border: 1px solid var(--tool-border);
  border-radius: var(--tool-radius);
  padding: 16px 20px;
  margin-bottom: 16px;
}

.tool-swatch {
  border-radius: var(--tool-radius);
  border: 1px solid var(--tool-border);
}

.tool-section-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 1.75rem 0 .75rem;
}

.tool-footer {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--tool-border);
}

.tool-footer h3 {
  font-size: .95rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--tool-muted);
  margin-bottom: .6rem;
}

.tool-footer ul {
  margin: 0;
  padding-left: 1.1rem;
}

@media (max-width: 767px) {
  .tool-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
}