/* bron.hops.ee – ühtne kujundus (hOpsiga sama joon) */
:root {
  --sinine: #1f3a5f;
  --sinine-hele: #e8eef6;
  --hall: #8a94a3;
  --hall-hele: #eef1f4;
  --piir: #dde3ea;
  --taust: #f5f7fa;
  --tekst: #1d2733;
  --roheline: #2e8b57;
  --punane: #c0392b;
  --oranz: #d9822b;
  --vahe: 14px;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  font-size: 14px;
  color: var(--tekst);
  background: var(--taust);
}
a { color: var(--sinine); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px; }

/* ---------- päis ---------- */
.top { background: #fff; border-bottom: 1px solid var(--piir); }
.top-sisu { display: flex; align-items: center; gap: 28px; height: 56px; }
.logo { display: flex; align-items: center; }
.logo img { display: block; height: 24px; width: auto; }
.logo span { color: var(--hall); font-weight: 400; font-size: 16px; }
.logo:hover { text-decoration: none; }
.menyy { display: flex; gap: 4px; flex: 1; }
.menyy a, .kasutaja a {
  padding: 8px 12px; border-radius: 6px; color: var(--tekst);
}
.menyy a:hover, .kasutaja a:hover { background: var(--hall-hele); text-decoration: none; }
.menyy a.aktiivne, .kasutaja a.aktiivne { background: var(--sinine-hele); color: var(--sinine); font-weight: 600; }
.kasutaja { display: flex; gap: 4px; align-items: center; }
.kasutaja .valja { color: var(--hall); }

/* ---------- pealkirjariba: sama kõrgus igal lehel ---------- */
.pealkiri {
  display: flex; align-items: center; justify-content: space-between;
  height: 64px; margin: 10px 0 0; border-bottom: 1px solid var(--piir);
  margin-bottom: var(--vahe);
}
.pealkiri h1 { font-size: 20px; margin: 0; font-weight: 600; }
.pealkiri-tegevused { display: flex; gap: 8px; }

/* ---------- kastid ja ruudustik ---------- */
.kast {
  background: #fff; border: 1px solid var(--piir); border-radius: 8px;
  padding: 16px; display: flex; flex-direction: column;
}
.kast + .kast, .grid + .kast, .kast + .grid, .grid + .grid { margin-top: var(--vahe); }
.grid > .kast { margin-top: 0; }
.kast h2, .silt {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em;
  color: var(--hall); margin: 0 0 10px;
}
.grid { display: grid; gap: var(--vahe); align-items: stretch; }
.g2 { grid-template-columns: 1fr 1fr; }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g-kapid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.kast .jalus { margin-top: auto; padding-top: 14px; display: flex; gap: 8px; justify-content: flex-end; }

/* read: vasakul pealkiri + hele detail, paremal nupp */
.read { display: flex; flex-direction: column; }
.rida {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 0; border-top: 1px solid var(--hall-hele);
}
.rida:first-child { border-top: 0; padding-top: 0; }
.rida .p { font-weight: 600; }
.rida .d { color: var(--hall); font-size: 13px; margin-top: 2px; }
.tyhi { color: var(--hall); padding: 6px 0; }

/* ---------- nupud ---------- */
.nupp {
  display: inline-block; min-width: 130px; text-align: center; padding: 8px 14px;
  border-radius: 6px; border: 1px solid var(--sinine); background: var(--sinine); color: #fff;
  font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.nupp:hover { text-decoration: none; filter: brightness(1.12); }
.nupp.hele { background: var(--sinine-hele); color: var(--sinine); border-color: var(--sinine-hele); }
.nupp.punane { background: #fff; color: var(--punane); border-color: #f0c7c2; }
.nupp:disabled { opacity: .45; cursor: default; filter: none; }
.nupp.vaike { min-width: 0; padding: 5px 10px; font-size: 13px; }

/* ---------- vormid ---------- */
.vorm { display: grid; gap: 12px; }
.vorm .vali-rida { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
label { display: block; font-size: 12px; color: var(--hall); margin-bottom: 4px; font-weight: 600; }
input[type=text], input[type=password], input[type=email], input[type=number], input[type=date],
select, textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--piir); border-radius: 6px;
  font: inherit; background: #fff; color: var(--tekst);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--sinine-hele); border-color: var(--sinine); }
.markeruut { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--tekst); font-weight: 400; }
.abitekst { font-size: 12px; color: var(--hall); margin-top: 4px; }
.mono { font-family: Consolas, "Courier New", monospace; }

/* ---------- tabel ---------- */
.tabel { width: 100%; border-collapse: collapse; }
.tabel th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--hall); font-weight: 600; padding: 0 10px 8px; border-bottom: 1px solid var(--piir);
}
.tabel td { padding: 9px 10px; border-bottom: 1px solid var(--hall-hele); vertical-align: middle; }
.tabel tr:last-child td { border-bottom: 0; }
.tabel tr:hover td { background: #fafbfc; }
.tabel .paremale { text-align: right; }

/* ---------- märgid ---------- */
.mark { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 12px; font-weight: 600; }
.mark-avatud  { background: #e3f3ea; color: var(--roheline); }
.mark-tundmatu { background: #fdf0e1; color: var(--oranz); }
.mark-keelatud { background: #fbe5e2; color: var(--punane); }
.mark-hall { background: var(--hall-hele); color: var(--hall); }
.tapp { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; background: #c5ccd6; }
.tapp.vorgus { background: var(--roheline); }
.tapp.valjas { background: var(--punane); }

/* ---------- kapi kaart ---------- */
.kapp-nimi { font-size: 16px; font-weight: 600; }
.kapp-info { color: var(--hall); font-size: 13px; margin-top: 2px; }
.kapp-viimati { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hall-hele); }
.kapp-viimati .p { font-weight: 600; }
.kapp-viimati .d { color: var(--hall); font-size: 13px; }
.kapp-olek { margin-top: 10px; font-size: 12px; color: var(--hall); }

/* ---------- teated ---------- */
.teated { position: fixed; top: 66px; right: 16px; z-index: 50; display: grid; gap: 8px; max-width: 380px; }
.teade {
  padding: 10px 14px; border-radius: 6px; background: #fff; border: 1px solid var(--piir);
  box-shadow: 0 4px 14px rgba(0,0,0,.08); border-left: 4px solid var(--roheline);
  transition: opacity .4s;
}
.teade-viga { border-left-color: var(--punane); }
.teade-hoiatus { border-left-color: var(--oranz); }
.teade.peida { opacity: 0; pointer-events: none; }

/* ---------- sisselogimine ---------- */
.login-kast { max-width: 360px; margin: 0 auto; }

/* paroolide nimekiri (import / lähtestamine) */
.parool-kast { background: #fffbea; border: 1px solid #f1e3a6; border-radius: 6px; padding: 12px; }

.filtrid { grid-template-columns: repeat(5, 1fr) auto; align-items: end; margin-bottom: 14px; }

.lehed { display: flex; gap: 6px; justify-content: flex-end; margin-top: 12px; }

@media (max-width: 800px) {
  .g2, .g3, .vorm .vali-rida, .filtrid { grid-template-columns: 1fr; }
  .top-sisu { gap: 10px; height: auto; flex-wrap: wrap; padding: 8px 16px; }
  .menyy { order: 3; flex-basis: 100%; overflow-x: auto; }
  .tabel-ymbris { overflow-x: auto; }
  .pealkiri-tegevused .nupp { min-width: 0; padding: 8px 12px; }
}

@media print {
  .top, .pealkiri-tegevused, .teated, .ei-prindi { display: none !important; }
  body { background: #fff; }
  .kast { border: 0; padding: 0; }
}

/* ---------- kalender ---------- */
.kalender { width: 100%; border-collapse: separate; border-spacing: 4px; table-layout: fixed; }
.kalender th { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--hall); font-weight: 600; padding: 4px; text-align: left; }
.kalender td { border: 1px solid var(--piir); border-radius: 6px; height: 92px; vertical-align: top; padding: 6px 8px; background: #fff; font-size: 12px; }
.kalender td.muu-kuu { background: #f7f8fa; color: #b8c0cb; }
.kalender td.nadalavahetus { background: #f7f8fa; }
.kalender td.vaheaeg { background: #fdf5e6; }
.kalender td.tana { border: 2px solid var(--sinine); padding: 5px 7px; }
.kalender td a.kal-paev { display: block; color: inherit; height: 100%; }
.kalender td a.kal-paev:hover { text-decoration: none; }
.kalender td:hover { border-color: var(--sinine); }
.kal-nr { font-weight: 600; font-size: 14px; }
.kal-rida { color: var(--hall); margin-top: 3px; }
.kal-minu { color: var(--sinine); font-weight: 600; margin-top: 3px; }
.kal-vaheaeg { color: var(--oranz); margin-top: 3px; }

/* ---------- seadmete ruudustik ---------- */
.seadmed { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 6px; }
.seade {
  border: 1px solid var(--piir); border-radius: 6px; padding: 6px 4px; text-align: center; font-size: 12px;
  background: #e3f3ea; color: var(--roheline); font-weight: 600; cursor: default;
}
.seade.katki { background: #fbe5e2; color: var(--punane); border-color: #f0c7c2; }
button.seade { font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.vaheaeg-vorm { grid-template-columns: 1fr 1fr 2fr auto; }
@media (max-width: 800px) { .vaheaeg-vorm { grid-template-columns: 1fr; } }