/* The shell: the top bar and its tabs, the phone's bottom tab bar, the sub-bars, the Families tab
 * (list + record, the Birthdays and Refuah sheleima views), and the chart as a stage on a phone.
 * style.css holds the theme and everything drawn inside a view (the plan, the Needs table, the
 * Names view, the panel, Signs, Publish); this file is the page around them.  Loaded after it. */

/* ---- top bar ---- */
#topbar { display: flex; align-items: center; gap: 8px; padding: 5px 10px; background: var(--panel); border-bottom: 1px solid var(--line); min-height: 44px; }
#topbar .brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; color: var(--ink); text-decoration: none; white-space: nowrap; }
#topbar .brand img { height: 30px; width: auto; display: block; }
#tabs { display: inline-flex; gap: 2px; margin-left: 10px; }
#tabs a { padding: 6px 14px; border-radius: 6px; text-decoration: none; color: var(--ink); border: 1px solid transparent; font-weight: 600; }
#tabs a:hover { border-color: var(--line); }
#tabs a.active { background: var(--accent); color: var(--accent-ink); }
#tabbar { display: none; }
.only-phone { display: none; }

/* ---- a view's own bar under the top bar, and a section's heading line ---- */
.subbar { display: flex; align-items: center; gap: 8px; padding: 5px 10px; background: #fafaf7; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.subbar .field { display: inline-flex; align-items: center; gap: 6px; }
.subbar .seg button { padding: 5px 12px; font-weight: 600; }
.sec-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 14px 6px; }
.sec-head h2 { margin: 0; font-size: 20px; }
.sec-head input[type=search] { min-width: 200px; }

/* ---- Families: the list beside the family's page ---- */
#famBody { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0 14px 10px; }
#famBody > .table-wrap { flex: 1; min-height: 0; }
#famSplit { flex: 1; min-height: 0; display: flex; gap: 12px; }
.fam-list { width: 290px; flex: none; overflow: auto; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.fl-item { display: flex; flex-direction: column; gap: 1px; padding: 7px 10px; border-bottom: 1px solid #eee; cursor: pointer; }
.fl-item:hover { background: #f5f7fa; }
.fl-item.on { background: #eef3f9; box-shadow: inset 3px 0 0 var(--accent); }
.fl-item .fl-name { font-size: 14px; }
.fl-empty { padding: 20px; text-align: center; }
.fam-detail { flex: 1; min-width: 0; overflow: auto; padding-bottom: 20px; }
.fd-empty { padding: 40px; text-align: center; }
.fd-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.fd-head h3 { margin: 0; font-size: 22px; font-weight: 400; }
.fd-head h3 b { font-weight: 700; }
.fd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 10px; }
.fd-box { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; min-width: 0; }
.fd-box.wide { grid-column: 1 / -1; }
.fd-box .box-h { display: flex; align-items: center; gap: 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin-bottom: 6px; }
.fd-box .box-h .muted { text-transform: none; letter-spacing: 0; font-size: 11px; }
.fd-box .box-h button.small { padding: 1px 8px; font-size: 11px; text-transform: none; letter-spacing: 0; }
.fd-box label.f { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.fd-box label.f input { font-size: 14px; color: var(--ink); }
.fd-box textarea { width: 100%; font: inherit; font-size: 13px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; resize: vertical; margin-bottom: 6px; }
/* the people table: the Names view's row styles (style.css), plus the relation, birthday and card cells */
.fd-people-wrap { overflow-x: auto; }
table.fd-people { width: 100%; }
table.fd-people thead th { position: static; font-size: 11px; color: var(--muted); font-weight: 600; text-align: left; padding: 2px 6px; }
table.fd-people tr.person > td { white-space: nowrap; vertical-align: middle; }
table.fd-people td.who input, table.fd-people td select { width: auto; min-width: 0; padding: 3px 6px; font-size: 13px; border: 1px solid #e0e0da; background: #fff; }
table.fd-people td.who input { width: 9em; }
table.fd-people td.heb input { width: 9em; min-width: 7em; font-size: 14px; }
table.fd-people tr.person > td.dob { white-space: normal; min-width: 14em; }   /* the Hebrew date / next birthday line wraps under the date */
table.fd-people td.dob input[type=date] { width: auto; padding: 2px 4px; font-size: 13px; border: 1px solid #e0e0da; background: #fff; }
table.fd-people td.dob .toggle-lbl { margin-left: 4px; }
table.fd-people .bd-line { line-height: 1.3; margin-top: 2px; }
table.fd-people td.card { text-align: center; }
table.fd-people tr.srcrow { display: table-row; }
table.fd-people tr.srcrow > td { padding: 0 6px 6px 24px; border-bottom: 1px solid #e8e8e3; }
table.fd-people tr.person:has(+ tr.srcrow) > td { border-bottom: 0; }
.fd-addp { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; padding: 8px 6px 2px; }
.fd-addp input, .fd-addp select { padding: 3px 6px; font-size: 13px; }
.fd-addp input[data-a="n"] { width: 11em; }
.fd-addp input[dir="rtl"] { width: 9em; font-size: 14px; text-align: right; }
.fd-addp .ben { color: var(--muted); font-size: 13px; }
.fd-addp .father-wrap { display: inline-flex; align-items: center; gap: 1px; }
.fd-addp .father-wrap .x { border: 0; background: none; color: var(--muted); padding: 0 4px; font-size: 12px; }
.fd-addp .add { font-size: 12px; padding: 3px 8px; }
/* the Mi Sheberach card: as the gabbai reads it */
.msb { border: 1.5px solid #c9c2a8; border-radius: 8px; background: #fffdf5; padding: 10px 14px; font-family: "Frank Ruhl Libre", serif; }
.msb-name { font-size: 22px; font-weight: 700; line-height: 1.3; }
.msb-fam { font-size: 17px; line-height: 1.5; margin-top: 4px; }
.msb-en { margin-top: 4px; }
/* refuah sheleima rows (the family page and the view) */
table.ch td.heb { font-size: 16px; text-align: right; }
table.ch td.acts { white-space: nowrap; text-align: right; }
table.ch td.acts button { padding: 1px 7px; font-size: 12px; margin-left: 2px; }
table.ch td.acts .x { border: 0; background: none; color: var(--muted); }
table.ch td.acts .x:hover { color: var(--danger); }
table.ch tr.done > td { color: var(--muted); }
table.ch tr.done td.heb { text-decoration: line-through; }
table.ch tr.past-h > td { background: #f4f4f1; }
table.roster.ch td, table.roster.bd td { white-space: normal; }
.ch-top { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; }
.ch-form { display: grid; grid-template-columns: 1fr auto; gap: 0 8px; }
.ch-form label { display: block; font-size: 12px; color: var(--muted); }
.ch-form label:nth-child(1) { grid-column: 1; }
.ch-form label:nth-child(3), .ch-form label:nth-child(4), .ch-form label:nth-child(5), .ch-form label:nth-child(6) { grid-column: 1 / -1; }
.ch-form input[dir="rtl"] { font-size: 17px; text-align: right; }
.ch-form select { width: 5em; margin-bottom: 8px; font-size: 16px; }
/* birthdays */
table.bd tr.soon > td { background: #fff8e1; }
table.bd td.who { font-size: 14px; }
.bd-wrap, .ch-wrap { flex: 1; min-height: 0; overflow: auto; border: 1px solid var(--line); border-radius: 6px; background: #fff; }

/* ---- the chart as a stage (a phone): a fixed frame the plan moves inside ---- */
#secChart { position: relative; }
#canvasWrap.stage { position: relative; overflow: hidden; padding: 0; background: #e9e9e4; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; }
#canvasWrap.stage.dragging { cursor: grabbing; }
#canvasWrap.stage #chart { position: absolute; left: 0; top: 0; width: auto; height: auto; max-height: none; transform-origin: 0 0; border: 1px solid var(--line); box-shadow: 0 2px 12px rgba(0,0,0,.12); will-change: transform; }
#canvasWrap.stage #chart.glide { transition: transform .22s ease-out; }   /* a button, a double-tap or a found seat eases the chart there; a finger moves it as it goes */
#canvasWrap.stage #chart .seat { cursor: pointer; }
#chart .seat.found rect { fill: #ffd27a; stroke: #b26a00; stroke-width: 1.4; }
#chart .seat.found.cur rect { fill: #ffb547; stroke: #7a4300; stroke-width: 1.8; }
.st-hint { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); background: rgba(255,255,255,.9); border: 1px solid var(--line); border-radius: 999px; padding: 3px 12px; white-space: nowrap; pointer-events: none; }
#stInfo { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: #fff8e6; border-top: 1px solid #f0dca0; font-size: 14px; }
#stInfo #stInfoText { flex: 1; min-width: 0; }
#stInfo b { font-size: 15px; }
#stInfo button { min-height: 32px; min-width: 32px; padding: 0 8px; }
#stBar { display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: var(--panel); border-top: 1px solid var(--line); flex-wrap: wrap; }
#stBar input { flex: 1; min-width: 120px; min-height: 38px; font-size: 16px; }   /* 16px: iOS does not zoom the page when the field is focused */
#stBar button { min-height: 38px; min-width: 38px; padding: 0 10px; font-size: 17px; line-height: 1; }
#stBar #stZoomFit { font-size: 13px; min-width: 56px; }
#stCounts { color: var(--muted); line-height: 1.2; margin-left: auto; }
#stCounts b { color: var(--ink); }
#stCounts .lg { display: inline-block; padding: 0 5px; border-radius: 4px; margin-left: 4px; }
#stCounts .lg.men { background: var(--men); }
#stCounts .lg.women { background: var(--women); }

/* ---- a phone: the tab bar at the bottom, one scroll per view, bigger targets ---- */
@media (max-width: 700px) {
  html, body { height: 100%; overscroll-behavior-y: none; }
  body { height: 100dvh; -webkit-text-size-adjust: 100%; }
  .no-phone { display: none !important; }
  .only-phone { display: inline-block; }
  #topbar { padding: 4px 8px; padding-top: calc(4px + env(safe-area-inset-top)); min-height: 42px; }
  #topbar .brand span, #tabs { display: none; }
  #topbar button { min-height: 34px; }
  #tabbar { display: flex; flex: none; background: var(--panel); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
  #tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px 0 4px; font-size: 11px; font-weight: 600; color: var(--muted); text-decoration: none; min-height: 50px; }
  #tabbar a .ic { font-size: 21px; line-height: 1.1; }
  #tabbar a.active { color: var(--accent); }
  .subbar { padding: 4px 8px; gap: 6px; }
  .subbar select, .subbar button, .subbar .seg button { min-height: 36px; }
  /* the seating bar: the views and Gaps on one line, the event on a line of its own */
  #seatBar .grow { display: none; }
  #seatBar #btnGaps { margin-left: auto; }
  #seatBar .field { flex: 1 1 60%; order: 10; min-width: 0; }   /* too wide for the first line, so it starts the second — with Events… beside it */
  #seatBar select { flex: 1; min-width: 0; max-width: 100%; text-overflow: ellipsis; }
  #seatBar #btnEvents { order: 11; }
  #seatBar #btnPanel { order: 12; }
  .sec-head { padding: 6px 8px 4px; gap: 6px; }
  .sec-head h2 { font-size: 17px; }
  .sec-head .seg { max-width: 100%; overflow-x: auto; }       /* beside the title; the search and the view's controls take the next line */
  .sec-head .seg button { white-space: nowrap; min-height: 36px; }
  .sec-head input[type=search] { flex: 1; min-width: 120px; min-height: 38px; font-size: 16px; }
  .sec-head button { min-height: 38px; }
  #famSummary { display: none; }
  #famBody { padding: 0 8px 8px; }
  /* the list, or the family: one at a time, the page's Back button goes from the family to the list */
  #famSplit:not(.detail-open) .fam-detail, #famSplit.detail-open .fam-list { display: none; }
  .fam-list { width: auto; flex: 1; }
  .fl-item { padding: 10px; }
  .fd-head h3 { font-size: 19px; }
  .fd-back { min-height: 36px; }
  .fd-grid { grid-template-columns: 1fr; }
  .fd-box input, .fd-box select { min-height: 36px; font-size: 16px; }
  /* the people table as cards: one person per card, each cell labelled; the name, the Hebrew name,
     the father and the birthday take a full line, relation + tribe and card + ✕ share one */
  .fd-people-wrap { overflow: visible; }
  table.fd-people thead { display: none; }
  table.fd-people tbody { display: block; }
  table.fd-people tbody tr.person { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: dense; gap: 4px 8px; padding: 8px 6px; border-top: 2px solid #e0e0da; }
  table.fd-people tbody tr.person > td { display: block; border: 0; padding: 0; height: auto; white-space: normal; min-width: 0; }
  table.fd-people tbody tr.person > td[data-l]::before { content: attr(data-l); display: block; font-size: 11px; color: var(--muted); }
  table.fd-people tbody tr.person > td.who, table.fd-people tbody tr.person > td.heb, table.fd-people tbody tr.person > td.dob { grid-column: 1 / -1; }
  table.fd-people tbody tr.person > td.ben { display: none; }
  table.fd-people tbody tr.person > td.rm { grid-column: 2; text-align: right; }
  table.fd-people tbody tr.person > td.card { text-align: left; }
  table.fd-people td.who input, table.fd-people td.heb input, table.fd-people td select, table.fd-people td.dob input[type=date] { width: 100%; min-height: 36px; font-size: 16px; }
  table.fd-people tr.srcrow { display: block; }
  table.fd-people tr.srcrow > td { display: block; padding: 0 6px 6px; }
  .fd-addp input, .fd-addp select { min-height: 36px; font-size: 16px; }
  .fd-addp input[data-a="n"], .fd-addp input[dir="rtl"] { width: 100%; }
  .ch-form { grid-template-columns: 1fr; }
  .ch-form label { grid-column: 1 !important; }
  /* the chart fills what is left between the bars */
  #secChart { min-height: 0; }
  #canvasWrap.stage { flex: 1; min-height: 0; }
  #syncBar { top: calc(6px + env(safe-area-inset-top)); }
  dialog { max-width: 94vw; }
}

/* ---- print: the chart (Seating), a Families view, or one family's card ---- */
@media print {
  #topbar, #tabbar, #seatBar, .subbar, #stBar, #stInfo, .st-hint { display: none !important; }
  body.print-fam > *:not(main), body.print-fam main > *:not(#secFamilies), body.print-fam #secFamilies > *:not(#famBody), body.print-fam .fam-list, body.print-fam .fd-head { display: none !important; }
  body.print-fam, body.print-fam main, body.print-fam #secFamilies, body.print-fam #famBody { display: block; height: auto; overflow: visible; }
  body.print-fam .fam-detail, body.print-fam .table-wrap { overflow: visible; border: 0; }
  body.print-fam .fd-grid { display: block; }
  body.print-fam .fd-box { border: 0; padding: 0; margin-bottom: 14px; break-inside: avoid; }
  body.print-card .fd-box:not(.msb-box) { display: none !important; }
  body.print-card .msb { font-size: 1.3em; padding: 24px; }
  body.print-card .msb-name { font-size: 30px; }
  body.print-card .msb-fam { font-size: 22px; }
  table.ch td.acts, table.fd-people td.rm { display: none !important; }
}