/*
 * assets/bio.css – Biorhythm Calculator ID
 * --------------------------------------------------------------
 * Styling modern, responsif, dengan dark-mode, aksesibilitas,
 * print-friendly, dan override agar hasil jelas terbaca.
 */

/* --- Theme tokens ------------------------------------------------------- */
:root {
  --bg: #ffffff;
  --card: #ffffff;
  --text: #111827;
  --muted: #6b7280;
  --border: #e5e7eb;
  --shadow: 0 6px 24px rgba(0,0,0,.06);

  --primary: #111827;
  --primary-hover: #374151;

  --badge-high-bg:#dcfce7;  --badge-high-fg:#166534;
  --badge-low-bg:#fee2e2;   --badge-low-fg:#991b1b;
  --badge-mid-bg:#e5e7eb;   --badge-mid-fg:#111827;

  --field-bg: #dbeafe;   /* biru light */
  --field-text: #111827;
}

@media (prefers-color-scheme: dark){
  :root {
    --bg: #0b0f19;
    --card: #0f172a;
    --text: #e5e7eb;
    --muted:#9ca3af;
    --border:#1f2937;
    --shadow: 0 6px 24px rgba(0,0,0,.45);

    --primary:#e5e7eb;
    --primary-hover:#f3f4f6;

    --badge-high-bg:#064e3b; --badge-high-fg:#86efac;
    --badge-low-bg:#7f1d1d;  --badge-low-fg:#fecaca;
    --badge-mid-bg:#334155;  --badge-mid-fg:#e5e7eb;

    --field-bg:#1e3a8a;   /* biru navy */
    --field-text:#f1f5f9;
  }
}

/* --- Container ---------------------------------------------------------- */
.bio-wrap {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  box-shadow: var(--shadow);
}

/* --- Form --------------------------------------------------------------- */
.bio-form {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(180px,1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.bio-field label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
}

.bio-field input {
  width: 100%;
  padding: 10px 12px;
  background: var(--field-bg) !important;
  color: var(--field-text) !important;
  border: 1px solid var(--border);
  border-radius: 10px;
  outline: none;
  font-weight: 700;
  transition: box-shadow .15s ease, border-color .15s ease;
}

.bio-field input:focus {
  border-color:#60a5fa;
  box-shadow:0 0 0 3px rgba(96,165,250,.35);
}

.bio-btn {
  align-self:end;
  background: var(--primary);
  color:#fff;
  border:none;
  padding:12px 16px;
  border-radius:12px;
  cursor:pointer;
  font-weight:600;
  transition: background .15s ease, transform .06s ease;
}

.bio-btn:hover{ background: var(--primary-hover); }
.bio-btn:active{ transform: translateY(1px); }
.bio-btn[disabled]{ opacity:.6; cursor:not-allowed; }
.bio-btn[data-loading="1"]{ position:relative; }
.bio-btn[data-loading="1"]::after{
  content:"";
  position:absolute; inset:10px;
  border-radius:10px;
  border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;
  animation: bio-spin .75s linear infinite;
}

@keyframes bio-spin{ to{ transform: rotate(1turn); } }

/* --- Chart area --------------------------------------------------------- */
.bio-canvas-wrap { height: 420px !important; min-height: 300px !important; }
.bio-canvas-wrap canvas { display:block !important; width:100% !important; height:100% !important; }

/* --- Summary table ------------------------------------------------------ */
.bio-summary { margin-top: 6px; text-align:left !important; }

.bio-summary h3 {
  margin:.5rem 0;
  font-size:1.1rem;
  font-weight:800;
  color:#000;
  text-align:left;
}

.bio-summary .bio-greeting {
  margin:.5rem 0;
  font-size:1rem;
  font-weight:600;
  text-align:left;
  color: var(--text);
}

.bio-table { width:100%; border-collapse: collapse; }
.bio-table th, .bio-table td {
  border-bottom:1px solid var(--border);
  padding:10px 8px;
  text-align:left !important;
  background: var(--field-bg) !important;
  color:#000 !important;
  font-weight:800 !important;
}
.bio-table thead th {
  font-size:.9rem;
  color: var(--muted);
  font-weight:600;
  background:none !important;
}
.bio-table tbody tr:hover { background: rgba(148,163,184,.15); }

/* --- Badges ------------------------------------------------------------- */
.badge {
  display:inline-block;
  padding:2px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
}
.badge.high{ background: var(--badge-high-bg); color: var(--badge-high-fg); }
.badge.low{  background: var(--badge-low-bg);  color: var(--badge-low-fg); }
.badge.mid{  background: var(--badge-mid-bg);  color: var(--badge-mid-fg); }

/* --- Critical notes ----------------------------------------------------- */
.bio-critical {
  margin-top:.5rem;
  color: var(--muted);
  font-size:.92rem;
  text-align:left !important;
}
.bio-critical em {
  color: var(--text);
  font-style: normal;
  font-weight:600;
}

/* --- A11y helpers ------------------------------------------------------- */
.bio-wrap :focus-visible{ outline: 2px dashed #60a5fa; outline-offset: 3px; }

/* --- Reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}

/* --- Print styles ------------------------------------------------------- */
@media print{
  :root{ --bg:#fff; --card:#fff; --text:#000; --border:#ddd; }
  .bio-wrap{ box-shadow:none; border-color:#ccc; }
  .bio-btn{ display:none; }
  .bio-canvas-wrap{ height:300px !important; }
}