/* ============================================================
   BareBoat Manager — App Styles
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
  --bg: #0b1220; --bg2: #09111e; --panel: #121a2b; --panel2: #0f1626; --line: #22304d;
  --ink: #e8eefc; --muted: #8aa0c8; --accent: #3aa0ff;
  --good-bg: #0f3a25; --good-fg: #7be3ad;
  --warn-bg: #3a2c0f; --warn-fg: #f5d182;
  --bad-bg: #3a1010;  --bad-fg: #ffb4b4;
  --tag-bg: #1d2a44;  --tag-fg: var(--muted);
  --step-active: #0f2542; --nav-active: #1a2540;
  --toast-bg: #1a2540; --sig-ink: #0a1730; --halo: rgba(58,160,255,.14);
  --ambient-a: rgba(58,160,255,.12); --ambient-b: rgba(83,199,176,.08); --ambient-scene-opacity: .08;
}

[data-theme="light"] {
  --bg: #f4f6fb; --bg2: #eaf0fb; --panel: #ffffff; --panel2: #eef1f8; --line: #d8e0ef;
  --ink: #0e1a30; --muted: #5a6b8a; --accent: #2563eb;
  --good-bg: #dcfce7; --good-fg: #166534;
  --warn-bg: #fef3c7; --warn-fg: #92400e;
  --bad-bg: #fee2e2;  --bad-fg: #991b1b;
  --tag-bg: #e8edf8;  --tag-fg: var(--muted);
  --step-active: #dbeafe; --nav-active: #e8edf8;
  --toast-bg: #1e293b; --sig-ink: #0a1730; --halo: rgba(37,99,235,.08);
  --ambient-a: rgba(37,99,235,.1); --ambient-b: rgba(13,148,136,.07); --ambient-scene-opacity: .12;
}

/* ---------- Reset & base ---------- */
* { box-sizing: border-box; }

body {
  margin: 0;
  font: 14px/1.45 system-ui, "Segoe UI", Roboto, sans-serif;
  background:
    radial-gradient(circle at top left, var(--halo), transparent 30%),
    radial-gradient(circle at 86% 18%, rgba(83,199,176,.12), transparent 24%),
    linear-gradient(160deg, var(--bg), var(--bg2));
  color: var(--ink);
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
}

body::before, body::after {
  content: "";
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(18px);
  opacity: .8;
  z-index: 0;
}
body::before { width: 320px; height: 320px; top: -110px; left: -70px; background: radial-gradient(circle, var(--halo), transparent 72%); }
body::after  { width: 380px; height: 380px; right: -120px; bottom: -140px; background: radial-gradient(circle, rgba(83,199,176,.12), transparent 72%); }

/* ---------- Ambient scene ---------- */
.ambient-scene {
  position: fixed; inset: 0;
  pointer-events: none; overflow: hidden;
  z-index: 0; isolation: isolate;
}
.ambient-scene::before {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: min(70vh, 760px);
  background: url("../ambient-seascape.svg") center bottom / cover no-repeat;
  opacity: var(--ambient-scene-opacity);
  transform-origin: center bottom;
  animation: sceneFloat 28s ease-in-out infinite;
}
.ambient-gradient { position: absolute; border-radius: 50%; filter: blur(30px); opacity: .45; will-change: transform; }
.ambient-gradient.one { width: 34vw; height: 34vw; min-width: 280px; min-height: 280px; left: -8vw; top: 12vh; background: radial-gradient(circle, var(--ambient-a), transparent 68%); animation: driftOne 18s ease-in-out infinite; }
.ambient-gradient.two { width: 28vw; height: 28vw; min-width: 240px; min-height: 240px; right: -6vw; top: 24vh; background: radial-gradient(circle, var(--ambient-b), transparent 70%); animation: driftTwo 24s ease-in-out infinite; }

/* ---------- Header & nav ---------- */
header {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  position: sticky; top: 0; z-index: 10;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
header h1 { font-size: 16px; margin: 0; letter-spacing: .3px; }
.theme-toggle { margin-left: 8px; }
nav { display: flex; gap: 6px; margin-left: auto; }
nav button { background: transparent; color: var(--muted); border: 1px solid transparent; padding: 6px 10px; border-radius: 8px; cursor: pointer; }
nav button.active { background: var(--nav-active); color: var(--ink); border-color: var(--line); }

/* ---------- Layout ---------- */
main { padding: 20px; max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; }
.grid  { display: grid; gap: 14px; }
.cards { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

/* ---------- Card ---------- */
.card {
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  border: 1px solid var(--line); border-radius: 16px; padding: 14px;
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.card h3 { margin: 0 0 6px; font-size: 15px; }

/* ---------- Utility ---------- */
.muted { color: var(--muted); }
.row   { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ---------- Buttons ---------- */
.btn          { background: var(--accent); color: #fff; border: 0; padding: 8px 14px; border-radius: 8px; cursor: pointer; font-weight: 600; }
.btn.secondary{ background: var(--tag-bg); color: var(--ink); }
.btn.ghost    { background: transparent; border: 1px solid var(--line); color: var(--ink); }
.btn.danger   { background: var(--bad-bg); color: var(--bad-fg); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- Form ---------- */
input, select, textarea {
  background: var(--panel2); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 10px; font: inherit; width: 100%;
}
label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.field { margin-bottom: 10px; }
.form-card { margin-bottom: 14px; }
.form-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }

/* ---------- Tags ---------- */
.tag      { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--tag-bg); color: var(--tag-fg); }
.tag.good { background: var(--good-bg); color: var(--good-fg); }
.tag.warn { background: var(--warn-bg); color: var(--warn-fg); }
.tag.bad  { background: var(--bad-bg);  color: var(--bad-fg); }

/* ---------- Checklist ---------- */
.checklist { display: grid; gap: 6px; }
.checklist label { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--ink); background: var(--panel2); border: 1px solid var(--line); padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.checklist input { width: auto; }

/* ---------- Inspection ---------- */
.inspection-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.inspection-card {
  position: relative; display: flex; flex-direction: column;
  justify-content: center; align-items: center; gap: 4px;
  min-height: 116px; padding: 14px; border-radius: 14px;
  border: 2px dashed var(--line); background: var(--panel2);
  text-align: center; color: var(--ink);
}
.inspection-card.is-complete  { border-style: solid; border-color: var(--accent); background: var(--step-active); }
.inspection-card.is-check     { align-items: flex-start; text-align: left; cursor: pointer; min-height: 92px; }
.inspection-card.is-check .inspection-title { font-size: 14px; }
.inspection-card.is-check .inspection-state { margin-top: auto; }
.inspection-icon  { font-size: 20px; line-height: 1; }
.inspection-title { font-size: 13px; font-weight: 700; }
.inspection-state { font-size: 12px; color: var(--muted); }
.inspection-preview { width: 100%; height: 92px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: #000; }
.inspection-preview img, .inspection-preview video { width: 100%; height: 100%; object-fit: cover; }
.inspection-remove { position: absolute; top: 8px; right: 8px; background: #000a; color: #fff; border: 0; border-radius: 999px; width: 24px; height: 24px; cursor: pointer; font-size: 13px; line-height: 24px; padding: 0; }
.inspection-section { margin-top: 12px; }
.inspection-section h4 { margin: 0 0 8px; font-size: 14px; }
.inspection-summary { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 12px; }

/* ---------- Media gallery ---------- */
.media { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.media .item { background: #000; border-radius: 8px; overflow: hidden; position: relative; aspect-ratio: 1; border: 1px solid var(--line); }
.media .item img, .media .item video { width: 100%; height: 100%; object-fit: cover; }
.media .item .x { position: absolute; top: 4px; right: 4px; background: #000a; color: #fff; border: 0; border-radius: 4px; padding: 2px 6px; cursor: pointer; font-size: 11px; }

/* ---------- Stepper ---------- */
.stepper { display: flex; gap: 6px; margin: 10px 0 16px; }
.stepper .step { flex: 1; text-align: center; padding: 8px; border-radius: 8px; background: var(--panel2); border: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.stepper .step.done   { color: var(--good-fg); border-color: var(--good-bg); }
.stepper .step.active { color: var(--ink); border-color: var(--accent); background: var(--step-active); }

/* ---------- Table ---------- */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); font-size: 13px; }
th { color: var(--muted); font-weight: 500; }

/* ---------- Signature ---------- */
.sigwrap { background: #fff; border-radius: 8px; border: 1px solid var(--line); }
canvas.sig { display: block; width: 100%; height: 140px; touch-action: none; border-radius: 8px; }

/* ---------- Key-value summary ---------- */
.kvs { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 13px; }
.kvs div:nth-child(odd) { color: var(--muted); }

/* ---------- Details / accordion ---------- */
details { background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; margin-bottom: 8px; }
summary { cursor: pointer; font-weight: 600; }

/* ---------- Empty state ---------- */
.empty { color: var(--muted); text-align: center; padding: 30px; border: 1px dashed var(--line); border-radius: 12px; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: var(--toast-bg); color: #fff;
  padding: 10px 16px; border-radius: 8px;
  border: 1px solid var(--line); box-shadow: 0 6px 20px #0006;
  opacity: 0; transition: opacity .2s; z-index: 1000;
}
.toast.show { opacity: 1; }

/* ---------- Animations ---------- */
@keyframes sceneFloat { 0%, 100% { transform: translate3d(0,0,0) scale(1); }    50% { transform: translate3d(0,-10px,0) scale(1.015); } }
@keyframes driftOne   { 0%, 100% { transform: translate3d(0,0,0) scale(1); }    50% { transform: translate3d(40px,-24px,0) scale(1.08); } }
@keyframes driftTwo   { 0%, 100% { transform: translate3d(0,0,0) scale(1); }    50% { transform: translate3d(-36px,26px,0) scale(1.06); } }

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
  .ambient-scene::before { height: min(48vh, 360px); background-position: 62% bottom; opacity: .06; }
  .ambient-gradient.one  { width: 300px; height: 300px; left: -120px; top: 8vh; }
  .ambient-gradient.two  { width: 220px; height: 220px; right: -100px; top: auto; bottom: 12vh; }
}

@media (prefers-reduced-motion: reduce) {
  .ambient-gradient, .ambient-scene::before { animation: none !important; transform: none !important; }
  body::before, body::after { filter: blur(14px); }
}