/* 4PG Ops — dark theme (Royce 2026-09-08: "dark theme, more modern, including the font").
   Loaded AFTER each page's inline <style>, so these rules win; !important only where a
   template sets an inline style attribute. Palette from _brand-assets/brand-guide.md:
   teal #049898 (accent), charcoal #262626, slate #5A6265. Fonts: Montserrat (wordmark
   weight, headings) + Inter (body). */

:root {
  --teal: #0aa7a7; --teal-dk: #049898; --teal-soft: rgba(10,167,167,.14);
  --bg: #0e1415; --surface: #151d1e; --surface-2: #1b2526; --surface-3: #212d2e;
  --line: #263334; --line-2: #2f3e3f;
  --ink: #e7ecec; --ink-2: #c3cfcf; --muted: #8aa0a0;
  --gold: #d9a441; --gold-dk: #b8862b; --red: #e0645a; --green: #3ec28f;
  --radius: 10px; --shadow: 0 6px 24px rgba(0,0,0,.35);
}

html { background: var(--bg); }
body { background: var(--bg) !important; color: var(--ink) !important;
       font: 15px/1.5 "Inter", "Segoe UI", system-ui, sans-serif !important;
       -webkit-font-smoothing: antialiased; }
h1, h2, h3, .brand { font-family: "Montserrat", "Inter", sans-serif; letter-spacing: -.01em; }
h1 { font-size: 22px !important; font-weight: 700; color: var(--ink); }
h2 { font-size: 15px !important; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
     color: var(--ink-2); margin-top: 1.6em !important; }
a { color: var(--teal); }
main { max-width: 1120px !important; padding: 0 18px !important; }

/* ---- header / nav */
header { background: var(--surface) !important; border-bottom: 1px solid var(--line);
         padding: 6px 20px !important; gap: 6px !important; position: sticky; top: 0; z-index: 20;
         box-shadow: 0 2px 12px rgba(0,0,0,.35); }
header a { color: var(--ink-2) !important; font-weight: 500 !important; padding: 6px 11px; border-radius: 8px;
           opacity: 1 !important; font-size: 14px; }
header a:hover { background: var(--surface-3); color: #fff !important; text-decoration: none !important; }
header a.brand { display: flex; align-items: center; gap: 10px; padding: 2px 8px 2px 0; margin-right: 6px; }
header a.brand img { height: 46px; width: auto; display: block; }
header a.brand span { font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 13px;
                      letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
header a.money-tab { background: var(--gold) !important; color: #1b1405 !important; font-weight: 700 !important; }
header a.money-tab:hover { background: #e6b357 !important; }
.navnum { background: var(--teal) !important; color: #06201f !important; font-weight: 700; }
header .btn { background: var(--surface-3) !important; color: var(--ink-2) !important; border: 1px solid var(--line-2) !important;
              padding: 5px 11px !important; font-size: 13px !important; }
header .btn:hover { background: var(--line-2) !important; color: #fff !important; }

/* ---- surfaces */
.card, .cards .stat, .stat, table { background: var(--surface) !important; border-color: var(--line) !important;
                                     color: var(--ink); }
.card { border: 1px solid var(--line) !important; border-radius: var(--radius) !important; box-shadow: var(--shadow); }
.cards .stat { border-radius: var(--radius) !important; }
.stat b { color: var(--teal) !important; font-family: "Montserrat", sans-serif; font-weight: 700; }
th, td { border-bottom: 1px solid var(--line) !important; }
th { background: var(--surface-2) !important; color: var(--muted) !important; font-size: 12px !important;
     text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
tr:hover td { background: var(--surface-2); }
.muted { color: var(--muted) !important; }
.flash { background: var(--teal-soft) !important; border: 1px solid var(--teal-dk) !important; color: var(--ink) !important;
         border-radius: 8px !important; }
.badge { background: var(--surface-3) !important; color: var(--ink-2) !important; border: 1px solid var(--line-2); }
.badge.urgent { background: rgba(224,100,90,.18) !important; color: var(--red) !important; border-color: rgba(224,100,90,.5); }
.badge.ok { background: var(--teal-soft) !important; color: var(--teal) !important; border-color: var(--teal-dk); }

/* ---- controls */
.btn { background: var(--teal-dk) !important; color: #fff !important; border-radius: 8px !important;
       font-weight: 600 !important; box-shadow: 0 1px 0 rgba(255,255,255,.06) inset; }
.btn:hover { background: var(--teal) !important; }
.btn.gray { background: var(--surface-3) !important; color: var(--ink-2) !important; border: 1px solid var(--line-2); }
.btn.red { background: #8f3a33 !important; }
.btn.red:hover { background: #a9453d !important; }
input[type=text], input[type=date], input[type=number], input[type=password], input[type=tel], select, textarea {
  background: var(--bg) !important; color: var(--ink) !important; border: 1px solid var(--line-2) !important;
  border-radius: 8px !important; padding: 7px 9px !important; font: inherit !important; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--teal-dk); outline-offset: 1px; border-color: var(--teal-dk) !important; }
input::placeholder, textarea::placeholder { color: #6b8080; }
label { color: var(--muted); }

/* ---- inline-styled light boxes in templates (prospect call-prep, thread meta, forms) */
main [style*="background:#fff"], main [style*="background:#fffdf7"], main [style*="background:#fbf8f0"],
main [style*="background:#f7f3e8"], main [style*="background:#f8fcfa"], main [style*="background:#eef4f4"] {
  background: var(--surface-2) !important; color: var(--ink) !important; border-color: var(--line-2) !important; }
main [style*="border:2px solid #c9922e"] { border-color: var(--gold-dk) !important; background: var(--surface) !important; }
main [style*="color:#241a05"], main [style*="color:#6b6350"], main [style*="color:#4a4636"] { color: var(--ink-2) !important; }

/* ---- Leads (money page) */
.money .hero { background: linear-gradient(135deg, #17211f 0%, #1e2b2a 100%) !important; border: 1px solid var(--line-2) !important;
               border-radius: var(--radius) !important; box-shadow: var(--shadow); }
.money .cards .stat { background: var(--surface-2) !important; border-color: var(--line-2) !important; }
.money .cards .stat b { color: var(--gold) !important; }
.money .cards .stat span { color: var(--muted) !important; }
.money .cards .stat.hot { background: var(--gold) !important; border-color: var(--gold-dk) !important; }
.money .cards .stat.hot b, .money .cards .stat.hot span { color: #1b1405 !important; }
.money .ratio { color: var(--muted) !important; } .money .ratio b { color: var(--ink) !important; }
.money h2 { border-left-color: var(--gold) !important; }
.money table th { background: var(--surface-2) !important; }
.money tr.lead td { background: rgba(62,194,143,.08) !important; }
.money tr.gone td { background: var(--surface) !important; color: var(--muted) !important; }
.money .btn.gold { background: var(--gold) !important; color: #1b1405 !important; }
.money .btn.lead { background: #2a8f68 !important; }
.money .tl { background: var(--bg) !important; border-color: var(--line) !important; color: var(--ink-2) !important;
             font-family: "JetBrains Mono", Consolas, monospace !important; }
.money .tl i { color: var(--muted) !important; }
.money .pill { background: var(--gold) !important; color: #1b1405 !important; }
.money .pill.lead { background: #2a8f68 !important; color: #fff !important; }
.money .pill.gone { background: var(--surface-3) !important; color: var(--muted) !important; }
.money .newbox { background: var(--surface) !important; border-color: var(--line) !important; }
.money .newbox label { color: var(--muted) !important; }
.money .leadcard { background: var(--surface) !important; border-color: var(--line) !important; box-shadow: var(--shadow); }
.money .leadcard.won { background: rgba(62,194,143,.06) !important; border-left-color: var(--green) !important; }
.money .leadcard.hot { border-left-color: var(--gold) !important; }
.money .lc-top .addr { color: var(--ink) !important; }
.money .lc-phone { color: var(--gold) !important; }
.money .lc-facts b { color: var(--muted) !important; }
.money details.lc-notes summary { background: var(--surface-2) !important; border-color: var(--line-2) !important; color: var(--ink-2) !important; }
.money .lc-full { background: var(--surface-2) !important; border-color: var(--line-2) !important; color: var(--ink-2) !important; }
.money .lc-decide { border-top-color: var(--line-2) !important; }

/* ---- Texts */
.th { background: var(--surface) !important; border-color: var(--line) !important; color: var(--ink) !important; box-shadow: var(--shadow); }
.th:hover { border-color: var(--teal-dk) !important; }
.th.unread { background: var(--surface-2) !important; border-left-color: var(--gold) !important; }
.th .who, .th .meta { color: var(--muted) !important; } .th .last { color: var(--ink-2) !important; }
.th .pill { background: var(--gold) !important; color: #1b1405 !important; }
.b.in { background: var(--surface-2) !important; border-color: var(--line-2) !important; color: var(--ink) !important; }
.b.out { background: var(--teal-dk) !important; color: #fff !important; }
.replybox { background: var(--bg) !important; }

/* ---- login */
.login-wrap { max-width: 380px; margin: 9vh auto 0; text-align: center; }
.login-wrap img { width: 150px; margin-bottom: 18px; }
.login-wrap .card { text-align: left; padding: 24px 26px !important; }
.login-wrap h1 { font-size: 18px !important; margin: 0 0 16px !important; }

/* ---- Lead detail page (lead.html: stages, next action, feed, intake groups) */
.money .hero .phone, .money .hero a { color: var(--gold) !important; }
.money .hero .sub { color: var(--muted) !important; }
.money .stages span { background: var(--surface-3) !important; color: var(--muted) !important; }
.money .stages span.done { background: rgba(62,194,143,.18) !important; color: var(--green) !important; }
.money .stages span.now { background: var(--gold) !important; color: #1b1405 !important; }
.money .stages span.lost { background: rgba(224,100,90,.18) !important; color: var(--red) !important; }
.money .card { border-color: var(--line) !important; }
.money label { color: var(--muted) !important; }
.money .next { background: rgba(217,164,65,.12) !important; border-color: var(--gold-dk) !important; color: var(--ink) !important; }
.money .next.overdue { background: rgba(224,100,90,.14) !important; border-color: var(--red) !important; }
.money .next b.big { color: var(--gold) !important; }
.money .feed li { background: var(--surface-2) !important; border-left-color: var(--line-2) !important; color: var(--ink-2) !important; }
.money .feed li.offer { background: rgba(217,164,65,.12) !important; border-left-color: var(--gold) !important; }
.money .feed li.marketing { color: var(--muted) !important; border-left-color: var(--line-2) !important; }
.money .feed li.stage { border-left-color: var(--green) !important; }
.money .feed li.call_out, .money .feed li.call_in { border-left-color: var(--gold) !important; }
.money .feed .who { color: var(--muted) !important; }
.money .feed .body { color: var(--ink) !important; }
.money details.group summary { background: var(--surface-2) !important; border-color: var(--line-2) !important; color: var(--ink) !important; }
.money .gbody { border-color: var(--line-2) !important; background: var(--surface) !important; }
.money .actorpick { color: var(--muted) !important; }
.money .btn.gray { background: var(--surface-3) !important; color: var(--ink-2) !important; }
/* any remaining light inline boxes anywhere */
main [style*="background:#fff8e6"], main [style*="background:#e9e4d6"], main [style*="background:#fdeceb"] {
  background: var(--surface-2) !important; color: var(--ink) !important; }


/* ---- shell: left rail + top sub-tabs (Royce 2026-09-09) */
.shell { display: flex; min-height: 100vh; }
.rail { width: 208px; flex: 0 0 208px; background: var(--surface); border-right: 1px solid var(--line);
        display: flex; flex-direction: column; gap: 2px; padding: 12px 10px; position: sticky; top: 0; height: 100vh; }
.rail .brand { display: block; padding: 4px 8px 14px; }
.rail .brand img { height: 54px; width: auto; display: block; }
.rail > a:not(.brand) { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border-radius: 8px;
             color: var(--ink-2); text-decoration: none; font-weight: 500; font-size: 14.5px; }
.rail > a:not(.brand):hover { background: var(--surface-3); color: #fff; }
.rail > a.active { background: var(--teal-soft); color: var(--teal) !important; font-weight: 700; }
.rail > a.money { color: var(--gold); }
.rail > a.money.active { background: rgba(217,164,65,.14); color: var(--gold) !important; }
.railfoot { margin-top: auto; display: flex; flex-direction: column; gap: 6px; padding: 8px 6px 0; border-top: 1px solid var(--line);
            color: var(--muted); font-size: 13px; }
.content { flex: 1 1 auto; min-width: 0; }
.topbar { background: var(--surface) !important; border-bottom: 1px solid var(--line); padding: 8px 18px !important;
          display: flex; gap: 4px; flex-wrap: wrap; position: sticky; top: 0; z-index: 20; min-height: 44px; box-shadow: none !important; }
.topbar a { padding: 6px 12px; border-radius: 8px; color: var(--ink-2) !important; font-weight: 500 !important; font-size: 14px; }
.topbar a.active { background: var(--surface-3); color: #fff !important; font-weight: 700 !important; }
.topbar:empty { display: none; }
.shell.login .content { display: flex; align-items: flex-start; justify-content: center; }
@media (max-width: 820px) {
  .shell { flex-direction: column; }
  .rail { width: auto; flex: none; height: auto; position: static; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px; padding: 8px; }
  .rail .brand { padding: 0 8px 0 0; } .rail .brand img { height: 36px; }
  .rail > a:not(.brand) { padding: 6px 10px; font-size: 13.5px; }
  .railfoot { margin-top: 0; margin-left: auto; border: 0; flex-direction: row; align-items: center; padding: 0; }
}

/* Royce 2026-09-14: the native date/time picker icon rendered black on the dark inputs */
input[type=date], input[type=time], input[type=datetime-local], input[type=month] { color-scheme: dark; }
input[type=date]::-webkit-calendar-picker-indicator, input[type=time]::-webkit-calendar-picker-indicator,
input[type=datetime-local]::-webkit-calendar-picker-indicator, input[type=month]::-webkit-calendar-picker-indicator {
  filter: invert(62%) sepia(48%) saturate(1400%) hue-rotate(140deg) brightness(95%); /* teal */
  cursor: pointer; opacity: 1;
}