/* public/assets/ui.css */
/* Shared UI primitives: consistent, minimal. */

:root{
  --bg: #f8f9fb;
  --text: #111827;
  --muted: #6b7280;

  --card-bg: #ffffff;
  --border: #e5e7eb;

  --primary: #111827;
  --primary-hover: #0b1220;

  --link: #2563eb;

  --ok-bg: #dcfce7;
  --ok-border: #bbf7d0;
  --ok-text: #166534;

  --err-bg: #fee2e2;
  --err-border: #fecaca;
  --err-text: #991b1b;

  --banner-bg: #f3f4f6;
  --banner-border: #e5e7eb;
  --banner-text: #374151;
}

* { box-sizing: border-box; }

body{
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

a{
  color: var(--link);
  text-decoration: none;
}
a:hover{ text-decoration: underline; }

.muted{ color: var(--muted); }

/* Buttons */
.btn,
button.btn{
  display: inline-block;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover,
button.btn:hover{ background: var(--primary-hover); }

.btn-secondary,
button.btn-secondary{
  display: inline-block;
  background: #ffffff;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 16px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}
.btn-secondary:hover,
button.btn-secondary:hover{ background: #f3f4f6; }

.btn:disabled,
button.btn:disabled,
.btn-secondary:disabled,
button.btn-secondary:disabled{
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-disabled{
  display: inline-block;
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 700;
  border: 1px solid var(--border);
  background: #ffffff;
  color: var(--muted);
  user-select: none;
}

/* Banners */
.banner{
  margin: 12px 0;
  padding: 12px;
  border-radius: 8px;
  background: var(--banner-bg);
  border: 1px solid var(--banner-border);
  color: var(--banner-text);
}

.banner-ok{
  border: 1px solid var(--ok-border);
  background: var(--ok-bg);
  color: var(--ok-text);
  border-radius: 8px;
  padding: 12px;
  margin: 12px 0;
  white-space: pre-wrap;
}

.banner-err{
  border: 1px solid var(--err-border);
  background: var(--err-bg);
  color: var(--err-text);
  border-radius: 8px;
  padding: 12px;
  margin: 12px 0;
  white-space: pre-wrap;
}

/* Footer */
footer{
  margin-top: 18px;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
}
footer a{
  color: var(--muted);
  text-decoration: none;
}
footer a:hover{ text-decoration: underline; }