/* ================================================================
   ATOM Money — Vanilla classes, verbatim port
   ================================================================
   Vanilla money.html embeds its CSS as an inline <style> block.
   This file ports the relevant rules under a `.atom-money-vanilla`
   wrapper class so they apply only inside the React Per Diem (and
   later, full Money) module without leaking to the rest of the
   React app. CSS variables resolve to React theme.css globals
   except the few we override below for visual parity with vanilla.
   Source: git show origin/main:money.html (lines as commented).
   Every selector below corresponds to a vanilla rule and is
   prefixed with `.atom-money-vanilla` for scope isolation.
   ================================================================ */

/* CSS variable overrides — match vanilla money.html lines 17-19.
   --radius-sm 10px (React default 8px), --radius 16px, --radius-xs 6px,
   plus the `--surface-hover` variant vanilla uses for period boxes. */
.atom-money-vanilla {
  --radius:        16px;
  --radius-sm:     10px;
  --radius-xs:     6px;
  --surface-hover: rgba(255,255,255,0.04);
  --green-dark:    #248A3D;
  --gold:          #D4A843;
}

/* money.html:107 .pill */
.atom-money-vanilla .pill { display: inline-flex; align-items: center; gap: 4px; padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 700 }
/* money.html:108 .pill.green / .pill.red / .pill.gold / .pill.blue */
.atom-money-vanilla .pill.green { background: var(--green-light); color: var(--green-dark) }
.atom-money-vanilla .pill.red   { background: var(--red-light); color: var(--red) }
.atom-money-vanilla .pill.gold  { background: var(--gold-light); color: var(--gold) }
.atom-money-vanilla .pill.blue  { background: var(--blue-light); color: var(--blue) }

/* money.html:92 .card */
.atom-money-vanilla .card {
  background: linear-gradient(135deg, rgba(26,32,72,0.95) 0%, rgba(26,32,72,0.8) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.15), 0 1px 2px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
}
/* money.html:93 .card-header / 94 .card-title */
.atom-money-vanilla .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; gap: 10px }
.atom-money-vanilla .card-title { font-size: 15px; font-weight: 700; color: var(--text); text-transform: none; letter-spacing: 0 }
/* money.html:125-132 .card[data-ckey] (collapsible) */
.atom-money-vanilla .card[data-ckey] > .card-header {
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  background: linear-gradient(135deg, rgba(20,130,255,0.06) 0%, rgba(255,53,211,0.04) 100%);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 999px;
  padding: 14px 24px;
  margin: -4px -4px 16px -4px;
  transition: background 0.2s, box-shadow 0.2s;
}
.atom-money-vanilla .card[data-ckey] > .card-header:hover {
  background: linear-gradient(135deg, rgba(20,130,255,0.10) 0%, rgba(255,53,211,0.06) 100%);
  box-shadow: 0 2px 12px rgba(20,130,255,0.08);
}
.atom-money-vanilla .card[data-ckey] > .card-header .card-arrow {
  transition: transform 0.25s ease; color: var(--text-muted); font-size: 14px;
  margin-left: auto; padding-left: 12px; flex-shrink: 0;
}
.atom-money-vanilla .card[data-ckey].collapsed > .card-header .card-arrow { transform: rotate(0deg) }
.atom-money-vanilla .card[data-ckey]:not(.collapsed) > .card-header .card-arrow { transform: rotate(90deg) }
.atom-money-vanilla .card[data-ckey].collapsed > *:not(.card-header) { display: none !important }
.atom-money-vanilla .card[data-ckey].collapsed {
  padding: 8px 12px; background: transparent; border-color: transparent;
  box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}
.atom-money-vanilla .card[data-ckey].collapsed > .card-header {
  margin-bottom: 0;
  background: linear-gradient(135deg, rgba(20,130,255,0.04) 0%, rgba(255,53,211,0.02) 100%);
}

/* money.html:167-176 .form-* / .btn-* */
.atom-money-vanilla .form-group { margin-bottom: 14px }
.atom-money-vanilla .form-label { display: block; font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px }
.atom-money-vanilla .form-input,
.atom-money-vanilla .form-select { width: 100%; padding: 12px 14px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-xs); font-family: 'DM Sans', sans-serif; font-size: 16px; color: var(--text); -webkit-appearance: none }
.atom-money-vanilla .form-input:focus,
.atom-money-vanilla .form-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft) }
.atom-money-vanilla .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.atom-money-vanilla .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 14px 24px; border-radius: 999px; font-family: 'DM Sans', sans-serif; font-size: 16px; font-weight: 700; border: none; cursor: pointer; width: 100%; -webkit-tap-highlight-color: transparent; touch-action: manipulation }
.atom-money-vanilla .btn:active { opacity: 0.7 }
.atom-money-vanilla .btn-primary { background: var(--accent); color: white }
.atom-money-vanilla .btn-secondary { background: var(--bg); color: var(--text); border: 1px solid var(--border) }
.atom-money-vanilla .btn-danger { background: var(--red-light); color: var(--red) }
.atom-money-vanilla .btn-green { background: var(--green); color: white }

/* Light theme overrides — money.html:33-34 + 22-30 carryovers */
[data-theme="light"] .atom-money-vanilla .card { background: var(--card); border-color: var(--border); box-shadow: 0 1px 4px rgba(0,0,0,0.04) }
[data-theme="light"] .atom-money-vanilla .form-input,
[data-theme="light"] .atom-money-vanilla .form-select { background: var(--bg); border-color: var(--border) }
[data-theme="light"] .atom-money-vanilla .card[data-ckey] > .card-header { background: linear-gradient(135deg, rgba(17,104,212,0.05) 0%, rgba(196,33,158,0.03) 100%); border-color: var(--border) }
[data-theme="light"] .atom-money-vanilla .card[data-ckey].collapsed { background: transparent; border-color: transparent; box-shadow: none }

/* money.html:299-302 .help-tip-btn / .help-tip-box */
.atom-money-vanilla .help-tip-btn { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--surface-hover); border: 1px solid var(--border); color: var(--text-muted); font-size: 11px; font-weight: 700; cursor: pointer; font-family: 'DM Sans', sans-serif; margin-left: 6px; flex-shrink: 0; transition: all 0.2s }
.atom-money-vanilla .help-tip-btn:hover,
.atom-money-vanilla .help-tip-btn.active { background: var(--accent); color: white; border-color: var(--accent) }
.atom-money-vanilla .help-tip-box { display: none; font-size: 12px; line-height: 1.5; color: var(--text-secondary); padding: 10px 14px; background: var(--accent-light); border-radius: var(--radius-xs); margin: 8px 0 4px; border-left: 3px solid var(--accent) }
.atom-money-vanilla .help-tip-box.show { display: block }

/* Scoped fallback for the 'pd-crew-check' class used by calcPdRequest's
   crew checklist (money-tab side). Vanilla uses inline accent-color so
   no rule needed; left here as a marker. */