/*
 * Textstr app theme, 2026.
 *
 * A layer on top of Foundation 5, loaded last so it wins on cascade order.
 * It changes no markup and no JavaScript, which is deliberate: Foundation's
 * grid classes are spread across forty view templates and foundation.min.js
 * drives the dropdowns and modals, so touching either risks the parts of this
 * app that carry real customer messages.
 *
 * Everything here is colour, type, spacing and control styling. Remove the one
 * <link> that loads it and the app is exactly as it was.
 *
 * Palette matches the marketing site: the greens are sampled from the original
 * wordmark, so the two properties finally look related.
 */

:root {
  --tx-brand: #5CDD54;
  --tx-brand-deep: #2E9E3A;
  --tx-brand-wash: #EEFBEC;
  --tx-ink: #0B0F14;
  --tx-ink-2: #151C25;
  --tx-mut: #5D6B7A;
  --tx-faint: #93A0AD;
  --tx-paper: #FAFAF7;
  --tx-warm: #F2F2EC;
  --tx-line: #E2E3DB;
  --tx-danger: #D64545;
  --tx-sans: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --tx-display: 'Bricolage Grotesque', Georgia, serif;
  --tx-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --tx-radius: 10px;
}

/* ---------- type ---------- */
body {
  background: var(--tx-paper);
  color: var(--tx-ink);
  font-family: var(--tx-sans);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5 {
  font-family: var(--tx-display);
  color: var(--tx-ink);
  letter-spacing: -0.02em;
  font-weight: 700;
}
a { color: var(--tx-brand-deep); }
a:hover { color: var(--tx-ink); }
::selection { background: var(--tx-brand); color: var(--tx-ink); }

/* ---------- the top bar ---------- */
.top-bar, .top-bar-section ul li, .contain-to-grid, .top-bar.expanded .title-area {
  background: var(--tx-ink) !important;
}
.top-bar-section li:not(.has-form) a:not(.button) {
  background: transparent !important;
  color: rgba(255, 255, 255, .72) !important;
  font-family: var(--tx-sans);
  font-size: 14px;
}
.top-bar-section li:not(.has-form) a:not(.button):hover,
.top-bar-section li.active:not(.has-form) a:not(.button) {
  background: rgba(255, 255, 255, .07) !important;
  color: #fff !important;
}

/* ---------- panels become cards ---------- */
.panel {
  background: #fff;
  border: 1px solid var(--tx-line);
  border-radius: var(--tx-radius);
  box-shadow: 0 1px 2px rgba(11, 15, 20, .04), 0 14px 30px -22px rgba(11, 15, 20, .25);
  padding: 28px;
}
.panel > h4:first-child, .panel > .row:first-child h4 {
  margin-top: 0;
  font-size: 22px;
}

/* ---------- form controls ---------- */
label {
  color: var(--tx-mut);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .01em;
}
input[type="text"], input[type="password"], input[type="email"], input[type="tel"],
input[type="url"], input[type="number"], input[type="search"], textarea, select {
  border: 1px solid var(--tx-line) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  background: #fff !important;
  color: var(--tx-ink) !important;
  font-family: var(--tx-sans) !important;
  font-size: 15px !important;
  padding: 10px 12px !important;
  height: auto !important;
  transition: border-color .14s, box-shadow .14s;
}
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus,
input[type="tel"]:focus, input[type="url"]:focus, input[type="number"]:focus,
input[type="search"]:focus, textarea:focus, select:focus {
  border-color: var(--tx-brand-deep) !important;
  box-shadow: 0 0 0 3px var(--tx-brand-wash) !important;
  outline: none;
}
::placeholder { color: var(--tx-faint); }

/* ---------- buttons ---------- */
.button, button, input[type="submit"] {
  border-radius: 8px !important;
  font-family: var(--tx-sans) !important;
  font-weight: 600 !important;
  font-size: 14.5px !important;
  padding: 11px 20px !important;
  border: 0 !important;
  transition: background .14s, transform .14s;
}
.button:hover, button:hover, input[type="submit"]:hover { transform: translateY(-1px); }
.button.success, input[type="submit"].success, button.success,
.button:not(.alert):not(.secondary):not(.warning):not(.info),
input[type="submit"]:not(.alert):not(.secondary):not(.warning):not(.info) {
  background: var(--tx-brand) !important;
  color: var(--tx-ink) !important;
}
.button.success:hover, input[type="submit"].success:hover { background: var(--tx-brand-deep) !important; color: #fff !important; }
.button.secondary { background: var(--tx-warm) !important; color: var(--tx-ink) !important; }
.button.alert, input[type="submit"].alert { background: var(--tx-danger) !important; color: #fff !important; }

/* ---------- alerts ---------- */
.alert-box {
  border: 1px solid var(--tx-line);
  border-radius: 8px;
  background: var(--tx-warm);
  color: var(--tx-ink-2);
  font-size: 14px;
  padding: 12px 14px;
}
.alert-box.success { background: var(--tx-brand-wash); border-color: #BFEBB9; color: #1E6B27; }
.alert-box.alert { background: #FDEDED; border-color: #F5C6C6; color: #8C2B2B; }

/* ---------- tables, which is where the message lists live ---------- */
table { border: 1px solid var(--tx-line); border-radius: var(--tx-radius); border-collapse: separate; border-spacing: 0; overflow: hidden; }
table thead { background: var(--tx-warm); }
table thead th {
  font-family: var(--tx-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: .07em; color: var(--tx-mut); font-weight: 500;
}
table tr:nth-of-type(even) { background: var(--tx-paper); }
table tbody tr:hover { background: var(--tx-brand-wash); }
table td, table th { border-bottom: 1px solid var(--tx-line); }
table tbody tr:last-child td { border-bottom: 0; }

/* ---------- footer ---------- */
footer, .footer { background: var(--tx-ink) !important; color: rgba(255,255,255,.6); border-top: 0 !important; }
footer a, .footer a { color: rgba(255,255,255,.75) !important; }
footer a:hover, .footer a:hover { color: var(--tx-brand) !important; }

/* Keyboard focus must stay visible even where Foundation removed it. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--tx-brand-deep); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- header, replacing Foundation's top-bar ---------- */
.tx-header{position:sticky;top:0;z-index:60;background:var(--tx-ink);border-bottom:1px solid rgba(255,255,255,.08)}
.tx-nav{max-width:1180px;margin:0 auto;padding:0 20px;display:flex;align-items:center;gap:26px;min-height:58px}
.tx-logo{font-family:var(--tx-display);font-weight:800;font-size:20px;letter-spacing:-.035em;color:#fff !important;text-decoration:none}
.tx-logo i{color:var(--tx-brand);font-style:normal}
.tx-logo img{display:none}
.tx-burger{display:none;margin-left:auto;background:none;border:0;cursor:pointer;padding:8px;flex-direction:column;gap:4px}
.tx-burger span{display:block;width:20px;height:2px;background:#fff;border-radius:2px}
.tx-menu{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:4px;margin-left:auto}
.tx-menu > li{position:relative}
.tx-menu > li > a{display:block;padding:9px 13px;border-radius:8px;color:rgba(255,255,255,.75) !important;
  font-size:14px;font-weight:500;text-decoration:none;white-space:nowrap}
.tx-menu > li > a:hover{background:rgba(255,255,255,.08);color:#fff !important}
.tx-menu > li.tx-open > a{background:rgba(255,255,255,.1);color:#fff !important}
.tx-has-sub > a::after{content:"";display:inline-block;margin-left:7px;border:4px solid transparent;
  border-top-color:currentColor;transform:translateY(2px)}
.tx-sub{list-style:none;margin:0;padding:6px;position:absolute;right:0;top:calc(100% + 6px);min-width:190px;
  background:#fff;border:1px solid var(--tx-line);border-radius:10px;
  box-shadow:0 12px 30px -12px rgba(11,15,20,.3);display:none;z-index:70}
.tx-menu > li.tx-open .tx-sub{display:block}
/* Desktop opens on hover, the way the old top-bar did, and the parent link
 * still navigates. The ::before bridges the 6px gap so moving the pointer down
 * into the submenu does not close it. */
@media (hover: hover) and (min-width: 861px){
  .tx-menu > li.tx-has-sub:hover > .tx-sub,
  .tx-menu > li.tx-has-sub:focus-within > .tx-sub{display:block}
  .tx-menu > li.tx-has-sub:hover > a{background:rgba(255,255,255,.1);color:#fff !important}
}
.tx-sub::before{content:"";position:absolute;left:0;right:0;top:-8px;height:8px}
.tx-sub li a{display:block;padding:9px 11px;border-radius:7px;font-size:13.5px;color:var(--tx-ink) !important;text-decoration:none}
.tx-sub li a:hover{background:var(--tx-wash, #EEFBEC)}
.tx-sub li.tx-on a{background:var(--tx-brand-wash);color:var(--tx-brand-deep) !important;font-weight:600}
.tx-end{margin-left:8px}
.tx-cta{background:var(--tx-brand);color:var(--tx-ink) !important;border-radius:8px;padding:9px 16px !important;font-weight:700 !important}
@media(max-width:860px){
  .tx-burger{display:flex}
  .tx-menu{display:none;position:absolute;left:0;right:0;top:58px;flex-direction:column;align-items:stretch;
    background:var(--tx-ink);padding:10px;gap:2px;border-bottom:1px solid rgba(255,255,255,.1)}
  .tx-menu.tx-show{display:flex}
  .tx-sub{position:static;display:block;background:transparent;border:0;box-shadow:none;padding:0 0 0 12px}
  .tx-sub li a{color:rgba(255,255,255,.65) !important}
  .tx-has-sub > a::after{display:none}
}

/* =========================================================================
 * The inbox.
 *
 * Everything below is CSS only. list.php, details.php and their jQuery are
 * untouched, so every selector the app binds to (.responsecontainer,
 * .detailgroup, .conversations, .chat-conversations, #conversationwindow,
 * .replyButton, #completeConfirmModal, #sendNewMessageConfirmModal,
 * #addNamePhoneNumberModal, #removeNamePhoneNumberModal) still exists and
 * still carries the same data attributes. Delete this block and the inbox is
 * byte-for-byte the one that has been running since 2014.
 * ====================================================================== */

/* ---------- the two rows the inbox is built from get the full window ---------- */
.row:has(> .messageheader .messages.tabs),
.row:has(> .conversationgroup) {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
}

/* ---------- toolbar ---------- */
.row:has(> .messageheader .messages.tabs) {
  display: flex !important;
  align-items: center;
  gap: 16px;
  padding: 8px 22px !important;
  background: var(--tx-ink) !important;
  min-height: 52px;
  /* Pinned directly under the header. The header is sticky, so without this the
   * toolbar slides underneath it on any page scroll and gets clipped. */
  position: sticky;
  top: 58px;
  z-index: 55;
}
.row:has(> .messageheader .messages.tabs) > .columns {
  float: none !important;
  width: auto !important;
  padding: 0 !important;
}
.row:has(> .messageheader .messages.tabs) > .columns:not(.messageheader) {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}
.messageheader {
  flex: none;
  padding: 0 !important;
  display: flex;
  align-items: center;
  gap: 14px;
}
.row:has(> .messageheader .messages.tabs) .messageheader h4 {
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #fff !important;
  font-family: var(--tx-display);
  font-size: 15px !important;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
dl.messages.tabs {
  float: none !important;
  margin: 0 !important;
  padding: 3px !important;
  display: flex;
  gap: 3px;
  line-height: 1 !important;
  background: rgba(255, 255, 255, .07);
  border-radius: 999px;
}
dl.messages.tabs.pull-right { margin-left: auto !important; }
dl.messages.tabs dd { float: none !important; margin: 0 !important; }
dl.messages.tabs dd > a {
  display: block;
  padding: 7px 14px !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: rgba(255, 255, 255, .7) !important;
  font-family: var(--tx-sans);
  font-size: 12.5px !important;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
  text-transform: none;
}
dl.messages.tabs dd > a:hover { color: #fff !important; }
dl.messages.tabs dd.active > a {
  background: var(--tx-brand) !important;
  color: var(--tx-ink) !important;
}
dl.messages.tabs dd.active > a:hover { color: var(--tx-ink) !important; }
.message-badge {
  display: inline-block;
  min-width: 17px;
  padding: 1px 5px;
  margin-left: 5px;
  border-radius: 999px;
  background: var(--tx-danger);
  color: #fff;
  font-family: var(--tx-mono);
  font-size: 10px;
  line-height: 15px;
  text-align: center;
}

/* ---------- panes ----------
 * Foundation floats columns, and floats the LAST column right. #newmessage is
 * the last column, so when the outbound composer opens it could not sit beside
 * the list and dropped below it. One flex row fixes that without touching the
 * markup, and hidden panes simply take no space. */
.row:has(> .conversationgroup) {
  display: flex !important;
  align-items: stretch;
}
.row:has(> .conversationgroup) > .columns,
.row:has(> .conversationgroup) > #newmessage {
  float: none !important;
  position: relative;
}
.conversationgroup,
.detailgroup,
#newmessage {
  height: calc(100vh - 190px);
  min-height: 420px !important;
  max-height: none !important;
  padding: 0 !important;
}
.conversationgroup { flex: 0 0 380px; width: 380px !important; }
.detailgroup, #newmessage { flex: 1 1 auto; width: auto !important; min-width: 0; }
.conversationgroup {
  background: #fff !important;
  border-right: 1px solid var(--tx-line);
  border-radius: 0 !important;
  overflow-y: auto;
  overflow-x: hidden;
}
.conversationgroup > .nano-content {
  position: static !important;
  overflow: visible !important;
}
.detailgroup { background: var(--tx-paper) !important; display: flex; flex-direction: column; }
.detailgroup:empty { background: var(--tx-paper) !important; }
.detailgroup .row { max-width: none !important; margin: 0 !important; width: 100% !important; }
.noconversations {
  padding: 28px 20px;
  color: var(--tx-faint);
  font-size: 13.5px;
}

/* ---------- conversation rows ---------- */
.conversations, .chat-conversations { margin: 0 !important; padding: 0 !important; list-style: none; }
li.responsecontainer {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 12px;
  row-gap: 2px;
  margin: 0 !important;
  padding: 13px 16px 13px 22px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--tx-line) !important;
  border-radius: 0 !important;
  background: #fff !important;
  cursor: pointer;
  transition: background .12s;
}
li.responsecontainer:hover { background: var(--tx-paper) !important; }
li.responsecontainer.active {
  background: var(--tx-brand-wash) !important;
  box-shadow: inset 3px 0 0 var(--tx-brand-deep);
}
/* Foundation paints .active rows white; the list needs them readable. */
li.responsecontainer.active > div,
li.responsecontainer.active > div:nth-child(1) { color: var(--tx-ink) !important; }
li.responsecontainer.active > div:nth-child(2) { color: var(--tx-ink-2) !important; }
li.responsecontainer.active > div:nth-child(3) { color: var(--tx-mut) !important; }
li.responsecontainer.active > div:nth-child(4) { color: var(--tx-ink-2) !important; }
li.responsecontainer.unread::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 19px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--tx-brand-deep);
}
li.responsecontainer.unread > div:first-child { font-weight: 700; }
.responsecontainer.unread .phone:after { display: none !important; }
li.responsecontainer > div {
  float: none !important;
  width: auto !important;
  padding: 0 !important;
  min-width: 0;
}

/* SMS rows: name / phone / date / preview / tag */
.conversations > li.responsecontainer > div:nth-child(1) {
  grid-column: 1; grid-row: 1;
  font-size: 13.5px; font-weight: 600; color: var(--tx-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.conversations > li.responsecontainer > div:nth-child(2) {
  grid-column: 1; grid-row: 2;
  font-family: var(--tx-mono); font-size: 11.5px; color: var(--tx-mut);
}
.conversations > li.responsecontainer > div:nth-child(3) {
  grid-column: 2; grid-row: 1;
  font-family: var(--tx-mono); font-size: 10.5px; color: var(--tx-faint);
  text-align: right; white-space: nowrap;
}
.conversations > li.responsecontainer > div:nth-child(4) {
  grid-column: 1; grid-row: 3;
  margin-top: 4px; font-size: 13px; color: var(--tx-mut);
}
.conversations > li.responsecontainer > div:nth-child(5) {
  grid-column: 2; grid-row: 3;
  justify-self: end; align-self: end;
}

/* Chat rows carry no name line: channel / date / preview / tag */
.chat-conversations > li.responsecontainer > div:nth-child(1) {
  grid-column: 1; grid-row: 1;
  font-family: var(--tx-mono); font-size: 12px; font-weight: 600; color: var(--tx-ink);
}
.chat-conversations > li.responsecontainer > div:nth-child(2) {
  grid-column: 2; grid-row: 1;
  font-family: var(--tx-mono); font-size: 10.5px; color: var(--tx-faint);
  text-align: right; white-space: nowrap;
}
.chat-conversations > li.responsecontainer > div:nth-child(3) {
  grid-column: 1; grid-row: 2;
  margin-top: 4px; font-size: 13px; color: var(--tx-mut);
}
.chat-conversations > li.responsecontainer > div:nth-child(4) {
  grid-column: 2; grid-row: 2;
  justify-self: end; align-self: end;
}

/* the tag, wherever it lands, reads as a chip */
.conversations > li.responsecontainer > div:nth-child(5),
.chat-conversations > li.responsecontainer > div:nth-child(4),
.conversation-status {
  font-family: var(--tx-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 2px 6px !important;
  background: var(--tx-warm);
  color: var(--tx-mut);
  white-space: nowrap;
}
li.responsecontainer[data-tag="SALES"] > div:last-child { background: var(--tx-brand-wash); color: var(--tx-brand-deep); }
li.responsecontainer[data-tag="SERVICE"] > div:last-child { background: #EDF2FE; color: #3B6FE0; }
li.responsecontainer[data-tag="PARTS"] > div:last-child { background: #FDF4E3; color: #A8720F; }
li.responsecontainer[data-tag="default"] > div:last-child { visibility: hidden; }

/* The chip has to stay legible on the selected row's wash. */
li.responsecontainer.active > div:last-child { background: #fff !important; color: var(--tx-mut) !important; }
li.responsecontainer.active[data-tag="SALES"] > div:last-child { color: var(--tx-brand-deep) !important; }
li.responsecontainer.active[data-tag="SERVICE"] > div:last-child { color: #3B6FE0 !important; }
li.responsecontainer.active[data-tag="PARTS"] > div:last-child { color: #A8720F !important; }

/* ALL / UNANSWERED filter with jQuery .hide()/.show(); .show() clears the inline
 * rule on some builds by writing display:block, which would drop the grid. */
li.responsecontainer[style*="display: block"],
li.responsecontainer[style*="display:block"],
li.responsecontainer[style*="display: list-item"],
li.responsecontainer[style*="display:list-item"] { display: grid !important; }

/* Same for the two panes the app toggles: #newmessage starts hidden inline, so
 * jQuery .show() writes display:block and would flatten the flex column. */
/* Keyed off "not hidden" rather than "display:block", because jQuery .show()
 * may clear the inline rule instead of writing a value. */
.detailgroup:not([style*="display: none"]):not([style*="display:none"]),
#newmessage:not([style*="display: none"]):not([style*="display:none"]) { display: flex !important; }

/* .detailgroup carries Foundation's .hide-for-small, which resolves to
 * `display: inherit !important` above 40em. That beats the inline display:none
 * jQuery writes, so $('.detailgroup').hide() has never actually hidden the pane
 * on desktop; under the old float layout an empty pane just took no room. Now
 * that the row is flex it would, so say it explicitly: when the outbound
 * composer is open, the conversation pane is not. */
.row:has(> #newmessage:not([style*="display: none"]):not([style*="display:none"])) > .detailgroup { display: none !important; }

/* the add / remove name controls sit quietly next to the name */
.add-name-to-phone-btn, .remove-name-from-phone-btn {
  font-family: var(--tx-sans) !important;
  font-size: 10.5px !important;
  font-weight: 600;
  opacity: .55;
}
li.responsecontainer:hover .add-name-to-phone-btn,
li.responsecontainer:hover .remove-name-from-phone-btn { opacity: 1; }

/* ---------- conversation detail ---------- */
.conversation-details-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px !important;
  background: #fff;
  border-bottom: 1px solid var(--tx-line);
  flex: none;
}
.conversation-details-header > .columns { width: auto !important; padding: 0 !important; float: none !important; }
.conversationphone {
  flex: 1;
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
  font-size: 15px;
  font-weight: 700;
  color: var(--tx-ink);
}
.conversation-status.pull-right { float: none !important; }

#conversationwindow {
  flex: 1;
  min-height: 0;
  position: relative;
  padding-top: 0 !important;
  max-height: none !important;
  overflow: hidden;
}
#conversationwindow > .conversation-thread {
  position: absolute !important;
  top: 0; right: 0; bottom: 0; left: 0;
  overflow-y: auto;
  overflow-x: hidden;
  width: auto !important;
  padding: 20px 24px !important;
  float: none !important;
}
.detailgroup .conversation-thread > .row { margin-bottom: 2px !important; }
.detailgroup .conversation-thread > .row > .columns { padding: 0 !important; float: none !important; width: 100% !important; }

.detailgroup .messagecontent {
  width: fit-content;
  max-width: 62%;
  padding: 10px 13px !important;
  border-radius: 15px !important;
  font-size: 13.5px;
  line-height: 1.5;
}
.detailgroup .messagecontent.incoming {
  background: #fff !important;
  border: 1px solid var(--tx-line);
  color: var(--tx-ink) !important;
  border-bottom-left-radius: 5px !important;
}
.detailgroup .messagecontent.outgoing {
  background: var(--tx-brand) !important;
  color: var(--tx-ink) !important;
  border-bottom-right-radius: 5px !important;
  margin-left: auto;
}
.detailgroup div.messagecontent.incoming:before,
.detailgroup div.messagecontent.outgoing:before { display: none !important; }
.detailgroup .datedisplay {
  font-family: var(--tx-mono);
  font-size: 9.5px !important;
  letter-spacing: .04em;
  color: var(--tx-faint);
  margin: 3px 0 12px !important;
  text-align: right;
}
.conversation-thread > .row:has(> .columns > .messagecontent.incoming) > .datedisplay { text-align: left; }

/* ---------- composer ---------- */
.detailgroup .reply-area, #newmessage .reply-area {
  flex: none;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 12px 20px !important;
  background: #fff;
  border-top: 1px solid var(--tx-line);
}
.reply-area form { margin: 0 !important; }
#replyForm, #newmessageform .reply-area { display: flex; flex: 1; align-items: flex-end; gap: 8px; }
.reply-message-container { flex: 1; width: auto !important; padding: 0 !important; float: none !important; }
.reply-message-container textarea, #newMessageText {
  min-height: 44px !important;
  margin: 0 !important;
  resize: none;
}
.file-upload-btn, .reply-send-btn {
  width: auto !important;
  padding: 0 0 4px !important;
  float: none !important;
}
.file-upload-btn .fa, .reply-send-btn .fa { font-size: 19px !important; color: var(--tx-mut); cursor: pointer; }
.reply-send-btn .fa { color: var(--tx-brand-deep); }
.file-upload-btn .fa:hover, .reply-send-btn .fa:hover { color: var(--tx-ink); }
.reply-send-btn label { display: none; }
.inputfile { display: none; }

/* ---------- outbound composer ---------- */
#newmessage { display: flex; flex-direction: column; background: var(--tx-paper); }
#newmessageform { display: flex; flex-direction: column; flex: 1; margin: 0; min-width: 0; }
#newmessage .row {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
}
#newmessage .columns { float: none !important; width: auto !important; padding: 0 !important; }
#newmessage .conversation-thread {
  flex: 1;
  display: block;
  padding: 18px 22px !important;
  background: #fff;
  border-bottom: 1px solid var(--tx-line);
}
#newmessage .conversationphone {
  font-family: var(--tx-display);
  font-size: 15px;
  font-weight: 700;
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
  max-width: 420px;
}
#newmessage .conversationphone .row { display: grid; gap: 10px; margin-top: 12px !important; }
#newmessage .conversationphone label { display: none; }
#newmessage .conversation-thread > .columns:empty,
#newmessage .conversation-thread > .columns:last-child:not(.conversationphone) { display: none; }
#newMessageSendBtn { white-space: nowrap; }

/* ---------- modals ---------- */
.reveal-modal {
  border: 0 !important;
  border-radius: var(--tx-radius) !important;
  box-shadow: 0 24px 60px -20px rgba(11, 15, 20, .45) !important;
  padding: 26px !important;
}
.reveal-modal h4 { font-size: 18px; line-height: 1.4; margin-bottom: 18px; }

@media only screen and (max-width: 40em) {
  .row:has(> .conversationgroup) { flex-direction: column; }
  .conversationgroup { flex: 1 1 auto; width: 100% !important; border-right: 0; }
  .detailgroup, #newmessage { width: 100% !important; }
  /* A phone is not a two-pane workspace. Let the list run at its natural
     height instead of pinning it to the viewport, which left a screen of dead
     space under it. */
  .conversationgroup {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  .detailgroup, #newmessage { height: auto !important; min-height: 0 !important; }
  .detailgroup:empty { display: none !important; }
  #conversationwindow { min-height: 60vh; }
  .detailgroup .messagecontent { max-width: 80%; }
  .row:has(> .messageheader .messages.tabs) { flex-wrap: wrap; row-gap: 8px; }
}

/* =========================================================================
 * Auth pages.
 *
 * header.php now emits a body class from the first URI segment
 * (tx-page-login, tx-page-signup, tx-page-forgot ...), which is the app's
 * only way to style one page without touching its view. The markup of
 * login/index.php is untouched: same form, same field names, same validation
 * classes, same submit. Only the presentation changes.
 * ====================================================================== */

body.tx-page-login > .row.container,
body.tx-page-forgot > .row.container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 178px);
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 40px 20px;
}

body.tx-page-login .panel,
body.tx-page-forgot .panel {
  width: 100% !important;
  max-width: 430px;
  float: none !important;
  margin: 0 !important;
  padding: 40px 38px !important;
  box-shadow: 0 1px 2px rgba(11,15,20,.04), 0 30px 60px -34px rgba(11,15,20,.35);
}

/* Foundation's grid inside the card just gets in the way at this size. */
body.tx-page-login .panel .row,
body.tx-page-forgot .panel .row {
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
}
body.tx-page-login .panel .columns,
body.tx-page-forgot .panel .columns {
  width: 100% !important;
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.tx-page-login .panel h4,
body.tx-page-forgot .panel h4 {
  font-family: var(--tx-display);
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -.025em;
  margin: 0 0 22px;
}

body.tx-page-login .panel label,
body.tx-page-forgot .panel label {
  display: block;
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--tx-ink-2);
}
body.tx-page-login .panel .row + .row label { margin-top: 18px; }

body.tx-page-login .panel input[type="submit"],
body.tx-page-forgot .panel input[type="submit"] {
  width: 100%;
  float: none !important;
  margin: 24px 0 0 !important;
  padding: 13px !important;
  font-size: 15px !important;
}

body.tx-page-login .panel a {
  display: block;
  text-align: center;
  margin-top: 18px;
  font-size: 13.5px;
  color: var(--tx-mut);
}
body.tx-page-login .panel a:hover { color: var(--tx-brand-deep); }

body.tx-page-login .alert-box,
body.tx-page-forgot .alert-box { margin-bottom: 18px; }

/* -------------------------------------------------------------------------
 * Signup. Layout and colour only: every word, price, quote and form field in
 * signup/site.php is exactly as it was, and the three-step wizard hooks
 * (#step1..#step3, #goStep2, #goStep3, #goBackStep1, #goBackStep2,
 * #signupStep, .countryUS, .countryCA, .carditem, data-stripe) are untouched.
 * ---------------------------------------------------------------------- */

body.tx-page-signup .section1 > .row,
body.tx-page-signup .section2 > .row { max-width: 1120px !important; }
body.tx-page-signup .section1 { padding: 44px 20px 56px; }

/* The 2014 diamond texture tiles into broken blocks at the page edges. */
body.tx-page-signup .bg-diamond,
body.tx-page-signup .playSection { background-image: none !important; }
body.tx-page-signup .section2 { background: var(--tx-warm); padding: 52px 20px; }

body.tx-page-signup h3 {
  font-family: var(--tx-display);
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -.02em;
  text-align: center;
}
body.tx-page-signup .section1 > .row .columns[style*="border-bottom"],
body.tx-page-signup .section2 .columns[style*="border-bottom"] {
  border-bottom: 0 !important;
  margin-bottom: 26px !important;
}

/* The plan card. Orange #ffa250 is inline, so it needs !important. */
body.tx-page-signup .panel {
  background: var(--tx-ink) !important;
  border: 0 !important;
  border-radius: 14px !important;
  margin-right: 0 !important;
  padding: 30px 34px !important;
  box-shadow: 0 30px 60px -34px rgba(11,15,20,.5);
}
body.tx-page-signup .panel h4 {
  color: #fff !important;
  font-family: var(--tx-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .06em;
}
body.tx-page-signup .panel h2 {
  color: #fff !important;
  font-family: var(--tx-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.3;
}
body.tx-page-signup .panel h2 span { color: var(--tx-brand); font-size: 30px !important; display: block; }
body.tx-page-signup .panel ul.dash { list-style: none; margin: 0; padding: 0; }
body.tx-page-signup .panel ul.dash li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 9px;
  color: rgba(255,255,255,.82);
  font-size: 14px;
  line-height: 1.4;
}
body.tx-page-signup .panel ul.dash li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 7px; height: 7px;
  border-radius: 99px;
  background: var(--tx-brand);
}
body.tx-page-signup .panel small { color: rgba(255,255,255,.5) !important; font-size: 11.5px; }
body.tx-page-signup .panel .fa-play { color: rgba(255,255,255,.16); }

/* The form: labels above their fields rather than in a 4-column gutter. */
body.tx-page-signup #signup .row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  margin: 0 0 14px !important;
  max-width: none !important;
}
body.tx-page-signup #signup .row > .columns {
  width: 100% !important;
  float: none !important;
  padding: 0 !important;
  margin-left: 0 !important;
}
/* Expiry is label + month + year, so keep those two side by side. */
body.tx-page-signup #signup .row:has(> .columns + .columns + .columns) { grid-template-columns: 1fr 1fr; gap: 6px 12px; }
body.tx-page-signup #signup .row:has(> .columns + .columns + .columns) > .columns:first-child { grid-column: 1 / -1; }

body.tx-page-signup #signup label.inline {
  display: block;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  color: var(--tx-ink-2);
  line-height: 1.3;
  padding: 0 !important;
}
body.tx-page-signup #signup input,
body.tx-page-signup #signup select { margin-bottom: 0 !important; }
body.tx-page-signup #signup .button {
  font-size: 14.5px !important;
  padding: 12px 22px !important;
  margin: 0 8px 0 0 !important;
}
body.tx-page-signup #signup .row:last-of-type { margin-top: 22px !important; }

/* Testimonials */
body.tx-page-signup .section2 blockquote,
body.tx-page-signup .section2 p { font-size: 14.5px; line-height: 1.6; color: var(--tx-ink-2); }
body.tx-page-signup .section2 small { color: var(--tx-faint); font-size: 11.5px; }

@media (max-width: 40em) {
  body.tx-page-signup .panel { margin-bottom: 26px !important; }
}

/* -------------------------------------------------------------------------
 * Auth, two pane. The form keeps its own markup: same field ids and names,
 * same `required email` validation classes, same form.dovalidate that
 * footer.php binds jQuery validate to. What is new is the surrounding
 * structure, because a supporting rail cannot be conjured in CSS.
 * ---------------------------------------------------------------------- */

body.tx-page-login > .row.container {
  display: block;
  padding: 0;
  min-height: 0;
}
.tx-auth {
  display: grid;
  grid-template-columns: 1fr;
  min-height: calc(100vh - 58px - 80px);
}
@media (min-width: 900px) {
  .tx-auth { grid-template-columns: 1fr 0.8fr; }
}
.tx-auth-inner { width: 100%; max-width: 390px; }
.tx-auth-form {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 32px;
  background: var(--tx-paper);
}
.tx-auth-form h1 {
  font-family: var(--tx-display);
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -.03em;
  margin: 0;
}
.tx-auth-sub { color: var(--tx-mut); font-size: 15px; margin: 9px 0 28px; }
.tx-auth-form form { margin: 0; }
/* Each label must sit closer to its own field than to the one above, or the
 * eye groups it with the wrong input. */
.tx-auth-form label {
  display: block;
  margin: 20px 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--tx-ink-2);
}
.tx-auth-form .tx-step + label,
.tx-auth-form label:first-of-type { margin-top: 0; }
.tx-auth-form input[type="email"],
.tx-auth-form input[type="password"],
.tx-auth-form input[type="text"],
.tx-auth-form input[type="tel"] { margin-bottom: 0 !important; }
.tx-auth-form input[type="submit"] {
  width: 100%;
  float: none !important;
  margin: 26px 0 0 !important;
  padding: 13px !important;
  font-size: 15px !important;
}
.tx-auth-alt {
  display: block;
  margin-top: 18px;
  font-size: 13.5px;
  color: var(--tx-mut) !important;
}
.tx-auth-alt:hover { color: var(--tx-brand-deep) !important; }
.tx-auth-meta {
  margin: 26px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--tx-line);
  font-size: 13.5px;
  color: var(--tx-faint);
}
.tx-auth-meta a { color: var(--tx-brand-deep); font-weight: 600; }

.tx-auth-rail {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 40px;
  background: var(--tx-ink);
  color: #fff;
}
.tx-rail-eyebrow {
  font-family: var(--tx-mono);
  font-size: 10.5px;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--tx-faint);
  margin: 0;
}
.tx-auth-rail h2 {
  font-family: var(--tx-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.25;
  color: #fff;
  margin: 14px 0 0;
  text-wrap: balance;
}
.tx-rail-list { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 15px; }
.tx-rail-list li {
  position: relative;
  padding-left: 27px;
  font-size: 14.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .78);
}
.tx-rail-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 5px;
  width: 15px; height: 15px;
  border-radius: 99px;
  background: rgba(92, 221, 84, .16);
}
.tx-rail-list li::after {
  content: "";
  position: absolute;
  left: 4.5px; top: 9px;
  width: 5px; height: 2.5px;
  border-left: 2px solid var(--tx-brand);
  border-bottom: 2px solid var(--tx-brand);
  transform: rotate(-45deg);
}
@media (max-width: 899px) {
  .tx-auth-rail { padding: 40px 32px 48px; }
  .tx-auth-rail h2 { font-size: 21px; }
}

/* ---------- signup, two pane ---------- */
body.tx-page-signup > .row.container { display: block; padding: 0; min-height: 0; max-width: none !important; }
.tx-auth-wide .tx-auth-inner { max-width: 440px; }
@media (min-width: 900px) { .tx-auth-wide { grid-template-columns: 1fr 0.62fr; } }
.tx-auth-form .tx-step {
  font-family: var(--tx-mono);
  font-size: 10.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--tx-faint);
  margin: 0 0 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--tx-line);
}
.tx-auth-form select { margin-bottom: 0 !important; width: 100%; }
.tx-step-actions { display: flex; gap: 10px; margin-top: 26px; }
.tx-step-actions .button { margin: 0 !important; flex: 0 0 auto; padding: 12px 26px !important; }
.tx-card-row { display: grid; grid-template-columns: 1fr 1.35fr; gap: 16px; }
.tx-card-exp { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tx-terms { font-size: 12.5px; line-height: 1.55; color: var(--tx-mut); margin: 4px 0 20px; }
.tx-rail-price { display: block; color: var(--tx-brand); font-size: 34px; margin-top: 4px; }
.tx-auth-rail .tx-rail-note { margin: 22px 0 0; font-size: 11.5px; color: rgba(255,255,255,.45); }
.tx-auth-wide .tx-rail-list { gap: 11px; }

/* testimonials keep their words, lose the 2014 texture */
body.tx-page-signup .section2 { background: var(--tx-warm); padding: 52px 24px; }
body.tx-page-signup .section2 .row { max-width: 1120px !important; }
body.tx-page-signup .section2 img { max-width: 26px; opacity: .3; }
body.tx-page-signup .section2 p[style] { font-size: 11.5px !important; color: var(--tx-faint); margin-top: 8px; }
body.tx-page-signup .section2 li p:first-child { font-size: 14.5px; line-height: 1.6; color: var(--tx-ink-2); }

/* =========================================================================
 * Analytics and reporting.
 *
 * Shared by messages/stats.php and manage/stats.php, which have the same
 * shape: SMS/Chat tabs, a date-range form (#getdates), an optional Highcharts
 * canvas (#chart) and a DataTable (#statstable). Scoped on those ids so the
 * inbox is unaffected. No markup changes: the datepickers, the DataTable and
 * the Refresh submit all keep their hooks.
 * ====================================================================== */

body:has(#statstable) > .row.container { max-width: 1160px !important; padding: 26px 22px 40px; }

/* page heading */
body:has(#statstable) .messageheader,
body:has(#statstable) .messageheader .columns { padding: 0 !important; }
body:has(#statstable) .messageheader h4,
body:has(#statstable) h5 {
  font-family: var(--tx-display);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.025em;
  margin: 0 0 18px;
  color: var(--tx-ink);
}

/* SMS / Chat as a segmented control, replacing the inline orange */
body:has(#statstable) dl.tabs {
  display: inline-flex;
  gap: 3px;
  float: none !important;
  margin: 0 0 22px !important;
  padding: 3px !important;
  background: var(--tx-warm);
  border: 1px solid var(--tx-line);
  border-radius: 999px;
  line-height: 1 !important;
}
body:has(#statstable) dl.tabs dd { float: none !important; margin: 0 !important; }
body:has(#statstable) dl.tabs dd > a {
  display: block;
  background: transparent !important;
  color: var(--tx-mut) !important;
  border-radius: 999px !important;
  padding: 8px 20px !important;
  font-size: 13px !important;
  font-weight: 600;
}
body:has(#statstable) dl.tabs dd > a:hover { color: var(--tx-ink) !important; }
body:has(#statstable) dl.tabs dd.active > a {
  background: var(--tx-ink) !important;
  color: #fff !important;
}

/* date range filter, inline rather than a floating card */
#getdates .panel {
  display: inline-flex;
  align-items: flex-end;
  gap: 14px;
  width: auto !important;
  max-width: none !important;
  float: none !important;
  padding: 16px 18px !important;
  margin: 0 0 24px !important;
  border-radius: var(--tx-radius);
  box-shadow: none;
}
#getdates .panel .row { margin: 0 !important; max-width: none !important; display: contents; }
#getdates .panel .columns { width: auto !important; float: none !important; padding: 0 !important; }
#getdates label {
  display: block;
  margin: 0 0 6px;
  font-family: var(--tx-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tx-faint);
}
#getdates input[type="text"] { margin: 0 !important; width: 150px; }
#getdates input[type="submit"] { margin: 0 !important; padding: 11px 22px !important; }

/* chart sits on its own card */
#chart {
  background: #fff;
  border: 1px solid var(--tx-line);
  border-radius: var(--tx-radius);
  padding: 10px 6px 4px;
  margin-bottom: 26px;
}

/* DataTables chrome */
.dataTables_wrapper { position: relative; }
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { margin-bottom: 14px; font-size: 13px; color: var(--tx-mut); }
.dataTables_wrapper .dataTables_filter { float: right; }
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  margin: 0 6px !important;
  padding: 7px 10px !important;
  font-size: 13.5px !important;
  width: auto !important;
  display: inline-block !important;
}
.dataTables_wrapper .dataTables_filter input { min-width: 210px; }
.dataTables_wrapper table.dataTable { width: 100% !important; margin: 0 0 14px !important; }
.dataTables_wrapper table.dataTable thead th {
  background: var(--tx-warm);
  border-bottom: 1px solid var(--tx-line) !important;
  padding: 11px 14px !important;
  white-space: nowrap;
}
.dataTables_wrapper table.dataTable tbody td { padding: 11px 14px !important; font-size: 14px; }
/* DataTables' own stylesheet paints tr.odd #E2E4FF, and it sets it on the row,
 * not the cell, so overriding td alone leaves the lavender showing. */
.dataTables_wrapper table.dataTable tbody tr,
.dataTables_wrapper table.dataTable tbody tr.odd,
.dataTables_wrapper table.dataTable tbody tr.even { background: transparent !important; }
.dataTables_wrapper table.dataTable tbody tr.odd td,
.dataTables_wrapper table.dataTable tbody tr.even td { background: transparent !important; }
.dataTables_wrapper table.dataTable tbody tr { border-bottom: 1px solid var(--tx-line); }
.dataTables_wrapper table.dataTable tbody td.sorting_1,
.dataTables_wrapper table.dataTable tbody tr.odd td.sorting_1,
.dataTables_wrapper table.dataTable tbody tr.even td.sorting_1 { background: transparent !important; }
.dataTables_wrapper table.dataTable thead th.sorting_asc,
.dataTables_wrapper table.dataTable thead th.sorting_desc { color: var(--tx-ink); }
.dataTables_wrapper table.dataTable tbody tr:hover,
.dataTables_wrapper table.dataTable tbody tr:hover td,
.dataTables_wrapper table.dataTable tbody tr:hover td.sorting_1 { background: var(--tx-brand-wash) !important; }
.dataTables_wrapper table.dataTable tfoot td {
  background: var(--tx-warm);
  border-top: 2px solid var(--tx-line) !important;
  padding: 11px 14px !important;
  font-weight: 700;
}
/* numeric columns line up */
.dataTables_wrapper table.dataTable td + td,
.dataTables_wrapper table.dataTable th + th { font-variant-numeric: tabular-nums; }

.dataTables_wrapper .dataTables_info { font-size: 12.5px; color: var(--tx-faint); padding-top: 4px; }
.dataTables_wrapper .dataTables_paginate { float: right; display: flex; gap: 6px; }
.dataTables_wrapper .dataTables_paginate .paginate_button,
.dataTables_wrapper .dataTables_paginate a {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid var(--tx-line);
  border-radius: 7px;
  background: #fff;
  color: var(--tx-ink) !important;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current { background: var(--tx-ink); color: #fff !important; border-color: var(--tx-ink); }
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled { opacity: .4; cursor: default; }
.dataTables_wrapper:after { content: ""; display: table; clear: both; }

/* summary tiles: the totals the table already foots, led up front */
.tx-stat-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin: 0 0 26px;
  max-width: 720px;
}
.tx-stat {
  background: #fff;
  border: 1px solid var(--tx-line);
  border-radius: var(--tx-radius);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tx-stat-label {
  font-family: var(--tx-mono);
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--tx-faint);
}
.tx-stat-value {
  font-family: var(--tx-display);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--tx-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.tx-stat:last-child { background: var(--tx-ink); border-color: var(--tx-ink); }
.tx-stat:last-child .tx-stat-value { color: var(--tx-brand); }
.tx-stat:last-child .tx-stat-label { color: rgba(255,255,255,.55); }

/* ---------- reporting tables elsewhere in Manage ----------
 * invoices, portals and the user list use dataTables.foundation rather than the
 * plain DataTables stylesheet, and sit on pages with no #statstable, so they
 * need the container and column rules applied on the wrapper instead. */
body:has(.dataTables_wrapper) > .row.container { max-width: 1160px !important; padding: 26px 22px 40px; }
body:has(.dataTables_wrapper) section > .row { max-width: none !important; margin: 0 !important; }
body:has(.dataTables_wrapper) section > .row > .columns { padding: 0 !important; width: 100% !important; float: none !important; }
body:has(.dataTables_wrapper) h4 {
  font-family: var(--tx-display);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.025em;
  margin: 0 0 18px;
}

/* dates should never wrap onto two lines */
table.dataTable td:first-child,
table.dataTable th:first-child { white-space: nowrap; }

/* money reads as money: right aligned, lined up */
#invoiceTable td:nth-child(3),
#invoiceTable th:nth-child(3) { text-align: right; font-variant-numeric: tabular-nums; }
#invoiceTable td:nth-child(4),
#invoiceTable th:nth-child(4) { width: 1%; white-space: nowrap; }

/* the action button under each report */
body:has(.dataTables_wrapper) .button.tiny {
  margin-top: 18px !important;
  padding: 11px 20px !important;
  font-size: 13.5px !important;
}

/* Foundation's DataTables integration renders pagination as ul.pagination > li > a,
 * not the plain .paginate_button span. Styling both nests one box inside another,
 * and Foundation paints the current page #008CBA. Style the anchor only. */
.dataTables_wrapper ul.pagination {
  display: flex;
  gap: 6px;
  float: right;
  margin: 0 !important;
  list-style: none;
}
.dataTables_wrapper ul.pagination li {
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  height: auto !important;
}
.dataTables_wrapper ul.pagination li a,
.dataTables_wrapper ul.pagination li span {
  display: block;
  padding: 6px 12px !important;
  border: 1px solid var(--tx-line) !important;
  border-radius: 7px !important;
  background: #fff !important;
  color: var(--tx-ink) !important;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
}
.dataTables_wrapper ul.pagination li.current a,
.dataTables_wrapper ul.pagination li.current span,
.dataTables_wrapper ul.pagination li.active a {
  background: var(--tx-ink) !important;
  border-color: var(--tx-ink) !important;
  color: #fff !important;
}
.dataTables_wrapper ul.pagination li.unavailable a,
.dataTables_wrapper ul.pagination li.disabled a { opacity: .4; }

/* Rate is money, so it lines up the way the invoice amounts do. */
#usersTable td:nth-child(4),
#usersTable th:nth-child(4) { text-align: right; font-variant-numeric: tabular-nums; }
#usersTable td:nth-child(3),
#usersTable th:nth-child(3),
#usersTable td:nth-child(5),
#usersTable th:nth-child(5) { width: 1%; white-space: nowrap; }

/* =========================================================================
 * Phones.
 *
 * Measured at a real 390px viewport (Chrome on macOS clamps --window-size to
 * ~500px, so window sizing alone silently lies): /manage scrolled sideways to
 * 717px, /manage/invoices to 519px and /messages to 406px against a 390px
 * screen. The cause in each case is content that cannot shrink, so give it
 * somewhere to go instead of letting it drag the page.
 * ====================================================================== */
@media only screen and (max-width: 40em) {

  /* Reporting tables keep every column. The table scrolls inside its wrapper
     rather than taking the whole document with it. */
  .dataTables_wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .dataTables_wrapper table.dataTable { min-width: 520px; }
  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper .dataTables_info,
  .dataTables_wrapper .dataTables_paginate { float: none !important; }
  .dataTables_wrapper .dataTables_filter { margin-top: 6px; }
  .dataTables_wrapper .dataTables_filter input { min-width: 0 !important; width: 100% !important; }
  .dataTables_wrapper .dataTables_paginate,
  .dataTables_wrapper ul.pagination { margin-top: 12px !important; flex-wrap: wrap; justify-content: flex-start; }

  /* The inbox toolbar's three pills need 384px and only have 346, so let them
     wrap and tighten them rather than push the page 16px wide. */
  .row:has(> .messageheader .messages.tabs) {
    padding: 8px 12px !important;
    flex-wrap: wrap;
    row-gap: 8px;
  }
  /* Give the SEND OUTBOUND / ALL / UNANSWERED group a line of its own instead
     of squeezing it beside the heading, where it ran off the screen. */
  .row:has(> .messageheader .messages.tabs) > .columns:not(.messageheader) {
    flex: 1 0 100%;
    justify-content: flex-start;
    min-width: 0;
  }
  dl.messages.tabs { flex-wrap: wrap; }
  dl.messages.tabs dd > a { padding: 7px 11px !important; font-size: 11.5px !important; }
  .messageheader { flex-wrap: wrap; row-gap: 8px; }
  .messageheader h4 { font-size: 13px !important; }

  /* Page gutters shrink so content is not squeezed into a narrow column. */
  body:has(#statstable) > .row.container,
  body:has(.dataTables_wrapper) > .row.container { padding: 18px 14px 28px !important; }

  /* The date filter stacks instead of forcing a wide row. */
  #getdates .panel { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100% !important; }
  #getdates input[type="text"] { width: 100% !important; }
  #getdates input[type="submit"] { grid-column: 1 / -1; width: 100%; }

}