/* Kuokkala – Työtila (henkilökunta). Reference-driven premium dark dashboard:
   thin borders, sharp geometry, beige selected states, uppercase-tracked UI.
   No blue SaaS, no rounded blob cards, no KPI widgets. */

.kp-staff { display: grid; grid-template-columns: 216px 1fr; gap: 28px; align-items: start; }

/* ---- sidebar ---- */
.kp-side { position: sticky; top: calc(var(--header-h) + 20px); }
  .kp-push { padding: 4px 6px; }
  .kp-push button.tool {
    width: 100%;
    justify-content: center;
    background: var(--accent);
    color: #120C06;
    border-color: var(--accent);
  }
  .kp-push button.tool:hover { background: var(--accent-2); color: #120C06; }
  .kp-push button.tool[disabled] { opacity: 1; cursor: default; }
  .kp-push .kp-push-test {
    margin-top: 6px;
    background: transparent;
    color: var(--accent-2);
    border-color: var(--accent);
    font-size: 12px;
  }
  .kp-push .kp-push-test:hover { background: var(--accent-bg); }
.kp-who { padding: 18px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 16px; }
.kp-who .who-name { font-family: var(--font-display); font-size: 20px; font-weight: 400; }
.kp-who .who-role { color: var(--text-muted); font-family: var(--font-ui); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; margin-top: 4px; }
.kp-who .who-out { display: inline-block; margin-top: 12px; font-family: var(--font-ui); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); }
.kp-who .who-out:hover { color: var(--accent-2); }

.kp-nav { display: flex; flex-direction: column; gap: 2px; }
.kp-nav button {
  text-align: left; padding: 12px 16px; border: none; border-radius: var(--radius-sm);
  background: transparent; color: var(--text-muted);
  font-family: var(--font-ui); font-weight: 500; font-size: 11.5px;
  letter-spacing: 0.22em; text-transform: uppercase;
  cursor: pointer; border-left: 1px solid transparent;
  transition: color 0.15s, background 0.15s;
}
.kp-nav button:hover { color: var(--text-primary); background: var(--surface); }
.kp-nav button.on { color: var(--accent-2); background: var(--accent-bg); border-left-color: var(--accent); }
  .kp-nav .kp-nav-badge { display: inline-block; margin-left: 6px; min-width: 16px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: #120C06; font-size: 10px; line-height: 16px; font-weight: 700; text-align: center; }
  .kp-card.unread { border-left-color: var(--accent); background: var(--accent-bg); }
  .kp-card.kp-highlight { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); background: var(--accent-bg); }
  .kp-card .push-status { font-family: var(--font-ui); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
  .kp-card .push-status.delivered { color: var(--ok); }
  .kp-card .push-status.no_device, .kp-card .push-status.failed, .kp-card .push-status.errored { color: var(--danger); }
  .kp-card .push-status.created { color: var(--text-muted); }

/* ---- main ---- */
.kp-main { min-width: 0; }

.kp-topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 20px; flex-wrap: wrap;
  padding-bottom: 18px; border-bottom: 1px solid var(--border-soft);
}
.kp-topbar h2 { font-family: var(--font-display); font-weight: 400; font-size: 30px; margin: 0; }
.kp-topbar .date { color: var(--text-muted); font-family: var(--font-ui); font-size: 12px; letter-spacing: 0.06em; text-transform: capitalize; }

/* ---- view + action toolbar ---- */
.kp-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.kp-toolbar .seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.kp-toolbar .seg button {
  padding: 10px 16px; background: transparent; border: none; cursor: pointer;
  font-family: var(--font-ui); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-secondary);
  transition: background 0.15s, color 0.15s;
}
.kp-toolbar .seg button + button { border-left: 1px solid var(--border); }
.kp-toolbar .seg button.on { background: var(--accent); color: #120C06; }
.kp-toolbar .navbtn {
  padding: 10px 14px; background: var(--surface); border: 1px solid var(--border);
  color: var(--text-secondary); cursor: pointer; font-family: var(--font-ui);
  font-size: 12px; border-radius: var(--radius-sm); transition: border-color 0.15s, color 0.15s;
}
.kp-toolbar .navbtn:hover { border-color: var(--border-strong); color: var(--text-primary); }
.kp-toolbar .navbtn.accent { border-color: var(--accent); color: var(--accent-2); }
.kp-toolbar .spacer { flex: 1; }

/* ---- booking cards ---- */
.kp-cards { display: flex; flex-direction: column; }
.kp-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-left: 2px solid var(--border);
  border-radius: 0;
  padding: 20px 24px;
  margin-bottom: -1px;
  transition: border-color 0.15s, background 0.15s;
}
.kp-card:first-child { border-top-left-radius: var(--radius-lg); border-top-right-radius: var(--radius-lg); }
.kp-card:last-child { border-bottom-left-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg); margin-bottom: 0; }
.kp-card:hover { background: var(--surface-elevated); }
.kp-card .c-time { font-family: var(--font-display); font-size: 28px; color: var(--accent-2); margin-bottom: 6px; display: flex; align-items: center; gap: 12px; }
.kp-card .c-name { font-family: var(--font-display); font-weight: 400; font-size: 24px; }
.kp-card .c-svc { color: var(--text-secondary); font-size: 15px; margin-top: 2px; }
.kp-card .c-svc-row { margin-top: 3px; }
.kp-card .c-svc-row + .c-svc-row { border-top: 1px dashed var(--border-soft); padding-top: 3px; margin-top: 4px; }
.kp-card .c-svc-price { color: var(--accent-2); font-family: var(--font-ui); font-weight: 500; font-size: 13px; }
.kp-card .c-svc-total { margin-top: 6px; color: var(--accent-2); font-family: var(--font-ui); font-weight: 600; font-size: 13px; }
.m-svcs { display: flex; flex-direction: column; gap: 6px; }
.m-svc-item { display: flex; align-items: baseline; gap: 8px; font-family: var(--font-body); font-size: 14px; color: var(--text-secondary); cursor: pointer; }
.m-svc-item input { accent-color: var(--accent); }
.kp-card .c-meta { display: flex; flex-wrap: wrap; gap: 6px 20px; color: var(--text-muted); font-family: var(--font-ui); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 12px; }
  .kp-card .c-meta a { color: var(--text-secondary); }
  .kp-card .c-contact { display: inline-flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; }
  .kp-card .c-contact a { display: inline-block; max-width: 100%; overflow-wrap: anywhere; word-break: break-word; text-transform: none; letter-spacing: 0; font-family: var(--font-body); font-size: 13px; }
  .kp-card .c-contact a.c-phone { color: var(--accent); }
  .kp-card .c-contact a.c-mail { color: var(--text-secondary); }
  @media (max-width: 430px) {
    .kp-card .c-contact { display: flex; flex-direction: column; align-items: flex-start; gap: 4px 0; width: 100%; }
  }
.kp-card .c-note { margin-top: 12px; padding: 12px 14px; background: var(--bg); border: 1px solid var(--border-soft); font-size: 14px; color: var(--text-secondary); }
.kp-card .c-actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }

.kp-card.status-pending_acceptance { border-left-color: var(--accent); background: var(--accent-bg); }
.kp-card.status-accepted { border-left-color: var(--border-strong); }
.kp-card.status-in_progress { border-left-color: var(--accent); background: var(--surface-elevated); }
.kp-card.status-completed { opacity: 0.72; }
.kp-card.status-completed:hover { opacity: 1; }

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-ui); font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  padding: 5px 10px; border: 1px solid var(--border);
  color: var(--text-muted); border-radius: var(--radius-sm);
}
.badge.pending_acceptance { color: var(--accent-2); border-color: var(--accent); }
.badge.accepted { color: var(--text-secondary); border-color: var(--border); }
.badge.in_progress { color: var(--accent-2); border-color: var(--accent); }
.badge.completed { color: var(--text-faint); border-color: var(--border-soft); }
.badge.cancelled, .badge.rejected { color: var(--danger); border-color: rgba(201,123,107,0.4); }

.kp-empty { color: var(--text-muted); text-align: center; padding: 44px 0; font-family: var(--font-body); font-size: 16px; }

/* ---- calendar ---- */
.kp-week { display: grid; grid-template-columns: 72px 1fr; gap: 10px; }
.kp-daycol { min-width: 0; }
.kp-dayhead {
  font-family: var(--font-ui); font-weight: 500; font-size: 10.5px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-muted); text-align: center; padding: 10px 0;
  border: 1px solid var(--border); border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: var(--surface);
}
.kp-dayhead.today { color: var(--accent-2); border-color: var(--accent); }
.kp-daybody {
  display: flex; flex-direction: column; gap: 6px; padding: 10px;
  background: var(--bg); border: 1px solid var(--border); border-top: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm); min-height: 240px;
}
.kp-cell { padding: 9px 10px; border-radius: var(--radius-sm); font-size: 13px; line-height: 1.4; border: 1px solid var(--border-soft); transition: background-color 0.15s, border-color 0.15s, color 0.15s; }
.kp-cell.cb { background: var(--surface); color: var(--text-secondary); }
.kp-cell.cb .t { font-family: var(--font-ui); font-weight: 500; letter-spacing: 0.04em; }
.kp-cell.cb:hover { background: var(--surface-elevated); border-color: var(--border); }
.kp-cell.cb b { color: var(--text-primary); }
.kp-cell.blocked { background: var(--surface); border: 1px dashed var(--border-strong); color: var(--text-muted); font-size: 12px; }
  .kp-cell.blocked .t { font-family: var(--font-ui); font-weight: 500; letter-spacing: 0.04em; color: var(--text-faint); }
  .kp-cell.blocked:hover { border-color: var(--accent); color: var(--text-secondary); }
  .kp-cell.blocked .kpb-blk { color: var(--accent-2); font-family: var(--font-ui); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; display: block; margin-top: 2px; }
  .kp-cell.blocked .kpb-blk-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); vertical-align: baseline; margin-right: 6px; }
.kp-cell.cb.pending_acceptance { background: var(--accent-bg); border-color: var(--accent); }
.kp-cell.cb.in_progress { border-color: var(--accent); }
.kp-cell.completed { opacity: 0.7; }
.kp-cell.completed:hover { opacity: 1; }
.kp-grid-hours { font-size: 11px; color: var(--text-faint); text-align: right; font-family: var(--font-ui); padding-top: 8px; }

/* ---- resource timeline scheduler ---- */
.kpt { --kpt-timew: 52px; --kpt-staffw: 168px; }
.kpt-toolbar { margin-bottom: 14px; }
.kpt-filter.on { border-color: var(--accent); color: var(--accent-2); }
.kpt-scroll {
  position: relative;
  max-height: calc(100vh - 300px);
  min-height: 380px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  display: flex; flex-direction: column;
  scrollbar-width: thin; scrollbar-color: var(--border-strong) var(--bg);
}
  .kpt-scroll::-webkit-scrollbar { height: 10px; width: 10px; }
  .kpt-scroll::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 5px; }
  .kpt-scroll::-webkit-scrollbar-track { background: var(--bg); }

/* header layer: corner + day groups (translated horizontally on body scroll) */
.kpt-head {
  display: flex; flex: 0 0 auto; align-items: stretch;
  border-bottom: 1px solid var(--border-strong);
  background: var(--surface); position: relative; z-index: 4;
  will-change: transform;
}
.kpt-corner {
  flex: 0 0 var(--kpt-timew); position: sticky; left: 0;
  z-index: 5; background: var(--surface);
  display: flex; align-items: flex-end; justify-content: flex-end;
  padding: 0 10px 12px 0; border-right: 1px solid var(--border-strong);
  width: var(--kpt-timew);
}
.kpt-tt { font-family: var(--font-ui); font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-faint); }
.kpt-dg { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.kpt-dh {
  display: flex; align-items: baseline; gap: 6px;
  padding: 14px 12px 10px;
  border-right: 1px solid var(--border);
  color: var(--text-secondary);
  font-family: var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; font-size: 11px;
}
.kpt-dh .kpt-dw { font-weight: 500; }
.kpt-dh .kpt-dn { font-family: var(--font-ui); font-size: 15px; letter-spacing: 0.02em; color: var(--text-primary); text-transform: none; }
.kpt-dh .kpt-today {
  margin-left: auto; font-size: 8.5px; font-weight: 600; padding: 3px 6px;
  background: var(--accent); color: #120C06; border-radius: var(--radius-sm); letter-spacing: 0.14em;
}
.kpt-dh.today { color: var(--accent-2); border-bottom: 1px solid var(--accent); }
.kpt-srow { display: flex; }
.kpt-sh {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; gap: 3px;
  padding: 8px 12px;
  border-right: 1px solid var(--border);
  border-top: 1px solid var(--border-soft);
  background: var(--surface);
}
.kpt-sn { font-family: var(--font-display); font-size: 15px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpt-shh { font-family: var(--font-ui); font-size: 9.5px; letter-spacing: 0.1em; color: var(--accent-2); text-transform: uppercase; }

/* body: time rail + day columns */
.kpt-body { display: flex; align-items: stretch; position: relative; }
.kpt-time {
  flex: 0 0 var(--kpt-timew);
  width: var(--kpt-timew);
  position: sticky; left: 0; z-index: 3;
  background: var(--bg);
  border-right: 1px solid var(--border-strong);
}
.kpt-tlab {
  position: absolute; right: 9px;
  font-family: var(--font-ui); font-size: 10px; letter-spacing: 0.06em;
  color: var(--text-faint); font-weight: 500;
}
.kpt-dw-body {
  position: relative;
  display: flex;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0, transparent calc(60 * var(--kpt-min, 50px) - 1px), var(--border-soft) calc(60 * var(--kpt-min, 50px) - 1px), var(--border-soft) calc(60 * var(--kpt-min, 50px))
    );
}
.kpt-dw-body + .kpt-dw-body { border-left: 1px solid var(--border-strong); }
.kpt-col {
  position: relative;
  flex: 1 1 0; min-width: calc(var(--kpt-staffw) / 2);
  border-right: 1px solid var(--border);
}
.kpt-col.today { background: rgba(214,188,141,0.03); }
.kpt-dw-body > .kpt-col:last-child { border-right: none; }
.kpt-off {
  position: absolute; left: 0; right: 0;
  background: var(--bg);
  opacity: 0.55;
  border-bottom: 1px dashed var(--border);
  pointer-events: none;
}

/* events */
.kpt-ev {
  position: absolute; left: 3px; right: 3px;
  margin: 0 1px;
  border: 1px solid var(--border-strong);
  border-left: 2px solid var(--border-strong);
  border-radius: 2px;
  background: var(--surface);
  color: var(--text-primary);
  box-sizing: border-box;
  overflow: hidden;
  padding: 3px 6px;
  display: flex; flex-direction: column; gap: 1px;
  font-family: var(--font-ui);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.kpt-ev:hover { border-color: var(--accent); background: var(--surface-elevated); }
.kpt-ev.in_progress { border-left-color: var(--accent); background: var(--accent-bg); }
.kpt-ev.completed { opacity: 0.68; }
.kpt-ev.completed:hover { opacity: 1; }
.kpt-et { font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-2); font-weight: 600; }
.kpt-ec { font-size: 12.5px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpt-evsvc { font-size: 10.5px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpt-evsvc.kpt-x { display: none; }

/* blocked / closed events */
.kpt-ev.blocked {
  border: 1px dashed var(--border-strong);
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  justify-content: center; align-items: center; text-align: center;
}
.kpt-ev.blocked:hover { border-color: var(--accent); }
.kpt-ev.blocked .kpt-bt { font-family: var(--font-ui); font-size: 9.5px; letter-spacing: 0.06em; color: var(--text-faint); }
.kpt-ev.blocked .kpt-bblk { font-family: var(--font-ui); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-2); }

/* day-scope keeps a wider rail and single-day columns */
.kpt.kpt-day { --kpt-timew: 56px; --kpt-staffw: 260px; }
.kpt.kpt-day .kpt-col { min-width: 0; }

/* ---- mobile: single-day resource scheduler (intentional, not squeezed desktop) ---- */
.kpm-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.kpm-chip {
  padding: 11px 16px; font-family: var(--font-ui); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary);
  cursor: pointer; min-height: 44px;
}
.kpm-chip.on { background: var(--accent); color: #120C06; border-color: var(--accent); }
.kpm-strip {
  display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 12px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.kpm-strip::-webkit-scrollbar { display: none; }
.kpm-d {
  flex: 1 0 52px; min-height: 62px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  cursor: pointer; color: var(--text-secondary);
}
.kpm-d .kpm-dw { font-family: var(--font-ui); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.kpm-d .kpm-dn { font-family: var(--font-display); font-size: 17px; color: var(--text-primary); }
.kpm-d.on { border-color: var(--accent); background: var(--accent-bg); }
.kpm-d.on .kpm-dn { color: var(--accent-2); }
.kpm-d.today .kpm-dn::after { content: '·'; color: var(--accent); margin-left: 2px; }
.kpm-scroll {
  position: relative; overflow-y: auto; max-height: calc(100vh - 340px); min-height: 340px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg);
  -webkit-overflow-scrolling: touch;
}
.kpm-lanes { position: relative; }
.kpm-lane + .kpm-lane { border-top: 1px solid var(--border-strong); }
.kpm-lanehead {
  position: sticky; top: 0; z-index: 3;
  display: flex; align-items: baseline; gap: 8px; padding: 10px 12px;
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.kpm-col {
  position: relative;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0, transparent calc(60 * var(--kpt-min, 108px) - 1px), var(--border-soft) calc(60 * var(--kpt-min, 108px) - 1px), var(--border-soft) calc(60 * var(--kpt-min, 108px))
    );
}
.kpm-tlab { color: var(--text-faint); }
.kpm-lane .kpm-tlab { left: 6px; right: auto; }
.kpm-ev {
  position: absolute; left: 44px; right: 8px;
  border: 1px solid var(--border-strong); border-left: 3px solid var(--border-strong);
  border-radius: 3px; background: var(--surface); box-sizing: border-box;
  padding: 5px 8px; display: flex; flex-direction: column; gap: 1px;
  font-family: var(--font-ui); text-align: left; cursor: pointer;
  overflow: hidden;
}
.kpm-ev.in_progress { border-left-color: var(--accent); background: var(--accent-bg); }
.kpm-ev.completed { opacity: 0.66; }
.kpm-ev.blocked {
  left: 44px; border: 1px dashed var(--border-strong); background: var(--surface);
  justify-content: center; align-items: center; text-align: center; cursor: pointer;
}
.kpm-ev .kpt-et { font-size: 10px; font-weight: 600; color: var(--accent-2); letter-spacing: 0.08em; text-transform: uppercase; }
.kpm-ev .kpt-ec { font-size: 14px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpm-ev .kpt-evsvc { font-size: 11.5px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpm-ev .kpt-bblk { font-family: var(--font-ui); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-2); }
.kpm-ev .kpt-bt { font-family: var(--font-ui); font-size: 10px; letter-spacing: 0.06em; color: var(--text-faint); }

/* ---- manual booking / forms ---- */
.kp-manual { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; margin-bottom: 24px; }
.kp-manual h3 { font-family: var(--font-display); font-weight: 400; font-size: 24px; margin: 0 0 20px; }
.kp-manual .form-grid { grid-template-columns: 1fr 1fr 1fr; }
.kp-manual .field.full { grid-column: 1 / -1; }

/* ---- hours editor ---- */
.kp-hours-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.kp-hday { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 14px; text-align: center; }
.kp-hday .d { font-family: var(--font-ui); font-weight: 500; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 10px; }
.kp-hday select { width: 100%; background: var(--bg); border: 1px solid var(--border); color: var(--text-primary); border-radius: var(--radius-sm); padding: 8px 6px; font-size: 13px; margin-bottom: 6px; }

/* ---- flash ---- */
.kp-flash { padding: 14px 18px; border-radius: var(--radius-sm); margin-bottom: 16px; font-size: 14.5px; border: 1px solid; }
.kp-flash.ok { background: rgba(168,191,154,0.10); border-color: rgba(168,191,154,0.35); color: var(--ok); }
.kp-flash.err { background: var(--danger-bg); border-color: rgba(201,123,107,0.35); color: var(--danger); }

/* detail panel */
.kp-detail { max-width: 540px; margin: 24px auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 30px; }
.kp-detail h3 { font-family: var(--font-display); font-weight: 400; font-size: 28px; margin: 0 0 18px; }

/* ---- responsive ---- */
@media (max-width: 900px) {
  .kp-staff { grid-template-columns: 1fr; gap: 20px; }
  .kp-side { position: static; }
  .kp-nav { flex-direction: row; overflow-x: auto; flex-wrap: wrap; }
  .kp-nav button { border-left: none; border-bottom: 1px solid transparent; padding: 11px 4px; margin-right: 18px; white-space: nowrap; }
  .kp-nav button.on { border-left: none; border-bottom-color: var(--accent); }
  .kp-hours-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
  .kp-manual .form-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .kp-card { padding: 18px 18px; }
  .kp-grid-hours { display: none; }
  .kp-week { grid-template-columns: 1fr; }
  .kp-dayhead { border-radius: var(--radius-sm); margin-bottom: 4px; }
  .kp-daybody { border-radius: var(--radius-sm); border: 1px solid var(--border); margin-bottom: 10px; min-height: 0; }
  .kp-card .c-time { font-size: 24px; }
  .kp-card .c-name { font-size: 21px; }
}