/* Typography and table readability. Color, type, and table presentation only. */

html,
body,
.font-sans,
button,
input,
select,
textarea {
  font-family: Arial, Helvetica, sans-serif !important;
}

body {
  font-size: 17px;
  color: #1C1915;
}

code,
pre,
kbd,
samp,
.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
}

/* Tailwind arbitrary sizes below the 13px floor. */
.text-\[8px\],
.text-\[9px\],
.text-\[10px\],
.text-\[11px\],
.text-\[12px\] {
  font-size: 13px !important;
}

input::placeholder,
textarea::placeholder {
  color: #5A5348 !important;
  opacity: 1 !important;
}

/* Tailwind gray text on light surfaces reads as body ink. */
.text-gray-300,
.text-gray-400,
.text-gray-500,
.text-gray-600,
.text-gray-700,
.text-gray-800,
.text-gray-900,
.text-neutral-400,
.text-neutral-500,
.text-neutral-600,
.text-slate-400,
.text-slate-500,
.text-slate-600,
.text-zinc-400,
.text-zinc-500,
.text-zinc-600 {
  color: #1C1915 !important;
}

.text-teal-500,
.text-teal-600,
.text-teal-700 {
  color: #3D5A34 !important;
}

.text-xs { font-size: 14px !important; }
.text-sm { font-size: 16px !important; }
.text-base { font-size: 17px !important; }
.text-lg { font-size: 20px !important; }
.text-xl { font-size: 22px !important; }
.text-2xl { font-size: 27px !important; }
.text-3xl { font-size: 34px !important; }
.text-4xl { font-size: 40px !important; }
.text-5xl { font-size: 54px !important; }

/* Charcoal nav and sidebar: white, full opacity. Active stays ember. */
.cl-nav .cl-nav-item,
.cl-nav-brand,
.cl-nav-avatar,
.admin-nav-link,
.nav-item,
.sidebar-section-label,
.logo-text-rei,
.logo-text-leads,
nav .text-gray-500,
nav .text-gray-700,
nav .text-blue-600,
nav .text-gray-100,
.dash-brand-logo,
.dash-btn-admin {
  color: #FFFFFF !important;
}

.cl-nav .cl-nav-item.cl-nav-active,
.admin-nav-link-active,
.nav-item.active,
.nav-item.active i,
.cl-nav-brand .cl-nav-brand-rei {
  color: #F08055 !important;
}

.nav-item:hover,
.admin-nav-link:hover {
  color: #FFFFFF !important;
}

.dash-brand-search input {
  color: #FFFFFF !important;
}

/* Shared filter / field height and radius. Checkboxes stay native. */
.form-input,
.form-select,
.cld-select,
.cld-date-input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="date"],
select {
  border-radius: 12px;
  box-sizing: border-box;
}

.form-input,
.form-select,
.cld-select,
.cld-date-input,
select {
  min-height: 48px;
}

/* Checkboxes and radios stay native squares. The 48px / 12px field
   rules above do not apply to them. Hidden persona radios (opacity 0)
   stay collapsed so the custom pill control remains the only visible
   toggle. */
input[type="checkbox"],
input[type="radio"] {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  padding: 0 !important;
  margin-top: 0;
  margin-bottom: 0;
  border-radius: 3px !important;
  box-sizing: border-box !important;
  accent-color: #EC6A3D !important;
  vertical-align: middle;
  flex: none !important;
}

input[type="radio"] {
  border-radius: 50% !important;
}

input[type="checkbox"][style*="opacity: 0"],
input[type="checkbox"][style*="opacity:0"],
input[type="radio"][style*="opacity: 0"],
input[type="radio"][style*="opacity:0"] {
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 0 !important;
  max-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  position: absolute !important;
}

/* Leads row selectors are custom divs, not inputs. Cell padding plus
   an 8px radius on a content-box 15px box draws a wide pill. Force a
   square, and ember when the inline style has painted a fill. */
.cld-grid > :first-child {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 3px !important;
  box-sizing: border-box !important;
  border: 1.5px solid #5A5348 !important;
  align-self: center;
  justify-self: center;
}

.cld-grid > :first-child[style*="background"] {
  background: #EC6A3D !important;
  border-color: #EC6A3D !important;
  color: #FFFFFF !important;
}

/* Tables: one header bar, one cell padding, sentence-case headers. */
table th,
table th.uppercase {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #1C1915 !important;
  background: #F3EDE1 !important;
  height: 44px;
  padding: 0 16px !important;
  vertical-align: middle !important;
  text-align: left;
  border-bottom: 1px solid #D9D0BF !important;
}

table td {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  vertical-align: middle !important;
  color: #1C1915;
  border-bottom: 1px solid #E6DFD1;
  font-size: 16px !important;
}

table tbody tr {
  background: #FFFDF8;
}

/* .text-xs is !important and beats table th on size. Headers stay 15px/600. */
table th.text-xs,
table th .text-xs {
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

table td a,
table td button {
  font-size: 15px !important;
}

/* Admin dashboard: the top Needs Attention card and the sections after
   the centered column (Recent Signups, Popular Lead Sources, Today's
   Scraper Summary, Recent Scraper Runs) are body-level siblings of
   .max-w-7xl. Match that column's inner left edge: 80rem box minus the
   same px-4 / sm:px-6 / lg:px-8 gutter. Nav and the column itself stay
   full width. */
body:has(> div.from-orange-50 + div.max-w-7xl) > div:not(.max-w-7xl) {
  box-sizing: border-box;
  width: calc(100% - 2rem);
  max-width: calc(80rem - 2rem);
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 640px) {
  body:has(> div.from-orange-50 + div.max-w-7xl) > div:not(.max-w-7xl) {
    width: calc(100% - 3rem);
    max-width: calc(80rem - 3rem);
  }
}

@media (min-width: 1024px) {
  body:has(> div.from-orange-50 + div.max-w-7xl) > div:not(.max-w-7xl) {
    width: calc(100% - 4rem);
    max-width: calc(80rem - 4rem);
  }
}