/* ROUNDS Myyntikeskus */
:root { --fg:#1a1d21; --muted:#68707a; --accent:#2b6cb0; --border:#d9dee3; --card:#f7f9fa; --danger:#b23; --ok:#1d7a3d; }
* { box-sizing: border-box; }
body { font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--fg); margin: 0; background: #fff; }
main { max-width: 1100px; margin: 0 auto; padding: 16px; padding-bottom: 80px; }
h1 { font-size: 1.5rem; margin: .6em 0 .3em; } h2 { font-size: 1.15rem; margin: 1.2em 0 .4em; } h3 { font-size: 1rem; margin: 1em 0 .3em; }
.muted { color: var(--muted); font-weight: normal; }
a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; }

nav { display: flex; gap: 4px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: #fff; z-index: 5; flex-wrap: wrap; }
nav a { padding: 6px 10px; border-radius: 6px; color: var(--fg); }
nav a.active, nav a:hover { background: var(--card); text-decoration: none; }
nav .spacer { flex: 1; }

.stats { display: flex; gap: 12px; flex-wrap: wrap; margin: 12px 0; }
.stat { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 10px 18px; text-align: center; min-width: 120px; }
.stat b { display: block; font-size: 1.6rem; }
.stat span { color: var(--muted); font-size: .85rem; }

.tbl { width: 100%; border-collapse: collapse; margin: 8px 0; }
.tbl th { text-align: left; font-size: .85rem; color: var(--muted); border-bottom: 2px solid var(--border); padding: 6px 8px; }
.tbl td { border-bottom: 1px solid var(--border); padding: 7px 8px; vertical-align: top; }
tr.late td { background: #fdf0f0; }
td.notes { max-width: 480px; }

.btn { display: inline-block; background: var(--accent); border: none; color: #fff; padding: 8px 14px; border-radius: 8px; font-size: 1rem; cursor: pointer; text-decoration: none; }
.btn:hover { filter: brightness(1.1); text-decoration: none; }
.btn.big { font-size: 1.15rem; padding: 12px 22px; margin: 10px 0; }
.btn.ghost { background: transparent; color: var(--accent); border: 1px solid var(--border); }

.card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 12px 16px; margin: 10px 0; }
.card.lead { display: block; }
.leadhead { display: flex; gap: 10px; justify-content: space-between; flex-wrap: wrap; }
.contact { font-size: .95rem; }
.ok { background: #e8f6ec; border: 1px solid #bfe3c8; color: var(--ok); padding: 8px 12px; border-radius: 8px; margin: 10px 0; }
.warn { background: #fdf0f0; border: 1px solid #efc7c7; color: var(--danger); padding: 8px 12px; border-radius: 8px; margin: 10px 0; }

form label { display: block; margin: 8px 0; font-size: .9rem; }
input, select, textarea { font: inherit; padding: 8px; border: 1px solid var(--border); border-radius: 8px; width: 100%; max-width: 420px; }
textarea { max-width: 640px; }
.inline-form { display: flex; gap: 8px; align-items: end; flex-wrap: wrap; margin: 10px 0; }
.inline-form input, .inline-form select { width: auto; min-width: 140px; }

/* Soittoruutu */
.callhead h1 { margin-bottom: 0; }
.dispo { margin: 14px 0; }
.dispo textarea { width: 100%; }
.btns { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-top: 10px; }
.dispo-btn { padding: 18px 10px; font-size: 1.05rem; border-radius: 12px; border: 2px solid var(--border); background: #fff; cursor: pointer; font-weight: 600; }
.dispo-btn:hover { border-color: var(--accent); background: var(--card); }
.dispo-btn.interested { border-color: #1d7a3d; color: #1d7a3d; }
.dispo-btn.not_interested, .dispo-btn.dnc { border-color: #b23; color: #b23; }
.dispo-btn.callback { border-color: #b8860b; color: #8a6508; }

/* Kirjautuminen */
.loginbody { display: flex; min-height: 100vh; align-items: center; justify-content: center; background: var(--card); }
.login { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 28px 32px; width: min(420px, 92vw); }
.login h1 { font-size: 1.3rem; }

@media (max-width: 640px) {
  main { padding: 10px; }
  .tbl { font-size: .88rem; display: block; overflow-x: auto; }
  .btns { grid-template-columns: 1fr 1fr; }
}