/* ── styles.css – Core design system ─────────────────────────
   Brand-specific colours live in theme.css.
   ──────────────────────────────────────────────────────────── */

/* ── Tokens (defaults; theme.css overrides these) ───────────── */
:root {
  --bg:         #f5f4f1;
  --surface:    #ffffff;
  --border:     #dbd6cf;
  --border-lt:  #edeae5;
  --text:       #1e1b17;
  --muted:      #7c7468;
  --accent:     #555555;
  --accent-dk:  #333333;
  --accent-bg:  #f0eeea;
  --danger:     #c04040;
  --danger-bg:  #fce8e8;
  --success:    #4a7c5a;
  --success-bg: #e6f4ec;
  --warn:       #c07830;
  --warn-bg:    #fef3e2;
  --nav-bg:     #222222;
  --nav-fg:     #f0ede8;
  --nav-hover:  rgba(255,255,255,.07);
  --nav-border: transparent;
  --radius:     5px;
  --radius-lg:  9px;
  --shadow-sm:  0 1px 4px rgba(0,0,0,.07);
  --shadow:     0 3px 14px rgba(0,0,0,.11);
  --topbar-h:   60px;
  --sidebar-w:  220px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui,
          "Helvetica Neue", Arial, sans-serif;
  color-scheme: light dark;
}

/* ── Dark mode tokens ────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg:         #1a1a1a;
    --surface:    #232323;
    --border:     #383838;
    --border-lt:  #2c2c2c;
    --text:       #e8e4de;
    --muted:      #8a847c;
    --accent:     #888888;
    --accent-dk:  #aaaaaa;
    --accent-bg:  #2a2a2a;
    --danger:     #e06060;
    --danger-bg:  #2a1212;
    --success:    #6ab87a;
    --success-bg: #101f14;
    --warn:       #e09840;
    --warn-bg:    #221808;
    --shadow-sm:  0 1px 4px rgba(0,0,0,.4);
    --shadow:     0 3px 14px rgba(0,0,0,.6);
    --nav-bg:     #111111;
    --nav-fg:     #e8e4de;
    --nav-hover:  rgba(255,255,255,.08);
    --nav-border: transparent;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:         #1a1a1a;
  --surface:    #232323;
  --border:     #383838;
  --border-lt:  #2c2c2c;
  --text:       #e8e4de;
  --muted:      #8a847c;
  --accent:     #888888;
  --accent-dk:  #aaaaaa;
  --accent-bg:  #2a2a2a;
  --danger:     #e06060;
  --danger-bg:  #2a1212;
  --success:    #6ab87a;
  --success-bg: #101f14;
  --warn:       #e09840;
  --warn-bg:    #221808;
  --shadow-sm:  0 1px 4px rgba(0,0,0,.4);
  --shadow:     0 3px 14px rgba(0,0,0,.6);
  --nav-bg:     #111111;
  --nav-fg:     #e8e4de;
  --nav-hover:  rgba(255,255,255,.08);
  --nav-border: transparent;
}

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  margin: 0;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4, h5 { margin: 0 0 .4em; line-height: 1.3; font-weight: 600; }
p { margin: 0 0 .8em; }

/* ── Container ──────────────────────────────────────────────── */
main.container {
  max-width: 960px;
  margin-left: var(--sidebar-w);
  margin-right: auto;
  padding: 32px 24px 80px;
}

/* ── Navbar ─────────────────────────────────────────────────── */
nav.navbar {
  position: fixed;
  background: var(--nav-bg);
  /*z-index: 10;*/

  & .nav-toggle {
    opacity: 0;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
  }

  & .menu-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    height: var(--topbar-h);
    padding: 0 20px;

    & a.brand {
      color: var(--nav-fg);
      font-weight: 700;
      font-size: .9rem;
      letter-spacing: .07em;
      text-transform: uppercase;
      text-decoration: none;
    }

    & .menu {
      display: none;

      & span.icon > svg {
        width: 30px;
        height: 30px;
        fill: var(--accent-dk);
      }
    }
  }

  & ul.nav-links {
    list-style: none;
    margin: 0;
    padding: 6px 0 10px;
    border-top: 1px solid rgba(128,128,128,.15);

    & li {
      display: block;
      margin-left: 16px;
      margin-right: 16px;
      padding: 8px 6px;
      transition: background .1s, color .1s;
      &:hover {
        background: var(--nav-hover);
        color: var(--nav-fg);
        text-decoration: none;
        border-radius: var(--radius);
      }
      & a {
        display: block;
        color: color-mix(in srgb, var(--nav-fg) 65%, transparent);
        font-size: .875rem;
        text-decoration: none;
      }
    }

    & li.search {
      & form {
        position: relative;
        & input[type="search"] {
          font-size: .8rem;
          padding: 6px 6px;
          width: 100%;
          background: var(--bg);
          border: 1px solid var(--border);
          border-radius: var(--radius);
          color: var(--text);
          transition: border-color .12s, box-shadow .12s;
          &:focus {
            outline: none;
            border-color: var(--accent);
            box-shadow: 0 0 0 3px var(--accent-bg);
          }
        }
        & button[type="submit"] {
          position: absolute;
          right: 4px;
          top: 3px;
          padding: 2px 6px;
          background: transparent;
          color: var(--nav-fg);
          border: 0;
          opacity: .65;
          cursor: pointer;
          font-size: .85rem;
          & svg {
            fill: var(--nav-fg);
          }
        }
      }
    }

    & li.theme-toggle {
      margin-top: 8px;
      border-top: 1px solid rgba(128,128,128,.15);
      padding-top: 4px;
      margin-left: 0;
      margin-right: 0;

      & button {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 8px 16px;
        color: color-mix(in srgb, var(--nav-fg) 65%, transparent);
        font-size: .875rem;
        font-family: var(--font);
        text-align: left;
        transition: color .1s, background .1s;
        border-radius: var(--radius);
        &:hover { color: var(--nav-fg); background: var(--nav-hover); }
        & .icon { width: 1.1em; flex-shrink: 0; }
      }
    }
  }
}

/* ── Desktop nav (≥ 768px) ──────────────────────────────────── */
@media (min-width: 768px) {
  nav.navbar {
    width: var(--sidebar-w);
    height: 100dvh;
    border-right: 2px solid var(--nav-border);
    overflow-y: auto;
    overflow-x: hidden;

    & .nav-toggle { display: none; }

    & ul.nav-links {
      & li {
        & a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        & form { display: flex; flex-direction: column; gap: 5px; }
      }
      & li.search {
        & input[type="search"] { min-width: 0; font-size: .83rem; background: var(--bg); }
      }
    }
  }

  main.container {
    margin-left: var(--sidebar-w);
    margin-right: auto;
  }
}

/* ── Mobile nav (< 768px) ───────────────────────────────────── */
@media (max-width: 767px) {
  nav.navbar {
    top: 0; left: 0; right: 0;
    border-bottom: 1px solid var(--nav-border);

    & .nav-toggle {
      position: absolute;
      z-index: 50;
      top: 0; left: 0;
      width: var(--topbar-h); height: var(--topbar-h);
      cursor: pointer;
    }

    & .menu-toggle {
      position: relative;
      /*z-index: 30;*/
      padding: 0 20px 0 var(--topbar-h);

      & .menu {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0; left: 0;
        width: var(--topbar-h); height: var(--topbar-h);
        & .icon { color: var(--nav-fg); opacity: .65; width: 1.3em; font-size: 1rem; line-height: 1; }
        & .text { display: none; }
      }

      & .menu.close {
        background: var(--nav-bg);
        clip-path: polygon(0 0, -20px 0, -20px 100%, 0 100%);
        transition: clip-path 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
      }
    }

    & ul.nav-links {
      position: fixed;
      top: var(--topbar-h); left: 0;
      width: var(--sidebar-w);
      overflow-y: auto;
      background: var(--nav-bg);
      border-right: 2px solid var(--nav-border);
      border-bottom: 2px solid var(--nav-border);
      border-bottom-right-radius: var(--radius);
      /*z-index: 20;*/
      transform: translateX(calc(-1 * var(--sidebar-w)));
      transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);

      & li {
        margin-left: 10px;
        margin-right: 10px;
      }
    }

    & .nav-toggle:checked ~ ul.nav-links {
      transform: translateX(0);
    }
    & .nav-toggle:checked ~ .menu-toggle .menu.close {
      clip-path: polygon(0 0, var(--topbar-h) 0, var(--topbar-h) 100%, 0 100%);
    }
  }

  main.container {
    margin-top: var(--topbar-h);
    margin-left: 0;
  }
}
/* ── Messages ───────────────────────────────────────────────── */
section.messages {
  margin-bottom: 20px;

  & .alert {
    padding: 10px 16px;
    border-radius: var(--radius);
    border-left: 3px solid var(--border);
    background: var(--surface);
    font-size: .875rem;
    margin-bottom: 8px;
  }
  & .alert-success, & .alert-successlist {
    border-left-color: var(--success); background: var(--success-bg);
  }
  & .alert-error, & .alert-danger {
    border-left-color: var(--danger);  background: var(--danger-bg);
  }
  & .alert-warning {
    border-left-color: var(--warn);    background: var(--warn-bg);
  }
  & .alert-info {
    border-left-color: #4a7fa5;        background: #e8f2fa;
  }
}

/* ── Buttons ────────────────────────────────────────────────── */
a.button, button, input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 16px;
  border-radius: var(--radius);
  font-size: .85rem;
  font-weight: 500;
  font-family: var(--font);
  line-height: 1.4;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  transition: background .12s, border-color .12s, color .12s;
}
a.button:hover, button.button:hover {
  background: var(--accent-bg);
  border-color: var(--accent);
  color: var(--accent);
  text-decoration: none;
}

/* Primary */
button[type="submit"].button, input[type="submit"],
a.button.primary, button.button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
button[type="submit"].button:hover, input[type="submit"]:hover {
  background: var(--accent-dk);
  border-color: var(--accent-dk);
  color: #fff;
  text-decoration: none;
}

/* Danger */
.danger, button[value="delete"] {
  background: var(--danger-bg);
  border-color: var(--danger);
  color: var(--danger);
}
.danger:hover, button[value="delete"]:hover {
  background: var(--danger); color: #fff; text-decoration: none;
}

.secondary { background: var(--bg); color: var(--muted); }

/* ── Dashboard ──────────────────────────────────────────────── */
h2 { font-size: 1.45rem; }

section.models > ul {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
  gap: 10px;

  & li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    color: var(--text);
    font-size: .9rem;
    text-decoration: none;
    transition: border-color .13s, box-shadow .13s;

    &:hover {
      border-color: var(--accent);
      box-shadow: var(--shadow-sm);
      text-decoration: none;
    }

    & .badge {
      font-size: .68rem;
      font-weight: 700;
      letter-spacing: .04em;
      text-transform: uppercase;
      color: var(--muted);
      background: var(--accent-bg);
      border: 1px solid var(--border-lt);
      border-radius: 4px;
      padding: 2px 7px;
      flex-shrink: 0;
    }
  }
}

/* ── List page ──────────────────────────────────────────────── */
main.container > div:has(> h2) {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 20px;
  & h2 { flex: 1; margin: 0; }
}

/* ── Table ──────────────────────────────────────────────────── */
table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;

  & thead tr {
    background: var(--bg);
    border-bottom: 1px solid var(--border);
  }
  & th {
    text-align: left;
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 11px 14px;
  }
  & th:first-child { padding-left: 20px; }
  & td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--border-lt);
    font-size: .9rem;
    vertical-align: middle;
  }
  & td:first-child { padding-left: 20px; }
  & td a { color: var(--accent); font-weight: 500; }

  & tbody tr {
    transition: background .1s;
    &:hover { background: var(--accent-bg); }
    &:last-child td { border-bottom: none; }
  }
}

/* ── Pagination ─────────────────────────────────────────────── */
nav[aria-label="Page navigation"] {
  margin-top: 20px;

  & ul.pagination {
    display: flex;
    gap: 4px;
    list-style: none;
    padding: 0;
    margin: 0;

    & li a.page-link, & li span.page-link {
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 34px;
      height: 34px;
      padding: 0 8px;
      border-radius: var(--radius);
      font-size: .85rem;
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--text);
      text-decoration: none;
      transition: background .1s;
    }
    & li a.page-link:hover {
      background: var(--accent-bg);
      border-color: var(--accent);
      text-decoration: none;
    }
    & li.active span.page-link {
      background: var(--accent); color: #fff; border-color: var(--accent);
    }
    & li.disabled span.page-link { color: var(--muted); background: var(--bg); }
  }
}

/* ── Detail card ────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;

  & .card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 24px;
    border-bottom: 1px solid var(--border-lt);

    & h3 { flex: 1; font-size: 1.2rem; margin: 0; }

    & .return a {
      color: var(--muted);
      font-size: .85rem;
      &:hover { color: var(--text); text-decoration: none; }
    }

    & a.button.primary, & a.primary {
      display: inline-flex;
      align-items: center;
      background: var(--accent);
      color: #fff;
      border: 1px solid var(--accent);
      padding: 5px 14px;
      border-radius: var(--radius);
      font-size: .85rem;
      font-weight: 500;
      text-decoration: none;
      transition: background .12s;
      &:hover {
        background: var(--accent-dk);
        border-color: var(--accent-dk);
        text-decoration: none;
      }
    }
  }

  & .card-body {
    padding: 20px 24px;

    & h4 {
      font-size: .7rem;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--accent);
      margin: 24px 0 8px;
      &:first-child { margin-top: 4px; }
    }

    & dl {
      display: grid;
      grid-template-columns: 165px 1fr;
      margin: 0;

      & dt {
        font-size: .9rem;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--muted);
        padding: 8px 16px 8px 0;
        border-bottom: 1px solid var(--border-lt);
        align-self: start;
      }
      & dd {
        margin: 0;
        padding: 8px 0;
        border-bottom: 1px solid var(--border-lt);
        font-size: .9rem;
        & ul { margin: 0; padding-left: 1.2em; }
        & ul li { margin: 2px 0; }
        & a { color: var(--accent); }
      }
    }
  }
}

/* ── Edit / Form ────────────────────────────────────────────── */
section.edit {

  & > h3 { font-size: 1.3rem; font-weight: 700; margin: 0 0 24px; }

  & h4 {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 14px;
  }

  & hr { border: none; border-top: 1px solid var(--border-lt); margin: 24px 0; }

  & form {
    max-width: 620px;

    & div.field {
      display: grid;
      grid-template-columns: 160px 1fr;
      gap: 0 12px;
      margin-bottom: 14px;
      align-items: start;

      & > label {
        font-size: .85rem;
        font-weight: 500;
        color: var(--muted);
        padding-top: 7px;
      }

      & > span > input:not([type="checkbox"]):not([type="radio"]),
      & > input:not([type="checkbox"]):not([type="radio"]),
      & > select,
      & > textarea {
        font-family: var(--font);
        font-size: .9rem;
        padding: 6px 10px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        color: var(--text);
        width: 100%;
        transition: border-color .12s, box-shadow .12s;

        &:focus {
          outline: none;
          border-color: var(--accent);
          box-shadow: 0 0 0 3px var(--accent-bg);
        }
      }

      & > textarea {
        min-height: 80px;
        resize: vertical;
        height: 3rem;
      }

      & > select[multiple] {
        min-height: 120px;
        padding: 4px 0;
        appearance: none;

        & option {
          padding: 5px 10px;
          color: var(--text);
        }
        & option:checked {
          background: color-mix(in srgb, var(--accent) 18%, var(--surface));
          color: var(--accent-dk);
          font-weight: 500;
        }
      }
      &:has(select[multiple])::after {
        content: "Hold Ctrl (or ⌘) to select multiple items";
        display: block;
        grid-column: 2;
        font-size: .73rem;
        color: var(--muted);
        margin-top: 4px;
      }

      & > input[type="checkbox"],
      & > input[type="radio"] {
        margin-top: 9px;
        width: auto;
        accent-color: var(--accent);
        justify-self: flex-start;
      }

      & > fieldset {
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 8px 12px;
        margin: 0;
        & > legend { font-size: .8rem; color: var(--muted); padding: 0 4px; }
        & > div { display: flex; gap: 8px; flex-wrap: wrap; margin: 2px 0; }
        & label { font-size: .875rem; }
      }

      & div.helptext {
        grid-column: 2;
        font-size: .78rem;
        color: var(--muted);
        margin-top: 4px;
        line-height: 1.4;
        display: block;
      }

      & div.errors {
        grid-column: 2;
        & ul { list-style: none; margin: 2px 0 0; padding: 0; }
        & ul li { color: var(--danger); font-size: .8rem; }
      }
    }

    & div.category label {
      font-size: .68rem;
      font-weight: 700;
      letter-spacing: .09em;
      text-transform: uppercase;
      color: var(--accent);
    }

    /* FK find-or-create autocomplete dropdown */
    & .autocomplete-wrapper {
      position: relative;
      display: block;

      & input { width: 100%; }

      & ul.autocomplete-list {
        position: absolute;
        top: calc(100% + 2px);
        left: 0;
        right: 0;
        z-index: 200;
        margin: 0;
        padding: 4px 0;
        list-style: none;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        max-height: 220px;
        overflow-y: auto;

        & li {
          padding: 6px 12px;
          cursor: pointer;
          font-size: .92rem;

          &:hover, &.active {
            background: var(--accent-bg);
          }
        }
      }
    }

    /* Supertype matched-person card */
    & .supertype-card {
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--accent-bg);
      padding: 10px 14px 8px;
      margin: 4px 0 8px -14px;

      & button {
        margin-left: calc(160px + 12px); /* left form panel + gap */
        padding: 4px 10px;
      }
    }

    /* Inline FK parent forms (e.g. Litter when editing Animal) */
    & div.fk-parent-form {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 16px 20px 12px;
      margin: 18px 0;
    }

    /* Formsets */
    & div.formset {
      margin: 18px 0;

      & div.formset-form {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: 16px 20px 12px;
        margin-bottom: 10px;
        display: flex;
        align-items: flex-start;
        gap: 12px;

        & > div.formset-fields,
        & > div.formset-summary {
          flex: 1;
          min-width: 0;
        }

        & button.remove-form {
          flex-shrink: 0;
          align-self: flex-end;
          font-size: .78rem;
          color: var(--muted);
          border-color: var(--border-lt);
          background: transparent;
          padding: 3px 10px;
          &:hover {
            color: var(--danger);
            border-color: var(--danger);
            background: var(--danger-bg);
          }
        }

        /* ── Collapsed summary card ── */
        & div.formset-summary {
          cursor: pointer;
          border-radius: var(--radius);
          padding: 2px 0;
          transition: background .1s;
          user-select: none;
          &:hover { background: var(--accent-bg); }

          & dl {
            display: grid;
            grid-template-columns: 140px 1fr;
            margin: 0 0 6px;
          }
          & dl dt {
            font-size: .8rem;
            font-weight: 700;
            letter-spacing: .06em;
            text-transform: uppercase;
            color: var(--muted);
            padding: 5px 12px 5px 0;
            border-bottom: 1px solid var(--border-lt);
            align-self: start;
          }
          & dl dd {
            margin: 0;
            padding: 5px 0;
            border-bottom: 1px solid var(--border-lt);
            font-size: .9rem;
          }
          & em.empty-placeholder {
            font-size: .85rem;
            color: var(--muted);
            font-style: italic;
          }
        }

        /* ── Done / collapse button ── */
        & button.collapse-form {
          margin-top: 8px;
          font-size: .78rem;
          color: var(--muted);
          border-color: var(--border-lt);
          background: transparent;
          padding: 3px 10px;
          &:hover {
            color: var(--accent-dk);
            border-color: var(--border);
            background: var(--accent-bg);
          }
        }
      }

      /* ── Inline media quick-attach (event formsets only) ── */
      & div.formset-media-section {
        border-top: 1px dashed var(--border-lt);
        margin-top: 8px;
        padding-top: 8px;

        &::before {
          content: 'Attach media';
          display: block;
          font-size: .68rem;
          font-weight: 700;
          letter-spacing: .09em;
          text-transform: uppercase;
          color: var(--muted);
          margin-bottom: 6px;
        }

        & input[type="file"] {
          font-size: .85rem;
          color: var(--text);
          padding: 4px 0;
          background: none;
          border: none;
          width: 100%;
          cursor: pointer;
        }
      }

      & div.formset-controls button.add-form {
        font-size: .82rem;
        color: var(--success);
        border-color: var(--success);
        background: var(--success-bg);
        &:hover { background: var(--success); color: #fff; }
      }
    }

    /* Delete form sits below the save form */
    & + form {
      margin-top: 16px;
      padding-top: 16px;
      border-top: 1px solid var(--border-lt);
    }
  }
}

/* ── Date / DateTime inputs ──────────────────────────────────── */
section.edit form div.field {

  & input[type="datetime-local"],
  & input[type="date"] {
    color-scheme: light;
    background: var(--accent-bg);
    font-variant-numeric: tabular-nums;

    &:focus {
      background: var(--surface);
    }

    &::-webkit-datetime-edit-text {
      color: var(--muted);
      padding: 0 1px;
    }

    &::-webkit-calendar-picker-indicator {
      opacity: .4;
      padding: 1px 3px;
      border-radius: 3px;
      cursor: pointer;
      transition: opacity .12s, background .12s;
      &:hover {
        opacity: .9;
        background: color-mix(in srgb, var(--accent) 15%, var(--surface));
      }
    }
  }
}

/* ── Login ───────────────────────────────────────────────────── */
section.login {
  max-width: 320px;
  margin: 60px auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 32px;

  & form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: none;

    & label {
      font-size: .85rem;
      font-weight: 500;
      color: var(--muted);
      margin-bottom: -4px;
    }

    & input[type="text"],
    & input[type="password"] {
      width: 100%;
      padding: 8px 12px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      font-family: var(--font);
      font-size: .9rem;
      background: var(--bg);
      color: var(--text);
      transition: border-color .12s, box-shadow .12s;
      &:focus {
        outline: none;
        border-color: var(--accent);
        box-shadow: 0 0 0 3px var(--accent-bg);
        background: var(--surface);
      }
    }

    & input[type="submit"] {
      width: 100%;
      padding: 9px;
      font-size: .9rem;
      margin-top: 6px;
    }
  }
}

/* ── Search bar ─────────────────────────────────────────────── */
form.search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;

  & input[type="search"] {
    flex: 1;
    max-width: 420px;
    padding: 6px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-family: var(--font);
    font-size: .9rem;

    &:focus {
      outline: none;
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-bg);
    }
  }
}

p.search-meta { font-size: .875rem; color: var(--muted); margin-bottom: 20px; }

/* ── Global search results ──────────────────────────────────── */
section.search-group {
  margin-bottom: 36px;

  & h3.search-group-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;

    & .search-count {
      background: var(--accent-bg);
      color: var(--muted);
      border: 1px solid var(--border-lt);
      border-radius: 4px;
      font-size: .7rem;
      font-weight: 700;
      padding: 2px 8px;
    }
  }
}

/* ── Confirm delete ──────────────────────────────────────────── */
.row.justify-content-center {
  max-width: 540px;
  margin: 40px auto;

  & .card.border-danger,
  & .col-md-6 > .card {
    background: var(--surface);
    border: 1px solid var(--danger);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);

    & .card-header {
      background: var(--danger);
      padding: 14px 20px;
      border-bottom: none;
      & h3 { color: #fff; font-size: 1rem; margin: 0; }
    }

    & .card-body {
      padding: 20px 24px;
      & p { font-size: .9rem; margin-bottom: 14px; }
      & .alert.alert-warning {
        background: var(--warn-bg);
        border-left: 3px solid var(--warn);
        padding: 10px 14px;
        border-radius: var(--radius);
        font-size: .875rem;
        margin-bottom: 18px;
      }
      & form { display: flex; gap: 10px; flex-wrap: wrap; max-width: none; }
    }
  }
}

/* ── Theme toggle icon + text visibility ─────────────────────── */
/* Default (light): show moon + "Dark mode", hide sun + "Light mode" */
.theme-icon-moon  { display: inline-flex; }
.theme-icon-sun   { display: none; }
.theme-text-dark  { display: inline; }
.theme-text-light { display: none; }

/* System dark preference – show sun + "Light mode" unless user forced light */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-icon-moon  { display: none; }
  :root:not([data-theme="light"]) .theme-icon-sun   { display: inline-flex; }
  :root:not([data-theme="light"]) .theme-text-dark  { display: none; }
  :root:not([data-theme="light"]) .theme-text-light { display: inline; }
}
/* Manually forced dark */
[data-theme="dark"] .theme-icon-moon  { display: none; }
[data-theme="dark"] .theme-icon-sun   { display: inline-flex; }
[data-theme="dark"] .theme-text-dark  { display: none; }
[data-theme="dark"] .theme-text-light { display: inline; }
/* Manually forced light (overrides media query above) */
[data-theme="light"] .theme-icon-moon  { display: inline-flex; }
[data-theme="light"] .theme-icon-sun   { display: none; }
[data-theme="light"] .theme-text-dark  { display: inline; }
[data-theme="light"] .theme-text-light { display: none; }

/* ── Intake media gallery (detail view, top of card) ────────── */
.media-gallery {
  float: right;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 4px 0 20px;
  margin-bottom: 4px;
  & .media-item {
    margin: 0;
    flex-shrink: 0;
    .photo {
      max-width: 200px;
      max-height: 200px;
      border-radius: var(--radius);
      object-fit: cover;
      display: block;
      border: 1px solid var(--border-lt);
      transition: box-shadow .12s;
    }
    & .photo:hover {
      box-shadow: var(--shadow);
    }
    .video {
      max-width: 360px;
      max-height: 270px;
      display: block;
      border-radius: var(--radius);
    }
    .file-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 14px;
      background: var(--accent-bg);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      font-size: .875rem;
      color: var(--accent);
    }
    & figcaption {
      font-size: 0.75rem;
      text-align: center;
      margin-top: 0.3rem;
      color: var(--muted);
    }
  }
}

/* ── Collapsible field groups (detail view) ──────────────────── */
details > summary {
    cursor: pointer;
    list-style: none;
}
details > summary > h4.group-summary {
    display: inline;
    margin: 0;
}
details > summary::before {
    content: '▶ ';
    font-size: 0.75em;
}
details[open] > summary::before {
    content: '▼ ';
}

/* ── Event day groups (detail view) ─────────────────────────── */
details.event-day-group {
    margin: 4px 0;
    grid-column: 1 / -1;
}
details.event-day-group > summary > h4.event-day-summary {
    display: inline;
    margin: 0;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}
details.event-day-group > dl {
    margin: 0;
    padding-left: 1rem;
    border-left: 2px solid var(--border-lt);
}

/* Event media gallery */
.event-edit-link {
    font-size: 0.75rem;
    margin-left: 0.5rem;
    opacity: 0.7;
}
.event-media {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.event-media-item {
    margin: 0;
}
.event-photo {
    max-width: 160px;
    max-height: 160px;
    border-radius: 4px;
    object-fit: cover;
    display: block;
}
.event-video {
    max-width: 320px;
    max-height: 240px;
    display: block;
}
.event-media-item figcaption {
    font-size: 0.75rem;
    text-align: center;
    margin-top: 0.2rem;
}