.wtm-staff-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; max-width:640px; margin:20px auto; }
@media (max-width:520px){ .wtm-staff-grid{ grid-template-columns:1fr; } }
.wtm-staff-card { display:flex; flex-direction:column; align-items:center; gap:10px; padding:22px; background:#fff; border:1px solid #e3e3e3; border-radius:10px; text-decoration:none; color:#222; transition:.15s; }
.wtm-staff-card:hover { border-color:#2271b1; }
.wtm-staff-icon svg { width:36px; height:36px; color:#444; }
.wtm-staff-label { font-weight:600; }

.wtm-login { max-width:360px; margin:40px auto; padding:24px; border:1px solid #e3e3e3; border-radius:10px; }
.wtm-login-step label { display:block; margin-bottom:6px; font-weight:600; }
.wtm-login-step input[type=tel] { width:100%; padding:10px; border:1px solid #ccc; border-radius:6px; margin-bottom:12px; }
.wtm-btn { display:inline-block; padding:10px 16px; background:#2271b1; color:#fff; border:0; border-radius:6px; cursor:pointer; font-weight:600; }
.wtm-btn-link { background:none; border:0; color:#2271b1; cursor:pointer; padding:6px; }
.wtm-otp-boxes { display:flex; gap:6px; margin-bottom:12px; }
.wtm-otp-boxes input { width:42px; height:48px; text-align:center; font-size:20px; border:1px solid #ccc; border-radius:6px; }
.wtm-msg { color:#d63638; }

.wtm-form { max-width:520px; margin:20px auto; display:flex; flex-direction:column; gap:8px; }
.wtm-form label { font-weight:600; font-size:14px; }
.wtm-form input, .wtm-form select, .wtm-form textarea { padding:8px; border:1px solid #ccc; border-radius:6px; }
.wtm-table { width:100%; border-collapse:collapse; margin-top:12px; }
.wtm-table th, .wtm-table td { padding:8px; border-bottom:1px solid #eee; text-align:left; }

/* ============ SHARED CALENDAR UI ============ */
.wtm-calendar-container { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; }
.wtm-cal-header { font-size: 24px; color: #555; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid #eee; }
.wtm-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; }
.wtm-cal-cell { border: 1px solid #dcdcde; border-radius: 8px; padding: 10px; min-height: 110px; display: flex; flex-direction: column; background: #fff; position: relative; cursor: pointer; transition: border-color .15s; }
.wtm-cal-cell:hover { border-color: #999; }

/* Cell header */
.wtm-cal-cell .cc-head { text-align: center; margin-bottom: 8px; }
.wtm-cal-cell .cc-day { font-size: 11px; font-weight: 600; text-transform: uppercase; color: #777; letter-spacing: 0.5px; margin-bottom: 2px; }
.wtm-cal-cell .cc-date { font-size: 20px; font-weight: 700; color: #111; line-height: 1; }

/* Pills */
.wtm-cal-cell .cc-pill-wrap { text-align: center; margin-bottom: 10px; min-height: 20px; }
.wtm-cal-cell .cc-pill { display: inline-block; padding: 3px 8px; border-radius: 12px; font-size: 11px; font-weight: 600; color: #fff; }
.wtm-cal-cell .cc-pill.present { background: #26b277; }
.wtm-cal-cell .cc-pill.ot_day { background: #8f5fce; }

/* Checkbox area */
.wtm-cal-cell .cc-check { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: auto; font-size: 11px; color: #666; cursor: pointer; }
.wtm-cal-cell .cc-check input { margin: 0; cursor: pointer; }

/* States */
.wtm-cal-cell.is-present { border: 2px solid #26b277; }
.wtm-cal-cell.is-ot { border: 2px solid #8f5fce; }
.wtm-cal-cell.dirty { outline: 2px dashed #d63638; outline-offset: 2px; }
.wtm-cal-cell.woff { background: #f9f9f9; }

/* Save row */
.wtm-att-actions { margin-top: 24px; display: flex; gap: 12px; align-items: center; }

@media (max-width: 768px) {
    .wtm-cal-grid { gap: 6px; }
    .wtm-cal-cell { padding: 6px; min-height: 90px; }
    .wtm-cal-cell .cc-date { font-size: 16px; }
    .wtm-cal-cell .cc-check span { display: none; }
}