/* ComputePH — custom styles layered on top of Tailwind (CDN).
   Tailwind handles utilities; this file defines reusable component classes
   and the few things Tailwind's CDN build can't express (keyframes, print). */

:root {
  color-scheme: light dark;
}

html {
  scroll-padding-top: 4.5rem; /* offset for sticky header when jumping to anchors */
}

body {
  min-height: 100vh;
}

/* ---------- Accessibility ---------- */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 100;
  background: #4f46e5;
  color: #fff;
  padding: 0.75rem 1rem;
  border-radius: 0 0 0.5rem 0;
  font-weight: 600;
}
.skip-link:focus {
  left: 0;
}

:focus-visible {
  outline: 3px solid #6366f1;
  outline-offset: 2px;
}

/* ---------- Navigation ---------- */
.nav-link {
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  color: inherit;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.nav-link:hover,
.nav-link:focus-visible {
  background-color: #e0e7ff;
  color: #3730a3;
}
.dark .nav-link:hover,
.dark .nav-link:focus-visible {
  background-color: #312e81;
  color: #c7d2fe;
}

/* ---------- Buttons ---------- */
.btn-primary,
.btn-outline,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.65rem 1.25rem;
  border-radius: 0.65rem;
  transition: transform 0.1s ease, background-color 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
  white-space: nowrap;
}
.btn-primary {
  background-color: #4f46e5;
  color: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
}
.btn-primary:hover { background-color: #4338ca; }
.btn-primary:active { transform: translateY(1px); }

.btn-outline {
  background: transparent;
  border: 1.5px solid rgb(148 163 184 / 0.6);
  color: inherit;
}
.btn-outline:hover { background-color: rgb(99 102 241 / 0.08); }

.btn-ghost {
  background: #e0e7ff;
  color: #3730a3;
}
.dark .btn-ghost { color: #c7d2fe; background: #312e81; }
.btn-ghost:hover { background: #c7d2fe; }
.dark .btn-ghost:hover { background: #3730a3; }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 0.6rem;
  color: inherit;
  transition: background-color 0.15s ease;
}
.icon-btn:hover { background-color: rgb(99 102 241 / 0.1); }

/* ---------- Form fields ---------- */
.field { display: flex; flex-direction: column; gap: 0.35rem; }
.field label { font-size: 0.85rem; font-weight: 600; color: rgb(71 85 105); }
.dark .field label { color: rgb(203 213 225); }

.input-field,
.select-field {
  width: 100%;
  border-radius: 0.6rem;
  border: 1.5px solid rgb(203 213 225);
  background-color: #fff;
  padding: 0.6rem 0.85rem;
  font-size: 0.95rem;
  color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.dark .input-field,
.dark .select-field {
  background-color: rgb(30 41 59);
  border-color: rgb(71 85 105);
}
.input-field:focus,
.select-field:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgb(99 102 241 / 0.25);
  outline: none;
}

/* ---------- Cards ---------- */
.tool-card {
  background-color: #fff;
  border: 1px solid rgb(226 232 240);
  border-radius: 1rem;
  padding: 1.75rem;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.06), 0 1px 2px rgb(0 0 0 / 0.04);
  scroll-margin-top: 4.5rem;
}
.dark .tool-card {
  background-color: rgb(15 23 42 / 0.6);
  border-color: rgb(51 65 85);
}
.tool-card-header { margin-bottom: 1.25rem; }
.tool-title { font-size: 1.5rem; font-weight: 800; }
.tool-subtitle { margin-top: 0.25rem; color: rgb(100 116 139); }
.dark .tool-subtitle { color: rgb(148 163 184); }

/* ---------- Results ---------- */
.results-panel {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px dashed rgb(203 213 225);
}
.dark .results-panel { border-color: rgb(71 85 105); }
.results-panel.hidden { display: none; }

.result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.9rem;
}
.result-item {
  background-color: rgb(248 250 252);
  border-radius: 0.75rem;
  padding: 0.9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.dark .result-item { background-color: rgb(30 41 59); }
.result-item span { font-size: 0.8rem; color: rgb(100 116 139); font-weight: 600; }
.dark .result-item span { color: rgb(148 163 184); }
.result-item strong { font-size: 1.25rem; font-weight: 800; }
.result-item.highlight {
  background: linear-gradient(135deg, rgb(79 70 229 / 0.12), rgb(99 102 241 / 0.05));
  border: 1px solid rgb(99 102 241 / 0.25);
}
.result-actions { margin-top: 1.1rem; display: flex; flex-wrap: wrap; gap: 0.6rem; }

/* ---------- Data table (loan breakdown) ---------- */
.data-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; min-width: 480px; }
.data-table th,
.data-table td { padding: 0.55rem 0.75rem; text-align: right; border-bottom: 1px solid rgb(226 232 240); }
.dark .data-table th,
.dark .data-table td { border-color: rgb(51 65 85); }
.data-table th:first-child,
.data-table td:first-child { text-align: left; }
.data-table thead th { font-weight: 700; color: rgb(71 85 105); background: rgb(248 250 252); }
.dark .data-table thead th { color: rgb(203 213 225); background: rgb(30 41 59); }

/* ---------- History ---------- */
.history-block { margin-top: 1.5rem; font-size: 0.9rem; }
.history-block summary {
  cursor: pointer;
  font-weight: 600;
  color: #4f46e5;
  padding: 0.35rem 0;
}
.dark .history-block summary { color: #a5b4fc; }
.history-list { margin-top: 0.6rem; display: flex; flex-direction: column; gap: 0.4rem; }
.history-list li {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  background: rgb(248 250 252);
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
}
.dark .history-list li { background: rgb(30 41 59); }
.history-list li.empty { color: rgb(148 163 184); justify-content: flex-start; }
.history-list button { color: #ef4444; font-weight: 600; background: none; }
.history-list .history-restore { color: #4f46e5; font-weight: 600; background: none; cursor: pointer; }
.dark .history-list .history-restore { color: #a5b4fc; }

/* ---------- Affiliate box ---------- */
.affiliate-box {
  margin-top: 1.5rem;
  border-radius: 0.85rem;
  border: 1px dashed rgb(234 179 8 / 0.5);
  background: rgb(254 252 232);
  padding: 1rem 1.25rem;
}
.dark .affiliate-box { background: rgb(66 60 20 / 0.35); border-color: rgb(234 179 8 / 0.3); }
.affiliate-box h3 { font-weight: 700; font-size: 0.95rem; }
.affiliate-box p { font-size: 0.85rem; color: rgb(100 116 139); margin-top: 0.15rem; }
.dark .affiliate-box p { color: rgb(203 213 225); }
.affiliate-box ul { margin-top: 0.6rem; display: flex; flex-direction: column; gap: 0.35rem; }
.affiliate-box a {
  font-size: 0.9rem;
  font-weight: 600;
  color: #92400e;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.dark .affiliate-box a { color: rgb(253 224 71); }

/* ---------- Ad slots ---------- */
.ad-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100px;
  border: 2px dashed rgb(148 163 184 / 0.5);
  border-radius: 0.75rem;
  color: rgb(71 85 105);
  font-size: 0.85rem;
  text-align: center;
  background: rgb(248 250 252);
}
.dark .ad-slot { background: rgb(15 23 42); color: rgb(148 163 184); }

/* ---------- FAQ ---------- */
.faq-item {
  border: 1px solid rgb(226 232 240);
  border-radius: 0.65rem;
  padding: 0.85rem 1rem;
}
.dark .faq-item { border-color: rgb(51 65 85); }
.faq-item summary { cursor: pointer; font-weight: 600; }
.faq-item p { margin-top: 0.5rem; color: rgb(100 116 139); font-size: 0.9rem; }
.dark .faq-item p { color: rgb(148 163 184); }

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translate(-50%, 120%);
  background: #0f172a;
  color: #fff;
  padding: 0.65rem 1.1rem;
  border-radius: 0.6rem;
  font-size: 0.9rem;
  font-weight: 600;
  box-shadow: 0 8px 20px rgb(0 0 0 / 0.25);
  transition: transform 0.25s ease;
  z-index: 60;
  max-width: 90vw;
}
.toast.show { transform: translate(-50%, 0); }

/* ---------- Install banner ---------- */
.install-banner {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  left: 1rem;
  max-width: 26rem;
  margin-inline: auto;
  background: #fff;
  border: 1px solid rgb(226 232 240);
  border-radius: 0.85rem;
  box-shadow: 0 10px 25px rgb(0 0 0 / 0.15);
  padding: 1rem 1.1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  z-index: 50;
}
.dark .install-banner { background: rgb(30 41 59); border-color: rgb(51 65 85); }
.install-banner.hidden { display: none; }
.install-banner p { font-size: 0.9rem; font-weight: 500; }

/* ---------- Misc ---------- */
@media print {
  header, footer, .ad-slot, .affiliate-box, #newsletter, .install-banner, .toast { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
}