/* ==========================================================================
   Theme: Little Ray of Sunshine. Loaded after app.css only when the
   `theme` setting is "little-ray". Matches littlerayofsun.com:
   Warm Cream page, Warm Beige rail, Coral actions, Sunshine Yellow accents,
   Noto Serif headings, Lato body.
   ========================================================================== */

:root {
  --ink:        #3F4542;
  --ink-2:      #4E5451;
  --ink-3:      #6E6862;
  --ink-4:      #8C867F;

  --paper:      #FFF9F2;
  --card:       #ffffff;
  --rail:       #EDE3D7;
  --rail-2:     #E2D5C6;
  --rail-ink:   #3F4542;

  --line:       rgba(63,69,66,.12);
  --line-2:     rgba(63,69,66,.08);

  --accent:     #B25846;
  --accent-ink: #9E4C3B;
  --navy:       #B25846;

  --in:         #B25846;
  --out:        #F4C65D;
  --profit:     #7E9275;
  --pending:    #cfc6bb;

  --ok:         #4F6648;
  --ok-bg:      #E6EDE1;
  --warn:       #7A5600;
  --warn-bg:    #FCF0CF;
  --bad:        #9E3B2B;
  --bad-bg:     #F8E3DD;
  --neutral-bg: #EDE3D7;

  --radius:     12px;
  --shadow:     0 1px 2px rgba(63,69,66,.04), 0 8px 24px -14px rgba(63,69,66,.18);

  --sans: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --disp: 'Noto Serif', Georgia, 'Times New Roman', serif;
}

body { font-family: var(--sans); color: var(--ink-2); background: var(--paper); }

/* Headings in the serif; figures keep tabular numerals. */
h1, h2, h3, .topbar h1, h3.sec { font-family: var(--disp); color: var(--ink); font-weight: 600; }
.stat .v, .pubbar .amt, .money-lg, .totbox .due b { font-family: var(--disp); font-weight: 600; color: var(--ink); }
.num, td.num, th.num, input.num, .tbl td.num, .kv dd, .delta, .ch-ax, .ch-val { font-family: var(--sans); font-weight: 700; }
.tbl tfoot td { font-family: var(--sans); }
.ch-ax, .ch-val { font-family: 'Lato', sans-serif; }

/* ---------- rail ---------- */

.rail { border-right: 1px solid var(--line); }
.rail-mark { color: var(--ink); }
.rail-mark svg { color: #E0A93A; }
.rail-mark b {
  font: 600 16px/1.25 var(--disp); letter-spacing: 0; text-transform: none; color: var(--ink);
}
.rail-group { color: var(--ink-3); font-weight: 700; }
.rail a.nav { color: var(--ink); border-radius: 999px; }
.rail a.nav svg { opacity: .8; }
.rail a.nav:hover { background: rgba(255,255,255,.6); color: var(--ink); }
.rail a.nav.on { background: var(--accent); color: #fff; box-shadow: none; }
.rail a.nav.on svg { color: #fff; }
.rail a.nav .tag { background: var(--rail-2); color: var(--ink); }
.rail a.nav.on .tag { background: rgba(255,255,255,.25); color: #fff; }
.rail a.nav .tag.hot { background: var(--accent); color: #fff; }
.rail-foot { border-top: 1px solid var(--line); }
.rail-foot a { color: var(--ink-2); }
.rail-foot a:hover { color: var(--accent); }
.rail-foot .v { font-family: var(--sans); color: var(--ink-3); }
.rail-top { border-bottom: 3px solid #F4C65D; margin: 0 18px; padding: 20px 0 14px; }

@media (max-width: 900px) {
  .rail { border-right: 0; border-bottom: 1px solid var(--line); }
  .rail-top { border-bottom: 0; margin: 0; padding: 12px 16px; }
  .rail-mark b { font-size: 14px; white-space: nowrap; }
}

/* ---------- top bar, cards ---------- */

.topbar { background: rgba(255,249,242,.92); border-bottom: 1px solid var(--line); }
.topbar::after { content: none; }
.card, .stat, .pubbar, .pubframe { border: 1px solid var(--line); border-radius: 12px; }
.card > h2, .card-h { color: var(--ink); font-family: var(--sans); font-weight: 700; border-bottom: 1px solid var(--line); }
.card-h { box-shadow: inset 0 -1px 0 transparent; }
.stat.lead, .stat.lead-out, .stat.lead-profit, .stat.lead-bad { box-shadow: var(--shadow); }
.stat.lead { border-top: 3px solid var(--accent); }
.stat.lead-out { border-top: 3px solid #F4C65D; }
.stat.lead-profit { border-top: 3px solid #A8B7A0; }
.stat.lead-bad { border-top: 3px solid var(--bad); }
a.stat:hover { border-color: rgba(63,69,66,.3); }

/* ---------- forms ---------- */

label, .lab { color: var(--ink-3); font-weight: 700; }
input[type=text], input[type=password], input[type=date], input[type=number],
input[type=url], input[type=email], input:not([type]), select, textarea {
  border: 1px solid rgba(63,69,66,.22); border-radius: 10px; background: #fff; color: var(--ink);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid #F4C65D; outline-offset: 0; border-color: var(--accent);
}
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%236E6862' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---------- buttons ---------- */

.btn { border-radius: 999px; border-color: rgba(63,69,66,.25); color: var(--ink); background: #fff; }
.btn:hover { border-color: var(--accent); color: var(--accent-ink); }
.btn-primary, .btn-dark { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover, .btn-dark:hover { background: var(--accent-ink); border-color: var(--accent-ink); color: #fff; }
.btn-sm { border-radius: 999px; }
.btn-danger { color: var(--bad); border-color: rgba(158,59,43,.4); }
.btn-danger:hover { background: var(--bad-bg); border-color: var(--bad); color: var(--bad); }
.actions { background: rgba(255,249,242,.95); border-top: 1px solid var(--line); }

/* ---------- pills, chips ---------- */

.pill { border-radius: 999px; font-family: var(--sans); font-weight: 700; }
.pill.paid, .pill.live { background: #E6EDE1; color: #3F5A38; }
.pill.partial, .pill.test { background: #FCF0CF; color: #7A5600; }
.pill.overdue { background: var(--bad-bg); color: var(--bad); }
.pill.unpaid  { background: #F6E4DE; color: #8F4535; }
.pill.draft   { background: var(--neutral-bg); color: var(--ink-3); }
.chip { border-radius: 999px; background: #fff; color: var(--ink-2); border-color: var(--line); }
.chip:hover { border-color: var(--accent); color: var(--accent-ink); }
.chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---------- tables ---------- */

.tbl th { background: #FBF4EA; color: var(--ink-3); font-weight: 700; border-bottom: 1px solid var(--line); }
.tbl td { border-bottom: 1px solid var(--line-2); }
.tbl tbody tr:hover { background: #FFFBF6; }
.tbl tfoot td { background: #FBF4EA; border-top: 1px solid var(--line); }
.tbl a.lnk { color: var(--ink); }
.tbl a.lnk:hover { color: var(--accent); }
.tbl-rail tr.s-partial td:first-child { box-shadow: inset 3px 0 0 #F4C65D; }
.tbl-rail tr.s-paid td:first-child { box-shadow: inset 3px 0 0 #A8B7A0; }
.tbl-rail tr.s-unpaid td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.tbl-rail tr.s-draft td:first-child { box-shadow: inset 3px 0 0 #d8cfc4; }
.filters { background: #FBF4EA; border-bottom: 1px solid var(--line); }
th.sortable:hover { color: var(--accent); }
a { text-underline-offset: 2px; }
.crumb a:hover { color: var(--accent); }

/* ---------- totals, flash ---------- */

.totbox { border: 1px solid var(--line); border-radius: 12px; }
.totbox .r:nth-child(even) { background: #FFFBF6; }
.totbox .due { background: var(--accent); color: #fff; }
.totbox .due b { color: #fff; }
.totbox .bal { background: var(--bad-bg); color: var(--bad); }
.totbox .bal.settled { background: var(--ok-bg); color: var(--ok); }
.flash { border-radius: 12px; }
.flash.ok  { background: var(--ok-bg); border-color: #A8B7A0; color: var(--ok); }
.flash.err { border-color: rgba(158,59,43,.35); }
.check input { accent-color: var(--accent); }

/* ---------- charts ---------- */

.ch-track, .ch-meter-bar, .ch-meter-empty { background: #F3EBDF; }
.ch-tip { background: #3F4542; }
.ch-line-halo { stroke: #FFF9F2; }
.ch-dot { stroke: #FFF9F2; }

/* ---------- passphrase gate ---------- */

.gate { background: var(--paper); }
.gate form {
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow); width: 360px; max-width: 100%; padding: 32px 32px 30px;
  border-top: 4px solid #F4C65D;
}
.gate .gate-logo { display: block; width: 100%; max-width: 230px; height: auto; margin: 0 auto 22px; }
.gate .mark { justify-content: center; margin-bottom: 20px; }
.gate .mark svg { display: none; }
.gate .mark b { font: 600 17px/1.2 var(--disp); letter-spacing: 0; text-transform: none; color: var(--ink); text-align: center; }
.gate .btn { margin-top: 16px; }

/* ---------- family-facing invoice page ---------- */

body.theme-little-ray:not(.gate) .pubwrap { padding-top: 32px; }
.pubbar { background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow);
  border-top: 4px solid #F4C65D; }
.pubbar .lab { color: var(--ink-3); font-weight: 700; }
.pubframe { background: #fff; }
.pubfoot { color: #6E6862 !important; }
.pubfoot a { color: var(--accent); }
.pubfoot a:hover { color: var(--accent-ink); }

/* ---------- chart palette (colors are written inline by chart.php) ---------- */

[fill="#2a78d6"] { fill: #B25846; } [stroke="#2a78d6"] { stroke: #B25846; } [stop-color="#2a78d6"] { stop-color: #B25846; }
[fill="#eb6834"] { fill: #F4C65D; } [stroke="#eb6834"] { stroke: #E0A93A; } [stop-color="#eb6834"] { stop-color: #F4C65D; }
[fill="#1baf7a"] { fill: #7E9275; } [stroke="#1baf7a"] { stroke: #7E9275; } [stop-color="#1baf7a"] { stop-color: #7E9275; }
[fill="#aab1bd"] { fill: #D8CFC4; } [stroke="#aab1bd"] { stroke: #D8CFC4; }
[fill="#eda100"] { fill: #E0A93A; } [stroke="#eda100"] { stroke: #E0A93A; }
[style*="#2a78d6"] { background: #B25846 !important; }
[style*="#eb6834"] { background: #F4C65D !important; }
[style*="#1baf7a"] { background: #7E9275 !important; }
[style*="#aab1bd"] { background: #D8CFC4 !important; }
[style*="#eda100"] { background: #E0A93A !important; }
.pill.unpaid { background: #F6E4DE; }

/* selects: keep a single chevron */
select { background-repeat: no-repeat !important; background-position: right 10px center !important; background-size: 12px !important; }