/* =========================
   Mean Reviews — styles.css
   Retro Pizza Box theme 🍕
   ========================= */

/* ---- Theme tokens ---- */
:root{
  --bg: #f3e9d2;            /* cardboard */
  --card-bg: #fffdf6;       /* warm paper */
  --ink: #262421;           /* text color */
  --muted: #7a7360;

  --line: #e7dec1;          /* box edge */
  --shadow: 0 8px 24px rgba(0,0,0,.06);

  --primary: #c62828;       /* marinara */
  --gold: #d4a018;          /* star gold */

  --input-bg: #fff;
  --input-border: #e7dec1;

  --pill-bg: #fff;
  --pill-border: #e5dbc0;
  --pill-selected: #fff8d8;

  --right-col: 110px;       /* width for right column in lists */
}

/* ---- Base ---- */
*{ box-sizing: border-box }
html{ -webkit-text-size-adjust: 100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background: var(--bg);
  color: var(--ink);
  line-height:1.45;
}
.wrap{ max-width:820px; margin:0 auto; padding:24px }

/* ---- Header (center only title/version) ---- */
h1{
  margin: 8px 0 4px;
  text-align: center;
  display:flex; align-items:baseline; justify-content:center; gap:4px;
}
.app-footer{ text-align:center; }
#appVersion{
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .2px;
}
.muted{ color: var(--muted); }
.tm{ font-size:.6em; opacity:.7; vertical-align: super; }

/* Header card (white backing behind the title) */
.pizza-header{
  border: 2px solid var(--line);
  border-radius: 16px;
  background: var(--card-bg);
  box-shadow: 0 4px 8px rgba(0,0,0,.05);
  margin: 12px 0 20px;
  padding: 16px;
}


/* ---- Top bar (“Hello user!”) ---- */
.topbar{
  background:#fff5dc;
  border:2px solid var(--line);
  border-radius:12px;
  padding:10px 12px;
  box-shadow: 0 2px 7px rgba(0,0,0,.03);
  margin-bottom: 8px;
}
.hello{
  font-weight: 800;
  display:flex; align-items:center;
}
.hello-glyph{
  width:22px; height:22px;
  margin-left:6px;
  display:inline-block;
  vertical-align:-2px;
}

/* ---- Cards ---- */
.card{
  background: var(--card-bg);
  border: 2px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  box-shadow: var(--shadow);
  margin: 16px 0;
}
.card h2{ margin:0 0 12px; }

/* ---- Labels + Inputs ---- */
label{ display:block; margin:10px 0; font-weight:700; }
input, textarea{
  width:100%;
  background: var(--input-bg);
  color: var(--ink);
  border: 2px solid var(--input-border);
  border-radius: 12px;
  padding: 12px;
}
textarea{ resize: vertical; min-height:72px; }
input:focus, textarea:focus{
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(38,36,33,.12);
  outline: none;
}

/* iOS prevent zoom on focus */
@media (max-width: 480px){
  input, textarea, select, button { font-size:16px; }
}
@supports (-webkit-touch-callout: none){
  input, textarea, select, button { font-size:16px !important; }
}

/* Date input: same height + bold, centered vertically */
input[type="date"]{
  height:44px; line-height:44px; font-weight:700; padding:0 12px; display:block;
}
@supports (-webkit-touch-callout: none){
  input[type="date"]{ -webkit-appearance:none; background-clip:padding-box; }
  input[type="date"]::-webkit-datetime-edit{ font-weight:700; line-height:44px; padding:0 2px; }
  input[type="date"]::-webkit-datetime-edit-fields-wrapper{ display:flex; align-items:center; }
}

/* ---- Buttons ---- */
.btn{
  border:2px solid var(--input-border);
  background:#fff;
  color:var(--ink);
  padding:10px 14px;
  border-radius:12px;
  cursor:pointer;
  font-weight:700;
}
.btn.primary{
  background: linear-gradient(135deg, var(--primary), #e15252);
  border-color: transparent;
  color:#fff;
}
.btn[disabled]{ opacity:.5; pointer-events:none }

/* ---- Auth Tabs ---- */
.authTabs{ display:flex; gap:8px; margin-bottom:8px; }
.authTabs .btn{ flex:1; }

/* ---- Choice pills ---- */
.choiceRow{ display:flex; gap:8px; flex-wrap:wrap; margin:8px 0; }
.pill.choice{
  background: var(--pill-bg);
  border: 2px solid var(--pill-border);
  border-radius: 999px;
  padding: 10px 14px;
  font-weight:800;
}
.pill.choice .emoji{ display:inline-block; font-size:1.3em; margin-right:8px; line-height:1; }
.pill.choice.selected{
  background: var(--pill-selected);
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(217,164,65,.15) inset;
}
.choiceDetails{ margin: 8px 0 14px; }

/* Emoji color accents */
.emoji{ display:inline-block; }
.emoji-S{
  color: var(--gold);
  text-shadow: 0 0 1px rgba(0,0,0,.35), 0 0 10px rgba(212,160,24,.35);
}
.emoji-N{
  color: #7a7a7a !important;
  filter: grayscale(100%) saturate(0) brightness(0.9);
}

/* ---- Lists (My / Community) ---- */
.rowline{ display:flex; align-items:flex-start; gap:12px; padding:10px 0; border-bottom:2px solid var(--line); }
.rowline:last-child{ border-bottom:0; }
.row-left{ flex:1 1 auto; min-width:0; }
.row-right{ flex:0 0 var(--right-col); text-align:right; white-space:nowrap; }
.row-right .emoji{ vertical-align:middle; }
.row-right .people{ font-size:.75em; margin-left:6px; vertical-align:middle; }

.row-left .name{
  font-weight:700;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  word-break:break-word;
  overflow-wrap:anywhere;
}
.row-left .meta{
  color: var(--muted);
  font-size:.9em;
  margin-top:2px;
}

/* ---- Autocomplete (iOS-friendly) ---- */
.ac-wrap{ position:relative; }
.ac-list{
  position:absolute; top:calc(100% + 4px); left:0; right:0;
  background:#fff;
  border:2px solid var(--line);
  border-radius:12px;
  box-shadow: var(--shadow);
  max-height:240px; overflow:auto;
  z-index:2000;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  touch-action: pan-y;
}
.ac-item{
  display:flex; align-items:baseline; gap:6px;
  padding:10px 12px; cursor:pointer;
  touch-action: manipulation;
}
.ac-item:hover, .ac-item.active{ background:#fff8d8; }
.ac-name{ font-weight:600; }
.ac-dash{ opacity:.6; }
.ac-meta{ font-size:.85em; color: var(--muted); }
.ac-footer{
  padding:8px 12px; font-size:.85rem; color: var(--muted);
  border-top:1px dashed var(--line); background:#fffdf6;
  cursor:default;
}

/* ---- Modal (NDA) ---- */
.modal{
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  background: rgba(0,0,0,.35);
  z-index: 50;
}
.modal .modal-content{
  background: var(--card-bg);
  border: 2px solid var(--line);
  border-radius: 16px;
  padding: 18px;
  max-height: 80vh;
  overflow: auto;
}

/* ---- Spinner (network) ---- */
.spinner{
  position:fixed; right:16px; bottom:16px; width:48px; height:48px;
  display:grid; place-items:center;
  background: rgba(0,0,0,.5);
  color:#fff;
  border-radius:50%;
  opacity:0; transform: scale(.9);
  transition: opacity .25s, transform .25s, right .25s, bottom .25s;
  z-index: 9999; pointer-events:none;
}
.spinner.show{ opacity:1; transform: scale(1); }
.spinner.shrink{ opacity:.7; transform: scale(.65); right:12px; bottom:12px; }
.spinner .glyph{
  width:28px; height:28px; display:block;
  background: url('/public/icons/spinner-devil.png') no-repeat center / contain;
  text-indent:-9999px; /* hide fallback text */
  animation: spin 1s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }

/* ---- Misc ---- */
.err{ color: var(--primary); margin-top:8px; }
.hidden{ display:none !important; }

/* Add a touch of space between "Hello," and the username */
.hello #helloUser{
  margin-left: 2px;          /* tweak to taste: 4–8px works well */
}

/* Visits modal: tighten title → address gap */
#visitModalTitle{
  margin: 0 0 2px !important;   /* smaller gap under the name */
  line-height: 1.1;
}
#visitModalMeta{
  margin: 0 0 6px !important;   /* subtle breathing room above list */
}
#visitModalTitle .muted{
  font-weight: 500;             /* keep location unbolded */
}

/* --- Modal layout stays steady; prevent width jump when scrollbar appears --- */
.modal .modal-content{
  width: min(720px, calc(100% - 32px));
  max-height: 80vh;
  overflow-y: auto;              /* always allocates space */
  scrollbar-gutter: stable;      /* modern browsers: reserve gutter */
  padding: 18px;                 /* consistent edges */
}

/* Fallback for older browsers */
@supports not (scrollbar-gutter: stable){
  .modal .modal-content{ overflow-y: scroll; }
}

/* Title → meta spacing and smaller (unbold) location */
#visitModalTitle{
  margin: 0 0 2px !important;
  line-height: 1.1;
}
#visitModalTitle .loc{
  font-weight: 300;              /* not bold */
  color: var(--muted);
}
#visitModalMeta{
  margin: 0 0 6px !important;    /* tighter gap before list */
  font-size: .9em;
  color: var(--muted);
}

/* Loading placeholder */
#visitModalList .loading{
  padding: 8px 0;
  color: var(--muted);
  font-style: italic;
}

/* ====== iPhone tab sizing (fit within screen) ====== */
#mainTabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;                 /* safety on tiny screens */
  -webkit-overflow-scrolling: touch;
}
#mainTabs .btn.tab {
  white-space: nowrap;
}
@media (max-width: 420px){
  #mainTabs .btn.tab {
    padding: 8px 10px;              /* smaller hit area */
    font-size: 14px;                /* shrink text */
    border-radius: 10px;
    flex: 0 0 auto;                 /* keep single row, scroll if needed */
  }
}

/* ====== Reduce page side margins (more content width) ====== */
.wrap{ max-width: 820px; margin: 0 auto; padding: 16px; }  /* was 24px */
@media (max-width: 480px){
  .wrap{ padding: 12px; }                                   /* was 16/24px */
}

/* ====== Modal: consistent bounding + smaller restaurant title ====== */
.modal .modal-content{
  width: min(640px, calc(100vw - 28px));   /* fixed L/R gutters so content doesn't "pop" */
}
#visitModalTitle{
  font-size: 1.1rem;                      /* slightly smaller */
  font-weight: 800;
  line-height: 1.2;
}
#visitModalMeta{
  margin-top: 2px;                         /* tighter gap to title */
  font-size: .85rem;
}

/* ====== Modal rows: let notes span full width under the header line ====== */
/* Turn each visit row into a 2-row grid: (user | date) on row 1, notes across row 2 */
#visitModalList .visit-item{
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 12px;
  row-gap: 4px;
  align-items: start;
}
#visitModalList .visit-item .row-left{ display: contents; }         /* flatten children into grid */
#visitModalList .visit-item .row-right{ grid-column: 2; }           /* date/edit on the right */
#visitModalList .visit-item .row-right .spacer{ display: none; }

#visitModalList .visit-item .row-left .name{ grid-column: 1; }      /* username on the left (row 1) */
#visitModalList .visit-item .row-left .meta{
  grid-column: 1 / -1;                                             /* notes span full width (row 2) */
  margin-top: 2px;                                                 /* slightly tighter than default */
}

/* ====== Loading placeholder in modal ====== */
#visitModalList .loading{
  color: var(--muted);
  padding: 6px 0;
  text-align: left;
}

/* (Optional polish) keep emoji class behavior inside modal too */
#visitModalList .emoji { display:inline-block; }

/* Tabs: wrap onto new line instead of horizontal scroll */
#mainTabs{
  display: flex;
  gap: 6px;
  flex-wrap: wrap;               /* allow a 2nd line */
  overflow: visible;             /* undo prior overflow-x */
}
#mainTabs .btn.tab{
  white-space: normal;           /* undo nowrap so wrapping works */
  flex: 1 1 150px;               /* grow/shrink; wrap when cramped */
  text-align: center;
}
@media (max-width: 420px){
  #mainTabs .btn.tab{
    flex: 1 1 120px;
    padding: 8px 10px;
    font-size: 14px;
    border-radius: 10px;
  }
}

/* Modal visit rows: grid so notes span full width, and Rating is its own line below notes */
#visitModalList .visit-item{
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 12px;
  row-gap: 4px;
  align-items: start;
}
#visitModalList .visit-item .row-left{ display: contents; }
#visitModalList .visit-item .row-right{ grid-column: 2; }
#visitModalList .visit-item .row-right .spacer{ display: none; }

#visitModalList .visit-item .row-left .name{ grid-column: 1; }

/* Notes and Rating each occupy a full-width line beneath */
#visitModalList .visit-item .meta.notes,
#visitModalList .visit-item .rating-line{
  grid-column: 1 / -1;
}
#visitModalList .visit-item .meta.notes{ margin-top: 2px; }
#visitModalList .visit-item .rating-line{
  margin-top: 2px;
  color: var(--muted);
}
#visitModalList .rating-line .emoji{ margin-left: 4px; }

#visitModalTitle .loc{
  font-weight: 400;
  opacity: .85; 
}