/* ==========================================================================
   Vuoro app — komponenttityylit (käyttää styles.css:n brändimuuttujia)
   ========================================================================== */

body.vuoro { background: var(--sand-soft); }

/* ---------- App bar ---------- */
.appbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 12px clamp(16px, 3vw, 32px);
  /* iOS standalone (PWA) + viewport-fit=cover: pidä sisältö statusbaarin / Dynamic Islandin
     alapuolella. env()-inset on 0 normaalissa selaimessa/työpöydällä → ei muutosta siellä. */
  padding-top: max(12px, env(safe-area-inset-top));
  padding-left: max(clamp(16px, 3vw, 32px), env(safe-area-inset-left));
  padding-right: max(clamp(16px, 3vw, 32px), env(safe-area-inset-right));
  background: rgba(247,246,243,.92); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--sand-line);
}
.appbar__brand { display: flex; align-items: center; gap: 10px; }
.appbar__logo { height: 34px; width: auto; display: block; }
.vh-gate__logo { width: 230px; max-width: 72%; height: auto; margin: 0 auto 6px; display: block; }
.appbar__mark { width: 34px; height: 34px; border: 1.5px solid var(--walnut); border-radius: 50%; display: grid; place-items: center; font-family: var(--f-display); font-size: .9rem; }
.appbar__name { font-family: var(--f-display); font-size: 1.1rem; letter-spacing: .04em; }
.appbar__name small { display: block; font-family: var(--f-body); font-size: .5rem; letter-spacing: .34em; text-transform: uppercase; opacity: .65; }
.appbar__spacer { flex: 1; }
.appbar__ctrl { display: flex; align-items: center; gap: 8px; }
.appbar select, .appbar .chip-btn {
  font-family: var(--f-body); font-size: .82rem; padding: 8px 12px; border-radius: 6px;
  border: 1px solid var(--sand-line); background: #fff; color: var(--ink); cursor: pointer;
}

/* Role switch */
.roleswitch { display: inline-flex; background: var(--sand); border-radius: 8px; padding: 3px; gap: 2px; }
.roleswitch button {
  font-family: var(--f-body); font-size: .8rem; font-weight: 600; letter-spacing: .02em;
  padding: 8px 16px; border-radius: 6px; color: var(--walnut); white-space: nowrap;
}
.roleswitch button.is-active { background: var(--walnut); color: var(--white); box-shadow: var(--shadow-sm); }

/* ---------- Role views ---------- */
.roleview { display: none; }
.roleview.is-active { display: block; }
.wrap { max-width: 1280px; margin: 0 auto; padding: clamp(18px, 3vw, 32px); }
.view-head { margin-bottom: 22px; }
.view-head h1 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
.view-head p { color: var(--ink-soft); font-size: .95rem; margin-top: 4px; }

/* section title */
.blocktitle { font-family: var(--f-body); font-weight: 700; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--espresso); margin: 0 0 14px; }

/* ---------- KPIs ---------- */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 26px; }
.kpi { background: #fff; border: 1px solid var(--sand-line); border-radius: 10px; padding: 18px 18px 16px; box-shadow: var(--shadow-sm); }
.kpi__val { font-family: var(--f-display); font-size: 2.1rem; line-height: 1; color: var(--walnut); }
.kpi__lbl { font-size: .78rem; color: var(--ink-soft); margin-top: 8px; letter-spacing: .02em; }
.kpi--alert .kpi__val { color: #b5482f; }

/* ---------- Admin sub-tabs ---------- */
.subtabs { display: inline-flex; gap: 4px; background: var(--sand); padding: 4px; border-radius: 9px; margin-bottom: 22px; }
.subtab { font-family: var(--f-body); font-weight: 600; font-size: .82rem; padding: 9px 18px; border-radius: 6px; color: var(--walnut); }
.subtab.is-active { background: #fff; box-shadow: var(--shadow-sm); }

/* Admin presence toggle */
.presence { display: inline-flex; align-items: center; gap: 9px; font-family: var(--f-body); font-weight: 600; font-size: .8rem; color: var(--walnut); background: #fff; border: 1px solid var(--sand-line); border-radius: 100px; padding: 9px 16px; cursor: pointer; box-shadow: var(--shadow-sm); }
.presence:hover { border-color: var(--espresso); }
.presence__dot { width: 9px; height: 9px; border-radius: 50%; background: #b9b2a6; flex: none; }
.presence__dot.on { background: #46d17f; box-shadow: 0 0 0 3px rgba(70,209,127,.25); }

/* ---------- Cleaner profiles ---------- */
.cleaners-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 18px; }
.profile { background: #fff; border: 1px solid var(--sand-line); border-radius: 12px; padding: 18px; box-shadow: var(--shadow-sm); }
.profile__head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.avatar--lg { width: 44px; height: 44px; font-size: 1rem; }
.profile__name { font-family: var(--f-display); font-size: 1.2rem; }
.profile__sub { font-size: .82rem; color: var(--ink-soft); }
.profile__rows { margin-bottom: 14px; }
.profile__rows .detail-row { padding: 8px 0; }
.profile__avail { border-top: 1px solid var(--sand-line); padding-top: 12px; }

/* availability strip */
.avail { display: grid; gap: 6px; }
.avail__day { display: flex; align-items: center; gap: 10px; }
.avail__lbl { width: 66px; flex: none; font-size: .8rem; color: var(--ink-soft); }
.avail__slots { display: flex; gap: 6px; }
.slot {
  width: 34px; height: 30px; border-radius: 6px; border: 1px solid var(--sand-line);
  background: var(--sand-soft); color: var(--ink-soft); font-size: .78rem; font-weight: 600;
}
.slot.on { background: #e6efe1; border-color: #9ec79a; color: #3f7a2f; }
.slot.editable { cursor: pointer; }
.slot.editable:hover { border-color: var(--espresso); }

/* ---------- Admin layout ---------- */
.admin-grid { display: grid; grid-template-columns: 1fr 340px; gap: 22px; align-items: start; }

/* Alerts */
.alerts { display: grid; gap: 10px; margin-bottom: 24px; }
.alert {
  display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-radius: 8px;
  background: #fff; border: 1px solid var(--sand-line); border-left: 3px solid var(--espresso); font-size: .9rem;
}
.alert--warn { border-left-color: #d98a3d; }
.alert--urgent { border-left-color: #b5482f; }
.alert__ic { flex: none; font-size: 1.1rem; }
.alert b { color: var(--walnut); }
.alert .alert__act { margin-left: auto; font-size: .78rem; font-weight: 600; color: var(--espresso); white-space: nowrap; }

/* Board of units */
.board { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.unit { background: #fff; border: 1px solid var(--sand-line); border-radius: 10px; padding: 16px; box-shadow: var(--shadow-sm); }
.unit__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.unit__name { font-family: var(--f-display); font-size: 1.15rem; }
.unit__addr { font-size: .74rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; }
.status {
  font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 100px; white-space: nowrap;
}
.status--open { background: #efe4d3; color: #8a5a1e; }
.status--proposed { background: #e4e9f2; color: #3a5a86; }
.status--accepted { background: #e6efe1; color: #3f7a2f; }
.status--in_progress { background: #fdf1d6; color: #9a6a12; }
.status--done { background: #e2e2e2; color: #555; }

/* checkout→deadline→checkin timeline */
.timeline { display: flex; align-items: center; gap: 8px; margin: 12px 0; font-size: .74rem; }
.timeline__node { text-align: center; }
.timeline__node b { display: block; font-family: var(--f-display); font-size: .95rem; color: var(--walnut); }
.timeline__node span { color: var(--ink-soft); }
.timeline__bar { flex: 1; height: 2px; background: linear-gradient(90deg, var(--espresso), var(--sand)); border-radius: 2px; position: relative; }
.unit__meta { display: flex; flex-wrap: wrap; gap: 10px 16px; font-size: .8rem; color: var(--ink); margin: 10px 0; }
.unit__meta span { display: inline-flex; align-items: center; gap: 5px; }
.unit__cleaner { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--sand-line); padding-top: 12px; margin-top: 4px; font-size: .84rem; }
.unit__cleaner .assign { color: var(--espresso); font-weight: 600; cursor: pointer; }
.avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--espresso); color: #fff; display: inline-grid; place-items: center; font-size: .7rem; font-weight: 700; margin-right: 6px; }

/* ---------- Side column ---------- */
.side { display: grid; gap: 22px; position: sticky; top: 76px; }
.panel { background: #fff; border: 1px solid var(--sand-line); border-radius: 10px; padding: 16px; box-shadow: var(--shadow-sm); }

/* roster */
.roster { display: grid; gap: 10px; }
.roster__row { display: flex; align-items: center; gap: 10px; font-size: .86rem; }
.roster__row .name { flex: 1; }
.roster__load { display: flex; gap: 3px; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sand); }
.dot.on { background: var(--espresso); }
.transport { font-size: .95rem; }

/* AI inbox */
.ai { display: grid; gap: 14px; }
.ai__item { border: 1px solid var(--sand-line); border-radius: 8px; padding: 12px; background: var(--cream); }
.ai__from { font-size: .78rem; color: var(--ink-soft); margin-bottom: 6px; }
.ai__from b { color: var(--walnut); }
.ai__msg { font-size: .86rem; margin-bottom: 10px; }
.ai__sugg { font-size: .86rem; background: #fff; border: 1px dashed var(--sand); border-radius: 6px; padding: 10px; margin-bottom: 10px; }
.ai__sugg .tag { display: inline-block; font-size: .6rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--espresso); margin-bottom: 6px; }
.ai__actions { display: flex; gap: 8px; }

/* buttons */
.b { font-family: var(--f-body); font-weight: 600; font-size: .78rem; padding: 9px 14px; border-radius: 6px; cursor: pointer; border: 1px solid transparent; }
.b--primary { background: var(--walnut); color: #fff; }
.b--primary:hover { background: var(--espresso); }
.b--ghost { border-color: var(--sand-line); color: var(--walnut); background: #fff; }
.b--ghost:hover { background: var(--sand-soft); }
.b--sm { padding: 7px 11px; font-size: .74rem; }
.b:disabled { opacity: .5; cursor: default; }

/* --- chat inbox: lähde-badge, vastaamaton-indikaattori, suodatinchipit --- */
@keyframes vhpulse { 0% { box-shadow: 0 0 0 0 rgba(181,72,47,.5); } 70% { box-shadow: 0 0 0 6px rgba(181,72,47,0); } 100% { box-shadow: 0 0 0 0 rgba(181,72,47,0); } }
.vh-unread { width: 9px; height: 9px; border-radius: 50%; background: #b5482f; flex: none; animation: vhpulse 1.6s infinite; }
.vh-count { display: inline-block; min-width: 20px; padding: 1px 7px; border-radius: 20px; background: #b5482f; color: #fff; font-size: .72rem; font-weight: 700; text-align: center; animation: vhpulse 1.6s infinite; }
.vh-src { display: inline-block; font-size: .64rem; font-weight: 700; padding: 1px 7px; border-radius: 20px; background: var(--sand-soft); color: var(--walnut); white-space: nowrap; }
.vh-arch { display: inline-block; font-size: .6rem; font-weight: 700; padding: 1px 6px; border-radius: 20px; background: #e8e2d6; color: #8a7f72; text-transform: uppercase; letter-spacing: .06em; }
.vh-chip { font-family: var(--f-body); font-size: .74rem; font-weight: 600; padding: 5px 11px; border-radius: 20px; border: 1px solid var(--sand-line); background: #fff; color: var(--walnut); cursor: pointer; }
.vh-chip.on { background: var(--walnut); color: #fff; border-color: var(--walnut); }

/* --- siivoojan 14 pv saatavuuskalenteri --- */
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal__day { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 2px 7px; border: 1px solid var(--sand-line); border-radius: 9px; background: #fff; cursor: pointer; font-family: var(--f-body); min-height: 54px; justify-content: center; }
.cal__day.on { background: var(--sand-soft); border-color: var(--espresso); }
.cal__num { font-size: .82rem; font-weight: 700; color: var(--walnut); line-height: 1; }
.cal__dow { font-size: .58rem; letter-spacing: .04em; color: var(--ink-soft); text-transform: uppercase; }
.cal__ic { font-size: 1rem; line-height: 1; }
.cal__day:not(.on) .cal__ic { color: #cbb99a; font-weight: 700; }
.cal-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: .78rem; color: var(--ink-soft); margin: 12px 0 4px; }
.savepill { font-size: .72rem; color: var(--ink-soft); }
.savepill.ok { color: #2f8f57; }

/* --- kohdevalinta --- */
.proplist label { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--sand-line); border-radius: 8px; margin-bottom: 6px; font-size: .9rem; cursor: pointer; background: #fff; }
.proplist label.on { background: var(--sand-soft); border-color: var(--espresso); }
.proplist input { width: 17px; height: 17px; flex: none; accent-color: var(--walnut); }
.proplist .pl-tier { font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--espresso); margin: 14px 0 7px; }

/* --- siivoojat: master–detail --- */
.cleaners-md { display: grid; grid-template-columns: 340px 1fr; gap: 18px; align-items: start; }
.cleaners-md__list { max-height: 72vh; overflow-y: auto; padding-right: 4px; }
.clrow { display: flex; gap: 10px; align-items: center; width: 100%; text-align: left; background: #fff; border: 1px solid var(--sand-line); border-radius: 10px; padding: 9px 11px; margin-bottom: 6px; cursor: pointer; font-family: var(--f-body); }
.clrow:hover { background: var(--sand-soft); }
.clrow.is-active { border-color: var(--espresso); background: var(--sand-soft); }
.clrow__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.clrow__name { font-weight: 700; color: var(--walnut); font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clrow__meta { font-size: .74rem; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clrow__strip { display: flex; align-items: center; gap: 2px; margin-top: 3px; }
.clrow__strip small { margin-left: 6px; font-size: .66rem; color: var(--ink-soft); }
.cldot { width: 6px; height: 6px; border-radius: 50%; background: var(--sand-line); flex: none; }
.cldot.on { background: var(--espresso); }
.cldot.half { background: #c8a97e; }
.cleaners-md__back { display: none; margin-bottom: 10px; }
@media (max-width: 760px) {
  .cleaners-md { grid-template-columns: 1fr; }
  .cleaners-md__list { max-height: none; }
  .cleaners-md.has-sel .cleaners-md__list { display: none; }
  .cleaners-md:not(.has-sel) .cleaners-md__detail { display: none; }
  .cleaners-md__back { display: inline-flex; }
}

/* ---------- Chat ---------- */
.chat { display: grid; gap: 8px; max-height: 320px; overflow-y: auto; padding-right: 4px; margin-bottom: 12px; }
.bubble { max-width: 82%; padding: 9px 12px; border-radius: 12px; font-size: .86rem; line-height: 1.4; }
.bubble--them { background: var(--sand-soft); align-self: flex-start; border-bottom-left-radius: 3px; }
.bubble--me { background: var(--walnut); color: #fff; align-self: flex-end; border-bottom-right-radius: 3px; }
.bubble time { display: block; font-size: .62rem; opacity: .6; margin-top: 3px; }
.chat-in { display: flex; gap: 8px; }
.chat-in input { flex: 1; padding: 10px 12px; border: 1px solid var(--sand-line); border-radius: 8px; font-family: var(--f-body); }
.threadlist { display: grid; gap: 6px; margin-bottom: 14px; }
.threadlist button { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 8px; text-align: left; width: 100%; border: 1px solid transparent; }
.threadlist button:hover { background: var(--sand-soft); }
.threadlist button.is-active { background: var(--sand-soft); border-color: var(--sand-line); }
.threadlist .who { flex: 1; font-size: .86rem; }
.threadlist .who small { display: block; color: var(--ink-soft); font-size: .72rem; }
.unread-dot { width: 8px; height: 8px; border-radius: 50%; background: #b5482f; }
.chat-back { display: none; margin-bottom: 8px; }   /* master-detail-takaisinnappi (vain mobiili) */
@keyframes vhSpin { to { transform: rotate(360deg); } }
.ai-spin { animation: vhSpin .8s linear infinite; }   /* AI-osoittimen pyörivä ympyrä */

/* ---------- Cleaner mobile ---------- */
.phones { display: flex; gap: 30px; flex-wrap: wrap; justify-content: center; }
.phone {
  width: 340px; max-width: 100%; background: #fff; border: 1px solid var(--sand-line);
  border-radius: 26px; box-shadow: var(--shadow-lg); overflow: hidden; align-self: flex-start;
}
.phone__top { background: var(--walnut); color: #fff; padding: 16px 18px; }
.phone__top h3 { font-family: var(--f-display); font-size: 1.05rem; }
.phone__top p { font-size: .76rem; opacity: .8; }
.phone__body { padding: 16px; display: grid; gap: 12px; }
.taskcard { border: 1px solid var(--sand-line); border-radius: 10px; padding: 13px; cursor: pointer; transition: border-color .2s; }
.taskcard:hover { border-color: var(--espresso); }
.taskcard__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.taskcard__name { font-family: var(--f-display); font-size: 1rem; }
.taskcard__dl { font-size: .78rem; color: #b5482f; font-weight: 600; }
.taskcard__meta { font-size: .78rem; color: var(--ink-soft); }
.keybox { background: var(--cream); border: 1px dashed var(--sand); border-radius: 8px; padding: 12px; text-align: center; }
.keybox__code { font-family: var(--f-display); font-size: 1.8rem; letter-spacing: .3em; color: var(--walnut); }
.keybox__locked { color: var(--ink-soft); font-size: .82rem; }
.checklist { display: grid; gap: 8px; }
.checklist label { display: flex; align-items: center; gap: 10px; font-size: .86rem; }
.detail-row { display: flex; justify-content: space-between; font-size: .84rem; padding: 7px 0; border-bottom: 1px solid var(--sand-line); }
.detail-row span:first-child { color: var(--ink-soft); }

/* ---------- Renter booking ---------- */
.renter-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 22px; align-items: start; }
.book-panel { background: #fff; border: 1px solid var(--sand-line); border-radius: 12px; padding: 22px; box-shadow: var(--shadow-sm); }
.field2 { margin-bottom: 16px; }
.field2 label { display: block; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--walnut); margin-bottom: 7px; }
.field2 input, .field2 select { width: 100%; padding: 11px 12px; border: 1px solid var(--sand-line); border-radius: 7px; font-family: var(--f-body); background: var(--cream); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.summary { background: linear-gradient(160deg, #4A3327, #2A1D14); color: #fff; border-radius: 12px; padding: 22px; }
.summary h3 { font-family: var(--f-display); font-size: 1.2rem; margin-bottom: 4px; }
.summary__row { display: flex; justify-content: space-between; padding: 8px 0; font-size: .9rem; border-bottom: 1px solid rgba(247,246,243,.14); }
.summary__row.disc { color: var(--gold-2); }
.summary__total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 14px; margin-top: 6px; }
.summary__total b { font-family: var(--f-display); font-size: 2rem; }
.summary__save { display: inline-block; margin-top: 8px; background: linear-gradient(135deg, var(--gold-2), var(--gold-1)); color: #4a3708; font-size: .72rem; font-weight: 700; padding: 6px 12px; border-radius: 100px; }
.applied { font-size: .78rem; color: rgba(247,246,243,.7); margin-top: 10px; }
.smoobu-badge { display: inline-flex; align-items: center; gap: 6px; font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); background: var(--sand-soft); padding: 4px 10px; border-radius: 100px; margin-bottom: 16px; }
.smoobu-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #3f7a2f; }

/* ---------- Varauskalenteri ---------- */
.bkcal { margin-top: 6px; }
.bkcal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.bkcal__title { font-family: var(--f-display); font-size: 1.05rem; color: var(--walnut); }
.bkcal__nav { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--sand-line); background: #fff; color: var(--walnut); cursor: pointer; font-size: 1.15rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.bkcal__nav:hover:not(:disabled) { background: var(--sand-soft); }
.bkcal__nav:disabled { opacity: .35; cursor: default; }
.bkcal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.bkcal__wd { margin-bottom: 6px; }
.bkcal__wdc { text-align: center; font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.bkcal__cell { border: none; border-radius: 8px; padding: 5px 2px; min-height: 46px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; cursor: pointer; font-family: inherit; transition: background .12s; }
.bkcal__cell--empty { background: none; cursor: default; }
.bkcal__d { font-size: .84rem; font-weight: 600; }
.bkcal__p { font-size: .6rem; opacity: .9; }
.bkcal__cell.is-avail { background: #e6f1e2; color: #2f6b28; }
.bkcal__cell.is-avail:hover { background: #d5e8ce; }
.bkcal__cell.is-booked { background: #f6e7e2; color: #b26a58; cursor: default; }
.bkcal__cell.is-booked .bkcal__d { text-decoration: line-through; }
.bkcal__cell.is-unknown { background: #f4f0e8; color: #bcb3a5; cursor: default; }
.bkcal__cell.is-past { background: none; color: #d2cabd; cursor: default; }
.bkcal__cell.is-range { background: var(--walnut); color: #fff; }
.bkcal__cell.is-selected { background: var(--walnut); color: #fff; }
/* Päätypäivät jaettu kenoviivalla: puolikas vapaa-vihreä + puolikas ruskea → saapumis-/lähtöpäivä lukee yhtenä yönä */
.bkcal__cell.is-ci { background: linear-gradient(135deg, #e6f1e2 50%, var(--walnut) 50%); }
.bkcal__cell.is-co { background: linear-gradient(135deg, var(--walnut) 50%, #e6f1e2 50%); }
.bkcal__cell.is-ci .bkcal__d, .bkcal__cell.is-ci .bkcal__p,
.bkcal__cell.is-co .bkcal__d, .bkcal__cell.is-co .bkcal__p { text-shadow: 0 0 3px rgba(74,51,39,.6); }
.bkcal__legend { display: flex; gap: 16px; margin-top: 12px; font-size: .74rem; color: var(--ink-soft); flex-wrap: wrap; }
.bkcal__legend span { display: inline-flex; align-items: center; gap: 6px; }
.bkcal__sw { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.bkcal__sw--avail { background: #a9d39b; }
.bkcal__sw--booked { background: #e6b6a9; }
.bkcal__sw--ci { background: linear-gradient(135deg, #a9d39b 50%, var(--walnut) 50%); }
.bkcal__sw--co { background: linear-gradient(135deg, var(--walnut) 50%, #a9d39b 50%); }
.bkcal__sw--sel { background: var(--walnut); }

/* ---------- Alennusmaininta ---------- */
.disc-note { margin-top: 16px; background: #fbf3e3; border: 1px solid #ecdcbe; border-radius: 12px; padding: 12px 14px; display: grid; gap: 8px; }
.disc-note__row { display: flex; align-items: flex-start; gap: 9px; font-size: .84rem; line-height: 1.5; color: #6b5535; }
.disc-note__row b { color: var(--walnut); }
.disc-note__ic { font-size: 1rem; line-height: 1.3; flex: none; }
.disc-tiers { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 7px; }
.disc-tier { display: flex; flex-direction: column; align-items: center; gap: 1px; background: #fff; border: 1px solid #ecdcbe; border-radius: 9px; padding: 5px 12px; min-width: 64px; }
.disc-tier__n { font-size: .7rem; color: #8a7256; white-space: nowrap; }
.disc-tier__p { font-size: .92rem; font-weight: 700; color: var(--walnut); }

/* register nudge */
.nudge { background: var(--cream); border: 1px solid var(--sand-line); border-radius: 10px; padding: 16px; margin-top: 16px; }
.nudge h4 { font-family: var(--f-display); font-size: 1.05rem; margin-bottom: 6px; }
.nudge p { font-size: .85rem; color: var(--ink-soft); margin-bottom: 12px; }

/* my bookings */
.mybooking { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--sand-line); font-size: .88rem; }
.mybooking b { font-family: var(--f-display); }

/* modal */
.modal-bg { position: fixed; inset: 0; background: rgba(13,13,13,.6); display: none; align-items: center; justify-content: center; z-index: 200; padding: 20px; }
.modal-bg.is-open { display: flex; }
.modal { background: #fff; border-radius: 14px; max-width: 440px; width: 100%; padding: 28px; box-shadow: var(--shadow-lg); }
.modal h3 { font-family: var(--f-display); font-size: 1.4rem; margin-bottom: 8px; }
.modal p { color: var(--ink-soft); font-size: .9rem; margin-bottom: 18px; }

/* toast */
.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(20px); opacity: 0; background: var(--walnut); color: #fff; padding: 13px 22px; border-radius: 100px; font-size: .88rem; box-shadow: var(--shadow-md); z-index: 300; transition: .3s var(--ease); pointer-events: none; }
.toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .admin-grid { grid-template-columns: 1fr; }
  .side { position: static; }
  .renter-grid { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .kpis { grid-template-columns: 1fr 1fr; }
  .roleswitch button { padding: 8px 11px; font-size: .74rem; }
}

/* --- Mobiili (pystyasento): estä vaakaylivuoto + collapsaa monisarakkeiset layoutit --- */
@media (max-width: 760px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  .subtabs { display: flex; flex-wrap: wrap; }          /* 9 välilehteä rivittyvät, ei leveää palkkia */
  .chat-cols { grid-template-columns: 1fr !important; } /* threadlist + keskustelu allekkain (ei 250px+1fr) */
  .chat-cols.has-active .threadlist { display: none; }        /* master-detail: valittu keskustelu → piilota lista */
  .chat-cols:not(.has-active) .chat-detail { display: none; } /* ei valintaa → näytä vain lista */
  .chat-back { display: inline-flex; }
  .wrap { padding-left: 14px; padding-right: 14px; }
}

/* --- Ohjeet (Käyttöohjeet) + tulostus PDF:ksi --- */
.guide { color: var(--walnut); }
.guide h1 { font-family: Georgia, serif; font-size: 1.5rem; margin: 0 0 6px; }
.guide h2 { font-family: Georgia, serif; font-size: 1.1rem; margin: 22px 0 6px; color: var(--espresso); }
.guide p { font-size: .9rem; line-height: 1.55; color: var(--ink-soft); margin: 0 0 8px; }
.guide ul, .guide ol { margin: 0 0 8px; padding-left: 22px; }
.guide li { font-size: .9rem; line-height: 1.5; margin-bottom: 4px; color: var(--walnut); }
.guide .guide-tip { background: var(--sand); border: 1px solid #e5d8c2; border-radius: 8px; padding: 9px 13px; font-size: .82rem; color: #8a5a1e; margin: 8px 0; }
.guide-sec { break-inside: avoid; }
@media print {
  body * { visibility: hidden; }
  .guide, .guide * { visibility: visible; }
  .guide { position: absolute; left: 0; top: 0; width: 100%; padding: 0 8mm; }
  .no-print { display: none !important; }
  .guide p, .guide li { color: #333 !important; }
}