/* ─── Reset & box model ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ─── Tokens ──────────────────────────────────────────────────────────── */
:root {
  --color-bg:       #1c1c1e;
  --color-surface:  #2c2c2e;
  --color-border:   #3a3a3c;
  --color-primary:  #f5a623;
  --color-primary-hover: #d4891a;
  --color-danger:   #ef4444;
  --color-success-bg: rgba(34,197,94,.12);
  --color-success-border: rgba(34,197,94,.3);
  --color-error-bg: rgba(220,38,38,.12);
  --color-error-border: rgba(220,38,38,.35);
  --color-text:     #ffffff;
  --color-muted:    #adadad;
  --radius:         8px;
  --shadow:         0 1px 4px rgba(0,0,0,.4);
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ─── Base ────────────────────────────────────────────────────────────── */
html { font-size: 16px; -webkit-text-size-adjust: 100%; background-color: var(--color-bg); }
body {
  font-family: var(--font);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.5;
  min-height: 100dvh;
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ─── App header ──────────────────────────────────────────────────────── */
.app-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 100;
}
.header-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1rem;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.app-name {
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--color-primary);
  text-decoration: none;
  letter-spacing: -.01em;
  white-space: nowrap;
  flex-shrink: 0;
}
.header-user-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  line-height: 1.15;
  padding: 0 .5rem 0 .25rem;
  flex-shrink: 0;
}
.header-user-name {
  font-size: .85rem;
  color: var(--color-text);
  white-space: nowrap;
}
.header-user-account {
  font-size: .7rem;
  color: var(--color-muted);
  white-space: nowrap;
}
.header-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.header-nav::-webkit-scrollbar { display: none; }

.header-nav-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 5px 10px;
  background: var(--color-surface);
  border-radius: 8px;
  border: 1px solid transparent;
  color: var(--color-text);
  text-decoration: none;
  flex-shrink: 0;
  transition: background .15s, border-color .15s;
}
.header-nav-tile:hover {
  background: #3a3a3c;
  border-color: var(--color-border);
  text-decoration: none;
}
.header-nav-tile.active {
  background: #3a3a3c;
  border-color: var(--color-primary);
}
.header-nav-icon {
  font-size: 1.1rem;
  line-height: 1;
  color: var(--color-primary);
}

/* ── Fairy icon sizing + amber tint ──────────────────────────────────────── */
.fairy-icon {
  display: inline-block;
  vertical-align: middle;
}
.fairy-icon-nav      { width: 20px; height: 20px; }
.fairy-icon-home-nav { width: 22px; height: 22px; }
.fairy-icon-heading  { width: 40px; height: 40px; }
.fairy-icon-empty    { width: 48px; height: 48px; }
.fairy-icon-dz       { width: 36px; height: 36px; }
.fairy-icon-btn      { width: 16px; height: 16px; vertical-align: text-bottom; }
.header-nav-label {
  font-size: .6rem;
  font-weight: 500;
  color: var(--color-muted);
  white-space: nowrap;
}
button.header-nav-tile {
  cursor: pointer;
  font-family: var(--font);
}

.header-signout {
  font-size: .8rem;
  color: var(--color-muted);
  margin-left: .4rem;
  flex-shrink: 0;
}
.logout-form { display: inline; }

/* ─── Nav badge (used in header on all pages) ─────────────────────────── */
.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.2em;
  height: 1.2em;
  padding: 0 0.35em;
  border-radius: 9999px;
  background: var(--color-primary);
  color: #000;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
  margin-left: 0.2em;
}

/* ─── Layout ──────────────────────────────────────────────────────────── */
.container {
  max-width: 900px;
  margin: 0 auto;
  padding: 1.5rem 1rem;
}

/* ─── Cards ───────────────────────────────────────────────────────────── */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow);
}
.card h2 { margin-bottom: .75rem; }

/* ─── Forms ───────────────────────────────────────────────────────────── */
.field {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  margin-bottom: 1rem;
}
.field label {
  font-size: .875rem;
  font-weight: 500;
  color: var(--color-text);
}
.field-hint {
  font-size: .8rem;
  color: var(--color-muted);
}

/* All inputs must be standard browser elements (Wispr Flow requirement) */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="date"],
textarea,
select {
  width: 100%;
  padding: .5rem .65rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-family: var(--font);
  font-size: 1rem;
  color: var(--color-text);
  background: var(--color-surface);
  appearance: auto;
  outline: none;
  transition: border-color .15s;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(245,166,35,.2);
}

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

/* ─── Buttons ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .5rem 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font);
  font-size: .9rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, border-color .15s;
  white-space: nowrap;
}
.btn:hover { background: var(--color-bg); text-decoration: none; }
.btn[hidden] { display: none; }

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

.btn-secondary { background: var(--color-surface); }

.btn-full { width: 100%; }

/* Plain link-style button — no visual chrome */
.btn-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--color-primary);
  font-family: var(--font);
  font-size: inherit;
  cursor: pointer;
  text-decoration: none;
}
.btn-link:hover { text-decoration: underline; }

.text-danger { color: var(--color-danger) !important; }

/* ─── Alerts ──────────────────────────────────────────────────────────── */
.alert {
  padding: .75rem 1rem;
  border-radius: var(--radius);
  margin-bottom: 1.25rem;
  font-size: .9rem;
  border: 1px solid transparent;
}
.alert-error {
  background: var(--color-error-bg);
  border-color: var(--color-error-border);
  color: #fca5a5;
}
.alert-success {
  background: var(--color-success-bg);
  border-color: var(--color-success-border);
  color: #86efac;
}

/* ─── Auth pages ──────────────────────────────────────────────────────── */
.auth-page { display: flex; align-items: flex-start; justify-content: center; padding-top: 5vh; }
.auth-container {
  width: 100%;
  max-width: 420px;
  padding: 1rem;
}
.auth-title {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: .25rem;
  text-align: center;
}
.auth-logo {
  display: block;
  width: 300px;
  height: auto;
  margin: 0 auto 1rem;
  border-radius: 8px;
}
.auth-subtitle {
  color: var(--color-muted);
  font-size: .9rem;
  text-align: center;
  margin-bottom: 1.5rem;
}
.auth-form {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow);
  margin-top: 1.25rem;
}
.auth-secondary-link {
  text-align: center;
  margin-top: 1.5rem;
  color: var(--color-muted);
  font-size: .9rem;
}
.auth-secondary-link a {
  color: var(--color-primary);
  text-decoration: none;
}
.auth-secondary-link a:hover {
  text-decoration: underline;
}
.forgot-password-link {
  display: inline-block;
  margin-top: .4rem;
  font-size: .8rem;
  color: var(--color-muted);
  text-decoration: none;
}
.forgot-password-link:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

/* ─── Admin page ──────────────────────────────────────────────────────── */
.admin-section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow);
}
.admin-section h2 { font-size: 1.1rem; margin-bottom: 1rem; }

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
  margin-bottom: 1rem;
}
.admin-table th {
  text-align: left;
  padding: .4rem .6rem;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-muted);
  font-weight: 500;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.admin-table td {
  padding: .5rem .6rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}
.admin-table tr:last-child td { border-bottom: none; }

.actions-cell { white-space: nowrap; }
.role-toggle  { font-size: .85rem; }
.role-badge   { font-size: .85rem; color: var(--color-muted); }
.delete-confirm { font-size: .85rem; }

/* Super-admin sections — visually distinct so they're recognizable
   as platform-wide controls separate from per-account admin. */
.super-admin-section {
  border-left: 3px solid var(--color-primary);
  position: relative;
}
.super-admin-badge {
  display: inline-block;
  background: var(--color-primary);
  color: #fff;
  font-size: .65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: .15rem .5rem;
  border-radius: 3px;
  margin-bottom: .6rem;
}
.btn-small {
  font-size: .8rem;
  padding: .3rem .65rem;
}
.invite-create-form {
  display: flex;
  gap: .75rem;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

/* Hover-reveal clipboard icon for copyable readonly inputs.
   Used in admin Households (email-to-upload) and Invites (signup URL). */
.copy-input-wrap {
  position: relative;
}
.copy-input-wrap .copy-icon-btn {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: var(--color-muted);
  padding: 2px;
  margin: 0;
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s, color .12s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.copy-input-wrap:hover .copy-icon-btn { opacity: 1; }
.copy-input-wrap .copy-icon-btn:hover { color: var(--color-text); }
.copy-input-wrap .copy-icon-btn.copied { opacity: 1; color: #2ecc71; }

.user-edit-form {
  padding: .6rem .25rem;
}
.user-edit-fields {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: .5rem 1rem;
  margin-bottom: .65rem;
}
.field-label-sm {
  display: block;
  font-size: .78rem;
  font-weight: 500;
  color: var(--color-muted);
  margin-bottom: .2rem;
}
.user-edit-fields input,
.user-edit-fields select {
  font-size: .85rem;
  padding: .35rem .5rem;
}
.user-edit-actions {
  display: flex;
  gap: .5rem;
}
.btn-sm {
  padding: .3rem .75rem;
  font-size: .85rem;
}
@media (max-width: 700px) {
  .user-edit-fields { grid-template-columns: 1fr 1fr; }
}

/* ─── Notes star indicator ────────────────────────────────────────────────── */
/* Appears on any positioned photo thumbnail. Applied in gallery, dump, home. */
.photo-notes-star {
  position: absolute;
  top: .35rem;
  right: .35rem;
  font-size: 15px;
  line-height: 1;
  z-index: 2;
  pointer-events: none;
  color: rgba(255,255,255,.5);
  text-shadow: 0 1px 3px rgba(0,0,0,.7), 0 0 6px rgba(0,0,0,.35);
}
.photo-notes-star.has-notes { color: #f5a623; }

.add-form {
  margin-top: 1rem;
  border: none;
}
.add-form > summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
}
.add-form > summary::-webkit-details-marker { display: none; }
.inline-form {
  margin-top: 1rem;
  padding: 1rem;
  background: var(--color-bg);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
}

/* ─── Person chips + dropdown (shared: intake + gallery) ──────────────────── */

.person-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-bottom: .35rem;
  min-height: 0;
}

.person-chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .2rem .55rem;
  background: var(--color-primary);
  color: #fff;
  border-radius: 999px;
  font-size: .8rem;
  font-family: var(--font);
}
.person-chip button {
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  font-size: .95rem;
  opacity: .75;
  font-family: var(--font);
}
.person-chip button:hover { opacity: 1; }

.person-input-wrap { position: relative; }

.person-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0; right: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  list-style: none;
  z-index: 200;
  max-height: 180px;
  overflow-y: auto;
}
.person-dropdown li {
  padding: .45rem .75rem;
  font-size: .9rem;
  cursor: pointer;
}
.person-dropdown li:hover,
.person-dropdown li[aria-selected="true"] { background: var(--color-bg); }

.person-dropdown-add {
  color: var(--color-primary);
  border-top: 1px solid var(--color-border);
  font-size: .85rem;
}
.person-dropdown-add:hover { background: rgba(245,166,35,.1) !important; }

/* ─── New Person modal (shared: intake + gallery) ──────────────────────────── */

.new-person-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 700;
}
.new-person-overlay[hidden] { display: none; }

.new-person-modal {
  background: var(--color-surface);
  border-radius: calc(var(--radius) * 1.5);
  box-shadow: 0 8px 40px rgba(0,0,0,.18);
  width: 100%;
  max-width: 360px;
  margin: 1rem;
  display: flex;
  flex-direction: column;
}

.new-person-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .8rem 1.1rem;
  border-bottom: 1px solid var(--color-border);
}

.new-person-title {
  font-size: .95rem;
  font-weight: 600;
}

.new-person-close {
  background: none;
  border: none;
  font-size: 1rem;
  color: var(--color-muted);
  cursor: pointer;
  padding: .2rem .35rem;
  border-radius: var(--radius);
  line-height: 1;
}
.new-person-close:hover { color: var(--color-text); }

.new-person-body {
  padding: 1rem 1.1rem;
}
.new-person-body .field { margin-bottom: .75rem; }

.new-person-footer {
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
  padding: .75rem 1.1rem;
  border-top: 1px solid var(--color-border);
}

/* ─── Utilities ───────────────────────────────────────────────────────── */
.muted { color: var(--color-muted); }

/* ─── Desktop tweaks (min-width: 640px) ──────────────────────────────── */
@media (min-width: 640px) {
  .auth-page { padding-top: 8vh; }
  .inline-form { max-width: 480px; }
}

/* ─── Mobile navigation (hamburger + slide-in drawer) ─────────────────── */

/* Mobile controls: hidden on desktop, shown < 768px */
.header-mobile-right { display: none; }

@media (max-width: 767px) {
  .header-nav          { display: none; }
  .header-user-info    { display: none; }
  .header-mobile-right { display: flex; align-items: center; gap: .4rem; }

  .header-mobile-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .15rem;
    min-width: 0;
  }

  .header-user-mobile {
    font-size: .85rem;
    color: var(--color-muted);
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .header-mobile-account {
    font-size: .7rem;
    color: var(--color-muted);
    opacity: .75;
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .header-mobile-email {
    background: none;
    border: none;
    color: var(--color-primary);
    font-size: .7rem;
    font-family: var(--font);
    padding: 0;
    cursor: pointer;
    white-space: nowrap;
  }

  .nav-hamburger {
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    padding: .2rem .3rem;
    color: var(--color-text);
    cursor: pointer;
    flex-shrink: 0;
  }
}

/* Overlay — dims the page when drawer is open */
.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 300;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}

/* Drawer — fixed panel, off-screen right by default */
.nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(280px, 85vw);
  background: var(--color-surface);
  border-left: 1px solid var(--color-border);
  box-shadow: -4px 0 24px rgba(0, 0, 0, .12);
  z-index: 301;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .25s ease;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Open state — driven by body.nav-open */
body.nav-open .nav-overlay { opacity: 1; pointer-events: auto; }
body.nav-open .nav-drawer  { transform: translateX(0); }
body.nav-open              { overflow: hidden; }

/* Drawer header row — mirrors app-header height */
.nav-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  height: 52px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.nav-drawer-user {
  font-size: .875rem;
  color: var(--color-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.nav-drawer-close {
  background: none;
  border: none;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--color-muted);
  cursor: pointer;
  padding: .4rem .5rem;
  flex-shrink: 0;
  margin-left: .5rem;
}
.nav-drawer-close:hover { color: var(--color-text); }

/* Nav links list */
.nav-drawer-links {
  list-style: none;
  padding: .5rem 0;
  flex: 1;
}

.nav-drawer-links li a,
.nav-drawer-links li button[type="submit"] {
  display: block;
  padding: .8rem 1.25rem;
  font-size: 1rem;
  font-family: var(--font);
  font-weight: 400;
  color: var(--color-text);
  text-decoration: none;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: background .1s;
}
.nav-drawer-links li a:hover,
.nav-drawer-links li button[type="submit"]:hover {
  background: var(--color-bg);
  text-decoration: none;
}

/* Sign out sits at the bottom, separated by a divider */
.nav-drawer-signout {
  border-top: 1px solid var(--color-border);
  margin-top: auto;
}

/* ─── Password visibility toggle ─────────────────────────────────────────── */

.pw-wrap {
  position: relative;
}

/* Pull the input's right padding in so typed text never slides under the button */
.pw-wrap input[type="password"],
.pw-wrap input[type="text"] {
  padding-right: 2.6rem;
}

.pw-toggle {
  position: absolute;
  right: .45rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: .3rem;
  cursor: pointer;
  color: var(--color-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: color .15s;
  /* Don't interfere with the input's focus ring */
  outline-offset: 2px;
}
.pw-toggle:hover { color: var(--color-text); }

/* ─── Album autocomplete dropdown ────────────────────────────────────── */
.album-autocomplete {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 50;
  max-height: 180px;
  overflow-y: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-top: 2px;
}
.album-autocomplete[hidden] { display: none; }
.album-ac-item {
  padding: .35rem .6rem;
  font-size: .82rem;
  cursor: pointer;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.album-ac-item:hover, .album-ac-item.active {
  background: rgba(245,166,35,.15);
}
.album-ac-source {
  color: var(--color-muted);
  font-size: .75rem;
}