/*
 * components.css — Reusable UI component styles: forms, buttons, tables,
 *                  tabs, modals, admin list panels.
 *
 * @copyright  2026 Karl Dyson
 * @license    Apache-2.0
 * @version    1.0.0
 */

/* ---------------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  white-space: nowrap;
  user-select: none;
  text-decoration: none;
}

.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary   { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.btn-primary:hover:not(:disabled) { background: var(--color-primary-dark); border-color: var(--color-primary-dark); }

.btn-danger    { background: var(--color-danger); color: #fff; border-color: var(--color-danger); }
.btn-danger:hover:not(:disabled) { filter: brightness(0.9); }

.btn-secondary { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border); }
.btn-secondary:hover:not(:disabled) { background: var(--color-bg); }

.btn-ghost     { background: transparent; color: var(--color-primary); border-color: transparent; }
.btn-ghost:hover:not(:disabled) { background: var(--color-bg); }

.btn-icon      { padding: 0.35rem 0.55rem; font-size: 1.1rem; line-height: 1; background: transparent; border-color: transparent; }
.btn-icon:hover:not(:disabled) { background: var(--color-bg); }

.btn-sm        { padding: 0.25rem 0.6rem; font-size: 0.8rem; }
.btn-full      { width: 100%; justify-content: center; }

/* ---------------------------------------------------------------------------
   Form fields
   --------------------------------------------------------------------------- */

.field {
  margin-bottom: 1rem;
}

.field label {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  margin-bottom: 0.3rem;
  color: var(--color-text);
}

.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="date"],
.field input[type="number"],
.field select,
.field textarea {
  width: 100%;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 0.9rem;
  background: var(--color-surface);
  color: var(--color-text);
  transition: border-color 0.12s, box-shadow 0.12s;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0,113,227,.15);
}

.field textarea { resize: vertical; min-height: 80px; }

select {
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 0.875rem;
  background: var(--color-surface);
  cursor: pointer;
}

/* ---------------------------------------------------------------------------
   Password strength meter
   --------------------------------------------------------------------------- */

.strength-bar {
  height: 4px;
  background: var(--color-border);
  border-radius: 2px;
  margin-top: 0.35rem;
  overflow: hidden;
}

.strength-bar > div {
  height: 100%;
  width: 0;
  border-radius: 2px;
  transition: width 0.25s, background 0.25s;
}

.strength-bar.s0 > div { width: 0; }
.strength-bar.s1 > div { width: 25%; background: #e53935; }
.strength-bar.s2 > div { width: 50%; background: #fb8c00; }
.strength-bar.s3 > div { width: 75%; background: #43a047; }
.strength-bar.s4 > div { width: 100%; background: #2e7d32; }

.strength-label { font-size: 0.78rem; color: var(--color-text-muted); margin-top: 0.2rem; }

/* ---------------------------------------------------------------------------
   Error / info messages
   --------------------------------------------------------------------------- */

.error-msg {
  color: var(--color-danger);
  font-size: 0.85rem;
  padding: 0.5rem 0.75rem;
  background: #fff5f5;
  border: 1px solid #f5c6cb;
  border-radius: var(--radius);
  margin-bottom: 0.75rem;
}

.info-msg {
  color: #1565c0;
  font-size: 0.85rem;
  padding: 0.5rem 0.75rem;
  background: #e3f2fd;
  border: 1px solid #90caf9;
  border-radius: var(--radius);
  margin-bottom: 0.75rem;
}

/* ---------------------------------------------------------------------------
   Tables
   --------------------------------------------------------------------------- */

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.data-table th,
.data-table td {
  padding: 0.5rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.data-table th {
  font-weight: 600;
  background: var(--color-bg);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.data-table tbody tr:hover { background: #fafafa; }

.data-table td.actions {
  white-space: nowrap;
  text-align: right;
}

/* Inactive rows */
.data-table tr.inactive td { color: var(--color-text-muted); }
.data-table .badge-inactive {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  border-radius: 99px;
  font-size: 0.72rem;
  background: #eee;
  color: #888;
  margin-left: 0.4rem;
}

/* ---------------------------------------------------------------------------
   Tabs (admin panel)
   --------------------------------------------------------------------------- */

.tab-bar {
  display: flex;
  gap: 0.25rem;
  border-bottom: 2px solid var(--color-border);
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}

.tab-btn {
  padding: 0.5rem 1rem;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  background: transparent;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s;
}

.tab-btn:hover   { color: var(--color-text); }
.tab-btn.active  { color: var(--color-primary); border-bottom-color: var(--color-primary); }

.tab-panel { display: block; }

/* ---------------------------------------------------------------------------
   Reference data list (ordered lists with reorder arrows)
   --------------------------------------------------------------------------- */

.ref-list-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.75rem;
}

.ref-list-table {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.ref-list-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--color-border);
  gap: 0.5rem;
}

.ref-list-row:last-child { border-bottom: none; }

.ref-list-name { font-size: 0.9rem; }
.ref-list-name.inactive { color: var(--color-text-muted); text-decoration: line-through; }

.ref-list-actions {
  display: flex;
  gap: 0.2rem;
  align-items: center;
}

/* ---------------------------------------------------------------------------
   Modal dialog (confirm delete etc.)
   --------------------------------------------------------------------------- */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-box {
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 1.5rem;
  max-width: 420px;
  width: 90%;
}

.modal-box h3 { margin-bottom: 0.75rem; }
.modal-box p  { font-size: 0.9rem; color: var(--color-text-muted); margin-bottom: 1.25rem; }

.modal-footer {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

/* ---------------------------------------------------------------------------
   Event detail panel content
   --------------------------------------------------------------------------- */

.panel-section {
  margin-bottom: 1.25rem;
}

.panel-section h3 {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-bottom: 0.5rem;
}

.panel-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.3rem 0.75rem;
  font-size: 0.9rem;
}

.panel-meta dt { color: var(--color-text-muted); white-space: nowrap; }
.panel-meta dd { font-weight: 500; }

.status-badge {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  border-radius: 99px;
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: capitalize;
}

/* Venue map link */
.venue-map-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.85rem;
  margin-top: 0.25rem;
}