/* ─────────────────────────────────────────────────
   base.css — Reset, body, typography, buttons, forms
   ───────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text-1);
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
}

button { cursor: pointer; font-family: inherit; }
input, select, textarea { font-family: inherit; font-size: 13px; }
a { color: inherit; text-decoration: none; }

/* ── TYPOGRAPHY ── */
h1 { font-size: 22px; font-weight: 700; color: var(--text-1); letter-spacing: -0.4px; line-height: 1.2; margin-bottom: 6px; }
.subtitle { font-size: 13px; color: var(--text-3); margin-bottom: 22px; line-height: 1.6; }

/* ── BUTTONS ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 14px; border-radius: var(--radius-md);
  font-family: inherit; font-size: 13px; font-weight: 600; border: none;
  cursor: pointer; transition: all 0.15s;
}
.btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; flex-shrink: 0; }
.btn-primary   { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-md); }
.btn-primary:disabled { opacity: 0.38; cursor: not-allowed; }
.btn-secondary { background: var(--surface); color: var(--text-1); border: 1px solid var(--border); }
.btn-secondary:hover { background: var(--bg); border-color: var(--border-md); }
.btn-ghost { background: transparent; color: var(--text-2); border: 1px solid var(--border); }
.btn-ghost:hover { background: var(--surface2); border-color: var(--border-md); color: var(--text-1); }
.btn-sm { padding: 5px 10px; font-size: 12px; }

/* ── FORMS ── */
.form-group { margin-bottom: 12px; }
.form-label { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.3px; text-transform: uppercase; color: var(--text-3); margin-bottom: 5px; }
.form-input, .form-select, .form-textarea {
  width: 100%; padding: 8px 11px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-md); color: var(--text-1);
  font-family: inherit; font-size: 13px; outline: none; transition: border-color 0.15s;
}
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--accent); }
.form-input::placeholder { color: var(--text-3); }
.form-textarea { resize: vertical; min-height: 72px; }
.form-error { font-size: 12px; color: var(--urgent); margin-top: 5px; display: none; }
.form-error.show { display: block; }
.two-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ── TAGS ── */
.tag {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 8px; border-radius: 20px;
  font-size: 11px; font-weight: 600;
}
.tag svg { width: 10px; height: 10px; stroke: currentColor; fill: none; stroke-width: 2; }
.tag-urgent  { background: var(--urgent-lt);  color: var(--urgent); }
.tag-event   { background: var(--muted-lt);   color: var(--muted); }
.tag-need    { background: var(--accent-lt);  color: var(--accent); }
.tag-done    { background: var(--sky-lt);     color: #0060C0; }
.tag-dist    { background: var(--bg); color: var(--text-3); border: 1px solid var(--border); }

/* Shift category tags — using brand palette */
.tag-cat-disaster   { background: #FFE8E8; color: var(--brand-red-1); border: 1px solid #FFBBBB; }
.tag-cat-food       { background: var(--sky-lt); color: #0060B0; border: 1px solid var(--brand-blue-4); }
.tag-cat-repair     { background: var(--accent-lt); color: var(--accent); border: 1px solid #B0C0FF; }
.tag-cat-unassigned { background: var(--muted-lt); color: var(--muted); border: 1px solid var(--border); }

/* Category dot (hours log) */
.cat-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-right: 4px; }
.cat-dot.disaster   { background: #c03030; }
.cat-dot.food       { background: #2a9e6c; }
.cat-dot.repair     { background: #3a7ad0; }
.cat-dot.unassigned { background: #9a9890; }

/* ── TOAST ── */
.toast {
  position: fixed; bottom: 24px; right: 24px;
  background: var(--text-1); color: #fff;
  padding: 12px 18px; border-radius: var(--radius-md);
  font-size: 13px; font-weight: 600;
  display: flex; align-items: center; gap: 10px;
  z-index: 300; opacity: 0; transform: translateY(8px);
  transition: all 0.3s; pointer-events: none;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast svg { width: 16px; height: 16px; stroke: var(--accent); fill: none; stroke-width: 2.5; }

/* ── MISC UTILITY ── */
.hint { font-size: 12px; color: var(--text-3); text-align: center; margin-top: 14px; }
.hint a { color: var(--accent); cursor: pointer; font-weight: 600; }
.hint a:hover { text-decoration: underline; }

.demo-note {
  background: var(--accent-lt); border: 1px solid #B0C0FF;
  border-radius: var(--radius-md); padding: 9px 13px;
  font-size: 12px; color: var(--accent); font-weight: 600; margin-bottom: 18px;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}