/* Pieni täydennys Tailwindin päälle */
html { scroll-behavior: smooth; }

/* Napit näyttävät klikattavilta (selaimen oletus <button>:lle on nuoli, ei käsi) */
button:not(:disabled), [role="button"]:not(:disabled), label[for], summary {
  cursor: pointer;
}
button:disabled { cursor: not-allowed; }

.nav-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #475569;
  white-space: nowrap;
}
.nav-tab:hover { background: #e4e9f0; color: #0f172a; }
.nav-tab.active { background: #0f172a; color: white; }
/* Työpöytänavi: napit koko otsikkopalkin korkuisia → koko alue klikattava
   (ennen napit olivat 37px keskitettynä 64px palkkiin → ylä-/alareunaan jäi
   ~13px "kuollut" alue joka ei reagoinut). Mobiilinavi (#mainNavMobile) ennallaan. */
#mainNav .nav-tab { height: 4rem; }

.card { background:white; border:1px solid #e4e9f0; border-radius:0.75rem; padding:1rem; }
.btn { display:inline-flex; align-items:center; gap:0.5rem; padding:0.5rem 0.875rem; border-radius:0.5rem; font-size:0.875rem; font-weight:500; transition:background 0.15s; }
.btn-primary { background:#0f172a; color:white; }
.btn-primary:hover { background:#1e293b; }
.btn-secondary { background:#e4e9f0; color:#0f172a; }
.btn-secondary:hover { background:#cbd5e1; }
.btn-danger { background:#dc2626; color:white; }
.btn-danger:hover { background:#b91c1c; }
.btn-success { background:#16a34a; color:white; }
.btn-success:hover { background:#15803d; }
.input, .select, .textarea {
  width:100%;
  padding:0.5rem 0.75rem;
  border:1px solid #e4e9f0;
  border-radius:0.5rem;
  background:white;
  font-size:0.875rem;
}
.input:focus, .select:focus, .textarea:focus { outline:none; box-shadow: 0 0 0 2px #475569; }
.label { display:block; font-size:0.875rem; font-weight:500; margin-bottom:0.25rem; }

.pill { display:inline-flex; align-items:center; padding:0.125rem 0.5rem; border-radius:9999px; font-size:0.75rem; font-weight:500; }
.pill-estecha { background:#fef3c7; color:#92400e; }
.pill-masmaya { background:#ccfbf1; color:#0f766e; }
.pill-gray { background:#e4e9f0; color:#1e293b; }
.pill-green { background:#dcfce7; color:#166534; }
.pill-red { background:#fee2e2; color:#991b1b; }
.pill-blue { background:#dbeafe; color:#1e40af; }
.pill-amber { background:#fef3c7; color:#92400e; }
.pill-purple { background:#ede9fe; color:#6b21a8; }

table.data { width:100%; border-collapse:collapse; }
table.data th { text-align:left; font-size:0.75rem; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; color:#475569; padding:0.5rem 0.75rem; border-bottom:1px solid #e4e9f0; background:#f8fafc; }
table.data td { padding:0.625rem 0.75rem; border-bottom:1px solid #f1f5f9; font-size:0.875rem; }
table.data tr:hover td { background:#f8fafc; }

.spin { animation: spin 1s linear infinite; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Ohje-tila: korostaa kaikki ⓘ-ikonit kerralla */
.help-i { transition: transform .12s ease, background .12s ease; }
.help-mode .help-i { background:#fde68a !important; color:#92400e !important; box-shadow:0 0 0 2px #f59e0b; transform:scale(1.3); }