/* Pearson Budget — Minimal custom styles (Tailwind handles most styling) */

/* Hide Vue templates until mounted */
[v-cloak] { display: none !important; }

/* Privacy blur for sensitive financial values */
.sv { transition: filter 0.2s ease; }
html.privacy .sv {
  filter: blur(10px) !important;
  -webkit-filter: blur(10px) !important;
  user-select: none;
  pointer-events: none;
  display: inline-block;
}
html.privacy .sv-block {
  filter: blur(12px) !important;
  -webkit-filter: blur(12px) !important;
  user-select: none;
  pointer-events: none;
}

/* Calendar 7-column grid */
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.cal-cell {
  min-height: 80px;
}
.cal-hover:hover {
  background-color: rgba(99, 102, 241, 0.06);
}
.cal-outside {
  opacity: 0.35;
}
.cal-today {
  background-color: rgba(99, 102, 241, 0.06);
}

/* Dark mode calendar */
html.dark .cal-hover:hover {
  background-color: rgba(129, 140, 248, 0.1) !important;
}
html.dark .cal-today {
  background-color: rgba(129, 140, 248, 0.1) !important;
}

/* Smooth meter bar transition */
.meter-bar {
  transition: width 0.6s ease;
}

/* Form input base styles (used via class="form-input") */
.form-input {
  width: 100%;
  border-radius: 0.5rem;
  border: 1px solid #e5e7eb;
  background-color: #f9fafb;
  padding: 0.625rem 0.875rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #111827;
  outline: none;
  text-transform: capitalize;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.form-input::placeholder {
  color: #9ca3af;
}

.form-input:focus {
  border-color: #6366f1;
  background-color: #fff;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

/* Compact form input for inline editing */
.form-input-sm {
  width: 100%;
  border-radius: 0.375rem;
  border: 1px solid #e5e7eb;
  background-color: #fff;
  padding: 0.375rem 0.625rem;
  font-size: 0.8125rem;
  line-height: 1.25rem;
  color: #111827;
  outline: none;
  text-transform: capitalize;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-input-sm:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.12);
}

/* Select dropdown arrow styling */
select.form-input,
select.form-input-sm {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 2.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.625rem center;
  background-size: 1rem;
}

/* Remove number input spinners for cleaner look */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* ═══════ Searchable Select Component ═══════ */
.ss-root { position: relative; }
.ss-trigger {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  text-align: left;
}
.ss-trigger--open { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12); }
.ss-icon { font-size: 1rem; color: #9ca3af; flex-shrink: 0; }
.ss-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-placeholder { flex: 1; color: #9ca3af; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-arrow { font-size: 1.1rem; color: #9ca3af; flex-shrink: 0; transition: transform 0.15s ease; }
.ss-arrow--open { transform: rotate(180deg); }
.ss-dropdown {
  position: absolute; z-index: 50; top: calc(100% + 4px); left: 0; right: 0;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 0.5rem;
  box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1), 0 4px 10px -5px rgba(0,0,0,0.04);
  overflow: hidden;
}
.ss-search-wrap {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.75rem; border-bottom: 1px solid #e5e7eb;
}
.ss-search-icon { font-size: 0.875rem; color: #9ca3af; flex-shrink: 0; }
.ss-search {
  flex: 1; border: none; outline: none; font-size: 0.8125rem;
  background: transparent; color: #111827; padding: 0;
  text-transform: capitalize;
}
.ss-search::placeholder { color: #9ca3af; }
.ss-list { max-height: 180px; overflow-y: auto; padding: 0.25rem 0; }
.ss-option {
  padding: 0.5rem 0.75rem; font-size: 0.8125rem; cursor: pointer;
  color: #374151; transition: background-color 0.1s;
}
.ss-option:hover, .ss-option--hl { background-color: #f3f4f6; }
.ss-option--create { color: #6366f1; font-weight: 600; display: flex; align-items: center; gap: 0.35rem; }
.ss-option--create:hover, .ss-option--create.ss-option--hl { background-color: #eef2ff; }
.ss-empty { padding: 0.75rem; font-size: 0.8125rem; color: #9ca3af; text-align: center; font-style: italic; }

/* Animate the loading spinner */
@keyframes spin { to { transform: rotate(360deg); } }
.animate-spin { animation: spin 1.2s linear infinite; }


/* ═══════════════════════════════════════════════════════════
   Dark Mode — overrides Tailwind utilities under html.dark
   ═══════════════════════════════════════════════════════════ */

html.dark { color-scheme: dark; }

/* ── Surface backgrounds ── */
html.dark .bg-gray-50   { background-color: #0f172a !important; }
html.dark .bg-white     { background-color: #1e293b !important; }
html.dark .bg-white\/80 { background-color: rgba(30, 41, 59, 0.8) !important; }
html.dark .bg-gray-50\/50 { background-color: #162032 !important; }
html.dark .bg-gray-50\/80 { background-color: rgba(15, 23, 42, 0.8) !important; }
html.dark .bg-gray-100  { background-color: #283548 !important; }
html.dark .bg-gray-200  { background-color: #334155 !important; }

/* ── Text ── */
html.dark .text-gray-900 { color: #f1f5f9 !important; }
html.dark .text-gray-800 { color: #e2e8f0 !important; }
html.dark .text-gray-700 { color: #cbd5e1 !important; }
html.dark .text-gray-600 { color: #94a3b8 !important; }
html.dark .text-gray-500 { color: #94a3b8 !important; }
html.dark .text-gray-400 { color: #64748b !important; }
html.dark .text-gray-300 { color: #64748b !important; }

/* ── Borders ── */
html.dark .border-gray-200 { border-color: #334155 !important; }
html.dark .border-gray-100 { border-color: #1e293b !important; }
html.dark .divide-gray-100 > * + * { border-color: #1e293b !important; }

/* ── Hover states ── */
html.dark .hover\:bg-gray-50:hover    { background-color: #334155 !important; }
html.dark .hover\:bg-gray-50\/60:hover { background-color: rgba(51, 65, 85, 0.6) !important; }
html.dark .hover\:bg-gray-200:hover   { background-color: #3d4f65 !important; }
html.dark .hover\:text-gray-700:hover { color: #e2e8f0 !important; }

/* ═══════ Accent Colors — Backgrounds ═══════ */

/* ── 50 shades ── */
html.dark .bg-emerald-50  { background-color: #132e22 !important; }
html.dark .bg-amber-50    { background-color: #2a1c08 !important; }
html.dark .bg-sky-50      { background-color: #0b2235 !important; }
html.dark .bg-violet-50   { background-color: #1e1038 !important; }
html.dark .bg-rose-50     { background-color: #2d1019 !important; }
html.dark .bg-indigo-50   { background-color: #1a1848 !important; }
html.dark .bg-teal-50     { background-color: #0f2926 !important; }
html.dark .bg-cyan-50     { background-color: #0f3a4f !important; }
html.dark .bg-purple-50   { background-color: #1e1038 !important; }
html.dark .bg-orange-50   { background-color: #2a1808 !important; }

/* ── 50 with opacity modifiers ── */
html.dark .bg-emerald-50\/40 { background-color: #0a2415 !important; }
html.dark .bg-emerald-50\/50 { background-color: #0c2818 !important; }
html.dark .bg-amber-50\/40   { background-color: #221706 !important; }
html.dark .bg-amber-50\/50   { background-color: #261907 !important; }
html.dark .bg-sky-50\/40     { background-color: #091d2d !important; }
html.dark .bg-violet-50\/40  { background-color: #180e30 !important; }
html.dark .bg-rose-50\/30    { background-color: #220d14 !important; }
html.dark .bg-rose-50\/40    { background-color: #260e16 !important; }
html.dark .bg-rose-50\/50    { background-color: #2a0f18 !important; }
html.dark .bg-indigo-50\/40  { background-color: #15133b !important; }
html.dark .bg-teal-50\/40    { background-color: #0c221f !important; }
html.dark .bg-teal-50\/50    { background-color: #0e2622 !important; }
html.dark .bg-cyan-50\/40    { background-color: #09202e !important; }
html.dark .bg-purple-50\/40  { background-color: #180e30 !important; }
html.dark .bg-orange-50\/30  { background-color: #221406 !important; }

/* ── 100 shades ── */
html.dark .bg-emerald-100 { background-color: #1e4035 !important; }
html.dark .bg-amber-100   { background-color: #35220a !important; }
html.dark .bg-sky-100     { background-color: #0e2c42 !important; }
html.dark .bg-violet-100  { background-color: #261545 !important; }
html.dark .bg-rose-100    { background-color: #381420 !important; }
html.dark .bg-indigo-100  { background-color: #211e55 !important; }
html.dark .bg-teal-100    { background-color: #13332e !important; }
html.dark .bg-cyan-100    { background-color: #0e3245 !important; }
html.dark .bg-purple-100  { background-color: #261545 !important; }
html.dark .bg-orange-100  { background-color: #351e0a !important; }
html.dark .border-orange-100 { border-color: #4a2a0e !important; }

/* ═══════ Accent Colors — Text ═══════ */

/* ── 500 shades — keep vivid ── */
html.dark .text-amber-500   { color: #f59e0b !important; }
html.dark .text-emerald-500 { color: #10b981 !important; }
html.dark .text-rose-500    { color: #f43f5e !important; }

/* ── 600 shades → lighten to ~400 equivalent ── */
html.dark .text-emerald-600 { color: #34d399 !important; }
html.dark .text-amber-600   { color: #fbbf24 !important; }
html.dark .text-sky-600     { color: #38bdf8 !important; }
html.dark .text-violet-600  { color: #a78bfa !important; }
html.dark .text-rose-600    { color: #fb7185 !important; }
html.dark .text-indigo-600  { color: #818cf8 !important; }
html.dark .text-teal-600    { color: #2dd4bf !important; }
html.dark .text-cyan-600    { color: #22d3ee !important; }
html.dark .text-purple-600  { color: #c084fc !important; }
html.dark .text-orange-600  { color: #fb923c !important; }

/* ── 700 shades → lighten to ~300 equivalent ── */
html.dark .text-emerald-700 { color: #6ee7b7 !important; }
html.dark .text-amber-700   { color: #fcd34d !important; }
html.dark .text-sky-700     { color: #7dd3fc !important; }
html.dark .text-violet-700  { color: #c4b5fd !important; }
html.dark .text-rose-700    { color: #fda4af !important; }
html.dark .text-indigo-700  { color: #a5b4fc !important; }
html.dark .text-teal-700    { color: #5eead4 !important; }
html.dark .text-cyan-700    { color: #67e8f9 !important; }
html.dark .text-purple-700  { color: #d8b4fe !important; }
html.dark .text-orange-500  { color: #fb923c !important; }

/* ── 800 shades → lighten ── */
html.dark .text-emerald-800 { color: #6ee7b7 !important; }
html.dark .text-amber-800   { color: #fcd34d !important; }
html.dark .text-sky-800     { color: #7dd3fc !important; }

/* ── Misc accent text ── */
html.dark .text-indigo-100  { color: #c7d2fe !important; }
html.dark .text-amber-300   { color: #fcd34d !important; }

/* ═══════ Accent Colors — Borders ═══════ */

html.dark .border-emerald-200 { border-color: #1a5c38 !important; }
html.dark .border-emerald-300 { border-color: #22794a !important; }
html.dark .border-emerald-600 { border-color: #059669 !important; }
html.dark .border-amber-200   { border-color: #6b3a10 !important; }
html.dark .border-amber-300   { border-color: #854a14 !important; }
html.dark .border-amber-600   { border-color: #d97706 !important; }
html.dark .border-sky-200     { border-color: #0c5483 !important; }
html.dark .border-sky-600     { border-color: #0284c7 !important; }
html.dark .border-violet-200  { border-color: #4c2889 !important; }
html.dark .border-violet-600  { border-color: #7c3aed !important; }
html.dark .border-rose-200    { border-color: #882038 !important; }
html.dark .border-rose-300    { border-color: #a12a48 !important; }
html.dark .border-rose-600    { border-color: #e11d48 !important; }
html.dark .border-indigo-200  { border-color: #3730a3 !important; }
html.dark .border-indigo-600  { border-color: #4f46e5 !important; }
html.dark .border-teal-200    { border-color: #115e54 !important; }
html.dark .border-teal-600    { border-color: #0d9488 !important; }
html.dark .border-cyan-200    { border-color: #0e6e8a !important; }
html.dark .border-cyan-600    { border-color: #0891b2 !important; }
html.dark .border-purple-200  { border-color: #5b21b6 !important; }
html.dark .border-purple-600  { border-color: #9333ea !important; }

/* ═══════ Accent Hover States ═══════ */

html.dark .hover\:bg-rose-50:hover    { background-color: #33121c !important; }
html.dark .hover\:bg-emerald-50:hover { background-color: #10341f !important; }
html.dark .hover\:bg-sky-50:hover     { background-color: #10293d !important; }
html.dark .hover\:bg-violet-50:hover  { background-color: #23143f !important; }
html.dark .hover\:bg-amber-100:hover  { background-color: #3a260d !important; }
html.dark .hover\:bg-indigo-100:hover { background-color: #28235e !important; }
html.dark .hover\:bg-purple-50:hover  { background-color: #23143f !important; }
html.dark .hover\:bg-teal-50:hover    { background-color: #132f2b !important; }
html.dark .hover\:border-indigo-300:hover { border-color: rgba(129, 140, 248, 0.45) !important; }

/* ═══════ Gradients (Summary Cards) ═══════ */

html.dark .from-emerald-50 { --tw-gradient-from: #132e22 !important; --tw-gradient-to: rgba(19, 46, 34, 0) !important; }
html.dark .from-amber-50   { --tw-gradient-from: #2a1c08 !important; --tw-gradient-to: rgba(42, 28, 8, 0) !important; }
html.dark .from-violet-50  { --tw-gradient-from: #1e1038 !important; --tw-gradient-to: rgba(30, 16, 56, 0) !important; }
html.dark .from-rose-50    { --tw-gradient-from: #2d1019 !important; --tw-gradient-to: rgba(45, 16, 25, 0) !important; }
html.dark .from-cyan-50    { --tw-gradient-from: #0f3a4f !important; --tw-gradient-to: rgba(15, 58, 79, 0) !important; }
html.dark .to-white { --tw-gradient-to: #1a2d3f !important; }

/* Smart Debt Advisor gradient */
html.dark .from-indigo-600 { --tw-gradient-from: #312e81 !important; --tw-gradient-to: rgba(49, 46, 129, 0) !important; }
html.dark .to-purple-600   { --tw-gradient-to: #581c87 !important; }
/* Savings highlight gradient */
html.dark .to-teal-50 { --tw-gradient-to: #0f2926 !important; }

/* Ring */
html.dark .ring-emerald-200 { --tw-ring-color: #1a5c38 !important; }

/* ═══════ Calendar event chip text ═══════ */
html.dark .text-emerald-800 { color: #6ee7b7 !important; }
html.dark .text-sky-800     { color: #7dd3fc !important; }

/* ═══════ Emerald 500/15 & sky 500/15 pill backgrounds ═══════ */
html.dark .bg-emerald-500\/15 { background-color: #0c2818 !important; }
html.dark .bg-sky-500\/15     { background-color: #091d2d !important; }

/* ═══════ Form Inputs (Dark) ═══════ */

html.dark .form-input {
  background-color: #0f172a;
  border-color: #334155;
  color: #e2e8f0;
}
html.dark .form-input::placeholder { color: #475569; }
html.dark .form-input:focus {
  background-color: #1e293b;
  border-color: #818cf8;
  box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.15);
}

html.dark .form-input-sm {
  background-color: #1e293b;
  border-color: #334155;
  color: #e2e8f0;
}
html.dark .form-input-sm:focus {
  border-color: #818cf8;
  box-shadow: 0 0 0 2px rgba(129, 140, 248, 0.15);
}

/* Date / month / select pickers in dark mode */
html.dark input[type="date"],
html.dark input[type="month"],
html.dark select {
  color-scheme: dark;
}
html.dark select.form-input,
html.dark select.form-input-sm {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* ═══════ Searchable Select (Dark) ═══════ */

html.dark .ss-trigger--open { border-color: #818cf8; box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.15); }
html.dark .ss-icon { color: #64748b; }
html.dark .ss-placeholder { color: #475569; }
html.dark .ss-arrow { color: #64748b; }
html.dark .ss-dropdown {
  background: #1e293b; border-color: #334155;
  box-shadow: 0 10px 25px -5px rgba(0,0,0,0.4), 0 4px 10px -5px rgba(0,0,0,0.2);
}
html.dark .ss-search-wrap { border-bottom-color: #334155; }
html.dark .ss-search-icon { color: #64748b; }
html.dark .ss-search { color: #e2e8f0; }
html.dark .ss-search::placeholder { color: #475569; }
html.dark .ss-option { color: #cbd5e1; }
html.dark .ss-option:hover, html.dark .ss-option--hl { background-color: #334155; }
html.dark .ss-option--create { color: #818cf8; }
html.dark .ss-option--create:hover, html.dark .ss-option--create.ss-option--hl { background-color: rgba(99, 102, 241, 0.15); }
html.dark .ss-empty { color: #475569; }