/*
 * ------------------------------------------------------------
 * Template: templates/base.css.tpl
 * Emits: APP/base.css
 * Project: PHP+SQLite Scaffold
 * Purpose: Layout + table styles + forms + pagination
 * Author: Rob Lukin (+ “Josie” assistant)
 * Last-Updated: 2026-01-21 (Australia/Adelaide)
 * ------------------------------------------------------------
 */

body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  margin: 40px; line-height: 1.5; background: #fafafa; color: #222; }
h1 { margin-bottom: 20px; }
a { color: #0b5ed7; text-decoration: none; } a:hover { text-decoration: underline; }

table { width: 100%; border-collapse: collapse; margin-top: 16px; background: #fff; }
th, td { border: 1px solid #ddd; padding: 10px; text-align: left; vertical-align: top; }
th { background: #f0f0f0; }

input[type=text], input[type=email], textarea, input[type=number] {
  font-size: 16px; padding: 8px 10px; border: 1px solid #ccc; border-radius: 6px;
  width: 100%; box-sizing: border-box; background:#fff;
}
.input-wide { width: 100%; max-width: 560px; }
textarea { min-height: 90px; resize: vertical; }

/* Buttons — keep submit the same size as the other buttons */
button, input[type=submit], input[type=button], .btn, .pill {
  font-size: 14px; padding: 8px 14px; border: none; border-radius: 8px;
  background: #0b5ed7; color: #fff; cursor: pointer; display:inline-block; text-decoration:none;
}
button:hover, input[type=submit]:hover, input[type=button]:hover, .btn:hover, .pill:hover { background: #094aab; }
.btn.secondary, .pill.disabled { background:#e9ecef; color:#333; cursor:auto; }
.pill { border-radius: 999px; }
.pill.disabled { opacity:.6; pointer-events:none; }

.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.muted { color: #666; }
.flash { padding: 10px; background: #e6f2ff; border: 1px solid #b3daff; margin: 10px 0; border-radius: 6px; }

.select { font-size: 14px; padding: 6px 8px; border-radius:6px; border:1px solid #ccc; background:#fff; }

/* Form layout */
.row { display: flex; gap: 8px; align-items: center; margin: 12px 0; flex-wrap:wrap; }
fieldset { border: 1px solid #ddd; padding: 14px 16px; border-radius: 10px; background:#fff; }
legend { padding: 0 6px; color: #555; }

.form-grid {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 10px 14px;
  align-items: center;
}
.form-label { text-align: right; color:#333; }
.form-hint { color:#666; font-size:.9em; }
.form-hint.error { color:#c0392b; } /* RED inline error text */
.form-actions { margin-top: 8px; }

@media (max-width: 700px) {
  .form-grid { grid-template-columns: 1fr; }
  .form-label { text-align: left; }
}

.actions form { display:inline; margin-left: 6px; }
.badge { display:inline-block; padding:2px 6px; font-size:.8em; border-radius:4px; background:#eef; color:#334; }

.pagination { margin-top: 12px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.pagination a.disabled { pointer-events:none; opacity:.5; }

.table-wrap { overflow:auto; }
.table-scroll { min-width: 100%; }

/* REBUILD PREVIEW styles */
.flash.preview { background:#fff5e6; border-color:#ffd9a3; }
.preview-list { margin:8px 0 16px 20px; }
.preview-list .mono { background:#f7f7f7; padding:2px 4px; border-radius:3px; }

/* Stacked layout (form full-width above, list full-width below) */
.layout { display:grid; gap:16px; margin-top:12px; }
.layout--stack { grid-template-columns: 1fr; grid-template-areas:
  "form"
  "list";
}
.form-pane { grid-area: form; }
.list-pane { grid-area: list; }

/* Optional future split (not used now, but here for later) */
.layout--split { grid-template-columns: 360px 1fr; grid-template-areas: "form list"; }
@media (max-width: 980px) {
  .layout--split { grid-template-columns: 1fr; grid-template-areas: "form" "list"; }
}

/* ---------- CHECKLIST (special UI) ---------- */
.checklist-card{
  background:#fff;
  border:1px solid #eee;
  border-radius:12px;
  padding:14px 16px;
  max-width: 640px;
  box-shadow: 0 1px 1px rgba(0,0,0,.03);
}
.checklist-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}
.checklist-title{ font-weight:600; color:#333; }
.checklist-autosave{ font-size:.9em; color:#777; }

.checklist-columns{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
}
@media (max-width: 780px){
  .checklist-columns{ grid-template-columns: 1fr; }
}

.checklist-col-title{
  font-size:.78em;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#777;
  margin-bottom:8px;
}
.checklist-items{ display:flex; flex-direction:column; gap:8px; }

.checklist-item{
  display:flex;
  align-items:center;
  gap:10px;
  user-select:none;
}
.checklist-item input[type="checkbox"]{
  width:16px;
  height:16px;
}
.checklist-label{ color:#222; }

/* ---------- FILTER BAR VARIANTS ---------- */

/* Base pill (chips) look */
.filters .pill {
  background:#fff;
  border:1px solid #ddd;
  color:#333;
  padding:6px 10px;
  border-radius:999px;
  transition:all .15s ease;
}
.filters .pill .muted { color:#666; }

/* Variant: "chips" (default) — nothing extra */

/* Variant: "active" — colour pill when checkbox is checked (uses :has) */
.filters.filters--active .pill:has(input[type=checkbox]:checked) {
  background:#0b5ed7;
  border-color:#094aab;
  color:#fff;
}
.filters.filters--active .pill:has(input[type=checkbox]:checked) .muted { color:#fff; }

/* Variant: "switch" — render checkbox as an iOS-like toggle, hide the literal "On" text */
.filters.filters--switch .pill label { display:inline-flex; align-items:center; gap:6px; }
.filters.filters--switch .pill label { font-size:0; } /* hide "On" word */
.filters.filters--switch .pill input[type=checkbox]{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  width:38px; height:22px; border-radius:999px; position:relative; outline:none; cursor:pointer;
  background:#cfd5db; border:1px solid #b9c0c7; transition:background .15s ease, border-color .15s ease;
}
.filters.filters--switch .pill input[type=checkbox]::after{
  content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%;
  background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.15); transition:transform .15s ease;
}
.filters.filters--switch .pill input[type=checkbox]:checked{
  background:#0b5ed7; border-color:#094aab;
}
.filters.filters--switch .pill input[type=checkbox]:checked::after{
  transform:translateX(16px);
}

/* "Show all" button tweak */
.filters .btn.secondary { background:#eef1f4; border:1px solid #d5dae0; }
.filters .btn.secondary:hover { background:#e5e9ee; }

/* lighter look for the dynamic style badge */
#styleBadge { background:#eef; color:#334; }

/* EOF templates/base.css.tpl --------------------------- */