:root {
  color-scheme: dark;
  --font-sans: system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --color-background-primary: #2f2d2a;
  --color-background-secondary: #23211f;
  --color-text-primary: #f1ede4;
  --color-border-tertiary: #4a4640;
}

html,
body {
  min-height: 100%;
}

html {
  scrollbar-gutter: stable both-edges;
}

body {
  overflow-y: auto;
  scrollbar-gutter: stable both-edges;
  background:
    radial-gradient(circle at top left, rgba(211, 83, 130, 0.06), transparent 30%),
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.03), transparent 32%),
    #1F1F1E;
  color: #f1ede4;
  font-family: var(--font-sans, system-ui, -apple-system, "Segoe UI", sans-serif);
}

#root {
  min-height: 100vh;
  padding: 18px;
}

#root > div {
  max-width: 992px;
  margin: 0 auto;
}

@keyframes cc-enter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.cc-shell {
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--color-background-primary), var(--color-background-secondary));
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.28);
}

.cc-shell .main-content {
  padding-left: 20px !important;
  padding-right: 20px !important;
}

.cc-shell .tab-bar,
.cc-shell .nav-bar,
.cc-shell .page-content,
.cc-shell .table-shell,
.cc-shell .icard,
.cc-shell .pcard,
.cc-shell .provider-card,
.cc-shell .placement-card,
.cc-shell .contact-entry,
.cc-shell .pending-items-card {
  animation: none;
}

.cc-shell table {
  width: 100%;
}

.cc-shell .tab {
  transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.cc-shell .addr-link {
  display: inline;
  color: var(--color-text-primary);
  text-decoration: none;
  border-bottom: 1px solid rgba(211, 83, 130, 0.2);
  transition: color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.cc-shell .addr-link:hover {
  color: #f1b9cc;
  border-bottom-color: rgba(211, 83, 130, 0.55);
}
.cc-shell .addr-link--mobile {
  display: inline;
  width: auto;
  min-width: 0;
  max-width: 100%;
}
.cc-shell .snapshot-placement-meta-value--wrap .addr-link--mobile {
  display: inline;
  width: auto;
  max-width: 100%;
  white-space: normal;
}

.cc-shell .phone-link {
  color: var(--color-text-primary);
  text-decoration: none;
  border-bottom: 1px solid rgba(211, 83, 130, 0.2);
  transition: color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.cc-shell .phone-link:hover {
  color: #f1b9cc;
  border-bottom-color: rgba(211, 83, 130, 0.55);
}

.cc-shell .email-copy-link {
  cursor: pointer;
  border-bottom: 1px solid rgba(211, 83, 130, 0.2);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.cc-shell .email-copy-link:hover {
  color: #f1b9cc;
  border-bottom-color: rgba(211, 83, 130, 0.55);
}

.cc-shell .icard,
.cc-shell .pcard,
.cc-shell .provider-card,
.cc-shell .placement-card,
.cc-shell .contact-entry,
.cc-shell .modal-box {
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}
.cc-toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 260;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(23, 22, 20, 0.96);
  color: #f3f1ea;
  border: 1px solid rgba(211, 83, 130, 0.28);
  box-shadow: 0 16px 28px rgba(0, 0, 0, 0.28);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  pointer-events: none;
  animation: cc-toast-in 120ms ease-out;
}
@keyframes cc-toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(6px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

html.cc-pwa,
html.cc-pwa body {
  height: 100%;
  overflow: hidden;
}

html.cc-login,
html.cc-login body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  position: fixed;
  width: 100%;
}

html.cc-pwa #root {
  height: 100vh;
  overflow: hidden;
}

html.cc-pwa #root > div {
  height: 100%;
}

html.cc-pwa .cc-shell {
  height: 100%;
  display: flex;
  flex-direction: column;
}

html.cc-pwa .cc-shell .main-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html.cc-pwa .cc-shell .main-content::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

html.cc-pwa .table-shell,
html.cc-pwa .tab-bar,
html.cc-pwa .checkbox-dropdown-menu,
html.cc-pwa .document-preview-inline {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html.cc-pwa .table-shell::-webkit-scrollbar,
html.cc-pwa .tab-bar::-webkit-scrollbar,
html.cc-pwa .checkbox-dropdown-menu::-webkit-scrollbar,
html.cc-pwa .document-preview-inline::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}
html.cc-pwa .table-shell {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
}
html.cc-pwa .subheader-row {
  position: sticky;
  top: calc(62px + env(safe-area-inset-top));
  z-index: 110;
}
html.cc-pwa .tab-bar {
  position: sticky;
  top: calc(110px + env(safe-area-inset-top));
  z-index: 105;
}

html.cc-modal-open,
html.cc-modal-open body {
  height: 100%;
  overflow: hidden;
}

html.cc-modal-open #root {
  height: 100vh;
  overflow: hidden;
}

html.cc-modal-open .modal-overlay {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

html.cc-modal-open .modal-box {
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
}

.ios-safari .engagements-table {
  width: max-content;
  min-width: max-content;
  table-layout: auto;
}

.ios-safari .engagements-table th,
.ios-safari .engagements-table td {
  width: auto !important;
  white-space: nowrap;
}

.cc-shell .irow:last-child {
  border-bottom: 0;
}

.cc-shell .drow,
.cc-shell .cr {
  transition: background 0.15s ease, transform 0.15s ease;
}

.cc-shell .drow:hover,
.cc-shell .cr:hover {
  transform: none;
}

.cc-shell .bdg {
  letter-spacing: 0.01em;
}

.cc-shell .main-content {
  padding-bottom: calc(24px + env(safe-area-inset-bottom)) !important;
}

.cc-shell .people-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 8px;
}

.cc-shell .people-grid .pcard {
  margin-bottom: 0 !important;
}

.cc-shell .cc-upcoming-grid {
  align-items: stretch;
}

.cc-shell .modal-overlay {
  backdrop-filter: blur(6px);
}

@media (prefers-reduced-motion: reduce) {
  .cc-shell,
  .cc-shell .main-content,
  .cc-shell .tab-bar,
  .cc-shell .nav-bar,
  .cc-shell .page-content,
  .cc-shell .table-shell,
  .cc-shell .icard,
  .cc-shell .pcard,
  .cc-shell .provider-card,
  .cc-shell .placement-card,
  .cc-shell .contact-entry,
  .cc-shell .pending-items-card {
    animation: none !important;
  }
}

.cc-shell--case .main-content {
  padding-top: 18px !important;
}

.cc-shell--dash .main-content {
  padding-top: 18px !important;
}

@media (max-width: 1100px) {
  #root {
    padding: 12px;
  }

  .cc-shell {
    border-radius: 18px;
  }
}

@media (max-width: 860px) {
  .cc-shell .main-content {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .cc-shell .cc-upcoming-grid {
    grid-template-columns: 1fr !important;
  }

  .cc-shell table {
    min-width: 720px;
  }
}

@media (max-width: 620px) {
  #root {
    padding: 8px;
  }

  .cc-shell {
    border-radius: 16px;
  }

  .cc-shell .main-content {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* ── MOCKUP THEME OVERRIDES ─────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
  background: #1F1F1E;
  color: var(--color-text-primary);
}

body {
  background: #1F1F1E;
}

#root {
  min-height: 100vh;
  background: #1F1F1E;
  padding: 18px;
}

#root > div {
  max-width: 992px;
  margin: 0 auto;
}

.cc-shell {
  background: var(--color-background-primary);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.26);
}

.cc-shell .main-content,
.cc-shell .page-content { background: var(--color-background-primary) !important; }

.nav-bar {
  background: #0A1628;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-brand { display: flex; align-items: center; gap: 8px; }
.nav-icon {
  width: 32px;
  height: 32px;
  background: #D35382;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #ffffff;
  font-size: 18px;
}
.nav-title { color: #ffffff; font-size: 23px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.nav-subtitle { color: rgba(255, 255, 255, 0.34); font-size: 11px; margin-top: 0; line-height: 1.05; }
.nav-right { display: flex; align-items: center; gap: 10px; }
.nav-search {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  padding: 0 10px;
  height: 34px;
  gap: 6px;
  width: 160px;
}
.nav-search input { background: none; border: none; color: #ffffff; font-size: 13px; outline: none; width: 100%; font-family: inherit; }
.nav-search input::placeholder { color: rgba(255, 255, 255, 0.34); }
.nav-search-icon { color: rgba(255, 255, 255, 0.42); font-size: 13px; flex-shrink: 0; }
/* Hidden by default/desktop — the always-visible .nav-search box covers that
   case. Only shown on iOS Safari/PWA at narrow widths, where .nav-search is
   hidden entirely (see the 860px media query below). */
.nav-mobile-search-btn {
  display: none;
  background: rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.88);
  border: none;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 15px;
  flex-shrink: 0;
}
.nav-mobile-search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #0A1628;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 10px 14px;
  position: sticky;
  /* .nav-bar's real height on notched devices is 62px + the status-bar
     safe-area inset (see the iOS polish rule further down), not a flat
     62px — this has to match or the bar sits under the header. */
  top: calc(62px + env(safe-area-inset-top));
  z-index: 99;
}
.nav-mobile-search-bar input {
  flex: 1;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  padding: 8px 12px;
  color: #ffffff;
  font-size: 14px;
  font-family: inherit;
  outline: none;
}
.nav-mobile-search-bar input::placeholder { color: rgba(255, 255, 255, 0.34); }
.nav-mobile-search-bar .nav-search-icon { font-size: 15px; }
.btn-new-case {
  background: #D35382;
  color: #ffffff;
  border: none;
  height: 34px;
  padding: 0 14px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: inherit;
  font-weight: 500;
}
.btn-new-case:hover { background: #c04777; }
.nav-back-btn {
  background: rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  font-family: inherit;
}
.nav-back-btn:hover { background: rgba(255, 255, 255, 0.16); }
.nav-case-name { color: #ffffff; font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 6px; }
.nav-case-meta { color: rgba(255, 255, 255, 0.34); font-size: 12px; white-space: nowrap; }

.subheader-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 20px;
  min-height: 48px;
  background: var(--color-background-secondary);
  border-bottom: 1px solid var(--color-border-tertiary);
  position: sticky;
  top: calc(62px + env(safe-area-inset-top));
  z-index: 110;
}

.subheader-row--dash {
  justify-content: flex-start;
}

.subheader-title {
  font-size: 13px;
  font-weight: 600;
  color: #d5d0c4;
  letter-spacing: 0.01em;
}

.subheader-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.subheader-case-name {
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex-wrap: wrap;
}

.subheader-meta {
  color: rgba(255, 255, 255, 0.34);
  font-size: 12px;
  white-space: nowrap;
}

.page-content { padding: 20px; padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
.sh,
.section-header {
  font-size: 14px;
  font-weight: 500;
  color: #f3f1ea;
  padding-left: 10px;
  border-left: 3px solid #D35382;
  margin-bottom: 12px;
  letter-spacing: 0.01em;
}
.section-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.section-row.section-row--compact { align-items: center; margin-bottom: 10px; }
.section-row.section-row--compact .section-header { margin-bottom: 0; }
.hearings-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 20px; }
.hearing-card { background: var(--color-background-primary); border: 1px solid var(--color-border-tertiary); border-radius: 12px; padding: 12px 14px; cursor: pointer; }
.cc-upcoming-grid .hearing-card {
  background: #30302E;
  border-color: #4e463f;
}
.cc-upcoming-grid .hearing-card:hover {
  background: #332f2b;
}
.cc-shell--dash .cc-upcoming-grid {
  margin-bottom: 0;
}
.hearing-card.urgent { border-color: #D35382; }
.hearing-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.hearing-days { font-size: 22px; font-weight: 700; color: #f3f1ea; }
.hearing-days.urgent { color: #D35382; }
.hearing-days span { font-size: 11px; font-weight: 500; color: #bcb6aa; }
.hearing-name { font-size: 12px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 2px; color: #f3f1ea; }
.hearing-meta { font-size: 11px; color: #bcb6aa; }

.table-shell { background: var(--color-background-primary); border: 1px solid var(--color-border-tertiary); border-radius: 12px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; margin-bottom: 24px; box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12); }
.table-shell .data-table { margin-bottom: 0; border: none; border-radius: 0; }
.cc-shell--dash .table-shell { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; background: var(--color-background-primary); border: none; border-radius: 0; overflow: hidden; margin-bottom: 24px; }
.data-table th,
.data-table td {
  padding: 11px 12px;
  line-height: 1.2;
  vertical-align: middle;
}
.data-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: #b7b0a4;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--color-border-tertiary);
  background: var(--color-background-secondary);
}
.data-table td {
  border-bottom: 1px solid var(--color-border-tertiary);
  color: #f3f1ea;
  font-size: 13px;
  transition: background 0.1s;
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:nth-child(even) td { background: #282522; }
.data-table tbody tr.clickable { cursor: pointer; }
.data-table tbody tr.clickable:hover td { background: rgba(255, 255, 255, 0.045) !important; }
.cc-shell .hearings-table tbody tr.clickable:hover td {
  background: #332f2b !important;
  color: #ffffff !important;
}
.td-primary { font-weight: 500; color: #f3f1ea; }
.td-secondary, .td-small, .td-next-hearing-sub { color: #bcb6aa; }

.home-table th,
.home-table td {
  padding: 0 14px;
  height: 52px;
  text-align: left;
}

.home-table thead th {
  height: 38px;
  padding: 13px 14px;
  line-height: 1;
  vertical-align: top;
}

/* Extra left breathing room for the first column */
.home-table th:first-child,
.home-table td:first-child {
  padding-left: 20px;
}

/* Explicit height (not min-height: 100%) so align-items: center works
   reliably in WebKit/Safari table cells */
.home-table .cell-center,
.home-table .cell-stack {
  min-height: 52px;
  display: flex;
}


.home-table .cell-center {
  width: 100%;
  align-items: center;
  text-align: left;
}
.home-table .cell-center.td-secondary {
  padding-top: 4px;
  padding-bottom: 4px;
}

.home-table .cell-stack {
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1px;
}

/* Sub-line in two-row "Next Hearing" cell: clearly secondary */
.home-table .cell-stack .td-next-hearing-sub {
  font-size: 11px;
  line-height: 1.3;
}

/* Case / engagement name */
.home-table .cr-name {
  font-weight: 500;
  color: var(--color-text-primary);
  white-space: nowrap;
}

/* Primary date value in Next Hearing cell */
.home-table .cr-date {
  font-weight: 500;
  font-size: 13px;
  color: var(--color-text-primary);
  line-height: 1.2;
}
.home-table .case-menu-head,
.home-table .case-menu-cell {
  width: 42px;
}
.home-table .case-menu-head {
  padding-left: 0;
  padding-right: 0;
}
.home-table .case-menu-cell {
  padding-left: 0;
  padding-right: 8px;
}

/* Parties and hearings should share the same compact table rhythm */
.parties-table th,
.parties-table td,
.hearings-table th,
.hearings-table td {
  padding: 10px 12px;
  line-height: 1.25;
  vertical-align: middle;
}
.parties-table thead th,
.hearings-table thead th {
  height: 38px;
  padding-top: 0;
  padding-bottom: 0;
  vertical-align: middle;
  font-size: 11px;
  font-weight: 600;
  color: #b7b0a4;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--color-background-secondary);
  border-bottom: 1px solid var(--color-border-tertiary);
}
.parties-table thead th,
.hearings-table thead th {
  line-height: 1.1;
}
.parties-table td,
.hearings-table td {
  font-size: 13px;
  color: #f3f1ea;
  border-bottom: 1px solid var(--color-border-tertiary);
}
.hearings-table {
  table-layout: fixed;
}
.hearings-table th:nth-child(1),
.hearings-table td:nth-child(1) {
  width: 96px;
  white-space: nowrap;
}
.hearings-table th:nth-child(2),
.hearings-table td:nth-child(2) {
  width: 74px;
  white-space: nowrap;
}
.hearings-table th:nth-child(3),
.hearings-table td:nth-child(3) {
  width: 180px;
  white-space: nowrap;
}
.hearings-table th:nth-child(4),
.hearings-table td:nth-child(4) {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.hearings-table th:nth-child(5),
.hearings-table td:nth-child(5) {
  width: 72px;
  white-space: nowrap;
}
.parties-table tbody tr:last-child td,
.hearings-table tbody tr:last-child td {
  border-bottom: none;
}
.parties-table tbody tr.clickable:hover td,
.hearings-table tbody tr.clickable:hover td {
  background: #332f2b !important;
  color: #ffffff !important;
}
.hearing-summary-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}
.hearing-type-pill {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(211, 83, 130, 0.12);
  color: #f3f1ea;
  border: 1px solid rgba(211, 83, 130, 0.28);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.hearing-doc-count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid rgba(211, 83, 130, 0.28);
  background: rgba(211, 83, 130, 0.12);
  color: #f3f1ea;
  border-radius: 999px;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.hearing-doc-count.empty {
  opacity: 0.7;
}
.hearing-expand-row td {
  background: #211f1d !important;
  border-bottom: 1px solid var(--color-border-tertiary);
  padding: 0 !important;
}
.hearing-expand-panel {
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  background: #211f1d;
}
.hearing-expand-block + .hearing-expand-block {
  margin-top: 10px;
}
.hearing-expand-notes {
  color: #f3f1ea;
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
}
.hearing-expand-notes--empty {
  color: #b7b0a4;
  font-style: italic;
}
.contact-card {
  border: .5px solid var(--color-border-tertiary);
  border-radius: var(--border-radius-lg);
  padding: 14px 16px;
  margin-bottom: 10px;
  background: #24211e;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .16s ease, box-shadow .16s ease;
  scroll-margin-top: 118px;
}
.contact-card:hover {
  border-color: rgba(211, 83, 130, 0.22);
  box-shadow: 0 1px 0 rgba(0,0,0,.22), 0 10px 24px rgba(0,0,0,.18);
}
.contact-card.open {
  border-color: rgba(211, 83, 130, 0.18);
}
.contact-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.contact-card-head-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
.contact-card-head-left .bdg.neu {
  border: 1px solid var(--color-border-secondary);
  border-radius: 999px;
  background: transparent;
}
/* iOS Safari / installed PWA: force date/time, contact type, and people
   involved onto their own line each, all flush to the same left edge —
   other viewports keep the horizontal row from the general mobile layout. */
html.ios-safari .contact-card-head-left,
html.cc-pwa .contact-card-head-left {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
/* No pill here — just the clipboard icon to the left of the plain contact
   type text, matching the plain icon+text style of the people-involved line
   below it. The icon itself is already un-hidden by the general mobile
   media query further down. */
html.ios-safari .contact-card-head-left .bdg.neu,
html.cc-pwa .contact-card-head-left .bdg.neu {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  color: var(--color-text-secondary);
  font-size: 12px;
  font-weight: 400;
}
/* The general mobile breakpoint below vertically centers the people icon
   against the full height of a wrapped, multi-line participants list. On
   iOS Safari/PWA specifically, keep it pinned to the top so it lines up
   with the first line instead of floating toward the middle. */
html.ios-safari .contact-card-participants,
html.cc-pwa .contact-card-participants {
  align-items: flex-start;
}
html.ios-safari .contact-card-participants i,
html.cc-pwa .contact-card-participants i {
  margin-top: 3px;
}
.contact-card-head-right {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.contact-expand-panel {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-4px);
  margin-top: 0;
  padding-top: 0;
  border-top: 1px solid transparent;
  pointer-events: none;
  transition: max-height .26s ease, opacity .18s ease, transform .22s ease, margin-top .26s ease, padding-top .26s ease, border-top-color .22s ease;
}
.contact-expand-panel.open {
  max-height: 9999px;
  opacity: 1;
  transform: translateY(0);
  margin-top: 10px;
  padding-top: 10px;
  border-top-color: var(--color-border-tertiary);
  pointer-events: auto;
}
.contact-expand-block + .contact-expand-block {
  margin-top: 10px;
}
.contact-expand-meta {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  color: var(--color-text-secondary);
  font-size: 12px;
  line-height: 1.5;
}
.contact-expand-meta i {
  font-size: 13px;
  margin-top: 1px;
}
.contact-expand-notes {
  color: #f3f1ea;
  font-size: 13px;
  line-height: 1.55;
}
.contact-expand-notes:empty::before {
  content: 'No narrative';
  color: #b7b0a4;
  font-style: italic;
}
.contact-expand-notes p { margin: 0 0 8px; }
.contact-expand-notes p:last-child { margin-bottom: 0; }
.contact-expand-notes ul, .contact-expand-notes ol { margin: 0 0 8px; padding-left: 20px; }
.contact-expand-notes ul:last-child, .contact-expand-notes ol:last-child { margin-bottom: 0; }
.contact-expand-notes li { margin: 2px 0; }
.contact-expand-notes strong { font-weight: 700; color: #fff; }

/* ── NARRATIVE WYSIWYG EDITOR (Toast UI theme override) ──────────────────── */
.narrative-editor { border-radius: 6px; overflow: hidden; }
.narrative-editor .toastui-editor-defaultUI {
  border: 1px solid var(--color-border-secondary);
  border-radius: 6px;
  font-family: var(--font-sans);
}
.narrative-editor .toastui-editor-defaultUI-toolbar {
  background-color: var(--color-background-secondary);
  border-bottom: 1px solid var(--color-border-tertiary);
  height: 36px;
  padding: 0 8px;
}
.narrative-editor .toastui-editor-toolbar { height: 36px; }
/* Toast UI's toolbar button IS the `.toastui-editor-toolbar-icons` element —
   the icon is a background-image sprite positioned with fixed pixel offsets
   sized for the vendor CSS's 32px box. Resizing that box (width/height)
   shifts which slice of the sprite shows through it, cropping/misaligning
   the glyph. Scaling the whole button via `transform` instead leaves its
   box and the sprite's pixel math untouched — border, icon, and background
   all shrink together as one unit. */
.narrative-editor .toastui-editor-defaultUI-toolbar button {
  transform: scale(0.72);
  transform-origin: center;
  margin: 3px 0;
  border-color: var(--color-background-secondary);
}
/* No background-color here on purpose: this button also carries
   filter:invert(1) brightness(1.6) (below) so it can recolor the icon
   sprite for the dark theme. That filter applies to the whole rendered
   element, so any dark hover fill set here gets inverted+brightened right
   along with the icon — producing a near-white square that swamps the
   (also-inverted, now light-on-light) glyph. Border-only hover feedback
   sidesteps the interaction entirely. */
.narrative-editor .toastui-editor-defaultUI-toolbar button:not(:disabled):hover {
  border-color: var(--color-border-tertiary);
}
.narrative-editor .toastui-editor-toolbar-icons {
  filter: invert(1) brightness(1.6);
}
.narrative-editor .toastui-editor-toolbar-divider {
  background-color: var(--color-border-tertiary);
}
.narrative-editor .toastui-editor-ww-container {
  background-color: var(--color-background-primary);
}
.narrative-editor .ProseMirror {
  font-family: var(--font-sans);
  font-size: 13px;
}
/* The vendor stylesheet sets color:#222 directly on .toastui-editor-contents
   p/ul/ol/li/h1-h6 (not just inherited from a parent), so overriding color on
   .ProseMirror alone has no effect on this text — these rules must match the
   same elements directly to win. */
.narrative-editor .toastui-editor-contents,
.narrative-editor .toastui-editor-contents p,
.narrative-editor .toastui-editor-contents li,
.narrative-editor .toastui-editor-contents ul,
.narrative-editor .toastui-editor-contents ol {
  color: var(--color-text-primary);
}
.narrative-editor .toastui-editor-contents-placeholder:before {
  color: var(--color-text-secondary);
}
.narrative-editor .toastui-editor-contents strong { color: #fff; }

.contact-type-icon { display: none; font-size: 10px; margin-right: 3px; vertical-align: middle; }
.edu-modal-block { display: flex; flex-direction: column; }
.edu-modal-header { font-size: 11px; color: #bcb6aa; font-weight: 500; display: block; margin: 0 0 4px; }
.edu-modal-block .education-section { margin-bottom: 0; }
.contact-card-participants {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  color: var(--color-text-secondary);
  font-size: 12px;
  line-height: 1.5;
  margin-top: 2px;
  padding-top: 0;
}
.contact-card-participants i {
  font-size: 13px;
  margin-top: 3px;
}
.hearing-doc-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.hearing-doc-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(211, 83, 130, 0.28);
  background: rgba(211, 83, 130, 0.1);
  color: #f3f1ea;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
}
.hearing-doc-chip span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hearing-doc-chip:hover {
  background: rgba(211, 83, 130, 0.18);
}
.hearing-doc-empty {
  color: #b7b0a4;
  font-size: 12px;
  font-style: italic;
}
/* ── Desktop/mobile table toggle ────────────────────────────────────────── */
.dash-mobile { display: none; }
.hearings-mobile { display: none; }
.parties-mobile { display: none; }

/* ── Shared tab cards (hearings + parties on mobile) ────────────────────── */
.tab-card {
  background: #30302E;
  border: 1px solid #4e463f;
  border-radius: 12px;
  padding: 13px 14px 11px;
  margin-bottom: 10px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,0.22);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
.tab-card:active { background: #332f2b; }
.tab-card--open { border-color: #4d8fd1; }
.tab-card-top {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.tab-card-title {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tab-card-top-right {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
.tab-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
}
.tab-card-outcome,
.tab-card-secondary {
  font-size: 12px;
  color: var(--color-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tab-card-no-outcome {
  font-size: 12px;
  color: var(--color-text-secondary);
  font-style: italic;
}
.tab-card-expand {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #4e463f;
}
.tab-card-expand-block { margin-bottom: 2px; }
.tab-card-empty {
  text-align: center;
  padding: 22px;
  color: var(--color-text-secondary);
  font-size: 13px;
  font-style: italic;
}

/* ── Mobile home cards (visible only at ≤ 640 px via media query) ───────── */
.home-case-card {
  background: #30302E;
  border: 1px solid #4e463f;
  border-radius: 12px;
  padding: 13px 14px 11px;
  margin-bottom: 10px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,0.22);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
.home-case-card:active { background: #332f2b; }
.home-case-card-top {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.home-case-card-name {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-case-card .case-menu-wrap { display: none; }
.home-case-card-meta {
  display: flex;
  align-items: center;
}
.home-case-card-children {
  font-size: 12px;
  color: var(--color-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-case-card-secondary {
  font-size: 12px;
  color: var(--color-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-case-card-empty {
  text-align: center;
  padding: 22px;
  color: var(--color-text-secondary);
  font-size: 13px;
  font-style: italic;
}

.parties-table.home-table th:first-child,
.parties-table.home-table td:first-child {
  padding-left: 12px;
}
.case-menu-wrap {
  display: flex;
  justify-content: flex-end;
}
.case-menu-btn {
  width: 28px;
  height: 28px;
  border: 1px solid #4a4037;
  border-radius: 8px;
  background: #211f1d;
  color: #d7d1c4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.case-menu-btn:hover {
  background: #332f2b;
  color: #ffffff;
}
.case-menu-overlay {
  position: fixed;
  width: 126px;
  background: #171614;
  border: 1px solid #4a4037;
  border-radius: 10px;
  box-shadow: 0 18px 30px rgba(0, 0, 0, 0.28);
  padding: 3px;
  z-index: 150;
  box-sizing: border-box;
}
.case-menu-item {
  width: 100%;
  border: none;
  background: transparent;
  color: #f3f1ea;
  padding: 5px 7px;
  border-radius: 8px;
  text-align: left;
  font-size: 11px;
  cursor: pointer;
  font-family: inherit;
  white-space: normal;
  line-height: 1.15;
}
.case-menu-item:hover {
  background: #332f2b;
}
.case-menu-item.danger {
  color: #ffb2b2;
}
.case-menu-item.danger:hover {
  background: rgba(211, 83, 130, 0.18);
  color: #ffd3dd;
}

.pill-toggle { background: var(--color-background-secondary); border-radius: 20px; padding: 3px; display: inline-flex; border: 1px solid var(--color-border-tertiary); }
.pill-btn { background: none; border: none; border-radius: 18px; padding: 5px 16px; font-size: 12px; cursor: pointer; color: #bcb6aa; font-weight: 500; font-family: inherit; transition: all 0.15s; }
.pill-btn.active { background: #2d2b29; color: #ffffff; font-weight: 600; box-shadow: none; }

.bdg, .bdg-neutral, .bdg-foc, .bdg-gal, .bdg-tmc, .bdg-pmc, .bdg-cos, .bdg-ext-care, .bdg-supervision, .bdg-friendly-suit, .bdg-family, .bdg-atty, .bdg-org, .bdg-fictive, .bdg-foster, .bdg-current, .bdg-inactive {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}
.placement-type-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
}
.placement-children-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--color-text-secondary);
  flex-shrink: 1;
  min-width: 0;
}
.placement-children-label .ti {
  font-size: 11px;
  flex-shrink: 0;
}
.placement-type-pill--history {
  opacity: 0.82;
  border-color: rgba(74, 70, 64, 0.95);
}
.bdg-history {
  background: transparent;
  border: 1px solid rgba(74, 70, 64, 0.95);
  color: #cfc7bb;
}
.bdg-history.bdg-foc, .bdg-history.foc { background: rgba(238, 245, 253, 0.05); }
.bdg-history.bdg-gal, .bdg-history.gal { background: rgba(237, 246, 241, 0.05); }
.bdg-history.bdg-tmc, .bdg-history.tmc { background: rgba(248, 238, 223, 0.05); }
.bdg-history.bdg-pmc { background: rgba(240, 235, 253, 0.05); }
.bdg-history.bdg-cos { background: rgba(252, 237, 237, 0.05); }
.bdg-history.bdg-ext-care { background: rgba(224, 244, 242, 0.05); }
.bdg-history.bdg-supervision { background: rgba(232, 236, 242, 0.05); }
.bdg-history.bdg-friendly-suit { background: rgba(224, 240, 233, 0.05); }
.bdg-history.bdg-family, .bdg-history.bdg-fictive, .bdg-history.fam { background: rgba(248, 234, 241, 0.05); }
.bdg-history.bdg-atty, .bdg-history.atty { background: rgba(239, 234, 252, 0.05); }
.bdg-history.bdg-org, .bdg-history.org { background: rgba(237, 246, 238, 0.05); }
.bdg-history.bdg-foster { background: rgba(238, 245, 253, 0.05); }
.foc, .bdg-foc { background: #EEF5FD; color: #2F5F95; }
.gal, .bdg-gal { background: #EDF6F1; color: #2F7A68; }
.tmc, .bdg-tmc { background: #F8EEDF; color: #8A5A17; }
.bdg-pmc { background: #F0EBFD; color: #6C4FB3; }
.bdg-cos { background: #FCEDED; color: #A14646; }
.bdg-ext-care { background: #E0F4F2; color: #1B6E6A; }
.bdg-supervision { background: #E8ECF2; color: #445577; }
.bdg-friendly-suit { background: #E3F4F7; color: #1F7A93; }
.bdg-neutral { background: #2b2926; color: var(--color-text-secondary); }
.fam, .bdg-family, .bdg-fictive { background: #F8EAF1; color: #A34E75; }
.atty, .bdg-atty { background: #EFEAFC; color: #6A5BB6; }
.org, .bdg-org { background: #EDF6EE; color: #4E7A5A; }
.bdg-foster { background: #EEF5FD; color: #2F5F95; }
.bdg-current, .ok { background: #f0fdf4; color: #2a8a4d; padding: 2px 8px; border-radius: 10px; }
.bdg-inactive { background: #2b2926; color: var(--color-text-secondary); }

.tab-bar { border-bottom: 1px solid var(--color-border-tertiary); display: flex; overflow-x: auto; background: var(--color-background-secondary); -webkit-overflow-scrolling: touch; position: sticky; top: calc(110px + env(safe-area-inset-top)); z-index: 105; }
.tab-bar::-webkit-scrollbar { display: none; }
.tab-btn { -webkit-appearance: none; appearance: none; padding: 10px 14px; height: 36px; line-height: 1; font-size: 13px; cursor: pointer; color: var(--color-text-secondary); border: none; white-space: nowrap; background: none; font-family: inherit; border-bottom: 3px solid transparent; transition: color 0.15s, background 0.15s; font-weight: 500; }
.tab-btn:hover { color: #ffffff; background: #332f2b; }
.tab-btn.on, .tab.on { color: #ffffff; border-bottom-color: #D35382; font-weight: 700; background: #2b2927; }

.card, .icard, .pcard, .provider-card, .placement-card, .contact-entry, .pending-items-card, .delete-box {
  background: #24211e;
  border: 1px solid var(--color-border-tertiary);
  border-radius: 12px;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.16);
}
.pcard, .icard, .placement-card, .provider-card, .contact-entry { background: #24211e; }
.placement-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
.placement-grid .placement-card, .placement-grid .pcard { margin-bottom: 0; overflow: hidden; }
.placement-grid--history { grid-template-columns: 1fr !important; }
.placement-info-grid { grid-template-columns: 1fr 1fr; }
.placement-info-grid--history { grid-template-columns: 1fr 1fr 1fr !important; }
.card, .icard, .edit-form, .editform { padding: 14px 16px; }
.card-title, .ictitle { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #b7b0a4; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--color-border-tertiary); }
.card-title-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--color-border-tertiary); }
.info-row, .irow, .snapshot-row { display: flex; justify-content: space-between; align-items: flex-start; padding: 6px 0; font-size: 13px; border-bottom: 1px solid var(--color-border-tertiary); gap: 8px; }
.info-row:last-child, .irow:last-child, .snapshot-row:last-child { border-bottom: none; }
.info-label, .snapshot-role, .field-label, .fi { color: #bcb6aa; flex-shrink: 0; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; }
.info-value, .snapshot-name, .field-value { font-weight: 500; color: #f3f1ea; text-align: right; max-width: 58%; }

.overview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 14px; }
.stat-card, .stat-box { background: var(--color-background-secondary); border-radius: 8px; padding: 12px 14px; border: 1px solid var(--color-border-tertiary); }
.stat-label { font-size: 10px; color: #bcb6aa; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
.stat-value { font-size: 18px; font-weight: 600; color: #f3f1ea; }
.stat-value.urgent { color: #D35382; }
.stat-sub { font-size: 11px; color: #bcb6aa; margin-top: 2px; }
.case-snapshot-card .snapshot-section {
  margin-top: 12px;
}
.case-snapshot-card .snapshot-section:first-of-type {
  margin-top: 0;
}
.case-snapshot-card .snapshot-top-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
}
.case-snapshot-card .snapshot-label {
  font-size: 11px;
  color: #bcb6aa;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 7px;
}
.case-snapshot-card .snapshot-divider {
  height: 1px;
  background: var(--color-border-tertiary);
  margin: 12px 0 0;
}
.case-snapshot-card .snapshot-placement {
  background: var(--color-background-secondary);
  border: 1px solid var(--color-border-tertiary);
  border-radius: 10px;
  padding: 12px 12px 10px;
}
.case-snapshot-card .snapshot-placement-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: nowrap;
}
.case-snapshot-card .snapshot-placement-top-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1 1 auto;
}
.case-snapshot-card .snapshot-placement-name {
  font-size: 14px;
  font-weight: 700;
  color: #f3f1ea;
  line-height: 1.2;
}
.case-snapshot-card .snapshot-placement-sub {
  font-size: 11px;
  color: #bcb6aa;
  line-height: 1.2;
}
.case-snapshot-card .snapshot-placement-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
  white-space: nowrap;
}
.case-snapshot-card .snapshot-current-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: #f0fdf4;
  color: #2a8a4d;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.case-snapshot-card .snapshot-placement-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.case-snapshot-card .snapshot-placement-meta {
  font-size: 12px;
  color: #d0cabd;
  line-height: 1.3;
  margin-top: 0;
  word-break: break-word;
}
.case-snapshot-card .snapshot-placement-item--stacked {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.case-snapshot-card .snapshot-placement-meta--label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
}
.case-snapshot-card .snapshot-placement-meta--inline {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 6px;
}
.case-snapshot-card .snapshot-placement-meta--inline .snapshot-placement-meta-value {
  display: block;
  width: auto;
  flex: 0 0 auto;
}
.case-snapshot-card .snapshot-placement-meta--row {
  gap: 10px;
  flex-wrap: nowrap;
  align-items: center;
}
.case-snapshot-card .snapshot-placement-meta--row .snapshot-placement-meta-value {
  margin-left: auto;
  text-align: right;
}
.case-snapshot-card .snapshot-placement-item {
  background: rgba(17, 16, 15, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  padding: 10px 10px 9px;
}
.case-snapshot-card .snapshot-placement-meta-value--wrap {
  min-width: 0;
  overflow-wrap: anywhere;
}
.case-snapshot-card .snapshot-placement-meta-value--wrap .addr-link,
.case-snapshot-card .snapshot-placement-meta-value--wrap .phone-link {
  display: inline;
  width: auto;
  min-width: 0;
}
.case-snapshot-card .snapshot-placement-meta-value {
  color: #f3f1ea;
}
.case-snapshot-card .snapshot-placement-meta--label .fi {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex-shrink: 0;
}
.case-snapshot-card .snapshot-placement-meta--label .snapshot-placement-icon {
  margin-right: 2px;
}
.case-snapshot-card .snapshot-placement-col--single {
  display: flex;
  flex-direction: column;
}
.case-snapshot-card .snapshot-placement-footer {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.case-snapshot-card .snapshot-placement-footer-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.case-snapshot-card .snapshot-placement-since {
  font-size: 11px;
  color: #bcb6aa;
  line-height: 1.2;
}
.case-snapshot-card .snapshot-placement-source {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 7px;
  font-size: 11px;
  color: #bcb6aa;
  line-height: 1.25;
}
.case-snapshot-card .snapshot-placement-source i {
  font-size: 11px;
  color: #d7d1c4;
}
.case-snapshot-card .snapshot-placement-childs {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.case-snapshot-card .snapshot-placement-childs--empty {
  margin-top: 2px;
}
.case-snapshot-card .snapshot-placement-childs-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #bcb6aa;
  line-height: 1.2;
}
.case-snapshot-card .snapshot-placement-childs-label i {
  font-size: 11px;
  color: #d7d1c4;
}
.case-snapshot-card .snapshot-people {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.case-snapshot-card .snapshot-children-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.case-snapshot-card .snapshot-person {
  background: var(--color-background-secondary);
  border: 1px solid var(--color-border-tertiary);
  border-radius: 10px;
  padding: 12px 14px;
}
.case-snapshot-card .snapshot-person-child {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.case-snapshot-card .snapshot-person-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: nowrap;
}
.cr-children-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-align: left;
  align-items: flex-start;
  width: 100%;
  line-height: 1.3;
}
.case-snapshot-card .snapshot-child-placement {
  background: rgba(17, 16, 15, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  padding: 10px 10px 9px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.case-snapshot-card .snapshot-child-placement-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.case-snapshot-card .snapshot-child-placement-name {
  font-size: 13px;
  font-weight: 700;
  color: #f3f1ea;
  line-height: 1.2;
  min-width: 0;
  overflow-wrap: anywhere;
  flex: 1 1 auto;
}
.case-snapshot-card .snapshot-child-placement-head .snapshot-current-badge,
.case-snapshot-card .snapshot-child-placement-head .bdg.fam {
  flex: 0 0 auto;
}
.case-snapshot-card .snapshot-child-placement-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12px;
  color: #d0cabd;
  line-height: 1.3;
}
.case-snapshot-card .snapshot-child-placement-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  flex-shrink: 0;
  color: #bcb6aa;
}
.case-snapshot-card .snapshot-child-placement-label i {
  font-size: 11px;
  color: #d7d1c4;
}
.case-snapshot-card .snapshot-child-placement-value {
  min-width: 0;
  flex: 1 1 auto;
  overflow-wrap: anywhere;
  text-align: right;
  color: #f3f1ea;
}
.case-snapshot-card .snapshot-child-placement-since {
  font-size: 11px;
  color: #bcb6aa;
  line-height: 1.2;
}
.case-snapshot-card .snapshot-person-name {
  font-size: 14px;
  font-weight: 600;
  color: #f3f1ea;
  line-height: 1.2;
  min-width: 0;
  overflow-wrap: anywhere;
}
.case-snapshot-card .snapshot-person-meta {
  font-size: 12px;
  color: #d0cabd;
  line-height: 1.45;
  margin-top: 4px;
  word-break: break-word;
}
.appt-card {
  padding-top: 10px;
}
.appt-head {
  margin: 0 0 4px;
}
.appt-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 14px;
}
.appt-head-title {
  display: block;
  margin-bottom: 0;
  padding-right: 0;
  line-height: 1.2;
  padding-bottom: 0;
  border-bottom: none;
}
.appt-edit-btn {
  margin: 0;
}
.appt-head-divider {
  height: 1px;
  background: var(--color-border-tertiary);
  margin-top: 4px;
}
.case-snapshot-card .snapshot-meta-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: #2d2b29;
  border: 1px solid #4a4037;
  color: #f3f1ea;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}
.dob-copy {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}
.dob-copy:focus,
.dob-copy:hover {
  text-decoration: none;
}
.dob-copy-inline {
  display: inline-flex;
  align-items: center;
  line-height: 1.2;
}
.dob-copy-inline:hover {
  color: #f1b9cc;
}
.case-snapshot-card .snapshot-meta-pill--dob {
  cursor: pointer;
}
.case-snapshot-card .snapshot-meta-pill--dob:hover {
  color: #f1b9cc;
  border-color: rgba(211, 83, 130, 0.55);
}
.case-snapshot-card .snapshot-person-head .snapshot-meta-pill {
  flex-shrink: 0;
}
.case-snapshot-card .snapshot-child-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.case-snapshot-card .snapshot-child-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: #2d2b29;
  border: 1px solid #4a4037;
  color: #f3f1ea;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}
.case-snapshot-card .snapshot-child-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 10px;
  padding: 4px 0;
}
.case-snapshot-card .snapshot-child-name {
  font-size: 12px;
  font-weight: 500;
  color: #f3f1ea;
  min-width: 0;
  line-height: 1;
}
.case-snapshot-card .snapshot-child-meta {
  font-size: 11px;
  color: #bcb6aa;
  white-space: nowrap;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  transform: translateY(-2px);
}
.case-snapshot-card .snapshot-empty {
  font-size: 12px;
  color: #bcb6aa;
  font-style: italic;
}
@media (max-width: 720px) {
  .case-snapshot-card .snapshot-placement-grid {
    grid-template-columns: 1fr;
  }
  .case-snapshot-card .snapshot-placement-body {
    gap: 8px;
  }
  .case-snapshot-card .snapshot-placement-item--address {
    grid-column: auto;
  }
  .case-snapshot-card .snapshot-placement-badges {
    justify-content: flex-start;
  }
}
.case-snapshot-card .snapshot-hearing {
  background: var(--color-background-secondary);
  border: 1px solid var(--color-border-tertiary);
  border-radius: 10px;
  padding: 12px 14px;
}
.case-snapshot-card .snapshot-hearing-days {
  font-size: 24px;
  font-weight: 700;
  color: #f3f1ea;
  line-height: 1;
}
.case-snapshot-card .snapshot-hearing-days span {
  font-size: 11px;
  font-weight: 500;
  color: #bcb6aa;
}
.case-snapshot-card .snapshot-hearing-meta {
  font-size: 12px;
  color: #f3f1ea;
  margin-top: 6px;
}
.case-snapshot-card .snapshot-hearing-sub {
  font-size: 11px;
  color: #bcb6aa;
  margin-top: 2px;
}
.content-sh { font-size: 13px; font-weight: 600; color: #d5d0c4; padding-left: 10px; border-left: 3px solid #D35382; margin: 16px 0 10px; }
.divider-label { display: flex; align-items: center; gap: 10px; margin: 14px 0 10px; }
.divider-label::before, .divider-label::after { content: ''; flex: 1; height: 1px; background: var(--color-border-tertiary); }
.divider-label span { font-size: 11px; color: #bcb6aa; text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap; }

.person-card, .pcard { overflow: hidden; margin-bottom: 8px; }
.person-card-header { padding: 11px 14px; border-bottom: 1px solid var(--color-border-tertiary); display: flex; align-items: center; gap: 10px; }
.provider-card { background: #24211e; }
.provider-card.inactive { opacity: 0.62; }
.provider-card-header { padding: 13px 15px; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--color-border-tertiary); }
.provider-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.provider-name { font-size: 13px; font-weight: 500; color: #f3f1ea; }
.provider-name.inactive { color: #bcb6aa; }
.provider-org { font-size: 12px; color: #c7c0b2; line-height: 1.25; }
.provider-meta { display: flex; align-items: center; gap: 6px; margin-top: 0; margin-left: 0; padding-left: 0; flex-wrap: wrap; width: 100%; min-height: 18px; }
.provider-chip { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; background: #2d2b29; border: 1px solid #4a4037; color: #f3f1ea; font-size: 11px; font-weight: 500; white-space: nowrap; }
.provider-client { font-size: 11px; color: #bcb6aa; }
.provider-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.provider-card-body { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px 15px; font-size: 12px; }
.provider-card-body .fi { margin-bottom: 3px; }
.provider-card-body > div { min-width: 0; }
.provider-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
.provider-grid .provider-card { margin-bottom: 0; }
.placement-card {
  background: #24211e;
}
.person-avatar { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 500; flex-shrink: 0; }
.person-avatar.child { background: #e5ddd3; color: #8b5f74; }
.person-avatar.principal { background: #dcd6ca; color: #8b6f5b; }
.person-name { font-size: 14px; font-weight: 500; color: #f3f1ea; }
.person-meta { font-size: 12px; color: #bcb6aa; }
.person-body { padding: 10px 14px; }
.person-fields, .form-grid-2, .eg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.form-field, .efl { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; }
.form-field label, .efl label { font-size: 11px; color: #bcb6aa; font-weight: 500; }
.form-input, .form-select, .form-textarea, .edin { width: 100%; font-size: 13px; padding: 6px 8px; border: 1px solid var(--color-border-tertiary); border-radius: 6px; font-family: inherit; color: #f3f1ea; background: var(--color-background-secondary); outline: none; }
.form-input:focus, .form-select:focus, .form-textarea:focus, .edin:focus { border-color: #D35382; box-shadow: 0 0 0 3px rgba(211, 83, 130, 0.10); }
.form-textarea { resize: vertical; }
.form-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }
.edin[type="date"],
.edin[type="time"] {
  height: 32px;
  min-height: 32px;
  padding-top: 5px;
  padding-bottom: 5px;
  color-scheme: dark;
}
.edin[type="date"]::-webkit-calendar-picker-indicator,
.edin[type="time"]::-webkit-calendar-picker-indicator {
  filter: brightness(0) invert(0.62);
  opacity: 0.78;
  cursor: pointer;
}
.edin[type="date"]::-webkit-datetime-edit,
.edin[type="time"]::-webkit-datetime-edit {
  padding: 0;
}
.edin[type="date"]::-webkit-inner-spin-button,
.edin[type="date"]::-webkit-clear-button,
.edin[type="time"]::-webkit-inner-spin-button,
.edin[type="time"]::-webkit-clear-button {
  display: none;
}

.btn-add, .addbtn { display: flex; align-items: center; gap: 6px; background: var(--color-background-secondary); border: 1px dashed var(--color-border-tertiary); border-radius: 8px; padding: 8px 14px; font-size: 13px; color: #bcb6aa; cursor: pointer; width: 100%; justify-content: center; margin-top: 10px; font-family: inherit; }
.btn-add:hover, .addbtn:hover { background: #2b2927; }
.quick-contact-btn {
  background: rgba(211, 83, 130, 0.12) !important;
  border-color: rgba(211, 83, 130, 0.55) !important;
  color: #f3c1d1 !important;
}
.quick-contact-btn:hover {
  background: rgba(211, 83, 130, 0.18) !important;
  border-color: rgba(211, 83, 130, 0.7) !important;
  color: #ffe0ea !important;
}
.quick-contact-btn i {
  color: #D35382;
}
.btn-icon, .icnbtn { background: none; border: none; cursor: pointer; padding: 5px; border-radius: 6px; color: #bcb6aa; display: flex; align-items: center; font-size: 15px; }
.btn-icon:hover, .icnbtn:hover { background: #2b2927; color: #ffffff; }
.btn-icon.danger:hover, .icnbtn.red:hover { color: #D35382; }
.icnbtn--active, .icnbtn--active:hover { background: rgba(211, 83, 130, 0.16); color: #D35382; }
.btn-primary, .login-btn, .btn-save, .btn-remove { font-family: inherit; }
.btn-primary, .login-btn, .btn-save { background: #D35382; color: #ffffff; border: none; padding: 7px 14px; border-radius: 8px; font-size: 13px; cursor: pointer; display: flex; align-items: center; gap: 5px; font-weight: 500; }
.btn-primary:hover, .login-btn:hover, .btn-save:hover { background: #c04777; }
.btn-secondary, .btn-cancel-delete { background: var(--color-background-secondary); border: 1px solid var(--color-border-tertiary); padding: 6px 14px; border-radius: 8px; font-size: 12px; cursor: pointer; color: #bcb6aa; font-family: inherit; }
.btn-secondary:hover, .btn-cancel-delete:hover { background: #2b2927; }
.btn-remove { background: #DC2626; color: #ffffff; border: none; padding: 5px 14px; border-radius: 8px; font-size: 12px; cursor: pointer; font-weight: 500; }
.btn-remove:hover { background: #b91c1c; }
.btn-link { background: none; border: none; cursor: pointer; color: #d7caba; font-size: 11px; display: flex; align-items: center; gap: 4px; padding: 0; font-family: inherit; }
.btn-link:hover { text-decoration: underline; }
.status-toggle, .tog { border: none; padding: 3px 10px; border-radius: 4px; font-size: 11px; cursor: pointer; font-weight: 500; font-family: inherit; }
.status-toggle.active { background: #f0fdf4; color: #2a8a4d; }
.status-toggle.inactive { background: var(--color-background-secondary); color: #bcb6aa; }

.delete-title { font-size: 13px; font-weight: 500; color: #f0b4b4; margin-bottom: 3px; }
.delete-text { font-size: 12px; color: #f2d3d3; margin-bottom: 10px; }
.delete-actions { display: flex; gap: 8px; }

.pending-item-row { display: flex; align-items: flex-start; gap: 9px; padding: 8px 0; border-bottom: 1px solid var(--color-border-tertiary); }
.pending-item-row:last-child { border-bottom: none; }
.pending-item-row input[type="checkbox"] { accent-color: #D35382; cursor: pointer; margin-top: 2px; flex-shrink: 0; }
.pending-item-text { font-size: 13px; color: #f3f1ea; }
.pending-item-from { font-size: 11px; color: #bcb6aa; margin-top: 2px; }

.empty-state { padding: 40px; text-align: center; color: #bcb6aa; font-size: 13px; }
.empty-icon { font-size: 28px; display: block; margin-bottom: 10px; color: #9ca3af; }
.spinner { animation: spin 1s linear infinite; }

.modal-overlay { position: fixed; inset: 0; background: rgba(10, 22, 40, 0.48); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; }
.delete-confirm-overlay { z-index: 420 !important; }
.modal-box { background: var(--color-background-primary); border-radius: 14px; width: 100%; max-width: 440px; padding: 24px; box-shadow: 0 20px 45px rgba(0, 0, 0, 0.24); border: 1px solid var(--color-border-tertiary); }

.login-wrap {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1F1F1E;
  padding: 20px;
  overflow: hidden;
}
.login-box { background: var(--color-background-primary); border-radius: 14px; overflow: hidden; width: 100%; max-width: 390px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16); border: 1px solid var(--color-border-tertiary); }
.login-hdr { background: #0A1628; padding: 20px 24px; display: flex; align-items: center; gap: 8px; }
.login-body { padding: 24px 28px 20px; }
.login-footer { background: var(--color-background-secondary); padding: 12px 28px; border-top: 1px solid var(--color-border-tertiary); font-size: 12px; color: #bcb6aa; }
.login-inp { width: 100%; font-size: 14px; padding: 10px 12px; border: 1px solid var(--color-border-tertiary); border-radius: 8px; font-family: inherit; margin-top: 4px; outline: none; background: var(--color-background-secondary); color: #f3f1ea; }
.login-inp:focus { border-color: #D35382; box-shadow: 0 0 0 2px rgba(211, 83, 130, 0.14); }
.login-err { background: #FEF2F2; color: #b91c1c; border: 0.5px solid #FECACA; border-radius: 6px; padding: 10px 12px; font-size: 13px; margin-top: 12px; }
.login-btn {
  margin-top: 12px;
  width: auto;
  min-width: 0;
  margin-left: auto;
  display: inline-flex;
  white-space: nowrap;
  background: linear-gradient(180deg, #e06693, #c94e7d);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 18px rgba(211, 83, 130, 0.18);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.login-btn:hover {
  background: linear-gradient(180deg, #e8739d, #d35382);
  transform: translateY(-1px);
  box-shadow: 0 12px 20px rgba(211, 83, 130, 0.24);
  filter: saturate(1.03);
}
.login-btn:active {
  transform: translateY(0);
  box-shadow: 0 8px 14px rgba(211, 83, 130, 0.16);
}

#nc-type {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #bcb6aa 50%),
    linear-gradient(135deg, #bcb6aa 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 34px;
}

.gender-select {
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #bcb6aa 50%),
    linear-gradient(135deg, #bcb6aa 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 34px;
}

.btn-quick-entry, .btn-export, .btn-link { font-family: inherit; }

.address-from-placement { font-size: 11px; color: #bcb6aa; margin-top: 3px; display: flex; align-items: center; gap: 3px; }
.usps-validated { font-size: 11px; color: #7bc67a; display: inline-flex; align-items: center; gap: 2px; }

.cc-shell .nav-search { position: relative; }
.cc-shell .nav-search input { padding-right: 22px; }
.cc-shell .nav-search-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.cc-shell .nav-search-clear:hover { background: rgba(255, 255, 255, 0.24); }

.doc-desc {
  color: #c8c1b5;
}

.document-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.document-empty {
  padding: 22px 16px;
  text-align: center;
  color: #c8c1b5;
  font-size: 13px;
  font-style: italic;
  background: var(--color-background-primary);
  border: 1px solid var(--color-border-tertiary);
  border-radius: 12px;
}
.document-card {
  margin-bottom: 0;
  overflow: hidden;
  cursor: pointer;
}
.document-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px 12px;
}
.document-card-main {
  flex: 1;
  min-width: 0;
}
.document-card-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.document-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--color-background-secondary);
  border: 1px solid var(--color-border-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #D35382;
  font-size: 16px;
}
.document-card-name {
  font-size: 14px;
  font-weight: 600;
  color: #f3f1ea;
  line-height: 1.35;
  word-break: break-word;
  margin: 0;
}
.document-card-desc {
  margin-top: 0;
  font-size: 12px;
  color: #c8c1b5;
  line-height: 1.45;
}
.document-card-meta {
  margin-top: 2px;
  font-size: 11px;
  color: #bcb6aa;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.document-card-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding-top: 2px;
}
.document-card-actions .icnbtn:disabled,
.document-preview-inline-actions .icnbtn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
/* Desktop-only duplicate of the 6-icon preview toolbar (download/edit/delete
   + invert/fullscreen/close), rendered in the title row instead of below
   the separator line when the card is open. Exactly one of this and
   .document-preview-inline-actions is ever visible at a given width —
   see the matching rules further down.
   Deliberately render-both-toggle-with-CSS rather than one repositioned
   copy: the title row and the preview block are separate sibling elements
   (the toolbar's natural parent differs by breakpoint), so a single copy
   can't be moved between them with CSS alone. This matches the existing
   .dash-desktop/.dash-mobile and .hearings-desktop/.hearings-mobile
   pattern already used elsewhere in this file for the same reason — kept
   consistent with that precedent rather than introducing a third way
   (e.g. detaching/reattaching the DOM node in JS) to solve the same shape
   of problem. Reviewed 2026-07-19; the extra ~6 DOM nodes per open card
   was judged an acceptable, low-traffic cost (rarely more than one
   document open at a time). */
.document-card-top-actions-open {
  display: none;
  align-items: center;
  align-self: flex-end;
  gap: 0;
  flex-shrink: 0;
}
@media (min-width: 861px) {
  .document-card-top-actions-open {
    display: flex;
  }
}
.document-card--open {
  grid-column: 1 / -1;
}
.document-preview-inline {
  margin: 0 16px 14px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border-tertiary);
  overflow: hidden;
}
/* The animation lives on these two modifiers only, not on the base class —
   viewDoc re-renders this block once more ~260ms after opening (to swap
   the loading placeholder for the real iframe once DOC_VIEW_READY_ID is
   set), and since every render recreates the DOM from scratch, an
   animation on the base class would replay on that fresh element too,
   looking like the card snapping shut and reopening. Scoping it to
   --entering (only true until that ready re-render happens) avoids that;
   once settled, the plain class has no animation and just sits at its
   resting opacity/transform, which happen to be the keyframes' `to` values
   anyway, so there's no visible jump. */
.document-preview-inline--entering {
  animation: docPreviewInOut .24s ease;
}
/* Rendered for one extra render after closing (see startCloseDocPreview in
   app.js) purely so this gets a chance to play — the block is removed from
   the DOM entirely once the timeout there fires. */
.document-preview-inline--closing {
  animation: docPreviewInOut .22s ease reverse;
  pointer-events: none;
}
@keyframes docPreviewInOut {
  from { opacity: 0; transform: translateY(-8px); max-height: 0; }
  /* This has to be a fixed px value (CSS can't animate to/from `auto`), so
     it's deliberately far larger than any realistic content: the fixed
     620px pdf.js iframe (.document-preview-frame--pdfjs) plus a search
     snippet and notes block above it could plausibly reach a bit over
     1000px on a narrow viewport with long text in both — 900px was an
     unpadded guess that could clip that combination. 4000px gives generous
     headroom without the animation's timing/easing changing (a taller
     max-height target doesn't slow the animation down; the element's own
     real height is what it settles at well before the animation's `to`
     ceiling would matter). */
  to { opacity: 1; transform: translateY(0); max-height: 4000px; }
}
.document-preview-inline-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.document-preview-inline-actions {
  display: flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
}
@media (min-width: 861px) {
  .document-preview-inline-actions {
    display: none;
  }
}
.document-preview-inline-snippet {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  color: #f3f1ea;
  line-height: 1.6;
  padding: 0;
  background: none;
  border: none;
}
.document-preview-inline-desc {
  margin-top: 10px;
  font-size: 12px;
  color: #c8c1b5;
  line-height: 1.5;
}
.document-card--locked {
  cursor: default;
}
.document-card-ocr-strip {
  margin: 0 16px 14px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(211, 83, 130, 0.08);
  border: 1px solid rgba(211, 83, 130, 0.24);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.document-card-ocr-strip--failed {
  background: rgba(220, 38, 38, 0.08);
  border-color: rgba(220, 38, 38, 0.28);
}
.document-card-ocr-strip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 11px;
  font-weight: 600;
  color: #f3f1ea;
}
.document-card-ocr-strip-head i {
  font-size: 11px;
  margin-right: 6px;
  color: #f08aaa;
}
.document-card-ocr-strip--failed .document-card-ocr-strip-head i {
  color: #fca5a5;
}
.document-card-ocr-copy {
  font-size: 11px;
  line-height: 1.45;
  color: #c8c1b5;
}
.document-card-ocr-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 2px;
}
.document-ocr-retry-btn {
  padding: 6px 10px;
  font-size: 11px;
  line-height: 1;
}
.document-ocr-panel {
  margin: 0 16px 14px;
  padding: 14px 14px 15px;
  border-radius: 12px;
  border: 1px solid rgba(211, 83, 130, 0.24);
  background: rgba(211, 83, 130, 0.08);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.document-ocr-panel--failed {
  border-color: rgba(220, 38, 38, 0.28);
  background: rgba(220, 38, 38, 0.08);
}
.document-ocr-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.document-ocr-panel-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  color: #f3f1ea;
}
.document-ocr-panel-pct {
  font-size: 12px;
  color: #f3f1ea;
  font-variant-numeric: tabular-nums;
}
.document-ocr-progress {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
}
.document-ocr-progress-bar {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #D35382, #f08aaa);
  transition: width 260ms ease;
}
.document-ocr-panel-copy {
  font-size: 12px;
  line-height: 1.45;
  color: #d7d1c4;
}
.party-representing-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.35;
}
.document-preview-frame {
  width: 100%;
  height: 500px;
  border: none;
  margin-top: 12px;
  border-radius: 10px;
  background: #171614;
}
.document-preview-frame--pdfjs {
  height: 620px;
}
.document-preview-frame--inverted {
  filter: invert(1) hue-rotate(180deg);
}
.document-preview-frame--loading {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
}
.document-preview-frame:fullscreen,
.document-preview-frame:-webkit-full-screen,
.document-preview-frame:-moz-full-screen {
  width: 100vw;
  height: 100vh;
  border-radius: 0;
  margin: 0;
}
.document-preview-ios {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--color-border-tertiary);
  border-radius: 10px;
  background: var(--color-background-secondary);
}
.document-preview-ios-text {
  font-size: 13px;
  line-height: 1.5;
  color: #f3f1ea;
}
.document-preview-ios-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.document-preview-ios-btn,
.document-preview-ios-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  text-decoration: none;
}
.document-preview-ios-btn {
  padding: 9px 12px;
  background: #D35382;
  color: #fff;
  border: 1px solid rgba(211, 83, 130, 0.3);
}
.document-preview-ios-link {
  padding: 9px 12px;
  background: transparent;
  color: #d7d1c4;
  border: 1px solid var(--color-border-tertiary);
}
.document-preview-ios-link:hover {
  background: #2f2b28;
  color: #fff;
}
.document-upload-modal {
  max-width: 560px;
}
.hearing-modal {
  max-width: 860px;
}
.party-modal {
  max-width: 760px;
}
.party-modal .party-representing-picker .checkbox-dropdown-menu {
  position: fixed;
  top: 50%;
  left: 50%;
  right: auto;
  transform: translate(-50%, -50%);
  width: min(640px, calc(100vw - 48px));
  max-height: min(420px, calc(100vh - 96px));
  z-index: 340;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.42);
}
.contact-modal {
  max-width: 860px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.hearing-modal-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.hearing-modal .efl > label {
  margin-bottom: 5px;
}
@media (max-width: 780px) {
  .hearing-modal-grid {
    grid-template-columns: 1fr;
  }
}
.party-modal-grid {
  grid-template-columns: 1fr 1fr;
}
.contact-modal-grid {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.contact-modal-grid--top {
  grid-template-columns: 1fr 1fr 1.35fr;
}
.person-modal-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.person-modal-body .eg {
  margin-bottom: 0;
}
/* ── Education section (person modal) ───────────────────────────────────── */
.education-section {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 8px 14px 12px;
  border: .5px solid var(--color-border-tertiary);
  border-radius: 12px;
  background: var(--color-background-secondary);
  margin-bottom: 8px;
}
.education-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 0;
  margin: 0 0 2px 0;
  gap: 10px;
}
.education-section-status {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12px;
  color: var(--color-text-secondary);
  font-style: italic;
  line-height: 1.35;
}
.education-section-status--blank {
  visibility: hidden;
}
.education-empty-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 2px;
}
.education-section-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--color-text-secondary);
}
.education-empty {
  font-size: 12px;
  color: var(--color-text-secondary);
  font-style: italic;
  margin: 0;
}
.education-log {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.education-row {
  padding: 12px;
  border: .5px solid var(--color-border-tertiary);
  border-radius: 10px;
  background: rgba(0,0,0,.08);
}
.education-row .efl { margin-bottom: 0; }
.edu-top, .edu-bottom {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.edu-top .efl, .edu-bottom .efl {
  flex: 1;
  min-width: 110px;
}
.edu-flags {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  padding-bottom: 1px;
}
.edu-flag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: .5px solid var(--color-border-secondary);
  border-radius: 999px;
  background: var(--color-background-primary);
  color: var(--color-text-primary);
  font-size: 12px;
  cursor: pointer;
}
.edu-flag input {
  accent-color: #D35382;
  margin: 0;
}
.edu-trash {
  padding-bottom: 2px;
}
/* ── Education snapshot (pcard read-only display) ────────────────────────── */
.snapshot-edu-summary {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border: .5px solid var(--color-border-tertiary);
  border-radius: 10px;
  background: rgba(0,0,0,.08);
}
.snapshot-edu-summary-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.snapshot-edu-school {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
}
.snapshot-edu-grade {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  border: .5px solid var(--color-border-secondary);
  background: var(--color-background-primary);
  color: var(--color-text-secondary);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}
.snapshot-edu-meta {
  font-size: 11px;
  color: var(--color-text-secondary);
  line-height: 1.35;
}
.person-edu-inline {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: 2px;
}
.person-edu-school {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-primary);
  min-width: 0;
}
.person-edu-line {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
  line-height: 1.2;
}
.person-edu-sep {
  color: var(--color-text-secondary);
  font-size: 11px;
  flex-shrink: 0;
}
.person-edu-text {
  color: var(--color-text-secondary);
  font-size: 11px;
}
.person-edu-district {
  font-size: 11px;
  color: var(--color-text-secondary);
  min-width: 0;
  overflow-wrap: anywhere;
}
.person-edu-badges {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  min-width: 0;
}
.edu-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  border: .5px solid var(--color-border-secondary);
  background: #2b2926;
  color: var(--color-text-secondary);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}
.party-name-stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.party-name-main {
  font-size: 13px;
  font-weight: 600;
  color: #f3f1ea;
  line-height: 1.25;
  word-break: break-word;
}
.party-role-chip {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: #2b2926;
  border: 1px solid #4a4037;
  color: #d8c6d0;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}
.contact-parties-field {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--color-border-tertiary);
  border-radius: 10px;
  background: var(--color-background-secondary);
}
.contact-participants-field-btn {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--color-border-tertiary);
  border-radius: 10px;
  background: #24211e;
  padding: 8px 10px;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font-family: inherit;
}
.contact-participants-content {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-height: 24px;
  flex: 1;
  min-width: 0;
}
.contact-participants-caret {
  color: #c8c1b5;
  flex-shrink: 0;
  margin-top: 1px;
}
.contact-chipbox {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 44px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}
.contact-chip-placeholder {
  color: #bcb6aa;
  font-size: 12px;
  padding: 2px 0;
}
.contact-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 22px;
  line-height: 1;
  padding: 2px 7px;
  border-radius: 999px;
  background: #2b2927;
  border: 1px solid #4a4037;
  color: #f3f1ea;
  font-size: 10px;
  font-weight: 500;
}
.contact-chip button {
  background: none;
  border: none;
  color: #c8c1b5;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
}
.contact-chip button:hover {
  color: #ffffff;
}
.contact-parties-menu {
  max-height: 320px;
  max-width: 300px;
  width: min(300px, calc(100% - 24px));
}
.checkbox-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 8px;
  font-size: 12px;
  color: #f3f1ea;
  cursor: pointer;
}
.checkbox-dropdown-name {
  flex: 1;
  min-width: 0;
}
.contact-party-type {
  font-size: 10px;
  color: #bcb6aa;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.contact-party-other-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--color-border-tertiary);
}
.contact-party-other-input {
  flex: 1;
  min-width: 0;
}
.contact-task-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--color-border-tertiary);
}
.contact-task-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.contact-task-input {
  flex: 1;
  min-width: 0;
}
.checkbox-dropdown {
  position: relative;
}
.checkbox-dropdown-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-align: left;
  cursor: pointer;
}
.checkbox-dropdown-btn span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.checkbox-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30;
  max-height: 240px;
  overflow: auto;
  background: #24211e;
  border: 1px solid var(--color-border-tertiary);
  border-radius: 12px;
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.34);
  padding: 8px;
}
/* iOS Safari/PWA: this dropdown sits position:absolute inside the contact
   modal, which scrolls via -webkit-overflow-scrolling:touch — a known
   WebKit quirk lets absolutely-positioned overlays inside a touch-scrolled
   container composite without their own background actually painting,
   showing the modal content behind through it. Promoting it to its own
   layer forces a proper opaque paint. */
html.ios-safari .checkbox-dropdown-menu,
html.cc-pwa .checkbox-dropdown-menu {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  background: #24211e;
}
.checkbox-dropdown.open .checkbox-dropdown-menu {
  display: block;
}
.checkbox-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 12px;
  color: #f3f1ea;
  cursor: pointer;
}
.checkbox-dropdown-item:hover {
  background: #2b2927;
}
.checkbox-dropdown-item input {
  accent-color: #D35382;
  flex-shrink: 0;
}
.checkbox-dropdown-hint {
  font-size: 11px;
  color: #bcb6aa;
  margin-top: 4px;
}
.modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.modal-title {
  font-size: 15px;
  font-weight: 600;
  color: #f3f1ea;
}
.modal-subtitle {
  font-size: 12px;
  color: #bcb6aa;
  margin-top: 3px;
}
.cc-shell mark.search-hit {
  background: rgba(211, 83, 130, 0.26);
  color: #fff3f6;
  padding: 0 2px;
  border-radius: 4px;
}

.cc-shell .tab-bar {
  background: var(--color-background-secondary) !important;
}

.cc-shell .tab-btn.on,
.cc-shell .tab.on {
  background: #2b2927 !important;
  color: #ffffff !important;
  border-bottom-color: #D35382 !important;
}

.cc-shell .btn-secondary,
.cc-shell .btn-cancel-delete,
.cc-shell .btn-add,
.cc-shell .btn-export,
.cc-shell .btn-quick-entry {
  color: var(--color-text-secondary) !important;
}

.cc-shell .btn-secondary:hover,
.cc-shell .btn-cancel-delete:hover,
.cc-shell .btn-add:hover,
.cc-shell .btn-export:hover,
.cc-shell .btn-quick-entry:hover,
.cc-shell .tab-btn:hover,
.cc-shell .cr:hover td,
.cc-shell .drow:hover {
  background: #332f2b !important;
  color: #ffffff !important;
}
.cc-shell--dash .page-content.main-content {
  padding-bottom: 12px !important;
}
.cc-shell .search-results-panel {
  background: #171614;
  border: 1px solid #4a4037;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 16px;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.2);
}
.cc-shell .search-results-panel--loading,
.cc-shell .search-results-panel--empty {
  padding: 14px 16px;
  font-size: 13px;
  color: #d0cabd;
  font-style: italic;
}
.cc-shell .search-results-header {
  padding: 10px 14px;
  border-bottom: 1px solid #4a4037;
  font-size: 11px;
  font-weight: 600;
  color: #efe9dc;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: #211f1d;
}
.cc-shell .search-result-row {
  border-bottom: 1px solid #372f29;
}
.cc-shell .search-result-row:last-child {
  border-bottom: none;
}
.cc-shell .search-result-sub {
  font-size: 11px;
  color: #c8c1b5;
}
.cc-shell .search-result-sub--doc {
  line-height: 1.45;
}

@media (max-width: 860px) {
  .hearings-grid, .overview-grid, .stat-grid, .form-grid-2, .person-fields, .people-grid { grid-template-columns: 1fr !important; }
  .case-snapshot-card .snapshot-top-grid { grid-template-columns: 1fr !important; }
  .nav-search { display: none; }
  html.ios-safari .nav-mobile-search-btn,
  html.cc-pwa .nav-mobile-search-btn {
    display: flex;
  }
  /* Stack the download/edit/delete icons on document cards vertically
     instead of side-by-side, to save horizontal space next to the
     description text. */
  html.ios-safari .document-card-actions,
  html.cc-pwa .document-card-actions {
    flex-direction: column;
    gap: 0;
  }
  /* gap is already 0 above — the remaining visible space between the
     stacked icons comes from each .icnbtn's own padding, so pull them
     together with negative margin instead. */
  html.ios-safari .document-card-actions .icnbtn,
  html.cc-pwa .document-card-actions .icnbtn {
    margin: -4px 0;
  }
  /* iOS Safari/PWA has no Fullscreen API for arbitrary elements (only
     <video> supports it there), so this button does nothing there —
     just hide it rather than build a fake-fullscreen fallback. */
  html.ios-safari .nav-doc-fullscreen-btn,
  html.cc-pwa .nav-doc-fullscreen-btn {
    display: none;
  }
  .data-table { min-width: 720px; }
  .provider-card-body { grid-template-columns: 1fr; }
  .provider-card .provider-meta { flex-wrap: wrap; }
  .contact-modal-grid--top { grid-template-columns: 1fr !important; }
}

html.ios-safari .table-shell > .engagements-table {
  width: 100% !important;
  min-width: 100% !important;
  table-layout: fixed !important;
  display: table;
}

html.ios-safari .table-shell > .engagements-table th,
html.ios-safari .table-shell > .engagements-table td {
  width: auto !important;
}

html.ios-safari .table-shell > .parties-table,
html.ios-safari .table-shell > .hearings-table,
html.cc-pwa .table-shell > .parties-table,
html.cc-pwa .table-shell > .hearings-table {
  width: max-content !important;
  min-width: max-content !important;
  table-layout: auto !important;
  display: inline-table;
}

html.ios-safari .table-shell > .parties-table th,
html.ios-safari .table-shell > .parties-table td,
html.ios-safari .table-shell > .hearings-table th,
html.ios-safari .table-shell > .hearings-table td,
html.cc-pwa .table-shell > .parties-table th,
html.cc-pwa .table-shell > .parties-table td,
html.cc-pwa .table-shell > .hearings-table th,
html.cc-pwa .table-shell > .hearings-table td {
  width: auto !important;
  white-space: nowrap;
}
html.ios-safari .table-shell > .hearings-table th:nth-child(1),
html.ios-safari .table-shell > .hearings-table td:nth-child(1),
html.cc-pwa .table-shell > .hearings-table th:nth-child(1),
html.cc-pwa .table-shell > .hearings-table td:nth-child(1) {
  width: 96px !important;
  min-width: 96px !important;
}
html.ios-safari .table-shell > .hearings-table th:nth-child(2),
html.ios-safari .table-shell > .hearings-table td:nth-child(2),
html.cc-pwa .table-shell > .hearings-table th:nth-child(2),
html.cc-pwa .table-shell > .hearings-table td:nth-child(2) {
  width: 74px !important;
  min-width: 74px !important;
}
html.ios-safari .table-shell > .hearings-table th:nth-child(3),
html.ios-safari .table-shell > .hearings-table td:nth-child(3),
html.cc-pwa .table-shell > .hearings-table th:nth-child(3),
html.cc-pwa .table-shell > .hearings-table td:nth-child(3) {
  width: 180px !important;
  min-width: 180px !important;
  white-space: nowrap !important;
}
html.ios-safari .table-shell > .hearings-table th:nth-child(4),
html.ios-safari .table-shell > .hearings-table td:nth-child(4),
html.cc-pwa .table-shell > .hearings-table th:nth-child(4),
html.cc-pwa .table-shell > .hearings-table td:nth-child(4) {
  width: 320px !important;
  min-width: 320px !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
}
html.ios-safari .table-shell > .hearings-table th:nth-child(5),
html.ios-safari .table-shell > .hearings-table td:nth-child(5),
html.cc-pwa .table-shell > .hearings-table th:nth-child(5),
html.cc-pwa .table-shell > .hearings-table td:nth-child(5) {
  width: 72px !important;
  min-width: 72px !important;
}
html.ios-safari .table-shell > .hearings-table td:nth-child(4),
html.cc-pwa .table-shell > .hearings-table td:nth-child(4) {
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 280px;
  max-width: 360px;
}

html.ios-safari .person-fields,
html.cc-pwa .person-fields,
html.ios-safari .provider-card-body,
html.cc-pwa .provider-card-body,
html.ios-safari .case-snapshot-card .snapshot-placement-grid,
html.cc-pwa .case-snapshot-card .snapshot-placement-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

html.ios-safari .case-snapshot-card .snapshot-placement-col--single,
html.cc-pwa .case-snapshot-card .snapshot-placement-col--single {
  grid-column: 1 / -1;
}

@media (max-width: 860px) {
  html.ios-safari .contact-modal-grid--top,
  html.cc-pwa .contact-modal-grid--top {
    grid-template-columns: minmax(0, 0.70fr) minmax(0, 0.70fr) !important;
  }
  html.ios-safari .contact-modal,
  html.cc-pwa .contact-modal {
    max-width: min(860px, calc(100vw - 24px)) !important;
  }
  html.ios-safari .contact-modal .contact-type-field,
  html.cc-pwa .contact-modal .contact-type-field {
    grid-column: 1 / -1;
  }
  html.ios-safari .contact-modal .contact-type-field .edin,
  html.cc-pwa .contact-modal .contact-type-field .edin {
    width: 100%;
  }
  html.ios-safari .contact-modal .edin[type="date"],
  html.ios-safari .contact-modal .edin[type="time"],
  html.cc-pwa .contact-modal .edin[type="date"],
  html.cc-pwa .contact-modal .edin[type="time"] {
    font-size: 14px !important;
  }
}

@media (min-width: 861px) {
  .document-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .document-card-top {
    padding: 13px 14px 11px;
  }
  .document-preview-inline {
    margin-left: 14px;
    margin-right: 14px;
  }
}

@media (min-width: 861px) {
  .provider-grid { grid-template-columns: 1fr 1fr; }
  .placement-grid { grid-template-columns: 1fr 1fr; }
  .placement-grid--history { grid-template-columns: 1fr !important; }
  .placement-info-grid { grid-template-columns: 1fr 1fr; }
  .placement-info-grid--history { grid-template-columns: 1fr 1fr 1fr !important; }
}

@media (max-width: 620px) {
  #root { padding: 8px; }
  .nav-bar { padding: 0 14px; }
  .page-content { padding: 14px; }
}
.nav-title { font-size: 23px !important; }
.nav-subtitle { font-size: 12px !important; }
.login-hdr > div > div:first-child { font-size: 26px !important; font-weight: 700 !important; line-height: 1 !important; letter-spacing: -0.02em !important; }
.login-hdr > div > div:last-child { font-size: 13px !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   iOS / MOBILE SAFARI POLISH
   ═══════════════════════════════════════════════════════════════════════════ */

/* Remove the grey tap flash on all interactive elements */
*, *::before, *::after {
  -webkit-tap-highlight-color: transparent;
}

/* Prevent callout menu on long-press for buttons */
button, .icnbtn, .tab-btn, .tab, .itile, .namechip, .case-menu-btn {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* ── Nav bar: fill the status-bar / notch / Dynamic Island area ──────────
   env(safe-area-inset-top) is 0 in regular Safari and on non-notch devices,
   so this is safe to apply unconditionally.                                 */
.nav-bar {
  padding-top: env(safe-area-inset-top);
  height: calc(62px + env(safe-area-inset-top));
}

/* ── Mobile edge-to-edge (≤ 640 px — portrait phones + landscape small) ── */
@media (max-width: 640px) {

  /* Remove the desktop "card in a frame" padding — fill the screen */
  #root {
    padding: 0 !important;
    min-height: 100dvh;
    background: #0A1628; /* matches nav so status-bar area is seamless */
  }
  #root > div {
    max-width: 100%;
  }
  .cc-shell {
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    min-height: 100dvh;
    box-shadow: none !important;
  }

  /* Horizontal padding inside content areas */
  .page-content,
  .cc-shell .main-content {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* ── CRITICAL: prevent iOS Safari auto-zoom on input focus ──────────────
     Safari zooms the page if the focused input's font-size is under 16 px.  */
  .edin,
  select.edin,
  textarea.edin,
  .edin[type="date"],
  .edin[type="time"],
  .login-inp {
    font-size: 16px !important;
  }

  /* ── Collapse 2-column form grids to single column ─────────────────────
     The 860 px breakpoint missed .eg, which is the most common form grid.   */
  .eg {
    grid-template-columns: 1fr !important;
  }

  /* ── Tab bar: meet Apple's 44 pt minimum touch target ──────────────────  */
  .tab-btn, .tab {
    height: 44px !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }

  /* ── Icon buttons: easier to tap ───────────────────────────────────────  */
  .icnbtn, .btn-icon {
    min-width: 36px;
    min-height: 36px;
    justify-content: center;
    align-items: center;
  }
  .case-menu-btn {
    width: 36px !important;
    height: 36px !important;
  }

  /* ── Subheader: single row, meta hidden, case name fills remaining space  */
  .subheader-row--case {
    padding: 10px 14px;
    gap: 8px;
  }
  .subheader-left {
    width: 100%;
  }
  .subheader-meta {
    display: none;
  }

  /* ── Modals: scrollable and keyboard-aware ──────────────────────────────
     On iOS, the virtual keyboard can push a center-aligned modal off-screen.
     Align to the top and let the overlay scroll instead.                    */
  .modal-overlay {
    align-items: flex-start !important;
    padding-top: max(20px, env(safe-area-inset-top)) !important;
    padding-bottom: max(20px, env(safe-area-inset-bottom)) !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .modal-box {
    margin: 0 auto 20px;
    max-width: 100% !important;
    border-radius: 16px !important;
  }

  /* ── Login screen ───────────────────────────────────────────────────────  */
  .login-wrap {
    padding-top: max(20px, env(safe-area-inset-top));
    padding-bottom: max(20px, env(safe-area-inset-bottom));
    overflow: hidden;
    -webkit-overflow-scrolling: auto;
    align-items: center;
  }
  .login-box {
    margin: 20px auto;
    border-radius: 16px;
  }
  .login-body {
    padding: 24px 20px 20px;
  }
  .login-inp {
    padding: 13px 12px !important;
    min-height: 48px;
  }
  .login-btn {
    min-height: 48px !important;
    font-size: 15px !important;
    margin-top: 14px;
  }

  html.cc-login .login-wrap,
  html.cc-pwa .login-wrap {
    position: fixed;
    inset: 0;
    overflow: hidden;
    align-items: center;
    justify-content: center;
  }
  html.cc-login .login-box,
  html.cc-pwa .login-box {
    margin: 0 auto;
    max-height: 100dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ── Overview: 2-col stat grid becomes 1×3 on very small screens ───────  */
  .stat-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  /* ── Hearings grid: always single column on phone ───────────────────────  */
  .hearings-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── Card border radii: slightly tighter on mobile ─────────────────────  */
  .icard, .pcard, .placement-card, .provider-card,
  .contact-entry, .pending-items-card, .table-shell {
    border-radius: 10px !important;
  }

  /* ── Delete confirmation box: remove side margins ───────────────────────  */
  .delbox {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* ── Smooth momentum scrolling for scrollable containers ───────────────  */
  .tab-bar, .page-content, .main-content {
    -webkit-overflow-scrolling: touch;
  }

  /* ── Subheader case name: case name fills space, badges right-justified ─  */
  .subheader-case-name {
    flex: 1;
    min-width: 0;
    flex-wrap: nowrap;
    gap: 6px;
    align-items: center;
  }
  .subheader-case-name > span:first-child {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ── Desktop/mobile table toggle ───────────────────────────────────────  */
  .dash-desktop { display: none !important; }
  .dash-mobile { display: block; }
  .hearings-desktop { display: none !important; }
  .hearings-mobile { display: block; }
  .parties-desktop { display: none !important; }
  .parties-mobile { display: block; }

  /* ── Contact card: icon alignment on mobile ────────────────────────────  */
  .contact-card-head-left .bdg.neu {
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
  }
  .contact-type-icon {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    flex-shrink: 0;
    margin-right: 0;
    vertical-align: unset;
  }
  .contact-card-participants {
    align-items: center;
    margin-top: 4px;
  }
  .contact-card-participants i {
    margin-top: 0;
    font-size: 13px;
  }

  /* ── Placement card: hide children list on mobile ───────────────────────  */
  .placement-children-label {
    display: none !important;
  }

  /* ── Nav bar padding ────────────────────────────────────────────────────  */
  .nav-bar {
    padding-left: 14px;
    padding-right: 14px;
  }
}

/* ── Very small phones (≤ 390 px — iPhone SE, older models) ────────────── */
@media (max-width: 390px) {
  .stat-grid {
    grid-template-columns: 1fr !important;
  }
  .nav-title {
    font-size: 18px !important;
  }
  .login-hdr > div > div:first-child {
    font-size: 22px !important;
  }
  .nav-subtitle {
    display: none;
  }
  .tab-btn, .tab {
    padding-left: 11px !important;
    padding-right: 11px !important;
    font-size: 12px !important;
  }
}