/* Phone Batch B. Properties, tenants, documents, city rules, rent notices.
   New layout at phone width only. One column, one primary, folded sections. */

body.hub-v12.v12-phone #mainContent:has(.b12page) {
  background: var(--hub-canvas);
  overflow-x: hidden;
  padding: 0;
  max-width: none;
}

body.hub-v12.v12-phone .b12page {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 12px 28px;
  max-width: 100%;
  overflow-x: hidden;
  color: var(--hub-ink);
  box-sizing: border-box;
}

body.hub-v12.v12-phone .b12page * { box-sizing: border-box; }

body.hub-v12.v12-phone .b12sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

body.hub-v12.v12-phone .b12search { position: relative; display: block; }

body.hub-v12.v12-phone .b12search input {
  width: 100%;
  height: 46px;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid var(--hub-line);
  border-radius: 12px;
  background: #fff;
  color: var(--hub-ink);
  font-size: 16px;
}

body.hub-v12.v12-phone .b12search input:focus {
  outline: none;
  border-color: var(--hub-action);
  box-shadow: 0 0 0 4px var(--hub-action-l);
}

body.hub-v12.v12-phone .b12filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body.hub-v12.v12-phone .b12filters:empty { display: none; }

body.hub-v12.v12-phone .b12filters select,
body.hub-v12.v12-phone .b12filters .hub-select {
  flex: 1 1 140px;
  min-width: 0;
  max-width: 100%;
}

body.hub-v12.v12-phone .b12filters select {
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid var(--hub-line);
  border-radius: 12px;
  background: #fff;
  color: var(--hub-ink);
  font-size: 16px;
}

body.hub-v12.v12-phone .b12page .hub-select-input {
  min-height: 46px;
  height: 46px;
  border: 1px solid var(--hub-line);
  border-radius: 12px;
  font-size: 16px;
}

body.hub-v12.v12-phone .b12h {
  margin: 0;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -.3px;
}

body.hub-v12.v12-phone .b12sub,
body.hub-v12.v12-phone .b12note {
  margin: 0;
  color: var(--hub-ink-muted);
  font-size: 14.5px;
  line-height: 1.35;
}

body.hub-v12.v12-phone .b12card,
body.hub-v12.v12-phone .b12fold {
  width: 100%;
  max-width: 100%;
  border: 1px solid var(--hub-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(20, 30, 50, .05), 0 4px 14px rgba(20, 30, 50, .05);
}

body.hub-v12.v12-phone button.b12card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-height: 72px;
  padding: 14px;
  text-align: left;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

body.hub-v12.v12-phone .b12card b,
body.hub-v12.v12-phone .b12fold summary b {
  font-size: 16px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

body.hub-v12.v12-phone .b12chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

body.hub-v12.v12-phone .b12chip {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--hub-canvas);
  color: var(--hub-ink-muted);
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
}

body.hub-v12.v12-phone .b12-type { background: var(--hub-action-l); color: var(--hub-action-d); }
body.hub-v12.v12-phone .b12-vacant,
body.hub-v12.v12-phone .b12-queued { background: var(--hub-wait-l); color: var(--hub-wait); }
body.hub-v12.v12-phone .b12-banked { background: var(--hub-alert-l); color: var(--hub-alert); }
body.hub-v12.v12-phone .b12-green { background: var(--hub-done-l); color: var(--hub-done); }
body.hub-v12.v12-phone .b12-exempt,
body.hub-v12.v12-phone .b12-gray { background: var(--hub-canvas); color: var(--hub-ink-muted); }

body.hub-v12.v12-phone .b12fold > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 10px 14px;
  list-style: none;
  cursor: pointer;
}

body.hub-v12.v12-phone .b12fold > summary::-webkit-details-marker { display: none; }

body.hub-v12.v12-phone .b12summain {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

body.hub-v12.v12-phone .b12live {
  display: block;
  max-width: 100%;
  color: var(--hub-ink-muted);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.hub-v12.v12-phone .b12chev {
  flex: none;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--hub-ink-muted);
  border-bottom: 2px solid var(--hub-ink-muted);
  transform: rotate(45deg);
  margin-top: -4px;
}

body.hub-v12.v12-phone .b12fold[open] > summary .b12chev {
  transform: rotate(-135deg);
  margin-top: 4px;
}

body.hub-v12.v12-phone .b12body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 14px 14px;
}

body.hub-v12.v12-phone .b12body .b12fold { box-shadow: none; }

body.hub-v12.v12-phone .b12rate {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 0;
  border-top: 1px solid var(--hub-line);
  font-size: 14.5px;
}

body.hub-v12.v12-phone .b12back {
  align-self: flex-start;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--hub-action);
  font-size: 16px;
  font-weight: 700;
}

body.hub-v12.v12-phone button.b12pri,
body.hub-v12.v12-phone button.primary.b12pri,
body.hub-v12.v12-phone button.success.b12pri,
body.hub-v12.v12-phone #calcBtn.b12pri,
body.hub-v12.v12-phone #queueBtn.b12pri,
body.hub-v12.v12-phone #dtPlan.b12pri,
body.hub-v12.v12-phone #addRuleBtn.b12pri,
body.hub-v12.v12-phone #printQueuedBtn.b12pri {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  min-height: 54px;
  margin: 0;
  padding: 12px 16px;
  border: 0;
  border-radius: 12px;
  background: var(--hub-action);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

body.hub-v12.v12-phone .b12page button.b12ghost,
body.hub-v12.v12-phone .b12page .b12body button,
body.hub-v12.v12-phone .b12page .b12modes button,
body.hub-v12.v12-phone .b12page #ruleFormArea button,
body.hub-v12.v12-phone .b12page a.b12preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--hub-line);
  border-radius: 12px;
  background: #fff;
  color: var(--hub-ink);
  font-size: 16px;
  font-weight: 650;
  text-decoration: none;
}

body.hub-v12.v12-phone .b12check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: 16px;
}

body.hub-v12.v12-phone .b12check input {
  width: 22px;
  height: 22px;
}

body.hub-v12.v12-phone .b12page table.v12-keep { display: none; }

body.hub-v12.v12-phone .b12page #unitSearch,
body.hub-v12.v12-phone .b12page #reviewSearch,
body.hub-v12.v12-phone .b12page .b12body input[type="text"],
body.hub-v12.v12-phone .b12page .b12body input[type="search"],
body.hub-v12.v12-phone .b12page .b12body input[type="number"],
body.hub-v12.v12-phone .b12page .b12body input[type="date"] {
  width: 100%;
  min-height: 44px;
  font-size: 16px;
}

/* Units & Tenants: Download / Upload under the filters. */
body.hub-v12.v12-phone .b12page .b12sheetbtns { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 10px; }
body.hub-v12.v12-phone .b12page .b12sheetbtns button.b12ghost { flex: 1 1 auto; }
/* The duplicates sheet stays a real sheet (side by side, scrolls sideways). */
body.hub-v12.v12-phone .b12page table.udup-sheet.v12-keep { display: table; }